{"version":3,"file":"index99.cjs","sources":["../src/components/chip/base/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState, forwardRef } from \"react\";\nimport styles from \"./styles/Chip.module.css\";\nimport { useFocusHandling } from \"../../../hooks/useFocusHandling\";\nimport {\n  LabelPairedCircleXmarkSmRegularIcon,\n  StandaloneChevronDownBoldIcon,\n} from \"@deriv/quill-icons\";\n\nimport { useKeyboardAction } from \"../../../hooks/useKeyboardAction\";\nimport { useClickOutside } from \"../../../hooks/useClickOutside\";\nimport { useActionSheetDetection } from \"../../../hooks/useActionSheetDetection\";\nimport {\n  DropdownContainerAtom,\n  DropdownDataType,\n  DropdownItemType,\n} from \"../../../atoms/dropdown/container\";\n\nexport type ChipBaseType = {\n  className?: string;\n  counter?: string;\n  label?: string;\n  labelTag?: string;\n\n  /** Variant props */\n  itemSelected?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\";\n  state?: \"default\" | \"expand\" | \"disabled\";\n\n  /** Custom props */\n  icon?: ReactNode;\n  selected?: DropdownItemType | DropdownItemType[];\n  type?: \"multiSelect\" | \"singleSelect\";\n  variant?: \"dropdown\" | \"dismissable\" | \"selectable\";\n  onClick?: () => void;\n  onChange?: (item: DropdownItemType | DropdownItemType[]) => void;\n  options?: DropdownDataType[];\n};\n\nexport interface ChipDropdownRef {\n  updateItems: (newItems: DropdownDataType[]) => void;\n}\n\nconst ChipBase = forwardRef<ChipDropdownRef, ChipBaseType>(\n  (\n    {\n      className = \"\",\n      itemSelected = false,\n      size = \"sm\",\n      state = \"default\",\n      label = \"Label\",\n      labelTag,\n      variant = \"dropdown\",\n      type = \"singleSelect\",\n      icon,\n      onClick,\n      onChange,\n      selected: selectedItems = [],\n      options: initialItems = [],\n    },\n    ref\n  ) => {\n    const [highLight, setHighLight] = useState(false);\n    const [internalState, setInternalState] = useState(state);\n    const [isSelected, setIsSelected] = useState(itemSelected);\n    const [isExpanded, setIsExpanded] = useState(state === \"expand\");\n    const [items, setItems] = useState(initialItems);\n    const [selected, setSelected] = useState(selectedItems);\n\n    const itemSizes: Record<NonNullable<ChipBaseType[\"size\"]>, \"sm\" | \"md\"> = {\n      sm: \"sm\",\n      md: \"md\",\n      lg: \"md\",\n    };\n\n    const itemSize = itemSizes[size];\n\n    const chipRef = useRef<HTMLDivElement>(null);\n    const ChipId = `quill-chip-dropdown-${variant}-${state}-${size}-${\n      isSelected ? \"selected\" : \"unselected\"\n    }`;\n\n    const { handleFocus, handleBlur } = useFocusHandling({\n      isDisabled: state === \"disabled\",\n      setHighlight: setHighLight,\n    });\n\n    const { isInsideActionSheet } = useActionSheetDetection();\n\n    /** Collapse Handler */\n    const handleClick = (event?: React.MouseEvent) => {\n      if (state === \"disabled\" || variant === \"dismissable\") return;\n\n      if (event) {\n        const target = event.target as HTMLElement;\n\n        // Use the hook to check if the click is inside an action sheet\n        if (isInsideActionSheet(target)) {\n          return;\n        }\n      }\n\n      const target = event?.target as HTMLElement;\n      const isClickedOnDropdown = target?.closest(\n        \".quill-ui-next-dropdown-container\"\n      );\n\n      const shouldBehaveLikeSingleSelect =\n        type !== \"multiSelect\" || !isClickedOnDropdown;\n      const isExpanding = shouldBehaveLikeSingleSelect\n        ? internalState !== \"expand\"\n        : true;\n\n\n      const isSelected = variant === \"selectable\" ? true : isExpanding;\n     \n\n      setInternalState(isExpanding ? \"expand\" : \"default\");\n      setIsSelected(isSelected);\n\n      onClick?.();\n    };\n\n    const handlePress = useKeyboardAction(handleClick);\n\n    /** Uncollapse Handler */\n    const handleClickOutside = () => {\n      if (state === \"disabled\" || variant !== \"dropdown\") return;\n\n      setIsSelected(false);\n    };\n\n    useClickOutside(chipRef, handleClickOutside);\n\n    useEffect(() => {\n      setInternalState(state);\n    }, [state]);\n\n    useEffect(() => {\n      setIsExpanded(internalState === \"expand\");\n    }, [internalState]);\n\n    useEffect(() => {\n      setIsSelected(itemSelected);\n    }, [itemSelected]);\n\n    return (\n      <div\n        ref={chipRef}\n        className={[\n          styles.root,\n          \"quill-ui-next-component\",\n          \"quill-ui-next-no-select\",\n          state !== \"disabled\" && \"quill-ui-next-pointer\",\n          className,\n        ].join(\" \")}\n        data-id={ChipId}\n        data-itemSelected={isSelected}\n        data-size={size}\n        data-state={internalState}\n        tabIndex={state === \"disabled\" ? -1 : 0}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onClick={handleClick}\n        onKeyDown={handlePress}\n      >\n        <div className={styles.chip}>\n          {icon && (\n            <div className={`${styles.iconLeft} chip-dropdown-icon`}>\n              {icon && icon}\n            </div>\n          )}\n          <div className={styles.label}>\n            {type === \"singleSelect\" && selected && !Array.isArray(selected)\n              ? selected?.label || label\n              : label}\n          </div>\n          {labelTag && <b className={styles.labelTag}>{labelTag}</b>}\n          {variant === \"dropdown\" &&\n            type === \"multiSelect\" &&\n            Array.isArray(selected) &&\n            selected.length > 0 && (\n              <div className={styles.counterLabel}>({selected.length})</div>\n            )}\n\n          {variant === \"dropdown\" && (\n            <div className={`${styles.iconChevron} chip-dropdown-icon`}>\n              <StandaloneChevronDownBoldIcon\n                className={`quill-ui-next-rotatable ${\n                  isExpanded && \"quill-ui-next-rotate\"\n                }`}\n                iconSize=\"sm\"\n              />\n            </div>\n          )}\n\n          {variant === \"dismissable\" && (\n            <LabelPairedCircleXmarkSmRegularIcon className={styles.iconClose} />\n          )}\n\n          {highLight && <div className={styles.bgFocus} />}\n        </div>\n\n        {variant === \"dropdown\" && (\n          <DropdownContainerAtom\n            offsetTop={5}\n            parent={chipRef}\n            isOpen={isExpanded}\n            data={items}\n            multiple={type === \"multiSelect\"}\n            containerSize={size}\n            itemSize={itemSize}\n            selected={selected}\n            onChange={(e) => {\n              onChange?.(e);\n              setSelected(e);\n              // Close the dropdown for single select after selection\n              if (type === \"singleSelect\") {\n                setInternalState(\"default\");\n                setIsSelected(false);\n              }\n            }}\n            onActionSheetClose={handleClickOutside}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nexport default ChipBase;\n"],"names":["forwardRef","useState","useRef","useFocusHandling","useActionSheetDetection","target","isSelected","useKeyboardAction","useClickOutside","useEffect","jsxs","styles","jsx","StandaloneChevronDownBoldIcon","LabelPairedCircleXmarkSmRegularIcon","DropdownContainerAtom"],"mappings":"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"}