@chayns-components/core 5.0.0-beta.1276 → 5.0.0-beta.1280

package/lib/cjs/components/expandable-content/ExpandableContent.js

@@ -10,7 +10,8 @@ var _ExpandableContent = require("./ExpandableContent.styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ExpandableContent = ({
   children,
-  isOpen
+  isOpen,
+  startDelay
 }) => (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
   initial: false
 }, /*#__PURE__*/_react2.default.createElement(_ExpandableContent.StyledMotionExpandableContent, {
@@ -19,9 +20,10 @@ const ExpandableContent = ({
   },
   transition: {
     duration: 0.2,
-    type: 'tween'
+    type: 'tween',
+    delay: isOpen ? startDelay : 0
   }
-}, children)), [children, isOpen]);
+}, children)), [children, isOpen, startDelay]);
 ExpandableContent.displayName = 'ExpandableContent';
 var _default = exports.default = ExpandableContent;
 //# sourceMappingURL=ExpandableContent.js.map

package/lib/cjs/components/expandable-content/ExpandableContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableContent.js","names":["_react","require","_react2","_interopRequireWildcard","_ExpandableContent","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ExpandableContent","children","isOpen","useMemo","createElement","AnimatePresence","initial","StyledMotionExpandableContent","animate","height","transition","duration","type","displayName","_default","exports"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n    /**\n     * The children that should be animated.\n     */\n    children: ReactNode;\n    /**\n     * Whether the content is expanded.\n     */\n    isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen }) =>\n    useMemo(\n        () => (\n            <AnimatePresence initial={false}>\n                <StyledMotionExpandableContent\n                    animate={{ height: isOpen ? 'auto' : '0px' }}\n                    transition={{ duration: 0.2, type: 'tween' }}\n                >\n                    {children}\n                </StyledMotionExpandableContent>\n            </AnimatePresence>\n        ),\n        [children, isOpen],\n    );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAA2E,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAa3E,MAAMkB,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KACvE,IAAAC,eAAO,EACH,mBACIzB,OAAA,CAAAa,OAAA,CAAAa,aAAA,CAAC5B,MAAA,CAAA6B,eAAe;EAACC,OAAO,EAAE;AAAM,gBAC5B5B,OAAA,CAAAa,OAAA,CAAAa,aAAA,CAACxB,kBAAA,CAAA2B,6BAA6B;EAC1BC,OAAO,EAAE;IAAEC,MAAM,EAAEP,MAAM,GAAG,MAAM,GAAG;EAAM,CAAE;EAC7CQ,UAAU,EAAE;IAAEC,QAAQ,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAQ;AAAE,GAE5CX,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,CACrB,CAAC;AAELF,iBAAiB,CAACa,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAxB,OAAA,GAErCS,iBAAiB","ignoreList":[]}
+{"version":3,"file":"ExpandableContent.js","names":["_react","require","_react2","_interopRequireWildcard","_ExpandableContent","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ExpandableContent","children","isOpen","startDelay","useMemo","createElement","AnimatePresence","initial","StyledMotionExpandableContent","animate","height","transition","duration","type","delay","displayName","_default","exports"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n    /**\n     * The children that should be animated.\n     */\n    children: ReactNode;\n    /**\n     * An optional start delay.\n     */\n    startDelay?: number;\n    /**\n     * Whether the content is expanded.\n     */\n    isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen, startDelay }) =>\n    useMemo(\n        () => (\n            <AnimatePresence initial={false}>\n                <StyledMotionExpandableContent\n                    animate={{ height: isOpen ? 'auto' : '0px' }}\n                    transition={{ duration: 0.2, type: 'tween', delay: isOpen ? startDelay : 0 }}\n                >\n                    {children}\n                </StyledMotionExpandableContent>\n            </AnimatePresence>\n        ),\n        [children, isOpen, startDelay],\n    );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAA2E,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAiB3E,MAAMkB,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAW,CAAC,KACnF,IAAAC,eAAO,EACH,mBACI1B,OAAA,CAAAa,OAAA,CAAAc,aAAA,CAAC7B,MAAA,CAAA8B,eAAe;EAACC,OAAO,EAAE;AAAM,gBAC5B7B,OAAA,CAAAa,OAAA,CAAAc,aAAA,CAACzB,kBAAA,CAAA4B,6BAA6B;EAC1BC,OAAO,EAAE;IAAEC,MAAM,EAAER,MAAM,GAAG,MAAM,GAAG;EAAM,CAAE;EAC7CS,UAAU,EAAE;IAAEC,QAAQ,EAAE,GAAG;IAAEC,IAAI,EAAE,OAAO;IAAEC,KAAK,EAAEZ,MAAM,GAAGC,UAAU,GAAG;EAAE;AAAE,GAE5EF,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,EAAEC,UAAU,CACjC,CAAC;AAELH,iBAAiB,CAACe,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1B,OAAA,GAErCS,iBAAiB","ignoreList":[]}

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

