@chayns-components/core 5.0.0-beta.173 → 5.0.0-beta.175

package/lib/components/combobox/ComboBox.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _calculate = require("../../utils/calculate");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _ComboBoxItem = _interopRequireDefault(require("./combobox-item/ComboBoxItem"));
 var _ComboBox = require("./ComboBox.styles");
-var _utils = require("./utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -20,13 +20,13 @@ const ComboBox = _ref => {
     selectedItem
   } = _ref;
   const [item, setItem] = (0, _react.useState)();
-  const [isAnimation, setIsAnimation] = (0, _react.useState)(false);
+  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
   const [minWidth, setMinWidth] = (0, _react.useState)(0);
   const [height, setHeight] = (0, _react.useState)(0);
   const ref = (0, _react.useRef)(null);
   const handleClick = (0, _react.useCallback)(event => {
     if (ref.current && !ref.current.contains(event.target)) {
-      setIsAnimation(false);
+      setIsAnimating(false);
     }
   }, [ref]);
   (0, _react.useEffect)(() => {
@@ -41,7 +41,7 @@ const ComboBox = _ref => {
    */
   const handleSetSelectedItem = (0, _react.useCallback)(itemToSelect => {
     setItem(itemToSelect);
-    setIsAnimation(false);
+    setIsAnimating(false);
     if (onSelect) {
       onSelect(itemToSelect);
     }
@@ -57,9 +57,9 @@ const ComboBox = _ref => {
       } = _ref2;
       return text;
     });
-    setHeight((0, _utils.calculateContentHeight)(textArray));
+    setHeight((0, _calculate.calculateContentHeight)(textArray));
     textArray.push(placeholder);
-    setMinWidth((0, _utils.calculateContentWidth)(textArray) + 45);
+    setMinWidth((0, _calculate.calculateContentWidth)(textArray) + 45);
   }, [list, placeholder]);
 
   /**
@@ -91,40 +91,50 @@ const ComboBox = _ref => {
     return items;
   }, [handleSetSelectedItem, list]);
 
+  /**
+   * This function resets the placeholder
+   */
+  const placeholderText = (0, _react.useMemo)(() => {
+    let text = placeholder;
+    if (!selectedItem) {
+      text = placeholder;
+    } else if (item !== null && item !== void 0 && item.text) {
+      text = item.text;
+    }
+    return text;
+  }, [item === null || item === void 0 ? void 0 : item.text, placeholder, selectedItem]);
+
   /**
    * This function opens the content of the combobox
    */
   const handleHeaderClick = () => {
-    setIsAnimation(prevState => !prevState);
+    setIsAnimating(prevState => !prevState);
   };
-  return (0, _react.useMemo)(() => {
-    var _item$text;
-    return /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
-      ref: ref
-    }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxHeader, {
-      minWidth: minWidth,
-      onClick: handleHeaderClick,
-      isOpen: isAnimation
-    }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, null, (_item$text = item === null || item === void 0 ? void 0 : item.text) !== null && _item$text !== void 0 ? _item$text : placeholder), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      icons: ['fa fa-chevron-down']
-    }))), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledMotionComboBoxBody, {
-      height: height,
-      initial: {
-        height: 0,
-        opacity: 0
-      },
-      animate: isAnimation ? {
-        height: 'fit-content',
-        opacity: 1
-      } : {
-        height: 0,
-        opacity: 0
-      },
-      transition: {
-        duration: 0.2
-      }
-    }, content));
-  }, [content, isAnimation, item === null || item === void 0 ? void 0 : item.text, minWidth, placeholder]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBox, {
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxHeader, {
+    minWidth: minWidth,
+    onClick: handleHeaderClick,
+    isOpen: isAnimating
+  }, /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxPlaceholder, null, placeholderText), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledComboBoxIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-chevron-down']
+  }))), /*#__PURE__*/_react.default.createElement(_ComboBox.StyledMotionComboBoxBody, {
+    height: height,
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    animate: isAnimating ? {
+      height: 'fit-content',
+      opacity: 1
+    } : {
+      height: 0,
+      opacity: 0
+    },
+    transition: {
+      duration: 0.2
+    }
+  }, content)), [content, height, isAnimating, item === null || item === void 0 ? void 0 : item.text, minWidth, placeholder]);
 };
 ComboBox.displayName = 'ComboBox';
 var _default = ComboBox;

