@itwin/itwinui-react 3.0.4 → 3.0.5

package/cjs/core/Tree/TreeNode.js

@@ -1,16 +1,16 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeNode = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const TreeNodeExpander_js_1 = require('./TreeNodeExpander.js');
-const TreeContext_js_1 = require('./TreeContext.js');
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const TreeNodeExpander_js_1 = require("./TreeNodeExpander.js");
+const TreeContext_js_1 = require("./TreeContext.js");
 /**
  * `TreeNode` component to display node content within a `Tree`.
  * Must be used inside `Tree` component to correctly set node `depth` and `subNodes`.
@@ -31,207 +31,104 @@ const TreeContext_js_1 = require('./TreeContext.js');
   />
  */
 const TreeNode = (props) => {
-  const {
-    nodeId,
-    label,
-    sublabel,
-    children,
-    className,
-    icon,
-    hasSubNodes = false,
-    isDisabled = false,
-    isExpanded = false,
-    isSelected = false,
-    onSelected,
-    onExpanded,
-    checkbox,
-    expander,
-    ...rest
-  } = props;
-  const {
-    nodeDepth,
-    subNodeIds = [],
-    parentNodeId,
-    scrollToParent,
-    groupSize,
-    indexInGroup,
-  } = (0, TreeContext_js_1.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;
-          }
-          // If it is top level node (doesn't have parent node), then do nothing.
-          break;
-        }
-        const focusableElements = (0, index_js_1.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 = (0, index_js_1.getFocusableElements)(
-          nodeRef.current,
-        );
-        if (isNodeFocused) {
-          if (!isExpanded && hasSubNodes) {
-            onExpanded(nodeId, true);
-            break;
-          }
-          focusableElements[0]?.focus();
-          break;
+    const { nodeId, label, sublabel, children, className, icon, hasSubNodes = false, isDisabled = false, isExpanded = false, isSelected = false, onSelected, onExpanded, checkbox, expander, ...rest } = props;
+    const { nodeDepth, subNodeIds = [], parentNodeId, scrollToParent, groupSize, indexInGroup, } = (0, TreeContext_js_1.useTreeContext)();
+    const [isFocused, setIsFocused] = React.useState(false);
+    const nodeRef = React.useRef(null);
+    const onKeyDown = (event) => {
+        if (event.altKey) {
+            return;
         }
-        const currentIndex = focusableElements.indexOf(
-          nodeRef.current?.ownerDocument.activeElement,
-        );
-        if (currentIndex < focusableElements.length - 1) {
-          focusableElements[currentIndex + 1].focus();
-          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 = (0, index_js_1.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 = (0, index_js_1.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;
         }
-        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 onExpanderClick = React.useCallback(
-    (event) => {
-      onExpanded(nodeId, !isExpanded);
-      event.stopPropagation();
-    },
-    [isExpanded, nodeId, onExpanded],
-  );
-  return React.createElement(
-    index_js_1.Box,
-    {
-      as: 'li',
-      role: 'treeitem',
-      className: (0, classnames_1.default)('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(
-      index_js_1.Box,
-      {
-        className: (0, classnames_1.default)('iui-tree-node', {
-          'iui-active': isSelected,
-          'iui-disabled': isDisabled,
-        }),
-        style: { '--level': nodeDepth },
-        onClick: () => !isDisabled && onSelected?.(nodeId, !isSelected),
-      },
-      checkbox &&
-        React.createElement(
-          index_js_1.Box,
-          { className: 'iui-tree-node-checkbox' },
-          React.isValidElement(checkbox)
-            ? React.cloneElement(checkbox, {
-                tabIndex: isFocused ? 0 : -1,
-              })
-            : checkbox,
-        ),
-      React.createElement(
-        index_js_1.Box,
-        { className: 'iui-tree-node-content' },
-        hasSubNodes && expander,
-        hasSubNodes &&
-          !expander &&
-          React.createElement(TreeNodeExpander_js_1.TreeNodeExpander, {
-            isExpanded: isExpanded,
-            disabled: isDisabled,
-            onClick: onExpanderClick,
-            tabIndex: isFocused ? 0 : -1,
-          }),
-        icon &&
-          React.createElement(
-            index_js_1.Box,
-            {
-              as: 'span',
-              className: 'iui-tree-node-content-icon',
-              'aria-hidden': true,
-            },
-            icon,
-          ),
-        React.createElement(
-          index_js_1.Box,
-          { className: 'iui-tree-node-content-label' },
-          React.createElement(
-            index_js_1.Box,
-            { className: 'iui-tree-node-content-title' },
-            label,
-          ),
-          sublabel &&
-            React.createElement(
-              index_js_1.Box,
-              { className: 'iui-tree-node-content-caption' },
-              sublabel,
-            ),
-        ),
-        children,
-      ),
-    ),
-    hasSubNodes &&
-      React.createElement(index_js_1.Box, {
-        as: 'ul',
-        className: 'iui-sub-tree',
-        role: 'group',
-        'aria-owns': subNodeIds.join(' '),
-      }),
-  );
+    };
+    const onExpanderClick = React.useCallback((event) => {
+        onExpanded(nodeId, !isExpanded);
+        event.stopPropagation();
+    }, [isExpanded, nodeId, onExpanded]);
+    return (React.createElement(index_js_1.Box, { as: 'li', role: 'treeitem', className: (0, classnames_1.default)('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(index_js_1.Box, { className: (0, classnames_1.default)('iui-tree-node', {
+                'iui-active': isSelected,
+                'iui-disabled': isDisabled,
+            }), style: { '--level': nodeDepth }, onClick: () => !isDisabled && onSelected?.(nodeId, !isSelected) },
+            checkbox && (React.createElement(index_js_1.Box, { className: 'iui-tree-node-checkbox' }, React.isValidElement(checkbox)
+                ? React.cloneElement(checkbox, {
+                    tabIndex: isFocused ? 0 : -1,
+                })
+                : checkbox)),
+            React.createElement(index_js_1.Box, { className: 'iui-tree-node-content' },
+                hasSubNodes && expander,
+                hasSubNodes && !expander && (React.createElement(TreeNodeExpander_js_1.TreeNodeExpander, { isExpanded: isExpanded, disabled: isDisabled, onClick: onExpanderClick, tabIndex: isFocused ? 0 : -1 })),
+                icon && (React.createElement(index_js_1.Box, { as: 'span', className: 'iui-tree-node-content-icon', "aria-hidden": true }, icon)),
+                React.createElement(index_js_1.Box, { className: 'iui-tree-node-content-label' },
+                    React.createElement(index_js_1.Box, { className: 'iui-tree-node-content-title' }, label),
+                    sublabel && (React.createElement(index_js_1.Box, { className: 'iui-tree-node-content-caption' }, sublabel))),
+                children)),
+        hasSubNodes && (React.createElement(index_js_1.Box, { as: 'ul', className: 'iui-sub-tree', role: 'group', "aria-owns": subNodeIds.join(' ') }))));
 };
 exports.TreeNode = TreeNode;
 exports.default = exports.TreeNode;

package/cjs/core/Tree/TreeNodeExpander.js

@@ -1,34 +1,20 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeNodeExpander = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const IconButton_js_1 = require('../Buttons/IconButton.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const IconButton_js_1 = require("../Buttons/IconButton.js");
 exports.TreeNodeExpander = React.forwardRef((props, ref) => {
-  const { isExpanded, ...rest } = props;
-  return React.createElement(
-    IconButton_js_1.IconButton,
-    {
-      styleType: 'borderless',
-      size: 'small',
-      'aria-label': isExpanded ? 'Collapse' : 'Expand',
-      ref: ref,
-      ...rest,
-    },
-    React.createElement(index_js_1.SvgChevronRight, {
-      className: (0, classnames_1.default)(
-        'iui-tree-node-content-expander-icon',
-        {
-          'iui-tree-node-content-expander-icon-expanded': isExpanded,
-        },
-      ),
-    }),
-  );
+    const { isExpanded, ...rest } = props;
+    return (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: 'small', "aria-label": isExpanded ? 'Collapse' : 'Expand', ref: ref, ...rest },
+        React.createElement(index_js_1.SvgChevronRight, { className: (0, classnames_1.default)('iui-tree-node-content-expander-icon', {
+                'iui-tree-node-content-expander-icon-expanded': isExpanded,
+            }) })));
 });
 exports.default = exports.TreeNodeExpander;

package/cjs/core/Typography/Anchor.js

@@ -1,11 +1,11 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Anchor = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require('../utils/index.js');
+const index_js_1 = require("../utils/index.js");
 /**
  * A consistently styled anchor component.
  *

package/cjs/core/Typography/Blockquote.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Blockquote = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 /**
  * Basic blockquote component
  * @example
@@ -18,17 +18,9 @@ const index_js_1 = require('../utils/index.js');
  * </Blockquote>
  */
 exports.Blockquote = React.forwardRef((props, ref) => {
-  const { className, children, footer, ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      as: 'blockquote',
-      className: (0, classnames_1.default)('iui-blockquote', className),
-      ref: ref,
-      ...rest,
-    },
-    children,
-    footer && React.createElement('footer', null, footer),
-  );
+    const { className, children, footer, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'blockquote', className: (0, classnames_1.default)('iui-blockquote', className), ref: ref, ...rest },
+        children,
+        footer && React.createElement("footer", null, footer)));
 });
 exports.default = exports.Blockquote;

