@coorpacademy/components 11.40.4 → 11.40.6-alpha.5

package/es/molecule/icon-picker-modal/index.d.ts

@@ -6,8 +6,7 @@ declare namespace IconPickerModal {
     }
     namespace propTypes {
         const isOpen: PropTypes.Requireable<boolean>;
-        const onCancel: PropTypes.Requireable<(...args: any[]) => any>;
-        const onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
         const onClose: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }

package/es/molecule/icon-picker-modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAcA,+EAwIC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/icon-picker-modal/index.js"],"names":[],"mappings":";AAaA,+EA6GC"}

package/es/molecule/icon-picker-modal/index.js

@@ -13,21 +13,18 @@ import BaseModal from '../base-modal';
 import SelectIcon from '../../atom/select-icon';
 import Provider from '../../atom/provider';
 import SearchForm from '../search-form';
-import { COLORS } from '../../variables/colors';
 import style from './style.css';
 import useIconSearch from './use-icon-search';
 const ICONS_PER_LOAD = 48;
 const IconPickerModal = (props, context) => {
   const {
     isOpen,
-    onCancel,
-    onConfirm,
-    onClose
+    onClose,
+    onClick
   } = props;
   const {
     translate
   } = context;
-  const [selectedIcon, setSelectedIcon] = useState(null);
   const [displayedIcons, setDisplayedIcons] = useState([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const allIcons = useMemo(() => _pipe(_values, _map(_get('iconName')), _uniq)(fas), []);
@@ -37,15 +34,9 @@ const IconPickerModal = (props, context) => {
     handleSearch,
     handleReset
   } = useIconSearch(allIcons);
-  const handleCancel = useCallback(() => {
-    onCancel();
-  }, [onCancel]);
   const handleClose = useCallback(() => {
     onClose();
   }, [onClose]);
-  const handleIconClick = useCallback(iconName => () => {
-    setSelectedIcon(prevSelectedIcon => prevSelectedIcon === iconName ? null : iconName);
-  }, []);
   const loadMoreIcons = useCallback(() => {
     const nextIndex = currentIndex + ICONS_PER_LOAD;
     const newIcons = _slice(currentIndex, nextIndex, searchResults);
@@ -66,36 +57,20 @@ const IconPickerModal = (props, context) => {
       loadMoreIcons();
     }
   }, [loadMoreIcons]);
-  const icons = useMemo(() => _pipe(_entries, _map(([index, iconName]) => /*#__PURE__*/React.createElement(SelectIcon, {
-    key: `icon-${index}`,
-    size: "responsive",
-    "data-name": `icon-${index}`,
-    "aria-label": iconName,
-    faIcon: iconName,
-    onClick: handleIconClick(iconName),
-    options: {
-      isSelected: selectedIcon === iconName
+  const icons = useMemo(() => _pipe(_entries, _map(([index, iconName]) => {
+    function handleIconClick() {
+      return onClick(iconName);
     }
-  })))(displayedIcons), [displayedIcons, selectedIcon, handleIconClick]);
-  const footer = useMemo(() => {
-    return {
-      cancelButton: {
-        onCancel: handleCancel,
-        label: translate('cancel')
-      },
-      confirmButton: {
-        onConfirm: () => {
-          onConfirm(selectedIcon);
-          setSelectedIcon(null);
-          onClose();
-        },
-        label: translate('confirm'),
-        iconName: 'plus',
-        disabled: selectedIcon === null,
-        color: COLORS.cm_primary_blue
-      }
-    };
-  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);
+    return /*#__PURE__*/React.createElement(SelectIcon, {
+      key: `icon-${iconName}`,
+      size: "responsive",
+      "data-name": `icon-${iconName}`,
+      "aria-label": iconName,
+      faIcon: iconName,
+      onClick: handleIconClick,
+      options: {}
+    });
+  }))(displayedIcons), [displayedIcons, onClick]);
   if (!isOpen) return null;
   return /*#__PURE__*/React.createElement(BaseModal, {
     title: translate('icon_picker_title'),
@@ -103,7 +78,6 @@ const IconPickerModal = (props, context) => {
     isOpen: isOpen,
     onClose: handleClose,
     onScroll: handleScroll,
-    footer: footer,
     headerIcon: {
       name: 'arrows-rotate',
       backgroundColor: '#D6E6FF'
@@ -140,8 +114,7 @@ IconPickerModal.contextTypes = {
 };
 IconPickerModal.propTypes = process.env.NODE_ENV !== "production" ? {
   isOpen: PropTypes.bool,
-  onCancel: PropTypes.func,
-  onConfirm: PropTypes.func,
+  onClick: PropTypes.func,
   onClose: PropTypes.func
 } : {};
 export default IconPickerModal;

package/es/molecule/icon-picker-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","useEffect","PropTypes","fas","BaseModal","SelectIcon","Provider","SearchForm","COLORS","style","useIconSearch","ICONS_PER_LOAD","IconPickerModal","props","context","isOpen","onCancel","onConfirm","onClose","translate","selectedIcon","setSelectedIcon","displayedIcons","setDisplayedIcons","currentIndex","setCurrentIndex","allIcons","_pipe","_values","_map","_get","_uniq","searchValue","searchResults","handleSearch","handleReset","handleCancel","handleClose","handleIconClick","iconName","prevSelectedIcon","loadMoreIcons","nextIndex","newIcons","_slice","prevIcons","handleScroll","event","scrollTop","clientHeight","scrollHeight","currentTarget","icons","_entries","index","createElement","key","size","faIcon","onClick","options","isSelected","footer","cancelButton","label","confirmButton","disabled","color","cm_primary_blue","title","description","onScroll","headerIcon","name","backgroundColor","className","iconPicker","Fragment","searchWrapper","search","placeholder","value","onChange","onReset","dataTestId","_size","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","bool","func"],"sources":["../../../src/molecule/icon-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {entries, map, pipe, get, values, slice, size, uniq} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport SelectIcon from '../../atom/select-icon';\nimport Provider from '../../atom/provider';\nimport SearchForm from '../search-form';\nimport {COLORS} from '../../variables/colors';\nimport style from './style.css';\nimport useIconSearch from './use-icon-search';\n\nconst ICONS_PER_LOAD = 48;\n\nconst IconPickerModal = (props, context) => {\n  const {isOpen, onCancel, onConfirm, onClose} = props;\n  const {translate} = context;\n\n  const [selectedIcon, setSelectedIcon] = useState(null);\n  const [displayedIcons, setDisplayedIcons] = useState([]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const allIcons = useMemo(() => pipe(values, map(get('iconName')), uniq)(fas), []);\n  const {searchValue, searchResults, handleSearch, handleReset} = useIconSearch(allIcons);\n\n  const handleCancel = useCallback(() => {\n    onCancel();\n  }, [onCancel]);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleIconClick = useCallback(\n    iconName => () => {\n      setSelectedIcon(prevSelectedIcon => (prevSelectedIcon === iconName ? null : iconName));\n    },\n    []\n  );\n\n  const loadMoreIcons = useCallback(() => {\n    const nextIndex = currentIndex + ICONS_PER_LOAD;\n    const newIcons = slice(currentIndex, nextIndex, searchResults);\n    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);\n    setCurrentIndex(nextIndex);\n  }, [currentIndex, searchResults]);\n\n  useEffect(() => {\n    setDisplayedIcons(() => slice(0, ICONS_PER_LOAD, searchResults));\n    setCurrentIndex(ICONS_PER_LOAD);\n  }, [searchResults]);\n\n  const handleScroll = useCallback(\n    event => {\n      const {scrollTop, clientHeight, scrollHeight} = event.currentTarget;\n      if (scrollHeight - scrollTop <= clientHeight + 1) {\n        loadMoreIcons();\n      }\n    },\n    [loadMoreIcons]\n  );\n\n  const icons = useMemo(\n    () =>\n      pipe(\n        entries,\n        map(([index, iconName]) => (\n          <SelectIcon\n            key={`icon-${index}`}\n            size=\"responsive\"\n            data-name={`icon-${index}`}\n            aria-label={iconName}\n            faIcon={iconName}\n            onClick={handleIconClick(iconName)}\n            options={{isSelected: selectedIcon === iconName}}\n          />\n        ))\n      )(displayedIcons),\n    [displayedIcons, selectedIcon, handleIconClick]\n  );\n\n  const footer = useMemo(() => {\n    return {\n      cancelButton: {\n        onCancel: handleCancel,\n        label: translate('cancel')\n      },\n      confirmButton: {\n        onConfirm: () => {\n          onConfirm(selectedIcon);\n          setSelectedIcon(null);\n          onClose();\n        },\n        label: translate('confirm'),\n        iconName: 'plus',\n        disabled: selectedIcon === null,\n        color: COLORS.cm_primary_blue\n      }\n    };\n  }, [handleCancel, onConfirm, onClose, translate, selectedIcon]);\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('icon_picker_title')}\n      description={translate('icon_picker_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onScroll={handleScroll}\n      footer={footer}\n      headerIcon={{\n        name: 'arrows-rotate',\n        backgroundColor: '#D6E6FF'\n      }}\n    >\n      <div className={style.iconPicker}>\n        {\n          <>\n            <div className={style.searchWrapper}>\n              <SearchForm\n                search={{\n                  placeholder: translate('search_place_holder'),\n                  value: searchValue,\n                  onChange: handleSearch\n                }}\n                onReset={handleReset}\n                dataTestId=\"search-input\"\n              />\n            </div>\n            {searchValue && size(searchResults) === 0 ? (\n              <div className={style.emptySearchResultContainer}>\n                <div className={style.emptySearchResultTitle}>\n                  {translate('empty_search_result_title', {searchValue})}\n                </div>\n                <div className={style.emptySearchResultDescription}>\n                  {translate('empty_search_result_description')}\n                </div>\n                <div className={style.emptySearchResultClearSearch} onClick={handleReset}>\n                  {translate('empty_search_result_clear_search')}\n                </div>\n              </div>\n            ) : (\n              <div className={style.iconsListWrapper}>{icons}</div>\n            )}\n          </>\n        }\n      </div>\n    </BaseModal>\n  );\n};\n\nIconPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nIconPickerModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onCancel: PropTypes.func,\n  onConfirm: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default IconPickerModal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","useState","useCallback","useEffect","PropTypes","fas","BaseModal","SelectIcon","Provider","SearchForm","style","useIconSearch","ICONS_PER_LOAD","IconPickerModal","props","context","isOpen","onClose","onClick","translate","displayedIcons","setDisplayedIcons","currentIndex","setCurrentIndex","allIcons","_pipe","_values","_map","_get","_uniq","searchValue","searchResults","handleSearch","handleReset","handleClose","loadMoreIcons","nextIndex","newIcons","_slice","prevIcons","handleScroll","event","scrollTop","clientHeight","scrollHeight","currentTarget","icons","_entries","index","iconName","handleIconClick","createElement","key","size","faIcon","options","title","description","onScroll","headerIcon","name","backgroundColor","className","iconPicker","Fragment","searchWrapper","search","placeholder","value","onChange","onReset","dataTestId","_size","emptySearchResultContainer","emptySearchResultTitle","emptySearchResultDescription","emptySearchResultClearSearch","iconsListWrapper","contextTypes","childContextTypes","propTypes","process","env","NODE_ENV","bool","func"],"sources":["../../../src/molecule/icon-picker-modal/index.js"],"sourcesContent":["import React, {useMemo, useState, useCallback, useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {fas} from '@fortawesome/pro-solid-svg-icons';\nimport {entries, map, pipe, get, values, slice, size, uniq} from 'lodash/fp';\nimport BaseModal from '../base-modal';\nimport SelectIcon from '../../atom/select-icon';\nimport Provider from '../../atom/provider';\nimport SearchForm from '../search-form';\nimport style from './style.css';\nimport useIconSearch from './use-icon-search';\n\nconst ICONS_PER_LOAD = 48;\n\nconst IconPickerModal = (props, context) => {\n  const {isOpen, onClose, onClick} = props;\n  const {translate} = context;\n\n  const [displayedIcons, setDisplayedIcons] = useState([]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const allIcons = useMemo(() => pipe(values, map(get('iconName')), uniq)(fas), []);\n  const {searchValue, searchResults, handleSearch, handleReset} = useIconSearch(allIcons);\n\n  const handleClose = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const loadMoreIcons = useCallback(() => {\n    const nextIndex = currentIndex + ICONS_PER_LOAD;\n    const newIcons = slice(currentIndex, nextIndex, searchResults);\n    setDisplayedIcons(prevIcons => [...prevIcons, ...newIcons]);\n    setCurrentIndex(nextIndex);\n  }, [currentIndex, searchResults]);\n\n  useEffect(() => {\n    setDisplayedIcons(() => slice(0, ICONS_PER_LOAD, searchResults));\n    setCurrentIndex(ICONS_PER_LOAD);\n  }, [searchResults]);\n\n  const handleScroll = useCallback(\n    event => {\n      const {scrollTop, clientHeight, scrollHeight} = event.currentTarget;\n      if (scrollHeight - scrollTop <= clientHeight + 1) {\n        loadMoreIcons();\n      }\n    },\n    [loadMoreIcons]\n  );\n\n  const icons = useMemo(\n    () =>\n      pipe(\n        entries,\n        map(([index, iconName]) => {\n          function handleIconClick() {\n            return onClick(iconName);\n          }\n\n          return (\n            <SelectIcon\n              key={`icon-${iconName}`}\n              size=\"responsive\"\n              data-name={`icon-${iconName}`}\n              aria-label={iconName}\n              faIcon={iconName}\n              onClick={handleIconClick}\n              options={{}}\n            />\n          );\n        })\n      )(displayedIcons),\n    [displayedIcons, onClick]\n  );\n\n  if (!isOpen) return null;\n\n  return (\n    <BaseModal\n      title={translate('icon_picker_title')}\n      description={translate('icon_picker_description')}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onScroll={handleScroll}\n      headerIcon={{\n        name: 'arrows-rotate',\n        backgroundColor: '#D6E6FF'\n      }}\n    >\n      <div className={style.iconPicker}>\n        {\n          <>\n            <div className={style.searchWrapper}>\n              <SearchForm\n                search={{\n                  placeholder: translate('search_place_holder'),\n                  value: searchValue,\n                  onChange: handleSearch\n                }}\n                onReset={handleReset}\n                dataTestId=\"search-input\"\n              />\n            </div>\n            {searchValue && size(searchResults) === 0 ? (\n              <div className={style.emptySearchResultContainer}>\n                <div className={style.emptySearchResultTitle}>\n                  {translate('empty_search_result_title', {searchValue})}\n                </div>\n                <div className={style.emptySearchResultDescription}>\n                  {translate('empty_search_result_description')}\n                </div>\n                <div className={style.emptySearchResultClearSearch} onClick={handleReset}>\n                  {translate('empty_search_result_clear_search')}\n                </div>\n              </div>\n            ) : (\n              <div className={style.iconsListWrapper}>{icons}</div>\n            )}\n          </>\n        }\n      </div>\n    </BaseModal>\n  );\n};\n\nIconPickerModal.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nIconPickerModal.propTypes = {\n  isOpen: PropTypes.bool,\n  onClick: PropTypes.func,\n  onClose: PropTypes.func\n};\n\nexport default IconPickerModal;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/multi-filter-panel/index.d.ts

@@ -6,16 +6,20 @@ declare const MultiFilterPanel: {
     propTypes: {
         title: import("prop-types").Requireable<string>;
         onClearAll: import("prop-types").Requireable<(...args: any[]) => any>;
+        onRemoveSelectedFilter: import("prop-types").Requireable<(...args: any[]) => any>;
         options: import("prop-types").Requireable<(NonNullable<import("prop-types").InferProps<{
             type: import("prop-types").Requireable<string>;
             options: import("prop-types").Requireable<import("prop-types").InferProps<{
                 title: import("prop-types").Requireable<string>;
+                titleAriaLabel: import("prop-types").Requireable<string>;
                 onClear: import("prop-types").Requireable<(...args: any[]) => any>;
                 options: import("prop-types").Requireable<(import("prop-types").InferProps<{
                     label: import("prop-types").Requireable<string>;
                     type: import("prop-types").Requireable<string>;
+                    textColor: import("prop-types").Requireable<string>;
                     selected: import("prop-types").Requireable<boolean>;
                     icon: import("prop-types").Requireable<string>;
+                    customIcon: import("prop-types").Requireable<string>;
                     onClick: import("prop-types").Requireable<(...args: any[]) => any>;
                 }> | null | undefined)[]>;
             }>>;
@@ -23,6 +27,7 @@ declare const MultiFilterPanel: {
             type: import("prop-types").Requireable<string>;
             options: import("prop-types").Requireable<import("prop-types").InferProps<{
                 title: import("prop-types").Requireable<string>;
+                titleAriaLabel: import("prop-types").Requireable<string>;
                 onClear: import("prop-types").Requireable<(...args: any[]) => any>;
                 options: import("prop-types").Requireable<(import("prop-types").InferProps<{
                     label: import("prop-types").Requireable<string>;
@@ -46,6 +51,20 @@ declare const MultiFilterPanel: {
                     searchIconAriaLabel: import("prop-types").Requireable<string>;
                 }>>;
             }>>;
+        }> | import("prop-types").InferProps<{
+            type: import("prop-types").Requireable<string>;
+            options: import("prop-types").Requireable<import("prop-types").InferProps<{
+                title: import("prop-types").Validator<string>;
+                titleAriaLabel: import("prop-types").Requireable<string>;
+                onClear: import("prop-types").Validator<(...args: any[]) => any>;
+                options: import("prop-types").Requireable<(import("prop-types").InferProps<{
+                    label: import("prop-types").Validator<string>;
+                    value: import("prop-types").Validator<boolean>;
+                    onChange: import("prop-types").Validator<(...args: any[]) => any>;
+                    theme: import("prop-types").Validator<string>;
+                    ariaLabel: import("prop-types").Validator<string>;
+                }> | null | undefined)[]>;
+            }>>;
         }> | null | undefined> | null | undefined)[]>;
     };
     contextTypes: {

package/es/molecule/multi-filter-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AAEjE,OAAkB,EAAC,qBAAqB,EAAqB,MAAM,cAAc,CAAC;AAqBlF,QAAA,MAAM,gBAAgB;YAAW,qBAAqB,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDhF,CAAC;AAQF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAC,gBAAgB,EAAC,MAAM,iCAAiC,CAAC;AASjE,OAAkB,EAAC,qBAAqB,EAAqB,MAAM,cAAc,CAAC;AAwDlF,QAAA,MAAM,gBAAgB;YAAW,qBAAqB,WAAW,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDhF,CAAC;AAQF,eAAe,gBAAgB,CAAC"}

package/es/molecule/multi-filter-panel/index.js

@@ -11,9 +11,11 @@ import Title from '../../atom/title';
 import Tag from '../../atom/tag';
 import ButtonLink from '../../atom/button-link';
 import Provider, { GetTranslateFromContext } from '../../atom/provider';
-import propTypes from './prop-types';
+import Chip from '../../atom/chip';
+import { COLORS } from '../../variables/colors';
+import FilterSwitch from '../../organism/filter-switch';
 import style from './style.css';
-
+import propTypes from './prop-types';
 // @ts-expect-error convert is not recognized by the types
 const uncappedMap = _map.convert({
   cap: false
@@ -35,21 +37,47 @@ const buildFilters = filterOptions => {
       return /*#__PURE__*/React.createElement(FilterChip, options);
     case 'checkbox':
       return /*#__PURE__*/React.createElement(FilterCheckboxAndSearch, options);
+    case 'switch':
+      return /*#__PURE__*/React.createElement(FilterSwitch, options);
     default:
       return null;
   }
 };
+const buildAllSelectedFilterChips = (selectedFilters, onRemoveSelectedFilter) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.selectedFiltersContainer,
+    "data-testid": "selected-filters-container"
+  }, selectedFilters.map(filterItem => {
+    const {
+      label
+    } = filterItem;
+    function handleClick() {
+      return onRemoveSelectedFilter(label);
+    }
+    return /*#__PURE__*/React.createElement(Chip, {
+      key: label,
+      onClick: handleClick,
+      text: label,
+      textColor: COLORS.neutral_500,
+      backgroundColor: COLORS.cm_grey_150,
+      customIcon: 'xmark',
+      customStyle: {
+        height: '28px',
+        padding: '4px 8px'
+      }
+    });
+  }));
+};
 const MultiFilterPanel = (props, context) => {
   const {
     title,
     onClearAll,
-    options
+    options,
+    onRemoveSelectedFilter = false
   } = props;
   const translate = GetTranslateFromContext(context);
-  const allSelectedFilters = _pipe(_map('options'), _flatMap('options'), _filter({
-    selected: true
-  }), _size)(options);
-  const hasSelectedFilters = allSelectedFilters > 0;
+  const allSelectedFilters = _pipe(_map('options'), _flatMap('options'), _filter(filterOptions => filterOptions.selected || filterOptions.value === true))(options);
+  const hasSelectedFilters = _size(allSelectedFilters) > 0;
   const filters = uncappedMap((filterOptions, i) => {
     const isLastItem = i + 1 === _size(options);
     return /*#__PURE__*/React.createElement("div", {
@@ -65,7 +93,7 @@ const MultiFilterPanel = (props, context) => {
     type: "form-group",
     titleSize: "standard-light-weight"
   }), hasSelectedFilters ? /*#__PURE__*/React.createElement(Tag, {
-    label: _toString(allSelectedFilters),
+    label: _toString(_size(allSelectedFilters)),
     type: "info",
     size: "S"
   }) : null), hasSelectedFilters ? /*#__PURE__*/React.createElement("div", {
@@ -76,8 +104,9 @@ const MultiFilterPanel = (props, context) => {
     type: "text",
     "data-name": "filters-all-clear-button",
     "aria-label": "filters all clear button",
-    onClick: onClearAll
-  })) : null), filters);
+    onClick: onClearAll,
+    hoverColor: COLORS.primary_600
+  })) : null), onRemoveSelectedFilter && hasSelectedFilters ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, buildAllSelectedFilterChips(allSelectedFilters, onRemoveSelectedFilter)), FilterSeparator) : null, filters);
 };
 MultiFilterPanel.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
 MultiFilterPanel.contextTypes = {

package/es/molecule/multi-filter-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","FilterChip","FilterCheckboxAndSearch","Title","Tag","ButtonLink","Provider","GetTranslateFromContext","propTypes","style","uncappedMap","_map","convert","cap","CLEAR_ALL_BUTTON_STYLE","fontWeight","padding","FilterSeparator","createElement","className","filterSeparator","buildFilters","filterOptions","type","options","MultiFilterPanel","props","context","title","onClearAll","translate","allSelectedFilters","_pipe","_flatMap","_filter","selected","_size","hasSelectedFilters","filters","i","isLastItem","key","Fragment","header","titleContainer","titleSize","label","_toString","size","buttonContainer","customStyle","onClick","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"sourcesContent":["import React from 'react';\nimport {map, size, pipe, filter, flatMap, toString} from 'lodash/fp';\nimport FilterChip from '../../organism/filter-chip';\nimport FilterCheckboxAndSearch from '../../organism/filter-checkbox-and-search';\nimport Title from '../../atom/title';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport propTypes, {MultiFilterPanelProps, FilterOptionsProps} from './prop-types';\nimport style from './style.css';\n\n// @ts-expect-error convert is not recognized by the types\nconst uncappedMap = map.convert({cap: false});\n\nconst CLEAR_ALL_BUTTON_STYLE = {fontWeight: 'normal', padding: 0};\nconst FilterSeparator = <div className={style.filterSeparator} />;\n\nconst buildFilters = (filterOptions: FilterOptionsProps) => {\n  const {type, options} = filterOptions;\n  switch (type) {\n    case 'chip':\n      return <FilterChip {...options} />;\n    case 'checkbox':\n      return <FilterCheckboxAndSearch {...options} />;\n    default:\n      return null;\n  }\n};\n\nconst MultiFilterPanel = (props: MultiFilterPanelProps, context: WebContextValues) => {\n  const {title, onClearAll, options} = props;\n  const translate = GetTranslateFromContext(context);\n  const allSelectedFilters = pipe(\n    map('options'),\n    flatMap('options'),\n    filter({selected: true}),\n    size\n  )(options);\n  const hasSelectedFilters = allSelectedFilters > 0;\n\n  const filters = uncappedMap((filterOptions: FilterOptionsProps, i: number) => {\n    const isLastItem = i + 1 === size(options);\n\n    return (\n      <div key={i}>\n        {buildFilters(filterOptions)}\n        {isLastItem ? null : FilterSeparator}\n      </div>\n    );\n  }, options);\n\n  return (\n    <>\n      <div className={style.header}>\n        <div className={style.titleContainer}>\n          <Title title={title} type=\"form-group\" titleSize=\"standard-light-weight\" />\n          {hasSelectedFilters ? (\n            <Tag label={toString(allSelectedFilters)} type=\"info\" size=\"S\" />\n          ) : null}\n        </div>\n        {hasSelectedFilters ? (\n          <div className={style.buttonContainer}>\n            <ButtonLink\n              customStyle={CLEAR_ALL_BUTTON_STYLE}\n              label={translate('clear_all')}\n              type=\"text\"\n              data-name=\"filters-all-clear-button\"\n              aria-label=\"filters all clear button\"\n              onClick={onClearAll}\n            />\n          </div>\n        ) : null}\n      </div>\n\n      {filters}\n    </>\n  );\n};\n\nMultiFilterPanel.propTypes = propTypes;\n\nMultiFilterPanel.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default MultiFilterPanel;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","FilterChip","FilterCheckboxAndSearch","Title","Tag","ButtonLink","Provider","GetTranslateFromContext","Chip","COLORS","FilterSwitch","style","propTypes","uncappedMap","_map","convert","cap","CLEAR_ALL_BUTTON_STYLE","fontWeight","padding","FilterSeparator","createElement","className","filterSeparator","buildFilters","filterOptions","type","options","buildAllSelectedFilterChips","selectedFilters","onRemoveSelectedFilter","selectedFiltersContainer","map","filterItem","label","handleClick","key","onClick","text","textColor","neutral_500","backgroundColor","cm_grey_150","customIcon","customStyle","height","MultiFilterPanel","props","context","title","onClearAll","translate","allSelectedFilters","_pipe","_flatMap","_filter","selected","value","hasSelectedFilters","_size","filters","i","isLastItem","Fragment","header","titleContainer","titleSize","_toString","size","buttonContainer","hoverColor","primary_600","process","env","NODE_ENV","contextTypes","childContextTypes"],"sources":["../../../src/molecule/multi-filter-panel/index.tsx"],"sourcesContent":["import React from 'react';\nimport {map, size, pipe, filter, flatMap, toString} from 'lodash/fp';\nimport FilterChip from '../../organism/filter-chip';\nimport FilterCheckboxAndSearch from '../../organism/filter-checkbox-and-search';\nimport Title from '../../atom/title';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport {WebContextValues} from '../../atom/provider/web-context';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport Chip from '../../atom/chip';\nimport {COLORS} from '../../variables/colors';\nimport FilterSwitch from '../../organism/filter-switch';\nimport {FilterCheckboxAndSearchOptions} from '../../organism/filter-checkbox-and-search/props-types';\nimport {FilterChipOptionsProps} from '../../organism/filter-chip/prop-types';\nimport {FilterSwitchOptionsProps} from '../../organism/filter-switch/prop-types';\nimport style from './style.css';\nimport propTypes, {MultiFilterPanelProps, FilterOptionsProps} from './prop-types';\n\ntype SelectedFilter =\n  | FilterChipOptionsProps\n  | FilterSwitchOptionsProps\n  | FilterCheckboxAndSearchOptions;\n\n// @ts-expect-error convert is not recognized by the types\nconst uncappedMap = map.convert({cap: false});\n\nconst CLEAR_ALL_BUTTON_STYLE = {fontWeight: 'normal', padding: 0};\nconst FilterSeparator = <div className={style.filterSeparator} />;\n\nconst buildFilters = (filterOptions: FilterOptionsProps) => {\n  const {type, options} = filterOptions;\n  switch (type) {\n    case 'chip':\n      return <FilterChip {...options} />;\n    case 'checkbox':\n      return <FilterCheckboxAndSearch {...options} />;\n    case 'switch':\n      return <FilterSwitch {...options} />;\n    default:\n      return null;\n  }\n};\n\nconst buildAllSelectedFilterChips = (\n  selectedFilters: SelectedFilter[],\n  onRemoveSelectedFilter: (label: string) => void\n) => {\n  return (\n    <div className={style.selectedFiltersContainer} data-testid=\"selected-filters-container\">\n      {selectedFilters.map((filterItem: SelectedFilter) => {\n        const {label} = filterItem;\n\n        function handleClick() {\n          return onRemoveSelectedFilter(label);\n        }\n\n        return (\n          <Chip\n            key={label}\n            onClick={handleClick}\n            text={label}\n            textColor={COLORS.neutral_500}\n            backgroundColor={COLORS.cm_grey_150}\n            customIcon={'xmark'}\n            customStyle={{height: '28px', padding: '4px 8px'}}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nconst MultiFilterPanel = (props: MultiFilterPanelProps, context: WebContextValues) => {\n  const {title, onClearAll, options, onRemoveSelectedFilter = false} = props;\n  const translate = GetTranslateFromContext(context);\n  const allSelectedFilters: SelectedFilter[] = pipe(\n    map('options'),\n    flatMap('options'),\n    filter(filterOptions => filterOptions.selected || filterOptions.value === true)\n  )(options);\n  const hasSelectedFilters = size(allSelectedFilters) > 0;\n  const filters = uncappedMap((filterOptions: FilterOptionsProps, i: number) => {\n    const isLastItem = i + 1 === size(options);\n\n    return (\n      <div key={i}>\n        {buildFilters(filterOptions)}\n        {isLastItem ? null : FilterSeparator}\n      </div>\n    );\n  }, options);\n  return (\n    <>\n      <div className={style.header}>\n        <div className={style.titleContainer}>\n          <Title title={title} type=\"form-group\" titleSize=\"standard-light-weight\" />\n          {hasSelectedFilters ? (\n            <Tag label={toString(size(allSelectedFilters))} type=\"info\" size=\"S\" />\n          ) : null}\n        </div>\n        {hasSelectedFilters ? (\n          <div className={style.buttonContainer}>\n            <ButtonLink\n              customStyle={CLEAR_ALL_BUTTON_STYLE}\n              label={translate('clear_all')}\n              type=\"text\"\n              data-name=\"filters-all-clear-button\"\n              aria-label=\"filters all clear button\"\n              onClick={onClearAll}\n              hoverColor={COLORS.primary_600}\n            />\n          </div>\n        ) : null}\n      </div>\n      {onRemoveSelectedFilter && hasSelectedFilters ? (\n        <>\n          <div>{buildAllSelectedFilterChips(allSelectedFilters, onRemoveSelectedFilter)}</div>\n          {FilterSeparator}\n        </>\n      ) : null}\n      {filters}\n    </>\n  );\n};\n\nMultiFilterPanel.propTypes = propTypes;\n\nMultiFilterPanel.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nexport default MultiFilterPanel;\n"],"mappings":"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","ignoreList":[]}

package/es/molecule/multi-filter-panel/prop-types.d.ts

@@ -1,19 +1,24 @@
 import PropTypes from 'prop-types';
 import { FilterChipProps } from '../../organism/filter-chip/prop-types';
 import { FilterCheckboxAndSearchProps } from '../../organism/filter-checkbox-and-search/props-types';
+import { FilterSwitchProps } from '../../organism/filter-switch/prop-types';
 declare const propTypes: {
     title: PropTypes.Requireable<string>;
     onClearAll: PropTypes.Requireable<(...args: any[]) => any>;
+    onRemoveSelectedFilter: PropTypes.Requireable<(...args: any[]) => any>;
     options: PropTypes.Requireable<(NonNullable<PropTypes.InferProps<{
         type: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<PropTypes.InferProps<{
             title: PropTypes.Requireable<string>;
+            titleAriaLabel: PropTypes.Requireable<string>;
             onClear: PropTypes.Requireable<(...args: any[]) => any>;
             options: PropTypes.Requireable<(PropTypes.InferProps<{
                 label: PropTypes.Requireable<string>;
                 type: PropTypes.Requireable<string>;
+                textColor: PropTypes.Requireable<string>;
                 selected: PropTypes.Requireable<boolean>;
                 icon: PropTypes.Requireable<string>;
+                customIcon: PropTypes.Requireable<string>;
                 onClick: PropTypes.Requireable<(...args: any[]) => any>;
             }> | null | undefined)[]>;
         }>>;
@@ -21,6 +26,7 @@ declare const propTypes: {
         type: PropTypes.Requireable<string>;
         options: PropTypes.Requireable<PropTypes.InferProps<{
             title: PropTypes.Requireable<string>;
+            titleAriaLabel: PropTypes.Requireable<string>;
             onClear: PropTypes.Requireable<(...args: any[]) => any>;
             options: PropTypes.Requireable<(PropTypes.InferProps<{
                 label: PropTypes.Requireable<string>;
@@ -44,6 +50,20 @@ declare const propTypes: {
                 searchIconAriaLabel: PropTypes.Requireable<string>;
             }>>;
         }>>;
+    }> | PropTypes.InferProps<{
+        type: PropTypes.Requireable<string>;
+        options: PropTypes.Requireable<PropTypes.InferProps<{
+            title: PropTypes.Validator<string>;
+            titleAriaLabel: PropTypes.Requireable<string>;
+            onClear: PropTypes.Validator<(...args: any[]) => any>;
+            options: PropTypes.Requireable<(PropTypes.InferProps<{
+                label: PropTypes.Validator<string>;
+                value: PropTypes.Validator<boolean>;
+                onChange: PropTypes.Validator<(...args: any[]) => any>;
+                theme: PropTypes.Validator<string>;
+                ariaLabel: PropTypes.Validator<string>;
+            }> | null | undefined)[]>;
+        }>>;
     }> | null | undefined> | null | undefined)[]>;
 };
 export declare type OptionsChipProps = {
@@ -54,9 +74,14 @@ export declare type OptionsCheckboxProps = {
     type: 'checkbox';
     options: FilterCheckboxAndSearchProps;
 };
-export declare type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps;
+export declare type OptionsSwitchProps = {
+    type: 'switch';
+    options: FilterSwitchProps;
+};
+export declare type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps | OptionsSwitchProps;
 export declare type MultiFilterPanelProps = {
     title: string;
+    onRemoveSelectedFilter?: (label: string) => void;
     onClearAll: () => void;
     options: FilterOptionsProps[];
 };

package/es/molecule/multi-filter-panel/prop-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAA4B,EAAC,eAAe,EAAC,MAAM,uCAAuC,CAAC;AAC3F,OAAyC,EACvC,4BAA4B,EAC7B,MAAM,uDAAuD,CAAC;AAE/D,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAed,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,4BAA4B,CAAC;CACvC,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,GAAG,oBAAoB,CAAC;AAEzE,oBAAY,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAA4B,EAAC,eAAe,EAAC,MAAM,uCAAuC,CAAC;AAC3F,OAAyC,EACvC,4BAA4B,EAC7B,MAAM,uDAAuD,CAAC;AAC/D,OAA8B,EAAC,iBAAiB,EAAC,MAAM,yCAAyC,CAAC;AAEjG,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBd,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,4BAA4B,CAAC;CACvC,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,iBAAiB,CAAC;CAC5B,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAE9F,oBAAY,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/es/molecule/multi-filter-panel/prop-types.js

@@ -1,15 +1,20 @@
 import PropTypes from 'prop-types';
 import filterChipProptypes from '../../organism/filter-chip/prop-types';
 import filterCheckboxAndSearchProptypes from '../../organism/filter-checkbox-and-search/props-types';
+import filterSwitchProptypes from '../../organism/filter-switch/prop-types';
 const propTypes = {
   title: PropTypes.string,
   onClearAll: PropTypes.func,
+  onRemoveSelectedFilter: PropTypes.func,
   options: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({
     type: PropTypes.oneOf(['chip']),
     options: PropTypes.shape(filterChipProptypes)
   }), PropTypes.shape({
     type: PropTypes.oneOf(['checkbox']),
     options: PropTypes.shape(filterCheckboxAndSearchProptypes)
+  }), PropTypes.shape({
+    type: PropTypes.oneOf(['switch']),
+    options: PropTypes.shape(filterSwitchProptypes)
   })]))
 };
 export default propTypes;

package/es/molecule/multi-filter-panel/prop-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"prop-types.js","names":["PropTypes","filterChipProptypes","filterCheckboxAndSearchProptypes","propTypes","title","string","onClearAll","func","options","arrayOf","oneOfType","shape","type","oneOf"],"sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport filterChipProptypes, {FilterChipProps} from '../../organism/filter-chip/prop-types';\nimport filterCheckboxAndSearchProptypes, {\n  FilterCheckboxAndSearchProps\n} from '../../organism/filter-checkbox-and-search/props-types';\n\nconst propTypes = {\n  title: PropTypes.string,\n  onClearAll: PropTypes.func,\n  options: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape({\n        type: PropTypes.oneOf(['chip']),\n        options: PropTypes.shape(filterChipProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['checkbox']),\n        options: PropTypes.shape(filterCheckboxAndSearchProptypes)\n      })\n    ])\n  )\n};\n\nexport type OptionsChipProps = {\n  type: 'chip';\n  options: FilterChipProps;\n};\n\nexport type OptionsCheckboxProps = {\n  type: 'checkbox';\n  options: FilterCheckboxAndSearchProps;\n};\n\nexport type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps;\n\nexport type MultiFilterPanelProps = {\n  title: string;\n  onClearAll: () => void;\n  options: FilterOptionsProps[];\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,mBAAmB,MAAyB,uCAAuC;AAC1F,OAAOC,gCAAgC,MAEhC,uDAAuD;AAE9D,MAAMC,SAAS,GAAG;EAChBC,KAAK,EAAEJ,SAAS,CAACK,MAAM;EACvBC,UAAU,EAAEN,SAAS,CAACO,IAAI;EAC1BC,OAAO,EAAER,SAAS,CAACS,OAAO,CACxBT,SAAS,CAACU,SAAS,CAAC,CAClBV,SAAS,CAACW,KAAK,CAAC;IACdC,IAAI,EAAEZ,SAAS,CAACa,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/BL,OAAO,EAAER,SAAS,CAACW,KAAK,CAACV,mBAAmB;EAC9C,CAAC,CAAC,EACFD,SAAS,CAACW,KAAK,CAAC;IACdC,IAAI,EAAEZ,SAAS,CAACa,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;IACnCL,OAAO,EAAER,SAAS,CAACW,KAAK,CAACT,gCAAgC;EAC3D,CAAC,CAAC,CACH,CACH;AACF,CAAC;AAoBD,eAAeC,SAAS","ignoreList":[]}
+{"version":3,"file":"prop-types.js","names":["PropTypes","filterChipProptypes","filterCheckboxAndSearchProptypes","filterSwitchProptypes","propTypes","title","string","onClearAll","func","onRemoveSelectedFilter","options","arrayOf","oneOfType","shape","type","oneOf"],"sources":["../../../src/molecule/multi-filter-panel/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport filterChipProptypes, {FilterChipProps} from '../../organism/filter-chip/prop-types';\nimport filterCheckboxAndSearchProptypes, {\n  FilterCheckboxAndSearchProps\n} from '../../organism/filter-checkbox-and-search/props-types';\nimport filterSwitchProptypes, {FilterSwitchProps} from '../../organism/filter-switch/prop-types';\n\nconst propTypes = {\n  title: PropTypes.string,\n  onClearAll: PropTypes.func,\n  onRemoveSelectedFilter: PropTypes.func,\n  options: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape({\n        type: PropTypes.oneOf(['chip']),\n        options: PropTypes.shape(filterChipProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['checkbox']),\n        options: PropTypes.shape(filterCheckboxAndSearchProptypes)\n      }),\n      PropTypes.shape({\n        type: PropTypes.oneOf(['switch']),\n        options: PropTypes.shape(filterSwitchProptypes)\n      })\n    ])\n  )\n};\n\nexport type OptionsChipProps = {\n  type: 'chip';\n  options: FilterChipProps;\n};\n\nexport type OptionsCheckboxProps = {\n  type: 'checkbox';\n  options: FilterCheckboxAndSearchProps;\n};\n\nexport type OptionsSwitchProps = {\n  type: 'switch';\n  options: FilterSwitchProps;\n};\n\nexport type FilterOptionsProps = OptionsChipProps | OptionsCheckboxProps | OptionsSwitchProps;\n\nexport type MultiFilterPanelProps = {\n  title: string;\n  onRemoveSelectedFilter?: (label: string) => void;\n  onClearAll: () => void;\n  options: FilterOptionsProps[];\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,YAAY;AAClC,OAAOC,mBAAmB,MAAyB,uCAAuC;AAC1F,OAAOC,gCAAgC,MAEhC,uDAAuD;AAC9D,OAAOC,qBAAqB,MAA2B,yCAAyC;AAEhG,MAAMC,SAAS,GAAG;EAChBC,KAAK,EAAEL,SAAS,CAACM,MAAM;EACvBC,UAAU,EAAEP,SAAS,CAACQ,IAAI;EAC1BC,sBAAsB,EAAET,SAAS,CAACQ,IAAI;EACtCE,OAAO,EAAEV,SAAS,CAACW,OAAO,CACxBX,SAAS,CAACY,SAAS,CAAC,CAClBZ,SAAS,CAACa,KAAK,CAAC;IACdC,IAAI,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/BL,OAAO,EAAEV,SAAS,CAACa,KAAK,CAACZ,mBAAmB;EAC9C,CAAC,CAAC,EACFD,SAAS,CAACa,KAAK,CAAC;IACdC,IAAI,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;IACnCL,OAAO,EAAEV,SAAS,CAACa,KAAK,CAACX,gCAAgC;EAC3D,CAAC,CAAC,EACFF,SAAS,CAACa,KAAK,CAAC;IACdC,IAAI,EAAEd,SAAS,CAACe,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjCL,OAAO,EAAEV,SAAS,CAACa,KAAK,CAACV,qBAAqB;EAChD,CAAC,CAAC,CACH,CACH;AACF,CAAC;AA0BD,eAAeC,SAAS","ignoreList":[]}

package/es/molecule/multi-filter-panel/style.css

@@ -31,3 +31,11 @@
     align-self: stretch;
     margin: 24px 0;
 }
+
+
+.selectedFiltersContainer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 24px;
+}

package/es/molecule/quick-filters/index.d.ts

@@ -33,7 +33,7 @@ declare const QuickFilters: {
             tooltipPlacement: import("prop-types").Requireable<string>;
             'data-name': import("prop-types").Requireable<string>;
             'data-testid': import("prop-types").Requireable<string>;
-            icon: import("prop-types").Requireable<import("prop-types").InferProps<{
+            icon: import("prop-types").Requireable<NonNullable<import("prop-types").InferProps<{
                 position: import("prop-types").Requireable<string>;
                 type: import("prop-types").Requireable<string>;
                 faIcon: import("prop-types").Requireable<import("prop-types").InferProps<{
@@ -41,11 +41,19 @@ declare const QuickFilters: {
                     color: import("prop-types").Requireable<string>;
                     backgroundColor: import("prop-types").Requireable<string>;
                     size: import("prop-types").Requireable<number>;
-                    customStyle: import("prop-types").Requireable<{
-                        [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
-                    }>;
+                    customStyle: import("prop-types").Requireable<object>;
                 }>>;
-            }>>;
+            }> | (import("prop-types").InferProps<{
+                position: import("prop-types").Requireable<string>;
+                type: import("prop-types").Requireable<string>;
+                faIcon: import("prop-types").Requireable<import("prop-types").InferProps<{
+                    name: import("prop-types").Validator<string>;
+                    color: import("prop-types").Requireable<string>;
+                    backgroundColor: import("prop-types").Requireable<string>;
+                    size: import("prop-types").Requireable<number>;
+                    customStyle: import("prop-types").Requireable<object>;
+                }>>;
+            }> | null | undefined)[] | null | undefined>>;
             onClick: import("prop-types").Requireable<(...args: any[]) => any>;
             link: import("prop-types").Requireable<import("prop-types").InferProps<{
                 href: import("prop-types").Requireable<string>;
@@ -56,9 +64,8 @@ declare const QuickFilters: {
             hoverColor: import("prop-types").Requireable<string>;
             disabled: import("prop-types").Requireable<boolean>;
             className: import("prop-types").Requireable<string>;
-            customStyle: import("prop-types").Requireable<{
-                [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
-            }>;
+            customStyle: import("prop-types").Requireable<object>;
+            contentCustomStyle: import("prop-types").Requireable<object>;
             useTitle: import("prop-types").Requireable<boolean>;
             customLabelClassName: import("prop-types").Requireable<string>;
         }>>;

package/es/molecule/quick-filters/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAO5D,OAAO,EAAC,iBAAiB,EAAY,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,YAAY,cAAe,MAAM,WAAW,MAAM,SAAS,CAAC,cAAc,CAAC,SAOvF,CAAC;AA0BF,QAAA,MAAM,YAAY;2HAOf,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GnB,CAAC;AAGF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAO5D,OAAO,EAAC,iBAAiB,EAAY,MAAM,SAAS,CAAC;AAIrD,eAAO,MAAM,YAAY,cAAe,MAAM,WAAW,MAAM,SAAS,CAAC,cAAc,CAAC,SAOvF,CAAC;AA0BF,QAAA,MAAM,YAAY;2HAOf,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GnB,CAAC;AAGF,eAAe,YAAY,CAAC"}

package/es/molecule/quick-filters/types.d.ts

@@ -57,7 +57,7 @@ export declare const propTypes: {
         tooltipPlacement: PropTypes.Requireable<string>;
         'data-name': PropTypes.Requireable<string>;
         'data-testid': PropTypes.Requireable<string>;
-        icon: PropTypes.Requireable<PropTypes.InferProps<{
+        icon: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
             position: PropTypes.Requireable<string>;
             type: PropTypes.Requireable<string>;
             faIcon: PropTypes.Requireable<PropTypes.InferProps<{
@@ -65,11 +65,19 @@ export declare const propTypes: {
                 color: PropTypes.Requireable<string>;
                 backgroundColor: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<number>;
-                customStyle: PropTypes.Requireable<{
-                    [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
-                }>;
+                customStyle: PropTypes.Requireable<object>;
             }>>;
-        }>>;
+        }> | (PropTypes.InferProps<{
+            position: PropTypes.Requireable<string>;
+            type: PropTypes.Requireable<string>;
+            faIcon: PropTypes.Requireable<PropTypes.InferProps<{
+                name: PropTypes.Validator<string>;
+                color: PropTypes.Requireable<string>;
+                backgroundColor: PropTypes.Requireable<string>;
+                size: PropTypes.Requireable<number>;
+                customStyle: PropTypes.Requireable<object>;
+            }>>;
+        }> | null | undefined)[] | null | undefined>>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         link: PropTypes.Requireable<PropTypes.InferProps<{
             href: PropTypes.Requireable<string>;
@@ -80,9 +88,8 @@ export declare const propTypes: {
         hoverColor: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         className: PropTypes.Requireable<string>;
-        customStyle: PropTypes.Requireable<{
-            [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
-        }>;
+        customStyle: PropTypes.Requireable<object>;
+        contentCustomStyle: PropTypes.Requireable<object>;
         useTitle: PropTypes.Requireable<boolean>;
         customLabelClassName: PropTypes.Requireable<string>;
     }>>;

package/es/molecule/quick-filters/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAG7D,oBAAY,iBAAiB,GAAG;IAC9B,aAAa,EAAE;QACb,YAAY,EAAE,MAAM,CAAC;QACrB,YAAY,EAAE,MAAM,CAAC;QACrB,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,EAAE,OAAO,CAAC;QACzB,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,mBAAmB,EAAE,MAAM,CAAC;IAC5B,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;CAChC,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBrB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/quick-filters/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAG7D,oBAAY,iBAAiB,GAAG;IAC9B,aAAa,EAAE;QACb,YAAY,EAAE,MAAM,CAAC;QACrB,YAAY,EAAE,MAAM,CAAC;QACrB,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,EAAE,OAAO,CAAC;QACzB,cAAc,EAAE,MAAM,IAAI,CAAC;QAC3B,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,mBAAmB,EAAE,MAAM,CAAC;IAC5B,uBAAuB,EAAE,MAAM,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;IAC/B,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;CAChC,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBrB,CAAC"}