New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@zag-js/pagination

Package Overview
Dependencies
Maintainers
0
Versions
862
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zag-js/pagination - npm Package Compare versions

Comparing version 0.0.0-dev-20240723090825 to 0.0.0-v1-beta-20250220125322

89

dist/index.d.ts
import * as _zag_js_anatomy from '@zag-js/anatomy';
import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, NormalizeProps } from '@zag-js/types';
import { DirectionProperty, CommonProperties, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
import * as _zag_js_core from '@zag-js/core';
import { Machine, StateMachine } from '@zag-js/core';
import { Service, EventObject } from '@zag-js/core';

@@ -20,5 +20,5 @@ declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "item" | "ellipsis" | "prevTrigger" | "nextTrigger">;

interface IntlTranslations {
rootLabel?: string;
prevTriggerLabel?: string;
nextTriggerLabel?: string;
rootLabel?: string | undefined;
prevTriggerLabel?: string | undefined;
nextTriggerLabel?: string | undefined;
itemLabel?(details: ItemLabelDetails): string;

@@ -33,20 +33,24 @@ }

}>;
interface PublicContext extends DirectionProperty, CommonProperties {
interface PaginationProps extends DirectionProperty, CommonProperties {
/**
* The ids of the elements in the accordion. Useful for composition.
*/
ids?: ElementIds;
ids?: ElementIds | undefined;
/**
* Specifies the localized strings that identifies the accessibility elements and their states
*/
translations: IntlTranslations;
translations?: IntlTranslations | undefined;
/**
* Total number of data items
*/
count: number;
count?: number | undefined;
/**
* Number of data items per page
*/
pageSize?: number | undefined;
/**
* Default number of data items per page
* @default 10
*/
pageSize: number;
defaultPageSize?: number | undefined;
/**

@@ -56,16 +60,20 @@ * Number of pages to show beside active page

*/
siblingCount: number;
siblingCount?: number | undefined;
/**
* The active page
*/
page?: number | undefined;
/**
* Default active page
* @default 1
*/
page: number;
defaultPage?: number | undefined;
/**
* Called when the page number is changed
*/
onPageChange?: (details: PageChangeDetails) => void;
onPageChange?: ((details: PageChangeDetails) => void) | undefined;
/**
* Called when the page size is changed
*/
onPageSizeChange?: (details: PageSizeChangeDetails) => void;
onPageSizeChange?: ((details: PageSizeChangeDetails) => void) | undefined;
/**

@@ -75,9 +83,11 @@ * The type of the trigger element

*/
type: "button" | "link";
type?: "button" | "link" | undefined;
}
type PropsWithDefault = "defaultPageSize" | "defaultPage" | "siblingCount" | "translations" | "type" | "count";
interface PrivateContext {
page: number;
pageSize: number;
}
type ComputedContext = Readonly<{
/**
* @computed
* Total number of pages

@@ -87,8 +97,2 @@ */

/**
* @computed
* Pages to render in pagination
*/
items: Pages;
/**
* @computed
* Index of first and last data items on current page

@@ -101,3 +105,2 @@ */

/**
* @computed
* The previous page index

@@ -107,3 +110,2 @@ */

/**
* @computed
* The next page index

@@ -113,3 +115,2 @@ */

/**
* @computed
* Whether the current page is valid

@@ -119,11 +120,13 @@ */

}>;
type UserDefinedContext = RequiredBy<PublicContext, "id" | "count">;
interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
interface PaginationSchema {
state: "idle";
props: RequiredBy<PaginationProps, PropsWithDefault>;
context: PrivateContext;
computed: ComputedContext;
event: EventObject;
action: string;
guard: string;
effect: string;
}
interface MachineState {
value: "idle";
}
type State = StateMachine.State<MachineContext, MachineState>;
type Send = StateMachine.Send<StateMachine.AnyEventObject>;
type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
type PaginationService = Service<PaginationSchema>;
interface ItemProps {

@@ -146,3 +149,3 @@ type: "page";

}
interface MachineApi<T extends PropTypes = PropTypes> {
interface PaginationApi<T extends PropTypes = PropTypes> {
/**

@@ -153,2 +156,6 @@ * The current page.

/**
* The total number of data items.
*/
count: number;
/**
* The number of data items per page.

@@ -182,6 +189,2 @@ */

/**
* Function to set the total number of pages.
*/
setCount(count: number): void;
/**
* Function to set the page size.

@@ -217,8 +220,8 @@ */

declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
declare function connect<T extends PropTypes>(service: PaginationService, normalize: NormalizeProps<T>): PaginationApi<T>;
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
declare const machine: _zag_js_core.MachineConfig<PaginationSchema>;
declare const props: ("type" | "dir" | "id" | "getRootNode" | "page" | "ids" | "translations" | "count" | "pageSize" | "siblingCount" | "onPageChange" | "onPageSizeChange")[];
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "type" | "dir" | "id" | "getRootNode" | "page" | "ids" | "translations" | "count" | "pageSize" | "siblingCount" | "onPageChange" | "onPageSizeChange">];
declare const props: (keyof PaginationProps)[];
declare const splitProps: <Props extends Partial<PaginationProps>>(props: Props) => [Partial<PaginationProps>, Omit<Props, keyof PaginationProps>];
declare const itemProps: (keyof ItemProps)[];

@@ -229,2 +232,2 @@ declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];

export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type EllipsisProps, type IntlTranslations, type ItemLabelDetails, type ItemProps, type PageChangeDetails, type PageSizeChangeDetails, type Service, anatomy, connect, ellipsisProps, itemProps, machine, props, splitEllipsisProps, splitItemProps, splitProps };
export { type PaginationApi as Api, type ElementIds, type EllipsisProps, type IntlTranslations, type ItemLabelDetails, type ItemProps, type PageChangeDetails, type PageSizeChangeDetails, type PaginationProps as Props, type PaginationService as Service, anatomy, connect, ellipsisProps, itemProps, machine, props, splitEllipsisProps, splitItemProps, splitProps };

