@astral/ui 1.50.0 → 1.51.1

package/BackdropStack/hooks/useBackdropStackToggle/useBackdropStackToggle.d.ts

@@ -1,5 +1,5 @@
 import { SyntheticEvent } from 'react';
-import { Reason } from '../../../types';
+import { CloseEventReason } from '../../../types';
 /**
  * @description необязательные настройки для использоввания хука
  */
@@ -23,7 +23,7 @@ type ReturnElements = {
     /**
      * @description метод вызываемый при закрытии элемента, внутри него определяется состояние isOpened
      */
-    handleClose: (event?: SyntheticEvent<Element, Event> | Event | {}, reason?: Reason) => void;
+    handleClose: (event?: SyntheticEvent<Element, Event> | Event | {}, reason?: CloseEventReason) => void;
 };
 type UseBackdropStackToggleFunc = (options?: Options) => ReturnElements;
 /**

package/BackdropStack/services/BackdropStackManager/BackdropStackManager.d.ts

@@ -1,15 +1,43 @@
-import { Reason } from '../../../types';
+import { CloseEventReason } from '../../../types';
+/**
+ * @description айдишка модалки/поппера/тултипа
+ */
 type PopId = string;
 declare class BackdropStackManager {
     private stack;
+    /**
+     * @description сохраняем информацию о том какой был предыдущий вызов pop,
+     * нужен для предотвращения синхронного закрытия при последовательности 'blur' и 'backdropClick' в рамках одного клика
+     */
     private previousPopInfo;
+    /**
+     * @description крайняя айдишка клика по странице
+     */
     private currentPointerId;
     constructor();
+    /**
+     * @description  метод проверки на конфликт причины закрытия с предыдущим
+     */
     private checkOn;
+    /**
+     * @description  метод генерации случайной айдишки
+     */
     generateID: () => string;
+    /**
+     * @description форс метод для удалении подписанного компонента из очереди,
+     * может быть полезно при массовом анмаунте компонентов
+     */
     remove: (id: PopId) => void;
+    /**
+     * @description метод добавления в стек
+     */
     push: (id: PopId) => void;
-    pop: (id: PopId, reason?: Reason) => boolean;
+    /**
+     * @description метод для запроса на выход из очереди,
+     * если все ок, то вернется true, что означает разрешение на выход и компонент будет вычеркнут из очереди,
+     * соответственно возврат false означает запрет, и компонент остается в очереди
+     */
+    pop: (id: PopId, reason?: CloseEventReason) => boolean;
 }
 export declare const backdropStackManager: BackdropStackManager;
 export {};

package/BackdropStack/services/BackdropStackManager/BackdropStackManager.js

