@astral/ui 0.48.4 → 1.0.0-test.1670405759

package/esm/hooks/useEscapeClickEffect/useEscapeClickEffect.test.js

@@ -0,0 +1,26 @@
+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());
+    });
+};
+import { renderHook, userEvents } from '@astral/tests';
+import { vi } from 'vitest';
+import { useEscapeClickEffect } from './useEscapeClickEffect';
+describe('useEscapeClickEffect', () => {
+    it('Props:isActive=true: при нажатии esc вызывается onEscape', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onEscape = vi.fn();
+        renderHook(() => useEscapeClickEffect({ isActive: true, onEscape }));
+        yield userEvents.keyboard('{Escape}');
+        expect(onEscape).toBeCalled();
+    }));
+    it('Props:isActive=false: при нажатии esc onEscape не вызывается', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onEscape = vi.fn();
+        renderHook(() => useEscapeClickEffect({ isActive: false, onEscape }));
+        yield userEvents.keyboard('{Escape}');
+        expect(onEscape).not.toBeCalled();
+    }));
+});

package/esm/hooks/useForwardedRef/index.d.ts

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

package/esm/hooks/useForwardedRef/index.js

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

package/esm/hooks/useForwardedRef/useForwardedRef.d.ts

@@ -0,0 +1,5 @@
+import { ForwardedRef } from 'react';
+/**
+ * @description хук позволяет использовать опциональный реф пришедший сверху, т.к. ForwardedRef может являться колбэком, это может подходить не для всех компонентов, яркий пример MaskField
+ */
+export declare const useForwardedRef: <T>(forwardedRef: ForwardedRef<T>) => import("react").RefObject<T>;

package/esm/hooks/useForwardedRef/useForwardedRef.js

@@ -0,0 +1,9 @@
+import { useImperativeHandle, useRef } from 'react';
+/**
+ * @description хук позволяет использовать опциональный реф пришедший сверху, т.к. ForwardedRef может являться колбэком, это может подходить не для всех компонентов, яркий пример MaskField
+ */
+export const useForwardedRef = (forwardedRef) => {
+    const localRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => localRef.current, [forwardedRef]);
+    return localRef;
+};

package/esm/hooks/useMenu/index.d.ts

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

package/esm/hooks/useMenu/index.js

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

package/esm/hooks/{useMenu.d.ts → useMenu/useMenu.d.ts}

@@ -1,5 +1,5 @@
 import { ForwardedRef, MutableRefObject } from 'react';
