@astral/ui 4.113.3 → 4.115.0

package/node/components/DataGridMassActions/useLogic/index.d.ts

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

package/node/components/DataGridMassActions/useLogic/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("./useLogic"), exports);

package/node/components/DataGridMassActions/useLogic/useLogic.d.ts

@@ -0,0 +1,6 @@
+export declare const useLogic: () => {
+    isOpen: boolean;
+    isMounted: boolean;
+    selectedCount: number;
+    handleClose: () => void | undefined;
+};

package/node/components/DataGridMassActions/useLogic/useLogic.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const react_1 = require("react");
+const DataGridSelectionContext_1 = require("../../DataGrid/DataGridSelectionContext");
+const hooks_1 = require("../../theme/hooks");
+const useDelayedUnmount_1 = require("../../useDelayedUnmount");
+const useLogic = () => {
+    const { selectedRows, onSelectRow, isMassActionsOpen: isOpen, } = (0, react_1.useContext)(DataGridSelectionContext_1.DataGridSelectionContext);
+    const { transitions: { duration: { leavingScreen }, }, } = (0, hooks_1.useTheme)();
+    const { isMounted } = (0, useDelayedUnmount_1.useDelayedUnmount)({ isOpen, duration: leavingScreen });
+    // Во время анимации скрытия выбор уже пустой — показываем последнее количество выбранных строк
+    const [lastSelectedCount, setLastSelectedCount] = (0, react_1.useState)(selectedRows.length);
+    if (selectedRows.length > 0 && selectedRows.length !== lastSelectedCount) {
+        setLastSelectedCount(selectedRows.length);
+    }
+    const handleClose = () => onSelectRow?.([]);
+    return {
+        isOpen,
+        isMounted,
+        selectedCount: lastSelectedCount,
+        handleClose,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/IconDropdownButton/IconDropdownButton.d.ts

@@ -1,9 +1,14 @@
 import { type ReactNode } from 'react';
 import { type IconButtonProps } from '../IconButton';
+import { type MenuProps } from '../Menu';
 export type IconDropdownButtonProps = IconButtonProps & {
     /**
      * Иконка кнопки
      */
     icon: ReactNode;
+    /**
+     * Пропсы выпадающего меню
+     */
+    popoverProps?: Omit<MenuProps, 'open' | 'anchorEl' | 'title' | 'children'>;
 };
 export declare const IconDropdownButton: import("react").ForwardRefExoticComponent<Omit<IconDropdownButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/node/components/IconDropdownButton/IconDropdownButton.js

@@ -10,7 +10,7 @@ const react_1 = require("react");
 const IconButton_1 = require("../IconButton");
 const Menu_1 = require("../Menu");
 const useMenu_1 = require("../useMenu");
-exports.IconDropdownButton = (0, react_1.forwardRef)(({ children, icon, title, ...props }, ref) => {
+exports.IconDropdownButton = (0, react_1.forwardRef)(({ children, icon, title, popoverProps, ...props }, ref) => {
     const { open, anchorRef, handleOpenMenu, handleCloseMenu } = (0, useMenu_1.useMenu)(ref);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: handleCloseMenu, mouseEvent: "onMouseUp", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { ...props, ref: anchorRef, onClick: handleOpenMenu, selected: open, title: title, children: icon }) }), (0, jsx_runtime_1.jsx)(Menu_1.Menu, { title: title, open: open, anchorEl: anchorRef.current, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ClickAwayListener_1.default, { onClickAway: handleCloseMenu, mouseEvent: "onMouseUp", children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { ...props, ref: anchorRef, onClick: handleOpenMenu, selected: open, title: title, children: icon }) }), (0, jsx_runtime_1.jsx)(Menu_1.Menu, { ...popoverProps, title: title, open: open, anchorEl: anchorRef.current, children: children })] }));
 });

package/node/components/MassActions/MassActions.d.ts

@@ -0,0 +1,5 @@
+import { type MassActionsProps } from './types';
+/**
+ * Базовый компонент панели массовых действий
+ */
+export declare const MassActions: ({ main, secondary, selectedCount, entityDeclension, onClose, className, }: MassActionsProps) => import("react/jsx-runtime").JSX.Element;

package/node/components/MassActions/MassActions.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MassActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CrossOutlineMd_1 = require("../../icons/CrossOutlineMd");
+const IconButton_1 = require("../IconButton");
+const Tag_1 = require("../Tag");
+const constants_1 = require("./constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+/**
+ * Базовый компонент панели массовых действий
+ */
+const MassActions = ({ main, secondary, selectedCount, entityDeclension, onClose, className, }) => {
+    const { selectionLabel, reservedLabel } = (0, useLogic_1.useLogic)({
+        entityDeclension,
+        selectedCount,
+    });
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [(0, jsx_runtime_1.jsx)(styles_1.StyledActionGroup, { main: main, secondary: secondary, secondaryPopoverProps: constants_1.SECONDARY_POPOVER_PROPS, size: "large" }), (0, jsx_runtime_1.jsxs)(styles_1.Selection, { children: [(0, jsx_runtime_1.jsxs)(styles_1.SelectionLabel, { children: [(0, jsx_runtime_1.jsx)(styles_1.ReservedLabel, { variant: "text", size: "large", label: reservedLabel, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(Tag_1.Tag, { variant: "text", size: "large", label: selectionLabel, "aria-live": "polite" })] }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", "aria-label": "\u0421\u043D\u044F\u0442\u044C \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u0438\u0435", onClick: onClose, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })] })] }));
+};
+exports.MassActions = MassActions;

package/node/components/MassActions/constants.d.ts

@@ -0,0 +1,6 @@
+import { type IconDropdownButtonProps } from '../IconDropdownButton';
+export declare const SECONDARY_POPOVER_PROPS: IconDropdownButtonProps['popoverProps'];
+/**
+ * Количество выбранных строк, под которое заранее резервируется ширина счётчика
+ */
+export declare const RESERVED_SELECTED_COUNT = 999;

package/node/components/MassActions/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RESERVED_SELECTED_COUNT = exports.SECONDARY_POPOVER_PROPS = void 0;
+/**
+ * Смещение меню вверх от кнопки. Компенсирует margin-top 8px у меню из темы и оставляет отступ 8px до кнопки
+ */
+const ANCHOR_VERTICAL_POSITION = -16;
+exports.SECONDARY_POPOVER_PROPS = {
+    anchorOrigin: { vertical: ANCHOR_VERTICAL_POSITION, horizontal: 'left' },
+    transformOrigin: { vertical: 'bottom', horizontal: 'left' },
+};
+/**
+ * Количество выбранных строк, под которое заранее резервируется ширина счётчика
+ */
+exports.RESERVED_SELECTED_COUNT = 999;

package/node/components/MassActions/index.d.ts

@@ -0,0 +1,2 @@
+export { MassActions } from './MassActions';
+export type { MassActionsProps } from './types';

package/node/components/MassActions/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MassActions = void 0;
+var MassActions_1 = require("./MassActions");
+Object.defineProperty(exports, "MassActions", { enumerable: true, get: function () { return MassActions_1.MassActions; } });

package/node/components/MassActions/styles.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Selection: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledActionGroup: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../ActionGroup").ActionGroupProps<import("react").ElementType, import("react").ElementType> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+/**
+ * Невидимая заглушка и счётчик лежат в одной ячейке: ширину задаёт заглушка, поэтому панель не прыгает при смене количества
+ */
+export declare const SelectionLabel: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ReservedLabel: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    disabled?: boolean | undefined;
+    label?: import("react").ReactNode;
+    icon?: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | undefined;
+    className?: string | undefined;
+    onDelete?: ((event: import("react").SyntheticEvent<Element, Event>) => void) | undefined;
+    color?: import("../Tag").TagColor | undefined;
+    variant?: import("../Tag").TagVariant | undefined;
+    size?: import("../Tag").TagSize | undefined;
+    startAddon?: import("../Tag").TagAddon | undefined;
+    endAddon?: import("../Tag").TagAddon | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/node/components/MassActions/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReservedLabel = exports.SelectionLabel = exports.StyledActionGroup = exports.Selection = exports.Wrapper = void 0;
+const ActionGroup_1 = require("../ActionGroup");
+const styled_1 = require("../styled");
+const Tag_1 = require("../Tag");
+exports.Wrapper = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(3)};
+  align-items: center;
+
+  width: fit-content;
+  padding: ${({ theme }) => theme.spacing(4)};
+
+  background-color: ${({ theme }) => theme.palette.background.default};
+
+  /* 16px по макету, токена под это значение в теме нет */
+  border-radius: calc(${({ theme }) => theme.shape.medium} * 2);
+  box-shadow: ${({ theme }) => theme.elevation[200]};
+`;
+exports.Selection = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  align-items: center;
+
+  padding-left: ${({ theme }) => theme.spacing(2)};
+`;
+exports.StyledActionGroup = (0, styled_1.styled)(ActionGroup_1.ActionGroup) `
+  gap: ${({ theme }) => theme.spacing(3)};
+`;
+/**
+ * Невидимая заглушка и счётчик лежат в одной ячейке: ширину задаёт заглушка, поэтому панель не прыгает при смене количества
+ */
+exports.SelectionLabel = styled_1.styled.div `
+  display: grid;
+  justify-items: start;
+
+  font-variant-numeric: tabular-nums;
+
+  & > * {
+    grid-area: 1 / 1;
+  }
+`;
+exports.ReservedLabel = (0, styled_1.styled)(Tag_1.Tag) `
+  visibility: hidden;
+`;

package/node/components/MassActions/types.d.ts

@@ -0,0 +1,20 @@
+import { type ActionGroupProps } from '../ActionGroup';
+export type MassActionsProps = Pick<ActionGroupProps, 'main' | 'secondary'> & {
+    /**
+     * Количество выбранных элементов
+     */
+    selectedCount: number;
+    /**
+     * Три формы названия выбранной сущности
+     * @example ['документ', 'документа', 'документов']
+     */
+    entityDeclension: [string, string, string];
+    /**
+     * Обработчик закрытия панели
+     */
+    onClose: () => void;
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+};

package/node/components/MassActions/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/MassActions/useLogic/index.d.ts

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

package/node/components/MassActions/useLogic/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("./useLogic"), exports);

package/node/components/MassActions/useLogic/useLogic.d.ts

@@ -0,0 +1,7 @@
+import { type MassActionsProps } from '../types';
+type UseLogicParams = Pick<MassActionsProps, 'entityDeclension' | 'selectedCount'>;
+export declare const useLogic: ({ entityDeclension, selectedCount, }: UseLogicParams) => {
+    selectionLabel: string;
+    reservedLabel: string;
+};
+export {};

package/node/components/MassActions/useLogic/useLogic.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const declensionOfWords_1 = require("@astral/utils/declension/declensionOfWords");
+const constants_1 = require("../constants");
+const useLogic = ({ entityDeclension, selectedCount, }) => {
+    const selectionLabel = `Выбрано: ${selectedCount} ${(0, declensionOfWords_1.declensionOfWords)(entityDeclension)(selectedCount)}`;
+    // Самая длинная форма слова — чтобы ширина панели не менялась при смене склонения
+    const longestEntity = entityDeclension.reduce((longest, entity) => entity.length > longest.length ? entity : longest);
+    const reservedLabel = `Выбрано: ${constants_1.RESERVED_SELECTED_COUNT} ${longestEntity}`;
+    return { selectionLabel, reservedLabel };
+};
+exports.useLogic = useLogic;

package/node/components/PageHeader/PageActions/SecondaryActions/styles.d.ts

@@ -9,4 +9,4 @@ export declare const StyledMobileButton: import("@emotion/styled/dist/declaratio
 } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledSecondaryActions: <TSecondaryActionComponent extends import("react").ElementType = import("react").ElementType>({ actions, isDisabled, className, size, }: import("../../../ActionGroup").SecondaryActionProps<TSecondaryActionComponent>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const StyledSecondaryActions: <TSecondaryActionComponent extends import("react").ElementType = import("react").ElementType>({ actions, isDisabled, className, size, popoverProps, }: import("../../../ActionGroup").SecondaryActionProps<TSecondaryActionComponent>) => import("react/jsx-runtime").JSX.Element | null;

package/node/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/hooks/index.d.ts

@@ -1,3 +1,2 @@
-export * from './useDelayedUnmount';
 export * from './usePanelHeader';
 export * from './useRegisterClose';

package/node/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/hooks/index.js

@@ -14,6 +14,5 @@ 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("./useDelayedUnmount"), exports);
 __exportStar(require("./usePanelHeader"), exports);
 __exportStar(require("./useRegisterClose"), exports);

package/node/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/useLogic/useLogic.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const hooks_1 = require("../../../../../theme/hooks");
+const useDelayedUnmount_1 = require("../../../../../useDelayedUnmount");
 const MobileSlidePanelContext_1 = require("../../MobileSlidePanelContext");
 const hooks_2 = require("./hooks");
 /**
@@ -11,7 +12,7 @@ const hooks_2 = require("./hooks");
 const useLogic = ({ id, isOpen, onClose, activeHeader, parentLabel, parentNote, parentControl, parentAdditionalContent, isParentSelected, isParentDisabled, onParentClick, }) => {
     const { transitions: { duration: { standard: transitionDuration }, }, } = (0, hooks_1.useTheme)();
     const { register, closeTop, setHeader, removeHeader } = (0, react_1.useContext)(MobileSlidePanelContext_1.MobileSlidePanelContext) ?? {};
-    const { isMounted: isMobileMounted } = (0, hooks_2.useDelayedUnmount)({
+    const { isMounted: isMobileMounted } = (0, useDelayedUnmount_1.useDelayedUnmount)({
         isOpen,
         duration: transitionDuration,
     });

package/node/components/index.d.ts

@@ -131,7 +131,7 @@ export * from './MenuItem';
 export * from './MenuList';
 export { MinimalisticPagination, type MinimalisticPaginationProps, } from './MinimalisticPagination';
 export * from './NavMenu';
-export { type DataGridColumns, type DataGridRenderLink, type DataGridRenderLinkParams, type DataGridRow, type DataGridRowOptions, type DataGridSort, DataGrid, type DataGridProps, } from './DataGrid';
+export { type DataGridColumns, type DataGridRenderLink, type DataGridRenderLinkParams, type DataGridRow, type DataGridRowDisabled, type DataGridRowOptions, type DataGridSort, DataGrid, type DataGridProps, } from './DataGrid';
 export { DataGridInfinite, type DataGridInfiniteProps, } from './DataGridInfinite';
 export { DataGridColumnHintIcon, type DataGridColumnHintIconProps, } from './DataGridColumnHintIcon';
 export { type DateItemProps, type DateRangePickerProps, type DateRangePickerValue, DateRangePicker, } from './DateRangePicker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.113.3",
+  "version": "4.115.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {