smarthr-ui 96.0.1 → 96.1.1

package/lib/components/BottomFixedArea/BottomFixedArea.cjs

@@ -44,9 +44,7 @@ const BottomFixedArea = ({ description, primaryButton, secondaryButton, tertiary
         };
     }, [className]);
     const style = React.useMemo(() => ({ zIndex }), [zIndex]);
-    React.useEffect(() => {
-        components_BottomFixedArea_helper.validateElement(primaryButton, secondaryButton);
-    }, [primaryButton, secondaryButton]);
+    components_BottomFixedArea_helper.validateElement(primaryButton, secondaryButton);
     return (jsxRuntime.jsx(components_Base_Base.Base, { ...rest, className: classNames.wrapper, style: style, children: jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { children: [jsxRuntime.jsx(Description, { children: description }), jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { gap: 0.25, children: [(secondaryButton || primaryButton) && (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { as: "ul", justify: "center", gap: { row: 0.5, column: 1 }, children: [secondaryButton && (jsxRuntime.jsx("li", { className: "smarthr-ui-BottomFixedArea-secondaryButton", children: secondaryButton })), primaryButton && (jsxRuntime.jsx("li", { className: "smarthr-ui-BottomFixedArea-primaryButton", children: primaryButton }))] })), tertiaryLinks && tertiaryLinks.length > 0 && (jsxRuntime.jsx(components_Layout_Cluster_Cluster.Cluster, { as: "ul", justify: "center", gap: { row: 0.5, column: 0 }, children: tertiaryLinks.map(({ text, icon: Icon, ...tertiaryRest }, index) => (jsxRuntime.jsx("li", { className: "smarthr-ui-BottomFixedArea-tertiaryListItem", children: jsxRuntime.jsx(components_Button_Button.Button, { ...tertiaryRest, variant: "text", prefix: Icon && jsxRuntime.jsx(Icon, {}), className: classNames.tertiaryButton, children: text }) }, index))) }))] })] }) }));
 };
 const Description = React.memo(({ children }) => children && jsxRuntime.jsx("p", { className: "smarthr-ui-BottomFixedArea-description", children: children }));

package/lib/components/BottomFixedArea/BottomFixedArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomFixedArea.cjs","sources":["../../../src/components/BottomFixedArea/BottomFixedArea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type FC,\n  type FunctionComponentElement,\n  type MouseEventHandler,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useEffect,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Base } from '../Base'\nimport { type AnchorButton, Button } from '../Button'\nimport { Cluster, Stack } from '../Layout'\n\nimport { validateElement } from './helper'\n\nimport type { ComponentProps as IconProps } from '../Icon'\n\nexport type ButtonType =\n  | FunctionComponentElement<ComponentProps<typeof Button>>\n  | FunctionComponentElement<ComponentProps<typeof AnchorButton>>\n\ntype AbstractProps = {\n  /** この領域の説明 */\n  description?: ReactNode\n  /** 表示する `Button` または `AnchorButton` （`variant=\"primary\"` である必要がある） */\n  primaryButton?: ButtonType\n  /** 表示する `Button` または `AnchorButton` （`variant=\"secondary\"` である必要がある）*/\n  secondaryButton?: ButtonType\n  /** 表示する tertialy link のプロパティの配列 */\n  tertiaryLinks?: Array<\n    ComponentPropsWithRef<'button'> & {\n      text: ReactNode\n      icon?: ComponentType<IconProps>\n      type?: 'button' | 'reset'\n      onClick?: MouseEventHandler<HTMLButtonElement>\n    }\n  >\n  /** コンポーネントに適用する z-index 値 */\n  zIndex?: number\n}\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-BottomFixedArea',\n      'shr-fixed shr-bottom-0 shr-z-fixed-menu shr-box-border shr-w-full shr-rounded-none shr-p-1.5 shr-text-center',\n      // Layer 3 だが、上方向への指定のためベタ書き： https://smarthr.design/products/design-tokens/shadow/\n      '[box-shadow:_0_-4px_8px_2px_rgba(0,_0,_0,_0.24)]',\n      '[&_ul]:shr-list-none',\n    ],\n    tertiaryButton: [\n      'smarthr-ui-BottomFixedArea-tertiaryLink',\n      '-shr-mb-0.5 shr-font-normal shr-text-main',\n    ],\n  },\n})\n\n/**\n * @deprecated BottomFixedArea は非推奨です。FloatArea を使ってください。 https://smarthr.design/products/components/float-area/\n */\nexport const BottomFixedArea: FC<Props> = ({\n  description,\n  primaryButton,\n  secondaryButton,\n  tertiaryLinks,\n  zIndex,\n  className,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, tertiaryButton } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      tertiaryButton: tertiaryButton(),\n    }\n  }, [className])\n  const style = useMemo(() => ({ zIndex }), [zIndex])\n\n  useEffect(() => {\n    validateElement(primaryButton, secondaryButton)\n  }, [primaryButton, secondaryButton])\n\n  return (\n    <Base {...rest} className={classNames.wrapper} style={style}>\n      <Stack>\n        <Description>{description}</Description>\n        <Stack gap={0.25}>\n          {(secondaryButton || primaryButton) && (\n            <Cluster as=\"ul\" justify=\"center\" gap={{ row: 0.5, column: 1 }}>\n              {secondaryButton && (\n                <li className=\"smarthr-ui-BottomFixedArea-secondaryButton\">{secondaryButton}</li>\n              )}\n              {primaryButton && (\n                <li className=\"smarthr-ui-BottomFixedArea-primaryButton\">{primaryButton}</li>\n              )}\n            </Cluster>\n          )}\n          {tertiaryLinks && tertiaryLinks.length > 0 && (\n            <Cluster as=\"ul\" justify=\"center\" gap={{ row: 0.5, column: 0 }}>\n              {tertiaryLinks.map(\n                (\n                  {\n                    text,\n                    icon: Icon,\n\n                    ...tertiaryRest\n                  },\n                  index,\n                ) => (\n                  <li key={index} className=\"smarthr-ui-BottomFixedArea-tertiaryListItem\">\n                    <Button\n                      {...tertiaryRest}\n                      variant=\"text\"\n                      prefix={Icon && <Icon />}\n                      className={classNames.tertiaryButton}\n                    >\n                      {text}\n                    </Button>\n                  </li>\n                ),\n              )}\n            </Cluster>\n          )}\n        </Stack>\n      </Stack>\n    </Base>\n  )\n}\n\nconst Description = memo<PropsWithChildren>(\n  ({ children }) =>\n    children && <p className=\"smarthr-ui-BottomFixedArea-description\">{children}</p>,\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAkDA;AACE;AACE;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAED;;AAEG;;AAUD;;;AAII;;;AAGJ;AACA;;AAGE;AACF;AAEA;AA6CF;AAEA;;"}
+{"version":3,"file":"BottomFixedArea.cjs","sources":["../../../src/components/BottomFixedArea/BottomFixedArea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type FC,\n  type FunctionComponentElement,\n  type MouseEventHandler,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Base } from '../Base'\nimport { type AnchorButton, Button } from '../Button'\nimport { Cluster, Stack } from '../Layout'\n\nimport { validateElement } from './helper'\n\nimport type { ComponentProps as IconProps } from '../Icon'\n\nexport type ButtonType =\n  | FunctionComponentElement<ComponentProps<typeof Button>>\n  | FunctionComponentElement<ComponentProps<typeof AnchorButton>>\n\ntype AbstractProps = {\n  /** この領域の説明 */\n  description?: ReactNode\n  /** 表示する `Button` または `AnchorButton` （`variant=\"primary\"` である必要がある） */\n  primaryButton?: ButtonType\n  /** 表示する `Button` または `AnchorButton` （`variant=\"secondary\"` である必要がある）*/\n  secondaryButton?: ButtonType\n  /** 表示する tertialy link のプロパティの配列 */\n  tertiaryLinks?: Array<\n    ComponentPropsWithRef<'button'> & {\n      text: ReactNode\n      icon?: ComponentType<IconProps>\n      type?: 'button' | 'reset'\n      onClick?: MouseEventHandler<HTMLButtonElement>\n    }\n  >\n  /** コンポーネントに適用する z-index 値 */\n  zIndex?: number\n}\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-BottomFixedArea',\n      'shr-fixed shr-bottom-0 shr-z-fixed-menu shr-box-border shr-w-full shr-rounded-none shr-p-1.5 shr-text-center',\n      // Layer 3 だが、上方向への指定のためベタ書き： https://smarthr.design/products/design-tokens/shadow/\n      '[box-shadow:_0_-4px_8px_2px_rgba(0,_0,_0,_0.24)]',\n      '[&_ul]:shr-list-none',\n    ],\n    tertiaryButton: [\n      'smarthr-ui-BottomFixedArea-tertiaryLink',\n      '-shr-mb-0.5 shr-font-normal shr-text-main',\n    ],\n  },\n})\n\n/**\n * @deprecated BottomFixedArea は非推奨です。FloatArea を使ってください。 https://smarthr.design/products/components/float-area/\n */\nexport const BottomFixedArea: FC<Props> = ({\n  description,\n  primaryButton,\n  secondaryButton,\n  tertiaryLinks,\n  zIndex,\n  className,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, tertiaryButton } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      tertiaryButton: tertiaryButton(),\n    }\n  }, [className])\n  const style = useMemo(() => ({ zIndex }), [zIndex])\n\n  validateElement(primaryButton, secondaryButton)\n\n  return (\n    <Base {...rest} className={classNames.wrapper} style={style}>\n      <Stack>\n        <Description>{description}</Description>\n        <Stack gap={0.25}>\n          {(secondaryButton || primaryButton) && (\n            <Cluster as=\"ul\" justify=\"center\" gap={{ row: 0.5, column: 1 }}>\n              {secondaryButton && (\n                <li className=\"smarthr-ui-BottomFixedArea-secondaryButton\">{secondaryButton}</li>\n              )}\n              {primaryButton && (\n                <li className=\"smarthr-ui-BottomFixedArea-primaryButton\">{primaryButton}</li>\n              )}\n            </Cluster>\n          )}\n          {tertiaryLinks && tertiaryLinks.length > 0 && (\n            <Cluster as=\"ul\" justify=\"center\" gap={{ row: 0.5, column: 0 }}>\n              {tertiaryLinks.map(\n                (\n                  {\n                    text,\n                    icon: Icon,\n\n                    ...tertiaryRest\n                  },\n                  index,\n                ) => (\n                  <li key={index} className=\"smarthr-ui-BottomFixedArea-tertiaryListItem\">\n                    <Button\n                      {...tertiaryRest}\n                      variant=\"text\"\n                      prefix={Icon && <Icon />}\n                      className={classNames.tertiaryButton}\n                    >\n                      {text}\n                    </Button>\n                  </li>\n                ),\n              )}\n            </Cluster>\n          )}\n        </Stack>\n      </Stack>\n    </Base>\n  )\n}\n\nconst Description = memo<PropsWithChildren>(\n  ({ children }) =>\n    children && <p className=\"smarthr-ui-BottomFixedArea-description\">{children}</p>,\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAiDA;AACE;AACE;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAED;;AAEG;;AAUD;;;AAII;;;AAGJ;AACA;AAEA;AAEA;AA6CF;AAEA;;"}

package/lib/components/BottomFixedArea/BottomFixedArea.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo, useMemo, useEffect } from 'react';
+import { memo, useMemo } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { Base } from '../Base/Base.js';
 import '../Base/BaseColumn/BaseColumn.js';
