@atom-learning/components 2.67.2 → 2.69.0

package/CHANGELOG.md

@@ -1,12 +1,10 @@
-## [2.67.2](https://github.com/Atom-Learning/components/compare/v2.67.1...v2.67.2) (2023-09-14)
+# [2.69.0](https://github.com/Atom-Learning/components/compare/v2.68.0...v2.69.0) (2023-09-22)
 
 
-### Bug Fixes
+### Features
 
-* actually fix DateInput and make it behave like a regular FormField when used within a Form ([cc10c9d](https://github.com/Atom-Learning/components/commit/cc10c9d702e069b8a51c23915ad8397e08575638))
-* better test for DateInput onChange ([be1d3b2](https://github.com/Atom-Learning/components/commit/be1d3b2d19c06a0816de68d318a3f2918e544c5f))
-* DateInput controlled input combined with form validation glitching ([f995f59](https://github.com/Atom-Learning/components/commit/f995f592606786bcd9a0cf98b535f315862808a0))
-* get DateInput onChange to trigger only onChange as a regular handler would rather than onStateChange ([85fcd4c](https://github.com/Atom-Learning/components/commit/85fcd4c97e9b858bb5c14a1ee605d73a37509313))
+* added spacer component ([1e3542b](https://github.com/Atom-Learning/components/commit/1e3542bfee0ba30784ed6f6d8d2d2ad29c7c4b11))
+* update Toast to allow for custom UI ([b6e3ebf](https://github.com/Atom-Learning/components/commit/b6e3ebf69271516c96e6156bb46a5d7238c5928a))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/data-table/DataTableHead.d.ts

@@ -1,7 +1,10 @@
 import * as React from 'react';
+import { CSS } from '../../stitches';
 import { Table } from '../table';
 declare type DataTableHeadProps = Omit<React.ComponentProps<typeof Table.Header>, 'children'> & {
     sortable?: boolean;
+    isSticky?: boolean;
+    headerCss?: CSS;
 };
 export declare const DataTableHead: React.FC<DataTableHeadProps>;
 export {};

package/dist/components/data-table/DataTableHead.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Table as t}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as i}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as p}from"./DataTableContext.js";import{DataTable as b}from"./DataTable.js";const h=({sortable:a=!0,theme:m="light",...s})=>{const{getHeaderGroups:c,setIsSortable:r,enableRowSelection:n,getCanSomeRowsExpand:d}=p();return e.useEffect(()=>{r(a)},[a,r]),e.createElement(t.Header,{theme:m,...s},c().map(l=>e.createElement(t.Row,{key:l.id},d()&&e.createElement(t.HeaderCell,{css:{width:"$4"}}),n&&e.createElement(t.HeaderCell,{css:{width:"$4"}},e.createElement(i,null)),l.headers.map(o=>e.createElement(b.HeaderCell,{header:o,key:o.id})))))};export{h as DataTableHead};
+import*as e from"react";import{Table as t}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as p}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as b}from"./DataTableContext.js";import{DataTable as h}from"./DataTable.js";const E=({sortable:a=!0,theme:o="light",isSticky:s=!1,...c})=>{const{getHeaderGroups:i,setIsSortable:r,enableRowSelection:n,getCanSomeRowsExpand:d}=b();return e.useEffect(()=>{r(a)},[a,r]),e.createElement(t.Header,{theme:o,isSticky:s,...c},i().map(l=>e.createElement(t.Row,{key:l.id},d()&&e.createElement(t.HeaderCell,{css:{width:"$4"}}),n&&e.createElement(t.HeaderCell,{css:{width:"$4"}},e.createElement(p,null)),l.headers.map(m=>e.createElement(h.HeaderCell,{header:m,key:m.id})))))};export{E as DataTableHead};
 //# sourceMappingURL=DataTableHead.js.map

package/dist/components/data-table/DataTableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n}\n\nexport const DataTableHead: React.FC<DataTableHeadProps> = ({\n  sortable = true,\n  theme = 'light',\n  ...props\n}) => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  return (\n    <Table.Header theme={theme} {...props}>\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row key={headerGroup.id}>\n            {getCanSomeRowsExpand() && (\n              <Table.HeaderCell css={{ width: '$4' }} />\n            )}\n            {enableRowSelection && (\n              <Table.HeaderCell css={{ width: '$4' }}>\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header) => (\n              <DataTable.HeaderCell header={header} key={header.id} />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","props","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","useDataTable","React","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"uPAaa,MAAAA,EAA8C,CAAC,CAC1D,SAAAC,EAAW,GACX,MAAAC,EAAQ,WACLC,CACL,IAAM,CACJ,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,CACF,EAAIC,IAEJ,OAAAC,EAAM,UAAU,IAAM,CACpBJ,EAAcJ,CAAQ,CACxB,EAAG,CAACA,EAAUI,CAAa,CAAC,EAG1BI,EAAA,cAACC,EAAM,OAAN,CAAa,MAAOR,EAAQ,GAAGC,CAC7BC,EAAAA,EAAkB,EAAA,IAAKO,GAEpBF,EAAA,cAACC,EAAM,IAAN,CAAU,IAAKC,EAAY,EACzBJ,EAAAA,KACCE,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAG,CAAA,EAEzCJ,GACCG,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CACnCD,EAAAA,EAAA,cAACG,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAKE,GACxBJ,EAAA,cAACK,EAAU,WAAV,CAAqB,OAAQD,EAAQ,IAAKA,EAAO,EAAI,CAAA,CACvD,CACH,CAEH,CACH,CAEJ"}
+{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  headerCss?: CSS\n}\n\nexport const DataTableHead: React.FC<DataTableHeadProps> = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  ...props\n}) => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  return (\n    <Table.Header theme={theme} isSticky={isSticky} {...props}>\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row key={headerGroup.id}>\n            {getCanSomeRowsExpand() && (\n              <Table.HeaderCell css={{ width: '$4' }} />\n            )}\n            {enableRowSelection && (\n              <Table.HeaderCell css={{ width: '$4' }}>\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header) => (\n              <DataTable.HeaderCell header={header} key={header.id} />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","props","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","useDataTable","React","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"uPAiBa,MAAAA,EAA8C,CAAC,CAC1D,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,MACRC,CACL,IAAM,CACJ,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,CACF,EAAIC,EAAa,EAEjB,OAAAC,EAAM,UAAU,IAAM,CACpBJ,EAAcL,CAAQ,CACxB,EAAG,CAACA,EAAUK,CAAa,CAAC,EAG1BI,EAAA,cAACC,EAAM,OAAN,CAAa,MAAOT,EAAO,SAAUC,EAAW,GAAGC,CACjDC,EAAAA,EAAkB,EAAA,IAAKO,GAEpBF,EAAA,cAACC,EAAM,IAAN,CAAU,IAAKC,EAAY,EACzBJ,EAAAA,EAAAA,GACCE,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAG,CAAA,EAEzCJ,GACCG,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAA,EACnCD,EAAA,cAACG,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAKE,GACxBJ,EAAA,cAACK,EAAU,WAAV,CAAqB,OAAQD,EAAQ,IAAKA,EAAO,EAAI,CAAA,CACvD,CACH,CAEH,CACH,CAEJ"}

package/dist/components/data-table/DataTableTable.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { Table } from '../table';
 import { DataTable } from './DataTable';
-export declare type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children'> & Partial<Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>>;
+export declare type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children'> & Partial<Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable' | 'headerCss'>> & Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>> & {
+    hasStickyHeader?: boolean;
+};
 export declare const DataTableTable: React.FC<DataTableTableProps>;

package/dist/components/data-table/DataTableTable.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Table as p}from"../table/Table.js";import{DataTable as a}from"./DataTable.js";import{AsyncDataState as b}from"./DataTable.types.js";import{useDataTable as u}from"./DataTableContext.js";import{DataTableLoading as f}from"./DataTableLoading.js";const y=({sortable:r,striped:o,theme:m,css:n,numberOfStickyColumns:l=0,...s})=>{const{asyncDataState:i,getTotalRows:c}=u(),t=i===b.PENDING;return!t&&c()===0?null:e.createElement(e.Fragment,null,e.createElement(f,null),e.createElement(p,{...s,numberOfStickyColumns:l,css:{...n,...t&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(a.Head,{theme:m,sortable:r}),e.createElement(a.Body,{striped:o})))};export{y as DataTableTable};
+import*as e from"react";import{Table as u}from"../table/Table.js";import{DataTable as a}from"./DataTable.js";import{AsyncDataState as y}from"./DataTable.types.js";import{useDataTable as f}from"./DataTableContext.js";import{DataTableLoading as d}from"./DataTableLoading.js";const D=({sortable:r,striped:o,theme:s,css:m,numberOfStickyColumns:n=0,hasStickyHeader:l=!1,headerCss:i,...c})=>{const{asyncDataState:p,getTotalRows:b}=f(),t=p===y.PENDING;return!t&&b()===0?null:e.createElement(e.Fragment,null,e.createElement(d,null),e.createElement(u,{...c,numberOfStickyColumns:n,css:{...m,...t&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(a.Head,{theme:s,sortable:r,isSticky:l,css:i}),e.createElement(a.Body,{striped:o})))};export{D as DataTableTable};
 //# sourceMappingURL=DataTableTable.js.map

package/dist/components/data-table/DataTableTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>>\n\nexport const DataTableTable: React.FC<DataTableTableProps> = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  numberOfStickyColumns = 0,\n  ...props\n}) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={numberOfStickyColumns}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head theme={theme} sortable={sortable} />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","numberOfStickyColumns","props","asyncDataState","getTotalRows","useDataTable","isPending","AsyncDataState","React","DataTableLoading","Table","DataTable"],"mappings":"iRAiBa,MAAAA,EAAgD,CAAC,CAC5D,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,sBAAAC,EAAwB,KACrBC,CACL,IAAM,CACJ,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAAa,EAChDC,EAAYH,IAAmBI,EAAe,QAGpD,MAFgB,CAACD,GAAaF,EAAa,IAAM,EAE7B,KAGlBI,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGR,EACJ,sBAAuBD,EACvB,IAAK,CACH,GAAGD,EACH,GAAIM,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,GAEAE,EAAA,cAACG,EAAU,KAAV,CAAe,MAAOZ,EAAO,SAAUF,CAAAA,CAAU,EAClDW,EAAA,cAACG,EAAU,KAAV,CAAe,QAASb,CAAAA,CAAS,CACpC,CACF,CAEJ"}
+{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children'\n> &\n  Partial<\n    Pick<\n      React.ComponentProps<typeof DataTable.Head>,\n      'theme' | 'sortable' | 'headerCss'\n    >\n  > &\n  Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>> & {\n    hasStickyHeader?: boolean\n  }\n\nexport const DataTableTable: React.FC<DataTableTableProps> = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  numberOfStickyColumns = 0,\n  hasStickyHeader = false,\n  headerCss,\n  ...props\n}) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={numberOfStickyColumns}\n        css={{\n          ...css,\n          ...(isPending && {\n            opacity: 0.5,\n            pointerEvents: 'none',\n            transition: 'opacity 250ms linear 150ms'\n          })\n        }}\n      >\n        <DataTable.Head\n          theme={theme}\n          sortable={sortable}\n          isSticky={hasStickyHeader}\n          css={headerCss}\n        />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","numberOfStickyColumns","hasStickyHeader","headerCss","props","asyncDataState","getTotalRows","useDataTable","isPending","AsyncDataState","React","DataTableLoading","Table","DataTable"],"mappings":"iRAsBO,MAAMA,EAAgD,CAAC,CAC5D,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,sBAAAC,EAAwB,EACxB,gBAAAC,EAAkB,GAClB,UAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAAa,EAChDC,EAAYH,IAAmBI,EAAe,QAGpD,MAFgB,CAACD,GAAaF,MAAmB,EAE7B,KAGlBI,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGR,EACJ,sBAAuBH,EACvB,IAAK,CACH,GAAGD,EACH,GAAIQ,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAEAE,EAAAA,EAAA,cAACG,EAAU,KAAV,CACC,MAAOd,EACP,SAAUF,EACV,SAAUK,EACV,IAAKC,CAAAA,CACP,EACAO,EAAA,cAACG,EAAU,KAAV,CAAe,QAASf,CAAAA,CAAS,CACpC,CACF,CAEJ"}

package/dist/components/date-input/DateInput.js

@@ -1,2 +1,2 @@
-import{CalendarEvent as B}from"@atom-learning/icons";import*as e from"react";import{DIALOG_Z_INDEX as M}from"../../constants/zIndices.js";import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as P}from"../../utilities/style/get-icon-size.js";import{useCallbackRefState as H}from"../../utilities/hooks/useCallbackRef.js";import{ActionIcon as $}from"../action-icon/ActionIcon.js";import{Box as U}from"../box/Box.js";import{Calendar as V}from"../calendar/Calendar.js";import{DEFAULT_LABELS as W}from"../calendar/constants.js";import{Icon as X}from"../icon/Icon.js";import{Input as Y}from"../input/Input.js";import{Popover as p}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as I}from"./constants.js";import c from"dayjs";import j from"dayjs/plugin/customParseFormat";c.extend(j);const w=(n,o=I)=>n?c(n).format(o):"",y=e.forwardRef(({initialDate:n,dateFormat:o=I,firstDayOfWeek:C=1,disabled:f,monthNames:T,weekdayNames:k,size:d="md",labels:A,revalidate:l,onChange:u,minDate:O,maxDate:x,...z},S)=>{const[s,D]=e.useState(n?c(n).toDate():void 0),[m,F]=H();e.useImperativeHandle(S,()=>m);const L=w(s,o),N=e.useCallback(t=>{const r=t.target.value,a=c(r,o),i=a.isValid()?a.toDate():void 0;D(i),u==null||u(i)},[o,u]),E=e.useCallback(t=>{D(t),(()=>{var r;if(!m)return;const a=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;a==null||a.call(m,w(t,o));const i=new Event("input",{bubbles:!0});m.dispatchEvent(i)})()},[o,m]),b={...W,...A},[R,v]=e.useState(!1),h=e.useRef(null),g=e.useRef(null),_=e.useMemo(()=>P(d),[d]);return e.createElement(U,{css:{position:"relative",height:"max-content"}},e.createElement(Y,{name:"date",disabled:f,size:d,...z,onChange:N,ref:F,defaultValue:L}),e.createElement(p,{modal:!0,open:R,onOpenChange:v},e.createElement(p.Trigger,{asChild:!0},e.createElement($,{css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"0"},disabled:f,label:b.open,size:_,theme:"neutral",hasTooltip:!1},e.createElement(X,{is:B}))),e.createElement(p.Portal,null,e.createElement(p.Content,{css:{pr:"$sizes$2",zIndex:M},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var r,a;t.preventDefault(),s?(r=g.current)==null||r.focus():(a=h.current)==null||a.focus()}},e.createElement(V,{date:s||new Date,selected:s,onDateSelected:async t=>{v(!1),await E(t.date),l&&l()},setYear:async t=>{await E(t),l&&l()},minDate:O,maxDate:x,refDateToday:h,refDateSelected:g,firstDayOfWeek:C,monthNames:T,weekdayNames:k,labels:b})))))});y.displayName="DateInput";export{y as DateInput};
+import{CalendarEvent as B}from"@atom-learning/icons";import p from"dayjs";import M from"dayjs/plugin/customParseFormat";import*as e from"react";import{DIALOG_Z_INDEX as P}from"../../constants/zIndices.js";import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as H}from"../../utilities/style/get-icon-size.js";import{useCallbackRefState as $}from"../../utilities/hooks/useCallbackRef.js";import{ActionIcon as U}from"../action-icon/ActionIcon.js";import{Box as V}from"../box/Box.js";import{Calendar as W}from"../calendar/Calendar.js";import{DEFAULT_LABELS as Y}from"../calendar/constants.js";import{Icon as j}from"../icon/Icon.js";import{Input as G}from"../input/Input.js";import{Popover as c}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as I}from"./constants.js";p.extend(M);const w=(n,o=I)=>n?p(n).format(o):"",y=e.forwardRef(({initialDate:n,dateFormat:o=I,firstDayOfWeek:C=1,disabled:f,monthNames:T,weekdayNames:k,size:d="md",labels:A,revalidate:l,onChange:u,minDate:O,maxDate:x,...z},N)=>{const[s,D]=e.useState(n?p(n).toDate():void 0),[m,S]=$();e.useImperativeHandle(N,()=>m);const F=w(s,o),L=e.useCallback(t=>{const r=t.target.value,a=p(r,o),i=a.isValid()?a.toDate():void 0;D(i),u==null||u(i)},[o,u]),E=e.useCallback(t=>{D(t),(()=>{var r;if(!m)return;const a=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;a==null||a.call(m,w(t,o));const i=new Event("input",{bubbles:!0});m.dispatchEvent(i)})()},[o,m]),b={...Y,...A},[R,v]=e.useState(!1),h=e.useRef(null),g=e.useRef(null),_=e.useMemo(()=>H(d),[d]);return e.createElement(V,{css:{position:"relative",height:"max-content"}},e.createElement(G,{name:"date",disabled:f,size:d,...z,onChange:L,ref:S,defaultValue:F}),e.createElement(c,{modal:!0,open:R,onOpenChange:v},e.createElement(c.Trigger,{asChild:!0},e.createElement(U,{css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"0"},disabled:f,label:b.open,size:_,theme:"neutral",hasTooltip:!1},e.createElement(j,{is:B}))),e.createElement(c.Portal,null,e.createElement(c.Content,{css:{pr:"$sizes$2",zIndex:P},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var r,a;t.preventDefault(),s?(r=g.current)==null||r.focus():(a=h.current)==null||a.focus()}},e.createElement(W,{date:s||new Date,selected:s,onDateSelected:async t=>{v(!1),await E(t.date),l&&l()},setYear:async t=>{await E(t),l&&l()},minDate:O,maxDate:x,refDateToday:h,refDateSelected:g,firstDayOfWeek:C,monthNames:T,weekdayNames:k,labels:b})))))});y.displayName="DateInput";export{y as DateInput};
 //# sourceMappingURL=DateInput.js.map

package/dist/components/date-input/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Box } from '../box/Box'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\n\nimport { DEFAULT_DATE_FORMAT } from './constants'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  (\n    {\n      initialDate,\n      dateFormat = DEFAULT_DATE_FORMAT,\n      firstDayOfWeek = 1,\n      disabled,\n      monthNames,\n      weekdayNames,\n      size = 'md',\n      labels,\n      revalidate,\n      onChange,\n      minDate,\n      maxDate,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [date, setDate] = React.useState(\n      initialDate ? dayjs(initialDate).toDate() : undefined\n    )\n\n    const [inputElRef, setInputElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n    const dateString = formatDateToString(date, dateFormat)\n\n    const handleInputChange = React.useCallback(\n      (event) => {\n        const newDateString = event.target.value\n        const parsedInputDate = dayjs(newDateString, dateFormat)\n        const newDate = parsedInputDate.isValid() ? parsedInputDate.toDate() : undefined\n        setDate(newDate)\n        onChange?.(newDate)\n      },\n      [dateFormat, onChange]\n    )\n\n    const handleCalendarChange = React.useCallback(\n      (newDate) => {\n        setDate(newDate)\n\n        const mirrorChangeToInputElement = () => {\n          if (!inputElRef) return\n\n          // Call the `set` function on the input value directly to mirror the change.\n          // Props to: https://stackoverflow.com/a/46012210\n          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n            window.HTMLInputElement.prototype,\n            'value'\n          )?.set\n          nativeInputValueSetter?.call(\n            inputElRef,\n            formatDateToString(newDate, dateFormat)\n          )\n          const event = new Event('input', { bubbles: true })\n          inputElRef.dispatchEvent(event)\n        }\n        mirrorChangeToInputElement()\n      },\n      [dateFormat, inputElRef]\n    )\n\n    const updatedLabels = {\n      ...DEFAULT_LABELS,\n      ...labels\n    }\n\n    const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n    const refDateToday = React.useRef<HTMLButtonElement>(null)\n    const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <Box css={{ position: 'relative', height: 'max-content' }}>\n        <Input\n          name=\"date\"\n          disabled={disabled}\n          size={size}\n          {...remainingProps}\n          onChange={handleInputChange}\n          ref={setInputElRef}\n          defaultValue={dateString}\n        />\n        <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n          <Popover.Trigger asChild>\n            <ActionIcon\n              css={{\n                position: 'absolute',\n                top: '50%',\n                transform: 'translateY(-50%)',\n                right: '0'\n              }}\n              disabled={disabled}\n              label={updatedLabels.open}\n              size={iconSize}\n              theme=\"neutral\"\n              hasTooltip={false}\n            >\n              <Icon is={CalendarEvent} />\n            </ActionIcon>\n          </Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              css={{ pr: '$sizes$2', zIndex: DIALOG_Z_INDEX }}\n              side=\"bottom\"\n              align=\"end\"\n              showCloseButton={false}\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                if (date) {\n                  refDateSelected.current?.focus()\n                } else {\n                  refDateToday.current?.focus()\n                }\n              }}\n            >\n              <Calendar\n                date={date || new Date()}\n                selected={date}\n                onDateSelected={async (date) => {\n                  setCalendarOpen(false)\n                  await handleCalendarChange(date.date)\n                  if (revalidate) revalidate()\n                }}\n                setYear={async (date) => {\n                  await handleCalendarChange(date)\n                  if (revalidate) revalidate()\n                }}\n                minDate={minDate}\n                maxDate={maxDate}\n                refDateToday={refDateToday}\n                refDateSelected={refDateSelected}\n                firstDayOfWeek={firstDayOfWeek}\n                monthNames={monthNames}\n                weekdayNames={weekdayNames}\n                labels={updatedLabels}\n              />\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover>\n      </Box>\n    )\n  }\n)\n\nDateInput.displayName = 'DateInput'\n"],"names":["dayjs","customParseFormat","formatDateToString","date","dateFormat","DEFAULT_DATE_FORMAT","DateInput","React","initialDate","firstDayOfWeek","disabled","monthNames","weekdayNames","size","labels","revalidate","onChange","minDate","maxDate","remainingProps","ref","setDate","inputElRef","setInputElRef","useCallbackRefState","dateString","handleInputChange","event","newDateString","parsedInputDate","newDate","handleCalendarChange","_a","nativeInputValueSetter","updatedLabels","DEFAULT_LABELS","calendarOpen","setCalendarOpen","refDateToday","refDateSelected","iconSize","getFieldIconSize","Box","Input","Popover","ActionIcon","Icon","CalendarEvent","DIALOG_Z_INDEX","e","_b","Calendar"],"mappings":"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"}
+{"version":3,"file":"DateInput.js","sources":["../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import { CalendarEvent } from '@atom-learning/icons'\nimport dayjs from 'dayjs'\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\nimport type { Props as DayzedInterface } from 'dayzed'\nimport * as React from 'react'\n\nimport { DIALOG_Z_INDEX } from '~/constants/zIndices'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Box } from '../box/Box'\nimport { Calendar, CalendarTranslationProps } from '../calendar/Calendar'\nimport { DEFAULT_LABELS } from '../calendar/constants'\nimport { Icon } from '../icon/Icon'\nimport { Input } from '../input/Input'\nimport { Popover } from '../popover/Popover'\nimport { DEFAULT_DATE_FORMAT } from './constants'\ndayjs.extend(customParseFormat)\n\nexport type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> &\n  CalendarTranslationProps & {\n    initialDate?: Date\n    dateFormat?: string\n    disabled?: boolean\n    size?: 'sm' | 'md' | 'lg'\n    revalidate?: () => Promise<boolean>\n    onChange?: (value?: Date) => void\n  }\n\nconst formatDateToString = (date?: Date, dateFormat = DEFAULT_DATE_FORMAT) =>\n  date ? dayjs(date).format(dateFormat) : ''\n\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  (\n    {\n      initialDate,\n      dateFormat = DEFAULT_DATE_FORMAT,\n      firstDayOfWeek = 1,\n      disabled,\n      monthNames,\n      weekdayNames,\n      size = 'md',\n      labels,\n      revalidate,\n      onChange,\n      minDate,\n      maxDate,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const [date, setDate] = React.useState(\n      initialDate ? dayjs(initialDate).toDate() : undefined\n    )\n\n    const [inputElRef, setInputElRef] = useCallbackRefState()\n    React.useImperativeHandle(ref, () => inputElRef as HTMLInputElement)\n\n    const dateString = formatDateToString(date, dateFormat)\n\n    const handleInputChange = React.useCallback(\n      (event) => {\n        const newDateString = event.target.value\n        const parsedInputDate = dayjs(newDateString, dateFormat)\n        const newDate = parsedInputDate.isValid()\n          ? parsedInputDate.toDate()\n          : undefined\n        setDate(newDate)\n        onChange?.(newDate)\n      },\n      [dateFormat, onChange]\n    )\n\n    const handleCalendarChange = React.useCallback(\n      (newDate) => {\n        setDate(newDate)\n\n        const mirrorChangeToInputElement = () => {\n          if (!inputElRef) return\n\n          // Call the `set` function on the input value directly to mirror the change.\n          // Props to: https://stackoverflow.com/a/46012210\n          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n            window.HTMLInputElement.prototype,\n            'value'\n          )?.set\n          nativeInputValueSetter?.call(\n            inputElRef,\n            formatDateToString(newDate, dateFormat)\n          )\n          const event = new Event('input', { bubbles: true })\n          inputElRef.dispatchEvent(event)\n        }\n        mirrorChangeToInputElement()\n      },\n      [dateFormat, inputElRef]\n    )\n\n    const updatedLabels = {\n      ...DEFAULT_LABELS,\n      ...labels\n    }\n\n    const [calendarOpen, setCalendarOpen] = React.useState(false)\n\n    const refDateToday = React.useRef<HTMLButtonElement>(null)\n    const refDateSelected = React.useRef<HTMLButtonElement>(null)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    return (\n      <Box css={{ position: 'relative', height: 'max-content' }}>\n        <Input\n          name=\"date\"\n          disabled={disabled}\n          size={size}\n          {...remainingProps}\n          onChange={handleInputChange}\n          ref={setInputElRef}\n          defaultValue={dateString}\n        />\n        <Popover modal open={calendarOpen} onOpenChange={setCalendarOpen}>\n          <Popover.Trigger asChild>\n            <ActionIcon\n              css={{\n                position: 'absolute',\n                top: '50%',\n                transform: 'translateY(-50%)',\n                right: '0'\n              }}\n              disabled={disabled}\n              label={updatedLabels.open}\n              size={iconSize}\n              theme=\"neutral\"\n              hasTooltip={false}\n            >\n              <Icon is={CalendarEvent} />\n            </ActionIcon>\n          </Popover.Trigger>\n          <Popover.Portal>\n            <Popover.Content\n              css={{ pr: '$sizes$2', zIndex: DIALOG_Z_INDEX }}\n              side=\"bottom\"\n              align=\"end\"\n              showCloseButton={false}\n              onOpenAutoFocus={(e) => {\n                e.preventDefault()\n                if (date) {\n                  refDateSelected.current?.focus()\n                } else {\n                  refDateToday.current?.focus()\n                }\n              }}\n            >\n              <Calendar\n                date={date || new Date()}\n                selected={date}\n                onDateSelected={async (date) => {\n                  setCalendarOpen(false)\n                  await handleCalendarChange(date.date)\n                  if (revalidate) revalidate()\n                }}\n                setYear={async (date) => {\n                  await handleCalendarChange(date)\n                  if (revalidate) revalidate()\n                }}\n                minDate={minDate}\n                maxDate={maxDate}\n                refDateToday={refDateToday}\n                refDateSelected={refDateSelected}\n                firstDayOfWeek={firstDayOfWeek}\n                monthNames={monthNames}\n                weekdayNames={weekdayNames}\n                labels={updatedLabels}\n              />\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover>\n      </Box>\n    )\n  }\n)\n\nDateInput.displayName = 'DateInput'\n"],"names":["dayjs","customParseFormat","formatDateToString","date","dateFormat","DEFAULT_DATE_FORMAT","DateInput","React","initialDate","firstDayOfWeek","disabled","monthNames","weekdayNames","size","labels","revalidate","onChange","minDate","maxDate","remainingProps","ref","setDate","inputElRef","setInputElRef","useCallbackRefState","dateString","handleInputChange","event","newDateString","parsedInputDate","newDate","handleCalendarChange","_a","nativeInputValueSetter","updatedLabels","DEFAULT_LABELS","calendarOpen","setCalendarOpen","refDateToday","refDateSelected","iconSize","getFieldIconSize","Box","Input","Popover","ActionIcon","Icon","CalendarEvent","DIALOG_Z_INDEX","e","_b","Calendar"],"mappings":"w7BAkBAA,EAAM,OAAOC,CAAiB,EAY9B,MAAMC,EAAqB,CAACC,EAAaC,EAAaC,IACpDF,EAAOH,EAAMG,CAAI,EAAE,OAAOC,CAAU,EAAI,GAE7BE,EAAYC,EAAM,WAC7B,CACE,CACE,YAAAC,EACA,WAAAJ,EAAaC,EACb,eAAAI,EAAiB,EACjB,SAAAC,EACA,WAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,WAAAC,EACA,SAAAC,EACA,QAAAC,EACA,QAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACjB,EAAMkB,CAAO,EAAId,EAAM,SAC5BC,EAAcR,EAAMQ,CAAW,EAAE,OAAW,EAAA,MAC9C,EAEM,CAACc,EAAYC,CAAa,EAAIC,EAAoB,EACxDjB,EAAM,oBAAoBa,EAAK,IAAME,CAA8B,EAEnE,MAAMG,EAAavB,EAAmBC,EAAMC,CAAU,EAEhDsB,EAAoBnB,EAAM,YAC7BoB,GAAU,CACT,MAAMC,EAAgBD,EAAM,OAAO,MAC7BE,EAAkB7B,EAAM4B,EAAexB,CAAU,EACjD0B,EAAUD,EAAgB,QAC5BA,EAAAA,EAAgB,SAChB,OACJR,EAAQS,CAAO,EACfd,GAAA,MAAAA,EAAWc,CAAAA,CACb,EACA,CAAC1B,EAAYY,CAAQ,CACvB,EAEMe,EAAuBxB,EAAM,YAChCuB,GAAY,CACXT,EAAQS,CAAO,GAEoB,IAAM,CA9EjD,IAAAE,EA+EU,GAAI,CAACV,EAAY,OAIjB,MAAMW,GAAyBD,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,KAAAA,OAAAA,EAG5B,IACHC,GAAA,MAAAA,EAAwB,KACtBX,EACApB,EAAmB4B,EAAS1B,CAAU,CAAA,EAExC,MAAMuB,EAAQ,IAAI,MAAM,QAAS,CAAE,QAAS,EAAK,CAAC,EAClDL,EAAW,cAAcK,CAAK,CAChC,IAEF,EACA,CAACvB,EAAYkB,CAAU,CACzB,EAEMY,EAAgB,CACpB,GAAGC,EACH,GAAGrB,CACL,EAEM,CAACsB,EAAcC,CAAe,EAAI9B,EAAM,SAAS,EAAK,EAEtD+B,EAAe/B,EAAM,OAA0B,IAAI,EACnDgC,EAAkBhC,EAAM,OAA0B,IAAI,EAEtDiC,EAAWjC,EAAM,QAAQ,IAAMkC,EAAiB5B,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnE,OACEN,EAAA,cAACmC,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,OAAQ,aAAc,CAAA,EACtDnC,EAAA,cAACoC,EAAA,CACC,KAAK,OACL,SAAUjC,EACV,KAAMG,EACL,GAAGM,EACJ,SAAUO,EACV,IAAKH,EACL,aAAcE,CAAAA,CAChB,EACAlB,EAAA,cAACqC,EAAA,CAAQ,MAAK,GAAC,KAAMR,EAAc,aAAcC,CAAAA,EAC/C9B,EAAA,cAACqC,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACtBrC,EAAA,cAACsC,EAAA,CACC,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,GACT,EACA,SAAUnC,EACV,MAAOwB,EAAc,KACrB,KAAMM,EACN,MAAM,UACN,WAAY,EAEZjC,EAAAA,EAAA,cAACuC,EAAA,CAAK,GAAIC,CAAAA,CAAe,CAC3B,CACF,EACAxC,EAAA,cAACqC,EAAQ,OAAR,KACCrC,EAAA,cAACqC,EAAQ,QAAR,CACC,IAAK,CAAE,GAAI,WAAY,OAAQI,CAAe,EAC9C,KAAK,SACL,MAAM,MACN,gBAAiB,GACjB,gBAAkBC,GAAM,CAlJtC,IAAAjB,EAAAkB,EAmJgBD,EAAE,eAAe,EACb9C,GACF6B,EAAAO,EAAgB,UAAhB,MAAAP,EAAyB,SAEzBkB,EAAAZ,EAAa,UAAb,MAAAY,EAAsB,OAE1B,CAEA3C,EAAAA,EAAA,cAAC4C,EAAA,CACC,KAAMhD,GAAQ,IAAI,KAClB,SAAUA,EACV,eAAgB,MAAOA,GAAS,CAC9BkC,EAAgB,EAAK,EACrB,MAAMN,EAAqB5B,EAAK,IAAI,EAChCY,GAAYA,EAAAA,CAClB,EACA,QAAS,MAAOZ,GAAS,CACvB,MAAM4B,EAAqB5B,CAAI,EAC3BY,GAAYA,EAAW,CAC7B,EACA,QAASE,EACT,QAASC,EACT,aAAcoB,EACd,gBAAiBC,EACjB,eAAgB9B,EAChB,WAAYE,EACZ,aAAcC,EACd,OAAQsB,CAAAA,CACV,CACF,CACF,CACF,CACF,CAEJ,CACF,EAEA5B,EAAU,YAAc"}

package/dist/components/index.d.ts

@@ -60,6 +60,7 @@ export { Sidedrawer } from './sidedrawer';
 export { Slider } from './slider';
 export { SliderField } from './slider-field';
 export { Sortable } from './sortable';
+export { Spacer } from './spacer';
 export { Stack } from './stack';
 export { StackContent } from './stack-content';
 export { Stepper } from './stepper';
@@ -69,7 +70,7 @@ export { Tabs } from './tabs';
 export { Text } from './text';
 export { Textarea } from './textarea';
 export { TextareaField } from './textarea-field';
-export { ToastProvider, toast } from './toast';
+export { ToastProvider, Toast, toast } from './toast';
 export { ToggleGroup } from './toggle-group';
 export { Tooltip } from './tooltip';
 export { TopBar } from './top-bar';

package/dist/components/pagination/PaginationPopover.js

@@ -1,2 +1,2 @@
-import{Ellypsis as n}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as l}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as s}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../stack/Stack.js";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../sidedrawer/Sidedrawer.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../video/Video.js";import"../banner/banner-regular/BannerRegular.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import{PaginationItem as c}from"./PaginationItem.js";import{usePagination as g}from"./usePagination.js";const f=()=>{const{pagesCount:m,labels:i}=g(),p=Array.from({length:m},(o,e)=>e+1);return t.createElement(r,null,t.createElement(r.Trigger,{asChild:!0},t.createElement(a,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(s,{is:n}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(l,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:1,justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(c,{key:o,pageNumber:o,css:{bg:"$white"}})))))};export{f as PaginationPopover};
+import{Ellypsis as n}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as l}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as s}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../stack/Stack.js";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../sidedrawer/Sidedrawer.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../video/Video.js";import"../banner/banner-regular/BannerRegular.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import{PaginationItem as c}from"./PaginationItem.js";import{usePagination as g}from"./usePagination.js";const f=()=>{const{pagesCount:m,labels:i}=g(),p=Array.from({length:m},(o,e)=>e+1);return t.createElement(r,null,t.createElement(r.Trigger,{asChild:!0},t.createElement(a,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(s,{is:n}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(l,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:1,justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(c,{key:o,pageNumber:o,css:{bg:"$white"}})))))};export{f as PaginationPopover};
 //# sourceMappingURL=PaginationPopover.js.map

package/dist/components/pagination/PaginationPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationItem } from './PaginationItem'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = () => {\n  const { pagesCount, labels } = usePagination()\n  const paginationItems = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>\n        <ActionIcon\n          hasTooltip={false}\n          size=\"md\"\n          theme=\"neutral\"\n          label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n          data-testid=\"pagination_popover_trigger\"\n        >\n          <Icon is={Ellypsis} />\n        </ActionIcon>\n      </Popover.Trigger>\n      <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n        <Flex\n          css={{\n            p: '$4',\n            display: 'flex',\n            flexWrap: 'wrap',\n            gap: 1,\n            justifyContent: 'center'\n          }}\n        >\n          {paginationItems?.map((pageNumber) => {\n            return (\n              <PaginationItem\n                key={pageNumber}\n                pageNumber={pageNumber}\n                css={{ bg: '$white' }}\n              />\n            )\n          })}\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"names":["PaginationPopover","pagesCount","labels","usePagination","paginationItems","_","index","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationItem"],"mappings":"+0GAOO,MAAMA,EAAoB,IAAM,CACrC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EACzBC,EAAAA,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEA,OACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EACtBD,EAAAA,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOP,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZK,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAU,CACtB,CACF,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAAA,EAC7DD,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,EACL,eAAgB,QAClB,CAECR,EAAAA,GAAA,YAAAA,EAAiB,IAAKS,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,IAAK,CAAE,GAAI,QAAS,CAAA,CACtB,CAGN,CAAA,CACF,CACF,CAEJ"}
+{"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationItem } from './PaginationItem'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = () => {\n  const { pagesCount, labels } = usePagination()\n  const paginationItems = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>\n        <ActionIcon\n          hasTooltip={false}\n          size=\"md\"\n          theme=\"neutral\"\n          label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n          data-testid=\"pagination_popover_trigger\"\n        >\n          <Icon is={Ellypsis} />\n        </ActionIcon>\n      </Popover.Trigger>\n      <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n        <Flex\n          css={{\n            p: '$4',\n            display: 'flex',\n            flexWrap: 'wrap',\n            gap: 1,\n            justifyContent: 'center'\n          }}\n        >\n          {paginationItems?.map((pageNumber) => {\n            return (\n              <PaginationItem\n                key={pageNumber}\n                pageNumber={pageNumber}\n                css={{ bg: '$white' }}\n              />\n            )\n          })}\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"names":["PaginationPopover","pagesCount","labels","usePagination","paginationItems","_","index","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationItem"],"mappings":"q4GAOO,MAAMA,EAAoB,IAAM,CACrC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EACzBC,EAAAA,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEA,OACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EACtBD,EAAAA,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOP,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZK,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAU,CACtB,CACF,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAAA,EAC7DD,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,EACL,eAAgB,QAClB,CAECR,EAAAA,GAAA,YAAAA,EAAiB,IAAKS,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,IAAK,CAAE,GAAI,QAAS,CAAA,CACtB,CAGN,CAAA,CACF,CACF,CAEJ"}

package/dist/components/spacer/Spacer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * A flexible flex spacer that expands along the major axis of its containing flex layout.
+ * It renders a `div` by default, and takes up any available space.
+ */
+export declare const Spacer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {}, {}, {}>>;

package/dist/components/spacer/Spacer.js

@@ -0,0 +1,2 @@
+import{styled as t}from"@stitches/react";const e=t("div",{flex:1,justifySelf:"stretch",alignSelf:"stretch"});e.displayName="Spacer";export{e as Spacer};
+//# sourceMappingURL=Spacer.js.map

package/dist/components/spacer/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","sources":["../../../src/components/spacer/Spacer.tsx"],"sourcesContent":["import { styled } from '@stitches/react'\n\n/**\n * A flexible flex spacer that expands along the major axis of its containing flex layout.\n * It renders a `div` by default, and takes up any available space.\n */\nexport const Spacer = styled('div', {\n  flex: 1,\n  justifySelf: 'stretch',\n  alignSelf: 'stretch'\n})\n\nSpacer.displayName = 'Spacer'\n"],"names":["Spacer","styled"],"mappings":"yCAMa,MAAAA,EAASC,EAAO,MAAO,CAClC,KAAM,EACN,YAAa,UACb,UAAW,SACb,CAAC,EAEDD,EAAO,YAAc"}

package/dist/components/spacer/index.d.ts

@@ -0,0 +1 @@
+export { Spacer } from './Spacer';

package/dist/components/table/TableHeader.d.ts

@@ -6,6 +6,7 @@ export declare const TABLE_HEADER_THEMES: {
 };
 declare const StyledTableHeader: import("@stitches/react/types/styled-component").StyledComponent<"thead", {
     theme?: string | number | `${number}` | undefined;
+    isSticky?: boolean | "true" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/table/TableHeader.js

@@ -1,2 +1,2 @@
-import l from"react";import{styled as o}from"../../stitches.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";const e={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",LIGHT:"light"},i=o("thead",{variants:{theme:{[e.PRIMARY]:{[`${r}`]:{bg:"$primary"}},[e.PRIMARY_DARK]:{[`${r}`]:{bg:"$primaryDark"}},[e.LIGHT]:{[`${r}`]:{bg:"$tonal50",color:"$tonal600"}}}}}),a=({theme:t="primaryDark",...m})=>l.createElement(i,{theme:t,...m});a.displayName="TableHeader";export{e as TABLE_HEADER_THEMES,a as TableHeader};
+import m from"react";import{styled as l}from"../../stitches.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";const e={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",LIGHT:"light"},p=l("thead",{variants:{theme:{[e.PRIMARY]:{[`${r}`]:{bg:"$primary"}},[e.PRIMARY_DARK]:{[`${r}`]:{bg:"$primaryDark"}},[e.LIGHT]:{[`${r}`]:{bg:"$tonal50",color:"$tonal600"}}},isSticky:{true:{position:"sticky",top:0,zIndex:3}}}}),t=({theme:a="primaryDark",isSticky:i=!1,...o})=>m.createElement(p,{theme:a,isSticky:i,...o});t.displayName="TableHeader";export{e as TABLE_HEADER_THEMES,t as TableHeader};
 //# sourceMappingURL=TableHeader.js.map

package/dist/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TableHeaderCell } from './TableHeaderCell'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  LIGHT: 'light'\n}\n\nconst StyledTableHeader = styled('thead', {\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primary'\n        }\n      },\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primaryDark'\n        }\n      },\n      [TABLE_HEADER_THEMES.LIGHT]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$tonal50',\n          color: '$tonal600'\n        }\n      }\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader: React.FC<TableHeaderProps> = ({\n  theme = 'primaryDark',\n  ...rest\n}: TableHeaderProps) => <StyledTableHeader theme={theme} {...rest} />\n\nTableHeader.displayName = 'TableHeader'\n"],"names":["TABLE_HEADER_THEMES","StyledTableHeader","styled","TableHeaderCell","TableHeader","theme","rest","React"],"mappings":"uHAMa,MAAAA,EAAsB,CACjC,QAAS,UACT,aAAc,cACd,MAAO,OACT,EAEMC,EAAoBC,EAAO,QAAS,CACxC,SAAU,CACR,MAAO,CACL,CAACF,EAAoB,SAAU,CAC7B,CAAC,GAAGG,KAAoB,CACtB,GAAI,UACN,CACF,EACA,CAACH,EAAoB,cAAe,CAClC,CAAC,GAAGG,KAAoB,CACtB,GAAI,cACN,CACF,EACA,CAACH,EAAoB,OAAQ,CAC3B,CAAC,GAAGG,KAAoB,CACtB,GAAI,WACJ,MAAO,WACT,CACF,CACF,CACF,CACF,CAAC,EAIYC,EAA0C,CAAC,CACtD,MAAAC,EAAQ,iBACLC,CACL,IAAwBC,EAAA,cAACN,EAAA,CAAkB,MAAOI,EAAQ,GAAGC,CAAM,CAAA,EAEnEF,EAAY,YAAc"}
+{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TableHeaderCell } from './TableHeaderCell'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  LIGHT: 'light'\n}\n\nconst StyledTableHeader = styled('thead', {\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primary'\n        }\n      },\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primaryDark'\n        }\n      },\n      [TABLE_HEADER_THEMES.LIGHT]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$tonal50',\n          color: '$tonal600'\n        }\n      }\n    },\n    isSticky: {\n      true: {\n        position: 'sticky',\n        top: 0,\n        zIndex: 3\n      }\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader: React.FC<TableHeaderProps> = ({\n  theme = 'primaryDark',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return <StyledTableHeader theme={theme} isSticky={isSticky} {...rest} />\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"names":["TABLE_HEADER_THEMES","StyledTableHeader","styled","TableHeaderCell","TableHeader","theme","isSticky","rest","React"],"mappings":"uHAMO,MAAMA,EAAsB,CACjC,QAAS,UACT,aAAc,cACd,MAAO,OACT,EAEMC,EAAoBC,EAAO,QAAS,CACxC,SAAU,CACR,MAAO,CACL,CAACF,EAAoB,SAAU,CAC7B,CAAC,GAAGG,KAAoB,CACtB,GAAI,UACN,CACF,EACA,CAACH,EAAoB,cAAe,CAClC,CAAC,GAAGG,KAAoB,CACtB,GAAI,cACN,CACF,EACA,CAACH,EAAoB,OAAQ,CAC3B,CAAC,GAAGG,KAAoB,CACtB,GAAI,WACJ,MAAO,WACT,CACF,CACF,EACA,SAAU,CACR,KAAM,CACJ,SAAU,SACV,IAAK,EACL,OAAQ,CACV,CACF,CACF,CACF,CAAC,EAIYC,EAA0C,CAAC,CACtD,MAAAC,EAAQ,cACR,SAAAC,EAAW,MACRC,CACL,IACSC,EAAA,cAACP,EAAA,CAAkB,MAAOI,EAAO,SAAUC,EAAW,GAAGC,CAAAA,CAAM,EAGxEH,EAAY,YAAc"}

package/dist/components/table/TableStickyColumnsContainer.js

@@ -1,2 +1,2 @@
-import e from"react";import{Box as u}from"../box/Box.js";import{useStickyColumnsCss as h}from"./useStickyColumnsCss.js";const m=({children:s,numberOfStickyColumns:t=0,css:c,...i})=>{const[r,p]=e.useState(!1),o=e.useRef(null),{columnsCss:a}=h(t,o);return e.createElement(u,{onScroll:l=>{const n=l.currentTarget.scrollWidth>l.currentTarget.clientWidth;n!==r&&p(n)},role:"scrollbar",ref:o,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"},...c},...i},s)};export{m as TableStickyColumnsContainer};
+import e from"react";import{Box as h}from"../box/Box.js";import{useStickyColumnsCss as m}from"./useStickyColumnsCss.js";const u=({children:s,numberOfStickyColumns:t=0,css:c,...i})=>{const[r,p]=e.useState(!1),l=e.useRef(null),{columnsCss:a}=m(t,l);return e.createElement(h,{onScroll:n=>{const o=n.currentTarget.scrollWidth>n.currentTarget.clientWidth;o!==r&&p(o)},role:"scrollbar",ref:l,css:{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"},...c},...i},s)};export{u as TableStickyColumnsContainer};
 //# sourceMappingURL=TableStickyColumnsContainer.js.map

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

@@ -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'\ninterface ITableStickyColumnsContainerProps {\n  children: React.ReactNode\n  numberOfStickyColumns?: number\n  css?: CSS\n}\n\nexport const TableStickyColumnsContainer: React.FC<\n  ITableStickyColumnsContainerProps\n> = ({ children, numberOfStickyColumns = 0, css, ...restProps }) => {\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":"wHAYO,MAAMA,EAET,CAAC,CAAE,SAAAC,EAAU,sBAAAC,EAAwB,EAAG,IAAAC,KAAQC,CAAU,IAAM,CAClE,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"}
+{"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'\ninterface ITableStickyColumnsContainerProps {\n  children: React.ReactNode\n  numberOfStickyColumns?: number\n  css?: CSS\n}\n\nexport const TableStickyColumnsContainer: React.FC<\n  ITableStickyColumnsContainerProps\n> = ({ children, numberOfStickyColumns = 0, css, ...restProps }) => {\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        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":"wHAYO,MAAMA,EAET,CAAC,CAAE,SAAAC,EAAU,sBAAAC,EAAwB,EAAG,IAAAC,KAAQC,CAAU,IAAM,CAClE,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,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"}