@astral/ui 1.56.0 → 2.1.4

package/esm/Notification/types.d.ts

@@ -1,27 +0,0 @@
-import { ReactNode } from 'react';
-import { ToastOptions } from 'react-toastify/dist/types';
-export type Variant = 'success' | 'warning' | 'info' | 'error';
-export type ActionsDirection = 'right' | 'left';
-export interface NotificationProps extends Omit<ToastOptions, 'className' | 'style' | 'isLoading' | 'bodyClassName' | 'bodyStyle' | 'onOpen' | 'onClose' | 'type' | 'toastId' | 'updateId' | 'data' | 'progressClassName' | 'closeButton' | 'transition' | 'draggableDirection' | 'role' | 'containerId' | 'rtl' | 'icon' | 'theme'> {
-    /**
-     * @example notify.success('title')
-     * */
-    title: string;
-    /**
-     * @default true
-     * @example notify.success('title', { filled: false })
-     * */
-    filled?: boolean;
-    /**
-     * @example notify.success('title', { content: <div>Hello notify</div> })
-     * */
-    content?: ReactNode;
-    /**
-     * @example notify.success('title', { actions: <div>Hello notify action</div> })
-     * */
-    actions?: JSX.Element;
-    /**
-     * @example notify.success('title', { actionsDirection: 'left' })
-     * */
-    actionsDirection?: ActionsDirection;
-}

package/esm/Notification/types.js

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

package/esm/Notification/utils/getNotificationIconByVariant/getNotificationIconByVariant.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { Variant } from '../../types';
-export declare const getNotificationIconByVariant: (variant: Variant, filled?: boolean) => JSX.Element;

package/esm/Notification/utils/getNotificationIconByVariant/getNotificationIconByVariant.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { DEFAULT_NOTIFICATION_PROPS } from '../../constants';
-import { ErrorNotificationIcon, InfoNotificationIcon, SuccessNotificationIcon, WarningNotificationIcon, } from '../../styled';
-export const getNotificationIconByVariant = (variant, filled = DEFAULT_NOTIFICATION_PROPS.filled) => {
-    const mapOfNotificationIcons = {
-        info: _jsx(InfoNotificationIcon, { filled: filled }),
-        success: _jsx(SuccessNotificationIcon, { filled: filled }),
-        warning: _jsx(WarningNotificationIcon, { filled: filled }),
-        error: _jsx(ErrorNotificationIcon, { filled: filled }),
-    };
-    return mapOfNotificationIcons[variant];
-};

package/esm/Notification/utils/getNotificationIconByVariant/index.d.ts

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

package/esm/Notification/utils/getNotificationIconByVariant/index.js

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

package/esm/Notification/utils/index.d.ts

@@ -1,2 +0,0 @@
-export * from './getNotificationIconByVariant';
-export * from './notificationTemplatePropsCreator';

package/esm/Notification/utils/index.js

@@ -1,2 +0,0 @@
-export * from './getNotificationIconByVariant';
-export * from './notificationTemplatePropsCreator';

package/esm/Notification/utils/notificationTemplatePropsCreator/index.d.ts

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

package/esm/Notification/utils/notificationTemplatePropsCreator/index.js

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

package/esm/Notification/utils/notificationTemplatePropsCreator/notificationTemplatePropsCreator.d.ts

@@ -1,4 +0,0 @@
-import { ToastProps } from 'react-toastify/dist/types';
-import { NotificationTemplateProps } from '../../NotificationTemplate';
-import { NotificationProps, Variant } from '../../types';
-export declare const notificationTemplatePropsCreator: (options: NotificationProps, notifyProps: ToastProps, variant: Variant) => NotificationTemplateProps;

package/esm/Notification/utils/notificationTemplatePropsCreator/notificationTemplatePropsCreator.js

@@ -1,3 +0,0 @@
-export const notificationTemplatePropsCreator = (options, notifyProps, variant) => {
-    return Object.assign(Object.assign(Object.assign({}, notifyProps), options), { variant });
-};

package/esm/OverflowTypography/OverflowTypography.d.ts