package/lib/components/combobox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_utils","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ComboBox","_ref","placeholder","list","onSelect","selectedItem","item","setItem","useState","isAnimation","setIsAnimation","minWidth","setMinWidth","height","setHeight","ref","useRef","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","textArray","map","_ref2","text","calculateContentHeight","push","calculateContentWidth","content","useMemo","items","forEach","_ref3","value","createElement","handleHeaderClick","prevState","_item$text","StyledComboBox","StyledComboBoxHeader","onClick","isOpen","StyledComboBoxPlaceholder","StyledComboBoxIconWrapper","icons","StyledMotionComboBoxBody","initial","opacity","animate","transition","duration","displayName","_default","exports"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\nimport { calculateContentHeight, calculateContentWidth } from './utils';\n\nexport interface IComboBoxItem {\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The list of the items that should be displayed.\n     */\n    list: IComboBoxItem[];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({ placeholder, list, onSelect, selectedItem }) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimation, setIsAnimation] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [height, setHeight] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                setIsAnimation(false);\n            }\n        },\n        [ref]\n    );\n\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, ref]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimation(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect]\n    );\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n\n        textArray.push(placeholder);\n\n        setMinWidth(calculateContentWidth(textArray) + 45);\n    }, [list, placeholder]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        if (selectedItem) {\n            handleSetSelectedItem(selectedItem);\n        }\n    }, [handleSetSelectedItem, selectedItem]);\n\n    /**\n     * Function that renders the combobox items\n     */\n    const content = useMemo(() => {\n        const items: ReactNode[] = [];\n\n        list.forEach(({ text, value }) => {\n            items.push(\n                <ComboBoxItem\n                    key={value}\n                    value={value}\n                    text={text}\n                    onSelect={handleSetSelectedItem}\n                />\n            );\n        });\n\n        return items;\n    }, [handleSetSelectedItem, list]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = () => {\n        setIsAnimation((prevState) => !prevState);\n    };\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={ref}>\n                <StyledComboBoxHeader\n                    minWidth={minWidth}\n                    onClick={handleHeaderClick}\n                    isOpen={isAnimation}\n                >\n                    <StyledComboBoxPlaceholder>\n                        {item?.text ?? placeholder}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                <StyledMotionComboBoxBody\n                    height={height}\n                    initial={{ height: 0, opacity: 0 }}\n                    animate={\n                        isAnimation\n                            ? { height: 'fit-content', opacity: 1 }\n                            : { height: 0, opacity: 0 }\n                    }\n                    transition={{\n                        duration: 0.2,\n                    }}\n                >\n                    {content}\n                </StyledMotionComboBoxBody>\n            </StyledComboBox>\n        ),\n        [content, isAnimation, item?.text, minWidth, placeholder]\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","names":["_react","_interopRequireWildcard","require","_calculate","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ComboBox","_ref","placeholder","list","onSelect","selectedItem","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","height","setHeight","ref","useRef","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","textArray","map","_ref2","text","calculateContentHeight","push","calculateContentWidth","content","useMemo","items","forEach","_ref3","value","createElement","placeholderText","handleHeaderClick","prevState","StyledComboBox","StyledComboBoxHeader","onClick","isOpen","StyledComboBoxPlaceholder","StyledComboBoxIconWrapper","icons","StyledMotionComboBoxBody","initial","opacity","animate","transition","duration","displayName","_default","exports"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The list of the items that should be displayed.\n     */\n    list: IComboBoxItem[];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({ placeholder, list, onSelect, selectedItem }) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [height, setHeight] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [ref]\n    );\n\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, ref]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect]\n    );\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n\n        textArray.push(placeholder);\n\n        setMinWidth(calculateContentWidth(textArray) + 45);\n    }, [list, placeholder]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        if (selectedItem) {\n            handleSetSelectedItem(selectedItem);\n        }\n    }, [handleSetSelectedItem, selectedItem]);\n\n    /**\n     * Function that renders the combobox items\n     */\n    const content = useMemo(() => {\n        const items: ReactNode[] = [];\n\n        list.forEach(({ text, value }) => {\n            items.push(\n                <ComboBoxItem\n                    key={value}\n                    value={value}\n                    text={text}\n                    onSelect={handleSetSelectedItem}\n                />\n            );\n        });\n\n        return items;\n    }, [handleSetSelectedItem, list]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (!selectedItem) {\n            text = placeholder;\n        } else if (item?.text) {\n            text = item.text;\n        }\n\n        return text;\n    }, [item?.text, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = () => {\n        setIsAnimating((prevState) => !prevState);\n    };\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={ref}>\n                <StyledComboBoxHeader\n                    minWidth={minWidth}\n                    onClick={handleHeaderClick}\n                    isOpen={isAnimating}\n                >\n                    <StyledComboBoxPlaceholder>{placeholderText}</StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                <StyledMotionComboBoxBody\n                    height={height}\n                    initial={{ height: 0, opacity: 0 }}\n                    animate={\n                        isAnimating\n                            ? { height: 'fit-content', opacity: 1 }\n                            : { height: 0, opacity: 0 }\n                    }\n                    transition={{\n                        duration: 0.2,\n                    }}\n                >\n                    {content}\n                </StyledMotionComboBoxBody>\n            </StyledComboBox>\n        ),\n        [content, height, isAnimating, item?.text, minWidth, placeholder]\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,aAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,SAAA,GAAAL,OAAA;AAM2B,SAAAG,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAX,wBAAAO,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AA0B3B,MAAMW,QAA2B,GAAGC,IAAA,IAAmD;EAAA,IAAlD;IAAEC,WAAW;IAAEC,IAAI;IAAEC,QAAQ;IAAEC;EAAa,CAAC,GAAAJ,IAAA;EAC9E,MAAM,CAACK,IAAI,EAAEC,OAAO,CAAC,GAAG,IAAAC,eAAQ,EAAgB,CAAC;EACjD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EACrD,MAAM,CAACG,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAJ,eAAQ,EAAC,CAAC,CAAC;EAC3C,MAAM,CAACK,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAN,eAAQ,EAAC,CAAC,CAAC;EAEvC,MAAMO,GAAG,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAExC,MAAMC,WAAW,GAAG,IAAAC,kBAAW,EAC1BC,KAAiB,IAAK;IACnB,IAAIJ,GAAG,CAACK,OAAO,IAAI,CAACL,GAAG,CAACK,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,EAAE;MAC5DZ,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EACD,CAACK,GAAG,CACR,CAAC;EAED,IAAAQ,gBAAS,EAAC,MAAM;IACZC,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAER,WAAW,CAAC;IAE/C,OAAO,MAAM;MACTO,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAET,WAAW,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,EAAEF,GAAG,CAAC,CAAC;;EAEtB;AACJ;AACA;EACI,MAAMY,qBAAqB,GAAG,IAAAT,kBAAW,EACpCU,YAA2B,IAAK;IAC7BrB,OAAO,CAACqB,YAAY,CAAC;IACrBlB,cAAc,CAAC,KAAK,CAAC;IAErB,IAAIN,QAAQ,EAAE;MACVA,QAAQ,CAACwB,YAAY,CAAC;IAC1B;EACJ,CAAC,EACD,CAACxB,QAAQ,CACb,CAAC;;EAED;AACJ;AACA;EACI,IAAAmB,gBAAS,EAAC,MAAM;IACZ,MAAMM,SAAS,GAAG1B,IAAI,CAAC2B,GAAG,CAACC,KAAA;MAAA,IAAC;QAAEC;MAAK,CAAC,GAAAD,KAAA;MAAA,OAAKC,IAAI;IAAA,EAAC;IAE9ClB,SAAS,CAAC,IAAAmB,iCAAsB,EAACJ,SAAS,CAAC,CAAC;IAE5CA,SAAS,CAACK,IAAI,CAAChC,WAAW,CAAC;IAE3BU,WAAW,CAAC,IAAAuB,gCAAqB,EAACN,SAAS,CAAC,GAAG,EAAE,CAAC;EACtD,CAAC,EAAE,CAAC1B,IAAI,EAAED,WAAW,CAAC,CAAC;;EAEvB;AACJ;AACA;EACI,IAAAqB,gBAAS,EAAC,MAAM;IACZ,IAAIlB,YAAY,EAAE;MACdsB,qBAAqB,CAACtB,YAAY,CAAC;IACvC;EACJ,CAAC,EAAE,CAACsB,qBAAqB,EAAEtB,YAAY,CAAC,CAAC;;EAEzC;AACJ;AACA;EACI,MAAM+B,OAAO,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC1B,MAAMC,KAAkB,GAAG,EAAE;IAE7BnC,IAAI,CAACoC,OAAO,CAACC,KAAA,IAAqB;MAAA,IAApB;QAAER,IAAI;QAAES;MAAM,CAAC,GAAAD,KAAA;MACzBF,KAAK,CAACJ,IAAI,eACNhE,MAAA,CAAAU,OAAA,CAAA8D,aAAA,CAAClE,aAAA,CAAAI,OAAY;QACTc,GAAG,EAAE+C,KAAM;QACXA,KAAK,EAAEA,KAAM;QACbT,IAAI,EAAEA,IAAK;QACX5B,QAAQ,EAAEuB;MAAsB,CACnC,CACL,CAAC;IACL,CAAC,CAAC;IAEF,OAAOW,KAAK;EAChB,CAAC,EAAE,CAACX,qBAAqB,EAAExB,IAAI,CAAC,CAAC;;EAEjC;AACJ;AACA;EACI,MAAMwC,eAAe,GAAG,IAAAN,cAAO,EAAC,MAAM;IAClC,IAAIL,IAAI,GAAG9B,WAAW;IAEtB,IAAI,CAACG,YAAY,EAAE;MACf2B,IAAI,GAAG9B,WAAW;IACtB,CAAC,MAAM,IAAII,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAE0B,IAAI,EAAE;MACnBA,IAAI,GAAG1B,IAAI,CAAC0B,IAAI;IACpB;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAAC1B,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE0B,IAAI,EAAE9B,WAAW,EAAEG,YAAY,CAAC,CAAC;;EAE3C;AACJ;AACA;EACI,MAAMuC,iBAAiB,GAAGA,CAAA,KAAM;IAC5BlC,cAAc,CAAEmC,SAAS,IAAK,CAACA,SAAS,CAAC;EAC7C,CAAC;EAED,OAAO,IAAAR,cAAO,EACV,mBACInE,MAAA,CAAAU,OAAA,CAAA8D,aAAA,CAACjE,SAAA,CAAAqE,cAAc;IAAC/B,GAAG,EAAEA;EAAI,gBACrB7C,MAAA,CAAAU,OAAA,CAAA8D,aAAA,CAACjE,SAAA,CAAAsE,oBAAoB;IACjBpC,QAAQ,EAAEA,QAAS;IACnBqC,OAAO,EAAEJ,iBAAkB;IAC3BK,MAAM,EAAExC;EAAY,gBAEpBvC,MAAA,CAAAU,OAAA,CAAA8D,aAAA,CAACjE,SAAA,CAAAyE,yBAAyB,QAAEP,eAA2C,CAAC,eACxEzE,MAAA,CAAAU,OAAA,CAAA8D,aAAA,CAACjE,SAAA,CAAA0E,yBAAyB,qBACtBjF,MAAA,CAAAU,OAAA,CAAA8D,aAAA,CAACpE,KAAA,CAAAM,OAAI;IAACwE,KAAK,EAAE,CAAC,oBAAoB;EAAE,CAAE,CACf,CACT,CAAC,eACvBlF,MAAA,CAAAU,OAAA,CAAA8D,aAAA,CAACjE,SAAA,CAAA4E,wBAAwB;IACrBxC,MAAM,EAAEA,MAAO;IACfyC,OAAO,EAAE;MAAEzC,MAAM,EAAE,CAAC;MAAE0C,OAAO,EAAE;IAAE,CAAE;IACnCC,OAAO,EACH/C,WAAW,GACL;MAAEI,MAAM,EAAE,aAAa;MAAE0C,OAAO,EAAE;IAAE,CAAC,GACrC;MAAE1C,MAAM,EAAE,CAAC;MAAE0C,OAAO,EAAE;IAAE,CACjC;IACDE,UAAU,EAAE;MACRC,QAAQ,EAAE;IACd;EAAE,GAEDtB,OACqB,CACd,CACnB,EACD,CAACA,OAAO,EAAEvB,MAAM,EAAEJ,WAAW,EAAEH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE0B,IAAI,EAAErB,QAAQ,EAAET,WAAW,CACpE,CAAC;AACL,CAAC;AAEDF,QAAQ,CAAC2D,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAEnB5D,QAAQ;AAAA6D,OAAA,CAAAjF,OAAA,GAAAgF,QAAA"}

