@workday/canvas-kit-react 7.3.0-next.1 → 7.3.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 (14) hide show
  1. package/common/lib/utils/elements.ts +3 -9
  2. package/dist/commonjs/common/lib/utils/elements.d.ts.map +1 -1
  3. package/dist/commonjs/common/lib/utils/elements.js +1 -8
  4. package/dist/commonjs/menu/lib/MenuItem.js +13 -12
  5. package/dist/commonjs/pagination/lib/Pagination/usePaginationModel.d.ts.map +1 -1
  6. package/dist/commonjs/pagination/lib/Pagination/usePaginationModel.js +5 -1
  7. package/dist/es6/common/lib/utils/elements.d.ts.map +1 -1
  8. package/dist/es6/common/lib/utils/elements.js +1 -8
  9. package/dist/es6/menu/lib/MenuItem.js +13 -12
  10. package/dist/es6/pagination/lib/Pagination/usePaginationModel.d.ts.map +1 -1
  11. package/dist/es6/pagination/lib/Pagination/usePaginationModel.js +5 -1
  12. package/menu/lib/MenuItem.tsx +12 -12
  13. package/package.json +3 -3
  14. package/pagination/lib/Pagination/usePaginationModel.ts +5 -2
package/common/lib/utils/elements.ts CHANGED
@@ -12,15 +12,9 @@ export const isFocusable = (element: HTMLElement) => {
12
12
  const validAnchor = nodeName === 'a' && element.hasAttribute('href');
13
13
  const validAudioVideo = ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls');
14
14
  const validImgObject = ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap');
15
- const validNativelyFocusable = [
16
- 'button',
17
- 'details',
18
- 'embed',
19
- 'iframe',
20
- 'select',
21
- 'textarea',
22
- ].includes(nodeName) &&
23
- element.getAttribute('tabindex') !== '-1';
15
+ const validNativelyFocusable =
16
+ ['button', 'details', 'embed', 'iframe', 'select', 'textarea'].includes(nodeName) &&
17
+ element.getAttribute('tabindex') !== '-1';
24
18
  const hasTabIndex = element.getAttribute('tabindex') === '0';
25
19
 
26
20
  return (
package/dist/commonjs/common/lib/utils/elements.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,WAAW,mBA6B/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW/E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW9E,CAAC"}
1
+ {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,WAAW,mBAuB/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW/E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW9E,CAAC"}
package/dist/commonjs/common/lib/utils/elements.js CHANGED
@@ -14,14 +14,7 @@ var isFocusable = function (element) {
14
14
  var validAnchor = nodeName === 'a' && element.hasAttribute('href');
15
15
  var validAudioVideo = ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls');
16
16
  var validImgObject = ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap');
17
- var validNativelyFocusable = [
18
- 'button',
19
- 'details',
20
- 'embed',
21
- 'iframe',
22
- 'select',
23
- 'textarea',
24
- ].includes(nodeName) &&
17
+ var validNativelyFocusable = ['button', 'details', 'embed', 'iframe', 'select', 'textarea'].includes(nodeName) &&
25
18
  element.getAttribute('tabindex') !== '-1';
26
19
  var hasTabIndex = element.getAttribute('tabindex') === '0';
27
20
  return (validInput ||
package/dist/commonjs/menu/lib/MenuItem.js CHANGED
@@ -55,16 +55,14 @@ var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
55
55
  var theme = _a.theme;
56
56
  return __assign(__assign({}, tokens_1.type.levels.subtext.large), (_b = { '& > *:not(style) ~ *:not(style)': {
57
57
  marginLeft: tokens_1.space.xxs,
58
- }, display: 'block', width: '100%', padding: tokens_1.space.xxs + " " + tokens_1.space.s, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
59
- fill: tokens_1.iconColors.active,
60
- }, '&:hover, &[aria-selected=true]': {
58
+ }, display: 'block', width: '100%', padding: tokens_1.space.xxs + " " + tokens_1.space.s, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '&:hover, &[aria-selected=true]': {
61
59
  backgroundColor: theme.canvas.palette.primary.lightest,
62
60
  color: tokens_1.colors.blackPepper300,
63
61
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
64
62
  fill: tokens_1.iconColors.hover,
65
63
  },
66
64
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
67
- fill: tokens_1.iconColors.active,
65
+ fill: tokens_1.iconColors.hover,
68
66
  },
69
67
  }, '&:focus': {
70
68
  outline: 'none',
@@ -73,15 +71,15 @@ var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
73
71
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
74
72
  fill: tokens_1.iconColors.inverse,
75
73
  },
74
+ '*:hover .wd-icon-fill': {
75
+ fill: tokens_1.iconColors.inverse,
76
+ },
76
77
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
77
78
  fill: tokens_1.iconColors.inverse,
78
79
  },
79
80
  } }, _b["[data-whatinput]"] = {
80
81
  backgroundColor: 'inherit',
81
82
  color: tokens_1.colors.blackPepper300,
82
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
83
- fill: tokens_1.iconColors.active,
84
- },
85
83
  '&:hover, &[aria-selected=true]': {
86
84
  backgroundColor: theme.canvas.palette.primary.lightest,
87
85
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
@@ -90,7 +88,7 @@ var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
90
88
  },
91
89
  '&:focus': {
92
90
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
93
- fill: tokens_1.iconColors.active,
91
+ fill: tokens_1.iconColors.hover,
94
92
  },
95
93
  },
96
94
  }, _b.backgroundColor = 'inherit', _b['&:disabled, &[aria-disabled]'] = {
@@ -104,10 +102,13 @@ var StyledItem = common_1.styled(layout_1.Box.as('button'))(function (_a) {
104
102
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
105
103
  fill: tokens_1.iconColors.disabled,
106
104
  },
107
- '&:hover, &[aria-selected=true]': {
108
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
109
- fill: tokens_1.iconColors.disabled,
110
- },
105
+ },
106
+ '&:hover, &[aria-selected=true]': {
107
+ '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
108
+ fill: tokens_1.iconColors.disabled,
109
+ },
110
+ '*:hover .wd-icon-fill': {
111
+ fill: tokens_1.iconColors.disabled,
111
112
  },
112
113
  },
