@itwin/itwinui-react 3.11.3 → 3.12.1

package/cjs/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;

package/cjs/core/LabeledSelect/LabeledSelect.js

@@ -1,75 +1,76 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LabeledSelect = void 0;
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const Select_js_1 = require("../Select/Select.js");
-const StatusMessage_js_1 = require("../StatusMessage/StatusMessage.js");
-const InputGrid_js_1 = require("../InputGrid/InputGrid.js");
-const Label_js_1 = require("../Label/Label.js");
-/**
- * Labeled select component to select value from options.
- * @example
- * <LabeledSelect
- *   label='Select Label'
- *   options={[
- *     { value: 1, label: 'Item #1' },
- *     { value: 2, label: 'Item #2' },
- *     { value: 3, label: 'Item #3' },
- *   ]}
- *   message='Help Message'
- * />
- * <LabeledSelect
- *   label='Select Label'
- *   options={[
- *     { value: 1, label: 'Item #1' },
- *     { value: 2, label: 'Item #2' },
- *     { value: 3, label: 'Item #3' },
- *   ]}
- *   message='Positive Message'
- *   status='positive'
- * />
- * <LabeledSelect
- *   label='Select Label'
- *   options={[
- *     { value: 1, label: 'Item #1' },
- *     { value: 2, label: 'Item #2' },
- *     { value: 3, label: 'Item #3' },
- *   ]}
- *   message='Custom Message'
- *   svgIcon={<SvgCamera />}
- * />
- */
-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, 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)));
+Object.defineProperty(exports, 'LabeledSelect', {
+  enumerable: true,
+  get: function () {
+    return LabeledSelect;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _Select = require('../Select/Select.js');
+const _StatusMessage = require('../StatusMessage/StatusMessage.js');
+const _InputGrid = require('../InputGrid/InputGrid.js');
+const _Label = require('../Label/Label.js');
+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.InputGrid,
+    {
+      labelPlacement: displayStyle,
+      'data-iui-status': status,
+      ...wrapperProps,
+    },
+    label &&
+      _react.createElement(
+        _Label.Label,
+        {
+          as: 'div',
+          required: required,
+          disabled: disabled,
+          ...labelProps,
+        },
+        label,
+      ),
+    _react.createElement(_Select.Select, {
+      disabled: disabled,
+      className: className,
+      style: style,
+      required: props.native ? required : undefined,
+      ...rest,
+      ref: forwardedRef,
+      ...{
+        styleType: 'default',
+      },
+    }),
+    typeof message === 'string'
+      ? _react.createElement(
+          _StatusMessage.StatusMessage,
+          {
+            status: status,
+            startIcon: svgIcon,
+            iconProps: messageIconProps,
+            contentProps: messageContentProps,
+          },
+          message,
+        )
+      : message,
+  );
 });

package/cjs/core/LabeledSelect/LabeledSelect.types-test.js

@@ -0,0 +1,106 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+const _react = require('react');
+const _LabeledSelect = require('./LabeledSelect.js');
+() => {
+  const ref = (0, _react.useRef)(null);
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(_LabeledSelect.LabeledSelect, {
+      options: [
+        {
+          value: 1,
+          label: 'Option 1',
+        },
+        {
+          value: 2,
+          label: 'Option 2',
+        },
+        {
+          value: 3,
+          label: 'Option 3',
+        },
+      ],
+      onChange: (value) => {
+        const returnValue = value;
+        return returnValue;
+      },
+      ref: ref,
+    }),
+  );
+};
+() => {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(_LabeledSelect.LabeledSelect, {
+      options: [
+        {
+          value: 1,
+          label: 'Option 1',
+        },
+        {
+          value: 2,
+          label: 'Option 2',
+        },
+        {
+          value: 3,
+          label: 'Option 3',
+        },
+      ],
+      onChange: (value) => {
+        const returnValue = value;
+        return returnValue;
+      },
+    }),
+  );
+};
+() => {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(_LabeledSelect.LabeledSelect, {
+      label: 'Select Label',
+      options: [
+        {
+          value: '1',
+          label: 'Item #1',
+        },
+        {
+          value: '2',
+          label: 'Item #2',
+        },
+        {
+          value: '3',
+          label: 'Item #3',
+        },
+      ],
+      onChange: (value) => {
+        const returnValue = value;
+        return returnValue;
+      },
+    }),
+  );
+};
+() => {
+  return React.createElement(
+    React.Fragment,
+    null,
+    React.createElement(_LabeledSelect.LabeledSelect, {
+      label: 'Select Label',
+      options: [
+        {
+          value: 1,
+          label: 'Item #1',
+        },
+      ],
+      onChange: (value) => {
+        const returnValue = value;
+        return returnValue;
+      },
+    }),
+  );
+};