@atom-learning/components 3.9.0 → 3.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3 -5
- package/dist/components/checkbox-tree/CheckboxTree.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeCollapsible.d.ts +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeCollapsible.js +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeCollapsible.js.map +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeCollapsibleContent.js +1 -1
- package/dist/components/checkbox-tree/CheckboxTreeCollapsibleContent.js.map +1 -1
- package/dist/components/pagination/Pagination.d.ts +2 -2
- package/dist/components/pagination/Pagination.js +1 -1
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/pagination/PaginationItems.d.ts +2 -0
- package/dist/components/pagination/PaginationItems.js +2 -0
- package/dist/components/pagination/PaginationItems.js.map +1 -0
- package/dist/components/pagination/PaginationNextButton.js +1 -1
- package/dist/components/pagination/PaginationNextButton.js.map +1 -1
- package/dist/components/pagination/PaginationPage.d.ts +3 -0
- package/dist/components/pagination/{PaginationItem.js → PaginationPage.js} +2 -2
- package/dist/components/pagination/PaginationPage.js.map +1 -0
- package/dist/components/pagination/PaginationPopover.js +1 -1
- package/dist/components/pagination/PaginationPopover.js.map +1 -1
- package/dist/components/pagination/PaginationPreviousButton.js +1 -1
- package/dist/components/pagination/PaginationPreviousButton.js.map +1 -1
- package/dist/components/pagination/pagination-context/PaginationContext.d.ts +3 -3
- package/dist/components/pagination/pagination-context/PaginationContext.js +1 -1
- package/dist/components/pagination/pagination-context/PaginationContext.js.map +1 -1
- package/dist/components/pagination/pagination.constants.d.ts +3 -0
- package/dist/components/pagination/pagination.constants.js +1 -1
- package/dist/components/pagination/pagination.constants.js.map +1 -1
- package/dist/components/pagination/pagination.helper.d.ts +4 -6
- package/dist/components/pagination/pagination.helper.js +1 -1
- package/dist/components/pagination/pagination.helper.js.map +1 -1
- package/dist/components/pagination/types.d.ts +12 -10
- package/dist/components/pagination/usePagination.d.ts +2 -2
- package/dist/components/pagination/usePagination.js.map +1 -1
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/pagination/PaginationItem.d.ts +0 -3
- package/dist/components/pagination/PaginationItem.js.map +0 -1
- package/dist/components/pagination/PaginationPages.d.ts +0 -2
- package/dist/components/pagination/PaginationPages.js +0 -2
- package/dist/components/pagination/PaginationPages.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
|
-
# [3.
|
|
1
|
+
# [3.10.0](https://github.com/Atom-Learning/components/compare/v3.9.0...v3.10.0) (2024-01-03)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
* snapshot ([89b7ded](https://github.com/Atom-Learning/components/commit/89b7ded82a76b1b0359c9e7fe06cd64bc50153da))
|
|
6
|
+
* stray snapshot ([0e96710](https://github.com/Atom-Learning/components/commit/0e967107e146e2d1856f3db5589ab8576cc0b581))
|
|
8
7
|
|
|
9
8
|
|
|
10
9
|
### Features
|
|
11
10
|
|
|
12
|
-
*
|
|
13
|
-
* tests CheckboxTree ([2534f18](https://github.com/Atom-Learning/components/commit/2534f189aab027901fb7f9ad5b3452158523af57))
|
|
11
|
+
* rework and simplify Pagination ([131a9e1](https://github.com/Atom-Learning/components/commit/131a9e1cf5ab7f39f25a427a91faeb7d67f0b101))
|
|
14
12
|
|
|
15
13
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
16
14
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/checkbox-tree/CheckboxTree.tsx"],"sourcesContent":["import React from 'react'\nimport { CheckboxGroup } from '../checkbox-group'\nimport { Tree } from '../tree'\nimport { CheckboxTreeCollapsible } from './CheckboxTreeCollapsible'\nimport { CheckboxTreeCollapsibleContent } from './CheckboxTreeCollapsibleContent'\nimport { CheckboxTreeCollapsibleTrigger } from './CheckboxTreeCollapsibleTrigger'\nimport { CheckboxTreeItem } from './CheckboxTreeItem'\n\ntype CheckboxTreeRootProps = Omit<\n React.ComponentProps<typeof CheckboxGroup> &\n React.ComponentProps<typeof Tree>,\n 'asChild'\n>\n\nexport const CheckboxTreeRoot = ({\n checked,\n defaultChecked,\n onCheckedChange,\n ...rest\n}: CheckboxTreeRootProps) => {\n const checkboxGroupProps = { checked, defaultChecked, onCheckedChange }\n return (\n <CheckboxGroup {...checkboxGroupProps} asChild>\n <Tree {...rest} />\n </CheckboxGroup>\n )\n}\n\nexport const CheckboxTree = Object.assign(CheckboxTreeRoot, {\n Collapsible: CheckboxTreeCollapsible,\n CollapsibleContent: CheckboxTreeCollapsibleContent,\n CollapsibleTrigger: CheckboxTreeCollapsibleTrigger,\n Item: CheckboxTreeItem\n})\n"],"names":["CheckboxTreeRoot","checked","defaultChecked","onCheckedChange","rest","React","CheckboxGroup","Tree","CheckboxTree","CheckboxTreeCollapsible","CheckboxTreeCollapsibleContent","CheckboxTreeCollapsibleTrigger","CheckboxTreeItem"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/checkbox-tree/CheckboxTree.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CheckboxGroup } from '../checkbox-group'\nimport { Tree } from '../tree'\nimport { CheckboxTreeCollapsible } from './CheckboxTreeCollapsible'\nimport { CheckboxTreeCollapsibleContent } from './CheckboxTreeCollapsibleContent'\nimport { CheckboxTreeCollapsibleTrigger } from './CheckboxTreeCollapsibleTrigger'\nimport { CheckboxTreeItem } from './CheckboxTreeItem'\n\ntype CheckboxTreeRootProps = Omit<\n React.ComponentProps<typeof CheckboxGroup> &\n React.ComponentProps<typeof Tree>,\n 'asChild'\n>\n\nexport const CheckboxTreeRoot = ({\n checked,\n defaultChecked,\n onCheckedChange,\n ...rest\n}: CheckboxTreeRootProps) => {\n const checkboxGroupProps = { checked, defaultChecked, onCheckedChange }\n return (\n <CheckboxGroup {...checkboxGroupProps} asChild>\n <Tree {...rest} />\n </CheckboxGroup>\n )\n}\n\nexport const CheckboxTree = Object.assign(CheckboxTreeRoot, {\n Collapsible: CheckboxTreeCollapsible,\n CollapsibleContent: CheckboxTreeCollapsibleContent,\n CollapsibleTrigger: CheckboxTreeCollapsibleTrigger,\n Item: CheckboxTreeItem\n})\n"],"names":["CheckboxTreeRoot","checked","defaultChecked","onCheckedChange","rest","React","CheckboxGroup","Tree","CheckboxTree","CheckboxTreeCollapsible","CheckboxTreeCollapsibleContent","CheckboxTreeCollapsibleTrigger","CheckboxTreeItem"],"mappings":"yaAeO,MAAMA,EAAmB,CAAC,CAC/B,QAAAC,EACA,eAAAC,EACA,gBAAAC,KACGC,CACL,IAGIC,EAAA,cAACC,EAAA,CAF0B,QAAAL,EAAS,eAAAC,EAAgB,gBAAAC,EAEb,QAAO,EAAA,EAC5CE,EAAA,cAACE,EAAA,CAAM,GAAGH,EAAM,CAClB,EAISI,EAAe,OAAO,OAAOR,EAAkB,CAC1D,YAAaS,EACb,mBAAoBC,EACpB,mBAAoBC,EACpB,KAAMC,CACR,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Tree } from '../tree';
|
|
3
2
|
import { CheckboxGroup } from '../checkbox-group';
|
|
3
|
+
import { Tree } from '../tree';
|
|
4
4
|
declare type CheckboxTreeCollapsibleProps = Omit<React.ComponentProps<typeof Tree.Collapsible> & React.ComponentProps<typeof CheckboxGroup.Sub>, 'asChild'>;
|
|
5
5
|
export declare const CheckboxTreeCollapsible: ({ children, ...rest }: CheckboxTreeCollapsibleProps) => JSX.Element;
|
|
6
6
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"react";import{
|
|
1
|
+
import e from"react";import{CheckboxGroup as l}from"../checkbox-group/CheckboxGroup.js";import{Tree as t}from"../tree/Tree.js";const m=({children:o,...r})=>e.createElement(l.Sub,{asChild:!0},e.createElement(t.Collapsible,{...r},o));export{m as CheckboxTreeCollapsible};
|
|
2
2
|
//# sourceMappingURL=CheckboxTreeCollapsible.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxTreeCollapsible.js","sources":["../../../src/components/checkbox-tree/CheckboxTreeCollapsible.tsx"],"sourcesContent":["import React from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"CheckboxTreeCollapsible.js","sources":["../../../src/components/checkbox-tree/CheckboxTreeCollapsible.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CheckboxGroup } from '../checkbox-group'\nimport { Tree } from '../tree'\n\ntype CheckboxTreeCollapsibleProps = Omit<\n React.ComponentProps<typeof Tree.Collapsible> &\n React.ComponentProps<typeof CheckboxGroup.Sub>,\n 'asChild'\n>\n\nexport const CheckboxTreeCollapsible = ({\n children,\n ...rest\n}: CheckboxTreeCollapsibleProps): JSX.Element => {\n return (\n <CheckboxGroup.Sub asChild>\n <Tree.Collapsible {...rest}>{children}</Tree.Collapsible>\n </CheckboxGroup.Sub>\n )\n}\n"],"names":["CheckboxTreeCollapsible","children","rest","React","CheckboxGroup","Tree"],"mappings":"+HAWO,MAAMA,EAA0B,CAAC,CACtC,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAc,IAAd,CAAkB,QAAO,EAAA,EACxBD,EAAA,cAACE,EAAK,YAAL,CAAkB,GAAGH,CAAAA,EAAOD,CAAS,CACxC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"react";import{
|
|
1
|
+
import e from"react";import{CheckboxGroup as r}from"../checkbox-group/CheckboxGroup.js";import{Tree as l}from"../tree/Tree.js";const n=({children:o,...t})=>e.createElement(r.Sub,{asChild:!0},e.createElement(l.CollapsibleContent,{...t,forceMount:!0},o));export{n as CheckboxTreeCollapsibleContent};
|
|
2
2
|
//# sourceMappingURL=CheckboxTreeCollapsibleContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxTreeCollapsibleContent.js","sources":["../../../src/components/checkbox-tree/CheckboxTreeCollapsibleContent.tsx"],"sourcesContent":["import React from 'react'\n\nimport {
|
|
1
|
+
{"version":3,"file":"CheckboxTreeCollapsibleContent.js","sources":["../../../src/components/checkbox-tree/CheckboxTreeCollapsibleContent.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CheckboxGroup } from '../checkbox-group'\nimport { Tree } from '../tree'\n\ntype CheckboxTreeCollapsibleContentProps = Omit<\n React.ComponentProps<typeof Tree.CollapsibleContent>,\n 'asChild'\n>\n\nexport const CheckboxTreeCollapsibleContent = ({\n children,\n ...rest\n}: CheckboxTreeCollapsibleContentProps): JSX.Element => {\n return (\n <CheckboxGroup.Sub asChild>\n <Tree.CollapsibleContent {...rest} forceMount>\n {children}\n </Tree.CollapsibleContent>\n </CheckboxGroup.Sub>\n )\n}\n"],"names":["CheckboxTreeCollapsibleContent","children","rest","React","CheckboxGroup","Tree"],"mappings":"+HAUa,MAAAA,EAAiC,CAAC,CAC7C,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAc,IAAd,CAAkB,QAAO,IACxBD,EAAA,cAACE,EAAK,mBAAL,CAAyB,GAAGH,EAAM,WAAU,EAAA,EAC1CD,CACH,CACF"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
export declare const Pagination: React.FC<
|
|
2
|
+
import type { PaginationProps } from './types';
|
|
3
|
+
export declare const Pagination: React.FC<PaginationProps>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{ColorScheme as
|
|
1
|
+
import*as e from"react";import{ColorScheme as d}from"../../experiments/color-scheme/ColorScheme.js";import{Flex as P}from"../flex/Flex.js";import{VisibleElementsAmount as p}from"./pagination.constants.js";import{PaginationProvider as b}from"./pagination-context/PaginationContext.js";import{PaginationItems as u}from"./PaginationItems.js";const a=({colorScheme:o,onSelectedPageChange:n,selectedPage:l,visibleElementsCount:i=p.LESS,pagesCount:t,indicatedPages:m=[],disabledPages:r=[],onItemHover:s=()=>null,labels:g={},...c})=>t?e.createElement(b,{onSelectedPageChange:n,selectedPage:l,visibleElementsCount:i,pagesCount:t,indicatedPages:m,disabledPages:r,onItemHover:s,labels:g},e.createElement(d,{base:"grey1",accent:"blue1",...o,asChild:!0},e.createElement(P,{gap:1,...c},e.createElement(u,null)))):null;a.displayName="Pagination";export{a as Pagination};
|
|
2
2
|
//# sourceMappingURL=Pagination.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme'\nimport { Flex } from '../flex'\nimport {
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme'\nimport { Flex } from '../flex'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { PaginationItems } from './PaginationItems'\nimport type { PaginationProps } from './types'\n\nexport const Pagination: React.FC<PaginationProps> = ({\n colorScheme,\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n ...rest\n}) => {\n if (!pagesCount) return null\n\n const paginationProviderProps = {\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount,\n pagesCount,\n indicatedPages,\n disabledPages,\n onItemHover,\n labels\n }\n\n return (\n <PaginationProvider {...paginationProviderProps}>\n <ColorScheme base=\"grey1\" accent=\"blue1\" {...colorScheme} asChild>\n <Flex gap={1} {...rest}>\n <PaginationItems />\n </Flex>\n </ColorScheme>\n </PaginationProvider>\n )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["Pagination","colorScheme","onSelectedPageChange","selectedPage","visibleElementsCount","VisibleElementsAmount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","rest","React","PaginationProvider","ColorScheme","Flex","PaginationItems"],"mappings":"mVASa,MAAAA,EAAwC,CAAC,CACpD,YAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBC,EAAsB,KAC7C,WAAAC,EACA,eAAAC,EAAiB,CAAA,EACjB,cAAAC,EAAgB,CAChB,EAAA,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,CACNC,KAAAA,CACL,IACOL,EAcHM,EAAA,cAACC,EAAA,CAXD,qBAAAX,EACA,aAAAC,EACA,qBAAAC,EACA,WAAAE,EACA,eAAAC,EACA,cAAAC,EACA,YAAAC,EACA,OAAAC,CAKEE,EAAAA,EAAA,cAACE,EAAA,CAAY,KAAK,QAAQ,OAAO,QAAS,GAAGb,EAAa,QAAO,EAC/DW,EAAAA,EAAA,cAACG,EAAA,CAAK,IAAK,EAAI,GAAGJ,CAAAA,EAChBC,EAAA,cAACI,EAAA,IAAgB,CACnB,CACF,CACF,EApBsB,KAwB1BhB,EAAW,YAAc"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as t from"react";import{GO_TO_NEXT_PAGE as r,GO_TO_PREVIOUS_PAGE as a,VIEW_ALL_POPOVER as m}from"./pagination.constants.js";import{PaginationNextButton as i}from"./PaginationNextButton.js";import{PaginationPage as P}from"./PaginationPage.js";import{PaginationPopover as p}from"./PaginationPopover.js";import{PaginationPreviousButton as u}from"./PaginationPreviousButton.js";import{usePagination as c}from"./usePagination.js";const s=()=>{const{paginationItems:n}=c();return t.createElement(t.Fragment,null,n.map((e,o)=>{switch(e){case m:return t.createElement(p,{key:e+o});case a:return t.createElement(u,{key:e});case r:return t.createElement(i,{key:e});default:return t.createElement(P,{key:e,pageNumber:e})}}))};export{s as PaginationItems};
|
|
2
|
+
//# sourceMappingURL=PaginationItems.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginationItems.js","sources":["../../../src/components/pagination/PaginationItems.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n GO_TO_NEXT_PAGE,\n GO_TO_PREVIOUS_PAGE,\n VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPage } from './PaginationPage'\nimport { PaginationPopover } from './PaginationPopover'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport { usePagination } from './usePagination'\n\nexport const PaginationItems = (): JSX.Element => {\n const { paginationItems } = usePagination()\n\n return (\n <>\n {paginationItems.map((paginationItem, i) => {\n switch (paginationItem) {\n case VIEW_ALL_POPOVER:\n return <PaginationPopover key={paginationItem + i} />\n case GO_TO_PREVIOUS_PAGE:\n return <PaginationPreviousButton key={paginationItem} />\n case GO_TO_NEXT_PAGE:\n return <PaginationNextButton key={paginationItem} />\n default:\n return (\n <PaginationPage\n key={paginationItem}\n pageNumber={paginationItem}\n />\n )\n }\n })}\n </>\n )\n}\n"],"names":["PaginationItems","paginationItems","usePagination","React","paginationItem","i","VIEW_ALL_POPOVER","PaginationPopover","GO_TO_PREVIOUS_PAGE","PaginationPreviousButton","GO_TO_NEXT_PAGE","PaginationNextButton","PaginationPage"],"mappings":"gbAaO,MAAMA,EAAkB,IAAmB,CAChD,KAAM,CAAE,gBAAAC,CAAgB,EAAIC,IAE5B,OACEC,EAAA,cAAAA,EAAA,SACGF,KAAAA,EAAgB,IAAI,CAACG,EAAgBC,IAAM,CAC1C,OAAQD,QACDE,EACH,OAAOH,EAAA,cAACI,EAAA,CAAkB,IAAKH,EAAiBC,EAAG,OAChDG,EACH,OAAOL,EAAA,cAACM,EAAA,CAAyB,IAAKL,EAAgB,OACnDM,EACH,OAAOP,EAAA,cAACQ,EAAA,CAAqB,IAAKP,EAAgB,UAElD,OACED,EAAA,cAACS,EAAA,CACC,IAAKR,EACL,WAAYA,CACd,CAAA,EAGR,CAAC,CACH,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ChevronRight as
|
|
1
|
+
import{ChevronRight as a}from"@atom-learning/icons";import*as t from"react";import{styled as r}from"../../stitches.js";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{usePagination as s}from"./usePagination.js";const c=r(l,{ml:"$1","&:disabled":{opacity:"0.3"}}),p=o=>{const{goToNextPage:i,labels:e,nextAvailablePage:n}=s();return t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",onClick:i,disabled:!n,...o,label:(e==null?void 0:e.nextPageButtonLabel)||"Next page"},t.createElement(m,{is:a}))};export{p as PaginationNextButton};
|
|
2
2
|
//# sourceMappingURL=PaginationNextButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationNextButton.js","sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n ml: '$1',\n '&:disabled': {\n opacity: '0.3'\n }\n})\n\nexport const PaginationNextButton = (\n props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n const {
|
|
1
|
+
{"version":3,"file":"PaginationNextButton.js","sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n ml: '$1',\n '&:disabled': {\n opacity: '0.3'\n }\n})\n\nexport const PaginationNextButton = (\n props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n const { goToNextPage, labels, nextAvailablePage } = usePagination()\n\n const isDisabled = !nextAvailablePage\n\n return (\n <StyledActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n onClick={goToNextPage}\n disabled={isDisabled}\n {...props}\n label={labels?.nextPageButtonLabel || 'Next page'}\n >\n <Icon is={ChevronRight} />\n </StyledActionIcon>\n )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationNextButton","props","goToNextPage","labels","nextAvailablePage","usePagination","React","Icon","ChevronRight"],"mappings":"2QASA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,GAAI,KACJ,aAAc,CACZ,QAAS,KACX,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,aAAAC,EAAc,OAAAC,EAAQ,kBAAAC,CAAkB,EAAIC,EAAc,EAIlE,OACEC,EAAA,cAACT,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SARe,CAACE,EASf,GAAGH,EACJ,OAAOE,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,WAAA,EAEtCG,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAc,CAC1B,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as d from"react";import{styled as b}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as
|
|
2
|
-
//# sourceMappingURL=
|
|
1
|
+
import*as d from"react";import{styled as b}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as g}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{usePagination as m}from"./usePagination.js";const p=b("button",{alignItems:"center",border:"1px solid transparent",borderRadius:"$0",cursor:"pointer",fontFamily:"$body",justifyContent:"center",whiteSpace:"nowrap",width:"max-content",display:"flex",flexDirection:"column",p:"0",fontWeight:400,color:"$grey800",bg:"$base1",position:"relative","&:not(:disabled)":{"&:hover":{color:"$accent10",bg:"$base2"},"&:active":{bg:"$base3",color:"$grey1000"},"&:focus-visible":{...g()}},"&:disabled":{opacity:"0.3",cursor:"not-allowed"},variants:{size:{md:{width:"$4",height:"$4"}},selected:{true:{border:"1px solid $accent9",color:"$accent9",fontWeight:600,"&:not(:disabled)":{"&:hover":{borderColor:"$accent10",color:"$accent10"},"&:active":{borderColor:"$accent11",fontColor:"$accent11"}}}},indicated:{true:{fontWeight:600,color:"$accent9","&:after":{content:"",position:"absolute",bottom:"$1",left:"50%",transform:"translateX(-50%)",borderRadius:"$round",size:"4px",bg:"$accent9"},"&:not(:disabled)":{"&:hover":{color:"$accent10","&:after":{bg:"$accent10"}},"&:active":{color:"$accent11","&:after":{bg:"$accent11"}}}}}}}),u=({pageNumber:e,css:a})=>{const{currentPage:c,goToPage:i,indicatedPages:n,disabledPages:s,onItemHover:r}=m(),l=n.includes(e),o=s.includes(e),t=c===e;return d.createElement(p,{selected:t,size:"md",onClick:()=>i(e),css:a,indicated:l,disabled:o,"aria-current":t&&"page","aria-disabled":o,onMouseOver:()=>{t||o||r==null||r(e)}},e)};export{u as PaginationPage};
|
|
2
|
+
//# sourceMappingURL=PaginationPage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaginationPage.js","sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { styled } from '../../stitches'\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n border: '1px solid transparent',\n borderRadius: '$0',\n cursor: 'pointer',\n fontFamily: '$body',\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n width: 'max-content',\n display: 'flex',\n flexDirection: 'column',\n p: '0',\n fontWeight: 400,\n color: '$grey800',\n bg: '$base1',\n position: 'relative',\n '&:not(:disabled)': {\n '&:hover': {\n color: '$accent10',\n bg: '$base2'\n },\n '&:active': {\n bg: '$base3',\n color: '$grey1000'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n },\n '&:disabled': {\n opacity: '0.3',\n cursor: 'not-allowed'\n },\n variants: {\n size: {\n md: {\n width: '$4',\n height: '$4'\n }\n },\n selected: {\n true: {\n border: '1px solid $accent9',\n color: '$accent9',\n fontWeight: 600,\n '&:not(:disabled)': {\n '&:hover': {\n borderColor: '$accent10',\n color: '$accent10'\n },\n '&:active': {\n borderColor: '$accent11',\n fontColor: '$accent11'\n }\n }\n }\n },\n indicated: {\n true: {\n fontWeight: 600,\n color: '$accent9',\n '&:after': {\n content: '',\n position: 'absolute',\n bottom: '$1',\n left: '50%',\n transform: 'translateX(-50%)',\n borderRadius: '$round',\n size: '4px',\n bg: '$accent9'\n },\n '&:not(:disabled)': {\n '&:hover': {\n color: '$accent10',\n '&:after': {\n bg: '$accent10'\n }\n },\n '&:active': {\n color: '$accent11',\n '&:after': {\n bg: '$accent11'\n }\n }\n }\n }\n }\n }\n})\n\nexport const PaginationPage: React.FC<PaginationPageProps> = ({\n pageNumber,\n css\n}) => {\n const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n usePagination()\n\n const isIndicated = indicatedPages.includes(pageNumber)\n const isDisabled = disabledPages.includes(pageNumber)\n\n const isSelected = currentPage === pageNumber\n\n const handleOnHover = () => {\n if (isSelected || isDisabled) return\n onItemHover?.(pageNumber)\n }\n\n return (\n <StyledButton\n selected={isSelected}\n size=\"md\"\n onClick={() => goToPage(pageNumber)}\n css={css}\n indicated={isIndicated}\n disabled={isDisabled}\n aria-current={isSelected && 'page'}\n aria-disabled={isDisabled}\n onMouseOver={handleOnHover}\n >\n {pageNumber}\n </StyledButton>\n )\n}\n"],"names":["StyledButton","styled","focusVisibleStyleBlock","PaginationPage","pageNumber","css","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","React"],"mappings":"0YAQA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,SACZ,OAAQ,wBACR,aAAc,KACd,OAAQ,UACR,WAAY,QACZ,eAAgB,SAChB,WAAY,SACZ,MAAO,cACP,QAAS,OACT,cAAe,SACf,EAAG,IACH,WAAY,IACZ,MAAO,WACP,GAAI,SACJ,SAAU,WACV,mBAAoB,CAClB,UAAW,CACT,MAAO,YACP,GAAI,QACN,EACA,WAAY,CACV,GAAI,SACJ,MAAO,WACT,EACA,kBAAmB,CACjB,GAAGC,EAAuB,CAC5B,CACF,EACA,aAAc,CACZ,QAAS,MACT,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,qBACR,MAAO,WACP,WAAY,IACZ,mBAAoB,CAClB,UAAW,CACT,YAAa,YACb,MAAO,WACT,EACA,WAAY,CACV,YAAa,YACb,UAAW,WACb,CACF,CACF,CACF,EACA,UAAW,CACT,KAAM,CACJ,WAAY,IACZ,MAAO,WACP,UAAW,CACT,QAAS,GACT,SAAU,WACV,OAAQ,KACR,KAAM,MACN,UAAW,mBACX,aAAc,SACd,KAAM,MACN,GAAI,UACN,EACA,mBAAoB,CAClB,UAAW,CACT,MAAO,YACP,UAAW,CACT,GAAI,WACN,CACF,EACA,WAAY,CACV,MAAO,YACP,UAAW,CACT,GAAI,WACN,CACF,CACF,CACF,CACF,CACF,CACF,CAAC,EAEYC,EAAgD,CAAC,CAC5D,WAAAC,EACA,IAAAC,CACF,IAAM,CACJ,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,EAAAA,EAEIC,EAAcJ,EAAe,SAASJ,CAAU,EAChDS,EAAaJ,EAAc,SAASL,CAAU,EAE9CU,EAAaR,IAAgBF,EAOnC,OACEW,EAAA,cAACf,EAAA,CACC,SAAUc,EACV,KAAK,KACL,QAAS,IAAMP,EAASH,CAAU,EAClC,IAAKC,EACL,UAAWO,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAfkB,IAAM,CACtBC,GAAcD,GAClBH,GAAA,MAAAA,EAAcN,CAAAA,CAChB,CAcKA,EAAAA,CACH,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Ellypsis as n}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../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 l}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as s}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../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"../stack/Stack.js";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../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"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../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{
|
|
1
|
+
import{Ellypsis as n}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as a}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../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 l}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as s}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../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"../stack/Stack.js";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../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"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../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{PaginationPage as g}from"./PaginationPage.js";import{usePagination as c}from"./usePagination.js";const f=()=>{const{pagesCount:m,labels:i}=c(),p=Array.from({length:m},(o,e)=>e+1);return t.createElement(r,null,t.createElement(r.Trigger,{asChild:!0},t.createElement(a,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(s,{is:n}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(l,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:1,justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(g,{key:o,pageNumber:o,css:{bg:"$white"}})))))};export{f as PaginationPopover};
|
|
2
2
|
//# sourceMappingURL=PaginationPopover.js.map
|
|
@@ -1 +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 {
|
|
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 const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n return (\n <Popover>\n <Popover.Trigger asChild>\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n <Flex\n css={{\n p: '$4',\n display: 'flex',\n flexWrap: 'wrap',\n gap: 1,\n justifyContent: 'center'\n }}\n >\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n css={{ bg: '$white' }}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","pagesCount","labels","usePagination","paginationItems","_","index","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"wpHAOO,MAAMA,EAAoB,IAAM,CACrC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EACzBC,EAAAA,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEA,OACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EACtBD,EAAAA,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOP,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZK,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAU,CACtB,CACF,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAAA,EAC7DD,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,EACL,eAAgB,QAClB,CAECR,EAAAA,GAAA,YAAAA,EAAiB,IAAKS,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,IAAK,CAAE,GAAI,QAAS,CAAA,CACtB,CAGN,CAAA,CACF,CACF,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{ChevronLeft as
|
|
1
|
+
import{ChevronLeft as a}from"@atom-learning/icons";import*as e from"react";import{styled as n}from"../../stitches.js";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{usePagination as s}from"./usePagination.js";const p=n(l,{mr:"$1","&:disabled":{opacity:"0.3"}}),c=t=>{const{goToPreviousPage:i,labels:o,previousAvailablePage:r}=s();return e.createElement(p,{hasTooltip:!1,size:"md",theme:"neutral",onClick:i,disabled:!r,...t,label:(o==null?void 0:o.previousPageButtonLabel)||"Previous page"},e.createElement(m,{is:a}))};export{c as PaginationPreviousButton};
|
|
2
2
|
//# sourceMappingURL=PaginationPreviousButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationPreviousButton.js","sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n mr: '$1',\n '&:disabled': {\n opacity: '0.3'\n }\n})\n\nexport const PaginationPreviousButton = (\n props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n const {
|
|
1
|
+
{"version":3,"file":"PaginationPreviousButton.js","sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n mr: '$1',\n '&:disabled': {\n opacity: '0.3'\n }\n})\n\nexport const PaginationPreviousButton = (\n props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n const isDisabled = !previousAvailablePage\n\n return (\n <StyledActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n onClick={goToPreviousPage}\n disabled={isDisabled}\n {...props}\n label={labels?.previousPageButtonLabel || 'Previous page'}\n >\n <Icon is={ChevronLeft} />\n </StyledActionIcon>\n )\n}\n"],"names":["StyledActionIcon","styled","ActionIcon","PaginationPreviousButton","props","goToPreviousPage","labels","previousAvailablePage","usePagination","React","Icon","ChevronLeft"],"mappings":"0QASA,MAAMA,EAAmBC,EAAOC,EAAY,CAC1C,GAAI,KACJ,aAAc,CACZ,QAAS,KACX,CACF,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,iBAAAC,EAAkB,OAAAC,EAAQ,sBAAAC,CAAsB,EAAIC,EAAc,EAI1E,OACEC,EAAA,cAACT,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,QAASK,EACT,SARe,CAACE,EASf,GAAGH,EACJ,OAAOE,GAAA,KAAAA,OAAAA,EAAQ,0BAA2B,eAAA,EAE1CG,EAAA,cAACC,EAAA,CAAK,GAAIC,CAAAA,CAAa,CACzB,CAEJ"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import type {
|
|
3
|
-
export declare const PaginationContext: React.Context<
|
|
4
|
-
export declare const PaginationProvider: React.FC<
|
|
2
|
+
import type { PaginationContextValue, PaginationProviderProps } from '../types';
|
|
3
|
+
export declare const PaginationContext: React.Context<PaginationContextValue>;
|
|
4
|
+
export declare const PaginationProvider: React.FC<PaginationProviderProps>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as e from"react";import{VisibleElementsAmount as I}from"../pagination.constants.js";import{findPreviousAvailablePage as k,findNextAvailablePage as S,getPaginationElementsToRender as H}from"../pagination.helper.js";const m=e.createContext({goToPage:()=>null,goToPreviousPage:()=>null,goToNextPage:()=>null,currentPage:1,pagesCount:0,onItemHover:()=>null,paginationItems:[],labels:{},indicatedPages:[],disabledPages:[]}),N=({onSelectedPageChange:i,selectedPage:v,visibleElementsCount:C=I.LESS,pagesCount:l,indicatedPages:s=[],disabledPages:g=[],onItemHover:P=()=>null,labels:r={},children:p})=>{const[T,x]=e.useState(1),o=v||T,a=e.useCallback(c=>{x(c),i==null||i(c)},[i]),A=o-1,t=k(A,g),u=e.useCallback(()=>{t&&a(t)},[a,t]),f=o+1,n=S(f,g,l),d=e.useCallback(()=>{n&&a(n)},[a,n]),b=H(o,l,C),E=e.useMemo(()=>({goToNextPage:d,goToPreviousPage:u,goToPage:a,currentPage:o,paginationItems:b,indicatedPages:s,disabledPages:g,pagesCount:l,onItemHover:P,previousAvailablePage:t,nextAvailablePage:n,labels:r}),[d,u,a,o,s,b,g,l,P,t,n,r]);return e.createElement(m.Provider,{value:E},p)};export{m as PaginationContext,N as PaginationProvider};
|
|
2
2
|
//# sourceMappingURL=PaginationContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationContext.js","sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n findNextAvailablePage,\n findPreviousAvailablePage,\n
|
|
1
|
+
{"version":3,"file":"PaginationContext.js","sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n findNextAvailablePage,\n findPreviousAvailablePage,\n getPaginationElementsToRender\n} from '../pagination.helper'\nimport type { PaginationContextValue, PaginationProviderProps } from '../types'\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n goToPage: () => null,\n goToPreviousPage: () => null,\n goToNextPage: () => null,\n currentPage: 1,\n pagesCount: 0,\n onItemHover: () => null,\n paginationItems: [],\n labels: {},\n indicatedPages: [],\n disabledPages: []\n})\n\nexport const PaginationProvider: React.FC<PaginationProviderProps> = ({\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children\n}) => {\n const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n const currentPage = selectedPage || internalCurrentPage\n\n const goToPage = React.useCallback(\n (pageNumber: number) => {\n setInternalCurrentPage(pageNumber)\n onSelectedPageChange?.(pageNumber)\n },\n [onSelectedPageChange]\n )\n\n const previousPage = currentPage - 1\n const previousAvailablePage = findPreviousAvailablePage(\n previousPage,\n disabledPages\n )\n\n const goToPreviousPage = React.useCallback(() => {\n if (previousAvailablePage) goToPage(previousAvailablePage)\n }, [goToPage, previousAvailablePage])\n\n const nextPage = currentPage + 1\n const nextAvailablePage = findNextAvailablePage(\n nextPage,\n disabledPages,\n pagesCount\n )\n const goToNextPage = React.useCallback(() => {\n if (nextAvailablePage) goToPage(nextAvailablePage)\n }, [goToPage, nextAvailablePage])\n\n const paginationItems = getPaginationElementsToRender(\n currentPage,\n pagesCount,\n visibleElementsCount\n )\n\n const value = React.useMemo(() => {\n return {\n goToNextPage,\n goToPreviousPage,\n goToPage,\n currentPage,\n paginationItems,\n indicatedPages,\n disabledPages,\n pagesCount,\n onItemHover,\n previousAvailablePage,\n nextAvailablePage,\n labels\n }\n }, [\n goToNextPage,\n goToPreviousPage,\n goToPage,\n currentPage,\n indicatedPages,\n paginationItems,\n disabledPages,\n pagesCount,\n onItemHover,\n previousAvailablePage,\n nextAvailablePage,\n labels\n ])\n\n return (\n <PaginationContext.Provider value={value}>\n {children}\n </PaginationContext.Provider>\n )\n}\n"],"names":["PaginationContext","React","PaginationProvider","onSelectedPageChange","selectedPage","visibleElementsCount","VisibleElementsAmount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","internalCurrentPage","setInternalCurrentPage","currentPage","goToPage","pageNumber","previousPage","previousAvailablePage","findPreviousAvailablePage","goToPreviousPage","nextPage","nextAvailablePage","findNextAvailablePage","goToNextPage","paginationItems","getPaginationElementsToRender","value"],"mappings":"6NAUa,MAAAA,EAAoBC,EAAM,cAAsC,CAC3E,SAAU,IAAM,KAChB,iBAAkB,IAAM,KACxB,aAAc,IAAM,KACpB,YAAa,EACb,WAAY,EACZ,YAAa,IAAM,KACnB,gBAAiB,CAAA,EACjB,OAAQ,CACR,EAAA,eAAgB,CAAA,EAChB,cAAe,EACjB,CAAC,EAEYC,EAAwD,CAAC,CACpE,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBC,EAAsB,KAC7C,WAAAC,EACA,eAAAC,EAAiB,CAAA,EACjB,cAAAC,EAAgB,GAChB,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,CAAA,EACT,SAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAqBC,CAAsB,EAAIb,EAAM,SAAS,CAAC,EAEhEc,EAAcX,GAAgBS,EAE9BG,EAAWf,EAAM,YACpBgB,GAAuB,CACtBH,EAAuBG,CAAU,EACjCd,GAAA,MAAAA,EAAuBc,CACzB,CAAA,EACA,CAACd,CAAoB,CACvB,EAEMe,EAAeH,EAAc,EAC7BI,EAAwBC,EAC5BF,EACAT,CACF,EAEMY,EAAmBpB,EAAM,YAAY,IAAM,CAC3CkB,GAAuBH,EAASG,CAAqB,CAC3D,EAAG,CAACH,EAAUG,CAAqB,CAAC,EAE9BG,EAAWP,EAAc,EACzBQ,EAAoBC,EACxBF,EACAb,EACAF,CACF,EACMkB,EAAexB,EAAM,YAAY,IAAM,CACvCsB,GAAmBP,EAASO,CAAiB,CACnD,EAAG,CAACP,EAAUO,CAAiB,CAAC,EAE1BG,EAAkBC,EACtBZ,EACAR,EACAF,CACF,EAEMuB,EAAQ3B,EAAM,QAAQ,KACnB,CACL,aAAAwB,EACA,iBAAAJ,EACA,SAAAL,EACA,YAAAD,EACA,gBAAAW,EACA,eAAAlB,EACA,cAAAC,EACA,WAAAF,EACA,YAAAG,EACA,sBAAAS,EACA,kBAAAI,EACA,OAAAZ,CACF,GACC,CACDc,EACAJ,EACAL,EACAD,EACAP,EACAkB,EACAjB,EACAF,EACAG,EACAS,EACAI,EACAZ,CACF,CAAC,EAED,OACEV,EAAA,cAACD,EAAkB,SAAlB,CAA2B,MAAO4B,CAChChB,EAAAA,CACH,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var O=(E=>(E[E.LESS=6]="LESS",E[E.MORE=8]="MORE",E))(O||{});const _="VIEW_ALL_POPOVER",P="GO_TO_PREVIOUS_PAGE",G="GO_TO_NEXT_PAGE";export{G as GO_TO_NEXT_PAGE,P as GO_TO_PREVIOUS_PAGE,_ as VIEW_ALL_POPOVER,O as VisibleElementsAmount};
|
|
2
2
|
//# sourceMappingURL=pagination.constants.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.constants.js","sources":["../../../src/components/pagination/pagination.constants.ts"],"sourcesContent":["export enum VisibleElementsAmount {\n LESS = 6,\n MORE = 8\n}\n"],"names":["VisibleElementsAmount","
|
|
1
|
+
{"version":3,"file":"pagination.constants.js","sources":["../../../src/components/pagination/pagination.constants.ts"],"sourcesContent":["export enum VisibleElementsAmount {\n LESS = 6,\n MORE = 8\n}\n\nexport const VIEW_ALL_POPOVER = 'VIEW_ALL_POPOVER'\nexport const GO_TO_PREVIOUS_PAGE = 'GO_TO_PREVIOUS_PAGE'\nexport const GO_TO_NEXT_PAGE = 'GO_TO_NEXT_PAGE'\n"],"names":["VisibleElementsAmount","_","VIEW_ALL_POPOVER","GO_TO_PREVIOUS_PAGE","GO_TO_NEXT_PAGE"],"mappings":"AAAO,IAAKA,GAAAA,IACVA,EAAAA,EAAA,KAAO,GAAP,OACAA,EAAAC,EAAA,KAAO,GAAP,OAFUD,IAAAA,GAKL,CAAA,CAAA,EAAA,MAAME,EAAmB,mBACnBC,EAAsB,sBACtBC,EAAkB"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
5
|
-
export declare const findNextAvailablePage: (startPage: number, disabledPages: number[]) => number;
|
|
6
|
-
export declare const findPreviousAvailablePage: (startPage: number, disabledPages: number[]) => number;
|
|
1
|
+
import { PaginationItemsToRender } from './types';
|
|
2
|
+
export declare const getPaginationElementsToRender: (currentPage: number, pagesCount: number, visibleElementsCount: number) => PaginationItemsToRender;
|
|
3
|
+
export declare const findNextAvailablePage: (startPage: number, disabledPages: number[], pagesCount: number) => number | undefined;
|
|
4
|
+
export declare const findPreviousAvailablePage: (startPage: number, disabledPages: number[]) => number | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{VIEW_ALL_POPOVER as p,GO_TO_PREVIOUS_PAGE as d,GO_TO_NEXT_PAGE as A}from"./pagination.constants.js";const m=(t,e,r)=>{const n=Array.from({length:e},(s,O)=>O+1);let u=r-2;const o=s=>[d,...s,A];if(e<=u)return o(n);const i=r>=5,c=r>=4,h=r>=3;c&&(u-=1),i&&(u-=1);const a=n[0],f=n[n.length-1];if(t<u){const s=[];return h&&s.push(...n.slice(0,u)),c&&s.push(p),i&&s.push(f),o(s)}if(t>e-u){const s=[];return i&&s.push(a),c&&s.push(p),h&&s.push(...n.slice(e-u,e)),o(s)}const P=h,_=r>=6,g=r>=7,E=i,l=[];return g?l.push(...n.slice(t+1-u,t+1)):_?l.push(...n.slice(t-u,t)):P&&l.push(...n.slice(t-1,t-1+1)),c&&l.push(p),E&&l.push(f),o(l)},G=(t,e,r)=>{if(t>r)return;let n=t;for(;e.includes(n);)n++;return n},T=(t,e)=>{if(t<1)return;let r=t;for(;e.includes(r);)r--;return r};export{G as findNextAvailablePage,T as findPreviousAvailablePage,m as getPaginationElementsToRender};
|
|
2
2
|
//# sourceMappingURL=pagination.helper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.helper.js","sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"pagination.helper.js","sources":["../../../src/components/pagination/pagination.helper.ts"],"sourcesContent":["import {\n GO_TO_NEXT_PAGE,\n GO_TO_PREVIOUS_PAGE,\n VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationItemsToRender } from './types'\n\nexport const getPaginationElementsToRender = (\n currentPage: number,\n pagesCount: number,\n visibleElementsCount: number\n): PaginationItemsToRender => {\n const paginationPages = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n /*\n * As we always show the `<` `>` arrows,\n * subtract 2 from `visibleElementsCount` (one for each of the GO_TO_PREVIOUS/NEXT_PAGE arrows)\n * to get the `visiblePagesCount`\n */\n let visiblePagesCount = visibleElementsCount - 2\n const withPreviousNextPageArrows = (paginationPages) => [\n GO_TO_PREVIOUS_PAGE,\n ...paginationPages,\n GO_TO_NEXT_PAGE\n ]\n\n /**\n * If fewer pages than threshold for truncating render them all.\n *\n * pagesCount: 6\n * visibleElementsCount: >=6\n * returns [GO_TO_PREVIOUS_PAGE, 1, 2, 3, 4, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 1 | | 2 | | 3 | | 4 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+\n *\n */\n if (pagesCount <= visiblePagesCount) {\n return withPreviousNextPageArrows(paginationPages)\n }\n\n /**\n * If current page is either at the very start or at the very end of the pages\n */\n const canFitEdgePage = visibleElementsCount >= 5\n const canFitViewAllPopover = visibleElementsCount >= 4\n const canFitPages = visibleElementsCount >= 3\n\n if (canFitViewAllPopover) {\n // Subtract one from visiblePagesCount to accomodate for us adding the `[…]` VIEW_ALL_POPOVER\n visiblePagesCount -= 1\n }\n\n if (canFitEdgePage) {\n // Subtract one more from visiblePagesCount to accomodate for us adding the GO_TO_PREVIOUS/NEXT_PAGE arrows\n visiblePagesCount -= 1\n }\n\n const firstPage = paginationPages[0]\n const lastPage = paginationPages[paginationPages.length - 1]\n\n /**\n * If we're truncating and current page is at the start of the page list,\n * render the initial truncated page list, e.g.\n *\n * pagesCount: 8\n * currentPage: 1/2\n * visibleElementsCount: 6\n * returns [GO_TO_PREVIOUS_PAGE, 1, 2, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 1 | | 2 | | … | | 8 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+\n *\n */\n if (currentPage < visiblePagesCount) {\n const newPaginationItems = [] as PaginationItemsToRender\n if (canFitPages) {\n newPaginationItems.push(...paginationPages.slice(0, visiblePagesCount))\n }\n if (canFitViewAllPopover) {\n newPaginationItems.push(VIEW_ALL_POPOVER)\n }\n if (canFitEdgePage) {\n newPaginationItems.push(lastPage)\n }\n return withPreviousNextPageArrows(newPaginationItems)\n }\n\n /**\n * If we're truncating and the current page is towards the end of the\n * page list (depending on visibleElementsCount),\n * render a truncated page list from the end, e.g.\n *\n * pagesCount: 8\n * currentPage: 7/8\n * visibleElementsCount: 6\n * returns [GO_TO_PREVIOUS_PAGE, 1, VIEW_ALL_POPOVER, 7, 8, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 1 | | … | | 7 | | 8 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+\n *\n */\n if (currentPage > pagesCount - visiblePagesCount) {\n const newPaginationItems = [] as PaginationItemsToRender\n if (canFitEdgePage) {\n newPaginationItems.push(firstPage)\n }\n if (canFitViewAllPopover) {\n newPaginationItems.push(VIEW_ALL_POPOVER)\n }\n if (canFitPages) {\n newPaginationItems.push(\n ...paginationPages.slice(pagesCount - visiblePagesCount, pagesCount)\n )\n }\n return withPreviousNextPageArrows(newPaginationItems)\n }\n\n /**\n * If we're truncating and the current page doesn't meet any of the previous conditions\n * (we're in the middle)\n * render a truncated page list from a specific index relative to `currentPage`, e.g.\n *\n * currentPage: 4\n * visibleElementsCount: 6 // VisibleElementsAmount.LESS\n * returns [GO_TO_PREVIOUS_PAGE, 3, 4, VIEW_ALL_POPOVER, 6, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 3 | | 4 | | … | | 6 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+\n *\n * currentPage: 6\n * visibleElementsCount: 8 // VisibleElementsAmount.MORE\n * returns [GO_TO_PREVIOUS_PAGE, 4, 5, 6, 7, VIEW_ALL_POPOVER, 10, GO_TO_NEXT_PAGE]\n * +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+\n * | < | | 4 | | 5 | | 6 | | 7 | | … | | 10 | | > |\n * +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+\n */\n const canFitCurrentPage = canFitPages\n const canFitCurrentPageAndPreviousPage = visibleElementsCount >= 6\n const canFitCurrentPageAndPreviousPageAndNextPage = visibleElementsCount >= 7\n const canFitLastPage = canFitEdgePage\n\n const newPaginationItems = [] as PaginationItemsToRender\n if (canFitCurrentPageAndPreviousPageAndNextPage) {\n newPaginationItems.push(\n ...paginationPages.slice(\n currentPage + 1 - visiblePagesCount,\n currentPage + 1\n )\n )\n } else if (canFitCurrentPageAndPreviousPage) {\n newPaginationItems.push(\n ...paginationPages.slice(currentPage - visiblePagesCount, currentPage)\n )\n } else if (canFitCurrentPage) {\n newPaginationItems.push(\n ...paginationPages.slice(currentPage - 1, currentPage - 1 + 1)\n )\n }\n if (canFitViewAllPopover) {\n newPaginationItems.push(VIEW_ALL_POPOVER)\n }\n if (canFitLastPage) {\n newPaginationItems.push(lastPage)\n }\n return withPreviousNextPageArrows(newPaginationItems)\n}\n\nexport const findNextAvailablePage = (\n startPage: number,\n disabledPages: number[],\n pagesCount: number\n): number | undefined => {\n if (startPage > pagesCount) return\n let nextPage = startPage\n while (disabledPages.includes(nextPage)) {\n nextPage++\n }\n return nextPage\n}\n\nexport const findPreviousAvailablePage = (\n startPage: number,\n disabledPages: number[]\n): number | undefined => {\n if (startPage < 1) return\n let previousPage = startPage\n while (disabledPages.includes(previousPage)) {\n previousPage--\n }\n return previousPage\n}\n"],"names":["getPaginationElementsToRender","currentPage","pagesCount","visibleElementsCount","paginationPages","_","index","visiblePagesCount","withPreviousNextPageArrows","GO_TO_PREVIOUS_PAGE","GO_TO_NEXT_PAGE","canFitEdgePage","canFitViewAllPopover","canFitPages","firstPage","lastPage","newPaginationItems","VIEW_ALL_POPOVER","canFitCurrentPage","canFitCurrentPageAndPreviousPage","canFitCurrentPageAndPreviousPageAndNextPage","canFitLastPage","findNextAvailablePage","startPage","disabledPages","nextPage","findPreviousAvailablePage","previousPage"],"mappings":"2GAOa,MAAAA,EAAgC,CAC3CC,EACAC,EACAC,IAC4B,CAC5B,MAAMC,EAAkB,MAAM,KAC5B,CAAE,OAAQF,CAAW,EACrB,CAACG,EAAGC,IAAUA,EAAQ,CACxB,EAOA,IAAIC,EAAoBJ,EAAuB,EAC/C,MAAMK,EAA8BJ,GAAoB,CACtDK,EACA,GAAGL,EACHM,CACF,EAaA,GAAIR,GAAcK,EAChB,OAAOC,EAA2BJ,CAAe,EAMnD,MAAMO,EAAiBR,GAAwB,EACzCS,EAAuBT,GAAwB,EAC/CU,EAAcV,GAAwB,EAExCS,IAEFL,GAAqB,GAGnBI,IAEFJ,GAAqB,GAGvB,MAAMO,EAAYV,EAAgB,GAC5BW,EAAWX,EAAgBA,EAAgB,OAAS,GAe1D,GAAIH,EAAcM,EAAmB,CACnC,MAAMS,EAAqB,CAC3B,EAAA,OAAIH,GACFG,EAAmB,KAAK,GAAGZ,EAAgB,MAAM,EAAGG,CAAiB,CAAC,EAEpEK,GACFI,EAAmB,KAAKC,CAAgB,EAEtCN,GACFK,EAAmB,KAAKD,CAAQ,EAE3BP,EAA2BQ,CAAkB,CACtD,CAgBA,GAAIf,EAAcC,EAAaK,EAAmB,CAChD,MAAMS,EAAqB,GAC3B,OAAIL,GACFK,EAAmB,KAAKF,CAAS,EAE/BF,GACFI,EAAmB,KAAKC,CAAgB,EAEtCJ,GACFG,EAAmB,KACjB,GAAGZ,EAAgB,MAAMF,EAAaK,EAAmBL,CAAU,CACrE,EAEKM,EAA2BQ,CAAkB,CACtD,CAqBA,MAAME,EAAoBL,EACpBM,EAAmChB,GAAwB,EAC3DiB,EAA8CjB,GAAwB,EACtEkB,EAAiBV,EAEjBK,EAAqB,CAAC,EAC5B,OAAII,EACFJ,EAAmB,KACjB,GAAGZ,EAAgB,MACjBH,EAAc,EAAIM,EAClBN,EAAc,CAChB,CACF,EACSkB,EACTH,EAAmB,KACjB,GAAGZ,EAAgB,MAAMH,EAAcM,EAAmBN,CAAW,CACvE,EACSiB,GACTF,EAAmB,KACjB,GAAGZ,EAAgB,MAAMH,EAAc,EAAGA,EAAc,EAAI,CAAC,CAC/D,EAEEW,GACFI,EAAmB,KAAKC,CAAgB,EAEtCI,GACFL,EAAmB,KAAKD,CAAQ,EAE3BP,EAA2BQ,CAAkB,CACtD,EAEaM,EAAwB,CACnCC,EACAC,EACAtB,IACuB,CACvB,GAAIqB,EAAYrB,EAAY,OAC5B,IAAIuB,EAAWF,EACf,KAAOC,EAAc,SAASC,CAAQ,GACpCA,IAEF,OAAOA,CACT,EAEaC,EAA4B,CACvCH,EACAC,IACuB,CACvB,GAAID,EAAY,EAAG,OACnB,IAAII,EAAeJ,EACnB,KAAOC,EAAc,SAASG,CAAY,GACxCA,IAEF,OAAOA,CACT"}
|
|
@@ -1,37 +1,39 @@
|
|
|
1
1
|
import { TcolorScheme } from '../../experiments/color-scheme';
|
|
2
2
|
import { CSS } from '../../stitches';
|
|
3
|
-
|
|
3
|
+
import { GO_TO_NEXT_PAGE, GO_TO_PREVIOUS_PAGE, VIEW_ALL_POPOVER } from './pagination.constants';
|
|
4
|
+
export declare type PaginationItemsToRender = (number | typeof VIEW_ALL_POPOVER | typeof GO_TO_PREVIOUS_PAGE | typeof GO_TO_NEXT_PAGE)[];
|
|
5
|
+
interface Labels {
|
|
4
6
|
popoverTriggerLabel?: string;
|
|
5
7
|
nextPageButtonLabel?: string;
|
|
6
8
|
previousPageButtonLabel?: string;
|
|
7
9
|
}
|
|
8
|
-
interface
|
|
10
|
+
interface BasePaginationProps {
|
|
9
11
|
pagesCount: number;
|
|
10
12
|
indicatedPages: number[];
|
|
11
13
|
disabledPages: number[];
|
|
12
|
-
paginationItems:
|
|
13
|
-
|
|
14
|
-
labels: ILabels;
|
|
14
|
+
paginationItems: PaginationItemsToRender;
|
|
15
|
+
labels: Labels;
|
|
15
16
|
onItemHover: (pageNumber: number) => void;
|
|
16
17
|
}
|
|
17
|
-
export declare type IPaginationAlignment = 'start' | 'end';
|
|
18
18
|
export declare type TVisibleElementsCount = 6 | 8;
|
|
19
|
-
export interface
|
|
19
|
+
export interface PaginationPageProps {
|
|
20
20
|
pageNumber: number;
|
|
21
21
|
css?: CSS;
|
|
22
22
|
}
|
|
23
|
-
export interface
|
|
23
|
+
export interface PaginationContextValue extends BasePaginationProps {
|
|
24
24
|
currentPage: number;
|
|
25
25
|
goToPage: (pagenumber: number) => void;
|
|
26
26
|
goToPreviousPage: () => void;
|
|
27
27
|
goToNextPage: () => void;
|
|
28
|
+
nextAvailablePage?: number;
|
|
29
|
+
previousAvailablePage?: number;
|
|
28
30
|
}
|
|
29
|
-
export declare type
|
|
31
|
+
export declare type PaginationProviderProps = Pick<BasePaginationProps, 'pagesCount'> & Partial<BasePaginationProps> & {
|
|
30
32
|
selectedPage?: number;
|
|
31
33
|
onSelectedPageChange?: (pageNumber: number) => void;
|
|
32
34
|
visibleElementsCount?: TVisibleElementsCount;
|
|
33
35
|
};
|
|
34
|
-
export interface
|
|
36
|
+
export interface PaginationProps extends PaginationProviderProps {
|
|
35
37
|
colorScheme?: TcolorScheme;
|
|
36
38
|
css?: CSS;
|
|
37
39
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare const usePagination: () =>
|
|
1
|
+
import type { PaginationContextValue } from './types';
|
|
2
|
+
export declare const usePagination: () => PaginationContextValue;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePagination.js","sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './pagination-context/PaginationContext'\nimport type {
|
|
1
|
+
{"version":3,"file":"usePagination.js","sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './pagination-context/PaginationContext'\nimport type { PaginationContextValue } from './types'\n\nexport const usePagination = (): PaginationContextValue => {\n const context = React.useContext(PaginationContext)\n\n if (!context) {\n throw new Error(\n 'Ensure that you wrap any components with the PaginationProvider component'\n )\n }\n\n return context\n}\n"],"names":["usePagination","context","React","PaginationContext"],"mappings":"sGAKa,MAAAA,EAAgB,IAA8B,CACzD,MAAMC,EAAUC,EAAM,WAAWC,CAAiB,EAElD,GAAI,CAACF,EACH,MAAM,IAAI,MACR,2EACF,EAGF,OAAOA,CACT"}
|