@snack-uikit/toolbar 0.10.3 → 0.10.4-preview-985e2518.0

package/README.md

@@ -24,6 +24,7 @@ Toolbar
 | onRefresh | `() => void` | - | Колбек обновления |
 | after | `ReactNode` | - | Дополнительный слот в конце тулбара |
 | moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
+| filterRow | `FilterRow<TState>` | - |  |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/components/Toolbar/Toolbar.d.ts

@@ -1,4 +1,7 @@
+import { FiltersState } from '@snack-uikit/chips';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { CheckedToolbarProps, DefaultToolbarProps } from './types';
-export type ToolbarProps = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps>;
-export declare function Toolbar({ className, after, outline, moreActions, onRefresh, search, ...rest }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+import { CheckedToolbarProps, DefaultToolbarProps, FilterRow } from './types';
+export type ToolbarProps<TState extends FiltersState> = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps> & {
+    filterRow?: FilterRow<TState>;
+};
+export declare function Toolbar<TState extends FiltersState>({ className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, ...rest }: ToolbarProps<TState>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Toolbar/Toolbar.js

@@ -21,12 +21,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const button_1 = require("@snack-uikit/button");
+const chips_1 = require("@snack-uikit/chips");
 const icons_1 = require("@snack-uikit/icons");
 const search_private_1 = require("@snack-uikit/search-private");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
 const helperComponents_1 = require("../../helperComponents");
 const helpers_1 = require("./helpers");
+const hooks_1 = require("./hooks");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function Toolbar(_a) {
   var {
@@ -35,48 +37,59 @@ function Toolbar(_a) {
       outline,
       moreActions,
       onRefresh,
-      search
+      search,
+      filterRow: filterRowProps
     } = _a,
-    rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search"]);
+    rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow"]);
   const needsBulkActions = (0, helpers_1.isBulkActionsProps)(rest);
   const hasLeftSideElements = Boolean(needsBulkActions || onRefresh);
   const resizingContainerRef = (0, react_1.useRef)(null);
+  const {
+    filterButton,
+    filterRow
+  } = (0, hooks_1.useFilters)({
+    filterRow: filterRowProps
+  });
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
-    className: (0, classnames_1.default)(styles_module_scss_1.default.container, className)
+    className: styles_module_scss_1.default.containerWrapper
   }, (0, utils_1.extractSupportProps)(rest), {
-    "data-outline": outline || undefined,
-    ref: resizingContainerRef,
-    children: [hasLeftSideElements && (0, jsx_runtime_1.jsxs)("div", {
-      className: styles_module_scss_1.default.beforeSearch,
-      children: [needsBulkActions && (0, jsx_runtime_1.jsx)(helperComponents_1.BulkActions, Object.assign({}, (0, helpers_1.extractBulkActionsProps)(rest), {
-        resizingContainerRef: resizingContainerRef
-      })), needsBulkActions && (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {}), onRefresh && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-        children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-          icon: (0, jsx_runtime_1.jsx)(icons_1.UpdateSVG, {}),
-          size: 'm',
-          className: styles_module_scss_1.default.updateButton,
-          onClick: onRefresh,
-          "data-test-id": constants_1.TEST_IDS.refreshButton
-        }), (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {})]
-      })]
-    }), search && (0, jsx_runtime_1.jsx)(search_private_1.SearchPrivate, Object.assign({}, search, {
-      className: styles_module_scss_1.default.search,
-      size: 'm',
-      "data-test-id": constants_1.TEST_IDS.search
-    })), (moreActions || after) && (0, jsx_runtime_1.jsxs)("div", {
-      className: styles_module_scss_1.default.flexRow,
-      "data-align-right": !search && !hasLeftSideElements || undefined,
-      children: [after && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-        children: [(search || hasLeftSideElements) && (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {}), (0, jsx_runtime_1.jsx)("div", {
-          "data-test-id": constants_1.TEST_IDS.after,
-          className: styles_module_scss_1.default.actions,
-          children: after
+    children: [(0, jsx_runtime_1.jsxs)("div", {
+      className: (0, classnames_1.default)(styles_module_scss_1.default.container, className),
+      "data-outline": outline || undefined,
+      ref: resizingContainerRef,
+      children: [hasLeftSideElements && (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.beforeSearch,
+        children: [needsBulkActions && (0, jsx_runtime_1.jsx)(helperComponents_1.BulkActions, Object.assign({}, (0, helpers_1.extractBulkActionsProps)(rest), {
+          resizingContainerRef: resizingContainerRef
+        })), needsBulkActions && (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {}), onRefresh && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+            icon: (0, jsx_runtime_1.jsx)(icons_1.UpdateSVG, {}),
+            size: 'm',
+            className: styles_module_scss_1.default.updateButton,
+            onClick: onRefresh,
+            "data-test-id": constants_1.TEST_IDS.refreshButton
+          }), (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {})]
         })]
-      }), moreActions && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-        children: [(0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {}), (0, jsx_runtime_1.jsx)(helperComponents_1.MoreActions, {
+      }), search && (0, jsx_runtime_1.jsx)(search_private_1.SearchPrivate, Object.assign({}, search, {
+        className: styles_module_scss_1.default.search,
+        size: 'm',
+        "data-test-id": constants_1.TEST_IDS.search
+      })), (moreActions || after || filterButton) && (0, jsx_runtime_1.jsxs)("div", {
+        className: styles_module_scss_1.default.flexRow,
+        "data-align-right": !search && !hasLeftSideElements || undefined,
+        children: [after && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [(search || hasLeftSideElements) && (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {}), (0, jsx_runtime_1.jsx)("div", {
+            "data-test-id": constants_1.TEST_IDS.after,
+            className: styles_module_scss_1.default.actions,
+            children: after
+          })]
+        }), (moreActions || filterButton) && (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {}), filterButton && (0, jsx_runtime_1.jsx)(helperComponents_1.FilterButton, Object.assign({}, filterButton)), moreActions && (0, jsx_runtime_1.jsx)(helperComponents_1.MoreActions, {
           moreActions: moreActions
         })]
       })]
-    })]
+    }), filterRow && (0, jsx_runtime_1.jsx)(chips_1.ChipChoiceRow, Object.assign({}, filterRow, {
+      size: 'xs',
+      "data-test-id": constants_1.TEST_IDS.filterRow
+    }))]
   }));
 }

