@astral/ui 4.13.1 → 4.14.0

package/components/CardGridInfinite/types.d.ts

@@ -0,0 +1,98 @@
+import type { ReactNode, RefObject } from 'react';
+import type { CardProps } from './Card';
+export type SkeletonConfig = {
+    /**
+     * Скелетон, отображающийся внутри карточки
+     */
+    component: ReactNode;
+    /**
+     * Число отображаемых элементов в состоянии загрузки
+     */
+    count: number;
+};
+export type CardGridInfiniteProps<TDataItem extends Record<string, unknown>> = {
+    /**
+     * Отображается skeleton
+     */
+    isLoading?: boolean;
+    isError?: boolean;
+    errorMsg?: string;
+    /**
+     * Функция обработки нажатия на кнопку "Повторить снова"
+     */
+    onRetry: () => void;
+    /**
+     * Конфигурация состояния загрузки компонента
+     */
+    skeleton: SkeletonConfig;
+    /**
+     * Изображение отображающееся при отсутствии данных
+     */
+    noDataImgSrc?: string;
+    /**
+     * Список элементов для отображения
+     */
+    list?: TDataItem[];
+    /**
+     * Конфигурация отображения элементов
+     *
+     * @example
+     * defineCard={({ organization, content }) => {
+          return {
+            header: <CardHeader organization={organization} />
+            content: <DescriptionList leader items={content} />,
+            mainActions: () => <MainActions />,
+            secondaryActions: () => <SecondaryActions />,
+          };
+        }}
+     */
+    defineCard: (itemData: TDataItem) => Omit<CardProps<TDataItem>, 'item'>;
+    /**
+     * Определяет минимальную и максимальную ширину карточек в адаптивной сетке.
+     * Применяется через CSS Grid.
+     * Колонки автоматически перестраиваются при изменении ширины контейнера.
+     *
+     * @example
+     * desktopCardWidth={{
+     *   min: '350px',
+     *   max: '1fr',
+     * }}
+     */
+    desktopCardWidth: {
+        min: string;
+        max: string;
+    };
+    /**
+     * Вызывается, когда пользователь достигает конца списка и требуется загрузить дополнительные данные
+     */
+    onLoadMore: () => void;
+    /**
+     * Флаг достижения конца списка
+     */
+    isEndReached?: boolean;
+    /**
+     * Сообщение, отображаемое при достижении конца списка
+     *
+     * @default Вы достигли конца списка
+     */
+    endOfScrollMsg?: string;
+    /**
+     * Изображение при ошибке
+     *
+     * @default Берется из контекста ConfigContext (defaultErrorImgSrc)
+     */
+    errorImgSrc?: string;
+    /**
+     * Реф на контейнер, в котором должен быть скролл
+     *
+     * Используется тот же реф, что передается в компонент PageContent
+     *
+     * @example
+     * const scrollRef = useRef(null);
+     *
+     * <PageContent scrollRef={scrollRef}>
+     *   <CardGridInfinite scrollRef={scrollRef} ... />
+     * </PageContent>
+     */
+    scrollRef: RefObject<HTMLElement>;
+};

package/components/CardGridInfinite/types.js

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

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

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

package/components/CardGridInfinite/useLogic/index.js

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

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

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { type ListRange } from 'react-virtuoso';
+import { type ContentStateProps } from '../../ContentState';
+import type { CardGridInfiniteProps } from '../types';
+type UseLogicParams<TDataItem extends Record<string, unknown>> = CardGridInfiniteProps<TDataItem>;
+export declare const useLogic: <TDataItem extends Record<string, unknown>>({ list, isLoading, isError, errorMsg, errorImgSrc, scrollRef, skeleton, onRetry, endOfScrollMsg, isEndReached, onLoadMore, noDataImgSrc, defineCard, desktopCardWidth, }: UseLogicParams<TDataItem>) => {
+    contentStateProps: Omit<ContentStateProps, "children">;
+    desktopCardWidth: {
+        min: string;
+        max: string;
+    };
+    virtuosoProps: {
+        id: string;
+        style: {
+            height: string;
+        };
+        ref: import("react").RefObject<import("react-virtuoso").VirtuosoHandle>;
+        overscan: number;
+        rangeChanged: (range: ListRange) => void;
+        endReached: () => void;
+    };
+    footerProps: {
+        isError: boolean | undefined;
+        isEndReached: boolean | undefined;
+        onRetry: () => void;
+        endOfScrollMsg: string | undefined;
+        isLoading: boolean | undefined;
+    };
+    onTopButtonProps: {
+        isActive: boolean;
+        handleScrollToTop: () => void;
+        scrollRef: import("react").RefObject<HTMLElement>;
+    };
+    scrollParent: HTMLElement | null;
+    skeleton: import("../types").SkeletonConfig;
+    list: TDataItem[] | undefined;
+    noDataImgSrc: string | undefined;
+    defineCard: (itemData: TDataItem) => Omit<import("..").CardProps<TDataItem>, "item">;
+    classnames: string;
+};
+export {};

