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

package/coverage/lcov-report/src/tabs/tabIndicatorStyles.ts.html

@@ -25,7 +25,7 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>24/24</span>
+                <span class='fraction'>34/34</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'>24/24</span>
+                <span class='fraction'>34/34</span>
             </div>
         
             
@@ -87,7 +87,17 @@
 <a name='L22'></a><a href='#L22'>22</a>
 <a name='L23'></a><a href='#L23'>23</a>
 <a name='L24'></a><a href='#L24'>24</a>
-<a name='L25'></a><a href='#L25'>25</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L25'></a><a href='#L25'>25</a>
+<a name='L26'></a><a href='#L26'>26</a>
+<a name='L27'></a><a href='#L27'>27</a>
+<a name='L28'></a><a href='#L28'>28</a>
+<a name='L29'></a><a href='#L29'>29</a>
+<a name='L30'></a><a href='#L30'>30</a>
+<a name='L31'></a><a href='#L31'>31</a>
+<a name='L32'></a><a href='#L32'>32</a>
+<a name='L33'></a><a href='#L33'>33</a>
+<a name='L34'></a><a href='#L34'>34</a>
+<a name='L35'></a><a href='#L35'>35</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>
@@ -105,6 +115,16 @@
 <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">63x</span>
+<span class="cline-any cline-yes">63x</span>
+<span class="cline-any cline-yes">63x</span>
+<span class="cline-any cline-yes">63x</span>
+<span class="cline-any cline-yes">63x</span>
+<span class="cline-any cline-yes">63x</span>
+<span class="cline-any cline-yes">63x</span>
+<span class="cline-any cline-yes">63x</span>
+<span class="cline-any cline-yes">63x</span>
 <span class="cline-any cline-yes">63x</span>
 <span class="cline-any cline-yes">63x</span>
 <span class="cline-any cline-yes">63x</span>
