@itwin/itwinui-react 3.12.2 → 3.13.0

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

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SearchBox", {
+    enumerable: true,
+    get: function() {
+        return SearchBox;
+    }
+});
+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 SearchBoxContext = _react.createContext(void 0);
+const SearchBoxComponent = _react.forwardRef((props, ref)=>{
+    let { size, expandable = false, isDisabled = false, onCollapse: onCollapseProp, onExpand: onExpandProp, isExpanded: isExpandedProp, children, inputProps, className, ...rest } = props;
+    let uid = (0, _index.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(_index.InputFlexContainer, {
+        ref: ref,
+        className: (0, _classnames.default)('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))));
+});
+const SearchBoxCollapsedState = ({ children })=>{
+    let { isExpanded, expandable } = (0, _index.useSafeContext)(SearchBoxContext);
+    if (!expandable || isExpanded) return null;
+    return _react.createElement(_react.Fragment, null, children ?? _react.createElement(SearchBoxExpandButton, null));
+};
+SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
+const SearchBoxExpandedState = ({ children })=>{
+    let { isExpanded, expandable } = (0, _index.useSafeContext)(SearchBoxContext);
+    if (expandable && !isExpanded) return null;
+    return _react.createElement(_react.Fragment, null, children);
+};
+SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
+const SearchBoxIcon = _react.forwardRef((props, ref)=>{
+    let { className, children, ...rest } = props;
+    return _react.createElement(_index.InputFlexContainerIcon, {
+        "aria-hidden": true,
+        className: (0, _classnames.default)('iui-search-icon', className),
+        ref: ref,
+        ...rest
+    }, children ?? _react.createElement(_index.SvgSearch, null));
+});
+SearchBoxIcon.displayName = 'SearchBox.Icon';
+const SearchBoxInput = _react.forwardRef((props, ref)=>{
+    let { className, id: idProp, ...rest } = props;
+    let { inputId, setInputId, isDisabled, inputRef } = (0, _index.useSafeContext)(SearchBoxContext);
+    _react.useEffect(()=>{
+        if (idProp && idProp !== inputId) setInputId(idProp);
+    }, [
+        idProp,
+        inputId,
+        setInputId
+    ]);
+    return _react.createElement(_index.Box, {
+        as: "input",
+        id: idProp ?? inputId,
+        ref: (0, _index.useMergedRefs)(ref, inputRef),
+        role: "searchbox",
+        type: "text",
+        className: (0, _classnames.default)('iui-search-input', className),
+        disabled: isDisabled,
+        ...rest
+    });
+});
+SearchBoxInput.displayName = 'SearchBox.Input';
+const SearchBoxButton = _react.forwardRef((props, ref)=>{
+    let { children, ...rest } = props;
+    let { size: sizeContext, isDisabled } = (0, _index.useSafeContext)(SearchBoxContext);
+    return _react.createElement(_index.InputFlexContainerButton, {
+        size: sizeContext,
+        ref: ref,
+        disabled: isDisabled,
+        ...rest
+    }, children ?? _react.createElement(_index.SvgSearch, null));
+});
+SearchBoxButton.displayName = 'SearchBox.Button';
+const SearchBoxCollapseButton = _react.forwardRef((props, ref)=>{
+    let { children, onClick: onClickProp, ...rest } = props;
+    let { onCollapse, size: sizeContext, isDisabled } = (0, _index.useSafeContext)(SearchBoxContext);
+    return _react.createElement(SearchBoxButton, {
+        ref: ref,
+        "aria-label": "Close searchbox",
+        size: sizeContext,
+        disabled: isDisabled,
+        onClick: (0, _index.mergeEventHandlers)(onClickProp, onCollapse),
+        ...rest
+    }, children ?? _react.createElement(_index.SvgCloseSmall, null));
+});
+SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
+const SearchBoxExpandButton = _react.forwardRef((props, ref)=>{
+    let { children, onClick: onClickProp, ...rest } = props;
+    let { onExpand, size: sizeContext, isDisabled, openButtonRef } = (0, _index.useSafeContext)(SearchBoxContext);
+    return _react.createElement(SearchBoxButton, {
+        ref: (0, _index.useMergedRefs)(ref, openButtonRef),
+        "aria-label": "Expand searchbox",
+        size: sizeContext,
+        disabled: isDisabled,
+        onClick: (0, _index.mergeEventHandlers)(onClickProp, onExpand),
+        styleType: "default",
+        ...rest
+    }, children ?? _react.createElement(_index.SvgSearch, null));
+});
+SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
+const SearchBox = Object.assign(SearchBoxComponent, {
+    Icon: SearchBoxIcon,
+    Input: SearchBoxInput,
+    Button: SearchBoxButton,
+    CollapseButton: SearchBoxCollapseButton,
+    ExpandButton: SearchBoxExpandButton,
+    ExpandedState: SearchBoxExpandedState,
+    CollapsedState: SearchBoxCollapsedState
+});
+SearchBox.displayName = 'SearchBox';

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

@@ -0,0 +1,300 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Select", {
+    enumerable: true,
+    get: function() {
+        return Select;
+    }
+});
+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 _MenuItem = require("../Menu/MenuItem.js");
+const _index = require("../../utils/index.js");
+const _SelectTag = require("./SelectTag.js");
+const _SelectTagContainer = require("./SelectTagContainer.js");
+const _Icon = require("../Icon/Icon.js");
+const _Popover = require("../Popover/Popover.js");
+const _List = require("../List/List.js");
+const _react1 = require("@floating-ui/react");
+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';
+const 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(_index.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: (0, _index.mergeEventHandlers)(triggerProps?.onKeyDown, (event)=>{
+            if ('Enter' === event.key) event.currentTarget.showPicker?.();
+        }),
+        onChange: (0, _index.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
+    }));
+});
+const CustomSelect = _react.forwardRef((props, forwardedRef)=>{
+    let uid = (0, _index.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 = (0, _index.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.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(_index.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.SelectTag, {
+            key: item.label,
+            label: item.label
+        }), []);
+    let popover = (0, _Popover.usePopover)({
+        visible: isOpen,
+        matchWidth: true,
+        closeOnOutsideClick: true,
+        ...popoverProps,
+        onVisibleChange: (open)=>open ? show() : hide()
+    });
+    return _react.createElement(_react.Fragment, null, _react.createElement(_index.InputWithIcon, {
+        ...rest,
+        ref: (0, _index.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: (0, _index.useMergedRefs)(selectRef, triggerProps?.ref, popover.refs.setReference),
+        className: (0, _classnames.default)({
+            'iui-placeholder': (!selectedItems || 0 === selectedItems.length) && !!placeholder
+        }, triggerProps?.className)
+    }, (!selectedItems || 0 === selectedItems.length) && _react.createElement(_index.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(_index.AutoclearingHiddenLiveRegion, {
+        text: liveRegionSelection
+    }) : null), popover.open && _react.createElement(_index.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)));
+});
+const isMultipleEnabled = (variable, multiple)=>multiple;
+const isSingleOnChange = (onChange, multiple)=>!multiple;
+const SelectButton = _react.forwardRef((props, forwardedRef)=>{
+    let { size, status, styleType = 'default', ...rest } = props;
+    return _react.createElement(_index.Box, {
+        "data-iui-size": size,
+        "data-iui-status": status,
+        "data-iui-variant": 'default' !== styleType ? styleType : void 0,
+        ...rest,
+        ref: forwardedRef,
+        className: (0, _classnames.default)('iui-select-button', 'iui-field', props.className)
+    });
+});
+const SelectEndIcon = _react.forwardRef((props, forwardedRef)=>{
+    let { disabled, isOpen, ...rest } = props;
+    return _react.createElement(_Icon.Icon, {
+        "aria-hidden": true,
+        ...rest,
+        ref: forwardedRef,
+        className: (0, _classnames.default)('iui-end-icon', {
+            'iui-disabled': disabled,
+            'iui-open': isOpen
+        }, props.className)
+    }, _react.createElement(_index.SvgCaretDownSmall, null));
+});
+const 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(_index.Box, {
+        as: "span",
+        className: "iui-icon",
+        "aria-hidden": true
+    }, startIcon), _react.createElement(_index.Box, {
+        as: "span",
+        className: "iui-content"
+    }, selectedItem.label)));
+};
+const 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(_index.Box, {
+        as: "span",
+        className: "iui-content"
+    }, _react.createElement(_SelectTagContainer.SelectTagContainer, {
+        tags: selectedItemsElements
+    })));
+};
+const 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(_react1.CompositeItem, {
+                key: index,
+                render: child,
+                ref: child.props.ref || child.ref
+            }) : child), [
+        childrenProp
+    ]);
+    return _react.createElement(_react1.Composite, {
+        render: _react.createElement(_List.List, {
+            as: "div",
+            className: (0, _classnames.default)('iui-menu', className)
+        }),
+        orientation: "vertical",
+        role: "listbox",
+        activeIndex: focusedIndex,
+        onNavigate: setFocusedIndex,
+        ref: (0, _index.useMergedRefs)(forwardedRef, autoFocus ? autoFocusRef : void 0),
+        ...rest
+    }, children);
+});

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

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = require("react");
+const _Select = require("./Select.js");
+()=>{
+    let ref = (0, _react.useRef)(null);
+    return React.createElement(React.Fragment, null, React.createElement(_Select.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.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.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.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.Select, {
+        styleType: 'borderless',
+        options: []
+    }), React.createElement(_Select.Select, {
+        styleType: 'default',
+        options: []
+    }));

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SelectTag", {
+    enumerable: true,
+    get: function() {
+        return SelectTag;
+    }
+});
+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 SelectTag = _react.forwardRef((props, forwardedRef)=>{
+    let { className, label, ...rest } = props;
+    return _react.createElement(_index.Box, {
+        as: "span",
+        className: (0, _classnames.default)('iui-select-tag', className),
+        ref: forwardedRef,
+        ...rest
+    }, _react.createElement(_index.Box, {
+        as: "span",
+        className: "iui-select-tag-label"
+    }, label));
+});

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SelectTagContainer", {
+    enumerable: true,
+    get: function() {
+        return SelectTagContainer;
+    }
+});
+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 _SelectTag = require("./SelectTag.js");
+const SelectTagContainer = _react.forwardRef((props, ref)=>{
+    let { tags, className, ...rest } = props;
+    let [containerRef, visibleCount] = (0, _index.useOverflow)(tags);
+    let refs = (0, _index.useMergedRefs)(ref, containerRef);
+    return _react.createElement(_index.Box, {
+        className: (0, _classnames.default)('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.SelectTag, {
+        label: `+${tags.length - visibleCount + 1} item(s)`
+    })));
+});

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

