@snack-uikit/toolbar 0.9.18 → 0.10.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.10.0 (2025-01-23)
+
+
+### BREAKING CHANGES
+
+
+* **PDS-926:** add bulk actions, remove onDelete and before props ([a871db9](https://github.com/cloud-ru-tech/snack-uikit/commit/a871db9ea3446189852704ee135e8a510d2f7204))
+
+
+
+
 ## 0.9.18 (2025-01-22)
 
 ### Only dependencies have been changed

package/README.md

@@ -17,12 +17,11 @@ Toolbar
 | className | `string` | - | Класснейм |
 | outline | `boolean` | - | Внешний бордер |
 | onCheck | `() => void` | - | Колбек смены значения чекбокса |
-| onDelete | `() => void` | - | Колбек удаления |
-| checked | `boolean` | - | Значения чекбокса |
+| checked | `boolean` | - | Значение чекбокса |
 | indeterminate | `boolean` | - | Состояние частичного выбора |
 | selectionMode | enum SelectionMode: `"single"`, `"multiple"` | 'multiple' | Режим выбора |
+| bulkActions | `BulkAction[]` | - | Список массовых действий |
 | onRefresh | `() => void` | - | Колбек обновления |
-| before | `ReactNode` | - | Дополнительный слот в начале Тулбара |
 | after | `ReactNode` | - | Дополнительный слот в конце тулбара |
 | moreActions | `Action[]` | - | Элементы выпадающего списка кнопки с действиями |
 

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

@@ -1,4 +1,4 @@
 import { WithSupportProps } from '@snack-uikit/utils';
 import { CheckedToolbarProps, DefaultToolbarProps } from './types';
 export type ToolbarProps = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps>;
-export declare function Toolbar({ className, before, after, outline, moreActions, onRefresh, search, ...rest }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -19,6 +19,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Toolbar = Toolbar;
 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 icons_1 = require("@snack-uikit/icons");
 const search_private_1 = require("@snack-uikit/search-private");
@@ -30,27 +31,26 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function Toolbar(_a) {
   var {
       className,
-      before,
       after,
       outline,
       moreActions,
       onRefresh,
       search
     } = _a,
-    rest = __rest(_a, ["className", "before", "after", "outline", "moreActions", "onRefresh", "search"]);
-  const needsDeleteAction = (0, helpers_1.isDeleteActionProps)(rest);
-  const hasLeftSideElements = Boolean(needsDeleteAction || before || onRefresh);
+    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);
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
     className: (0, classnames_1.default)(styles_module_scss_1.default.container, className)
   }, (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.flexRow,
-      children: [needsDeleteAction && (0, jsx_runtime_1.jsx)(helperComponents_1.DeleteAction, Object.assign({}, (0, helpers_1.extractDeleteActionProps)(rest))), before && (0, jsx_runtime_1.jsx)("div", {
-        "data-test-id": constants_1.TEST_IDS.before,
-        className: styles_module_scss_1.default.actions,
-        children: before
-      }), (needsDeleteAction || before) && (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, {}), onRefresh && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+      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',

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

@@ -1,10 +1,10 @@
 import { ToolbarProps } from './Toolbar';
-import { CheckedToolbarProps } from './types';
-export declare function extractDeleteActionProps({ onCheck, checked, indeterminate, onDelete, selectionMode, }: Omit<CheckedToolbarProps, 'onRefresh'>): {
+import { ToolbarBulkActionProps } from './types';
+export declare function extractBulkActionsProps({ onCheck, checked, indeterminate, bulkActions, selectionMode, }: ToolbarBulkActionProps): {
     onCheck: (() => void) | undefined;
     checked: boolean | undefined;
     indeterminate: boolean | undefined;
-    onDelete: (() => void) | undefined;
+    actions: import("../../helperComponents").BulkAction[];
     selectionMode: import("../../helperComponents").SelectionMode | undefined;
 };
-export declare function isDeleteActionProps(props: Partial<ToolbarProps>): props is CheckedToolbarProps;
+export declare function isBulkActionsProps(props: Partial<ToolbarProps>): props is ToolbarBulkActionProps;

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

@@ -3,24 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractDeleteActionProps = extractDeleteActionProps;
-exports.isDeleteActionProps = isDeleteActionProps;
-function extractDeleteActionProps(_ref) {
+exports.extractBulkActionsProps = extractBulkActionsProps;
+exports.isBulkActionsProps = isBulkActionsProps;
+function extractBulkActionsProps(_ref) {
   let {
     onCheck,
     checked,
     indeterminate,
-    onDelete,
+    bulkActions = [],
     selectionMode
   } = _ref;
   return {
     onCheck,
     checked,
     indeterminate,
-    onDelete,
+    actions: bulkActions,
     selectionMode
   };
 }
-function isDeleteActionProps(props) {
-  return 'onDelete' in props && props.onDelete !== undefined || 'checked' in props && props.checked !== undefined && 'onCheck' in props && props.onCheck !== undefined && 'selectionMode' in props && props.selectionMode === 'multiple';
+function isBulkActionsProps(props) {
+  return 'bulkActions' in props && Array.isArray(props.bulkActions) && props.bulkActions.length > 0 && 'selectionMode' in props && props.selectionMode === 'multiple';
 }

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

@@ -30,6 +30,7 @@
   padding-left:var(--space-toolbar-search-horizontal-padding, 8px);
   padding-right:var(--space-toolbar-search-horizontal-padding, 8px);
   border-radius:var(--radius-toolbar-search, 14px);
+  min-width:var(--size-toolbar-search-min-width, 80px);
 }
 .search:focus-within{
   outline-width:var(--border-state-focus-s-border-width, 2px);
@@ -39,6 +40,9 @@
   outline-color:var(--sys-available-complementary, #1c1c24);
 }
 
+.updateButton{
+  flex-shrink:0;
+}
 .updateButton svg{
   transform:rotate(360deg);
   transition:transform 0.5s;
@@ -48,6 +52,13 @@
   transition-duration:0s;
 }
 
+.beforeSearch{
+  display:flex;
+  flex-shrink:1;
+  box-sizing:border-box;
+  min-width:0;
+}
+
 .flexRow{
   display:flex;
   flex-shrink:0;

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

@@ -1,11 +1,9 @@
 import { ReactNode } from 'react';
-import { DeleteActionProps, MoreActionsProps } from '../../helperComponents';
+import { BulkActionsProps, MoreActionsProps } from '../../helperComponents';
 import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
 type OptionalProps = {
     /** Колбек обновления */
     onRefresh?(): void;
-    /** Дополнительный слот в начале Тулбара */
-    before?: ReactNode;
     /** Дополнительный слот в конце тулбара */
     after?: ReactNode;
     /** Элементы выпадающего списка кнопки с действиями */
@@ -31,6 +29,10 @@ export type CommonToolbarProps = {
     /** Внешний бордер */
     outline?: boolean;
 };
-export type CheckedToolbarProps = CommonToolbarProps & DeleteActionProps & OptionalProps;
-export type DefaultToolbarProps = CommonToolbarProps & NeverOrUndefined<DeleteActionProps> & RequireAtLeastOne<OptionalProps>;
+export type ToolbarBulkActionProps = Omit<BulkActionsProps, 'actions'> & {
+    /** Список массовых действий */
+    bulkActions?: BulkActionsProps['actions'];
+};
+export type CheckedToolbarProps = CommonToolbarProps & ToolbarBulkActionProps & OptionalProps;
+export type DefaultToolbarProps = CommonToolbarProps & NeverOrUndefined<ToolbarBulkActionProps> & RequireAtLeastOne<OptionalProps>;
 export {};

package/dist/cjs/constants.d.ts

@@ -1,12 +1,17 @@
 export declare const TEST_IDS: {
     main: string;
     checkbox: string;
-    deleteButton: string;
+    confirmAction: string;
+    rejectAction: string;
+    deleteAction: string;
+    deactivateAction: string;
+    disabledAction: string;
+    bulkActions: string;
+    moreBulkActionsButton: string;
     refreshButton: string;
     search: string;
     moreActionsButton: string;
     droplist: string;
     option: string;
-    before: string;
     after: string;
 };

package/dist/cjs/constants.js

@@ -7,12 +7,17 @@ exports.TEST_IDS = void 0;
 exports.TEST_IDS = {
   main: 'toolbar',
   checkbox: 'toolbar__checkbox',
-  deleteButton: 'toolbar__delete-button',
+  confirmAction: 'toolbar__confirm-action',
+  rejectAction: 'toolbar__reject-action',
+  deleteAction: 'toolbar__delete-action',
+  deactivateAction: 'toolbar__deactivate-action',
+  disabledAction: 'toolbar__disabled-action',
+  bulkActions: 'toolbar__bulk-actions',
+  moreBulkActionsButton: 'toolbar__more-bulk-actions-button',
   refreshButton: 'toolbar__refresh-button',
   search: 'toolbar__search',
   moreActionsButton: 'toolbar__more-actions-button',
   droplist: 'toolbar__droplist',
   option: 'toolbar__droplist-option',
-  before: 'toolbar__before',
   after: 'toolbar__after'
 };

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

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+import { BulkActionsProps } from './types';
+export declare function BulkActions({ actions, checked, onCheck, indeterminate, selectionMode, resizingContainerRef, }: BulkActionsProps & {
+    resizingContainerRef: RefObject<HTMLDivElement>;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,131 @@
+"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.BulkActions = BulkActions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const button_1 = require("@snack-uikit/button");
+const icons_1 = require("@snack-uikit/icons");
+const list_1 = require("@snack-uikit/list");
+const toggles_1 = require("@snack-uikit/toggles");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../../constants");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function BulkActions(_ref) {
+  let {
+    actions,
+    checked,
+    onCheck,
+    indeterminate,
+    selectionMode = constants_2.SELECTION_MODE.Multiple,
+    resizingContainerRef
+  } = _ref;
+  const handleKeyDown = (0, react_1.useCallback)(e => {
+    if (e.key === ' ') {
+      onCheck === null || onCheck === void 0 ? void 0 : onCheck();
+    }
+  }, [onCheck]);
+  const parentContainerRef = (0, react_1.useRef)(null);
+  const {
+    visibleItems,
+    hiddenItems
+  } = (0, utils_1.useDynamicList)({
+    items: actions,
+    resizingContainerRef,
+    parentContainerRef,
+    maxVisibleItems: 3
+  });
+  return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+    children: [selectionMode === constants_2.SELECTION_MODE.Multiple && (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.checkboxWrapper,
+      onClick: onCheck,
+      tabIndex: 0,
+      role: 'checkbox',
+      "aria-checked": checked,
+      onKeyDown: handleKeyDown,
+      "data-test-id": constants_1.TEST_IDS.checkbox,
+      children: (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, {
+        size: 's',
+        checked: checked,
+        indeterminate: indeterminate,
+        tabIndex: -1
+      })
+    }), (checked || indeterminate) && (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.bulkActions,
+      "data-test-id": constants_1.TEST_IDS.bulkActions,
+      ref: parentContainerRef,
+      children: [visibleItems.map(_ref2 => {
+        let {
+          label,
+          icon: Icon,
+          onClick,
+          disabled,
+          tooltip,
+          'data-test-id': testId
+        } = _ref2;
+        return (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
+          tip: tooltip,
+          open: tooltip ? undefined : false,
+          placement: 'top',
+          "data-test-id": `${testId}-tooltip`,
+          children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+            className: styles_module_scss_1.default.action,
+            fullWidth: true,
+            "data-test-id": testId,
+            iconPosition: 'before',
+            icon: (0, jsx_runtime_1.jsx)(Icon, {}),
+            label: label,
+            size: 'm',
+            onClick: onClick,
+            disabled: disabled
+          })
+        }, label);
+      }), hiddenItems.length > 0 && (0, jsx_runtime_1.jsx)(list_1.Droplist, {
+        trigger: 'clickAndFocusVisible',
+        closeDroplistOnItemClick: true,
+        items: hiddenItems.map(_ref3 => {
+          let {
+            label,
+            icon: Icon,
+            onClick,
+            disabled,
+            tooltip,
+            'data-test-id': testId
+          } = _ref3;
+          return {
+            id: label,
+            content: {
+              option: label
+            },
+            beforeContent: (0, jsx_runtime_1.jsx)(Icon, {}),
+            onClick,
+            disabled,
+            itemWrapRender: item => (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
+              tip: tooltip,
+              open: tooltip ? undefined : false,
+              placement: 'right',
+              "data-test-id": `${testId}-tooltip`,
+              children: item
+            }),
+            'data-test-id': testId
+          };
+        }),
+        children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+          className: styles_module_scss_1.default.moreActionButton,
+          size: 'm',
+          icon: (0, jsx_runtime_1.jsx)(icons_1.MoreSVG, {}),
+          "data-test-id": constants_1.TEST_IDS.moreBulkActionsButton
+        })
+      })]
+    })]
+  });
+}