package/lib/components/combobox/ComboBox.styles.d.ts

@@ -5,7 +5,9 @@ export declare const StyledComboBoxHeader: import("styled-components").StyledCom
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>;
-export declare const StyledComboBoxPlaceholder: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const StyledComboBoxPlaceholder: import("styled-components").StyledComponent<"p", any, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
 export declare const StyledComboBoxIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledMotionComboBoxBody: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {
     height: number;

package/lib/components/combobox/ComboBox.styles.js

@@ -60,6 +60,12 @@ const StyledComboBoxHeader = _styledComponents.default.div`
 `;
 exports.StyledComboBoxHeader = StyledComboBoxHeader;
 const StyledComboBoxPlaceholder = _styledComponents.default.p`
+    color: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.text;
+}};
     margin: 0;
 `;
 exports.StyledComboBoxPlaceholder = StyledComboBoxPlaceholder;
@@ -68,10 +74,10 @@ const StyledComboBoxIconWrapper = _styledComponents.default.div`
 `;
 exports.StyledComboBoxIconWrapper = StyledComboBoxIconWrapper;
 const StyledMotionComboBoxBody = (0, _styledComponents.default)(_framerMotion.motion.div)`
-    background: ${_ref6 => {
+    background: ${_ref7 => {
   let {
     theme
-  } = _ref6;
+  } = _ref7;
   return theme['001'];
 }};
     display: flex;
@@ -82,16 +88,16 @@ const StyledMotionComboBoxBody = (0, _styledComponents.default)(_framerMotion.mo
     border-top: none;
     cursor: pointer;
     max-height: 300px;
-    overflow-y: ${_ref7 => {
+    overflow-y: ${_ref8 => {
   let {
     height
-  } = _ref7;
+  } = _ref8;
   return height <= 300 ? 'hidden' : 'auto';
 }};
-    box-shadow: 0 0 0 1px rgba(${_ref8 => {
+    box-shadow: 0 0 0 1px rgba(${_ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme['009-rgb'];
 }}, 0.08)
         inset;

package/lib/components/combobox/ComboBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledComboBox","styled","div","exports","StyledComboBoxHeader","_ref","theme","_ref2","minWidth","_ref3","_ref4","isOpen","css","_ref5","StyledComboBoxPlaceholder","p","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","_ref6","_ref7","height","_ref8"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledComboBox = styled.div`\n    width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    isOpen: boolean;\n    minWidth: number;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 8px 10px;\n    cursor: pointer;\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    min-width: ${({ minWidth }) => minWidth}px;\n    max-width: ${({ minWidth }) => minWidth}px;\n\n    ${({ isOpen }) =>\n        isOpen\n            ? css`\n                  border-top-left-radius: 3px;\n                  border-top-right-radius: 3px;\n              `\n            : css`\n                  border-radius: 3px;\n              `}\n\n    &:hover {\n        background: ${({ theme }: StyledComboBoxHeaderProps) => theme['secondary-103']};\n    }\n`;\n\nexport const StyledComboBoxPlaceholder = styled.p`\n    margin: 0;\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    height: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['001']};\n    display: flex;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    border-top: none;\n    cursor: pointer;\n    max-height: 300px;\n    overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledComboBoxBodyProps) => theme['009-rgb']}, 0.08)\n        inset;\n\n    &::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: rgba(160, 160, 160, 1);\n    }\n`;\n"],"mappings":"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"}
+{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledComboBox","styled","div","exports","StyledComboBoxHeader","_ref","theme","_ref2","minWidth","_ref3","_ref4","isOpen","css","_ref5","StyledComboBoxPlaceholder","p","_ref6","text","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","_ref7","_ref8","height","_ref9"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledComboBox = styled.div`\n    width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    isOpen: boolean;\n    minWidth: number;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 8px 10px;\n    cursor: pointer;\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    min-width: ${({ minWidth }) => minWidth}px;\n    max-width: ${({ minWidth }) => minWidth}px;\n\n    ${({ isOpen }) =>\n        isOpen\n            ? css`\n                  border-top-left-radius: 3px;\n                  border-top-right-radius: 3px;\n              `\n            : css`\n                  border-radius: 3px;\n              `}\n\n    &:hover {\n        background: ${({ theme }: StyledComboBoxHeaderProps) => theme['secondary-103']};\n    }\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.p<StyledComboBoxPlaceholderProps>`\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    margin: 0;\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    height: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['001']};\n    display: flex;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    border-top: none;\n    cursor: pointer;\n    max-height: 300px;\n    overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledComboBoxBodyProps) => theme['009-rgb']}, 0.08)\n        inset;\n\n    &::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: rgba(160, 160, 160, 1);\n    }\n`;\n"],"mappings":"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"}

