@cloud-ru/uikit-product-mobile-layout 0.20.7

package/dist/cjs/helperComponents/Actions/MobileActions.js

@@ -0,0 +1,107 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileActions = MobileActions;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_2 = require("react");
+const uikit_product_icons_1 = require("@sbercloud/uikit-product-icons");
+const uikit_product_locale_1 = require("@sbercloud/uikit-product-locale");
+const uikit_product_mobile_dropdown_1 = require("@sbercloud/uikit-product-mobile-dropdown");
+const uikit_product_mobile_tooltip_1 = require("@sbercloud/uikit-product-mobile-tooltip");
+const uikit_product_quota_1 = require("@sbercloud/uikit-product-quota");
+const button_1 = require("@snack-uikit/button");
+const counter_1 = require("@snack-uikit/counter");
+const utils_1 = require("@snack-uikit/utils");
+const ActionView_1 = require("./ActionView");
+const constants_1 = require("./constants");
+const helpers_1 = require("./helpers");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function MobileActions({ items, maxVisibleItems }) {
+    const containerRef = (0, react_2.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
+    const { visibleItems, hiddenItems } = (0, utils_1.useDynamicList)({ parentContainerRef: containerRef, items, maxVisibleItems });
+    const { t: tQuota } = (0, uikit_product_locale_1.useLocale)('Quota');
+    if (!(0, helpers_1.hasVisibleActions)(items)) {
+        return null;
+    }
+    const hiddenItemsWithKebab = hiddenItems.concat(visibleItems.filter(item => item.variant === 'kebab'));
+    const visibleItemsWithoutKebab = visibleItems.filter(item => item.variant !== 'kebab');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.mobileActionsWrapper, ref: containerRef, children: [hiddenItemsWithKebab.length > 0 && ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDroplist, { open: isOpen, onOpenChange: setIsOpen, items: hiddenItemsWithKebab.reduce((acc, action) => {
+                    var _a, _b;
+                    switch (action.variant) {
+                        case constants_1.BUTTON_TYPE.Tonal:
+                        case constants_1.BUTTON_TYPE.Simple:
+                        case constants_1.BUTTON_TYPE.Outline:
+                        case constants_1.BUTTON_TYPE.Function:
+                        case constants_1.BUTTON_TYPE.Filled: {
+                            acc.push(Object.assign(Object.assign({}, action), { content: { option: (_a = action.label) !== null && _a !== void 0 ? _a : '' }, onClick: event => {
+                                    var _a;
+                                    setIsOpen(false);
+                                    (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, event);
+                                }, beforeContent: action === null || action === void 0 ? void 0 : action.icon, itemWrapRender: action.tooltip
+                                    ? item => {
+                                        var _a, _b;
+                                        return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_tooltip_1.MobileTooltip, Object.assign({ tip: (_b = (_a = action.tooltip) === null || _a === void 0 ? void 0 : _a.tip) !== null && _b !== void 0 ? _b : '' }, action.tooltip, { children: item })));
+                                    }
+                                    : undefined }));
+                            break;
+                        }
+                        case constants_1.BUTTON_TYPE.Quota: {
+                            const quotaExceededCount = react_2.Children.toArray(action.children).reduce((count, child) => {
+                                var _a, _b, _c, _d, _e, _f;
+                                return (0, react_2.isValidElement)(child) &&
+                                    !((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.loading) &&
+                                    !((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.unlimited) &&
+                                    (0, uikit_product_quota_1.checkExceeded)(((_d = (_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.limit) !== null && _d !== void 0 ? _d : 0) - ((_f = (_e = child === null || child === void 0 ? void 0 : child.props) === null || _e === void 0 ? void 0 : _e.created) !== null && _f !== void 0 ? _f : 0))
+                                    ? count + 1
+                                    : count;
+                            }, 0);
+                            const isQuotaExceededCountVisible = !action.dataError && quotaExceededCount > 0;
+                            acc.push(Object.assign(Object.assign({}, action), { type: 'group', divider: acc.length > 0, items: [
+                                    Object.assign(Object.assign({}, action), { content: {
+                                            option: tQuota('quotas'),
+                                        }, afterContent: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isQuotaExceededCountVisible && ((0, jsx_runtime_1.jsx)(counter_1.Counter, { value: quotaExceededCount, appearance: 'red', size: 'm' })), (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronDownSVG, {})] })), itemWrapRender: item => {
+                                            const content = ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.AdaptiveDropdown, { content: (0, jsx_runtime_1.jsx)(uikit_product_quota_1.QuotaDropdownContent, Object.assign({}, action)), layoutType: 'mobile', children: item }));
+                                            return action.tooltip ? ((0, jsx_runtime_1.jsx)(uikit_product_mobile_tooltip_1.MobileTooltip, Object.assign({}, action.tooltip, { children: content }))) : (content);
+                                        } }),
+                                ] }));
+                            break;
+                        }
+                        case constants_1.BUTTON_TYPE.Droplist:
+                        case constants_1.BUTTON_TYPE.Kebab: {
+                            const needDivider = Boolean(action.variant === 'droplist' && (action === null || action === void 0 ? void 0 : action.button.label)) || acc.length > 0;
+                            acc.push(Object.assign(Object.assign({}, action), { type: 'group', label: action.variant === 'droplist' ? action === null || action === void 0 ? void 0 : action.button.label : undefined, divider: needDivider, items: action.list.items.map(item => (Object.assign(Object.assign({}, item), { onClick: event => {
+                                        var _a;
+                                        setIsOpen(false);
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                        // @ts-expect-error
+                                        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, event);
+                                    } }))) }));
+                            break;
+                        }
+                        case constants_1.BUTTON_TYPE.Dropdown: {
+                            acc.push(Object.assign(Object.assign({}, action), { type: 'group', divider: acc.length > 0, items: [
+                                    Object.assign(Object.assign({}, action.button), { content: { option: (_b = action.button.label) !== null && _b !== void 0 ? _b : '' }, onClick: event => {
+                                            var _a, _b;
+                                            (_b = (_a = action.button).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+                                        }, afterContent: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronDownSVG, {}), itemWrapRender: item => {
+                                            const content = ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.AdaptiveDropdown, Object.assign({}, action.dropdown, { layoutType: 'mobile', children: item })));
+                                            return action.tooltip ? ((0, jsx_runtime_1.jsx)(uikit_product_mobile_tooltip_1.MobileTooltip, Object.assign({}, action.tooltip, { children: content }))) : (content);
+                                        } }),
+                                ] }));
+                            break;
+                        }
+                        default: {
+                            break;
+                        }
+                    }
+                    return acc;
+                }, []), children: (0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.KebabSVG, {}), size: 'm' }) })), visibleItemsWithoutKebab.map((action, index) => ((0, react_1.createElement)(ActionView_1.ActionView, Object.assign({}, action, { key: index, layoutType: 'mobile', commonProps: {
+                    className: styles_module_scss_1.default.button,
+                    size: 'm',
+                    fullWidth: true,
+                } }))))] }));
+}

