@purpurds/pagination 5.19.1

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-pagination_9shz4_1{align-items:center;display:flex;flex-direction:column-reverse;gap:var(--purpur-spacing-300)}@media screen and (min-width: 1024px){._purpur-pagination_9shz4_1{align-items:center;display:grid;gap:var(--purpur-spacing-100);grid-template-areas:"pagesize pagination empty";grid-template-columns:1fr 3fr 1fr}}._purpur-pagination__page-size-select-container_9shz4_16{flex:0 0 auto;width:100%}@media screen and (min-width: 1024px){._purpur-pagination__page-size-select-container_9shz4_16{grid-area:pagesize;width:auto}}._purpur-pagination__pagination-container_9shz4_26{align-items:center;display:inline-flex;gap:var(--purpur-spacing-200);margin:0 auto;max-width:calc(3 * var(--purpur-spacing-1200));width:100%}@media screen and (min-width: 600px){._purpur-pagination__pagination-container_9shz4_26{gap:var(--purpur-spacing-400);max-width:none;width:auto}}@media screen and (min-width: 1024px){._purpur-pagination__pagination-container_9shz4_26{grid-area:pagination;justify-self:center}}._purpur-pagination__step-trigger-label_9shz4_47{border:0;clip:rect(0,0,0,0);display:block;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}@media screen and (min-width: 1024px){._purpur-pagination__step-trigger-label_9shz4_47{clip:auto;display:inline;height:auto;margin:0;overflow:visible;position:static;white-space:normal;width:auto}}._purpur-pagination__step-trigger_9shz4_47{flex:0 0 auto}._purpur-pagination__page-trigger-container_9shz4_74{display:flex;flex:1 1 auto;justify-content:center}._purpur-pagination_9shz4_1 ._purpur-pagination__pages_9shz4_79{display:none}._purpur-pagination_9shz4_1 ._purpur-pagination__pages--visible_9shz4_82{display:flex}@media screen and (min-width: 600px){._purpur-pagination_9shz4_1 ._purpur-pagination__pages_9shz4_79{display:flex}}._purpur-pagination_9shz4_1 ._purpur-pagination__page-selector_9shz4_90{display:none}._purpur-pagination_9shz4_1 ._purpur-pagination__page-selector--visible_9shz4_93{display:flex}@media screen and (min-width: 600px){._purpur-pagination_9shz4_1 ._purpur-pagination__page-selector_9shz4_90{display:none}}._purpur-pagination-page-selector_1ca14_1{align-items:center;display:flex;gap:var(--purpur-spacing-150)}._purpur-pagination-page-selector__autocomplete_1ca14_6{max-width:var(--purpur-spacing-1000);width:100%}._purpur-pagination-page-selector__input_1ca14_10 input[type=number]{-moz-appearance:textfield}._purpur-pagination-page-selector__input_1ca14_10 input[type=number]::-webkit-outer-spin-button,._purpur-pagination-page-selector__input_1ca14_10 input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._purpur-pagination-page-selector__of-total-pages-label_1ca14_18{flex:0 0 auto}._purpur-pagination-page-size-selector_l9us8_1{align-items:center;display:flex;gap:var(--purpur-spacing-150);justify-content:center}@media screen and (min-width: 1024px){._purpur-pagination-page-size-selector_l9us8_1{justify-content:flex-start}}._purpur-pagination-page-size-selector__select_l9us8_12{flex:1 0 var(--purpur-spacing-1000);max-width:var(--purpur-spacing-1000);width:100%}._purpur-pagination-page-size-selector_l9us8_1 ._purpur-pagination-page-size-selector__items-per-page-label_l9us8_17{flex:0 1 auto;display:block;font-weight:var(--purpur-typography-weight-normal);-webkit-hyphens:none;hyphens:none;line-height:var(--purpur-typography-line-height-loose);margin:0;overflow:hidden;text-overflow:ellipsis}._purpur-pagination-page-size-selector_l9us8_1 ._purpur-pagination-page-size-selector__items-per-page-label-text_l9us8_27{white-space:nowrap}._purpur-pagination-page-trigger_1gni9_1{display:block}._purpur-pagination-page-trigger__trigger-item_1gni9_4{align-items:center;border-radius:var(--purpur-border-radius-full);border-width:0;cursor:pointer;display:inline-flex;font-size:var(--purpur-typography-scale-100);font-family:var(--purpur-typography-family-default);font-weight:var(--purpur-typography-weight-medium);gap:var(--purpur-spacing-100);justify-content:center;line-height:var(--purpur-spacing-300);outline:0;position:relative;text-decoration:none;transition:all var(--purpur-motion-duration-100) ease;width:auto}._purpur-pagination-page-trigger__trigger-item_1gni9_4:focus:before{border-radius:var(--purpur-border-radius-full);box-shadow:0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);content:"";display:block;inset:calc(var(--purpur-spacing-25) * -1);position:absolute}._purpur-pagination-page-trigger__trigger-item_1gni9_4:focus:not(:focus-visible):before{box-shadow:none}._purpur-pagination-page-trigger__trigger-item_1gni9_4 svg{display:block}._purpur-pagination-page-trigger__trigger-item--sm_1gni9_36{padding:var(--purpur-spacing-100) var(--purpur-spacing-250)}._purpur-pagination-page-trigger__trigger-item--sm_1gni9_36._purpur-pagination-page-trigger__trigger-item--icon-only_1gni9_39{padding:var(--purpur-spacing-100)}._purpur-pagination-page-trigger__trigger-item--md_1gni9_42{padding:var(--purpur-spacing-150) var(--purpur-spacing-300)}._purpur-pagination-page-trigger__trigger-item--md_1gni9_42._purpur-pagination-page-trigger__trigger-item--icon-only_1gni9_39{padding:var(--purpur-spacing-150)}._purpur-pagination-page-trigger__trigger-item--lg_1gni9_48{padding:var(--purpur-spacing-200) var(--purpur-spacing-400)}._purpur-pagination-page-trigger__trigger-item--lg_1gni9_48._purpur-pagination-page-trigger__trigger-item--icon-only_1gni9_39{padding:var(--purpur-spacing-200)}._purpur-pagination-page-trigger__trigger-item--full-width_1gni9_54{width:100%}._purpur-pagination-page-trigger__trigger-item--primary_1gni9_57{background-color:var(--purpur-color-background-interactive-primary);color:var(--purpur-color-text-interactive-on-primary)}._purpur-pagination-page-trigger__trigger-item--primary_1gni9_57:hover:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-primary-hover)}._purpur-pagination-page-trigger__trigger-item--primary_1gni9_57:active:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-primary-active)}._purpur-pagination-page-trigger__trigger-item--primary-negative_1gni9_67{background-color:var(--purpur-color-background-interactive-primary-negative);color:var(--purpur-color-text-interactive-on-primary-negative)}._purpur-pagination-page-trigger__trigger-item--primary-negative_1gni9_67:hover:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-primary-negative-hover);border-color:var(--purpur-color-background-interactive-primary-negative-hover)}._purpur-pagination-page-trigger__trigger-item--primary-negative_1gni9_67:active:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-primary-negative-active);border-color:var(--purpur-color-background-interactive-primary-negative-active)}._purpur-pagination-page-trigger__trigger-item--secondary_1gni9_79{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary);color:var(--purpur-color-text-interactive-primary)}._purpur-pagination-page-trigger__trigger-item--secondary_1gni9_79:hover:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-pagination-page-trigger__trigger-item--secondary_1gni9_79:active:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-pagination-page-trigger__trigger-item--secondary-negative_1gni9_90{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary-negative);color:var(--purpur-color-text-interactive-primary-negative)}._purpur-pagination-page-trigger__trigger-item--secondary-negative_1gni9_90:hover:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-pagination-page-trigger__trigger-item--secondary-negative_1gni9_90:active:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-pagination-page-trigger__trigger-item--expressive_1gni9_101{background-color:var(--purpur-color-background-interactive-expressive);color:var(--purpur-color-text-interactive-on-expressive)}._purpur-pagination-page-trigger__trigger-item--expressive_1gni9_101:hover:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-expressive-hover)}._purpur-pagination-page-trigger__trigger-item--expressive_1gni9_101:active:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-expressive-active)}._purpur-pagination-page-trigger__trigger-item--expressive-negative_1gni9_111{background-color:var(--purpur-color-background-interactive-expressive-negative);color:var(--purpur-color-text-interactive-on-expressive-negative)}._purpur-pagination-page-trigger__trigger-item--expressive-negative_1gni9_111:hover:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-expressive-negative-hover);color:var(--purpur-color-text-interactive-on-expressive-negative-hover)}._purpur-pagination-page-trigger__trigger-item--expressive-negative_1gni9_111:active:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-expressive-negative-active);color:var(--purpur-color-text-interactive-on-expressive-negative-active)}._purpur-pagination-page-trigger__trigger-item--page-trigger_1gni9_123{background-color:var(--purpur-color-background-interactive-transparent);box-sizing:border-box;color:var(--purpur-color-text-interactive-primary);height:calc(var(--purpur-spacing-150) + var(--purpur-spacing-400));padding:var(--purpur-spacing-150);transition:background-color var(--purpur-duration-100) var(--purpur-timing-standard),color var(--purpur-duration-100) var(--purpur-timing-standard);width:calc(var(--purpur-spacing-150) + var(--purpur-spacing-400))}._purpur-pagination-page-trigger__trigger-item_1gni9_4:hover:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61):not(._purpur-pagination-page-trigger__trigger-item--selected_1gni9_132){background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-pagination-page-trigger__trigger-item_1gni9_4:active:not(._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61){background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-pagination-page-trigger__trigger-item--selected_1gni9_132{background-color:var(--purpur-color-background-interactive-primary);color:var(--purpur-color-text-interactive-on-primary)}._purpur-pagination-page-trigger__trigger-item--disabled_1gni9_61{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:none;color:var(--purpur-color-text-weak);cursor:not-allowed}._purpur-pagination-pages_2g8is_1{display:flex;gap:var(--purpur-spacing-100);justify-content:center;list-style-type:none;margin:0;padding:0}._purpur-pagination-truncation-separator_b9cij_1{box-sizing:border-box;display:block;height:calc(2 * var(--purpur-spacing-250));padding:var(--purpur-spacing-150) 0;text-align:center;width:var(--purpur-spacing-250)}._purpur-pagination-step-trigger__trigger-item_104ss_1{align-items:center;border-radius:var(--purpur-border-radius-full);border-width:0;cursor:pointer;display:inline-flex;font-size:var(--purpur-typography-scale-100);font-family:var(--purpur-typography-family-default);font-weight:var(--purpur-typography-weight-medium);gap:var(--purpur-spacing-100);justify-content:center;line-height:var(--purpur-spacing-300);outline:0;position:relative;text-decoration:none;transition:all var(--purpur-motion-duration-100) ease;width:auto}._purpur-pagination-step-trigger__trigger-item_104ss_1:focus:before{border-radius:var(--purpur-border-radius-full);box-shadow:0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);content:"";display:block;inset:calc(var(--purpur-spacing-25) * -1);position:absolute}._purpur-pagination-step-trigger__trigger-item_104ss_1:focus:not(:focus-visible):before{box-shadow:none}._purpur-pagination-step-trigger__trigger-item_104ss_1 svg{display:block}._purpur-pagination-step-trigger__trigger-item--sm_104ss_33{padding:var(--purpur-spacing-100) var(--purpur-spacing-250)}._purpur-pagination-step-trigger__trigger-item--sm_104ss_33._purpur-pagination-step-trigger__trigger-item--icon-only_104ss_36{padding:var(--purpur-spacing-100)}._purpur-pagination-step-trigger__trigger-item--md_104ss_39{padding:var(--purpur-spacing-150) var(--purpur-spacing-300)}._purpur-pagination-step-trigger__trigger-item--md_104ss_39._purpur-pagination-step-trigger__trigger-item--icon-only_104ss_36{padding:var(--purpur-spacing-150)}._purpur-pagination-step-trigger__trigger-item--lg_104ss_45{padding:var(--purpur-spacing-200) var(--purpur-spacing-400)}._purpur-pagination-step-trigger__trigger-item--lg_104ss_45._purpur-pagination-step-trigger__trigger-item--icon-only_104ss_36{padding:var(--purpur-spacing-200)}._purpur-pagination-step-trigger__trigger-item--full-width_104ss_51{width:100%}._purpur-pagination-step-trigger__trigger-item--primary_104ss_54{background-color:var(--purpur-color-background-interactive-primary);color:var(--purpur-color-text-interactive-on-primary)}._purpur-pagination-step-trigger__trigger-item--primary_104ss_54:hover:not(._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58){background-color:var(--purpur-color-background-interactive-primary-hover)}._purpur-pagination-step-trigger__trigger-item--primary_104ss_54:active:not(._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58){background-color:var(--purpur-color-background-interactive-primary-active)}._purpur-pagination-step-trigger__trigger-item--primary-negative_104ss_64{background-color:var(--purpur-color-background-interactive-primary-negative);color:var(--purpur-color-text-interactive-on-primary-negative)}._purpur-pagination-step-trigger__trigger-item--primary-negative_104ss_64:hover:not(._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58){background-color:var(--purpur-color-background-interactive-primary-negative-hover);border-color:var(--purpur-color-background-interactive-primary-negative-hover)}._purpur-pagination-step-trigger__trigger-item--primary-negative_104ss_64:active:not(._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58){background-color:var(--purpur-color-background-interactive-primary-negative-active);border-color:var(--purpur-color-background-interactive-primary-negative-active)}._purpur-pagination-step-trigger__trigger-item--secondary_104ss_76{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary);color:var(--purpur-color-text-interactive-primary)}._purpur-pagination-step-trigger__trigger-item--secondary_104ss_76:hover:not(._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58){background-color:var(--purpur-color-background-interactive-transparent-hover)}._purpur-pagination-step-trigger__trigger-item--secondary_104ss_76:active:not(._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58){background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-pagination-step-trigger__trigger-item--secondary-negative_104ss_87{background-color:var(--purpur-color-background-interactive-transparent);box-shadow:inset 0 0 0 var(--purpur-border-width-xs) var(--purpur-color-border-interactive-primary-negative);color:var(--purpur-color-text-interactive-primary-negative)}._purpur-pagination-step-trigger__trigger-item--secondary-negative_104ss_87:hover:not(._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58){background-color:var(--purpur-color-background-interactive-transparent-negative-hover)}._purpur-pagination-step-trigger__trigger-item--secondary-negative_104ss_87:active:not(._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58){background-color:var(--purpur-color-background-interactive-transparent-negative-active)}._purpur-pagination-step-trigger__trigger-item--expressive_104ss_98{background-color:var(--purpur-color-background-interactive-expressive);color:var(--purpur-color-text-interactive-on-expressive)}._purpur-pagination-step-trigger__trigger-item--expressive_104ss_98:hover:not(._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58){background-color:var(--purpur-color-background-interactive-expressive-hover)}._purpur-pagination-step-trigger__trigger-item--expressive_104ss_98:active:not(._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58){background-color:var(--purpur-color-background-interactive-expressive-active)}._purpur-pagination-step-trigger__trigger-item--expressive-negative_104ss_108{background-color:var(--purpur-color-background-interactive-expressive-negative);color:var(--purpur-color-text-interactive-on-expressive-negative)}._purpur-pagination-step-trigger__trigger-item--expressive-negative_104ss_108:hover:not(._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58){background-color:var(--purpur-color-background-interactive-expressive-negative-hover);color:var(--purpur-color-text-interactive-on-expressive-negative-hover)}._purpur-pagination-step-trigger__trigger-item--expressive-negative_104ss_108:active:not(._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58){background-color:var(--purpur-color-background-interactive-expressive-negative-active);color:var(--purpur-color-text-interactive-on-expressive-negative-active)}._purpur-pagination-step-trigger__trigger-item--step-trigger_104ss_120{box-sizing:border-box;height:calc(var(--purpur-spacing-150) + var(--purpur-spacing-400));padding:var(--purpur-spacing-100);width:calc(var(--purpur-spacing-150) + var(--purpur-spacing-400))}@media screen and (min-width: 1024px){._purpur-pagination-step-trigger__trigger-item--step-trigger_104ss_120{padding:var(--purpur-spacing-100) var(--purpur-spacing-250);width:auto}}._purpur-pagination-step-trigger__trigger-item--disabled_104ss_58{background-color:var(--purpur-color-background-interactive-disabled);box-shadow:none;color:var(--purpur-color-text-weak);cursor:not-allowed}

package/dist/types.d.ts

@@ -0,0 +1,35 @@
+export type PaginationInformation = {
+    pageSize: number;
+    currentPage: number;
+};
+export type NavigationInformation = PaginationInformation & {
+    url: string;
+};
+export type HrefInformation = {
+    pageSize: number;
+    page: number;
+};
+export type LinkProps = {
+    anchorTagElement?: Link;
+    asLink: true;
+    hrefGetter: (hrefInformation: HrefInformation) => string;
+    navigationFunction?: (navigationInformation: NavigationInformation) => void;
+    onPageChange?: (paginationChangeInformation: PaginationInformation) => void;
+};
+export type NoLinkProps = {
+    anchorTagElement?: never;
+    asLink?: never;
+    hrefGetter?: never;
+    navigationFunction?: never;
+    onPageChange: (paginationChangeInformation: PaginationInformation) => void;
+};
+export type InternalLinkProps = {
+    asLink: true;
+    hrefGetter: (page: number) => string;
+};
+export type InternalNoLinkProps = {
+    asLink?: never;
+    hrefGetter?: never;
+};
+export type Link = React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement>> | "a";
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,GAAG;IAC1D,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,gBAAgB,CAAC,EAAE,IAAI,CAAC;IACxB,MAAM,EAAE,IAAI,CAAC;IACb,UAAU,EAAE,CAAC,eAAe,EAAE,eAAe,KAAK,MAAM,CAAC;IACzD,kBAAkB,CAAC,EAAE,CAAC,qBAAqB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC5E,YAAY,CAAC,EAAE,CAAC,2BAA2B,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,kBAAkB,CAAC,EAAE,KAAK,CAAC;IAC3B,YAAY,EAAE,CAAC,2BAA2B,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,IAAI,CAAC;IACb,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,UAAU,CAAC,EAAE,KAAK,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,IAAI,GACZ,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC9E,GAAG,CAAC"}

package/dist/use-page-options.hook.d.ts

@@ -0,0 +1,8 @@
+import { Option } from '@purpurds/autocomplete';
+
+type UsePageOptionsHook = {
+    options: Option[];
+};
+export declare const usePageOptions: (numberOfPages: number) => UsePageOptionsHook;
+export {};
+//# sourceMappingURL=use-page-options.hook.d.ts.map

package/dist/use-page-options.hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-page-options.hook.d.ts","sourceRoot":"","sources":["../src/use-page-options.hook.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,KAAK,kBAAkB,GAAG;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,kBAAmB,MAAM,KAAG,kBAatD,CAAC"}

package/dist/use-page-size-options.hook.d.ts

@@ -0,0 +1,8 @@
+import { SelectOption } from '@purpurds/select';
+
+type UsePageSizeOptionsHook = {
+    options: SelectOption[];
+};
+export declare const usePageSizeOptions: (availablePageSizes: number[]) => UsePageSizeOptionsHook;
+export {};
+//# sourceMappingURL=use-page-size-options.hook.d.ts.map

package/dist/use-page-size-options.hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-page-size-options.hook.d.ts","sourceRoot":"","sources":["../src/use-page-size-options.hook.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,KAAK,sBAAsB,GAAG;IAC5B,OAAO,EAAE,YAAY,EAAE,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,uBAAwB,MAAM,EAAE,KAAG,sBAajE,CAAC"}

package/dist/use-pagination-page-selector-events.hook.d.ts

@@ -0,0 +1,10 @@
+import { Option } from '@purpurds/autocomplete';
+
+type UsePaginationPageSelectorEvents = {
+    onKeyUp: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onSelectionChange: (option?: Option) => void;
+    resetSelection: () => void;
+};
+export declare const usePaginationPageSelectorEvents: (currentPage: number, navigationFunction: (page: number, url: string) => void, numberOfPages: number, onPageChange: (page: number) => void, options: Option[], setValue: React.Dispatch<React.SetStateAction<string | number>>, asLink?: boolean, hrefGetter?: (page: number) => string) => UsePaginationPageSelectorEvents;
+export {};
+//# sourceMappingURL=use-pagination-page-selector-events.hook.d.ts.map

package/dist/use-pagination-page-selector-events.hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pagination-page-selector-events.hook.d.ts","sourceRoot":"","sources":["../src/use-pagination-page-selector-events.hook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,KAAK,+BAA+B,GAAG;IACrC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChE,iBAAiB,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,+BAA+B,gBAC7B,MAAM,sBACC,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,iBACxC,MAAM,gBACP,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,WAC3B,MAAM,EAAE,YACP,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,WACtD,OAAO,eACH,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,KACpC,+BAyCF,CAAC"}

package/dist/use-pagination-pages.hook.d.ts

@@ -0,0 +1,7 @@
+type UsePaginationPagesHook = {
+    pages: number[];
+    numberOfPages: number;
+};
+export declare const usePaginationPages: (totalItems: number, pageSize: number, currentPage: number) => UsePaginationPagesHook;
+export {};
+//# sourceMappingURL=use-pagination-pages.hook.d.ts.map

package/dist/use-pagination-pages.hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pagination-pages.hook.d.ts","sourceRoot":"","sources":["../src/use-pagination-pages.hook.ts"],"names":[],"mappings":"AAEA,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,eACjB,MAAM,YACR,MAAM,eACH,MAAM,KAClB,sBAcF,CAAC"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@purpurds/pagination",
+  "version": "5.19.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/pagination.cjs.js",
+  "types": "./dist/pagination.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/pagination.cjs.js",
+      "types": "./dist/pagination.d.ts",
+      "default": "./dist/pagination.es.js"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "source": "src/pagination.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/action": "5.19.1",
+    "@purpurds/label": "5.19.1",
+    "@purpurds/autocomplete": "5.19.1",
+    "@purpurds/select": "5.19.1",
+    "@purpurds/tokens": "5.19.1",
+    "@purpurds/paragraph": "5.19.1",
+    "@purpurds/text-field": "5.19.1",
+    "@purpurds/icon": "5.19.1"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.4.0",
+    "@testing-library/react": "~14.3.0",
+    "@testing-library/user-event": "~14.5.1",
+    "@types/node": "20.12.12",
+    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.3",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "^8.57.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "storybook": "^8.2.6",
+    "typescript": "^5.5.4",
+    "vite": "5.3.4",
+    "vitest": "~1.5.0",
+    "@purpurds/component-rig": "1.0.0",
+    "@purpurds/skeleton": "5.19.1",
+    "@purpurds/listbox": "5.19.1"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/navigation.ts

@@ -0,0 +1,3 @@
+export const navigateToPage = (url: string): void => {
+  window.location.href = url;
+};

package/src/pagination-page-selector.module.scss

@@ -0,0 +1,26 @@
+.purpur-pagination-page-selector {
+  align-items: center;
+  display: flex;
+  gap: var(--purpur-spacing-150);
+
+  &__autocomplete {
+    max-width: var(--purpur-spacing-1000);
+    width: 100%;
+  }
+
+  &__input {
+    input[type="number"] {
+      -moz-appearance: textfield;
+    }
+
+    input[type="number"]::-webkit-outer-spin-button,
+    input[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  &__of-total-pages-label {
+    flex: 0 0 auto;
+  }
+}

package/src/pagination-page-selector.test.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { PaginationPageSelector } from "./pagination-page-selector";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+});
+
+describe("PaginationPageSelector", () => {
+  const defaultProps = {
+    currentPage: 1,
+    navigationFunction: vi.fn(),
+    numberOfPages: 5,
+    onPageChange: vi.fn(),
+    outOfLabel: "of",
+    pageSelectorListBoxLabel: "Select a page",
+    pageSelectorNoOptionsText: "Page does not exist",
+  };
+
+  it("renders without crashing", () => {
+    render(<PaginationPageSelector {...defaultProps} />);
+    expect(screen.getByTestId("purpur-pagination-page-selector")).toBeInTheDocument();
+  });
+
+  it("displays the correct number of total pages", () => {
+    render(<PaginationPageSelector {...defaultProps} />);
+    expect(screen.getByTestId(Selectors.OF_TOTAL_PAGES).textContent).toContain("of 5");
+  });
+
+  it("displays the correct page number in the autocomplete input", () => {
+    render(<PaginationPageSelector {...defaultProps} />);
+    expect(screen.getByTestId(Selectors.AUTO_COMPLETE_INPUT)).toHaveValue(1);
+  });
+
+  it("calls onPageChange when a page is clicked", async () => {
+    const onPageChange = vi.fn();
+    render(<PaginationPageSelector {...defaultProps} onPageChange={onPageChange} />);
+
+    await userEvent.click(screen.getByTestId(Selectors.AUTO_COMPLETE_INPUT));
+    await userEvent.click(screen.getByText("2"));
+    expect(onPageChange).toHaveBeenCalledWith(2);
+  });
+
+  it("calls navigationFunction when a page is clicked and link mode is set", async () => {
+    const onPageChange = vi.fn();
+    const navigationFunction = vi.fn();
+    const hrefGetter = vi.fn().mockReturnValue("#page-2");
+    render(
+      <PaginationPageSelector
+        {...defaultProps}
+        asLink
+        hrefGetter={hrefGetter}
+        onPageChange={onPageChange}
+        navigationFunction={navigationFunction}
+      />
+    );
+
+    await userEvent.click(screen.getByTestId(Selectors.AUTO_COMPLETE_INPUT));
+    await userEvent.click(screen.getByText("2"));
+    expect(onPageChange).toHaveBeenCalledWith(2);
+    expect(hrefGetter).toHaveBeenCalledWith(2);
+    expect(navigationFunction).toHaveBeenCalledWith(2, "#page-2");
+  });
+});
+
+const Selectors = {
+  PAGE_SELECTOR: "purpur-pagination-page-selector",
+  OF_TOTAL_PAGES: "purpur-pagination-page-selector-of-total-pages",
+  AUTO_COMPLETE: "purpur-pagination-page-selector-autocomplete",
+  AUTO_COMPLETE_INPUT: "purpur-pagination-page-selector-autocomplete-input-input",
+};

package/src/pagination-page-selector.tsx

@@ -0,0 +1,105 @@
+import React, { FormEvent, ForwardedRef, forwardRef, useId } from "react";
+import { Autocomplete } from "@purpurds/autocomplete";
+import { Paragraph } from "@purpurds/paragraph";
+import { TextField } from "@purpurds/text-field";
+import c from "classnames/bind";
+
+import styles from "./pagination-page-selector.module.scss";
+import { InternalLinkProps, InternalNoLinkProps } from "./types";
+import { usePageOptions } from "./use-page-options.hook";
+import { usePaginationPageSelectorEvents } from "./use-pagination-page-selector-events.hook";
+const cx = c.bind(styles);
+
+export type PaginationPageSelectorProps = {
+  ["data-testid"]?: string;
+  className?: string;
+  currentPage: number;
+  navigationFunction: (page: number, url: string) => void;
+  numberOfPages: number;
+  onPageChange: (page: number) => void;
+  outOfLabel: string;
+  pageSelectorAutocompleteId?: string;
+  pageSelectorListBoxLabel: string;
+  pageSelectorNoOptionsText: string;
+} & (InternalLinkProps | InternalNoLinkProps);
+
+const rootClassName = "purpur-pagination-page-selector";
+
+export const PaginationPageSelector = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "purpur-pagination-page-selector",
+      asLink,
+      className,
+      currentPage,
+      hrefGetter,
+      navigationFunction,
+      numberOfPages,
+      onPageChange,
+      outOfLabel,
+      pageSelectorAutocompleteId,
+      pageSelectorListBoxLabel,
+      pageSelectorNoOptionsText,
+      ...props
+    }: PaginationPageSelectorProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const id = useId();
+    const classes = cx([className, rootClassName]);
+    const [value, setValue] = React.useState<string | number>(currentPage);
+    const { options } = usePageOptions(numberOfPages);
+    const { onSelectionChange, onKeyUp, resetSelection } = usePaginationPageSelectorEvents(
+      currentPage,
+      navigationFunction,
+      numberOfPages,
+      onPageChange,
+      options,
+      setValue,
+      asLink,
+      hrefGetter
+    );
+
+    React.useEffect(() => {
+      setValue(currentPage);
+    }, [currentPage]);
+
+    return (
+      <div className={classes} data-testid={dataTestId} ref={ref} {...props}>
+        <Autocomplete
+          className={cx(`${rootClassName}__autocomplete`)}
+          combobox
+          data-testid={`${dataTestId}-autocomplete`}
+          id={pageSelectorAutocompleteId ?? id}
+          listboxLabel={pageSelectorListBoxLabel}
+          noOptionsText={pageSelectorNoOptionsText}
+          onSelect={onSelectionChange}
+          options={options}
+          renderInput={(props) => (
+            <TextField
+              {...props}
+              className={cx(`${rootClassName}__input`)}
+              min={1}
+              max={numberOfPages}
+              onBlur={resetSelection}
+              onInput={(event: FormEvent<HTMLInputElement>) => {
+                setValue((event.target as HTMLInputElement).value);
+              }}
+              onKeyUp={onKeyUp}
+              type="number"
+              value={value}
+            />
+          )}
+          selectedOption={options[currentPage - 1]}
+        />
+        <Paragraph
+          className={cx(`${rootClassName}__of-total-pages-label`)}
+          data-testid={`${dataTestId}-of-total-pages`}
+        >
+          {`${outOfLabel} ${numberOfPages}`}
+        </Paragraph>
+      </div>
+    );
+  }
+);
+
+PaginationPageSelector.displayName = "PaginationPageSelector";

