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

package/README.md

@@ -55,6 +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` | - |  |
 
 
 [//]: 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({ data,
+    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,
                 expandedNodes,
                 onNodeClick,
                 onExpand,

package/dist/contexts/TreeContext.d.ts

@@ -1,6 +1,9 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { OnNodeClick, ParentNode, TreeBaseProps, TreeNodeId, TreeNodeProps } from '../types';
-type TreeContextProps = Omit<TreeBaseProps, 'onSelect' | 'onExpand' | 'onNodeClick' | 'selected' | 'selectionMode'> & {
+type TreeContextBaseProps = TreeBaseProps & {
+    showToggleInSingleMode?: boolean;
+};
+type TreeContextProps = Omit<TreeContextBaseProps, 'onSelect' | 'onExpand' | 'onNodeClick' | 'selected' | 'selectionMode'> & {
     onExpand(node: TreeNodeProps): void;
     onSelect(node: Pick<TreeNodeProps, 'id' | 'nested' | 'disabled'>, parentNode?: ParentNode): void;
     selected?: TreeNodeId[] | TreeNodeId;
@@ -16,7 +19,7 @@ type TreeContextProps = Omit<TreeBaseProps, 'onSelect' | 'onExpand' | 'onNodeCli
 };
 type TreeContextProviderProps = {
     children: ReactNode;
-    value: TreeBaseProps;
+    value: TreeContextBaseProps;
 };
 export declare const TreeContext: import("react").Context<TreeContextProps>;
 export declare function TreeContextProvider({ children, value }: TreeContextProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/contexts/TreeContext.js

@@ -47,7 +47,7 @@ export function TreeContextProvider({ children, value }) {
         if (!isSelectable || node.disabled)
             return;
         if (isSingleSelect) {
-            onSelectHandler(node.id, node);
+            onSelectHandler(node.id === selectedNodes ? undefined : node.id, node);
             return;
         }
         if (Array.isArray(selectedNodes)) {

package/dist/helperComponents/TreeNode/TreeNode.js

@@ -27,16 +27,16 @@ 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, showLines, showIcons, } = useTreeContext();
+    const { isMultiSelect, isSelectable, onNodeClick, selected, expandedNodes, onSelect, nodeActions, parentActions, setFocusPosition, resetFocusPosition, focusedNodeId, setFocusIndex, focusableNodeIds, showToggleInSingleMode, showLines, showIcons, } = useTreeContext();
     const [isDroplistOpen, setDroplistOpen] = useState(false);
     const [isDroplistTriggerFocused, setFocusDroplistTrigger] = useState(false);
     const ref = useRef(null);
     const isExpandable = Array.isArray(nested);
     const isExpanded = isExpandable ? expandedNodes === null || expandedNodes === void 0 ? void 0 : expandedNodes.includes(id) : undefined;
     const nestedNodesSelection = useMemo(() => {
-        if (!nested || !Array.isArray(selected) || !(selected === null || selected === void 0 ? void 0 : selected.length))
+        if (!nested || !selected)
             return undefined;
-        return checkNestedNodesSelection(nested, selected);
+        return checkNestedNodesSelection(nested, Array.isArray(selected) ? selected : [selected]);
     }, [nested, selected]);
     const isSelected = (Array.isArray(selected) ? selected.includes(id) || (nestedNodesSelection === null || nestedNodesSelection === void 0 ? void 0 : nestedNodesSelection.allSelected) : selected === id) || false;
     const isFocused = focusedNodeId === id;
@@ -139,7 +139,8 @@ 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 && (_jsx("div", { className: styles.treeNodeCheckboxWrap, children: _jsx(Checkbox, { size: 's', disabled: disabled, checked: !disabled && isSelected, indeterminate: !disabled && !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: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), 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, {}), 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: {
                             id,
                             title,
                             disabled,

package/dist/types.d.ts

@@ -8,7 +8,7 @@ export type BaseTreeNode = WithSupportProps<{
     /** Идентификатор элемента */
     id: TreeNodeId;
     /** Имя элемента */
-    title: string;
+    title: string | ((value: BaseTreeNode) => ReactNode);
     /** Является ли элемент деактивированным */
     disabled?: boolean;
     /** Обработчик клика по элементу */
@@ -81,6 +81,7 @@ export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
     selected?: TreeNodeId;
     /** <br> - При <strong>selectionMode</strong>=`Single` - возвращает строку */
     onSelect?(selectedKey: TreeNodeId, node: TreeNodeProps): void;
+    showToggleInSingleMode?: 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-eb3592d8.0",
+  "version": "0.6.26-preview-1b7c1817.0",
   "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.1-preview-eb3592d8.0",
+    "@snack-uikit/list": "0.17.0",
     "@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": "2821429780b5fba4e6bc92c93a78da10ad23e530"
+  "gitHead": "fcec27b4b06ab5c700cc50bb4c0e9520aba50cb7"
 }

package/src/components/Tree/Tree.tsx

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

package/src/contexts/TreeContext.tsx

@@ -5,7 +5,14 @@ import { SELECTION_MODE } from '../constants';
 import { findAllExpandedChildNodeIds, lookupTreeForSelectedNodes } from '../helpers';
 import { OnNodeClick, ParentNode, TreeBaseProps, TreeNodeId, TreeNodeProps } from '../types';
 
-type TreeContextProps = Omit<TreeBaseProps, 'onSelect' | 'onExpand' | 'onNodeClick' | 'selected' | 'selectionMode'> & {
+type TreeContextBaseProps = TreeBaseProps & {
+  showToggleInSingleMode?: boolean;
+};
+
+type TreeContextProps = Omit<
+  TreeContextBaseProps,
+  'onSelect' | 'onExpand' | 'onNodeClick' | 'selected' | 'selectionMode'
+> & {
   onExpand(node: TreeNodeProps): void;
   onSelect(node: Pick<TreeNodeProps, 'id' | 'nested' | 'disabled'>, parentNode?: ParentNode): void;
   selected?: TreeNodeId[] | TreeNodeId;
@@ -22,7 +29,7 @@ type TreeContextProps = Omit<TreeBaseProps, 'onSelect' | 'onExpand' | 'onNodeCli
 
 type TreeContextProviderProps = {
   children: ReactNode;
-  value: TreeBaseProps;
+  value: TreeContextBaseProps;
 };
 
 export const TreeContext = createContext<TreeContextProps>({
@@ -81,7 +88,7 @@ export function TreeContextProvider({ children, value }: TreeContextProviderProp
       if (!isSelectable || node.disabled) return;
 
       if (isSingleSelect) {
-        onSelectHandler(node.id, node);
+        onSelectHandler(node.id === selectedNodes ? undefined : node.id, node);
         return;
       }
 

package/src/helperComponents/TreeNode/TreeNode.tsx

@@ -58,6 +58,7 @@ export function TreeNode({
     focusedNodeId,
     setFocusIndex,
     focusableNodeIds,
+    showToggleInSingleMode,
     showLines,
     showIcons,
   } = useTreeContext();
@@ -71,9 +72,9 @@ export function TreeNode({
   const isExpanded = isExpandable ? expandedNodes?.includes(id) : undefined;
 
   const nestedNodesSelection = useMemo(() => {
-    if (!nested || !Array.isArray(selected) || !selected?.length) return undefined;
+    if (!nested || !selected) return undefined;
 
-    return checkNestedNodesSelection(nested, selected);
+    return checkNestedNodesSelection(nested, Array.isArray(selected) ? selected : [selected]);
   }, [nested, selected]);
 
   const isSelected =
@@ -247,20 +248,21 @@ export function TreeNode({
         data-test-id={TEST_IDS.item}
         ref={ref}
       >
-        {isMultiSelect && (
-          <div className={styles.treeNodeCheckboxWrap}>
-            <Checkbox
-              size='s'
-              disabled={disabled}
-              checked={!disabled && isSelected}
-              indeterminate={!disabled && !isSelected && nestedNodesSelection?.someSelected}
-              onChange={handleSelect}
-              onClick={stopPropagationClick}
-              data-test-id={TEST_IDS.checkbox}
-              tabIndex={-1}
-            />
-          </div>
-        )}
+        {isMultiSelect ||
+          (showToggleInSingleMode && (
+            <div className={styles.treeNodeCheckboxWrap}>
+              <Checkbox
+                size='s'
+                disabled={disabled}
+                checked={isSelected}
+                indeterminate={!isSelected && nestedNodesSelection?.someSelected}
+                onChange={handleSelect}
+                onClick={stopPropagationClick}
+                data-test-id={TEST_IDS.checkbox}
+                tabIndex={-1}
+              />
+            </div>
+          ))}
 
         {treeNodeIcon && (
           <div className={styles.treeNodeIcon} data-test-id={TEST_IDS.icon}>
@@ -269,7 +271,11 @@ export function TreeNode({
         )}
 
         <Typography.SansBodyM tag='div' className={styles.treeNodeTitle}>
-          <TruncateString text={title} data-test-id={TEST_IDS.title} />
+          {typeof title === 'string' ? (
+            <TruncateString text={title} data-test-id={TEST_IDS.title} />
+          ) : (
+            title({ id, title, onClick, className, disabled, ...extractSupportProps(rest) })
+          )}
         </Typography.SansBodyM>
 
         {getNodeActions && (

package/src/types.ts

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