@astral/ui 4.13.0 → 4.14.0

package/components/CardGridInfinite/Card/Card.d.ts

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

package/components/CardGridInfinite/Card/Card.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Paper } from '../../Paper';
+import { Tooltip } from '../../Tooltip';
+import { CardActionContextProvider } from './CardActionContext';
+import { SecondaryActionButton } from './SecondaryActionButton';
+import { CardHeader, HeaderWrapper, StyledDivider, Wrapper } from './styles';
+import { useLogic } from './useLogic';
+export const Card = (props) => {
+    const { handleActionClick } = useLogic(props);
+    const { isDisabled, mainActions: MainActions, content, header, disabledReason, secondaryActions, } = props;
+    return (_jsx(CardActionContextProvider, { onActionClick: handleActionClick, isDisabledCard: isDisabled, children: _jsx(Tooltip, { title: isDisabled && disabledReason, withoutContainer: !isDisabled, placement: "top", componentsProps: { popper: { disablePortal: true } }, children: _jsx(Paper, { variant: "outlined", inert: isDisabled ? '' : undefined, children: _jsxs(Wrapper, { children: [header && (_jsxs(_Fragment, { children: [_jsxs(CardHeader, { children: [_jsx(HeaderWrapper, { children: header }), secondaryActions && (_jsx(SecondaryActionButton, { renderActions: secondaryActions }))] }), _jsx(StyledDivider, {})] })), content, MainActions && _jsx(MainActions, {})] }) }) }) }));
+};

package/components/CardGridInfinite/Card/CardActionContext/CardActionContext.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { CardGridActionHandler } from '../../CardGridMainActions/types';
+export type CardActionContextProps<TAction> = {
+    isDisabledCard?: boolean;
+    isDisabled: boolean;
+    onActionClick: CardGridActionHandler<TAction>;
+    setDisabledActions: () => void;
+    removeDisabledActions: () => void;
+};
+export declare const CardActionContext: import("react").Context<CardActionContextProps<unknown>>;

package/components/CardGridInfinite/Card/CardActionContext/CardActionContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export const CardActionContext = createContext({
+    isDisabledCard: false,
+    isDisabled: false,
+    onActionClick: () => undefined,
+    setDisabledActions: () => undefined,
+    removeDisabledActions: () => undefined,
+});

package/components/CardGridInfinite/Card/CardActionContext/CardActionContextProvider/CardActionContextProvider.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { CardGridActionHandler } from '../../../CardGridMainActions';
+type CardActionContextProviderProps<TAction> = {
+    children: ReactNode;
+    onActionClick: CardGridActionHandler<TAction>;
+    isDisabledCard?: boolean;
+};
+export declare const CardActionContextProvider: <TAction>({ children, isDisabledCard, onActionClick, }: CardActionContextProviderProps<TAction>) => JSX.Element;
+export {};

package/components/CardGridInfinite/Card/CardActionContext/CardActionContextProvider/CardActionContextProvider.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { CardActionContext } from '../CardActionContext';
+export const CardActionContextProvider = ({ children, isDisabledCard, onActionClick, }) => {
+    const [isDisabled, setDisabled] = useState(false);
+    const setDisabledActions = useCallback(() => {
+        setDisabled(true);
+    }, []);
+    const removeDisabledActions = useCallback(() => {
+        setDisabled(false);
+    }, []);
+    const contextValue = useMemo(() => ({
+        isDisabled,
+        isDisabledCard,
+        setDisabledActions,
+        removeDisabledActions,
+        onActionClick,
+    }), [
+        isDisabled,
+        setDisabledActions,
+        removeDisabledActions,
+        onActionClick,
+        isDisabledCard,
+    ]);
+    return (_jsx(CardActionContext.Provider, { value: contextValue, children: children }));
+};

package/components/CardGridInfinite/Card/CardActionContext/CardActionContextProvider/index.d.ts

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

package/components/CardGridInfinite/Card/CardActionContext/CardActionContextProvider/index.js

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

package/components/CardGridInfinite/Card/CardActionContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CardActionContext';
+export * from './CardActionContextProvider';

package/components/CardGridInfinite/Card/CardActionContext/index.js

@@ -0,0 +1,2 @@
+export * from './CardActionContext';
+export * from './CardActionContextProvider';

