@itwin/itwinui-react 3.15.5 → 5.0.0-alpha.0

package/DEV-esm/core/Tree/Tree.js

@@ -1,239 +0,0 @@
-import * as React from 'react';
-import {
-  getFocusableElements,
-  polymorphic,
-  cloneElementWithRef,
-  useVirtualScroll,
-  ShadowRoot,
-  useMergedRefs,
-  useLayoutEffect,
-} from '../../utils/index.js';
-import { TreeContext } from './TreeContext.js';
-export 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 = 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.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
-          ? 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,
-          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)),
-        ),
-  );
-};
-Tree.displayName = 'Tree';
-let TreeElement = polymorphic.div('iui-tree', {
-  role: 'tree',
-  tabIndex: 0,
-});
-let 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 } = useVirtualScroll({
-      count: flatNodesList.length,
-      getScrollElement: () => parentRef.current,
-      estimateSize: () => 39,
-      getItemKey,
-    });
-    useLayoutEffect(() => {
-      if (scrollToIndex) virtualizer.scrollToIndex(scrollToIndex);
-    }, [virtualizer, scrollToIndex]);
-    return React.createElement(
-      TreeElement,
-      {
-        ...rest,
-        ref: useMergedRefs(ref, parentRef),
-      },
-      React.createElement(
-        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/DEV-esm/core/Tree/TreeContext.js

@@ -1,8 +0,0 @@
-import * as React from 'react';
-export const TreeContext = React.createContext(void 0);
-export 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/DEV-esm/core/Tree/TreeNode.js

@@ -1,238 +0,0 @@
-import * as React from 'react';
-import {
-  getFocusableElements,
-  Box,
-  useMergedRefs,
-  mergeEventHandlers,
-} from '../../utils/index.js';
-import cx from 'classnames';
-import { TreeNodeExpander } from './TreeNodeExpander.js';
-import { useTreeContext } from './TreeContext.js';
-export 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,
-  } = 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 = 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 = 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(
-    Box,
-    {
-      as: 'div',
-      role: 'treeitem',
-      className: cx('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: useMergedRefs(nodeRef, forwardedRef),
-      onFocus: mergeEventHandlers(props.onFocus, (e) => {
-        setIsFocused(true);
-        e.stopPropagation();
-      }),
-      onBlur: mergeEventHandlers(props.onBlur, () => {
-        setIsFocused(false);
-      }),
-      onKeyDown: mergeEventHandlers(props.onKeyDown, onKeyDown),
-    },
-    React.createElement(
-      Box,
-      {
-        as: 'div',
-        style: {
-          '--level': nodeDepth,
-        },
-        onClick: () => !isDisabled && onSelected?.(nodeId, !isSelected),
-        ...nodeProps,
-        className: cx(
-          'iui-tree-node',
-          {
-            'iui-active': isSelected,
-            'iui-disabled': isDisabled,
-          },
-          nodeProps?.className,
-        ),
-      },
-      checkbox &&
-        React.createElement(
-          Box,
-          {
-            as: 'div',
-            ...checkboxProps,
-            className: cx('iui-tree-node-checkbox', checkboxProps?.className),
-          },
-          React.isValidElement(checkbox)
-            ? React.cloneElement(checkbox, {
-                tabIndex: isFocused ? 0 : -1,
-              })
-            : checkbox,
-        ),
-      React.createElement(
-        Box,
-        {
-          as: 'div',
-          ...contentProps,
-          className: cx('iui-tree-node-content', contentProps?.className),
-        },
-        hasSubNodes && expander,
-        hasSubNodes &&
-          !expander &&
-          React.createElement(TreeNodeExpander, {
-            isExpanded: isExpanded,
-            disabled: isDisabled,
-            onClick: onExpanderClick,
-            tabIndex: isFocused ? 0 : -1,
-            ...expanderProps,
-          }),
-        icon &&
-          React.createElement(
-            Box,
-            {
-              as: 'span',
-              'aria-hidden': true,
-              ...iconProps,
-              className: cx('iui-tree-node-content-icon', iconProps?.className),
-            },
-            icon,
-          ),
-        React.createElement(
-          Box,
-          {
-            as: 'div',
-            ...labelProps,
-            className: cx('iui-tree-node-content-label', labelProps?.className),
-          },
-          React.createElement(
-            Box,
-            {
-              as: 'div',
-              ...titleProps,
-              className: cx(
-                'iui-tree-node-content-title',
-                titleProps?.className,
-              ),
-            },
-            label,
-          ),
-          sublabel &&
-            React.createElement(
-              Box,
-              {
-                as: 'div',
-                ...sublabelProps,
-                className: cx(
-                  'iui-tree-node-content-caption',
-                  sublabelProps?.className,
-                ),
-              },
-              sublabel,
-            ),
-        ),
-        children,
-      ),
-    ),
-    hasSubNodes &&
-      React.createElement(Box, {
-        as: 'div',
-        role: 'group',
-        'aria-owns': subNodeIds.join(' '),
-        ...subTreeProps,
-        className: cx('iui-sub-tree', subTreeProps?.className),
-      }),
-  );
-});
-TreeNode.displayName = 'TreeNode';