@@ -1,29 +1,61 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.backdropStackManager = void 0;
+/**
+ * @description расширяемый набор конфликтующих причин закрытия с кликом по бэкдропу модалки,
+ * т.к. некоторые способы закрытия вызываются раньше, чем вызов backdropClick,
+ * а при несоблюдении последовательности возникают конфликты
+ */
+const backdropConflictsReasons = new Set([
+    'blur',
+    'clickAway',
+]);
 class BackdropStackManager {
     constructor() {
         var _a;
         this.stack = [];
-        // сохраняем информацию о том какой был предыдущий вызов pop,
-        // нужен для предотвращения синхронного закрытия при последовательности 'blur' и 'backdropClick' в рамках одного клика
+        /**
+         * @description сохраняем информацию о том какой был предыдущий вызов pop,
+         * нужен для предотвращения синхронного закрытия при последовательности 'blur' и 'backdropClick' в рамках одного клика
+         */
         this.previousPopInfo = [null, null];
+        /**
+         * @description крайняя айдишка клика по странице
+         */
         this.currentPointerId = null;
+        /**
+         * @description  метод проверки на конфликт причины закрытия с предыдущим
+         */
         this.checkOn = (reason) => {
             const [previousReason, previousPointerId] = this.previousPopInfo;
             return (reason === 'backdropClick' &&
-                previousReason === 'blur' &&
+                backdropConflictsReasons.has(previousReason) &&
                 previousPointerId === this.currentPointerId);
         };
+        /**
+         * @description  метод генерации случайной айдишки
+         */
         this.generateID = () => {
             return String(Math.random());
         };
+        /**
+         * @description форс метод для удалении подписанного компонента из очереди,
+         * может быть полезно при массовом анмаунте компонентов
+         */
         this.remove = (id) => {
             this.stack = this.stack.filter((item) => item !== id);
         };
+        /**
+         * @description метод добавления в стек
+         */
         this.push = (id) => {
             this.stack.push(id);
         };
+        /**
+         * @description метод для запроса на выход из очереди,
+         * если все ок, то вернется true, что означает разрешение на выход и компонент будет вычеркнут из очереди,
+         * соответственно возврат false означает запрет, и компонент остается в очереди
+         */
         this.pop = (id, reason) => {
             if (this.checkOn(reason)) {
                 return false;

package/Button/styles.d.ts

@@ -64,7 +64,7 @@ export declare const LoadingButtonWrapper: import("@emotion/styled").StyledCompo
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "disabled" | "action" | "color" | "sx" | "href" | "onFocusVisible" | "tabIndex" | "children" | "variant" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon" | "loading" | "loadingIndicator" | "loadingPosition"> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & Omit<import("../types").WithoutEmotionSpecific<import("@mui/lab").LoadingButtonProps<"button", {}>>, "color" | "variant"> & {
+} & Omit<import("..").WithoutEmotionSpecific<import("@mui/lab").LoadingButtonProps<"button", {}>>, "color" | "variant"> & {
     variant?: "link" | "light" | "text" | "contained" | undefined;
     color?: "primary" | "error" | "warning" | "success" | undefined;
     component?: import("react").ElementType<any> | undefined;

package/ClickAwayListener/ClickAwayListener.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { UseClickAwayListenerOptions } from '../hooks';
+export type ClickAwayListenerProps = Omit<UseClickAwayListenerOptions, 'ref'> & {
+    children: JSX.Element;
+};
+/**
+ * @description компонент предоставляющий обертку для работы с хуком useClickAwayEffect
+ */
+export declare const ClickAwayListener: ({ onClickAway, preventBubbling, isActive, children, }: ClickAwayListenerProps) => import("react").FunctionComponentElement<any>;

package/ClickAwayListener/ClickAwayListener.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClickAwayListener = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+/**
+ * @description компонент предоставляющий обертку для работы с хуком useClickAwayEffect
+ */
+const ClickAwayListener = ({ onClickAway, preventBubbling, isActive, children, }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, hooks_1.useClickAwayEffect)({ ref, onClickAway, preventBubbling, isActive });
+    return react_1.Children.only((0, react_1.cloneElement)(children, { ref }));
+};
+exports.ClickAwayListener = ClickAwayListener;

package/ClickAwayListener/ClickAwayListener.test.js

@@ -0,0 +1,37 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tests_1 = require("@astral/tests");
+const vitest_1 = require("vitest");
+const ClickAwayListener_1 = require("./ClickAwayListener");
+describe('ClickAwayListener', () => {
+    it('Props:isActive=true: при клике внутри onClickAway не вызывается', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClickAway = vitest_1.vi.fn();
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(ClickAwayListener_1.ClickAwayListener, Object.assign({ onClickAway: onClickAway, isActive: true }, { children: (0, jsx_runtime_1.jsx)("div", { children: "Lorem" }) })));
+        const div = tests_1.screen.getByText('Lorem');
+        yield tests_1.userEvents.click(div);
+        expect(onClickAway).toBeCalledTimes(0);
+    }));
+    it('Props:isActive=false: при клике внутри onClickAway не вызывается', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClickAway = vitest_1.vi.fn();
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(ClickAwayListener_1.ClickAwayListener, Object.assign({ onClickAway: onClickAway, isActive: false }, { children: (0, jsx_runtime_1.jsx)("div", { children: "Lorem" }) })));
+        const div = tests_1.screen.getByText('Lorem');
+        yield tests_1.userEvents.click(div);
+        expect(onClickAway).toBeCalledTimes(0);
+    }));
+    it('Props:isActive=true: при клике снаружи, onClickAway вызывается', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClickAway = vitest_1.vi.fn();
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(ClickAwayListener_1.ClickAwayListener, Object.assign({ onClickAway: onClickAway, isActive: true }, { children: (0, jsx_runtime_1.jsx)("div", { children: "Lorem" }) })));
+        yield tests_1.userEvents.click(document.body);
+        expect(onClickAway).toBeCalledTimes(1);
+    }));
+});

