@itwin/itwinui-react 3.12.1 → 3.13.0

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

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Tooltip", {
+    enumerable: true,
+    get: function() {
+        return Tooltip;
+    }
+});
+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 _react1 = require("@floating-ui/react");
+const _index = require("../../utils/index.js");
+const useTooltip = (options = {})=>{
+    let uniqueId = (0, _index.useId)();
+    let { placement = 'top', visible, onVisibleChange, middleware = {
+        flip: true,
+        shift: true
+    }, autoUpdateOptions = {}, reference, ariaStrategy = 'description', id = uniqueId, ...props } = options;
+    let [open, onOpenChange] = (0, _index.useControlledState)(false, visible, onVisibleChange);
+    let syncWithControlledState = _react.useCallback((element)=>{
+        queueMicrotask(()=>{
+            try {
+                element?.togglePopover?.(open);
+            } catch  {}
+        });
+    }, [
+        open
+    ]);
+    let floating = (0, _react1.useFloating)({
+        placement,
+        open,
+        onOpenChange,
+        whileElementsMounted: _react.useMemo(()=>open ? (...args)=>(0, _react1.autoUpdate)(...args, autoUpdateOptions) : void 0, [
+            autoUpdateOptions,
+            open
+        ]),
+        middleware: _react.useMemo(()=>[
+                void 0 !== middleware.offset ? (0, _react1.offset)(middleware.offset) : (0, _react1.offset)(4),
+                middleware.flip && (0, _react1.flip)(),
+                middleware.shift && (0, _react1.shift)(),
+                middleware.size && (0, _react1.size)(),
+                middleware.autoPlacement && (0, _react1.autoPlacement)(),
+                middleware.inline && (0, _react1.inline)(),
+                middleware.hide && (0, _react1.hide)()
+            ].filter(Boolean), [
+            middleware
+        ]),
+        ...reference && {
+            elements: {
+                reference
+            }
+        }
+    });
+    let ariaProps = _react.useMemo(()=>'description' === ariaStrategy ? {
+            'aria-describedby': id
+        } : 'label' === ariaStrategy ? {
+            'aria-labelledby': id
+        } : {}, [
+        ariaStrategy,
+        id
+    ]);
+    let { delay } = (0, _react1.useDelayGroupContext)();
+    (0, _react1.useDelayGroup)(floating.context, {
+        id: (0, _index.useId)()
+    });
+    let interactions = (0, _react1.useInteractions)([
+        (0, _react1.useHover)(floating.context, {
+            delay: delay ?? {
+                open: 50,
+                close: 250
+            },
+            handleClose: (0, _react1.safePolygon)({
+                buffer: -1 / 0
+            }),
+            move: false
+        }),
+        (0, _react1.useFocus)(floating.context),
+        (0, _react1.useDismiss)(floating.context, {
+            referencePress: true,
+            referencePressEvent: 'click'
+        })
+    ]);
+    _react.useEffect(()=>{
+        if (!reference) return;
+        let domEventName = (e)=>e.toLowerCase().substring(2);
+        let cleanupValues = {};
+        Object.entries({
+            ...ariaProps,
+            ...interactions.getReferenceProps()
+        }).forEach(([key, value])=>{
+            if ('function' == typeof value) {
+                let patchedHandler = (event)=>{
+                    value({
+                        ...event,
+                        nativeEvent: event
+                    });
+                };
+                reference.addEventListener(domEventName(key), patchedHandler);
+                cleanupValues[key] = patchedHandler;
+            } else if (value) {
+                cleanupValues[key] = reference.getAttribute(key);
+                reference.setAttribute(key, value);
+            }
+        });
+        return ()=>{
+            Object.entries(cleanupValues).forEach(([key, value])=>{
+                if ('function' == typeof value) reference.removeEventListener(domEventName(key), value);
+                else if (value) reference.setAttribute(key, value);
+                else reference.removeAttribute(key);
+            });
+        };
+    }, [
+        ariaProps,
+        reference,
+        interactions
+    ]);
+    let getReferenceProps = _react.useCallback((userProps)=>interactions.getReferenceProps({
+            ...userProps,
+            ...ariaProps
+        }), [
+        interactions,
+        ariaProps
+    ]);
+    let floatingProps = _react.useMemo(()=>({
+            ...interactions.getFloatingProps({
+                hidden: !open,
+                'aria-hidden': 'true',
+                ...props,
+                id
+            }),
+            popover: 'manual'
+        }), [
+        interactions,
+        props,
+        id,
+        open
+    ]);
+    return _react.useMemo(()=>({
+            getReferenceProps,
+            floatingProps,
+            ...floating,
+            refs: {
+                ...floating.refs,
+                setFloating: (element)=>{
+                    floating.refs.setFloating(element);
+                    syncWithControlledState(element);
+                }
+            },
+            floatingStyles: floating.context.open ? floating.floatingStyles : {}
+        }), [
+        getReferenceProps,
+        floatingProps,
+        floating,
+        syncWithControlledState
+    ]);
+};
+const Tooltip = _react.forwardRef((props, forwardedRef)=>{
+    let { content, children, portal = true, className, style, ...rest } = props;
+    let tooltip = useTooltip(rest);
+    let refs = (0, _index.useMergedRefs)(tooltip.refs.setFloating, forwardedRef);
+    return _react.createElement(_react.Fragment, null, (0, _index.cloneElementWithRef)(children, (children)=>({
+            ...tooltip.getReferenceProps(children.props),
+            ref: tooltip.refs.setReference
+        })), 'none' !== props.ariaStrategy || tooltip.context.open ? _react.createElement(_index.Portal, {
+        portal: portal
+    }, _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('iui-tooltip', className),
+        ref: refs,
+        style: {
+            ...tooltip.floatingStyles,
+            ...style
+        },
+        ...tooltip.floatingProps
+    }, content)) : null);
+});
+Tooltip.displayName = 'Tooltip';

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

