@itwin/itwinui-react 3.11.2 → 3.12.0

package/esm/core/Tree/TreeNode.js

@@ -1,128 +1,243 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
-import { getFocusableElements, Box } from '../../utils/index.js';
+import {
+  getFocusableElements,
+  Box,
+  useMergedRefs,
+  mergeEventHandlers,
+} from '../../utils/index.js';
 import cx from 'classnames';
 import { TreeNodeExpander } from './TreeNodeExpander.js';
 import { useTreeContext } from './TreeContext.js';
-/**
- * `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} />
+export const TreeNode = React.forwardRef((props, forwardedRef) => {
+  const {
+    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;
+  const {
+    nodeDepth,
+    subNodeIds = [],
+    parentNodeId,
+    scrollToParent,
+    groupSize,
+    indexInGroup,
+  } = useTreeContext();
+  const [isFocused, setIsFocused] = React.useState(false);
+  const nodeRef = React.useRef(null);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
     }
-    icon={<SvgPlaceholder />}
-  />
- */
-export const TreeNode = (props) => {
-    const { 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;
-    const { nodeDepth, subNodeIds = [], parentNodeId, scrollToParent, groupSize, indexInGroup, } = useTreeContext();
-    const [isFocused, setIsFocused] = React.useState(false);
-    const nodeRef = React.useRef(null);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
-            return;
+    const 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;
+          }
+          break;
         }
-        const 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;
-                    }
-                    // If it is top level node (doesn't have parent node), then do nothing.
-                    break;
-                }
-                const focusableElements = getFocusableElements(nodeRef.current);
-                const currentIndex = focusableElements.indexOf(nodeRef.current?.ownerDocument.activeElement);
-                if (currentIndex === 0) {
-                    nodeRef.current?.focus();
-                }
-                else {
-                    focusableElements[currentIndex - 1]?.focus();
-                }
-                break;
-            }
-            case 'ArrowRight': {
-                event.preventDefault();
-                const focusableElements = getFocusableElements(nodeRef.current);
-                if (isNodeFocused) {
-                    if (!isExpanded && hasSubNodes) {
-                        onExpanded(nodeId, true);
-                        break;
-                    }
-                    focusableElements[0]?.focus();
-                    break;
-                }
-                const currentIndex = focusableElements.indexOf(nodeRef.current?.ownerDocument.activeElement);
-                if (currentIndex < focusableElements.length - 1) {
-                    focusableElements[currentIndex + 1].focus();
-                    break;
-                }
-                break;
-            }
-            case ' ':
-            case 'Spacebar':
-            case 'Enter': {
-                // Ignore if it is called on the element inside, e.g. checkbox or expander
-                if (event.target !== nodeRef.current) {
-                    break;
-                }
-                event.preventDefault();
-                if (!isDisabled) {
-                    onSelected?.(nodeId, !isSelected);
-                }
-                break;
-            }
-            default:
-                break;
+        const focusableElements = getFocusableElements(nodeRef.current);
+        const currentIndex = focusableElements.indexOf(
+          nodeRef.current?.ownerDocument.activeElement,
+        );
+        if (currentIndex === 0) {
+          nodeRef.current?.focus();
+        } else {
+          focusableElements[currentIndex - 1]?.focus();
         }