package/ClickAwayListener/index.d.ts

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

package/{DatePicker/DatePickerClickAwayListener → ClickAwayListener}/index.js

@@ -14,4 +14,4 @@ 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("./DatePickerClickAwayListener"), exports);
+__exportStar(require("./ClickAwayListener"), exports);

package/DataGrid/DataGridNoData/styles.d.ts

@@ -16,7 +16,7 @@ export declare const DataGridNoDataIcon: import("@emotion/styled").StyledCompone
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DataGridNoDataFigcaption: import("@emotion/styled").StyledComponent<Pick<import("react").PropsWithChildren<TypographyProps>, string | number | symbol> & import("react").RefAttributes<HTMLElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & Omit<import("@mui/material/OverridableComponent").OverrideProps<import("../../types").WithoutEmotionSpecific<import("@mui/material").TypographyTypeMap<{}, "span">>, import("react").ElementType<any>>, "color" | "variant"> & {
+} & Omit<import("@mui/material/OverridableComponent").OverrideProps<import("../..").WithoutEmotionSpecific<import("@mui/material").TypographyTypeMap<{}, "span">>, import("react").ElementType<any>>, "color" | "variant"> & {
     variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
     component?: import("react").ElementType<any> | undefined;
     color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;

package/DatePicker/DatePicker.d.ts

@@ -1,7 +1,7 @@
 import { SyntheticEvent } from 'react';
 import { TextFieldProps } from '../TextField';
 import { DateMask } from '../utils/date';
-import { Reason } from '../types';
+import { CloseEventReason } from '../types';
 import { MinMaxDate } from './types';
 import { MondayFirst } from './DayPicker';
 export type DatePickerProps = MondayFirst & Partial<MinMaxDate> & {
@@ -16,13 +16,14 @@ export type DatePickerProps = MondayFirst & Partial<MinMaxDate> & {
     onChange?: (date?: Date) => void;
     onBlur?: () => void;
     onOpen?: () => void;
-    onClose?: (event?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void;
+    onClose?: (event?: SyntheticEvent<Element, Event> | Event, reason?: CloseEventReason) => void;
     inputProps?: Omit<TextFieldProps, 'ref' | 'value' | 'onChange'>;
     disabled?: boolean;
     /**
      * @description Принимает только Date object, включая невалидную дату Invalid date
      * */
     value?: Date;
+    className?: string;
 };
 export declare const DatePicker: import("react").ForwardRefExoticComponent<MondayFirst & Partial<MinMaxDate> & {
     /**
@@ -36,11 +37,12 @@ export declare const DatePicker: import("react").ForwardRefExoticComponent<Monda
     onChange?: ((date?: Date) => void) | undefined;
     onBlur?: (() => void) | undefined;
     onOpen?: (() => void) | undefined;
-    onClose?: ((event?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void) | undefined;
+    onClose?: ((event?: SyntheticEvent<Element, Event> | Event, reason?: CloseEventReason) => void) | undefined;
     inputProps?: Omit<TextFieldProps, "ref" | "value" | "onChange"> | undefined;
     disabled?: boolean | undefined;
     /**
      * @description Принимает только Date object, включая невалидную дату Invalid date
      * */
     value?: Date | undefined;
+    className?: string | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/DatePicker/DatePicker.js

@@ -15,13 +15,13 @@ exports.DatePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const hooks_1 = require("../hooks");
-const DatePickerClickAwayListener_1 = require("./DatePickerClickAwayListener");
+const ClickAwayListener_1 = require("../ClickAwayListener");
 const DatePickerInput_1 = require("./DatePickerInput");
 const DatePickerPopper_1 = require("./DatePickerPopper");
 const MinMaxDateContext_1 = require("./MinMaxDateContext");
 const YearMonthDayPicker_1 = require("./YearMonthDayPicker");
 const hooks_2 = require("./hooks");
-const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, value, }, forwardedRef) => {
+const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onClose, mask = 'DD.MM.YYYY', isMondayFirst, inputProps, disabled, value, className, }, forwardedRef) => {
     const { maxDate, minDate } = (0, react_1.useContext)(MinMaxDateContext_1.MinMaxDateContext);
     const ref = (0, hooks_1.useForwardedRef)(forwardedRef);
     const [isOpenPopper, openPopper, closePopper] = (0, hooks_1.useToggle)({
@@ -47,7 +47,7 @@ const DatePickerInner = (0, react_1.forwardRef)(({ onChange, onOpen, onBlur, onC
     const handleChangeMaskInput = (e) => {
         onChangeMaskedValue(e.target.value);
     };
-    return ((0, jsx_runtime_1.jsxs)(DatePickerClickAwayListener_1.DatePickerClickAwayListener, Object.assign({ onClickAway: handleClosePopper }, { children: [(0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, Object.assign({}, inputProps, { mask: mask, onNativeChange: handleChangeMaskInput, disabled: disabled, value: maskedValue, ref: ref, onFocus: openPopper })), (0, jsx_runtime_1.jsx)(DatePickerPopper_1.DatePickerPopper, Object.assign({ open: isOpenPopper, onClose: handleClosePopper, anchorEl: ref === null || ref === void 0 ? void 0 : ref.current }, { children: (0, jsx_runtime_1.jsx)(YearMonthDayPicker_1.YearMonthDayPicker, { isMondayFirst: isMondayFirst, selectedDate: selectedBaseDate, onChange: handleDayPick, date: selectedBaseDate || baseDate }) }))] })));
+    return ((0, jsx_runtime_1.jsx)(ClickAwayListener_1.ClickAwayListener, Object.assign({ isActive: isOpenPopper, onClickAway: handleClosePopper }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(DatePickerInput_1.DatePickerInput, Object.assign({}, inputProps, { mask: mask, onNativeChange: handleChangeMaskInput, disabled: disabled, value: maskedValue, ref: ref, onFocus: openPopper })), (0, jsx_runtime_1.jsx)(DatePickerPopper_1.DatePickerPopper, Object.assign({ open: isOpenPopper, onClose: handleClosePopper, anchorEl: ref === null || ref === void 0 ? void 0 : ref.current }, { children: (0, jsx_runtime_1.jsx)(YearMonthDayPicker_1.YearMonthDayPicker, { isMondayFirst: isMondayFirst, selectedDate: selectedBaseDate, onChange: handleDayPick, date: selectedBaseDate || baseDate }) }))] })) })));
 });
 exports.DatePicker = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { minDate, maxDate } = _a, props = __rest(_a, ["minDate", "maxDate"]);

