@zendeskgarden/react-pagination 9.0.0-next.2 → 9.0.0-next.21

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 (32) hide show
  1. package/dist/esm/elements/CursorPagination/CursorPagination.js +32 -0
  2. package/dist/esm/elements/CursorPagination/components/First.js +33 -0
  3. package/dist/esm/elements/CursorPagination/components/Last.js +34 -0
  4. package/dist/esm/elements/CursorPagination/components/Next.js +34 -0
  5. package/dist/esm/elements/CursorPagination/components/Previous.js +34 -0
  6. package/dist/esm/elements/OffsetPagination/OffsetPagination.js +163 -0
  7. package/dist/esm/elements/OffsetPagination/components/Gap.js +29 -0
  8. package/dist/esm/elements/OffsetPagination/components/Next.js +35 -0
  9. package/dist/esm/elements/OffsetPagination/components/Page.js +31 -0
  10. package/dist/esm/elements/OffsetPagination/components/Previous.js +35 -0
  11. package/dist/esm/index.js +8 -0
  12. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-double-left-stroke.svg.js +25 -0
  13. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-double-right-stroke.svg.js +25 -0
  14. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg.js +25 -0
  15. package/dist/esm/node_modules/@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg.js +25 -0
  16. package/dist/esm/styled/CursorPagination/StyledCursor.js +24 -0
  17. package/dist/esm/styled/CursorPagination/StyledCursorPagination.js +22 -0
  18. package/dist/esm/styled/CursorPagination/StyledIcon.js +29 -0
  19. package/dist/esm/styled/OffsetPagination/StyledGapListItem.js +41 -0
  20. package/dist/esm/styled/OffsetPagination/StyledList.js +31 -0
  21. package/dist/esm/styled/OffsetPagination/StyledListItem.js +22 -0
  22. package/dist/esm/styled/OffsetPagination/StyledNav.js +22 -0
  23. package/dist/esm/styled/OffsetPagination/StyledNavigation.js +23 -0
  24. package/dist/esm/styled/OffsetPagination/StyledPage.js +27 -0
  25. package/dist/esm/styled/OffsetPagination/StyledPageBase.js +93 -0
  26. package/dist/index.cjs.js +117 -72
  27. package/dist/typings/elements/CursorPagination/CursorPagination.d.ts +0 -1
  28. package/dist/typings/index.d.ts +1 -1
  29. package/dist/typings/styled/CursorPagination/StyledIcon.d.ts +2 -2
  30. package/dist/typings/styled/OffsetPagination/StyledList.d.ts +2 -1
  31. package/package.json +8 -8
  32. package/dist/index.esm.js +0 -518
package/dist/index.cjs.js CHANGED
@@ -1,10 +1,9 @@
1
1
  /**
2
- * Copyright Zendesk, Inc.
3
- *
4
- * Use of this source code is governed under the Apache License, Version 2.0
5
- * found at http://www.apache.org/licenses/LICENSE-2.0.
6
- */
7
-
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
8
7
  'use strict';
9
8
 
10
9
  var React = require('react');
@@ -38,29 +37,23 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
38
37
  var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
39
38
  var styled__default = /*#__PURE__*/_interopDefault(styled);
40
39
 
41
- function _extends$4() {
42
- _extends$4 = Object.assign ? Object.assign.bind() : function (target) {
43
- for (var i = 1; i < arguments.length; i++) {
44
- var source = arguments[i];
45
- for (var key in source) {
46
- if (Object.prototype.hasOwnProperty.call(source, key)) {
47
- target[key] = source[key];
48
- }
49
- }
50
- }
51
- return target;
52
- };
53
- return _extends$4.apply(this, arguments);
54
- }
55
-
56
40
  const COMPONENT_ID$8 = 'pagination.list';
