@atlaskit/pagination 15.0.2 → 15.2.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.
Files changed (21) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/cjs/internal/components/render-ellipsis.compiled.css +1 -0
  3. package/dist/cjs/internal/components/render-ellipsis.js +5 -3
  4. package/dist/cjs/pagination.compiled.css +10 -4
  5. package/dist/cjs/pagination.js +93 -43
  6. package/dist/es2019/internal/components/render-ellipsis.compiled.css +1 -0
  7. package/dist/es2019/internal/components/render-ellipsis.js +5 -3
  8. package/dist/es2019/pagination.compiled.css +10 -4
  9. package/dist/es2019/pagination.js +85 -39
  10. package/dist/esm/internal/components/render-ellipsis.compiled.css +1 -0
  11. package/dist/esm/internal/components/render-ellipsis.js +5 -3
  12. package/dist/esm/pagination.compiled.css +10 -4
  13. package/dist/esm/pagination.js +93 -43
  14. package/dist/types/internal/components/navigator.d.ts +1 -1
  15. package/dist/types/internal/components/page.d.ts +2 -2
  16. package/dist/types-ts4.5/internal/components/navigator.d.ts +1 -1
  17. package/dist/types-ts4.5/internal/components/page.d.ts +2 -2
  18. package/package.json +18 -11
  19. package/__perf__/default.tsx +0 -5
  20. package/__perf__/examples.tsx +0 -61
  21. package/__perf__/pagination-with-large-no-of-pages.tsx +0 -61
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/pagination
2
2
 
