smarthr-ui 97.0.0 → 98.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"FilterDropdown.cjs","sources":["../../../../src/components/Dropdown/FilterDropdown/FilterDropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type FormEvent,\n  type MouseEventHandler,\n  type ReactNode,\n  isValidElement,\n  useMemo,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\nimport { Button, type AbstractProps as ButtonProps } from '../../Button'\nimport { FaCircleCheckIcon, FaFilterIcon, FaRotateLeftIcon } from '../../Icon'\nimport { Cluster, Stack } from '../../Layout'\nimport { ResponseMessage } from '../../ResponseMessage'\nimport { Dropdown } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\ntype ObjectTriggerType = {\n  text?: ReactNode\n  /** 引き金となるボタンの大きさ */\n  size?: ButtonProps['size']\n  /** 引き金となるボタンをアイコンのみとするかどうか */\n  onlyIcon?: boolean\n}\ntype AbstractProps = {\n  /** 引き金となるボタン */\n  trigger?: ReactNode | ObjectTriggerType\n  applyText?: ReactNode\n  cancelText?: ReactNode\n  resetText?: ReactNode\n  children: ReactNode\n  filtered?:\n    | boolean\n    | {\n        iconAlt?: ReactNode\n      }\n  responseStatus?: ResponseStatus\n  onApply: MouseEventHandler<HTMLButtonElement>\n  onCancel?: MouseEventHandler<HTMLButtonElement>\n  onReset?: MouseEventHandler<HTMLButtonElement>\n  onOpen?: () => void\n  onClose?: () => void\n}\ntype Props = AbstractProps & Omit<ComponentProps<'button'>, keyof AbstractProps>\n\nconst CONTROL_CLUSTER_GAP: ComponentProps<typeof Cluster>['gap'] = { column: 1, row: 0.5 }\nconst ON_SUBMIT = (e: FormEvent) => {\n  e.preventDefault()\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    iconWrapper: ['smarthr-ui-Icon-extended', 'shr-relative shr-leading-none'],\n    filteredIcon: 'shr-absolute shr-bottom-[2px] shr-right-[-4px] shr-h-[0.5em] shr-w-[0.5em]',\n    inner: 'shr-p-1.5',\n    actionArea: 'shr-border-t-shorthand shr-sticky shr-bottom-0 shr-bg-white shr-px-1.5 shr-py-1',\n    resetButtonArea: '-shr-ms-0.5',\n    rightButtonArea: 'shr-ms-auto',\n    message: 'shr-text-right',\n  },\n  variants: {\n    filtered: {\n      true: {\n        iconWrapper: 'shr-text-main',\n      },\n    },\n    triggerSize: {\n      M: {},\n      S: {\n        iconWrapper: '-shr-translate-x-0.25',\n      },\n    },\n  },\n})\n\nexport const FilterDropdown: FC<Props> = ({\n  trigger: orgTrigger,\n  applyText,\n  cancelText,\n  resetText,\n  children,\n  filtered,\n  responseStatus,\n  onApply,\n  onCancel,\n  onReset,\n  onOpen,\n  onClose,\n  ...rest\n}) => {\n  // HINT: ReactNodeとObjectのどちらかを判定\n  // typeofはnullの場合もobject判定されてしまうため念の為falsyで判定\n  // ReactNodeの一部であるReactElementもobjectとして判定されてしまうためisValidElementで判定\n  const trigger: ObjectTriggerType =\n    !orgTrigger || typeof orgTrigger !== 'object' || isValidElement(orgTrigger)\n      ? {\n          text: orgTrigger as ReactNode,\n        }\n      : (orgTrigger as ObjectTriggerType)\n  const { localize } = useIntl()\n\n  const decorated = useMemo(\n    () => ({\n      filteredIconAlt:\n        (typeof filtered === 'object' && filtered.iconAlt) ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/status',\n          defaultText: '適用中',\n        }),\n      trigger:\n        trigger.text ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/triggerText',\n          defaultText: '絞り込み',\n        }),\n      applyText:\n        applyText ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/applyText',\n          defaultText: '適用',\n        }),\n      cancelText:\n        cancelText ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/cancelText',\n          defaultText: 'キャンセル',\n        }),\n      resetText:\n        resetText ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/resetText',\n          defaultText: '絞り込み条件を解除',\n        }),\n    }),\n    [filtered, trigger.text, applyText, cancelText, resetText, localize],\n  )\n\n  const filteredIconAlt = useMemo(\n    () => innerText(decorated.filteredIconAlt),\n    [decorated.filteredIconAlt],\n  )\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const classNamesMapper = useMemo(() => {\n    const {\n      iconWrapper,\n      filteredIcon,\n      inner,\n      actionArea,\n      resetButtonArea,\n      rightButtonArea,\n      message,\n    } = classNameGenerator()\n\n    const commonStyles = {\n      filteredIcon: filteredIcon(),\n      inner: inner(),\n      actionArea: actionArea(),\n      resetButtonArea: resetButtonArea(),\n      rightButtonArea: rightButtonArea(),\n      message: message(),\n    }\n\n    return {\n      filtered: {\n        ...commonStyles,\n        iconWrapper: iconWrapper({ filtered: true, triggerSize: trigger.size }),\n      },\n      unfiltered: {\n        ...commonStyles,\n        iconWrapper: iconWrapper({ filtered: false, triggerSize: trigger.size }),\n      },\n    }\n  }, [trigger.size])\n\n  const classNames = classNamesMapper[filtered ? 'filtered' : 'unfiltered']\n\n  const { buttonSuffix, buttonContent } = useMemo(() => {\n    const FilterIcon = (\n      <span className={classNames.iconWrapper}>\n        <FaFilterIcon alt={trigger.onlyIcon ? decorated.trigger : undefined} />\n\n        {filtered && (\n          // HINT: altに揃えたいが、styleが複雑になってしまうためaria-labelを利用している\n          <FaCircleCheckIcon aria-label={filteredIconAlt} className={classNames.filteredIcon} />\n        )}\n      </span>\n    )\n\n    if (trigger.onlyIcon) {\n      return {\n        buttonSuffix: undefined,\n        buttonContent: FilterIcon,\n      }\n    }\n\n    return {\n      buttonSuffix: FilterIcon,\n      buttonContent: decorated.trigger,\n    }\n  }, [filtered, decorated.trigger, trigger.onlyIcon, filteredIconAlt, classNames])\n\n  return (\n    <Dropdown onOpen={onOpen} onClose={onClose}>\n      <DropdownTrigger tooltip={{ show: trigger.onlyIcon, message: decorated.trigger }}>\n        <Button {...rest} suffix={buttonSuffix} size={trigger.size}>\n          {buttonContent}\n        </Button>\n      </DropdownTrigger>\n      <DropdownContent controllable>\n        <form onSubmit={ON_SUBMIT}>\n          <div className={classNames.inner}>{children}</div>\n          <Stack gap={0.5} className={classNames.actionArea}>\n            <Cluster gap={1} align=\"center\" justify=\"space-between\">\n              {onReset && (\n                <div className={classNames.resetButtonArea}>\n                  <Button\n                    variant=\"text\"\n                    size=\"S\"\n                    prefix={<FaRotateLeftIcon />}\n                    onClick={onReset}\n                    disabled={calcedResponseStatus.isProcessing}\n                  >\n                    {decorated.resetText}\n                  </Button>\n                </div>\n              )}\n\n              <Cluster\n                gap={CONTROL_CLUSTER_GAP}\n                justify=\"flex-end\"\n                className={classNames.rightButtonArea}\n              >\n                <DropdownCloser>\n                  <Button onClick={onCancel} disabled={calcedResponseStatus.isProcessing}>\n                    {decorated.cancelText}\n                  </Button>\n                </DropdownCloser>\n                <DropdownCloser>\n                  <Button\n                    variant=\"primary\"\n                    onClick={onApply}\n                    loading={calcedResponseStatus.isProcessing}\n                  >\n                    {decorated.applyText}\n                  </Button>\n                </DropdownCloser>\n              </Cluster>\n            </Cluster>\n            {calcedResponseStatus.message && (\n              <div className={classNames.message}>\n                <ResponseMessage status={calcedResponseStatus.status} role=\"alert\">\n                  {calcedResponseStatus.message}\n                </ResponseMessage>\n              </div>\n            )}\n          </Stack>\n        </form>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA;AACA;;AAEA;AAEA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACE;AACD;AACF;AACD;AACE;AACA;AACE;AACD;AACF;AACF;AACF;AAEM;;;;AAkBL;AAEI;AACI;AACD;;AAEP;AAEA;;AAIM;AACE;AACA;;;AAIF;AACE;AACA;;AAEJ;AAEE;AACE;AACA;;AAEJ;AAEE;AACE;AACA;;AAEJ;AAEE;AACE;AACA;;AAEL;;AAQH;AAEA;AACE;AAUA;;;;;;;;;AAUE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAEL;AAEA;;AAGE;;AAMM;AAKN;;AAEI;AACA;;;;AAKF;;;AAGJ;;AA6DF;;"}
+{"version":3,"file":"FilterDropdown.cjs","sources":["../../../../src/components/Dropdown/FilterDropdown/FilterDropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type FormEvent,\n  type MouseEventHandler,\n  type ReactNode,\n  isValidElement,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\nimport { Button, type AbstractProps as ButtonProps } from '../../Button'\nimport { FaCircleCheckIcon, FaFilterIcon, FaRotateLeftIcon } from '../../Icon'\nimport { Cluster, Stack } from '../../Layout'\nimport { ResponseMessage } from '../../ResponseMessage'\nimport { Dropdown } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\ntype ObjectTriggerType = {\n  text?: ReactNode\n  /** 引き金となるボタンの大きさ */\n  size?: ButtonProps['size']\n  /** 引き金となるボタンをアイコンのみとするかどうか */\n  onlyIcon?: boolean\n}\ntype AbstractProps = {\n  /** 引き金となるボタン */\n  trigger?: ReactNode | ObjectTriggerType\n  applyText?: ReactNode\n  cancelText?: ReactNode\n  resetText?: ReactNode\n  children: ReactNode\n  filtered?:\n    | boolean\n    | {\n        iconAlt?: string\n      }\n  responseStatus?: ResponseStatus\n  onApply: MouseEventHandler<HTMLButtonElement>\n  onCancel?: MouseEventHandler<HTMLButtonElement>\n  onReset?: MouseEventHandler<HTMLButtonElement>\n  onOpen?: () => void\n  onClose?: () => void\n}\ntype Props = AbstractProps & Omit<ComponentProps<'button'>, keyof AbstractProps>\n\nconst CONTROL_CLUSTER_GAP: ComponentProps<typeof Cluster>['gap'] = { column: 1, row: 0.5 }\nconst ON_SUBMIT = (e: FormEvent) => {\n  e.preventDefault()\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    iconWrapper: ['smarthr-ui-Icon-extended', 'shr-relative shr-leading-none'],\n    filteredIcon: 'shr-absolute shr-bottom-[2px] shr-right-[-4px] shr-h-[0.5em] shr-w-[0.5em]',\n    inner: 'shr-p-1.5',\n    actionArea: 'shr-border-t-shorthand shr-sticky shr-bottom-0 shr-bg-white shr-px-1.5 shr-py-1',\n    resetButtonArea: '-shr-ms-0.5',\n    rightButtonArea: 'shr-ms-auto',\n    message: 'shr-text-right',\n  },\n  variants: {\n    filtered: {\n      true: {\n        iconWrapper: 'shr-text-main',\n      },\n    },\n    triggerSize: {\n      M: {},\n      S: {\n        iconWrapper: '-shr-translate-x-0.25',\n      },\n    },\n  },\n})\n\nexport const FilterDropdown: FC<Props> = ({\n  trigger: orgTrigger,\n  applyText,\n  cancelText,\n  resetText,\n  children,\n  filtered,\n  responseStatus,\n  onApply,\n  onCancel,\n  onReset,\n  onOpen,\n  onClose,\n  ...rest\n}) => {\n  // HINT: ReactNodeとObjectのどちらかを判定\n  // typeofはnullの場合もobject判定されてしまうため念の為falsyで判定\n  // ReactNodeの一部であるReactElementもobjectとして判定されてしまうためisValidElementで判定\n  const trigger: ObjectTriggerType =\n    !orgTrigger || typeof orgTrigger !== 'object' || isValidElement(orgTrigger)\n      ? {\n          text: orgTrigger as ReactNode,\n        }\n      : (orgTrigger as ObjectTriggerType)\n  const { localize } = useIntl()\n\n  const decorated = useMemo(\n    () => ({\n      filteredIconAlt:\n        (typeof filtered === 'object' && filtered.iconAlt) ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/status',\n          defaultText: '適用中',\n        }),\n      trigger:\n        trigger.text ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/triggerText',\n          defaultText: '絞り込み',\n        }),\n      applyText:\n        applyText ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/applyText',\n          defaultText: '適用',\n        }),\n      cancelText:\n        cancelText ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/cancelText',\n          defaultText: 'キャンセル',\n        }),\n      resetText:\n        resetText ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/resetText',\n          defaultText: '絞り込み条件を解除',\n        }),\n    }),\n    [filtered, trigger.text, applyText, cancelText, resetText, localize],\n  )\n\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const classNamesMapper = useMemo(() => {\n    const {\n      iconWrapper,\n      filteredIcon,\n      inner,\n      actionArea,\n      resetButtonArea,\n      rightButtonArea,\n      message,\n    } = classNameGenerator()\n\n    const commonStyles = {\n      filteredIcon: filteredIcon(),\n      inner: inner(),\n      actionArea: actionArea(),\n      resetButtonArea: resetButtonArea(),\n      rightButtonArea: rightButtonArea(),\n      message: message(),\n    }\n\n    return {\n      filtered: {\n        ...commonStyles,\n        iconWrapper: iconWrapper({ filtered: true, triggerSize: trigger.size }),\n      },\n      unfiltered: {\n        ...commonStyles,\n        iconWrapper: iconWrapper({ filtered: false, triggerSize: trigger.size }),\n      },\n    }\n  }, [trigger.size])\n\n  const classNames = classNamesMapper[filtered ? 'filtered' : 'unfiltered']\n\n  const { buttonSuffix, buttonContent } = useMemo(() => {\n    const FilterIcon = (\n      <span className={classNames.iconWrapper}>\n        <FaFilterIcon alt={trigger.onlyIcon ? decorated.trigger : undefined} />\n\n        {filtered && (\n          // HINT: altに揃えたいが、styleが複雑になってしまうためaria-labelを利用している\n          <FaCircleCheckIcon\n            aria-label={decorated.filteredIconAlt}\n            className={classNames.filteredIcon}\n          />\n        )}\n      </span>\n    )\n\n    if (trigger.onlyIcon) {\n      return {\n        buttonSuffix: undefined,\n        buttonContent: FilterIcon,\n      }\n    }\n\n    return {\n      buttonSuffix: FilterIcon,\n      buttonContent: decorated.trigger,\n    }\n  }, [filtered, decorated.trigger, decorated.filteredIconAlt, trigger.onlyIcon, classNames])\n\n  return (\n    <Dropdown onOpen={onOpen} onClose={onClose}>\n      <DropdownTrigger tooltip={{ show: trigger.onlyIcon, message: decorated.trigger }}>\n        <Button {...rest} suffix={buttonSuffix} size={trigger.size}>\n          {buttonContent}\n        </Button>\n      </DropdownTrigger>\n      <DropdownContent controllable>\n        <form onSubmit={ON_SUBMIT}>\n          <div className={classNames.inner}>{children}</div>\n          <Stack gap={0.5} className={classNames.actionArea}>\n            <Cluster gap={1} align=\"center\" justify=\"space-between\">\n              {onReset && (\n                <div className={classNames.resetButtonArea}>\n                  <Button\n                    variant=\"text\"\n                    size=\"S\"\n                    prefix={<FaRotateLeftIcon />}\n                    onClick={onReset}\n                    disabled={calcedResponseStatus.isProcessing}\n                  >\n                    {decorated.resetText}\n                  </Button>\n                </div>\n              )}\n\n              <Cluster\n                gap={CONTROL_CLUSTER_GAP}\n                justify=\"flex-end\"\n                className={classNames.rightButtonArea}\n              >\n                <DropdownCloser>\n                  <Button onClick={onCancel} disabled={calcedResponseStatus.isProcessing}>\n                    {decorated.cancelText}\n                  </Button>\n                </DropdownCloser>\n                <DropdownCloser>\n                  <Button\n                    variant=\"primary\"\n                    onClick={onApply}\n                    loading={calcedResponseStatus.isProcessing}\n                  >\n                    {decorated.applyText}\n                  </Button>\n                </DropdownCloser>\n              </Cluster>\n            </Cluster>\n            {calcedResponseStatus.message && (\n              <div className={classNames.message}>\n                <ResponseMessage status={calcedResponseStatus.status} role=\"alert\">\n                  {calcedResponseStatus.message}\n                </ResponseMessage>\n              </div>\n            )}\n          </Stack>\n        </form>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA;AACA;;AAEA;AAEA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACE;AACD;AACF;AACD;AACE;AACA;AACE;AACD;AACF;AACF;AACF;AAEM;;;;AAkBL;AAEI;AACI;AACD;;AAEP;AAEA;;AAIM;AACE;AACA;;;AAIF;AACE;AACA;;AAEJ;AAEE;AACE;AACA;;AAEJ;AAEE;AACE;AACA;;AAEJ;AAEE;AACE;AACA;;AAEL;AAIH;AAEA;AACE;AAUA;;;;;;;;;AAUE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAEL;AAEA;;AAGE;;AAMM;AAQN;;AAEI;AACA;;;;AAKF;;;AAGJ;;AA6DF;;"}

package/lib/components/Dropdown/FilterDropdown/FilterDropdown.d.ts

@@ -16,7 +16,7 @@ type AbstractProps = {
     resetText?: ReactNode;
     children: ReactNode;
     filtered?: boolean | {
-        iconAlt?: ReactNode;
+        iconAlt?: string;
     };
     responseStatus?: ResponseStatus;
     onApply: MouseEventHandler<HTMLButtonElement>;

package/lib/components/Dropdown/FilterDropdown/FilterDropdown.js

@@ -1,12 +1,11 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { isValidElement, useMemo } from 'react';
-import innerText from '../../../_virtual/index3.js';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { useResponseStatus } from '../../../hooks/useResponseStatus.js';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../intl/Localizer.js';
 import '../../../_virtual/dayjs.min.js';
 import '../../../intl/TimeFormatter.js';
 import { Button } from '../../Button/Button.js';
@@ -92,7 +91,6 @@ const FilterDropdown = ({ trigger: orgTrigger, applyText, cancelText, resetText,
                 defaultText: '絞り込み条件を解除',
             }),
     }), [filtered, trigger.text, applyText, cancelText, resetText, localize]);