package/src/pagination-page-size-selector.module.scss

@@ -0,0 +1,34 @@
+@import "@purpurds/tokens/breakpoint/variables";
+
+.purpur-pagination-page-size-selector {
+  $root: &;
+  align-items: center;
+  display: flex;
+  gap: var(--purpur-spacing-150);
+  justify-content: center;
+
+  @media screen and (min-width: $purpur-breakpoint-lg) {
+    justify-content: flex-start;
+  }
+
+  &__select {
+    flex: 1 0 var(--purpur-spacing-1000);
+    max-width: var(--purpur-spacing-1000);
+    width: 100%;
+  }
+
+  #{$root}__items-per-page-label {
+    flex: 0 1 auto;
+    display: block;
+    font-weight: var(--purpur-typography-weight-normal);
+    hyphens: none;
+    line-height: var(--purpur-typography-line-height-loose);
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  #{$root}__items-per-page-label-text {
+    white-space: nowrap;
+  }
+}

package/src/pagination-page-size-selector.test.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { PaginationPageSizeSelector } from "./pagination-page-size-selector";
+
+expect.extend(matchers);
+
+vi.mock("./navigation");
+
+afterEach(() => {
+  vi.clearAllMocks();
+  cleanup();
+});
+
+describe("PaginationPageSizeSelector", () => {
+  const defaultProps = {
+    availablePageSizes: [10, 20, 30],
+    pageSizeLabel: "Items per page",
+    onPageSizeChange: vi.fn(),
+    pageSize: 10,
+  };
+
+  it("renders correctly with default props", () => {
+    render(<PaginationPageSizeSelector {...defaultProps} />);
+
+    expect(screen.getByTestId(Selectors.PAGINATION_PAGE_SIZE_SELECTOR)).toBeInTheDocument();
+    expect(screen.getByTestId(Selectors.ITEMS_PER_PAGE_LABEL)).toHaveTextContent("Items per page");
+    expect(screen.getByTestId(Selectors.PAGE_SIZE_SELECT)).toHaveValue("10");
+  });
+
+  it("calls onPageSizeChange when a new page size is selected", async () => {
+    render(<PaginationPageSizeSelector {...defaultProps} />);
+
+    const select = screen.getByTestId(Selectors.PAGE_SIZE_SELECT);
+    await userEvent.selectOptions(select, "20");
+
+    expect(defaultProps.onPageSizeChange).toHaveBeenCalledWith(20);
+  });
+
+  it("navigates to the correct page when asLink is true", async () => {
+    const hrefGetter = vi.fn().mockReturnValue("/page/1?pageSize=20");
+    const navigationFunction = vi.fn().mockReturnValue("/page/1?pageSize=20");
+
+    render(
+      <PaginationPageSizeSelector
+        {...defaultProps}
+        asLink
+        hrefGetter={hrefGetter}
+        navigationFunction={navigationFunction}
+      />
+    );
+
+    const select = screen.getByTestId(Selectors.PAGE_SIZE_SELECT);
+    await userEvent.selectOptions(select, "20");
+
+    expect(hrefGetter).toHaveBeenCalledWith({ page: 1, pageSize: 20 });
+    expect(defaultProps.onPageSizeChange).toHaveBeenCalledWith(20);
+    expect(navigationFunction).toHaveBeenCalledWith({
+      currentPage: 1,
+      pageSize: 20,
+      url: "/page/1?pageSize=20",
+    });
+  });
+});
+
+const Selectors = {
+  PAGINATION_PAGE_SIZE_SELECTOR: "purpur-pagination-page-size-selector",
+  ITEMS_PER_PAGE_LABEL: "purpur-pagination-page-size-selector-item-per-page-label",
+  PAGE_SIZE_SELECT: "purpur-pagination-page-size-selector-select-select",
+};

