@itwin/itwinui-react 3.0.0-dev.6 → 3.0.0-dev.7

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 3.0.0-dev.7
+
+### Major Changes
+
+- [#1478](https://github.com/iTwin/iTwinUI/pull/1478): ThemeProvider now defaults the `theme` value to `"inherit"` and falls back to `"light"` there is no parent theme found. Also the inherit behavior has been made more resilient for cases where react context fails.
+- [#1458](https://github.com/iTwin/iTwinUI/pull/1458): Added wrapperProps, contentProps, topProps, and bottomProps to Side Navigation component to improve customization. Top-level props (className, styling, etc) now passed to SideNav button instead of to the wrapper.
+- [#1435](https://github.com/iTwin/iTwinUI/pull/1435): Improving customization of SplitButton with wrapperProps and menuButtonProps. ClassName now passed to the button instead of the component wrapper.
+- [#1461](https://github.com/iTwin/iTwinUI/pull/1461): Changed disabled button behavior to make them focusable and use `aria-disabled` instead of `disabled` attribute.
+
+### Minor Changes
+
+- [#1440](https://github.com/iTwin/iTwinUI/pull/1440): Adding the ability for every DOM node to have a custom className passed to it.
+  New prop for `FileUpload` component: `contentProps`
+- [#1430](https://github.com/iTwin/iTwinUI/pull/1430): Adding the ability for each node element in `Stepper` to have a custom `prop`.
+  New props include: `stepProps`, `trackContentProps`, `circleProps`, `nameProps`, `labelProps`, `labelCountProps`
+- [#1435](https://github.com/iTwin/iTwinUI/pull/1435): Improving customization of Button with new props: labelProps, startIconProps, and endIconProps.
+  Improving customization of IconButton with iconProps.
+- [#1477](https://github.com/iTwin/iTwinUI/pull/1477): Added a new `portalContainer` prop to `ThemeProvider`. When specified, all floating elements (tooltips, toats, dialogs) under the ThemeProvider will read this prop from context and portal into it.
+
+### Patch Changes
+
+- [#1446](https://github.com/iTwin/iTwinUI/pull/1446): Avatar has been refactored to be a single `<span>`. The colors have been updated to pass AAA contrast ratio.
+- [#1492](https://github.com/iTwin/iTwinUI/pull/1492): Fixed `aria-owns` syntax for `TreeNode`
+- [#1486](https://github.com/iTwin/iTwinUI/pull/1486): DatePicker date tables now have accessible labels.
+- [#1499](https://github.com/iTwin/iTwinUI/pull/1499): Removed special handling of iPhone notch in Header and SideNavigation.
+
 ## 3.0.0-dev.6
 
 ### Major Changes
@@ -120,6 +146,25 @@
 - Updated dependencies:
   - @itwin/itwinui-css@2.0.0-dev.0
 
+## 2.12.3
+
+### Patch Changes
+
+- [#1485](https://github.com/iTwin/iTwinUI/pull/1485): Improved color contrast for input and select placeholder text.
+- [#1501](https://github.com/iTwin/iTwinUI/pull/1501): Fixed a small misalignment in Table when using sticky columns.
+
+## 2.12.2
+
+### Patch Changes
+
+- [#1494](https://github.com/iTwin/iTwinUI/pull/1494): Updated color-picker dot so its outline adapts dynamically to the backgrounds for better contrast.
+
+## 2.12.1
+
+### Patch Changes
+
+- [#1467](https://github.com/iTwin/iTwinUI/pull/1467): Fixed an issue in Carousel where latest `onSlideChange` callback was being ignored.
+
 ## 2.12.0
 
 ### Minor Changes

package/cjs/core/Avatar/Avatar.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { SoftBackgrounds } from '../utils/index.js';
+import type { AnyString, PolymorphicForwardRefComponent } from '../utils/index.js';
 export type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 type StatusTitles = {
     [key in Exclude<AvatarStatus, ''>]: string;
@@ -29,7 +30,7 @@ type AvatarProps = {
     /**
      * Color of the icon. You can use `getUserColor` function to generate color from user name or email. If not provided, default background color from CSS styling will be used (hsl(72, 51%, 56%) / olive green).
      */
-    backgroundColor?: string;
+    backgroundColor?: keyof typeof SoftBackgrounds | AnyString;
     /**
      * Translated status messages shown on hover.
      */

package/cjs/core/Avatar/Avatar.js

@@ -9,6 +9,17 @@ const tslib_1 = require('tslib');
 const classnames_1 = tslib_1.__importDefault(require('classnames'));
 const React = tslib_1.__importStar(require('react'));
 const index_js_1 = require('../utils/index.js');
+/**
+ * Helper function that returns one of the preset badge color values.
+ */
+const getBackground = (color) => {
+  if (!color) {
+    return '';
+  }
+  return (0, index_js_1.isSoftBackground)(color)
+    ? index_js_1.SoftBackgrounds[color]
+    : color;
+};
 exports.defaultStatusTitles = {
   away: 'Away',
   busy: 'Busy',
@@ -56,30 +67,21 @@ exports.Avatar = React.forwardRef((props, ref) => {
         { [`iui-${size}`]: size !== 'medium' },
         className,
       ),
+      'data-iui-status': status,
       title: title,
-      style: { backgroundColor, ...style },
+      style: { backgroundColor: getBackground(backgroundColor), ...style },
       ref: ref,
       ...rest,
     },
-    !image &&
-      React.createElement(
-        index_js_1.Box,
-        { as: 'abbr', className: 'iui-initials' },
-        abbreviation?.substring(0, 2),
-      ),
+    !image ? abbreviation?.substring(0, 2) : null,
     image,
-    React.createElement(index_js_1.Box, {
-      as: 'span',
-      className: 'iui-stroke',
-    }),
-    status &&
-      React.createElement(index_js_1.Box, {
-        as: 'span',
-        title: statusTitles[status],
-        className: (0, classnames_1.default)('iui-status', {
-          [`iui-${status}`]: !!status,
-        }),
-      }),
+    status
+      ? React.createElement(
+          index_js_1.VisuallyHidden,
+          null,
+          statusTitles[status],
+        )
+      : null,
   );
 });
 exports.default = exports.Avatar;

package/cjs/core/AvatarGroup/AvatarGroup.js

@@ -89,14 +89,9 @@ exports.AvatarGroup = React.forwardRef((props, ref) => {
               countIconProps?.className,
             ),
           },
-          React.createElement(
-            index_js_1.Box,
-            { as: 'abbr', className: 'iui-initials' },
-            childrenLength <= maxLength
-              ? `${childrenLength - maxIcons}`
-              : `${maxLength}+`,
-          ),
-          React.createElement(index_js_1.Box, { className: 'iui-stroke' }),
+          childrenLength <= maxLength
+            ? `${childrenLength - maxIcons}`
+            : `${maxLength}+`,
         ),
       ),
   );

package/cjs/core/Buttons/Button/Button.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+import * as React from 'react';
+import { ButtonBase } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type ButtonProps = {
     /**
@@ -19,7 +20,19 @@ export type ButtonProps = {
      * Icon shown after the main button content.
      */
     endIcon?: JSX.Element;
-};
+    /**
+     * Passes props to the button label.
+     */
+    labelProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to the start icon.
+     */
+    startIconProps?: React.ComponentProps<'span'>;
+    /**
+     * Passes props to the end icon.
+     */
+    endIconProps?: React.ComponentProps<'span'>;
+} & Pick<React.ComponentProps<typeof ButtonBase>, 'htmlDisabled'>;
 /**
  * Generic button component
  * @example

package/cjs/core/Buttons/Button/Button.js

@@ -23,36 +23,50 @@ exports.Button = React.forwardRef((props, ref) => {
     children,
     className,
     size,
-    style,
     styleType = 'default',
-    type = 'button',
     startIcon,
     endIcon,
+    labelProps,
+    startIconProps,
+    endIconProps,
     ...rest
   } = props;
   return React.createElement(
-    index_js_1.Box,
+    index_js_1.ButtonBase,
     {
-      as: 'button',
       ref: ref,
       className: (0, classnames_1.default)('iui-button', className),
       'data-iui-variant': styleType !== 'default' ? styleType : undefined,
       'data-iui-size': size,
-      style: style,
-      type: type,
       ...rest,
     },
     startIcon &&
       React.createElement(
         index_js_1.Box,
-        { as: 'span', className: 'iui-button-icon', 'aria-hidden': true },
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...startIconProps,
+          className: (0, classnames_1.default)(
+            'iui-button-icon',
+            startIconProps?.className,
+          ),
+        },
         startIcon,
       ),
-    children && React.createElement('span', null, children),
+    children && React.createElement('span', { ...labelProps }, children),
     endIcon &&
       React.createElement(
         index_js_1.Box,
-        { as: 'span', className: 'iui-button-icon', 'aria-hidden': true },
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...endIconProps,
+          className: (0, classnames_1.default)(
+            'iui-button-icon',
+            endIconProps?.className,
+          ),
+        },
         endIcon,
       ),
   );

package/cjs/core/Buttons/DropdownButton/DropdownButton.js

@@ -52,7 +52,7 @@ exports.DropdownButton = React.forwardRef((props, ref) => {
         setIsMenuOpen(false);
         dropdownMenuProps?.onHide?.(i);
       },
-      style: { minWidth: menuWidth, ...dropdownMenuProps?.style },
+      style: { minInlineSize: menuWidth, ...dropdownMenuProps?.style },
     },
     React.createElement(
       index_js_1.Button,

package/cjs/core/Buttons/IconButton/IconButton.d.ts

@@ -11,7 +11,11 @@ export type IconButtonProps = {
      * Name of the button, shown in a tooltip and exposed to assistive technologies.
      */
     label?: React.ReactNode;
-} & Omit<ButtonProps, 'startIcon' | 'endIcon'>;
+    /**
+     * Passes props to IconButton icon.
+     */
+    iconProps?: React.ComponentProps<'span'>;
+} & Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconProps' | 'endIconProps' | 'labelProps'>;
 /**
  * Icon button
  * @example

package/cjs/core/Buttons/IconButton/IconButton.js

@@ -22,30 +22,36 @@ exports.IconButton = React.forwardRef((props, ref) => {
     children,
     styleType = 'default',
     size,
-    type = 'button',
     className,
     label,
+    iconProps,
     ...rest
   } = props;
   return React.createElement(
     IconButtonTooltip,
     { label: label },
     React.createElement(
-      index_js_1.Box,
+      index_js_1.ButtonBase,
       {
-        as: 'button',
         ref: ref,
         className: (0, classnames_1.default)('iui-button', className),
         'data-iui-variant': styleType !== 'default' ? styleType : undefined,
         'data-iui-size': size,
         'data-iui-active': isActive,
         'aria-pressed': isActive,
-        type: type,
         ...rest,
       },
       React.createElement(
         index_js_1.Box,
-        { as: 'span', className: 'iui-button-icon', 'aria-hidden': true },
+        {
+          as: 'span',
+          'aria-hidden': true,
+          ...iconProps,
+          className: (0, classnames_1.default)(
+            'iui-button-icon',
+            iconProps?.className,
+          ),
+        },
         children,
       ),
       label

package/cjs/core/Buttons/SplitButton/SplitButton.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from '../Button/Button.js';
+import { IconButton } from '../IconButton/index.js';
 import type { Placement } from 'tippy.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type SplitButtonProps = ButtonProps & {
@@ -18,6 +19,14 @@ export type SplitButtonProps = ButtonProps & {
      * Content of primary button.
      */
     children: React.ReactNode;
+    /**
+     * Passes props to SplitButton wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to SplitButton menu button.
+     */
+    menuButtonProps?: React.ComponentProps<typeof IconButton>;
 };
 /**
  * Split button component with a DropdownMenu.

package/cjs/core/Buttons/SplitButton/SplitButton.js

@@ -35,31 +35,35 @@ exports.SplitButton = React.forwardRef((props, forwardedRef) => {
     styleType = 'default',
     size,
     children,
-    style,
-    title,
+    wrapperProps,
+    menuButtonProps,
     ...rest
   } = props;
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   const [menuWidth, setMenuWidth] = React.useState(0);
-  const ref = React.useRef(null);
+  const wrapperRef = React.useRef(null);
   React.useEffect(() => {
-    if (ref.current) {
-      setMenuWidth(ref.current.offsetWidth);
+    if (wrapperRef.current) {
+      setMenuWidth(wrapperRef.current.offsetWidth);
     }
   }, [children, size]);
   return React.createElement(
     index_js_4.Box,
     {
-      className: (0, classnames_1.default)(className, 'iui-button-split', {
-        'iui-disabled': props.disabled,
-      }),
-      style: style,
-      title: title,
-      ref: ref,
+      ...wrapperProps,
+      className: (0, classnames_1.default)(
+        'iui-button-split',
+        {
+          'iui-disabled': props.disabled,
+        },
+        wrapperProps?.className,
+      ),
+      ref: wrapperRef,
     },
     React.createElement(
       index_js_1.Button,
       {
+        className: className,
         styleType: styleType,
         size: size,
         onClick: onClick,
@@ -73,13 +77,18 @@ exports.SplitButton = React.forwardRef((props, forwardedRef) => {
       {
         placement: menuPlacement,
         menuItems: menuItems,
-        style: { minWidth: menuWidth },
+        style: { minInlineSize: menuWidth },
         onShow: React.useCallback(() => setIsMenuOpen(true), []),
         onHide: React.useCallback(() => setIsMenuOpen(false), []),
       },
       React.createElement(
         index_js_2.IconButton,
-        { styleType: styleType, size: size, disabled: props.disabled },
+        {
+          styleType: styleType,
+          size: size,
+          disabled: props.disabled,
+          ...menuButtonProps,
+        },
         isMenuOpen
           ? React.createElement(index_js_4.SvgCaretUpSmall, null)
           : React.createElement(index_js_4.SvgCaretDownSmall, null),

package/cjs/core/Carousel/Carousel.d.ts

@@ -38,18 +38,20 @@ export declare const Carousel: PolymorphicForwardRefComponent<"section", Carouse
     Navigation: PolymorphicForwardRefComponent<"nav", {}> & {
         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" | "styleType" | "isActive"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
-        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+            iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
         NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-        }, "label" | "as" | "size" | "styleType" | "isActive"> & {
+        }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
             isActive?: boolean | undefined;
             label?: React.ReactNode;
-        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+            iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+        } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
             as?: "button" | undefined;
         }>;
     };

package/cjs/core/Carousel/Carousel.js

@@ -74,10 +74,10 @@ const CarouselComponent = React.forwardRef((props, ref) => {
       }
     }
   };
-  const userOnSlideChange = React.useRef(onSlideChange);
+  const userOnSlideChange = (0, index_js_1.useLatestRef)(onSlideChange);
   React.useEffect(() => {
     userOnSlideChange.current?.(currentIndex);
-  }, [currentIndex]);
+  }, [userOnSlideChange, currentIndex]);
   return React.createElement(
     index_js_1.Box,
     {

package/cjs/core/Carousel/CarouselDot.js

@@ -15,9 +15,7 @@ const index_js_1 = require('../utils/index.js');
  */
 exports.CarouselDot = React.forwardRef((props, ref) => {
   const { isActive, isSmaller, isSmall, className, ...rest } = props;
-  return React.createElement(index_js_1.Box, {
-    as: 'button',
-    type: 'button',
+  return React.createElement(index_js_1.ButtonBase, {
     role: 'tab',
     tabIndex: -1,
     className: (0, classnames_1.default)(

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

@@ -9,18 +9,20 @@ import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 export declare const CarouselNavigation: PolymorphicForwardRefComponent<"nav", {}> & {
     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" | "styleType" | "isActive"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
     NextButton: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "styleType" | "isActive"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "isActive" | "iconProps"> & {
         isActive?: boolean | undefined;
         label?: React.ReactNode;
-    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon"> & {
+        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
+    } & Omit<import("../Buttons/Button/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
         as?: "button" | undefined;
     }>;
 };

package/cjs/core/ColorPicker/ColorBuilder.js

@@ -254,7 +254,8 @@ exports.ColorBuilder = React.forwardRef((props, ref) => {
       React.createElement(index_js_1.Box, {
         className: 'iui-color-dot',
         style: {
-          '--iui-color-dot-inset': `${squareTop.toString()}% auto auto ${squareLeft.toString()}%`,
+          '--iui-color-dot-inset-block': `${squareTop.toString()}% auto`,
+          '--iui-color-dot-inset-inline': `${squareLeft.toString()}% auto`,
         },
         onPointerDown: () => {
           setColorDotActive(true);

package/cjs/core/ComboBox/ComboBoxInput.js

@@ -195,7 +195,7 @@ exports.ComboBoxInput = React.forwardRef((props, forwardedRef) => {
       spellCheck: false,
       autoCapitalize: 'none',
       autoCorrect: 'off',
-      style: multiple ? { paddingLeft: tagContainerWidth + 18 } : {},
+      style: multiple ? { paddingInlineStart: tagContainerWidth + 18 } : {},
       'aria-describedby': multiple ? `${id}-selected-live` : undefined,
       ...rest,
     }),

package/cjs/core/ComboBox/ComboBoxMenu.js

@@ -48,11 +48,11 @@ const VirtualizedComboBoxMenu = React.forwardRef(
       scrollToIndex: focusedVisibleIndex,
     });
     const surfaceStyles = {
-      minWidth,
+      minInlineSize: minWidth,
       // set as constant because we don't want it shifting when items are unmounted
-      maxWidth: minWidth,
+      maxInlineSize: minWidth,
       // max-height must be on the outermost element for virtual scroll
-      maxHeight: 'calc((var(--iui-component-height) - 1px) * 8.5)',
+      maxBlockSize: 'calc((var(--iui-component-height) - 1px) * 8.5)',
       overflowY: isOverflowOverlaySupported() ? 'overlay' : 'auto',
       ...style,
     };
@@ -94,8 +94,8 @@ exports.ComboBoxMenu = React.forwardRef((props, forwardedRef) => {
   const refs = (0, index_js_3.useMergedRefs)(menuRef, forwardedRef);
   const styles = React.useMemo(
     () => ({
-      minWidth,
-      maxWidth: `min(${minWidth * 2}px, 90vw)`,
+      minInlineSize: minWidth,
+      maxInlineSize: `min(${minWidth * 2}px, 90vw)`,
     }),
     [minWidth],
   );

package/cjs/core/DatePicker/DatePicker.js

@@ -407,6 +407,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
     }
     return dayClass;
   };
+  const dateTableId = (0, index_js_1.useId)();
   return React.createElement(
     index_js_1.Box,
     {
@@ -449,6 +450,7 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
             {
               as: 'span',
               className: 'iui-calendar-month',
+              id: dateTableId,
               title: monthNames[displayedMonthIndex],
             },
             monthNames[displayedMonthIndex],
@@ -487,7 +489,11 @@ exports.DatePicker = React.forwardRef((props, forwardedRef) => {
       ),
       React.createElement(
         'div',
-        { onKeyDown: handleCalendarKeyDown, role: 'listbox' },
+        {
+          onKeyDown: handleCalendarKeyDown,
+          role: 'listbox',
+          'aria-labelledby': dateTableId,
+        },
         weeks.map((weekDays, weekIndex) => {
           return React.createElement(
             index_js_1.Box,

package/cjs/core/Dialog/Dialog.js

@@ -41,8 +41,7 @@ const DialogComponent = React.forwardRef((props, ref) => {
     typeof portal !== 'boolean'
       ? portal.to
       : portal
-      ? context?.portalContainerRef?.current ??
-        (0, index_js_1.getDocument)()?.body
+      ? context?.portalContainer || (0, index_js_1.getDocument)()?.body
       : null;
   const dialog = React.createElement(index_js_1.Box, {
     className: (0, classnames_1.default)('iui-dialog-wrapper', className),

package/cjs/core/Dialog/DialogMain.js

@@ -122,10 +122,10 @@ exports.DialogMain = React.forwardRef((props, ref) => {
     );
     setStyle((oldStyle) => ({
       ...oldStyle,
-      width: rect?.width,
-      height: rect?.height,
-      left: dialogRef.current?.offsetLeft,
-      top: dialogRef.current?.offsetTop,
+      inlineSize: rect?.width,
+      blockSize: rect?.height,
+      insetInlineStart: dialogRef.current?.offsetLeft,
+      insetBlockStart: dialogRef.current?.offsetTop,
       transform: `translate(${translateX}px,${translateY}px)`,
     }));
   }, [isDraggable, isOpen]);
@@ -167,7 +167,7 @@ exports.DialogMain = React.forwardRef((props, ref) => {
         onResizeStart: () => {
           if (!hasBeenResized.current) {
             hasBeenResized.current = true;
-            setResizeStyle({ maxWidth: '100%' });
+            setResizeStyle({ maxInlineSize: '100%' });
           }
         },
         onResizeEnd: setResizeStyle,

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -68,10 +68,8 @@ const ExpandableBlockHeader = React.forwardRef((props, forwardedRef) => {
   const { isExpanded, setExpanded, disabled, onToggle } = (0,
   index_js_1.useSafeContext)(ExpandableBlockContext);
   return React.createElement(
-    index_js_1.Box,
+    index_js_1.ButtonBase,
     {
-      as: 'button',
-      type: 'button',
       className: (0, classnames_1.default)('iui-expandable-header', className),
       'aria-expanded': isExpanded,
       'aria-disabled': disabled,

package/cjs/core/FileUpload/FileUpload.d.ts

@@ -15,6 +15,10 @@ type FileUploadProps = {
      * Either pass `FileUploadCard` (for default state) or a different component to wrap.
      */
     children: React.ReactNode;
+    /**
+     *  Allows for custom prop to be passed for content.
+     */
+    contentProps?: React.ComponentProps<'div'>;
 };
 /**
  * File upload component to be wrapped around `FileUploadCard` or any arbitrary component.