@snack-uikit/toolbar 0.4.2 → 0.5.1

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.5.1 (2023-12-14)
+
+### Only dependencies have been changed
+* [@snack-uikit/droplist@0.12.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/droplist/CHANGELOG.md)
+* [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/search@0.6.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/search/CHANGELOG.md)
+* [@snack-uikit/toggles@0.9.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/toggles/CHANGELOG.md)
+
+
+
+
+
+# 0.5.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.4.2 (2023-12-07)
 
 ### Only dependencies have been changed

package/README.md

@@ -24,7 +24,7 @@ Toolbar
 | onDelete | `() => void` | - | Колбек удаления |
 | checked | `boolean` | - | Значения чекбокса |
 | indeterminate | `boolean` | - | Состояние частичного выбора |
-| selectionMode | enum SelectionMode: `"single"`, `"multiple"` | - | Режим выбора @default SelectionMode.Multiple |
+| selectionMode | enum SelectionMode: `"single"`, `"multiple"` | 'multiple' | Режим выбора |
 | onRefresh | `() => void` | - | Колбек обновления |
 | actions | `ReactNode` | - | Дополнительный слот |
 | moreActions | `Pick<DroplistItemSingleProps, "option" \| "caption" \| "description" \| "tagLabel" \| "disabled" \| "icon" \| "onClick">[]` | - | Элементы выпадающего списка кнопки с действиями |

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

@@ -1,8 +1,4 @@
 import { WithSupportProps } from '@snack-uikit/utils';
-import { SelectionMode } from '../../helperComponents';
 import { CheckedToolbarProps, DefaultToolbarProps } from './types';
 export type ToolbarProps = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps>;
 export declare function Toolbar({ className, actions, outline, moreActions, onRefresh, ...rest }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Toolbar {
-    var selectionModes: typeof SelectionMode;
-}

package/dist/components/Toolbar/Toolbar.js

@@ -16,11 +16,10 @@ import { UpdateSVG } from '@snack-uikit/icons';
 import { SearchPrivate } from '@snack-uikit/search';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { TEST_IDS } from '../../constants';
-import { DeleteAction, MoreActions, SelectionMode, Separator } from '../../helperComponents';
+import { DeleteAction, MoreActions, Separator } from '../../helperComponents';
 import { extractDeleteActionProps, extractSearchPrivateProps, isDeleteActionProps } from './helpers';
 import styles from './styles.module.css';
 export function Toolbar(_a) {
     var { className, actions, outline, moreActions, onRefresh } = _a, rest = __rest(_a, ["className", "actions", "outline", "moreActions", "onRefresh"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-outline": outline || undefined }, { children: [isDeleteActionProps(rest) && (_jsxs(_Fragment, { children: [_jsx(DeleteAction, Object.assign({}, extractDeleteActionProps(rest))), _jsx(Separator, {})] })), onRefresh && (_jsxs(_Fragment, { children: [_jsx(ButtonFunction, { icon: _jsx(UpdateSVG, {}), size: ButtonFunction.sizes.M, className: styles.updateButton, onClick: onRefresh, "data-test-id": TEST_IDS.refreshButton }), _jsx(Separator, {})] })), _jsx(SearchPrivate, Object.assign({}, extractSearchPrivateProps(rest), { className: styles.search, size: SearchPrivate.sizes.M, "data-test-id": TEST_IDS.search })), actions && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", Object.assign({ "data-test-id": TEST_IDS.actions, className: styles.actions }, { children: actions }))] })), moreActions && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(MoreActions, { moreActions: moreActions })] }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-outline": outline || undefined, children: [isDeleteActionProps(rest) && (_jsxs(_Fragment, { children: [_jsx(DeleteAction, Object.assign({}, extractDeleteActionProps(rest))), _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, {})] })), _jsx(SearchPrivate, Object.assign({}, extractSearchPrivateProps(rest), { className: styles.search, size: 'm', "data-test-id": TEST_IDS.search })), actions && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx("div", { "data-test-id": TEST_IDS.actions, className: styles.actions, children: actions })] })), moreActions && (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(MoreActions, { moreActions: moreActions })] }))] })));
 }
-Toolbar.selectionModes = SelectionMode;

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

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

package/dist/helperComponents/DeleteAction/DeleteAction.js

@@ -4,13 +4,13 @@ import { ButtonFunction } from '@snack-uikit/button';
 import { TrashSVG } from '@snack-uikit/icons';
 import { Checkbox } from '@snack-uikit/toggles';
 import { TEST_IDS } from '../../constants';
-import { SelectionMode } from './constants';
+import { SELECTION_MODE } from './constants';
 import styles from './styles.module.css';
