@astral/ui 4.92.2 → 4.93.0

package/node/components/TreeLikeList/TreeItem/useLogic/useLogic.js

@@ -3,10 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useToggle_1 = require("../../../useToggle");
+const useViewportType_1 = require("../../../useViewportType");
 const utils_1 = require("./utils");
 const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isInitialExpanded, expandedLevel, chainsToSelectedItem = [], disabledItems, onChange, isObjectMode, }) => {
     const { id, children } = item;
-    const [isTooltipOpen, openTooltip, closeTooltip] = (0, useToggle_1.useToggle)();
+    const [isConfirmChildrenOpen, openConfirmChildren, closeConfirmChildren] = (0, useToggle_1.useToggle)();
+    const [isMobilePanelOpen, setIsMobilePanelOpen] = (0, react_1.useState)(false);
+    const itemRef = (0, react_1.useRef)(null);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const childrenIds = (0, react_1.useMemo)(() => (0, utils_1.getAllChildrenId)(children, disabledItems), [children, disabledItems]);
     const isSelected = (0, utils_1.checkIsSelected)(value, id);
     const flatChainsToSelectedItem = (0, react_1.useMemo)(() => chainsToSelectedItem?.reduce((acc, chain) => acc.concat(chain), []), [chainsToSelectedItem]);
@@ -16,6 +20,16 @@ const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isIniti
     const isDisabled = Boolean(disabledItem);
     const disabledReason = disabledItem?.disabledReason;
     const nextLevel = level + 1;
+    const toggleConfirmChildren = (isOpen) => {
+        if (!isConfirmChildrenSelection) {
+            return;
+        }
+        if (isOpen) {
+            openConfirmChildren();
+            return;
+        }
+        closeConfirmChildren();
+    };
     const handleChange = () => {
         if (isDisabled) {
             return;
@@ -24,9 +38,7 @@ const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isIniti
         // Сбрасываем значение
         if (currentValueIds.includes(id)) {
             const hasSelectedChildren = childrenIds.some((childrenId) => currentValueIds.includes(childrenId));
-            if (isConfirmChildrenSelection && hasSelectedChildren) {
-                openTooltip();
-            }
+            toggleConfirmChildren(hasSelectedChildren);
             const newValue = (0, utils_1.removeItem)(value, id);
             return onChange(newValue);
         }
@@ -34,11 +46,14 @@ const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isIniti
         const newValue = (0, utils_1.addItem)(value, item, isObjectMode);
         onChange(newValue);
         const isAllChildrenSelected = childrenIds.every((childrenId) => currentValueIds.includes(childrenId));
-        if (isConfirmChildrenSelection && !isAllChildrenSelected) {
-            openTooltip();
-        }
+        toggleConfirmChildren(!isAllChildrenSelected);
     };
-    const handleConfirmChildrenSelection = () => {
+    const handleMobileOpenChange = (isOpen) => {
+        setIsMobilePanelOpen(isOpen);
+        closeConfirmChildren();
+    };
+    const handleConfirmChildrenSelection = (event) => {
+        event.stopPropagation();
         const currentValueIds = (0, utils_1.getCurrentValueIds)(value);
         if (isSelected) {
             // Элемент выбран - выбираем все дочерние элементы
@@ -52,7 +67,7 @@ const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isIniti
             const newValue = (0, utils_1.removeItemsByIds)(value, idsToRemove);
             onChange(newValue);
         }
-        closeTooltip();
+        closeConfirmChildren();
     };
     /**
      * Предотвращаем всплытие события, так как клик в области чекбокса или label вызывает обработчик на уровне всего item
@@ -60,25 +75,32 @@ const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isIniti
     const handleClick = (event) => {
         event.stopPropagation();
     };
+    const confirmChildrenExcludeNodes = (0, react_1.useMemo)(() => [itemRef], []);
     return {
         isSelected,
         isDefaultExpanded,
         isDisabled,
         disabledReason,
         nextLevel,
+        confirmChildrenExcludeNodes,
+        itemRef,
         formControlLabelProps: {
             disabled: isDisabled,
             onChange: handleChange,
             onClick: handleClick,
         },
-        tooltipProps: {
-            open: isTooltipOpen,
-            onClose: closeTooltip,
+        confirmChildrenProps: {
+            open: isConfirmChildrenOpen,
+            onClose: closeConfirmChildren,
         },
         confirmChildrenButtonProps: {
             onClick: handleConfirmChildrenSelection,
         },
         handleChange,
+        handleMobileOpenChange,
+        isMobile,
+        isMobilePanelOpen,
+        isConfirmChildrenAvailable: isMobile && isConfirmChildrenSelection,
     };
 };
 exports.useLogic = useLogic;

package/node/components/TreeLikeList/TreeLikeList.js

@@ -11,6 +11,6 @@ const INITIAL_LEVEL = 0;
 const TreeLikeList = (props) => {
     const { listProps, itemProps } = (0, useLogic_1.useLogic)(props);
     const { data, className, expandedLevel = 10, disabledItems, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.List, { className: (0, cn_1.cn)(className, Tree_1.treeListClassnames.list), ...listProps, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ListWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.List, { className: (0, cn_1.cn)(className, Tree_1.treeListClassnames.list), ...listProps, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }) }));
 };
 exports.TreeLikeList = TreeLikeList;

package/node/components/TreeLikeList/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/TreeLikeList/styles.js

@@ -1,11 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InnerList = exports.List = void 0;
+exports.InnerList = 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;
+    z-index: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    min-height: 0;
+
+    overflow: hidden;
+
+    transform: translateZ(0);
+  }
+`;
 exports.List = styled_1.styled.ul `
   ${mixins_1.listContainer};
   overflow: hidden;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-grow: 1;
+    min-height: 0;
+
+    overflow-y: auto;
+  }
 `;
 exports.InnerList = (0, styled_1.styled)(exports.List) `
   overflow: unset;

package/package.json

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