@itwin/itwinui-react 3.0.4 → 3.0.5

package/cjs/core/Select/Select.js

@@ -1,26 +1,26 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const Menu_js_1 = require('../Menu/Menu.js');
-const MenuItem_js_1 = require('../Menu/MenuItem.js');
-const index_js_1 = require('../utils/index.js');
-const SelectTag_js_1 = require('./SelectTag.js');
-const SelectTagContainer_js_1 = require('./SelectTagContainer.js');
-const Icon_js_1 = require('../Icon/Icon.js');
-const Popover_js_1 = require('../Popover/Popover.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Menu_js_1 = require("../Menu/Menu.js");
+const MenuItem_js_1 = require("../Menu/MenuItem.js");
+const index_js_1 = require("../utils/index.js");
+const SelectTag_js_1 = require("./SelectTag.js");
+const SelectTagContainer_js_1 = require("./SelectTagContainer.js");
+const Icon_js_1 = require("../Icon/Icon.js");
+const Popover_js_1 = require("../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.
@@ -72,271 +72,136 @@ const isSingleOnChange = (onChange, multiple) => {
  * />
  */
 exports.Select = React.forwardRef((props, forwardedRef) => {
-  const uid = (0, index_js_1.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_js_1.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(index_js_1.SvgCheckmark, {
-              'aria-hidden': true,
-            })
-          : null,
-        onClick: () => {
-          if (option.disabled) {
+    const uid = (0, index_js_1.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_js_1.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(index_js_1.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_js_1.SelectTag, { key: item.label, label: item.label });
+    }, []);
+    const popover = (0, Popover_js_1.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_js_1.SelectTag, {
-      key: item.label,
-      label: item.label,
-    });
-  }, []);
-  const popover = (0, Popover_js_1.usePopover)({
-    visible: isOpen,
-    matchWidth: true,
-    closeOnOutsideClick: true,
-    ...popoverProps,
-    onVisibleChange: (open) => (open ? show() : hide()),
-  });
-  return React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(
-      index_js_1.Box,
-      {
-        className: (0, classnames_1.default)('iui-input-with-icon', className),
-        style: style,
-        ...rest,
-        ref: (0, index_js_1.useMergedRefs)(
-          popover.refs.setPositionReference,
-          forwardedRef,
-        ),
-      },
-      React.createElement(
-        index_js_1.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: (0, index_js_1.useMergedRefs)(
-            selectRef,
-            popover.refs.setReference,
-          ),
-          className: (0, classnames_1.default)(
-            'iui-select-button',
-            {
-              'iui-placeholder':
-                (!selectedItems || selectedItems.length === 0) && !!placeholder,
-              'iui-disabled': disabled,
-            },
-            triggerProps?.className,
-          ),
-        },
-        (!selectedItems || selectedItems.length === 0) &&
-          React.createElement(
-            index_js_1.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_js_1.Icon,
-        {
-          as: 'span',
-          'aria-hidden': true,
-          className: (0, classnames_1.default)('iui-end-icon', {
-            'iui-disabled': disabled,
-            'iui-open': isOpen,
-          }),
-        },
-        React.createElement(index_js_1.SvgCaretDownSmall, null),
-      ),
-      multiple
-        ? React.createElement(index_js_1.AutoclearingHiddenLiveRegion, {
-            text: liveRegionSelection,
-          })
-        : null,
-    ),
-    popover.open &&
-      React.createElement(
-        index_js_1.Portal,
-        null,
-        React.createElement(
-          Menu_js_1.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(index_js_1.Box, { className: (0, classnames_1.default)('iui-input-with-icon', className), style: style, ...rest, ref: (0, index_js_1.useMergedRefs)(popover.refs.setPositionReference, forwardedRef) },
+            React.createElement(index_js_1.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: (0, index_js_1.useMergedRefs)(selectRef, popover.refs.setReference), className: (0, classnames_1.default)('iui-select-button', {
+                    'iui-placeholder': (!selectedItems || selectedItems.length === 0) &&
+                        !!placeholder,
+                    'iui-disabled': disabled,
+                }, triggerProps?.className) },
+                (!selectedItems || selectedItems.length === 0) && (React.createElement(index_js_1.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_js_1.Icon, { as: 'span', "aria-hidden": true, className: (0, classnames_1.default)('iui-end-icon', {
+                    'iui-disabled': disabled,
+                    'iui-open': isOpen,
+                }) },
+                React.createElement(index_js_1.SvgCaretDownSmall, null)),
+            multiple ? (React.createElement(index_js_1.AutoclearingHiddenLiveRegion, { text: liveRegionSelection })) : null),
+        popover.open && (React.createElement(index_js_1.Portal, null,
+            React.createElement(Menu_js_1.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(
-            index_js_1.Box,
-            { as: 'span', className: 'iui-icon', 'aria-hidden': true },
-            startIcon,
-          ),
-        React.createElement(
-          index_js_1.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(index_js_1.Box, { as: 'span', className: 'iui-icon', "aria-hidden": true }, startIcon)),
+            React.createElement(index_js_1.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(
-        index_js_1.Box,
-        { as: 'span', className: 'iui-content' },
-        React.createElement(SelectTagContainer_js_1.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(index_js_1.Box, { as: 'span', className: 'iui-content' },
+            React.createElement(SelectTagContainer_js_1.SelectTagContainer, { tags: selectedItemsElements })))));
 };
 exports.default = exports.Select;

package/cjs/core/Select/SelectTag.js

@@ -1,33 +1,21 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectTag = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 /**
  * Tag for showing selected value in `Select`.
  * @private
  */
 exports.SelectTag = React.forwardRef((props, forwardedRef) => {
-  const { className, label, ...rest } = props;
-  return React.createElement(
-    index_js_1.Box,
-    {
-      as: 'span',
-      className: (0, classnames_1.default)('iui-select-tag', className),
-      ref: forwardedRef,
-      ...rest,
-    },
-    React.createElement(
-      index_js_1.Box,
-      { as: 'span', className: 'iui-select-tag-label' },
-      label,
-    ),
-  );
+    const { className, label, ...rest } = props;
+    return (React.createElement(index_js_1.Box, { as: 'span', className: (0, classnames_1.default)('iui-select-tag', className), ref: forwardedRef, ...rest },
+        React.createElement(index_js_1.Box, { as: 'span', className: 'iui-select-tag-label' }, label)));
 });
 exports.default = exports.SelectTag;

package/cjs/core/Select/SelectTagContainer.js

@@ -1,40 +1,24 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectTagContainer = void 0;
-const tslib_1 = require('tslib');
+const tslib_1 = require("tslib");
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
-const SelectTag_js_1 = require('./SelectTag.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
+const SelectTag_js_1 = require("./SelectTag.js");
 /**
  */
 exports.SelectTagContainer = React.forwardRef((props, ref) => {
-  const { tags, className, ...rest } = props;
-  const [containerRef, visibleCount] = (0, index_js_1.useOverflow)(tags);
-  const refs = (0, index_js_1.useMergedRefs)(ref, containerRef);
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.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_js_1.SelectTag, {
-          label: `+${tags.length - visibleCount + 1} item(s)`,
-        }),
-    ),
-  );
+    const { tags, className, ...rest } = props;
+    const [containerRef, visibleCount] = (0, index_js_1.useOverflow)(tags);
+    const refs = (0, index_js_1.useMergedRefs)(ref, containerRef);
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.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_js_1.SelectTag, { label: `+${tags.length - visibleCount + 1} item(s)` })))));
 });
 exports.default = exports.SelectTagContainer;