@@ -0,0 +1,153 @@
+"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, {
+    TransferList: function() {
+        return TransferList;
+    },
+    TransferListContext: function() {
+        return TransferListContext;
+    }
+});
+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 _List = require("../List/List.js");
+const _ListItem = require("../List/ListItem.js");
+const _Label = require("../Label/Label.js");
+const TransferListComponent = (0, _index.polymorphic)('iui-transfer-list-wrapper');
+TransferListComponent.displayName = 'TransferList';
+const TransferListListboxWrapper = _react.forwardRef((props, ref)=>{
+    let { className, children, ...rest } = props;
+    let uid = (0, _index.useId)();
+    let [labelId, setLabelId] = _react.useState(uid);
+    return _react.createElement(_index.Box, {
+        as: "div",
+        className: (0, _classnames.default)('iui-transfer-list-listbox-wrapper', className),
+        ref: ref,
+        ...rest
+    }, _react.createElement(TransferListContext.Provider, {
+        value: {
+            labelId,
+            setLabelId
+        }
+    }, children));
+});
+TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
+const TransferListListbox = _react.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    let { labelId } = (0, _index.useSafeContext)(TransferListContext);
+    let [focusedIndex, setFocusedIndex] = _react.useState();
+    let listRef = _react.useRef(null);
+    let refs = (0, _index.useMergedRefs)(listRef, ref);
+    let getFocusableNodes = _react.useCallback(()=>{
+        let focusableItems = (0, _index.getFocusableElements)(listRef.current);
+        return focusableItems.filter((i)=>!focusableItems.some((p)=>p.contains(i.parentElement)));
+    }, []);
+    _react.useEffect(()=>{
+        let items = getFocusableNodes();
+        if (null != focusedIndex) {
+            items?.[focusedIndex]?.focus();
+            return;
+        }
+    }, [
+        focusedIndex,
+        getFocusableNodes
+    ]);
+    let onKeyDown = (event)=>{
+        if (event.altKey) return;
+        let items = getFocusableNodes();
+        if (!items?.length) return;
+        let currentIndex = focusedIndex ?? 0;
+        switch(event.key){
+            case 'ArrowDown':
+                setFocusedIndex(Math.min(currentIndex + 1, items.length - 1));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            case 'ArrowUp':
+                setFocusedIndex(Math.max(currentIndex - 1, 0));
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+            default:
+                break;
+        }
+    };
+    return _react.createElement(_List.List, {
+        className: (0, _classnames.default)('iui-transfer-list-listbox', className),
+        onKeyDown: onKeyDown,
+        role: 'listbox',
+        "aria-multiselectable": true,
+        "aria-labelledby": labelId,
+        tabIndex: 0,
+        ref: refs,
+        ...rest
+    }, children);
+});
+TransferListListbox.displayName = 'TransferList.Listbox';
+const TransferListItem = _react.forwardRef((props, ref)=>{
+    let { actionable = true, disabled, onActiveChange, children, active, ...rest } = props;
+    let onClickEvents = ()=>actionable && onActiveChange && onActiveChange(!active);
+    let onKeyDown = (event)=>{
+        if (event.altKey) return;
+        if ('Enter' === event.key || ' ' === event.key || 'Spacebar' === event.key) {
+            disabled || onClickEvents();
+            event.preventDefault();
+        }
+    };
+    return _react.createElement(_ListItem.ListItem, {
+        ref: ref,
+        onClick: onClickEvents,
+        onKeyDown: onKeyDown,
+        active: active,
+        actionable: actionable,
+        tabIndex: -1,
+        role: 'option',
+        "aria-disabled": disabled ? 'true' : void 0,
+        "aria-selected": active ? 'true' : void 0,
+        disabled: disabled,
+        ...rest
+    }, children);
+});
+TransferListItem.displayName = 'TransferList.Item';
+const TransferListListboxLabel = _react.forwardRef((props, ref)=>{
+    let { children, id, ...rest } = props;
+    let { labelId, setLabelId } = (0, _index.useSafeContext)(TransferListContext);
+    _react.useEffect(()=>{
+        if (id && id !== labelId) setLabelId(id);
+    }, [
+        id,
+        labelId,
+        setLabelId
+    ]);
+    return _react.createElement(_Label.Label, {
+        as: "div",
+        id: labelId,
+        ref: ref,
+        ...rest
+    }, children);
+});
+TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
+const TransferListToolbar = (0, _index.polymorphic)('iui-transfer-list-toolbar', {
+    role: 'toolbar'
+});
+TransferListToolbar.displayName = 'TransferList.Toolbar';
+const TransferList = Object.assign(TransferListComponent, {
+    ListboxWrapper: TransferListListboxWrapper,
+    Listbox: TransferListListbox,
+    Item: TransferListItem,
+    ListboxLabel: TransferListListboxLabel,
+    Toolbar: TransferListToolbar
+});
+const TransferListContext = _react.createContext(void 0);
+TransferListContext.displayName = 'TransferListContext';

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

@@ -0,0 +1,198 @@
+"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,
+                ref: virtualizer.measureElement,
+                style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    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';
+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 = (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, null, _react.createElement("div", {
+        style: {
+            minBlockSize: virtualizer.getTotalSize(),
+            contain: 'strict'
+        }
+    }, _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

@@ -0,0 +1,26 @@
+"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;
+};