package/lib/components/combobox/combobox-item/ComboBoxItem.styles.d.ts

@@ -1,4 +1,6 @@
 export declare const StyledComboBoxItem: import("styled-components").StyledComponent<"div", any, {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>;
-export declare const StyledComboBoxItemText: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const StyledComboBoxItemText: import("styled-components").StyledComponent<"p", any, {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

package/lib/components/combobox/combobox-item/ComboBoxItem.styles.js

@@ -18,6 +18,12 @@ const StyledComboBoxItem = _styledComponents.default.div`
 `;
 exports.StyledComboBoxItem = StyledComboBoxItem;
 const StyledComboBoxItemText = _styledComponents.default.p`
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
     margin: 5px;
 `;
 exports.StyledComboBoxItemText = StyledComboBoxItemText;

package/lib/components/combobox/combobox-item/ComboBoxItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledComboBoxItem","styled","div","_ref","theme","exports","StyledComboBoxItemText","p"],"sources":["../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<unknown>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n    &:hover {\n        background: ${({ theme }: StyledComboBoxItemProps) => theme['secondary-103']};\n    }\n`;\n\nexport const StyledComboBoxItemText = styled.p`\n    margin: 5px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,kBAAkB,GAAGC,yBAAM,CAACC,GAA6B;AACtE;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACrF;AACA,CAAC;AAACC,OAAA,CAAAL,kBAAA,GAAAA,kBAAA;AAEK,MAAMM,sBAAsB,GAAGL,yBAAM,CAACM,CAAE;AAC/C;AACA,CAAC;AAACF,OAAA,CAAAC,sBAAA,GAAAA,sBAAA"}
+{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledComboBoxItem","styled","div","_ref","theme","exports","StyledComboBoxItemText","p","_ref2","text"],"sources":["../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<unknown>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n    &:hover {\n        background: ${({ theme }: StyledComboBoxItemProps) => theme['secondary-103']};\n    }\n`;\n\ntype StyledComboBoxItemTextProps = WithTheme<unknown>;\n\nexport const StyledComboBoxItemText = styled.p<StyledComboBoxItemTextProps>`\n    color: ${({ theme }: StyledComboBoxItemTextProps) => theme.text};\n    margin: 5px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,kBAAkB,GAAGC,yBAAM,CAACC,GAA6B;AACtE;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACrF;AACA,CAAC;AAACC,OAAA,CAAAL,kBAAA,GAAAA,kBAAA;AAIK,MAAMM,sBAAsB,GAAGL,yBAAM,CAACM,CAA+B;AAC5E,aAAaC,KAAA;EAAA,IAAC;IAAEJ;EAAmC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAACK,IAAI;AAAA,CAAC;AACpE;AACA,CAAC;AAACJ,OAAA,CAAAC,sBAAA,GAAAA,sBAAA"}

package/lib/components/filter-button/FilterButton.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { FilterButtonSize, IFilterButtonItem } from './interface';
+export type FilterButtonProps = {
+    /**
+     * The items that should be displayed.
+     */
+    items: IFilterButtonItem[];
+    /**
+     * A function that should be executed when an item is selected.
+     */
+    onSelect?: (keys: string[]) => void;
+    /**
+     * The keys of items that should be selected.
+     */
+    selectedItemIds?: string[];
+    /**
+     * The size auf the filter buttons. Use the FilterButtonSize enum.
+     */
+    size?: FilterButtonSize;
+};
+declare const FilterButton: FC<FilterButtonProps>;
+export default FilterButton;

package/lib/components/filter-button/FilterButton.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _FilterButtonItem = _interopRequireDefault(require("./filter-button-item/FilterButtonItem"));
+var _FilterButton = require("./FilterButton.styles");
+var _interface = require("./interface");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const FilterButton = _ref => {
+  let {
+    selectedItemIds,
+    onSelect,
+    items,
+    size = _interface.FilterButtonSize.Normal
+  } = _ref;
+  const [selectedIds, setSelectedIds] = (0, _react.useState)(['all']);
+
+  /**
+   * This function set the selectedItemKey
+   */
+  (0, _react.useEffect)(() => {
+    if (selectedItemIds) {
+      setSelectedIds(selectedItemIds);
+    }
+  }, [selectedItemIds]);
+
+  /**
+   * Function to update the selected items
+   */
+  const handleSelect = (0, _react.useCallback)(id => {
+    let newIds;
+    if (id === 'all') {
+      newIds = selectedIds.includes('all') ? [] : ['all'];
+    } else {
+      newIds = selectedIds.includes(id) ? selectedIds.filter(filteredId => filteredId !== id) : [...selectedIds.filter(filteredId => filteredId !== 'all'), id];
+    }
+    if (newIds.length === 0) {
+      newIds = ['all'];
+    }
+    setSelectedIds(newIds);
+    if (typeof onSelect === 'function') {
+      onSelect(newIds);
+    }
+  }, [onSelect, selectedIds]);
+  const reactItems = (0, _react.useMemo)(() => {
+    if (items.length === 0) {
+      return null;
+    }
+    const array = [/*#__PURE__*/_react.default.createElement(_FilterButtonItem.default, {
+      id: "all",
+      key: "all",
+      onSelect: handleSelect,
+      isSelected: selectedIds.includes('all'),
+      shape: _interface.FilterButtonItemShape.Rectangular,
+      size: size,
+      text: "Alle"
+    })];
+    items.forEach(_ref2 => {
+      let {
+        icons,
+        text,
+        color,
+        id
+      } = _ref2;
+      array.push( /*#__PURE__*/_react.default.createElement(_FilterButtonItem.default, {
+        color: color,
+        icons: icons,
+        id: id,
+        key: id,
+        onSelect: handleSelect,
+        isSelected: selectedIds.includes(id),
+        shape: _interface.FilterButtonItemShape.Round,
+        size: size,
+        text: text
+      }));
+    });
+    return array;
+  }, [handleSelect, items, selectedIds, size]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FilterButton.StyledFilterButton, null, reactItems), [reactItems]);
+};
+FilterButton.displayName = 'FilterButton';
+var _default = FilterButton;
+exports.default = _default;
+//# sourceMappingURL=FilterButton.js.map

package/lib/components/filter-button/FilterButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.js","names":["_react","_interopRequireWildcard","require","_FilterButtonItem","_interopRequireDefault","_FilterButton","_interface","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","FilterButton","_ref","selectedItemIds","onSelect","items","size","FilterButtonSize","Normal","selectedIds","setSelectedIds","useState","useEffect","handleSelect","useCallback","id","newIds","includes","filter","filteredId","length","reactItems","useMemo","array","createElement","isSelected","shape","FilterButtonItemShape","Rectangular","text","forEach","_ref2","icons","color","push","Round","StyledFilterButton","displayName","_default","exports"],"sources":["../../../src/components/filter-button/FilterButton.tsx"],"sourcesContent":["import React, { FC, ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport FilterButtonItem from './filter-button-item/FilterButtonItem';\nimport { StyledFilterButton } from './FilterButton.styles';\nimport { FilterButtonItemShape, FilterButtonSize, IFilterButtonItem } from './interface';\n\nexport type FilterButtonProps = {\n    /**\n     * The items that should be displayed.\n     */\n    items: IFilterButtonItem[];\n    /**\n     * A function that should be executed when an item is selected.\n     */\n    onSelect?: (keys: string[]) => void;\n    /**\n     * The keys of items that should be selected.\n     */\n    selectedItemIds?: string[];\n    /**\n     * The size auf the filter buttons. Use the FilterButtonSize enum.\n     */\n    size?: FilterButtonSize;\n};\n\nconst FilterButton: FC<FilterButtonProps> = ({\n    selectedItemIds,\n    onSelect,\n    items,\n    size = FilterButtonSize.Normal,\n}) => {\n    const [selectedIds, setSelectedIds] = useState<string[]>(['all']);\n\n    /**\n     * This function set the selectedItemKey\n     */\n    useEffect(() => {\n        if (selectedItemIds) {\n            setSelectedIds(selectedItemIds);\n        }\n    }, [selectedItemIds]);\n\n    /**\n     * Function to update the selected items\n     */\n    const handleSelect = useCallback(\n        (id: string) => {\n            let newIds: string[];\n\n            if (id === 'all') {\n                newIds = selectedIds.includes('all') ? [] : ['all'];\n            } else {\n                newIds = selectedIds.includes(id)\n                    ? selectedIds.filter((filteredId) => filteredId !== id)\n                    : [...selectedIds.filter((filteredId) => filteredId !== 'all'), id];\n            }\n\n            if (newIds.length === 0) {\n                newIds = ['all'];\n            }\n\n            setSelectedIds(newIds);\n\n            if (typeof onSelect === 'function') {\n                onSelect(newIds);\n            }\n        },\n        [onSelect, selectedIds]\n    );\n\n    const reactItems = useMemo(() => {\n        if (items.length === 0) {\n            return null;\n        }\n\n        const array: ReactElement[] = [\n            <FilterButtonItem\n                id=\"all\"\n                key=\"all\"\n                onSelect={handleSelect}\n                isSelected={selectedIds.includes('all')}\n                shape={FilterButtonItemShape.Rectangular}\n                size={size}\n                text=\"Alle\"\n            />,\n        ];\n\n        items.forEach(({ icons, text, color, id }) => {\n            array.push(\n                <FilterButtonItem\n                    color={color}\n                    icons={icons}\n                    id={id}\n                    key={id}\n                    onSelect={handleSelect}\n                    isSelected={selectedIds.includes(id)}\n                    shape={FilterButtonItemShape.Round}\n                    size={size}\n                    text={text}\n                />\n            );\n        });\n\n        return array;\n    }, [handleSelect, items, selectedIds, size]);\n\n    return useMemo(() => <StyledFilterButton>{reactItems}</StyledFilterButton>, [reactItems]);\n};\n\nFilterButton.displayName = 'FilterButton';\n\nexport default FilterButton;\n"],"mappings":"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"}

package/lib/components/filter-button/FilterButton.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledFilterButton: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/filter-button/FilterButton.styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledFilterButton = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledFilterButton = _styledComponents.default.div`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+`;
+exports.StyledFilterButton = StyledFilterButton;
+//# sourceMappingURL=FilterButton.styles.js.map

package/lib/components/filter-button/FilterButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledFilterButton","styled","div","exports"],"sources":["../../../src/components/filter-button/FilterButton.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFilterButton = styled.div`\n    display: flex;\n    flex-wrap: wrap;\n    gap: 10px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,kBAAkB,GAAGC,yBAAM,CAACC,GAAI;AAC7C;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,kBAAA,GAAAA,kBAAA"}

package/lib/components/filter-button/filter-button-item/FilterButtonItem.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties, FC } from 'react';
+import { FilterButtonItemShape, FilterButtonSize } from '../interface';
+export type FilterButtonItemProps = {
+    color?: CSSProperties['color'];
+    icons?: string[];
+    isSelected: boolean;
+    shape: FilterButtonItemShape;
+    size: FilterButtonSize;
+    text: string;
+    id: string;
+    onSelect: (key: string) => void;
+};
+declare const FilterButtonItem: FC<FilterButtonItemProps>;
+export default FilterButtonItem;

package/lib/components/filter-button/filter-button-item/FilterButtonItem.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = _interopRequireDefault(require("../../icon/Icon"));
+var _interface = require("../interface");
+var _FilterButtonItem = require("./FilterButtonItem.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const FilterButtonItem = _ref => {
+  let {
+    icons,
+    size,
+    shape,
+    text,
+    color,
+    isSelected,
+    id,
+    onSelect
+  } = _ref;
+  const handleClick = (0, _react.useCallback)(() => {
+    onSelect(id);
+  }, [id, onSelect]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_FilterButtonItem.StyledFilterButtonItem, {
+    isSelected: isSelected,
+    size: size,
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(_FilterButtonItem.StyledFilterButtonItemLabel, null, icons && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: icons,
+    size: size === _interface.FilterButtonSize.Normal ? 15 : 10
+  }), /*#__PURE__*/_react.default.createElement(_FilterButtonItem.StyledFilterButtonItemLabelText, null, text)), /*#__PURE__*/_react.default.createElement(_FilterButtonItem.StyledFilterButtonItemBorder, {
+    isSelected: isSelected,
+    shape: shape,
+    color: color
+  }), /*#__PURE__*/_react.default.createElement(_FilterButtonItem.StyledMotionFilterButtonItemBackground, {
+    isSelected: isSelected,
+    shape: shape,
+    color: color
+  })), [color, handleClick, icons, isSelected, shape, size, text]);
+};
+FilterButtonItem.displayName = 'FilterButtonItem';
+var _default = FilterButtonItem;
+exports.default = _default;
+//# sourceMappingURL=FilterButtonItem.js.map

package/lib/components/filter-button/filter-button-item/FilterButtonItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonItem.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_interface","_FilterButtonItem","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","FilterButtonItem","_ref","icons","size","shape","text","color","isSelected","id","onSelect","handleClick","useCallback","useMemo","createElement","StyledFilterButtonItem","onClick","StyledFilterButtonItemLabel","FilterButtonSize","Normal","StyledFilterButtonItemLabelText","StyledFilterButtonItemBorder","StyledMotionFilterButtonItemBackground","displayName","_default","exports"],"sources":["../../../../src/components/filter-button/filter-button-item/FilterButtonItem.tsx"],"sourcesContent":["import React, { CSSProperties, FC, useCallback, useMemo } from 'react';\nimport Icon from '../../icon/Icon';\nimport { FilterButtonItemShape, FilterButtonSize } from '../interface';\nimport {\n    StyledFilterButtonItem,\n    StyledFilterButtonItemBorder,\n    StyledFilterButtonItemLabel,\n    StyledFilterButtonItemLabelText,\n    StyledMotionFilterButtonItemBackground,\n} from './FilterButtonItem.styles';\n\nexport type FilterButtonItemProps = {\n    color?: CSSProperties['color'];\n    icons?: string[];\n    isSelected: boolean;\n    shape: FilterButtonItemShape;\n    size: FilterButtonSize;\n    text: string;\n    id: string;\n    onSelect: (key: string) => void;\n};\n\nconst FilterButtonItem: FC<FilterButtonItemProps> = ({\n    icons,\n    size,\n    shape,\n    text,\n    color,\n    isSelected,\n    id,\n    onSelect,\n}) => {\n    const handleClick = useCallback(() => {\n        onSelect(id);\n    }, [id, onSelect]);\n\n    return useMemo(\n        () => (\n            <StyledFilterButtonItem isSelected={isSelected} size={size} onClick={handleClick}>\n                <StyledFilterButtonItemLabel>\n                    {icons && (\n                        <Icon icons={icons} size={size === FilterButtonSize.Normal ? 15 : 10} />\n                    )}\n                    <StyledFilterButtonItemLabelText>{text}</StyledFilterButtonItemLabelText>\n                </StyledFilterButtonItemLabel>\n                <StyledFilterButtonItemBorder isSelected={isSelected} shape={shape} color={color} />\n                <StyledMotionFilterButtonItemBackground\n                    isSelected={isSelected}\n                    shape={shape}\n                    color={color}\n                />\n            </StyledFilterButtonItem>\n        ),\n        [color, handleClick, icons, isSelected, shape, size, text]\n    );\n};\n\nFilterButtonItem.displayName = 'FilterButtonItem';\n\nexport default FilterButtonItem;\n"],"mappings":"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"}

package/lib/components/filter-button/filter-button-item/FilterButtonItem.styles.d.ts

@@ -0,0 +1,26 @@
+import type { CSSProperties } from 'react';
+import { FilterButtonItemShape, FilterButtonSize } from '../interface';
+export declare const StyledFilterButtonItem: import("styled-components").StyledComponent<"div", any, {
+    size: FilterButtonSize;
+    isSelected: boolean;
+} & {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledFilterButtonItemLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFilterButtonItemLabelText: import("styled-components").StyledComponent<"p", any, {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledFilterButtonItemBorder: import("styled-components").StyledComponent<"div", any, {
+    shape: FilterButtonItemShape;
+    color: CSSProperties['color'];
+    isSelected: boolean;
+} & {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledMotionFilterButtonItemBackground: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {
+    shape: FilterButtonItemShape;
+    color: CSSProperties['color'];
+    isSelected: boolean;
+} & {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;