@chayns-components/core 5.0.46 → 5.0.48

package/AGENTS.md

@@ -1698,6 +1698,32 @@ import { Filter } from '@chayns-components/core';
             selectedItem: { text: 'alphanumerisch', id: 'alphanumerisch' },
             onSortChange: () => {},
         }}
+    comboboxConfig={{
+            label: 'Kategorie wählen',
+            placeholder: 'Keine Kategorie gewählt',
+            lists: [
+                {
+                    list: [
+                        { text: 'Alle Kategorien', value: 'all', icons: ['fa fa-list'] },
+                        {
+                            text: 'Lebensmittel',
+                            value: 'food',
+                            icons: ['fa fa-burger'],
+                            subtext: 'Frisch & regional',
+                        },
+                        { text: 'Getränke', value: 'drinks', icons: ['fa fa-bottle-water'] },
+                        { text: 'Haushalt', value: 'household', icons: ['fa fa-soap'] },
+                        {
+                            text: 'Elektronik',
+                            value: 'electronics',
+                            icons: ['fa fa-bolt'],
+                            subtext: 'Smartphones, TV & mehr',
+                        },
+                        { text: 'Bekleidung', value: 'clothing', icons: ['fa fa-tshirt'] },
+                    ],
+                },
+            ],
+        }}
 />
 ```
 
@@ -1782,6 +1808,40 @@ import { Filter } from '@chayns-components/core';
 />
 ```
 
+#### Only Combobox
+
+```tsx
+<Filter
+    headline={'Combobox'}
+    comboboxConfig={{
+            label: 'Kategorie wählen',
+            placeholder: 'Keine Kategorie gewählt',
+            lists: [
+                {
+                    list: [
+                        { text: 'Alle Kategorien', value: 'all', icons: ['fa fa-list'] },
+                        {
+                            text: 'Lebensmittel',
+                            value: 'food',
+                            icons: ['fa fa-burger'],
+                            subtext: 'Frisch & regional',
+                        },
+                        { text: 'Getränke', value: 'drinks', icons: ['fa fa-bottle-water'] },
+                        { text: 'Haushalt', value: 'household', icons: ['fa fa-soap'] },
+                        {
+                            text: 'Elektronik',
+                            value: 'electronics',
+                            icons: ['fa fa-bolt'],
+                            subtext: 'Smartphones, TV & mehr',
+                        },
+                        { text: 'Bekleidung', value: 'clothing', icons: ['fa fa-tshirt'] },
+                    ],
+                },
+            ],
+        }}
+/>
+```
+
 ### Props
 
 No prop documentation available.

package/lib/cjs/components/filter/Filter.js

@@ -9,6 +9,7 @@ var _Filter = require("./Filter.styles");
 var _ExpandableContent = _interopRequireDefault(require("../expandable-content/ExpandableContent"));
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _FIlterContent = _interopRequireDefault(require("./filter-content/FIlterContent"));
+var _ComboBox = _interopRequireDefault(require("../combobox/ComboBox"));
 var _filter = require("../../types/filter");
 var _SearchInput = _interopRequireDefault(require("../search-input/SearchInput"));
 var _ContextMenu = _interopRequireDefault(require("../context-menu/ContextMenu"));
@@ -25,6 +26,7 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
   shouldShowRoundedHoverEffect = false,
   filterButtonConfig,
   checkboxConfig,
+  comboboxConfig,
   onActiveChange,
   rightIcons
 }, ref) => {
@@ -42,20 +44,23 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
   const searchRef = (0, _react.useRef)(null);
   const contextMenuRef = (0, _react.useRef)(null);
   const type = (0, _react.useMemo)(() => {
-    if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig) {
+    if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig && !comboboxConfig) {
       return _filter.FilterType.ONLY_FILTER;
     }
-    if (!filterButtonConfig && !searchConfig && sortConfig && !checkboxConfig) {
+    if (!filterButtonConfig && !searchConfig && sortConfig && !checkboxConfig && !comboboxConfig) {
       return _filter.FilterType.ONLY_SORT;
     }
-    if (!filterButtonConfig && searchConfig && !sortConfig && !checkboxConfig) {
+    if (!filterButtonConfig && searchConfig && !sortConfig && !checkboxConfig && !comboboxConfig) {
       return _filter.FilterType.ONLY_SEARCH;
     }
-    if (!filterButtonConfig && !searchConfig && !sortConfig && checkboxConfig) {
+    if (!filterButtonConfig && !searchConfig && !sortConfig && checkboxConfig && !comboboxConfig) {
       return _filter.FilterType.ONLY_CHECKBOX;
     }
+    if (!filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig && comboboxConfig) {
+      return _filter.FilterType.ONLY_COMBOBOX;
+    }
     return _filter.FilterType.MULTIPLE;
-  }, [checkboxConfig, filterButtonConfig, searchConfig, sortConfig]);
+  }, [checkboxConfig, comboboxConfig, filterButtonConfig, searchConfig, sortConfig]);
   const icons = (0, _react.useMemo)(() => {
     switch (type) {
       case _filter.FilterType.ONLY_FILTER:
@@ -174,6 +179,16 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
       })
     }));
   }, [sortConfig]);
+  const comboboxElement = (0, _react.useMemo)(() => {
+    if (!comboboxConfig) {
+      return null;
+    }
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      _react.default.createElement(_ComboBox.default, comboboxConfig)
+    );
+  }, [comboboxConfig]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Filter.StyledFilter, {
     ref: filterRef
   }, /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterHead, null, ! /*#__PURE__*/(0, _react.isValidElement)(headline) ? /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterHeadline, {
@@ -205,7 +220,7 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
   }, iconElement), type === _filter.FilterType.ONLY_CHECKBOX && checkboxConfig &&
   /*#__PURE__*/
   // eslint-disable-next-line react/jsx-props-no-spreading
-  _react.default.createElement(_Checkbox.default, checkboxConfig)), [_filter.FilterType.MULTIPLE, _filter.FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterContentWrapper, {
+  _react.default.createElement(_Checkbox.default, checkboxConfig), type === _filter.FilterType.ONLY_COMBOBOX && comboboxElement), [_filter.FilterType.MULTIPLE, _filter.FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterContentWrapper, {
     ref: contentRef
   }, /*#__PURE__*/_react.default.createElement(_ExpandableContent.default, {
     isOpen: isOpen,
@@ -215,8 +230,9 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
     searchConfig: searchConfig,
     filterButtonConfig: filterButtonConfig,
     sortConfig: sortConfig,
-    checkboxConfig: checkboxConfig
-  })))), [headline, isSearchActive, type, rightIcons, iconElement, backgroundDistance, backgroundElement, searchConfig, sortConfig, sortItems, checkboxConfig, isOpen, shouldFocus, filterButtonConfig, shouldShowRoundedHoverEffect]);
+    checkboxConfig: checkboxConfig,
+    comboboxConfig: comboboxConfig
+  })))), [headline, isSearchActive, type, rightIcons, iconElement, backgroundDistance, backgroundElement, searchConfig, sortConfig, sortItems, checkboxConfig, isOpen, shouldFocus, filterButtonConfig, comboboxConfig, comboboxElement, shouldShowRoundedHoverEffect]);
 });
 Filter.displayName = 'Filter';
 var _default = exports.default = Filter;

