{"version":3,"file":"ThCheckbox.cjs","sources":["../../../src/components/Table/ThCheckbox.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, forwardRef, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { type DecoratorsType, useDecorators } from '../../hooks/useDecorators'\nimport { useIntl } from '../../intl'\nimport { Balloon } from '../Balloon'\nimport { Checkbox, type Props as CheckboxProps } from '../Checkbox'\n\nimport { Th } from './Th'\n\ntype AbstractProps = {\n  // HINT: checkColumnName は aria-label属性に設定されるため、型をstringのみに絞ります\n  decorators?: DecoratorsType<'checkAllInvisibleLabel'> & {\n    checkColumnName?: (text: string) => string\n  }\n} & Pick<ComponentProps<typeof Th>, 'vAlign' | 'fixed'>\ntype Props = AbstractProps & Omit<CheckboxProps, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    inner: [\n      'shr-group/label',\n      'shr-relative shr-flex shr-justify-center shr-px-1 shr-py-0.75',\n      '[&:not(:has([disabled]))]:shr-cursor-pointer',\n    ],\n    wrapper: 'shr-w-[theme(fontSize.base)] shr-p-0',\n    checkbox: ['shr-leading-[0]', '[&>span]:shr-translate-y-[unset]'],\n    balloon: [\n      // 位置はセルの真ん中(50%)+checkboxの幅の半分(8px)+outlineの幅(4px)+Balloonの矢印の幅(5px), sr-onlyで隠す\n      'shr-sr-only shr-absolute shr-left-[calc(50%+(theme(fontSize.base)/2)+4px+5px)]',\n      // labelの中の要素に hover or focus-visible がある時のスタイル。shr-absoluteはshr-not-sr-onlyのpositionをabsoluteに上書きしている\n      'group-has-[:hover,:focus-visible]/label:shr-not-sr-only group-has-[:hover,:focus-visible]/label:shr-absolute group-has-[:hover,:focus-visible]/label:shr-whitespace-nowrap',\n    ],\n  },\n})\n\nexport const ThCheckbox = forwardRef<HTMLInputElement, Props>(\n  ({ vAlign, fixed, decorators, className, ...rest }, ref) => {\n    const { localize } = useIntl()\n\n    const decoratorDefaultTexts = useMemo(\n      () => ({\n        checkAllInvisibleLabel: localize({\n          id: 'smarthr-ui/ThCheckbox/checkAllInvisibleLabel',\n          defaultText: 'すべての項目を選択/解除',\n        }),\n        checkColumnName: localize({\n          id: 'smarthr-ui/ThCheckbox/checkColumnName',\n          defaultText: '選択',\n        }),\n      }),\n      [localize],\n    )\n\n    const decorated = useDecorators<'checkAllInvisibleLabel' | 'checkColumnName'>(\n      decoratorDefaultTexts,\n      decorators,\n    )\n\n    const classNames = useMemo(() => {\n      const { wrapper, inner, balloon, checkbox } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        inner: inner(),\n        balloon: balloon(),\n        checkbox: checkbox(),\n      }\n    }, [className])\n\n    return (\n      // Th に必要な属性やイベントは不要\n      <Th\n        vAlign={vAlign}\n        fixed={fixed}\n        className={classNames.wrapper}\n        aria-label={decorated.checkColumnName as string}\n      >\n        <label className={classNames.inner}>\n          <Balloon as=\"span\" horizontal=\"left\" vertical=\"middle\" className={classNames.balloon}>\n            <span className=\"shr-block shr-p-0.5\">{decorated.checkAllInvisibleLabel}</span>\n          </Balloon>\n          {/* eslint-disable-next-line smarthr/a11y-prohibit-checkbox-or-radio-in-table-cell */}\n          <Checkbox {...rest} ref={ref} className={classNames.checkbox} />\n        </label>\n      </Th>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAoBA;AACE;AACE;;;;AAIC;AACD;AACA;AACA;;;;;AAKC;AACF;AACF;;AAIG;AAEA;;AAGM;AACA;;;AAGA;AACA;;AAEH;;AASH;AACE;;AAGE;;;;;AAKJ;;;AAIE;AAeJ;;"}