@itwin/itwinui-react 3.12.2 → 3.13.0

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

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { useFloating, useClick, useDismiss, useInteractions, size, autoUpdate, offset, flip, shift, autoPlacement, inline, hide, FloatingFocusManager, useHover, useFocus, safePolygon, useRole, FloatingPortal, useFloatingTree } from '@floating-ui/react';
+import { Box, ShadowRoot, cloneElementWithRef, mergeEventHandlers, useControlledState, useId, useLayoutEffect, useMergedRefs } from '../../utils/index.js';
+import { usePortalTo } from '../../utils/components/Portal.js';
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider.js';
+export const PopoverOpenContext = React.createContext(void 0);
+export const usePopover = (options)=>{
+    let { placement = 'bottom-start', visible, onVisibleChange, closeOnOutsideClick, autoUpdateOptions, matchWidth, interactions: interactionsProp, role, ...rest } = options;
+    let mergedInteractions = React.useMemo(()=>({
+            click: true,
+            dismiss: true,
+            hover: false,
+            focus: false,
+            ...interactionsProp
+        }), [
+        interactionsProp
+    ]);
+    let tree = useFloatingTree();
+    let middleware = React.useMemo(()=>({
+            flip: true,
+            shift: true,
+            ...options.middleware
+        }), [
+        options.middleware
+    ]);
+    let [open, onOpenChange] = useControlledState(false, visible, onVisibleChange);
+    let floating = useFloating({
+        placement,
+        open,
+        onOpenChange,
+        whileElementsMounted: React.useMemo(()=>open ? (...args)=>autoUpdate(...args, autoUpdateOptions) : void 0, [
+            autoUpdateOptions,
+            open
+        ]),
+        ...rest,
+        middleware: React.useMemo(()=>[
+                void 0 !== middleware.offset && offset(middleware.offset),
+                middleware.flip && flip(),
+                middleware.shift && shift(),
+                matchWidth && size({
+                    apply: ({ rects })=>{
+                        setReferenceWidth(rects.reference.width);
+                    }
+                }),
+                middleware.autoPlacement && autoPlacement(),
+                middleware.inline && inline(),
+                middleware.hide && hide()
+            ].filter(Boolean), [
+            matchWidth,
+            middleware
+        ])
+    });
+    let interactions = useInteractions([
+        useClick(floating.context, {
+            enabled: !!mergedInteractions.click,
+            ...mergedInteractions.click
+        }),
+        useDismiss(floating.context, {
+            enabled: !!mergedInteractions.dismiss,
+            outsidePress: closeOnOutsideClick,
+            bubbles: null != tree,
+            ...mergedInteractions.dismiss
+        }),
+        useHover(floating.context, {
+            enabled: !!mergedInteractions.hover,
+            delay: 100,
+            handleClose: safePolygon({
+                buffer: 1,
+                blockPointerEvents: true
+            }),
+            move: false,
+            ...mergedInteractions.hover
+        }),
+        useFocus(floating.context, {
+            enabled: !!mergedInteractions.focus,
+            ...mergedInteractions.focus
+        }),
+        useRole(floating.context, {
+            role: 'dialog',
+            enabled: !!role
+        })
+    ]);
+    let [referenceWidth, setReferenceWidth] = React.useState();
+    let getFloatingProps = React.useCallback((userProps)=>interactions.getFloatingProps({
+            ...userProps,
+            style: {
+                ...floating.floatingStyles,
+                zIndex: 9999,
+                ...matchWidth && referenceWidth ? {
+                    minInlineSize: `${referenceWidth}px`,
+                    maxInlineSize: `min(${2 * referenceWidth}px, 90vw)`
+                } : {},
+                ...userProps?.style
+            }
+        }), [
+        floating.floatingStyles,
+        interactions,
+        matchWidth,
+        referenceWidth
+    ]);
+    let getReferenceProps = React.useCallback((userProps)=>interactions.getReferenceProps({
+            ...userProps,
+            onClick: mergeEventHandlers(userProps?.onClick, ()=>{
+                if (!!mergedInteractions.click && visible) onOpenChange(false);
+            })
+        }), [
+        interactions,
+        mergedInteractions.click,
+        visible,
+        onOpenChange
+    ]);
+    return React.useMemo(()=>({
+            open,
+            onOpenChange,
+            getReferenceProps,
+            getFloatingProps,
+            ...floating
+        }), [
+        open,
+        onOpenChange,
+        getFloatingProps,
+        floating,
+        getReferenceProps
+    ]);
+};
+export const Popover = React.forwardRef((props, forwardedRef)=>{
+    let { portal = true, visible, placement = 'bottom-start', onVisibleChange, closeOnOutsideClick = true, middleware, positionReference, className, children, content, applyBackground = false, ...rest } = props;
+    let popover = usePopover({
+        visible,
+        placement,
+        onVisibleChange,
+        closeOnOutsideClick,
+        role: 'dialog',
+        middleware
+    });
+    let [popoverElement, setPopoverElement] = React.useState();
+    let popoverRef = useMergedRefs(popover.refs.setFloating, forwardedRef, setPopoverElement);
+    let triggerId = `${useId()}-trigger`;
+    let hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
+    useLayoutEffect(()=>{
+        if (!positionReference) return;
+        popover.refs.setPositionReference(positionReference);
+        return ()=>void popover.refs.setPositionReference(null);
+    }, [
+        popover.refs,
+        positionReference
+    ]);
+    return React.createElement(React.Fragment, null, React.createElement(PopoverOpenContext.Provider, {
+        value: popover.open
+    }, cloneElementWithRef(children, (children)=>({
+            id: children.props.id || triggerId,
+            ...popover.getReferenceProps(children.props),
+            ref: popover.refs.setReference
+        }))), popover.open ? React.createElement(PopoverPortal, {
+        portal: portal
+    }, React.createElement(ThemeProvider, {
+        portalContainer: popoverElement
+    }, React.createElement(DisplayContents, null), React.createElement(FloatingFocusManager, {
+        context: popover.context,
+        modal: false,
+        initialFocus: popover.refs.floating
+    }, React.createElement(Box, {
+        className: cx({
+            'iui-popover-surface': applyBackground
+        }, className),
+        "aria-labelledby": hasAriaLabel ? void 0 : popover.refs.domReference.current?.id,
+        ...popover.getFloatingProps(rest),
+        ref: popoverRef
+    }, content)))) : null);
+});
+Popover.displayName = 'Popover';
+let PopoverPortal = ({ children, portal = true })=>{
+    let portalTo = usePortalTo(portal);
+    return React.createElement(FloatingPortal, {
+        key: portalTo?.id,
+        root: portalTo
+    }, React.createElement(DisplayContents, null), children);
+};
+let DisplayContents = React.memo(()=>React.createElement(ShadowRoot, {
+        css: `
+        :host {
+          display: contents;
+        }
+      `
+    }, React.createElement("slot", null)));

