@astral/ui 4.92.3 → 4.93.0

package/node/components/Tree/MultipleTreeList/TreeItem/TreeItem.js

@@ -6,15 +6,12 @@ const FormControlLabel_1 = require("../../../FormControlLabel");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const TreeItem = (props) => {
-    const { isSelected, isIndeterminate, isDefaultExpanded, disabledReason, isDisabled, handleChange, } = (0, useLogic_1.useLogic)(props);
+    const { isSelected, isIndeterminate, isDefaultExpanded, disabledReason, isDisabled, handleChange, itemLabel, handleClick, } = (0, useLogic_1.useLogic)(props);
     const { level, renderItem, value, isInitialExpanded, expandedLevel, disabledItems, onChange, item, isObjectMode, } = props;
-    const { id, label, note, children = [], options } = item;
-    const handleClick = (event) => {
-        event.stopPropagation();
-    };
+    const { id, note, children = [], options } = item;
     if (children.length) {
-        return ((0, jsx_runtime_1.jsx)(styles_1.StyledTreeItem, { isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: (0, jsx_runtime_1.jsx)(FormControlLabel_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected, indeterminate: isSelected ? false : isIndeterminate }), label: renderItem ? renderItem({ label, note, id }) : label, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), level: level, onClick: handleChange, children: (0, jsx_runtime_1.jsx)(styles_1.List, { children: children.map((child) => ((0, jsx_runtime_1.jsx)(exports.TreeItem, { item: child, renderItem: renderItem, level: level + 1, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, disabledItems: disabledItems, value: value, onChange: onChange, isObjectMode: isObjectMode }, child.id))) }) }));
+        return ((0, jsx_runtime_1.jsx)(styles_1.StyledTreeItem, { id: id, isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: (0, jsx_runtime_1.jsx)(FormControlLabel_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected, indeterminate: isSelected ? false : isIndeterminate }), label: itemLabel, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), mobileHeaderLabel: itemLabel, mobileHeaderControl: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected, indeterminate: isSelected ? false : isIndeterminate, disabled: isDisabled, onChange: handleChange }), level: level, onClick: handleChange, children: (0, jsx_runtime_1.jsx)(styles_1.List, { children: children.map((child) => ((0, jsx_runtime_1.jsx)(exports.TreeItem, { item: child, renderItem: renderItem, level: level + 1, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, disabledItems: disabledItems, value: value, onChange: onChange, isObjectMode: isObjectMode }, child.id))) }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTreeItem, { isSelected: isSelected, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: (0, jsx_runtime_1.jsx)(FormControlLabel_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected }), label: renderItem ? renderItem({ label, note, id }) : label, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), level: level, onClick: handleChange }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTreeItem, { id: id, isSelected: isSelected, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: (0, jsx_runtime_1.jsx)(FormControlLabel_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected }), label: itemLabel, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), level: level, onClick: handleChange }));
 };
 exports.TreeItem = TreeItem;

package/node/components/Tree/MultipleTreeList/TreeItem/styles.d.ts

@@ -14,23 +14,7 @@ export declare const StyledCheckbox: import("@emotion/styled/dist/declarations/s
 } & import("react").RefAttributes<HTMLInputElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledTreeItem: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
