@itwin/itwinui-react 3.4.2 → 3.6.0

package/esm/core/InputWithDecorations/InputWithDecorations.d.ts

@@ -5,9 +5,9 @@ import type { InputProps } from '../Input/Input.js';
  * Input component with various additional decorations.
  * You can add icons, buttons and other various subcomponents to it.
  *
- * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ * If you are not using default `InputWithDecorations.Icon` and `InputWithDecorations.Button`, use borderless versions of other components.
  *
- * @usage
+ * @example
  * <InputWithDecorations>
  *    <InputWithDecorations.Input />
  *    <InputWithDecorations.Icon>
@@ -26,68 +26,24 @@ export declare const InputWithDecorations: PolymorphicForwardRefComponent<"div",
     Input: PolymorphicForwardRefComponent<"input", InputProps>;
     /**
      * Subcomponent to include button in your InputWithDecorations
+     *
+     * Although similar to `IconButton`, this subcomponent additionally collapses the padding between the button and the input/textarea
+     * in `InputWithDecorations`.
      */
-    Button: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    Button: PolymorphicForwardRefComponent<"button", Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
-        isActive?: boolean | undefined;
-        label?: React.ReactNode;
-        labelProps?: Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-            ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-        }, "as" | "children" | "content" | "portal" | keyof {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        }> & {
-            content: React.ReactNode;
-            children?: React.ReactNode;
-        } & import("../utils/index.js").PortalProps & {
-            placement?: import("@floating-ui/utils").Placement | undefined;
-            visible?: boolean | undefined;
-            onVisibleChange?: ((visible: boolean) => void) | undefined;
-            autoUpdateOptions?: {
-                ancestorScroll?: boolean | undefined;
-                ancestorResize?: boolean | undefined;
-                elementResize?: boolean | undefined;
-                animationFrame?: boolean | undefined;
-                layoutShift?: boolean | undefined;
-            } | undefined;
-            middleware?: {
-                offset?: number | undefined;
-                flip?: boolean | undefined;
-                shift?: boolean | undefined;
-                size?: boolean | undefined;
-                autoPlacement?: boolean | undefined;
-                hide?: boolean | undefined;
-                inline?: boolean | undefined;
-            } | undefined;
-            reference?: HTMLElement | null | undefined;
-            ariaStrategy?: "label" | "description" | "none" | undefined;
-            id?: string | undefined;
-        } & {
-            as?: "div" | undefined;
-        }, "ref">, "children" | "content" | "reference" | "ariaStrategy"> | undefined;
-        iconProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> | undefined;
-    } & Omit<import("../Buttons/Button.js").ButtonProps, "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps"> & {
+    }, "label" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & Omit<import("../Buttons/IconButton.js").IconButtonProps, "styleType"> & {
+        styleType?: "default" | "cta" | "high-visibility" | "borderless" | undefined;
+    } & {
         as?: "button" | undefined;
     }>;
+    /**
+     * Subcomponent to include button in your InputWithDecorations.
+     *
+     * Although similar to `Icon`, this subcomponent additionally collapses the padding between the icon and the input/textarea
+     * in `InputWithDecorations`.
+     */
+    Icon: PolymorphicForwardRefComponent<"span", Omit<import("../Icon/Icon.js").IconProps, "padded"> & {
+        padded?: boolean | undefined;
+    }>;
 };

package/esm/core/InputWithDecorations/InputWithDecorations.js

@@ -3,33 +3,38 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Box, InputFlexContainer, useSafeContext } from '../utils/index.js';
-import { IconButton } from '../Buttons/IconButton.js';
+import { Box, InputFlexContainer, InputFlexContainerButton, InputFlexContainerIcon, useSafeContext, } from '../utils/index.js';
 const InputWithDecorationsContext = React.createContext(undefined);
 const InputWithDecorationsComponent = React.forwardRef((props, ref) => {
     const { children, size, isDisabled, ...rest } = props;
     return (React.createElement(InputWithDecorationsContext.Provider, { value: { size, isDisabled } },
         React.createElement(InputFlexContainer, { isDisabled: isDisabled, size: size, ref: ref, ...rest }, children)));
 });