@@ -1,24 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { TypographyProps } from '../Typography';
-import { TooltipProps as BasicTooltipProps } from '../Tooltip';
-type TooltipProps = Omit<BasicTooltipProps, 'ref'>;
-export type OverflowedProps = {
-    /**
-     * @example <OverflowTypography rowsCount={2} />
-     * @default 1
-     * @description опорная единица по которой определяется максимиально отображаемое колличество строк
-     */
-    rowsCount?: number;
-};
-type TooltipCustomizable = {
-    /**
-     * @example <OverflowTypography tooltipProps={{placement: 'top-start'}} />
-     * @description способ кастомизировать тултип при необходимости
-     */
-    tooltipProps?: Omit<TooltipProps, 'children'>;
-};
-export type OverflowedElementProps = OverflowedProps & TooltipCustomizable & TypographyProps;
-export type OverflowedTypographyProps = PropsWithChildren<OverflowedElementProps>;
-export declare const DEFAULT_ROWS_COUNT = 1;
-export declare const OverflowTypography: import("react").ForwardRefExoticComponent<Pick<OverflowedTypographyProps, string | number | symbol> & import("react").RefAttributes<HTMLElement>>;
-export {};

package/esm/OverflowTypography/OverflowTypography.js

@@ -1,28 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { Tooltip } from '../Tooltip';
-import { OverflowTypographyWrapper } from './styles';
-import { useOverflowed } from './hooks/useOverflowed';
-export const DEFAULT_ROWS_COUNT = 1;
-export const OverflowTypography = forwardRef((_a, forwardedRef) => {
-    var { tooltipProps, children, rowsCount = DEFAULT_ROWS_COUNT } = _a, props = __rest(_a, ["tooltipProps", "children", "rowsCount"]);
-    const { ref, isOverflowed } = useOverflowed(forwardedRef);
-    const typographyProps = Object.assign(Object.assign({}, props), { ref,
-        children,
-        rowsCount, hasMultipleRows: rowsCount > DEFAULT_ROWS_COUNT });
-    if (children && isOverflowed) {
-        return (_jsx(Tooltip, Object.assign({ title: children, disableInteractive: true }, tooltipProps, { children: _jsx(OverflowTypographyWrapper, Object.assign({}, typographyProps)) })));
-    }
-    return _jsx(OverflowTypographyWrapper, Object.assign({}, typographyProps));
-});

package/esm/OverflowTypography/hooks/useOverflowed/index.d.ts

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

package/esm/OverflowTypography/hooks/useOverflowed/index.js

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

package/esm/OverflowTypography/hooks/useOverflowed/useOverflowed.d.ts

@@ -1,5 +0,0 @@
-import { Ref } from 'react';
-export declare const useOverflowed: (forwardedRef?: Ref<HTMLElement>) => {
-    isOverflowed: boolean;
-    ref: import("react").RefObject<HTMLElement>;
-};

package/esm/OverflowTypography/hooks/useOverflowed/useOverflowed.js

@@ -1,30 +0,0 @@
-import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { debounce } from 'lodash-es';
-export const useOverflowed = (forwardedRef) => {
-    const localRef = useRef(null);
-    const ref = forwardedRef && typeof forwardedRef !== 'function'
-        ? forwardedRef
-        : localRef;
-    const [isOverflowed, setOverflow] = useState(false);
-    const handleResize = useCallback(debounce(([{ target, contentRect }]) => {
-        /**
-         * @description сверка высоты дом ноды и высоты скролл контейнера, если скролл больше, то значит компонент переполнен контентом
-         */
-        const isScrollHeightBigger = contentRect.height < target.scrollHeight;
-        /**
-         * @description сверка ширины дом ноды и ширины скролл контейнера, если скролл больше, то значит компонент переполнен контентом
-         */
-        const isScrollWidthBigger = target.scrollWidth > contentRect.width;
-        setOverflow(isScrollHeightBigger || isScrollWidthBigger);
-    }, 500), []);
-    const resizeObserver = useMemo(() => new ResizeObserver(handleResize), []);
-    useLayoutEffect(() => {
-        if (ref === null || ref === void 0 ? void 0 : ref.current) {
-            const node = ref.current;
-            resizeObserver.observe(node);
-            return () => resizeObserver.unobserve(node);
-        }
-        return;
-    }, [ref.current]);
-    return { isOverflowed, ref };
-};

package/esm/OverflowTypography/index.d.ts

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

package/esm/OverflowTypography/index.js

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

package/esm/OverflowTypography/styles.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { OverflowedProps } from './OverflowTypography';
-export declare const OverflowTypographyWrapper: import("@emotion/styled").StyledComponent<Pick<import("react").PropsWithChildren<import("../Typography").TypographyProps>, string | number | symbol> & import("react").RefAttributes<HTMLElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    hasMultipleRows: boolean;
-} & Required<OverflowedProps>, {}, {}>;

package/esm/OverflowTypography/styles.js

