@itwin/itwinui-react 3.4.2 → 3.6.0

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

@@ -70,6 +70,6 @@ exports.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_js_1.InputGrid, { labelPlacement: displayStyle, "data-iui-status": status, ...wrapperProps },
         label && (React.createElement(Label_js_1.Label, { as: 'div', required: required, disabled: disabled, ...labelProps }, label)),
-        React.createElement(Select_js_1.Select, { disabled: disabled, className: className, style: style, ...rest, ref: forwardedRef }),
+        React.createElement(Select_js_1.Select, { disabled: disabled, className: className, style: style, required: props.native ? required : undefined, ...rest, ref: forwardedRef, ...{ styleType: 'default' } }),
         typeof message === 'string' ? (React.createElement(StatusMessage_js_1.StatusMessage, { status: status, startIcon: svgIcon, iconProps: messageIconProps, contentProps: messageContentProps }, message)) : (message)));
 });

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

@@ -34,6 +34,7 @@ exports.ProgressLinear = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
+const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
 /**
  * Shows progress on a linear bar
  * @example
@@ -62,5 +63,9 @@ exports.ProgressLinear = React.forwardRef((props, forwardedRef) => {
     const boundedValue = (0, index_js_1.getBoundedValue)(value ?? 100, 0, 100);
     return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('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(index_js_1.Box, { as: 'div', ...labelGroupProps, className: (0, classnames_1.default)('iui-progress-indicator-linear-label', labelGroupProps?.className) }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
+        }, ...rest },
+        React.createElement(index_js_1.ShadowRoot, null,
+            value !== 100 && React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, "Loading."),
+            React.createElement("slot", null)),
+        labels.length > 0 && (React.createElement(index_js_1.Box, { as: 'div', ...labelGroupProps, className: (0, classnames_1.default)('iui-progress-indicator-linear-label', labelGroupProps?.className) }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
 });

package/cjs/core/ProgressIndicators/ProgressRadial.js

@@ -34,6 +34,7 @@ exports.ProgressRadial = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const index_js_1 = require("../utils/index.js");
+const VisuallyHidden_js_1 = require("../VisuallyHidden/VisuallyHidden.js");
 /**
  * Circular Progress Indicator
  * @example
@@ -62,7 +63,11 @@ exports.ProgressRadial = React.forwardRef((props, forwardedRef) => {
                 '--iui-progress-percentage': `${(0, index_js_1.getBoundedValue)(value, 0, 100)}%`,
             }),
             ...style,
-        }, ...rest }, size !== 'x-small'
-        ? children ?? (!!status ? statusMap[status] : null)
-        : null));
+        }, ...rest },
+        React.createElement(index_js_1.ShadowRoot, null,
+            value !== 100 && React.createElement(VisuallyHidden_js_1.VisuallyHidden, null, "Loading."),
+            React.createElement("slot", null)),
+        size !== 'x-small'
+            ? children ?? (!!status ? statusMap[status] : null)
+            : null));
 });

package/cjs/core/SearchBox/SearchBox.js

@@ -34,8 +34,6 @@ exports.SearchBox = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const index_js_1 = require("../utils/index.js");
-const IconButton_js_1 = require("../Buttons/IconButton.js");
-const Icon_js_1 = require("../Icon/Icon.js");
 const SearchBoxContext = React.createContext(undefined);
 const SearchBoxComponent = React.forwardRef((props, ref) => {
     const { size, expandable = false, isDisabled = false, onCollapse: onCollapseProp, onExpand: onExpandProp, isExpanded: isExpandedProp, children, inputProps, className, ...rest } = props;
@@ -96,7 +94,7 @@ SearchBoxExpandedState.displayName = 'SearchBox.ExpandedState';
 // ----------------------------------------------------------------------------
 const SearchBoxIcon = React.forwardRef((props, ref) => {
     const { className, children, ...rest } = props;
-    return (React.createElement(Icon_js_1.Icon, { "aria-hidden": true, className: (0, classnames_1.default)('iui-search-icon', className), ref: ref, ...rest }, children ?? React.createElement(index_js_1.SvgSearch, null)));
+    return (React.createElement(index_js_1.InputFlexContainerIcon, { "aria-hidden": true, className: (0, classnames_1.default)('iui-search-icon', className), ref: ref, ...rest }, children ?? React.createElement(index_js_1.SvgSearch, null)));
 });
 SearchBoxIcon.displayName = 'SearchBox.Icon';
 // ----------------------------------------------------------------------------
@@ -115,7 +113,7 @@ SearchBoxInput.displayName = 'SearchBox.Input';
 const SearchBoxButton = React.forwardRef((props, ref) => {
     const { children, ...rest } = props;
     const { size: sizeContext, isDisabled } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-    return (React.createElement(IconButton_js_1.IconButton, { styleType: 'borderless', size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children ?? React.createElement(index_js_1.SvgSearch, null)));
+    return (React.createElement(index_js_1.InputFlexContainerButton, { size: sizeContext, ref: ref, disabled: isDisabled, ...rest }, children ?? React.createElement(index_js_1.SvgSearch, null)));
 });
 SearchBoxButton.displayName = 'SearchBox.Button';
 // ----------------------------------------------------------------------------
@@ -127,9 +125,9 @@ const SearchBoxCollapseButton = React.forwardRef((props, ref) => {
 SearchBoxCollapseButton.displayName = 'SearchBox.CollapseButton';
 // ----------------------------------------------------------------------------
 const SearchBoxExpandButton = React.forwardRef((props, ref) => {
-    const { children, className, onClick: onClickProp, ...rest } = props;
+    const { children, onClick: onClickProp, ...rest } = props;
     const { onExpand, size: sizeContext, isDisabled, openButtonRef, } = (0, index_js_1.useSafeContext)(SearchBoxContext);
-    return (React.createElement(SearchBoxButton, { ref: (0, index_js_1.useMergedRefs)(ref, openButtonRef), className: (0, classnames_1.default)('iui-searchbox-open-button', className), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onExpand), ...rest }, children ?? React.createElement(index_js_1.SvgSearch, null)));
+    return (React.createElement(SearchBoxButton, { ref: (0, index_js_1.useMergedRefs)(ref, openButtonRef), "aria-label": 'Expand searchbox', size: sizeContext, disabled: isDisabled, onClick: (0, index_js_1.mergeEventHandlers)(onClickProp, onExpand), styleType: 'default', ...rest }, children ?? React.createElement(index_js_1.SvgSearch, null)));
 });
 SearchBoxExpandButton.displayName = 'SearchBox.ExpandButton';
 // ----------------------------------------------------------------------------