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

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

@@ -1,246 +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)),
-        ),
-  );
-};
-Tree.displayName = 'Tree';
-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/DEV-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/DEV-cjs/core/Tree/TreeNode.js

@@ -1,264 +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,
-        ),
-      }),
-  );
-});
-TreeNode.displayName = 'TreeNode';

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

@@ -1,44 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'TreeNodeExpander', {
-  enumerable: true,
-  get: function () {
-    return TreeNodeExpander;
-  },
-});
-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 _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
-const _IconButton = require('../Buttons/IconButton.js');
-const _TreeContext = require('./TreeContext.js');
-const TreeNodeExpander = _react.forwardRef((props, ref) => {
-  let { isExpanded, expanderIconProps = {}, ...rest } = props;
-  let size = _react.useContext(_TreeContext.TreeContext)?.size ?? 'default';
-  let ChevronIcon =
-    'small' === size ? _index.SvgChevronRightSmall : _index.SvgChevronRight;
-  return _react.createElement(
-    _IconButton.IconButton,
-    {
-      styleType: 'borderless',
-      size: 'small',
-      'aria-label': isExpanded ? 'Collapse' : 'Expand',
-      ref: ref,
-      ...rest,
-    },
-    _react.createElement(ChevronIcon, {
-      ...expanderIconProps,
-      className: (0, _classnames.default)(
-        'iui-tree-node-content-expander-icon',
-        expanderIconProps?.className,
-        {
-          'iui-tree-node-content-expander-icon-expanded': isExpanded,
-        },
-      ),
-    }),
-  );
-});
-TreeNodeExpander.displayName = 'TreeNode.Expander';

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

@@ -1,45 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'Anchor', {
-  enumerable: true,
-  get: function () {
-    return Anchor;
-  },
-});
-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 _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
-const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-const _Text = require('./Text.js');
-const Anchor = _react.forwardRef((props, forwardedRef) => {
-  let isInsideText = _react.useContext(_Text.TextContext);
-  let { isExternal, underline = isInsideText, children, ...rest } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      as: 'a',
-      'data-iui-underline': underline ? 'true' : void 0,
-      ...rest,
-      ref: forwardedRef,
-      className: (0, _classnames.default)(
-        'iui-anchor',
-        {
-          'iui-anchor-external': isExternal,
-        },
-        props.className,
-      ),
-    },
-    children,
-    '_blank' === props.target &&
-      _react.createElement(
-        _VisuallyHidden.VisuallyHidden,
-        null,
-        ' (opens in new tab)',
-      ),
-  );
-});
-Anchor.displayName = 'Anchor';

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

@@ -1,30 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'Blockquote', {
-  enumerable: true,
-  get: function () {
-    return Blockquote;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _classnames = _interop_require_default._(require('classnames'));
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const Blockquote = _react.forwardRef((props, ref) => {
-  let { className, children, footer, ...rest } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      as: 'blockquote',
-      className: (0, _classnames.default)('iui-blockquote', className),
-      ref: ref,
-      ...rest,
-    },
-    children,
-    footer && _react.createElement('footer', null, footer),
-  );
-});
-Blockquote.displayName = 'Blockquote';

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

@@ -1,13 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'Code', {
-  enumerable: true,
-  get: function () {
-    return Code;
-  },
-});
-const _index = require('../../utils/index.js');
-const Code = _index.polymorphic.code('iui-code');
-Code.displayName = 'Code';