@zendeskgarden/react-pagination 8.67.0 → 8.68.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 (3) hide show
  1. package/dist/index.cjs.js +12 -10
  2. package/dist/index.esm.js +13 -11
  3. package/package.json +4 -4
package/dist/index.cjs.js CHANGED
@@ -57,7 +57,7 @@ function _extends$4() {
57
57
  const COMPONENT_ID$6 = 'pagination.pagination_view';
58
58
  const StyledPagination = styled__default.default.ul.attrs({
59
59
  'data-garden-id': COMPONENT_ID$6,
60
- 'data-garden-version': '8.67.0'
60
+ 'data-garden-version': '8.68.0'
61
61
  }).withConfig({
62
62
  displayName: "StyledPagination",
63
63
  componentId: "sc-1b7nye9-0"
@@ -71,14 +71,16 @@ const colorStyles = props => {
71
71
  const defaultColor = reactTheming.getColor('neutralHue', 600, props.theme);
72
72
  const hoverForegroundColor = reactTheming.getColor('neutralHue', 700, props.theme);
73
73
  const hoverBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.08);
74
- const boxShadowColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.35);
75
74
  const activeForegroundColor = reactTheming.getColor('neutralHue', 800, props.theme);
76
75
  const activeBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.2);
77
76
  const currentForegroundColor = activeForegroundColor;
78
77
  const currentBackgroundColor = hoverBackgroundColor;
79
78
  const currentHoverBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.16);
80
79
  const currentActiveBackgroundColor = reactTheming.getColor('primaryHue', 600, props.theme, 0.28);
81
- return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:inset ", ";}&:active,&[data-garden-focus-visible]:active{background-color:", ";color:", ";}&[aria-current='true']{background-color:", ";color:", ";}&[aria-current='true']:hover{background-color:", ";}&[aria-current='true']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, props.theme.shadows.md(boxShadowColor), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, reactTheming.getColor('grey', 300, props.theme));
80
+ return styled.css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active,&[data-garden-focus-visible]:active{background-color:", ";color:", ";}&[aria-current='true']{background-color:", ";color:", ";}&[aria-current='true']:hover{background-color:", ";}&[aria-current='true']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
81
+ theme: props.theme,
82
+ inset: true
83
+ }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, reactTheming.getColor('grey', 300, props.theme));
82
84
  };