-    className?: string | undefined;
-    prefixId?: string | undefined;
-    isSelected: boolean;
-    label: import("react").ReactNode;
-    note?: import("react").ReactNode;
-    renderItem?: import("../../..").SyncFunctionComponent<Omit<import("../..").TreeListData, "children">> | undefined;
-    children?: import("react").ReactNode;
-    component?: import("react").ElementType | undefined;
-    level: number;
-    isDisabled?: boolean | undefined;
-    disabledReason?: string | undefined;
-    isNotBlockingExpandList?: boolean | undefined;
-    isDefaultExpanded?: boolean | undefined;
-    isForceExpanded?: boolean | undefined;
-    onClick?: ((event: import("react").SyntheticEvent<Element, Event>) => void) | undefined;
-} & Omit<any, ""> & {
+export declare const StyledTreeItem: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../TreeItem").TreeItemProps, "ref"> & import("react").RefAttributes<HTMLLIElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const List: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{

package/node/components/Tree/MultipleTreeList/TreeItem/styles.js

@@ -13,9 +13,15 @@ exports.StyledCheckbox = (0, styled_1.styled)(Checkbox_1.Checkbox) `
   & > .${Checkbox_1.checkboxClassnames.input}, .${Checkbox_1.checkboxClassnames.iconWrapper} {
     width: 32px;
     height: 16px;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 20px;
+    width: ${Checkbox_1.MOBILE_CHECKBOX_SIZE};
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${Checkbox_1.checkboxClassnames.iconWrapper}, & .${Checkbox_1.checkboxClassnames.input} {
       height: 20px;
+      width: ${Checkbox_1.MOBILE_CHECKBOX_SIZE};
     }
   }
 `;
@@ -30,6 +36,17 @@ exports.StyledTreeItem = (0, styled_1.styled)(TreeItem_1.TreeItem) `
     /* Добавляем к отступу ширину контейнера с чекбоксом */
     margin-left: ${Checkbox_1.CHECKBOX_SIZE};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${FormControlLabel_1.formControlLabelClasses.root} {
+      margin-left: 0;
+      gap: ${({ theme }) => theme.spacing(1)};
+    }
+
+    & .${TreeItem_1.treeClassnames.note} {
+      margin-left: ${({ theme }) => `calc(${theme.spacing(1)} + ${Checkbox_1.MOBILE_CHECKBOX_SIZE})`};
+    }
+  }
 `;
 exports.List = styled_1.styled.ul `
   ${mixins_1.listContainer};

package/node/components/Tree/MultipleTreeList/TreeItem/useLogic/useLogic.d.ts

@@ -1,12 +1,15 @@
+import { type SyntheticEvent } from 'react';
 import type { MultipleValue } from '../../types';
 import { type TreeItemProps } from '../types';
 type UseLogicProps<TValue extends MultipleValue = string[]> = TreeItemProps<TValue>;
-export declare const useLogic: <TValue extends MultipleValue = string[]>({ item, value, level, isInitialExpanded, expandedLevel, disabledItems, onChange, isObjectMode, }: UseLogicProps<TValue>) => {
+export declare const useLogic: <TValue extends MultipleValue = string[]>({ item, value, level, renderItem, isInitialExpanded, expandedLevel, disabledItems, onChange, isObjectMode, }: UseLogicProps<TValue>) => {
     isSelected: boolean;
     isIndeterminate: boolean;
     isDefaultExpanded: boolean | undefined;
     isDisabled: boolean;
     disabledReason: string | undefined;
     handleChange: () => void;
+    itemLabel: string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
+    handleClick: (event: SyntheticEvent) => void;
 };
 export {};

package/node/components/Tree/MultipleTreeList/TreeItem/useLogic/useLogic.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const utils_1 = require("./utils");
-const useLogic = ({ item, value = [], level, isInitialExpanded, expandedLevel, disabledItems, onChange, isObjectMode, }) => {
-    const { id, children } = item;
+const useLogic = ({ item, value = [], level, renderItem, isInitialExpanded, expandedLevel, disabledItems, onChange, isObjectMode, }) => {
+    const { id, children, label, note } = item;
     const childrenIds = (0, react_1.useMemo)(() => (0, utils_1.getAllChildrenId)(children, disabledItems), [children, disabledItems]);
     const isSelected = (0, utils_1.checkIsSelected)(value, id);
     const isIndeterminate = (0, utils_1.checkIsIndeterminate)(value, childrenIds);
@@ -43,6 +43,10 @@ const useLogic = ({ item, value = [], level, isInitialExpanded, expandedLevel, d
         const newValue = value ? [...value, ...itemsToAdd] : itemsToAdd;
         onChange(newValue);
     };
+    const itemLabel = renderItem ? renderItem({ label, note, id }) : label;
+    const handleClick = (event) => {
+        event.stopPropagation();
+    };
     return {
         isSelected,
         isIndeterminate,
@@ -50,6 +54,8 @@ const useLogic = ({ item, value = [], level, isInitialExpanded, expandedLevel, d
         isDisabled,
         disabledReason,
         handleChange,
+        itemLabel,
+        handleClick,
     };
 };
 exports.useLogic = useLogic;

package/node/components/Tree/MultipleTreeList/styles.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
+export declare const ListWrapper: 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 List: 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;

package/node/components/Tree/MultipleTreeList/styles.js

@@ -1,9 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.List = void 0;
+exports.List = exports.ListWrapper = void 0;
 const styled_1 = require("../../styled");
 const mixins_1 = require("../../styled/mixins");
+exports.ListWrapper = styled_1.styled.div `
+  display: contents;
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    min-height: 0;
+
+    overflow: hidden;
+
+    transform: translateZ(0);
+  }
+`;
 exports.List = styled_1.styled.ul `
   ${mixins_1.listContainer};
+  position: relative;
   overflow: hidden;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-grow: 1;
