@itwin/itwinui-react 3.11.3 → 3.12.1

package/esm/core/InputWithDecorations/InputWithDecorations.js

@@ -1,64 +1,73 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { Box, InputFlexContainer, InputFlexContainerButton, InputFlexContainerIcon, useSafeContext, } from '../../utils/index.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 { 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 }));
+  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(InputFlexContainerButton, { ref: ref, size: size ?? contextSize, disabled: localDisabled ?? isDisabled, ...rest }, children));
+  const { children, size, disabled: localDisabled, ...rest } = props;
+  const { size: contextSize, isDisabled } = useSafeContext(
+    InputWithDecorationsContext,
+  );
+  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.
- *
- * @example
- * <InputWithDecorations>
- *    <InputWithDecorations.Input />
- *    <InputWithDecorations.Icon>
- *      <SvgAdd />
- *    </InputWithDecorations.Icon>
- * </InputWithDecorations>
- */
-export const InputWithDecorations = Object.assign(InputWithDecorationsComponent, {
-    /**
-     * Subcomponent to include input in your InputWithDecorations
-     */
+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/Label/Label.js

@@ -1,21 +1,31 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
 import { Box } from '../../utils/index.js';
-/**
- * A standalone label to be used with input components (using `htmlFor`).
- * Can be rendered as any element, e.g. span, using the `as` prop.
- * @example
- * <Label htmlFor='name-input'>Name</Label>
- * <Input id='name-input' />
- */
 export const Label = React.forwardRef((props, forwardedRef) => {
-    const { displayStyle = 'block', required, disabled, className, children, ...rest } = props;
-    return (React.createElement(Box, { as: 'label', className: cx('iui-input-label', {
-            'iui-inline': displayStyle === 'inline',
-            'iui-required': required,
-        }, className), "data-iui-disabled": disabled ? true : undefined, ref: forwardedRef, ...rest }, children));
+  const {
+    displayStyle = 'block',
+    required,
+    disabled,
+    className,
+    children,
+    ...rest
+  } = props;
+  return React.createElement(
+    Box,
+    {
+      as: 'label',
+      className: cx(
+        'iui-input-label',
+        {
+          'iui-inline': displayStyle === 'inline',
+          'iui-required': required,
+        },
+        className,
+      ),
+      'data-iui-disabled': disabled ? true : undefined,
+      ref: forwardedRef,
+      ...rest,
+    },
+    children,
+  );
 });

package/esm/core/LabeledInput/LabeledInput.js

@@ -1,7 +1,3 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { Input } from '../Input/Input.js';
 import { InputWithIcon, StatusIconMap } from '../../utils/index.js';
@@ -10,22 +6,72 @@ import { StatusMessage } from '../StatusMessage/StatusMessage.js';
 import { Label } from '../Label/Label.js';
 import { Icon } from '../Icon/Icon.js';
 import cx from 'classnames';
-/**
- * Basic labeled input component
- * @example
- * <LabeledInput label='My label' />
- * <LabeledInput disabled label='My label' />
- * <LabeledInput status='positive' label='Positive' />
- * <LabeledInput status='negative' label='Negative' />
- */
 export const LabeledInput = React.forwardRef((props, ref) => {
-    const { disabled = false, label, message, status, svgIcon, wrapperProps, labelProps, messageContentProps, iconProps, inputWrapperProps, displayStyle = 'default', required = false, ...rest } = props;
-    const icon = svgIcon ?? (status && StatusIconMap[status]());
-    const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
-    return (React.createElement(InputGrid, { labelPlacement: displayStyle, "data-iui-status": status, ...wrapperProps },
-        label && (React.createElement(Label, { as: 'label', required: required, disabled: disabled, ...labelProps }, label)),
-        React.createElement(InputWithIcon, { ...inputWrapperProps },
-            React.createElement(Input, { disabled: disabled, required: required, ref: ref, ...rest }),
-            shouldShowIcon && (React.createElement(Icon, { fill: status, ...iconProps, className: cx('iui-end-icon', iconProps?.className) }, icon))),
-        typeof message === 'string' ? (React.createElement(StatusMessage, { status: status, iconProps: iconProps, contentProps: messageContentProps }, message)) : (message)));
+  const {
+    disabled = false,
+    label,
+    message,
+    status,
+    svgIcon,
+    wrapperProps,
+    labelProps,
+    messageContentProps,
+    iconProps,
+    inputWrapperProps,
+    displayStyle = 'default',
+    required = false,
+    ...rest
+  } = props;
+  const icon = svgIcon ?? (status && StatusIconMap[status]());
+  const shouldShowIcon = svgIcon !== null && (svgIcon || (status && !message));
+  return React.createElement(
+    InputGrid,
+    {
+      labelPlacement: displayStyle,
+      'data-iui-status': status,
+      ...wrapperProps,
+    },
+    label &&
+      React.createElement(
+        Label,
+        {
+          as: 'label',
+          required: required,
+          disabled: disabled,
+          ...labelProps,
+        },
+        label,
+      ),
+    React.createElement(
+      InputWithIcon,
+      inputWrapperProps,
+      React.createElement(Input, {
+        disabled: disabled,
+        required: required,
+        ref: ref,
+        ...rest,
+      }),
+      shouldShowIcon &&
+        React.createElement(
+          Icon,
+          {
+            fill: status,
+            ...iconProps,
+            className: cx('iui-end-icon', iconProps?.className),
+          },
+          icon,
+        ),
+    ),
+    typeof message === 'string'
+      ? React.createElement(
+          StatusMessage,
+          {
+            status: status,
+            iconProps: iconProps,
+            contentProps: messageContentProps,
+          },
+          message,
+        )
+      : message,
+  );
 });

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

@@ -102,392 +102,6 @@ export type LabeledSelectProps<T> = {
  *   svgIcon={<SvgCamera />}
  * />
  */
-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?: "positive" | "negative" | "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" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | 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?: "positive" | "negative" | "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?: "positive" | "negative" | "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" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | 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?: "positive" | "negative" | "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/utils").Placement | undefined;
-        /**
-         * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
-         *
-         * Custom svg icon. Will override status icon if specified.
-         */
-        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;
-        interactions?: {
-            click?: boolean | import("@floating-ui/react").UseClickProps | undefined;
-            dismiss?: boolean | import("@floating-ui/react").UseDismissProps | undefined;
-            hover?: boolean | import("@floating-ui/react").UseHoverProps<import("@floating-ui/react").ReferenceType> | undefined;
-            focus?: boolean | import("@floating-ui/react").UseFocusProps | undefined;
-            listNavigation?: import("@floating-ui/react").UseListNavigationProps | undefined;
-        } | undefined;
-        role?: "dialog" | "menu" | "listbox" | undefined;
-        matchWidth?: boolean | undefined;
-    } & Omit<import("@floating-ui/react").UseFloatingOptions<import("@floating-ui/react").ReferenceType>, "placement" | "middleware">, "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?: "positive" | "negative" | "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" | "positive" | "negative" | "warning" | import("../../utils/types.js").AnyString | "informational" | 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?: "positive" | "negative" | "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/utils").Placement | undefined;
-        /**
-         * @deprecated Pass a `<StatusMessage startIcon={svgIcon} />` to the `message` prop instead.
-         *
-         * Custom svg icon. Will override status icon if specified.
-         */
-        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;
-        interactions?: {
-            click?: boolean | import("@floating-ui/react").UseClickProps | undefined;
-            dismiss?: boolean | import("@floating-ui/react").UseDismissProps | undefined;
-            hover?: boolean | import("@floating-ui/react").UseHoverProps<import("@floating-ui/react").ReferenceType> | undefined;
-            focus?: boolean | import("@floating-ui/react").UseFocusProps | undefined;
-            listNavigation?: import("@floating-ui/react").UseListNavigationProps | undefined;
-        } | undefined;
-        role?: "dialog" | "menu" | "listbox" | undefined;
-        matchWidth?: boolean | undefined;
-    } & Omit<import("@floating-ui/react").UseFloatingOptions<import("@floating-ui/react").ReferenceType>, "placement" | "middleware">, "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;
+export declare const LabeledSelect: <T>(props: LabeledSelectProps<T> & {
+    ref?: React.ForwardedRef<HTMLElement>;
+}) => JSX.Element;