@react-md/core 1.0.0-next.0 → 1.0.0-next.10

package/dist/form/Option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/form/Option.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, Fragment, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { icon } from \"../icon/styles.js\";\nimport {\n  TextIconSpacing,\n  type TextIconSpacingProps,\n} from \"../icon/TextIconSpacing.js\";\nimport { getListItemHeight } from \"../list/getListItemHeight.js\";\nimport { ListItemText } from \"../list/ListItemText.js\";\nimport { MenuItem, type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { option } from \"./optionStyles.js\";\nimport { useListboxContext } from \"./useListboxProvider.js\";\nimport { triggerManualChangeEvent } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This icon is used while the option is unselected so that the selected and\n * unselected options have the same alignment.\n *\n * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_OPTION_UNSELECTED_ICON = (\n  <span className={icon({ type: \"svg\" })} />\n);\n\n/**\n * @remarks\n * \\@since 6.0.0 removed the `selected` and `focused` props.\n * \\@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, and `iconSpacingProps` props.\n */\nexport interface OptionProps extends MenuItemProps {\n  /**\n   * @defaultValue `\"option\"`\n   */\n  role?: string;\n\n  value: string | number;\n\n  /**\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * @see {@link DEFAULT_OPTION_UNSELECTED_ICON}\n   * @defaultValue `<span className=\"rmd-icon rmd-icon--svg\" />`\n   */\n  unselectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` of the {@link selectedIcon}/{@link unselectedIcon}\n   * should appear as the {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Since the `selectedIcon`/`unselectedIcon` are rendered as\n   * `leftAddon`/`rightAddon`, the provided `leftAddon`/`rightAddon` will be\n   * wrapped in the {@link TextIconSpacing} component to maintain the correct\n   * spacing. You can use this prop to provide any additional configuration to\n   * the spacing.\n   *\n   * @example\n   * ```tsx\n   * <Option\n   *   leftAddon={<Avatar>A</Avatar>}\n   *   leftAddonType=\"avatar\"\n   *   value={0}\n   *   textIconSpacingProps={{\n   *     beforeClassName: \"my-custom-class-name\",\n   *   }}\n   * >\n   *   Some Content\n   * </Option>\n   * ```\n   */\n  textIconSpacingProps?: Omit<TextIconSpacingProps, \"icon\" | \"children\">;\n}\n\n/**\n * **Client Component**\n *\n * This component is a wrapper around the {@link MenuItem} to implement custom\n * select option behavior.\n *\n * @remarks\n * \\@since 6.0.0 removed the `selected` and `focused` props.\n * \\@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, and `iconSpacingProps` props.\n */\nexport const Option = forwardRef<HTMLLIElement, OptionProps>(\n  function Option(props, ref) {\n    const {\n      id: propId,\n      role = \"option\",\n      value,\n      children: propChildren,\n      onClick = noop,\n      className,\n      selectedIcon: propSelectedIcon,\n      unselectedIcon: propUnselectedIcon,\n      selectedIconAfter = false,\n      textIconSpacingProps,\n      leftAddon: propLeftAddon,\n      leftAddonType,\n      leftAddonClassName,\n      rightAddon: propRightAddon,\n      rightAddonType,\n      rightAddonClassName,\n      secondaryText,\n      height: propHeight,\n      disableTextChildren: propDisableTextChildren,\n      ...remaining\n    } = props;\n\n    const id = useEnsuredId(propId, \"option\");\n    const { inputRef, currentValue, disableSelectedIcon } = useListboxContext();\n    const selected = value === currentValue;\n    const selectedIcon = getIcon(\n      \"selected\",\n      disableSelectedIcon ? null : propSelectedIcon\n    );\n    const unselectedIcon = disableSelectedIcon\n      ? null\n      : propUnselectedIcon ?? DEFAULT_OPTION_UNSELECTED_ICON;\n    const icon = selected ? selectedIcon : unselectedIcon;\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    let children = propChildren;\n    let disableTextChildren = propDisableTextChildren;\n    if (!selectedIconAfter && icon) {\n      leftAddon = icon;\n      if (propLeftAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propLeftAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    } else if (icon) {\n      rightAddon = icon;\n      if (propRightAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propRightAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    }\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon: leftAddon === icon ? null : leftAddon,\n      leftAddonType,\n      rightAddon: rightAddon === icon ? null : rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <MenuItem\n        {...remaining}\n        aria-selected={selected || undefined}\n        id={id}\n        ref={ref}\n        role={role}\n        onClick={(event) => {\n          onClick(event);\n          triggerManualChangeEvent(inputRef.current, value);\n        }}\n        className={option({ icon: !!icon, selected, className })}\n        secondaryText={secondaryText}\n        height={height}\n        leftAddon={leftAddon}\n        leftAddonType={leftAddonType}\n        leftAddonClassName={cnb(\n          leftAddon === icon && \"rmd-option__icon\",\n          leftAddonClassName\n        )}\n        rightAddon={rightAddon}\n        rightAddonType={rightAddonType}\n        rightAddonClassName={cnb(\n          rightAddon === icon && \"rmd-option__icon\",\n          rightAddonClassName\n        )}\n        disableTextChildren={disableTextChildren}\n      >\n        {children}\n      </MenuItem>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","Fragment","getIcon","icon","TextIconSpacing","getListItemHeight","ListItemText","MenuItem","useEnsuredId","option","useListboxContext","triggerManualChangeEvent","noop","DEFAULT_OPTION_UNSELECTED_ICON","span","className","type","Option","props","ref","id","propId","role","value","children","propChildren","onClick","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","textIconSpacingProps","leftAddon","propLeftAddon","leftAddonType","leftAddonClassName","rightAddon","propRightAddon","rightAddonType","rightAddonClassName","secondaryText","height","propHeight","disableTextChildren","propDisableTextChildren","remaining","inputRef","currentValue","disableSelectedIcon","selected","Wrapper","aria-selected","undefined","event","current"],"mappings":"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"}
+{"version":3,"sources":["../../src/form/Option.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, Fragment, type ReactNode } from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { icon } from \"../icon/styles.js\";\nimport {\n  TextIconSpacing,\n  type TextIconSpacingProps,\n} from \"../icon/TextIconSpacing.js\";\nimport { getListItemHeight } from \"../list/getListItemHeight.js\";\nimport { ListItemText } from \"../list/ListItemText.js\";\nimport { MenuItem, type MenuItemProps } from \"../menu/MenuItem.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { option } from \"./optionStyles.js\";\nimport { useListboxContext } from \"./useListboxProvider.js\";\nimport { triggerManualChangeEvent } from \"./utils.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * This icon is used while the option is unselected so that the selected and\n * unselected options have the same alignment.\n *\n * @remarks \\@since 6.0.0\n */\nexport const DEFAULT_OPTION_UNSELECTED_ICON = (\n  <span className={icon({ type: \"svg\" })} />\n);\n\n/**\n * @remarks\n * \\@since 6.0.0 removed the `selected` and `focused` props.\n * \\@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, and `iconSpacingProps` props.\n */\nexport interface OptionProps extends MenuItemProps {\n  /**\n   * @defaultValue `\"option\"`\n   */\n  role?: string;\n\n  value: string | number;\n\n  /**\n   * @defaultValue `getIcon(\"selected\")`\n   */\n  selectedIcon?: ReactNode;\n\n  /**\n   * @see {@link DEFAULT_OPTION_UNSELECTED_ICON}\n   * @defaultValue `<span className=\"rmd-icon rmd-icon--svg\" />`\n   */\n  unselectedIcon?: ReactNode;\n\n  /**\n   * Set this to `true` of the {@link selectedIcon}/{@link unselectedIcon}\n   * should appear as the {@link rightAddon} instead of the {@link leftAddon}.\n   *\n   * @defaultValue `false`\n   */\n  selectedIconAfter?: boolean;\n\n  /**\n   * Since the `selectedIcon`/`unselectedIcon` are rendered as\n   * `leftAddon`/`rightAddon`, the provided `leftAddon`/`rightAddon` will be\n   * wrapped in the {@link TextIconSpacing} component to maintain the correct\n   * spacing. You can use this prop to provide any additional configuration to\n   * the spacing.\n   *\n   * @example\n   * ```tsx\n   * <Option\n   *   leftAddon={<Avatar>A</Avatar>}\n   *   leftAddonType=\"avatar\"\n   *   value={0}\n   *   textIconSpacingProps={{\n   *     beforeClassName: \"my-custom-class-name\",\n   *   }}\n   * >\n   *   Some Content\n   * </Option>\n   * ```\n   */\n  textIconSpacingProps?: Omit<TextIconSpacingProps, \"icon\" | \"children\">;\n}\n\n/**\n * **Client Component**\n *\n * This component is a wrapper around the {@link MenuItem} to implement custom\n * select option behavior.\n *\n * @remarks\n * \\@since 6.0.0 removed the `selected` and `focused` props.\n * \\@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,\n * `selectedIconAfter`, and `iconSpacingProps` props.\n */\nexport const Option = forwardRef<HTMLLIElement, OptionProps>(\n  function Option(props, ref) {\n    const {\n      id: propId,\n      role = \"option\",\n      value,\n      children: propChildren,\n      onClick = noop,\n      className,\n      selectedIcon: propSelectedIcon,\n      unselectedIcon: propUnselectedIcon,\n      selectedIconAfter: propSelectedIconAfter,\n      textIconSpacingProps,\n      leftAddon: propLeftAddon,\n      leftAddonType,\n      leftAddonClassName,\n      rightAddon: propRightAddon,\n      rightAddonType,\n      rightAddonClassName,\n      secondaryText,\n      height: propHeight,\n      disableTextChildren: propDisableTextChildren,\n      ...remaining\n    } = props;\n\n    const id = useEnsuredId(propId, \"option\");\n    const {\n      inputRef,\n      currentValue,\n      disableSelectedIcon,\n      selectedIconAfter: contextSelectedIconAfter,\n    } = useListboxContext();\n    const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;\n    const selected = value === currentValue;\n    const selectedIcon = getIcon(\n      \"selected\",\n      disableSelectedIcon ? null : propSelectedIcon\n    );\n    const unselectedIcon = disableSelectedIcon\n      ? null\n      : propUnselectedIcon ?? DEFAULT_OPTION_UNSELECTED_ICON;\n    const icon = selected ? selectedIcon : unselectedIcon;\n\n    let leftAddon = propLeftAddon;\n    let rightAddon = propRightAddon;\n    let children = propChildren;\n    let disableTextChildren = propDisableTextChildren;\n    if (!selectedIconAfter && icon) {\n      leftAddon = icon;\n      if (propLeftAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propLeftAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    } else if (icon) {\n      rightAddon = icon;\n      if (propRightAddon) {\n        disableTextChildren = true;\n        const Wrapper = propDisableTextChildren ? Fragment : ListItemText;\n\n        children = (\n          <TextIconSpacing {...textIconSpacingProps} icon={propRightAddon}>\n            <Wrapper>{children}</Wrapper>\n          </TextIconSpacing>\n        );\n      }\n    }\n\n    const height = getListItemHeight({\n      height: propHeight,\n      leftAddon: leftAddon === icon ? null : leftAddon,\n      leftAddonType,\n      rightAddon: rightAddon === icon ? null : rightAddon,\n      rightAddonType,\n      secondaryText,\n    });\n\n    return (\n      <MenuItem\n        {...remaining}\n        aria-selected={selected || undefined}\n        id={id}\n        ref={ref}\n        role={role}\n        onClick={(event) => {\n          onClick(event);\n          triggerManualChangeEvent(inputRef.current, value);\n        }}\n        className={option({ icon: !!icon, selected, className })}\n        secondaryText={secondaryText}\n        height={height}\n        leftAddon={leftAddon}\n        leftAddonType={leftAddonType}\n        leftAddonClassName={cnb(\n          leftAddon === icon && \"rmd-option__icon\",\n          leftAddonClassName\n        )}\n        rightAddon={rightAddon}\n        rightAddonType={rightAddonType}\n        rightAddonClassName={cnb(\n          rightAddon === icon && \"rmd-option__icon\",\n          rightAddonClassName\n        )}\n        disableTextChildren={disableTextChildren}\n      >\n        {children}\n      </MenuItem>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","Fragment","getIcon","icon","TextIconSpacing","getListItemHeight","ListItemText","MenuItem","useEnsuredId","option","useListboxContext","triggerManualChangeEvent","noop","DEFAULT_OPTION_UNSELECTED_ICON","span","className","type","Option","props","ref","id","propId","role","value","children","propChildren","onClick","selectedIcon","propSelectedIcon","unselectedIcon","propUnselectedIcon","selectedIconAfter","propSelectedIconAfter","textIconSpacingProps","leftAddon","propLeftAddon","leftAddonType","leftAddonClassName","rightAddon","propRightAddon","rightAddonType","rightAddonClassName","secondaryText","height","propHeight","disableTextChildren","propDisableTextChildren","remaining","inputRef","currentValue","disableSelectedIcon","contextSelectedIconAfter","selected","Wrapper","aria-selected","undefined","event","current"],"mappings":"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"}

