@snack-uikit/tree 0.6.26-preview-1b7c1817.0 → 0.6.27

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.6.27 (2024-10-15)
+
+
+### Bug Fixes
+
+* **PDS-556:** add render fn for tree component ([6b2608e](https://github.com/cloud-ru-tech/snack-uikit/commit/6b2608ee282abe8ac039d98ca71c4365c84774f1))
+
+
+
+
+
+## 0.6.26 (2024-10-14)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.17.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
 ## 0.6.25 (2024-09-27)
 
 ### Only dependencies have been changed

package/README.md

@@ -55,7 +55,7 @@ const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);
 | selectionMode | "single" \| "multi" | - | Режим выбора элементов: <br> - `Single` - одиночный выбор <br> - `Multi` - множественный выбор <br> - `undefined` - без выбора |
 | selected | `string \| string[]` | - | Состояние для выбраных элементов: <br> - При <strong>selectionMode</strong>=`Multi` - принимает массив строк <br> - При <strong>selectionMode</strong>=`Single` - принимает строку |
 | onSelect | `((selectedKeys: string[], node: TreeNodeProps) => void) \| ((selectedKey: string, node: TreeNodeProps) => void)` | - | Колбэк при изменении выбраных элементов: <br> - При <strong>selectionMode</strong>=`Multi` - возвращает массив строк <br> - При <strong>selectionMode</strong>=`Single` - возвращает строку |
-| showToggleInSingleMode | `boolean` | - |  |
+| showToggle | `boolean` | - |  |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/components/Tree/Tree.js

@@ -18,7 +18,7 @@ import styles from './styles.module.css';
 import { extractSelectableProps } from './utils';
 export function Tree(_a) {
     var { data, onNodeClick, onExpand, expandedNodes, nodeActions, parentActions, onDataLoad, showLines = true, showIcons = true, className } = _a, rest = __rest(_a, ["data", "onNodeClick", "onExpand", "expandedNodes", "nodeActions", "parentActions", "onDataLoad", "showLines", "showIcons", "className"]);
-    return (_jsx("div", Object.assign({ className: cn(styles.tree, className), role: 'tree' }, extractSupportProps(rest), { children: _jsx(TreeContextProvider, { value: Object.assign({ showToggleInSingleMode: rest.selectionMode === 'single' && rest.showToggleInSingleMode, data,
+    return (_jsx("div", Object.assign({ className: cn(styles.tree, className), role: 'tree' }, extractSupportProps(rest), { children: _jsx(TreeContextProvider, { value: Object.assign({ showToggle: rest.selectionMode === 'single' && rest.showToggle, data,
                 expandedNodes,
                 onNodeClick,
                 onExpand,

package/dist/constants.d.ts

@@ -11,6 +11,7 @@ export declare const TEST_IDS: {
     item: string;
     chevron: string;
     checkbox: string;
+    radio: string;
     icon: string;
     title: string;
     droplistTrigger: string;

package/dist/constants.js

@@ -11,6 +11,7 @@ export const TEST_IDS = {
     item: 'tree__node__item',
     chevron: 'tree__node__chevron',
     checkbox: 'tree__node__checkbox',
+    radio: 'tree__node__radio',
     icon: 'tree__node__icon',
     title: 'tree__node__title',
     droplistTrigger: 'tree__node__droplist-trigger',

package/dist/contexts/TreeContext.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { OnNodeClick, ParentNode, TreeBaseProps, TreeNodeId, TreeNodeProps } from '../types';
 type TreeContextBaseProps = TreeBaseProps & {
-    showToggleInSingleMode?: boolean;
+    showToggle?: boolean;
 };
 type TreeContextProps = Omit<TreeContextBaseProps, 'onSelect' | 'onExpand' | 'onNodeClick' | 'selected' | 'selectionMode'> & {
     onExpand(node: TreeNodeProps): void;

package/dist/helperComponents/ExpandableTreeNode/ExpandableTreeNode.js

@@ -52,8 +52,6 @@ export function ExpandableTreeNode(_a) {
         }
     }, [isExpanded, node.nested, state.status]);
     const toggleExpand = () => __awaiter(this, void 0, void 0, function* () {
-        if (node.disabled)
-            return;
         if (node.nested && !node.nested.length && !isExpanded && onDataLoad) {
             setLoading(true);
             yield onDataLoad(node).finally(() => {
@@ -85,6 +83,6 @@ export function ExpandableTreeNode(_a) {
     };
     return (_jsxs("div", { className: styles.expandableTreeNode, "data-test-id": dataTestId, "data-expandable": Boolean(node.nested) || undefined, "data-disabled": node.disabled || undefined, children: [_jsx(TreeNode, Object.assign({}, node, { isLoading: isLoading, parentNode: parentNode, onChevronClick: toggleExpand, onKeyDown: handleKeyDown, tabIndexAvailable: tabIndexAvailable })), node.nested && (_jsx("div", { className: styles.expandableWrap, "data-expanded": isExpanded || undefined, "data-test-id": TEST_IDS.expandable, children: showContent && (_jsxs("div", { className: styles.expandableContent, "data-test-id": TEST_IDS.expandableContent, children: [_jsx(TreeLine, { visible: showLines, halfHeight: isLineHalfHeight, "data-test-id": TEST_IDS.line }), _jsx("div", { className: styles.expandableNested, children: node.nested.map(nestedNode => {
                                 const parent = { id: node.id, nested: node.nested, parentNode };
-                                return _jsx(TreeItem, { node: nestedNode, parentNode: parent }, nestedNode.id);
+                                return (_jsx(TreeItem, { node: Object.assign(Object.assign({}, nestedNode), { disabled: node.disabled || nestedNode.disabled }), parentNode: parent }, nestedNode.id));
                             }) })] })) }))] }));
 }

package/dist/helperComponents/TreeNode/TreeNode.js

@@ -14,7 +14,7 @@ import cn from 'classnames';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChevronRightSVG, FileSVG, FolderOpenSVG, FolderSVG } from '@snack-uikit/icons';
-import { Checkbox } from '@snack-uikit/toggles';
+import { Checkbox, Radio } from '@snack-uikit/toggles';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -27,7 +27,7 @@ import styles from './styles.module.css';
 import { stopPropagationClick } from './utils';
 export function TreeNode(_a) {
     var { id, title, icon = _jsx(FileSVG, { size: 24 }), expandedIcon = _jsx(FolderOpenSVG, { size: 24 }), collapsedIcon = _jsx(FolderSVG, { size: 24 }), disabled, onClick, nested, className, onChevronClick, onKeyDown, isLoading, parentNode, tabIndexAvailable } = _a, rest = __rest(_a, ["id", "title", "icon", "expandedIcon", "collapsedIcon", "disabled", "onClick", "nested", "className", "onChevronClick", "onKeyDown", "isLoading", "parentNode", "tabIndexAvailable"]);
-    const { isMultiSelect, isSelectable, onNodeClick, selected, expandedNodes, onSelect, nodeActions, parentActions, setFocusPosition, resetFocusPosition, focusedNodeId, setFocusIndex, focusableNodeIds, showToggleInSingleMode, showLines, showIcons, } = useTreeContext();
+    const { isMultiSelect, isSelectable, onNodeClick, selected, expandedNodes, onSelect, nodeActions, parentActions, setFocusPosition, resetFocusPosition, focusedNodeId, setFocusIndex, focusableNodeIds, showToggle, showLines, showIcons, } = useTreeContext();
     const [isDroplistOpen, setDroplistOpen] = useState(false);
     const [isDroplistTriggerFocused, setFocusDroplistTrigger] = useState(false);
     const ref = useRef(null);
@@ -139,8 +139,7 @@ export function TreeNode(_a) {
         }
     };
     const getNodeActions = Boolean(nested) ? parentActions : nodeActions;
-    return (_jsxs("div", Object.assign({ role: 'presentation', className: cn(styles.treeNode, className) }, extractSupportProps(rest), { "data-node-id": id, children: [parentNode && (_jsx(TreeLine, { halfWidth: Boolean(nested), horizontal: true, visible: showLines, "data-test-id": TEST_IDS.line })), !parentNode && !Boolean(nested) && _jsx(TreeLine, { visible: false }), isExpandable && (_jsx(ButtonFunction, { size: 'xs', icon: _jsx(ChevronRightSVG, {}), disabled: disabled, loading: isLoading, onClick: onChevronClick, "data-expanded": isExpanded || undefined, className: styles.treeNodeExpandButton, tabIndex: -1, "data-test-id": TEST_IDS.chevron })), _jsxs("div", { role: 'treeitem', "aria-expanded": isExpanded, "aria-selected": isSelectable ? isSelected : undefined, "aria-disabled": disabled, "data-multiselect": isMultiSelect || undefined, "data-droplist-active": isDroplistOpen || isDroplistTriggerFocused || undefined, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: resetFocusPosition, tabIndex: tabIndexAvailable ? 0 : -1, className: styles.treeNodeContent, "data-test-id": TEST_IDS.item, ref: ref, children: [isMultiSelect ||
-                        (showToggleInSingleMode && (_jsx("div", { className: styles.treeNodeCheckboxWrap, children: _jsx(Checkbox, { size: 's', disabled: disabled, checked: isSelected, indeterminate: !isSelected && (nestedNodesSelection === null || nestedNodesSelection === void 0 ? void 0 : nestedNodesSelection.someSelected), onChange: handleSelect, onClick: stopPropagationClick, "data-test-id": TEST_IDS.checkbox, tabIndex: -1 }) }))), treeNodeIcon && (_jsx("div", { className: styles.treeNodeIcon, "data-test-id": TEST_IDS.icon, children: treeNodeIcon })), _jsx(Typography.SansBodyM, { tag: 'div', className: styles.treeNodeTitle, children: typeof title === 'string' ? (_jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title })) : (title(Object.assign({ id, title, onClick, className, disabled }, extractSupportProps(rest)))) }), getNodeActions && (_jsx(TreeNodeActions, { getNodeActions: getNodeActions, node: {
+    return (_jsxs("div", Object.assign({ role: 'presentation', className: cn(styles.treeNode, className) }, extractSupportProps(rest), { "data-node-id": id, children: [parentNode && (_jsx(TreeLine, { halfWidth: Boolean(nested), horizontal: true, visible: showLines, "data-test-id": TEST_IDS.line })), !parentNode && !Boolean(nested) && _jsx(TreeLine, { visible: false }), isExpandable && (_jsx(ButtonFunction, { size: 'xs', icon: _jsx(ChevronRightSVG, {}), loading: isLoading, onClick: onChevronClick, "data-expanded": isExpanded || undefined, className: styles.treeNodeExpandButton, tabIndex: -1, "data-test-id": TEST_IDS.chevron })), _jsxs("div", { role: 'treeitem', "aria-expanded": isExpanded, "aria-selected": isSelectable ? isSelected : undefined, "aria-disabled": disabled, "data-multiselect": isMultiSelect || undefined, "data-droplist-active": isDroplistOpen || isDroplistTriggerFocused || undefined, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: resetFocusPosition, tabIndex: tabIndexAvailable ? 0 : -1, className: styles.treeNodeContent, "data-test-id": TEST_IDS.item, ref: ref, children: [(isMultiSelect || showToggle) && (_jsxs("div", { className: styles.treeNodeCheckboxWrap, children: [isMultiSelect && (_jsx(Checkbox, { size: 's', disabled: disabled, checked: isSelected, indeterminate: !isSelected && (nestedNodesSelection === null || nestedNodesSelection === void 0 ? void 0 : nestedNodesSelection.someSelected), onChange: handleSelect, onClick: stopPropagationClick, "data-test-id": TEST_IDS.checkbox, tabIndex: -1 })), showToggle && (_jsx(Radio, { size: 's', checked: isSelected, disabled: disabled || (!isSelected && (nestedNodesSelection === null || nestedNodesSelection === void 0 ? void 0 : nestedNodesSelection.someSelected)), "data-test-id": TEST_IDS.radio, tabIndex: -1 }))] })), treeNodeIcon && (_jsx("div", { className: styles.treeNodeIcon, "data-test-id": TEST_IDS.icon, children: treeNodeIcon })), _jsxs(Typography.SansBodyM, { tag: 'div', className: styles.treeNodeTitle, children: [typeof title === 'string' && _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }), typeof title !== 'string' && title({ id, disabled, nested })] }), getNodeActions && (_jsx(TreeNodeActions, { getNodeActions: getNodeActions, node: {
                             id,
                             title,
                             disabled,

package/dist/types.d.ts

@@ -8,7 +8,7 @@ export type BaseTreeNode = WithSupportProps<{
     /** Идентификатор элемента */
     id: TreeNodeId;
     /** Имя элемента */
-    title: string | ((value: BaseTreeNode) => ReactNode);
+    title: string | ((value: Pick<BaseTreeNode, 'id' | 'disabled'>) => ReactNode);
     /** Является ли элемент деактивированным */
     disabled?: boolean;
     /** Обработчик клика по элементу */
@@ -30,6 +30,7 @@ export type ParentTreeNode = BaseTreeNode & {
     collapsedIcon?: ReactNode;
     /** Вложенные элементы дерева */
     nested: (ChildTreeNode | ParentTreeNode)[];
+    title: string | ((value: Pick<ParentTreeNode, 'id' | 'disabled' | 'nested'>) => ReactNode);
 };
 export type TreeNodeProps = ChildTreeNode | ParentTreeNode;
 export type ParentNode = Pick<TreeNodeProps, 'id' | 'nested'> & {
@@ -81,7 +82,7 @@ export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
     selected?: TreeNodeId;
     /** <br> - При <strong>selectionMode</strong>=`Single` - возвращает строку */
     onSelect?(selectedKey: TreeNodeId, node: TreeNodeProps): void;
-    showToggleInSingleMode?: boolean;
+    showToggle?: boolean;
 };
 export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {
     selectionMode: 'multi';

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tree",
-  "version": "0.6.26-preview-1b7c1817.0",
+  "version": "0.6.27",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@snack-uikit/button": "0.17.5",
     "@snack-uikit/icons": "0.22.1",
-    "@snack-uikit/list": "0.17.0",
+    "@snack-uikit/list": "0.17.1",
     "@snack-uikit/toggles": "0.10.4",
     "@snack-uikit/truncate-string": "0.4.24",
     "@snack-uikit/typography": "0.6.3",
@@ -43,5 +43,5 @@
     "react-transition-state": "2.1.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "fcec27b4b06ab5c700cc50bb4c0e9520aba50cb7"
+  "gitHead": "8a9406a0dc468467c41fbf024fc6ac9a0c2f3452"
 }

package/src/components/Tree/Tree.tsx

@@ -27,7 +27,7 @@ export function Tree({
     <div className={cn(styles.tree, className)} role='tree' {...extractSupportProps(rest)}>
       <TreeContextProvider
         value={{
-          showToggleInSingleMode: rest.selectionMode === 'single' && rest.showToggleInSingleMode,
+          showToggle: rest.selectionMode === 'single' && rest.showToggle,
           data,
           expandedNodes,
           onNodeClick,

package/src/constants.ts

@@ -13,6 +13,7 @@ export const TEST_IDS = {
   item: 'tree__node__item',
   chevron: 'tree__node__chevron',
   checkbox: 'tree__node__checkbox',
+  radio: 'tree__node__radio',
   icon: 'tree__node__icon',
   title: 'tree__node__title',
   droplistTrigger: 'tree__node__droplist-trigger',

package/src/contexts/TreeContext.tsx

@@ -6,7 +6,7 @@ import { findAllExpandedChildNodeIds, lookupTreeForSelectedNodes } from '../help
 import { OnNodeClick, ParentNode, TreeBaseProps, TreeNodeId, TreeNodeProps } from '../types';
 
 type TreeContextBaseProps = TreeBaseProps & {
-  showToggleInSingleMode?: boolean;
+  showToggle?: boolean;
 };
 
 type TreeContextProps = Omit<

package/src/helperComponents/ExpandableTreeNode/ExpandableTreeNode.tsx

@@ -48,8 +48,6 @@ export function ExpandableTreeNode({
   }, [isExpanded, node.nested, state.status]);
 
   const toggleExpand = async () => {
-    if (node.disabled) return;
-
     if (node.nested && !node.nested.length && !isExpanded && onDataLoad) {
       setLoading(true);
 
@@ -114,7 +112,13 @@ export function ExpandableTreeNode({
                 {node.nested.map(nestedNode => {
                   const parent: ParentNode = { id: node.id, nested: node.nested, parentNode };
 
-                  return <TreeItem key={nestedNode.id} node={nestedNode} parentNode={parent} />;
+                  return (
+                    <TreeItem
+                      key={nestedNode.id}
+                      node={{ ...nestedNode, disabled: node.disabled || nestedNode.disabled }}
+                      parentNode={parent}
+                    />
+                  );
                 })}
               </div>
             </div>

package/src/helperComponents/TreeNode/TreeNode.tsx

@@ -3,7 +3,7 @@ import { FocusEvent, KeyboardEventHandler, MouseEventHandler, useEffect, useMemo
 
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChevronRightSVG, FileSVG, FolderOpenSVG, FolderSVG } from '@snack-uikit/icons';
-import { Checkbox } from '@snack-uikit/toggles';
+import { Checkbox, Radio } from '@snack-uikit/toggles';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -58,7 +58,7 @@ export function TreeNode({
     focusedNodeId,
     setFocusIndex,
     focusableNodeIds,
-    showToggleInSingleMode,
+    showToggle,
     showLines,
     showIcons,
   } = useTreeContext();
@@ -222,7 +222,6 @@ export function TreeNode({
         <ButtonFunction
           size='xs'
           icon={<ChevronRightSVG />}
-          disabled={disabled}
           loading={isLoading}
           onClick={onChevronClick}
           data-expanded={isExpanded || undefined}
@@ -248,9 +247,9 @@ export function TreeNode({
         data-test-id={TEST_IDS.item}
         ref={ref}
       >
-        {isMultiSelect ||
-          (showToggleInSingleMode && (
-            <div className={styles.treeNodeCheckboxWrap}>
+        {(isMultiSelect || showToggle) && (
+          <div className={styles.treeNodeCheckboxWrap}>
+            {isMultiSelect && (
               <Checkbox
                 size='s'
                 disabled={disabled}
@@ -261,8 +260,18 @@ export function TreeNode({
                 data-test-id={TEST_IDS.checkbox}
                 tabIndex={-1}
               />
-            </div>
-          ))}
+            )}
+            {showToggle && (
+              <Radio
+                size='s'
+                checked={isSelected}
+                disabled={disabled || (!isSelected && nestedNodesSelection?.someSelected)}
+                data-test-id={TEST_IDS.radio}
+                tabIndex={-1}
+              />
+            )}
+          </div>
+        )}
 
         {treeNodeIcon && (
           <div className={styles.treeNodeIcon} data-test-id={TEST_IDS.icon}>
@@ -271,11 +280,8 @@ export function TreeNode({
         )}
 
         <Typography.SansBodyM tag='div' className={styles.treeNodeTitle}>
-          {typeof title === 'string' ? (
-            <TruncateString text={title} data-test-id={TEST_IDS.title} />
-          ) : (
-            title({ id, title, onClick, className, disabled, ...extractSupportProps(rest) })
-          )}
+          {typeof title === 'string' && <TruncateString text={title} data-test-id={TEST_IDS.title} />}
+          {typeof title !== 'string' && title({ id, disabled, nested } as TreeNodeProps)}
         </Typography.SansBodyM>
 
         {getNodeActions && (

package/src/types.ts

@@ -13,7 +13,7 @@ export type BaseTreeNode = WithSupportProps<{
   /** Идентификатор элемента */
   id: TreeNodeId;
   /** Имя элемента */
-  title: string | ((value: BaseTreeNode) => ReactNode);
+  title: string | ((value: Pick<BaseTreeNode, 'id' | 'disabled'>) => ReactNode);
   /** Является ли элемент деактивированным */
   disabled?: boolean;
   /** Обработчик клика по элементу */
@@ -37,6 +37,8 @@ export type ParentTreeNode = BaseTreeNode & {
   collapsedIcon?: ReactNode;
   /** Вложенные элементы дерева */
   nested: (ChildTreeNode | ParentTreeNode)[];
+
+  title: string | ((value: Pick<ParentTreeNode, 'id' | 'disabled' | 'nested'>) => ReactNode);
 };
 
 export type TreeNodeProps = ChildTreeNode | ParentTreeNode;
@@ -92,7 +94,7 @@ export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
   selected?: TreeNodeId;
   /** <br> - При <strong>selectionMode</strong>=`Single` - возвращает строку */
   onSelect?(selectedKey: TreeNodeId, node: TreeNodeProps): void;
-  showToggleInSingleMode?: boolean;
+  showToggle?: boolean;
 };
 
 export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {