smarthr-ui 96.1.2 → 97.0.0

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  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;;;"}
+{"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 { 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={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      // button要素の disabled / aria-disabled が動的に変化した場合も検知してリスナーを貼り直す\n      attributes: true,\n      attributeFilter: ['disabled', 'aria-disabled'],\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":";;;;;;;;;;;;;;;;;;;;;;;;;AAqEA;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;AAEA;AACF;AAEO;;AAGD;;AAGF;AACE;;AAEA;AACE;;AAGJ;AACF;AAEF;AACE;;AAGE;;;;;;;AASI;AACA;;AAKJ;AAEA;AAEA;AACA;AACE;AACA;;AAEA;AACA;AACD;AAED;;AAEA;;AAGF;AAKF;;;"}

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

@@ -1,7 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 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';
 import '../../../intl/IntlProvider.js';
@@ -76,7 +75,7 @@ const TriggerLabelText = memo(({ children, onlyIconTrigger }) => {
         return children;
     }
     const Icon = (typeof onlyIconTrigger === 'object' && onlyIconTrigger.component) || FaEllipsisIcon;
-    return jsx(Icon, { alt: typeof children === 'string' ? children : innerText(children) });
+    return jsx(Icon, { alt: children });
 });
 const renderButtonList = (children) => Children.map(children, (item) => {
     if (!item || !isValidElement(item)) {
@@ -109,6 +108,9 @@ const ButtonListItem = ({ children }) => {
         observer.observe(listItem, {
             childList: true,
             subtree: true,
+            // button要素の disabled / aria-disabled が動的に変化した場合も検知してリスナーを貼り直す
+            attributes: true,
+            attributeFilter: ['disabled', 'aria-disabled'],
         });
         return () => {
             observer.disconnect();

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  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;;"}
+{"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 { 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={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      // button要素の disabled / aria-disabled が動的に変化した場合も検知してリスナーを貼り直す\n      attributes: true,\n      attributeFilter: ['disabled', 'aria-disabled'],\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":";;;;;;;;;;;;;;;;;;;;;;;AAqEA;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;AAEA;AACF;AAEO;;AAGD;;AAGF;AACE;;AAEA;AACE;;AAGJ;AACF;AAEF;AACE;;AAGE;;;;;;;AASI;AACA;;AAKJ;AAEA;AAEA;AACA;AACE;AACA;;AAEA;AACA;AACD;AAED;;AAEA;;AAGF;AAKF;;"}

package/lib/components/Dropdown/DropdownTrigger.cjs

@@ -63,6 +63,9 @@ const DropdownTrigger = ({ children, className, tooltip }) => {
         observer.observe(triggerElement, {
             childList: true,
             subtree: true,
+            // button要素の disabled / aria-disabled が動的に変化した場合も検知してリスナーを貼り直す
+            attributes: true,
+            attributeFilter: ['disabled', 'aria-disabled'],
         });
         return () => {
             currentCleanup?.();

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, 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;;"}
+{"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      // button要素の disabled / aria-disabled が動的に変化した場合も検知してリスナーを貼り直す\n      attributes: true,\n      attributeFilter: ['disabled', 'aria-disabled'],\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;;AAEA;AACA;AACD;AAED;;;AAGA;AACF;AAEA;;AAQU;AAYZ;;"}

package/lib/components/Dropdown/DropdownTrigger.js

@@ -61,6 +61,9 @@ const DropdownTrigger = ({ children, className, tooltip }) => {
         observer.observe(triggerElement, {
             childList: true,
             subtree: true,
+            // button要素の disabled / aria-disabled が動的に変化した場合も検知してリスナーを貼り直す
+            attributes: true,
+            attributeFilter: ['disabled', 'aria-disabled'],
         });
         return () => {
             currentCleanup?.();

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, 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;;"}
+{"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      // button要素の disabled / aria-disabled が動的に変化した場合も検知してリスナーを貼り直す\n      attributes: true,\n      attributeFilter: ['disabled', 'aria-disabled'],\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;;AAEA;AACA;AACD;AAED;;;AAGA;AACF;AAEA;;AAQU;AAYZ;;"}

package/lib/components/InputFile/InputFileMultiplyAppendable.cjs

@@ -48,10 +48,13 @@ const InputFileMultiplyAppendable = React.forwardRef(({ className, size, label,
     const isUpdatingFilesDirectly = React.useRef(false);
     const inputRef = React.useRef(null);
     React.useImperativeHandle(ref, () => inputRef.current);
-    const updateInputFiles = React.useCallback((newFiles) => {
+    const unstableRef = React.useRef({ onChange, files });
+    unstableRef.current = { onChange, files };
+    const updateFiles = React.useCallback((newFiles) => {
         if (!inputRef.current) {
             return;
         }
+        unstableRef.current.onChange?.(newFiles);
         const buff = new DataTransfer();
         newFiles.forEach((file) => {
             buff.items.add(file);
@@ -59,37 +62,29 @@ const InputFileMultiplyAppendable = React.forwardRef(({ className, size, label,
         isUpdatingFilesDirectly.current = true;
         inputRef.current.files = buff.files;
         isUpdatingFilesDirectly.current = false;
-    }, [inputRef]);
-    const updateFiles = React.useMemo(() => onChange
-        ? (newFiles) => {
-            onChange(newFiles);
-            updateInputFiles(newFiles);
-            setFiles(newFiles);
-        }
-        : (newFiles) => {
-            setFiles(newFiles);
-            updateInputFiles(newFiles);
-        }, [onChange, updateInputFiles]);
+        setFiles(newFiles);
+    }, []);
     const handleChange = React.useCallback((e) => {
         // Safari において、input.files への直接代入時はonChangeを発火させない
         if (isUpdatingFilesDirectly.current) {
             return;
         }
         const newFiles = Array.from(e.target.files ?? []);
-        updateFiles([...files, ...newFiles]);
-    }, [files, isUpdatingFilesDirectly, updateFiles]);
+        updateFiles([...unstableRef.current.files, ...newFiles]);
+    }, [updateFiles]);
     const handleDelete = React.useCallback((e) => {
         if (!inputRef.current) {
             return;
         }
         const index = parseInt(e.currentTarget.value, 10);
-        const newFiles = files.filter((_, i) => index !== i);
+        const newFiles = unstableRef.current.files.filter((_, i) => index !== i);
         // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット
         inputRef.current.value = '';
         updateFiles(newFiles);
-    }, [files, updateFiles]);
-    return (jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { align: "flex-start", className: classNames.wrapper, children: [!disabled && hasFileList && files.length > 0 && (jsxRuntime.jsx(components_Base_BaseColumn_BaseColumn.BaseColumn, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsxRuntime.jsxs("li", { className: classNames.fileItem, children: [jsxRuntime.jsx("span", { className: "smarthr-ui-InputFile-fileName", children: file.name }), jsxRuntime.jsx(components_Button_Button.Button, { variant: "text", prefix: jsxRuntime.jsx(components_Icon_FaIcon.FaTrashCanIcon, {}), value: index, onClick: handleDelete, className: "smarthr-ui-InputFile-deleteButton", children: destroyLabel })] }, index))) })), jsxRuntime.jsxs("span", { className: classNames.inputWrapper, children: [jsxRuntime.jsx("input", { ...rest, multiple: true, "data-smarthr-ui-input": "true", type: "file", onChange: handleChange, disabled: disabled, ref: inputRef, "aria-invalid": error || undefined, "aria-labelledby": labelId, className: classNames.input }), jsxRuntime.jsx(StyledFaFolderOpenIcon, { className: classNames.prefix }), jsxRuntime.jsx(LabelRender, { id: labelId, label: label })] })] }));
+    }, [updateFiles]);
+    return (jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { align: "flex-start", className: classNames.wrapper, children: [!disabled && hasFileList && files.length > 0 && (jsxRuntime.jsx(components_Base_BaseColumn_BaseColumn.BaseColumn, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsxRuntime.jsx(FileListItem, { value: index, onDeleteClick: handleDelete, destroyLabel: destroyLabel, className: classNames.fileItem, children: file.name }, index))) })), jsxRuntime.jsxs("span", { className: classNames.inputWrapper, children: [jsxRuntime.jsx("input", { ...rest, multiple: true, "data-smarthr-ui-input": "true", type: "file", onChange: handleChange, disabled: disabled, ref: inputRef, "aria-invalid": error || undefined, "aria-labelledby": labelId, className: classNames.input }), jsxRuntime.jsx(StyledFaFolderOpenIcon, { className: classNames.prefix }), jsxRuntime.jsx(LabelRender, { id: labelId, label: label })] })] }));
 });
+const FileListItem = React.memo(({ value, onDeleteClick, destroyLabel, className, children }) => (jsxRuntime.jsxs("li", { className: className, children: [jsxRuntime.jsx("span", { className: "smarthr-ui-InputFile-fileName", children: children }), jsxRuntime.jsx(components_Button_Button.Button, { variant: "text", prefix: jsxRuntime.jsx(components_Icon_FaIcon.FaTrashCanIcon, {}), value: value, onClick: onDeleteClick, className: "smarthr-ui-InputFile-deleteButton", children: destroyLabel })] })));
 const StyledFaFolderOpenIcon = React.memo(({ className }) => (jsxRuntime.jsx("span", { className: className, children: jsxRuntime.jsx(components_Icon_FaIcon.FaFolderOpenIcon, {}) })));
 const LabelRender = React.memo(({ id, label }) => (jsxRuntime.jsx("span", { id: id, "aria-hidden": "true", children: label })));
 

package/lib/components/InputFile/InputFileMultiplyAppendable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputFileMultiplyAppendable.cjs","sources":["../../../src/components/InputFile/InputFileMultiplyAppendable.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n  memo,\n  useCallback,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useIntl } from '../../intl'\nimport { BaseColumn } from '../Base'\nimport { Button } from '../Button'\nimport { FaFolderOpenIcon, FaTrashCanIcon } from '../Icon'\nimport { Stack } from '../Layout'\n\nimport { classNameGenerator } from './style'\n\nimport type { Props } from './types'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\nexport const InputFileMultiplyAppendable = forwardRef<HTMLInputElement, Omit<Props, 'multiple'>>(\n  (\n    { className, size, label, hasFileList = true, onChange, disabled = false, error, ...rest },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const labelId = useId()\n    const { localize } = useIntl()\n\n    const destroyLabel = useMemo(\n      () =>\n        localize({\n          id: 'smarthr-ui/InputFile/destroy',\n          defaultText: '削除',\n        }),\n      [localize],\n    )\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size, disabled }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [disabled, size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesDirectly = useRef(false)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    const updateInputFiles = useCallback(\n      (newFiles: File[]) => {\n        if (!inputRef.current) {\n          return\n        }\n        const buff = new DataTransfer()\n        newFiles.forEach((file) => {\n          buff.items.add(file)\n        })\n\n        isUpdatingFilesDirectly.current = true\n        inputRef.current.files = buff.files\n        isUpdatingFilesDirectly.current = false\n      },\n      [inputRef],\n    )\n\n    const updateFiles = useMemo(\n      () =>\n        onChange\n          ? (newFiles: File[]) => {\n              onChange(newFiles)\n              updateInputFiles(newFiles)\n              setFiles(newFiles)\n            }\n          : (newFiles: File[]) => {\n              setFiles(newFiles)\n              updateInputFiles(newFiles)\n            },\n      [onChange, updateInputFiles],\n    )\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        // Safari において、input.files への直接代入時はonChangeを発火させない\n        if (isUpdatingFilesDirectly.current) {\n          return\n        }\n\n        const newFiles = Array.from(e.target.files ?? [])\n\n        updateFiles([...files, ...newFiles])\n      },\n      [files, isUpdatingFilesDirectly, updateFiles],\n    )\n\n    const handleDelete = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        if (!inputRef.current) {\n          return\n        }\n\n        const index = parseInt(e.currentTarget.value, 10)\n        const newFiles = files.filter((_, i) => index !== i)\n\n        // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット\n        inputRef.current.value = ''\n\n        updateFiles(newFiles)\n      },\n      [files, updateFiles],\n    )\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {!disabled && hasFileList && files.length > 0 && (\n          <BaseColumn as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <li key={index} className={classNames.fileItem}>\n                <span className=\"smarthr-ui-InputFile-fileName\">{file.name}</span>\n                <Button\n                  variant=\"text\"\n                  prefix={<FaTrashCanIcon />}\n                  value={index}\n                  onClick={handleDelete}\n                  className=\"smarthr-ui-InputFile-deleteButton\"\n                >\n                  {destroyLabel}\n                </Button>\n              </li>\n            ))}\n          </BaseColumn>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            multiple\n            data-smarthr-ui-input=\"true\"\n            type=\"file\"\n            onChange={handleChange}\n            disabled={disabled}\n            ref={inputRef}\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n      </Stack>\n    )\n  },\n)\n\nconst StyledFaFolderOpenIcon = memo<{ className: string }>(({ className }) => (\n  <span className={className}>\n    <FaFolderOpenIcon />\n  </span>\n))\n\nconst LabelRender = memo<{ id: string; label: ReactNode }>(({ id, label }) => (\n  <span id={id} aria-hidden=\"true\">\n    {label}\n  </span>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;AAEO;;AAMH;AACA;;AAKM;AACA;AACD;AAIL;AACE;;AAGE;;;;;;;;;AAUJ;AAEA;;AAMA;AAEI;;;AAGA;AACA;AACE;AACF;AAEA;;AAEA;AACF;AAIF;AAGM;;;;;AAKA;;;AAGE;AAIR;;AAGI;;;AAIA;;;AAOJ;AAEI;;;AAIA;AACA;;AAGA;;AAGF;AAIF;AAsCF;AAGF;AAMA;;"}
+{"version":3,"file":"InputFileMultiplyAppendable.cjs","sources":["../../../src/components/InputFile/InputFileMultiplyAppendable.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  forwardRef,\n  memo,\n  useCallback,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useIntl } from '../../intl'\nimport { BaseColumn } from '../Base'\nimport { Button } from '../Button'\nimport { FaFolderOpenIcon, FaTrashCanIcon } from '../Icon'\nimport { Stack } from '../Layout'\n\nimport { classNameGenerator } from './style'\n\nimport type { Props } from './types'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\nexport const InputFileMultiplyAppendable = forwardRef<HTMLInputElement, Omit<Props, 'multiple'>>(\n  (\n    { className, size, label, hasFileList = true, onChange, disabled = false, error, ...rest },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const labelId = useId()\n    const { localize } = useIntl()\n\n    const destroyLabel = useMemo(\n      () =>\n        localize({\n          id: 'smarthr-ui/InputFile/destroy',\n          defaultText: '削除',\n        }),\n      [localize],\n    )\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size, disabled }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [disabled, size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesDirectly = useRef(false)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    const unstableRef = useRef({ onChange, files })\n    unstableRef.current = { onChange, files }\n\n    const updateFiles = useCallback((newFiles: File[]) => {\n      if (!inputRef.current) {\n        return\n      }\n\n      unstableRef.current.onChange?.(newFiles)\n\n      const buff = new DataTransfer()\n      newFiles.forEach((file) => {\n        buff.items.add(file)\n      })\n\n      isUpdatingFilesDirectly.current = true\n      inputRef.current.files = buff.files\n      isUpdatingFilesDirectly.current = false\n\n      setFiles(newFiles)\n    }, [])\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        // Safari において、input.files への直接代入時はonChangeを発火させない\n        if (isUpdatingFilesDirectly.current) {\n          return\n        }\n\n        const newFiles = Array.from(e.target.files ?? [])\n\n        updateFiles([...unstableRef.current.files, ...newFiles])\n      },\n      [updateFiles],\n    )\n\n    const handleDelete = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        if (!inputRef.current) {\n          return\n        }\n\n        const index = parseInt(e.currentTarget.value, 10)\n        const newFiles = unstableRef.current.files.filter((_, i) => index !== i)\n\n        // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット\n        inputRef.current.value = ''\n\n        updateFiles(newFiles)\n      },\n      [updateFiles],\n    )\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {!disabled && hasFileList && files.length > 0 && (\n          <BaseColumn as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <FileListItem\n                key={index}\n                value={index}\n                onDeleteClick={handleDelete}\n                destroyLabel={destroyLabel}\n                className={classNames.fileItem}\n              >\n                {file.name}\n              </FileListItem>\n            ))}\n          </BaseColumn>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            multiple\n            data-smarthr-ui-input=\"true\"\n            type=\"file\"\n            onChange={handleChange}\n            disabled={disabled}\n            ref={inputRef}\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n      </Stack>\n    )\n  },\n)\n\ntype FileListItemProps = PropsWithChildren<{\n  value: number\n  onDeleteClick: (e: MouseEvent<HTMLButtonElement>) => void\n  destroyLabel: string\n  className: string\n}>\n\nconst FileListItem = memo<FileListItemProps>(\n  ({ value, onDeleteClick, destroyLabel, className, children }) => (\n    <li className={className}>\n      <span className=\"smarthr-ui-InputFile-fileName\">{children}</span>\n      <Button\n        variant=\"text\"\n        prefix={<FaTrashCanIcon />}\n        value={value}\n        onClick={onDeleteClick}\n        className=\"smarthr-ui-InputFile-deleteButton\"\n      >\n        {destroyLabel}\n      </Button>\n    </li>\n  ),\n)\n\nconst StyledFaFolderOpenIcon = memo<{ className: string }>(({ className }) => (\n  <span className={className}>\n    <FaFolderOpenIcon />\n  </span>\n))\n\nconst LabelRender = memo<{ id: string; label: ReactNode }>(({ id, label }) => (\n  <span id={id} aria-hidden=\"true\">\n    {label}\n  </span>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AAEO;;AAMH;AACA;;AAKM;AACA;AACD;AAIL;AACE;;AAGE;;;;;;;;;AAUJ;AAEA;;;;AASA;AACE;;;;AAMA;AACA;AACE;AACF;AAEA;;AAEA;;;AAKF;;AAGI;;;AAIA;AAEA;AACF;AAIF;AAEI;;;AAIA;;;AAIA;;AAGF;AAIF;AAmCF;AAUF;AAiBA;AAMA;;"}

package/lib/components/InputFile/InputFileMultiplyAppendable.js

@@ -46,10 +46,13 @@ const InputFileMultiplyAppendable = forwardRef(({ className, size, label, hasFil
     const isUpdatingFilesDirectly = useRef(false);
     const inputRef = useRef(null);
     useImperativeHandle(ref, () => inputRef.current);
-    const updateInputFiles = useCallback((newFiles) => {
+    const unstableRef = useRef({ onChange, files });
+    unstableRef.current = { onChange, files };
+    const updateFiles = useCallback((newFiles) => {
         if (!inputRef.current) {
             return;
         }
+        unstableRef.current.onChange?.(newFiles);
         const buff = new DataTransfer();
         newFiles.forEach((file) => {
             buff.items.add(file);
@@ -57,37 +60,29 @@ const InputFileMultiplyAppendable = forwardRef(({ className, size, label, hasFil
         isUpdatingFilesDirectly.current = true;
         inputRef.current.files = buff.files;
         isUpdatingFilesDirectly.current = false;
-    }, [inputRef]);
-    const updateFiles = useMemo(() => onChange
-        ? (newFiles) => {
-            onChange(newFiles);
-            updateInputFiles(newFiles);
-            setFiles(newFiles);
-        }
-        : (newFiles) => {
-            setFiles(newFiles);
-            updateInputFiles(newFiles);
-        }, [onChange, updateInputFiles]);
+        setFiles(newFiles);
+    }, []);
     const handleChange = useCallback((e) => {
         // Safari において、input.files への直接代入時はonChangeを発火させない
         if (isUpdatingFilesDirectly.current) {
             return;
         }
         const newFiles = Array.from(e.target.files ?? []);
-        updateFiles([...files, ...newFiles]);
-    }, [files, isUpdatingFilesDirectly, updateFiles]);
+        updateFiles([...unstableRef.current.files, ...newFiles]);
+    }, [updateFiles]);
     const handleDelete = useCallback((e) => {
         if (!inputRef.current) {
             return;
         }
         const index = parseInt(e.currentTarget.value, 10);
-        const newFiles = files.filter((_, i) => index !== i);
+        const newFiles = unstableRef.current.files.filter((_, i) => index !== i);
         // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット
         inputRef.current.value = '';
         updateFiles(newFiles);
-    }, [files, updateFiles]);
-    return (jsxs(Stack, { align: "flex-start", className: classNames.wrapper, children: [!disabled && hasFileList && files.length > 0 && (jsx(BaseColumn, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsxs("li", { className: classNames.fileItem, children: [jsx("span", { className: "smarthr-ui-InputFile-fileName", children: file.name }), jsx(Button, { variant: "text", prefix: jsx(FaTrashCanIcon, {}), value: index, onClick: handleDelete, className: "smarthr-ui-InputFile-deleteButton", children: destroyLabel })] }, index))) })), jsxs("span", { className: classNames.inputWrapper, children: [jsx("input", { ...rest, multiple: true, "data-smarthr-ui-input": "true", type: "file", onChange: handleChange, disabled: disabled, ref: inputRef, "aria-invalid": error || undefined, "aria-labelledby": labelId, className: classNames.input }), jsx(StyledFaFolderOpenIcon, { className: classNames.prefix }), jsx(LabelRender, { id: labelId, label: label })] })] }));
+    }, [updateFiles]);
+    return (jsxs(Stack, { align: "flex-start", className: classNames.wrapper, children: [!disabled && hasFileList && files.length > 0 && (jsx(BaseColumn, { as: "ul", padding: BASE_COLUMN_PADDING, className: classNames.fileList, children: files.map((file, index) => (jsx(FileListItem, { value: index, onDeleteClick: handleDelete, destroyLabel: destroyLabel, className: classNames.fileItem, children: file.name }, index))) })), jsxs("span", { className: classNames.inputWrapper, children: [jsx("input", { ...rest, multiple: true, "data-smarthr-ui-input": "true", type: "file", onChange: handleChange, disabled: disabled, ref: inputRef, "aria-invalid": error || undefined, "aria-labelledby": labelId, className: classNames.input }), jsx(StyledFaFolderOpenIcon, { className: classNames.prefix }), jsx(LabelRender, { id: labelId, label: label })] })] }));
 });
+const FileListItem = memo(({ value, onDeleteClick, destroyLabel, className, children }) => (jsxs("li", { className: className, children: [jsx("span", { className: "smarthr-ui-InputFile-fileName", children: children }), jsx(Button, { variant: "text", prefix: jsx(FaTrashCanIcon, {}), value: value, onClick: onDeleteClick, className: "smarthr-ui-InputFile-deleteButton", children: destroyLabel })] })));
 const StyledFaFolderOpenIcon = memo(({ className }) => (jsx("span", { className: className, children: jsx(FaFolderOpenIcon, {}) })));
 const LabelRender = memo(({ id, label }) => (jsx("span", { id: id, "aria-hidden": "true", children: label })));
 

package/lib/components/InputFile/InputFileMultiplyAppendable.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputFileMultiplyAppendable.js","sources":["../../../src/components/InputFile/InputFileMultiplyAppendable.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n  memo,\n  useCallback,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useIntl } from '../../intl'\nimport { BaseColumn } from '../Base'\nimport { Button } from '../Button'\nimport { FaFolderOpenIcon, FaTrashCanIcon } from '../Icon'\nimport { Stack } from '../Layout'\n\nimport { classNameGenerator } from './style'\n\nimport type { Props } from './types'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\nexport const InputFileMultiplyAppendable = forwardRef<HTMLInputElement, Omit<Props, 'multiple'>>(\n  (\n    { className, size, label, hasFileList = true, onChange, disabled = false, error, ...rest },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const labelId = useId()\n    const { localize } = useIntl()\n\n    const destroyLabel = useMemo(\n      () =>\n        localize({\n          id: 'smarthr-ui/InputFile/destroy',\n          defaultText: '削除',\n        }),\n      [localize],\n    )\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size, disabled }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [disabled, size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesDirectly = useRef(false)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    const updateInputFiles = useCallback(\n      (newFiles: File[]) => {\n        if (!inputRef.current) {\n          return\n        }\n        const buff = new DataTransfer()\n        newFiles.forEach((file) => {\n          buff.items.add(file)\n        })\n\n        isUpdatingFilesDirectly.current = true\n        inputRef.current.files = buff.files\n        isUpdatingFilesDirectly.current = false\n      },\n      [inputRef],\n    )\n\n    const updateFiles = useMemo(\n      () =>\n        onChange\n          ? (newFiles: File[]) => {\n              onChange(newFiles)\n              updateInputFiles(newFiles)\n              setFiles(newFiles)\n            }\n          : (newFiles: File[]) => {\n              setFiles(newFiles)\n              updateInputFiles(newFiles)\n            },\n      [onChange, updateInputFiles],\n    )\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        // Safari において、input.files への直接代入時はonChangeを発火させない\n        if (isUpdatingFilesDirectly.current) {\n          return\n        }\n\n        const newFiles = Array.from(e.target.files ?? [])\n\n        updateFiles([...files, ...newFiles])\n      },\n      [files, isUpdatingFilesDirectly, updateFiles],\n    )\n\n    const handleDelete = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        if (!inputRef.current) {\n          return\n        }\n\n        const index = parseInt(e.currentTarget.value, 10)\n        const newFiles = files.filter((_, i) => index !== i)\n\n        // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット\n        inputRef.current.value = ''\n\n        updateFiles(newFiles)\n      },\n      [files, updateFiles],\n    )\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {!disabled && hasFileList && files.length > 0 && (\n          <BaseColumn as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <li key={index} className={classNames.fileItem}>\n                <span className=\"smarthr-ui-InputFile-fileName\">{file.name}</span>\n                <Button\n                  variant=\"text\"\n                  prefix={<FaTrashCanIcon />}\n                  value={index}\n                  onClick={handleDelete}\n                  className=\"smarthr-ui-InputFile-deleteButton\"\n                >\n                  {destroyLabel}\n                </Button>\n              </li>\n            ))}\n          </BaseColumn>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            multiple\n            data-smarthr-ui-input=\"true\"\n            type=\"file\"\n            onChange={handleChange}\n            disabled={disabled}\n            ref={inputRef}\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n      </Stack>\n    )\n  },\n)\n\nconst StyledFaFolderOpenIcon = memo<{ className: string }>(({ className }) => (\n  <span className={className}>\n    <FaFolderOpenIcon />\n  </span>\n))\n\nconst LabelRender = memo<{ id: string; label: ReactNode }>(({ id, label }) => (\n  <span id={id} aria-hidden=\"true\">\n    {label}\n  </span>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA;AAEO;;AAMH;AACA;;AAKM;AACA;AACD;AAIL;AACE;;AAGE;;;;;;;;;AAUJ;AAEA;;AAMA;AAEI;;;AAGA;AACA;AACE;AACF;AAEA;;AAEA;AACF;AAIF;AAGM;;;;;AAKA;;;AAGE;AAIR;;AAGI;;;AAIA;;;AAOJ;AAEI;;;AAIA;AACA;;AAGA;;AAGF;AAIF;AAsCF;AAGF;AAMA;;"}
+{"version":3,"file":"InputFileMultiplyAppendable.js","sources":["../../../src/components/InputFile/InputFileMultiplyAppendable.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type ReactNode,\n  forwardRef,\n  memo,\n  useCallback,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useIntl } from '../../intl'\nimport { BaseColumn } from '../Base'\nimport { Button } from '../Button'\nimport { FaFolderOpenIcon, FaTrashCanIcon } from '../Icon'\nimport { Stack } from '../Layout'\n\nimport { classNameGenerator } from './style'\n\nimport type { Props } from './types'\n\nconst BASE_COLUMN_PADDING = { block: 0.5, inline: 1 } as const\n\nexport const InputFileMultiplyAppendable = forwardRef<HTMLInputElement, Omit<Props, 'multiple'>>(\n  (\n    { className, size, label, hasFileList = true, onChange, disabled = false, error, ...rest },\n    ref,\n  ) => {\n    const [files, setFiles] = useState<File[]>([])\n    const labelId = useId()\n    const { localize } = useIntl()\n\n    const destroyLabel = useMemo(\n      () =>\n        localize({\n          id: 'smarthr-ui/InputFile/destroy',\n          defaultText: '削除',\n        }),\n      [localize],\n    )\n\n    const classNames = useMemo(() => {\n      const { wrapper, fileList, fileItem, inputWrapper, input, prefix } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inputWrapper: inputWrapper({ size, disabled }),\n        fileList: fileList(),\n        fileItem: fileItem(),\n        input: input(),\n        prefix: prefix(),\n      }\n    }, [disabled, size, className])\n\n    // Safari において、input.files への直接代入時に onChange が発火することを防ぐためのフラグ\n    const isUpdatingFilesDirectly = useRef(false)\n\n    const inputRef = useRef<HTMLInputElement>(null)\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    const unstableRef = useRef({ onChange, files })\n    unstableRef.current = { onChange, files }\n\n    const updateFiles = useCallback((newFiles: File[]) => {\n      if (!inputRef.current) {\n        return\n      }\n\n      unstableRef.current.onChange?.(newFiles)\n\n      const buff = new DataTransfer()\n      newFiles.forEach((file) => {\n        buff.items.add(file)\n      })\n\n      isUpdatingFilesDirectly.current = true\n      inputRef.current.files = buff.files\n      isUpdatingFilesDirectly.current = false\n\n      setFiles(newFiles)\n    }, [])\n\n    const handleChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        // Safari において、input.files への直接代入時はonChangeを発火させない\n        if (isUpdatingFilesDirectly.current) {\n          return\n        }\n\n        const newFiles = Array.from(e.target.files ?? [])\n\n        updateFiles([...unstableRef.current.files, ...newFiles])\n      },\n      [updateFiles],\n    )\n\n    const handleDelete = useCallback(\n      (e: MouseEvent<HTMLButtonElement>) => {\n        if (!inputRef.current) {\n          return\n        }\n\n        const index = parseInt(e.currentTarget.value, 10)\n        const newFiles = unstableRef.current.files.filter((_, i) => index !== i)\n\n        // 削除後、同一ファイルを再選択可能にするためinput.valueをリセット\n        inputRef.current.value = ''\n\n        updateFiles(newFiles)\n      },\n      [updateFiles],\n    )\n\n    return (\n      <Stack align=\"flex-start\" className={classNames.wrapper}>\n        {!disabled && hasFileList && files.length > 0 && (\n          <BaseColumn as=\"ul\" padding={BASE_COLUMN_PADDING} className={classNames.fileList}>\n            {files.map((file, index) => (\n              <FileListItem\n                key={index}\n                value={index}\n                onDeleteClick={handleDelete}\n                destroyLabel={destroyLabel}\n                className={classNames.fileItem}\n              >\n                {file.name}\n              </FileListItem>\n            ))}\n          </BaseColumn>\n        )}\n        <span className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            multiple\n            data-smarthr-ui-input=\"true\"\n            type=\"file\"\n            onChange={handleChange}\n            disabled={disabled}\n            ref={inputRef}\n            aria-invalid={error || undefined}\n            aria-labelledby={labelId}\n            className={classNames.input}\n          />\n          <StyledFaFolderOpenIcon className={classNames.prefix} />\n          <LabelRender id={labelId} label={label} />\n        </span>\n      </Stack>\n    )\n  },\n)\n\ntype FileListItemProps = PropsWithChildren<{\n  value: number\n  onDeleteClick: (e: MouseEvent<HTMLButtonElement>) => void\n  destroyLabel: string\n  className: string\n}>\n\nconst FileListItem = memo<FileListItemProps>(\n  ({ value, onDeleteClick, destroyLabel, className, children }) => (\n    <li className={className}>\n      <span className=\"smarthr-ui-InputFile-fileName\">{children}</span>\n      <Button\n        variant=\"text\"\n        prefix={<FaTrashCanIcon />}\n        value={value}\n        onClick={onDeleteClick}\n        className=\"smarthr-ui-InputFile-deleteButton\"\n      >\n        {destroyLabel}\n      </Button>\n    </li>\n  ),\n)\n\nconst StyledFaFolderOpenIcon = memo<{ className: string }>(({ className }) => (\n  <span className={className}>\n    <FaFolderOpenIcon />\n  </span>\n))\n\nconst LabelRender = memo<{ id: string; label: ReactNode }>(({ id, label }) => (\n  <span id={id} aria-hidden=\"true\">\n    {label}\n  </span>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2BA;AAEO;;AAMH;AACA;;AAKM;AACA;AACD;AAIL;AACE;;AAGE;;;;;;;;;AAUJ;AAEA;;;;AASA;AACE;;;;AAMA;AACA;AACE;AACF;AAEA;;AAEA;;;AAKF;;AAGI;;;AAIA;AAEA;AACF;AAIF;AAEI;;;AAIA;;;AAIA;;AAGF;AAIF;AAmCF;AAUF;AAiBA;AAMA;;"}

package/lib/components/LineClamp/LineClamp.cjs

@@ -56,12 +56,23 @@ const LineClamp = ({ maxLines = 3, children, className, ...rest }) => {
     React.useEffect(() => {
         const el = ref.current;
         const shadowEl = shadowRef.current;
+        if (!el || !shadowEl)
+            return;
         // -webkit-line-clamp を使った要素ではel.scrollHeightとel.clientHeightの比較だと
         // フォントの高さの計算が期待と異なり適切な高さが取得できないためshadowElと比較している
         // 参考: https://github.com/kufu/smarthr-ui/pull/4710
-        const isMultiLineOverflow = el && shadowEl ? shadowEl.clientHeight > el.clientHeight : false;
-        setTooltipVisible(isMultiLineOverflow);
-    }, [maxLines, children]);
+        const checkOverflow = () => {
+            setTooltipVisible(shadowEl.clientHeight > el.clientHeight);
+        };
+        checkOverflow();
+        const resizeObserver = new ResizeObserver(checkOverflow);
+        resizeObserver.observe(el);
+        resizeObserver.observe(shadowEl);
+        return () => {
+            resizeObserver.unobserve(el);
+            resizeObserver.unobserve(shadowEl);
+        };
+    }, [maxLines]);
     const classNames = React.useMemo(() => {
         const { base, clampedLine, shadowElementWrapper, shadowElement } = classNameGenerator({
             maxLines,

package/lib/components/LineClamp/LineClamp.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LineClamp.cjs","sources":["../../../src/components/LineClamp/LineClamp.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type FC,\n  type PropsWithChildren,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Tooltip } from '../Tooltip'\n\ntype AbstractProps = PropsWithChildren<VariantProps<typeof classNameGenerator>>\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'span'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    base: 'smarthr-ui-LineClamp shr-relative',\n    clampedLine: 'shr-max-w-full',\n    shadowElementWrapper:\n      'shr-invisible shr-absolute shr-left-0 shr-top-0 shr-h-full shr-w-full shr-overflow-hidden shr-whitespace-normal shr-opacity-0',\n    shadowElement: 'shr-absolute shr-left-0 shr-top-0 shr-w-full',\n  },\n  variants: {\n    maxLines: {\n      1: {\n        clampedLine:\n          'shr-inline-block shr-max-w-full shr-overflow-x-clip shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle',\n      },\n      2: {\n        clampedLine: 'shr-line-clamp-[2]',\n      },\n      3: {\n        clampedLine: 'shr-line-clamp-[3]',\n      },\n      4: {\n        clampedLine: 'shr-line-clamp-[4]',\n      },\n      5: {\n        clampedLine: 'shr-line-clamp-[5]',\n      },\n      6: {\n        clampedLine: 'shr-line-clamp-[6]',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      maxLines: [2, 3, 4, 5, 6],\n      className: {\n        // baseがdisplay:-webkit-boxでないと高さ取得用の要素が表示部分と同じ大きさで表示されないバグを回避するため\n        base: '[display:-webkit-box]',\n      },\n    },\n  ],\n})\n\nexport const LineClamp: FC<Props> = ({ maxLines = 3, children, className, ...rest }) => {\n  if (maxLines < 1 || maxLines > 6) {\n    throw new Error('\"maxLines\" は 1 ~ 6 の範囲で指定してください')\n  }\n\n  const [isTooltipVisible, setTooltipVisible] = useState(false)\n  const ref = useRef<HTMLSpanElement>(null)\n  const shadowRef = useRef<HTMLSpanElement>(null)\n\n  useEffect(() => {\n    const el = ref.current\n    const shadowEl = shadowRef.current\n\n    // -webkit-line-clamp を使った要素ではel.scrollHeightとel.clientHeightの比較だと\n    // フォントの高さの計算が期待と異なり適切な高さが取得できないためshadowElと比較している\n    // 参考: https://github.com/kufu/smarthr-ui/pull/4710\n    const isMultiLineOverflow = el && shadowEl ? shadowEl.clientHeight > el.clientHeight : false\n\n    setTooltipVisible(isMultiLineOverflow)\n  }, [maxLines, children])\n\n  const classNames = useMemo(() => {\n    const { base, clampedLine, shadowElementWrapper, shadowElement } = classNameGenerator({\n      maxLines,\n    })\n\n    return {\n      base: base({ className }),\n      clampedLine: clampedLine(),\n      shadowElementWrapper: shadowElementWrapper(),\n      shadowElement: shadowElement(),\n    }\n  }, [maxLines, className])\n\n  const actualLineClamp = (\n    <span {...rest} className={classNames.base}>\n      <span ref={ref} className={classNames.clampedLine}>\n        {children}\n      </span>\n      {/* 切り取られていないテキストの高さを取得するための要素 */}\n      <span aria-hidden className={classNames.shadowElementWrapper}>\n        <span className={classNames.shadowElement} ref={shadowRef}>\n          {children}\n        </span>\n      </span>\n    </span>\n  )\n\n  return isTooltipVisible ? (\n    <Tooltip message={children}>{actualLineClamp}</Tooltip>\n  ) : (\n    actualLineClamp\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBA;AACE;AACE;AACA;AACA;AAEA;AACD;AACD;AACE;AACE;AACE;AAED;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACF;AACF;AACD;AACE;;AAEE;;AAEE;AACD;AACF;AACF;AACF;AAEM;;AAEH;;;AAIF;AACA;;AAGE;AACA;;;;AAKA;;AAGF;AAEA;;;AAGG;;AAGC;;;;;AAKJ;;;AAqBF;;"}
+{"version":3,"file":"LineClamp.cjs","sources":["../../../src/components/LineClamp/LineClamp.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type FC,\n  type PropsWithChildren,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Tooltip } from '../Tooltip'\n\ntype AbstractProps = PropsWithChildren<VariantProps<typeof classNameGenerator>>\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'span'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    base: 'smarthr-ui-LineClamp shr-relative',\n    clampedLine: 'shr-max-w-full',\n    shadowElementWrapper:\n      'shr-invisible shr-absolute shr-left-0 shr-top-0 shr-h-full shr-w-full shr-overflow-hidden shr-whitespace-normal shr-opacity-0',\n    shadowElement: 'shr-absolute shr-left-0 shr-top-0 shr-w-full',\n  },\n  variants: {\n    maxLines: {\n      1: {\n        clampedLine:\n          'shr-inline-block shr-max-w-full shr-overflow-x-clip shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle',\n      },\n      2: {\n        clampedLine: 'shr-line-clamp-[2]',\n      },\n      3: {\n        clampedLine: 'shr-line-clamp-[3]',\n      },\n      4: {\n        clampedLine: 'shr-line-clamp-[4]',\n      },\n      5: {\n        clampedLine: 'shr-line-clamp-[5]',\n      },\n      6: {\n        clampedLine: 'shr-line-clamp-[6]',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      maxLines: [2, 3, 4, 5, 6],\n      className: {\n        // baseがdisplay:-webkit-boxでないと高さ取得用の要素が表示部分と同じ大きさで表示されないバグを回避するため\n        base: '[display:-webkit-box]',\n      },\n    },\n  ],\n})\n\nexport const LineClamp: FC<Props> = ({ maxLines = 3, children, className, ...rest }) => {\n  if (maxLines < 1 || maxLines > 6) {\n    throw new Error('\"maxLines\" は 1 ~ 6 の範囲で指定してください')\n  }\n\n  const [isTooltipVisible, setTooltipVisible] = useState(false)\n  const ref = useRef<HTMLSpanElement>(null)\n  const shadowRef = useRef<HTMLSpanElement>(null)\n\n  useEffect(() => {\n    const el = ref.current\n    const shadowEl = shadowRef.current\n\n    if (!el || !shadowEl) return\n\n    // -webkit-line-clamp を使った要素ではel.scrollHeightとel.clientHeightの比較だと\n    // フォントの高さの計算が期待と異なり適切な高さが取得できないためshadowElと比較している\n    // 参考: https://github.com/kufu/smarthr-ui/pull/4710\n    const checkOverflow = () => {\n      setTooltipVisible(shadowEl.clientHeight > el.clientHeight)\n    }\n\n    checkOverflow()\n\n    const resizeObserver = new ResizeObserver(checkOverflow)\n    resizeObserver.observe(el)\n    resizeObserver.observe(shadowEl)\n\n    return () => {\n      resizeObserver.unobserve(el)\n      resizeObserver.unobserve(shadowEl)\n    }\n  }, [maxLines])\n\n  const classNames = useMemo(() => {\n    const { base, clampedLine, shadowElementWrapper, shadowElement } = classNameGenerator({\n      maxLines,\n    })\n\n    return {\n      base: base({ className }),\n      clampedLine: clampedLine(),\n      shadowElementWrapper: shadowElementWrapper(),\n      shadowElement: shadowElement(),\n    }\n  }, [maxLines, className])\n\n  const actualLineClamp = (\n    <span {...rest} className={classNames.base}>\n      <span ref={ref} className={classNames.clampedLine}>\n        {children}\n      </span>\n      {/* 切り取られていないテキストの高さを取得するための要素 */}\n      <span aria-hidden className={classNames.shadowElementWrapper}>\n        <span className={classNames.shadowElement} ref={shadowRef}>\n          {children}\n        </span>\n      </span>\n    </span>\n  )\n\n  return isTooltipVisible ? (\n    <Tooltip message={children}>{actualLineClamp}</Tooltip>\n  ) : (\n    actualLineClamp\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBA;AACE;AACE;AACA;AACA;AAEA;AACD;AACD;AACE;AACE;AACE;AAED;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACF;AACF;AACD;AACE;;AAEE;;AAEE;AACD;AACF;AACF;AACF;AAEM;;AAEH;;;AAIF;AACA;;AAGE;AACA;AAEA;;;;;;;AAOA;AAEA;AAEA;AACA;AACA;AAEA;AACE;AACA;AACF;AACF;AAEA;;;AAGG;;AAGC;;;;;AAKJ;;;AAqBF;;"}

package/lib/components/LineClamp/LineClamp.js

@@ -54,12 +54,23 @@ const LineClamp = ({ maxLines = 3, children, className, ...rest }) => {
     useEffect(() => {
         const el = ref.current;
         const shadowEl = shadowRef.current;
+        if (!el || !shadowEl)
+            return;
         // -webkit-line-clamp を使った要素ではel.scrollHeightとel.clientHeightの比較だと
         // フォントの高さの計算が期待と異なり適切な高さが取得できないためshadowElと比較している
         // 参考: https://github.com/kufu/smarthr-ui/pull/4710
-        const isMultiLineOverflow = el && shadowEl ? shadowEl.clientHeight > el.clientHeight : false;
-        setTooltipVisible(isMultiLineOverflow);
-    }, [maxLines, children]);
+        const checkOverflow = () => {
+            setTooltipVisible(shadowEl.clientHeight > el.clientHeight);
+        };
+        checkOverflow();
+        const resizeObserver = new ResizeObserver(checkOverflow);
+        resizeObserver.observe(el);
+        resizeObserver.observe(shadowEl);
+        return () => {
+            resizeObserver.unobserve(el);
+            resizeObserver.unobserve(shadowEl);
+        };
+    }, [maxLines]);
     const classNames = useMemo(() => {
         const { base, clampedLine, shadowElementWrapper, shadowElement } = classNameGenerator({
             maxLines,

package/lib/components/LineClamp/LineClamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineClamp.js","sources":["../../../src/components/LineClamp/LineClamp.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type FC,\n  type PropsWithChildren,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Tooltip } from '../Tooltip'\n\ntype AbstractProps = PropsWithChildren<VariantProps<typeof classNameGenerator>>\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'span'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    base: 'smarthr-ui-LineClamp shr-relative',\n    clampedLine: 'shr-max-w-full',\n    shadowElementWrapper:\n      'shr-invisible shr-absolute shr-left-0 shr-top-0 shr-h-full shr-w-full shr-overflow-hidden shr-whitespace-normal shr-opacity-0',\n    shadowElement: 'shr-absolute shr-left-0 shr-top-0 shr-w-full',\n  },\n  variants: {\n    maxLines: {\n      1: {\n        clampedLine:\n          'shr-inline-block shr-max-w-full shr-overflow-x-clip shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle',\n      },\n      2: {\n        clampedLine: 'shr-line-clamp-[2]',\n      },\n      3: {\n        clampedLine: 'shr-line-clamp-[3]',\n      },\n      4: {\n        clampedLine: 'shr-line-clamp-[4]',\n      },\n      5: {\n        clampedLine: 'shr-line-clamp-[5]',\n      },\n      6: {\n        clampedLine: 'shr-line-clamp-[6]',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      maxLines: [2, 3, 4, 5, 6],\n      className: {\n        // baseがdisplay:-webkit-boxでないと高さ取得用の要素が表示部分と同じ大きさで表示されないバグを回避するため\n        base: '[display:-webkit-box]',\n      },\n    },\n  ],\n})\n\nexport const LineClamp: FC<Props> = ({ maxLines = 3, children, className, ...rest }) => {\n  if (maxLines < 1 || maxLines > 6) {\n    throw new Error('\"maxLines\" は 1 ~ 6 の範囲で指定してください')\n  }\n\n  const [isTooltipVisible, setTooltipVisible] = useState(false)\n  const ref = useRef<HTMLSpanElement>(null)\n  const shadowRef = useRef<HTMLSpanElement>(null)\n\n  useEffect(() => {\n    const el = ref.current\n    const shadowEl = shadowRef.current\n\n    // -webkit-line-clamp を使った要素ではel.scrollHeightとel.clientHeightの比較だと\n    // フォントの高さの計算が期待と異なり適切な高さが取得できないためshadowElと比較している\n    // 参考: https://github.com/kufu/smarthr-ui/pull/4710\n    const isMultiLineOverflow = el && shadowEl ? shadowEl.clientHeight > el.clientHeight : false\n\n    setTooltipVisible(isMultiLineOverflow)\n  }, [maxLines, children])\n\n  const classNames = useMemo(() => {\n    const { base, clampedLine, shadowElementWrapper, shadowElement } = classNameGenerator({\n      maxLines,\n    })\n\n    return {\n      base: base({ className }),\n      clampedLine: clampedLine(),\n      shadowElementWrapper: shadowElementWrapper(),\n      shadowElement: shadowElement(),\n    }\n  }, [maxLines, className])\n\n  const actualLineClamp = (\n    <span {...rest} className={classNames.base}>\n      <span ref={ref} className={classNames.clampedLine}>\n        {children}\n      </span>\n      {/* 切り取られていないテキストの高さを取得するための要素 */}\n      <span aria-hidden className={classNames.shadowElementWrapper}>\n        <span className={classNames.shadowElement} ref={shadowRef}>\n          {children}\n        </span>\n      </span>\n    </span>\n  )\n\n  return isTooltipVisible ? (\n    <Tooltip message={children}>{actualLineClamp}</Tooltip>\n  ) : (\n    actualLineClamp\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAkBA;AACE;AACE;AACA;AACA;AAEA;AACD;AACD;AACE;AACE;AACE;AAED;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACF;AACF;AACD;AACE;;AAEE;;AAEE;AACD;AACF;AACF;AACF;AAEM;;AAEH;;;AAIF;AACA;;AAGE;AACA;;;;AAKA;;AAGF;AAEA;;;AAGG;;AAGC;;;;;AAKJ;;;AAqBF;;"}
+{"version":3,"file":"LineClamp.js","sources":["../../../src/components/LineClamp/LineClamp.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type FC,\n  type PropsWithChildren,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Tooltip } from '../Tooltip'\n\ntype AbstractProps = PropsWithChildren<VariantProps<typeof classNameGenerator>>\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'span'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    base: 'smarthr-ui-LineClamp shr-relative',\n    clampedLine: 'shr-max-w-full',\n    shadowElementWrapper:\n      'shr-invisible shr-absolute shr-left-0 shr-top-0 shr-h-full shr-w-full shr-overflow-hidden shr-whitespace-normal shr-opacity-0',\n    shadowElement: 'shr-absolute shr-left-0 shr-top-0 shr-w-full',\n  },\n  variants: {\n    maxLines: {\n      1: {\n        clampedLine:\n          'shr-inline-block shr-max-w-full shr-overflow-x-clip shr-overflow-ellipsis shr-whitespace-nowrap shr-align-middle',\n      },\n      2: {\n        clampedLine: 'shr-line-clamp-[2]',\n      },\n      3: {\n        clampedLine: 'shr-line-clamp-[3]',\n      },\n      4: {\n        clampedLine: 'shr-line-clamp-[4]',\n      },\n      5: {\n        clampedLine: 'shr-line-clamp-[5]',\n      },\n      6: {\n        clampedLine: 'shr-line-clamp-[6]',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      maxLines: [2, 3, 4, 5, 6],\n      className: {\n        // baseがdisplay:-webkit-boxでないと高さ取得用の要素が表示部分と同じ大きさで表示されないバグを回避するため\n        base: '[display:-webkit-box]',\n      },\n    },\n  ],\n})\n\nexport const LineClamp: FC<Props> = ({ maxLines = 3, children, className, ...rest }) => {\n  if (maxLines < 1 || maxLines > 6) {\n    throw new Error('\"maxLines\" は 1 ~ 6 の範囲で指定してください')\n  }\n\n  const [isTooltipVisible, setTooltipVisible] = useState(false)\n  const ref = useRef<HTMLSpanElement>(null)\n  const shadowRef = useRef<HTMLSpanElement>(null)\n\n  useEffect(() => {\n    const el = ref.current\n    const shadowEl = shadowRef.current\n\n    if (!el || !shadowEl) return\n\n    // -webkit-line-clamp を使った要素ではel.scrollHeightとel.clientHeightの比較だと\n    // フォントの高さの計算が期待と異なり適切な高さが取得できないためshadowElと比較している\n    // 参考: https://github.com/kufu/smarthr-ui/pull/4710\n    const checkOverflow = () => {\n      setTooltipVisible(shadowEl.clientHeight > el.clientHeight)\n    }\n\n    checkOverflow()\n\n    const resizeObserver = new ResizeObserver(checkOverflow)\n    resizeObserver.observe(el)\n    resizeObserver.observe(shadowEl)\n\n    return () => {\n      resizeObserver.unobserve(el)\n      resizeObserver.unobserve(shadowEl)\n    }\n  }, [maxLines])\n\n  const classNames = useMemo(() => {\n    const { base, clampedLine, shadowElementWrapper, shadowElement } = classNameGenerator({\n      maxLines,\n    })\n\n    return {\n      base: base({ className }),\n      clampedLine: clampedLine(),\n      shadowElementWrapper: shadowElementWrapper(),\n      shadowElement: shadowElement(),\n    }\n  }, [maxLines, className])\n\n  const actualLineClamp = (\n    <span {...rest} className={classNames.base}>\n      <span ref={ref} className={classNames.clampedLine}>\n        {children}\n      </span>\n      {/* 切り取られていないテキストの高さを取得するための要素 */}\n      <span aria-hidden className={classNames.shadowElementWrapper}>\n        <span className={classNames.shadowElement} ref={shadowRef}>\n          {children}\n        </span>\n      </span>\n    </span>\n  )\n\n  return isTooltipVisible ? (\n    <Tooltip message={children}>{actualLineClamp}</Tooltip>\n  ) : (\n    actualLineClamp\n  )\n}\n"],"names":[],"mappings":";;;;;;;AAkBA;AACE;AACE;AACA;AACA;AAEA;AACD;AACD;AACE;AACE;AACE;AAED;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACD;AACE;AACD;AACF;AACF;AACD;AACE;;AAEE;;AAEE;AACD;AACF;AACF;AACF;AAEM;;AAEH;;;AAIF;AACA;;AAGE;AACA;AAEA;;;;;;;AAOA;AAEA;AAEA;AACA;AACA;AAEA;AACE;AACA;AACF;AACF;AAEA;;;AAGG;;AAGC;;;;;AAKJ;;;AAqBF;;"}

package/lib/components/Select/Select.cjs

@@ -49,16 +49,6 @@ const classNameGenerator = index.tv({
     },
 });
 const ActualSelect = ({ options, onChange, onChangeValue, error, width, hasBlank, blankLabel, size, className, disabled, required, ...rest }, ref) => {
-    const handleChange = React.useCallback((e) => {
-        onChange?.(e);
-        if (onChangeValue) {
-            const flattenOptions = options.reduce((pre, cur) => pre.concat('value' in cur ? cur : cur.options), []);
-            const selectedOption = flattenOptions.find((option) => option.value === e.target.value);
-            if (selectedOption) {
-                onChangeValue(selectedOption.value);
-            }
-        }
-    }, [onChange, onChangeValue, options]);
     const classNames = React.useMemo(() => {
         const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator();
         const sizeProps = {
@@ -75,7 +65,17 @@ const ActualSelect = ({ options, onChange, onChangeValue, error, width, hasBlank
         width: typeof width === 'number' ? `${width}px` : width,
     }), [width]);
     const actualBlankLabel = blankLabel ?? '';
-    return (jsxRuntime.jsxs("span", { className: classNames.wrapper, style: wrapperStyle, children: [jsxRuntime.jsxs("select", { ...rest, "data-smarthr-ui-input": "true", onChange: handleChange, "aria-invalid": error || undefined, disabled: disabled, 
+    return (jsxRuntime.jsxs("span", { className: classNames.wrapper, style: wrapperStyle, children: [jsxRuntime.jsxs("select", { ...rest, "data-smarthr-ui-input": "true", onChange: (e) => {
+                    onChange?.(e);
+                    if (onChangeValue) {
+                        const selectedOption = options
+                            .flatMap((option) => ('value' in option ? [option] : option.options))
+                            .find((option) => option.value === e.target.value);
+                        if (selectedOption) {
+                            onChangeValue(selectedOption.value);
+                        }
+                    }
+                }, "aria-invalid": error || undefined, disabled: disabled, 
                 // HINT: required属性を設定すると、iOS端末で以下の問題が発生します
                 //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない
                 //    - エラーメッセージが表示されない

package/lib/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type OptgroupHTMLAttributes,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  memo,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS, isMobileSafari } from '../../libs/ua'\nimport { genericsForwardRef } from '../../libs/util'\nimport { FaAngleDownIcon } from '../Icon'\n\ntype Option<T extends string> = {\n  value: T\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\ntype Optgroup<T extends string> = {\n  label: string\n  options: Array<Option<T>>\n} & OptgroupHTMLAttributes<HTMLOptGroupElement>\n\ntype AbstractProps<T extends string> = {\n  /** 選択肢のデータの配列 */\n  options: Array<Option<T> | Optgroup<T>>\n  /** フォームの値が変わったときに発火するコールバック関数 */\n  onChangeValue?: (value: T) => void\n  /** フォームの値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** コンポーネントの大きさ */\n  size?: 'M' | 'S'\n  /** 空の選択肢を表示するかどうか */\n  hasBlank?: boolean\n  /** 空の選択肢のラベル */\n  blankLabel?: string\n}\n\ntype Props<T extends string> = AbstractProps<T> &\n  Omit<ComponentPropsWithoutRef<'select'>, keyof AbstractProps<string> | 'children'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Select shr-relative shr-inline-block',\n    select: [\n      'shr-peer shr-border-shorthand shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-bg-white shr-text-base shr-leading-tight shr-text-black',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      /* padding に依る積み上げでは文字が見切れてしまうため */\n      'shr-min-h-[calc(theme(fontSize.base)_+_theme(spacing[0.75])_*_2_+_theme(spacing.px)_*_2)]',\n      'shr-border-default disabled:shr-border-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-inset-y-0 shr-inline-flex shr-items-center shr-text-grey',\n      'peer-focus-visible:shr-text-black peer-disabled:shr-text-disabled',\n    ],\n    blankOptgroup: 'shr-hidden',\n  },\n  variants: {\n    size: {\n      M: {\n        select: 'shr-py-0.5 shr-pe-2 shr-ps-0.5',\n        // ((右 padding - アイコン幅) / 2) + 右 border\n        iconWrap: 'shr-end-[calc(theme(spacing[0.5])_+_theme(spacing.px))]',\n      },\n      S: {\n        select: [\n          'shr-px-0.5 shr-py-0.25 shr-pe-1.5 shr-text-sm',\n          /* padding に依る積み上げでは文字が見切れてしまうため */\n          'shr-min-h-[calc(theme(fontSize.sm)_+_theme(spacing[0.5])_*_2_+_theme(spacing.px)_*_2)]',\n        ],\n        iconWrap: 'shr-end-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nconst ActualSelect = <T extends string>(\n  {\n    options,\n    onChange,\n    onChangeValue,\n    error,\n    width,\n    hasBlank,\n    blankLabel,\n    size,\n    className,\n    disabled,\n    required,\n    ...rest\n  }: Props<T>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) => {\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLSelectElement>) => {\n      onChange?.(e)\n\n      if (onChangeValue) {\n        const flattenOptions = options.reduce(\n          (pre, cur) => pre.concat('value' in cur ? cur : cur.options),\n          [] as Array<Option<T>>,\n        )\n        const selectedOption = flattenOptions.find((option) => option.value === e.target.value)\n\n        if (selectedOption) {\n          onChangeValue(selectedOption.value)\n        }\n      }\n    },\n    [onChange, onChangeValue, options],\n  )\n\n  const classNames = useMemo(() => {\n    const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator()\n    const sizeProps = {\n      size: size || 'M',\n    }\n\n    return {\n      wrapper: wrapper({ className }),\n      select: select(sizeProps),\n      iconWrap: iconWrap(sizeProps),\n      blankOptGroup: blankOptgroup(),\n    }\n  }, [className, size])\n  const wrapperStyle = useMemo(\n    () => ({\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [width],\n  )\n\n  const actualBlankLabel = blankLabel ?? ''\n\n  return (\n    <span className={classNames.wrapper} style={wrapperStyle}>\n      <select\n        {...rest}\n        data-smarthr-ui-input=\"true\"\n        onChange={handleChange}\n        aria-invalid={error || undefined}\n        disabled={disabled}\n        // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n        //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n        //    - エラーメッセージが表示されない\n        //    - 問題のある入力フィールドまでスクロールしない\n        // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n        // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n        required={isIOS ? undefined : required}\n        ref={ref}\n        className={classNames.select}\n      >\n        <BlankOption hasBlank={hasBlank}>{actualBlankLabel}</BlankOption>\n        {options.map((option, index) => (\n          <Option {...option} key={index} />\n        ))}\n        <NotOmittingLabelsInMobileSafari className={classNames.blankOptGroup} />\n      </select>\n      <span className={classNames.iconWrap}>\n        <FaAngleDownIcon />\n      </span>\n    </span>\n  )\n}\n\nconst BlankOption = memo<\n  PropsWithChildren<{\n    hasBlank: boolean | undefined\n  }>\n>(({ hasBlank, children }) => hasBlank && <option value=\"\">{children}</option>)\n\nconst Option = memo<Props<string>['options'][number]>((option) => {\n  if ('value' in option) {\n    return <option {...option}>{option.label}</option>\n  }\n\n  const { options: groupedOptions, label, ...rest } = option\n\n  return (\n    <optgroup {...rest} key={label} label={label}>\n      {groupedOptions.map((groupedOption) => (\n        <option {...groupedOption} key={groupedOption.value}>\n          {groupedOption.label}\n        </option>\n      ))}\n    </optgroup>\n  )\n})\n\n// Support for not omitting labels in Mobile Safari\nconst NotOmittingLabelsInMobileSafari = memo<{ className: string }>(\n  ({ className }) => isMobileSafari && <optgroup className={className} />,\n)\n\nexport const Select = genericsForwardRef(ActualSelect)\n"],"names":[],"mappings":";;;;;;;;;;;;AA+CA;AACE;AACE;AACA;;;;;;;;;;AAUC;AACD;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;;AAEA;AACD;AACD;AACE;;;;AAIC;AACD;AACD;AACF;AACF;AACF;AAED;AAiBE;AAEI;;AAGE;;;AAOE;;;;AAOR;AACE;AACA;;;;AAKE;AACA;AACA;;;AAGJ;AACA;AAEI;AACD;AAIH;;;;;;;;AAgBM;AAeR;AAEA;AAMA;AACE;AACE;;AAGF;AAEA;AASF;AAEA;AACA;;;"}
+{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type OptgroupHTMLAttributes,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS, isMobileSafari } from '../../libs/ua'\nimport { genericsForwardRef } from '../../libs/util'\nimport { FaAngleDownIcon } from '../Icon'\n\ntype Option<T extends string> = {\n  value: T\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\ntype Optgroup<T extends string> = {\n  label: string\n  options: Array<Option<T>>\n} & OptgroupHTMLAttributes<HTMLOptGroupElement>\n\ntype AbstractProps<T extends string> = {\n  /** 選択肢のデータの配列 */\n  options: Array<Option<T> | Optgroup<T>>\n  /** フォームの値が変わったときに発火するコールバック関数 */\n  onChangeValue?: (value: T) => void\n  /** フォームの値にエラーがあるかどうか */\n  error?: boolean\n  /** コンポーネントの幅 */\n  width?: number | string\n  /** コンポーネントの大きさ */\n  size?: 'M' | 'S'\n  /** 空の選択肢を表示するかどうか */\n  hasBlank?: boolean\n  /** 空の選択肢のラベル */\n  blankLabel?: string\n}\n\ntype Props<T extends string> = AbstractProps<T> &\n  Omit<ComponentPropsWithoutRef<'select'>, keyof AbstractProps<string> | 'children'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Select shr-relative shr-inline-block',\n    select: [\n      'shr-peer shr-border-shorthand shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-bg-white shr-text-base shr-leading-tight shr-text-black',\n      'hover:shr-bg-white-darken',\n      'focus-visible:shr-focus-indicator',\n      'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',\n      'contrast-more:shr-border-high-contrast',\n      /* padding に依る積み上げでは文字が見切れてしまうため */\n      'shr-min-h-[calc(theme(fontSize.base)_+_theme(spacing[0.75])_*_2_+_theme(spacing.px)_*_2)]',\n      'shr-border-default disabled:shr-border-disabled',\n      'aria-[invalid]:shr-border-danger',\n    ],\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-inset-y-0 shr-inline-flex shr-items-center shr-text-grey',\n      'peer-focus-visible:shr-text-black peer-disabled:shr-text-disabled',\n    ],\n    blankOptgroup: 'shr-hidden',\n  },\n  variants: {\n    size: {\n      M: {\n        select: 'shr-py-0.5 shr-pe-2 shr-ps-0.5',\n        // ((右 padding - アイコン幅) / 2) + 右 border\n        iconWrap: 'shr-end-[calc(theme(spacing[0.5])_+_theme(spacing.px))]',\n      },\n      S: {\n        select: [\n          'shr-px-0.5 shr-py-0.25 shr-pe-1.5 shr-text-sm',\n          /* padding に依る積み上げでは文字が見切れてしまうため */\n          'shr-min-h-[calc(theme(fontSize.sm)_+_theme(spacing[0.5])_*_2_+_theme(spacing.px)_*_2)]',\n        ],\n        iconWrap: 'shr-end-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nconst ActualSelect = <T extends string>(\n  {\n    options,\n    onChange,\n    onChangeValue,\n    error,\n    width,\n    hasBlank,\n    blankLabel,\n    size,\n    className,\n    disabled,\n    required,\n    ...rest\n  }: Props<T>,\n  ref: ForwardedRef<HTMLSelectElement>,\n) => {\n  const classNames = useMemo(() => {\n    const { wrapper, select, iconWrap, blankOptgroup } = classNameGenerator()\n    const sizeProps = {\n      size: size || 'M',\n    }\n\n    return {\n      wrapper: wrapper({ className }),\n      select: select(sizeProps),\n      iconWrap: iconWrap(sizeProps),\n      blankOptGroup: blankOptgroup(),\n    }\n  }, [className, size])\n  const wrapperStyle = useMemo(\n    () => ({\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [width],\n  )\n\n  const actualBlankLabel = blankLabel ?? ''\n\n  return (\n    <span className={classNames.wrapper} style={wrapperStyle}>\n      <select\n        {...rest}\n        data-smarthr-ui-input=\"true\"\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          onChange?.(e)\n\n          if (onChangeValue) {\n            const selectedOption = options\n              .flatMap((option) => ('value' in option ? [option] : option.options))\n              .find((option) => option.value === e.target.value)\n\n            if (selectedOption) {\n              onChangeValue(selectedOption.value)\n            }\n          }\n        }}\n        aria-invalid={error || undefined}\n        disabled={disabled}\n        // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n        //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n        //    - エラーメッセージが表示されない\n        //    - 問題のある入力フィールドまでスクロールしない\n        // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n        // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n        required={isIOS ? undefined : required}\n        ref={ref}\n        className={classNames.select}\n      >\n        <BlankOption hasBlank={hasBlank}>{actualBlankLabel}</BlankOption>\n        {options.map((option, index) => (\n          <Option {...option} key={index} />\n        ))}\n        <NotOmittingLabelsInMobileSafari className={classNames.blankOptGroup} />\n      </select>\n      <span className={classNames.iconWrap}>\n        <FaAngleDownIcon />\n      </span>\n    </span>\n  )\n}\n\nconst BlankOption = memo<\n  PropsWithChildren<{\n    hasBlank: boolean | undefined\n  }>\n>(({ hasBlank, children }) => hasBlank && <option value=\"\">{children}</option>)\n\nconst Option = memo<Props<string>['options'][number]>((option) => {\n  if ('value' in option) {\n    return <option {...option}>{option.label}</option>\n  }\n\n  const { options: groupedOptions, label, ...rest } = option\n\n  return (\n    <optgroup {...rest} key={label} label={label}>\n      {groupedOptions.map((groupedOption) => (\n        <option {...groupedOption} key={groupedOption.value}>\n          {groupedOption.label}\n        </option>\n      ))}\n    </optgroup>\n  )\n})\n\n// Support for not omitting labels in Mobile Safari\nconst NotOmittingLabelsInMobileSafari = memo<{ className: string }>(\n  ({ className }) => isMobileSafari && <optgroup className={className} />,\n)\n\nexport const Select = genericsForwardRef(ActualSelect)\n"],"names":[],"mappings":";;;;;;;;;;;;AA8CA;AACE;AACE;AACA;;;;;;;;;;AAUC;AACD;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;;AAEA;AACD;AACD;AACE;;;;AAIC;AACD;AACD;AACF;AACF;AACF;AAED;AAiBE;AACE;AACA;;;;AAKE;AACA;AACA;;;AAGJ;AACA;AAEI;AACD;AAIH;;AAQQ;;;;AAKK;;AAGD;;;AAGN;;;;;;;AASA;AAeR;AAEA;AAMA;AACE;AACE;;AAGF;AAEA;AASF;AAEA;AACA;;;"}