@itwin/itwinui-react 3.12.2 → 3.13.0

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

@@ -0,0 +1,288 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { MenuItem } from '../Menu/MenuItem.js';
+import { SvgCaretDownSmall, useId, AutoclearingHiddenLiveRegion, Box, Portal, useMergedRefs, SvgCheckmark, useLatestRef, InputWithIcon, mergeEventHandlers } from '../../utils/index.js';
+import { SelectTag } from './SelectTag.js';
+import { SelectTagContainer } from './SelectTagContainer.js';
+import { Icon } from '../Icon/Icon.js';
+import { usePopover } from '../Popover/Popover.js';
+import { List } from '../List/List.js';
+import { Composite, CompositeItem } from '@floating-ui/react';
+export const Select = React.forwardRef((props, forwardedRef)=>{
+    let { native, ...rest } = props;
+    let Component = native ? NativeSelect : CustomSelect;
+    return React.createElement(Component, {
+        ...rest,
+        ref: forwardedRef
+    });
+});
+Select.displayName = 'Select';
+let NativeSelect = React.forwardRef((props, forwardedRef)=>{
+    let { triggerProps, options, disabled, placeholder, defaultValue: defaultValueProp = void 0 !== placeholder ? '' : void 0, value: valueProp, onChange: onChangeProp, size, status, styleType, required, ...rest } = props;
+    return React.createElement(InputWithIcon, {
+        ...rest,
+        ref: forwardedRef
+    }, React.createElement(SelectButton, {
+        as: "select",
+        size: size,
+        status: status,
+        styleType: styleType,
+        disabled: disabled,
+        defaultValue: void 0 === valueProp ? defaultValueProp : void 0,
+        value: null === valueProp ? '' : valueProp,
+        required: required,
+        ...triggerProps,
+        onKeyDown: mergeEventHandlers(triggerProps?.onKeyDown, (event)=>{
+            if ('Enter' === event.key) event.currentTarget.showPicker?.();
+        }),
+        onChange: mergeEventHandlers(triggerProps?.onChange, (event)=>{
+            onChangeProp?.(event.currentTarget.value, event);
+        })
+    }, 'borderless' !== styleType && void 0 !== placeholder ? React.createElement("option", {
+        value: "",
+        disabled: true
+    }, placeholder) : null, options.map((option)=>React.createElement("option", {
+            key: option.value,
+            ...option
+        }, option.label))), React.createElement(SelectEndIcon, {
+        disabled: disabled
+    }));
+});
+let CustomSelect = React.forwardRef((props, forwardedRef)=>{
+    let uid = useId();
+    let { options, value: valueProp, onChange: onChangeProp, placeholder, disabled = false, size, itemRenderer, selectedItemRenderer, menuClassName, menuStyle, multiple = false, triggerProps, status, popoverProps, styleType, ...rest } = props;
+    let [isOpen, setIsOpen] = React.useState(false);
+    let [liveRegionSelection, setLiveRegionSelection] = React.useState('');
+    let [uncontrolledValue, setUncontrolledValue] = React.useState();
+    let value = void 0 !== valueProp ? valueProp : uncontrolledValue;
+    let onChangeRef = useLatestRef(onChangeProp);
+    let selectRef = React.useRef(null);
+    let show = React.useCallback(()=>{
+        if (disabled) return;
+        setIsOpen(true);
+        popoverProps?.onVisibleChange?.(true);
+    }, [
+        disabled,
+        popoverProps
+    ]);
+    let hide = React.useCallback(()=>{
+        setIsOpen(false);
+        selectRef.current?.focus({
+            preventScroll: true
+        });
+        popoverProps?.onVisibleChange?.(false);
+    }, [
+        popoverProps
+    ]);
+    let menuItems = React.useMemo(()=>options.map((option, index)=>{
+            let isSelected = isMultipleEnabled(value, multiple) ? value?.includes(option.value) ?? false : value === option.value;
+            let menuItem = itemRenderer ? itemRenderer(option, {
+                close: ()=>setIsOpen(false),
+                isSelected
+            }) : React.createElement(MenuItem, null, option.label);
+            let { label, icon, startIcon: startIconProp, ...restOption } = option;
+            let startIcon = startIconProp ?? icon;
+            return React.cloneElement(menuItem, {
+                key: `${label}-${index}`,
+                isSelected,
+                startIcon: startIcon,
+                endIcon: isSelected ? React.createElement(SvgCheckmark, {
+                    "aria-hidden": true
+                }) : null,
+                onClick: ()=>{
+                    if (option.disabled) return;
+                    if (isSingleOnChange(onChangeRef.current, multiple)) {
+                        setUncontrolledValue(option.value);
+                        onChangeRef.current?.(option.value);
+                        hide();
+                    } else {
+                        setUncontrolledValue((prev)=>isSelected ? prev?.filter((i)=>option.value !== i) : [
+                                ...prev ?? [],
+                                option.value
+                            ]);
+                        onChangeRef.current?.(option.value, isSelected ? 'removed' : 'added');
+                    }
+                    if (isMultipleEnabled(value, multiple)) {
+                        let prevSelectedValue = value || [];
+                        let newSelectedValue = isSelected ? prevSelectedValue.filter((i)=>option.value !== i) : [
+                            ...prevSelectedValue,
+                            option.value
+                        ];
+                        setLiveRegionSelection(options.filter((i)=>newSelectedValue.includes(i.value)).map((item)=>item.label).filter(Boolean).join(', '));
+                    }
+                },
+                ref: (el)=>{
+                    if (isSelected && !multiple) el?.scrollIntoView({
+                        block: 'nearest'
+                    });
+                },
+                role: 'option',
+                ...restOption,
+                ...menuItem.props
+            });
+        }), [
+        hide,
+        itemRenderer,
+        multiple,
+        onChangeRef,
+        options,
+        value
+    ]);
+    let selectedItems = React.useMemo(()=>{
+        if (null == value) return;
+        return isMultipleEnabled(value, multiple) ? options.filter((option)=>value.some((val)=>val === option.value)) : options.find((option)=>option.value === value);
+    }, [
+        multiple,
+        options,
+        value
+    ]);
+    let defaultFocusedIndex = React.useMemo(()=>{
+        let index = 0;
+        if (Array.isArray(value) && value.length > 0) index = options.findIndex((option)=>option.value === value[0]);
+        else if (value) index = options.findIndex((option)=>option.value === value);
+        return index >= 0 ? index : 0;
+    }, [
+        options,
+        value
+    ]);
+    let tagRenderer = React.useCallback((item)=>React.createElement(SelectTag, {
+            key: item.label,
+            label: item.label
+        }), []);
+    let popover = usePopover({
+        visible: isOpen,
+        matchWidth: true,
+        closeOnOutsideClick: true,
+        ...popoverProps,
+        onVisibleChange: (open)=>open ? show() : hide()
+    });
+    return React.createElement(React.Fragment, null, React.createElement(InputWithIcon, {
+        ...rest,
+        ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef)
+    }, React.createElement(SelectButton, {
+        ...popover.getReferenceProps(),
+        tabIndex: 0,
+        role: "combobox",
+        size: size,
+        status: status,
+        "aria-disabled": disabled ? 'true' : void 0,
+        "data-iui-disabled": disabled ? 'true' : void 0,
+        "aria-autocomplete": "none",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": `${uid}-menu`,
+        styleType: styleType,
+        ...triggerProps,
+        ref: useMergedRefs(selectRef, triggerProps?.ref, popover.refs.setReference),
+        className: cx({
+            'iui-placeholder': (!selectedItems || 0 === selectedItems.length) && !!placeholder
+        }, triggerProps?.className)
+    }, (!selectedItems || 0 === selectedItems.length) && React.createElement(Box, {
+        as: "span",
+        className: "iui-content"
+    }, placeholder), isMultipleEnabled(selectedItems, multiple) ? React.createElement(MultipleSelectButton, {
+        selectedItems: selectedItems,
+        selectedItemsRenderer: selectedItemRenderer,
+        tagRenderer: tagRenderer
+    }) : React.createElement(SingleSelectButton, {
+        selectedItem: selectedItems,
+        selectedItemRenderer: selectedItemRenderer
+    })), React.createElement(SelectEndIcon, {
+        disabled: disabled,
+        isOpen: isOpen
+    }), multiple ? React.createElement(AutoclearingHiddenLiveRegion, {
+        text: liveRegionSelection
+    }) : null), popover.open && React.createElement(Portal, null, React.createElement(SelectListbox, {
+        defaultFocusedIndex: defaultFocusedIndex,
+        className: menuClassName,
+        id: `${uid}-menu`,
+        key: `${uid}-menu`,
+        ...popover.getFloatingProps({
+            style: menuStyle,
+            onKeyDown: ({ key })=>{
+                if ('Tab' === key) hide();
+            }
+        }),
+        ref: popover.refs.setFloating
+    }, menuItems)));
+});
+let isMultipleEnabled = (variable, multiple)=>multiple;
+let isSingleOnChange = (onChange, multiple)=>!multiple;
+let SelectButton = React.forwardRef((props, forwardedRef)=>{
+    let { size, status, styleType = 'default', ...rest } = props;
+    return React.createElement(Box, {
+        "data-iui-size": size,
+        "data-iui-status": status,
+        "data-iui-variant": 'default' !== styleType ? styleType : void 0,
+        ...rest,
+        ref: forwardedRef,
+        className: cx('iui-select-button', 'iui-field', props.className)
+    });
+});
+let SelectEndIcon = React.forwardRef((props, forwardedRef)=>{
+    let { disabled, isOpen, ...rest } = props;
+    return React.createElement(Icon, {
+        "aria-hidden": true,
+        ...rest,
+        ref: forwardedRef,
+        className: cx('iui-end-icon', {
+            'iui-disabled': disabled,
+            'iui-open': isOpen
+        }, props.className)
+    }, React.createElement(SvgCaretDownSmall, null));
+});
+let SingleSelectButton = ({ selectedItem, selectedItemRenderer })=>{
+    let startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
+    return React.createElement(React.Fragment, null, selectedItem && selectedItemRenderer && selectedItemRenderer(selectedItem), selectedItem && !selectedItemRenderer && React.createElement(React.Fragment, null, startIcon && React.createElement(Box, {
+        as: "span",
+        className: "iui-icon",
+        "aria-hidden": true
+    }, startIcon), React.createElement(Box, {
+        as: "span",
+        className: "iui-content"
+    }, selectedItem.label)));
+};
+let MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRenderer })=>{
+    let selectedItemsElements = React.useMemo(()=>{
+        if (!selectedItems) return [];
+        return selectedItems.map((item)=>tagRenderer(item));
+    }, [
+        selectedItems,
+        tagRenderer
+    ]);
+    return React.createElement(React.Fragment, null, selectedItems && selectedItemsRenderer && selectedItemsRenderer(selectedItems), selectedItems && !selectedItemsRenderer && React.createElement(Box, {
+        as: "span",
+        className: "iui-content"
+    }, React.createElement(SelectTagContainer, {
+        tags: selectedItemsElements
+    })));
+};
+let SelectListbox = React.forwardRef((props, forwardedRef)=>{
+    let { defaultFocusedIndex = 0, autoFocus = true, children: childrenProp, className, ...rest } = props;
+    let [focusedIndex, setFocusedIndex] = React.useState(defaultFocusedIndex);
+    let autoFocusRef = React.useCallback((element)=>{
+        queueMicrotask(()=>{
+            let firstFocusable = element?.querySelector('[tabindex="0"]');
+            firstFocusable?.focus();
+        });
+    }, []);
+    let children = React.useMemo(()=>React.Children.map(childrenProp, (child, index)=>React.isValidElement(child) ? React.createElement(CompositeItem, {
+                key: index,
+                render: child,
+                ref: child.props.ref || child.ref
+            }) : child), [
+        childrenProp
+    ]);
+    return React.createElement(Composite, {
+        render: React.createElement(List, {
+            as: "div",
+            className: cx('iui-menu', className)
+        }),
+        orientation: "vertical",
+        role: "listbox",
+        activeIndex: focusedIndex,
+        onNavigate: setFocusedIndex,
+        ref: useMergedRefs(forwardedRef, autoFocus ? autoFocusRef : void 0),
+        ...rest
+    }, children);
+});