@@ -22,6 +22,14 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
 }, ref) => {
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
+  const [backgroundDistance, setBackgroundDistance] = (0, _react.useState)(0);
+  const [backgroundCoordinates, setBackgroundCoordinates] = (0, _react.useState)({
+    top: 0,
+    left: 0
+  });
+  const contentRef = (0, _react.useRef)(null);
+  const iconRef = (0, _react.useRef)(null);
+  const filterRef = (0, _react.useRef)(null);
   const contextMenuRef = (0, _react.useRef)(null);
   const type = (0, _react.useMemo)(() => {
     if (filterButtonConfig && !searchConfig && !sortConfig) {
@@ -74,12 +82,45 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
       handleShow();
     }
   }, [handleHide, handleShow, isOpen]);
+  (0, _react.useEffect)(() => {
+    if (headline && iconRef.current && contentRef.current && filterRef.current) {
+      const iconRect = iconRef.current.getBoundingClientRect();
+      const filterRect = filterRef.current.getBoundingClientRect();
+      const contentRect = contentRef.current.getBoundingClientRect();
+      const relativeTop = iconRect.bottom - filterRect.top;
+      const relativeLeft = iconRect.left - filterRect.left;
+      setBackgroundDistance(contentRect.top - iconRect.bottom);
+      setBackgroundCoordinates({
+        top: relativeTop,
+        left: relativeLeft
+      });
+    } else {
+      setBackgroundDistance(0);
+      setBackgroundCoordinates({
+        top: 0,
+        left: 0
+      });
+    }
+  }, [headline]);
   const iconElement = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterIcon, {
-    onClick: handleIconClick
+    onClick: handleIconClick,
+    $isOpen: isOpen,
+    ref: iconRef
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: icons,
     size: 18
-  })), [handleIconClick, icons]);
+  })), [handleIconClick, icons, isOpen]);
+  const backgroundElement = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Filter.StyledMotionFilterBackground, {
+    $top: backgroundCoordinates.top,
+    $left: backgroundCoordinates.left,
+    animate: {
+      height: isOpen ? `${backgroundDistance}px` : 0
+    },
+    transition: {
+      duration: 0.1,
+      delay: isOpen ? 0 : 0.2
+    }
+  }), [backgroundDistance, isOpen, backgroundCoordinates]);
   const sortItems = (0, _react.useMemo)(() => {
     if (!sortConfig) {
       return [];
@@ -102,9 +143,11 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
       })
     }));
   }, [sortConfig]);
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Filter.StyledFilter, null, /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterHead, null, /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterHeadline, {
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Filter.StyledFilter, {
+    ref: filterRef
+  }, /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterHead, null, /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterHeadline, {
     isSearchActive: isSearchActive
-  }, headline), [_filter.FilterType.MULTIPLE, _filter.FilterType.ONLY_FILTER].includes(type) && iconElement, type === _filter.FilterType.ONLY_SEARCH && searchConfig && /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterSearch, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+  }, headline), [_filter.FilterType.MULTIPLE, _filter.FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconElement, backgroundDistance > 0 && backgroundElement), type === _filter.FilterType.ONLY_SEARCH && searchConfig && /*#__PURE__*/_react.default.createElement(_Filter.StyledFilterSearch, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
     onActiveChange: isActive => {
       setIsSearchActive(isActive);
       setIsOpen(isActive);
@@ -115,13 +158,16 @@ const Filter = /*#__PURE__*/(0, _react.forwardRef)(({
   })), type === _filter.FilterType.ONLY_SORT && sortConfig && /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
     ref: contextMenuRef,
     items: sortItems
-  }, iconElement)), [_filter.FilterType.MULTIPLE, _filter.FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/_react.default.createElement(_ExpandableContent.default, {
-    isOpen: isOpen
+  }, iconElement)), [_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,
+    startDelay: backgroundDistance > 0 ? 0.1 : 0
   }, /*#__PURE__*/_react.default.createElement(_FIlterContent.default, {
     searchConfig: searchConfig,
     filterButtonConfig: filterButtonConfig,
     sortConfig: sortConfig
-  }))), [isSearchActive, headline, type, iconElement, searchConfig, sortConfig, sortItems, isOpen, filterButtonConfig]);
+  })))), [isSearchActive, headline, type, iconElement, backgroundDistance, backgroundElement, searchConfig, sortConfig, sortItems, isOpen, filterButtonConfig]);
 });
 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","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Filter","forwardRef","headline","searchConfig","sortConfig","filterButtonConfig","ref","isOpen","setIsOpen","useState","isSearchActive","setIsSearchActive","contextMenuRef","useRef","type","useMemo","FilterType","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","MULTIPLE","icons","handleHide","useCallback","current","hide","handleShow","useImperativeHandle","show","handleIconClick","iconElement","createElement","StyledFilterIcon","onClick","size","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","StyledFilter","StyledFilterHead","StyledFilterHeadline","includes","StyledFilterSearch","onActiveChange","isActive","value","searchValue","onChange","ev","onSearchChange","target","displayName","_default","exports"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledFilter,\n    StyledFilterHead,\n    StyledFilterHeadline,\n    StyledFilterIcon,\n    StyledFilterSearch,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FIlterContent';\nimport {\n    FilterButtonConfig,\n    FilterRef,\n    FilterType,\n    SearchConfig,\n    SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu, { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu';\n\nexport type FilterProps = {\n    headline: string;\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n    ({ headline, searchConfig, sortConfig, filterButtonConfig }, ref) => {\n        const [isOpen, setIsOpen] = useState(false);\n        const [isSearchActive, setIsSearchActive] = useState(false);\n\n        const contextMenuRef = useRef<ContextMenuRef>(null);\n\n        const type = useMemo(() => {\n            if (filterButtonConfig && !searchConfig && !sortConfig) {\n                return FilterType.ONLY_FILTER;\n            }\n\n            if (!filterButtonConfig && !searchConfig && sortConfig) {\n                return FilterType.ONLY_SORT;\n            }\n\n            if (!filterButtonConfig && searchConfig && !sortConfig) {\n                return FilterType.ONLY_SEARCH;\n            }\n\n            return FilterType.MULTIPLE;\n        }, [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        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        const handleShow = useCallback(() => {\n            setIsOpen(true);\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        }, [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        const iconElement = useMemo(\n            () => (\n                <StyledFilterIcon onClick={handleIconClick}>\n                    <Icon icons={icons} size={18} />\n                </StyledFilterIcon>\n            ),\n            [handleIconClick, icons],\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>\n                    <StyledFilterHead>\n                        <StyledFilterHeadline isSearchActive={isSearchActive}>\n                            {headline}\n                        </StyledFilterHeadline>\n                        {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) &&\n                            iconElement}\n                        {type === FilterType.ONLY_SEARCH && searchConfig && (\n                            <StyledFilterSearch>\n                                <SearchInput\n                                    onActiveChange={(isActive) => {\n                                        setIsSearchActive(isActive);\n                                        setIsOpen(isActive);\n                                    }}\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                    </StyledFilterHead>\n                    {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                        <ExpandableContent isOpen={isOpen}>\n                            <FilterContent\n                                searchConfig={searchConfig}\n                                filterButtonConfig={filterButtonConfig}\n                                sortConfig={sortConfig}\n                            />\n                        </ExpandableContent>\n                    )}\n                </StyledFilter>\n            ),\n            [\n                isSearchActive,\n                headline,\n                type,\n                iconElement,\n                searchConfig,\n                sortConfig,\n                sortItems,\n                isOpen,\n                filterButtonConfig,\n            ],\n        );\n    },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Filter.js","names":["_react","_interopRequireWildcard","require","_Filter","_ExpandableContent","_interopRequireDefault","_Icon","_FIlterContent","_filter","_SearchInput","_ContextMenu","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Filter","forwardRef","headline","searchConfig","sortConfig","filterButtonConfig","ref","isOpen","setIsOpen","useState","isSearchActive","setIsSearchActive","backgroundDistance","setBackgroundDistance","backgroundCoordinates","setBackgroundCoordinates","top","left","contentRef","useRef","iconRef","filterRef","contextMenuRef","type","useMemo","FilterType","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","MULTIPLE","icons","handleHide","useCallback","current","hide","handleShow","useImperativeHandle","show","handleIconClick","useEffect","iconRect","getBoundingClientRect","filterRect","contentRect","relativeTop","bottom","relativeLeft","iconElement","createElement","StyledFilterIcon","onClick","$isOpen","size","backgroundElement","StyledMotionFilterBackground","$top","$left","animate","height","transition","duration","delay","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","StyledFilter","StyledFilterHead","StyledFilterHeadline","includes","Fragment","StyledFilterSearch","onActiveChange","isActive","value","searchValue","onChange","ev","onSearchChange","target","StyledFilterContentWrapper","startDelay","displayName","_default","exports"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n    forwardRef,\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    StyledFilterIcon,\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    FilterButtonConfig,\n    FilterRef,\n    FilterType,\n    SearchConfig,\n    SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu, { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu';\n\nexport type FilterProps = {\n    headline: string;\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n    ({ headline, searchConfig, sortConfig, filterButtonConfig }, ref) => {\n        const [isOpen, setIsOpen] = useState(false);\n        const [isSearchActive, setIsSearchActive] = 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\n        const contextMenuRef = useRef<ContextMenuRef>(null);\n\n        const type = useMemo(() => {\n            if (filterButtonConfig && !searchConfig && !sortConfig) {\n                return FilterType.ONLY_FILTER;\n            }\n\n            if (!filterButtonConfig && !searchConfig && sortConfig) {\n                return FilterType.ONLY_SORT;\n            }\n\n            if (!filterButtonConfig && searchConfig && !sortConfig) {\n                return FilterType.ONLY_SEARCH;\n            }\n\n            return FilterType.MULTIPLE;\n        }, [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        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        const handleShow = useCallback(() => {\n            setIsOpen(true);\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        }, [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 onClick={handleIconClick} $isOpen={isOpen} ref={iconRef}>\n                    <Icon icons={icons} size={18} />\n                </StyledFilterIcon>\n            ),\n            [handleIconClick, icons, isOpen],\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                        <StyledFilterHeadline isSearchActive={isSearchActive}>\n                            {headline}\n                        </StyledFilterHeadline>\n                        {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                            <>\n                                {iconElement}\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                                    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                    </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                                    searchConfig={searchConfig}\n                                    filterButtonConfig={filterButtonConfig}\n                                    sortConfig={sortConfig}\n                                />\n                            </ExpandableContent>\n                        </StyledFilterContentWrapper>\n                    )}\n                </StyledFilter>\n            ),\n            [\n                isSearchActive,\n                headline,\n                type,\n                iconElement,\n                backgroundDistance,\n                backgroundElement,\n                searchConfig,\n                sortConfig,\n                sortItems,\n                isOpen,\n                filterButtonConfig,\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.styles.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledFilterSearch = exports.StyledFilterIcon = exports.StyledFilterHeadline = exports.StyledFilterHead = exports.StyledFilter = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+exports.StyledMotionFilterBackground = exports.StyledFilterSearch = exports.StyledFilterIcon = exports.StyledFilterHeadline = exports.StyledFilterHead = exports.StyledFilterContentWrapper = exports.StyledFilter = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react = require("motion/react");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledFilter = exports.StyledFilter = _styledComponents.default.div``;
 const StyledFilterHead = exports.StyledFilterHead = _styledComponents.default.div`
     display: flex;
@@ -38,10 +39,34 @@ const StyledFilterIcon = exports.StyledFilterIcon = _styledComponents.default.di
     align-items: center;
     justify-content: center;
 
+    ${({
+  $isOpen,
+  theme
+}) => $isOpen && (0, _styledComponents.css)`
+            background-color: ${theme['100']};
+        `}
+
     &:hover {
         background-color: ${({
   theme
 }) => theme['100']};
     }
 `;
+const StyledMotionFilterBackground = exports.StyledMotionFilterBackground = (0, _styledComponents.default)(_react.motion.div)`
+    width: 30px;
+
+    position: absolute;
+
+    top: ${({
+  $top
+}) => $top}px;
+    left: ${({
+  $left
+}) => $left}px;
+
+    background-color: ${({
+  theme
+}) => theme['100']};
+`;
+const StyledFilterContentWrapper = exports.StyledFilterContentWrapper = _styledComponents.default.div``;
 //# sourceMappingURL=Filter.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledFilter","exports","styled","div","StyledFilterHead","StyledFilterHeadline","h1","isSearchActive","StyledFilterSearch","StyledFilterIcon","theme"],"sources":["../../../../src/components/filter/Filter.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFilter = styled.div``;\n\nexport const StyledFilterHead = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 20px;\n\n    position: relative;\n`;\n\ntype StyledFilterHeadlineProps = WithTheme<{ isSearchActive: boolean }>;\n\nexport const StyledFilterHeadline = styled.h1<StyledFilterHeadlineProps>`\n    margin: 0;\n\n    opacity: ${({ isSearchActive }) => (isSearchActive ? 0 : 1)};\n\n    transition: opacity 0.3s;\n`;\n\nexport const StyledFilterSearch = styled.div`\n    position: absolute;\n    width: 100%;\n`;\n\ntype StyledFilterIconProps = WithTheme<unknown>;\n\nexport const StyledFilterIcon = styled.div<StyledFilterIconProps>`\n    cursor: pointer;\n\n    width: 30px;\n    height: 30px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:hover {\n        background-color: ${({ theme }) => theme['100']};\n    }\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;AAGhC,MAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAEjC,MAAMC,gBAAgB,GAAAH,OAAA,CAAAG,gBAAA,GAAGF,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,oBAAoB,GAAAJ,OAAA,CAAAI,oBAAA,GAAGH,yBAAM,CAACI,EAA6B;AACxE;AACA;AACA,eAAe,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,CAAC,GAAG,CAAE;AAC/D;AACA;AACA,CAAC;AAEM,MAAMC,kBAAkB,GAAAP,OAAA,CAAAO,kBAAA,GAAGN,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA,CAAC;AAIM,MAAMM,gBAAgB,GAAAR,OAAA,CAAAQ,gBAAA,GAAGP,yBAAM,CAACC,GAA0B;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,CAAC;EAAEO;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvD;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Filter.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_react","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledFilter","exports","styled","div","StyledFilterHead","StyledFilterHeadline","h1","isSearchActive","StyledFilterSearch","StyledFilterIcon","$isOpen","theme","css","StyledMotionFilterBackground","motion","$top","$left","StyledFilterContentWrapper"],"sources":["../../../../src/components/filter/Filter.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { motion } from 'motion/react';\n\nexport const StyledFilter = styled.div``;\n\nexport const StyledFilterHead = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 20px;\n\n    position: relative;\n`;\n\ntype StyledFilterHeadlineProps = WithTheme<{ isSearchActive: boolean }>;\n\nexport const StyledFilterHeadline = styled.h1<StyledFilterHeadlineProps>`\n    margin: 0;\n\n    opacity: ${({ isSearchActive }) => (isSearchActive ? 0 : 1)};\n\n    transition: opacity 0.3s;\n`;\n\nexport const StyledFilterSearch = styled.div`\n    position: absolute;\n    width: 100%;\n`;\n\ntype StyledFilterIconProps = WithTheme<{\n    $isOpen: boolean;\n}>;\n\nexport const StyledFilterIcon = styled.div<StyledFilterIconProps>`\n    cursor: pointer;\n\n    width: 30px;\n    height: 30px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    ${({ $isOpen, theme }) =>\n        $isOpen &&\n        css`\n            background-color: ${theme['100']};\n        `}\n\n    &:hover {\n        background-color: ${({ theme }) => theme['100']};\n    }\n`;\n\ntype StyledMotionFilterBackgroundProps = WithTheme<{ $top: number; $left: number }>;\n\nexport const StyledMotionFilterBackground = styled(motion.div)<StyledMotionFilterBackgroundProps>`\n    width: 30px;\n\n    position: absolute;\n\n    top: ${({ $top }) => $top}px;\n    left: ${({ $left }) => $left}px;\n\n    background-color: ${({ theme }) => theme['100']};\n`;\n\nexport const StyledFilterContentWrapper = styled.div``;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAAsC,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAE/B,MAAMkB,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAGE,yBAAM,CAACC,GAAG,EAAE;AAEjC,MAAMC,gBAAgB,GAAAH,OAAA,CAAAG,gBAAA,GAAGF,yBAAM,CAACC,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,oBAAoB,GAAAJ,OAAA,CAAAI,oBAAA,GAAGH,yBAAM,CAACI,EAA6B;AACxE;AACA;AACA,eAAe,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,CAAC,GAAG,CAAE;AAC/D;AACA;AACA,CAAC;AAEM,MAAMC,kBAAkB,GAAAP,OAAA,CAAAO,kBAAA,GAAGN,yBAAM,CAACC,GAAG;AAC5C;AACA;AACA,CAAC;AAMM,MAAMM,gBAAgB,GAAAR,OAAA,CAAAQ,gBAAA,GAAGP,yBAAM,CAACC,GAA0B;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEO,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACP,IAAAE,qBAAG;AACX,gCAAgCD,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT;AACA;AACA,4BAA4B,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvD;AACA,CAAC;AAIM,MAAME,4BAA4B,GAAAZ,OAAA,CAAAY,4BAAA,GAAG,IAAAX,yBAAM,EAACY,aAAM,CAACX,GAAG,CAAoC;AACjG;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEY;AAAK,CAAC,KAAKA,IAAI;AAC7B,YAAY,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK;AAChC;AACA,wBAAwB,CAAC;EAAEL;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAEM,MAAMM,0BAA0B,GAAAhB,OAAA,CAAAgB,0BAAA,GAAGf,yBAAM,CAACC,GAAG,EAAE","ignoreList":[]}

package/lib/cjs/components/search-input/SearchInput.js

@@ -108,8 +108,7 @@ const SearchInput = ({
     key: "icon",
     color: iconColor,
     icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
-    size: 18
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick
   }))) : /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
   }, /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputIconWrapperContent, {
@@ -132,8 +131,7 @@ const SearchInput = ({
     key: "icon",
     color: iconColor,
     icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
-    size: 18
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick
   })))), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/_react2.default.createElement(_SearchInput.StyledMotionSearchInputContentWrapper, {

package/lib/cjs/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","width","widthValue","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","parentWidth","useElementSize","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","onClick","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","exit","key","transition","duration","ref","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","color","icons","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    shouldUseAbsolutePositioning = false,\n    size = InputSize.Medium,\n    value,\n    width: widthValue,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n    const pseudoRef = useRef<HTMLDivElement>(null);\n\n    const parentWidth = useElementSize(pseudoRef);\n\n    const theme = useTheme() as Theme;\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    const width = useMemo(() => parentWidth?.width ?? widthValue, [parentWidth?.width, widthValue]);\n\n    return (\n        <>\n            <StyledSearchInput\n                className=\"beta-chayns-search-input\"\n                $size={size}\n                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                onClick={() => {\n                    if (shouldUseAbsolutePositioning) {\n                        if (isSearchInputActive) {\n                            handleBackIconClick();\n                        } else {\n                            handleSearchIconClick();\n                        }\n                    }\n                }}\n            >\n                {shouldUseAbsolutePositioning ? (\n                    <AnimatePresence initial={false}>\n                        {isSearchInputActive && (\n                            <StyledMotionSearchInputContentWrapper\n                                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                animate={{ opacity: 1, width }}\n                                exit={{ opacity: 0, width: 0 }}\n                                initial={{ opacity: 0, width: 0 }}\n                                key=\"searchInputContentWrapper\"\n                                transition={{ duration: 0.3 }}\n                            >\n                                <Input\n                                    onChange={onChange}\n                                    onKeyDown={onKeyDown}\n                                    placeholder={placeholder}\n                                    ref={inputRef}\n                                    shouldShowClearIcon\n                                    size={size}\n                                    value={value}\n                                />\n                            </StyledMotionSearchInputContentWrapper>\n                        )}\n                        <StyledMotionSearchInputIconWrapperContent\n                            animate={{ opacity: 1 }}\n                            exit={{ opacity: 0, position: 'absolute' }}\n                            initial={{ opacity: 0 }}\n                            key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                            transition={{ duration: 0.3 }}\n                            id={\n                                isSearchInputActive\n                                    ? 'search-input-backIcon'\n                                    : 'search-input-searchIcon'\n                            }\n                        >\n                            <Icon\n                                key=\"icon\"\n                                color={iconColor}\n                                icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                onClick={\n                                    isSearchInputActive\n                                        ? handleBackIconClick\n                                        : handleSearchIconClick\n                                }\n                                size={18}\n                            />\n                        </StyledMotionSearchInputIconWrapperContent>\n                    </AnimatePresence>\n                ) : (\n                    <>\n                        <StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                <StyledMotionSearchInputIconWrapperContent\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0, position: 'absolute' }}\n                                    initial={{ opacity: 0 }}\n                                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                    transition={{ duration: 0.3 }}\n                                    id={\n                                        isSearchInputActive\n                                            ? 'search-input-backIcon'\n                                            : 'search-input-searchIcon'\n                                    }\n                                >\n                                    <Icon\n                                        key=\"icon\"\n                                        color={iconColor}\n                                        icons={\n                                            isSearchInputActive\n                                                ? ['fa fa-arrow-left']\n                                                : ['fa fa-search']\n                                        }\n                                        onClick={\n                                            isSearchInputActive\n                                                ? handleBackIconClick\n                                                : handleSearchIconClick\n                                        }\n                                        size={18}\n                                    />\n                                </StyledMotionSearchInputIconWrapperContent>\n                            </AnimatePresence>\n                        </StyledMotionSearchInputIconWrapper>\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width: '100%' }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.3 }}\n                                >\n                                    <Input\n                                        key=\"input\"\n                                        leftElement={\n                                            <Icon color={theme.text} icons={['far fa-search']} />\n                                        }\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                        </AnimatePresence>\n                    </>\n                )}\n            </StyledSearchInput>\n            <StyledSearchInputPseudoElement ref={pseudoRef} />\n        </>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchInput.js","names":["_react","require","_react2","_interopRequireWildcard","_Icon","_interopRequireDefault","_Input","_SearchInput","_styledComponents","_element","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","InputSize","Medium","value","width","widthValue","isSearchInputActive","setIsSearchInputActive","useState","trim","inputRef","useRef","pseudoRef","parentWidth","useElementSize","theme","useTheme","handleBackIconClick","useCallback","handleSearchIconClick","useEffect","_inputRef$current","current","focus","useMemo","createElement","Fragment","StyledSearchInput","className","$size","$shouldUseAbsolutePositioning","onClick","AnimatePresence","initial","StyledMotionSearchInputContentWrapper","animate","opacity","exit","key","transition","duration","ref","shouldShowClearIcon","StyledMotionSearchInputIconWrapperContent","position","id","color","icons","StyledMotionSearchInputIconWrapper","leftElement","text","StyledSearchInputPseudoElement","displayName","_default","exports"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    shouldUseAbsolutePositioning = false,\n    size = InputSize.Medium,\n    value,\n    width: widthValue,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n    const pseudoRef = useRef<HTMLDivElement>(null);\n\n    const parentWidth = useElementSize(pseudoRef);\n\n    const theme = useTheme() as Theme;\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    const width = useMemo(() => parentWidth?.width ?? widthValue, [parentWidth?.width, widthValue]);\n\n    return (\n        <>\n            <StyledSearchInput\n                className=\"beta-chayns-search-input\"\n                $size={size}\n                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                onClick={() => {\n                    if (shouldUseAbsolutePositioning) {\n                        if (isSearchInputActive) {\n                            handleBackIconClick();\n                        } else {\n                            handleSearchIconClick();\n                        }\n                    }\n                }}\n            >\n                {shouldUseAbsolutePositioning ? (\n                    <AnimatePresence initial={false}>\n                        {isSearchInputActive && (\n                            <StyledMotionSearchInputContentWrapper\n                                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                animate={{ opacity: 1, width }}\n                                exit={{ opacity: 0, width: 0 }}\n                                initial={{ opacity: 0, width: 0 }}\n                                key=\"searchInputContentWrapper\"\n                                transition={{ duration: 0.3 }}\n                            >\n                                <Input\n                                    onChange={onChange}\n                                    onKeyDown={onKeyDown}\n                                    placeholder={placeholder}\n                                    ref={inputRef}\n                                    shouldShowClearIcon\n                                    size={size}\n                                    value={value}\n                                />\n                            </StyledMotionSearchInputContentWrapper>\n                        )}\n                        <StyledMotionSearchInputIconWrapperContent\n                            animate={{ opacity: 1 }}\n                            exit={{ opacity: 0, position: 'absolute' }}\n                            initial={{ opacity: 0 }}\n                            key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                            transition={{ duration: 0.3 }}\n                            id={\n                                isSearchInputActive\n                                    ? 'search-input-backIcon'\n                                    : 'search-input-searchIcon'\n                            }\n                        >\n                            <Icon\n                                key=\"icon\"\n                                color={iconColor}\n                                icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                onClick={\n                                    isSearchInputActive\n                                        ? handleBackIconClick\n                                        : handleSearchIconClick\n                                }\n                            />\n                        </StyledMotionSearchInputIconWrapperContent>\n                    </AnimatePresence>\n                ) : (\n                    <>\n                        <StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                <StyledMotionSearchInputIconWrapperContent\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0, position: 'absolute' }}\n                                    initial={{ opacity: 0 }}\n                                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                    transition={{ duration: 0.3 }}\n                                    id={\n                                        isSearchInputActive\n                                            ? 'search-input-backIcon'\n                                            : 'search-input-searchIcon'\n                                    }\n                                >\n                                    <Icon\n                                        key=\"icon\"\n                                        color={iconColor}\n                                        icons={\n                                            isSearchInputActive\n                                                ? ['fa fa-arrow-left']\n                                                : ['fa fa-search']\n                                        }\n                                        onClick={\n                                            isSearchInputActive\n                                                ? handleBackIconClick\n                                                : handleSearchIconClick\n                                        }\n                                    />\n                                </StyledMotionSearchInputIconWrapperContent>\n                            </AnimatePresence>\n                        </StyledMotionSearchInputIconWrapper>\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width: '100%' }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.3 }}\n                                >\n                                    <Input\n                                        key=\"input\"\n                                        leftElement={\n                                            <Icon color={theme.text} icons={['far fa-search']} />\n                                        }\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                        </AnimatePresence>\n                    </>\n                )}\n            </StyledSearchInput>\n            <StyledSearchInputPseudoElement ref={pseudoRef} />\n        </>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/expandable-content/ExpandableContent.js

@@ -3,7 +3,8 @@ import React, { useMemo } from 'react';
 import { StyledMotionExpandableContent } from './ExpandableContent.styles';
 const ExpandableContent = ({
   children,
-  isOpen
+  isOpen,
+  startDelay
 }) => useMemo(() => /*#__PURE__*/React.createElement(AnimatePresence, {
   initial: false
 }, /*#__PURE__*/React.createElement(StyledMotionExpandableContent, {
@@ -12,9 +13,10 @@ const ExpandableContent = ({
   },
   transition: {
     duration: 0.2,
-    type: 'tween'
+    type: 'tween',
+    delay: isOpen ? startDelay : 0
   }
-}, children)), [children, isOpen]);
+}, children)), [children, isOpen, startDelay]);
 ExpandableContent.displayName = 'ExpandableContent';
 export default ExpandableContent;
 //# sourceMappingURL=ExpandableContent.js.map

package/lib/esm/components/expandable-content/ExpandableContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableContent.js","names":["AnimatePresence","React","useMemo","StyledMotionExpandableContent","ExpandableContent","children","isOpen","createElement","initial","animate","height","transition","duration","type","displayName"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n    /**\n     * The children that should be animated.\n     */\n    children: ReactNode;\n    /**\n     * Whether the content is expanded.\n     */\n    isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen }) =>\n    useMemo(\n        () => (\n            <AnimatePresence initial={false}>\n                <StyledMotionExpandableContent\n                    animate={{ height: isOpen ? 'auto' : '0px' }}\n                    transition={{ duration: 0.2, type: 'tween' }}\n                >\n                    {children}\n                </StyledMotionExpandableContent>\n            </AnimatePresence>\n        ),\n        [children, isOpen],\n    );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SAASC,6BAA6B,QAAQ,4BAA4B;AAa1E,MAAMC,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KACvEJ,OAAO,CACH,mBACID,KAAA,CAAAM,aAAA,CAACP,eAAe;EAACQ,OAAO,EAAE;AAAM,gBAC5BP,KAAA,CAAAM,aAAA,CAACJ,6BAA6B;EAC1BM,OAAO,EAAE;IAAEC,MAAM,EAAEJ,MAAM,GAAG,MAAM,GAAG;EAAM,CAAE;EAC7CK,UAAU,EAAE;IAAEC,QAAQ,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAQ;AAAE,GAE5CR,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,CACrB,CAAC;AAELF,iBAAiB,CAACU,WAAW,GAAG,mBAAmB;AAEnD,eAAeV,iBAAiB","ignoreList":[]}
+{"version":3,"file":"ExpandableContent.js","names":["AnimatePresence","React","useMemo","StyledMotionExpandableContent","ExpandableContent","children","isOpen","startDelay","createElement","initial","animate","height","transition","duration","type","delay","displayName"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n    /**\n     * The children that should be animated.\n     */\n    children: ReactNode;\n    /**\n     * An optional start delay.\n     */\n    startDelay?: number;\n    /**\n     * Whether the content is expanded.\n     */\n    isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen, startDelay }) =>\n    useMemo(\n        () => (\n            <AnimatePresence initial={false}>\n                <StyledMotionExpandableContent\n                    animate={{ height: isOpen ? 'auto' : '0px' }}\n                    transition={{ duration: 0.2, type: 'tween', delay: isOpen ? startDelay : 0 }}\n                >\n                    {children}\n                </StyledMotionExpandableContent>\n            </AnimatePresence>\n        ),\n        [children, isOpen, startDelay],\n    );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAAmBC,OAAO,QAAQ,OAAO;AACrD,SAASC,6BAA6B,QAAQ,4BAA4B;AAiB1E,MAAMC,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAW,CAAC,KACnFL,OAAO,CACH,mBACID,KAAA,CAAAO,aAAA,CAACR,eAAe;EAACS,OAAO,EAAE;AAAM,gBAC5BR,KAAA,CAAAO,aAAA,CAACL,6BAA6B;EAC1BO,OAAO,EAAE;IAAEC,MAAM,EAAEL,MAAM,GAAG,MAAM,GAAG;EAAM,CAAE;EAC7CM,UAAU,EAAE;IAAEC,QAAQ,EAAE,GAAG;IAAEC,IAAI,EAAE,OAAO;IAAEC,KAAK,EAAET,MAAM,GAAGC,UAAU,GAAG;EAAE;AAAE,GAE5EF,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,EAAEC,UAAU,CACjC,CAAC;AAELH,iBAAiB,CAACY,WAAW,GAAG,mBAAmB;AAEnD,eAAeZ,iBAAiB","ignoreList":[]}

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

@@ -1,5 +1,5 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { StyledFilter, StyledFilterHead, StyledFilterHeadline, StyledFilterIcon, StyledFilterSearch } from './Filter.styles';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { StyledFilter, StyledFilterContentWrapper, StyledFilterHead, StyledFilterHeadline, StyledFilterIcon, StyledFilterSearch, StyledMotionFilterBackground } from './Filter.styles';
 import ExpandableContent from '../expandable-content/ExpandableContent';
 import Icon from '../icon/Icon';
 import FilterContent from './filter-content/FIlterContent';
@@ -14,6 +14,14 @@ const Filter = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isSearchActive, setIsSearchActive] = useState(false);
+  const [backgroundDistance, setBackgroundDistance] = useState(0);
+  const [backgroundCoordinates, setBackgroundCoordinates] = useState({
+    top: 0,
+    left: 0
+  });
+  const contentRef = useRef(null);
+  const iconRef = useRef(null);
+  const filterRef = useRef(null);
   const contextMenuRef = useRef(null);
   const type = useMemo(() => {
     if (filterButtonConfig && !searchConfig && !sortConfig) {
@@ -66,12 +74,45 @@ const Filter = /*#__PURE__*/forwardRef(({
       handleShow();
     }
   }, [handleHide, handleShow, isOpen]);
+  useEffect(() => {
+    if (headline && iconRef.current && contentRef.current && filterRef.current) {
+      const iconRect = iconRef.current.getBoundingClientRect();
+      const filterRect = filterRef.current.getBoundingClientRect();
+      const contentRect = contentRef.current.getBoundingClientRect();
+      const relativeTop = iconRect.bottom - filterRect.top;
+      const relativeLeft = iconRect.left - filterRect.left;
+      setBackgroundDistance(contentRect.top - iconRect.bottom);
+      setBackgroundCoordinates({
+        top: relativeTop,
+        left: relativeLeft
+      });
+    } else {
+      setBackgroundDistance(0);
+      setBackgroundCoordinates({
+        top: 0,
+        left: 0
+      });
+    }
+  }, [headline]);
   const iconElement = useMemo(() => /*#__PURE__*/React.createElement(StyledFilterIcon, {
-    onClick: handleIconClick
+    onClick: handleIconClick,
+    $isOpen: isOpen,
+    ref: iconRef
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: icons,
     size: 18
-  })), [handleIconClick, icons]);
+  })), [handleIconClick, icons, isOpen]);
+  const backgroundElement = useMemo(() => /*#__PURE__*/React.createElement(StyledMotionFilterBackground, {
+    $top: backgroundCoordinates.top,
+    $left: backgroundCoordinates.left,
+    animate: {
+      height: isOpen ? `${backgroundDistance}px` : 0
+    },
+    transition: {
+      duration: 0.1,
+      delay: isOpen ? 0 : 0.2
+    }
+  }), [backgroundDistance, isOpen, backgroundCoordinates]);
   const sortItems = useMemo(() => {
     if (!sortConfig) {
       return [];
@@ -94,9 +135,11 @@ const Filter = /*#__PURE__*/forwardRef(({
       })
     }));
   }, [sortConfig]);
