@astral/ui 4.56.0 → 4.57.0

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

@@ -4,8 +4,14 @@ import { type DataGridRow } from '../../DataGrid';
 import { type CellValue } from '../../DataGrid/types';
 import { type DataGridInfiniteProps } from '../types';
 type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridInfiniteProps<TData, TSortField>;
-export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, }: UseLogicParams<TData, TSortField>) => {
+export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, }: UseLogicParams<TData, TSortField>) => {
+    containerCssVars: import("react").CSSProperties;
+    mobileSkeletonProps: {
+        cellsCount: number;
+        rowsCount: number;
+    };
     isNoData: boolean;
+    isMobile: boolean;
     isDataGridDisabled: boolean | undefined;
     isStickyButtonActive: boolean;
     treeRenderConfig: {

package/node/components/DataGridInfinite/useLogic/useLogic.js

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const enums_1 = require("../../DataGrid/enums");
+const hooks_1 = require("../../DataGrid/useLogic/hooks");
 const utils_1 = require("../../DataGrid/utils");
 const useToggle_1 = require("../../useToggle");
+const useViewportType_1 = require("../../useViewportType");
 const prop_1 = require("../../utils/prop");
 const uniqueBy_1 = require("../../utils/uniqueBy");
 const constants_1 = require("../constants");
-const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, }) => {
+const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, }) => {
     const virtuoso = (0, react_1.useRef)(null);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const [hasVerticalScroll, setHasVerticalScroll] = (0, react_1.useState)(false);
     const [isStickyButtonActive, showStickyButton, hideStickyButton] = (0, useToggle_1.useToggle)();
     const isNoData = Boolean(rows?.length);
@@ -62,8 +65,15 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
         }
     };
     const isHideHead = isHideHeaderIfNoData && rows.length === 0;