package/components/CardGridInfinite/useLogic/useLogic.js

@@ -0,0 +1,73 @@
+import { useContext, useEffect, useMemo } from 'react';
+import { ConfigContext } from '../../ConfigProvider';
+import { useScrollManagement, useStickyButton, useViewportType, } from '../../hooks';
+import { classNames } from '../../utils';
+import { cardGridClassnames, OVERSCAN, VIRTUOSO_CONTAINER_ID, } from '../constants';
+export const useLogic = ({ list, isLoading, isError, errorMsg, errorImgSrc, scrollRef, skeleton, onRetry, endOfScrollMsg, isEndReached, onLoadMore, noDataImgSrc, defineCard, desktopCardWidth, }) => {
+    const { imagesMap } = useContext(ConfigContext);
+    const { isMobile } = useViewportType();
+    useEffect(() => {
+        if (isMobile && scrollRef?.current) {
+            scrollRef.current.style.backgroundColor = 'unset';
+            scrollRef.current.style.padding = 'unset';
+        }
+    }, [isMobile]);
+    const contentStateProps = useMemo(() => {
+        const isNoData = !list?.length;
+        return {
+            isLoading: isNoData && isLoading,
+            isError: isNoData && isError,
+            loadingTitle: 'Загрузка данных',
+            errorState: {
+                imgAlt: 'Что-то пошло не так',
+                errorList: [errorMsg || ''],
+                imgSrc: errorImgSrc || imagesMap.defaultErrorImgSrc,
+                onRetry,
+            },
+        };
+    }, [list, isLoading, isError, errorMsg, errorImgSrc, imagesMap]);
+    const { scrollParent, recalculateVerticalScroll, handleEndReach, isEndReachedWithScroll, } = useScrollManagement({
+        scrollRef,
+        isEndReached,
+        onLoadMore,
+        virtuosoId: VIRTUOSO_CONTAINER_ID,
+    });
+    const { virtuoso, isStickyButtonActive, handleRangeChanged: propsHandleRangeChanged, handleScrollToTop, } = useStickyButton(scrollRef);
+    const handleRangeChanged = (range) => {
+        recalculateVerticalScroll();
+        propsHandleRangeChanged(range);
+    };
+    const classnames = useMemo(() => classNames(cardGridClassnames.root, {
+        [cardGridClassnames.loading]: isLoading,
+    }), [isLoading]);
+    return {
+        contentStateProps,
+        desktopCardWidth,
+        virtuosoProps: {
+            id: VIRTUOSO_CONTAINER_ID,
+            style: { height: '100%' },
+            ref: virtuoso,
+            overscan: OVERSCAN,
+            rangeChanged: handleRangeChanged,
+            endReached: handleEndReach,
+        },
+        footerProps: {
+            isError,
+            isEndReached: isEndReachedWithScroll,
+            onRetry,
+            endOfScrollMsg,
+            isLoading,
+        },
+        onTopButtonProps: {
+            isActive: isStickyButtonActive,
+            handleScrollToTop,
+            scrollRef,
+        },
+        scrollParent,
+        skeleton,
+        list,
+        noDataImgSrc,
+        defineCard,
+        classnames,
+    };
+};

package/components/DashboardLayout/Sidebar/styles.d.ts

