@itwin/itwinui-react 3.12.2 → 3.13.1

package/esm/core/ColorPicker/ColorPicker.js

@@ -3,13 +3,11 @@ import { ColorValue, useMergedRefs, Box } from '../../utils/index.js';
 import cx from 'classnames';
 import { ColorPickerContext } from './ColorPickerContext.js';
 export const getColorValue = (color) => {
-  if (color instanceof ColorValue) {
-    return color;
-  }
+  if (color instanceof ColorValue) return color;
   return ColorValue.create(color);
 };
 export const ColorPicker = React.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     children,
     className,
     selectedColor,
@@ -19,34 +17,29 @@ export const ColorPicker = React.forwardRef((props, forwardedRef) => {
     applyBackground = true,
     ...rest
   } = props;
-  const ref = React.useRef(null);
-  const inColor = React.useMemo(
+  let ref = React.useRef(null);
+  let inColor = React.useMemo(
     () => getColorValue(selectedColor),
     [selectedColor],
   );
-  const activeColorTbgr = React.useRef(inColor.toTbgr());
-  const [activeColor, setActiveColor] = React.useState(inColor);
+  let activeColorTbgr = React.useRef(inColor.toTbgr());
+  let [activeColor, setActiveColor] = React.useState(inColor);
   React.useEffect(() => {
     setActiveColor(inColor);
   }, [inColor]);
-  const [hsvColor, setHsvColor] = React.useState(() =>
-    activeColor.toHsvColor(),
-  );
+  let [hsvColor, setHsvColor] = React.useState(() => activeColor.toHsvColor());
   React.useEffect(() => {
     if (inColor.toTbgr() !== activeColorTbgr.current) {
       activeColorTbgr.current = inColor.toTbgr();
       setHsvColor(inColor.toHsvColor());
     }
   }, [inColor]);
-  const applyHsvColorChange = React.useCallback(
+  let applyHsvColorChange = React.useCallback(
     (newColor, selectionChanged, newColorValue) => {
       setHsvColor(newColor);
-      const newActiveColor = newColorValue ?? ColorValue.create(newColor);
-      if (selectionChanged) {
-        onChangeComplete?.(newActiveColor);
-      } else {
-        onChange?.(newActiveColor);
-      }
+      let newActiveColor = newColorValue ?? ColorValue.create(newColor);
+      if (selectionChanged) onChangeComplete?.(newActiveColor);
+      else onChange?.(newActiveColor);
       activeColorTbgr.current = newActiveColor.toTbgr();
       setActiveColor(newActiveColor);
     },

package/esm/core/ColorPicker/ColorPickerContext.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
-export const ColorPickerContext = React.createContext(undefined);
+export const ColorPickerContext = React.createContext(void 0);
 export const useColorPickerContext = () => {
-  const context = React.useContext(ColorPickerContext);
-  if (context == undefined) {
+  let context = React.useContext(ColorPickerContext);
+  if (void 0 == context)
     throw new Error(
       'useColorPickerContext must be used within a ColorPickerContext.Provider',
     );
-  }
   return context;
 };

package/esm/core/ColorPicker/ColorSwatch.js

@@ -4,18 +4,16 @@ import { Box, ButtonBase } from '../../utils/index.js';
 import { getColorValue } from './ColorPicker.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 export const ColorSwatch = React.forwardRef((props, ref) => {
-  const { color, style, onClick, isActive, className, ...rest } = props;
-  const colorString = React.useMemo(
+  let { color, style, onClick, isActive, className, ...rest } = props;
+  let colorString = React.useMemo(
     () =>
-      typeof color === 'string'
-        ? color
-        : getColorValue(color).toHslString(true),
+      'string' == typeof color ? color : getColorValue(color).toHslString(true),
     [color],
   );
   return React.createElement(
     Box,
     {
-      as: !!onClick ? ButtonBase : 'span',
+      as: onClick ? ButtonBase : 'span',
       className: cx(
         'iui-color-swatch',
         {
@@ -28,7 +26,7 @@ export const ColorSwatch = React.forwardRef((props, ref) => {
         ...style,
       },
       onClick: onClick,
-      'aria-pressed': !!onClick && isActive ? 'true' : undefined,
+      'aria-pressed': !!onClick && isActive ? 'true' : void 0,
       ref: ref,
       ...rest,
     },

package/esm/core/ComboBox/ComboBox.js

@@ -17,26 +17,21 @@ import { ComboBoxInput } from './ComboBoxInput.js';
 import { ComboBoxInputContainer } from './ComboBoxInputContainer.js';
 import { ComboBoxMenu } from './ComboBoxMenu.js';
 import { ComboBoxMenuItem } from './ComboBoxMenuItem.js';
-const isMultipleEnabled = (variable, multiple) => {
-  return (
-    multiple &&
-    (Array.isArray(variable) || variable === null || variable === undefined)
-  );
-};
-const isSingleOnChange = (onChange, multiple) => {
-  return !multiple;
-};
-const getOptionId = (option, idPrefix) => {
-  return option.id ?? `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
-};
+let isMultipleEnabled = (variable, multiple) =>
+  multiple && (Array.isArray(variable) || null == variable);
+let isSingleOnChange = (onChange, multiple) => !multiple;
+let getOptionId = (option, idPrefix) =>
+  option.id ?? `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
 export const ComboBox = React.forwardRef((props, forwardedRef) => {
-  const idPrefix = useId();
-  const defaultFilterFunction = React.useCallback((options, inputValue) => {
-    return options.filter((option) =>
-      option.label.toLowerCase().includes(inputValue.toLowerCase()),
-    );
-  }, []);
-  const {
+  let idPrefix = useId();
+  let defaultFilterFunction = React.useCallback(
+    (options, inputValue) =>
+      options.filter((option) =>
+        option.label.toLowerCase().includes(inputValue.toLowerCase()),
+      ),
+    [],
+  );
+  let {
     options,
     value: valueProp,
     onChange,
@@ -54,13 +49,13 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
     defaultValue,
     ...rest
   } = props;
-  const inputRef = React.useRef(null);
-  const menuRef = React.useRef(null);
-  const onChangeProp = useLatestRef(onChange);
-  const optionsRef = useLatestRef(options);
-  const filterFunctionRef = useLatestRef(filterFunction);
-  const optionsExtraInfo = React.useMemo(() => {
-    const newOptionsExtraInfo = {};
+  let inputRef = React.useRef(null);
+  let menuRef = React.useRef(null);
+  let onChangeProp = useLatestRef(onChange);
+  let optionsRef = useLatestRef(options);
+  let filterFunctionRef = useLatestRef(filterFunction);
+  let optionsExtraInfo = React.useMemo(() => {
+    let newOptionsExtraInfo = {};
     options.forEach((option, index) => {
       newOptionsExtraInfo[getOptionId(option, id)] = {
         __originalIndex: index,
@@ -68,145 +63,121 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
     });
     return newOptionsExtraInfo;
   }, [id, options]);
-  const getSelectedIndexes = React.useCallback(
+  let getSelectedIndexes = React.useCallback(
     (value) => {
-      if (value === undefined) {
-        return undefined;
-      }
+      if (void 0 === value) return;
       if (isMultipleEnabled(value, multiple)) {
-        const indexArray = [];
+        let indexArray = [];
         value?.forEach((value) => {
-          const indexToAdd = options.findIndex(
+          let indexToAdd = options.findIndex(
             (option) => option.value === value,
           );
-          if (indexToAdd > -1) {
-            indexArray.push(indexToAdd);
-          }
+          if (indexToAdd > -1) indexArray.push(indexToAdd);
         });
         return indexArray;
-      } else {
-        return options.findIndex((option) => option.value === value);
       }
+      return options.findIndex((option) => option.value === value);
     },
     [multiple, options],
   );
-  const [selectedIndexes, setSelectedIndexes] = useControlledState(
+  let [selectedIndexes, setSelectedIndexes] = useControlledState(
     getSelectedIndexes(defaultValue) ?? (multiple ? [] : -1),
     getSelectedIndexes(valueProp),
   );
-  const previousValue = React.useRef(valueProp);
+  let previousValue = React.useRef(valueProp);
   useLayoutEffect(() => {
     if (valueProp !== previousValue.current) {
       previousValue.current = valueProp;
-      if (valueProp === undefined) {
-        if (isMultipleEnabled(selectedIndexes, multiple)) {
-          setSelectedIndexes([]);
-        } else {
-          setSelectedIndexes(-1);
-        }
-      }
+      if (void 0 === valueProp)
+        isMultipleEnabled(selectedIndexes, multiple)
+          ? setSelectedIndexes([])
+          : setSelectedIndexes(-1);
     }
   }, [multiple, selectedIndexes, setSelectedIndexes, valueProp]);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [focusedIndex, setFocusedIndex] = React.useState(-1);
-  const onShowRef = useLatestRef(onShowProp);
-  const onHideRef = useLatestRef(onHideProp);
-  const show = React.useCallback(() => {
+  let [isOpen, setIsOpen] = React.useState(false);
+  let [focusedIndex, setFocusedIndex] = React.useState(-1);
+  let onShowRef = useLatestRef(onShowProp);
+  let onHideRef = useLatestRef(onHideProp);
+  let show = React.useCallback(() => {
     setIsOpen(true);
     onShowRef.current?.();
   }, [onShowRef]);
-  const hide = React.useCallback(() => {
+  let hide = React.useCallback(() => {
     setIsOpen(false);
     onHideRef.current?.();
   }, [onHideRef]);
   useLayoutEffect(() => {
     if (isOpen) {
       inputRef.current?.focus();
-      if (!isMultipleEnabled(selectedIndexes, multiple)) {
+      if (!isMultipleEnabled(selectedIndexes, multiple))
         setFocusedIndex(selectedIndexes ?? -1);
-      }
     } else {
       setFocusedIndex(-1);
-      if (!isMultipleEnabled(selectedIndexes, multiple)) {
+      if (!isMultipleEnabled(selectedIndexes, multiple))
         setInputValue(
           selectedIndexes >= 0
             ? optionsRef.current[selectedIndexes]?.label ?? ''
             : '',
         );
-      }
     }
   }, [isOpen, multiple, optionsRef, selectedIndexes]);
-  const previousOptions = React.useRef(options);
+  let previousOptions = React.useRef(options);
   React.useEffect(() => {
     if (options !== previousOptions.current) {
       previousOptions.current = options;
       onOptionsChange();
     }
     function onOptionsChange() {
-      if (!isMultipleEnabled(selectedIndexes, multiple)) {
-        setFocusedIndex(selectedIndexes);
-      } else {
-        setFocusedIndex(-1);
-      }
-      if (!isMultipleEnabled(selectedIndexes, multiple) && !isOpen) {
+      isMultipleEnabled(selectedIndexes, multiple)
+        ? setFocusedIndex(-1)
+        : setFocusedIndex(selectedIndexes);
+      if (!isMultipleEnabled(selectedIndexes, multiple) && !isOpen)
         setInputValue(
           selectedIndexes >= 0 ? options[selectedIndexes]?.label : '',
         );
-      }
     }
   }, [options, isOpen, multiple, selectedIndexes]);
-  const [inputValue, setInputValue] = React.useState(
+  let [inputValue, setInputValue] = React.useState(
     inputProps?.value?.toString() ?? '',
   );
-  const [isInputDirty, setIsInputDirty] = React.useState(false);
-  const filteredOptions = React.useMemo(() => {
-    if (!isInputDirty) {
-      return options;
-    }
+  let [isInputDirty, setIsInputDirty] = React.useState(false);
+  let filteredOptions = React.useMemo(() => {
+    if (!isInputDirty) return options;
     return filterFunctionRef.current?.(options, inputValue);
   }, [filterFunctionRef, inputValue, options, isInputDirty]);
-  const [liveRegionSelection, setLiveRegionSelection] = React.useState('');
-  const handleOnInput = React.useCallback(
+  let [liveRegionSelection, setLiveRegionSelection] = React.useState('');
+  let handleOnInput = React.useCallback(
     (event) => {
-      const { value } = event.currentTarget;
+      let { value } = event.currentTarget;
       setInputValue(value);
       show();
       setIsInputDirty(true);
-      if (focusedIndex != -1) {
-        setFocusedIndex(-1);
-      }
+      if (-1 != focusedIndex) setFocusedIndex(-1);
       inputProps?.onChange?.(event);
     },
     [focusedIndex, inputProps, show],
   );
-  const isMenuItemSelected = React.useCallback(
+  let isMenuItemSelected = React.useCallback(
     (index) => {
-      if (isMultipleEnabled(selectedIndexes, multiple)) {
+      if (isMultipleEnabled(selectedIndexes, multiple))
         return selectedIndexes.includes(index);
-      } else {
-        return selectedIndexes === index;
-      }
+      return selectedIndexes === index;
     },
     [multiple, selectedIndexes],
   );
-  const selectedChangeHandler = React.useCallback(
+  let selectedChangeHandler = React.useCallback(
     (__originalIndex, action) => {
-      if (!isMultipleEnabled(selectedIndexes, multiple)) {
-        return;
-      }
-      if (action === 'added') {
-        return [...selectedIndexes, __originalIndex];
-      } else {
-        return selectedIndexes?.filter((index) => index !== __originalIndex);
-      }
+      if (!isMultipleEnabled(selectedIndexes, multiple)) return;
+      if ('added' === action) return [...selectedIndexes, __originalIndex];
+      return selectedIndexes?.filter((index) => index !== __originalIndex);
     },
     [selectedIndexes, multiple],
   );
-  const onChangeHandler = React.useCallback(
+  let onChangeHandler = React.useCallback(
     (__originalIndex, actionType, newSelectedIndexes) => {
-      if (isSingleOnChange(onChangeProp.current, multiple)) {
+      if (isSingleOnChange(onChangeProp.current, multiple))
         onChangeProp.current?.(optionsRef.current[__originalIndex]?.value);
-      } else {
+      else
         actionType &&
           newSelectedIndexes &&
           onChangeProp.current?.(
@@ -218,30 +189,25 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
               type: actionType,
             },
           );
-      }
     },
     [multiple, onChangeProp, optionsRef],
   );
-  const onClickHandler = React.useCallback(
+  let onClickHandler = React.useCallback(
     (__originalIndex) => {
       inputRef.current?.focus({
         preventScroll: true,
       });
-      if (optionsRef.current[__originalIndex]?.disabled) {
-        return;
-      }
+      if (optionsRef.current[__originalIndex]?.disabled) return;
       setIsInputDirty(false);
       if (multiple) {
-        const actionType = isMenuItemSelected(__originalIndex)
+        let actionType = isMenuItemSelected(__originalIndex)
           ? 'removed'
           : 'added';
-        const newSelectedIndexes = selectedChangeHandler(
+        let newSelectedIndexes = selectedChangeHandler(
           __originalIndex,
           actionType,
         );
-        if (newSelectedIndexes == null) {
-          return;
-        }
+        if (null == newSelectedIndexes) return;
         setSelectedIndexes(newSelectedIndexes);
         onChangeHandler(__originalIndex, actionType, newSelectedIndexes);
         setLiveRegionSelection(
@@ -266,13 +232,13 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
       setSelectedIndexes,
     ],
   );
-  const getMenuItem = React.useCallback(
+  let getMenuItem = React.useCallback(
     (option, filteredIndex) => {
-      const optionId = getOptionId(option, id);
-      const { __originalIndex } = optionsExtraInfo[optionId];
-      const { icon, startIcon: startIconProp, label, ...restOptions } = option;
-      const startIcon = startIconProp ?? icon;
-      const customItem = itemRenderer
+      let optionId = getOptionId(option, id);
+      let { __originalIndex } = optionsExtraInfo[optionId];
+      let { icon, startIcon: startIconProp, label, ...restOptions } = option;
+      let startIcon = startIconProp ?? icon;
+      let customItem = itemRenderer
         ? itemRenderer(option, {
             isFocused: focusedIndex === __originalIndex,
             isSelected: isMenuItemSelected(__originalIndex),
@@ -290,11 +256,10 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
             'data-iui-index': __originalIndex,
             'data-iui-filtered-index': filteredIndex,
             ref: mergeRefs(customItem.props.ref, (el) => {
-              if (!enableVirtualization && focusedIndex === __originalIndex) {
+              if (!enableVirtualization && focusedIndex === __originalIndex)
                 el?.scrollIntoView({
                   block: 'nearest',
                 });
-              }
             }),
           })
         : React.createElement(
@@ -324,7 +289,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
       optionsExtraInfo,
     ],
   );
-  const emptyContent = React.useMemo(
+  let emptyContent = React.useMemo(
     () =>
       React.createElement(
         React.Fragment,
@@ -345,7 +310,7 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
       ),
     [emptyStateMessage],
   );
-  const popover = usePopover({
+  let popover = usePopover({
     visible: isOpen,
     onVisibleChange: (open) => (open ? show() : hide()),
     matchWidth: true,
@@ -400,14 +365,14 @@ export const ComboBox = React.forwardRef((props, forwardedRef) => {
             selectTags: isMultipleEnabled(selectedIndexes, multiple)
               ? selectedIndexes
                   ?.map((index) => {
-                    const item = options[index];
+                    let item = options[index];
                     return React.createElement(SelectTag, {
                       key: item.label,
                       label: item.label,
                     });
                   })
                   .filter(Boolean)
-              : undefined,
+              : void 0,
           }),
         ),
         React.createElement(ComboBoxEndIcon, {

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

@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 import { ComboBox } from './ComboBox.js';
 () => {
-  const ref = useRef(null);
+  let ref = useRef(null);
   return React.createElement(ComboBox, {
     options: [
       {
@@ -18,14 +18,14 @@ import { ComboBox } from './ComboBox.js';
       },
     ],
     onChange: (value) => {
-      const returnValue = value;
+      let returnValue = value;
       return returnValue;
     },
     ref: ref,
   });
 };
-() => {
-  return React.createElement(ComboBox, {
+() =>
+  React.createElement(ComboBox, {
     options: [
       {
         label: 'Item 1',
@@ -41,35 +41,33 @@ import { ComboBox } from './ComboBox.js';
       },
     ],
     onChange: (value) => {
-      const returnValue = value;
+      let returnValue = value;
       return returnValue;
     },
   });
-};
-() => {
-  return React.createElement(ComboBox, {
+() =>
+  React.createElement(ComboBox, {
     options: [
       {
         label: 'Item 1',
-        value: `1`,
+        value: '1',
       },
       {
         label: 'Item 2',
-        value: `2`,
+        value: '2',
       },
       {
         label: 'Item 3',
-        value: `3`,
+        value: '3',
       },
     ],
     onChange: (value) => {
-      const returnValue = value;
+      let returnValue = value;
       return returnValue;
     },
   });
-};
-() => {
-  return React.createElement(
+() =>
+  React.createElement(
     React.Fragment,
     null,
     React.createElement(ComboBox, {
@@ -80,9 +78,8 @@ import { ComboBox } from './ComboBox.js';
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
     }),
   );
-};

package/esm/core/ComboBox/ComboBoxEndIcon.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { SvgCaretDownSmall } from '../../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
 export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
-  const { className, children, disabled, isOpen, ...rest } = props;
+  let { className, children, disabled, isOpen, ...rest } = props;
   return React.createElement(
     Icon,
     {
@@ -25,4 +25,3 @@ export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
       }),
   );
 });
-ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';