package/DEV-esm/core/Tree/TreeNodeExpander.js

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { SvgChevronRight, SvgChevronRightSmall } from '../../utils/index.js';
-import { IconButton } from '../Buttons/IconButton.js';
-import { TreeContext } from './TreeContext.js';
-export const TreeNodeExpander = React.forwardRef((props, ref) => {
-  let { isExpanded, expanderIconProps = {}, ...rest } = props;
-  let size = React.useContext(TreeContext)?.size ?? 'default';
-  let ChevronIcon = 'small' === size ? SvgChevronRightSmall : SvgChevronRight;
-  return React.createElement(
-    IconButton,
-    {
-      styleType: 'borderless',
-      size: 'small',
-      'aria-label': isExpanded ? 'Collapse' : 'Expand',
-      ref: ref,
-      ...rest,
-    },
-    React.createElement(ChevronIcon, {
-      ...expanderIconProps,
-      className: cx(
-        'iui-tree-node-content-expander-icon',
-        expanderIconProps?.className,
-        {
-          'iui-tree-node-content-expander-icon-expanded': isExpanded,
-        },
-      ),
-    }),
-  );
-});
-TreeNodeExpander.displayName = 'TreeNode.Expander';

package/DEV-esm/core/Typography/Anchor.js

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box } from '../../utils/index.js';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-import { TextContext } from './Text.js';
-export const Anchor = React.forwardRef((props, forwardedRef) => {
-  let isInsideText = React.useContext(TextContext);
-  let { isExternal, underline = isInsideText, children, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      as: 'a',
-      'data-iui-underline': underline ? 'true' : void 0,
-      ...rest,
-      ref: forwardedRef,
-      className: cx(
-        'iui-anchor',
-        {
-          'iui-anchor-external': isExternal,
-        },
-        props.className,
-      ),
-    },
-    children,
-    '_blank' === props.target &&
-      React.createElement(VisuallyHidden, null, ' (opens in new tab)'),
-  );
-});
-Anchor.displayName = 'Anchor';

package/DEV-esm/core/Typography/Blockquote.js

@@ -1,18 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { Box } from '../../utils/index.js';
-export const Blockquote = React.forwardRef((props, ref) => {
-  let { className, children, footer, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      as: 'blockquote',
-      className: cx('iui-blockquote', className),
-      ref: ref,
-      ...rest,
-    },
-    children,
-    footer && React.createElement('footer', null, footer),
-  );
-});
-Blockquote.displayName = 'Blockquote';

package/DEV-esm/core/Typography/Code.js

@@ -1,3 +0,0 @@
-import { polymorphic } from '../../utils/index.js';
-export const Code = polymorphic.code('iui-code');
-Code.displayName = 'Code';

package/DEV-esm/core/Typography/Kbd.js

@@ -1,32 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { Box } from '../../utils/index.js';
-export const KbdKeys = {
-  Command: '\u2318 Cmd',
-  Shift: '\u21e7 Shift',
-  Backspace: '\u232b Backspace',
-  Enter: '\u21b5 Enter',
-  Eject: '\u23cf Eject',
-  Control: 'Ctrl',
-  Windows: '\u229e Win',
-  Apple: '\uf8ff',
-  Option: '\u2325 Option',
-  Left: '\u2190',
-  Up: '\u2191',
-  Right: '\u2192',
-  Down: '\u2193',
-};
-export const Kbd = React.forwardRef((props, forwardedRef) => {
-  let { className, children, ...rest } = props;
-  return React.createElement(
-    Box,
-    {
-      as: 'kbd',
-      className: cx('iui-keyboard', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
-});
-Kbd.displayName = 'Kbd';

package/DEV-esm/core/Typography/Text.js

@@ -1,33 +0,0 @@
-import cx from 'classnames';
-import * as React from 'react';
-import { Box } from '../../utils/index.js';
-export const Text = React.forwardRef((props, ref) => {
-  let {
-    variant = 'body',
-    className,
-    isMuted = false,
-    isSkeleton = false,
-    ...rest
-  } = props;
-  return React.createElement(
-    TextContext.Provider,
-    {
-      value: true,
-    },
-    React.createElement(Box, {
-      className: cx(
-        {
-          [`iui-text-${variant}`]: 'body' !== variant,
-          'iui-text-block': 'body' === variant,
-          'iui-text-muted': isMuted,
-          'iui-skeleton': isSkeleton,
-        },
-        className,
-      ),
-      ref: ref,
-      ...rest,
-    }),
-  );
-});
-Text.displayName = 'Text';
-export const TextContext = React.createContext(false);

package/DEV-esm/core/VisuallyHidden/VisuallyHidden.js

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import cx from 'classnames';
-import { Box, ShadowRoot, useHydration } from '../../utils/index.js';
-export const VisuallyHidden = React.forwardRef((props, ref) => {
-  let {
-    as: asProp = 'span',
-    className,
-    unhideOnFocus = true,
-    children: childrenProp,
-    ...rest
-  } = props;
-  let isHydrated = 'hydrated' === useHydration();
-  let children = ['div', 'span', 'p'].includes(asProp)
-    ? React.createElement(
-        React.Fragment,
-        null,
-        React.createElement(
-          ShadowRoot,
-          {
-            css: css,
-          },
-          React.createElement('slot', null),
-        ),
-        isHydrated && childrenProp,
-      )
-    : childrenProp;
-  return React.createElement(
-    Box,
-    {
-      as: asProp,
-      className: cx('iui-visually-hidden', className),
-      'data-iui-unhide-on-focus': !!unhideOnFocus || void 0,
-      ref: ref,
-      ...rest,
-    },
-    children,
-  );
-});
-VisuallyHidden.displayName = 'VisuallyHidden';
-let css = `
-  :host(:where(:not([data-iui-unhide-on-focus]:is(:focus-within, :active)))) {
-    clip-path: inset(50%) !important;
-    overflow: hidden !important;
-    position: absolute !important;
-    white-space: nowrap !important;
-    block-size: 1px !important;
-    inline-size: 1px !important;
-  }
-`;