package/DatePicker/DatePicker.test.js

@@ -89,4 +89,10 @@ describe('DatePicker', () => {
         yield tests_1.userEvents.tab();
         expect(onBlur).not.toBeCalled();
     }));
+    it('Props:onBlur: не вызывается при клике мимо инпута, если поповер закрыт', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onBlur = vitest_1.vi.fn();
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, { onBlur: onBlur }));
+        yield tests_1.userEvents.click(document.body);
+        expect(onBlur).not.toBeCalled();
+    }));
 });

package/DatePicker/DatePickerPopper/DatePickerPopper.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren, SyntheticEvent } from 'react';
 import { PopperProps } from '@mui/material';
-import { Reason, WithoutEmotionSpecific } from '../../types';
+import { CloseEventReason, WithoutEmotionSpecific } from '../../types';
 export type DatePickerProps = PropsWithChildren<Omit<WithoutEmotionSpecific<PopperProps>, 'children'>> & {
-    onClose?: (_?: SyntheticEvent<Element, Event> | Event, reason?: Reason) => void;
+    onClose?: (_?: SyntheticEvent<Element, Event> | Event, reason?: CloseEventReason) => void;
 };
 export declare const DatePickerPopper: ({ children, onClose, ...props }: DatePickerProps) => JSX.Element;

package/Fab/styles.d.ts