-//-------------------------------------------------------------------------------
+// ----------------------------------------------------------------------------
 const InputWithDecorationsInput = React.forwardRef((props, ref) => {
     const { id: idProp, size, disabled: localDisabled, ...rest } = props;
     const { size: contextSize, isDisabled } = useSafeContext(InputWithDecorationsContext);
     return (React.createElement(Box, { as: 'input', ref: ref, "data-iui-size": size ?? contextSize, disabled: localDisabled ?? isDisabled, id: idProp, ...rest }));
 });
-//-------------------------------------------------------------------------------
+InputWithDecorationsInput.displayName = 'InputWithDecorations.Input';
+// ----------------------------------------------------------------------------
 const InputWithDecorationsButton = React.forwardRef((props, ref) => {
     const { children, size, disabled: localDisabled, ...rest } = props;
     const { size: contextSize, isDisabled } = useSafeContext(InputWithDecorationsContext);
-    return (React.createElement(IconButton, { ref: ref, size: size ?? contextSize, styleType: 'borderless', disabled: localDisabled ?? isDisabled, ...rest }, children));
+    return (React.createElement(InputFlexContainerButton, { ref: ref, size: size ?? contextSize, disabled: localDisabled ?? isDisabled, ...rest }, children));
 });
+InputWithDecorationsButton.displayName = 'InputWithDecorations.Button';
+// ----------------------------------------------------------------------------
+const InputWithDecorationsIcon = InputFlexContainerIcon;
+InputWithDecorationsIcon.displayName = 'InputWithDecorations.Icon';
+// ----------------------------------------------------------------------------
 /**
  * Input component with various additional decorations.
  * You can add icons, buttons and other various subcomponents to it.
  *
- * If you are not using default InputWithDecorations.Icon and InputWithDecorations.Button, use borderless versions of other components.
+ * If you are not using default `InputWithDecorations.Icon` and `InputWithDecorations.Button`, use borderless versions of other components.
  *
- * @usage
+ * @example
  * <InputWithDecorations>
  *    <InputWithDecorations.Input />
  *    <InputWithDecorations.Icon>
@@ -44,6 +49,16 @@ export const InputWithDecorations = Object.assign(InputWithDecorationsComponent,
     Input: InputWithDecorationsInput,
     /**
      * Subcomponent to include button in your InputWithDecorations
+     *
+     * Although similar to `IconButton`, this subcomponent additionally collapses the padding between the button and the input/textarea
+     * in `InputWithDecorations`.
      */
     Button: InputWithDecorationsButton,
+    /**
+     * Subcomponent to include button in your InputWithDecorations.
+     *
+     * Although similar to `Icon`, this subcomponent additionally collapses the padding between the icon and the input/textarea
+     * in `InputWithDecorations`.
+     */
+    Icon: InputWithDecorationsIcon,
 });

package/esm/core/LabeledSelect/LabeledSelect.d.ts

@@ -40,7 +40,10 @@ export type LabeledSelectProps<T> = {
      */
     svgIcon?: JSX.Element;
     /**
-     * If true, shows a red asterisk but does not prevent form submission.
+     * If true, shows a red asterisk.
+     *
+     * Form submission is only disabled when using the `native` prop (i.e. `<LabeledSelect native>`).
+     *
      * @default false
      */
     required?: boolean;
@@ -60,7 +63,12 @@ export type LabeledSelectProps<T> = {
      * Passes properties for message icon.
      */
     messageIconProps?: React.ComponentProps<typeof Icon>;
-} & Pick<LabeledInputProps, 'displayStyle'> & SelectProps<T>;
+} & Pick<LabeledInputProps, 'displayStyle'> & SelectProps<T> & {
+    /**
+     * LabeledSelect does not support `styleType`.
+     */
+    styleType?: never;
+};
 /**
  * Labeled select component to select value from options.
  * @example
@@ -94,6 +102,370 @@ export type LabeledSelectProps<T> = {
  *   svgIcon={<SvgCamera />}
  * />
  */
