{"version":3,"file":"MultiSelectedItem.cjs","sources":["../../../../src/components/Combobox/MultiCombobox/MultiSelectedItem.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type PropsWithChildren,\n  type RefObject,\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../intl'\nimport { UnstyledButton } from '../../Button'\nimport { Chip } from '../../Chip'\nimport { FaCircleXmarkIcon } from '../../Icon'\nimport { Tooltip } from '../../Tooltip'\nimport { VisuallyHiddenText } from '../../VisuallyHiddenText'\n\nimport type { ComboboxItem } from '../types'\n\nexport type Props<T> = {\n  item: ComboboxItem<T> & { deletable?: boolean }\n  disabled: boolean\n  onDelete: (item: ComboboxItem<T>) => void\n  enableEllipsis?: boolean\n  buttonRef: RefObject<HTMLButtonElement>\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-MultiCombobox-selectedItem shr-flex shr-items-center shr-gap-0.75 shr-leading-normal [&]:shr-rounded-em',\n    itemLabel: 'smarthr-ui-MultiCombobox-selectedItemLabel',\n    deleteButton: [\n      'smarthr-ui-MultiCombobox-deleteButton',\n      'shr-relative',\n      'shr-group/deleteButton',\n      'shr-shrink shr-rounded-full shr-leading-[0] shr-text-black',\n      'focus-visible:shr-outline-none',\n    ],\n    deleteButtonIcon:\n      'group-focus-visible/deleteButton:shr-focus-indicator--outer group-focus-visible/deleteButton:shr-rounded-full',\n  },\n  variants: {\n    enableEllipsis: {\n      true: {\n        itemLabel: 'shr-overflow-hidden shr-overflow-ellipsis shr-whitespace-nowrap',\n      },\n    },\n    disabled: {\n      true: {\n        deleteButton: 'shr-cursor-not-allowed',\n      },\n      false: {},\n    },\n  },\n})\n\nexport function MultiSelectedItem<T>({\n  item,\n  disabled,\n  onDelete,\n  enableEllipsis,\n  buttonRef,\n}: Props<T>) {\n  const [needsTooltip, setNeedsTooltip] = useState(false)\n  const { deletable = true } = item\n  const idPrefix = useId()\n  const labelId = `${idPrefix}-item-label`\n  const destroySuffixTextId = `${idPrefix}-item-destroy-button-suffix`\n\n  const classNames = useMemo(() => {\n    const { wrapper, itemLabel, deleteButton, deleteButtonIcon } = classNameGenerator()\n\n    return {\n      wrapper: wrapper(),\n      itemLabel: itemLabel({ enableEllipsis }),\n      deleteButton: deleteButton({ disabled }),\n      deleteButtonIcon: deleteButtonIcon(),\n    }\n  }, [disabled, enableEllipsis])\n\n  const body = (\n    <Chip disabled={disabled} className={classNames.wrapper}>\n      <ItemLabel id={labelId} className={classNames.itemLabel} setNeedsTooltip={setNeedsTooltip}>\n        {item.label}\n      </ItemLabel>\n\n      {deletable && (\n        <DestroyButton\n          labelId={labelId}\n          suffixTextId={destroySuffixTextId}\n          item={item}\n          onDelete={onDelete}\n          disabled={disabled}\n          buttonRef={buttonRef}\n          className={classNames.deleteButton}\n          iconStyle={classNames.deleteButtonIcon}\n        />\n      )}\n    </Chip>\n  )\n\n  if (needsTooltip) {\n    return <Tooltip message={item.label}>{body}</Tooltip>\n  }\n\n  return body\n}\n\nconst ItemLabel = memo<\n  PropsWithChildren<{\n    id: string\n    enableEllipsis?: boolean\n    setNeedsTooltip: (flg: boolean) => void\n    className: string\n  }>\n>(({ children, id, enableEllipsis, setNeedsTooltip, className }) => {\n  const labelRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (enableEllipsis && labelRef.current) {\n      const elem = labelRef.current\n\n      setNeedsTooltip(elem.offsetWidth < elem.scrollWidth)\n    }\n  }, [enableEllipsis, setNeedsTooltip])\n\n  return (\n    <span ref={labelRef} id={id} className={className}>\n      {children}\n    </span>\n  )\n})\n\nconst typedMemo: <T>(c: T) => T = memo\nconst EXEC_DESTROY_KEY = /^(Enter|Backspace| )$/\n\nconst BaseDestroyButton = <T,>({\n  labelId,\n  suffixTextId,\n  item,\n  onDelete,\n  disabled,\n  buttonRef,\n  className,\n  iconStyle,\n}: Pick<Props<T>, 'item' | 'onDelete' | 'disabled' | 'buttonRef'> & {\n  labelId: string\n  suffixTextId: string\n  className: string\n  iconStyle: string\n}) => {\n  const { localize } = useIntl()\n  const onClick = useCallback(() => {\n    onDelete(item)\n  }, [item, onDelete])\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (EXEC_DESTROY_KEY.test(e.key)) {\n        e.stopPropagation()\n\n        // HINT: イベントの伝播が止まる関係でonClickに設定したonDeleteは実行されない\n        // このタイミングで明示的に削除処理を実行する\n        onClick()\n      }\n    },\n    [onClick],\n  )\n\n  const destroyButtonIconAltSuffix = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/MultiCombobox/destroyButtonIconAltSuffix',\n        defaultText: 'を削除',\n      }),\n    [localize],\n  )\n\n  return (\n    <UnstyledButton\n      ref={buttonRef}\n      disabled={disabled}\n      tabIndex={-1}\n      aria-labelledby={`${labelId} ${suffixTextId}`}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      className={className}\n    >\n      <VisuallyHiddenText id={suffixTextId}>{destroyButtonIconAltSuffix}</VisuallyHiddenText>\n      <FaCircleXmarkIcon color={disabled ? 'TEXT_DISABLED' : 'inherit'} className={iconStyle} />\n    </UnstyledButton>\n  )\n}\nconst DestroyButton = typedMemo(BaseDestroyButton)\n"],"names":["tv","useState","useId","useMemo","_jsxs","Chip","_jsx","Tooltip","memo","useRef","useEffect","useIntl","useCallback","UnstyledButton","VisuallyHiddenText","FaCircleXmarkIcon"],"mappings":"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"}