@@ -30,7 +30,7 @@ export declare const StyledFab: import("@emotion/styled").StyledComponent<{
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "disabled" | "action" | "color" | "sx" | "href" | "onFocusVisible" | "tabIndex" | "children" | "variant" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & Omit<import("../types").WithoutEmotionSpecific<import("@mui/material").FabProps<"button", {}>>, "color" | "variant"> & {
+} & Omit<import("..").WithoutEmotionSpecific<import("@mui/material").FabProps<"button", {}>>, "color" | "variant"> & {
     color?: "primary" | "default" | "error" | "warning" | "success" | undefined;
     variant?: "square" | "circular" | "extended" | undefined;
 } & {

package/IconButton/styles.d.ts

@@ -8,7 +8,7 @@ export declare const getButtonSize: ({ size, }: IconButtonWrapperThemeProps) =>
 export declare const getButtonSizeMobile: ({ size, }: IconButtonWrapperThemeProps) => string;
 export declare const IconButtonWrapper: import("@emotion/styled").StyledComponent<Pick<import("../ButtonBase").BaseButtonProps, "color" | "translate" | keyof import("@mui/base").ButtonUnstyledOwnProps | "form" | "slot" | "style" | "title" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "variant" | "size" | "selected"> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
-} & Omit<import("../types").WithoutEmotionSpecific<import("@mui/lab").LoadingButtonProps<"button", {}>>, "color" | "variant"> & {
+} & Omit<import("..").WithoutEmotionSpecific<import("@mui/lab").LoadingButtonProps<"button", {}>>, "color" | "variant"> & {
     variant?: "link" | "light" | "text" | "contained" | undefined;
     color?: "primary" | "error" | "warning" | "success" | undefined;
     component?: import("react").ElementType<any> | undefined;

package/ListItem/ListItem.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { ListItemProps } from './types';
-export declare const ListItem: ({ ...props }: ListItemProps) => JSX.Element;
+export declare const ListItem: (props: ListItemProps) => JSX.Element;

package/ListItem/ListItem.js

@@ -1,21 +1,9 @@
 "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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("./styles");
-const ListItem = (_a) => {
-    var props = __rest(_a, []);
+const ListItem = (props) => {
     return (0, jsx_runtime_1.jsx)(styles_1.StyledListItem, Object.assign({}, props));
 };
 exports.ListItem = ListItem;

package/MenuGroup/MenuGroup.d.ts

@@ -1,3 +1,9 @@
-/// <reference types="react" />
-import { MenuGroupProps } from './types';
+import { ReactNode } from 'react';
+export type MenuGroupProps = {
+    children: ReactNode;
+    /**
+     * Заголовок группы
+     */
+    label: string;
+};
 export declare const MenuGroup: (props: MenuGroupProps) => JSX.Element;

package/MenuGroup/MenuGroup.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styled_1 = require("./styled");
+const styles_1 = require("./styles");
 const MenuGroup = (props) => {
     const { children, label } = props;
     const upperCasedLabel = (0, react_1.useMemo)(() => label.toUpperCase(), [label]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styled_1.StyledLabel, Object.assign({ variant: "h7" }, { children: upperCasedLabel })), (0, jsx_runtime_1.jsx)(styled_1.StyledContentWrapper, { children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.MenuGroupLabel, Object.assign({ component: "li", variant: "h7" }, { children: upperCasedLabel })), (0, jsx_runtime_1.jsx)(styles_1.MenuGroupContent, { children: (0, jsx_runtime_1.jsx)("ul", { children: children }) })] }));
 };
 exports.MenuGroup = MenuGroup;

package/MenuGroup/stories/styled.d.ts

@@ -35,4 +35,4 @@ export declare const StyledLabel: import("@emotion/styled").StyledComponent<Pick
 export declare const StyledMenuWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;

package/MenuGroup/stories/styled.js

@@ -10,6 +10,6 @@ exports.StyledMenuItem = (0, styles_1.styled)(MenuItem_1.MenuItem) `
 exports.StyledLabel = (0, styles_1.styled)(Typography_1.Typography) `
   font-size: ${({ theme }) => theme.typography.h5.fontSize};
 `;
-exports.StyledMenuWrapper = styles_1.styled.div `
-  padding-top: ${({ theme }) => theme.spacing(2)};
+exports.StyledMenuWrapper = styles_1.styled.ul `
+  padding: ${({ theme }) => theme.spacing(2, 0, 0, 0)};
 `;

package/MenuGroup/styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const MenuGroupLabel: import("@emotion/styled").StyledComponent<Pick<import("react").PropsWithChildren<import("../Typography").TypographyProps>, string | number | symbol> & import("react").RefAttributes<HTMLElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const MenuGroupContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;

package/MenuGroup/{styled.js → styles.js}

