fix: add dts to tree picker

src/components/TreePicker/TreePickerHeader.jsx

@@ -4,6 +4,7 @@ import cc from 'classnames';
 import _ from 'lodash';
 import Button from '../Button';
 import { useTreePickerGetState, useTreePickerSlice } from './TreePickerContext';
+import { expandDts } from '../../utils';
 
 import './TreePickerHeader.css';
 
@@ -37,13 +38,13 @@ const getCurrentNodeHeader = (state) => {
   return currentNode?.header;
 };
 
-const TreePickerHeader = ({ children, className, label }) => {
+const TreePickerHeader = ({ children, className, label, dts }) => {
   const header = useTreePickerSlice(getCurrentNodeHeader);
 
   const finalLabel = !_.isUndefined(header) ? header : label;
 
   return !finalLabel ? null : (
-    <div className={cc('aui--tree-picker-row', 'aui--tree-picker-header', className)}>
+    <div className={cc('aui--tree-picker-row', 'aui--tree-picker-header', className)} {...expandDts(dts)}>
       <div className="aui--tree-picker-row-content">{finalLabel}</div>
       {children ?? <HeaderAddAll />}
     </div>
@@ -54,6 +55,7 @@ TreePickerHeader.propTypes = {
   label: PropTypes.node,
   children: PropTypes.node,
   className: PropTypes.string,
+  dts: PropTypes.string,
 };
 
 export default TreePickerHeader;

src/components/TreePicker/TreePickerNode.jsx

@@ -18,14 +18,15 @@ import {
   useHiddenById,
   useTreePickerSlice,
 } from './TreePickerContext';
+import { expandDts } from '../../utils';
 
 import './TreePickerNode.css';
 
 const TreePickerNodeContext = React.createContext({ level: 0 });
 
 export const useTreePickerNode = () => React.useContext(TreePickerNodeContext);
 
-const TreePickerNode = ({ className, children, node }) => {
+const TreePickerNode = ({ className, children, node, dts }) => {
   const { goTo } = useInternalActions();
   const [state, setState] = React.useState(() => ({ expanded: false, subNodes: [] }));
 
@@ -63,7 +64,9 @@ const TreePickerNode = ({ className, children, node }) => {
 
   return (
     <TreePickerNodeContext.Provider value={value}>
-      <div className={cx('aui--tree-picker-row', className)}>{children}</div>
+      <div className={cx('aui--tree-picker-row', className)} {...expandDts(dts)}>
+        {children}
+      </div>
       {state.subNodes.length === 0 ? null : <TreePickerNodeBranch nodes={state.subNodes} />}
     </TreePickerNodeContext.Provider>
   );
@@ -75,6 +78,7 @@ TreePickerNode.propTypes = {
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     label: PropTypes.string.isRequired,
   }).isRequired,
+  dts: PropTypes.string,
 };
 
 const TreePickerNodeBranch = ({ nodes }) => {
@@ -107,7 +111,7 @@ const getReverseIcon = (current) =>
   ({
     'folder-open': 'folder',
     folder: 'folder-open',
-  })[current];
+  }[current]);
 
 const IconComponents = {
   'folder-open': FolderOpenIcon,

src/components/TreePicker/TreePickerTree.jsx

@@ -13,6 +13,7 @@ import {
   HiddenByIdCtx,
 } from './TreePickerContext';
 import TreePickerNode from './TreePickerNode';
+import { expandDts } from '../../utils';
 
 import './TreePickerTree.css';
 
@@ -71,6 +72,7 @@ const TreePickerTree = ({
   className,
   resolveRootNodes,
   hiddenNodeIds,
+  dts,
   placeholder = defaultPlaceholder,
   emptyState = defaultEmptyState,
 }) => {
@@ -114,7 +116,7 @@ const TreePickerTree = ({
 
   return (
     <HiddenByIdCtx.Provider value={byId}>
-      <div className={cx('aui--tree-picker-tree', className)}>
+      <div className={cx('aui--tree-picker-tree', className)} {...expandDts(dts)}>
         {isResolvingRoot ? placeholder : visibleNodes.length === 0 ? emptyState : visibleNodes.map(renderNode)}
       </div>
     </HiddenByIdCtx.Provider>
@@ -127,6 +129,7 @@ TreePickerTree.propTypes = {
   resolveRootNodes: PropTypes.func.isRequired,
   placeholder: PropTypes.node,
   emptyState: PropTypes.node,
+  dts: PropTypes.string,
 };
 
 TreePickerTree.Placeholder = TreePickerTreePlaceholder;

src/components/TreePicker/index.d.ts

@@ -40,6 +40,7 @@ export interface TreePickerNodeProps {
   node: TreePickerNodeNode;
   children: React.ReactNode;
   className?: string;
+  dts?: string;
 }
 
 declare const TreePickerNode: React.FC<TreePickerNodeProps> & {
@@ -61,6 +62,7 @@ export interface TreePickerHeaderProps {
   label?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
+  dts?: string;
 }
 
 declare const TreePickerHeader: React.FC<TreePickerHeaderProps>;
@@ -79,6 +81,7 @@ export interface TreePickerTreeProps {
   hiddenNodeIds?: string[];
   placeholder?: React.ReactNode;
   emptyState?: React.ReactNode;
+  dts?: string;
 }
 
 declare const TreePickerTree: React.FC<TreePickerTreeProps>;