@@ -1,17 +0,0 @@
-import { styled } from '../styles';
-import { Typography } from '../Typography';
-// проверки на rowsCount в стилях нужны для того, чтобы элементы в одну строку обрезались бы по буквенно
-// но если нужно обрезание по нескольким строчкам, тогда элементы будут обрезаться по словам
-export const OverflowTypographyWrapper = styled(Typography, {
-    shouldForwardProp: (name) => name !== 'rowsCount' && name !== 'hasMultipleRows',
-}) `
-  /* stylelint-disable-next-line */
-  display: ${({ hasMultipleRows }) => (hasMultipleRows ? '-webkit-box' : '')};
-  max-width: 100%;
-  overflow: hidden;
-
-  white-space: ${({ hasMultipleRows }) => hasMultipleRows ? 'initial' : 'nowrap'};
-  text-overflow: ellipsis;
-  -webkit-line-clamp: ${({ rowsCount }) => rowsCount};
-  -webkit-box-orient: ${({ hasMultipleRows }) => hasMultipleRows ? 'vertical' : ''};
-`;

package/esm/PageAside/PageAside.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from 'react';
-export type PageAsideProps = {
-    children: ReactNode;
-};
-export declare const PageAside: ({ children }: PageAsideProps) => JSX.Element;

package/esm/PageAside/PageAside.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { PageAsideWrapper } from './styles';
-export const PageAside = ({ children }) => {
-    return _jsx(PageAsideWrapper, { children: children });
-};

package/esm/PageAside/index.d.ts

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

package/esm/PageAside/index.js

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

package/esm/PageAside/styles.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const PageAsideWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/esm/PageAside/styles.js

@@ -1,10 +0,0 @@
-import { styled } from '../styles';
-export const PageAsideWrapper = styled.aside `
-  grid-area: aside;
-  width: 320px;
-  padding: ${({ theme }) => theme.spacing(6)};
-  overflow: auto;
-
-  border-top: 1px solid ${({ theme }) => theme.palette.grey[300]};
-  border-left: 1px solid ${({ theme }) => theme.palette.grey[300]};
-`;

package/esm/PageContent/PageContent.d.ts

@@ -1,17 +0,0 @@
-import { ReactNode } from 'react';
-export type PageContentProps = {
-    children: ReactNode;
-    /**
-     * @example <PageContent isSeparatorShown />
-     * @default false
-     * Флаг, отображающий границу шапки
-     */
-    isSeparatorShown?: boolean;
-    /**
-     * @example <PageContent isPaddingDisabled>Контент</PageContent>
-     * @default true
-     * Флаг, добавляющий стандартные отсупы (требуются не всегда)
-     */
-    isPaddingDisabled?: boolean;
-};
-export declare const PageContent: (props: PageContentProps) => JSX.Element;

package/esm/PageContent/PageContent.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { PageContentWrapper } from './styles';
-export const PageContent = (props) => {
-    const { children, isPaddingDisabled = true, isSeparatorShown = false, } = props;
-    return (_jsx(PageContentWrapper, Object.assign({ isPaddingDisabled: isPaddingDisabled, isSeparatorShown: isSeparatorShown }, { children: children })));
-};

package/esm/PageContent/index.d.ts

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

package/esm/PageContent/index.js

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

package/esm/PageContent/styles.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-type PageContentWrapperProps = {
-    isPaddingDisabled?: boolean;
-    isSeparatorShown?: boolean;
-};
-export declare const PageContentWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & PageContentWrapperProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export {};

package/esm/PageContent/styles.js

@@ -1,8 +0,0 @@
-import { styled } from '../styles';
-export const PageContentWrapper = styled.article `
-  grid-area: content;
-  padding: ${({ isPaddingDisabled, theme }) => isPaddingDisabled ? 0 : theme.spacing(0, 6)};
-  overflow: auto;
-
-  border-top: ${({ isSeparatorShown, theme }) => isSeparatorShown ? `1px solid ${theme.palette.grey[300]}` : 'none'};
-`;

package/esm/PageHeader/ButtonGroup/ButtonGroup.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { ButtonProps } from '../../Button';
-import { ListItemButtonProps } from '../../ListItemButton';
-export type ButtonGroupProps = {
-    main?: (Omit<ButtonProps, 'children'> & {
-        text: string;
-    })[];
-    secondary?: (Omit<ListItemButtonProps, 'children'> & {
-        text: string;
-    })[];
-};
-export declare const ButtonGroup: (props: ButtonGroupProps) => JSX.Element;

package/esm/PageHeader/ButtonGroup/ButtonGroup.js

