@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

package/cjs/core/Tree/Tree.js

@@ -1,245 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'Tree', {
-  enumerable: true,
-  get: function () {
-    return Tree;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const _TreeContext = require('./TreeContext.js');
-const Tree = (props) => {
-  let {
-    data,
-    className,
-    nodeRenderer,
-    getNode,
-    size = 'default',
-    enableVirtualization = false,
-    style,
-    ...rest
-  } = props;
-  let treeRef = _react.useRef(null);
-  let focusedIndex = _react.useRef(0);
-  _react.useEffect(() => {
-    focusedIndex.current = 0;
-  }, [data]);
-  let getFocusableNodes = _react.useCallback(() => {
-    let focusableItems = (0, _index.getFocusableElements)(treeRef.current);
-    return focusableItems.filter(
-      (i) => !focusableItems.some((p) => p.contains(i.parentElement)),
-    );
-  }, []);
-  let handleKeyDown = (event) => {
-    if (event.altKey) return;
-    let items = getFocusableNodes();
-    if (!items?.length) return;
-    let activeIndex = items.findIndex((el) =>
-      el.contains(treeRef.current?.ownerDocument.activeElement),
-    );
-    let currentIndex = activeIndex > -1 ? activeIndex : 0;
-    switch (event.key) {
-      case 'ArrowUp': {
-        event.preventDefault();
-        let newIndex = Math.max(0, currentIndex - 1);
-        items[newIndex].focus();
-        focusedIndex.current = newIndex;
-        break;
-      }
-      case 'ArrowDown': {
-        event.preventDefault();
-        let newIndex = Math.min(items.length - 1, currentIndex + 1);
-        items[newIndex].focus();
-        focusedIndex.current = newIndex;
-        break;
-      }
-      default:
-        break;
-    }
-  };
-  let [flatNodesList, firstLevelNodesList] = _react.useMemo(() => {
-    let flatList = [];
-    let firstLevelNodes = [];
-    let flattenNodes = (nodes = [], depth = 0, parentNode) => {
-      let nodeIdList = Array();
-      nodes.forEach((element, index) => {
-        let { subNodes, ...nodeProps } = getNode(element);
-        let flatNode = {
-          nodeProps,
-          depth,
-          parentNode,
-          indexInGroup: index,
-        };
-        nodeIdList.push(flatNode.nodeProps.nodeId);
-        flatList.push(flatNode);
-        if (0 === depth) firstLevelNodes.push(flatNode);
-        if (flatNode.nodeProps.isExpanded) {
-          let subNodeIds = flattenNodes(subNodes, depth + 1, flatNode);
-          flatNode.subNodeIds = subNodeIds;
-        }
-      });
-      return nodeIdList;
-    };
-    flattenNodes(data);
-    return [flatList, firstLevelNodes];
-  }, [data, getNode]);
-  let itemRenderer = _react.useCallback(
-    (index, virtualItem, virtualizer) => {
-      let node = flatNodesList[index];
-      return _react.createElement(
-        _TreeContext.TreeContext.Provider,
-        {
-          key: node.nodeProps.nodeId,
-          value: {
-            nodeDepth: node.depth,
-            subNodeIds: node.subNodeIds,
-            groupSize:
-              0 === node.depth
-                ? firstLevelNodesList.length
-                : node.parentNode?.subNodeIds?.length ?? 0,
-            indexInGroup: node.indexInGroup,
-            parentNodeId: node.parentNode?.nodeProps.nodeId,
-            scrollToParent: node.parentNode
-              ? () => {
-                  let parentNodeId = node.parentNode?.nodeProps.nodeId;
-                  let parentNodeIndex = flatNodesList.findIndex(
-                    (n) => n.nodeProps.nodeId === parentNodeId,
-                  );
-                  setScrollToIndex(parentNodeIndex);
-                }
-              : void 0,
-            size,
-          },
-        },
-        virtualItem && virtualizer
-          ? (0, _index.cloneElementWithRef)(
-              nodeRenderer(node.nodeProps),
-              (children) => ({
-                ...children.props,
-                key: virtualItem.key,
-                'data-iui-index': virtualItem.index,
-                'data-iui-virtualizer': 'item',
-                ref: virtualizer.measureElement,
-                style: {
-                  ...children.props.style,
-                  '--_iui-width': '100%',
-                  transform: `translateY(${virtualItem.start}px)`,
-                },
-              }),
-            )
-          : nodeRenderer(node.nodeProps),
-      );
-    },
-    [firstLevelNodesList.length, flatNodesList, nodeRenderer, size],
-  );
-  let [scrollToIndex, setScrollToIndex] = _react.useState();
-  let flatNodesListRef = _react.useRef(flatNodesList);
-  _react.useEffect(() => {
-    flatNodesListRef.current = flatNodesList;
-  }, [flatNodesList]);
-  _react.useEffect(() => {
-    setTimeout(() => {
-      if (void 0 !== scrollToIndex) {
-        let nodeId = flatNodesListRef.current[scrollToIndex].nodeProps.nodeId;
-        let nodeElement = treeRef.current?.ownerDocument.querySelector(
-          `#${nodeId}`,
-        );
-        nodeElement?.focus();
-        setScrollToIndex(void 0);
-      }
-    });
-  }, [scrollToIndex]);
-  let handleFocus = (event) => {
-    if (treeRef.current?.contains(event.relatedTarget)) return;
-    let 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,
-          'data-iui-size': 'small' === size ? 'small' : void 0,
-          style: style,
-          ...rest,
-        })
-      : _react.createElement(
-          TreeElement,
-          {
-            onKeyDown: handleKeyDown,
-            onFocus: handleFocus,
-            className: className,
-            'data-iui-size': 'small' === size ? 'small' : void 0,
-            style: style,
-            ref: treeRef,
-            ...rest,
-          },
-          flatNodesList.map((_, i) => itemRenderer(i)),
-        ),
-  );
-};
-const TreeElement = _index.polymorphic.div('iui-tree', {
-  role: 'tree',
-  tabIndex: 0,
-});
-const VirtualizedTree = _react.forwardRef(
-  ({ flatNodesList, itemRenderer, scrollToIndex, ...rest }, ref) => {
-    let parentRef = _react.useRef(null);
-    let getItemKey = _react.useCallback(
-      (index) => flatNodesList[index].nodeProps.nodeId,
-      [flatNodesList],
-    );
-    let { virtualizer, css: virtualizerCss } = (0, _index.useVirtualScroll)({
-      count: flatNodesList.length,
-      getScrollElement: () => parentRef.current,
-      estimateSize: () => 39,
-      getItemKey,
-    });
-    (0, _index.useLayoutEffect)(() => {
-      if (scrollToIndex) virtualizer.scrollToIndex(scrollToIndex);
-    }, [virtualizer, scrollToIndex]);
-    return _react.createElement(
-      TreeElement,
-      {
-        ...rest,
-        ref: (0, _index.useMergedRefs)(ref, parentRef),
-      },
-      _react.createElement(
-        _index.ShadowRoot,
-        {
-          css: virtualizerCss,
-        },
-        _react.createElement(
-          'div',
-          {
-            'data-iui-virtualizer': 'root',
-            style: {
-              minBlockSize: virtualizer.getTotalSize(),
-            },
-          },
-          _react.createElement('slot', null),
-        ),
-      ),
-      _react.createElement(
-        _react.Fragment,
-        null,
-        virtualizer
-          .getVirtualItems()
-          .map((virtualItem) =>
-            itemRenderer(virtualItem.index, virtualItem, virtualizer),
-          ),
-      ),
-    );
-  },
-);

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