package/DEV-esm/core/Select/Select.types-test.js

@@ -0,0 +1,86 @@
+import { useRef } from 'react';
+import { Select } from './Select.js';
+()=>{
+    let ref = useRef(null);
+    return React.createElement(React.Fragment, null, React.createElement(Select, {
+        options: [
+            {
+                value: 1,
+                label: 'Option 1'
+            },
+            {
+                value: 2,
+                label: 'Option 2'
+            },
+            {
+                value: 3,
+                label: 'Option 3'
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        },
+        ref: ref
+    }));
+};
+()=>React.createElement(React.Fragment, null, React.createElement(Select, {
+        options: [
+            {
+                value: 1,
+                label: 'Option 1'
+            },
+            {
+                value: 2,
+                label: 'Option 2'
+            },
+            {
+                value: 3,
+                label: 'Option 3'
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        }
+    }));
+()=>React.createElement(React.Fragment, null, React.createElement(Select, {
+        options: [
+            {
+                value: '1',
+                label: 'Option 1'
+            },
+            {
+                value: '2',
+                label: 'Option 2'
+            },
+            {
+                value: '3',
+                label: 'Option 3'
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        }
+    }));
+()=>React.createElement(React.Fragment, null, React.createElement(Select, {
+        label: "Select Label",
+        options: [
+            {
+                value: 1,
+                label: 'Item #1'
+            }
+        ],
+        onChange: (value)=>{
+            let returnValue = value;
+            return returnValue;
+        }
+    }));
+()=>React.createElement(React.Fragment, null, React.createElement(Select, {
+        styleType: 'borderless',
+        options: []
+    }), React.createElement(Select, {
+        styleType: 'default',
+        options: []
+    }));

package/DEV-esm/core/Select/SelectTag.js

@@ -0,0 +1,15 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+export const SelectTag = React.forwardRef((props, forwardedRef)=>{
+    let { className, label, ...rest } = props;
+    return React.createElement(Box, {
+        as: "span",
+        className: cx('iui-select-tag', className),
+        ref: forwardedRef,
+        ...rest
+    }, React.createElement(Box, {
+        as: "span",
+        className: "iui-select-tag-label"
+    }, label));
+});

package/DEV-esm/core/Select/SelectTagContainer.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { useOverflow, useMergedRefs, Box } from '../../utils/index.js';
+import { SelectTag } from './SelectTag.js';
+export const SelectTagContainer = React.forwardRef((props, ref)=>{
+    let { tags, className, ...rest } = props;
+    let [containerRef, visibleCount] = useOverflow(tags);
+    let refs = useMergedRefs(ref, containerRef);
+    return React.createElement(Box, {
+        className: cx('iui-select-tag-container', className),
+        ref: refs,
+        ...rest
+    }, React.createElement(React.Fragment, null, visibleCount < tags.length ? tags.slice(0, visibleCount - 1) : tags, visibleCount < tags.length && React.createElement(SelectTag, {
+        label: `+${tags.length - visibleCount + 1} item(s)`
+    })));
+});

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { WithCSSTransition, SvgChevronRight, Box, useControlledState } from '../../utils/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+export const SidenavExpandedContext = React.createContext(void 0);
+export const SideNavigation = React.forwardRef((props, forwardedRef)=>{
+    let { items, secondaryItems, expanderPlacement = 'top', className, isExpanded: isExpandedProp, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
+    let [isExpanded, setIsExpanded] = useControlledState(false, isExpandedProp);
+    let ExpandButton = React.createElement(IconButton, {
+        label: "Toggle icon labels",
+        "aria-expanded": isExpanded,
+        className: "iui-sidenav-button iui-expand",
+        size: "small",
+        onClick: React.useCallback(()=>{
+            setIsExpanded((expanded)=>!expanded);
+            onExpanderClick?.();
+        }, [
+            onExpanderClick,
+            setIsExpanded
+        ])
+    }, React.createElement(SvgChevronRight, null));
+    return React.createElement(SidenavExpandedContext.Provider, {
+        value: isExpanded
+    }, React.createElement(Box, {
+        ...wrapperProps,
+        className: cx('iui-side-navigation-wrapper', wrapperProps?.className),
+        ref: forwardedRef
+    }, React.createElement(Box, {
+        as: "div",
+        className: cx('iui-side-navigation', {
+            'iui-expanded': isExpanded,
+            'iui-collapsed': !isExpanded
+        }, className),
+        ...rest
+    }, 'top' === expanderPlacement && ExpandButton, React.createElement(Box, {
+        as: "div",
+        ...contentProps,
+        className: cx('iui-sidenav-content', contentProps?.className)
+    }, React.createElement(Box, {
+        as: "div",
+        ...topProps,
+        className: cx('iui-top', topProps?.className)
+    }, items), React.createElement(Box, {
+        as: "div",
+        ...bottomProps,
+        className: cx('iui-bottom', bottomProps?.className)
+    }, secondaryItems)), 'bottom' === expanderPlacement && ExpandButton), submenu && React.createElement(WithCSSTransition, {
+        in: isSubmenuOpen,
+        dimension: "width",
+        timeout: 200,
+        classNames: "iui"
+    }, submenu)));
+});
+SideNavigation.displayName = 'SideNavigation';

package/DEV-esm/core/SideNavigation/SidenavButton.js

@@ -0,0 +1,25 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Button } from '../Buttons/Button.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { SidenavExpandedContext } from './SideNavigation.js';
+export const SidenavButton = React.forwardRef((props, ref)=>{
+    let { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
+    let isExpanded = true === React.useContext(SidenavExpandedContext);
+    let sidenavButton = React.createElement(Button, {
+        className: cx('iui-sidenav-button', {
+            'iui-submenu-open': isSubmenuOpen
+        }, className),
+        "data-iui-active": isActive,
+        size: "large",
+        disabled: disabled,
+        ref: ref,
+        ...rest
+    }, children);
+    return isExpanded ? sidenavButton : React.createElement(Tooltip, {
+        content: children,
+        placement: "right",
+        ariaStrategy: "none"
+    }, sidenavButton);
+});
+SidenavButton.displayName = 'SidenavButton';

package/DEV-esm/core/SideNavigation/SidenavSubmenu.js

@@ -0,0 +1,14 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+export const SidenavSubmenu = React.forwardRef((props, ref)=>{
+    let { children, className, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-side-navigation-submenu', className),
+        ref: ref,
+        ...rest
+    }, React.createElement(Box, {
+        className: "iui-side-navigation-submenu-content"
+    }, children));
+});
+SidenavSubmenu.displayName = 'SidenavSubmenu';

package/DEV-esm/core/SideNavigation/SidenavSubmenuHeader.js

@@ -0,0 +1,16 @@
+import cx from 'classnames';
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+export const SidenavSubmenuHeader = React.forwardRef((props, forwardedRef)=>{
+    let { children, actions, className, ...rest } = props;
+    return React.createElement(Box, {
+        className: cx('iui-side-navigation-submenu-header', className),
+        ref: forwardedRef,
+        ...rest
+    }, React.createElement(Box, {
+        className: "iui-side-navigation-submenu-header-label"
+    }, children), actions && React.createElement(Box, {
+        className: "iui-side-navigation-submenu-header-actions"
+    }, actions));
+});
+SidenavSubmenuHeader.displayName = 'SidenavSubmenuHeader';

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import cx from 'classnames';
+import { Box } from '../../utils/index.js';
+export const SkipToContentLink = React.forwardRef((props, ref)=>{
+    let { children = 'Skip to main content', className, ...rest } = props;
+    return React.createElement(Box, {
+        as: "a",
+        ref: ref,
+        className: cx('iui-skip-to-content-link', className),
+        ...rest
+    }, children);
+});
+SkipToContentLink.displayName = 'SkipToContentLink';