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

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -139,20 +139,43 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       applyHsvColorChange(color.toHsvColor(), true, color);
     }
   };
-  const hexInputField = React.createElement(
-    index_js_3.InputContainer,
-    { status: validHexInput ? undefined : 'negative' },
+  const hexInputField = React.createElement(index_js_2.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(index_js_2.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') {
@@ -162,97 +185,76 @@ exports.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(
-      index_js_3.InputContainer,
-      {
-        status:
-          Number(input[0]) < 0 || Number(input[0]) > 360
-            ? 'negative'
-            : undefined,
+    React.createElement(index_js_2.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(index_js_2.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(
-      index_js_3.InputContainer,
-      {
-        status:
-          Number(input[1]) < 0 || Number(input[1]) > 100
-            ? 'negative'
-            : undefined,
+          handleColorInputChange();
+        }
       },
-      React.createElement(index_js_2.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(index_js_2.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(
-      index_js_3.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(index_js_2.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') {
@@ -266,127 +268,99 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
             handleColorInputChange();
           }
         },
+        status:
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
       }),
-    ),
-    showAlpha &&
-      React.createElement(
-        index_js_3.InputContainer,
-        {
-          status:
-            Number(input[3]) < 0 || Number(input[3]) > 1
-              ? 'negative'
-              : undefined,
-        },
-        React.createElement(index_js_2.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(
-      index_js_3.InputContainer,
-      {
-        status:
-          Number(input[0]) < 0 || Number(input[0]) > 255
-            ? 'negative'
-            : undefined,
+    React.createElement(index_js_2.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(index_js_2.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(
-      index_js_3.InputContainer,
-      {
-        status:
-          Number(input[1]) < 0 || Number(input[1]) > 255
-            ? 'negative'
-            : undefined,
+          handleColorInputChange();
+        }
       },
-      React.createElement(index_js_2.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(index_js_2.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(
-      index_js_3.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(index_js_2.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(index_js_2.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') {
@@ -400,42 +374,9 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
             handleColorInputChange();
           }
         },
+        status:
+          Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
       }),
-    ),
-    showAlpha &&
-      React.createElement(
-        index_js_3.InputContainer,
-        {
-          status:
-            Number(input[3]) < 0 || Number(input[3]) > 1
-              ? 'negative'
-              : undefined,
-        },
-        React.createElement(index_js_2.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(
     index_js_3.Box,

package/cjs/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/cjs/core/ComboBox/ComboBox.js

@@ -14,7 +14,6 @@ const SelectTag_js_1 = tslib_1.__importDefault(
 const index_js_2 = require('../Typography/index.js');
 const index_js_3 = require('../utils/index.js');
 const helpers_js_1 = require('./helpers.js');
-const ComboBoxDropdown_js_1 = require('./ComboBoxDropdown.js');
 const ComboBoxEndIcon_js_1 = require('./ComboBoxEndIcon.js');
 const ComboBoxInput_js_1 = require('./ComboBoxInput.js');
 const ComboBoxInputContainer_js_1 = require('./ComboBoxInputContainer.js');
@@ -57,8 +56,8 @@ const ComboBox = (props) => {
     itemRenderer,
     enableVirtualization = false,
     multiple = false,
-    onShow,
-    onHide,
+    onShow: onShowProp,
+    onHide: onHideProp,
     ...rest
   } = props;
   // Generate a stateful random id if not specified
@@ -71,7 +70,6 @@ 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 = (0, index_js_3.useLatestRef)(onChange);
   const optionsRef = (0, index_js_3.useLatestRef)(options);
   // Record to store all extra information (e.g. original indexes), where the key is the id of the option
@@ -117,6 +115,16 @@ const ComboBox = (props) => {
       focusedIndex: -1,
     },
   );
+  const onShowRef = (0, index_js_3.useLatestRef)(onShowProp);
+  const onHideRef = (0, index_js_3.useLatestRef)(onHideProp);
+  const show = React.useCallback(() => {
+    dispatch({ type: 'open' });
+    onShowRef.current?.();
+  }, [onShowRef]);
+  const hide = React.useCallback(() => {
+    dispatch({ type: 'close' });
+    onHideRef.current?.();
+  }, [onHideRef]);
   (0, index_js_3.useIsomorphicLayoutEffect)(() => {
     // When the dropdown opens
     if (isOpen) {
@@ -141,13 +149,6 @@ 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(() => {
@@ -174,7 +175,7 @@ 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) =>
@@ -186,7 +187,7 @@ 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(() => {
@@ -276,7 +277,7 @@ const ComboBox = (props) => {
         );
       } else {
         dispatch({ type: 'select', value: __originalIndex });
-        dispatch({ type: 'close' });
+        hide();
         onChangeHandler(__originalIndex);
       }
     },
@@ -287,6 +288,7 @@ const ComboBox = (props) => {
       onChangeHandler,
       selected,
       optionsRef,
+      hide,
     ],
   );
   const getMenuItem = React.useCallback(
@@ -366,9 +368,16 @@ const ComboBox = (props) => {
       ),
     [emptyStateMessage],
   );
+  const popover = (0, index_js_3.usePopover)({
+    visible: isOpen,
+    onVisibleChange: (open) => (open ? show() : hide()),
+    matchWidth: true,
+    closeOnOutsideClick: true,
+    trigger: { focus: true },
+  });
   return React.createElement(
     helpers_js_1.ComboBoxRefsContext.Provider,
-    { value: { inputRef, menuRef, toggleButtonRef, optionsExtraInfoRef } },
+    { value: { inputRef, menuRef, optionsExtraInfoRef } },
     React.createElement(
       helpers_js_1.ComboBoxActionContext.Provider,
       { value: dispatch },
@@ -377,7 +386,6 @@ const ComboBox = (props) => {
         {
           value: {
             id,
-            minWidth,
             isOpen,
             focusedIndex,
             onClickHandler,
@@ -385,6 +393,9 @@ const ComboBox = (props) => {
             filteredOptions,
             getMenuItem,
             multiple,
+            popover,
+            show,
+            hide,
           },
         },
         React.createElement(
@@ -395,6 +406,7 @@ const ComboBox = (props) => {
             null,
             React.createElement(ComboBoxInput_js_1.ComboBoxInput, {
               value: inputValue,
+              disabled: inputProps?.disabled,
               ...inputProps,
               onChange: handleOnInput,
               selectTags: isMultipleEnabled(selected, multiple)
@@ -419,15 +431,11 @@ const ComboBox = (props) => {
             : null,
         ),
         React.createElement(
-          ComboBoxDropdown_js_1.ComboBoxDropdown,
-          { ...dropdownMenuProps, onShow: onShow, onHide: onHide },
-          React.createElement(
-            ComboBoxMenu_js_1.ComboBoxMenu,
-            null,
-            filteredOptions.length > 0 && !enableVirtualization
-              ? filteredOptions.map(getMenuItem)
-              : emptyContent,
-          ),
+          ComboBoxMenu_js_1.ComboBoxMenu,
+          { as: 'div', ...dropdownMenuProps },
+          filteredOptions.length > 0 && !enableVirtualization
+            ? filteredOptions.map(getMenuItem)
+            : emptyContent,
         ),
       ),
     ),

package/cjs/core/ComboBox/ComboBoxEndIcon.js

@@ -9,40 +9,21 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
-const helpers_js_1 = require('./helpers.js');
 exports.ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    children,
-    onClick: onClickProp,
-    disabled,
-    isOpen,
-    ...rest
-  } = props;
-  const dispatch = (0, index_js_1.useSafeContext)(
-    helpers_js_1.ComboBoxActionContext,
-  );
-  const { toggleButtonRef } = (0, index_js_1.useSafeContext)(
-    helpers_js_1.ComboBoxRefsContext,
-  );
-  const refs = (0, index_js_1.useMergedRefs)(toggleButtonRef, forwardedRef);
+  const { className, children, disabled, isOpen, ...rest } = props;
   return React.createElement(
-    index_js_1.Box,
+    index_js_1.Icon,
     {
       as: 'span',
-      ref: refs,
+      ref: forwardedRef,
       className: (0, classnames_1.default)(
         'iui-end-icon',
         {
-          'iui-actionable': !disabled,
           'iui-disabled': disabled,
           'iui-open': isOpen,
         },
         className,
       ),
-      onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, () => {
-        dispatch({ type: isOpen ? 'close' : 'open' });
-      }),
       ...rest,
     },
     children ??