From 580a7cf718d62ecaf9f740947b2638e9cdaf171b Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 07:34:42 +0900 Subject: [PATCH 01/14] =?UTF-8?q?chore:=20useKeyboardNavigation=E3=81=AEis?= =?UTF-8?q?ElementDisabled=E5=86=85=E3=81=A7=E4=B8=8D=E8=A6=81=E3=81=AA?= =?UTF-8?q?=E7=84=A1=E5=90=8D=E9=96=A2=E6=95=B0=E3=81=AE=E7=94=9F=E6=88=90?= =?UTF-8?q?=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dropdown/DropdownMenuButton/useKeyboardNavigation.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts index d5cb97f2da..6a3f079cc5 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts @@ -4,8 +4,11 @@ const matchesDisabledState = (element: Element): boolean => element.matches(':disabled') || element.getAttribute('aria-disabled') === 'true' const isElementDisabled = (element: Element): boolean => { - if (matchesDisabledState(element)) return true - return Array.from(element.querySelectorAll('*')).some((child) => matchesDisabledState(child)) + if (matchesDisabledState(element)) { + return true + } + + return Array.from(element.querySelectorAll('*')).some(matchesDisabledState) } const moveFocus = ( @@ -71,6 +74,7 @@ const useKeyboardNavigation = (containerRef: React.RefObject) => { } acc.tabbableItems.push(item) + if (document.activeElement === item) { acc.focusedIndex = acc.tabbableItems.length - 1 } @@ -97,6 +101,7 @@ const useKeyboardNavigation = (containerRef: React.RefObject) => { useEffect(() => { document.addEventListener('keydown', handleKeyDown) + return () => { document.removeEventListener('keydown', handleKeyDown) } From af5e3090714862ef940653ccddd6c18933a0de13 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 07:47:32 +0900 Subject: [PATCH 02/14] =?UTF-8?q?chore:=20useKeyboardNavigation=E3=81=AEmo?= =?UTF-8?q?veFocus=E3=82=92=E3=83=AA=E3=83=95=E3=82=A1=E3=82=AF=E3=82=BF?= =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../useKeyboardNavigation.ts | 29 ++++++++----------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts index 6a3f079cc5..5910be9087 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts @@ -12,29 +12,24 @@ const isElementDisabled = (element: Element): boolean => { } const moveFocus = ( - direction: number, + direction: 1 | -1, enabledItems: Element[], focusedIndex: number, hoveredItem: Element | null, ) => { - const calculateNextIndex = () => { - if (focusedIndex > -1) { - // フォーカスされているアイテムが存在する場合 - return (focusedIndex + direction + enabledItems.length) % enabledItems.length - } - - if (hoveredItem) { - // ホバー状態のアイテムが存在する場合 - return ( - (enabledItems.indexOf(hoveredItem) + direction + enabledItems.length) % enabledItems.length - ) - } - - // どちらもない場合は最初のアイテムからスタート - return direction > 0 ? 0 : enabledItems.length - 1 + let nextIndex = 0 + + if (focusedIndex > -1) { + // フォーカスされているアイテムが存在する場合 + nextIndex = (focusedIndex + direction + enabledItems.length) % enabledItems.length + } else if (hoveredItem) { + // ホバー状態のアイテムが存在する場合 + nextIndex = + (enabledItems.indexOf(hoveredItem) + direction + enabledItems.length) % enabledItems.length + } else if (direction === -1) { + nextIndex = enabledItems.length - 1 } - const nextIndex = calculateNextIndex() const nextItem = enabledItems[nextIndex] if (nextItem instanceof HTMLElement) { From 8b4432281667c232102f18eed0bdf4142c1c26f3 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 07:51:52 +0900 Subject: [PATCH 03/14] =?UTF-8?q?chore:=20useKeyboardNavigation=E5=86=85?= =?UTF-8?q?=E3=81=AEreduce=E5=87=A6=E7=90=86=E3=81=A7=E5=B8=B8=E3=81=ABacc?= =?UTF-8?q?=E3=82=92=E8=BF=94=E3=81=99=E3=81=93=E3=81=A8=E3=82=92=E3=82=8F?= =?UTF-8?q?=E3=81=8B=E3=82=8A=E3=82=84=E3=81=99=E3=81=8F=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DropdownMenuButton/useKeyboardNavigation.ts | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts index 5910be9087..cf1853a2a3 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts @@ -62,16 +62,12 @@ const useKeyboardNavigation = (containerRef: React.RefObject) => { acc.hoveredItem = item } - const isDisabled = isElementDisabled(item) + if (!isElementDisabled(item)) { + acc.tabbableItems.push(item) - if (isDisabled) { - return acc - } - - acc.tabbableItems.push(item) - - if (document.activeElement === item) { - acc.focusedIndex = acc.tabbableItems.length - 1 + if (document.activeElement === item) { + acc.focusedIndex = acc.tabbableItems.length - 1 + } } return acc From 99f5553bd11af42bff1e20bfd3dc60e072a4936f Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 07:53:22 +0900 Subject: [PATCH 04/14] =?UTF-8?q?chore:=20useKeyboardNavigation=E5=86=85?= =?UTF-8?q?=E3=81=AEkeydown=E5=88=A4=E5=AE=9A=E3=81=AEif-else=E3=82=92?= =?UTF-8?q?=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dropdown/DropdownMenuButton/useKeyboardNavigation.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts index cf1853a2a3..d51c506a98 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts @@ -81,9 +81,7 @@ const useKeyboardNavigation = (containerRef: React.RefObject) => { if (['Up', 'ArrowUp', 'Left', 'ArrowLeft'].includes(e.key)) { moveFocus(-1, enabledItems, focusedIndex, hoveredItem) - } - - if (['Down', 'ArrowDown', 'Right', 'ArrowRight'].includes(e.key)) { + } else if (['Down', 'ArrowDown', 'Right', 'ArrowRight'].includes(e.key)) { moveFocus(1, enabledItems, focusedIndex, hoveredItem) } }, From ffce4fbcf9102d07f250bf1883660048dd9bda34 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 07:59:30 +0900 Subject: [PATCH 05/14] =?UTF-8?q?chore:=20useKeyboardNavigation=E5=86=85?= =?UTF-8?q?=E3=81=AE=E9=85=8D=E5=88=97=E3=81=AB=E5=AF=BE=E3=81=99=E3=82=8B?= =?UTF-8?q?includes=E3=82=92=E6=AD=A3=E8=A6=8F=E8=A1=A8=E7=8F=BE=E3=81=AB?= =?UTF-8?q?=E5=A4=89=E6=9B=B4=E3=81=97=E9=AB=98=E9=80=9F=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dropdown/DropdownMenuButton/useKeyboardNavigation.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts index d51c506a98..9966223215 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts @@ -11,6 +11,9 @@ const isElementDisabled = (element: Element): boolean => { return Array.from(element.querySelectorAll('*')).some(matchesDisabledState) } +const KEY_UP_REGEX = /^(Arrow)?(Up|Left)$/ +const KEY_DOWN_REGEX = /^(Arrow)?(Down|Right)$/ + const moveFocus = ( direction: 1 | -1, enabledItems: Element[], @@ -79,9 +82,9 @@ const useKeyboardNavigation = (containerRef: React.RefObject) => { }, ) - if (['Up', 'ArrowUp', 'Left', 'ArrowLeft'].includes(e.key)) { + if (KEY_UP_REGEX.test(e.key)) { moveFocus(-1, enabledItems, focusedIndex, hoveredItem) - } else if (['Down', 'ArrowDown', 'Right', 'ArrowRight'].includes(e.key)) { + } else if (KEY_DOWN_REGEX.test(e.key)) { moveFocus(1, enabledItems, focusedIndex, hoveredItem) } }, From dca7bcf6b7c993c7f4391323a6d92e71cacfe019 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 08:00:35 +0900 Subject: [PATCH 06/14] =?UTF-8?q?chore:=20useKeyboardNavigation=E5=86=85?= =?UTF-8?q?=E3=81=AE=E5=86=85=E9=83=A8=E5=A4=89=E6=95=B0=E5=90=8D=E3=82=92?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../useKeyboardNavigation.ts | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts index 9966223215..025119c6e3 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts @@ -16,7 +16,7 @@ const KEY_DOWN_REGEX = /^(Arrow)?(Down|Right)$/ const moveFocus = ( direction: 1 | -1, - enabledItems: Element[], + tabbableItems: Element[], focusedIndex: number, hoveredItem: Element | null, ) => { @@ -24,16 +24,16 @@ const moveFocus = ( if (focusedIndex > -1) { // フォーカスされているアイテムが存在する場合 - nextIndex = (focusedIndex + direction + enabledItems.length) % enabledItems.length + nextIndex = (focusedIndex + direction + tabbableItems.length) % tabbableItems.length } else if (hoveredItem) { // ホバー状態のアイテムが存在する場合 nextIndex = - (enabledItems.indexOf(hoveredItem) + direction + enabledItems.length) % enabledItems.length + (tabbableItems.indexOf(hoveredItem) + direction + tabbableItems.length) % tabbableItems.length } else if (direction === -1) { - nextIndex = enabledItems.length - 1 + nextIndex = tabbableItems.length - 1 } - const nextItem = enabledItems[nextIndex] + const nextItem = tabbableItems[nextIndex] if (nextItem instanceof HTMLElement) { nextItem.focus() @@ -48,11 +48,7 @@ const useKeyboardNavigation = (containerRef: React.RefObject) => { } const allItems = Array.from(containerRef.current.querySelectorAll('li > *')) - const { - hoveredItem, - tabbableItems: enabledItems, - focusedIndex, - } = allItems.reduce( + const { hoveredItem, tabbableItems, focusedIndex } = allItems.reduce( ( acc: { hoveredItem: Element | null @@ -83,9 +79,9 @@ const useKeyboardNavigation = (containerRef: React.RefObject) => { ) if (KEY_UP_REGEX.test(e.key)) { - moveFocus(-1, enabledItems, focusedIndex, hoveredItem) + moveFocus(-1, tabbableItems, focusedIndex, hoveredItem) } else if (KEY_DOWN_REGEX.test(e.key)) { - moveFocus(1, enabledItems, focusedIndex, hoveredItem) + moveFocus(1, tabbableItems, focusedIndex, hoveredItem) } }, [containerRef], From eb7049c26dc784ce342528a08737325f002cb66a Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 08:05:14 +0900 Subject: [PATCH 07/14] =?UTF-8?q?chore:=20useKeyboardNavigation=E5=86=85?= =?UTF-8?q?=E3=81=A7=E4=B8=8D=E5=BF=85=E8=A6=81=E3=81=AB=E5=A4=89=E6=95=B0?= =?UTF-8?q?=E3=81=8C=E7=94=9F=E6=88=90=E3=81=95=E3=82=8C=E3=82=8B=E3=83=91?= =?UTF-8?q?=E3=82=BF=E3=83=BC=E3=83=B3=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../useKeyboardNavigation.ts | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts index 025119c6e3..90f8ff5861 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts @@ -47,6 +47,18 @@ const useKeyboardNavigation = (containerRef: React.RefObject) => { return } + let direction: null | 1 | -1 = null + + if (KEY_UP_REGEX.test(e.key)) { + direction = -1 + } else if (KEY_DOWN_REGEX.test(e.key)) { + direction = 1 + } + + if (direction === null) { + return + } + const allItems = Array.from(containerRef.current.querySelectorAll('li > *')) const { hoveredItem, tabbableItems, focusedIndex } = allItems.reduce( ( @@ -78,11 +90,7 @@ const useKeyboardNavigation = (containerRef: React.RefObject) => { }, ) - if (KEY_UP_REGEX.test(e.key)) { - moveFocus(-1, tabbableItems, focusedIndex, hoveredItem) - } else if (KEY_DOWN_REGEX.test(e.key)) { - moveFocus(1, tabbableItems, focusedIndex, hoveredItem) - } + moveFocus(direction, tabbableItems, focusedIndex, hoveredItem) }, [containerRef], ) From 98e614776f1c8098c0469755f428dc90f8b3d882 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 08:10:55 +0900 Subject: [PATCH 08/14] =?UTF-8?q?chore:=20useKeyboardNavigation=E5=86=85?= =?UTF-8?q?=E3=81=AEmoveFocus=E3=81=AB=E3=83=AD=E3=82=B8=E3=83=83=E3=82=AF?= =?UTF-8?q?=E3=82=92=E9=9A=A0=E8=94=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../useKeyboardNavigation.ts | 82 ++++++++----------- 1 file changed, 35 insertions(+), 47 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts index 90f8ff5861..b8746bad30 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/useKeyboardNavigation.ts @@ -14,12 +14,39 @@ const isElementDisabled = (element: Element): boolean => { const KEY_UP_REGEX = /^(Arrow)?(Up|Left)$/ const KEY_DOWN_REGEX = /^(Arrow)?(Down|Right)$/ -const moveFocus = ( - direction: 1 | -1, - tabbableItems: Element[], - focusedIndex: number, - hoveredItem: Element | null, -) => { +const moveFocus = (element: Element, direction: 1 | -1) => { + const { hoveredItem, tabbableItems, focusedIndex } = Array.from( + element.querySelectorAll('li > *'), + ).reduce( + ( + acc: { + hoveredItem: Element | null + tabbableItems: Element[] + focusedIndex: number + }, + item, + ) => { + if (item.matches(':hover') && acc.hoveredItem === null) { + acc.hoveredItem = item + } + + if (!isElementDisabled(item)) { + acc.tabbableItems.push(item) + + if (document.activeElement === item) { + acc.focusedIndex = acc.tabbableItems.length - 1 + } + } + + return acc + }, + { + hoveredItem: null, + tabbableItems: [], + focusedIndex: -1, + }, + ) + let nextIndex = 0 if (focusedIndex > -1) { @@ -47,50 +74,11 @@ const useKeyboardNavigation = (containerRef: React.RefObject) => { return } - let direction: null | 1 | -1 = null - if (KEY_UP_REGEX.test(e.key)) { - direction = -1 + moveFocus(containerRef.current, -1) } else if (KEY_DOWN_REGEX.test(e.key)) { - direction = 1 + moveFocus(containerRef.current, 1) } - - if (direction === null) { - return - } - - const allItems = Array.from(containerRef.current.querySelectorAll('li > *')) - const { hoveredItem, tabbableItems, focusedIndex } = allItems.reduce( - ( - acc: { - hoveredItem: Element | null - tabbableItems: Element[] - focusedIndex: number - }, - item, - ) => { - if (item.matches(':hover') && acc.hoveredItem === null) { - acc.hoveredItem = item - } - - if (!isElementDisabled(item)) { - acc.tabbableItems.push(item) - - if (document.activeElement === item) { - acc.focusedIndex = acc.tabbableItems.length - 1 - } - } - - return acc - }, - { - hoveredItem: null, - tabbableItems: [], - focusedIndex: -1, - }, - ) - - moveFocus(direction, tabbableItems, focusedIndex, hoveredItem) }, [containerRef], ) From bbc2dfa3127e481dcd3979bcc1976358f54cf3e1 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 08:24:23 +0900 Subject: [PATCH 09/14] =?UTF-8?q?chore:=20renderButtonList=E3=81=AE?= =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E5=88=86=E5=B2=90=E3=82=92=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DropdownMenuButton/DropdownMenuButton.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx index 809d4856ee..9e9fdbe52b 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx @@ -116,13 +116,15 @@ export const DropdownMenuButton: FC = ({ export const renderButtonList = (children: Actions) => React.Children.map(children, (item): ReactNode => { - if (!(item && React.isValidElement(item))) return null - if (item.type === React.Fragment) { - return renderButtonList(item.props.children) + if (!item || !React.isValidElement(item)) { + return null } - if (item.type === DropdownMenuGroup) { - return item + switch (item.type) { + case React.Fragment: + return renderButtonList(item.props.children) + case DropdownMenuGroup: + return item } const actualElement = React.cloneElement(item as ReactElement, { From 5676e4289bf701621b3eccfbcaa55761192878a4 Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 08:29:19 +0900 Subject: [PATCH 10/14] =?UTF-8?q?chore:=20DropdownMenuButton=E3=81=AEButto?= =?UTF-8?q?nSuffixIcon=E3=81=AEmemo=E5=8C=96=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DropdownMenuButton/DropdownMenuButton.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx index 9e9fdbe52b..a9fc5dbe48 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx @@ -70,7 +70,7 @@ export const DropdownMenuButton: FC = ({ label, children, triggerSize, - onlyIconTrigger = false, + onlyIconTrigger, triggerIcon: TriggerIcon, className, ...props @@ -85,10 +85,6 @@ export const DropdownMenuButton: FC = ({ label ) }, [label, TriggerIcon, onlyIconTrigger]) - const triggerSuffix = useMemo( - () => (onlyIconTrigger ? undefined : ), - [onlyIconTrigger], - ) useKeyboardNavigation(containerRef) @@ -97,7 +93,7 @@ export const DropdownMenuButton: FC = ({ @@ -110,8 +101,20 @@ export const DropdownMenuButton: FC = ({ ) } +const TriggerLabel = React.memo>( + ({ label, onlyIconTrigger, triggerIcon }) => { + if (!onlyIconTrigger) { + return label + } + + const Icon = triggerIcon || FaEllipsisIcon + + return + }, +) + const ButtonSuffixIcon = React.memo>( - ({ onlyIconTrigger }) => onlyIconTrigger && , + ({ onlyIconTrigger }) => !onlyIconTrigger && , ) export const renderButtonList = (children: Actions) => From 4e3a70bad93acee13203f41150f94be67df0599f Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 08:59:14 +0900 Subject: [PATCH 12/14] =?UTF-8?q?chore:=20DropdownMenuButton=E3=81=AEtrigg?= =?UTF-8?q?er=E3=81=AFmemo=E5=8C=96=E3=81=8C=E6=9C=89=E5=8A=B9=E3=81=AA?= =?UTF-8?q?=E5=A0=B4=E5=90=88=E3=81=8C=E5=A4=9A=E3=81=84=E3=81=9F=E3=82=81?= =?UTF-8?q?=E5=AF=BE=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DropdownMenuButton/DropdownMenuButton.tsx | 53 ++++++++++++++----- 1 file changed, 40 insertions(+), 13 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx index 405f1866f9..51f629b75b 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx @@ -73,27 +73,34 @@ export const DropdownMenuButton: FC = ({ onlyIconTrigger, triggerIcon, className, - ...props + ...rest }) => { const containerRef = React.useRef(null) useKeyboardNavigation(containerRef) + const styles = useMemo( + () => ({ + triggerWrapper: triggerWrapper({ className }), + triggerButton: triggerButton(), + actionList: actionList(), + }), + [className], + ) + return ( - - - + - + {renderButtonList(children)} @@ -101,6 +108,26 @@ export const DropdownMenuButton: FC = ({ ) } +const MemoizedTriggerButton = React.memo< + Pick & + ElementProps & { wrapperStyle: string; buttonStyle: string } +>( + ({ onlyIconTrigger, triggerSize, label, triggerIcon, wrapperStyle, buttonStyle, ...rest }) => ( + + + + ), + [], +) + const TriggerLabel = React.memo>( ({ label, onlyIconTrigger, triggerIcon }) => { if (!onlyIconTrigger) { From cf0977cd22e202435251343b91371613dd8915da Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 09:04:00 +0900 Subject: [PATCH 13/14] =?UTF-8?q?chore:=20DropdownMenuGroup=E3=81=AEstyle?= =?UTF-8?q?=E7=94=9F=E6=88=90=E3=83=AD=E3=82=B8=E3=83=83=E3=82=AF=E3=82=92?= =?UTF-8?q?memo=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DropdownMenuButton/DropdownMenuGroup.tsx | 39 +++++++++++++------ 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx index 4fec4fe0c9..77e7ac9da6 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx @@ -1,4 +1,4 @@ -import React, { ComponentProps, type PropsWithChildren, type ReactNode } from 'react' +import React, { ComponentProps, type PropsWithChildren, type ReactNode, useMemo } from 'react' import { tv } from 'tailwind-variants' import { Text } from '../../Text' @@ -36,13 +36,30 @@ export const DropdownMenuGroup: React.FC = ({ name, children, className, -}) => ( -
  • - {name && ( - - {name} - - )} -
      {renderButtonList(children)}
    -
    • -) +}) => { + const styles = useMemo( + () => ({ + group: group({ className }), + groupName: groupName(), + }), + [className], + ) + + return ( +
  • + {name && ( + + {name} + + )} +
      {renderButtonList(children)}
    +
    • + ) +} From 0590fe264e13207a594339ad657f64d1f4ac1d0d Mon Sep 17 00:00:00 2001 From: AtsushiM Date: Wed, 22 Jan 2025 09:08:16 +0900 Subject: [PATCH 14/14] =?UTF-8?q?chore:=20DropdownMenuGroup=E3=81=AENameTe?= =?UTF-8?q?xt=E3=82=92memo=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DropdownMenuButton/DropdownMenuButton.tsx | 35 +++++++++---------- .../DropdownMenuButton/DropdownMenuGroup.tsx | 22 ++++++------ 2 files changed, 26 insertions(+), 31 deletions(-) diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx index 51f629b75b..0eda011d15 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx @@ -96,7 +96,7 @@ export const DropdownMenuButton: FC = ({ onlyIconTrigger={onlyIconTrigger} triggerIcon={triggerIcon} triggerSize={triggerSize} - className={styles.triggerWrapper} + wrapperStyle={styles.triggerWrapper} buttonStyle={styles.triggerButton} /> @@ -111,24 +111,21 @@ export const DropdownMenuButton: FC = ({ const MemoizedTriggerButton = React.memo< Pick & ElementProps & { wrapperStyle: string; buttonStyle: string } ->( - ({ onlyIconTrigger, triggerSize, label, triggerIcon, wrapperStyle, buttonStyle, ...rest }) => ( - - - - ), - [], -) - -const TriggerLabel = React.memo>( +>(({ onlyIconTrigger, triggerSize, label, triggerIcon, wrapperStyle, buttonStyle, ...rest }) => ( + + + +)) + +const TriggerLabelText = React.memo>( ({ label, onlyIconTrigger, triggerIcon }) => { if (!onlyIconTrigger) { return label diff --git a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx index 77e7ac9da6..01d8255e3c 100644 --- a/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx +++ b/packages/smarthr-ui/src/components/Dropdown/DropdownMenuButton/DropdownMenuGroup.tsx @@ -47,19 +47,17 @@ export const DropdownMenuGroup: React.FC = ({ return (
  • - {name && ( - - {name} - - )} + {name}
      {renderButtonList(children)}
    • ) } + +const NameText = React.memo>( + ({ children, className }) => + children && ( + + {children} + + ), +)