package/DEV-esm/core/ProgressIndicators/ProgressLinear.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box, ShadowRoot, getBoundedValue } from '../../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+export const ProgressLinear = React.forwardRef((props, forwardedRef)=>{
+    let { value, indeterminate = void 0 === value, labels = [], isAnimated = false, status, className, labelGroupProps, ...rest } = props;
+    let boundedValue = getBoundedValue(value ?? 100, 0, 100);
+    return React.createElement(Box, {
+        className: cx('iui-progress-indicator-linear', className),
+        ref: forwardedRef,
+        "data-iui-status": status,
+        "data-iui-indeterminate": indeterminate ? 'true' : void 0,
+        "data-iui-animated": isAnimated ? 'true' : void 0,
+        style: {
+            '--iui-progress-percentage': `${boundedValue}%`
+        },
+        ...rest
+    }, React.createElement(ShadowRoot, null, 100 !== value && React.createElement(VisuallyHidden, null, "Loading."), React.createElement("slot", null)), labels.length > 0 && React.createElement(Box, {
+        as: "div",
+        ...labelGroupProps,
+        className: cx('iui-progress-indicator-linear-label', labelGroupProps?.className)
+    }, labels.map((label, index)=>React.createElement("span", {
+            key: index
+        }, label))));
+});
+ProgressLinear.displayName = 'ProgressLinear';

package/DEV-esm/core/ProgressIndicators/ProgressRadial.js

@@ -0,0 +1,33 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { SvgCheckmarkSmall, SvgImportantSmall, Box, getBoundedValue, ShadowRoot } from '../../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+export const ProgressRadial = React.forwardRef((props, forwardedRef)=>{
+    let { value, indeterminate = void 0 === value, status, size, className, style, children, ...rest } = props;
+    let statusMap = {
+        negative: React.createElement(SvgImportantSmall, {
+            "aria-hidden": true
+        }),
+        positive: React.createElement(SvgCheckmarkSmall, {
+            "aria-hidden": true
+        }),
+        warning: React.createElement(SvgImportantSmall, {
+            "aria-hidden": true
+        })
+    };
+    return React.createElement(Box, {
+        className: cx('iui-progress-indicator-radial', className),
+        "data-iui-size": size,
+        "data-iui-status": status,
+        "data-iui-indeterminate": indeterminate ? 'true' : void 0,
+        ref: forwardedRef,
+        style: {
+            ...void 0 !== value && {
+                '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`
+            },
+            ...style
+        },
+        ...rest
+    }, React.createElement(ShadowRoot, null, 100 !== value && React.createElement(VisuallyHidden, null, "Loading."), React.createElement("slot", null)), 'x-small' !== size ? children ?? (status ? statusMap[status] : null) : null);
+});
+ProgressRadial.displayName = 'ProgressRadial';

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

