{"version":3,"file":"ThSortButton.cjs","sources":["../../../src/components/Table/ThSortButton.tsx"],"sourcesContent":["'use client'\n\nimport { type PropsWithChildren, type ReactNode, memo, useMemo } from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../intl'\nimport { UnstyledButton } from '../Button'\nimport { FaSortDownIcon, FaSortUpIcon } from '../Icon'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nconst sortButtonClassNameGenerator = tv({\n  base: 'shr-relative -shr-mx-1 -shr-my-0.75 shr-inline-flex shr-w-full shr-items-center shr-justify-between shr-gap-x-0.5 shr-px-1 shr-py-0.75 shr-font-bold',\n  variants: {\n    align: {\n      left: '',\n      right: 'shr-justify-end',\n    },\n  },\n})\n\ntype sortTypes = 'asc' | 'desc' | 'none'\n\ntype Props = PropsWithChildren<{\n  align?: VariantProps<typeof sortButtonClassNameGenerator>['align']\n  onSort?: () => void\n  sort?: sortTypes\n  decorators?: {\n    sortDirectionIconAlt: (text: string, { sort }: { sort: sortTypes }) => ReactNode\n  }\n}>\n\nexport const ThSortButton = memo<Props>(({ align, sort, decorators, onSort, children }) => {\n  const { localize } = useIntl()\n\n  const decoratorDefaultTexts = useMemo(\n    () => ({\n      asc: localize({\n        id: 'smarthr-ui/Th/sortDirectionAsc',\n        defaultText: '昇順',\n      }),\n      desc: localize({\n        id: 'smarthr-ui/Th/sortDirectionDesc',\n        defaultText: '降順',\n      }),\n      none: localize({\n        id: 'smarthr-ui/Th/sortDirectionNone',\n        defaultText: '並び替えなし',\n      }),\n    }),\n    [localize],\n  )\n\n  const sortLabel = useMemo(() => {\n    if (!sort) return undefined\n\n    return (\n      decorators?.sortDirectionIconAlt?.(decoratorDefaultTexts[sort], { sort }) ??\n      decoratorDefaultTexts[sort]\n    )\n  }, [decorators, sort, decoratorDefaultTexts])\n\n  const className = useMemo(() => sortButtonClassNameGenerator({ align }), [align])\n\n  return (\n    <UnstyledButton onClick={onSort} className={className}>\n      {children}\n      <SortIcon />\n      <VisuallyHiddenText>{sortLabel}</VisuallyHiddenText>\n    </UnstyledButton>\n  )\n})\n\nconst sortIconClassNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Icon-extended shr-relative shr-h-1 shr-w-1',\n    upIcon: [\n      'shr-absolute shr-left-0 shr-top-0',\n      'shr-text-base',\n      '[[aria-sort=\"none\"]_&]:shr-text-disabled',\n      '[[aria-sort=\"ascending\"]_&]:shr-text-black',\n      '[[aria-sort=\"descending\"]_&]:shr-text-disabled',\n    ],\n    downIcon: [\n      'shr-absolute shr-left-0 shr-top-0',\n      'shr-text-base',\n      '[[aria-sort=\"none\"]_&]:shr-text-disabled',\n      '[[aria-sort=\"ascending\"]_&]:shr-text-disabled',\n      '[[aria-sort=\"descending\"]_&]:shr-text-black',\n    ],\n  },\n})\n\nconst SortIcon = memo(() => {\n  const classNames = useMemo(() => {\n    const { wrapper, upIcon, downIcon } = sortIconClassNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      upIcon: upIcon(),\n      downIcon: downIcon(),\n    }\n  }, [])\n\n  return (\n    <span className={classNames.wrapper}>\n      <FaSortUpIcon className={classNames.upIcon} />\n      <FaSortDownIcon className={classNames.downIcon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAUA;AACE;AACA;AACE;AACE;AACA;AACD;AACF;AACF;AAaM;AACL;AAEA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;AAIH;AACE;AAAW;AAEX;AAEE;;AAIJ;;AASF;AAEA;AACE;AACE;AACA;;;;;;AAMC;AACD;;;;;;AAMC;AACF;AACF;AAED;AACE;;;;;;;;AAUA;AAMF;;"}