-  return useMemo(() => /*#__PURE__*/React.createElement(StyledFilter, null, /*#__PURE__*/React.createElement(StyledFilterHead, null, /*#__PURE__*/React.createElement(StyledFilterHeadline, {
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledFilter, {
+    ref: filterRef
+  }, /*#__PURE__*/React.createElement(StyledFilterHead, null, /*#__PURE__*/React.createElement(StyledFilterHeadline, {
     isSearchActive: isSearchActive
-  }, headline), [FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && iconElement, type === FilterType.ONLY_SEARCH && searchConfig && /*#__PURE__*/React.createElement(StyledFilterSearch, null, /*#__PURE__*/React.createElement(SearchInput, {
+  }, headline), [FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/React.createElement(React.Fragment, null, iconElement, backgroundDistance > 0 && backgroundElement), type === FilterType.ONLY_SEARCH && searchConfig && /*#__PURE__*/React.createElement(StyledFilterSearch, null, /*#__PURE__*/React.createElement(SearchInput, {
     onActiveChange: isActive => {
       setIsSearchActive(isActive);
       setIsOpen(isActive);
@@ -107,13 +150,16 @@ const Filter = /*#__PURE__*/forwardRef(({
   })), type === FilterType.ONLY_SORT && sortConfig && /*#__PURE__*/React.createElement(ContextMenu, {
     ref: contextMenuRef,
     items: sortItems
-  }, iconElement)), [FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/React.createElement(ExpandableContent, {
-    isOpen: isOpen
+  }, iconElement)), [FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && /*#__PURE__*/React.createElement(StyledFilterContentWrapper, {
+    ref: contentRef
+  }, /*#__PURE__*/React.createElement(ExpandableContent, {
+    isOpen: isOpen,
+    startDelay: backgroundDistance > 0 ? 0.1 : 0
   }, /*#__PURE__*/React.createElement(FilterContent, {
     searchConfig: searchConfig,
     filterButtonConfig: filterButtonConfig,
     sortConfig: sortConfig
-  }))), [isSearchActive, headline, type, iconElement, searchConfig, sortConfig, sortItems, isOpen, filterButtonConfig]);
+  })))), [isSearchActive, headline, type, iconElement, backgroundDistance, backgroundElement, searchConfig, sortConfig, sortItems, isOpen, filterButtonConfig]);
 });
 Filter.displayName = 'Filter';
 export default Filter;

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

@@ -1 +1 @@
-{"version":3,"file":"Filter.js","names":["React","forwardRef","useCallback","useImperativeHandle","useMemo","useRef","useState","StyledFilter","StyledFilterHead","StyledFilterHeadline","StyledFilterIcon","StyledFilterSearch","ExpandableContent","Icon","FilterContent","FilterType","SearchInput","ContextMenu","Filter","headline","searchConfig","sortConfig","filterButtonConfig","ref","isOpen","setIsOpen","isSearchActive","setIsSearchActive","contextMenuRef","type","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","MULTIPLE","icons","handleHide","current","hide","handleShow","show","handleIconClick","iconElement","createElement","onClick","size","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","includes","onActiveChange","isActive","value","searchValue","onChange","ev","onSearchChange","target","displayName"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    useCallback,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledFilter,\n    StyledFilterHead,\n    StyledFilterHeadline,\n    StyledFilterIcon,\n    StyledFilterSearch,\n} from './Filter.styles';\nimport ExpandableContent from '../expandable-content/ExpandableContent';\nimport Icon from '../icon/Icon';\nimport FilterContent from './filter-content/FIlterContent';\nimport {\n    FilterButtonConfig,\n    FilterRef,\n    FilterType,\n    SearchConfig,\n    SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu, { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu';\n\nexport type FilterProps = {\n    headline: string;\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n    ({ headline, searchConfig, sortConfig, filterButtonConfig }, ref) => {\n        const [isOpen, setIsOpen] = useState(false);\n        const [isSearchActive, setIsSearchActive] = useState(false);\n\n        const contextMenuRef = useRef<ContextMenuRef>(null);\n\n        const type = useMemo(() => {\n            if (filterButtonConfig && !searchConfig && !sortConfig) {\n                return FilterType.ONLY_FILTER;\n            }\n\n            if (!filterButtonConfig && !searchConfig && sortConfig) {\n                return FilterType.ONLY_SORT;\n            }\n\n            if (!filterButtonConfig && searchConfig && !sortConfig) {\n                return FilterType.ONLY_SEARCH;\n            }\n\n            return FilterType.MULTIPLE;\n        }, [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        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        const handleShow = useCallback(() => {\n            setIsOpen(true);\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        }, [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        const iconElement = useMemo(\n            () => (\n                <StyledFilterIcon onClick={handleIconClick}>\n                    <Icon icons={icons} size={18} />\n                </StyledFilterIcon>\n            ),\n            [handleIconClick, icons],\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>\n                    <StyledFilterHead>\n                        <StyledFilterHeadline isSearchActive={isSearchActive}>\n                            {headline}\n                        </StyledFilterHeadline>\n                        {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) &&\n                            iconElement}\n                        {type === FilterType.ONLY_SEARCH && searchConfig && (\n                            <StyledFilterSearch>\n                                <SearchInput\n                                    onActiveChange={(isActive) => {\n                                        setIsSearchActive(isActive);\n                                        setIsOpen(isActive);\n                                    }}\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                    </StyledFilterHead>\n                    {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                        <ExpandableContent isOpen={isOpen}>\n                            <FilterContent\n                                searchConfig={searchConfig}\n                                filterButtonConfig={filterButtonConfig}\n                                sortConfig={sortConfig}\n                            />\n                        </ExpandableContent>\n                    )}\n                </StyledFilter>\n            ),\n            [\n                isSearchActive,\n                headline,\n                type,\n                iconElement,\n                searchConfig,\n                sortConfig,\n                sortItems,\n                isOpen,\n                filterButtonConfig,\n            ],\n        );\n    },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":"AAAA,OAAOA,KAAK,IACRC,UAAU,EACVC,WAAW,EACXC,mBAAmB,EACnBC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SACIC,YAAY,EACZC,gBAAgB,EAChBC,oBAAoB,EACpBC,gBAAgB,EAChBC,kBAAkB,QACf,iBAAiB;AACxB,OAAOC,iBAAiB,MAAM,yCAAyC;AACvE,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,aAAa,MAAM,gCAAgC;AAC1D,SAGIC,UAAU,QAGP,oBAAoB;AAC3B,OAAOC,WAAW,MAAM,6BAA6B;AACrD,OAAOC,WAAW,MAA2C,6BAA6B;AAS1F,MAAMC,MAAM,gBAAGjB,UAAU,CACrB,CAAC;EAAEkB,QAAQ;EAAEC,YAAY;EAAEC,UAAU;EAAEC;AAAmB,CAAC,EAAEC,GAAG,KAAK;EACjE,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAM,CAACoB,cAAc,EAAEC,iBAAiB,CAAC,GAAGrB,QAAQ,CAAC,KAAK,CAAC;EAE3D,MAAMsB,cAAc,GAAGvB,MAAM,CAAiB,IAAI,CAAC;EAEnD,MAAMwB,IAAI,GAAGzB,OAAO,CAAC,MAAM;IACvB,IAAIkB,kBAAkB,IAAI,CAACF,YAAY,IAAI,CAACC,UAAU,EAAE;MACpD,OAAON,UAAU,CAACe,WAAW;IACjC;IAEA,IAAI,CAACR,kBAAkB,IAAI,CAACF,YAAY,IAAIC,UAAU,EAAE;MACpD,OAAON,UAAU,CAACgB,SAAS;IAC/B;IAEA,IAAI,CAACT,kBAAkB,IAAIF,YAAY,IAAI,CAACC,UAAU,EAAE;MACpD,OAAON,UAAU,CAACiB,WAAW;IACjC;IAEA,OAAOjB,UAAU,CAACkB,QAAQ;EAC9B,CAAC,EAAE,CAACX,kBAAkB,EAAEF,YAAY,EAAEC,UAAU,CAAC,CAAC;EAElD,MAAMa,KAAK,GAAG9B,OAAO,CAAC,MAAM;IACxB,QAAQyB,IAAI;MACR,KAAKd,UAAU,CAACe,WAAW;QACvB,OAAO,CAAC,cAAc,CAAC;MAC3B,KAAKf,UAAU,CAACgB,SAAS;QACrB,OAAO,CAAC,2BAA2B,CAAC;MACxC;QACI,OAAO,CAAC,cAAc,CAAC;IAC/B;EACJ,CAAC,EAAE,CAACF,IAAI,CAAC,CAAC;EAEV,MAAMM,UAAU,GAAGjC,WAAW,CAAC,MAAM;IACjCuB,SAAS,CAAC,KAAK,CAAC;IAEhB,IAAII,IAAI,KAAKd,UAAU,CAACgB,SAAS,IAAIH,cAAc,CAACQ,OAAO,EAAE;MACzDR,cAAc,CAACQ,OAAO,CAACC,IAAI,CAAC,CAAC;IACjC;IAEA,IAAIR,IAAI,KAAKd,UAAU,CAACiB,WAAW,EAAE;MACjCL,iBAAiB,CAAC,KAAK,CAAC;IAC5B;EACJ,CAAC,EAAE,CAACE,IAAI,CAAC,CAAC;EAEV,MAAMS,UAAU,GAAGpC,WAAW,CAAC,MAAM;IACjCuB,SAAS,CAAC,IAAI,CAAC;IAEf,IAAII,IAAI,KAAKd,UAAU,CAACgB,SAAS,IAAIH,cAAc,CAACQ,OAAO,EAAE;MACzDR,cAAc,CAACQ,OAAO,CAACC,IAAI,CAAC,CAAC;IACjC;IAEA,IAAIR,IAAI,KAAKd,UAAU,CAACiB,WAAW,EAAE;MACjCL,iBAAiB,CAAC,IAAI,CAAC;IAC3B;EACJ,CAAC,EAAE,CAACE,IAAI,CAAC,CAAC;EAEV1B,mBAAmB,CACfoB,GAAG,EACH,OAAO;IACHc,IAAI,EAAEF,UAAU;IAChBI,IAAI,EAAED;EACV,CAAC,CAAC,EACF,CAACH,UAAU,EAAEG,UAAU,CAC3B,CAAC;EAED,MAAME,eAAe,GAAGtC,WAAW,CAAC,MAAM;IACtC,IAAIsB,MAAM,EAAE;MACRW,UAAU,CAAC,CAAC;IAChB,CAAC,MAAM;MACHG,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EAAE,CAACH,UAAU,EAAEG,UAAU,EAAEd,MAAM,CAAC,CAAC;EAEpC,MAAMiB,WAAW,GAAGrC,OAAO,CACvB,mBACIJ,KAAA,CAAA0C,aAAA,CAAChC,gBAAgB;IAACiC,OAAO,EAAEH;EAAgB,gBACvCxC,KAAA,CAAA0C,aAAA,CAAC7B,IAAI;IAACqB,KAAK,EAAEA,KAAM;IAACU,IAAI,EAAE;EAAG,CAAE,CACjB,CACrB,EACD,CAACJ,eAAe,EAAEN,KAAK,CAC3B,CAAC;EAED,MAAMW,SAA4B,GAAGzC,OAAO,CAAC,MAAM;IAC/C,IAAI,CAACiB,UAAU,EAAE;MACb,OAAO,EAAE;IACb;IAEA,MAAM;MAAEyB,YAAY;MAAEC;IAAa,CAAC,GAAG1B,UAAU;IAEjD,OAAOA,UAAU,CAAC2B,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;MAClChB,KAAK,EAAEgB,EAAE,KAAKJ,YAAY,CAACI,EAAE,GAAG,CAAC,qBAAqB,CAAC,GAAG,EAAE;MAC5DP,OAAO,EAAEA,CAAA,KAAMI,YAAY,CAAC;QAAEI,IAAI;QAAED;MAAG,CAAC;IAC5C,CAAC,CAAC,CAAC;EACP,CAAC,EAAE,CAAC7B,UAAU,CAAC,CAAC;EAEhB,OAAOjB,OAAO,CACV,mBACIJ,KAAA,CAAA0C,aAAA,CAACnC,YAAY,qBACTP,KAAA,CAAA0C,aAAA,CAAClC,gBAAgB,qBACbR,KAAA,CAAA0C,aAAA,CAACjC,oBAAoB;IAACiB,cAAc,EAAEA;EAAe,GAChDP,QACiB,CAAC,EACtB,CAACJ,UAAU,CAACkB,QAAQ,EAAElB,UAAU,CAACe,WAAW,CAAC,CAACyB,QAAQ,CAAC1B,IAAI,CAAC,IACzDY,WAAW,EACdZ,IAAI,KAAKd,UAAU,CAACiB,WAAW,IAAIZ,YAAY,iBAC5CpB,KAAA,CAAA0C,aAAA,CAAC/B,kBAAkB,qBACfX,KAAA,CAAA0C,aAAA,CAAC1B,WAAW;IACRwC,cAAc,EAAGC,QAAQ,IAAK;MAC1B9B,iBAAiB,CAAC8B,QAAQ,CAAC;MAC3BhC,SAAS,CAACgC,QAAQ,CAAC;IACvB,CAAE;IACFA,QAAQ,EAAE/B,cAAe;IACzBgC,KAAK,EAAEtC,YAAY,CAACuC,WAAY;IAChCC,QAAQ,EAAGC,EAAE,IAAKzC,YAAY,CAAC0C,cAAc,CAACD,EAAE,CAACE,MAAM,CAACL,KAAK;EAAE,CAClE,CACe,CACvB,EACA7B,IAAI,KAAKd,UAAU,CAACgB,SAAS,IAAIV,UAAU,iBACxCrB,KAAA,CAAA0C,aAAA,CAACzB,WAAW;IAACM,GAAG,EAAEK,cAAe;IAACoB,KAAK,EAAEH;EAAU,GAC9CJ,WACQ,CAEH,CAAC,EAClB,CAAC1B,UAAU,CAACkB,QAAQ,EAAElB,UAAU,CAACe,WAAW,CAAC,CAACyB,QAAQ,CAAC1B,IAAI,CAAC,iBACzD7B,KAAA,CAAA0C,aAAA,CAAC9B,iBAAiB;IAACY,MAAM,EAAEA;EAAO,gBAC9BxB,KAAA,CAAA0C,aAAA,CAAC5B,aAAa;IACVM,YAAY,EAAEA,YAAa;IAC3BE,kBAAkB,EAAEA,kBAAmB;IACvCD,UAAU,EAAEA;EAAW,CAC1B,CACc,CAEb,CACjB,EACD,CACIK,cAAc,EACdP,QAAQ,EACRU,IAAI,EACJY,WAAW,EACXrB,YAAY,EACZC,UAAU,EACVwB,SAAS,EACTrB,MAAM,EACNF,kBAAkB,CAE1B,CAAC;AACL,CACJ,CAAC;AAEDJ,MAAM,CAAC8C,WAAW,GAAG,QAAQ;AAE7B,eAAe9C,MAAM","ignoreList":[]}
+{"version":3,"file":"Filter.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","StyledFilter","StyledFilterContentWrapper","StyledFilterHead","StyledFilterHeadline","StyledFilterIcon","StyledFilterSearch","StyledMotionFilterBackground","ExpandableContent","Icon","FilterContent","FilterType","SearchInput","ContextMenu","Filter","headline","searchConfig","sortConfig","filterButtonConfig","ref","isOpen","setIsOpen","isSearchActive","setIsSearchActive","backgroundDistance","setBackgroundDistance","backgroundCoordinates","setBackgroundCoordinates","top","left","contentRef","iconRef","filterRef","contextMenuRef","type","ONLY_FILTER","ONLY_SORT","ONLY_SEARCH","MULTIPLE","icons","handleHide","current","hide","handleShow","show","handleIconClick","iconRect","getBoundingClientRect","filterRect","contentRect","relativeTop","bottom","relativeLeft","iconElement","createElement","onClick","$isOpen","size","backgroundElement","$top","$left","animate","height","transition","duration","delay","sortItems","selectedItem","onSortChange","items","map","id","text","key","toString","isSelected","includes","Fragment","onActiveChange","isActive","value","searchValue","onChange","ev","onSearchChange","target","startDelay","displayName"],"sources":["../../../../src/components/filter/Filter.tsx"],"sourcesContent":["import React, {\n    forwardRef,\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    StyledFilterIcon,\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    FilterButtonConfig,\n    FilterRef,\n    FilterType,\n    SearchConfig,\n    SortConfig,\n} from '../../types/filter';\nimport SearchInput from '../search-input/SearchInput';\nimport ContextMenu, { ContextMenuItem, ContextMenuRef } from '../context-menu/ContextMenu';\n\nexport type FilterProps = {\n    headline: string;\n    searchConfig?: SearchConfig;\n    filterButtonConfig?: FilterButtonConfig;\n    sortConfig?: SortConfig;\n};\n\nconst Filter = forwardRef<FilterRef, FilterProps>(\n    ({ headline, searchConfig, sortConfig, filterButtonConfig }, ref) => {\n        const [isOpen, setIsOpen] = useState(false);\n        const [isSearchActive, setIsSearchActive] = 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\n        const contextMenuRef = useRef<ContextMenuRef>(null);\n\n        const type = useMemo(() => {\n            if (filterButtonConfig && !searchConfig && !sortConfig) {\n                return FilterType.ONLY_FILTER;\n            }\n\n            if (!filterButtonConfig && !searchConfig && sortConfig) {\n                return FilterType.ONLY_SORT;\n            }\n\n            if (!filterButtonConfig && searchConfig && !sortConfig) {\n                return FilterType.ONLY_SEARCH;\n            }\n\n            return FilterType.MULTIPLE;\n        }, [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        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        const handleShow = useCallback(() => {\n            setIsOpen(true);\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        }, [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 onClick={handleIconClick} $isOpen={isOpen} ref={iconRef}>\n                    <Icon icons={icons} size={18} />\n                </StyledFilterIcon>\n            ),\n            [handleIconClick, icons, isOpen],\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                        <StyledFilterHeadline isSearchActive={isSearchActive}>\n                            {headline}\n                        </StyledFilterHeadline>\n                        {[FilterType.MULTIPLE, FilterType.ONLY_FILTER].includes(type) && (\n                            <>\n                                {iconElement}\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                                    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                    </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                                    searchConfig={searchConfig}\n                                    filterButtonConfig={filterButtonConfig}\n                                    sortConfig={sortConfig}\n                                />\n                            </ExpandableContent>\n                        </StyledFilterContentWrapper>\n                    )}\n                </StyledFilter>\n            ),\n            [\n                isSearchActive,\n                headline,\n                type,\n                iconElement,\n                backgroundDistance,\n                backgroundElement,\n                searchConfig,\n                sortConfig,\n                sortItems,\n                isOpen,\n                filterButtonConfig,\n            ],\n        );\n    },\n);\n\nFilter.displayName = 'Filter';\n\nexport default Filter;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/filter/Filter.styles.js

@@ -1,4 +1,5 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import { motion } from 'motion/react';
 export const StyledFilter = styled.div``;
 export const StyledFilterHead = styled.div`
     display: flex;
@@ -31,10 +32,34 @@ export const StyledFilterIcon = styled.div`
     align-items: center;
     justify-content: center;
 
+    ${({
+  $isOpen,
+  theme
+}) => $isOpen && css`
+            background-color: ${theme['100']};
+        `}
+
     &:hover {
         background-color: ${({
   theme
 }) => theme['100']};
     }
 `;
+export const StyledMotionFilterBackground = styled(motion.div)`
+    width: 30px;
+
+    position: absolute;
+
+    top: ${({
+  $top
+}) => $top}px;
+    left: ${({
+  $left
+}) => $left}px;
+
+    background-color: ${({
+  theme
+}) => theme['100']};
+`;
+export const StyledFilterContentWrapper = styled.div``;
 //# sourceMappingURL=Filter.styles.js.map

package/lib/esm/components/filter/Filter.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Filter.styles.js","names":["styled","StyledFilter","div","StyledFilterHead","StyledFilterHeadline","h1","isSearchActive","StyledFilterSearch","StyledFilterIcon","theme"],"sources":["../../../../src/components/filter/Filter.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledFilter = styled.div``;\n\nexport const StyledFilterHead = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 20px;\n\n    position: relative;\n`;\n\ntype StyledFilterHeadlineProps = WithTheme<{ isSearchActive: boolean }>;\n\nexport const StyledFilterHeadline = styled.h1<StyledFilterHeadlineProps>`\n    margin: 0;\n\n    opacity: ${({ isSearchActive }) => (isSearchActive ? 0 : 1)};\n\n    transition: opacity 0.3s;\n`;\n\nexport const StyledFilterSearch = styled.div`\n    position: absolute;\n    width: 100%;\n`;\n\ntype StyledFilterIconProps = WithTheme<unknown>;\n\nexport const StyledFilterIcon = styled.div<StyledFilterIconProps>`\n    cursor: pointer;\n\n    width: 30px;\n    height: 30px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:hover {\n        background-color: ${({ theme }) => theme['100']};\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,YAAY,GAAGD,MAAM,CAACE,GAAG,EAAE;AAExC,OAAO,MAAMC,gBAAgB,GAAGH,MAAM,CAACE,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,oBAAoB,GAAGJ,MAAM,CAACK,EAA6B;AACxE;AACA;AACA,eAAe,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,CAAC,GAAG,CAAE;AAC/D;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAGP,MAAM,CAACE,GAAG;AAC5C;AACA;AACA,CAAC;AAID,OAAO,MAAMM,gBAAgB,GAAGR,MAAM,CAACE,GAA0B;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,CAAC;EAAEO;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvD;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Filter.styles.js","names":["styled","css","motion","StyledFilter","div","StyledFilterHead","StyledFilterHeadline","h1","isSearchActive","StyledFilterSearch","StyledFilterIcon","$isOpen","theme","StyledMotionFilterBackground","$top","$left","StyledFilterContentWrapper"],"sources":["../../../../src/components/filter/Filter.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { motion } from 'motion/react';\n\nexport const StyledFilter = styled.div``;\n\nexport const StyledFilterHead = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 20px;\n\n    position: relative;\n`;\n\ntype StyledFilterHeadlineProps = WithTheme<{ isSearchActive: boolean }>;\n\nexport const StyledFilterHeadline = styled.h1<StyledFilterHeadlineProps>`\n    margin: 0;\n\n    opacity: ${({ isSearchActive }) => (isSearchActive ? 0 : 1)};\n\n    transition: opacity 0.3s;\n`;\n\nexport const StyledFilterSearch = styled.div`\n    position: absolute;\n    width: 100%;\n`;\n\ntype StyledFilterIconProps = WithTheme<{\n    $isOpen: boolean;\n}>;\n\nexport const StyledFilterIcon = styled.div<StyledFilterIconProps>`\n    cursor: pointer;\n\n    width: 30px;\n    height: 30px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    ${({ $isOpen, theme }) =>\n        $isOpen &&\n        css`\n            background-color: ${theme['100']};\n        `}\n\n    &:hover {\n        background-color: ${({ theme }) => theme['100']};\n    }\n`;\n\ntype StyledMotionFilterBackgroundProps = WithTheme<{ $top: number; $left: number }>;\n\nexport const StyledMotionFilterBackground = styled(motion.div)<StyledMotionFilterBackgroundProps>`\n    width: 30px;\n\n    position: absolute;\n\n    top: ${({ $top }) => $top}px;\n    left: ${({ $left }) => $left}px;\n\n    background-color: ${({ theme }) => theme['100']};\n`;\n\nexport const StyledFilterContentWrapper = styled.div``;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,MAAM,QAAQ,cAAc;AAErC,OAAO,MAAMC,YAAY,GAAGH,MAAM,CAACI,GAAG,EAAE;AAExC,OAAO,MAAMC,gBAAgB,GAAGL,MAAM,CAACI,GAAG;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,oBAAoB,GAAGN,MAAM,CAACO,EAA6B;AACxE;AACA;AACA,eAAe,CAAC;EAAEC;AAAe,CAAC,KAAMA,cAAc,GAAG,CAAC,GAAG,CAAE;AAC/D;AACA;AACA,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAGT,MAAM,CAACI,GAAG;AAC5C;AACA;AACA,CAAC;AAMD,OAAO,MAAMM,gBAAgB,GAAGV,MAAM,CAACI,GAA0B;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEO,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACPV,GAAG;AACX,gCAAgCW,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT;AACA;AACA,4BAA4B,CAAC;EAAEA;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACvD;AACA,CAAC;AAID,OAAO,MAAMC,4BAA4B,GAAGb,MAAM,CAACE,MAAM,CAACE,GAAG,CAAoC;AACjG;AACA;AACA;AACA;AACA,WAAW,CAAC;EAAEU;AAAK,CAAC,KAAKA,IAAI;AAC7B,YAAY,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK;AAChC;AACA,wBAAwB,CAAC;EAAEH;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAED,OAAO,MAAMI,0BAA0B,GAAGhB,MAAM,CAACI,GAAG,EAAE","ignoreList":[]}

package/lib/esm/components/search-input/SearchInput.js

@@ -99,8 +99,7 @@ const SearchInput = ({
     key: "icon",
     color: iconColor,
     icons: isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
-    size: 18
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick
   }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapper, null, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, /*#__PURE__*/React.createElement(StyledMotionSearchInputIconWrapperContent, {
@@ -123,8 +122,7 @@ const SearchInput = ({
     key: "icon",
     color: iconColor,
     icons: isSearchInputActive ? ['fa fa-arrow-left'] : ['fa fa-search'],
-    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick,
-    size: 18
+    onClick: isSearchInputActive ? handleBackIconClick : handleSearchIconClick
   })))), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, isSearchInputActive && /*#__PURE__*/React.createElement(StyledMotionSearchInputContentWrapper, {

package/lib/esm/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputPseudoElement","useTheme","useElementSize","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","width","widthValue","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","parentWidth","theme","handleBackIconClick","handleSearchIconClick","current","focus","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","onClick","initial","animate","opacity","exit","key","transition","duration","ref","shouldShowClearIcon","position","id","color","icons","leftElement","text","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    shouldUseAbsolutePositioning = false,\n    size = InputSize.Medium,\n    value,\n    width: widthValue,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n    const pseudoRef = useRef<HTMLDivElement>(null);\n\n    const parentWidth = useElementSize(pseudoRef);\n\n    const theme = useTheme() as Theme;\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    const width = useMemo(() => parentWidth?.width ?? widthValue, [parentWidth?.width, widthValue]);\n\n    return (\n        <>\n            <StyledSearchInput\n                className=\"beta-chayns-search-input\"\n                $size={size}\n                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                onClick={() => {\n                    if (shouldUseAbsolutePositioning) {\n                        if (isSearchInputActive) {\n                            handleBackIconClick();\n                        } else {\n                            handleSearchIconClick();\n                        }\n                    }\n                }}\n            >\n                {shouldUseAbsolutePositioning ? (\n                    <AnimatePresence initial={false}>\n                        {isSearchInputActive && (\n                            <StyledMotionSearchInputContentWrapper\n                                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                animate={{ opacity: 1, width }}\n                                exit={{ opacity: 0, width: 0 }}\n                                initial={{ opacity: 0, width: 0 }}\n                                key=\"searchInputContentWrapper\"\n                                transition={{ duration: 0.3 }}\n                            >\n                                <Input\n                                    onChange={onChange}\n                                    onKeyDown={onKeyDown}\n                                    placeholder={placeholder}\n                                    ref={inputRef}\n                                    shouldShowClearIcon\n                                    size={size}\n                                    value={value}\n                                />\n                            </StyledMotionSearchInputContentWrapper>\n                        )}\n                        <StyledMotionSearchInputIconWrapperContent\n                            animate={{ opacity: 1 }}\n                            exit={{ opacity: 0, position: 'absolute' }}\n                            initial={{ opacity: 0 }}\n                            key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                            transition={{ duration: 0.3 }}\n                            id={\n                                isSearchInputActive\n                                    ? 'search-input-backIcon'\n                                    : 'search-input-searchIcon'\n                            }\n                        >\n                            <Icon\n                                key=\"icon\"\n                                color={iconColor}\n                                icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                onClick={\n                                    isSearchInputActive\n                                        ? handleBackIconClick\n                                        : handleSearchIconClick\n                                }\n                                size={18}\n                            />\n                        </StyledMotionSearchInputIconWrapperContent>\n                    </AnimatePresence>\n                ) : (\n                    <>\n                        <StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                <StyledMotionSearchInputIconWrapperContent\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0, position: 'absolute' }}\n                                    initial={{ opacity: 0 }}\n                                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                    transition={{ duration: 0.3 }}\n                                    id={\n                                        isSearchInputActive\n                                            ? 'search-input-backIcon'\n                                            : 'search-input-searchIcon'\n                                    }\n                                >\n                                    <Icon\n                                        key=\"icon\"\n                                        color={iconColor}\n                                        icons={\n                                            isSearchInputActive\n                                                ? ['fa fa-arrow-left']\n                                                : ['fa fa-search']\n                                        }\n                                        onClick={\n                                            isSearchInputActive\n                                                ? handleBackIconClick\n                                                : handleSearchIconClick\n                                        }\n                                        size={18}\n                                    />\n                                </StyledMotionSearchInputIconWrapperContent>\n                            </AnimatePresence>\n                        </StyledMotionSearchInputIconWrapper>\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width: '100%' }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.3 }}\n                                >\n                                    <Input\n                                        key=\"input\"\n                                        leftElement={\n                                            <Icon color={theme.text} icons={['far fa-search']} />\n                                        }\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                        </AnimatePresence>\n                    </>\n                )}\n            </StyledSearchInput>\n            <StyledSearchInputPseudoElement ref={pseudoRef} />\n        </>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAIRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,KAAK,IAAcC,SAAS,QAAQ,gBAAgB;AAC3D,SACIC,qCAAqC,EACrCC,kCAAkC,EAClCC,yCAAyC,EACzCC,iBAAiB,EACjBC,8BAA8B,QAC3B,sBAAsB;AAC7B,SAASC,QAAQ,QAAQ,mBAAmB;AAE5C,SAASC,cAAc,QAAQ,qBAAqB;AA6CpD,MAAMC,WAAiC,GAAGA,CAAC;EACvCC,SAAS;EACTC,QAAQ;EACRC,cAAc;EACdC,QAAQ;EACRC,SAAS;EACTC,WAAW;EACXC,4BAA4B,GAAG,KAAK;EACpCC,IAAI,GAAGhB,SAAS,CAACiB,MAAM;EACvBC,KAAK;EACLC,KAAK,EAAEC;AACX,CAAC,KAAK;EACF,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGzB,QAAQ,CAC1Da,QAAQ,KAAK,OAAOQ,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACK,IAAI,CAAC,CAAC,KAAK,EAAE,CACjE,CAAC;EAED,MAAMC,QAAQ,GAAG5B,MAAM,CAAW,IAAI,CAAC;EACvC,MAAM6B,SAAS,GAAG7B,MAAM,CAAiB,IAAI,CAAC;EAE9C,MAAM8B,WAAW,GAAGnB,cAAc,CAACkB,SAAS,CAAC;EAE7C,MAAME,KAAK,GAAGrB,QAAQ,CAAC,CAAU;EAEjC,MAAMsB,mBAAmB,GAAGnC,WAAW,CAAC,MAAM6B,sBAAsB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;EAEhF,MAAMO,qBAAqB,GAAGpC,WAAW,CAAC,MAAM6B,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;EAEjF5B,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOiB,cAAc,KAAK,UAAU,EAAE;MACtCA,cAAc,CAACU,mBAAmB,CAAC;IACvC;IAEA,IAAIA,mBAAmB,EAAE;MACrBG,QAAQ,CAACM,OAAO,EAAEC,KAAK,CAAC,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACV,mBAAmB,EAAEV,cAAc,CAAC,CAAC;EAEzCjB,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOgB,QAAQ,KAAK,SAAS,EAAE;MAC/BY,sBAAsB,CAACZ,QAAQ,CAAC;IACpC;EACJ,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAMS,KAAK,GAAGxB,OAAO,CAAC,MAAM+B,WAAW,EAAEP,KAAK,IAAIC,UAAU,EAAE,CAACM,WAAW,EAAEP,KAAK,EAAEC,UAAU,CAAC,CAAC;EAE/F,oBACI5B,KAAA,CAAAwC,aAAA,CAAAxC,KAAA,CAAAyC,QAAA,qBACIzC,KAAA,CAAAwC,aAAA,CAAC5B,iBAAiB;IACd8B,SAAS,EAAC,0BAA0B;IACpCC,KAAK,EAAEnB,IAAK;IACZoB,6BAA6B,EAAErB,4BAA6B;IAC5DsB,OAAO,EAAEA,CAAA,KAAM;MACX,IAAItB,4BAA4B,EAAE;QAC9B,IAAIM,mBAAmB,EAAE;UACrBO,mBAAmB,CAAC,CAAC;QACzB,CAAC,MAAM;UACHC,qBAAqB,CAAC,CAAC;QAC3B;MACJ;IACJ;EAAE,GAEDd,4BAA4B,gBACzBvB,KAAA,CAAAwC,aAAA,CAACzC,eAAe;IAAC+C,OAAO,EAAE;EAAM,GAC3BjB,mBAAmB,iBAChB7B,KAAA,CAAAwC,aAAA,CAAC/B,qCAAqC;IAClCmC,6BAA6B,EAAErB,4BAA6B;IAC5DwB,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAErB;IAAM,CAAE;IAC/BsB,IAAI,EAAE;MAAED,OAAO,EAAE,CAAC;MAAErB,KAAK,EAAE;IAAE,CAAE;IAC/BmB,OAAO,EAAE;MAAEE,OAAO,EAAE,CAAC;MAAErB,KAAK,EAAE;IAAE,CAAE;IAClCuB,GAAG,EAAC,2BAA2B;IAC/BC,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAE9BpD,KAAA,CAAAwC,aAAA,CAACjC,KAAK;IACFa,QAAQ,EAAEA,QAAS;IACnBC,SAAS,EAAEA,SAAU;IACrBC,WAAW,EAAEA,WAAY;IACzB+B,GAAG,EAAErB,QAAS;IACdsB,mBAAmB;IACnB9B,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA;EAAM,CAChB,CACkC,CAC1C,eACD1B,KAAA,CAAAwC,aAAA,CAAC7B,yCAAyC;IACtCoC,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,IAAI,EAAE;MAAED,OAAO,EAAE,CAAC;MAAEO,QAAQ,EAAE;IAAW,CAAE;IAC3CT,OAAO,EAAE;MAAEE,OAAO,EAAE;IAAE,CAAE;IACxBE,GAAG,EAAErB,mBAAmB,GAAG,UAAU,GAAG,YAAa;IACrDsB,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI,CAAE;IAC9BI,EAAE,EACE3B,mBAAmB,GACb,uBAAuB,GACvB;EACT,gBAED7B,KAAA,CAAAwC,aAAA,CAAClC,IAAI;IACD4C,GAAG,EAAC,MAAM;IACVO,KAAK,EAAExC,SAAU;IACjByC,KAAK,EAAE7B,mBAAmB,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,cAAc,CAAE;IAChEgB,OAAO,EACHhB,mBAAmB,GACbO,mBAAmB,GACnBC,qBACT;IACDb,IAAI,EAAE;EAAG,CACZ,CACsC,CAC9B,CAAC,gBAElBxB,KAAA,CAAAwC,aAAA,CAAAxC,KAAA,CAAAyC,QAAA,qBACIzC,KAAA,CAAAwC,aAAA,CAAC9B,kCAAkC,qBAC/BV,KAAA,CAAAwC,aAAA,CAACzC,eAAe;IAAC+C,OAAO,EAAE;EAAM,gBAC5B9C,KAAA,CAAAwC,aAAA,CAAC7B,yCAAyC;IACtCoC,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxBC,IAAI,EAAE;MAAED,OAAO,EAAE,CAAC;MAAEO,QAAQ,EAAE;IAAW,CAAE;IAC3CT,OAAO,EAAE;MAAEE,OAAO,EAAE;IAAE,CAAE;IACxBE,GAAG,EAAErB,mBAAmB,GAAG,UAAU,GAAG,YAAa;IACrDsB,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI,CAAE;IAC9BI,EAAE,EACE3B,mBAAmB,GACb,uBAAuB,GACvB;EACT,gBAED7B,KAAA,CAAAwC,aAAA,CAAClC,IAAI;IACD4C,GAAG,EAAC,MAAM;IACVO,KAAK,EAAExC,SAAU;IACjByC,KAAK,EACD7B,mBAAmB,GACb,CAAC,kBAAkB,CAAC,GACpB,CAAC,cAAc,CACxB;IACDgB,OAAO,EACHhB,mBAAmB,GACbO,mBAAmB,GACnBC,qBACT;IACDb,IAAI,EAAE;EAAG,CACZ,CACsC,CAC9B,CACe,CAAC,eACrCxB,KAAA,CAAAwC,aAAA,CAACzC,eAAe;IAAC+C,OAAO,EAAE;EAAM,GAC3BjB,mBAAmB,iBAChB7B,KAAA,CAAAwC,aAAA,CAAC/B,qCAAqC;IAClCmC,6BAA6B,EAAErB,4BAA6B;IAC5DwB,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAErB,KAAK,EAAE;IAAO,CAAE;IACvCsB,IAAI,EAAE;MAAED,OAAO,EAAE,CAAC;MAAErB,KAAK,EAAE;IAAE,CAAE;IAC/BmB,OAAO,EAAE;MAAEE,OAAO,EAAE,CAAC;MAAErB,KAAK,EAAE;IAAE,CAAE;IAClCuB,GAAG,EAAC,2BAA2B;IAC/BC,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAE9BpD,KAAA,CAAAwC,aAAA,CAACjC,KAAK;IACF2C,GAAG,EAAC,OAAO;IACXS,WAAW,eACP3D,KAAA,CAAAwC,aAAA,CAAClC,IAAI;MAACmD,KAAK,EAAEtB,KAAK,CAACyB,IAAK;MAACF,KAAK,EAAE,CAAC,eAAe;IAAE,CAAE,CACvD;IACDtC,QAAQ,EAAEA,QAAS;IACnBC,SAAS,EAAEA,SAAU;IACrBC,WAAW,EAAEA,WAAY;IACzB+B,GAAG,EAAErB,QAAS;IACdsB,mBAAmB;IACnB9B,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA;EAAM,CAChB,CACkC,CAE9B,CACnB,CAES,CAAC,eACpB1B,KAAA,CAAAwC,aAAA,CAAC3B,8BAA8B;IAACwC,GAAG,EAAEpB;EAAU,CAAE,CACnD,CAAC;AAEX,CAAC;AAEDjB,WAAW,CAAC6C,WAAW,GAAG,aAAa;AAEvC,eAAe7C,WAAW","ignoreList":[]}
+{"version":3,"file":"SearchInput.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","Icon","Input","InputSize","StyledMotionSearchInputContentWrapper","StyledMotionSearchInputIconWrapper","StyledMotionSearchInputIconWrapperContent","StyledSearchInput","StyledSearchInputPseudoElement","useTheme","useElementSize","SearchInput","iconColor","isActive","onActiveChange","onChange","onKeyDown","placeholder","shouldUseAbsolutePositioning","size","Medium","value","width","widthValue","isSearchInputActive","setIsSearchInputActive","trim","inputRef","pseudoRef","parentWidth","theme","handleBackIconClick","handleSearchIconClick","current","focus","createElement","Fragment","className","$size","$shouldUseAbsolutePositioning","onClick","initial","animate","opacity","exit","key","transition","duration","ref","shouldShowClearIcon","position","id","color","icons","leftElement","text","displayName"],"sources":["../../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../icon/Icon';\nimport Input, { InputRef, InputSize } from '../input/Input';\nimport {\n    StyledMotionSearchInputContentWrapper,\n    StyledMotionSearchInputIconWrapper,\n    StyledMotionSearchInputIconWrapperContent,\n    StyledSearchInput,\n    StyledSearchInputPseudoElement,\n} from './SearchInput.styles';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useElementSize } from '../../hooks/element';\n\nexport type SearchInputProps = {\n    /**\n     * Color of the icon\n     */\n    iconColor?: CSSProperties['color'];\n    /**\n     * Force the active state of the input and override the internal state\n     */\n    isActive?: boolean;\n    /**\n     * Function that is executed when the active state of the input changes\n     */\n    onActiveChange?: (isActive: boolean) => void;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a key is pressed\n     */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether the SearchInput should be positioned absolute.\n     */\n    shouldUseAbsolutePositioning?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * The width of the parent.\n     */\n    width?: number;\n};\n\nconst SearchInput: FC<SearchInputProps> = ({\n    iconColor,\n    isActive,\n    onActiveChange,\n    onChange,\n    onKeyDown,\n    placeholder,\n    shouldUseAbsolutePositioning = false,\n    size = InputSize.Medium,\n    value,\n    width: widthValue,\n}) => {\n    const [isSearchInputActive, setIsSearchInputActive] = useState(\n        isActive ?? (typeof value === 'string' && value.trim() !== ''),\n    );\n\n    const inputRef = useRef<InputRef>(null);\n    const pseudoRef = useRef<HTMLDivElement>(null);\n\n    const parentWidth = useElementSize(pseudoRef);\n\n    const theme = useTheme() as Theme;\n\n    const handleBackIconClick = useCallback(() => setIsSearchInputActive(false), []);\n\n    const handleSearchIconClick = useCallback(() => setIsSearchInputActive(true), []);\n\n    useEffect(() => {\n        if (typeof onActiveChange === 'function') {\n            onActiveChange(isSearchInputActive);\n        }\n\n        if (isSearchInputActive) {\n            inputRef.current?.focus();\n        }\n    }, [isSearchInputActive, onActiveChange]);\n\n    useEffect(() => {\n        if (typeof isActive === 'boolean') {\n            setIsSearchInputActive(isActive);\n        }\n    }, [isActive]);\n\n    const width = useMemo(() => parentWidth?.width ?? widthValue, [parentWidth?.width, widthValue]);\n\n    return (\n        <>\n            <StyledSearchInput\n                className=\"beta-chayns-search-input\"\n                $size={size}\n                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                onClick={() => {\n                    if (shouldUseAbsolutePositioning) {\n                        if (isSearchInputActive) {\n                            handleBackIconClick();\n                        } else {\n                            handleSearchIconClick();\n                        }\n                    }\n                }}\n            >\n                {shouldUseAbsolutePositioning ? (\n                    <AnimatePresence initial={false}>\n                        {isSearchInputActive && (\n                            <StyledMotionSearchInputContentWrapper\n                                $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                animate={{ opacity: 1, width }}\n                                exit={{ opacity: 0, width: 0 }}\n                                initial={{ opacity: 0, width: 0 }}\n                                key=\"searchInputContentWrapper\"\n                                transition={{ duration: 0.3 }}\n                            >\n                                <Input\n                                    onChange={onChange}\n                                    onKeyDown={onKeyDown}\n                                    placeholder={placeholder}\n                                    ref={inputRef}\n                                    shouldShowClearIcon\n                                    size={size}\n                                    value={value}\n                                />\n                            </StyledMotionSearchInputContentWrapper>\n                        )}\n                        <StyledMotionSearchInputIconWrapperContent\n                            animate={{ opacity: 1 }}\n                            exit={{ opacity: 0, position: 'absolute' }}\n                            initial={{ opacity: 0 }}\n                            key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                            transition={{ duration: 0.3 }}\n                            id={\n                                isSearchInputActive\n                                    ? 'search-input-backIcon'\n                                    : 'search-input-searchIcon'\n                            }\n                        >\n                            <Icon\n                                key=\"icon\"\n                                color={iconColor}\n                                icons={isSearchInputActive ? ['fa fa-xmark'] : ['fa fa-search']}\n                                onClick={\n                                    isSearchInputActive\n                                        ? handleBackIconClick\n                                        : handleSearchIconClick\n                                }\n                            />\n                        </StyledMotionSearchInputIconWrapperContent>\n                    </AnimatePresence>\n                ) : (\n                    <>\n                        <StyledMotionSearchInputIconWrapper>\n                            <AnimatePresence initial={false}>\n                                <StyledMotionSearchInputIconWrapperContent\n                                    animate={{ opacity: 1 }}\n                                    exit={{ opacity: 0, position: 'absolute' }}\n                                    initial={{ opacity: 0 }}\n                                    key={isSearchInputActive ? 'backIcon' : 'searchIcon'}\n                                    transition={{ duration: 0.3 }}\n                                    id={\n                                        isSearchInputActive\n                                            ? 'search-input-backIcon'\n                                            : 'search-input-searchIcon'\n                                    }\n                                >\n                                    <Icon\n                                        key=\"icon\"\n                                        color={iconColor}\n                                        icons={\n                                            isSearchInputActive\n                                                ? ['fa fa-arrow-left']\n                                                : ['fa fa-search']\n                                        }\n                                        onClick={\n                                            isSearchInputActive\n                                                ? handleBackIconClick\n                                                : handleSearchIconClick\n                                        }\n                                    />\n                                </StyledMotionSearchInputIconWrapperContent>\n                            </AnimatePresence>\n                        </StyledMotionSearchInputIconWrapper>\n                        <AnimatePresence initial={false}>\n                            {isSearchInputActive && (\n                                <StyledMotionSearchInputContentWrapper\n                                    $shouldUseAbsolutePositioning={shouldUseAbsolutePositioning}\n                                    animate={{ opacity: 1, width: '100%' }}\n                                    exit={{ opacity: 0, width: 0 }}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"searchInputContentWrapper\"\n                                    transition={{ duration: 0.3 }}\n                                >\n                                    <Input\n                                        key=\"input\"\n                                        leftElement={\n                                            <Icon color={theme.text} icons={['far fa-search']} />\n                                        }\n                                        onChange={onChange}\n                                        onKeyDown={onKeyDown}\n                                        placeholder={placeholder}\n                                        ref={inputRef}\n                                        shouldShowClearIcon\n                                        size={size}\n                                        value={value}\n                                    />\n                                </StyledMotionSearchInputContentWrapper>\n                            )}\n                        </AnimatePresence>\n                    </>\n                )}\n            </StyledSearchInput>\n            <StyledSearchInputPseudoElement ref={pseudoRef} />\n        </>\n    );\n};\n\nSearchInput.displayName = 'SearchInput';\n\nexport default SearchInput;\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/expandable-content/ExpandableContent.d.ts

@@ -4,6 +4,10 @@ export type ExpandableContentProps = {
      * The children that should be animated.
      */
     children: ReactNode;
+    /**
+     * An optional start delay.
+     */
+    startDelay?: number;
     /**
      * Whether the content is expanded.
      */

package/lib/types/components/filter/Filter.styles.d.ts

@@ -6,7 +6,16 @@ type StyledFilterHeadlineProps = WithTheme<{
 }>;
 export declare const StyledFilterHeadline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, StyledFilterHeadlineProps>> & string;
 export declare const StyledFilterSearch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledFilterIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
-}>> & string;
+type StyledFilterIconProps = WithTheme<{
+    $isOpen: boolean;
+}>;
+export declare const StyledFilterIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledFilterIconProps>> & string;
+type StyledMotionFilterBackgroundProps = WithTheme<{
+    $top: number;
+    $left: number;
+}>;
+export declare const StyledMotionFilterBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+}, StyledMotionFilterBackgroundProps>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledFilterContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.1276",
+    "version": "5.0.0-beta.1280",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4250bd2256324b87af99202530d127eb57140efb"
+    "gitHead": "4bd3049ffc6d83da1028e71f4c9a57610a9d347e"
 }