@itwin/itwinui-react 3.0.0-dev.12 → 3.0.0-dev.13

package/cjs/core/ThemeProvider/ThemeProvider.js

@@ -55,7 +55,9 @@ exports.ThemeProvider = React.forwardRef((props, forwardedRef) => {
   const shouldApplyBackground = themeOptions?.applyBackground ?? !parentTheme;
   const contextValue = React.useMemo(
     () => ({ theme, themeOptions, portalContainer }),
-    [theme, themeOptions, portalContainer],
+    // we do include all dependencies below, but we want to stringify the objects as they could be different on each render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [theme, JSON.stringify(themeOptions), portalContainer],
   );
   return React.createElement(
     ThemeContext_js_1.ThemeContext.Provider,

package/cjs/index.d.ts

@@ -39,8 +39,7 @@ export { HeaderLogo } from './core/Header/HeaderLogo.js';
 export { List } from './core/List/List.js';
 export { ListItem } from './core/List/ListItem.js';
 export { TransferList } from './core/TransferList/TransferList.js';
-export { Tabs } from './core/Tabs/Tabs.js';
-export { Tab } from './core/Tabs/Tab.js';
+export { Tabs, Tab } from './core/Tabs/Tabs.js';
 export { InformationPanel } from './core/InformationPanel/InformationPanel.js';
 export { InformationPanelWrapper } from './core/InformationPanel/InformationPanelWrapper.js';
 export { InformationPanelHeader } from './core/InformationPanel/InformationPanelHeader.js';

package/cjs/index.js

@@ -420,11 +420,10 @@ Object.defineProperty(exports, 'Tabs', {
     return Tabs_js_1.Tabs;
   },
 });
-var Tab_js_1 = require('./core/Tabs/Tab.js');
 Object.defineProperty(exports, 'Tab', {
   enumerable: true,
   get: function () {
-    return Tab_js_1.Tab;
+    return Tabs_js_1.Tab;
   },
 });
 var InformationPanel_js_1 = require('./core/InformationPanel/InformationPanel.js');

package/cjs/styles.js

@@ -215,10 +215,10 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-usy2q6d': '_iui3-usy2q6d',
+  'iui-uktpgli': '_iui3-uktpgli',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-usy2q6u': '_iui3-usy2q6u',
+  'iui-uktpgmg': '_iui3-uktpgmg',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
@@ -326,9 +326,11 @@ const styles = {
   'iui-tabs-wrapper': '_iui3-tabs-wrapper',
   'iui-horizontal': '_iui3-horizontal',
   'iui-tabs': '_iui3-tabs',
+  'scroll-shadow-inset-horizontal': '_iui3-scroll-shadow-inset-horizontal',
   'iui-borderless': '_iui3-borderless',
   'iui-tab': '_iui3-tab',
   'iui-vertical': '_iui3-vertical',
+  'scroll-shadow-inset-vertical': '_iui3-scroll-shadow-inset-vertical',
   'iui-tabs-content': '_iui3-tabs-content',
   'iui-tabs-actions-wrapper': '_iui3-tabs-actions-wrapper',
   'iui-default': '_iui3-default',

package/esm/core/ColorPicker/ColorBuilder.js

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

@@ -6,7 +6,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Input } from '../Input/Input.js';
-import { ColorValue, SvgSwap, Box } from '../utils/index.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/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/LabeledSelect/LabeledSelect.d.ts

@@ -76,5 +76,5 @@ export type LabeledSelectProps<T> = {
  *   svgIcon={<SvgCamera />}
  * />
  */
-export declare const LabeledSelect: <T>(props: LabeledSelectProps<T>) => JSX.Element;
+export declare const LabeledSelect: React.ForwardRefExoticComponent<LabeledSelectProps<unknown> & React.RefAttributes<HTMLElement>>;
 export default LabeledSelect;

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -42,7 +42,7 @@ import { Icon } from '../Icon/Icon.js';
  *   svgIcon={<SvgCamera />}
  * />
  */
-export const LabeledSelect = (props) => {
+export const LabeledSelect = React.forwardRef((props, forwardedRef) => {
   const {
     className,
     disabled = false,
@@ -91,6 +91,7 @@ export const LabeledSelect = (props) => {
       style: style,
       status: status,
       ...rest,
+      ref: forwardedRef,
       triggerProps: {
         'aria-labelledby': labelId,
         ...triggerProps,
@@ -109,5 +110,5 @@ export const LabeledSelect = (props) => {
         )
       : message,
   );
-};
+});
 export default LabeledSelect;

package/esm/core/Select/Select.d.ts

@@ -168,5 +168,5 @@ export type SelectProps<T> = {
  *   )}
  * />
  */
-export declare const Select: <T>(props: SelectProps<T>) => JSX.Element;
+export declare const Select: React.ForwardRefExoticComponent<SelectProps<unknown> & React.RefAttributes<HTMLElement>>;
 export default Select;

package/esm/core/Select/Select.js

@@ -75,7 +75,7 @@ const isSingleOnChange = (onChange, multiple) => {
  *   )}
  * />
  */
-export const Select = (props) => {
+export const Select = React.forwardRef((props, forwardedRef) => {
   const uid = useId();
   const {
     options,
@@ -194,7 +194,7 @@ export const Select = (props) => {
         className: cx('iui-input-with-icon', className),
         style: style,
         ...rest,
-        ref: popover.refs.setPositionReference,
+        ref: useMergedRefs(popover.refs.setPositionReference, forwardedRef),
       },
       React.createElement(
         Box,
@@ -281,7 +281,7 @@ export const Select = (props) => {
         ),
       ),
   );
-};
+});
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
   const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
   return React.createElement(