npm - @react-md/core - Versions diffs - 1.0.0-next.8 → 1.0.0-next.9 - Mend

@react-md/core 1.0.0-next.8 → 1.0.0-next.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (667) hide show

package/dist/RootHtml.d.ts ADDED Viewed

@@ -0,0 +1,62 @@
+import { type HTMLAttributes, type HtmlHTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { type PropsWithRef } from "./types.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {
+    /** @defaultValue `"ltr"` */
+    dir?: string;
+    /** @defaultValue `"en"` */
+    lang?: string;
+    /**
+     * Any additional props to provide to the `<body>` element and also supports a
+     * `ref` if that is required for some reason. Using a `ref` would make your
+     * root layout a client component though.
+     */
+    bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;
+    /**
+     * Convenience prop to replace `bodyProps={{ className: "custom-class-name" }}`.
+     */
+    bodyClassName?: string;
+    /**
+     * Any content to render before the `<body>` tag. This can be useful if you
+     * need to render a custom `<head>` element.
+     */
+    beforeBodyChildren?: ReactNode;
+    /**
+     * Any content to render after the `<body>` tag. This can be useful to insert
+     * `<script>` tags for analytics or other external libraries.
+     */
+    afterBodyChildren?: ReactNode;
+}
+/**
+ * **Server Component**
+ *
+ * This is mostly for creating the root html for next.js applications that
+ * defaults to setting the `dir="ltr"` and `lang="en"`. Additional props can be
+ * passed to the root `<html>` and `<body>` elements and children can be
+ * rendered before and after the `<body>` if needed.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * // src/app/layout.tsx
+ * import { RootHtml } from "@react-md/core";
+ * import { type ReactElement, type PropsWithChildren } from "react";
+ * import { Roboto_Flex } from "next/font/google";
+ *
+ * const roboto = Roboto_Flex({
+ *   subsets: ["latin"],
+ *   variable: "--roboto",
+ * });
+ *
+ * export default function RootLayout(props: PropsWithChildren): ReactElement {
+ *   const { children } = props;
+ *
+ *   return <RootHtml className={roboto.variable}>{children}</RootHtml>;
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare function RootHtml(props: RootHtmlProps): ReactElement;

package/dist/RootHtml.js ADDED Viewed

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * **Server Component**
+ *
+ * This is mostly for creating the root html for next.js applications that
+ * defaults to setting the `dir="ltr"` and `lang="en"`. Additional props can be
+ * passed to the root `<html>` and `<body>` elements and children can be
+ * rendered before and after the `<body>` if needed.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * // src/app/layout.tsx
+ * import { RootHtml } from "@react-md/core";
+ * import { type ReactElement, type PropsWithChildren } from "react";
+ * import { Roboto_Flex } from "next/font/google";
+ *
+ * const roboto = Roboto_Flex({
+ *   subsets: ["latin"],
+ *   variable: "--roboto",
+ * });
+ *
+ * export default function RootLayout(props: PropsWithChildren): ReactElement {
+ *   const { children } = props;
+ *
+ *   return <RootHtml className={roboto.variable}>{children}</RootHtml>;
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */ export function RootHtml(props) {
+    const { dir = "ltr", lang = "en", children, bodyProps, bodyClassName, beforeBodyChildren, afterBodyChildren, ...remaining } = props;
+    return /*#__PURE__*/ _jsxs("html", {
+        dir: dir,
+        lang: lang,
+        ...remaining,
+        children: [
+            beforeBodyChildren,
+            /*#__PURE__*/ _jsx("body", {
+                ...bodyProps,
+                className: bodyClassName || bodyProps?.className,
+                children: children
+            }),
+            afterBodyChildren
+        ]
+    });
+}
+//# sourceMappingURL=RootHtml.js.map