package/dist/cjs/helperComponents/Actions/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const BUTTON_TYPE: {
+    readonly Filled: "filled";
+    readonly Outline: "outline";
+    readonly Tonal: "tonal";
+    readonly Function: "function";
+    readonly Simple: "simple";
+    readonly Dropdown: "dropdown";
+    readonly Droplist: "droplist";
+    readonly Quota: "quota";
+    readonly Kebab: "kebab";
+};

package/dist/cjs/helperComponents/Actions/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BUTTON_TYPE = void 0;
+exports.BUTTON_TYPE = {
+    Filled: 'filled',
+    Outline: 'outline',
+    Tonal: 'tonal',
+    Function: 'function',
+    Simple: 'simple',
+    Dropdown: 'dropdown',
+    Droplist: 'droplist',
+    Quota: 'quota',
+    Kebab: 'kebab',
+};

package/dist/cjs/helperComponents/Actions/helpers.d.ts

@@ -0,0 +1,2 @@
+import { Action } from './types';
+export declare function hasVisibleActions(actions: Action[]): boolean;

package/dist/cjs/helperComponents/Actions/helpers.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasVisibleActions = hasVisibleActions;
+function hasVisibleActions(actions) {
+    return actions.some(action => !action.hidden);
+}

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

@@ -0,0 +1,3 @@
+export * from './DesktopActions';
+export * from './MobileActions';
+export * from './types';

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