package/dist/cjs/components/Toolbar/helpers.d.ts

@@ -1,3 +1,4 @@
+import { FiltersState } from '@snack-uikit/chips';
 import { ToolbarProps } from './Toolbar';
 import { ToolbarBulkActionProps } from './types';
 export declare function extractBulkActionsProps({ onCheck, checked, indeterminate, bulkActions, selectionMode, }: ToolbarBulkActionProps): {
@@ -7,4 +8,4 @@ export declare function extractBulkActionsProps({ onCheck, checked, indeterminat
     actions: import("../../helperComponents").BulkAction[];
     selectionMode: import("../../helperComponents").SelectionMode | undefined;
 };
-export declare function isBulkActionsProps(props: Partial<ToolbarProps>): props is ToolbarBulkActionProps;
+export declare function isBulkActionsProps<TState extends FiltersState>(props: Partial<ToolbarProps<TState>>): props is ToolbarBulkActionProps;

package/dist/cjs/components/Toolbar/hooks.d.ts

@@ -0,0 +1,12 @@
+import { FiltersState } from '@snack-uikit/chips';
+import { FilterButtonProps } from '../../helperComponents';
+import { FilterRow } from './types';
+type UseFiltersProps<TState extends FiltersState> = {
+    filterRow?: FilterRow<TState>;
+};
+type UseFiltersReturnType<TState extends FiltersState> = {
+    filterButton?: FilterButtonProps;
+    filterRow?: FilterRow<TState>;
+};
+export declare function useFilters<TState extends FiltersState>({ filterRow, }: UseFiltersProps<TState>): UseFiltersReturnType<TState>;
+export {};

package/dist/cjs/components/Toolbar/hooks.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFilters = useFilters;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const chips_1 = require("@snack-uikit/chips");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function useFilters(_ref) {
+  let {
+    filterRow
+  } = _ref;
+  var _a;
+  const [filtersOpen, setFiltersOpen] = (0, uncontrollable_1.useUncontrolledProp)(filterRow === null || filterRow === void 0 ? void 0 : filterRow.open, false, newValue => {
+    var _a;
+    const result = typeof newValue === 'function' ? newValue(filtersOpen) : newValue;
+    (_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(filterRow, result);
+  });
+  const [value, setValue] = (0, uncontrollable_1.useUncontrolledProp)(filterRow === null || filterRow === void 0 ? void 0 : filterRow.value, (_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.defaultValue) !== null && _a !== void 0 ? _a : {}, newValue => {
+    var _a;
+    const result = typeof newValue === 'function' ? newValue(value) : newValue;
+    (_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.onChange) === null || _a === void 0 ? void 0 : _a.call(filterRow, result);
+  });
+  const [visibleFilters, setVisibleFilters] = (0, uncontrollable_1.useUncontrolledProp)(filterRow === null || filterRow === void 0 ? void 0 : filterRow.visibleFilters, Object.keys(value), newState => {
+    var _a;
+    const result = typeof newState === 'function' ? newState(visibleFilters) : newState;
+    (_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.onVisibleFiltersChange) === null || _a === void 0 ? void 0 : _a.call(filterRow, result);
+  });
+  const patchedFilters = (0, react_1.useMemo)(() => {
+    var _a;
+    return ((_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.filters) !== null && _a !== void 0 ? _a : []).map(filter => {
+      if (['single', 'multiple'].includes(filter.type)) {
+        return Object.assign(Object.assign({}, filter), {
+          dropDownClassName: (0, classnames_1.default)(filter.dropDownClassName, styles_module_scss_1.default.list)
+        });
+      }
+      return filter;
+    });
+  }, [filterRow === null || filterRow === void 0 ? void 0 : filterRow.filters]);
+  const numberOfFilters = (0, react_1.useMemo)(() => Object.keys(value).reduce((result, filterKey) => result + Number((0, chips_1.hasFilterBeenApplied)(value[filterKey])), 0), [value]);
+  return {
+    filterButton: filterRow ? {
+      open: filtersOpen,
+      onOpenChange: setFiltersOpen,
+      numberOfFilters
+    } : undefined,
+    filterRow: filtersOpen && filterRow ? Object.assign(Object.assign({}, filterRow), {
+      open: undefined,
+      onOpenChange: undefined,
+      filters: patchedFilters,
+      value,
+      onChange: setValue,
+      visibleFilters,
+      onVisibleFiltersChange: setVisibleFilters
+    }) : undefined
+  };
+}

package/dist/cjs/components/Toolbar/styles.module.css

@@ -2,6 +2,12 @@
   box-sizing:border-box;
 }
 
+.containerWrapper{
+  gap:var(--space-toolbar-container-wrapper-gap, 8px);
+  display:flex;
+  flex-direction:column;
+}
+
 .container{
   border-radius:var(--radius-toolbar-container, 14px);
   position:relative;
@@ -71,4 +77,8 @@
 .actions{
   flex-shrink:0;
   box-sizing:border-box;
+}
+
+.list{
+  width:200px;
 }

package/dist/cjs/components/Toolbar/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
 import { BulkActionsProps, MoreActionsProps } from '../../helperComponents';
 import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
 type OptionalProps = {
@@ -35,4 +36,8 @@ export type ToolbarBulkActionProps = Omit<BulkActionsProps, 'actions'> & {
 };
 export type CheckedToolbarProps = CommonToolbarProps & ToolbarBulkActionProps & OptionalProps;
 export type DefaultToolbarProps = CommonToolbarProps & NeverOrUndefined<ToolbarBulkActionProps> & RequireAtLeastOne<OptionalProps>;
+export type FilterRow<TState extends FiltersState> = Omit<ChipChoiceRowProps<TState>, 'size' | 'data-test-id'> & {
+    open?: boolean;
+    onOpenChange?(isOpen: boolean): void;
+};
 export {};

package/dist/cjs/constants.d.ts

@@ -10,6 +10,8 @@ export declare const TEST_IDS: {
     moreBulkActionsButton: string;
     refreshButton: string;
     search: string;
+    filterButton: string;
+    filterRow: string;
     moreActionsButton: string;
     droplist: string;
     option: string;

package/dist/cjs/constants.js

@@ -16,6 +16,8 @@ exports.TEST_IDS = {
   moreBulkActionsButton: 'toolbar__more-bulk-actions-button',
   refreshButton: 'toolbar__refresh-button',
   search: 'toolbar__search',
+  filterButton: 'toolbar__filter-button',
+  filterRow: 'toolbar__filter-row',
   moreActionsButton: 'toolbar__more-actions-button',
   droplist: 'toolbar__droplist',
   option: 'toolbar__droplist-option',

package/dist/cjs/helperComponents/BulkActions/BulkActions.js

@@ -30,7 +30,7 @@ function BulkActions(_ref) {
     resizingContainerRef
   } = _ref;
   const handleKeyDown = (0, react_1.useCallback)(e => {
-    if (e.key === ' ') {
+    if (e.key === ' ' || e.key === 'Enter') {
       onCheck === null || onCheck === void 0 ? void 0 : onCheck();
     }
   }, [onCheck]);

package/dist/cjs/helperComponents/FilterButton/FilterButton.d.ts

@@ -0,0 +1,6 @@
+export type FilterButtonProps = {
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    numberOfFilters?: number;
+};
+export declare function FilterButton({ open, onOpenChange, numberOfFilters }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/FilterButton/FilterButton.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilterButton = FilterButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@snack-uikit/button");
+const icons_1 = require("@snack-uikit/icons");
+const locale_1 = require("@snack-uikit/locale");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const constants_1 = require("../../constants");
+function FilterButton(_ref) {
+  let {
+    open,
+    onOpenChange,
+    numberOfFilters
+  } = _ref;
+  const {
+    t
+  } = (0, locale_1.useLocale)('Toolbar');
+  return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
+    tip: open ? t('hideFilters') : t('showFilters'),
+    children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+      size: 'm',
+      icon: (0, jsx_runtime_1.jsx)(icons_1.FilterSVG, {}),
+      onClick: () => onOpenChange(!open),
+      counter: numberOfFilters ? {
+        value: numberOfFilters,
+        appearance: 'neutral'
+      } : undefined,
+      "data-test-id": constants_1.TEST_IDS.filterButton
+    })
+  });
+}

package/dist/cjs/helperComponents/FilterButton/index.d.ts

@@ -0,0 +1 @@
+export * from './FilterButton';

package/dist/cjs/helperComponents/FilterButton/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./FilterButton"), exports);

package/dist/cjs/helperComponents/MoreActions/MoreActions.js

@@ -40,7 +40,7 @@ function MoreActions(_ref) {
       'data-test-id': constants_1.TEST_IDS.option
     })),
     children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-      icon: (0, jsx_runtime_1.jsx)(icons_1.KebabSVG, {
+      icon: (0, jsx_runtime_1.jsx)(icons_1.MoreSVG, {
         size: 24
       }),
       size: 'm',

package/dist/cjs/helperComponents/index.d.ts

@@ -1,3 +1,4 @@
 export * from './BulkActions';
+export * from './FilterButton';
 export * from './Separator';
 export * from './MoreActions';

package/dist/cjs/helperComponents/index.js

@@ -23,5 +23,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 __exportStar(require("./BulkActions"), exports);
+__exportStar(require("./FilterButton"), exports);
 __exportStar(require("./Separator"), exports);
 __exportStar(require("./MoreActions"), exports);

package/dist/esm/components/Toolbar/Toolbar.d.ts

@@ -1,4 +1,7 @@
+import { FiltersState } from '@snack-uikit/chips';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { CheckedToolbarProps, DefaultToolbarProps } from './types';
-export type ToolbarProps = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps>;
-export declare function Toolbar({ className, after, outline, moreActions, onRefresh, search, ...rest }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+import { CheckedToolbarProps, DefaultToolbarProps, FilterRow } from './types';
+export type ToolbarProps<TState extends FiltersState> = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps> & {
+    filterRow?: FilterRow<TState>;
+};
+export declare function Toolbar<TState extends FiltersState>({ className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, ...rest }: ToolbarProps<TState>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Toolbar/Toolbar.js

@@ -13,17 +13,20 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import cn from 'classnames';
 import { useRef } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
+import { ChipChoiceRow } from '@snack-uikit/chips';
 import { UpdateSVG } from '@snack-uikit/icons';
 import { SearchPrivate } from '@snack-uikit/search-private';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { TEST_IDS } from '../../constants';
-import { BulkActions, MoreActions, Separator } from '../../helperComponents';
+import { BulkActions, FilterButton, MoreActions, Separator } from '../../helperComponents';
 import { extractBulkActionsProps, isBulkActionsProps } from './helpers';
+import { useFilters } from './hooks';
 import styles from './styles.module.css';
 export function Toolbar(_a) {
-    var { className, after, outline, moreActions, onRefresh, search } = _a, rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search"]);
+    var { className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps } = _a, rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow"]);
     const needsBulkActions = isBulkActionsProps(rest);
     const hasLeftSideElements = Boolean(needsBulkActions || onRefresh);
     const resizingContainerRef = useRef(null);
-    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-outline": outline || undefined, ref: resizingContainerRef, children: [hasLeftSideElements && (_jsxs("div", { className: styles.beforeSearch, children: [needsBulkActions && (_jsx(BulkActions, Object.assign({}, extractBulkActionsProps(rest), { resizingContainerRef: resizingContainerRef }))), needsBulkActions && _jsx(Separator, {}), onRefresh && (_jsxs(_Fragment, { children: [_jsx(ButtonFunction, { icon: _jsx(UpdateSVG, {}), size: 'm', className: styles.updateButton, onClick: onRefresh, "data-test-id": TEST_IDS.refreshButton }), _jsx(Separator, {})] }))] })), search && _jsx(SearchPrivate, Object.assign({}, search, { className: styles.search, size: 'm', "data-test-id": TEST_IDS.search })), (moreActions || after) && (_jsxs("div", { className: styles.flexRow, "data-align-right": (!search && !hasLeftSideElements) || undefined, children: [after && (_jsxs(_Fragment, { children: [(search || hasLeftSideElements) && _jsx(Separator, {}), _jsx("div", { "data-test-id": TEST_IDS.after, className: styles.actions, children: after })] })), moreActions && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(MoreActions, { moreActions: moreActions })] }))] }))] })));
+    const { filterButton, filterRow } = useFilters({ filterRow: filterRowProps });
+    return (_jsxs("div", Object.assign({ className: styles.containerWrapper }, extractSupportProps(rest), { children: [_jsxs("div", { className: cn(styles.container, className), "data-outline": outline || undefined, ref: resizingContainerRef, children: [hasLeftSideElements && (_jsxs("div", { className: styles.beforeSearch, children: [needsBulkActions && (_jsx(BulkActions, Object.assign({}, extractBulkActionsProps(rest), { resizingContainerRef: resizingContainerRef }))), needsBulkActions && _jsx(Separator, {}), onRefresh && (_jsxs(_Fragment, { children: [_jsx(ButtonFunction, { icon: _jsx(UpdateSVG, {}), size: 'm', className: styles.updateButton, onClick: onRefresh, "data-test-id": TEST_IDS.refreshButton }), _jsx(Separator, {})] }))] })), search && _jsx(SearchPrivate, Object.assign({}, search, { className: styles.search, size: 'm', "data-test-id": TEST_IDS.search })), (moreActions || after || filterButton) && (_jsxs("div", { className: styles.flexRow, "data-align-right": (!search && !hasLeftSideElements) || undefined, children: [after && (_jsxs(_Fragment, { children: [(search || hasLeftSideElements) && _jsx(Separator, {}), _jsx("div", { "data-test-id": TEST_IDS.after, className: styles.actions, children: after })] })), (moreActions || filterButton) && _jsx(Separator, {}), filterButton && _jsx(FilterButton, Object.assign({}, filterButton)), moreActions && _jsx(MoreActions, { moreActions: moreActions })] }))] }), filterRow && _jsx(ChipChoiceRow, Object.assign({}, filterRow, { size: 'xs', "data-test-id": TEST_IDS.filterRow }))] })));
 }

package/dist/esm/components/Toolbar/helpers.d.ts

@@ -1,3 +1,4 @@
+import { FiltersState } from '@snack-uikit/chips';
 import { ToolbarProps } from './Toolbar';
 import { ToolbarBulkActionProps } from './types';
 export declare function extractBulkActionsProps({ onCheck, checked, indeterminate, bulkActions, selectionMode, }: ToolbarBulkActionProps): {
@@ -7,4 +8,4 @@ export declare function extractBulkActionsProps({ onCheck, checked, indeterminat
     actions: import("../../helperComponents").BulkAction[];
     selectionMode: import("../../helperComponents").SelectionMode | undefined;
 };
-export declare function isBulkActionsProps(props: Partial<ToolbarProps>): props is ToolbarBulkActionProps;
+export declare function isBulkActionsProps<TState extends FiltersState>(props: Partial<ToolbarProps<TState>>): props is ToolbarBulkActionProps;

package/dist/esm/components/Toolbar/hooks.d.ts

@@ -0,0 +1,12 @@
+import { FiltersState } from '@snack-uikit/chips';
+import { FilterButtonProps } from '../../helperComponents';
+import { FilterRow } from './types';
+type UseFiltersProps<TState extends FiltersState> = {
+    filterRow?: FilterRow<TState>;
+};
+type UseFiltersReturnType<TState extends FiltersState> = {
+    filterButton?: FilterButtonProps;
+    filterRow?: FilterRow<TState>;
+};
+export declare function useFilters<TState extends FiltersState>({ filterRow, }: UseFiltersProps<TState>): UseFiltersReturnType<TState>;
+export {};

package/dist/esm/components/Toolbar/hooks.js

@@ -0,0 +1,38 @@
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { hasFilterBeenApplied } from '@snack-uikit/chips';
+import styles from './styles.module.css';
+export function useFilters({ filterRow, }) {
+    var _a;
+    const [filtersOpen, setFiltersOpen] = useUncontrolledProp(filterRow === null || filterRow === void 0 ? void 0 : filterRow.open, false, newValue => {
+        var _a;
+        const result = typeof newValue === 'function' ? newValue(filtersOpen) : newValue;
+        (_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(filterRow, result);
+    });
+    const [value, setValue] = useUncontrolledProp(filterRow === null || filterRow === void 0 ? void 0 : filterRow.value, ((_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.defaultValue) !== null && _a !== void 0 ? _a : {}), newValue => {
+        var _a;
+        const result = typeof newValue === 'function' ? newValue(value) : newValue;
+        (_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.onChange) === null || _a === void 0 ? void 0 : _a.call(filterRow, result);
+    });
+    const [visibleFilters, setVisibleFilters] = useUncontrolledProp(filterRow === null || filterRow === void 0 ? void 0 : filterRow.visibleFilters, Object.keys(value), newState => {
+        var _a;
+        const result = typeof newState === 'function' ? newState(visibleFilters) : newState;
+        (_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.onVisibleFiltersChange) === null || _a === void 0 ? void 0 : _a.call(filterRow, result);
+    });
+    const patchedFilters = useMemo(() => {
+        var _a;
+        return ((_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.filters) !== null && _a !== void 0 ? _a : []).map(filter => {
+            if (['single', 'multiple'].includes(filter.type)) {
+                return Object.assign(Object.assign({}, filter), { dropDownClassName: cn(filter.dropDownClassName, styles.list) });
+            }
+            return filter;
+        });
+    }, [filterRow === null || filterRow === void 0 ? void 0 : filterRow.filters]);
+    const numberOfFilters = useMemo(() => Object.keys(value).reduce((result, filterKey) => result + Number(hasFilterBeenApplied(value[filterKey])), 0), [value]);
+    return {
+        filterButton: filterRow ? { open: filtersOpen, onOpenChange: setFiltersOpen, numberOfFilters } : undefined,
+        filterRow: filtersOpen && filterRow
+            ? Object.assign(Object.assign({}, filterRow), { open: undefined, onOpenChange: undefined, filters: patchedFilters, value, onChange: setValue, visibleFilters, onVisibleFiltersChange: setVisibleFilters }) : undefined,
+    };
+}

package/dist/esm/components/Toolbar/styles.module.css

@@ -2,6 +2,12 @@
   box-sizing:border-box;
 }
 
+.containerWrapper{
+  gap:var(--space-toolbar-container-wrapper-gap, 8px);
+  display:flex;
+  flex-direction:column;
+}
+
 .container{
   border-radius:var(--radius-toolbar-container, 14px);
   position:relative;
@@ -71,4 +77,8 @@
 .actions{
   flex-shrink:0;
   box-sizing:border-box;
+}
+
+.list{
+  width:200px;
 }

package/dist/esm/components/Toolbar/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
 import { BulkActionsProps, MoreActionsProps } from '../../helperComponents';
 import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
 type OptionalProps = {
@@ -35,4 +36,8 @@ export type ToolbarBulkActionProps = Omit<BulkActionsProps, 'actions'> & {
 };
 export type CheckedToolbarProps = CommonToolbarProps & ToolbarBulkActionProps & OptionalProps;
 export type DefaultToolbarProps = CommonToolbarProps & NeverOrUndefined<ToolbarBulkActionProps> & RequireAtLeastOne<OptionalProps>;
+export type FilterRow<TState extends FiltersState> = Omit<ChipChoiceRowProps<TState>, 'size' | 'data-test-id'> & {
+    open?: boolean;
+    onOpenChange?(isOpen: boolean): void;
+};
 export {};

package/dist/esm/constants.d.ts

@@ -10,6 +10,8 @@ export declare const TEST_IDS: {
     moreBulkActionsButton: string;
     refreshButton: string;
     search: string;
+    filterButton: string;
+    filterRow: string;
     moreActionsButton: string;
     droplist: string;
     option: string;

package/dist/esm/constants.js

@@ -10,6 +10,8 @@ export const TEST_IDS = {
     moreBulkActionsButton: 'toolbar__more-bulk-actions-button',
     refreshButton: 'toolbar__refresh-button',
     search: 'toolbar__search',
+    filterButton: 'toolbar__filter-button',
+    filterRow: 'toolbar__filter-row',
     moreActionsButton: 'toolbar__more-actions-button',
     droplist: 'toolbar__droplist',
     option: 'toolbar__droplist-option',

package/dist/esm/helperComponents/BulkActions/BulkActions.js

@@ -11,7 +11,7 @@ import { SELECTION_MODE } from './constants';
 import styles from './styles.module.css';
 export function BulkActions({ actions, checked, onCheck, indeterminate, selectionMode = SELECTION_MODE.Multiple, resizingContainerRef, }) {
     const handleKeyDown = useCallback((e) => {
-        if (e.key === ' ') {
+        if (e.key === ' ' || e.key === 'Enter') {
             onCheck === null || onCheck === void 0 ? void 0 : onCheck();
         }
     }, [onCheck]);

package/dist/esm/helperComponents/FilterButton/FilterButton.d.ts

@@ -0,0 +1,6 @@
+export type FilterButtonProps = {
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    numberOfFilters?: number;
+};
+export declare function FilterButton({ open, onOpenChange, numberOfFilters }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/FilterButton/FilterButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonFunction } from '@snack-uikit/button';
+import { FilterSVG } from '@snack-uikit/icons';
+import { useLocale } from '@snack-uikit/locale';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { TEST_IDS } from '../../constants';
+export function FilterButton({ open, onOpenChange, numberOfFilters }) {
+    const { t } = useLocale('Toolbar');
+    return (_jsx(Tooltip, { tip: open ? t('hideFilters') : t('showFilters'), children: _jsx(ButtonFunction, { size: 'm', icon: _jsx(FilterSVG, {}), onClick: () => onOpenChange(!open), counter: numberOfFilters ? { value: numberOfFilters, appearance: 'neutral' } : undefined, "data-test-id": TEST_IDS.filterButton }) }));
+}

package/dist/esm/helperComponents/FilterButton/index.d.ts

@@ -0,0 +1 @@
+export * from './FilterButton';

package/dist/esm/helperComponents/FilterButton/index.js

@@ -0,0 +1 @@
+export * from './FilterButton';

package/dist/esm/helperComponents/MoreActions/MoreActions.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
-import { KebabSVG } from '@snack-uikit/icons';
+import { MoreSVG } from '@snack-uikit/icons';
 import { Droplist } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
 import { TEST_IDS } from '../../constants';
@@ -19,5 +19,5 @@ export function MoreActions({ moreActions }) {
             beforeContent: item.icon,
             afterContent: item.tagLabel ? _jsx(Tag, { label: item.tagLabel }) : undefined,
             'data-test-id': TEST_IDS.option,
-        })), children: _jsx(ButtonFunction, { icon: _jsx(KebabSVG, { size: 24 }), size: 'm', "data-test-id": TEST_IDS.moreActionsButton }) }));
+        })), children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), size: 'm', "data-test-id": TEST_IDS.moreActionsButton }) }));
 }