83
85
  const sizeStyles$2 = props => {
84
86
  const fontSize = props.theme.fontSizes.md;
@@ -89,11 +91,11 @@ const sizeStyles$2 = props => {
89
91
  };
90
92
  const StyledPageBase = styled__default.default.li.attrs({
91
93
  'data-garden-id': COMPONENT_ID$5,
92
- 'data-garden-version': '8.67.0'
94
+ 'data-garden-version': '8.68.0'
93
95
  }).withConfig({
94
96
  displayName: "StyledPageBase",
95
97
  componentId: "sc-lw1w9j-0"
96
- })(["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;user-select:none;", ";&:focus{outline:none;}&[aria-current='true']{font-weight:", ";}: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$5, props));
98
+ })(["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;user-select:none;", ";&[aria-current='true']{font-weight:", ";}: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$5, props));
97
99
  StyledPageBase.defaultProps = {
98
100
  theme: reactTheming.DEFAULT_THEME
99
101
  };
@@ -105,7 +107,7 @@ const sizeStyles$1 = props => {
105
107
  };
106
108
  const StyledPage = styled__default.default(StyledPageBase).attrs({
107
109
  'data-garden-id': COMPONENT_ID$4,
108
- 'data-garden-version': '8.67.0'
110
+ 'data-garden-version': '8.68.0'
109
111
  }).withConfig({
110
112
  displayName: "StyledPage",
111
113
  componentId: "sc-1k0een3-0"
@@ -117,7 +119,7 @@ StyledPage.defaultProps = {
117
119
  const COMPONENT_ID$3 = 'cursor_pagination';
118
120
  const StyledCursorPagination = styled__default.default.nav.attrs({
119
121
  'data-garden-id': COMPONENT_ID$3,
120
- 'data-garden-version': '8.67.0'
122
+ 'data-garden-version': '8.68.0'
121
123
  }).withConfig({
122
124
  displayName: "StyledCursorPagination",
123
125
  componentId: "sc-qmfecg-0"
@@ -129,7 +131,7 @@ StyledCursorPagination.defaultProps = {
129
131
  const COMPONENT_ID$2 = 'cursor_pagination.cursor';
130
132
  const StyledCursor = styled__default.default(StyledPageBase).attrs({
131
133
  'data-garden-id': COMPONENT_ID$2,
132
- 'data-garden-version': '8.67.0',
134
+ 'data-garden-version': '8.68.0',
133
135
  as: 'button'
134
136
  }).withConfig({
135
137
  displayName: "StyledCursor",
@@ -173,7 +175,7 @@ const sizeStyles = props => {
173
175
  };
174
176
  const StyledGap = styled__default.default(StyledPage).attrs({
175
177
  'data-garden-id': COMPONENT_ID$1,
176
- 'data-garden-version': '8.67.0'
178
+ 'data-garden-version': '8.68.0'
177
179
  }).withConfig({
178
180
  displayName: "StyledGap",
179
181
  componentId: "sc-1hqjltf-0"
@@ -185,7 +187,7 @@ StyledGap.defaultProps = {
185
187
  const COMPONENT_ID = 'pagination.navigation';
186
188
  const StyledNavigation = styled__default.default(StyledPage).attrs({
187
189
  'data-garden-id': COMPONENT_ID,
188
- 'data-garden-version': '8.67.0'
190
+ 'data-garden-version': '8.68.0'
189
191
  }).withConfig({
190
192
  displayName: "StyledNavigation",
191
193
  componentId: "sc-184uuwe-0"
package/dist/index.esm.js CHANGED
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
11
11
  import styled, { css, ThemeContext } from 'styled-components';
12
12
  import { usePagination } from '@zendeskgarden/container-pagination';
13
13
  import { getControlledValue } from '@zendeskgarden/container-utilities';
14
- import { getColor, retrieveComponentStyles, DEFAULT_THEME, getLineHeight, useText } from '@zendeskgarden/react-theming';
14
+ import { getColor, retrieveComponentStyles, DEFAULT_THEME, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
15
15
  import { math } from 'polished';
16
16
 
17
17
  function _extends$4() {
@@ -32,7 +32,7 @@ function _extends$4() {
32
32
  const COMPONENT_ID$6 = 'pagination.pagination_view';
33
33
  const StyledPagination = styled.ul.attrs({
34
34
  'data-garden-id': COMPONENT_ID$6,
35
- 'data-garden-version': '8.67.0'
35
+ 'data-garden-version': '8.68.0'
36
36
  }).withConfig({
37
37
  displayName: "StyledPagination",
38
38
  componentId: "sc-1b7nye9-0"
@@ -46,14 +46,16 @@ const colorStyles = props => {
46
46
  const defaultColor = getColor('neutralHue', 600, props.theme);
47
47
  const hoverForegroundColor = getColor('neutralHue', 700, props.theme);
48
48
  const hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.08);
49
- const boxShadowColor = getColor('primaryHue', 600, props.theme, 0.35);
50
49
  const activeForegroundColor = getColor('neutralHue', 800, props.theme);
51
50
  const activeBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2);
52
51
  const currentForegroundColor = activeForegroundColor;
53
52
  const currentBackgroundColor = hoverBackgroundColor;
54
53
  const currentHoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.16);
55
54
  const currentActiveBackgroundColor = getColor('primaryHue', 600, props.theme, 0.28);
56
- return css(["color:", ";&:hover{background-color:", ";color:", ";}&[data-garden-focus-visible]{box-shadow:inset ", ";}&:active,&[data-garden-focus-visible]:active{background-color:", ";color:", ";}&[aria-current='true']{background-color:", ";color:", ";}&[aria-current='true']:hover{background-color:", ";}&[aria-current='true']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, props.theme.shadows.md(boxShadowColor), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, getColor('grey', 300, props.theme));
55
+ return css(["color:", ";&:hover{background-color:", ";color:", ";}", " &:active,&:focus-visible:active,&[data-garden-focus-visible]:active{background-color:", ";color:", ";}&[aria-current='true']{background-color:", ";color:", ";}&[aria-current='true']:hover{background-color:", ";}&[aria-current='true']:active{background-color:", ";}:disabled,[aria-disabled='true']{background-color:transparent;color:", ";}"], defaultColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
56
+ theme: props.theme,
57
+ inset: true
58
+ }), activeBackgroundColor, activeForegroundColor, currentBackgroundColor, currentForegroundColor, currentHoverBackgroundColor, currentActiveBackgroundColor, getColor('grey', 300, props.theme));
57
59
  };
58
60
  const sizeStyles$2 = props => {
59
61
  const fontSize = props.theme.fontSizes.md;
@@ -64,11 +66,11 @@ const sizeStyles$2 = props => {
64
66
  };
65
67
  const StyledPageBase = styled.li.attrs({
66
68
  'data-garden-id': COMPONENT_ID$5,
67
- 'data-garden-version': '8.67.0'
69
+ 'data-garden-version': '8.68.0'
68
70
  }).withConfig({
69
71
  displayName: "StyledPageBase",
70
72
  componentId: "sc-lw1w9j-0"
71
- })(["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;user-select:none;", ";&:focus{outline:none;}&[aria-current='true']{font-weight:", ";}: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 => retrieveComponentStyles(COMPONENT_ID$5, props));
73
+ })(["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;user-select:none;", ";&[aria-current='true']{font-weight:", ";}: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 => retrieveComponentStyles(COMPONENT_ID$5, props));
72
74
  StyledPageBase.defaultProps = {
73
75
  theme: DEFAULT_THEME
74
76
  };
@@ -80,7 +82,7 @@ const sizeStyles$1 = props => {
80
82
  };
81
83
  const StyledPage = styled(StyledPageBase).attrs({
82
84
  'data-garden-id': COMPONENT_ID$4,
83
- 'data-garden-version': '8.67.0'
85
+ 'data-garden-version': '8.68.0'
84
86
  }).withConfig({
85
87
  displayName: "StyledPage",
86
88
  componentId: "sc-1k0een3-0"
@@ -92,7 +94,7 @@ StyledPage.defaultProps = {
92
94
  const COMPONENT_ID$3 = 'cursor_pagination';
93
95
  const StyledCursorPagination = styled.nav.attrs({
94
96
  'data-garden-id': COMPONENT_ID$3,
95
- 'data-garden-version': '8.67.0'
97
+ 'data-garden-version': '8.68.0'
96
98
  }).withConfig({
97
99
  displayName: "StyledCursorPagination",
98
100
  componentId: "sc-qmfecg-0"
@@ -104,7 +106,7 @@ StyledCursorPagination.defaultProps = {
104
106
  const COMPONENT_ID$2 = 'cursor_pagination.cursor';
105
107
  const StyledCursor = styled(StyledPageBase).attrs({
106
108
  'data-garden-id': COMPONENT_ID$2,
107
- 'data-garden-version': '8.67.0',
109
+ 'data-garden-version': '8.68.0',
108
110
  as: 'button'
109
111
  }).withConfig({
110
112
  displayName: "StyledCursor",
@@ -148,7 +150,7 @@ const sizeStyles = props => {
148
150
  };
149
151
  const StyledGap = styled(StyledPage).attrs({
150
152
  'data-garden-id': COMPONENT_ID$1,
151
- 'data-garden-version': '8.67.0'
153
+ 'data-garden-version': '8.68.0'
152
154
  }).withConfig({
153
155
  displayName: "StyledGap",
154
156
  componentId: "sc-1hqjltf-0"
@@ -160,7 +162,7 @@ StyledGap.defaultProps = {
160
162
  const COMPONENT_ID = 'pagination.navigation';
161
163
  const StyledNavigation = styled(StyledPage).attrs({
162
164
  'data-garden-id': COMPONENT_ID,
163
- 'data-garden-version': '8.67.0'
165
+ 'data-garden-version': '8.68.0'
164
166
  }).withConfig({
165
167
  displayName: "StyledNavigation",
166
168
  componentId: "sc-184uuwe-0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-pagination",
3
- "version": "8.67.0",
3
+ "version": "8.68.0",
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>",
@@ -27,13 +27,13 @@
27
27
  "prop-types": "^15.5.7"
28
28
  },
29
29
  "peerDependencies": {
30
- "@zendeskgarden/react-theming": "^8.1.0",
30
+ "@zendeskgarden/react-theming": "^8.67.0",
31
31
  "react": ">=16.8.0",
32
32
  "react-dom": ">=16.8.0",
33
33
  "styled-components": "^4.2.0 || ^5.0.0"
34
34
  },
35
35
  "devDependencies": {
36
- "@zendeskgarden/react-theming": "^8.67.0",
36
+ "@zendeskgarden/react-theming": "^8.68.0",
37
37
  "@zendeskgarden/svg-icons": "6.33.0"
38
38
  },
39
39
  "keywords": [
@@ -46,5 +46,5 @@
46
46
  "access": "public"
47
47
  },
48
48
  "zendeskgarden:src": "src/index.ts",
49
- "gitHead": "50a98b0cd7c85bed2ed88ad869e6f2cd3fc68f62"
49
+ "gitHead": "e05a28d586f47d95e0570fe2d529915aa4285845"
50
50
  }