113
114
  }, _b));
package/dist/commonjs/pagination/lib/Pagination/usePaginationModel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"usePaginationModel.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/usePaginationModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,oBAAY,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,0EAM5B,wBAAwB,KAAG,eAgE7B,CAAC"}
1
+ {"version":3,"file":"usePaginationModel.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/usePaginationModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,oBAAY,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,0EAM5B,wBAAwB,KAAG,eAmE7B,CAAC"}
package/dist/commonjs/pagination/lib/Pagination/usePaginationModel.js CHANGED
@@ -27,7 +27,11 @@ var usePaginationModel = function (_a) {
27
27
  var _b = _a.firstPage, firstPage = _b === void 0 ? 1 : _b, _c = _a.initialCurrentPage, initialCurrentPage = _c === void 0 ? 1 : _c, lastPage = _a.lastPage, _d = _a.rangeSize, rangeSize = _d === void 0 ? 5 : _d, onPageChange = _a.onPageChange;
28
28
  var _e = React.useState(initialCurrentPage), currentPage = _e[0], setCurrentPage = _e[1];
29
29
  var changePage = function (page) {
30
- onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page);
30
+ // Don't fire an `onPageChange` event if the page number is the same as the current page.
31
+ // `setCurrentPage` doesn't need this check, because React won't update the state if the values are the same.
32
+ if (currentPage !== page) {
33
+ onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page);
34
+ }
31
35
  setCurrentPage(page);
32
36
  };
