@cloud-ru/uikit-product-mobile-toolbar 0.4.3 → 0.4.5

package/dist/esm/constants.js

@@ -0,0 +1,19 @@
+export const TEST_IDS = {
+    main: 'toolbar',
+    checkbox: 'toolbar__checkbox',
+    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',
+    filterButton: 'toolbar__filter-button',
+    filterRow: 'toolbar__filter-row',
+    moreActionsButton: 'toolbar__more-actions-button',
+    droplist: 'toolbar__droplist',
+    option: 'toolbar__droplist-option',
+    after: 'toolbar__after',
+};

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

@@ -0,0 +1,4 @@
+import { BulkActionsProps } from './types';
+export declare function BulkActions({ actions, selectedCount, outline }: BulkActionsProps & {
+    outline?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/BulkActions/BulkActions.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileDroplist } from '@sbercloud/uikit-product-mobile-dropdown';
+import { MobileTooltip } from '@sbercloud/uikit-product-mobile-tooltip';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Counter } from '@snack-uikit/counter';
+import { useDynamicList } from '@snack-uikit/utils';
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.css';
+export function BulkActions({ actions = [], selectedCount, outline }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const parentContainerRef = useRef(null);
+    const { t } = useLocale('MobileToolbar');
+    const { visibleItems, hiddenItems } = useDynamicList({
+        items: actions,
+        parentContainerRef,
+        maxVisibleItems: 3,
+    });
+    return (_jsxs("div", { className: styles.bulkActionsContainer, "data-outline": outline, children: [_jsx("div", { className: styles.counter, children: selectedCount && _jsx(Counter, { value: selectedCount, appearance: 'primary', color: 'decor' }) }), _jsxs("div", { className: styles.bulkActionsWrapper, "data-test-id": TEST_IDS.bulkActions, ref: parentContainerRef, children: [_jsx("div", { className: styles.smallSeparator }), _jsx("div", { className: styles.bulkActions, children: visibleItems.map(({ label, icon: Icon, onClick, disabled, tooltip, 'data-test-id': testId }) => (_jsx(MobileTooltip, { tip: tooltip, open: tooltip ? undefined : false, placement: 'top', "data-test-id": `${testId}-tooltip`, children: _jsx(ButtonFunction, { className: styles.action, "data-test-id": testId, iconPosition: 'before', icon: _jsx(Icon, {}), label: label, size: 'm', onClick: onClick, disabled: disabled }) }, label))) }), hiddenItems.length > 0 && (_jsx(MobileDroplist, { open: isOpen, onOpenChange: setIsOpen, items: hiddenItems.map(({ label, icon: Icon, onClick, disabled, tooltip, 'data-test-id': testId }) => ({
+                            id: label,
+                            content: { option: label },
+                            beforeContent: _jsx(Icon, {}),
+                            onClick: () => {
+                                onClick === null || onClick === void 0 ? void 0 : onClick();
+                                setIsOpen(false);
+                            },
+                            disabled,
+                            itemWrapRender: item => (_jsx(MobileTooltip, { 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', appearance: 'primary', label: t('more'), "data-test-id": TEST_IDS.moreBulkActionsButton }) }))] })] }));
+}

package/dist/esm/helperComponents/BulkActions/constants.d.ts

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

package/dist/esm/helperComponents/BulkActions/constants.js

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

package/dist/esm/helperComponents/BulkActions/index.d.ts

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

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

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

package/dist/esm/helperComponents/BulkActions/styles.module.css

@@ -0,0 +1,60 @@
+.bulkActionsContainer{
+  position:relative;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+}
+
+.counter{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  flex-shrink:0;
+  flex-grow:0;
+  width:40px;
+  height:40px;
+}
+
+.bulkActionsWrapper{
+  padding-right:var(--space-toolbar-bulk-action-padding-right, 12px);
+  width:100%;
+  scrollbar-width:none;
+  display:flex;
+  flex-grow:1;
+  flex-shrink:1;
+  justify-content:start;
+  align-items:center;
+  min-width:0;
+  -ms-overflow-style:none;
+}
+.bulkActionsWrapper::-webkit-scrollbar{
+  display:none;
+}
+
+.bulkActions{
+  gap:var(--space-toolbar-bulk-action-gap, 8px);
+  display:flex;
+  flex-grow:1;
+  flex-shrink:1;
+  padding-left:8px;
+}
+
+.moreActionButton{
+  flex-shrink:0;
+  padding-left:4px;
+}
+
+.action{
+  white-space:nowrap;
+}
+.action[data-full-width]:not([data-variant=icon-only]){
+  flex-shrink:0;
+  width:auto;
+}
+
+.smallSeparator{
+  box-sizing:border-box;
+  width:var(--border-width-toolbar-separator, 1px);
+  height:16px;
+  background-color:var(--sys-neutral-decor-default, #dde0ea);
+}

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

@@ -0,0 +1,28 @@
+import { JSXElementConstructor } from 'react';
+import { MobileTooltipProps } from '@sbercloud/uikit-product-mobile-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?: MobileTooltipProps['tip'];
+    onClick?(): void;
+}>;
+export type BulkActionsProps = {
+    /** Список массовых действий */
+    actions?: BulkAction[];
+    /** Колбек смены значения чекбокса */
+    onCheck?(): void;
+    /** Значение чекбокса */
+    checked?: boolean;
+    /** Состояние частичного выбора */
+    indeterminate?: boolean;
+    /** Режим выбора @default 'multiple'*/
+    selectionMode?: SelectionMode;
+    /** Количество выбранных элементов */
+    selectedCount?: number;
+};

package/dist/esm/helperComponents/BulkActions/types.js

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

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

@@ -0,0 +1,6 @@
+export type BulkActionsCheckboxProps = {
+    onCheck?: () => void;
+    checked?: boolean;
+    indeterminate?: boolean;
+};
+export declare function BulkActionsCheckbox({ onCheck, checked, indeterminate }: BulkActionsCheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/BulkActionsCheckbox/BulkActionsCheckbox.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Checkbox } from '@snack-uikit/toggles';
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.css';
+export function BulkActionsCheckbox({ onCheck, checked, indeterminate }) {
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            onCheck === null || onCheck === void 0 ? void 0 : onCheck();
+        }
+    }, [onCheck]);
+    return (_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 }) }));
+}

package/dist/esm/helperComponents/BulkActionsCheckbox/index.d.ts

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

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

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

package/dist/esm/helperComponents/BulkActionsCheckbox/styles.module.css

@@ -0,0 +1,18 @@
+.checkboxWrapper{
+  border-radius:var(--radius-toolbar-checkbox, 4px);
+  width:var(--size-toolbar-checkbox, 40px);
+  height:var(--size-toolbar-checkbox, 40px);
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+.checkboxWrapper:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  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);
+}

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FilterSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileTooltip } from '@sbercloud/uikit-product-mobile-tooltip';
+import { ButtonFunction } from '@snack-uikit/button';
+import { TEST_IDS } from '../../constants';
+export function FilterButton({ open, onOpenChange, numberOfFilters }) {
+    const { t } = useLocale('Toolbar');
+    return (_jsx(MobileTooltip, { 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

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

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

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

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

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { BaseItemProps } from '@sbercloud/uikit-product-mobile-dropdown';
+type Action = {
+    tagLabel?: string;
+    icon?: ReactNode;
+} & Pick<BaseItemProps, 'content' | 'disabled' | 'onClick'>;
+export type MoreActionsProps = {
+    items?: Action[];
+    pinTop?: Action[];
+};
+export declare function MoreActions({ items, pinTop }: MoreActionsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/MoreActions/MoreActions.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MoreSVG } from '@sbercloud/uikit-product-icons';
+import { MobileDroplist } from '@sbercloud/uikit-product-mobile-dropdown';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Tag } from '@snack-uikit/tag';
+import { TEST_IDS } from '../../constants';
+export function MoreActions({ items = [], pinTop }) {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsx(MobileDroplist, { open: isOpen, "data-test-id": TEST_IDS.droplist, onOpenChange: setIsOpen, scroll: true, 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        size: 'l', pinTop: pinTop === null || pinTop === void 0 ? void 0 : pinTop.map(item => (Object.assign(Object.assign({}, item), { beforeContent: item.icon, onClick: e => {
+                var _a;
+                (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+                setIsOpen(false);
+                e.stopPropagation();
+            } }))), items: items.map(item => ({
+            onClick: e => {
+                var _a;
+                (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, e);
+                setIsOpen(false);
+                e.stopPropagation();
+            },
+            disabled: item.disabled,
+            content: item.content,
+            beforeContent: item.icon,
+            afterContent: item.tagLabel ? _jsx(Tag, { label: item.tagLabel }) : undefined,
+            'data-test-id': TEST_IDS.option,
+        })), children: _jsx(ButtonFunction, { icon: _jsx(MoreSVG, { size: 24 }), size: 'm', "data-test-id": TEST_IDS.moreActionsButton }) }));
+}

package/dist/esm/helperComponents/MoreActions/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const TRIGGER_OPEN_DROPLIST_KEY_KEYS: string[];
+export declare const TRIGGER_CLOSE_DROPLIST_KEY_CODES: string[];

package/dist/esm/helperComponents/MoreActions/constants.js

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

package/dist/esm/helperComponents/MoreActions/index.d.ts

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

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

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

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

@@ -0,0 +1 @@
+export declare function Separator(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Separator/Separator.js

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

package/dist/esm/helperComponents/Separator/index.d.ts

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+export * from './BulkActions';
+export * from './FilterButton';
+export * from './MoreActions';
+export * from './Separator';
+export * from './BulkActionsCheckbox';

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,5 @@
+export * from './BulkActions';
+export * from './FilterButton';
+export * from './MoreActions';
+export * from './Separator';
+export * from './BulkActionsCheckbox';

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-toolbar",
   "title": "Mobile Toolbar",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -30,17 +30,18 @@
     "name": "Akhremenko Grigorii",
     "url": "https://github.com/AGrigorii"
   },
+  "contributors": [],
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-icons": "15.1.1",
-    "@cloud-ru/uikit-product-mobile-chips": "0.8.36",
-    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.21",
-    "@cloud-ru/uikit-product-mobile-tooltip": "0.4.65",
-    "@cloud-ru/uikit-product-utils": "7.0.0",
+    "@cloud-ru/uikit-product-icons": "15.1.3",
+    "@cloud-ru/uikit-product-mobile-chips": "0.8.38",
+    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.23",
+    "@cloud-ru/uikit-product-mobile-tooltip": "0.4.67",
+    "@cloud-ru/uikit-product-utils": "7.0.2",
     "@snack-uikit/button": "0.19.15",
     "@snack-uikit/counter": "0.8.9",
     "@snack-uikit/search-private": "0.4.29",
@@ -54,5 +55,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+  "gitHead": "bf479ecf7238ef20b78f20acaef439efa535d1a1"
 }