@itwin/itwinui-react 3.0.0-dev.0 → 3.0.0-dev.10

package/esm/core/TransferList/TransferList.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { ListItem } from '../List/index.js';
+type TransferListListboxWrapperOwnProps = {};
+type TransferListItemOwnProps = {
+    /**
+     * Callback fired when the the active state changes.
+     */
+    onActiveChange?: (value: boolean) => void;
+} & React.ComponentProps<typeof ListItem>;
+type TransferListListboxLabelOwnProps = {
+    /**
+     * Text label that is wrapped by `TransferList.ListboxLabel`
+     */
+    children?: string;
+};
+/**
+ * The TransferList component is used to display a list within a box
+ * @example
+ * <TransferList>
+ *   <TransferList.ListboxWrapper>
+ *     <TransferList.Listbox>
+ *       <TransferList.Item>Item 1</TransferList.Item>
+ *       <TransferList.Item>Item 2</TransferList.Item>
+ *       <TransferList.Item>Item 3</TransferList.Item>
+ *       <TransferList.Item>Item 4</TransferList.Item>
+ *       <TransferList.Item>Item 5</TransferList.Item>
+ *       <TransferList.Item>Item 6</TransferList.Item>
+ *     </TransferList.Listbox>
+ *   </TransferList.ListboxWrapper>
+ * </TransferList>
+ */
+export declare const TransferList: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}> & {
+    /**
+     * 	TransferList listbox wrapper subcomponent
+     */
+    ListboxWrapper: PolymorphicForwardRefComponent<"div", TransferListListboxWrapperOwnProps>;
+    /**
+     * 	TransferList listbox subcomponent
+     */
+    Listbox: PolymorphicForwardRefComponent<"ul", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+        ref?: ((instance: HTMLUListElement | null) => void) | React.RefObject<HTMLUListElement> | null | undefined;
+    }, "as"> & {
+        as?: "ul" | undefined;
+    }>;
+    /**
+     * 	TransferList item subcomponent
+     */
+    Item: PolymorphicForwardRefComponent<"li", TransferListItemOwnProps>;
+    /**
+     * 	TransferList listbox label subcomponent
+     */
+    ListboxLabel: PolymorphicForwardRefComponent<"div", TransferListListboxLabelOwnProps>;
+    /**
+     * 	TransferList toolbar subcomponent
+     */
+    Toolbar: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
+};
+export declare const TransferListContext: React.Context<{
+    /**
+     * Id to set to label and set 'aria-labelledby' prop of the listbox
+     */
+    labelId?: string | undefined;
+    /**
+     * Callback that's fired when labelId is changed
+     */
+    setLabelId: (labelId: string) => void;
+} | undefined>;
+export default TransferList;

package/esm/core/TransferList/TransferList.js