package/src/pagination-page-size-selector.tsx

@@ -0,0 +1,78 @@
+import React, { ForwardedRef, forwardRef, useId } from "react";
+import { Label } from "@purpurds/label";
+import { Select } from "@purpurds/select";
+import c from "classnames/bind";
+
+import { navigateToPage } from "./navigation";
+import styles from "./pagination-page-size-selector.module.scss";
+import { LinkProps, NoLinkProps } from "./types";
+import { usePageSizeOptions } from "./use-page-size-options.hook";
+const cx = c.bind(styles);
+
+export type PaginationPageSizeSelectorProps = {
+  ["data-testid"]?: string;
+  availablePageSizes: number[];
+  className?: string;
+  onPageSizeChange: (itemsPerPage: number) => void;
+  pageSize: number;
+  pageSizeLabel: string;
+} & (LinkProps | NoLinkProps);
+
+const rootClassName = "purpur-pagination-page-size-selector";
+
+export const PaginationPageSizeSelector = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestId = "purpur-pagination-page-size-selector",
+      asLink,
+      availablePageSizes,
+      className,
+      hrefGetter,
+      navigationFunction,
+      onPageSizeChange,
+      pageSize,
+      pageSizeLabel,
+      ...props
+    }: PaginationPageSizeSelectorProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const selectId = useId();
+    const classes = cx([className, rootClassName]);
+    const { options } = usePageSizeOptions(availablePageSizes);
+
+    const onSelectionChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const selectedPageSize = Number(event.target.value);
+      onPageSizeChange(selectedPageSize);
+      if (asLink) {
+        const url = hrefGetter({ page: 1, pageSize: selectedPageSize });
+        if (navigationFunction) {
+          navigationFunction({ currentPage: 1, pageSize: selectedPageSize, url });
+        } else {
+          navigateToPage(url);
+        }
+      }
+    };
+
+    return (
+      <div className={classes} data-testid={dataTestId} ref={ref} {...props}>
+        <Label
+          className={cx(`${rootClassName}__items-per-page-label`)}
+          data-testid={`${dataTestId}-item-per-page-label`}
+          htmlFor={selectId}
+        >
+          <span className={cx(`${rootClassName}__items-per-page-label-text`)}>{pageSizeLabel}</span>
+        </Label>
+        <Select
+          className={cx(`${rootClassName}__select`)}
+          data-testid={`${dataTestId}-select`}
+          id={selectId}
+          onChange={onSelectionChange}
+          options={options}
+          value={pageSize}
+        />
+      </div>
+    );
+  }
+);
+
+PaginationPageSizeSelector.displayName = "PaginationPageSizeSelector";

