@itwin/itwinui-react 3.0.4 → 3.0.6

package/esm/core/Select/Select.js

@@ -6,25 +6,17 @@ import * as React from 'react';
 import cx from 'classnames';
 import { Menu } from '../Menu/Menu.js';
 import { MenuItem } from '../Menu/MenuItem.js';
-import {
-  SvgCaretDownSmall,
-  useId,
-  AutoclearingHiddenLiveRegion,
-  Box,
-  Portal,
-  useMergedRefs,
-  SvgCheckmark,
-} from '../utils/index.js';
+import { SvgCaretDownSmall, useId, AutoclearingHiddenLiveRegion, Box, Portal, useMergedRefs, SvgCheckmark, } 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';
 const isMultipleEnabled = (variable, multiple) => {
-  return multiple;
+    return multiple;
 };
 // Type guard for multiple did not work
 const isSingleOnChange = (onChange, multiple) => {
-  return !multiple;
+    return !multiple;
 };
 /**
  * Select component to select value from options.
@@ -76,263 +68,136 @@ const isSingleOnChange = (onChange, multiple) => {
  * />
  */
 export const Select = React.forwardRef((props, forwardedRef) => {
-  const uid = useId();
-  const {
-    options,
-    value,
-    onChange,
-    placeholder,
-    disabled = false,
-    size,
-    itemRenderer,
-    selectedItemRenderer,
-    className,
-    style,
-    menuClassName,
-    menuStyle,
-    multiple = false,
-    triggerProps,
-    status,
-    popoverProps,
-    ...rest
-  } = props;
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
-  const selectRef = React.useRef(null);
-  const show = React.useCallback(() => {
-    if (disabled) {
-      return;
-    }
-    setIsOpen(true);
-    popoverProps?.onVisibleChange?.(true);
-  }, [disabled, popoverProps]);
-  const hide = React.useCallback(() => {
-    setIsOpen(false);
-    selectRef.current?.focus({ preventScroll: true }); // move focus back to select button
-    popoverProps?.onVisibleChange?.(false);
-  }, [popoverProps]);
-  const menuItems = React.useMemo(() => {
-    return options.map((option, index) => {
-      const isSelected = isMultipleEnabled(value, multiple)
-        ? value?.includes(option.value) ?? false
-        : value === option.value;
-      const menuItem = itemRenderer
-        ? itemRenderer(option, { close: () => setIsOpen(false), isSelected })
-        : React.createElement(MenuItem, null, option.label);
-      const { label, icon, startIcon: startIconProp, ...restOption } = option;
-      const 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) {
+    const uid = useId();
+    const { options, value, onChange, placeholder, disabled = false, size, itemRenderer, selectedItemRenderer, className, style, menuClassName, menuStyle, multiple = false, triggerProps, status, popoverProps, ...rest } = props;
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
+    const selectRef = React.useRef(null);
+    const show = React.useCallback(() => {
+        if (disabled) {
             return;
-          }
-          if (isSingleOnChange(onChange, multiple)) {
-            onChange?.(option.value);
-            hide();
-          } else {
-            onChange?.(option.value, isSelected ? 'removed' : 'added');
-          }
-          // update live region
-          if (isMultipleEnabled(value, multiple)) {
-            const prevSelectedValue = value || [];
-            const 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,
-      });
+        }
+        setIsOpen(true);
+        popoverProps?.onVisibleChange?.(true);
+    }, [disabled, popoverProps]);
+    const hide = React.useCallback(() => {
+        setIsOpen(false);
+        selectRef.current?.focus({ preventScroll: true }); // move focus back to select button
+        popoverProps?.onVisibleChange?.(false);
+    }, [popoverProps]);
+    const menuItems = React.useMemo(() => {
+        return options.map((option, index) => {
+            const isSelected = isMultipleEnabled(value, multiple)
+                ? value?.includes(option.value) ?? false
+                : value === option.value;
+            const menuItem = itemRenderer ? (itemRenderer(option, { close: () => setIsOpen(false), isSelected })) : (React.createElement(MenuItem, null, option.label));
+            const { label, icon, startIcon: startIconProp, ...restOption } = option;
+            const 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(onChange, multiple)) {
+                        onChange?.(option.value);
+                        hide();
+                    }
+                    else {
+                        onChange?.(option.value, isSelected ? 'removed' : 'added');
+                    }
+                    // update live region
+                    if (isMultipleEnabled(value, multiple)) {
+                        const prevSelectedValue = value || [];
+                        const 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, onChange, options, value]);
+    const selectedItems = React.useMemo(() => {
+        if (value == null) {
+            return undefined;
+        }
+        return isMultipleEnabled(value, multiple)
+            ? options.filter((option) => value.some((val) => val === option.value))
+            : options.find((option) => option.value === value);
+    }, [multiple, options, value]);
+    const tagRenderer = React.useCallback((item) => {
+        return React.createElement(SelectTag, { key: item.label, label: item.label });
+    }, []);
+    const popover = usePopover({
+        visible: isOpen,
+        matchWidth: true,
+        closeOnOutsideClick: true,
+        ...popoverProps,
+        onVisibleChange: (open) => (open ? show() : hide()),
     });
-  }, [hide, itemRenderer, multiple, onChange, options, value]);
-  const selectedItems = React.useMemo(() => {
-    if (value == null) {
-      return undefined;
-    }
-    return isMultipleEnabled(value, multiple)
-      ? options.filter((option) => value.some((val) => val === option.value))
-      : options.find((option) => option.value === value);
-  }, [multiple, options, value]);
-  const tagRenderer = React.useCallback((item) => {
-    return React.createElement(SelectTag, {
-      key: item.label,
-      label: item.label,
-    });
-  }, []);
-  const popover = usePopover({
-    visible: isOpen,
-    matchWidth: true,
-    closeOnOutsideClick: true,
-    ...popoverProps,
-    onVisibleChange: (open) => (open ? show() : hide()),
-  });
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(
-      Box,
-      {
-        className: cx('iui-input-with-icon', className),
-        style: style,
-        ...rest,
-        ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef),
-      },
-      React.createElement(
-        Box,
-        {
-          ...popover.getReferenceProps(),
-          tabIndex: 0,
-          role: 'combobox',
-          'data-iui-size': size,
-          'data-iui-status': status,
-          'aria-disabled': disabled,
-          'aria-autocomplete': 'none',
-          'aria-expanded': isOpen,
-          'aria-haspopup': 'listbox',
-          'aria-controls': `${uid}-menu`,
-          ...triggerProps,
-          ref: useMergedRefs(selectRef, popover.refs.setReference),
-          className: cx(
-            'iui-select-button',
-            {
-              'iui-placeholder':
-                (!selectedItems || selectedItems.length === 0) && !!placeholder,
-              'iui-disabled': disabled,
-            },
-            triggerProps?.className,
-          ),
-        },
-        (!selectedItems || selectedItems.length === 0) &&
-          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(
-        Icon,
-        {
-          as: 'span',
-          'aria-hidden': true,
-          className: cx('iui-end-icon', {
-            'iui-disabled': disabled,
-            'iui-open': isOpen,
-          }),
-        },
-        React.createElement(SvgCaretDownSmall, null),
-      ),
-      multiple
-        ? React.createElement(AutoclearingHiddenLiveRegion, {
-            text: liveRegionSelection,
-          })
-        : null,
-    ),
-    popover.open &&
-      React.createElement(
-        Portal,
-        null,
-        React.createElement(
-          Menu,
-          {
-            role: 'listbox',
-            className: menuClassName,
-            id: `${uid}-menu`,
-            key: `${uid}-menu`,
-            ...popover.getFloatingProps({
-              style: menuStyle,
-              onKeyDown: ({ key }) => {
-                if (key === 'Tab') {
-                  hide();
-                }
-              },
-            }),
-            ref: popover.refs.setFloating,
-          },
-          menuItems,
-        ),
-      ),
-  );
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Box, { className: cx('iui-input-with-icon', className), style: style, ...rest, ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef) },
+            React.createElement(Box, { ...popover.getReferenceProps(), tabIndex: 0, role: 'combobox', "data-iui-size": size, "data-iui-status": status, "aria-disabled": disabled, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, ref: useMergedRefs(selectRef, popover.refs.setReference), className: cx('iui-select-button', {
+                    'iui-placeholder': (!selectedItems || selectedItems.length === 0) &&
+                        !!placeholder,
+                    'iui-disabled': disabled,
+                }, triggerProps?.className) },
+                (!selectedItems || selectedItems.length === 0) && (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(Icon, { as: 'span', "aria-hidden": true, className: cx('iui-end-icon', {
+                    'iui-disabled': disabled,
+                    'iui-open': isOpen,
+                }) },
+                React.createElement(SvgCaretDownSmall, null)),
+            multiple ? (React.createElement(AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null),
+        popover.open && (React.createElement(Portal, null,
+            React.createElement(Menu, { role: 'listbox', className: menuClassName, id: `${uid}-menu`, key: `${uid}-menu`, ...popover.getFloatingProps({
+                    style: menuStyle,
+                    onKeyDown: ({ key }) => {
+                        if (key === 'Tab') {
+                            hide();
+                        }
+                    },
+                }), ref: popover.refs.setFloating }, menuItems)))));
 });
-const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
-  const 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,
-        ),
-      ),
-  );
+const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
+    const 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)))));
 };