@@ -0,0 +1,206 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import {
+  getFocusableElements,
+  useMergedRefs,
+  useId,
+  useSafeContext,
+  Box,
+  polymorphic,
+} from '../utils/index.js';
+import { List, ListItem } from '../List/index.js';
+import { Label } from '../Label/index.js';
+// ----------------------------------------------------------------------------
+// TransferListComponent
+const TransferListComponent = polymorphic('iui-transfer-list-wrapper');
+TransferListComponent.displayName = 'TransferList';
+const TransferListListboxWrapper = React.forwardRef((props, ref) => {
+  const { className, children, ...rest } = props;
+  const uid = useId();
+  const [labelId, setLabelId] = React.useState(uid);
+  return React.createElement(
+    Box,
+    {
+      as: 'div',
+      className: cx('iui-transfer-list-listbox-wrapper', className),
+      ref: ref,
+      ...rest,
+    },
+    React.createElement(
+      TransferListContext.Provider,
+      { value: { labelId, setLabelId } },
+      children,
+    ),
+  );
+});
+TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
+const TransferListListbox = React.forwardRef((props, ref) => {
+  const { children, className, ...rest } = props;
+  const { labelId } = useSafeContext(TransferListContext);
+  const [focusedIndex, setFocusedIndex] = React.useState();
+  const listRef = React.useRef(null);
+  const refs = useMergedRefs(listRef, ref);
+  const getFocusableNodes = React.useCallback(() => {
+    const focusableItems = getFocusableElements(listRef.current);
+    // Filter out focusable elements that are inside each list item, e.g. checkbox, anchor
+    return focusableItems.filter(
+      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
+    );
+  }, []);
+  React.useEffect(() => {
+    const items = getFocusableNodes();
+    if (focusedIndex != null) {
+      items?.[focusedIndex]?.focus();
+      return;
+    }
+  }, [focusedIndex, getFocusableNodes]);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    const items = getFocusableNodes();
+    if (!items?.length) {
+      return;
+    }
+    const currentIndex = focusedIndex ?? 0;
+    switch (event.key) {
+      case 'ArrowDown': {
+        setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      case 'ArrowUp': {
+        setFocusedIndex(Math.max(currentIndex - 1, 0));
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  return React.createElement(
+    List,
+    {
+      className: cx('iui-transfer-list-listbox', className),
+      onKeyDown: onKeyDown,
+      role: 'listbox',
+      'aria-multiselectable': true,
+      'aria-labelledby': labelId,
+      tabIndex: 0,
+      ref: refs,
+      ...rest,
+    },
+    children,
+  );
+});
+TransferListListbox.displayName = 'TransferList.Listbox';
+const TransferListItem = React.forwardRef((props, ref) => {
+  const {
+    actionable = true,
+    disabled,
+    onActiveChange,
+    children,
+    active,
+    ...rest
+  } = props;
+  const onClickEvents = () =>
+    actionable && onActiveChange && onActiveChange(!active);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    if (
+      event.key === 'Enter' ||
+      event.key === ' ' ||
+      event.key === 'Spacebar'
+    ) {
+      !disabled && onClickEvents();
+      event.preventDefault();
+    }
+  };
+  return React.createElement(
+    ListItem,
+    {
+      ref: ref,
+      onClick: onClickEvents,
+      onKeyDown: onKeyDown,
+      active: active,
+      actionable: actionable,
+      tabIndex: -1,
+      role: 'option',
+      'aria-disabled': disabled ? 'true' : undefined,
+      'aria-selected': active ? 'true' : undefined,
+      disabled: disabled,
+      ...rest,
+    },
+    children,
+  );
+});
+TransferListItem.displayName = 'TransferList.Item';
+const TransferListListboxLabel = React.forwardRef((props, ref) => {
+  const { children, id, ...rest } = props;
+  const { labelId, setLabelId } = useSafeContext(TransferListContext);
+  React.useEffect(() => {
+    if (id && id !== labelId) {
+      setLabelId(id);
+    }
+  }, [id, labelId, setLabelId]);
+  return React.createElement(
+    Label,
+    { as: 'div', id: labelId, ref: ref, ...rest },
+    children,
+  );
+});
+TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
+// ----------------------------------------------------------------------------
+// TransferList.Toolbar component
+const TransferListToolbar = polymorphic('iui-transfer-list-toolbar', {
+  role: 'toolbar',
+});
+TransferListToolbar.displayName = 'TransferList.Toolbar';
+/**
+ * The TransferList component is used to display a list within a box
+ * @example
+ * <TransferList>
+ *   <TransferList.ListboxWrapper>
+ *     <TransferList.Listbox>
+ *       <TransferList.Item>Item 1</TransferList.Item>
+ *       <TransferList.Item>Item 2</TransferList.Item>
+ *       <TransferList.Item>Item 3</TransferList.Item>
+ *       <TransferList.Item>Item 4</TransferList.Item>
+ *       <TransferList.Item>Item 5</TransferList.Item>
+ *       <TransferList.Item>Item 6</TransferList.Item>
+ *     </TransferList.Listbox>
+ *   </TransferList.ListboxWrapper>
+ * </TransferList>
+ */
+export const TransferList = Object.assign(TransferListComponent, {
+  /**
+   * 	TransferList listbox wrapper subcomponent
+   */
+  ListboxWrapper: TransferListListboxWrapper,
+  /**
+   * 	TransferList listbox subcomponent
+   */
+  Listbox: TransferListListbox,
+  /**
+   * 	TransferList item subcomponent
+   */
+  Item: TransferListItem,
+  /**
+   * 	TransferList listbox label subcomponent
+   */
+  ListboxLabel: TransferListListboxLabel,
+  /**
+   * 	TransferList toolbar subcomponent
+   */
+  Toolbar: TransferListToolbar,
+});
+export const TransferListContext = React.createContext(undefined);
+export default TransferList;

package/esm/core/TransferList/index.d.ts

@@ -0,0 +1,3 @@
+export { TransferList } from './TransferList.js';
+declare const _default: "./TransferList";
+export default _default;

package/esm/core/TransferList/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { TransferList } from './TransferList.js';
+export default './TransferList';

package/esm/core/Tree/Tree.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { CommonProps } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tree.css';
-export declare type NodeData<T> = {
+export type NodeData<T> = {
     /**
      * Array of the child nodes contained in the node.
      */
@@ -32,8 +31,8 @@ export declare type NodeData<T> = {
      */
     hasSubNodes: boolean;
 };
-export declare type NodeRenderProps<T> = Omit<NodeData<T>, 'subNodes'>;
-export declare type TreeProps<T> = {
+export type NodeRenderProps<T> = Omit<NodeData<T>, 'subNodes'>;
+export type TreeProps<T> = {
     /**
      * Render function that should return the node element.
      * Recommended to use `TreeNode` component.
@@ -128,5 +127,5 @@ export declare type TreeProps<T> = {
     ), [onNodeExpanded])}
   />
  */
-export declare const Tree: <T>(props: TreeProps<T>) => JSX.Element;
+export declare const Tree: <T>(props: TreeProps<T>) => React.JSX.Element;
 export default Tree;

package/esm/core/Tree/Tree.js

@@ -3,8 +3,13 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { getFocusableElements, useVirtualization, mergeRefs, Box, polymorphic, } from '../utils/index.js';
-import '@itwin/itwinui-css/css/tree.css';
+import {
+  getFocusableElements,
+  useVirtualization,
+  mergeRefs,
+  Box,
+  polymorphic,
+} from '../utils/index.js';
 import cx from 'classnames';
 import { TreeContext } from './TreeContext.js';
 /**
@@ -58,142 +63,204 @@ import { TreeContext } from './TreeContext.js';
   />
  */
 export const Tree = (props) => {
-    const { data, className, nodeRenderer, getNode, enableVirtualization = false, style, ...rest } = props;
-    const treeRef = React.useRef(null);
-    const focusedIndex = React.useRef(0);
-    React.useEffect(() => {
-        focusedIndex.current = 0;
-    }, [data]);
-    const getFocusableNodes = React.useCallback(() => {
-        const focusableItems = getFocusableElements(treeRef.current);
-        // Filter out focusable elements that are inside each node, e.g. checkbox
-        return focusableItems.filter((i) => !focusableItems.some((p) => p.contains(i.parentElement)));
-    }, []);
-    const handleKeyDown = (event) => {
-        if (event.altKey) {
-            return;
-        }
-        const items = getFocusableNodes();
-        if (!(items === null || items === void 0 ? void 0 : items.length)) {
-            return;
-        }
-        const activeIndex = items.findIndex((el) => { var _a; return el.contains((_a = treeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.activeElement); });
-        const currentIndex = activeIndex > -1 ? activeIndex : 0;
-        switch (event.key) {
-            case 'ArrowUp': {
-                event.preventDefault();
-                const newIndex = Math.max(0, currentIndex - 1);
-                items[newIndex].focus();
-                focusedIndex.current = newIndex;
-                break;
-            }
-            case 'ArrowDown': {
-                event.preventDefault();
-                const newIndex = Math.min(items.length - 1, currentIndex + 1);
-                items[newIndex].focus();
-                focusedIndex.current = newIndex;
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    const [flatNodesList, firstLevelNodesList] = React.useMemo(() => {
-        const flatList = [];
-        const firstLevelNodes = [];
-        const flattenNodes = (nodes = [], depth = 0, parentNode) => {
-            const nodeIdList = Array();
-            nodes.forEach((element, index) => {
-                const { subNodes, ...nodeProps } = getNode(element);
-                const flatNode = {
-                    nodeProps,
-                    depth,
-                    parentNode,
-                    indexInGroup: index,
-                };
-                nodeIdList.push(flatNode.nodeProps.nodeId);
-                flatList.push(flatNode);
-                if (depth === 0) {
-                    firstLevelNodes.push(flatNode);
-                }
-                if (flatNode.nodeProps.isExpanded) {
-                    const subNodeIds = flattenNodes(subNodes, depth + 1, flatNode);
-                    flatNode.subNodeIds = subNodeIds;
-                }
-            });
-            return nodeIdList;
+  const {
+    data,
+    className,
+    nodeRenderer,
+    getNode,
+    enableVirtualization = false,
+    style,
+    ...rest
+  } = props;
+  const treeRef = React.useRef(null);
+  const focusedIndex = React.useRef(0);
+  React.useEffect(() => {
+    focusedIndex.current = 0;
+  }, [data]);
+  const getFocusableNodes = React.useCallback(() => {
+    const focusableItems = getFocusableElements(treeRef.current);
+    // Filter out focusable elements that are inside each node, e.g. checkbox
+    return focusableItems.filter(
+      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
+    );
+  }, []);
+  const handleKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    const items = getFocusableNodes();
+    if (!items?.length) {
+      return;
+    }
+    const activeIndex = items.findIndex((el) =>
+      el.contains(treeRef.current?.ownerDocument.activeElement),
+    );
+    const currentIndex = activeIndex > -1 ? activeIndex : 0;
+    switch (event.key) {
+      case 'ArrowUp': {
+        event.preventDefault();
+        const newIndex = Math.max(0, currentIndex - 1);
+        items[newIndex].focus();
+        focusedIndex.current = newIndex;
+        break;
+      }
+      case 'ArrowDown': {
+        event.preventDefault();
+        const newIndex = Math.min(items.length - 1, currentIndex + 1);
+        items[newIndex].focus();
+        focusedIndex.current = newIndex;
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const [flatNodesList, firstLevelNodesList] = React.useMemo(() => {
+    const flatList = [];
+    const firstLevelNodes = [];
+    const flattenNodes = (nodes = [], depth = 0, parentNode) => {
+      const nodeIdList = Array();
+      nodes.forEach((element, index) => {
+        const { subNodes, ...nodeProps } = getNode(element);
+        const flatNode = {
+          nodeProps,
+          depth,
+          parentNode,
+          indexInGroup: index,
         };
-        flattenNodes(data);
-        return [flatList, firstLevelNodes];
-    }, [data, getNode]);
-    const itemRenderer = React.useCallback((index) => {
-        var _a, _b, _c, _d;
-        const node = flatNodesList[index];
-        return (React.createElement(TreeContext.Provider, { key: node.nodeProps.nodeId, value: {
-                nodeDepth: node.depth,
-                subNodeIds: node.subNodeIds,
-                groupSize: node.depth === 0
-                    ? firstLevelNodesList.length
-                    : (_c = (_b = (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.subNodeIds) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0,
-                indexInGroup: node.indexInGroup,
-                parentNodeId: (_d = node.parentNode) === null || _d === void 0 ? void 0 : _d.nodeProps.nodeId,
-                scrollToParent: node.parentNode
-                    ? () => {
-                        var _a;
-                        const parentNodeId = (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.nodeProps.nodeId;
-                        const parentNodeIndex = flatNodesList.findIndex((n) => n.nodeProps.nodeId === parentNodeId);
-                        setScrollToIndex(parentNodeIndex);
-                    }
-                    : undefined,
-            } }, nodeRenderer(node.nodeProps)));
-    }, [firstLevelNodesList.length, flatNodesList, nodeRenderer]);
-    const [scrollToIndex, setScrollToIndex] = React.useState();
-    const flatNodesListRef = React.useRef(flatNodesList);
-    React.useEffect(() => {
-        flatNodesListRef.current = flatNodesList;
-    }, [flatNodesList]);
-    React.useEffect(() => {
-        setTimeout(() => {
-            var _a;
-            if (scrollToIndex !== undefined) {
-                const nodeId = flatNodesListRef.current[scrollToIndex].nodeProps.nodeId;
-                const nodeElement = (_a = treeRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.querySelector(`#${nodeId}`);
-                nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.focus();
-                // Need to reset that if navigating with mouse and keyboard,
-                // e.g. pressing arrow left to go to parent node and then with mouse
-                // clicking some other child node and then pressing arrow left
-                setScrollToIndex(undefined);
-            }
-        });
-    }, [scrollToIndex]);
-    const handleFocus = (event) => {
-        var _a, _b;
-        if ((_a = treeRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) {
-            return;
+        nodeIdList.push(flatNode.nodeProps.nodeId);
+        flatList.push(flatNode);
+        if (depth === 0) {
+          firstLevelNodes.push(flatNode);
         }
-        const items = getFocusableNodes();
-        if (items.length > 0) {
-            (_b = items[focusedIndex.current]) === null || _b === void 0 ? void 0 : _b.focus();
+        if (flatNode.nodeProps.isExpanded) {
+          const subNodeIds = flattenNodes(subNodes, depth + 1, flatNode);
+          flatNode.subNodeIds = subNodeIds;
         }
+      });
+      return nodeIdList;
     };
-    return (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualizedTree, { flatNodesList: flatNodesList, itemRenderer: itemRenderer, scrollToIndex: scrollToIndex, onFocus: handleFocus, onKeyDown: handleKeyDown, ref: treeRef, className: className, style: style, ...rest })) : (React.createElement(TreeElement, { onKeyDown: handleKeyDown, onFocus: handleFocus, className: className, style: style, ref: treeRef, ...rest }, flatNodesList.map((_, i) => itemRenderer(i))))));
+    flattenNodes(data);
+    return [flatList, firstLevelNodes];
+  }, [data, getNode]);
+  const itemRenderer = React.useCallback(
+    (index) => {
+      const node = flatNodesList[index];
+      return React.createElement(
+        TreeContext.Provider,
+        {
+          key: node.nodeProps.nodeId,
+          value: {
+            nodeDepth: node.depth,
+            subNodeIds: node.subNodeIds,
+            groupSize:
+              node.depth === 0
+                ? firstLevelNodesList.length
+                : node.parentNode?.subNodeIds?.length ?? 0,
+            indexInGroup: node.indexInGroup,
+            parentNodeId: node.parentNode?.nodeProps.nodeId,
+            scrollToParent: node.parentNode
+              ? () => {
+                  const parentNodeId = node.parentNode?.nodeProps.nodeId;
+                  const parentNodeIndex = flatNodesList.findIndex(
+                    (n) => n.nodeProps.nodeId === parentNodeId,
+                  );
+                  setScrollToIndex(parentNodeIndex);
+                }
+              : undefined,
+          },
+        },
+        nodeRenderer(node.nodeProps),
+      );
+    },
+    [firstLevelNodesList.length, flatNodesList, nodeRenderer],
+  );
+  const [scrollToIndex, setScrollToIndex] = React.useState();
+  const flatNodesListRef = React.useRef(flatNodesList);
+  React.useEffect(() => {
+    flatNodesListRef.current = flatNodesList;
+  }, [flatNodesList]);
+  React.useEffect(() => {
+    setTimeout(() => {
+      if (scrollToIndex !== undefined) {
+        const nodeId = flatNodesListRef.current[scrollToIndex].nodeProps.nodeId;
+        const nodeElement = treeRef.current?.ownerDocument.querySelector(
+          `#${nodeId}`,
+        );
+        nodeElement?.focus();
+        // Need to reset that if navigating with mouse and keyboard,
+        // e.g. pressing arrow left to go to parent node and then with mouse
+        // clicking some other child node and then pressing arrow left
+        setScrollToIndex(undefined);
+      }
+    });
+  }, [scrollToIndex]);
+  const handleFocus = (event) => {
+    if (treeRef.current?.contains(event.relatedTarget)) {
+      return;
+    }
+    const items = getFocusableNodes();
+    if (items.length > 0) {
+      items[focusedIndex.current]?.focus();
+    }
+  };
+  return React.createElement(
+    React.Fragment,
+    null,
+    enableVirtualization
+      ? React.createElement(VirtualizedTree, {
+          flatNodesList: flatNodesList,
+          itemRenderer: itemRenderer,
+          scrollToIndex: scrollToIndex,
+          onFocus: handleFocus,
+          onKeyDown: handleKeyDown,
+          ref: treeRef,
+          className: className,
+          style: style,
+          ...rest,
+        })
+      : React.createElement(
+          TreeElement,
+          {
+            onKeyDown: handleKeyDown,
+            onFocus: handleFocus,
+            className: className,
+            style: style,
+            ref: treeRef,
+            ...rest,
+          },
+          flatNodesList.map((_, i) => itemRenderer(i)),
+        ),
+  );
 };
 const TreeElement = polymorphic.ul('iui-tree', {
-    role: 'tree',
-    tabIndex: 0,
+  role: 'tree',
+  tabIndex: 0,
 });
 // Having virtualized tree separately prevents from running all virtualization logic
-const VirtualizedTree = React.forwardRef(({ flatNodesList, itemRenderer, scrollToIndex, className, style, ...rest }, ref) => {
+const VirtualizedTree = React.forwardRef(
+  (
+    { flatNodesList, itemRenderer, scrollToIndex, className, style, ...rest },
+    ref,
+  ) => {
     const { outerProps, innerProps, visibleChildren } = useVirtualization({
-        itemsLength: flatNodesList.length,
-        itemRenderer: itemRenderer,
-        scrollToIndex,
+      itemsLength: flatNodesList.length,
+      itemRenderer: itemRenderer,
+      scrollToIndex,
     });
-    return (React.createElement(Box, { ...{
-            ...outerProps,
-            className: cx(className, outerProps.className),
-            style: { ...style, ...outerProps.style },
-        } },
-        React.createElement(TreeElement, { ...innerProps, ...rest, ref: mergeRefs(ref, innerProps.ref) }, visibleChildren)));
-});
+    return React.createElement(
+      Box,
+      {
+        ...outerProps,
+        className: cx(className, outerProps.className),
+        style: { ...style, ...outerProps.style },
+      },
+      React.createElement(
+        TreeElement,
+        { ...innerProps, ...rest, ref: mergeRefs(ref, innerProps.ref) },
+        visibleChildren,
+      ),
+    );
+  },
+);
 export default Tree;

package/esm/core/Tree/TreeContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare type TreeContextProps = {
+export type TreeContextProps = {
     /**
      * Depth of the node.
      */