@@ -0,0 +1,30 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { useMergedRefs, Box } from '../../utils/index.js';
+export const Radio = React.forwardRef((props, ref)=>{
+    let { className, disabled = false, label, status, labelProps, wrapperProps, style, ...rest } = props;
+    let inputElementRef = React.useRef(null);
+    let refs = useMergedRefs(inputElementRef, ref);
+    let radio = React.createElement(Box, {
+        as: "input",
+        className: cx('iui-radio', className),
+        style: style,
+        disabled: disabled,
+        type: "radio",
+        ref: refs,
+        ...rest
+    });
+    return label ? React.createElement(Box, {
+        as: "label",
+        ...wrapperProps,
+        className: cx('iui-radio-wrapper', {
+            'iui-disabled': disabled,
+            [`iui-${status}`]: !!status
+        }, wrapperProps?.className)
+    }, radio, label && React.createElement(Box, {
+        as: "span",
+        ...labelProps,
+        className: cx('iui-radio-label', labelProps?.className)
+    }, label)) : radio;
+});
+Radio.displayName = 'Radio';

package/DEV-esm/core/RadioTiles/RadioTile.js

@@ -0,0 +1,35 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { useMergedRefs, Box } from '../../utils/index.js';
+export const RadioTile = React.forwardRef((props, ref)=>{
+    let { icon, label, description, className, wrapperProps, iconProps, labelProps, subLabelProps, style, ...rest } = props;
+    let inputElementRef = React.useRef(null);
+    let refs = useMergedRefs(inputElementRef, ref);
+    return React.createElement(Box, {
+        as: "label",
+        "data-iui-disabled": props.disabled ? 'true' : void 0,
+        ...wrapperProps,
+        className: cx('iui-radio-tile', wrapperProps?.className)
+    }, React.createElement(Box, {
+        as: "input",
+        ref: refs,
+        className: cx('iui-radio-tile-input', className),
+        style: style,
+        type: "radio",
+        ...rest
+    }), icon && React.createElement(Box, {
+        as: "span",
+        "aria-hidden": true,
+        ...iconProps,
+        className: cx('iui-radio-tile-icon', iconProps?.className)
+    }, icon), label && React.createElement(Box, {
+        as: "div",
+        ...labelProps,
+        className: cx('iui-radio-tile-label', labelProps?.className)
+    }, label), description && React.createElement(Box, {
+        as: "div",
+        ...subLabelProps,
+        className: cx('iui-radio-tile-sublabel', subLabelProps?.className)
+    }, description));
+});
+RadioTile.displayName = 'RadioTile';

