flowbite-react/dist/components/Dropdown/Dropdown.cjs.map

Official React components built for Flowbite and Tailwind CSS

{"version":3,"file":"Dropdown.cjs","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 { get } from \"../../helpers/get\";\nimport { resolveProps } from \"../../helpers/resolve-props\";\nimport { useResolveTheme } from \"../../helpers/resolve-theme\";\nimport { twMerge } from \"../../helpers/tailwind-merge\";\nimport { useBaseFLoating, useFloatingInteractions } from \"../../hooks/use-floating\";\nimport { ChevronDownIcon } from \"../../icons/chevron-down-icon\";\nimport { ChevronLeftIcon } from \"../../icons/chevron-left-icon\";\nimport { ChevronRightIcon } from \"../../icons/chevron-right-icon\";\nimport { ChevronUpIcon } from \"../../icons/chevron-up-icon\";\nimport { useThemeProvider } from \"../../theme/provider\";\nimport type { ThemingProps } from \"../../types\";\nimport { Button, type ButtonProps } from \"../Button\";\nimport type { FloatingProps, FloatingTheme } from \"../Floating\";\nimport { DropdownContext } from \"./DropdownContext\";\nimport type { DropdownDividerTheme } from \"./DropdownDivider\";\nimport type { DropdownHeaderTheme } from \"./DropdownHeader\";\nimport type { DropdownItemTheme } from \"./DropdownItem\";\nimport { dropdownTheme } from \"./theme\";\n\nexport interface DropdownFloatingTheme extends FloatingTheme, DropdownDividerTheme, DropdownHeaderTheme {\n  item: DropdownItemTheme;\n}\n\nexport interface DropdownTheme {\n  floating: DropdownFloatingTheme;\n  content: string;\n  inlineWrapper: string;\n  arrowIcon: string;\n}\n\nexport interface DropdownProps\n  extends Pick<FloatingProps, \"placement\" | \"trigger\">,\n    Omit<ButtonProps, keyof ThemingProps<DropdownTheme>>,\n    ThemingProps<DropdownTheme> {\n  arrowIcon?: boolean;\n  dismissOnClick?: boolean;\n  floatingArrow?: boolean;\n  inline?: boolean;\n  label?: ReactNode;\n  enableTypeAhead?: boolean;\n  renderTrigger?: (theme: DropdownTheme) => ReactElement;\n  \"data-testid\"?: string;\n}\n\nconst icons: Record<string, FC<ComponentProps<\"svg\">>> = {\n  top: ChevronUpIcon,\n  right: ChevronRightIcon,\n  bottom: ChevronDownIcon,\n  left: ChevronLeftIcon,\n};\n\nexport interface TriggerProps extends Omit<ButtonProps, keyof ThemingProps<DropdownTheme>> {\n  refs: ExtendedRefs<HTMLElement>;\n  inline?: boolean;\n  theme: DropdownTheme;\n  setButtonWidth?: Dispatch<SetStateAction<number | undefined>>;\n  getReferenceProps: (userProps?: HTMLProps<Element> | undefined) => Record<string, unknown>;\n  renderTrigger?: (theme: DropdownTheme) => ReactElement;\n}\n\nfunction 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\nexport function Dropdown(props: DropdownProps) {\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 provider = useThemeProvider();\n  const theme = useResolveTheme(\n    [dropdownTheme, provider.theme?.dropdown, props.theme],\n    [get(provider.clearTheme, \"dropdown\"), props.clearTheme],\n    [get(provider.applyTheme, \"dropdown\"), props.applyTheme],\n  );\n\n  const {\n    children,\n    className,\n    dismissOnClick = true,\n    enableTypeAhead = true,\n    renderTrigger,\n    ...restProps\n  } = resolveProps(props, provider.props?.dropdown);\n\n  const {\n    placement = restProps.inline ? \"bottom-start\" : \"bottom\",\n    trigger = \"click\",\n    label,\n    inline,\n    arrowIcon = true,\n    ...buttonProps\n  } = restProps;\n  const dataTestId = restProps[\"data-testid\"] || \"flowbite-dropdown-target\";\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    enabled: enableTypeAhead,\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] ?? ChevronDownIcon;\n  }, [placement]);\n\n  return (\n    <DropdownContext.Provider\n      value={{\n        theme: props.theme,\n        clearTheme: props.clearTheme,\n        applyTheme: props.applyTheme,\n        activeIndex,\n        dismissOnClick,\n        getItemProps,\n        handleSelect,\n      }}\n    >\n      <Trigger\n        {...buttonProps}\n        refs={refs}\n        inline={inline}\n        theme={theme}\n        data-testid={dataTestId}\n        className={twMerge(theme.floating.target, 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\nDropdown.displayName = \"Dropdown\";\n"],"names":["ChevronUpIcon","ChevronRightIcon","ChevronDownIcon","ChevronLeftIcon","useEffect","cloneElement","jsx","Button","useState","useRef","provider","useThemeProvider","theme","useResolveTheme","dropdownTheme","get","resolveProps","useCallback","useBaseFLoating","useListNavigation","useTypeahead","useFloatingInteractions","useMemo","jsxs","DropdownContext","twMerge","FloatingFocusManager","FloatingList"],"mappings":"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"}