package/dist/esm/helperComponents/index.d.ts

@@ -1,3 +1,4 @@
 export * from './BulkActions';
+export * from './FilterButton';
 export * from './Separator';
 export * from './MoreActions';

package/dist/esm/helperComponents/index.js

@@ -1,3 +1,4 @@
 export * from './BulkActions';
+export * from './FilterButton';
 export * from './Separator';
 export * from './MoreActions';

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toolbar",
-  "version": "0.10.3",
+  "version": "0.10.4-preview-985e2518.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,15 +36,20 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.6",
+    "@snack-uikit/button": "0.19.7-preview-985e2518.0",
+    "@snack-uikit/chips": "0.24.4-preview-985e2518.0",
     "@snack-uikit/icons": "0.24.2",
-    "@snack-uikit/list": "0.24.1",
+    "@snack-uikit/list": "0.24.2-preview-985e2518.0",
     "@snack-uikit/search-private": "0.4.9",
     "@snack-uikit/tag": "0.12.2",
     "@snack-uikit/toggles": "0.13.5",
     "@snack-uikit/tooltip": "0.16.0",
     "@snack-uikit/utils": "3.7.0",
-    "classnames": "2.5.1"
+    "classnames": "2.5.1",
+    "uncontrollable": "8.0.4"
   },
