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

package/esm/core/ComboBox/helpers.d.ts

@@ -25,8 +25,7 @@ export declare const comboBoxReducer: (state: {
 };
 export declare const ComboBoxRefsContext: React.Context<{
     inputRef: React.RefObject<HTMLInputElement>;
-    menuRef: React.RefObject<HTMLUListElement>;
-    toggleButtonRef: React.RefObject<HTMLSpanElement>;
+    menuRef: React.RefObject<HTMLElement>;
     optionsExtraInfoRef: React.MutableRefObject<Record<string, {
         __originalIndex: number;
     }>>;

package/esm/core/DatePicker/DatePicker.d.ts

@@ -1,14 +1,14 @@
+import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import type { TimePickerProps } from '../TimePicker/TimePicker.js';
+export type DatePickerLocalizedNames = {
+    [key in 'months' | 'shortDays' | 'days']: string[];
+};
 /**
  * Generate localized months and days strings using `Intl.DateTimeFormat` for passed locale to use in DatePicker component.
  * If locale is not passed, browser locale will be used.
  */
-export declare const generateLocalizedStrings: (locale?: string) => {
-    months: string[];
-    shortDays: string[];
-    days: string[];
-};
+export declare const generateLocalizedStrings: (locale?: string) => DatePickerLocalizedNames;
 export type DateRangePickerProps = {
     /**
      * Enable date range support.
@@ -42,9 +42,7 @@ type DatePickerProps = {
      * Pass localized week days (start from sunday) and months.
      * Use helper function `generateLocalizedStrings` to generate strings using `Intl.DateTimeFormat`.
      */
-    localizedNames?: {
-        [key in 'months' | 'shortDays' | 'days']: string[];
-    };
+    localizedNames?: DatePickerLocalizedNames;
     /**
      * Set focus on selected day or today.
      * @default false
@@ -60,6 +58,30 @@ type DatePickerProps = {
      * @default false
      */
     showYearSelection?: boolean;
+    /**
+     * Allows props to be passed for calendar month year, referring to the div that wraps around the month/year and the next/previous buttons.
+     */
+    monthYearProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for only month, referring to span that wraps around the month title.
+     */
+    monthProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for week days, referring to div that wraps around the week day title.
+     */
+    weekDayProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for individual day , referring to div element the wraps around single day number.
+     */
+    dayProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for calendar, referring to div that is used for listbox for wraping days and weeks.
+     */
+    calendarProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for weeks, referring to div that wraps around weeks.
+     */
+    weekProps?: React.ComponentProps<'div'>;
     /**
      * Will disable dates for which this function returns true.
      * Disabled dates cannot be selected.

package/esm/core/DatePicker/DatePicker.js

@@ -11,6 +11,7 @@ import {
   SvgChevronRightDouble,
   isBefore,
   Box,
+  useId,
 } from '../utils/index.js';
 import { IconButton } from '../Buttons/IconButton/index.js';
 import { TimePicker } from '../TimePicker/index.js';
@@ -141,6 +142,12 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
     enableRangeSelect = false,
     startDate,
     endDate,
+    monthYearProps,
+    calendarProps,
+    monthProps,
+    weekDayProps,
+    dayProps,
+    weekProps,
     isDateDisabled,
     ...rest
   } = props;
@@ -409,6 +416,7 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
     }
     return dayClass;
   };
+  const dateTableId = useId();
   return React.createElement(
     Box,
     { className: cx('iui-date-picker', className), ref: forwardedRef, ...rest },
@@ -417,7 +425,11 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
       null,
       React.createElement(
         Box,
-        { className: 'iui-calendar-month-year' },
+        {
+          as: 'div',
+          ...monthYearProps,
+          className: cx('iui-calendar-month-year', monthYearProps?.className),
+        },
         showYearSelection &&
           React.createElement(
             IconButton,
@@ -446,8 +458,10 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
             Box,
             {
               as: 'span',
-              className: 'iui-calendar-month',
+              id: dateTableId,
               title: monthNames[displayedMonthIndex],
+              ...monthProps,
+              className: cx('iui-calendar-month', monthProps?.className),
             },
             monthNames[displayedMonthIndex],
           ),
@@ -478,20 +492,31 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
       ),
       React.createElement(
         Box,
-        { className: 'iui-calendar-weekdays' },
+        {
+          as: 'div',
+          ...weekDayProps,
+          className: cx('iui-calendar-weekdays', weekDayProps?.className),
+        },
         shortDays.map((day, index) =>
           React.createElement('div', { key: day, title: longDays[index] }, day),
         ),
       ),
       React.createElement(
         'div',
-        { onKeyDown: handleCalendarKeyDown, role: 'listbox' },
+        {
+          onKeyDown: handleCalendarKeyDown,
+          role: 'listbox',
+          'aria-labelledby': dateTableId,
+          ...calendarProps,
+        },
         weeks.map((weekDays, weekIndex) => {
           return React.createElement(
             Box,
             {
+              as: 'div',
               key: `week-${displayedMonthIndex}-${weekIndex}`,
-              className: 'iui-calendar-week',
+              ...weekProps,
+              className: cx('iui-calendar-week', weekProps?.className),
             },
             weekDays.map((weekDay, dayIndex) => {
               const dateValue = weekDay.getDate();
@@ -499,8 +524,8 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
               return React.createElement(
                 Box,
                 {
+                  as: 'div',
                   key: `day-${displayedMonthIndex}-${dayIndex}`,
-                  className: getDayClass(weekDay),
                   onClick: () => !isDisabled && onDayClick(weekDay),
                   role: 'option',
                   tabIndex: isSameDay(weekDay, focusedDay) ? 0 : -1,
@@ -509,6 +534,8 @@ export const DatePicker = React.forwardRef((props, forwardedRef) => {
                     isSameDay(weekDay, focusedDay) &&
                     needFocus.current &&
                     element?.focus(),
+                  ...dayProps,
+                  className: cx(getDayClass(weekDay), dayProps?.className),
                 },
                 dateValue,
               );

package/esm/core/Dialog/Dialog.js

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import cx from 'classnames';
 import { DialogTitleBar } from './DialogTitleBar.js';
 import { DialogContent } from './DialogContent.js';
@@ -11,13 +10,7 @@ import { DialogBackdrop } from './DialogBackdrop.js';
 import { DialogContext } from './DialogContext.js';
 import { DialogButtonBar } from './DialogButtonBar.js';
 import { DialogMain } from './DialogMain.js';
-import {
-  useMergedRefs,
-  Box,
-  useGlobals,
-  getDocument,
-  useIsClient,
-} from '../utils/index.js';
+import { useMergedRefs, Box, Portal } from '../utils/index.js';
 const DialogComponent = React.forwardRef((props, ref) => {
   const {
     trapFocus = false,
@@ -37,20 +30,6 @@ const DialogComponent = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const dialogRootRef = React.useRef(null);
-  const context = useGlobals();
-  const isClient = useIsClient();
-  const portalTo =
-    typeof portal !== 'boolean'
-      ? portal.to
-      : portal
-      ? context?.portalContainerRef?.current ?? getDocument()?.body
-      : null;
-  const dialog = React.createElement(Box, {
-    className: cx('iui-dialog-wrapper', className),
-    'data-iui-relative': relativeTo === 'container',
-    ref: useMergedRefs(ref, dialogRootRef),
-    ...rest,
-  });
   return React.createElement(
     DialogContext.Provider,
     {
@@ -70,7 +49,16 @@ const DialogComponent = React.forwardRef((props, ref) => {
         placement,
       },
     },
-    portalTo && isClient ? ReactDOM.createPortal(dialog, portalTo) : dialog,
+    React.createElement(
+      Portal,
+      { portal: portal },
+      React.createElement(Box, {
+        className: cx('iui-dialog-wrapper', className),
+        'data-iui-relative': relativeTo === 'container',
+        ref: useMergedRefs(ref, dialogRootRef),
+        ...rest,
+      }),
+    ),
   );
 });
 /**

package/esm/core/Dialog/DialogContext.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { PortalProps } from '../utils/index.js';
 export type DialogContextProps = {
     /**
      * Flag whether dialog should be shown.
@@ -67,11 +68,9 @@ export type DialogContextProps = {
      *
      * Can be set to an object with a `to` property to portal into a specific element.
      *
-     * @default false
+     * Defaults to false if using `Dialog` and true if using `Modal`.
      */
-    portal?: boolean | {
-        to: HTMLElement;
-    };
+    portal?: PortalProps['portal'];
     /**
      * Dialog root ref. For internal use.
      */

package/esm/core/Dialog/DialogMain.js

@@ -121,10 +121,10 @@ export const DialogMain = React.forwardRef((props, ref) => {
     const [translateX, translateY] = getTranslateValues(dialogRef.current);
     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]);
@@ -166,7 +166,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
         onResizeStart: () => {
           if (!hasBeenResized.current) {
             hasBeenResized.current = true;
-            setResizeStyle({ maxWidth: '100%' });
+            setResizeStyle({ maxInlineSize: '100%' });
           }
         },
         onResizeEnd: setResizeStyle,

package/esm/core/ExpandableBlock/ExpandableBlock.d.ts

@@ -36,9 +36,11 @@ type ExpandableBlockOwnProps = {
      */
     disabled?: boolean;
 };
-type ExpandableBlockHeaderOwnProps = {
+type ExpandableBlockTriggerOwnProps = {
     label?: React.ReactNode;
+    caption?: React.ReactNode;
     expandIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
 };
 type ExpandableBlockContentOwnProps = {
     innerProps?: React.ComponentPropsWithoutRef<'div'>;
@@ -46,29 +48,32 @@ type ExpandableBlockContentOwnProps = {
 /**
  * Expandable block with customizable Title, Caption, Content and EndIcon subcomponents.
  * @example
- *  <ExpandableBlock>
- *    <ExpandableBlock.Header>
+ *  <ExpandableBlock.Wrapper>
+ *    <ExpandableBlock.Trigger>
  *      <ExpandableBlock.ExpandIcon/>
  *      <ExpandableBlock.LabelArea>
  *        <ExpandableBlock.Title/>
  *        <ExpandableBlock.Caption/>
  *      </ExpandableBlock.LabelArea>
  *      <ExpandableBlock.EndIcon/>
- *    </ExpandableBlock.Header>
+ *    </ExpandableBlock.Trigger>
  *    <ExpandableBlock.Content/>
- *  </ExpandableBlock>
+ *  </ExpandableBlock.Wrapper>
  */
-export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps> & {
+export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps & {
+    title?: React.ReactNode;
+} & Pick<ExpandableBlockTriggerOwnProps, "caption" | "endIcon">> & {
+    Wrapper: PolymorphicForwardRefComponent<"div", ExpandableBlockOwnProps>;
     /**
      * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
      * @example
-     * <ExpandableBlock.Header>
+     * <ExpandableBlock.Trigger>
      *    <ExpandableBlock.ExpandIcon/>
      *    <ExpandableBlock.LabelArea/>
      *    <ExpandableBlock.EndIcon/>
-     * </ExpandableBlock.Header>
+     * </ExpandableBlock.Trigger>
      */
-    Header: PolymorphicForwardRefComponent<"button", ExpandableBlockHeaderOwnProps>;
+    Trigger: PolymorphicForwardRefComponent<"button", ExpandableBlockTriggerOwnProps>;
     /**
      * The expanding icon on the left of header
      */
@@ -94,24 +99,25 @@ export declare const ExpandableBlock: PolymorphicForwardRefComponent<"div", Expa
      * Svg icon displayed at the end of the main text.
      * Will override status icon if specified. Used inside `Header` subcomponent.
      * @example
-     * <ExpandableBlock.Header>
+     * <ExpandableBlock.Trigger>
      *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
-     * <ExpandableBlock.Header/>
+     * <ExpandableBlock.Trigger/>
      */
     EndIcon: PolymorphicForwardRefComponent<"span", Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
+        padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;
     }, "ref">>;
     /**
      * Content shown in the block's body when fully expanded.
      * @example
-     * <ExpandableBlock>
+     * <ExpandableBlock.Wrapper>
      *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
-     * </ExpandableBlock>
+     * </ExpandableBlock.Wrapper>
      */
     Content: PolymorphicForwardRefComponent<"div", ExpandableBlockContentOwnProps>;
 };

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -12,10 +12,26 @@ import {
   useSafeContext,
   polymorphic,
   mergeEventHandlers,
+  ButtonBase,
 } from '../utils/index.js';
 const ExpandableBlockContext = React.createContext(undefined);
 ExpandableBlockContext.displayName = 'ExpandableBlockContext';
 const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
+  const { children, title, caption, endIcon, ...rest } = props;
+  return React.createElement(
+    ExpandableBlock.Wrapper,
+    { ...rest, ref: forwardedRef },
+    React.createElement(ExpandableBlock.Trigger, {
+      label: title,
+      caption: caption,
+      endIcon: endIcon,
+    }),
+    React.createElement(ExpandableBlock.Content, null, children),
+  );
+});
+ExpandableBlockComponent.displayName = 'ExpandableBlock';
+// ----------------------------------------------------------------------------
+const ExpandableBlockWrapper = React.forwardRef((props, forwardedRef) => {
   const {
     children,
     className,
@@ -59,24 +75,23 @@ const ExpandableBlockComponent = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-ExpandableBlockComponent.displayName = 'ExpandableBlock';
-const ExpandableBlockHeader = React.forwardRef((props, forwardedRef) => {
+ExpandableBlockWrapper.displayName = 'ExpandableBlock.Wrapper';
+const ExpandableBlockTrigger = React.forwardRef((props, forwardedRef) => {
   const {
     className,
     children,
     label,
+    caption,
     onClick: onClickProp,
     expandIcon,
+    endIcon,
     ...rest
   } = props;
-  const { isExpanded, setExpanded, disabled, onToggle } = useSafeContext(
-    ExpandableBlockContext,
-  );
+  const { isExpanded, setExpanded, disabled, onToggle, status } =
+    useSafeContext(ExpandableBlockContext);
   return React.createElement(
-    Box,
+    ButtonBase,
     {
-      as: 'button',
-      type: 'button',
       className: cx('iui-expandable-header', className),
       'aria-expanded': isExpanded,
       'aria-disabled': disabled,
@@ -99,11 +114,16 @@ const ExpandableBlockHeader = React.forwardRef((props, forwardedRef) => {
           ExpandableBlock.LabelArea,
           null,
           React.createElement(ExpandableBlock.Title, null, label),
+          caption &&
+            React.createElement(ExpandableBlock.Caption, null, caption),
         ),
+        endIcon || status
+          ? React.createElement(ExpandableBlock.EndIcon, null, endIcon)
+          : null,
       ),
   );
 });
-ExpandableBlockHeader.displayName = 'ExpandableBlock.Header';
+ExpandableBlockTrigger.displayName = 'ExpandableBlock.Trigger';
 // ----------------------------------------------------------------------------
 // ExpandableBlock.ExpandIcon component
 const ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
@@ -171,29 +191,30 @@ ExpandableBlockContent.displayName = 'ExpandableBlock.Content';
 /**
  * Expandable block with customizable Title, Caption, Content and EndIcon subcomponents.
  * @example
- *  <ExpandableBlock>
- *    <ExpandableBlock.Header>
+ *  <ExpandableBlock.Wrapper>
+ *    <ExpandableBlock.Trigger>
  *      <ExpandableBlock.ExpandIcon/>
  *      <ExpandableBlock.LabelArea>
  *        <ExpandableBlock.Title/>
  *        <ExpandableBlock.Caption/>
  *      </ExpandableBlock.LabelArea>
  *      <ExpandableBlock.EndIcon/>
- *    </ExpandableBlock.Header>
+ *    </ExpandableBlock.Trigger>
  *    <ExpandableBlock.Content/>
- *  </ExpandableBlock>
+ *  </ExpandableBlock.Wrapper>
  */
 export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
+  Wrapper: ExpandableBlockWrapper,
   /**
    * `Header` container that contains `ExpandIcon`, `LabelArea` and `EndIcon` subcomponents
    * @example
-   * <ExpandableBlock.Header>
+   * <ExpandableBlock.Trigger>
    *    <ExpandableBlock.ExpandIcon/>
    *    <ExpandableBlock.LabelArea/>
    *    <ExpandableBlock.EndIcon/>
-   * </ExpandableBlock.Header>
+   * </ExpandableBlock.Trigger>
    */
-  Header: ExpandableBlockHeader,
+  Trigger: ExpandableBlockTrigger,
   /**
    * The expanding icon on the left of header
    */
@@ -219,17 +240,17 @@ export const ExpandableBlock = Object.assign(ExpandableBlockComponent, {
    * Svg icon displayed at the end of the main text.
    * Will override status icon if specified. Used inside `Header` subcomponent.
    * @example
-   * <ExpandableBlock.Header>
+   * <ExpandableBlock.Trigger>
    *    <ExpandableBlock.EndIcon> <SvgIcon/> </ExpandableBlock.EndIcon>
-   * <ExpandableBlock.Header/>
+   * <ExpandableBlock.Trigger/>
    */
   EndIcon: ExpandableBlockEndIcon,
   /**
    * Content shown in the block's body when fully expanded.
    * @example
-   * <ExpandableBlock>
+   * <ExpandableBlock.Wrapper>
    *    <ExpandableBlock.Content> Content </ExpandableBlock.Content>
-   * </ExpandableBlock>
+   * </ExpandableBlock.Wrapper>
    */
   Content: ExpandableBlockContent,
 });

package/esm/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.

package/esm/core/FileUpload/FileUpload.js

@@ -13,7 +13,14 @@ import { Box, useMergedRefs } from '../utils/index.js';
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
 export const FileUpload = React.forwardRef((props, ref) => {
-  const { dragContent, children, onFileDropped, className, ...rest } = props;
+  const {
+    dragContent,
+    children,
+    onFileDropped,
+    className,
+    contentProps,
+    ...rest
+  } = props;
   const [isDragActive, setIsDragActive] = React.useState(false);
   const fileUploadRef = React.useRef(null);
   const refs = useMergedRefs(fileUploadRef, ref);
@@ -58,9 +65,25 @@ export const FileUpload = React.forwardRef((props, ref) => {
     },
     dragContent
       ? children
-      : React.createElement(Box, { className: 'iui-content' }, children),
+      : React.createElement(
+          Box,
+          {
+            as: 'div',
+            ...contentProps,
+            className: cx('iui-content', contentProps?.className),
+          },
+          children,
+        ),
     dragContent &&
-      React.createElement(Box, { className: 'iui-content' }, dragContent),
+      React.createElement(
+        Box,
+        {
+          as: 'div',
+          ...contentProps,
+          className: cx('iui-content', contentProps?.className),
+        },
+        dragContent,
+      ),
   );
 });
 export default FileUpload;

package/esm/core/Header/HeaderBasicButton.js

@@ -4,30 +4,17 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../utils/index.js';
+import { ButtonBase } from '../utils/index.js';
 export const HeaderBasicButton = React.forwardRef((props, ref) => {
-  const {
-    onClick,
-    className,
-    children,
-    style,
-    startIcon,
-    endIcon,
-    styleType,
-    size,
-    ...rest
-  } = props;
+  const { className, children, startIcon, endIcon, styleType, size, ...rest } =
+    props;
   styleType; // To omit and prevent eslint error.
   size; // To omit and prevent eslint error.
   return React.createElement(
-    Box,
+    ButtonBase,
     {
-      as: 'button',
       className: cx('iui-header-breadcrumb-button', className),
-      onClick: onClick,
       ref: ref,
-      type: 'button',
-      style: style,
       ...rest,
     },
     startIcon,

package/esm/core/Header/HeaderDropdownButton.js

@@ -26,7 +26,7 @@ export const HeaderDropdownButton = React.forwardRef((props, ref) => {
     DropdownMenu,
     {
       menuItems: menuItems,
-      style: { minWidth: menuWidth },
+      style: { minInlineSize: menuWidth },
       onShow: () => setIsMenuOpen(true),
       onHide: () => setIsMenuOpen(false),
     },

package/esm/core/Header/HeaderSplitButton.js

@@ -5,7 +5,12 @@
 import cx from 'classnames';
 import * as React from 'react';
 import { DropdownMenu } from '../DropdownMenu/index.js';
-import { SvgCaretDownSmall, SvgCaretUpSmall, Box } from '../utils/index.js';
+import {
+  SvgCaretDownSmall,
+  SvgCaretUpSmall,
+  Box,
+  ButtonBase,
+} from '../utils/index.js';
 import { HeaderBasicButton } from './HeaderBasicButton.js';
 export const HeaderSplitButton = React.forwardRef((props, forwardedRef) => {
   const {
@@ -40,15 +45,14 @@ export const HeaderSplitButton = 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(
-        Box,
+        ButtonBase,
         {
-          as: 'button',
-          type: 'button',
+          'aria-label': 'More',
           className:
             'iui-header-breadcrumb-button iui-header-breadcrumb-button-split',
           disabled: disabled,

package/esm/core/Input/Input.d.ts

@@ -4,6 +4,10 @@ export type InputProps = {
      * Modify size of the input.
      */
     size?: 'small' | 'large';
+    /**
+     * Status of input.
+     */
+    status?: 'positive' | 'warning' | 'negative';
     /**
      * Modify the native `size` attribute of the `<input>` element.
      * The `width` or `inline-size` property must be unset in order to use this prop.

package/esm/core/Input/Input.js

@@ -13,13 +13,14 @@ import { useMergedRefs, Box } from '../utils/index.js';
  * <Input size='small' />
  */
 export const Input = React.forwardRef((props, ref) => {
-  const { size, htmlSize, className, ...rest } = props;
+  const { size, htmlSize, status, className, ...rest } = props;
   const inputRef = React.useRef(null);
   const refs = useMergedRefs(inputRef, ref);
   return React.createElement(Box, {
     as: 'input',
     className: cx('iui-input', className),
     'data-iui-size': size,
+    'data-iui-status': status,
     size: htmlSize,
     ref: refs,
     ...rest,