-declare type UseMenuResult = {
+type UseMenuResult = {
     /**
      * Флаг состояния меню (открыто-закрыто)
      */

package/esm/hooks/useMenu/useMenu.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef, useState, } from 'react';
+export function useMenu(ref = null) {
+    const [open, setOpen] = useState(false);
+    const anchorRef = useRef(null);
+    useEffect(() => {
+        if (!ref) {
+            return;
+        }
+        if (typeof ref === 'function') {
+            ref(anchorRef.current);
+        }
+        else {
+            ref.current = anchorRef.current;
+        }
+    }, [ref]);
+    const handleCloseMenu = () => setOpen(false);
+    const handleOpenMenu = () => setOpen(true);
+    return { open, anchorRef, handleCloseMenu, handleOpenMenu };
+}

package/esm/hooks/useRadioGroup/index.d.ts

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

package/esm/hooks/useRadioGroup/index.js

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

package/esm/hooks/useRadioGroup/useRadioGroup.d.ts

@@ -0,0 +1 @@
+export { useRadioGroup } from '@mui/material/RadioGroup';

package/esm/hooks/useRadioGroup/useRadioGroup.js

@@ -0,0 +1 @@
+export { useRadioGroup } from '@mui/material/RadioGroup';

package/esm/hooks/useToggle/index.d.ts

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

package/esm/hooks/useToggle/index.js

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

package/esm/hooks/useToggle/useToggle.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @description тип обозначающий какой угодно рест аргументов
+ */
+type Arguments = unknown[];
+/**
+ * @description хэндлер принимающий на вход неизвестное колличество аргументов, неизвестного вида
+ */
+type Handler<Args extends Arguments> = (...a: Args) => void;
+/**
+ * @description хэндлер на открытие с неизвестным колличеством аргументов, неизвестного вида
+ */
+type OpenHandler<Args extends Arguments> = Handler<Args>;
+/**
+ * @description хэндлер на закрытие с неизвестным колличеством аргументов, неизвестного вида
+ */
+type CloseHandler<Args extends Arguments> = Handler<Args>;
+type UseToggleResultTuple<CloseArgs extends Arguments, OpenArgs extends Arguments> = [
+    /**
+     * @description флаг активности состояния
+     */
+    boolean,
+    OpenHandler<OpenArgs>,
+    CloseHandler<CloseArgs>
+];
+type UseToggleOptions<CloseArgs extends Arguments, OpenArgs extends Arguments> = {
+    /**
+     * @description изначальное состояние активности
+     */
+    initialState?: boolean;
+    /**
+     * @description коллбэк на открытие
+     */
+    onActive?: OpenHandler<OpenArgs>;
+    /**
+     * @description коллбэк на закрытие
+     */
+    onInactive?: CloseHandler<CloseArgs>;
+};
+/**
+ * @description хук хранящий стейт активности, и предоставляющий методы переключения c проксируемыми аргументами, позволяет уменьшить бойлерплейт код
+ */
+export declare const useToggle: <CloseArgs extends Arguments, OpenArgs extends Arguments>(params?: UseToggleOptions<CloseArgs, OpenArgs> | undefined) => UseToggleResultTuple<CloseArgs, OpenArgs>;
+export {};

package/esm/hooks/useToggle/useToggle.js

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+/**
+ * @description хук хранящий стейт активности, и предоставляющий методы переключения c проксируемыми аргументами, позволяет уменьшить бойлерплейт код
+ */
+export const useToggle = (params) => {
+    const { initialState = false, onInactive, onActive } = params || {};
+    const [isActive, setActive] = useState(initialState);
+    // выставляем флаг активности в true, и проксируем все принятые аргументы
+    const handleActive = (...args) => {
+        setActive(true);
+        onActive === null || onActive === void 0 ? void 0 : onActive(...args);
+    };
+    // выставляем флаг активности в false, и проксируем все принятые аргументы
+    const handleInactive = (...args) => {
+        setActive(false);
+        onInactive === null || onInactive === void 0 ? void 0 : onInactive(...args);
+    };
+    return [isActive, handleActive, handleInactive];
+};

package/esm/index.d.ts

@@ -1,23 +1,31 @@
 export * from './ActionCell';
+export * from './Alert';
 export * from './Autocomplete';
+export * from './BackdropStack';
 export * from './Badge';
 export * from './Button';
+export * from './Breadcrumbs';
+export * from './Collapse';
+export * from './DatePickerProvider';
+export * from './Description';
 export * from './Divider';
 export * from './ButtonBase';
 export * from './Checkbox';
 export * from './CircularProgress';
+export * from './ConfigProvider';
 export * from './DashboardLayout';
 export * from './DataGrid';
 export * from './DataGridPagination';
 export * from './DatePicker';
-export * from './DatePickerProvider';
 export * from './Dialog';
 export * from './DialogActions';
 export * from './DialogContent';
 export * from './DialogContentText';
 export * from './DialogTitle';
 export * from './DropdownButton';
+export * from './Fab';
 export * from './Fade';
+export * from './FormControl';
 export * from './FormControlLabel';
 export * from './FormHelperText';
 export * from './GlobalStyles';
@@ -40,8 +48,13 @@ export * from './MenuItem';
 export * from './MenuList';
 export * from './MenuGroup';
 export * from './OverflowTypography';
+export * from './PageAside';
+export * from './PageHeader';
+export * from './PageLayout';
+export * from './PageLayoutContainer';
 export * from './Placeholder';
 export * from './Product';
+export * from './ProductSwitcher';
 export * from './Profile';
 export * from './Radio';
 export * from './RadioGroup';
@@ -49,12 +62,16 @@ export * from './Select';
 export * from './styles';
 export * from './StylesCacheProvider';
 export * from './Table';
+export * from './Tab';
+export * from './Tabs';
 export * from './Tag';
 export * from './TextArea';
 export * from './theme';
 export * from './ThemeProvider';
 export * from './TextField';
 export * from './Typography';
+export * from './ToggleButton';
+export * from './ToggleButtonGroup';
 export * from './Tooltip';
 export * from './SideDialog';
 export * from './SideDialogTitle';
@@ -62,8 +79,11 @@ export * from './SideDialogActions';
 export * from './SideDialogContent';
 export * from './SideDialogContentText';
 export * from './Slide';
+export * from './SwipeableDrawer';
 export * from './Zoom';
 export * from './Notification';
 export * from './LocalizationProvider';
 export * from './ContentState';
 export * from './Chevron';
+export * from './Stepper';
+export * from './Switch';

package/esm/index.js

@@ -1,23 +1,31 @@
 export * from './ActionCell';
+export * from './Alert';
 export * from './Autocomplete';
+export * from './BackdropStack';
 export * from './Badge';
 export * from './Button';
+export * from './Breadcrumbs';
+export * from './Collapse';
+export * from './DatePickerProvider';
+export * from './Description';
 export * from './Divider';
 export * from './ButtonBase';
 export * from './Checkbox';
 export * from './CircularProgress';
+export * from './ConfigProvider';
 export * from './DashboardLayout';
 export * from './DataGrid';
 export * from './DataGridPagination';
 export * from './DatePicker';
-export * from './DatePickerProvider';
 export * from './Dialog';
 export * from './DialogActions';
 export * from './DialogContent';
 export * from './DialogContentText';
 export * from './DialogTitle';
 export * from './DropdownButton';
+export * from './Fab';
 export * from './Fade';
+export * from './FormControl';
 export * from './FormControlLabel';
 export * from './FormHelperText';
 export * from './GlobalStyles';
@@ -40,8 +48,13 @@ export * from './MenuItem';
 export * from './MenuList';
 export * from './MenuGroup';
 export * from './OverflowTypography';
+export * from './PageAside';
+export * from './PageHeader';
+export * from './PageLayout';
+export * from './PageLayoutContainer';
 export * from './Placeholder';
 export * from './Product';
+export * from './ProductSwitcher';
 export * from './Profile';
 export * from './Radio';
 export * from './RadioGroup';
@@ -49,12 +62,16 @@ export * from './Select';
 export * from './styles';
 export * from './StylesCacheProvider';
 export * from './Table';
+export * from './Tab';
+export * from './Tabs';
 export * from './Tag';
 export * from './TextArea';
 export * from './theme';
 export * from './ThemeProvider';
 export * from './TextField';
 export * from './Typography';
+export * from './ToggleButton';
+export * from './ToggleButtonGroup';
 export * from './Tooltip';
 export * from './SideDialog';
 export * from './SideDialogTitle';
@@ -62,8 +79,11 @@ export * from './SideDialogActions';
 export * from './SideDialogContent';
 export * from './SideDialogContentText';
 export * from './Slide';
+export * from './SwipeableDrawer';
 export * from './Zoom';
 export * from './Notification';
 export * from './LocalizationProvider';
 export * from './ContentState';
 export * from './Chevron';
+export * from './Stepper';
+export * from './Switch';

package/{theme → esm/theme/baseTheme}/baseTheme.d.ts

@@ -1,8 +1,8 @@
 import { BreakpointsOptions, Palette as MuiPalette, Theme as MuiTheme, PaletteColor, ThemeOptions } from '@mui/material/styles';
-import { Background, Color } from './palette';
-import { FontsUrls } from './components';
-import { Brand } from './constants';
-export declare type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
+import { Background, Color } from '../palette';
+import { FontsUrls } from '../components';
+import { Brand } from '../constants';
+export type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
     red: Color;
     green: Color;
     yellow: Color;
@@ -10,8 +10,8 @@ export declare type Palette = Omit<MuiPalette, 'grey' | 'background'> & {
     primary: PaletteColor & Color;
     background: Background;
 };
-export declare type Theme = MuiTheme;
-declare type CreateThemeParams = {
+export type Theme = MuiTheme;
+type CreateThemeParams = {
     brand: Brand;
     options?: ThemeOptions;
     fontsUrls: FontsUrls;

package/esm/theme/baseTheme/baseTheme.js

@@ -0,0 +1,22 @@
+import { createTheme as createMuiTheme, } from '@mui/material/styles';
+import { merge } from 'lodash-es';
+import { typography } from '../typography';
+import { getPalette } from '../palette';
+import { getComponents } from '../components';
+import { SPACING } from '../constants';
+import { elevation } from '../elevation';
+import { shape } from '../shape';
+import { defaultBreakpoints } from '../breakpoints';
+export const createTheme = (params) => {
+    const { brand, options, fontsUrls, breakpoints = defaultBreakpoints, } = params;
+    const themeOptions = {
+        typography,
+        breakpoints,
+        spacing: SPACING,
+        palette: getPalette(brand),
+        components: getComponents(fontsUrls),
+    };
+    const muiTheme = createMuiTheme(merge({}, themeOptions, options));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return merge(muiTheme, { elevation, shape });
+};

package/esm/theme/baseTheme/baseTheme.test.d.ts

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

package/esm/theme/{__tests__/BaseTheme.test.js → baseTheme/baseTheme.test.js}

@@ -1,7 +1,7 @@
-import { createTheme } from '../baseTheme';
 import { Brand } from '../constants';
-describe('createTheme', function () {
-    var fontsUrls = {
+import { createTheme } from './baseTheme';
+describe('createTheme', () => {
+    const fontsUrls = {
         bold: {
             woff: '',
             woff2: '',
@@ -19,19 +19,19 @@ describe('createTheme', function () {
             woff2: '',
         },
     };
-    it('Theme merge done correctly', function () {
-        var extendedTheme = createTheme({
+    it('Theme merge done correctly', () => {
+        const extendedTheme = createTheme({
             brand: Brand.DEFAULT,
-            fontsUrls: fontsUrls,
+            fontsUrls,
             options: {
                 typography: { h1: { lineHeight: 12 } },
             },
         });
         expect(extendedTheme.typography.h1.lineHeight).toBe(12);
     });
-    it('Color should be taken depending on the brand', function () {
-        var theme = createTheme({ brand: Brand.SIGN, fontsUrls: fontsUrls });
-        var expected = {
+    it('Color should be taken depending on the brand', () => {
+        const theme = createTheme({ brand: Brand.SIGN, fontsUrls });
+        const expected = {
             primary: {
                 main: '#376798',
                 dark: '#325D89',
@@ -43,12 +43,12 @@ describe('createTheme', function () {
         };
         expect(theme.palette).toMatchObject(expected);
     });
-    it('Spacing are calculated correctly', function () {
-        var theme = createTheme({ brand: Brand.SIGN, fontsUrls: fontsUrls });
+    it('Spacing are calculated correctly', () => {
+        const theme = createTheme({ brand: Brand.SIGN, fontsUrls });
         expect(theme.spacing(2)).toBe('8px');
     });
-    it('Theme has elevation params', function () {
-        var theme = createTheme({ brand: Brand.SIGN, fontsUrls: fontsUrls });
+    it('Theme has elevation params', () => {
+        const theme = createTheme({ brand: Brand.SIGN, fontsUrls });
         expect(theme.elevation[100]).toBe('0px 0px 1px 0px #072D574F, 0px 1px 1px 0px #072D5740;');
     });
 });

package/esm/theme/baseTheme/index.d.ts

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

package/esm/theme/baseTheme/index.js

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

package/esm/theme/breakpoints.js

@@ -1,4 +1,4 @@
-export var defaultBreakpoints = {
+export const defaultBreakpoints = {
     values: {
         xs: 0,
         sm: 600,

package/esm/theme/components/MuiAlert.d.ts

@@ -0,0 +1,3 @@
+import { Components } from '@mui/material';
+import type { Theme } from '../baseTheme';
+export declare const MuiAlert: Components<Theme>['MuiAlert'];

package/esm/theme/components/MuiAlert.js

@@ -0,0 +1,49 @@
+export const MuiAlert = {
+    styleOverrides: {
+        filledSuccess({ theme }) {
+            return {
+                backgroundColor: theme.palette.success.light,
+                color: theme.palette.text.primary,
+                svg: {
+                    color: theme.palette.green['900'],
+                },
+            };
+        },
+        filledError({ theme }) {
+            return {
+                backgroundColor: theme.palette.error.light,
+                color: theme.palette.text.primary,
+                svg: {
+                    color: theme.palette.red['900'],
+                },
+            };
+        },
+        filledWarning({ theme }) {
+            return {
+                backgroundColor: theme.palette.warning.light,
+                color: theme.palette.text.primary,
+                svg: {
+                    color: theme.palette.yellow['900'],
+                },
+            };
+        },
+        filledInfo({ theme }) {
+            return {
+                backgroundColor: theme.palette.primary['100'],
+                color: theme.palette.text.primary,
+                svg: {
+                    // TODO: для варианта info в дизайн системе нет набора цветов, временно подвязался на primary
+                    // но в других темах цвета корявые
+                    color: theme.palette.primary['900'],
+                },
+            };
+        },
+        action({ theme }) {
+            return {
+                svg: {
+                    color: `${theme.palette.text.primary} !important`,
+                },
+            };
+        },
+    },
+};

package/esm/theme/components/MuiAutocomplete.js

@@ -1,55 +1,43 @@
-import { AutocompleteSizes } from '../../Autocomplete/constants';
-export var MuiAutocomplete = {
+import { AutocompleteSizes } from '../../Autocomplete/enums';
+export const MuiAutocomplete = {
     styleOverrides: {
-        root: function (_a) {
-            var theme = _a.theme;
+        inputRoot({ theme, ownerState: { size } }) {
             return {
-                padding: theme.spacing(1),
-            };
-        },
-        inputRoot: function (_a) {
-            var theme = _a.theme, size = _a.ownerState.size;
-            return {
-                paddingTop: "".concat(theme.spacing(1), " !important"),
-                paddingBottom: "".concat(theme.spacing(1), " !important"),
-                paddingLeft: "".concat(theme.spacing(1), " !important"),
+                paddingTop: `${theme.spacing(1)} !important`,
+                paddingBottom: `${theme.spacing(1)} !important`,
+                paddingLeft: `${theme.spacing(1)} !important`,
                 minHeight: size === AutocompleteSizes.small ? '32px' : '40px',
             };
         },
-        input: function (_a) {
-            var theme = _a.theme;
+        input({ theme }) {
             return {
                 padding: '0 !important',
-                paddingLeft: "".concat(theme.spacing(1), " !important"),
+                paddingLeft: `${theme.spacing(1)} !important`,
             };
         },
-        popupIndicator: function (_a) {
-            var theme = _a.theme;
+        popupIndicator({ theme }) {
             return {
                 borderRadius: theme.shape.small,
                 width: 20,
                 height: 20,
             };
         },
-        endAdornment: function () {
+        endAdornment() {
             return {
                 top: 'calc(50% - 11px)',
             };
         },
-        paper: function (_a) {
-            var theme = _a.theme;
+        paper({ theme }) {
             return {
                 marginTop: theme.spacing(2),
             };
         },
-        noOptions: function (_a) {
-            var theme = _a.theme;
+        noOptions({ theme }) {
             return {
                 color: theme.palette.grey['500'],
             };
         },
-        clearIndicator: function (_a) {
-            var theme = _a.theme;
+        clearIndicator({ theme }) {
             return {
                 padding: 0,
                 borderRadius: '50%',