-const MultipleSelectButton = ({
-  selectedItems,
-  selectedItemsRenderer,
-  tagRenderer,
-}) => {
-  const 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,
-        }),
-      ),
-  );
+const MultipleSelectButton = ({ selectedItems, selectedItemsRenderer, tagRenderer, }) => {
+    const 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 })))));
 };
 export default Select;

package/esm/core/Select/SelectTag.js

@@ -10,20 +10,8 @@ import { Box } from '../utils/index.js';
  * @private
  */
 export const SelectTag = React.forwardRef((props, forwardedRef) => {
-  const { 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,
-    ),
-  );
+    const { 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)));
 });
 export default SelectTag;

package/esm/core/Select/SelectTagContainer.js

@@ -9,25 +9,12 @@ import { SelectTag } from './SelectTag.js';
 /**
  */
 export const SelectTagContainer = React.forwardRef((props, ref) => {
-  const { tags, className, ...rest } = props;
-  const [containerRef, visibleCount] = useOverflow(tags);
-  const 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)`,
-        }),
-    ),
-  );
+    const { tags, className, ...rest } = props;
+    const [containerRef, visibleCount] = useOverflow(tags);
+    const 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)` })))));
 });
 export default SelectTagContainer;

package/esm/core/SideNavigation/SideNavigation.js

