@itwin/itwinui-react 3.0.0-dev.7 → 3.0.0-dev.9

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/index.js';
 import { Input } from '../Input/index.js';
-import { ColorValue, InputContainer, SvgSwap, Box } from '../utils/index.js';
+import { ColorValue, SvgSwap, Box } from '../utils/index.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
@@ -135,20 +135,43 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       applyHsvColorChange(color.toHsvColor(), true, color);
     }
   };
-  const hexInputField = React.createElement(
-    InputContainer,
-    { status: validHexInput ? undefined : 'negative' },
+  const hexInputField = React.createElement(Input, {
+    size: 'small',
+    maxLength: showAlpha ? 9 : 7,
+    minLength: 1,
+    placeholder: 'HEX',
+    value: input[0],
+    onChange: (event) => {
+      const value = event.target.value.startsWith('#')
+        ? event.target.value
+        : `#${event.target.value}`;
+      setInput([value]);
+    },
+    onKeyDown: (event) => {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        handleColorInputChange();
+      }
+    },
+    onBlur: (event) => {
+      event.preventDefault();
+      handleColorInputChange();
+    },
+    status: validHexInput ? undefined : 'negative',
+  });
+  const hslInputs = React.createElement(
+    React.Fragment,
+    null,
     React.createElement(Input, {
       size: 'small',
-      maxLength: showAlpha ? 9 : 7,
-      minLength: 1,
-      placeholder: 'HEX',
-      value: input[0],
+      type: 'number',
+      min: '0',
+      max: '359',
+      step: '.1',
+      placeholder: 'H',
+      value: input[0] ?? '',
       onChange: (event) => {
-        const value = event.target.value.startsWith('#')
-          ? event.target.value
-          : `#${event.target.value}`;
-        setInput([value]);
+        setInput([event.target.value, input[1], input[2], input[3]]);
       },
       onKeyDown: (event) => {
         if (event.key === 'Enter') {
@@ -158,97 +181,76 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       },
       onBlur: (event) => {
         event.preventDefault();
-        handleColorInputChange();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
       },
+      status:
+        Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : undefined,
     }),
-  );
-  const hslInputs = React.createElement(
-    React.Fragment,
-    null,
-    React.createElement(
-      InputContainer,
-      {
-        status:
-          Number(input[0]) < 0 || Number(input[0]) > 360
-            ? 'negative'
-            : undefined,
+    React.createElement(Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '100',
+      step: '.1',
+      placeholder: 'S',
+      value: input[1] ?? '',
+      onChange: (event) => {
+        setInput([input[0], event.target.value, input[2], input[3]]);
       },
-      React.createElement(Input, {
-        size: 'small',
-        type: 'number',
-        min: '0',
-        max: '359',
-        step: '.1',
-        placeholder: 'H',
-        value: input[0] ?? '',
-        onChange: (event) => {
-          setInput([event.target.value, input[1], input[2], input[3]]);
-        },
-        onKeyDown: (event) => {
-          if (event.key === 'Enter') {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
-        },
-      }),
-    ),
-    React.createElement(
-      InputContainer,
-      {
-        status:
-          Number(input[1]) < 0 || Number(input[1]) > 100
-            ? 'negative'
-            : undefined,
+          handleColorInputChange();
+        }
       },
-      React.createElement(Input, {
-        size: 'small',
-        type: 'number',
-        min: '0',
-        max: '100',
-        step: '.1',
-        placeholder: 'S',
-        value: input[1] ?? '',
-        onChange: (event) => {
-          setInput([input[0], event.target.value, input[2], input[3]]);
-        },
-        onKeyDown: (event) => {
-          if (event.key === 'Enter') {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : undefined,
+    }),
+    React.createElement(Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '100',
+      step: '.1',
+      placeholder: 'L',
+      value: input[2] ?? '',
+      onChange: (event) => {
+        setInput([input[0], input[1], event.target.value, input[3]]);
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
-        },
-      }),
-    ),
-    React.createElement(
-      InputContainer,
-      {
-        status:
-          Number(input[2]) < 0 || Number(input[2]) > 100
-            ? 'negative'
-            : undefined,
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
       },
+      status:
+        Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : undefined,
+    }),
+    showAlpha &&
       React.createElement(Input, {
         size: 'small',
         type: 'number',
         min: '0',
-        max: '100',
-        step: '.1',
-        placeholder: 'L',
-        value: input[2] ?? '',
+        max: '1',
+        step: '.01',
+        placeholder: 'A',
+        value: input[3] ?? '',
         onChange: (event) => {
-          setInput([input[0], input[1], event.target.value, input[3]]);
+          setInput([input[0], input[1], input[2], event.target.value]);
         },
         onKeyDown: (event) => {
           if (event.key === 'Enter') {
@@ -262,127 +264,99 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
             handleColorInputChange();
           }
         },
+        status:
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
       }),
-    ),
-    showAlpha &&
-      React.createElement(
-        InputContainer,
-        {
-          status:
-            Number(input[3]) < 0 || Number(input[3]) > 1
-              ? 'negative'
-              : undefined,
-        },
-        React.createElement(Input, {
-          size: 'small',
-          type: 'number',
-          min: '0',
-          max: '1',
-          step: '.01',
-          placeholder: 'A',
-          value: input[3] ?? '',
-          onChange: (event) => {
-            setInput([input[0], input[1], input[2], event.target.value]);
-          },
-          onKeyDown: (event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              handleColorInputChange();
-            }
-          },
-          onBlur: (event) => {
-            event.preventDefault();
-            if (!isFocusInside(event.relatedTarget)) {
-              handleColorInputChange();
-            }
-          },
-        }),
-      ),
   );
   const rgbInputs = React.createElement(
     React.Fragment,
     null,
-    React.createElement(
-      InputContainer,
-      {
-        status:
-          Number(input[0]) < 0 || Number(input[0]) > 255
-            ? 'negative'
-            : undefined,
+    React.createElement(Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '255',
+      placeholder: 'R',
+      value: input[0] ?? '',
+      onChange: (event) => {
+        setInput([event.target.value, input[1], input[2], input[3]]);
       },
-      React.createElement(Input, {
-        size: 'small',
-        type: 'number',
-        min: '0',
-        max: '255',
-        placeholder: 'R',
-        value: input[0] ?? '',
-        onChange: (event) => {
-          setInput([event.target.value, input[1], input[2], input[3]]);
-        },
-        onKeyDown: (event) => {
-          if (event.key === 'Enter') {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
-        },
-      }),
-    ),
-    React.createElement(
-      InputContainer,
-      {
-        status:
-          Number(input[1]) < 0 || Number(input[1]) > 255
-            ? 'negative'
-            : undefined,
+          handleColorInputChange();
+        }
       },
-      React.createElement(Input, {
-        size: 'small',
-        type: 'number',
-        min: '0',
-        max: '255',
-        placeholder: 'G',
-        value: input[1] ?? '',
-        onChange: (event) => {
-          setInput([input[0], event.target.value, input[2], input[3]]);
-        },
-        onKeyDown: (event) => {
-          if (event.key === 'Enter') {
-            event.preventDefault();
-            handleColorInputChange();
-          }
-        },
-        onBlur: (event) => {
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[0]) < 0 || Number(input[0]) > 255 ? 'negative' : undefined,
+    }),
+    React.createElement(Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '255',
+      placeholder: 'G',
+      value: input[1] ?? '',
+      onChange: (event) => {
+        setInput([input[0], event.target.value, input[2], input[3]]);
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
           event.preventDefault();
-          if (!isFocusInside(event.relatedTarget)) {
-            handleColorInputChange();
-          }
-        },
-      }),
-    ),
-    React.createElement(
-      InputContainer,
-      {
-        status:
-          Number(input[2]) < 0 || Number(input[2]) > 255
-            ? 'negative'
-            : undefined,
+          handleColorInputChange();
+        }
+      },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : undefined,
+    }),
+    React.createElement(Input, {
+      size: 'small',
+      type: 'number',
+      min: '0',
+      max: '255',
+      placeholder: 'B',
+      value: input[2] ?? '',
+      onChange: (event) => {
+        setInput([input[0], input[1], event.target.value, input[3]]);
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') {
+          event.preventDefault();
+          handleColorInputChange();
+        }
       },
+      onBlur: (event) => {
+        event.preventDefault();
+        if (!isFocusInside(event.relatedTarget)) {
+          handleColorInputChange();
+        }
+      },
+      status:
+        Number(input[2]) < 0 || Number(input[2]) > 255 ? 'negative' : undefined,
+    }),
+    showAlpha &&
       React.createElement(Input, {
         size: 'small',
         type: 'number',
         min: '0',
-        max: '255',
-        placeholder: 'B',
-        value: input[2] ?? '',
+        max: '1',
+        step: '.01',
+        placeholder: 'A',
+        value: input[3] ?? '',
         onChange: (event) => {
-          setInput([input[0], input[1], event.target.value, input[3]]);
+          setInput([input[0], input[1], input[2], event.target.value]);
         },
         onKeyDown: (event) => {
           if (event.key === 'Enter') {
@@ -396,42 +370,9 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
             handleColorInputChange();
           }
         },
+        status:
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
       }),
