@itwin/itwinui-react 3.12.2 → 3.13.0

package/DEV-esm/core/Toast/Toaster.js

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box, useSafeContext } from '../../utils/index.js';
+import { Toast } from './Toast.js';
+export const useToaster = ()=>{
+    let dispatch = useSafeContext(ToasterDispatchContext);
+    return React.useMemo(()=>{
+        let showToast = (category)=>(content, options)=>{
+                let id = nextId();
+                dispatch({
+                    type: 'add',
+                    toast: {
+                        ...options,
+                        id,
+                        content,
+                        category
+                    }
+                });
+                return {
+                    close: ()=>dispatch({
+                            type: 'remove',
+                            id
+                        })
+                };
+            };
+        return {
+            positive: showToast('positive'),
+            informational: showToast('informational'),
+            negative: showToast('negative'),
+            warning: showToast('warning'),
+            closeAll: ()=>{
+                dispatch({
+                    type: 'close-all'
+                });
+            },
+            setSettings: (settings)=>{
+                dispatch({
+                    type: 'settings',
+                    settings
+                });
+            }
+        };
+    }, [
+        dispatch
+    ]);
+};
+export const Toaster = ()=>{
+    let { toasts, settings } = useSafeContext(ToasterStateContext);
+    return React.createElement(Box, {
+        className: cx("iui-toast-wrapper", `iui-placement-${settings.placement}`)
+    }, toasts.map((toastProps)=>React.createElement(Toast, {
+            key: toastProps.id,
+            ...toastProps
+        })));
+};
+export const ToastProvider = ({ children })=>{
+    let [toasterState, dispatch] = React.useReducer(toastReducer, {
+        toasts: [],
+        settings: {
+            order: 'auto',
+            placement: 'top'
+        }
+    });
+    return React.createElement(ToasterDispatchContext.Provider, {
+        value: dispatch
+    }, React.createElement(ToasterStateContext.Provider, {
+        value: toasterState
+    }, children));
+};
+let toastReducer = (state, action)=>{
+    if ('add' === action.type) {
+        let order = state.settings.order;
+        if ('auto' === order) order = state.settings.placement.startsWith('top') ? 'descending' : 'ascending';
+        return {
+            ...state,
+            toasts: [
+                ...'ascending' === order ? state.toasts : [],
+                action.toast,
+                ...'descending' === order ? state.toasts : []
+            ]
+        };
+    }
+    if ('remove' === action.type) return {
+        ...state,
+        toasts: state.toasts.filter((toast)=>toast.id !== action.id)
+    };
+    if ('close-all' === action.type) return {
+        ...state,
+        toasts: state.toasts.map((toast)=>({
+                ...toast,
+                isVisible: false
+            }))
+    };
+    if ('settings' === action.type) return {
+        ...state,
+        settings: {
+            ...state.settings,
+            ...action.settings
+        }
+    };
+    return state;
+};
+export const ToasterStateContext = React.createContext(void 0);
+ToasterStateContext.displayName = 'ToasterStateContext';
+let ToasterDispatchContext = React.createContext(void 0);
+ToasterDispatchContext.displayName = 'ToasterDispatchContext';
+let nextId = (()=>{
+    let count = 0;
+    return ()=>++count;
+})();