-    };
-    const onExpanderClick = React.useCallback((event) => {
-        onExpanded(nodeId, !isExpanded);
-        event.stopPropagation();
-    }, [isExpanded, nodeId, onExpanded]);
-    return (React.createElement(Box, { as: 'li', role: 'treeitem', className: cx('iui-tree-item', className), id: nodeId, "aria-expanded": hasSubNodes ? isExpanded : undefined, "aria-disabled": isDisabled, "aria-selected": isSelected, "aria-level": nodeDepth + 1, "aria-setsize": groupSize, "aria-posinset": indexInGroup + 1, tabIndex: -1, onFocus: (e) => {
-            setIsFocused(true);
-            // Prevents from triggering onFocus on parent Tree
-            e.stopPropagation();
-        }, onBlur: () => {
-            setIsFocused(false);
-        }, ref: nodeRef, onKeyDown: onKeyDown, ...rest },
-        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)
+        break;
+      }
+      case 'ArrowRight': {
+        event.preventDefault();
+        const focusableElements = getFocusableElements(nodeRef.current);
+        if (isNodeFocused) {
+          if (!isExpanded && hasSubNodes) {
+            onExpanded(nodeId, true);
+            break;
+          }
+          focusableElements[0]?.focus();
+          break;
+        }
+        const currentIndex = focusableElements.indexOf(
+          nodeRef.current?.ownerDocument.activeElement,
+        );
+        if (currentIndex < focusableElements.length - 1) {
+          focusableElements[currentIndex + 1].focus();
+          break;
+        }
+        break;
+      }
+      case ' ':
+      case 'Spacebar':
+      case 'Enter': {
+        if (event.target !== nodeRef.current) {
+          break;
+        }
+        event.preventDefault();
+        if (!isDisabled) {
+          onSelected?.(nodeId, !isSelected);
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const onExpanderClick = React.useCallback(
+    (event) => {
+      onExpanded(nodeId, !isExpanded);
+      event.stopPropagation();
+    },
+    [isExpanded, nodeId, onExpanded],
+  );
+  return _jsxs(Box, {
+    as: 'li',
+    role: 'treeitem',
+    className: cx('iui-tree-item', className),
+    'aria-expanded': hasSubNodes ? isExpanded : undefined,
+    '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),
+    children: [
+      _jsxs(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,
+        ),
+        children: [
+          checkbox &&
+            _jsx(Box, {
+              as: 'div',
+              ...checkboxProps,
+              className: cx('iui-tree-node-checkbox', checkboxProps?.className),
+              children: 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: 'ul', role: 'group', "aria-owns": subNodeIds.join(' '), ...subTreeProps, className: cx('iui-sub-tree', subTreeProps?.className) }))));
-};
+                  })
+                : checkbox,
+            }),
+          _jsxs(Box, {
+            as: 'div',
+            ...contentProps,
+            className: cx('iui-tree-node-content', contentProps?.className),
+            children: [
+              hasSubNodes && expander,
+              hasSubNodes &&
+                !expander &&
+                _jsx(TreeNodeExpander, {
+                  isExpanded: isExpanded,
+                  disabled: isDisabled,
+                  onClick: onExpanderClick,
+                  tabIndex: isFocused ? 0 : -1,
+                  ...expanderProps,
+                }),
+              icon &&
+                _jsx(Box, {
+                  as: 'span',
+                  'aria-hidden': true,
+                  ...iconProps,
+                  className: cx(
+                    'iui-tree-node-content-icon',
+                    iconProps?.className,
+                  ),
+                  children: icon,
+                }),
+              _jsxs(Box, {
+                as: 'div',
+                ...labelProps,
+                className: cx(
+                  'iui-tree-node-content-label',
+                  labelProps?.className,
+                ),
+                children: [
+                  _jsx(Box, {
+                    as: 'div',
+                    ...titleProps,
+                    className: cx(
+                      'iui-tree-node-content-title',
+                      titleProps?.className,
+                    ),
+                    children: label,
+                  }),
+                  sublabel &&
+                    _jsx(Box, {
+                      as: 'div',
+                      ...sublabelProps,
+                      className: cx(
+                        'iui-tree-node-content-caption',
+                        sublabelProps?.className,
+                      ),
+                      children: sublabel,
+                    }),
+                ],
+              }),
+              children,
+            ],
+          }),
+        ],
+      }),
+      hasSubNodes &&
+        _jsx(Box, {
+          as: 'ul',
+          role: 'group',
+          'aria-owns': subNodeIds.join(' '),
+          ...subTreeProps,
+          className: cx('iui-sub-tree', subTreeProps?.className),
+        }),
+    ],
+  });
+});

package/esm/core/Tree/TreeNodeExpander.js

@@ -1,18 +1,28 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 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) => {
-    const { isExpanded, expanderIconProps = {}, ...rest } = props;
-    const size = React.useContext(TreeContext)?.size ?? 'default';
-    const ChevronIcon = size === 'small' ? 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,
-            }) })));
+  const { isExpanded, expanderIconProps = {}, ...rest } = props;
+  const size = React.useContext(TreeContext)?.size ?? 'default';
+  const ChevronIcon = size === 'small' ? SvgChevronRightSmall : SvgChevronRight;
+  return _jsx(IconButton, {
+    styleType: 'borderless',
+    size: 'small',
+    'aria-label': isExpanded ? 'Collapse' : 'Expand',
+    ref: ref,
+    ...rest,
+    children: _jsx(ChevronIcon, {
+      ...expanderIconProps,
+      className: cx(
+        'iui-tree-node-content-expander-icon',
+        expanderIconProps?.className,
+        {
+          'iui-tree-node-content-expander-icon-expanded': isExpanded,
+        },
+      ),
+    }),
+  });
 });

package/esm/core/Typography/Anchor.js