-export declare const LabeledSelect: <T>(props: LabeledSelectProps<T> & {
+export declare const LabeledSelect: <T>(props: ({
+    /**
+     * Label of the select.
+     */
+    label?: React.ReactNode;
+    /**
+     * Message below the select. Does not apply to 'inline' select.
+     *
+     * @example
+     * <caption>strings</caption>
+     * <LabeledSelect message='Positive Message' … />
+     *
+     * @example
+     * <caption>Using StatusMessage for complete customization (e.g. icon)</caption>
+     * <LabeledSelect
+     *   status="positive"
+     *   message={
+     *     <StatusMessage status="positive" startIcon={<SvgStar />}>
+     *       Help message
+     *     </StatusMessage>
+     *   }
+     *   …
+     * />
+     */
+    message?: React.ReactNode;
+    /**
+     * Status of the select.
+     * @default ''
+     */
+    status?: "negative" | "positive" | "warning" | undefined;
+    /**
+     * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
+     *
+     * Custom svg icon. Will override status icon if specified.
+     */
+    svgIcon?: JSX.Element | undefined;
+    /**
+     * If true, shows a red asterisk.
+     *
+     * Form submission is only disabled when using the `native` prop (i.e. `<LabeledSelect native>`).
+     *
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Pass props to wrapper element.
+     */
+    wrapperProps?: (Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, "as" | "labelPlacement"> & {
+        labelPlacement?: "default" | "inline" | undefined;
+    } & {
+        as?: "div" | undefined;
+    }) | undefined;
+    /**
+     * Passes properties for label.
+     */
+    labelProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined;
+    /**
+     * Passes properties for message content.
+     */
+    messageContentProps?: (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }) | undefined;
+    /**
+     * Passes properties for message icon.
+     */
+    messageIconProps?: (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> | "padded"> & {
+        size?: "small" | "auto" | "medium" | "large" | 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;
+    }) | undefined;
+} & Pick<LabeledInputProps, "displayStyle"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange" | "defaultValue" | "placeholder" | "value"> & {
+    native: true;
+} & {
+    disabled?: boolean | undefined;
+    size?: "small" | "large" | undefined;
+    status?: "negative" | "positive" | "warning" | undefined;
+} & {
+    value?: string | null | undefined;
+    onChange?: ((value: string, event: React.ChangeEvent<HTMLSelectElement>) => void) | undefined;
+    options: {
+        label: string;
+        value: string;
+        disabled?: boolean | undefined;
+    }[];
+    defaultValue?: string | undefined;
+    triggerProps?: Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
+        ref?: ((instance: HTMLSelectElement | null) => void) | React.RefObject<HTMLSelectElement> | null | undefined;
+    }, "size"> | undefined;
+    required?: boolean | undefined;
+    multiple?: undefined;
+} & {
+    styleType?: "default" | undefined;
+    placeholder?: string | undefined;
+} & {
+    /**
+     * LabeledSelect does not support `styleType`.
+     */
+    styleType?: undefined;
+} & {
+    ref?: React.ForwardedRef<HTMLElement> | undefined;
+}) | ({
+    /**
+     * Label of the select.
+     */
+    label?: React.ReactNode;
+    /**
+     * Message below the select. Does not apply to 'inline' select.
+     *
+     * @example
+     * <caption>strings</caption>
+     * <LabeledSelect message='Positive Message' … />
+     *
+     * @example
+     * <caption>Using StatusMessage for complete customization (e.g. icon)</caption>
+     * <LabeledSelect
+     *   status="positive"
+     *   message={
+     *     <StatusMessage status="positive" startIcon={<SvgStar />}>
+     *       Help message
+     *     </StatusMessage>
+     *   }
+     *   …
+     * />
+     */
+    message?: React.ReactNode;
+    /**
+     * Status of the select.
+     * @default ''
+     */
+    status?: "negative" | "positive" | "warning" | undefined;
+    /**
+     * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
+     *
+     * Custom svg icon. Will override status icon if specified.
+     */
+    svgIcon?: JSX.Element | undefined;
+    /**
+     * If true, shows a red asterisk.
+     *
+     * Form submission is only disabled when using the `native` prop (i.e. `<LabeledSelect native>`).
+     *
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Pass props to wrapper element.
+     */
+    wrapperProps?: (Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, "as" | "labelPlacement"> & {
+        labelPlacement?: "default" | "inline" | undefined;
+    } & {
+        as?: "div" | undefined;
+    }) | undefined;
+    /**
+     * Passes properties for label.
+     */
+    labelProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined;
+    /**
+     * Passes properties for message content.
+     */
+    messageContentProps?: (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }) | undefined;
+    /**
+     * Passes properties for message icon.
+     */
+    messageIconProps?: (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> | "padded"> & {
+        size?: "small" | "auto" | "medium" | "large" | 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;
+    }) | undefined;
+} & Pick<LabeledInputProps, "displayStyle"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange" | "defaultValue" | "placeholder" | "value"> & {
+    native?: false | undefined;
+} & {
+    disabled?: boolean | undefined;
+    size?: "small" | "large" | undefined;
+    status?: "negative" | "positive" | "warning" | undefined;
+} & {
+    placeholder?: React.ReactNode;
+    options: import("../Select/Select.js").SelectOption<T>[];
+    itemRenderer?: ((option: import("../Select/Select.js").SelectOption<T>, itemProps: import("../Select/Select.js").ItemRendererProps) => JSX.Element) | undefined;
+    menuClassName?: string | undefined;
+    menuStyle?: React.CSSProperties | undefined;
+    popoverProps?: Pick<{
+        placement?: import("@floating-ui/core").Placement | undefined;
+        visible?: boolean | undefined;
+        onVisibleChange?: ((visible: boolean) => void) | undefined;
+        closeOnOutsideClick?: boolean | undefined;
+        middleware?: {
+            offset?: number | undefined;
+            flip?: boolean | undefined;
+            shift?: boolean | undefined;
+            autoPlacement?: boolean | undefined;
+            hide?: boolean | undefined;
+            inline?: boolean | undefined;
+        } | undefined;
+    } & {
+        autoUpdateOptions?: {
+            ancestorScroll?: boolean | undefined;
+            ancestorResize?: boolean | undefined;
+            elementResize?: boolean | undefined;
+            animationFrame?: boolean | undefined;
+            layoutShift?: boolean | undefined;
+        } | undefined;
+        trigger?: Partial<Record<"click" | "hover" | "focus", boolean>> | undefined;
+        role?: "dialog" | "menu" | "listbox" | undefined;
+        matchWidth?: boolean | undefined;
+    }, "placement" | "visible" | "onVisibleChange" | "closeOnOutsideClick" | "matchWidth"> | undefined;
+    triggerProps?: (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }) | undefined;
+} & {
+    multiple?: false | undefined;
+    selectedItemRenderer?: ((option: import("../Select/Select.js").SelectOption<T>) => JSX.Element) | undefined;
+    value?: T | null | undefined;
+    onChange?: ((value: T) => void) | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "disabled" | "onChange" | "placeholder" | "size"> & {
+    styleType?: undefined;
+} & {
+    /**
+     * LabeledSelect does not support `styleType`.
+     */
+    styleType?: undefined;
+} & {
+    ref?: React.ForwardedRef<HTMLElement> | undefined;
+}) | ({
+    /**
+     * Label of the select.
+     */
+    label?: React.ReactNode;
+    /**
+     * Message below the select. Does not apply to 'inline' select.
+     *
+     * @example
+     * <caption>strings</caption>
+     * <LabeledSelect message='Positive Message' … />
+     *
+     * @example
+     * <caption>Using StatusMessage for complete customization (e.g. icon)</caption>
+     * <LabeledSelect
+     *   status="positive"
+     *   message={
+     *     <StatusMessage status="positive" startIcon={<SvgStar />}>
+     *       Help message
+     *     </StatusMessage>
+     *   }
+     *   …
+     * />
+     */
+    message?: React.ReactNode;
+    /**
+     * Status of the select.
+     * @default ''
+     */
+    status?: "negative" | "positive" | "warning" | undefined;
+    /**
+     * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
+     *
+     * Custom svg icon. Will override status icon if specified.
+     */
+    svgIcon?: JSX.Element | undefined;
+    /**
+     * If true, shows a red asterisk.
+     *
+     * Form submission is only disabled when using the `native` prop (i.e. `<LabeledSelect native>`).
+     *
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Pass props to wrapper element.
+     */
+    wrapperProps?: (Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, "as" | "labelPlacement"> & {
+        labelPlacement?: "default" | "inline" | undefined;
+    } & {
+        as?: "div" | undefined;
+    }) | undefined;
+    /**
+     * Passes properties for label.
+     */
+    labelProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> | undefined;
+    /**
+     * Passes properties for message content.
+     */
+    messageContentProps?: (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }) | undefined;
+    /**
+     * Passes properties for message icon.
+     */
+    messageIconProps?: (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> | "padded"> & {
+        size?: "small" | "auto" | "medium" | "large" | 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;
+    }) | undefined;
+} & Pick<LabeledInputProps, "displayStyle"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange" | "defaultValue" | "placeholder" | "value"> & {
+    native?: false | undefined;
+} & {
+    disabled?: boolean | undefined;
+    size?: "small" | "large" | undefined;
+    status?: "negative" | "positive" | "warning" | undefined;
+} & {
+    placeholder?: React.ReactNode;
+    options: import("../Select/Select.js").SelectOption<T>[];
+    itemRenderer?: ((option: import("../Select/Select.js").SelectOption<T>, itemProps: import("../Select/Select.js").ItemRendererProps) => JSX.Element) | undefined;
+    menuClassName?: string | undefined;
+    menuStyle?: React.CSSProperties | undefined;
+    popoverProps?: Pick<{
+        placement?: import("@floating-ui/core").Placement | undefined;
+        visible?: boolean | undefined;
+        onVisibleChange?: ((visible: boolean) => void) | undefined;
+        closeOnOutsideClick?: boolean | undefined;
+        middleware?: {
+            offset?: number | undefined;
+            flip?: boolean | undefined;
+            shift?: boolean | undefined;
+            autoPlacement?: boolean | undefined;
+            hide?: boolean | undefined;
+            inline?: boolean | undefined;
+        } | undefined;
+    } & {
+        autoUpdateOptions?: {
+            ancestorScroll?: boolean | undefined;
+            ancestorResize?: boolean | undefined;
+            elementResize?: boolean | undefined;
+            animationFrame?: boolean | undefined;
+            layoutShift?: boolean | undefined;
+        } | undefined;
+        trigger?: Partial<Record<"click" | "hover" | "focus", boolean>> | undefined;
+        role?: "dialog" | "menu" | "listbox" | undefined;
+        matchWidth?: boolean | undefined;
+    }, "placement" | "visible" | "onVisibleChange" | "closeOnOutsideClick" | "matchWidth"> | undefined;
+    triggerProps?: (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }) | undefined;
+} & {
+    multiple: true;
+    selectedItemRenderer?: ((options: import("../Select/Select.js").SelectOption<T>[]) => JSX.Element) | undefined;
+    value?: T[] | undefined;
+    onChange?: ((value: T, event: import("../Select/Select.js").SelectValueChangeEvent) => void) | undefined;
+} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "disabled" | "onChange" | "placeholder" | "size"> & {
+    styleType?: undefined;
+} & {
+    /**
+     * LabeledSelect does not support `styleType`.
+     */
+    styleType?: undefined;
+} & {
     ref?: React.ForwardedRef<HTMLElement> | undefined;
-}) => JSX.Element;
+})) => JSX.Element;

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -45,6 +45,6 @@ export const LabeledSelect = React.forwardRef((props, forwardedRef) => {
     const { className, disabled = false, label, message, status, svgIcon, displayStyle = 'default', style, required = false, wrapperProps, labelProps, messageContentProps, messageIconProps, ...rest } = props;
     return (React.createElement(InputGrid, { labelPlacement: displayStyle, "data-iui-status": status, ...wrapperProps },
         label && (React.createElement(Label, { as: 'div', required: required, disabled: disabled, ...labelProps }, label)),
-        React.createElement(Select, { disabled: disabled, className: className, style: style, ...rest, ref: forwardedRef }),
+        React.createElement(Select, { disabled: disabled, className: className, style: style, required: props.native ? required : undefined, ...rest, ref: forwardedRef, ...{ styleType: 'default' } }),
         typeof message === 'string' ? (React.createElement(StatusMessage, { status: status, startIcon: svgIcon, iconProps: messageIconProps, contentProps: messageContentProps }, message)) : (message)));
 });