-    const filteredIconAlt = useMemo(() => innerText(decorated.filteredIconAlt), [decorated.filteredIconAlt]);
     const calcedResponseStatus = useResponseStatus(responseStatus);
     const classNamesMapper = useMemo(() => {
         const { iconWrapper, filteredIcon, inner, actionArea, resetButtonArea, rightButtonArea, message, } = classNameGenerator();
@@ -119,7 +117,7 @@ const FilterDropdown = ({ trigger: orgTrigger, applyText, cancelText, resetText,
     const { buttonSuffix, buttonContent } = useMemo(() => {
         const FilterIcon = (jsxs("span", { className: classNames.iconWrapper, children: [jsx(FaFilterIcon, { alt: trigger.onlyIcon ? decorated.trigger : undefined }), filtered && (
                 // HINT: altに揃えたいが、styleが複雑になってしまうためaria-labelを利用している
-                jsx(FaCircleCheckIcon, { "aria-label": filteredIconAlt, className: classNames.filteredIcon }))] }));
+                jsx(FaCircleCheckIcon, { "aria-label": decorated.filteredIconAlt, className: classNames.filteredIcon }))] }));
         if (trigger.onlyIcon) {
             return {
                 buttonSuffix: undefined,
@@ -130,7 +128,7 @@ const FilterDropdown = ({ trigger: orgTrigger, applyText, cancelText, resetText,
             buttonSuffix: FilterIcon,
             buttonContent: decorated.trigger,
         };
-    }, [filtered, decorated.trigger, trigger.onlyIcon, filteredIconAlt, classNames]);
+    }, [filtered, decorated.trigger, decorated.filteredIconAlt, trigger.onlyIcon, classNames]);
     return (jsxs(Dropdown, { onOpen: onOpen, onClose: onClose, children: [jsx(DropdownTrigger, { tooltip: { show: trigger.onlyIcon, message: decorated.trigger }, children: jsx(Button, { ...rest, suffix: buttonSuffix, size: trigger.size, children: buttonContent }) }), jsx(DropdownContent, { controllable: true, children: jsxs("form", { onSubmit: ON_SUBMIT, children: [jsx("div", { className: classNames.inner, children: children }), jsxs(Stack, { gap: 0.5, className: classNames.actionArea, children: [jsxs(Cluster, { gap: 1, align: "center", justify: "space-between", children: [onReset && (jsx("div", { className: classNames.resetButtonArea, children: jsx(Button, { variant: "text", size: "S", prefix: jsx(FaRotateLeftIcon, {}), onClick: onReset, disabled: calcedResponseStatus.isProcessing, children: decorated.resetText }) })), jsxs(Cluster, { gap: CONTROL_CLUSTER_GAP, justify: "flex-end", className: classNames.rightButtonArea, children: [jsx(DropdownCloser, { children: jsx(Button, { onClick: onCancel, disabled: calcedResponseStatus.isProcessing, children: decorated.cancelText }) }), jsx(DropdownCloser, { children: jsx(Button, { variant: "primary", onClick: onApply, loading: calcedResponseStatus.isProcessing, children: decorated.applyText }) })] })] }), calcedResponseStatus.message && (jsx("div", { className: classNames.message, children: jsx(ResponseMessage, { status: calcedResponseStatus.status, role: "alert", children: calcedResponseStatus.message }) }))] })] }) })] }));
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/components/Dropdown/FilterDropdown/FilterDropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type FormEvent,\n  type MouseEventHandler,\n  type ReactNode,\n  isValidElement,\n  useMemo,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\nimport { Button, type AbstractProps as ButtonProps } from '../../Button'\nimport { FaCircleCheckIcon, FaFilterIcon, FaRotateLeftIcon } from '../../Icon'\nimport { Cluster, Stack } from '../../Layout'\nimport { ResponseMessage } from '../../ResponseMessage'\nimport { Dropdown } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\ntype ObjectTriggerType = {\n  text?: ReactNode\n  /** 引き金となるボタンの大きさ */\n  size?: ButtonProps['size']\n  /** 引き金となるボタンをアイコンのみとするかどうか */\n  onlyIcon?: boolean\n}\ntype AbstractProps = {\n  /** 引き金となるボタン */\n  trigger?: ReactNode | ObjectTriggerType\n  applyText?: ReactNode\n  cancelText?: ReactNode\n  resetText?: ReactNode\n  children: ReactNode\n  filtered?:\n    | boolean\n    | {\n        iconAlt?: ReactNode\n      }\n  responseStatus?: ResponseStatus\n  onApply: MouseEventHandler<HTMLButtonElement>\n  onCancel?: MouseEventHandler<HTMLButtonElement>\n  onReset?: MouseEventHandler<HTMLButtonElement>\n  onOpen?: () => void\n  onClose?: () => void\n}\ntype Props = AbstractProps & Omit<ComponentProps<'button'>, keyof AbstractProps>\n\nconst CONTROL_CLUSTER_GAP: ComponentProps<typeof Cluster>['gap'] = { column: 1, row: 0.5 }\nconst ON_SUBMIT = (e: FormEvent) => {\n  e.preventDefault()\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    iconWrapper: ['smarthr-ui-Icon-extended', 'shr-relative shr-leading-none'],\n    filteredIcon: 'shr-absolute shr-bottom-[2px] shr-right-[-4px] shr-h-[0.5em] shr-w-[0.5em]',\n    inner: 'shr-p-1.5',\n    actionArea: 'shr-border-t-shorthand shr-sticky shr-bottom-0 shr-bg-white shr-px-1.5 shr-py-1',\n    resetButtonArea: '-shr-ms-0.5',\n    rightButtonArea: 'shr-ms-auto',\n    message: 'shr-text-right',\n  },\n  variants: {\n    filtered: {\n      true: {\n        iconWrapper: 'shr-text-main',\n      },\n    },\n    triggerSize: {\n      M: {},\n      S: {\n        iconWrapper: '-shr-translate-x-0.25',\n      },\n    },\n  },\n})\n\nexport const FilterDropdown: FC<Props> = ({\n  trigger: orgTrigger,\n  applyText,\n  cancelText,\n  resetText,\n  children,\n  filtered,\n  responseStatus,\n  onApply,\n  onCancel,\n  onReset,\n  onOpen,\n  onClose,\n  ...rest\n}) => {\n  // HINT: ReactNodeとObjectのどちらかを判定\n  // typeofはnullの場合もobject判定されてしまうため念の為falsyで判定\n  // ReactNodeの一部であるReactElementもobjectとして判定されてしまうためisValidElementで判定\n  const trigger: ObjectTriggerType =\n    !orgTrigger || typeof orgTrigger !== 'object' || isValidElement(orgTrigger)\n      ? {\n          text: orgTrigger as ReactNode,\n        }\n      : (orgTrigger as ObjectTriggerType)\n  const { localize } = useIntl()\n\n  const decorated = useMemo(\n    () => ({\n      filteredIconAlt:\n        (typeof filtered === 'object' && filtered.iconAlt) ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/status',\n          defaultText: '適用中',\n        }),\n      trigger:\n        trigger.text ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/triggerText',\n          defaultText: '絞り込み',\n        }),\n      applyText:\n        applyText ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/applyText',\n          defaultText: '適用',\n        }),\n      cancelText:\n        cancelText ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/cancelText',\n          defaultText: 'キャンセル',\n        }),\n      resetText:\n        resetText ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/resetText',\n          defaultText: '絞り込み条件を解除',\n        }),\n    }),\n    [filtered, trigger.text, applyText, cancelText, resetText, localize],\n  )\n\n  const filteredIconAlt = useMemo(\n    () => innerText(decorated.filteredIconAlt),\n    [decorated.filteredIconAlt],\n  )\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const classNamesMapper = useMemo(() => {\n    const {\n      iconWrapper,\n      filteredIcon,\n      inner,\n      actionArea,\n      resetButtonArea,\n      rightButtonArea,\n      message,\n    } = classNameGenerator()\n\n    const commonStyles = {\n      filteredIcon: filteredIcon(),\n      inner: inner(),\n      actionArea: actionArea(),\n      resetButtonArea: resetButtonArea(),\n      rightButtonArea: rightButtonArea(),\n      message: message(),\n    }\n\n    return {\n      filtered: {\n        ...commonStyles,\n        iconWrapper: iconWrapper({ filtered: true, triggerSize: trigger.size }),\n      },\n      unfiltered: {\n        ...commonStyles,\n        iconWrapper: iconWrapper({ filtered: false, triggerSize: trigger.size }),\n      },\n    }\n  }, [trigger.size])\n\n  const classNames = classNamesMapper[filtered ? 'filtered' : 'unfiltered']\n\n  const { buttonSuffix, buttonContent } = useMemo(() => {\n    const FilterIcon = (\n      <span className={classNames.iconWrapper}>\n        <FaFilterIcon alt={trigger.onlyIcon ? decorated.trigger : undefined} />\n\n        {filtered && (\n          // HINT: altに揃えたいが、styleが複雑になってしまうためaria-labelを利用している\n          <FaCircleCheckIcon aria-label={filteredIconAlt} className={classNames.filteredIcon} />\n        )}\n      </span>\n    )\n\n    if (trigger.onlyIcon) {\n      return {\n        buttonSuffix: undefined,\n        buttonContent: FilterIcon,\n      }\n    }\n\n    return {\n      buttonSuffix: FilterIcon,\n      buttonContent: decorated.trigger,\n    }\n  }, [filtered, decorated.trigger, trigger.onlyIcon, filteredIconAlt, classNames])\n\n  return (\n    <Dropdown onOpen={onOpen} onClose={onClose}>\n      <DropdownTrigger tooltip={{ show: trigger.onlyIcon, message: decorated.trigger }}>\n        <Button {...rest} suffix={buttonSuffix} size={trigger.size}>\n          {buttonContent}\n        </Button>\n      </DropdownTrigger>\n      <DropdownContent controllable>\n        <form onSubmit={ON_SUBMIT}>\n          <div className={classNames.inner}>{children}</div>\n          <Stack gap={0.5} className={classNames.actionArea}>\n            <Cluster gap={1} align=\"center\" justify=\"space-between\">\n              {onReset && (\n                <div className={classNames.resetButtonArea}>\n                  <Button\n                    variant=\"text\"\n                    size=\"S\"\n                    prefix={<FaRotateLeftIcon />}\n                    onClick={onReset}\n                    disabled={calcedResponseStatus.isProcessing}\n                  >\n                    {decorated.resetText}\n                  </Button>\n                </div>\n              )}\n\n              <Cluster\n                gap={CONTROL_CLUSTER_GAP}\n                justify=\"flex-end\"\n                className={classNames.rightButtonArea}\n              >\n                <DropdownCloser>\n                  <Button onClick={onCancel} disabled={calcedResponseStatus.isProcessing}>\n                    {decorated.cancelText}\n                  </Button>\n                </DropdownCloser>\n                <DropdownCloser>\n                  <Button\n                    variant=\"primary\"\n                    onClick={onApply}\n                    loading={calcedResponseStatus.isProcessing}\n                  >\n                    {decorated.applyText}\n                  </Button>\n                </DropdownCloser>\n              </Cluster>\n            </Cluster>\n            {calcedResponseStatus.message && (\n              <div className={classNames.message}>\n                <ResponseMessage status={calcedResponseStatus.status} role=\"alert\">\n                  {calcedResponseStatus.message}\n                </ResponseMessage>\n              </div>\n            )}\n          </Stack>\n        </form>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA;AACA;;AAEA;AAEA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACE;AACD;AACF;AACD;AACE;AACA;AACE;AACD;AACF;AACF;AACF;AAEM;;;;AAkBL;AAEI;AACI;AACD;;AAEP;AAEA;;AAIM;AACE;AACA;;;AAIF;AACE;AACA;;AAEJ;AAEE;AACE;AACA;;AAEJ;AAEE;AACE;AACA;;AAEJ;AAEE;AACE;AACA;;AAEL;;AAQH;AAEA;AACE;AAUA;;;;;;;;;AAUE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAEL;AAEA;;AAGE;;AAMM;AAKN;;AAEI;AACA;;;;AAKF;;;AAGJ;;AA6DF;;"}
+{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/components/Dropdown/FilterDropdown/FilterDropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type FormEvent,\n  type MouseEventHandler,\n  type ReactNode,\n  isValidElement,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus'\nimport { useIntl } from '../../../intl'\nimport { Button, type AbstractProps as ButtonProps } from '../../Button'\nimport { FaCircleCheckIcon, FaFilterIcon, FaRotateLeftIcon } from '../../Icon'\nimport { Cluster, Stack } from '../../Layout'\nimport { ResponseMessage } from '../../ResponseMessage'\nimport { Dropdown } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\ntype ObjectTriggerType = {\n  text?: ReactNode\n  /** 引き金となるボタンの大きさ */\n  size?: ButtonProps['size']\n  /** 引き金となるボタンをアイコンのみとするかどうか */\n  onlyIcon?: boolean\n}\ntype AbstractProps = {\n  /** 引き金となるボタン */\n  trigger?: ReactNode | ObjectTriggerType\n  applyText?: ReactNode\n  cancelText?: ReactNode\n  resetText?: ReactNode\n  children: ReactNode\n  filtered?:\n    | boolean\n    | {\n        iconAlt?: string\n      }\n  responseStatus?: ResponseStatus\n  onApply: MouseEventHandler<HTMLButtonElement>\n  onCancel?: MouseEventHandler<HTMLButtonElement>\n  onReset?: MouseEventHandler<HTMLButtonElement>\n  onOpen?: () => void\n  onClose?: () => void\n}\ntype Props = AbstractProps & Omit<ComponentProps<'button'>, keyof AbstractProps>\n\nconst CONTROL_CLUSTER_GAP: ComponentProps<typeof Cluster>['gap'] = { column: 1, row: 0.5 }\nconst ON_SUBMIT = (e: FormEvent) => {\n  e.preventDefault()\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    iconWrapper: ['smarthr-ui-Icon-extended', 'shr-relative shr-leading-none'],\n    filteredIcon: 'shr-absolute shr-bottom-[2px] shr-right-[-4px] shr-h-[0.5em] shr-w-[0.5em]',\n    inner: 'shr-p-1.5',\n    actionArea: 'shr-border-t-shorthand shr-sticky shr-bottom-0 shr-bg-white shr-px-1.5 shr-py-1',\n    resetButtonArea: '-shr-ms-0.5',\n    rightButtonArea: 'shr-ms-auto',\n    message: 'shr-text-right',\n  },\n  variants: {\n    filtered: {\n      true: {\n        iconWrapper: 'shr-text-main',\n      },\n    },\n    triggerSize: {\n      M: {},\n      S: {\n        iconWrapper: '-shr-translate-x-0.25',\n      },\n    },\n  },\n})\n\nexport const FilterDropdown: FC<Props> = ({\n  trigger: orgTrigger,\n  applyText,\n  cancelText,\n  resetText,\n  children,\n  filtered,\n  responseStatus,\n  onApply,\n  onCancel,\n  onReset,\n  onOpen,\n  onClose,\n  ...rest\n}) => {\n  // HINT: ReactNodeとObjectのどちらかを判定\n  // typeofはnullの場合もobject判定されてしまうため念の為falsyで判定\n  // ReactNodeの一部であるReactElementもobjectとして判定されてしまうためisValidElementで判定\n  const trigger: ObjectTriggerType =\n    !orgTrigger || typeof orgTrigger !== 'object' || isValidElement(orgTrigger)\n      ? {\n          text: orgTrigger as ReactNode,\n        }\n      : (orgTrigger as ObjectTriggerType)\n  const { localize } = useIntl()\n\n  const decorated = useMemo(\n    () => ({\n      filteredIconAlt:\n        (typeof filtered === 'object' && filtered.iconAlt) ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/status',\n          defaultText: '適用中',\n        }),\n      trigger:\n        trigger.text ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/triggerText',\n          defaultText: '絞り込み',\n        }),\n      applyText:\n        applyText ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/applyText',\n          defaultText: '適用',\n        }),\n      cancelText:\n        cancelText ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/cancelText',\n          defaultText: 'キャンセル',\n        }),\n      resetText:\n        resetText ||\n        localize({\n          id: 'smarthr-ui/FilterDropdown/resetText',\n          defaultText: '絞り込み条件を解除',\n        }),\n    }),\n    [filtered, trigger.text, applyText, cancelText, resetText, localize],\n  )\n\n  const calcedResponseStatus = useResponseStatus(responseStatus)\n\n  const classNamesMapper = useMemo(() => {\n    const {\n      iconWrapper,\n      filteredIcon,\n      inner,\n      actionArea,\n      resetButtonArea,\n      rightButtonArea,\n      message,\n    } = classNameGenerator()\n\n    const commonStyles = {\n      filteredIcon: filteredIcon(),\n      inner: inner(),\n      actionArea: actionArea(),\n      resetButtonArea: resetButtonArea(),\n      rightButtonArea: rightButtonArea(),\n      message: message(),\n    }\n\n    return {\n      filtered: {\n        ...commonStyles,\n        iconWrapper: iconWrapper({ filtered: true, triggerSize: trigger.size }),\n      },\n      unfiltered: {\n        ...commonStyles,\n        iconWrapper: iconWrapper({ filtered: false, triggerSize: trigger.size }),\n      },\n    }\n  }, [trigger.size])\n\n  const classNames = classNamesMapper[filtered ? 'filtered' : 'unfiltered']\n\n  const { buttonSuffix, buttonContent } = useMemo(() => {\n    const FilterIcon = (\n      <span className={classNames.iconWrapper}>\n        <FaFilterIcon alt={trigger.onlyIcon ? decorated.trigger : undefined} />\n\n        {filtered && (\n          // HINT: altに揃えたいが、styleが複雑になってしまうためaria-labelを利用している\n          <FaCircleCheckIcon\n            aria-label={decorated.filteredIconAlt}\n            className={classNames.filteredIcon}\n          />\n        )}\n      </span>\n    )\n\n    if (trigger.onlyIcon) {\n      return {\n        buttonSuffix: undefined,\n        buttonContent: FilterIcon,\n      }\n    }\n\n    return {\n      buttonSuffix: FilterIcon,\n      buttonContent: decorated.trigger,\n    }\n  }, [filtered, decorated.trigger, decorated.filteredIconAlt, trigger.onlyIcon, classNames])\n\n  return (\n    <Dropdown onOpen={onOpen} onClose={onClose}>\n      <DropdownTrigger tooltip={{ show: trigger.onlyIcon, message: decorated.trigger }}>\n        <Button {...rest} suffix={buttonSuffix} size={trigger.size}>\n          {buttonContent}\n        </Button>\n      </DropdownTrigger>\n      <DropdownContent controllable>\n        <form onSubmit={ON_SUBMIT}>\n          <div className={classNames.inner}>{children}</div>\n          <Stack gap={0.5} className={classNames.actionArea}>\n            <Cluster gap={1} align=\"center\" justify=\"space-between\">\n              {onReset && (\n                <div className={classNames.resetButtonArea}>\n                  <Button\n                    variant=\"text\"\n                    size=\"S\"\n                    prefix={<FaRotateLeftIcon />}\n                    onClick={onReset}\n                    disabled={calcedResponseStatus.isProcessing}\n                  >\n                    {decorated.resetText}\n                  </Button>\n                </div>\n              )}\n\n              <Cluster\n                gap={CONTROL_CLUSTER_GAP}\n                justify=\"flex-end\"\n                className={classNames.rightButtonArea}\n              >\n                <DropdownCloser>\n                  <Button onClick={onCancel} disabled={calcedResponseStatus.isProcessing}>\n                    {decorated.cancelText}\n                  </Button>\n                </DropdownCloser>\n                <DropdownCloser>\n                  <Button\n                    variant=\"primary\"\n                    onClick={onApply}\n                    loading={calcedResponseStatus.isProcessing}\n                  >\n                    {decorated.applyText}\n                  </Button>\n                </DropdownCloser>\n              </Cluster>\n            </Cluster>\n            {calcedResponseStatus.message && (\n              <div className={classNames.message}>\n                <ResponseMessage status={calcedResponseStatus.status} role=\"alert\">\n                  {calcedResponseStatus.message}\n                </ResponseMessage>\n              </div>\n            )}\n          </Stack>\n        </form>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA;AACA;;AAEA;AAEA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACE;AACD;AACF;AACD;AACE;AACA;AACE;AACD;AACF;AACF;AACF;AAEM;;;;AAkBL;AAEI;AACI;AACD;;AAEP;AAEA;;AAIM;AACE;AACA;;;AAIF;AACE;AACA;;AAEJ;AAEE;AACE;AACA;;AAEJ;AAEE;AACE;AACA;;AAEJ;AAEE;AACE;AACA;;AAEL;AAIH;AAEA;AACE;AAUA;;;;;;;;;AAUE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;;AAEL;AAEA;;AAGE;;AAMM;AAQN;;AAEI;AACA;;;;AAKF;;;AAGJ;;AA6DF;;"}