package/dist/form/ResizingTextAreaWrapper.d.ts

@@ -0,0 +1,19 @@
+import { type CSSProperties, type HTMLAttributes, type Ref, type TextareaHTMLAttributes } from "react";
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export interface ResizingTextAreaWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    maskId: string;
+    maskRef: Ref<HTMLTextAreaElement>;
+    defaultValue?: TextareaHTMLAttributes<HTMLTextAreaElement>["defaultValue"];
+    rows: number;
+    areaStyle?: CSSProperties;
+    areaClassName?: string;
+    disableTransition?: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export declare const ResizingTextAreaWrapper: import("react").ForwardRefExoticComponent<ResizingTextAreaWrapperProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/form/ResizingTextAreaWrapper.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cnb } from "cnbuilder";
+import { forwardRef } from "react";
+import { textArea } from "./textAreaStyles.js";
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */ export const ResizingTextAreaWrapper = /*#__PURE__*/ forwardRef(function ResizingTextAreaWrapper(props, ref) {
+    const { className, rows, maskId, maskRef, areaStyle, areaClassName, defaultValue, disableTransition, children, ...remaining } = props;
+    return /*#__PURE__*/ _jsxs("div", {
+        ...remaining,
+        ref: ref,
+        className: cnb("rmd-textarea-container__inner", !disableTransition && "rmd-textarea-container__inner--animate", className),
+        children: [
+            children,
+            /*#__PURE__*/ _jsx("textarea", {
+                "aria-hidden": true,
+                id: maskId,
+                ref: maskRef,
+                defaultValue: defaultValue,
+                readOnly: true,
+                tabIndex: -1,
+                rows: rows,
+                style: areaStyle,
+                className: textArea({
+                    mask: true,
+                    resize: "auto",
+                    className: areaClassName
+                })
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=ResizingTextAreaWrapper.js.map

package/dist/form/ResizingTextAreaWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/form/ResizingTextAreaWrapper.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type Ref,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport { textArea } from \"./textAreaStyles.js\";\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface ResizingTextAreaWrapperProps\n  extends HTMLAttributes<HTMLDivElement> {\n  maskId: string;\n  maskRef: Ref<HTMLTextAreaElement>;\n  defaultValue?: TextareaHTMLAttributes<HTMLTextAreaElement>[\"defaultValue\"];\n  rows: number;\n  areaStyle?: CSSProperties;\n  areaClassName?: string;\n  disableTransition?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport const ResizingTextAreaWrapper = forwardRef<\n  HTMLDivElement,\n  ResizingTextAreaWrapperProps\n>(function ResizingTextAreaWrapper(props, ref) {\n  const {\n    className,\n    rows,\n    maskId,\n    maskRef,\n    areaStyle,\n    areaClassName,\n    defaultValue,\n    disableTransition,\n    children,\n    ...remaining\n  } = props;\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={cnb(\n        \"rmd-textarea-container__inner\",\n        !disableTransition && \"rmd-textarea-container__inner--animate\",\n        className\n      )}\n    >\n      {children}\n      <textarea\n        aria-hidden\n        id={maskId}\n        ref={maskRef}\n        defaultValue={defaultValue}\n        readOnly\n        tabIndex={-1}\n        rows={rows}\n        style={areaStyle}\n        className={textArea({\n          mask: true,\n          resize: \"auto\",\n          className: areaClassName,\n        })}\n      />\n    </div>\n  );\n});\n"],"names":["cnb","forwardRef","textArea","ResizingTextAreaWrapper","props","ref","className","rows","maskId","maskRef","areaStyle","areaClassName","defaultValue","disableTransition","children","remaining","div","textarea","aria-hidden","id","readOnly","tabIndex","style","mask","resize"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,QAKL,QAAQ;AACf,SAASC,QAAQ,QAAQ,sBAAsB;AAiB/C;;;CAGC,GACD,OAAO,MAAMC,wCAA0BF,WAGrC,SAASE,wBAAwBC,KAAK,EAAEC,GAAG;IAC3C,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EACjBC,QAAQ,EACR,GAAGC,WACJ,GAAGX;IAEJ,qBACE,MAACY;QACE,GAAGD,SAAS;QACbV,KAAKA;QACLC,WAAWN,IACT,iCACA,CAACa,qBAAqB,0CACtBP;;YAGDQ;0BACD,KAACG;gBACCC,aAAW;gBACXC,IAAIX;gBACJH,KAAKI;gBACLG,cAAcA;gBACdQ,QAAQ;gBACRC,UAAU,CAAC;gBACXd,MAAMA;gBACNe,OAAOZ;gBACPJ,WAAWJ,SAAS;oBAClBqB,MAAM;oBACNC,QAAQ;oBACRlB,WAAWK;gBACb;;;;AAIR,GAAG"}

package/dist/form/Select.d.ts

@@ -1,7 +1,9 @@
-import { type ChangeEvent, type ReactElement, type ReactNode, type Ref } from "react";
+import { type ChangeEvent, type HTMLAttributes, type InputHTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
+import { type BoxProps } from "../box/Box.js";
 import { type MenuProps } from "../menu/Menu.js";
-import { type TextFieldProps } from "./TextField.js";
-import { type FormFieldOptions, type UserAgentAutoCompleteProps } from "./types.js";
+import { type LabelA11y, type PropsWithRef, type RequireAtLeastOne } from "../types.js";
+import { type TextFieldContainerProps } from "./TextFieldContainer.js";
+import { type UserAgentAutocompleteProps } from "./types.js";
 /**
  * This is a convenience type for casting the `event.currentTarget.value` of a
  * `Select`'s change event to be union of available values.
@@ -53,14 +55,16 @@ export type SelectChangeEvent<Value extends string> = ChangeEvent<HTMLInputEleme
 /**
  * @remarks \@since 6.0.0 Rewritten with a new API.
  */
-export interface SelectProps<Value extends string> extends Omit<TextFieldProps, "placeholder" | "type" | "onChange">, UserAgentAutoCompleteProps, FormFieldOptions {
+export interface SelectProps<Value extends string> extends Omit<TextFieldContainerProps, "label">, Pick<InputHTMLAttributes<HTMLInputElement>, "form" | "required">, UserAgentAutocompleteProps {
     /**
-     * An optional ref to pass to the hidden `<input type="text" />` element that
-     * stores the current value. This is really only useful if you'd like to keep
-     * this component uncontrolled and access the value through
-     * `inputRef.current.value`.
+     * @defaultValue `"select-" + useId()`
      */
-    inputRef?: Ref<HTMLInputElement>;
+    id?: string;
+    /**
+     * Optional placeholder text or element to render while no options have been
+     * selected.
+     */
+    placeholder?: ReactNode;
     /**
      * Set this to a custom dropdown icon or `null` to not render a dropdown icon.
      *
@@ -81,6 +85,26 @@ export interface SelectProps<Value extends string> extends Omit<TextFieldProps,
     defaultValue?: Value;
     /** @see {@link SelectChangeEvent} */
     onChange?(event: SelectChangeEvent<Value>): void;
+    /**
+     * An optional floating label to display like other form fields.
+     */
+    label?: ReactNode;
+    /**
+     * Optional props to pass to the `<span>` that surrounds the {@link label}
+     */
+    labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+    /**
+     * An optional ref to pass to the hidden `<input type="text" />` element that
+     * stores the current value. This is really only useful if you'd like to keep
+     * this component uncontrolled and access the value through
+     * `inputRef.current.value`.
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * A ref for the container `<div>` element.
+     */
+    containerRef?: Ref<HTMLDivElement>;
     /**
      * Any additional props to provide to the `Menu` component that renders all
      * the `Option`s.
@@ -88,25 +112,40 @@ export interface SelectProps<Value extends string> extends Omit<TextFieldProps,
      * The menu will always have these default values unless explicity
      * overwritten by this prop:
      *
-     * - `aria-labelledby={containerId}`
+     * - `aria-labelledby={label ? labelId : id}` -- this will be undefined if
+     *   `aria-label` is provided
      * - `anchor={BELOW_CENTER_ANCHOR}`
      * - `width="min"`
      */
     menuProps?: Omit<MenuProps, "visible" | "onRequestClose" | "fixedTo">;
     /**
-     * Set this to `true` to update all the `Option` components to no longer
-     * render an icon while selected.
+     * Any additional props to pass to the div that contains the current visible
+     * option.
+     */
+    selectedOptionProps?: BoxProps;
+    /**
+     * Set this to `true` if all the `Option` components should display the
+     * selected icon after the children instead of before.
+     *
+     * @see {@link disableSelectedIcon} to remove the selected icon instead.
      *
      * @defaultValue `false`
      */
-    disableSelectedIcon?: boolean;
+    selectedIconAfter?: boolean;
     /**
      * Set this to `true` to prevent the current option from rendering the
      * `leftAddon` in the `TextFieldContainer`.
      *
      * @defaultValue `false`
      */
-    disableValueAddon?: boolean;
+    disableOptionAddon?: boolean;
+    /**
+     * Set this to `true` to update all the `Option` components to no longer
+     * render an icon while selected.
+     *
+     * @defaultValue `false`
+     */
+    disableSelectedIcon?: boolean;
     /**
      * This should be the available `Option`s for the select to choose from. It
      * can also contain `OptGroup` or any other elements but only clicking on an
@@ -117,6 +156,57 @@ export interface SelectProps<Value extends string> extends Omit<TextFieldProps,
 /**
  * **Client Component**
  *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Select, Option } from "react-md";
+ * import { useState, type ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   const [value, setValue] = useState("");
+ *
+ *   return (
+ *     <Select
+ *       label="Select"
+ *       value={value}
+ *       onChange={(event) => setValue(event.currentTarget.value)}
+ *       placeholder="Select a value"
+ *     >
+ *       <Option value="a">Option 1</Option>
+ *       <Option value="b">Option 2</Option>
+ *       <Option value="c">Option 3</Option>
+ *       <Option value="d">Option 4</Option>
+ *     </Select>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Testing
+ * ```tsx
+ * rmdRender(
+ *   <Select label="Select" selectedOptionProps={{ "data-testid": "selected" }}>
+ *     <Option value="a">Option 1</Option>
+ *     <Option value="b">Option 2</Option>
+ *     <Option value="c">Option 3</Option>
+ *     <Option value="d">Option 4</Option>
+ *   </Select>
+ * );
+ *
+ * const user = userEvent.setup();
+ * const select = screen.getByRole("combobox", { name: "Select" });
+ * const selected = screen.getByTestId("selected")
+ * const selectInput = screen.getByRole("textbox", { hidden: true });
+ * expect(selected).toHaveTextContent("");
+ * expect(selectInput).toHaveValue("");
+ *
+ * await user.click(select);
+ * await user.click(screen.getByRole("option"), { name: "Option 2" });
+ *
+ * expect(selected).toHaveTextContent("Option 2");
+ * expect(selectInput).toHaveValue("b");
+ * ```
+ *
  * @remarks \@since 6.0.0 Rewritten with a new API.
  */
-export declare function Select<Value extends string>(props: SelectProps<Value>): ReactElement;
+export declare function Select<Value extends string>(props: RequireAtLeastOne<SelectProps<Value>, "label" | keyof LabelA11y>): ReactElement;