package/lib/cjs/components/filter/Filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","names":["_react","_interopRequireWildcard","require","_Filter","_ExpandableContent","_interopRequireDefault","_Icon","_FIlterContent","_filter","_SearchInput","_ContextMenu","_Checkbox","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Filter","forwardRef","headline","searchConfig","sortConfig","shouldAutoFocus","shouldShowRoundedHoverEffect","filterButtonConfig","checkboxConfig","onActiveChange","rightIcons","ref","isOpen","setIsOpen","useState","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","backgroundDistance","setBackgroundDistance","backgroundCoordinates","setBackgroundCoordinates","top","left","contentRef","useRef","iconRef","filterRef","searchRef","contextMenuRef","type","useMemo","FilterType","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","MULTIPLE","icons","useEffect","handleHide","useCallback","current","hide","_searchRef$current","focus","window","setTimeout","handleShow","useImperativeHandle","show","handleIconClick","iconRect","getBoundingClientRect","filterRect","contentRect","relativeTop","bottom","relativeLeft","iconElement","createElement","StyledFilterIcon","onClick","$isOpen","$shouldShowRoundedHoverEffect","size","backgroundElement","StyledMotionFilterBackground","$top","$left","animate","height","transition","duration","delay","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","StyledFilter","StyledFilterHead","isValidElement","StyledFilterHeadline","$isSearchActive","StyledFilterHeadlineElement","includes","Fragment","StyledFilterIconWrapper","rIcons","StyledFilterSearch","isActive","value","searchValue","onChange","ev","onSearchChange","target","StyledFilterContentWrapper","startDelay","displayName","_default","exports"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    isValidElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledFilter,\n    StyledFilterContentWrapper,\n    StyledFilterHead,\n    StyledFilterHeadline,\n    StyledFilterHeadlineElement,\n    StyledFilterIcon,\n    StyledFilterIconWrapper,\n    StyledFilterSearch,\n    StyledMotionFilterBackground,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FIlterContent';\nimport {\n    CheckboxConfig,\n    FilterButtonConfig,\n    FilterRef,\n    FilterType,\n    SearchConfig,\n    SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Checkbox from '../checkbox/Checkbox';\nimport { InputRef } from '../input/Input';\nimport type { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport interface FilterRightIcon {\n    icons: string[];\n    onClick: VoidFunction;\n}\n\n//\nexport type FilterProps = {\n    headline: ReactNode;\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n    checkboxConfig?: CheckboxConfig;\n    onActiveChange?: (isActive: boolean) => void;\n    shouldShowRoundedHoverEffect?: boolean;\n    rightIcons?: FilterRightIcon[];\n    shouldAutoFocus?: boolean;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n    (\n        {\n            headline,\n            searchConfig,\n            sortConfig,\n            shouldAutoFocus = false,\n            shouldShowRoundedHoverEffect = false,\n            filterButtonConfig,\n            checkboxConfig,\n            onActiveChange,\n            rightIcons,\n        },\n        ref,\n    ) => {\n        const [isOpen, setIsOpen] = useState(false);\n        const [isSearchActive, setIsSearchActive] = useState(false);\n        const [shouldFocus, setShouldFocus] = useState(false);\n        const [backgroundDistance, setBackgroundDistance] = useState(0);\n        const [backgroundCoordinates, setBackgroundCoordinates] = useState({ top: 0, left: 0 });\n\n        const contentRef = useRef<HTMLDivElement | null>(null);\n        const iconRef = useRef<HTMLDivElement | null>(null);\n        const filterRef = useRef<HTMLDivElement | null>(null);\n        const searchRef = useRef<InputRef | null>(null);\n\n        const contextMenuRef = useRef<ContextMenuRef>(null);\n\n        const type = useMemo(() => {\n            if (filterButtonConfig && !searchConfig && !sortConfig && !checkboxConfig) {\n                return FilterType.ONLY_FILTER;\n            }\n\n            if (!filterButtonConfig && !searchConfig && sortConfig && !checkboxConfig) {\n                return FilterType.ONLY_SORT;\n            }\n\n            if (!filterButtonConfig && searchConfig && !sortConfig && !checkboxConfig) {\n                return FilterType.ONLY_SEARCH;\n            }\n\n            if (!filterButtonConfig && !searchConfig && !sortConfig && checkboxConfig) {\n                return FilterType.ONLY_CHECKBOX;\n            }\n\n            return FilterType.MULTIPLE;\n        }, [checkboxConfig, filterButtonConfig, searchConfig, sortConfig]);\n\n        const icons = useMemo(() => {\n            switch (type) {\n                case FilterType.ONLY_FILTER:\n                    return ['fa fa-filter'];\n                case FilterType.ONLY_SORT:\n                    return ['fa fa-arrow-up-arrow-down'];\n                default:\n                    return ['fa fa-search'];\n            }\n        }, [type]);\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isOpen);\n            }\n        }, [isOpen, onActiveChange]);\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n\n            if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n                contextMenuRef.current.hide();\n            }\n\n            if (type === FilterType.ONLY_SEARCH) {\n                setIsSearchActive(false);\n            }\n        }, [type]);\n\n        useEffect(() => {\n            if (shouldFocus) {\n                searchRef.current?.focus();\n\n                window.setTimeout(() => {\n                    setShouldFocus(false);\n                }, 200);\n            }\n        }, [shouldFocus]);\n\n        const handleShow = useCallback(() => {\n            setIsOpen(true);\n\n            if (shouldAutoFocus) {\n                setShouldFocus(true);\n            }\n\n            if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n                contextMenuRef.current.hide();\n            }\n\n            if (type === FilterType.ONLY_SEARCH) {\n                setIsSearchActive(true);\n            }\n        }, [shouldAutoFocus, type]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        const handleIconClick = useCallback(() => {\n            if (isOpen) {\n                handleHide();\n            } else {\n                handleShow();\n            }\n        }, [handleHide, handleShow, isOpen]);\n\n        useEffect(() => {\n            if (headline && iconRef.current && contentRef.current && filterRef.current) {\n                const iconRect = iconRef.current.getBoundingClientRect();\n                const filterRect = filterRef.current.getBoundingClientRect();\n                const contentRect = contentRef.current.getBoundingClientRect();\n\n                const relativeTop = iconRect.bottom - filterRect.top;\n                const relativeLeft = iconRect.left - filterRect.left;\n\n                setBackgroundDistance(contentRect.top - iconRect.bottom);\n                setBackgroundCoordinates({\n                    top: relativeTop,\n                    left: relativeLeft,\n                });\n            } else {\n                setBackgroundDistance(0);\n                setBackgroundCoordinates({ top: 0, left: 0 });\n            }\n        }, [headline]);\n\n        const iconElement = useMemo(\n            () => (\n                <StyledFilterIcon\n                    onClick={handleIconClick}\n                    $isOpen={isOpen}\n                    ref={iconRef}\n                    $shouldShowRoundedHoverEffect={shouldShowRoundedHoverEffect}\n                >\n                    <Icon icons={icons} size={18} />\n                </StyledFilterIcon>\n            ),\n            [handleIconClick, icons, isOpen, shouldShowRoundedHoverEffect],\n        );\n\n        const backgroundElement = useMemo(\n            () => (\n                <StyledMotionFilterBackground\n                    $top={backgroundCoordinates.top}\n                    $left={backgroundCoordinates.left}\n                    animate={{ height: isOpen ? `${backgroundDistance}px` : 0 }}\n                    transition={{ duration: 0.1, delay: isOpen ? 0 : 0.2 }}\n                />\n            ),\n            [backgroundDistance, isOpen, backgroundCoordinates],\n        );\n\n        const sortItems: ContextMenuItem[] = useMemo(() => {\n            if (!sortConfig) {\n                return [];\n            }\n\n            const { selectedItem, onSortChange } = sortConfig;\n\n            return sortConfig.items.map(({ id, text }) => ({\n                text,\n                key: id.toString(),\n                isSelected: id === selectedItem.id,\n                icons: id === selectedItem.id ? ['fas fa-circle-small'] : [],\n                onClick: () => onSortChange({ text, id }),\n            }));\n        }, [sortConfig]);\n\n        return useMemo(\n            () => (\n                <StyledFilter ref={filterRef}>\n                    <StyledFilterHead>\n                        {!isValidElement(headline) ? (\n                            <StyledFilterHeadline $isSearchActive={isSearchActive}>\n                                {headline}\n                            </StyledFilterHeadline>\n                        ) : (\n                            <StyledFilterHeadlineElement $isSearchActive={isSearchActive}>\n                                {headline}\n                            </StyledFilterHeadlineElement>\n                        )}\n                        {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                            <>\n                                <StyledFilterIconWrapper>\n                                    {rightIcons &&\n                                        rightIcons.map(({ icons: rIcons, onClick }) => (\n                                            <StyledFilterIcon\n                                                onClick={onClick}\n                                                $isOpen={false}\n                                                $shouldShowRoundedHoverEffect={\n                                                    shouldShowRoundedHoverEffect\n                                                }\n                                            >\n                                                <Icon icons={rIcons} size={18} />\n                                            </StyledFilterIcon>\n                                        ))}\n                                    {iconElement}\n                                </StyledFilterIconWrapper>\n                                {backgroundDistance > 0 && backgroundElement}\n                            </>\n                        )}\n                        {type === FilterType.ONLY_SEARCH && searchConfig && (\n                            <StyledFilterSearch>\n                                <SearchInput\n                                    onActiveChange={(isActive) => {\n                                        setIsSearchActive(isActive);\n                                        setIsOpen(isActive);\n                                    }}\n                                    ref={searchRef}\n                                    isActive={isSearchActive}\n                                    value={searchConfig.searchValue}\n                                    onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                                />\n                            </StyledFilterSearch>\n                        )}\n                        {type === FilterType.ONLY_SORT && sortConfig && (\n                            <ContextMenu ref={contextMenuRef} items={sortItems}>\n                                {iconElement}\n                            </ContextMenu>\n                        )}\n                        {type === FilterType.ONLY_CHECKBOX && checkboxConfig && (\n                            // eslint-disable-next-line react/jsx-props-no-spreading\n                            <Checkbox {...checkboxConfig} />\n                        )}\n                    </StyledFilterHead>\n                    {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                        <StyledFilterContentWrapper ref={contentRef}>\n                            <ExpandableContent\n                                isOpen={isOpen}\n                                startDelay={backgroundDistance > 0 ? 0.1 : 0}\n                            >\n                                <FilterContent\n                                    shouldAutoFocus={shouldFocus}\n                                    searchConfig={searchConfig}\n                                    filterButtonConfig={filterButtonConfig}\n                                    sortConfig={sortConfig}\n                                    checkboxConfig={checkboxConfig}\n                                />\n                            </ExpandableContent>\n                        </StyledFilterContentWrapper>\n                    )}\n                </StyledFilter>\n            ),\n            [\n                headline,\n                isSearchActive,\n                type,\n                rightIcons,\n                iconElement,\n                backgroundDistance,\n                backgroundElement,\n                searchConfig,\n                sortConfig,\n                sortItems,\n                checkboxConfig,\n                isOpen,\n                shouldFocus,\n                filterButtonConfig,\n                shouldShowRoundedHoverEffect,\n            ],\n        );\n    },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAWA,IAAAC,OAAA,GAAAD,OAAA;AAWA,IAAAE,kBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,KAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,cAAA,GAAAF,sBAAA,CAAAH,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AAQA,IAAAO,YAAA,GAAAJ,sBAAA,CAAAH,OAAA;AACA,IAAAQ,YAAA,GAAAL,sBAAA,CAAAH,OAAA;AACA,IAAAS,SAAA,GAAAN,sBAAA,CAAAH,OAAA;AAA4C,SAAAG,uBAAAO,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAf,uBAAA,YAAAA,CAAAW,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAS5C;;AAaA,MAAMgB,MAAM,gBAAG,IAAAC,iBAAU,EACrB,CACI;EACIC,QAAQ;EACRC,YAAY;EACZC,UAAU;EACVC,eAAe,GAAG,KAAK;EACvBC,4BAA4B,GAAG,KAAK;EACpCC,kBAAkB;EAClBC,cAAc;EACdC,cAAc;EACdC;AACJ,CAAC,EACDC,GAAG,KACF;EACD,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAC3C,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAC3D,MAAM,CAACG,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAJ,eAAQ,EAAC,KAAK,CAAC;EACrD,MAAM,CAACK,kBAAkB,EAAEC,qBAAqB,CAAC,GAAG,IAAAN,eAAQ,EAAC,CAAC,CAAC;EAC/D,MAAM,CAACO,qBAAqB,EAAEC,wBAAwB,CAAC,GAAG,IAAAR,eAAQ,EAAC;IAAES,GAAG,EAAE,CAAC;IAAEC,IAAI,EAAE;EAAE,CAAC,CAAC;EAEvF,MAAMC,UAAU,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EACtD,MAAMC,OAAO,GAAG,IAAAD,aAAM,EAAwB,IAAI,CAAC;EACnD,MAAME,SAAS,GAAG,IAAAF,aAAM,EAAwB,IAAI,CAAC;EACrD,MAAMG,SAAS,GAAG,IAAAH,aAAM,EAAkB,IAAI,CAAC;EAE/C,MAAMI,cAAc,GAAG,IAAAJ,aAAM,EAAiB,IAAI,CAAC;EAEnD,MAAMK,IAAI,GAAG,IAAAC,cAAO,EAAC,MAAM;IACvB,IAAIzB,kBAAkB,IAAI,CAACJ,YAAY,IAAI,CAACC,UAAU,IAAI,CAACI,cAAc,EAAE;MACvE,OAAOyB,kBAAU,CAACC,WAAW;IACjC;IAEA,IAAI,CAAC3B,kBAAkB,IAAI,CAACJ,YAAY,IAAIC,UAAU,IAAI,CAACI,cAAc,EAAE;MACvE,OAAOyB,kBAAU,CAACE,SAAS;IAC/B;IAEA,IAAI,CAAC5B,kBAAkB,IAAIJ,YAAY,IAAI,CAACC,UAAU,IAAI,CAACI,cAAc,EAAE;MACvE,OAAOyB,kBAAU,CAACG,WAAW;IACjC;IAEA,IAAI,CAAC7B,kBAAkB,IAAI,CAACJ,YAAY,IAAI,CAACC,UAAU,IAAII,cAAc,EAAE;MACvE,OAAOyB,kBAAU,CAACI,aAAa;IACnC;IAEA,OAAOJ,kBAAU,CAACK,QAAQ;EAC9B,CAAC,EAAE,CAAC9B,cAAc,EAAED,kBAAkB,EAAEJ,YAAY,EAAEC,UAAU,CAAC,CAAC;EAElE,MAAMmC,KAAK,GAAG,IAAAP,cAAO,EAAC,MAAM;IACxB,QAAQD,IAAI;MACR,KAAKE,kBAAU,CAACC,WAAW;QACvB,OAAO,CAAC,cAAc,CAAC;MAC3B,KAAKD,kBAAU,CAACE,SAAS;QACrB,OAAO,CAAC,2BAA2B,CAAC;MACxC;QACI,OAAO,CAAC,cAAc,CAAC;IAC/B;EACJ,CAAC,EAAE,CAACJ,IAAI,CAAC,CAAC;EAEV,IAAAS,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAO/B,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACG,MAAM,CAAC;IAC1B;EACJ,CAAC,EAAE,CAACA,MAAM,EAAEH,cAAc,CAAC,CAAC;EAE5B,MAAMgC,UAAU,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACjC7B,SAAS,CAAC,KAAK,CAAC;IAEhB,IAAIkB,IAAI,KAAKE,kBAAU,CAACE,SAAS,IAAIL,cAAc,CAACa,OAAO,EAAE;MACzDb,cAAc,CAACa,OAAO,CAACC,IAAI,CAAC,CAAC;IACjC;IAEA,IAAIb,IAAI,KAAKE,kBAAU,CAACG,WAAW,EAAE;MACjCpB,iBAAiB,CAAC,KAAK,CAAC;IAC5B;EACJ,CAAC,EAAE,CAACe,IAAI,CAAC,CAAC;EAEV,IAAAS,gBAAS,EAAC,MAAM;IACZ,IAAIvB,WAAW,EAAE;MAAA,IAAA4B,kBAAA;MACb,CAAAA,kBAAA,GAAAhB,SAAS,CAACc,OAAO,cAAAE,kBAAA,eAAjBA,kBAAA,CAAmBC,KAAK,CAAC,CAAC;MAE1BC,MAAM,CAACC,UAAU,CAAC,MAAM;QACpB9B,cAAc,CAAC,KAAK,CAAC;MACzB,CAAC,EAAE,GAAG,CAAC;IACX;EACJ,CAAC,EAAE,CAACD,WAAW,CAAC,CAAC;EAEjB,MAAMgC,UAAU,GAAG,IAAAP,kBAAW,EAAC,MAAM;IACjC7B,SAAS,CAAC,IAAI,CAAC;IAEf,IAAIR,eAAe,EAAE;MACjBa,cAAc,CAAC,IAAI,CAAC;IACxB;IAEA,IAAIa,IAAI,KAAKE,kBAAU,CAACE,SAAS,IAAIL,cAAc,CAACa,OAAO,EAAE;MACzDb,cAAc,CAACa,OAAO,CAACC,IAAI,CAAC,CAAC;IACjC;IAEA,IAAIb,IAAI,KAAKE,kBAAU,CAACG,WAAW,EAAE;MACjCpB,iBAAiB,CAAC,IAAI,CAAC;IAC3B;EACJ,CAAC,EAAE,CAACX,eAAe,EAAE0B,IAAI,CAAC,CAAC;EAE3B,IAAAmB,0BAAmB,EACfvC,GAAG,EACH,OAAO;IACHiC,IAAI,EAAEH,UAAU;IAChBU,IAAI,EAAEF;EACV,CAAC,CAAC,EACF,CAACR,UAAU,EAAEQ,UAAU,CAC3B,CAAC;EAED,MAAMG,eAAe,GAAG,IAAAV,kBAAW,EAAC,MAAM;IACtC,IAAI9B,MAAM,EAAE;MACR6B,UAAU,CAAC,CAAC;IAChB,CAAC,MAAM;MACHQ,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACR,UAAU,EAAEQ,UAAU,EAAErC,MAAM,CAAC,CAAC;EAEpC,IAAA4B,gBAAS,EAAC,MAAM;IACZ,IAAItC,QAAQ,IAAIyB,OAAO,CAACgB,OAAO,IAAIlB,UAAU,CAACkB,OAAO,IAAIf,SAAS,CAACe,OAAO,EAAE;MACxE,MAAMU,QAAQ,GAAG1B,OAAO,CAACgB,OAAO,CAACW,qBAAqB,CAAC,CAAC;MACxD,MAAMC,UAAU,GAAG3B,SAAS,CAACe,OAAO,CAACW,qBAAqB,CAAC,CAAC;MAC5D,MAAME,WAAW,GAAG/B,UAAU,CAACkB,OAAO,CAACW,qBAAqB,CAAC,CAAC;MAE9D,MAAMG,WAAW,GAAGJ,QAAQ,CAACK,MAAM,GAAGH,UAAU,CAAChC,GAAG;MACpD,MAAMoC,YAAY,GAAGN,QAAQ,CAAC7B,IAAI,GAAG+B,UAAU,CAAC/B,IAAI;MAEpDJ,qBAAqB,CAACoC,WAAW,CAACjC,GAAG,GAAG8B,QAAQ,CAACK,MAAM,CAAC;MACxDpC,wBAAwB,CAAC;QACrBC,GAAG,EAAEkC,WAAW;QAChBjC,IAAI,EAAEmC;MACV,CAAC,CAAC;IACN,CAAC,MAAM;MACHvC,qBAAqB,CAAC,CAAC,CAAC;MACxBE,wBAAwB,CAAC;QAAEC,GAAG,EAAE,CAAC;QAAEC,IAAI,EAAE;MAAE,CAAC,CAAC;IACjD;EACJ,CAAC,EAAE,CAACtB,QAAQ,CAAC,CAAC;EAEd,MAAM0D,WAAW,GAAG,IAAA5B,cAAO,EACvB,mBACI/D,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACzF,OAAA,CAAA0F,gBAAgB;IACbC,OAAO,EAAEX,eAAgB;IACzBY,OAAO,EAAEpD,MAAO;IAChBD,GAAG,EAAEgB,OAAQ;IACbsC,6BAA6B,EAAE3D;EAA6B,gBAE5DrC,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACtF,KAAA,CAAAQ,OAAI;IAACwD,KAAK,EAAEA,KAAM;IAAC2B,IAAI,EAAE;EAAG,CAAE,CACjB,CACrB,EACD,CAACd,eAAe,EAAEb,KAAK,EAAE3B,MAAM,EAAEN,4BAA4B,CACjE,CAAC;EAED,MAAM6D,iBAAiB,GAAG,IAAAnC,cAAO,EAC7B,mBACI/D,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACzF,OAAA,CAAAgG,4BAA4B;IACzBC,IAAI,EAAEhD,qBAAqB,CAACE,GAAI;IAChC+C,KAAK,EAAEjD,qBAAqB,CAACG,IAAK;IAClC+C,OAAO,EAAE;MAAEC,MAAM,EAAE5D,MAAM,GAAG,GAAGO,kBAAkB,IAAI,GAAG;IAAE,CAAE;IAC5DsD,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,KAAK,EAAE/D,MAAM,GAAG,CAAC,GAAG;IAAI;EAAE,CAC1D,CACJ,EACD,CAACO,kBAAkB,EAAEP,MAAM,EAAES,qBAAqB,CACtD,CAAC;EAED,MAAMuD,SAA4B,GAAG,IAAA5C,cAAO,EAAC,MAAM;IAC/C,IAAI,CAAC5B,UAAU,EAAE;MACb,OAAO,EAAE;IACb;IAEA,MAAM;MAAEyE,YAAY;MAAEC;IAAa,CAAC,GAAG1E,UAAU;IAEjD,OAAOA,UAAU,CAAC2E,KAAK,CAACC,GAAG,CAAC,CAAC;MAAEC,EAAE;MAAEC;IAAK,CAAC,MAAM;MAC3CA,IAAI;MACJC,GAAG,EAAEF,EAAE,CAACG,QAAQ,CAAC,CAAC;MAClBC,UAAU,EAAEJ,EAAE,KAAKJ,YAAY,CAACI,EAAE;MAClC1C,KAAK,EAAE0C,EAAE,KAAKJ,YAAY,CAACI,EAAE,GAAG,CAAC,qBAAqB,CAAC,GAAG,EAAE;MAC5DlB,OAAO,EAAEA,CAAA,KAAMe,YAAY,CAAC;QAAEI,IAAI;QAAED;MAAG,CAAC;IAC5C,CAAC,CAAC,CAAC;EACP,CAAC,EAAE,CAAC7E,UAAU,CAAC,CAAC;EAEhB,OAAO,IAAA4B,cAAO,EACV,mBACI/D,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACzF,OAAA,CAAAkH,YAAY;IAAC3E,GAAG,EAAEiB;EAAU,gBACzB3D,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACzF,OAAA,CAAAmH,gBAAgB,QACZ,eAAC,IAAAC,qBAAc,EAACtF,QAAQ,CAAC,gBACtBjC,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACzF,OAAA,CAAAqH,oBAAoB;IAACC,eAAe,EAAE3E;EAAe,GACjDb,QACiB,CAAC,gBAEvBjC,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACzF,OAAA,CAAAuH,2BAA2B;IAACD,eAAe,EAAE3E;EAAe,GACxDb,QACwB,CAChC,EACA,CAAC+B,kBAAU,CAACK,QAAQ,EAAEL,kBAAU,CAACC,WAAW,CAAC,CAAC0D,QAAQ,CAAC7D,IAAI,CAAC,iBACzD9D,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAAA5F,MAAA,CAAAc,OAAA,CAAA8G,QAAA,qBACI5H,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACzF,OAAA,CAAA0H,uBAAuB,QACnBpF,UAAU,IACPA,UAAU,CAACsE,GAAG,CAAC,CAAC;IAAEzC,KAAK,EAAEwD,MAAM;IAAEhC;EAAQ,CAAC,kBACtC9F,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACzF,OAAA,CAAA0F,gBAAgB;IACbC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAE,KAAM;IACfC,6BAA6B,EACzB3D;EACH,gBAEDrC,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACtF,KAAA,CAAAQ,OAAI;IAACwD,KAAK,EAAEwD,MAAO;IAAC7B,IAAI,EAAE;EAAG,CAAE,CAClB,CACrB,CAAC,EACLN,WACoB,CAAC,EACzBzC,kBAAkB,GAAG,CAAC,IAAIgD,iBAC7B,CACL,EACApC,IAAI,KAAKE,kBAAU,CAACG,WAAW,IAAIjC,YAAY,iBAC5ClC,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACzF,OAAA,CAAA4H,kBAAkB,qBACf/H,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACnF,YAAA,CAAAK,OAAW;IACR0B,cAAc,EAAGwF,QAAQ,IAAK;MAC1BjF,iBAAiB,CAACiF,QAAQ,CAAC;MAC3BpF,SAAS,CAACoF,QAAQ,CAAC;IACvB,CAAE;IACFtF,GAAG,EAAEkB,SAAU;IACfoE,QAAQ,EAAElF,cAAe;IACzBmF,KAAK,EAAE/F,YAAY,CAACgG,WAAY;IAChCC,QAAQ,EAAGC,EAAE,IAAKlG,YAAY,CAACmG,cAAc,CAACD,EAAE,CAACE,MAAM,CAACL,KAAK;EAAE,CAClE,CACe,CACvB,EACAnE,IAAI,KAAKE,kBAAU,CAACE,SAAS,IAAI/B,UAAU,iBACxCnC,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAAClF,YAAA,CAAAI,OAAW;IAAC4B,GAAG,EAAEmB,cAAe;IAACiD,KAAK,EAAEH;EAAU,GAC9ChB,WACQ,CAChB,EACA7B,IAAI,KAAKE,kBAAU,CAACI,aAAa,IAAI7B,cAAc;EAAA;EAChD;EACAvC,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACjF,SAAA,CAAAG,OAAQ,EAAKyB,cAAiB,CAErB,CAAC,EAClB,CAACyB,kBAAU,CAACK,QAAQ,EAAEL,kBAAU,CAACC,WAAW,CAAC,CAAC0D,QAAQ,CAAC7D,IAAI,CAAC,iBACzD9D,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACzF,OAAA,CAAAoI,0BAA0B;IAAC7F,GAAG,EAAEc;EAAW,gBACxCxD,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACxF,kBAAA,CAAAU,OAAiB;IACd6B,MAAM,EAAEA,MAAO;IACf6F,UAAU,EAAEtF,kBAAkB,GAAG,CAAC,GAAG,GAAG,GAAG;EAAE,gBAE7ClD,MAAA,CAAAc,OAAA,CAAA8E,aAAA,CAACrF,cAAA,CAAAO,OAAa;IACVsB,eAAe,EAAEY,WAAY;IAC7Bd,YAAY,EAAEA,YAAa;IAC3BI,kBAAkB,EAAEA,kBAAmB;IACvCH,UAAU,EAAEA,UAAW;IACvBI,cAAc,EAAEA;EAAe,CAClC,CACc,CACK,CAEtB,CACjB,EACD,CACIN,QAAQ,EACRa,cAAc,EACdgB,IAAI,EACJrB,UAAU,EACVkD,WAAW,EACXzC,kBAAkB,EAClBgD,iBAAiB,EACjBhE,YAAY,EACZC,UAAU,EACVwE,SAAS,EACTpE,cAAc,EACdI,MAAM,EACNK,WAAW,EACXV,kBAAkB,EAClBD,4BAA4B,CAEpC,CAAC;AACL,CACJ,CAAC;AAEDN,MAAM,CAAC0G,WAAW,GAAG,QAAQ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA7H,OAAA,GAEfiB,MAAM","ignoreList":[]}
+{"version":3,"file":"Filter.js","names":["_react","_interopRequireWildcard","require","_Filter","_ExpandableContent","_interopRequireDefault","_Icon","_FIlterContent","_ComboBox","_filter","_SearchInput","_ContextMenu","_Checkbox","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Filter","forwardRef","headline","searchConfig","sortConfig","shouldAutoFocus","shouldShowRoundedHoverEffect","filterButtonConfig","checkboxConfig","comboboxConfig","onActiveChange","rightIcons","ref","isOpen","setIsOpen","useState","isSearchActive","setIsSearchActive","shouldFocus","setShouldFocus","backgroundDistance","setBackgroundDistance","backgroundCoordinates","setBackgroundCoordinates","top","left","contentRef","useRef","iconRef","filterRef","searchRef","contextMenuRef","type","useMemo","FilterType","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","ONLY_CHECKBOX","ONLY_COMBOBOX","MULTIPLE","icons","useEffect","handleHide","useCallback","current","hide","_searchRef$current","focus","window","setTimeout","handleShow","useImperativeHandle","show","handleIconClick","iconRect","getBoundingClientRect","filterRect","contentRect","relativeTop","bottom","relativeLeft","iconElement","createElement","StyledFilterIcon","onClick","$isOpen","$shouldShowRoundedHoverEffect","size","backgroundElement","StyledMotionFilterBackground","$top","$left","animate","height","transition","duration","delay","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","comboboxElement","StyledFilter","StyledFilterHead","isValidElement","StyledFilterHeadline","$isSearchActive","StyledFilterHeadlineElement","includes","Fragment","StyledFilterIconWrapper","rIcons","StyledFilterSearch","isActive","value","searchValue","onChange","ev","onSearchChange","target","StyledFilterContentWrapper","startDelay","displayName","_default","exports"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    isValidElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledFilter,\n    StyledFilterContentWrapper,\n    StyledFilterHead,\n    StyledFilterHeadline,\n    StyledFilterHeadlineElement,\n    StyledFilterIcon,\n    StyledFilterIconWrapper,\n    StyledFilterSearch,\n    StyledMotionFilterBackground,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FIlterContent';\nimport ComboBox from '../combobox/ComboBox';\nimport {\n    CheckboxConfig,\n    ComboboxConfig,\n    FilterButtonConfig,\n    FilterRef,\n    FilterType,\n    SearchConfig,\n    SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu from '../context-menu/ContextMenu';\nimport Checkbox from '../checkbox/Checkbox';\nimport { InputRef } from '../input/Input';\nimport type { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu.types';\n\nexport interface FilterRightIcon {\n    icons: string[];\n    onClick: VoidFunction;\n}\n\n//\nexport type FilterProps = {\n    headline: ReactNode;\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n    checkboxConfig?: CheckboxConfig;\n    comboboxConfig?: ComboboxConfig;\n    onActiveChange?: (isActive: boolean) => void;\n    shouldShowRoundedHoverEffect?: boolean;\n    rightIcons?: FilterRightIcon[];\n    shouldAutoFocus?: boolean;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n    (\n        {\n            headline,\n            searchConfig,\n            sortConfig,\n            shouldAutoFocus = false,\n            shouldShowRoundedHoverEffect = false,\n            filterButtonConfig,\n            checkboxConfig,\n            comboboxConfig,\n            onActiveChange,\n            rightIcons,\n        },\n        ref,\n    ) => {\n        const [isOpen, setIsOpen] = useState(false);\n        const [isSearchActive, setIsSearchActive] = useState(false);\n        const [shouldFocus, setShouldFocus] = useState(false);\n        const [backgroundDistance, setBackgroundDistance] = useState(0);\n        const [backgroundCoordinates, setBackgroundCoordinates] = useState({ top: 0, left: 0 });\n\n        const contentRef = useRef<HTMLDivElement | null>(null);\n        const iconRef = useRef<HTMLDivElement | null>(null);\n        const filterRef = useRef<HTMLDivElement | null>(null);\n        const searchRef = useRef<InputRef | null>(null);\n\n        const contextMenuRef = useRef<ContextMenuRef>(null);\n\n        const type = useMemo(() => {\n            if (\n                filterButtonConfig &&\n                !searchConfig &&\n                !sortConfig &&\n                !checkboxConfig &&\n                !comboboxConfig\n            ) {\n                return FilterType.ONLY_FILTER;\n            }\n\n            if (\n                !filterButtonConfig &&\n                !searchConfig &&\n                sortConfig &&\n                !checkboxConfig &&\n                !comboboxConfig\n            ) {\n                return FilterType.ONLY_SORT;\n            }\n\n            if (\n                !filterButtonConfig &&\n                searchConfig &&\n                !sortConfig &&\n                !checkboxConfig &&\n                !comboboxConfig\n            ) {\n                return FilterType.ONLY_SEARCH;\n            }\n\n            if (\n                !filterButtonConfig &&\n                !searchConfig &&\n                !sortConfig &&\n                checkboxConfig &&\n                !comboboxConfig\n            ) {\n                return FilterType.ONLY_CHECKBOX;\n            }\n\n            if (\n                !filterButtonConfig &&\n                !searchConfig &&\n                !sortConfig &&\n                !checkboxConfig &&\n                comboboxConfig\n            ) {\n                return FilterType.ONLY_COMBOBOX;\n            }\n\n            return FilterType.MULTIPLE;\n        }, [checkboxConfig, comboboxConfig, filterButtonConfig, searchConfig, sortConfig]);\n\n        const icons = useMemo(() => {\n            switch (type) {\n                case FilterType.ONLY_FILTER:\n                    return ['fa fa-filter'];\n                case FilterType.ONLY_SORT:\n                    return ['fa fa-arrow-up-arrow-down'];\n                default:\n                    return ['fa fa-search'];\n            }\n        }, [type]);\n\n        useEffect(() => {\n            if (typeof onActiveChange === 'function') {\n                onActiveChange(isOpen);\n            }\n        }, [isOpen, onActiveChange]);\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n\n            if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n                contextMenuRef.current.hide();\n            }\n\n            if (type === FilterType.ONLY_SEARCH) {\n                setIsSearchActive(false);\n            }\n        }, [type]);\n\n        useEffect(() => {\n            if (shouldFocus) {\n                searchRef.current?.focus();\n\n                window.setTimeout(() => {\n                    setShouldFocus(false);\n                }, 200);\n            }\n        }, [shouldFocus]);\n\n        const handleShow = useCallback(() => {\n            setIsOpen(true);\n\n            if (shouldAutoFocus) {\n                setShouldFocus(true);\n            }\n\n            if (type === FilterType.ONLY_SORT && contextMenuRef.current) {\n                contextMenuRef.current.hide();\n            }\n\n            if (type === FilterType.ONLY_SEARCH) {\n                setIsSearchActive(true);\n            }\n        }, [shouldAutoFocus, type]);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        const handleIconClick = useCallback(() => {\n            if (isOpen) {\n                handleHide();\n            } else {\n                handleShow();\n            }\n        }, [handleHide, handleShow, isOpen]);\n\n        useEffect(() => {\n            if (headline && iconRef.current && contentRef.current && filterRef.current) {\n                const iconRect = iconRef.current.getBoundingClientRect();\n                const filterRect = filterRef.current.getBoundingClientRect();\n                const contentRect = contentRef.current.getBoundingClientRect();\n\n                const relativeTop = iconRect.bottom - filterRect.top;\n                const relativeLeft = iconRect.left - filterRect.left;\n\n                setBackgroundDistance(contentRect.top - iconRect.bottom);\n                setBackgroundCoordinates({\n                    top: relativeTop,\n                    left: relativeLeft,\n                });\n            } else {\n                setBackgroundDistance(0);\n                setBackgroundCoordinates({ top: 0, left: 0 });\n            }\n        }, [headline]);\n\n        const iconElement = useMemo(\n            () => (\n                <StyledFilterIcon\n                    onClick={handleIconClick}\n                    $isOpen={isOpen}\n                    ref={iconRef}\n                    $shouldShowRoundedHoverEffect={shouldShowRoundedHoverEffect}\n                >\n                    <Icon icons={icons} size={18} />\n                </StyledFilterIcon>\n            ),\n            [handleIconClick, icons, isOpen, shouldShowRoundedHoverEffect],\n        );\n\n        const backgroundElement = useMemo(\n            () => (\n                <StyledMotionFilterBackground\n                    $top={backgroundCoordinates.top}\n                    $left={backgroundCoordinates.left}\n                    animate={{ height: isOpen ? `${backgroundDistance}px` : 0 }}\n                    transition={{ duration: 0.1, delay: isOpen ? 0 : 0.2 }}\n                />\n            ),\n            [backgroundDistance, isOpen, backgroundCoordinates],\n        );\n\n        const sortItems: ContextMenuItem[] = useMemo(() => {\n            if (!sortConfig) {\n                return [];\n            }\n\n            const { selectedItem, onSortChange } = sortConfig;\n\n            return sortConfig.items.map(({ id, text }) => ({\n                text,\n                key: id.toString(),\n                isSelected: id === selectedItem.id,\n                icons: id === selectedItem.id ? ['fas fa-circle-small'] : [],\n                onClick: () => onSortChange({ text, id }),\n            }));\n        }, [sortConfig]);\n\n        const comboboxElement = useMemo(() => {\n            if (!comboboxConfig) {\n                return null;\n            }\n\n            return (\n                // eslint-disable-next-line react/jsx-props-no-spreading\n                <ComboBox {...comboboxConfig} />\n            );\n        }, [comboboxConfig]);\n\n        return useMemo(\n            () => (\n                <StyledFilter ref={filterRef}>\n                    <StyledFilterHead>\n                        {!isValidElement(headline) ? (\n                            <StyledFilterHeadline $isSearchActive={isSearchActive}>\n                                {headline}\n                            </StyledFilterHeadline>\n                        ) : (\n                            <StyledFilterHeadlineElement $isSearchActive={isSearchActive}>\n                                {headline}\n                            </StyledFilterHeadlineElement>\n                        )}\n                        {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                            <>\n                                <StyledFilterIconWrapper>\n                                    {rightIcons &&\n                                        rightIcons.map(({ icons: rIcons, onClick }) => (\n                                            <StyledFilterIcon\n                                                onClick={onClick}\n                                                $isOpen={false}\n                                                $shouldShowRoundedHoverEffect={\n                                                    shouldShowRoundedHoverEffect\n                                                }\n                                            >\n                                                <Icon icons={rIcons} size={18} />\n                                            </StyledFilterIcon>\n                                        ))}\n                                    {iconElement}\n                                </StyledFilterIconWrapper>\n                                {backgroundDistance > 0 && backgroundElement}\n                            </>\n                        )}\n                        {type === FilterType.ONLY_SEARCH && searchConfig && (\n                            <StyledFilterSearch>\n                                <SearchInput\n                                    onActiveChange={(isActive) => {\n                                        setIsSearchActive(isActive);\n                                        setIsOpen(isActive);\n                                    }}\n                                    ref={searchRef}\n                                    isActive={isSearchActive}\n                                    value={searchConfig.searchValue}\n                                    onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                                />\n                            </StyledFilterSearch>\n                        )}\n                        {type === FilterType.ONLY_SORT && sortConfig && (\n                            <ContextMenu ref={contextMenuRef} items={sortItems}>\n                                {iconElement}\n                            </ContextMenu>\n                        )}\n                        {type === FilterType.ONLY_CHECKBOX && checkboxConfig && (\n                            // eslint-disable-next-line react/jsx-props-no-spreading\n                            <Checkbox {...checkboxConfig} />\n                        )}\n                        {type === FilterType.ONLY_COMBOBOX && comboboxElement}\n                    </StyledFilterHead>\n                    {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                        <StyledFilterContentWrapper ref={contentRef}>\n                            <ExpandableContent\n                                isOpen={isOpen}\n                                startDelay={backgroundDistance > 0 ? 0.1 : 0}\n                            >\n                                <FilterContent\n                                    shouldAutoFocus={shouldFocus}\n                                    searchConfig={searchConfig}\n                                    filterButtonConfig={filterButtonConfig}\n                                    sortConfig={sortConfig}\n                                    checkboxConfig={checkboxConfig}\n                                    comboboxConfig={comboboxConfig}\n                                />\n                            </ExpandableContent>\n                        </StyledFilterContentWrapper>\n                    )}\n                </StyledFilter>\n            ),\n            [\n                headline,\n                isSearchActive,\n                type,\n                rightIcons,\n                iconElement,\n                backgroundDistance,\n                backgroundElement,\n                searchConfig,\n                sortConfig,\n                sortItems,\n                checkboxConfig,\n                isOpen,\n                shouldFocus,\n                filterButtonConfig,\n                comboboxConfig,\n                comboboxElement,\n                shouldShowRoundedHoverEffect,\n            ],\n        );\n    },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/filter/filter-content/FIlterContent.js

@@ -18,6 +18,7 @@ const FilterContent = ({
   sortConfig,
   filterButtonConfig,
   checkboxConfig,
+  comboboxConfig,
   shouldAutoFocus
 }) => {
   const sortTextRef = (0, _react.useRef)(null);
@@ -78,10 +79,10 @@ const FilterContent = ({
       value: sortConfig.selectedItem.id
     },
     onSelect: handleSelectSortItem
-  }))), checkboxConfig &&
+  }))), comboboxConfig && /*#__PURE__*/_react.default.createElement(_FilterContent.StyledFilterComboboxInline, null, comboboxConfig.label, /*#__PURE__*/_react.default.createElement(_ComboBox.default, comboboxConfig)), checkboxConfig &&
   /*#__PURE__*/
   // eslint-disable-next-line react/jsx-props-no-spreading