@@ -0,0 +1,19 @@
+"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("./DesktopActions"), exports);
+__exportStar(require("./MobileActions"), exports);
+__exportStar(require("./types"), exports);

package/dist/cjs/helperComponents/Actions/styles.module.css

@@ -0,0 +1,35 @@
+.desktopActionsWrapper{
+  display:flex;
+  flex-direction:row-reverse;
+  align-items:center;
+  flex-shrink:0;
+  gap:var(--dimension-1m, 8px);
+  height:100%;
+}
+
+.mobileActionsWrapper{
+  display:flex;
+  gap:8px;
+  flex-shrink:0;
+  width:100%;
+  justify-content:stretch;
+  overflow-y:auto;
+  flex-direction:row-reverse;
+  -ms-overflow-style:none;
+  scrollbar-width:none;
+}
+.mobileActionsWrapper::-webkit-scrollbar{
+  display:none;
+}
+
+.button{
+  white-space:nowrap;
+}
+.button[data-full-width]:not([data-variant=icon-only]){
+  flex-shrink:0;
+  width:auto;
+}
+.button[data-variant=icon-only]{
+  flex-grow:0;
+  flex-shrink:0;
+}

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

@@ -0,0 +1,38 @@
+import { TooltipProps } from '@sbercloud/uikit-product-mobile-tooltip';
+import { QuotaDropdownProps } from '@sbercloud/uikit-product-quota';
+import { ButtonFilledProps, ButtonFunctionProps, ButtonOutlineProps, ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
+import { ButtonDropdownProps } from '../ButtonDropdown';
+import { ButtonDroplistProps } from '../ButtonDroplist';
+import { ButtonKebabProps } from '../ButtonKebab';
+import { BUTTON_TYPE } from './constants';
+type ButtonDropdownPropsWithoutLayout = Omit<ButtonDropdownProps, 'layoutType'>;
+type ButtonKebabPropsWithoutLayout = Omit<ButtonKebabProps, 'layoutType'>;
+type ButtonDroplistWithoutLayout = Omit<ButtonDroplistProps, 'layoutType'>;
+type ButtonQuotaDropdownWithoutLayout = Omit<QuotaDropdownProps, 'layoutType'>;
+export type Action = {
+    tooltip?: TooltipProps;
+    hidden?: boolean;
+} & (({
+    variant?: typeof BUTTON_TYPE.Filled;
+} & ButtonFilledProps) | ({
+    variant: typeof BUTTON_TYPE.Outline;
+} & ButtonOutlineProps) | ({
+    variant: typeof BUTTON_TYPE.Tonal;
+} & ButtonTonalProps) | ({
+    variant: typeof BUTTON_TYPE.Function;
+} & ButtonFunctionProps) | ({
+    variant: typeof BUTTON_TYPE.Simple;
+} & ButtonSimpleProps) | ({
+    variant: typeof BUTTON_TYPE.Dropdown;
+} & ButtonDropdownPropsWithoutLayout) | ({
+    variant: typeof BUTTON_TYPE.Kebab;
+} & ButtonKebabPropsWithoutLayout) | ({
+    variant: typeof BUTTON_TYPE.Droplist;
+} & ButtonDroplistWithoutLayout) | ({
+    variant: typeof BUTTON_TYPE.Quota;
+} & ButtonQuotaDropdownWithoutLayout));
+export type ActionsProps = {
+    items: Action[];
+    maxVisibleItems?: number;
+};
+export {};

package/dist/cjs/helperComponents/Actions/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,8 @@
+import { AdaptiveDropdownProps } from '@sbercloud/uikit-product-mobile-dropdown';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { ButtonFunctionProps } from '@snack-uikit/button';
+export type ButtonDropdownProps = WithLayoutType<{
+    button: Omit<ButtonFunctionProps, 'icon' | 'iconPosition' | 'appearance'>;
+    dropdown: Omit<AdaptiveDropdownProps, 'children' | 'layoutType' | 'placement'>;
+}>;
+export declare function ButtonDropdown({ layoutType, button, dropdown }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/ButtonDropdown/ButtonDropdown.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonDropdown = ButtonDropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 utils_1 = require("@snack-uikit/utils");
+function ButtonDropdown({ layoutType, button, dropdown }) {
+    const [open, onOpenChange] = (0, utils_1.useValueControl)({ onChange: dropdown.onOpenChange, value: dropdown.open });
+    const Icon = open ? uikit_product_icons_1.ChevronUpSVG : uikit_product_icons_1.ChevronDownSVG;
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.AdaptiveDropdown, Object.assign({}, dropdown, { open: open, onOpenChange: onOpenChange, layoutType: layoutType, children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, Object.assign({}, button, { icon: (0, jsx_runtime_1.jsx)(Icon, {}), iconPosition: 'after', appearance: 'neutral' })) })));
+}

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

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

