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

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -8,9 +8,9 @@ const tslib_1 = require('tslib');
  *--------------------------------------------------------------------------------------------*/
 const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../Buttons/index.js');
-const index_js_2 = require('../Input/index.js');
-const index_js_3 = require('../utils/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const Input_js_1 = require('../Input/Input.js');
+const index_js_1 = require('../utils/index.js');
 const ColorPickerContext_js_1 = require('./ColorPickerContext.js');
 /**
  * `ColorInputPanel` shows input fields to enter precise color values in the specified format.
@@ -41,10 +41,10 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
     if (currentFormat === 'hsl') {
       const hsl = activeColor.toHslColor();
       setInput([
-        index_js_3.ColorValue.getFormattedColorNumber(hsvColor.h),
-        index_js_3.ColorValue.getFormattedColorNumber(hsl.s),
-        index_js_3.ColorValue.getFormattedColorNumber(hsl.l),
-        index_js_3.ColorValue.getFormattedColorNumber(
+        index_js_1.ColorValue.getFormattedColorNumber(hsvColor.h),
+        index_js_1.ColorValue.getFormattedColorNumber(hsl.s),
+        index_js_1.ColorValue.getFormattedColorNumber(hsl.l),
+        index_js_1.ColorValue.getFormattedColorNumber(
           hsl.a ?? activeColor.getAlpha() / 255,
           2,
         ),
@@ -55,7 +55,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         rgb.r.toString(),
         rgb.g.toString(),
         rgb.b.toString(),
-        index_js_3.ColorValue.getFormattedColorNumber(
+        index_js_1.ColorValue.getFormattedColorNumber(
           rgb.a ?? activeColor.getAlpha() / 255,
           2,
         ),
@@ -85,7 +85,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
     if (currentFormat === 'hex') {
       try {
         const value = input[0].replace(/ /g, '').toLowerCase(); // remove white space from input
-        color = index_js_3.ColorValue.create(value);
+        color = index_js_1.ColorValue.create(value);
         setValidHexInput(true);
         if (activeColor.toHexString(showAlpha).toLowerCase() === value) {
           return;
@@ -113,7 +113,7 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       if (hsl.h === h && hsl.s === s && hsl.l === l && hsl.a === a) {
         return;
       }
-      color = index_js_3.ColorValue.create({ h, s, l, a });
+      color = index_js_1.ColorValue.create({ h, s, l, a });
     }
     if (currentFormat === 'rgb') {
       const [r, g, b, a] = input.map(Number);
@@ -133,17 +133,18 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       if (rgb.r === r && rgb.g === g && rgb.b === b && rgb.a === a) {
         return;
       }
-      color = index_js_3.ColorValue.create({ r, g, b, a });
+      color = index_js_1.ColorValue.create({ r, g, b, a });
     }
     if (color) {
       applyHsvColorChange(color.toHsvColor(), true, color);
     }
   };
-  const hexInputField = React.createElement(index_js_2.Input, {
+  const hexInputField = React.createElement(Input_js_1.Input, {
     size: 'small',
     maxLength: showAlpha ? 9 : 7,
     minLength: 1,
     placeholder: 'HEX',
+    'aria-label': 'Hex',
     value: input[0],
     onChange: (event) => {
       const value = event.target.value.startsWith('#')
@@ -166,13 +167,14 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
   const hslInputs = React.createElement(
     React.Fragment,
     null,
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
       max: '359',
       step: '.1',
       placeholder: 'H',
+      'aria-label': 'Hue',
       value: input[0] ?? '',
       onChange: (event) => {
         setInput([event.target.value, input[1], input[2], input[3]]);
@@ -192,13 +194,14 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       status:
         Number(input[0]) < 0 || Number(input[0]) > 360 ? 'negative' : undefined,
     }),
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
       max: '100',
       step: '.1',
       placeholder: 'S',
+      'aria-label': 'Saturation',
       value: input[1] ?? '',
       onChange: (event) => {
         setInput([input[0], event.target.value, input[2], input[3]]);
@@ -218,13 +221,14 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       status:
         Number(input[1]) < 0 || Number(input[1]) > 100 ? 'negative' : undefined,
     }),
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
       max: '100',
       step: '.1',
       placeholder: 'L',
+      'aria-label': 'Lightness',
       value: input[2] ?? '',
       onChange: (event) => {
         setInput([input[0], input[1], event.target.value, input[3]]);
@@ -245,13 +249,14 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         Number(input[2]) < 0 || Number(input[2]) > 100 ? 'negative' : undefined,
     }),
     showAlpha &&
-      React.createElement(index_js_2.Input, {
+      React.createElement(Input_js_1.Input, {
         size: 'small',
         type: 'number',
         min: '0',
         max: '1',
         step: '.01',
         placeholder: 'A',
+        'aria-label': 'Alpha',
         value: input[3] ?? '',
         onChange: (event) => {
           setInput([input[0], input[1], input[2], event.target.value]);
@@ -275,12 +280,13 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
   const rgbInputs = React.createElement(
     React.Fragment,
     null,
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
       max: '255',
       placeholder: 'R',
+      'aria-label': 'Red',
       value: input[0] ?? '',
       onChange: (event) => {
         setInput([event.target.value, input[1], input[2], input[3]]);
@@ -300,12 +306,13 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       status:
         Number(input[0]) < 0 || Number(input[0]) > 255 ? 'negative' : undefined,
     }),
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
       max: '255',
       placeholder: 'G',
+      'aria-label': 'Green',
       value: input[1] ?? '',
       onChange: (event) => {
         setInput([input[0], event.target.value, input[2], input[3]]);
@@ -325,12 +332,13 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       status:
         Number(input[1]) < 0 || Number(input[1]) > 255 ? 'negative' : undefined,
     }),
-    React.createElement(index_js_2.Input, {
+    React.createElement(Input_js_1.Input, {
       size: 'small',
       type: 'number',
       min: '0',
       max: '255',
       placeholder: 'B',
+      'aria-label': 'Blue',
       value: input[2] ?? '',
       onChange: (event) => {
         setInput([input[0], input[1], event.target.value, input[3]]);
@@ -351,13 +359,14 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
         Number(input[2]) < 0 || Number(input[2]) > 255 ? 'negative' : undefined,
     }),
     showAlpha &&
-      React.createElement(index_js_2.Input, {
+      React.createElement(Input_js_1.Input, {
         size: 'small',
         type: 'number',
         min: '0',
         max: '1',
         step: '.01',
         placeholder: 'A',
+        'aria-label': 'Alpha',
         value: input[3] ?? '',
         onChange: (event) => {
           setInput([input[0], input[1], input[2], event.target.value]);
@@ -378,8 +387,9 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
           Number(input[3]) < 0 || Number(input[3]) > 1 ? 'negative' : undefined,
       }),
   );
+  const labelId = (0, index_js_1.useId)();
   return React.createElement(
-    index_js_3.Box,
+    index_js_1.Box,
     {
       className: (0, classnames_1.default)(
         'iui-color-input-wrapper',
@@ -389,24 +399,34 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       ...rest,
     },
     React.createElement(
-      index_js_3.Box,
-      { className: 'iui-color-picker-section-label' },
-      showAlpha && currentFormat != 'hex'
+      index_js_1.Box,
+      { className: 'iui-color-picker-section-label', id: labelId },
+      showAlpha && currentFormat !== 'hex'
         ? currentFormat.toUpperCase() + 'A'
         : currentFormat.toUpperCase(),
     ),
     React.createElement(
-      index_js_3.Box,
+      index_js_1.Box,
       { className: 'iui-color-input' },
       allowedColorFormats.length > 1 &&
         React.createElement(
-          index_js_1.IconButton,
-          { styleType: 'borderless', onClick: swapColorFormat, size: 'small' },
-          React.createElement(index_js_3.SvgSwap, null),
+          IconButton_js_1.IconButton,
+          {
+            styleType: 'borderless',
+            onClick: swapColorFormat,
+            size: 'small',
+            label: 'Switch format',
+          },
+          React.createElement(index_js_1.SvgSwap, null),
         ),
       React.createElement(
-        index_js_3.Box,
-        { ref: inputsContainerRef, className: 'iui-color-input-fields' },
+        index_js_1.Box,
+        {
+          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/cjs/core/ColorPicker/ColorPalette.js

@@ -27,79 +27,6 @@ exports.ColorPalette = React.forwardRef((props, ref) => {
   const { colors, label, className, children, ...rest } = props;
   const { activeColor, setActiveColor, onChangeComplete } = (0,
   ColorPickerContext_js_1.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 = (0, index_js_1.useMergedRefs)(
-    paletteRef,
-    setDefaultTabIndex,
-  );
-  // Color palette arrow key navigation
-  const handleKeyDown = (event) => {
-    if (event.altKey) {
-      return;
-    }
-    const swatches = (0, index_js_1.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 = (0, index_js_1.getFocusableElements)(paletteRef.current);
-      swatches[focusedIndex]?.focus();
-    }
-  }, [focusedIndex]);
   return React.createElement(
     index_js_1.Box,
     {
@@ -118,11 +45,7 @@ exports.ColorPalette = React.forwardRef((props, ref) => {
       ),
     React.createElement(
       index_js_1.Box,
-      {
-        className: 'iui-color-palette',
-        onKeyDown: handleKeyDown,
-        ref: paletteRefs,
-      },
+      { className: 'iui-color-palette' },
       children,
       colors &&
         colors.map((_color, index) => {
@@ -130,8 +53,7 @@ exports.ColorPalette = React.forwardRef((props, ref) => {
           return React.createElement(ColorSwatch_js_1.ColorSwatch, {
             key: index,
             color: color,
-            onClick: (event) => {
-              event.preventDefault();
+            onClick: () => {
               onChangeComplete?.(color);
               setActiveColor(color);
             },

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

@@ -38,6 +38,7 @@ exports.ColorPicker = React.forwardRef((props, forwardedRef) => {
     onChange,
     onChangeComplete,
     showAlpha = false,
+    applyBackground = true,
     ...rest
   } = props;
   const ref = React.useRef(null);
@@ -83,7 +84,11 @@ exports.ColorPicker = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     index_js_1.Box,
     {
-      className: (0, classnames_1.default)('iui-color-picker', className),
+      className: (0, classnames_1.default)(
+        'iui-color-picker',
+        { 'iui-popover-surface': applyBackground },
+        className,
+      ),
       ref: (0, index_js_1.useMergedRefs)(ref, forwardedRef),
       ...rest,
     },

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

@@ -10,6 +10,7 @@ const React = tslib_1.__importStar(require('react'));
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const index_js_1 = require('../utils/index.js');
 const ColorPicker_js_1 = require('./ColorPicker.js');
+const VisuallyHidden_js_1 = require('../VisuallyHidden/VisuallyHidden.js');
 /**
  * ColorSwatch component to display within a color palette.
  * @example
@@ -25,21 +26,30 @@ exports.ColorSwatch = React.forwardRef((props, ref) => {
         : (0, ColorPicker_js_1.getColorValue)(color).toHslString(true),
     [color],
   );
-  return React.createElement(index_js_1.Box, {
-    className: (0, classnames_1.default)(
-      'iui-color-swatch',
-      { 'iui-active': isActive },
-      className,
-    ),
-    style: {
-      '--iui-color-swatch-background': colorString,
-      ...style,
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: !!onClick ? index_js_1.ButtonBase : 'span',
+      className: (0, classnames_1.default)(
+        '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_js_1.VisuallyHidden,
+        null,
+        colorString.toUpperCase(),
+      ),
+  );
 });
 exports.default = exports.ColorSwatch;

package/cjs/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`.