@atom-learning/components 5.8.0 → 5.9.1

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 (47) hide show
  1. package/CHANGELOG.md +2 -10
  2. package/dist/components/action-icon/ActionIcon.d.ts +1 -1
  3. package/dist/components/action-icon/ActionIcon.js +1 -1
  4. package/dist/components/action-icon/ActionIcon.js.map +1 -1
  5. package/dist/components/banner/banner-regular/BannerRegular.d.ts +10 -10
  6. package/dist/components/banner/banner-regular/BannerRegularDismiss.d.ts +2 -2
  7. package/dist/components/banner/banner-slim/BannerSlim.d.ts +10 -10
  8. package/dist/components/banner/banner-slim/BannerSlimDismiss.d.ts +2 -2
  9. package/dist/components/create-password-field/CreatePasswordField.js +1 -1
  10. package/dist/components/data-table/DataTable.d.ts +27 -10
  11. package/dist/components/data-table/DataTable.js +1 -1
  12. package/dist/components/data-table/DataTable.js.map +1 -1
  13. package/dist/components/data-table/DataTable.types.d.ts +8 -0
  14. package/dist/components/data-table/DataTable.types.js.map +1 -1
  15. package/dist/components/data-table/DataTableBulkActionsFloating.d.ts +12 -0
  16. package/dist/components/data-table/DataTableBulkActionsFloating.js +2 -0
  17. package/dist/components/data-table/DataTableBulkActionsFloating.js.map +1 -0
  18. package/dist/components/data-table/DataTableBulkActionsSelectedRowActions.d.ts +6 -0
  19. package/dist/components/data-table/DataTableBulkActionsSelectedRowActions.js +2 -0
  20. package/dist/components/data-table/DataTableBulkActionsSelectedRowActions.js.map +1 -0
  21. package/dist/components/data-table/DataTableContext.js +1 -1
  22. package/dist/components/data-table/DataTableContext.js.map +1 -1
  23. package/dist/components/data-table/DataTableHead.d.ts +2 -1
  24. package/dist/components/data-table/DataTableHead.js +1 -1
  25. package/dist/components/data-table/DataTableHead.js.map +1 -1
  26. package/dist/components/data-table/DataTableTable.d.ts +2 -1
  27. package/dist/components/data-table/DataTableTable.js +1 -1
  28. package/dist/components/data-table/DataTableTable.js.map +1 -1
  29. package/dist/components/dropdown-menu/DropdownMenuItem.d.ts +1 -1
  30. package/dist/components/dropdown-menu/DropdownMenuItem.js +1 -1
  31. package/dist/components/dropdown-menu/DropdownMenuItem.js.map +1 -1
  32. package/dist/components/pagination/PaginationNextButton.d.ts +2 -2
  33. package/dist/components/pagination/PaginationPreviousButton.d.ts +2 -2
  34. package/dist/components/sortable/Handle.d.ts +2 -2
  35. package/dist/components/stepper/Stepper.js +1 -1
  36. package/dist/components/table/Table.d.ts +1 -4
  37. package/dist/components/table/Table.js +1 -1
  38. package/dist/components/table/Table.js.map +1 -1
  39. package/dist/components/table/TableStickyColumnsContainer.js +1 -1
  40. package/dist/components/table/TableStickyColumnsContainer.js.map +1 -1
  41. package/dist/components/top-bar/TopBar.d.ts +2 -2
  42. package/dist/components/top-bar/TopBar.js +1 -1
  43. package/dist/components/top-bar/TopBar.js.map +1 -1
  44. package/dist/docgen.json +1 -1
  45. package/dist/index.cjs.js +1 -1
  46. package/dist/index.cjs.js.map +1 -1
  47. package/package.json +1 -1
@@ -1,2 +1,2 @@
1
- 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 f}from"./DataTable.js";const E=({sortable:a=!0,theme:s="light",isSticky:m=!1,css:c,...i})=>{const{getHeaderGroups:n,setIsSortable:r,enableRowSelection:d,getCanSomeRowsExpand:h}=b();return e.useEffect(()=>{r(a)},[a,r]),e.createElement(t.Header,{theme:s,isSticky:m,css:{"& tr:not(:last-child) > th":{borderBottom:"none"},"& tr:not(:first-child) > th":{borderRadius:"0 !important"},...c},...i},n().map(o=>e.createElement(t.Row,{key:o.id},h()&&e.createElement(t.HeaderCell,{css:{width:"$4"}}),d&&e.createElement(t.HeaderCell,{css:{width:"$4"}},e.createElement(p,null)),o.headers.map(l=>e.createElement(f.HeaderCell,{header:l,key:l.id})))))};export{E as DataTableHead};
1
+ import*as t from"react";import{Table as a}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as x}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as D}from"./DataTableContext.js";import{DataTable as H}from"./DataTable.js";const k=({sortable:u=!0,theme:h="light",isSticky:s=!1,stickyOffset:n=0,css:w,...E})=>{var m;const{getHeaderGroups:v,setIsSortable:d,enableRowSelection:R,getCanSomeRowsExpand:S,tablePosition:e,setTablePosition:g}=D();t.useEffect(()=>{d(u)},[u,d]);const l=t.useRef(null),i=t.useRef(null),y=t.useRef(0),[p,T]=t.useState(0),[c,f]=t.useState(!1),C=t.useMemo(()=>document.querySelector("main")||window,[]),b=(m=l==null?void 0:l.current)==null?void 0:m.closest("thead");if(b&&(e==null?void 0:e.offsetTop)===null){const o=b.getBoundingClientRect().height,r=n+o;e&&g({...e,offsetTop:r||0})}return t.useEffect(()=>{if(!!s&&(!i.current&&l.current&&(i.current=l.current.closest("table")),i.current&&(e==null?void 0:e.top)!==null&&(e==null?void 0:e.bottom)!==null)){const o=(e==null?void 0:e.top)!=null&&(e==null?void 0:e.bottom)!=null&&e.top<n&&e.bottom>100?-e.top+n:0;o!==0&&f(!0),y.current=o,T(o),requestAnimationFrame(()=>{f(!1)})}},[C,s,n,e]),t.createElement(a.Header,{theme:h,css:{position:"relative",zIndex:3,"& tr:not(:last-child) > th":{borderBottom:"none"},"& tr:not(:first-child) > th":{borderRadius:"0 !important"},...w},...E},v().map(o=>t.createElement(a.Row,{key:o.id,ref:l,css:{...s&&p!==0&&{transform:`translateY(${p}px)`,opacity:c?0:1,transition:c?"none":"opacity 100ms",transitionDelay:c?"0ms":"150ms","& th:last-child:before":{content:"",position:"absolute",right:0,top:0,bottom:0,width:"100%",boxShadow:"$0",pointerEvents:"none"}}}},S()&&t.createElement(a.HeaderCell,{css:{width:"$4"}}),R&&t.createElement(a.HeaderCell,{css:{width:"$4"}},t.createElement(x,null)),o.headers.map(r=>t.createElement(H.HeaderCell,{header:r,key:r.id})))))};export{k as DataTableHead};
2
2
  //# sourceMappingURL=DataTableHead.js.map