33
37
  var first = function () {
package/dist/es6/common/lib/utils/elements.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,WAAW,mBA6B/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW/E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW9E,CAAC"}
1
+ {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/elements.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,WAAW,mBAuB/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW/E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,cAAe,WAAW,KAAG,WAAW,GAAG,IAW9E,CAAC"}
package/dist/es6/common/lib/utils/elements.js CHANGED
@@ -11,14 +11,7 @@ export var isFocusable = function (element) {
11
11
  var validAnchor = nodeName === 'a' && element.hasAttribute('href');
12
12
  var validAudioVideo = ['audio', 'video'].includes(nodeName) && element.hasAttribute('controls');
13
13
  var validImgObject = ['img', 'object'].includes(nodeName) && element.hasAttribute('usemap');
14
- var validNativelyFocusable = [
15
- 'button',
16
- 'details',
17
- 'embed',
18
- 'iframe',
19
- 'select',
20
- 'textarea',
21
- ].includes(nodeName) &&
14
+ var validNativelyFocusable = ['button', 'details', 'embed', 'iframe', 'select', 'textarea'].includes(nodeName) &&
22
15
  element.getAttribute('tabindex') !== '-1';
23
16
  var hasTabIndex = element.getAttribute('tabindex') === '0';
24
17
  return (validInput ||
package/dist/es6/menu/lib/MenuItem.js CHANGED
@@ -33,16 +33,14 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
33
33
  var theme = _a.theme;
34
34
  return __assign(__assign({}, type.levels.subtext.large), (_b = { '& > *:not(style) ~ *:not(style)': {
35
35
  marginLeft: space.xxs,
36
- }, display: 'block', width: '100%', padding: space.xxs + " " + space.s, boxSizing: 'border-box', cursor: 'pointer', color: colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
37
- fill: iconColors.active,
38
- }, '&:hover, &[aria-selected=true]': {
36
+ }, display: 'block', width: '100%', padding: space.xxs + " " + space.s, boxSizing: 'border-box', cursor: 'pointer', color: colors.blackPepper300, borderWidth: 0, textAlign: 'left', transition: 'background-color 80ms, color 80ms', '&:hover, &[aria-selected=true]': {
39
37
  backgroundColor: theme.canvas.palette.primary.lightest,
40
38
  color: colors.blackPepper300,
41
39
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
42
40
  fill: iconColors.hover,
43
41
  },
44
42
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
45
- fill: iconColors.active,
43
+ fill: iconColors.hover,
46
44
  },
47
45
  }, '&:focus': {
48
46
  outline: 'none',
@@ -51,15 +49,15 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
51
49
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
52
50
  fill: iconColors.inverse,
53
51
  },
52
+ '*:hover .wd-icon-fill': {
53
+ fill: iconColors.inverse,
54
+ },
54
55
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
55
56
  fill: iconColors.inverse,
56
57
  },
57
58
  } }, _b["[data-whatinput]"] = {
58
59
  backgroundColor: 'inherit',
59
60
  color: colors.blackPepper300,
60
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
61
- fill: iconColors.active,
62
- },
63
61
  '&:hover, &[aria-selected=true]': {
64
62
  backgroundColor: theme.canvas.palette.primary.lightest,
65
63
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
@@ -68,7 +66,7 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
68
66
  },
69
67
  '&:focus': {
70
68
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
71
- fill: iconColors.active,
69
+ fill: iconColors.hover,
72
70
  },
73
71
  },
74
72
  }, _b.backgroundColor = 'inherit', _b['&:disabled, &[aria-disabled]'] = {
@@ -82,10 +80,13 @@ var StyledItem = styled(Box.as('button'))(function (_a) {
82
80
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
83
81
  fill: iconColors.disabled,
84
82
  },
85
- '&:hover, &[aria-selected=true]': {
86
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
87
- fill: iconColors.disabled,
88
- },
83
+ },
84
+ '&:hover, &[aria-selected=true]': {
85
+ '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
86
+ fill: iconColors.disabled,
87
+ },
88
+ '*:hover .wd-icon-fill': {
89
+ fill: iconColors.disabled,
89
90
  },
90
91
  },
91
92
  }, _b));
package/dist/es6/pagination/lib/Pagination/usePaginationModel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"usePaginationModel.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/usePaginationModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,oBAAY,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,0EAM5B,wBAAwB,KAAG,eAgE7B,CAAC"}
1
+ {"version":3,"file":"usePaginationModel.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/usePaginationModel.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,oBAAY,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,0EAM5B,wBAAwB,KAAG,eAmE7B,CAAC"}
package/dist/es6/pagination/lib/Pagination/usePaginationModel.js CHANGED
@@ -5,7 +5,11 @@ export var usePaginationModel = function (_a) {
5
5
  var _b = _a.firstPage, firstPage = _b === void 0 ? 1 : _b, _c = _a.initialCurrentPage, initialCurrentPage = _c === void 0 ? 1 : _c, lastPage = _a.lastPage, _d = _a.rangeSize, rangeSize = _d === void 0 ? 5 : _d, onPageChange = _a.onPageChange;
6
6
  var _e = React.useState(initialCurrentPage), currentPage = _e[0], setCurrentPage = _e[1];
7
7
  var changePage = function (page) {
8
- onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page);
8
+ // Don't fire an `onPageChange` event if the page number is the same as the current page.
9
+ // `setCurrentPage` doesn't need this check, because React won't update the state if the values are the same.
10
+ if (currentPage !== page) {
11
+ onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(page);
12
+ }
9
13
  setCurrentPage(page);
10
14
  };
