@bikdotai/bik-component-library 0.0.833 → 0.0.834

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuList.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport { DropdownOption, GroupedOption, SingleOption } from '../../../type';\nimport { MenuItem } from './MenuItem';\nimport { StyledGroupedLabel } from './MenuList.styled';\n\ninterface MenuListProps {\n\toptions: DropdownOption[];\n\tisMultiSelect?: boolean;\n\tshowDescription: (title?: string, description?: string) => void;\n\tonSelect: (optionSelect: SingleOption) => void;\n\tversion?: '1.0' | '2.0';\n\tonInfiniteScroll?: () => void;\n\tonDropdownItemClick?: (option: DropdownOption) => void;\n\tuseDefaultCursor?: boolean;\n\tfocusedIndex?: number;\n\tisDraggable?: boolean;\n\tonOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;\n\tshowCheckboxForCustomElement?: boolean;\n}\n// eslint-disable-next-line react/display-name\nexport const MenuList = forwardRef<HTMLDivElement[], MenuListProps>(\n\t(\n\t\t{\n\t\t\toptions,\n\t\t\tisMultiSelect,\n\t\t\tshowDescription,\n\t\t\tonSelect,\n\t\t\tversion,\n\t\t\tonInfiniteScroll,\n\t\t\tonDropdownItemClick,\n\t\t\tuseDefaultCursor,\n\t\t\tfocusedIndex = -1,\n\t\t\tisDraggable = false,\n\t\t\tonOptionsReorder,\n\t\t\tshowCheckboxForCustomElement = false,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst observer = useRef<IntersectionObserver | null>(null);\n\t\tconst spanRef = useRef<HTMLSpanElement | null>(null);\n\t\tconst [draggedIndex, setDraggedIndex] = useState<number | null>(null);\n\t\tconst [draggedOverIndex, setDraggedOverIndex] = useState<number | null>(\n\t\t\tnull,\n\t\t);\n\n\t\tconst setupObserver = useCallback(() => {\n\t\t\tif (observer.current) {\n\t\t\t\tobserver.current.disconnect();\n\t\t\t}\n\t\t\tobserver.current = new IntersectionObserver((entries) => {\n\t\t\t\tif (entries[0].isIntersecting) {\n\t\t\t\t\tonInfiniteScroll?.();\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (spanRef.current) {\n\t\t\t\tobserver.current.observe(spanRef.current);\n\t\t\t}\n\t\t}, [onInfiniteScroll]);\n\n\t\tuseEffect(() => {\n\t\t\tsetupObserver();\n\t\t\treturn () => {\n\t\t\t\tif (observer.current) {\n\t\t\t\t\tobserver.current.disconnect();\n\t\t\t\t}\n\t\t\t};\n\t\t}, [setupObserver, options]);\n\n\t\tconst handleDragStart = useCallback(\n\t\t\t(index: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable) return;\n\t\t\t\tsetDraggedIndex(index);\n\t\t\t\te.dataTransfer.effectAllowed = 'move';\n\t\t\t},\n\t\t\t[isDraggable],\n\t\t);\n\n\t\tconst handleDragOver = useCallback(\n\t\t\t(index: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable) return;\n\t\t\t\te.preventDefault();\n\t\t\t\te.dataTransfer.dropEffect = 'move';\n\t\t\t\tsetDraggedOverIndex(index);\n\t\t\t},\n\t\t\t[isDraggable],\n\t\t);\n\n\t\tconst handleDrop = useCallback(\n\t\t\t(dropIndex: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable || draggedIndex === null) return;\n\t\t\t\te.preventDefault();\n\n\t\t\t\tif (draggedIndex !== dropIndex) {\n\t\t\t\t\tconst newOptions = [...options];\n\t\t\t\t\tconst [item] = newOptions.splice(draggedIndex, 1);\n\t\t\t\t\tnewOptions.splice(dropIndex, 0, item);\n\t\t\t\t\tonOptionsReorder?.(newOptions);\n\t\t\t\t}\n\n\t\t\t\tsetDraggedIndex(null);\n\t\t\t\tsetDraggedOverIndex(null);\n\t\t\t},\n\t\t\t[isDraggable, draggedIndex, options, onOptionsReorder],\n\t\t);\n\n\t\tconst handleDragEnd = useCallback(() => {\n\t\t\tsetDraggedIndex(null);\n\t\t\tsetDraggedOverIndex(null);\n\t\t}, []);\n\n\t\t// Calculate flat indices for all options\n\t\tconst flatIndices = new Map<SingleOption, number>();\n\t\tlet currentIndex = -1;\n\t\toptions.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((menuOption) => {\n\t\t\t\t\tif (!menuOption.disabled) {\n\t\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\t\tflatIndices.set(menuOption, currentIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\tif (!singleOption.disabled) {\n\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\tflatIndices.set(singleOption, currentIndex);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{options.map((option, i) => {\n\t\t\t\t\tconst last = i === options.length - 1;\n\t\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t\tconst groupedOption = option as GroupedOption;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div key={i} style={{ marginTop: version === '2.0' ? 2 : 0 }}>\n\t\t\t\t\t\t\t\t<StyledGroupedLabel version={version}>\n\t\t\t\t\t\t\t\t\t{groupedOption.leadingIcon ? (\n\t\t\t\t\t\t\t\t\t\t<span style={{ marginRight: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t{groupedOption.leadingIcon}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t{groupedOption.label}\n\t\t\t\t\t\t\t\t</StyledGroupedLabel>\n\t\t\t\t\t\t\t\t{groupedOption.options.map((menuOption, idx) => {\n\t\t\t\t\t\t\t\t\tconst currentFlatIndex = flatIndices.get(menuOption);\n\t\t\t\t\t\t\t\t\tconst isFocused =\n\t\t\t\t\t\t\t\t\t\tcurrentFlatIndex === focusedIndex && !menuOption.disabled;\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\t\t\tlast={idx === groupedOption.options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\t\t\toption={menuOption}\n\t\t\t\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\t\t\t\tkey={`${i}-${idx}`}\n\t\t\t\t\t\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\t\t\t\t\t\tdataIndex={currentFlatIndex}\n\t\t\t\t\t\t\t\t\t\t\tisDraggable={false}\n\t\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={\n\t\t\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (ref && typeof ref === 'object' && ref.current) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) ref.current[i] = el;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t{last ? <span ref={spanRef} /> : null}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\t\tconst currentFlatIndex = flatIndices.get(singleOption);\n\t\t\t\t\tconst isFocused =\n\t\t\t\t\t\tcurrentFlatIndex === focusedIndex && !singleOption.disabled;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div key={i}>\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\tlast={last}\n\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\toption={singleOption}\n\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\tkey={singleOption.value}\n\t\t\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\t\t\tdataIndex={currentFlatIndex}\n\t\t\t\t\t\t\t\tisDraggable={isDraggable}\n\t\t\t\t\t\t\t\tonDragStart={handleDragStart(i)}\n\t\t\t\t\t\t\t\tonDragOver={handleDragOver(i)}\n\t\t\t\t\t\t\t\tonDrop={handleDrop(i)}\n\t\t\t\t\t\t\t\tonDragEnd={handleDragEnd}\n\t\t\t\t\t\t\t\tisDraggedOver={draggedOverIndex === i}\n\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\tif (ref && typeof ref === 'object' && ref.current && el) {\n\t\t\t\t\t\t\t\t\t\tref.current[i] = el;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{last ? <span ref={spanRef} /> : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</>\n\t\t);\n\t},\n);\n"],"names":["MenuList","forwardRef","options","isMultiSelect","showDescription","onSelect","version","onInfiniteScroll","onDropdownItemClick","useDefaultCursor","focusedIndex","isDraggable","onOptionsReorder","showCheckboxForCustomElement","ref","observer","useRef","spanRef","draggedIndex","setDraggedIndex","useState","draggedOverIndex","setDraggedOverIndex","setupObserver","useCallback","entries","useEffect","handleDragStart","index","handleDragOver","handleDrop","dropIndex","newOptions","item","handleDragEnd","flatIndices","currentIndex","option","menuOption","singleOption","jsx","Fragment","i","last","groupedOption","jsxs","StyledGroupedLabel","idx","currentFlatIndex","isFocused","MenuItem","el"],"mappings":"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"}
+{"version":3,"file":"MenuList.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuList.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport { DropdownOption, GroupedOption, SingleOption } from '../../../type';\nimport { MenuItem } from './MenuItem';\nimport { Divider, StyledGroupedLabel } from './MenuList.styled';\n\ninterface MenuListProps {\n\toptions: DropdownOption[];\n\tisMultiSelect?: boolean;\n\tshowDescription: (title?: string, description?: string) => void;\n\tonSelect: (optionSelect: SingleOption) => void;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tonInfiniteScroll?: () => void;\n\tonDropdownItemClick?: (option: DropdownOption) => void;\n\tuseDefaultCursor?: boolean;\n\tfocusedIndex?: number;\n\tisDraggable?: boolean;\n\tonOptionsReorder?: (reorderedOptions: DropdownOption[]) => void;\n\tshowCheckboxForCustomElement?: boolean;\n\tcheckboxActiveColor?: string;\n\tbrandSelectedRow?: boolean;\n}\n// eslint-disable-next-line react/display-name\nexport const MenuList = forwardRef<HTMLDivElement[], MenuListProps>(\n\t(\n\t\t{\n\t\t\toptions,\n\t\t\tisMultiSelect,\n\t\t\tshowDescription,\n\t\t\tonSelect,\n\t\t\tversion,\n\t\t\tonInfiniteScroll,\n\t\t\tonDropdownItemClick,\n\t\t\tuseDefaultCursor,\n\t\t\tfocusedIndex = -1,\n\t\t\tisDraggable = false,\n\t\t\tonOptionsReorder,\n\t\t\tshowCheckboxForCustomElement = false,\n\t\t\tcheckboxActiveColor,\n\t\t\tbrandSelectedRow,\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst observer = useRef<IntersectionObserver | null>(null);\n\t\tconst spanRef = useRef<HTMLSpanElement | null>(null);\n\t\tconst [draggedIndex, setDraggedIndex] = useState<number | null>(null);\n\t\tconst [draggedOverIndex, setDraggedOverIndex] = useState<number | null>(\n\t\t\tnull,\n\t\t);\n\n\t\tconst setupObserver = useCallback(() => {\n\t\t\tif (observer.current) {\n\t\t\t\tobserver.current.disconnect();\n\t\t\t}\n\t\t\tobserver.current = new IntersectionObserver((entries) => {\n\t\t\t\tif (entries[0].isIntersecting) {\n\t\t\t\t\tonInfiniteScroll?.();\n\t\t\t\t}\n\t\t\t});\n\t\t\tif (spanRef.current) {\n\t\t\t\tobserver.current.observe(spanRef.current);\n\t\t\t}\n\t\t}, [onInfiniteScroll]);\n\n\t\tuseEffect(() => {\n\t\t\tsetupObserver();\n\t\t\treturn () => {\n\t\t\t\tif (observer.current) {\n\t\t\t\t\tobserver.current.disconnect();\n\t\t\t\t}\n\t\t\t};\n\t\t}, [setupObserver, options]);\n\n\t\tconst handleDragStart = useCallback(\n\t\t\t(index: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable) return;\n\t\t\t\tsetDraggedIndex(index);\n\t\t\t\te.dataTransfer.effectAllowed = 'move';\n\t\t\t},\n\t\t\t[isDraggable],\n\t\t);\n\n\t\tconst handleDragOver = useCallback(\n\t\t\t(index: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable) return;\n\t\t\t\te.preventDefault();\n\t\t\t\te.dataTransfer.dropEffect = 'move';\n\t\t\t\tsetDraggedOverIndex(index);\n\t\t\t},\n\t\t\t[isDraggable],\n\t\t);\n\n\t\tconst handleDrop = useCallback(\n\t\t\t(dropIndex: number) => (e: React.DragEvent<HTMLDivElement>) => {\n\t\t\t\tif (!isDraggable || draggedIndex === null) return;\n\t\t\t\te.preventDefault();\n\n\t\t\t\tif (draggedIndex !== dropIndex) {\n\t\t\t\t\tconst newOptions = [...options];\n\t\t\t\t\tconst [item] = newOptions.splice(draggedIndex, 1);\n\t\t\t\t\tnewOptions.splice(dropIndex, 0, item);\n\t\t\t\t\tonOptionsReorder?.(newOptions);\n\t\t\t\t}\n\n\t\t\t\tsetDraggedIndex(null);\n\t\t\t\tsetDraggedOverIndex(null);\n\t\t\t},\n\t\t\t[isDraggable, draggedIndex, options, onOptionsReorder],\n\t\t);\n\n\t\tconst handleDragEnd = useCallback(() => {\n\t\t\tsetDraggedIndex(null);\n\t\t\tsetDraggedOverIndex(null);\n\t\t}, []);\n\n\t\t// Calculate flat indices for all options\n\t\tconst flatIndices = new Map<SingleOption, number>();\n\t\tlet currentIndex = -1;\n\t\toptions.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((menuOption) => {\n\t\t\t\t\tif (!menuOption.disabled) {\n\t\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\t\tflatIndices.set(menuOption, currentIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\tif (!singleOption.disabled) {\n\t\t\t\t\tcurrentIndex++;\n\t\t\t\t\tflatIndices.set(singleOption, currentIndex);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{options.map((option, i) => {\n\t\t\t\t\tconst last = i === options.length - 1;\n\t\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t\tconst groupedOption = option as GroupedOption;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div key={i} style={{ marginTop: version === '2.0' ? 2 : 0 }}>\n\t\t\t\t\t\t\t\t<StyledGroupedLabel version={version}>\n\t\t\t\t\t\t\t\t\t{groupedOption.leadingIcon ? (\n\t\t\t\t\t\t\t\t\t\t<span style={{ marginRight: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t{groupedOption.leadingIcon}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t{groupedOption.label}\n\t\t\t\t\t\t\t\t</StyledGroupedLabel>\n\t\t\t\t\t\t\t\t{groupedOption.options.map((menuOption, idx) => {\n\t\t\t\t\t\t\t\t\tconst currentFlatIndex = flatIndices.get(menuOption);\n\t\t\t\t\t\t\t\t\tconst isFocused =\n\t\t\t\t\t\t\t\t\t\tcurrentFlatIndex === focusedIndex && !menuOption.disabled;\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\t\t\tlast={idx === groupedOption.options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\t\t\toption={menuOption}\n\t\t\t\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\t\t\t\tkey={`${i}-${idx}`}\n\t\t\t\t\t\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\t\t\t\t\t\tdataIndex={currentFlatIndex}\n\t\t\t\t\t\t\t\t\t\t\tisDraggable={false}\n\t\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={\n\t\t\t\t\t\t\t\t\t\t\t\tshowCheckboxForCustomElement\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (ref && typeof ref === 'object' && ref.current) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) ref.current[i] = el;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t{last ? <span ref={spanRef} /> : null}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\t\tconst currentFlatIndex = flatIndices.get(singleOption);\n\t\t\t\t\tconst isFocused =\n\t\t\t\t\t\tcurrentFlatIndex === focusedIndex && !singleOption.disabled;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div key={i}>\n\t\t\t\t\t\t\t{singleOption.hasDivider && <Divider />}\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\tlast={last}\n\t\t\t\t\t\t\t\tonSelect={onSelect}\n\t\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\toption={singleOption}\n\t\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\t\tkey={singleOption.value}\n\t\t\t\t\t\t\t\tisFocused={isFocused}\n\t\t\t\t\t\t\t\tdataIndex={currentFlatIndex}\n\t\t\t\t\t\t\t\tisDraggable={isDraggable}\n\t\t\t\t\t\t\t\tonDragStart={handleDragStart(i)}\n\t\t\t\t\t\t\t\tonDragOver={handleDragOver(i)}\n\t\t\t\t\t\t\t\tonDrop={handleDrop(i)}\n\t\t\t\t\t\t\t\tonDragEnd={handleDragEnd}\n\t\t\t\t\t\t\t\tisDraggedOver={draggedOverIndex === i}\n\t\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\tif (ref && typeof ref === 'object' && ref.current && el) {\n\t\t\t\t\t\t\t\t\t\tref.current[i] = el;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{last ? <span ref={spanRef} /> : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</>\n\t\t);\n\t},\n);\n"],"names":["MenuList","forwardRef","options","isMultiSelect","showDescription","onSelect","version","onInfiniteScroll","onDropdownItemClick","useDefaultCursor","focusedIndex","isDraggable","onOptionsReorder","showCheckboxForCustomElement","checkboxActiveColor","brandSelectedRow","ref","observer","useRef","spanRef","draggedIndex","setDraggedIndex","useState","draggedOverIndex","setDraggedOverIndex","setupObserver","useCallback","entries","useEffect","handleDragStart","index","handleDragOver","handleDrop","dropIndex","newOptions","item","handleDragEnd","flatIndices","currentIndex","option","menuOption","singleOption","jsx","Fragment","i","last","groupedOption","jsxs","StyledGroupedLabel","idx","currentFlatIndex","isFocused","MenuItem","el","Divider"],"mappings":"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"}

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.d.ts

