{"version":3,"file":"SortDropdown.cjs","sources":["../../../../src/components/Dropdown/SortDropdown/SortDropdown.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type FC,\n  type FormEvent,\n  type MouseEventHandler,\n  type OptionHTMLAttributes,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n} from 'react'\n\nimport { Button } from '../../Button'\nimport { Fieldset } from '../../Fieldset'\nimport { FormControl } from '../../FormControl'\nimport { Cluster, Stack } from '../../Layout'\nimport { RadioButton } from '../../RadioButton'\nimport { Select } from '../../Select'\nimport { Dropdown } from '../Dropdown'\nimport { DropdownCloser } from '../DropdownCloser'\nimport { DropdownContent } from '../DropdownContent'\nimport { DropdownTrigger } from '../DropdownTrigger'\n\nimport { useSortDropdown } from './useSortDropdown'\n\ntype SortFieldType = {\n  value: string\n} & Omit<OptionHTMLAttributes<HTMLOptionElement>, 'value'>\n\ntype ArgsOnApply = {\n  field: string\n  order: 'asc' | 'desc'\n  newfields: SortFieldType[]\n}\n\ntype AbstractProps = {\n  /** 並び替え項目 */\n  sortFields: SortFieldType[]\n  /** 並び順の初期値 */\n  defaultOrder: 'asc' | 'desc'\n  sortFieldLabel?: ReactNode\n  sortOrderLegend?: ReactNode\n  ascLabel?: ReactNode\n  descLabel?: ReactNode\n  applyText?: ReactNode\n  cancelText?: ReactNode\n  /** 適用時に発火するイベント */\n  onApply: (args: ArgsOnApply) => void\n  /** キャンセル時に発火するイベント */\n  onCancel?: MouseEventHandler<HTMLButtonElement>\n}\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'button'>, keyof AbstractProps>\n\nconst ON_SUBMIT = (e: FormEvent) => {\n  e.preventDefault()\n}\n\nexport const SortDropdown: FC<Props> = ({\n  sortFields,\n  defaultOrder,\n  sortFieldLabel,\n  sortOrderLegend,\n  ascLabel,\n  descLabel,\n  applyText,\n  cancelText,\n  onApply,\n  onCancel,\n  ...rest\n}) => {\n  const {\n    texts,\n    SortIcon,\n    onChangeSortOrderRadio,\n    innerValues: { innerFields, innerCheckedOrder },\n    handler: { handleApply, handleChange },\n    classNames,\n  } = useSortDropdown({\n    sortFields,\n    defaultOrder,\n    onApply,\n    sortFieldLabel,\n    sortOrderLegend,\n    ascLabel,\n    descLabel,\n    applyText,\n    cancelText,\n  })\n\n  return (\n    <Dropdown>\n      <DropdownTrigger>\n        <Button {...rest} suffix={<SortIcon />}>\n          {texts.triggerLabel}\n        </Button>\n      </DropdownTrigger>\n      <DropdownContent controllable>\n        <form onSubmit={ON_SUBMIT}>\n          <Stack className={classNames.body}>\n            <FormControl label={texts.sortFieldLabel}>\n              <Select\n                name=\"sortFields\"\n                options={innerFields}\n                onChange={handleChange}\n                className={classNames.select}\n              />\n            </FormControl>\n            <Fieldset legend={texts.sortOrderLegend} innerMargin={0.5}>\n              <Cluster gap={1.25}>\n                <RadioButton\n                  name=\"sortOrder\"\n                  value=\"asc\"\n                  checked={innerCheckedOrder === 'asc'}\n                  onChange={onChangeSortOrderRadio}\n                >\n                  {texts.ascLabel}\n                </RadioButton>\n                <RadioButton\n                  name=\"sortOrder\"\n                  value=\"desc\"\n                  checked={innerCheckedOrder === 'desc'}\n                  onChange={onChangeSortOrderRadio}\n                >\n                  {texts.descLabel}\n                </RadioButton>\n              </Cluster>\n            </Fieldset>\n          </Stack>\n          <Footer\n            onApply={handleApply}\n            onCancel={onCancel}\n            cancelText={texts.cancelText}\n            applyText={texts.applyText}\n            className={classNames.footer}\n          />\n        </form>\n      </DropdownContent>\n    </Dropdown>\n  )\n}\n\nconst Footer = memo<\n  Pick<Props, 'onCancel'> & {\n    onApply: MouseEventHandler<HTMLButtonElement>\n    className: string\n    cancelText: ReactNode\n    applyText: ReactNode\n  }\n>(({ className, onApply, onCancel, cancelText, applyText }) => (\n  <Cluster gap={1} align=\"center\" justify=\"flex-end\" as=\"footer\" className={className}>\n    <CancelButton onClick={onCancel}>{cancelText}</CancelButton>\n    <ApplyButton onClick={onApply}>{applyText}</ApplyButton>\n  </Cluster>\n))\n\nconst CancelButton = memo<PropsWithChildren<{ onClick: Props['onCancel'] }>>(\n  ({ onClick, children }) => (\n    <DropdownCloser>\n      <Button onClick={onClick}>{children}</Button>\n    </DropdownCloser>\n  ),\n)\n\nconst ApplyButton = memo<PropsWithChildren<{ onClick: MouseEventHandler<HTMLButtonElement> }>>(\n  ({ onClick, children }) => (\n    <DropdownCloser>\n      <Button variant=\"primary\" onClick={onClick}>\n        {children}\n      </Button>\n    </DropdownCloser>\n  ),\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsDA;;AAEA;AAEO;;;;;;;;;;;AA8BJ;AAED;AAkDF;AAEA;AAcA;AAQA;;"}