@snack-uikit/toolbar 0.9.18 → 0.10.0

package/dist/esm/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/esm/constants.js

@@ -1,12 +1,17 @@
 export const 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/esm/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/esm/helperComponents/BulkActions/BulkActions.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useRef } from 'react';
+import { ButtonFunction } from '@snack-uikit/button';
+import { MoreSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
+import { Checkbox } from '@snack-uikit/toggles';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { useDynamicList } from '@snack-uikit/utils';
+import { TEST_IDS } from '../../constants';
+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 === ' ') {
+            onCheck === null || onCheck === void 0 ? void 0 : onCheck();
+        }
+    }, [onCheck]);
+    const parentContainerRef = useRef(null);
+    const { visibleItems, hiddenItems } = useDynamicList({
+        items: actions,
+        resizingContainerRef,
+        parentContainerRef,
+        maxVisibleItems: 3,
+    });
+    return (_jsxs(_Fragment, { children: [selectionMode === SELECTION_MODE.Multiple && (_jsx("div", { className: styles.checkboxWrapper, onClick: onCheck, tabIndex: 0, role: 'checkbox', "aria-checked": checked, onKeyDown: handleKeyDown, "data-test-id": TEST_IDS.checkbox, children: _jsx(Checkbox, { size: 's', checked: checked, indeterminate: indeterminate, tabIndex: -1 }) })), (checked || indeterminate) && (_jsxs("div", { className: styles.bulkActions, "data-test-id": TEST_IDS.bulkActions, ref: parentContainerRef, children: [visibleItems.map(({ label, icon: Icon, onClick, disabled, tooltip, 'data-test-id': testId }) => (_jsx(Tooltip, { tip: tooltip, open: tooltip ? undefined : false, placement: 'top', "data-test-id": `${testId}-tooltip`, children: _jsx(ButtonFunction, { className: styles.action, fullWidth: true, "data-test-id": testId, iconPosition: 'before', icon: _jsx(Icon, {}), label: label, size: 'm', onClick: onClick, disabled: disabled }) }, label))), hiddenItems.length > 0 && (_jsx(Droplist, { trigger: 'clickAndFocusVisible', closeDroplistOnItemClick: true, items: hiddenItems.map(({ label, icon: Icon, onClick, disabled, tooltip, 'data-test-id': testId }) => ({
+                            id: label,
+                            content: { option: label },
+                            beforeContent: _jsx(Icon, {}),
+                            onClick,
+                            disabled,
+                            itemWrapRender: item => (_jsx(Tooltip, { tip: tooltip, open: tooltip ? undefined : false, placement: 'right', "data-test-id": `${testId}-tooltip`, children: item })),
+                            'data-test-id': testId,
+                        })), children: _jsx(ButtonFunction, { className: styles.moreActionButton, size: 'm', icon: _jsx(MoreSVG, {}), "data-test-id": TEST_IDS.moreBulkActionsButton }) }))] }))] }));
+}

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

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

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

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

package/dist/{cjs/helperComponents/DeleteAction → esm/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/esm/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/esm/helperComponents/Separator/Separator.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './styles.module.css';
 export function Separator() {
-    return _jsx("span", { className: styles.separator });
+    return (_jsx("div", { className: styles.separatorWrapper, children: _jsx("div", { className: styles.separator }) }));
 }

package/dist/esm/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/esm/helperComponents/index.d.ts

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

package/dist/esm/helperComponents/index.js

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

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toolbar",
-  "version": "0.9.18",
+  "version": "0.10.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,14 +36,15 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.19.5",
-    "@snack-uikit/icons": "0.24.1",
-    "@snack-uikit/list": "0.23.0",
-    "@snack-uikit/search-private": "0.4.8",
-    "@snack-uikit/tag": "0.12.1",
-    "@snack-uikit/toggles": "0.13.4",
-    "@snack-uikit/utils": "3.6.0",
+    "@snack-uikit/button": "0.19.6",
+    "@snack-uikit/icons": "0.24.2",
+    "@snack-uikit/list": "0.23.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/utils": "3.7.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "546ae486452e74e78f65fd9ce0044c13b058872c"
+  "gitHead": "3528e78aec23804dca44d311947c1dcd4ed3792b"
 }

package/src/components/Toolbar/Toolbar.tsx

@@ -1,4 +1,5 @@
 import cn from 'classnames';
+import { useRef } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
 import { UpdateSVG } from '@snack-uikit/icons';
@@ -6,30 +7,32 @@ import { SearchPrivate } from '@snack-uikit/search-private';
 import { extractSupportProps, WithSupportProps } 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.scss';
 import { CheckedToolbarProps, DefaultToolbarProps } from './types';
 
 export type ToolbarProps = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps>;
 