@@ -1 +1 @@
1
- {"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 = ({\n sortable = true,\n theme = 'light',\n isSticky = false,\n css,\n ...props\n}: DataTableHeadProps) => {\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\n theme={theme}\n isSticky={isSticky}\n css={{\n '& tr:not(:last-child) > th': {\n borderBottom: 'none'\n },\n '& tr:not(:first-child) > th': {\n borderRadius: '0 !important'\n },\n ...css\n }}\n {...props}\n >\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","css","props","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","useDataTable","React","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"uPAiBa,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,IAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,CACF,EAAIC,IAEJ,OAAAC,EAAM,UAAU,IAAM,CACpBJ,EAAcN,CAAQ,CACxB,EAAG,CAACA,EAAUM,CAAa,CAAC,EAG1BI,EAAA,cAACC,EAAM,OAAN,CACC,MAAOV,EACP,SAAUC,EACV,IAAK,CACH,6BAA8B,CAC5B,aAAc,MAChB,EACA,8BAA+B,CAC7B,aAAc,cAChB,EACA,GAAGC,CACL,EACC,GAAGC,CAAAA,EAEHC,EAAgB,EAAE,IAAKO,GAEpBF,EAAA,cAACC,EAAM,IAAN,CAAU,IAAKC,EAAY,IACzBJ,EAAqB,GACpBE,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAA,CAAG,EAEzCJ,GACCG,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,GACnCD,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"}
1
+ {"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 stickyOffset?: number\n headerCss?: CSS\n}\n\nexport const DataTableHead = ({\n sortable = true,\n theme = 'light',\n isSticky = false,\n stickyOffset = 0,\n css,\n ...props\n}: DataTableHeadProps): React.ReactElement => {\n const {\n getHeaderGroups,\n setIsSortable,\n enableRowSelection,\n getCanSomeRowsExpand,\n tablePosition,\n setTablePosition\n } = useDataTable()\n\n React.useEffect(() => {\n setIsSortable(sortable)\n }, [sortable, setIsSortable])\n\n const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n const tableRef = React.useRef<HTMLTableElement | null>(null)\n const headerOffsetRef = React.useRef(0)\n\n const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n const scrollTarget = React.useMemo(() => {\n return document.querySelector('main') || window\n }, [])\n\n const tableHeadElement = tableHeaderRowRef?.current?.closest('thead')\n\n if (tableHeadElement && tablePosition?.offsetTop === null) {\n const tableHeadHeight = tableHeadElement.getBoundingClientRect().height\n const intersectionOffset = stickyOffset + tableHeadHeight\n if (tablePosition) {\n setTablePosition({ ...tablePosition, offsetTop: intersectionOffset || 0 })\n }\n }\n\n React.useEffect(() => {\n if (!isSticky) return\n\n if (!tableRef.current && tableHeaderRowRef.current) {\n tableRef.current = tableHeaderRowRef.current.closest(\n 'table'\n ) as HTMLTableElement | null\n }\n\n if (tableRef.current) {\n if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n const newOffset =\n tablePosition?.top != null &&\n tablePosition?.bottom != null &&\n tablePosition.top < stickyOffset &&\n tablePosition.bottom > 100\n ? -tablePosition.top + stickyOffset\n : 0\n\n if (newOffset !== 0) setHeaderHide(true)\n\n headerOffsetRef.current = newOffset\n setHeaderOffset(newOffset)\n\n requestAnimationFrame(() => {\n setHeaderHide(false)\n })\n }\n }\n }, [scrollTarget, isSticky, stickyOffset, tablePosition])\n\n return (\n <Table.Header\n theme={theme}\n css={{\n position: 'relative',\n zIndex: 3,\n '& tr:not(:last-child) > th': {\n borderBottom: 'none'\n },\n '& tr:not(:first-child) > th': {\n borderRadius: '0 !important'\n },\n ...css\n }}\n {...props}\n >\n {getHeaderGroups().map((headerGroup) => {\n return (\n <Table.Row\n key={headerGroup.id}\n ref={tableHeaderRowRef}\n css={{\n ...(isSticky &&\n headerOffset !== 0 && {\n transform: `translateY(${headerOffset}px)`,\n opacity: headerHide ? 0 : 1,\n transition: headerHide ? 'none' : `opacity 100ms`,\n transitionDelay: headerHide ? '0ms' : `150ms`,\n '& th:last-child:before': {\n content: '',\n position: 'absolute',\n right: 0,\n top: 0,\n bottom: 0,\n width: '100%',\n boxShadow: '$0',\n pointerEvents: 'none'\n }\n })\n }}\n >\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","stickyOffset","css","props","_a","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","tablePosition","setTablePosition","useDataTable","React","tableHeaderRowRef","tableRef","headerOffsetRef","headerOffset","setHeaderOffset","headerHide","setHeaderHide","scrollTarget","tableHeadElement","tableHeadHeight","intersectionOffset","newOffset","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"uPAkBa,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,GACX,aAAAC,EAAe,EACf,IAAAC,KACGC,CACL,IAA8C,CAzB9C,IAAAC,EA0BE,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,EACA,cAAAC,EACA,iBAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBN,EAAcR,CAAQ,CACxB,EAAG,CAACA,EAAUQ,CAAa,CAAC,EAE5B,MAAMO,EAAoBD,EAAM,OAA4B,IAAI,EAC1DE,EAAWF,EAAM,OAAgC,IAAI,EACrDG,EAAkBH,EAAM,OAAO,CAAC,EAEhC,CAACI,EAAcC,CAAe,EAAIL,EAAM,SAAiB,CAAC,EAC1D,CAACM,EAAYC,CAAa,EAAIP,EAAM,SAAkB,EAAK,EAE3DQ,EAAeR,EAAM,QAAQ,IAC1B,SAAS,cAAc,MAAM,GAAK,OACxC,CAAA,CAAE,EAECS,GAAmBjB,EAAAS,GAAA,YAAAA,EAAmB,UAAnB,YAAAT,EAA4B,QAAQ,SAE7D,GAAIiB,IAAoBZ,GAAA,KAAAA,OAAAA,EAAe,aAAc,KAAM,CACzD,MAAMa,EAAkBD,EAAiB,sBAAwB,EAAA,OAC3DE,EAAqBtB,EAAeqB,EACtCb,GACFC,EAAiB,CAAE,GAAGD,EAAe,UAAWc,GAAsB,CAAE,CAAC,CAE7E,CAEA,OAAAX,EAAM,UAAU,IAAM,CACpB,GAAI,EAACZ,IAED,CAACc,EAAS,SAAWD,EAAkB,UACzCC,EAAS,QAAUD,EAAkB,QAAQ,QAC3C,OACF,GAGEC,EAAS,UACPL,GAAA,KAAA,OAAAA,EAAe,OAAQ,OAAQA,GAAA,KAAAA,OAAAA,EAAe,UAAW,MAAM,CACjE,MAAMe,GACJf,GAAA,KAAAA,OAAAA,EAAe,MAAO,OACtBA,GAAA,YAAAA,EAAe,SAAU,MACzBA,EAAc,IAAMR,GACpBQ,EAAc,OAAS,IACnB,CAACA,EAAc,IAAMR,EACrB,EAEFuB,IAAc,GAAGL,EAAc,EAAI,EAEvCJ,EAAgB,QAAUS,EAC1BP,EAAgBO,CAAS,EAEzB,sBAAsB,IAAM,CAC1BL,EAAc,EAAK,CACrB,CAAC,CACH,CAEJ,EAAG,CAACC,EAAcpB,EAAUC,EAAcQ,CAAa,CAAC,EAGtDG,EAAA,cAACa,EAAM,OAAN,CACC,MAAO1B,EACP,IAAK,CACH,SAAU,WACV,OAAQ,EACR,6BAA8B,CAC5B,aAAc,MAChB,EACA,8BAA+B,CAC7B,aAAc,cAChB,EACA,GAAGG,CACL,EACC,GAAGC,GAEHE,EAAgB,EAAE,IAAKqB,GAEpBd,EAAA,cAACa,EAAM,IAAN,CACC,IAAKC,EAAY,GACjB,IAAKb,EACL,IAAK,CACH,GAAIb,GACFgB,IAAiB,GAAK,CACpB,UAAW,cAAcA,OACzB,QAASE,EAAa,EAAI,EAC1B,WAAYA,EAAa,OAAS,gBAClC,gBAAiBA,EAAa,MAAQ,QACtC,yBAA0B,CACxB,QAAS,GACT,SAAU,WACV,MAAO,EACP,IAAK,EACL,OAAQ,EACR,MAAO,OACP,UAAW,KACX,cAAe,MACjB,CACF,CACJ,CAAA,EAECV,EACCI,GAAAA,EAAA,cAACa,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,EAAG,EAEzClB,GACCK,EAAA,cAACa,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,GACnCb,EAAA,cAACe,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAKE,GACxBhB,EAAA,cAACiB,EAAU,WAAV,CAAqB,OAAQD,EAAQ,IAAKA,EAAO,EAAA,CAAI,CACvD,CACH,CAEH,CACH,CAEJ"}
@@ -6,10 +6,11 @@ import { DataTableHead } from './DataTableHead';
6
6
  export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children' | 'numberOfStickyColumns'> & Partial<Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {
7
7
  scrollOptions?: {
8
8
  hasStickyHeader?: boolean;
9
+ stickyHeaderOffset?: number;
9
10
  headerCss?: CSS;
10
11
  numberOfStickyColumns?: number;
11
12
  scrollContainerCss?: CSS;
12
13
  };
13
14
  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
14
15
  };
15
- export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: DataTableTableProps) => React.JSX.Element | null;
16
+ export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, rowAction, ...props }: DataTableTableProps) => JSX.Element | null;
@@ -1,2 +1,2 @@
1
- import*as e from"react";import{Table as S}from"../table/Table.js";import{DataTable as s}from"./DataTable.js";import{AsyncDataState as E}from"./DataTable.types.js";import{useDataTable as k}from"./DataTableContext.js";import{DataTableLoading as D}from"./DataTableLoading.js";const T=({sortable:l,striped:m,theme:c,css:i,scrollOptions:t={numberOfStickyColumns:0,hasStickyHeader:!1},rowAction:p,...u})=>{const{asyncDataState:b,getTotalRows:y,getCanSomeRowsExpand:r,enableRowSelection:n,tableId:d}=k(),o=b===E.PENDING,C=!o&&y()===0,f=()=>{let a=0;return r()&&!!n?a=2:(r()||!!n)&&(a=1),`${d}_${a}_control_columns`};return C?null:e.createElement(e.Fragment,null,e.createElement(D,null),e.createElement(S,{...u,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:t.scrollContainerCss,scrollContainerkey:f(),css:{...i,...o&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(s.Head,{theme:c,sortable:l,isSticky:t.hasStickyHeader,css:t.headerCss}),e.createElement(s.Body,{striped:m,rowAction:p})))};export{T as DataTableTable};
1
+ import*as e from"react";import{Table as A}from"../table/Table.js";import{DataTable as g}from"./DataTable.js";import{AsyncDataState as L}from"./DataTable.types.js";import{useDataTable as B}from"./DataTableContext.js";import{DataTableLoading as P}from"./DataTableLoading.js";const _=({sortable:k,striped:S,theme:E,css:v,scrollOptions:t={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1},rowAction:C,...O})=>{const{asyncDataState:h,getTotalRows:w,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:H,setTablePosition:c}=B(),r=e.useRef(null),R=e.useRef(!1),l=e.useRef(!1),n=e.useMemo(()=>document.querySelector("main")||window,[]);e.useEffect(()=>{if(typeof IntersectionObserver>"u")return;const s=()=>{if(r.current){const o=r.current.getBoundingClientRect().top,i=r.current.getBoundingClientRect().bottom;c(u=>({...u,top:o,bottom:i}))}l.current=!1},a=()=>{l.current||(requestAnimationFrame(s),l.current=!0)};if(!r.current)return;const b=(t==null?void 0:t.stickyHeaderOffset)||0,T={rootMargin:`-${b}px 0px -${b}px 0px`,threshold:0},x=o=>{if(!o||o.length===0)return;const i=o[0];R.current=i.isIntersecting,i.isIntersecting?n==null||n.addEventListener("scroll",a):n==null||n.removeEventListener("scroll",a),c(u=>({...u,isVisible:i.isIntersecting}))},p=new IntersectionObserver(x,T);return r.current&&(t.hasStickyHeader||Object.keys(f||{}).length>0)&&p.observe(r.current),()=>{p.disconnect(),n==null||n.removeEventListener("scroll",a)}},[f,t.hasStickyHeader,t==null?void 0:t.stickyHeaderOffset,n,c]);const y=h===L.PENDING,D=!y&&w()===0,I=()=>{let s=0;return m()&&!!d?s=2:(m()||!!d)&&(s=1),`${H}_${s}_control_columns`};return D?null:e.createElement(e.Fragment,null,e.createElement(P,null),e.createElement("div",{style:{display:"contents"}},e.createElement(A,{...O,ref:r,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:{...t.scrollContainerCss},scrollContainerkey:I(),css:{...v,...y&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(g.Head,{theme:E,sortable:k,isSticky:t.hasStickyHeader,stickyOffset:t.stickyHeaderOffset,css:t.headerCss}),e.createElement(g.Body,{striped:S,rowAction:C}))))};export{_ as DataTableTable};
2
2
  //# sourceMappingURL=DataTableTable.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' | 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n headerCss?: CSS\n numberOfStickyColumns?: number\n scrollContainerCss?: CSS\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme,\n css,\n scrollOptions = {\n numberOfStickyColumns: 0,\n hasStickyHeader: false\n },\n rowAction,\n ...props\n}: DataTableTableProps) => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n enableRowSelection,\n tableId\n } = useDataTable()\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n return (\n <>\n <DataTableLoading />\n\n <Table\n {...props}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCss={scrollOptions.scrollContainerCss}\n scrollContainerkey={buildScrollContainerKey()}\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={scrollOptions.hasStickyHeader}\n css={scrollOptions.headerCss}\n />\n <DataTable.Body striped={striped} rowAction={rowAction} />\n </Table>\n </>\n )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","rowAction","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","enableRowSelection","tableId","useDataTable","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","React","DataTableLoading","Table","DataTable"],"mappings":"iRA6Ba,MAAAA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,EACA,UAAAC,KACGC,CACL,IAA2B,CACzB,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,QAAAC,CACF,EAAIC,EAEEC,EAAAA,EAAYN,IAAmBO,EAAe,QAC9CC,EAAU,CAACF,GAAaL,EAAmB,IAAA,EAE3CQ,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAIR,KAA0B,CAAC,CAACC,EAC9BO,EAAqB,GACZR,EAAqB,GAAK,CAAC,CAACC,KACrCO,EAAqB,GAGhB,GAAGN,KAAWM,mBACvB,EAEA,OAAIF,EAAgB,KAGlBG,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGd,EACJ,sBAAuBF,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBY,EACpB,EAAA,IAAK,CACH,GAAGb,EACH,GAAIU,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAEAK,EAAAA,EAAA,cAACG,EAAU,KAAV,CACC,MAAOnB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SAAA,CACrB,EACAc,EAAA,cAACG,EAAU,KAAV,CAAe,QAASpB,EAAS,UAAWI,CAAW,CAAA,CAC1D,CACF,CAEJ"}
1
+ {"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n React.ComponentProps<typeof Table>,\n 'children' | 'numberOfStickyColumns'\n> &\n Partial<\n Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n > &\n Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n scrollOptions?: {\n hasStickyHeader?: boolean\n stickyHeaderOffset?: number\n headerCss?: CSS\n numberOfStickyColumns?: number\n scrollContainerCss?: CSS\n }\n rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n }\n\nexport const DataTableTable = ({\n sortable,\n striped,\n theme,\n css,\n scrollOptions = {\n numberOfStickyColumns: 0,\n stickyHeaderOffset: 0,\n hasStickyHeader: false\n },\n rowAction,\n ...props\n}: DataTableTableProps): JSX.Element | null => {\n const {\n asyncDataState,\n getTotalRows,\n getCanSomeRowsExpand,\n rowSelection,\n enableRowSelection,\n tableId,\n setTablePosition\n } = useDataTable()\n\n const tableRef = React.useRef<HTMLTableElement | null>(null)\n const isTableVisible = React.useRef(false)\n const isScrolling = React.useRef<boolean>(false)\n\n const scrollTarget = React.useMemo(() => {\n return document.querySelector('main') || window\n }, [])\n\n React.useEffect(() => {\n if (typeof IntersectionObserver === 'undefined') {\n return\n }\n\n const updatePosition = () => {\n if (tableRef.current) {\n const tableTop = tableRef.current.getBoundingClientRect().top\n const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n top: tableTop,\n bottom: tableBottom\n }))\n }\n isScrolling.current = false\n }\n\n const handleScroll = () => {\n if (!isScrolling.current) {\n requestAnimationFrame(updatePosition)\n isScrolling.current = true\n }\n }\n\n if (!tableRef.current) return\n\n const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n const observerOptions = {\n rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n threshold: 0\n }\n\n const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n if (!entries || entries.length === 0) return\n const entry = entries[0]\n\n isTableVisible.current = entry.isIntersecting\n\n if (entry.isIntersecting) {\n //add scroll listener\n scrollTarget?.addEventListener('scroll', handleScroll)\n } else {\n //remove scroll listener\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n\n setTablePosition((prevPosition) => ({\n ...prevPosition,\n isVisible: entry.isIntersecting\n }))\n }\n\n const tableObserver = new IntersectionObserver(\n handleTableIntersection,\n observerOptions\n )\n\n //only track table position if we have a sticky header or bulk actions active\n if (\n tableRef.current &&\n (scrollOptions.hasStickyHeader ||\n Object.keys(rowSelection || {}).length > 0)\n ) {\n tableObserver.observe(tableRef.current)\n }\n\n return () => {\n tableObserver.disconnect()\n scrollTarget?.removeEventListener('scroll', handleScroll)\n }\n }, [\n rowSelection,\n scrollOptions.hasStickyHeader,\n scrollOptions?.stickyHeaderOffset,\n scrollTarget,\n setTablePosition\n ])\n\n const isPending = asyncDataState === AsyncDataState.PENDING\n const isEmpty = !isPending && getTotalRows() === 0\n\n const buildScrollContainerKey = (): string => {\n let controlColumnCount = 0\n\n if (getCanSomeRowsExpand() && !!enableRowSelection) {\n controlColumnCount = 2\n } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n controlColumnCount = 1\n }\n\n return `${tableId}_${controlColumnCount}_control_columns`\n }\n\n if (isEmpty) return null\n\n return (\n <>\n <DataTableLoading />\n <div style={{ display: 'contents' }}>\n <Table\n {...props}\n ref={tableRef}\n numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n scrollContainerCss={{\n ...scrollOptions.scrollContainerCss\n }}\n scrollContainerkey={buildScrollContainerKey()}\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={scrollOptions.hasStickyHeader}\n stickyOffset={scrollOptions.stickyHeaderOffset}\n css={scrollOptions.headerCss}\n />\n <DataTable.Body striped={striped} rowAction={rowAction} />\n </Table>\n </div>\n </>\n )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","rowAction","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","DataTableLoading","Table","DataTable"],"mappings":"uRA8BaA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,mBAAoB,EACpB,gBAAiB,EACnB,EACA,UAAAC,KACGC,CACL,IAA+C,CAC7C,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,QAAAC,EACA,iBAAAC,CACF,EAAIC,EAAa,EAEXC,EAAWC,EAAM,OAAgC,IAAI,EACrDC,EAAiBD,EAAM,OAAO,EAAK,EACnCE,EAAcF,EAAM,OAAgB,EAAK,EAEzCG,EAAeH,EAAM,QAAQ,IAC1B,SAAS,cAAc,MAAM,GAAK,OACxC,CAAE,CAAA,EAELA,EAAM,UAAU,IAAM,CACpB,GAAI,OAAO,qBAAyB,IAClC,OAGF,MAAMI,EAAiB,IAAM,CAC3B,GAAIL,EAAS,QAAS,CACpB,MAAMM,EAAWN,EAAS,QAAQ,wBAAwB,IACpDO,EAAcP,EAAS,QAAQ,sBAAA,EAAwB,OAE7DF,EAAkBU,IAAkB,CAClC,GAAGA,EACH,IAAKF,EACL,OAAQC,CACV,EAAE,CACJ,CACAJ,EAAY,QAAU,EACxB,EAEMM,EAAe,IAAM,CACpBN,EAAY,UACf,sBAAsBE,CAAc,EACpCF,EAAY,QAAU,GAE1B,EAEA,GAAI,CAACH,EAAS,QAAS,OAEvB,MAAMU,GAAiBrB,GAAA,KAAAA,OAAAA,EAAe,qBAAsB,EAEtDsB,EAAkB,CACtB,WAAY,IAAID,YAAyBA,UACzC,UAAW,CACb,EAEME,EAA2BC,GAAyC,CACxE,GAAI,CAACA,GAAWA,EAAQ,SAAW,EAAG,OACtC,MAAMC,EAAQD,EAAQ,GAEtBX,EAAe,QAAUY,EAAM,eAE3BA,EAAM,eAERV,GAAA,MAAAA,EAAc,iBAAiB,SAAUK,CAAAA,EAGzCL,GAAA,MAAAA,EAAc,oBAAoB,SAAUK,CAAAA,EAG9CX,EAAkBU,IAAkB,CAClC,GAAGA,EACH,UAAWM,EAAM,cACnB,EAAE,CACJ,EAEMC,EAAgB,IAAI,qBACxBH,EACAD,CACF,EAGA,OACEX,EAAS,UACRX,EAAc,iBACb,OAAO,KAAKM,GAAgB,CAAA,CAAE,EAAE,OAAS,IAE3CoB,EAAc,QAAQf,EAAS,OAAO,EAGjC,IAAM,CACXe,EAAc,aACdX,GAAA,MAAAA,EAAc,oBAAoB,SAAUK,CAAAA,CAC9C,CACF,EAAG,CACDd,EACAN,EAAc,gBACdA,GAAA,KAAAA,OAAAA,EAAe,mBACfe,EACAN,CACF,CAAC,EAED,MAAMkB,EAAYxB,IAAmByB,EAAe,QAC9CC,EAAU,CAACF,GAAavB,EAAa,IAAM,EAE3C0B,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAI1B,KAA0B,CAAC,CAACE,EAC9BwB,EAAqB,GACZ1B,KAA0B,CAAC,CAACE,KACrCwB,EAAqB,GAGhB,GAAGvB,KAAWuB,mBACvB,EAEA,OAAIF,EAAgB,KAGlBjB,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACoB,EAAA,IAAiB,EAClBpB,EAAA,cAAC,OAAI,MAAO,CAAE,QAAS,UAAW,CAAA,EAChCA,EAAA,cAACqB,EAAA,CACE,GAAG/B,EACJ,IAAKS,EACL,sBAAuBX,EAAc,sBACrC,mBAAoB,CAClB,GAAGA,EAAc,kBACnB,EACA,mBAAoB8B,IACpB,IAAK,CACH,GAAG/B,EACH,GAAI4B,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,GAEAf,EAAA,cAACsB,EAAU,KAAV,CACC,MAAOpC,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,aAAcA,EAAc,mBAC5B,IAAKA,EAAc,UACrB,EACAY,EAAA,cAACsB,EAAU,KAAV,CAAe,QAASrC,EAAS,UAAWI,CAAW,CAAA,CAC1D,CACF,CACF,CAEJ"}
@@ -8,7 +8,7 @@ export declare const itemStyles: {
8
8
  position: string;
9
9
  px: string;
10
10
  py: string;
11
- '&[disabled]': {
11
+ '&[data-disabled]': {
12
12
  pointerEvents: string;
13
13
  alignContent?: import("@atom-learning/stitches-react/types/css").Globals | import("@atom-learning/stitches-react/types/theme").ScaleValue | import("@atom-learning/stitches-react/types/util").Index | import("@atom-learning/stitches-react/types/css").Property.AlignContent | undefined;
14
14
  alignItems?: import("@atom-learning/stitches-react/types/css").Globals | import("@atom-learning/stitches-react/types/theme").ScaleValue | import("@atom-learning/stitches-react/types/util").Index | import("@atom-learning/stitches-react/types/css").Property.AlignItems | undefined;
@@ -1,2 +1,2 @@
1
- import{Item as e}from"@radix-ui/react-dropdown-menu";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as r}from"../../utilities/style/disabledStyle.js";const o={alignItems:"center",color:"$grey1000",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:400,position:"relative",px:"$3",py:"$2","&[disabled]":{...r,pointerEvents:"none"},'&[aria-current="page"], &:focus':{"&::before":{borderLeft:"2px solid currentColor",content:"",height:"$2",left:0,outline:"none",position:"absolute",transform:"scale(1)"}},"&:focus":{color:"$primary900",outline:"none"},"&:hover":{textDecoration:"underline"}},i=t(e,o);export{i as DropdownMenuItem,o as itemStyles};
1
+ import{Item as e}from"@radix-ui/react-dropdown-menu";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as r}from"../../utilities/style/disabledStyle.js";const o={alignItems:"center",color:"$grey1000",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:400,position:"relative",px:"$3",py:"$2","&[data-disabled]":{...r,pointerEvents:"none"},'&[aria-current="page"], &:focus':{"&::before":{borderLeft:"2px solid currentColor",content:"",height:"$2",left:0,outline:"none",position:"absolute",transform:"scale(1)"}},"&:focus":{color:"$primary900",outline:"none"},"&:hover":{textDecoration:"underline"}},i=t(e,o);export{i as DropdownMenuItem,o as itemStyles};
2
2
  //# sourceMappingURL=DropdownMenuItem.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenuItem.js","sources":["../../../src/components/dropdown-menu/DropdownMenuItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\n\nexport const itemStyles = {\n alignItems: 'center',\n color: '$grey1000',\n cursor: 'pointer',\n display: 'flex',\n fontFamily: '$body',\n fontWeight: 400,\n position: 'relative',\n px: '$3',\n py: '$2',\n '&[disabled]': { ...disabledStyle, pointerEvents: 'none' },\n '&[aria-current=\"page\"], &:focus': {\n '&::before': {\n borderLeft: '2px solid currentColor',\n content: '',\n height: '$2',\n left: 0,\n outline: 'none',\n position: 'absolute',\n transform: 'scale(1)'\n }\n },\n '&:focus': {\n color: '$primary900',\n outline: 'none'\n },\n '&:hover': { textDecoration: 'underline' }\n}\n\nexport const DropdownMenuItem = styled(Item, itemStyles)\n"],"names":["itemStyles","disabledStyle","DropdownMenuItem","styled","Item"],"mappings":"+VAKO,MAAMA,EAAa,CACxB,WAAY,SACZ,MAAO,YACP,OAAQ,UACR,QAAS,OACT,WAAY,QACZ,WAAY,IACZ,SAAU,WACV,GAAI,KACJ,GAAI,KACJ,cAAe,CAAE,GAAGC,EAAe,cAAe,MAAO,EACzD,kCAAmC,CACjC,YAAa,CACX,WAAY,yBACZ,QAAS,GACT,OAAQ,KACR,KAAM,EACN,QAAS,OACT,SAAU,WACV,UAAW,UACb,CACF,EACA,UAAW,CACT,MAAO,cACP,QAAS,MACX,EACA,UAAW,CAAE,eAAgB,WAAY,CAC3C,EAEaC,EAAmBC,EAAOC,EAAMJ,CAAU"}
1
+ {"version":3,"file":"DropdownMenuItem.js","sources":["../../../src/components/dropdown-menu/DropdownMenuItem.tsx"],"sourcesContent":["import { Item } from '@radix-ui/react-dropdown-menu'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\n\nexport const itemStyles = {\n alignItems: 'center',\n color: '$grey1000',\n cursor: 'pointer',\n display: 'flex',\n fontFamily: '$body',\n fontWeight: 400,\n position: 'relative',\n px: '$3',\n py: '$2',\n '&[data-disabled]': { ...disabledStyle, pointerEvents: 'none' },\n '&[aria-current=\"page\"], &:focus': {\n '&::before': {\n borderLeft: '2px solid currentColor',\n content: '',\n height: '$2',\n left: 0,\n outline: 'none',\n position: 'absolute',\n transform: 'scale(1)'\n }\n },\n '&:focus': {\n color: '$primary900',\n outline: 'none'\n },\n '&:hover': { textDecoration: 'underline' }\n}\n\nexport const DropdownMenuItem = styled(Item, itemStyles)\n"],"names":["itemStyles","disabledStyle","DropdownMenuItem","styled","Item"],"mappings":"+VAKO,MAAMA,EAAa,CACxB,WAAY,SACZ,MAAO,YACP,OAAQ,UACR,QAAS,OACT,WAAY,QACZ,WAAY,IACZ,SAAU,WACV,GAAI,KACJ,GAAI,KACJ,mBAAoB,CAAE,GAAGC,EAAe,cAAe,MAAO,EAC9D,kCAAmC,CACjC,YAAa,CACX,WAAY,yBACZ,QAAS,GACT,OAAQ,KACR,KAAM,EACN,QAAS,OACT,SAAU,WACV,UAAW,UACb,CACF,EACA,UAAW,CACT,MAAO,cACP,QAAS,MACX,EACA,UAAW,CAAE,eAAgB,WAAY,CAC3C,EAEaC,EAAmBC,EAAOC,EAAMJ,CAAU"}
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
3
3
  ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
4
4
  }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
5
- theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
5
+ theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
6
6
  appearance?: "outline" | "solid" | "simple" | undefined;
7
7
  size?: "xs" | "sm" | "md" | "lg" | undefined;
8
8
  isRounded?: boolean | "true" | undefined;
@@ -377,7 +377,7 @@ declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styl
377
377
  };
378
378
  }> | undefined;
379
379
  }, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../types").NavigatorActions> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
