{"version":3,"file":"index27.cjs","sources":["../src/components/input/dropdown/index.tsx"],"sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  useRef,\n  useState,\n  useEffect,\n} from \"react\";\nimport TextFieldAtom from \"../../../atoms/textfield\";\nimport { LabelPairedChevronDownSmBoldIcon } from \"@deriv/quill-icons\";\nimport { useClickOutside } from \"../../../hooks/useClickOutside\";\nimport { usePortalClick } from \"../../../hooks/usePortalClick\";\nimport DropdownContainerAtom, {\n  DropdownDataType,\n  DropdownItemType,\n} from \"../../../atoms/dropdown/container\";\n\nexport type DropdownProps = {\n  className?: string;\n  label?: string;\n  placeholder?: string;\n  message?: string;\n\n  /** Variant props */\n  indicator?: \"neutral\" | \"fail\" | \"success\";\n  state?: \"default\" | \"disabled\";\n  type?: \"outline\" | \"fill\";\n  size?: \"lg\" | \"md\" | \"sm\";\n  textAlignment?: \"left\" | \"center\";\n  variant?: \"labelled\" | \"labelless\";\n\n  /** Custom input props */\n  itemSize?: \"md\" | \"sm\";\n  iconLeft?: ReactNode;\n  labelLeft?: string;\n  isRequired?: boolean;\n  optionalText?: string;\n  containerRef?: React.RefObject<HTMLDivElement>;\n  customContent?: ReactNode;\n  customValue?: string;\n  onChange?: (item: DropdownItemType | DropdownItemType[]) => void;\n  onClick?: () => void;\n\n  /**Custom Dropdown props */\n  data?: DropdownDataType[];\n  selected?: DropdownItemType;\n\n  /** Autocomplete props */\n  autocomplete?: boolean;\n};\n\nexport const Dropdown: FunctionComponent<DropdownProps> = ({\n  className,\n  label = \"label\",\n  placeholder = \"Select an option\",\n  message,\n  indicator,\n  state,\n  type,\n  size = \"md\",\n  itemSize = \"sm\",\n  textAlignment = \"left\",\n  iconLeft,\n  labelLeft,\n  isRequired,\n  optionalText,\n  containerRef,\n  selected: internalSelected,\n  onChange,\n  onClick,\n  data = [],\n  customValue,\n  variant = \"labelled\",\n  autocomplete = false,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState<DropdownItemType | undefined>(\n    internalSelected\n  );\n  const [inputValue, setInputValue] = useState<string>(\n    internalSelected?.label || \"\"\n  );\n\n  const defaultRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const dropdownRef = containerRef || defaultRef;\n\n  // Update internal state when props change\n  useEffect(() => {\n    if (internalSelected) {\n      setSelected(internalSelected);\n      setInputValue(internalSelected.label);\n    }\n  }, [internalSelected]);\n\n  // Filter data based on input value\n  const getFilteredData = () => {\n    if (!autocomplete || !inputValue) {\n      return data;\n    }\n\n    const searchTerm = inputValue.toLowerCase().trim();\n\n    const results = data\n      .map((group) => ({\n        ...group,\n        items: group.items.filter((item) =>\n          item.label.toLowerCase().includes(searchTerm)\n        ),\n      }))\n      .filter((group) => group.items.length > 0);\n\n    if (results.length === 0) {\n      return [\n        {\n          title: \"No results found\",\n          items: [],\n        },\n      ];\n    }\n\n    return results;\n  };\n\n  const handleClick = (e: React.MouseEvent) => {\n    const { isPortalClick } = usePortalClick(\n      dropdownRef as React.RefObject<HTMLElement>\n    );\n\n    if (isPortalClick(e) || state === \"disabled\") {\n      return;\n    }\n\n    setIsOpen(!isOpen);\n    onClick?.();\n  };\n\n  const handleInputChange = (value: string | number) => {\n    const newValue = value.toString();\n    setInputValue(newValue);\n\n    if (autocomplete && !isOpen) {\n      setIsOpen(true);\n    }\n  };\n\n  const handleItemSelect = (item: DropdownItemType) => {\n    setSelected(item);\n    setInputValue(item.label);\n    setIsOpen(false);\n    inputRef.current?.focus();\n    onChange?.(item);\n  };\n\n  useClickOutside(\n    dropdownRef,\n    () => {\n      setIsOpen(false);\n    },\n    [\"quill-ui-next-dropdown-container\"]\n  );\n\n  return (\n    <TextFieldAtom\n      ref={inputRef}\n      containerRef={dropdownRef as React.RefObject<HTMLDivElement>}\n      label={label}\n      placeholder={placeholder}\n      message={message}\n      className={`quill-ui-next-pointer ${className}`}\n      allowTyping={autocomplete}\n      onClick={(e) => handleClick(e)}\n      onChange={handleInputChange}\n      iconRight={\n        <LabelPairedChevronDownSmBoldIcon\n          className={`quill-ui-next-rotatable ${\n            isOpen && \"quill-ui-next-rotate\"\n          }`}\n        />\n      }\n      indicator={indicator}\n      state={state}\n      type={type}\n      size={size}\n      textAlignment={textAlignment}\n      iconLeft={selected?.iconLeft || iconLeft}\n      labelLeft={labelLeft}\n      isRequired={isRequired}\n      optionalText={optionalText}\n      variant={variant}\n      value={autocomplete ? inputValue : customValue || selected?.label}\n      customContent={\n        <DropdownContainerAtom\n          width=\"100%\"\n          textAlignment={textAlignment}\n          parent={dropdownRef}\n          isOpen={isOpen}\n          itemSize={itemSize}\n          data={getFilteredData()}\n          containerSize=\"md\"\n          selected={selected}\n          onChange={(e: DropdownItemType | DropdownItemType[]) => {\n            handleItemSelect(e as DropdownItemType);\n          }}\n        />\n      }\n    />\n  );\n};\n\nexport default Dropdown;\n"],"names":["useState","useRef","useEffect","usePortalClick","useClickOutside","jsx","TextFieldAtom","LabelPairedChevronDownSmBoldIcon","DropdownContainerAtom"],"mappings":"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"}