package/dist/cjs/helperComponents/{DeleteAction → BulkActions}/index.d.ts

@@ -1,3 +1,3 @@
-export * from './DeleteAction';
+export * from './BulkActions';
 export * from './constants';
 export * from './types';

package/dist/cjs/helperComponents/{DeleteAction → BulkActions}/index.js

@@ -22,6 +22,6 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(require("./DeleteAction"), exports);
+__exportStar(require("./BulkActions"), exports);
 __exportStar(require("./constants"), exports);
 __exportStar(require("./types"), exports);

package/dist/{esm/helperComponents/DeleteAction → cjs/helperComponents/BulkActions}/styles.module.css

@@ -1,3 +1,17 @@
+.bulkActions{
+  padding-right:var(--space-toolbar-bulk-action-padding-right, 12px);
+  gap:var(--space-toolbar-bulk-action-gap, 8px);
+  scrollbar-width:none;
+  display:flex;
+  flex-shrink:1;
+  justify-content:stretch;
+  min-width:0;
+  -ms-overflow-style:none;
+}
+.bulkActions::-webkit-scrollbar{
+  display:none;
+}
+
 .checkboxWrapper{
   border-radius:var(--radius-toolbar-checkbox, 14px);
   width:var(--size-toolbar-checkbox, 40px);
@@ -15,4 +29,16 @@
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
   outline-color:var(--sys-available-complementary, #1c1c24);
+}
+
+.moreActionButton{
+  flex-shrink:0;
+}
+
+.action{
+  white-space:nowrap;
+}
+.action[data-full-width]:not([data-variant=icon-only]){
+  flex-shrink:0;
+  width:auto;
 }

package/dist/cjs/helperComponents/BulkActions/types.d.ts

@@ -0,0 +1,26 @@
+import { JSXElementConstructor } from 'react';
+import { TooltipProps } from '@snack-uikit/tooltip';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
+import { SELECTION_MODE } from './constants';
+export type SelectionMode = ValueOf<typeof SELECTION_MODE>;
+export type BulkAction = WithSupportProps<{
+    label: string;
+    icon: JSXElementConstructor<{
+        className?: string;
+    }>;
+    disabled?: boolean;
+    tooltip?: TooltipProps['tip'];
+    onClick?(): void;
+}>;
+export type BulkActionsProps = {
+    /** Список массовых действий */
+    actions: BulkAction[];
+    /** Колбек смены значения чекбокса */
+    onCheck?(): void;
+    /** Значение чекбокса */
+    checked?: boolean;
+    /** Состояние частичного выбора */
+    indeterminate?: boolean;
+    /** Режим выбора @default 'multiple'*/
+    selectionMode?: SelectionMode;
+};

package/dist/cjs/helperComponents/Separator/Separator.js

@@ -12,7 +12,10 @@ exports.Separator = Separator;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function Separator() {
-  return (0, jsx_runtime_1.jsx)("span", {
-    className: styles_module_scss_1.default.separator
+  return (0, jsx_runtime_1.jsx)("div", {
+    className: styles_module_scss_1.default.separatorWrapper,
+    children: (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.separator
+    })
   });
 }

package/dist/cjs/helperComponents/Separator/styles.module.css

@@ -1,7 +1,12 @@
-.separator{
+.separatorWrapper{
+  padding-top:var(--space-toolbar-separator-padding, 8px);
+  padding-bottom:var(--space-toolbar-separator-padding, 8px);
   flex-shrink:0;
+}
+
+.separator{
   box-sizing:border-box;
   width:var(--border-width-toolbar-separator, 1px);
-  margin:var(--space-toolbar-separator-padding, 8px) 0;
+  height:100%;
   background-color:var(--sys-neutral-decor-default, #dde0ea);
 }

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

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

package/dist/cjs/helperComponents/index.js

@@ -22,6 +22,6 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(require("./DeleteAction"), exports);
+__exportStar(require("./BulkActions"), exports);
 __exportStar(require("./Separator"), exports);
 __exportStar(require("./MoreActions"), exports);

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

@@ -1,4 +1,4 @@
 import { WithSupportProps } from '@snack-uikit/utils';
 import { CheckedToolbarProps, DefaultToolbarProps } from './types';
 export type ToolbarProps = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps>;
-export declare function Toolbar({ className, before, after, outline, moreActions, onRefresh, search, ...rest }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -11,17 +11,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
+import { useRef } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 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 { DeleteAction, MoreActions, Separator } from '../../helperComponents';
-import { extractDeleteActionProps, isDeleteActionProps } from './helpers';
+import { BulkActions, MoreActions, Separator } from '../../helperComponents';
+import { extractBulkActionsProps, isBulkActionsProps } from './helpers';
 import styles from './styles.module.css';
 export function Toolbar(_a) {
-    var { className, before, after, outline, moreActions, onRefresh, search } = _a, rest = __rest(_a, ["className", "before", "after", "outline", "moreActions", "onRefresh", "search"]);
-    const needsDeleteAction = isDeleteActionProps(rest);
-    const hasLeftSideElements = Boolean(needsDeleteAction || before || onRefresh);
-    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-outline": outline || undefined, children: [hasLeftSideElements && (_jsxs("div", { className: styles.flexRow, children: [needsDeleteAction && _jsx(DeleteAction, Object.assign({}, extractDeleteActionProps(rest))), before && (_jsx("div", { "data-test-id": TEST_IDS.before, className: styles.actions, children: before })), (needsDeleteAction || before) && _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 })] }))] }))] })));
+    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);
+    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,10 +1,10 @@
 import { ToolbarProps } from './Toolbar';
-import { CheckedToolbarProps } from './types';
-export declare function extractDeleteActionProps({ onCheck, checked, indeterminate, onDelete, selectionMode, }: Omit<CheckedToolbarProps, 'onRefresh'>): {
+import { ToolbarBulkActionProps } from './types';
+export declare function extractBulkActionsProps({ onCheck, checked, indeterminate, bulkActions, selectionMode, }: ToolbarBulkActionProps): {
     onCheck: (() => void) | undefined;
     checked: boolean | undefined;
     indeterminate: boolean | undefined;
-    onDelete: (() => void) | undefined;
+    actions: import("../../helperComponents").BulkAction[];
     selectionMode: import("../../helperComponents").SelectionMode | undefined;
 };
-export declare function isDeleteActionProps(props: Partial<ToolbarProps>): props is CheckedToolbarProps;
+export declare function isBulkActionsProps(props: Partial<ToolbarProps>): props is ToolbarBulkActionProps;

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

@@ -1,12 +1,10 @@
-export function extractDeleteActionProps({ onCheck, checked, indeterminate, onDelete, selectionMode, }) {
-    return { onCheck, checked, indeterminate, onDelete, selectionMode };
+export function extractBulkActionsProps({ onCheck, checked, indeterminate, bulkActions = [], selectionMode, }) {
+    return { onCheck, checked, indeterminate, actions: bulkActions, selectionMode };
 }
-export function isDeleteActionProps(props) {
-    return (('onDelete' in props && props.onDelete !== undefined) ||
-        ('checked' in props &&
-            props.checked !== undefined &&
-            'onCheck' in props &&
-            props.onCheck !== undefined &&
-            'selectionMode' in props &&
-            props.selectionMode === 'multiple'));
+export function isBulkActionsProps(props) {
+    return ('bulkActions' in props &&
+        Array.isArray(props.bulkActions) &&
+        props.bulkActions.length > 0 &&
+        'selectionMode' in props &&
+        props.selectionMode === 'multiple');
 }

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

@@ -30,6 +30,7 @@
   padding-left:var(--space-toolbar-search-horizontal-padding, 8px);
   padding-right:var(--space-toolbar-search-horizontal-padding, 8px);
   border-radius:var(--radius-toolbar-search, 14px);
+  min-width:var(--size-toolbar-search-min-width, 80px);
 }
 .search:focus-within{
   outline-width:var(--border-state-focus-s-border-width, 2px);
@@ -39,6 +40,9 @@
   outline-color:var(--sys-available-complementary, #1c1c24);
 }
 
+.updateButton{
+  flex-shrink:0;
+}
 .updateButton svg{
   transform:rotate(360deg);
   transition:transform 0.5s;
@@ -48,6 +52,13 @@
   transition-duration:0s;
 }
 
+.beforeSearch{
+  display:flex;
+  flex-shrink:1;
+  box-sizing:border-box;
+  min-width:0;
+}
+
 .flexRow{
   display:flex;
   flex-shrink:0;

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

@@ -1,11 +1,9 @@
 import { ReactNode } from 'react';
-import { DeleteActionProps, MoreActionsProps } from '../../helperComponents';
+import { BulkActionsProps, MoreActionsProps } from '../../helperComponents';
 import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
 type OptionalProps = {
     /** Колбек обновления */
     onRefresh?(): void;
-    /** Дополнительный слот в начале Тулбара */
-    before?: ReactNode;
     /** Дополнительный слот в конце тулбара */
     after?: ReactNode;
     /** Элементы выпадающего списка кнопки с действиями */
@@ -31,6 +29,10 @@ export type CommonToolbarProps = {
     /** Внешний бордер */
     outline?: boolean;
 };
-export type CheckedToolbarProps = CommonToolbarProps & DeleteActionProps & OptionalProps;
-export type DefaultToolbarProps = CommonToolbarProps & NeverOrUndefined<DeleteActionProps> & RequireAtLeastOne<OptionalProps>;
+export type ToolbarBulkActionProps = Omit<BulkActionsProps, 'actions'> & {
+    /** Список массовых действий */
+    bulkActions?: BulkActionsProps['actions'];
+};
+export type CheckedToolbarProps = CommonToolbarProps & ToolbarBulkActionProps & OptionalProps;
+export type DefaultToolbarProps = CommonToolbarProps & NeverOrUndefined<ToolbarBulkActionProps> & RequireAtLeastOne<OptionalProps>;
 export {};