380
- theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
380
+ theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
381
381
  appearance?: "outline" | "solid" | "simple" | undefined;
382
382
  size?: "xs" | "sm" | "md" | "lg" | undefined;
383
383
  isRounded?: boolean | "true" | undefined;
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
3
3
  ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
4
4
  }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
5
- theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
5
+ theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
6
6
  appearance?: "outline" | "solid" | "simple" | undefined;
7
7
  size?: "xs" | "sm" | "md" | "lg" | undefined;
8
8
  isRounded?: boolean | "true" | undefined;
@@ -377,7 +377,7 @@ declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styl
377
377
  };
378
378
  }> | undefined;
379
379
  }, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../types").NavigatorActions> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
380
- theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
380
+ theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
381
381
  appearance?: "outline" | "solid" | "simple" | undefined;
382
382
  size?: "xs" | "sm" | "md" | "lg" | undefined;
383
383
  isRounded?: boolean | "true" | undefined;
@@ -3,7 +3,7 @@ import { Icon } from '../icon';
3
3
  export declare const StyledHandle: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
4
4
  ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
5
5
  }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
6
- theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
6
+ theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
7
7
  appearance?: "outline" | "solid" | "simple" | undefined;
8
8
  size?: "xs" | "sm" | "md" | "lg" | undefined;