@@ -1,6 +1,7 @@
+export declare const Divider: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const StyledGroupedLabel: import('styled-components').StyledComponent<"div", any, {
     numberOfLines?: number | undefined;
     color?: string | undefined;
 } & {
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js

@@ -1,13 +1,18 @@
 import e from "styled-components";
 import { BodyCaption as n } from "../../../../TypographyStyle.js";
 import { COLORS as r } from "../../../../../constants/Theme.js";
-const p = e(n)`
+const p = e.div`
+	height: 1px;
+	background-color: ${r.stroke.primary};
+	margin: 4px 8px;
+`, a = e(n)`
 	padding: 8px ${(o) => o.version === "2.0" ? 12 : 16}px;
 	color: ${(o) => o.version === "2.0" ? r.content.placeholder : r.content.secondary};
 	background-color: ${(o) => o.version === "2.0" ? r.surface.standard : r.background.base};
 	font-size: ${(o) => o.version === "2.0" ? 10 : 12}px;
 `;
 export {
-  p as StyledGroupedLabel
+  p as Divider,
+  a as StyledGroupedLabel
 };
 //# sourceMappingURL=MenuList.styled.js.map

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.styled.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const StyledGroupedLabel = styled(BodyCaption)<{\n\tversion?: '1.0' | '2.0';\n}>`\n\tpadding: 8px ${(props) => (props.version === '2.0' ? 12 : 16)}px;\n\tcolor: ${(props) =>\n\t\tprops.version === '2.0'\n\t\t\t? COLORS.content.placeholder\n\t\t\t: COLORS.content.secondary};\n\tbackground-color: ${(props) =>\n\t\tprops.version === '2.0' ? COLORS.surface.standard : COLORS.background.base};\n\tfont-size: ${(props) => (props.version === '2.0' ? 10 : 12)}px;\n`;\n"],"names":["StyledGroupedLabel","styled","BodyCaption","props","COLORS"],"mappings":";;;AAIO,MAAMA,IAAqBC,EAAOC,CAAW;AAAA,gBAGpC,CAACC,MAAWA,EAAM,YAAY,QAAQ,KAAK,EAAG;AAAA,UACpD,CAACA,MACTA,EAAM,YAAY,QACfC,EAAO,QAAQ,cACfA,EAAO,QAAQ,SAAS;AAAA,qBACR,CAACD,MACpBA,EAAM,YAAY,QAAQC,EAAO,QAAQ,WAAWA,EAAO,WAAW,IAAI;AAAA,cAC9D,CAACD,MAAWA,EAAM,YAAY,QAAQ,KAAK,EAAG;AAAA;"}
+{"version":3,"file":"MenuList.styled.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Divider = styled.div`\n\theight: 1px;\n\tbackground-color: ${COLORS.stroke.primary};\n\tmargin: 4px 8px;\n`;\n\nexport const StyledGroupedLabel = styled(BodyCaption)<{\n\tversion?: '1.0' | '2.0' | '3.0';\n}>`\n\tpadding: 8px ${(props) => (props.version === '2.0' ? 12 : 16)}px;\n\tcolor: ${(props) =>\n\t\tprops.version === '2.0'\n\t\t\t? COLORS.content.placeholder\n\t\t\t: COLORS.content.secondary};\n\tbackground-color: ${(props) =>\n\t\tprops.version === '2.0' ? COLORS.surface.standard : COLORS.background.base};\n\tfont-size: ${(props) => (props.version === '2.0' ? 10 : 12)}px;\n`;\n"],"names":["Divider","styled","COLORS","StyledGroupedLabel","BodyCaption","props"],"mappings":";;;AAIO,MAAMA,IAAUC,EAAO;AAAA;AAAA,qBAETC,EAAO,OAAO,OAAO;AAAA;AAAA,GAI7BC,IAAqBF,EAAOG,CAAW;AAAA,gBAGpC,CAACC,MAAWA,EAAM,YAAY,QAAQ,KAAK,EAAG;AAAA,UACpD,CAACA,MACTA,EAAM,YAAY,QACfH,EAAO,QAAQ,cACfA,EAAO,QAAQ,SAAS;AAAA,qBACR,CAACG,MACpBA,EAAM,YAAY,QAAQH,EAAO,QAAQ,WAAWA,EAAO,WAAW,IAAI;AAAA,cAC9D,CAACG,MAAWA,EAAM,YAAY,QAAQ,KAAK,EAAG;AAAA;"}

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.d.ts

@@ -4,5 +4,7 @@ export type SelectAllCheckboxState = 'notSelected' | 'selectAll' | 'partiallySel
 export declare const SelectAllMenu: React.FC<{
     options: DropdownOption[];
     onSelect: (newState: SelectAllCheckboxState) => void;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
+    checkboxActiveColor?: string;
+    brandSelectedRow?: boolean;
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js

@@ -1,13 +1,19 @@
 import { jsx as s } from "react/jsx-runtime";
-import { useState as f, useEffect as n } from "react";
-import { ListItem as h } from "../../../../list-item/ListItem.js";
-import { CheckBox as u } from "../../../../checkBox/CheckBox.js";
-const k = ({ options: o, onSelect: a, version: r }) => {
-  const [e, c] = f("notSelected");
+import { useState as h, useEffect as u } from "react";
+import { ListItem as S } from "../../../../list-item/ListItem.js";
+import { CheckBox as p } from "../../../../checkBox/CheckBox.js";
+const y = ({
+  options: o,
+  onSelect: a,
+  version: r,
+  checkboxActiveColor: f,
+  brandSelectedRow: n
+}) => {
+  const [e, c] = h("notSelected");
   function d() {
     e === "partiallySelected" && a("notSelected"), e === "selectAll" && a("notSelected"), e === "notSelected" && a("selectAll");
   }
-  return n(() => {
+  return u(() => {
     const l = [];
     o.filter((t) => !t.disabled).forEach((t) => {
       t.options ? t.options.filter((i) => !i.disabled).forEach((i) => {
@@ -15,9 +21,10 @@ const k = ({ options: o, onSelect: a, version: r }) => {
       }) : l.push(t.selected || !1);
     }), l.every(Boolean) ? c("selectAll") : l.filter(Boolean).length > 0 ? c("partiallySelected") : c("notSelected");
   }, [o]), /* @__PURE__ */ s(
-    h,
+    S,
     {
       version: r,
+      brandSelectedRow: n,
       onClick: (l) => {
         l.preventDefault(), d();
       },
@@ -26,12 +33,13 @@ const k = ({ options: o, onSelect: a, version: r }) => {
         value: "All"
       },
       leadingIcon: /* @__PURE__ */ s("div", { style: { width: 18, height: 18 }, children: /* @__PURE__ */ s(
-        u,
+        p,
         {
           size: r === "2.0" ? "SMALL" : "DEFAULT",
           isChecked: e === "selectAll" || e === "partiallySelected",
           isPartiallyChecked: e === "partiallySelected",
-          onValueChange: d
+          onValueChange: d,
+          activeColor: f
         }
       ) }),
       variant: "default"
@@ -39,6 +47,6 @@ const k = ({ options: o, onSelect: a, version: r }) => {
   );
 };
 export {
-  k as SelectAllMenu
+  y as SelectAllMenu
 };
 //# sourceMappingURL=SelectAllMenu.js.map

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectAllMenu.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { ListItem } from '@src/components/list-item';\nimport { DropdownOption, GroupedOption, SingleOption } from '../../../type';\n\nexport type SelectAllCheckboxState =\n\t| 'notSelected'\n\t| 'selectAll'\n\t| 'partiallySelected';\n\nexport const SelectAllMenu: React.FC<{\n\toptions: DropdownOption[];\n\tonSelect: (newState: SelectAllCheckboxState) => void;\n\tversion?: '1.0' | '2.0';\n}> = ({ options, onSelect, version }) => {\n\tconst [checkStatus, setCheckStatus] =\n\t\tuseState<SelectAllCheckboxState>('notSelected');\n\n\tfunction onCheckHandler() {\n\t\tif (checkStatus === 'partiallySelected') {\n\t\t\tonSelect('notSelected');\n\t\t}\n\n\t\tif (checkStatus === 'selectAll') {\n\t\t\tonSelect('notSelected');\n\t\t}\n\n\t\tif (checkStatus === 'notSelected') {\n\t\t\tonSelect('selectAll');\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tconst allOptions: boolean[] = [];\n\n\t\toptions\n\t\t\t.filter((option) => !(option as SingleOption).disabled)\n\t\t\t.forEach((option) => {\n\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t(option as GroupedOption).options\n\t\t\t\t\t\t.filter((op) => !op.disabled)\n\t\t\t\t\t\t.forEach((nestedOption) => {\n\t\t\t\t\t\t\tallOptions.push(nestedOption.selected || false);\n\t\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tallOptions.push((option as SingleOption).selected || false);\n\t\t\t\t}\n\t\t\t});\n\n\t\tif (allOptions.every(Boolean)) {\n\t\t\tsetCheckStatus('selectAll');\n\t\t} else if (allOptions.filter(Boolean).length > 0) {\n\t\t\tsetCheckStatus('partiallySelected');\n\t\t} else {\n\t\t\tsetCheckStatus('notSelected');\n\t\t}\n\t}, [options]);\n\n\treturn (\n\t\t<ListItem\n\t\t\tversion={version}\n\t\t\tonClick={(e) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tonCheckHandler();\n\t\t\t}}\n\t\t\tlistItem={{\n\t\t\t\tlabel: 'Select All',\n\t\t\t\tvalue: 'All',\n\t\t\t}}\n\t\t\tleadingIcon={\n\t\t\t\t<div style={{ width: 18, height: 18 }}>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\tisChecked={\n\t\t\t\t\t\t\tcheckStatus === 'selectAll' || checkStatus === 'partiallySelected'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisPartiallyChecked={checkStatus === 'partiallySelected'}\n\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\tvariant={'default'}\n\t\t/>\n\t);\n};\n"],"names":["SelectAllMenu","options","onSelect","version","checkStatus","setCheckStatus","useState","onCheckHandler","useEffect","allOptions","option","op","nestedOption","jsx","ListItem","e","CheckBox"],"mappings":";;;;AAUO,MAAMA,IAIR,CAAC,EAAE,SAAAC,GAAS,UAAAC,GAAU,SAAAC,QAAc;AACxC,QAAM,CAACC,GAAaC,CAAc,IACjCC,EAAiC,aAAa;AAE/C,WAASC,IAAiB;AACzB,IAAIH,MAAgB,uBACnBF,EAAS,aAAa,GAGnBE,MAAgB,eACnBF,EAAS,aAAa,GAGnBE,MAAgB,iBACnBF,EAAS,WAAW;AAAA,EAEtB;AAEA,SAAAM,EAAU,MAAM;AACf,UAAMC,IAAwB,CAAA;AAE9B,IAAAR,EACE,OAAO,CAACS,MAAW,CAAEA,EAAwB,QAAQ,EACrD,QAAQ,CAACA,MAAW;AACpB,MAAKA,EAAyB,UAC5BA,EAAyB,QACxB,OAAO,CAACC,MAAO,CAACA,EAAG,QAAQ,EAC3B,QAAQ,CAACC,MAAiB;AAC1B,QAAAH,EAAW,KAAKG,EAAa,YAAY,EAAK;AAAA,MAC/C,CAAC,IAEFH,EAAW,KAAMC,EAAwB,YAAY,EAAK;AAAA,IAE5D,CAAC,GAEED,EAAW,MAAM,OAAO,IAC3BJ,EAAe,WAAW,IAChBI,EAAW,OAAO,OAAO,EAAE,SAAS,IAC9CJ,EAAe,mBAAmB,IAElCA,EAAe,aAAa;AAAA,EAE9B,GAAG,CAACJ,CAAO,CAAC,GAGX,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,SAAAX;AAAA,MACA,SAAS,CAACY,MAAM;AACf,QAAAA,EAAE,eAAA,GACFR,EAAA;AAAA,MACD;AAAA,MACA,UAAU;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAER,+BACE,OAAA,EAAI,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAA,GAChC,UAAA,gBAAAM;AAAA,QAACG;AAAA,QAAA;AAAA,UACA,MAAMb,MAAY,QAAQ,UAAU;AAAA,UACpC,WACCC,MAAgB,eAAeA,MAAgB;AAAA,UAEhD,oBAAoBA,MAAgB;AAAA,UACpC,eAAeG;AAAA,QAAA;AAAA,MAAA,GAEjB;AAAA,MAED,SAAS;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"SelectAllMenu.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { ListItem } from '@src/components/list-item';\nimport { DropdownOption, GroupedOption, SingleOption } from '../../../type';\n\nexport type SelectAllCheckboxState =\n\t| 'notSelected'\n\t| 'selectAll'\n\t| 'partiallySelected';\n\nexport const SelectAllMenu: React.FC<{\n\toptions: DropdownOption[];\n\tonSelect: (newState: SelectAllCheckboxState) => void;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tcheckboxActiveColor?: string;\n\tbrandSelectedRow?: boolean;\n}> = ({\n\toptions,\n\tonSelect,\n\tversion,\n\tcheckboxActiveColor,\n\tbrandSelectedRow,\n}) => {\n\tconst [checkStatus, setCheckStatus] =\n\t\tuseState<SelectAllCheckboxState>('notSelected');\n\n\tfunction onCheckHandler() {\n\t\tif (checkStatus === 'partiallySelected') {\n\t\t\tonSelect('notSelected');\n\t\t}\n\n\t\tif (checkStatus === 'selectAll') {\n\t\t\tonSelect('notSelected');\n\t\t}\n\n\t\tif (checkStatus === 'notSelected') {\n\t\t\tonSelect('selectAll');\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tconst allOptions: boolean[] = [];\n\n\t\toptions\n\t\t\t.filter((option) => !(option as SingleOption).disabled)\n\t\t\t.forEach((option) => {\n\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t(option as GroupedOption).options\n\t\t\t\t\t\t.filter((op) => !op.disabled)\n\t\t\t\t\t\t.forEach((nestedOption) => {\n\t\t\t\t\t\t\tallOptions.push(nestedOption.selected || false);\n\t\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tallOptions.push((option as SingleOption).selected || false);\n\t\t\t\t}\n\t\t\t});\n\n\t\tif (allOptions.every(Boolean)) {\n\t\t\tsetCheckStatus('selectAll');\n\t\t} else if (allOptions.filter(Boolean).length > 0) {\n\t\t\tsetCheckStatus('partiallySelected');\n\t\t} else {\n\t\t\tsetCheckStatus('notSelected');\n\t\t}\n\t}, [options]);\n\n\treturn (\n\t\t<ListItem\n\t\t\tversion={version}\n\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\tonClick={(e) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tonCheckHandler();\n\t\t\t}}\n\t\t\tlistItem={{\n\t\t\t\tlabel: 'Select All',\n\t\t\t\tvalue: 'All',\n\t\t\t}}\n\t\t\tleadingIcon={\n\t\t\t\t<div style={{ width: 18, height: 18 }}>\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\tisChecked={\n\t\t\t\t\t\t\tcheckStatus === 'selectAll' || checkStatus === 'partiallySelected'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisPartiallyChecked={checkStatus === 'partiallySelected'}\n\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t\tactiveColor={checkboxActiveColor}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\tvariant={'default'}\n\t\t/>\n\t);\n};\n"],"names":["SelectAllMenu","options","onSelect","version","checkboxActiveColor","brandSelectedRow","checkStatus","setCheckStatus","useState","onCheckHandler","useEffect","allOptions","option","op","nestedOption","jsx","ListItem","e","CheckBox"],"mappings":";;;;AAUO,MAAMA,IAMR,CAAC;AAAA,EACL,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,kBAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAaC,CAAc,IACjCC,EAAiC,aAAa;AAE/C,WAASC,IAAiB;AACzB,IAAIH,MAAgB,uBACnBJ,EAAS,aAAa,GAGnBI,MAAgB,eACnBJ,EAAS,aAAa,GAGnBI,MAAgB,iBACnBJ,EAAS,WAAW;AAAA,EAEtB;AAEA,SAAAQ,EAAU,MAAM;AACf,UAAMC,IAAwB,CAAA;AAE9B,IAAAV,EACE,OAAO,CAACW,MAAW,CAAEA,EAAwB,QAAQ,EACrD,QAAQ,CAACA,MAAW;AACpB,MAAKA,EAAyB,UAC5BA,EAAyB,QACxB,OAAO,CAACC,MAAO,CAACA,EAAG,QAAQ,EAC3B,QAAQ,CAACC,MAAiB;AAC1B,QAAAH,EAAW,KAAKG,EAAa,YAAY,EAAK;AAAA,MAC/C,CAAC,IAEFH,EAAW,KAAMC,EAAwB,YAAY,EAAK;AAAA,IAE5D,CAAC,GAEED,EAAW,MAAM,OAAO,IAC3BJ,EAAe,WAAW,IAChBI,EAAW,OAAO,OAAO,EAAE,SAAS,IAC9CJ,EAAe,mBAAmB,IAElCA,EAAe,aAAa;AAAA,EAE9B,GAAG,CAACN,CAAO,CAAC,GAGX,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,SAAAb;AAAA,MACA,kBAAAE;AAAA,MACA,SAAS,CAACY,MAAM;AACf,QAAAA,EAAE,eAAA,GACFR,EAAA;AAAA,MACD;AAAA,MACA,UAAU;AAAA,QACT,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,MAER,+BACE,OAAA,EAAI,OAAO,EAAE,OAAO,IAAI,QAAQ,GAAA,GAChC,UAAA,gBAAAM;AAAA,QAACG;AAAA,QAAA;AAAA,UACA,MAAMf,MAAY,QAAQ,UAAU;AAAA,UACpC,WACCG,MAAgB,eAAeA,MAAgB;AAAA,UAEhD,oBAAoBA,MAAgB;AAAA,UACpC,eAAeG;AAAA,UACf,aAAaL;AAAA,QAAA;AAAA,MAAA,GAEf;AAAA,MAED,SAAS;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 export declare const SearchBox: React.FC<{
     onSearch: (searchString: string) => void;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js

@@ -1,13 +1,13 @@
-import { jsx as o, Fragment as l } from "react/jsx-runtime";
-import { useState as i } from "react";
+import { jsx as o, Fragment as i } from "react/jsx-runtime";
+import { useState as c } from "react";
 import { InputStyleContext as d } from "../../../../input/context/InputStyleProvider.js";
 import { COLORS as r } from "../../../../../constants/Theme.js";
 import h from "../../../../../assets/icons/cross.svg.js";
 import f from "../../../../../assets/icons/search.svg.js";
 import { Input as u } from "../../../../input/Input.js";
-import { IconButton as s } from "../../../../icon-button/IconButton.js";
+import { IconButton as g } from "../../../../icon-button/IconButton.js";
 const y = ({ onSearch: e, version: t }) => {
-  const [m, n] = i(""), [c, p] = i(!1);
+  const [l, p] = c(""), [n, a] = c(!1);
   return /* @__PURE__ */ o(
     d.Provider,
     {
@@ -15,8 +15,8 @@ const y = ({ onSearch: e, version: t }) => {
         InputWrapper: {
           borderRadius: 0,
           border: 0,
-          borderBottom: `${t === "2.0" ? 0.5 : 1}px solid ${r.stroke.primary}`,
-          padding: `${t === "2.0" ? "6px 8px" : "14px 16px"}`
+          borderBottom: `${t === "2.0" || t === "3.0" ? 0.5 : 1}px solid ${r.stroke.primary}`,
+          padding: `${t === "2.0" || t === "3.0" ? "6px 8px" : "14px 16px"}`
         },
         IconHolder: {
           marginLeft: 0
@@ -32,34 +32,34 @@ const y = ({ onSearch: e, version: t }) => {
           noKeyDownChange: !0,
           skipFocus: !0,
           placeholder: "Search",
-          variant: t === "2.0" ? "small" : "default",
+          variant: t === "2.0" || t === "3.0" ? "small" : "default",
           leftIcon: {
             icon: () => /* @__PURE__ */ o(
               f,
               {
-                width: t === "2.0" ? 18 : 24,
-                height: t === "2.0" ? 18 : 24,
+                width: t === "2.0" || t === "3.0" ? 18 : 24,
+                height: t === "2.0" || t === "3.0" ? 18 : 24,
                 color: r.content.placeholder
               }
             )
           },
           rightIcon: {
-            icon: () => m ? /* @__PURE__ */ o(
-              s,
+            icon: () => l ? /* @__PURE__ */ o(
+              g,
               {
                 onClick: () => {
-                  p(!0), e(""), n("");
+                  a(!0), e(""), p("");
                 },
                 Icon: h,
-                width: t === "2.0" ? 18 : 24,
-                height: t === "2.0" ? 18 : 24,
+                width: t === "2.0" || t === "3.0" ? 18 : 24,
+                height: t === "2.0" || t === "3.0" ? 18 : 24,
                 iconColor: r.content.placeholder
               }
-            ) : /* @__PURE__ */ o(l, {})
+            ) : /* @__PURE__ */ o(i, {})
           },
-          reset: c,
-          onChangeText: (a) => {
-            p(!1), n(a), e(a);
+          reset: n,
+          onChangeText: (m) => {
+            a(!1), p(m), e(m);
           }
         }
       )

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { IconButton } from '@src/components/icon-button';\nimport { Input } from '@src/components/input';\nimport { InputStyleContext } from '@src/components/input/context/InputStyleProvider';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../../../../assets/icons/cross.svg';\nimport SearchIcon from '../../../../../assets/icons/search.svg';\n\nexport const SearchBox: React.FC<{\n\tonSearch: (searchString: string) => void;\n\tversion?: '1.0' | '2.0';\n}> = ({ onSearch, version }) => {\n\tconst [val, setVal] = useState('');\n\tconst [reset, setReset] = useState(false);\n\n\treturn (\n\t\t<InputStyleContext.Provider\n\t\t\tvalue={{\n\t\t\t\tInputWrapper: {\n\t\t\t\t\tborderRadius: 0,\n\t\t\t\t\tborder: 0,\n\t\t\t\t\tborderBottom: `${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\t\t\t\tCOLORS.stroke.primary\n\t\t\t\t\t}`,\n\t\t\t\t\tpadding: `${version === '2.0' ? '6px 8px' : '14px 16px'}`,\n\t\t\t\t},\n\t\t\t\tIconHolder: {\n\t\t\t\t\tmarginLeft: 0,\n\t\t\t\t},\n\t\t\t\tinput: {\n\t\t\t\t\tmarginLeft: 4,\n\t\t\t\t\tminHeight: '100%',\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<Input\n\t\t\t\tnoKeyDownChange\n\t\t\t\tskipFocus={true}\n\t\t\t\tplaceholder=\"Search\"\n\t\t\t\tvariant={version === '2.0' ? 'small' : 'default'}\n\t\t\t\tleftIcon={{\n\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\t\twidth={version === '2.0' ? 18 : 24}\n\t\t\t\t\t\t\theight={version === '2.0' ? 18 : 24}\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t\trightIcon={{\n\t\t\t\t\ticon: () =>\n\t\t\t\t\t\t!val ? (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetReset(true);\n\t\t\t\t\t\t\t\t\tonSearch('');\n\t\t\t\t\t\t\t\t\tsetVal('');\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tIcon={CrossIcon}\n\t\t\t\t\t\t\t\twidth={version === '2.0' ? 18 : 24}\n\t\t\t\t\t\t\t\theight={version === '2.0' ? 18 : 24}\n\t\t\t\t\t\t\t\ticonColor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t\treset={reset}\n\t\t\t\tonChangeText={(text) => {\n\t\t\t\t\tsetReset(false);\n\t\t\t\t\tsetVal(text);\n\t\t\t\t\tonSearch(text);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</InputStyleContext.Provider>\n\t);\n};\n"],"names":["SearchBox","onSearch","version","val","setVal","useState","reset","setReset","jsx","InputStyleContext","COLORS","Input","SearchIcon","IconButton","CrossIcon","text"],"mappings":";;;;;;;;AAQO,MAAMA,IAGR,CAAC,EAAE,UAAAC,GAAU,SAAAC,QAAc;AAC/B,QAAM,CAACC,GAAKC,CAAM,IAAIC,EAAS,EAAE,GAC3B,CAACC,GAAOC,CAAQ,IAAIF,EAAS,EAAK;AAExC,SACC,gBAAAG;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACA,OAAO;AAAA,QACN,cAAc;AAAA,UACb,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,cAAc,GAAGP,MAAY,QAAQ,MAAM,CAAC,YAC3CQ,EAAO,OAAO,OACf;AAAA,UACA,SAAS,GAAGR,MAAY,QAAQ,YAAY,WAAW;AAAA,QAAA;AAAA,QAExD,YAAY;AAAA,UACX,YAAY;AAAA,QAAA;AAAA,QAEb,OAAO;AAAA,UACN,YAAY;AAAA,UACZ,WAAW;AAAA,QAAA;AAAA,MACZ;AAAA,MAGD,UAAA,gBAAAM;AAAA,QAACG;AAAA,QAAA;AAAA,UACA,iBAAe;AAAA,UACf,WAAW;AAAA,UACX,aAAY;AAAA,UACZ,SAAST,MAAY,QAAQ,UAAU;AAAA,UACvC,UAAU;AAAA,YACT,MAAM,MACL,gBAAAM;AAAA,cAACI;AAAAA,cAAA;AAAA,gBACA,OAAOV,MAAY,QAAQ,KAAK;AAAA,gBAChC,QAAQA,MAAY,QAAQ,KAAK;AAAA,gBACjC,OAAOQ,EAAO,QAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UACvB;AAAA,UAGF,WAAW;AAAA,YACV,MAAM,MACJP,IAGA,gBAAAK;AAAA,cAACK;AAAA,cAAA;AAAA,gBACA,SAAS,MAAM;AACd,kBAAAN,EAAS,EAAI,GACbN,EAAS,EAAE,GACXG,EAAO,EAAE;AAAA,gBACV;AAAA,gBACA,MAAMU;AAAAA,gBACN,OAAOZ,MAAY,QAAQ,KAAK;AAAA,gBAChC,QAAQA,MAAY,QAAQ,KAAK;AAAA,gBACjC,WAAWQ,EAAO,QAAQ;AAAA,cAAA;AAAA,YAAA,2BAXzB;AAAA,UAYF;AAAA,UAGH,OAAAJ;AAAA,UACA,cAAc,CAACS,MAAS;AACvB,YAAAR,EAAS,EAAK,GACdH,EAAOW,CAAI,GACXd,EAASc,CAAI;AAAA,UACd;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAGH;"}
+{"version":3,"file":"SearchBox.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { IconButton } from '@src/components/icon-button';\nimport { Input } from '@src/components/input';\nimport { InputStyleContext } from '@src/components/input/context/InputStyleProvider';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../../../../assets/icons/cross.svg';\nimport SearchIcon from '../../../../../assets/icons/search.svg';\n\nexport const SearchBox: React.FC<{\n\tonSearch: (searchString: string) => void;\n\tversion?: '1.0' | '2.0' | '3.0';\n}> = ({ onSearch, version }) => {\n\tconst [val, setVal] = useState('');\n\tconst [reset, setReset] = useState(false);\n\n\treturn (\n\t\t<InputStyleContext.Provider\n\t\t\tvalue={{\n\t\t\t\tInputWrapper: {\n\t\t\t\t\tborderRadius: 0,\n\t\t\t\t\tborder: 0,\n\t\t\t\t\tborderBottom: `${\n\t\t\t\t\t\tversion === '2.0' || version === '3.0' ? 0.5 : 1\n\t\t\t\t\t}px solid ${COLORS.stroke.primary}`,\n\t\t\t\t\tpadding: `${\n\t\t\t\t\t\tversion === '2.0' || version === '3.0' ? '6px 8px' : '14px 16px'\n\t\t\t\t\t}`,\n\t\t\t\t},\n\t\t\t\tIconHolder: {\n\t\t\t\t\tmarginLeft: 0,\n\t\t\t\t},\n\t\t\t\tinput: {\n\t\t\t\t\tmarginLeft: 4,\n\t\t\t\t\tminHeight: '100%',\n\t\t\t\t},\n\t\t\t}}\n\t\t>\n\t\t\t<Input\n\t\t\t\tnoKeyDownChange\n\t\t\t\tskipFocus={true}\n\t\t\t\tplaceholder=\"Search\"\n\t\t\t\tvariant={version === '2.0' || version === '3.0' ? 'small' : 'default'}\n\t\t\t\tleftIcon={{\n\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\t\twidth={version === '2.0' || version === '3.0' ? 18 : 24}\n\t\t\t\t\t\t\theight={version === '2.0' || version === '3.0' ? 18 : 24}\n\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t\trightIcon={{\n\t\t\t\t\ticon: () =>\n\t\t\t\t\t\t!val ? (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetReset(true);\n\t\t\t\t\t\t\t\t\tonSearch('');\n\t\t\t\t\t\t\t\t\tsetVal('');\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tIcon={CrossIcon}\n\t\t\t\t\t\t\t\twidth={version === '2.0' || version === '3.0' ? 18 : 24}\n\t\t\t\t\t\t\t\theight={version === '2.0' || version === '3.0' ? 18 : 24}\n\t\t\t\t\t\t\t\ticonColor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t\treset={reset}\n\t\t\t\tonChangeText={(text) => {\n\t\t\t\t\tsetReset(false);\n\t\t\t\t\tsetVal(text);\n\t\t\t\t\tonSearch(text);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</InputStyleContext.Provider>\n\t);\n};\n"],"names":["SearchBox","onSearch","version","val","setVal","useState","reset","setReset","jsx","InputStyleContext","COLORS","Input","SearchIcon","IconButton","CrossIcon","text"],"mappings":";;;;;;;;AAQO,MAAMA,IAGR,CAAC,EAAE,UAAAC,GAAU,SAAAC,QAAc;AAC/B,QAAM,CAACC,GAAKC,CAAM,IAAIC,EAAS,EAAE,GAC3B,CAACC,GAAOC,CAAQ,IAAIF,EAAS,EAAK;AAExC,SACC,gBAAAG;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACA,OAAO;AAAA,QACN,cAAc;AAAA,UACb,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,cAAc,GACbP,MAAY,SAASA,MAAY,QAAQ,MAAM,CAChD,YAAYQ,EAAO,OAAO,OAAO;AAAA,UACjC,SAAS,GACRR,MAAY,SAASA,MAAY,QAAQ,YAAY,WACtD;AAAA,QAAA;AAAA,QAED,YAAY;AAAA,UACX,YAAY;AAAA,QAAA;AAAA,QAEb,OAAO;AAAA,UACN,YAAY;AAAA,UACZ,WAAW;AAAA,QAAA;AAAA,MACZ;AAAA,MAGD,UAAA,gBAAAM;AAAA,QAACG;AAAA,QAAA;AAAA,UACA,iBAAe;AAAA,UACf,WAAW;AAAA,UACX,aAAY;AAAA,UACZ,SAAST,MAAY,SAASA,MAAY,QAAQ,UAAU;AAAA,UAC5D,UAAU;AAAA,YACT,MAAM,MACL,gBAAAM;AAAA,cAACI;AAAAA,cAAA;AAAA,gBACA,OAAOV,MAAY,SAASA,MAAY,QAAQ,KAAK;AAAA,gBACrD,QAAQA,MAAY,SAASA,MAAY,QAAQ,KAAK;AAAA,gBACtD,OAAOQ,EAAO,QAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UACvB;AAAA,UAGF,WAAW;AAAA,YACV,MAAM,MACJP,IAGA,gBAAAK;AAAA,cAACK;AAAA,cAAA;AAAA,gBACA,SAAS,MAAM;AACd,kBAAAN,EAAS,EAAI,GACbN,EAAS,EAAE,GACXG,EAAO,EAAE;AAAA,gBACV;AAAA,gBACA,MAAMU;AAAAA,gBACN,OAAOZ,MAAY,SAASA,MAAY,QAAQ,KAAK;AAAA,gBACrD,QAAQA,MAAY,SAASA,MAAY,QAAQ,KAAK;AAAA,gBACtD,WAAWQ,EAAO,QAAQ;AAAA,cAAA;AAAA,YAAA,2BAXzB;AAAA,UAYF;AAAA,UAGH,OAAAJ;AAAA,UACA,cAAc,CAACS,MAAS;AACvB,YAAAR,EAAS,EAAK,GACdH,EAAOW,CAAI,GACXd,EAASc,CAAI;AAAA,UACd;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAGH;"}

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts

@@ -6,4 +6,5 @@ export declare const SearchZeroState: React.FC<{
     containerWidth?: string;
     errorMessage?: string;
     onRetry?: () => void;
+    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js

@@ -1,40 +1,66 @@
-import { jsx as r } from "react/jsx-runtime";
-import { ZeroState as s } from "../../../../zeroState/ZeroState.js";
-const d = ({
-  searchedString: n,
-  height: i,
+import { jsx as e } from "react/jsx-runtime";
+import { ZeroState as c } from "../../../../zeroState/ZeroState.js";
+import { COLORS as f } from "../../../../../constants/Theme.js";
+const y = ({
+  searchedString: l,
+  height: n,
   isLoading: o,
-  containerWidth: l,
-  errorMessage: e,
-  onRetry: a
+  containerWidth: i,
+  errorMessage: r,
+  onRetry: s,
+  version: a
 }) => {
-  const t = !!e && !o;
-  return /* @__PURE__ */ r(
+  const t = !!r && !o;
+  return a === "3.0" && !t && !o ? /* @__PURE__ */ e(
     "div",
     {
       style: {
-        height: i,
+        height: n,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ e(
+        "span",
+        {
+          style: {
+            fontFamily: "Inter",
+            fontSize: "12px",
+            fontWeight: 400,
+            lineHeight: "16px",
+            color: f.content.placeholder,
+            whiteSpace: "nowrap"
+          },
+          children: "No results found!"
+        }
+      )
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      style: {
+        height: n,
         display: "flex",
         alignItems: "center"
       },
-      children: /* @__PURE__ */ r(
-        s,
+      children: /* @__PURE__ */ e(
+        c,
         {
           isLoading: o,
           title: t ? "Failed to load options" : "No results found",
-          subTitle: t ? e : `Sorry we could not find any results for "${n ?? ""}"`,
+          subTitle: t ? r : `Sorry we could not find any results for "${l ?? ""}"`,
           actionButton: t ? {
             buttonText: "Try again",
             buttonType: "text",
-            onClick: a
+            onClick: s
           } : void 0,
-          containerWidth: l
+          containerWidth: i
         }
       )
     }
   );
 };
 export {
-  d as SearchZeroState
+  y as SearchZeroState
 };
 //# sourceMappingURL=SearchZeroState.js.map

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchZeroState.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.tsx"],"sourcesContent":["import React from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\n\nexport const SearchZeroState: React.FC<{\n\tsearchedString: string;\n\theight: number;\n\tisLoading?: boolean;\n\tcontainerWidth?: string;\n\terrorMessage?: string;\n\tonRetry?: () => void;\n}> = ({\n\tsearchedString,\n\theight,\n\tisLoading,\n\tcontainerWidth,\n\terrorMessage,\n\tonRetry,\n}) => {\n\tconst isErrorState = !!errorMessage && !isLoading;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\theight: height,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t}}\n\t\t>\n\t\t\t<ZeroState\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttitle={isErrorState ? 'Failed to load options' : 'No results found'}\n\t\t\t\tsubTitle={\n\t\t\t\t\tisErrorState\n\t\t\t\t\t\t? errorMessage\n\t\t\t\t\t\t: `Sorry we could not find any results for \"${\n\t\t\t\t\t\t\t\tsearchedString ?? ''\n\t\t\t\t\t\t  }\"`\n\t\t\t\t}\n\t\t\t\tactionButton={\n\t\t\t\t\tisErrorState\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tbuttonText: 'Try again',\n\t\t\t\t\t\t\t\tbuttonType: 'text',\n\t\t\t\t\t\t\t\tonClick: onRetry,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tcontainerWidth={containerWidth}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n"],"names":["SearchZeroState","searchedString","height","isLoading","containerWidth","errorMessage","onRetry","isErrorState","jsx","ZeroState"],"mappings":";;AAGO,MAAMA,IAOR,CAAC;AAAA,EACL,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AACD,MAAM;AACL,QAAMC,IAAe,CAAC,CAACF,KAAgB,CAACF;AAExC,SACC,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,QAAAN;AAAA,QACA,SAAS;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,MAGb,UAAA,gBAAAM;AAAA,QAACC;AAAA,QAAA;AAAA,UACA,WAAAN;AAAA,UACA,OAAOI,IAAe,2BAA2B;AAAA,UACjD,UACCA,IACGF,IACA,4CACAJ,KAAkB,EAClB;AAAA,UAEJ,cACCM,IACG;AAAA,YACA,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,SAASD;AAAA,UAAA,IAET;AAAA,UAEJ,gBAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAGH;"}
+{"version":3,"file":"SearchZeroState.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.tsx"],"sourcesContent":["import React from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const SearchZeroState: React.FC<{\n\tsearchedString: string;\n\theight: number;\n\tisLoading?: boolean;\n\tcontainerWidth?: string;\n\terrorMessage?: string;\n\tonRetry?: () => void;\n\tversion?: '1.0' | '2.0' | '3.0';\n}> = ({\n\tsearchedString,\n\theight,\n\tisLoading,\n\tcontainerWidth,\n\terrorMessage,\n\tonRetry,\n\tversion,\n}) => {\n\tconst isErrorState = !!errorMessage && !isLoading;\n\n\tif (version === '3.0' && !isErrorState && !isLoading) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: height,\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\tfontWeight: 400,\n\t\t\t\t\t\tlineHeight: '16px',\n\t\t\t\t\t\tcolor: COLORS.content.placeholder,\n\t\t\t\t\t\twhiteSpace: 'nowrap',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tNo results found!\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\theight: height,\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t}}\n\t\t>\n\t\t\t<ZeroState\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttitle={isErrorState ? 'Failed to load options' : 'No results found'}\n\t\t\t\tsubTitle={\n\t\t\t\t\tisErrorState\n\t\t\t\t\t\t? errorMessage\n\t\t\t\t\t\t: `Sorry we could not find any results for \"${\n\t\t\t\t\t\t\t\tsearchedString ?? ''\n\t\t\t\t\t\t  }\"`\n\t\t\t\t}\n\t\t\t\tactionButton={\n\t\t\t\t\tisErrorState\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tbuttonText: 'Try again',\n\t\t\t\t\t\t\t\tbuttonType: 'text',\n\t\t\t\t\t\t\t\tonClick: onRetry,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tcontainerWidth={containerWidth}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n"],"names":["SearchZeroState","searchedString","height","isLoading","containerWidth","errorMessage","onRetry","version","isErrorState","jsx","COLORS","ZeroState"],"mappings":";;;AAIO,MAAMA,IAQR,CAAC;AAAA,EACL,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AACD,MAAM;AACL,QAAMC,IAAe,CAAC,CAACH,KAAgB,CAACF;AAExC,SAAII,MAAY,SAAS,CAACC,KAAgB,CAACL,IAEzC,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,QAAAP;AAAA,QACA,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,MAAA;AAAA,MAGjB,UAAA,gBAAAO;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,YAAY;AAAA,YACZ,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,OAAOC,EAAO,QAAQ;AAAA,YACtB,YAAY;AAAA,UAAA;AAAA,UAEb,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA,IAMF,gBAAAD;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,QAAAP;AAAA,QACA,SAAS;AAAA,QACT,YAAY;AAAA,MAAA;AAAA,MAGb,UAAA,gBAAAO;AAAA,QAACE;AAAA,QAAA;AAAA,UACA,WAAAR;AAAA,UACA,OAAOK,IAAe,2BAA2B;AAAA,UACjD,UACCA,IACGH,IACA,4CACAJ,KAAkB,EAClB;AAAA,UAEJ,cACCO,IACG;AAAA,YACA,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,SAASF;AAAA,UAAA,IAET;AAAA,UAEJ,gBAAAF;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAGH;"}

