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

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 3.0.0-dev.13
+
+### Major Changes
+
+- [#1548](https://github.com/iTwin/iTwinUI/pull/1548): Tabs are now always scrollable. Deprecated `overflowOptions` prop.
+
+### Minor Changes
+
+- [#1548](https://github.com/iTwin/iTwinUI/pull/1548): Added composition API to Tab. Subcomponents: Wrapper, TabList, Tab, TabLabel, TabIcon, TabDescription, Actions, Panel.
+
+### Patch Changes
+
+- [#1618](https://github.com/iTwin/iTwinUI/pull/1618): Improved accessibility of ColorPicker/ColorPalette/ColorSwatch.
+
+## 3.0.0-dev.12
+
+### Minor Changes
+
+- [#1610](https://github.com/iTwin/iTwinUI/pull/1610): Added `border` prop to `Surface`.
+
+### Patch Changes
+
+- [#1609](https://github.com/iTwin/iTwinUI/pull/1609): Adjusted padding value for `Surface.Body`.
+
 ## 3.0.0-dev.11
 
 ### Major Changes
@@ -213,6 +237,18 @@
 - Updated dependencies:
   - @itwin/itwinui-css@2.0.0-dev.0
 
+## 2.12.12
+
+### Patch Changes
+
+- [#1625](https://github.com/iTwin/iTwinUI/pull/1625): Fixed an issue where components rendered in a popout window were throwing a stylesheet-related error.
+
+## 2.12.11
+
+### Patch Changes
+
+- [#1607](https://github.com/iTwin/iTwinUI/pull/1607): Add `aria-expanded` on table row expander button
+
 ## 2.12.10
 
 ### Patch Changes

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -282,6 +282,7 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
       },
       min: 0,
       max: 359,
+      thumbProps: () => ({ 'aria-label': 'Hue' }),
     }),
     showAlpha &&
       React.createElement(Slider_js_1.Slider, {
@@ -303,6 +304,7 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
         style: {
           '--iui-color-picker-selected-color': hueColorString,
         },
+        thumbProps: () => ({ 'aria-label': 'Opacity' }),
       }),
   );
 });

package/cjs/core/ColorPicker/ColorInputPanel.js

@@ -144,6 +144,7 @@ exports.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('#')
@@ -173,6 +174,7 @@ exports.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]]);
@@ -199,6 +201,7 @@ exports.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]]);
@@ -225,6 +228,7 @@ exports.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]]);
@@ -252,6 +256,7 @@ exports.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]);
@@ -281,6 +286,7 @@ exports.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]]);
@@ -306,6 +312,7 @@ exports.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]]);
@@ -331,6 +338,7 @@ exports.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]]);
@@ -358,6 +366,7 @@ exports.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]);
@@ -378,6 +387,7 @@ 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_1.Box,
     {
@@ -390,8 +400,8 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
     },
     React.createElement(
       index_js_1.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(),
     ),