@@ -121,8 +141,9 @@ const styles = bem("rmd-tab-indicator");
  */
 export interface TabIndicatorClassNameOptions {
   className?: string;
-  tablist?: boolean;
   animate?: boolean;
+  tablist?: boolean;
+  vertical?: boolean;
 }
 &nbsp;
 /**
@@ -131,9 +152,18 @@ export interface TabIndicatorClassNameOptions {
 export function tabIndicator(
   options: TabIndicatorClassNameOptions = {}
 ): string {
-  const { className, tablist, animate } = options;
+  const { className, vertical, tablist, animate } = options;
 &nbsp;
-  return cnb(styles({ tablist, animate }), className);
+  return cnb(
+    styles({
+      animate,
+      h: !vertical,
+      v: vertical,
+      "tablist-h": tablist &amp;&amp; !vertical,
+      "tablist-v": tablist &amp;&amp; vertical,
+    }),
+    className
+  );
 }
 &nbsp;</pre></td></tr></table></pre>
 
@@ -142,7 +172,7 @@ export function tabIndicator(
             <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-11T19:16:14.942Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/tabs/tabListScrollButtonStyles.ts.html

@@ -211,7 +211,7 @@ export function tabListScrollButton(
             <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-11T19:16:14.942Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/tabs/tabListStyles.ts.html

@@ -215,7 +215,7 @@ export function tabList(options: TabListClassNameOptions = {}): string {
       "full-width": !inline,
       "no-scrollbar": !scrollbar,
     }),
-    indicator && tabIndicator({ tablist: true, animate }),
+    indicator && tabIndicator({ tablist: true, animate, vertical }),
     className
   );
 }
@@ -226,7 +226,7 @@ export function tabList(options: TabListClassNameOptions = {}): 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-11T19:16:14.942Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/tabs/tabStyles.ts.html

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">98.33% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>48/48</span>
+                <span class='fraction'>59/60</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80% </span>
+                <span class="strong">85.71% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>4/5</span>
+                <span class='fraction'>6/7</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">98.33% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>48/48</span>
+                <span class='fraction'>59/60</span>
             </div>
         
             
@@ -111,7 +111,21 @@
 <a name='L46'></a><a href='#L46'>46</a>
 <a name='L47'></a><a href='#L47'>47</a>
 <a name='L48'></a><a href='#L48'>48</a>
-<a name='L49'></a><a href='#L49'>49</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L49'></a><a href='#L49'>49</a>
+<a name='L50'></a><a href='#L50'>50</a>
+<a name='L51'></a><a href='#L51'>51</a>
+<a name='L52'></a><a href='#L52'>52</a>
+<a name='L53'></a><a href='#L53'>53</a>
+<a name='L54'></a><a href='#L54'>54</a>
+<a name='L55'></a><a href='#L55'>55</a>
+<a name='L56'></a><a href='#L56'>56</a>
+<a name='L57'></a><a href='#L57'>57</a>
+<a name='L58'></a><a href='#L58'>58</a>
+<a name='L59'></a><a href='#L59'>59</a>
+<a name='L60'></a><a href='#L60'>60</a>
+<a name='L61'></a><a href='#L61'>61</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>
@@ -143,22 +157,32 @@
 <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">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
-<span class="cline-any cline-yes">133x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">43x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
+<span class="cline-any cline-yes">136x</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { cnb } from "cnbuilder";
 import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
@@ -181,7 +205,9 @@ const styles = bem("rmd-tab");
 export interface TabClassNameOptions {
   className?: string;
   active?: boolean;
+  isLink?: boolean;
   activeIndicator?: boolean;
+  verticalActiveIndicator?: boolean;
   stacked?: boolean;
   reversed?: boolean;
   disabled?: boolean;
@@ -191,8 +217,16 @@ export interface TabClassNameOptions {
  * @remarks \@since 6.0.0
  */
 export function tab(options: TabClassNameOptions = {}): string {
-  const { className, active, activeIndicator, stacked, reversed, disabled } =
-    options;
+  const {
+    className,
+    active,
+    isLink,
+    stacked,
+    reversed,
+    disabled,
+    activeIndicator,
+    verticalActiveIndicator,
+  } = options;
 &nbsp;
   return cnb(
     styles({
@@ -202,8 +236,10 @@ export function tab(options: TabClassNameOptions = {}): string {
       "stacked-reversed": stacked &amp;&amp; reversed,
       disabled,
     }),
-    active &amp;&amp; <span class="branch-0 cbranch-no" title="branch not covered" >activeIndicator &amp;&amp; tabIndicator(),</span>
-    cssUtils({ surface: true }),
+    active &amp;&amp;
+<span class="branch-0 cbranch-no" title="branch not covered" >      activeIndicator &amp;&amp;</span>
+<span class="cstat-no" title="statement not covered" >      tabIndicator({ vertical: verticalActiveIndicator }),</span>
+    cssUtils({ surface: true, textDecoration: isLink ? "none" : undefined }),
     className
   );
 }
@@ -214,7 +250,7 @@ export function tab(options: TabClassNameOptions = {}): 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-11T19:16:14.942Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/tabs/useTabList.ts.html

@@ -23,16 +23,16 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">94.41% </span>
+                <span class="strong">94.47% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>203/215</span>
+                <span class='fraction'>205/217</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">80.95% </span>
+                <span class="strong">84% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>17/21</span>
+                <span class='fraction'>21/25</span>
             </div>
         
             
@@ -44,9 +44,9 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">94.41% </span>
+                <span class="strong">94.47% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>203/215</span>
+                <span class='fraction'>205/217</span>
             </div>
         
             
@@ -278,7 +278,9 @@
 <a name='L213'></a><a href='#L213'>213</a>
 <a name='L214'></a><a href='#L214'>214</a>
 <a name='L215'></a><a href='#L215'>215</a>
-<a name='L216'></a><a href='#L216'>216</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</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>
@@ -390,33 +392,35 @@
 <span class="cline-any cline-yes">63x</span>
 <span class="cline-any cline-yes">63x</span>
 <span class="cline-any cline-yes">63x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-no">&nbsp;</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">15x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-yes">10x</span>
 <span class="cline-any cline-yes">10x</span>
-<span class="cline-any cline-yes">15x</span>
+<span class="cline-any cline-yes">13x</span>
 <span class="cline-any cline-yes">63x</span>
 <span class="cline-any cline-yes">63x</span>
 <span class="cline-any cline-yes">63x</span>
@@ -515,20 +519,20 @@ import { getTabRoleOnly, scrollTabIntoView } from "./utils.js";
 &nbsp;
 declare module "react" {
   interface CSSProperties {
-    "--rmd-tab-width"?: string;
+    "--rmd-tab-size"?: string;
     "--rmd-tab-offset"?: string | number;
     "--rmd-tab-indicator-background"?: string;
   }
 }
 &nbsp;
-const TAB_WIDTH_VAR = "--rmd-tab-width";
+const TAB_SIZE_VAR = "--rmd-tab-size";
 const TAB_OFFSET_VAR = "--rmd-tab-offset";
 &nbsp;
 const noop = (): void =&gt; {
   // do nothing
 };
 &nbsp;
-export type TabWidthVar = typeof TAB_WIDTH_VAR;
+export type TabWidthVar = typeof TAB_SIZE_VAR;
 export type TabOffsetVar = typeof TAB_OFFSET_VAR;
 &nbsp;
 export type IndicatorCSSProperties = CSSProperties &amp;
@@ -594,7 +598,7 @@ export function useTabList(
     useState&lt;IndicatorCSSProperties&gt;(() =&gt; {
       const tabWidth = `${100 / 3}%`;
       return {
-        [TAB_WIDTH_VAR]: tabWidth,
+        [TAB_SIZE_VAR]: tabWidth,
         [TAB_OFFSET_VAR]: "0px",
       };
     });
@@ -615,15 +619,17 @@ export function useTabList(
 <span class="cstat-no" title="statement not covered" >          return;</span>
 <span class="cstat-no" title="statement not covered" >        }</span>
 &nbsp;
+        const size = vertical ? activeTab.offsetHeight : activeTab.offsetWidth;
+        const offset = vertical ? activeTab.offsetTop : activeTab.offsetLeft;
         const cssVars: IndicatorCSSProperties = {
-          [TAB_WIDTH_VAR]: `${activeTab.offsetWidth}px`,
-          [TAB_OFFSET_VAR]: `${activeTab.offsetLeft}px`,
+          [TAB_SIZE_VAR]: `${size}px`,
+          [TAB_OFFSET_VAR]: `${offset}px`,
         };
 &nbsp;
         setIndicatorStyles((prevStyles) =&gt; {
           if (
             prevStyles &amp;&amp;
-            prevStyles[TAB_WIDTH_VAR] === cssVars[TAB_WIDTH_VAR] &amp;&amp;
+            prevStyles[TAB_SIZE_VAR] === cssVars[TAB_SIZE_VAR] &amp;&amp;
             prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]
           ) {
             return prevStyles;
@@ -632,7 +638,7 @@ export function useTabList(
           return cssVars;
         });
       },
-      [activeIndex, isRTL]
+      [activeIndex, isRTL, vertical]
     ),
   });
   const forwardRef = useRef&lt;HTMLDivElement&gt;(null);
@@ -715,7 +721,7 @@ export function useTabList(
             <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-11T19:16:14.942Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/tabs/useTabs.ts.html

@@ -1552,7 +1552,7 @@ export function useTabs<TabValue extends string | number>(
             <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-11T19:16:14.942Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/tabs/utils.ts.html

@@ -151,8 +151,8 @@
 <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">87x</span>
-<span class="cline-any cline-yes">87x</span>
+<span class="cline-any cline-yes">85x</span>
+<span class="cline-any cline-yes">85x</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>
@@ -322,7 +322,7 @@ export const getTabListScrollToOptions: GetTabListScrollToOptions = (
             <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-11T19:16:14.942Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/lcov-report/src/test-utils/IntersectionObserver.ts.html

@@ -220,7 +220,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-11T19:16:14.942Z
             </div>
         <script src="../../prettify.js"></script>
         <script>