@astral/ui 4.104.2 → 4.106.0

package/components/ActionCellBase/ActionCellBase.js

@@ -1,10 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from '../utils/cva';
+import { actionCellBaseClassnames } from './constants';
 import { MainAction } from './MainAction';
 import { SecondaryActions } from './SecondaryAction';
 import { Wrapper } from './styles';
+const actionCellCva = cva(actionCellBaseClassnames.root, {
+    variants: {
+        hasMainActions: {
+            true: actionCellBaseClassnames.hasMainActions,
+        },
+    },
+});
 export const ActionCellBase = ({ actions, isDisabledAction, handleWrapperClick, handleActionClick, }) => {
     const { main, secondary } = actions;
-    return (_jsxs(Wrapper, { onClick: handleWrapperClick, children: [main.map((action) => {
+    return (_jsxs(Wrapper, { onClick: handleWrapperClick, className: actionCellCva({ hasMainActions: Boolean(main.length) }), children: [main.map((action) => {
                 return (_jsx(MainAction, { action: action, onActionClick: handleActionClick, isDisabled: isDisabledAction }, action.name));
             }), secondary && (_jsx(SecondaryActions, { actions: secondary, onActionClick: handleActionClick, isDisabled: isDisabledAction }))] }));
 };

package/components/ActionCellBase/MainAction/MainAction.js

@@ -3,11 +3,17 @@ import { createElement as _createElement } from "react";
 import { IconDropdownButton } from '../../IconDropdownButton';
 import { MenuItem } from '../../MenuItem';
 import { Tooltip } from '../../Tooltip';
+import { useViewportType } from '../../useViewportType';
 import { MainIconButton } from './MainIconButton';
+import { MobileMainButton } from './MobileMainButton';
 export const MainAction = ({ action, onActionClick, isDisabled, }) => {
+    const { isMobile } = useViewportType();
     if ('actions' in action) {
         const { disabled, icon, name, disabledReason, actions } = action;
         return (_jsx(Tooltip, { title: disabledReason || name, withoutContainer: !disabled, placement: "top", children: _jsx(IconDropdownButton, { icon: icon, variant: "text", disabled: isDisabled || disabled, children: actions.map(({ name: nestedActionName, onClick: onClickNested, ...props }) => (_createElement(MenuItem, { ...props, key: nestedActionName, onClick: onActionClick(onClickNested) }, nestedActionName))) }) }, name));
     }
+    if (isMobile && action.isMobilePrimary) {
+        return (_jsx(MobileMainButton, { action: action, onActionClick: onActionClick, isDisabled: isDisabled }));
+    }
     return (_jsx(MainIconButton, { action: action, onActionClick: onActionClick, isDisabled: isDisabled }));
 };

package/components/ActionCellBase/MainAction/MainIconButton/MainIconButton.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { ConfirmAction, } from '../../../ConfirmAction';
-import { IconButton } from '../../../IconButton';
 import { Tooltip } from '../../../Tooltip';
+import { mainIconButtonClassnames } from './constants';
+import { StyledIconButton } from './styles';
 import { useLogic } from './useLogic';
 export const MainIconButton = (props) => {
     const { tooltipProps } = useLogic(props);
     const { action, onActionClick, isDisabled } = props;
-    const { name, icon, needConfirm, confirmText, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, ...actions } = action;
-    const renderButton = (renderProps) => (_jsx(Tooltip, { withoutContainer: !disabled, placement: "top", ...tooltipProps, children: _jsx(IconButton, { disabled: isDisabled || disabled, loading: loading, ...actions, variant: "text", ...renderProps, children: icon }) }, name));
-    return (_jsx(_Fragment, { children: needConfirm ? (_jsx(ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
+    const { name, icon, needConfirm, confirmText, confirmMobileTitle, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, isMobilePrimary, mobileProps, ...actions } = action;
+    const renderButton = (renderProps) => (_jsx(Tooltip, { withoutContainer: !disabled, placement: "top", ...tooltipProps, children: _jsx(StyledIconButton, { disabled: isDisabled || disabled, loading: loading, ...actions, variant: "text", ...renderProps, className: mainIconButtonClassnames.root, children: icon }) }, name));
+    return (_jsx(_Fragment, { children: needConfirm ? (_jsx(ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, popoverProps: {
+                title: confirmMobileTitle,
+            }, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) })) : (renderButton({
             onClick: onActionClick(onClick),
         })) }));
 };

package/components/ActionCellBase/MainAction/MainIconButton/constants.d.ts

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

package/components/ActionCellBase/MainAction/MainIconButton/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../../../utils/createUIKitClassname';
+export const mainIconButtonClassnames = {
+    root: createUIKitClassname('action-cell-base__main-icon-button'),
+};

package/components/ActionCellBase/MainAction/MainIconButton/styles.d.ts

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

package/components/ActionCellBase/MainAction/MainIconButton/styles.js

@@ -0,0 +1,9 @@
+import { IconButton } from '../../../IconButton';
+import { styled } from '../../../styled';
+export const StyledIconButton = styled(IconButton) `
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    order: 2;
+
+    background-color: ${({ theme }) => theme.palette.grey[100]};
+  }
+`;

package/components/ActionCellBase/MainAction/MobileMainButton/MobileMainButton.d.ts

@@ -0,0 +1,14 @@
+import { type IconButtonProps } from '../../../IconButton';
+import { type ActionHandler, type SingleAction } from '../../types';
+export type MobileMainButtonProps<TAction> = {
+    action: IconButtonProps & SingleAction<TAction>;
+    /**
+     *  Обработчик клика на действие
+     */
+    onActionClick: ActionHandler<TAction>;
+    /**
+     *  Если true, action не доступен
+     */
+    isDisabled?: boolean;
+};
+export declare const MobileMainButton: <TAction>({ action, isDisabled, onActionClick, }: MobileMainButtonProps<TAction>) => import("react/jsx-runtime").JSX.Element;

package/components/ActionCellBase/MainAction/MobileMainButton/MobileMainButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfirmAction, } from '../../../ConfirmAction';
+import { StyledButton } from './styles';
+export const MobileMainButton = ({ action, isDisabled, onActionClick, }) => {
+    const { mobileProps, name, icon, needConfirm, confirmText, confirmMobileTitle, confirmButtonProps, disabledReason, disabled, loading, isBlockingOperation, loadingNote, onClick, isMobilePrimary, ...actions } = action;
+    const text = mobileProps?.text ?? name;
+    const color = mobileProps?.color ?? 'primary';
+    const renderButton = (renderProps) => (_jsx(StyledButton, { disabled: isDisabled || disabled, loading: loading, color: color, ...actions, variant: "contained", ...renderProps, children: text }));
+    if (needConfirm) {
+        return (_jsx(ConfirmAction, { text: confirmText, confirmButtonProps: confirmButtonProps, popoverProps: {
+                title: confirmMobileTitle,
+            }, actionComponent: (renderProps) => renderButton(renderProps), onConfirm: onActionClick(onClick) }));
+    }
+    return renderButton({
+        onClick: onActionClick(onClick),
+    });
+};

package/components/ActionCellBase/MainAction/MobileMainButton/index.d.ts

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

package/components/ActionCellBase/MainAction/MobileMainButton/index.js

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

package/components/ActionCellBase/MainAction/MobileMainButton/styles.d.ts

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

package/components/ActionCellBase/MainAction/MobileMainButton/styles.js

@@ -0,0 +1,7 @@
+import { Button } from '../../../Button';
+import { styled } from '../../../styled';
+export const StyledButton = styled(Button) `
+  order: 1;
+
+  width: 100%;
+`;

package/components/ActionCellBase/SecondaryAction/SecondaryAction.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import { DotsVOutlineMd } from '../../../icons/DotsVOutlineMd';
-import { IconDropdownButton } from '../../IconDropdownButton';
 import { MenuItem } from '../../MenuItem';
+import { StyledIconDropdownButton } from './styles';
 export const SecondaryActions = ({ actions, onActionClick, isDisabled, }) => {
-    return (_jsx(IconDropdownButton, { "aria-label": "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F", icon: _jsx(DotsVOutlineMd, {}), variant: "text", disabled: isDisabled, children: actions.map((action) => {
+    return (_jsx(StyledIconDropdownButton, { "aria-label": "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F", title: "\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F", icon: _jsx(DotsVOutlineMd, {}), variant: "text", disabled: isDisabled, children: actions.map((action) => {
             const { onClick, name } = action;
             return (_createElement(MenuItem, { ...action, key: name, tooltipPlacement: "left", onClick: onActionClick(onClick) }, name));
         }) }));

package/components/ActionCellBase/SecondaryAction/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledIconDropdownButton: import("../../styled").StyledComponent<Omit<import("../../IconDropdownButton").IconDropdownButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/ActionCellBase/SecondaryAction/styles.js

@@ -0,0 +1,9 @@
+import { IconDropdownButton } from '../../IconDropdownButton';
+import { styled } from '../../styled';
+export const StyledIconDropdownButton = styled(IconDropdownButton) `
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    order: 3;
+
+    background-color: ${({ theme }) => theme.palette.grey[100]};
+  }
+`;

package/components/ActionCellBase/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const actionCellBaseClassnames: {
+    root: string;
+    hasMainActions: string;
+};

package/components/ActionCellBase/constants.js

@@ -0,0 +1,5 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const actionCellBaseClassnames = {
+    root: createUIKitClassname('action-cell-base'),
+    hasMainActions: createUIKitClassname('action-cell-base_has-main-actions'),
+};

package/components/ActionCellBase/styles.js

@@ -1,5 +1,16 @@
 import { styled } from '../styled';
+import { actionCellBaseClassnames } from './constants';
 export const Wrapper = styled.div `
   display: inline-flex;
   align-items: center;
+
+  ${({ theme }) => theme.breakpoints.down('mobile')} {
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    width: auto;
+
+    &.${actionCellBaseClassnames.hasMainActions} {
+      width: 100%;
+    }
+  }
 `;

package/components/ActionCellBase/types.d.ts

@@ -1,4 +1,5 @@
 import type { MouseEventHandler, ReactNode } from 'react';
+import { type ButtonColor } from '../Button';
 import { type ConfirmActionProps } from '../ConfirmAction';
 import { type IconButtonProps } from '../IconButton';
 import { type MenuItemProps } from '../MenuItem';
@@ -33,6 +34,10 @@ export type SingleAction<TAction> = {
      * Поясняющий текст для подтверждения действия
      */
     confirmText?: ConfirmActionProps['text'];
+    /**
+     * Заголовок подтверждения действия на мобильной ширине
+     */
+    confirmMobileTitle?: string;
     /**
      * Параметры кнопки подтверждения действия
      */
@@ -49,6 +54,26 @@ export type SingleAction<TAction> = {
      * Причина блокировки строки во время загрузки
      */
     loadingNote?: string;
+    /**
+     * Если `true`, на мобильной ширине действие отображается кнопкой с текстом,
+     * а не иконкой
+     */
+    isMobilePrimary?: boolean;
+    /**
+     * Параметры кнопки действия на мобильной ширине
+     */
+    mobileProps?: {
+        /**
+         * Текст кнопки
+         * @default name
+         */
+        text?: string;
+        /**
+         * Цвет кнопки
+         * @default 'primary'
+         */
+        color?: ButtonColor;
+    };
     /**
      * Обработчик действия
      */

package/components/ActionGroup/MainActions/ActionNode/ActionNode.d.ts

@@ -0,0 +1,9 @@
+import { type ElementType } from 'react';
+import type { ProcessedMainAction } from '../hooks';
+export type ActionNodeProps<TMainActionComponent extends ElementType> = ProcessedMainAction<TMainActionComponent> & {
+    isRenderActionDisabled?: boolean;
+};
+/**
+ * Отображает одно основное действие: стандартный узел кита либо то, что вернул `renderAction`
+ */
+export declare const ActionNode: <TMainActionComponent extends ElementType>(props: ActionNodeProps<TMainActionComponent>) => import("react/jsx-runtime").JSX.Element;

package/components/ActionGroup/MainActions/ActionNode/ActionNode.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DropdownButton } from '../../../DropdownButton';
+import { MenuItem } from '../../../MenuItem';
+import { Tooltip } from '../../../Tooltip';
+import { StyledButton } from '../styles';
+/**
+ * Отображает одно основное действие: стандартный узел кита либо то, что вернул `renderAction`
+ */
+export const ActionNode = (props) => {
+    const { tooltipProps, renderAction, isRenderActionDisabled = false } = props;
+    const { key, ...restTooltipProps } = tooltipProps;
+    const isRenderActionCalled = !isRenderActionDisabled && Boolean(renderAction);
+    // Якорь в состоянии, а не в ref: мутация ref.current не вызывает обновление, и popover на первом кадре остался бы без якоря
+    const [anchorEl, setAnchorEl] = useState(null);
+    // Лишний render при монтировании достаётся только действиям с renderAction.
+    const anchorRef = isRenderActionCalled && !props.isNested ? setAnchorEl : undefined;
+    const defaultElement = (_jsx(Tooltip, { ...restTooltipProps, ref: anchorRef, children: props.isNested ? (_jsx(DropdownButton, { ...props.buttonProps, children: props.nestedActions.map(({ key: nestedKey, text, ...nestedProps }) => (_jsx(MenuItem, { ...nestedProps, children: text }, nestedKey))) })) : (_jsx(StyledButton, { ...props.buttonProps })) }));
+    if (isRenderActionDisabled || !props.renderAction) {
+        return defaultElement;
+    }
+    if (props.isNested) {
+        return _jsx(_Fragment, { children: props.renderAction({ defaultElement }) });
+    }
+    return (_jsx(_Fragment, { children: props.renderAction({
+            defaultElement,
+            elementProps: props.elementProps,
+            anchorEl,
+        }) }));
+};

package/components/ActionGroup/MainActions/ActionNode/index.d.ts

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

package/components/ActionGroup/MainActions/ActionNode/index.js

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

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

@@ -1,3 +1,3 @@
 import { type ElementType } from 'react';
 import type { MainActionsProps } from '../types';
-export declare const MainActions: <TMainActionComponent extends ElementType = ElementType>({ actions, isDisabled, size, }: MainActionsProps<TMainActionComponent>) => import("react/jsx-runtime").JSX.Element;
+export declare const MainActions: <TMainActionComponent extends ElementType = ElementType>({ actions, isDisabled, size, isRenderActionDisabled, }: MainActionsProps<TMainActionComponent>) => import("react/jsx-runtime").JSX.Element;

package/components/ActionGroup/MainActions/MainActions.js

@@ -1,18 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
-import { MenuItem } from '../../MenuItem';
-import { Tooltip } from '../../Tooltip';
+import { ActionNode } from './ActionNode';
 import { useMainActions } from './hooks';
-import { StyledButton, StyledDropdownButton } from './styles';
-export const MainActions = ({ actions, isDisabled, size, }) => {
+export const MainActions = ({ actions, isDisabled, size, isRenderActionDisabled = false, }) => {
     const processedActions = useMainActions({ actions, size, isDisabled });
-    return (_jsx(_Fragment, { children: processedActions.map(({ tooltipProps, isNested, buttonProps, nestedActions }) => {
-            const { key: tooltipKey, ...restTooltipProps } = tooltipProps;
-            if (isNested) {
-                return (_createElement(Tooltip, { ...restTooltipProps, key: tooltipKey },
-                    _jsx(StyledDropdownButton, { ...buttonProps, children: nestedActions.map(({ key, text, ...nestedProps }) => (_jsx(MenuItem, { ...nestedProps, children: text }, key))) })));
-            }
-            return (_createElement(Tooltip, { ...restTooltipProps, key: tooltipKey },
-                _jsx(StyledButton, { ...buttonProps })));
-        }) }));
+    return (_jsx(_Fragment, { children: processedActions.map((action) => (_jsx(ActionNode, { isRenderActionDisabled: isRenderActionDisabled, ...action }, action.tooltipProps.key))) }));
 };