-  "gitHead": "4beda461fbd94378a1534458d7942270226a39ef"
+  "peerDependencies": {
+    "@snack-uikit/locale": "*"
+  },
+  "gitHead": "a09c8f36ad95bbe977dd1eeadd594b40b3458bdc"
 }

package/src/components/Toolbar/Toolbar.tsx

@@ -2,75 +2,88 @@ import cn from 'classnames';
 import { useRef } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
+import { ChipChoiceRow, FiltersState } from '@snack-uikit/chips';
 import { UpdateSVG } from '@snack-uikit/icons';
 import { SearchPrivate } from '@snack-uikit/search-private';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { TEST_IDS } from '../../constants';
-import { BulkActions, MoreActions, Separator } from '../../helperComponents';
+import { BulkActions, FilterButton, MoreActions, Separator } from '../../helperComponents';
 import { extractBulkActionsProps, isBulkActionsProps } from './helpers';
+import { useFilters } from './hooks';
 import styles from './styles.module.scss';
-import { CheckedToolbarProps, DefaultToolbarProps } from './types';
+import { CheckedToolbarProps, DefaultToolbarProps, FilterRow } from './types';
 
-export type ToolbarProps = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps>;
+export type ToolbarProps<TState extends FiltersState> = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps> & {
+  filterRow?: FilterRow<TState>;
+};
 
