@itwin/itwinui-react 3.12.2 → 3.13.0

package/esm/core/SearchBox/SearchBox.js

@@ -12,9 +12,9 @@ import {
   InputFlexContainerIcon,
   InputFlexContainerButton,
 } from '../../utils/index.js';
-const SearchBoxContext = React.createContext(undefined);
-const SearchBoxComponent = React.forwardRef((props, ref) => {
-  const {
+let SearchBoxContext = React.createContext(void 0);
+let SearchBoxComponent = React.forwardRef((props, ref) => {
+  let {
     size,
     expandable = false,
     isDisabled = false,
@@ -26,13 +26,13 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
     className,
     ...rest
   } = props;
-  const uid = useId();
-  const [inputId, setInputId] = React.useState(uid);
-  const inputRef = React.useRef(null);
-  const openButtonRef = React.useRef(null);
-  const [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
-  const isExpanded = isExpandedProp ?? localExpanded;
-  const onCollapse = () => {
+  let uid = useId();
+  let [inputId, setInputId] = React.useState(uid);
+  let inputRef = React.useRef(null);
+  let openButtonRef = React.useRef(null);
+  let [localExpanded, setLocalExpanded] = React.useState(isExpandedProp);
+  let isExpanded = isExpandedProp ?? localExpanded;
+  let onCollapse = () => {
     setLocalExpanded(false);
     onCollapseProp?.();
     queueMicrotask(() =>
@@ -41,7 +41,7 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
       }),
     );
   };
-  const onExpand = () => {
+  let onExpand = () => {
     setLocalExpanded(true);
     onExpandProp?.();
     queueMicrotask(() =>
@@ -104,28 +104,22 @@ const SearchBoxComponent = React.forwardRef((props, ref) => {
     ),
   );
 });
-const SearchBoxCollapsedState = ({ children }) => {
-  const { isExpanded, expandable } = useSafeContext(SearchBoxContext);
-  if (!expandable || isExpanded) {
-    return null;
-  }
+let SearchBoxCollapsedState = ({ children }) => {
+  let { isExpanded, expandable } = useSafeContext(SearchBoxContext);
+  if (!expandable || isExpanded) return null;
   return React.createElement(
     React.Fragment,
     null,
     children ?? React.createElement(SearchBoxExpandButton, null),
   );
 };
-SearchBoxCollapsedState.displayName = 'SearchBox.CollapsedState';
-const SearchBoxExpandedState = ({ children }) => {
-  const { isExpanded, expandable } = useSafeContext(SearchBoxContext);
-  if (expandable && !isExpanded) {
-    return null;
-  }
+let SearchBoxExpandedState = ({ children }) => {
+  let { isExpanded, expandable } = useSafeContext(SearchBoxContext);
+  if (expandable && !isExpanded) return null;
   return React.createElement(React.Fragment, null, children);
 };
-SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
-const SearchBoxIcon = React.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
+let SearchBoxIcon = React.forwardRef((props, ref) => {
+  let { className, children, ...rest } = props;
   return React.createElement(
     InputFlexContainerIcon,
     {
@@ -137,15 +131,12 @@ const SearchBoxIcon = React.forwardRef((props, ref) => {
     children ?? React.createElement(SvgSearch, null),
   );
 });
-SearchBoxIcon.displayName = 'SearchBox.Icon';
-const SearchBoxInput = React.forwardRef((props, ref) => {
-  const { className, id: idProp, ...rest } = props;
-  const { inputId, setInputId, isDisabled, inputRef } =
+let SearchBoxInput = React.forwardRef((props, ref) => {
+  let { className, id: idProp, ...rest } = props;
+  let { inputId, setInputId, isDisabled, inputRef } =
     useSafeContext(SearchBoxContext);
   React.useEffect(() => {
-    if (idProp && idProp !== inputId) {
-      setInputId(idProp);
-    }
+    if (idProp && idProp !== inputId) setInputId(idProp);
   }, [idProp, inputId, setInputId]);
   return React.createElement(Box, {
     as: 'input',
@@ -158,10 +149,9 @@ const SearchBoxInput = React.forwardRef((props, ref) => {
     ...rest,
   });
 });
-SearchBoxInput.displayName = 'SearchBox.Input';
-const SearchBoxButton = React.forwardRef((props, ref) => {
-  const { children, ...rest } = props;
-  const { size: sizeContext, isDisabled } = useSafeContext(SearchBoxContext);
+let SearchBoxButton = React.forwardRef((props, ref) => {
+  let { children, ...rest } = props;
+  let { size: sizeContext, isDisabled } = useSafeContext(SearchBoxContext);
   return React.createElement(
     InputFlexContainerButton,
     {
@@ -173,10 +163,9 @@ const SearchBoxButton = React.forwardRef((props, ref) => {
     children ?? React.createElement(SvgSearch, null),
   );
 });
-SearchBoxButton.displayName = 'SearchBox.Button';
-const SearchBoxCollapseButton = React.forwardRef((props, ref) => {
-  const { children, onClick: onClickProp, ...rest } = props;
-  const {
+let SearchBoxCollapseButton = React.forwardRef((props, ref) => {
+  let { children, onClick: onClickProp, ...rest } = props;
+  let {
     onCollapse,
     size: sizeContext,
     isDisabled,
@@ -194,10 +183,9 @@ const SearchBoxCollapseButton = React.forwardRef((props, ref) => {
     children ?? React.createElement(SvgCloseSmall, null),
   );
 });
-SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
-const SearchBoxExpandButton = React.forwardRef((props, ref) => {
-  const { children, onClick: onClickProp, ...rest } = props;
-  const {
+let SearchBoxExpandButton = React.forwardRef((props, ref) => {
+  let { children, onClick: onClickProp, ...rest } = props;
+  let {
     onExpand,
     size: sizeContext,
     isDisabled,
@@ -217,7 +205,6 @@ const SearchBoxExpandButton = React.forwardRef((props, ref) => {
     children ?? React.createElement(SvgSearch, null),
   );
 });
-SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
 export const SearchBox = Object.assign(SearchBoxComponent, {
   Icon: SearchBoxIcon,
   Input: SearchBoxInput,
@@ -227,4 +214,3 @@ export const SearchBox = Object.assign(SearchBoxComponent, {
   ExpandedState: SearchBoxExpandedState,
   CollapsedState: SearchBoxCollapsedState,
 });
-SearchBox.displayName = 'SearchBox';

package/esm/core/Select/Select.js

@@ -20,20 +20,20 @@ import { usePopover } from '../Popover/Popover.js';
 import { List } from '../List/List.js';
 import { Composite, CompositeItem } from '@floating-ui/react';
 export 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 NativeSelect = React.forwardRef((props, forwardedRef) => {
+  let {
     triggerProps,
     options,
     disabled,
     placeholder,
-    defaultValue: defaultValueProp = placeholder !== undefined ? '' : undefined,
+    defaultValue: defaultValueProp = void 0 !== placeholder ? '' : void 0,
     value: valueProp,
     onChange: onChangeProp,
     size,
@@ -56,20 +56,18 @@ 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: mergeEventHandlers(triggerProps?.onKeyDown, (event) => {
-          if (event.key === 'Enter') {
-            event.currentTarget.showPicker?.();
-          }
+          if ('Enter' === event.key) event.currentTarget.showPicker?.();
         }),
         onChange: mergeEventHandlers(triggerProps?.onChange, (event) => {
           onChangeProp?.(event.currentTarget.value, event);
         }),
       },
-      styleType !== 'borderless' && placeholder !== undefined
+      'borderless' !== styleType && void 0 !== placeholder
         ? React.createElement(
             'option',
             {
@@ -95,9 +93,9 @@ const NativeSelect = React.forwardRef((props, forwardedRef) => {
     }),
   );
 });
-const CustomSelect = React.forwardRef((props, forwardedRef) => {
-  const uid = useId();
-  const {
+let CustomSelect = React.forwardRef((props, forwardedRef) => {
+  let uid = useId();
+  let {
     options,
     value: valueProp,
     onChange: onChangeProp,
@@ -115,118 +113,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 = 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 = 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, 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,
+  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, 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(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, {
-      key: item.label,
-      label: item.label,
-    });
-  }, []);
-  const popover = usePopover({
+  let tagRenderer = React.useCallback(
+    (item) =>
+      React.createElement(SelectTag, {
+        key: item.label,
+        label: item.label,
+      }),
+    [],
+  );
+  let popover = usePopover({
     visible: isOpen,
     matchWidth: true,
     closeOnOutsideClick: true,
@@ -250,8 +244,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',
@@ -266,12 +260,12 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
           className: cx(
             {
               'iui-placeholder':
-                (!selectedItems || selectedItems.length === 0) && !!placeholder,
+                (!selectedItems || 0 === selectedItems.length) && !!placeholder,
             },
             triggerProps?.className,
           ),
         },
-        (!selectedItems || selectedItems.length === 0) &&
+        (!selectedItems || 0 === selectedItems.length) &&
           React.createElement(
             Box,
             {
@@ -315,9 +309,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,
@@ -327,25 +319,21 @@ const CustomSelect = React.forwardRef((props, forwardedRef) => {
       ),
   );
 });
-const isMultipleEnabled = (variable, multiple) => {
-  return multiple;
-};
-const isSingleOnChange = (onChange, multiple) => {
-  return !multiple;
-};
-const SelectButton = React.forwardRef((props, forwardedRef) => {
-  const { size, status, styleType = 'default', ...rest } = props;
+let isMultipleEnabled = (variable, multiple) => multiple;
+let isSingleOnChange = (onChange, multiple) => !multiple;
+let SelectButton = React.forwardRef((props, forwardedRef) => {
+  let { size, status, styleType = 'default', ...rest } = props;
   return React.createElement(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: cx('iui-select-button', 'iui-field', props.className),
   });
 });
-const SelectEndIcon = React.forwardRef((props, forwardedRef) => {
-  const { disabled, isOpen, ...rest } = props;
+let SelectEndIcon = React.forwardRef((props, forwardedRef) => {
+  let { disabled, isOpen, ...rest } = props;
   return React.createElement(
     Icon,
     {
@@ -364,8 +352,8 @@ const SelectEndIcon = React.forwardRef((props, forwardedRef) => {
     React.createElement(SvgCaretDownSmall, null),
   );
 });
-const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
-  const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
+let SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
+  let startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
   return React.createElement(
     React.Fragment,
     null,
@@ -396,15 +384,13 @@ const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
       ),
   );
 };
-const MultipleSelectButton = ({
+let MultipleSelectButton = ({
   selectedItems,
   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(
@@ -427,32 +413,34 @@ const MultipleSelectButton = ({
       ),
   );
 };
-const SelectListbox = React.forwardRef((props, forwardedRef) => {
-  const {
+let SelectListbox = React.forwardRef((props, forwardedRef) => {
+  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(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(CompositeItem, {
+              key: index,
+              render: child,
+              ref: child.props.ref || child.ref,
+            })
+          : child,
+      ),
+    [childrenProp],
+  );
   return React.createElement(
     Composite,
     {
@@ -464,7 +452,7 @@ const SelectListbox = React.forwardRef((props, forwardedRef) => {
       role: 'listbox',
       activeIndex: focusedIndex,
       onNavigate: setFocusedIndex,
-      ref: useMergedRefs(forwardedRef, autoFocus ? autoFocusRef : undefined),
+      ref: useMergedRefs(forwardedRef, autoFocus ? autoFocusRef : void 0),
       ...rest,
     },
     children,

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

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { Select } from './Select.js';
 () => {
-  const ref = useRef(null);
+  let ref = useRef(null);
   return React.createElement(
     React.Fragment,
     null,
@@ -21,15 +21,15 @@ import { Select } from './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, {
@@ -48,14 +48,13 @@ import { Select } from './Select.js';
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
     }),
   );
-};
-() => {
-  return React.createElement(
+() =>
+  React.createElement(
     React.Fragment,
     null,
     React.createElement(Select, {
@@ -74,14 +73,13 @@ import { Select } from './Select.js';
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
     }),
   );
-};
-() => {
-  return React.createElement(
+() =>
+  React.createElement(
     React.Fragment,
     null,
     React.createElement(Select, {
@@ -93,14 +91,13 @@ import { Select } from './Select.js';
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
     }),
   );
-};
-() => {
-  return React.createElement(
+() =>
+  React.createElement(
     React.Fragment,
     null,
     React.createElement(Select, {
@@ -112,4 +109,3 @@ import { Select } from './Select.js';
       options: [],
     }),
   );
-};