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

package/dist/cjs/helperComponents/BulkActionsCheckbox/BulkActionsCheckbox.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActionsCheckbox = BulkActionsCheckbox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const toggles_1 = require("@snack-uikit/toggles");
+const constants_1 = require("../../constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function BulkActionsCheckbox({ onCheck, checked, indeterminate }) {
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            onCheck === null || onCheck === void 0 ? void 0 : onCheck();
+        }
+    }, [onCheck]);
+    return ((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 }) }));
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BulkActionsCheckbox"), exports);

package/dist/cjs/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/cjs/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/cjs/helperComponents/FilterButton/FilterButton.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterButton = FilterButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_mobile_tooltip_1 = require("@sbercloud/uikit-product-mobile-tooltip");
+const button_1 = require("@snack-uikit/button");
+const constants_1 = require("../../constants");
+function FilterButton({ open, onOpenChange, numberOfFilters }) {
+    const { t } = (0, uikit_product_locale_1.useLocale)('Toolbar');
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_tooltip_1.MobileTooltip, { tip: open ? t('hideFilters') : t('showFilters'), children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { size: 'm', icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.FilterSVG, {}), onClick: () => onOpenChange(!open), counter: numberOfFilters ? { value: numberOfFilters, appearance: 'neutral' } : undefined, "data-test-id": constants_1.TEST_IDS.filterButton }) }));
+}

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FilterButton"), exports);

package/dist/cjs/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/cjs/helperComponents/MoreActions/MoreActions.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoreActions = MoreActions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
+const button_1 = require("@snack-uikit/button");
+const tag_1 = require("@snack-uikit/tag");
+const constants_1 = require("../../constants");
+function MoreActions({ items = [], pinTop }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDroplist, { open: isOpen, "data-test-id": constants_1.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 ? (0, jsx_runtime_1.jsx)(tag_1.Tag, { label: item.tagLabel }) : undefined,
+            'data-test-id': constants_1.TEST_IDS.option,
+        })), children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, { icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.MoreSVG, { size: 24 }), size: 'm', "data-test-id": constants_1.TEST_IDS.moreActionsButton }) }));
+}

package/dist/cjs/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/cjs/helperComponents/MoreActions/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TRIGGER_CLOSE_DROPLIST_KEY_CODES = exports.TRIGGER_OPEN_DROPLIST_KEY_KEYS = void 0;
+exports.TRIGGER_OPEN_DROPLIST_KEY_KEYS = [
+    ' ', // <- Space key
+    'ArrowDown',
+];
+exports.TRIGGER_CLOSE_DROPLIST_KEY_CODES = ['Escape', 'Tab'];

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MoreActions"), exports);

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

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

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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)("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/index.d.ts

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Separator"), exports);

package/dist/cjs/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/cjs/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/cjs/helperComponents/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./BulkActions"), exports);
+__exportStar(require("./FilterButton"), exports);
+__exportStar(require("./MoreActions"), exports);
+__exportStar(require("./Separator"), exports);
+__exportStar(require("./BulkActionsCheckbox"), exports);

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

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

@@ -0,0 +1,6 @@
+import { FiltersState } from '@sbercloud/uikit-product-mobile-chips';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { ToolbarProps } from '@snack-uikit/toolbar';
+export type AdaptiveToolbarProps<TState extends FiltersState = Record<string, unknown>> = WithLayoutType<ToolbarProps<TState>>;
+export declare function AdaptiveToolbar<TState extends FiltersState = Record<string, unknown>>({ layoutType, ...props }: AdaptiveToolbarProps<TState>): import("react/jsx-runtime").JSX.Element;
+export type { ToolbarProps };

package/dist/esm/components/AdaptiveToolbar/AdaptiveToolbar.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toolbar } from '@snack-uikit/toolbar';
+import { MobileToolbar } from '../MobileToolbar';
+export function AdaptiveToolbar(_a) {
+    var { layoutType } = _a, props = __rest(_a, ["layoutType"]);
+    const isMobile = layoutType === 'mobile';
+    return isMobile ? _jsx(MobileToolbar, Object.assign({}, props)) : _jsx(Toolbar, Object.assign({}, props));
+}

package/dist/esm/components/AdaptiveToolbar/index.d.ts

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

package/dist/esm/components/AdaptiveToolbar/index.js

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

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

