@astral/ui 4.13.1 → 4.15.0

package/components/ActionGroup/MainActions/hooks/useMainActions/useMainActions.d.ts

@@ -298,7 +298,7 @@ export declare const useMainActions: <TMainActionComponent extends ElementType>(
         disableGutters?: boolean | undefined;
         disabledReason?: string | undefined;
         note?: string | undefined;
-        tooltipPlacement?: "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | undefined;
+        tooltipPlacement?: "bottom" | "left" | "right" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
         component?: ElementType | undefined;
         href?: string | undefined;
         css?: import("@emotion/serialize").Interpolation<import("@emotion/react").Theme>;

package/components/ActionGroup/hooks/useActionsState/useActionsState.d.ts

@@ -1,5 +1,5 @@
 import { type ElementType } from 'react';
-import type { MainAction, SecondaryAction } from '../../index';
+import type { MainAction, SecondaryAction } from '../../types';
 type UseActionsStateParams<TMainActionComponent extends ElementType, TSecondaryActionComponent extends ElementType> = {
     /**
      * Основные действия

package/components/ActionGroup/index.d.ts

@@ -1,6 +1,6 @@
-export * from './ActionGroup';
+export { ActionGroup } from './ActionGroup';
 export * from './hooks';
 export { MainActions, useMainActions } from './MainActions';
 export { SecondaryActions } from './SecondaryActions';
 export { SecondaryVisibleActions } from './SecondaryVisibleActions';
-export * from './types';
+export type { ActionGroupProps, MainAction, MainActionsProps, SecondaryActionProps, SecondaryVisibleActionProps, } from './types';

package/components/ActionGroup/index.js

@@ -1,6 +1,5 @@
-export * from './ActionGroup';
+export { ActionGroup } from './ActionGroup';
 export * from './hooks';
 export { MainActions, useMainActions } from './MainActions';
 export { SecondaryActions } from './SecondaryActions';
 export { SecondaryVisibleActions } from './SecondaryVisibleActions';
-export * from './types';

package/components/AddressAutocomplete/index.d.ts

@@ -1 +1 @@
-export * from './AddressAutocomplete';
+export { AddressAutocomplete, type AddressAutocompleteProps, type AddressAutocompleteValue, } from './AddressAutocomplete';

package/components/AddressAutocomplete/index.js

@@ -1 +1 @@
-export * from './AddressAutocomplete';
+export { AddressAutocomplete, } from './AddressAutocomplete';

package/components/Alert/index.d.ts

@@ -1,3 +1,3 @@
-export * from './Alert';
-export * from './types';
+export { Alert } from './Alert';
+export type { AlertProps, AlertSeverity } from './types';
 export { alertClassnames } from './constants';

package/components/Alert/index.js

@@ -1,3 +1,2 @@
-export * from './Alert';
-export * from './types';
+export { Alert } from './Alert';
 export { alertClassnames } from './constants';

package/components/AsyncAutocomplete/index.d.ts

@@ -1 +1 @@
-export * from './AsyncAutocomplete';
+export { AsyncAutocomplete, type AsyncAutocompleteProps, } from './AsyncAutocomplete';

package/components/AsyncAutocomplete/index.js

@@ -1 +1 @@
-export * from './AsyncAutocomplete';
+export { AsyncAutocomplete, } from './AsyncAutocomplete';

package/components/AutoSaveIndicator/index.d.ts

@@ -1 +1 @@
-export * from './AutoSaveIndicator';
+export { AutoSaveIndicator, type AutoSaveIndicatorProps, } from './AutoSaveIndicator';

package/components/AutoSaveIndicator/index.js

@@ -1 +1 @@
-export * from './AutoSaveIndicator';
+export { AutoSaveIndicator, } from './AutoSaveIndicator';

package/components/Autocomplete/styles.d.ts

@@ -3,7 +3,7 @@ import { Autocomplete as MuiAutocomplete } from '@mui/material';
 export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("..").WithoutEmotionSpecific<import("@mui/material").MenuItemProps> & {
     disabledReason?: string | undefined;
     note?: string | undefined;
-    tooltipPlacement?: "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | undefined;
+    tooltipPlacement?: "bottom" | "left" | "right" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
     component?: import("react").ElementType | undefined;
     href?: string | undefined;
 } & Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {

package/components/Avatar/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Avatar';
+export { Avatar } from './Avatar';
 export type { AvatarProps, AvatarSize } from './types';

package/components/Avatar/index.js

@@ -1 +1 @@
-export * from './Avatar';
+export { Avatar } from './Avatar';

package/components/AvatarGroup/index.d.ts

@@ -1 +1 @@
-export * from './AvatarGroup';
+export { AvatarGroup, type AvatarGroupProps } from './AvatarGroup';

package/components/AvatarGroup/index.js

@@ -1 +1 @@
-export * from './AvatarGroup';
+export { AvatarGroup } from './AvatarGroup';

package/components/Breadcrumbs/index.d.ts

@@ -1 +1 @@
-export * from './Breadcrumbs';
+export { Breadcrumbs, type BreadcrumbsProps } from './Breadcrumbs';

package/components/Breadcrumbs/index.js

@@ -1 +1 @@
-export * from './Breadcrumbs';
+export { Breadcrumbs } from './Breadcrumbs';

package/components/BulletList/index.d.ts

@@ -1 +1 @@
-export * from './BulletList';
+export { BulletList, type BulletListProps } from './BulletList';

package/components/BulletList/index.js

@@ -1 +1 @@
-export * from './BulletList';
+export { BulletList } from './BulletList';

package/components/BulletListInlineItem/index.d.ts

@@ -1 +1 @@
-export * from './BulletListInlineItem';
+export { BulletListInlineItem, type BulletListInlineItemProps, } from './BulletListInlineItem';

package/components/BulletListInlineItem/index.js

@@ -1 +1 @@
-export * from './BulletListInlineItem';
+export { BulletListInlineItem, } from './BulletListInlineItem';

package/components/BulletListItem/index.d.ts

@@ -1 +1 @@
-export * from './BulletListItem';
+export { BulletListItem, type BulletListItemProps } from './BulletListItem';

package/components/BulletListItem/index.js

@@ -1 +1 @@
-export * from './BulletListItem';
+export { BulletListItem } from './BulletListItem';

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>, {}>;