@atom-learning/components 5.0.1 → 5.2.0-beta.1

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

@@ -3,11 +3,12 @@ import { CSS } from '../../stitches';
 import { Table } from '../table';
 import { TableBody } from '../table/TableBody';
 import { DataTableHead } from './DataTableHead';
-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'>> & {
+export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children' | 'numberOfStickyColumns' | 'numberOfStickyRows'> & Partial<Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {
     scrollOptions?: {
         hasStickyHeader?: boolean;
         headerCss?: CSS;
         numberOfStickyColumns?: number;
+        numberOfStickyRows?: number;
         scrollContainerCss?: CSS;
     };
 };

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{Table as f}from"../table/Table.js";import{DataTable as s}from"./DataTable.js";import{AsyncDataState as S}from"./DataTable.types.js";import{useDataTable as E}from"./DataTableContext.js";import{DataTableLoading as k}from"./DataTableLoading.js";const D=({sortable:l,striped:m,theme:c,css:i,scrollOptions:t={numberOfStickyColumns:0,hasStickyHeader:!1},...p})=>{const{asyncDataState:u,getTotalRows:b,getCanSomeRowsExpand:r,enableRowSelection:n,tableId:y}=E(),o=u===S.PENDING,C=!o&&b()===0,d=()=>{let a=0;return r()&&!!n?a=2:(r()||!!n)&&(a=1),`${y}_${a}_control_columns`};return C?null:e.createElement(e.Fragment,null,e.createElement(k,null),e.createElement(f,{...p,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:t.scrollContainerCss,scrollContainerkey:d(),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})))};export{D as DataTableTable};
+import*as e from"react";import{Table as S}from"../table/Table.js";import{DataTable as s}from"./DataTable.js";import{AsyncDataState as d}from"./DataTable.types.js";import{useDataTable as k}from"./DataTableContext.js";import{DataTableLoading as C}from"./DataTableLoading.js";const E=({sortable:l,striped:m,theme:c,css:i,scrollOptions:t={numberOfStickyColumns:0,numberOfStickyRows:0,hasStickyHeader:!1},...u})=>{const{asyncDataState:b,getTotalRows:y,getCanSomeRowsExpand:o,enableRowSelection:r,tableId:p}=k(),f=(()=>{let a=0;return o()&&!!r?a=2:(o()||!!r)&&(a=1),`${p}_${a}_control_columns`})(),n=b===d.PENDING;return!n&&y()===0?null:e.createElement(e.Fragment,null,e.createElement(C,null),e.createElement(S,{key:f,...u,numberOfStickyColumns:t.numberOfStickyColumns,numberOfStickyRows:t.numberOfStickyRows,scrollContainerCss:t.scrollContainerCss,css:{...i,...n&&{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})))};export{E 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 { 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  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    hasStickyHeader: false\n  },\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} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","enableRowSelection","tableId","useDataTable","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","React","DataTableLoading","Table","DataTable"],"mappings":"iRA4BO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CACJ,eAAAC,EACA,aAAAC,EACA,qBAAAC,EACA,mBAAAC,EACA,QAAAC,CACF,EAAIC,EAAa,EAEXC,EAAYN,IAAmBO,EAAe,QAC9CC,EAAU,CAACF,GAAaL,EAAmB,IAAA,EAE3CQ,EAA0B,IAAc,CAC5C,IAAIC,EAAqB,EAEzB,OAAIR,EAAAA,GAA0B,CAAC,CAACC,EAC9BO,EAAqB,GACZR,EAAqB,GAAK,CAAC,CAACC,KACrCO,EAAqB,GAGhB,GAAGN,KAAWM,mBACvB,EAEA,OAAIF,EAAgB,KAGlBG,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGd,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBW,EAAwB,EAC5C,IAAK,CACH,GAAGZ,EACH,GAAIS,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAK,EAAA,cAACG,EAAU,KAAV,CACC,MAAOlB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SACrB,CAAA,EACAa,EAAA,cAACG,EAAU,KAAV,CAAe,QAASnB,CAAS,CAAA,CACpC,CACF,CAEJ"}
+{"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' | 'numberOfStickyRows'\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      numberOfStickyRows?: number\n      scrollContainerCss?: CSS\n    }\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    numberOfStickyRows: 0,\n    hasStickyHeader: false\n  },\n  ...props\n}: DataTableTableProps) => {\n  const { asyncDataState, getTotalRows, getCanSomeRowsExpand, enableRowSelection, tableId } = useDataTable()\n\n  const key = ((): 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  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        key={key}\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        numberOfStickyRows={scrollOptions.numberOfStickyRows}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\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} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","enableRowSelection","tableId","useDataTable","key","controlColumnCount","isPending","AsyncDataState","React","DataTableLoading","Table","DataTable"],"mappings":"iRA6Ba,MAAAA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,mBAAoB,EACpB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CAAE,eAAAC,EAAgB,aAAAC,EAAc,qBAAAC,EAAsB,mBAAAC,EAAoB,QAAAC,CAAQ,EAAIC,EAAAA,EAEtFC,GAAO,IAAc,CACzB,IAAIC,EAAqB,EAEzB,OAAIL,EAAqB,GAAK,CAAC,CAACC,EAC9BI,EAAqB,GACZL,EAA0B,GAAA,CAAC,CAACC,KACrCI,EAAqB,GAGhB,GAAGH,KAAWG,mBACvB,GAEMC,EAAAA,EAAYR,IAAmBS,EAAe,QAGpD,MAFgB,CAACD,GAAaP,EAAa,IAAM,EAE7B,KAGlBS,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACC,IAAKN,EACJ,GAAGP,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,mBAAoBA,EAAc,mBAClC,IAAK,CACH,GAAGD,EACH,GAAIW,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,GAEAE,EAAA,cAACG,EAAU,KAAV,CACC,MAAOjB,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SACrB,CAAA,EACAY,EAAA,cAACG,EAAU,KAAV,CAAe,QAASlB,CAAS,CAAA,CACpC,CACF,CAEJ"}