-export function DeleteAction({ checked, onCheck, onDelete, indeterminate, selectionMode = SelectionMode.Multiple, }) {
+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 === SelectionMode.Multiple && (_jsx("div", Object.assign({ className: styles.checkboxWrapper, onClick: onCheck, tabIndex: 0, role: 'checkbox', "aria-checked": checked, onKeyDown: handleKeyDown, "data-test-id": TEST_IDS.checkbox }, { children: _jsx(Checkbox, { size: Checkbox.sizes.S, checked: checked, indeterminate: indeterminate, tabIndex: -1 }) }))), onDelete && (_jsx(ButtonFunction, { "data-test-id": TEST_IDS.deleteButton, icon: _jsx(TrashSVG, {}), size: ButtonFunction.sizes.M, onClick: onDelete, disabled: !checked && !indeterminate }))] }));
+    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/helperComponents/DeleteAction/constants.d.ts

@@ -1,4 +1,4 @@
-export declare enum SelectionMode {
-    Single = "single",
-    Multiple = "multiple"
-}
+export declare const SELECTION_MODE: {
+    readonly Single: "single";
+    readonly Multiple: "multiple";
+};

package/dist/helperComponents/DeleteAction/constants.js

@@ -1,5 +1,4 @@
-export var SelectionMode;
-(function (SelectionMode) {
-    SelectionMode["Single"] = "single";
-    SelectionMode["Multiple"] = "multiple";
-})(SelectionMode || (SelectionMode = {}));
+export const SELECTION_MODE = {
+    Single: 'single',
+    Multiple: 'multiple',
+};

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

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

package/dist/helperComponents/DeleteAction/index.js

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

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

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

package/dist/helperComponents/DeleteAction/types.js

@@ -0,0 +1 @@
+export {};

package/dist/helperComponents/MoreActions/MoreActions.js

@@ -17,11 +17,11 @@ export function MoreActions({ moreActions }) {
         needsFocus,
         setNeedsFocus,
     });
-    return (_jsx(Droplist, Object.assign({ open: isOpen, "data-test-id": TEST_IDS.droplist, onOpenChange: setIsOpen, placement: Droplist.placements.BottomEnd, onFocusLeave: onFocusLeave, firstElementRefCallback: firstElementRefCallback, useScroll: true, triggerRef: triggerRef, triggerElement: _jsx(ButtonFunction, { icon: _jsx(KebabSVG, { size: 24 }), size: ButtonFunction.sizes.M, onKeyDown: onKeyDown, "data-test-id": TEST_IDS.moreActionsButton }), size: Droplist.sizes.S }, { children: moreActions.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: item.option, className: styles.item, onClick: e => {
+    return (_jsx(Droplist, { open: isOpen, "data-test-id": TEST_IDS.droplist, onOpenChange: setIsOpen, placement: 'bottom-end', onFocusLeave: onFocusLeave, firstElementRefCallback: firstElementRefCallback, useScroll: true, triggerRef: triggerRef, triggerElement: _jsx(ButtonFunction, { icon: _jsx(KebabSVG, { size: 24 }), size: 'm', onKeyDown: onKeyDown, "data-test-id": TEST_IDS.moreActionsButton }), size: 's', children: moreActions.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: item.option, className: styles.item, onClick: e => {
                 var _a;
                 (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
                 setIsOpen(false);
                 setNeedsFocus(false);
                 e.stopPropagation();
-            }, "data-test-id": TEST_IDS.option })))) })));
+            }, "data-test-id": TEST_IDS.option })))) }));
 }

package/dist/helperComponents/MoreActions/constants.js

@@ -1,5 +1,5 @@
 export const TRIGGER_OPEN_DROPLIST_KEY_KEYS = [
-    ' ',
+    ' ', // <- Space key
     'ArrowDown',
 ];
 export const TRIGGER_CLOSE_DROPLIST_KEY_CODES = ['Escape', 'Tab'];

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toolbar",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,13 +32,13 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.14.1",
-    "@snack-uikit/droplist": "0.11.2",
-    "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/search": "0.5.2",
-    "@snack-uikit/toggles": "0.8.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/button": "0.15.0",
+    "@snack-uikit/droplist": "0.12.1",
+    "@snack-uikit/icons": "0.19.1",
+    "@snack-uikit/search": "0.6.1",
+    "@snack-uikit/toggles": "0.9.1",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "e124e31699926810648702f97db72413d7ebd2b2"
+  "gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
 }

package/src/components/Toolbar/Toolbar.tsx

@@ -6,7 +6,7 @@ import { SearchPrivate } from '@snack-uikit/search';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { TEST_IDS } from '../../constants';
-import { DeleteAction, MoreActions, SelectionMode, Separator } from '../../helperComponents';
+import { DeleteAction, MoreActions, Separator } from '../../helperComponents';
 import { extractDeleteActionProps, extractSearchPrivateProps, isDeleteActionProps } from './helpers';
 import styles from './styles.module.scss';
 import { CheckedToolbarProps, DefaultToolbarProps } from './types';
