@snack-uikit/tree 0.2.2 → 0.3.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.3.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.2.2 (2023-12-07)
 
 ### Only dependencies have been changed

package/README.md

@@ -7,7 +7,7 @@
 
 ## Example
 
-#### selectionMode = Tree.selectionModes.Single
+#### selectionMode = 'single'
 
 ```typescript jsx
 import { Tree } from '@snack-uikit/tree';
@@ -18,10 +18,11 @@ const [selectedNode, setSelected] = useState<TreeNodeId>();
 
 // ...
 
-<Tree data={data} selectionMode={Tree.selectionModes.Single} selected={selectedNode} onSelect={setSelected} />
+<Tree data={data} selectionMode='single' selected={selectedNode} onSelect={setSelected} />
 ```
 
-#### selectionMode = Tree.selectionModes.Multi
+#### selectionMode = 'multi'
+
 ```typescript jsx
 import { Tree } from '@snack-uikit/tree';
 
@@ -31,7 +32,7 @@ const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);
 
 // ...
 
-<Tree data={data} selectionMode={Tree.selectionModes.Multi} selected={selectedNodes} onSelect={setSelected} />
+<Tree data={data} selectionMode='multi' selected={selectedNodes} onSelect={setSelected} />
 ```
 
 
@@ -42,7 +43,7 @@ const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | data* | `TreeNodeProps[]` | - | Данные для отрисовки |
-| selectionMode | enum SelectionMode: `"single"`, `"multi"` | - | Режим выбора элементов: <br> - `Single` - одиночный выбор <br> - `Multi` - множественный выбор |
+| selectionMode | "single" \| "multi" | - | Режим выбора элементов: <br> - `Single` - одиночный выбор <br> - `Multi` - множественный выбор |
 | onNodeClick | `OnNodeClick` | - | Обработчик клика по элементу дерева |
 | expandedNodes | `string[]` | - | Состояние для раскрытых элементов |
 | onExpand | `(expandedKeys: string[], nodeId: string) => void` | - | Колбэк при раскрытии/закрытии элементов |

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

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

package/dist/components/Tree/Tree.js

@@ -12,7 +12,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { SelectionMode } from '../../constants';
 import { TreeContextProvider } from '../../contexts/TreeContext';
 import { TreeItem } from '../../helperComponents';
 import styles from './styles.module.css';
@@ -32,4 +31,3 @@ export function Tree(_a) {
                 showLines,
             } }, { children: data.map((node, index) => (_jsx(TreeItem, { node: node, tabIndexAvailable: index === 0 || index === data.length - 1 }, node.id))) })) })));
 }
-Tree.selectionModes = SelectionMode;

package/dist/constants.d.ts

@@ -1,7 +1,7 @@
-export declare enum SelectionMode {
-    Single = "single",
-    Multi = "multi"
-}
+export declare const SELECTION_MODE: {
+    readonly Single: "single";
+    readonly Multi: "multi";
+};
 export declare const TRANSITION_TIMING: {
     accordionFolding: number;
 };

package/dist/constants.js

@@ -1,8 +1,7 @@
-export var SelectionMode;
-(function (SelectionMode) {
-    SelectionMode["Single"] = "single";
-    SelectionMode["Multi"] = "multi";
-})(SelectionMode || (SelectionMode = {}));
+export const SELECTION_MODE = {
+    Single: 'single',
+    Multi: 'multi',
+};
 export const TRANSITION_TIMING = {
     accordionFolding: 200,
 };