@@ -1,29 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { DotsOutlineMd } from '@astral/icons';
-import { Button } from '../../Button';
-import { ListItemButton } from '../../ListItemButton';
-import { ListItemText } from '../../ListItemText';
-import { IconDropdownButton } from '../../IconDropdownButton';
-import { ButtonGroupWrapper } from './styles';
-export const ButtonGroup = (props) => {
-    const { main, secondary } = props;
-    return (_jsxs(ButtonGroupWrapper, { children: [secondary && (_jsx(IconDropdownButton, Object.assign({ icon: _jsx(DotsOutlineMd, {}), variant: "light" }, { children: secondary.map((_a) => {
-                    var { text } = _a, secondaryProps = __rest(_a, ["text"]);
-                    return (_jsx(ListItemButton, Object.assign({}, secondaryProps, { children: _jsx(ListItemText, { primary: text }) }), text));
-                }) }))), main &&
-                main.map((_a) => {
-                    var { text } = _a, mainProps = __rest(_a, ["text"]);
-                    return (_jsx(Button, Object.assign({}, mainProps, { children: text }), text));
-                })] }));
-};

package/esm/PageHeader/ButtonGroup/index.d.ts

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

package/esm/PageHeader/ButtonGroup/index.js

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

package/esm/PageHeader/ButtonGroup/styles.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const ButtonGroupWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/esm/PageHeader/ButtonGroup/styles.js

@@ -1,6 +0,0 @@
-import { styled } from '../../styles';
-export const ButtonGroupWrapper = styled.div `
-  display: flex;
-  grid-area: actions;
-  gap: ${({ theme }) => theme.spacing(1)};
-`;

package/esm/PageHeader/PageHeader.d.ts

@@ -1,55 +0,0 @@
-import { ReactNode } from 'react';
-import { BaseButtonProps } from '../ButtonBase';
-import { ButtonGroupProps } from './ButtonGroup';
-export type PageHeaderProps = {
-    /**
-     * @example <PageHeader title="Заголовок страницы" />
-     * Заголовок страницы
-     */
-    title: ReactNode;
-    /**
-     * @example <PageHeader description="Описание страницы" />
-     * Описание страницы
-     */
-    description?: ReactNode;
-    /**
-     * @example <PageHeader subheader={<TextField placeholder="Поиск на странице..." size="small" />} />
-     * Набор компонент, отображаемый в нижней части блока
-     */
-    subheader?: ReactNode;
-    /**
-     * @example <PageHeader breadcrumbs={
-     *  [
-     *    <Link>Первая ссылка</Link>,
-     *    <Link>Вторая ссылка</Link>,
-     *    <>Текст</>,
-     *  ]
-     * } />
-     * Хлебные крошки
-     */
-    breadcrumbs?: ReactNode[];
-    /**
-     * @example <PageHeader actions={{
-     *  main: [
-     *    {
-     *      text: 'Основное действие',
-     *    },
-     *  ],
-     *  secondary: [
-     *    {
-     *      text: 'Вспомогательное действие',
-     *    },
-     *  ]
-     * }} />
-     * Набор кнопок, видимые кофигурируются через объект main, скрытые в меню - через secondary
-     */
-    actions?: ButtonGroupProps;
-    /**
-     * @example <PageHeader backButton={{
-     *  onClick: () => {},
-     * }} />
-     * Кнопка назад
-     */
-    backButton?: Omit<BaseButtonProps, 'children' | 'variant'>;
-};
-export declare const PageHeader: (props: PageHeaderProps) => JSX.Element;

package/esm/PageHeader/PageHeader.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowLOutlineMd } from '@astral/icons';
-import { ButtonGroup } from './ButtonGroup';
-import { PageHeaderBackButton, PageHeaderBreadcrumbs, PageHeaderDescription, PageHeaderTitle, PageHeaderWrapper, PageSubheader, } from './styles';
-export const PageHeader = (props) => {
-    const { title, description, subheader, breadcrumbs, actions, backButton } = props;
-    return (_jsxs(PageHeaderWrapper, { children: [breadcrumbs && (_jsx(PageHeaderBreadcrumbs, { children: breadcrumbs })), backButton && (_jsx(PageHeaderBackButton, Object.assign({}, backButton, { variant: "light" }, { children: _jsx(ArrowLOutlineMd, {}) }))), _jsx(PageHeaderTitle, Object.assign({ variant: "h3" }, { children: title })), description && (_jsx(PageHeaderDescription, { children: description })), actions && _jsx(ButtonGroup, Object.assign({}, actions)), subheader && _jsx(PageSubheader, { children: subheader })] }));
-};

package/esm/PageHeader/PageHeaderDashboardStory.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const PageHeaderDashboardStory: () => JSX.Element;