@zendeskgarden/react-pagination 9.0.0-next.3 → 9.0.0-next.5

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/dist/index.cjs.js +19 -19
  2. package/dist/index.esm.js +20 -20
  3. package/package.json +4 -4
package/dist/index.cjs.js CHANGED
@@ -56,11 +56,11 @@ function _extends$4() {
56
56
  const COMPONENT_ID$8 = 'pagination.list';
57
57
  const StyledList = styled__default.default.ul.attrs({
58
58
  'data-garden-id': COMPONENT_ID$8,
59
- 'data-garden-version': '9.0.0-next.3'
59
+ 'data-garden-version': '9.0.0-next.5'
60
60
  }).withConfig({
61
61
  displayName: "StyledList",
62
62
  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));
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.getColorV8('neutralHue', 600, props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
64
64
  StyledList.defaultProps = {
65
65
  theme: reactTheming.DEFAULT_THEME
66
66
  };
@@ -68,7 +68,7 @@ StyledList.defaultProps = {
68
68
  const COMPONENT_ID$7 = 'pagination.list_item';
69
69
  const StyledListItem = styled__default.default.li.attrs({
70
70
  'data-garden-id': COMPONENT_ID$7,
71
- 'data-garden-version': '9.0.0-next.3'
71
+ 'data-garden-version': '9.0.0-next.5'
72
72
  }).withConfig({
73
73
  displayName: "StyledListItem",
74
74
  componentId: "sc-16j4sju-0"
@@ -79,19 +79,19 @@ StyledListItem.defaultProps = {
79
79
 
80
80
  const COMPONENT_ID$6 = 'pagination.page';
81
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);
82
+ const defaultColor = reactTheming.getColorV8('neutralHue', 600, props.theme);
83
+ const hoverForegroundColor = reactTheming.getColorV8('neutralHue', 700, props.theme);
84
+ const hoverBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.08);
85
+ const activeForegroundColor = reactTheming.getColorV8('neutralHue', 800, props.theme);
86
+ const activeBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.2);
87
87
  const currentForegroundColor = activeForegroundColor;
88
88
  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);
89
+ const currentHoverBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.16);
90
+ const currentActiveBackgroundColor = reactTheming.getColorV8('primaryHue', 600, props.theme, 0.28);
91
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
92
  theme: props.theme,
93
93
  inset: true
94
- }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, reactTheming.getColor('grey', 300, props.theme));
94
+ }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, reactTheming.getColorV8('grey', 300, props.theme));
95
95
  };
