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

package/esm/core/ColorPicker/ColorPalette.js

@@ -4,12 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import {
-  ColorValue,
-  getFocusableElements,
-  useMergedRefs,
-  Box,
-} from '../utils/index.js';
+import { ColorValue, Box } from '../utils/index.js';
 import { getColorValue } from './ColorPicker.js';
 import { ColorSwatch } from './ColorSwatch.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
@@ -28,76 +23,6 @@ export const ColorPalette = React.forwardRef((props, ref) => {
   const { colors, label, className, children, ...rest } = props;
   const { activeColor, setActiveColor, onChangeComplete } =
     useColorPickerContext();
-  const [focusedIndex, setFocusedIndex] = React.useState();
-  // callback ref to set tabindex=0 on first child if none of the swatches are tabbable
-  const setDefaultTabIndex = (el) => {
-    if (el && !el.querySelector('[tabindex="0"]')) {
-      el.firstElementChild?.setAttribute('tabindex', '0');
-    }
-  };
-  const paletteRef = React.useRef(null);
-  const paletteRefs = useMergedRefs(paletteRef, setDefaultTabIndex);
-  // Color palette arrow key navigation
-  const handleKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const swatches = getFocusableElements(paletteRef.current);
-    if (!swatches.length) {
-      return;
-    }
-    const currentIndex = swatches.findIndex(
-      (swatch) => swatch === paletteRef.current?.ownerDocument.activeElement,
-    );
-    if (currentIndex < 0) {
-      return;
-    }
-    let newIndex = -1;
-    switch (event.key) {
-      case 'ArrowDown': {
-        // Look for next ColorSwatch with same offsetLeft value
-        newIndex = swatches.findIndex(
-          (swatch, index) =>
-            index > currentIndex &&
-            swatch.offsetLeft === swatches[currentIndex].offsetLeft,
-        );
-        break;
-      }
-      case 'ArrowUp': {
-        // Look backwards for next ColorSwatch with same offsetLeft value
-        for (let i = currentIndex - 1; i >= 0; i--) {
-          if (swatches[i].offsetLeft === swatches[currentIndex].offsetLeft) {
-            newIndex = i;
-            break;
-          }
-        }
-        break;
-      }
-      case 'ArrowLeft':
-        newIndex = Math.max(currentIndex - 1, 0);
-        break;
-      case 'ArrowRight':
-        newIndex = Math.min(currentIndex + 1, swatches.length - 1);
-        break;
-      case 'Enter':
-      case ' ':
-      case 'Spacebar':
-        swatches[currentIndex].click();
-        event.preventDefault();
-        return;
-    }
-    if (newIndex >= 0 && newIndex < swatches.length) {
-      setFocusedIndex(newIndex);
-      event.preventDefault();
-    }
-  };
-  // call focus() when focusedIndex changes
-  React.useEffect(() => {
-    if (focusedIndex != null) {
-      const swatches = getFocusableElements(paletteRef.current);
-      swatches[focusedIndex]?.focus();
-    }
-  }, [focusedIndex]);
   return React.createElement(
     Box,
     {
@@ -113,11 +38,7 @@ export const ColorPalette = React.forwardRef((props, ref) => {
       ),
     React.createElement(
       Box,
-      {
-        className: 'iui-color-palette',
-        onKeyDown: handleKeyDown,
-        ref: paletteRefs,
-      },
+      { className: 'iui-color-palette' },
       children,
       colors &&
         colors.map((_color, index) => {
@@ -125,8 +46,7 @@ export const ColorPalette = React.forwardRef((props, ref) => {
           return React.createElement(ColorSwatch, {
             key: index,
             color: color,
-            onClick: (event) => {
-              event.preventDefault();
+            onClick: () => {
               onChangeComplete?.(color);
               setActiveColor(color);
             },

package/esm/core/ColorPicker/ColorPicker.d.ts

@@ -30,6 +30,15 @@ type ColorPickerProps = {
      * @default false
      */
     showAlpha?: boolean;
+    /**
+     * Whether there is a background, border, shadow, etc.
+     *
+     * Should be set to true if used in a popover that doesn't have its own background,
+     * or set to false if the popover has its own background or embedding within a page.
+     *
+     * @default true
+     */
+    applyBackground?: boolean;
 };
 /**
  * ColorPicker to display color builder options, color inputs, and a palette of ColorSwatches.

package/esm/core/ColorPicker/ColorPicker.js

@@ -33,6 +33,7 @@ export const ColorPicker = React.forwardRef((props, forwardedRef) => {
     onChange,
     onChangeComplete,
     showAlpha = false,
+    applyBackground = true,
     ...rest
   } = props;
   const ref = React.useRef(null);
@@ -77,7 +78,11 @@ export const ColorPicker = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     Box,
     {
-      className: cx('iui-color-picker', className),
+      className: cx(
+        'iui-color-picker',
+        { 'iui-popover-surface': applyBackground },
+        className,
+      ),
       ref: useMergedRefs(ref, forwardedRef),
       ...rest,
     },

package/esm/core/ColorPicker/ColorSwatch.d.ts

@@ -16,5 +16,5 @@ type ColorSwatchProps = {
  * <ColorSwatch color='#23450b' onClick={onClick}/>
  * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
  */
-export declare const ColorSwatch: PolymorphicForwardRefComponent<"div", ColorSwatchProps>;
+export declare const ColorSwatch: PolymorphicForwardRefComponent<"button", ColorSwatchProps>;
 export default ColorSwatch;

package/esm/core/ColorPicker/ColorSwatch.js

@@ -4,8 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { ColorValue, Box } from '../utils/index.js';
+import { ColorValue, Box, ButtonBase } from '../utils/index.js';
 import { getColorValue } from './ColorPicker.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * ColorSwatch component to display within a color palette.
  * @example
@@ -21,17 +22,22 @@ export const ColorSwatch = React.forwardRef((props, ref) => {
         : getColorValue(color).toHslString(true),
     [color],
   );
-  return React.createElement(Box, {
-    className: cx('iui-color-swatch', { 'iui-active': isActive }, className),
-    style: {
-      '--iui-color-swatch-background': colorString,
-      ...style,
+  return React.createElement(
+    Box,
+    {
+      as: !!onClick ? ButtonBase : 'span',
+      className: cx('iui-color-swatch', { 'iui-active': isActive }, className),
+      style: {
+        '--iui-color-swatch-background': colorString,
+        ...style,
+      },
+      onClick: onClick,
+      'aria-pressed': !!onClick && isActive ? 'true' : undefined,
+      ref: ref,
+      ...rest,
     },
-    onClick: onClick,
-    tabIndex: isActive ? 0 : -1,
-    'aria-selected': isActive,
-    ref: ref,
-    ...rest,
-  });
+    props.children ??
+      React.createElement(VisuallyHidden, null, colorString.toUpperCase()),
+  );
 });
 export default ColorSwatch;

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import type { SelectOption } from '../Select/index.js';
+import type { SelectOption } from '../Select/Select.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';
+import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
 type ActionType = 'added' | 'removed';
 type MultipleOnChangeProps<T> = {
     value: T;
@@ -48,7 +49,11 @@ export type ComboBoxProps<T> = {
     /**
      * Props to customize dropdown menu behavior.
      */
-    dropdownMenuProps?: PopoverProps;
+    dropdownMenuProps?: React.ComponentProps<'div'>;
+    /**
+     * End icon props.
+     */
+    endIconProps?: React.ComponentProps<typeof ComboBoxEndIcon>;
     /**
      * 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

@@ -3,9 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { MenuExtraContent } from '../Menu/index.js';
-import SelectTag from '../Select/SelectTag.js';
-import { Text } from '../Typography/index.js';
+import { MenuExtraContent } from '../Menu/MenuExtraContent.js';
+import { SelectTag } from '../Select/SelectTag.js';
+import { Text } from '../Typography/Text.js';
 import {
   getRandomValue,
   mergeRefs,
@@ -13,13 +13,13 @@ import {
   useIsomorphicLayoutEffect,
   AutoclearingHiddenLiveRegion,
 } from '../utils/index.js';
+import { usePopover } from '../Popover/Popover.js';
 import {
   ComboBoxActionContext,
   comboBoxReducer,
   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';
@@ -57,13 +57,14 @@ export const ComboBox = (props) => {
     onChange,
     filterFunction,
     inputProps,
+    endIconProps,
     dropdownMenuProps,
     emptyStateMessage = 'No options found',
     itemRenderer,
     enableVirtualization = false,
     multiple = false,
-    onShow,
-    onHide,
+    onShow: onShowProp,
+    onHide: onHideProp,
     ...rest
   } = props;
   // Generate a stateful random id if not specified
@@ -121,6 +122,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) {
@@ -145,13 +156,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(() => {
@@ -178,7 +182,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) =>
@@ -190,7 +194,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(() => {
@@ -280,7 +284,7 @@ export const ComboBox = (props) => {
         );
       } else {
         dispatch({ type: 'select', value: __originalIndex });
-        dispatch({ type: 'close' });
+        hide();
         onChangeHandler(__originalIndex);
       }
     },
@@ -291,6 +295,7 @@ export const ComboBox = (props) => {
       onChangeHandler,
       selected,
       optionsRef,
+      hide,
     ],
   );
   const getMenuItem = React.useCallback(
@@ -366,6 +371,13 @@ 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, optionsExtraInfoRef } },
@@ -377,7 +389,6 @@ export const ComboBox = (props) => {
         {
           value: {
             id,
-            minWidth,
             isOpen,
             focusedIndex,
             onClickHandler,
@@ -385,11 +396,14 @@ export const ComboBox = (props) => {
             filteredOptions,
             getMenuItem,
             multiple,
+            popover,
+            show,
+            hide,
           },
         },
         React.createElement(
           ComboBoxInputContainer,
-          { ...rest },
+          { disabled: inputProps?.disabled, ...rest },
           React.createElement(
             React.Fragment,
             null,
@@ -410,6 +424,7 @@ export const ComboBox = (props) => {
             }),
           ),
           React.createElement(ComboBoxEndIcon, {
+            ...endIconProps,
             disabled: inputProps?.disabled,
             isOpen: isOpen,
           }),
@@ -420,15 +435,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,
         ),
       ),
     ),

package/esm/core/ComboBox/ComboBoxEndIcon.js

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { SvgCaretDownSmall, Icon } from '../utils/index.js';
+import { SvgCaretDownSmall } from '../utils/index.js';
+import { Icon } from '../Icon/Icon.js';
 export const ComboBoxEndIcon = React.forwardRef((props, forwardedRef) => {
   const { className, children, disabled, isOpen, ...rest } = props;
   return React.createElement(

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Input } from '../Input/index.js';
+import { Input } from '../Input/Input.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type ComboBoxInputProps = {
     selectTags?: JSX.Element[];

package/esm/core/ComboBox/ComboBoxInput.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 { Input } from '../Input/index.js';
+import { Input } from '../Input/Input.js';
 import {
   useSafeContext,
   useMergedRefs,
@@ -19,9 +19,9 @@ import {
 export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
   const {
     onKeyDown: onKeyDownProp,
-    onFocus: onFocusProp,
     onClick: onClickProp,
     selectTags,
+    size,
     ...rest
   } = props;
   const {
@@ -31,11 +31,14 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
     enableVirtualization,
     multiple,
     onClickHandler,
+    popover,
+    show,
+    hide,
   } = useSafeContext(ComboBoxStateContext);
   const dispatch = useSafeContext(ComboBoxActionContext);
   const { inputRef, menuRef, optionsExtraInfoRef } =
     useSafeContext(ComboBoxRefsContext);
-  const refs = useMergedRefs(inputRef, forwardedRef);
+  const refs = useMergedRefs(inputRef, popover.refs.setReference, forwardedRef);
   const focusedIndexRef = React.useRef(focusedIndex ?? -1);
   React.useEffect(() => {
     focusedIndexRef.current = focusedIndex ?? -1;
@@ -47,7 +50,6 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
   };
   const handleKeyDown = React.useCallback(
     (event) => {
-      onKeyDownProp?.(event);
       const length = Object.keys(optionsExtraInfoRef.current).length ?? 0;
       if (event.altKey) {
         return;
@@ -56,7 +58,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         case 'ArrowDown': {
           event.preventDefault();
           if (!isOpen) {
-            return dispatch({ type: 'open' });
+            return show();
           }
           if (length === 0) {
             return;
@@ -98,7 +100,7 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
         case 'ArrowUp': {
           event.preventDefault();
           if (!isOpen) {
-            return dispatch({ type: 'open' });
+            return show();
           }
           if (length === 0) {
             return;
@@ -142,17 +144,17 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
               onClickHandler?.(focusedIndexRef.current);
             }
           } else {
-            dispatch({ type: 'open' });
+            show();
           }
           break;
         }
         case 'Escape': {
           event.preventDefault();
-          dispatch({ type: 'close' });
+          hide();
           break;
         }
         case 'Tab':
-          dispatch({ type: 'close' });
+          hide();
           break;
       }
     },
@@ -162,31 +164,26 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       isOpen,
       menuRef,
       onClickHandler,
-      onKeyDownProp,
       optionsExtraInfoRef,
+      show,
+      hide,
     ],
   );
-  const handleFocus = React.useCallback(
-    (event) => {
-      dispatch({ type: 'open' });
-      onFocusProp?.(event);
-    },
-    [dispatch, onFocusProp],
-  );
   const handleClick = React.useCallback(() => {
     if (!isOpen) {
-      dispatch({ type: 'open' });
+      show();
+    } else {
+      hide();
     }
-  }, [dispatch, isOpen]);
+  }, [hide, isOpen, show]);
   const [tagContainerWidthRef, tagContainerWidth] = useContainerWidth();
   return React.createElement(
     React.Fragment,
     null,
     React.createElement(Input, {
       ref: refs,
-      onKeyDown: handleKeyDown,
       onClick: mergeEventHandlers(onClickProp, handleClick),
-      onFocus: handleFocus,
+      'aria-expanded': isOpen,
       'aria-activedescendant':
         isOpen && focusedIndex != undefined && focusedIndex > -1
           ? getIdFromIndex(focusedIndex)
@@ -199,7 +196,11 @@ export const ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       autoCorrect: 'off',
       style: multiple ? { paddingInlineStart: tagContainerWidth + 18 } : {},
       'aria-describedby': multiple ? `${id}-selected-live` : undefined,
-      ...rest,
+      size: size,
+      ...popover.getReferenceProps({
+        onKeyDown: mergeEventHandlers(onKeyDownProp, handleKeyDown),
+        ...rest,
+      }),
     }),
     multiple && selectTags
       ? React.createElement(ComboBoxMultipleContainer, {

package/esm/core/ComboBox/ComboBoxInputContainer.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 { StatusMessage } from '../StatusMessage/index.js';
+import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { InputContainer, useSafeContext, Box } from '../utils/index.js';
 import { ComboBoxStateContext } from './helpers.js';
 export const ComboBoxInputContainer = React.forwardRef(

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

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