@snack-uikit/tree 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.5.0 (2024-01-18)
+
+
+### Features
+
+* **FF-4126:** selectionMode is optional, and tree may be unselectable ([1540e26](https://github.com/cloud-ru-tech/snack-uikit/commit/1540e266b9351a92f1619c399a904fd6bd25518f))
+
+
+
+
+
 # 0.4.0 (2024-01-11)
 
 

package/README.md

@@ -43,7 +43,6 @@ const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | data* | `TreeNodeProps[]` | - | Данные для отрисовки |
-| selectionMode | "single" \| "multi" | - | Режим выбора элементов: <br> - `Single` - одиночный выбор <br> - `Multi` - множественный выбор |
 | onNodeClick | `OnNodeClick` | - | Обработчик клика по элементу дерева |
 | expandedNodes | `string[]` | - | Состояние для раскрытых элементов |
 | onExpand | `(expandedKeys: string[], nodeId: string) => void` | - | Колбэк при раскрытии/закрытии элементов |
@@ -53,6 +52,7 @@ const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);
 | showIcons | `boolean` | true | Флаг отвечающий за отображение иконок у элементов дерева |
 | showLines | `boolean` | true | Флаг отвечающий за отображение линий вложенности |
 | className | `string` | - | CSS-класс |
+| 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` - возвращает строку |
 

package/dist/components/Tree/Tree.d.ts

@@ -1,4 +1,4 @@
 import { WithSupportProps } from '@snack-uikit/utils';
 import { TreeBaseProps } from '../../types';
 export type TreeProps = WithSupportProps<TreeBaseProps>;
-export declare function Tree({ data, selected, selectionMode, onSelect, onNodeClick, onExpand, expandedNodes, nodeActions, parentActions, onDataLoad, showLines, showIcons, className, ...rest }: TreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tree({ data, onNodeClick, onExpand, expandedNodes, nodeActions, parentActions, onDataLoad, showLines, showIcons, className, ...rest }: TreeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tree/Tree.js

@@ -15,13 +15,10 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { TreeContextProvider } from '../../contexts/TreeContext';
 import { TreeItem } from '../../helperComponents';
 import styles from './styles.module.css';
+import { extractSelectableProps } from './utils';
 export function Tree(_a) {
-    var { data, selected, selectionMode, onSelect, onNodeClick, onExpand, expandedNodes, nodeActions, parentActions, onDataLoad, showLines = true, showIcons = true, className } = _a, rest = __rest(_a, ["data", "selected", "selectionMode", "onSelect", "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: {
-                data,
-                selected: selected,
-                selectionMode: selectionMode,
-                onSelect: onSelect,
+    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,
                 expandedNodes,
                 onNodeClick,
                 onExpand,
@@ -29,6 +26,5 @@ export function Tree(_a) {
                 parentActions,
                 onDataLoad,
                 showLines,
-                showIcons,
-            }, children: data.map((node, index) => (_jsx(TreeItem, { node: node, tabIndexAvailable: index === 0 || index === data.length - 1 }, node.id))) }) })));
+                showIcons }, extractSelectableProps(rest)), children: data.map((node, index) => (_jsx(TreeItem, { node: node, tabIndexAvailable: index === 0 || index === data.length - 1 }, node.id))) }) })));
 }

package/dist/components/Tree/utils.d.ts

@@ -0,0 +1,2 @@
+import { TreeBaseProps, TreeMultiSelect, TreeSingleSelect, TreeView } from '../../types';
+export declare function extractSelectableProps({ selectionMode, selected, onSelect, }: Pick<TreeBaseProps, 'selectionMode' | 'selected' | 'onSelect'>): Pick<TreeSingleSelect, "selected" | "selectionMode" | "onSelect"> | Pick<TreeMultiSelect, "selected" | "selectionMode" | "onSelect"> | Pick<TreeView, "selected" | "selectionMode" | "onSelect">;

package/dist/components/Tree/utils.js

@@ -0,0 +1,20 @@
+import { SELECTION_MODE } from '../../constants';
+export function extractSelectableProps({ selectionMode, selected, onSelect, }) {
+    switch (selectionMode) {
+        case SELECTION_MODE.Single:
+            return {
+                selectionMode,
+                selected,
+                onSelect,
+            };
+        case SELECTION_MODE.Multi:
+            return {
+                selectionMode,
+                selected,
+                onSelect,
+            };
+        case undefined:
+        default:
+            return {};
+    }
+}

package/dist/contexts/TreeContext.d.ts

@@ -7,6 +7,7 @@ type TreeContextProps = Omit<TreeBaseProps, 'onSelect' | 'onExpand' | 'onNodeCli
     onNodeClick: OnNodeClick;
     isMultiSelect: boolean;
     isSingleSelect: boolean;
+    isSelectable: boolean;
     focusedNodeId?: TreeNodeId;
     setFocusPosition(id: TreeNodeId): void;
     resetFocusPosition(): void;

package/dist/contexts/TreeContext.js

@@ -29,11 +29,13 @@ export const TreeContext = createContext({
     focusableNodeIds: [],
     isMultiSelect: false,
     isSingleSelect: false,
+    isSelectable: false,
 });
 export function TreeContextProvider({ children, value }) {
     const { onNodeClick: onNodeClickProp, onExpand: onExpandProp, onSelect: onSelectProp, selectionMode, data } = value, props = __rest(value, ["onNodeClick", "onExpand", "onSelect", "selectionMode", "data"]);
     const isMultiSelect = selectionMode === SELECTION_MODE.Multi;
     const isSingleSelect = selectionMode === SELECTION_MODE.Single;
+    const isSelectable = Boolean(selectionMode);
     const [expandedNodes, onExpandHandler] = useUncontrolledProp(value.expandedNodes, value.expandedNodes || [], onExpandProp);
     const onExpand = useCallback(node => {
         const isExpanded = expandedNodes.includes(node.id);
@@ -42,7 +44,7 @@ export function TreeContextProvider({ children, value }) {
     }, [expandedNodes, onExpandHandler]);
     const [selectedNodes, onSelectHandler] = useUncontrolledProp(value.selected, [], onSelectProp);
     const onSelect = useCallback((node, parentNode) => {
-        if (node.disabled)
+        if (!isSelectable || node.disabled)
             return;
         if (isSingleSelect) {
             onSelectHandler(node.id, node);
@@ -52,7 +54,7 @@ export function TreeContextProvider({ children, value }) {
             const updatedSelectedNodes = lookupTreeForSelectedNodes({ node, parentNode, selectedNodes });
             onSelectHandler(updatedSelectedNodes, node);
         }
-    }, [isSingleSelect, onSelectHandler, selectedNodes]);
+    }, [isSingleSelect, onSelectHandler, selectedNodes, isSelectable]);
     const focusableNodeIds = useMemo(() => {
         if (!(expandedNodes === null || expandedNodes === void 0 ? void 0 : expandedNodes.length)) {
             return data.map(node => node.id);
@@ -86,6 +88,7 @@ export function TreeContextProvider({ children, value }) {
     }, [isSingleSelect, onSelect, onNodeClickProp]);
     return (_jsx(TreeContext.Provider, { value: Object.assign(Object.assign({}, props), { data, selected: selectedNodes, isSingleSelect,
             isMultiSelect,
+            isSelectable,
             expandedNodes,
             onExpand,
             onSelect,

package/dist/helperComponents/TreeNode/TreeNode.js

@@ -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, 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, showLines, showIcons, } = useTreeContext();
     const [isDroplistOpen, setDroplistOpen] = useState(false);
     const [isDroplistTriggerFocused, setFocusDroplistTrigger] = useState(false);
     const ref = useRef(null);
@@ -139,7 +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": isSelected, "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 && (_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: {
                             id,
                             title,
                             disabled,

package/dist/types.d.ts

@@ -43,6 +43,7 @@ export type TreeCommonProps = {
      * Режим выбора элементов:
      * <br> - `Single` - одиночный выбор
      * <br> - `Multi` - множественный выбор
+     * <br> - `undefined` - без выбора
      */
     selectionMode?: SelectionMode;
     /** Обработчик клика по элементу дерева */
@@ -68,6 +69,11 @@ export type TreeCommonProps = {
     showLines?: boolean;
     className?: string;
 };
+export type TreeView = Omit<TreeCommonProps, 'selected' | 'selectionMode'> & {
+    selectionMode?: never;
+    selected?: never;
+    onSelect?: never;
+};
 export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
     selectionMode: 'single';
     /** Состояние для выбраного элемента */
@@ -89,4 +95,4 @@ export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {
      */
     onSelect?(selectedKeys: TreeNodeId[], node: TreeNodeProps): void;
 };
-export type TreeBaseProps = TreeMultiSelect | TreeSingleSelect;
+export type TreeBaseProps = TreeView | TreeMultiSelect | TreeSingleSelect;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tree",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -43,5 +43,5 @@
     "react-transition-state": "2.1.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "ebf50540bc191ed0f01ce6f1246f1a3e1263a835"
+  "gitHead": "4b0eba6c0cbe808bf637fc77c2b25666e15668e3"
 }

package/src/components/Tree/Tree.tsx

@@ -2,19 +2,16 @@ import cn from 'classnames';
 
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { SELECTION_MODE } from '../../constants';
 import { TreeContextProvider } from '../../contexts/TreeContext';
 import { TreeItem } from '../../helperComponents';
-import { SelectionMode, TreeBaseProps, TreeMultiSelect, TreeNodeId, TreeSingleSelect } from '../../types';
+import { TreeBaseProps } from '../../types';
 import styles from './styles.module.scss';
+import { extractSelectableProps } from './utils';
 
 export type TreeProps = WithSupportProps<TreeBaseProps>;
 
 export function Tree({
   data,
-  selected,
-  selectionMode,
-  onSelect,
   onNodeClick,
   onExpand,
   expandedNodes,
@@ -31,13 +28,6 @@ export function Tree({
       <TreeContextProvider
         value={{
           data,
-          selected: selected as SelectionMode extends typeof SELECTION_MODE.Single ? TreeNodeId : TreeNodeId[],
-          selectionMode: selectionMode as typeof selected extends string
-            ? typeof SELECTION_MODE.Single
-            : typeof SELECTION_MODE.Multi,
-          onSelect: onSelect as SelectionMode extends typeof SELECTION_MODE.Single
-            ? TreeSingleSelect['onSelect']
-            : TreeMultiSelect['onSelect'],
           expandedNodes,
           onNodeClick,
           onExpand,
@@ -46,6 +36,7 @@ export function Tree({
           onDataLoad,
           showLines,
           showIcons,
+          ...extractSelectableProps(rest),
         }}
       >
         {data.map((node, index) => (

package/src/components/Tree/utils.ts

@@ -0,0 +1,26 @@
+import { SELECTION_MODE } from '../../constants';
+import { TreeBaseProps, TreeMultiSelect, TreeSingleSelect, TreeView } from '../../types';
+
+export function extractSelectableProps({
+  selectionMode,
+  selected,
+  onSelect,
+}: Pick<TreeBaseProps, 'selectionMode' | 'selected' | 'onSelect'>) {
+  switch (selectionMode) {
+    case SELECTION_MODE.Single:
+      return {
+        selectionMode,
+        selected,
+        onSelect,
+      } as Pick<TreeSingleSelect, 'selectionMode' | 'selected' | 'onSelect'>;
+    case SELECTION_MODE.Multi:
+      return {
+        selectionMode,
+        selected,
+        onSelect,
+      } as Pick<TreeMultiSelect, 'selectionMode' | 'selected' | 'onSelect'>;
+    case undefined:
+    default:
+      return {} as Pick<TreeView, 'selectionMode' | 'selected' | 'onSelect'>;
+  }
+}

package/src/contexts/TreeContext.tsx

@@ -12,6 +12,7 @@ type TreeContextProps = Omit<TreeBaseProps, 'onSelect' | 'onExpand' | 'onNodeCli
   onNodeClick: OnNodeClick;
   isMultiSelect: boolean;
   isSingleSelect: boolean;
+  isSelectable: boolean;
   focusedNodeId?: TreeNodeId;
   setFocusPosition(id: TreeNodeId): void;
   resetFocusPosition(): void;
@@ -39,6 +40,7 @@ export const TreeContext = createContext<TreeContextProps>({
   focusableNodeIds: [],
   isMultiSelect: false,
   isSingleSelect: false,
+  isSelectable: false,
 });
 
 export function TreeContextProvider({ children, value }: TreeContextProviderProps) {
@@ -53,6 +55,7 @@ export function TreeContextProvider({ children, value }: TreeContextProviderProp
 
   const isMultiSelect = selectionMode === SELECTION_MODE.Multi;
   const isSingleSelect = selectionMode === SELECTION_MODE.Single;
+  const isSelectable = Boolean(selectionMode);
 
   const [expandedNodes, onExpandHandler] = useUncontrolledProp<TreeNodeId[]>(
     value.expandedNodes,
@@ -75,7 +78,7 @@ export function TreeContextProvider({ children, value }: TreeContextProviderProp
 
   const onSelect = useCallback<TreeContextProps['onSelect']>(
     (node, parentNode) => {
-      if (node.disabled) return;
+      if (!isSelectable || node.disabled) return;
 
       if (isSingleSelect) {
         onSelectHandler(node.id, node);
@@ -88,7 +91,7 @@ export function TreeContextProvider({ children, value }: TreeContextProviderProp
         onSelectHandler(updatedSelectedNodes, node);
       }
     },
-    [isSingleSelect, onSelectHandler, selectedNodes],
+    [isSingleSelect, onSelectHandler, selectedNodes, isSelectable],
   );
 
   const focusableNodeIds = useMemo(() => {
@@ -146,6 +149,7 @@ export function TreeContextProvider({ children, value }: TreeContextProviderProp
         selected: selectedNodes,
         isSingleSelect,
         isMultiSelect,
+        isSelectable,
         expandedNodes,
         onExpand,
         onSelect,

package/src/helperComponents/TreeNode/TreeNode.tsx

@@ -46,6 +46,7 @@ export function TreeNode({
 }: TreeNodeComponentProps) {
   const {
     isMultiSelect,
+    isSelectable,
     onNodeClick,
     selected,
     expandedNodes,
@@ -233,7 +234,7 @@ export function TreeNode({
       <div
         role='treeitem'
         aria-expanded={isExpanded}
-        aria-selected={isSelected}
+        aria-selected={isSelectable ? isSelected : undefined}
         aria-disabled={disabled}
         data-multiselect={isMultiSelect || undefined}
         data-droplist-active={isDroplistOpen || isDroplistTriggerFocused || undefined}

package/src/types.ts

@@ -52,6 +52,7 @@ export type TreeCommonProps = {
    * Режим выбора элементов:
    * <br> - `Single` - одиночный выбор
    * <br> - `Multi` - множественный выбор
+   * <br> - `undefined` - без выбора
    */
   selectionMode?: SelectionMode;
   /** Обработчик клика по элементу дерева */
@@ -78,6 +79,12 @@ export type TreeCommonProps = {
   className?: string;
 };
 
+export type TreeView = Omit<TreeCommonProps, 'selected' | 'selectionMode'> & {
+  selectionMode?: never;
+  selected?: never;
+  onSelect?: never;
+};
+
 export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
   selectionMode: 'single';
   /** Состояние для выбраного элемента */
@@ -101,4 +108,4 @@ export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {
   onSelect?(selectedKeys: TreeNodeId[], node: TreeNodeProps): void;
 };
 
-export type TreeBaseProps = TreeMultiSelect | TreeSingleSelect;
+export type TreeBaseProps = TreeView | TreeMultiSelect | TreeSingleSelect;