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

package/coverage/lcov-report/src/dialog/NestedDialogProvider.ts.html

@@ -112,7 +112,7 @@ export function useNestedDialogContext(): SetChildDialogVisible {
             <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-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/dialog/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">81.17% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>408/408</span>
+                <span class='fraction'>707/871</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">84% </span>
+                <span class="strong">88.09% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>21/25</span>
+                <span class='fraction'>37/42</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">94.11% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>6/6</span>
+                <span class='fraction'>16/17</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">81.17% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>408/408</span>
+                <span class='fraction'>707/871</span>
             </div>
         
             
@@ -93,6 +93,126 @@
 	<td data-value="408" class="abs high">408/408</td>
 	</tr>
 
+<tr>
+	<td class="file high" data-value="DialogContainer.tsx"><a href="DialogContainer.tsx.html">DialogContainer.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="30" class="abs high">30/30</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="3" class="abs high">3/3</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="30" class="abs high">30/30</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="DialogContent.tsx"><a href="DialogContent.tsx.html">DialogContent.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="31" class="abs high">31/31</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="1" class="abs high">1/1</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="31" class="abs high">31/31</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="DialogFooter.tsx"><a href="DialogFooter.tsx.html">DialogFooter.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="28" class="abs high">28/28</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="1" class="abs high">1/1</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="28" class="abs high">28/28</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="DialogHeader.tsx"><a href="DialogHeader.tsx.html">DialogHeader.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="21" class="abs high">21/21</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="1" class="abs high">1/1</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="21" class="abs high">21/21</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="DialogTitle.tsx"><a href="DialogTitle.tsx.html">DialogTitle.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="57" class="abs high">57/57</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="1" class="abs high">1/1</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="57" class="abs high">57/57</td>
+	</tr>
+
+<tr>
+	<td class="file low" data-value="FixedDialog.tsx"><a href="FixedDialog.tsx.html">FixedDialog.tsx</a></td>
+	<td data-value="0" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 0%"></div><div class="cover-empty" style="width: 100%"></div></div>
+	</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="164" class="abs low">0/164</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="1" class="abs low">0/1</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="1" class="abs low">0/1</td>
+	<td data-value="0" class="pct low">0%</td>
+	<td data-value="164" class="abs low">0/164</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="NestedDialogProvider.ts"><a href="NestedDialogProvider.ts.html">NestedDialogProvider.ts</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="14" class="abs high">14/14</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="2" class="abs high">2/2</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="14" class="abs high">14/14</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="styles.ts"><a href="styles.ts.html">styles.ts</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="118" class="abs high">118/118</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="7" class="abs high">7/7</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="4" class="abs high">4/4</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="118" class="abs high">118/118</td>
+	</tr>
+
 </tbody>
 </table>
 </div>
@@ -101,7 +221,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-11-13T20:44:31.635Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/dialog/styles.ts.html

@@ -424,7 +424,7 @@ export function dialogFooter(
             <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-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/divider/Divider.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'>65/65</span>
+                <span class='fraction'>64/64</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'>65/65</span>
+                <span class='fraction'>64/64</span>
             </div>
         
             
@@ -127,9 +127,7 @@
 <a name='L62'></a><a href='#L62'>62</a>
 <a name='L63'></a><a href='#L63'>63</a>
 <a name='L64'></a><a href='#L64'>64</a>
-<a name='L65'></a><a href='#L65'>65</a>
-<a name='L66'></a><a href='#L66'>66</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<a name='L65'></a><a href='#L65'>65</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>
@@ -204,7 +202,6 @@ declare module "react" {
     "--rmd-divider-spacing"?: string | number;
     "--rmd-divider-vertical-spacing"?: string | number;
     "--rmd-divider-inset"?: string | number;
-    "--rmd-divider-width"?: string | number;
     "--rmd-divider-max-size"?: string | number;
   }
 }
@@ -265,7 +262,7 @@ export const Divider = forwardRef&lt;DividerElement, DividerProps&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-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/divider/index.html

@@ -25,7 +25,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>114/114</span>
+                <span class='fraction'>113/113</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'>114/114</span>
+                <span class='fraction'>113/113</span>
             </div>
         
             
@@ -84,13 +84,13 @@
 	<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="65" class="abs high">65/65</td>
+	<td data-value="64" class="abs high">64/64</td>
 	<td data-value="50" class="pct medium">50%</td>
 	<td data-value="2" class="abs medium">1/2</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="65" class="abs high">65/65</td>
+	<td data-value="64" class="abs high">64/64</td>
 	</tr>
 
 <tr>
@@ -116,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-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/divider/styles.ts.html

@@ -217,7 +217,7 @@ export function divider(options: DividerClassNameOptions = {}): string {
             <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-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/draggable/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">93.2% </span>
+                <span class="strong">93.08% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>974/1045</span>
+                <span class='fraction'>942/1012</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">91% </span>
+                <span class="strong">90.52% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>91/100</span>
+                <span class='fraction'>86/95</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">83.33% </span>
+                <span class="strong">80% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>10/12</span>
+                <span class='fraction'>8/10</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">93.2% </span>
+                <span class="strong">93.08% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>974/1045</span>
+                <span class='fraction'>942/1012</span>
             </div>
         
             
@@ -80,32 +80,32 @@
 </thead>
 <tbody><tr>
 	<td class="file high" data-value="useDraggable.ts"><a href="useDraggable.ts.html">useDraggable.ts</a></td>
-	<td data-value="99.74" class="pic high">
+	<td data-value="99.61" class="pic high">
 	<div class="chart"><div class="cover-fill" style="width: 99%"></div><div class="cover-empty" style="width: 1%"></div></div>
 	</td>
-	<td data-value="99.74" class="pct high">99.74%</td>
-	<td data-value="770" class="abs high">768/770</td>
-	<td data-value="95.77" class="pct high">95.77%</td>
-	<td data-value="71" class="abs high">68/71</td>
+	<td data-value="99.61" class="pct high">99.61%</td>
+	<td data-value="771" class="abs high">768/771</td>
+	<td data-value="94.44" class="pct high">94.44%</td>
+	<td data-value="72" class="abs high">68/72</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="5" class="abs high">5/5</td>
-	<td data-value="99.74" class="pct high">99.74%</td>
-	<td data-value="770" class="abs high">768/770</td>
+	<td data-value="4" class="abs high">4/4</td>
+	<td data-value="99.61" class="pct high">99.61%</td>
+	<td data-value="771" class="abs high">768/771</td>
 	</tr>
 
 <tr>
 	<td class="file medium" data-value="utils.ts"><a href="utils.ts.html">utils.ts</a></td>
-	<td data-value="74.9" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 74%"></div><div class="cover-empty" style="width: 26%"></div></div>
+	<td data-value="72.19" class="pic medium">
+	<div class="chart"><div class="cover-fill" style="width: 72%"></div><div class="cover-empty" style="width: 28%"></div></div>
 	</td>
-	<td data-value="74.9" class="pct medium">74.9%</td>
-	<td data-value="275" class="abs medium">206/275</td>
-	<td data-value="79.31" class="pct medium">79.31%</td>
-	<td data-value="29" class="abs medium">23/29</td>
-	<td data-value="71.42" class="pct medium">71.42%</td>
-	<td data-value="7" class="abs medium">5/7</td>
-	<td data-value="74.9" class="pct medium">74.9%</td>
-	<td data-value="275" class="abs medium">206/275</td>
+	<td data-value="72.19" class="pct medium">72.19%</td>
+	<td data-value="241" class="abs medium">174/241</td>
+	<td data-value="78.26" class="pct medium">78.26%</td>
+	<td data-value="23" class="abs medium">18/23</td>
+	<td data-value="66.66" class="pct medium">66.66%</td>
+	<td data-value="6" class="abs medium">4/6</td>
+	<td data-value="72.19" class="pct medium">72.19%</td>
+	<td data-value="241" class="abs medium">174/241</td>
 	</tr>
 
 </tbody>
@@ -116,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-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/draggable/useDraggable.ts.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">99.74% </span>
+                <span class="strong">99.61% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>768/770</span>
+                <span class='fraction'>768/771</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">95.77% </span>
+                <span class="strong">94.44% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>68/71</span>
+                <span class='fraction'>68/72</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>5/5</span>
+                <span class='fraction'>4/4</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">99.74% </span>
+                <span class="strong">99.61% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>768/770</span>
+                <span class='fraction'>768/771</span>
             </div>
         
             
@@ -833,7 +833,9 @@
 <a name='L768'></a><a href='#L768'>768</a>
 <a name='L769'></a><a href='#L769'>769</a>
 <a name='L770'></a><a href='#L770'>770</a>
-<a name='L771'></a><a href='#L771'>771</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L771'></a><a href='#L771'>771</a>
+<a name='L772'></a><a href='#L772'>772</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>
@@ -1175,16 +1177,6 @@
 <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">102x</span>
 <span class="cline-any cline-yes">102x</span>
 <span class="cline-any cline-yes">102x</span>
@@ -1230,6 +1222,15 @@
 <span class="cline-any cline-yes">102x</span>
 <span class="cline-any cline-yes">102x</span>
 <span class="cline-any cline-yes">102x</span>
+<span class="cline-any cline-yes">102x</span>
+<span class="cline-any cline-yes">102x</span>
+<span class="cline-any cline-yes">102x</span>
+<span class="cline-any cline-yes">102x</span>
+<span class="cline-any cline-yes">102x</span>
+<span class="cline-any cline-yes">102x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">102x</span>
+<span class="cline-any cline-yes">102x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">102x</span>
 <span class="cline-any cline-yes">102x</span>
@@ -1603,6 +1604,7 @@
 <span class="cline-any cline-yes">102x</span>
 <span class="cline-any cline-yes">102x</span>
 <span class="cline-any cline-yes">102x</span>
+<span class="cline-any cline-yes">102x</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">"use client";
 import { cnb } from "cnbuilder";
 import type { HTMLAttributes, Ref, RefCallback } from "react";
@@ -1618,11 +1620,12 @@ import { useDir } from "../typography/WritingDirectionProvider.js";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useEnsuredState } from "../useEnsuredState.js";
 import { useHtmlClassName } from "../useHtmlClassName.js";
+import { getPercentage } from "../utils/getPercentage.js";
+import { getRangeDefaultValue } from "../utils/getRangeDefaultValue.js";
 import { getRangeSteps } from "../utils/getRangeSteps.js";
 import { nearest } from "../utils/nearest.js";
 import { withinRange } from "../utils/withinRange.js";
 import {
-  getDraggableDefaultValue,
   isMouseDragStartEvent,
   isTouchDragStartEvent,
   updateDragPosition,
@@ -1896,6 +1899,18 @@ export interface DraggableImplementation&lt;E extends HTMLElement = HTMLElement&
    * Decrement the {@link value} by {@link DraggableOptions.step}.
    */
   decrement(): void;
+&nbsp;
+  /**
+   * THe current percentage the `value` is within the range.
+   *
+   * ```ts
+   * const percentage =
+   *   dragging &amp;&amp; withinOffsetParent
+   *     ? : dragPercentage
+   *     : getPercentage({ min, max, value });
+   * ```
+   */
+  percentage: number;
 &nbsp;
   /**
    * A ref that **Must** be passed to the element that should be draggable.
@@ -1906,29 +1921,7 @@ export interface DraggableImplementation&lt;E extends HTMLElement = HTMLElement&
    * This value will only update while dragging with a mouse or touch and should
    * be used for the positioning styles while dragging.
    *
-   * @example
-   * Inline Styles
-   * ```ts
-   * import { getPercentage, useDraggable } from "@react-md/core";
-   *
-   * const min = 120;
-   * const max = 256;
-   * const { value, dragging, dragPercentage } = useDraggable({
-   *   min,
-   *   max,
-   *   defaultValue: min,
-   * });
-   *
-   * const percentage = dragging
-   *   ? dragPercentage
-   *   : getPercentage({ min, max, value });
-   *
-   * const style: CSSProperties = {
-   *   left: `${percentage * 100}%`&lt;&gt;
-   * };
-   *
-   * // do stuff
-   * ```
+   * Note: The {@Link percentage} will use this value while dragging.
    */
   dragPercentage: number;
 &nbsp;
@@ -1990,7 +1983,12 @@ export function useDraggable&lt;E extends HTMLElement&gt;(
   const [value, setValue] = useEnsuredState({
     value: propValue,
     setValue: propSetValue,
-    defaultValue: () =&gt; getDraggableDefaultValue({ min, max, defaultValue }),
+    defaultValue: getRangeDefaultValue({
+      min,
+      max,
+      step: 1,
+      defaultValue,
+    }),
   });
   const [dragging, setDragging] = useEnsuredState({
     value: propDragging,
@@ -1999,6 +1997,10 @@ export function useDraggable&lt;E extends HTMLElement&gt;(
   });
 &nbsp;
   const isRTL = useDir().dir === "rtl";
+  const percentage =
+    dragging &amp;&amp; <span class="branch-0 cbranch-no" title="branch not covered" >withinOffsetParent</span>
+<span class="cstat-no" title="statement not covered" >      ? dragPercentage</span>
+      : getPercentage({ min, max, value });
   const maximum = useCallback(() =&gt; {
     setValue(max);
   }, [max, setValue]);
@@ -2367,6 +2369,7 @@ export function useDraggable&lt;E extends HTMLElement&gt;(
     decrement,
     draggedOnce,
     draggableRef: ref,
+    percentage,
     dragPercentage,
     touchEventHandlers,
     mouseEventHandlers,
@@ -2380,7 +2383,7 @@ export function useDraggable&lt;E extends HTMLElement&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-11-12T03:26:02.290Z
+                at 2024-01-31T14:54:24.632Z
             </div>
         <script src="../../prettify.js"></script>
         <script>