package/dist/cjs/helperComponents/ButtonDropdown/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("./ButtonDropdown"), exports);

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

@@ -0,0 +1,12 @@
+import { AdaptiveDroplistProps } from '@sbercloud/uikit-product-mobile-dropdown';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { ButtonFilledProps, ButtonFunctionProps } from '@snack-uikit/button';
+export type ButtonDroplistProps = WithLayoutType<{
+    button: (Omit<ButtonFilledProps, 'appearance'> & {
+        buttonType?: 'filled';
+    }) | (Omit<ButtonFunctionProps, 'icon' | 'iconPosition' | 'appearance'> & {
+        buttonType?: 'function';
+    });
+    list: Pick<AdaptiveDroplistProps, 'items' | 'closeDroplistOnItemClick' | 'className' | 'open' | 'onOpenChange'>;
+}>;
+export declare function ButtonDroplist({ layoutType, button, list }: ButtonDroplistProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/ButtonDroplist/ButtonDroplist.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonDroplist = ButtonDroplist;
+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 utils_1 = require("@snack-uikit/utils");
+function ButtonDroplist({ layoutType, button, list }) {
+    var _a;
+    const [open, onOpenChange] = (0, utils_1.useValueControl)({ onChange: list.onOpenChange, value: list.open });
+    const Icon = open ? uikit_product_icons_1.ChevronUpSVG : uikit_product_icons_1.ChevronDownSVG;
+    const buttonType = (_a = button.buttonType) !== null && _a !== void 0 ? _a : 'function';
+    const Button = buttonType === 'filled' ? button_1.ButtonFilled : button_1.ButtonFunction;
+    const buttonProps = (0, react_1.useMemo)(() => buttonType === 'filled' ? button : Object.assign(Object.assign({}, button), { appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(Icon, {}), iconPosition: 'after' }), [buttonType, button, Icon]);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.AdaptiveDroplist, Object.assign({}, list, { open: open, onOpenChange: onOpenChange, layoutType: layoutType, selection: {
+            mode: 'single',
+            value: 'null',
+        }, size: 'm', children: (0, jsx_runtime_1.jsx)(Button, Object.assign({}, buttonProps)) })));
+}

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

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

package/dist/cjs/helperComponents/ButtonDroplist/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("./ButtonDroplist"), exports);

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

