@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.11

package/esm/core/Select/Select.js

@@ -4,16 +4,27 @@
  *--------------------------------------------------------------------------------------------*/
 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 SelectTag from './SelectTag.js';
-import SelectTagContainer from './SelectTagContainer.js';
+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 { 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.
@@ -65,158 +76,263 @@ const isSingleOnChange = (onChange, multiple) => {
  * />
  */
 export const Select = (props) => {
-    var _a;
-    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 = (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.visible) !== null && _a !== void 0 ? _a : 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 === null || onShow === void 0 ? void 0 : onShow(instance);
-    }, [onShow]);
-    const onHideHandler = React.useCallback((instance) => {
-        var _a;
-        setIsOpen(false);
-        (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true }); // move focus back to select button
-        onHide === null || onHide === void 0 ? void 0 : 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,
+    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) {
             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) => {
-            var _a;
-            const isSelected = isMultipleEnabled(value, multiple)
-                ? (_a = value === null || value === void 0 ? void 0 : value.includes(option.value)) !== null && _a !== void 0 ? _a : 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 !== null && startIconProp !== void 0 ? startIconProp : icon;
-            return React.cloneElement(menuItem, {
-                key: `${label}-${index}`,
-                isSelected,
-                startIcon: startIcon,
-                onClick: () => {
-                    if (option.disabled) {
-                        return;
-                    }
-                    if (isSingleOnChange(onChange, multiple)) {
-                        onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
-                        setIsOpen(false);
-                    }
-                    else {
-                        onChange === null || onChange === void 0 ? void 0 : 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 === null || el === void 0 ? void 0 : 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 }) => {
-                var _a;
-                if (!((_a = toggleButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
-                    setIsOpen(false);
+          }
+          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()),
+  });
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(
+      Box,
+      {
+        className: cx('iui-input-with-icon', className),
+        style: style,
+        ...rest,
+        ref: popover.refs.setPositionReference,
+      },
+      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();
                 }
-            } },
-            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 === null || triggerProps === void 0 ? void 0 : 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));
+              },
+            }),
+            ref: popover.refs.setFloating,
+          },
+          menuItems,
+        ),
+      ),
+  );
 };
-const SingleSelectButton = ({ selectedItem, selectedItemRenderer, }) => {
-    var _a;
-    const startIcon = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.startIcon) !== null && _a !== void 0 ? _a : selectedItem === null || selectedItem === void 0 ? void 0 : 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

@@ -5,16 +5,29 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { useOverflow, useMergedRefs, Box } from '../utils/index.js';
-import SelectTag from './SelectTag.js';
+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.
@@ -48,6 +48,22 @@ declare type SideNavigationProps = {
      * @default false
      */
     isSubmenuOpen?: boolean;
+    /**
+     * Passes props for SideNav wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav content.
+     */
+    contentProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav top.
+     */
+    topProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav bottom.
+     */
+    bottomProps?: React.ComponentProps<'div'>;
 };
 /**
  * Left side navigation menu component.