package/src/pagination-page-trigger.module.scss

@@ -0,0 +1,41 @@
+@import "@purpurds/action/src/action.scss";
+
+.purpur-pagination-page-trigger {
+  display: block;
+
+  &__trigger-item {
+    $trigger-item: &;
+    @include action();
+
+    &--page-trigger {
+      background-color: var(--purpur-color-background-interactive-transparent);
+      box-sizing: border-box;
+      color: var(--purpur-color-text-interactive-primary);
+      height: calc(var(--purpur-spacing-150) + var(--purpur-spacing-400));
+      padding: var(--purpur-spacing-150);
+      transition: background-color var(--purpur-duration-100) var(--purpur-timing-standard),
+        color var(--purpur-duration-100) var(--purpur-timing-standard);
+      width: calc(var(--purpur-spacing-150) + var(--purpur-spacing-400));
+    }
+
+    &:hover:not(#{$trigger-item}--disabled):not(#{$trigger-item}--selected) {
+      background-color: var(--purpur-color-background-interactive-transparent-hover);
+    }
+
+    &:active:not(#{$trigger-item}--disabled) {
+      background-color: var(--purpur-color-background-interactive-transparent-active);
+    }
+
+    &--selected {
+      background-color: var(--purpur-color-background-interactive-primary);
+      color: var(--purpur-color-text-interactive-on-primary);
+    }
+
+    &--disabled {
+      background-color: var(--purpur-color-background-interactive-transparent);
+      box-shadow: none;
+      color: var(--purpur-color-text-weak);
+      cursor: not-allowed;
+    }
+  }
+}