package/lib/components/Dropdown/SortDropdown/useSortDropdown.cjs

@@ -4,8 +4,8 @@ var React = require('react');
 var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
+require('../../../intl/Localizer.cjs');
 require('react/jsx-runtime');
-require('react-intl');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var components_Icon_FaIcon = require('../../Icon/FaIcon.cjs');

package/lib/components/Dropdown/SortDropdown/useSortDropdown.js

@@ -2,8 +2,8 @@ import { useMemo, useState, useEffect, useCallback } from 'react';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
+import '../../../intl/Localizer.js';
 import 'react/jsx-runtime';
-import 'react-intl';
 import '../../../_virtual/dayjs.min.js';
 import '../../../intl/TimeFormatter.js';
 import { FaArrowUpWideShortIcon, FaArrowDownWideShortIcon } from '../../Icon/FaIcon.js';

package/lib/components/ErrorScreen/AuthErrorScreen.cjs

@@ -4,7 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 var components_ErrorScreen_ErrorScreen = require('./ErrorScreen.cjs');

package/lib/components/ErrorScreen/AuthErrorScreen.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import { ErrorScreen } from './ErrorScreen.js';

package/lib/components/ErrorScreen/ForbiddenErrorScreen.cjs

@@ -4,7 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 var components_ErrorScreen_ErrorScreen = require('./ErrorScreen.cjs');