package/cjs/core/Typography/Code.js

@@ -1,11 +1,11 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Code = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const index_js_1 = require('../utils/index.js');
+const index_js_1 = require("../utils/index.js");
 /**
  * Inline code element.
  * @example

package/cjs/core/Typography/Kbd.js

@@ -1,31 +1,31 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Kbd = exports.KbdKeys = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 /**
  * Some predefined strings for common keyboard keys.
  */
 exports.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.
@@ -34,16 +34,7 @@ exports.KbdKeys = {
  * <Kbd title='Enter'>{KbdKeys.Enter}</Kbd>
  */
 exports.Kbd = React.forwardRef((props, forwardedRef) => {
-  const { className, children, ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      as: 'kbd',
-      className: (0, classnames_1.default)('iui-keyboard', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    children,
-  );
+    const { className, children, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'kbd', className: (0, classnames_1.default)('iui-keyboard', className), ref: forwardedRef, ...rest }, children));
 });
 exports.default = exports.Kbd;

package/cjs/core/Typography/Text.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../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
@@ -22,25 +22,12 @@ const index_js_1 = require('../utils/index.js');
  * <Text isSkeleton>Skeleton text</Text>
  */
 exports.Text = React.forwardRef((props, ref) => {
-  const {
-    variant = 'body',
-    className,
-    isMuted = false,
-    isSkeleton = false,
-    ...rest
-  } = props;
-  return React.createElement(index_js_1.Box, {
-    className: (0, classnames_1.default)(
-      {
-        [`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 (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)({
+            [`iui-text-${variant}`]: variant !== 'body',
+            'iui-text-block': variant === 'body',
+            'iui-text-muted': isMuted,
+            'iui-skeleton': isSkeleton,
+        }, className), ref: ref, ...rest }));
 });
 exports.default = exports.Text;

package/cjs/core/VisuallyHidden/VisuallyHidden.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.VisuallyHidden = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Box_js_1 = require('../utils/components/Box.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Box_js_1 = require("../utils/components/Box.js");
 /**
  * Hides content visually but keeps it still accessible to screen readers
  * and other assistive technologies.
@@ -20,13 +20,7 @@ const Box_js_1 = require('../utils/components/Box.js');
  * @see https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
  */
 exports.VisuallyHidden = React.forwardRef((props, ref) => {
-  const { className, unhideOnFocus = true, ...rest } = props;
-  return React.createElement(Box_js_1.Box, {
-    as: 'span',
-    className: (0, classnames_1.default)('iui-visually-hidden', className),
-    'data-iui-unhide-on-focus': unhideOnFocus ? true : undefined,
-    ref: ref,
-    ...rest,
-  });
+    const { className, unhideOnFocus = true, ...rest } = props;
+    return (React.createElement(Box_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-visually-hidden', className), "data-iui-unhide-on-focus": unhideOnFocus ? true : undefined, ref: ref, ...rest }));
 });
 exports.default = exports.VisuallyHidden;