smarthr-ui 78.1.0 → 79.0.0

package/esm/_virtual/cjs.js

@@ -1,5 +1,5 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireCjs } from './../vendor/.pnpm/react-draggable@4.5.0_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-draggable/build/cjs/cjs.js';
+import { __require as requireCjs } from './../vendor/.pnpm/react-draggable@4.5.0_react-dom@19.2.0_react@19.2.0__react@19.2.0/vendor/react-draggable/build/cjs/cjs.js';
 
 var cjsExports = requireCjs();
 var Draggable = /*@__PURE__*/getDefaultExportFromCjs(cjsExports);

package/esm/_virtual/index.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.26_react@19.1.1/vendor/react-innertext/index.js';
+import { __require as requireLodash_merge } from './../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.js';
 
-var reactInnertextExports = requireReactInnertext();
-var innerText = /*@__PURE__*/getDefaultExportFromCjs(reactInnertextExports);
+var lodash_mergeExports = requireLodash_merge();
+var _merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
 
-export { innerText as default };
+export { _merge as default };
 //# sourceMappingURL=index.js.map

package/esm/_virtual/index2.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireLodash_merge } from './../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.js';
+import { __require as requireLodash_range } from './../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.js';
 
-var lodash_mergeExports = requireLodash_merge();
-var _merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
+var lodash_rangeExports = requireLodash_range();
+var _range = /*@__PURE__*/getDefaultExportFromCjs(lodash_rangeExports);
 
-export { _merge as default };
+export { _range as default };
 //# sourceMappingURL=index2.js.map

package/esm/_virtual/index3.js

@@ -1,8 +1,8 @@
 import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
-import { __require as requireLodash_range } from './../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.js';
+import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.26_react@19.2.0/vendor/react-innertext/index.js';
 
-var lodash_rangeExports = requireLodash_range();
-var _range = /*@__PURE__*/getDefaultExportFromCjs(lodash_rangeExports);
+var reactInnertextExports = requireReactInnertext();
+var innerText = /*@__PURE__*/getDefaultExportFromCjs(reactInnertextExports);
 
-export { _range as default };
+export { innerText as default };
 //# sourceMappingURL=index3.js.map

package/esm/components/AccordionPanel/AccordionPanelContent.js

@@ -5,7 +5,7 @@ import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindc
 import { getIsInclude } from '../../libs/map.js';
 import { AccordionPanelContext } from './AccordionPanel.js';
 import { AccordionPanelItemContext } from './AccordionPanelItem.js';