package/components/CardGridInfinite/Card/SecondaryActionButton/SecondaryActionButton.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import { type CardGridSecondaryActionsProps } from '../../CardGridSecondaryAction';
+type SecondaryActionButtonProps<TAction> = {
+    renderActions: (props: Omit<CardGridSecondaryActionsProps<TAction>, 'mobileTitle'>) => ReactNode;
+};
+export declare const SecondaryActionButton: <TAction>({ renderActions, }: SecondaryActionButtonProps<TAction>) => JSX.Element;
+export {};

package/components/CardGridInfinite/Card/SecondaryActionButton/SecondaryActionButton.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ClickAwayListener } from '@mui/material';
+import { useContext, useRef, useState } from 'react';
+import { DotsVOutlineMd } from '../../../../icons';
+import { useMenu } from '../../../hooks';
+import { SecondaryActionsMenuProvider, } from '../../CardGridSecondaryAction';
+import { CardActionContext } from '../CardActionContext';
+import { StyledIconButton } from './styles';
+export const SecondaryActionButton = ({ renderActions, }) => {
+    const buttonRef = useRef(null);
+    const { open, anchorRef, handleOpenMenu, handleCloseMenu } = useMenu(buttonRef);
+    const { isDisabled, isDisabledCard } = useContext(CardActionContext);
+    // Если контент единожды отрендерился, то будем рендерить его дальше,
+    // чтобы были актуальные статусы loading для блокировки действий
+    const [isOnceOpen, setIsOnceOpen] = useState(false);
+    const handleOpen = () => {
+        setIsOnceOpen(true);
+        handleOpenMenu();
+    };
+    return (_jsxs(SecondaryActionsMenuProvider, { value: { open, anchorEl: anchorRef.current }, children: [_jsx(ClickAwayListener, { onClickAway: handleCloseMenu, mouseEvent: "onMouseUp", children: _jsx(StyledIconButton, { ref: anchorRef, onClick: handleOpen, selected: open, variant: "outlined", color: "grey", disabled: isDisabled || isDisabledCard, children: _jsx(DotsVOutlineMd, {}) }) }), isOnceOpen && renderActions({ isLoading: false })] }));
+};

package/components/CardGridInfinite/Card/SecondaryActionButton/index.d.ts

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

package/components/CardGridInfinite/Card/SecondaryActionButton/index.js

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

