@snack-uikit/toolbar 0.9.18 → 0.10.0

package/src/helperComponents/Separator/Separator.tsx

@@ -1,5 +1,9 @@
 import styles from './styles.module.scss';
 
 export function Separator() {
-  return <span className={styles.separator} />;
+  return (
+    <div className={styles.separatorWrapper}>
+      <div className={styles.separator}></div>
+    </div>
+  );
 }

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

@@ -1,13 +1,17 @@
-@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toolbar' as toolbar;
+
+.separatorWrapper {
+  @include toolbar.composite-var(toolbar.$toolbar-separator-wrap);
 
-.separator {
   flex-shrink: 0;
+}
 
-  box-sizing: border-box;
-  width: styles-theme-variables.$border-width-toolbar-separator;
-  margin: styles-theme-variables.$space-toolbar-separator-padding 0;
 
-  background-color: styles-theme-variables.$sys-neutral-decor-default;
+.separator {
+  box-sizing: border-box;
+  width: toolbar.$border-width-toolbar-separator;
+  height: 100%;
+  background-color: toolbar.$sys-neutral-decor-default;
 }
 
 

package/src/helperComponents/index.ts

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

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

@@ -1,14 +0,0 @@
-import { SelectionMode } from './types';
-export type DeleteActionProps = {
-    /** Колбек смены значения чекбокса*/
-    onCheck?(): void;
-    /** Колбек удаления */
-    onDelete?(): void;
-    /** Значения чекбокса*/
-    checked?: boolean;
-    /** Состояние частичного выбора */
-    indeterminate?: boolean;
-    /** Режим выбора @default 'multiple'*/
-    selectionMode?: SelectionMode;
-};
-export declare function DeleteAction({ checked, onCheck, onDelete, indeterminate, selectionMode, }: DeleteActionProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/DeleteAction/DeleteAction.js

@@ -1,56 +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.DeleteAction = DeleteAction;
-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 toggles_1 = require("@snack-uikit/toggles");
-const constants_1 = require("../../constants");
-const constants_2 = require("./constants");
-const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function DeleteAction(_ref) {
-  let {
-    checked,
-    onCheck,
-    onDelete,
-    indeterminate,
-    selectionMode = constants_2.SELECTION_MODE.Multiple
-  } = _ref;
-  const handleKeyDown = (0, react_1.useCallback)(e => {
-    if (e.key === ' ') {
-      onCheck === null || onCheck === void 0 ? void 0 : onCheck();
-    }
-  }, [onCheck]);
-  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
-      })
-    }), onDelete && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-      "data-test-id": constants_1.TEST_IDS.deleteButton,
-      icon: (0, jsx_runtime_1.jsx)(icons_1.TrashSVG, {}),
-      size: 'm',
-      onClick: onDelete,
-      disabled: !checked && !indeterminate
-    })]
-  });
-}

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

@@ -1,3 +0,0 @@
-import { ValueOf } from '@snack-uikit/utils';
-import { SELECTION_MODE } from './constants';
-export type SelectionMode = ValueOf<typeof SELECTION_MODE>;

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

@@ -1,14 +0,0 @@
-import { SelectionMode } from './types';
-export type DeleteActionProps = {
-    /** Колбек смены значения чекбокса*/
-    onCheck?(): void;
-    /** Колбек удаления */
-    onDelete?(): void;
-    /** Значения чекбокса*/
-    checked?: boolean;
-    /** Состояние частичного выбора */
-    indeterminate?: boolean;
-    /** Режим выбора @default 'multiple'*/
-    selectionMode?: SelectionMode;
-};
-export declare function DeleteAction({ checked, onCheck, onDelete, indeterminate, selectionMode, }: DeleteActionProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/DeleteAction/DeleteAction.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { ButtonFunction } from '@snack-uikit/button';
-import { TrashSVG } from '@snack-uikit/icons';
-import { Checkbox } from '@snack-uikit/toggles';
-import { TEST_IDS } from '../../constants';
-import { SELECTION_MODE } from './constants';
-import styles from './styles.module.css';
-export function DeleteAction({ checked, onCheck, onDelete, indeterminate, selectionMode = SELECTION_MODE.Multiple, }) {
-    const handleKeyDown = useCallback((e) => {
-        if (e.key === ' ') {
-            onCheck === null || onCheck === void 0 ? void 0 : onCheck();
-        }
-    }, [onCheck]);
-    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 }) })), onDelete && (_jsx(ButtonFunction, { "data-test-id": TEST_IDS.deleteButton, icon: _jsx(TrashSVG, {}), size: 'm', onClick: onDelete, disabled: !checked && !indeterminate }))] }));
-}

package/dist/esm/helperComponents/DeleteAction/types.d.ts

@@ -1,3 +0,0 @@
-import { ValueOf } from '@snack-uikit/utils';
-import { SELECTION_MODE } from './constants';
-export type SelectionMode = ValueOf<typeof SELECTION_MODE>;

package/src/helperComponents/DeleteAction/DeleteAction.tsx

@@ -1,68 +0,0 @@
-import { KeyboardEvent, useCallback } from 'react';
-
-import { ButtonFunction } from '@snack-uikit/button';
-import { TrashSVG } from '@snack-uikit/icons';
-import { Checkbox } from '@snack-uikit/toggles';
-
-import { TEST_IDS } from '../../constants';
-import { SELECTION_MODE } from './constants';
-import styles from './styles.module.scss';
-import { SelectionMode } from './types';
-
-export type DeleteActionProps = {
-  /** Колбек смены значения чекбокса*/
-  onCheck?(): void;
-  /** Колбек удаления */
-  onDelete?(): void;
-  /** Значения чекбокса*/
-  checked?: boolean;
-  /** Состояние частичного выбора */
-  indeterminate?: boolean;
-  /** Режим выбора @default 'multiple'*/
-  selectionMode?: SelectionMode;
-};
-
-export function DeleteAction({
-  checked,
-  onCheck,
-  onDelete,
-  indeterminate,
-  selectionMode = SELECTION_MODE.Multiple,
-}: DeleteActionProps) {
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLDivElement>) => {
-      if (e.key === ' ') {
-        onCheck?.();
-      }
-    },
-    [onCheck],
-  );
-
-  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>
-      )}
-
-      {onDelete && (
-        <ButtonFunction
-          data-test-id={TEST_IDS.deleteButton}
-          icon={<TrashSVG />}
-          size='m'
-          onClick={onDelete}
-          disabled={!checked && !indeterminate}
-        />
-      )}
-    </>
-  );
-}

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

@@ -1,24 +0,0 @@
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toolbar';
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-
-
-.checkboxWrapper {
-  @include styles-tokens-toolbar.composite-var(styles-tokens-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 styles-tokens-toolbar.outline-var(styles-tokens-element.$container-focused-s);
-
-    outline-color: styles-tokens-toolbar.$sys-available-complementary;
-  }
-}

package/src/helperComponents/DeleteAction/types.ts

@@ -1,5 +0,0 @@
-import { ValueOf } from '@snack-uikit/utils';
-
-import { SELECTION_MODE } from './constants';
-
-export type SelectionMode = ValueOf<typeof SELECTION_MODE>;