@@ -27,7 +27,7 @@ export function Toolbar({ className, actions, outline, moreActions, onRefresh, .
         <>
           <ButtonFunction
             icon={<UpdateSVG />}
-            size={ButtonFunction.sizes.M}
+            size='m'
             className={styles.updateButton}
             onClick={onRefresh}
             data-test-id={TEST_IDS.refreshButton}
@@ -39,7 +39,7 @@ export function Toolbar({ className, actions, outline, moreActions, onRefresh, .
       <SearchPrivate
         {...extractSearchPrivateProps(rest)}
         className={styles.search}
-        size={SearchPrivate.sizes.M}
+        size='m'
         data-test-id={TEST_IDS.search}
       />
 
@@ -61,5 +61,3 @@ export function Toolbar({ className, actions, outline, moreActions, onRefresh, .
     </div>
   );
 }
-
-Toolbar.selectionModes = SelectionMode;

package/src/helperComponents/DeleteAction/DeleteAction.tsx

@@ -5,8 +5,9 @@ import { TrashSVG } from '@snack-uikit/icons';
 import { Checkbox } from '@snack-uikit/toggles';
 
 import { TEST_IDS } from '../../constants';
-import { SelectionMode } from './constants';
+import { SELECTION_MODE } from './constants';
 import styles from './styles.module.scss';
+import { SelectionMode } from './types';
 
 export type DeleteActionProps = {
   /** Колбек смены значения чекбокса*/
@@ -17,7 +18,7 @@ export type DeleteActionProps = {
   checked?: boolean;
   /** Состояние частичного выбора */
   indeterminate?: boolean;
-  /** Режим выбора @default SelectionMode.Multiple*/
+  /** Режим выбора @default 'multiple'*/
   selectionMode?: SelectionMode;
 };
 
@@ -26,7 +27,7 @@ export function DeleteAction({
   onCheck,
   onDelete,
   indeterminate,
-  selectionMode = SelectionMode.Multiple,
+  selectionMode = SELECTION_MODE.Multiple,
 }: DeleteActionProps) {
   const handleKeyDown = useCallback(
     (e: KeyboardEvent<HTMLDivElement>) => {
@@ -39,7 +40,7 @@ export function DeleteAction({
 
   return (
     <>
-      {selectionMode === SelectionMode.Multiple && (
+      {selectionMode === SELECTION_MODE.Multiple && (
         <div
           className={styles.checkboxWrapper}
           onClick={onCheck}
@@ -49,7 +50,7 @@ export function DeleteAction({
           onKeyDown={handleKeyDown}
           data-test-id={TEST_IDS.checkbox}
         >
-          <Checkbox size={Checkbox.sizes.S} checked={checked} indeterminate={indeterminate} tabIndex={-1} />
+          <Checkbox size='s' checked={checked} indeterminate={indeterminate} tabIndex={-1} />
         </div>
       )}
 
@@ -57,7 +58,7 @@ export function DeleteAction({
         <ButtonFunction
           data-test-id={TEST_IDS.deleteButton}
           icon={<TrashSVG />}
-          size={ButtonFunction.sizes.M}
+          size='m'
           onClick={onDelete}
           disabled={!checked && !indeterminate}
         />

package/src/helperComponents/DeleteAction/constants.ts

@@ -1,4 +1,4 @@
-export enum SelectionMode {
-  Single = 'single',
-  Multiple = 'multiple',
-}
+export const SELECTION_MODE = {
+  Single: 'single',
+  Multiple: 'multiple',
+} as const;

package/src/helperComponents/DeleteAction/index.ts

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

package/src/helperComponents/DeleteAction/types.ts

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

package/src/helperComponents/MoreActions/MoreActions.tsx

@@ -32,7 +32,7 @@ export function MoreActions({ moreActions }: MoreActionsProps) {
       open={isOpen}
       data-test-id={TEST_IDS.droplist}
       onOpenChange={setIsOpen}
-      placement={Droplist.placements.BottomEnd}
+      placement='bottom-end'
       onFocusLeave={onFocusLeave}
       firstElementRefCallback={firstElementRefCallback}
       useScroll
@@ -40,12 +40,12 @@ export function MoreActions({ moreActions }: MoreActionsProps) {
       triggerElement={
         <ButtonFunction
           icon={<KebabSVG size={24} />}
-          size={ButtonFunction.sizes.M}
+          size='m'
           onKeyDown={onKeyDown}
           data-test-id={TEST_IDS.moreActionsButton}
         />
       }
-      size={Droplist.sizes.S}
+      size='s'
     >
       {moreActions.map(item => (
         <Droplist.ItemSingle