@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.21

package/dropdown/dropdown-loading.d.ts

@@ -0,0 +1,7 @@
+import type { DropdownLoadingProps } from './types';
+/**
+ * Плашка состояния загрузки для Dropdown.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function DropdownLoading({ className, ...props }: DropdownLoadingProps): import("react/jsx-runtime").JSX.Element;

package/dropdown/dropdown-loading.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownLoading = DropdownLoading;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const spinner_1 = require("../spinner");
+const bind_1 = __importDefault(require("classnames/bind"));
+const dropdown_loading_m_scss_1 = __importDefault(require("./dropdown-loading.m.scss"));
+const cx = bind_1.default.bind(dropdown_loading_m_scss_1.default);
+/**
+ * Плашка состояния загрузки для Dropdown.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function DropdownLoading({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, className: cx('root', className), children: (0, jsx_runtime_1.jsx)(spinner_1.SpinnerSVG, { size: 's' }) }));
+}
+//# sourceMappingURL=dropdown-loading.js.map

package/dropdown/dropdown-loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-loading.js","sourceRoot":"","sources":["../../src/dropdown/dropdown-loading.tsx"],"names":[],"mappings":";;;;;AAYA,0CAMC;;AAjBD,wCAAwC;AACxC,2DAAyC;AACzC,wFAA+C;AAE/C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,iCAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwB;IAC3E,OAAO,CACL,mCAAS,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,YAC9C,uBAAC,oBAAU,IAAC,IAAI,EAAC,GAAG,GAAG,GACnB,CACP,CAAC;AACJ,CAAC"}

package/dropdown/dropdown.d.ts

@@ -0,0 +1,7 @@
+import type { DropdownProps } from './types';
+/**
+ * Выпадающий блок. Обычно используется для вывода списков опций выбора.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Dropdown({ rootRef, viewportRef, viewportProps, className, children, 'data-testid': testId, ...restProps }: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/dropdown/dropdown.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = Dropdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const custom_scrollbar_1 = require("../_internal/custom-scrollbar");
+const bind_1 = __importDefault(require("classnames/bind"));
+const dropdown_m_scss_1 = __importDefault(require("./dropdown.m.scss"));
+const cx = bind_1.default.bind(dropdown_m_scss_1.default);
+/**
+ * Выпадающий блок. Обычно используется для вывода списков опций выбора.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Dropdown({ rootRef, viewportRef, viewportProps, className, children, 'data-testid': testId = 'dropdown', ...restProps }) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, className: cx('root', className), ...restProps, "data-testid": testId, children: (0, jsx_runtime_1.jsx)(custom_scrollbar_1.CustomScrollbar, { className: cx('inner'), overflow: { x: 'hidden', y: 'scroll' }, viewportRef: viewportRef, viewportProps: viewportProps, children: children }) }));
+}
+//# sourceMappingURL=dropdown.js.map

package/dropdown/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/dropdown/dropdown.tsx"],"names":[],"mappings":";;;;;AAYA,4BAqBC;;AAhCD,oEAAgE;AAChE,2DAAyC;AACzC,wEAAuC;AAEvC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,yBAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,WAAW,EACX,aAAa,EACb,SAAS,EACT,QAAQ,EACR,aAAa,EAAE,MAAM,GAAG,UAAU,EAClC,GAAG,SAAS,EACE;IACd,OAAO,CACL,gCAAK,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,KAAM,SAAS,iBAAe,MAAM,YACrF,uBAAC,kCAAe,IACd,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,EACtB,QAAQ,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,EAAE,EACtC,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,YAE3B,QAAQ,GACO,GACd,CACP,CAAC;AACJ,CAAC"}

package/dropdown/{dropdown.module.scss → dropdown.m.scss}

@@ -1,13 +1,17 @@
+@use '../shadows';
+
 .root {
   background: #fff;
   outline: 0;
   padding: 8px 0;
+  border-radius: 8px;
+  @include shadows.box-shadow('z4');
 
   // задавать можно только максимальную высоту через --dropdown-max-height
-  max-height: var(--dropdown-max-height, 304px) !important;
+  max-height: var(--dropdown-max-height, 376px) !important;
   height: auto !important;
 }
 
 .inner {
-  max-height: calc(var(--dropdown-max-height, 304px) - 16px); // вычитаем padding корневого элемента
+  max-height: calc(var(--dropdown-max-height, 376px) - 16px); // вычитаем padding корневого элемента
 }

package/dropdown/index.d.ts

@@ -1,18 +1,4 @@
-import React from 'react';
-import { CustomScrollbarProps } from '../_internal/custom-scrollbar';
-interface DropdownStyle extends React.CSSProperties {
-    '--dropdown-max-height'?: string;
-}
-export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
-    /** Стили. */
-    style?: DropdownStyle;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-    /** Свойства компонента CustomScrollbar. */
-    customScrollbarProps?: Omit<CustomScrollbarProps, 'className' | 'overflow' | 'children'>;
-}
-/**
- * Компонент выпадающего блока с контентом, например списком.
- */
-export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement | null>>;
-export {};
+export type { DropdownProps, DropdownStyle, DropdownLoadingProps } from './types';
+export { Dropdown } from './dropdown';
+export { DropdownLoading } from './dropdown-loading';
+export { dropdownFloatingConfig, useDropdownFloatingStyle, useDismissByWheel } from './utils';