9
9
  isRounded?: boolean | "true" | undefined;
@@ -378,7 +378,7 @@ export declare const StyledHandle: import("@atom-learning/stitches-react/types/s
378
378
  };
379
379
  }> | undefined;
380
380
  }, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../types").NavigatorActions> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
381
- theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
381
+ theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
382
382
  appearance?: "outline" | "solid" | "simple" | undefined;
383
383
  size?: "xs" | "sm" | "md" | "lg" | undefined;
384
384
  isRounded?: boolean | "true" | undefined;
@@ -1,2 +1,2 @@
1
- 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};
1
+ 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};
2
2
  //# sourceMappingURL=Stepper.js.map
@@ -378,10 +378,7 @@ type TableProps = React.ComponentProps<typeof StyledTable> & {
378
378
  scrollContainerkey?: string;
379
379
  maxRowDepth?: number;
380
380
  };
381
- export declare const Table: {
382
- ({ size, corners, numberOfStickyColumns, scrollContainerCss, scrollContainerkey, ...rest }: TableProps): React.JSX.Element;
383
- displayName: string;
384
- } & {
381
+ export declare const Table: React.ForwardRefExoticComponent<Omit<TableProps, "ref"> & React.RefAttributes<HTMLTableElement>> & {
385
382
  Body: {
386
383
  ({ striped, ...rest }: Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & {
387
384
  ref?: ((instance: HTMLTableSectionElement | null) => void) | React.RefObject<HTMLTableSectionElement> | null | undefined;
@@ -1,2 +1,2 @@
1
- import*as i from"react";import{styled as b}from"../../stitches.js";import{TableBody as c}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 u,TableRow as y}from"./TableRow.js";import{TableStickyColumnsContainer as a}from"./TableStickyColumnsContainer.js";const h=b("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"}},[`${u}:last-child`]:{[`${e}:first-child`]:{borderBottomLeftRadius:"$0"},[`${e}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),s=({size:m="md",corners:n="round",numberOfStickyColumns:t=0,scrollContainerCss:d,scrollContainerkey:$,...p})=>{const l=i.createElement(h,{size:m,corners:n,...p});return t?i.createElement(a,{key:$,css:d,numberOfStickyColumns:t},l):l},T=Object.assign(s,{Body:c,Cell:e,Footer:f,FooterCell:r,Header:C,HeaderCell:o,Row:y,StickyColumnsContainer:a});s.displayName="Table";export{T as Table};
1
+ import*as t from"react";import{styled as b}from"../../stitches.js";import{TableBody as c}from"./TableBody.js";import{TableCell as e}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 o}from"./TableHeaderCell.js";import{StyledRow as y,TableRow as h}from"./TableRow.js";import{TableStickyColumnsContainer as l}from"./TableStickyColumnsContainer.js";const T=b("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",position:"relative",zIndex:0,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"}},[`${y}:last-child`]:{[`${e}:first-child`]:{borderBottomLeftRadius:"$0"},[`${e}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),s=t.forwardRef(({size:n="md",corners:d="round",numberOfStickyColumns:i=0,scrollContainerCss:m,scrollContainerkey:$,...f},p)=>{const a=t.createElement(T,{ref:p,size:n,corners:d,...f});return i?t.createElement(l,{key:$,css:m,numberOfStickyColumns:i},a):a}),g=Object.assign(s,{Body:c,Cell:e,Footer:C,FooterCell:r,Header:u,HeaderCell:o,Row:h,StickyColumnsContainer:l});s.displayName="Table";export{g as Table};
2
2
  //# sourceMappingURL=Table.js.map
@@ -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 scrollContainerkey?: string\n maxRowDepth?: number\n}\n\nconst TableComponent = ({\n size = 'md',\n corners = 'round',\n numberOfStickyColumns = 0,\n scrollContainerCss,\n scrollContainerkey,\n ...rest\n}: TableProps) => {\n const tableComponent = <StyledTable size={size} corners={corners} {...rest} />\n\n if (numberOfStickyColumns) {\n return (\n <TableStickyColumnsContainer\n key={scrollContainerkey}\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","scrollContainerkey","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,EASKI,EAAiB,CAAC,CACtB,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,mBAAAC,KACGC,CACL,IAAkB,CAChB,MAAMC,EAAiBC,EAAA,cAACd,EAAA,CAAY,KAAMO,EAAM,QAASC,EAAU,GAAGI,CAAM,CAAA,EAE5E,OAAIH,EAEAK,EAAA,cAACC,EAAA,CACC,IAAKJ,EACL,IAAKD,EACL,sBAAuBD,CAAAA,EAEtBI,CACH,EAIGA,CACT,EAEaG,EAAQ,OAAO,OAAOV,EAAgB,CACjD,KAAMW,EACN,KAAMf,EACN,OAAQgB,EACR,WAAYd,EACZ,OAAQe,EACR,WAAYhB,EACZ,IAAKiB,EACL,uBAAwBL,CAC1B,CAAC,EAEDT,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 position: 'relative',\n zIndex: 0,\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 scrollContainerkey?: string\n maxRowDepth?: number\n}\n\nconst TableComponent = React.forwardRef<HTMLTableElement, TableProps>(\n (\n {\n size = 'md',\n corners = 'round',\n numberOfStickyColumns = 0,\n scrollContainerCss,\n scrollContainerkey,\n ...rest\n },\n ref\n ) => {\n const tableComponent = (\n <StyledTable ref={ref} size={size} corners={corners} {...rest} />\n )\n\n if (numberOfStickyColumns) {\n return (\n <TableStickyColumnsContainer\n key={scrollContainerkey}\n css={scrollContainerCss}\n numberOfStickyColumns={numberOfStickyColumns}\n >\n {tableComponent}\n </TableStickyColumnsContainer>\n )\n }\n\n return tableComponent\n }\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","React","size","corners","numberOfStickyColumns","scrollContainerCss","scrollContainerkey","rest","ref","tableComponent","TableStickyColumnsContainer","Table","TableBody","TableFooter","TableHeader","TableRow"],"mappings":"4eAaA,MAAMA,EAAcC,EAAO,QAAS,CAClC,eAAgB,WAChB,cAAe,EACf,WAAY,QACZ,SAAU,MACV,MAAO,OACP,SAAU,WACV,OAAQ,EACR,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,CACV,CAAA,CACF,CACF,CAAC,EASKI,EAAiBC,EAAM,WAC3B,CACE,CACE,KAAAC,EAAO,KACP,QAAAC,EAAU,QACV,sBAAAC,EAAwB,EACxB,mBAAAC,EACA,mBAAAC,KACGC,CACL,EACAC,IACG,CACH,MAAMC,EACJR,EAAA,cAACP,EAAA,CAAY,IAAKc,EAAK,KAAMN,EAAM,QAASC,EAAU,GAAGI,CAAAA,CAAM,EAGjE,OAAIH,EAEAH,EAAA,cAACS,EAAA,CACC,IAAKJ,EACL,IAAKD,EACL,sBAAuBD,CAAAA,EAEtBK,CACH,EAIGA,CACT,CACF,EAEaE,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"}
@@ -1,2 +1,2 @@
1
- import r from"react";import{Box as a}from"../box/Box.js";import{useStickyColumnsCss as m}from"./useStickyColumnsCss.js";const h=({children:s,numberOfStickyColumns:t=0,css:c,...i})=>{const[e,p]=r.useState(!1),o=r.useRef(null),{columnsCss:u}=m({numberOfStickyColumns:t,wrapperRef:o});return r.createElement(a,{onScroll:l=>{const n=l.currentTarget.scrollWidth>l.currentTarget.clientWidth;n!==e&&p(n)},role:"scrollbar",ref:o,css:{overflow:"auto",maxWidth:"100%",...u,[`& 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},s)};export{h as TableStickyColumnsContainer};
1
+ import e from"react";import{Box as m}from"../box/Box.js";import{useStickyColumnsCss as u}from"./useStickyColumnsCss.js";const h=({children:n,numberOfStickyColumns:t=0,css:s,...c})=>{const[o,i]=e.useState(!1),r=e.useRef(null),{columnsCss:a}=u({numberOfStickyColumns:t,wrapperRef:r});return e.createElement(m,{onScroll:p=>{const l=p.currentTarget.scrollLeft>0;l!==o&&i(l)},role:"scrollbar",ref:r,css:{overflow:"auto",overscrollBehaviorX:"contain",maxWidth:"100%",position:"relative",...a,[`& td:nth-child(${t}), th:nth-child(${t})`]:{...o&&{boxShadow:"$colors$alpha200 -2px -3px 9px 1px",clipPath:"inset(0px -10px 0px 0px)"}},"& td":{bg:"inherit"},...s},...c},n)};export{h as TableStickyColumnsContainer};
2
2
  //# sourceMappingURL=TableStickyColumnsContainer.js.map
@@ -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 wrapperRef = React.useRef(null)\n const { columnsCss } = useStickyColumnsCss({\n numberOfStickyColumns,\n wrapperRef\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","css","restProps","hasScroll","setHasScroll","React","wrapperRef","columnsCss","useStickyColumnsCss","Box","event","newHasScroll"],"mappings":"wHAOa,MAAAA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,IAAAC,KACGC,CACL,IAGO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,WAAAE,CAAW,EAAIC,EAAoB,CACzC,sBAAAR,EACA,WAAAM,CACF,CAAC,EAUD,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 css,\n ...restProps\n}: React.PropsWithChildren<{\n numberOfStickyColumns?: number\n css?: CSS\n}>) => {\n const [hasScroll, setHasScroll] = React.useState<boolean>(false)\n const wrapperRef = React.useRef(null)\n const { columnsCss } = useStickyColumnsCss({\n numberOfStickyColumns,\n wrapperRef\n })\n\n const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {\n const newHasScroll = event.currentTarget.scrollLeft > 0\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 overscrollBehaviorX: 'contain',\n maxWidth: '100%',\n position: 'relative',\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","wrapperRef","columnsCss","useStickyColumnsCss","Box","event","newHasScroll"],"mappings":"wHAOa,MAAAA,EAA8B,CAAC,CAC1C,SAAAC,EACA,sBAAAC,EAAwB,EACxB,IAAAC,KACGC,CACL,IAGO,CACL,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzDC,EAAaD,EAAM,OAAO,IAAI,EAC9B,CAAE,WAAAE,CAAW,EAAIC,EAAoB,CACzC,sBAAAR,EACA,WAAAM,CACF,CAAC,EASD,OACED,EAAA,cAACI,EAAA,CACC,SATkBC,GAAyC,CAC7D,MAAMC,EAAeD,EAAM,cAAc,WAAa,EAClDC,IAAiBR,GACnBC,EAAaO,CAAY,CAE7B,EAKI,KAAK,YACL,IAAKL,EACL,IAAK,CACH,SAAU,OACV,oBAAqB,UACrB,SAAU,OACV,SAAU,WACV,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"}
@@ -1503,7 +1503,7 @@ export declare const TopBar: {
1503
1503
  ActionIcon: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
1504
1504
  ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
1505
1505
  }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
1506
- theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
1506
+ theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
1507
1507
  appearance?: "outline" | "solid" | "simple" | undefined;
1508
1508
  size?: "xs" | "sm" | "md" | "lg" | undefined;
1509
1509
  isRounded?: boolean | "true" | undefined;
@@ -1878,7 +1878,7 @@ export declare const TopBar: {
1878
1878
  };
1879
1879
  }> | undefined;
1880
1880
  }, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../types").NavigatorActions> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
1881
- theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
1881
+ theme?: "success" | "danger" | "warning" | "primary" | "white" | "neutral" | undefined;
1882
1882
  appearance?: "outline" | "solid" | "simple" | undefined;
1883
1883
  size?: "xs" | "sm" | "md" | "lg" | undefined;
1884
1884
  isRounded?: boolean | "true" | undefined;
@@ -1,2 +1,2 @@
1
- import*as o from"react";import{styled as r}from"../../stitches.js";import{useWindowScrollPosition as s}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as m}from"../divider/Divider.js";import{Flex as p}from"../flex/Flex.js";import{colorSchemes as c}from"./stitches.topBar.colorscheme.config.js";import{TopBarActionIcon as l}from"./TopBarActionIcon.js";import{TopBarBrand as h,TopBarBrandLogo as g,TopBarBrandName as f}from"./TopBarBrand.js";const x=()=>o.createElement(m,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),B=r("div",{bg:"$background",position:"sticky",display:"flex",alignItems:"center",zIndex:1,transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1);"}},size:{md:{height:"$6"},lg:{height:"$7"}},appearance:{standard:{width:"100vw",top:"0",borderBottom:"1px solid $borderBottom"},rounded:{width:"100%",top:"$2",p:"$2",border:"1px solid #ffffff",borderRadius:"$round"}}}}),$=r(p,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),e=({size:t="md",className:a=c.light,appearance:i="standard",...d})=>{const{y:n}=s();return o.createElement(B,{className:a,hasScrolled:!!n,appearance:i,size:t},o.createElement($,{...d}))},b=Object.assign(e,{Brand:h,BrandLogo:g,BrandName:f,ActionIcon:l,Divider:x});e.displayName="TopBar";export{b as TopBar};
1
+ import*as o from"react";import{styled as r}from"../../stitches.js";import{useWindowScrollPosition as s}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as m}from"../divider/Divider.js";import{Flex as p}from"../flex/Flex.js";import{colorSchemes as c}from"./stitches.topBar.colorscheme.config.js";import{TopBarActionIcon as l}from"./TopBarActionIcon.js";import{TopBarBrand as h,TopBarBrandLogo as g,TopBarBrandName as x}from"./TopBarBrand.js";const f=()=>o.createElement(m,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),B=r("div",{bg:"$background",position:"sticky",display:"flex",alignItems:"center",zIndex:1,transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1)"}},size:{md:{height:"$6"},lg:{height:"$7"}},appearance:{standard:{width:"100vw",maxWidth:"100%",top:"0",borderBottom:"1px solid $borderBottom"},rounded:{width:"100%",top:"$2",p:"$2",border:"1px solid #ffffff",borderRadius:"$round"}}}}),$=r(p,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),e=({size:t="md",className:a=c.light,appearance:i="standard",...d})=>{const{y:n}=s();return o.createElement(B,{className:a,hasScrolled:!!n,appearance:i,size:t},o.createElement($,{...d}))},b=Object.assign(e,{Brand:h,BrandLogo:g,BrandName:x,ActionIcon:l,Divider:f});e.displayName="TopBar";export{b as TopBar};
2
2
  //# sourceMappingURL=TopBar.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { useWindowScrollPosition } from '~/utilities/hooks/useWindowScrollPosition'\n\nimport { Divider } from '../divider'\nimport { Flex } from '../flex'\nimport { colorSchemes as topBarColorSchemes } from './stitches.topBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n <Divider orientation=\"vertical\" css={{ height: '$2', bg: '$divider' }} />\n)\n\nconst StyledRoot = styled('div', {\n bg: '$background',\n position: 'sticky',\n display: 'flex',\n alignItems: 'center',\n\n zIndex: 1,\n transition: 'box-shadow .2s ease-out',\n variants: {\n hasScrolled: {\n true: { boxShadow: '0px 4px 4px -2px rgba(31, 31, 31, 0.1);' }\n },\n size: {\n md: { height: '$6' },\n lg: { height: '$7' }\n },\n appearance: {\n standard: {\n width: '100vw',\n top: '0',\n borderBottom: '1px solid $borderBottom'\n },\n rounded: {\n width: '100%',\n top: '$2',\n p: '$2',\n border: '1px solid #ffffff',\n borderRadius: '$round'\n }\n }\n }\n})\n\nconst Container = styled(Flex, {\n alignItems: 'center',\n height: '$4',\n mx: '$4',\n width: '100%',\n '@md': {\n mx: '$5'\n }\n})\n\ntype StyledRootProps = React.ComponentProps<typeof StyledRoot>\n\ntype TopBarProps = StyledRootProps & {\n css?: CSS\n className?: string\n}\n\nconst TopBarComponent = ({\n size = 'md',\n className = topBarColorSchemes['light'],\n appearance = 'standard',\n ...props\n}: React.PropsWithChildren<TopBarProps>) => {\n const { y: scrollPositionY } = useWindowScrollPosition()\n\n return (\n <StyledRoot\n className={className}\n hasScrolled={!!scrollPositionY}\n appearance={appearance}\n size={size}\n >\n <Container {...props} />\n </StyledRoot>\n )\n}\n\nexport const TopBar = Object.assign(TopBarComponent, {\n Brand: TopBarBrand,\n BrandLogo: TopBarBrandLogo,\n BrandName: TopBarBrandName,\n ActionIcon: TopBarActionIcon,\n Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","Container","Flex","TopBarComponent","size","className","topBarColorSchemes","appearance","props","scrollPositionY","useWindowScrollPosition","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"8cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,EAAG,EAGnEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,cACJ,SAAU,SACV,QAAS,OACT,WAAY,SAEZ,OAAQ,EACR,WAAY,0BACZ,SAAU,CACR,YAAa,CACX,KAAM,CAAE,UAAW,yCAA0C,CAC/D,EACA,KAAM,CACJ,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,WAAY,CACV,SAAU,CACR,MAAO,QACP,IAAK,IACL,aAAc,yBAChB,EACA,QAAS,CACP,MAAO,OACP,IAAK,KACL,EAAG,KACH,OAAQ,oBACR,aAAc,QAChB,CACF,CACF,CACF,CAAC,EAEKC,EAAYD,EAAOE,EAAM,CAC7B,WAAY,SACZ,OAAQ,KACR,GAAI,KACJ,MAAO,OACP,MAAO,CACL,GAAI,IACN,CACF,CAAC,EASKC,EAAkB,CAAC,CACvB,KAAAC,EAAO,KACP,UAAAC,EAAYC,EAAmB,MAC/B,WAAAC,EAAa,cACVC,CACL,IAA4C,CAC1C,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAAAA,EAE/B,OACEb,EAAA,cAACE,EAAA,CACC,UAAWM,EACX,YAAa,CAAC,CAACI,EACf,WAAYF,EACZ,KAAMH,CAAAA,EAENP,EAAA,cAACI,EAAA,CAAW,GAAGO,CAAO,CAAA,CACxB,CAEJ,EAEaG,EAAS,OAAO,OAAOR,EAAiB,CACnD,MAAOS,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,QAASnB,CACX,CAAC,EAEDO,EAAgB,YAAc"}
1
+ {"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { useWindowScrollPosition } from '~/utilities/hooks/useWindowScrollPosition'\n\nimport { Divider } from '../divider'\nimport { Flex } from '../flex'\nimport { colorSchemes as topBarColorSchemes } from './stitches.topBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n <Divider orientation=\"vertical\" css={{ height: '$2', bg: '$divider' }} />\n)\n\nconst StyledRoot = styled('div', {\n bg: '$background',\n position: 'sticky',\n display: 'flex',\n alignItems: 'center',\n\n zIndex: 1,\n transition: 'box-shadow .2s ease-out',\n variants: {\n hasScrolled: {\n true: { boxShadow: '0px 4px 4px -2px rgba(31, 31, 31, 0.1)' }\n },\n size: {\n md: { height: '$6' },\n lg: { height: '$7' }\n },\n appearance: {\n standard: {\n width: '100vw',\n maxWidth: '100%',\n top: '0',\n borderBottom: '1px solid $borderBottom'\n },\n rounded: {\n width: '100%',\n top: '$2',\n p: '$2',\n border: '1px solid #ffffff',\n borderRadius: '$round'\n }\n }\n }\n})\n\nconst Container = styled(Flex, {\n alignItems: 'center',\n height: '$4',\n mx: '$4',\n width: '100%',\n '@md': {\n mx: '$5'\n }\n})\n\ntype StyledRootProps = React.ComponentProps<typeof StyledRoot>\n\ntype TopBarProps = StyledRootProps & {\n css?: CSS\n className?: string\n}\n\nconst TopBarComponent = ({\n size = 'md',\n className = topBarColorSchemes['light'],\n appearance = 'standard',\n ...props\n}: React.PropsWithChildren<TopBarProps>) => {\n const { y: scrollPositionY } = useWindowScrollPosition()\n\n return (\n <StyledRoot\n className={className}\n hasScrolled={!!scrollPositionY}\n appearance={appearance}\n size={size}\n >\n <Container {...props} />\n </StyledRoot>\n )\n}\n\nexport const TopBar = Object.assign(TopBarComponent, {\n Brand: TopBarBrand,\n BrandLogo: TopBarBrandLogo,\n BrandName: TopBarBrandName,\n ActionIcon: TopBarActionIcon,\n Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","Container","Flex","TopBarComponent","size","className","topBarColorSchemes","appearance","props","scrollPositionY","useWindowScrollPosition","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"8cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,CAAA,CAAG,EAGnEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,cACJ,SAAU,SACV,QAAS,OACT,WAAY,SAEZ,OAAQ,EACR,WAAY,0BACZ,SAAU,CACR,YAAa,CACX,KAAM,CAAE,UAAW,wCAAyC,CAC9D,EACA,KAAM,CACJ,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,WAAY,CACV,SAAU,CACR,MAAO,QACP,SAAU,OACV,IAAK,IACL,aAAc,yBAChB,EACA,QAAS,CACP,MAAO,OACP,IAAK,KACL,EAAG,KACH,OAAQ,oBACR,aAAc,QAChB,CACF,CACF,CACF,CAAC,EAEKC,EAAYD,EAAOE,EAAM,CAC7B,WAAY,SACZ,OAAQ,KACR,GAAI,KACJ,MAAO,OACP,MAAO,CACL,GAAI,IACN,CACF,CAAC,EASKC,EAAkB,CAAC,CACvB,KAAAC,EAAO,KACP,UAAAC,EAAYC,EAAmB,MAC/B,WAAAC,EAAa,cACVC,CACL,IAA4C,CAC1C,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAE/B,EAAA,OACEb,EAAA,cAACE,EAAA,CACC,UAAWM,EACX,YAAa,CAAC,CAACI,EACf,WAAYF,EACZ,KAAMH,CAENP,EAAAA,EAAA,cAACI,EAAA,CAAW,GAAGO,CAAAA,CAAO,CACxB,CAEJ,EAEaG,EAAS,OAAO,OAAOR,EAAiB,CACnD,MAAOS,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,QAASnB,CACX,CAAC,EAEDO,EAAgB,YAAc"}