@snack-uikit/toolbar 0.10.2-preview-08c7f775.0 → 0.10.3

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.10.3 (2025-02-04)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.24.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/tooltip@0.16.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/tooltip/CHANGELOG.md)
+
+
+
+
+
+## 0.10.2 (2025-02-04)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.24.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
 ## 0.10.1 (2025-01-31)
 
 

package/README.md

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

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

@@ -1,7 +1,4 @@
-import { FiltersState } from '@snack-uikit/chips';
 import { WithSupportProps } from '@snack-uikit/utils';
-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;
+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;

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

@@ -21,14 +21,12 @@ 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 {
@@ -37,59 +35,48 @@ function Toolbar(_a) {
       outline,
       moreActions,
       onRefresh,
-      search,
-      filterRow: filterRowProps
+      search
     } = _a,
-    rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow"]);
+    rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search"]);
   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: styles_module_scss_1.default.containerWrapper
+    className: (0, classnames_1.default)(styles_module_scss_1.default.container, className)
   }, (0, utils_1.extractSupportProps)(rest), {
-    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, {})]
+    "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
         })]
-      }), 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 && (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, {
           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,4 +1,3 @@
-import { FiltersState } from '@snack-uikit/chips';
 import { ToolbarProps } from './Toolbar';
 import { ToolbarBulkActionProps } from './types';
 export declare function extractBulkActionsProps({ onCheck, checked, indeterminate, bulkActions, selectionMode, }: ToolbarBulkActionProps): {
@@ -8,4 +7,4 @@ export declare function extractBulkActionsProps({ onCheck, checked, indeterminat
     actions: import("../../helperComponents").BulkAction[];
     selectionMode: import("../../helperComponents").SelectionMode | undefined;
 };
-export declare function isBulkActionsProps<TState extends FiltersState>(props: Partial<ToolbarProps<TState>>): props is ToolbarBulkActionProps;
+export declare function isBulkActionsProps(props: Partial<ToolbarProps>): props is ToolbarBulkActionProps;

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

@@ -2,12 +2,6 @@
   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;
@@ -77,8 +71,4 @@
 .actions{
   flex-shrink:0;
   box-sizing:border-box;
-}
-
-.list{
-  width:200px;
 }

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

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
 import { BulkActionsProps, MoreActionsProps } from '../../helperComponents';
 import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
 type OptionalProps = {
@@ -36,8 +35,4 @@ 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,8 +10,6 @@ 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,8 +16,6 @@ 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/index.d.ts

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

package/dist/cjs/helperComponents/index.js

@@ -23,6 +23,5 @@ 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,7 +1,4 @@
-import { FiltersState } from '@snack-uikit/chips';
 import { WithSupportProps } from '@snack-uikit/utils';
-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;
+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;

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

@@ -13,20 +13,17 @@ 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, FilterButton, MoreActions, Separator } from '../../helperComponents';
+import { BulkActions, 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, filterRow: filterRowProps } = _a, rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow"]);
+    var { className, after, outline, moreActions, onRefresh, search } = _a, rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search"]);
     const needsBulkActions = isBulkActionsProps(rest);
     const hasLeftSideElements = Boolean(needsBulkActions || onRefresh);
     const resizingContainerRef = useRef(null);
-    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 }))] })));
+    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 })] }))] }))] })));
 }

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

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

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

@@ -2,12 +2,6 @@
   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;
@@ -77,8 +71,4 @@
 .actions{
   flex-shrink:0;
   box-sizing:border-box;
-}
-
-.list{
-  width:200px;
 }

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

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
 import { BulkActionsProps, MoreActionsProps } from '../../helperComponents';
 import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
 type OptionalProps = {
@@ -36,8 +35,4 @@ 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,8 +10,6 @@ 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,8 +10,6 @@ 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/index.d.ts

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

package/dist/esm/helperComponents/index.js

@@ -1,4 +1,3 @@
 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.2-preview-08c7f775.0",
+  "version": "0.10.3",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,20 +36,15 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.7-preview-08c7f775.0",
-    "@snack-uikit/chips": "0.24.2-preview-08c7f775.0",
+    "@snack-uikit/button": "0.19.6",
     "@snack-uikit/icons": "0.24.2",
-    "@snack-uikit/list": "0.23.2-preview-08c7f775.0",
+    "@snack-uikit/list": "0.24.1",
     "@snack-uikit/search-private": "0.4.9",
     "@snack-uikit/tag": "0.12.2",
     "@snack-uikit/toggles": "0.13.5",
-    "@snack-uikit/tooltip": "0.15.5",
+    "@snack-uikit/tooltip": "0.16.0",
     "@snack-uikit/utils": "3.7.0",
-    "classnames": "2.5.1",
-    "uncontrollable": "8.0.4"
+    "classnames": "2.5.1"
   },
-  "peerDependencies": {
-    "@snack-uikit/locale": "*"
-  },
-  "gitHead": "2f4d6256c36e231fb66b7b54e48cab8e916d6c79"
+  "gitHead": "4beda461fbd94378a1534458d7942270226a39ef"
 }

package/src/components/Toolbar/Toolbar.tsx

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

package/src/components/Toolbar/helpers.ts

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

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

@@ -5,13 +5,6 @@
   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);
 
@@ -94,7 +87,3 @@
   flex-shrink: 0;
   box-sizing: border-box;
 }
-
-.list {
-  width: 200px;
-}

package/src/components/Toolbar/types.ts

@@ -1,7 +1,5 @@
 import { ReactNode } from 'react';
 
-import { ChipChoiceRowProps, FiltersState } from '@snack-uikit/chips';
-
 import { BulkActionsProps, MoreActionsProps } from '../../helperComponents';
 import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
 
@@ -45,8 +43,3 @@ 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,8 +10,6 @@ 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/index.ts

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,65 +0,0 @@
-"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/helperComponents/FilterButton/FilterButton.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,35 +0,0 @@
-"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

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

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

@@ -1,25 +0,0 @@
-"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/esm/components/Toolbar/hooks.d.ts

@@ -1,12 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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/helperComponents/FilterButton/FilterButton.d.ts

@@ -1,6 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

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

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

package/src/components/Toolbar/hooks.ts

@@ -1,82 +0,0 @@
-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/helperComponents/FilterButton/FilterButton.tsx

@@ -1,28 +0,0 @@
-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

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