{"version":3,"file":"DropdownTrigger.cjs","sources":["../../../src/components/Dropdown/DropdownTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FC,\n  type PropsWithChildren,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { tabbable } from '../../libs/tabbable'\nimport { Tooltip } from '../Tooltip'\n\nimport { DropdownContext } from './Dropdown'\n\ntype ConditionalWrapperProps = {\n  shouldWrapContent?: boolean\n  wrapper: FC<PropsWithChildren>\n}\n\nconst CAPTURE_OPTION = {\n  capture: true,\n}\n\n/**\n * 条件付きでラッパをレンダリングする\n */\nconst ConditionalWrapper: FC<PropsWithChildren<ConditionalWrapperProps>> = ({\n  shouldWrapContent,\n  wrapper,\n  children,\n}) => (shouldWrapContent ? wrapper({ children }) : children)\n\ntype Props = PropsWithChildren<ComponentProps<'div'>> & {\n  tooltip?: { message: ReactNode; show?: boolean }\n}\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Dropdown shr-inline-block',\n})\n\nexport const DropdownTrigger: FC<Props> = ({ children, className, tooltip }) => {\n  const { active, onClickTrigger, contentId, triggerElementRef } = useContext(DropdownContext)\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  useEffect(() => {\n    if (!triggerElementRef.current) {\n      return\n    }\n\n    // apply ARIA to all focusable elements in trigger\n    const triggers = tabbable(triggerElementRef.current, { shouldIgnoreVisibility: true })\n\n    triggers.forEach((trigger) => {\n      trigger.setAttribute('aria-expanded', active.toString())\n      trigger.setAttribute('aria-controls', contentId)\n    })\n  }, [active, triggerElementRef, contentId])\n\n  useEffect(() => {\n    if (!triggerElementRef.current) {\n      return\n    }\n\n    const button = triggerElementRef.current.querySelector<HTMLButtonElement>('button')\n\n    // 引き金となる要素が disabled な場合、処理を差し込む必要がないため、そのまま出力する\n    if (!button || button.disabled || button.getAttribute('aria-disabled') === 'true') {\n      return\n    }\n\n    // HINT: Trigger要素自体にonClickが設定されている場合、先にDropdownを開いた状態で処理を行いたい\n    // そのためcaptureで開く処理を実行する\n    const callback = (e: MouseEvent) => {\n      onClickTrigger((e.currentTarget! as HTMLButtonElement).getBoundingClientRect())\n    }\n\n    button.addEventListener('click', callback, CAPTURE_OPTION)\n\n    return () => {\n      button.removeEventListener('click', callback, CAPTURE_OPTION)\n    }\n  }, [children, onClickTrigger, triggerElementRef])\n\n  return (\n    <div ref={triggerElementRef} className={actualClassName}>\n      <ConditionalWrapper\n        shouldWrapContent={tooltip?.show}\n        wrapper={({ children: currentChildren }) => (\n          <Tooltip message={tooltip?.message} triggerType=\"icon\" tabIndex={-1}>\n            {currentChildren}\n          </Tooltip>\n        )}\n      >\n        {children}\n      </ConditionalWrapper>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;AAuBA;AACE;;AAGF;;AAEG;AACH;AAUA;AACE;AACD;AAEM;AACL;AACA;;AAGE;;;;AAKA;AAEA;;AAEE;AACF;;;AAIA;;;;;AAOA;;;;;AAMA;;AAEA;;AAIA;;AAEA;;;AAiBJ;;"}