@@ -0,0 +1,8 @@
+import { AdaptiveDroplistProps } from '@sbercloud/uikit-product-mobile-dropdown';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { ButtonOutlineProps } from '@snack-uikit/button';
+export type ButtonKebabProps = WithLayoutType<{
+    button?: Omit<ButtonOutlineProps, 'label' | 'icon'>;
+    list: Pick<AdaptiveDroplistProps, 'items' | 'closeDroplistOnItemClick' | 'open' | 'onOpenChange' | 'className'>;
+}>;
+export declare function ButtonKebab({ layoutType, button, list }: ButtonKebabProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/ButtonKebab/ButtonKebab.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonKebab = ButtonKebab;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 utils_1 = require("@snack-uikit/utils");
+function ButtonKebab({ layoutType, button, list }) {
+    const [open, onOpenChange] = (0, utils_1.useValueControl)({ onChange: list.onOpenChange, value: list.open });
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.AdaptiveDroplist, Object.assign({}, list, { open: open, onOpenChange: onOpenChange, layoutType: layoutType, selection: {
+            mode: 'single',
+            value: 'null',
+        }, placement: 'bottom-end', size: 'm', children: (0, jsx_runtime_1.jsx)(button_1.ButtonOutline, Object.assign({}, button, { icon: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.KebabSVG, {}), appearance: 'neutral' })) })));
+}

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

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

package/dist/cjs/helperComponents/ButtonKebab/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("./ButtonKebab"), exports);

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type HeadlineProps = {
+    title: string;
+    beforeHeadline?: ReactNode;
+    afterHeadline?: ReactNode;
+    moreActions?: ReactNode;
+    subHeader?: ReactNode;
+};
+export declare function Headline({ title, beforeHeadline, afterHeadline, subHeader, moreActions }: HeadlineProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/Headline/Headline.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.Headline = Headline;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function Headline({ title, beforeHeadline, afterHeadline, subHeader, moreActions }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.headline, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleLayout, children: [beforeHeadline && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.prefixButtonWrapper, children: beforeHeadline }), (0, jsx_runtime_1.jsx)("h1", { className: styles_module_scss_1.default.title, children: title }), moreActions] }), afterHeadline && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.statusWrapper, children: afterHeadline }), subHeader && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.subHeader, children: subHeader })] }));
+}

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

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

package/dist/cjs/helperComponents/Headline/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("./Headline"), exports);

package/dist/cjs/helperComponents/Headline/styles.module.css