@@ -6,10 +6,7 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     $isPinned: boolean;
     $alertHeight: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledPaper: import("@emotion/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").PaperProps>, "elevation"> & {
-    elevation?: 0 | 1 | 2 | undefined;
-    shape?: "small" | "medium" | "large" | undefined;
-} & {
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<Omit<import("../../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const SidebarRoot: import("@emotion/styled").StyledComponent<{

package/components/DatePicker/styles.d.ts

@@ -14,9 +14,6 @@ export declare const ButtonWrapper: 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 StyledPaper: import("@emotion/styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").PaperProps>, "elevation"> & {
-    elevation?: 0 | 1 | 2 | undefined;
-    shape?: "small" | "medium" | "large" | undefined;
-} & {
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<Omit<import("../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/DateRangePicker/styles.d.ts

@@ -5,10 +5,7 @@ export declare const StyledDatePickerInput: import("@emotion/styled").StyledComp
 }, "ref"> & import("react").RefAttributes<HTMLInputElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledPaper: import("@emotion/styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").PaperProps>, "elevation"> & {
-    elevation?: 0 | 1 | 2 | undefined;
-    shape?: "small" | "medium" | "large" | undefined;
-} & {
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<Omit<import("../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const PickerSplitter: import("@emotion/styled").StyledComponent<{

package/components/Description/styles.js

@@ -13,7 +13,7 @@ export const Wrapper = styled('div', {
     flex-direction: ${({ $direction }) => $direction === 'default' ? 'column' : $direction};
 
     .MuiTypography-root {
-      font-size: ${({ theme }) => theme.typography.fontSize};
+      font-size: ${({ theme }) => theme.typography.fontSize}px;
     }
   }
 `;

package/components/InfiniteTreeList/useLogic/useLogic.js

@@ -1,9 +1,8 @@
 import { useContext, useEffect, useMemo, useRef } from 'react';
 import { ConfigContext } from '../../ConfigProvider';
-import { useSet } from '../../hooks';
+import { useScrollManagement, useSet, useStickyButton } from '../../hooks';
 import { useTheme } from '../../theme';
 import { infiniteTreeListClassnames, VIRTUOSO_CONTAINER_ID, } from '../constants';
-import { useScrollManagement, useStickyButton } from './hooks';
 import { flattenTree, getDescendants, getInitialExpandedIds, sortCollapsed, } from './utils';
 export const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isError, isLoading, scrollRef, isEndReached, onLoadMore, renderItem, itemSkeleton, endOfScrollMsg, noDataImgSrc, errorImgSrc, }) => {
     const { imagesMap } = useContext(ConfigContext);
@@ -61,6 +60,7 @@ export const useLogic = ({ initialExpandedLevel, items, onRetry, errorMsg, isErr
         scrollRef,
         isEndReached,
         onLoadMore,
+        virtuosoId: VIRTUOSO_CONTAINER_ID,
     });
     const { virtuoso, isStickyButtonActive, handleRangeChanged, handleScrollToTop, } = useStickyButton(scrollRef);
     return {

package/components/PageLayout/PageContent/styles.js

@@ -24,9 +24,7 @@ export const Wrapper = styled('article', {
     order: 4;
 
     height: ${({ $isFullHeight }) => ($isFullHeight ? 'auto' : '100%')};
-    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
 
-    background-color: ${({ theme }) => theme.palette.background.default};
     border-top: none;
     border-radius: ${({ theme }) => theme.shape.medium};
   }
@@ -63,9 +61,14 @@ export const Content = styled.div `
   padding: ${({ theme, $hasAside }) => getPaddingContent(theme, $hasAside)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    scrollbar-gutter: unset;
+
     overflow: hidden;
 
+    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
     padding: ${({ theme }) => theme.spacing(4, 4, 3)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
   }
 
   &:has(.${pdfViewerClassnames.document}.${pdfViewerClassnames.zoom}) {

package/components/PageLayout/PageLayoutContainer/index.d.ts

@@ -1 +1,2 @@
 export * from './PageLayoutContainer';
+export { pageLayoutClassnames } from './constants';

package/components/PageLayout/PageLayoutContainer/index.js

@@ -1 +1,2 @@
 export * from './PageLayoutContainer';
+export { pageLayoutClassnames } from './constants';

package/components/PageLayout/PageLayoutContainer/styles.d.ts

@@ -3,9 +3,6 @@ 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 StylePaper: import("@emotion/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").PaperProps>, "elevation"> & {
-    elevation?: 0 | 1 | 2 | undefined;
-    shape?: "small" | "medium" | "large" | undefined;
-} & {
+export declare const StylePaper: import("@emotion/styled").StyledComponent<Omit<import("../../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/components/Paper/Paper.d.ts

@@ -16,4 +16,4 @@ export type PaperProps = Omit<WithoutEmotionSpecific<MuiPaperProps>, 'elevation'
      */
     shape?: 'small' | 'medium' | 'large';
 };
-export declare const Paper: ({ shape, ...restProps }: PaperProps) => JSX.Element;
+export declare const Paper: import("react").ForwardRefExoticComponent<Omit<PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/components/Paper/Paper.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { StyledPaper } from './styles';
-export const Paper = ({ shape = 'medium', ...restProps }) => {
-    return _jsx(StyledPaper, { "$shape": shape, ...restProps });
-};
+export const Paper = forwardRef(({ shape = 'medium', ...restProps }, ref) => {
+    return _jsx(StyledPaper, { ref: ref, "$shape": shape, ...restProps });
+});

package/components/{InfiniteTreeList/useLogic/hooks → hooks/Infinite}/useScrollManagement/useScrollManagement.d.ts

@@ -3,11 +3,12 @@ type UseScrollManagementParams = {
     scrollRef: RefObject<HTMLElement>;
     isEndReached?: boolean;
     onLoadMore?: () => void;
+    virtuosoId: string;
 };
 /**
  * Отслеживание скролла для динамического отображения футера
  */
-export declare const useScrollManagement: ({ scrollRef, isEndReached, onLoadMore, }: UseScrollManagementParams) => {
+export declare const useScrollManagement: ({ scrollRef, isEndReached, onLoadMore, virtuosoId, }: UseScrollManagementParams) => {
     scrollParent: HTMLElement | null;
     hasVerticalScroll: boolean;
     recalculateVerticalScroll: () => void;

package/components/{InfiniteTreeList/useLogic/hooks → hooks/Infinite}/useScrollManagement/useScrollManagement.js

@@ -1,12 +1,22 @@
 import { useEffect, useState } from 'react';
-import { VIRTUOSO_CONTAINER_ID } from '../../../constants';
+import { pageLayoutClassnames } from '../../../PageLayout/PageLayoutContainer';
+import { useViewportType } from '../../useViewportType';
 /**
  * Отслеживание скролла для динамического отображения футера
  */
-export const useScrollManagement = ({ scrollRef, isEndReached, onLoadMore, }) => {
+export const useScrollManagement = ({ scrollRef, isEndReached, onLoadMore, virtuosoId, }) => {
     const [scrollParent, setScrollParent] = useState(null);
     const [hasVerticalScroll, setHasVerticalScroll] = useState(false);
+    const { isMobile } = useViewportType();
     useEffect(() => {
+        if (isMobile) {
+            // На мобильных устройствах scroll находится на контейнере pageLayout
+            const rootScrollElement = document.querySelector(`.${pageLayoutClassnames.root}`);
+            if (rootScrollElement instanceof HTMLElement) {
+                setScrollParent(rootScrollElement);
+                return;
+            }
+        }
         if (scrollRef?.current) {
             setScrollParent(scrollRef.current);
         }
@@ -15,7 +25,7 @@ export const useScrollManagement = ({ scrollRef, isEndReached, onLoadMore, }) =>
         }
     }, [scrollRef]);
     const recalculateVerticalScroll = () => {
-        const list = document.getElementById(VIRTUOSO_CONTAINER_ID);
+        const list = document.getElementById(virtuosoId);
         if (scrollRef?.current && list) {
             setHasVerticalScroll(list?.clientHeight > scrollRef.current?.clientHeight);
         }

package/components/{InfiniteTreeList/useLogic/hooks → hooks/Infinite}/useStickyButton/useStickyButton.js

@@ -1,5 +1,5 @@
 import { useCallback, useRef } from 'react';
-import { useToggle } from '../../../../hooks';
+import { useToggle } from '../../useToggle';
 /**
  * Управление кнопкой "наверх"
  */
@@ -14,7 +14,7 @@ export const useStickyButton = (scrollRef) => {
     }, [showStickyButton, hideStickyButton]);
     const handleScrollToTop = () => {
         scrollRef.current.style.scrollBehavior = 'auto';
-        virtuoso.current?.scrollIntoView({ index: 0, behavior: 'auto' });
+        virtuoso.current?.scrollToIndex(0);
     };
     return {
         virtuoso,

package/components/hooks/index.d.ts

@@ -17,3 +17,4 @@ export { useCheckControlled } from './useCheckControlled';
 export * from './usePopoverAnimation';
 export { useAsyncOptions } from './useAsyncOptions';
 export { useLoadingState } from './useLoadingState';
+export { useScrollManagement, useStickyButton } from './Infinite';

package/components/hooks/index.js

@@ -17,3 +17,4 @@ export { useCheckControlled } from './useCheckControlled';
 export * from './usePopoverAnimation';
 export { useAsyncOptions } from './useAsyncOptions';
 export { useLoadingState } from './useLoadingState';
+export { useScrollManagement, useStickyButton } from './Infinite';

package/components/placeholders/LoadingPlaceholder/LoadingPlaceholder.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Loader } from '../../Loader';
 import { Typography } from '../../Typography';
+import { loadingPlaceholderClassnames } from './constants';
 import { LoadingContainer } from './styles';
 /**
  * Дефолтный лоадер загрузки
  */
 export const LoadingPlaceholder = ({ title, content, isShowLoader = true, }) => {
     if (!isShowLoader) {
-        return _jsx(LoadingContainer, {});
+        return _jsx(LoadingContainer, { className: loadingPlaceholderClassnames.root });
     }
     if (content) {
-        return _jsx(LoadingContainer, { children: content });
+        return (_jsx(LoadingContainer, { className: loadingPlaceholderClassnames.root, children: content }));
     }
-    return (_jsxs(LoadingContainer, { children: [_jsx(Loader, {}), title && _jsx(Typography, { variant: "h4", children: title })] }));
+    return (_jsxs(LoadingContainer, { className: loadingPlaceholderClassnames.root, children: [_jsx(Loader, {}), title && _jsx(Typography, { variant: "h4", children: title })] }));
 };

package/components/placeholders/LoadingPlaceholder/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const loadingPlaceholderClassnames: {
+    root: string;
+};

package/components/placeholders/LoadingPlaceholder/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../../utils';
+export const loadingPlaceholderClassnames = {
+    root: createUIKitClassname('loading-placeholder'),
+};

package/components/placeholders/LoadingPlaceholder/index.d.ts

@@ -1 +1,2 @@
 export * from './LoadingPlaceholder';
+export { loadingPlaceholderClassnames } from './constants';

package/components/placeholders/LoadingPlaceholder/index.js

@@ -1 +1,2 @@
 export * from './LoadingPlaceholder';
+export { loadingPlaceholderClassnames } from './constants';

package/node/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/node/components/CardGridInfinite/Card/Card.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Paper_1 = require("../../Paper");
+const Tooltip_1 = require("../../Tooltip");
+const CardActionContext_1 = require("./CardActionContext");
+const SecondaryActionButton_1 = require("./SecondaryActionButton");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const Card = (props) => {
+    const { handleActionClick } = (0, useLogic_1.useLogic)(props);
+    const { isDisabled, mainActions: MainActions, content, header, disabledReason, secondaryActions, } = props;
+    return ((0, jsx_runtime_1.jsx)(CardActionContext_1.CardActionContextProvider, { onActionClick: handleActionClick, isDisabledCard: isDisabled, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: isDisabled && disabledReason, withoutContainer: !isDisabled, placement: "top", componentsProps: { popper: { disablePortal: true } }, children: (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", inert: isDisabled ? '' : undefined, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [header && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.CardHeader, { children: [(0, jsx_runtime_1.jsx)(styles_1.HeaderWrapper, { children: header }), secondaryActions && ((0, jsx_runtime_1.jsx)(SecondaryActionButton_1.SecondaryActionButton, { renderActions: secondaryActions }))] }), (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] })), content, MainActions && (0, jsx_runtime_1.jsx)(MainActions, {})] }) }) }) }));
+};
+exports.Card = Card;

package/node/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/node/components/CardGridInfinite/Card/CardActionContext/CardActionContext.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardActionContext = void 0;
+const react_1 = require("react");
+exports.CardActionContext = (0, react_1.createContext)({
+    isDisabledCard: false,
+    isDisabled: false,
+    onActionClick: () => undefined,
+    setDisabledActions: () => undefined,
+    removeDisabledActions: () => undefined,
+});

package/node/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/node/components/CardGridInfinite/Card/CardActionContext/CardActionContextProvider/CardActionContextProvider.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardActionContextProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CardActionContext_1 = require("../CardActionContext");
+const CardActionContextProvider = ({ children, isDisabledCard, onActionClick, }) => {
+    const [isDisabled, setDisabled] = (0, react_1.useState)(false);
+    const setDisabledActions = (0, react_1.useCallback)(() => {
+        setDisabled(true);
+    }, []);
+    const removeDisabledActions = (0, react_1.useCallback)(() => {
+        setDisabled(false);
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        isDisabled,
+        isDisabledCard,
+        setDisabledActions,
+        removeDisabledActions,
+        onActionClick,
+    }), [
+        isDisabled,
+        setDisabledActions,
+        removeDisabledActions,
+        onActionClick,
+        isDisabledCard,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(CardActionContext_1.CardActionContext.Provider, { value: contextValue, children: children }));
+};
+exports.CardActionContextProvider = CardActionContextProvider;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CardActionContextProvider"), exports);

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CardActionContext"), exports);
+__exportStar(require("./CardActionContextProvider"), exports);

package/node/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 {};