package/components/CardGridInfinite/Card/SecondaryActionButton/styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const StyledIconButton: import("@emotion/styled").StyledComponent<Omit<import("../../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "link" | "light" | "outlined" | "contained" | "text" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/CardGridInfinite/Card/SecondaryActionButton/styles.js

@@ -0,0 +1,5 @@
+import { IconButton } from '../../../IconButton';
+import { styled } from '../../../styles';
+export const StyledIconButton = styled(IconButton) `
+    align-self: flex-start;
+`;

package/components/CardGridInfinite/Card/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Card';
+export * from './CardActionContext';
+export type { CardProps } from './types';

package/components/CardGridInfinite/Card/index.js

@@ -0,0 +1,2 @@
+export * from './Card';
+export * from './CardActionContext';

package/components/CardGridInfinite/Card/styles.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledDivider: import("@emotion/styled").StyledComponent<import("../../Divider").DividerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const CardHeader: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const HeaderWrapper: 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/components/CardGridInfinite/Card/styles.js

@@ -0,0 +1,22 @@
+import { Divider } from '../../Divider';
+import { styled } from '../../styles';
+export const Wrapper = styled.div `
+    padding: ${({ theme }) => theme.spacing(4, 5)};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+        padding: ${({ theme }) => theme.spacing(5, 4)};
+    }
+`;
+export const StyledDivider = styled(Divider) `
+    margin: ${({ theme }) => theme.spacing(4, 0)}
+`;
+export const CardHeader = styled.div `
+    display: flex;
+    gap: ${({ theme }) => theme.spacing(1)};
+    align-items: center;
+    justify-content: space-between;
+`;
+export const HeaderWrapper = styled.div `
+    overflow: hidden;
+    flex: 1;
+`;

package/components/CardGridInfinite/Card/types.d.ts

@@ -0,0 +1,32 @@
+import { type FunctionComponent, type ReactNode } from 'react';
+export type CardProps<TItem> = {
+    /**
+     * Header элемента
+     */
+    header?: ReactNode;
+    /**
+     * Основные действия элемента отображающиеся в footer
+     * Может быть как функцией без параметров, так и React компонентом
+     */
+    mainActions?: FunctionComponent;
+    /**
+     * Дополнительные действия элемента отображающиеся в header в виде кнопки с троеточием
+     */
+    secondaryActions?: () => ReactNode;
+    /**
+     * Основной контент отображающийся в центральной части элемента
+     */
+    content: ReactNode;
+    /**
+     * Если `true`, элемент будет заблокирован для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Причина блокировки элемента
+     */
+    disabledReason?: string;
+    /**
+     * Данные элемента
+     */
+    item: TItem;
+};

package/components/CardGridInfinite/Card/types.js

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

package/components/CardGridInfinite/Card/useLogic/index.d.ts

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

package/components/CardGridInfinite/Card/useLogic/index.js

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

package/components/CardGridInfinite/Card/useLogic/useLogic.d.ts

@@ -0,0 +1,7 @@
+import type { CardGridActionHandler } from '../../CardGridMainActions';
+import type { CardProps } from '../types';
+type UseLogicParams<TItem> = CardProps<TItem>;
+export declare const useLogic: <TItem>({ item }: UseLogicParams<TItem>) => {
+    handleActionClick: CardGridActionHandler<TItem>;
+};
+export {};

package/components/CardGridInfinite/Card/useLogic/useLogic.js

@@ -0,0 +1,7 @@
+import { useCallback } from 'react';
+export const useLogic = ({ item }) => {
+    const handleActionClick = useCallback((onClick) => () => {
+        onClick?.(item);
+    }, [item]);
+    return { handleActionClick };
+};

package/components/CardGridInfinite/CardGridInfinite.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { CardGridInfiniteProps } from './types';
+export declare const CardGridInfinite: <TDataItem extends Record<string, unknown>>(props: CardGridInfiniteProps<TDataItem>) => JSX.Element;

package/components/CardGridInfinite/CardGridInfinite.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { VirtuosoGrid, } from 'react-virtuoso';
+import { ContentState } from '../ContentState';
+import { Card } from './Card';
+import { cardGridClassnames } from './constants';
+import { Footer } from './Footer';
+import { List } from './List';
+import { NoDataPlaceholder } from './NoDataPlaceholder';
+import { OnTopButton } from './OnTopButton';
+import { SkeletonGrid } from './SkeletonGrid';
+import { ContentStateWrapper } from './styles';
+import { useLogic } from './useLogic';
+export const CardGridInfinite = (props) => {
+    const { contentStateProps, desktopCardWidth, virtuosoProps, scrollParent, skeleton, footerProps, onTopButtonProps, list, noDataImgSrc, defineCard, classnames, } = useLogic(props);
+    const VirtuosoList = useMemo(() => forwardRef((listProps, ref) => (_jsx(List, { ...listProps, ref: ref, desktopCardWidth: desktopCardWidth }))), [desktopCardWidth]);
+    return (_jsx(ContentStateWrapper, { className: classnames, children: _jsx(ContentState, { ...contentStateProps, loadingContent: _jsx(SkeletonGrid, { skeleton: skeleton, desktopCardWidth: desktopCardWidth }), children: list?.length && scrollParent ? (_jsxs(_Fragment, { children: [_jsx(VirtuosoGrid, { ...virtuosoProps, data: list, customScrollParent: scrollParent, listClassName: cardGridClassnames.list, components: {
+                            List: VirtuosoList,
+                            Footer: () => _jsx(Footer, { ...footerProps }),
+                        }, itemContent: (_, item) => (_jsx(Card, { item: item, ...defineCard(item) })) }), _jsx(OnTopButton, { ...onTopButtonProps })] })) : (_jsx(NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) }) }));
+};

package/components/CardGridInfinite/CardGridMainActions/Action/Action.d.ts

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

package/components/CardGridInfinite/CardGridMainActions/Action/Action.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../Button';
+import { ConfirmAction, } from '../../../ConfirmAction';
+import { Tooltip } from '../../../Tooltip';
+import { useLogic } from './useLogic';
+export const Action = (props) => {
+    const { tooltipProps } = useLogic(props);
+    const { action, onActionClick, isDisabled } = props;
+    const { name, needConfirm, confirmText, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, note, onClick, component, variant, color, ...restProps } = action;
+    const renderButton = (renderProps) => {
+        return (_jsx(Tooltip, { withoutContainer: !disabled, placement: "bottom", ...tooltipProps, children: _jsx(Button, { disabled: isDisabled || disabled, loading: loading, component: component, variant: variant, color: color, ...restProps, ...renderProps, children: name }) }, name));
+    };
+    return (_jsx(_Fragment, { children: needConfirm ? (_jsx(ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
+            onClick: onActionClick(onClick),
+        })) }));
+};

package/components/CardGridInfinite/CardGridMainActions/Action/index.d.ts

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

package/components/CardGridInfinite/CardGridMainActions/Action/index.js

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

package/components/CardGridInfinite/CardGridMainActions/Action/types.d.ts

@@ -0,0 +1,13 @@
+import type { ElementType } from 'react';
+import type { CardGridActionHandler, CardGridMainActionComponent } from '../types';
+export type ActionProps<TAction> = {
+    action: CardGridMainActionComponent<TAction, ElementType>;
+    /**
+     *  Обработчик клика на действие
+     */
+    onActionClick: CardGridActionHandler<TAction>;
+    /**
+     *  Если true, action не доступен
+     */
+    isDisabled?: boolean;
+};

package/components/CardGridInfinite/CardGridMainActions/Action/types.js

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

package/components/CardGridInfinite/CardGridMainActions/Action/useLogic/index.d.ts

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

package/components/CardGridInfinite/CardGridMainActions/Action/useLogic/index.js

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

package/components/CardGridInfinite/CardGridMainActions/Action/useLogic/useLogic.d.ts

@@ -0,0 +1,11 @@
+import type { ActionProps } from '../types';
+type UseLogicParam<TAction> = ActionProps<TAction>;
+export declare const useLogic: <TAction>({ action }: UseLogicParam<TAction>) => {
+    tooltipProps: {
+        title: string | undefined;
+        open: boolean;
+        onOpen: () => void;
+        onClose: () => void;
+    };
+};
+export {};

package/components/CardGridInfinite/CardGridMainActions/Action/useLogic/useLogic.js

@@ -0,0 +1,16 @@
+import { useState } from 'react';
+export const useLogic = ({ action }) => {
+    const { loading, disabledReason, note } = action;
+    const [isVisibleTooltip, setVisibleTooltip] = useState(false);
+    const handleOpenTooltip = () => setVisibleTooltip(true);
+    const handleCloseTooltip = () => setVisibleTooltip(false);
+    const title = note || disabledReason;
+    return {
+        tooltipProps: {
+            title,
+            open: isVisibleTooltip && !loading,
+            onOpen: handleOpenTooltip,
+            onClose: handleCloseTooltip,
+        },
+    };
+};

package/components/CardGridInfinite/CardGridMainActions/CardGridMainActions.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import type { CardGridMainAction } from './types';
+export type CardGridMainActionsProps<TAction> = {
+    /**
+     * Действия отображаются слева направо в порядке, указанном в массиве
+     * Каждый элемент может иметь свой component (например, 'button', 'a', и т.д.)
+     * с соответствующими пропсами для этого компонента
+     */
+    actions?: CardGridMainAction<TAction>[];
+};
+/**
+ * Компонент для отображения основных действий в карточке CardGrid.
+ *
+ * Основные действия отображаются в виде отдельных кнопок в футере карточки
+ * и предназначены для наиболее часто используемых операций над ней
+ *
+ * @remarks
+ * - Компонент автоматически обрабатывает блокирующие операции, что предотвращает одновременное выполнение нескольких действий
+ *
+ * @example
+ * ```tsx
+ * <CardGridMainActions
+ *   actions={[
+ *     { name: 'Редактировать', onClick: handleEdit },
+ *     { name: 'Удалить', onClick: handleDelete, isBlockingOperation: true }
+ *   ]}
+ * />
+ * ```
+ */
+export declare const CardGridMainActions: <TAction>({ actions, }: CardGridMainActionsProps<TAction>) => JSX.Element;

package/components/CardGridInfinite/CardGridMainActions/CardGridMainActions.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBlockingActions } from '../hooks';
+import { Action } from './Action';
+import { Wrapper } from './styles';
+/**
+ * Компонент для отображения основных действий в карточке CardGrid.
+ *
+ * Основные действия отображаются в виде отдельных кнопок в футере карточки
+ * и предназначены для наиболее часто используемых операций над ней
+ *
+ * @remarks
+ * - Компонент автоматически обрабатывает блокирующие операции, что предотвращает одновременное выполнение нескольких действий
+ *
+ * @example
+ * ```tsx
+ * <CardGridMainActions
+ *   actions={[
+ *     { name: 'Редактировать', onClick: handleEdit },
+ *     { name: 'Удалить', onClick: handleDelete, isBlockingOperation: true }
+ *   ]}
+ * />
+ * ```
+ */
+export const CardGridMainActions = ({ actions, }) => {
+    const { isDisabled, onActionClick } = useBlockingActions(actions);
+    return (_jsx(Wrapper, { children: actions?.map((action) => {
+            return (_jsx(Action, { action: action, onActionClick: onActionClick, isDisabled: isDisabled }, action.name));
+        }) }));
+};

