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

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.js

@@ -71,7 +71,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
@@ -368,7 +367,7 @@ const ComboBox = (props) => {
   );
   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 },
@@ -389,12 +388,13 @@ const ComboBox = (props) => {
         },
         React.createElement(
           ComboBoxInputContainer_js_1.ComboBoxInputContainer,
-          { disabled: inputProps?.disabled, ...rest },
+          { ...rest },
           React.createElement(
             React.Fragment,
             null,
             React.createElement(ComboBoxInput_js_1.ComboBoxInput, {
               value: inputValue,
+              disabled: inputProps?.disabled,
               ...inputProps,
               onChange: handleOnInput,
               selectTags: isMultipleEnabled(selected, multiple)

package/cjs/core/ComboBox/ComboBoxDropdown.js

@@ -17,7 +17,7 @@ exports.ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
   const dispatch = (0, index_js_1.useSafeContext)(
     helpers_js_1.ComboBoxActionContext,
   );
-  const { inputRef, toggleButtonRef } = (0, index_js_1.useSafeContext)(
+  const { inputRef } = (0, index_js_1.useSafeContext)(
     helpers_js_1.ComboBoxRefsContext,
   );
   // sync internal isOpen state with user's visible prop
@@ -29,14 +29,9 @@ exports.ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
   return React.createElement(index_js_1.Popover, {
     placement: 'bottom-start',
     visible: isOpen,
-    onClickOutside: React.useCallback(
-      (_, { target }) => {
-        if (!toggleButtonRef.current?.contains(target)) {
-          dispatch({ type: 'close' });
-        }
-      },
-      [dispatch, toggleButtonRef],
-    ),
+    onClickOutside: React.useCallback(() => {
+      dispatch({ type: 'close' });
+    }, [dispatch]),
     animation: 'shift-away',
     duration: 200,
     reference: inputRef,

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 ??

package/cjs/core/ComboBox/ComboBoxMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Menu } from '../Menu/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-type ComboBoxMenuProps = Omit<React.ComponentPropsWithoutRef<typeof Menu>, 'onClick'> & React.ComponentPropsWithoutRef<'ul'>;
-export declare const ComboBoxMenu: PolymorphicForwardRefComponent<"ul", ComboBoxMenuProps>;
+type ComboBoxMenuProps = Omit<React.ComponentPropsWithoutRef<typeof Menu>, 'onClick'> & React.ComponentPropsWithoutRef<'div'>;
+export declare const ComboBoxMenu: PolymorphicForwardRefComponent<"div", ComboBoxMenuProps>;
 export {};

package/cjs/core/ComboBox/ComboBoxMenuItem.d.ts

@@ -4,5 +4,5 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type ComboBoxMenuItemProps = MenuItemProps & {
     index: number;
 };
-export declare const ComboBoxMenuItem: React.MemoExoticComponent<PolymorphicForwardRefComponent<"li", ComboBoxMenuItemProps>>;
+export declare const ComboBoxMenuItem: React.MemoExoticComponent<PolymorphicForwardRefComponent<"div", ComboBoxMenuItemProps>>;
 export {};

package/cjs/core/ComboBox/ComboBoxMenuItem.js

@@ -37,6 +37,7 @@ exports.ComboBoxMenuItem = React.memo(
     return React.createElement(
       ListItem_js_1.ListItem,
       {
+        as: 'div',
         actionable: true,
         size: size,
         active: isSelected,
@@ -68,12 +69,13 @@ exports.ComboBoxMenuItem = React.memo(
             sublabel,
           ),
       ),
-      endIcon &&
-        React.createElement(
-          ListItem_js_1.ListItem.Icon,
-          { as: 'span', 'aria-hidden': true },
-          endIcon,
-        ),
+      endIcon ||
+        (isSelected &&
+          React.createElement(
+            ListItem_js_1.ListItem.Icon,
+            { as: 'span', 'aria-hidden': true },
+            endIcon ?? React.createElement(index_js_1.SvgCheckmark, null),
+          )),
     );
   }),
 );

package/cjs/core/ComboBox/helpers.d.ts

@@ -25,8 +25,7 @@ export declare const comboBoxReducer: (state: {
 };
 export declare const ComboBoxRefsContext: React.Context<{
     inputRef: React.RefObject<HTMLInputElement>;
-    menuRef: React.RefObject<HTMLUListElement>;
-    toggleButtonRef: React.RefObject<HTMLSpanElement>;
+    menuRef: React.RefObject<HTMLElement>;
     optionsExtraInfoRef: React.MutableRefObject<Record<string, {
         __originalIndex: number;
     }>>;