package/DEV-esm/core/RadioTiles/RadioTileGroup.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { InputGroup } from '../InputGroup/InputGroup.js';
+import { Box } from '../../utils/index.js';
+export const RadioTileGroup = React.forwardRef((props, forwardedRef)=>{
+    let { children, label, ...rest } = props;
+    return React.createElement(InputGroup, {
+        label: label,
+        ref: forwardedRef,
+        ...rest
+    }, React.createElement(Box, {
+        className: "iui-radio-tile-container"
+    }, children));
+});
+RadioTileGroup.displayName = 'RadioTileGroup';

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

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { InputFlexContainer, SvgSearch, SvgCloseSmall, useSafeContext, useId, useMergedRefs, mergeEventHandlers, Box, InputFlexContainerIcon, InputFlexContainerButton } from '../../utils/index.js';
+let SearchBoxContext = React.createContext(void 0);
+let SearchBoxComponent = React.forwardRef((props, ref)=>{
+    let { size, expandable = false, isDisabled = false, onCollapse: onCollapseProp, onExpand: onExpandProp, isExpanded: isExpandedProp, children, inputProps, className, ...rest } = props;
+    let uid = useId();
+    let [inputId, setInputId] = React.useState(uid);
+    let inputRef = React.useRef(null);
+    let openButtonRef = React.useRef(null);
+    let [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
+    let isExpanded = isExpandedProp ?? localExpanded;
+    let onCollapse = ()=>{
+        setLocalExpanded(false);
+        onCollapseProp?.();
+        queueMicrotask(()=>openButtonRef.current?.focus({
+                preventScroll: true
+            }));
+    };
+    let onExpand = ()=>{
+        setLocalExpanded(true);
+        onExpandProp?.();
+        queueMicrotask(()=>inputRef.current?.focus({
+                preventScroll: true
+            }));
+    };
+    return React.createElement(SearchBoxContext.Provider, {
+        value: {
+            size,
+            isDisabled,
+            onCollapse,
+            onExpand,
+            inputRef,
+            inputId,
+            setInputId,
+            openButtonRef,
+            isExpanded,
+            expandable
+        }
+    }, React.createElement(InputFlexContainer, {
+        ref: ref,
+        className: cx('iui-searchbox', {
+            'iui-expandable-searchbox': expandable
+        }, className),
+        size: size,
+        isDisabled: isDisabled,
+        "data-iui-expanded": isExpanded,
+        ...rest
+    }, children ?? React.createElement(React.Fragment, null, React.createElement(SearchBoxCollapsedState, null, React.createElement(SearchBoxExpandButton, null)), React.createElement(SearchBoxExpandedState, null, React.createElement(SearchBoxIcon, null), React.createElement(SearchBoxInput, inputProps), expandable ? React.createElement(SearchBoxCollapseButton, null) : null))));
+});
+let SearchBoxCollapsedState = ({ children })=>{
+    let { isExpanded, expandable } = useSafeContext(SearchBoxContext);
+    if (!expandable || isExpanded) return null;
+    return React.createElement(React.Fragment, null, children ?? React.createElement(SearchBoxExpandButton, null));
+};
+SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
+let SearchBoxExpandedState = ({ children })=>{
+    let { isExpanded, expandable } = useSafeContext(SearchBoxContext);
+    if (expandable && !isExpanded) return null;
+    return React.createElement(React.Fragment, null, children);
+};
+SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
+let SearchBoxIcon = React.forwardRef((props, ref)=>{
+    let { className, children, ...rest } = props;
+    return React.createElement(InputFlexContainerIcon, {
+        "aria-hidden": true,
+        className: cx('iui-search-icon', className),
+        ref: ref,
+        ...rest
+    }, children ?? React.createElement(SvgSearch, null));
+});
+SearchBoxIcon.displayName = 'SearchBox.Icon';
+let SearchBoxInput = React.forwardRef((props, ref)=>{
+    let { className, id: idProp, ...rest } = props;
+    let { inputId, setInputId, isDisabled, inputRef } = useSafeContext(SearchBoxContext);
+    React.useEffect(()=>{
+        if (idProp && idProp !== inputId) setInputId(idProp);
+    }, [
+        idProp,
+        inputId,
+        setInputId
+    ]);
+    return React.createElement(Box, {
+        as: "input",
+        id: idProp ?? inputId,
+        ref: useMergedRefs(ref, inputRef),
+        role: "searchbox",
+        type: "text",
+        className: cx('iui-search-input', className),
+        disabled: isDisabled,
+        ...rest
+    });
+});
+SearchBoxInput.displayName = 'SearchBox.Input';
+let SearchBoxButton = React.forwardRef((props, ref)=>{
+    let { children, ...rest } = props;
+    let { size: sizeContext, isDisabled } = useSafeContext(SearchBoxContext);
+    return React.createElement(InputFlexContainerButton, {
+        size: sizeContext,
+        ref: ref,
+        disabled: isDisabled,
+        ...rest
+    }, children ?? React.createElement(SvgSearch, null));
+});
+SearchBoxButton.displayName = 'SearchBox.Button';
+let SearchBoxCollapseButton = React.forwardRef((props, ref)=>{
+    let { children, onClick: onClickProp, ...rest } = props;
+    let { onCollapse, size: sizeContext, isDisabled } = useSafeContext(SearchBoxContext);
+    return React.createElement(SearchBoxButton, {
+        ref: ref,
+        "aria-label": "Close searchbox",
+        size: sizeContext,
+        disabled: isDisabled,
+        onClick: mergeEventHandlers(onClickProp, onCollapse),
+        ...rest
+    }, children ?? React.createElement(SvgCloseSmall, null));
+});
+SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
+let SearchBoxExpandButton = React.forwardRef((props, ref)=>{
+    let { children, onClick: onClickProp, ...rest } = props;
+    let { onExpand, size: sizeContext, isDisabled, openButtonRef } = useSafeContext(SearchBoxContext);
+    return React.createElement(SearchBoxButton, {
+        ref: useMergedRefs(ref, openButtonRef),
+        "aria-label": "Expand searchbox",
+        size: sizeContext,
+        disabled: isDisabled,
+        onClick: mergeEventHandlers(onClickProp, onExpand),
+        styleType: "default",
+        ...rest
+    }, children ?? React.createElement(SvgSearch, null));
+});
+SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
+export const SearchBox = Object.assign(SearchBoxComponent, {
+    Icon: SearchBoxIcon,
+    Input: SearchBoxInput,
+    Button: SearchBoxButton,
+    CollapseButton: SearchBoxCollapseButton,
+    ExpandButton: SearchBoxExpandButton,
+    ExpandedState: SearchBoxExpandedState,
+    CollapsedState: SearchBoxCollapsedState
+});
+SearchBox.displayName = 'SearchBox';