{"version":3,"file":"index111.mjs","sources":["../src/atoms/dropdown/container/index.tsx"],"sourcesContent":["import React, {\n useEffect,\n useState,\n useRef,\n RefObject,\n CSSProperties,\n useMemo,\n ReactNode,\n} from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport DropdownItemAtom from \"../item\";\nimport styles from \"./DropdownContainerAtom.module.css\";\nimport DropdownTitleAtom from \"../title\";\nimport { useDevice } from \"../../../hooks/useDevice\";\nimport ActionSheet, { ActionSheetType } from \"../../../components/action-sheet\";\n\nexport type DropdownItemType = {\n label: string;\n value: string;\n iconLeft?: ReactNode;\n iconRight?: ReactNode;\n className?: string;\n itemKey?: number;\n state?: \"default\" | \"disabled\";\n};\n\nexport type DropdownDataType = {\n title?: string;\n items: DropdownItemType[];\n extra?: string;\n};\n\nexport type DropdownContainerType = {\n className?: string;\n containerSize?: \"default\" | \"sm\" | \"md\" | \"lg\";\n width?: CSSProperties[\"width\"];\n\n /** Custom props */\n parent: RefObject;\n isOpen?: boolean;\n data?: DropdownDataType[];\n itemSize?: \"sm\" | \"md\";\n multiple?: boolean;\n selected?: DropdownItemType | DropdownItemType[];\n offsetTop?: number;\n textAlignment?: \"left\" | \"center\";\n customContent?: ReactNode;\n actionSheet?: ActionSheetType;\n onChange?: (item: DropdownItemType | DropdownItemType[]) => void;\n onActionSheetClose?: () => void;\n};\n\nconst dropdownVariants = {\n hidden: {\n opacity: 0,\n transition: { duration: 0.2 },\n },\n visible: {\n opacity: 1,\n transition: { duration: 0.2 },\n },\n};\n\nexport const DropdownContainerAtom: React.FC = ({\n className = \"\",\n containerSize = \"default\",\n width = \"200px\",\n parent,\n isOpen = false,\n data = [],\n itemSize = \"sm\",\n multiple = false,\n selected: selectedItems = [],\n offsetTop = 5,\n textAlignment = \"left\",\n onChange,\n onActionSheetClose,\n actionSheet,\n customContent,\n}) => {\n const { isDesktop } = useDevice();\n const containerRef = useRef(null);\n const [topPosition, setTopPosition] = useState(0);\n const [isScrollable, setIsScrollable] = useState(false);\n const [selected, setSelected] = useState<\n DropdownItemType | DropdownItemType[]\n >(selectedItems);\n\n let height: string | undefined;\n\n if (containerSize === \"sm\") {\n height = \"220px\";\n } else if (containerSize === \"md\") {\n height = \"440px\";\n } else if (containerSize === \"lg\") {\n height = \"660px\";\n } else if (containerSize === \"default\") {\n height = \"unset\";\n }\n\n const dropdownContainerStyle: CSSProperties = useMemo(() => {\n return {\n overflowY: isScrollable ? \"scroll\" : \"hidden\",\n maxHeight: height,\n width: width,\n top: `${topPosition}px`,\n };\n }, [height, topPosition]);\n\n useEffect(() => {\n setIsScrollable(containerSize !== \"default\");\n }, [containerSize]);\n\n useEffect(() => {\n if (parent.current && isOpen) {\n const elementHeight =\n parent.current.getBoundingClientRect().height + offsetTop;\n setTopPosition(elementHeight);\n }\n }, [parent, isOpen]);\n\n useEffect(() => {\n // Auto scroll on selected items\n if (!containerRef.current || !selected) return;\n\n const scrollToSelected = () => {\n // Skip if selected is null, undefined, or empty array\n if (!selected || (Array.isArray(selected) && selected.length === 0))\n return;\n\n const selectedItem = Array.isArray(selected) ? selected[0] : selected;\n const selectedElement = containerRef.current?.querySelector(\n `[data-value=\"${selectedItem.value}\"]`\n );\n\n if (selectedElement && containerRef.current) {\n const containerHeight = containerRef.current.clientHeight;\n const elementOffset =\n selectedElement.getBoundingClientRect().top -\n containerRef.current.getBoundingClientRect().top +\n 100;\n\n containerRef.current.scrollTop = elementOffset - containerHeight / 2;\n }\n };\n\n setTimeout(() => {\n scrollToSelected();\n }, 100);\n }, [isOpen]);\n\n const defaultRenderItem = ({\n label,\n value,\n iconLeft,\n iconRight,\n }: DropdownItemType) => {\n const isItemSelected = multiple\n ? Array.isArray(selected) && selected.some((item) => item.value === value)\n : !Array.isArray(selected) && selected?.value === value;\n\n return (\n {\n if (multiple) {\n // For multiple selection, handle array of selected items\n const newSelected = Array.isArray(selected) ? [...selected] : [];\n const existingIndex = newSelected.findIndex(\n (item) => item.value === value\n );\n\n if (existingIndex >= 0) {\n newSelected.splice(existingIndex, 1);\n } else {\n newSelected.push({ label, value });\n }\n setSelected(newSelected);\n onChange?.(newSelected);\n } else {\n // For single selection, just set the selected item or deselect\n setSelected(e);\n onChange?.(e);\n }\n }}\n key={`item-${label}-${value}`}\n selected={isItemSelected}\n iconLeft={iconLeft}\n iconRight={iconRight}\n />\n );\n };\n\n // Create content for action sheet\n const renderDropdownContent = () => {\n if (customContent) {\n return customContent;\n }\n\n return (\n
\n {data?.map(({ title, items }, key) => (\n
\n {title && }\n {items.length > 0 && items.map((item) => defaultRenderItem(item))}\n {title &&
}\n
\n ))}\n
\n );\n };\n\n return (\n isOpen &&\n (data.length > 0 || customContent) && (\n <>\n {isDesktop ? (\n \n \n {renderDropdownContent()}\n \n \n ) : (\n {\n onChange?.(\n Array.isArray(selected)\n ? selected\n : selected || { label: \"\", value: \"\" }\n );\n onActionSheetClose?.();\n }}\n type=\"bottom\"\n />\n )}\n \n )\n );\n};\n\nexport default DropdownContainerAtom;\n"],"names":[],"mappings":"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"}