package/dist/RootHtml.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/RootHtml.tsx"],"sourcesContent":["import {\n type HTMLAttributes,\n type HtmlHTMLAttributes,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface RootHtmlProps extends HtmlHTMLAttributes<HTMLHtmlElement> {\n /** @defaultValue `\"ltr\"` */\n dir?: string;\n\n /** @defaultValue `\"en\"` */\n lang?: string;\n\n /**\n * Any additional props to provide to the `<body>` element and also supports a\n * `ref` if that is required for some reason. Using a `ref` would make your\n * root layout a client component though.\n */\n bodyProps?: PropsWithRef<HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>;\n\n /**\n * Convenience prop to replace `bodyProps={{ className: \"custom-class-name\" }}`.\n */\n bodyClassName?: string;\n\n /**\n * Any content to render before the `<body>` tag. This can be useful if you\n * need to render a custom `<head>` element.\n */\n beforeBodyChildren?: ReactNode;\n\n /**\n * Any content to render after the `<body>` tag. This can be useful to insert\n * `<script>` tags for analytics or other external libraries.\n */\n afterBodyChildren?: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * This is mostly for creating the root html for next.js applications that\n * defaults to setting the `dir=\"ltr\"` and `lang=\"en\"`. Additional props can be\n * passed to the root `<html>` and `<body>` elements and children can be\n * rendered before and after the `<body>` if needed.\n *\n * @example\n * Simple Example\n * ```tsx\n * // src/app/layout.tsx\n * import { RootHtml } from \"@react-md/core\";\n * import { type ReactElement, type PropsWithChildren } from \"react\";\n * import { Roboto_Flex } from \"next/font/google\";\n *\n * const roboto = Roboto_Flex({\n * subsets: [\"latin\"],\n * variable: \"--roboto\",\n * });\n *\n * export default function RootLayout(props: PropsWithChildren): ReactElement {\n * const { children } = props;\n *\n * return <RootHtml className={roboto.variable}>{children}</RootHtml>;\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function RootHtml(props: RootHtmlProps): ReactElement {\n const {\n dir = \"ltr\",\n lang = \"en\",\n children,\n bodyProps,\n bodyClassName,\n beforeBodyChildren,\n afterBodyChildren,\n ...remaining\n } = props;\n\n return (\n <html dir={dir} lang={lang} {...remaining}>\n {beforeBodyChildren}\n <body {...bodyProps} className={bodyClassName || bodyProps?.className}>\n {children}\n </body>\n {afterBodyChildren}\n </html>\n );\n}\n"],"names":["RootHtml","props","dir","lang","children","bodyProps","bodyClassName","beforeBodyChildren","afterBodyChildren","remaining","html","body","className"],"mappings":";AA2CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASA,SAASC,KAAoB;IAC3C,MAAM,EACJC,MAAM,KAAK,EACXC,OAAO,IAAI,EACXC,QAAQ,EACRC,SAAS,EACTC,aAAa,EACbC,kBAAkB,EAClBC,iBAAiB,EACjB,GAAGC,WACJ,GAAGR;IAEJ,qBACE,MAACS;QAAKR,KAAKA;QAAKC,MAAMA;QAAO,GAAGM,SAAS;;YACtCF;0BACD,KAACI;gBAAM,GAAGN,SAAS;gBAAEO,WAAWN,iBAAiBD,WAAWO;0BACzDR;;YAEFI;;;AAGP"}

package/dist/avatar/Avatar.d.ts CHANGED Viewed

@@ -12,7 +12,18 @@ declare module "react" {
     }
 }
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
+/**
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
+ */
 export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, AvatarClassNameOptions {
+    /**
+     * Since avatars are normally presentational data, they are hidden from screen
+     * readers by default.
+     *
+     * @defaultValue `true`
+     */
+    "aria-hidden"?: HTMLAttributes<HTMLSpanElement>["aria-hidden"];
     /**
      * This should be an image `src` attribute to create an avatar from. When this
      * prop is defined, you should not add any children to the avatar as the
@@ -71,5 +82,8 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, "colo
  *   return <Avatar src="/path-to-img.png" />;
  * }
  * ```
+ *
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
  */
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/avatar/Avatar.js CHANGED Viewed

@@ -19,8 +19,11 @@ import { avatar, avatarImage } from "./styles.js";
  *   return <Avatar src="/path-to-img.png" />;
  * }
  * ```
+ *
+ * @remarks \@since 6.0.0 `aria-hidden` is set to `true` by default and removed
+ * the `role="presentation"`.
  */ export const Avatar = /*#__PURE__*/ forwardRef(function Avatar(props, ref) {
-    const { className, children, src, alt = "", size = "avatar", color = "", theme, imgProps, referrerPolicy, ...remaining } = props;
+    const { "aria-hidden": ariaHidden = true, className, children, src, alt = "", size = "avatar", color = "", theme, imgProps, referrerPolicy, ...remaining } = props;
     let img;
     if (src || imgProps) {
         img = /*#__PURE__*/ _jsx("img", {
@@ -35,8 +38,8 @@ import { avatar, avatarImage } from "./styles.js";
     }
     return /*#__PURE__*/ _jsxs("span", {
         ...remaining,
+        "aria-hidden": ariaHidden,
         ref: ref,
-        role: "presentation",
         className: avatar({
             size,
             color,

package/dist/avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ImgHTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-avatar-background-color\"?: string;\n \"--rmd-avatar-color\"?: string;\n \"--rmd-avatar-border-color\"?: string;\n \"--rmd-avatar-border-radius\"?: string \| number;\n \"--rmd-avatar-size\"?: string \| number;\n \"--rmd-avatar-font-size\"?: string \| number;\n }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\nexport interface AvatarProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n AvatarClassNameOptions {\n /*\n This should be an image `src` attribute to create an avatar from. When this\n * prop is defined, you should not add any children to the avatar as the\n * positioning will break.\n /\n src?: string;\n\n /\n An optional alt tag to display on the `<img>` when the `src` prop is also\n * applied.\n \n For accessibility and screen readers, you normally do not want to actually\n * provide this prop. This should only be used if the `Avatar` is not\n * accompanied by some other component or main content as it will be extra\n * noise for screen readers.\n \n @defaultValue `\"\"`\n /\n alt?: string;\n\n /\n An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n * or `imgProps` props are provided.\n \n @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy\|Referrer Policy}\n \n @remarks \\@since 2.2.0\n /\n referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n /\n An optional object of image props and ref that can be used to create an\n * image within the `Avatar`. This can be useful to add a custom `style`\n * or`className` to the `<img>` element if that additional customization is\n * needed.\n \n Note: The values in this object will override the `src`, `alt`, and\n * `referrerPolicy` root level avatar props if they exist on this object.\n \n @remarks \\@since 2.2.0\n /\n imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/\n Server Component\n \n An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n \n @example\n * Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n \n export function Example(): ReactElement {\n * return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n function Avatar(props, ref) {\n const {\n className,\n children,\n src,\n alt = \"\",\n size = \"avatar\",\n color = \"\",\n theme,\n imgProps,\n referrerPolicy,\n ...remaining\n } = props;\n\n let img;\n if (src \|\| imgProps) {\n img = (\n <img\n src={src}\n alt={alt}\n referrerPolicy={referrerPolicy}\n {...imgProps}\n className={avatarImage({ className: imgProps?.className })}\n />\n );\n }\n\n return (\n <span\n {...remaining}\n ~~ref~~={~~ref~~}\n ~~role=\"presentation~~\"\n className={avatar({\n size,\n color,\n theme,\n className,\n })}\n >\n {img}\n {children}\n </span>\n );\n }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","~~role~~"],"mappings":";AAAA,~~SAASA~~,UAAU,~~QAAqD~~,QAAQ;~~AAEhF~~,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;~~AA8D~~/E~~;;;;;;;;;;;;;;;;;;CAkBC~~,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,~~EACJC~~,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,~~GAAGX~~;IAEJ,~~IAAIY~~;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,~~WAAWJ~~,YAAY;~~gBAAEI~~,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;~~QACbV~~,~~KAAKA~~;~~QACLa~~,~~MAAK~~;~~QACLZ~~,~~WAAWL~~,OAAO;~~YAChBS~~;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}
1	+ {"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import {\n forwardRef,\n type HTMLAttributes,\n type ImgHTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-avatar-background-color\"?: string;\n \"--rmd-avatar-color\"?: string;\n \"--rmd-avatar-border-color\"?: string;\n \"--rmd-avatar-border-radius\"?: string \| number;\n \"--rmd-avatar-size\"?: string \| number;\n \"--rmd-avatar-font-size\"?: string \| number;\n }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\n/*\n @remarks \\@since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n /\nexport interface AvatarProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"color\">,\n AvatarClassNameOptions {\n /\n Since avatars are normally presentational data, they are hidden from screen\n * readers by default.\n \n @defaultValue `true`\n /\n \"aria-hidden\"?: HTMLAttributes<HTMLSpanElement>[\"aria-hidden\"];\n\n /\n This should be an image `src` attribute to create an avatar from. When this\n * prop is defined, you should not add any children to the avatar as the\n * positioning will break.\n /\n src?: string;\n\n /\n An optional alt tag to display on the `<img>` when the `src` prop is also\n * applied.\n \n For accessibility and screen readers, you normally do not want to actually\n * provide this prop. This should only be used if the `Avatar` is not\n * accompanied by some other component or main content as it will be extra\n * noise for screen readers.\n \n @defaultValue `\"\"`\n /\n alt?: string;\n\n /\n An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n * or `imgProps` props are provided.\n \n @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy\|Referrer Policy}\n \n @remarks \\@since 2.2.0\n /\n referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n /\n An optional object of image props and ref that can be used to create an\n * image within the `Avatar`. This can be useful to add a custom `style`\n * or`className` to the `<img>` element if that additional customization is\n * needed.\n \n Note: The values in this object will override the `src`, `alt`, and\n * `referrerPolicy` root level avatar props if they exist on this object.\n \n @remarks \\@since 2.2.0\n /\n imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/\n Server Component\n \n An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n \n @example\n * Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n \n export function Example(): ReactElement {\n * return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n \n @remarks \\@since 6.0.0 `aria-hidden` is set to `true` by default and removed\n * the `role=\"presentation\"`.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n function Avatar(props, ref) {\n const {\n \"aria-hidden\": ariaHidden = true,\n className,\n children,\n src,\n alt = \"\",\n size = \"avatar\",\n color = \"\",\n theme,\n imgProps,\n referrerPolicy,\n ...remaining\n } = props;\n\n let img: ReactNode;\n if (src \|\| imgProps) {\n img = (\n <img\n src={src}\n alt={alt}\n referrerPolicy={referrerPolicy}\n {...imgProps}\n className={avatarImage({ className: imgProps?.className })}\n />\n );\n }\n\n return (\n <span\n {...remaining}\n aria-hidden={ariaHidden}\n ref={ref}\n className={avatar({\n size,\n color,\n theme,\n className,\n })}\n >\n {img}\n {children}\n </span>\n );\n }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","ariaHidden","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","aria-hidden"],"mappings":";AAAA,SACEA,UAAU,QAIL,QAAQ;AAEf,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA0E/E;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJ,eAAeC,aAAa,IAAI,EAChCC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGZ;IAEJ,IAAIa;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWL,YAAY;gBAAEK,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbG,eAAab;QACbD,KAAKA;QACLE,WAAWN,OAAO;YAChBU;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}

package/dist/dialog/FixedDialog.d.ts CHANGED Viewed

@@ -35,8 +35,7 @@ export declare const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClas
  *   Typography,
  *   useToggle,
  * } from "@react-md/core";