@@ -1,52 +0,19 @@

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
'use strict';
// src/index.ts
var src_exports = {};
__export(src_exports, {
anatomy: () => anatomy,
connect: () => connect,
ellipsisProps: () => ellipsisProps,
itemProps: () => itemProps,
machine: () => machine,
props: () => props,
splitEllipsisProps: () => splitEllipsisProps,
splitItemProps: () => splitItemProps,
splitProps: () => splitProps
});
module.exports = __toCommonJS(src_exports);
var anatomy$1 = require('@zag-js/anatomy');
var domQuery = require('@zag-js/dom-query');
var core = require('@zag-js/core');
var types = require('@zag-js/types');
var utils = require('@zag-js/utils');
// src/pagination.anatomy.ts
var import_anatomy = require("@zag-js/anatomy");
var anatomy = (0, import_anatomy.createAnatomy)("pagination").parts("root", "item", "ellipsis", "prevTrigger", "nextTrigger");
var anatomy = anatomy$1.createAnatomy("pagination").parts("root", "item", "ellipsis", "prevTrigger", "nextTrigger");
var parts = anatomy.build();
// src/pagination.connect.ts
var import_dom_query2 = require("@zag-js/dom-query");
// src/pagination.dom.ts
var import_dom_query = require("@zag-js/dom-query");
var dom = (0, import_dom_query.createScope)({
getRootId: (ctx) => ctx.ids?.root ?? `pagination:${ctx.id}`,
getPrevTriggerId: (ctx) => ctx.ids?.prevTrigger ?? `pagination:${ctx.id}:prev`,
getNextTriggerId: (ctx) => ctx.ids?.nextTrigger ?? `pagination:${ctx.id}:next`,
getEllipsisId: (ctx, index) => ctx.ids?.ellipsis?.(index) ?? `pagination:${ctx.id}:ellipsis:${index}`,
getItemId: (ctx, page) => ctx.ids?.item?.(page) ?? `pagination:${ctx.id}:item:${page}`
});
var getRootId = (ctx) => ctx.ids?.root ?? `pagination:${ctx.id}`;
var getPrevTriggerId = (ctx) => ctx.ids?.prevTrigger ?? `pagination:${ctx.id}:prev`;
var getNextTriggerId = (ctx) => ctx.ids?.nextTrigger ?? `pagination:${ctx.id}:next`;
var getEllipsisId = (ctx, index) => ctx.ids?.ellipsis?.(index) ?? `pagination:${ctx.id}:ellipsis:${index}`;
var getItemId = (ctx, page) => ctx.ids?.item?.(page) ?? `pagination:${ctx.id}:item:${page}`;

@@ -66,7 +33,8 @@ // src/pagination.utils.ts