-    ),
-    showAlpha &&
-      React.createElement(
-        InputContainer,
-        {
-          status:
-            Number(input[3]) < 0 || Number(input[3]) > 1
-              ? 'negative'
-              : undefined,
-        },
-        React.createElement(Input, {
-          size: 'small',
-          type: 'number',
-          min: '0',
-          max: '1',
-          step: '.01',
-          placeholder: 'A',
-          value: input[3] ?? '',
-          onChange: (event) => {
-            setInput([input[0], input[1], input[2], event.target.value]);
-          },
-          onKeyDown: (event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              handleColorInputChange();
-            }
-          },
-          onBlur: (event) => {
-            event.preventDefault();
-            if (!isFocusInside(event.relatedTarget)) {
-              handleColorInputChange();
-            }
-          },
-        }),
-      ),
   );
   return React.createElement(
     Box,

package/esm/core/ComboBox/ComboBox.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { SelectOption } from '../Select/index.js';
 import type { Input } from '../Input/Input.js';
-import type { PopoverProps, InputContainerProps, CommonProps } from '../utils/index.js';
+import type { InputContainerProps, CommonProps } from '../utils/index.js';
 type ActionType = 'added' | 'removed';
 type MultipleOnChangeProps<T> = {
     value: T;
@@ -48,7 +48,7 @@ export type ComboBoxProps<T> = {
     /**
      * Props to customize dropdown menu behavior.
      */
-    dropdownMenuProps?: PopoverProps;
+    dropdownMenuProps?: React.ComponentProps<'div'>;
     /**
      * Message shown when no options are available.
      * If `JSX.Element` is provided, it will be rendered as is and won't be wrapped with `MenuExtraContent`.

package/esm/core/ComboBox/ComboBox.js

@@ -12,6 +12,7 @@ import {
   useLatestRef,
   useIsomorphicLayoutEffect,
   AutoclearingHiddenLiveRegion,
+  usePopover,
 } from '../utils/index.js';
 import {
   ComboBoxActionContext,
@@ -19,7 +20,6 @@ import {
   ComboBoxRefsContext,
   ComboBoxStateContext,
 } from './helpers.js';
-import { ComboBoxDropdown } from './ComboBoxDropdown.js';
 import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
 import { ComboBoxInput } from './ComboBoxInput.js';
 import { ComboBoxInputContainer } from './ComboBoxInputContainer.js';
@@ -62,8 +62,8 @@ export const ComboBox = (props) => {
     itemRenderer,
     enableVirtualization = false,
     multiple = false,
-    onShow,
-    onHide,
+    onShow: onShowProp,
+    onHide: onHideProp,
     ...rest
   } = props;
   // Generate a stateful random id if not specified
@@ -76,7 +76,6 @@ export const ComboBox = (props) => {
   // Refs get set in subcomponents
   const inputRef = React.useRef(null);
   const menuRef = React.useRef(null);
-  const toggleButtonRef = React.useRef(null);
   const onChangeProp = useLatestRef(onChange);
   const optionsRef = useLatestRef(options);
   // Record to store all extra information (e.g. original indexes), where the key is the id of the option
@@ -122,6 +121,16 @@ export const ComboBox = (props) => {
       focusedIndex: -1,
     },
   );
+  const onShowRef = useLatestRef(onShowProp);
+  const onHideRef = useLatestRef(onHideProp);
+  const show = React.useCallback(() => {
+    dispatch({ type: 'open' });
+    onShowRef.current?.();
+  }, [onShowRef]);
+  const hide = React.useCallback(() => {
+    dispatch({ type: 'close' });
+    onHideRef.current?.();
+  }, [onHideRef]);
   useIsomorphicLayoutEffect(() => {
     // When the dropdown opens
     if (isOpen) {
@@ -146,13 +155,6 @@ export const ComboBox = (props) => {
       }
     }
   }, [isOpen, multiple, optionsRef, selected]);
-  // Set min-width of menu to be same as input
-  const [minWidth, setMinWidth] = React.useState(0);
-  React.useEffect(() => {
-    if (inputRef.current) {
-      setMinWidth(inputRef.current.offsetWidth);
-    }
-  }, [isOpen]);
   // Update filtered options to the latest value options according to input value
   const [filteredOptions, setFilteredOptions] = React.useState(options);
   React.useEffect(() => {
@@ -179,7 +181,7 @@ export const ComboBox = (props) => {
     (event) => {
       const { value } = event.currentTarget;
       setInputValue(value);
-      dispatch({ type: 'open' }); // reopen when typing
+      show(); // reopen when typing
       setFilteredOptions(
         filterFunction?.(optionsRef.current, value) ??
           optionsRef.current.filter((option) =>
@@ -191,7 +193,7 @@ export const ComboBox = (props) => {
       }
       inputProps?.onChange?.(event);
     },
-    [filterFunction, focusedIndex, inputProps, optionsRef],
+    [filterFunction, focusedIndex, inputProps, optionsRef, show],
   );
   // When the value prop changes, update the selected index/indices
   React.useEffect(() => {
@@ -281,7 +283,7 @@ export const ComboBox = (props) => {
         );
       } else {
         dispatch({ type: 'select', value: __originalIndex });
-        dispatch({ type: 'close' });
+        hide();
         onChangeHandler(__originalIndex);
       }
     },
@@ -292,6 +294,7 @@ export const ComboBox = (props) => {
       onChangeHandler,
       selected,
       optionsRef,
+      hide,
     ],
   );
   const getMenuItem = React.useCallback(
@@ -367,9 +370,16 @@ export const ComboBox = (props) => {
       ),
     [emptyStateMessage],
   );
+  const popover = usePopover({
+    visible: isOpen,
+    onVisibleChange: (open) => (open ? show() : hide()),
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    trigger: { focus: true },
+  });
   return React.createElement(
     ComboBoxRefsContext.Provider,
-    { value: { inputRef, menuRef, toggleButtonRef, optionsExtraInfoRef } },
+    { value: { inputRef, menuRef, optionsExtraInfoRef } },
     React.createElement(
       ComboBoxActionContext.Provider,
       { value: dispatch },
@@ -378,7 +388,6 @@ export const ComboBox = (props) => {
         {
           value: {
             id,
-            minWidth,
             isOpen,
             focusedIndex,
             onClickHandler,
@@ -386,6 +395,9 @@ export const ComboBox = (props) => {
             filteredOptions,
             getMenuItem,
             multiple,
+            popover,
+            show,
+            hide,
           },
         },
         React.createElement(
@@ -396,6 +408,7 @@ export const ComboBox = (props) => {
             null,
             React.createElement(ComboBoxInput, {
               value: inputValue,
+              disabled: inputProps?.disabled,
               ...inputProps,
               onChange: handleOnInput,
               selectTags: isMultipleEnabled(selected, multiple)
@@ -420,15 +433,11 @@ export const ComboBox = (props) => {
             : null,
         ),
         React.createElement(
-          ComboBoxDropdown,
-          { ...dropdownMenuProps, onShow: onShow, onHide: onHide },
-          React.createElement(
-            ComboBoxMenu,
-            null,
-            filteredOptions.length > 0 && !enableVirtualization
-              ? filteredOptions.map(getMenuItem)
-              : emptyContent,
-          ),
+          ComboBoxMenu,
+          { as: 'div', ...dropdownMenuProps },
+          filteredOptions.length > 0 && !enableVirtualization
+            ? filteredOptions.map(getMenuItem)
+            : emptyContent,
         ),
       ),
     ),