package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.d.ts

@@ -15,6 +15,7 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     children?: SingleOption[] | undefined;
     parent?: SingleOption | undefined;
     'data-test'?: string | undefined;
+    hasDivider?: boolean | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
@@ -31,6 +32,7 @@ export declare function iterateOnOptions(options: DropdownOption[], newVal: Part
     children?: SingleOption[] | undefined;
     parent?: SingleOption | undefined;
     'data-test'?: string | undefined;
+    hasDivider?: boolean | undefined;
     options: SingleOption[];
 })[];
 export declare function iterateOnOptionsRaw(options: DropdownOption[], cb: (option: SingleOption) => void): void;

package/dist/esm/components/dropdown/hooks/useDropdown.d.ts

@@ -24,6 +24,7 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         children?: SingleOption[] | undefined;
         parent?: SingleOption | undefined;
         'data-test'?: string | undefined;
+        hasDivider?: boolean | undefined;
     } | {
         label?: string | undefined;
         value?: string | undefined;
@@ -40,6 +41,7 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         children?: SingleOption[] | undefined;
         parent?: SingleOption | undefined;
         'data-test'?: string | undefined;
+        hasDivider?: boolean | undefined;
         options: SingleOption[];
     })[] | undefined;
     selectAllHandler: (newState: SelectAllCheckboxState) => void;