@@ -42,9 +42,7 @@ const BottomFixedArea = ({ description, primaryButton, secondaryButton, tertiary
         };
     }, [className]);
     const style = useMemo(() => ({ zIndex }), [zIndex]);
-    useEffect(() => {
-        validateElement(primaryButton, secondaryButton);
-    }, [primaryButton, secondaryButton]);
+    validateElement(primaryButton, secondaryButton);
     return (jsx(Base, { ...rest, className: classNames.wrapper, style: style, children: jsxs(Stack, { children: [jsx(Description, { children: description }), jsxs(Stack, { gap: 0.25, children: [(secondaryButton || primaryButton) && (jsxs(Cluster, { as: "ul", justify: "center", gap: { row: 0.5, column: 1 }, children: [secondaryButton && (jsx("li", { className: "smarthr-ui-BottomFixedArea-secondaryButton", children: secondaryButton })), primaryButton && (jsx("li", { className: "smarthr-ui-BottomFixedArea-primaryButton", children: primaryButton }))] })), tertiaryLinks && tertiaryLinks.length > 0 && (jsx(Cluster, { as: "ul", justify: "center", gap: { row: 0.5, column: 0 }, children: tertiaryLinks.map(({ text, icon: Icon, ...tertiaryRest }, index) => (jsx("li", { className: "smarthr-ui-BottomFixedArea-tertiaryListItem", children: jsx(Button, { ...tertiaryRest, variant: "text", prefix: Icon && jsx(Icon, {}), className: classNames.tertiaryButton, children: text }) }, index))) }))] })] }) }));
 };
 const Description = memo(({ children }) => children && jsx("p", { className: "smarthr-ui-BottomFixedArea-description", children: children }));

