@snack-uikit/tree 0.6.29 → 0.6.30-preview-71543426.0

package/dist/esm/helperComponents/ExpandableTreeNode/ExpandableTreeNode.d.ts

@@ -0,0 +1,11 @@
+import { ParentNode } from '../../types';
+import { TreeNodeProps } from '../TreeNode';
+type ExpandableTreeNodeProps = {
+    node: TreeNodeProps;
+    parentNode?: ParentNode & {
+        parentNode?: ParentNode;
+    };
+    tabIndexAvailable?: boolean;
+};
+export declare function ExpandableTreeNode({ node: { 'data-test-id': dataTestId, ...node }, parentNode, tabIndexAvailable, }: ExpandableTreeNodeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/ExpandableTreeNode/index.js

@@ -0,0 +1 @@
+export * from './ExpandableTreeNode';

package/dist/esm/helperComponents/ExpandableTreeNode/styles.module.css

@@ -0,0 +1,34 @@
+.expandableTreeNode{
+  position:relative;
+  width:100%;
+}
+
+.expandableContent{
+  overflow:hidden;
+  display:flex;
+  box-sizing:border-box;
+  min-height:0;
+  visibility:hidden;
+  transition:visibility 200ms;
+}
+
+.expandableWrap{
+  overflow:hidden;
+  display:grid;
+  grid-template-rows:0fr;
+  box-sizing:border-box;
+  width:100%;
+  transition:grid-template-rows 200ms;
+}
+.expandableWrap[data-expanded=true]{
+  overflow:unset;
+  grid-template-rows:1fr;
+}
+.expandableWrap[data-expanded=true] .expandableContent{
+  visibility:visible;
+}
+
+.expandableNested{
+  width:100%;
+  min-width:0;
+}

package/dist/esm/helperComponents/TreeItem/TreeItem.d.ts

@@ -0,0 +1,8 @@
+import { ParentNode, TreeNodeProps } from '../../types';
+type TreeItemProps = {
+    node: TreeNodeProps;
+    parentNode?: ParentNode;
+    tabIndexAvailable?: boolean;
+};
+export declare function TreeItem({ node, tabIndexAvailable, parentNode }: TreeItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/TreeItem/index.js

@@ -0,0 +1 @@
+export * from './TreeItem';

package/dist/esm/helperComponents/TreeLine/TreeLine.d.ts

@@ -0,0 +1,7 @@
+export type TreeLineProps = {
+    halfWidth?: boolean;
+    halfHeight?: boolean;
+    visible?: boolean;
+    horizontal?: boolean;
+};
+export declare function TreeLine({ halfWidth, halfHeight, horizontal, visible }: TreeLineProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/TreeLine/index.js

@@ -0,0 +1 @@
+export * from './TreeLine';

package/dist/esm/helperComponents/TreeLine/styles.module.css

@@ -0,0 +1,37 @@
+.treeLine{
+  pointer-events:none;
+  position:relative;
+  flex-shrink:0;
+  width:var(--size-tree-item-line-width, 24px);
+  visibility:hidden;
+}
+.treeLine[data-visible]{
+  visibility:visible;
+}
+.treeLine[data-visible]::after{
+  content:"";
+  position:absolute;
+  top:0;
+  left:50%;
+  transform:translateX(-50%);
+  width:1px;
+  height:calc(100% - var(--size-tree-item-height, 32px) / 2);
+  background:var(--sys-neutral-decor-default, #dde0ea);
+}
+.treeLine[data-half-height]::after{
+  height:calc(100% - var(--size-tree-item-height, 32px) / 2);
+}
+.treeLine[data-horizontal]::after{
+  top:50%;
+  left:-50%;
+  transform:translateY(-50%);
+  width:calc(150% - var(--space-tree-item-child-line-padding, 8px));
+  height:1px;
+}
+.treeLine[data-horizontal][data-half-width]{
+  width:0;
+}
+.treeLine[data-horizontal][data-half-width]::after{
+  left:calc(0px - var(--size-tree-item-line-width, 24px) / 2);
+  width:calc(var(--size-tree-item-line-width, 24px) / 2);
+}

package/dist/esm/helperComponents/TreeNode/TreeNode.d.ts

@@ -0,0 +1,11 @@
+import { KeyboardEventHandler, MouseEventHandler } from 'react';
+import { ParentNode, TreeNodeProps } from '../../types';
+export type { TreeNodeProps };
+type TreeNodeComponentProps = TreeNodeProps & {
+    onChevronClick?: MouseEventHandler<HTMLElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    isLoading?: boolean;
+    parentNode?: ParentNode;
+    tabIndexAvailable?: boolean;
+};
+export declare function TreeNode({ id, title, icon, expandedIcon, collapsedIcon, disabled, onClick, nested, className, onChevronClick, onKeyDown, isLoading, parentNode, tabIndexAvailable, ...rest }: TreeNodeComponentProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/TreeNode/components/TreeNodeActions.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ItemProps } from '@snack-uikit/list';
+import { TreeNodeProps } from '../../../types';
+type TreeNodeActionsProps = {
+    isDroplistOpen: boolean;
+    setDroplistOpen: Dispatch<SetStateAction<boolean>>;
+    getNodeActions(node: TreeNodeProps): ItemProps[];
+    node: TreeNodeProps;
+    isDroplistTriggerFocused: boolean;
+    focusNode(): void;
+    onBlurActions(): void;
+};
+export declare function TreeNodeActions({ getNodeActions, isDroplistTriggerFocused, focusNode, isDroplistOpen, setDroplistOpen, onBlurActions, node, }: TreeNodeActionsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/helperComponents/TreeNode/components/index.js

@@ -0,0 +1 @@
+export * from './TreeNodeActions';

package/dist/esm/helperComponents/TreeNode/index.js

@@ -0,0 +1 @@
+export * from './TreeNode';

package/dist/esm/helperComponents/TreeNode/styles.module.css

@@ -0,0 +1,113 @@
+.treeNode{
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+}
+
+.treeNodeIcon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+.treeNodeIcon svg{
+  width:var(--size-icon-container-s, 24px) !important;
+  height:var(--size-icon-container-s, 24px) !important;
+}
+
+.treeNodeTitle{
+  flex-grow:1;
+  box-sizing:border-box;
+  min-width:var(--size-tree-item-checkbox-wrap, 24px);
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.treeNodeActions{
+  display:flex;
+  visibility:hidden;
+}
+.treeNodeActions:focus-visible, .treeNodeActions[data-focused]{
+  visibility:visible;
+}
+
+.treeNodeContent{
+  height:var(--size-tree-item-height, 32px);
+  gap:var(--space-tree-item-content-layout-gap, 4px);
+  padding-right:var(--space-tree-item-content-layout-padding, 4px);
+  padding-left:var(--space-tree-item-content-layout-padding, 4px);
+  border-radius:var(--radius-tree-item-content-layout, 8px);
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+}
+.treeNodeContent::before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  box-sizing:border-box;
+  width:100%;
+  height:100%;
+  opacity:0;
+  background-color:var(--sys-neutral-accent-default, #787b8a);
+  border-radius:inherit;
+}
+.treeNodeContent:hover::before, .treeNodeContent:focus-visible::before, .treeNodeContent[data-droplist-active]::before{
+  opacity:var(--opacity-a008, 0.08);
+}
+.treeNodeContent:hover .treeNodeActions, .treeNodeContent:focus-visible .treeNodeActions, .treeNodeContent[data-droplist-active] .treeNodeActions{
+  visibility:visible;
+}
+.treeNodeContent:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+  outline-color:var(--sys-available-complementary, #1c1c24);
+}
+.treeNodeContent[data-multiselect]{
+  cursor:default;
+}
+.treeNodeContent[aria-disabled=true]{
+  cursor:not-allowed;
+}
+.treeNodeContent[aria-disabled=true]::before{
+  display:none;
+}
+.treeNodeContent[aria-disabled=true] .treeNodeTitle, .treeNodeContent[aria-disabled=true] .treeNodeIcon{
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+.treeNodeContent[aria-selected=true]:not([data-multiselect])::before{
+  opacity:var(--opacity-a008, 0.08);
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.treeNodeContent[aria-selected=true]:not([data-multiselect]):hover::before{
+  opacity:var(--opacity-a016, 0.16);
+}
+
+.treeNodeCheckboxWrap{
+  width:var(--size-tree-item-checkbox-wrap, 24px);
+  height:var(--size-tree-item-checkbox-wrap, 24px);
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+
+.treeNodeExpandButton{
+  box-sizing:border-box;
+}
+.treeNodeExpandButton svg{
+  transition:transform 0.2s ease;
+}
+.treeNodeExpandButton[data-expanded] svg{
+  transform:rotate(90deg);
+}

package/dist/esm/helperComponents/TreeNode/utils.d.ts

@@ -0,0 +1,3 @@
+import { FocusEvent, MouseEvent } from 'react';
+export declare function stopPropagationClick(e: MouseEvent<HTMLInputElement>): void;
+export declare function stopPropagationFocus(e: FocusEvent<HTMLInputElement>): void;

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,4 @@
+export * from './ExpandableTreeNode';
+export * from './TreeNode';
+export * from './TreeLine';
+export * from './TreeItem';

package/dist/esm/helpers.d.ts

@@ -0,0 +1,11 @@
+import { ParentNode, TreeNodeId, TreeNodeProps } from './types';
+export declare function checkNestedNodesSelection(nodes: TreeNodeProps[], selectedKeys: TreeNodeId[]): {
+    someSelected: boolean;
+    allSelected: boolean;
+};
+export declare function findAllExpandedChildNodeIds(nodes: TreeNodeProps[], expandedNodes: TreeNodeId[]): string[];
+export declare function lookupTreeForSelectedNodes({ node, selectedNodes, parentNode, }: {
+    node: Pick<TreeNodeProps, 'id' | 'nested' | 'disabled'>;
+    selectedNodes: TreeNodeId[];
+    parentNode?: ParentNode;
+}): string[];

package/dist/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export type { OnNodeClick, TreeNodeId, TreeNodeProps } from './types';

package/dist/esm/types.d.ts

@@ -0,0 +1,100 @@
+import { MouseEvent, MouseEventHandler, ReactNode } from 'react';
+import { ItemProps } from '@snack-uikit/list';
+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<{
+    /** Идентификатор элемента */
+    id: TreeNodeId;
+    /** Имя элемента */
+    title: string | ((value: Pick<BaseTreeNode, 'id' | 'disabled'>) => ReactNode);
+    /** Является ли элемент деактивированным */
+    disabled?: boolean;
+    /** Обработчик клика по элементу */
+    onClick?: MouseEventHandler;
+    className?: string;
+}>;
+export type ChildTreeNode = BaseTreeNode & {
+    /** Иконка дочернего элемента */
+    icon?: ReactNode;
+    nested?: never;
+    expandedIcon?: never;
+    collapsedIcon?: never;
+};
+export type ParentTreeNode = BaseTreeNode & {
+    icon?: never;
+    /** Иконка элемента-родителя в открытом состоянии */
+    expandedIcon?: ReactNode;
+    /** Иконка элемента-родителя в закрытом состоянии */
+    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'> & {
+    parentNode?: ParentNode;
+};
+export type OnNodeClick = (node: TreeNodeProps, e: MouseEvent) => void;
+export type TreeCommonProps = {
+    /** Данные для отрисовки */
+    data: TreeNodeProps[];
+    /**
+     * Режим выбора элементов:
+     * <br> - `Single` - одиночный выбор
+     * <br> - `Multi` - множественный выбор
+     * <br> - `undefined` - без выбора
+     */
+    selectionMode?: SelectionMode;
+    /** Обработчик клика по элементу дерева */
+    onNodeClick?: OnNodeClick;
+    /** Состояние для раскрытых элементов */
+    expandedNodes?: TreeNodeId[];
+    /** Колбэк при раскрытии/закрытии элементов */
+    onExpand?(expandedKeys: TreeNodeId[], nodeId: TreeNodeId): void;
+    /** Состояние для выбранных элементов */
+    selected?: TreeNodeId[] | TreeNodeId;
+    /** Колбэк для асинхронной загрузки данных при раскрытии дерева */
+    onDataLoad?(node: TreeNodeProps): Promise<boolean | unknown>;
+    /** Дополнительные действия для элемента-родителя */
+    parentActions?(node: TreeNodeProps): ItemProps[];
+    /** Дополнительные действия для элемента-потомка */
+    nodeActions?(node: TreeNodeProps): ItemProps[];
+    /**
+     * Флаг отвечающий за отображение иконок у элементов дерева
+     * @default true
+     */
+    showIcons?: boolean;
+    /** Флаг отвечающий за отображение линий вложенности */
+    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';
+    /** Состояние для выбраного элемента */
+    /** <br> - При <strong>selectionMode</strong>=`Single` - принимает строку */
+    selected?: TreeNodeId;
+    /** <br> - При <strong>selectionMode</strong>=`Single` - возвращает строку */
+    onSelect?(selectedKey: TreeNodeId, node: TreeNodeProps): void;
+    showToggle?: boolean;
+};
+export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {
+    selectionMode: 'multi';
+    /**
+     * Состояние для выбраных элементов:
+     * <br> - При <strong>selectionMode</strong>=`Multi` - принимает массив строк
+     */
+    selected?: TreeNodeId[];
+    /**
+     * Колбэк при изменении выбраных элементов:
+     * <br> - При <strong>selectionMode</strong>=`Multi` - возвращает массив строк
+     */
+    onSelect?(selectedKeys: TreeNodeId[], node: TreeNodeProps): void;
+};
+export type TreeBaseProps = TreeView | TreeMultiSelect | TreeSingleSelect;

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Tree",
-  "version": "0.6.29",
+  "version": "0.6.30-preview-71543426.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/tree",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Белов Алексей <anbelov@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,16 +34,16 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.17.5",
-    "@snack-uikit/icons": "0.22.1",
-    "@snack-uikit/list": "0.18.0",
-    "@snack-uikit/toggles": "0.10.4",
-    "@snack-uikit/truncate-string": "0.4.24",
-    "@snack-uikit/typography": "0.6.3",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/button": "0.17.6-preview-71543426.0",
+    "@snack-uikit/icons": "0.22.2-preview-71543426.0",
+    "@snack-uikit/list": "0.18.1-preview-71543426.0",
+    "@snack-uikit/toggles": "0.10.5-preview-71543426.0",
+    "@snack-uikit/truncate-string": "0.4.25-preview-71543426.0",
+    "@snack-uikit/typography": "0.6.4-preview-71543426.0",
+    "@snack-uikit/utils": "3.4.1-preview-71543426.0",
     "classnames": "2.3.2",
     "react-transition-state": "2.1.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "a80c5b606728e51dd8470bf622cbab4f4b6fe337"
+  "gitHead": "3102614275e261c8f41db0f6c00a1f6b6276b2a9"
 }