package/dropdown/index.js

@@ -1,55 +1,12 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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.Dropdown = void 0;
-const react_1 = __importStar(require("react"));
-const shadows_1 = require("../styling/shadows");
-const shapes_1 = require("../styling/shapes");
-const custom_scrollbar_1 = require("../_internal/custom-scrollbar");
-const bind_1 = __importDefault(require("classnames/bind"));
-const dropdown_module_scss_1 = __importDefault(require("./dropdown.module.scss"));
-const cx = bind_1.default.bind(dropdown_module_scss_1.default);
-/**
- * Компонент выпадающего блока с контентом, например списком.
- */
-exports.Dropdown = (0, react_1.forwardRef)(function Dropdown(_a, ref) {
-    var { className, children, 'data-testid': testId = 'dropdown', customScrollbarProps } = _a, restProps = __rest(_a, ["className", "children", 'data-testid', "customScrollbarProps"]);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: cx('root', className, shadows_1.BoxShadow.z4, shapes_1.MediumRounds.all) }, restProps, { "data-testid": testId }),
-        react_1.default.createElement(custom_scrollbar_1.CustomScrollbar, Object.assign({}, customScrollbarProps, { className: cx('inner'), overflow: { x: 'h', y: 's' } }), children)));
-});
+exports.useDismissByWheel = exports.useDropdownFloatingStyle = exports.dropdownFloatingConfig = exports.DropdownLoading = exports.Dropdown = void 0;
+var dropdown_1 = require("./dropdown");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return dropdown_1.Dropdown; } });
+var dropdown_loading_1 = require("./dropdown-loading");
+Object.defineProperty(exports, "DropdownLoading", { enumerable: true, get: function () { return dropdown_loading_1.DropdownLoading; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "dropdownFloatingConfig", { enumerable: true, get: function () { return utils_1.dropdownFloatingConfig; } });
+Object.defineProperty(exports, "useDropdownFloatingStyle", { enumerable: true, get: function () { return utils_1.useDropdownFloatingStyle; } });
+Object.defineProperty(exports, "useDismissByWheel", { enumerable: true, get: function () { return utils_1.useDismissByWheel; } });
+//# sourceMappingURL=index.js.map

package/dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dropdown/index.ts"],"names":[],"mappings":";;;AACA,uCAAsC;AAA7B,oGAAA,QAAQ,OAAA;AACjB,uDAAqD;AAA5C,mHAAA,eAAe,OAAA;AACxB,iCAA8F;AAArF,+GAAA,sBAAsB,OAAA;AAAE,iHAAA,wBAAwB,OAAA;AAAE,0GAAA,iBAAiB,OAAA"}

package/dropdown/types.d.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties, HTMLAttributes, Ref } from 'react';
+import type { WithTestId } from '../types';
+export interface DropdownStyle extends CSSProperties {
+    '--dropdown-max-height'?: string;
+}
+export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'>, WithTestId {
+    /** Стили. */
+    style?: DropdownStyle;
+    /** Реф корневого элемента. */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Реф внутреннего элемента с прокруткой. */
+    viewportRef?: Ref<HTMLDivElement>;
+    /** Свойства для элемента с прокруткой. */
+    viewportProps?: HTMLAttributes<HTMLDivElement>;
+}
+export type DropdownLoadingProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;