-export function Toolbar({ className, after, outline, moreActions, onRefresh, search, ...rest }: ToolbarProps) {
+export function Toolbar<TState extends FiltersState>({
+  className,
+  after,
+  outline,
+  moreActions,
+  onRefresh,
+  search,
+  filterRow: filterRowProps,
+  ...rest
+}: ToolbarProps<TState>) {
   const needsBulkActions = isBulkActionsProps(rest);
   const hasLeftSideElements = Boolean(needsBulkActions || onRefresh);
   const resizingContainerRef = useRef<HTMLDivElement>(null);
 
+  const { filterButton, filterRow } = useFilters<TState>({ filterRow: filterRowProps });
+
   return (
-    <div
-      className={cn(styles.container, className)}
-      {...extractSupportProps(rest)}
-      data-outline={outline || undefined}
-      ref={resizingContainerRef}
-    >
-      {hasLeftSideElements && (
-        <div className={styles.beforeSearch}>
-          {needsBulkActions && (
-            <BulkActions {...extractBulkActionsProps(rest)} resizingContainerRef={resizingContainerRef} />
-          )}
+    <div className={styles.containerWrapper} {...extractSupportProps(rest)}>
+      <div className={cn(styles.container, className)} data-outline={outline || undefined} ref={resizingContainerRef}>
+        {hasLeftSideElements && (
+          <div className={styles.beforeSearch}>
+            {needsBulkActions && (
+              <BulkActions {...extractBulkActionsProps(rest)} resizingContainerRef={resizingContainerRef} />
+            )}
+
+            {needsBulkActions && <Separator />}
+
+            {onRefresh && (
+              <>
+                <ButtonFunction
+                  icon={<UpdateSVG />}
+                  size='m'
+                  className={styles.updateButton}
+                  onClick={onRefresh}
+                  data-test-id={TEST_IDS.refreshButton}
+                />
+                <Separator />
+              </>
+            )}
+          </div>
+        )}
+
+        {search && <SearchPrivate {...search} className={styles.search} size='m' data-test-id={TEST_IDS.search} />}
 
-          {needsBulkActions && <Separator />}
+        {(moreActions || after || filterButton) && (
+          <div className={styles.flexRow} data-align-right={(!search && !hasLeftSideElements) || undefined}>
+            {after && (
+              <>
+                {(search || hasLeftSideElements) && <Separator />}
 
-          {onRefresh && (
-            <>
-              <ButtonFunction
-                icon={<UpdateSVG />}
-                size='m'
-                className={styles.updateButton}
-                onClick={onRefresh}
-                data-test-id={TEST_IDS.refreshButton}
-              />
-              <Separator />
-            </>
-          )}
-        </div>
-      )}
+                <div data-test-id={TEST_IDS.after} className={styles.actions}>
+                  {after}
+                </div>
+              </>
+            )}
 
-      {search && <SearchPrivate {...search} className={styles.search} size='m' data-test-id={TEST_IDS.search} />}
+            {(moreActions || filterButton) && <Separator />}
 
-      {(moreActions || after) && (
-        <div className={styles.flexRow} data-align-right={(!search && !hasLeftSideElements) || undefined}>
-          {after && (
-            <>
-              {(search || hasLeftSideElements) && <Separator />}
+            {filterButton && <FilterButton {...filterButton} />}
 
-              <div data-test-id={TEST_IDS.after} className={styles.actions}>
-                {after}
-              </div>
-            </>
-          )}
+            {moreActions && <MoreActions moreActions={moreActions} />}
+          </div>
+        )}
+      </div>
 
-          {moreActions && (
-            <>
-              <Separator />
-              <MoreActions moreActions={moreActions} />
-            </>
-          )}
-        </div>
-      )}
+      {filterRow && <ChipChoiceRow<TState> {...filterRow} size='xs' data-test-id={TEST_IDS.filterRow} />}
     </div>
   );
 }

package/src/components/Toolbar/helpers.ts

@@ -1,3 +1,5 @@
+import { FiltersState } from '@snack-uikit/chips';
+
 import { ToolbarProps } from './Toolbar';
 import { ToolbarBulkActionProps } from './types';
 
@@ -11,7 +13,9 @@ export function extractBulkActionsProps({
   return { onCheck, checked, indeterminate, actions: bulkActions, selectionMode };
 }
 
-export function isBulkActionsProps(props: Partial<ToolbarProps>): props is ToolbarBulkActionProps {
+export function isBulkActionsProps<TState extends FiltersState>(
+  props: Partial<ToolbarProps<TState>>,
+): props is ToolbarBulkActionProps {
   return (
     'bulkActions' in props &&
     Array.isArray(props.bulkActions) &&

package/src/components/Toolbar/hooks.ts

@@ -0,0 +1,82 @@
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { FiltersState, hasFilterBeenApplied } from '@snack-uikit/chips';
+
+import { FilterButtonProps } from '../../helperComponents';
+import styles from './styles.module.scss';
+import { FilterRow } from './types';
+
+type UseFiltersProps<TState extends FiltersState> = {
+  filterRow?: FilterRow<TState>;
+};
+
+type UseFiltersReturnType<TState extends FiltersState> = {
+  filterButton?: FilterButtonProps;
+  filterRow?: FilterRow<TState>;
+};
+
+export function useFilters<TState extends FiltersState>({
+  filterRow,
+}: UseFiltersProps<TState>): UseFiltersReturnType<TState> {
+  const [filtersOpen, setFiltersOpen] = useUncontrolledProp<boolean>(filterRow?.open, false, newValue => {
+    const result = typeof newValue === 'function' ? newValue(filtersOpen) : newValue;
+    filterRow?.onOpenChange?.(result);
+  });
+
+  const [value, setValue] = useUncontrolledProp<TState>(
+    filterRow?.value,
+    (filterRow?.defaultValue ?? {}) as TState,
+    newValue => {
+      const result = typeof newValue === 'function' ? newValue(value) : newValue;
+      filterRow?.onChange?.(result);
+    },
+  );
+
+  const [visibleFilters, setVisibleFilters] = useUncontrolledProp<string[]>(
+    filterRow?.visibleFilters,
+    Object.keys(value),
+    newState => {
+      const result = typeof newState === 'function' ? newState(visibleFilters) : newState;
+      filterRow?.onVisibleFiltersChange?.(result);
+    },
+  );
+
+  const patchedFilters = useMemo(
+    () =>
+      (filterRow?.filters ?? []).map(filter => {
+        if (['single', 'multiple'].includes(filter.type)) {
+          return {
+            ...filter,
+            dropDownClassName: cn(filter.dropDownClassName, styles.list),
+          };
+        }
+
+        return filter;
+      }),
+    [filterRow?.filters],
+  );
+
+  const numberOfFilters = useMemo(
+    () => Object.keys(value).reduce((result, filterKey) => result + Number(hasFilterBeenApplied(value[filterKey])), 0),
+    [value],
+  );
+
+  return {
+    filterButton: filterRow ? { open: filtersOpen, onOpenChange: setFiltersOpen, numberOfFilters } : undefined,
+    filterRow:
+      filtersOpen && filterRow
+        ? {
+            ...filterRow,
+            open: undefined,
+            onOpenChange: undefined,
+            filters: patchedFilters,
+            value,
+            onChange: setValue,
+            visibleFilters,
+            onVisibleFiltersChange: setVisibleFilters,
+          }
+        : undefined,
+  };
+}

package/src/components/Toolbar/styles.module.scss

@@ -5,6 +5,13 @@
   box-sizing: border-box;
 }
 
+.containerWrapper {
+  @include element.composite-var(toolbar.$toolbar-container-wrapper);
+
+  display: flex;
+  flex-direction: column;
+}
+
 .container {
   @include element.composite-var(toolbar.$toolbar-container);
 
@@ -87,3 +94,7 @@
   flex-shrink: 0;
   box-sizing: border-box;
 }
+
+.list {
+  width: 200px;
+}

package/src/components/Toolbar/types.ts

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 
+import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
+
 import { BulkActionsProps, MoreActionsProps } from '../../helperComponents';
 import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
 
@@ -43,3 +45,8 @@ export type CheckedToolbarProps = CommonToolbarProps & ToolbarBulkActionProps &
 export type DefaultToolbarProps = CommonToolbarProps &
   NeverOrUndefined<ToolbarBulkActionProps> &
   RequireAtLeastOne<OptionalProps>;
+
+export type FilterRow<TState extends FiltersState> = Omit<ChipChoiceRowProps<TState>, 'size' | 'data-test-id'> & {
+  open?: boolean;
+  onOpenChange?(isOpen: boolean): void;
+};

package/src/constants.ts

@@ -10,6 +10,8 @@ export const TEST_IDS = {
   moreBulkActionsButton: 'toolbar__more-bulk-actions-button',
   refreshButton: 'toolbar__refresh-button',
   search: 'toolbar__search',
+  filterButton: 'toolbar__filter-button',
+  filterRow: 'toolbar__filter-row',
   moreActionsButton: 'toolbar__more-actions-button',
   droplist: 'toolbar__droplist',
   option: 'toolbar__droplist-option',

package/src/helperComponents/BulkActions/BulkActions.tsx

@@ -24,7 +24,7 @@ export function BulkActions({
 }) {
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLDivElement>) => {
-      if (e.key === ' ') {
+      if (e.key === ' ' || e.key === 'Enter') {
         onCheck?.();
       }
     },

package/src/helperComponents/FilterButton/FilterButton.tsx

@@ -0,0 +1,28 @@
+import { ButtonFunction } from '@snack-uikit/button';
+import { FilterSVG } from '@snack-uikit/icons';
+import { useLocale } from '@snack-uikit/locale';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+import { TEST_IDS } from '../../constants';
+
+export type FilterButtonProps = {
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  numberOfFilters?: number;
+};
+
+export function FilterButton({ open, onOpenChange, numberOfFilters }: FilterButtonProps) {
+  const { t } = useLocale('Toolbar');
+
+  return (
+    <Tooltip tip={open ? t('hideFilters') : t('showFilters')}>
+      <ButtonFunction
+        size='m'
+        icon={<FilterSVG />}
+        onClick={() => onOpenChange(!open)}
+        counter={numberOfFilters ? { value: numberOfFilters, appearance: 'neutral' } : undefined}
+        data-test-id={TEST_IDS.filterButton}
+      />
+    </Tooltip>
+  );
+}

package/src/helperComponents/FilterButton/index.ts

@@ -0,0 +1 @@
+export * from './FilterButton';

package/src/helperComponents/MoreActions/MoreActions.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useState } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
-import { KebabSVG } from '@snack-uikit/icons';
+import { MoreSVG } from '@snack-uikit/icons';
 import { BaseItemProps, Droplist } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
 
@@ -41,7 +41,7 @@ export function MoreActions({ moreActions }: MoreActionsProps) {
         'data-test-id': TEST_IDS.option,
       }))}
     >
-      <ButtonFunction icon={<KebabSVG size={24} />} size='m' data-test-id={TEST_IDS.moreActionsButton} />
+      <ButtonFunction icon={<MoreSVG size={24} />} size='m' data-test-id={TEST_IDS.moreActionsButton} />
     </Droplist>
   );
 }

package/src/helperComponents/index.ts

@@ -1,3 +1,4 @@
 export * from './BulkActions';
+export * from './FilterButton';
 export * from './Separator';
 export * from './MoreActions';