-export function Toolbar({ className, before, after, outline, moreActions, onRefresh, search, ...rest }: ToolbarProps) {
-  const needsDeleteAction = isDeleteActionProps(rest);
-  const hasLeftSideElements = Boolean(needsDeleteAction || before || onRefresh);
+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);
 
   return (
-    <div className={cn(styles.container, className)} {...extractSupportProps(rest)} data-outline={outline || undefined}>
+    <div
+      className={cn(styles.container, className)}
+      {...extractSupportProps(rest)}
+      data-outline={outline || undefined}
+      ref={resizingContainerRef}
+    >
       {hasLeftSideElements && (
-        <div className={styles.flexRow}>
-          {needsDeleteAction && <DeleteAction {...extractDeleteActionProps(rest)} />}
-
-          {before && (
-            <div data-test-id={TEST_IDS.before} className={styles.actions}>
-              {before}
-            </div>
+        <div className={styles.beforeSearch}>
+          {needsBulkActions && (
+            <BulkActions {...extractBulkActionsProps(rest)} resizingContainerRef={resizingContainerRef} />
           )}
 
-          {(needsDeleteAction || before) && <Separator />}
+          {needsBulkActions && <Separator />}
 
           {onRefresh && (
             <>

package/src/components/Toolbar/helpers.ts

@@ -1,24 +1,22 @@
 import { ToolbarProps } from './Toolbar';
-import { CheckedToolbarProps } from './types';
+import { ToolbarBulkActionProps } from './types';
 
-export function extractDeleteActionProps({
+export function extractBulkActionsProps({
   onCheck,
   checked,
   indeterminate,
-  onDelete,
+  bulkActions = [],
   selectionMode,
-}: Omit<CheckedToolbarProps, 'onRefresh'>) {
-  return { onCheck, checked, indeterminate, onDelete, selectionMode };
+}: ToolbarBulkActionProps) {
+  return { onCheck, checked, indeterminate, actions: bulkActions, selectionMode };
 }
 
-export function isDeleteActionProps(props: Partial<ToolbarProps>): props is CheckedToolbarProps {
+export function isBulkActionsProps(props: Partial<ToolbarProps>): props is ToolbarBulkActionProps {
   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')
+    'bulkActions' in props &&
+    Array.isArray(props.bulkActions) &&
+    props.bulkActions.length > 0 &&
+    'selectionMode' in props &&
+    props.selectionMode === 'multiple'
   );
 }

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

@@ -1,12 +1,12 @@
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toolbar';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element' as element;
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toolbar' as toolbar;
 
 .toolbar {
   box-sizing: border-box;
 }
 
 .container {
-  @include styles-tokens-element.composite-var(styles-tokens-toolbar.$toolbar-container);
+  @include element.composite-var(toolbar.$toolbar-container);
 
   position: relative;
 
@@ -15,11 +15,11 @@
 
   box-sizing: border-box;
 
-  background-color: styles-tokens-element.$sys-neutral-background1-level;
+  background-color: element.$sys-neutral-background1-level;
 
   &[data-outline] {
     &::before {
-      @include styles-tokens-element.composite-var(styles-tokens-toolbar.$toolbar-container-outline);
+      @include element.composite-var(toolbar.$toolbar-container-outline);
 
       pointer-events: none;
       content: '';
@@ -32,7 +32,7 @@
       width: 100%;
       height: 100%;
 
-      border-color: styles-tokens-element.$sys-neutral-decor-default;
+      border-color: element.$sys-neutral-decor-default;
       border-style: solid;
     }
   }
@@ -40,17 +40,19 @@
 }
 
 .search {
-  @include styles-tokens-element.composite-var(styles-tokens-toolbar.$toolbar-search);  
+  @include element.composite-var(toolbar.$toolbar-search);
 
   &:focus-within {
-    @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
+    @include element.outline-var(element.$container-focused-s);
 
     position: relative;
-    outline-color: styles-tokens-element.$sys-available-complementary;
+    outline-color: element.$sys-available-complementary;
   }
 }
 
 .updateButton {
+  flex-shrink: 0;
+
   svg {
     transform: rotate(360deg);
     transition: transform 0.5s;
@@ -64,6 +66,13 @@
   }
 }
 
+.beforeSearch {
+  display: flex;
+  flex-shrink: 1;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
 .flexRow {
   display: flex;
   flex-shrink: 0;

package/src/components/Toolbar/types.ts

@@ -1,13 +1,11 @@
 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;
   /** Элементы выпадающего списка кнопки с действиями */
@@ -35,8 +33,13 @@ export type CommonToolbarProps = {
   outline?: boolean;
 };
 
-export type CheckedToolbarProps = CommonToolbarProps & DeleteActionProps & OptionalProps;
+export type ToolbarBulkActionProps = Omit<BulkActionsProps, 'actions'> & {
+  /** Список массовых действий */
+  bulkActions?: BulkActionsProps['actions'];
+};
+
+export type CheckedToolbarProps = CommonToolbarProps & ToolbarBulkActionProps & OptionalProps;
 
 export type DefaultToolbarProps = CommonToolbarProps &
-  NeverOrUndefined<DeleteActionProps> &
+  NeverOrUndefined<ToolbarBulkActionProps> &
   RequireAtLeastOne<OptionalProps>;

package/src/constants.ts

@@ -1,12 +1,17 @@
 export const 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/src/helperComponents/BulkActions/BulkActions.tsx

@@ -0,0 +1,118 @@
+import { KeyboardEvent, RefObject, useCallback, useRef } from 'react';
+
+import { ButtonFunction } from '@snack-uikit/button';
+import { MoreSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
+import { Checkbox } from '@snack-uikit/toggles';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { useDynamicList } from '@snack-uikit/utils';
+
+import { TEST_IDS } from '../../constants';
+import { SELECTION_MODE } from './constants';
+import styles from './styles.module.scss';
+import { BulkActionsProps } from './types';
+
+export function BulkActions({
+  actions,
+  checked,
+  onCheck,
+  indeterminate,
+  selectionMode = SELECTION_MODE.Multiple,
+  resizingContainerRef,
+}: BulkActionsProps & {
+  resizingContainerRef: RefObject<HTMLDivElement>;
+}) {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === ' ') {
+        onCheck?.();
+      }
+    },
+    [onCheck],
+  );
+
+  const parentContainerRef = useRef<HTMLDivElement>(null);
+
+  const { visibleItems, hiddenItems } = useDynamicList({
+    items: actions,
+    resizingContainerRef,
+    parentContainerRef,
+    maxVisibleItems: 3,
+  });
+
+  return (
+    <>
+      {selectionMode === SELECTION_MODE.Multiple && (
+        <div
+          className={styles.checkboxWrapper}
+          onClick={onCheck}
+          tabIndex={0}
+          role='checkbox'
+          aria-checked={checked}
+          onKeyDown={handleKeyDown}
+          data-test-id={TEST_IDS.checkbox}
+        >
+          <Checkbox size='s' checked={checked} indeterminate={indeterminate} tabIndex={-1} />
+        </div>
+      )}
+
+      {(checked || indeterminate) && (
+        <div className={styles.bulkActions} data-test-id={TEST_IDS.bulkActions} ref={parentContainerRef}>
+          {visibleItems.map(({ label, icon: Icon, onClick, disabled, tooltip, 'data-test-id': testId }) => (
+            <Tooltip
+              tip={tooltip}
+              key={label}
+              open={tooltip ? undefined : false}
+              placement='top'
+              data-test-id={`${testId}-tooltip`}
+            >
+              <ButtonFunction
+                className={styles.action}
+                fullWidth
+                data-test-id={testId}
+                iconPosition='before'
+                icon={<Icon />}
+                label={label}
+                size='m'
+                onClick={onClick}
+                disabled={disabled}
+              />
+            </Tooltip>
+          ))}
+
+          {hiddenItems.length > 0 && (
+            <Droplist
+              trigger='clickAndFocusVisible'
+              closeDroplistOnItemClick
+              items={hiddenItems.map(({ label, icon: Icon, onClick, disabled, tooltip, 'data-test-id': testId }) => ({
+                id: label,
+                content: { option: label },
+                beforeContent: <Icon />,
+                onClick,
+                disabled,
+                itemWrapRender: item => (
+                  <Tooltip
+                    tip={tooltip}
+                    open={tooltip ? undefined : false}
+                    placement='right'
+                    data-test-id={`${testId}-tooltip`}
+                  >
+                    {item}
+                  </Tooltip>
+                ),
+                'data-test-id': testId,
+              }))}
+            >
+              <ButtonFunction
+                className={styles.moreActionButton}
+                size='m'
+                icon={<MoreSVG />}
+                data-test-id={TEST_IDS.moreBulkActionsButton}
+              />
+            </Droplist>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

package/src/helperComponents/{DeleteAction → BulkActions}/index.ts

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

package/src/helperComponents/BulkActions/styles.module.scss

@@ -0,0 +1,55 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toolbar' as toolbar;
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element' as element;
+
+.bulkActions {
+  @include toolbar.composite-var(toolbar.$toolbar-bulk-action);
+
+  scrollbar-width: none;  /* Firefox */
+
+  display: flex;
+  flex-shrink: 1;
+  justify-content: stretch;
+
+  min-width: 0;
+
+  /* Hide scrollbar */
+  -ms-overflow-style: none;  /* IE and Edge */
+
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+}
+
+.checkboxWrapper {
+  @include toolbar.composite-var(toolbar.$toolbar-checkbox);
+
+  cursor: pointer;
+
+  position: relative;
+
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+
+  &:focus-visible {
+    @include element.outline-var(element.$container-focused-s);
+
+    outline-color: toolbar.$sys-available-complementary;
+  }
+}
+
+.moreActionButton {
+  flex-shrink: 0;
+}
+
+.action {
+  white-space: nowrap;
+
+  &[data-full-width]:not([data-variant="icon-only"]) {
+    flex-shrink: 0;
+    width: auto;
+  }
+}

package/src/helperComponents/BulkActions/types.ts

@@ -0,0 +1,29 @@
+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;
+};