@itwin/itwinui-react 3.0.0-dev.3 → 3.0.0-dev.5

package/esm/core/Select/Select.js

@@ -5,15 +5,21 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { Menu, MenuItem } from '../Menu/index.js';
-import { SvgCaretDownSmall, Popover, useId, AutoclearingHiddenLiveRegion, Box, } from '../utils/index.js';
+import {
+  SvgCaretDownSmall,
+  Popover,
+  useId,
+  AutoclearingHiddenLiveRegion,
+  Box,
+} from '../utils/index.js';
 import SelectTag from './SelectTag.js';
 import SelectTagContainer from './SelectTagContainer.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.
@@ -65,153 +71,282 @@ const isSingleOnChange = (onChange, multiple) => {
  * />
  */
 export const Select = (props) => {
-    const uid = useId();
-    const { options, value, onChange, placeholder, disabled = false, size, setFocus = false, itemRenderer, selectedItemRenderer, className, style, menuClassName, menuStyle, onShow, onHide, popoverProps, multiple = false, triggerProps, ...rest } = props;
-    const [isOpenState, setIsOpen] = React.useState(false);
-    const isOpen = popoverProps?.visible ?? isOpenState;
-    const [minWidth, setMinWidth] = React.useState(0);
-    const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
-    const selectRef = React.useRef(null);
-    const toggleButtonRef = React.useRef(null);
-    const onShowHandler = React.useCallback((instance) => {
-        setIsOpen(true);
-        onShow?.(instance);
-    }, [onShow]);
-    const onHideHandler = React.useCallback((instance) => {
-        setIsOpen(false);
-        selectRef.current?.focus({ preventScroll: true }); // move focus back to select button
-        onHide?.(instance);
-    }, [onHide]);
-    React.useEffect(() => {
-        if (selectRef.current && !disabled && setFocus) {
-            selectRef.current.focus();
-        }
-    }, [setFocus, disabled]);
-    React.useEffect(() => {
-        if (selectRef.current) {
-            setMinWidth(selectRef.current.offsetWidth);
-        }
-    }, [isOpen]);
-    const onKeyDown = (event) => {
-        if (event.altKey) {
+  const uid = useId();
+  const {
+    options,
+    value,
+    onChange,
+    placeholder,
+    disabled = false,
+    size,
+    itemRenderer,
+    selectedItemRenderer,
+    className,
+    style,
+    menuClassName,
+    menuStyle,
+    onShow,
+    onHide,
+    popoverProps,
+    multiple = false,
+    triggerProps,
+    ...rest
+  } = props;
+  const [isOpenState, setIsOpen] = React.useState(false);
+  const isOpen = popoverProps?.visible ?? isOpenState;
+  const [minWidth, setMinWidth] = React.useState(0);
+  const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
+  const selectRef = React.useRef(null);
+  const toggleButtonRef = React.useRef(null);
+  const onShowHandler = React.useCallback(
+    (instance) => {
+      setIsOpen(true);
+      onShow?.(instance);
+    },
+    [onShow],
+  );
+  const onHideHandler = React.useCallback(
+    (instance) => {
+      setIsOpen(false);
+      selectRef.current?.focus({ preventScroll: true }); // move focus back to select button
+      onHide?.(instance);
+    },
+    [onHide],
+  );
+  React.useEffect(() => {
+    if (selectRef.current) {
+      setMinWidth(selectRef.current.offsetWidth);
+    }
+  }, [isOpen]);
+  const onKeyDown = (event) => {
+    if (event.altKey) {
+      return;
+    }
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+      case 'Spacebar': {
+        setIsOpen((o) => !o);
+        event.preventDefault();
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  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,
+        onClick: () => {
+          if (option.disabled) {
             return;
-        }
-        switch (event.key) {
-            case 'Enter':
-            case ' ':
-            case 'Spacebar': {
-                setIsOpen((o) => !o);
-                event.preventDefault();
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    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,
-                onClick: () => {
-                    if (option.disabled) {
-                        return;
-                    }
-                    if (isSingleOnChange(onChange, multiple)) {
-                        onChange?.(option.value);
-                        setIsOpen(false);
-                    }
-                    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,
-            });
-        });
-    }, [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 });
-    }, []);
-    return (React.createElement(Box, { className: cx('iui-input-with-icon', className), style: style, ...rest },
-        React.createElement(Popover, { content: React.createElement(Menu, { role: 'listbox', className: cx('iui-scroll', menuClassName), style: {
-                    minWidth,
-                    maxWidth: `min(${minWidth * 2}px, 90vw)`,
-                    ...menuStyle,
-                }, id: `${uid}-menu`, key: `${uid}-menu` }, menuItems), placement: 'bottom-start', aria: { content: null }, onShow: onShowHandler, onHide: onHideHandler, ...popoverProps, visible: isOpen, onClickOutside: (_, { target }) => {
-                if (!toggleButtonRef.current?.contains(target)) {
-                    setIsOpen(false);
-                }
-            } },
-            React.createElement(Box, { tabIndex: 0, role: 'combobox', ref: selectRef, "data-iui-size": size, onClick: () => !disabled && setIsOpen((o) => !o), onKeyDown: (e) => !disabled && onKeyDown(e), "aria-disabled": disabled, "aria-autocomplete": 'none', "aria-expanded": isOpen, "aria-haspopup": 'listbox', "aria-controls": `${uid}-menu`, ...triggerProps, 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(Box, { as: 'span', "aria-hidden": true, ref: toggleButtonRef, className: cx('iui-end-icon', {
-                'iui-actionable': !disabled,
-                'iui-disabled': disabled,
-                'iui-open': isOpen,
-            }), onClick: () => !disabled && setIsOpen((o) => !o) },
-            React.createElement(SvgCaretDownSmall, null)),
-        multiple ? (React.createElement(AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null));
+          }
+          if (isSingleOnChange(onChange, multiple)) {
+            onChange?.(option.value);
+            setIsOpen(false);
+          } 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,
+      });
+    });
+  }, [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,
+    });
+  }, []);
+  return React.createElement(
+    Box,
+    { className: cx('iui-input-with-icon', className), style: style, ...rest },
+    React.createElement(
+      Popover,
+      {
+        content: React.createElement(
+          Menu,
+          {
+            role: 'listbox',
+            className: cx('iui-scroll', menuClassName),
+            style: {
+              minWidth,
+              maxWidth: `min(${minWidth * 2}px, 90vw)`,
+              ...menuStyle,
+            },
+            id: `${uid}-menu`,
+            key: `${uid}-menu`,
+          },
+          menuItems,
+        ),
+        placement: 'bottom-start',
+        aria: { content: null },
+        onShow: onShowHandler,
+        onHide: onHideHandler,
+        ...popoverProps,
+        visible: isOpen,
+        onClickOutside: (_, { target }) => {
+          if (!toggleButtonRef.current?.contains(target)) {
+            setIsOpen(false);
+          }
+        },
+      },
+      React.createElement(
+        Box,
+        {
+          tabIndex: 0,
+          role: 'combobox',
+          ref: selectRef,
+          'data-iui-size': size,
+          onClick: () => !disabled && setIsOpen((o) => !o),
+          onKeyDown: (e) => !disabled && onKeyDown(e),
+          'aria-disabled': disabled,
+          'aria-autocomplete': 'none',
+          'aria-expanded': isOpen,
+          'aria-haspopup': 'listbox',
+          'aria-controls': `${uid}-menu`,
+          ...triggerProps,
+          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(
+      Box,
+      {
+        as: 'span',
+        'aria-hidden': true,
+        ref: toggleButtonRef,
+        className: cx('iui-end-icon', {
+          'iui-actionable': !disabled,
+          'iui-disabled': disabled,
+          'iui-open': isOpen,
+        }),
+        onClick: () => !disabled && setIsOpen((o) => !o),
+      },
+      React.createElement(SvgCaretDownSmall, null),
+    ),
+    multiple
+      ? React.createElement(AutoclearingHiddenLiveRegion, {
+          text: liveRegionSelection,
+        })
+      : null,
+  );
 };
-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.d.ts

@@ -1,5 +1,5 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type SelectTagProps = {
+type SelectTagProps = {
     /**
      * Text inside the tag.
      */

package/esm/core/Select/SelectTag.js

@@ -10,8 +10,20 @@ 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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type SelectTagContainerProps = {
+type SelectTagContainerProps = {
     /**
      * Select tags.
      */

package/esm/core/Select/SelectTagContainer.js

@@ -9,12 +9,25 @@ 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.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type SideNavigationProps = {
+type SideNavigationProps = {
     /**
      * Buttons shown in the top portion of sidenav.
      * Recommended to use `SidenavButton` components.

package/esm/core/SideNavigation/SideNavigation.js

@@ -22,26 +22,99 @@ import { Tooltip } from '../Tooltip/index.js';
  * />
  */
 export const SideNavigation = React.forwardRef((props, forwardedRef) => {
-    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded = false, onExpanderClick, submenu, isSubmenuOpen = false, ...rest } = props;
-    const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
-    React.useEffect(() => {
-        _setIsExpanded(isExpanded);
-    }, [isExpanded]);
-    const ExpandButton = (React.createElement(IconButton, { className: 'iui-sidenav-button iui-expand', onClick: React.useCallback(() => {
-            _setIsExpanded((expanded) => !expanded);
-            onExpanderClick?.();
-        }, [onExpanderClick]) },
-        React.createElement(SvgChevronRight, null)));
-    return (React.createElement(Box, { className: cx('iui-side-navigation-wrapper', className), ref: forwardedRef, ...rest },
-        React.createElement(Box, { className: cx('iui-side-navigation', {
-                'iui-expanded': _isExpanded,
-                'iui-collapsed': !_isExpanded,
-            }) },
-            expanderPlacement === 'top' && ExpandButton,
-            React.createElement(Box, { className: 'iui-sidenav-content' },
-                React.createElement(Box, { className: 'iui-top' }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
-                React.createElement(Box, { className: 'iui-bottom' }, 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,
+    ...rest
+  } = props;
+  const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
+  React.useEffect(() => {
+    _setIsExpanded(isExpanded);
+  }, [isExpanded]);
+  const ExpandButton = React.createElement(
+    IconButton,
+    {
+      className: 'iui-sidenav-button iui-expand',
+      onClick: React.useCallback(() => {
+        _setIsExpanded((expanded) => !expanded);
+        onExpanderClick?.();
+      }, [onExpanderClick]),
+    },
+    React.createElement(SvgChevronRight, null),
+  );
+  return React.createElement(
+    Box,
+    {
+      className: cx('iui-side-navigation-wrapper', className),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      Box,
+      {
+        className: cx('iui-side-navigation', {
+          'iui-expanded': _isExpanded,
+          'iui-collapsed': !_isExpanded,
+        }),
+      },
+      expanderPlacement === 'top' && ExpandButton,
+      React.createElement(
+        Box,
+        { className: 'iui-sidenav-content' },
+        React.createElement(
+          Box,
+          { className: 'iui-top' },
+          items.map((sidenavButton, index) =>
+            !_isExpanded
+              ? React.createElement(
+                  Tooltip,
+                  {
+                    content: sidenavButton.props.children,
+                    placement: 'right',
+                    key: index,
+                  },
+                  sidenavButton,
+                )
+              : sidenavButton,
+          ),
+        ),
+        React.createElement(
+          Box,
+          { className: 'iui-bottom' },
+          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;