@@ -0,0 +1,74 @@
+"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, {
+    SideNavigation: function() {
+        return SideNavigation;
+    },
+    SidenavExpandedContext: function() {
+        return SidenavExpandedContext;
+    }
+});
+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 SidenavExpandedContext = _react.createContext(void 0);
+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] = (0, _index.useControlledState)(false, isExpandedProp);
+    let ExpandButton = _react.createElement(_IconButton.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(_index.SvgChevronRight, null));
+    return _react.createElement(SidenavExpandedContext.Provider, {
+        value: isExpanded
+    }, _react.createElement(_index.Box, {
+        ...wrapperProps,
+        className: (0, _classnames.default)('iui-side-navigation-wrapper', wrapperProps?.className),
+        ref: forwardedRef
+    }, _react.createElement(_index.Box, {
+        as: "div",
+        className: (0, _classnames.default)('iui-side-navigation', {
+            'iui-expanded': isExpanded,
+            'iui-collapsed': !isExpanded
+        }, className),
+        ...rest
+    }, 'top' === expanderPlacement && ExpandButton, _react.createElement(_index.Box, {
+        as: "div",
+        ...contentProps,
+        className: (0, _classnames.default)('iui-sidenav-content', contentProps?.className)
+    }, _react.createElement(_index.Box, {
+        as: "div",
+        ...topProps,
+        className: (0, _classnames.default)('iui-top', topProps?.className)
+    }, items), _react.createElement(_index.Box, {
+        as: "div",
+        ...bottomProps,
+        className: (0, _classnames.default)('iui-bottom', bottomProps?.className)
+    }, secondaryItems)), 'bottom' === expanderPlacement && ExpandButton), submenu && _react.createElement(_index.WithCSSTransition, {
+        in: isSubmenuOpen,
+        dimension: "width",
+        timeout: 200,
+        classNames: "iui"
+    }, submenu)));
+});
+SideNavigation.displayName = 'SideNavigation';