@itwin/itwinui-react 3.12.2 → 3.13.0

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

@@ -0,0 +1,153 @@
+"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

@@ -0,0 +1,35 @@
+"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

@@ -0,0 +1,31 @@
+"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

@@ -0,0 +1,25 @@
+"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

@@ -0,0 +1,13 @@
+"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';

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

@@ -0,0 +1,48 @@
+"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, {
+    Kbd: function() {
+        return Kbd;
+    },
+    KbdKeys: function() {
+        return KbdKeys;
+    }
+});
+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 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'
+};
+const Kbd = _react.forwardRef((props, forwardedRef)=>{
+    let { className, children, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        as: "kbd",
+        className: (0, _classnames.default)('iui-keyboard', className),
+        ref: forwardedRef,
+        ...rest
+    }, children);
+});
+Kbd.displayName = 'Kbd';

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

@@ -0,0 +1,40 @@
+"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, {
+    Text: function() {
+        return Text;
+    },
+    TextContext: function() {
+        return TextContext;
+    }
+});
+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 Text = _react.forwardRef((props, ref)=>{
+    let { variant = 'body', className, isMuted = false, isSkeleton = false, ...rest } = props;
+    return _react.createElement(TextContext.Provider, {
+        value: true
+    }, _react.createElement(_index.Box, {
+        className: (0, _classnames.default)({
+            [`iui-text-${variant}`]: 'body' !== variant,
+            'iui-text-block': 'body' === variant,
+            'iui-text-muted': isMuted,
+            'iui-skeleton': isSkeleton
+        }, className),
+        ref: ref,
+        ...rest
+    }));
+});
+Text.displayName = 'Text';
+const TextContext = _react.createContext(false);

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "VisuallyHidden", {
+    enumerable: true,
+    get: function() {
+        return VisuallyHidden;
+    }
+});
+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 = _react.forwardRef((props, ref)=>{
+    let { as: asProp = 'span', className, unhideOnFocus = true, children: childrenProp, ...rest } = props;
+    let isHydrated = 'hydrated' === (0, _index.useHydration)();
+    let children = [
+        'div',
+        'span',
+        'p'
+    ].includes(asProp) ? _react.createElement(_react.Fragment, null, _react.createElement(_index.ShadowRoot, {
+        css: css
+    }, _react.createElement("slot", null)), isHydrated && childrenProp) : childrenProp;
+    return _react.createElement(_index.Box, {
+        as: asProp,
+        className: (0, _classnames.default)('iui-visually-hidden', className),
+        "data-iui-unhide-on-focus": !!unhideOnFocus || void 0,
+        ref: ref,
+        ...rest
+    }, children);
+});
+VisuallyHidden.displayName = 'VisuallyHidden';
+const 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;
+  }
+`;