@@ -1,31 +1,30 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 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';
-/**
- * A consistently styled anchor component.
- *
- * Supports polymorphic `as` prop for use with `Link` components from routers,
- * or to render as a button.
- *
- * @example
- * <Anchor href='/'>Home</Anchor>
- * <Anchor href='/projects'>Projects</Anchor>
- * <Anchor href='/help' underline>Help</Anchor>
- *
- * @example
- * <Anchor as={Link} to='/'>Home</Anchor>
- * <Anchor as='button' onClick={() => {}}>click me</Anchor>
- */
 export const Anchor = React.forwardRef((props, forwardedRef) => {
-    const isInsideText = React.useContext(TextContext);
-    const { isExternal, underline = isInsideText, children, ...rest } = props;
-    return (React.createElement(Box, { as: 'a', "data-iui-underline": underline ? 'true' : undefined, ...rest, ref: forwardedRef, className: cx('iui-anchor', { 'iui-anchor-external': isExternal }, props.className) },
-        children,
-        props.target === '_blank' && (React.createElement(VisuallyHidden, null, " (opens in new tab)"))));
+  const isInsideText = React.useContext(TextContext);
+  const { isExternal, underline = isInsideText, children, ...rest } = props;
+  return _jsxs(Box, {
+    as: 'a',
+    'data-iui-underline': underline ? 'true' : undefined,
+    ...rest,
+    ref: forwardedRef,
+    className: cx(
+      'iui-anchor',
+      {
+        'iui-anchor-external': isExternal,
+      },
+      props.className,
+    ),
+    children: [
+      children,
+      props.target === '_blank' &&
+        _jsx(VisuallyHidden, {
+          children: ' (opens in new tab)',
+        }),
+    ],
+  });
 });

package/esm/core/Typography/Blockquote.js

@@ -1,21 +1,20 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
-/**
- * Basic blockquote component
- * @example
- * <Blockquote>This is a quote</Blockquote>
- * <Blockquote footer='— Someone'>
- *  <p>This is a quote from someone</p>
- * </Blockquote>
- */
 export const Blockquote = React.forwardRef((props, ref) => {
-    const { 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)));
+  const { className, children, footer, ...rest } = props;
+  return _jsxs(Box, {
+    as: 'blockquote',
+    className: cx('iui-blockquote', className),
+    ref: ref,
+    ...rest,
+    children: [
+      children,
+      footer &&
+        _jsx('footer', {
+          children: footer,
+        }),
+    ],
+  });
 });

package/esm/core/Typography/Code.js

@@ -1,11 +1,2 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import { polymorphic } from '../../utils/index.js';
-/**
- * Inline code element.
- * @example
- * <p>Some <Code>inline code</Code> in a paragraph</p>
- */
 export const Code = polymorphic.code('iui-code');

package/esm/core/Typography/Kbd.js

@@ -1,35 +1,29 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
-/**
- * Some predefined strings for common keyboard keys.
- */
 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',
+  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',
 };
-/**
- * A keyboard key element.
- * @example
- * <Kbd>A</Kbd>
- * <Kbd title='Enter'>{KbdKeys.Enter}</Kbd>
- */
 export const Kbd = React.forwardRef((props, forwardedRef) => {
-    const { className, children, ...rest } = props;
-    return (React.createElement(Box, { as: 'kbd', className: cx('iui-keyboard', className), ref: forwardedRef, ...rest }, children));
+  const { className, children, ...rest } = props;
+  return _jsx(Box, {
+    as: 'kbd',
+    className: cx('iui-keyboard', className),
+    ref: forwardedRef,
+    ...rest,
+    children: children,
+  });
 });

package/esm/core/Typography/Text.js

@@ -1,32 +1,30 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
+import { jsx as _jsx } from 'react/jsx-runtime';
 import cx from 'classnames';
 import * as React from 'react';
 import { Box } from '../../utils/index.js';
-// ----------------------------------------------------------------------------
-/**
- * Polymorphic typography component to render any kind of text as any kind of element.
- * Users should decide which element to render based on the context of their app. Link to heading levels docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#accessibility_concerns
- *
- * @example
- * <Text>Some normal paragraph text rendered as a div</Text>
- * @example
- * <Text variant='title' as='h3'>I'm some h2 text rendered as an h3 element!</Text>
- * @example
- * <Text isMuted>Some muted text.</Text>
- * <Text isSkeleton>Skeleton text</Text>
- */
 export const Text = React.forwardRef((props, ref) => {
-    const { variant = 'body', className, isMuted = false, isSkeleton = false, ...rest } = props;
-    return (React.createElement(TextContext.Provider, { value: true },
-        React.createElement(Box, { className: cx({
-                [`iui-text-${variant}`]: variant !== 'body',
-                'iui-text-block': variant === 'body',
-                'iui-text-muted': isMuted,
-                'iui-skeleton': isSkeleton,
-            }, className), ref: ref, ...rest })));
+  const {
+    variant = 'body',
+    className,
+    isMuted = false,
+    isSkeleton = false,
+    ...rest
+  } = props;
+  return _jsx(TextContext.Provider, {
+    value: true,
+    children: _jsx(Box, {
+      className: cx(
+        {
+          [`iui-text-${variant}`]: variant !== 'body',
+          'iui-text-block': variant === 'body',
+          'iui-text-muted': isMuted,
+          'iui-skeleton': isSkeleton,
+        },
+        className,
+      ),
+      ref: ref,
+      ...rest,
+    }),
+  });
 });
-// ----------------------------------------------------------------------------
 export const TextContext = React.createContext(false);