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

package/coverage/lcov-report/progress/LinearProgress.tsx.html

@@ -25,7 +25,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>189/189</span>
+                <span class='fraction'>191/191</span>
             </div>
         
             
@@ -46,7 +46,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>189/189</span>
+                <span class='fraction'>191/191</span>
             </div>
         
             
@@ -252,7 +252,13 @@
 <a name='L187'></a><a href='#L187'>187</a>
 <a name='L188'></a><a href='#L188'>188</a>
 <a name='L189'></a><a href='#L189'>189</a>
-<a name='L190'></a><a href='#L190'>190</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L190'></a><a href='#L190'>190</a>
+<a name='L191'></a><a href='#L191'>191</a>
+<a name='L192'></a><a href='#L192'>192</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>
@@ -439,8 +445,6 @@
 <span class="cline-any cline-yes">23x</span>
 <span class="cline-any cline-yes">23x</span>
 <span class="cline-any cline-yes">23x</span>
-<span class="cline-any cline-yes">23x</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">import { cnb } from "cnbuilder";
 import {
   forwardRef,
@@ -449,6 +453,7 @@ import {
   type HTMLAttributes,
 } from "react";
 import { cssUtils } from "../cssUtils.js";
+import { type LabelRequiredForA11y } from "../types.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import { bem } from "../utils/bem.js";
 import { getPercentage } from "../utils/getPercentage.js";
@@ -458,7 +463,7 @@ import { type ProgressProps } from "./types.js";
  * @remarks \@since 6.0.0 Added the `theme` prop
  */
 export interface LinearProgressProps
-  extends Omit&lt;HTMLAttributes&lt;HTMLDivElement&gt;, "id"&gt;,
+  extends Omit&lt;HTMLAttributes&lt;HTMLSpanElement&gt;, "id" | "children"&gt;,
     ProgressProps {
   /**
    * An optional style to apply to the progress bar. This will be merged with
@@ -508,18 +513,18 @@ const styles = bem("rmd-linear-progress");
  * **Server Component**
  *
  * @example
- * Simple Indeterminate Example
+ * Indeterminate Example
  * ```tsx
  * import { LinearProgress } from "@react-md/core";
  * import { type ReactElement } from "react";
  *
  * function Example(): ReactElement {
- *   return &lt;LinearProgress /&gt;;
+ *   return &lt;LinearProgress aria-label="Loading" /&gt;;
  * }
  * ```
  *
  * @example
- * Simple Determinate Example
+ * Determinate Example
  * ```tsx
  * import { LinearProgress } from "@react-md/core";
  * import { useState, type ReactElement } from "react";
@@ -528,108 +533,109 @@ const styles = bem("rmd-linear-progress");
  *   // a number from 0 - 100
  *   const [progress, setProgress] = useState(0);
  *
- *   return &lt;LinearProgress value={progress} /&gt;;
+ *   return &lt;LinearProgress aria-label="File upload" value={progress} /&gt;;
  * }
  * ```
  *
- * @remarks \@since 6.0.0 Supports rendering as any of the theme colors.
+ * @remarks \@since 6.0.0 Supports rendering as any of the theme colors and
+ * requires a label for accessibility.
  */
-export const LinearProgress = forwardRef&lt;HTMLSpanElement, LinearProgressProps&gt;(
-  function LinearProgress(props, ref) {
-    const {
-      id: propId,
-      style: propStyle,
-      className,
-      barStyle: propBarStyle,
-      barClassName,
-      min = 0,
-      max = 100,
-      value,
-      reverse = false,
-      theme = "primary",
-      disableTransition = false,
-      vertical = false,
-      verticalHeight = 240,
-      ...remaining
-    } = props;
+export const LinearProgress = forwardRef&lt;
+  HTMLSpanElement,
+  LabelRequiredForA11y&lt;LinearProgressProps&gt;
+&gt;(function LinearProgress(props, ref) {
+  const {
+    id: propId,
+    style: propStyle,
+    className,
+    barStyle: propBarStyle,
+    barClassName,
+    min = 0,
+    max = 100,
+    value,
+    reverse = false,
+    theme = "primary",
+    disableTransition = false,
+    vertical = false,
+    verticalHeight = 240,
+    ...remaining
+  } = props;
 &nbsp;
-    const id = useEnsuredId(propId, "linear-progress");
-    const style = useMemo(() =&gt; {
-      if (!vertical || verticalHeight === null) {
-        return propStyle;
-      }
+  const id = useEnsuredId(propId, "linear-progress");
+  const style = useMemo(() =&gt; {
+    if (!vertical || verticalHeight === null) {
+      return propStyle;
+    }
 &nbsp;
-      return {
-        ...propStyle,
-        height: verticalHeight,
-      };
-    }, [propStyle, vertical, verticalHeight]);
+    return {
+      ...propStyle,
+      height: verticalHeight,
+    };
+  }, [propStyle, vertical, verticalHeight]);
 &nbsp;
-    let progress: number | undefined;
-    if (typeof value === "number") {
-      progress = getPercentage({ min, max, value, validate: true });
+  let progress: number | undefined;
+  if (typeof value === "number") {
+    progress = getPercentage({ min, max, value, validate: true });
+  }
+  const barStyle = useMemo(() =&gt; {
+    if (typeof progress !== "number") {
+      return propBarStyle;
     }
-    const barStyle = useMemo(() =&gt; {
-      if (typeof progress !== "number") {
-        return propBarStyle;
-      }
 &nbsp;
-      const key = vertical ? "height" : "width";
-      return {
-        ...propBarStyle,
-        [key]: `${progress * 100}%`,
-      };
-    }, [progress, propBarStyle, vertical]);
+    const key = vertical ? "height" : "width";
+    return {
+      ...propBarStyle,
+      [key]: `${progress * 100}%`,
+    };
+  }, [progress, propBarStyle, vertical]);
 &nbsp;
-    const determinate = typeof progress === "number";
-    const indeterminate = !determinate;
-    return (
+  const determinate = typeof progress === "number";
+  const indeterminate = !determinate;
+  return (
+    &lt;span
+      {...remaining}
+      id={id}
+      ref={ref}
+      style={style}
+      role="progressbar"
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      className={cnb(
+        styles({
+          vertical,
+          horizontal: !vertical,
+          determinate,
+          indeterminate,
+        }),
+        theme !== "current-color" &amp;&amp; cssUtils({ textColor: theme }),
+        className
+      )}
+    &gt;
       &lt;span
-        {...remaining}
-        id={id}
-        ref={ref}
-        style={style}
-        role="progressbar"
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-valuenow={value}
+        style={barStyle}
         className={cnb(
-          styles({
+          styles("bar", {
             vertical,
+            "vertical-reverse": vertical &amp;&amp; reverse,
             horizontal: !vertical,
+            "horizontal-reverse": !vertical &amp;&amp; reverse,
+            animate: !disableTransition &amp;&amp; determinate,
             determinate,
             indeterminate,
+            "determinate-reverse": determinate &amp;&amp; reverse &amp;&amp; !vertical,
+            "determinate-vertical-reverse": determinate &amp;&amp; reverse &amp;&amp; vertical,
+            "indeterminate-reverse": indeterminate &amp;&amp; reverse &amp;&amp; !vertical,
+            "indeterminate-vertical": indeterminate &amp;&amp; vertical,
+            "indeterminate-vertical-reverse":
+              indeterminate &amp;&amp; reverse &amp;&amp; vertical,
           }),
-          theme !== "current-color" &amp;&amp; cssUtils({ textColor: theme }),
-          className
+          barClassName
         )}
-      &gt;
-        &lt;span
-          style={barStyle}
-          className={cnb(
-            styles("bar", {
-              vertical,
-              "vertical-reverse": vertical &amp;&amp; reverse,
-              horizontal: !vertical,
-              "horizontal-reverse": !vertical &amp;&amp; reverse,
-              animate: !disableTransition &amp;&amp; determinate,
-              determinate,
-              indeterminate,
-              "determinate-reverse": determinate &amp;&amp; reverse &amp;&amp; !vertical,
-              "determinate-vertical-reverse":
-                determinate &amp;&amp; reverse &amp;&amp; vertical,
-              "indeterminate-reverse": indeterminate &amp;&amp; reverse &amp;&amp; !vertical,
-              "indeterminate-vertical": indeterminate &amp;&amp; vertical,
-              "indeterminate-vertical-reverse":
-                indeterminate &amp;&amp; reverse &amp;&amp; vertical,
-            }),
-            barClassName
-          )}
-        /&gt;
-      &lt;/span&gt;
-    );
-  }
-);
+      /&gt;
+    &lt;/span&gt;
+  );
+});
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -637,7 +643,7 @@ export const LinearProgress = forwardRef&lt;HTMLSpanElement, LinearProgressProps
             <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-30T01:42:04.192Z
+                at 2023-11-13T20:57:58.450Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/progress/index.html

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>189/189</span>
+                <span class='fraction'>429/429</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>25/25</span>
+                <span class='fraction'>36/36</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>2/2</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>189/189</span>
+                <span class='fraction'>429/429</span>
             </div>
         
             
@@ -79,18 +79,33 @@
 </tr>
 </thead>
 <tbody><tr>
+	<td class="file high" data-value="CircularProgress.tsx"><a href="CircularProgress.tsx.html">CircularProgress.tsx</a></td>
+	<td data-value="100" class="pic high">
+	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
+	</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="238" class="abs high">238/238</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="11" class="abs high">11/11</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="1" class="abs high">1/1</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="238" class="abs high">238/238</td>
+	</tr>
+
+<tr>
 	<td class="file high" data-value="LinearProgress.tsx"><a href="LinearProgress.tsx.html">LinearProgress.tsx</a></td>
 	<td data-value="100" class="pic high">
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="189" class="abs high">189/189</td>
+	<td data-value="191" class="abs high">191/191</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="25" class="abs high">25/25</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="1" class="abs high">1/1</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="189" class="abs high">189/189</td>
+	<td data-value="191" class="abs high">191/191</td>
 	</tr>
 
 </tbody>
@@ -101,7 +116,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-30T01:42:04.192Z
+                at 2023-11-13T20:57:58.450Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/lcov-report/snackbar/Snackbar.tsx.html

@@ -25,7 +25,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>189/189</span>
+                <span class='fraction'>175/175</span>
             </div>
         
             
@@ -46,7 +46,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>189/189</span>
+                <span class='fraction'>175/175</span>
             </div>
         
             
@@ -238,21 +238,7 @@
 <a name='L173'></a><a href='#L173'>173</a>
 <a name='L174'></a><a href='#L174'>174</a>
 <a name='L175'></a><a href='#L175'>175</a>
-<a name='L176'></a><a href='#L176'>176</a>
-<a name='L177'></a><a href='#L177'>177</a>
-<a name='L178'></a><a href='#L178'>178</a>
-<a name='L179'></a><a href='#L179'>179</a>
-<a name='L180'></a><a href='#L180'>180</a>
-<a name='L181'></a><a href='#L181'>181</a>
-<a name='L182'></a><a href='#L182'>182</a>
-<a name='L183'></a><a href='#L183'>183</a>
-<a name='L184'></a><a href='#L184'>184</a>
-<a name='L185'></a><a href='#L185'>185</a>
-<a name='L186'></a><a href='#L186'>186</a>
-<a name='L187'></a><a href='#L187'>187</a>
-<a name='L188'></a><a href='#L188'>188</a>
-<a name='L189'></a><a href='#L189'>189</a>
-<a name='L190'></a><a href='#L190'>190</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L176'></a><a href='#L176'>176</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>
@@ -393,61 +379,42 @@
 <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">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
-<span class="cline-any cline-yes">124x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">117x</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 AriaRole,
-  type ComponentType,
-  type HTMLAttributes,
-} from "react";
+import { forwardRef, type ComponentType, type HTMLAttributes } from "react";
 import { Portal } from "../portal/Portal.js";
 import { useEnsuredId } from "../useEnsuredId.js";
 import {
@@ -456,7 +423,7 @@ import {
 } from "./DefaultToastRenderer.js";
 import { type ConfigurableToastProps } from "./Toast.js";
 import { useToastQueue } from "./ToastManagerProvider.js";
-import { snackbar, type SnackbarPosition } from "./snackbarStyles.js";
+import { snackbar } from "./snackbarStyles.js";
 &nbsp;
 /**
  * @remarks \@since 6.0.0 The `id` prop is optional
@@ -466,9 +433,6 @@ export interface SnackbarProps extends HTMLAttributes&lt;HTMLDivElement&gt; {
    * @defaultValue `"snackbar-" + useId()`
    */
   id?: string;
-&nbsp;
-  /** @defaultValue `"status"` */
-  role?: AriaRole;
 &nbsp;
   /**
    * Set this to the number of toasts that can be visible within the snackbar at
@@ -478,11 +442,6 @@ export interface SnackbarProps extends HTMLAttributes&lt;HTMLDivElement&gt; {
    * @defaultValue `1`
    */
   limit?: number;
-&nbsp;
-  /**
-   * @defaultValue `"bottom"`
-   */
-  position?: SnackbarPosition;
 &nbsp;
   /**
    * @defaultValue `false`
@@ -597,10 +556,8 @@ export const Snackbar = forwardRef&lt;HTMLDivElement, SnackbarProps&gt;(
   function Snackbar(props, ref) {
     const {
       id: propId,
-      role = "status",
       className,
       limit = 1,
-      position = "bottom",
       renderToast: RenderToast = DefaultToastRenderer,
       disablePortal,
       toastDefaults,
@@ -611,21 +568,22 @@ export const Snackbar = forwardRef&lt;HTMLDivElement, SnackbarProps&gt;(
 &nbsp;
     return (
       &lt;Portal disabled={disablePortal}&gt;
-        &lt;div
-          {...remaining}
-          id={id}
-          ref={ref}
-          role={role}
-          className={snackbar({ position, className })}
-        &gt;
-          {queue.map((toast) =&gt; (
-            &lt;RenderToast
-              {...toast}
-              key={toast.toastId}
-              toastDefaults={toastDefaults}
-            /&gt;
-          ))}
-        &lt;/div&gt;
+        {queue.length &gt; 0 &amp;&amp; (
+          &lt;div
+            {...remaining}
+            id={id}
+            ref={ref}
+            className={snackbar({ className })}
+          &gt;
+            {queue.map((toast) =&gt; (
+              &lt;RenderToast
+                {...toast}
+                key={toast.toastId}
+                toastDefaults={toastDefaults}
+              /&gt;
+            ))}
+          &lt;/div&gt;
+        )}
       &lt;/Portal&gt;
     );
   }
@@ -637,7 +595,7 @@ export const Snackbar = forwardRef&lt;HTMLDivElement, SnackbarProps&gt;(
             <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-23T22:20:30.033Z
+                at 2023-11-18T21:34:40.818Z
             </div>
         <script src="../prettify.js"></script>
         <script>