package/DEV-esm/core/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box, SvgCheckmark } from '../../utils/index.js';
+export const ToggleSwitch = React.forwardRef((props, ref)=>{
+    let { disabled = false, labelPosition = 'right', label, className, style, size = 'default', labelProps = {}, icon: iconProp, ...rest } = props;
+    let shouldShowIcon = void 0 === iconProp || null !== iconProp && 'small' !== size;
+    return React.createElement(Box, {
+        as: label ? 'label' : 'div',
+        className: cx('iui-toggle-switch-wrapper', {
+            'iui-disabled': disabled,
+            'iui-label-on-right': label && 'right' === labelPosition,
+            'iui-label-on-left': label && 'left' === labelPosition
+        }, className),
+        "data-iui-size": size,
+        style: style
+    }, React.createElement(Box, {
+        as: "input",
+        className: "iui-toggle-switch",
+        type: "checkbox",
+        role: "switch",
+        disabled: disabled,
+        ref: ref,
+        ...rest
+    }), shouldShowIcon && React.createElement(Box, {
+        as: "span",
+        className: "iui-toggle-switch-icon",
+        "aria-hidden": true
+    }, iconProp || React.createElement(SvgCheckmark, null)), label && React.createElement(Box, {
+        as: "span",
+        ...labelProps,
+        className: cx('iui-toggle-switch-label', labelProps?.className)
+    }, label));
+});
+ToggleSwitch.displayName = 'ToggleSwitch';

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

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useInteractions, safePolygon, size, autoPlacement, hide, inline, useDelayGroupContext, useDelayGroup } from '@floating-ui/react';
+import { Box, Portal, cloneElementWithRef, useControlledState, useId, useMergedRefs } from '../../utils/index.js';
+let useTooltip = (options = {})=>{
+    let uniqueId = useId();
+    let { placement = 'top', visible, onVisibleChange, middleware = {
+        flip: true,
+        shift: true
+    }, autoUpdateOptions = {}, reference, ariaStrategy = 'description', id = uniqueId, ...props } = options;
+    let [open, onOpenChange] = useControlledState(false, visible, onVisibleChange);
+    let syncWithControlledState = React.useCallback((element)=>{
+        queueMicrotask(()=>{
+            try {
+                element?.togglePopover?.(open);
+            } catch  {}
+        });
+    }, [
+        open
+    ]);
+    let floating = useFloating({
+        placement,
+        open,
+        onOpenChange,
+        whileElementsMounted: React.useMemo(()=>open ? (...args)=>autoUpdate(...args, autoUpdateOptions) : void 0, [
+            autoUpdateOptions,
+            open
+        ]),
+        middleware: React.useMemo(()=>[
+                void 0 !== middleware.offset ? offset(middleware.offset) : offset(4),
+                middleware.flip && flip(),
+                middleware.shift && shift(),
+                middleware.size && size(),
+                middleware.autoPlacement && autoPlacement(),
+                middleware.inline && inline(),
+                middleware.hide && 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 } = useDelayGroupContext();
+    useDelayGroup(floating.context, {
+        id: useId()
+    });
+    let interactions = useInteractions([
+        useHover(floating.context, {
+            delay: delay ?? {
+                open: 50,
+                close: 250
+            },
+            handleClose: safePolygon({
+                buffer: -1 / 0
+            }),
+            move: false
+        }),
+        useFocus(floating.context),
+        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
+    ]);
+};
+export const Tooltip = React.forwardRef((props, forwardedRef)=>{
+    let { content, children, portal = true, className, style, ...rest } = props;
+    let tooltip = useTooltip(rest);
+    let refs = useMergedRefs(tooltip.refs.setFloating, forwardedRef);
+    return React.createElement(React.Fragment, null, cloneElementWithRef(children, (children)=>({
+            ...tooltip.getReferenceProps(children.props),
+            ref: tooltip.refs.setReference
+        })), 'none' !== props.ariaStrategy || tooltip.context.open ? React.createElement(Portal, {
+        portal: portal
+    }, React.createElement(Box, {
+        className: cx('iui-tooltip', className),
+        ref: refs,
+        style: {
+            ...tooltip.floatingStyles,
+            ...style
+        },
+        ...tooltip.floatingProps
+    }, content)) : null);
+});
+Tooltip.displayName = 'Tooltip';

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

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { getFocusableElements, useMergedRefs, useId, useSafeContext, Box, polymorphic } from '../../utils/index.js';
+import { List } from '../List/List.js';
+import { ListItem } from '../List/ListItem.js';
+import { Label } from '../Label/Label.js';
+let TransferListComponent = polymorphic('iui-transfer-list-wrapper');
+TransferListComponent.displayName = 'TransferList';
+let TransferListListboxWrapper = React.forwardRef((props, ref)=>{
+    let { className, children, ...rest } = props;
+    let uid = useId();
+    let [labelId, setLabelId] = React.useState(uid);
+    return React.createElement(Box, {
+        as: "div",
+        className: cx('iui-transfer-list-listbox-wrapper', className),
+        ref: ref,
+        ...rest
+    }, React.createElement(TransferListContext.Provider, {
+        value: {
+            labelId,
+            setLabelId
+        }
+    }, children));
+});
+TransferListListboxWrapper.displayName = 'TransferList.ListboxWrapper';
+let TransferListListbox = React.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    let { labelId } = useSafeContext(TransferListContext);
+    let [focusedIndex, setFocusedIndex] = React.useState();
+    let listRef = React.useRef(null);
+    let refs = useMergedRefs(listRef, ref);
+    let getFocusableNodes = React.useCallback(()=>{
+        let focusableItems = 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, {
+        className: cx('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';
+let 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, {
+        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';
+let TransferListListboxLabel = React.forwardRef((props, ref)=>{
+    let { children, id, ...rest } = props;
+    let { labelId, setLabelId } = useSafeContext(TransferListContext);
+    React.useEffect(()=>{
+        if (id && id !== labelId) setLabelId(id);
+    }, [
+        id,
+        labelId,
+        setLabelId
+    ]);
+    return React.createElement(Label, {
+        as: "div",
+        id: labelId,
+        ref: ref,
+        ...rest
+    }, children);
+});
+TransferListListboxLabel.displayName = 'TransferList.ListboxLabel';
+let TransferListToolbar = polymorphic('iui-transfer-list-toolbar', {
+    role: 'toolbar'
+});
+TransferListToolbar.displayName = 'TransferList.Toolbar';
+export const TransferList = Object.assign(TransferListComponent, {
+    ListboxWrapper: TransferListListboxWrapper,
+    Listbox: TransferListListbox,
+    Item: TransferListItem,
+    ListboxLabel: TransferListListboxLabel,
+    Toolbar: TransferListToolbar
+});
+export const TransferListContext = React.createContext(void 0);
+TransferListContext.displayName = 'TransferListContext';

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

@@ -0,0 +1,187 @@
+import * as React from 'react';
+import { getFocusableElements, polymorphic, cloneElementWithRef, useVirtualScroll, ShadowRoot, useMergedRefs, useLayoutEffect } from '../../utils/index.js';
+import { TreeContext } from './TreeContext.js';
+export 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 = 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.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 ? 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';
+let TreeElement = polymorphic.div('iui-tree', {
+    role: 'tree',
+    tabIndex: 0
+});
+let 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 = useVirtualScroll({
+        count: flatNodesList.length,
+        getScrollElement: ()=>parentRef.current,
+        estimateSize: ()=>39,
+        getItemKey
+    });
+    useLayoutEffect(()=>{
+        if (scrollToIndex) virtualizer.scrollToIndex(scrollToIndex);
+    }, [
+        virtualizer,
+        scrollToIndex
+    ]);
+    return React.createElement(TreeElement, {
+        ...rest,
+        ref: useMergedRefs(ref, parentRef)
+    }, React.createElement(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-esm/core/Tree/TreeContext.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export const TreeContext = React.createContext(void 0);
+export const useTreeContext = ()=>{
+    let context = React.useContext(TreeContext);
+    if (void 0 == context) throw new Error('TreeContext must be used within a TreeContext.Provider');
+    return context;
+};