@@ -1,17 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledContentWrapper = exports.StyledLabel = void 0;
+exports.MenuGroupContent = exports.MenuGroupLabel = void 0;
 const styles_1 = require("../styles");
 const Typography_1 = require("../Typography");
-exports.StyledLabel = (0, styles_1.styled)(Typography_1.Typography) `
+exports.MenuGroupLabel = (0, styles_1.styled)(Typography_1.Typography) `
   display: block;
+  width: 100%;
   padding: ${({ theme }) => theme.spacing(2, 4)};
 
   color: ${({ theme }) => theme.palette.grey[700]};
   line-height: ${({ theme }) => theme.typography.pxToRem(16)};
 `;
-exports.StyledContentWrapper = styles_1.styled.div `
-  & > li {
-    padding-left: ${({ theme }) => theme.spacing(7)};
+exports.MenuGroupContent = styles_1.styled.li `
+  width: 100%;
+
+  & ul {
+    padding: 0;
+
+    list-style: none;
   }
 `;

package/ProductSwitcher/ProductSwitcher.js

@@ -41,6 +41,6 @@ const ProductSwitcher = ({ getProducts }) => {
             }
         }
     });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ ref: anchorRef, selected: open, variant: "text", onClick: handleShowProducts }, { children: (0, jsx_runtime_1.jsx)(icons_1.ProductsFillMd, {}) })), (0, jsx_runtime_1.jsx)(styles_1.WidgetMenu, Object.assign({ open: open, anchorEl: anchorRef.current, onClose: handleCloseMenu }, { children: (0, jsx_runtime_1.jsx)(styles_1.ContentWrapper, { children: (0, jsx_runtime_1.jsx)(ProductSwitcherContent_1.ProductSwitcherContent, { isLoading: isLoading, isError: isError, products: products }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, Object.assign({ ref: anchorRef, selected: open, variant: "text", onClick: handleShowProducts }, { children: (0, jsx_runtime_1.jsx)(icons_1.ProductsFillMd, {}) })), (0, jsx_runtime_1.jsx)(styles_1.WidgetMenu, Object.assign({ open: open, anchorEl: anchorRef.current, onClose: handleCloseMenu }, { children: (0, jsx_runtime_1.jsx)(ProductSwitcherContent_1.ProductSwitcherContent, { isLoading: isLoading, isError: isError, products: products }) }))] }));
 };
 exports.ProductSwitcher = ProductSwitcher;

package/ProductSwitcher/ProductSwitcher.stories.js