package/dist/components/index.d.ts

@@ -85,3 +85,4 @@ export { Video } from './video';
 export { KeyboardShortcut } from './keyboard-shortcut';
 export { SegmentedControl } from './segmented-control';
 export { FileDrop, useFileDrop } from './file-drop';
+export { ScrollableContainer, ScrollableContainerProvider, useScrollableContainer } from './scrollable-container';

package/dist/components/pagination/PaginationPopover.js

@@ -1,2 +1,2 @@
-import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}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"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.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"../drawer/Drawer.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 g}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 f}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"../navigation-menu-vertical/NavigationMenuVertical.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"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.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"../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"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.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"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import"../segmented-control/SegmentedControlContext.js";import"../segmented-control/SegmentedControlContent.js";import"../segmented-control/SegmentedControlDescription.js";import"../segmented-control/SegmentedControlHeading.js";import"../segmented-control/SegmentedControlItem.js";import"../segmented-control/SegmentedControlItemList.js";import"../segmented-control/SegmentedControlRoot.js";import"../file-drop/FileDrop.js";import"../file-drop/FileDropContext.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:n,labels:i}=d(),p=Array.from({length:n},(o,l)=>l+1),[a,m]=t.useState(!1);return t.createElement(r,{open:a,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(g,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:"$1",justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
+import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}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"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.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"../drawer/Drawer.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 g}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 f}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"../navigation-menu-vertical/NavigationMenuVertical.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"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.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"../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"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.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"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import"../segmented-control/SegmentedControlContext.js";import"../segmented-control/SegmentedControlContent.js";import"../segmented-control/SegmentedControlDescription.js";import"../segmented-control/SegmentedControlHeading.js";import"../segmented-control/SegmentedControlItem.js";import"../segmented-control/SegmentedControlItemList.js";import"../segmented-control/SegmentedControlRoot.js";import"../file-drop/FileDrop.js";import"../file-drop/FileDropContext.js";import"../scrollable-container/ScrollableContainer.js";import"../scrollable-container/ScrollableContainer.context.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:n,labels:i}=d(),p=Array.from({length:n},(o,l)=>l+1),[a,m]=t.useState(!1);return t.createElement(r,{open:a,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(g,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:"$1",justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E 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 { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const { pagesCount, labels } = usePagination()\n  const paginationItems = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n  return (\n    <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n      <Popover.Trigger asChild>\n        {children || (\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        )}\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              <PaginationPage\n                key={pageNumber}\n                pageNumber={pageNumber}\n                onClick={() => setIsOpen(false)}\n              />\n            )\n          })}\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"2kIAOO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAC3DC,EAAAA,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZO,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAC7DD,EAAAA,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,KACL,eAAgB,QAClB,GAECV,GAAA,KAAA,OAAAA,EAAiB,IAAKW,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMP,EAAU,EAAK,EAChC,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 { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n  children\n}: React.PropsWithChildren<unknown>) => {\n  const { pagesCount, labels } = usePagination()\n  const paginationItems = Array.from(\n    { length: pagesCount },\n    (_, index) => index + 1\n  )\n\n  const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n  return (\n    <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n      <Popover.Trigger asChild>\n        {children || (\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        )}\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              <PaginationPage\n                key={pageNumber}\n                pageNumber={pageNumber}\n                onClick={() => setIsOpen(false)}\n              />\n            )\n          })}\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"isIAOO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAC3DC,EAAAA,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZO,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAC7DD,EAAAA,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,KACL,eAAgB,QAClB,GAECV,GAAA,KAAA,OAAAA,EAAiB,IAAKW,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMP,EAAU,EAAK,EAChC,CAGN,CAAA,CACF,CACF,CAEJ"}

package/dist/components/scrollable-container/ScrollableContainer.context.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface IScrollableContainerContext {
+    hasProvider: boolean;
+    scrollableContainer?: HTMLDivElement | null;
+    hasScrollYAxis: boolean;
+    hasScrolledYAxis: boolean;
+    hasScrolledToEndYAxis: boolean;
+    hasScrollXAxis: boolean;
+    hasScrolledXAxis: boolean;
+    hasScrolledToEndXAxis: boolean;
+    scrollProgressYAxis: number;
+    scrollbarWidthYAxis: number;
+    scrollProgressXAxis: number;
+    scrollbarWidthXAxis: number;
+    scrollableEl?: HTMLElement | null;
+    setScrollableEl?: (HTMLElement: any) => void;
+    containerEl?: HTMLElement | null;
+    setContainerEl?: (HTMLElement: any) => void;
+}
+export declare const ScrollableContainerContext: React.Context<IScrollableContainerContext>;
+export declare const ScrollableContainerProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/components/scrollable-container/ScrollableContainer.context.js

@@ -0,0 +1,2 @@
+import*as s from"react";import{useCallbackRefState as X}from"../../utilities/hooks/useCallbackRef.js";import{useResizeObserver as H}from"../../utilities/hooks/useResizeObserver.js";const Y=s.createContext({hasProvider:!1,hasScrollYAxis:!1,hasScrolledYAxis:!1,hasScrolledToEndYAxis:!1,hasScrollXAxis:!1,hasScrolledXAxis:!1,hasScrolledToEndXAxis:!1,scrollProgressYAxis:0,scrollbarWidthYAxis:0,scrollProgressXAxis:0,scrollbarWidthXAxis:0}),v=({children:W})=>{const[l,o]=X(),[e,i]=X(),[t,g]=s.useState(!1),[c,T]=s.useState(!1),[a,b]=s.useState(0),[h,u]=s.useState(0);H({delay:0,elements:[e,l],onResize:()=>{!l||!e||(g(l.scrollHeight>l.clientHeight),T(l.scrollWidth>l.clientWidth),b(e.clientHeight-l.clientHeight),u(e.clientWidth-l.clientWidth))}});const[{hasScrolledYAxis:d,hasScrolledToEndYAxis:n,hasScrolledXAxis:x,hasScrolledToEndXAxis:S},m]=s.useState({hasScrolledYAxis:!1,hasScrolledToEndYAxis:!1,hasScrolledXAxis:!1,hasScrolledToEndXAxis:!1}),A=(()=>!l||l.scrollHeight<=l.clientHeight?0:l.scrollTop/(l.scrollHeight-l.clientHeight))(),E=(()=>!l||l.scrollWidth<=l.clientWidth?0:l.scrollLeft/(l.scrollWidth-l.clientWidth))();s.useEffect(()=>{if(!l)return;const r=()=>{m({hasScrolledYAxis:!!l.scrollTop,hasScrolledToEndYAxis:Math.abs(l.scrollHeight-l.clientHeight-l.scrollTop)<1,hasScrolledXAxis:!!l.scrollLeft,hasScrolledToEndXAxis:Math.abs(l.scrollWidth-l.clientWidth-l.scrollLeft)<1})};return r(),l.addEventListener("scroll",r),()=>{l.removeEventListener("scroll",r)}},[l]);const f=s.useMemo(()=>({hasProvider:!0,hasScrollYAxis:t,hasScrolledYAxis:d,hasScrolledToEndYAxis:n,scrollProgressYAxis:A,scrollbarWidthYAxis:a,hasScrollXAxis:c,hasScrolledXAxis:x,hasScrolledToEndXAxis:S,scrollProgressXAxis:E,scrollbarWidthXAxis:h,scrollableEl:l,setScrollableEl:o,containerEl:e,setContainerEl:i}),[t,d,n,A,a,c,x,S,E,h,l,o,e,i]);return s.createElement(Y.Provider,{value:f},W)};export{Y as ScrollableContainerContext,v as ScrollableContainerProvider};
+//# sourceMappingURL=ScrollableContainer.context.js.map

package/dist/components/scrollable-container/ScrollableContainer.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableContainer.context.js","sources":["../../../src/components/scrollable-container/ScrollableContainer.context.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useResizeObserver } from '~/utilities/hooks/useResizeObserver'\n\nexport interface IScrollableContainerContext {\n  hasProvider: boolean\n  scrollableContainer?: HTMLDivElement | null\n  hasScrollYAxis: boolean\n  hasScrolledYAxis: boolean\n  hasScrolledToEndYAxis: boolean\n  hasScrollXAxis: boolean\n  hasScrolledXAxis: boolean\n  hasScrolledToEndXAxis: boolean\n  scrollProgressYAxis: number\n  scrollbarWidthYAxis: number\n  scrollProgressXAxis: number\n  scrollbarWidthXAxis: number\n  scrollableEl?: HTMLElement | null\n  setScrollableEl?: (HTMLElement) => void\n  containerEl?: HTMLElement | null\n  setContainerEl?: (HTMLElement) => void\n}\n\nexport const ScrollableContainerContext = React.createContext<IScrollableContainerContext>({\n  hasProvider: false,\n  hasScrollYAxis: false,\n  hasScrolledYAxis: false,\n  hasScrolledToEndYAxis: false,\n  hasScrollXAxis: false,\n  hasScrolledXAxis: false,\n  hasScrolledToEndXAxis: false,\n  scrollProgressYAxis: 0,\n  scrollbarWidthYAxis: 0,\n  scrollProgressXAxis: 0,\n  scrollbarWidthXAxis: 0\n})\n\nexport const ScrollableContainerProvider = ({ children }: { children: React.ReactNode }) => {\n  const [scrollableEl, setScrollableEl] = useCallbackRefState()\n  const [containerEl, setContainerEl] = useCallbackRefState()\n\n  const [hasScrollYAxis, setHasScrollYAxis] = React.useState<boolean>(false)\n  const [hasScrollXAxis, setHasScrollXAxis] = React.useState<boolean>(false)\n  const [scrollbarWidthYAxis, setScrollbarWidthYAxis] = React.useState<number>(0)\n  const [scrollbarWidthXAxis, setScrollbarWidthXAxis] = React.useState<number>(0)\n\n  useResizeObserver({\n    delay: 0,\n    elements: [containerEl, scrollableEl],\n    onResize: () => {\n      if (!scrollableEl) return\n      if (!containerEl) return\n      setHasScrollYAxis(scrollableEl.scrollHeight > scrollableEl.clientHeight)\n      setHasScrollXAxis(scrollableEl.scrollWidth > scrollableEl.clientWidth)\n      setScrollbarWidthYAxis(containerEl.clientHeight - scrollableEl.clientHeight)\n      setScrollbarWidthXAxis(containerEl.clientWidth - scrollableEl.clientWidth)\n    }\n  })\n\n  const [{ hasScrolledYAxis, hasScrolledToEndYAxis, hasScrolledXAxis, hasScrolledToEndXAxis }, setScrollState] = React.useState<{\n    hasScrolledYAxis: boolean\n    hasScrolledToEndYAxis: boolean\n    hasScrolledXAxis: boolean\n    hasScrolledToEndXAxis: boolean\n  }>({ hasScrolledYAxis: false, hasScrolledToEndYAxis: false, hasScrolledXAxis: false, hasScrolledToEndXAxis: false })\n\n  /** A number between 0-1 for the relative amount of pixels scrolled */\n  const scrollProgressYAxis = (() => {\n    if (!scrollableEl) return 0\n    if (scrollableEl.scrollHeight <= scrollableEl.clientHeight) return 0\n    return scrollableEl.scrollTop / (scrollableEl.scrollHeight - scrollableEl.clientHeight)\n  })()\n\n  const scrollProgressXAxis = (() => {\n    if (!scrollableEl) return 0\n    if (scrollableEl.scrollWidth <= scrollableEl.clientWidth) return 0\n    return scrollableEl.scrollLeft / (scrollableEl.scrollWidth - scrollableEl.clientWidth)\n  })()\n\n  React.useEffect(() => {\n    if (!scrollableEl) return\n    const updateScrollState = () => {\n      setScrollState({\n        hasScrolledYAxis: !!scrollableEl.scrollTop,\n        hasScrolledToEndYAxis:\n          Math.abs(scrollableEl.scrollHeight - scrollableEl.clientHeight - scrollableEl.scrollTop) <\n          1,\n        hasScrolledXAxis: !!scrollableEl.scrollLeft,\n        hasScrolledToEndXAxis:\n          Math.abs(scrollableEl.scrollWidth - scrollableEl.clientWidth - scrollableEl.scrollLeft) <\n          1\n      })\n    }\n    updateScrollState()\n\n    scrollableEl.addEventListener('scroll', updateScrollState)\n\n    return () => {\n      scrollableEl.removeEventListener('scroll', updateScrollState)\n    }\n  }, [scrollableEl])\n\n  const value = React.useMemo<IScrollableContainerContext>(\n    () => ({\n      hasProvider: true,\n      hasScrollYAxis,\n      hasScrolledYAxis,\n      hasScrolledToEndYAxis,\n      scrollProgressYAxis,\n      scrollbarWidthYAxis,\n      hasScrollXAxis,\n      hasScrolledXAxis,\n      hasScrolledToEndXAxis,\n      scrollProgressXAxis,\n      scrollbarWidthXAxis,\n      scrollableEl,\n      setScrollableEl,\n      containerEl,\n      setContainerEl\n    }),\n    [\n      hasScrollYAxis,\n      hasScrolledYAxis,\n      hasScrolledToEndYAxis,\n      scrollProgressYAxis,\n      scrollbarWidthYAxis,\n      hasScrollXAxis,\n      hasScrolledXAxis,\n      hasScrolledToEndXAxis,\n      scrollProgressXAxis,\n      scrollbarWidthXAxis,\n      scrollableEl,\n      setScrollableEl,\n      containerEl,\n      setContainerEl\n    ]\n  )\n\n  return <ScrollableContainerContext.Provider value={value}>{children}</ScrollableContainerContext.Provider>\n}\n"],"names":["ScrollableContainerContext","React","ScrollableContainerProvider","children","scrollableEl","setScrollableEl","useCallbackRefState","containerEl","setContainerEl","hasScrollYAxis","setHasScrollYAxis","hasScrollXAxis","setHasScrollXAxis","scrollbarWidthYAxis","setScrollbarWidthYAxis","scrollbarWidthXAxis","setScrollbarWidthXAxis","useResizeObserver","hasScrolledYAxis","hasScrolledToEndYAxis","hasScrolledXAxis","hasScrolledToEndXAxis","setScrollState","scrollProgressYAxis","scrollProgressXAxis","updateScrollState","value"],"mappings":"2LAuBaA,EAA6BC,EAAM,cAA2C,CACzF,YAAa,GACb,eAAgB,GAChB,iBAAkB,GAClB,sBAAuB,GACvB,eAAgB,GAChB,iBAAkB,GAClB,sBAAuB,GACvB,oBAAqB,EACrB,oBAAqB,EACrB,oBAAqB,EACrB,oBAAqB,CACvB,CAAC,EAEYC,EAA8B,CAAC,CAAE,SAAAC,CAAS,IAAqC,CAC1F,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAClC,EAAA,CAACC,EAAaC,CAAc,EAAIF,EAAoB,EAEpD,CAACG,EAAgBC,CAAiB,EAAIT,EAAM,SAAkB,EAAK,EACnE,CAACU,EAAgBC,CAAiB,EAAIX,EAAM,SAAkB,EAAK,EACnE,CAACY,EAAqBC,CAAsB,EAAIb,EAAM,SAAiB,CAAC,EACxE,CAACc,EAAqBC,CAAsB,EAAIf,EAAM,SAAiB,CAAC,EAE9EgB,EAAkB,CAChB,MAAO,EACP,SAAU,CAACV,EAAaH,CAAY,EACpC,SAAU,IAAM,CACV,CAACA,GACD,CAACG,IACLG,EAAkBN,EAAa,aAAeA,EAAa,YAAY,EACvEQ,EAAkBR,EAAa,YAAcA,EAAa,WAAW,EACrEU,EAAuBP,EAAY,aAAeH,EAAa,YAAY,EAC3EY,EAAuBT,EAAY,YAAcH,EAAa,WAAW,EAC3E,CACF,CAAC,EAED,KAAM,CAAC,CAAE,iBAAAc,EAAkB,sBAAAC,EAAuB,iBAAAC,EAAkB,sBAAAC,CAAsB,EAAGC,CAAc,EAAIrB,EAAM,SAKlH,CAAE,iBAAkB,GAAO,sBAAuB,GAAO,iBAAkB,GAAO,sBAAuB,EAAM,CAAC,EAG7GsB,GAAuB,IACvB,CAACnB,GACDA,EAAa,cAAgBA,EAAa,aAAqB,EAC5DA,EAAa,WAAaA,EAAa,aAAeA,EAAa,iBAGtEoB,GAAuB,IACvB,CAACpB,GACDA,EAAa,aAAeA,EAAa,YAAoB,EAC1DA,EAAa,YAAcA,EAAa,YAAcA,EAAa,cACzE,EAEHH,EAAM,UAAU,IAAM,CACpB,GAAI,CAACG,EAAc,OACnB,MAAMqB,EAAoB,IAAM,CAC9BH,EAAe,CACb,iBAAkB,CAAC,CAAClB,EAAa,UACjC,sBACE,KAAK,IAAIA,EAAa,aAAeA,EAAa,aAAeA,EAAa,SAAS,EACvF,EACF,iBAAkB,CAAC,CAACA,EAAa,WACjC,sBACE,KAAK,IAAIA,EAAa,YAAcA,EAAa,YAAcA,EAAa,UAAU,EACtF,CACJ,CAAC,CACH,EACA,OAAAqB,EAAkB,EAElBrB,EAAa,iBAAiB,SAAUqB,CAAiB,EAElD,IAAM,CACXrB,EAAa,oBAAoB,SAAUqB,CAAiB,CAC9D,CACF,EAAG,CAACrB,CAAY,CAAC,EAEjB,MAAMsB,EAAQzB,EAAM,QAClB,KAAO,CACL,YAAa,GACb,eAAAQ,EACA,iBAAAS,EACA,sBAAAC,EACA,oBAAAI,EACA,oBAAAV,EACA,eAAAF,EACA,iBAAAS,EACA,sBAAAC,EACA,oBAAAG,EACA,oBAAAT,EACA,aAAAX,EACA,gBAAAC,EACA,YAAAE,EACA,eAAAC,CACF,GACA,CACEC,EACAS,EACAC,EACAI,EACAV,EACAF,EACAS,EACAC,EACAG,EACAT,EACAX,EACAC,EACAE,EACAC,CACF,CACF,EAEA,OAAOP,EAAA,cAACD,EAA2B,SAA3B,CAAoC,MAAO0B,CAAAA,EAAQvB,CAAS,CACtE"}