@itwin/itwinui-react 3.12.2 → 3.13.0

package/cjs/core/ColorPicker/ColorPicker.js

@@ -24,13 +24,11 @@ const _index = require('../../utils/index.js');
 const _classnames = _interop_require_default._(require('classnames'));
 const _ColorPickerContext = require('./ColorPickerContext.js');
 const getColorValue = (color) => {
-  if (color instanceof _index.ColorValue) {
-    return color;
-  }
+  if (color instanceof _index.ColorValue) return color;
   return _index.ColorValue.create(color);
 };
 const ColorPicker = _react.forwardRef((props, forwardedRef) => {
-  const {
+  let {
     children,
     className,
     selectedColor,
@@ -40,35 +38,29 @@ 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 ?? _index.ColorValue.create(newColor);
-      if (selectionChanged) {
-        onChangeComplete?.(newActiveColor);
-      } else {
-        onChange?.(newActiveColor);
-      }
+      let newActiveColor = newColorValue ?? _index.ColorValue.create(newColor);
+      if (selectionChanged) onChangeComplete?.(newActiveColor);
+      else onChange?.(newActiveColor);
       activeColorTbgr.current = newActiveColor.toTbgr();
       setActiveColor(newActiveColor);
     },

package/cjs/core/ColorPicker/ColorPickerContext.js

@@ -19,13 +19,12 @@ _export(exports, {
 });
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = _interop_require_wildcard._(require('react'));
-const ColorPickerContext = _react.createContext(undefined);
+const ColorPickerContext = _react.createContext(void 0);
 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/cjs/core/ColorPicker/ColorSwatch.js

@@ -16,10 +16,10 @@ const _index = require('../../utils/index.js');
 const _ColorPicker = require('./ColorPicker.js');
 const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
 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'
+      'string' == typeof color
         ? color
         : (0, _ColorPicker.getColorValue)(color).toHslString(true),
     [color],
@@ -27,7 +27,7 @@ const ColorSwatch = _react.forwardRef((props, ref) => {
   return _react.createElement(
     _index.Box,
     {
-      as: !!onClick ? _index.ButtonBase : 'span',
+      as: onClick ? _index.ButtonBase : 'span',
       className: (0, _classnames.default)(
         'iui-color-swatch',
         {
@@ -40,7 +40,7 @@ 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/cjs/core/ComboBox/ComboBox.js

@@ -21,26 +21,21 @@ const _ComboBoxInput = require('./ComboBoxInput.js');
 const _ComboBoxInputContainer = require('./ComboBoxInputContainer.js');
 const _ComboBoxMenu = require('./ComboBoxMenu.js');
 const _ComboBoxMenuItem = require('./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, '-')}`;
-};
+const isMultipleEnabled = (variable, multiple) =>
+  multiple && (Array.isArray(variable) || null == variable);
+const isSingleOnChange = (onChange, multiple) => !multiple;
+const getOptionId = (option, idPrefix) =>
+  option.id ?? `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
 const ComboBox = _react.forwardRef((props, forwardedRef) => {
-  const idPrefix = (0, _index.useId)();
-  const defaultFilterFunction = _react.useCallback((options, inputValue) => {
-    return options.filter((option) =>
-      option.label.toLowerCase().includes(inputValue.toLowerCase()),
-    );
-  }, []);
-  const {
+  let idPrefix = (0, _index.useId)();
+  let defaultFilterFunction = _react.useCallback(
+    (options, inputValue) =>
+      options.filter((option) =>
+        option.label.toLowerCase().includes(inputValue.toLowerCase()),
+      ),
+    [],
+  );
+  let {
     options,
     value: valueProp,
     onChange,
@@ -58,13 +53,13 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
     defaultValue,
     ...rest
   } = props;
-  const inputRef = _react.useRef(null);
-  const menuRef = _react.useRef(null);
-  const onChangeProp = (0, _index.useLatestRef)(onChange);
-  const optionsRef = (0, _index.useLatestRef)(options);
-  const filterFunctionRef = (0, _index.useLatestRef)(filterFunction);
-  const optionsExtraInfo = _react.useMemo(() => {
-    const newOptionsExtraInfo = {};
+  let inputRef = _react.useRef(null);
+  let menuRef = _react.useRef(null);
+  let onChangeProp = (0, _index.useLatestRef)(onChange);
+  let optionsRef = (0, _index.useLatestRef)(options);
+  let filterFunctionRef = (0, _index.useLatestRef)(filterFunction);
+  let optionsExtraInfo = _react.useMemo(() => {
+    let newOptionsExtraInfo = {};
     options.forEach((option, index) => {
       newOptionsExtraInfo[getOptionId(option, id)] = {
         __originalIndex: index,
@@ -72,145 +67,121 @@ 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] = (0, _index.useControlledState)(
+  let [selectedIndexes, setSelectedIndexes] = (0, _index.useControlledState)(
     getSelectedIndexes(defaultValue) ?? (multiple ? [] : -1),
     getSelectedIndexes(valueProp),
   );
-  const previousValue = _react.useRef(valueProp);
+  let previousValue = _react.useRef(valueProp);
   (0, _index.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 = (0, _index.useLatestRef)(onShowProp);
-  const onHideRef = (0, _index.useLatestRef)(onHideProp);
-  const show = _react.useCallback(() => {
+  let [isOpen, setIsOpen] = _react.useState(false);
+  let [focusedIndex, setFocusedIndex] = _react.useState(-1);
+  let onShowRef = (0, _index.useLatestRef)(onShowProp);
+  let onHideRef = (0, _index.useLatestRef)(onHideProp);
+  let show = _react.useCallback(() => {
     setIsOpen(true);
     onShowRef.current?.();
   }, [onShowRef]);
-  const hide = _react.useCallback(() => {
+  let hide = _react.useCallback(() => {
     setIsOpen(false);
     onHideRef.current?.();
   }, [onHideRef]);
   (0, _index.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?.(
@@ -222,30 +193,25 @@ 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(
@@ -270,13 +236,13 @@ 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),
@@ -294,11 +260,10 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
             'data-iui-index': __originalIndex,
             'data-iui-filtered-index': filteredIndex,
             ref: (0, _index.mergeRefs)(customItem.props.ref, (el) => {
-              if (!enableVirtualization && focusedIndex === __originalIndex) {
+              if (!enableVirtualization && focusedIndex === __originalIndex)
                 el?.scrollIntoView({
                   block: 'nearest',
                 });
-              }
             }),
           })
         : _react.createElement(
@@ -328,7 +293,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
       optionsExtraInfo,
     ],
   );
-  const emptyContent = _react.useMemo(
+  let emptyContent = _react.useMemo(
     () =>
       _react.createElement(
         _react.Fragment,
@@ -349,7 +314,7 @@ const ComboBox = _react.forwardRef((props, forwardedRef) => {
       ),
     [emptyStateMessage],
   );
-  const popover = (0, _Popover.usePopover)({
+  let popover = (0, _Popover.usePopover)({
     visible: isOpen,
     onVisibleChange: (open) => (open ? show() : hide()),
     matchWidth: true,
@@ -404,14 +369,14 @@ 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.SelectTag, {
                       key: item.label,
                       label: item.label,
                     });
                   })
                   .filter(Boolean)
-              : undefined,
+              : void 0,
           }),
         ),
         _react.createElement(_ComboBoxEndIcon.ComboBoxEndIcon, {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', {
 const _react = require('react');
 const _ComboBox = require('./ComboBox.js');
 () => {
-  const ref = (0, _react.useRef)(null);
+  let ref = (0, _react.useRef)(null);
   return React.createElement(_ComboBox.ComboBox, {
     options: [
       {
@@ -22,14 +22,14 @@ const _ComboBox = require('./ComboBox.js');
       },
     ],
     onChange: (value) => {
-      const returnValue = value;
+      let returnValue = value;
       return returnValue;
     },
     ref: ref,
   });
 };
-() => {
-  return React.createElement(_ComboBox.ComboBox, {
+() =>
+  React.createElement(_ComboBox.ComboBox, {
     options: [
       {
         label: 'Item 1',
@@ -45,35 +45,33 @@ const _ComboBox = require('./ComboBox.js');
       },
     ],
     onChange: (value) => {
-      const returnValue = value;
+      let returnValue = value;
       return returnValue;
     },
   });
-};
-() => {
-  return React.createElement(_ComboBox.ComboBox, {
+() =>
+  React.createElement(_ComboBox.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.ComboBox, {
@@ -84,9 +82,8 @@ const _ComboBox = require('./ComboBox.js');
         },
       ],
       onChange: (value) => {
-        const returnValue = value;
+        let returnValue = value;
         return returnValue;
       },
     }),
   );
-};

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -15,7 +15,7 @@ const _react = _interop_require_wildcard._(require('react'));
 const _index = require('../../utils/index.js');
 const _Icon = require('../Icon/Icon.js');
 const ComboBoxEndIcon = _react.forwardRef((props, forwardedRef) => {
-  const { className, children, disabled, isOpen, ...rest } = props;
+  let { className, children, disabled, isOpen, ...rest } = props;
   return _react.createElement(
     _Icon.Icon,
     {
@@ -37,4 +37,3 @@ const ComboBoxEndIcon = _react.forwardRef((props, forwardedRef) => {
       }),
   );
 });
-ComboBoxEndIcon.displayName = 'ComboBoxEndIcon';