package/lib/components/ErrorScreen/ForbiddenErrorScreen.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import { ErrorScreen } from './ErrorScreen.js';

package/lib/components/ErrorScreen/NotFoundErrorScreen.cjs

@@ -4,7 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 var components_ErrorScreen_ErrorScreen = require('./ErrorScreen.cjs');

package/lib/components/ErrorScreen/NotFoundErrorScreen.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import { ErrorScreen } from './ErrorScreen.js';

package/lib/components/ErrorScreen/UnauthorizedErrorScreen.cjs

@@ -4,7 +4,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../Button/Button.cjs');

package/lib/components/ErrorScreen/UnauthorizedErrorScreen.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import { Button } from '../Button/Button.js';

package/lib/components/FormControl/FormControl.cjs

@@ -35,7 +35,6 @@ const classNameGenerator = index.tv({
         errorList: ['shr-list-none'],
         errorIcon: ['smarthr-ui-FormControl-errorMessage-Icon', 'shr-text-danger'],
         errorMessage: ['smarthr-ui-FormControl-errorMessage'],
-        underLabelStack: ['[&&&]:shr-mt-0'],
         childrenWrapper: [],
     },
     variants: {
@@ -76,13 +75,6 @@ const classNameGenerator = index.tv({
         {
             innerMargin: undefined,
             isFieldset: true,
-            class: {
-                childrenWrapper: '[:not([hidden])_~_&&&]:shr-mt-1',
-            },
-        },
-        {
-            innerMargin: undefined,
-            isFieldset: false,
             class: {
                 childrenWrapper: '[:not([hidden])_~_&&&]:shr-mt-0.5',
             },
@@ -122,7 +114,6 @@ const ActualFormControl = ({ label: orgLabel, subActionArea, innerMargin, status
         }
         return Array.isArray(errorMessages) ? errorMessages : [errorMessages];
     }, [errorMessages]);
-    const actualInnerMargin = React.useMemo(() => innerMargin ?? 0.5, [innerMargin]);
     const classNames = React.useMemo(() => {
         const generators = classNameGenerator({ innerMargin, isFieldset });
         return {
@@ -133,7 +124,6 @@ const ActualFormControl = ({ label: orgLabel, subActionArea, innerMargin, status
             errorList: generators.errorList(),
             errorIcon: generators.errorIcon(),
             errorMessage: generators.errorMessage(),
-            underLabelStack: generators.underLabelStack(),
             childrenWrapper: generators.childrenWrapper(),
         };
     }, [innerMargin, isFieldset, label.unrecommendedHide, className]);
@@ -217,14 +207,7 @@ const ActualFormControl = ({ label: orgLabel, subActionArea, innerMargin, status
             }
         });
     }, [isFieldset, label.text]);
-    let body = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(HelpMessageParagraph, { helpMessage: helpMessage, managedHtmlFor: managedHtmlFor }), jsxRuntime.jsx(ExampleMessageText, { exampleMessage: exampleMessage, managedHtmlFor: managedHtmlFor }), jsxRuntime.jsx(ErrorMessageList, { errorMessages: actualErrorMessages, managedHtmlFor: managedHtmlFor, classNames: classNames }), jsxRuntime.jsx("div", { className: classNames.childrenWrapper, ref: inputWrapperRef, children: children }), jsxRuntime.jsx(SupplementaryMessageText, { supplementaryMessage: supplementaryMessage, managedHtmlFor: managedHtmlFor })] }));
-    // HINT: label.unrecommendedHideの場合、body以下の余白の計算を簡略化するため
-    // Stackをネストし、そのStackに対してmargin-top: 0を指定する
-    // こうすることでinner Stack以下の要素は擬似的にStackの最初の要素になる
-    if (label.unrecommendedHide) {
-        body = (jsxRuntime.jsx(components_Layout_Stack_Stack.Stack, { gap: actualInnerMargin, className: classNames.underLabelStack, children: body }));
-    }
-    return (jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { ...rest, as: as, gap: actualInnerMargin, "aria-describedby": isFieldset && describedbyIds ? describedbyIds : undefined, className: classNames.wrapper, children: [jsxRuntime.jsx(LabelCluster, { isFieldset: isFieldset, managedHtmlFor: managedHtmlFor, managedLabelId: managedLabelId, unrecommendedHideLabel: label.unrecommendedHide, labelType: label.styleType, label: label.text, labelIcon: label.icon, statusLabels: actualStatusLabels, subActionArea: subActionArea, labelClassName: classNames.label }), body] }));
+    return (jsxRuntime.jsxs(components_Layout_Stack_Stack.Stack, { ...rest, as: as, gap: innerMargin ?? 0.5, "aria-describedby": isFieldset && describedbyIds ? describedbyIds : undefined, className: classNames.wrapper, children: [jsxRuntime.jsx(LabelCluster, { isFieldset: isFieldset, managedHtmlFor: managedHtmlFor, managedLabelId: managedLabelId, unrecommendedHideLabel: label.unrecommendedHide, labelType: label.styleType, label: label.text, labelIcon: label.icon, statusLabels: actualStatusLabels, subActionArea: subActionArea, labelClassName: classNames.label }), jsxRuntime.jsx(HelpMessageParagraph, { helpMessage: helpMessage, managedHtmlFor: managedHtmlFor }), jsxRuntime.jsx(ExampleMessageText, { exampleMessage: exampleMessage, managedHtmlFor: managedHtmlFor }), jsxRuntime.jsx(ErrorMessageList, { errorMessages: actualErrorMessages, managedHtmlFor: managedHtmlFor, classNames: classNames }), jsxRuntime.jsx("div", { className: classNames.childrenWrapper, ref: inputWrapperRef, children: children }), jsxRuntime.jsx(SupplementaryMessageText, { supplementaryMessage: supplementaryMessage, managedHtmlFor: managedHtmlFor })] }));
 };
 const LabelCluster = React.memo(({ isFieldset, managedHtmlFor, managedLabelId, unrecommendedHideLabel, labelType = 'blockTitle', label, labelIcon, subActionArea, labelClassName, statusLabels, }) => {
     const body = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(components_Text_Text.Text, { styleType: labelType, icon: labelIcon, children: label }), jsxRuntime.jsx(StatusLabelCluster, { statusLabels: statusLabels })] }));