@@ -0,0 +1,51 @@
+.headline{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+}
+
+.headlineLayout{
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-1m, 8px);
+  align-items:flex-start;
+}
+
+.titleLayout{
+  display:flex;
+  flex-direction:row;
+  gap:var(--dimension-050m, 4px);
+  align-items:flex-start;
+  flex-grow:1;
+}
+
+.title{
+  font-family:var(--sans-headline-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-headline-s-font-weight, Semibold);
+  line-height:var(--sans-headline-s-line-height, 32px);
+  font-size:var(--sans-headline-s-font-size, 24px);
+  letter-spacing:var(--sans-headline-s-letter-spacing, -0.5px);
+  paragraph-spacing:var(--sans-headline-s-paragraph-spacing, 13.2px);
+  color:var(--sys-neutral-text-main, #41424e);
+  margin:0;
+  word-break:break-word;
+  flex:1;
+}
+
+.prefixButtonWrapper{
+  display:flex;
+  align-items:center;
+  height:var(--sans-headline-m-line-height, 36px);
+  flex-shrink:0;
+}
+
+.statusWrapper{
+  display:flex;
+  align-items:center;
+  height:var(--sans-headline-m-line-height, 36px);
+  flex-shrink:0;
+}
+
+.subHeader{
+  margin-top:8px;
+}

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

@@ -0,0 +1,13 @@
+import { MobileDroplistProps } from '@sbercloud/uikit-product-mobile-dropdown';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { SidebarItem } from './types';
+export type SidebarSelectProps = WithSupportProps<{
+    items: SidebarItem[];
+    footerItems?: SidebarItem[];
+    selected?: string | number;
+    onSelect?(id: string | number): void;
+    className?: string;
+    collapse?: MobileDroplistProps['collapse'];
+    hasSearch?: boolean;
+}>;
+export declare function SidebarSelect({ className, items, footerItems, selected, onSelect, collapse, hasSearch, ...otherProps }: SidebarSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/SidebarSelect/SidebarSelect.js

@@ -0,0 +1,51 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSelect = SidebarSelect;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+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 truncate_string_1 = require("@snack-uikit/truncate-string");
+const utils_1 = require("@snack-uikit/utils");
+const components_1 = require("../../components");
+const hooks_1 = require("./hooks");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+function SidebarSelect(_a) {
+    var _b, _c;
+    var { className, items, footerItems = [], selected, onSelect, collapse, hasSearch } = _a, otherProps = __rest(_a, ["className", "items", "footerItems", "selected", "onSelect", "collapse", "hasSearch"]);
+    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+    const { filteredList, searchCollapseState } = (0, hooks_1.useSearchFilter)(items, searchValue);
+    const list = (0, hooks_1.useItemsContent)(filteredList, onSelect);
+    const footerList = (0, hooks_1.useItemsContent)(footerItems);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const selectedItem = (0, hooks_1.useSelectedItem)(items, selected);
+    const selectedCollapsedState = (0, react_1.useMemo)(() => {
+        if (selectedItem.item) {
+            return { defaultValue: selectedItem.path };
+        }
+    }, [selectedItem.item, selectedItem.path]);
+    const handleSelect = (value) => {
+        if (value) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(value);
+        }
+        setIsOpen(false);
+    };
+    const allItems = (0, react_1.useMemo)(() => [...list, ...footerList], [list, footerList]);
+    const shouldShowSearch = hasSearch !== null && hasSearch !== void 0 ? hasSearch : (allItems.length > 15 || searchValue);
+    return ((0, jsx_runtime_1.jsx)(uikit_product_mobile_dropdown_1.MobileDroplist, { selection: { mode: 'single', value: selected, onChange: handleSelect }, items: allItems, open: isOpen, onOpenChange: setIsOpen, collapse: searchValue ? searchCollapseState : collapse || selectedCollapsedState, search: shouldShowSearch ? { value: searchValue, onChange: setSearchValue } : undefined, scrollToSelectedItem: true, children: (0, jsx_runtime_1.jsxs)(components_1.MobileBlockBasic, Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className) }, (0, utils_1.extractSupportProps)(otherProps), { children: [(0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { className: styles_module_scss_1.default.triggerText, text: ((_b = selectedItem.item) === null || _b === void 0 ? void 0 : _b.label) || '' }), (_c = selectedItem.item) === null || _c === void 0 ? void 0 : _c.afterContent, isOpen ? (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronDownSVG, {})] })) }));
+}

package/dist/cjs/helperComponents/SidebarSelect/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useItemsContent } from './useItemsContent';
+export { useSelectedItem } from './useSelectedItem';
+export { useSearchFilter } from './useSearchFilter';

package/dist/cjs/helperComponents/SidebarSelect/hooks/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchFilter = exports.useSelectedItem = exports.useItemsContent = void 0;
+var useItemsContent_1 = require("./useItemsContent");
+Object.defineProperty(exports, "useItemsContent", { enumerable: true, get: function () { return useItemsContent_1.useItemsContent; } });
+var useSelectedItem_1 = require("./useSelectedItem");
+Object.defineProperty(exports, "useSelectedItem", { enumerable: true, get: function () { return useSelectedItem_1.useSelectedItem; } });
+var useSearchFilter_1 = require("./useSearchFilter");
+Object.defineProperty(exports, "useSearchFilter", { enumerable: true, get: function () { return useSearchFilter_1.useSearchFilter; } });

package/dist/cjs/helperComponents/SidebarSelect/hooks/useItemsContent.d.ts

@@ -0,0 +1,3 @@
+import { MobileDroplistProps } from '@sbercloud/uikit-product-mobile-dropdown';
+import { SidebarItem } from '../types';
+export declare function useItemsContent(items: SidebarItem[], onSelect?: (id: string | number) => void): MobileDroplistProps['items'];