@atom-learning/components 3.13.0 → 3.14.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 +4 -2
- package/dist/components/pagination/Pagination.d.ts +6 -2
- package/dist/components/pagination/Pagination.js +1 -1
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/pagination/PaginationPopover.d.ts +2 -2
- package/dist/components/pagination/PaginationPopover.js +1 -1
- package/dist/components/pagination/PaginationPopover.js.map +1 -1
- package/dist/components/pagination/types.d.ts +2 -0
- 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/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
# [3.
|
|
1
|
+
# [3.14.0](https://github.com/Atom-Learning/components/compare/v3.13.0...v3.14.0) (2024-03-07)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* added custom popover view, updated tests ([ad03065](https://github.com/Atom-Learning/components/commit/ad030656ee0228c9403d9a4411b1e17cc1fca180))
|
|
7
|
+
* refactored to export popover and use children directly in Pagination ([2b6df8b](https://github.com/Atom-Learning/components/commit/2b6df8b96cf46608b66fce4fc2bb8725318e6abd))
|
|
8
|
+
* update test to reflect actual use case with icon and text ([de77f38](https://github.com/Atom-Learning/components/commit/de77f38ee622422199141c4da99924e135e810de))
|
|
7
9
|
|
|
8
10
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
9
11
|
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
import type { PaginationProps } from './types';
|
|
3
3
|
export declare const Pagination: {
|
|
4
|
-
({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, ...rest }: PaginationProps): JSX.Element | null;
|
|
4
|
+
({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, children, ...rest }: PaginationProps): JSX.Element | null;
|
|
5
5
|
displayName: string;
|
|
6
|
+
} & {
|
|
7
|
+
Popover: ({ children }: {
|
|
8
|
+
children?: React.ReactNode;
|
|
9
|
+
}) => JSX.Element;
|
|
6
10
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{ColorScheme as
|
|
1
|
+
import*as e from"react";import{ColorScheme as P}from"../../experiments/color-scheme/ColorScheme.js";import{Flex as p}from"../flex/Flex.js";import{VisibleElementsAmount as b}from"./pagination.constants.js";import{PaginationProvider as u}from"./pagination-context/PaginationContext.js";import{PaginationItems as C}from"./PaginationItems.js";import{PaginationPopover as E}from"./PaginationPopover.js";const t=({colorScheme:a,onSelectedPageChange:n,selectedPage:i,visibleElementsCount:l=b.LESS,pagesCount:o,indicatedPages:r=[],disabledPages:m=[],onItemHover:s=()=>null,labels:g={},children:c,...d})=>o?e.createElement(u,{onSelectedPageChange:n,selectedPage:i,visibleElementsCount:l,pagesCount:o,indicatedPages:r,disabledPages:m,onItemHover:s,labels:g},e.createElement(P,{base:"grey1",accent:"primary1",...a,asChild:!0},c||e.createElement(p,{gap:1,...d},e.createElement(C,null)))):null,f=Object.assign(t,{Popover:E});t.displayName="Pagination";export{f 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 { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { PaginationItems } from './PaginationItems'\nimport type { PaginationProps } from './types'\n\
|
|
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 { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n colorScheme,\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children,\n ...rest\n}: PaginationProps) => {\n if (!pagesCount) return null\n\n const paginationProviderProps: 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=\"primary1\" {...colorScheme} asChild>\n {children || (\n <Flex gap={1} {...rest}>\n <PaginationItems />\n </Flex>\n )}\n </ColorScheme>\n </PaginationProvider>\n )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"names":["PaginationComponent","colorScheme","onSelectedPageChange","selectedPage","visibleElementsCount","VisibleElementsAmount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","rest","React","PaginationProvider","ColorScheme","Flex","PaginationItems","Pagination","PaginationPopover"],"mappings":"8YAUA,MAAMA,EAAsB,CAAC,CAC3B,YAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBC,EAAsB,KAC7C,WAAAC,EACA,eAAAC,EAAiB,GACjB,cAAAC,EAAgB,GAChB,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,CAAA,EACT,SAAAC,KACGC,CACL,IACON,EAcHO,EAAA,cAACC,EAAA,CAXD,qBAAAZ,EACA,aAAAC,EACA,qBAAAC,EACA,WAAAE,EACA,eAAAC,EACA,cAAAC,EACA,YAAAC,EACA,OAAAC,CAKEG,EAAAA,EAAA,cAACE,EAAA,CAAY,KAAK,QAAQ,OAAO,WAAY,GAAGd,EAAa,QAAO,EAAA,EACjEU,GACCE,EAAA,cAACG,EAAA,CAAK,IAAK,EAAI,GAAGJ,CAChBC,EAAAA,EAAA,cAACI,EAAA,IAAgB,CACnB,CAEJ,CACF,EAtBsB,KA0BbC,EAAa,OAAO,OAAOlB,EAAqB,CAC3D,QAASmB,CACX,CAAC,EAEDnB,EAAoB,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const PaginationPopover: () => JSX.Element;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const PaginationPopover: ({ children }: React.PropsWithChildren<unknown>) => JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Ellypsis as
|
|
1
|
+
import{Ellypsis as a}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as l}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 s}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 c}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"../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 f}from"./usePagination.js";const u=({children:m})=>{const{pagesCount:e,labels:i}=f(),p=Array.from({length:e},(o,n)=>n+1);return t.createElement(r,null,t.createElement(r.Trigger,{asChild:!0},m||t.createElement(l,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(c,{is:a}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(s,{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{u 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 { 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
|
|
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 return (\n <Popover>\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 css={{ bg: '$white' }}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"8nHAOO,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,EAEA,OACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,IACrBR,GACCO,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOP,GAAA,YAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZK,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,GAC7DD,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,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { TcolorScheme } from '../../experiments/color-scheme';
|
|
2
3
|
import { CSS } from '../../stitches';
|
|
3
4
|
import { GO_TO_NEXT_PAGE, GO_TO_PREVIOUS_PAGE, VIEW_ALL_POPOVER } from './pagination.constants';
|
|
@@ -36,5 +37,6 @@ export declare type PaginationProviderProps = Pick<BasePaginationProps, 'pagesCo
|
|
|
36
37
|
export interface PaginationProps extends PaginationProviderProps {
|
|
37
38
|
colorScheme?: TcolorScheme;
|
|
38
39
|
css?: CSS;
|
|
40
|
+
children?: React.ReactNode;
|
|
39
41
|
}
|
|
40
42
|
export {};
|