- * import { useRef } from "react";
- * import type { ReactElement } from "react";
+ * import { useId, useRef, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   const {
@@ -44,18 +43,20 @@ export declare const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClas
  *     disable: onRequestClose,
  *     toggled: visible,
  *   } = useToggle(false);
+ *   const titleId = useId();
  *   const fixedTo = useRef<HTMLButtonElement>(null)
  *
  *   return (
  *     <>
  *       <Button ref={fixedTo} onClick={toggle}>Toggle</Button>
  *       <FixedDialog
- *         aria-labelledby="dialog-title"
+ *         aria-labelledby={titleId}
+ *         fixedTo={fixedTo}
  *         visible={visible}
  *         onRequestClose={onRequestClose}
  *       >
  *         <DialogHeader>
- *           <DialogTitle id="dialog-title">Simple Dialog</DialogTitle>
+ *           <DialogTitle id={titleId}>Simple Dialog</DialogTitle>
  *         </DialogHeader>
  *         <DialogContent>
  *           <Typography margin="none">This is some text in a dialog.</Typography>

package/dist/dialog/FixedDialog.js CHANGED Viewed

@@ -32,8 +32,7 @@ export const DEFAULT_FIXED_DIALOG_CLASSNAMES = {
  *   Typography,
  *   useToggle,
  * } from "@react-md/core";
- * import { useRef } from "react";
- * import type { ReactElement } from "react";
+ * import { useId, useRef, type ReactElement } from "react";
  *
  * function Example(): ReactElement {
  *   const {
@@ -41,18 +40,20 @@ export const DEFAULT_FIXED_DIALOG_CLASSNAMES = {
  *     disable: onRequestClose,
  *     toggled: visible,
  *   } = useToggle(false);
+ *   const titleId = useId();
  *   const fixedTo = useRef<HTMLButtonElement>(null)
  *
  *   return (
  *     <>
  *       <Button ref={fixedTo} onClick={toggle}>Toggle</Button>
  *       <FixedDialog
- *         aria-labelledby="dialog-title"
+ *         aria-labelledby={titleId}
+ *         fixedTo={fixedTo}
  *         visible={visible}
  *         onRequestClose={onRequestClose}
  *       >
  *         <DialogHeader>
- *           <DialogTitle id="dialog-title">Simple Dialog</DialogTitle>
+ *           <DialogTitle id={titleId}>Simple Dialog</DialogTitle>
  *         </DialogHeader>
  *         <DialogContent>
  *           <Typography margin="none">This is some text in a dialog.</Typography>

package/dist/dialog/FixedDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/dialog/FixedDialog.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useRef, type RefObject } from \"react\";\nimport { TOP_INNER_RIGHT_ANCHOR } from \"../positioning/constants.js\";\nimport {\n type CalculateFixedPositionOptions,\n type PositionAnchor,\n} from \"../positioning/types.js\";\nimport { useFixedPositioning } from \"../positioning/useFixedPositioning.js\";\nimport { type CSSTransitionClassNamesObject } from \"../transition/types.js\";\nimport { SCALE_CLASSNAMES } from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { Dialog, type BaseDialogProps } from \"./Dialog.js\";\n\nexport interface BaseFixedDialogProps extends Omit<BaseDialogProps, \"type\"> {\n anchor?: PositionAnchor;\n fixedTo: RefObject<HTMLElement>;\n options?: CalculateFixedPositionOptions;\n getFixedPositionOptions?(): CalculateFixedPositionOptions;\n\n /*\n @defaultValue `true`\n /\n overlayHidden?: boolean;\n\n /\n @defaultValue `true`\n /\n disableScrollLock?: boolean;\n}\n\nexport type FixedDialogProps = LabelRequiredForA11y<BaseFixedDialogProps>;\n\nconst noop = (): void => {\n // do nothing\n};\nexport const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =\n {\n appear: \"rmd-dialog--fixed-enter\",\n appearActive: \"rmd-dialog--fixed-enter-active\",\n enter: \"rmd-dialog--fixed-enter\",\n enterActive: \"rmd-dialog--fixed-enter-active\",\n exit: \"rmd-dialog--fixed-exit\",\n exitActive: \"rmd-dialog--fixed-exit-active\",\n };\n\n/\n Client Component\n \n @example\n * Simple Example\n * ```tsx\n * import {\n * Button,\n * DialogHeader,\n * DialogTitle,\n * DialogContent,\n * DialogFooter,\n * FixedDialog,\n * Typography,\n * useToggle,\n * } from \"@react-md/core\";\n * import { useRef ~~} from \"react\";\n * import~~ type { ReactElement } from \"react\";\n \n function Example(): ReactElement {\n * const {\n * toggle,\n * disable: onRequestClose,\n * toggled: visible,\n * } = useToggle(false);\n * const fixedTo = useRef<HTMLButtonElement>(null)\n \n return (\n * <>\n * <Button ref={fixedTo} onClick={toggle}>Toggle</Button>\n * <FixedDialog\n * aria-labelledby~~=\"dialog-title~~\"\n * visible={visible}\n * onRequestClose={onRequestClose}\n * >\n * <DialogHeader>\n * <DialogTitle id~~=\"dialog-title\"~~>Simple Dialog</DialogTitle>\n * </DialogHeader>\n * <DialogContent>\n * <Typography margin=\"none\">This is some text in a dialog.</Typography>\n * </DialogContent>\n * <DialogFooter>\n * <Button onClick={onRequestClose}>\n * Close\n * </Button>\n * </DialogFooter>\n * </FixedDialog>\n * </>\n * );\n * }\n * ```\n */\nexport const FixedDialog = forwardRef<HTMLDivElement, FixedDialogProps>(\n function FixedDialog(props, nodeRef) {\n const {\n fixedTo,\n style: propStyle,\n classNames = SCALE_CLASSNAMES,\n children,\n anchor = TOP_INNER_RIGHT_ANCHOR,\n options,\n getFixedPositionOptions,\n onEnter,\n onEntering,\n onEntered,\n onExited = noop,\n onRequestClose,\n overlayHidden = true,\n disableScrollLock = true,\n isFocusTypeDisabled = noop,\n ...remaining\n } = props;\n\n const disableExitFocus = useRef(false);\n const { ref, style, callbacks } = useFixedPositioning({\n nodeRef,\n style: propStyle,\n transformOrigin: true,\n onEnter,\n onEntering,\n onEntered,\n onExited() {\n onExited();\n disableExitFocus.current = false;\n },\n anchor,\n fixedTo,\n onScroll(_event, data) {\n if (!data.visible) {\n disableExitFocus.current = true;\n onRequestClose();\n }\n },\n ...options,\n getFixedPositionOptions,\n });\n\n return (\n <Dialog\n {...remaining}\n {...callbacks}\n ref={ref}\n type=\"custom\"\n fixed\n style={style}\n classNames={classNames}\n onRequestClose={onRequestClose}\n overlayHidden={overlayHidden}\n disableScrollLock={disableScrollLock}\n isFocusTypeDisabled={(type) =>\n isFocusTypeDisabled(type) \|\|\n (type === \"unmount\" && disableExitFocus.current)\n }\n >\n {children}\n </Dialog>\n );\n }\n);\n"],"names":["forwardRef","useRef","TOP_INNER_RIGHT_ANCHOR","useFixedPositioning","SCALE_CLASSNAMES","Dialog","noop","DEFAULT_FIXED_DIALOG_CLASSNAMES","appear","appearActive","enter","enterActive","exit","exitActive","FixedDialog","props","nodeRef","fixedTo","style","propStyle","classNames","children","anchor","options","getFixedPositionOptions","onEnter","onEntering","onEntered","onExited","onRequestClose","overlayHidden","disableScrollLock","isFocusTypeDisabled","remaining","disableExitFocus","ref","callbacks","transformOrigin","current","onScroll","_event","data","visible","type","fixed"],"mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,MAAM,QAAwB,QAAQ;AAC3D,SAASC,sBAAsB,QAAQ,8BAA8B;AAKrE,SAASC,mBAAmB,QAAQ,wCAAwC;AAE5E,SAASC,gBAAgB,QAAQ,sCAAsC;AAEvE,SAASC,MAAM,QAA8B,cAAc;AAqB3D,MAAMC,OAAO;AACX,aAAa;AACf;AACA,OAAO,MAAMC,kCACX;IACEC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAAE;AAEJ~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDC~~,GACD,OAAO,MAAMC,4BAAcd,WACzB,SAASc,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,OAAO,EACPC,OAAOC,SAAS,EAChBC,aAAahB,gBAAgB,EAC7BiB,QAAQ,EACRC,SAASpB,sBAAsB,EAC/BqB,OAAO,EACPC,uBAAuB,EACvBC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,WAAWtB,IAAI,EACfuB,cAAc,EACdC,gBAAgB,IAAI,EACpBC,oBAAoB,IAAI,EACxBC,sBAAsB1B,IAAI,EAC1B,GAAG2B,WACJ,GAAGlB;IAEJ,MAAMmB,mBAAmBjC,OAAO;IAChC,MAAM,EAAEkC,GAAG,EAAEjB,KAAK,EAAEkB,SAAS,EAAE,GAAGjC,oBAAoB;QACpDa;QACAE,OAAOC;QACPkB,iBAAiB;QACjBZ;QACAC;QACAC;QACAC;YACEA;YACAM,iBAAiBI,OAAO,GAAG;QAC7B;QACAhB;QACAL;QACAsB,UAASC,MAAM,EAAEC,IAAI;YACnB,IAAI,CAACA,KAAKC,OAAO,EAAE;gBACjBR,iBAAiBI,OAAO,GAAG;gBAC3BT;YACF;QACF;QACA,GAAGN,OAAO;QACVC;IACF;IAEA,qBACE,KAACnB;QACE,GAAG4B,SAAS;QACZ,GAAGG,SAAS;QACbD,KAAKA;QACLQ,MAAK;QACLC,KAAK;QACL1B,OAAOA;QACPE,YAAYA;QACZS,gBAAgBA;QAChBC,eAAeA;QACfC,mBAAmBA;QACnBC,qBAAqB,CAACW,OACpBX,oBAAoBW,SACnBA,SAAS,aAAaT,iBAAiBI,OAAO;kBAGhDjB;;AAGP,GACA"}
1	+ {"version":3,"sources":["../../src/dialog/FixedDialog.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useRef, type RefObject } from \"react\";\nimport { TOP_INNER_RIGHT_ANCHOR } from \"../positioning/constants.js\";\nimport {\n type CalculateFixedPositionOptions,\n type PositionAnchor,\n} from \"../positioning/types.js\";\nimport { useFixedPositioning } from \"../positioning/useFixedPositioning.js\";\nimport { type CSSTransitionClassNamesObject } from \"../transition/types.js\";\nimport { SCALE_CLASSNAMES } from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { Dialog, type BaseDialogProps } from \"./Dialog.js\";\n\nexport interface BaseFixedDialogProps extends Omit<BaseDialogProps, \"type\"> {\n anchor?: PositionAnchor;\n fixedTo: RefObject<HTMLElement>;\n options?: CalculateFixedPositionOptions;\n getFixedPositionOptions?(): CalculateFixedPositionOptions;\n\n /*\n @defaultValue `true`\n /\n overlayHidden?: boolean;\n\n /\n @defaultValue `true`\n /\n disableScrollLock?: boolean;\n}\n\nexport type FixedDialogProps = LabelRequiredForA11y<BaseFixedDialogProps>;\n\nconst noop = (): void => {\n // do nothing\n};\nexport const DEFAULT_FIXED_DIALOG_CLASSNAMES: Readonly<CSSTransitionClassNamesObject> =\n {\n appear: \"rmd-dialog--fixed-enter\",\n appearActive: \"rmd-dialog--fixed-enter-active\",\n enter: \"rmd-dialog--fixed-enter\",\n enterActive: \"rmd-dialog--fixed-enter-active\",\n exit: \"rmd-dialog--fixed-exit\",\n exitActive: \"rmd-dialog--fixed-exit-active\",\n };\n\n/\n Client Component\n \n @example\n * Simple Example\n * ```tsx\n * import {\n * Button,\n * DialogHeader,\n * DialogTitle,\n * DialogContent,\n * DialogFooter,\n * FixedDialog,\n * Typography,\n * useToggle,\n * } from \"@react-md/core\";\n * import { useId, useRef, type ReactElement } from \"react\";\n \n function Example(): ReactElement {\n * const {\n * toggle,\n * disable: onRequestClose,\n * toggled: visible,\n * } = useToggle(false);\n * const titleId = useId();\n * const fixedTo = useRef<HTMLButtonElement>(null)\n \n return (\n * <>\n * <Button ref={fixedTo} onClick={toggle}>Toggle</Button>\n * <FixedDialog\n * aria-labelledby={titleId}\n * fixedTo={fixedTo}\n * visible={visible}\n * onRequestClose={onRequestClose}\n * >\n * <DialogHeader>\n * <DialogTitle id={titleId}>Simple Dialog</DialogTitle>\n * </DialogHeader>\n * <DialogContent>\n * <Typography margin=\"none\">This is some text in a dialog.</Typography>\n * </DialogContent>\n * <DialogFooter>\n * <Button onClick={onRequestClose}>\n * Close\n * </Button>\n * </DialogFooter>\n * </FixedDialog>\n * </>\n * );\n * }\n * ```\n */\nexport const FixedDialog = forwardRef<HTMLDivElement, FixedDialogProps>(\n function FixedDialog(props, nodeRef) {\n const {\n fixedTo,\n style: propStyle,\n classNames = SCALE_CLASSNAMES,\n children,\n anchor = TOP_INNER_RIGHT_ANCHOR,\n options,\n getFixedPositionOptions,\n onEnter,\n onEntering,\n onEntered,\n onExited = noop,\n onRequestClose,\n overlayHidden = true,\n disableScrollLock = true,\n isFocusTypeDisabled = noop,\n ...remaining\n } = props;\n\n const disableExitFocus = useRef(false);\n const { ref, style, callbacks } = useFixedPositioning({\n nodeRef,\n style: propStyle,\n transformOrigin: true,\n onEnter,\n onEntering,\n onEntered,\n onExited() {\n onExited();\n disableExitFocus.current = false;\n },\n anchor,\n fixedTo,\n onScroll(_event, data) {\n if (!data.visible) {\n disableExitFocus.current = true;\n onRequestClose();\n }\n },\n ...options,\n getFixedPositionOptions,\n });\n\n return (\n <Dialog\n {...remaining}\n {...callbacks}\n ref={ref}\n type=\"custom\"\n fixed\n style={style}\n classNames={classNames}\n onRequestClose={onRequestClose}\n overlayHidden={overlayHidden}\n disableScrollLock={disableScrollLock}\n isFocusTypeDisabled={(type) =>\n isFocusTypeDisabled(type) \|\|\n (type === \"unmount\" && disableExitFocus.current)\n }\n >\n {children}\n </Dialog>\n );\n }\n);\n"],"names":["forwardRef","useRef","TOP_INNER_RIGHT_ANCHOR","useFixedPositioning","SCALE_CLASSNAMES","Dialog","noop","DEFAULT_FIXED_DIALOG_CLASSNAMES","appear","appearActive","enter","enterActive","exit","exitActive","FixedDialog","props","nodeRef","fixedTo","style","propStyle","classNames","children","anchor","options","getFixedPositionOptions","onEnter","onEntering","onEntered","onExited","onRequestClose","overlayHidden","disableScrollLock","isFocusTypeDisabled","remaining","disableExitFocus","ref","callbacks","transformOrigin","current","onScroll","_event","data","visible","type","fixed"],"mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,MAAM,QAAwB,QAAQ;AAC3D,SAASC,sBAAsB,QAAQ,8BAA8B;AAKrE,SAASC,mBAAmB,QAAQ,wCAAwC;AAE5E,SAASC,gBAAgB,QAAQ,sCAAsC;AAEvE,SAASC,MAAM,QAA8B,cAAc;AAqB3D,MAAMC,OAAO;AACX,aAAa;AACf;AACA,OAAO,MAAMC,kCACX;IACEC,QAAQ;IACRC,cAAc;IACdC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,YAAY;AACd,EAAE;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDC,GACD,OAAO,MAAMC,4BAAcd,WACzB,SAASc,YAAYC,KAAK,EAAEC,OAAO;IACjC,MAAM,EACJC,OAAO,EACPC,OAAOC,SAAS,EAChBC,aAAahB,gBAAgB,EAC7BiB,QAAQ,EACRC,SAASpB,sBAAsB,EAC/BqB,OAAO,EACPC,uBAAuB,EACvBC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,WAAWtB,IAAI,EACfuB,cAAc,EACdC,gBAAgB,IAAI,EACpBC,oBAAoB,IAAI,EACxBC,sBAAsB1B,IAAI,EAC1B,GAAG2B,WACJ,GAAGlB;IAEJ,MAAMmB,mBAAmBjC,OAAO;IAChC,MAAM,EAAEkC,GAAG,EAAEjB,KAAK,EAAEkB,SAAS,EAAE,GAAGjC,oBAAoB;QACpDa;QACAE,OAAOC;QACPkB,iBAAiB;QACjBZ;QACAC;QACAC;QACAC;YACEA;YACAM,iBAAiBI,OAAO,GAAG;QAC7B;QACAhB;QACAL;QACAsB,UAASC,MAAM,EAAEC,IAAI;YACnB,IAAI,CAACA,KAAKC,OAAO,EAAE;gBACjBR,iBAAiBI,OAAO,GAAG;gBAC3BT;YACF;QACF;QACA,GAAGN,OAAO;QACVC;IACF;IAEA,qBACE,KAACnB;QACE,GAAG4B,SAAS;QACZ,GAAGG,SAAS;QACbD,KAAKA;QACLQ,MAAK;QACLC,KAAK;QACL1B,OAAOA;QACPE,YAAYA;QACZS,gBAAgBA;QAChBC,eAAeA;QACfC,mBAAmBA;QACnBC,qBAAqB,CAACW,OACpBX,oBAAoBW,SACnBA,SAAS,aAAaT,iBAAiBI,OAAO;kBAGhDjB;;AAGP,GACA"}

package/dist/form/NativeSelect.d.ts CHANGED Viewed

@@ -1,7 +1,10 @@
 import { type CSSProperties, type HTMLAttributes, type ReactNode, type SelectHTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
-import { type FormFieldOptions, type UserAgentAutoCompleteProps } from "./types.js";
-export interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement>, UserAgentAutoCompleteProps, FormFieldOptions {
+import { type FormFieldOptions, type UserAgentAutocompleteProps } from "./types.js";
+/**
+ * @remarks \@since 6.0.0 Added support for {@link UserAgentAutocompleteProps}
+ */
+export interface NativeSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "autoComplete">, UserAgentAutocompleteProps, FormFieldOptions {
     /**
      * A custom dropdown icon to use instead of the browser's default select
      * dropdown icon.

package/dist/form/NativeSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/form/NativeSelect.tsx"],"sourcesContent":["import {\n forwardRef,\n type CSSProperties,\n type HTMLAttributes,\n type ReactNode,\n type SelectHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { nativeSelect, nativeSelectContainer } from \"./nativeSelectStyles.js\";\nimport {\n type FormFieldOptions,\n type ~~UserAgentAutoCompleteProps~~,\n} from \"./types.js\";\n\nexport interface NativeSelectProps\n extends SelectHTMLAttributes<HTMLSelectElement>,\n ~~UserAgentAutoCompleteProps~~,\n FormFieldOptions {\n /*\n A custom dropdown icon to use instead of the browser's default select\n * dropdown icon.\n \n Set this to `null` if the browser's default icon should be used instead.\n \n @defaultValue `getIcon(\"dropdown\")`\n /\n icon?: ReactNode;\n\n /\n This applies custom inline styles to the `<select>` element since the\n * `style` prop is applied to the container element instead.\n /\n selectStyle?: CSSProperties;\n\n /\n This applies custom className to the `<select>` element since the\n * `className` prop is applied to the container element instead.\n /\n selectClassName?: string;\n\n /\n This should be a list of `<option>` elements for specific values within the\n * `<select>`.\n \n Check out the {@link NativeSelect} for examples around using \"placeholder\"\n * text and requiring a value to be selected.\n /\n children: ReactNode;\n\n /\n Optional props to provide to the {@link TextFieldContainer} component.\n * There probably isn't any real use for this prop other than if you need to\n * add a `ref` for some DOM behavior.\n /\n containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/\n Server Component\n \n This component is a wrapper for the native `<select>` field that applies the\n * same theming as `TextField` and `TextArea` components. This component might\n * not be used much since the `Select` offers more styling options.\n \n @example\n * Simple Example\n * ```tsx\n * <NativeSelect label=\"Label\">\n * <option value=\"a\">Value 1</option>\n * <option value=\"b\">Value 2</option>\n * <option value=\"c\">Value 3</option>\n * <option value=\"d\">Value 4</option>\n * </NativeSelect>\n * ```\n \n @example\n * Required Value Example\n * ```tsx\n * function Example(): ReactElement {\n * // using `defaultValue=\"\"` makes it so the first option selected by default\n * // and considered an \"invalid\" value since it is `disabled`\n * //\n * // a `name` must be set with `required` so that the form validation will\n * // fire if the value is still the empty string when the form is submitted\n * //\n * // the first `<option>` is kind of like placeholder text since it doesn't\n * // have a value and is disabled by default\n \n return (\n * <NativeSelect\n * label=\"State\"\n * name=\"state\"\n * required\n * defaultValue=\"\"\n * >\n * <option value=\"\" disabled>Choose a state</option>\n * {states.map(({ name, code }) => (\n * <option key={code} value={code}>{name}</option>\n * ))}\n * </NativeSelect>\n * );\n * }\n * ```\n */\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n function NativeSelect(props, ref) {\n const {\n id: propId,\n style,\n className,\n icon: propIcon,\n label,\n labelProps,\n labelStyle,\n labelClassName,\n selectStyle,\n selectClassName,\n autoCompleteValue,\n autoComplete = autoCompleteValue,\n name = autoCompleteValue,\n dense = false,\n error = false,\n active = false,\n inline = false,\n stretch = false,\n leftAddon,\n rightAddon: propRightAddon,\n leftAddonProps,\n rightAddonProps,\n disableLeftAddonStyles = false,\n disableRightAddonStyles = false,\n theme: propTheme,\n underlineDirection: propUnderlineDirection,\n messageProps,\n messageContainerProps,\n containerProps,\n children,\n ...remaining\n } = props;\n const { disabled = false, readOnly = false, multiple = false } = props;\n const id = useEnsuredId(propId, \"select\");\n const theme = getFormConfig(\"theme\", propTheme);\n const underlineDirection = getFormConfig(\n \"underlineDirection\",\n propUnderlineDirection\n );\n const icon = getIcon(\"dropdown\", propIcon);\n const underlined = theme === \"underline\" \|\| theme === \"filled\";\n\n let rightAddon = propRightAddon;\n if (typeof propRightAddon === \"undefined\" && !multiple) {\n rightAddon = icon;\n }\n\n return (\n <FormMessageContainer\n {...messageContainerProps}\n messageProps={messageProps}\n >\n <TextFieldContainer\n {...containerProps}\n style={style}\n className={nativeSelectContainer({\n label: !!label,\n multiple,\n underlined,\n className,\n })}\n theme={theme}\n label={!!label}\n error={error}\n dense={dense}\n inline={inline}\n active={active}\n stretch={stretch}\n readOnly={readOnly}\n disabled={disabled}\n leftAddon={leftAddon}\n leftAddonProps={leftAddonProps}\n rightAddon={rightAddon}\n rightAddonProps={rightAddonProps}\n underlineDirection={underlineDirection}\n disableLeftAddonStyles={disableLeftAddonStyles}\n disableRightAddonStyles={disableRightAddonStyles}\n >\n <select\n {...remaining}\n id={id}\n ref={ref}\n autoComplete={autoComplete}\n name={name}\n disabled={disabled}\n style={selectStyle}\n className={nativeSelect({\n icon: !!icon,\n className: selectClassName,\n })}\n >\n {children}\n </select>\n {label && (\n <Label\n {...labelProps}\n htmlFor={id}\n style={labelProps?.style ?? labelStyle}\n className={labelProps?.className ?? labelClassName}\n floating\n dense={dense}\n error={error}\n active={active}\n disabled={disabled}\n >\n {label}\n </Label>\n )}\n </TextFieldContainer>\n </FormMessageContainer>\n );\n }\n);\n"],"names":["forwardRef","getIcon","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","nativeSelect","nativeSelectContainer","NativeSelect","props","ref","id","propId","style","className","icon","propIcon","label","labelProps","labelStyle","labelClassName","selectStyle","selectClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","stretch","leftAddon","rightAddon","propRightAddon","leftAddonProps","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","multiple","underlined","select","htmlFor","floating"],"mappings":";AAAA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,0BAA0B;~~AAiD9E~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,GACD,OAAO,MAAMC,6BAAeT,WAC1B,SAASS,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,MAAMC,QAAQ,EACdC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,0BAA0B,KAAK,EAC/BC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGrC;IACJ,MAAM,EAAEsC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGxC;IACjE,MAAME,KAAKV,aAAaW,QAAQ;IAChC,MAAM0B,QAAQjC,cAAc,SAASkC;IACrC,MAAMC,qBAAqBnC,cACzB,sBACAoC;IAEF,MAAM1B,OAAOf,QAAQ,YAAYgB;IACjC,MAAMkC,aAAaZ,UAAU,eAAeA,UAAU;IAEtD,IAAIN,aAAaC;IACjB,IAAI,OAAOA,mBAAmB,eAAe,CAACgB,UAAU;QACtDjB,aAAajB;IACf;IAEA,qBACE,KAACb;QACE,GAAGyC,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACtC;YACE,GAAGwC,cAAc;YAClB/B,OAAOA;YACPC,WAAWP,sBAAsB;gBAC/BU,OAAO,CAAC,CAACA;gBACTgC;gBACAC;gBACApC;YACF;YACAwB,OAAOA;YACPrB,OAAO,CAAC,CAACA;YACTU,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRE,SAASA;YACTkB,UAAUA;YACVD,UAAUA;YACVhB,WAAWA;YACXG,gBAAgBA;YAChBF,YAAYA;YACZG,iBAAiBA;YACjBK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACc;oBACE,GAAGL,SAAS;oBACbnC,IAAIA;oBACJD,KAAKA;oBACLc,cAAcA;oBACdC,MAAMA;oBACNsB,UAAUA;oBACVlC,OAAOQ;oBACPP,WAAWR,aAAa;wBACtBS,MAAM,CAAC,CAACA;wBACRD,WAAWQ;oBACb;8BAECuB;;gBAEF5B,uBACC,KAACd;oBACE,GAAGe,UAAU;oBACdkC,SAASzC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCiC,QAAQ;oBACR3B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRmB,UAAUA;8BAET9B;;;;;AAMb,GACA"}
1	+ {"version":3,"sources":["../../src/form/NativeSelect.tsx"],"sourcesContent":["import {\n forwardRef,\n type CSSProperties,\n type HTMLAttributes,\n type ReactNode,\n type SelectHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { FormMessageContainer } from \"./FormMessageContainer.js\";\nimport { Label } from \"./Label.js\";\nimport { TextFieldContainer } from \"./TextFieldContainer.js\";\nimport { getFormConfig } from \"./formConfig.js\";\nimport { nativeSelect, nativeSelectContainer } from \"./nativeSelectStyles.js\";\nimport {\n type FormFieldOptions,\n type UserAgentAutocompleteProps,\n} from \"./types.js\";\n\n/*\n @remarks \\@since 6.0.0 Added support for {@link UserAgentAutocompleteProps}\n /\nexport interface NativeSelectProps\n extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"autoComplete\">,\n UserAgentAutocompleteProps,\n FormFieldOptions {\n /\n A custom dropdown icon to use instead of the browser's default select\n * dropdown icon.\n \n Set this to `null` if the browser's default icon should be used instead.\n \n @defaultValue `getIcon(\"dropdown\")`\n /\n icon?: ReactNode;\n\n /\n This applies custom inline styles to the `<select>` element since the\n * `style` prop is applied to the container element instead.\n /\n selectStyle?: CSSProperties;\n\n /\n This applies custom className to the `<select>` element since the\n * `className` prop is applied to the container element instead.\n /\n selectClassName?: string;\n\n /\n This should be a list of `<option>` elements for specific values within the\n * `<select>`.\n \n Check out the {@link NativeSelect} for examples around using \"placeholder\"\n * text and requiring a value to be selected.\n /\n children: ReactNode;\n\n /\n Optional props to provide to the {@link TextFieldContainer} component.\n * There probably isn't any real use for this prop other than if you need to\n * add a `ref` for some DOM behavior.\n /\n containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n}\n\n/\n Server Component\n \n This component is a wrapper for the native `<select>` field that applies the\n * same theming as `TextField` and `TextArea` components. This component might\n * not be used much since the `Select` offers more styling options.\n \n @example\n * Simple Example\n * ```tsx\n * <NativeSelect label=\"Label\">\n * <option value=\"a\">Value 1</option>\n * <option value=\"b\">Value 2</option>\n * <option value=\"c\">Value 3</option>\n * <option value=\"d\">Value 4</option>\n * </NativeSelect>\n * ```\n \n @example\n * Required Value Example\n * ```tsx\n * function Example(): ReactElement {\n * // using `defaultValue=\"\"` makes it so the first option selected by default\n * // and considered an \"invalid\" value since it is `disabled`\n * //\n * // a `name` must be set with `required` so that the form validation will\n * // fire if the value is still the empty string when the form is submitted\n * //\n * // the first `<option>` is kind of like placeholder text since it doesn't\n * // have a value and is disabled by default\n \n return (\n * <NativeSelect\n * label=\"State\"\n * name=\"state\"\n * required\n * defaultValue=\"\"\n * >\n * <option value=\"\" disabled>Choose a state</option>\n * {states.map(({ name, code }) => (\n * <option key={code} value={code}>{name}</option>\n * ))}\n * </NativeSelect>\n * );\n * }\n * ```\n */\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n function NativeSelect(props, ref) {\n const {\n id: propId,\n style,\n className,\n icon: propIcon,\n label,\n labelProps,\n labelStyle,\n labelClassName,\n selectStyle,\n selectClassName,\n autoCompleteValue,\n autoComplete = autoCompleteValue,\n name = autoCompleteValue,\n dense = false,\n error = false,\n active = false,\n inline = false,\n stretch = false,\n leftAddon,\n rightAddon: propRightAddon,\n leftAddonProps,\n rightAddonProps,\n disableLeftAddonStyles = false,\n disableRightAddonStyles = false,\n theme: propTheme,\n underlineDirection: propUnderlineDirection,\n messageProps,\n messageContainerProps,\n containerProps,\n children,\n ...remaining\n } = props;\n const { disabled = false, readOnly = false, multiple = false } = props;\n const id = useEnsuredId(propId, \"select\");\n const theme = getFormConfig(\"theme\", propTheme);\n const underlineDirection = getFormConfig(\n \"underlineDirection\",\n propUnderlineDirection\n );\n const icon = getIcon(\"dropdown\", propIcon);\n const underlined = theme === \"underline\" \|\| theme === \"filled\";\n\n let rightAddon = propRightAddon;\n if (typeof propRightAddon === \"undefined\" && !multiple) {\n rightAddon = icon;\n }\n\n return (\n <FormMessageContainer\n {...messageContainerProps}\n messageProps={messageProps}\n >\n <TextFieldContainer\n {...containerProps}\n style={style}\n className={nativeSelectContainer({\n label: !!label,\n multiple,\n underlined,\n className,\n })}\n theme={theme}\n label={!!label}\n error={error}\n dense={dense}\n inline={inline}\n active={active}\n stretch={stretch}\n readOnly={readOnly}\n disabled={disabled}\n leftAddon={leftAddon}\n leftAddonProps={leftAddonProps}\n rightAddon={rightAddon}\n rightAddonProps={rightAddonProps}\n underlineDirection={underlineDirection}\n disableLeftAddonStyles={disableLeftAddonStyles}\n disableRightAddonStyles={disableRightAddonStyles}\n >\n <select\n {...remaining}\n id={id}\n ref={ref}\n autoComplete={autoComplete}\n name={name}\n disabled={disabled}\n style={selectStyle}\n className={nativeSelect({\n icon: !!icon,\n className: selectClassName,\n })}\n >\n {children}\n </select>\n {label && (\n <Label\n {...labelProps}\n htmlFor={id}\n style={labelProps?.style ?? labelStyle}\n className={labelProps?.className ?? labelClassName}\n floating\n dense={dense}\n error={error}\n active={active}\n disabled={disabled}\n >\n {label}\n </Label>\n )}\n </TextFieldContainer>\n </FormMessageContainer>\n );\n }\n);\n"],"names":["forwardRef","getIcon","useEnsuredId","FormMessageContainer","Label","TextFieldContainer","getFormConfig","nativeSelect","nativeSelectContainer","NativeSelect","props","ref","id","propId","style","className","icon","propIcon","label","labelProps","labelStyle","labelClassName","selectStyle","selectClassName","autoCompleteValue","autoComplete","name","dense","error","active","inline","stretch","leftAddon","rightAddon","propRightAddon","leftAddonProps","rightAddonProps","disableLeftAddonStyles","disableRightAddonStyles","theme","propTheme","underlineDirection","propUnderlineDirection","messageProps","messageContainerProps","containerProps","children","remaining","disabled","readOnly","multiple","underlined","select","htmlFor","floating"],"mappings":";AAAA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAASC,KAAK,QAAQ,aAAa;AACnC,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,aAAa,QAAQ,kBAAkB;AAChD,SAASC,YAAY,EAAEC,qBAAqB,QAAQ,0BAA0B;AAoD9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CC,GACD,OAAO,MAAMC,6BAAeT,WAC1B,SAASS,aAAaC,KAAK,EAAEC,GAAG;IAC9B,MAAM,EACJC,IAAIC,MAAM,EACVC,KAAK,EACLC,SAAS,EACTC,MAAMC,QAAQ,EACdC,KAAK,EACLC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,WAAW,EACXC,eAAe,EACfC,iBAAiB,EACjBC,eAAeD,iBAAiB,EAChCE,OAAOF,iBAAiB,EACxBG,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACbC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,UAAU,KAAK,EACfC,SAAS,EACTC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,eAAe,EACfC,yBAAyB,KAAK,EAC9BC,0BAA0B,KAAK,EAC/BC,OAAOC,SAAS,EAChBC,oBAAoBC,sBAAsB,EAC1CC,YAAY,EACZC,qBAAqB,EACrBC,cAAc,EACdC,QAAQ,EACR,GAAGC,WACJ,GAAGrC;IACJ,MAAM,EAAEsC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAEC,WAAW,KAAK,EAAE,GAAGxC;IACjE,MAAME,KAAKV,aAAaW,QAAQ;IAChC,MAAM0B,QAAQjC,cAAc,SAASkC;IACrC,MAAMC,qBAAqBnC,cACzB,sBACAoC;IAEF,MAAM1B,OAAOf,QAAQ,YAAYgB;IACjC,MAAMkC,aAAaZ,UAAU,eAAeA,UAAU;IAEtD,IAAIN,aAAaC;IACjB,IAAI,OAAOA,mBAAmB,eAAe,CAACgB,UAAU;QACtDjB,aAAajB;IACf;IAEA,qBACE,KAACb;QACE,GAAGyC,qBAAqB;QACzBD,cAAcA;kBAEd,cAAA,MAACtC;YACE,GAAGwC,cAAc;YAClB/B,OAAOA;YACPC,WAAWP,sBAAsB;gBAC/BU,OAAO,CAAC,CAACA;gBACTgC;gBACAC;gBACApC;YACF;YACAwB,OAAOA;YACPrB,OAAO,CAAC,CAACA;YACTU,OAAOA;YACPD,OAAOA;YACPG,QAAQA;YACRD,QAAQA;YACRE,SAASA;YACTkB,UAAUA;YACVD,UAAUA;YACVhB,WAAWA;YACXG,gBAAgBA;YAChBF,YAAYA;YACZG,iBAAiBA;YACjBK,oBAAoBA;YACpBJ,wBAAwBA;YACxBC,yBAAyBA;;8BAEzB,KAACc;oBACE,GAAGL,SAAS;oBACbnC,IAAIA;oBACJD,KAAKA;oBACLc,cAAcA;oBACdC,MAAMA;oBACNsB,UAAUA;oBACVlC,OAAOQ;oBACPP,WAAWR,aAAa;wBACtBS,MAAM,CAAC,CAACA;wBACRD,WAAWQ;oBACb;8BAECuB;;gBAEF5B,uBACC,KAACd;oBACE,GAAGe,UAAU;oBACdkC,SAASzC;oBACTE,OAAOK,YAAYL,SAASM;oBAC5BL,WAAWI,YAAYJ,aAAaM;oBACpCiC,QAAQ;oBACR3B,OAAOA;oBACPC,OAAOA;oBACPC,QAAQA;oBACRmB,UAAUA;8BAET9B;;;;;AAMb,GACA"}

package/dist/form/Option.js CHANGED Viewed

@@ -36,9 +36,10 @@ const noop = ()=>{
  * \@since 6.0.0 Added the `value`, `selectedIcon`, `unselectedIcon`,
  * `selectedIconAfter`, and `iconSpacingProps` props.
  */ export const Option = /*#__PURE__*/ forwardRef(function Option(props, ref) {
-    const { id: propId, role = "option", value, children: propChildren, onClick = noop, className, selectedIcon: propSelectedIcon, unselectedIcon: propUnselectedIcon, selectedIconAfter = false, textIconSpacingProps, leftAddon: propLeftAddon, leftAddonType, leftAddonClassName, rightAddon: propRightAddon, rightAddonType, rightAddonClassName, secondaryText, height: propHeight, disableTextChildren: propDisableTextChildren, ...remaining } = props;
+    const { id: propId, role = "option", value, children: propChildren, onClick = noop, className, selectedIcon: propSelectedIcon, unselectedIcon: propUnselectedIcon, selectedIconAfter: propSelectedIconAfter, textIconSpacingProps, leftAddon: propLeftAddon, leftAddonType, leftAddonClassName, rightAddon: propRightAddon, rightAddonType, rightAddonClassName, secondaryText, height: propHeight, disableTextChildren: propDisableTextChildren, ...remaining } = props;
     const id = useEnsuredId(propId, "option");
-    const { inputRef, currentValue, disableSelectedIcon } = useListboxContext();
+    const { inputRef, currentValue, disableSelectedIcon, selectedIconAfter: contextSelectedIconAfter } = useListboxContext();
+    const selectedIconAfter = propSelectedIconAfter ?? contextSelectedIconAfter;
     const selected = value === currentValue;
     const selectedIcon = getIcon("selected", disableSelectedIcon ? null : propSelectedIcon);
     const unselectedIcon = disableSelectedIcon ? null : propUnselectedIcon ?? DEFAULT_OPTION_UNSELECTED_ICON;

package/dist/form/Option.js.map CHANGED Viewed

	@@ -1 +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":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,EAAEC,QAAQ,QAAwB,QAAQ;AAC7D,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,IAAI,QAAQ,oBAAoB;AACzC,SACEC,eAAe,QAEV,6BAA6B;AACpC,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,QAAQ,QAA4B,sBAAsB;AACnE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,wBAAwB,QAAQ,aAAa;AAEtD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;CAKC,GACD,OAAO,MAAMC,+CACX,KAACC;IAAKC,WAAWZ,KAAK;QAAEa,MAAM;IAAM;GACpC;AA2DF;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,uBAASjB,WACpB,SAASiB,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAUC,YAAY,EACtBC,UAAUd,IAAI,EACdG,SAAS,EACTY,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClCC,~~oBAAoB~~,~~KAAK~~,~~EACzBC~~,oBAAoB,EACpBC,WAAWC,aAAa,EACxBC,aAAa,EACbC,kBAAkB,EAClBC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,mBAAmB,EACnBC,aAAa,EACbC,QAAQC,UAAU,EAClBC,qBAAqBC,uBAAuB,EAC5C,GAAGC,WACJ,~~GAAG5B~~;IAEJ,MAAME,KAAKZ,aAAaa,QAAQ;IAChC,MAAM,~~EAAE0B~~,QAAQ,~~EAAEC~~,YAAY,~~EAAEC~~,mBAAmB,~~EAAE~~,~~GAAGvC~~;~~IACxD~~,~~MAAMwC~~,~~WAAW3B~~,~~UAAUyB~~;IAC3B,~~MAAMrB~~,eAAezB,QACnB,~~YACA+C~~,sBAAsB,~~OAAOrB~~;IAE/B,MAAMC,~~iBAAiBoB~~,sBACnB,~~OACAnB~~,sBAAsBjB;IAC1B,MAAMV,~~OAAO+C~~,~~WAAWvB~~,eAAeE;IAEvC,~~IAAII~~,YAAYC;IAChB,IAAIG,aAAaC;IACjB,~~IAAId~~,WAAWC;IACf,~~IAAImB~~,sBAAsBC;IAC1B,IAAI,~~CAACd~~,qBAAqB5B,MAAM;~~QAC9B8B~~,~~YAAY9B~~;QACZ,~~IAAI+B~~,eAAe;YACjBU,sBAAsB;YACtB,~~MAAMO~~,~~UAAUN~~,~~0BAA0B5C~~,WAAWK;YAErDkB,yBACE,KAACpB;gBAAiB,~~GAAG4B~~,oBAAoB;~~gBAAE7B~~,~~MAAM+B~~;0BAC/C,cAAA,~~KAACiB~~;~~8BAAS3B~~;;;QAGhB;IACF,OAAO,IAAIrB,MAAM;~~QACfkC~~,~~aAAalC~~;QACb,~~IAAImC~~,gBAAgB;YAClBM,sBAAsB;YACtB,~~MAAMO~~,~~UAAUN~~,~~0BAA0B5C~~,WAAWK;YAErDkB,yBACE,KAACpB;gBAAiB,~~GAAG4B~~,oBAAoB;~~gBAAE7B~~,~~MAAMmC~~;0BAC/C,cAAA,~~KAACa~~;~~8BAAS3B~~;;;QAGhB;IACF;IAEA,~~MAAMkB~~,~~SAASrC~~,kBAAkB;QAC/~~BqC~~,QAAQC;QACRV,WAAWA,~~cAAc9B~~,OAAO,~~OAAO8B~~;QACvCE;QACAE,YAAYA,~~eAAelC~~,OAAO,~~OAAOkC~~;QACzCE;QACAE;IACF;IAEA,qBACE,~~KAAClC~~;QACE,~~GAAGuC~~,SAAS;~~QACbM~~,iBAAeF,YAAYG;~~QAC3BjC~~,IAAIA;QACJD,KAAKA;QACLG,MAAMA;QACNI,SAAS,~~CAAC4B~~;~~YACR5B~~,~~QAAQ4B~~;~~YACR3C~~,~~yBAAyBoC~~,~~SAASQ~~,OAAO,~~EAAEhC~~;QAC7C;QACAR,WAAWN,OAAO;YAAEN,MAAM,CAAC,CAACA;~~YAAM+C~~;~~YAAUnC~~;QAAU;~~QACtD0B~~,eAAeA;QACfC,QAAQA;QACRT,WAAWA;QACXE,eAAeA;QACfC,~~oBAAoBrC~~,~~IAClBkC~~,~~cAAc9B~~,QAAQ,~~oBACtBiC~~;QAEFC,YAAYA;QACZE,gBAAgBA;QAChBC,~~qBAAqBzC~~,~~IACnBsC~~,~~eAAelC~~,QAAQ,~~oBACvBqC~~;QAEFI,qBAAqBA;~~kBAEpBpB~~;;AAGP,GACA"}
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: 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":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,EAAEC,QAAQ,QAAwB,QAAQ;AAC7D,SAASC,OAAO,QAAQ,wBAAwB;AAChD,SAASC,IAAI,QAAQ,oBAAoB;AACzC,SACEC,eAAe,QAEV,6BAA6B;AACpC,SAASC,iBAAiB,QAAQ,+BAA+B;AACjE,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,QAAQ,QAA4B,sBAAsB;AACnE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,wBAAwB,QAAQ,aAAa;AAEtD,MAAMC,OAAO;AACX,aAAa;AACf;AAEA;;;;;CAKC,GACD,OAAO,MAAMC,+CACX,KAACC;IAAKC,WAAWZ,KAAK;QAAEa,MAAM;IAAM;GACpC;AA2DF;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,uBAASjB,WACpB,SAASiB,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAUC,YAAY,EACtBC,UAAUd,IAAI,EACdG,SAAS,EACTY,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClCC,mBAAmBC,qBAAqB,EACxCC,oBAAoB,EACpBC,WAAWC,aAAa,EACxBC,aAAa,EACbC,kBAAkB,EAClBC,YAAYC,cAAc,EAC1BC,cAAc,EACdC,mBAAmB,EACnBC,aAAa,EACbC,QAAQC,UAAU,EAClBC,qBAAqBC,uBAAuB,EAC5C,GAAGC,WACJ,GAAG7B;IAEJ,MAAME,KAAKZ,aAAaa,QAAQ;IAChC,MAAM,EACJ2B,QAAQ,EACRC,YAAY,EACZC,mBAAmB,EACnBnB,mBAAmBoB,wBAAwB,EAC5C,GAAGzC;IACJ,MAAMqB,oBAAoBC,yBAAyBmB;IACnD,MAAMC,WAAW7B,UAAU0B;IAC3B,MAAMtB,eAAezB,QACnB,YACAgD,sBAAsB,OAAOtB;IAE/B,MAAMC,iBAAiBqB,sBACnB,OACApB,sBAAsBjB;IAC1B,MAAMV,OAAOiD,WAAWzB,eAAeE;IAEvC,IAAIK,YAAYC;IAChB,IAAIG,aAAaC;IACjB,IAAIf,WAAWC;IACf,IAAIoB,sBAAsBC;IAC1B,IAAI,CAACf,qBAAqB5B,MAAM;QAC9B+B,YAAY/B;QACZ,IAAIgC,eAAe;YACjBU,sBAAsB;YACtB,MAAMQ,UAAUP,0BAA0B7C,WAAWK;YAErDkB,yBACE,KAACpB;gBAAiB,GAAG6B,oBAAoB;gBAAE9B,MAAMgC;0BAC/C,cAAA,KAACkB;8BAAS7B;;;QAGhB;IACF,OAAO,IAAIrB,MAAM;QACfmC,aAAanC;QACb,IAAIoC,gBAAgB;YAClBM,sBAAsB;YACtB,MAAMQ,UAAUP,0BAA0B7C,WAAWK;YAErDkB,yBACE,KAACpB;gBAAiB,GAAG6B,oBAAoB;gBAAE9B,MAAMoC;0BAC/C,cAAA,KAACc;8BAAS7B;;;QAGhB;IACF;IAEA,MAAMmB,SAAStC,kBAAkB;QAC/BsC,QAAQC;QACRV,WAAWA,cAAc/B,OAAO,OAAO+B;QACvCE;QACAE,YAAYA,eAAenC,OAAO,OAAOmC;QACzCE;QACAE;IACF;IAEA,qBACE,KAACnC;QACE,GAAGwC,SAAS;QACbO,iBAAeF,YAAYG;QAC3BnC,IAAIA;QACJD,KAAKA;QACLG,MAAMA;QACNI,SAAS,CAAC8B;YACR9B,QAAQ8B;YACR7C,yBAAyBqC,SAASS,OAAO,EAAElC;QAC7C;QACAR,WAAWN,OAAO;YAAEN,MAAM,CAAC,CAACA;YAAMiD;YAAUrC;QAAU;QACtD2B,eAAeA;QACfC,QAAQA;QACRT,WAAWA;QACXE,eAAeA;QACfC,oBAAoBtC,IAClBmC,cAAc/B,QAAQ,oBACtBkC;QAEFC,YAAYA;QACZE,gBAAgBA;QAChBC,qBAAqB1C,IACnBuC,eAAenC,QAAQ,oBACvBsC;QAEFI,qBAAqBA;kBAEpBrB;;AAGP,GACA"}

package/dist/form/Select.d.ts CHANGED Viewed

@@ -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;