@transkripid/flowbite-react/lib/components/Dropdown/Dropdown.mjs.map

Official React components built for Flowbite and Tailwind CSS - Transkrip.id fork

{"version":3,"file":"Dropdown.mjs","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client';\n\nimport type { ExtendedRefs } from '@floating-ui/react';\nimport { FloatingFocusManager, FloatingList, useListNavigation, useTypeahead } from '@floating-ui/react';\nimport type {\n  ComponentProps,\n  Dispatch,\n  FC,\n  HTMLProps,\n  MutableRefObject,\n  ReactElement,\n  ReactNode,\n  SetStateAction,\n} from 'react';\nimport { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { HiOutlineChevronDown, HiOutlineChevronLeft, HiOutlineChevronRight, HiOutlineChevronUp } from 'react-icons/hi';\nimport { twMerge } from 'tailwind-merge';\nimport { mergeDeep } from '../../helpers/merge-deep';\nimport { useBaseFLoating, useFloatingInteractions } from '../../hooks/use-floating';\nimport { getTheme } from '../../theme-store';\nimport type { DeepPartial } from '../../types';\nimport { Button, type ButtonProps } from '../Button';\nimport type { FloatingProps, FlowbiteFloatingTheme } from '../Floating';\nimport { DropdownContext } from './DropdownContext';\nimport { DropdownDivider, type FlowbiteDropdownDividerTheme } from './DropdownDivider';\nimport { DropdownHeader, type FlowbiteDropdownHeaderTheme } from './DropdownHeader';\nimport { DropdownItem, type FlowbiteDropdownItemTheme } from './DropdownItem';\n\nexport interface FlowbiteDropdownFloatingTheme\n  extends FlowbiteFloatingTheme,\n    FlowbiteDropdownDividerTheme,\n    FlowbiteDropdownHeaderTheme {\n  item: FlowbiteDropdownItemTheme;\n}\n\nexport interface FlowbiteDropdownTheme {\n  floating: FlowbiteDropdownFloatingTheme;\n  content: string;\n  inlineWrapper: string;\n  arrowIcon: string;\n}\n\nexport interface DropdownProps extends Pick<FloatingProps, 'placement' | 'trigger'>, Omit<ButtonProps, 'theme'> {\n  arrowIcon?: boolean;\n  dismissOnClick?: boolean;\n  floatingArrow?: boolean;\n  inline?: boolean;\n  label: ReactNode;\n  theme?: DeepPartial<FlowbiteDropdownTheme>;\n  renderTrigger?: (theme: FlowbiteDropdownTheme) => ReactElement;\n  'data-testid'?: string;\n}\n\nconst icons: Record<string, FC<ComponentProps<'svg'>>> = {\n  top: HiOutlineChevronUp,\n  right: HiOutlineChevronRight,\n  bottom: HiOutlineChevronDown,\n  left: HiOutlineChevronLeft,\n};\n\nexport interface TriggerProps extends Omit<ButtonProps, 'theme'> {\n  refs: ExtendedRefs<HTMLElement>;\n  inline?: boolean;\n  theme: FlowbiteDropdownTheme;\n  setButtonWidth?: Dispatch<SetStateAction<number | undefined>>;\n  getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => Record<string, unknown>;\n  renderTrigger?: (theme: FlowbiteDropdownTheme) => ReactElement;\n}\n\nconst Trigger = ({\n  refs,\n  children,\n  inline,\n  theme,\n  disabled,\n  setButtonWidth,\n  getReferenceProps,\n  renderTrigger,\n  ...buttonProps\n}: TriggerProps) => {\n  const ref = refs.reference as MutableRefObject<HTMLElement>;\n  const a11yProps = getReferenceProps();\n\n  useEffect(() => {\n    if (ref.current) {\n      setButtonWidth?.(ref.current.clientWidth);\n    }\n  }, [ref, setButtonWidth]);\n\n  if (renderTrigger) {\n    const triggerElement = renderTrigger(theme);\n    return cloneElement(triggerElement, { ref: refs.setReference, disabled, ...a11yProps, ...triggerElement.props });\n  }\n\n  return inline ? (\n    <button type=\"button\" ref={refs.setReference} className={theme?.inlineWrapper} disabled={disabled} {...a11yProps}>\n      {children}\n    </button>\n  ) : (\n    <Button {...buttonProps} disabled={disabled} type=\"button\" ref={refs.setReference} {...a11yProps}>\n      {children}\n    </Button>\n  );\n};\n\nconst DropdownComponent: FC<DropdownProps> = ({\n  children,\n  className,\n  dismissOnClick = true,\n  theme: customTheme = {},\n  renderTrigger,\n  ...props\n}) => {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);\n  const [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined);\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n  const labelsRef = useRef<Array<string | null>>([]);\n\n  const theme = mergeDeep(getTheme().dropdown, customTheme);\n  const theirProps = props as Omit<DropdownProps, 'theme'>;\n  const dataTestId = props['data-testid'] || 'flowbite-dropdown-target';\n  const {\n    placement = props.inline ? 'bottom-start' : 'bottom',\n    trigger = 'click',\n    label,\n    inline,\n    arrowIcon = true,\n    ...buttonProps\n  } = theirProps;\n\n  const handleSelect = useCallback((index: number | null) => {\n    setSelectedIndex(index);\n    setOpen(false);\n  }, []);\n\n  const handleTypeaheadMatch = useCallback(\n    (index: number | null) => {\n      if (open) {\n        setActiveIndex(index);\n      } else {\n        handleSelect(index);\n      }\n    },\n    [open, handleSelect],\n  );\n\n  const { context, floatingStyles, refs } = useBaseFLoating<HTMLButtonElement>({\n    open,\n    setOpen,\n    placement,\n  });\n\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    selectedIndex,\n    onNavigate: setActiveIndex,\n  });\n\n  const typeahead = useTypeahead(context, {\n    listRef: labelsRef,\n    activeIndex,\n    selectedIndex,\n    onMatch: handleTypeaheadMatch,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useFloatingInteractions({\n    context,\n    role: 'menu',\n    trigger,\n    interactions: [listNav, typeahead],\n  });\n\n  const Icon = useMemo(() => {\n    const [p] = placement.split('-');\n    return icons[p] ?? HiOutlineChevronDown;\n  }, [placement]);\n\n  return (\n    <DropdownContext.Provider value={{ theme, activeIndex, dismissOnClick, getItemProps, handleSelect }}>\n      <Trigger\n        {...buttonProps}\n        refs={refs}\n        inline={inline}\n        theme={theme}\n        data-testid={dataTestId}\n        className={twMerge(theme.floating.target, buttonProps.className)}\n        setButtonWidth={setButtonWidth}\n        getReferenceProps={getReferenceProps}\n        renderTrigger={renderTrigger}\n      >\n        {label}\n        {arrowIcon && <Icon className={theme.arrowIcon} />}\n      </Trigger>\n      {open && (\n        <FloatingFocusManager context={context} modal={false}>\n          <div\n            ref={refs.setFloating}\n            style={{ ...floatingStyles, minWidth: buttonWidth }}\n            data-testid=\"flowbite-dropdown\"\n            aria-expanded={open}\n            {...getFloatingProps({\n              className: twMerge(\n                theme.floating.base,\n                theme.floating.animation,\n                'duration-100',\n                !open && theme.floating.hidden,\n                theme.floating.style.auto,\n                className,\n              ),\n            })}\n          >\n            <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>\n              <ul className={theme.content} tabIndex={-1}>\n                {children}\n              </ul>\n            </FloatingList>\n          </div>\n        </FloatingFocusManager>\n      )}\n    </DropdownContext.Provider>\n  );\n};\n\nDropdownComponent.displayName = 'Dropdown';\nDropdownHeader.displayName = 'Dropdown.Header';\nDropdownDivider.displayName = 'Dropdown.Divider';\n\nexport const Dropdown = Object.assign(DropdownComponent, {\n  Item: DropdownItem,\n  Header: DropdownHeader,\n  Divider: DropdownDivider,\n});\n"],"names":["icons","top","HiOutlineChevronUp","right","HiOutlineChevronRight","bottom","HiOutlineChevronDown","left","HiOutlineChevronLeft","Trigger","t0","$","_c","buttonProps","children","disabled","getReferenceProps","inline","refs","renderTrigger","setButtonWidth","theme","ref","reference","a11yProps","t1","current","clientWidth","t2","useEffect","triggerElement","cloneElement","setReference","props","t3","inlineWrapper","jsx","Button","DropdownComponent","className","dismissOnClick","customTheme","open","setOpen","useState","activeIndex","setActiveIndex","selectedIndex","setSelectedIndex","buttonWidth","undefined","elementsRef","useRef","labelsRef","mergeDeep","getTheme","dropdown","theirProps","dataTestId","placement","trigger","label","arrowIcon","handleSelect","useCallback","index","handleTypeaheadMatch","context","floatingStyles","useBaseFLoating","listNav","useListNavigation","listRef","onNavigate","typeahead","useTypeahead","onMatch","getFloatingProps","getItemProps","useFloatingInteractions","role","interactions","Icon","useMemo","p","split","jsxs","DropdownContext","twMerge","floating","target","FloatingFocusManager","setFloating","minWidth","base","animation","hidden","style","auto","FloatingList","content","displayName","DropdownHeader","DropdownDivider","Dropdown","Object","assign","Item","DropdownItem","Header","Divider"],"mappings":"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"}