@itwin/itwinui-react 3.12.1 → 3.13.0

package/cjs/core/Select/Select.js

@@ -21,20 +21,20 @@ const _Popover = require('../Popover/Popover.js');
 const _List = require('../List/List.js');
 const _react1 = require('@floating-ui/react');
 const Select = _react.forwardRef((props, forwardedRef) => {
-  const { native, ...rest } = props;
-  const Component = native ? NativeSelect : CustomSelect;
+  let { native, ...rest } = props;
+  let Component = native ? NativeSelect : CustomSelect;
   return _react.createElement(Component, {
     ...rest,
     ref: forwardedRef,
   });
 });
 const NativeSelect = _react.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     triggerProps,
     options,
     disabled,
     placeholder,
-    defaultValue: defaultValueProp = placeholder !== undefined ? '' : undefined,
+    defaultValue: defaultValueProp = void 0 !== placeholder ? '' : void 0,
     value: valueProp,
     onChange: onChangeProp,
     size,
@@ -57,16 +57,14 @@ const NativeSelect = _react.forwardRef((props, forwardedRef) => {
         status: status,
         styleType: styleType,
         disabled: disabled,
-        defaultValue: valueProp === undefined ? defaultValueProp : undefined,
-        value: valueProp === null ? '' : valueProp,
+        defaultValue: void 0 === valueProp ? defaultValueProp : void 0,
+        value: null === valueProp ? '' : valueProp,
         required: required,
         ...triggerProps,
         onKeyDown: (0, _index.mergeEventHandlers)(
           triggerProps?.onKeyDown,
           (event) => {
-            if (event.key === 'Enter') {
-              event.currentTarget.showPicker?.();
-            }
+            if ('Enter' === event.key) event.currentTarget.showPicker?.();
           },
         ),
         onChange: (0, _index.mergeEventHandlers)(
@@ -76,7 +74,7 @@ const NativeSelect = _react.forwardRef((props, forwardedRef) => {
           },
         ),
       },
-      styleType !== 'borderless' && placeholder !== undefined
+      'borderless' !== styleType && void 0 !== placeholder
         ? _react.createElement(
             'option',
             {
@@ -103,8 +101,8 @@ const NativeSelect = _react.forwardRef((props, forwardedRef) => {
   );
 });
 const CustomSelect = _react.forwardRef((props, forwardedRef) => {
-  const uid = (0, _index.useId)();
-  const {
+  let uid = (0, _index.useId)();
+  let {
     options,
     value: valueProp,
     onChange: onChangeProp,
@@ -122,118 +120,114 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
     styleType,
     ...rest
   } = props;
-  const [isOpen, setIsOpen] = _react.useState(false);
-  const [liveRegionSelection, setLiveRegionSelection] = _react.useState('');
-  const [uncontrolledValue, setUncontrolledValue] = _react.useState();
-  const value = valueProp !== undefined ? valueProp : uncontrolledValue;
-  const onChangeRef = (0, _index.useLatestRef)(onChangeProp);
-  const selectRef = _react.useRef(null);
-  const show = _react.useCallback(() => {
-    if (disabled) {
-      return;
-    }
+  let [isOpen, setIsOpen] = _react.useState(false);
+  let [liveRegionSelection, setLiveRegionSelection] = _react.useState('');
+  let [uncontrolledValue, setUncontrolledValue] = _react.useState();
+  let value = void 0 !== valueProp ? valueProp : uncontrolledValue;
+  let onChangeRef = (0, _index.useLatestRef)(onChangeProp);
+  let selectRef = _react.useRef(null);
+  let show = _react.useCallback(() => {
+    if (disabled) return;
     setIsOpen(true);
     popoverProps?.onVisibleChange?.(true);
   }, [disabled, popoverProps]);
-  const hide = _react.useCallback(() => {
+  let hide = _react.useCallback(() => {
     setIsOpen(false);
     selectRef.current?.focus({
       preventScroll: true,
     });
     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.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.SvgCheckmark, {
-              'aria-hidden': true,
+  let menuItems = _react.useMemo(
+    () =>
+      options.map((option, index) => {
+        let isSelected = isMultipleEnabled(value, multiple)
+          ? value?.includes(option.value) ?? false
+          : value === option.value;
+        let menuItem = itemRenderer
+          ? itemRenderer(option, {
+              close: () => setIsOpen(false),
+              isSelected,
             })
-          : null,
-        onClick: () => {
-          if (option.disabled) {
-            return;
-          }
-          if (isSingleOnChange(onChangeRef.current, multiple)) {
-            setUncontrolledValue(option.value);
-            onChangeRef.current?.(option.value);
-            hide();
-          } else {
-            setUncontrolledValue((prev) =>
-              isSelected
-                ? prev?.filter((i) => option.value !== i)
-                : [...(prev ?? []), option.value],
-            );
-            onChangeRef.current?.(
-              option.value,
-              isSelected ? 'removed' : 'added',
-            );
-          }
-          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, onChangeRef, options, value]);
-  const selectedItems = _react.useMemo(() => {
-    if (value == null) {
-      return undefined;
-    }
+          : _react.createElement(_MenuItem.MenuItem, null, option.label);
+        let { label, icon, startIcon: startIconProp, ...restOption } = option;
+        let startIcon = startIconProp ?? icon;
+        return _react.cloneElement(menuItem, {
+          key: `${label}-${index}`,
+          isSelected,
+          startIcon: startIcon,
+          endIcon: isSelected
+            ? _react.createElement(_index.SvgCheckmark, {
+                'aria-hidden': true,
+              })
+            : null,
+          onClick: () => {
+            if (option.disabled) return;
+            if (isSingleOnChange(onChangeRef.current, multiple)) {
+              setUncontrolledValue(option.value);
+              onChangeRef.current?.(option.value);
+              hide();
+            } else {
+              setUncontrolledValue((prev) =>
+                isSelected
+                  ? prev?.filter((i) => option.value !== i)
+                  : [...(prev ?? []), option.value],
+              );
+              onChangeRef.current?.(
+                option.value,
+                isSelected ? 'removed' : 'added',
+              );
+            }
+            if (isMultipleEnabled(value, multiple)) {
+              let prevSelectedValue = value || [];
+              let 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, onChangeRef, options, value],
+  );
+  let selectedItems = _react.useMemo(() => {
+    if (null == value) return;
     return isMultipleEnabled(value, multiple)
       ? options.filter((option) => value.some((val) => val === option.value))
       : options.find((option) => option.value === value);
   }, [multiple, options, value]);
-  const defaultFocusedIndex = _react.useMemo(() => {
+  let defaultFocusedIndex = _react.useMemo(() => {
     let index = 0;
-    if (Array.isArray(value) && value.length > 0) {
+    if (Array.isArray(value) && value.length > 0)
       index = options.findIndex((option) => option.value === value[0]);
-    } else if (value) {
+    else if (value)
       index = options.findIndex((option) => option.value === value);
-    }
     return index >= 0 ? index : 0;
   }, [options, value]);
-  const tagRenderer = _react.useCallback((item) => {
-    return _react.createElement(_SelectTag.SelectTag, {
-      key: item.label,
-      label: item.label,
-    });
-  }, []);
-  const popover = (0, _Popover.usePopover)({
+  let tagRenderer = _react.useCallback(
+    (item) =>
+      _react.createElement(_SelectTag.SelectTag, {
+        key: item.label,
+        label: item.label,
+      }),
+    [],
+  );
+  let popover = (0, _Popover.usePopover)({
     visible: isOpen,
     matchWidth: true,
     closeOnOutsideClick: true,
@@ -260,8 +254,8 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
           role: 'combobox',
           size: size,
           status: status,
-          'aria-disabled': disabled ? 'true' : undefined,
-          'data-iui-disabled': disabled ? 'true' : undefined,
+          'aria-disabled': disabled ? 'true' : void 0,
+          'data-iui-disabled': disabled ? 'true' : void 0,
           'aria-autocomplete': 'none',
           'aria-expanded': isOpen,
           'aria-haspopup': 'listbox',
@@ -276,12 +270,12 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
           className: (0, _classnames.default)(
             {
               'iui-placeholder':
-                (!selectedItems || selectedItems.length === 0) && !!placeholder,
+                (!selectedItems || 0 === selectedItems.length) && !!placeholder,
             },
             triggerProps?.className,
           ),
         },
-        (!selectedItems || selectedItems.length === 0) &&
+        (!selectedItems || 0 === selectedItems.length) &&
           _react.createElement(
             _index.Box,
             {
@@ -325,9 +319,7 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
             ...popover.getFloatingProps({
               style: menuStyle,
               onKeyDown: ({ key }) => {
-                if (key === 'Tab') {
-                  hide();
-                }
+                if ('Tab' === key) hide();
               },
             }),
             ref: popover.refs.setFloating,
@@ -337,18 +329,14 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
       ),
   );
 });
-const isMultipleEnabled = (variable, multiple) => {
-  return multiple;
-};
-const isSingleOnChange = (onChange, multiple) => {
-  return !multiple;
-};
+const isMultipleEnabled = (variable, multiple) => multiple;
+const isSingleOnChange = (onChange, multiple) => !multiple;
 const SelectButton = _react.forwardRef((props, forwardedRef) => {
-  const { size, status, styleType = 'default', ...rest } = props;
+  let { size, status, styleType = 'default', ...rest } = props;
   return _react.createElement(_index.Box, {
     'data-iui-size': size,
     'data-iui-status': status,
-    'data-iui-variant': styleType !== 'default' ? styleType : undefined,
+    'data-iui-variant': 'default' !== styleType ? styleType : void 0,
     ...rest,
     ref: forwardedRef,
     className: (0, _classnames.default)(
@@ -359,7 +347,7 @@ const SelectButton = _react.forwardRef((props, forwardedRef) => {
   });
 });
 const SelectEndIcon = _react.forwardRef((props, forwardedRef) => {
-  const { disabled, isOpen, ...rest } = props;
+  let { disabled, isOpen, ...rest } = props;
   return _react.createElement(
     _Icon.Icon,
     {
@@ -379,7 +367,7 @@ const SelectEndIcon = _react.forwardRef((props, forwardedRef) => {
   );
 });
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
-  const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
+  let startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
   return _react.createElement(
     _react.Fragment,
     null,
@@ -415,10 +403,8 @@ const MultipleSelectButton = ({
   selectedItemsRenderer,
   tagRenderer,
 }) => {
-  const selectedItemsElements = _react.useMemo(() => {
-    if (!selectedItems) {
-      return [];
-    }
+  let selectedItemsElements = _react.useMemo(() => {
+    if (!selectedItems) return [];
     return selectedItems.map((item) => tagRenderer(item));
   }, [selectedItems, tagRenderer]);
   return _react.createElement(
@@ -442,31 +428,33 @@ const MultipleSelectButton = ({
   );
 };
 const SelectListbox = _react.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     defaultFocusedIndex = 0,
     autoFocus = true,
     children: childrenProp,
     className,
     ...rest
   } = props;
-  const [focusedIndex, setFocusedIndex] = _react.useState(defaultFocusedIndex);
-  const autoFocusRef = _react.useCallback((element) => {
+  let [focusedIndex, setFocusedIndex] = _react.useState(defaultFocusedIndex);
+  let autoFocusRef = _react.useCallback((element) => {
     queueMicrotask(() => {
-      const firstFocusable = element?.querySelector('[tabindex="0"]');
+      let firstFocusable = element?.querySelector('[tabindex="0"]');
       firstFocusable?.focus();
     });
   }, []);
-  const children = _react.useMemo(() => {
-    return _react.Children.map(childrenProp, (child, index) =>
-      _react.isValidElement(child)
-        ? _react.createElement(_react1.CompositeItem, {
-            key: index,
-            render: child,
-            ref: child.props.ref || child.ref,
-          })
-        : child,
-    );
-  }, [childrenProp]);
+  let children = _react.useMemo(
+    () =>
+      _react.Children.map(childrenProp, (child, index) =>
+        _react.isValidElement(child)
+          ? _react.createElement(_react1.CompositeItem, {
+              key: index,
+              render: child,
+              ref: child.props.ref || child.ref,
+            })
+          : child,
+      ),
+    [childrenProp],
+  );
   return _react.createElement(
     _react1.Composite,
     {
@@ -480,7 +468,7 @@ const SelectListbox = _react.forwardRef((props, forwardedRef) => {
       onNavigate: setFocusedIndex,
       ref: (0, _index.useMergedRefs)(
         forwardedRef,
-        autoFocus ? autoFocusRef : undefined,
+        autoFocus ? autoFocusRef : void 0,
       ),
       ...rest,
     },

package/cjs/core/Select/Select.types-test.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', {
 const _react = require('react');
 const _Select = require('./Select.js');
 () => {
-  const ref = (0, _react.useRef)(null);
+  let ref = (0, _react.useRef)(null);
   return React.createElement(
     React.Fragment,
     null,
@@ -25,15 +25,15 @@ const _Select = require('./Select.js');
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
       ref: ref,
     }),
   );
 };
-() => {
-  return React.createElement(
+() =>
+  React.createElement(
     React.Fragment,
     null,
     React.createElement(_Select.Select, {
@@ -52,14 +52,13 @@ const _Select = require('./Select.js');
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
     }),
   );
-};
-() => {
-  return React.createElement(
+() =>
+  React.createElement(
     React.Fragment,
     null,
     React.createElement(_Select.Select, {
@@ -78,14 +77,13 @@ const _Select = require('./Select.js');
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
     }),
   );
-};
-() => {
-  return React.createElement(
+() =>
+  React.createElement(
     React.Fragment,
     null,
     React.createElement(_Select.Select, {
@@ -97,14 +95,13 @@ const _Select = require('./Select.js');
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
     }),
   );
-};
-() => {
-  return React.createElement(
+() =>
+  React.createElement(
     React.Fragment,
     null,
     React.createElement(_Select.Select, {
@@ -116,4 +113,3 @@ const _Select = require('./Select.js');
       options: [],
     }),
   );
-};

package/cjs/core/Select/SelectTag.js

@@ -14,7 +14,7 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const SelectTag = _react.forwardRef((props, forwardedRef) => {
-  const { className, label, ...rest } = props;
+  let { className, label, ...rest } = props;
   return _react.createElement(
     _index.Box,
     {

package/cjs/core/Select/SelectTagContainer.js

@@ -15,9 +15,9 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _SelectTag = require('./SelectTag.js');
 const SelectTagContainer = _react.forwardRef((props, ref) => {
-  const { tags, className, ...rest } = props;
-  const [containerRef, visibleCount] = (0, _index.useOverflow)(tags);
-  const refs = (0, _index.useMergedRefs)(ref, containerRef);
+  let { tags, className, ...rest } = props;
+  let [containerRef, visibleCount] = (0, _index.useOverflow)(tags);
+  let refs = (0, _index.useMergedRefs)(ref, containerRef);
   return _react.createElement(
     _index.Box,
     {

package/cjs/core/SideNavigation/SideNavigation.js

@@ -23,9 +23,9 @@ const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const _IconButton = require('../Buttons/IconButton.js');
-const SidenavExpandedContext = _react.createContext(undefined);
+const SidenavExpandedContext = _react.createContext(void 0);
 const SideNavigation = _react.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     items,
     secondaryItems,
     expanderPlacement = 'top',
@@ -40,11 +40,11 @@ const SideNavigation = _react.forwardRef((props, forwardedRef) => {
     bottomProps,
     ...rest
   } = props;
-  const [isExpanded, setIsExpanded] = (0, _index.useControlledState)(
+  let [isExpanded, setIsExpanded] = (0, _index.useControlledState)(
     false,
     isExpandedProp,
   );
-  const ExpandButton = _react.createElement(
+  let ExpandButton = _react.createElement(
     _IconButton.IconButton,
     {
       label: 'Toggle icon labels',
@@ -87,7 +87,7 @@ const SideNavigation = _react.forwardRef((props, forwardedRef) => {
           ),
           ...rest,
         },
-        expanderPlacement === 'top' && ExpandButton,
+        'top' === expanderPlacement && ExpandButton,
         _react.createElement(
           _index.Box,
           {
@@ -123,7 +123,7 @@ const SideNavigation = _react.forwardRef((props, forwardedRef) => {
             secondaryItems,
           ),
         ),
-        expanderPlacement === 'bottom' && ExpandButton,
+        'bottom' === expanderPlacement && ExpandButton,
       ),
       submenu &&
         _react.createElement(

package/cjs/core/SideNavigation/SidenavButton.js

@@ -16,7 +16,7 @@ const _Button = require('../Buttons/Button.js');
 const _Tooltip = require('../Tooltip/Tooltip.js');
 const _SideNavigation = require('./SideNavigation.js');
 const SidenavButton = _react.forwardRef((props, ref) => {
-  const {
+  let {
     className,
     children,
     isActive = false,
@@ -24,9 +24,9 @@ const SidenavButton = _react.forwardRef((props, ref) => {
     isSubmenuOpen = false,
     ...rest
   } = props;
-  const isExpanded =
-    _react.useContext(_SideNavigation.SidenavExpandedContext) === true;
-  const sidenavButton = _react.createElement(
+  let isExpanded =
+    true === _react.useContext(_SideNavigation.SidenavExpandedContext);
+  let sidenavButton = _react.createElement(
     _Button.Button,
     {
       className: (0, _classnames.default)(
@@ -44,8 +44,9 @@ const SidenavButton = _react.forwardRef((props, ref) => {
     },
     children,
   );
-  return !isExpanded
-    ? _react.createElement(
+  return isExpanded
+    ? sidenavButton
+    : _react.createElement(
         _Tooltip.Tooltip,
         {
           content: children,
@@ -53,6 +54,5 @@ const SidenavButton = _react.forwardRef((props, ref) => {
           ariaStrategy: 'none',
         },
         sidenavButton,
-      )
-    : sidenavButton;
+      );
 });

package/cjs/core/SideNavigation/SidenavSubmenu.js

@@ -14,7 +14,7 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const SidenavSubmenu = _react.forwardRef((props, ref) => {
-  const { children, className, ...rest } = props;
+  let { children, className, ...rest } = props;
   return _react.createElement(
     _index.Box,
     {

package/cjs/core/SideNavigation/SidenavSubmenuHeader.js

@@ -14,7 +14,7 @@ const _classnames = _interop_require_default._(require('classnames'));
 const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const SidenavSubmenuHeader = _react.forwardRef((props, forwardedRef) => {
-  const { children, actions, className, ...rest } = props;
+  let { children, actions, className, ...rest } = props;
   return _react.createElement(
     _index.Box,
     {

package/cjs/core/SkipToContentLink/SkipToContentLink.js

@@ -14,7 +14,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _classnames = _interop_require_default._(require('classnames'));
 const _index = require('../../utils/index.js');
 const SkipToContentLink = _react.forwardRef((props, ref) => {
-  const { children = 'Skip to main content', className, ...rest } = props;
+  let { children = 'Skip to main content', className, ...rest } = props;
   return _react.createElement(
     _index.Box,
     {