+    min-height: 0;
+
+    overflow-y: auto;
+  }
 `;

package/node/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanel.d.ts

@@ -0,0 +1,2 @@
+import { type MobileSlidePanelProps } from './types';
+export declare const MobileSlidePanel: ({ onClose, ...restProps }: MobileSlidePanelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileSlidePanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MobileSlidePanelContent_1 = require("./MobileSlidePanelContent");
+const MobileSlidePanelContext_1 = require("./MobileSlidePanelContext");
+const useLogic_1 = require("./useLogic");
+const MobileSlidePanel = ({ onClose, ...restProps }) => {
+    const { parentContext, register, closeTop, setHeader, removeHeader, activeHeader, } = (0, useLogic_1.useLogic)();
+    if (parentContext) {
+        return (0, jsx_runtime_1.jsx)(MobileSlidePanelContent_1.MobileSlidePanelContent, { onClose: onClose, ...restProps });
+    }
+    return ((0, jsx_runtime_1.jsx)(MobileSlidePanelContext_1.MobileSlidePanelContextProvider, { register: register, closeTop: closeTop, setHeader: setHeader, removeHeader: removeHeader, children: (0, jsx_runtime_1.jsx)(MobileSlidePanelContent_1.MobileSlidePanelContent, { onClose: onClose, ...restProps, isRoot: true, activeHeader: activeHeader }) }));
+};
+exports.MobileSlidePanel = MobileSlidePanel;

package/node/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/MobileSlidePanelContent.d.ts

@@ -0,0 +1,2 @@
+import { type MobileSlidePanelContentProps } from './types';
+export declare const MobileSlidePanelContent: ({ isRoot, children, isOpen, ...params }: MobileSlidePanelContentProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileSlidePanelContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ChevronLOutlineMd_1 = require("../../../../../icons/ChevronLOutlineMd");
+const cva_1 = require("../../../../utils/cva");
+const constants_1 = require("../../constants");
+const constants_2 = require("../constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const mobilePanelCva = (0, cva_1.cva)(constants_2.mobileSlidePanelClassnames.root, {
+    variants: {
+        hasParentContext: {
+            true: constants_2.mobileSlidePanelClassnames.nested,
+        },
+    },
+});
+const headerCva = (0, cva_1.cva)(constants_2.mobileSlidePanelClassnames.header, {
+    variants: {
+        isSelected: {
+            true: constants_1.treeClassnames.selected,
+        },
+        isDisabled: {
+            true: constants_1.treeClassnames.disabled,
+        },
+    },
+});
+const parentContentCva = (0, cva_1.cva)(constants_2.mobileSlidePanelClassnames.headerParent, {
+    variants: {
+        isDisabled: {
+            true: constants_1.treeClassnames.disabled,
+        },
+    },
+});
+const slidePanelCva = (0, cva_1.cva)(constants_2.mobileSlidePanelClassnames.slidePanel, {
+    variants: {
+        isOpen: {
+            true: constants_1.treeClassnames.open,
+        },
+    },
+});
+const MobileSlidePanelContent = ({ isRoot = false, children, isOpen, ...params }) => {
+    const { isMobileMounted, closeTop, parentLabel, parentNote, parentControl, parentAdditionalContent, isParentSelected, isParentDisabled, handleParentClick, } = (0, useLogic_1.useLogic)({ isOpen, ...params });
+    if (!isMobileMounted) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(styles_1.MobilePanel, { className: mobilePanelCva({ hasParentContext: !isRoot }), children: (0, jsx_runtime_1.jsxs)(styles_1.MobilePanelSlide, { className: slidePanelCva({ isOpen }), children: [isRoot && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { className: headerCva({
+                                isSelected: isParentSelected,
+                                isDisabled: isParentDisabled,
+                            }), children: [(0, jsx_runtime_1.jsx)(styles_1.BackButton, { className: constants_2.mobileSlidePanelClassnames.backButton, variant: "text", "aria-label": "\u041D\u0430\u0437\u0430\u0434", onClick: closeTop, children: (0, jsx_runtime_1.jsx)(ChevronLOutlineMd_1.ChevronLOutlineMd, {}) }), (0, jsx_runtime_1.jsxs)(styles_1.ParentContent, { className: parentContentCva({
+                                        isDisabled: isParentDisabled,
+                                    }), onClick: handleParentClick, children: [(0, jsx_runtime_1.jsx)(styles_1.ParentLabel, { component: "div", children: parentLabel }), parentNote && ((0, jsx_runtime_1.jsx)(styles_1.ParentNote, { variant: "caption", color: "textSecondary", children: parentNote }))] }), parentControl && ((0, jsx_runtime_1.jsx)(styles_1.HeaderControl, { className: constants_2.mobileSlidePanelClassnames.headerControl, children: parentControl }))] }), parentAdditionalContent && ((0, jsx_runtime_1.jsx)(styles_1.HeaderAdditionalContent, { className: constants_2.mobileSlidePanelClassnames.headerAdditionalContent, children: parentAdditionalContent }))] })), (0, jsx_runtime_1.jsx)(styles_1.MobilePanelContentWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.MobilePanelScrollArea, { children: children }) })] }) }));
+};
+exports.MobileSlidePanelContent = MobileSlidePanelContent;

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

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

package/node/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/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("./MobileSlidePanelContent"), exports);