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

package/coverage/lcov-report/form/OptGroup.tsx.html

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">86.04% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>0/85</span>
+                <span class='fraction'>74/86</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/1</span>
+                <span class='fraction'>0/0</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">0% </span>
+                <span class="strong">86.04% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>0/85</span>
+                <span class='fraction'>74/86</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line low'></div>
+    <div class='status-line high'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -148,163 +148,166 @@
 <a name='L83'></a><a href='#L83'>83</a>
 <a name='L84'></a><a href='#L84'>84</a>
 <a name='L85'></a><a href='#L85'>85</a>
-<a name='L86'></a><a href='#L86'>86</a></td><td class="line-coverage quiet"><span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js"><span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" ><span class="branch-0 cbranch-no" title="branch not covered" >"use client";</span></span></span>
-<span class="cstat-no" title="statement not covered" >import type { ReactNode } from "react";</span>
-<span class="cstat-no" title="statement not covered" >import { forwardRef } from "react";</span>
-<span class="cstat-no" title="statement not covered" >import type { ListElement, ListProps } from "../list/List.js";</span>
-<span class="cstat-no" title="statement not covered" >import type { ListSubheaderProps } from "../list/ListSubheader.js";</span>
-<span class="cstat-no" title="statement not covered" >import { ListSubheader } from "../list/ListSubheader.js";</span>
-<span class="cstat-no" title="statement not covered" >import { MenuItemGroup } from "../menu/MenuItemGroup.js";</span>
-<span class="cstat-no" title="statement not covered" >import { PropsWithRef } from "../types.js";</span>
-<span class="cstat-no" title="statement not covered" >import { useEnsuredId } from "../useEnsuredId.js";</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >/** @remarks \@since 6.0.0 */</span>
-<span class="cstat-no" title="statement not covered" >export interface OptGroupProps extends Omit&lt;ListProps, "role"&gt; {</span>
-<span class="cstat-no" title="statement not covered" >  /**</span>
-<span class="cstat-no" title="statement not covered" >   * This is really the `children` to display in a `ListSubheader` that</span>
-<span class="cstat-no" title="statement not covered" >   * describes the optgroup. It was named `label` to match the native</span>
-<span class="cstat-no" title="statement not covered" >   * `&lt;optgroup&gt;` element.</span>
-<span class="cstat-no" title="statement not covered" >   *</span>
-<span class="cstat-no" title="statement not covered" >   * @see {@link labelProps} for additional styling and options.</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  label: ReactNode;</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >  /**</span>
-<span class="cstat-no" title="statement not covered" >   * This can be used to apply any additional props to the `ListSubheader` that</span>
-<span class="cstat-no" title="statement not covered" >   * describes the group of options.</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  labelProps?: PropsWithRef&lt;</span>
-<span class="cstat-no" title="statement not covered" >    Omit&lt;ListSubheaderProps, "role" | "children"&gt;,</span>
-<span class="cstat-no" title="statement not covered" >    HTMLLIElement</span>
-<span class="cstat-no" title="statement not covered" >  &gt;;</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >  /**</span>
-<span class="cstat-no" title="statement not covered" >   * This should be any `Option`s to display within the group.</span>
-<span class="cstat-no" title="statement not covered" >   */</span>
-<span class="cstat-no" title="statement not covered" >  children: ReactNode;</span>
-<span class="cstat-no" title="statement not covered" >}</span>
-<span class="cstat-no" title="statement not covered" ></span>
-<span class="cstat-no" title="statement not covered" >/**</span>
-<span class="cstat-no" title="statement not covered" > * **Client Component**</span>
-<span class="cstat-no" title="statement not covered" > *</span>
-<span class="cstat-no" title="statement not covered" > * This component is more of a "convenience component" to help enforce the</span>
-<span class="cstat-no" title="statement not covered" > * correct accessibility when creating an `&lt;optgroup&gt;` with the `Select`</span>
-<span class="cstat-no" title="statement not covered" > * component.</span>
-<span class="cstat-no" title="statement not covered" > *</span>
-<span class="cstat-no" title="statement not covered" > * @example</span>
-<span class="cstat-no" title="statement not covered" > * Simple Example</span>
-<span class="cstat-no" title="statement not covered" > * ```tsx</span>
-<span class="cstat-no" title="statement not covered" > * import { Select, OptGroup, Option } from "@react-md/core";</span>
-<span class="cstat-no" title="statement not covered" > * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";</span>
-<span class="cstat-no" title="statement not covered" > * import type { ReactElement } from "react";</span>
-<span class="cstat-no" title="statement not covered" > *</span>
-<span class="cstat-no" title="statement not covered" > * function Example(): ReactElement {</span>
-<span class="cstat-no" title="statement not covered" > *   return (</span>
-<span class="cstat-no" title="statement not covered" > *     &lt;Select label="Choose an animal"&gt;</span>
-<span class="cstat-no" title="statement not covered" > *       &lt;OptGroup label="Land" labelProps={{ className: "custom-class-name" }}&gt;</span>
-<span class="cstat-no" title="statement not covered" > *         &lt;Option value={0}&gt;Cat&lt;/Option&gt;</span>
-<span class="cstat-no" title="statement not covered" > *         &lt;Option value={1}&gt;Dog&lt;/Option&gt;</span>
-<span class="cstat-no" title="statement not covered" > *         &lt;Option value={2}&gt;Tiger&lt;/Option&gt;</span>
-<span class="cstat-no" title="statement not covered" > *       &lt;/OptGroup&gt;</span>
-<span class="cstat-no" title="statement not covered" > *       &lt;OptGroup label="Water" labelProps={{ rightAddon: &lt;FavoriteIcon /&gt; }}&gt;</span>
-<span class="cstat-no" title="statement not covered" > *         &lt;Option value={3}&gt;Dolphin&lt;/Option&gt;</span>
-<span class="cstat-no" title="statement not covered" > *         &lt;Option value={4}&gt;Flounder&lt;/Option&gt;</span>
-<span class="cstat-no" title="statement not covered" > *       &lt;/OptGroup&gt;</span>
-<span class="cstat-no" title="statement not covered" > *     &lt;/Select&gt;</span>
-<span class="cstat-no" title="statement not covered" > *</span>
-<span class="cstat-no" title="statement not covered" > *   );</span>
-<span class="cstat-no" title="statement not covered" > * }</span>
-<span class="cstat-no" title="statement not covered" > * ```</span>
-<span class="cstat-no" title="statement not covered" > *</span>
-<span class="cstat-no" title="statement not covered" > * @remarks \@since 6.0.0</span>
-<span class="cstat-no" title="statement not covered" > */</span>
-<span class="cstat-no" title="statement not covered" >export const OptGroup = forwardRef&lt;ListElement, OptGroupProps&gt;(</span>
-<span class="cstat-no" title="statement not covered" >  function OptGroup(props, ref) {</span>
+<a name='L86'></a><a href='#L86'>86</a>
+<a name='L87'></a><a href='#L87'>87</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">"use client";
+import { forwardRef, type ReactNode } from "react";
+import { type ListElement, type ListProps } from "../list/List.js";
+import {
+  ListSubheader,
+  type ListSubheaderProps,
+} from "../list/ListSubheader.js";
+import { MenuItemGroup } from "../menu/MenuItemGroup.js";
+import { type PropsWithRef } from "../types.js";
+import { useEnsuredId } from "../useEnsuredId.js";
+&nbsp;
+/** @remarks \@since 6.0.0 */
+export interface OptGroupProps extends Omit&lt;ListProps, "role"&gt; {
+  /**
+   * This is really the `children` to display in a `ListSubheader` that
+   * describes the optgroup. It was named `label` to match the native
+   * `&lt;optgroup&gt;` element.
+   *
+   * @see {@link labelProps} for additional styling and options.
+   */
+  label: ReactNode;
+&nbsp;
+  /**
+   * This can be used to apply any additional props to the `ListSubheader` that
+   * describes the group of options.
+   */
+  labelProps?: PropsWithRef&lt;
+    Omit&lt;ListSubheaderProps, "role" | "children"&gt;,
+    HTMLLIElement
+  &gt;;
+&nbsp;
+  /**
+   * This should be any `Option`s to display within the group.
+   */
+  children: ReactNode;
+}
+&nbsp;
+/**
+ * **Client Component**
+ *
+ * This component is more of a "convenience component" to help enforce the
+ * correct accessibility when creating an `&lt;optgroup&gt;` with the `Select`
+ * component.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import { Select, OptGroup, Option } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ * import type { ReactElement } from "react";
+ *
+ * function Example(): ReactElement {
+ *   return (
+ *     &lt;Select label="Choose an animal"&gt;
+ *       &lt;OptGroup label="Land" labelProps={{ className: "custom-class-name" }}&gt;
+ *         &lt;Option value={0}&gt;Cat&lt;/Option&gt;
+ *         &lt;Option value={1}&gt;Dog&lt;/Option&gt;
+ *         &lt;Option value={2}&gt;Tiger&lt;/Option&gt;
+ *       &lt;/OptGroup&gt;
+ *       &lt;OptGroup label="Water" labelProps={{ rightAddon: &lt;FavoriteIcon /&gt; }}&gt;
+ *         &lt;Option value={3}&gt;Dolphin&lt;/Option&gt;
+ *         &lt;Option value={4}&gt;Flounder&lt;/Option&gt;
+ *       &lt;/OptGroup&gt;
+ *     &lt;/Select&gt;
+ *
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export const OptGroup = forwardRef&lt;ListElement, OptGroupProps&gt;(
+<span class="fstat-no" title="function not covered" >  function OptGroup(props, ref) {</span>
 <span class="cstat-no" title="statement not covered" >    const { children, label, labelProps, ...remaining } = props;</span>
 <span class="cstat-no" title="statement not covered" >    const labelId = useEnsuredId(labelProps?.id, "optgroup");</span>
 <span class="cstat-no" title="statement not covered" ></span>
@@ -317,7 +320,7 @@
 <span class="cstat-no" title="statement not covered" >      &lt;/MenuItemGroup&gt;</span>
 <span class="cstat-no" title="statement not covered" >    );</span>
 <span class="cstat-no" title="statement not covered" >  }</span>
-<span class="cstat-no" title="statement not covered" >);</span>
+);
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -325,7 +328,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2023-09-22T01:31:20.020Z
+                at 2024-02-25T13:36:49.916Z
             </div>
         <script src="../prettify.js"></script>
         <script>