smarthr-ui 96.1.0 → 96.1.2

package/lib/components/Dropdown/DropdownMenuButton/DropdownMenuButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuButton.cjs","sources":["../../../../src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type FC,\n  Fragment,\n  type ReactElement,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../../hooks/useObjectAttributes'\nimport { useIntl } from '../../../intl'\nimport { type AnchorButton, Button, type AbstractProps as ButtonProps } from '../../Button'\nimport { FaCaretDownIcon, FaEllipsisIcon } from '../../Icon'\nimport { Dropdown, DropdownContext } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\nimport { DropdownMenuGroup } from './DropdownMenuGroup'\nimport useKeyboardNavigation from './useKeyboardNavigation'\n\nimport type { RemoteDialogTrigger } from '../../Dialog'\n\ntype Actions = ActionItem | ActionItem[]\n\n// これでコンポーネントを絞れるわけではないが Button[variant=text] を使ってほしいんだよ! という気持ち\ntype ActionItem =\n  | ReactElement<ComponentProps<typeof Button>>\n  | ReactElement<ComponentProps<typeof AnchorButton>>\n  | ReactElement<ComponentProps<typeof RemoteDialogTrigger>>\n  | ReactNode\n\ntype ObjectTriggerType = {\n  /** 引き金となるボタンラベル */\n  children: ReactNode\n  /** 引き金となるボタンの大きさ */\n  size?: ButtonProps['size']\n  /** 引き金となるボタンをアイコンのみとするかどうか */\n  onlyIcon?:\n    | boolean\n    | {\n        /** 引き金となるアイコンを差し替えたい場合（onlyIcon=true の場合のみ有効） */\n        component?: ComponentType<ComponentProps<typeof FaCaretDownIcon>>\n      }\n}\ntype AbstractProps = {\n  /** 引き金となるボタン */\n  trigger: ReactNode | ObjectTriggerType\n  /** 操作群 */\n  children: Actions\n  /** ドロップダウンメニューが開かれた際のイベント */\n  onOpen?: () => void\n  /** ドロップダウンメニューが閉じられた際のイベント */\n  onClose?: () => void\n}\ntype ElementProps = Omit<ComponentPropsWithRef<'button'>, keyof AbstractProps>\ntype Props = AbstractProps & ElementProps\n\nconst triggerObjectConverter = (trigger: ReactNode) => ({\n  children: trigger,\n})\n\nconst classNameGenerator = tv({\n  slots: {\n    triggerWrapper: 'smarthr-ui-DropdownMenuButton',\n    triggerButton:\n      'smarthr-ui-DropdownMenuButton-trigger [&[aria-expanded=\"true\"]_.smarthr-ui-Icon:last-child]:shr-rotate-180',\n    actionList: [\n      'smarthr-ui-DropdownMenuButton-panel',\n      'shr-list-none shr-py-0.5',\n      [\n        /* unset した Button の右 padding 分 */\n        '[&_.smarthr-ui-Button-disabledWrapper]:shr-pe-1',\n        '[&_.smarthr-ui-Button-disabledWrapper]:shr-gap-x-0.5',\n        '[&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-w-[unset] [&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-bg-transparent [&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-pe-[unset]',\n      ],\n    ],\n    actionListItemButton: [\n      // HINT: 実際にレンダリングされた要素のclassに対して追加されるため、優先度を上げる必要がある\n      '[&&]:shr-w-full [&&]:shr-justify-start [&&]:shr-rounded-none [&&]:shr-border-none [&&]:shr-py-0.5 [&&]:shr-font-normal',\n      '[&&]:focus-visible:shr-focus-indicator',\n    ],\n  },\n})\n\nconst { triggerWrapper, triggerButton, actionList, actionListItemButton } = classNameGenerator()\n\nexport const DropdownMenuButton: FC<Props> = ({\n  trigger,\n  children,\n  onOpen,\n  onClose,\n  className,\n  ...rest\n}) => {\n  const {\n    children: triggerChildren,\n    size: triggerSize,\n    onlyIcon: onlyIconTrigger,\n  } = useObjectAttributes<ReactNode | ObjectTriggerType, ObjectTriggerType>(\n    trigger,\n    triggerObjectConverter,\n  )\n\n  const containerRef = useRef<HTMLUListElement>(null)\n\n  useKeyboardNavigation(containerRef)\n\n  const classNames = useMemo(\n    () => ({\n      triggerWrapper: triggerWrapper({ className }),\n      triggerButton: triggerButton(),\n      actionList: actionList(),\n    }),\n    [className],\n  )\n\n  return (\n    <Dropdown onOpen={onOpen} onClose={onClose}>\n      <MemoizedTriggerButton\n        {...rest}\n        onlyIconTrigger={onlyIconTrigger}\n        triggerSize={triggerSize}\n        classNames={classNames}\n      >\n        {triggerChildren}\n      </MemoizedTriggerButton>\n      <DropdownContent controllable={true}>\n        <menu ref={containerRef} role=\"menu\" className={classNames.actionList}>\n          {renderButtonList(children)}\n        </menu>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst MemoizedTriggerButton = memo<\n  ElementProps & {\n    onlyIconTrigger: ObjectTriggerType['onlyIcon']\n    triggerSize: ObjectTriggerType['size']\n    children: ObjectTriggerType['children']\n    classNames: {\n      triggerWrapper: string\n      triggerButton: string\n    }\n  }\n>(({ onlyIconTrigger, triggerSize, children, classNames, ...rest }) => {\n  const { localize } = useIntl()\n\n  const { active } = useContext(DropdownContext)\n\n  const showTooltip = !!onlyIconTrigger\n  const tooltip = useMemo(() => ({ show: showTooltip, message: children }), [children, showTooltip])\n\n  return (\n    <DropdownTrigger className={classNames.triggerWrapper} tooltip={tooltip}>\n      <Button\n        {...rest}\n        suffix={\n          !onlyIconTrigger && (\n            <FaCaretDownIcon\n              alt={\n                active\n                  ? localize({\n                      id: 'smarthr-ui/DropdownMenuButton/triggerActive',\n                      defaultText: '候補を閉じる',\n                    })\n                  : localize({\n                      id: 'smarthr-ui/DropdownMenuButton/triggerInactive',\n                      defaultText: '候補を開く',\n                    })\n              }\n            />\n          )\n        }\n        size={triggerSize}\n        className={classNames.triggerButton}\n      >\n        <TriggerLabelText onlyIconTrigger={onlyIconTrigger}>{children}</TriggerLabelText>\n      </Button>\n    </DropdownTrigger>\n  )\n})\n\nconst TriggerLabelText = memo<{\n  onlyIconTrigger: ObjectTriggerType['onlyIcon']\n  children: ObjectTriggerType['children']\n}>(({ children, onlyIconTrigger }) => {\n  if (!onlyIconTrigger) {\n    return children\n  }\n\n  const Icon = (typeof onlyIconTrigger === 'object' && onlyIconTrigger.component) || FaEllipsisIcon\n\n  return <Icon alt={typeof children === 'string' ? children : innerText(children)} />\n})\n\nexport const renderButtonList = (children: Actions) =>\n  Children.map(children, (item): ReactNode => {\n    if (!item || !isValidElement(item)) {\n      return null\n    }\n\n    switch (item.type) {\n      case Fragment:\n        return renderButtonList(item.props.children)\n      case DropdownMenuGroup:\n        return item\n    }\n\n    return <ButtonListItem>{item}</ButtonListItem>\n  })\n\nconst ButtonListItem: FC<{ children: ReactElement }> = ({ children }) => {\n  const ref = useRef<HTMLLIElement>(null)\n\n  useEffect(() => {\n    if (!ref.current) {\n      return\n    }\n\n    const button = ref.current.querySelector('button,a')\n\n    if (button) {\n      button.setAttribute('role', 'menuitem')\n      button.setAttribute(\n        'class',\n        actionListItemButton({ className: button.getAttribute('class') }),\n      )\n    }\n  }, [children])\n\n  return (\n    <li role=\"presentation\" ref={ref}>\n      <DropdownCloser>{children}</DropdownCloser>\n    </li>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA;AACE;AACD;AAED;AACE;AACE;AACA;AAEA;;;AAGE;;;;;AAKC;AACF;AACD;;;;AAIC;AACF;AACF;AAED;;;AAmBE;;AAIA;AAEI;;;AAGD;AAIH;AAiBF;AAEA;AAWE;;AAIA;;AAGA;;AAUoB;AACA;;;AAGA;AACA;;AAatB;AAEA;;AAKI;;AAGF;;AAGF;AAEO;;AAGD;;AAGF;AACE;;AAEA;AACE;;AAGJ;AACF;AAEF;AACE;;AAGE;;;;;AAOE;AACA;;AAKJ;AAEA;AAKF;;;"}
+{"version":3,"file":"DropdownMenuButton.cjs","sources":["../../../../src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type FC,\n  Fragment,\n  type ReactElement,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../../hooks/useObjectAttributes'\nimport { useIntl } from '../../../intl'\nimport { type AnchorButton, Button, type AbstractProps as ButtonProps } from '../../Button'\nimport { FaCaretDownIcon, FaEllipsisIcon } from '../../Icon'\nimport { Dropdown, DropdownContext } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\nimport { DropdownMenuGroup } from './DropdownMenuGroup'\nimport useKeyboardNavigation from './useKeyboardNavigation'\n\nimport type { RemoteDialogTrigger } from '../../Dialog'\n\ntype Actions = ActionItem | ActionItem[]\n\n// これでコンポーネントを絞れるわけではないが Button[variant=text] を使ってほしいんだよ! という気持ち\ntype ActionItem =\n  | ReactElement<ComponentProps<typeof Button>>\n  | ReactElement<ComponentProps<typeof AnchorButton>>\n  | ReactElement<ComponentProps<typeof RemoteDialogTrigger>>\n  | ReactNode\n\ntype ObjectTriggerType = {\n  /** 引き金となるボタンラベル */\n  children: ReactNode\n  /** 引き金となるボタンの大きさ */\n  size?: ButtonProps['size']\n  /** 引き金となるボタンをアイコンのみとするかどうか */\n  onlyIcon?:\n    | boolean\n    | {\n        /** 引き金となるアイコンを差し替えたい場合（onlyIcon=true の場合のみ有効） */\n        component?: ComponentType<ComponentProps<typeof FaCaretDownIcon>>\n      }\n}\ntype AbstractProps = {\n  /** 引き金となるボタン */\n  trigger: ReactNode | ObjectTriggerType\n  /** 操作群 */\n  children: Actions\n  /** ドロップダウンメニューが開かれた際のイベント */\n  onOpen?: () => void\n  /** ドロップダウンメニューが閉じられた際のイベント */\n  onClose?: () => void\n}\ntype ElementProps = Omit<ComponentPropsWithRef<'button'>, keyof AbstractProps>\ntype Props = AbstractProps & ElementProps\n\nconst triggerObjectConverter = (trigger: ReactNode) => ({\n  children: trigger,\n})\n\nconst classNameGenerator = tv({\n  slots: {\n    triggerWrapper: 'smarthr-ui-DropdownMenuButton',\n    triggerButton:\n      'smarthr-ui-DropdownMenuButton-trigger [&[aria-expanded=\"true\"]_.smarthr-ui-Icon:last-child]:shr-rotate-180',\n    actionList: [\n      'smarthr-ui-DropdownMenuButton-panel',\n      'shr-list-none shr-py-0.5',\n      [\n        /* unset した Button の右 padding 分 */\n        '[&_.smarthr-ui-Button-disabledWrapper]:shr-pe-1',\n        '[&_.smarthr-ui-Button-disabledWrapper]:shr-gap-x-0.5',\n        '[&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-w-[unset] [&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-bg-transparent [&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-pe-[unset]',\n      ],\n    ],\n    actionListItemButton: [\n      // HINT: 実際にレンダリングされた要素のclassに対して追加されるため、優先度を上げる必要がある\n      '[&&]:shr-w-full [&&]:shr-justify-start [&&]:shr-rounded-none [&&]:shr-border-none [&&]:shr-py-0.5 [&&]:shr-font-normal',\n      '[&&]:focus-visible:shr-focus-indicator',\n    ],\n  },\n})\n\nconst { triggerWrapper, triggerButton, actionList, actionListItemButton } = classNameGenerator()\n\nexport const DropdownMenuButton: FC<Props> = ({\n  trigger,\n  children,\n  onOpen,\n  onClose,\n  className,\n  ...rest\n}) => {\n  const {\n    children: triggerChildren,\n    size: triggerSize,\n    onlyIcon: onlyIconTrigger,\n  } = useObjectAttributes<ReactNode | ObjectTriggerType, ObjectTriggerType>(\n    trigger,\n    triggerObjectConverter,\n  )\n\n  const containerRef = useRef<HTMLUListElement>(null)\n\n  useKeyboardNavigation(containerRef)\n\n  const classNames = useMemo(\n    () => ({\n      triggerWrapper: triggerWrapper({ className }),\n      triggerButton: triggerButton(),\n      actionList: actionList(),\n    }),\n    [className],\n  )\n\n  return (\n    <Dropdown onOpen={onOpen} onClose={onClose}>\n      <MemoizedTriggerButton\n        {...rest}\n        onlyIconTrigger={onlyIconTrigger}\n        triggerSize={triggerSize}\n        classNames={classNames}\n      >\n        {triggerChildren}\n      </MemoizedTriggerButton>\n      <DropdownContent controllable={true}>\n        <menu ref={containerRef} role=\"menu\" className={classNames.actionList}>\n          {renderButtonList(children)}\n        </menu>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst MemoizedTriggerButton = memo<\n  ElementProps & {\n    onlyIconTrigger: ObjectTriggerType['onlyIcon']\n    triggerSize: ObjectTriggerType['size']\n    children: ObjectTriggerType['children']\n    classNames: {\n      triggerWrapper: string\n      triggerButton: string\n    }\n  }\n>(({ onlyIconTrigger, triggerSize, children, classNames, ...rest }) => {\n  const { localize } = useIntl()\n\n  const { active } = useContext(DropdownContext)\n\n  return (\n    <DropdownTrigger\n      className={classNames.triggerWrapper}\n      tooltip={{ show: !!onlyIconTrigger, message: children }}\n    >\n      <Button\n        {...rest}\n        suffix={\n          !onlyIconTrigger && (\n            <FaCaretDownIcon\n              alt={\n                active\n                  ? localize({\n                      id: 'smarthr-ui/DropdownMenuButton/triggerActive',\n                      defaultText: '候補を閉じる',\n                    })\n                  : localize({\n                      id: 'smarthr-ui/DropdownMenuButton/triggerInactive',\n                      defaultText: '候補を開く',\n                    })\n              }\n            />\n          )\n        }\n        size={triggerSize}\n        className={classNames.triggerButton}\n      >\n        <TriggerLabelText onlyIconTrigger={onlyIconTrigger}>{children}</TriggerLabelText>\n      </Button>\n    </DropdownTrigger>\n  )\n})\n\nconst TriggerLabelText = memo<{\n  onlyIconTrigger: ObjectTriggerType['onlyIcon']\n  children: ObjectTriggerType['children']\n}>(({ children, onlyIconTrigger }) => {\n  if (!onlyIconTrigger) {\n    return children\n  }\n\n  const Icon = (typeof onlyIconTrigger === 'object' && onlyIconTrigger.component) || FaEllipsisIcon\n\n  return <Icon alt={typeof children === 'string' ? children : innerText(children)} />\n})\n\nexport const renderButtonList = (children: Actions) =>\n  Children.map(children, (item): ReactNode => {\n    if (!item || !isValidElement(item)) {\n      return null\n    }\n\n    switch (item.type) {\n      case Fragment:\n        return renderButtonList(item.props.children)\n      case DropdownMenuGroup:\n        return item\n    }\n\n    return <ButtonListItem>{item}</ButtonListItem>\n  })\n\nconst ButtonListItem: FC<{ children: ReactElement }> = ({ children }) => {\n  const ref = useRef<HTMLLIElement>(null)\n\n  useEffect(() => {\n    const listItem = ref.current\n    if (!listItem) {\n      return\n    }\n\n    const setupButton = () => {\n      const button = listItem.querySelector('button,a')\n\n      if (button) {\n        button.setAttribute('role', 'menuitem')\n        button.setAttribute(\n          'class',\n          actionListItemButton({ className: button.getAttribute('class') }),\n        )\n      }\n    }\n\n    setupButton()\n\n    const observer = new MutationObserver(setupButton)\n    observer.observe(listItem, {\n      childList: true,\n      subtree: true,\n    })\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [])\n\n  return (\n    <li role=\"presentation\" ref={ref}>\n      <DropdownCloser>{children}</DropdownCloser>\n    </li>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA;AACE;AACD;AAED;AACE;AACE;AACA;AAEA;;;AAGE;;;;;AAKC;AACF;AACD;;;;AAIC;AACF;AACF;AAED;;;AAmBE;;AAIA;AAEI;;;AAGD;AAIH;AAiBF;AAEA;AAWE;;AAIA;;AAaoB;AACA;;;AAGA;AACA;;AAatB;AAEA;;AAKI;;AAGF;;AAGF;AAEO;;AAGD;;AAGF;AACE;;AAEA;AACE;;AAGJ;AACF;AAEF;AACE;;AAGE;;;;;;;AASI;AACA;;AAKJ;AAEA;AAEA;AACA;AACE;AACA;AACD;AAED;;AAEA;;AAGF;AAKF;;;"}

package/lib/components/Dropdown/DropdownMenuButton/DropdownMenuButton.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo, useContext, useMemo, useRef, Children, isValidElement, Fragment, useEffect } from 'react';
+import { memo, useContext, useRef, useMemo, Children, isValidElement, Fragment, useEffect } from 'react';
 import innerText from '../../../_virtual/index3.js';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { useObjectAttributes } from '../../../hooks/useObjectAttributes.js';
@@ -61,9 +61,7 @@ const DropdownMenuButton = ({ trigger, children, onOpen, onClose, className, ...
 const MemoizedTriggerButton = memo(({ onlyIconTrigger, triggerSize, children, classNames, ...rest }) => {
     const { localize } = useIntl();
     const { active } = useContext(DropdownContext);
-    const showTooltip = !!onlyIconTrigger;
-    const tooltip = useMemo(() => ({ show: showTooltip, message: children }), [children, showTooltip]);
-    return (jsx(DropdownTrigger, { className: classNames.triggerWrapper, tooltip: tooltip, children: jsx(Button, { ...rest, suffix: !onlyIconTrigger && (jsx(FaCaretDownIcon, { alt: active
+    return (jsx(DropdownTrigger, { className: classNames.triggerWrapper, tooltip: { show: !!onlyIconTrigger, message: children }, children: jsx(Button, { ...rest, suffix: !onlyIconTrigger && (jsx(FaCaretDownIcon, { alt: active
                     ? localize({
                         id: 'smarthr-ui/DropdownMenuButton/triggerActive',
                         defaultText: '候補を閉じる',
@@ -95,15 +93,27 @@ const renderButtonList = (children) => Children.map(children, (item) => {
 const ButtonListItem = ({ children }) => {
     const ref = useRef(null);
     useEffect(() => {
-        if (!ref.current) {
+        const listItem = ref.current;
+        if (!listItem) {
             return;
         }
-        const button = ref.current.querySelector('button,a');
-        if (button) {
-            button.setAttribute('role', 'menuitem');
-            button.setAttribute('class', actionListItemButton({ className: button.getAttribute('class') }));
-        }
-    }, [children]);
+        const setupButton = () => {
+            const button = listItem.querySelector('button,a');
+            if (button) {
+                button.setAttribute('role', 'menuitem');
+                button.setAttribute('class', actionListItemButton({ className: button.getAttribute('class') }));
+            }
+        };
+        setupButton();
+        const observer = new MutationObserver(setupButton);
+        observer.observe(listItem, {
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
     return (jsx("li", { role: "presentation", ref: ref, children: jsx(DropdownCloser, { children: children }) }));
 };
 

package/lib/components/Dropdown/DropdownMenuButton/DropdownMenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuButton.js","sources":["../../../../src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type FC,\n  Fragment,\n  type ReactElement,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../../hooks/useObjectAttributes'\nimport { useIntl } from '../../../intl'\nimport { type AnchorButton, Button, type AbstractProps as ButtonProps } from '../../Button'\nimport { FaCaretDownIcon, FaEllipsisIcon } from '../../Icon'\nimport { Dropdown, DropdownContext } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\nimport { DropdownMenuGroup } from './DropdownMenuGroup'\nimport useKeyboardNavigation from './useKeyboardNavigation'\n\nimport type { RemoteDialogTrigger } from '../../Dialog'\n\ntype Actions = ActionItem | ActionItem[]\n\n// これでコンポーネントを絞れるわけではないが Button[variant=text] を使ってほしいんだよ! という気持ち\ntype ActionItem =\n  | ReactElement<ComponentProps<typeof Button>>\n  | ReactElement<ComponentProps<typeof AnchorButton>>\n  | ReactElement<ComponentProps<typeof RemoteDialogTrigger>>\n  | ReactNode\n\ntype ObjectTriggerType = {\n  /** 引き金となるボタンラベル */\n  children: ReactNode\n  /** 引き金となるボタンの大きさ */\n  size?: ButtonProps['size']\n  /** 引き金となるボタンをアイコンのみとするかどうか */\n  onlyIcon?:\n    | boolean\n    | {\n        /** 引き金となるアイコンを差し替えたい場合（onlyIcon=true の場合のみ有効） */\n        component?: ComponentType<ComponentProps<typeof FaCaretDownIcon>>\n      }\n}\ntype AbstractProps = {\n  /** 引き金となるボタン */\n  trigger: ReactNode | ObjectTriggerType\n  /** 操作群 */\n  children: Actions\n  /** ドロップダウンメニューが開かれた際のイベント */\n  onOpen?: () => void\n  /** ドロップダウンメニューが閉じられた際のイベント */\n  onClose?: () => void\n}\ntype ElementProps = Omit<ComponentPropsWithRef<'button'>, keyof AbstractProps>\ntype Props = AbstractProps & ElementProps\n\nconst triggerObjectConverter = (trigger: ReactNode) => ({\n  children: trigger,\n})\n\nconst classNameGenerator = tv({\n  slots: {\n    triggerWrapper: 'smarthr-ui-DropdownMenuButton',\n    triggerButton:\n      'smarthr-ui-DropdownMenuButton-trigger [&[aria-expanded=\"true\"]_.smarthr-ui-Icon:last-child]:shr-rotate-180',\n    actionList: [\n      'smarthr-ui-DropdownMenuButton-panel',\n      'shr-list-none shr-py-0.5',\n      [\n        /* unset した Button の右 padding 分 */\n        '[&_.smarthr-ui-Button-disabledWrapper]:shr-pe-1',\n        '[&_.smarthr-ui-Button-disabledWrapper]:shr-gap-x-0.5',\n        '[&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-w-[unset] [&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-bg-transparent [&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-pe-[unset]',\n      ],\n    ],\n    actionListItemButton: [\n      // HINT: 実際にレンダリングされた要素のclassに対して追加されるため、優先度を上げる必要がある\n      '[&&]:shr-w-full [&&]:shr-justify-start [&&]:shr-rounded-none [&&]:shr-border-none [&&]:shr-py-0.5 [&&]:shr-font-normal',\n      '[&&]:focus-visible:shr-focus-indicator',\n    ],\n  },\n})\n\nconst { triggerWrapper, triggerButton, actionList, actionListItemButton } = classNameGenerator()\n\nexport const DropdownMenuButton: FC<Props> = ({\n  trigger,\n  children,\n  onOpen,\n  onClose,\n  className,\n  ...rest\n}) => {\n  const {\n    children: triggerChildren,\n    size: triggerSize,\n    onlyIcon: onlyIconTrigger,\n  } = useObjectAttributes<ReactNode | ObjectTriggerType, ObjectTriggerType>(\n    trigger,\n    triggerObjectConverter,\n  )\n\n  const containerRef = useRef<HTMLUListElement>(null)\n\n  useKeyboardNavigation(containerRef)\n\n  const classNames = useMemo(\n    () => ({\n      triggerWrapper: triggerWrapper({ className }),\n      triggerButton: triggerButton(),\n      actionList: actionList(),\n    }),\n    [className],\n  )\n\n  return (\n    <Dropdown onOpen={onOpen} onClose={onClose}>\n      <MemoizedTriggerButton\n        {...rest}\n        onlyIconTrigger={onlyIconTrigger}\n        triggerSize={triggerSize}\n        classNames={classNames}\n      >\n        {triggerChildren}\n      </MemoizedTriggerButton>\n      <DropdownContent controllable={true}>\n        <menu ref={containerRef} role=\"menu\" className={classNames.actionList}>\n          {renderButtonList(children)}\n        </menu>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst MemoizedTriggerButton = memo<\n  ElementProps & {\n    onlyIconTrigger: ObjectTriggerType['onlyIcon']\n    triggerSize: ObjectTriggerType['size']\n    children: ObjectTriggerType['children']\n    classNames: {\n      triggerWrapper: string\n      triggerButton: string\n    }\n  }\n>(({ onlyIconTrigger, triggerSize, children, classNames, ...rest }) => {\n  const { localize } = useIntl()\n\n  const { active } = useContext(DropdownContext)\n\n  const showTooltip = !!onlyIconTrigger\n  const tooltip = useMemo(() => ({ show: showTooltip, message: children }), [children, showTooltip])\n\n  return (\n    <DropdownTrigger className={classNames.triggerWrapper} tooltip={tooltip}>\n      <Button\n        {...rest}\n        suffix={\n          !onlyIconTrigger && (\n            <FaCaretDownIcon\n              alt={\n                active\n                  ? localize({\n                      id: 'smarthr-ui/DropdownMenuButton/triggerActive',\n                      defaultText: '候補を閉じる',\n                    })\n                  : localize({\n                      id: 'smarthr-ui/DropdownMenuButton/triggerInactive',\n                      defaultText: '候補を開く',\n                    })\n              }\n            />\n          )\n        }\n        size={triggerSize}\n        className={classNames.triggerButton}\n      >\n        <TriggerLabelText onlyIconTrigger={onlyIconTrigger}>{children}</TriggerLabelText>\n      </Button>\n    </DropdownTrigger>\n  )\n})\n\nconst TriggerLabelText = memo<{\n  onlyIconTrigger: ObjectTriggerType['onlyIcon']\n  children: ObjectTriggerType['children']\n}>(({ children, onlyIconTrigger }) => {\n  if (!onlyIconTrigger) {\n    return children\n  }\n\n  const Icon = (typeof onlyIconTrigger === 'object' && onlyIconTrigger.component) || FaEllipsisIcon\n\n  return <Icon alt={typeof children === 'string' ? children : innerText(children)} />\n})\n\nexport const renderButtonList = (children: Actions) =>\n  Children.map(children, (item): ReactNode => {\n    if (!item || !isValidElement(item)) {\n      return null\n    }\n\n    switch (item.type) {\n      case Fragment:\n        return renderButtonList(item.props.children)\n      case DropdownMenuGroup:\n        return item\n    }\n\n    return <ButtonListItem>{item}</ButtonListItem>\n  })\n\nconst ButtonListItem: FC<{ children: ReactElement }> = ({ children }) => {\n  const ref = useRef<HTMLLIElement>(null)\n\n  useEffect(() => {\n    if (!ref.current) {\n      return\n    }\n\n    const button = ref.current.querySelector('button,a')\n\n    if (button) {\n      button.setAttribute('role', 'menuitem')\n      button.setAttribute(\n        'class',\n        actionListItemButton({ className: button.getAttribute('class') }),\n      )\n    }\n  }, [children])\n\n  return (\n    <li role=\"presentation\" ref={ref}>\n      <DropdownCloser>{children}</DropdownCloser>\n    </li>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsEA;AACE;AACD;AAED;AACE;AACE;AACA;AAEA;;;AAGE;;;;;AAKC;AACF;AACD;;;;AAIC;AACF;AACF;AAED;;;AAmBE;;AAIA;AAEI;;;AAGD;AAIH;AAiBF;AAEA;AAWE;;AAIA;;AAGA;;AAUoB;AACA;;;AAGA;AACA;;AAatB;AAEA;;AAKI;;AAGF;;AAGF;AAEO;;AAGD;;AAGF;AACE;;AAEA;AACE;;AAGJ;AACF;AAEF;AACE;;AAGE;;;;;AAOE;AACA;;AAKJ;AAEA;AAKF;;"}
+{"version":3,"file":"DropdownMenuButton.js","sources":["../../../../src/components/Dropdown/DropdownMenuButton/DropdownMenuButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  Children,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type FC,\n  Fragment,\n  type ReactElement,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../../hooks/useObjectAttributes'\nimport { useIntl } from '../../../intl'\nimport { type AnchorButton, Button, type AbstractProps as ButtonProps } from '../../Button'\nimport { FaCaretDownIcon, FaEllipsisIcon } from '../../Icon'\nimport { Dropdown, DropdownContext } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\nimport { DropdownMenuGroup } from './DropdownMenuGroup'\nimport useKeyboardNavigation from './useKeyboardNavigation'\n\nimport type { RemoteDialogTrigger } from '../../Dialog'\n\ntype Actions = ActionItem | ActionItem[]\n\n// これでコンポーネントを絞れるわけではないが Button[variant=text] を使ってほしいんだよ! という気持ち\ntype ActionItem =\n  | ReactElement<ComponentProps<typeof Button>>\n  | ReactElement<ComponentProps<typeof AnchorButton>>\n  | ReactElement<ComponentProps<typeof RemoteDialogTrigger>>\n  | ReactNode\n\ntype ObjectTriggerType = {\n  /** 引き金となるボタンラベル */\n  children: ReactNode\n  /** 引き金となるボタンの大きさ */\n  size?: ButtonProps['size']\n  /** 引き金となるボタンをアイコンのみとするかどうか */\n  onlyIcon?:\n    | boolean\n    | {\n        /** 引き金となるアイコンを差し替えたい場合（onlyIcon=true の場合のみ有効） */\n        component?: ComponentType<ComponentProps<typeof FaCaretDownIcon>>\n      }\n}\ntype AbstractProps = {\n  /** 引き金となるボタン */\n  trigger: ReactNode | ObjectTriggerType\n  /** 操作群 */\n  children: Actions\n  /** ドロップダウンメニューが開かれた際のイベント */\n  onOpen?: () => void\n  /** ドロップダウンメニューが閉じられた際のイベント */\n  onClose?: () => void\n}\ntype ElementProps = Omit<ComponentPropsWithRef<'button'>, keyof AbstractProps>\ntype Props = AbstractProps & ElementProps\n\nconst triggerObjectConverter = (trigger: ReactNode) => ({\n  children: trigger,\n})\n\nconst classNameGenerator = tv({\n  slots: {\n    triggerWrapper: 'smarthr-ui-DropdownMenuButton',\n    triggerButton:\n      'smarthr-ui-DropdownMenuButton-trigger [&[aria-expanded=\"true\"]_.smarthr-ui-Icon:last-child]:shr-rotate-180',\n    actionList: [\n      'smarthr-ui-DropdownMenuButton-panel',\n      'shr-list-none shr-py-0.5',\n      [\n        /* unset した Button の右 padding 分 */\n        '[&_.smarthr-ui-Button-disabledWrapper]:shr-pe-1',\n        '[&_.smarthr-ui-Button-disabledWrapper]:shr-gap-x-0.5',\n        '[&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-w-[unset] [&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-bg-transparent [&_.smarthr-ui-Button-disabledWrapper_>_.smarthr-ui-Button]:shr-pe-[unset]',\n      ],\n    ],\n    actionListItemButton: [\n      // HINT: 実際にレンダリングされた要素のclassに対して追加されるため、優先度を上げる必要がある\n      '[&&]:shr-w-full [&&]:shr-justify-start [&&]:shr-rounded-none [&&]:shr-border-none [&&]:shr-py-0.5 [&&]:shr-font-normal',\n      '[&&]:focus-visible:shr-focus-indicator',\n    ],\n  },\n})\n\nconst { triggerWrapper, triggerButton, actionList, actionListItemButton } = classNameGenerator()\n\nexport const DropdownMenuButton: FC<Props> = ({\n  trigger,\n  children,\n  onOpen,\n  onClose,\n  className,\n  ...rest\n}) => {\n  const {\n    children: triggerChildren,\n    size: triggerSize,\n    onlyIcon: onlyIconTrigger,\n  } = useObjectAttributes<ReactNode | ObjectTriggerType, ObjectTriggerType>(\n    trigger,\n    triggerObjectConverter,\n  )\n\n  const containerRef = useRef<HTMLUListElement>(null)\n\n  useKeyboardNavigation(containerRef)\n\n  const classNames = useMemo(\n    () => ({\n      triggerWrapper: triggerWrapper({ className }),\n      triggerButton: triggerButton(),\n      actionList: actionList(),\n    }),\n    [className],\n  )\n\n  return (\n    <Dropdown onOpen={onOpen} onClose={onClose}>\n      <MemoizedTriggerButton\n        {...rest}\n        onlyIconTrigger={onlyIconTrigger}\n        triggerSize={triggerSize}\n        classNames={classNames}\n      >\n        {triggerChildren}\n      </MemoizedTriggerButton>\n      <DropdownContent controllable={true}>\n        <menu ref={containerRef} role=\"menu\" className={classNames.actionList}>\n          {renderButtonList(children)}\n        </menu>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst MemoizedTriggerButton = memo<\n  ElementProps & {\n    onlyIconTrigger: ObjectTriggerType['onlyIcon']\n    triggerSize: ObjectTriggerType['size']\n    children: ObjectTriggerType['children']\n    classNames: {\n      triggerWrapper: string\n      triggerButton: string\n    }\n  }\n>(({ onlyIconTrigger, triggerSize, children, classNames, ...rest }) => {\n  const { localize } = useIntl()\n\n  const { active } = useContext(DropdownContext)\n\n  return (\n    <DropdownTrigger\n      className={classNames.triggerWrapper}\n      tooltip={{ show: !!onlyIconTrigger, message: children }}\n    >\n      <Button\n        {...rest}\n        suffix={\n          !onlyIconTrigger && (\n            <FaCaretDownIcon\n              alt={\n                active\n                  ? localize({\n                      id: 'smarthr-ui/DropdownMenuButton/triggerActive',\n                      defaultText: '候補を閉じる',\n                    })\n                  : localize({\n                      id: 'smarthr-ui/DropdownMenuButton/triggerInactive',\n                      defaultText: '候補を開く',\n                    })\n              }\n            />\n          )\n        }\n        size={triggerSize}\n        className={classNames.triggerButton}\n      >\n        <TriggerLabelText onlyIconTrigger={onlyIconTrigger}>{children}</TriggerLabelText>\n      </Button>\n    </DropdownTrigger>\n  )\n})\n\nconst TriggerLabelText = memo<{\n  onlyIconTrigger: ObjectTriggerType['onlyIcon']\n  children: ObjectTriggerType['children']\n}>(({ children, onlyIconTrigger }) => {\n  if (!onlyIconTrigger) {\n    return children\n  }\n\n  const Icon = (typeof onlyIconTrigger === 'object' && onlyIconTrigger.component) || FaEllipsisIcon\n\n  return <Icon alt={typeof children === 'string' ? children : innerText(children)} />\n})\n\nexport const renderButtonList = (children: Actions) =>\n  Children.map(children, (item): ReactNode => {\n    if (!item || !isValidElement(item)) {\n      return null\n    }\n\n    switch (item.type) {\n      case Fragment:\n        return renderButtonList(item.props.children)\n      case DropdownMenuGroup:\n        return item\n    }\n\n    return <ButtonListItem>{item}</ButtonListItem>\n  })\n\nconst ButtonListItem: FC<{ children: ReactElement }> = ({ children }) => {\n  const ref = useRef<HTMLLIElement>(null)\n\n  useEffect(() => {\n    const listItem = ref.current\n    if (!listItem) {\n      return\n    }\n\n    const setupButton = () => {\n      const button = listItem.querySelector('button,a')\n\n      if (button) {\n        button.setAttribute('role', 'menuitem')\n        button.setAttribute(\n          'class',\n          actionListItemButton({ className: button.getAttribute('class') }),\n        )\n      }\n    }\n\n    setupButton()\n\n    const observer = new MutationObserver(setupButton)\n    observer.observe(listItem, {\n      childList: true,\n      subtree: true,\n    })\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [])\n\n  return (\n    <li role=\"presentation\" ref={ref}>\n      <DropdownCloser>{children}</DropdownCloser>\n    </li>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsEA;AACE;AACD;AAED;AACE;AACE;AACA;AAEA;;;AAGE;;;;;AAKC;AACF;AACD;;;;AAIC;AACF;AACF;AAED;;;AAmBE;;AAIA;AAEI;;;AAGD;AAIH;AAiBF;AAEA;AAWE;;AAIA;;AAaoB;AACA;;;AAGA;AACA;;AAatB;AAEA;;AAKI;;AAGF;;AAGF;AAEO;;AAGD;;AAGF;AACE;;AAEA;AACE;;AAGJ;AACF;AAEF;AACE;;AAGE;;;;;;;AASI;AACA;;AAKJ;AAEA;AAEA;AACA;AACE;AACA;AACD;AAED;;AAEA;;AAGF;AAKF;;"}

package/lib/components/Dropdown/DropdownTrigger.cjs

@@ -20,7 +20,7 @@ const classNameGenerator = index.tv({
     base: 'smarthr-ui-Dropdown shr-inline-block',
 });
 const DropdownTrigger = ({ children, className, tooltip }) => {
-    const { active, onClickTrigger, contentId, triggerElementRef } = React.useContext(components_Dropdown_Dropdown.DropdownContext);
+    const { active, memoizedOnClickTrigger, contentId, triggerElementRef } = React.useContext(components_Dropdown_Dropdown.DropdownContext);
     const actualClassName = React.useMemo(() => classNameGenerator({ className }), [className]);
     React.useEffect(() => {
         if (!triggerElementRef.current) {
@@ -34,27 +34,44 @@ const DropdownTrigger = ({ children, className, tooltip }) => {
         });
     }, [active, triggerElementRef, contentId]);
     React.useEffect(() => {
-        if (!triggerElementRef.current) {
-            return;
-        }
-        const button = triggerElementRef.current.querySelector('button');
-        // 引き金となる要素が disabled な場合、処理を差し込む必要がないため、そのまま出力する
-        if (!button || button.disabled || button.getAttribute('aria-disabled') === 'true') {
+        const triggerElement = triggerElementRef.current;
+        if (!triggerElement) {
             return;
         }
-        // HINT: Trigger要素自体にonClickが設定されている場合、先にDropdownを開いた状態で処理を行いたい
-        // そのためcaptureで開く処理を実行する
-        const callback = (e) => {
-            onClickTrigger(e.currentTarget.getBoundingClientRect());
+        let currentCleanup;
+        const setupButton = () => {
+            // 既存のクリーンアップを実行
+            currentCleanup?.();
+            currentCleanup = undefined;
+            const button = triggerElement.querySelector('button');
+            // 引き金となる要素が disabled な場合、処理を差し込む必要がないため、そのまま出力する
+            if (!button || button.disabled || button.getAttribute('aria-disabled') === 'true') {
+                return;
+            }
+            // HINT: Trigger要素自体にonClickが設定されている場合、先にDropdownを開いた状態で処理を行いたい
+            // そのためcaptureで開く処理を実行する
+            const callback = (e) => {
+                memoizedOnClickTrigger(e.currentTarget.getBoundingClientRect());
+            };
+            button.addEventListener('click', callback, CAPTURE_OPTION);
+            currentCleanup = () => {
+                button.removeEventListener('click', callback, CAPTURE_OPTION);
+            };
         };
-        button.addEventListener('click', callback, CAPTURE_OPTION);
+        setupButton();
+        const observer = new MutationObserver(setupButton);
+        observer.observe(triggerElement, {
+            childList: true,
+            subtree: true,
+        });
         return () => {
-            button.removeEventListener('click', callback, CAPTURE_OPTION);
+            currentCleanup?.();
+            observer.disconnect();
         };
-    }, [children, onClickTrigger, triggerElementRef]);
-    return (jsxRuntime.jsx("div", { ref: triggerElementRef, className: actualClassName, children: jsxRuntime.jsx(ConditionalWrapper, { shouldWrapContent: tooltip?.show, wrapper: ({ children: currentChildren }) => (
+    }, [memoizedOnClickTrigger, triggerElementRef]);
+    return (jsxRuntime.jsx("div", { ref: triggerElementRef, className: actualClassName, children: jsxRuntime.jsx(ConditionalWrapper, { shouldWrapContent: tooltip?.show, wrapper: ({ children: currentChildren }) => tooltip?.message ? (
             // eslint-disable-next-line smarthr/a11y-scroller-has-tabindex
-            jsxRuntime.jsx(components_Tooltip_Tooltip.Tooltip, { message: tooltip?.message, triggerType: "icon", tabIndex: -1, children: currentChildren })), children: children }) }));
+            jsxRuntime.jsx(components_Tooltip_Tooltip.Tooltip, { message: tooltip?.message, triggerType: "icon", tabIndex: -1, children: currentChildren })) : (currentChildren), children: children }) }));
 };
 
 exports.DropdownTrigger = DropdownTrigger;

package/lib/components/Dropdown/DropdownTrigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownTrigger.cjs","sources":["../../../src/components/Dropdown/DropdownTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { tabbable } from '../../libs/tabbable'\nimport { Tooltip } from '../Tooltip'\n\nimport { DropdownContext } from './Dropdown'\n\ntype ConditionalWrapperProps = {\n  shouldWrapContent?: boolean\n  wrapper: FC<PropsWithChildren>\n}\n\nconst CAPTURE_OPTION = {\n  capture: true,\n}\n\n/**\n * 条件付きでラッパをレンダリングする\n */\nconst ConditionalWrapper: FC<PropsWithChildren<ConditionalWrapperProps>> = ({\n  shouldWrapContent,\n  wrapper,\n  children,\n}) => (shouldWrapContent ? wrapper({ children }) : children)\n\ntype Props = PropsWithChildren<ComponentProps<'div'>> & {\n  tooltip?: { message: ReactNode; show?: boolean }\n}\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Dropdown shr-inline-block',\n})\n\nexport const DropdownTrigger: FC<Props> = ({ children, className, tooltip }) => {\n  const { active, onClickTrigger, contentId, triggerElementRef } = useContext(DropdownContext)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  useEffect(() => {\n    if (!triggerElementRef.current) {\n      return\n    }\n\n    // apply ARIA to all focusable elements in trigger\n    const triggers = tabbable(triggerElementRef.current, { shouldIgnoreVisibility: true })\n\n    triggers.forEach((trigger) => {\n      trigger.setAttribute('aria-expanded', active.toString())\n      trigger.setAttribute('aria-controls', contentId)\n    })\n  }, [active, triggerElementRef, contentId])\n\n  useEffect(() => {\n    if (!triggerElementRef.current) {\n      return\n    }\n\n    const button = triggerElementRef.current.querySelector<HTMLButtonElement>('button')\n\n    // 引き金となる要素が disabled な場合、処理を差し込む必要がないため、そのまま出力する\n    if (!button || button.disabled || button.getAttribute('aria-disabled') === 'true') {\n      return\n    }\n\n    // HINT: Trigger要素自体にonClickが設定されている場合、先にDropdownを開いた状態で処理を行いたい\n    // そのためcaptureで開く処理を実行する\n    const callback = (e: MouseEvent) => {\n      onClickTrigger((e.currentTarget! as HTMLButtonElement).getBoundingClientRect())\n    }\n\n    button.addEventListener('click', callback, CAPTURE_OPTION)\n\n    return () => {\n      button.removeEventListener('click', callback, CAPTURE_OPTION)\n    }\n  }, [children, onClickTrigger, triggerElementRef])\n\n  return (\n    <div ref={triggerElementRef} className={actualClassName}>\n      {/* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex */}\n      <ConditionalWrapper\n        shouldWrapContent={tooltip?.show}\n        wrapper={({ children: currentChildren }) => (\n          // eslint-disable-next-line smarthr/a11y-scroller-has-tabindex\n          <Tooltip message={tooltip?.message} triggerType=\"icon\" tabIndex={-1}>\n            {currentChildren}\n          </Tooltip>\n        )}\n      >\n        {children}\n      </ConditionalWrapper>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAuBA;AACE;;AAGF;;AAEG;AACH;AAUA;AACE;AACD;AAEM;AACL;AACA;;AAGE;;;;AAKA;AAEA;;AAEE;AACF;;;AAIA;;;;;AAOA;;;;;AAMA;;AAEA;;AAIA;;AAEA;;AAGF;;;AAgBF;;"}
+{"version":3,"file":"DropdownTrigger.cjs","sources":["../../../src/components/Dropdown/DropdownTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { tabbable } from '../../libs/tabbable'\nimport { Tooltip } from '../Tooltip'\n\nimport { DropdownContext } from './Dropdown'\n\ntype ConditionalWrapperProps = {\n  shouldWrapContent?: boolean\n  wrapper: FC<PropsWithChildren>\n}\n\nconst CAPTURE_OPTION = {\n  capture: true,\n}\n\n/**\n * 条件付きでラッパをレンダリングする\n */\nconst ConditionalWrapper: FC<PropsWithChildren<ConditionalWrapperProps>> = ({\n  shouldWrapContent,\n  wrapper,\n  children,\n}) => (shouldWrapContent ? wrapper({ children }) : children)\n\ntype Props = PropsWithChildren<ComponentProps<'div'>> & {\n  tooltip?: { message: ReactNode; show?: boolean }\n}\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Dropdown shr-inline-block',\n})\n\nexport const DropdownTrigger: FC<Props> = ({ children, className, tooltip }) => {\n  const { active, memoizedOnClickTrigger, contentId, triggerElementRef } =\n    useContext(DropdownContext)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  useEffect(() => {\n    if (!triggerElementRef.current) {\n      return\n    }\n\n    // apply ARIA to all focusable elements in trigger\n    const triggers = tabbable(triggerElementRef.current, { shouldIgnoreVisibility: true })\n\n    triggers.forEach((trigger) => {\n      trigger.setAttribute('aria-expanded', active.toString())\n      trigger.setAttribute('aria-controls', contentId)\n    })\n  }, [active, triggerElementRef, contentId])\n\n  useEffect(() => {\n    const triggerElement = triggerElementRef.current\n    if (!triggerElement) {\n      return\n    }\n\n    let currentCleanup: (() => void) | undefined\n\n    const setupButton = () => {\n      // 既存のクリーンアップを実行\n      currentCleanup?.()\n      currentCleanup = undefined\n\n      const button = triggerElement.querySelector<HTMLButtonElement>('button')\n\n      // 引き金となる要素が disabled な場合、処理を差し込む必要がないため、そのまま出力する\n      if (!button || button.disabled || button.getAttribute('aria-disabled') === 'true') {\n        return\n      }\n\n      // HINT: Trigger要素自体にonClickが設定されている場合、先にDropdownを開いた状態で処理を行いたい\n      // そのためcaptureで開く処理を実行する\n      const callback = (e: MouseEvent) => {\n        memoizedOnClickTrigger((e.currentTarget! as HTMLButtonElement).getBoundingClientRect())\n      }\n\n      button.addEventListener('click', callback, CAPTURE_OPTION)\n\n      currentCleanup = () => {\n        button.removeEventListener('click', callback, CAPTURE_OPTION)\n      }\n    }\n\n    setupButton()\n\n    const observer = new MutationObserver(setupButton)\n\n    observer.observe(triggerElement, {\n      childList: true,\n      subtree: true,\n    })\n\n    return () => {\n      currentCleanup?.()\n      observer.disconnect()\n    }\n  }, [memoizedOnClickTrigger, triggerElementRef])\n\n  return (\n    <div ref={triggerElementRef} className={actualClassName}>\n      {/* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex */}\n      <ConditionalWrapper\n        shouldWrapContent={tooltip?.show}\n        wrapper={({ children: currentChildren }) =>\n          tooltip?.message ? (\n            // eslint-disable-next-line smarthr/a11y-scroller-has-tabindex\n            <Tooltip message={tooltip?.message} triggerType=\"icon\" tabIndex={-1}>\n              {currentChildren}\n            </Tooltip>\n          ) : (\n            currentChildren\n          )\n        }\n      >\n        {children}\n      </ConditionalWrapper>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAuBA;AACE;;AAGF;;AAEG;AACH;AAUA;AACE;AACD;AAEM;AACL;AAEA;;AAGE;;;;AAKA;AAEA;;AAEE;AACF;;;AAIA;;;;AAKA;;;;;;;AAUE;;;;;AAMA;;AAEA;;;;AAMA;AACF;AAEA;AAEA;AAEA;AACE;AACA;AACD;AAED;;;AAGA;AACF;AAEA;;AAQU;AAYZ;;"}

package/lib/components/Dropdown/DropdownTrigger.js

@@ -18,7 +18,7 @@ const classNameGenerator = ce({
     base: 'smarthr-ui-Dropdown shr-inline-block',
 });
 const DropdownTrigger = ({ children, className, tooltip }) => {
-    const { active, onClickTrigger, contentId, triggerElementRef } = useContext(DropdownContext);
+    const { active, memoizedOnClickTrigger, contentId, triggerElementRef } = useContext(DropdownContext);
     const actualClassName = useMemo(() => classNameGenerator({ className }), [className]);
     useEffect(() => {
         if (!triggerElementRef.current) {
@@ -32,27 +32,44 @@ const DropdownTrigger = ({ children, className, tooltip }) => {
         });
     }, [active, triggerElementRef, contentId]);
     useEffect(() => {
-        if (!triggerElementRef.current) {
-            return;
-        }
-        const button = triggerElementRef.current.querySelector('button');
-        // 引き金となる要素が disabled な場合、処理を差し込む必要がないため、そのまま出力する
-        if (!button || button.disabled || button.getAttribute('aria-disabled') === 'true') {
+        const triggerElement = triggerElementRef.current;
+        if (!triggerElement) {
             return;
         }
-        // HINT: Trigger要素自体にonClickが設定されている場合、先にDropdownを開いた状態で処理を行いたい
-        // そのためcaptureで開く処理を実行する
-        const callback = (e) => {
-            onClickTrigger(e.currentTarget.getBoundingClientRect());
+        let currentCleanup;
+        const setupButton = () => {
+            // 既存のクリーンアップを実行
+            currentCleanup?.();
+            currentCleanup = undefined;
+            const button = triggerElement.querySelector('button');
+            // 引き金となる要素が disabled な場合、処理を差し込む必要がないため、そのまま出力する
+            if (!button || button.disabled || button.getAttribute('aria-disabled') === 'true') {
+                return;
+            }
+            // HINT: Trigger要素自体にonClickが設定されている場合、先にDropdownを開いた状態で処理を行いたい
+            // そのためcaptureで開く処理を実行する
+            const callback = (e) => {
+                memoizedOnClickTrigger(e.currentTarget.getBoundingClientRect());
+            };
+            button.addEventListener('click', callback, CAPTURE_OPTION);
+            currentCleanup = () => {
+                button.removeEventListener('click', callback, CAPTURE_OPTION);
+            };
         };
-        button.addEventListener('click', callback, CAPTURE_OPTION);
+        setupButton();
+        const observer = new MutationObserver(setupButton);
+        observer.observe(triggerElement, {
+            childList: true,
+            subtree: true,
+        });
         return () => {
-            button.removeEventListener('click', callback, CAPTURE_OPTION);
+            currentCleanup?.();
+            observer.disconnect();
         };
-    }, [children, onClickTrigger, triggerElementRef]);
-    return (jsx("div", { ref: triggerElementRef, className: actualClassName, children: jsx(ConditionalWrapper, { shouldWrapContent: tooltip?.show, wrapper: ({ children: currentChildren }) => (
+    }, [memoizedOnClickTrigger, triggerElementRef]);
+    return (jsx("div", { ref: triggerElementRef, className: actualClassName, children: jsx(ConditionalWrapper, { shouldWrapContent: tooltip?.show, wrapper: ({ children: currentChildren }) => tooltip?.message ? (
             // eslint-disable-next-line smarthr/a11y-scroller-has-tabindex
-            jsx(Tooltip, { message: tooltip?.message, triggerType: "icon", tabIndex: -1, children: currentChildren })), children: children }) }));
+            jsx(Tooltip, { message: tooltip?.message, triggerType: "icon", tabIndex: -1, children: currentChildren })) : (currentChildren), children: children }) }));
 };
 
 export { DropdownTrigger };

package/lib/components/Dropdown/DropdownTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownTrigger.js","sources":["../../../src/components/Dropdown/DropdownTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { tabbable } from '../../libs/tabbable'\nimport { Tooltip } from '../Tooltip'\n\nimport { DropdownContext } from './Dropdown'\n\ntype ConditionalWrapperProps = {\n  shouldWrapContent?: boolean\n  wrapper: FC<PropsWithChildren>\n}\n\nconst CAPTURE_OPTION = {\n  capture: true,\n}\n\n/**\n * 条件付きでラッパをレンダリングする\n */\nconst ConditionalWrapper: FC<PropsWithChildren<ConditionalWrapperProps>> = ({\n  shouldWrapContent,\n  wrapper,\n  children,\n}) => (shouldWrapContent ? wrapper({ children }) : children)\n\ntype Props = PropsWithChildren<ComponentProps<'div'>> & {\n  tooltip?: { message: ReactNode; show?: boolean }\n}\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Dropdown shr-inline-block',\n})\n\nexport const DropdownTrigger: FC<Props> = ({ children, className, tooltip }) => {\n  const { active, onClickTrigger, contentId, triggerElementRef } = useContext(DropdownContext)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  useEffect(() => {\n    if (!triggerElementRef.current) {\n      return\n    }\n\n    // apply ARIA to all focusable elements in trigger\n    const triggers = tabbable(triggerElementRef.current, { shouldIgnoreVisibility: true })\n\n    triggers.forEach((trigger) => {\n      trigger.setAttribute('aria-expanded', active.toString())\n      trigger.setAttribute('aria-controls', contentId)\n    })\n  }, [active, triggerElementRef, contentId])\n\n  useEffect(() => {\n    if (!triggerElementRef.current) {\n      return\n    }\n\n    const button = triggerElementRef.current.querySelector<HTMLButtonElement>('button')\n\n    // 引き金となる要素が disabled な場合、処理を差し込む必要がないため、そのまま出力する\n    if (!button || button.disabled || button.getAttribute('aria-disabled') === 'true') {\n      return\n    }\n\n    // HINT: Trigger要素自体にonClickが設定されている場合、先にDropdownを開いた状態で処理を行いたい\n    // そのためcaptureで開く処理を実行する\n    const callback = (e: MouseEvent) => {\n      onClickTrigger((e.currentTarget! as HTMLButtonElement).getBoundingClientRect())\n    }\n\n    button.addEventListener('click', callback, CAPTURE_OPTION)\n\n    return () => {\n      button.removeEventListener('click', callback, CAPTURE_OPTION)\n    }\n  }, [children, onClickTrigger, triggerElementRef])\n\n  return (\n    <div ref={triggerElementRef} className={actualClassName}>\n      {/* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex */}\n      <ConditionalWrapper\n        shouldWrapContent={tooltip?.show}\n        wrapper={({ children: currentChildren }) => (\n          // eslint-disable-next-line smarthr/a11y-scroller-has-tabindex\n          <Tooltip message={tooltip?.message} triggerType=\"icon\" tabIndex={-1}>\n            {currentChildren}\n          </Tooltip>\n        )}\n      >\n        {children}\n      </ConditionalWrapper>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAuBA;AACE;;AAGF;;AAEG;AACH;AAUA;AACE;AACD;AAEM;AACL;AACA;;AAGE;;;;AAKA;AAEA;;AAEE;AACF;;;AAIA;;;;;AAOA;;;;;AAMA;;AAEA;;AAIA;;AAEA;;AAGF;;;AAgBF;;"}
+{"version":3,"file":"DropdownTrigger.js","sources":["../../../src/components/Dropdown/DropdownTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { tabbable } from '../../libs/tabbable'\nimport { Tooltip } from '../Tooltip'\n\nimport { DropdownContext } from './Dropdown'\n\ntype ConditionalWrapperProps = {\n  shouldWrapContent?: boolean\n  wrapper: FC<PropsWithChildren>\n}\n\nconst CAPTURE_OPTION = {\n  capture: true,\n}\n\n/**\n * 条件付きでラッパをレンダリングする\n */\nconst ConditionalWrapper: FC<PropsWithChildren<ConditionalWrapperProps>> = ({\n  shouldWrapContent,\n  wrapper,\n  children,\n}) => (shouldWrapContent ? wrapper({ children }) : children)\n\ntype Props = PropsWithChildren<ComponentProps<'div'>> & {\n  tooltip?: { message: ReactNode; show?: boolean }\n}\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Dropdown shr-inline-block',\n})\n\nexport const DropdownTrigger: FC<Props> = ({ children, className, tooltip }) => {\n  const { active, memoizedOnClickTrigger, contentId, triggerElementRef } =\n    useContext(DropdownContext)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  useEffect(() => {\n    if (!triggerElementRef.current) {\n      return\n    }\n\n    // apply ARIA to all focusable elements in trigger\n    const triggers = tabbable(triggerElementRef.current, { shouldIgnoreVisibility: true })\n\n    triggers.forEach((trigger) => {\n      trigger.setAttribute('aria-expanded', active.toString())\n      trigger.setAttribute('aria-controls', contentId)\n    })\n  }, [active, triggerElementRef, contentId])\n\n  useEffect(() => {\n    const triggerElement = triggerElementRef.current\n    if (!triggerElement) {\n      return\n    }\n\n    let currentCleanup: (() => void) | undefined\n\n    const setupButton = () => {\n      // 既存のクリーンアップを実行\n      currentCleanup?.()\n      currentCleanup = undefined\n\n      const button = triggerElement.querySelector<HTMLButtonElement>('button')\n\n      // 引き金となる要素が disabled な場合、処理を差し込む必要がないため、そのまま出力する\n      if (!button || button.disabled || button.getAttribute('aria-disabled') === 'true') {\n        return\n      }\n\n      // HINT: Trigger要素自体にonClickが設定されている場合、先にDropdownを開いた状態で処理を行いたい\n      // そのためcaptureで開く処理を実行する\n      const callback = (e: MouseEvent) => {\n        memoizedOnClickTrigger((e.currentTarget! as HTMLButtonElement).getBoundingClientRect())\n      }\n\n      button.addEventListener('click', callback, CAPTURE_OPTION)\n\n      currentCleanup = () => {\n        button.removeEventListener('click', callback, CAPTURE_OPTION)\n      }\n    }\n\n    setupButton()\n\n    const observer = new MutationObserver(setupButton)\n\n    observer.observe(triggerElement, {\n      childList: true,\n      subtree: true,\n    })\n\n    return () => {\n      currentCleanup?.()\n      observer.disconnect()\n    }\n  }, [memoizedOnClickTrigger, triggerElementRef])\n\n  return (\n    <div ref={triggerElementRef} className={actualClassName}>\n      {/* eslint-disable-next-line smarthr/a11y-scroller-has-tabindex */}\n      <ConditionalWrapper\n        shouldWrapContent={tooltip?.show}\n        wrapper={({ children: currentChildren }) =>\n          tooltip?.message ? (\n            // eslint-disable-next-line smarthr/a11y-scroller-has-tabindex\n            <Tooltip message={tooltip?.message} triggerType=\"icon\" tabIndex={-1}>\n              {currentChildren}\n            </Tooltip>\n          ) : (\n            currentChildren\n          )\n        }\n      >\n        {children}\n      </ConditionalWrapper>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAuBA;AACE;;AAGF;;AAEG;AACH;AAUA;AACE;AACD;AAEM;AACL;AAEA;;AAGE;;;;AAKA;AAEA;;AAEE;AACF;;;AAIA;;;;AAKA;;;;;;;AAUE;;;;;AAMA;;AAEA;;;;AAMA;AACF;AAEA;AAEA;AAEA;AACE;AACA;AACD;AAED;;;AAGA;AACF;AAEA;;AAQU;AAYZ;;"}

package/lib/components/Header/Header.cjs

@@ -46,7 +46,7 @@ const classNameGenerator = index.tv({
 });
 const COMMON_GAP = { column: 0.25, row: 0 };
 const CHILDREN_GAP = { column: 0.5, row: 0.25 };
-const Header = ({ enableNew, logo, logoHref, featureName, apps, tenants, currentTenantId, onTenantSelect, children, className, }) => {
+const Header = ({ enableNew, logo, logoHref, featureName, apps, tenants, currentTenantId, onTenantSelect, children, className, ...rest }) => {
     const classNames = React.useMemo(() => {
         const { wrapper, logoLink, tenantInfo: tenantInfoStyle, tenantNameText, actions, } = classNameGenerator({ enableNew });
         return {
@@ -57,9 +57,9 @@ const Header = ({ enableNew, logo, logoHref, featureName, apps, tenants, current
             actions: actions(),
         };
     }, [enableNew, className]);
-    return (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { as: "header", justify: "space-between", gap: COMMON_GAP, className: classNames.wrapper, children: [jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { align: "center", gap: COMMON_GAP, children: [jsxRuntime.jsx(Logo, { href: logoHref, enableNew: enableNew, className: classNames.logoLink, children: logo }), enableNew ? (jsxRuntime.jsx(MemoizedAppLauncher, { featureName: featureName, apps: apps, enableNew: enableNew })) : (jsxRuntime.jsx(TenantSwitcher, { currentTenantId: currentTenantId, tenants: tenants, classNames: classNames, onTenantSelect: onTenantSelect }))] }), jsxRuntime.jsx(components_Layout_Cluster_Cluster.Cluster, { align: "center", justify: "flex-end", gap: CHILDREN_GAP, className: classNames.actions, children: children })] }));
+    return (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { ...rest, as: "header", justify: "space-between", gap: COMMON_GAP, className: classNames.wrapper, children: [jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { align: "center", gap: COMMON_GAP, children: [jsxRuntime.jsx(LogoLink, { href: logoHref, enableNew: enableNew, className: classNames.logoLink, children: logo }), enableNew ? (jsxRuntime.jsx(MemoizedAppLauncher, { featureName: featureName, apps: apps, enableNew: enableNew })) : (jsxRuntime.jsx(TenantSwitcher, { currentTenantId: currentTenantId, tenants: tenants, classNames: classNames, onTenantSelect: onTenantSelect }))] }), jsxRuntime.jsx(components_Layout_Cluster_Cluster.Cluster, { align: "center", justify: "flex-end", gap: CHILDREN_GAP, className: classNames.actions, children: children })] }));
 };
-const Logo = React.memo(({ children, href, enableNew, className }) => (jsxRuntime.jsx("a", { href: href || '/', className: className, children: children || jsxRuntime.jsx(components_SmartHRLogo_SmartHRLogo.SmartHRLogo, { fill: enableNew ? 'brand' : undefined, className: "shr-p-0.75" }) })));
+const LogoLink = React.memo(({ children, href, enableNew, className }) => (jsxRuntime.jsx("a", { href: href || '/', className: className, children: children || jsxRuntime.jsx(components_SmartHRLogo_SmartHRLogo.SmartHRLogo, { fill: enableNew ? 'brand' : undefined, className: "shr-p-0.75" }) })));
 const MemoizedAppLauncher = React.memo(({ featureName, apps = [], enableNew }) => featureName && jsxRuntime.jsx(components_Header_AppLauncher_AppLauncher.AppLauncher, { apps: apps, enableNew: enableNew, triggerLabel: featureName }));
 const TenantSwitcher = React.memo(({ currentTenantId, tenants, classNames, onTenantSelect }) => {
     const currentTenantName = React.useMemo(() => {

package/lib/components/Header/Header.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Header.cjs","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Button } from '../Button'\nimport { Cluster } from '../Layout'\nimport { SmartHRLogo } from '../SmartHRLogo'\nimport { Text } from '../Text'\n\nimport { AppLauncher } from './AppLauncher'\nimport { HeaderDropdownMenuButton } from './HeaderDropdownMenuButton'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-Header', 'shr-bg-brand shr-px-1.25', 'max-md:shr-px-0.75'],\n    logoLink: [\n      'smarthr-ui-Header-logoLink',\n      /* ロゴが持つ padding 分だけ調整 */\n      '-shr-ms-0.75',\n      'focus-visible:shr-focus-indicator',\n    ],\n    tenantInfo: ['smarthr-ui-Header-tenantInfo', 'shr-ms-auto'],\n    tenantNameText: 'shr-px-0.25',\n    actions: ['smarthr-ui-Header-actions', 'shr-ms-auto'],\n  },\n  variants: {\n    enableNew: {\n      true: {\n        wrapper: [\n          'shr-border-0 shr-border-b shr-border-t-6 shr-border-solid shr-border-b-default shr-border-t-brand shr-bg-white shr-px-1.5',\n        ],\n        logoLink: '',\n        tenantInfo: '',\n        tenantNameText: '',\n        actions: 'shr-py-0.5',\n      },\n    },\n  },\n})\n\ntype Tenant = PropsWithChildren<{\n  id: string\n  name: ReactNode\n}>\n\ntype AbstractProps = PropsWithChildren<{\n  /** ロゴ */\n  logo?: ReactElement\n  /** ロゴリンク */\n  logoHref?: string\n  /** 機能名（enableNew と合わせて使います） */\n  featureName?: ReactNode\n  /** 機能群（enableNew と合わせて使います） */\n  apps?: ComponentProps<typeof AppLauncher>['apps']\n  /** テナント一覧 */\n  tenants?: Tenant[]\n  /** 現在のテナント ID */\n  currentTenantId?: string\n  /** テナントが選択された時に発火するコールバック関数 */\n  onTenantSelect?: (id: string) => void\n  /** @deprecated internal-ui から利用するので使わないでください。 */\n  enableNew?: boolean\n}> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentProps<'header'>, keyof AbstractProps>\n\nconst COMMON_GAP = { column: 0.25, row: 0 } as const\nconst CHILDREN_GAP = { column: 0.5, row: 0.25 } as const\n\nexport const Header: FC<Props> = ({\n  enableNew,\n  logo,\n  logoHref,\n  featureName,\n  apps,\n  tenants,\n  currentTenantId,\n  onTenantSelect,\n  children,\n  className,\n}) => {\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      logoLink,\n      tenantInfo: tenantInfoStyle,\n      tenantNameText,\n      actions,\n    } = classNameGenerator({ enableNew })\n\n    return {\n      wrapper: wrapper({ className }),\n      logoLink: logoLink(),\n      tenantInfo: tenantInfoStyle(),\n      tenantNameText: tenantNameText(),\n      actions: actions(),\n    }\n  }, [enableNew, className])\n\n  return (\n    <Cluster as=\"header\" justify=\"space-between\" gap={COMMON_GAP} className={classNames.wrapper}>\n      <Cluster align=\"center\" gap={COMMON_GAP}>\n        <Logo href={logoHref} enableNew={enableNew} className={classNames.logoLink}>\n          {logo}\n        </Logo>\n        {enableNew ? (\n          <MemoizedAppLauncher featureName={featureName} apps={apps} enableNew={enableNew} />\n        ) : (\n          <TenantSwitcher\n            currentTenantId={currentTenantId}\n            tenants={tenants}\n            classNames={classNames}\n            onTenantSelect={onTenantSelect}\n          />\n        )}\n      </Cluster>\n      <Cluster align=\"center\" justify=\"flex-end\" gap={CHILDREN_GAP} className={classNames.actions}>\n        {children}\n      </Cluster>\n    </Cluster>\n  )\n}\n\nconst Logo = memo<\n  Pick<Props, 'enableNew'> & { children: Props['logo']; href: Props['logoHref']; className: string }\n>(({ children, href, enableNew, className }) => (\n  <a href={href || '/'} className={className}>\n    {children || <SmartHRLogo fill={enableNew ? 'brand' : undefined} className=\"shr-p-0.75\" />}\n  </a>\n))\n\nconst MemoizedAppLauncher = memo<Pick<Props, 'featureName' | 'apps' | 'enableNew'>>(\n  ({ featureName, apps = [], enableNew }) =>\n    featureName && <AppLauncher apps={apps} enableNew={enableNew} triggerLabel={featureName} />,\n)\n\nconst TenantSwitcher = memo<\n  Pick<Props, 'currentTenantId' | 'tenants' | 'onTenantSelect'> & {\n    classNames: { tenantInfo: string; tenantNameText: string }\n  }\n>(({ currentTenantId, tenants, classNames, onTenantSelect }) => {\n  const currentTenantName = useMemo(() => {\n    if (tenants && tenants.length >= 1) {\n      const current = tenants.find(({ id }) => id === currentTenantId)\n\n      return current ? current.name : tenants[0].name\n    }\n\n    return undefined\n  }, [currentTenantId, tenants])\n\n  return (\n    currentTenantName && (\n      <div className={classNames.tenantInfo}>\n        {tenants && tenants.length > 1 ? (\n          <MultiTenantDropdownMenuButton\n            trigger={currentTenantName}\n            tenants={tenants}\n            onTenantSelect={onTenantSelect}\n          />\n        ) : (\n          <Text color=\"TEXT_WHITE\" className={classNames.tenantNameText}>\n            {currentTenantName}\n          </Text>\n        )}\n      </div>\n    )\n  )\n})\n\nconst MultiTenantDropdownMenuButton = memo<\n  Pick<Required<Props>, 'tenants'> & Pick<Props, 'onTenantSelect'> & { trigger: ReactNode }\n>(({ trigger, tenants, onTenantSelect }) => {\n  const onClick = useMemo(\n    () =>\n      onTenantSelect\n        ? (e: MouseEvent<HTMLButtonElement>) => {\n            onTenantSelect(e.currentTarget.value)\n          }\n        : undefined,\n    [onTenantSelect],\n  )\n\n  return (\n    <HeaderDropdownMenuButton trigger={trigger}>\n      {tenants.map(({ id, name }) => (\n        <Button key={id} value={id} onClick={onClick}>\n          {name}\n        </Button>\n      ))}\n    </HeaderDropdownMenuButton>\n  )\n})\n"],"names":["tv","useMemo","_jsxs","Cluster","_jsx","memo","SmartHRLogo","AppLauncher","Text","HeaderDropdownMenuButton","Button"],"mappings":"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"}
+{"version":3,"file":"Header.cjs","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Button } from '../Button'\nimport { Cluster } from '../Layout'\nimport { SmartHRLogo } from '../SmartHRLogo'\nimport { Text } from '../Text'\n\nimport { AppLauncher } from './AppLauncher'\nimport { HeaderDropdownMenuButton } from './HeaderDropdownMenuButton'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-Header', 'shr-bg-brand shr-px-1.25', 'max-md:shr-px-0.75'],\n    logoLink: [\n      'smarthr-ui-Header-logoLink',\n      /* ロゴが持つ padding 分だけ調整 */\n      '-shr-ms-0.75',\n      'focus-visible:shr-focus-indicator',\n    ],\n    tenantInfo: ['smarthr-ui-Header-tenantInfo', 'shr-ms-auto'],\n    tenantNameText: 'shr-px-0.25',\n    actions: ['smarthr-ui-Header-actions', 'shr-ms-auto'],\n  },\n  variants: {\n    enableNew: {\n      true: {\n        wrapper: [\n          'shr-border-0 shr-border-b shr-border-t-6 shr-border-solid shr-border-b-default shr-border-t-brand shr-bg-white shr-px-1.5',\n        ],\n        logoLink: '',\n        tenantInfo: '',\n        tenantNameText: '',\n        actions: 'shr-py-0.5',\n      },\n    },\n  },\n})\n\ntype Tenant = PropsWithChildren<{\n  id: string\n  name: ReactNode\n}>\n\ntype AbstractProps = PropsWithChildren<{\n  /** ロゴ */\n  logo?: ReactElement\n  /** ロゴリンク */\n  logoHref?: string\n  /** 機能名（enableNew と合わせて使います） */\n  featureName?: ReactNode\n  /** 機能群（enableNew と合わせて使います） */\n  apps?: ComponentProps<typeof AppLauncher>['apps']\n  /** テナント一覧 */\n  tenants?: Tenant[]\n  /** 現在のテナント ID */\n  currentTenantId?: string\n  /** テナントが選択された時に発火するコールバック関数 */\n  onTenantSelect?: (id: string) => void\n  /** @deprecated internal-ui から利用するので使わないでください。 */\n  enableNew?: boolean\n}> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentProps<'header'>, keyof AbstractProps>\n\nconst COMMON_GAP = { column: 0.25, row: 0 } as const\nconst CHILDREN_GAP = { column: 0.5, row: 0.25 } as const\n\nexport const Header: FC<Props> = ({\n  enableNew,\n  logo,\n  logoHref,\n  featureName,\n  apps,\n  tenants,\n  currentTenantId,\n  onTenantSelect,\n  children,\n  className,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      logoLink,\n      tenantInfo: tenantInfoStyle,\n      tenantNameText,\n      actions,\n    } = classNameGenerator({ enableNew })\n\n    return {\n      wrapper: wrapper({ className }),\n      logoLink: logoLink(),\n      tenantInfo: tenantInfoStyle(),\n      tenantNameText: tenantNameText(),\n      actions: actions(),\n    }\n  }, [enableNew, className])\n\n  return (\n    <Cluster\n      {...rest}\n      as=\"header\"\n      justify=\"space-between\"\n      gap={COMMON_GAP}\n      className={classNames.wrapper}\n    >\n      <Cluster align=\"center\" gap={COMMON_GAP}>\n        <LogoLink href={logoHref} enableNew={enableNew} className={classNames.logoLink}>\n          {logo}\n        </LogoLink>\n        {enableNew ? (\n          <MemoizedAppLauncher featureName={featureName} apps={apps} enableNew={enableNew} />\n        ) : (\n          <TenantSwitcher\n            currentTenantId={currentTenantId}\n            tenants={tenants}\n            classNames={classNames}\n            onTenantSelect={onTenantSelect}\n          />\n        )}\n      </Cluster>\n      <Cluster align=\"center\" justify=\"flex-end\" gap={CHILDREN_GAP} className={classNames.actions}>\n        {children}\n      </Cluster>\n    </Cluster>\n  )\n}\n\nconst LogoLink = memo<\n  Pick<Props, 'enableNew'> & { children: Props['logo']; href: Props['logoHref']; className: string }\n>(({ children, href, enableNew, className }) => (\n  <a href={href || '/'} className={className}>\n    {children || <SmartHRLogo fill={enableNew ? 'brand' : undefined} className=\"shr-p-0.75\" />}\n  </a>\n))\n\nconst MemoizedAppLauncher = memo<Pick<Props, 'featureName' | 'apps' | 'enableNew'>>(\n  ({ featureName, apps = [], enableNew }) =>\n    featureName && <AppLauncher apps={apps} enableNew={enableNew} triggerLabel={featureName} />,\n)\n\nconst TenantSwitcher = memo<\n  Pick<Props, 'currentTenantId' | 'tenants' | 'onTenantSelect'> & {\n    classNames: { tenantInfo: string; tenantNameText: string }\n  }\n>(({ currentTenantId, tenants, classNames, onTenantSelect }) => {\n  const currentTenantName = useMemo(() => {\n    if (tenants && tenants.length >= 1) {\n      const current = tenants.find(({ id }) => id === currentTenantId)\n\n      return current ? current.name : tenants[0].name\n    }\n\n    return undefined\n  }, [currentTenantId, tenants])\n\n  return (\n    currentTenantName && (\n      <div className={classNames.tenantInfo}>\n        {tenants && tenants.length > 1 ? (\n          <MultiTenantDropdownMenuButton\n            trigger={currentTenantName}\n            tenants={tenants}\n            onTenantSelect={onTenantSelect}\n          />\n        ) : (\n          <Text color=\"TEXT_WHITE\" className={classNames.tenantNameText}>\n            {currentTenantName}\n          </Text>\n        )}\n      </div>\n    )\n  )\n})\n\nconst MultiTenantDropdownMenuButton = memo<\n  Pick<Required<Props>, 'tenants'> & Pick<Props, 'onTenantSelect'> & { trigger: ReactNode }\n>(({ trigger, tenants, onTenantSelect }) => {\n  const onClick = useMemo(\n    () =>\n      onTenantSelect\n        ? (e: MouseEvent<HTMLButtonElement>) => {\n            onTenantSelect(e.currentTarget.value)\n          }\n        : undefined,\n    [onTenantSelect],\n  )\n\n  return (\n    <HeaderDropdownMenuButton trigger={trigger}>\n      {tenants.map(({ id, name }) => (\n        <Button key={id} value={id} onClick={onClick}>\n          {name}\n        </Button>\n      ))}\n    </HeaderDropdownMenuButton>\n  )\n})\n"],"names":["tv","useMemo","_jsxs","Cluster","_jsx","memo","SmartHRLogo","AppLauncher","Text","HeaderDropdownMenuButton","Button"],"mappings":"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"}

package/lib/components/Header/Header.js

@@ -44,7 +44,7 @@ const classNameGenerator = ce({
 });
 const COMMON_GAP = { column: 0.25, row: 0 };
 const CHILDREN_GAP = { column: 0.5, row: 0.25 };
-const Header = ({ enableNew, logo, logoHref, featureName, apps, tenants, currentTenantId, onTenantSelect, children, className, }) => {
+const Header = ({ enableNew, logo, logoHref, featureName, apps, tenants, currentTenantId, onTenantSelect, children, className, ...rest }) => {
     const classNames = useMemo(() => {
         const { wrapper, logoLink, tenantInfo: tenantInfoStyle, tenantNameText, actions, } = classNameGenerator({ enableNew });
         return {
@@ -55,9 +55,9 @@ const Header = ({ enableNew, logo, logoHref, featureName, apps, tenants, current
             actions: actions(),
         };
     }, [enableNew, className]);
-    return (jsxs(Cluster, { as: "header", justify: "space-between", gap: COMMON_GAP, className: classNames.wrapper, children: [jsxs(Cluster, { align: "center", gap: COMMON_GAP, children: [jsx(Logo, { href: logoHref, enableNew: enableNew, className: classNames.logoLink, children: logo }), enableNew ? (jsx(MemoizedAppLauncher, { featureName: featureName, apps: apps, enableNew: enableNew })) : (jsx(TenantSwitcher, { currentTenantId: currentTenantId, tenants: tenants, classNames: classNames, onTenantSelect: onTenantSelect }))] }), jsx(Cluster, { align: "center", justify: "flex-end", gap: CHILDREN_GAP, className: classNames.actions, children: children })] }));
+    return (jsxs(Cluster, { ...rest, as: "header", justify: "space-between", gap: COMMON_GAP, className: classNames.wrapper, children: [jsxs(Cluster, { align: "center", gap: COMMON_GAP, children: [jsx(LogoLink, { href: logoHref, enableNew: enableNew, className: classNames.logoLink, children: logo }), enableNew ? (jsx(MemoizedAppLauncher, { featureName: featureName, apps: apps, enableNew: enableNew })) : (jsx(TenantSwitcher, { currentTenantId: currentTenantId, tenants: tenants, classNames: classNames, onTenantSelect: onTenantSelect }))] }), jsx(Cluster, { align: "center", justify: "flex-end", gap: CHILDREN_GAP, className: classNames.actions, children: children })] }));
 };
-const Logo = memo(({ children, href, enableNew, className }) => (jsx("a", { href: href || '/', className: className, children: children || jsx(SmartHRLogo, { fill: enableNew ? 'brand' : undefined, className: "shr-p-0.75" }) })));
+const LogoLink = memo(({ children, href, enableNew, className }) => (jsx("a", { href: href || '/', className: className, children: children || jsx(SmartHRLogo, { fill: enableNew ? 'brand' : undefined, className: "shr-p-0.75" }) })));
 const MemoizedAppLauncher = memo(({ featureName, apps = [], enableNew }) => featureName && jsx(AppLauncher, { apps: apps, enableNew: enableNew, triggerLabel: featureName }));
 const TenantSwitcher = memo(({ currentTenantId, tenants, classNames, onTenantSelect }) => {
     const currentTenantName = useMemo(() => {

package/lib/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Button } from '../Button'\nimport { Cluster } from '../Layout'\nimport { SmartHRLogo } from '../SmartHRLogo'\nimport { Text } from '../Text'\n\nimport { AppLauncher } from './AppLauncher'\nimport { HeaderDropdownMenuButton } from './HeaderDropdownMenuButton'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-Header', 'shr-bg-brand shr-px-1.25', 'max-md:shr-px-0.75'],\n    logoLink: [\n      'smarthr-ui-Header-logoLink',\n      /* ロゴが持つ padding 分だけ調整 */\n      '-shr-ms-0.75',\n      'focus-visible:shr-focus-indicator',\n    ],\n    tenantInfo: ['smarthr-ui-Header-tenantInfo', 'shr-ms-auto'],\n    tenantNameText: 'shr-px-0.25',\n    actions: ['smarthr-ui-Header-actions', 'shr-ms-auto'],\n  },\n  variants: {\n    enableNew: {\n      true: {\n        wrapper: [\n          'shr-border-0 shr-border-b shr-border-t-6 shr-border-solid shr-border-b-default shr-border-t-brand shr-bg-white shr-px-1.5',\n        ],\n        logoLink: '',\n        tenantInfo: '',\n        tenantNameText: '',\n        actions: 'shr-py-0.5',\n      },\n    },\n  },\n})\n\ntype Tenant = PropsWithChildren<{\n  id: string\n  name: ReactNode\n}>\n\ntype AbstractProps = PropsWithChildren<{\n  /** ロゴ */\n  logo?: ReactElement\n  /** ロゴリンク */\n  logoHref?: string\n  /** 機能名（enableNew と合わせて使います） */\n  featureName?: ReactNode\n  /** 機能群（enableNew と合わせて使います） */\n  apps?: ComponentProps<typeof AppLauncher>['apps']\n  /** テナント一覧 */\n  tenants?: Tenant[]\n  /** 現在のテナント ID */\n  currentTenantId?: string\n  /** テナントが選択された時に発火するコールバック関数 */\n  onTenantSelect?: (id: string) => void\n  /** @deprecated internal-ui から利用するので使わないでください。 */\n  enableNew?: boolean\n}> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentProps<'header'>, keyof AbstractProps>\n\nconst COMMON_GAP = { column: 0.25, row: 0 } as const\nconst CHILDREN_GAP = { column: 0.5, row: 0.25 } as const\n\nexport const Header: FC<Props> = ({\n  enableNew,\n  logo,\n  logoHref,\n  featureName,\n  apps,\n  tenants,\n  currentTenantId,\n  onTenantSelect,\n  children,\n  className,\n}) => {\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      logoLink,\n      tenantInfo: tenantInfoStyle,\n      tenantNameText,\n      actions,\n    } = classNameGenerator({ enableNew })\n\n    return {\n      wrapper: wrapper({ className }),\n      logoLink: logoLink(),\n      tenantInfo: tenantInfoStyle(),\n      tenantNameText: tenantNameText(),\n      actions: actions(),\n    }\n  }, [enableNew, className])\n\n  return (\n    <Cluster as=\"header\" justify=\"space-between\" gap={COMMON_GAP} className={classNames.wrapper}>\n      <Cluster align=\"center\" gap={COMMON_GAP}>\n        <Logo href={logoHref} enableNew={enableNew} className={classNames.logoLink}>\n          {logo}\n        </Logo>\n        {enableNew ? (\n          <MemoizedAppLauncher featureName={featureName} apps={apps} enableNew={enableNew} />\n        ) : (\n          <TenantSwitcher\n            currentTenantId={currentTenantId}\n            tenants={tenants}\n            classNames={classNames}\n            onTenantSelect={onTenantSelect}\n          />\n        )}\n      </Cluster>\n      <Cluster align=\"center\" justify=\"flex-end\" gap={CHILDREN_GAP} className={classNames.actions}>\n        {children}\n      </Cluster>\n    </Cluster>\n  )\n}\n\nconst Logo = memo<\n  Pick<Props, 'enableNew'> & { children: Props['logo']; href: Props['logoHref']; className: string }\n>(({ children, href, enableNew, className }) => (\n  <a href={href || '/'} className={className}>\n    {children || <SmartHRLogo fill={enableNew ? 'brand' : undefined} className=\"shr-p-0.75\" />}\n  </a>\n))\n\nconst MemoizedAppLauncher = memo<Pick<Props, 'featureName' | 'apps' | 'enableNew'>>(\n  ({ featureName, apps = [], enableNew }) =>\n    featureName && <AppLauncher apps={apps} enableNew={enableNew} triggerLabel={featureName} />,\n)\n\nconst TenantSwitcher = memo<\n  Pick<Props, 'currentTenantId' | 'tenants' | 'onTenantSelect'> & {\n    classNames: { tenantInfo: string; tenantNameText: string }\n  }\n>(({ currentTenantId, tenants, classNames, onTenantSelect }) => {\n  const currentTenantName = useMemo(() => {\n    if (tenants && tenants.length >= 1) {\n      const current = tenants.find(({ id }) => id === currentTenantId)\n\n      return current ? current.name : tenants[0].name\n    }\n\n    return undefined\n  }, [currentTenantId, tenants])\n\n  return (\n    currentTenantName && (\n      <div className={classNames.tenantInfo}>\n        {tenants && tenants.length > 1 ? (\n          <MultiTenantDropdownMenuButton\n            trigger={currentTenantName}\n            tenants={tenants}\n            onTenantSelect={onTenantSelect}\n          />\n        ) : (\n          <Text color=\"TEXT_WHITE\" className={classNames.tenantNameText}>\n            {currentTenantName}\n          </Text>\n        )}\n      </div>\n    )\n  )\n})\n\nconst MultiTenantDropdownMenuButton = memo<\n  Pick<Required<Props>, 'tenants'> & Pick<Props, 'onTenantSelect'> & { trigger: ReactNode }\n>(({ trigger, tenants, onTenantSelect }) => {\n  const onClick = useMemo(\n    () =>\n      onTenantSelect\n        ? (e: MouseEvent<HTMLButtonElement>) => {\n            onTenantSelect(e.currentTarget.value)\n          }\n        : undefined,\n    [onTenantSelect],\n  )\n\n  return (\n    <HeaderDropdownMenuButton trigger={trigger}>\n      {tenants.map(({ id, name }) => (\n        <Button key={id} value={id} onClick={onClick}>\n          {name}\n        </Button>\n      ))}\n    </HeaderDropdownMenuButton>\n  )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Button } from '../Button'\nimport { Cluster } from '../Layout'\nimport { SmartHRLogo } from '../SmartHRLogo'\nimport { Text } from '../Text'\n\nimport { AppLauncher } from './AppLauncher'\nimport { HeaderDropdownMenuButton } from './HeaderDropdownMenuButton'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-Header', 'shr-bg-brand shr-px-1.25', 'max-md:shr-px-0.75'],\n    logoLink: [\n      'smarthr-ui-Header-logoLink',\n      /* ロゴが持つ padding 分だけ調整 */\n      '-shr-ms-0.75',\n      'focus-visible:shr-focus-indicator',\n    ],\n    tenantInfo: ['smarthr-ui-Header-tenantInfo', 'shr-ms-auto'],\n    tenantNameText: 'shr-px-0.25',\n    actions: ['smarthr-ui-Header-actions', 'shr-ms-auto'],\n  },\n  variants: {\n    enableNew: {\n      true: {\n        wrapper: [\n          'shr-border-0 shr-border-b shr-border-t-6 shr-border-solid shr-border-b-default shr-border-t-brand shr-bg-white shr-px-1.5',\n        ],\n        logoLink: '',\n        tenantInfo: '',\n        tenantNameText: '',\n        actions: 'shr-py-0.5',\n      },\n    },\n  },\n})\n\ntype Tenant = PropsWithChildren<{\n  id: string\n  name: ReactNode\n}>\n\ntype AbstractProps = PropsWithChildren<{\n  /** ロゴ */\n  logo?: ReactElement\n  /** ロゴリンク */\n  logoHref?: string\n  /** 機能名（enableNew と合わせて使います） */\n  featureName?: ReactNode\n  /** 機能群（enableNew と合わせて使います） */\n  apps?: ComponentProps<typeof AppLauncher>['apps']\n  /** テナント一覧 */\n  tenants?: Tenant[]\n  /** 現在のテナント ID */\n  currentTenantId?: string\n  /** テナントが選択された時に発火するコールバック関数 */\n  onTenantSelect?: (id: string) => void\n  /** @deprecated internal-ui から利用するので使わないでください。 */\n  enableNew?: boolean\n}> &\n  VariantProps<typeof classNameGenerator>\ntype Props = AbstractProps & Omit<ComponentProps<'header'>, keyof AbstractProps>\n\nconst COMMON_GAP = { column: 0.25, row: 0 } as const\nconst CHILDREN_GAP = { column: 0.5, row: 0.25 } as const\n\nexport const Header: FC<Props> = ({\n  enableNew,\n  logo,\n  logoHref,\n  featureName,\n  apps,\n  tenants,\n  currentTenantId,\n  onTenantSelect,\n  children,\n  className,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      logoLink,\n      tenantInfo: tenantInfoStyle,\n      tenantNameText,\n      actions,\n    } = classNameGenerator({ enableNew })\n\n    return {\n      wrapper: wrapper({ className }),\n      logoLink: logoLink(),\n      tenantInfo: tenantInfoStyle(),\n      tenantNameText: tenantNameText(),\n      actions: actions(),\n    }\n  }, [enableNew, className])\n\n  return (\n    <Cluster\n      {...rest}\n      as=\"header\"\n      justify=\"space-between\"\n      gap={COMMON_GAP}\n      className={classNames.wrapper}\n    >\n      <Cluster align=\"center\" gap={COMMON_GAP}>\n        <LogoLink href={logoHref} enableNew={enableNew} className={classNames.logoLink}>\n          {logo}\n        </LogoLink>\n        {enableNew ? (\n          <MemoizedAppLauncher featureName={featureName} apps={apps} enableNew={enableNew} />\n        ) : (\n          <TenantSwitcher\n            currentTenantId={currentTenantId}\n            tenants={tenants}\n            classNames={classNames}\n            onTenantSelect={onTenantSelect}\n          />\n        )}\n      </Cluster>\n      <Cluster align=\"center\" justify=\"flex-end\" gap={CHILDREN_GAP} className={classNames.actions}>\n        {children}\n      </Cluster>\n    </Cluster>\n  )\n}\n\nconst LogoLink = memo<\n  Pick<Props, 'enableNew'> & { children: Props['logo']; href: Props['logoHref']; className: string }\n>(({ children, href, enableNew, className }) => (\n  <a href={href || '/'} className={className}>\n    {children || <SmartHRLogo fill={enableNew ? 'brand' : undefined} className=\"shr-p-0.75\" />}\n  </a>\n))\n\nconst MemoizedAppLauncher = memo<Pick<Props, 'featureName' | 'apps' | 'enableNew'>>(\n  ({ featureName, apps = [], enableNew }) =>\n    featureName && <AppLauncher apps={apps} enableNew={enableNew} triggerLabel={featureName} />,\n)\n\nconst TenantSwitcher = memo<\n  Pick<Props, 'currentTenantId' | 'tenants' | 'onTenantSelect'> & {\n    classNames: { tenantInfo: string; tenantNameText: string }\n  }\n>(({ currentTenantId, tenants, classNames, onTenantSelect }) => {\n  const currentTenantName = useMemo(() => {\n    if (tenants && tenants.length >= 1) {\n      const current = tenants.find(({ id }) => id === currentTenantId)\n\n      return current ? current.name : tenants[0].name\n    }\n\n    return undefined\n  }, [currentTenantId, tenants])\n\n  return (\n    currentTenantName && (\n      <div className={classNames.tenantInfo}>\n        {tenants && tenants.length > 1 ? (\n          <MultiTenantDropdownMenuButton\n            trigger={currentTenantName}\n            tenants={tenants}\n            onTenantSelect={onTenantSelect}\n          />\n        ) : (\n          <Text color=\"TEXT_WHITE\" className={classNames.tenantNameText}>\n            {currentTenantName}\n          </Text>\n        )}\n      </div>\n    )\n  )\n})\n\nconst MultiTenantDropdownMenuButton = memo<\n  Pick<Required<Props>, 'tenants'> & Pick<Props, 'onTenantSelect'> & { trigger: ReactNode }\n>(({ trigger, tenants, onTenantSelect }) => {\n  const onClick = useMemo(\n    () =>\n      onTenantSelect\n        ? (e: MouseEvent<HTMLButtonElement>) => {\n            onTenantSelect(e.currentTarget.value)\n          }\n        : undefined,\n    [onTenantSelect],\n  )\n\n  return (\n    <HeaderDropdownMenuButton trigger={trigger}>\n      {tenants.map(({ id, name }) => (\n        <Button key={id} value={id} onClick={onClick}>\n          {name}\n        </Button>\n      ))}\n    </HeaderDropdownMenuButton>\n  )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,CAAC,mBAAmB,EAAE,0BAA0B,EAAE,oBAAoB,CAAC;AAChF,QAAA,QAAQ,EAAE;YACR,4BAA4B;;YAE5B,cAAc;YACd,mCAAmC;AACpC,SAAA;AACD,QAAA,UAAU,EAAE,CAAC,8BAA8B,EAAE,aAAa,CAAC;AAC3D,QAAA,cAAc,EAAE,aAAa;AAC7B,QAAA,OAAO,EAAE,CAAC,2BAA2B,EAAE,aAAa,CAAC;AACtD,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE;AACJ,gBAAA,OAAO,EAAE;oBACP,2HAA2H;AAC5H,iBAAA;AACD,gBAAA,QAAQ,EAAE,EAAE;AACZ,gBAAA,UAAU,EAAE,EAAE;AACd,gBAAA,cAAc,EAAE,EAAE;AAClB,gBAAA,OAAO,EAAE,YAAY;AACtB,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AA4BF,MAAM,UAAU,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAW;AACpD,MAAM,YAAY,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAW;AAEjD,MAAM,MAAM,GAAc,CAAC,EAChC,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,eAAe,EACf,cAAc,EACd,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;QAC9B,MAAM,EACJ,OAAO,EACP,QAAQ,EACR,UAAU,EAAE,eAAe,EAC3B,cAAc,EACd,OAAO,GACR,GAAG,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;QAErC,OAAO;AACL,YAAA,OAAO,EAAE,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;YAC/B,QAAQ,EAAE,QAAQ,EAAE;YACpB,UAAU,EAAE,eAAe,EAAE;YAC7B,cAAc,EAAE,cAAc,EAAE;YAChC,OAAO,EAAE,OAAO,EAAE;SACnB;AACH,IAAA,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAE1B,IAAA,QACEC,IAAA,CAAC,OAAO,EAAA,EAAA,GACF,IAAI,EACR,EAAE,EAAC,QAAQ,EACX,OAAO,EAAC,eAAe,EACvB,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAAA,CAE7BA,IAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,UAAU,EAAA,QAAA,EAAA,CACrCC,GAAA,CAAC,QAAQ,EAAA,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,QAAQ,EAAA,QAAA,EAC3E,IAAI,EAAA,CACI,EACV,SAAS,IACRA,IAAC,mBAAmB,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAA,CAAI,KAEnFA,GAAA,CAAC,cAAc,EAAA,EACb,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAAA,CAC9B,CACH,CAAA,EAAA,CACO,EACVA,GAAA,CAAC,OAAO,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EACxF,QAAQ,EAAA,CACD,CAAA,EAAA,CACF;AAEd;AAEA,MAAM,QAAQ,GAAG,IAAI,CAEnB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,MACzCA,GAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,IAAI,GAAG,EAAE,SAAS,EAAE,SAAS,EAAA,QAAA,EACvC,QAAQ,IAAIA,GAAA,CAAC,WAAW,IAAC,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,SAAS,EAAC,YAAY,EAAA,CAAG,EAAA,CACxF,CACL,CAAC;AAEF,MAAM,mBAAmB,GAAG,IAAI,CAC9B,CAAC,EAAE,WAAW,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,KACpC,WAAW,IAAIA,IAAC,WAAW,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAA,CAAI,CAC9F;AAED,MAAM,cAAc,GAAG,IAAI,CAIzB,CAAC,EAAE,eAAe,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,KAAI;AAC7D,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,MAAK;QACrC,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,IAAI,CAAC,EAAE;AAClC,YAAA,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,eAAe,CAAC;AAEhE,YAAA,OAAO,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI;QACjD;AAEA,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAE9B,IAAA,QACE,iBAAiB,KACfA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,UAAU,EAAA,QAAA,EAClC,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,IAC5BA,GAAA,CAAC,6BAA6B,EAAA,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAAA,CAC9B,KAEFA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,YAAY,EAAC,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA,QAAA,EAC1D,iBAAiB,EAAA,CACb,CACR,EAAA,CACG,CACP;AAEL,CAAC,CAAC;AAEF,MAAM,6BAA6B,GAAG,IAAI,CAExC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,KAAI;AACzC,IAAA,MAAM,OAAO,GAAG,OAAO,CACrB,MACE;AACE,UAAE,CAAC,CAAgC,KAAI;AACnC,YAAA,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;QACvC;AACF,UAAE,SAAS,EACf,CAAC,cAAc,CAAC,CACjB;AAED,IAAA,QACEA,GAAA,CAAC,wBAAwB,IAAC,OAAO,EAAE,OAAO,EAAA,QAAA,EACvC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,MACxBA,IAAC,MAAM,EAAA,EAAU,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAA,QAAA,EACzC,IAAI,IADM,EAAE,CAEN,CACV,CAAC,EAAA,CACuB;AAE/B,CAAC,CAAC;;;;"}

package/lib/components/Icon/generateIcon.cjs

@@ -3,9 +3,17 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
-var themes_createTextColor = require('../../themes/createTextColor.cjs');
+require('../../themes/createSpacing.cjs');
 var themes_createFontSize = require('../../themes/createFontSize.cjs');
 var themes_createColor = require('../../themes/createColor.cjs');
+var themes_createTextColor = require('../../themes/createTextColor.cjs');
+require('styled-components');
+require('../../_virtual/index.cjs');
+require('../../_virtual/index2.cjs');
+require('../../themes/createShadow/defaultShadow.cjs');
+require('../../themes/createWidth.cjs');
+require('../../themes/createBackgroundColor.cjs');
+require('../../themes/createBorder.cjs');
 var components_VisuallyHiddenText_VisuallyHiddenText = require('../VisuallyHiddenText/VisuallyHiddenText.cjs');
 
 const colorSet = {

package/lib/components/Icon/generateIcon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"generateIcon.cjs","sources":["../../../src/components/Icon/generateIcon.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { color as defaultColorPalette, fontSize, textColor } from '../../tailwind'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport type { FontSizes } from '../../themes'\nimport type { IconType } from 'react-icons'\n\n/**\n * literal union type に補完を効かせるためのハック\n * https://github.com/microsoft/TypeScript/issues/29729\n */\ntype LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>)\n\nexport const colorSet = {\n  TEXT_BLACK: 'black',\n  TEXT_WHITE: 'white',\n  TEXT_GREY: 'grey',\n  TEXT_DISABLED: 'disabled',\n  TEXT_LINK: 'link',\n  MAIN: 'main',\n  DANGER: 'danger',\n  WARNING: 'warning-yellow',\n  BRAND: 'brand',\n} as const\n\nconst existsColor = (color: string): color is keyof typeof colorSet => color in colorSet\n\ntype IconProps = {\n  /**\n   * アイコンの色\n   * @type string | 'TEXT_BLACK' | 'TEXT_GREY' | 'TEXT_DISABLED' | 'TEXT_LINK' | 'MAIN' | 'DANGER' | 'WARNING' | 'BRAND'\n   */\n  color?: LiteralUnion<keyof typeof colorSet>\n  /**\n   * アイコンの大きさ（フォントサイズの抽象値）\n   * @deprecated 親要素やデフォルトフォントサイズが継承されるため固定値の指定は非推奨\n   */\n  size?: FontSizes\n}\n\ntype AbstractProps = {\n  /**アイコンの説明テキスト*/\n  alt?: ReactNode\n}\nexport type Props = AbstractProps &\n  Omit<IconProps & Omit<ComponentProps<'svg'>, keyof IconProps>, keyof AbstractProps>\n\n// HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass\n// altなどもVisuallyHiddenTextで表現している関係上、squareの計算などの際に複数要素として判断されると認知と違う結果になるため使用しています\n\nconst classNameGenerator = tv({\n  slots: {\n    icon: 'smarthr-ui-Icon group-[]/iconWrapper:shr-shrink-0 group-[]/iconWrapper:shr-translate-y-[0.125em] forced-colors:shr-fill-[CanvasText]',\n    wrapperWithAlt: 'smarthr-ui-Icon-extended smarthr-ui-Icon-withAlt shr-relative shr-leading-[0]',\n  },\n})\n\nexport const generateIcon = (SvgIcon: IconType) => {\n  const Icon = memo<Props>(\n    ({\n      color,\n      className,\n      role = 'img',\n      alt,\n      'aria-hidden': ariaHidden,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      focusable = false,\n      size,\n      ...rest\n    }) => {\n      const actualAriaHidden = useMemo(() => {\n        if (ariaHidden !== undefined) {\n          return ariaHidden\n        }\n\n        if (alt !== undefined || (ariaLabel === undefined && ariaLabelledby === undefined)) {\n          return true\n        }\n\n        return undefined\n      }, [ariaHidden, alt, ariaLabel, ariaLabelledby])\n\n      const classNames = useMemo(() => {\n        const { icon, wrapperWithAlt } = classNameGenerator()\n\n        return {\n          icon: icon({ className }),\n          wrapperWithAlt: wrapperWithAlt(),\n        }\n      }, [className])\n\n      const replacedColor = useMemo(() => {\n        if (color && existsColor(color)) {\n          const colorName = colorSet[color]\n\n          if (colorName in textColor) {\n            return textColor[colorName as keyof typeof textColor]\n          }\n\n          return defaultColorPalette[colorName as keyof typeof defaultColorPalette] as string\n        }\n\n        return color\n      }, [color])\n\n      const iconSize = size ? fontSize[size] : '1em' // 指定がない場合は親要素のフォントサイズを継承する\n      const svgIcon = (\n        <SvgIcon\n          {...rest}\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          strokeWidth=\"0\"\n          // size は react-icons のアイコンの大きさ、width / height は自前で SVG からアイコンを作る場合の大きさ指定\n          size={iconSize}\n          width={iconSize}\n          height={iconSize}\n          color={replacedColor}\n          className={classNames.icon}\n          role={role}\n          aria-hidden={actualAriaHidden}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          focusable={focusable}\n        />\n      )\n\n      if (alt) {\n        return (\n          // HINT: VisuallyHiddenTextが存在すると、アイコンなのに2つの要素がある状態になってしまい\n          // styleなどを記述する際、意図しない状態になる場合がある\n          // 回避するため、spanでラップし、開発者のメンタルモデルに合わせる\n          <span className={classNames.wrapperWithAlt}>\n            <VisuallyHiddenText>{alt}</VisuallyHiddenText>\n            {svgIcon}\n          </span>\n        )\n      }\n\n      return svgIcon\n    },\n  )\n\n  Icon.displayName = SvgIcon.name\n\n  return Icon\n}\n"],"names":["tv","memo","useMemo","textColor","defaultColorPalette","fontSize","_jsx","_jsxs","VisuallyHiddenText"],"mappings":";;;;;;;;;;AAeO,MAAM,QAAQ,GAAG;AACtB,IAAA,UAAU,EAAE,OAAO;AACnB,IAAA,UAAU,EAAE,OAAO;AACnB,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,aAAa,EAAE,UAAU;AACzB,IAAA,SAAS,EAAE,MAAM;AACjB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,OAAO,EAAE,gBAAgB;AACzB,IAAA,KAAK,EAAE,OAAO;;AAGhB,MAAM,WAAW,GAAG,CAAC,KAAa,KAAqC,KAAK,IAAI,QAAQ;AAsBxF;AACA;AAEA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,sIAAsI;AAC5I,QAAA,cAAc,EAAE,+EAA+E;AAChG,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,YAAY,GAAG,CAAC,OAAiB,KAAI;AAChD,IAAA,MAAM,IAAI,GAAGC,UAAI,CACf,CAAC,EACC,KAAK,EACL,SAAS,EACT,IAAI,GAAG,KAAK,EACZ,GAAG,EACH,aAAa,EAAE,UAAU,EACzB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,GAAG,IAAI,EACR,KAAI;AACH,QAAA,MAAM,gBAAgB,GAAGC,aAAO,CAAC,MAAK;AACpC,YAAA,IAAI,UAAU,KAAK,SAAS,EAAE;AAC5B,gBAAA,OAAO,UAAU;YACnB;AAEA,YAAA,IAAI,GAAG,KAAK,SAAS,KAAK,SAAS,KAAK,SAAS,IAAI,cAAc,KAAK,SAAS,CAAC,EAAE;AAClF,gBAAA,OAAO,IAAI;YACb;AAEA,YAAA,OAAO,SAAS;QAClB,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC;AAEhD,QAAA,MAAM,UAAU,GAAGA,aAAO,CAAC,MAAK;YAC9B,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,GAAG,kBAAkB,EAAE;YAErD,OAAO;AACL,gBAAA,IAAI,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;gBACzB,cAAc,EAAE,cAAc,EAAE;aACjC;AACH,QAAA,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,QAAA,MAAM,aAAa,GAAGA,aAAO,CAAC,MAAK;AACjC,YAAA,IAAI,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;AAC/B,gBAAA,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEjC,gBAAA,IAAI,SAAS,IAAIC,uCAAS,EAAE;AAC1B,oBAAA,OAAOA,uCAAS,CAAC,SAAmC,CAAC;gBACvD;AAEA,gBAAA,OAAOC,+BAAmB,CAAC,SAA6C,CAAW;YACrF;AAEA,YAAA,OAAO,KAAK;AACd,QAAA,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;AAEX,QAAA,MAAM,QAAQ,GAAG,IAAI,GAAGC,qCAAQ,CAAC,IAAI,CAAC,GAAG,KAAK,CAAA;AAC9C,QAAA,MAAM,OAAO,IACXC,eAAC,OAAO,EAAA,EAAA,GACF,IAAI,EACR,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG;;AAEf,YAAA,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,QAAQ,EAChB,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,UAAU,CAAC,IAAI,EAC1B,IAAI,EAAE,IAAI,EAAA,aAAA,EACG,gBAAgB,EAAA,YAAA,EACjB,SAAS,EAAA,iBAAA,EACJ,cAAc,EAC/B,SAAS,EAAE,SAAS,EAAA,CACpB,CACH;QAED,IAAI,GAAG,EAAE;YACP;;;;AAIE,YAAAC,eAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,UAAU,CAAC,cAAc,EAAA,QAAA,EAAA,CACxCD,cAAA,CAACE,mEAAkB,EAAA,EAAA,QAAA,EAAE,GAAG,EAAA,CAAsB,EAC7C,OAAO,CAAA,EAAA,CACH;QAEX;AAEA,QAAA,OAAO,OAAO;AAChB,IAAA,CAAC,CACF;AAED,IAAA,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,IAAI;AAE/B,IAAA,OAAO,IAAI;AACb;;;;;"}
+{"version":3,"file":"generateIcon.cjs","sources":["../../../src/components/Icon/generateIcon.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { color as defaultColorPalette, fontSize, textColor } from '../../tailwind'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport type { FontSizes } from '../../themes'\nimport type { IconType } from 'react-icons'\n\n/**\n * literal union type に補完を効かせるためのハック\n * https://github.com/microsoft/TypeScript/issues/29729\n */\ntype LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>)\n\nexport const colorSet = {\n  TEXT_BLACK: 'black',\n  TEXT_WHITE: 'white',\n  TEXT_GREY: 'grey',\n  TEXT_DISABLED: 'disabled',\n  TEXT_LINK: 'link',\n  MAIN: 'main',\n  DANGER: 'danger',\n  WARNING: 'warning-yellow',\n  BRAND: 'brand',\n} as const\n\nconst existsColor = (color: string): color is keyof typeof colorSet => color in colorSet\n\ntype IconProps = {\n  /**\n   * アイコンの色\n   * @type string | 'TEXT_BLACK' | 'TEXT_GREY' | 'TEXT_DISABLED' | 'TEXT_LINK' | 'MAIN' | 'DANGER' | 'WARNING' | 'BRAND'\n   */\n  color?: LiteralUnion<keyof typeof colorSet>\n  /**\n   * アイコンの大きさ（フォントサイズの抽象値）\n   * @deprecated 親要素やデフォルトフォントサイズが継承されるため固定値の指定は非推奨\n   */\n  size?: FontSizes\n}\n\ntype AbstractProps = {\n  /**アイコンの説明テキスト*/\n  alt?: ReactNode\n}\nexport type Props = AbstractProps &\n  Omit<IconProps & Omit<ComponentProps<'svg'>, keyof IconProps>, keyof AbstractProps>\n\n// HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass\n// altなどもVisuallyHiddenTextで表現している関係上、squareの計算などの際に複数要素として判断されると認知と違う結果になるため使用しています\n\nconst classNameGenerator = tv({\n  slots: {\n    icon: 'smarthr-ui-Icon group-[]/iconWrapper:shr-shrink-0 group-[]/iconWrapper:shr-translate-y-[0.125em] forced-colors:shr-fill-[CanvasText]',\n    wrapperWithAlt: 'smarthr-ui-Icon-extended smarthr-ui-Icon-withAlt shr-relative shr-leading-[0]',\n  },\n})\n\nexport const generateIcon = (SvgIcon: IconType) => {\n  const Icon = memo<Props>(\n    ({\n      color,\n      className,\n      role = 'img',\n      alt,\n      'aria-hidden': ariaHidden,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      focusable = false,\n      size,\n      ...rest\n    }) => {\n      const actualAriaHidden = useMemo(() => {\n        if (ariaHidden !== undefined) {\n          return ariaHidden\n        }\n\n        if (alt !== undefined || (ariaLabel === undefined && ariaLabelledby === undefined)) {\n          return true\n        }\n\n        return undefined\n      }, [ariaHidden, alt, ariaLabel, ariaLabelledby])\n\n      const classNames = useMemo(() => {\n        const { icon, wrapperWithAlt } = classNameGenerator()\n\n        return {\n          icon: icon({ className }),\n          wrapperWithAlt: wrapperWithAlt(),\n        }\n      }, [className])\n\n      const replacedColor = useMemo(() => {\n        if (color && existsColor(color)) {\n          const colorName = colorSet[color]\n\n          if (colorName in textColor) {\n            return textColor[colorName as keyof typeof textColor]\n          }\n\n          return defaultColorPalette[colorName as keyof typeof defaultColorPalette] as string\n        }\n\n        return color\n      }, [color])\n\n      const iconSize = size ? fontSize[size] : '1em' // 指定がない場合は親要素のフォントサイズを継承する\n      const svgIcon = (\n        <SvgIcon\n          {...rest}\n          stroke=\"currentColor\"\n          fill=\"currentColor\"\n          strokeWidth=\"0\"\n          // size は react-icons のアイコンの大きさ、width / height は自前で SVG からアイコンを作る場合の大きさ指定\n          size={iconSize}\n          width={iconSize}\n          height={iconSize}\n          color={replacedColor}\n          className={classNames.icon}\n          role={role}\n          aria-hidden={actualAriaHidden}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          focusable={focusable}\n        />\n      )\n\n      if (alt) {\n        return (\n          // HINT: VisuallyHiddenTextが存在すると、アイコンなのに2つの要素がある状態になってしまい\n          // styleなどを記述する際、意図しない状態になる場合がある\n          // 回避するため、spanでラップし、開発者のメンタルモデルに合わせる\n          <span className={classNames.wrapperWithAlt}>\n            <VisuallyHiddenText>{alt}</VisuallyHiddenText>\n            {svgIcon}\n          </span>\n        )\n      }\n\n      return svgIcon\n    },\n  )\n\n  Icon.displayName = SvgIcon.name\n\n  return Icon\n}\n"],"names":["tv","memo","useMemo","textColor","defaultColorPalette","fontSize","_jsx","_jsxs","VisuallyHiddenText"],"mappings":"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"}

package/lib/components/Icon/generateIcon.js

@@ -1,9 +1,17 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useMemo } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
-import { defaultTextColor } from '../../themes/createTextColor.js';
+import '../../themes/createSpacing.js';
 import { defaultFontSize } from '../../themes/createFontSize.js';
 import { defaultColor } from '../../themes/createColor.js';
+import { defaultTextColor } from '../../themes/createTextColor.js';
+import 'styled-components';
+import '../../_virtual/index.js';
+import '../../_virtual/index2.js';
+import '../../themes/createShadow/defaultShadow.js';
+import '../../themes/createWidth.js';
+import '../../themes/createBackgroundColor.js';
+import '../../themes/createBorder.js';
 import { VisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText.js';
 
 const colorSet = {