41
+ const colorStyles$2 = _ref => {
42
+ let {
43
+ theme
44
+ } = _ref;
45
+ return styled.css(["color:", ";"], reactTheming.getColor({
46
+ variable: 'foreground.subtle',
47
+ theme
48
+ }));
49
+ };
57
50
  const StyledList = styled__default.default.ul.attrs({
58
51
  'data-garden-id': COMPONENT_ID$8,
59
- 'data-garden-version': '9.0.0-next.2'
52
+ 'data-garden-version': '9.0.0-next.21'
60
53
  }).withConfig({
61
54
  displayName: "StyledList",
62
55
  componentId: "sc-1uz2jxo-0"
63
- })(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;list-style:none;white-space:nowrap;color:", ";:focus{outline:none;}", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.getColor('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
56
+ })(["direction:", ";display:flex;justify-content:center;margin:0;padding:0;list-style:none;white-space:nowrap;", " :focus{outline:none;}", ";"], p => p.theme.rtl && 'rtl', colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
64
57
  StyledList.defaultProps = {
65
58
  theme: reactTheming.DEFAULT_THEME
66
59
  };
@@ -68,7 +61,7 @@ StyledList.defaultProps = {
68
61
  const COMPONENT_ID$7 = 'pagination.list_item';
69
62
  const StyledListItem = styled__default.default.li.attrs({
70
63
  'data-garden-id': COMPONENT_ID$7,
71
- 'data-garden-version': '9.0.0-next.2'
64
+ 'data-garden-version': '9.0.0-next.21'
72
65
  }).withConfig({
73
66
  displayName: "StyledListItem",
74
67
  componentId: "sc-16j4sju-0"
@@ -78,20 +71,69 @@ StyledListItem.defaultProps = {
78
71
  };
79
72
 
80
73
  const COMPONENT_ID$6 = 'pagination.page';
81
- const colorStyles = props => {
82
- const defaultColor = reactTheming.getColor('neutralHue', 600, props.theme);
83
- const hoverForegroundColor = reactTheming.getColor('neutralHue', 700, props.theme);
84
- const hoverBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.08);
85
- const activeForegroundColor = reactTheming.getColor('neutralHue', 800, props.theme);
86
- const activeBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.2);
74
+ const colorStyles$1 = _ref => {
75
+ let {
76
+ theme
77
+ } = _ref;
78
+ const disabledColor = reactTheming.getColor({
79
+ variable: 'foreground.disabled',
80
+ theme
81
+ });
82
+ const defaultColor = reactTheming.getColor({
83
+ variable: 'foreground.subtle',
84
+ theme
85
+ });
86
+ const hoverForegroundColor = reactTheming.getColor({
87
+ variable: 'foreground.subtle',
88
+ light: {
89
+ offset: 100
90
+ },
91
+ dark: {
92
+ offset: -100
93
+ },
94
+ theme
95
+ });
96
+ const hoverBackgroundColor = reactTheming.getColor({
97
+ variable: 'background.primaryEmphasis',
98
+ transparency: theme.opacity[100],
99
+ dark: {
100
+ offset: -100
101
+ },
102
+ theme
103
+ });
104
+ const activeForegroundColor = reactTheming.getColor({
105
+ variable: 'foreground.subtle',
106
+ light: {
107
+ offset: 200
108
+ },
109
+ dark: {
110
+ offset: -200
111
+ },
112
+ theme
113
+ });
114
+ const activeBackgroundColor = reactTheming.getColor({
115
+ variable: 'background.primaryEmphasis',
116
+ transparency: theme.opacity[200],
117
+ dark: {
118
+ offset: -100
119
+ },
120
+ theme
121
+ });
87
122
  const currentForegroundColor = activeForegroundColor;
88
123
  const currentBackgroundColor = hoverBackgroundColor;
89
- const currentHoverBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.16);
90
- const currentActiveBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.28);
91
- return styled.css(["border:none;background:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active,&[data-garden-focus-visible]:active{background-color:", ";color:", ";}&[aria-current='page']{background-color:", ";color:", ";}&[aria-current='page']:hover{background-color:", ";}&[aria-current='page']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
92
- theme: props.theme,
124
+ const currentHoverBackgroundColor = activeBackgroundColor;
125
+ const currentActiveBackgroundColor = reactTheming.getColor({
126
+ variable: 'background.primaryEmphasis',
127
+ transparency: theme.opacity[300],
128
+ dark: {
129
+ offset: -100
130
+ },
131
+ theme
132
+ });
133
+ return styled.css(["border:none;background:transparent;color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active{background-color:", ";color:", ";}&[aria-current='page']{background-color:", ";color:", ";}&[aria-current='page']:hover{background-color:", ";}&[aria-current='page']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
134
+ theme,
93
135
  inset: true
94
- }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, reactTheming.getColor('grey', 300, props.theme));
136
+ }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, disabledColor);
95
137
  };
96
138
  const sizeStyles$2 = props => {
97
139
  const fontSize = props.theme.fontSizes.md;
@@ -102,11 +144,11 @@ const sizeStyles$2 = props => {
102
144
  };
103
145
  const StyledPageBase = styled__default.default.button.attrs({
104
146
  'data-garden-id': COMPONENT_ID$6,
105
- 'data-garden-version': '9.0.0-next.2'
147
+ 'data-garden-version': '9.0.0-next.21'
106
148
  }).withConfig({
107
149
  displayName: "StyledPageBase",
108
150
  componentId: "sc-ttwj4u-0"
109
- })(["box-sizing:border-box;display:inline-block;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;visibility:", ";border-radius:", ";cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;font-family:inherit;user-select:none;", ";&[aria-current='page']{font-weight:", ";}&::-moz-focus-inner{border:0;}:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.hidden && 'hidden', props => props.theme.borderRadii.md, props => sizeStyles$2(props), props => props.theme.fontWeights.semibold, props => colorStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
151
+ })(["box-sizing:border-box;display:inline-block;transition:box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out;visibility:", ";border-radius:", ";cursor:pointer;overflow:hidden;text-align:center;text-overflow:ellipsis;font-family:inherit;user-select:none;", ";&[aria-current='page']{font-weight:", ";}&::-moz-focus-inner{border:0;}:disabled,[aria-disabled='true']{cursor:default;}", ";", ";"], props => props.hidden && 'hidden', props => props.theme.borderRadii.md, props => sizeStyles$2(props), props => props.theme.fontWeights.semibold, props => colorStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
110
152
  StyledPageBase.defaultProps = {
111
153
  theme: reactTheming.DEFAULT_THEME
112
154
  };
@@ -118,7 +160,7 @@ const sizeStyles$1 = props => {
118
160
  };
119
161
  const StyledPage = styled__default.default(StyledPageBase).attrs({
120
162
  'data-garden-id': COMPONENT_ID$5,
121
- 'data-garden-version': '9.0.0-next.2'
163
+ 'data-garden-version': '9.0.0-next.21'
122
164
  }).withConfig({
123
165
  displayName: "StyledPage",
124
166
  componentId: "sc-sxjfwy-0"
@@ -130,7 +172,7 @@ StyledPage.defaultProps = {
130
172
  const COMPONENT_ID$4 = 'cursor_pagination';
131
173
  const StyledCursorPagination = styled__default.default.nav.attrs({
132
174
  'data-garden-id': COMPONENT_ID$4,
133
- 'data-garden-version': '9.0.0-next.2'
175
+ 'data-garden-version': '9.0.0-next.21'
134
176
  }).withConfig({
135
177
  displayName: "StyledCursorPagination",
136
178
  componentId: "sc-qmfecg-0"
@@ -142,7 +184,7 @@ StyledCursorPagination.defaultProps = {
142
184
  const COMPONENT_ID$3 = 'cursor_pagination.cursor';
143
185
  const StyledCursor = styled__default.default(StyledPageBase).attrs({
144
186
  'data-garden-id': COMPONENT_ID$3,
145
- 'data-garden-version': '9.0.0-next.2',
187
+ 'data-garden-version': '9.0.0-next.21',
146
188
  as: 'button'
147
189
  }).withConfig({
148
190
  displayName: "StyledCursor",
@@ -154,22 +196,16 @@ StyledCursor.defaultProps = {
154
196
 
155
197
  const marginStyles = props => {
156
198
  const {
157
- type,
199
+ $type,
158
200
  theme
159
201
  } = props;
160
202
  const margin = theme.space.base;
161
203
  if (theme.rtl) {
162
- return styled.css(["margin-", ":", "px;"], type === 'last' || type === 'next' ? 'right' : 'left', margin);
204
+ return styled.css(["margin-", ":", "px;"], $type === 'last' || $type === 'next' ? 'right' : 'left', margin);
163
205
  }
164
- return styled.css(["margin-", ":", "px;"], type === 'first' || type === 'previous' ? 'right' : 'left', margin);
206
+ return styled.css(["margin-", ":", "px;"], $type === 'first' || $type === 'previous' ? 'right' : 'left', margin);
165
207
  };
166
- const StyledIcon = styled__default.default(_ref => {
167
- let {
168
- children,
169
- ...props
170
- } = _ref;
171
- return React.cloneElement(React.Children.only(children), props);
172
- }).withConfig({
208
+ const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).withConfig({
173
209
  displayName: "StyledIcon",
174
210
  componentId: "sc-2vzk6e-0"
175
211
  })(["", " transform:", ";"], marginStyles, props => props.theme.rtl && 'rotate(180deg)');
@@ -186,13 +222,22 @@ const sizeStyles = props => {
186
222
  const padding = `${props.theme.space.base * 1.5}px`;
187
223
  return styled.css(["padding:0 ", ";min-width:", ";max-width:", ";height:", ";line-height:", ";font-size:", ";"], padding, height, polished.math(`${height} * 2`), height, lineHeight, fontSize);
188
224
  };
225
+ const colorStyles = _ref => {
226
+ let {
227
+ theme
228
+ } = _ref;
229
+ return styled.css(["color:", ";"], reactTheming.getColor({
230
+ variable: 'foreground.subtle',
231
+ theme
232
+ }));
233
+ };
189
234
  const StyledGapListItem = styled__default.default(StyledListItem).attrs({
190
235
  'data-garden-id': COMPONENT_ID$2,
191
- 'data-garden-version': '9.0.0-next.2'
236
+ 'data-garden-version': '9.0.0-next.21'
192
237
  }).withConfig({
193
238
  displayName: "StyledGapListItem",
194
239
  componentId: "sc-10wd0iz-0"
195
- })(["display:inline-block;text-align:center;color:", ";", ";&:hover{color:inherit;}", ";"], p => reactTheming.getColor('neutralHue', 600, p.theme), props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
240
+ })(["display:inline-block;text-align:center;", ";", " &:hover{color:inherit;}", ";"], sizeStyles, colorStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
196
241
  StyledGapListItem.defaultProps = {
197
242
  theme: reactTheming.DEFAULT_THEME
198
243
  };
@@ -200,7 +245,7 @@ StyledGapListItem.defaultProps = {
200
245
  const COMPONENT_ID$1 = 'pagination.navigation';
201
246
  const StyledNavigation = styled__default.default(StyledPage).attrs({
202
247
  'data-garden-id': COMPONENT_ID$1,
203
- 'data-garden-version': '9.0.0-next.2'
248
+ 'data-garden-version': '9.0.0-next.21'
204
249
  }).withConfig({
205
250
  displayName: "StyledNavigation",
206
251
  componentId: "sc-1lpl8pp-0"
@@ -212,7 +257,7 @@ StyledNavigation.defaultProps = {
212
257
  const COMPONENT_ID = 'pagination.pagination_view';
213
258
  const StyledNav = styled__default.default.nav.attrs({
214
259
  'data-garden-id': COMPONENT_ID,
215
- 'data-garden-version': '9.0.0-next.2'
260
+ 'data-garden-version': '9.0.0-next.21'
216
261
  }).withConfig({
217
262
  displayName: "StyledNav",
218
263
  componentId: "sc-ppnpkw-0"
@@ -222,7 +267,7 @@ StyledNav.defaultProps = {
222
267
  };
223
268
 
224
269
  var _path$3;
225
- function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
270
+ function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
226
271
  var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
227
272
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
228
273
  xmlns: "http://www.w3.org/2000/svg",
@@ -238,7 +283,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
238
283
  };
239
284
 
240
285
  var _path$2;
241
- function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
286
+ function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
242
287
  var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
243
288
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
244
289
  xmlns: "http://www.w3.org/2000/svg",
@@ -256,7 +301,7 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
256
301
  const PreviousComponent$1 = React.forwardRef((props, ref) => {
257
302
  const ariaLabel = reactTheming.useText(PreviousComponent$1, props, 'aria-label', 'Previous page');
258
303
  const theme = React.useContext(styled.ThemeContext);
259
- return React__namespace.default.createElement(StyledNavigation, _extends$4({
304
+ return React__namespace.default.createElement(StyledNavigation, Object.assign({
260
305
  type: "button"
261
306
  }, props, {
262
307
  "aria-label": ariaLabel,
@@ -269,7 +314,7 @@ const Previous$1 = PreviousComponent$1;
269
314
  const NextComponent$1 = React.forwardRef((props, ref) => {
270
315
  const ariaLabel = reactTheming.useText(NextComponent$1, props, 'aria-label', 'Next page');
271
316
  const theme = React.useContext(styled.ThemeContext);
272
- return React__namespace.default.createElement(StyledNavigation, _extends$4({
317
+ return React__namespace.default.createElement(StyledNavigation, Object.assign({
273
318
  type: "button"
274
319
  }, props, {
275
320
  "aria-label": ariaLabel,
@@ -281,7 +326,7 @@ const Next$1 = NextComponent$1;
281
326
 
282
327
  const PageComponent = React.forwardRef((props, ref) => {
283
328
  const ariaLabel = reactTheming.useText(PageComponent, props, 'aria-label', `Page ${props.children}`);
284
- return React__namespace.default.createElement(StyledPage, _extends$4({
329
+ return React__namespace.default.createElement(StyledPage, Object.assign({
285
330
  type: "button"
286
331
  }, props, {
287
332
  "aria-label": ariaLabel,
@@ -293,7 +338,7 @@ const Page = PageComponent;
293
338
 
294
339
  const GapComponent = React.forwardRef((props, ref) => {
295
340
  const ariaLabel = reactTheming.useText(GapComponent, props, 'aria-label', 'Ellipsis indicating non-visible pages');
296
- return React__namespace.default.createElement(StyledGapListItem, _extends$4({}, props, {
341
+ return React__namespace.default.createElement(StyledGapListItem, Object.assign({}, props, {
297
342
  "aria-label": ariaLabel,
298
343
  ref: ref
299
344
  }), "\u2026");
@@ -421,7 +466,7 @@ const OffsetPagination = React.forwardRef((_ref, ref) => {
421
466
  };
422
467
  return React__namespace.default.createElement(StyledNav, {
423
468
  "aria-label": navigationLabel
424
- }, React__namespace.default.createElement(StyledList, _extends$4({}, otherProps, {
469
+ }, React__namespace.default.createElement(StyledList, Object.assign({}, otherProps, {
425
470
  ref: ref
426
471
  }), renderPreviousPage(), totalPages > 0 && renderPages(), renderNextPage()));
427
472
  });
@@ -440,7 +485,7 @@ OffsetPagination.defaultProps = {
440
485
  OffsetPagination.displayName = 'OffsetPagination';
441
486
 
442
487
  var _path$1;
443
- function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
488
+ function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
444
489
  var SvgChevronDoubleLeftStroke = function SvgChevronDoubleLeftStroke(props) {
445
490
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
446
491
  xmlns: "http://www.w3.org/2000/svg",
@@ -460,10 +505,10 @@ const FirstComponent = React.forwardRef((_ref, ref) => {
460
505
  children,
461
506
  ...other
462
507
  } = _ref;
463
- return React__namespace.default.createElement(StyledCursor, _extends$4({
508
+ return React__namespace.default.createElement(StyledCursor, Object.assign({
464
509
  ref: ref
465
510
  }, other), React__namespace.default.createElement(StyledIcon, {
466
- type: "first"
511
+ $type: "first"
467
512
  }, React__namespace.default.createElement(SvgChevronDoubleLeftStroke, null)), React__namespace.default.createElement("span", null, children));
468
513
  });
469
514
  FirstComponent.displayName = 'CursorPagination.First';
@@ -474,11 +519,11 @@ const NextComponent = React.forwardRef((_ref, ref) => {
474
519
  children,
475
520
  ...other
476
521
  } = _ref;
477
- return React__namespace.default.createElement(StyledCursor, _extends$4({
522
+ return React__namespace.default.createElement(StyledCursor, Object.assign({
478
523
  ref: ref,
479
524
  as: "button"
480
525
  }, other), React__namespace.default.createElement("span", null, children), React__namespace.default.createElement(StyledIcon, {
481
- type: "next"
526
+ $type: "next"
482
527
  }, React__namespace.default.createElement(SvgChevronRightStroke, null)));
483
528
  });
484
529
  NextComponent.displayName = 'CursorPagination.Next';
@@ -489,18 +534,18 @@ const PreviousComponent = React.forwardRef((_ref, ref) => {
489
534
  children,
490
535
  ...other
491
536
  } = _ref;
492
- return React__namespace.default.createElement(StyledCursor, _extends$4({
537
+ return React__namespace.default.createElement(StyledCursor, Object.assign({
493
538
  ref: ref,
494
539
  as: "button"
495
540
  }, other), React__namespace.default.createElement(StyledIcon, {
496
- type: "previous"
541
+ $type: "previous"
497
542
  }, React__namespace.default.createElement(SvgChevronLeftStroke, null)), React__namespace.default.createElement("span", null, children));
498
543
  });
499
544
  PreviousComponent.displayName = 'CursorPagination.Previous';
500
545
  const Previous = PreviousComponent;
501
546
 
502
547
  var _path;
503
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
548
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
504
549
  var SvgChevronDoubleRightStroke = function SvgChevronDoubleRightStroke(props) {
505
550
  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
506
551
  xmlns: "http://www.w3.org/2000/svg",
@@ -520,17 +565,17 @@ const LastComponent = React.forwardRef((_ref, ref) => {
520
565
  children,
521
566
  ...other
522
567
  } = _ref;
523
- return React__namespace.default.createElement(StyledCursor, _extends$4({
568
+ return React__namespace.default.createElement(StyledCursor, Object.assign({
524
569
  ref: ref,
525
570
  as: "button"
526
571
  }, other), React__namespace.default.createElement("span", null, children), React__namespace.default.createElement(StyledIcon, {
527
- type: "last"
572
+ $type: "last"
528
573
  }, React__namespace.default.createElement(SvgChevronDoubleRightStroke, null)));
529
574
  });
530
575
  LastComponent.displayName = 'CursorPagination.Last';
531
576
  const Last = LastComponent;
532
577
 
533
- const CursorPaginationComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledCursorPagination, _extends$4({
578
+ const CursorPaginationComponent = React.forwardRef((props, ref) => React__namespace.default.createElement(StyledCursorPagination, Object.assign({
534
579
  ref: ref
535
580
  }, props)));
536
581
  CursorPaginationComponent.displayName = 'CursorPagination';
@@ -9,7 +9,6 @@ import { First } from './components/First';
9
9
  import { Next } from './components/Next';
10
10
  import { Previous } from './components/Previous';
11
11
  import { Last } from './components/Last';
12
- export declare const CursorPaginationComponent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
13
12
  /**
14
13
  * @extends HTMLAttributes<HTMLElement>
15
14
  */
@@ -6,4 +6,4 @@
6
6
  */
7
7
  export { OffsetPagination } from './elements/OffsetPagination/OffsetPagination';
8
8
  export { CursorPagination } from './elements/CursorPagination/CursorPagination';
9
- export type { IPaginationProps, PageType as PAGE_TYPE } from './types';
9
+ export type { IPaginationProps, PageType } from './types';
@@ -7,6 +7,6 @@
7
7
  /// <reference types="react" />
8
8
  import { DefaultTheme } from 'styled-components';
9
9
  export interface IStyledIcon {
10
- type: 'first' | 'next' | 'previous' | 'last';
10
+ $type: 'first' | 'next' | 'previous' | 'last';
11
11
  }
12
- export declare const StyledIcon: import("styled-components").StyledComponent<({ children, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {}, never>;
12
+ export declare const StyledIcon: import("styled-components").StyledComponent<({ children, theme, ...props }: any) => import("react").DetailedReactHTMLElement<any, HTMLElement>, DefaultTheme, {}, never>;
@@ -4,11 +4,12 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
+ import { DefaultTheme } from 'styled-components';
7
8
  /**
8
9
  * 1. List reset.
9
10
  * 2. Text truncation.
10
11
  */
11
- export declare const StyledList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {
12
+ export declare const StyledList: import("styled-components").StyledComponent<"ul", DefaultTheme, {
12
13
  'data-garden-id': string;
13
14
  'data-garden-version': string;
14
15
  }, "data-garden-id" | "data-garden-version">;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-pagination",
3
- "version": "9.0.0-next.2",
3
+ "version": "9.0.0-next.21",
4
4
  "description": "Components relating to pagination in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -10,7 +10,7 @@
10
10
  "url": "https://github.com/zendeskgarden/react-components/issues"
11
11
  },
12
12
  "main": "dist/index.cjs.js",
13
- "module": "dist/index.esm.js",
13
+ "module": "dist/esm/index.js",
14
14
  "files": [
15
15
  "dist"
16
16
  ],
@@ -22,18 +22,18 @@
22
22
  "types": "dist/typings/index.d.ts",
23
23
  "dependencies": {
24
24
  "@zendeskgarden/container-utilities": "^2.0.0",
25
- "polished": "^4.0.0",
25
+ "polished": "^4.3.1",
26
26
  "prop-types": "^15.5.7"
27
27
  },
28
28
  "peerDependencies": {
29
- "@zendeskgarden/react-theming": "^8.67.0",
29
+ "@zendeskgarden/react-theming": ">=9.0.0-next",
30
30
  "react": ">=16.8.0",
31
31
  "react-dom": ">=16.8.0",
32
- "styled-components": "^5.1.0"
32
+ "styled-components": "^5.3.1"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-theming": "^9.0.0-next.2",
36
- "@zendeskgarden/svg-icons": "7.0.0"
35
+ "@zendeskgarden/react-theming": "^9.0.0-next.21",
36
+ "@zendeskgarden/svg-icons": "7.1.1"
37
37
  },
38
38
  "keywords": [
39
39
  "components",
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "zendeskgarden:src": "src/index.ts",
48
- "gitHead": "e47dd011fedf130106acdb485a023340564171af"
48
+ "gitHead": "a245ce2b794ea65142174a6a1f855a111b2677a2"
49
49
  }