96
96
  const sizeStyles$2 = props => {
97
97
  const fontSize = props.theme.fontSizes.md;
@@ -102,7 +102,7 @@ const sizeStyles$2 = props => {
102
102
  };
103
103
  const StyledPageBase = styled__default.default.button.attrs({
104
104
  'data-garden-id': COMPONENT_ID$6,
105
- 'data-garden-version': '9.0.0-next.3'
105
+ 'data-garden-version': '9.0.0-next.5'
106
106
  }).withConfig({
107
107
  displayName: "StyledPageBase",
108
108
  componentId: "sc-ttwj4u-0"
@@ -118,7 +118,7 @@ const sizeStyles$1 = props => {
118
118
  };
119
119
  const StyledPage = styled__default.default(StyledPageBase).attrs({
120
120
  'data-garden-id': COMPONENT_ID$5,
121
- 'data-garden-version': '9.0.0-next.3'
121
+ 'data-garden-version': '9.0.0-next.5'
122
122
  }).withConfig({
123
123
  displayName: "StyledPage",
124
124
  componentId: "sc-sxjfwy-0"
@@ -130,7 +130,7 @@ StyledPage.defaultProps = {
130
130
  const COMPONENT_ID$4 = 'cursor_pagination';
131
131
  const StyledCursorPagination = styled__default.default.nav.attrs({
132
132
  'data-garden-id': COMPONENT_ID$4,
133
- 'data-garden-version': '9.0.0-next.3'
133
+ 'data-garden-version': '9.0.0-next.5'
134
134
  }).withConfig({
135
135
  displayName: "StyledCursorPagination",
136
136
  componentId: "sc-qmfecg-0"
@@ -142,7 +142,7 @@ StyledCursorPagination.defaultProps = {
142
142
  const COMPONENT_ID$3 = 'cursor_pagination.cursor';
143
143
  const StyledCursor = styled__default.default(StyledPageBase).attrs({
144
144
  'data-garden-id': COMPONENT_ID$3,
145
- 'data-garden-version': '9.0.0-next.3',
145
+ 'data-garden-version': '9.0.0-next.5',
146
146
  as: 'button'
147
147
  }).withConfig({
148
148
  displayName: "StyledCursor",
@@ -188,11 +188,11 @@ const sizeStyles = props => {
188
188
  };
189
189
  const StyledGapListItem = styled__default.default(StyledListItem).attrs({
190
190
  'data-garden-id': COMPONENT_ID$2,
191
- 'data-garden-version': '9.0.0-next.3'
191
+ 'data-garden-version': '9.0.0-next.5'
192
192
  }).withConfig({
193
193
  displayName: "StyledGapListItem",
194
194
  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));
195
+ })(["display:inline-block;text-align:center;color:", ";", ";&:hover{color:inherit;}", ";"], p => reactTheming.getColorV8('neutralHue', 600, p.theme), props => sizeStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
196
196
  StyledGapListItem.defaultProps = {
197
197
  theme: reactTheming.DEFAULT_THEME
198
198
  };
@@ -200,7 +200,7 @@ StyledGapListItem.defaultProps = {
200
200
  const COMPONENT_ID$1 = 'pagination.navigation';
201
201
  const StyledNavigation = styled__default.default(StyledPage).attrs({
202
202
  'data-garden-id': COMPONENT_ID$1,
203
- 'data-garden-version': '9.0.0-next.3'
203
+ 'data-garden-version': '9.0.0-next.5'
204
204
  }).withConfig({
205
205
  displayName: "StyledNavigation",
206
206
  componentId: "sc-1lpl8pp-0"
@@ -212,7 +212,7 @@ StyledNavigation.defaultProps = {
212
212
  const COMPONENT_ID = 'pagination.pagination_view';
213
213
  const StyledNav = styled__default.default.nav.attrs({
214
214
  'data-garden-id': COMPONENT_ID,
215
- 'data-garden-version': '9.0.0-next.3'
215
+ 'data-garden-version': '9.0.0-next.5'
216
216
  }).withConfig({
217
217
  displayName: "StyledNav",
218
218
  componentId: "sc-ppnpkw-0"
package/dist/index.esm.js CHANGED
@@ -9,7 +9,7 @@ import * as React from 'react';
9
9
  import React__default, { cloneElement, Children, forwardRef, useContext, useState, useCallback } from 'react';
10
10
  import PropTypes from 'prop-types';
11
11
  import { getControlledValue } from '@zendeskgarden/container-utilities';
12
- import { getColor, retrieveComponentStyles, DEFAULT_THEME, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
12
+ import { getColorV8, retrieveComponentStyles, DEFAULT_THEME, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
13
13
  import styled, { css, ThemeContext } from 'styled-components';
14
14
  import { math } from 'polished';
15
15
 
@@ -31,11 +31,11 @@ function _extends$4() {
31
31
  const COMPONENT_ID$8 = 'pagination.list';
32
32
  const StyledList = styled.ul.attrs({
33
33
  'data-garden-id': COMPONENT_ID$8,
34
- 'data-garden-version': '9.0.0-next.3'
34
+ 'data-garden-version': '9.0.0-next.5'
35
35
  }).withConfig({
36
36
  displayName: "StyledList",
37
37
  componentId: "sc-1uz2jxo-0"
38
- })(["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 => getColor('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$8, props));
38
+ })(["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 => getColorV8('neutralHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID$8, props));
39
39
  StyledList.defaultProps = {
40
40
  theme: DEFAULT_THEME
41
41
  };
@@ -43,7 +43,7 @@ StyledList.defaultProps = {
43
43
  const COMPONENT_ID$7 = 'pagination.list_item';
44
44
  const StyledListItem = styled.li.attrs({
45
45
  'data-garden-id': COMPONENT_ID$7,
46
- 'data-garden-version': '9.0.0-next.3'
46
+ 'data-garden-version': '9.0.0-next.5'
47
47
  }).withConfig({
48
48
  displayName: "StyledListItem",
49
49
  componentId: "sc-16j4sju-0"
@@ -54,19 +54,19 @@ StyledListItem.defaultProps = {
54
54
 
55
55
  const COMPONENT_ID$6 = 'pagination.page';
56
56
  const colorStyles = props => {
57
- const defaultColor = getColor('neutralHue', 600, props.theme);
58
- const hoverForegroundColor = getColor('neutralHue', 700, props.theme);
59
- const hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08);
60
- const activeForegroundColor = getColor('neutralHue', 800, props.theme);
61
- const activeBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2);
57
+ const defaultColor = getColorV8('neutralHue', 600, props.theme);
58
+ const hoverForegroundColor = getColorV8('neutralHue', 700, props.theme);
59
+ const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
60
+ const activeForegroundColor = getColorV8('neutralHue', 800, props.theme);
61
+ const activeBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
62
62
  const currentForegroundColor = activeForegroundColor;
63
63
  const currentBackgroundColor = hoverBackgroundColor;
64
- const currentHoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.16);
65
- const currentActiveBackgroundColor = getColor('primaryHue', 600, props.theme, 0.28);
64
+ const currentHoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.16);
65
+ const currentActiveBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.28);
66
66
  return 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, focusStyles({
67
67
  theme: props.theme,
68
68
  inset: true
69
- }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, getColor('grey', 300, props.theme));
69
+ }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, getColorV8('grey', 300, props.theme));
70
70
  };
71
71
  const sizeStyles$2 = props => {
72
72
  const fontSize = props.theme.fontSizes.md;
@@ -77,7 +77,7 @@ const sizeStyles$2 = props => {
77
77
  };
78
78
  const StyledPageBase = styled.button.attrs({
79
79
  'data-garden-id': COMPONENT_ID$6,
80
- 'data-garden-version': '9.0.0-next.3'
80
+ 'data-garden-version': '9.0.0-next.5'
81
81
  }).withConfig({
82
82
  displayName: "StyledPageBase",
83
83
  componentId: "sc-ttwj4u-0"
@@ -93,7 +93,7 @@ const sizeStyles$1 = props => {
93
93
  };
94
94
  const StyledPage = styled(StyledPageBase).attrs({
95
95
  'data-garden-id': COMPONENT_ID$5,
96
- 'data-garden-version': '9.0.0-next.3'
96
+ 'data-garden-version': '9.0.0-next.5'
97
97
  }).withConfig({
98
98
  displayName: "StyledPage",
99
99
  componentId: "sc-sxjfwy-0"
@@ -105,7 +105,7 @@ StyledPage.defaultProps = {
105
105
  const COMPONENT_ID$4 = 'cursor_pagination';
106
106
  const StyledCursorPagination = styled.nav.attrs({
107
107
  'data-garden-id': COMPONENT_ID$4,
108
- 'data-garden-version': '9.0.0-next.3'
108
+ 'data-garden-version': '9.0.0-next.5'
109
109
  }).withConfig({
110
110
  displayName: "StyledCursorPagination",
111
111
  componentId: "sc-qmfecg-0"
@@ -117,7 +117,7 @@ StyledCursorPagination.defaultProps = {
117
117
  const COMPONENT_ID$3 = 'cursor_pagination.cursor';
118
118
  const StyledCursor = styled(StyledPageBase).attrs({
119
119
  'data-garden-id': COMPONENT_ID$3,
120
- 'data-garden-version': '9.0.0-next.3',
120
+ 'data-garden-version': '9.0.0-next.5',
121
121
  as: 'button'
122
122
  }).withConfig({
123
123
  displayName: "StyledCursor",
@@ -163,11 +163,11 @@ const sizeStyles = props => {
163
163
  };
164
164
  const StyledGapListItem = styled(StyledListItem).attrs({
165
165
  'data-garden-id': COMPONENT_ID$2,
166
- 'data-garden-version': '9.0.0-next.3'
166
+ 'data-garden-version': '9.0.0-next.5'
167
167
  }).withConfig({
168
168
  displayName: "StyledGapListItem",
169
169
  componentId: "sc-10wd0iz-0"
170
- })(["display:inline-block;text-align:center;color:", ";", ";&:hover{color:inherit;}", ";"], p => getColor('neutralHue', 600, p.theme), props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$2, props));
170
+ })(["display:inline-block;text-align:center;color:", ";", ";&:hover{color:inherit;}", ";"], p => getColorV8('neutralHue', 600, p.theme), props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID$2, props));
171
171
  StyledGapListItem.defaultProps = {
172
172
  theme: DEFAULT_THEME
173
173
  };
@@ -175,7 +175,7 @@ StyledGapListItem.defaultProps = {
175
175
  const COMPONENT_ID$1 = 'pagination.navigation';
176
176
  const StyledNavigation = styled(StyledPage).attrs({
177
177
  'data-garden-id': COMPONENT_ID$1,
178
- 'data-garden-version': '9.0.0-next.3'
178
+ 'data-garden-version': '9.0.0-next.5'
179
179
  }).withConfig({
180
180
  displayName: "StyledNavigation",
181
181
  componentId: "sc-1lpl8pp-0"
@@ -187,7 +187,7 @@ StyledNavigation.defaultProps = {
187
187
  const COMPONENT_ID = 'pagination.pagination_view';
188
188
  const StyledNav = styled.nav.attrs({
189
189
  'data-garden-id': COMPONENT_ID,
190
- 'data-garden-version': '9.0.0-next.3'
190
+ 'data-garden-version': '9.0.0-next.5'
191
191
  }).withConfig({
192
192
  displayName: "StyledNav",
193
193
  componentId: "sc-ppnpkw-0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-pagination",
3
- "version": "9.0.0-next.3",
3
+ "version": "9.0.0-next.5",
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>",
@@ -29,10 +29,10 @@
29
29
  "@zendeskgarden/react-theming": "^8.67.0",
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.3",
35
+ "@zendeskgarden/react-theming": "^9.0.0-next.5",
36
36
  "@zendeskgarden/svg-icons": "7.0.0"
37
37
  },
38
38
  "keywords": [
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "zendeskgarden:src": "src/index.ts",
48
- "gitHead": "d5086e8a3ae0c8608361966954bf434ef03005ec"
48
+ "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
49
49
  }