11
15
  var first = function () {
package/menu/lib/MenuItem.tsx CHANGED
@@ -56,9 +56,6 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
56
56
  borderWidth: 0,
57
57
  textAlign: 'left',
58
58
  transition: 'background-color 80ms, color 80ms',
59
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
60
- fill: iconColors.active,
61
- },
62
59
  '&:hover, &[aria-selected=true]': {
63
60
  backgroundColor: theme.canvas.palette.primary.lightest,
64
61
  color: colors.blackPepper300,
@@ -66,7 +63,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
66
63
  fill: iconColors.hover,
67
64
  },
68
65
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
69
- fill: iconColors.active,
66
+ fill: iconColors.hover,
70
67
  },
71
68
  },
72
69
  '&:focus': {
@@ -76,6 +73,9 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
76
73
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
77
74
  fill: iconColors.inverse,
78
75
  },
76
+ '*:hover .wd-icon-fill': {
77
+ fill: iconColors.inverse,
78
+ },
79
79
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
80
80
  fill: iconColors.inverse,
81
81
  },
@@ -84,9 +84,6 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
84
84
  [`[data-whatinput]`]: {
85
85
  backgroundColor: 'inherit',
86
86
  color: colors.blackPepper300,
87
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
88
- fill: iconColors.active,
89
- },
90
87
  '&:hover, &[aria-selected=true]': {
91
88
  backgroundColor: theme.canvas.palette.primary.lightest,
92
89
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
@@ -95,7 +92,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
95
92
  },
96
93
  '&:focus': {
97
94
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
98
- fill: iconColors.active,
95
+ fill: iconColors.hover,
99
96
  },
100
97
  },
101
98
  },
@@ -111,10 +108,13 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
111
108
  '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
112
109
  fill: iconColors.disabled,
113
110
  },
114
- '&:hover, &[aria-selected=true]': {
115
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
116
- fill: iconColors.disabled,
117
- },
111
+ },
112
+ '&:hover, &[aria-selected=true]': {
113
+ '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
114
+ fill: iconColors.disabled,
115
+ },
116
+ '*:hover .wd-icon-fill': {
117
+ fill: iconColors.disabled,
118
118
  },
119
119
  },
120
120
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "7.3.0-next.1+c96313b9",
3
+ "version": "7.3.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -49,7 +49,7 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^7.3.0-next.1+c96313b9",
52
+ "@workday/canvas-kit-popup-stack": "^7.3.0",
53
53
  "@workday/canvas-system-icons-web": "^3.0.0",
54
54
  "@workday/design-assets-types": "^0.2.8",
55
55
  "chroma-js": "^2.1.0",
@@ -68,5 +68,5 @@
68
68
  "@workday/canvas-accent-icons-web": "^3.0.0",
69
69
  "@workday/canvas-applet-icons-web": "^2.0.0"
70
70
  },
71
- "gitHead": "c96313b967a2e828d395426fd103f1ab2b9781f7"
71
+ "gitHead": "ea5edda9b7a9f66cf7238bfdc1de77ad822db7b2"
72
72
  }
package/pagination/lib/Pagination/usePaginationModel.ts CHANGED
@@ -41,8 +41,11 @@ export const usePaginationModel = ({
41
41
  const [currentPage, setCurrentPage] = React.useState(initialCurrentPage);
42
42
 
43
43
  const changePage = (page: number) => {
44
- onPageChange?.(page);
45
-
44
+ // Don't fire an `onPageChange` event if the page number is the same as the current page.
45
+ // `setCurrentPage` doesn't need this check, because React won't update the state if the values are the same.
46
+ if (currentPage !== page) {
47
+ onPageChange?.(page);
48
+ }
46
49
  setCurrentPage(page);
47
50
  };
48
51