package/dropdown/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dropdown/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/dropdown/types.ts"],"names":[],"mappings":""}

package/dropdown/utils.d.ts

@@ -1,19 +1,30 @@
-import { UseFloatingProps, UseFloatingReturn } from '@floating-ui/react';
+import { RefObject } from 'react';
+import { UseFloatingOptions, UseFloatingReturn } from '@floating-ui/react';
 /**
  * Возвращает конфигурацию для `useFloating` по дизайн-гайдам.
  * @return Конфигурация для `useFloating` по дизайн-гайдам.
  */
-export declare function dropdownFloatingConfig(): Partial<UseFloatingProps>;
+export declare function dropdownFloatingConfig(): Partial<UseFloatingOptions>;
 /**
  * Возвращает стили для элемента с учетом "слоя".
  * @param floating Результат вызова useFloating.
  * @return Стили для элемента с учетом "слоя".
  */
 export declare function useDropdownFloatingStyle({ strategy, x, y, refs, }: Pick<UseFloatingReturn, 'strategy' | 'x' | 'y' | 'refs'>): {
-    position: import("@floating-ui/react").Strategy;
+    position: import("@floating-ui/utils").Strategy;
+    top: number;
+    left: number;
+    zIndex: number;
+} | {
+    minWidth: string;
+    '--opener-width': string;
+    position: import("@floating-ui/utils").Strategy;
     top: number;
     left: number;
-    minWidth: string | undefined;
     zIndex: number;
-    '--opener-width': string | undefined;
 };
+/**
+ * Скрытие меню при прокрутке колесом за пределами меню.
+ * @inheritdoc
+ */
+export declare function useDismissByWheel<T extends HTMLElement>(ref: RefObject<T | null>, callback: VoidFunction): void;

package/dropdown/utils.js

@@ -1,29 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDropdownFloatingStyle = exports.dropdownFloatingConfig = void 0;
-const react_1 = require("@floating-ui/react");
+exports.dropdownFloatingConfig = dropdownFloatingConfig;
+exports.useDropdownFloatingStyle = useDropdownFloatingStyle;
+exports.useDismissByWheel = useDismissByWheel;
+const react_1 = require("react");
+const react_2 = require("@floating-ui/react");
 const layer_1 = require("../helpers/layer");