@@ -1,33 +0,0 @@
-import * as React from 'react';
-export type TreeContextProps = {
-    /**
-     * Depth of the node.
-     */
-    nodeDepth: number;
-    /**
-     * List of sub-node IDs. Used for an accessibility attribute and keyboard navigation.
-     */
-    subNodeIds?: string[];
-    /**
-     * ID of the parent node. Used for keyboard navigation.
-     */
-    parentNodeId?: string;
-    /**
-     * Number of nodes that are under the same parent node or in the root. Used for an accessibility attribute.
-     */
-    groupSize: number;
-    /**
-     * Node index in the list of nodes under the same parent node or in the root. Used for an accessibility attribute.
-     */
-    indexInGroup: number;
-    /**
-     * Function that scrolls to the node's parent node.
-     */
-    scrollToParent?: () => void;
-    /**
-     * Size of the tree.
-     */
-    size?: 'default' | 'small';
-};
-export declare const TreeContext: React.Context<TreeContextProps | undefined>;
-export declare const useTreeContext: () => TreeContextProps;

package/cjs/core/Tree/TreeContext.js

@@ -1,28 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-function _export(target, all) {
-  for (var name in all)
-    Object.defineProperty(target, name, {
-      enumerable: true,
-      get: all[name],
-    });
-}
-_export(exports, {
-  TreeContext: function () {
-    return TreeContext;
-  },
-  useTreeContext: function () {
-    return useTreeContext;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const TreeContext = _react.createContext(void 0);
-const useTreeContext = () => {
-  let context = _react.useContext(TreeContext);
-  if (void 0 == context)
-    throw new Error('TreeContext must be used within a TreeContext.Provider');
-  return context;
-};

package/cjs/core/Tree/TreeNode.d.ts

@@ -1,132 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import { TreeNodeExpander } from './TreeNodeExpander.js';
-type TreeNodeProps = {
-    /**
-     * Unique id of the node.
-     * It has to be compatible with HTML id attribute.
-     */
-    nodeId: string;
-    /**
-     * Props for main node inside the treeitem (excluding the sub-tree).
-     *
-     * If you need to customize the root node instead, pass top-level props
-     * directly to the `TreeNode` component.
-     */
-    nodeProps?: React.ComponentProps<'div'>;
-    /**
-     * The main text displayed on the node.
-     */
-    label: React.ReactNode;
-    /**
-     * Props for TreeNode label(affects both the main and sub label).
-     */
-    labelProps?: React.ComponentProps<'div'>;
-    /**
-     * Props for the TreeNode's main label.
-     */
-    titleProps?: React.ComponentProps<'div'>;
-    /**
-     * Small note displayed below main label.
-     */
-    sublabel?: React.ReactNode;
-    /**
-     * Props for TreeNode sublabel
-     */
-    sublabelProps?: React.ComponentProps<'div'>;
-    /**
-     * Icon shown before label and sublabel content.
-     */
-    icon?: JSX.Element;
-    /**
-     * Props for TreeNode Icon
-     */
-    iconProps?: React.ComponentProps<'span'>;
-    /**
-     * Flag whether the node has child sub-nodes. It is used to show expander icon.
-     * @default false
-     */
-    hasSubNodes?: boolean;
-    /**
-     * Props for subTree list(affects all subnodes of this node).
-     */
-    subTreeProps?: React.ComponentProps<'div'>;
-    /**
-     * Flag whether the node is disabled.
-     * @default false
-     */
-    isDisabled?: boolean;
-    /**
-     * Flag whether the node is expanded.
-     * @default false
-     */
-    isExpanded?: boolean;
-    /**
-     * Flag whether the node is selected.
-     * @default false
-     */
-    isSelected?: boolean;
-    /**
-     * Callback fired when expanding or closing a TreeNode.
-     * Gives nodeId and new isExpanded value of specified node.
-     */
-    onExpanded: (nodeId: string, isExpanded: boolean) => void;
-    /**
-     * Callback fired when selecting a TreeNode.
-     * Gives nodeId and new isSelected value of specified node.
-     */
-    onSelected?: (nodeId: string, isSelected: boolean) => void;
-    /**
-     * Checkbox to be shown at the very beginning of the node.
-     * If undefined, checkbox will not be shown.
-     * Recommended to use `Checkbox` component.
-     */
-    checkbox?: React.ReactNode;
-    /**
-     * Props for TreeNode checkbox.
-     */
-    checkboxProps?: React.ComponentProps<'div'>;
-    /**
-     * Custom expander element. If `hasSubNodes` is false, it won't be shown.
-     */
-    expander?: React.ReactNode;
-    /**
-     * Props for the default TreeNodeExpander that is shown when there are sub nodes and no expander is given.
-     */
-    expanderProps?: React.ComponentProps<typeof TreeNodeExpander>;
-    /**
-     * Props for content of the TreeNode.
-     * This affects all passed in children of the node, as well as the label, sublabel, icon, and expander.
-     * Note that this does not affect the checkbox.
-     */
-    contentProps?: React.ComponentProps<'div'>;
-    /**
-     * Content shown after `TreeNode`.
-     */
-    children?: React.ReactNode;
-    /**
-     * @deprecated Use `nodeId` instead.
-     */
-    id?: never;
-};
-/**
- * `TreeNode` component to display node content within a `Tree`.
- * Must be used inside `Tree` component to correctly set node `depth` and `subNodes`.
- * @example
-  <TreeNode
-    nodeId={props.nodeId}
-    label={props.node.label}
-    sublabel={props.node.sublabel}
-    onExpanded={onExpanded}
-    onSelected={onSelectedNodeChange}
-    isDisabled={props.isDisabled}
-    isExpanded={props.isExpanded}
-    isSelected={props.isSelected}
-    checkbox={
-      <Checkbox variant='eyeball' disabled={props.isDisabled} />
-    }
-    icon={<SvgPlaceholder />}
-  />
- */
-export declare const TreeNode: PolymorphicForwardRefComponent<"div", TreeNodeProps>;
-export {};

package/cjs/core/Tree/TreeNode.js

@@ -1,263 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'TreeNode', {
-  enumerable: true,
-  get: function () {
-    return TreeNode;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const _classnames = _interop_require_default._(require('classnames'));
-const _TreeNodeExpander = require('./TreeNodeExpander.js');
-const _TreeContext = require('./TreeContext.js');
-const TreeNode = _react.forwardRef((props, forwardedRef) => {
-  let {
-    nodeId,
-    nodeProps = {},
-    label,
-    labelProps = {},
-    sublabel,
-    sublabelProps = {},
-    children,
-    className,
-    icon,
-    iconProps = {},
-    hasSubNodes = false,
-    isDisabled = false,
-    isExpanded = false,
-    isSelected = false,
-    onSelected,
-    onExpanded,
-    checkbox,
-    checkboxProps = {},
-    subTreeProps = {},
-    contentProps = {},
-    titleProps = {},
-    expanderProps = {},
-    expander,
-    ...rest
-  } = props;
-  let {
-    nodeDepth,
-    subNodeIds = [],
-    parentNodeId,
-    scrollToParent,
-    groupSize,
-    indexInGroup,
-  } = (0, _TreeContext.useTreeContext)();
-  let [isFocused, setIsFocused] = _react.useState(false);
-  let nodeRef = _react.useRef(null);
-  let onKeyDown = (event) => {
-    if (event.altKey) return;
-    let isNodeFocused =
-      nodeRef.current === nodeRef.current?.ownerDocument.activeElement;
-    switch (event.key) {
-      case 'ArrowLeft': {
-        event.preventDefault();
-        if (isNodeFocused) {
-          if (isExpanded) {
-            onExpanded(nodeId, false);
-            break;
-          }
-          if (parentNodeId) scrollToParent?.();
-          break;
-        }
-        let focusableElements = (0, _index.getFocusableElements)(
-          nodeRef.current,
-        );
-        let currentIndex = focusableElements.indexOf(
-          nodeRef.current?.ownerDocument.activeElement,
-        );
-        if (0 === currentIndex) nodeRef.current?.focus();
-        else focusableElements[currentIndex - 1]?.focus();
-        break;
-      }
-      case 'ArrowRight': {
-        event.preventDefault();
-        let focusableElements = (0, _index.getFocusableElements)(
-          nodeRef.current,
-        );
-        if (isNodeFocused) {
-          if (!isExpanded && hasSubNodes) {
-            onExpanded(nodeId, true);
-            break;
-          }
-          focusableElements[0]?.focus();
-          break;
-        }
-        let currentIndex = focusableElements.indexOf(
-          nodeRef.current?.ownerDocument.activeElement,
-        );
-        if (currentIndex < focusableElements.length - 1)
-          focusableElements[currentIndex + 1].focus();
-        break;
-      }
-      case ' ':
-      case 'Spacebar':
-      case 'Enter':
-        if (event.target !== nodeRef.current) break;
-        event.preventDefault();
-        if (!isDisabled) onSelected?.(nodeId, !isSelected);
-        break;
-      default:
-        break;
-    }
-  };
-  let onExpanderClick = _react.useCallback(
-    (event) => {
-      onExpanded(nodeId, !isExpanded);
-      event.stopPropagation();
-    },
-    [isExpanded, nodeId, onExpanded],
-  );
-  return _react.createElement(
-    _index.Box,
-    {
-      as: 'div',
-      role: 'treeitem',
-      className: (0, _classnames.default)('iui-tree-item', className),
-      'aria-expanded': hasSubNodes ? isExpanded : void 0,
-      'aria-disabled': isDisabled,
-      'aria-selected': isSelected,
-      'aria-level': nodeDepth + 1,
-      'aria-setsize': groupSize,
-      'aria-posinset': indexInGroup + 1,
-      tabIndex: -1,
-      ...rest,
-      id: nodeId,
-      ref: (0, _index.useMergedRefs)(nodeRef, forwardedRef),
-      onFocus: (0, _index.mergeEventHandlers)(props.onFocus, (e) => {
-        setIsFocused(true);
-        e.stopPropagation();
-      }),
-      onBlur: (0, _index.mergeEventHandlers)(props.onBlur, () => {
-        setIsFocused(false);
-      }),
-      onKeyDown: (0, _index.mergeEventHandlers)(props.onKeyDown, onKeyDown),
-    },
-    _react.createElement(
-      _index.Box,
-      {
-        as: 'div',
-        style: {
-          '--level': nodeDepth,
-        },
-        onClick: () => !isDisabled && onSelected?.(nodeId, !isSelected),
-        ...nodeProps,
-        className: (0, _classnames.default)(
-          'iui-tree-node',
-          {
-            'iui-active': isSelected,
-            'iui-disabled': isDisabled,
-          },
-          nodeProps?.className,
-        ),
-      },
-      checkbox &&
-        _react.createElement(
-          _index.Box,
-          {
-            as: 'div',
-            ...checkboxProps,
-            className: (0, _classnames.default)(
-              'iui-tree-node-checkbox',
-              checkboxProps?.className,
-            ),
-          },
-          _react.isValidElement(checkbox)
-            ? _react.cloneElement(checkbox, {
-                tabIndex: isFocused ? 0 : -1,
-              })
-            : checkbox,
-        ),
-      _react.createElement(
-        _index.Box,
-        {
-          as: 'div',
-          ...contentProps,
-          className: (0, _classnames.default)(
-            'iui-tree-node-content',
-            contentProps?.className,
-          ),
-        },
-        hasSubNodes && expander,
-        hasSubNodes &&
-          !expander &&
-          _react.createElement(_TreeNodeExpander.TreeNodeExpander, {
-            isExpanded: isExpanded,
-            disabled: isDisabled,
-            onClick: onExpanderClick,
-            tabIndex: isFocused ? 0 : -1,
-            ...expanderProps,
-          }),
-        icon &&
-          _react.createElement(
-            _index.Box,
-            {
-              as: 'span',
-              'aria-hidden': true,
-              ...iconProps,
-              className: (0, _classnames.default)(
-                'iui-tree-node-content-icon',
-                iconProps?.className,
-              ),
-            },
-            icon,
-          ),
-        _react.createElement(
-          _index.Box,
-          {
-            as: 'div',
-            ...labelProps,
-            className: (0, _classnames.default)(
-              'iui-tree-node-content-label',
-              labelProps?.className,
-            ),
-          },
-          _react.createElement(
-            _index.Box,
-            {
-              as: 'div',
-              ...titleProps,
-              className: (0, _classnames.default)(
-                'iui-tree-node-content-title',
-                titleProps?.className,
-              ),
-            },
-            label,
-          ),
-          sublabel &&
-            _react.createElement(
-              _index.Box,
-              {
-                as: 'div',
-                ...sublabelProps,
-                className: (0, _classnames.default)(
-                  'iui-tree-node-content-caption',
-                  sublabelProps?.className,
-                ),
-              },
-              sublabel,
-            ),
-        ),
-        children,
-      ),
-    ),
-    hasSubNodes &&
-      _react.createElement(_index.Box, {
-        as: 'div',
-        role: 'group',
-        'aria-owns': subNodeIds.join(' '),
-        ...subTreeProps,
-        className: (0, _classnames.default)(
-          'iui-sub-tree',
-          subTreeProps?.className,
-        ),
-      }),
-  );
-});

package/cjs/core/Tree/TreeNodeExpander.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { IconButtonProps } from '../Buttons/IconButton.js';
-type TreeNodeExpanderProps = {
-    isExpanded?: boolean;
-    expanderIconProps?: React.ComponentProps<'svg'>;
-} & IconButtonProps;
-export declare const TreeNodeExpander: PolymorphicForwardRefComponent<"button", TreeNodeExpanderProps>;
-export {};