@@ -0,0 +1,7 @@
+import { FiltersState } from '@sbercloud/uikit-product-mobile-chips';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { CheckedToolbarProps, DefaultToolbarProps, FilterRow } from './types';
+export type MobileToolbarProps<TState extends FiltersState = Record<string, unknown>> = WithSupportProps<DefaultToolbarProps | CheckedToolbarProps> & {
+    filterRow?: FilterRow<TState>;
+};
+export declare function MobileToolbar<TState extends FiltersState = Record<string, unknown>>({ className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps, ...rest }: MobileToolbarProps<TState>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/MobileToolbar/MobileToolbar.js

@@ -0,0 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useMemo, useRef } from 'react';
+import { UpdateSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { MobileChipChoiceRow } from '@sbercloud/uikit-product-mobile-chips';
+import { ButtonFunction } from '@snack-uikit/button';
+import { SearchPrivate } from '@snack-uikit/search-private';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { TEST_IDS } from '../../constants';
+import { BulkActions, FilterButton, MoreActions, Separator } from '../../helperComponents';
+import { BulkActionsCheckbox } from '../../helperComponents/BulkActionsCheckbox';
+import { isBulkActionsProps } from './helpers';
+import { useFilters } from './hooks';
+import styles from './styles.module.css';
+export function MobileToolbar(_a) {
+    var _b, _c;
+    var { className, after, outline, moreActions, onRefresh, search, filterRow: filterRowProps } = _a, rest = __rest(_a, ["className", "after", "outline", "moreActions", "onRefresh", "search", "filterRow"]);
+    const needsBulkActions = isBulkActionsProps(rest);
+    const hasVisibleRefresh = onRefresh && !(moreActions === null || moreActions === void 0 ? void 0 : moreActions.length);
+    const hasLeftSideElements = Boolean(needsBulkActions || hasVisibleRefresh);
+    const resizingContainerRef = useRef(null);
+    const { t } = useLocale('MobileToolbar');
+    const moreActionsProps = useMemo(() => onRefresh
+        ? {
+            pinTop: [{ content: { option: t('refresh') }, icon: _jsx(UpdateSVG, {}), onClick: onRefresh }],
+            items: moreActions,
+        }
+        : { items: moreActions }, [moreActions, onRefresh, t]);
+    const hasMoreActions = Boolean((_b = moreActionsProps.items) === null || _b === void 0 ? void 0 : _b.length);
+    const { filterButton, filterRow } = useFilters({ filterRow: filterRowProps });
+    const hasBulkActionsOpened = Boolean((rest.checked || rest.indeterminate) && rest.selectionMode === 'multiple' && ((_c = rest.bulkActions) === null || _c === void 0 ? void 0 : _c.length));
+    return (_jsxs("div", Object.assign({ className: styles.containerWrapper }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.panel, "data-bulk-actions-opened": hasBulkActionsOpened !== null && hasBulkActionsOpened !== void 0 ? hasBulkActionsOpened : undefined, "data-outline": outline || undefined, children: [_jsxs("div", { className: cn(styles.topRow, className), ref: resizingContainerRef, children: [hasLeftSideElements && (_jsxs("div", { className: styles.beforeSearch, children: [needsBulkActions && (_jsxs(_Fragment, { children: [_jsx(BulkActionsCheckbox, { onCheck: rest.onCheck, checked: rest.checked, indeterminate: rest.indeterminate }), _jsx(Separator, {})] })), hasVisibleRefresh && (_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 })), (hasMoreActions || after || filterButton) && (_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 })] })), (hasMoreActions || filterButton) && _jsx(Separator, {}), filterButton && _jsx(FilterButton, Object.assign({}, filterButton)), hasMoreActions && _jsx(MoreActions, Object.assign({}, moreActionsProps))] }))] }), hasBulkActionsOpened && (_jsx(BulkActions, { actions: rest.bulkActions, onCheck: rest.onCheck, checked: rest.checked, indeterminate: rest.indeterminate, selectionMode: rest.selectionMode, selectedCount: rest.selectedCount, outline: outline }))] }), filterRow && _jsx(MobileChipChoiceRow, Object.assign({}, filterRow, { size: 's', "data-test-id": TEST_IDS.filterRow }))] })));
+}

package/dist/esm/components/MobileToolbar/helpers.d.ts

@@ -0,0 +1,4 @@
+import { FiltersState } from '@sbercloud/uikit-product-mobile-chips';
+import { MobileToolbarProps } from './MobileToolbar';
+import { ToolbarBulkActionProps } from './types';
+export declare function isBulkActionsProps<TState extends FiltersState>(props: Partial<MobileToolbarProps<TState>>): props is ToolbarBulkActionProps;

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

@@ -0,0 +1,3 @@
+export function isBulkActionsProps(props) {
+    return 'selectionMode' in props && props.selectionMode === 'multiple';
+}

package/dist/esm/components/MobileToolbar/hooks.d.ts

