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

package/cjs/core/Select/Select.js

@@ -1,48 +1,25 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.Select = void 0;
+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 = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../Menu/index.js");
-const index_js_2 = require("../utils/index.js");
-const SelectTag_js_1 = __importDefault(require("./SelectTag.js"));
-const SelectTagContainer_js_1 = __importDefault(require("./SelectTagContainer.js"));
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../Menu/index.js');
+const index_js_2 = require('../utils/index.js');
+const SelectTag_js_1 = tslib_1.__importDefault(require('./SelectTag.js'));
+const SelectTagContainer_js_1 = tslib_1.__importDefault(
+  require('./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.
@@ -94,154 +71,287 @@ const isSingleOnChange = (onChange, multiple) => {
  * />
  */
 const Select = (props) => {
-    const uid = (0, index_js_2.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 = (0, index_js_2.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(index_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,
+        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(index_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,
-                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_js_1.default, { key: item.label, label: item.label });
-    }, []);
-    return (React.createElement(index_js_2.Box, { className: (0, classnames_1.default)('iui-input-with-icon', className), style: style, ...rest },
-        React.createElement(index_js_2.Popover, { content: React.createElement(index_js_1.Menu, { role: 'listbox', className: (0, classnames_1.default)('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(index_js_2.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: (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_2.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(index_js_2.Box, { as: 'span', "aria-hidden": true, ref: toggleButtonRef, className: (0, classnames_1.default)('iui-end-icon', {
-                'iui-actionable': !disabled,
-                'iui-disabled': disabled,
-                'iui-open': isOpen,
-            }), onClick: () => !disabled && setIsOpen((o) => !o) },
-            React.createElement(index_js_2.SvgCaretDownSmall, null)),
-        multiple ? (React.createElement(index_js_2.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_js_1.default, {
+      key: item.label,
+      label: item.label,
+    });
+  }, []);
+  return React.createElement(
+    index_js_2.Box,
+    {
+      className: (0, classnames_1.default)('iui-input-with-icon', className),
+      style: style,
+      ...rest,
+    },
+    React.createElement(
+      index_js_2.Popover,
+      {
+        content: React.createElement(
+          index_js_1.Menu,
+          {
+            role: 'listbox',
+            className: (0, classnames_1.default)('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(
+        index_js_2.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: (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_2.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(
+      index_js_2.Box,
+      {
+        as: 'span',
+        'aria-hidden': true,
+        ref: toggleButtonRef,
+        className: (0, classnames_1.default)('iui-end-icon', {
+          'iui-actionable': !disabled,
+          'iui-disabled': disabled,
+          'iui-open': isOpen,
+        }),
+        onClick: () => !disabled && setIsOpen((o) => !o),
+      },
+      React.createElement(index_js_2.SvgCaretDownSmall, null),
+    ),
+    multiple
+      ? React.createElement(index_js_2.AutoclearingHiddenLiveRegion, {
+          text: liveRegionSelection,
+        })
+      : null,
+  );
 };
 exports.Select = Select;
-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_2.Box, { as: 'span', className: 'iui-icon', "aria-hidden": true }, startIcon)),
-            React.createElement(index_js_2.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_2.Box,
+            { as: 'span', className: 'iui-icon', 'aria-hidden': true },
+            startIcon,
+          ),
+        React.createElement(
+          index_js_2.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_2.Box, { as: 'span', className: 'iui-content' },
-            React.createElement(SelectTagContainer_js_1.default, { 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_2.Box,
+        { as: 'span', className: 'iui-content' },
+        React.createElement(SelectTagContainer_js_1.default, {
+          tags: selectedItemsElements,
+        }),
+      ),
+  );
 };
 exports.default = exports.Select;

package/cjs/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/cjs/core/Select/SelectTag.js

@@ -1,46 +1,33 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.SelectTag = void 0;
+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 = __importDefault(require("classnames"));
-const React = __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.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.
      */