package/components/CardGridInfinite/CardGridMainActions/index.d.ts

@@ -0,0 +1,4 @@
+export * from './CardGridMainActions';
+export * from './types';
+export * from './Action';
+export { replaceActionComponent } from './utils';

package/components/CardGridInfinite/CardGridMainActions/index.js

@@ -0,0 +1,4 @@
+export * from './CardGridMainActions';
+export * from './types';
+export * from './Action';
+export { replaceActionComponent } from './utils';

package/components/CardGridInfinite/CardGridMainActions/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Wrapper: 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/components/CardGridInfinite/CardGridMainActions/styles.js

@@ -0,0 +1,9 @@
+import { styled } from '../../styles';
+export const Wrapper = styled.div `
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    padding-top: ${({ theme }) => theme.spacing(6)};
+`;

package/components/CardGridInfinite/CardGridMainActions/types.d.ts

@@ -0,0 +1,44 @@
+import type { ElementType, MouseEventHandler } from 'react';
+import type { ButtonProps } from '../../Button';
+import type { ConfirmActionProps } from '../../ConfirmAction';
+export type CardGridMainActionBase<TItem> = {
+    /**
+     * Название действия (также используется как текст внутри кнопки)
+     */
+    name: string;
+    /**
+     * Если `true`, при клике на кнопку будет вызываться подтверждение действия
+     */
+    needConfirm?: boolean;
+    /**
+     * Поясняющий текст для подтверждения действия
+     */
+    confirmText?: ConfirmActionProps['text'];
+    /**
+     * Параметры кнопки подтверждения действия
+     */
+    confirmButtonProps?: ConfirmActionProps['confirmButtonProps'];
+    /**
+     * Если true, блокирует взаимодействие с actions
+     */
+    isBlockingOperation?: boolean;
+    /**
+     * Причина блокировки действия
+     */
+    disabledReason?: string;
+    /**
+     * Текст тултипа при наведении на кнопку
+     */
+    note?: string;
+    /**
+     * Причина блокировки строки во время загрузки
+     */
+    loadingNote?: string;
+    /**
+     * Обработчик действия
+     */
+    onClick?: (data: TItem) => void;
+};
+export type CardGridMainActionComponent<TItem, TComponent extends ElementType = ElementType> = CardGridMainActionBase<TItem> & Omit<ButtonProps<TComponent>, 'children' | 'onClick'>;
+export type CardGridActionHandler<TItem> = (onClick: CardGridMainActionComponent<TItem>['onClick']) => MouseEventHandler<HTMLElement> | undefined;
+export type CardGridMainAction<TItem> = CardGridMainActionComponent<TItem, ElementType>;