var getRange = (ctx) => {
const totalPageNumbers = Math.min(2 * ctx.siblingCount + 5, ctx.totalPages);
const { page, totalPages, siblingCount } = ctx;
const totalPageNumbers = Math.min(2 * siblingCount + 5, totalPages);
const firstPageIndex = 1;
const lastPageIndex = ctx.totalPages;
const leftSiblingIndex = Math.max(ctx.page - ctx.siblingCount, firstPageIndex);
const rightSiblingIndex = Math.min(ctx.page + ctx.siblingCount, lastPageIndex);
const lastPageIndex = totalPages;
const leftSiblingIndex = Math.max(page - siblingCount, firstPageIndex);
const rightSiblingIndex = Math.min(page + siblingCount, lastPageIndex);
const showLeftEllipsis = leftSiblingIndex > firstPageIndex + 1;

@@ -93,17 +61,24 @@ const showRightEllipsis = rightSiblingIndex < lastPageIndex - 1;

// src/pagination.connect.ts
function connect(state, send, normalize) {
const totalPages = state.context.totalPages;
const page = state.context.page;
const translations = state.context.translations;
const previousPage = state.context.previousPage;
const nextPage = state.context.nextPage;
const pageRange = state.context.pageRange;
const type = state.context.type;
function connect(service, normalize) {
const { send, scope, prop, computed, context } = service;
const totalPages = computed("totalPages");
const page = context.get("page");
const translations = prop("translations");
const count = prop("count");
const previousPage = computed("previousPage");
const nextPage = computed("nextPage");
const pageRange = computed("pageRange");
const type = prop("type");
const isButton = type === "button";
const isFirstPage = page === 1;
const isLastPage = page === totalPages;
const pages = getTransformedRange(state.context);
const pages = getTransformedRange({
page,
totalPages,
siblingCount: prop("siblingCount")
});
return {
count,
page,
pageSize: state.context.pageSize,
pageSize: context.get("pageSize"),
totalPages,

@@ -117,5 +92,2 @@ pages,

},
setCount(count) {
send({ type: "SET_COUNT", count });
},
setPageSize(size) {

@@ -141,5 +113,5 @@ send({ type: "SET_PAGE_SIZE", size });

return normalize.element({
id: dom.getRootId(state.context),
id: getRootId(scope),
...parts.root.attrs,
dir: state.context.dir,
dir: prop("dir"),
"aria-label": translations.rootLabel

@@ -150,5 +122,5 @@ });

return normalize.element({
id: dom.getEllipsisId(state.context, props2.index),
id: getEllipsisId(scope, props2.index),
...parts.ellipsis.attrs,
dir: state.context.dir
dir: prop("dir")
});

@@ -158,9 +130,9 @@ },

const index = props2.value;
const isCurrentPage = index === state.context.page;
const isCurrentPage = index === page;
return normalize.element({
id: dom.getItemId(state.context, index),
id: getItemId(scope, index),
...parts.item.attrs,
dir: state.context.dir,
dir: prop("dir"),
"data-index": index,
"data-selected": (0, import_dom_query2.dataAttr)(isCurrentPage),
"data-selected": domQuery.dataAttr(isCurrentPage),
"aria-current": isCurrentPage ? "page" : void 0,

@@ -176,6 +148,6 @@ "aria-label": translations.itemLabel?.({ page: index, totalPages }),

return normalize.element({
id: dom.getPrevTriggerId(state.context),
id: getPrevTriggerId(scope),
...parts.prevTrigger.attrs,
dir: state.context.dir,
"data-disabled": (0, import_dom_query2.dataAttr)(isFirstPage),
dir: prop("dir"),
"data-disabled": domQuery.dataAttr(isFirstPage),
"aria-label": translations.prevTriggerLabel,

@@ -190,6 +162,6 @@ onClick() {

return normalize.element({
id: dom.getNextTriggerId(state.context),
id: getNextTriggerId(scope),
...parts.nextTrigger.attrs,
dir: state.context.dir,
"data-disabled": (0, import_dom_query2.dataAttr)(isLastPage),
dir: prop("dir"),
"data-disabled": domQuery.dataAttr(isLastPage),
"aria-label": translations.nextTriggerLabel,

@@ -204,6 +176,2 @@ onClick() {

}
// src/pagination.machine.ts
var import_core = require("@zag-js/core");
var import_utils = require("@zag-js/utils");
var defaultTranslations = {

@@ -218,124 +186,118 @@ rootLabel: "pagination",

};
function machine(userContext) {
const ctx = (0, import_utils.compact)(userContext);
return (0, import_core.createMachine)(
{
id: "pagination",
initial: "idle",
context: {
pageSize: 10,
siblingCount: 1,
page: 1,
type: "button",
translations: {
...defaultTranslations,
...ctx.translations
},
...ctx
var machine = core.createMachine({
props({ props: props2 }) {
return {
defaultPageSize: 10,
siblingCount: 1,
defaultPage: 1,
type: "button",
count: 1,
translations: defaultTranslations,
...props2
};
},
initialState() {
return "idle";
},
context({ prop, bindable, getContext }) {
return {
page: bindable(() => ({
value: prop("page"),
defaultValue: prop("defaultPage"),
onChange(value) {
const context = getContext();
prop("onPageChange")?.({ page: value, pageSize: context.get("pageSize") });
}
})),
pageSize: bindable(() => ({
value: prop("pageSize"),
defaultValue: prop("defaultPageSize"),
onChange(value) {
prop("onPageSizeChange")?.({ pageSize: value });
}
}))
};
},
watch({ track, context, action }) {
track([() => context.get("page")], () => {
action(["setPageIfNeeded"]);
});
},
computed: {
totalPages: ({ context, prop }) => Math.ceil(prop("count") / context.get("pageSize")),
previousPage: ({ context }) => context.get("page") === 1 ? null : context.get("page") - 1,
nextPage: ({ context, computed }) => context.get("page") === computed("totalPages") ? null : context.get("page") + 1,
pageRange: ({ context, prop }) => {
const start = (context.get("page") - 1) * context.get("pageSize");
const end = Math.min(start + context.get("pageSize"), prop("count"));
return { start, end };
},
isValidPage: ({ context, computed }) => context.get("page") >= 1 && context.get("page") <= computed("totalPages")
},
on: {
SET_PAGE: {
guard: "isValidPage",
actions: ["setPage"]
},
SET_PAGE_SIZE: {
actions: ["setPageSize"]
},
FIRST_PAGE: {
actions: ["goToFirstPage"]
},
LAST_PAGE: {
actions: ["goToLastPage"]
},
PREVIOUS_PAGE: {
guard: "canGoToPrevPage",
actions: ["goToPrevPage"]
},
NEXT_PAGE: {
guard: "canGoToNextPage",
actions: ["goToNextPage"]
}
},
states: {
idle: {}
},
implementations: {
guards: {
isValidPage: ({ event, computed }) => event.page >= 1 && event.page <= computed("totalPages"),
isValidCount: ({ context, event }) => context.get("page") > event.count,
canGoToNextPage: ({ context, computed }) => context.get("page") < computed("totalPages"),
canGoToPrevPage: ({ context }) => context.get("page") > 1
},
actions: {
setPage({ context, event, computed }) {
const page = clampPage(event.page, computed("totalPages"));
context.set("page", page);
},
watch: {
pageSize: ["setPageIfNeeded"]
setPageSize({ context, event }) {
context.set("pageSize", event.size);
},
computed: {
totalPages: (ctx2) => Math.ceil(ctx2.count / ctx2.pageSize),
previousPage: (ctx2) => ctx2.page === 1 ? null : ctx2.page - 1,
nextPage: (ctx2) => ctx2.page === ctx2.totalPages ? null : ctx2.page + 1,
pageRange: (ctx2) => {
const start = (ctx2.page - 1) * ctx2.pageSize;
const end = start + ctx2.pageSize;
return { start, end };
},
isValidPage: (ctx2) => ctx2.page >= 1 && ctx2.page <= ctx2.totalPages
goToFirstPage({ context }) {
context.set("page", 1);
},
on: {
SET_COUNT: [
{
guard: "isValidCount",
actions: ["setCount", "goToFirstPage"]
},
{
actions: "setCount"
}
],
SET_PAGE: {
guard: "isValidPage",
actions: "setPage"
},
SET_PAGE_SIZE: {
actions: "setPageSize"
},
FIRST_PAGE: {
actions: "goToFirstPage"
},
LAST_PAGE: {
actions: "goToLastPage"
},
PREVIOUS_PAGE: {
guard: "canGoToPrevPage",
actions: "goToPrevPage"
},
NEXT_PAGE: {
guard: "canGoToNextPage",
actions: "goToNextPage"
}
goToLastPage({ context, computed }) {
context.set("page", computed("totalPages"));
},
states: {
idle: {}
}
},
{
guards: {
isValidPage: (ctx2, evt) => evt.page >= 1 && evt.page <= ctx2.totalPages,
isValidCount: (ctx2, evt) => ctx2.page > evt.count,
canGoToNextPage: (ctx2) => ctx2.page < ctx2.totalPages,
canGoToPrevPage: (ctx2) => ctx2.page > 1
goToPrevPage({ context, computed }) {
context.set("page", (prev) => {
return clampPage(prev - 1, computed("totalPages"));
});
},
actions: {
setCount(ctx2, evt) {
ctx2.count = evt.count;
},
setPage(ctx2, evt) {
set.page(ctx2, evt.page);
},
setPageSize(ctx2, evt) {
set.pageSize(ctx2, evt.size);
},
goToFirstPage(ctx2) {
set.page(ctx2, 1);
},
goToLastPage(ctx2) {
set.page(ctx2, ctx2.totalPages);
},
goToPrevPage(ctx2) {
set.page(ctx2, ctx2.page - 1);
},
goToNextPage(ctx2) {
set.page(ctx2, ctx2.page + 1);
},
setPageIfNeeded(ctx2, _evt) {
if (ctx2.isValidPage) return;
set.page(ctx2, 1);
}
goToNextPage({ context, computed }) {
context.set("page", (prev) => {
return clampPage(prev + 1, computed("totalPages"));
});
},
setPageIfNeeded({ context, computed }) {
if (computed("isValidPage")) return;
context.set("page", 1);
}
}
);
}
}
});
var clampPage = (page, totalPages) => Math.min(Math.max(page, 1), totalPages);
var set = {
pageSize: (ctx, value) => {
if ((0, import_utils.isEqual)(ctx.pageSize, value)) return;
ctx.pageSize = value;
ctx.onPageSizeChange?.({ pageSize: ctx.pageSize });
},
page: (ctx, value) => {
if ((0, import_utils.isEqual)(ctx.page, value)) return;
ctx.page = clampPage(value, ctx.totalPages);
ctx.onPageChange?.({ page: ctx.page, pageSize: ctx.pageSize });
}
};
// src/pagination.props.ts
var import_types = require("@zag-js/types");
var import_utils2 = require("@zag-js/utils");
var props = (0, import_types.createProps)()([
var props = types.createProps()([
"count",

@@ -349,3 +311,5 @@ "dir",

"page",
"defaultPage",
"pageSize",
"defaultPageSize",
"siblingCount",

@@ -355,19 +319,16 @@ "translations",

]);
var splitProps = (0, import_utils2.createSplitProps)(props);
var itemProps = (0, import_types.createProps)()(["value", "type"]);
var splitItemProps = (0, import_utils2.createSplitProps)(itemProps);
var ellipsisProps = (0, import_types.createProps)()(["index"]);
var splitEllipsisProps = (0, import_utils2.createSplitProps)(ellipsisProps);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
anatomy,
connect,
ellipsisProps,
itemProps,
machine,
props,
splitEllipsisProps,
splitItemProps,
splitProps
});
//# sourceMappingURL=index.js.map
var splitProps = utils.createSplitProps(props);
var itemProps = types.createProps()(["value", "type"]);
var splitItemProps = utils.createSplitProps(itemProps);
var ellipsisProps = types.createProps()(["index"]);
var splitEllipsisProps = utils.createSplitProps(ellipsisProps);
exports.anatomy = anatomy;
exports.connect = connect;
exports.ellipsisProps = ellipsisProps;
exports.itemProps = itemProps;
exports.machine = machine;
exports.props = props;
exports.splitEllipsisProps = splitEllipsisProps;
exports.splitItemProps = splitItemProps;
exports.splitProps = splitProps;
{
"name": "@zag-js/pagination",
"version": "0.0.0-dev-20240723090825",
"version": "0.0.0-v1-beta-20250220125322",
"description": "Core logic for the pagination widget implemented as a state machine",

@@ -20,4 +20,3 @@ "keywords": [

"files": [
"dist",
"src"
"dist"
],

@@ -31,7 +30,7 @@ "publishConfig": {

"dependencies": {
"@zag-js/anatomy": "0.0.0-dev-20240723090825",
"@zag-js/dom-query": "0.0.0-dev-20240723090825",
"@zag-js/utils": "0.0.0-dev-20240723090825",
"@zag-js/core": "0.0.0-dev-20240723090825",
"@zag-js/types": "0.0.0-dev-20240723090825"
"@zag-js/anatomy": "0.0.0-v1-beta-20250220125322",
"@zag-js/dom-query": "0.0.0-v1-beta-20250220125322",
"@zag-js/core": "0.0.0-v1-beta-20250220125322",
"@zag-js/utils": "0.0.0-v1-beta-20250220125322",
"@zag-js/types": "0.0.0-v1-beta-20250220125322"
},

@@ -55,5 +54,5 @@ "devDependencies": {

"build": "tsup",
"lint": "eslint src --ext .ts,.tsx",
"lint": "eslint src",
"typecheck": "tsc --noEmit"
}
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc