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

package/esm/core/Carousel/CarouselDotsList.js

@@ -55,6 +55,7 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
         context.setCurrentIndex(index);
         context.scrollToSlide.current(index);
       }
+      listRef.current?.children[index]?.focus();
       onSlideChange?.(index);
     },
     [context, onSlideChange],
@@ -105,13 +106,12 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
           index < firstVisibleDotIndex || index > lastVisibleDotIndex;
         return React.createElement(CarouselDot, {
           key: index,
-          'aria-label': `Slide ${index}`,
+          'aria-label': `Slide ${index + 1}`,
           isActive: index === currentIndex,
           onClick: () => handleSlideChange(index),
           isSmall: isSecondSmallDot,
           isSmaller: isFirstSmallDot || isClipped,
           id: idPrefix && `${idPrefix}--dot-${index}`,
-          'aria-controls': idPrefix && `${idPrefix}--slide-${index}`,
         });
       });
   }, [
@@ -138,6 +138,27 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
       justMounted.current = false;
     }
   }, [currentIndex, firstVisibleDotIndex, slideCount, visibleCount, width]);
+  const handleKeyDown = (event) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+    const key = event.key;
+    if (key === 'ArrowLeft' || key === 'ArrowRight') {
+      event.preventDefault();
+    }
+  };
+  const handleKeyUp = (event) => {
+    switch (event.key) {
+      case 'ArrowLeft': {
+        handleSlideChange((slideCount + currentIndex - 1) % slideCount);
+        break;
+      }
+      case 'ArrowRight': {
+        handleSlideChange((slideCount + currentIndex + 1) % slideCount);
+        break;
+      }
+    }
+  };
   return React.createElement(
     React.Fragment,
     null,
@@ -148,6 +169,9 @@ export const CarouselDotsList = React.forwardRef((props, ref) => {
         role: 'tablist',
         'aria-label': 'Slides',
         ref: refs,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        tabIndex: -1,
         ...rest,
       },
       children ?? dots,

package/esm/core/Carousel/CarouselNavigation.d.ts

@@ -6,14 +6,14 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
  *
  * `children` can be specified to override what is shown in this navigation section.
  */
-export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {}> & {
+export declare const CarouselNavigation: PolymorphicForwardRefComponent<"div", {}> & {
     PreviousButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
     }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
@@ -22,7 +22,7 @@ export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
         iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
 };

package/esm/core/Carousel/CarouselNavigation.js

@@ -5,19 +5,14 @@
 import * as React from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext.js';
-import { IconButton } from '../Buttons/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
 import { CarouselDotsList } from './CarouselDotsList.js';
 import { Box, SvgChevronLeft, SvgChevronRight } from '../utils/index.js';
 const CarouselNavigationComponent = React.forwardRef((props, ref) => {
   const { className, children, ...rest } = props;
   return React.createElement(
     Box,
-    {
-      as: 'nav',
-      className: cx('iui-carousel-navigation', className),
-      ref: ref,
-      ...rest,
-    },
+    { className: cx('iui-carousel-navigation', className), ref: ref, ...rest },
     children ??
       React.createElement(
         React.Fragment,
@@ -42,20 +37,14 @@ const PreviousButton = React.forwardRef((props, ref) => {
   if (!context) {
     throw new Error('CarouselNavigation should be used inside Carousel');
   }
-  const {
-    slideCount,
-    currentIndex,
-    setCurrentIndex,
-    keysPressed,
-    scrollToSlide,
-  } = context;
+  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
   return React.createElement(
     IconButton,
     {
       styleType: 'borderless',
       size: 'small',
       tabIndex: -1,
-      'data-pressed': keysPressed['ArrowLeft'] || undefined,
+      'aria-label': 'Previous',
       ref: ref,
       ...props,
       onClick: (e) => {
@@ -74,20 +63,14 @@ const NextButton = React.forwardRef((props, ref) => {
   if (!context) {
     throw new Error('CarouselNavigation should be used inside Carousel');
   }
-  const {
-    slideCount,
-    currentIndex,
-    setCurrentIndex,
-    keysPressed,
-    scrollToSlide,
-  } = context;
+  const { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
   return React.createElement(
     IconButton,
     {
       styleType: 'borderless',
       size: 'small',
       tabIndex: -1,
-      'data-pressed': keysPressed['ArrowRight'] || undefined,
+      'aria-label': 'Next',
       ref: ref,
       ...props,
       onClick: (e) => {

package/esm/core/Carousel/CarouselSlide.d.ts

@@ -12,5 +12,5 @@ type CarouselSlideProps = {
  * It is recommended that the slide content bring its own dimensions (esp. height) and that
  * the dimensions should be the same for all slides.
  */
-export declare const CarouselSlide: PolymorphicForwardRefComponent<"li", CarouselSlideProps>;
+export declare const CarouselSlide: PolymorphicForwardRefComponent<"div", CarouselSlideProps>;
 export {};

package/esm/core/Carousel/CarouselSlide.js

@@ -4,7 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, useIntersection, useMergedRefs } from '../utils/index.js';
+import {
+  Box,
+  mergeEventHandlers,
+  useIntersection,
+  useMergedRefs,
+} from '../utils/index.js';
 import { CarouselContext } from './CarouselContext.js';
 /**
  * `CarouselSlide` is used for the actual slide content. The content can be specified through `children`.
@@ -18,7 +23,7 @@ export const CarouselSlide = React.forwardRef((props, ref) => {
   if (!context || index == null) {
     throw new Error('CarouselSlide must be used within Carousel');
   }
-  const { isManuallyUpdating, setCurrentIndex } = context;
+  const { isManuallyUpdating, currentIndex, setCurrentIndex } = context;
   const updateActiveIndexOnScroll = React.useCallback(() => {
     // only update index if scroll was triggered by browser
     if (!isManuallyUpdating.current) {
@@ -34,12 +39,19 @@ export const CarouselSlide = React.forwardRef((props, ref) => {
   return React.createElement(
     Box,
     {
-      as: 'li',
       className: cx('iui-carousel-slider-item', className),
       role: 'tabpanel',
       'aria-roledescription': 'slide',
+      tabIndex: index === currentIndex ? 0 : undefined,
       ref: refs,
+      inert: index !== currentIndex ? '' : undefined,
       ...rest,
+      onKeyDown: mergeEventHandlers(props.onKeyDown, (event) => {
+        // prevent default browser scrolling on arrow keys because focus will get lost when slide switches
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+          event.preventDefault();
+        }
+      }),
     },
     children,
   );

package/esm/core/Carousel/CarouselSlider.d.ts

@@ -2,4 +2,4 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 /**
  * `CarouselSlider` is the scrollable list that should consist of `CarouselSlide` components.
  */
-export declare const CarouselSlider: PolymorphicForwardRefComponent<"ol", {}>;
+export declare const CarouselSlider: PolymorphicForwardRefComponent<"div", {}>;

package/esm/core/Carousel/CarouselSlider.js

@@ -28,6 +28,7 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
         React.isValidElement(child)
           ? React.cloneElement(child, {
               id: `${idPrefix}--slide-${index}`,
+              'aria-labelledby': `${idPrefix}--dot-${index}`,
               index,
             })
           : child,
@@ -66,11 +67,10 @@ export const CarouselSlider = React.forwardRef((props, ref) => {
   return React.createElement(
     Box,
     {
-      as: 'ol',
-      'aria-live': 'polite',
       className: cx('iui-carousel-slider', className),
       ref: refs,
       onScroll: handleOnScroll,
+      tabIndex: -1,
       ...rest,
     },
     items,

package/esm/core/Checkbox/Checkbox.js

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { ProgressRadial } from '../ProgressIndicators/index.js';
+import { ProgressRadial } from '../ProgressIndicators/ProgressRadial.js';
 import { useMergedRefs, Box } from '../utils/index.js';
 /**
  * Simple input checkbox

package/esm/core/ColorPicker/ColorBuilder.js

@@ -11,7 +11,7 @@ import {
   useMergedRefs,
   Box,
 } from '../utils/index.js';
-import { Slider } from '../Slider/index.js';
+import { Slider } from '../Slider/Slider.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
 const getVerticalPercentageOfRectangle = (rect, pointer) => {
   const position = getBoundedValue(pointer, rect.top, rect.bottom);
@@ -273,6 +273,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
       },
       min: 0,
       max: 359,
+      thumbProps: () => ({ 'aria-label': 'Hue' }),
     }),
     showAlpha &&
       React.createElement(Slider, {
@@ -294,6 +295,7 @@ export const ColorBuilder = React.forwardRef((props, ref) => {
         style: {
           '--iui-color-picker-selected-color': hueColorString,
         },
+        thumbProps: () => ({ 'aria-label': 'Opacity' }),
       }),
   );
 });

package/esm/core/ColorPicker/ColorInputPanel.js

@@ -4,9 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { IconButton } from '../Buttons/index.js';
-import { Input } from '../Input/index.js';
-import { ColorValue, SvgSwap, Box } from '../utils/index.js';
+import { IconButton } from '../Buttons/IconButton.js';
+import { Input } from '../Input/Input.js';
+import { ColorValue, SvgSwap, Box, useId } from '../utils/index.js';
 import { useColorPickerContext } from './ColorPickerContext.js';
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
@@ -140,6 +140,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
     maxLength: showAlpha ? 9 : 7,
     minLength: 1,
     placeholder: 'HEX',
+    'aria-label': 'Hex',
     value: input[0],
     onChange: (event) => {
       const value = event.target.value.startsWith('#')
@@ -169,6 +170,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       max: '359',
       step: '.1',
       placeholder: 'H',
+      'aria-label': 'Hue',
       value: input[0] ?? '',
       onChange: (event) => {
         setInput([event.target.value, input[1], input[2], input[3]]);
@@ -195,6 +197,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       max: '100',
       step: '.1',
       placeholder: 'S',
+      'aria-label': 'Saturation',
       value: input[1] ?? '',
       onChange: (event) => {
         setInput([input[0], event.target.value, input[2], input[3]]);
@@ -221,6 +224,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       max: '100',
       step: '.1',
       placeholder: 'L',
+      'aria-label': 'Lightness',
       value: input[2] ?? '',
       onChange: (event) => {
         setInput([input[0], input[1], event.target.value, input[3]]);
@@ -248,6 +252,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         max: '1',
         step: '.01',
         placeholder: 'A',
+        'aria-label': 'Alpha',
         value: input[3] ?? '',
         onChange: (event) => {
           setInput([input[0], input[1], input[2], event.target.value]);
@@ -277,6 +282,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       min: '0',
       max: '255',
       placeholder: 'R',
+      'aria-label': 'Red',
       value: input[0] ?? '',
       onChange: (event) => {
         setInput([event.target.value, input[1], input[2], input[3]]);
@@ -302,6 +308,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       min: '0',
       max: '255',
       placeholder: 'G',
+      'aria-label': 'Green',
       value: input[1] ?? '',
       onChange: (event) => {
         setInput([input[0], event.target.value, input[2], input[3]]);
@@ -327,6 +334,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       min: '0',
       max: '255',
       placeholder: 'B',
+      'aria-label': 'Blue',
       value: input[2] ?? '',
       onChange: (event) => {
         setInput([input[0], input[1], event.target.value, input[3]]);
@@ -354,6 +362,7 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
         max: '1',
         step: '.01',
         placeholder: 'A',
+        'aria-label': 'Alpha',
         value: input[3] ?? '',
         onChange: (event) => {
           setInput([input[0], input[1], input[2], event.target.value]);
@@ -374,13 +383,14 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
           Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
       }),
   );
+  const labelId = useId();
   return React.createElement(
     Box,
     { className: cx('iui-color-input-wrapper', className), ref: ref, ...rest },
     React.createElement(
       Box,
-      { className: 'iui-color-picker-section-label' },
-      showAlpha && currentFormat != 'hex'
+      { className: 'iui-color-picker-section-label', id: labelId },
+      showAlpha && currentFormat !== 'hex'
         ? currentFormat.toUpperCase() + 'A'
         : currentFormat.toUpperCase(),
     ),
@@ -390,12 +400,22 @@ export const ColorInputPanel = React.forwardRef((props, ref) => {
       allowedColorFormats.length > 1 &&
         React.createElement(
           IconButton,
-          { styleType: 'borderless', onClick: swapColorFormat, size: 'small' },
+          {
+            styleType: 'borderless',
+            onClick: swapColorFormat,
+            size: 'small',
+            label: 'Switch format',
+          },
           React.createElement(SvgSwap, null),
         ),
       React.createElement(
         Box,
-        { ref: inputsContainerRef, className: 'iui-color-input-fields' },
+        {
+          ref: inputsContainerRef,
+          className: 'iui-color-input-fields',
+          role: currentFormat !== 'hex' ? 'group' : undefined,
+          'aria-labelledby': currentFormat !== 'hex' ? labelId : undefined,
+        },
         currentFormat === 'hex' && hexInputField,
         currentFormat === 'rgb' && rgbInputs,
         currentFormat === 'hsl' && hslInputs,

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 { InputContainerProps, CommonProps } from '../utils/index.js';
+import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
 type ActionType = 'added' | 'removed';
 type MultipleOnChangeProps<T> = {
     value: T;
@@ -49,6 +50,10 @@ export type ComboBoxProps<T> = {
      * Props to customize dropdown menu behavior.
      */
     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,17 +3,17 @@
  * 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,
   useLatestRef,
   useIsomorphicLayoutEffect,
   AutoclearingHiddenLiveRegion,
-  usePopover,
 } from '../utils/index.js';
+import { usePopover } from '../Popover/Popover.js';
 import {
   ComboBoxActionContext,
   comboBoxReducer,
@@ -57,6 +57,7 @@ export const ComboBox = (props) => {
     onChange,
     filterFunction,
     inputProps,
+    endIconProps,
     dropdownMenuProps,
     emptyStateMessage = 'No options found',
     itemRenderer,
@@ -423,6 +424,7 @@ export const ComboBox = (props) => {
             }),
           ),
           React.createElement(ComboBoxEndIcon, {
+            ...endIconProps,
             disabled: inputProps?.disabled,
             isOpen: isOpen,
           }),

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(