@@ -20,42 +20,49 @@ exports.handleReject = handleReject;
 const handleGetProducts = () => {
     return new Promise((resolve) => setTimeout(() => resolve([
         {
+            id: '49d3ce2a-d57c-4794-b659-f80e31ff53b1',
             url: '',
             name: 'Астрал.Отчет',
             logoUrl: 'https://identity.astral.ru/api/Files/06a5fb56-210c-4f08-bb7b-253a9103560f',
             color: '#2d77ff',
         },
         {
+            id: '49d3ce2a-d57c-4794-b659-f80e31ff532',
             url: '',
             name: 'Астрал.ЭДО',
             logoUrl: 'https://identity.astral.ru/api/Files/b5b06b5a-2d0e-491b-9815-043d82f104aa',
             color: 'rgb(117 90 253)',
         },
         {
+            id: '49d3ce2a-d57c-4794-b659-f80e31ff533',
             url: '',
             name: 'Астрал.КЭДО',
             logoUrl: 'https://identity.astral.ru/api/Files/f0519e97-7a50-4796-a8d2-877cd15c7668',
             color: 'rgb(117 90 253)',
         },
         {
-            url: '',
+            id: '49d3ce2a-d57c-4794-b659-f80e31ff534',
+            url: 'https://ofd.astralnalog.ru/lk',
             name: 'Астрал.ОФД',
             logoUrl: 'https://identity.astral.ru/api/Files/f0519e97-7a50-4796-a8d2-877cd15c7668',
             color: 'rgb(117 90 253)',
         },
         {
+            id: '49d3ce2a-d57c-4794-b659-f80e31ff535',
             url: '',
             name: 'Астрал.ЭТ',
             logoUrl: 'https://identity.astral.ru/api/Files/ac497150-1926-47be-9e5f-42e739e7279c',
             color: 'rgb(55 103 152)',
         },
         {
+            id: '49d3ce2a-d57c-4794-b659-f80e31ff536',
             url: '',
             name: 'Личный кабинет',
             logoUrl: 'https://identity.astral.ru/api/Files/9d214f12-c518-44e2-a711-fa1bf2b89fdd',
             color: 'rgb(10, 124, 255)',
         },
         {
+            id: '49d3ce2a-d57c-4794-b659-f80e31ff537',
             url: '',
             name: 'Кабинет партнера',
             logoUrl: 'https://identity.astral.ru/api/Files/f0519e97-7a50-4796-a8d2-877cd15c7668',

package/ProductSwitcher/ProductSwitcherContent/ProductSwitcherContent.js

@@ -2,16 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductSwitcherContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@astral/icons");
 const ContentState_1 = require("../../ContentState");
+const MenuGroup_1 = require("../../MenuGroup");
+const Typography_1 = require("../../Typography");
 const styles_1 = require("./styles");
 const ProductSwitcherContent = ({ isLoading, isError, products = [], }) => {
     return ((0, jsx_runtime_1.jsx)(ContentState_1.ContentState, Object.assign({ isLoading: isLoading, isCustom: isError, customState: {
             imgAlt: 'Что-то пошло не так',
-            title: 'Что-то пошло не так',
+            title: ((0, jsx_runtime_1.jsxs)(styles_1.TitleErrorContainer, Object.assign({ container: true, autoFlow: "column", alignItems: "center", justifyContent: "center", component: "span" }, { children: [(0, jsx_runtime_1.jsx)(icons_1.ErrorFillSm, { color: "inherit" }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ variant: "h6", color: "grey", colorIntensity: 900 }, { children: "\u0427\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A" }))] }))),
             description: 'Произошла ошибка. Повторите попытку позже.',
-            // TODO: imgSrc обязательный параметр, а в title не засунуть текст с иконкой. Соответствующая доработка в задаче:
-            // https://astraltrack.atlassian.net/jira/software/c/projects/UIKIT/boards/142?modal=detail&selectedIssue=UIKIT-435
-            imgSrc: '',
-        } }, { children: products.map((product) => ((0, jsx_runtime_1.jsxs)(styles_1.ProductItem, Object.assign({}, product, { children: [(0, jsx_runtime_1.jsx)(styles_1.Logo, { src: product.logoUrl, color: product.color }), product.name] }), product.name))) })));
+        } }, { children: (0, jsx_runtime_1.jsx)(MenuGroup_1.MenuGroup, Object.assign({ label: "\u041F\u0440\u043E\u0434\u0443\u043A\u0442\u044B \u044D\u043A\u043E\u0441\u0438\u0441\u0442\u0435\u043C\u044B" }, { children: products.map((product) => {
+                return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)(styles_1.ProductItem, Object.assign({ component: "a", href: product.url }, { children: [(0, jsx_runtime_1.jsx)(styles_1.Logo, { src: product.logoUrl, color: product.color }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, Object.assign({ variant: "ui", color: "grey", colorIntensity: 900 }, { children: product.name }))] })) }, product.id));
+            }) })) })));
 };
 exports.ProductSwitcherContent = ProductSwitcherContent;

package/ProductSwitcher/ProductSwitcherContent/styles.d.ts

@@ -1,35 +1,11 @@
 /// <reference types="react" />
-export declare const ProductItem: import("@emotion/styled").StyledComponent<{
-    autoFocus?: boolean | undefined;
-    classes?: Partial<import("@mui/material").MenuItemClasses> | undefined;
-    dense?: boolean | undefined;
-    disabled?: boolean | undefined;
-    disableGutters?: boolean | undefined;
-    divider?: boolean | undefined;
-    selected?: boolean | undefined;
-    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "css" | "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "disabled" | "action" | "divider" | "sx" | "onFocusVisible" | "tabIndex" | "children" | "autoFocus" | "selected" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "dense" | "disableGutters"> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
+export declare const ProductItem: import("@mui/material").ExtendButtonBase<import("@mui/material").MenuItemTypeMap<{}, "li">>;
 export declare const Logo: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const TitleErrorContainer: import("@emotion/styled").StyledComponent<import("../../Grid").GridContainerProps & import("../../Grid").GridElementsProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;