smarthr-ui 96.1.0 → 96.1.2

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/Combobox/MultiCombobox/MultiSelectedItem.cjs

@@ -81,17 +81,21 @@ const typedMemo = React.memo;
 const EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/;
 const BaseDestroyButton = ({ labelId, suffixTextId, item, onDelete, disabled, buttonRef, className, iconStyle, }) => {
     const { localize } = intl_useIntl.useIntl();
+    const onDeleteRef = React.useRef(onDelete);
+    onDeleteRef.current = onDelete;
+    const itemRef = React.useRef(item);
+    itemRef.current = item;
     const onClick = React.useCallback(() => {
-        onDelete(item);
-    }, [item, onDelete]);
+        onDeleteRef.current(itemRef.current);
+    }, []);
     const onKeyDown = React.useCallback((e) => {
         if (EXEC_DESTROY_KEY.test(e.key)) {
             e.stopPropagation();
             // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない
             // このタイミングで明示的に削除処理を実行する
-            onClick();
+            onDeleteRef.current(itemRef.current);
         }
-    }, [onClick]);
+    }, []);
     const destroyButtonIconAltSuffix = React.useMemo(() => localize({
         id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',
         defaultText: 'を削除',

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectedItem.cjs","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n  item: ComboboxItem<T> & { deletable?: boolean }\n  disabled: boolean\n  onDelete: (item: ComboboxItem<T>) => void\n  enableEllipsis?: boolean\n  buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n    itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n    deleteButton: [\n      'smarthr-ui-MultiCombobox-deleteButton',\n      'shr-relative',\n      'shr-group/deleteButton',\n      'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n      'focus-visible:shr-outline-none',\n    ],\n    deleteButtonIcon:\n      'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n  },\n  variants: {\n    enableEllipsis: {\n      true: {\n        itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n      },\n    },\n    disabled: {\n      true: {\n        deleteButton: 'shr-cursor-not-allowed',\n      },\n      false: {},\n    },\n  },\n})\n\nexport function MultiSelectedItem<T>({\n  item,\n  disabled,\n  onDelete,\n  enableEllipsis,\n  buttonRef,\n}: Props<T>) {\n  const [needsTooltip, setNeedsTooltip] = useState(false)\n  const { deletable = true } = item\n  const idPrefix = useId()\n  const labelId = `${idPrefix}-item-label`\n  const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n  const classNames = useMemo(() => {\n    const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      itemLabel: itemLabel({ enableEllipsis }),\n      deleteButton: deleteButton({ disabled }),\n      deleteButtonIcon: deleteButtonIcon(),\n    }\n  }, [disabled, enableEllipsis])\n\n  const body = (\n    <Chip disabled={disabled} className={classNames.wrapper}>\n      <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n        {item.label}\n      </ItemLabel>\n\n      {deletable && (\n        <DestroyButton\n          labelId={labelId}\n          suffixTextId={destroySuffixTextId}\n          item={item}\n          onDelete={onDelete}\n          disabled={disabled}\n          buttonRef={buttonRef}\n          className={classNames.deleteButton}\n          iconStyle={classNames.deleteButtonIcon}\n        />\n      )}\n    </Chip>\n  )\n\n  if (needsTooltip) {\n    return <Tooltip message={item.label}>{body}</Tooltip>\n  }\n\n  return body\n}\n\nconst ItemLabel = memo<\n  PropsWithChildren<{\n    id: string\n    enableEllipsis?: boolean\n    setNeedsTooltip: (flg: boolean) => void\n    className: string\n  }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n  const labelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (enableEllipsis && labelRef.current) {\n      const elem = labelRef.current\n\n      setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n    }\n  }, [enableEllipsis, setNeedsTooltip])\n\n  return (\n    <span ref={labelRef} id={id} className={className}>\n      {children}\n    </span>\n  )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/\n\nconst BaseDestroyButton = <T,>({\n  labelId,\n  suffixTextId,\n  item,\n  onDelete,\n  disabled,\n  buttonRef,\n  className,\n  iconStyle,\n}: Pick<Props<T>, 'item' | 'onDelete' | 'disabled' | 'buttonRef'> & {\n  labelId: string\n  suffixTextId: string\n  className: string\n  iconStyle: string\n}) => {\n  const { localize } = useIntl()\n  const onClick = useCallback(() => {\n    onDelete(item)\n  }, [item, onDelete])\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (EXEC_DESTROY_KEY.test(e.key)) {\n        e.stopPropagation()\n\n        // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n        // このタイミングで明示的に削除処理を実行する\n        onClick()\n      }\n    },\n    [onClick],\n  )\n\n  const destroyButtonIconAltSuffix = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n        defaultText: 'を削除',\n      }),\n    [localize],\n  )\n\n  return (\n    <UnstyledButton\n      ref={buttonRef}\n      disabled={disabled}\n      tabIndex={-1}\n      aria-labelledby={`${labelId} ${suffixTextId}`}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      className={className}\n    >\n      <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n      <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n    </UnstyledButton>\n  )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","useState","useId","useMemo","_jsxs","Chip","_jsx","Tooltip","memo","useRef","useEffect","useIntl","useCallback","UnstyledButton","VisuallyHiddenText","FaCircleXmarkIcon"],"mappings":"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"}
+{"version":3,"file":"MultiSelectedItem.cjs","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n  item: ComboboxItem<T> & { deletable?: boolean }\n  disabled: boolean\n  onDelete: (item: ComboboxItem<T>) => void\n  enableEllipsis?: boolean\n  buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n    itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n    deleteButton: [\n      'smarthr-ui-MultiCombobox-deleteButton',\n      'shr-relative',\n      'shr-group/deleteButton',\n      'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n      'focus-visible:shr-outline-none',\n    ],\n    deleteButtonIcon:\n      'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n  },\n  variants: {\n    enableEllipsis: {\n      true: {\n        itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n      },\n    },\n    disabled: {\n      true: {\n        deleteButton: 'shr-cursor-not-allowed',\n      },\n      false: {},\n    },\n  },\n})\n\nexport function MultiSelectedItem<T>({\n  item,\n  disabled,\n  onDelete,\n  enableEllipsis,\n  buttonRef,\n}: Props<T>) {\n  const [needsTooltip, setNeedsTooltip] = useState(false)\n  const { deletable = true } = item\n  const idPrefix = useId()\n  const labelId = `${idPrefix}-item-label`\n  const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n  const classNames = useMemo(() => {\n    const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      itemLabel: itemLabel({ enableEllipsis }),\n      deleteButton: deleteButton({ disabled }),\n      deleteButtonIcon: deleteButtonIcon(),\n    }\n  }, [disabled, enableEllipsis])\n\n  const body = (\n    <Chip disabled={disabled} className={classNames.wrapper}>\n      <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n        {item.label}\n      </ItemLabel>\n\n      {deletable && (\n        <DestroyButton\n          labelId={labelId}\n          suffixTextId={destroySuffixTextId}\n          item={item}\n          onDelete={onDelete}\n          disabled={disabled}\n          buttonRef={buttonRef}\n          className={classNames.deleteButton}\n          iconStyle={classNames.deleteButtonIcon}\n        />\n      )}\n    </Chip>\n  )\n\n  if (needsTooltip) {\n    return <Tooltip message={item.label}>{body}</Tooltip>\n  }\n\n  return body\n}\n\nconst ItemLabel = memo<\n  PropsWithChildren<{\n    id: string\n    enableEllipsis?: boolean\n    setNeedsTooltip: (flg: boolean) => void\n    className: string\n  }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n  const labelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (enableEllipsis && labelRef.current) {\n      const elem = labelRef.current\n\n      setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n    }\n  }, [enableEllipsis, setNeedsTooltip])\n\n  return (\n    <span ref={labelRef} id={id} className={className}>\n      {children}\n    </span>\n  )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/\n\nconst BaseDestroyButton = <T,>({\n  labelId,\n  suffixTextId,\n  item,\n  onDelete,\n  disabled,\n  buttonRef,\n  className,\n  iconStyle,\n}: Pick<Props<T>, 'item' | 'onDelete' | 'disabled' | 'buttonRef'> & {\n  labelId: string\n  suffixTextId: string\n  className: string\n  iconStyle: string\n}) => {\n  const { localize } = useIntl()\n\n  const onDeleteRef = useRef(onDelete)\n  onDeleteRef.current = onDelete\n  const itemRef = useRef(item)\n  itemRef.current = item\n\n  const onClick = useCallback(() => {\n    onDeleteRef.current(itemRef.current)\n  }, [])\n\n  const onKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {\n    if (EXEC_DESTROY_KEY.test(e.key)) {\n      e.stopPropagation()\n\n      // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n      // このタイミングで明示的に削除処理を実行する\n      onDeleteRef.current(itemRef.current)\n    }\n  }, [])\n\n  const destroyButtonIconAltSuffix = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n        defaultText: 'を削除',\n      }),\n    [localize],\n  )\n\n  return (\n    <UnstyledButton\n      ref={buttonRef}\n      disabled={disabled}\n      tabIndex={-1}\n      aria-labelledby={`${labelId} ${suffixTextId}`}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      className={className}\n    >\n      <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n      <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n    </UnstyledButton>\n  )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","useState","useId","useMemo","_jsxs","Chip","_jsx","Tooltip","memo","useRef","useEffect","useIntl","useCallback","UnstyledButton","VisuallyHiddenText","FaCircleXmarkIcon"],"mappings":"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"}

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.js

@@ -79,17 +79,21 @@ const typedMemo = memo;
 const EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/;
 const BaseDestroyButton = ({ labelId, suffixTextId, item, onDelete, disabled, buttonRef, className, iconStyle, }) => {
     const { localize } = useIntl();
+    const onDeleteRef = useRef(onDelete);
+    onDeleteRef.current = onDelete;
+    const itemRef = useRef(item);
+    itemRef.current = item;
     const onClick = useCallback(() => {
-        onDelete(item);
-    }, [item, onDelete]);
+        onDeleteRef.current(itemRef.current);
+    }, []);
     const onKeyDown = useCallback((e) => {
         if (EXEC_DESTROY_KEY.test(e.key)) {
             e.stopPropagation();
             // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない
             // このタイミングで明示的に削除処理を実行する
-            onClick();
+            onDeleteRef.current(itemRef.current);
         }
-    }, [onClick]);
+    }, []);
     const destroyButtonIconAltSuffix = useMemo(() => localize({
         id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',
         defaultText: 'を削除',

package/lib/components/Combobox/MultiCombobox/MultiSelectedItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectedItem.js","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n  item: ComboboxItem<T> & { deletable?: boolean }\n  disabled: boolean\n  onDelete: (item: ComboboxItem<T>) => void\n  enableEllipsis?: boolean\n  buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n    itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n    deleteButton: [\n      'smarthr-ui-MultiCombobox-deleteButton',\n      'shr-relative',\n      'shr-group/deleteButton',\n      'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n      'focus-visible:shr-outline-none',\n    ],\n    deleteButtonIcon:\n      'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n  },\n  variants: {\n    enableEllipsis: {\n      true: {\n        itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n      },\n    },\n    disabled: {\n      true: {\n        deleteButton: 'shr-cursor-not-allowed',\n      },\n      false: {},\n    },\n  },\n})\n\nexport function MultiSelectedItem<T>({\n  item,\n  disabled,\n  onDelete,\n  enableEllipsis,\n  buttonRef,\n}: Props<T>) {\n  const [needsTooltip, setNeedsTooltip] = useState(false)\n  const { deletable = true } = item\n  const idPrefix = useId()\n  const labelId = `${idPrefix}-item-label`\n  const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n  const classNames = useMemo(() => {\n    const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      itemLabel: itemLabel({ enableEllipsis }),\n      deleteButton: deleteButton({ disabled }),\n      deleteButtonIcon: deleteButtonIcon(),\n    }\n  }, [disabled, enableEllipsis])\n\n  const body = (\n    <Chip disabled={disabled} className={classNames.wrapper}>\n      <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n        {item.label}\n      </ItemLabel>\n\n      {deletable && (\n        <DestroyButton\n          labelId={labelId}\n          suffixTextId={destroySuffixTextId}\n          item={item}\n          onDelete={onDelete}\n          disabled={disabled}\n          buttonRef={buttonRef}\n          className={classNames.deleteButton}\n          iconStyle={classNames.deleteButtonIcon}\n        />\n      )}\n    </Chip>\n  )\n\n  if (needsTooltip) {\n    return <Tooltip message={item.label}>{body}</Tooltip>\n  }\n\n  return body\n}\n\nconst ItemLabel = memo<\n  PropsWithChildren<{\n    id: string\n    enableEllipsis?: boolean\n    setNeedsTooltip: (flg: boolean) => void\n    className: string\n  }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n  const labelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (enableEllipsis && labelRef.current) {\n      const elem = labelRef.current\n\n      setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n    }\n  }, [enableEllipsis, setNeedsTooltip])\n\n  return (\n    <span ref={labelRef} id={id} className={className}>\n      {children}\n    </span>\n  )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/\n\nconst BaseDestroyButton = <T,>({\n  labelId,\n  suffixTextId,\n  item,\n  onDelete,\n  disabled,\n  buttonRef,\n  className,\n  iconStyle,\n}: Pick<Props<T>, 'item' | 'onDelete' | 'disabled' | 'buttonRef'> & {\n  labelId: string\n  suffixTextId: string\n  className: string\n  iconStyle: string\n}) => {\n  const { localize } = useIntl()\n  const onClick = useCallback(() => {\n    onDelete(item)\n  }, [item, onDelete])\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (EXEC_DESTROY_KEY.test(e.key)) {\n        e.stopPropagation()\n\n        // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n        // このタイミングで明示的に削除処理を実行する\n        onClick()\n      }\n    },\n    [onClick],\n  )\n\n  const destroyButtonIconAltSuffix = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n        defaultText: 'を削除',\n      }),\n    [localize],\n  )\n\n  return (\n    <UnstyledButton\n      ref={buttonRef}\n      disabled={disabled}\n      tabIndex={-1}\n      aria-labelledby={`${labelId} ${suffixTextId}`}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      className={className}\n    >\n      <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n      <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n    </UnstyledButton>\n  )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"MultiSelectedItem.js","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n  item: ComboboxItem<T> & { deletable?: boolean }\n  disabled: boolean\n  onDelete: (item: ComboboxItem<T>) => void\n  enableEllipsis?: boolean\n  buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n    itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n    deleteButton: [\n      'smarthr-ui-MultiCombobox-deleteButton',\n      'shr-relative',\n      'shr-group/deleteButton',\n      'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n      'focus-visible:shr-outline-none',\n    ],\n    deleteButtonIcon:\n      'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n  },\n  variants: {\n    enableEllipsis: {\n      true: {\n        itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n      },\n    },\n    disabled: {\n      true: {\n        deleteButton: 'shr-cursor-not-allowed',\n      },\n      false: {},\n    },\n  },\n})\n\nexport function MultiSelectedItem<T>({\n  item,\n  disabled,\n  onDelete,\n  enableEllipsis,\n  buttonRef,\n}: Props<T>) {\n  const [needsTooltip, setNeedsTooltip] = useState(false)\n  const { deletable = true } = item\n  const idPrefix = useId()\n  const labelId = `${idPrefix}-item-label`\n  const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n  const classNames = useMemo(() => {\n    const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      itemLabel: itemLabel({ enableEllipsis }),\n      deleteButton: deleteButton({ disabled }),\n      deleteButtonIcon: deleteButtonIcon(),\n    }\n  }, [disabled, enableEllipsis])\n\n  const body = (\n    <Chip disabled={disabled} className={classNames.wrapper}>\n      <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n        {item.label}\n      </ItemLabel>\n\n      {deletable && (\n        <DestroyButton\n          labelId={labelId}\n          suffixTextId={destroySuffixTextId}\n          item={item}\n          onDelete={onDelete}\n          disabled={disabled}\n          buttonRef={buttonRef}\n          className={classNames.deleteButton}\n          iconStyle={classNames.deleteButtonIcon}\n        />\n      )}\n    </Chip>\n  )\n\n  if (needsTooltip) {\n    return <Tooltip message={item.label}>{body}</Tooltip>\n  }\n\n  return body\n}\n\nconst ItemLabel = memo<\n  PropsWithChildren<{\n    id: string\n    enableEllipsis?: boolean\n    setNeedsTooltip: (flg: boolean) => void\n    className: string\n  }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n  const labelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (enableEllipsis && labelRef.current) {\n      const elem = labelRef.current\n\n      setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n    }\n  }, [enableEllipsis, setNeedsTooltip])\n\n  return (\n    <span ref={labelRef} id={id} className={className}>\n      {children}\n    </span>\n  )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/\n\nconst BaseDestroyButton = <T,>({\n  labelId,\n  suffixTextId,\n  item,\n  onDelete,\n  disabled,\n  buttonRef,\n  className,\n  iconStyle,\n}: Pick<Props<T>, 'item' | 'onDelete' | 'disabled' | 'buttonRef'> & {\n  labelId: string\n  suffixTextId: string\n  className: string\n  iconStyle: string\n}) => {\n  const { localize } = useIntl()\n\n  const onDeleteRef = useRef(onDelete)\n  onDeleteRef.current = onDelete\n  const itemRef = useRef(item)\n  itemRef.current = item\n\n  const onClick = useCallback(() => {\n    onDeleteRef.current(itemRef.current)\n  }, [])\n\n  const onKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {\n    if (EXEC_DESTROY_KEY.test(e.key)) {\n      e.stopPropagation()\n\n      // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n      // このタイミングで明示的に削除処理を実行する\n      onDeleteRef.current(itemRef.current)\n    }\n  }, [])\n\n  const destroyButtonIconAltSuffix = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n        defaultText: 'を削除',\n      }),\n    [localize],\n  )\n\n  return (\n    <UnstyledButton\n      ref={buttonRef}\n      disabled={disabled}\n      tabIndex={-1}\n      aria-labelledby={`${labelId} ${suffixTextId}`}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      className={className}\n    >\n      <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n      <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n    </UnstyledButton>\n  )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}

package/lib/components/Dialog/DialogBody.cjs

@@ -5,10 +5,16 @@ 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 tailwind_backgroundColor = require('../../tailwind/backgroundColor.cjs');
 var tailwind_padding = require('../../tailwind/padding.cjs');
-require('../../themes/createTextColor.cjs');
+require('../../themes/createSpacing.cjs');
 require('../../_virtual/index.cjs');
 require('../../_virtual/index2.cjs');
 require('../../themes/createColor.cjs');
+require('../../themes/createTextColor.cjs');
+require('styled-components');
+require('../../themes/createShadow/defaultShadow.cjs');
+require('../../themes/createWidth.cjs');
+require('../../themes/createBackgroundColor.cjs');
+require('../../themes/createBorder.cjs');
 var components_Scroller_Scroller = require('../Scroller/Scroller.cjs');
 
 const classNameGenerator = index.tv({

package/lib/components/Dialog/DialogBody.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBody.cjs","sources":["../../../src/components/Dialog/DialogBody.tsx"],"sourcesContent":["import { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor, paddingBlock, paddingInline } from '../../tailwind'\nimport { Scroller } from '../Scroller'\n\nimport type { Gap } from '../../types'\n\nexport type Props = PropsWithChildren<\n  Pick<VariantProps<typeof classNameGenerator>, 'contentBgColor'> & {\n    contentPadding?: Gap | { block?: Gap; inline?: Gap }\n    className?: string | undefined\n  } & Pick<ComponentProps<'div'>, 'ref'>\n>\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-Dialog-body', 'shr-flex-auto'],\n  variants: {\n    paddingBlock,\n    paddingInline,\n    contentBgColor: backgroundColor,\n  },\n})\n\nexport const DialogBody: FC<Props> = ({ contentBgColor, contentPadding, className, ...rest }) => {\n  const actualPaddings = useMemo(() => {\n    const initialized = contentPadding === undefined ? 1.5 : contentPadding\n\n    return initialized instanceof Object ? initialized : { block: initialized, inline: initialized }\n  }, [contentPadding])\n  const actualClassName = useMemo(\n    () =>\n      classNameGenerator({\n        contentBgColor,\n        paddingBlock: actualPaddings.block,\n        paddingInline: actualPaddings.inline,\n        className,\n      }),\n    [actualPaddings.block, actualPaddings.inline, contentBgColor, className],\n  )\n\n  return <Scroller {...rest} className={actualClassName} />\n}\n"],"names":["tv","paddingBlock","paddingInline","backgroundColor","useMemo","_jsx","Scroller"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,wBAAwB,EAAE,eAAe,CAAC;AACjD,IAAA,QAAQ,EAAE;sBACRC,6BAAY;uBACZC,8BAAa;AACb,QAAA,cAAc,EAAEC,wCAAe;AAChC,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,UAAU,GAAc,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAC9F,IAAA,MAAM,cAAc,GAAGC,aAAO,CAAC,MAAK;AAClC,QAAA,MAAM,WAAW,GAAG,cAAc,KAAK,SAAS,GAAG,GAAG,GAAG,cAAc;AAEvE,QAAA,OAAO,WAAW,YAAY,MAAM,GAAG,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE;AAClG,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IACpB,MAAM,eAAe,GAAGA,aAAO,CAC7B,MACE,kBAAkB,CAAC;QACjB,cAAc;QACd,YAAY,EAAE,cAAc,CAAC,KAAK;QAClC,aAAa,EAAE,cAAc,CAAC,MAAM;QACpC,SAAS;AACV,KAAA,CAAC,EACJ,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,SAAS,CAAC,CACzE;IAED,OAAOC,cAAA,CAACC,qCAAQ,EAAA,EAAA,GAAK,IAAI,EAAE,SAAS,EAAE,eAAe,EAAA,CAAI;AAC3D;;;;"}
+{"version":3,"file":"DialogBody.cjs","sources":["../../../src/components/Dialog/DialogBody.tsx"],"sourcesContent":["import { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor, paddingBlock, paddingInline } from '../../tailwind'\nimport { Scroller } from '../Scroller'\n\nimport type { Gap } from '../../types'\n\nexport type Props = PropsWithChildren<\n  Pick<VariantProps<typeof classNameGenerator>, 'contentBgColor'> & {\n    contentPadding?: Gap | { block?: Gap; inline?: Gap }\n    className?: string | undefined\n  } & Pick<ComponentProps<'div'>, 'ref'>\n>\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-Dialog-body', 'shr-flex-auto'],\n  variants: {\n    paddingBlock,\n    paddingInline,\n    contentBgColor: backgroundColor,\n  },\n})\n\nexport const DialogBody: FC<Props> = ({ contentBgColor, contentPadding, className, ...rest }) => {\n  const actualPaddings = useMemo(() => {\n    const initialized = contentPadding === undefined ? 1.5 : contentPadding\n\n    return initialized instanceof Object ? initialized : { block: initialized, inline: initialized }\n  }, [contentPadding])\n  const actualClassName = useMemo(\n    () =>\n      classNameGenerator({\n        contentBgColor,\n        paddingBlock: actualPaddings.block,\n        paddingInline: actualPaddings.inline,\n        className,\n      }),\n    [actualPaddings.block, actualPaddings.inline, contentBgColor, className],\n  )\n\n  return <Scroller {...rest} className={actualClassName} />\n}\n"],"names":["tv","paddingBlock","paddingInline","backgroundColor","useMemo","_jsx","Scroller"],"mappings":";;;;;;;;;;;;;;;;;;;AAeA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,wBAAwB,EAAE,eAAe,CAAC;AACjD,IAAA,QAAQ,EAAE;sBACRC,6BAAY;uBACZC,8BAAa;AACb,QAAA,cAAc,EAAEC,wCAAe;AAChC,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,UAAU,GAAc,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAC9F,IAAA,MAAM,cAAc,GAAGC,aAAO,CAAC,MAAK;AAClC,QAAA,MAAM,WAAW,GAAG,cAAc,KAAK,SAAS,GAAG,GAAG,GAAG,cAAc;AAEvE,QAAA,OAAO,WAAW,YAAY,MAAM,GAAG,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE;AAClG,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IACpB,MAAM,eAAe,GAAGA,aAAO,CAC7B,MACE,kBAAkB,CAAC;QACjB,cAAc;QACd,YAAY,EAAE,cAAc,CAAC,KAAK;QAClC,aAAa,EAAE,cAAc,CAAC,MAAM;QACpC,SAAS;AACV,KAAA,CAAC,EACJ,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,SAAS,CAAC,CACzE;IAED,OAAOC,cAAA,CAACC,qCAAQ,EAAA,EAAA,GAAK,IAAI,EAAE,SAAS,EAAE,eAAe,EAAA,CAAI;AAC3D;;;;"}

package/lib/components/Dialog/DialogBody.js

@@ -3,10 +3,16 @@ import { 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 { backgroundColor } from '../../tailwind/backgroundColor.js';
 import { paddingInline, paddingBlock } from '../../tailwind/padding.js';
-import '../../themes/createTextColor.js';
+import '../../themes/createSpacing.js';
 import '../../_virtual/index.js';
 import '../../_virtual/index2.js';
 import '../../themes/createColor.js';
+import '../../themes/createTextColor.js';
+import 'styled-components';
+import '../../themes/createShadow/defaultShadow.js';
+import '../../themes/createWidth.js';
+import '../../themes/createBackgroundColor.js';
+import '../../themes/createBorder.js';
 import { Scroller } from '../Scroller/Scroller.js';
 
 const classNameGenerator = ce({

package/lib/components/Dialog/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBody.js","sources":["../../../src/components/Dialog/DialogBody.tsx"],"sourcesContent":["import { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor, paddingBlock, paddingInline } from '../../tailwind'\nimport { Scroller } from '../Scroller'\n\nimport type { Gap } from '../../types'\n\nexport type Props = PropsWithChildren<\n  Pick<VariantProps<typeof classNameGenerator>, 'contentBgColor'> & {\n    contentPadding?: Gap | { block?: Gap; inline?: Gap }\n    className?: string | undefined\n  } & Pick<ComponentProps<'div'>, 'ref'>\n>\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-Dialog-body', 'shr-flex-auto'],\n  variants: {\n    paddingBlock,\n    paddingInline,\n    contentBgColor: backgroundColor,\n  },\n})\n\nexport const DialogBody: FC<Props> = ({ contentBgColor, contentPadding, className, ...rest }) => {\n  const actualPaddings = useMemo(() => {\n    const initialized = contentPadding === undefined ? 1.5 : contentPadding\n\n    return initialized instanceof Object ? initialized : { block: initialized, inline: initialized }\n  }, [contentPadding])\n  const actualClassName = useMemo(\n    () =>\n      classNameGenerator({\n        contentBgColor,\n        paddingBlock: actualPaddings.block,\n        paddingInline: actualPaddings.inline,\n        className,\n      }),\n    [actualPaddings.block, actualPaddings.inline, contentBgColor, className],\n  )\n\n  return <Scroller {...rest} className={actualClassName} />\n}\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;AAeA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,wBAAwB,EAAE,eAAe,CAAC;AACjD,IAAA,QAAQ,EAAE;QACR,YAAY;QACZ,aAAa;AACb,QAAA,cAAc,EAAE,eAAe;AAChC,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,UAAU,GAAc,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAC9F,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAK;AAClC,QAAA,MAAM,WAAW,GAAG,cAAc,KAAK,SAAS,GAAG,GAAG,GAAG,cAAc;AAEvE,QAAA,OAAO,WAAW,YAAY,MAAM,GAAG,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE;AAClG,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IACpB,MAAM,eAAe,GAAG,OAAO,CAC7B,MACE,kBAAkB,CAAC;QACjB,cAAc;QACd,YAAY,EAAE,cAAc,CAAC,KAAK;QAClC,aAAa,EAAE,cAAc,CAAC,MAAM;QACpC,SAAS;AACV,KAAA,CAAC,EACJ,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,SAAS,CAAC,CACzE;IAED,OAAOC,GAAA,CAAC,QAAQ,EAAA,EAAA,GAAK,IAAI,EAAE,SAAS,EAAE,eAAe,EAAA,CAAI;AAC3D;;;;"}
+{"version":3,"file":"DialogBody.js","sources":["../../../src/components/Dialog/DialogBody.tsx"],"sourcesContent":["import { type ComponentProps, type FC, type PropsWithChildren, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { backgroundColor, paddingBlock, paddingInline } from '../../tailwind'\nimport { Scroller } from '../Scroller'\n\nimport type { Gap } from '../../types'\n\nexport type Props = PropsWithChildren<\n  Pick<VariantProps<typeof classNameGenerator>, 'contentBgColor'> & {\n    contentPadding?: Gap | { block?: Gap; inline?: Gap }\n    className?: string | undefined\n  } & Pick<ComponentProps<'div'>, 'ref'>\n>\n\nconst classNameGenerator = tv({\n  base: ['smarthr-ui-Dialog-body', 'shr-flex-auto'],\n  variants: {\n    paddingBlock,\n    paddingInline,\n    contentBgColor: backgroundColor,\n  },\n})\n\nexport const DialogBody: FC<Props> = ({ contentBgColor, contentPadding, className, ...rest }) => {\n  const actualPaddings = useMemo(() => {\n    const initialized = contentPadding === undefined ? 1.5 : contentPadding\n\n    return initialized instanceof Object ? initialized : { block: initialized, inline: initialized }\n  }, [contentPadding])\n  const actualClassName = useMemo(\n    () =>\n      classNameGenerator({\n        contentBgColor,\n        paddingBlock: actualPaddings.block,\n        paddingInline: actualPaddings.inline,\n        className,\n      }),\n    [actualPaddings.block, actualPaddings.inline, contentBgColor, className],\n  )\n\n  return <Scroller {...rest} className={actualClassName} />\n}\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;;;;;;;AAeA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,CAAC,wBAAwB,EAAE,eAAe,CAAC;AACjD,IAAA,QAAQ,EAAE;QACR,YAAY;QACZ,aAAa;AACb,QAAA,cAAc,EAAE,eAAe;AAChC,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,UAAU,GAAc,CAAC,EAAE,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;AAC9F,IAAA,MAAM,cAAc,GAAG,OAAO,CAAC,MAAK;AAClC,QAAA,MAAM,WAAW,GAAG,cAAc,KAAK,SAAS,GAAG,GAAG,GAAG,cAAc;AAEvE,QAAA,OAAO,WAAW,YAAY,MAAM,GAAG,WAAW,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE;AAClG,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IACpB,MAAM,eAAe,GAAG,OAAO,CAC7B,MACE,kBAAkB,CAAC;QACjB,cAAc;QACd,YAAY,EAAE,cAAc,CAAC,KAAK;QAClC,aAAa,EAAE,cAAc,CAAC,MAAM;QACpC,SAAS;AACV,KAAA,CAAC,EACJ,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,CAAC,MAAM,EAAE,cAAc,EAAE,SAAS,CAAC,CACzE;IAED,OAAOC,GAAA,CAAC,QAAQ,EAAA,EAAA,GAAK,IAAI,EAAE,SAAS,EAAE,eAAe,EAAA,CAAI;AAC3D;;;;"}

package/lib/components/Dialog/DialogContentInner.cjs

@@ -6,10 +6,16 @@ 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 hooks_useHandleEscape = require('../../hooks/useHandleEscape.cjs');
 var tailwind_dialogSize = require('../../tailwind/dialogSize.cjs');
-require('../../themes/createTextColor.cjs');
+require('../../themes/createSpacing.cjs');
 require('../../_virtual/index.cjs');
 require('../../_virtual/index2.cjs');
 require('../../themes/createColor.cjs');
+require('../../themes/createTextColor.cjs');
+require('styled-components');
+require('../../themes/createShadow/defaultShadow.cjs');
+require('../../themes/createWidth.cjs');
+require('../../themes/createBackgroundColor.cjs');
+require('../../themes/createBorder.cjs');
 var components_Dialog_DialogOverlap = require('./DialogOverlap.cjs');
 var components_Dialog_FocusTrap = require('./FocusTrap.cjs');
 var components_Dialog_useBodyScrollLock = require('./useBodyScrollLock.cjs');

package/lib/components/Dialog/DialogContentInner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContentInner.cjs","sources":["../../../src/components/Dialog/DialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../hooks/useHandleEscape'\nimport { dialogSize } from '../../tailwind'\n\nimport { DialogOverlap } from './DialogOverlap'\nimport { FocusTrap, type FocusTrapRef } from './FocusTrap'\nimport { useBodyScrollLock } from './useBodyScrollLock'\n\nimport type { DialogSize } from './types'\n\nexport type DialogContentInnerProps = PropsWithChildren<{\n  /**\n   * オーバーレイをクリックした時に発火するコールバック関数\n   */\n  onClickOverlay?: () => void\n  /**\n   * エスケープキーを押下した時に発火するコールバック関数\n   */\n  onPressEscape?: () => void\n  /**\n   * ダイアログを開いているかどうか\n   */\n  isOpen: boolean\n  /**\n   * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n   * ダイアログの幅\n   */\n  width?: string | number\n  /**\n   * ダイアログの大きさ\n   */\n  size?: DialogSize\n  /**\n   * ダイアログの `id`\n   * TODO 使われてなさそうなので確認\n   */\n  id?: string\n  /**\n   * ダイアログを開いた時にフォーカスする対象\n   */\n  firstFocusTarget?: RefObject<HTMLElement>\n  /**\n   * ダイアログの `aria-label`\n   */\n  ariaLabel?: string\n  /**\n   * ダイアログの `aria-labelledby`\n   */\n  ariaLabelledby?: string\n  /**\n   * ダイアログトップのフォーカストラップへの ref\n   */\n  focusTrapRef?: RefObject<FocusTrapRef>\n}>\ntype Props = DialogContentInnerProps & Omit<ComponentProps<'div'>, keyof DialogContentInnerProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    layout: ['smarthr-ui-Dialog-wrapper', 'shr-max-w-[calc(100dvw-theme(spacing.1))]'],\n    inner: [\n      'smarthr-ui-Dialog',\n      'shr-border-shorthand shr-relative shr-z-1 shr-rounded-m shr-bg-white shr-shadow-layer-3',\n      'contrast-more:shr-border-high-contrast',\n    ],\n    background: ['smarthr-ui-Dialog-background', 'shr-absolute shr-inset-0 shr-bg-scrim'],\n  },\n  variants: {\n    size: {\n      XS: { layout: dialogSize.XS },\n      S: { layout: dialogSize.S },\n      M: { layout: dialogSize.M },\n      L: { layout: dialogSize.L },\n      XL: { layout: dialogSize.XL },\n      XXL: { layout: dialogSize.XXL },\n      FULL: { layout: dialogSize.FULL },\n    },\n  },\n})\n\nexport const DialogContentInner: FC<Props> = ({\n  onClickOverlay,\n  onPressEscape,\n  isOpen,\n  id,\n  width,\n  size,\n  firstFocusTarget,\n  ariaLabel,\n  ariaLabelledby,\n  children,\n  className,\n  focusTrapRef,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { layout, inner, background } = classNameGenerator()\n\n    return {\n      layout: layout({ size }),\n      inner: inner({ className }),\n      background: background(),\n    }\n  }, [size, className])\n  const style = useMemo(() => {\n    // width は deprecated なので、size が指定されている場合は width を無視する\n    const actualWidth = size ? undefined : typeof width === 'number' ? `${width}px` : width\n\n    return actualWidth ? { width: actualWidth } : undefined\n  }, [width, size])\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useHandleEscape(\n    useMemo(() => (onPressEscape && isOpen ? onPressEscape : undefined), [isOpen, onPressEscape]),\n  )\n\n  useBodyScrollLock(isOpen)\n\n  return (\n    <DialogOverlap isOpen={isOpen}>\n      <div id={id} className={classNames.layout} style={style}>\n        <Overlay\n          isOpen={isOpen}\n          onClickOverlay={onClickOverlay}\n          className={classNames.background}\n        />\n        <div\n          {...rest}\n          ref={innerRef}\n          role=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-modal=\"true\"\n          className={classNames.inner}\n        >\n          <FocusTrap firstFocusTarget={firstFocusTarget} ref={focusTrapRef}>\n            {children}\n          </FocusTrap>\n        </div>\n      </div>\n    </DialogOverlap>\n  )\n}\n\nconst Overlay = memo<Pick<Props, 'onClickOverlay' | 'isOpen'> & { className: string }>(\n  ({ onClickOverlay, isOpen, className }) => {\n    const onClick = useMemo(\n      () => (onClickOverlay && isOpen ? onClickOverlay : undefined),\n      [isOpen, onClickOverlay],\n    )\n\n    // eslint-disable-next-line smarthr/best-practice-for-interactive-element\n    return <div onClick={onClick} className={className} role=\"presentation\" />\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAoEA;AACE;AACE;AACA;;;;AAIC;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAEM;AAeL;;;AAII;AACA;;;AAGJ;AACA;;;AAIE;AACF;AAEA;;;AAQA;AAwBF;AAEA;;;AAQI;AACF;;"}
+{"version":3,"file":"DialogContentInner.cjs","sources":["../../../src/components/Dialog/DialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../hooks/useHandleEscape'\nimport { dialogSize } from '../../tailwind'\n\nimport { DialogOverlap } from './DialogOverlap'\nimport { FocusTrap, type FocusTrapRef } from './FocusTrap'\nimport { useBodyScrollLock } from './useBodyScrollLock'\n\nimport type { DialogSize } from './types'\n\nexport type DialogContentInnerProps = PropsWithChildren<{\n  /**\n   * オーバーレイをクリックした時に発火するコールバック関数\n   */\n  onClickOverlay?: () => void\n  /**\n   * エスケープキーを押下した時に発火するコールバック関数\n   */\n  onPressEscape?: () => void\n  /**\n   * ダイアログを開いているかどうか\n   */\n  isOpen: boolean\n  /**\n   * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n   * ダイアログの幅\n   */\n  width?: string | number\n  /**\n   * ダイアログの大きさ\n   */\n  size?: DialogSize\n  /**\n   * ダイアログの `id`\n   * TODO 使われてなさそうなので確認\n   */\n  id?: string\n  /**\n   * ダイアログを開いた時にフォーカスする対象\n   */\n  firstFocusTarget?: RefObject<HTMLElement>\n  /**\n   * ダイアログの `aria-label`\n   */\n  ariaLabel?: string\n  /**\n   * ダイアログの `aria-labelledby`\n   */\n  ariaLabelledby?: string\n  /**\n   * ダイアログトップのフォーカストラップへの ref\n   */\n  focusTrapRef?: RefObject<FocusTrapRef>\n}>\ntype Props = DialogContentInnerProps & Omit<ComponentProps<'div'>, keyof DialogContentInnerProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    layout: ['smarthr-ui-Dialog-wrapper', 'shr-max-w-[calc(100dvw-theme(spacing.1))]'],\n    inner: [\n      'smarthr-ui-Dialog',\n      'shr-border-shorthand shr-relative shr-z-1 shr-rounded-m shr-bg-white shr-shadow-layer-3',\n      'contrast-more:shr-border-high-contrast',\n    ],\n    background: ['smarthr-ui-Dialog-background', 'shr-absolute shr-inset-0 shr-bg-scrim'],\n  },\n  variants: {\n    size: {\n      XS: { layout: dialogSize.XS },\n      S: { layout: dialogSize.S },\n      M: { layout: dialogSize.M },\n      L: { layout: dialogSize.L },\n      XL: { layout: dialogSize.XL },\n      XXL: { layout: dialogSize.XXL },\n      FULL: { layout: dialogSize.FULL },\n    },\n  },\n})\n\nexport const DialogContentInner: FC<Props> = ({\n  onClickOverlay,\n  onPressEscape,\n  isOpen,\n  id,\n  width,\n  size,\n  firstFocusTarget,\n  ariaLabel,\n  ariaLabelledby,\n  children,\n  className,\n  focusTrapRef,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { layout, inner, background } = classNameGenerator()\n\n    return {\n      layout: layout({ size }),\n      inner: inner({ className }),\n      background: background(),\n    }\n  }, [size, className])\n  const style = useMemo(() => {\n    // width は deprecated なので、size が指定されている場合は width を無視する\n    const actualWidth = size ? undefined : typeof width === 'number' ? `${width}px` : width\n\n    return actualWidth ? { width: actualWidth } : undefined\n  }, [width, size])\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useHandleEscape(\n    useMemo(() => (onPressEscape && isOpen ? onPressEscape : undefined), [isOpen, onPressEscape]),\n  )\n\n  useBodyScrollLock(isOpen)\n\n  return (\n    <DialogOverlap isOpen={isOpen}>\n      <div id={id} className={classNames.layout} style={style}>\n        <Overlay\n          isOpen={isOpen}\n          onClickOverlay={onClickOverlay}\n          className={classNames.background}\n        />\n        <div\n          {...rest}\n          ref={innerRef}\n          role=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-modal=\"true\"\n          className={classNames.inner}\n        >\n          <FocusTrap firstFocusTarget={firstFocusTarget} ref={focusTrapRef}>\n            {children}\n          </FocusTrap>\n        </div>\n      </div>\n    </DialogOverlap>\n  )\n}\n\nconst Overlay = memo<Pick<Props, 'onClickOverlay' | 'isOpen'> & { className: string }>(\n  ({ onClickOverlay, isOpen, className }) => {\n    const onClick = useMemo(\n      () => (onClickOverlay && isOpen ? onClickOverlay : undefined),\n      [isOpen, onClickOverlay],\n    )\n\n    // eslint-disable-next-line smarthr/best-practice-for-interactive-element\n    return <div onClick={onClick} className={className} role=\"presentation\" />\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoEA;AACE;AACE;AACA;;;;AAIC;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAEM;AAeL;;;AAII;AACA;;;AAGJ;AACA;;;AAIE;AACF;AAEA;;;AAQA;AAwBF;AAEA;;;AAQI;AACF;;"}

package/lib/components/Dialog/DialogContentInner.js

@@ -4,10 +4,16 @@ import { memo, useMemo, useRef } 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 { useHandleEscape } from '../../hooks/useHandleEscape.js';
 import { dialogSize } from '../../tailwind/dialogSize.js';
-import '../../themes/createTextColor.js';
+import '../../themes/createSpacing.js';
 import '../../_virtual/index.js';
 import '../../_virtual/index2.js';
 import '../../themes/createColor.js';
+import '../../themes/createTextColor.js';
+import 'styled-components';
+import '../../themes/createShadow/defaultShadow.js';
+import '../../themes/createWidth.js';
+import '../../themes/createBackgroundColor.js';
+import '../../themes/createBorder.js';
 import { DialogOverlap } from './DialogOverlap.js';
 import { FocusTrap } from './FocusTrap.js';
 import { useBodyScrollLock } from './useBodyScrollLock.js';

package/lib/components/Dialog/DialogContentInner.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContentInner.js","sources":["../../../src/components/Dialog/DialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../hooks/useHandleEscape'\nimport { dialogSize } from '../../tailwind'\n\nimport { DialogOverlap } from './DialogOverlap'\nimport { FocusTrap, type FocusTrapRef } from './FocusTrap'\nimport { useBodyScrollLock } from './useBodyScrollLock'\n\nimport type { DialogSize } from './types'\n\nexport type DialogContentInnerProps = PropsWithChildren<{\n  /**\n   * オーバーレイをクリックした時に発火するコールバック関数\n   */\n  onClickOverlay?: () => void\n  /**\n   * エスケープキーを押下した時に発火するコールバック関数\n   */\n  onPressEscape?: () => void\n  /**\n   * ダイアログを開いているかどうか\n   */\n  isOpen: boolean\n  /**\n   * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n   * ダイアログの幅\n   */\n  width?: string | number\n  /**\n   * ダイアログの大きさ\n   */\n  size?: DialogSize\n  /**\n   * ダイアログの `id`\n   * TODO 使われてなさそうなので確認\n   */\n  id?: string\n  /**\n   * ダイアログを開いた時にフォーカスする対象\n   */\n  firstFocusTarget?: RefObject<HTMLElement>\n  /**\n   * ダイアログの `aria-label`\n   */\n  ariaLabel?: string\n  /**\n   * ダイアログの `aria-labelledby`\n   */\n  ariaLabelledby?: string\n  /**\n   * ダイアログトップのフォーカストラップへの ref\n   */\n  focusTrapRef?: RefObject<FocusTrapRef>\n}>\ntype Props = DialogContentInnerProps & Omit<ComponentProps<'div'>, keyof DialogContentInnerProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    layout: ['smarthr-ui-Dialog-wrapper', 'shr-max-w-[calc(100dvw-theme(spacing.1))]'],\n    inner: [\n      'smarthr-ui-Dialog',\n      'shr-border-shorthand shr-relative shr-z-1 shr-rounded-m shr-bg-white shr-shadow-layer-3',\n      'contrast-more:shr-border-high-contrast',\n    ],\n    background: ['smarthr-ui-Dialog-background', 'shr-absolute shr-inset-0 shr-bg-scrim'],\n  },\n  variants: {\n    size: {\n      XS: { layout: dialogSize.XS },\n      S: { layout: dialogSize.S },\n      M: { layout: dialogSize.M },\n      L: { layout: dialogSize.L },\n      XL: { layout: dialogSize.XL },\n      XXL: { layout: dialogSize.XXL },\n      FULL: { layout: dialogSize.FULL },\n    },\n  },\n})\n\nexport const DialogContentInner: FC<Props> = ({\n  onClickOverlay,\n  onPressEscape,\n  isOpen,\n  id,\n  width,\n  size,\n  firstFocusTarget,\n  ariaLabel,\n  ariaLabelledby,\n  children,\n  className,\n  focusTrapRef,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { layout, inner, background } = classNameGenerator()\n\n    return {\n      layout: layout({ size }),\n      inner: inner({ className }),\n      background: background(),\n    }\n  }, [size, className])\n  const style = useMemo(() => {\n    // width は deprecated なので、size が指定されている場合は width を無視する\n    const actualWidth = size ? undefined : typeof width === 'number' ? `${width}px` : width\n\n    return actualWidth ? { width: actualWidth } : undefined\n  }, [width, size])\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useHandleEscape(\n    useMemo(() => (onPressEscape && isOpen ? onPressEscape : undefined), [isOpen, onPressEscape]),\n  )\n\n  useBodyScrollLock(isOpen)\n\n  return (\n    <DialogOverlap isOpen={isOpen}>\n      <div id={id} className={classNames.layout} style={style}>\n        <Overlay\n          isOpen={isOpen}\n          onClickOverlay={onClickOverlay}\n          className={classNames.background}\n        />\n        <div\n          {...rest}\n          ref={innerRef}\n          role=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-modal=\"true\"\n          className={classNames.inner}\n        >\n          <FocusTrap firstFocusTarget={firstFocusTarget} ref={focusTrapRef}>\n            {children}\n          </FocusTrap>\n        </div>\n      </div>\n    </DialogOverlap>\n  )\n}\n\nconst Overlay = memo<Pick<Props, 'onClickOverlay' | 'isOpen'> & { className: string }>(\n  ({ onClickOverlay, isOpen, className }) => {\n    const onClick = useMemo(\n      () => (onClickOverlay && isOpen ? onClickOverlay : undefined),\n      [isOpen, onClickOverlay],\n    )\n\n    // eslint-disable-next-line smarthr/best-practice-for-interactive-element\n    return <div onClick={onClick} className={className} role=\"presentation\" />\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAoEA;AACE;AACE;AACA;;;;AAIC;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAEM;AAeL;;;AAII;AACA;;;AAGJ;AACA;;;AAIE;AACF;AAEA;;;AAQA;AAwBF;AAEA;;;AAQI;AACF;;"}
+{"version":3,"file":"DialogContentInner.js","sources":["../../../src/components/Dialog/DialogContentInner.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../hooks/useHandleEscape'\nimport { dialogSize } from '../../tailwind'\n\nimport { DialogOverlap } from './DialogOverlap'\nimport { FocusTrap, type FocusTrapRef } from './FocusTrap'\nimport { useBodyScrollLock } from './useBodyScrollLock'\n\nimport type { DialogSize } from './types'\n\nexport type DialogContentInnerProps = PropsWithChildren<{\n  /**\n   * オーバーレイをクリックした時に発火するコールバック関数\n   */\n  onClickOverlay?: () => void\n  /**\n   * エスケープキーを押下した時に発火するコールバック関数\n   */\n  onPressEscape?: () => void\n  /**\n   * ダイアログを開いているかどうか\n   */\n  isOpen: boolean\n  /**\n   * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n   * ダイアログの幅\n   */\n  width?: string | number\n  /**\n   * ダイアログの大きさ\n   */\n  size?: DialogSize\n  /**\n   * ダイアログの `id`\n   * TODO 使われてなさそうなので確認\n   */\n  id?: string\n  /**\n   * ダイアログを開いた時にフォーカスする対象\n   */\n  firstFocusTarget?: RefObject<HTMLElement>\n  /**\n   * ダイアログの `aria-label`\n   */\n  ariaLabel?: string\n  /**\n   * ダイアログの `aria-labelledby`\n   */\n  ariaLabelledby?: string\n  /**\n   * ダイアログトップのフォーカストラップへの ref\n   */\n  focusTrapRef?: RefObject<FocusTrapRef>\n}>\ntype Props = DialogContentInnerProps & Omit<ComponentProps<'div'>, keyof DialogContentInnerProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    layout: ['smarthr-ui-Dialog-wrapper', 'shr-max-w-[calc(100dvw-theme(spacing.1))]'],\n    inner: [\n      'smarthr-ui-Dialog',\n      'shr-border-shorthand shr-relative shr-z-1 shr-rounded-m shr-bg-white shr-shadow-layer-3',\n      'contrast-more:shr-border-high-contrast',\n    ],\n    background: ['smarthr-ui-Dialog-background', 'shr-absolute shr-inset-0 shr-bg-scrim'],\n  },\n  variants: {\n    size: {\n      XS: { layout: dialogSize.XS },\n      S: { layout: dialogSize.S },\n      M: { layout: dialogSize.M },\n      L: { layout: dialogSize.L },\n      XL: { layout: dialogSize.XL },\n      XXL: { layout: dialogSize.XXL },\n      FULL: { layout: dialogSize.FULL },\n    },\n  },\n})\n\nexport const DialogContentInner: FC<Props> = ({\n  onClickOverlay,\n  onPressEscape,\n  isOpen,\n  id,\n  width,\n  size,\n  firstFocusTarget,\n  ariaLabel,\n  ariaLabelledby,\n  children,\n  className,\n  focusTrapRef,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { layout, inner, background } = classNameGenerator()\n\n    return {\n      layout: layout({ size }),\n      inner: inner({ className }),\n      background: background(),\n    }\n  }, [size, className])\n  const style = useMemo(() => {\n    // width は deprecated なので、size が指定されている場合は width を無視する\n    const actualWidth = size ? undefined : typeof width === 'number' ? `${width}px` : width\n\n    return actualWidth ? { width: actualWidth } : undefined\n  }, [width, size])\n\n  const innerRef = useRef<HTMLDivElement>(null)\n\n  useHandleEscape(\n    useMemo(() => (onPressEscape && isOpen ? onPressEscape : undefined), [isOpen, onPressEscape]),\n  )\n\n  useBodyScrollLock(isOpen)\n\n  return (\n    <DialogOverlap isOpen={isOpen}>\n      <div id={id} className={classNames.layout} style={style}>\n        <Overlay\n          isOpen={isOpen}\n          onClickOverlay={onClickOverlay}\n          className={classNames.background}\n        />\n        <div\n          {...rest}\n          ref={innerRef}\n          role=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-modal=\"true\"\n          className={classNames.inner}\n        >\n          <FocusTrap firstFocusTarget={firstFocusTarget} ref={focusTrapRef}>\n            {children}\n          </FocusTrap>\n        </div>\n      </div>\n    </DialogOverlap>\n  )\n}\n\nconst Overlay = memo<Pick<Props, 'onClickOverlay' | 'isOpen'> & { className: string }>(\n  ({ onClickOverlay, isOpen, className }) => {\n    const onClick = useMemo(\n      () => (onClickOverlay && isOpen ? onClickOverlay : undefined),\n      [isOpen, onClickOverlay],\n    )\n\n    // eslint-disable-next-line smarthr/best-practice-for-interactive-element\n    return <div onClick={onClick} className={className} role=\"presentation\" />\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAoEA;AACE;AACE;AACA;;;;AAIC;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAEM;AAeL;;;AAII;AACA;;;AAGJ;AACA;;;AAIE;AACF;AAEA;;;AAQA;AAwBF;AAEA;;;AAQI;AACF;;"}

package/lib/components/Dialog/DialogOverlap.cjs

@@ -29,15 +29,32 @@ const classNameGenerator = index.tv({
     ],
 });
 const DialogOverlap = ({ isOpen, className, children, as }) => {
-    const [childrenBuffer, setChildrenBuffer] = React.useState(null);
+    const childrenBufferRef = React.useRef(null);
     const nodeRef = React.useRef(null);
     const actualClassName = React.useMemo(() => classNameGenerator({ className }), [className]);
+    // childrenをrefに保存（毎レンダリング時に最新の値を設定）
+    const childrenRef = React.useRef(children);
+    childrenRef.current = children;
     React.useEffect(() => {
-        if (isOpen) {
-            setChildrenBuffer(children);
+        if (!isOpen || !nodeRef.current) {
+            return;
         }
-    }, [isOpen, children]);
-    return (jsxRuntime.jsx(CSSTransition, { nodeRef: nodeRef, in: isOpen, timeout: 300, unmountOnExit: true, classNames: "shr-dialog-transition", children: jsxRuntime.jsx(components_Layout_Center_Center.Center, { ref: nodeRef, verticalCentering: true, className: actualClassName, as: as, children: isOpen ? children : childrenBuffer }) }));
+        // isOpen が true になった時に初期値を設定
+        childrenBufferRef.current = childrenRef.current;
+        // MutationObserver で DOM の変更を監視
+        const observer = new MutationObserver(() => {
+            childrenBufferRef.current = childrenRef.current;
+        });
+        observer.observe(nodeRef.current, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [isOpen]);
+    return (jsxRuntime.jsx(CSSTransition, { nodeRef: nodeRef, in: isOpen, timeout: 300, unmountOnExit: true, classNames: "shr-dialog-transition", children: jsxRuntime.jsx(components_Layout_Center_Center.Center, { ref: nodeRef, verticalCentering: true, className: actualClassName, as: as, children: isOpen ? children : childrenBufferRef.current }) }));
 };
 
 exports.DialogOverlap = DialogOverlap;

package/lib/components/Dialog/DialogOverlap.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogOverlap.cjs","sources":["../../../src/components/Dialog/DialogOverlap.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { CSSTransition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { Center } from '../Layout'\n\ntype Props = PropsWithChildren<\n  {\n    isOpen: boolean\n    as?: ComponentProps<typeof Center>['as']\n  } & ComponentProps<'div'>\n>\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-fixed shr-inset-0 shr-z-overlap-base',\n    '[&.shr-dialog-transition-enter]:shr-opacity-0',\n    '[&.shr-dialog-transition-enter-active]:shr-transition-opacity',\n    '[&.shr-dialog-transition-enter-active]:shr-duration-300',\n    '[&.shr-dialog-transition-enter-active]:shr-ease-in-out',\n    // enter と enter-active は同時に付与されるので、enter-active を強める\n    '[&&.shr-dialog-transition-enter-active]:shr-opacity-100',\n    '[&.shr-dialog-transition-exit]:shr-opacity-100',\n    '[&.shr-dialog-transition-exit-active]:shr-transition-opacity',\n    '[&.shr-dialog-transition-exit-active]:shr-duration-300',\n    '[&.shr-dialog-transition-exit-active]:shr-ease-in-out',\n    // exit と exit-active は同時に付与されるので、exit-active を強める\n    '[&&.shr-dialog-transition-exit-active]:shr-opacity-0',\n  ],\n})\n\nexport const DialogOverlap: FC<Props> = ({ isOpen, className, children, as }) => {\n  const [childrenBuffer, setChildrenBuffer] = useState<ReactNode>(null)\n  const nodeRef = useRef<HTMLDivElement>(null)\n\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  useEffect(() => {\n    if (isOpen) {\n      setChildrenBuffer(children)\n    }\n  }, [isOpen, children])\n\n  return (\n    <CSSTransition\n      nodeRef={nodeRef}\n      in={isOpen}\n      timeout={300}\n      unmountOnExit\n      classNames=\"shr-dialog-transition\"\n    >\n      <Center ref={nodeRef} verticalCentering className={actualClassName} as={as}>\n        {isOpen ? children : childrenBuffer}\n      </Center>\n    </CSSTransition>\n  )\n}\n"],"names":["tv","useState","useRef","useMemo","useEffect","_jsx","Center"],"mappings":";;;;;;;;;;;;;AAsBA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,0CAA0C;QAC1C,+CAA+C;QAC/C,+DAA+D;QAC/D,yDAAyD;QACzD,wDAAwD;;QAExD,yDAAyD;QACzD,gDAAgD;QAChD,8DAA8D;QAC9D,wDAAwD;QACxD,uDAAuD;;QAEvD,sDAAsD;AACvD,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,aAAa,GAAc,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAI;IAC9E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGC,cAAQ,CAAY,IAAI,CAAC;AACrE,IAAA,MAAM,OAAO,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAE5C,IAAA,MAAM,eAAe,GAAGC,aAAO,CAAC,MAAM,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAErFC,eAAS,CAAC,MAAK;QACb,IAAI,MAAM,EAAE;YACV,iBAAiB,CAAC,QAAQ,CAAC;QAC7B;AACF,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAEtB,QACEC,eAAC,aAAa,EAAA,EACZ,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,GAAG,EACZ,aAAa,EAAA,IAAA,EACb,UAAU,EAAC,uBAAuB,EAAA,QAAA,EAElCA,cAAA,CAACC,sCAAM,EAAA,EAAC,GAAG,EAAE,OAAO,EAAE,iBAAiB,EAAA,IAAA,EAAC,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE,EAAE,EAAA,QAAA,EACvE,MAAM,GAAG,QAAQ,GAAG,cAAc,EAAA,CAC5B,EAAA,CACK;AAEpB;;;;"}
+{"version":3,"file":"DialogOverlap.cjs","sources":["../../../src/components/Dialog/DialogOverlap.tsx"],"sourcesContent":["import {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport { CSSTransition } from 'react-transition-group'\nimport { tv } from 'tailwind-variants'\n\nimport { Center } from '../Layout'\n\ntype Props = PropsWithChildren<\n  {\n    isOpen: boolean\n    as?: ComponentProps<typeof Center>['as']\n  } & ComponentProps<'div'>\n>\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-fixed shr-inset-0 shr-z-overlap-base',\n    '[&.shr-dialog-transition-enter]:shr-opacity-0',\n    '[&.shr-dialog-transition-enter-active]:shr-transition-opacity',\n    '[&.shr-dialog-transition-enter-active]:shr-duration-300',\n    '[&.shr-dialog-transition-enter-active]:shr-ease-in-out',\n    // enter と enter-active は同時に付与されるので、enter-active を強める\n    '[&&.shr-dialog-transition-enter-active]:shr-opacity-100',\n    '[&.shr-dialog-transition-exit]:shr-opacity-100',\n    '[&.shr-dialog-transition-exit-active]:shr-transition-opacity',\n    '[&.shr-dialog-transition-exit-active]:shr-duration-300',\n    '[&.shr-dialog-transition-exit-active]:shr-ease-in-out',\n    // exit と exit-active は同時に付与されるので、exit-active を強める\n    '[&&.shr-dialog-transition-exit-active]:shr-opacity-0',\n  ],\n})\n\nexport const DialogOverlap: FC<Props> = ({ isOpen, className, children, as }) => {\n  const childrenBufferRef = useRef<ReactNode>(null)\n  const nodeRef = useRef<HTMLDivElement>(null)\n\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  // childrenをrefに保存（毎レンダリング時に最新の値を設定）\n  const childrenRef = useRef(children)\n  childrenRef.current = children\n\n  useEffect(() => {\n    if (!isOpen || !nodeRef.current) {\n      return\n    }\n\n    // isOpen が true になった時に初期値を設定\n    childrenBufferRef.current = childrenRef.current\n\n    // MutationObserver で DOM の変更を監視\n    const observer = new MutationObserver(() => {\n      childrenBufferRef.current = childrenRef.current\n    })\n\n    observer.observe(nodeRef.current, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    })\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [isOpen])\n\n  return (\n    <CSSTransition\n      nodeRef={nodeRef}\n      in={isOpen}\n      timeout={300}\n      unmountOnExit\n      classNames=\"shr-dialog-transition\"\n    >\n      <Center ref={nodeRef} verticalCentering className={actualClassName} as={as}>\n        {isOpen ? children : childrenBufferRef.current}\n      </Center>\n    </CSSTransition>\n  )\n}\n"],"names":["tv","useRef","useMemo","useEffect","_jsx","Center"],"mappings":";;;;;;;;;;;;;AAqBA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,0CAA0C;QAC1C,+CAA+C;QAC/C,+DAA+D;QAC/D,yDAAyD;QACzD,wDAAwD;;QAExD,yDAAyD;QACzD,gDAAgD;QAChD,8DAA8D;QAC9D,wDAAwD;QACxD,uDAAuD;;QAEvD,sDAAsD;AACvD,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,aAAa,GAAc,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAI;AAC9E,IAAA,MAAM,iBAAiB,GAAGC,YAAM,CAAY,IAAI,CAAC;AACjD,IAAA,MAAM,OAAO,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAE5C,IAAA,MAAM,eAAe,GAAGC,aAAO,CAAC,MAAM,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;;AAGrF,IAAA,MAAM,WAAW,GAAGD,YAAM,CAAC,QAAQ,CAAC;AACpC,IAAA,WAAW,CAAC,OAAO,GAAG,QAAQ;IAE9BE,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;YAC/B;QACF;;AAGA,QAAA,iBAAiB,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO;;AAG/C,QAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;AACzC,YAAA,iBAAiB,CAAC,OAAO,GAAG,WAAW,CAAC,OAAO;AACjD,QAAA,CAAC,CAAC;AAEF,QAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,EAAE;AAChC,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,aAAa,EAAE,IAAI;AACpB,SAAA,CAAC;AAEF,QAAA,OAAO,MAAK;YACV,QAAQ,CAAC,UAAU,EAAE;AACvB,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IAEZ,QACEC,cAAA,CAAC,aAAa,EAAA,EACZ,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,GAAG,EACZ,aAAa,EAAA,IAAA,EACb,UAAU,EAAC,uBAAuB,EAAA,QAAA,EAElCA,cAAA,CAACC,sCAAM,EAAA,EAAC,GAAG,EAAE,OAAO,EAAE,iBAAiB,EAAA,IAAA,EAAC,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE,EAAE,EAAA,QAAA,EACvE,MAAM,GAAG,QAAQ,GAAG,iBAAiB,CAAC,OAAO,EAAA,CACvC,EAAA,CACK;AAEpB;;;;"}

package/lib/components/Dialog/DialogOverlap.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useMemo, useEffect } from 'react';
+import { useRef, 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 '../Layout/Stack/Stack.js';
 import '../Layout/Cluster/Cluster.js';
@@ -27,15 +27,32 @@ const classNameGenerator = ce({
     ],
 });
 const DialogOverlap = ({ isOpen, className, children, as }) => {
-    const [childrenBuffer, setChildrenBuffer] = useState(null);
+    const childrenBufferRef = useRef(null);
     const nodeRef = useRef(null);
     const actualClassName = useMemo(() => classNameGenerator({ className }), [className]);
+    // childrenをrefに保存（毎レンダリング時に最新の値を設定）
+    const childrenRef = useRef(children);
+    childrenRef.current = children;
     useEffect(() => {
-        if (isOpen) {
-            setChildrenBuffer(children);
+        if (!isOpen || !nodeRef.current) {
+            return;
         }
-    }, [isOpen, children]);
-    return (jsx(CSSTransition, { nodeRef: nodeRef, in: isOpen, timeout: 300, unmountOnExit: true, classNames: "shr-dialog-transition", children: jsx(Center, { ref: nodeRef, verticalCentering: true, className: actualClassName, as: as, children: isOpen ? children : childrenBuffer }) }));
+        // isOpen が true になった時に初期値を設定
+        childrenBufferRef.current = childrenRef.current;
+        // MutationObserver で DOM の変更を監視
+        const observer = new MutationObserver(() => {
+            childrenBufferRef.current = childrenRef.current;
+        });
+        observer.observe(nodeRef.current, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, [isOpen]);
+    return (jsx(CSSTransition, { nodeRef: nodeRef, in: isOpen, timeout: 300, unmountOnExit: true, classNames: "shr-dialog-transition", children: jsx(Center, { ref: nodeRef, verticalCentering: true, className: actualClassName, as: as, children: isOpen ? children : childrenBufferRef.current }) }));
 };
 
 export { DialogOverlap };