package/esm/core/Popover/Popover.d.ts

@@ -71,7 +71,7 @@ type PopoverInternalProps = {
 };
 export declare const usePopover: (options: PopoverOptions & PopoverInternalProps) => {
     placement: Placement;
-    strategy: import("@floating-ui/utils").Strategy;
+    strategy: import("@floating-ui/react").Strategy;
     middlewareData: import("@floating-ui/core").MiddlewareData;
     x: number;
     y: number;
@@ -92,7 +92,7 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
         x: number;
         y: number;
         placement: Placement;
-        strategy: import("@floating-ui/utils").Strategy;
+        strategy: import("@floating-ui/react").Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;
         isPositioned: boolean;
         update: () => void;
@@ -108,7 +108,10 @@ export declare const usePopover: (options: PopoverOptions & PopoverInternalProps
     };
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
     getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
-    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
+    getItemProps: (userProps?: (Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean | undefined;
+        selected?: boolean | undefined;
+    }) | undefined) => Record<string, unknown>;
     open: boolean | undefined;
     onOpenChange: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 };

package/esm/core/ProgressIndicators/ProgressLinear.js

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Box, getBoundedValue } from '../utils/index.js';
+import { Box, ShadowRoot, getBoundedValue } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Shows progress on a linear bar
  * @example
