@astral/ui 4.100.0 → 4.102.0

package/node/components/DashboardSidebarPopover/SidebarPopoverItem/styles.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ItemWrapper = exports.IconWrapper = exports.Wrapper = exports.Item = void 0;
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Item = styled_1.styled.div `
   pointer-events: ${({ $isDisabled }) => ($isDisabled ? 'none' : 'auto')};
 
@@ -17,8 +18,10 @@ exports.Item = styled_1.styled.div `
     });
 }};
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &:active {
@@ -27,7 +30,7 @@ exports.Item = styled_1.styled.div `
 
   /* Причина игнора: Не критично для отображения */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  &:has(.${constants_1.sidebarPopoverItemClassnames.content}:focus-visible) {
+  &:has(.${constants_2.sidebarPopoverItemClassnames.content}:focus-visible) {
     border-radius: ${({ theme }) => theme.shape.small};
     outline: 2px solid ${({ theme }) => theme.palette.components.focused};
     outline-offset: -2px;

package/node/components/DataGrid/Row/styles.js

@@ -2,24 +2,25 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupedColumnLabel = exports.BottomDrawerContent = exports.ChevronIcon = exports.CollapseButton = exports.CollapseCell = exports.CheckboxCell = exports.CellStyled = exports.ContentWrapper = exports.Wrapper = void 0;
 const ChevronROutlineMd_1 = require("../../../icons/ChevronROutlineMd");
+const constants_1 = require("../../constants");
 const IconButton_1 = require("../../IconButton");
 const styled_1 = require("../../styled");
 const Typography_1 = require("../../Typography");
 const Cell_1 = require("../Cell");
-const constants_1 = require("../constants");
-const constants_2 = require("./constants");
+const constants_2 = require("../constants");
+const constants_3 = require("./constants");
 exports.Wrapper = styled_1.styled.li `
   --level: 0;
   position: relative;
 
   &:not(:last-of-type)::before,
-  &.${constants_2.dataGridRowClassnames.hidden}::before {
+  &.${constants_3.dataGridRowClassnames.hidden}::before {
     content: '';
 
     position: absolute;
     z-index: 1;
     top: 0;
-    transform: translateX(calc(${constants_1.ROOT_ACTION_CELL_WIDTH}px * var(--level) - ${constants_1.TREE_LINE_WIDTH}px));
+    transform: translateX(calc(${constants_2.ROOT_ACTION_CELL_WIDTH}px * var(--level) - ${constants_2.TREE_LINE_WIDTH}px));
 
     display: none;
 
@@ -30,8 +31,8 @@ exports.Wrapper = styled_1.styled.li `
   }
 
   ${({ theme }) => theme.breakpoints.up('mobile')} {
-    &.${constants_2.dataGridRowClassnames.showConnector}::before,
-    & .${constants_2.dataGridRowContentClassnames.root}::before {
+    &.${constants_3.dataGridRowClassnames.showConnector}::before,
+    & .${constants_3.dataGridRowContentClassnames.root}::before {
       display: block;
     }
   }
@@ -49,10 +50,10 @@ exports.Wrapper = styled_1.styled.li `
       padding-top: ${({ theme }) => theme.spacing(1)};
     }
 
-    &.${constants_2.dataGridRowClassnames.mobileVariantCards} {
+    &.${constants_3.dataGridRowClassnames.mobileVariantCards} {
       border-bottom: none;
 
-      &:not(.${constants_2.dataGridRowClassnames.nestedChildren}) {
+      &:not(.${constants_3.dataGridRowClassnames.nestedChildren}) {
         padding: ${({ theme }) => theme.spacing(5, 4, 4)};
 
         background-color: ${({ theme }) => theme.palette.background.default};
@@ -61,13 +62,13 @@ exports.Wrapper = styled_1.styled.li `
       }
     }
 
-    &.${constants_2.dataGridRowClassnames.hasNestedChildren} {
-      :not(.${constants_2.dataGridRowClassnames.nestedChildren}) .${Cell_1.dataGridCellClassnames.root}:last-of-type {
+    &.${constants_3.dataGridRowClassnames.hasNestedChildren} {
+      :not(.${constants_3.dataGridRowClassnames.nestedChildren}) .${Cell_1.dataGridCellClassnames.root}:last-of-type {
         padding-bottom: ${({ theme }) => theme.spacing(3)};
       }
 
       /* Ко всем ячейкам кроме первой применяем декоративный элемент слева и добавляем отступы для выравнивания с NestedChildren */
-      &:not(.${constants_2.dataGridRowClassnames.nestedChildren}) > .${constants_2.dataGridRowContentClassnames.root} .${Cell_1.dataGridCellClassnames.root}:not(.${constants_2.dataGridRowCellClassnames.firstCell}) {
+      &:not(.${constants_3.dataGridRowClassnames.nestedChildren}) > .${constants_3.dataGridRowContentClassnames.root} .${Cell_1.dataGridCellClassnames.root}:not(.${constants_3.dataGridRowCellClassnames.firstCell}) {
         position: relative;
 
         margin-top: 0;
@@ -89,8 +90,8 @@ exports.Wrapper = styled_1.styled.li `
       }
 
       /* L-коннектор применяем ко 2 ячейки основной строки */
-      &:not(.${constants_2.dataGridRowClassnames.nestedChildren})
-       > .${constants_2.dataGridRowContentClassnames.root} .${Cell_1.dataGridCellClassnames.root}.${constants_2.dataGridRowCellClassnames.firstCell} 
+      &:not(.${constants_3.dataGridRowClassnames.nestedChildren})
+       > .${constants_3.dataGridRowContentClassnames.root} .${Cell_1.dataGridCellClassnames.root}.${constants_3.dataGridRowCellClassnames.firstCell} 
         + .${Cell_1.dataGridCellClassnames.root} {
         &::after {
           content: '';
@@ -99,7 +100,7 @@ exports.Wrapper = styled_1.styled.li `
           top: ${({ theme }) => theme.spacing(3)};
           left: 0;
 
-          width: ${constants_1.MOBILE_TREE_LINE_WIDTH}px;
+          width: ${constants_2.MOBILE_TREE_LINE_WIDTH}px;
           height: ${({ theme }) => theme.spacing(2)};
 
           border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
@@ -109,7 +110,7 @@ exports.Wrapper = styled_1.styled.li `
       }  
     }
 
-    &.${constants_2.dataGridRowClassnames.nestedChildren} {
+    &.${constants_3.dataGridRowClassnames.nestedChildren} {
       padding: ${({ theme }) => theme.spacing(3, 0, 3, 5)};
 
       &::before {
@@ -147,9 +148,9 @@ exports.ContentWrapper = styled_1.styled.div `
 
     position: absolute;
     top: 0;
-    transform: translateX(calc(${constants_1.ROOT_ACTION_CELL_WIDTH}px * var(--level) - ${constants_1.TREE_LINE_WIDTH}px));
+    transform: translateX(calc(${constants_2.ROOT_ACTION_CELL_WIDTH}px * var(--level) - ${constants_2.TREE_LINE_WIDTH}px));
 
-    width: ${constants_1.TREE_LINE_WIDTH}px;
+    width: ${constants_2.TREE_LINE_WIDTH}px;
     height: 50%;
 
     border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
@@ -162,41 +163,43 @@ exports.ContentWrapper = styled_1.styled.div `
   }
 
   /* L-коннектор для nestedChildren на мобильных устройствах */
-  .${constants_2.dataGridRowClassnames.nestedChildren} &::before {
+  .${constants_3.dataGridRowClassnames.nestedChildren} &::before {
     ${({ theme }) => theme.breakpoints.down('mobile')} {
       left: -20px;
       transform: none;
 
       display: block;
 
-      width: ${constants_1.MOBILE_TREE_LINE_WIDTH}px;
+      width: ${constants_2.MOBILE_TREE_LINE_WIDTH}px;
 
       /* Высота 8px для выравнивания с названием колонки первой ячейки */
       height: ${({ theme }) => theme.spacing(2)};
     }
   }
 
-  &.${constants_2.dataGridRowContentClassnames.active} {
+  &.${constants_3.dataGridRowContentClassnames.active} {
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
 
-    &.${constants_2.dataGridRowContentClassnames.active} {
-      background-color: ${({ theme }) => theme.palette.primary[100]};
-    }
+      &.${constants_3.dataGridRowContentClassnames.active} {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
 
-    &.${constants_2.dataGridRowContentClassnames.hovered} {
-      cursor: pointer;
+      &.${constants_3.dataGridRowContentClassnames.hovered} {
+        cursor: pointer;
+      }
     }
   }
 
 
-  &.${constants_2.dataGridRowClassnames.hover} {
+  &.${constants_3.dataGridRowClassnames.hover} {
     background-color: ${({ theme }) => theme.palette.background.elementHover};
 
-    &.${constants_2.dataGridRowContentClassnames.hovered} {
+    &.${constants_3.dataGridRowContentClassnames.hovered} {
       cursor: pointer;
     }
   }
@@ -204,24 +207,14 @@ exports.ContentWrapper = styled_1.styled.div `
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     grid-template-columns: 1fr;
 
-    &.${constants_2.dataGridRowContentClassnames.active} {
-      background-color: transparent;
-    }
-
-    &:hover, &.${constants_2.dataGridRowClassnames.hover} {
-      cursor: initial;
-
+    &.${constants_3.dataGridRowContentClassnames.active} {
       background-color: transparent;
-
-      &.${constants_2.dataGridRowContentClassnames.active} {
-        background-color: transparent;
-      }
     }
   }
 `;
 exports.CellStyled = (0, styled_1.styled)(Cell_1.Cell) `
   &:first-of-type {
-    margin-left: calc(var(--level) * ${constants_1.ROOT_ACTION_CELL_WIDTH}px);
+    margin-left: calc(var(--level) * ${constants_2.ROOT_ACTION_CELL_WIDTH}px);
   }
 `;
 exports.CheckboxCell = styled_1.styled.div `
@@ -230,14 +223,14 @@ exports.CheckboxCell = styled_1.styled.div `
   align-self: center;
   justify-content: center;
 
-  width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;
+  width: ${constants_2.ROOT_ACTION_CELL_WIDTH}px;
 `;
 exports.CollapseCell = styled_1.styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
 
-  width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;
+  width: ${constants_2.ROOT_ACTION_CELL_WIDTH}px;
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
@@ -249,8 +242,10 @@ exports.CollapseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
 
   color: inherit;
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.grey[300]};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.grey[300]};
+    }
   }
 `;
 exports.ChevronIcon = (0, styled_1.styled)(ChevronROutlineMd_1.ChevronROutlineMd, {
@@ -276,7 +271,7 @@ exports.GroupedColumnLabel = (0, styled_1.styled)(Typography_1.Typography) `
 
     margin-top: ${({ theme }) => theme.spacing(3)};
 
-    &.${constants_2.dataGridGroupedColumnLabelClassnames.hidden} {
+    &.${constants_3.dataGridGroupedColumnLabelClassnames.hidden} {
       display: none;
     }
   }

package/node/components/DataGrid/RowBase/styles.js

@@ -1,16 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BottomDrawerContent = exports.ContentWrapper = exports.Wrapper = exports.CheckboxCell = void 0;
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
-const constants_1 = require("../constants");
-const constants_2 = require("./constants");
+const constants_2 = require("../constants");
+const constants_3 = require("./constants");
 exports.CheckboxCell = styled_1.styled.div `
   display: flex;
   align-items: center;
   align-self: center;
   justify-content: center;
 
-  width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;
+  width: ${constants_2.ROOT_ACTION_CELL_WIDTH}px;
 `;
 exports.Wrapper = styled_1.styled.li `
   --row-base-grid-columns: 1fr;
@@ -30,7 +31,7 @@ exports.Wrapper = styled_1.styled.li `
       padding-top: ${({ theme }) => theme.spacing(1)};
     }
 
-    &.${constants_2.dataGridRowBaseClassnames.mobileVariantCards} {
+    &.${constants_3.dataGridRowBaseClassnames.mobileVariantCards} {
       padding: ${({ theme }) => theme.spacing(5, 4, 4)};
 
       background-color: ${({ theme }) => theme.palette.background.default};
@@ -49,38 +50,30 @@ exports.ContentWrapper = styled_1.styled.div `
 
   background-color: transparent;
 
-  &.${constants_2.dataGridRowBaseClassnames.active} {
+  &.${constants_3.dataGridRowBaseClassnames.active} {
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
 
-    &.${constants_2.dataGridRowBaseClassnames.active} {
-      background-color: ${({ theme }) => theme.palette.primary[100]};
-    }
+      &.${constants_3.dataGridRowBaseClassnames.active} {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
 
-    &.${constants_2.dataGridRowBaseClassnames.hovered} {
-      cursor: pointer;
+      &.${constants_3.dataGridRowBaseClassnames.hovered} {
+        cursor: pointer;
+      }
     }
   }
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     grid-template-columns: 1fr;
 
-    &.${constants_2.dataGridRowBaseClassnames.active} {
+    &.${constants_3.dataGridRowBaseClassnames.active} {
       background-color: transparent;
     }
-
-    &:hover, &.${constants_2.dataGridRowBaseClassnames.hovered} {
-      cursor: initial;
-
-      background-color: transparent;
-
-      &.${constants_2.dataGridRowBaseClassnames.active} {
-        background-color: transparent;
-      }
-    }
   }
 `;
 exports.BottomDrawerContent = styled_1.styled.div `

package/node/components/DataGridCollapsibleRow/styles.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledRowBase = exports.ChevronIcon = exports.CollapseCell = exports.CollapseButton = exports.MobileExpandButtonWrapper = exports.ChildrenWrapper = exports.CollapseContent = exports.CollapseContainer = void 0;
 const ChevronROutlineMd_1 = require("../../icons/ChevronROutlineMd");
 const Button_1 = require("../Button");
-const constants_1 = require("../DataGrid/constants");
+const constants_1 = require("../constants");
+const constants_2 = require("../DataGrid/constants");
 const RowBase_1 = require("../DataGrid/RowBase");
 const IconButton_1 = require("../IconButton");
 const styled_1 = require("../styled");
-const constants_2 = require("./constants");
+const constants_3 = require("./constants");
 exports.CollapseContainer = styled_1.styled.div `
   width: 100%;
   margin-bottom: ${({ theme }) => theme.spacing(4)};
@@ -47,8 +48,10 @@ exports.CollapseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
 
   color: inherit;
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.grey[300]};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.grey[300]};
+    }
   }
 `;
 exports.CollapseCell = styled_1.styled.div `
@@ -56,7 +59,7 @@ exports.CollapseCell = styled_1.styled.div `
   align-items: center;
   justify-content: center;
 
-  width: ${constants_1.ROOT_ACTION_CELL_WIDTH}px;
+  width: ${constants_2.ROOT_ACTION_CELL_WIDTH}px;
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
     display: none;
@@ -70,7 +73,7 @@ exports.ChevronIcon = (0, styled_1.styled)(ChevronROutlineMd_1.ChevronROutlineMd
     duration: theme.transitions.duration.short,
 })};
 
-  &.${constants_2.collapsibleRowClassnames.chevronIconActive} {
+  &.${constants_3.collapsibleRowClassnames.chevronIconActive} {
     transform: rotateZ(90deg);
   }
 `;
@@ -90,11 +93,11 @@ exports.StyledRowBase = (0, styled_1.styled)(RowBase_1.RowBase) `
         outline: 1px solid ${({ theme }) => theme.palette.grey[300]};
       }
 
-      & .${constants_2.collapsibleRowClassnames.collapseButton} {
+      & .${constants_3.collapsibleRowClassnames.collapseButton} {
         padding-left: ${({ theme }) => theme.spacing(4)};
       }
 
-      & .${constants_2.collapsibleRowClassnames.collapsibleContent} {
+      & .${constants_3.collapsibleRowClassnames.collapsibleContent} {
         background-color: transparent;
       }
     }

package/node/components/Description/Value/styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Wrapper = exports.StyledCopyTypography = exports.StyledTypography = void 0;
 const CopyTypography_1 = require("../../CopyTypography");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 const Typography_1 = require("../../Typography");
 exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography, {
@@ -19,8 +20,10 @@ exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography, {
     text-align: ${({ $direction }) => $direction !== 'row' ? 'left' : 'right'};
   }
 
-  &:hover {
-    text-decoration: ${({ $canCopy }) => ($canCopy ? 'underline' : 'none')};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      text-decoration: ${({ $canCopy }) => ($canCopy ? 'underline' : 'none')};
+    }
   }
 `;
 exports.StyledCopyTypography = (0, styled_1.styled)(CopyTypography_1.CopyTypography, {

package/node/components/ExpansionPanel/Summary/styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledChevron = exports.Title = exports.Wrapper = void 0;
 const Chevron_1 = require("../../Chevron");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 const getBackgroundColor = (theme, isDisabled, isSelected) => {
     if (isDisabled) {
@@ -31,8 +32,10 @@ exports.Wrapper = (0, styled_1.styled)('summary', {
     duration: theme.transitions.duration.standard,
 })};
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &:focus-visible {

package/node/components/Fab/styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledFab = void 0;
 const ButtonBase_1 = require("@mui/material/ButtonBase");
 const Fab_1 = __importDefault(require("@mui/material/Fab"));
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
 const enums_1 = require("./enums");
 const getBgColor = ({ theme, color, fabState, }) => {
@@ -76,10 +77,18 @@ exports.StyledFab = (0, styled_1.styled)(Fab_1.default, {
   border-radius: ${({ theme, isSquare }) => isSquare ? theme.shape.medium : '50%'};
   box-shadow: ${({ theme }) => theme.elevation[200]};
 
-  :hover {
-    color: ${(props) => getColor({ ...props })};
+  ${constants_1.HOVER_MEDIA} {
+    :hover {
+      color: ${(props) => getColor({ ...props })};
 
-    background: ${(props) => getBgColor({ ...props, fabState: enums_1.FabStates.Hover })};
+      background: ${(props) => getBgColor({ ...props, fabState: enums_1.FabStates.Hover })};
+    }
+  }
+  
+  ${constants_1.HOVER_NONE_MEDIA} {
+    &:hover {
+      background-color: ${(props) => getBgColor({ ...props, fabState: enums_1.FabStates.Default })};
+    }
   }
 
   :active {

package/node/components/InfiniteDataList/styles.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Item = void 0;
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Item = styled_1.styled.li `
   list-style-type: none;
 
-  ${`.${constants_1.infiniteDataListClassnames.item}`} {
+  ${`.${constants_2.infiniteDataListClassnames.item}`} {
     cursor: pointer;
 
     padding: ${({ theme }) => theme.spacing(3, 4)};
@@ -18,8 +19,10 @@ exports.Item = styled_1.styled.li `
     duration: theme.transitions.duration.shortest,
 })};
 
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.background.element};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.background.element};
+      }
     }
 
     ${({ theme }) => theme.breakpoints.down('mobile')} {

package/node/components/InfiniteTreeList/InfiniteTreeList.d.ts

@@ -1,2 +1,20 @@
 import type { InfiniteTreeListData, InfiniteTreeListProps } from './types';
+/**
+ * Виртуализированное дерево с бесконечной подгрузкой
+ *
+ * @example
+ * <InfiniteTreeList
+ *   items={items}
+ *   scrollRef={scrollRef}
+ *   onRetry={refetch}
+ *   renderItem={(item) => (
+ *     <InfiniteTreeListItem>{item.name}</InfiniteTreeListItem>
+ *   )}
+ *   renderParent={(item) => (
+ *     <InfiniteTreeListItem childItems={childrenState[item.id]?.data}>
+ *       {item.name}
+ *     </InfiniteTreeListItem>
+ *   )}
+ * />
+ */
 export declare const InfiniteTreeList: <TData extends InfiniteTreeListData<TData>>(props: InfiniteTreeListProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/node/components/InfiniteTreeList/InfiniteTreeList.js

@@ -2,30 +2,37 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfiniteTreeList = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+// cspell:ignore Виртуализированное
 const react_virtuoso_1 = require("react-virtuoso");
 const ContentState_1 = require("../ContentState");
-const Loader_1 = require("../Loader");
-const constants_1 = require("./constants");
-const EndData_1 = require("./EndData");
-const ErrorMessage_1 = require("./ErrorMessage");
 const InfiniteTreeListContext_1 = require("./InfiniteTreeListContext");
-const InfiniteTreeListItem_1 = require("./InfiniteTreeListItem");
+const ListFooter_1 = require("./ListFooter");
 const NoDataPlaceholder_1 = require("./NoDataPlaceholder");
 const OnTopButton_1 = require("./OnTopButton");
-const styles_1 = require("./styles");
+const ParentItems_1 = require("./ParentItems");
 const TreeItem_1 = require("./TreeItem");
 const useLogic_1 = require("./useLogic");
+const computeItemKey = (_, item) => item.id;
+/**
+ * Виртуализированное дерево с бесконечной подгрузкой
+ *
+ * @example
+ * <InfiniteTreeList
+ *   items={items}
+ *   scrollRef={scrollRef}
+ *   onRetry={refetch}
+ *   renderItem={(item) => (
+ *     <InfiniteTreeListItem>{item.name}</InfiniteTreeListItem>
+ *   )}
+ *   renderParent={(item) => (
+ *     <InfiniteTreeListItem childItems={childrenState[item.id]?.data}>
+ *       {item.name}
+ *     </InfiniteTreeListItem>
+ *   )}
+ * />
+ */
 const InfiniteTreeList = (props) => {
-    const { flatList, onToggle, contentStateProps, scrollParent, virtuosoProps, footerProps, onTopButtonProps, endOfScrollMsg, renderItem, items, itemSkeleton, onRetry, onLoadMore, noDataImgSrc, recentlyExpandedIds, } = (0, useLogic_1.useLogic)(props);
-    const renderItemContent = (_index, item) => ((0, jsx_runtime_1.jsx)(InfiniteTreeListItem_1.TreeListItemContextProvider, { item: item, onToggle: onToggle, children: (0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, renderItem: renderItem, recentlyExpandedIds: recentlyExpandedIds }) }));
-    return ((0, jsx_runtime_1.jsx)(InfiniteTreeListContext_1.InfiniteTreeListContextProvider, { itemSkeleton: itemSkeleton, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, children: items.length && scrollParent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ...virtuosoProps, data: flatList, customScrollParent: scrollParent, endReached: onLoadMore, itemContent: renderItemContent, computeItemKey: (_, item) => item.id, components: {
-                            Footer: () => {
-                                const { isLoading, isError, isEndReached } = footerProps;
-                                if (!isLoading && !isError && !isEndReached) {
-                                    return (0, jsx_runtime_1.jsx)(styles_1.FooterDummy, {});
-                                }
-                                return ((0, jsx_runtime_1.jsxs)(styles_1.Footer, { children: [isLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isError && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { onRetry: onRetry }), isEndReached && ((0, jsx_runtime_1.jsx)(EndData_1.EndData, { endOfScrollMsg: endOfScrollMsg }))] }));
-                            },
-                        }, overscan: constants_1.OVERSCAN }), (0, jsx_runtime_1.jsx)(OnTopButton_1.OnTopButton, { ...onTopButtonProps })] })) : ((0, jsx_runtime_1.jsx)(NoDataPlaceholder_1.NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) }) }));
+    const { flatList, onToggle, contentStateProps, scrollParent, virtuosoProps, footerContext, onTopButtonProps, renderItem, renderParent, items, itemSkeleton, onRetry, noDataImgSrc, enterAnimation, tailRegistry, nodePaginationMap, registerChildren, notifyExpand, parentItems, acquireParentSlot, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsxs)(InfiniteTreeListContext_1.InfiniteTreeListContextProvider, { itemSkeleton: itemSkeleton, nodePaginationMap: nodePaginationMap, registerChildren: registerChildren, notifyExpand: notifyExpand, onListRetry: onRetry, enterAnimation: enterAnimation, tailRegistry: tailRegistry, renderItem: renderItem, renderParent: renderParent, onToggle: onToggle, acquireParentSlot: acquireParentSlot, children: [(0, jsx_runtime_1.jsx)(ParentItems_1.ParentItems, { parents: parentItems }), (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, children: items.length > 0 && scrollParent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ...virtuosoProps, data: flatList, customScrollParent: scrollParent, computeItemKey: computeItemKey, context: footerContext, components: { Item: TreeItem_1.TreeItem, Footer: ListFooter_1.ListFooter } }), (0, jsx_runtime_1.jsx)(OnTopButton_1.OnTopButton, { ...onTopButtonProps })] })) : ((0, jsx_runtime_1.jsx)(NoDataPlaceholder_1.NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) })] }));
 };
 exports.InfiniteTreeList = InfiniteTreeList;

package/node/components/InfiniteTreeList/InfiniteTreeListActions/InfiniteTreeListActions.d.ts

@@ -1,2 +1,11 @@
 import type { InfiniteTreeListActionProps } from './types';
+/**
+ * Действия строки дерева. Блокирующее действие в состоянии загрузки блокирует
+ * строку вместе со всей её веткой
+ *
+ * @example
+ * <InfiniteTreeListActions
+ *   actions={{ main: [{ name: 'Изменить', onClick: handleEdit }] }}
+ * />
+ */
 export declare const InfiniteTreeListActions: <TItem>({ actions, }: InfiniteTreeListActionProps<TItem>) => import("react/jsx-runtime").JSX.Element;

package/node/components/InfiniteTreeList/InfiniteTreeListActions/InfiniteTreeListActions.js

@@ -4,6 +4,15 @@ exports.InfiniteTreeListActions = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ActionCellBase_1 = require("../../ActionCellBase");
 const useLogic_1 = require("./useLogic");
+/**
+ * Действия строки дерева. Блокирующее действие в состоянии загрузки блокирует
+ * строку вместе со всей её веткой
+ *
+ * @example
+ * <InfiniteTreeListActions
+ *   actions={{ main: [{ name: 'Изменить', onClick: handleEdit }] }}
+ * />
+ */
 const InfiniteTreeListActions = ({ actions, }) => {
     const { isDisabledAction, handleWrapperClick, handleActionClick } = (0, useLogic_1.useLogic)({
         actions,

package/node/components/InfiniteTreeList/InfiniteTreeListActions/types.d.ts

@@ -1,4 +1,9 @@
 import type { Actions } from '../../ActionCellBase';
 export type InfiniteTreeListActionProps<TItem> = {
+    /**
+     * Конфигурация действий строки
+     *
+     * @example actions={{ main: [{ name: 'Изменить', onClick: handleEdit }] }}
+     */
     actions: Actions<TItem>;
 };

package/node/components/InfiniteTreeList/InfiniteTreeListActions/useLogic/useLogic.js

@@ -10,17 +10,16 @@ const useLogic = ({ actions }) => {
     const { setDisabled } = (0, react_1.useContext)(InfiniteTreeListContext_1.InfiniteTreeListContext);
     const blockingAction = (0, react_1.useMemo)(() => [...main, ...secondary].find((action) => action.isBlockingOperation && action.loading), [main, secondary]);
     const isDisabledAction = Boolean(blockingAction);
+    const loadingNote = blockingAction?.loadingNote;
     (0, react_1.useEffect)(() => {
-        if (blockingAction) {
-            // Добавляем id элемента в Set disabled элементов
+        if (isDisabledAction) {
             setDisabled(item.id, true);
-            setDisabledReason(blockingAction?.loadingNote);
+            setDisabledReason(loadingNote);
             return;
         }
-        // Удаляем id элемента из Set disabled элементов
         setDisabled(item.id, false);
-        setDisabledReason('');
-    }, [blockingAction, item.id]);
+        setDisabledReason(undefined);
+    }, [isDisabledAction, loadingNote, item.id]);
     const handleActionClick = (0, react_1.useCallback)((onClick) => () => {
         onClick?.(item);
     }, [item]);