@atlaskit/pagination 14.8.0 → 14.9.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 (5) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/pagination.js +50 -35
  3. package/dist/es2019/pagination.js +23 -7
  4. package/dist/esm/pagination.js +49 -34
  5. package/package.json +6 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/pagination
2
2
 
3
+ ## 14.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#144888](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144888)
8
+ [`36d431fde8b6f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/36d431fde8b6f) -
9
+ Enable new icons behind a feature flag.
10
+
11
+ ## 14.8.1
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 14.8.0
4
18
 
5
19
  ### Minor Changes
package/dist/cjs/pagination.js CHANGED
@@ -12,8 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var _analyticsNext = require("@atlaskit/analytics-next");
13
13
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
14
14
  var _useControlled3 = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
15
- var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
16
- var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-large"));
15
+ var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
16
+ var _chevronRightChevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right--chevron-right-large"));
17
17
  var _primitives = require("@atlaskit/primitives");
18
18
  var _navigator = _interopRequireDefault(require("./internal/components/navigator"));
19
19
  var _page = _interopRequireDefault(require("./internal/components/page"));
@@ -21,13 +21,13 @@ var _renderEllipsis = _interopRequireDefault(require("./internal/components/rend
21
21
  var _constants = require("./internal/constants");
22
22
  var _collapseRange = _interopRequireDefault(require("./internal/utils/collapse-range"));
23
23
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
24
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
24
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
25
25
  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; }
26
26
  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; }
27
27
  var analyticsAttributes = {
28
28
  componentName: 'pagination',
29
29
  packageName: "@atlaskit/pagination",
30
- packageVersion: "14.8.0"
30
+ packageVersion: "14.9.0"
31
31
  };
32
32
  var paginationMenuStyles = (0, _primitives.xcss)({
33
33
  padding: 'space.0',
@@ -36,33 +36,48 @@ var paginationMenuStyles = (0, _primitives.xcss)({
36
36
  var paginationMenuItemStyles = (0, _primitives.xcss)({
37
37
  marginBlockStart: 'space.0'
38
38
  });
39
- function InnerPagination(_ref, ref) {
40
- var _ref$components = _ref.components,
41
- components = _ref$components === void 0 ? _constants.emptyObject : _ref$components,
42
- _ref$defaultSelectedI = _ref.defaultSelectedIndex,
43
- defaultSelectedIndex = _ref$defaultSelectedI === void 0 ? 0 : _ref$defaultSelectedI,
44
- selectedIndex = _ref.selectedIndex,
45
- _ref$label = _ref.label,
46
- label = _ref$label === void 0 ? 'pagination' : _ref$label,
47
- _ref$pageLabel = _ref.pageLabel,
48
- pageLabel = _ref$pageLabel === void 0 ? 'page' : _ref$pageLabel,
49
- _ref$previousLabel = _ref.previousLabel,
50
- previousLabel = _ref$previousLabel === void 0 ? 'previous' : _ref$previousLabel,
51
- _ref$nextLabel = _ref.nextLabel,
52
- nextLabel = _ref$nextLabel === void 0 ? 'next' : _ref$nextLabel,
53
- _ref$style = _ref.style,
54
- style = _ref$style === void 0 ? _constants.emptyObject : _ref$style,
55
- _ref$max = _ref.max,
56
- max = _ref$max === void 0 ? 7 : _ref$max,
57
- _ref$onChange = _ref.onChange,
58
- onChange = _ref$onChange === void 0 ? _noop.default : _ref$onChange,
59
- pages = _ref.pages,
60
- getPageLabel = _ref.getPageLabel,
61
- _ref$renderEllipsis = _ref.renderEllipsis,
62
- renderEllipsis = _ref$renderEllipsis === void 0 ? _renderEllipsis.default : _ref$renderEllipsis,
63
- analyticsContext = _ref.analyticsContext,
64
- testId = _ref.testId,
65
- isDisabled = _ref.isDisabled;
39
+ var navigatorIconWrapperStyles = (0, _primitives.xcss)({
40
+ paddingInline: 'space.075'
41
+ });
42
+ function NavigatorIcon(_ref) {
43
+ var chevronDirection = _ref.chevronDirection;
44
+ var Chevron = chevronDirection === 'left' ? _chevronLeftChevronLeftLarge.default : _chevronRightChevronRightLarge.default;
45
+ return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
46
+ as: "span",
47
+ xcss: navigatorIconWrapperStyles
48
+ }, /*#__PURE__*/_react.default.createElement(Chevron, {
49
+ label: "",
50
+ LEGACY_margin: "0 ".concat("var(--ds-space-negative-075, -6px)"),
51
+ color: "currentColor"
52
+ }));
53
+ }
54
+ function InnerPagination(_ref2, ref) {
55
+ var _ref2$components = _ref2.components,
56
+ components = _ref2$components === void 0 ? _constants.emptyObject : _ref2$components,
57
+ _ref2$defaultSelected = _ref2.defaultSelectedIndex,
58
+ defaultSelectedIndex = _ref2$defaultSelected === void 0 ? 0 : _ref2$defaultSelected,
59
+ selectedIndex = _ref2.selectedIndex,
60
+ _ref2$label = _ref2.label,
61
+ label = _ref2$label === void 0 ? 'pagination' : _ref2$label,
62
+ _ref2$pageLabel = _ref2.pageLabel,
63
+ pageLabel = _ref2$pageLabel === void 0 ? 'page' : _ref2$pageLabel,
64
+ _ref2$previousLabel = _ref2.previousLabel,
65
+ previousLabel = _ref2$previousLabel === void 0 ? 'previous' : _ref2$previousLabel,
66
+ _ref2$nextLabel = _ref2.nextLabel,
67
+ nextLabel = _ref2$nextLabel === void 0 ? 'next' : _ref2$nextLabel,
68
+ _ref2$style = _ref2.style,
69
+ style = _ref2$style === void 0 ? _constants.emptyObject : _ref2$style,
70
+ _ref2$max = _ref2.max,
71
+ max = _ref2$max === void 0 ? 7 : _ref2$max,
72
+ _ref2$onChange = _ref2.onChange,
73
+ onChange = _ref2$onChange === void 0 ? _noop.default : _ref2$onChange,
74
+ pages = _ref2.pages,
75
+ getPageLabel = _ref2.getPageLabel,
76
+ _ref2$renderEllipsis = _ref2.renderEllipsis,
77
+ renderEllipsis = _ref2$renderEllipsis === void 0 ? _renderEllipsis.default : _ref2$renderEllipsis,
78
+ analyticsContext = _ref2.analyticsContext,
79
+ testId = _ref2.testId,
80
+ isDisabled = _ref2.isDisabled;
66
81
  var _useControlled = (0, _useControlled3.default)(selectedIndex, function () {
67
82
  return defaultSelectedIndex || 0;
68
83
  }),
@@ -130,8 +145,8 @@ function InnerPagination(_ref, ref) {
130
145
  });
131
146
  },
132
147
  isDisabled: isDisabled || selectedIndexValue === 0,
133
- iconBefore: /*#__PURE__*/_react.default.createElement(_chevronLeftLarge.default, {
134
- label: ""
148
+ iconBefore: /*#__PURE__*/_react.default.createElement(NavigatorIcon, {
149
+ chevronDirection: "left"
135
150
  }),
136
151
  "aria-label": previousLabel,
137
152
  testId: testId && "".concat(testId, "--left-navigator")
@@ -154,8 +169,8 @@ function InnerPagination(_ref, ref) {
154
169
  });
155
170
  },
156
171
  isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
157
- iconBefore: /*#__PURE__*/_react.default.createElement(_chevronRightLarge.default, {
158
- label: ""
172
+ iconBefore: /*#__PURE__*/_react.default.createElement(NavigatorIcon, {
173
+ chevronDirection: "right"
159
174
  }),
160
175
  "aria-label": nextLabel,
161
176
  testId: testId && "".concat(testId, "--right-navigator")
package/dist/es2019/pagination.js CHANGED
@@ -2,8 +2,8 @@ import React, { forwardRef, memo } from 'react';
2
2
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
3
3
  import noop from '@atlaskit/ds-lib/noop';
4
4
  import useControlled from '@atlaskit/ds-lib/use-controlled';
5
- import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
6
- import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
5
+ import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
6
+ import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
7
7
  import { Box, Inline, xcss } from '@atlaskit/primitives';
8
8
  import Navigator from './internal/components/navigator';
9
9
  import PageComponent from './internal/components/page';
@@ -13,7 +13,7 @@ import collapseRange from './internal/utils/collapse-range';
13
13
  const analyticsAttributes = {
14
14
  componentName: 'pagination',
15
15
  packageName: "@atlaskit/pagination",
16
- packageVersion: "14.8.0"
16
+ packageVersion: "14.9.0"
17
17
  };
18
18
  const paginationMenuStyles = xcss({
19
19
  padding: 'space.0',
@@ -22,6 +22,22 @@ const paginationMenuStyles = xcss({
22
22
  const paginationMenuItemStyles = xcss({
23
23
  marginBlockStart: 'space.0'
24
24
  });
25
+ const navigatorIconWrapperStyles = xcss({
26
+ paddingInline: 'space.075'
27
+ });
28
+ function NavigatorIcon({
29
+ chevronDirection
30
+ }) {
31
+ const Chevron = chevronDirection === 'left' ? ChevronLeftLargeIcon : ChevronRightLargeIcon;
32
+ return /*#__PURE__*/React.createElement(Box, {
33
+ as: "span",
34
+ xcss: navigatorIconWrapperStyles
35
+ }, /*#__PURE__*/React.createElement(Chevron, {
36
+ label: "",
37
+ LEGACY_margin: `0 ${"var(--ds-space-negative-075, -6px)"}`,
38
+ color: "currentColor"
39
+ }));
40
+ }
25
41
  function InnerPagination({
26
42
  components = emptyObject,
27
43
  defaultSelectedIndex = 0,
@@ -101,8 +117,8 @@ function InnerPagination({
101
117
  selectedPageIndex: selectedIndexValue - 1
102
118
  }),
103
119
  isDisabled: isDisabled || selectedIndexValue === 0,
104
- iconBefore: /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
105
- label: ""
120
+ iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
121
+ chevronDirection: "left"
106
122
  }),
107
123
  "aria-label": previousLabel,
108
124
  testId: testId && `${testId}--left-navigator`
@@ -123,8 +139,8 @@ function InnerPagination({
123
139
  selectedPageIndex: selectedIndexValue + 1
124
140
  }),
125
141
  isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
126
- iconBefore: /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
127
- label: ""
142
+ iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
143
+ chevronDirection: "right"
128
144
  }),
129
145
  "aria-label": nextLabel,
130
146
  testId: testId && `${testId}--right-navigator`
package/dist/esm/pagination.js CHANGED
@@ -6,8 +6,8 @@ import React, { forwardRef, memo } from 'react';
6
6
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
7
7
  import noop from '@atlaskit/ds-lib/noop';
8
8
  import useControlled from '@atlaskit/ds-lib/use-controlled';
9
- import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
10
- import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
9
+ import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
10
+ import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
11
11
  import { Box, Inline, xcss } from '@atlaskit/primitives';
12
12
  import Navigator from './internal/components/navigator';
13
13
  import PageComponent from './internal/components/page';
@@ -17,7 +17,7 @@ import collapseRange from './internal/utils/collapse-range';
17
17
  var analyticsAttributes = {
18
18
  componentName: 'pagination',
19
19
  packageName: "@atlaskit/pagination",
20
- packageVersion: "14.8.0"
20
+ packageVersion: "14.9.0"
21
21
  };
22
22
  var paginationMenuStyles = xcss({
23
23
  padding: 'space.0',
@@ -26,33 +26,48 @@ var paginationMenuStyles = xcss({
26
26
  var paginationMenuItemStyles = xcss({
27
27
  marginBlockStart: 'space.0'
28
28
  });
29
- function InnerPagination(_ref, ref) {
30
- var _ref$components = _ref.components,
31
- components = _ref$components === void 0 ? emptyObject : _ref$components,
32
- _ref$defaultSelectedI = _ref.defaultSelectedIndex,
33
- defaultSelectedIndex = _ref$defaultSelectedI === void 0 ? 0 : _ref$defaultSelectedI,
34
- selectedIndex = _ref.selectedIndex,
35
- _ref$label = _ref.label,
36
- label = _ref$label === void 0 ? 'pagination' : _ref$label,
37
- _ref$pageLabel = _ref.pageLabel,
38
- pageLabel = _ref$pageLabel === void 0 ? 'page' : _ref$pageLabel,
39
- _ref$previousLabel = _ref.previousLabel,
40
- previousLabel = _ref$previousLabel === void 0 ? 'previous' : _ref$previousLabel,
41
- _ref$nextLabel = _ref.nextLabel,
42
- nextLabel = _ref$nextLabel === void 0 ? 'next' : _ref$nextLabel,
43
- _ref$style = _ref.style,
44
- style = _ref$style === void 0 ? emptyObject : _ref$style,
45
- _ref$max = _ref.max,
46
- max = _ref$max === void 0 ? 7 : _ref$max,
47
- _ref$onChange = _ref.onChange,
48
- onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
49
- pages = _ref.pages,
50
- getPageLabel = _ref.getPageLabel,
51
- _ref$renderEllipsis = _ref.renderEllipsis,
52
- renderEllipsis = _ref$renderEllipsis === void 0 ? renderDefaultEllipsis : _ref$renderEllipsis,
53
- analyticsContext = _ref.analyticsContext,
54
- testId = _ref.testId,
55
- isDisabled = _ref.isDisabled;
29
+ var navigatorIconWrapperStyles = xcss({
30
+ paddingInline: 'space.075'
31
+ });
32
+ function NavigatorIcon(_ref) {
33
+ var chevronDirection = _ref.chevronDirection;
34
+ var Chevron = chevronDirection === 'left' ? ChevronLeftLargeIcon : ChevronRightLargeIcon;
35
+ return /*#__PURE__*/React.createElement(Box, {
36
+ as: "span",
37
+ xcss: navigatorIconWrapperStyles
38
+ }, /*#__PURE__*/React.createElement(Chevron, {
39
+ label: "",
40
+ LEGACY_margin: "0 ".concat("var(--ds-space-negative-075, -6px)"),
41
+ color: "currentColor"
42
+ }));
43
+ }
44
+ function InnerPagination(_ref2, ref) {
45
+ var _ref2$components = _ref2.components,
46
+ components = _ref2$components === void 0 ? emptyObject : _ref2$components,
47
+ _ref2$defaultSelected = _ref2.defaultSelectedIndex,
48
+ defaultSelectedIndex = _ref2$defaultSelected === void 0 ? 0 : _ref2$defaultSelected,
49
+ selectedIndex = _ref2.selectedIndex,
50
+ _ref2$label = _ref2.label,
51
+ label = _ref2$label === void 0 ? 'pagination' : _ref2$label,
52
+ _ref2$pageLabel = _ref2.pageLabel,
53
+ pageLabel = _ref2$pageLabel === void 0 ? 'page' : _ref2$pageLabel,
54
+ _ref2$previousLabel = _ref2.previousLabel,
55
+ previousLabel = _ref2$previousLabel === void 0 ? 'previous' : _ref2$previousLabel,
56
+ _ref2$nextLabel = _ref2.nextLabel,
57
+ nextLabel = _ref2$nextLabel === void 0 ? 'next' : _ref2$nextLabel,
58
+ _ref2$style = _ref2.style,
59
+ style = _ref2$style === void 0 ? emptyObject : _ref2$style,
60
+ _ref2$max = _ref2.max,
61
+ max = _ref2$max === void 0 ? 7 : _ref2$max,
62
+ _ref2$onChange = _ref2.onChange,
63
+ onChange = _ref2$onChange === void 0 ? noop : _ref2$onChange,
64
+ pages = _ref2.pages,
65
+ getPageLabel = _ref2.getPageLabel,
66
+ _ref2$renderEllipsis = _ref2.renderEllipsis,
67
+ renderEllipsis = _ref2$renderEllipsis === void 0 ? renderDefaultEllipsis : _ref2$renderEllipsis,
68
+ analyticsContext = _ref2.analyticsContext,
69
+ testId = _ref2.testId,
70
+ isDisabled = _ref2.isDisabled;
56
71
  var _useControlled = useControlled(selectedIndex, function () {
57
72
  return defaultSelectedIndex || 0;
58
73
  }),
@@ -120,8 +135,8 @@ function InnerPagination(_ref, ref) {
120
135
  });
121
136
  },
122
137
  isDisabled: isDisabled || selectedIndexValue === 0,
123
- iconBefore: /*#__PURE__*/React.createElement(ChevronLeftLargeIcon, {
124
- label: ""
138
+ iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
139
+ chevronDirection: "left"
125
140
  }),
126
141
  "aria-label": previousLabel,
127
142
  testId: testId && "".concat(testId, "--left-navigator")
@@ -144,8 +159,8 @@ function InnerPagination(_ref, ref) {
144
159
  });
145
160
  },
146
161
  isDisabled: isDisabled || selectedIndexValue === pages.length - 1,
147
- iconBefore: /*#__PURE__*/React.createElement(ChevronRightLargeIcon, {
148
- label: ""
162
+ iconBefore: /*#__PURE__*/React.createElement(NavigatorIcon, {
163
+ chevronDirection: "right"
149
164
  }),
150
165
  "aria-label": nextLabel,
151
166
  testId: testId && "".concat(testId, "--right-navigator")
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/pagination",
3
- "version": "14.8.0",
3
+ "version": "14.9.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/"
@@ -30,10 +30,6 @@
30
30
  "atlassian": {
31
31
  "team": "Design System Team",
32
32
  "runReact18": true,
33
- "productPushConsumption": [
34
- "jira"
35
- ],
36
- "releaseModel": "continuous",
37
33
  "website": {
38
34
  "name": "Pagination",
39
35
  "category": "Components"
@@ -41,11 +37,12 @@
41
37
  },
42
38
  "dependencies": {
43
39
  "@atlaskit/analytics-next": "^10.1.0",
44
- "@atlaskit/button": "^19.2.0",
40
+ "@atlaskit/button": "^20.2.0",
45
41
  "@atlaskit/codemod-utils": "^4.2.0",
46
- "@atlaskit/ds-lib": "^2.4.0",
47
- "@atlaskit/icon": "^22.12.0",
48
- "@atlaskit/primitives": "^12.0.0",
42
+ "@atlaskit/ds-lib": "^2.6.0",
43
+ "@atlaskit/icon": "^22.18.0",
44
+ "@atlaskit/primitives": "^12.2.0",
45
+ "@atlaskit/tokens": "^1.58.0",
49
46
  "@atlaskit/visually-hidden": "^1.5.0",
50
47
  "@babel/runtime": "^7.0.0",
51
48
  "memoize-one": "^6.0.0"