@synerise/ds-pagination 1.0.70 → 1.0.72

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.
Files changed (3) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/CLAUDE.md +90 -0
  3. package/package.json +7 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.0.72](https://github.com/synerise/synerise-design/compare/@synerise/ds-pagination@1.0.71...@synerise/ds-pagination@1.0.72) (2026-07-24)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-pagination
9
+
10
+ ## [1.0.71](https://github.com/synerise/synerise-design/compare/@synerise/ds-pagination@1.0.70...@synerise/ds-pagination@1.0.71) (2026-07-23)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-pagination
13
+
6
14
  ## [1.0.70](https://github.com/synerise/synerise-design/compare/@synerise/ds-pagination@1.0.69...@synerise/ds-pagination@1.0.70) (2026-07-16)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-pagination
package/CLAUDE.md ADDED
@@ -0,0 +1,90 @@
1
+ # Pagination (`@synerise/ds-pagination`)
2
+ > DS-native, antd-free pagination — page-window/ellipsis list, prev/next, jump-prev/next, optional
3
+ > size changer (`@synerise/ds-select`), quick jumper, and total summary. Styled with
4
+ > styled-components; emits `ds-pagination-*` class hooks (no `ant-*`).
5
+
6
+ ## Package structure
7
+ ```
8
+ src/
9
+ Pagination.tsx — the component: page state (controlled/uncontrolled), handlers, render
10
+ Pagination.types.ts — PaginationProps, PaginationLocale, PaginationItemType
11
+ Pagination.styles.ts — styled-components (Root, Item, Nav, Jump, Options, SizeChanger, QuickJumper, JumperInput)
12
+ getPages.ts — page-item list algorithm (window + ellipsis) + getJumpSize
13
+ index.ts — exports default + PaginationProps / PaginationLocale types
14
+ modules.d.ts — @testing-library/jest-dom augmentation
15
+ ```
16
+
17
+ No LESS, no antd. The previous `style/*.less` was inlined into `Pagination.styles.ts`.
18
+
19
+ ## Public exports
20
+ ```ts
21
+ import Pagination from '@synerise/ds-pagination';
22
+ import type { PaginationProps, PaginationLocale } from '@synerise/ds-pagination';
23
+ ```
24
+
25
+ ### `Pagination`
26
+
27
+ | Prop | Type | Default | Description |
28
+ |------|------|---------|-------------|
29
+ | `current` | `number` | — | Controlled current page. |
30
+ | `defaultCurrent` | `number` | `1` | Uncontrolled initial page. |
31
+ | `total` | `number` | `0` | Total item count. |
32
+ | `pageSize` | `number` | — | Controlled page size. |
33
+ | `defaultPageSize` | `number` | `10` | Uncontrolled initial page size. |
34
+ | `onChange` | `(page, pageSize) => void` | — | Fired on page or page-size change. |
35
+ | `showSizeChanger` | `boolean` | auto (`total > 50`) | Render the page-size `<Select>`. When omitted, auto-shows once `total > 50` (antd parity); an explicit value always wins. |
36
+ | `pageSizeOptions` | `(string\|number)[]` | `['10','20','50','100']` | Size-changer options. |
37
+ | `onShowSizeChange` | `(current, size) => void` | — | Fired when the size changes. |
38
+ | `showQuickJumper` | `boolean` | `false` | Render the quick-jumper input (jump on Enter). |
39
+ | `showTotal` | `(total, [from,to]) => ReactNode` | — | Total/range summary. |
40
+ | `showLessItems` | `boolean` | `false` | Narrower page window. |
41
+ | `disabled` | `boolean` | `false` | Disable all controls. |
42
+ | `hideOnSinglePage` | `boolean` | `false` | Render nothing when there is one page. |
43
+ | `locale` | `PaginationLocale` | — | `{ page?, jump_to?, items_per_page? }` labels. |
44
+ | `itemRender` | `(page, type, el) => ReactNode` | — | Accepted for back-compat but **ignored** (DS renders its own controls), matching the previous behaviour. |
45
+ | `className`, `style`, `data-*` | — | — | Applied to the root `<ul>`. |
46
+
47
+ ## Usage patterns
48
+ ```tsx
49
+ import Pagination from '@synerise/ds-pagination';
50
+
51
+ <Pagination defaultCurrent={1} total={500} />
52
+ <Pagination current={page} total={500} onChange={(page) => setPage(page)} />
53
+ <Pagination current={page} total={5000} showSizeChanger showQuickJumper
54
+ onChange={(page, pageSize) => handleChange(page, pageSize)} />
55
+ ```
56
+
57
+ No CSS import is required (styled-components).
58
+
59
+ ## Styling
60
+ - All styling lives in `Pagination.styles.ts` (styled-components, theme tokens). Classes are hooks only,
61
+ not styling selectors.
62
+ - Page item: 32px, `border-radius: 16px`; active = `grey-700` background, white text; hover = translucent grey.
63
+ - prev/next: `grey-600` ghost icon buttons (`@synerise/ds-button`); disabled = `opacity: 0.4`.
64
+ - jump-prev/next: `OptionHorizontalM` by default, swap to `DoubleAngleLeftS`/`DoubleAngleRightS` on hover
65
+ (via `.default-icon` / `.hover-icon` toggling inside the styled `Jump`).
66
+ - size changer: `@synerise/ds-select`, `min-width: 140px`; quick jumper: input with `blue-600` focus ring.
67
+ - Font family `'Graphik LCG Web', sans-serif`.
68
+
69
+ ### DOM / class hooks (`ds-pagination-*` only)
70
+ `ds-pagination` (root `<ul>`) → `ds-pagination-total-text`, `ds-pagination-prev`, `ds-pagination-item`
71
+ + `ds-pagination-item-{n}` (+ `ds-pagination-item-active`), `ds-pagination-jump-prev` / `-jump-next`,
72
+ `ds-pagination-next`, `ds-pagination-options` + `-options-size-changer` / `-options-quick-jumper`.
73
+
74
+ ## Key dependencies
75
+ - `@synerise/ds-button` — ghost single-icon nav controls
76
+ - `@synerise/ds-icon` — `AngleLeftS`/`AngleRightS`/`DoubleAngleLeftS`/`DoubleAngleRightS`/`OptionHorizontalM`
77
+ - `@synerise/ds-select` — the size changer (`Select` + `Select.Option`)
78
+ - `@synerise/ds-utils` — `DataAttributes` passthrough type
79
+ - `@synerise/ds-core` (peer), `styled-components` (peer)
80
+
81
+ ## Implementation notes
82
+ - **Page algorithm** in `getPages.ts`: ≤ `5 + buffer*2` pages → all shown; otherwise a `buffer`-wide
83
+ window around `current` with the first/last page pinned and `jump-prev`/`jump-next` ellipsis controls.
84
+ `buffer` is 2 (1 when `showLessItems`); jump controls skip `buffer*2 + 1` pages.
85
+ - **Controlled/uncontrolled** both for `current` and `pageSize` independently.
86
+ - **`itemRender` is ignored** — the component always renders its own DS nav controls (the prop is kept
87
+ in the type for back-compat since the old wrapper also overrode it).
88
+ - ds-table / ds-table-new render this component and target the `ds-pagination-*` hooks (updated from the
89
+ old `ant-pagination-*`).
90
+ - Uses **Vitest**.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-pagination",
3
- "version": "1.0.70",
3
+ "version": "1.0.72",
4
4
  "description": "Pagination UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "synerise/synerise-design",
@@ -17,6 +17,7 @@
17
17
  "files": [
18
18
  "/dist",
19
19
  "CHANGELOG.md",
20
+ "CLAUDE.md",
20
21
  "README.md",
21
22
  "package.json",
22
23
  "LICENSE.md"
@@ -41,10 +42,10 @@
41
42
  ],
42
43
  "types": "dist/index.d.ts",
43
44
  "dependencies": {
44
- "@synerise/ds-button": "^1.5.34",
45
- "@synerise/ds-icon": "^1.18.4",
46
- "@synerise/ds-select": "^1.3.33",
47
- "@synerise/ds-utils": "^1.10.1"
45
+ "@synerise/ds-button": "^1.5.35",
46
+ "@synerise/ds-icon": "^1.18.5",
47
+ "@synerise/ds-select": "^1.4.0",
48
+ "@synerise/ds-utils": "^1.10.2"
48
49
  },
49
50
  "peerDependencies": {
50
51
  "@synerise/ds-core": "*",
@@ -52,5 +53,5 @@
52
53
  "styled-components": "^5.3.3",
53
54
  "vitest": "4"
54
55
  },
55
- "gitHead": "a81ab6519d49a3dea9c0cfebcdc9104cbb4f4226"
56
+ "gitHead": "018414e0d7ffd102a07f8aa35fa2e2d3d4ed19e2"
56
57
  }