package/lib/components/BottomFixedArea/BottomFixedArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomFixedArea.js","sources":["../../../src/components/BottomFixedArea/BottomFixedArea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type FC,\n  type FunctionComponentElement,\n  type MouseEventHandler,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useEffect,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Base } from '../Base'\nimport { type AnchorButton, Button } from '../Button'\nimport { Cluster, Stack } from '../Layout'\n\nimport { validateElement } from './helper'\n\nimport type { ComponentProps as IconProps } from '../Icon'\n\nexport type ButtonType =\n  | FunctionComponentElement<ComponentProps<typeof Button>>\n  | FunctionComponentElement<ComponentProps<typeof AnchorButton>>\n\ntype AbstractProps = {\n  /** この領域の説明 */\n  description?: ReactNode\n  /** 表示する `Button` または `AnchorButton` （`variant=\"primary\"` である必要がある） */\n  primaryButton?: ButtonType\n  /** 表示する `Button` または `AnchorButton` （`variant=\"secondary\"` である必要がある）*/\n  secondaryButton?: ButtonType\n  /** 表示する tertialy link のプロパティの配列 */\n  tertiaryLinks?: Array<\n    ComponentPropsWithRef<'button'> & {\n      text: ReactNode\n      icon?: ComponentType<IconProps>\n      type?: 'button' | 'reset'\n      onClick?: MouseEventHandler<HTMLButtonElement>\n    }\n  >\n  /** コンポーネントに適用する z-index 値 */\n  zIndex?: number\n}\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-BottomFixedArea',\n      'shr-fixed shr-bottom-0 shr-z-fixed-menu shr-box-border shr-w-full shr-rounded-none shr-p-1.5 shr-text-center',\n      // Layer 3 だが、上方向への指定のためベタ書き： https://smarthr.design/products/design-tokens/shadow/\n      '[box-shadow:_0_-4px_8px_2px_rgba(0,_0,_0,_0.24)]',\n      '[&_ul]:shr-list-none',\n    ],\n    tertiaryButton: [\n      'smarthr-ui-BottomFixedArea-tertiaryLink',\n      '-shr-mb-0.5 shr-font-normal shr-text-main',\n    ],\n  },\n})\n\n/**\n * @deprecated BottomFixedArea は非推奨です。FloatArea を使ってください。 https://smarthr.design/products/components/float-area/\n */\nexport const BottomFixedArea: FC<Props> = ({\n  description,\n  primaryButton,\n  secondaryButton,\n  tertiaryLinks,\n  zIndex,\n  className,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, tertiaryButton } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      tertiaryButton: tertiaryButton(),\n    }\n  }, [className])\n  const style = useMemo(() => ({ zIndex }), [zIndex])\n\n  useEffect(() => {\n    validateElement(primaryButton, secondaryButton)\n  }, [primaryButton, secondaryButton])\n\n  return (\n    <Base {...rest} className={classNames.wrapper} style={style}>\n      <Stack>\n        <Description>{description}</Description>\n        <Stack gap={0.25}>\n          {(secondaryButton || primaryButton) && (\n            <Cluster as=\"ul\" justify=\"center\" gap={{ row: 0.5, column: 1 }}>\n              {secondaryButton && (\n                <li className=\"smarthr-ui-BottomFixedArea-secondaryButton\">{secondaryButton}</li>\n              )}\n              {primaryButton && (\n                <li className=\"smarthr-ui-BottomFixedArea-primaryButton\">{primaryButton}</li>\n              )}\n            </Cluster>\n          )}\n          {tertiaryLinks && tertiaryLinks.length > 0 && (\n            <Cluster as=\"ul\" justify=\"center\" gap={{ row: 0.5, column: 0 }}>\n              {tertiaryLinks.map(\n                (\n                  {\n                    text,\n                    icon: Icon,\n\n                    ...tertiaryRest\n                  },\n                  index,\n                ) => (\n                  <li key={index} className=\"smarthr-ui-BottomFixedArea-tertiaryListItem\">\n                    <Button\n                      {...tertiaryRest}\n                      variant=\"text\"\n                      prefix={Icon && <Icon />}\n                      className={classNames.tertiaryButton}\n                    >\n                      {text}\n                    </Button>\n                  </li>\n                ),\n              )}\n            </Cluster>\n          )}\n        </Stack>\n      </Stack>\n    </Base>\n  )\n}\n\nconst Description = memo<PropsWithChildren>(\n  ({ children }) =>\n    children && <p className=\"smarthr-ui-BottomFixedArea-description\">{children}</p>,\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAkDA;AACE;AACE;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAED;;AAEG;;AAUD;;;AAII;;;AAGJ;AACA;;AAGE;AACF;AAEA;AA6CF;AAEA;;"}
+{"version":3,"file":"BottomFixedArea.js","sources":["../../../src/components/BottomFixedArea/BottomFixedArea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type FC,\n  type FunctionComponentElement,\n  type MouseEventHandler,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Base } from '../Base'\nimport { type AnchorButton, Button } from '../Button'\nimport { Cluster, Stack } from '../Layout'\n\nimport { validateElement } from './helper'\n\nimport type { ComponentProps as IconProps } from '../Icon'\n\nexport type ButtonType =\n  | FunctionComponentElement<ComponentProps<typeof Button>>\n  | FunctionComponentElement<ComponentProps<typeof AnchorButton>>\n\ntype AbstractProps = {\n  /** この領域の説明 */\n  description?: ReactNode\n  /** 表示する `Button` または `AnchorButton` （`variant=\"primary\"` である必要がある） */\n  primaryButton?: ButtonType\n  /** 表示する `Button` または `AnchorButton` （`variant=\"secondary\"` である必要がある）*/\n  secondaryButton?: ButtonType\n  /** 表示する tertialy link のプロパティの配列 */\n  tertiaryLinks?: Array<\n    ComponentPropsWithRef<'button'> & {\n      text: ReactNode\n      icon?: ComponentType<IconProps>\n      type?: 'button' | 'reset'\n      onClick?: MouseEventHandler<HTMLButtonElement>\n    }\n  >\n  /** コンポーネントに適用する z-index 値 */\n  zIndex?: number\n}\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-BottomFixedArea',\n      'shr-fixed shr-bottom-0 shr-z-fixed-menu shr-box-border shr-w-full shr-rounded-none shr-p-1.5 shr-text-center',\n      // Layer 3 だが、上方向への指定のためベタ書き： https://smarthr.design/products/design-tokens/shadow/\n      '[box-shadow:_0_-4px_8px_2px_rgba(0,_0,_0,_0.24)]',\n      '[&_ul]:shr-list-none',\n    ],\n    tertiaryButton: [\n      'smarthr-ui-BottomFixedArea-tertiaryLink',\n      '-shr-mb-0.5 shr-font-normal shr-text-main',\n    ],\n  },\n})\n\n/**\n * @deprecated BottomFixedArea は非推奨です。FloatArea を使ってください。 https://smarthr.design/products/components/float-area/\n */\nexport const BottomFixedArea: FC<Props> = ({\n  description,\n  primaryButton,\n  secondaryButton,\n  tertiaryLinks,\n  zIndex,\n  className,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, tertiaryButton } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      tertiaryButton: tertiaryButton(),\n    }\n  }, [className])\n  const style = useMemo(() => ({ zIndex }), [zIndex])\n\n  validateElement(primaryButton, secondaryButton)\n\n  return (\n    <Base {...rest} className={classNames.wrapper} style={style}>\n      <Stack>\n        <Description>{description}</Description>\n        <Stack gap={0.25}>\n          {(secondaryButton || primaryButton) && (\n            <Cluster as=\"ul\" justify=\"center\" gap={{ row: 0.5, column: 1 }}>\n              {secondaryButton && (\n                <li className=\"smarthr-ui-BottomFixedArea-secondaryButton\">{secondaryButton}</li>\n              )}\n              {primaryButton && (\n                <li className=\"smarthr-ui-BottomFixedArea-primaryButton\">{primaryButton}</li>\n              )}\n            </Cluster>\n          )}\n          {tertiaryLinks && tertiaryLinks.length > 0 && (\n            <Cluster as=\"ul\" justify=\"center\" gap={{ row: 0.5, column: 0 }}>\n              {tertiaryLinks.map(\n                (\n                  {\n                    text,\n                    icon: Icon,\n\n                    ...tertiaryRest\n                  },\n                  index,\n                ) => (\n                  <li key={index} className=\"smarthr-ui-BottomFixedArea-tertiaryListItem\">\n                    <Button\n                      {...tertiaryRest}\n                      variant=\"text\"\n                      prefix={Icon && <Icon />}\n                      className={classNames.tertiaryButton}\n                    >\n                      {text}\n                    </Button>\n                  </li>\n                ),\n              )}\n            </Cluster>\n          )}\n        </Stack>\n      </Stack>\n    </Base>\n  )\n}\n\nconst Description = memo<PropsWithChildren>(\n  ({ children }) =>\n    children && <p className=\"smarthr-ui-BottomFixedArea-description\">{children}</p>,\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAiDA;AACE;AACE;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAED;;AAEG;;AAUD;;;AAII;;;AAGJ;AACA;AAEA;AAEA;AA6CF;AAEA;;"}

package/lib/components/Button/useButtonWrapper.cjs

@@ -5,9 +5,10 @@ var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 var components_Loader_Loader = require('../Loader/Loader.cjs');
 
-// HINT: prefix, suffixが存在せず、かつicon,svg,imgのいずれかが単一でbodyに含まれるButtonのselector
+// HINT: prefix, suffixが存在せず、かつIcon,svg,img,Loaderのいずれかが単一でbodyに含まれるButtonかチェックしたい
+// このSELECTORはbody内の対象を列挙する
 // HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass
-const ICON_BUTTON_SELECTOR = ['.smarthr-ui-Icon', '.smarthr-ui-Icon-extended', 'svg', 'img'].reduce((prev, selector, index) => `${prev}${index !== 0 ? ',' : ''}.smarthr-ui-Button-body:only-child>${selector}:only-child`, '');
+const ICON_SELECTOR = '.smarthr-ui-Icon, .smarthr-ui-Icon-extended, svg, img, .smarthr-ui-Loader';
 const useButtonWrapper = ({ size, wide = false, variant, $loading, className, prefix, suffix, children, isAnchor, ...rest }) => {
     const innerRef = React.useRef(null);
     // HINT: squareは
@@ -46,12 +47,29 @@ const useButtonWrapper = ({ size, wide = false, variant, $loading, className, pr
                 break;
         }
     }
+    // HINT: actualSuffixなどは$loadingの判定で置き換えられる可能性がある
+    // あくまで利用者が設定したprefix, suffixがないかで判定する
+    const onlyBody = !prefix && !suffix;
     React.useEffect(() => {
-        if (innerRef.current) {
-            // HINT: prefix, suffixが存在せず、かつicon,svg,imgのいずれかが単一でbodyに含まれるButtonの場合true
-            setSquare(!!innerRef.current.querySelector(ICON_BUTTON_SELECTOR));
+        if (!onlyBody) {
+            setSquare(false);
+            return;
         }
-    }, [children]);
+        const target = innerRef.current;
+        if (!target)
+            return;
+        const checkSquare = () => {
+            setSquare(target.children.length === 1 && target.children[0].matches(ICON_SELECTOR));
+        };
+        checkSquare();
+        const observer = new MutationObserver(checkSquare);
+        observer.observe(target, {
+            childList: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [onlyBody]);
     return {
         filteredProps: { ...rest, $loading },
         classNames,

package/lib/components/Button/useButtonWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useButtonWrapper.cjs","sources":["../../../src/components/Button/useButtonWrapper.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ElementType,\n  type ForwardedRef,\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Loader } from '../Loader'\n\nimport type { Variant } from './types'\n\n// HINT: prefix, suffixが存在せず、かつicon,svg,imgのいずれかが単一でbodyに含まれるButtonのselector\n// HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass\nconst ICON_BUTTON_SELECTOR = ['.smarthr-ui-Icon', '.smarthr-ui-Icon-extended', 'svg', 'img'].reduce(\n  (prev, selector, index) =>\n    `${prev}${index !== 0 ? ',' : ''}.smarthr-ui-Button-body:only-child>${selector}:only-child`,\n  '',\n)\n\ntype AbstractProps = PropsWithChildren<{\n  size: 'M' | 'S'\n  wide: boolean\n  variant: Variant\n  $loading?: boolean\n  className: string\n  elementAs?: ElementType\n  prefix?: ReactNode\n  suffix?: ReactNode\n}>\n\ntype AbstractButtonProps = AbstractProps & {\n  isAnchor?: never\n  buttonRef?: ForwardedRef<HTMLButtonElement>\n}\ntype ButtonProps = AbstractButtonProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof AbstractButtonProps>\n\ntype AbstractAnchorProps = AbstractProps & {\n  isAnchor: true\n  anchorRef?: ForwardedRef<HTMLAnchorElement>\n}\ntype AnchorProps = AbstractAnchorProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof AbstractAnchorProps>\n\nexport type Props = ButtonProps | AnchorProps\n\n// HINT: useButtonWrapperの引数を調整する場合、以下も調整する\ntype FilteredProps =\n  | 'size'\n  | 'wide'\n  | 'variant'\n  | 'className'\n  | 'prefix'\n  | 'suffix'\n  | 'children'\n  | 'isAnchor'\nexport type FilteredButtonProps = Omit<ButtonProps, FilteredProps>\nexport type FilteredAnchorProps = Omit<AnchorProps, FilteredProps>\n\nexport const useButtonWrapper = ({\n  size,\n  wide = false,\n  variant,\n  $loading,\n  className,\n  prefix,\n  suffix,\n  children,\n  isAnchor,\n  ...rest\n}: Props) => {\n  const innerRef = useRef<HTMLElement>(null)\n  // HINT: squareは\n  //  null: Buttonのレンダリング前\n  //  boolean: レンダリング後\n  const [square, setSquare] = useState<null | boolean>(null)\n\n  const classNames = useMemo(() => {\n    const { button, anchor, loader } = wrapperClassNameGenerator({\n      variant,\n      size,\n      square: !!square,\n      loading: !!$loading,\n      wide,\n    })\n\n    const wrapper = isAnchor ? anchor : button\n\n    return {\n      wrapper: wrapper({ className }),\n      loader: loader(),\n    }\n  }, [$loading, size, square, variant, wide, className, isAnchor])\n\n  const innerClassName = useMemo(() => innerClassNameGenerator({ size }), [size])\n\n  let actualPrefix = prefix\n  let actualSuffix = suffix\n  let actualChildren = children\n\n  if ($loading) {\n    actualPrefix = undefined\n    const loader = <Loader size=\"S\" className={classNames.loader} role=\"presentation\" />\n\n    // HINT: squareは null | boolean のため、switchで判定する\n    // nullの場合にactualSuffixにloaderを突っ込んでしまうとsquareの計算が狂ってしまう\n    switch (square) {\n      case true:\n        actualChildren = loader\n        break\n      case false:\n        actualSuffix = loader\n        break\n    }\n  }\n\n  useEffect(() => {\n    if (innerRef.current) {\n      // HINT: prefix, suffixが存在せず、かつicon,svg,imgのいずれかが単一でbodyに含まれるButtonの場合true\n      setSquare(!!innerRef.current.querySelector(ICON_BUTTON_SELECTOR))\n    }\n  }, [children])\n\n  return {\n    filteredProps: { ...rest, $loading } as FilteredAnchorProps | FilteredButtonProps,\n    classNames,\n    children: (\n      <>\n        {actualPrefix}\n        <span ref={innerRef} className={innerClassName}>\n          {actualChildren}\n        </span>\n        {actualSuffix}\n      </>\n    ),\n  }\n}\n\nconst wrapperClassNameGenerator = tv({\n  slots: {\n    button: [\n      'aria-disabled:shr-cursor-not-allowed',\n      /* alpha color を使用しているので、背景色と干渉させない */\n      'aria-disabled:shr-bg-clip-padding',\n      /* disabled ではなく aria-disabled で文字色が変わらないため、強制カラーモード時の色を指定 */\n      'aria-disabled:forced-colors:shr-border-[GrayText] aria-disabled:forced-colors:shr-text-[GrayText]',\n      '[&_.smarthr-ui-Icon]:forced-colors:aria-disabled:shr-fill-[GrayText]',\n    ],\n    anchor: [\n      'shr-no-underline',\n      '[&:not([href])]:shr-cursor-not-allowed',\n      /* alpha color を使用しているので、背景色と干渉させない */\n      '[&:not([href])]:shr-bg-clip-padding',\n      '[&_.smarthr-ui-Icon]:forced-colors:shr-fill-[LinkText]',\n      '[&:not([href])_.smarthr-ui-Icon]:forced-colors:shr-fill-[CanvasText]',\n    ],\n    loader: [\n      'shr-align-bottom',\n      '[&_.smarthr-ui-Loader-spinner]:shr-h-em [&_.smarthr-ui-Loader-spinner]:shr-w-em',\n    ],\n  },\n  variants: {\n    variant: {\n      primary: {},\n      secondary: {},\n      danger: {},\n      skeleton: {},\n      text: {},\n      tertiary: {},\n    },\n    size: {\n      M: {},\n      S: {},\n    },\n    square: {\n      true: {},\n    },\n    loading: {\n      true: {},\n    },\n    wide: {\n      true: {},\n    },\n  },\n  compoundSlots: [\n    {\n      slots: ['button', 'anchor'],\n      className: [\n        'shr-box-border',\n        'shr-cursor-pointer',\n        'shr-inline-flex',\n        'shr-justify-center',\n        'shr-items-center',\n        'shr-gap-0.5',\n        'shr-text-center',\n        'shr-whitespace-nowrap',\n        'shr-rounded-m',\n        /* ボタンの高さを合わせるために指定 */\n        'shr-border-shorthand',\n        'shr-font-inherit',\n        'shr-font-bold',\n        'shr-leading-none',\n        'focus-visible:shr-focus-indicator',\n        'contrast-more:shr-border-high-contrast',\n        /* baseline より下の leading などの余白を埋める */\n        '[&_.smarthr-ui-Icon]:shr-block',\n        /** selector list は使えない\n         * via https://github.com/tailwindlabs/tailwindcss/issues/10576#issuecomment-1440703413\n         */\n        '[&_svg]:shr-block',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'S',\n      className: [\n        'shr-p-0.5',\n        'shr-text-sm',\n        /* ボタンラベルの line-height を 0 にしたため、高さを担保する */\n        'shr-min-h-[calc(theme(fontSize.sm)+theme(spacing.1)+theme(borderWidth.2))]',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'M',\n      className: ['shr-text-base'],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'M',\n      square: false,\n      className: 'shr-px-1 shr-py-0.75',\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'M',\n      square: true,\n      className: 'shr-p-0.75',\n    },\n    {\n      slots: ['button', 'anchor'],\n      loading: true,\n      className: 'shr-flex-row-reverse',\n    },\n    {\n      slots: ['button', 'anchor'],\n      wide: true,\n      className: 'shr-w-full',\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'primary',\n      className: [\n        'shr-border-main',\n        'shr-bg-main',\n        'shr-text-white',\n        'focus-visible:shr-border-main-darken',\n        'focus-visible:shr-bg-main-darken',\n        'hover:shr-border-main-darken',\n        'hover:shr-bg-main-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'primary',\n      className: [\n        'aria-disabled:shr-border-main/50',\n        'aria-disabled:shr-bg-main/50',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'primary',\n      className: [\n        '[&:not([href])]:shr-border-main/50',\n        '[&:not([href])]:shr-bg-main/50',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'secondary',\n      className: [\n        'shr-border-default',\n        'shr-bg-white',\n        'shr-text-black',\n        'focus-visible:shr-border-darken',\n        'focus-visible:shr-bg-white-darken',\n        'focus-visible:contrast-more:shr-border-high-contrast',\n        'hover:shr-border-darken',\n        'hover:shr-bg-white-darken',\n        'hover:contrast-more:shr-border-high-contrast',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'secondary',\n      className: [\n        'aria-disabled:shr-border-disabled',\n        'aria-disabled:shr-bg-white-darken',\n        'aria-disabled:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'secondary',\n      className: [\n        '[&:not([href])]:shr-border-disabled',\n        '[&:not([href])]:shr-bg-white-darken',\n        '[&:not([href])]:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'tertiary',\n      className: [\n        'shr-border-transparent',\n        'shr-bg-transparent',\n        'shr-text-link',\n        'shr-font-normal',\n        'focus-visible:shr-bg-white-darken',\n        'hover:shr-bg-white-darken',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-link/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'danger',\n      className: [\n        'shr-border-danger',\n        'shr-bg-danger',\n        'shr-text-white',\n        'focus-visible:shr-border-danger-darken',\n        'focus-visible:shr-bg-danger-darken',\n        'hover:shr-border-danger-darken',\n        'hover:shr-bg-danger-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'danger',\n      className: [\n        'aria-disabled:shr-border-danger/50',\n        'aria-disabled:shr-bg-danger/50',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'danger',\n      className: [\n        '[&:not([href])]:shr-border-danger/50',\n        '[&:not([href])]:shr-bg-danger/50',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'skeleton',\n      className: [\n        'shr-border-white',\n        'shr-bg-transparent',\n        'shr-text-white',\n        'focus-visible:shr-border-white-darken',\n        'focus-visible:shr-bg-overlay',\n        'focus-visible:shr-text-white-darken',\n        'hover:shr-border-white-darken',\n        'hover:shr-bg-overlay',\n        'hover:shr-text-white-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'skeleton',\n      className: [\n        'aria-disabled:shr-border-white/50',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'skeleton',\n      className: [\n        '[&:not([href])]:shr-border-white/50',\n        '[&:not([href])]:shr-bg-transparent',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'text',\n      className: [\n        'shr-border-transparent',\n        'shr-bg-transparent',\n        'shr-text-black',\n        'focus-visible:shr-bg-white-darken',\n        'hover:shr-bg-white-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'text',\n      className: [\n        'aria-disabled:shr-border-transparent',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'text',\n      className: [\n        '[&:not([href])]:shr-border-transparent',\n        '[&:not([href])]:shr-bg-transparent',\n        '[&:not([href])]:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['loader'],\n      variant: ['primary', 'danger', 'skeleton'],\n      className: [\n        '[&_.smarthr-ui-Loader-line]:shr-border-white/50',\n        '[&_.smarthr-ui-Loader-line]:forced-colors:shr-border-[ButtonBorder]',\n      ],\n    },\n    {\n      slots: ['loader'],\n      variant: ['secondary', 'text'],\n      className: '[&_.smarthr-ui-Loader-line]:shr-border-disabled',\n    },\n    {\n      slots: ['loader'],\n      variant: 'tertiary',\n      className: '[&_.smarthr-ui-Loader-line]:shr-border-link/50',\n    },\n  ],\n})\n\nconst innerClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Button-body',\n    /* LineClamp を併用する場合に、幅を計算してもらうために指定 */\n    'shr-min-w-0',\n  ],\n  variants: {\n    size: {\n      M: '',\n      S: [\n        /* SVG とテキストコンテンツの縦位置を揃えるために指定 */\n        'shr-leading-[0]',\n      ],\n    },\n  },\n})\n"],"names":["useRef","useState","useMemo","_jsx","Loader","useEffect","_jsxs","_Fragment","tv"],"mappings":"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"}
+{"version":3,"file":"useButtonWrapper.cjs","sources":["../../../src/components/Button/useButtonWrapper.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ElementType,\n  type ForwardedRef,\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Loader } from '../Loader'\n\nimport type { Variant } from './types'\n\n// HINT: prefix, suffixが存在せず、かつIcon,svg,img,Loaderのいずれかが単一でbodyに含まれるButtonかチェックしたい\n// このSELECTORはbody内の対象を列挙する\n// HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass\nconst ICON_SELECTOR = '.smarthr-ui-Icon, .smarthr-ui-Icon-extended, svg, img, .smarthr-ui-Loader'\n\ntype AbstractProps = PropsWithChildren<{\n  size: 'M' | 'S'\n  wide: boolean\n  variant: Variant\n  $loading?: boolean\n  className: string\n  elementAs?: ElementType\n  prefix?: ReactNode\n  suffix?: ReactNode\n}>\n\ntype AbstractButtonProps = AbstractProps & {\n  isAnchor?: never\n  buttonRef?: ForwardedRef<HTMLButtonElement>\n}\ntype ButtonProps = AbstractButtonProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof AbstractButtonProps>\n\ntype AbstractAnchorProps = AbstractProps & {\n  isAnchor: true\n  anchorRef?: ForwardedRef<HTMLAnchorElement>\n}\ntype AnchorProps = AbstractAnchorProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof AbstractAnchorProps>\n\nexport type Props = ButtonProps | AnchorProps\n\n// HINT: useButtonWrapperの引数を調整する場合、以下も調整する\ntype FilteredProps =\n  | 'size'\n  | 'wide'\n  | 'variant'\n  | 'className'\n  | 'prefix'\n  | 'suffix'\n  | 'children'\n  | 'isAnchor'\nexport type FilteredButtonProps = Omit<ButtonProps, FilteredProps>\nexport type FilteredAnchorProps = Omit<AnchorProps, FilteredProps>\n\nexport const useButtonWrapper = ({\n  size,\n  wide = false,\n  variant,\n  $loading,\n  className,\n  prefix,\n  suffix,\n  children,\n  isAnchor,\n  ...rest\n}: Props) => {\n  const innerRef = useRef<HTMLElement>(null)\n  // HINT: squareは\n  //  null: Buttonのレンダリング前\n  //  boolean: レンダリング後\n  const [square, setSquare] = useState<null | boolean>(null)\n\n  const classNames = useMemo(() => {\n    const { button, anchor, loader } = wrapperClassNameGenerator({\n      variant,\n      size,\n      square: !!square,\n      loading: !!$loading,\n      wide,\n    })\n\n    const wrapper = isAnchor ? anchor : button\n\n    return {\n      wrapper: wrapper({ className }),\n      loader: loader(),\n    }\n  }, [$loading, size, square, variant, wide, className, isAnchor])\n\n  const innerClassName = useMemo(() => innerClassNameGenerator({ size }), [size])\n\n  let actualPrefix = prefix\n  let actualSuffix = suffix\n  let actualChildren = children\n\n  if ($loading) {\n    actualPrefix = undefined\n    const loader = <Loader size=\"S\" className={classNames.loader} role=\"presentation\" />\n\n    // HINT: squareは null | boolean のため、switchで判定する\n    // nullの場合にactualSuffixにloaderを突っ込んでしまうとsquareの計算が狂ってしまう\n    switch (square) {\n      case true:\n        actualChildren = loader\n        break\n      case false:\n        actualSuffix = loader\n        break\n    }\n  }\n\n  // HINT: actualSuffixなどは$loadingの判定で置き換えられる可能性がある\n  // あくまで利用者が設定したprefix, suffixがないかで判定する\n  const onlyBody = !prefix && !suffix\n\n  useEffect(() => {\n    if (!onlyBody) {\n      setSquare(false)\n\n      return\n    }\n\n    const target = innerRef.current\n\n    if (!target) return\n\n    const checkSquare = () => {\n      setSquare(target.children.length === 1 && target.children[0].matches(ICON_SELECTOR))\n    }\n\n    checkSquare()\n\n    const observer = new MutationObserver(checkSquare)\n\n    observer.observe(target, {\n      childList: true,\n    })\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [onlyBody])\n\n  return {\n    filteredProps: { ...rest, $loading } as FilteredAnchorProps | FilteredButtonProps,\n    classNames,\n    children: (\n      <>\n        {actualPrefix}\n        <span ref={innerRef} className={innerClassName}>\n          {actualChildren}\n        </span>\n        {actualSuffix}\n      </>\n    ),\n  }\n}\n\nconst wrapperClassNameGenerator = tv({\n  slots: {\n    button: [\n      'aria-disabled:shr-cursor-not-allowed',\n      /* alpha color を使用しているので、背景色と干渉させない */\n      'aria-disabled:shr-bg-clip-padding',\n      /* disabled ではなく aria-disabled で文字色が変わらないため、強制カラーモード時の色を指定 */\n      'aria-disabled:forced-colors:shr-border-[GrayText] aria-disabled:forced-colors:shr-text-[GrayText]',\n      '[&_.smarthr-ui-Icon]:forced-colors:aria-disabled:shr-fill-[GrayText]',\n    ],\n    anchor: [\n      'shr-no-underline',\n      '[&:not([href])]:shr-cursor-not-allowed',\n      /* alpha color を使用しているので、背景色と干渉させない */\n      '[&:not([href])]:shr-bg-clip-padding',\n      '[&_.smarthr-ui-Icon]:forced-colors:shr-fill-[LinkText]',\n      '[&:not([href])_.smarthr-ui-Icon]:forced-colors:shr-fill-[CanvasText]',\n    ],\n    loader: [\n      'shr-align-bottom',\n      '[&_.smarthr-ui-Loader-spinner]:shr-h-em [&_.smarthr-ui-Loader-spinner]:shr-w-em',\n    ],\n  },\n  variants: {\n    variant: {\n      primary: {},\n      secondary: {},\n      danger: {},\n      skeleton: {},\n      text: {},\n      tertiary: {},\n    },\n    size: {\n      M: {},\n      S: {},\n    },\n    square: {\n      true: {},\n    },\n    loading: {\n      true: {},\n    },\n    wide: {\n      true: {},\n    },\n  },\n  compoundSlots: [\n    {\n      slots: ['button', 'anchor'],\n      className: [\n        'shr-box-border',\n        'shr-cursor-pointer',\n        'shr-inline-flex',\n        'shr-justify-center',\n        'shr-items-center',\n        'shr-gap-0.5',\n        'shr-text-center',\n        'shr-whitespace-nowrap',\n        'shr-rounded-m',\n        /* ボタンの高さを合わせるために指定 */\n        'shr-border-shorthand',\n        'shr-font-inherit',\n        'shr-font-bold',\n        'shr-leading-none',\n        'focus-visible:shr-focus-indicator',\n        'contrast-more:shr-border-high-contrast',\n        /* baseline より下の leading などの余白を埋める */\n        '[&_.smarthr-ui-Icon]:shr-block',\n        /** selector list は使えない\n         * via https://github.com/tailwindlabs/tailwindcss/issues/10576#issuecomment-1440703413\n         */\n        '[&_svg]:shr-block',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'S',\n      className: [\n        'shr-p-0.5',\n        'shr-text-sm',\n        /* ボタンラベルの line-height を 0 にしたため、高さを担保する */\n        'shr-min-h-[calc(theme(fontSize.sm)+theme(spacing.1)+theme(borderWidth.2))]',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'M',\n      className: ['shr-text-base'],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'M',\n      square: false,\n      className: 'shr-px-1 shr-py-0.75',\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'M',\n      square: true,\n      className: 'shr-p-0.75',\n    },\n    {\n      slots: ['button', 'anchor'],\n      loading: true,\n      className: 'shr-flex-row-reverse',\n    },\n    {\n      slots: ['button', 'anchor'],\n      wide: true,\n      className: 'shr-w-full',\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'primary',\n      className: [\n        'shr-border-main',\n        'shr-bg-main',\n        'shr-text-white',\n        'focus-visible:shr-border-main-darken',\n        'focus-visible:shr-bg-main-darken',\n        'hover:shr-border-main-darken',\n        'hover:shr-bg-main-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'primary',\n      className: [\n        'aria-disabled:shr-border-main/50',\n        'aria-disabled:shr-bg-main/50',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'primary',\n      className: [\n        '[&:not([href])]:shr-border-main/50',\n        '[&:not([href])]:shr-bg-main/50',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'secondary',\n      className: [\n        'shr-border-default',\n        'shr-bg-white',\n        'shr-text-black',\n        'focus-visible:shr-border-darken',\n        'focus-visible:shr-bg-white-darken',\n        'focus-visible:contrast-more:shr-border-high-contrast',\n        'hover:shr-border-darken',\n        'hover:shr-bg-white-darken',\n        'hover:contrast-more:shr-border-high-contrast',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'secondary',\n      className: [\n        'aria-disabled:shr-border-disabled',\n        'aria-disabled:shr-bg-white-darken',\n        'aria-disabled:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'secondary',\n      className: [\n        '[&:not([href])]:shr-border-disabled',\n        '[&:not([href])]:shr-bg-white-darken',\n        '[&:not([href])]:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'tertiary',\n      className: [\n        'shr-border-transparent',\n        'shr-bg-transparent',\n        'shr-text-link',\n        'shr-font-normal',\n        'focus-visible:shr-bg-white-darken',\n        'hover:shr-bg-white-darken',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-link/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'danger',\n      className: [\n        'shr-border-danger',\n        'shr-bg-danger',\n        'shr-text-white',\n        'focus-visible:shr-border-danger-darken',\n        'focus-visible:shr-bg-danger-darken',\n        'hover:shr-border-danger-darken',\n        'hover:shr-bg-danger-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'danger',\n      className: [\n        'aria-disabled:shr-border-danger/50',\n        'aria-disabled:shr-bg-danger/50',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'danger',\n      className: [\n        '[&:not([href])]:shr-border-danger/50',\n        '[&:not([href])]:shr-bg-danger/50',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'skeleton',\n      className: [\n        'shr-border-white',\n        'shr-bg-transparent',\n        'shr-text-white',\n        'focus-visible:shr-border-white-darken',\n        'focus-visible:shr-bg-overlay',\n        'focus-visible:shr-text-white-darken',\n        'hover:shr-border-white-darken',\n        'hover:shr-bg-overlay',\n        'hover:shr-text-white-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'skeleton',\n      className: [\n        'aria-disabled:shr-border-white/50',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'skeleton',\n      className: [\n        '[&:not([href])]:shr-border-white/50',\n        '[&:not([href])]:shr-bg-transparent',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'text',\n      className: [\n        'shr-border-transparent',\n        'shr-bg-transparent',\n        'shr-text-black',\n        'focus-visible:shr-bg-white-darken',\n        'hover:shr-bg-white-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'text',\n      className: [\n        'aria-disabled:shr-border-transparent',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'text',\n      className: [\n        '[&:not([href])]:shr-border-transparent',\n        '[&:not([href])]:shr-bg-transparent',\n        '[&:not([href])]:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['loader'],\n      variant: ['primary', 'danger', 'skeleton'],\n      className: [\n        '[&_.smarthr-ui-Loader-line]:shr-border-white/50',\n        '[&_.smarthr-ui-Loader-line]:forced-colors:shr-border-[ButtonBorder]',\n      ],\n    },\n    {\n      slots: ['loader'],\n      variant: ['secondary', 'text'],\n      className: '[&_.smarthr-ui-Loader-line]:shr-border-disabled',\n    },\n    {\n      slots: ['loader'],\n      variant: 'tertiary',\n      className: '[&_.smarthr-ui-Loader-line]:shr-border-link/50',\n    },\n  ],\n})\n\nconst innerClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Button-body',\n    /* LineClamp を併用する場合に、幅を計算してもらうために指定 */\n    'shr-min-w-0',\n  ],\n  variants: {\n    size: {\n      M: '',\n      S: [\n        /* SVG とテキストコンテンツの縦位置を揃えるために指定 */\n        'shr-leading-[0]',\n      ],\n    },\n  },\n})\n"],"names":["useRef","useState","useMemo","_jsx","Loader","useEffect","_jsxs","_Fragment","tv"],"mappings":"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"}

package/lib/components/Button/useButtonWrapper.js

@@ -3,9 +3,10 @@ import { useRef, useState, useMemo, useEffect } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { Loader } from '../Loader/Loader.js';
 
-// HINT: prefix, suffixが存在せず、かつicon,svg,imgのいずれかが単一でbodyに含まれるButtonのselector
+// HINT: prefix, suffixが存在せず、かつIcon,svg,img,Loaderのいずれかが単一でbodyに含まれるButtonかチェックしたい
+// このSELECTORはbody内の対象を列挙する
 // HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass
-const ICON_BUTTON_SELECTOR = ['.smarthr-ui-Icon', '.smarthr-ui-Icon-extended', 'svg', 'img'].reduce((prev, selector, index) => `${prev}${index !== 0 ? ',' : ''}.smarthr-ui-Button-body:only-child>${selector}:only-child`, '');
+const ICON_SELECTOR = '.smarthr-ui-Icon, .smarthr-ui-Icon-extended, svg, img, .smarthr-ui-Loader';
 const useButtonWrapper = ({ size, wide = false, variant, $loading, className, prefix, suffix, children, isAnchor, ...rest }) => {
     const innerRef = useRef(null);
     // HINT: squareは
@@ -44,12 +45,29 @@ const useButtonWrapper = ({ size, wide = false, variant, $loading, className, pr
                 break;
         }
     }
+    // HINT: actualSuffixなどは$loadingの判定で置き換えられる可能性がある
+    // あくまで利用者が設定したprefix, suffixがないかで判定する
+    const onlyBody = !prefix && !suffix;
     useEffect(() => {
-        if (innerRef.current) {
-            // HINT: prefix, suffixが存在せず、かつicon,svg,imgのいずれかが単一でbodyに含まれるButtonの場合true
-            setSquare(!!innerRef.current.querySelector(ICON_BUTTON_SELECTOR));
+        if (!onlyBody) {
+            setSquare(false);
+            return;
         }
-    }, [children]);
+        const target = innerRef.current;
+        if (!target)
+            return;
+        const checkSquare = () => {
+            setSquare(target.children.length === 1 && target.children[0].matches(ICON_SELECTOR));
+        };
+        checkSquare();
+        const observer = new MutationObserver(checkSquare);
+        observer.observe(target, {
+            childList: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [onlyBody]);
     return {
         filteredProps: { ...rest, $loading },
         classNames,

package/lib/components/Button/useButtonWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"useButtonWrapper.js","sources":["../../../src/components/Button/useButtonWrapper.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ElementType,\n  type ForwardedRef,\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Loader } from '../Loader'\n\nimport type { Variant } from './types'\n\n// HINT: prefix, suffixが存在せず、かつicon,svg,imgのいずれかが単一でbodyに含まれるButtonのselector\n// HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass\nconst ICON_BUTTON_SELECTOR = ['.smarthr-ui-Icon', '.smarthr-ui-Icon-extended', 'svg', 'img'].reduce(\n  (prev, selector, index) =>\n    `${prev}${index !== 0 ? ',' : ''}.smarthr-ui-Button-body:only-child>${selector}:only-child`,\n  '',\n)\n\ntype AbstractProps = PropsWithChildren<{\n  size: 'M' | 'S'\n  wide: boolean\n  variant: Variant\n  $loading?: boolean\n  className: string\n  elementAs?: ElementType\n  prefix?: ReactNode\n  suffix?: ReactNode\n}>\n\ntype AbstractButtonProps = AbstractProps & {\n  isAnchor?: never\n  buttonRef?: ForwardedRef<HTMLButtonElement>\n}\ntype ButtonProps = AbstractButtonProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof AbstractButtonProps>\n\ntype AbstractAnchorProps = AbstractProps & {\n  isAnchor: true\n  anchorRef?: ForwardedRef<HTMLAnchorElement>\n}\ntype AnchorProps = AbstractAnchorProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof AbstractAnchorProps>\n\nexport type Props = ButtonProps | AnchorProps\n\n// HINT: useButtonWrapperの引数を調整する場合、以下も調整する\ntype FilteredProps =\n  | 'size'\n  | 'wide'\n  | 'variant'\n  | 'className'\n  | 'prefix'\n  | 'suffix'\n  | 'children'\n  | 'isAnchor'\nexport type FilteredButtonProps = Omit<ButtonProps, FilteredProps>\nexport type FilteredAnchorProps = Omit<AnchorProps, FilteredProps>\n\nexport const useButtonWrapper = ({\n  size,\n  wide = false,\n  variant,\n  $loading,\n  className,\n  prefix,\n  suffix,\n  children,\n  isAnchor,\n  ...rest\n}: Props) => {\n  const innerRef = useRef<HTMLElement>(null)\n  // HINT: squareは\n  //  null: Buttonのレンダリング前\n  //  boolean: レンダリング後\n  const [square, setSquare] = useState<null | boolean>(null)\n\n  const classNames = useMemo(() => {\n    const { button, anchor, loader } = wrapperClassNameGenerator({\n      variant,\n      size,\n      square: !!square,\n      loading: !!$loading,\n      wide,\n    })\n\n    const wrapper = isAnchor ? anchor : button\n\n    return {\n      wrapper: wrapper({ className }),\n      loader: loader(),\n    }\n  }, [$loading, size, square, variant, wide, className, isAnchor])\n\n  const innerClassName = useMemo(() => innerClassNameGenerator({ size }), [size])\n\n  let actualPrefix = prefix\n  let actualSuffix = suffix\n  let actualChildren = children\n\n  if ($loading) {\n    actualPrefix = undefined\n    const loader = <Loader size=\"S\" className={classNames.loader} role=\"presentation\" />\n\n    // HINT: squareは null | boolean のため、switchで判定する\n    // nullの場合にactualSuffixにloaderを突っ込んでしまうとsquareの計算が狂ってしまう\n    switch (square) {\n      case true:\n        actualChildren = loader\n        break\n      case false:\n        actualSuffix = loader\n        break\n    }\n  }\n\n  useEffect(() => {\n    if (innerRef.current) {\n      // HINT: prefix, suffixが存在せず、かつicon,svg,imgのいずれかが単一でbodyに含まれるButtonの場合true\n      setSquare(!!innerRef.current.querySelector(ICON_BUTTON_SELECTOR))\n    }\n  }, [children])\n\n  return {\n    filteredProps: { ...rest, $loading } as FilteredAnchorProps | FilteredButtonProps,\n    classNames,\n    children: (\n      <>\n        {actualPrefix}\n        <span ref={innerRef} className={innerClassName}>\n          {actualChildren}\n        </span>\n        {actualSuffix}\n      </>\n    ),\n  }\n}\n\nconst wrapperClassNameGenerator = tv({\n  slots: {\n    button: [\n      'aria-disabled:shr-cursor-not-allowed',\n      /* alpha color を使用しているので、背景色と干渉させない */\n      'aria-disabled:shr-bg-clip-padding',\n      /* disabled ではなく aria-disabled で文字色が変わらないため、強制カラーモード時の色を指定 */\n      'aria-disabled:forced-colors:shr-border-[GrayText] aria-disabled:forced-colors:shr-text-[GrayText]',\n      '[&_.smarthr-ui-Icon]:forced-colors:aria-disabled:shr-fill-[GrayText]',\n    ],\n    anchor: [\n      'shr-no-underline',\n      '[&:not([href])]:shr-cursor-not-allowed',\n      /* alpha color を使用しているので、背景色と干渉させない */\n      '[&:not([href])]:shr-bg-clip-padding',\n      '[&_.smarthr-ui-Icon]:forced-colors:shr-fill-[LinkText]',\n      '[&:not([href])_.smarthr-ui-Icon]:forced-colors:shr-fill-[CanvasText]',\n    ],\n    loader: [\n      'shr-align-bottom',\n      '[&_.smarthr-ui-Loader-spinner]:shr-h-em [&_.smarthr-ui-Loader-spinner]:shr-w-em',\n    ],\n  },\n  variants: {\n    variant: {\n      primary: {},\n      secondary: {},\n      danger: {},\n      skeleton: {},\n      text: {},\n      tertiary: {},\n    },\n    size: {\n      M: {},\n      S: {},\n    },\n    square: {\n      true: {},\n    },\n    loading: {\n      true: {},\n    },\n    wide: {\n      true: {},\n    },\n  },\n  compoundSlots: [\n    {\n      slots: ['button', 'anchor'],\n      className: [\n        'shr-box-border',\n        'shr-cursor-pointer',\n        'shr-inline-flex',\n        'shr-justify-center',\n        'shr-items-center',\n        'shr-gap-0.5',\n        'shr-text-center',\n        'shr-whitespace-nowrap',\n        'shr-rounded-m',\n        /* ボタンの高さを合わせるために指定 */\n        'shr-border-shorthand',\n        'shr-font-inherit',\n        'shr-font-bold',\n        'shr-leading-none',\n        'focus-visible:shr-focus-indicator',\n        'contrast-more:shr-border-high-contrast',\n        /* baseline より下の leading などの余白を埋める */\n        '[&_.smarthr-ui-Icon]:shr-block',\n        /** selector list は使えない\n         * via https://github.com/tailwindlabs/tailwindcss/issues/10576#issuecomment-1440703413\n         */\n        '[&_svg]:shr-block',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'S',\n      className: [\n        'shr-p-0.5',\n        'shr-text-sm',\n        /* ボタンラベルの line-height を 0 にしたため、高さを担保する */\n        'shr-min-h-[calc(theme(fontSize.sm)+theme(spacing.1)+theme(borderWidth.2))]',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'M',\n      className: ['shr-text-base'],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'M',\n      square: false,\n      className: 'shr-px-1 shr-py-0.75',\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'M',\n      square: true,\n      className: 'shr-p-0.75',\n    },\n    {\n      slots: ['button', 'anchor'],\n      loading: true,\n      className: 'shr-flex-row-reverse',\n    },\n    {\n      slots: ['button', 'anchor'],\n      wide: true,\n      className: 'shr-w-full',\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'primary',\n      className: [\n        'shr-border-main',\n        'shr-bg-main',\n        'shr-text-white',\n        'focus-visible:shr-border-main-darken',\n        'focus-visible:shr-bg-main-darken',\n        'hover:shr-border-main-darken',\n        'hover:shr-bg-main-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'primary',\n      className: [\n        'aria-disabled:shr-border-main/50',\n        'aria-disabled:shr-bg-main/50',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'primary',\n      className: [\n        '[&:not([href])]:shr-border-main/50',\n        '[&:not([href])]:shr-bg-main/50',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'secondary',\n      className: [\n        'shr-border-default',\n        'shr-bg-white',\n        'shr-text-black',\n        'focus-visible:shr-border-darken',\n        'focus-visible:shr-bg-white-darken',\n        'focus-visible:contrast-more:shr-border-high-contrast',\n        'hover:shr-border-darken',\n        'hover:shr-bg-white-darken',\n        'hover:contrast-more:shr-border-high-contrast',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'secondary',\n      className: [\n        'aria-disabled:shr-border-disabled',\n        'aria-disabled:shr-bg-white-darken',\n        'aria-disabled:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'secondary',\n      className: [\n        '[&:not([href])]:shr-border-disabled',\n        '[&:not([href])]:shr-bg-white-darken',\n        '[&:not([href])]:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'tertiary',\n      className: [\n        'shr-border-transparent',\n        'shr-bg-transparent',\n        'shr-text-link',\n        'shr-font-normal',\n        'focus-visible:shr-bg-white-darken',\n        'hover:shr-bg-white-darken',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-link/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'danger',\n      className: [\n        'shr-border-danger',\n        'shr-bg-danger',\n        'shr-text-white',\n        'focus-visible:shr-border-danger-darken',\n        'focus-visible:shr-bg-danger-darken',\n        'hover:shr-border-danger-darken',\n        'hover:shr-bg-danger-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'danger',\n      className: [\n        'aria-disabled:shr-border-danger/50',\n        'aria-disabled:shr-bg-danger/50',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'danger',\n      className: [\n        '[&:not([href])]:shr-border-danger/50',\n        '[&:not([href])]:shr-bg-danger/50',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'skeleton',\n      className: [\n        'shr-border-white',\n        'shr-bg-transparent',\n        'shr-text-white',\n        'focus-visible:shr-border-white-darken',\n        'focus-visible:shr-bg-overlay',\n        'focus-visible:shr-text-white-darken',\n        'hover:shr-border-white-darken',\n        'hover:shr-bg-overlay',\n        'hover:shr-text-white-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'skeleton',\n      className: [\n        'aria-disabled:shr-border-white/50',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'skeleton',\n      className: [\n        '[&:not([href])]:shr-border-white/50',\n        '[&:not([href])]:shr-bg-transparent',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'text',\n      className: [\n        'shr-border-transparent',\n        'shr-bg-transparent',\n        'shr-text-black',\n        'focus-visible:shr-bg-white-darken',\n        'hover:shr-bg-white-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'text',\n      className: [\n        'aria-disabled:shr-border-transparent',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'text',\n      className: [\n        '[&:not([href])]:shr-border-transparent',\n        '[&:not([href])]:shr-bg-transparent',\n        '[&:not([href])]:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['loader'],\n      variant: ['primary', 'danger', 'skeleton'],\n      className: [\n        '[&_.smarthr-ui-Loader-line]:shr-border-white/50',\n        '[&_.smarthr-ui-Loader-line]:forced-colors:shr-border-[ButtonBorder]',\n      ],\n    },\n    {\n      slots: ['loader'],\n      variant: ['secondary', 'text'],\n      className: '[&_.smarthr-ui-Loader-line]:shr-border-disabled',\n    },\n    {\n      slots: ['loader'],\n      variant: 'tertiary',\n      className: '[&_.smarthr-ui-Loader-line]:shr-border-link/50',\n    },\n  ],\n})\n\nconst innerClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Button-body',\n    /* LineClamp を併用する場合に、幅を計算してもらうために指定 */\n    'shr-min-w-0',\n  ],\n  variants: {\n    size: {\n      M: '',\n      S: [\n        /* SVG とテキストコンテンツの縦位置を揃えるために指定 */\n        'shr-leading-[0]',\n      ],\n    },\n  },\n})\n"],"names":["_jsx","_jsxs","_Fragment","tv"],"mappings":"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"}
+{"version":3,"file":"useButtonWrapper.js","sources":["../../../src/components/Button/useButtonWrapper.tsx"],"sourcesContent":["import {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ElementType,\n  type ForwardedRef,\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Loader } from '../Loader'\n\nimport type { Variant } from './types'\n\n// HINT: prefix, suffixが存在せず、かつIcon,svg,img,Loaderのいずれかが単一でbodyに含まれるButtonかチェックしたい\n// このSELECTORはbody内の対象を列挙する\n// HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass\nconst ICON_SELECTOR = '.smarthr-ui-Icon, .smarthr-ui-Icon-extended, svg, img, .smarthr-ui-Loader'\n\ntype AbstractProps = PropsWithChildren<{\n  size: 'M' | 'S'\n  wide: boolean\n  variant: Variant\n  $loading?: boolean\n  className: string\n  elementAs?: ElementType\n  prefix?: ReactNode\n  suffix?: ReactNode\n}>\n\ntype AbstractButtonProps = AbstractProps & {\n  isAnchor?: never\n  buttonRef?: ForwardedRef<HTMLButtonElement>\n}\ntype ButtonProps = AbstractButtonProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof AbstractButtonProps>\n\ntype AbstractAnchorProps = AbstractProps & {\n  isAnchor: true\n  anchorRef?: ForwardedRef<HTMLAnchorElement>\n}\ntype AnchorProps = AbstractAnchorProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof AbstractAnchorProps>\n\nexport type Props = ButtonProps | AnchorProps\n\n// HINT: useButtonWrapperの引数を調整する場合、以下も調整する\ntype FilteredProps =\n  | 'size'\n  | 'wide'\n  | 'variant'\n  | 'className'\n  | 'prefix'\n  | 'suffix'\n  | 'children'\n  | 'isAnchor'\nexport type FilteredButtonProps = Omit<ButtonProps, FilteredProps>\nexport type FilteredAnchorProps = Omit<AnchorProps, FilteredProps>\n\nexport const useButtonWrapper = ({\n  size,\n  wide = false,\n  variant,\n  $loading,\n  className,\n  prefix,\n  suffix,\n  children,\n  isAnchor,\n  ...rest\n}: Props) => {\n  const innerRef = useRef<HTMLElement>(null)\n  // HINT: squareは\n  //  null: Buttonのレンダリング前\n  //  boolean: レンダリング後\n  const [square, setSquare] = useState<null | boolean>(null)\n\n  const classNames = useMemo(() => {\n    const { button, anchor, loader } = wrapperClassNameGenerator({\n      variant,\n      size,\n      square: !!square,\n      loading: !!$loading,\n      wide,\n    })\n\n    const wrapper = isAnchor ? anchor : button\n\n    return {\n      wrapper: wrapper({ className }),\n      loader: loader(),\n    }\n  }, [$loading, size, square, variant, wide, className, isAnchor])\n\n  const innerClassName = useMemo(() => innerClassNameGenerator({ size }), [size])\n\n  let actualPrefix = prefix\n  let actualSuffix = suffix\n  let actualChildren = children\n\n  if ($loading) {\n    actualPrefix = undefined\n    const loader = <Loader size=\"S\" className={classNames.loader} role=\"presentation\" />\n\n    // HINT: squareは null | boolean のため、switchで判定する\n    // nullの場合にactualSuffixにloaderを突っ込んでしまうとsquareの計算が狂ってしまう\n    switch (square) {\n      case true:\n        actualChildren = loader\n        break\n      case false:\n        actualSuffix = loader\n        break\n    }\n  }\n\n  // HINT: actualSuffixなどは$loadingの判定で置き換えられる可能性がある\n  // あくまで利用者が設定したprefix, suffixがないかで判定する\n  const onlyBody = !prefix && !suffix\n\n  useEffect(() => {\n    if (!onlyBody) {\n      setSquare(false)\n\n      return\n    }\n\n    const target = innerRef.current\n\n    if (!target) return\n\n    const checkSquare = () => {\n      setSquare(target.children.length === 1 && target.children[0].matches(ICON_SELECTOR))\n    }\n\n    checkSquare()\n\n    const observer = new MutationObserver(checkSquare)\n\n    observer.observe(target, {\n      childList: true,\n    })\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [onlyBody])\n\n  return {\n    filteredProps: { ...rest, $loading } as FilteredAnchorProps | FilteredButtonProps,\n    classNames,\n    children: (\n      <>\n        {actualPrefix}\n        <span ref={innerRef} className={innerClassName}>\n          {actualChildren}\n        </span>\n        {actualSuffix}\n      </>\n    ),\n  }\n}\n\nconst wrapperClassNameGenerator = tv({\n  slots: {\n    button: [\n      'aria-disabled:shr-cursor-not-allowed',\n      /* alpha color を使用しているので、背景色と干渉させない */\n      'aria-disabled:shr-bg-clip-padding',\n      /* disabled ではなく aria-disabled で文字色が変わらないため、強制カラーモード時の色を指定 */\n      'aria-disabled:forced-colors:shr-border-[GrayText] aria-disabled:forced-colors:shr-text-[GrayText]',\n      '[&_.smarthr-ui-Icon]:forced-colors:aria-disabled:shr-fill-[GrayText]',\n    ],\n    anchor: [\n      'shr-no-underline',\n      '[&:not([href])]:shr-cursor-not-allowed',\n      /* alpha color を使用しているので、背景色と干渉させない */\n      '[&:not([href])]:shr-bg-clip-padding',\n      '[&_.smarthr-ui-Icon]:forced-colors:shr-fill-[LinkText]',\n      '[&:not([href])_.smarthr-ui-Icon]:forced-colors:shr-fill-[CanvasText]',\n    ],\n    loader: [\n      'shr-align-bottom',\n      '[&_.smarthr-ui-Loader-spinner]:shr-h-em [&_.smarthr-ui-Loader-spinner]:shr-w-em',\n    ],\n  },\n  variants: {\n    variant: {\n      primary: {},\n      secondary: {},\n      danger: {},\n      skeleton: {},\n      text: {},\n      tertiary: {},\n    },\n    size: {\n      M: {},\n      S: {},\n    },\n    square: {\n      true: {},\n    },\n    loading: {\n      true: {},\n    },\n    wide: {\n      true: {},\n    },\n  },\n  compoundSlots: [\n    {\n      slots: ['button', 'anchor'],\n      className: [\n        'shr-box-border',\n        'shr-cursor-pointer',\n        'shr-inline-flex',\n        'shr-justify-center',\n        'shr-items-center',\n        'shr-gap-0.5',\n        'shr-text-center',\n        'shr-whitespace-nowrap',\n        'shr-rounded-m',\n        /* ボタンの高さを合わせるために指定 */\n        'shr-border-shorthand',\n        'shr-font-inherit',\n        'shr-font-bold',\n        'shr-leading-none',\n        'focus-visible:shr-focus-indicator',\n        'contrast-more:shr-border-high-contrast',\n        /* baseline より下の leading などの余白を埋める */\n        '[&_.smarthr-ui-Icon]:shr-block',\n        /** selector list は使えない\n         * via https://github.com/tailwindlabs/tailwindcss/issues/10576#issuecomment-1440703413\n         */\n        '[&_svg]:shr-block',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'S',\n      className: [\n        'shr-p-0.5',\n        'shr-text-sm',\n        /* ボタンラベルの line-height を 0 にしたため、高さを担保する */\n        'shr-min-h-[calc(theme(fontSize.sm)+theme(spacing.1)+theme(borderWidth.2))]',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'M',\n      className: ['shr-text-base'],\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'M',\n      square: false,\n      className: 'shr-px-1 shr-py-0.75',\n    },\n    {\n      slots: ['button', 'anchor'],\n      size: 'M',\n      square: true,\n      className: 'shr-p-0.75',\n    },\n    {\n      slots: ['button', 'anchor'],\n      loading: true,\n      className: 'shr-flex-row-reverse',\n    },\n    {\n      slots: ['button', 'anchor'],\n      wide: true,\n      className: 'shr-w-full',\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'primary',\n      className: [\n        'shr-border-main',\n        'shr-bg-main',\n        'shr-text-white',\n        'focus-visible:shr-border-main-darken',\n        'focus-visible:shr-bg-main-darken',\n        'hover:shr-border-main-darken',\n        'hover:shr-bg-main-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'primary',\n      className: [\n        'aria-disabled:shr-border-main/50',\n        'aria-disabled:shr-bg-main/50',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'primary',\n      className: [\n        '[&:not([href])]:shr-border-main/50',\n        '[&:not([href])]:shr-bg-main/50',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'secondary',\n      className: [\n        'shr-border-default',\n        'shr-bg-white',\n        'shr-text-black',\n        'focus-visible:shr-border-darken',\n        'focus-visible:shr-bg-white-darken',\n        'focus-visible:contrast-more:shr-border-high-contrast',\n        'hover:shr-border-darken',\n        'hover:shr-bg-white-darken',\n        'hover:contrast-more:shr-border-high-contrast',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'secondary',\n      className: [\n        'aria-disabled:shr-border-disabled',\n        'aria-disabled:shr-bg-white-darken',\n        'aria-disabled:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'secondary',\n      className: [\n        '[&:not([href])]:shr-border-disabled',\n        '[&:not([href])]:shr-bg-white-darken',\n        '[&:not([href])]:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'tertiary',\n      className: [\n        'shr-border-transparent',\n        'shr-bg-transparent',\n        'shr-text-link',\n        'shr-font-normal',\n        'focus-visible:shr-bg-white-darken',\n        'hover:shr-bg-white-darken',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-link/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'danger',\n      className: [\n        'shr-border-danger',\n        'shr-bg-danger',\n        'shr-text-white',\n        'focus-visible:shr-border-danger-darken',\n        'focus-visible:shr-bg-danger-darken',\n        'hover:shr-border-danger-darken',\n        'hover:shr-bg-danger-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'danger',\n      className: [\n        'aria-disabled:shr-border-danger/50',\n        'aria-disabled:shr-bg-danger/50',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'danger',\n      className: [\n        '[&:not([href])]:shr-border-danger/50',\n        '[&:not([href])]:shr-bg-danger/50',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'skeleton',\n      className: [\n        'shr-border-white',\n        'shr-bg-transparent',\n        'shr-text-white',\n        'focus-visible:shr-border-white-darken',\n        'focus-visible:shr-bg-overlay',\n        'focus-visible:shr-text-white-darken',\n        'hover:shr-border-white-darken',\n        'hover:shr-bg-overlay',\n        'hover:shr-text-white-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'skeleton',\n      className: [\n        'aria-disabled:shr-border-white/50',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'skeleton',\n      className: [\n        '[&:not([href])]:shr-border-white/50',\n        '[&:not([href])]:shr-bg-transparent',\n        '[&:not([href])]:shr-text-white/50',\n      ],\n    },\n    {\n      slots: ['button', 'anchor'],\n      variant: 'text',\n      className: [\n        'shr-border-transparent',\n        'shr-bg-transparent',\n        'shr-text-black',\n        'focus-visible:shr-bg-white-darken',\n        'hover:shr-bg-white-darken',\n      ],\n    },\n    {\n      slots: ['button'],\n      variant: 'text',\n      className: [\n        'aria-disabled:shr-border-transparent',\n        'aria-disabled:shr-bg-transparent',\n        'aria-disabled:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['anchor'],\n      variant: 'text',\n      className: [\n        '[&:not([href])]:shr-border-transparent',\n        '[&:not([href])]:shr-bg-transparent',\n        '[&:not([href])]:shr-text-disabled',\n      ],\n    },\n    {\n      slots: ['loader'],\n      variant: ['primary', 'danger', 'skeleton'],\n      className: [\n        '[&_.smarthr-ui-Loader-line]:shr-border-white/50',\n        '[&_.smarthr-ui-Loader-line]:forced-colors:shr-border-[ButtonBorder]',\n      ],\n    },\n    {\n      slots: ['loader'],\n      variant: ['secondary', 'text'],\n      className: '[&_.smarthr-ui-Loader-line]:shr-border-disabled',\n    },\n    {\n      slots: ['loader'],\n      variant: 'tertiary',\n      className: '[&_.smarthr-ui-Loader-line]:shr-border-link/50',\n    },\n  ],\n})\n\nconst innerClassNameGenerator = tv({\n  base: [\n    'smarthr-ui-Button-body',\n    /* LineClamp を併用する場合に、幅を計算してもらうために指定 */\n    'shr-min-w-0',\n  ],\n  variants: {\n    size: {\n      M: '',\n      S: [\n        /* SVG とテキストコンテンツの縦位置を揃えるために指定 */\n        'shr-leading-[0]',\n      ],\n    },\n  },\n})\n"],"names":["_jsx","_jsxs","_Fragment","tv"],"mappings":"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"}

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

@@ -63,9 +63,7 @@ const DropdownMenuButton = ({ trigger, children, onOpen, onClose, className, ...
 const MemoizedTriggerButton = React.memo(({ onlyIconTrigger, triggerSize, children, classNames, ...rest }) => {
     const { localize } = intl_useIntl.useIntl();
     const { active } = React.useContext(components_Dropdown_Dropdown.DropdownContext);
-    const showTooltip = !!onlyIconTrigger;
-    const tooltip = React.useMemo(() => ({ show: showTooltip, message: children }), [children, showTooltip]);
-    return (jsxRuntime.jsx(components_Dropdown_DropdownTrigger.DropdownTrigger, { className: classNames.triggerWrapper, tooltip: tooltip, children: jsxRuntime.jsx(components_Button_Button.Button, { ...rest, suffix: !onlyIconTrigger && (jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, { alt: active
+    return (jsxRuntime.jsx(components_Dropdown_DropdownTrigger.DropdownTrigger, { className: classNames.triggerWrapper, tooltip: { show: !!onlyIconTrigger, message: children }, children: jsxRuntime.jsx(components_Button_Button.Button, { ...rest, suffix: !onlyIconTrigger && (jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, { alt: active
                     ? localize({
                         id: 'smarthr-ui/DropdownMenuButton/triggerActive',
                         defaultText: '候補を閉じる',

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

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

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo, useContext, useMemo, useRef, Children, isValidElement, Fragment, useEffect } from 'react';
+import { memo, useContext, useRef, useMemo, Children, isValidElement, Fragment, useEffect } from 'react';
 import innerText from '../../../_virtual/index3.js';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { useObjectAttributes } from '../../../hooks/useObjectAttributes.js';
@@ -61,9 +61,7 @@ const DropdownMenuButton = ({ trigger, children, onOpen, onClose, className, ...
 const MemoizedTriggerButton = memo(({ onlyIconTrigger, triggerSize, children, classNames, ...rest }) => {
     const { localize } = useIntl();
     const { active } = useContext(DropdownContext);
-    const showTooltip = !!onlyIconTrigger;
-    const tooltip = useMemo(() => ({ show: showTooltip, message: children }), [children, showTooltip]);
-    return (jsx(DropdownTrigger, { className: classNames.triggerWrapper, tooltip: tooltip, children: jsx(Button, { ...rest, suffix: !onlyIconTrigger && (jsx(FaCaretDownIcon, { alt: active
+    return (jsx(DropdownTrigger, { className: classNames.triggerWrapper, tooltip: { show: !!onlyIconTrigger, message: children }, children: jsx(Button, { ...rest, suffix: !onlyIconTrigger && (jsx(FaCaretDownIcon, { alt: active
                     ? localize({
                         id: 'smarthr-ui/DropdownMenuButton/triggerActive',
                         defaultText: '候補を閉じる',

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

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

package/lib/components/Dropdown/DropdownTrigger.cjs

@@ -52,9 +52,9 @@ const DropdownTrigger = ({ children, className, tooltip }) => {
             button.removeEventListener('click', callback, CAPTURE_OPTION);
         };
     }, [children, onClickTrigger, triggerElementRef]);
-    return (jsxRuntime.jsx("div", { ref: triggerElementRef, className: actualClassName, children: jsxRuntime.jsx(ConditionalWrapper, { shouldWrapContent: tooltip?.show, wrapper: ({ children: currentChildren }) => (
+    return (jsxRuntime.jsx("div", { ref: triggerElementRef, className: actualClassName, children: jsxRuntime.jsx(ConditionalWrapper, { shouldWrapContent: tooltip?.show, wrapper: ({ children: currentChildren }) => tooltip?.message ? (
             // eslint-disable-next-line smarthr/a11y-scroller-has-tabindex
-            jsxRuntime.jsx(components_Tooltip_Tooltip.Tooltip, { message: tooltip?.message, triggerType: "icon", tabIndex: -1, children: currentChildren })), children: children }) }));
+            jsxRuntime.jsx(components_Tooltip_Tooltip.Tooltip, { message: tooltip?.message, triggerType: "icon", tabIndex: -1, children: currentChildren })) : (currentChildren), children: children }) }));
 };
 
 exports.DropdownTrigger = DropdownTrigger;

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

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

package/lib/components/Dropdown/DropdownTrigger.js

@@ -50,9 +50,9 @@ const DropdownTrigger = ({ children, className, tooltip }) => {
             button.removeEventListener('click', callback, CAPTURE_OPTION);
         };
     }, [children, onClickTrigger, triggerElementRef]);
-    return (jsx("div", { ref: triggerElementRef, className: actualClassName, children: jsx(ConditionalWrapper, { shouldWrapContent: tooltip?.show, wrapper: ({ children: currentChildren }) => (
+    return (jsx("div", { ref: triggerElementRef, className: actualClassName, children: jsx(ConditionalWrapper, { shouldWrapContent: tooltip?.show, wrapper: ({ children: currentChildren }) => tooltip?.message ? (
             // eslint-disable-next-line smarthr/a11y-scroller-has-tabindex
-            jsx(Tooltip, { message: tooltip?.message, triggerType: "icon", tabIndex: -1, children: currentChildren })), children: children }) }));
+            jsx(Tooltip, { message: tooltip?.message, triggerType: "icon", tabIndex: -1, children: currentChildren })) : (currentChildren), children: children }) }));
 };
 
 export { DropdownTrigger };