@@ -22,123 +22,26 @@ import { Tooltip } from '../Tooltip/Tooltip.js';
  * />
  */
 export const SideNavigation = React.forwardRef((props, forwardedRef) => {
-  const {
-    items,
-    secondaryItems,
-    expanderPlacement = 'top',
-    className,
-    isExpanded = false,
-    onExpanderClick,
-    submenu,
-    isSubmenuOpen = false,
-    wrapperProps,
-    contentProps,
-    topProps,
-    bottomProps,
-    ...rest
-  } = props;
-  const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
-  React.useEffect(() => {
-    _setIsExpanded(isExpanded);
-  }, [isExpanded]);
-  const ExpandButton = React.createElement(
-    IconButton,
-    {
-      label: 'Toggle icon labels',
-      'aria-expanded': _isExpanded,
-      className: 'iui-sidenav-button iui-expand',
-      onClick: React.useCallback(() => {
-        _setIsExpanded((expanded) => !expanded);
-        onExpanderClick?.();
-      }, [onExpanderClick]),
-    },
-    React.createElement(SvgChevronRight, null),
-  );
-  return 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,
-      },
-      expanderPlacement === 'top' && 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.map((sidenavButton, index) =>
-            !_isExpanded
-              ? React.createElement(
-                  Tooltip,
-                  {
-                    content: sidenavButton.props.children,
-                    placement: 'right',
-                    key: index,
-                  },
-                  sidenavButton,
-                )
-              : sidenavButton,
-          ),
-        ),
-        React.createElement(
-          Box,
-          {
-            as: 'div',
-            ...bottomProps,
-            className: cx('iui-bottom', bottomProps?.className),
-          },
-          secondaryItems?.map((sidenavButton, index) =>
-            !_isExpanded
-              ? React.createElement(
-                  Tooltip,
-                  {
-                    content: sidenavButton.props.children,
-                    placement: 'right',
-                    key: index,
-                  },
-                  sidenavButton,
-                )
-              : sidenavButton,
-          ),
-        ),
-      ),
-      expanderPlacement === 'bottom' && ExpandButton,
-    ),
-    submenu &&
-      React.createElement(
-        WithCSSTransition,
-        {
-          in: isSubmenuOpen,
-          dimension: 'width',
-          timeout: 200,
-          classNames: 'iui',
-        },
-        submenu,
-      ),
-  );
+    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded = false, onExpanderClick, submenu, isSubmenuOpen = false, wrapperProps, contentProps, topProps, bottomProps, ...rest } = props;
+    const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
+    React.useEffect(() => {
+        _setIsExpanded(isExpanded);
+    }, [isExpanded]);
+    const ExpandButton = (React.createElement(IconButton, { label: 'Toggle icon labels', "aria-expanded": _isExpanded, className: 'iui-sidenav-button iui-expand', onClick: React.useCallback(() => {
+            _setIsExpanded((expanded) => !expanded);
+            onExpanderClick?.();
+        }, [onExpanderClick]) },
+        React.createElement(SvgChevronRight, null)));
+    return (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 },
+            expanderPlacement === 'top' && 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.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
+                React.createElement(Box, { as: 'div', ...bottomProps, className: cx('iui-bottom', bottomProps?.className) }, secondaryItems?.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
+            expanderPlacement === 'bottom' && ExpandButton),
+        submenu && (React.createElement(WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
 });
 export default SideNavigation;

package/esm/core/SideNavigation/SidenavButton.js

@@ -10,29 +10,7 @@ import { Button } from '../Buttons/Button.js';
  * Label is hidden when sidenav is collapsed.
  */
 export const SidenavButton = React.forwardRef((props, ref) => {
-  const {
-    className,
-    children,
-    isActive = false,
-    disabled = false,
-    isSubmenuOpen = false,
-    ...rest
-  } = props;
-  return 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,
-  );
+    const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
+    return (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));
 });
 export default SidenavButton;