package/components/CardGridInfinite/CardGridMainActions/types.js

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

package/components/CardGridInfinite/CardGridMainActions/utils/index.d.ts

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

package/components/CardGridInfinite/CardGridMainActions/utils/index.js

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

package/components/CardGridInfinite/CardGridMainActions/utils/replaceActionComponent/index.d.ts

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

package/components/CardGridInfinite/CardGridMainActions/utils/replaceActionComponent/index.js

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

package/components/CardGridInfinite/CardGridMainActions/utils/replaceActionComponent/replaceActionComponent.d.ts

@@ -0,0 +1,8 @@
+import { type ElementType } from 'react';
+import type { CardGridMainActionComponent } from '../../types';
+/**
+ * Заменяет дефолтный параметр component на кастомный
+ * @param component - Кастомный компонент для замены Button
+ * @param props - Параметры компонента
+ */
+export declare const replaceActionComponent: <TItem, TComponent extends ElementType>(component: TComponent, props: Omit<CardGridMainActionComponent<TItem, TComponent>, "component">) => CardGridMainActionComponent<TItem, ElementType>;

package/components/CardGridInfinite/CardGridMainActions/utils/replaceActionComponent/replaceActionComponent.js

@@ -0,0 +1,11 @@
+/**
+ * Заменяет дефолтный параметр component на кастомный
+ * @param component - Кастомный компонент для замены Button
+ * @param props - Параметры компонента
+ */
+export const replaceActionComponent = (component, props) => {
+    return {
+        ...props,
+        component,
+    };
+};

