ods-ant 0.2.0 → 0.4.1

package/dist-lib/display/Tree.cjs

@@ -0,0 +1,199 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`),t=require(`./Icon.cjs`);let n=require(`antd`),r=require(`react`),i=require(`react/jsx-runtime`);var a=`ds-tree-styles`,o=`ds-tree`,s={navigationTree:{density:`comfortable`,showIcon:!1,showLine:!1,blockNode:!0,selectable:!0,checkable:!1,checkStrictly:!1},selectionTree:{density:`comfortable`,showIcon:!1,showLine:!0,blockNode:!0,selectable:!0,checkable:!0,checkStrictly:!1},permissionTree:{density:`comfortable`,showIcon:!1,showLine:!0,blockNode:!0,selectable:!1,checkable:!0,checkStrictly:!1},folderTree:{density:`comfortable`,showIcon:!0,showLine:!0,blockNode:!0,selectable:!0,checkable:!1,checkStrictly:!1},compact:{density:`compact`,showIcon:!1,showLine:!1,blockNode:!0,selectable:!0,checkable:!1,checkStrictly:!1}};function c(...e){return e.filter(Boolean).join(` `).trim()}function l(){if(typeof document>`u`)return;let{tree:t,checkbox:n}=e.dsSemanticTokens,r=document.getElementById(a);r||(r=document.createElement(`style`),r.id=a,document.head.appendChild(r)),r.textContent=`
+    .${o}.ant-tree {
+      background: ${t.surface.default};
+      color: ${t.text.title};
+      font-family: 'Nunito', sans-serif;
+      transition: none !important;
+      animation-duration: 0s !important;
+    }
+
+    .${o}.ant-tree,
+    .${o}.ant-tree .ant-tree-node-content-wrapper,
+    .${o}.ant-tree .ant-tree-title,
+    .${o}.ant-tree .ant-tree-switcher,
+    .${o}.ant-tree .ant-tree-iconEle,
+    .${o}.ant-tree .ant-tree-checkbox {
+      transition: none !important;
+      animation-duration: 0s !important;
+      box-shadow: none !important;
+    }
+
+    .${o}.ant-tree .ant-tree-treenode {
+      padding: 1px 0;
+    }
+
+    .${o}.ant-tree .ant-tree-node-content-wrapper {
+      min-height: var(--ds-tree-row-height);
+      padding: var(--ds-tree-row-padding);
+      border: 1px solid transparent;
+      border-radius: ${t.border.radius};
+      color: ${t.text.title};
+      line-height: var(--ds-tree-line-height);
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .${o}.ant-tree .ant-tree-title {
+      color: inherit;
+      font-size: var(--ds-tree-font-size);
+      line-height: var(--ds-tree-line-height);
+      font-weight: 600;
+    }
+
+    .${o}.ant-tree .ant-tree-node-content-wrapper:hover {
+      background: ${t.surface.hover};
+    }
+
+    .${o}.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
+      background: ${t.surface.selected};
+      border-color: ${t.border.selected};
+      color: ${t.text.selected};
+    }
+
+    .${o}.ant-tree[data-ds-tree-variant='permissionTree'] .ant-tree-node-content-wrapper.ant-tree-node-selected {
+      background: ${t.surface.selectedStrong};
+    }
+
+    .${o}.ant-tree .ant-tree-switcher {
+      color: ${t.icon.switcher};
+      width: var(--ds-tree-switcher-size);
+      height: var(--ds-tree-switcher-size);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 0;
+      margin-top: var(--ds-tree-switcher-offset, calc((var(--ds-tree-row-height) - var(--ds-tree-switcher-size)) / 2));
+    }
+
+    .${o}.ant-tree .ant-tree-switcher .ant-tree-switcher-icon,
+    .${o}.ant-tree .ant-tree-switcher .anticon,
+    .${o}.ant-tree .ant-tree-switcher svg {
+      width: var(--ds-tree-switcher-size);
+      height: var(--ds-tree-switcher-size);
+      color: inherit;
+      font-size: var(--ds-tree-switcher-size);
+      line-height: 1;
+    }
+
+    .${o}.ant-tree .ant-tree-iconEle,
+    .${o}.ant-tree .ant-tree-iconEle .anticon,
+    .${o}.ant-tree .ant-tree-iconEle svg,
+    .${o}.ant-tree .ds-icon {
+      width: var(--ds-tree-icon-size);
+      height: var(--ds-tree-icon-size);
+      color: ${t.icon.node};
+      font-size: var(--ds-tree-icon-size);
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox {
+      margin-inline-end: 6px;
+      margin-top: var(--ds-tree-control-offset, 0px);
+      width: var(--ds-tree-checkbox-size);
+      height: var(--ds-tree-checkbox-size);
+      --ds-tree-checkbox-mark-width: 6px;
+      --ds-tree-checkbox-mark-height: 10px;
+      --ds-tree-checkbox-mark-stroke: 2px;
+      border-radius: ${n.radius}px;
+      border: ${n.borderWidth.default}px solid ${n.border.default};
+      background: ${n.background.default};
+      box-sizing: border-box;
+      position: relative;
+      line-height: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner {
+      width: 100%;
+      height: 100%;
+      border-color: transparent;
+      border-radius: ${n.radius}px;
+      background: transparent;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox::after,
+    .${o}.ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner::after {
+      transition: none !important;
+      animation-duration: 0s !important;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox:hover:not(.ant-tree-checkbox-checked):not(.ant-tree-checkbox-indeterminate):not(.ant-tree-checkbox-disabled),
+    .${o}.ant-tree .ant-tree-checkbox:active:not(.ant-tree-checkbox-checked):not(.ant-tree-checkbox-indeterminate):not(.ant-tree-checkbox-disabled) {
+      border-color: ${n.border.default};
+      border-width: ${n.borderWidth.default}px;
+      background: ${n.background.default};
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-checked {
+      border-color: transparent;
+      background: ${n.background.checked};
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-checked::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin: 0;
+      width: var(--ds-tree-checkbox-mark-width);
+      height: var(--ds-tree-checkbox-mark-height);
+      border: solid ${n.mark.checked};
+      border-width: 0 var(--ds-tree-checkbox-mark-stroke) var(--ds-tree-checkbox-mark-stroke) 0;
+      background: transparent;
+      transform: translate(-50%, -58%) rotate(45deg);
+      transform-origin: center;
+      box-sizing: border-box;
+      opacity: 1;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-indeterminate {
+      border-color: ${n.border.checked};
+      background: ${n.background.checked};
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-indeterminate::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin: 0;
+      border: 0;
+      border-radius: 2px;
+      background: ${n.mark.indeterminate};
+      width: var(--ds-tree-checkbox-indeterminate-width);
+      height: var(--ds-tree-checkbox-indeterminate-height);
+      transform: translate(-50%, -50%);
+      opacity: 1;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-checked .ant-tree-checkbox-inner,
+    .${o}.ant-tree .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {
+      background: transparent;
+      border-color: transparent;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-disabled,
+    .${o}.ant-tree .ant-tree-checkbox-disabled.ant-tree-checkbox-checked,
+    .${o}.ant-tree .ant-tree-checkbox-disabled.ant-tree-checkbox-indeterminate {
+      border-color: transparent;
+      background: ${n.background.disabled};
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-disabled.ant-tree-checkbox-indeterminate::after {
+      background: ${n.mark.indeterminate};
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-disabled + span,
+    .${o}.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal[aria-disabled='true'],
+    .${o}.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
+      color: ${t.text.disabled};
+    }
+  `}function u(e,t){return t??s[e].density}function d(e){return n=>n.isLeaf?(0,i.jsx)(t.Icon,{dsGroup:`empty`,dsName:`commonFileText`,dsSize:e,dsTone:`muted`,"aria-label":`file`}):(0,i.jsx)(t.Icon,{dsGroup:`empty`,dsName:`folderEmpty`,dsSize:e,dsTone:`muted`,"aria-label":`folder`})}function f(t,n,r){let i=e.dsSemanticTokens.tree.size[t],a=t===`compact`?e.dsSemanticTokens.checkbox.size.sm:e.dsSemanticTokens.checkbox.size.md,o=t===`compact`?e.dsSemanticTokens.checkbox.indeterminate.sm:e.dsSemanticTokens.checkbox.indeterminate.md,s=t===`compact`?{width:5,height:9}:{width:6,height:10},c=n?a:i.iconSize,l=parseInt(i.rowHeight,10),u=n?Math.max(0,Math.floor((l-a)/4)):0;return{"--ds-tree-row-height":i.rowHeight,"--ds-tree-row-padding":i.rowPadding,"--ds-tree-font-size":i.fontSize,"--ds-tree-line-height":i.lineHeight,"--ds-tree-icon-size":`${i.iconSize}px`,"--ds-tree-switcher-size":`${c}px`,"--ds-tree-control-offset":`${u}px`,"--ds-tree-switcher-offset":n?`${u}px`:void 0,"--ds-tree-checkbox-size":`${a}px`,"--ds-tree-checkbox-indeterminate-width":`${o.width}px`,"--ds-tree-checkbox-indeterminate-height":`${o.height}px`,"--ds-tree-checkbox-mark-width":`${s.width}px`,"--ds-tree-checkbox-mark-height":`${s.height}px`,...r}}var p=({blockNode:t,checkable:a,checkStrictly:p,className:m,dsDensity:h,dsNodeIcon:g,dsShowIcons:_,dsShowLines:v,dsSwitcherIcon:y,dsVariant:b=`navigationTree`,selectable:x,showIcon:S,showLine:C,style:w,switcherIcon:T,...E})=>{(0,r.useEffect)(()=>{l()},[]);let D=s[b],O=u(b,h),k=e.dsSemanticTokens.tree.size[O].iconSize,A=v??C??D.showLine,j=_??S??D.showIcon,M=a??D.checkable,N=g??(b===`folderTree`&&j?d(k):void 0),P=y??T;return(0,i.jsx)(n.Tree,{...E,blockNode:t??D.blockNode,checkStrictly:p??D.checkStrictly,checkable:M,className:c(o,m),"data-ds-tree-checkable":String(!!M),"data-ds-tree-density":O,"data-ds-tree-variant":b,icon:N,selectable:x??D.selectable,showIcon:j,showLine:A,style:f(O,!!M,w),switcherIcon:P})},m=({blockNode:t,checkable:a,checkStrictly:p,className:m,dsDensity:h,dsNodeIcon:g,dsShowIcons:_,dsShowLines:v,dsSwitcherIcon:y,dsVariant:b=`folderTree`,selectable:x,showIcon:S,showLine:C,style:w,switcherIcon:T,...E})=>{(0,r.useEffect)(()=>{l()},[]);let D=s[b],O=u(b,h),k=e.dsSemanticTokens.tree.size[O].iconSize,A=v??C??D.showLine,j=_??S??D.showIcon,M=a??D.checkable,N=g??(b===`folderTree`&&j?d(k):void 0),P=y??T;return(0,i.jsx)(n.Tree.DirectoryTree,{...E,blockNode:t??D.blockNode,checkStrictly:p??D.checkStrictly,checkable:M,className:c(o,m),"data-ds-tree-checkable":String(!!M),"data-ds-tree-density":O,"data-ds-tree-variant":b,icon:N,selectable:x??D.selectable,showIcon:j,showLine:A,style:f(O,!!M,w),switcherIcon:P})},h=p;h.TreeNode=n.Tree.TreeNode,h.DirectoryTree=m,exports.Tree=h;
+//# sourceMappingURL=Tree.cjs.map

package/dist-lib/display/Tree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.cjs","names":[],"sources":["../../src/ds/display/Tree.tsx"],"sourcesContent":["import { Tree as AntTree } from 'antd';\nimport type { DataNode as AntDataNode } from 'antd/es/tree';\nimport type { DirectoryTreeProps as AntDirectoryTreeProps } from 'antd/es/tree/DirectoryTree';\nimport type { TreeProps as AntTreeProps } from 'antd/es/tree/Tree';\nimport type { BasicDataNode } from '@rc-component/tree';\nimport type RcTree from '@rc-component/tree';\nimport type { CSSProperties } from 'react';\nimport { useEffect } from 'react';\nimport { Icon } from './Icon';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSTreeVariant = 'navigationTree' | 'selectionTree' | 'permissionTree' | 'folderTree' | 'compact';\nexport type DSTreeDensity = 'comfortable' | 'compact';\n\ntype RestrictedAntVisualProps = 'showLine' | 'showIcon' | 'icon' | 'switcherIcon' | 'blockNode' | 'selectable' | 'checkable' | 'checkStrictly';\n\nexport type TreeProps<T extends BasicDataNode | AntDataNode = AntDataNode> = Omit<AntTreeProps<T>, RestrictedAntVisualProps> & {\n  /** Semantic DS tree variant for navigation, selection, permissions, and folder structures. */\n  dsVariant?: DSTreeVariant;\n  /** Optional density override. Defaults from `dsVariant`. */\n  dsDensity?: DSTreeDensity;\n  /** Toggle lines regardless of variant defaults. */\n  dsShowLines?: boolean;\n  /** Toggle node icons regardless of variant defaults. */\n  dsShowIcons?: boolean;\n  /** Override icon rendering for node rows. */\n  dsNodeIcon?: AntTreeProps<T>['icon'];\n  /** Override switcher icon rendering. */\n  dsSwitcherIcon?: AntTreeProps<T>['switcherIcon'];\n  /** Optional explicit override of block node behavior. */\n  blockNode?: AntTreeProps<T>['blockNode'];\n  /** Optional explicit override of selection behavior. */\n  selectable?: AntTreeProps<T>['selectable'];\n  /** Optional explicit override of checkboxes. */\n  checkable?: AntTreeProps<T>['checkable'];\n  /** Optional explicit override of strict checking. */\n  checkStrictly?: AntTreeProps<T>['checkStrictly'];\n  /** Optional explicit override of icon visibility. */\n  showIcon?: AntTreeProps<T>['showIcon'];\n  /** Optional explicit override of tree lines. */\n  showLine?: AntTreeProps<T>['showLine'];\n  /** Optional explicit override of switcher icon rendering. */\n  switcherIcon?: AntTreeProps<T>['switcherIcon'];\n};\n\nexport type DirectoryTreeProps<T extends BasicDataNode | AntDataNode = AntDataNode> = Omit<AntDirectoryTreeProps<T>, RestrictedAntVisualProps> & {\n  dsVariant?: DSTreeVariant;\n  dsDensity?: DSTreeDensity;\n  dsShowLines?: boolean;\n  dsShowIcons?: boolean;\n  dsNodeIcon?: AntDirectoryTreeProps<T>['icon'];\n  dsSwitcherIcon?: AntDirectoryTreeProps<T>['switcherIcon'];\n  blockNode?: AntDirectoryTreeProps<T>['blockNode'];\n  selectable?: AntDirectoryTreeProps<T>['selectable'];\n  checkable?: AntDirectoryTreeProps<T>['checkable'];\n  checkStrictly?: AntDirectoryTreeProps<T>['checkStrictly'];\n  showIcon?: AntDirectoryTreeProps<T>['showIcon'];\n  showLine?: AntDirectoryTreeProps<T>['showLine'];\n  switcherIcon?: AntDirectoryTreeProps<T>['switcherIcon'];\n};\n\ntype DSTreeComponent = (<T extends BasicDataNode | AntDataNode = AntDataNode>(\n  props: TreeProps<T> & React.RefAttributes<RcTree>,\n) => React.ReactElement) & {\n  TreeNode: typeof AntTree.TreeNode;\n  DirectoryTree: <T extends BasicDataNode | AntDataNode = AntDataNode>(\n    props: DirectoryTreeProps<T> & React.RefAttributes<RcTree>,\n  ) => React.ReactElement;\n};\n\nconst STYLE_ID = 'ds-tree-styles';\nconst DS_TREE_CLASS = 'ds-tree';\n\nconst DEFAULTS_BY_VARIANT: Record<DSTreeVariant, {\n  density: DSTreeDensity;\n  showIcon: boolean;\n  showLine: boolean;\n  blockNode: boolean;\n  selectable: boolean;\n  checkable: boolean;\n  checkStrictly: boolean;\n}> = {\n  navigationTree: {\n    density: 'comfortable',\n    showIcon: false,\n    showLine: false,\n    blockNode: true,\n    selectable: true,\n    checkable: false,\n    checkStrictly: false,\n  },\n  selectionTree: {\n    density: 'comfortable',\n    showIcon: false,\n    showLine: true,\n    blockNode: true,\n    selectable: true,\n    checkable: true,\n    checkStrictly: false,\n  },\n  permissionTree: {\n    density: 'comfortable',\n    showIcon: false,\n    showLine: true,\n    blockNode: true,\n    selectable: false,\n    checkable: true,\n    checkStrictly: false,\n  },\n  folderTree: {\n    density: 'comfortable',\n    showIcon: true,\n    showLine: true,\n    blockNode: true,\n    selectable: true,\n    checkable: false,\n    checkStrictly: false,\n  },\n  compact: {\n    density: 'compact',\n    showIcon: false,\n    showLine: false,\n    blockNode: true,\n    selectable: true,\n    checkable: false,\n    checkStrictly: false,\n  },\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { tree, checkbox } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .${DS_TREE_CLASS}.ant-tree {\n      background: ${tree.surface.default};\n      color: ${tree.text.title};\n      font-family: 'Nunito', sans-serif;\n      transition: none !important;\n      animation-duration: 0s !important;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-node-content-wrapper,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-title,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-switcher,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-iconEle,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox {\n      transition: none !important;\n      animation-duration: 0s !important;\n      box-shadow: none !important;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-treenode {\n      padding: 1px 0;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-node-content-wrapper {\n      min-height: var(--ds-tree-row-height);\n      padding: var(--ds-tree-row-padding);\n      border: 1px solid transparent;\n      border-radius: ${tree.border.radius};\n      color: ${tree.text.title};\n      line-height: var(--ds-tree-line-height);\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-title {\n      color: inherit;\n      font-size: var(--ds-tree-font-size);\n      line-height: var(--ds-tree-line-height);\n      font-weight: 600;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-node-content-wrapper:hover {\n      background: ${tree.surface.hover};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {\n      background: ${tree.surface.selected};\n      border-color: ${tree.border.selected};\n      color: ${tree.text.selected};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree[data-ds-tree-variant='permissionTree'] .ant-tree-node-content-wrapper.ant-tree-node-selected {\n      background: ${tree.surface.selectedStrong};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-switcher {\n      color: ${tree.icon.switcher};\n      width: var(--ds-tree-switcher-size);\n      height: var(--ds-tree-switcher-size);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      margin-top: var(--ds-tree-switcher-offset, calc((var(--ds-tree-row-height) - var(--ds-tree-switcher-size)) / 2));\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-switcher .ant-tree-switcher-icon,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-switcher .anticon,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-switcher svg {\n      width: var(--ds-tree-switcher-size);\n      height: var(--ds-tree-switcher-size);\n      color: inherit;\n      font-size: var(--ds-tree-switcher-size);\n      line-height: 1;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-iconEle,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-iconEle .anticon,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-iconEle svg,\n    .${DS_TREE_CLASS}.ant-tree .ds-icon {\n      width: var(--ds-tree-icon-size);\n      height: var(--ds-tree-icon-size);\n      color: ${tree.icon.node};\n      font-size: var(--ds-tree-icon-size);\n      line-height: 1;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex: 0 0 auto;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox {\n      margin-inline-end: 6px;\n      margin-top: var(--ds-tree-control-offset, 0px);\n      width: var(--ds-tree-checkbox-size);\n      height: var(--ds-tree-checkbox-size);\n      --ds-tree-checkbox-mark-width: 6px;\n      --ds-tree-checkbox-mark-height: 10px;\n      --ds-tree-checkbox-mark-stroke: 2px;\n      border-radius: ${checkbox.radius}px;\n      border: ${checkbox.borderWidth.default}px solid ${checkbox.border.default};\n      background: ${checkbox.background.default};\n      box-sizing: border-box;\n      position: relative;\n      line-height: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner {\n      width: 100%;\n      height: 100%;\n      border-color: transparent;\n      border-radius: ${checkbox.radius}px;\n      background: transparent;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox::after,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner::after {\n      transition: none !important;\n      animation-duration: 0s !important;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox:hover:not(.ant-tree-checkbox-checked):not(.ant-tree-checkbox-indeterminate):not(.ant-tree-checkbox-disabled),\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox:active:not(.ant-tree-checkbox-checked):not(.ant-tree-checkbox-indeterminate):not(.ant-tree-checkbox-disabled) {\n      border-color: ${checkbox.border.default};\n      border-width: ${checkbox.borderWidth.default}px;\n      background: ${checkbox.background.default};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-checked {\n      border-color: transparent;\n      background: ${checkbox.background.checked};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-checked::after {\n      content: '';\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      margin: 0;\n      width: var(--ds-tree-checkbox-mark-width);\n      height: var(--ds-tree-checkbox-mark-height);\n      border: solid ${checkbox.mark.checked};\n      border-width: 0 var(--ds-tree-checkbox-mark-stroke) var(--ds-tree-checkbox-mark-stroke) 0;\n      background: transparent;\n      transform: translate(-50%, -58%) rotate(45deg);\n      transform-origin: center;\n      box-sizing: border-box;\n      opacity: 1;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-indeterminate {\n      border-color: ${checkbox.border.checked};\n      background: ${checkbox.background.checked};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-indeterminate::after {\n      content: '';\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      margin: 0;\n      border: 0;\n      border-radius: 2px;\n      background: ${checkbox.mark.indeterminate};\n      width: var(--ds-tree-checkbox-indeterminate-width);\n      height: var(--ds-tree-checkbox-indeterminate-height);\n      transform: translate(-50%, -50%);\n      opacity: 1;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-checked .ant-tree-checkbox-inner,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {\n      background: transparent;\n      border-color: transparent;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-disabled,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-disabled.ant-tree-checkbox-checked,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-disabled.ant-tree-checkbox-indeterminate {\n      border-color: transparent;\n      background: ${checkbox.background.disabled};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-disabled.ant-tree-checkbox-indeterminate::after {\n      background: ${checkbox.mark.indeterminate};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-disabled + span,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal[aria-disabled='true'],\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {\n      color: ${tree.text.disabled};\n    }\n  `;\n}\n\nfunction resolveDensity(dsVariant: DSTreeVariant, dsDensity: DSTreeDensity | undefined) {\n  return dsDensity ?? DEFAULTS_BY_VARIANT[dsVariant].density;\n}\n\nfunction resolveFolderNodeIcon(iconSize: number) {\n  return (node: { isLeaf?: boolean }) => {\n    if (node.isLeaf) {\n      return <Icon dsGroup=\"empty\" dsName=\"commonFileText\" dsSize={iconSize} dsTone=\"muted\" aria-label=\"file\" />;\n    }\n\n    return <Icon dsGroup=\"empty\" dsName=\"folderEmpty\" dsSize={iconSize} dsTone=\"muted\" aria-label=\"folder\" />;\n  };\n}\n\nfunction getSharedStyle(density: DSTreeDensity, hasCheckbox: boolean, userStyle: CSSProperties | undefined) {\n  const sizeTokens = dsSemanticTokens.tree.size[density];\n  const checkboxSize = density === 'compact' ? dsSemanticTokens.checkbox.size.sm : dsSemanticTokens.checkbox.size.md;\n  const indeterminateSize = density === 'compact' ? dsSemanticTokens.checkbox.indeterminate.sm : dsSemanticTokens.checkbox.indeterminate.md;\n  const checkedMark = density === 'compact'\n    ? { width: 5, height: 9 }\n    : { width: 6, height: 10 };\n  const switcherSize = hasCheckbox ? checkboxSize : sizeTokens.iconSize;\n  const rowHeight = parseInt(sizeTokens.rowHeight, 10);\n  const controlOffset = hasCheckbox ? Math.max(0, Math.floor((rowHeight - checkboxSize) / 4)) : 0;\n\n  return {\n    '--ds-tree-row-height': sizeTokens.rowHeight,\n    '--ds-tree-row-padding': sizeTokens.rowPadding,\n    '--ds-tree-font-size': sizeTokens.fontSize,\n    '--ds-tree-line-height': sizeTokens.lineHeight,\n    '--ds-tree-icon-size': `${sizeTokens.iconSize}px`,\n    '--ds-tree-switcher-size': `${switcherSize}px`,\n    '--ds-tree-control-offset': `${controlOffset}px`,\n    '--ds-tree-switcher-offset': hasCheckbox ? `${controlOffset}px` : undefined,\n    '--ds-tree-checkbox-size': `${checkboxSize}px`,\n    '--ds-tree-checkbox-indeterminate-width': `${indeterminateSize.width}px`,\n    '--ds-tree-checkbox-indeterminate-height': `${indeterminateSize.height}px`,\n    '--ds-tree-checkbox-mark-width': `${checkedMark.width}px`,\n    '--ds-tree-checkbox-mark-height': `${checkedMark.height}px`,\n    ...userStyle,\n  } as CSSProperties;\n}\n\nconst TreeBase = <T extends BasicDataNode | AntDataNode = AntDataNode>({\n  blockNode,\n  checkable,\n  checkStrictly,\n  className,\n  dsDensity,\n  dsNodeIcon,\n  dsShowIcons,\n  dsShowLines,\n  dsSwitcherIcon,\n  dsVariant = 'navigationTree',\n  selectable,\n  showIcon,\n  showLine,\n  style,\n  switcherIcon,\n  ...props\n}: TreeProps<T>) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n  const density = resolveDensity(dsVariant, dsDensity);\n  const iconSize = dsSemanticTokens.tree.size[density].iconSize;\n\n  const resolvedShowLine = dsShowLines ?? showLine ?? defaults.showLine;\n  const resolvedShowIcon = dsShowIcons ?? showIcon ?? defaults.showIcon;\n  const resolvedCheckable = checkable ?? defaults.checkable;\n  const resolvedIcon = dsNodeIcon ?? (dsVariant === 'folderTree' && resolvedShowIcon ? resolveFolderNodeIcon(iconSize) : undefined);\n  const resolvedSwitcherIcon = dsSwitcherIcon ?? switcherIcon;\n\n  return (\n    <AntTree\n      {...props}\n      blockNode={blockNode ?? defaults.blockNode}\n      checkStrictly={checkStrictly ?? defaults.checkStrictly}\n      checkable={resolvedCheckable}\n      className={mergeClassNames(DS_TREE_CLASS, className)}\n      data-ds-tree-checkable={String(Boolean(resolvedCheckable))}\n      data-ds-tree-density={density}\n      data-ds-tree-variant={dsVariant}\n      icon={resolvedIcon}\n      selectable={selectable ?? defaults.selectable}\n      showIcon={resolvedShowIcon}\n      showLine={resolvedShowLine}\n      style={getSharedStyle(density, Boolean(resolvedCheckable), style)}\n      switcherIcon={resolvedSwitcherIcon}\n    />\n  );\n};\n\nconst DirectoryTreeBase = <T extends BasicDataNode | AntDataNode = AntDataNode>({\n  blockNode,\n  checkable,\n  checkStrictly,\n  className,\n  dsDensity,\n  dsNodeIcon,\n  dsShowIcons,\n  dsShowLines,\n  dsSwitcherIcon,\n  dsVariant = 'folderTree',\n  selectable,\n  showIcon,\n  showLine,\n  style,\n  switcherIcon,\n  ...props\n}: DirectoryTreeProps<T>) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n  const density = resolveDensity(dsVariant, dsDensity);\n  const iconSize = dsSemanticTokens.tree.size[density].iconSize;\n\n  const resolvedShowLine = dsShowLines ?? showLine ?? defaults.showLine;\n  const resolvedShowIcon = dsShowIcons ?? showIcon ?? defaults.showIcon;\n  const resolvedCheckable = checkable ?? defaults.checkable;\n  const resolvedIcon = dsNodeIcon ?? (dsVariant === 'folderTree' && resolvedShowIcon ? resolveFolderNodeIcon(iconSize) : undefined);\n  const resolvedSwitcherIcon = dsSwitcherIcon ?? switcherIcon;\n\n  return (\n    <AntTree.DirectoryTree\n      {...props}\n      blockNode={blockNode ?? defaults.blockNode}\n      checkStrictly={checkStrictly ?? defaults.checkStrictly}\n      checkable={resolvedCheckable}\n      className={mergeClassNames(DS_TREE_CLASS, className)}\n      data-ds-tree-checkable={String(Boolean(resolvedCheckable))}\n      data-ds-tree-density={density}\n      data-ds-tree-variant={dsVariant}\n      icon={resolvedIcon}\n      selectable={selectable ?? defaults.selectable}\n      showIcon={resolvedShowIcon}\n      showLine={resolvedShowLine}\n      style={getSharedStyle(density, Boolean(resolvedCheckable), style)}\n      switcherIcon={resolvedSwitcherIcon}\n    />\n  );\n};\n\nexport const Tree = TreeBase as DSTreeComponent;\n\nTree.TreeNode = AntTree.TreeNode;\nTree.DirectoryTree = DirectoryTreeBase;\n"],"mappings":"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"}

package/dist-lib/display/Tree.js

@@ -0,0 +1,349 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Icon as t } from "./Icon.js";
+import { Tree as n } from "antd";
+import { useEffect as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/ds/display/Tree.tsx
+var a = "ds-tree-styles", o = "ds-tree", s = {
+	navigationTree: {
+		density: "comfortable",
+		showIcon: !1,
+		showLine: !1,
+		blockNode: !0,
+		selectable: !0,
+		checkable: !1,
+		checkStrictly: !1
+	},
+	selectionTree: {
+		density: "comfortable",
+		showIcon: !1,
+		showLine: !0,
+		blockNode: !0,
+		selectable: !0,
+		checkable: !0,
+		checkStrictly: !1
+	},
+	permissionTree: {
+		density: "comfortable",
+		showIcon: !1,
+		showLine: !0,
+		blockNode: !0,
+		selectable: !1,
+		checkable: !0,
+		checkStrictly: !1
+	},
+	folderTree: {
+		density: "comfortable",
+		showIcon: !0,
+		showLine: !0,
+		blockNode: !0,
+		selectable: !0,
+		checkable: !1,
+		checkStrictly: !1
+	},
+	compact: {
+		density: "compact",
+		showIcon: !1,
+		showLine: !1,
+		blockNode: !0,
+		selectable: !0,
+		checkable: !1,
+		checkStrictly: !1
+	}
+};
+function c(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function l() {
+	if (typeof document > "u") return;
+	let { tree: t, checkbox: n } = e, r = document.getElementById(a);
+	r || (r = document.createElement("style"), r.id = a, document.head.appendChild(r)), r.textContent = `
+    .${o}.ant-tree {
+      background: ${t.surface.default};
+      color: ${t.text.title};
+      font-family: 'Nunito', sans-serif;
+      transition: none !important;
+      animation-duration: 0s !important;
+    }
+
+    .${o}.ant-tree,
+    .${o}.ant-tree .ant-tree-node-content-wrapper,
+    .${o}.ant-tree .ant-tree-title,
+    .${o}.ant-tree .ant-tree-switcher,
+    .${o}.ant-tree .ant-tree-iconEle,
+    .${o}.ant-tree .ant-tree-checkbox {
+      transition: none !important;
+      animation-duration: 0s !important;
+      box-shadow: none !important;
+    }
+
+    .${o}.ant-tree .ant-tree-treenode {
+      padding: 1px 0;
+    }
+
+    .${o}.ant-tree .ant-tree-node-content-wrapper {
+      min-height: var(--ds-tree-row-height);
+      padding: var(--ds-tree-row-padding);
+      border: 1px solid transparent;
+      border-radius: ${t.border.radius};
+      color: ${t.text.title};
+      line-height: var(--ds-tree-line-height);
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .${o}.ant-tree .ant-tree-title {
+      color: inherit;
+      font-size: var(--ds-tree-font-size);
+      line-height: var(--ds-tree-line-height);
+      font-weight: 600;
+    }
+
+    .${o}.ant-tree .ant-tree-node-content-wrapper:hover {
+      background: ${t.surface.hover};
+    }
+
+    .${o}.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
+      background: ${t.surface.selected};
+      border-color: ${t.border.selected};
+      color: ${t.text.selected};
+    }
+
+    .${o}.ant-tree[data-ds-tree-variant='permissionTree'] .ant-tree-node-content-wrapper.ant-tree-node-selected {
+      background: ${t.surface.selectedStrong};
+    }
+
+    .${o}.ant-tree .ant-tree-switcher {
+      color: ${t.icon.switcher};
+      width: var(--ds-tree-switcher-size);
+      height: var(--ds-tree-switcher-size);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 0;
+      margin-top: var(--ds-tree-switcher-offset, calc((var(--ds-tree-row-height) - var(--ds-tree-switcher-size)) / 2));
+    }
+
+    .${o}.ant-tree .ant-tree-switcher .ant-tree-switcher-icon,
+    .${o}.ant-tree .ant-tree-switcher .anticon,
+    .${o}.ant-tree .ant-tree-switcher svg {
+      width: var(--ds-tree-switcher-size);
+      height: var(--ds-tree-switcher-size);
+      color: inherit;
+      font-size: var(--ds-tree-switcher-size);
+      line-height: 1;
+    }
+
+    .${o}.ant-tree .ant-tree-iconEle,
+    .${o}.ant-tree .ant-tree-iconEle .anticon,
+    .${o}.ant-tree .ant-tree-iconEle svg,
+    .${o}.ant-tree .ds-icon {
+      width: var(--ds-tree-icon-size);
+      height: var(--ds-tree-icon-size);
+      color: ${t.icon.node};
+      font-size: var(--ds-tree-icon-size);
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox {
+      margin-inline-end: 6px;
+      margin-top: var(--ds-tree-control-offset, 0px);
+      width: var(--ds-tree-checkbox-size);
+      height: var(--ds-tree-checkbox-size);
+      --ds-tree-checkbox-mark-width: 6px;
+      --ds-tree-checkbox-mark-height: 10px;
+      --ds-tree-checkbox-mark-stroke: 2px;
+      border-radius: ${n.radius}px;
+      border: ${n.borderWidth.default}px solid ${n.border.default};
+      background: ${n.background.default};
+      box-sizing: border-box;
+      position: relative;
+      line-height: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner {
+      width: 100%;
+      height: 100%;
+      border-color: transparent;
+      border-radius: ${n.radius}px;
+      background: transparent;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox::after,
+    .${o}.ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner::after {
+      transition: none !important;
+      animation-duration: 0s !important;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox:hover:not(.ant-tree-checkbox-checked):not(.ant-tree-checkbox-indeterminate):not(.ant-tree-checkbox-disabled),
+    .${o}.ant-tree .ant-tree-checkbox:active:not(.ant-tree-checkbox-checked):not(.ant-tree-checkbox-indeterminate):not(.ant-tree-checkbox-disabled) {
+      border-color: ${n.border.default};
+      border-width: ${n.borderWidth.default}px;
+      background: ${n.background.default};
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-checked {
+      border-color: transparent;
+      background: ${n.background.checked};
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-checked::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin: 0;
+      width: var(--ds-tree-checkbox-mark-width);
+      height: var(--ds-tree-checkbox-mark-height);
+      border: solid ${n.mark.checked};
+      border-width: 0 var(--ds-tree-checkbox-mark-stroke) var(--ds-tree-checkbox-mark-stroke) 0;
+      background: transparent;
+      transform: translate(-50%, -58%) rotate(45deg);
+      transform-origin: center;
+      box-sizing: border-box;
+      opacity: 1;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-indeterminate {
+      border-color: ${n.border.checked};
+      background: ${n.background.checked};
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-indeterminate::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      margin: 0;
+      border: 0;
+      border-radius: 2px;
+      background: ${n.mark.indeterminate};
+      width: var(--ds-tree-checkbox-indeterminate-width);
+      height: var(--ds-tree-checkbox-indeterminate-height);
+      transform: translate(-50%, -50%);
+      opacity: 1;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-checked .ant-tree-checkbox-inner,
+    .${o}.ant-tree .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {
+      background: transparent;
+      border-color: transparent;
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-disabled,
+    .${o}.ant-tree .ant-tree-checkbox-disabled.ant-tree-checkbox-checked,
+    .${o}.ant-tree .ant-tree-checkbox-disabled.ant-tree-checkbox-indeterminate {
+      border-color: transparent;
+      background: ${n.background.disabled};
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-disabled.ant-tree-checkbox-indeterminate::after {
+      background: ${n.mark.indeterminate};
+    }
+
+    .${o}.ant-tree .ant-tree-checkbox-disabled + span,
+    .${o}.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal[aria-disabled='true'],
+    .${o}.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {
+      color: ${t.text.disabled};
+    }
+  `;
+}
+function u(e, t) {
+	return t ?? s[e].density;
+}
+function d(e) {
+	return (n) => n.isLeaf ? /* @__PURE__ */ i(t, {
+		dsGroup: "empty",
+		dsName: "commonFileText",
+		dsSize: e,
+		dsTone: "muted",
+		"aria-label": "file"
+	}) : /* @__PURE__ */ i(t, {
+		dsGroup: "empty",
+		dsName: "folderEmpty",
+		dsSize: e,
+		dsTone: "muted",
+		"aria-label": "folder"
+	});
+}
+function f(t, n, r) {
+	let i = e.tree.size[t], a = t === "compact" ? e.checkbox.size.sm : e.checkbox.size.md, o = t === "compact" ? e.checkbox.indeterminate.sm : e.checkbox.indeterminate.md, s = t === "compact" ? {
+		width: 5,
+		height: 9
+	} : {
+		width: 6,
+		height: 10
+	}, c = n ? a : i.iconSize, l = parseInt(i.rowHeight, 10), u = n ? Math.max(0, Math.floor((l - a) / 4)) : 0;
+	return {
+		"--ds-tree-row-height": i.rowHeight,
+		"--ds-tree-row-padding": i.rowPadding,
+		"--ds-tree-font-size": i.fontSize,
+		"--ds-tree-line-height": i.lineHeight,
+		"--ds-tree-icon-size": `${i.iconSize}px`,
+		"--ds-tree-switcher-size": `${c}px`,
+		"--ds-tree-control-offset": `${u}px`,
+		"--ds-tree-switcher-offset": n ? `${u}px` : void 0,
+		"--ds-tree-checkbox-size": `${a}px`,
+		"--ds-tree-checkbox-indeterminate-width": `${o.width}px`,
+		"--ds-tree-checkbox-indeterminate-height": `${o.height}px`,
+		"--ds-tree-checkbox-mark-width": `${s.width}px`,
+		"--ds-tree-checkbox-mark-height": `${s.height}px`,
+		...r
+	};
+}
+var p = ({ blockNode: t, checkable: a, checkStrictly: p, className: m, dsDensity: h, dsNodeIcon: g, dsShowIcons: _, dsShowLines: v, dsSwitcherIcon: y, dsVariant: b = "navigationTree", selectable: x, showIcon: S, showLine: C, style: w, switcherIcon: T, ...E }) => {
+	r(() => {
+		l();
+	}, []);
+	let D = s[b], O = u(b, h), k = e.tree.size[O].iconSize, A = v ?? C ?? D.showLine, j = _ ?? S ?? D.showIcon, M = a ?? D.checkable, N = g ?? (b === "folderTree" && j ? d(k) : void 0), P = y ?? T;
+	return /* @__PURE__ */ i(n, {
+		...E,
+		blockNode: t ?? D.blockNode,
+		checkStrictly: p ?? D.checkStrictly,
+		checkable: M,
+		className: c(o, m),
+		"data-ds-tree-checkable": String(!!M),
+		"data-ds-tree-density": O,
+		"data-ds-tree-variant": b,
+		icon: N,
+		selectable: x ?? D.selectable,
+		showIcon: j,
+		showLine: A,
+		style: f(O, !!M, w),
+		switcherIcon: P
+	});
+}, m = ({ blockNode: t, checkable: a, checkStrictly: p, className: m, dsDensity: h, dsNodeIcon: g, dsShowIcons: _, dsShowLines: v, dsSwitcherIcon: y, dsVariant: b = "folderTree", selectable: x, showIcon: S, showLine: C, style: w, switcherIcon: T, ...E }) => {
+	r(() => {
+		l();
+	}, []);
+	let D = s[b], O = u(b, h), k = e.tree.size[O].iconSize, A = v ?? C ?? D.showLine, j = _ ?? S ?? D.showIcon, M = a ?? D.checkable, N = g ?? (b === "folderTree" && j ? d(k) : void 0), P = y ?? T;
+	return /* @__PURE__ */ i(n.DirectoryTree, {
+		...E,
+		blockNode: t ?? D.blockNode,
+		checkStrictly: p ?? D.checkStrictly,
+		checkable: M,
+		className: c(o, m),
+		"data-ds-tree-checkable": String(!!M),
+		"data-ds-tree-density": O,
+		"data-ds-tree-variant": b,
+		icon: N,
+		selectable: x ?? D.selectable,
+		showIcon: j,
+		showLine: A,
+		style: f(O, !!M, w),
+		switcherIcon: P
+	});
+}, h = p;
+h.TreeNode = n.TreeNode, h.DirectoryTree = m;
+//#endregion
+export { h as Tree };
+
+//# sourceMappingURL=Tree.js.map

package/dist-lib/display/Tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.js","names":[],"sources":["../../src/ds/display/Tree.tsx"],"sourcesContent":["import { Tree as AntTree } from 'antd';\nimport type { DataNode as AntDataNode } from 'antd/es/tree';\nimport type { DirectoryTreeProps as AntDirectoryTreeProps } from 'antd/es/tree/DirectoryTree';\nimport type { TreeProps as AntTreeProps } from 'antd/es/tree/Tree';\nimport type { BasicDataNode } from '@rc-component/tree';\nimport type RcTree from '@rc-component/tree';\nimport type { CSSProperties } from 'react';\nimport { useEffect } from 'react';\nimport { Icon } from './Icon';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSTreeVariant = 'navigationTree' | 'selectionTree' | 'permissionTree' | 'folderTree' | 'compact';\nexport type DSTreeDensity = 'comfortable' | 'compact';\n\ntype RestrictedAntVisualProps = 'showLine' | 'showIcon' | 'icon' | 'switcherIcon' | 'blockNode' | 'selectable' | 'checkable' | 'checkStrictly';\n\nexport type TreeProps<T extends BasicDataNode | AntDataNode = AntDataNode> = Omit<AntTreeProps<T>, RestrictedAntVisualProps> & {\n  /** Semantic DS tree variant for navigation, selection, permissions, and folder structures. */\n  dsVariant?: DSTreeVariant;\n  /** Optional density override. Defaults from `dsVariant`. */\n  dsDensity?: DSTreeDensity;\n  /** Toggle lines regardless of variant defaults. */\n  dsShowLines?: boolean;\n  /** Toggle node icons regardless of variant defaults. */\n  dsShowIcons?: boolean;\n  /** Override icon rendering for node rows. */\n  dsNodeIcon?: AntTreeProps<T>['icon'];\n  /** Override switcher icon rendering. */\n  dsSwitcherIcon?: AntTreeProps<T>['switcherIcon'];\n  /** Optional explicit override of block node behavior. */\n  blockNode?: AntTreeProps<T>['blockNode'];\n  /** Optional explicit override of selection behavior. */\n  selectable?: AntTreeProps<T>['selectable'];\n  /** Optional explicit override of checkboxes. */\n  checkable?: AntTreeProps<T>['checkable'];\n  /** Optional explicit override of strict checking. */\n  checkStrictly?: AntTreeProps<T>['checkStrictly'];\n  /** Optional explicit override of icon visibility. */\n  showIcon?: AntTreeProps<T>['showIcon'];\n  /** Optional explicit override of tree lines. */\n  showLine?: AntTreeProps<T>['showLine'];\n  /** Optional explicit override of switcher icon rendering. */\n  switcherIcon?: AntTreeProps<T>['switcherIcon'];\n};\n\nexport type DirectoryTreeProps<T extends BasicDataNode | AntDataNode = AntDataNode> = Omit<AntDirectoryTreeProps<T>, RestrictedAntVisualProps> & {\n  dsVariant?: DSTreeVariant;\n  dsDensity?: DSTreeDensity;\n  dsShowLines?: boolean;\n  dsShowIcons?: boolean;\n  dsNodeIcon?: AntDirectoryTreeProps<T>['icon'];\n  dsSwitcherIcon?: AntDirectoryTreeProps<T>['switcherIcon'];\n  blockNode?: AntDirectoryTreeProps<T>['blockNode'];\n  selectable?: AntDirectoryTreeProps<T>['selectable'];\n  checkable?: AntDirectoryTreeProps<T>['checkable'];\n  checkStrictly?: AntDirectoryTreeProps<T>['checkStrictly'];\n  showIcon?: AntDirectoryTreeProps<T>['showIcon'];\n  showLine?: AntDirectoryTreeProps<T>['showLine'];\n  switcherIcon?: AntDirectoryTreeProps<T>['switcherIcon'];\n};\n\ntype DSTreeComponent = (<T extends BasicDataNode | AntDataNode = AntDataNode>(\n  props: TreeProps<T> & React.RefAttributes<RcTree>,\n) => React.ReactElement) & {\n  TreeNode: typeof AntTree.TreeNode;\n  DirectoryTree: <T extends BasicDataNode | AntDataNode = AntDataNode>(\n    props: DirectoryTreeProps<T> & React.RefAttributes<RcTree>,\n  ) => React.ReactElement;\n};\n\nconst STYLE_ID = 'ds-tree-styles';\nconst DS_TREE_CLASS = 'ds-tree';\n\nconst DEFAULTS_BY_VARIANT: Record<DSTreeVariant, {\n  density: DSTreeDensity;\n  showIcon: boolean;\n  showLine: boolean;\n  blockNode: boolean;\n  selectable: boolean;\n  checkable: boolean;\n  checkStrictly: boolean;\n}> = {\n  navigationTree: {\n    density: 'comfortable',\n    showIcon: false,\n    showLine: false,\n    blockNode: true,\n    selectable: true,\n    checkable: false,\n    checkStrictly: false,\n  },\n  selectionTree: {\n    density: 'comfortable',\n    showIcon: false,\n    showLine: true,\n    blockNode: true,\n    selectable: true,\n    checkable: true,\n    checkStrictly: false,\n  },\n  permissionTree: {\n    density: 'comfortable',\n    showIcon: false,\n    showLine: true,\n    blockNode: true,\n    selectable: false,\n    checkable: true,\n    checkStrictly: false,\n  },\n  folderTree: {\n    density: 'comfortable',\n    showIcon: true,\n    showLine: true,\n    blockNode: true,\n    selectable: true,\n    checkable: false,\n    checkStrictly: false,\n  },\n  compact: {\n    density: 'compact',\n    showIcon: false,\n    showLine: false,\n    blockNode: true,\n    selectable: true,\n    checkable: false,\n    checkStrictly: false,\n  },\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { tree, checkbox } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .${DS_TREE_CLASS}.ant-tree {\n      background: ${tree.surface.default};\n      color: ${tree.text.title};\n      font-family: 'Nunito', sans-serif;\n      transition: none !important;\n      animation-duration: 0s !important;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-node-content-wrapper,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-title,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-switcher,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-iconEle,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox {\n      transition: none !important;\n      animation-duration: 0s !important;\n      box-shadow: none !important;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-treenode {\n      padding: 1px 0;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-node-content-wrapper {\n      min-height: var(--ds-tree-row-height);\n      padding: var(--ds-tree-row-padding);\n      border: 1px solid transparent;\n      border-radius: ${tree.border.radius};\n      color: ${tree.text.title};\n      line-height: var(--ds-tree-line-height);\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-title {\n      color: inherit;\n      font-size: var(--ds-tree-font-size);\n      line-height: var(--ds-tree-line-height);\n      font-weight: 600;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-node-content-wrapper:hover {\n      background: ${tree.surface.hover};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {\n      background: ${tree.surface.selected};\n      border-color: ${tree.border.selected};\n      color: ${tree.text.selected};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree[data-ds-tree-variant='permissionTree'] .ant-tree-node-content-wrapper.ant-tree-node-selected {\n      background: ${tree.surface.selectedStrong};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-switcher {\n      color: ${tree.icon.switcher};\n      width: var(--ds-tree-switcher-size);\n      height: var(--ds-tree-switcher-size);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 0;\n      margin-top: var(--ds-tree-switcher-offset, calc((var(--ds-tree-row-height) - var(--ds-tree-switcher-size)) / 2));\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-switcher .ant-tree-switcher-icon,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-switcher .anticon,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-switcher svg {\n      width: var(--ds-tree-switcher-size);\n      height: var(--ds-tree-switcher-size);\n      color: inherit;\n      font-size: var(--ds-tree-switcher-size);\n      line-height: 1;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-iconEle,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-iconEle .anticon,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-iconEle svg,\n    .${DS_TREE_CLASS}.ant-tree .ds-icon {\n      width: var(--ds-tree-icon-size);\n      height: var(--ds-tree-icon-size);\n      color: ${tree.icon.node};\n      font-size: var(--ds-tree-icon-size);\n      line-height: 1;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex: 0 0 auto;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox {\n      margin-inline-end: 6px;\n      margin-top: var(--ds-tree-control-offset, 0px);\n      width: var(--ds-tree-checkbox-size);\n      height: var(--ds-tree-checkbox-size);\n      --ds-tree-checkbox-mark-width: 6px;\n      --ds-tree-checkbox-mark-height: 10px;\n      --ds-tree-checkbox-mark-stroke: 2px;\n      border-radius: ${checkbox.radius}px;\n      border: ${checkbox.borderWidth.default}px solid ${checkbox.border.default};\n      background: ${checkbox.background.default};\n      box-sizing: border-box;\n      position: relative;\n      line-height: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner {\n      width: 100%;\n      height: 100%;\n      border-color: transparent;\n      border-radius: ${checkbox.radius}px;\n      background: transparent;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox::after,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox .ant-tree-checkbox-inner::after {\n      transition: none !important;\n      animation-duration: 0s !important;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox:hover:not(.ant-tree-checkbox-checked):not(.ant-tree-checkbox-indeterminate):not(.ant-tree-checkbox-disabled),\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox:active:not(.ant-tree-checkbox-checked):not(.ant-tree-checkbox-indeterminate):not(.ant-tree-checkbox-disabled) {\n      border-color: ${checkbox.border.default};\n      border-width: ${checkbox.borderWidth.default}px;\n      background: ${checkbox.background.default};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-checked {\n      border-color: transparent;\n      background: ${checkbox.background.checked};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-checked::after {\n      content: '';\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      margin: 0;\n      width: var(--ds-tree-checkbox-mark-width);\n      height: var(--ds-tree-checkbox-mark-height);\n      border: solid ${checkbox.mark.checked};\n      border-width: 0 var(--ds-tree-checkbox-mark-stroke) var(--ds-tree-checkbox-mark-stroke) 0;\n      background: transparent;\n      transform: translate(-50%, -58%) rotate(45deg);\n      transform-origin: center;\n      box-sizing: border-box;\n      opacity: 1;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-indeterminate {\n      border-color: ${checkbox.border.checked};\n      background: ${checkbox.background.checked};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-indeterminate::after {\n      content: '';\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      margin: 0;\n      border: 0;\n      border-radius: 2px;\n      background: ${checkbox.mark.indeterminate};\n      width: var(--ds-tree-checkbox-indeterminate-width);\n      height: var(--ds-tree-checkbox-indeterminate-height);\n      transform: translate(-50%, -50%);\n      opacity: 1;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-checked .ant-tree-checkbox-inner,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-indeterminate .ant-tree-checkbox-inner {\n      background: transparent;\n      border-color: transparent;\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-disabled,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-disabled.ant-tree-checkbox-checked,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-disabled.ant-tree-checkbox-indeterminate {\n      border-color: transparent;\n      background: ${checkbox.background.disabled};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-disabled.ant-tree-checkbox-indeterminate::after {\n      background: ${checkbox.mark.indeterminate};\n    }\n\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-checkbox-disabled + span,\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal[aria-disabled='true'],\n    .${DS_TREE_CLASS}.ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper {\n      color: ${tree.text.disabled};\n    }\n  `;\n}\n\nfunction resolveDensity(dsVariant: DSTreeVariant, dsDensity: DSTreeDensity | undefined) {\n  return dsDensity ?? DEFAULTS_BY_VARIANT[dsVariant].density;\n}\n\nfunction resolveFolderNodeIcon(iconSize: number) {\n  return (node: { isLeaf?: boolean }) => {\n    if (node.isLeaf) {\n      return <Icon dsGroup=\"empty\" dsName=\"commonFileText\" dsSize={iconSize} dsTone=\"muted\" aria-label=\"file\" />;\n    }\n\n    return <Icon dsGroup=\"empty\" dsName=\"folderEmpty\" dsSize={iconSize} dsTone=\"muted\" aria-label=\"folder\" />;\n  };\n}\n\nfunction getSharedStyle(density: DSTreeDensity, hasCheckbox: boolean, userStyle: CSSProperties | undefined) {\n  const sizeTokens = dsSemanticTokens.tree.size[density];\n  const checkboxSize = density === 'compact' ? dsSemanticTokens.checkbox.size.sm : dsSemanticTokens.checkbox.size.md;\n  const indeterminateSize = density === 'compact' ? dsSemanticTokens.checkbox.indeterminate.sm : dsSemanticTokens.checkbox.indeterminate.md;\n  const checkedMark = density === 'compact'\n    ? { width: 5, height: 9 }\n    : { width: 6, height: 10 };\n  const switcherSize = hasCheckbox ? checkboxSize : sizeTokens.iconSize;\n  const rowHeight = parseInt(sizeTokens.rowHeight, 10);\n  const controlOffset = hasCheckbox ? Math.max(0, Math.floor((rowHeight - checkboxSize) / 4)) : 0;\n\n  return {\n    '--ds-tree-row-height': sizeTokens.rowHeight,\n    '--ds-tree-row-padding': sizeTokens.rowPadding,\n    '--ds-tree-font-size': sizeTokens.fontSize,\n    '--ds-tree-line-height': sizeTokens.lineHeight,\n    '--ds-tree-icon-size': `${sizeTokens.iconSize}px`,\n    '--ds-tree-switcher-size': `${switcherSize}px`,\n    '--ds-tree-control-offset': `${controlOffset}px`,\n    '--ds-tree-switcher-offset': hasCheckbox ? `${controlOffset}px` : undefined,\n    '--ds-tree-checkbox-size': `${checkboxSize}px`,\n    '--ds-tree-checkbox-indeterminate-width': `${indeterminateSize.width}px`,\n    '--ds-tree-checkbox-indeterminate-height': `${indeterminateSize.height}px`,\n    '--ds-tree-checkbox-mark-width': `${checkedMark.width}px`,\n    '--ds-tree-checkbox-mark-height': `${checkedMark.height}px`,\n    ...userStyle,\n  } as CSSProperties;\n}\n\nconst TreeBase = <T extends BasicDataNode | AntDataNode = AntDataNode>({\n  blockNode,\n  checkable,\n  checkStrictly,\n  className,\n  dsDensity,\n  dsNodeIcon,\n  dsShowIcons,\n  dsShowLines,\n  dsSwitcherIcon,\n  dsVariant = 'navigationTree',\n  selectable,\n  showIcon,\n  showLine,\n  style,\n  switcherIcon,\n  ...props\n}: TreeProps<T>) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n  const density = resolveDensity(dsVariant, dsDensity);\n  const iconSize = dsSemanticTokens.tree.size[density].iconSize;\n\n  const resolvedShowLine = dsShowLines ?? showLine ?? defaults.showLine;\n  const resolvedShowIcon = dsShowIcons ?? showIcon ?? defaults.showIcon;\n  const resolvedCheckable = checkable ?? defaults.checkable;\n  const resolvedIcon = dsNodeIcon ?? (dsVariant === 'folderTree' && resolvedShowIcon ? resolveFolderNodeIcon(iconSize) : undefined);\n  const resolvedSwitcherIcon = dsSwitcherIcon ?? switcherIcon;\n\n  return (\n    <AntTree\n      {...props}\n      blockNode={blockNode ?? defaults.blockNode}\n      checkStrictly={checkStrictly ?? defaults.checkStrictly}\n      checkable={resolvedCheckable}\n      className={mergeClassNames(DS_TREE_CLASS, className)}\n      data-ds-tree-checkable={String(Boolean(resolvedCheckable))}\n      data-ds-tree-density={density}\n      data-ds-tree-variant={dsVariant}\n      icon={resolvedIcon}\n      selectable={selectable ?? defaults.selectable}\n      showIcon={resolvedShowIcon}\n      showLine={resolvedShowLine}\n      style={getSharedStyle(density, Boolean(resolvedCheckable), style)}\n      switcherIcon={resolvedSwitcherIcon}\n    />\n  );\n};\n\nconst DirectoryTreeBase = <T extends BasicDataNode | AntDataNode = AntDataNode>({\n  blockNode,\n  checkable,\n  checkStrictly,\n  className,\n  dsDensity,\n  dsNodeIcon,\n  dsShowIcons,\n  dsShowLines,\n  dsSwitcherIcon,\n  dsVariant = 'folderTree',\n  selectable,\n  showIcon,\n  showLine,\n  style,\n  switcherIcon,\n  ...props\n}: DirectoryTreeProps<T>) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n  const density = resolveDensity(dsVariant, dsDensity);\n  const iconSize = dsSemanticTokens.tree.size[density].iconSize;\n\n  const resolvedShowLine = dsShowLines ?? showLine ?? defaults.showLine;\n  const resolvedShowIcon = dsShowIcons ?? showIcon ?? defaults.showIcon;\n  const resolvedCheckable = checkable ?? defaults.checkable;\n  const resolvedIcon = dsNodeIcon ?? (dsVariant === 'folderTree' && resolvedShowIcon ? resolveFolderNodeIcon(iconSize) : undefined);\n  const resolvedSwitcherIcon = dsSwitcherIcon ?? switcherIcon;\n\n  return (\n    <AntTree.DirectoryTree\n      {...props}\n      blockNode={blockNode ?? defaults.blockNode}\n      checkStrictly={checkStrictly ?? defaults.checkStrictly}\n      checkable={resolvedCheckable}\n      className={mergeClassNames(DS_TREE_CLASS, className)}\n      data-ds-tree-checkable={String(Boolean(resolvedCheckable))}\n      data-ds-tree-density={density}\n      data-ds-tree-variant={dsVariant}\n      icon={resolvedIcon}\n      selectable={selectable ?? defaults.selectable}\n      showIcon={resolvedShowIcon}\n      showLine={resolvedShowLine}\n      style={getSharedStyle(density, Boolean(resolvedCheckable), style)}\n      switcherIcon={resolvedSwitcherIcon}\n    />\n  );\n};\n\nexport const Tree = TreeBase as DSTreeComponent;\n\nTree.TreeNode = AntTree.TreeNode;\nTree.DirectoryTree = DirectoryTreeBase;\n"],"mappings":"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"}