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

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

@@ -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
@@ -369,7 +368,7 @@ export const ComboBox = (props) => {
   );
   return React.createElement(
     ComboBoxRefsContext.Provider,
-    { value: { inputRef, menuRef, toggleButtonRef, optionsExtraInfoRef } },
+    { value: { inputRef, menuRef, optionsExtraInfoRef } },
     React.createElement(
       ComboBoxActionContext.Provider,
       { value: dispatch },
@@ -390,12 +389,13 @@ export const ComboBox = (props) => {
         },
         React.createElement(
           ComboBoxInputContainer,
-          { disabled: inputProps?.disabled, ...rest },
+          { ...rest },
           React.createElement(
             React.Fragment,
             null,
             React.createElement(ComboBoxInput, {
               value: inputValue,
+              disabled: inputProps?.disabled,
               ...inputProps,
               onChange: handleOnInput,
               selectTags: isMultipleEnabled(selected, multiple)

package/esm/core/ComboBox/ComboBoxDropdown.js

@@ -13,7 +13,7 @@ export const ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
   const { children, ...rest } = props;
   const { isOpen } = useSafeContext(ComboBoxStateContext);
   const dispatch = useSafeContext(ComboBoxActionContext);
-  const { inputRef, toggleButtonRef } = useSafeContext(ComboBoxRefsContext);
+  const { inputRef } = useSafeContext(ComboBoxRefsContext);
   // sync internal isOpen state with user's visible prop
   React.useEffect(() => {
     if (props.visible != undefined) {
@@ -23,14 +23,9 @@ export const ComboBoxDropdown = React.forwardRef((props, forwardedRef) => {
   return React.createElement(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/esm/core/ComboBox/ComboBoxEndIcon.js

@@ -4,43 +4,22 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import {
-  useSafeContext,
-  useMergedRefs,
-  SvgCaretDownSmall,
-  mergeEventHandlers,
-  Box,
-} from '../utils/index.js';
-import { ComboBoxActionContext, ComboBoxRefsContext } from './helpers.js';
+import { SvgCaretDownSmall, Icon } from '../utils/index.js';
 export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    children,
-    onClick: onClickProp,
-    disabled,
-    isOpen,
-    ...rest
-  } = props;
-  const dispatch = useSafeContext(ComboBoxActionContext);
-  const { toggleButtonRef } = useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(toggleButtonRef, forwardedRef);
+  const { className, children, disabled, isOpen, ...rest } = props;
   return React.createElement(
-    Box,
+    Icon,
     {
       as: 'span',
-      ref: refs,
+      ref: forwardedRef,
       className: cx(
         'iui-end-icon',
         {
-          'iui-actionable': !disabled,
           'iui-disabled': disabled,
           'iui-open': isOpen,
         },
         className,
       ),
-      onClick: mergeEventHandlers(onClickProp, () => {
-        dispatch({ type: isOpen ? 'close' : 'open' });
-      }),
       ...rest,
     },
     children ?? React.createElement(SvgCaretDownSmall, { 'aria-hidden': true }),

package/esm/core/ComboBox/ComboBoxInput.js

@@ -197,7 +197,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       spellCheck: false,
       autoCapitalize: 'none',
       autoCorrect: 'off',
-      style: multiple ? { paddingLeft: tagContainerWidth + 18 } : {},
+      style: multiple ? { paddingInlineStart: tagContainerWidth + 18 } : {},
       'aria-describedby': multiple ? `${id}-selected-live` : undefined,
       ...rest,
     }),

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

@@ -47,11 +47,11 @@ const VirtualizedComboBoxMenu = React.forwardRef(
       scrollToIndex: focusedVisibleIndex,
     });
     const surfaceStyles = {
-      minWidth,
+      minInlineSize: minWidth,
       // set as constant because we don't want it shifting when items are unmounted
-      maxWidth: minWidth,
+      maxInlineSize: minWidth,
       // max-height must be on the outermost element for virtual scroll
-      maxHeight: 'calc((var(--iui-component-height) - 1px) * 8.5)',
+      maxBlockSize: 'calc((var(--iui-component-height) - 1px) * 8.5)',
       overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto',
       ...style,
     };
@@ -86,8 +86,8 @@ export const ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
   const refs = useMergedRefs(menuRef, forwardedRef);
   const styles = React.useMemo(
     () => ({
-      minWidth,
-      maxWidth: `min(${minWidth * 2}px, 90vw)`,
+      minInlineSize: minWidth,
+      maxInlineSize: `min(${minWidth * 2}px, 90vw)`,
     }),
     [minWidth],
   );

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

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useSafeContext, useMergedRefs } from '../utils/index.js';
+import { useSafeContext, useMergedRefs, SvgCheckmark } from '../utils/index.js';
 import { ComboBoxStateContext } from './helpers.js';
 import { ListItem } from '../List/ListItem.js';
 export const ComboBoxMenuItem = React.memo(
@@ -33,6 +33,7 @@ export const ComboBoxMenuItem = React.memo(
     return React.createElement(
       ListItem,
       {
+        as: 'div',
         actionable: true,
         size: size,
         active: isSelected,
@@ -59,12 +60,13 @@ export const ComboBoxMenuItem = React.memo(
         children,
         sublabel && React.createElement(ListItem.Description, null, sublabel),
       ),
-      endIcon &&
-        React.createElement(
-          ListItem.Icon,
-          { as: 'span', 'aria-hidden': true },
-          endIcon,
-        ),
+      endIcon ||
+        (isSelected &&
+          React.createElement(
+            ListItem.Icon,
+            { as: 'span', 'aria-hidden': true },
+            endIcon ?? React.createElement(SvgCheckmark, null),
+          )),
     );
   }),
 );