package/components/CardGridInfinite/CardGridSecondaryAction/CardGridSecondaryActions.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { CardGridSecondaryActionsProps } from './types';
+/**
+ * Компонент для отображения дополнительных действий в выпадающем меню.
+ *
+ * @example
+ * ```tsx
+ * <CardGridSecondaryActions
+ *   actions={[
+ *     { name: 'Дублировать', onClick: handleDuplicate },
+ *     { name: 'Архивировать', onClick: handleArchive, disabled: !canArchive },
+ *     { name: 'Экспортировать', onClick: handleExport }
+ *   ]}
+ *   isLoading={isActionsLoading}
+ * />
+ * ```
+ */
+export declare const CardGridSecondaryActions: <TAction>({ actions, isLoading, mobileTitle, }: CardGridSecondaryActionsProps<TAction>) => JSX.Element;

package/components/CardGridInfinite/CardGridSecondaryAction/CardGridSecondaryActions.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useContext } from 'react';
+import { Menu } from '../../Menu';
+import { MenuItem } from '../../MenuItem';
+import { useBlockingActions } from '../hooks';
+import { CardGridSecondaryActionsSkeleton } from './CardGridSecondaryActionsSkeleton';
+import { SecondaryActionsMenuContext } from './SecondaryActionsMenuContext';
+/**
+ * Компонент для отображения дополнительных действий в выпадающем меню.
+ *
+ * @example
+ * ```tsx
+ * <CardGridSecondaryActions
+ *   actions={[
+ *     { name: 'Дублировать', onClick: handleDuplicate },
+ *     { name: 'Архивировать', onClick: handleArchive, disabled: !canArchive },
+ *     { name: 'Экспортировать', onClick: handleExport }
+ *   ]}
+ *   isLoading={isActionsLoading}
+ * />
+ * ```
+ */
+export const CardGridSecondaryActions = ({ actions, isLoading, mobileTitle, }) => {
+    const { onActionClick } = useBlockingActions(actions);
+    const { anchorEl, open } = useContext(SecondaryActionsMenuContext);
+    const renderActions = () => {
+        return actions?.map((action) => {
+            const { onClick, name, loading, isBlockingOperation, ...restProps } = action;
+            return (_createElement(MenuItem, { ...restProps, key: name, tooltipPlacement: "left", onClick: onActionClick(onClick) }, name));
+        });
+    };
+    return (_jsx(Menu, { open: open, title: mobileTitle, anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, children: isLoading ? _jsx(CardGridSecondaryActionsSkeleton, {}) : renderActions() }));
+};

package/components/CardGridInfinite/CardGridSecondaryAction/CardGridSecondaryActionsSkeleton/CardGridSecondaryActionsSkeleton.d.ts

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

package/components/CardGridInfinite/CardGridSecondaryAction/CardGridSecondaryActionsSkeleton/CardGridSecondaryActionsSkeleton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton } from '../../../Skeleton';
+import { MenuItemWrapper, SkeletonWrapper } from './styles';
+export const CardGridSecondaryActionsSkeleton = () => (_jsxs(SkeletonWrapper, { children: [_jsx(MenuItemWrapper, { children: _jsx(Skeleton, { variant: "rounded", width: 110 }) }), _jsx(MenuItemWrapper, { children: _jsx(Skeleton, { variant: "rounded", width: 60 }) }), _jsx(MenuItemWrapper, { children: _jsx(Skeleton, { variant: "rounded", width: 90 }) })] }));