@@ -261,10 +244,7 @@ const LabelCluster = React.memo(({ isFieldset, managedHtmlFor, managedLabelId, u
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [attrs.visuallyHidden && (jsxRuntime.jsx(components_VisuallyHiddenText_VisuallyHiddenText.VisuallyHiddenText, { ...attrs.visuallyHidden, children: 
                 // HINT: innerTextでは正しく文字が取得できない場合がある
                 // 安全策としてinnerTextが空を取得してきたらbody自体を埋めこみます
-                index$1(body) || body })), attrs.label && (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { justify: "space-between", 
-                // HINT: UI上、常にトップの要素になるため、Stackの計算が狂わないよう、
-                // 常にmargin-topを0にする
-                className: "[&&&]:shr--mt-0", children: [jsxRuntime.jsx(components_Layout_Cluster_Cluster.Cluster, { ...attrs.label, align: "center", className: labelClassName, children: body }), subActionArea && jsxRuntime.jsx("div", { className: "shr-grow", children: subActionArea })] }))] }));
+                index$1(body) || body })), attrs.label && (jsxRuntime.jsxs(components_Layout_Cluster_Cluster.Cluster, { justify: "space-between", children: [jsxRuntime.jsx(components_Layout_Cluster_Cluster.Cluster, { ...attrs.label, align: "center", className: labelClassName, children: body }), subActionArea && jsxRuntime.jsx("div", { className: "shr-grow", children: subActionArea })] }))] }));
 });
 const StatusLabelCluster = React.memo(({ statusLabels }) => statusLabels.length === 0 ? null : (jsxRuntime.jsx(components_Layout_Cluster_Cluster.Cluster, { gap: 0.25, as: "span", children: statusLabels })));
 const HelpMessageParagraph = React.memo(({ helpMessage, managedHtmlFor }) => helpMessage ? (jsxRuntime.jsx("p", { className: "smarthr-ui-FormControl-helpMessage", id: `${managedHtmlFor}_helpMessage`, children: helpMessage })) : null);