-  _react.default.createElement(_Checkbox.default, checkboxConfig)), [checkboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, sortTextWidth]);
+  _react.default.createElement(_Checkbox.default, checkboxConfig)), [checkboxConfig, comboboxConfig, filterButtonConfig, handleSelectSortItem, searchConfig, sortConfig, sortTextWidth]);
 };
 FilterContent.displayName = 'FilterContent';
 var _default = exports.default = FilterContent;

package/lib/cjs/components/filter/filter-content/FIlterContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FIlterContent.js","names":["_react","_interopRequireWildcard","require","_FilterContent","_Input","_interopRequireDefault","_Icon","_FilterButtons","_ComboBox","_Checkbox","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","shouldAutoFocus","sortTextRef","useRef","searchRef","sortTextWidth","setSortTextWidth","useState","handleSelectSortItem","useCallback","item","text","value","onSortChange","id","useEffect","current","clientWidth","_searchRef$current","focus","useMemo","createElement","StyledFilterContent","ref","onChange","ev","onSearchChange","target","placeholder","searchValue","shouldShowClearIcon","length","leftElement","icons","StyledFilterSort","StyledFilterSortText","StyledFilterComboboxWrapper","$textWidth","lists","list","items","map","selectedItem","onSelect","displayName","_default","exports"],"sources":["../../../../../src/components/filter/filter-content/FIlterContent.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n    StyledFilterComboboxWrapper,\n    StyledFilterContent,\n    StyledFilterSort,\n    StyledFilterSortText,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    CheckboxConfig,\n    FilterButtonConfig,\n    SearchConfig,\n    SortConfig,\n} from '../../../types/filter';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { IComboBoxItem } from '../../combobox/ComboBox.types';\n\nexport type FilterContentProps = {\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n    checkboxConfig?: CheckboxConfig;\n    shouldAutoFocus: boolean;\n};\n\nconst FilterContent: FC<FilterContentProps> = ({\n    searchConfig,\n    sortConfig,\n    filterButtonConfig,\n    checkboxConfig,\n    shouldAutoFocus,\n}) => {\n    const sortTextRef = useRef<HTMLDivElement>(null);\n    const searchRef = useRef<InputRef>(null);\n\n    const [sortTextWidth, setSortTextWidth] = useState(0);\n\n    const handleSelectSortItem = useCallback(\n        (item: IComboBoxItem | undefined) => {\n            if (!item) {\n                return;\n            }\n\n            const { text, value } = item;\n\n            if (sortConfig) {\n                sortConfig.onSortChange({ text, id: value });\n            }\n        },\n        [sortConfig],\n    );\n\n    useEffect(() => {\n        if (sortTextRef.current) {\n            setSortTextWidth(sortTextRef.current.clientWidth + 20);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (shouldAutoFocus) {\n            searchRef.current?.focus();\n        }\n    }, [shouldAutoFocus]);\n\n    return useMemo(\n        () => (\n            <StyledFilterContent>\n                {searchConfig && (\n                    <Input\n                        ref={searchRef}\n                        onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                        placeholder=\"Suche\"\n                        value={searchConfig.searchValue}\n                        shouldShowClearIcon={searchConfig.searchValue.length > 0}\n                        leftElement={<Icon icons={['fa fa-search']} />}\n                    />\n                )}\n                {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                {filterButtonConfig && <FilterButtons {...filterButtonConfig} />}\n                {sortConfig && (\n                    <StyledFilterSort>\n                        <StyledFilterSortText ref={sortTextRef}>Sortierung</StyledFilterSortText>\n                        <StyledFilterComboboxWrapper $textWidth={sortTextWidth}>\n                            <ComboBox\n                                lists={[\n                                    {\n                                        list: sortConfig.items.map(({ text, id }) => ({\n                                            text,\n                                            value: id,\n                                        })),\n                                    },\n                                ]}\n                                placeholder=\"\"\n                                selectedItem={{\n                                    text: sortConfig.selectedItem.text,\n                                    value: sortConfig.selectedItem.id,\n                                }}\n                                onSelect={handleSelectSortItem}\n                            />\n                        </StyledFilterComboboxWrapper>\n                    </StyledFilterSort>\n                )}\n                {checkboxConfig && (\n                    // eslint-disable-next-line react/jsx-props-no-spreading\n                    <Checkbox {...checkboxConfig} />\n                )}\n            </StyledFilterContent>\n        ),\n        [\n            checkboxConfig,\n            filterButtonConfig,\n            handleSelectSortItem,\n            searchConfig,\n            sortConfig,\n            sortTextWidth,\n        ],\n    );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FIlterContent.js","names":["_react","_interopRequireWildcard","require","_FilterContent","_Input","_interopRequireDefault","_Icon","_FilterButtons","_ComboBox","_Checkbox","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FilterContent","searchConfig","sortConfig","filterButtonConfig","checkboxConfig","comboboxConfig","shouldAutoFocus","sortTextRef","useRef","searchRef","sortTextWidth","setSortTextWidth","useState","handleSelectSortItem","useCallback","item","text","value","onSortChange","id","useEffect","current","clientWidth","_searchRef$current","focus","useMemo","createElement","StyledFilterContent","ref","onChange","ev","onSearchChange","target","placeholder","searchValue","shouldShowClearIcon","length","leftElement","icons","StyledFilterSort","StyledFilterSortText","StyledFilterComboboxWrapper","$textWidth","lists","list","items","map","selectedItem","onSelect","StyledFilterComboboxInline","label","displayName","_default","exports"],"sources":["../../../../../src/components/filter/filter-content/FIlterContent.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n    StyledFilterComboboxInline,\n    StyledFilterComboboxWrapper,\n    StyledFilterContent,\n    StyledFilterSort,\n    StyledFilterSortText,\n} from './FilterContent.styles';\nimport Input, { InputRef } from '../../input/Input';\nimport Icon from '../../icon/Icon';\nimport FilterButtons from '../../filter-buttons/FilterButtons';\nimport {\n    CheckboxConfig,\n    ComboboxConfig,\n    FilterButtonConfig,\n    SearchConfig,\n    SortConfig,\n} from '../../../types/filter';\nimport ComboBox from '../../combobox/ComboBox';\nimport Checkbox from '../../checkbox/Checkbox';\nimport { IComboBoxItem } from '../../combobox/ComboBox.types';\n\nexport type FilterContentProps = {\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n    checkboxConfig?: CheckboxConfig;\n    comboboxConfig?: ComboboxConfig;\n    shouldAutoFocus: boolean;\n};\n\nconst FilterContent: FC<FilterContentProps> = ({\n    searchConfig,\n    sortConfig,\n    filterButtonConfig,\n    checkboxConfig,\n    comboboxConfig,\n    shouldAutoFocus,\n}) => {\n    const sortTextRef = useRef<HTMLDivElement>(null);\n    const searchRef = useRef<InputRef>(null);\n\n    const [sortTextWidth, setSortTextWidth] = useState(0);\n\n    const handleSelectSortItem = useCallback(\n        (item: IComboBoxItem | undefined) => {\n            if (!item) {\n                return;\n            }\n\n            const { text, value } = item;\n\n            if (sortConfig) {\n                sortConfig.onSortChange({ text, id: value });\n            }\n        },\n        [sortConfig],\n    );\n\n    useEffect(() => {\n        if (sortTextRef.current) {\n            setSortTextWidth(sortTextRef.current.clientWidth + 20);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (shouldAutoFocus) {\n            searchRef.current?.focus();\n        }\n    }, [shouldAutoFocus]);\n\n    return useMemo(\n        () => (\n            <StyledFilterContent>\n                {searchConfig && (\n                    <Input\n                        ref={searchRef}\n                        onChange={(ev) => searchConfig.onSearchChange(ev.target.value)}\n                        placeholder=\"Suche\"\n                        value={searchConfig.searchValue}\n                        shouldShowClearIcon={searchConfig.searchValue.length > 0}\n                        leftElement={<Icon icons={['fa fa-search']} />}\n                    />\n                )}\n                {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                {filterButtonConfig && <FilterButtons {...filterButtonConfig} />}\n                {sortConfig && (\n                    <StyledFilterSort>\n                        <StyledFilterSortText ref={sortTextRef}>Sortierung</StyledFilterSortText>\n                        <StyledFilterComboboxWrapper $textWidth={sortTextWidth}>\n                            <ComboBox\n                                lists={[\n                                    {\n                                        list: sortConfig.items.map(({ text, id }) => ({\n                                            text,\n                                            value: id,\n                                        })),\n                                    },\n                                ]}\n                                placeholder=\"\"\n                                selectedItem={{\n                                    text: sortConfig.selectedItem.text,\n                                    value: sortConfig.selectedItem.id,\n                                }}\n                                onSelect={handleSelectSortItem}\n                            />\n                        </StyledFilterComboboxWrapper>\n                    </StyledFilterSort>\n                )}\n                {comboboxConfig && (\n                    <StyledFilterComboboxInline>\n                        {comboboxConfig.label}\n                        {/* eslint-disable-next-line react/jsx-props-no-spreading */}\n                        <ComboBox {...comboboxConfig} />\n                    </StyledFilterComboboxInline>\n                )}\n                {checkboxConfig && (\n                    // eslint-disable-next-line react/jsx-props-no-spreading\n                    <Checkbox {...checkboxConfig} />\n                )}\n            </StyledFilterContent>\n        ),\n        [\n            checkboxConfig,\n            comboboxConfig,\n            filterButtonConfig,\n            handleSelectSortItem,\n            searchConfig,\n            sortConfig,\n            sortTextWidth,\n        ],\n    );\n};\n\nFilterContent.displayName = 'FilterContent';\n\nexport default FilterContent;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/filter/filter-content/FilterContent.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledFilterSortText = exports.StyledFilterSort = exports.StyledFilterContent = exports.StyledFilterComboboxWrapper = void 0;
+exports.StyledFilterSortText = exports.StyledFilterSort = exports.StyledFilterContent = exports.StyledFilterComboboxWrapper = exports.StyledFilterComboboxInline = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledFilterContent = exports.StyledFilterContent = _styledComponents.default.div`
@@ -15,12 +15,13 @@ const StyledFilterContent = exports.StyledFilterContent = _styledComponents.defa
 
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 10px;
 `;
 const StyledFilterSort = exports.StyledFilterSort = _styledComponents.default.div`
     display: flex;
     align-items: center;
-    gap: 20px;
+    justify-content: space-between;
+    gap: 10px;
 `;
 const StyledFilterSortText = exports.StyledFilterSortText = _styledComponents.default.div`
     flex: 0 0 auto;
@@ -33,4 +34,9 @@ const StyledFilterComboboxWrapper = exports.StyledFilterComboboxWrapper = _style
   $textWidth
 }) => `calc(100% - ${$textWidth}px)`}}
 `;
+const StyledFilterComboboxInline = exports.StyledFilterComboboxInline = _styledComponents.default.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
 //# sourceMappingURL=FilterContent.styles.js.map

package/lib/cjs/components/filter/filter-content/FilterContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFilterContent","exports","styled","div","theme","StyledFilterSort","StyledFilterSortText","StyledFilterComboboxWrapper","$textWidth"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterContentProps = WithTheme<unknown>;\n\nexport const StyledFilterContent = styled.div<StyledFilterContentProps>`\n    background-color: ${({ theme }) => theme['100']};\n\n    padding: 12px;\n\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n`;\n\nexport const StyledFilterSort = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 20px;\n`;\n\nexport const StyledFilterSortText = styled.div`\n    flex: 0 0 auto;\n`;\n\ntype StyledFilterComboboxWrapperProps = WithTheme<{\n    $textWidth: number;\n}>;\n\nexport const StyledFilterComboboxWrapper = styled.div<StyledFilterComboboxWrapperProps>`\n    display: flex;\n    justify-content: end;\n    \n    width: ${({ $textWidth }) => `calc(100% - ${$textWidth}px)`}}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,gBAAgB,GAAAJ,OAAA,CAAAI,gBAAA,GAAGH,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA;AACA,CAAC;AAEM,MAAMG,oBAAoB,GAAAL,OAAA,CAAAK,oBAAA,GAAGJ,yBAAM,CAACC,GAAG;AAC9C;AACA,CAAC;AAMM,MAAMI,2BAA2B,GAAAN,OAAA,CAAAM,2BAAA,GAAGL,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA;AACA,aAAa,CAAC;EAAEK;AAAW,CAAC,KAAK,eAAeA,UAAU,KAAK;AAC/D,CAAC","ignoreList":[]}
+{"version":3,"file":"FilterContent.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFilterContent","exports","styled","div","theme","StyledFilterSort","StyledFilterSortText","StyledFilterComboboxWrapper","$textWidth","StyledFilterComboboxInline"],"sources":["../../../../../src/components/filter/filter-content/FilterContent.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledFilterContentProps = WithTheme<unknown>;\n\nexport const StyledFilterContent = styled.div<StyledFilterContentProps>`\n    background-color: ${({ theme }) => theme['100']};\n\n    padding: 12px;\n\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n`;\n\nexport const StyledFilterSort = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 10px;\n`;\n\nexport const StyledFilterSortText = styled.div`\n    flex: 0 0 auto;\n`;\n\ntype StyledFilterComboboxWrapperProps = WithTheme<{\n    $textWidth: number;\n}>;\n\nexport const StyledFilterComboboxWrapper = styled.div<StyledFilterComboboxWrapperProps>`\n    display: flex;\n    justify-content: end;\n    \n    width: ${({ $textWidth }) => `calc(100% - ${$textWidth}px)`}}\n`;\n\nexport const StyledFilterComboboxInline = styled.div`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKhC,MAAMG,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,gBAAgB,GAAAJ,OAAA,CAAAI,gBAAA,GAAGH,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMG,oBAAoB,GAAAL,OAAA,CAAAK,oBAAA,GAAGJ,yBAAM,CAACC,GAAG;AAC9C;AACA,CAAC;AAMM,MAAMI,2BAA2B,GAAAN,OAAA,CAAAM,2BAAA,GAAGL,yBAAM,CAACC,GAAqC;AACvF;AACA;AACA;AACA,aAAa,CAAC;EAAEK;AAAW,CAAC,KAAK,eAAeA,UAAU,KAAK;AAC/D,CAAC;AAEM,MAAMC,0BAA0B,GAAAR,OAAA,CAAAQ,0BAAA,GAAGP,yBAAM,CAACC,GAAG;AACpD;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/popup/Popup.js

@@ -22,6 +22,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
   container,
   onHide,
   children,
+  isOpen,
   shouldHideOnChildrenLeave,
   shouldShowOnHover = false,
   shouldUseChildrenWidth = true,
@@ -36,13 +37,16 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
   });
   const [internalAlignment, setInternalAlignment] = (0, _react2.useState)(_popup.PopupAlignment.TopLeft);
   const [offset, setOffset] = (0, _react2.useState)(0);
-  const [isOpen, setIsOpen] = (0, _react2.useState)(shouldBeOpen);
+  const [isInternallyOpen, setIsInternallyOpen] = (0, _react2.useState)(shouldBeOpen);
   const [portal, setPortal] = (0, _react2.useState)();
   const [pseudoSize, setPseudoSize] = (0, _react2.useState)();
   const [newContainer, setNewContainer] = (0, _react2.useState)(container ?? null);
   const [contentMaxHeight, setContentMaxHeight] = (0, _react2.useState)(undefined);
   const timeout = (0, _react2.useRef)();
+  const previousIsVisibleRef = (0, _react2.useRef)(false);
   const uuid = (0, _uuid.useUuid)();
+  const isControlled = typeof isOpen === 'boolean';
+  const isPopupOpen = isControlled ? isOpen : isInternallyOpen;
   const {
     height,
     width,
@@ -71,7 +75,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
       width
     });
   }, [height, width]);
-  const handleShow = (0, _react2.useCallback)(() => {
+  const updatePopupPosition = (0, _react2.useCallback)(() => {
     if (popupRef.current && pseudoSize) {
       if (!newContainer) {
         return;
@@ -137,21 +141,33 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
           y
         });
       }
-      setIsOpen(true);
     }
   }, [alignment, newContainer, pseudoSize, shouldScrollWithContent, yOffset]);
+  const handleShow = (0, _react2.useCallback)(() => {
+    updatePopupPosition();
+    if (isControlled) {
+      return;
+    }
+    setIsInternallyOpen(true);
+  }, [isControlled, updatePopupPosition]);
   (0, _react2.useEffect)(() => {
+    if (isControlled) {
+      if (isOpen) {
+        updatePopupPosition();
+      }
+      return;
+    }
     if (shouldBeOpen) {
       handleShow();
     }
-  }, [handleShow, shouldBeOpen]);
+  }, [handleShow, isControlled, isOpen, shouldBeOpen, updatePopupPosition]);
   const handleReposition = (0, _react2.useCallback)(() => {
-    if (isOpen) {
-      handleShow();
+    if (isPopupOpen) {
+      updatePopupPosition();
     }
-  }, [handleShow, isOpen]);
+  }, [isPopupOpen, updatePopupPosition]);
   (0, _react2.useEffect)(() => {
-    if (!isOpen) {
+    if (!isPopupOpen) {
       return;
     }
     window.addEventListener('resize', handleReposition);
@@ -160,7 +176,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
       window.removeEventListener('resize', handleReposition);
       window.removeEventListener('scroll', handleReposition, true);
     };
-  }, [handleReposition, isOpen]);
+  }, [handleReposition, isPopupOpen]);
   (0, _react2.useEffect)(() => {
     if (!newContainer || !popupRef.current) return;
     const viewHeight = newContainer.clientHeight;
@@ -172,18 +188,30 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
     }
   }, [coordinates.y, internalAlignment, newContainer]);
   const handleChildrenClick = () => {
+    if (isControlled) {
+      return;
+    }
     handleShow();
   };
   const handleHide = (0, _react2.useCallback)(() => {
-    setIsOpen(false);
-  }, []);
+    if (isControlled) {
+      return;
+    }
+    setIsInternallyOpen(false);
+  }, [isControlled]);
   const handleMouseEnter = (0, _react2.useCallback)(() => {
+    if (isControlled) {
+      return;
+    }
     if (shouldShowOnHover) {
       window.clearTimeout(timeout.current);
       handleShow();
     }
-  }, [handleShow, shouldShowOnHover]);
+  }, [handleShow, isControlled, shouldShowOnHover]);
   const handleMouseLeave = (0, _react2.useCallback)(() => {
+    if (isControlled) {
+      return;
+    }
     if (!shouldShowOnHover) {
       return;
     }
@@ -194,7 +222,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
     timeout.current = window.setTimeout(() => {
       handleHide();
     }, 500);
-  }, [handleHide, shouldHideOnChildrenLeave, shouldShowOnHover]);
+  }, [handleHide, isControlled, shouldHideOnChildrenLeave, shouldShowOnHover]);
   const handleDocumentClick = (0, _react2.useCallback)(event => {
     var _popupContentRef$curr;
     if (!((_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(event.target))) {
@@ -206,27 +234,36 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
     show: handleShow
   }), [handleHide, handleShow]);
   (0, _react2.useEffect)(() => {
-    if (isOpen && !shouldBeOpen) {
+    if (!isPopupOpen) {
+      return undefined;
+    }
+    if (!isControlled && !shouldBeOpen) {
       document.addEventListener('click', handleDocumentClick, true);
       window.addEventListener('blur', handleHide);
-      if (typeof onShow === 'function') {
-        onShow();
-      }
-    } else if (typeof onHide === 'function') {
-      onHide();
     }
     return () => {
       document.removeEventListener('click', handleDocumentClick, true);
       window.removeEventListener('blur', handleHide);
     };
-  }, [handleDocumentClick, handleHide, isOpen, onHide, onShow, shouldBeOpen]);
+  }, [handleDocumentClick, handleHide, isControlled, isPopupOpen, shouldBeOpen]);
+  (0, _react2.useEffect)(() => {
+    if (previousIsVisibleRef.current === isPopupOpen) {
+      return;
+    }
+    previousIsVisibleRef.current = isPopupOpen;
+    if (isPopupOpen) {
+      onShow === null || onShow === void 0 || onShow();
+      return;
+    }
+    onHide === null || onHide === void 0 || onHide();
+  }, [isPopupOpen, onHide, onShow]);
   (0, _react2.useEffect)(() => {
     if (!newContainer) {
       return;
     }
     setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
       initial: false
-    }, isOpen && /*#__PURE__*/_react2.default.createElement(_PopupContentWrapper.default, {
+    }, isPopupOpen && /*#__PURE__*/_react2.default.createElement(_PopupContentWrapper.default, {
       width: (pseudoSize === null || pseudoSize === void 0 ? void 0 : pseudoSize.width) ?? 0,
       offset: offset,
       shouldScrollWithContent: shouldScrollWithContent,
@@ -240,7 +277,7 @@ const Popup = /*#__PURE__*/(0, _react2.forwardRef)(({
     }, /*#__PURE__*/_react2.default.createElement(_AreaContextProvider.default, {
       shouldChangeColor: true
     }, content))), newContainer));
-  }, [contentMaxHeight, internalAlignment, newContainer, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize === null || pseudoSize === void 0 ? void 0 : pseudoSize.width, uuid, shouldScrollWithContent]);
+  }, [contentMaxHeight, internalAlignment, newContainer, content, coordinates, handleMouseEnter, handleMouseLeave, isPopupOpen, offset, pseudoSize === null || pseudoSize === void 0 ? void 0 : pseudoSize.width, uuid, shouldScrollWithContent]);
   return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, measuredElement, /*#__PURE__*/_react2.default.createElement(_Popup.StyledPopup, {
     className: "beta-chayns-popup",
     ref: popupRef,