-import Transition from './../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-transition-group/esm/Transition.js';
+import Transition from './../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.2.0_react@19.2.0__react@19.2.0/vendor/react-transition-group/esm/Transition.js';
 
 const classNameGenerator = ce({
     base: [

package/esm/components/AppHeader/components/mobile/MenuDialog.js

@@ -25,7 +25,7 @@ import { Navigation } from './Navigation.js';
 import { NavigationContext } from './NavigationContext.js';
 import { ReleaseNote } from './ReleaseNote.js';
 import { ReleaseNoteContext } from './ReleaseNoteContext.js';
-import CSSTransition from './../../../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-transition-group/esm/CSSTransition.js';
+import CSSTransition from './../../../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.2.0_react@19.2.0__react@19.2.0/vendor/react-transition-group/esm/CSSTransition.js';
 
 const classNameGenerator = ce({
     slots: {

package/esm/components/Button/AnchorButton.d.ts

@@ -1,12 +1,12 @@
 import { type ComponentPropsWithoutRef, type ElementType, type FC } from 'react';
 import type { BaseProps } from './types';
 import type { ElementRefProps } from '../../types';
-type AnchorButtonVariant = Exclude<BaseProps['variant'], 'tertiary'>;
 type ElementProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, keyof Props<T> & ElementRefProps<T>>;
-type Props<T extends ElementType> = Omit<BaseProps, 'variant'> & {
+type Props<T extends ElementType> = Omit<BaseProps, 'variant' | 'disabledReason'> & {
     /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */
     elementAs?: T;
-    variant?: AnchorButtonVariant;
+    variant?: Exclude<BaseProps['variant'], 'tertiary'>;
+    inactiveReason?: BaseProps['disabledReason'];
 };
 type AnchorButtonType = <T extends ElementType = 'a'>(props: Props<T> & ElementProps<T> & ElementRefProps<T>) => ReturnType<FC>;
 declare const ForwardedAnchorButton: AnchorButtonType & {

package/esm/components/Button/AnchorButton.js

@@ -4,12 +4,12 @@ import { forwardRef, useMemo } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.18_ts-node@10.9.2_@swc_core@1.13.5_@types_node@20.19.20_typescript@5.8.3__/vendor/tailwind-variants/dist/index.js';
 import { OpenInNewTabIcon } from '../OpenInNewTabIcon/OpenInNewTabIcon.js';
 import { ButtonWrapper } from './ButtonWrapper.js';
-import { DisabledDetail } from './DisabledDetail.js';
+import { DisabledReason } from './DisabledReason.js';
 
 const classNameGenerator = ce({
     base: 'smarthr-ui-AnchorButton',
 });
-const AnchorButton = forwardRef(({ size = 'default', prefix, suffix, wide = false, variant = 'secondary', disabledDetail, target, rel, elementAs, className, children, ...props }, ref) => {
+const AnchorButton = forwardRef(({ size = 'default', prefix, suffix, wide = false, variant = 'secondary', inactiveReason, target, rel, elementAs, className, children, ...props }, ref) => {
     const actualClassName = useMemo(() => classNameGenerator({ className }), [className]);
     const actualSuffix = useMemo(() => {
         if (target === '_blank' && !prefix && !suffix) {
@@ -18,8 +18,8 @@ const AnchorButton = forwardRef(({ size = 'default', prefix, suffix, wide = fals
         return suffix;
     }, [prefix, suffix, target]);
     const button = (jsx(ButtonWrapper, { ...props, size: size, wide: wide, variant: variant, className: actualClassName, target: target, rel: rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel, isAnchor: true, anchorRef: ref, elementAs: elementAs, prefix: prefix, suffix: actualSuffix, children: children }));
-    if (!props.href && disabledDetail) {
-        return jsx(DisabledDetail, { button: button, disabledDetail: disabledDetail });
+    if (!props.href && inactiveReason) {
+        return jsx(DisabledReason, { button: button, disabledReason: inactiveReason });
     }
     return button;
 });

package/esm/components/Button/AnchorButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnchorButton.js","sources":["../../../src/components/Button/AnchorButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type PropsWithoutRef,\n  type ReactElement,\n  type Ref,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { OpenInNewTabIcon } from '../OpenInNewTabIcon'\n\nimport { ButtonWrapper } from './ButtonWrapper'\nimport { DisabledDetail } from './DisabledDetail'\n\nimport type { BaseProps } from './types'\nimport type { ElementRef, ElementRefProps } from '../../types'\n\n// tertiaryはAnchorButtonでは使用不可\ntype AnchorButtonVariant = Exclude<BaseProps['variant'], 'tertiary'>\n\ntype ElementProps<T extends ElementType> = Omit<\n  ComponentPropsWithoutRef<T>,\n  keyof Props<T> & ElementRefProps<T>\n>\n\ntype Props<T extends ElementType> = Omit<BaseProps, 'variant'> & {\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n  variant?: AnchorButtonVariant\n}\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AnchorButton',\n})\n\nconst AnchorButton = forwardRef(\n  <T extends ElementType = 'a'>(\n    {\n      size = 'default',\n      prefix,\n      suffix,\n      wide = false,\n      variant = 'secondary',\n      disabledDetail,\n      target,\n      rel,\n      elementAs,\n      className,\n      children,\n      ...props\n    }: PropsWithoutRef<Props<T>> & ElementProps<T>,\n    ref: Ref<ElementRef<T>>,\n  ): ReactElement => {\n    const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n    const actualSuffix = useMemo(() => {\n      if (target === '_blank' && !prefix && !suffix) {\n        return <OpenInNewTabIcon />\n      }\n\n      return suffix\n    }, [prefix, suffix, target])\n\n    const button = (\n      <ButtonWrapper\n        {...props}\n        size={size}\n        wide={wide}\n        variant={variant}\n        className={actualClassName}\n        target={target}\n        rel={rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel}\n        isAnchor\n        anchorRef={ref}\n        elementAs={elementAs}\n        prefix={prefix}\n        suffix={actualSuffix}\n      >\n        {children}\n      </ButtonWrapper>\n    )\n\n    if (!props.href && disabledDetail) {\n      return <DisabledDetail button={button} disabledDetail={disabledDetail} />\n    }\n\n    return button\n  },\n)\n\n// 型キャストなしで ForwardRefExoticComponent に合わせた型をエクスポートするための処理\ntype AnchorButtonType = <T extends ElementType = 'a'>(\n  props: Props<T> & ElementProps<T> & ElementRefProps<T>,\n) => ReturnType<FC>\n\nconst ForwardedAnchorButton = AnchorButton as unknown as AnchorButtonType & {\n  displayName: string\n}\n\n// BottomFixedArea での判定に用いるために displayName を明示的に設定する\nForwardedAnchorButton.displayName = 'AnchorButton'\n\nexport { ForwardedAnchorButton as AnchorButton }\n"],"names":[],"mappings":";;;;;;;;AAoCA;AACE;AACD;AAED;AAkBI;AAEA;;;;AAKE;;AAGF;AAmBA;;;AAIA;AACF;AAQF;AAIA;AACA;;"}
+{"version":3,"file":"AnchorButton.js","sources":["../../../src/components/Button/AnchorButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type PropsWithoutRef,\n  type ReactElement,\n  type Ref,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { OpenInNewTabIcon } from '../OpenInNewTabIcon'\n\nimport { ButtonWrapper } from './ButtonWrapper'\nimport { DisabledReason } from './DisabledReason'\n\nimport type { BaseProps } from './types'\nimport type { ElementRef, ElementRefProps } from '../../types'\n\ntype ElementProps<T extends ElementType> = Omit<\n  ComponentPropsWithoutRef<T>,\n  keyof Props<T> & ElementRefProps<T>\n>\n\ntype Props<T extends ElementType> = Omit<BaseProps, 'variant' | 'disabledReason'> & {\n  /** next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n  // tertiaryはAnchorButtonでは使用不可\n  variant?: Exclude<BaseProps['variant'], 'tertiary'>\n  inactiveReason?: BaseProps['disabledReason']\n}\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-AnchorButton',\n})\n\nconst AnchorButton = forwardRef(\n  <T extends ElementType = 'a'>(\n    {\n      size = 'default',\n      prefix,\n      suffix,\n      wide = false,\n      variant = 'secondary',\n      inactiveReason,\n      target,\n      rel,\n      elementAs,\n      className,\n      children,\n      ...props\n    }: PropsWithoutRef<Props<T>> & ElementProps<T>,\n    ref: Ref<ElementRef<T>>,\n  ): ReactElement => {\n    const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n    const actualSuffix = useMemo(() => {\n      if (target === '_blank' && !prefix && !suffix) {\n        return <OpenInNewTabIcon />\n      }\n\n      return suffix\n    }, [prefix, suffix, target])\n\n    const button = (\n      <ButtonWrapper\n        {...props}\n        size={size}\n        wide={wide}\n        variant={variant}\n        className={actualClassName}\n        target={target}\n        rel={rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel}\n        isAnchor\n        anchorRef={ref}\n        elementAs={elementAs}\n        prefix={prefix}\n        suffix={actualSuffix}\n      >\n        {children}\n      </ButtonWrapper>\n    )\n\n    if (!props.href && inactiveReason) {\n      return <DisabledReason button={button} disabledReason={inactiveReason} />\n    }\n\n    return button\n  },\n)\n\n// 型キャストなしで ForwardRefExoticComponent に合わせた型をエクスポートするための処理\ntype AnchorButtonType = <T extends ElementType = 'a'>(\n  props: Props<T> & ElementProps<T> & ElementRefProps<T>,\n) => ReturnType<FC>\n\nconst ForwardedAnchorButton = AnchorButton as unknown as AnchorButtonType & {\n  displayName: string\n}\n\n// BottomFixedArea での判定に用いるために displayName を明示的に設定する\nForwardedAnchorButton.displayName = 'AnchorButton'\n\nexport { ForwardedAnchorButton as AnchorButton }\n"],"names":[],"mappings":";;;;;;;;AAmCA;AACE;AACD;AAED;AAkBI;AAEA;;;;AAKE;;AAGF;AAmBA;;;AAIA;AACF;AAQF;AAIA;AACA;;"}

package/esm/components/Button/Button.d.ts

@@ -3,7 +3,7 @@ import type { BaseProps } from './types';
 type ElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps>;
 export declare const Button: import("react").ForwardRefExoticComponent<{
     size?: "default" | "s";
-    disabledDetail?: {
+    disabledReason?: {
         icon?: import("react").FunctionComponent;
         message: import("react").ReactNode;
     };

package/esm/components/Button/Button.js

@@ -8,14 +8,14 @@ import 'react-intl';
 import { Localizer } from '../../intl/Localizer.js';
 import { VisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText.js';
 import { ButtonWrapper } from './ButtonWrapper.js';
-import { DisabledDetail } from './DisabledDetail.js';
+import { DisabledReason } from './DisabledReason.js';
 
 const classNameGenerator = ce({
     slots: {
         wrapper: 'smarthr-ui-Button',
     },
 });
-const Button = forwardRef(({ type = 'button', size = 'default', prefix, suffix, wide = false, variant = 'secondary', disabled, disabledDetail, className, children, loading = false, ...props }, ref) => {
+const Button = forwardRef(({ type = 'button', size = 'default', prefix, suffix, wide = false, variant = 'secondary', disabled, disabledReason, className, children, loading = false, ...props }, ref) => {
     const classNames = useMemo(() => {
         const { wrapper } = classNameGenerator();
         return {
@@ -23,8 +23,8 @@ const Button = forwardRef(({ type = 'button', size = 'default', prefix, suffix,
         };
     }, [className]);
     const button = (jsxs(ButtonWrapper, { ...props, buttonRef: ref, type: type, size: size, wide: wide, variant: variant, className: classNames.wrapper, "$loading": loading, prefix: prefix, suffix: suffix, disabled: disabled, children: [jsx(LoadingStatus, { loading: loading }), children] }));
-    if (disabled && disabledDetail) {
-        return jsx(DisabledDetail, { button: button, disabledDetail: disabledDetail });
+    if (disabled && disabledReason) {
+        return jsx(DisabledReason, { button: button, disabledReason: disabledReason });
     }
     return button;
 });

package/esm/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client'\n\nimport { type ButtonHTMLAttributes, forwardRef, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { usePortal } from '../../hooks/usePortal'\nimport { Localizer } from '../../intl'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { ButtonWrapper } from './ButtonWrapper'\nimport { DisabledDetail } from './DisabledDetail'\n\nimport type { BaseProps } from './types'\n\ntype ElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Button',\n  },\n})\n\nexport const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps>(\n  (\n    {\n      type = 'button',\n      size = 'default',\n      prefix,\n      suffix,\n      wide = false,\n      variant = 'secondary',\n      disabled,\n      disabledDetail,\n      className,\n      children,\n      loading = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNames = useMemo(() => {\n      const { wrapper } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n      }\n    }, [className])\n\n    const button = (\n      <ButtonWrapper\n        {...props}\n        buttonRef={ref}\n        type={type}\n        size={size}\n        wide={wide}\n        variant={variant}\n        className={classNames.wrapper}\n        $loading={loading}\n        prefix={prefix}\n        suffix={suffix}\n        disabled={disabled}\n      >\n        <LoadingStatus loading={loading} />\n        {children}\n      </ButtonWrapper>\n    )\n\n    if (disabled && disabledDetail) {\n      return <DisabledDetail button={button} disabledDetail={disabledDetail} />\n    }\n\n    return button\n  },\n)\n// BottomFixedArea での判定に用いるために displayName を明示的に設定する\nButton.displayName = 'Button'\n\nconst LoadingStatus = memo<{ loading: boolean }>(({ loading }) => {\n  const { createPortal } = usePortal()\n\n  // `button` 要素内で live region を使うことはできないので、`role=\"status\"` を持つ要素を外側に配置している。 https://github.com/kufu/smarthr-ui/pull/4558\n  return createPortal(\n    <VisuallyHiddenText role=\"status\">\n      {loading && <Localizer id=\"smarthr-ui/Button/loading\" defaultText=\"処理中\" />}\n    </VisuallyHiddenText>,\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;AAgBA;AACE;AACE;AACD;AACF;;AAoBG;AACE;;AAGE;;AAEJ;;AAqBA;;;AAIA;AACF;AAEF;AACA;AAEA;AACE;;;AAQF;;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client'\n\nimport { type ButtonHTMLAttributes, forwardRef, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { usePortal } from '../../hooks/usePortal'\nimport { Localizer } from '../../intl'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { ButtonWrapper } from './ButtonWrapper'\nimport { DisabledReason } from './DisabledReason'\n\nimport type { BaseProps } from './types'\n\ntype ElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Button',\n  },\n})\n\nexport const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps>(\n  (\n    {\n      type = 'button',\n      size = 'default',\n      prefix,\n      suffix,\n      wide = false,\n      variant = 'secondary',\n      disabled,\n      disabledReason,\n      className,\n      children,\n      loading = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const classNames = useMemo(() => {\n      const { wrapper } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n      }\n    }, [className])\n\n    const button = (\n      <ButtonWrapper\n        {...props}\n        buttonRef={ref}\n        type={type}\n        size={size}\n        wide={wide}\n        variant={variant}\n        className={classNames.wrapper}\n        $loading={loading}\n        prefix={prefix}\n        suffix={suffix}\n        disabled={disabled}\n      >\n        <LoadingStatus loading={loading} />\n        {children}\n      </ButtonWrapper>\n    )\n\n    if (disabled && disabledReason) {\n      return <DisabledReason button={button} disabledReason={disabledReason} />\n    }\n\n    return button\n  },\n)\n// BottomFixedArea での判定に用いるために displayName を明示的に設定する\nButton.displayName = 'Button'\n\nconst LoadingStatus = memo<{ loading: boolean }>(({ loading }) => {\n  const { createPortal } = usePortal()\n\n  // `button` 要素内で live region を使うことはできないので、`role=\"status\"` を持つ要素を外側に配置している。 https://github.com/kufu/smarthr-ui/pull/4558\n  return createPortal(\n    <VisuallyHiddenText role=\"status\">\n      {loading && <Localizer id=\"smarthr-ui/Button/loading\" defaultText=\"処理中\" />}\n    </VisuallyHiddenText>,\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;AAgBA;AACE;AACE;AACD;AACF;;AAoBG;AACE;;AAGE;;AAEJ;;AAqBA;;;AAIA;AACF;AAEF;AACA;AAEA;AACE;;;AAQF;;"}

package/esm/components/Button/{DisabledDetail.d.ts → DisabledReason.d.ts}

@@ -1,10 +1,10 @@
 import { type FC, type FunctionComponent, type JSX, type ReactNode } from 'react';
 type Props = {
     button: JSX.Element;
-    disabledDetail: {
+    disabledReason: {
         icon?: FunctionComponent;
         message: ReactNode;
     };
 };
-export declare const DisabledDetail: FC<Props>;
+export declare const DisabledReason: FC<Props>;
 export {};

package/esm/components/Button/{DisabledDetail.js → DisabledReason.js}

@@ -19,7 +19,7 @@ const classNameGenerator = ce({
         ],
     },
 });
-const DisabledDetail = ({ button, disabledDetail }) => {
+const DisabledReason = ({ button, disabledReason }) => {
     const classNames = useMemo(() => {
         const { wrapper, tooltip } = classNameGenerator();
         return {
@@ -27,12 +27,12 @@ const DisabledDetail = ({ button, disabledDetail }) => {
             tooltip: tooltip(),
         };
     }, []);
-    return (jsxs("div", { className: classNames.wrapper, children: [button, jsx(TooltipIcon, { icon: disabledDetail.icon, message: disabledDetail.message, className: classNames.tooltip })] }));
+    return (jsxs("div", { className: classNames.wrapper, children: [button, jsx(TooltipIcon, { icon: disabledReason.icon, message: disabledReason.message, className: classNames.tooltip })] }));
 };
 const TooltipIcon = memo(({ icon, message, className }) => {
-    const DisabledDetailIcon = icon ?? FaCircleInfoIcon;
-    return (jsx(Tooltip, { message: message, triggerType: "icon", className: className, children: jsx(DisabledDetailIcon, {}) }));
+    const DisabledReasonIcon = icon ?? FaCircleInfoIcon;
+    return (jsx(Tooltip, { message: message, triggerType: "icon", className: className, children: jsx(DisabledReasonIcon, {}) }));
 });
 
-export { DisabledDetail };
-//# sourceMappingURL=DisabledDetail.js.map
+export { DisabledReason };
+//# sourceMappingURL=DisabledReason.js.map

package/esm/components/Button/{DisabledDetail.js.map → DisabledReason.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DisabledDetail.js","sources":["../../../src/components/Button/DisabledDetail.tsx"],"sourcesContent":["import { type FC, type FunctionComponent, type JSX, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\ntype Props = {\n  button: JSX.Element\n  disabledDetail: {\n    icon?: FunctionComponent\n    message: ReactNode\n  }\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-Button-disabledWrapper', 'shr-inline-flex shr-items-center shr-gap-0.25'],\n    tooltip: [\n      'shr-overflow-y-visible',\n      /* Tooltip との距離を変えずに反応範囲を広げるために negative space を使う */\n      '[&_.smarthr-ui-Icon]:-shr-m-0.25',\n      /* global style��どでborder-boxが適用されている場合表示崩れを起こす為、content-boxを指定する */\n      '[&_.smarthr-ui-Icon]:shr-box-content',\n      '[&_.smarthr-ui-Icon]:shr-p-0.25',\n      '[&_.smarthr-ui-Icon]:shr-text-grey',\n    ],\n  },\n})\n\nexport const DisabledDetail: FC<Props> = ({ button, disabledDetail }) => {\n  const classNames = useMemo(() => {\n    const { wrapper, tooltip } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      tooltip: tooltip(),\n    }\n  }, [])\n\n  return (\n    <div className={classNames.wrapper}>\n      {button}\n      <TooltipIcon\n        icon={disabledDetail.icon}\n        message={disabledDetail.message}\n        className={classNames.tooltip}\n      />\n    </div>\n  )\n}\n\nconst TooltipIcon = memo<{\n  icon?: FunctionComponent\n  message: ReactNode\n  className: string\n}>(({ icon, message, className }) => {\n  const DisabledDetailIcon = icon ?? FaCircleInfoIcon\n\n  return (\n    <Tooltip message={message} triggerType=\"icon\" className={className}>\n      <DisabledDetailIcon />\n    </Tooltip>\n  )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":";;;;;;;AAcA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,CAAC,mCAAmC,EAAE,+CAA+C,CAAC;AAC/F,QAAA,OAAO,EAAE;YACP,wBAAwB;;YAExB,kCAAkC;;YAElC,sCAAsC;YACtC,iCAAiC;YACjC,oCAAoC;AACrC,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,cAAc,GAAc,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,KAAI;AACtE,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;QAC9B,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE;QAEjD,OAAO;YACL,OAAO,EAAE,OAAO,EAAE;YAClB,OAAO,EAAE,OAAO,EAAE;SACnB;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAAA,CAC/B,MAAM,EACPC,GAAA,CAAC,WAAW,EAAA,EACV,IAAI,EAAE,cAAc,CAAC,IAAI,EACzB,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,CAC7B,CAAA,EAAA,CACE;AAEV;AAEA,MAAM,WAAW,GAAG,IAAI,CAIrB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAI;AAClC,IAAA,MAAM,kBAAkB,GAAG,IAAI,IAAI,gBAAgB;IAEnD,QACEA,IAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAA,QAAA,EAChEA,IAAC,kBAAkB,EAAA,EAAA,CAAG,EAAA,CACd;AAEd,CAAC,CAAC;;;;"}
+{"version":3,"file":"DisabledReason.js","sources":["../../../src/components/Button/DisabledReason.tsx"],"sourcesContent":["import { type FC, type FunctionComponent, type JSX, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCircleInfoIcon } from '../Icon'\nimport { Tooltip } from '../Tooltip'\n\ntype Props = {\n  button: JSX.Element\n  disabledReason: {\n    icon?: FunctionComponent\n    message: ReactNode\n  }\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-Button-disabledWrapper', 'shr-inline-flex shr-items-center shr-gap-0.25'],\n    tooltip: [\n      'shr-overflow-y-visible',\n      /* Tooltip との距離を変えずに反応範囲を広げるために negative space を使う */\n      '[&_.smarthr-ui-Icon]:-shr-m-0.25',\n      /* global style��どでborder-boxが適用されている場合表示崩れを起こす為、content-boxを指定する */\n      '[&_.smarthr-ui-Icon]:shr-box-content',\n      '[&_.smarthr-ui-Icon]:shr-p-0.25',\n      '[&_.smarthr-ui-Icon]:shr-text-grey',\n    ],\n  },\n})\n\nexport const DisabledReason: FC<Props> = ({ button, disabledReason }) => {\n  const classNames = useMemo(() => {\n    const { wrapper, tooltip } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      tooltip: tooltip(),\n    }\n  }, [])\n\n  return (\n    <div className={classNames.wrapper}>\n      {button}\n      <TooltipIcon\n        icon={disabledReason.icon}\n        message={disabledReason.message}\n        className={classNames.tooltip}\n      />\n    </div>\n  )\n}\n\nconst TooltipIcon = memo<{\n  icon?: FunctionComponent\n  message: ReactNode\n  className: string\n}>(({ icon, message, className }) => {\n  const DisabledReasonIcon = icon ?? FaCircleInfoIcon\n\n  return (\n    <Tooltip message={message} triggerType=\"icon\" className={className}>\n      <DisabledReasonIcon />\n    </Tooltip>\n  )\n})\n"],"names":["tv","_jsxs","_jsx"],"mappings":";;;;;;;AAcA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,CAAC,mCAAmC,EAAE,+CAA+C,CAAC;AAC/F,QAAA,OAAO,EAAE;YACP,wBAAwB;;YAExB,kCAAkC;;YAElC,sCAAsC;YACtC,iCAAiC;YACjC,oCAAoC;AACrC,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,cAAc,GAAc,CAAC,EAAE,MAAM,EAAE,cAAc,EAAE,KAAI;AACtE,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;QAC9B,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,kBAAkB,EAAE;QAEjD,OAAO;YACL,OAAO,EAAE,OAAO,EAAE;YAClB,OAAO,EAAE,OAAO,EAAE;SACnB;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAAA,CAC/B,MAAM,EACPC,GAAA,CAAC,WAAW,EAAA,EACV,IAAI,EAAE,cAAc,CAAC,IAAI,EACzB,OAAO,EAAE,cAAc,CAAC,OAAO,EAC/B,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,CAC7B,CAAA,EAAA,CACE;AAEV;AAEA,MAAM,WAAW,GAAG,IAAI,CAIrB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAI;AAClC,IAAA,MAAM,kBAAkB,GAAG,IAAI,IAAI,gBAAgB;IAEnD,QACEA,IAAC,OAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAA,QAAA,EAChEA,IAAC,kBAAkB,EAAA,EAAA,CAAG,EAAA,CACd;AAEd,CAAC,CAAC;;;;"}

package/esm/components/Button/types.d.ts

@@ -7,7 +7,7 @@ export type BaseProps = PropsWithChildren<{
     /**
      * 無効な理由
      */
-    disabledDetail?: {
+    disabledReason?: {
         icon?: FunctionComponent;
         message: ReactNode;
     };

package/esm/components/Combobox/MultiCombobox/MultiCombobox.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useMemo, useRef, useState, useCallback, useImperativeHandle, useEffect, useId } from 'react';
-import innerText from '../../../_virtual/index.js';
+import innerText from '../../../_virtual/index3.js';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.18_ts-node@10.9.2_@swc_core@1.13.5_@types_node@20.19.20_typescript@5.8.3__/vendor/tailwind-variants/dist/index.js';
 import { useOuterClick } from '../../../hooks/useOuterClick.js';
 import '../../../intl/IntlProvider.js';

package/esm/components/Combobox/SingleCombobox/SingleCombobox.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useRef, useState, useImperativeHandle, useCallback, useMemo, useEffect } from 'react';
-import innerText from '../../../_virtual/index.js';
+import innerText from '../../../_virtual/index3.js';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.18_ts-node@10.9.2_@swc_core@1.13.5_@types_node@20.19.20_typescript@5.8.3__/vendor/tailwind-variants/dist/index.js';
 import { useClick } from '../../../hooks/useClick.js';
 import { useDecorators } from '../../../hooks/useDecorators.js';
@@ -225,11 +225,11 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
     const decoratorDefaultTexts = useMemo(() => ({
         destroyButtonIconAlt: localize({
             id: 'smarthr-ui/SingleCombobox/destroyButtonIconAlt',
-            defaultText: '削除',
+            defaultText: 'クリア',
         }),
     }), [localize]);
     const decorated = useDecorators(decoratorDefaultTexts, decorators);
-    return (jsxs("div", { className: classNames.wrapper, style: wrapperStyle, ref: outerRef, children: [jsx(Input, { ...rest, ref: inputRef, type: "text", role: "combobox", name: name, value: inputValue, disabled: disabled, readOnly: readOnly, required: required, autoComplete: autoComplete ?? 'off', "aria-haspopup": "listbox", "aria-controls": listBoxId, "aria-expanded": isFocused, "aria-activedescendant": activeOption?.id, "aria-autocomplete": "list", 
+    return (jsxs("div", { role: "group", className: classNames.wrapper, style: wrapperStyle, ref: outerRef, children: [jsx(Input, { ...rest, ref: inputRef, type: "text", role: "combobox", name: name, value: inputValue, disabled: disabled, readOnly: readOnly, required: required, autoComplete: autoComplete ?? 'off', "aria-haspopup": "listbox", "aria-controls": listBoxId, "aria-expanded": isFocused, "aria-activedescendant": activeOption?.id, "aria-autocomplete": "list", 
                 /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */
                 placeholder: placeholder, onClick: onClickInput, onChange: actualOnChangeInput, onFocus: isFocused ? undefined : focus, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, onKeyDown: onKeyDownInput, onKeyPress: handleKeyPress, error: error, prefix: prefix, suffix: jsxs(Fragment, { children: [jsx(UnstyledButton, { onClick: onClickClear, ref: clearButtonRef, className: classNames.clearButton, children: jsx(FaCircleXmarkIcon, { color: "TEXT_BLACK", alt: decorated.destroyButtonIconAlt, className: classNames.clearButtonIcon }) }), jsx("span", { onClick: onClickInput, role: "presentation", className: classNames.caretDownLayout, children: jsx(FaCaretDownIcon, { color: caretIconColor, className: classNames.caretDownIcon }) })] }), className: classNames.input, "data-smarthr-ui-input": "true" }), !readOnly && renderListBox()] }));
 };

package/esm/components/Combobox/SingleCombobox/SingleCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleCombobox.js","sources":["../../../../src/components/Combobox/SingleCombobox/SingleCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useClick } from '../../../hooks/useClick'\nimport { type DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\nimport { useIntl } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { textColor } from '../../../themes'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { BaseProps, ComboboxItem } from '../types'\n\ntype Props<T> = BaseProps<T> & {\n  /**\n   * 選択されているアイテム\n   */\n  selectedItem: ComboboxItem<T> | null\n  /**\n   * デフォルトで選択されるアイテム\n   */\n  defaultItem?: ComboboxItem<T>\n  /**\n   * コンポーネント内の先頭に表示する内容\n   */\n  prefix?: ReactNode\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   */\n  onClear?: () => void\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   * 指定している場合、クリア時にonClickを実行せずにonClearClickのみ実行する\n   */\n  onClearClick?: (e: MouseEvent) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItem: ComboboxItem<T> | null) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  // HINT: useListbox内でnoResultText, loadingTextは実行される\n  /**\n   * コンポーネント内のテキストを変更する関数/\n   */\n  decorators?: DecoratorsType<DecoratorKeyTypes | 'noResultText' | 'loadingText'>\n}\n\ntype ElementProps = Omit<ComponentPropsWithoutRef<'input'>, keyof Props<unknown>>\n\ntype DecoratorKeyTypes = 'destroyButtonIconAlt'\n\nconst NOOP = () => undefined\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_UP_DOWN_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-SingleCombobox shr-inline-block',\n    input: 'smarthr-ui-SingleCombobox-input shr-w-full',\n    caretDownLayout: [\n      'shr-relative -shr-me-0.5 shr-p-0.5',\n      'before:shr-border-0',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    caretDownIcon: 'shr-block',\n    clearButton: [\n      'smarthr-ui-SingleCombobox-clearButton',\n      'shr-group/clearButton',\n      'shr-me-0.5',\n      'focus-visible:shr-shadow-none',\n    ],\n    clearButtonIcon: [\n      'shr-block',\n      'group-focus-visible/clearButton:shr-focus-indicator group-focus-visible/clearButton:shr-rounded-full',\n    ],\n  },\n  variants: {\n    disabled: {\n      true: {\n        wrapper: 'shr-cursor-not-allowed',\n      },\n    },\n    hidden: {\n      true: {\n        clearButton: 'shr-hidden',\n      },\n    },\n  },\n})\n\nconst ActualSingleCombobox = <T,>(\n  {\n    items,\n    selectedItem,\n    defaultItem,\n    name,\n    disabled,\n    readOnly,\n    required,\n    prefix,\n    error,\n    creatable,\n    placeholder,\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    width,\n    dropdownWidth = 'auto',\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    decorators,\n    style,\n    ...rest\n  }: Props<T> & ElementProps,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const { localize } = useIntl()\n  const outerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const clearButtonRef = useRef<HTMLButtonElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current)\n\n  const { options } = useSingleOptions({\n    items,\n    selected: selectedItem,\n    creatable,\n    inputValue,\n    isFilteringDisabled: !isEditing,\n  })\n\n  const { renderListBox, activeOption, onKeyDownListBox, listBoxId, listBoxRef } = useListbox<T>({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: useCallback(\n      (selected: ComboboxItem<T>) => {\n        onSelect?.(selected)\n        onChangeSelected?.(selected)\n\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          setIsExpanded(false)\n        })\n\n        setIsEditing(false)\n      },\n      [onChangeSelected, onSelect],\n    ),\n    isExpanded,\n    isLoading,\n    triggerRef: outerRef,\n    decorators,\n  })\n\n  const selectDefaultItem = useMemo(\n    () => (onSelect && defaultItem ? () => onSelect(defaultItem) : NOOP),\n    [onSelect, defaultItem],\n  )\n\n  const focus = useCallback(() => {\n    onFocus?.()\n    inputRef.current?.focus()\n    setIsFocused(true)\n\n    if (!isFocused) {\n      setIsExpanded(true)\n    }\n  }, [onFocus, isFocused])\n  const unfocus = useCallback(() => {\n    if (!isFocused) return\n\n    onBlur?.()\n\n    setIsFocused(false)\n    setIsExpanded(false)\n    setIsEditing(false)\n\n    if (selectedItem) {\n      setInputValue(innerText(selectedItem.label))\n    } else {\n      selectDefaultItem()\n    }\n  }, [isFocused, onBlur, selectedItem, selectDefaultItem])\n  const onClickClear = useCallback(\n    (e: MouseEvent) => {\n      e.stopPropagation()\n\n      let isExecutedPreventDefault = false\n\n      onClearClick?.({\n        ...e,\n        preventDefault: () => {\n          e.preventDefault()\n          isExecutedPreventDefault = true\n        },\n      })\n\n      if (!isExecutedPreventDefault) {\n        onClear?.()\n        onChangeSelected?.(null)\n\n        inputRef.current?.focus()\n\n        setIsFocused(true)\n        setIsExpanded(true)\n      }\n    },\n    [onClearClick, onClear, onChangeSelected],\n  )\n  const onClickInput = useCallback(\n    (e: MouseEvent) => {\n      if (disabled || readOnly) {\n        e.stopPropagation()\n\n        return\n      }\n\n      inputRef.current?.focus()\n\n      if (!isExpanded) {\n        setIsExpanded(true)\n      }\n    },\n    [disabled, readOnly, inputRef, isExpanded],\n  )\n  const actualOnChangeInput = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e)\n      onChangeInput?.(e)\n\n      if (!isEditing) setIsEditing(true)\n\n      const { value } = e.currentTarget\n\n      setInputValue(value)\n\n      if (value === '') {\n        onClear?.()\n        onChangeSelected?.(null)\n      }\n    },\n    [isEditing, onChange, onChangeInput, onClear, onChangeSelected],\n  )\n  const onCompositionStart = useCallback(() => setIsComposing(true), [])\n  const onCompositionEnd = useCallback(() => setIsComposing(false), [])\n  const onKeyDownInput = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (isComposing) {\n        return\n      }\n\n      if (ESCAPE_KEY_REGEX.test(e.key)) {\n        if (isExpanded) {\n          e.stopPropagation()\n          setIsExpanded(false)\n        }\n      } else if (e.key === 'Tab') {\n        unfocus()\n      } else {\n        if (ARROW_UP_DOWN_REGEX.test(e.key)) {\n          e.preventDefault()\n        }\n\n        inputRef.current?.focus()\n\n        if (!isExpanded) {\n          setIsExpanded(true)\n        }\n      }\n      onKeyDownListBox(e)\n    },\n    [isComposing, isExpanded, unfocus, onKeyDownListBox],\n  )\n\n  // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n  // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n  // submitイベントが発生し、formが送信される場合がある\n  const handleKeyPress = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') e.preventDefault()\n\n      onKeyPress?.(e)\n    },\n    [onKeyPress],\n  )\n\n  const caretIconColor = useMemo(() => {\n    if (isFocused) return textColor.black\n    if (disabled || readOnly) return textColor.disabled\n\n    return textColor.grey\n  }, [disabled, readOnly, isFocused])\n\n  useClick(\n    useMemo(() => [outerRef, listBoxRef, clearButtonRef], [outerRef, listBoxRef, clearButtonRef]),\n    isFocused || selectedItem ? NOOP : selectDefaultItem,\n    unfocus,\n  )\n\n  // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。\n  const selectedItemLabelText = innerText(selectedItem?.label)\n  useEffect(() => {\n    setInputValue(selectedItemLabelText)\n  }, [selectedItemLabelText])\n\n  const wrapperStyle = useMemo(\n    () => ({\n      ...style,\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [style, width],\n  )\n\n  const notSelected = selectedItem === null\n\n  const classNames = useMemo(() => {\n    const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } =\n      classNameGenerator()\n\n    return {\n      wrapper: wrapper({ disabled, className }),\n      input: input(),\n      caretDownLayout: caretDownLayout(),\n      caretDownIcon: caretDownIcon(),\n      clearButton: clearButton({ hidden: notSelected || disabled || readOnly }),\n      clearButtonIcon: clearButtonIcon(),\n    }\n  }, [notSelected, disabled, readOnly, className])\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      destroyButtonIconAlt: localize({\n        id: 'smarthr-ui/SingleCombobox/destroyButtonIconAlt',\n        defaultText: '削除',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators<DecoratorKeyTypes>(decoratorDefaultTexts, decorators)\n\n  return (\n    <div className={classNames.wrapper} style={wrapperStyle} ref={outerRef}>\n      <Input\n        {...rest}\n        ref={inputRef}\n        type=\"text\"\n        role=\"combobox\"\n        name={name}\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        autoComplete={autoComplete ?? 'off'}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        onClick={onClickInput}\n        onChange={actualOnChangeInput}\n        onFocus={isFocused ? undefined : focus}\n        onCompositionStart={onCompositionStart}\n        onCompositionEnd={onCompositionEnd}\n        onKeyDown={onKeyDownInput}\n        onKeyPress={handleKeyPress}\n        error={error}\n        prefix={prefix}\n        suffix={\n          <>\n            <UnstyledButton\n              onClick={onClickClear}\n              ref={clearButtonRef}\n              className={classNames.clearButton}\n            >\n              <FaCircleXmarkIcon\n                color=\"TEXT_BLACK\"\n                alt={decorated.destroyButtonIconAlt}\n                className={classNames.clearButtonIcon}\n              />\n            </UnstyledButton>\n            {/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */}\n            <span onClick={onClickInput} role=\"presentation\" className={classNames.caretDownLayout}>\n              <FaCaretDownIcon color={caretIconColor} className={classNames.caretDownIcon} />\n            </span>\n          </>\n        }\n        className={classNames.input}\n        data-smarthr-ui-input=\"true\"\n      />\n      {!readOnly && renderListBox()}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6EA;AAEA;AACA;AAEA;AACE;AACE;AACA;AACA;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;;;AAGC;AACF;AACD;AACE;AACE;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACF;AACF;AACF;AAED;AAmCE;AACA;AACA;AACA;;;;;;;AASA;;AAEE;;;;AAID;AAED;;;;;AAKE;AAEI;AACA;;;;;AAMA;;AAGF;;;AAKF;;AAED;AAED;AAKA;;AAEE;;;;;AAMF;AACA;AACE;;;;;;;;;;AAWE;;;AAGJ;;;AAMI;AACE;;;;;AAKD;;;AAIC;AAEA;;;;;AAQN;AAEI;;;;AAMA;;;;;AAQJ;AAEI;AACA;AAEA;;AAEA;;AAIA;;AAEE;;AAEJ;AAGF;AACA;AACA;;;;;;;;;;AAWW;AACL;;;;;;AAMA;;;;;;;;;;AAcN;AAEI;;AAEA;AACF;AAIF;AACE;;;;;;AAMF;;;;;AAUA;AAEA;AAEI;AACA;AACD;AAIH;AAEA;AACE;;;;;;AAQE;;;;AAKJ;;AAGM;AACA;;AAEH;;AAMH;;AAmBM;AAmCR;;;"}
+{"version":3,"file":"SingleCombobox.js","sources":["../../../../src/components/Combobox/SingleCombobox/SingleCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useClick } from '../../../hooks/useClick'\nimport { type DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\nimport { useIntl } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { textColor } from '../../../themes'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { BaseProps, ComboboxItem } from '../types'\n\ntype Props<T> = BaseProps<T> & {\n  /**\n   * 選択されているアイテム\n   */\n  selectedItem: ComboboxItem<T> | null\n  /**\n   * デフォルトで選択されるアイテム\n   */\n  defaultItem?: ComboboxItem<T>\n  /**\n   * コンポーネント内の先頭に表示する内容\n   */\n  prefix?: ReactNode\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   */\n  onClear?: () => void\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   * 指定している場合、クリア時にonClickを実行せずにonClearClickのみ実行する\n   */\n  onClearClick?: (e: MouseEvent) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItem: ComboboxItem<T> | null) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  // HINT: useListbox内でnoResultText, loadingTextは実行される\n  /**\n   * コンポーネント内のテキストを変更する関数/\n   */\n  decorators?: DecoratorsType<DecoratorKeyTypes | 'noResultText' | 'loadingText'>\n}\n\ntype ElementProps = Omit<ComponentPropsWithoutRef<'input'>, keyof Props<unknown>>\n\ntype DecoratorKeyTypes = 'destroyButtonIconAlt'\n\nconst NOOP = () => undefined\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_UP_DOWN_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-SingleCombobox shr-inline-block',\n    input: 'smarthr-ui-SingleCombobox-input shr-w-full',\n    caretDownLayout: [\n      'shr-relative -shr-me-0.5 shr-p-0.5',\n      'before:shr-border-0',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    caretDownIcon: 'shr-block',\n    clearButton: [\n      'smarthr-ui-SingleCombobox-clearButton',\n      'shr-group/clearButton',\n      'shr-me-0.5',\n      'focus-visible:shr-shadow-none',\n    ],\n    clearButtonIcon: [\n      'shr-block',\n      'group-focus-visible/clearButton:shr-focus-indicator group-focus-visible/clearButton:shr-rounded-full',\n    ],\n  },\n  variants: {\n    disabled: {\n      true: {\n        wrapper: 'shr-cursor-not-allowed',\n      },\n    },\n    hidden: {\n      true: {\n        clearButton: 'shr-hidden',\n      },\n    },\n  },\n})\n\nconst ActualSingleCombobox = <T,>(\n  {\n    items,\n    selectedItem,\n    defaultItem,\n    name,\n    disabled,\n    readOnly,\n    required,\n    prefix,\n    error,\n    creatable,\n    placeholder,\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    width,\n    dropdownWidth = 'auto',\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    decorators,\n    style,\n    ...rest\n  }: Props<T> & ElementProps,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const { localize } = useIntl()\n  const outerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const clearButtonRef = useRef<HTMLButtonElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current)\n\n  const { options } = useSingleOptions({\n    items,\n    selected: selectedItem,\n    creatable,\n    inputValue,\n    isFilteringDisabled: !isEditing,\n  })\n\n  const { renderListBox, activeOption, onKeyDownListBox, listBoxId, listBoxRef } = useListbox<T>({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: useCallback(\n      (selected: ComboboxItem<T>) => {\n        onSelect?.(selected)\n        onChangeSelected?.(selected)\n\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          setIsExpanded(false)\n        })\n\n        setIsEditing(false)\n      },\n      [onChangeSelected, onSelect],\n    ),\n    isExpanded,\n    isLoading,\n    triggerRef: outerRef,\n    decorators,\n  })\n\n  const selectDefaultItem = useMemo(\n    () => (onSelect && defaultItem ? () => onSelect(defaultItem) : NOOP),\n    [onSelect, defaultItem],\n  )\n\n  const focus = useCallback(() => {\n    onFocus?.()\n    inputRef.current?.focus()\n    setIsFocused(true)\n\n    if (!isFocused) {\n      setIsExpanded(true)\n    }\n  }, [onFocus, isFocused])\n  const unfocus = useCallback(() => {\n    if (!isFocused) return\n\n    onBlur?.()\n\n    setIsFocused(false)\n    setIsExpanded(false)\n    setIsEditing(false)\n\n    if (selectedItem) {\n      setInputValue(innerText(selectedItem.label))\n    } else {\n      selectDefaultItem()\n    }\n  }, [isFocused, onBlur, selectedItem, selectDefaultItem])\n  const onClickClear = useCallback(\n    (e: MouseEvent) => {\n      e.stopPropagation()\n\n      let isExecutedPreventDefault = false\n\n      onClearClick?.({\n        ...e,\n        preventDefault: () => {\n          e.preventDefault()\n          isExecutedPreventDefault = true\n        },\n      })\n\n      if (!isExecutedPreventDefault) {\n        onClear?.()\n        onChangeSelected?.(null)\n\n        inputRef.current?.focus()\n\n        setIsFocused(true)\n        setIsExpanded(true)\n      }\n    },\n    [onClearClick, onClear, onChangeSelected],\n  )\n  const onClickInput = useCallback(\n    (e: MouseEvent) => {\n      if (disabled || readOnly) {\n        e.stopPropagation()\n\n        return\n      }\n\n      inputRef.current?.focus()\n\n      if (!isExpanded) {\n        setIsExpanded(true)\n      }\n    },\n    [disabled, readOnly, inputRef, isExpanded],\n  )\n  const actualOnChangeInput = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e)\n      onChangeInput?.(e)\n\n      if (!isEditing) setIsEditing(true)\n\n      const { value } = e.currentTarget\n\n      setInputValue(value)\n\n      if (value === '') {\n        onClear?.()\n        onChangeSelected?.(null)\n      }\n    },\n    [isEditing, onChange, onChangeInput, onClear, onChangeSelected],\n  )\n  const onCompositionStart = useCallback(() => setIsComposing(true), [])\n  const onCompositionEnd = useCallback(() => setIsComposing(false), [])\n  const onKeyDownInput = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (isComposing) {\n        return\n      }\n\n      if (ESCAPE_KEY_REGEX.test(e.key)) {\n        if (isExpanded) {\n          e.stopPropagation()\n          setIsExpanded(false)\n        }\n      } else if (e.key === 'Tab') {\n        unfocus()\n      } else {\n        if (ARROW_UP_DOWN_REGEX.test(e.key)) {\n          e.preventDefault()\n        }\n\n        inputRef.current?.focus()\n\n        if (!isExpanded) {\n          setIsExpanded(true)\n        }\n      }\n      onKeyDownListBox(e)\n    },\n    [isComposing, isExpanded, unfocus, onKeyDownListBox],\n  )\n\n  // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n  // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n  // submitイベントが発生し、formが送信される場合がある\n  const handleKeyPress = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') e.preventDefault()\n\n      onKeyPress?.(e)\n    },\n    [onKeyPress],\n  )\n\n  const caretIconColor = useMemo(() => {\n    if (isFocused) return textColor.black\n    if (disabled || readOnly) return textColor.disabled\n\n    return textColor.grey\n  }, [disabled, readOnly, isFocused])\n\n  useClick(\n    useMemo(() => [outerRef, listBoxRef, clearButtonRef], [outerRef, listBoxRef, clearButtonRef]),\n    isFocused || selectedItem ? NOOP : selectDefaultItem,\n    unfocus,\n  )\n\n  // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。\n  const selectedItemLabelText = innerText(selectedItem?.label)\n  useEffect(() => {\n    setInputValue(selectedItemLabelText)\n  }, [selectedItemLabelText])\n\n  const wrapperStyle = useMemo(\n    () => ({\n      ...style,\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [style, width],\n  )\n\n  const notSelected = selectedItem === null\n\n  const classNames = useMemo(() => {\n    const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } =\n      classNameGenerator()\n\n    return {\n      wrapper: wrapper({ disabled, className }),\n      input: input(),\n      caretDownLayout: caretDownLayout(),\n      caretDownIcon: caretDownIcon(),\n      clearButton: clearButton({ hidden: notSelected || disabled || readOnly }),\n      clearButtonIcon: clearButtonIcon(),\n    }\n  }, [notSelected, disabled, readOnly, className])\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      destroyButtonIconAlt: localize({\n        id: 'smarthr-ui/SingleCombobox/destroyButtonIconAlt',\n        defaultText: 'クリア',\n      }),\n    }),\n    [localize],\n  )\n\n  const decorated = useDecorators<DecoratorKeyTypes>(decoratorDefaultTexts, decorators)\n\n  return (\n    <div role=\"group\" className={classNames.wrapper} style={wrapperStyle} ref={outerRef}>\n      <Input\n        {...rest}\n        ref={inputRef}\n        type=\"text\"\n        role=\"combobox\"\n        name={name}\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        autoComplete={autoComplete ?? 'off'}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        onClick={onClickInput}\n        onChange={actualOnChangeInput}\n        onFocus={isFocused ? undefined : focus}\n        onCompositionStart={onCompositionStart}\n        onCompositionEnd={onCompositionEnd}\n        onKeyDown={onKeyDownInput}\n        onKeyPress={handleKeyPress}\n        error={error}\n        prefix={prefix}\n        suffix={\n          <>\n            <UnstyledButton\n              onClick={onClickClear}\n              ref={clearButtonRef}\n              className={classNames.clearButton}\n            >\n              <FaCircleXmarkIcon\n                color=\"TEXT_BLACK\"\n                alt={decorated.destroyButtonIconAlt}\n                className={classNames.clearButtonIcon}\n              />\n            </UnstyledButton>\n            {/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */}\n            <span onClick={onClickInput} role=\"presentation\" className={classNames.caretDownLayout}>\n              <FaCaretDownIcon color={caretIconColor} className={classNames.caretDownIcon} />\n            </span>\n          </>\n        }\n        className={classNames.input}\n        data-smarthr-ui-input=\"true\"\n      />\n      {!readOnly && renderListBox()}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6EA;AAEA;AACA;AAEA;AACE;AACE;AACA;AACA;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;;;AAGC;AACF;AACD;AACE;AACE;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACF;AACF;AACF;AAED;AAmCE;AACA;AACA;AACA;;;;;;;AASA;;AAEE;;;;AAID;AAED;;;;;AAKE;AAEI;AACA;;;;;AAMA;;AAGF;;;AAKF;;AAED;AAED;AAKA;;AAEE;;;;;AAMF;AACA;AACE;;;;;;;;;;AAWE;;;AAGJ;;;AAMI;AACE;;;;;AAKD;;;AAIC;AAEA;;;;;AAQN;AAEI;;;;AAMA;;;;;AAQJ;AAEI;AACA;AAEA;;AAEA;;AAIA;;AAEE;;AAEJ;AAGF;AACA;AACA;;;;;;;;;;AAWW;AACL;;;;;;AAMA;;;;;;;;;;AAcN;AAEI;;AAEA;AACF;AAIF;AACE;;;;;;AAMF;;;;;AAUA;AAEA;AAEI;AACA;AACD;AAIH;AAEA;AACE;;;;;;AAQE;;;;AAKJ;;AAGM;AACA;;AAEH;;AAMH;;AAmBM;AAmCR;;;"}

package/esm/components/Combobox/helper.js

@@ -1,4 +1,4 @@
-import innerText from '../../_virtual/index.js';
+import innerText from '../../_virtual/index3.js';
 
 function convertMatchableString(original) {
     return (original

package/esm/components/Combobox/useOptions.js

@@ -1,5 +1,5 @@
 import { useCallback, useId, useMemo } from 'react';
-import innerText from '../../_virtual/index.js';
+import innerText from '../../_virtual/index3.js';
 import { areItemsEqual, convertMatchableString } from './helper.js';
 
 const defaultIsItemSelected = (targetItem, selectedItems) => selectedItems.some((item) => areItemsEqual(item, targetItem));

package/esm/components/Dialog/DialogOverlap.js

@@ -7,7 +7,7 @@ import '../Layout/Reel/Reel.js';
 import '../Layout/Sidebar/Sidebar.js';
 import { Center } from '../Layout/Center/Center.js';
 import '../Layout/Container/Container.js';
-import CSSTransition from './../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-transition-group/esm/CSSTransition.js';
+import CSSTransition from './../../vendor/.pnpm/react-transition-group@4.4.5_react-dom@19.2.0_react@19.2.0__react@19.2.0/vendor/react-transition-group/esm/CSSTransition.js';
 
 const classNameGenerator = ce({
     base: [

package/esm/components/Dropdown/DropdownMenuButton/DropdownMenuButton.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { memo, useContext, useMemo, useRef, Children, isValidElement, Fragment, cloneElement } from 'react';
-import innerText from '../../../_virtual/index.js';
+import innerText from '../../../_virtual/index3.js';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.18_ts-node@10.9.2_@swc_core@1.13.5_@types_node@20.19.20_typescript@5.8.3__/vendor/tailwind-variants/dist/index.js';
 import { DropdownContext, Dropdown } from '../Dropdown.js';
 import { DropdownTrigger } from '../DropdownTrigger.js';

package/esm/components/Dropdown/FilterDropdown/FilterDropdown.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
-import innerText from '../../../_virtual/index.js';
+import innerText from '../../../_virtual/index3.js';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.18_ts-node@10.9.2_@swc_core@1.13.5_@types_node@20.19.20_typescript@5.8.3__/vendor/tailwind-variants/dist/index.js';
 import { useDecorators } from '../../../hooks/useDecorators.js';
 import { useResponseStatus } from '../../../hooks/useResponseStatus.js';

package/esm/components/FileViewer/PDFViewer.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { memo, useState, useCallback, useMemo } from 'react';
-import './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.26_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-pdf/dist/esm/index.js';
+import './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.26_react-dom@19.2.0_react@19.2.0__react@19.2.0/vendor/react-pdf/dist/esm/index.js';
 import { ReactPDFStyle } from './generatedReactPDFStyle.js';
-import Document from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.26_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-pdf/dist/esm/Document.js';
-import Page from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.26_react-dom@19.1.1_react@19.1.1__react@19.1.1/vendor/react-pdf/dist/esm/Page.js';
+import Document from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.26_react-dom@19.2.0_react@19.2.0__react@19.2.0/vendor/react-pdf/dist/esm/Document.js';
+import Page from './../../vendor/.pnpm/react-pdf@9.2.1_@types_react@18.3.26_react-dom@19.2.0_react@19.2.0__react@19.2.0/vendor/react-pdf/dist/esm/Page.js';
 import { version as __webpack_exports__version, GlobalWorkerOptions as __webpack_exports__GlobalWorkerOptions } from './../../vendor/.pnpm/pdfjs-dist@4.8.69/vendor/pdfjs-dist/build/pdf.js';
 
 if (typeof window !== 'undefined') {

package/esm/components/FormControl/FormControl.js

@@ -1,7 +1,7 @@
 "use client";
 import { memo, useMemo, isValidElement, useId, useRef, Fragment as Fragment$1, createElement, useEffect } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import innerText from '../../_virtual/index.js';
+import innerText from '../../_virtual/index3.js';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.18_ts-node@10.9.2_@swc_core@1.13.5_@types_node@20.19.20_typescript@5.8.3__/vendor/tailwind-variants/dist/index.js';
 import { FaCircleExclamationIcon } from '../Icon/Icon.js';
 import '../Icon/generateIcon.js';
@@ -88,7 +88,7 @@ const classNameGenerator = ce({
 const SMARTHR_UI_INPUT_SELECTOR = '[data-smarthr-ui-input="true"]';
 const ActualFormControl = ({ label: orgLabel, subActionArea, innerMargin, statusLabels, statusLabelProps, helpMessage, exampleMessage, errorMessages, autoBindErrorInput = true, supplementaryMessage, as = 'div', className, children, ...props }) => {
     // HINT: ReactNodeとObjectのどちらかを判定
-    // tyoepfはnullの場合もobject判定されてしまうため念の為falsyで判定
+    // typeofはnullの場合もobject判定されてしまうため念の為falsyで判定
     // ReactNodeの一部であるReactElementもobjectとして判定されてしまうためisValidElementで判定
     const label = !orgLabel || typeof orgLabel !== 'object' || isValidElement(orgLabel)
         ? {
@@ -211,20 +211,15 @@ const ActualFormControl = ({ label: orgLabel, subActionArea, innerMargin, status
         const legendText = innerText(label.text);
         if (!legendText)
             return;
-        const labelMap = new Map(Array.from(document.querySelectorAll('label[for]')).map((l) => [l.getAttribute('for'), l]));
         inputs.forEach((input) => {
-            const inputId = input.getAttribute('id');
-            let accessibleName = input.getAttribute('aria-label');
-            if (!accessibleName) {
-                const l = labelMap.get(inputId);
-                if (!l?.closest('.smarthr-ui-VisuallyHiddenText')) {
-                    // HINT: <label> があり、かつ <VisuallyHiddenText> でラップされていない場合
-                    return;
-                }
-                accessibleName = l.textContent || '';
-            }
-            if (accessibleName && !accessibleName.includes(legendText)) {
-                input.setAttribute('aria-label', `${accessibleName} ${legendText}`.trim());
+            const accessibleName = input.getAttribute('aria-label') ||
+                (input.labels?.[0]?.classList.contains('smarthr-ui-VisuallyHiddenText')
+                    ? input.labels[0].textContent
+                    : '');
+            if (accessibleName &&
+                !accessibleName.includes(legendText) &&
+                !legendText.includes(accessibleName)) {
+                input.setAttribute('aria-label', `${accessibleName} ${legendText}`);
             }
         });
     }, [isFieldset, label.text]);

package/esm/components/FormControl/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","sources":["../../../src/components/FormControl/FormControl.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type FC,\n  Fragment,\n  type FunctionComponentElement,\n  type PropsWithChildren,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport { useId } from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCircleExclamationIcon } from '../Icon'\nimport { Cluster, Stack } from '../Layout'\nimport { StatusLabel } from '../StatusLabel'\nimport { Text, type TextProps } from '../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassNameGenerator } from '../VisuallyHiddenText'\n\nimport type { Gap } from '../../types'\n\ntype StatusLabelProps = ComponentProps<typeof StatusLabel>\ntype StatusLabelType = FunctionComponentElement<StatusLabelProps>\n\ntype ObjectLabelType = {\n  text: ReactNode\n  /** ラベルの表示タイプ */\n  styleType?: TextProps['styleType']\n  /** ラベル左に設置するアイコン */\n  icon?: TextProps['prefixIcon']\n  /** ラベルを視覚的に隠すかどうか */\n  dangerouslyHide?: boolean\n  /** ラベルを紐づける入力要素のID属性と同じ値 */\n  htmlFor?: string\n  /** ラベルに適用する `id` 値 */\n  id?: string\n}\ntype Props = PropsWithChildren<{\n  /** グループのラベル名 */\n  label: ReactNode | ObjectLabelType\n  /** タイトル右の領域 */\n  subActionArea?: ReactNode\n  /** タイトル群と子要素の間の間隔調整用（基本的には不要） */\n  innerMargin?: Gap\n  /** タイトルの隣に表示する `StatusLabel` の Props の配列 */\n  /**\n   * @deprecated statusLabelProps属性は非推奨です。statusLabelsを使ってください。\n   */\n  statusLabelProps?: StatusLabelProps | StatusLabelProps[]\n  /** タイトルの隣に表示する `StatusLabel` の配列 */\n  statusLabels?: StatusLabelType | StatusLabelType[]\n  /** タイトルの下に表示するヘルプメッセージ */\n  helpMessage?: ReactNode\n  /** タイトルの下に表示する入力例 */\n  exampleMessage?: ReactNode\n  /** タイトルの下に表示するエラーメッセージ */\n  errorMessages?: ReactNode | ReactNode[]\n  /** エラーがある場合に自動的に入力要素を error にするかどうか */\n  autoBindErrorInput?: boolean\n  /** フォームコントロールの下に表示する補足メッセージ */\n  supplementaryMessage?: ReactNode\n  /** `true` のとき、文字色を `TEXT_DISABLED` にする */\n  disabled?: boolean\n  as?: string | ComponentType<any>\n}>\ntype ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props | 'aria-labelledby'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-FormControl',\n      'shr-mx-[unset] shr-border-none shr-p-[unset]',\n      'disabled:shr-text-disabled',\n      '[&:disabled_.smarthr-ui-FormControl-label_>_span]:shr-text-disabled',\n      '[&:disabled_.smarthr-ui-FormControl-exampleMessage]:shr-text-color-inherit',\n      '[&:disabled_.smarthr-ui-FormControl-errorMessage]:shr-text-color-inherit',\n      '[&:disabled_.smarthr-ui-FormControl-supplementaryMessage]:shr-text-color-inherit',\n      '[&:disabled_.smarthr-ui-Input]:shr-border-default/50 [&:disabled_.smarthr-ui-Input]:shr-bg-white-darken',\n    ],\n    label: ['smarthr-ui-FormControl-label'],\n    errorList: ['shr-list-none'],\n    errorIcon: ['smarthr-ui-FormControl-errorMessage', 'shr-text-danger'],\n    underLabelStack: ['[&&&]:shr-mt-0'],\n    childrenWrapper: [],\n  },\n  variants: {\n    innerMargin: {\n      0: {},\n      0.25: {},\n      0.5: {},\n      0.75: {},\n      1: {},\n      1.25: {},\n      1.5: {},\n      2: {},\n      2.5: {},\n      3: {},\n      3.5: {},\n      4: {},\n      8: {},\n      X3S: {},\n      XXS: {},\n      XS: {},\n      S: {},\n      M: {},\n      L: {},\n      XL: {},\n      XXL: {},\n      X3L: {},\n    } as { [key in Gap]: string },\n    isFieldset: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // TODO: innerMarginが未指定、初期値の場合、かつFieldsetの場合、childrenの上部の余白を広げることで\n    // FormControltとの差をわかりやすくしている\n    // 微妙な方法ではあるので、必要に応じてinnerMarginではない属性を用意する\n    // https://kufuinc.slack.com/archives/CGC58MW01/p1737944965871159?thread_ts=1737541173.404369&cid=CGC58MW01\n    {\n      innerMargin: undefined,\n      isFieldset: true,\n      class: {\n        childrenWrapper: '[:not([hidden])_~_&&&]:shr-mt-1',\n      },\n    },\n    {\n      innerMargin: undefined,\n      isFieldset: false,\n      class: {\n        childrenWrapper: '[:not([hidden])_~_&&&]:shr-mt-0.5',\n      },\n    },\n  ],\n})\n\nconst SMARTHR_UI_INPUT_SELECTOR = '[data-smarthr-ui-input=\"true\"]'\n\nexport const ActualFormControl: FC<Props & ElementProps> = ({\n  label: orgLabel,\n  subActionArea,\n  innerMargin,\n  statusLabels,\n  statusLabelProps,\n  helpMessage,\n  exampleMessage,\n  errorMessages,\n  autoBindErrorInput = true,\n  supplementaryMessage,\n  as = 'div',\n  className,\n  children,\n  ...props\n}) => {\n  // HINT: ReactNodeとObjectのどちらかを判定\n  // tyoepfはnullの場合もobject判定されてしまうため念の為falsyで判定\n  // ReactNodeの一部であるReactElementもobjectとして判定されてしまうためisValidElementで判定\n  const label: ObjectLabelType =\n    !orgLabel || typeof orgLabel !== 'object' || isValidElement(orgLabel)\n      ? {\n          text: orgLabel as ReactNode,\n        }\n      : (orgLabel as ObjectLabelType)\n\n  const defaultHtmlFor = useId()\n  const defaultLabelId = useId()\n  const managedHtmlFor = label.htmlFor || defaultHtmlFor\n  const managedLabelId = label.id || defaultLabelId\n  const inputWrapperRef = useRef<HTMLDivElement>(null)\n  const isFieldset = as === 'fieldset'\n\n  const describedbyIds = useMemo(() => {\n    const temp = []\n\n    if (helpMessage) {\n      temp.push(`${managedHtmlFor}_helpMessage`)\n    }\n    if (exampleMessage) {\n      temp.push(`${managedHtmlFor}_exampleMessage`)\n    }\n    if (supplementaryMessage) {\n      temp.push(`${managedHtmlFor}_supplementaryMessage`)\n    }\n    if (errorMessages) {\n      temp.push(`${managedHtmlFor}_errorMessages`)\n    }\n\n    return temp.join(' ')\n  }, [helpMessage, exampleMessage, supplementaryMessage, errorMessages, managedHtmlFor])\n\n  const actualStatusLabels = useMemo(() => {\n    if (statusLabels) {\n      return (Array.isArray(statusLabels) ? statusLabels : [statusLabels]).map(\n        (statusLabel, index) => <Fragment key={index}>{statusLabel}</Fragment>,\n      )\n    }\n\n    if (!statusLabelProps) {\n      return []\n    }\n\n    const labelProps = Array.isArray(statusLabelProps) ? statusLabelProps : [statusLabelProps]\n\n    return labelProps.map((prop, index) => <StatusLabel {...prop} key={index} />)\n  }, [statusLabels, statusLabelProps])\n\n  const actualErrorMessages = useMemo(() => {\n    if (!errorMessages) {\n      return []\n    }\n\n    return Array.isArray(errorMessages) ? errorMessages : [errorMessages]\n  }, [errorMessages])\n\n  const actualInnerMargin = useMemo(() => innerMargin ?? 0.5, [innerMargin])\n\n  const classNames = useMemo(() => {\n    const generators = classNameGenerator({ innerMargin, isFieldset })\n\n    return {\n      wrapper: generators.wrapper({ className }),\n      label: generators.label({\n        className: label.dangerouslyHide ? visuallyHiddenTextClassNameGenerator() : '',\n      }),\n      errorList: generators.errorList(),\n      errorIcon: generators.errorIcon(),\n      underLabelStack: generators.underLabelStack(),\n      childrenWrapper: generators.childrenWrapper(),\n    }\n  }, [innerMargin, isFieldset, label.dangerouslyHide, className])\n\n  useEffect(() => {\n    if (\n      isFieldset ||\n      !inputWrapperRef?.current ||\n      // HINT: 対象idを持つ要素が既に存在する場合、何もしない\n      document.getElementById(managedHtmlFor)\n    ) {\n      return\n    }\n\n    const input = inputWrapperRef.current.querySelector(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (!input) {\n      return\n    }\n\n    if (!input.getAttribute('id')) {\n      input.setAttribute('id', managedHtmlFor)\n    }\n\n    if (input instanceof HTMLInputElement && input.type === 'file') {\n      const attrName = 'aria-labelledby'\n      const inputLabelledByIds = input.getAttribute(attrName)\n\n      if (inputLabelledByIds) {\n        // InputFileの場合はlabel要素の可視ラベルをアクセシブルネームに含める\n        input.setAttribute(attrName, `${inputLabelledByIds} ${managedLabelId}`)\n      }\n    }\n  }, [managedHtmlFor, isFieldset, managedLabelId])\n\n  useEffect(() => {\n    if (!describedbyIds || !inputWrapperRef?.current) {\n      return\n    }\n\n    const inputWrapper = inputWrapperRef.current\n    const attrName = 'aria-describedby'\n\n    if (inputWrapper.querySelector(`[${attrName}=\"${describedbyIds}\"]`)) {\n      return\n    }\n\n    const input = inputWrapper.querySelector(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (input) {\n      const attribute = input.getAttribute(attrName)\n\n      input.setAttribute(attrName, attribute ? `${attribute} ${describedbyIds}` : describedbyIds)\n    }\n  }, [describedbyIds])\n\n  useEffect(() => {\n    if (!autoBindErrorInput || !inputWrapperRef?.current) {\n      return\n    }\n\n    const input = inputWrapperRef.current.querySelector(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (input) {\n      const attrName = 'aria-invalid'\n\n      if (actualErrorMessages.length > 0) {\n        input.setAttribute(attrName, 'true')\n      } else {\n        input.removeAttribute(attrName)\n      }\n    }\n  }, [actualErrorMessages.length, autoBindErrorInput])\n\n  // HINT: Fieldset内の可視ラベルが無いinputに、legend文言をアクセシブルネームに追加する\n  // https://waic.jp/translations/WCAG21/Understanding/label-in-name.html\n  useEffect(() => {\n    if (!isFieldset || !inputWrapperRef.current) return\n\n    const inputs = inputWrapperRef.current.querySelectorAll(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (!inputs.length) return\n\n    const legendText = innerText(label.text)\n\n    if (!legendText) return\n\n    const labelMap = new Map(\n      Array.from(document.querySelectorAll('label[for]')).map((l) => [l.getAttribute('for'), l]),\n    )\n\n    inputs.forEach((input) => {\n      const inputId = input.getAttribute('id')\n      let accessibleName = input.getAttribute('aria-label')\n\n      if (!accessibleName) {\n        const l = labelMap.get(inputId)\n\n        if (!l?.closest('.smarthr-ui-VisuallyHiddenText')) {\n          // HINT: <label> があり、かつ <VisuallyHiddenText> でラップされていない場合\n          return\n        }\n\n        accessibleName = l.textContent || ''\n      }\n\n      if (accessibleName && !accessibleName.includes(legendText)) {\n        input.setAttribute('aria-label', `${accessibleName} ${legendText}`.trim())\n      }\n    })\n  }, [isFieldset, label.text])\n\n  let body = (\n    <>\n      <HelpMessageParagraph helpMessage={helpMessage} managedHtmlFor={managedHtmlFor} />\n      <ExampleMessageText exampleMessage={exampleMessage} managedHtmlFor={managedHtmlFor} />\n      <ErrorMessageList\n        errorMessages={actualErrorMessages}\n        managedHtmlFor={managedHtmlFor}\n        classNames={classNames}\n      />\n      <div className={classNames.childrenWrapper} ref={inputWrapperRef}>\n        {children}\n      </div>\n      <SupplementaryMessageText\n        supplementaryMessage={supplementaryMessage}\n        managedHtmlFor={managedHtmlFor}\n      />\n    </>\n  )\n\n  // HINT: label.dangerouslyHideの場合、body以下の余白の計算を簡略化するため\n  // Stackをネストし、そのStackに対してmargin-top: 0を指定する\n  // こうすることでinner Stack以下の要素は擬似的にStackの最初の要素になる\n  if (label.dangerouslyHide) {\n    body = (\n      <Stack gap={actualInnerMargin} className={classNames.underLabelStack}>\n        {body}\n      </Stack>\n    )\n  }\n\n  return (\n    <Stack\n      {...props}\n      as={as}\n      gap={actualInnerMargin}\n      aria-describedby={isFieldset && describedbyIds ? describedbyIds : undefined}\n      className={classNames.wrapper}\n    >\n      <LabelCluster\n        isFieldset={isFieldset}\n        managedHtmlFor={managedHtmlFor}\n        managedLabelId={managedLabelId}\n        dangerouslyHideLabel={label.dangerouslyHide}\n        labelType={label.styleType}\n        label={label.text}\n        labelIcon={label.icon}\n        statusLabels={actualStatusLabels}\n        subActionArea={subActionArea}\n        labelClassName={classNames.label}\n      />\n      {body}\n    </Stack>\n  )\n}\n\nconst LabelCluster = memo<\n  Pick<Props, 'subActionArea'> & {\n    label: ReactNode\n    labelType: TextProps['styleType']\n    labelIcon?: ReactNode\n    dangerouslyHideLabel?: boolean\n    isFieldset: boolean\n    managedHtmlFor: string\n    managedLabelId: string\n    labelClassName: string\n    statusLabels: StatusLabelType[]\n  }\n>(\n  ({\n    isFieldset,\n    managedHtmlFor,\n    managedLabelId,\n    dangerouslyHideLabel,\n    labelType = 'blockTitle',\n    label,\n    labelIcon,\n    subActionArea,\n    labelClassName,\n    statusLabels,\n  }) => {\n    const body = (\n      <>\n        <Text styleType={labelType} prefixIcon={labelIcon}>\n          {label}\n        </Text>\n        <StatusLabelCluster statusLabels={statusLabels} />\n      </>\n    )\n\n    const attrs = useMemo(() => {\n      if (dangerouslyHideLabel) {\n        return {\n          label: null,\n          visuallyHidden: isFieldset\n            ? {\n                as: 'legend',\n              }\n            : {\n                as: 'label',\n                htmlFor: managedHtmlFor,\n                id: managedLabelId,\n              },\n        }\n      }\n\n      if (isFieldset) {\n        return {\n          label: { 'aria-hidden': 'true' } as const,\n          visuallyHidden: { as: 'legend' },\n        }\n      }\n\n      return {\n        label: {\n          as: 'label' as const,\n          htmlFor: managedHtmlFor,\n          id: managedLabelId,\n        },\n        visuallyHidden: null,\n      }\n    }, [managedLabelId, managedHtmlFor, dangerouslyHideLabel, isFieldset])\n\n    return (\n      <>\n        {attrs.visuallyHidden && (\n          <VisuallyHiddenText {...attrs.visuallyHidden}>\n            {\n              // HINT: innerTextでは正しく文字が取得できない場合がある\n              // 安全策としてinnerTextが空を取得してきたらbody自体を埋めこみます\n              innerText(body) || body\n            }\n          </VisuallyHiddenText>\n        )}\n        {attrs.label && (\n          <Cluster\n            justify=\"space-between\"\n            // HINT: UI上、常にトップの要素になるため、Stackの計算が狂わないよう、\n            // 常にmargin-topを0にする\n            className=\"[&&&]:shr--mt-0\"\n          >\n            <Cluster {...attrs.label} align=\"center\" className={labelClassName}>\n              {body}\n            </Cluster>\n            {subActionArea && <div className=\"shr-grow\">{subActionArea}</div>}\n          </Cluster>\n        )}\n      </>\n    )\n  },\n)\n\nconst StatusLabelCluster = memo<{ statusLabels: StatusLabelType[] }>(({ statusLabels }) =>\n  statusLabels.length === 0 ? null : (\n    <Cluster gap={0.25} as=\"span\">\n      {statusLabels}\n    </Cluster>\n  ),\n)\n\nconst HelpMessageParagraph = memo<Pick<Props, 'helpMessage'> & { managedHtmlFor: string }>(\n  ({ helpMessage, managedHtmlFor }) =>\n    helpMessage ? (\n      <p className=\"smarthr-ui-FormControl-helpMessage\" id={`${managedHtmlFor}_helpMessage`}>\n        {helpMessage}\n      </p>\n    ) : null,\n)\n\nconst ExampleMessageText = memo<Pick<Props, 'exampleMessage'> & { managedHtmlFor: string }>(\n  ({ exampleMessage, managedHtmlFor }) =>\n    exampleMessage ? (\n      <Text\n        as=\"p\"\n        color=\"TEXT_GREY\"\n        italic\n        id={`${managedHtmlFor}_exampleMessage`}\n        className=\"smarthr-ui-FormControl-exampleMessage\"\n      >\n        {exampleMessage}\n      </Text>\n    ) : null,\n)\n\nconst ErrorMessageList = memo<{\n  errorMessages: ReactNode[]\n  managedHtmlFor: string\n  classNames: {\n    errorList: string\n    errorIcon: string\n  }\n}>(({ errorMessages, managedHtmlFor, classNames }) =>\n  errorMessages.length > 0 ? (\n    <div id={`${managedHtmlFor}_errorMessages`} className={classNames.errorList} role=\"alert\">\n      {errorMessages.map((message, index) => (\n        <p key={index}>\n          <FaCircleExclamationIcon text={message} className={classNames.errorIcon} />\n        </p>\n      ))}\n    </div>\n  ) : null,\n)\n\nconst SupplementaryMessageText = memo<\n  Pick<Props, 'supplementaryMessage'> & { managedHtmlFor: string }\n>(({ supplementaryMessage, managedHtmlFor }) =>\n  supplementaryMessage ? (\n    <Text\n      as=\"p\"\n      size=\"S\"\n      color=\"TEXT_GREY\"\n      id={`${managedHtmlFor}_supplementaryMessage`}\n      className=\"smarthr-ui-FormControl-supplementaryMessage\"\n    >\n      {supplementaryMessage}\n    </Text>\n  ) : null,\n)\n\nexport const FormControl: FC<Omit<Props & ElementProps, 'as' | 'disabled'>> = ActualFormControl\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA2EA;AACE;AACE;;;;;;;;;AASC;;;AAGD;;AAEA;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACD;AACF;AACD;;;;;AAKE;AACE;AACA;AACA;AACE;AACD;AACF;AACD;AACE;AACA;AACA;AACE;AACD;AACF;AACF;AACF;AAED;AAEO;;;;AAmBL;AAEI;AACI;AACD;;AAGP;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAII;;;AAGA;;;AAGA;;;AAGA;;AAGF;AACF;AAEA;;AAEI;;;AAMA;;AAGF;;AAGF;AAEA;;AAEI;;AAGF;AACF;AAEA;AAEA;;;;AAKI;AACE;;AAEF;AACA;AACA;AACA;;AAEJ;;AAGE;;;AAIE;;;;;;;;AAYA;;;;;;;;;;;;;;;AAmBF;;;;;;;;AAYE;;AAEJ;;;;;;;;AAYI;AACE;;;AAEA;;;;;;;AAQJ;;;;;;AAQA;;AAEA;AAIA;;;;;;;;;AAYI;;;AAIA;;AAEJ;;AAGF;;;;AAsBA;AACE;;AAOF;AAuBF;AAEA;;AAkCI;;;AAGM;AACA;AACE;AACI;AACD;AACH;AACI;AACA;AACA;AACD;;;;;AAML;AACA;;;;AAKF;AACE;AACA;AACA;AACD;AACD;;;AAIJ;;;AAOU;;;AASF;AAUV;AAGF;AAQA;AASA;AAeA;AAmBA;AAgBO;;"}
+{"version":3,"file":"FormControl.js","sources":["../../../src/components/FormControl/FormControl.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type FC,\n  Fragment,\n  type FunctionComponentElement,\n  type PropsWithChildren,\n  type ReactNode,\n  isValidElement,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport { useId } from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCircleExclamationIcon } from '../Icon'\nimport { Cluster, Stack } from '../Layout'\nimport { StatusLabel } from '../StatusLabel'\nimport { Text, type TextProps } from '../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassNameGenerator } from '../VisuallyHiddenText'\n\nimport type { Gap } from '../../types'\n\ntype StatusLabelProps = ComponentProps<typeof StatusLabel>\ntype StatusLabelType = FunctionComponentElement<StatusLabelProps>\n\ntype ObjectLabelType = {\n  text: ReactNode\n  /** ラベルの表示タイプ */\n  styleType?: TextProps['styleType']\n  /** ラベル左に設置するアイコン */\n  icon?: TextProps['prefixIcon']\n  /** ラベルを視覚的に隠すかどうか */\n  dangerouslyHide?: boolean\n  /** ラベルを紐づける入力要素のID属性と同じ値 */\n  htmlFor?: string\n  /** ラベルに適用する `id` 値 */\n  id?: string\n}\ntype Props = PropsWithChildren<{\n  /** グループのラベル名 */\n  label: ReactNode | ObjectLabelType\n  /** タイトル右の領域 */\n  subActionArea?: ReactNode\n  /** タイトル群と子要素の間の間隔調整用（基本的には不要） */\n  innerMargin?: Gap\n  /** タイトルの隣に表示する `StatusLabel` の Props の配列 */\n  /**\n   * @deprecated statusLabelProps属性は非推奨です。statusLabelsを使ってください。\n   */\n  statusLabelProps?: StatusLabelProps | StatusLabelProps[]\n  /** タイトルの隣に表示する `StatusLabel` の配列 */\n  statusLabels?: StatusLabelType | StatusLabelType[]\n  /** タイトルの下に表示するヘルプメッセージ */\n  helpMessage?: ReactNode\n  /** タイトルの下に表示する入力例 */\n  exampleMessage?: ReactNode\n  /** タイトルの下に表示するエラーメッセージ */\n  errorMessages?: ReactNode | ReactNode[]\n  /** エラーがある場合に自動的に入力要素を error にするかどうか */\n  autoBindErrorInput?: boolean\n  /** フォームコントロールの下に表示する補足メッセージ */\n  supplementaryMessage?: ReactNode\n  /** `true` のとき、文字色を `TEXT_DISABLED` にする */\n  disabled?: boolean\n  as?: string | ComponentType<any>\n}>\ntype ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props | 'aria-labelledby'>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-FormControl',\n      'shr-mx-[unset] shr-border-none shr-p-[unset]',\n      'disabled:shr-text-disabled',\n      '[&:disabled_.smarthr-ui-FormControl-label_>_span]:shr-text-disabled',\n      '[&:disabled_.smarthr-ui-FormControl-exampleMessage]:shr-text-color-inherit',\n      '[&:disabled_.smarthr-ui-FormControl-errorMessage]:shr-text-color-inherit',\n      '[&:disabled_.smarthr-ui-FormControl-supplementaryMessage]:shr-text-color-inherit',\n      '[&:disabled_.smarthr-ui-Input]:shr-border-default/50 [&:disabled_.smarthr-ui-Input]:shr-bg-white-darken',\n    ],\n    label: ['smarthr-ui-FormControl-label'],\n    errorList: ['shr-list-none'],\n    errorIcon: ['smarthr-ui-FormControl-errorMessage', 'shr-text-danger'],\n    underLabelStack: ['[&&&]:shr-mt-0'],\n    childrenWrapper: [],\n  },\n  variants: {\n    innerMargin: {\n      0: {},\n      0.25: {},\n      0.5: {},\n      0.75: {},\n      1: {},\n      1.25: {},\n      1.5: {},\n      2: {},\n      2.5: {},\n      3: {},\n      3.5: {},\n      4: {},\n      8: {},\n      X3S: {},\n      XXS: {},\n      XS: {},\n      S: {},\n      M: {},\n      L: {},\n      XL: {},\n      XXL: {},\n      X3L: {},\n    } as { [key in Gap]: string },\n    isFieldset: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // TODO: innerMarginが未指定、初期値の場合、かつFieldsetの場合、childrenの上部の余白を広げることで\n    // FormControltとの差をわかりやすくしている\n    // 微妙な方法ではあるので、必要に応じてinnerMarginではない属性を用意する\n    // https://kufuinc.slack.com/archives/CGC58MW01/p1737944965871159?thread_ts=1737541173.404369&cid=CGC58MW01\n    {\n      innerMargin: undefined,\n      isFieldset: true,\n      class: {\n        childrenWrapper: '[:not([hidden])_~_&&&]:shr-mt-1',\n      },\n    },\n    {\n      innerMargin: undefined,\n      isFieldset: false,\n      class: {\n        childrenWrapper: '[:not([hidden])_~_&&&]:shr-mt-0.5',\n      },\n    },\n  ],\n})\n\nconst SMARTHR_UI_INPUT_SELECTOR = '[data-smarthr-ui-input=\"true\"]'\n\nexport const ActualFormControl: FC<Props & ElementProps> = ({\n  label: orgLabel,\n  subActionArea,\n  innerMargin,\n  statusLabels,\n  statusLabelProps,\n  helpMessage,\n  exampleMessage,\n  errorMessages,\n  autoBindErrorInput = true,\n  supplementaryMessage,\n  as = 'div',\n  className,\n  children,\n  ...props\n}) => {\n  // HINT: ReactNodeとObjectのどちらかを判定\n  // typeofはnullの場合もobject判定されてしまうため念の為falsyで判定\n  // ReactNodeの一部であるReactElementもobjectとして判定されてしまうためisValidElementで判定\n  const label: ObjectLabelType =\n    !orgLabel || typeof orgLabel !== 'object' || isValidElement(orgLabel)\n      ? {\n          text: orgLabel as ReactNode,\n        }\n      : (orgLabel as ObjectLabelType)\n\n  const defaultHtmlFor = useId()\n  const defaultLabelId = useId()\n  const managedHtmlFor = label.htmlFor || defaultHtmlFor\n  const managedLabelId = label.id || defaultLabelId\n  const inputWrapperRef = useRef<HTMLDivElement>(null)\n  const isFieldset = as === 'fieldset'\n\n  const describedbyIds = useMemo(() => {\n    const temp = []\n\n    if (helpMessage) {\n      temp.push(`${managedHtmlFor}_helpMessage`)\n    }\n    if (exampleMessage) {\n      temp.push(`${managedHtmlFor}_exampleMessage`)\n    }\n    if (supplementaryMessage) {\n      temp.push(`${managedHtmlFor}_supplementaryMessage`)\n    }\n    if (errorMessages) {\n      temp.push(`${managedHtmlFor}_errorMessages`)\n    }\n\n    return temp.join(' ')\n  }, [helpMessage, exampleMessage, supplementaryMessage, errorMessages, managedHtmlFor])\n\n  const actualStatusLabels = useMemo(() => {\n    if (statusLabels) {\n      return (Array.isArray(statusLabels) ? statusLabels : [statusLabels]).map(\n        (statusLabel, index) => <Fragment key={index}>{statusLabel}</Fragment>,\n      )\n    }\n\n    if (!statusLabelProps) {\n      return []\n    }\n\n    const labelProps = Array.isArray(statusLabelProps) ? statusLabelProps : [statusLabelProps]\n\n    return labelProps.map((prop, index) => <StatusLabel {...prop} key={index} />)\n  }, [statusLabels, statusLabelProps])\n\n  const actualErrorMessages = useMemo(() => {\n    if (!errorMessages) {\n      return []\n    }\n\n    return Array.isArray(errorMessages) ? errorMessages : [errorMessages]\n  }, [errorMessages])\n\n  const actualInnerMargin = useMemo(() => innerMargin ?? 0.5, [innerMargin])\n\n  const classNames = useMemo(() => {\n    const generators = classNameGenerator({ innerMargin, isFieldset })\n\n    return {\n      wrapper: generators.wrapper({ className }),\n      label: generators.label({\n        className: label.dangerouslyHide ? visuallyHiddenTextClassNameGenerator() : '',\n      }),\n      errorList: generators.errorList(),\n      errorIcon: generators.errorIcon(),\n      underLabelStack: generators.underLabelStack(),\n      childrenWrapper: generators.childrenWrapper(),\n    }\n  }, [innerMargin, isFieldset, label.dangerouslyHide, className])\n\n  useEffect(() => {\n    if (\n      isFieldset ||\n      !inputWrapperRef?.current ||\n      // HINT: 対象idを持つ要素が既に存在する場合、何もしない\n      document.getElementById(managedHtmlFor)\n    ) {\n      return\n    }\n\n    const input = inputWrapperRef.current.querySelector(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (!input) {\n      return\n    }\n\n    if (!input.getAttribute('id')) {\n      input.setAttribute('id', managedHtmlFor)\n    }\n\n    if (input instanceof HTMLInputElement && input.type === 'file') {\n      const attrName = 'aria-labelledby'\n      const inputLabelledByIds = input.getAttribute(attrName)\n\n      if (inputLabelledByIds) {\n        // InputFileの場合はlabel要素の可視ラベルをアクセシブルネームに含める\n        input.setAttribute(attrName, `${inputLabelledByIds} ${managedLabelId}`)\n      }\n    }\n  }, [managedHtmlFor, isFieldset, managedLabelId])\n\n  useEffect(() => {\n    if (!describedbyIds || !inputWrapperRef?.current) {\n      return\n    }\n\n    const inputWrapper = inputWrapperRef.current\n    const attrName = 'aria-describedby'\n\n    if (inputWrapper.querySelector(`[${attrName}=\"${describedbyIds}\"]`)) {\n      return\n    }\n\n    const input = inputWrapper.querySelector(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (input) {\n      const attribute = input.getAttribute(attrName)\n\n      input.setAttribute(attrName, attribute ? `${attribute} ${describedbyIds}` : describedbyIds)\n    }\n  }, [describedbyIds])\n\n  useEffect(() => {\n    if (!autoBindErrorInput || !inputWrapperRef?.current) {\n      return\n    }\n\n    const input = inputWrapperRef.current.querySelector(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (input) {\n      const attrName = 'aria-invalid'\n\n      if (actualErrorMessages.length > 0) {\n        input.setAttribute(attrName, 'true')\n      } else {\n        input.removeAttribute(attrName)\n      }\n    }\n  }, [actualErrorMessages.length, autoBindErrorInput])\n\n  // HINT: Fieldset内の可視ラベルが無いinputに、legend文言をアクセシブルネームに追加する\n  // https://waic.jp/translations/WCAG21/Understanding/label-in-name.html\n  useEffect(() => {\n    if (!isFieldset || !inputWrapperRef.current) return\n\n    const inputs =\n      inputWrapperRef.current.querySelectorAll<HTMLInputElement>(SMARTHR_UI_INPUT_SELECTOR)\n\n    if (!inputs.length) return\n\n    const legendText = innerText(label.text)\n\n    if (!legendText) return\n\n    inputs.forEach((input: HTMLInputElement) => {\n      const accessibleName =\n        input.getAttribute('aria-label') ||\n        (input.labels?.[0]?.classList.contains('smarthr-ui-VisuallyHiddenText')\n          ? input.labels![0].textContent\n          : '')\n\n      if (\n        accessibleName &&\n        !accessibleName.includes(legendText) &&\n        !legendText.includes(accessibleName)\n      ) {\n        input.setAttribute('aria-label', `${accessibleName} ${legendText}`)\n      }\n    })\n  }, [isFieldset, label.text])\n\n  let body = (\n    <>\n      <HelpMessageParagraph helpMessage={helpMessage} managedHtmlFor={managedHtmlFor} />\n      <ExampleMessageText exampleMessage={exampleMessage} managedHtmlFor={managedHtmlFor} />\n      <ErrorMessageList\n        errorMessages={actualErrorMessages}\n        managedHtmlFor={managedHtmlFor}\n        classNames={classNames}\n      />\n      <div className={classNames.childrenWrapper} ref={inputWrapperRef}>\n        {children}\n      </div>\n      <SupplementaryMessageText\n        supplementaryMessage={supplementaryMessage}\n        managedHtmlFor={managedHtmlFor}\n      />\n    </>\n  )\n\n  // HINT: label.dangerouslyHideの場合、body以下の余白の計算を簡略化するため\n  // Stackをネストし、そのStackに対してmargin-top: 0を指定する\n  // こうすることでinner Stack以下の要素は擬似的にStackの最初の要素になる\n  if (label.dangerouslyHide) {\n    body = (\n      <Stack gap={actualInnerMargin} className={classNames.underLabelStack}>\n        {body}\n      </Stack>\n    )\n  }\n\n  return (\n    <Stack\n      {...props}\n      as={as}\n      gap={actualInnerMargin}\n      aria-describedby={isFieldset && describedbyIds ? describedbyIds : undefined}\n      className={classNames.wrapper}\n    >\n      <LabelCluster\n        isFieldset={isFieldset}\n        managedHtmlFor={managedHtmlFor}\n        managedLabelId={managedLabelId}\n        dangerouslyHideLabel={label.dangerouslyHide}\n        labelType={label.styleType}\n        label={label.text}\n        labelIcon={label.icon}\n        statusLabels={actualStatusLabels}\n        subActionArea={subActionArea}\n        labelClassName={classNames.label}\n      />\n      {body}\n    </Stack>\n  )\n}\n\nconst LabelCluster = memo<\n  Pick<Props, 'subActionArea'> & {\n    label: ReactNode\n    labelType: TextProps['styleType']\n    labelIcon?: ReactNode\n    dangerouslyHideLabel?: boolean\n    isFieldset: boolean\n    managedHtmlFor: string\n    managedLabelId: string\n    labelClassName: string\n    statusLabels: StatusLabelType[]\n  }\n>(\n  ({\n    isFieldset,\n    managedHtmlFor,\n    managedLabelId,\n    dangerouslyHideLabel,\n    labelType = 'blockTitle',\n    label,\n    labelIcon,\n    subActionArea,\n    labelClassName,\n    statusLabels,\n  }) => {\n    const body = (\n      <>\n        <Text styleType={labelType} prefixIcon={labelIcon}>\n          {label}\n        </Text>\n        <StatusLabelCluster statusLabels={statusLabels} />\n      </>\n    )\n\n    const attrs = useMemo(() => {\n      if (dangerouslyHideLabel) {\n        return {\n          label: null,\n          visuallyHidden: isFieldset\n            ? {\n                as: 'legend',\n              }\n            : {\n                as: 'label',\n                htmlFor: managedHtmlFor,\n                id: managedLabelId,\n              },\n        }\n      }\n\n      if (isFieldset) {\n        return {\n          label: { 'aria-hidden': 'true' } as const,\n          visuallyHidden: { as: 'legend' },\n        }\n      }\n\n      return {\n        label: {\n          as: 'label' as const,\n          htmlFor: managedHtmlFor,\n          id: managedLabelId,\n        },\n        visuallyHidden: null,\n      }\n    }, [managedLabelId, managedHtmlFor, dangerouslyHideLabel, isFieldset])\n\n    return (\n      <>\n        {attrs.visuallyHidden && (\n          <VisuallyHiddenText {...attrs.visuallyHidden}>\n            {\n              // HINT: innerTextでは正しく文字が取得できない場合がある\n              // 安全策としてinnerTextが空を取得してきたらbody自体を埋めこみます\n              innerText(body) || body\n            }\n          </VisuallyHiddenText>\n        )}\n        {attrs.label && (\n          <Cluster\n            justify=\"space-between\"\n            // HINT: UI上、常にトップの要素になるため、Stackの計算が狂わないよう、\n            // 常にmargin-topを0にする\n            className=\"[&&&]:shr--mt-0\"\n          >\n            <Cluster {...attrs.label} align=\"center\" className={labelClassName}>\n              {body}\n            </Cluster>\n            {subActionArea && <div className=\"shr-grow\">{subActionArea}</div>}\n          </Cluster>\n        )}\n      </>\n    )\n  },\n)\n\nconst StatusLabelCluster = memo<{ statusLabels: StatusLabelType[] }>(({ statusLabels }) =>\n  statusLabels.length === 0 ? null : (\n    <Cluster gap={0.25} as=\"span\">\n      {statusLabels}\n    </Cluster>\n  ),\n)\n\nconst HelpMessageParagraph = memo<Pick<Props, 'helpMessage'> & { managedHtmlFor: string }>(\n  ({ helpMessage, managedHtmlFor }) =>\n    helpMessage ? (\n      <p className=\"smarthr-ui-FormControl-helpMessage\" id={`${managedHtmlFor}_helpMessage`}>\n        {helpMessage}\n      </p>\n    ) : null,\n)\n\nconst ExampleMessageText = memo<Pick<Props, 'exampleMessage'> & { managedHtmlFor: string }>(\n  ({ exampleMessage, managedHtmlFor }) =>\n    exampleMessage ? (\n      <Text\n        as=\"p\"\n        color=\"TEXT_GREY\"\n        italic\n        id={`${managedHtmlFor}_exampleMessage`}\n        className=\"smarthr-ui-FormControl-exampleMessage\"\n      >\n        {exampleMessage}\n      </Text>\n    ) : null,\n)\n\nconst ErrorMessageList = memo<{\n  errorMessages: ReactNode[]\n  managedHtmlFor: string\n  classNames: {\n    errorList: string\n    errorIcon: string\n  }\n}>(({ errorMessages, managedHtmlFor, classNames }) =>\n  errorMessages.length > 0 ? (\n    <div id={`${managedHtmlFor}_errorMessages`} className={classNames.errorList} role=\"alert\">\n      {errorMessages.map((message, index) => (\n        <p key={index}>\n          <FaCircleExclamationIcon text={message} className={classNames.errorIcon} />\n        </p>\n      ))}\n    </div>\n  ) : null,\n)\n\nconst SupplementaryMessageText = memo<\n  Pick<Props, 'supplementaryMessage'> & { managedHtmlFor: string }\n>(({ supplementaryMessage, managedHtmlFor }) =>\n  supplementaryMessage ? (\n    <Text\n      as=\"p\"\n      size=\"S\"\n      color=\"TEXT_GREY\"\n      id={`${managedHtmlFor}_supplementaryMessage`}\n      className=\"smarthr-ui-FormControl-supplementaryMessage\"\n    >\n      {supplementaryMessage}\n    </Text>\n  ) : null,\n)\n\nexport const FormControl: FC<Omit<Props & ElementProps, 'as' | 'disabled'>> = ActualFormControl\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA2EA;AACE;AACE;;;;;;;;;AASC;;;AAGD;;AAEA;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACA;AACD;AACF;AACD;;;;;AAKE;AACE;AACA;AACA;AACE;AACD;AACF;AACD;AACE;AACA;AACA;AACE;AACD;AACF;AACF;AACF;AAED;AAEO;;;;AAmBL;AAEI;AACI;AACD;;AAGP;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAII;;;AAGA;;;AAGA;;;AAGA;;AAGF;AACF;AAEA;;AAEI;;;AAMA;;AAGF;;AAGF;AAEA;;AAEI;;AAGF;AACF;AAEA;AAEA;;;;AAKI;AACE;;AAEF;AACA;AACA;AACA;;AAEJ;;AAGE;;;AAIE;;;;;;;;AAYA;;;;;;;;;;;;;;;AAmBF;;;;;;;;AAYE;;AAEJ;;;;;;;;AAYI;AACE;;;AAEA;;;;;;;AAQJ;;;;;;AASA;;AAEA;AACE;AAEE;;;AAIF;AAEE;AACA;;;AAIJ;;AAGF;;;;AAsBA;AACE;;AAOF;AAuBF;AAEA;;AAkCI;;;AAGM;AACA;AACE;AACI;AACD;AACH;AACI;AACA;AACA;AACD;;;;;AAML;AACA;;;;AAKF;AACE;AACA;AACA;AACD;AACD;;;AAIJ;;;AAOU;;;AASF;AAUV;AAGF;AAQA;AASA;AAeA;AAmBA;AAgBO;;"}