npm - @atom-learning/components - Versions diffs - 3.27.0-beta.5 → 3.27.0 - Mend

@atom-learning/components 3.27.0-beta.5 → 3.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

package/dist/components/side-bar/SideBarComponents.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 export declare const SideBarHeader: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
     sm: string;
     md: string;
@@ -1100,7 +1100,7 @@ export declare const SideBarFooter: import("@stitches/react/types/styled-compone
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare const StyledSideBarBrand: import("@stitches/react/types/styled-component").StyledComponent<"a", {}, {
+export declare const SideBarBrand: import("@stitches/react/types/styled-component").StyledComponent<"a", {}, {
     sm: string;
     md: string;
     lg: string;
@@ -1467,10 +1467,9 @@ declare const StyledSideBarBrand: import("@stitches/react/types/styled-component
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-export declare const SideBarBrand: ({ href, target, ...props }: React.ComponentProps<typeof StyledSideBarBrand>) => JSX.Element;
 export declare const SideBarBrandLogo: {
-    (props: Omit<Pick<Omit<Pick<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof React.ImgHTMLAttributes<HTMLImageElement>> & {
-        ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
+    (props: Omit<Pick<Omit<Pick<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement>> & {
+        ref?: ((instance: HTMLImageElement | null) => void) | import("react").RefObject<HTMLImageElement> | null | undefined;
     }, "css" | "fluid"> & import("@stitches/react/types/styled-component").TransformProps<{
         fluid?: boolean | "true" | undefined;
     }, {
@@ -1841,13 +1840,13 @@ export declare const SideBarBrandLogo: {
                 marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
-    }, "css" | "key" | keyof React.ImgHTMLAttributes<HTMLImageElement> | "fluid">, "as"> & {
+    }, "css" | "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement> | "fluid">, "as"> & {
         as?: undefined;
     }): JSX.Element;
     displayName: string;
 };
-export declare const SideBarBrandName: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof React.HTMLAttributes<HTMLParagraphElement>> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
+export declare const SideBarBrandName: import("@stitches/react/types/styled-component").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof import("react").HTMLAttributes<HTMLParagraphElement>> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
 }, "size" | "css" | "noCapsize"> & import("@stitches/react/types/styled-component").TransformProps<{
     size?: "sm" | "md" | "lg" | "xl" | "xs" | undefined;
     noCapsize?: boolean | "true" | undefined;
@@ -2220,7 +2219,7 @@ export declare const SideBarBrandName: import("@stitches/react/types/styled-comp
         };
     }> | undefined;
 }, "as"> & {
-    as?: React.ElementType<any> | React.ComponentType<{}> | undefined;
+    as?: import("react").ElementType<any> | import("react").ComponentType<{}> | undefined;
 }>, {}, {
     sm: string;
     md: string;
@@ -2588,4 +2587,3 @@ export declare const SideBarBrandName: import("@stitches/react/types/styled-comp
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-export {};

package/dist/components/side-bar/SideBarComponents.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as a from"react";import{useRouter as i}from"../../context/router/index.js";import{styled as e}from"../../stitches.js";import{Image as n}from"../image/Image.js";import{Text as p}from"../text/Text.js";const m=e("div",{borderBottom:"1px solid $border",p:"$4",width:"100%"}),f=e("div",{flexGrow:1,overflowY:"auto",overflowX:"hidden",p:"$4",width:"100%"}),s=e("div",{borderTop:"1px solid $border",p:"$4",width:"100%"}),l=e("a",{alignItems:"flex-end",color:"$text",display:"flex",gap:"$4",textDecoration:"none","&:hover, &:focus":{textDecoration:"none"}}),c=({href:o,target:r,...t})=>{const{RouterLink:d}=i({href:o,target:r});return a.createElement(l,{as:d,href:o,target:r,...t})},x=n,B=e(p,{color:"$text",whiteSpace:"nowrap"});export{f as SideBarBody,c as SideBarBrand,x as SideBarBrandLogo,B as SideBarBrandName,s as SideBarFooter,m as SideBarHeader};
+import{styled as o}from"../../stitches.js";import{Image as e}from"../image/Image.js";import{Text as r}from"../text/Text.js";const d=o("div",{borderBottom:"1px solid $border",p:"$4",width:"100%"}),t=o("div",{flexGrow:1,overflowY:"auto",overflowX:"hidden",p:"$4",width:"100%"}),i=o("div",{borderTop:"1px solid $border",p:"$4",width:"100%"}),a=o("a",{alignItems:"flex-end",color:"$text",display:"flex",gap:"$4",textDecoration:"none","&:hover, &:focus":{textDecoration:"none"}}),n=e,p=o(r,{color:"$text",whiteSpace:"nowrap"});export{t as SideBarBody,a as SideBarBrand,n as SideBarBrandLogo,p as SideBarBrandName,i as SideBarFooter,d as SideBarHeader};
 //# sourceMappingURL=SideBarComponents.js.map

package/dist/components/side-bar/SideBarComponents.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideBarComponents.js","sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ~~useRouter } from '~/context/router'\nimport {~~ styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\nexport const SideBarHeader = styled('div', {\n borderBottom: '1px solid $border',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarBody = styled('div', {\n flexGrow: 1,\n overflowY: 'auto',\n overflowX: 'hidden',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarFooter = styled('div', {\n borderTop: '1px solid $border',\n p: '$4',\n width: '100%'\n})\n\~~nconst~~ ~~StyledSideBarBrand~~ = styled('a', {\n alignItems: 'flex-end',\n color: '$text',\n display: 'flex',\n gap: '$4',\n textDecoration: 'none',\n '&:hover, &:focus': {\n textDecoration: 'none'\n }\n})\~~nexport const SideBarBrand = ({\~~n ~~href,\n target,\n ...props~~\n}: React.ComponentProps<typeof StyledSideBarBrand>) => {\n const { RouterLink } = useRouter({ href, target })\n return (\n <StyledSideBarBrand\n as={RouterLink}\n href={href}\n target={target}\n {...props}\n />\n )\n}\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n color: '$text',\n whiteSpace: 'nowrap'\n})\n"],"names":["SideBarHeader","styled","SideBarBody","SideBarFooter","~~StyledSideBarBrand","~~SideBarBrand","~~href","target","props","RouterLink","useRouter","React","~~SideBarBrandLogo","Image","SideBarBrandName","Text"],"mappings":"~~8MAQa~~,MAAAA,EAAgBC,EAAO,MAAO,CACzC,aAAc,oBACd,EAAG,KACH,MAAO,MACT,CAAC,EAEYC,EAAcD,EAAO,MAAO,CACvC,SAAU,EACV,UAAW,OACX,UAAW,SACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYE,EAAgBF,EAAO,MAAO,CACzC,UAAW,oBACX,EAAG,KACH,MAAO,MACT,CAAC,~~EAEKG~~,~~EAAqBH~~,EAAO,IAAK,~~CACrC~~,WAAY,WACZ,MAAO,QACP,QAAS,OACT,IAAK,KACL,eAAgB,OAChB,mBAAoB,CAClB,eAAgB,MAClB,CACF,CAAC,~~EACYI~~,EAAe,CAAC,CAC3B,KAAAC,EACA,OAAAC,KACGC,CACL,IAAuD,CACrD,KAAM,CAAE,WAAAC,CAAW,EAAIC,EAAU,CAAE,KAAAJ,EAAM,OAAAC,CAAO,CAAC,EACjD,OACEI,EAAA,cAACP,EAAA,CACC,GAAIK,EACJ,KAAMH,EACN,OAAQC,EACP,GAAGC,CACN,CAAA,CAEJ,EAEaI,EAAmBC,EAEnBC,~~EAAmBb~~,~~EAAOc~~,EAAM,CAC3C,MAAO,QACP,WAAY,QACd,CAAC"}
1	+ {"version":3,"file":"SideBarComponents.js","sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\nexport const SideBarHeader = styled('div', {\n borderBottom: '1px solid $border',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarBody = styled('div', {\n flexGrow: 1,\n overflowY: 'auto',\n overflowX: 'hidden',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarFooter = styled('div', {\n borderTop: '1px solid $border',\n p: '$4',\n width: '100%'\n})\n\nexport const SideBarBrand = styled('a', {\n alignItems: 'flex-end',\n color: '$text',\n display: 'flex',\n gap: '$4',\n textDecoration: 'none',\n '&:hover, &:focus': {\n textDecoration: 'none'\n }\n})\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n color: '$text',\n whiteSpace: 'nowrap'\n})\n"],"names":["SideBarHeader","styled","SideBarBody","SideBarFooter","SideBarBrand","SideBarBrandLogo","Image","SideBarBrandName","Text"],"mappings":"4HAKa,MAAAA,EAAgBC,EAAO,MAAO,CACzC,aAAc,oBACd,EAAG,KACH,MAAO,MACT,CAAC,EAEYC,EAAcD,EAAO,MAAO,CACvC,SAAU,EACV,UAAW,OACX,UAAW,SACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYE,EAAgBF,EAAO,MAAO,CACzC,UAAW,oBACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYG,EAAeH,EAAO,IAAK,CACtC,WAAY,WACZ,MAAO,QACP,QAAS,OACT,IAAK,KACL,eAAgB,OAChB,mBAAoB,CAClB,eAAgB,MAClB,CACF,CAAC,EAEYI,EAAmBC,EAEnBC,EAAmBN,EAAOO,EAAM,CAC3C,MAAO,QACP,WAAY,QACd,CAAC"}

package/dist/components/stepper/Stepper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import c from"invariant";import*as p from"react";import{Box as h}from"../box/Box.js";import{StepperProvider as C}from"./stepper-context/StepperContext.js";import{StepperStepBack as f}from"./StepperStepBack.js";import{StepperStepForward as w}from"./StepperStepForward.js";import{StepperSteps as b}from"./StepperSteps.js";const r=({children:s,stepCount:o,allowSkip:n,onComplete:i,onStepChange:l,direction:a="horizontal",steps:e,hideLabels:m=!1,showCompletedIcons:d=!1,css:S})=>{c(!(o&&e),"`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");const t=(e==null?void 0:e.length)||o||0;return p.createElement(C,{stepCount:t,allowSkip:n,onComplete:i,onStepChange:o?l:void 0,direction:a,steps:e||Array(t).fill(""),hideLabels:m,showCompletedIcons:d},p.createElement(h,{"aria-label":"progress",css:{width:"100%",...S}},s))},u=Object.assign(r,{StepBack:f,StepForward:w,Steps:b});r.displayName="Stepper";export{u as Stepper};
+import c from"invariant";import*as p from"react";import{Box as h}from"../box/Box.js";import{StepperProvider as C}from"./stepper-context/StepperContext.js";import{StepperStepBack as f}from"./StepperStepBack.js";import{StepperStepForward as w}from"./StepperStepForward.js";import{StepperSteps as b}from"./StepperSteps.js";const r=({children:s,stepCount:o,allowSkip:n,onComplete:i,onStepChange:l,direction:a="horizontal",steps:e,hideLabels:m=!1,showCompletedIcons:d=!1,css:S})=>{c(!(o&&e),"`Stepper` should only be given one of `stepCount` or `steps`. When both are provided, `steps` will be used and `stepCount` will be ignored.");const t=(e==null?void 0:e.length)||o||0;return p.createElement(C,{stepCount:t,allowSkip:n,onComplete:i,onStepChange:o?l:void 0,direction:a,steps:e||Array(t).fill(""),hideLabels:m,showCompletedIcons:d},p.createElement(h,{"aria-label":"progress",css:{width:"100%",...S}},s))},g=Object.assign(r,{StepBack:f,StepForward:w,Steps:b});r.displayName="Stepper";export{g as Stepper};
 //# sourceMappingURL=Stepper.js.map

package/dist/components/table/Table.d.ts CHANGED Viewed

@@ -373,9 +373,11 @@ declare const StyledTable: import("@stitches/react/types/styled-component").Styl
 declare type TableProps = React.ComponentProps<typeof StyledTable> & {
     numberOfStickyColumns?: number;
     scrollContainerCss?: CSS;
+    controlColumnCount?: number;
+    maxRowDepth?: number;
 };
 export declare const Table: {
-    ({ size, corners, numberOfStickyColumns, scrollContainerCss, ...rest }: TableProps): JSX.Element;
+    ({ size, corners, numberOfStickyColumns, scrollContainerCss, controlColumnCount, maxRowDepth, ...rest }: TableProps): JSX.Element;
     displayName: string;
 } & {
     Body: {
@@ -2970,9 +2972,11 @@ export declare const Table: {
             };
         }> | undefined;
     }>;
-    StickyColumnsContainer: ({ children, numberOfStickyColumns, css, ...restProps }: React.PropsWithChildren<{
+    StickyColumnsContainer: ({ children, numberOfStickyColumns, controlColumnCount, maxRowDepth, css, ...restProps }: React.PropsWithChildren<{
         numberOfStickyColumns?: number | undefined;
         css?: CSS | undefined;
+        controlColumnCount?: number | undefined;
+        maxRowDepth?: number | undefined;
     }>) => JSX.Element;
 };
 export {};

package/dist/components/table/Table.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as i from"react";import{styled as p}from"../../stitches.js";import{TableBody as b}from"./TableBody.js";import{TableCell as e}from"./TableCell.js";import{TableFooter as f}from"./TableFooter.js";import{TableFooterCell as r}from"./TableFooterCell.js";import{TableHeader as c}from"./TableHeader.js";import{TableHeaderCell as o}from"./TableHeaderCell.js";import{StyledRow as C,TableRow as u}from"./TableRow.js";import{TableStickyColumnsContainer as a}from"./TableStickyColumnsContainer.js";const y=p("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${e}, ${o}, ${r}`]:{height:"$4",padding:"$1 $3"}},lg:{[`${e}, ${o}, ${r}`]:{height:"$5",padding:"$2 $3"}},xl:{[`${e}, ${o}, ${r}`]:{height:"$6",padding:"$4 $3"}}},corners:{round:{[`${o}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${C}:last-child`]:{[`${e}:first-child`]:{borderBottomLeftRadius:"$0"},[`${e}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),s=({size:m="md",corners:d="round",numberOfStickyColumns:t=0,scrollContainerCss:n,...$})=>{const l=i.createElement(y,{size:m,corners:d,...$});return t?i.createElement(a,{css:n,numberOfStickyColumns:t},l):l},h=Object.assign(s,{Body:b,Cell:e,Footer:f,FooterCell:r,Header:c,HeaderCell:o,Row:u,StickyColumnsContainer:a});s.displayName="Table";export{h as Table};
+import*as a from"react";import{styled as b}from"../../stitches.js";import{TableBody as f}from"./TableBody.js";import{TableCell as o}from"./TableCell.js";import{TableFooter as C}from"./TableFooter.js";import{TableFooterCell as r}from"./TableFooterCell.js";import{TableHeader as u}from"./TableHeader.js";import{TableHeaderCell as e}from"./TableHeaderCell.js";import{StyledRow as h,TableRow as y}from"./TableRow.js";import{TableStickyColumnsContainer as i}from"./TableStickyColumnsContainer.js";const T=b("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${o}, ${e}, ${r}`]:{height:"$4",padding:"$1 $3"}},lg:{[`${o}, ${e}, ${r}`]:{height:"$5",padding:"$2 $3"}},xl:{[`${o}, ${e}, ${r}`]:{height:"$6",padding:"$4 $3"}}},corners:{round:{[`${e}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${h}:last-child`]:{[`${o}:first-child`]:{borderBottomLeftRadius:"$0"},[`${o}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),m=({size:s="md",corners:n="round",numberOfStickyColumns:t=0,scrollContainerCss:d,controlColumnCount:$,maxRowDepth:p,...c})=>{const l=a.createElement(T,{size:s,corners:n,...c});return t?a.createElement(i,{css:d,numberOfStickyColumns:t,controlColumnCount:$,maxRowDepth:p},l):l},g=Object.assign(m,{Body:f,Cell:o,Footer:C,FooterCell:r,Header:u,HeaderCell:e,Row:y,StickyColumnsContainer:i});m.displayName="Table";export{g as Table};
 //# sourceMappingURL=Table.js.map

package/dist/components/table/Table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { StyledRow, TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n borderCollapse: 'separate',\n borderSpacing: 0,\n fontFamily: '$sans',\n fontSize: '$sm',\n width: '100%',\n variants: {\n size: {\n md: {\n [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n height: '$4',\n padding: '$1 $3'\n }\n },\n lg: {\n [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n height: '$5',\n padding: '$2 $3'\n }\n },\n xl: {\n [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n height: '$6',\n padding: '$4 $3'\n }\n }\n },\n corners: {\n round: {\n [`${TableHeaderCell}`]: {\n '&:first-of-type': { borderTopLeftRadius: '$0' },\n '&:last-of-type': { borderTopRightRadius: '$0' }\n },\n [`${StyledRow}:last-child`]: {\n [`${TableCell}:first-child`]: { borderBottomLeftRadius: '$0' },\n [`${TableCell}:last-child`]: { borderBottomRightRadius: '$0' }\n }\n },\n square: {}\n }\n }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n numberOfStickyColumns?: number\n scrollContainerCss?: CSS\n}\n\nconst TableComponent = ({\n size = 'md',\n corners = 'round',\n numberOfStickyColumns = 0,\n scrollContainerCss,\n ...rest\n}: TableProps) => {\n const tableComponent = <StyledTable size={size} corners={corners} {...rest} />\n\n if (numberOfStickyColumns) {\n return (\n <TableStickyColumnsContainer\n css={scrollContainerCss}\n numberOfStickyColumns={numberOfStickyColumns}\n >\n {tableComponent}\n </TableStickyColumnsContainer>\n )\n }\n\n return tableComponent\n}\n\nexport const Table = Object.assign(TableComponent, {\n Body: TableBody,\n Cell: TableCell,\n Footer: TableFooter,\n FooterCell: TableFooterCell,\n Header: TableHeader,\n HeaderCell: TableHeaderCell,\n Row: TableRow,\n StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"names":["StyledTable","styled","TableCell","TableHeaderCell","TableFooterCell","StyledRow","TableComponent","size","corners","numberOfStickyColumns","scrollContainerCss","rest","tableComponent","React","TableStickyColumnsContainer","Table","TableBody","TableFooter","TableHeader","TableRow"],"mappings":"4eAaA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,SAAU,MACV,MAAO,OACP,SAAU,CACR,KAAM,CACJ,GAAI,CACF,CAAC,GAAGC,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,CACF,EACA,QAAS,CACP,MAAO,CACL,CAAC,GAAGD,KAAoB,CACtB,kBAAmB,CAAE,oBAAqB,IAAK,EAC/C,iBAAkB,CAAE,qBAAsB,IAAK,CACjD,EACA,CAAC,GAAGE,gBAAyB,CAC3B,CAAC,GAAGH,iBAA0B,CAAE,uBAAwB,IAAK,EAC7D,CAAC,GAAGA,gBAAyB,CAAE,wBAAyB,IAAK,CAC/D,CACF,EACA,OAAQ,~~CAAA~~,~~CACV,~~CACF,CACF,CAAC,~~EAOKI~~,EAAiB,CAAC,CACtB,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,EACxB,mBAAAC,KACGC,CACL,IAAkB,CAChB,MAAMC,EAAiBC,EAAA,~~cAACb~~,EAAA,CAAY,KAAMO,EAAM,QAASC,EAAU,~~GAAGG~~,CAAAA,CAAM,EAE5E,~~OAAIF~~,~~EAEAI~~,EAAA,cAACC,EAAA,CACC,~~IAAKJ~~,EACL,sBAAuBD,~~CAEtBG~~,~~EAAAA~~,CACH,EAIGA,CACT,EAEaG,EAAQ,OAAO,~~OAAOT~~,EAAgB,CACjD,~~KAAMU~~,EACN,~~KAAMd~~,EACN,~~OAAQe~~,EACR,~~WAAYb~~,EACZ,~~OAAQc~~,EACR,~~WAAYf~~,EACZ,~~IAAKgB~~,EACL,uBAAwBL,CAC1B,CAAC,~~EAEDR~~,EAAe,YAAc"}
1	+ {"version":3,"file":"Table.js","sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { TableBody } from './TableBody'\nimport { TableCell } from './TableCell'\nimport { TableFooter } from './TableFooter'\nimport { TableFooterCell } from './TableFooterCell'\nimport { TableHeader } from './TableHeader'\nimport { TableHeaderCell } from './TableHeaderCell'\nimport { StyledRow, TableRow } from './TableRow'\nimport { TableStickyColumnsContainer } from './TableStickyColumnsContainer'\n\nconst StyledTable = styled('table', {\n borderCollapse: 'separate',\n borderSpacing: 0,\n fontFamily: '$sans',\n fontSize: '$sm',\n width: '100%',\n variants: {\n size: {\n md: {\n [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n height: '$4',\n padding: '$1 $3'\n }\n },\n lg: {\n [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n height: '$5',\n padding: '$2 $3'\n }\n },\n xl: {\n [`${TableCell}, ${TableHeaderCell}, ${TableFooterCell}`]: {\n height: '$6',\n padding: '$4 $3'\n }\n }\n },\n corners: {\n round: {\n [`${TableHeaderCell}`]: {\n '&:first-of-type': { borderTopLeftRadius: '$0' },\n '&:last-of-type': { borderTopRightRadius: '$0' }\n },\n [`${StyledRow}:last-child`]: {\n [`${TableCell}:first-child`]: { borderBottomLeftRadius: '$0' },\n [`${TableCell}:last-child`]: { borderBottomRightRadius: '$0' }\n }\n },\n square: {}\n }\n }\n})\n\ntype TableProps = React.ComponentProps<typeof StyledTable> & {\n numberOfStickyColumns?: number\n scrollContainerCss?: CSS\n controlColumnCount?: number\n maxRowDepth?: number\n}\n\nconst TableComponent = ({\n size = 'md',\n corners = 'round',\n numberOfStickyColumns = 0,\n scrollContainerCss,\n controlColumnCount,\n maxRowDepth,\n ...rest\n}: TableProps) => {\n const tableComponent = <StyledTable size={size} corners={corners} {...rest} />\n\n if (numberOfStickyColumns) {\n return (\n <TableStickyColumnsContainer\n css={scrollContainerCss}\n numberOfStickyColumns={numberOfStickyColumns}\n controlColumnCount={controlColumnCount}\n maxRowDepth={maxRowDepth}\n >\n {tableComponent}\n </TableStickyColumnsContainer>\n )\n }\n\n return tableComponent\n}\n\nexport const Table = Object.assign(TableComponent, {\n Body: TableBody,\n Cell: TableCell,\n Footer: TableFooter,\n FooterCell: TableFooterCell,\n Header: TableHeader,\n HeaderCell: TableHeaderCell,\n Row: TableRow,\n StickyColumnsContainer: TableStickyColumnsContainer\n})\n\nTableComponent.displayName = 'Table'\n"],"names":["StyledTable","styled","TableCell","TableHeaderCell","TableFooterCell","StyledRow","TableComponent","size","corners","numberOfStickyColumns","scrollContainerCss","controlColumnCount","maxRowDepth","rest","tableComponent","React","TableStickyColumnsContainer","Table","TableBody","TableFooter","TableHeader","TableRow"],"mappings":"4eAaA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,SAAU,MACV,MAAO,OACP,SAAU,CACR,KAAM,CACJ,GAAI,CACF,CAAC,GAAGC,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,EACA,GAAI,CACF,CAAC,GAAGF,MAAcC,MAAoBC,KAAoB,CACxD,OAAQ,KACR,QAAS,OACX,CACF,CACF,EACA,QAAS,CACP,MAAO,CACL,CAAC,GAAGD,KAAoB,CACtB,kBAAmB,CAAE,oBAAqB,IAAK,EAC/C,iBAAkB,CAAE,qBAAsB,IAAK,CACjD,EACA,CAAC,GAAGE,gBAAyB,CAC3B,CAAC,GAAGH,iBAA0B,CAAE,uBAAwB,IAAK,EAC7D,CAAC,GAAGA,gBAAyB,CAAE,wBAAyB,IAAK,CAC/D,CACF,EACA,OAAQ,EACV,CACF,CACF,CAAC,EASKI,EAAiB,CAAC,CACtB,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,mBAAAC,EACA,YAAAC,KACGC,CACL,IAAkB,CAChB,MAAMC,EAAiBC,EAAA,cAACf,EAAA,CAAY,KAAMO,EAAM,QAASC,EAAU,GAAGK,CAAAA,CAAM,EAE5E,OAAIJ,EAEAM,EAAA,cAACC,EAAA,CACC,IAAKN,EACL,sBAAuBD,EACvB,mBAAoBE,EACpB,YAAaC,CAAAA,EAEZE,CACH,EAIGA,CACT,EAEaG,EAAQ,OAAO,OAAOX,EAAgB,CACjD,KAAMY,EACN,KAAMhB,EACN,OAAQiB,EACR,WAAYf,EACZ,OAAQgB,EACR,WAAYjB,EACZ,IAAKkB,EACL,uBAAwBL,CAC1B,CAAC,EAEDV,EAAe,YAAc"}

package/dist/components/table/TableStickyColumnsContainer.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import React from 'react';
 import { CSS } from '../../stitches';
-export declare const TableStickyColumnsContainer: ({ children, numberOfStickyColumns, css, ...restProps }: React.PropsWithChildren<{
+export declare const TableStickyColumnsContainer: ({ children, numberOfStickyColumns, controlColumnCount, maxRowDepth, css, ...restProps }: React.PropsWithChildren<{
     numberOfStickyColumns?: number | undefined;
     css?: CSS | undefined;
+    controlColumnCount?: number | undefined;
+    maxRowDepth?: number | undefined;
 }>) => JSX.Element;

package/dist/components/table/TableStickyColumnsContainer.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import r from"react";import{Box as p}from"../box/Box.js";import{useStickyColumnsCss as u}from"./useStickyColumnsCss.js";const m=({children:n,numberOfStickyColumns:t=0,css:c,...i})=>{const[e,a]=r.useState(!1),o=r.useRef(null),{columnsCss:h}=u(t,o);return r.createElement(p,{onScroll:l=>{const s=l.currentTarget.scrollWidth>l.currentTarget.clientWidth;s!==e&&a(s)},role:"scrollbar",ref:o,css:{overflow:"auto",maxWidth:"100%",...h,[`& td:nth-child(${t}), th:nth-child(${t})`]:{...e&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"}},"& td":{bg:"inherit"},...c},...i},n)};export{m as TableStickyColumnsContainer};
+import o from"react";import{Box as h}from"../box/Box.js";import{useStickyColumnsCss as x}from"./useStickyColumnsCss.js";const C=({children:c,numberOfStickyColumns:t=0,controlColumnCount:s,maxRowDepth:m,css:u,...i})=>{const[r,p]=o.useState(!1),e=o.useRef(null),{columnsCss:a}=x({numberOfStickyColumns:t,wrapperRef:e,controlColumnCount:s,maxRowDepth:m});return o.createElement(h,{onScroll:n=>{const l=n.currentTarget.scrollWidth>n.currentTarget.clientWidth;l!==r&&p(l)},role:"scrollbar",ref:e,css:{overflow:"auto",maxWidth:"100%",...a,[`& td:nth-child(${t}), th:nth-child(${t})`]:{...r&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"}},"& td":{bg:"inherit"},...u},...i},c)};export{C as TableStickyColumnsContainer};
 //# sourceMappingURL=TableStickyColumnsContainer.js.map

package/dist/components/table/TableStickyColumnsContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Box } from '../box'\nimport { useStickyColumnsCss } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n children,\n numberOfStickyColumns = 0,\n css,\n ...restProps\n}: React.PropsWithChildren<{\n numberOfStickyColumns?: number\n css?: CSS\n}>) => {\n const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n const ~~scrollContainerRef~~ = React.useRef(null)\n const { columnsCss } = useStickyColumnsCss(\n numberOfStickyColumns,\n ~~scrollContainerRef~~\n )\n\n const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n const newHasScroll =\n event.currentTarget.scrollWidth > event.currentTarget.clientWidth\n if (newHasScroll !== hasScroll) {\n setHasScroll(newHasScroll)\n }\n }\n\n return (\n <Box\n onScroll={handleScroll}\n role=\"scrollbar\"\n ref={~~scrollContainerRef~~}\n css={{\n overflow: 'auto',\n maxWidth: '100%',\n ...columnsCss,\n [`& td:nth-child(${numberOfStickyColumns}), th:nth-child(${numberOfStickyColumns})`]:\n {\n ...(hasScroll && {\n boxShadow: '$colors$alpha200 -2px -3px 9px 1px',\n clipPath: 'inset(0px -10px 0px 0px)'\n })\n },\n '& td': {\n bg: 'inherit'\n },\n ...css\n }}\n {...restProps}\n >\n {children}\n </Box>\n )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","css","restProps","hasScroll","setHasScroll","React","~~scrollContainerRef~~","columnsCss","useStickyColumnsCss","Box","event","newHasScroll"],"mappings":"wHAOO,MAAMA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,IAAAC,KACGC,CACL,~~IAGO~~,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,~~EAAqBD~~,EAAM,OAAO,IAAI,~~EACtC~~,CAAE,WAAAE,CAAW,EAAIC,~~EACrBR~~,~~EACAM~~,CACF,~~EAUA~~,~~OACED~~,EAAA,cAACI,EAAA,CACC,SAVkBC,GAAyC,CAC7D,MAAMC,EACJD,EAAM,cAAc,YAAcA,EAAM,cAAc,YACpDC,IAAiBR,GACnBC,EAAaO,CAAY,CAE7B,EAKI,KAAK,YACL,IAAKL,EACL,IAAK,CACH,SAAU,OACV,SAAU,OACV,GAAGC,EACH,CAAC,~~kBAAkBP~~,oBAAwCA,MACzD,CACE,~~GAAIG~~,GAAa,CACf,UAAW,qCACX,SAAU,0BACZ,CACF,EACF,OAAQ,CACN,GAAI,SACN,EACA,GAAGF,CACL,EACC,GAAGC,~~CAEHH~~,EAAAA,CACH,CAEJ"}
1	+ {"version":3,"file":"TableStickyColumnsContainer.js","sources":["../../../src/components/table/TableStickyColumnsContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Box } from '../box'\nimport { useStickyColumnsCss } from './useStickyColumnsCss'\n\nexport const TableStickyColumnsContainer = ({\n children,\n numberOfStickyColumns = 0,\n controlColumnCount,\n maxRowDepth,\n css,\n ...restProps\n}: React.PropsWithChildren<{\n numberOfStickyColumns?: number\n css?: CSS\n controlColumnCount?: number\n maxRowDepth?: number\n}>) => {\n const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n const wrapperRef = React.useRef(null)\n const { columnsCss } = useStickyColumnsCss({\n numberOfStickyColumns,\n wrapperRef,\n controlColumnCount,\n maxRowDepth\n })\n\n const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n const newHasScroll =\n event.currentTarget.scrollWidth > event.currentTarget.clientWidth\n if (newHasScroll !== hasScroll) {\n setHasScroll(newHasScroll)\n }\n }\n\n return (\n <Box\n onScroll={handleScroll}\n role=\"scrollbar\"\n ref={wrapperRef}\n css={{\n overflow: 'auto',\n maxWidth: '100%',\n ...columnsCss,\n [`& td:nth-child(${numberOfStickyColumns}), th:nth-child(${numberOfStickyColumns})`]:\n {\n ...(hasScroll && {\n boxShadow: '$colors$alpha200 -2px -3px 9px 1px',\n clipPath: 'inset(0px -10px 0px 0px)'\n })\n },\n '& td': {\n bg: 'inherit'\n },\n ...css\n }}\n {...restProps}\n >\n {children}\n </Box>\n )\n}\n"],"names":["TableStickyColumnsContainer","children","numberOfStickyColumns","controlColumnCount","maxRowDepth","css","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsCss","useStickyColumnsCss","Box","event","newHasScroll"],"mappings":"wHAOO,MAAMA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,YAAAC,EACA,IAAAC,KACGC,CACL,IAKO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,WAAAE,CAAW,EAAIC,EAAoB,CACzC,sBAAAV,EACA,WAAAQ,EACA,mBAAAP,EACA,YAAAC,CACF,CAAC,EAUD,OACEK,EAAA,cAACI,EAAA,CACC,SAVkBC,GAAyC,CAC7D,MAAMC,EACJD,EAAM,cAAc,YAAcA,EAAM,cAAc,YACpDC,IAAiBR,GACnBC,EAAaO,CAAY,CAE7B,EAKI,KAAK,YACL,IAAKL,EACL,IAAK,CACH,SAAU,OACV,SAAU,OACV,GAAGC,EACH,CAAC,kBAAkBT,oBAAwCA,MACzD,CACE,GAAIK,GAAa,CACf,UAAW,qCACX,SAAU,0BACZ,CACF,EACF,OAAQ,CACN,GAAI,SACN,EACA,GAAGF,CACL,EACC,GAAGC,CAEHL,EAAAA,CACH,CAEJ"}

package/dist/components/table/useStickyColumnsCss.d.ts CHANGED Viewed

@@ -3,5 +3,10 @@ import { CSS } from '../../stitches';
 interface IUseStickyColumnsCss {
     columnsCss: CSS;
 }
-export declare const useStickyColumnsCss: (numberOfStickyColumns: number, wrapperRef: React.RefObject<HTMLTableSectionElement>) => IUseStickyColumnsCss;
+export declare const useStickyColumnsCss: ({ numberOfStickyColumns, wrapperRef, controlColumnCount, maxRowDepth }: {
+    numberOfStickyColumns: number;
+    wrapperRef: React.RefObject<HTMLTableSectionElement>;
+    controlColumnCount?: number | undefined;
+    maxRowDepth?: number | undefined;
+}) => IUseStickyColumnsCss;
 export {};

package/dist/components/table/useStickyColumnsCss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as u from"react";const p=(t,n)=>{const[c,l]=u.useState({});return u.useLayoutEffect(()=>{var r;if(!t)return;let o=0;const e=(r=n.current)==null?void 0:r.querySelectorAll("th"),f=Array.from(e||[]).slice(0,t).reduce((d,m,s)=>{const i=s+1,h={...d,[`& td:nth-of-type(${i}), th:nth-of-type(${i})`]:{position:"sticky",left:`${o}px`,minWidth:`${m.offsetWidth}px`,zIndex:"2"}};return o+=(e==null?void 0:e.item(s).clientWidth)||0,h},{});l(f)},[t,n]),{columnsCss:c}};export{p as useStickyColumnsCss};
+import*as l from"react";const a=40,x=8,S=({numberOfStickyColumns:e,wrapperRef:u,controlColumnCount:t=0,maxRowDepth:c})=>{const[y,C]=l.useState({}),f=(o,s)=>{const r=s+1;return t&&r<=t&&!c?a:t&&r<=t&&c?a+c*x:o.offsetWidth},i=l.useCallback(()=>{var o;let s=0;const r=(o=u.current)==null?void 0:o.querySelectorAll("th");return Array.from(r||[]).slice(0,e).reduce((d,m,n)=>{const p=n+1,h={...d,[`& td:nth-of-type(${p}), th:nth-of-type(${p})`]:{position:"sticky",left:t&&n===0?0:`${s}px`,minWidth:`${f(m,n)}px`,zIndex:"2"}};return s+=f(m,n),h},{})},[e,u,t]);return l.useLayoutEffect(()=>{if(!e)return;const o=i();C(o)},[e,u,i]),{columnsCss:y}};export{S as useStickyColumnsCss};
 //# sourceMappingURL=useStickyColumnsCss.js.map

package/dist/components/table/useStickyColumnsCss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '../../stitches'\n\ninterface IUseStickyColumnsCss {\n columnsCss: CSS\n}\n\nexport const useStickyColumnsCss = (\n numberOfStickyColumns: number,\n wrapperRef: React.RefObject<HTMLTableSectionElement>\n): IUseStickyColumnsCss => {\n const [columnsCss, setColumnsCss] = React.useState<CSS>({})\n\n ~~React.useLayoutEffect~~(() => {\n if (!~~numberOfStickyColumns~~) return\n\n let accWidth = 0\n\n // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n const tableHeaderElements = Array.from(tableHeaderCells \|\| [])\n\n // Getting only the number of sticky columns from the elements array that is what we are interested in.\n const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n const newColumnsCss = stickyColumns.reduce((acc: CSS, column, index) => {\n const elementNumber = index + 1\n const cssObject = {\n ...acc,\n [`& td:nth-of-type(${elementNumber}), th:nth-of-type(${elementNumber})`]:\n {\n position: 'sticky',\n left: `${accWidth}px`,\n minWidth: `${column~~.offsetWidth~~}px`, // fixing width for sticky columns\n zIndex: '2'\n }\n }\n\n accWidth += ~~tableHeaderCells?.item~~(index)~~.clientWidth \|\| 0~~\n\n return cssObject\n }, {} as CSS)\n\n setColumnsCss(newColumnsCss)\n }, [numberOfStickyColumns, wrapperRef])\n\n return {\n columnsCss\n }\n}\n"],"names":["useStickyColumnsCss","numberOfStickyColumns","wrapperRef","columnsCss","setColumnsCss","React","_a","~~accWidth~~","~~tableHeaderCells~~","~~newColumnsCss~~","~~acc~~","~~column~~","~~index~~","~~elementNumber~~","cssObject"],"mappings":"~~wBAQO~~,MAAMA,EAAsB,~~CACjCC~~,~~EACAC~~,~~IACyB~~,~~CACzB~~,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAc,~~EAAE~~,~~EAE1D~~,~~OAAAA~~,~~EAAM~~,~~gBAAgB~~,~~IAAM~~,~~CAd9B~~,~~IAAAC~~,~~EAeI~~,~~GAAI~~,~~CAACL~~,~~EAAuB~~,~~OAE5B~~,~~IAAIM~~,EAAW,EAGf,MAAMC,GAAmBF,~~EAAAJ~~,EAAW,UAAX,KAAA,~~OAAAI~~,EAAoB,iBAAiB,~~MAMxDG~~,~~EALsB~~,MAAM,~~KAAKD~~,GAAoB,~~EAAE~~,EAGnB,MAAM,~~EAAGP~~,CAAqB,EAEpC,OAAO,~~CAACS~~,~~EAAUC~~,~~EAAQC~~,IAAU,CACtE,~~MAAMC~~,~~EAAgBD~~,EAAQ,~~EACxBE~~,EAAY,CAChB,~~GAAGJ~~,EACH,CAAC,~~oBAAoBG~~,sBAAkCA,MACrD,CACE,SAAU,SACV,~~KAAM~~,~~GAAGN~~,~~MACT~~,SAAU,~~GAAGI~~,~~EAAO~~,~~gBACpB~~,OAAQ,GACV,CACJ,EAEA,~~OAAAJ~~,~~IAAYC~~,~~GAAA~~,~~KAAA~~,~~OAAAA~~,~~EAAkB~~,~~KAAKI~~,~~GAAO~~,~~cAAe~~,~~EAElDE~~,~~CACT~~,EAAG,~~EAAS~~,~~EAEZV~~,~~EAAcK~~,CAAa,CAC7B,EAAG,~~CAACR~~,EAAuBC,~~CAAU~~,CAAC,~~EAE/B~~,CACL,~~WAAAC~~,CACF,CACF"}
1	+ {"version":3,"file":"useStickyColumnsCss.js","sources":["../../../src/components/table/useStickyColumnsCss.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '../../stitches'\n\ninterface IUseStickyColumnsCss {\n columnsCss: CSS\n}\n\nconst CONTROL_ELEMENT_WIDTH = 40\nconst SUBROW_PROGRESSIVE_OFFSET_STEP = 8\n\nexport const useStickyColumnsCss = ({\n numberOfStickyColumns,\n wrapperRef,\n controlColumnCount = 0,\n maxRowDepth\n}: {\n numberOfStickyColumns: number\n wrapperRef: React.RefObject<HTMLTableSectionElement>\n controlColumnCount?: number\n maxRowDepth?: number\n}): IUseStickyColumnsCss => {\n const [columnsCss, setColumnsCss] = React.useState<CSS>({})\n\n const getColumnWidth = (\n column: HTMLTableCellElement,\n columnIndex: number\n ) => {\n const elementNumber = columnIndex + 1\n\n if (\n controlColumnCount &&\n elementNumber <= controlColumnCount &&\n !maxRowDepth\n ) {\n return CONTROL_ELEMENT_WIDTH\n }\n if (\n controlColumnCount &&\n elementNumber <= controlColumnCount &&\n maxRowDepth\n ) {\n return (\n CONTROL_ELEMENT_WIDTH + maxRowDepth * SUBROW_PROGRESSIVE_OFFSET_STEP\n )\n }\n return column.offsetWidth\n }\n\n const generateColumnsCss = React.useCallback(() => {\n let accWidth = 0\n\n // Getting the table header cells elements to use their width to set the left position in the sticky columns.\n const tableHeaderCells = wrapperRef.current?.querySelectorAll('th')\n const tableHeaderElements = Array.from(tableHeaderCells \|\| [])\n\n // Getting only the number of sticky columns from the elements array that is what we are interested in.\n const stickyColumns = tableHeaderElements.slice(0, numberOfStickyColumns)\n\n const newColumnsCss = stickyColumns.reduce((acc: CSS, column, index) => {\n const elementNumber = index + 1\n const cssObject = {\n ...acc,\n [`& td:nth-of-type(${elementNumber}), th:nth-of-type(${elementNumber})`]:\n {\n position: 'sticky',\n left: controlColumnCount && index === 0 ? 0 : `${accWidth}px`,\n minWidth: `${getColumnWidth(column, index)}px`, // fixing width for sticky columns\n zIndex: '2'\n }\n }\n\n accWidth += getColumnWidth(column, index)\n\n return cssObject\n }, {} as CSS)\n\n return newColumnsCss\n }, [numberOfStickyColumns, wrapperRef, controlColumnCount])\n\n React.useLayoutEffect(() => {\n if (!numberOfStickyColumns) return\n const newColumnsCss = generateColumnsCss()\n\n setColumnsCss(newColumnsCss)\n }, [numberOfStickyColumns, wrapperRef, generateColumnsCss])\n\n return {\n columnsCss\n }\n}\n"],"names":["CONTROL_ELEMENT_WIDTH","SUBROW_PROGRESSIVE_OFFSET_STEP","useStickyColumnsCss","numberOfStickyColumns","wrapperRef","controlColumnCount","maxRowDepth","columnsCss","setColumnsCss","React","getColumnWidth","column","columnIndex","elementNumber","generateColumnsCss","_a","accWidth","tableHeaderCells","acc","index","cssObject","newColumnsCss"],"mappings":"wBAQA,MAAMA,EAAwB,GACxBC,EAAiC,EAE1BC,EAAsB,CAAC,CAClC,sBAAAC,EACA,WAAAC,EACA,mBAAAC,EAAqB,EACrB,YAAAC,CACF,IAK4B,CAC1B,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAc,CAAA,CAAE,EAEpDC,EAAiB,CACrBC,EACAC,IACG,CACH,MAAMC,EAAgBD,EAAc,EAEpC,OACEP,GACAQ,GAAiBR,GACjB,CAACC,EAEMN,EAGPK,GACAQ,GAAiBR,GACjBC,EAGEN,EAAwBM,EAAcL,EAGnCU,EAAO,WAChB,EAEMG,EAAqBL,EAAM,YAAY,IAAM,CAjDrD,IAAAM,EAkDI,IAAIC,EAAW,EAGf,MAAMC,GAAmBF,EAAAX,EAAW,UAAX,KAAA,OAAAW,EAAoB,iBAAiB,MAwB9D,OAvB4B,MAAM,KAAKE,GAAoB,CAAA,CAAE,EAGnB,MAAM,EAAGd,CAAqB,EAEpC,OAAO,CAACe,EAAUP,EAAQQ,IAAU,CACtE,MAAMN,EAAgBM,EAAQ,EACxBC,EAAY,CAChB,GAAGF,EACH,CAAC,oBAAoBL,sBAAkCA,MACrD,CACE,SAAU,SACV,KAAMR,GAAsBc,IAAU,EAAI,EAAI,GAAGH,MACjD,SAAU,GAAGN,EAAeC,EAAQQ,CAAK,MACzC,OAAQ,GACV,CACJ,EAEA,OAAAH,GAAYN,EAAeC,EAAQQ,CAAK,EAEjCC,CACT,EAAG,CAAS,CAAA,CAGd,EAAG,CAACjB,EAAuBC,EAAYC,CAAkB,CAAC,EAE1D,OAAAI,EAAM,gBAAgB,IAAM,CAC1B,GAAI,CAACN,EAAuB,OAC5B,MAAMkB,EAAgBP,IAEtBN,EAAca,CAAa,CAC7B,EAAG,CAAClB,EAAuBC,EAAYU,CAAkB,CAAC,EAEnD,CACL,WAAAP,CACF,CACF"}

package/dist/components/tile-interactive/TileInteractive.d.ts CHANGED Viewed

@@ -742,6 +742,8 @@ declare const StyledTileInteractive: import("@stitches/react/types/styled-compon
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type TTileInteractiveProps = React.ComponentProps<typeof StyledTileInteractive> & React.ButtonHTMLAttributes<HTMLButtonElement> & NavigatorActions;
+declare type TTileInteractiveProps = React.ComponentProps<typeof StyledTileInteractive> & {
+    as?: React.ComponentType | React.ElementType;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & NavigatorActions;
 export declare const TileInteractive: React.ForwardRefExoticComponent<TTileInteractiveProps>;
 export {};

package/dist/components/tile-interactive/TileInteractive.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import r from"react";import{Tile as l}from"../tile/Tile.js";import"../flex/Flex.js";import{useRouter as p}from"../../context/router/index.js";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as f}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const d=m.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(l,{"&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{cursor:"pointer",transform:"translateY(0)",transition:"transform 250ms ease","&::after":{content:"",position:"absolute",inset:0,boxShadow:"$2",opacity:0,transition:"opacity 250ms ease-out",borderRadius:"inherit",pointerEvents:"none"},"&:hover":{transform:"translateY(-$space$0)","&::after":{opacity:1}},"&:active":{bg:"$base2"},"&:focus-visible":{...f()}}}),i=r.forwardRef(({onClick:t,href:o,target:e,type:a="button",...s},n)=>{const{RouterLink:c}=p({href:o,target:e});return r.createElement(d,{...s,...o?{as:c,href:o,target:e,onClick:void 0}:{as:"button",type:a,onClick:t},ref:n})});i.displayName="TileInteractive";export{i as TileInteractive};
+import r from"react";import{Tile as l}from"../tile/Tile.js";import"../flex/Flex.js";import{styled as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as p}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const m=c.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(l,{"&[disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([disabled])":{cursor:"pointer",transform:"translateY(0)",transition:"transform 250ms ease","&::after":{content:"",position:"absolute",inset:0,boxShadow:"$2",opacity:0,transition:"opacity 250ms ease-out",borderRadius:"inherit",pointerEvents:"none"},"&:hover":{transform:"translateY(-$space$0)","&::after":{opacity:1}},"&:active":{bg:"$base2"},"&:focus-visible":{...p()}}}),i=r.forwardRef(({onClick:t,href:o,type:a="button",as:e,...s},n)=>r.createElement(m,{...s,...o?{as:e||"a",href:o,onClick:void 0}:{as:e||"button",type:a,onClick:t},ref:n}));i.displayName="TileInteractive";export{i as TileInteractive};
 //# sourceMappingURL=TileInteractive.js.map

package/dist/components/tile-interactive/TileInteractive.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { ~~useRouter } from '~/context/router'\nimport {~~ styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledTileInteractive = styled.withConfig({\n shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Tile, {\n '&[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&:not([disabled])': {\n cursor: 'pointer',\n transform: 'translateY(0)',\n transition: 'transform 250ms ease',\n '&::after': {\n content: '',\n position: 'absolute',\n inset: 0,\n boxShadow: '$2',\n opacity: 0,\n transition: 'opacity 250ms ease-out',\n borderRadius: 'inherit',\n pointerEvents: 'none'\n },\n '&:hover': {\n transform: 'translateY(-$space$0)',\n '&::after': {\n opacity: 1\n }\n },\n '&:active': {\n bg: '$base2'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n }\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n typeof StyledTileInteractive\n> &\n React.ButtonHTMLAttributes<HTMLButtonElement> &\n NavigatorActions\n\nexport const TileInteractive: React.ForwardRefExoticComponent<TTileInteractiveProps> =\n React.forwardRef(\n ({ onClick, href, ~~target,~~ type = 'button', ...rest }, ref) => {\n const { ~~RouterLink }~~ = ~~useRouter({~~ href~~, target })~~\n\n const elementSpecificProps = ~~href~~\n ? { as: ~~RouterLink,~~ ~~href,~~ ~~target,~~ onClick: undefined }\n : { as: 'button' as React.ElementType, type, onClick }\n\n return (\n <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n )\n }\n )\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","propName","Tile","focusVisibleStyleBlock","TileInteractive","React","onClick","href","~~target~~","~~type~~","rest","ref"~~,"RouterLink","useRouter"~~],"mappings":"~~6cAQA~~,MAAMA,EAAwBC,EAAO,WAAW,CAC9C,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,OAAQ,UACR,UAAW,gBACX,WAAY,uBACZ,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,UAAW,KACX,QAAS,EACT,WAAY,yBACZ,aAAc,UACd,cAAe,MACjB,EACA,UAAW,CACT,UAAW,wBACX,WAAY,CACV,QAAS,CACX,CACF,EACA,WAAY,CACV,GAAI,QACN,EACA,kBAAmB,CACjB,GAAGC,~~GACL~~,CACF,CACF,CAAC,~~EAQYC~~,EACXC,EAAM,~~WACJ~~,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,~~OAAAC,EAAQ,~~KAAAC,EAAO,~~YAAaC~~,CAAK,EAAGC,~~IAAQ~~,~~CAC5D,KAAM,CAAE,WAAAC,CAAW,EAAIC,EAAU,CAAE,KAAAN,EAAM,OAAAC,CAAO,CAAC,EAMjD,OACEH,~~EAAA,cAACN,EAAA,CAAuB,GAAGW,EAAO,~~GALPH~~,~~EACzB~~,~~CAAE~~,~~GAAIK~~,~~EAAY~~,~~KAAAL~~,~~EAAM~~,~~OAAAC~~,~~EAAQ,~~QAAS,~~MAAU~~,~~EACnD~~,CAAE,~~GAAI~~,~~SAA+B~~,~~KAAAC~~,EAAM,~~QAAAH~~,CAAQ,~~EAGM~~,IAAKK,CAAAA,CAAK,~~CAEzE~~,~~CACF~~,~~EAEFP,~~EAAgB,YAAc"}
1	+ {"version":3,"file":"TileInteractive.js","sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '~/components/tile'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledTileInteractive = styled.withConfig({\n shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Tile, {\n '&[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n '&:not([disabled])': {\n cursor: 'pointer',\n transform: 'translateY(0)',\n transition: 'transform 250ms ease',\n '&::after': {\n content: '',\n position: 'absolute',\n inset: 0,\n boxShadow: '$2',\n opacity: 0,\n transition: 'opacity 250ms ease-out',\n borderRadius: 'inherit',\n pointerEvents: 'none'\n },\n '&:hover': {\n transform: 'translateY(-$space$0)',\n '&::after': {\n opacity: 1\n }\n },\n '&:active': {\n bg: '$base2'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n }\n})\n\ntype TTileInteractiveProps = React.ComponentProps<\n typeof StyledTileInteractive\n> & {\n as?: React.ComponentType \| React.ElementType\n} & React.ButtonHTMLAttributes<HTMLButtonElement> &\n NavigatorActions\n\nexport const TileInteractive: React.ForwardRefExoticComponent<TTileInteractiveProps> =\n React.forwardRef(({ onClick, href, type = 'button', as, ...rest }, ref) => {\n const isLink = !!href\n const elementSpecificProps = isLink\n ? {\n as: as \|\| ('a' as React.ElementType),\n href,\n onClick: undefined\n }\n : { as: as \|\| ('button' as React.ElementType), type, onClick }\n\n return (\n <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n )\n })\n\nTileInteractive.displayName = 'TileInteractive'\n"],"names":["StyledTileInteractive","styled","propName","Tile","focusVisibleStyleBlock","TileInteractive","React","onClick","href","type","as","rest","ref"],"mappings":"mZAOA,MAAMA,EAAwBC,EAAO,WAAW,CAC9C,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,oBAAqB,CACnB,OAAQ,UACR,UAAW,gBACX,WAAY,uBACZ,WAAY,CACV,QAAS,GACT,SAAU,WACV,MAAO,EACP,UAAW,KACX,QAAS,EACT,WAAY,yBACZ,aAAc,UACd,cAAe,MACjB,EACA,UAAW,CACT,UAAW,wBACX,WAAY,CACV,QAAS,CACX,CACF,EACA,WAAY,CACV,GAAI,QACN,EACA,kBAAmB,CACjB,GAAGC,EAAuB,CAC5B,CACF,CACF,CAAC,EASYC,EACXC,EAAM,WAAW,CAAC,CAAE,QAAAC,EAAS,KAAAC,EAAM,KAAAC,EAAO,SAAU,GAAAC,KAAOC,CAAK,EAAGC,IAW/DN,EAAA,cAACN,EAAA,CAAuB,GAAGW,EAAO,GAVnBH,EAEb,CACE,GAAIE,GAAO,IACX,KAAAF,EACA,QAAS,MACX,EACA,CAAE,GAAIE,GAAO,SAAgC,KAAAD,EAAM,QAAAF,CAAQ,EAGF,IAAKK,CAAAA,CAAK,CAExE,EAEHP,EAAgB,YAAc"}

package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts CHANGED Viewed

@@ -743,6 +743,8 @@ declare const StyledTileToggleGroupItem: import("@stitches/react/types/styled-co
             marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
         };
     }> | undefined;
+} & {
+    as?: React.ElementType<any> | React.ComponentType<{}> | undefined;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../types").NavigatorActions>, {}, {
     sm: string;
     md: string;