3
+ ## 15.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#114505](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114505)
8
+ [`7d1407c18c85c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7d1407c18c85c) -
9
+ We are testing the pagination behind a feature flag. Moving the page navigator buttons in to the
10
+ list. If this fix is successful it will be available in a later release.
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
16
+ ## 15.1.0
17
+
18
+ ### Minor Changes
19
+
20
+ - [#109060](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109060)
21
+ [`4660ec858a305`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4660ec858a305) -
22
+ Update `React` from v16 to v18
23
+
24
+ ### Patch Changes
25
+
26
+ - Updated dependencies
27
+
3
28
  ## 15.0.2
4
29
 
5
30
  ### Patch Changes
package/dist/cjs/internal/components/render-ellipsis.compiled.css CHANGED
@@ -1,2 +1,3 @@
1
+ ._19pkidpf{margin-top:0}
1
2
  ._1e0c1txw{display:flex}
2
3
  ._kqswh2mm{position:relative}
package/dist/cjs/internal/components/render-ellipsis.js CHANGED
@@ -1,4 +1,4 @@
1
- /* render-ellipsis.tsx generated by @compiled/babel-plugin v0.35.0 */
1
+ /* render-ellipsis.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -9,10 +9,12 @@ exports.default = renderEllipsis;
9
9
  require("./render-ellipsis.compiled.css");
10
10
  var _runtime = require("@compiled/react/runtime");
11
11
  var _react = _interopRequireDefault(require("react"));
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  var _compiled = require("@atlaskit/primitives/compiled");
13
14
  var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
14
15
  var styles = {
15
- container: "_1e0c1txw _kqswh2mm"
16
+ containerOld: "_1e0c1txw _kqswh2mm",
17
+ containerNew: "_1e0c1txw _kqswh2mm _19pkidpf"
16
18
  };
17
19
  function renderEllipsis(_ref) {
18
20
  var key = _ref.key,
@@ -23,7 +25,7 @@ function renderEllipsis(_ref) {
23
25
  as: "li",
24
26
  testId: testId,
25
27
  key: key,
26
- xcss: styles.container,
28
+ xcss: (0, _platformFeatureFlags.fg)('jfp-a11y-team_pagination_list-markup') ? styles.containerNew : styles.containerOld,
27
29
  paddingInline: "space.100"
28
30
  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
29
31
  testId: testId && "".concat(testId, "-text")
package/dist/cjs/pagination.compiled.css CHANGED
@@ -1,4 +1,10 @@
1
- ._18s8ze3t{margin:var(--ds-space-0,0)}
2
- ._1yt4ze3t{padding:var(--ds-space-0,0)}
3
- ._18zr12x7{padding-inline:var(--ds-space-075,6px)}
4
- ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
1
+
2
+ ._18zr12x7{padding-inline:var(--ds-space-075,6px)}._18u0ze3t{margin-left:var(--ds-space-0,0)}
3
+ ._19bvze3t{padding-left:var(--ds-space-0,0)}
4
+ ._19pkze3t{margin-top:var(--ds-space-0,0)}
5
+ ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
6
+ ._2hwxze3t{margin-right:var(--ds-space-0,0)}
7
+ ._ca0qze3t{padding-top:var(--ds-space-0,0)}
8
+ ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
9
+ ._otyrze3t{margin-bottom:var(--ds-space-0,0)}
10
+ ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
package/dist/cjs/pagination.js CHANGED
@@ -1,4 +1,4 @@
1
- /* pagination.tsx generated by @compiled/babel-plugin v0.35.0 */
1
+ /* pagination.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -17,6 +17,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
17
17
  var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
18
18
  var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
19
19
  var _chevronRightChevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right--chevron-right-large"));
20
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
20
21
  var _compiled = require("@atlaskit/primitives/compiled");
21
22
  var _navigator = _interopRequireDefault(require("./internal/components/navigator"));
22
23
  var _page = _interopRequireDefault(require("./internal/components/page"));
@@ -28,14 +29,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
28
29
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
29
30
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
30
31
  var styles = {
31
- paginationMenu: "_1yt4ze3t _18s8ze3t",
32
+ paginationMenu: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t",
32
33
  paginationMenuItem: "_1pfhze3t",
33
34
  navigatorIconWrapper: "_18zr12x7"
34
35
  };
35
36
  var analyticsAttributes = {
36
37
  componentName: 'pagination',
37
38
  packageName: "@atlaskit/pagination",
38
- packageVersion: "15.0.2"
39
+ packageVersion: "15.2.0"
39
40
  };
40
41
  function NavigatorIcon(_ref) {
41
42
  var chevronDirection = _ref.chevronDirection;
@@ -121,6 +122,94 @@ function InnerPagination(_ref2, ref) {
121
122
  testId: testId && "".concat(testId, "--").concat(isCurrentPage ? 'current-' : '', "page-").concat(currPageIndex)
122
123
  }, getPageLabel ? getPageLabel(page, currPageIndex) : page));
123
124
  };
125
+ var oldPaginationList = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_navigator.default, {
126
+ key: "left-navigator",
127
+ component: components.Previous,
128
+ onClick: function onClick(event) {
129
+ return onChangeWithAnalytics({
130
+ event: event,
131
+ selectedPageIndex: selectedIndexValue - 1
132
+ });
133
+ },
134
+ isDisabled: isDisabled || selectedIndexValue === 0,
135
+ iconBefore: /*#__PURE__*/_react.default.createElement(NavigatorIcon, {
136
+ chevronDirection: "left"
137
+ }),
138
+ "aria-label": previousLabel,
139
+ testId: testId && "".concat(testId, "--left-navigator")
140
+ }), /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
141
+ space: "space.0",
142
+ alignBlock: "baseline",
143
+ as: "ul",
144
+ xcss: styles.paginationMenu
145
+ }, (0, _collapseRange.default)(pages, selectedIndexValue, {
146
+ max: max,
147
+ ellipsis: renderEllipsis,
148
+ transform: transform
149
+ }, testId)), /*#__PURE__*/_react.default.createElement(_navigator.default, {
150
+ key: "right-navigator",
151
+ component: components.Next,
152
+ onClick: function onClick(event) {
153
+ return onChangeWithAnalytics({
154
+ event: event,
155
+ selectedPageIndex: selectedIndexValue + 1
156
+ });
157
+ },
158
+ isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
159
+ iconBefore: /*#__PURE__*/_react.default.createElement(NavigatorIcon, {
160
+ chevronDirection: "right"
161
+ }),
162
+ "aria-label": nextLabel,
163
+ testId: testId && "".concat(testId, "--right-navigator")
164
+ }));
165
+ var newPaginationList = /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
166
+ space: "space.0",
167
+ alignBlock: "center",
168
+ as: "ul",
169
+ xcss: styles.paginationMenu
170
+ }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
171
+ as: "li",
172
+ xcss: styles.paginationMenuItem,
173
+ key: "previous-page"
174
+ }, /*#__PURE__*/_react.default.createElement(_navigator.default, {
175
+ key: "left-navigator",
176
+ component: components.Previous,
177
+ onClick: function onClick(event) {
178
+ return onChangeWithAnalytics({
179
+ event: event,
180
+ selectedPageIndex: selectedIndexValue - 1
181
+ });
182
+ },
183
+ isDisabled: isDisabled || selectedIndexValue === 0,
184
+ iconBefore: /*#__PURE__*/_react.default.createElement(NavigatorIcon, {
185
+ chevronDirection: "left"
186
+ }),
187
+ "aria-label": previousLabel,
188
+ testId: testId && "".concat(testId, "--left-navigator")
189
+ })), (0, _collapseRange.default)(pages, selectedIndexValue, {
190
+ max: max,
191
+ ellipsis: renderEllipsis,
192
+ transform: transform
193
+ }, testId), /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
194
+ as: "li",
195
+ xcss: styles.paginationMenuItem,
196
+ key: "next-page"
197
+ }, /*#__PURE__*/_react.default.createElement(_navigator.default, {
198
+ key: "right-navigator",
199
+ component: components.Next,
200
+ onClick: function onClick(event) {
201
+ return onChangeWithAnalytics({
202
+ event: event,
203
+ selectedPageIndex: selectedIndexValue + 1
204
+ });
205
+ },
206
+ isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
207
+ iconBefore: /*#__PURE__*/_react.default.createElement(NavigatorIcon, {
208
+ chevronDirection: "right"
209
+ }),
210
+ "aria-label": nextLabel,
211
+ testId: testId && "".concat(testId, "--right-navigator")
212
+ })));
124
213
  return (
125
214
  /*#__PURE__*/
126
215
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -133,46 +222,7 @@ function InnerPagination(_ref2, ref) {
133
222
  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
134
223
  space: "space.0",
135
224
  alignBlock: "center"
136
- }, /*#__PURE__*/_react.default.createElement(_navigator.default, {
137
- key: "left-navigator",
138
- component: components.Previous,
139
- onClick: function onClick(event) {
140
- return onChangeWithAnalytics({
141
- event: event,
142
- selectedPageIndex: selectedIndexValue - 1
143
- });
144
- },
145
- isDisabled: isDisabled || selectedIndexValue === 0,
146
- iconBefore: /*#__PURE__*/_react.default.createElement(NavigatorIcon, {
147
- chevronDirection: "left"
148
- }),
149
- "aria-label": previousLabel,
150
- testId: testId && "".concat(testId, "--left-navigator")
151
- }), /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
152
- space: "space.0",
153
- alignBlock: "baseline",
154
- as: "ul",
155
- xcss: styles.paginationMenu
156
- }, (0, _collapseRange.default)(pages, selectedIndexValue, {
157
- max: max,
158
- ellipsis: renderEllipsis,
159
- transform: transform
160
- }, testId)), /*#__PURE__*/_react.default.createElement(_navigator.default, {
161
- key: "right-navigator",
162
- component: components.Next,
163
- onClick: function onClick(event) {
164
- return onChangeWithAnalytics({
165
- event: event,
166
- selectedPageIndex: selectedIndexValue + 1
167
- });
168
- },
169
- isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
170
- iconBefore: /*#__PURE__*/_react.default.createElement(NavigatorIcon, {
171
- chevronDirection: "right"
172
- }),
173
- "aria-label": nextLabel,
174
- testId: testId && "".concat(testId, "--right-navigator")
175
- })))
225
+ }, (0, _platformFeatureFlags.fg)('jfp-a11y-team_pagination_list-markup') ? newPaginationList : oldPaginationList))
176
226
  );
177
227
  }
178
228
 
package/dist/es2019/internal/components/render-ellipsis.compiled.css CHANGED
@@ -1,2 +1,3 @@
1
+ ._19pkidpf{margin-top:0}
1
2
  ._1e0c1txw{display:flex}
2
3
  ._kqswh2mm{position:relative}
package/dist/es2019/internal/components/render-ellipsis.js CHANGED
@@ -1,11 +1,13 @@
1
- /* render-ellipsis.tsx generated by @compiled/babel-plugin v0.35.0 */
1
+ /* render-ellipsis.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import "./render-ellipsis.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
5
6
  import { Box, Text } from '@atlaskit/primitives/compiled';
6
7
  import VisuallyHidden from '@atlaskit/visually-hidden';
7
8
  const styles = {
8
- container: "_1e0c1txw _kqswh2mm"
9
+ containerOld: "_1e0c1txw _kqswh2mm",
10
+ containerNew: "_1e0c1txw _kqswh2mm _19pkidpf"
9
11
  };
10
12
  export default function renderEllipsis({
11
13
  key,
@@ -17,7 +19,7 @@ export default function renderEllipsis({
17
19
  as: "li",
18
20
  testId: testId,
19
21
  key: key,
20
- xcss: styles.container,
22
+ xcss: fg('jfp-a11y-team_pagination_list-markup') ? styles.containerNew : styles.containerOld,
21
23
  paddingInline: "space.100"
22
24
  }, /*#__PURE__*/React.createElement(Text, {
23
25
  testId: testId && `${testId}-text`
package/dist/es2019/pagination.compiled.css CHANGED
@@ -1,4 +1,10 @@
1
- ._18s8ze3t{margin:var(--ds-space-0,0)}
2
- ._1yt4ze3t{padding:var(--ds-space-0,0)}
3
- ._18zr12x7{padding-inline:var(--ds-space-075,6px)}
4
- ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
1
+
2
+ ._18zr12x7{padding-inline:var(--ds-space-075,6px)}._18u0ze3t{margin-left:var(--ds-space-0,0)}
3
+ ._19bvze3t{padding-left:var(--ds-space-0,0)}
4
+ ._19pkze3t{margin-top:var(--ds-space-0,0)}
5
+ ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
6
+ ._2hwxze3t{margin-right:var(--ds-space-0,0)}
7
+ ._ca0qze3t{padding-top:var(--ds-space-0,0)}
8
+ ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
9
+ ._otyrze3t{margin-bottom:var(--ds-space-0,0)}
10
+ ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
package/dist/es2019/pagination.js CHANGED
@@ -1,4 +1,4 @@
1
- /* pagination.tsx generated by @compiled/babel-plugin v0.35.0 */
1
+ /* pagination.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import "./pagination.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { forwardRef, memo } from 'react';
@@ -7,6 +7,7 @@ import noop from '@atlaskit/ds-lib/noop';
7
7
  import useControlled from '@atlaskit/ds-lib/use-controlled';
8
8
  import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
9
9
  import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
10
11
  import { Box, Inline } from '@atlaskit/primitives/compiled';
11
12
  import Navigator from './internal/components/navigator';
12
13
  import PageComponent from './internal/components/page';
@@ -14,14 +15,14 @@ import renderDefaultEllipsis from './internal/components/render-ellipsis';
14
15
  import { emptyObject } from './internal/constants';
15
16
  import collapseRange from './internal/utils/collapse-range';
16
17
  const styles = {
17
- paginationMenu: "_1yt4ze3t _18s8ze3t",
18
+ paginationMenu: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t",
18
19
  paginationMenuItem: "_1pfhze3t",
19
20
  navigatorIconWrapper: "_18zr12x7"
20
21
  };
21
22
  const analyticsAttributes = {
22
23
  componentName: 'pagination',
23
24
  packageName: "@atlaskit/pagination",
24
- packageVersion: "15.0.2"
25
+ packageVersion: "15.2.0"
25
26
  };
26
27
  function NavigatorIcon({
27
28
  chevronDirection
@@ -95,6 +96,86 @@ function InnerPagination({
95
96
  testId: testId && `${testId}--${isCurrentPage ? 'current-' : ''}page-${currPageIndex}`
96
97
  }, getPageLabel ? getPageLabel(page, currPageIndex) : page));
97
98
  };
99
+ const oldPaginationList = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Navigator, {
100
+ key: "left-navigator",
101
+ component: components.Previous,
102
+ onClick: event => onChangeWithAnalytics({
103
+ event,
104
+ selectedPageIndex: selectedIndexValue - 1
105
+ }),
106
+ isDisabled: isDisabled || selectedIndexValue === 0,
107
+ iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
108
+ chevronDirection: "left"
109
+ }),
110
+ "aria-label": previousLabel,
111
+ testId: testId && `${testId}--left-navigator`
112
+ }), /*#__PURE__*/React.createElement(Inline, {
113
+ space: "space.0",
114
+ alignBlock: "baseline",
115
+ as: "ul",
116
+ xcss: styles.paginationMenu
117
+ }, collapseRange(pages, selectedIndexValue, {
118
+ max: max,
119
+ ellipsis: renderEllipsis,
120
+ transform
121
+ }, testId)), /*#__PURE__*/React.createElement(Navigator, {
122
+ key: "right-navigator",
123
+ component: components.Next,
124
+ onClick: event => onChangeWithAnalytics({
125
+ event,
126
+ selectedPageIndex: selectedIndexValue + 1
127
+ }),
128
+ isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
129
+ iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
130
+ chevronDirection: "right"
131
+ }),
132
+ "aria-label": nextLabel,
133
+ testId: testId && `${testId}--right-navigator`
134
+ }));
135
+ const newPaginationList = /*#__PURE__*/React.createElement(Inline, {
136
+ space: "space.0",
137
+ alignBlock: "center",
138
+ as: "ul",
139
+ xcss: styles.paginationMenu
140
+ }, /*#__PURE__*/React.createElement(Inline, {
141
+ as: "li",
142
+ xcss: styles.paginationMenuItem,
143
+ key: "previous-page"
144
+ }, /*#__PURE__*/React.createElement(Navigator, {
145
+ key: "left-navigator",
146
+ component: components.Previous,
147
+ onClick: event => onChangeWithAnalytics({
148
+ event,
149
+ selectedPageIndex: selectedIndexValue - 1
150
+ }),
151
+ isDisabled: isDisabled || selectedIndexValue === 0,
152
+ iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
153
+ chevronDirection: "left"
154
+ }),
155
+ "aria-label": previousLabel,
156
+ testId: testId && `${testId}--left-navigator`
157
+ })), collapseRange(pages, selectedIndexValue, {
158
+ max: max,
159
+ ellipsis: renderEllipsis,
160
+ transform
161
+ }, testId), /*#__PURE__*/React.createElement(Inline, {
162
+ as: "li",
163
+ xcss: styles.paginationMenuItem,
164
+ key: "next-page"
165
+ }, /*#__PURE__*/React.createElement(Navigator, {
166
+ key: "right-navigator",
167
+ component: components.Next,
168
+ onClick: event => onChangeWithAnalytics({
169
+ event,
170
+ selectedPageIndex: selectedIndexValue + 1
171
+ }),
172
+ isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
173
+ iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
174
+ chevronDirection: "right"
175
+ }),
176
+ "aria-label": nextLabel,
177
+ testId: testId && `${testId}--right-navigator`
178
+ })));
98
179
  return (
99
180
  /*#__PURE__*/
100
181
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -107,42 +188,7 @@ function InnerPagination({
107
188
  }, /*#__PURE__*/React.createElement(Inline, {
108
189
  space: "space.0",
109
190
  alignBlock: "center"
110
- }, /*#__PURE__*/React.createElement(Navigator, {
111
- key: "left-navigator",
112
- component: components.Previous,
113
- onClick: event => onChangeWithAnalytics({
114
- event,
115
- selectedPageIndex: selectedIndexValue - 1
116
- }),
117
- isDisabled: isDisabled || selectedIndexValue === 0,
118
- iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
119
- chevronDirection: "left"
120
- }),
121
- "aria-label": previousLabel,
122
- testId: testId && `${testId}--left-navigator`
123
- }), /*#__PURE__*/React.createElement(Inline, {
124
- space: "space.0",
125
- alignBlock: "baseline",
126
- as: "ul",
127
- xcss: styles.paginationMenu
128
- }, collapseRange(pages, selectedIndexValue, {
129
- max: max,
130
- ellipsis: renderEllipsis,
131
- transform
132
- }, testId)), /*#__PURE__*/React.createElement(Navigator, {
133
- key: "right-navigator",
134
- component: components.Next,
135
- onClick: event => onChangeWithAnalytics({
136
- event,
137
- selectedPageIndex: selectedIndexValue + 1
138
- }),
139
- isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
140
- iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
141
- chevronDirection: "right"
142
- }),
143
- "aria-label": nextLabel,
144
- testId: testId && `${testId}--right-navigator`
145
- })))
191
+ }, fg('jfp-a11y-team_pagination_list-markup') ? newPaginationList : oldPaginationList))
146
192
  );
147
193
  }
148
194
 
package/dist/esm/internal/components/render-ellipsis.compiled.css CHANGED
@@ -1,2 +1,3 @@
1
+ ._19pkidpf{margin-top:0}
1
2
  ._1e0c1txw{display:flex}
2
3
  ._kqswh2mm{position:relative}
package/dist/esm/internal/components/render-ellipsis.js CHANGED
@@ -1,11 +1,13 @@
1
- /* render-ellipsis.tsx generated by @compiled/babel-plugin v0.35.0 */
1
+ /* render-ellipsis.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import "./render-ellipsis.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React from 'react';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
5
6
  import { Box, Text } from '@atlaskit/primitives/compiled';
6
7
  import VisuallyHidden from '@atlaskit/visually-hidden';
7
8
  var styles = {
8
- container: "_1e0c1txw _kqswh2mm"
9
+ containerOld: "_1e0c1txw _kqswh2mm",
10
+ containerNew: "_1e0c1txw _kqswh2mm _19pkidpf"
9
11
  };
10
12
  export default function renderEllipsis(_ref) {
11
13
  var key = _ref.key,
@@ -16,7 +18,7 @@ export default function renderEllipsis(_ref) {
16
18
  as: "li",
17
19
  testId: testId,
18
20
  key: key,
19
- xcss: styles.container,
21
+ xcss: fg('jfp-a11y-team_pagination_list-markup') ? styles.containerNew : styles.containerOld,
20
22
  paddingInline: "space.100"
21
23
  }, /*#__PURE__*/React.createElement(Text, {
22
24
  testId: testId && "".concat(testId, "-text")
package/dist/esm/pagination.compiled.css CHANGED
@@ -1,4 +1,10 @@
1
- ._18s8ze3t{margin:var(--ds-space-0,0)}
2
- ._1yt4ze3t{padding:var(--ds-space-0,0)}
3
- ._18zr12x7{padding-inline:var(--ds-space-075,6px)}
4
- ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
1
+
2
+ ._18zr12x7{padding-inline:var(--ds-space-075,6px)}._18u0ze3t{margin-left:var(--ds-space-0,0)}
3
+ ._19bvze3t{padding-left:var(--ds-space-0,0)}
4
+ ._19pkze3t{margin-top:var(--ds-space-0,0)}
5
+ ._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
6
+ ._2hwxze3t{margin-right:var(--ds-space-0,0)}
7
+ ._ca0qze3t{padding-top:var(--ds-space-0,0)}
8
+ ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
9
+ ._otyrze3t{margin-bottom:var(--ds-space-0,0)}
10
+ ._u5f3ze3t{padding-right:var(--ds-space-0,0)}
package/dist/esm/pagination.js CHANGED
@@ -1,4 +1,4 @@
1
- /* pagination.tsx generated by @compiled/babel-plugin v0.35.0 */
1
+ /* pagination.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
4
  import "./pagination.compiled.css";
@@ -11,6 +11,7 @@ import noop from '@atlaskit/ds-lib/noop';
11
11
  import useControlled from '@atlaskit/ds-lib/use-controlled';
12
12
  import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
13
13
  import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
14
+ import { fg } from '@atlaskit/platform-feature-flags';
14
15
  import { Box, Inline } from '@atlaskit/primitives/compiled';
15
16
  import Navigator from './internal/components/navigator';
16
17
  import PageComponent from './internal/components/page';
@@ -18,14 +19,14 @@ import renderDefaultEllipsis from './internal/components/render-ellipsis';
18
19
  import { emptyObject } from './internal/constants';
19
20
  import collapseRange from './internal/utils/collapse-range';
20
21
  var styles = {
21
- paginationMenu: "_1yt4ze3t _18s8ze3t",
22
+ paginationMenu: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t",
22
23
  paginationMenuItem: "_1pfhze3t",
23
24
  navigatorIconWrapper: "_18zr12x7"
24
25
  };
25
26
  var analyticsAttributes = {
26
27
  componentName: 'pagination',
27
28
  packageName: "@atlaskit/pagination",
28
- packageVersion: "15.0.2"
29
+ packageVersion: "15.2.0"
29
30
  };
30
31
  function NavigatorIcon(_ref) {
31
32
  var chevronDirection = _ref.chevronDirection;
@@ -111,6 +112,94 @@ function InnerPagination(_ref2, ref) {
111
112
  testId: testId && "".concat(testId, "--").concat(isCurrentPage ? 'current-' : '', "page-").concat(currPageIndex)
112
113
  }, getPageLabel ? getPageLabel(page, currPageIndex) : page));
113
114
  };
115
+ var oldPaginationList = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Navigator, {
116
+ key: "left-navigator",
117
+ component: components.Previous,
118
+ onClick: function onClick(event) {
119
+ return onChangeWithAnalytics({
120
+ event: event,
121
+ selectedPageIndex: selectedIndexValue - 1
122
+ });
123
+ },
124
+ isDisabled: isDisabled || selectedIndexValue === 0,
125
+ iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
126
+ chevronDirection: "left"
127
+ }),
128
+ "aria-label": previousLabel,
129
+ testId: testId && "".concat(testId, "--left-navigator")
130
+ }), /*#__PURE__*/React.createElement(Inline, {
131
+ space: "space.0",
132
+ alignBlock: "baseline",
133
+ as: "ul",
134
+ xcss: styles.paginationMenu
135
+ }, collapseRange(pages, selectedIndexValue, {
136
+ max: max,
137
+ ellipsis: renderEllipsis,
138
+ transform: transform
139
+ }, testId)), /*#__PURE__*/React.createElement(Navigator, {
140
+ key: "right-navigator",
141
+ component: components.Next,
142
+ onClick: function onClick(event) {
143
+ return onChangeWithAnalytics({
144
+ event: event,
145
+ selectedPageIndex: selectedIndexValue + 1
146
+ });
147
+ },
148
+ isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
149
+ iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
150
+ chevronDirection: "right"
151
+ }),
152
+ "aria-label": nextLabel,
153
+ testId: testId && "".concat(testId, "--right-navigator")
154
+ }));
155
+ var newPaginationList = /*#__PURE__*/React.createElement(Inline, {
156
+ space: "space.0",
157
+ alignBlock: "center",
158
+ as: "ul",
159
+ xcss: styles.paginationMenu
160
+ }, /*#__PURE__*/React.createElement(Inline, {
161
+ as: "li",
162
+ xcss: styles.paginationMenuItem,
163
+ key: "previous-page"
164
+ }, /*#__PURE__*/React.createElement(Navigator, {
165
+ key: "left-navigator",
166
+ component: components.Previous,
167
+ onClick: function onClick(event) {
168
+ return onChangeWithAnalytics({
169
+ event: event,
170
+ selectedPageIndex: selectedIndexValue - 1
171
+ });
172
+ },
173
+ isDisabled: isDisabled || selectedIndexValue === 0,
174
+ iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
175
+ chevronDirection: "left"
176
+ }),
177
+ "aria-label": previousLabel,
178
+ testId: testId && "".concat(testId, "--left-navigator")
179
+ })), collapseRange(pages, selectedIndexValue, {
180
+ max: max,
181
+ ellipsis: renderEllipsis,
182
+ transform: transform
183
+ }, testId), /*#__PURE__*/React.createElement(Inline, {
184
+ as: "li",
185
+ xcss: styles.paginationMenuItem,
186
+ key: "next-page"
187
+ }, /*#__PURE__*/React.createElement(Navigator, {
188
+ key: "right-navigator",
189
+ component: components.Next,
190
+ onClick: function onClick(event) {
191
+ return onChangeWithAnalytics({
192
+ event: event,
193
+ selectedPageIndex: selectedIndexValue + 1
194
+ });
195
+ },
196
+ isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
197
+ iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
198
+ chevronDirection: "right"
199
+ }),
200
+ "aria-label": nextLabel,
201
+ testId: testId && "".concat(testId, "--right-navigator")
202
+ })));
114
203
  return (
115
204
  /*#__PURE__*/
116
205
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -123,46 +212,7 @@ function InnerPagination(_ref2, ref) {
123
212
  }, /*#__PURE__*/React.createElement(Inline, {
124
213
  space: "space.0",
125
214
  alignBlock: "center"
126
- }, /*#__PURE__*/React.createElement(Navigator, {
127
- key: "left-navigator",
128
- component: components.Previous,
129
- onClick: function onClick(event) {
130
- return onChangeWithAnalytics({
131
- event: event,
132
- selectedPageIndex: selectedIndexValue - 1
133
- });
134
- },
135
- isDisabled: isDisabled || selectedIndexValue === 0,
136
- iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
137
- chevronDirection: "left"
138
- }),
139
- "aria-label": previousLabel,
140
- testId: testId && "".concat(testId, "--left-navigator")
141
- }), /*#__PURE__*/React.createElement(Inline, {
142
- space: "space.0",
143
- alignBlock: "baseline",
144
- as: "ul",
145
- xcss: styles.paginationMenu
146
- }, collapseRange(pages, selectedIndexValue, {
147
- max: max,
148
- ellipsis: renderEllipsis,
149
- transform: transform
150
- }, testId)), /*#__PURE__*/React.createElement(Navigator, {
151
- key: "right-navigator",
152
- component: components.Next,
153
- onClick: function onClick(event) {
154
- return onChangeWithAnalytics({
155
- event: event,
156
- selectedPageIndex: selectedIndexValue + 1
157
- });
158
- },
159
- isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
160
- iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
161
- chevronDirection: "right"
162
- }),
163
- "aria-label": nextLabel,
164
- testId: testId && "".concat(testId, "--right-navigator")
165
- })))
215
+ }, fg('jfp-a11y-team_pagination_list-markup') ? newPaginationList : oldPaginationList))
166
216
  );
167
217
  }
168
218
 
package/dist/types/internal/components/navigator.d.ts CHANGED
@@ -16,4 +16,4 @@ export type NavigatorProps<T> = {
16
16
  onClick?: (event: SyntheticEvent) => void;
17
17
  component?: React.ElementType<any>;
18
18
  };
19
- export default function Navigator<T>(props: NavigatorProps<T>): JSX.Element;
19
+ export default function Navigator<T>(props: NavigatorProps<T>): React.JSX.Element;
package/dist/types/internal/components/page.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  import { type ButtonProps } from '@atlaskit/button/standard-button';
3
3
  import type { Appearance } from '@atlaskit/button/types';
4
4
  type Diff<T, U> = T extends U ? never : T;
@@ -13,5 +13,5 @@ type PageProps = Diff<ButtonProps, {
13
13
  }> & {
14
14
  page?: any;
15
15
  };
16
- export default function Page(props: PageProps): JSX.Element;
16
+ export default function Page(props: PageProps): React.JSX.Element;
17
17
  export {};
package/dist/types-ts4.5/internal/components/navigator.d.ts CHANGED
@@ -16,4 +16,4 @@ export type NavigatorProps<T> = {
16
16
  onClick?: (event: SyntheticEvent) => void;
17
17
  component?: React.ElementType<any>;
18
18
  };
19
- export default function Navigator<T>(props: NavigatorProps<T>): JSX.Element;
19
+ export default function Navigator<T>(props: NavigatorProps<T>): React.JSX.Element;
package/dist/types-ts4.5/internal/components/page.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  import { type ButtonProps } from '@atlaskit/button/standard-button';
3
3
  import type { Appearance } from '@atlaskit/button/types';
4
4
  type Diff<T, U> = T extends U ? never : T;
@@ -13,5 +13,5 @@ type PageProps = Diff<ButtonProps, {
13
13
  }> & {
14
14
  page?: any;
15
15
  };
16
- export default function Page(props: PageProps): JSX.Element;
16
+ export default function Page(props: PageProps): React.JSX.Element;
17
17
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/pagination",
3
- "version": "15.0.2",
3
+ "version": "15.2.0",
4
4
  "description": "Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -38,15 +38,16 @@
38
38
  }
39
39
  },
40
40
  "dependencies": {
41
- "@atlaskit/analytics-next": "^10.2.0",
42
- "@atlaskit/button": "^20.3.0",
41
+ "@atlaskit/analytics-next": "^10.3.0",
42
+ "@atlaskit/button": "^20.5.0",
43
43
  "@atlaskit/codemod-utils": "^4.2.0",
44
- "@atlaskit/css": "^0.7.0",
45
- "@atlaskit/ds-lib": "^3.3.0",
46
- "@atlaskit/icon": "^23.4.0",
47
- "@atlaskit/primitives": "^13.3.0",
48
- "@atlaskit/tokens": "^3.1.0",
49
- "@atlaskit/visually-hidden": "^1.5.0",
44
+ "@atlaskit/css": "^0.8.0",
45
+ "@atlaskit/ds-lib": "^3.5.0",
46
+ "@atlaskit/icon": "^23.9.0",
47
+ "@atlaskit/platform-feature-flags": "^1.1.0",
48
+ "@atlaskit/primitives": "^13.5.0",
49
+ "@atlaskit/tokens": "^3.3.0",
50
+ "@atlaskit/visually-hidden": "^1.6.0",
50
51
  "@babel/runtime": "^7.0.0",
51
52
  "memoize-one": "^6.0.0"
52
53
  },
@@ -59,11 +60,12 @@
59
60
  "@af/visual-regression": "*",
60
61
  "@atlaskit/ssr": "*",
61
62
  "@atlaskit/visual-regression": "*",
63
+ "@atlassian/feature-flags-test-utils": "*",
62
64
  "@testing-library/dom": "^10.1.0",
63
- "@testing-library/react": "^12.1.5",
65
+ "@testing-library/react": "^13.4.0",
64
66
  "exenv": "^1.2.2",
65
67
  "jscodeshift": "^0.13.0",
66
- "react-dom": "^16.8.0",
68
+ "react-dom": "^18.2.0",
67
69
  "storybook-addon-performance": "^0.17.3",
68
70
  "tiny-invariant": "^1.2.0",
69
71
  "typescript": "~5.4.2"
@@ -90,5 +92,10 @@
90
92
  "static"
91
93
  ]
92
94
  }
95
+ },
96
+ "platform-feature-flags": {
97
+ "jfp-a11y-team_pagination_list-markup": {
98
+ "type": "boolean"
99
+ }
93
100
  }
94
101
  }
package/__perf__/default.tsx DELETED
@@ -1,5 +0,0 @@
1
- import React from 'react';
2
-
3
- import Pagination from '../src';
4
-
5
- export default () => <Pagination pages={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />;
package/__perf__/examples.tsx DELETED
@@ -1,61 +0,0 @@
1
- import React from 'react';
2
-
3
- import { findByText, fireEvent } from '@testing-library/dom';
4
- import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance';
5
- import invariant from 'tiny-invariant';
6
-
7
- import Pagination from '../src';
8
-
9
- const getPageElement = (
10
- container: HTMLElement,
11
- textContent: string,
12
- ): HTMLButtonElement | undefined =>
13
- Array.from(container.querySelectorAll('button')).find(
14
- (buttonElement: HTMLButtonElement) => buttonElement.textContent?.trim() === textContent,
15
- );
16
-
17
- const PaginationPerformance = () => {
18
- return <Pagination pages={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />;
19
- };
20
-
21
- const interactionTasks: PublicInteractionTask[] = [
22
- {
23
- name: 'onChange (when ellipsis changes)',
24
- description: 'Render pagination and change page along with ellipsis',
25
- run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
26
- const lastPageElement = getPageElement(container, '10');
27
-
28
- invariant(lastPageElement);
29
-
30
- await controls.time(async () => {
31
- fireEvent.click(lastPageElement!);
32
-
33
- await findByText(container, '9', undefined, { timeout: 20000 });
34
- });
35
- },
36
- },
37
- {
38
- name: `onChange (when ellipsis don't change)`,
39
- description: 'Render pagination and change page',
40
- run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
41
- const secondPageElement = getPageElement(container, '2');
42
-
43
- invariant(secondPageElement);
44
-
45
- await controls.time(async () => {
46
- fireEvent.click(secondPageElement!);
47
- });
48
- },
49
- },
50
- ];
51
-
52
- PaginationPerformance.story = {
53
- name: 'pagination',
54
- parameters: {
55
- performance: {
56
- interactions: interactionTasks,
57
- },
58
- },
59
- };
60
-
61
- export default PaginationPerformance;
package/__perf__/pagination-with-large-no-of-pages.tsx DELETED
@@ -1,61 +0,0 @@
1
- import React from 'react';
2
-
3
- import { findByText, fireEvent } from '@testing-library/dom';
4
- import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance';
5
- import invariant from 'tiny-invariant';
6
-
7
- import Pagination from '../src';
8
-
9
- const getPageElement = (
10
- container: HTMLElement,
11
- textContent: string,
12
- ): HTMLButtonElement | undefined =>
13
- Array.from(container.querySelectorAll('button')).find(
14
- (buttonElement: HTMLButtonElement) => buttonElement.textContent?.trim() === textContent,
15
- );
16
- const pages1000 = new Array(1000).fill(0).map((p, index) => index + 1 + p);
17
- const PaginationPerformanceWith1000Pages = () => {
18
- return <Pagination pages={pages1000} />;
19
- };
20
-
21
- const interactionTasks: PublicInteractionTask[] = [
22
- {
23
- name: 'onChange (when ellipsis changes)',
24
- description: 'Render pagination and change page along with ellipsis',
25
- run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
26
- const lastPageElement = getPageElement(container, '1000');
27
-
28
- invariant(lastPageElement);
29
-
30
- await controls.time(async () => {
31
- fireEvent.click(lastPageElement!);
32
-
33
- await findByText(container, '999', undefined, { timeout: 20000 });
34
- });
35
- },
36
- },
37
- {
38
- name: `onChange (when ellipsis don't change)`,
39
- description: 'Render pagination and change page',
40
- run: async ({ container, controls }: InteractionTaskArgs): Promise<void> => {
41
- const secondPageElement = getPageElement(container, '2');
42
-
43
- invariant(secondPageElement);
44
-
45
- await controls.time(async () => {
46
- fireEvent.click(secondPageElement!);
47
- });
48
- },
49
- },
50
- ];
51
-
52
- PaginationPerformanceWith1000Pages.story = {
53
- name: 'paginationWithLargeNumberOfPages',
54
- parameters: {
55
- performance: {
56
- interactions: interactionTasks,
57
- },
58
- },
59
- };
60
-
61
- export default PaginationPerformanceWith1000Pages;