+    const { mobileSkeletonProps } = (0, hooks_1.useDataGridMobileLogic)({
+        columns,
+    });
+    const containerCssVars = (0, utils_1.getDataGridCssVars)(maxHeight);
     return {
+        containerCssVars,
+        mobileSkeletonProps,
         isNoData,
+        isMobile,
         isDataGridDisabled,
         isStickyButtonActive,
         treeRenderConfig,

package/node/components/DescriptionCell/styles.js

@@ -1,18 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ItemWrapper = exports.IconWrapper = exports.Wrapper = void 0;
-const Typography_1 = require("@mui/material/Typography");
+const constants_1 = require("../Description/constants");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("../Typography/constants");
+const constants_3 = require("./constants");
 exports.Wrapper = styled_1.styled.div `
   display: flex;
   align-items: center;
 
-  &.${constants_1.descriptionCellClassnames.hasIcon} {
+  &.${constants_3.descriptionCellClassnames.hasIcon} {
     gap: ${({ theme }) => theme.spacing(2)};
   }
 
-  &.${constants_1.descriptionCellClassnames.iconRight} {
+  &.${constants_3.descriptionCellClassnames.iconRight} {
     flex-direction: row-reverse;
   }
 `;
@@ -23,15 +24,23 @@ exports.IconWrapper = styled_1.styled.div `
     width: 24px;
     height: 24px;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
 `;
 exports.ItemWrapper = styled_1.styled.div `
   display: flex;
   flex-direction: column;
 
-  dl {
-    .${Typography_1.typographyClasses.root} {
+  & .${constants_1.descriptionClassnames.root} {
+    & .${constants_2.typographyClassnames.root} {
       font-size: unset;
       color: unset;
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: ${({ theme }) => theme.spacing(1)};
+  }
 `;

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

@@ -1,4 +1,5 @@
 export { NewStepper } from './NewStepper';
+export { stepperClassnames } from './constants';
 export { Step, type StepProps, stepClassnames } from './Step';
 export type { StepperProps } from './types';
 export { stepIconClassnames } from './StepIcon';

package/node/components/NewStepper/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stepIconClassnames = exports.stepClassnames = exports.Step = exports.NewStepper = void 0;
+exports.stepIconClassnames = exports.stepClassnames = exports.Step = exports.stepperClassnames = exports.NewStepper = void 0;
 var NewStepper_1 = require("./NewStepper");
 Object.defineProperty(exports, "NewStepper", { enumerable: true, get: function () { return NewStepper_1.NewStepper; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "stepperClassnames", { enumerable: true, get: function () { return constants_1.stepperClassnames; } });
 var Step_1 = require("./Step");
 Object.defineProperty(exports, "Step", { enumerable: true, get: function () { return Step_1.Step; } });
 Object.defineProperty(exports, "stepClassnames", { enumerable: true, get: function () { return Step_1.stepClassnames; } });

package/node/components/NewStepper/public.d.ts

@@ -1,3 +1,4 @@
+export { stepperClassnames } from './constants';
 export { NewStepper } from './NewStepper';
 export { Step, type StepProps, stepClassnames } from './Step';
 export { stepIconClassnames } from './StepIcon';

package/node/components/NewStepper/public.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.stepIconClassnames = exports.stepClassnames = exports.Step = exports.NewStepper = void 0;
+exports.stepIconClassnames = exports.stepClassnames = exports.Step = exports.NewStepper = exports.stepperClassnames = void 0;
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "stepperClassnames", { enumerable: true, get: function () { return constants_1.stepperClassnames; } });
 var NewStepper_1 = require("./NewStepper");
 Object.defineProperty(exports, "NewStepper", { enumerable: true, get: function () { return NewStepper_1.NewStepper; } });
 var Step_1 = require("./Step");

package/node/components/PageLayoutSection/PageLayoutSection.d.ts

@@ -5,6 +5,10 @@ export type PageLayoutSectionProps = {
      * Название класса, применяется к корневому компоненту
      */
     className?: string;
+    /**
+     * Отключает боковые отступы на мобильных разрешениях
+     */
+    isNoMobileSidePadding?: boolean;
 };
 /**
  * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.

package/node/components/PageLayoutSection/PageLayoutSection.js

@@ -3,7 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayoutSection = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const classNames_1 = require("../utils/classNames");
+const cva_1 = require("../utils/cva");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
+const sectionWrapperCva = (0, cva_1.cva)(constants_1.pageLayoutSectionClassnames.wrapper, {
+    variants: {
+        isNoMobileSidePadding: {
+            true: constants_1.pageLayoutSectionClassnames.isNoMobileSidePadding,
+        },
+    },
+});
 /**
  * Секция страницы. На десктопе между секциями отображается разделитель или отступ. На мобильных разрешениях секции оформляются как карточки.
  *
@@ -16,7 +26,6 @@ const styles_1 = require("./styles");
  *   </PageLayoutSectionContainer>
  * } />
  */
-exports.PageLayoutSection = (0, react_1.forwardRef)((props, ref) => {
-    const { children, className } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.Section, { className: className, ref: ref, children: (0, jsx_runtime_1.jsx)(styles_1.SectionInner, { children: children }) }));
+exports.PageLayoutSection = (0, react_1.forwardRef)(({ children, className, isNoMobileSidePadding = false }, ref) => {
+    return ((0, jsx_runtime_1.jsx)(styles_1.Section, { className: (0, classNames_1.classNames)(className, constants_1.pageLayoutSectionClassnames.root), ref: ref, children: (0, jsx_runtime_1.jsx)(styles_1.SectionWrapper, { className: sectionWrapperCva({ isNoMobileSidePadding }), children: children }) }));
 });

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

@@ -0,0 +1,5 @@
+export declare const pageLayoutSectionClassnames: {
+    root: string;
+    wrapper: string;
+    isNoMobileSidePadding: string;
+};

package/node/components/PageLayoutSection/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageLayoutSectionClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.pageLayoutSectionClassnames = {
+    root: (0, createUIKitClassname_1.createUIKitClassname)('page-layout__section'),
+    wrapper: (0, createUIKitClassname_1.createUIKitClassname)('page-layout__section-wrapper'),
+    isNoMobileSidePadding: (0, createUIKitClassname_1.createUIKitClassname)('page-layout__section-wrapper_no-mobile-side-padding'),
+};

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

@@ -3,7 +3,7 @@ export declare const Section: import("@emotion/styled/dist/declarations/src/type
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const SectionInner: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+export declare const SectionWrapper: 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>, {}>;

package/node/components/PageLayoutSection/styles.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionInner = exports.Section = void 0;
+exports.SectionWrapper = exports.Section = void 0;
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 exports.Section = styled_1.styled.section `
   ${({ theme }) => theme.breakpoints.down('sm')} {
     margin: ${({ theme }) => theme.spacing(0, 4)};
@@ -11,7 +12,7 @@ exports.Section = styled_1.styled.section `
     border-radius: ${({ theme }) => theme.shape.medium};
   }
 `;
-exports.SectionInner = styled_1.styled.div `
+exports.SectionWrapper = styled_1.styled.div `
   padding: ${({ theme }) => theme.spacing(0, 6)};
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
@@ -20,5 +21,9 @@ exports.SectionInner = styled_1.styled.div `
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     padding: ${({ theme }) => theme.spacing(4)};
+
+    &.${constants_1.pageLayoutSectionClassnames.isNoMobileSidePadding} {
+      padding: ${({ theme }) => theme.spacing(4, 0)};
+    }
   }
 `;

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

@@ -13,9 +13,13 @@ type Props = {
      * Используется вместе с хуком `useLoadingState`
      */
     isShowLoader?: boolean;
+    /**
+     * Класс применяемый для корневого элемента
+     */
+    className?: string;
 };
 /**
  * Дефолтный лоадер загрузки
  */
-export declare const LoadingPlaceholder: ({ title, content, isShowLoader, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingPlaceholder: ({ title, content, isShowLoader, className, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/node/components/placeholders/LoadingPlaceholder/LoadingPlaceholder.js

@@ -4,18 +4,19 @@ exports.LoadingPlaceholder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Loader_1 = require("../../Loader");
 const Typography_1 = require("../../Typography");
+const classNames_1 = require("../../utils/classNames");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 /**
  * Дефолтный лоадер загрузки
  */
-const LoadingPlaceholder = ({ title, content, isShowLoader = true, }) => {
+const LoadingPlaceholder = ({ title, content, isShowLoader = true, className, }) => {
     if (!isShowLoader) {
-        return (0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, { className: constants_1.loadingPlaceholderClassnames.root });
+        return ((0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, { className: (0, classNames_1.classNames)(constants_1.loadingPlaceholderClassnames.root, className) }));
     }
     if (content) {
-        return ((0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, { className: constants_1.loadingPlaceholderClassnames.root, children: content }));
+        return ((0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, { className: (0, classNames_1.classNames)(constants_1.loadingPlaceholderClassnames.root, className), children: content }));
     }
-    return ((0, jsx_runtime_1.jsxs)(styles_1.LoadingContainer, { className: constants_1.loadingPlaceholderClassnames.root, children: [(0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), title && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h4", children: title })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.LoadingContainer, { className: (0, classNames_1.classNames)(constants_1.loadingPlaceholderClassnames.root, className), children: [(0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), title && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h4", children: title })] }));
 };
 exports.LoadingPlaceholder = LoadingPlaceholder;

package/package.json

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

package/components/DataGrid/useLogic/hooks/useClassnames/index.d.ts

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

package/components/DataGrid/useLogic/hooks/useClassnames/index.js

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

package/components/DataGrid/useLogic/hooks/useClassnames/useClassnames.d.ts

@@ -1,12 +0,0 @@
-type UseClassnamesParams = {
-    isDataGridDisabled?: boolean;
-    dataGridClassName?: string;
-    hasPinnedColumns?: boolean;
-    isNoData?: boolean;
-};
-export declare const useClassnames: ({ isDataGridDisabled, dataGridClassName, hasPinnedColumns, isNoData, }: UseClassnamesParams) => {
-    pinnedSectionsClassname: string;
-    dataGridClassname: string;
-    bodyClassName: string;
-};
-export {};

package/components/DataGrid/useLogic/hooks/useClassnames/useClassnames.js

@@ -1,14 +0,0 @@
-import { classNames } from '../../../../utils/classNames';
-import { dataGridClassnames } from '../../../constants';
-export const useClassnames = ({ isDataGridDisabled, dataGridClassName, hasPinnedColumns, isNoData, }) => {
-    const pinnedSectionsClassname = classNames(dataGridClassnames.pinnedSections, {
-        [dataGridClassnames.disabled]: isDataGridDisabled,
-    });
-    const dataGridClassname = classNames(dataGridClassnames.root, dataGridClassName, {
-        [dataGridClassnames.dataGridHasPinnedSections]: hasPinnedColumns,
-    });
-    const bodyClassName = classNames(dataGridClassnames.body, {
-        [dataGridClassnames.bodyEmpty]: isNoData,
-    });
-    return { pinnedSectionsClassname, dataGridClassname, bodyClassName };
-};

package/node/components/DataGrid/useLogic/hooks/useClassnames/index.d.ts

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

package/node/components/DataGrid/useLogic/hooks/useClassnames/useClassnames.d.ts

@@ -1,12 +0,0 @@
-type UseClassnamesParams = {
-    isDataGridDisabled?: boolean;
-    dataGridClassName?: string;
-    hasPinnedColumns?: boolean;
-    isNoData?: boolean;
-};
-export declare const useClassnames: ({ isDataGridDisabled, dataGridClassName, hasPinnedColumns, isNoData, }: UseClassnamesParams) => {
-    pinnedSectionsClassname: string;
-    dataGridClassname: string;
-    bodyClassName: string;
-};
-export {};

package/node/components/DataGrid/useLogic/hooks/useClassnames/useClassnames.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useClassnames = void 0;
-const classNames_1 = require("../../../../utils/classNames");
-const constants_1 = require("../../../constants");
-const useClassnames = ({ isDataGridDisabled, dataGridClassName, hasPinnedColumns, isNoData, }) => {
-    const pinnedSectionsClassname = (0, classNames_1.classNames)(constants_1.dataGridClassnames.pinnedSections, {
-        [constants_1.dataGridClassnames.disabled]: isDataGridDisabled,
-    });
-    const dataGridClassname = (0, classNames_1.classNames)(constants_1.dataGridClassnames.root, dataGridClassName, {
-        [constants_1.dataGridClassnames.dataGridHasPinnedSections]: hasPinnedColumns,
-    });
-    const bodyClassName = (0, classNames_1.classNames)(constants_1.dataGridClassnames.body, {
-        [constants_1.dataGridClassnames.bodyEmpty]: isNoData,
-    });
-    return { pinnedSectionsClassname, dataGridClassname, bodyClassName };
-};
-exports.useClassnames = useClassnames;