package/lib/components/FormControl/FormControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.cjs","sources":["../../../src/components/FormControl/FormControl.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type FC,\n  type FunctionComponentElement,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { useId } from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../hooks/useObjectAttributes'\nimport { FaCircleExclamationIcon } from '../Icon'\nimport { Cluster, Stack } from '../Layout'\nimport { Text, type TextProps } from '../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassName } from '../VisuallyHiddenText'\n\nimport type { Gap } from '../../types'\nimport type { StatusLabel } from '../StatusLabel'\n\ntype StatusLabelType = FunctionComponentElement<ComponentProps<typeof StatusLabel>>\ntype IconType = ComponentProps<typeof Text>['icon']\n\ntype ObjectLabelType = {\n  text: ReactNode\n  /** ラベルの表示タイプ */\n  styleType?: TextProps['styleType']\n  /** ラベル左に設置するアイコン */\n  icon?: IconType\n  /** ラベルを視覚的に隠すかどうか */\n  unrecommendedHide?: boolean\n  /** ラベルを紐づける入力要素のID属性と同じ値 */\n  htmlFor?: string\n  /** ラベルに適用する `id` 値 */\n  id?: string\n}\ntype AbstractProps = PropsWithChildren<{\n  /** グループのラベル名 */\n  label: ReactNode | ObjectLabelType\n  /** タイトル右の領域 */\n  subActionArea?: ReactNode\n  /** タイトル群と子要素の間の間隔調整用（基本的には不要） */\n  innerMargin?: Gap\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 Props = AbstractProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps | 'aria-labelledby'>\n\nconst labelObjectConverter = (label: ReactNode) => ({ text: label })\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-Icon]: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-Icon', 'shr-text-danger'],\n    errorMessage: ['smarthr-ui-FormControl-errorMessage'],\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> = ({\n  label: orgLabel,\n  subActionArea,\n  innerMargin,\n  statusLabels,\n  helpMessage,\n  exampleMessage,\n  errorMessages,\n  autoBindErrorInput = true,\n  supplementaryMessage,\n  as = 'div',\n  className,\n  children,\n  ...rest\n}) => {\n  const label = useObjectAttributes<ReactNode | ObjectLabelType, ObjectLabelType>(\n    orgLabel,\n    labelObjectConverter,\n  )\n  const defaultHtmlFor = useId()\n  const defaultLabelId = useId()\n  const [childInputId, setChildInputId] = useState<string>('')\n  const managedHtmlFor = label.htmlFor || childInputId || 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    () => (statusLabels ? (Array.isArray(statusLabels) ? statusLabels : [statusLabels]) : []),\n    [statusLabels],\n  )\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.unrecommendedHide ? visuallyHiddenTextClassName : '',\n      }),\n      errorList: generators.errorList(),\n      errorIcon: generators.errorIcon(),\n      errorMessage: generators.errorMessage(),\n      underLabelStack: generators.underLabelStack(),\n      childrenWrapper: generators.childrenWrapper(),\n    }\n  }, [innerMargin, isFieldset, label.unrecommendedHide, 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    const inputId = input.getAttribute('id')\n\n    if (inputId) {\n      setChildInputId(inputId)\n    } else {\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.unrecommendedHideの場合、body以下の余白の計算を簡略化するため\n  // Stackをネストし、そのStackに対してmargin-top: 0を指定する\n  // こうすることでinner Stack以下の要素は擬似的にStackの最初の要素になる\n  if (label.unrecommendedHide) {\n    body = (\n      <Stack gap={actualInnerMargin} className={classNames.underLabelStack}>\n        {body}\n      </Stack>\n    )\n  }\n\n  return (\n    <Stack\n      {...rest}\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        unrecommendedHideLabel={label.unrecommendedHide}\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?: IconType\n    unrecommendedHideLabel?: 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    unrecommendedHideLabel,\n    labelType = 'blockTitle',\n    label,\n    labelIcon,\n    subActionArea,\n    labelClassName,\n    statusLabels,\n  }) => {\n    const body = (\n      <>\n        <Text styleType={labelType} icon={labelIcon}>\n          {label}\n        </Text>\n        <StatusLabelCluster statusLabels={statusLabels} />\n      </>\n    )\n\n    const attrs = useMemo(() => {\n      if (unrecommendedHideLabel) {\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, unrecommendedHideLabel, 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    errorMessage: 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          <Text\n            className={classNames.errorMessage}\n            icon={<FaCircleExclamationIcon className={classNames.errorIcon} />}\n          >\n            {message}\n          </Text>\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, 'as' | 'disabled'>> = ActualFormControl\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAuEA;AAEA;AACE;AACE;;;;;;;;;AASC;;;AAGD;;;AAGA;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;AACA;;;AAGA;AACA;AACA;AAEA;;;AAII;;;AAGA;;;AAGA;;;AAGA;;AAGF;AACF;AAEA;AAKA;;AAEI;;AAGF;AACF;AAEA;AAEA;;;;AAKI;;;AAGA;AACA;AACA;AACA;AACA;;AAEJ;;AAGE;;;AAIE;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;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;AAyBA;AAgBO;;;"}
+{"version":3,"file":"FormControl.cjs","sources":["../../../src/components/FormControl/FormControl.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ComponentType,\n  type FC,\n  type FunctionComponentElement,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { useId } from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../hooks/useObjectAttributes'\nimport { FaCircleExclamationIcon } from '../Icon'\nimport { Cluster, Stack } from '../Layout'\nimport { Text, type TextProps } from '../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassName } from '../VisuallyHiddenText'\n\nimport type { Gap } from '../../types'\nimport type { StatusLabel } from '../StatusLabel'\n\ntype StatusLabelType = FunctionComponentElement<ComponentProps<typeof StatusLabel>>\ntype IconType = ComponentProps<typeof Text>['icon']\n\ntype ObjectLabelType = {\n  text: ReactNode\n  /** ラベルの表示タイプ */\n  styleType?: TextProps['styleType']\n  /** ラベル左に設置するアイコン */\n  icon?: IconType\n  /** ラベルを視覚的に隠すかどうか */\n  unrecommendedHide?: boolean\n  /** ラベルを紐づける入力要素のID属性と同じ値 */\n  htmlFor?: string\n  /** ラベルに適用する `id` 値 */\n  id?: string\n}\ntype AbstractProps = PropsWithChildren<{\n  /** グループのラベル名 */\n  label: ReactNode | ObjectLabelType\n  /** タイトル右の領域 */\n  subActionArea?: ReactNode\n  /** タイトル群と子要素の間の間隔調整用（基本的には不要） */\n  innerMargin?: Gap\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 Props = AbstractProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps | 'aria-labelledby'>\n\nconst labelObjectConverter = (label: ReactNode) => ({ text: label })\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-Icon]: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-Icon', 'shr-text-danger'],\n    errorMessage: ['smarthr-ui-FormControl-errorMessage'],\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-0.5',\n      },\n    },\n  ],\n})\n\nconst SMARTHR_UI_INPUT_SELECTOR = '[data-smarthr-ui-input=\"true\"]'\n\nexport const ActualFormControl: FC<Props> = ({\n  label: orgLabel,\n  subActionArea,\n  innerMargin,\n  statusLabels,\n  helpMessage,\n  exampleMessage,\n  errorMessages,\n  autoBindErrorInput = true,\n  supplementaryMessage,\n  as = 'div',\n  className,\n  children,\n  ...rest\n}) => {\n  const label = useObjectAttributes<ReactNode | ObjectLabelType, ObjectLabelType>(\n    orgLabel,\n    labelObjectConverter,\n  )\n  const defaultHtmlFor = useId()\n  const defaultLabelId = useId()\n  const [childInputId, setChildInputId] = useState<string>('')\n  const managedHtmlFor = label.htmlFor || childInputId || 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    () => (statusLabels ? (Array.isArray(statusLabels) ? statusLabels : [statusLabels]) : []),\n    [statusLabels],\n  )\n\n  const actualErrorMessages = useMemo(() => {\n    if (!errorMessages) {\n      return []\n    }\n\n    return Array.isArray(errorMessages) ? errorMessages : [errorMessages]\n  }, [errorMessages])\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.unrecommendedHide ? visuallyHiddenTextClassName : '',\n      }),\n      errorList: generators.errorList(),\n      errorIcon: generators.errorIcon(),\n      errorMessage: generators.errorMessage(),\n      childrenWrapper: generators.childrenWrapper(),\n    }\n  }, [innerMargin, isFieldset, label.unrecommendedHide, 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    const inputId = input.getAttribute('id')\n\n    if (inputId) {\n      setChildInputId(inputId)\n    } else {\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  return (\n    <Stack\n      {...rest}\n      as={as}\n      gap={innerMargin ?? 0.5}\n      aria-describedby={isFieldset && describedbyIds ? describedbyIds : undefined}\n      className={classNames.wrapper}\n    >\n      <LabelCluster\n        isFieldset={isFieldset}\n        managedHtmlFor={managedHtmlFor}\n        managedLabelId={managedLabelId}\n        unrecommendedHideLabel={label.unrecommendedHide}\n        labelType={label.styleType}\n        label={label.text}\n        labelIcon={label.icon}\n        statusLabels={actualStatusLabels}\n        subActionArea={subActionArea}\n        labelClassName={classNames.label}\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    </Stack>\n  )\n}\n\nconst LabelCluster = memo<\n  Pick<Props, 'subActionArea'> & {\n    label: ReactNode\n    labelType: TextProps['styleType']\n    labelIcon?: IconType\n    unrecommendedHideLabel?: 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    unrecommendedHideLabel,\n    labelType = 'blockTitle',\n    label,\n    labelIcon,\n    subActionArea,\n    labelClassName,\n    statusLabels,\n  }) => {\n    const body = (\n      <>\n        <Text styleType={labelType} icon={labelIcon}>\n          {label}\n        </Text>\n        <StatusLabelCluster statusLabels={statusLabels} />\n      </>\n    )\n\n    const attrs = useMemo(() => {\n      if (unrecommendedHideLabel) {\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, unrecommendedHideLabel, 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 justify=\"space-between\">\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    errorMessage: 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          <Text\n            className={classNames.errorMessage}\n            icon={<FaCircleExclamationIcon className={classNames.errorIcon} />}\n          >\n            {message}\n          </Text>\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, 'as' | 'disabled'>> = ActualFormControl\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAuEA;AAEA;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;AACF;AACF;AAED;AAEO;;AAmBL;AACA;;;AAGA;AACA;AACA;AAEA;;;AAII;;;AAGA;;;AAGA;;;AAGA;;AAGF;AACF;AAEA;AAKA;;AAEI;;AAGF;AACF;AAEA;;;;AAKI;;;AAGA;AACA;AACA;AACA;;AAEJ;;AAGE;;;AAIE;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;AAmBF;;;;;;;;AAYE;;AAEJ;;;;;;;;AAYI;AACE;;;AAEA;;;;;;;AAQJ;;;;;;AASA;;AAEA;AACE;AAEE;;;AAIF;AAEE;AACA;;;AAIJ;;AAGF;AAoCF;AAEA;;AAkCI;;;AAGM;AACA;AACE;AACI;AACD;AACH;AACI;AACA;AACA;AACD;;;;;AAML;AACA;;;;AAKF;AACE;AACA;AACA;AACD;AACD;;;AAIJ;;;;AAqBF;AAGF;AAQA;AASA;AAeA;AAyBA;AAgBO;;;"}

package/lib/components/FormControl/FormControl.js

@@ -33,7 +33,6 @@ const classNameGenerator = ce({
         errorList: ['shr-list-none'],
         errorIcon: ['smarthr-ui-FormControl-errorMessage-Icon', 'shr-text-danger'],
         errorMessage: ['smarthr-ui-FormControl-errorMessage'],
-        underLabelStack: ['[&&&]:shr-mt-0'],
         childrenWrapper: [],
     },
     variants: {
@@ -74,13 +73,6 @@ const classNameGenerator = ce({
         {
             innerMargin: undefined,
             isFieldset: true,
-            class: {
-                childrenWrapper: '[:not([hidden])_~_&&&]:shr-mt-1',
-            },
-        },
-        {
-            innerMargin: undefined,
-            isFieldset: false,
             class: {
                 childrenWrapper: '[:not([hidden])_~_&&&]:shr-mt-0.5',
             },
@@ -120,7 +112,6 @@ const ActualFormControl = ({ label: orgLabel, subActionArea, innerMargin, status
         }
         return Array.isArray(errorMessages) ? errorMessages : [errorMessages];
     }, [errorMessages]);
-    const actualInnerMargin = useMemo(() => innerMargin ?? 0.5, [innerMargin]);
     const classNames = useMemo(() => {
         const generators = classNameGenerator({ innerMargin, isFieldset });
         return {
@@ -131,7 +122,6 @@ const ActualFormControl = ({ label: orgLabel, subActionArea, innerMargin, status
             errorList: generators.errorList(),
             errorIcon: generators.errorIcon(),
             errorMessage: generators.errorMessage(),
-            underLabelStack: generators.underLabelStack(),
             childrenWrapper: generators.childrenWrapper(),
         };
     }, [innerMargin, isFieldset, label.unrecommendedHide, className]);
@@ -215,14 +205,7 @@ const ActualFormControl = ({ label: orgLabel, subActionArea, innerMargin, status
             }
         });
     }, [isFieldset, label.text]);
-    let body = (jsxs(Fragment, { children: [jsx(HelpMessageParagraph, { helpMessage: helpMessage, managedHtmlFor: managedHtmlFor }), jsx(ExampleMessageText, { exampleMessage: exampleMessage, managedHtmlFor: managedHtmlFor }), jsx(ErrorMessageList, { errorMessages: actualErrorMessages, managedHtmlFor: managedHtmlFor, classNames: classNames }), jsx("div", { className: classNames.childrenWrapper, ref: inputWrapperRef, children: children }), jsx(SupplementaryMessageText, { supplementaryMessage: supplementaryMessage, managedHtmlFor: managedHtmlFor })] }));
-    // HINT: label.unrecommendedHideの場合、body以下の余白の計算を簡略化するため
-    // Stackをネストし、そのStackに対してmargin-top: 0を指定する
-    // こうすることでinner Stack以下の要素は擬似的にStackの最初の要素になる
-    if (label.unrecommendedHide) {
-        body = (jsx(Stack, { gap: actualInnerMargin, className: classNames.underLabelStack, children: body }));
-    }
-    return (jsxs(Stack, { ...rest, as: as, gap: actualInnerMargin, "aria-describedby": isFieldset && describedbyIds ? describedbyIds : undefined, className: classNames.wrapper, children: [jsx(LabelCluster, { isFieldset: isFieldset, managedHtmlFor: managedHtmlFor, managedLabelId: managedLabelId, unrecommendedHideLabel: label.unrecommendedHide, labelType: label.styleType, label: label.text, labelIcon: label.icon, statusLabels: actualStatusLabels, subActionArea: subActionArea, labelClassName: classNames.label }), body] }));
+    return (jsxs(Stack, { ...rest, as: as, gap: innerMargin ?? 0.5, "aria-describedby": isFieldset && describedbyIds ? describedbyIds : undefined, className: classNames.wrapper, children: [jsx(LabelCluster, { isFieldset: isFieldset, managedHtmlFor: managedHtmlFor, managedLabelId: managedLabelId, unrecommendedHideLabel: label.unrecommendedHide, labelType: label.styleType, label: label.text, labelIcon: label.icon, statusLabels: actualStatusLabels, subActionArea: subActionArea, labelClassName: classNames.label }), jsx(HelpMessageParagraph, { helpMessage: helpMessage, managedHtmlFor: managedHtmlFor }), jsx(ExampleMessageText, { exampleMessage: exampleMessage, managedHtmlFor: managedHtmlFor }), jsx(ErrorMessageList, { errorMessages: actualErrorMessages, managedHtmlFor: managedHtmlFor, classNames: classNames }), jsx("div", { className: classNames.childrenWrapper, ref: inputWrapperRef, children: children }), jsx(SupplementaryMessageText, { supplementaryMessage: supplementaryMessage, managedHtmlFor: managedHtmlFor })] }));
 };
 const LabelCluster = memo(({ isFieldset, managedHtmlFor, managedLabelId, unrecommendedHideLabel, labelType = 'blockTitle', label, labelIcon, subActionArea, labelClassName, statusLabels, }) => {
     const body = (jsxs(Fragment, { children: [jsx(Text, { styleType: labelType, icon: labelIcon, children: label }), jsx(StatusLabelCluster, { statusLabels: statusLabels })] }));
@@ -259,10 +242,7 @@ const LabelCluster = memo(({ isFieldset, managedHtmlFor, managedLabelId, unrecom
     return (jsxs(Fragment, { children: [attrs.visuallyHidden && (jsx(VisuallyHiddenText, { ...attrs.visuallyHidden, children: 
                 // HINT: innerTextでは正しく文字が取得できない場合がある
                 // 安全策としてinnerTextが空を取得してきたらbody自体を埋めこみます
-                innerText(body) || body })), attrs.label && (jsxs(Cluster, { justify: "space-between", 
-                // HINT: UI上、常にトップの要素になるため、Stackの計算が狂わないよう、
-                // 常にmargin-topを0にする
-                className: "[&&&]:shr--mt-0", children: [jsx(Cluster, { ...attrs.label, align: "center", className: labelClassName, children: body }), subActionArea && jsx("div", { className: "shr-grow", children: subActionArea })] }))] }));
+                innerText(body) || body })), attrs.label && (jsxs(Cluster, { justify: "space-between", children: [jsx(Cluster, { ...attrs.label, align: "center", className: labelClassName, children: body }), subActionArea && jsx("div", { className: "shr-grow", children: subActionArea })] }))] }));
 });
 const StatusLabelCluster = memo(({ statusLabels }) => statusLabels.length === 0 ? null : (jsx(Cluster, { gap: 0.25, as: "span", children: statusLabels })));
 const HelpMessageParagraph = memo(({ helpMessage, managedHtmlFor }) => helpMessage ? (jsx("p", { className: "smarthr-ui-FormControl-helpMessage", id: `${managedHtmlFor}_helpMessage`, children: helpMessage })) : null);

package/lib/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  type FunctionComponentElement,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { useId } from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../hooks/useObjectAttributes'\nimport { FaCircleExclamationIcon } from '../Icon'\nimport { Cluster, Stack } from '../Layout'\nimport { Text, type TextProps } from '../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassName } from '../VisuallyHiddenText'\n\nimport type { Gap } from '../../types'\nimport type { StatusLabel } from '../StatusLabel'\n\ntype StatusLabelType = FunctionComponentElement<ComponentProps<typeof StatusLabel>>\ntype IconType = ComponentProps<typeof Text>['icon']\n\ntype ObjectLabelType = {\n  text: ReactNode\n  /** ラベルの表示タイプ */\n  styleType?: TextProps['styleType']\n  /** ラベル左に設置するアイコン */\n  icon?: IconType\n  /** ラベルを視覚的に隠すかどうか */\n  unrecommendedHide?: boolean\n  /** ラベルを紐づける入力要素のID属性と同じ値 */\n  htmlFor?: string\n  /** ラベルに適用する `id` 値 */\n  id?: string\n}\ntype AbstractProps = PropsWithChildren<{\n  /** グループのラベル名 */\n  label: ReactNode | ObjectLabelType\n  /** タイトル右の領域 */\n  subActionArea?: ReactNode\n  /** タイトル群と子要素の間の間隔調整用（基本的には不要） */\n  innerMargin?: Gap\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 Props = AbstractProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps | 'aria-labelledby'>\n\nconst labelObjectConverter = (label: ReactNode) => ({ text: label })\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-Icon]: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-Icon', 'shr-text-danger'],\n    errorMessage: ['smarthr-ui-FormControl-errorMessage'],\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> = ({\n  label: orgLabel,\n  subActionArea,\n  innerMargin,\n  statusLabels,\n  helpMessage,\n  exampleMessage,\n  errorMessages,\n  autoBindErrorInput = true,\n  supplementaryMessage,\n  as = 'div',\n  className,\n  children,\n  ...rest\n}) => {\n  const label = useObjectAttributes<ReactNode | ObjectLabelType, ObjectLabelType>(\n    orgLabel,\n    labelObjectConverter,\n  )\n  const defaultHtmlFor = useId()\n  const defaultLabelId = useId()\n  const [childInputId, setChildInputId] = useState<string>('')\n  const managedHtmlFor = label.htmlFor || childInputId || 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    () => (statusLabels ? (Array.isArray(statusLabels) ? statusLabels : [statusLabels]) : []),\n    [statusLabels],\n  )\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.unrecommendedHide ? visuallyHiddenTextClassName : '',\n      }),\n      errorList: generators.errorList(),\n      errorIcon: generators.errorIcon(),\n      errorMessage: generators.errorMessage(),\n      underLabelStack: generators.underLabelStack(),\n      childrenWrapper: generators.childrenWrapper(),\n    }\n  }, [innerMargin, isFieldset, label.unrecommendedHide, 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    const inputId = input.getAttribute('id')\n\n    if (inputId) {\n      setChildInputId(inputId)\n    } else {\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.unrecommendedHideの場合、body以下の余白の計算を簡略化するため\n  // Stackをネストし、そのStackに対してmargin-top: 0を指定する\n  // こうすることでinner Stack以下の要素は擬似的にStackの最初の要素になる\n  if (label.unrecommendedHide) {\n    body = (\n      <Stack gap={actualInnerMargin} className={classNames.underLabelStack}>\n        {body}\n      </Stack>\n    )\n  }\n\n  return (\n    <Stack\n      {...rest}\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        unrecommendedHideLabel={label.unrecommendedHide}\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?: IconType\n    unrecommendedHideLabel?: 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    unrecommendedHideLabel,\n    labelType = 'blockTitle',\n    label,\n    labelIcon,\n    subActionArea,\n    labelClassName,\n    statusLabels,\n  }) => {\n    const body = (\n      <>\n        <Text styleType={labelType} icon={labelIcon}>\n          {label}\n        </Text>\n        <StatusLabelCluster statusLabels={statusLabels} />\n      </>\n    )\n\n    const attrs = useMemo(() => {\n      if (unrecommendedHideLabel) {\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, unrecommendedHideLabel, 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    errorMessage: 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          <Text\n            className={classNames.errorMessage}\n            icon={<FaCircleExclamationIcon className={classNames.errorIcon} />}\n          >\n            {message}\n          </Text>\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, 'as' | 'disabled'>> = ActualFormControl\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuEA;AAEA;AACE;AACE;;;;;;;;;AASC;;;AAGD;;;AAGA;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;AACA;;;AAGA;AACA;AACA;AAEA;;;AAII;;;AAGA;;;AAGA;;;AAGA;;AAGF;AACF;AAEA;AAKA;;AAEI;;AAGF;AACF;AAEA;AAEA;;;;AAKI;;;AAGA;AACA;AACA;AACA;AACA;;AAEJ;;AAGE;;;AAIE;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;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;AAyBA;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  type FunctionComponentElement,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { useId } from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useObjectAttributes } from '../../hooks/useObjectAttributes'\nimport { FaCircleExclamationIcon } from '../Icon'\nimport { Cluster, Stack } from '../Layout'\nimport { Text, type TextProps } from '../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassName } from '../VisuallyHiddenText'\n\nimport type { Gap } from '../../types'\nimport type { StatusLabel } from '../StatusLabel'\n\ntype StatusLabelType = FunctionComponentElement<ComponentProps<typeof StatusLabel>>\ntype IconType = ComponentProps<typeof Text>['icon']\n\ntype ObjectLabelType = {\n  text: ReactNode\n  /** ラベルの表示タイプ */\n  styleType?: TextProps['styleType']\n  /** ラベル左に設置するアイコン */\n  icon?: IconType\n  /** ラベルを視覚的に隠すかどうか */\n  unrecommendedHide?: boolean\n  /** ラベルを紐づける入力要素のID属性と同じ値 */\n  htmlFor?: string\n  /** ラベルに適用する `id` 値 */\n  id?: string\n}\ntype AbstractProps = PropsWithChildren<{\n  /** グループのラベル名 */\n  label: ReactNode | ObjectLabelType\n  /** タイトル右の領域 */\n  subActionArea?: ReactNode\n  /** タイトル群と子要素の間の間隔調整用（基本的には不要） */\n  innerMargin?: Gap\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 Props = AbstractProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof AbstractProps | 'aria-labelledby'>\n\nconst labelObjectConverter = (label: ReactNode) => ({ text: label })\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-Icon]: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-Icon', 'shr-text-danger'],\n    errorMessage: ['smarthr-ui-FormControl-errorMessage'],\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-0.5',\n      },\n    },\n  ],\n})\n\nconst SMARTHR_UI_INPUT_SELECTOR = '[data-smarthr-ui-input=\"true\"]'\n\nexport const ActualFormControl: FC<Props> = ({\n  label: orgLabel,\n  subActionArea,\n  innerMargin,\n  statusLabels,\n  helpMessage,\n  exampleMessage,\n  errorMessages,\n  autoBindErrorInput = true,\n  supplementaryMessage,\n  as = 'div',\n  className,\n  children,\n  ...rest\n}) => {\n  const label = useObjectAttributes<ReactNode | ObjectLabelType, ObjectLabelType>(\n    orgLabel,\n    labelObjectConverter,\n  )\n  const defaultHtmlFor = useId()\n  const defaultLabelId = useId()\n  const [childInputId, setChildInputId] = useState<string>('')\n  const managedHtmlFor = label.htmlFor || childInputId || 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    () => (statusLabels ? (Array.isArray(statusLabels) ? statusLabels : [statusLabels]) : []),\n    [statusLabels],\n  )\n\n  const actualErrorMessages = useMemo(() => {\n    if (!errorMessages) {\n      return []\n    }\n\n    return Array.isArray(errorMessages) ? errorMessages : [errorMessages]\n  }, [errorMessages])\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.unrecommendedHide ? visuallyHiddenTextClassName : '',\n      }),\n      errorList: generators.errorList(),\n      errorIcon: generators.errorIcon(),\n      errorMessage: generators.errorMessage(),\n      childrenWrapper: generators.childrenWrapper(),\n    }\n  }, [innerMargin, isFieldset, label.unrecommendedHide, 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    const inputId = input.getAttribute('id')\n\n    if (inputId) {\n      setChildInputId(inputId)\n    } else {\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  return (\n    <Stack\n      {...rest}\n      as={as}\n      gap={innerMargin ?? 0.5}\n      aria-describedby={isFieldset && describedbyIds ? describedbyIds : undefined}\n      className={classNames.wrapper}\n    >\n      <LabelCluster\n        isFieldset={isFieldset}\n        managedHtmlFor={managedHtmlFor}\n        managedLabelId={managedLabelId}\n        unrecommendedHideLabel={label.unrecommendedHide}\n        labelType={label.styleType}\n        label={label.text}\n        labelIcon={label.icon}\n        statusLabels={actualStatusLabels}\n        subActionArea={subActionArea}\n        labelClassName={classNames.label}\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    </Stack>\n  )\n}\n\nconst LabelCluster = memo<\n  Pick<Props, 'subActionArea'> & {\n    label: ReactNode\n    labelType: TextProps['styleType']\n    labelIcon?: IconType\n    unrecommendedHideLabel?: 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    unrecommendedHideLabel,\n    labelType = 'blockTitle',\n    label,\n    labelIcon,\n    subActionArea,\n    labelClassName,\n    statusLabels,\n  }) => {\n    const body = (\n      <>\n        <Text styleType={labelType} icon={labelIcon}>\n          {label}\n        </Text>\n        <StatusLabelCluster statusLabels={statusLabels} />\n      </>\n    )\n\n    const attrs = useMemo(() => {\n      if (unrecommendedHideLabel) {\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, unrecommendedHideLabel, 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 justify=\"space-between\">\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    errorMessage: 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          <Text\n            className={classNames.errorMessage}\n            icon={<FaCircleExclamationIcon className={classNames.errorIcon} />}\n          >\n            {message}\n          </Text>\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, 'as' | 'disabled'>> = ActualFormControl\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuEA;AAEA;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;AACF;AACF;AAED;AAEO;;AAmBL;AACA;;;AAGA;AACA;AACA;AAEA;;;AAII;;;AAGA;;;AAGA;;;AAGA;;AAGF;AACF;AAEA;AAKA;;AAEI;;AAGF;AACF;AAEA;;;;AAKI;;;AAGA;AACA;AACA;AACA;;AAEJ;;AAGE;;;AAIE;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;;AAmBF;;;;;;;;AAYE;;AAEJ;;;;;;;;AAYI;AACE;;;AAEA;;;;;;;AAQJ;;;;;;AASA;;AAEA;AACE;AAEE;;;AAIF;AAEE;AACA;;;AAIJ;;AAGF;AAoCF;AAEA;;AAkCI;;;AAGM;AACA;AACE;AACI;AACD;AACH;AACI;AACA;AACA;AACD;;;;;AAML;AACA;;;;AAKF;AACE;AACA;AACA;AACD;AACD;;;AAIJ;;;;AAqBF;AAGF;AAQA;AASA;AAeA;AAyBA;AAgBO;;"}

package/lib/components/Header/AppLauncher/AppLauncher.cjs

@@ -6,7 +6,7 @@ var React = require('react');
 var index = require('./../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../intl/Localizer.cjs');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../../Button/Button.cjs');

package/lib/components/Header/AppLauncher/AppLauncher.js

@@ -4,7 +4,7 @@ import { memo, useMemo } from 'react';
 import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../../intl/IntlProvider.js';
 import { useIntl } from '../../../intl/useIntl.js';
-import 'react-intl';
+import '../../../intl/Localizer.js';
 import '../../../_virtual/dayjs.min.js';
 import '../../../intl/TimeFormatter.js';
 import { Button } from '../../Button/Button.js';