+const context_1 = require("../context");
+const helpers_1 = require("../helpers");
 /**
  * Возвращает конфигурацию для `useFloating` по дизайн-гайдам.
  * @return Конфигурация для `useFloating` по дизайн-гайдам.
  */
 function dropdownFloatingConfig() {
     return {
-        whileElementsMounted: react_1.autoUpdate,
+        whileElementsMounted: react_2.autoUpdate,
         placement: 'bottom-start',
         middleware: [
             // @todo в будущем с дизайнерами можем решить использовать autoPlacement
             // но есть сложности: https://github.com/floating-ui/floating-ui/discussions/2155
-            (0, react_1.flip)({
+            (0, react_2.flip)({
                 padding: 16,
             }),
-            (0, react_1.shift)({
+            (0, react_2.shift)({
                 padding: 16,
             }),
         ],
     };
 }
-exports.dropdownFloatingConfig = dropdownFloatingConfig;
 /**
  * Возвращает стили для элемента с учетом "слоя".
  * @param floating Результат вызова useFloating.
@@ -31,17 +35,60 @@ exports.dropdownFloatingConfig = dropdownFloatingConfig;
  */
 function useDropdownFloatingStyle({ strategy, x, y, refs, }) {
     const layer = (0, layer_1.useLayer)();
-    const openerWidth = refs.reference.current
-        ? `${refs.reference.current.getBoundingClientRect().width}px`
-        : undefined;
-    return {
-        position: strategy,
-        top: y !== null && y !== void 0 ? y : 0,
-        left: x !== null && x !== void 0 ? x : 0,
-        minWidth: openerWidth,
-        zIndex: layer + 2,
-        // для возможности стилизации
-        '--opener-width': openerWidth,
-    };
+    const [openerWidth, setOpenerWidth] = (0, react_1.useState)(() => refs.reference.current?.getBoundingClientRect().width ?? null);
+    const { createResizeObserver } = (0, react_1.useContext)(context_1.ResizeObserverContext);
+    (0, react_1.useEffect)(() => {
+        const opener = refs.reference.current;
+        if (!(opener instanceof Element)) {
+            return;
+        }
+        const observer = createResizeObserver(() => {
+            setOpenerWidth(opener.getBoundingClientRect().width);
+        });
+        setOpenerWidth(opener.getBoundingClientRect().width);
+        observer.observe(opener);
+        return () => {
+            observer.disconnect();
+        };
+    }, [refs.reference.current, createResizeObserver]);
+    return (0, react_1.useMemo)(() => {
+        const base = {
+            position: strategy,
+            top: y,
+            left: x,
+            zIndex: layer + 2,
+        };
+        if (typeof openerWidth === 'number') {
+            return {
+                ...base,
+                minWidth: `${openerWidth}px`,
+                // ВАЖНО: для возможности стилизации задаем переменную с шириной
+                // @todo при необходимости добавить высоту и другие размеры или же наоборот отказаться от этой переменной
+                '--opener-width': `${openerWidth}px`,
+            };
+        }
+        return base;
+    }, [strategy, x, y, layer, openerWidth]);
 }
-exports.useDropdownFloatingStyle = useDropdownFloatingStyle;
+/**
+ * Скрытие меню при прокрутке колесом за пределами меню.
+ * @inheritdoc
+ */
+function useDismissByWheel(ref, callback) {
+    const callbackRef = (0, react_1.useRef)(callback);
+    callbackRef.current = callback;
+    (0, react_1.useEffect)(() => {
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+        return (0, helpers_1.on)(window, 'wheel', event => {
+            if (event.target instanceof HTMLElement &&
+                element !== event.target &&
+                !element.contains(event.target)) {
+                callbackRef.current();
+            }
+        });
+    }, [ref]);
+}
+//# sourceMappingURL=utils.js.map

package/dropdown/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/dropdown/utils.ts"],"names":[],"mappings":"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"}

package/dropdown-item/dropdown-item.d.ts

@@ -0,0 +1,8 @@
+import type { DropdownItemProps } from './types';
+/**
+ * Элемент выпадающего списка.
+ * @param props Свойства.
+ * @todo Переименовать в MenuItem.
+ * @return Элемент.
+ */
+export declare function DropdownItem({ value, size, children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, dangerouslySetInnerHTML, 'data-testid': testId, ...restProps }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;

package/dropdown-item/dropdown-item.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownItem = DropdownItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const bind_1 = __importDefault(require("classnames/bind"));
+const dropdown_item_m_scss_1 = __importDefault(require("./dropdown-item.m.scss"));
+const cx = bind_1.default.bind(dropdown_item_m_scss_1.default);
+/**
+ * Элемент выпадающего списка.
+ * @param props Свойства.
+ * @todo Переименовать в MenuItem.
+ * @return Элемент.
+ */
+function DropdownItem({ value, size = 'm', children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, dangerouslySetInnerHTML, 'data-testid': testId = 'dropdown-item', ...restProps }) {
+    const start = StartIcon ? (0, jsx_runtime_1.jsx)(StartIcon, { className: cx('icon') }) : startContent;
+    const end = EndIcon ? (0, jsx_runtime_1.jsx)(EndIcon, { className: cx('icon') }) : endContent;
+    const hasChildren = [start, children, end].some(item => typeof item !== 'undefined');
+    return ((0, jsx_runtime_1.jsx)("div", { ...(value !== undefined && { 'data-value': value }), ...restProps, className: cx('root', `size-${size}`, selected && 'selected', checked && 'checked', disabled && 'disabled', noHover && 'no-hover', className), dangerouslySetInnerHTML: dangerouslySetInnerHTML, "data-testid": testId, children: hasChildren ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [start && (0, jsx_runtime_1.jsx)("div", { className: cx('col', 'col-start'), children: start }), (0, jsx_runtime_1.jsxs)("div", { className: cx('col', 'col-center'), children: [(0, jsx_runtime_1.jsx)("div", { className: cx('row-main'), children: children }), size === 'xl' && comment && (0, jsx_runtime_1.jsx)("div", { className: cx('row-comment'), children: comment })] }), end && (0, jsx_runtime_1.jsx)("div", { className: cx('col', 'col-end'), children: end })] })) : undefined }));
+}
+//# sourceMappingURL=dropdown-item.js.map

package/dropdown-item/dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../../src/dropdown-item/dropdown-item.tsx"],"names":[],"mappings":";;;;;AAYA,oCAyDC;;AApED,2DAAyC;AACzC,kFAA4C;AAE5C,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,8BAAM,CAAC,CAAC;AAEnC;;;;;GAKG;AACH,SAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,YAAY,EACZ,SAAS,EAAE,SAAS,EACpB,UAAU,EACV,OAAO,EAAE,OAAO,EAChB,OAAO,EACP,uBAAuB,EACvB,aAAa,EAAE,MAAM,GAAG,eAAe,EACvC,GAAG,SAAS,EACM;IAClB,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,uBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAI,CAAC,CAAC,CAAC,YAAY,CAAC;IAC9E,MAAM,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,uBAAC,OAAO,IAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAI,CAAC,CAAC,CAAC,UAAU,CAAC;IAEtE,MAAM,WAAW,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,IAAI,KAAK,WAAW,CAAC,CAAC;IAErF,OAAO,CACL,mCACM,CAAC,KAAK,KAAK,SAAS,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,KAChD,SAAS,EACb,SAAS,EAAE,EAAE,CACX,MAAM,EACN,QAAQ,IAAI,EAAE,EACd,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,SAAS,EACpB,QAAQ,IAAI,UAAU,EACtB,OAAO,IAAI,UAAU,EACrB,SAAS,CACV,EACD,uBAAuB,EAAE,uBAAuB,iBACnC,MAAM,YAMlB,WAAW,CAAC,CAAC,CAAC,CACb,6DACG,KAAK,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,YAAG,KAAK,GAAO,EAE/D,iCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,aACrC,gCAAK,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,YAAG,QAAQ,GAAO,EAC/C,IAAI,KAAK,IAAI,IAAI,OAAO,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,YAAG,OAAO,GAAO,IAC3E,EAEL,GAAG,IAAI,gCAAK,SAAS,EAAE,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,YAAG,GAAG,GAAO,IACxD,CACJ,CAAC,CAAC,CAAC,SAAS,GACT,CACP,CAAC;AACJ,CAAC"}

package/dropdown-item/index.d.ts

@@ -1,34 +1,2 @@
-import React, { ComponentType, ReactNode, SVGAttributes } from 'react';
-export type DropdownItemSize = 's' | 'm' | 'l' | 'xl';
-export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size'> {
-    /** Отображать элемент как отмеченный (активный) или нет. */
-    checked?: boolean;
-    /** Отображать элемент как выбранный или нет. */
-    selected?: boolean;
-    /** Отключен ли элемент. */
-    disabled?: boolean;
-    /** Нужно ли отключить эффект при наведении. */
-    noHover?: boolean;
-    /** Размер. */
-    size?: DropdownItemSize;
-    /** Строковое значение, ассоциированное с элементом списка. */
-    value?: string;
-    /** Контент перед основным содержимым. */
-    startContent?: ReactNode;
-    /** Контент после основного содержимого. */
-    endContent?: ReactNode;
-    /** Иконка перед основным содержимым. При указании будет проигнорирован "startContent". */
-    startIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
-    /** Иконка после основного содержимого. При указании будет проигнорирован "endContent". */
-    endIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
-    /** Контент под основным содержимым. Выводится только при size='xl'. */
-    comment?: ReactNode;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-/**
- * Элемент выпадающего списка.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function DropdownItem({ size, children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, dangerouslySetInnerHTML, 'data-testid': testId, ...restProps }: DropdownItemProps): JSX.Element;
+export type { DropdownItemProps, DropdownItemSize } from './types';
+export { DropdownItem } from './dropdown-item';

package/dropdown-item/index.js

@@ -1,39 +1,6 @@
 "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.DropdownItem = void 0;
-const react_1 = __importDefault(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const dropdown_item_module_scss_1 = __importDefault(require("./dropdown-item.module.scss"));
-const cx = bind_1.default.bind(dropdown_item_module_scss_1.default);
-/**
- * Элемент выпадающего списка.
- * @param props Свойства.
- * @return Элемент.
- */
-function DropdownItem(_a) {
-    var { size = 'm', children, className, selected, disabled, noHover, checked, startContent, startIcon: StartIcon, endContent, endIcon: EndIcon, comment, dangerouslySetInnerHTML, 'data-testid': testId = 'dropdown-item' } = _a, restProps = __rest(_a, ["size", "children", "className", "selected", "disabled", "noHover", "checked", "startContent", "startIcon", "endContent", "endIcon", "comment", "dangerouslySetInnerHTML", 'data-testid']);
-    const start = StartIcon ? react_1.default.createElement(StartIcon, { className: cx('icon') }) : startContent;
-    const end = EndIcon ? react_1.default.createElement(EndIcon, { className: cx('icon') }) : endContent;
-    const hasChildren = [start, children, end].some(item => typeof item !== 'undefined');
-    return (react_1.default.createElement("div", Object.assign({}, restProps, { className: cx('root', `size-${size}`, selected && 'selected', checked && 'checked', disabled && 'disabled', noHover && 'no-hover', className), dangerouslySetInnerHTML: dangerouslySetInnerHTML, "data-testid": testId }), hasChildren ? (react_1.default.createElement(react_1.default.Fragment, null,
-        start && react_1.default.createElement("div", { className: cx('col', 'col-start') }, start),
-        react_1.default.createElement("div", { className: cx('col', 'col-center') },
-            react_1.default.createElement("div", { className: cx('row-main') }, children),
-            size === 'xl' && comment && react_1.default.createElement("div", { className: cx('row-comment') }, comment)),
-        end && react_1.default.createElement("div", { className: cx('col', 'col-end') }, end))) : undefined));
-}
-exports.DropdownItem = DropdownItem;
+var dropdown_item_1 = require("./dropdown-item");
+Object.defineProperty(exports, "DropdownItem", { enumerable: true, get: function () { return dropdown_item_1.DropdownItem; } });
+//# sourceMappingURL=index.js.map

package/dropdown-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/dropdown-item/index.ts"],"names":[],"mappings":";;;AACA,iDAA+C;AAAtC,6GAAA,YAAY,OAAA"}

package/dropdown-item/types.d.ts

@@ -1,3 +1,28 @@
-import { ReactElement } from 'react';
-import { DropdownItem, DropdownItemProps } from '.';
-export type DropdownItemElement = ReactElement<DropdownItemProps, typeof DropdownItem>;
+import type { ReactElement, ComponentType, ReactNode, SVGAttributes, HTMLAttributes } from 'react';
+import type { WithTestId } from '../types';
+export type DropdownItemSize = 's' | 'm' | 'l' | 'xl';
+export interface DropdownItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'>, WithTestId {
+    /** Отображать элемент как отмеченный (активный) или нет. */
+    checked?: boolean;
+    /** Отображать элемент как выбранный или нет. */
+    selected?: boolean;
+    /** Отключен ли элемент. */
+    disabled?: boolean;
+    /** Нужно ли отключить эффект при наведении. */
+    noHover?: boolean;
+    /** Размер. */
+    size?: DropdownItemSize;
+    /** Строковое значение, ассоциированное с элементом списка. */
+    value?: string;
+    /** Контент перед основным содержимым. */
+    startContent?: ReactNode;
+    /** Контент после основного содержимого. */
+    endContent?: ReactNode;
+    /** Иконка перед основным содержимым. При указании будет проигнорирован "startContent". */
+    startIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Иконка после основного содержимого. При указании будет проигнорирован "endContent". */
+    endIcon?: ComponentType<SVGAttributes<SVGSVGElement>>;
+    /** Контент под основным содержимым. Выводится только при size='xl'. */
+    comment?: ReactNode;
+}
+export type DropdownItemElement = ReactElement<DropdownItemProps>;

package/dropdown-item/types.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dropdown-item/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/dropdown-item/types.ts"],"names":[],"mappings":""}

package/dropdown-item/utils.d.ts

@@ -1,4 +1,3 @@
-import { isValidElement } from 'react';
 import { DropdownItemElement } from './types';
 /** Утилиты для работы с DropdownItem. */
 export declare class DropdownItemUtils {
@@ -7,7 +6,7 @@ export declare class DropdownItemUtils {
      * @param value Значение.
      * @return Является ли переданное значение элементом DropdownItem.
      */
-    static is(value: Parameters<typeof isValidElement>[0]): value is DropdownItemElement;
+    static is(value: unknown): value is DropdownItemElement;
     /**
      * Возвращает значение элемента меню.
      * @param menuItem Значение.

package/dropdown-item/utils.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoopedIterator = exports.DropdownItemUtils = void 0;
 const react_1 = require("react");
-const _1 = require(".");
+const dropdown_item_1 = require("./dropdown-item");
 /** Утилиты для работы с DropdownItem. */
 class DropdownItemUtils {
     /**
@@ -11,7 +11,7 @@ class DropdownItemUtils {
      * @return Является ли переданное значение элементом DropdownItem.
      */
     static is(value) {
-        return (0, react_1.isValidElement)(value) && value.type === _1.DropdownItem;
+        return (0, react_1.isValidElement)(value) && value.type === dropdown_item_1.DropdownItem;
     }
     /**
      * Возвращает значение элемента меню.
@@ -46,6 +46,8 @@ class DropdownItemUtils {
 exports.DropdownItemUtils = DropdownItemUtils;
 /** Список с возможностью перемещаться вперед назад с закольцовыванием. */
 class LoopedIterator {
+    source;
+    position;
     /**
      * Конструктор.
      * @param source Источник данных.
@@ -87,3 +89,4 @@ class LoopedIterator {
     }
 }
 exports.LoopedIterator = LoopedIterator;
+//# sourceMappingURL=utils.js.map

package/dropdown-item/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/dropdown-item/utils.ts"],"names":[],"mappings":";;;AAAA,iCAAuC;AACvC,mDAA+C;AAG/C,yCAAyC;AACzC,MAAa,iBAAiB;IAC5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,KAAc;QACtB,OAAO,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,4BAAY,CAAC;IAC9D,CAAC;IAED;;;;OAIG;IACH,MAAM,CAAC,QAAQ,CAAC,QAA6B;QAC3C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,KAAK,CAAC;QAE3C,4FAA4F;QAC5F,OAAO,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC9D,CAAC;IAED;;;;;OAKG;IACH,MAAM,CAAC,gBAAgB,CACrB,SAAgC,EAChC,YAAoB;QAEpB,IAAI,eAAe,GAAG,CAAC,CAAC,CAAC;QAEzB,MAAM,gBAAgB,GAAkB,SAAS,CAAC,MAAM,CAAW,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;YACtF,IAAI,KAAK,KAAK,YAAY,EAAE,CAAC;gBAC3B,eAAe,GAAG,GAAG,CAAC,MAAM,CAAC;YAC/B,CAAC;YAED,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACzB,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAClB,CAAC;YAED,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,IAAI,cAAc,CAAS,gBAAgB,EAAE,eAAe,CAAC,CAAC;IACvE,CAAC;CACF;AAhDD,8CAgDC;AAED,0EAA0E;AAC1E,MAAa,cAAc;IACjB,MAAM,CAAM;IACZ,QAAQ,CAAS;IAEzB;;;;OAIG;IACH,YAAY,MAAW,EAAE,aAAa,GAAG,CAAC;QACxC,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,aAAa,CAAC;IAChC,CAAC;IAED;;;OAGG;IACH,IAAI;QACF,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAElC,IAAI,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;YACpC,SAAS,GAAG,CAAC,CAAC;QAChB,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAE1B,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;IAED;;;OAGG;IACH,IAAI;QACF,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC7B,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAElC,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;YAClB,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QACrC,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAE1B,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,CAAC;CACF;AArDD,wCAqDC"}

package/expandable/expandable-group.d.ts

@@ -0,0 +1,12 @@
+import { ExpandableGroupProps, ExpandableGroupItemProps } from './types';
+/**
+ * Группа элементов с ограничением на число выводимых строк и возможностью показать все.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ExpandableGroup(props: ExpandableGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const ExpandableItem: import("react").ForwardRefExoticComponent<ExpandableGroupItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export declare const Expandable: {
+    readonly Group: typeof ExpandableGroup;
+    readonly Item: import("react").ForwardRefExoticComponent<ExpandableGroupItemProps & import("react").RefAttributes<HTMLLIElement>>;
+};