@atom-learning/components 2.29.1 → 2.30.0

package/dist/components/tabs/TabsTriggerList.d.ts

@@ -1,12 +1,6 @@
 import React from 'react';
-interface ListProps extends React.ComponentProps<typeof StyledTriggerList> {
-    enableTabScrolling?: boolean;
-    scrollPercentage?: number;
-}
-declare const StyledTriggerList: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>>, {
-    theme?: "dark" | "light" | undefined;
-    appearance?: "uppercase" | undefined;
-}, {
+import { ColorScheme } from '../../experiments/color-scheme';
+declare const StyledTriggerList: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -272,5 +266,7 @@ declare const StyledTriggerList: import("@stitches/react/types/styled-component"
         };
     };
 }>>;
-export declare const TriggerListWrapper: React.FC<ListProps>;
+export declare const TabsTriggerList: React.FC<React.ComponentProps<typeof StyledTriggerList> & {
+    colorScheme?: typeof ColorScheme;
+}>;
 export {};

package/dist/components/tabs/TabsTriggerList.js

@@ -1 +1 @@
-import{ChevronLeft as P,ChevronRight as R}from"@atom-learning/icons";import{List as _}from"@radix-ui/react-tabs";import{opacify as y}from"color2k";import o,{useRef as F,useState as f,useCallback as J,useEffect as k}from"react";import{debounce as K}from"throttle-debounce";import{ActionIcon as M}from"../action-icon/ActionIcon.js";import{Flex as X}from"../flex/Flex.js";import{Icon as W}from"../icon/Icon.js";import{theme as j,styled as x}from"../../stitches.js";import{TabTrigger as L}from"./TabTrigger.js";import{passPropsToChildren as C}from"./utils.js";const q=y("white",-.2),G=y(j.colors.primaryDark.value,-.2),T=x(M,{position:"absolute",transition:"all 125ms",variants:{theme:{light:{bg:`${q} !important`},dark:{bg:`${G} !important`,color:"currentColor !important"}},visible:{true:{opacity:1,visibility:"visible",pointerEvents:"all"},false:{opacity:0,visibility:"hidden",pointerEvents:"none"}}}}),S=x(_,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none",variants:{theme:{light:{borderBottom:"1px solid $tonal300"},dark:{bg:"$primaryDark",borderBottom:"1px solid $tonal200"}},appearance:{uppercase:{"& button":{textTransform:"uppercase"}}}}}),H=({children:h,theme:i,appearance:d,enableTabScrolling:$,scrollPercentage:z=10,...b})=>{const s=F(null),[u,a]=f(!1),[v,c]=f(!1),[D,I]=f(),g=J(t=>{const e=s.current;if(e){const{scrollWidth:l,scrollLeft:n,offsetWidth:m}=e,E=Math.round(l*(z/100));let p=n;if(t==="right"){const r=n+E;p=r+m<=l?r:l-m}else{const r=n-E;p=r>0?r:0}e.scroll({left:p,behavior:"smooth"}),setTimeout(()=>{const{scrollWidth:r,scrollLeft:w,offsetWidth:A}=e,B=r-(w+A);w===0?(a(!1),c(!0)):B<5?(c(!1),a(!0)):(a(!0),c(!0))},500)}},[]);return k(()=>{const t=K(500,()=>{I(window.innerWidth)});return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[]),k(()=>{var t;const e=s.current;if(e){const{offsetWidth:l,scrollWidth:n}=e,m=n>l;(t=e.scroll)==null||t.call(e,{left:0}),a(!1),c(m)}},[D]),u||v||$?o.createElement(X,{css:{position:"relative"}},o.createElement(T,{size:"lg",label:"Scroll Left",theme:i,onClick:()=>g("left"),visible:u,css:{left:0}},o.createElement(W,{is:P})),o.createElement(S,{...b,ref:s,appearance:d,theme:i},C(h,{theme:i},[L])),o.createElement(T,{size:"lg",label:"Scroll right",theme:i,onClick:()=>g("right"),visible:v,css:{right:0}},o.createElement(W,{is:R}))):o.createElement(S,{theme:i,...b,appearance:d,ref:s},C(h,{theme:i},[L]))};export{H as TriggerListWrapper};
+import{List as y}from"@radix-ui/react-tabs";import e from"react";import{styled as m}from"../../stitches.js";import{useWindowSize as T}from"../../utilities/hooks/useWindowSize.js";import{useCallbackRefState as x}from"../../utilities/hooks/useCallbackRef.js";import{ActionIcon as z}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";import{ChevronLeft as $,ChevronRight as R}from"@atom-learning/icons";import{ColorScheme as I}from"../../experiments/color-scheme/ColorScheme.js";const N=m(I,{position:"relative",borderBottom:"1px solid $base3",width:"100%"}),_=m(y,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none"}),u=m(z,{height:"100% !important",position:"absolute",top:"50%",transform:"translateY(-50%)",cursor:"pointer",background:"$background !important",color:"$interactive1 !important",borderRadius:0,opacity:.9}),A=10,b=({children:g,colorScheme:v={},...C})=>{const[t,k]=x(),{width:W}=T(),[w,i]=e.useState(!1),[E,s]=e.useState(!1),f=e.useCallback(c=>{if(!t)return;const{scrollWidth:r,scrollLeft:l,offsetWidth:a}=t,h=Math.round(r*(A/100));let n=l;if(c==="right"){const o=l+h;n=o+a<=r?o:r-a}else{const o=l-h;n=o>0?o:0}t.scroll({left:n,behavior:"smooth"}),setTimeout(()=>{const{scrollWidth:o,scrollLeft:d,offsetWidth:L}=t,S=o-(d+L);d===0?(i(!1),s(!0)):S<5?(s(!1),i(!0)):(i(!0),s(!0))},500)},[t]);return e.useEffect(()=>{var c;if(!t)return;const{offsetWidth:r,scrollWidth:l}=t,a=l>r;(c=t.scroll)==null||c.call(t,{left:0}),i(!1),s(a)},[t,W]),e.createElement(N,{base:"slate",accent:"blue",interactive:"hiContrast1",...v,...C},w&&e.createElement(u,{label:"scroll left",size:"md",css:{left:0},onClick:()=>f("left")},e.createElement(p,{is:$})),e.createElement(_,{ref:k},g),E&&e.createElement(u,{label:"scroll right",size:"md",css:{right:0},onClick:()=>f("right")},e.createElement(p,{is:R})))};b.displayName="TabsTriggerList";export{b as TabsTriggerList};