@@ -0,0 +1,12 @@
+import { FiltersState } from '@sbercloud/uikit-product-mobile-chips';
+import { FilterButtonProps } from '../../helperComponents';
+import { FilterRow } from './types';
+type UseFiltersProps<TState extends FiltersState> = {
+    filterRow?: FilterRow<TState>;
+};
+type UseFiltersReturnType<TState extends FiltersState> = {
+    filterButton?: FilterButtonProps;
+    filterRow?: FilterRow<TState>;
+};
+export declare function useFilters<TState extends FiltersState>({ filterRow, }: UseFiltersProps<TState>): UseFiltersReturnType<TState>;
+export {};

package/dist/esm/components/MobileToolbar/hooks.js

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { hasFilterBeenApplied } from '@sbercloud/uikit-product-mobile-chips';
+export function useFilters({ filterRow, }) {
+    var _a;
+    const [filtersOpen, setFiltersOpen] = useUncontrolledProp(filterRow === null || filterRow === void 0 ? void 0 : filterRow.open, (filterRow === null || filterRow === void 0 ? void 0 : filterRow.initialOpen) || false, newValue => {
+        var _a;
+        const result = typeof newValue === 'function' ? newValue(filtersOpen) : newValue;
+        (_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(filterRow, result);
+    });
+    const [value, setValue] = useUncontrolledProp(filterRow === null || filterRow === void 0 ? void 0 : filterRow.value, ((_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.defaultValue) !== null && _a !== void 0 ? _a : {}), newValue => {
+        var _a;
+        const result = typeof newValue === 'function' ? newValue(value) : newValue;
+        (_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.onChange) === null || _a === void 0 ? void 0 : _a.call(filterRow, result);
+    });
+    const [visibleFilters, setVisibleFilters] = useUncontrolledProp(filterRow === null || filterRow === void 0 ? void 0 : filterRow.visibleFilters, Object.keys(value), newState => {
+        var _a;
+        const result = typeof newState === 'function' ? newState(visibleFilters) : newState;
+        (_a = filterRow === null || filterRow === void 0 ? void 0 : filterRow.onVisibleFiltersChange) === null || _a === void 0 ? void 0 : _a.call(filterRow, result);
+    });
+    const numberOfFilters = useMemo(() => Object.keys(value).reduce((result, filterKey) => result + Number(hasFilterBeenApplied(value[filterKey])), 0), [value]);
+    return {
+        filterButton: filterRow ? { open: filtersOpen, onOpenChange: setFiltersOpen, numberOfFilters } : undefined,
+        filterRow: filtersOpen && filterRow
+            ? Object.assign(Object.assign({}, filterRow), { open: undefined, onOpenChange: undefined, value, onChange: setValue, visibleFilters, onVisibleFiltersChange: setVisibleFilters }) : undefined,
+    };
+}

package/dist/esm/components/MobileToolbar/index.d.ts

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

package/dist/esm/components/MobileToolbar/index.js

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

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

@@ -0,0 +1,91 @@
+.toolbar{
+  box-sizing:border-box;
+}
+
+.containerWrapper{
+  gap:var(--space-toolbar-container-wrapper-gap, 8px);
+  display:flex;
+  flex-direction:column;
+}
+
+.panel{
+  border-radius:var(--radius-toolbar-container, 4px);
+  position:relative;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.panel[data-outline]::before{
+  border-radius:var(--radius-toolbar-container, 4px);
+  border-width:var(--border-width-toolbar-outline, 1px);
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  box-sizing:border-box;
+  width:100%;
+  height:100%;
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  border-style:solid;
+}
+
+.topRow{
+  position:relative;
+  display:flex;
+  justify-content:space-between;
+  box-sizing:border-box;
+}
+[data-bulk-actions-opened=true] .topRow{
+  border-bottom:1px solid var(--sys-neutral-decor-default, #dde0ea);
+}
+
+.search{
+  height:var(--size-toolbar-checkbox, 40px);
+  padding-left:var(--space-toolbar-search-horizontal-padding, 8px);
+  padding-right:var(--space-toolbar-search-horizontal-padding, 8px);
+  border-radius:var(--radius-toolbar-search, 4px);
+  min-width:var(--size-toolbar-search-min-width, 80px);
+  flex-shrink:1;
+  flex-grow:1;
+  overflow:hidden;
+  min-width:0;
+}
+.search:focus-within{
+  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, );
+  position:relative;
+  outline-color:var(--sys-available-complementary, #1c1c24);
+}
+
+.updateButton{
+  flex-shrink:0;
+}
+.updateButton svg{
+  transform:rotate(360deg);
+  transition:transform 0.5s;
+}
+.updateButton:active svg{
+  transform:rotate(0deg);
+  transition-duration:0s;
+}
+
+.beforeSearch{
+  display:flex;
+  flex-shrink:0;
+  box-sizing:border-box;
+  min-width:0;
+}
+
+.flexRow{
+  display:flex;
+  flex-shrink:0;
+  box-sizing:border-box;
+}
+.flexRow[data-align-right]{
+  margin-left:auto;
+}
+
+.actions{
+  flex-shrink:0;
+  box-sizing:border-box;
+}

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

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { FiltersState, MobileChipChoiceRowProps } from '@sbercloud/uikit-product-mobile-chips';
+import { BulkActionsProps, MoreActionsProps } from '../../helperComponents';
+import { NeverOrUndefined, RequireAtLeastOne } from './typesUtils';
+type OptionalProps = {
+    /** Колбек обновления */
+    onRefresh?(): void;
+    /** Дополнительный слот в конце тулбара */
+    after?: ReactNode;
+    /** Элементы выпадающего списка кнопки с действиями */
+    moreActions?: MoreActionsProps['items'];
+};
+export type CommonToolbarProps = {
+    /** Параметры отвечают за строку поиска <br>
+     * <strong>value</strong>: Значение строки поиска <br>
+     * <strong>onChange</strong>: Колбэк смены значения <br>
+     * <strong>onSubmit</strong>: Колбэк на подтверждение поиска по строке
+     * <strong>placeholder</strong>: Плейсхолдер <br>
+     * <strong>loading</strong>: Состояние загрузки <br>
+     *  */
+    search?: {
+        value: string;
+        onChange(value: string): void;
+        onSubmit?(value: string): void;
+        placeholder?: string;
+        loading?: boolean;
+    };
+    /** Класснейм */
+    className?: string;
+    /** Внешний бордер */
+    outline?: boolean;
+};
+export type ToolbarBulkActionProps = Omit<BulkActionsProps, 'actions'> & {
+    /** Список массовых действий */
+    bulkActions?: BulkActionsProps['actions'];
+};
+export type CheckedToolbarProps = CommonToolbarProps & ToolbarBulkActionProps & OptionalProps;
+export type DefaultToolbarProps = CommonToolbarProps & NeverOrUndefined<ToolbarBulkActionProps> & RequireAtLeastOne<OptionalProps>;
+export type FilterRow<TState extends FiltersState> = Omit<MobileChipChoiceRowProps<TState>, 'size' | 'data-test-id'> & {
+    open?: boolean;
+    initialOpen?: boolean;
+    onOpenChange?(isOpen: boolean): void;
+};
+export {};

package/dist/esm/components/MobileToolbar/types.js

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

package/dist/esm/components/MobileToolbar/typesUtils.d.ts

@@ -0,0 +1,12 @@
+export type IsEqual<A, B> = (<G>() => G extends A ? 1 : 2) extends <G>() => G extends B ? 1 : 2 ? true : false;
+type Filter<KeyType, ExcludeType> = IsEqual<KeyType, ExcludeType> extends true ? never : KeyType extends ExcludeType ? never : KeyType;
+type Except<ObjectType, KeysType extends keyof ObjectType> = {
+    [KeyType in keyof ObjectType as Filter<KeyType, KeysType>]: ObjectType[KeyType];
+};
+export type RequireAtLeastOne<ObjectType, KeysType extends keyof ObjectType = keyof ObjectType> = {
+    [Key in KeysType]-?: Required<Pick<ObjectType, Key>> & Partial<Pick<ObjectType, Exclude<KeysType, Key>>>;
+}[KeysType] & Except<ObjectType, KeysType>;
+export type NeverOrUndefined<T> = {
+    [P in keyof T]?: never;
+};
+export {};

package/dist/esm/components/MobileToolbar/typesUtils.js

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

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

@@ -0,0 +1,2 @@
+export * from './AdaptiveToolbar';
+export * from './MobileToolbar';

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './AdaptiveToolbar';
+export * from './MobileToolbar';

package/dist/esm/constants.d.ts

@@ -0,0 +1,19 @@
+export declare const TEST_IDS: {
+    main: string;
+    checkbox: string;
+    confirmAction: string;
+    rejectAction: string;
+    deleteAction: string;
+    deactivateAction: string;
+    disabledAction: string;
+    bulkActions: string;
+    moreBulkActionsButton: string;
+    refreshButton: string;
+    search: string;
+    filterButton: string;
+    filterRow: string;
+    moreActionsButton: string;
+    droplist: string;
+    option: string;
+    after: string;
+};