@@ -401,12 +411,22 @@ exports.ColorInputPanel = React.forwardRef((props, ref) => {
       allowedColorFormats.length > 1 &&
         React.createElement(
           IconButton_js_1.IconButton,
-          { styleType: 'borderless', onClick: swapColorFormat, size: 'small' },
+          {
+            styleType: 'borderless',
+            onClick: swapColorFormat,
+            size: 'small',
+            label: 'Switch format',
+          },
           React.createElement(index_js_1.SvgSwap, null),
         ),
       React.createElement(
         index_js_1.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/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/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/DropdownMenu/DropdownMenu.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent, PortalProps } from '../utils/index.js';
-import { Popover } from '../Popover/Popover.js';
+import { usePopover } from '../Popover/Popover.js';
 export type DropdownMenuProps = {
     /**
      * List of menu items. Recommended to use MenuItem component.
@@ -16,7 +16,7 @@ export type DropdownMenuProps = {
      * Child element to wrap dropdown with.
      */
     children: React.ReactNode;
-} & Pick<React.ComponentProps<typeof Popover>, 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & React.ComponentPropsWithoutRef<'ul'> & Pick<PortalProps, 'portal'>;
+} & Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & React.ComponentPropsWithoutRef<'ul'> & Pick<PortalProps, 'portal'>;
 /**
  * Dropdown menu component.
  * Built on top of the {@link Popover} component.

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

@@ -46,7 +46,7 @@ const Icon_js_1 = require('../Icon/Icon.js');
  *   svgIcon={<SvgCamera />}
  * />
  */
-const LabeledSelect = (props) => {
+exports.LabeledSelect = React.forwardRef((props, forwardedRef) => {
   const {
     className,
     disabled = false,
@@ -95,6 +95,7 @@ const LabeledSelect = (props) => {
       style: style,
       status: status,
       ...rest,
+      ref: forwardedRef,
       triggerProps: {
         'aria-labelledby': labelId,
         ...triggerProps,
@@ -113,6 +114,5 @@ const LabeledSelect = (props) => {
         )
       : message,
   );
-};
-exports.LabeledSelect = LabeledSelect;
+});
 exports.default = exports.LabeledSelect;

package/cjs/core/Popover/Popover.d.ts

@@ -19,12 +19,10 @@ type PopoverOptions = {
     onVisibleChange?: (visible: boolean) => void;
     /**
      * If true, the popover will close when clicking outside it.
+     *
+     * @default true
      */
     closeOnOutsideClick?: boolean;
-    /**
-     * Whether the popover should match the width of the trigger.
-     */
-    matchWidth?: boolean;
 };
 type PopoverInternalProps = {
     /**
@@ -64,6 +62,10 @@ type PopoverInternalProps = {
      */
     trigger?: Partial<Record<'hover' | 'click' | 'focus', boolean>>;
     role?: 'dialog' | 'menu' | 'listbox';
+    /**
+     * Whether the popover should match the width of the trigger.
+     */
+    matchWidth?: boolean;
 };
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
     placement: Placement;
@@ -109,13 +111,31 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
     onOpenChange: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 };
 type PopoverPublicProps = {
+    /**
+     * Content displayed inside the popover.
+     */
     content?: React.ReactNode;
+    /**
+     * Element that triggers the popover. Should usually be a button.
+     */
     children?: React.ReactNode;
+    /**
+     * Whether the popover adds recommended CSS (background-color, box-shadow, etc.) to itself.
+     *
+     * @default false
+     */
     applyBackground?: boolean;
 } & PortalProps & PopoverOptions;
 /**
- * A utility component to help with positioning of floating content.
- * Built on top of [`floating-ui`](https://floating-ui.com/)
+ * A utility component to help with positioning of floating content relative to a trigger.
+ * Built on top of [`floating-ui`](https://floating-ui.com/).
+ *
+ * @see https://itwinui.bentley.com/docs/popover
+ *
+ * @example
+ * <Popover content='This is a popover'>
+ *   <Button>Show popover</Button>
+ * </Popover>
  */
 export declare const Popover: PolymorphicForwardRefComponent<"div", PopoverPublicProps>;
 export default Popover;

package/cjs/core/Popover/Popover.js

@@ -96,8 +96,15 @@ const usePopover = (options) => {
 };
 exports.usePopover = usePopover;
 /**
- * A utility component to help with positioning of floating content.
- * Built on top of [`floating-ui`](https://floating-ui.com/)
+ * A utility component to help with positioning of floating content relative to a trigger.
+ * Built on top of [`floating-ui`](https://floating-ui.com/).
+ *
+ * @see https://itwinui.bentley.com/docs/popover
+ *
+ * @example
+ * <Popover content='This is a popover'>
+ *   <Button>Show popover</Button>
+ * </Popover>
  */
 exports.Popover = React.forwardRef((props, forwardedRef) => {
   const {
@@ -105,16 +112,15 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
     //
     // popover options
     visible,
-    placement,
+    placement = 'bottom-start',
     onVisibleChange,
-    closeOnOutsideClick,
-    matchWidth,
+    closeOnOutsideClick = true,
     //
     // dom props
     className,
     children,
     content,
-    applyBackground,
+    applyBackground = false,
     ...rest
   } = props;
   const popover = (0, exports.usePopover)({
@@ -122,7 +128,6 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
     placement,
     onVisibleChange,
     closeOnOutsideClick,
-    matchWidth,
     role: 'dialog',
   });
   const [popoverElement, setPopoverElement] = React.useState();
@@ -131,10 +136,13 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
     forwardedRef,
     setPopoverElement,
   );
+  const triggerId = `${(0, index_js_1.useId)()}-trigger`;
+  const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
   return React.createElement(
     React.Fragment,
     null,
     (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+      id: children.props.id || triggerId,
       ...popover.getReferenceProps(children.props),
       ref: popover.refs.setReference,
     })),
@@ -143,27 +151,33 @@ exports.Popover = React.forwardRef((props, forwardedRef) => {
           Portal_js_1.Portal,
           { portal: portal },
           React.createElement(
-            ThemeProvider_js_1.ThemeProvider,
-            { portalContainer: popoverElement },
+            react_1.FloatingPortal,
+            null,
             React.createElement(
-              react_1.FloatingFocusManager,
-              {
-                context: popover.context,
-                modal: false,
-                initialFocus: -1,
-                returnFocus: true,
-              },
+              ThemeProvider_js_1.ThemeProvider,
+              { portalContainer: popoverElement },
               React.createElement(
-                index_js_1.Box,
+                react_1.FloatingFocusManager,
                 {
-                  className: (0, classnames_1.default)(
-                    { 'iui-popover-surface': applyBackground },
-                    className,
-                  ),
-                  ...popover.getFloatingProps(rest),
-                  ref: popoverRef,
+                  context: popover.context,
+                  modal: false,
+                  initialFocus: popover.refs.floating,
                 },
-                content,
+                React.createElement(
+                  index_js_1.Box,
+                  {
+                    className: (0, classnames_1.default)(
+                      { 'iui-popover-surface': applyBackground },
+                      className,
+                    ),
+                    'aria-labelledby': !hasAriaLabel
+                      ? popover.refs.domReference.current?.id
+                      : undefined,
+                    ...popover.getFloatingProps(rest),
+                    ref: popoverRef,
+                  },
+                  content,
+                ),
               ),
             ),
           ),

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

@@ -71,7 +71,7 @@ const isSingleOnChange = (onChange, multiple) => {
  *   )}
  * />
  */
-const Select = (props) => {
+exports.Select = React.forwardRef((props, forwardedRef) => {
   const uid = (0, index_js_1.useId)();
   const {
     options,
@@ -192,7 +192,10 @@ const Select = (props) => {
         className: (0, classnames_1.default)('iui-input-with-icon', className),
         style: style,
         ...rest,
-        ref: popover.refs.setPositionReference,
+        ref: (0, index_js_1.useMergedRefs)(
+          popover.refs.setPositionReference,
+          forwardedRef,
+        ),
       },
       React.createElement(
         index_js_1.Box,
@@ -282,8 +285,7 @@ const Select = (props) => {
         ),
       ),
   );
-};
-exports.Select = Select;
+});
 const SingleSelectButton = ({ selectedItem, selectedItemRenderer }) => {
   const startIcon = selectedItem?.startIcon ?? selectedItem?.icon;
   return React.createElement(

package/cjs/core/Surface/Surface.d.ts

@@ -11,6 +11,14 @@ type SurfaceProps = {
      * Sets the elevation of the surface
      */
     elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * Sets the border of the surface.
+     *
+     * Can be a boolean to toggle the default border, or a string value to specify a custom border.
+     *
+     * @default true
+     */
+    border?: boolean | string;
     /**
      * Content in the surface.
      */

package/cjs/core/Surface/Surface.js

@@ -30,6 +30,16 @@ const getSurfaceElevationValue = (elevation) => {
       return '';
   }
 };
+/** Returns correct border value based on prop */
+const getBorderValue = (border) => {
+  if (typeof border === 'string') {
+    return border;
+  }
+  if (border === false) {
+    return 'none';
+  }
+  return '';
+};
 // ----------------------------------------------------------------------------
 // Surface.Header component
 const SurfaceHeader = React.forwardRef((props, ref) => {
@@ -81,10 +91,18 @@ const SurfaceBody = React.forwardRef((props, ref) => {
  */
 exports.Surface = Object.assign(
   React.forwardRef((props, ref) => {
-    const { elevation, className, style, children, ...rest } = props;
+    const {
+      elevation,
+      border = true,
+      className,
+      style,
+      children,
+      ...rest
+    } = props;
     const [hasLayout, setHasLayout] = React.useState(false);
     const _style = {
       '--iui-surface-elevation': getSurfaceElevationValue(elevation),
+      '--iui-surface-border': getBorderValue(border),
       ...style,
     };
     return React.createElement(

package/cjs/core/Table/columns/expanderColumn.js

@@ -62,6 +62,7 @@ const ExpanderColumn = (props = {}) => {
               row.toggleRowExpanded();
             },
             disabled: isDisabled?.(props.row.original),
+            'aria-expanded': row.isExpanded,
           },
           React.createElement(index_js_1.SvgChevronRight, null),
         );