@@ -33,5 +34,9 @@ export const ProgressLinear = React.forwardRef((props, forwardedRef) => {
     const boundedValue = getBoundedValue(value ?? 100, 0, 100);
     return (React.createElement(Box, { className: cx('iui-progress-indicator-linear', className), ref: forwardedRef, "data-iui-status": status, "data-iui-indeterminate": indeterminate ? 'true' : undefined, "data-iui-animated": isAnimated ? 'true' : undefined, style: {
             '--iui-progress-percentage': `${boundedValue}%`,
-        }, ...rest }, labels.length > 0 && (React.createElement(Box, { as: 'div', ...labelGroupProps, className: cx('iui-progress-indicator-linear-label', labelGroupProps?.className) }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
+        }, ...rest },
+        React.createElement(ShadowRoot, null,
+            value !== 100 && React.createElement(VisuallyHidden, null, "Loading."),
+            React.createElement("slot", null)),
+        labels.length > 0 && (React.createElement(Box, { as: 'div', ...labelGroupProps, className: cx('iui-progress-indicator-linear-label', labelGroupProps?.className) }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
 });

package/esm/core/ProgressIndicators/ProgressRadial.js

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { SvgCheckmarkSmall, SvgImportantSmall, Box, getBoundedValue, } from '../utils/index.js';
+import { SvgCheckmarkSmall, SvgImportantSmall, Box, getBoundedValue, ShadowRoot, } from '../utils/index.js';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 /**
  * Circular Progress Indicator
  * @example
@@ -33,7 +34,11 @@ export const ProgressRadial = React.forwardRef((props, forwardedRef) => {
                 '--iui-progress-percentage': `${getBoundedValue(value, 0, 100)}%`,
             }),
             ...style,
-        }, ...rest }, size !== 'x-small'
-        ? children ?? (!!status ? statusMap[status] : null)
-        : null));
+        }, ...rest },
+        React.createElement(ShadowRoot, null,
+            value !== 100 && React.createElement(VisuallyHidden, null, "Loading."),
+            React.createElement("slot", null)),
+        size !== 'x-small'
+            ? children ?? (!!status ? statusMap[status] : null)
+            : null));
 });