package/dist/esm/components/dropdown/type.d.ts

@@ -16,7 +16,7 @@ export interface OpenDropdownProps {
     placement?: Placement;
     strategy?: PositioningStrategy;
     onSearch?: (key: string) => Promise<DropdownOption[]>;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
     skipSorting?: boolean;
     headerRef?: any;
     hideSelectAll?: boolean;
@@ -57,6 +57,10 @@ export interface OpenDropdownProps {
     dropdownZIndex?: number;
     /** When true, renders a checkbox alongside the customComponent in multiselect mode */
     showCheckboxForCustomElement?: boolean;
+    /** Overrides the active (checked) color of the multiselect checkboxes */
+    checkboxActiveColor?: string;
+    /** Renders rows with the brand selected theme (brandLight bg + primary text), square corners and flush spacing */
+    brandSelectedRow?: boolean;
 }
 export type GroupedOption = {
     label?: string;
@@ -79,6 +83,7 @@ export type SingleOption = {
     children?: SingleOption[];
     parent?: SingleOption;
     'data-test'?: string;
+    hasDivider?: boolean;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

package/dist/esm/components/dropdown-button/DropdownButton.d.ts

@@ -1,9 +1,21 @@
 import { default as React } from 'react';
 import { DropdownProps } from '../dropdown';
 import { ButtonProps } from '../button/model';
+import { IconButtonProps } from '../icon-button/model';
+import { Placement } from '../tooltips';
 export interface DropdownButtonProps {
     dropdownProps: DropdownProps;
-    buttonProps: ButtonProps;
     iconProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    buttonProps?: ButtonProps;
+    iconButtonProps?: IconButtonProps;
+    /**
+     * Optional tooltip shown only on the main icon button (icon mode),
+     * not on the dropdown/chevron trigger.
+     */
+    iconButtonTooltip?: {
+        body?: string;
+        tooltipContent?: JSX.Element;
+        placement?: Placement;
+    };
 }
 export declare const DropdownButton: React.FC<DropdownButtonProps>;