@rescui/tab-list 0.7.14 → 0.8.0

package/lib/index.css

@@ -1,7 +1,7 @@
-._wrapper_ehodiq_9{
+._wrapper_ihnvl0_9{
   position:relative;
 }
-._tabsContainer_ehodiq_13{
+._tabsContainer_ihnvl0_13{
   position:relative;
 
   display:-webkit-box;
@@ -10,7 +10,7 @@
 
   display:flex;
 }
-._indicator_ehodiq_19{
+._indicator_ihnvl0_19{
   position:absolute;
   z-index:3;
   bottom:0;
@@ -23,21 +23,21 @@
   transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   will-change:left, width;
 }
-._light_ehodiq_31._classic_ehodiq_31 ._indicator_ehodiq_19{
+._light_ihnvl0_31._classic_ihnvl0_31 ._indicator_ihnvl0_19{
     background-color:#6B57FF;
     background-color:var(--rs-color-primary-light-theme, #6B57FF);
   }
-._dark_ehodiq_35._classic_ehodiq_31 ._indicator_ehodiq_19{
+._dark_ihnvl0_35._classic_ihnvl0_31 ._indicator_ihnvl0_19{
     background-color:#8473FF;
     background-color:var(--rs-color-primary-dark-theme, #8473FF);
   }
-._light_ehodiq_31._rock_ehodiq_39 ._indicator_ehodiq_19{
+._light_ihnvl0_31._rock_ihnvl0_39 ._indicator_ihnvl0_19{
     background-color:#19191C;
   }
-._dark_ehodiq_35._rock_ehodiq_39 ._indicator_ehodiq_19{
+._dark_ihnvl0_35._rock_ihnvl0_39 ._indicator_ihnvl0_19{
     background-color:#FFFFFF;
   }
-._tab_ehodiq_13{
+._tab_ihnvl0_13{
   position:relative;
 
   display:-webkit-box;
@@ -57,21 +57,43 @@
       -ms-flex-align:center;
           align-items:center;
 
+  margin:0;
+  padding:0;
+
+  border:none;
+
   outline:none;
 
   list-style:none;
 
   cursor:pointer;
   white-space:nowrap;
+  text-decoration:none;
+
+  color:inherit;
+  background:transparent;
+  -webkit-box-shadow:none;
+          box-shadow:none;
+
+  font:inherit;
+  line-height:normal;
+  -webkit-font-smoothing:inherit;
+  -moz-osx-font-smoothing:inherit;
+  -webkit-appearance:none;
 }
-._tab_ehodiq_13:hover,
-  ._tab_ehodiq_13:active,
-  ._tab_ehodiq_13:focus{
+._tab_ihnvl0_13::-moz-focus-inner{
+    padding:0;
+
+    border:none;
+  }
+._tab_ihnvl0_13:hover,
+  ._tab_ihnvl0_13:active,
+  ._tab_ihnvl0_13:focus{
     outline:none;
 
     text-decoration:none;
   }
-._tab_ehodiq_13:after{
+._tab_ihnvl0_13:after{
     position:absolute;
     bottom:0;
     left:0;
@@ -83,31 +105,35 @@
 
     background-color:transparent;
   }
-._tab_ehodiq_13:after:focus[data-focus-method='key']{
+._tab_ihnvl0_13:after:focus[data-focus-method='key']{
       opacity:0;
     }
-._tab_ehodiq_13:hover:after{
+._tab_ihnvl0_13:hover:after{
     height:1px;
   }
-._sizeM_ehodiq_99 ._tab_ehodiq_13{
+._sizeM_ihnvl0_125 ._tab_ihnvl0_13{
     letter-spacing:0.0015em;
     font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
     font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
+    -webkit-font-feature-settings:"kern", "liga", "calt";
+    font-feature-settings:"kern", "liga", "calt";
     font-size:16px;
     font-size:var(--rs-text-2-font-size, 16px);
     font-weight:400;
     line-height:24px;
     line-height:var(--rs-text-2-line-height, 24px);
   }
-._rs-reset-letter-spacing_ehodiq_1 ._sizeM_ehodiq_99 ._tab_ehodiq_13{
+._rs-reset-letter-spacing_ihnvl0_1 ._sizeM_ihnvl0_125 ._tab_ihnvl0_13{
     letter-spacing:normal;
   }
-._sizeM_ehodiq_99 ._tab_ehodiq_13 {
+._sizeM_ihnvl0_125 ._tab_ihnvl0_13 {
     padding:8px 0;
 }
-._sizeL_ehodiq_104 ._tab_ehodiq_13{
+._sizeL_ihnvl0_130 ._tab_ihnvl0_13{
     font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
     font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
+    -webkit-font-feature-settings:"kern", "liga", "calt";
+    font-feature-settings:"kern", "liga", "calt";
     font-size:19px;
     font-size:var(--rs-text-1-font-size, 19px);
     font-weight:normal;
@@ -115,37 +141,37 @@
     line-height:var(--rs-text-1-line-height, 28px);
     padding:12px 0;
   }
-._innerOffsetM_ehodiq_109 ._tab_ehodiq_13{
+._innerOffsetM_ihnvl0_135 ._tab_ihnvl0_13{
     margin-left:24px;
   }
 @media screen and (max-width: 640px){
-._innerOffsetM_ehodiq_109 ._tab_ehodiq_13{
+._innerOffsetM_ihnvl0_135 ._tab_ihnvl0_13{
       margin-left:16px
   }
     }
-._innerOffsetL_ehodiq_117 ._tab_ehodiq_13{
+._innerOffsetL_ihnvl0_143 ._tab_ihnvl0_13{
     margin-left:32px;
   }
 @media screen and (max-width: 640px){
-._innerOffsetL_ehodiq_117 ._tab_ehodiq_13{
+._innerOffsetL_ihnvl0_143 ._tab_ihnvl0_13{
       margin-left:24px
   }
     }
-._light_ehodiq_31 ._tab_ehodiq_13{
+._light_ihnvl0_31 ._tab_ihnvl0_13{
     color:rgba(25,25,28,0.7);
   }
-._dark_ehodiq_35 ._tab_ehodiq_13{
+._dark_ihnvl0_35 ._tab_ihnvl0_13{
     color:rgba(255,255,255,0.7);
   }
-._light_ehodiq_31 ._tab_ehodiq_13._short_ehodiq_133{
+._light_ihnvl0_31 ._tab_ihnvl0_13._short_ihnvl0_159{
     -webkit-box-shadow:inset 0 -1px 0 rgba(25,25,28,0.3);
             box-shadow:inset 0 -1px 0 rgba(25,25,28,0.3);
   }
-._dark_ehodiq_35 ._tab_ehodiq_13._short_ehodiq_133{
+._dark_ihnvl0_35 ._tab_ihnvl0_13._short_ihnvl0_159{
     -webkit-box-shadow:inset 0 -1px 0 rgba(255,255,255,0.4);
             box-shadow:inset 0 -1px 0 rgba(255,255,255,0.4);
   }
-._tab_ehodiq_13._selected_ehodiq_141{
+._tab_ihnvl0_13._selected_ihnvl0_167{
     z-index:1;
 
     cursor:default;
@@ -154,110 +180,110 @@
 
     transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   }
-._tab_ehodiq_13._selected_ehodiq_141:after{
+._tab_ihnvl0_13._selected_ihnvl0_167:after{
       height:2px;
 
       -webkit-transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
 
       transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
     }
-._light_ehodiq_31 ._tab_ehodiq_13:hover{
+._light_ihnvl0_31 ._tab_ihnvl0_13:hover{
     color:#19191C;
   }
-._light_ehodiq_31 ._tab_ehodiq_13:hover:after{
+._light_ihnvl0_31 ._tab_ihnvl0_13:hover:after{
       background-color:#19191C;
     }
-._dark_ehodiq_35 ._tab_ehodiq_13:hover{
+._dark_ihnvl0_35 ._tab_ihnvl0_13:hover{
     color:#FFFFFF;
   }
-._dark_ehodiq_35 ._tab_ehodiq_13:hover:after{
+._dark_ihnvl0_35 ._tab_ihnvl0_13:hover:after{
       background-color:#FFFFFF;
     }
-._light_ehodiq_31._rock_ehodiq_39 ._tab_ehodiq_13._selected_ehodiq_141{
+._light_ihnvl0_31._rock_ihnvl0_39 ._tab_ihnvl0_13._selected_ihnvl0_167{
     color:#19191C;
   }
-._light_ehodiq_31._rock_ehodiq_39 ._tab_ehodiq_13._selected_ehodiq_141:after{
+._light_ihnvl0_31._rock_ihnvl0_39 ._tab_ihnvl0_13._selected_ihnvl0_167:after{
       background-color:#19191C;
     }
-._dark_ehodiq_35._rock_ehodiq_39 ._tab_ehodiq_13._selected_ehodiq_141{
+._dark_ihnvl0_35._rock_ihnvl0_39 ._tab_ihnvl0_13._selected_ihnvl0_167{
     color:#FFFFFF;
   }
-._dark_ehodiq_35._rock_ehodiq_39 ._tab_ehodiq_13._selected_ehodiq_141:after{
+._dark_ihnvl0_35._rock_ihnvl0_39 ._tab_ihnvl0_13._selected_ihnvl0_167:after{
       background-color:#FFFFFF;
     }
-._light_ehodiq_31._classic_ehodiq_31 ._tab_ehodiq_13._selected_ehodiq_141{
+._light_ihnvl0_31._classic_ihnvl0_31 ._tab_ihnvl0_13._selected_ihnvl0_167{
     color:#6B57FF;
     color:var(--rs-color-primary-light-theme, #6B57FF);
   }
-._light_ehodiq_31._classic_ehodiq_31 ._tab_ehodiq_13._selected_ehodiq_141:after{
+._light_ihnvl0_31._classic_ihnvl0_31 ._tab_ihnvl0_13._selected_ihnvl0_167:after{
       background-color:#6B57FF;
       background-color:var(--rs-color-primary-light-theme, #6B57FF);
     }
-._dark_ehodiq_35._classic_ehodiq_31 ._tab_ehodiq_13._selected_ehodiq_141{
+._dark_ihnvl0_35._classic_ihnvl0_31 ._tab_ihnvl0_13._selected_ihnvl0_167{
     color:#8473FF;
     color:var(--rs-color-primary-dark-theme, #8473FF);
   }
-._dark_ehodiq_35._classic_ehodiq_31 ._tab_ehodiq_13._selected_ehodiq_141:after{
+._dark_ihnvl0_35._classic_ihnvl0_31 ._tab_ihnvl0_13._selected_ihnvl0_167:after{
       background-color:#8473FF;
       background-color:var(--rs-color-primary-dark-theme, #8473FF);
     }
-._light_ehodiq_31 ._tab_ehodiq_13:focus[data-focus-method='key']{
-    -webkit-box-shadow:inset #8979ff 0 calc(-1 * 4px ) 0 0, inset #8979ff 0 4px 0 0, #8979ff calc(-1 * 4px ) 0 0 0, #8979ff 4px 0 0 0;
-    -webkit-box-shadow:inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 calc(-1 * 4px ) 0 0, inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 4px 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) calc(-1 * 4px ) 0 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) 4px 0 0 0;
-            box-shadow:inset #8979ff 0 calc(-1 * 4px ) 0 0, inset #8979ff 0 4px 0 0, #8979ff calc(-1 * 4px ) 0 0 0, #8979ff 4px 0 0 0;
-            box-shadow:inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 calc(-1 * 4px ) 0 0, inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 4px 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) calc(-1 * 4px ) 0 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) 4px 0 0 0;
+._light_ihnvl0_31 ._tab_ihnvl0_13:focus[data-focus-method='key']{
+    -webkit-box-shadow:inset #8979ff 0 -4px 0 0, inset #8979ff 0 4px 0 0, #8979ff -4px 0 0 0, #8979ff 4px 0 0 0;
+    -webkit-box-shadow:inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 -4px 0 0, inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 4px 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) -4px 0 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) 4px 0 0 0;
+            box-shadow:inset #8979ff 0 -4px 0 0, inset #8979ff 0 4px 0 0, #8979ff -4px 0 0 0, #8979ff 4px 0 0 0;
+            box-shadow:inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 -4px 0 0, inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 4px 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) -4px 0 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) 4px 0 0 0;
   }
-._light_ehodiq_31 ._tab_ehodiq_13:focus[data-focus-method='key']:after{
+._light_ihnvl0_31 ._tab_ihnvl0_13:focus[data-focus-method='key']:after{
       opacity:0;
     }
-._dark_ehodiq_35 ._tab_ehodiq_13:focus[data-focus-method='key']{
-    -webkit-box-shadow:inset #6f61d2 0 calc(-1 * 4px ) 0 0, inset #6f61d2 0 4px 0 0, #6f61d2 calc(-1 * 4px ) 0 0 0, #6f61d2 4px 0 0 0;
-    -webkit-box-shadow:inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 calc(-1 * 4px ) 0 0, inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 4px 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(-1 * 4px ) 0 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) 4px 0 0 0;
-            box-shadow:inset #6f61d2 0 calc(-1 * 4px ) 0 0, inset #6f61d2 0 4px 0 0, #6f61d2 calc(-1 * 4px ) 0 0 0, #6f61d2 4px 0 0 0;
-            box-shadow:inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 calc(-1 * 4px ) 0 0, inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 4px 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(-1 * 4px ) 0 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) 4px 0 0 0;
+._dark_ihnvl0_35 ._tab_ihnvl0_13:focus[data-focus-method='key']{
+    -webkit-box-shadow:inset #6f61d2 0 -4px 0 0, inset #6f61d2 0 4px 0 0, #6f61d2 -4px 0 0 0, #6f61d2 4px 0 0 0;
+    -webkit-box-shadow:inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 -4px 0 0, inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 4px 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) -4px 0 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) 4px 0 0 0;
+            box-shadow:inset #6f61d2 0 -4px 0 0, inset #6f61d2 0 4px 0 0, #6f61d2 -4px 0 0 0, #6f61d2 4px 0 0 0;
+            box-shadow:inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 -4px 0 0, inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 4px 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) -4px 0 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) 4px 0 0 0;
   }
-._dark_ehodiq_35 ._tab_ehodiq_13:focus[data-focus-method='key']:after{
+._dark_ihnvl0_35 ._tab_ihnvl0_13:focus[data-focus-method='key']:after{
       opacity:0;
     }
-._innerOffsetL_ehodiq_117 ._tab_ehodiq_13:first-of-type,
-  ._innerOffsetM_ehodiq_109 ._tab_ehodiq_13:first-of-type{
+._innerOffsetL_ihnvl0_143 ._tab_ihnvl0_13:first-child,
+  ._innerOffsetM_ihnvl0_135 ._tab_ihnvl0_13:first-child{
     margin-left:0;
   }
 @media screen and (max-width: 640px){
-._innerOffsetL_ehodiq_117 ._tab_ehodiq_13:first-of-type,
-  ._innerOffsetM_ehodiq_109 ._tab_ehodiq_13:first-of-type{
+._innerOffsetL_ihnvl0_143 ._tab_ihnvl0_13:first-child,
+  ._innerOffsetM_ihnvl0_135 ._tab_ihnvl0_13:first-child{
       margin-left:0
   }
     }
-._icon_ehodiq_239{
+._icon_ihnvl0_269{
   -webkit-box-flex:0;
       -ms-flex:0 0;
           flex:0 0;
   -ms-flex-preferred-size:auto;
       flex-basis:auto;
 }
-._sizeM_ehodiq_99 ._icon_ehodiq_239{
+._sizeM_ihnvl0_125 ._icon_ihnvl0_269{
     width:24px;
     height:24px;
   }
-._sizeL_ehodiq_104 ._icon_ehodiq_239{
+._sizeL_ihnvl0_130 ._icon_ihnvl0_269{
     width:28px;
     height:28px;
   }
-._sizeM_ehodiq_99 ._icon_ehodiq_239._iconLeft_ehodiq_253{
+._sizeM_ihnvl0_125 ._icon_ihnvl0_269._iconLeft_ihnvl0_283{
     margin-right:4px;
   }
-._sizeL_ehodiq_104 ._icon_ehodiq_239._iconLeft_ehodiq_253{
+._sizeL_ihnvl0_130 ._icon_ihnvl0_269._iconLeft_ihnvl0_283{
     margin-right:8px;
   }
-._sizeM_ehodiq_99 ._icon_ehodiq_239._iconRight_ehodiq_261{
+._sizeM_ihnvl0_125 ._icon_ihnvl0_269._iconRight_ihnvl0_291{
     margin-left:4px;
   }
-._sizeL_ehodiq_104 ._icon_ehodiq_239._iconRight_ehodiq_261{
+._sizeL_ihnvl0_130 ._icon_ihnvl0_269._iconRight_ihnvl0_291{
     margin-left:8px;
   }
 
-._wrapper_1l911jk_4{
+._wrapper_16l3bnl_4{
   position:relative;
 
   display:-webkit-box;
@@ -266,7 +292,7 @@
 
   display:flex;
 }
-._scrollable_1l911jk_10{
+._scrollable_16l3bnl_10{
   display:-webkit-box;
   display:-ms-flexbox;
   display:flex;
@@ -275,7 +301,7 @@
   margin:-4px;
   padding:4px;
 }
-._scrollable_1l911jk_10::after{
+._scrollable_16l3bnl_10::after{
     display:block;
 
     height:100%;
@@ -284,15 +310,15 @@
 
     content:'';
   }
-._scrollable_1l911jk_10 {
+._scrollable_16l3bnl_10 {
 
   -ms-overflow-style:none;
   scrollbar-width:none;
 }
-._scrollable_1l911jk_10::-webkit-scrollbar{
+._scrollable_16l3bnl_10::-webkit-scrollbar{
     display:none;
   }
-._arrowShadow_1l911jk_39{
+._arrowShadow_16l3bnl_39{
   position:absolute;
   top:0;
 
@@ -302,7 +328,7 @@
 
   pointer-events:none;
 }
-._arrowShadow_1l911jk_39::before{
+._arrowShadow_16l3bnl_39::before{
     position:absolute;
 
     display:block;
@@ -316,7 +342,7 @@
 
             box-shadow:0 0 12px 12px currentColor;
   }
-._arrow_1l911jk_39{
+._arrow_16l3bnl_39{
   position:absolute;
   z-index:2;
   top:50%;
@@ -342,15 +368,15 @@
   -webkit-transform:translateY(-50%);
           transform:translateY(-50%);
 }
-._light_1l911jk_82 ._arrow_1l911jk_39{
+._light_16l3bnl_82 ._arrow_16l3bnl_39{
     color:#FFFFFF;
     background-color:#FFFFFF;
   }
-._dark_1l911jk_86 ._arrow_1l911jk_39{
+._dark_16l3bnl_86 ._arrow_16l3bnl_39{
     color:#19191C;
     background-color:#19191C;
   }
-._arrow_1l911jk_39._shown_1l911jk_91{
+._arrow_16l3bnl_39._shown_16l3bnl_91{
     opacity:1;
 
     pointer-events:auto;
@@ -359,36 +385,36 @@
 
     transition:opacity 0.15s ease-in;
   }
-._arrow_1l911jk_39._arrowLeft_1l911jk_99{
+._arrow_16l3bnl_39._arrowLeft_16l3bnl_99{
     left:-5px;
   }
-._arrow_1l911jk_39._arrowLeft_1l911jk_99 ._arrowShadow_1l911jk_39{
+._arrow_16l3bnl_39._arrowLeft_16l3bnl_99 ._arrowShadow_16l3bnl_39{
       right:-24px;
     }
-._arrow_1l911jk_39._arrowLeft_1l911jk_99 ._arrowShadow_1l911jk_39::before{
+._arrow_16l3bnl_39._arrowLeft_16l3bnl_99 ._arrowShadow_16l3bnl_39::before{
       left:-100%;
     }
-._arrow_1l911jk_39._arrowRight_1l911jk_112{
+._arrow_16l3bnl_39._arrowRight_16l3bnl_112{
     right:-5px;
   }
-._arrow_1l911jk_39._arrowRight_1l911jk_112 ._arrowShadow_1l911jk_39{
+._arrow_16l3bnl_39._arrowRight_16l3bnl_112 ._arrowShadow_16l3bnl_39{
       left:-24px;
     }
-._arrow_1l911jk_39._arrowRight_1l911jk_112 ._arrowShadow_1l911jk_39::before{
+._arrow_16l3bnl_39._arrowRight_16l3bnl_112 ._arrowShadow_16l3bnl_39::before{
       right:-100%;
     }
-._arrowButton_1l911jk_126{
+._arrowButton_16l3bnl_126{
   cursor:pointer;
 }
 
-._separator_ivmndl_3{
+._separator_18den48_3{
   position:relative;
   z-index:2;
 
   width:100%;
 }
 
-  ._separator_ivmndl_3:after{
+  ._separator_18den48_3:after{
     position:absolute;
     right:0;
     bottom:0;
@@ -398,9 +424,9 @@
 
     content:'';
   }
-._light_ivmndl_22:after{
+._light_18den48_22:after{
     background-color:rgba(25,25,28,0.3);
   }
-._dark_ivmndl_28:after{
+._dark_18den48_28:after{
     background-color:rgba(255,255,255,0.4);
   }

package/lib/parts/deep-map.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare function deepMap(children: React.ReactNode, fn: (child: React.ReactNode) => React.ReactNode): (React.ReactChild | React.ReactFragment | React.ReactPortal)[];
+export declare function deepMap(children: React.ReactNode, fn: (child: React.ReactNode) => React.ReactNode): React.ReactNode;

package/lib/parts/deep-map.js

@@ -4,7 +4,8 @@ import React, { isValidElement, cloneElement } from 'react';
 function deepMap(children, fn) {
   var _context;
 
-  return _mapInstanceProperty(_context = React.Children).call(_context, children, function (child, i) {
+  var processChild = function processChild(child) {
+    var i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var returnChild = child;
 
     if (! /*#__PURE__*/isValidElement(returnChild)) {
@@ -19,7 +20,13 @@ function deepMap(children, fn) {
     }
 
     return fn(returnChild);
-  });
+  };
+
+  if ( /*#__PURE__*/isValidElement(children)) {
+    return processChild(children);
+  }
+
+  return _mapInstanceProperty(_context = React.Children).call(_context, children, processChild);
 }
 
 export { deepMap };

package/lib/parts/separator.p.module.css.js

@@ -1,6 +1,6 @@
 var styles = {
-  "separator": "_separator_ivmndl_3",
-  "light": "_light_ivmndl_22",
-  "dark": "_dark_ivmndl_28"
+  "separator": "_separator_18den48_3",
+  "light": "_light_18den48_22",
+  "dark": "_dark_18den48_28"
 };
 export { styles as default };

package/lib/parts/tab-list.p.module.css.js

@@ -1,21 +1,21 @@
 var styles = {
-  "wrapper": "_wrapper_ehodiq_9",
-  "tabsContainer": "_tabsContainer_ehodiq_13",
-  "indicator": "_indicator_ehodiq_19",
-  "light": "_light_ehodiq_31",
-  "classic": "_classic_ehodiq_31",
-  "dark": "_dark_ehodiq_35",
-  "rock": "_rock_ehodiq_39",
-  "tab": "_tab_ehodiq_13",
-  "sizeM": "_sizeM_ehodiq_99",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_ehodiq_1",
-  "sizeL": "_sizeL_ehodiq_104",
-  "innerOffsetM": "_innerOffsetM_ehodiq_109",
-  "innerOffsetL": "_innerOffsetL_ehodiq_117",
-  "short": "_short_ehodiq_133",
-  "selected": "_selected_ehodiq_141",
-  "icon": "_icon_ehodiq_239",
-  "iconLeft": "_iconLeft_ehodiq_253",
-  "iconRight": "_iconRight_ehodiq_261"
+  "wrapper": "_wrapper_ihnvl0_9",
+  "tabsContainer": "_tabsContainer_ihnvl0_13",
+  "indicator": "_indicator_ihnvl0_19",
+  "light": "_light_ihnvl0_31",
+  "classic": "_classic_ihnvl0_31",
+  "dark": "_dark_ihnvl0_35",
+  "rock": "_rock_ihnvl0_39",
+  "tab": "_tab_ihnvl0_13",
+  "sizeM": "_sizeM_ihnvl0_125",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_ihnvl0_1",
+  "sizeL": "_sizeL_ihnvl0_130",
+  "innerOffsetM": "_innerOffsetM_ihnvl0_135",
+  "innerOffsetL": "_innerOffsetL_ihnvl0_143",
+  "short": "_short_ihnvl0_159",
+  "selected": "_selected_ihnvl0_167",
+  "icon": "_icon_ihnvl0_269",
+  "iconLeft": "_iconLeft_ihnvl0_283",
+  "iconRight": "_iconRight_ihnvl0_291"
 };
 export { styles as default };

package/lib/parts/tab.d.ts

@@ -1,17 +1,23 @@
 import React from 'react';
 import { TabListValueType } from './tab-list-context';
 export declare type TabIconPosition = 'left' | 'right';
-export declare type TabProps = {
+export declare type TabExplicitProps = {
     className?: string;
     value?: TabListValueType;
     /** @ignore */
     itemId?: number;
     /** @ignore */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** @ignore */
     onFocus?: React.FocusEventHandler<HTMLElement>;
     /** @ignore */
     onMouseDown?: React.MouseEventHandler<HTMLElement>;
+    /** @ignore */
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
     /** Identifier for e2e tests */
     'data-e2e'?: string;
+    /** Href for link-type Tab */
+    href?: string;
     children?: React.ReactNode;
 } & ({
     /** Additional icon */
@@ -22,5 +28,8 @@ export declare type TabProps = {
     icon?: never;
     iconPosition?: never;
 });
-declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLDivElement>>;
+declare type TabButtonProps = TabExplicitProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare type TabAnchorProps = TabExplicitProps & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare type TabProps = TabButtonProps | TabAnchorProps;
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 export default Tab;

package/lib/parts/tab.js

@@ -5,9 +5,9 @@ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["value", "className", "children", "icon", "iconPosition", "itemId", "onFocus", "onMouseDown", "data-e2e"];
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _excluded = ["value", "className", "children", "icon", "iconPosition", "itemId", "onClick", "onKeyDown", "data-e2e"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -18,6 +18,20 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './tab-list.p.module.css.js';
 import { useTabListContext } from './tab-list-context.js';
+var TabTag = /*#__PURE__*/forwardRef(function (props, ref) {
+  if (typeof props.href !== 'undefined') {
+    return /*#__PURE__*/React.createElement("a", _objectSpread({
+      ref: ref
+    }, props), props.children);
+  }
+
+  return /*#__PURE__*/React.createElement("button", _objectSpread(_objectSpread({
+    ref: ref
+  }, props), {}, {
+    type: "button"
+  }), props.children);
+});
+TabTag.displayName = 'TabTag';
 var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _cn;
 
@@ -28,8 +42,8 @@ var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
       _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
       itemId = _ref.itemId,
-      onFocus = _ref.onFocus,
-      onMouseDown = _ref.onMouseDown,
+      _onClick = _ref.onClick,
+      _onKeyDown = _ref.onKeyDown,
       e2eId = _ref['data-e2e'],
       restProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -41,16 +55,23 @@ var Tab = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var selected = itemId === selectedId;
   var isRenderLeftIcon = icon && iconPosition === 'left';
   var isRenderRightIcon = icon && iconPosition === 'right';
-  return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({}, restProps), {}, {
+  return /*#__PURE__*/React.createElement(TabTag, _objectSpread(_objectSpread({}, restProps), {}, {
     className: cn(styles.tab, (_cn = {}, _defineProperty(_cn, styles.selected, selected), _defineProperty(_cn, styles.short, short), _cn), className),
-    onClick: function onClick() {
-      return onChange(value);
+    onClick: function onClick(e) {
+      if (_onClick) {
+        _onClick(e);
+      }
+
+      onChange(value);
     },
-    onFocus: onFocus,
-    onMouseDown: onMouseDown,
     onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter') {
-        onChange(value);
+      if (e.key === ' ') {
+        e.target.click();
+        e.preventDefault();
+      }
+
+      if (_onKeyDown) {
+        _onKeyDown(e);
       }
     },
     role: "tab",
@@ -72,7 +93,7 @@ Tab.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.symbol, PropTypes.object]),
   'data-e2e': PropTypes.string,
   itemId: PropTypes.number,
-  onFocus: PropTypes.func,
-  onMouseDown: PropTypes.func
+  onClick: PropTypes.func,
+  onKeyDown: PropTypes.func
 };
 export { Tab as default };

package/lib/parts/use-scrollable-list.js

@@ -1,5 +1,22 @@
+import "core-js/modules/web.dom-collections.for-each.js";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import { useRef, useState, useCallback, useMemo, useEffect, cloneElement } from 'react';
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["child", "itemId", "childValue", "ref"],
+    _excluded2 = ["value", "onFocus"];
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.promise.js";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { useRef, useState, useCallback, useMemo, useEffect, cloneElement } from 'react';
 import { deepMap } from './deep-map.js';
 import { useResizeObserver } from './use-resize-observer.js'; // arrow (32) + shadow (10) + shadow blur (~8) + item focus outline (4)
 
@@ -9,16 +26,14 @@ function patchItemIfNeeded(_ref) {
   var child = _ref.child,
       itemId = _ref.itemId,
       childValue = _ref.childValue,
-      onFocus = _ref.onFocus,
-      onMouseDown = _ref.onMouseDown,
-      ref = _ref.ref;
-  return /*#__PURE__*/cloneElement(child, {
+      ref = _ref.ref,
+      restProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/cloneElement(child, _objectSpread({
     itemId: itemId,
     value: childValue,
-    ref: ref,
-    onFocus: onFocus,
-    onMouseDown: onMouseDown
-  });
+    ref: ref
+  }, restProps));
 }
 
 function calculateArrowsVisibility(scrollContainerEl) {
@@ -139,9 +154,12 @@ var useScrollableList = function useScrollableList(_ref2) {
     var currentSelectedItemId = null;
     var items = deepMap(children, function (child) {
       if (child.type === CompareItem) {
-        var childValue = child.props.value || counter;
-        var onFocusFromProps = child.props.onFocus;
-        var onMouseDownFromProps = child.props.onMouseDown;
+        var _child$props = child.props,
+            _child$props$value = _child$props.value,
+            childValue = _child$props$value === void 0 ? counter : _child$props$value,
+            onFocusFromProps = _child$props.onFocus,
+            restProps = _objectWithoutProperties(_child$props, _excluded2);
+
         var hasAlreadySelectedItem = currentSelectedItemId === null;
         var isSelectedItem = hasAlreadySelectedItem && compareValues(value, childValue);
 
@@ -149,10 +167,11 @@ var useScrollableList = function useScrollableList(_ref2) {
           currentSelectedItemId = counter;
         }
 
-        var patchedItem = patchItemIfNeeded({
+        var patchedItem = patchItemIfNeeded(_objectSpread(_objectSpread({
           child: child,
           itemId: counter,
-          childValue: childValue,
+          childValue: childValue
+        }, restProps), {}, {
           onFocus: function onFocus(e) {
             if (onFocusFromProps) {
               onFocusFromProps(e);
@@ -160,23 +179,16 @@ var useScrollableList = function useScrollableList(_ref2) {
 
             _onFocus(e);
           },
-          onMouseDown: function onMouseDown(e) {
-            if (onMouseDownFromProps) {
-              onMouseDownFromProps(e);
-            }
-
-            e.preventDefault();
-          },
           ref: isSelectedItem ? activeNodeRef : null
-        });
+        }));
         counter += 1;
         return patchedItem;
       } else {
         return child;
       }
     });
-    return [items, currentSelectedItemId];
-  }, [children, value, compareValues]),
+    return [React.Children.toArray(items), currentSelectedItemId];
+  }, [children, value, compareValues, _onFocus, CompareItem]),
       _useMemo2 = _slicedToArray(_useMemo, 2),
       childrenWithValues = _useMemo2[0],
       selectedId = _useMemo2[1];
@@ -203,7 +215,7 @@ var useScrollableList = function useScrollableList(_ref2) {
     }
 
     setShowArrows(calculateArrowsVisibility(scrollableRef.current));
-  }, [scrollableRef.current, childrenWithValues.length]);
+  }, []);
   var onPartsResize = useCallback(function () {
     var scrollableEl = scrollableRef.current;
 

package/lib/parts/with-scroll-arrows.js

@@ -86,7 +86,8 @@ var withScrollArrows = function withScrollArrows(WrappedComponent, CompareItem)
       className: styles.arrowShadow
     })), /*#__PURE__*/React.createElement("div", {
       className: styles.scrollable,
-      ref: scrollableRef
+      ref: scrollableRef,
+      tabIndex: -1
     }, /*#__PURE__*/React.createElement(WrappedComponent, _objectSpread({
       selectedId: selectedId,
       activeNodeRef: activeNodeRef,

package/lib/parts/with-scroll-arrows.p.module.css.js

@@ -1,13 +1,13 @@
 var styles = {
-  "wrapper": "_wrapper_1l911jk_4",
-  "scrollable": "_scrollable_1l911jk_10",
-  "arrowShadow": "_arrowShadow_1l911jk_39",
-  "arrow": "_arrow_1l911jk_39",
-  "light": "_light_1l911jk_82",
-  "dark": "_dark_1l911jk_86",
-  "shown": "_shown_1l911jk_91",
-  "arrowLeft": "_arrowLeft_1l911jk_99",
-  "arrowRight": "_arrowRight_1l911jk_112",
-  "arrowButton": "_arrowButton_1l911jk_126"
+  "wrapper": "_wrapper_16l3bnl_4",
+  "scrollable": "_scrollable_16l3bnl_10",
+  "arrowShadow": "_arrowShadow_16l3bnl_39",
+  "arrow": "_arrow_16l3bnl_39",
+  "light": "_light_16l3bnl_82",
+  "dark": "_dark_16l3bnl_86",
+  "shown": "_shown_16l3bnl_91",
+  "arrowLeft": "_arrowLeft_16l3bnl_99",
+  "arrowRight": "_arrowRight_16l3bnl_112",
+  "arrowButton": "_arrowButton_16l3bnl_126"
 };
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/tab-list",
-  "version": "0.7.14",
+  "version": "0.8.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,8 +17,8 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.14.0",
     "@juggle/resize-observer": "3.3.0",
-    "@rescui/button": "^0.7.3",
-    "@rescui/icons": "^0.10.1",
+    "@rescui/button": "^0.7.5",
+    "@rescui/icons": "^0.10.3",
     "classnames": "^2.2.6",
     "core-js": "^3.9.1"
   },
@@ -28,14 +28,14 @@
     "react": ">=16.8.0 <18"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.1.4",
+    "@rescui/colors": "^0.1.5",
     "@rescui/postcss-preset-library": "^0.1.0",
     "@rescui/scripts": "^0.1.7",
-    "@rescui/typography": "^0.8.1",
-    "@rescui/visual-regression": "^0.0.3"
+    "@rescui/typography": "^0.8.3",
+    "@rescui/visual-regression": "^0.0.4"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
-  "gitHead": "aa6b3b338448baec01555e65c3f6499d37d66307"
+  "gitHead": "20a2d86279a96ad1375a69513d550bdc983f9616"
 }