package/dist/contexts/TreeContext.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
-import { SelectionMode } from '../constants';
+import { SELECTION_MODE } from '../constants';
 import { findAllExpandedChildNodeIds, lookupTreeForSelectedNodes } from '../helpers';
 export const TreeContext = createContext({
     data: [],
@@ -32,8 +32,8 @@ export const TreeContext = createContext({
 });
 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 === SelectionMode.Multi;
-    const isSingleSelect = selectionMode === SelectionMode.Single;
+    const isMultiSelect = selectionMode === SELECTION_MODE.Multi;
+    const isSingleSelect = selectionMode === SELECTION_MODE.Single;
     const [expandedNodes, onExpandHandler] = useUncontrolledProp(value.expandedNodes, value.expandedNodes || [], onExpandProp);
     const onExpand = useCallback(node => {
         const isExpanded = expandedNodes.includes(node.id);

package/dist/helperComponents/TreeNode/TreeNode.js

@@ -137,7 +137,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: ButtonFunction.sizes.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", Object.assign({ 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", Object.assign({ className: styles.treeNodeCheckboxWrap }, { children: _jsx(Checkbox, { size: Checkbox.sizes.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 }) }))), _jsx("div", Object.assign({ className: styles.treeNodeIcon, "data-test-id": TEST_IDS.icon }, { children: treeNodeIcon })), _jsx(Typography.SansBodyM, Object.assign({ tag: Typography.tags.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", Object.assign({ 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", Object.assign({ 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 }) }))), _jsx("div", Object.assign({ className: styles.treeNodeIcon, "data-test-id": TEST_IDS.icon }, { children: treeNodeIcon })), _jsx(Typography.SansBodyM, Object.assign({ 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/helperComponents/TreeNode/components/TreeNodeActions.js

@@ -35,5 +35,5 @@ export function TreeNodeActions({ getNodeActions, isDroplistTriggerFocused, focu
                 return;
         }
     };
-    return (_jsx("div", Object.assign({ role: 'presentation', className: styles.treeNodeActions, "data-focused": isDroplistTriggerFocused || undefined, onClick: stopPropagationClick }, { children: _jsx(Droplist, Object.assign({ open: isDroplistOpen, onOpenChange: setDroplistOpen, onFocusLeave: handleDroplistFocusLeave, firstElementRefCallback: firstElementRefCallback, triggerRef: triggerElementRef, placement: Droplist.placements.BottomEnd, triggerElement: _jsx(ButtonFunction, { size: ButtonFunction.sizes.Xs, icon: _jsx(KebabSVG, { size: 24 }), onKeyDown: handleKeyDown, onBlur: onBlurActions, tabIndex: -1, "data-test-id": TEST_IDS.droplistTrigger }) }, { children: droplistActions.map(action => (_jsx(Droplist.ItemSingle, Object.assign({}, action, { onKeyDown: handleDroplistItemKeyDown, onClick: e => handleDroplistItemClick(e, action.onClick), "data-test-id": TEST_IDS.droplistAction }), action.option))) })) })));
+    return (_jsx("div", Object.assign({ role: 'presentation', className: styles.treeNodeActions, "data-focused": isDroplistTriggerFocused || undefined, onClick: stopPropagationClick }, { children: _jsx(Droplist, Object.assign({ open: isDroplistOpen, onOpenChange: setDroplistOpen, onFocusLeave: handleDroplistFocusLeave, firstElementRefCallback: firstElementRefCallback, triggerRef: triggerElementRef, placement: 'bottom-end', triggerElement: _jsx(ButtonFunction, { size: 'xs', icon: _jsx(KebabSVG, { size: 24 }), onKeyDown: handleKeyDown, onBlur: onBlurActions, tabIndex: -1, "data-test-id": TEST_IDS.droplistTrigger }) }, { children: droplistActions.map(action => (_jsx(Droplist.ItemSingle, Object.assign({}, action, { onKeyDown: handleDroplistItemKeyDown, onClick: e => handleDroplistItemClick(e, action.onClick), "data-test-id": TEST_IDS.droplistAction }), action.option))) })) })));
 }

package/dist/types.d.ts

@@ -1,7 +1,8 @@
 import { MouseEvent, MouseEventHandler, ReactNode } from 'react';
 import { ItemSingleProps } from '@snack-uikit/droplist';
-import { WithSupportProps } from '@snack-uikit/utils';
-import { SelectionMode } from './constants';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
+import { SELECTION_MODE } from './constants';
+export type SelectionMode = ValueOf<typeof SELECTION_MODE>;
 export type TreeNodeId = string;
 export type BaseTreeNode = WithSupportProps<{
     /** Идентификатор элемента */
@@ -63,7 +64,7 @@ export type TreeCommonProps = {
     className?: string;
 };
 export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
-    selectionMode: SelectionMode.Single;
+    selectionMode: 'single';
     /** Состояние для выбраного элемента */
     /** <br> - При <strong>selectionMode</strong>=`Single` - принимает строку */
     selected?: TreeNodeId;
@@ -71,7 +72,7 @@ export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
     onSelect?(selectedKey: TreeNodeId, node: TreeNodeProps): void;
 };
 export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {
-    selectionMode: SelectionMode.Multi;
+    selectionMode: 'multi';
     /**
      * Состояние для выбраных элементов:
      * <br> - При <strong>selectionMode</strong>=`Multi` - принимает массив строк

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tree",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,16 +32,16 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.14.1",
-    "@snack-uikit/droplist": "0.11.2",
+    "@snack-uikit/button": "0.15.0",
+    "@snack-uikit/droplist": "0.12.0",
     "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/toggles": "0.8.1",
-    "@snack-uikit/truncate-string": "0.3.1",
-    "@snack-uikit/typography": "0.5.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/toggles": "0.9.0",
+    "@snack-uikit/truncate-string": "0.4.0",
+    "@snack-uikit/typography": "0.6.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
     "react-transition-state": "2.1.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "e124e31699926810648702f97db72413d7ebd2b2"
+  "gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
 }

package/src/components/Tree/Tree.tsx

@@ -2,10 +2,10 @@ import cn from 'classnames';
 
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { SelectionMode } from '../../constants';
+import { SELECTION_MODE } from '../../constants';
 import { TreeContextProvider } from '../../contexts/TreeContext';
 import { TreeItem } from '../../helperComponents';
-import { TreeBaseProps, TreeMultiSelect, TreeNodeId, TreeSingleSelect } from '../../types';
+import { SelectionMode, TreeBaseProps, TreeMultiSelect, TreeNodeId, TreeSingleSelect } from '../../types';
 import styles from './styles.module.scss';
 
 export type TreeProps = WithSupportProps<TreeBaseProps>;
@@ -30,9 +30,11 @@ export function Tree({
       <TreeContextProvider
         value={{
           data,
-          selected: selected as typeof SelectionMode extends SelectionMode.Single ? TreeNodeId : TreeNodeId[],
-          selectionMode: selectionMode as typeof selected extends string ? SelectionMode.Single : SelectionMode.Multi,
-          onSelect: onSelect as typeof SelectionMode extends SelectionMode.Single
+          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,
@@ -51,5 +53,3 @@ export function Tree({
     </div>
   );
 }
-
-Tree.selectionModes = SelectionMode;

package/src/constants.ts

@@ -1,7 +1,7 @@
-export enum SelectionMode {
-  Single = 'single',
-  Multi = 'multi',
-}
+export const SELECTION_MODE = {
+  Single: 'single',
+  Multi: 'multi',
+} as const;
 
 export const TRANSITION_TIMING = {
   accordionFolding: 200,

package/src/contexts/TreeContext.tsx

@@ -1,7 +1,7 @@
 import { createContext, Dispatch, ReactNode, SetStateAction, useCallback, useContext, useMemo, useState } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
-import { SelectionMode } from '../constants';
+import { SELECTION_MODE } from '../constants';
 import { findAllExpandedChildNodeIds, lookupTreeForSelectedNodes } from '../helpers';
 import { OnNodeClick, ParentNode, TreeBaseProps, TreeNodeId, TreeNodeProps } from '../types';
 
@@ -51,8 +51,8 @@ export function TreeContextProvider({ children, value }: TreeContextProviderProp
     ...props
   } = value;
 
-  const isMultiSelect = selectionMode === SelectionMode.Multi;
-  const isSingleSelect = selectionMode === SelectionMode.Single;
+  const isMultiSelect = selectionMode === SELECTION_MODE.Multi;
+  const isSingleSelect = selectionMode === SELECTION_MODE.Single;
 
   const [expandedNodes, onExpandHandler] = useUncontrolledProp<TreeNodeId[]>(
     value.expandedNodes,

package/src/helperComponents/TreeNode/TreeNode.tsx

@@ -215,7 +215,7 @@ export function TreeNode({
 
       {isExpandable && (
         <ButtonFunction
-          size={ButtonFunction.sizes.Xs}
+          size='xs'
           icon={<ChevronRightSVG />}
           disabled={disabled}
           loading={isLoading}
@@ -246,7 +246,7 @@ export function TreeNode({
         {isMultiSelect && (
           <div className={styles.treeNodeCheckboxWrap}>
             <Checkbox
-              size={Checkbox.sizes.S}
+              size='s'
               disabled={disabled}
               checked={!disabled && isSelected}
               indeterminate={!disabled && !isSelected && nestedNodesSelection?.someSelected}
@@ -262,7 +262,7 @@ export function TreeNode({
           {treeNodeIcon}
         </div>
 
-        <Typography.SansBodyM tag={Typography.tags.div} className={styles.treeNodeTitle}>
+        <Typography.SansBodyM tag='div' className={styles.treeNodeTitle}>
           <TruncateString text={title} data-test-id={TEST_IDS.title} />
         </Typography.SansBodyM>
 

package/src/helperComponents/TreeNode/components/TreeNodeActions.tsx

@@ -82,10 +82,10 @@ export function TreeNodeActions({
         onFocusLeave={handleDroplistFocusLeave}
         firstElementRefCallback={firstElementRefCallback}
         triggerRef={triggerElementRef}
-        placement={Droplist.placements.BottomEnd}
+        placement='bottom-end'
         triggerElement={
           <ButtonFunction
-            size={ButtonFunction.sizes.Xs}
+            size='xs'
             icon={<KebabSVG size={24} />}
             onKeyDown={handleKeyDown}
             onBlur={onBlurActions}

package/src/types.ts

@@ -1,9 +1,11 @@
 import { MouseEvent, MouseEventHandler, ReactNode } from 'react';
 
 import { ItemSingleProps } from '@snack-uikit/droplist';
-import { WithSupportProps } from '@snack-uikit/utils';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 
-import { SelectionMode } from './constants';
+import { SELECTION_MODE } from './constants';
+
+export type SelectionMode = ValueOf<typeof SELECTION_MODE>;
 
 export type TreeNodeId = string;
 
@@ -72,7 +74,7 @@ export type TreeCommonProps = {
 };
 
 export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
-  selectionMode: SelectionMode.Single;
+  selectionMode: 'single';
   /** Состояние для выбраного элемента */
   /** <br> - При <strong>selectionMode</strong>=`Single` - принимает строку */
   selected?: TreeNodeId;
@@ -81,7 +83,7 @@ export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
 };
 
 export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {
-  selectionMode: SelectionMode.Multi;
+  selectionMode: 'multi';
   /**
    * Состояние для выбраных элементов:
    * <br> - При <strong>selectionMode</strong>=`Multi` - принимает массив строк