@workday/canvas-kit-react 7.3.0-next.0 → 7.3.1

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 (30) 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/commonjs/popup/lib/PopupBody.js +1 -1
  8. package/dist/commonjs/popup/lib/PopupCard.d.ts +3 -2
  9. package/dist/commonjs/popup/lib/PopupCard.d.ts.map +1 -1
  10. package/dist/commonjs/popup/lib/PopupCard.js +3 -3
  11. package/dist/commonjs/popup/lib/PopupHeading.js +1 -1
  12. package/dist/commonjs/toast/lib/Toast.js +1 -1
  13. package/dist/es6/common/lib/utils/elements.d.ts.map +1 -1
  14. package/dist/es6/common/lib/utils/elements.js +1 -8
  15. package/dist/es6/menu/lib/MenuItem.js +13 -12
  16. package/dist/es6/pagination/lib/Pagination/usePaginationModel.d.ts.map +1 -1
  17. package/dist/es6/pagination/lib/Pagination/usePaginationModel.js +5 -1
  18. package/dist/es6/popup/lib/PopupBody.js +1 -1
  19. package/dist/es6/popup/lib/PopupCard.d.ts +3 -2
  20. package/dist/es6/popup/lib/PopupCard.d.ts.map +1 -1
  21. package/dist/es6/popup/lib/PopupCard.js +4 -4
  22. package/dist/es6/popup/lib/PopupHeading.js +1 -1
  23. package/dist/es6/toast/lib/Toast.js +1 -1
  24. package/menu/lib/MenuItem.tsx +12 -12
  25. package/package.json +3 -3
  26. package/pagination/lib/Pagination/usePaginationModel.ts +5 -2
  27. package/popup/lib/PopupBody.tsx +1 -1
  28. package/popup/lib/PopupCard.tsx +6 -6
  29. package/popup/lib/PopupHeading.tsx +1 -1
  30. package/toast/lib/Toast.tsx +1 -1
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/commonjs/popup/lib/PopupBody.js CHANGED
@@ -39,5 +39,5 @@ exports.PopupBody = common_1.createSubcomponent('div')({
39
39
  displayName: 'Popup.Body',
40
40
  modelHook: hooks_1.usePopupModel,
41
41
  })(function (elemProps) {
42
- return React.createElement(card_1.Card.Body, __assign({ overflowY: "auto" }, elemProps));
42
+ return React.createElement(card_1.Card.Body, __assign({ overflowY: "auto", padding: "xxs" }, elemProps));
43
43
  });
package/dist/commonjs/popup/lib/PopupCard.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import { Card } from '@workday/canvas-kit-react/card';
3
3
  import { ExtractProps } from '@workday/canvas-kit-react/common';
4
- import { StackStyleProps } from '@workday/canvas-kit-react/layout';
5
- export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
4
+ import { FlexStyleProps } from '@workday/canvas-kit-react/layout';
5
+ export declare type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
6
+ export interface PopupCardProps extends FlexAndBoxProps {
6
7
  children?: React.ReactNode;
7
8
  }
8
9
  export declare const PopupCard: import("../../common").ElementComponentM<"div", PopupCardProps, {
package/dist/commonjs/popup/lib/PopupCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAQ,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAKxE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAgCpB,CAAC"}
1
+ {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAO,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKtE,oBAAY,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA+BpB,CAAC"}
package/dist/commonjs/popup/lib/PopupCard.js CHANGED
@@ -83,9 +83,9 @@ exports.PopupCard = common_1.createSubcomponent('div')({
83
83
  var transformOrigin = React.useMemo(function () {
84
84
  return getTransformFromPlacement_1.getTransformFromPlacement(model.state.placement || 'bottom');
85
85
  }, [model.state.placement]);
86
- // As is a Stack that will render an element of `Element`
87
- var As = common_1.useConstant(function () { return layout_1.Stack.as(Element); });
88
- return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 5, maxWidth: "calc(100vw - " + tokens_1.space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin ? tokens_1.space[elemProps.margin] || elemProps.margin : tokens_1.space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
86
+ // As is a Flex that will render an element of `Element`
87
+ var As = common_1.useConstant(function () { return layout_1.Flex.as(Element); });
88
+ return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", depth: 5, maxWidth: "calc(100vw - " + tokens_1.space.l + ")", flexDirection: "column", minHeight: 0, padding: "m", maxHeight: "calc(100vh - " + (elemProps.margin ? tokens_1.space[elemProps.margin] || elemProps.margin : tokens_1.space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
89
89
  }, elemProps), children));
90
90
  });
91
91
  var templateObject_1;
package/dist/commonjs/popup/lib/PopupHeading.js CHANGED
@@ -52,5 +52,5 @@ exports.PopupHeading = common_1.createSubcomponent('h2')({
52
52
  elemPropsHook: hooks_1.usePopupHeading,
53
53
  })(function (_a, Element) {
54
54
  var children = _a.children, elemProps = __rest(_a, ["children"]);
55
- return (React.createElement(card_1.Card.Heading, __assign({ as: Element, marginBottom: "s" }, elemProps), children));
55
+ return (React.createElement(card_1.Card.Heading, __assign({ as: Element, marginBottom: "xxs", padding: "xxs" }, elemProps), children));
56
56
  });
package/dist/commonjs/toast/lib/Toast.js CHANGED
@@ -74,7 +74,7 @@ exports.Toast = common_1.createComponent('div')({
74
74
  iconColor = _c === void 0 ? tokens_1.colors.greenApple400 : _c, onClose = _a.onClose, onActionClick = _a.onActionClick, actionText = _a.actionText, children = _a.children, elemProps = __rest(_a, ["icon", "iconColor", "onClose", "onActionClick", "actionText", "children"]);
75
75
  var isInteractive = onClose || onActionClick;
76
76
  var isError = iconColor === tokens_1.colors.cinnamon500 && icon === canvas_system_icons_web_1.exclamationCircleIcon;
77
- return (React.createElement(popup_1.Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive }, elemProps),
77
+ return (React.createElement(popup_1.Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive, padding: "xxs" }, elemProps),
78
78
  onClose && React.createElement(popup_1.Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
79
79
  React.createElement(popup_1.Popup.Body, null,
80
80
  React.createElement(ToastContentContainer, { onClose: onClose },
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/dist/es6/popup/lib/PopupBody.js CHANGED
@@ -17,5 +17,5 @@ export var PopupBody = createSubcomponent('div')({
17
17
  displayName: 'Popup.Body',
18
18
  modelHook: usePopupModel,
19
19
  })(function (elemProps) {
20
- return React.createElement(Card.Body, __assign({ overflowY: "auto" }, elemProps));
20
+ return React.createElement(Card.Body, __assign({ overflowY: "auto", padding: "xxs" }, elemProps));
21
21
  });
package/dist/es6/popup/lib/PopupCard.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import { Card } from '@workday/canvas-kit-react/card';
3
3
  import { ExtractProps } from '@workday/canvas-kit-react/common';
4
- import { StackStyleProps } from '@workday/canvas-kit-react/layout';
5
- export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
4
+ import { FlexStyleProps } from '@workday/canvas-kit-react/layout';
5
+ export declare type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
6
+ export interface PopupCardProps extends FlexAndBoxProps {
6
7
  children?: React.ReactNode;
7
8
  }
8
9
  export declare const PopupCard: import("../../common").ElementComponentM<"div", PopupCardProps, {
package/dist/es6/popup/lib/PopupCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAQ,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAKxE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAgCpB,CAAC"}
1
+ {"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAO,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKtE,oBAAY,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA+BpB,CAAC"}
package/dist/es6/popup/lib/PopupCard.js CHANGED
@@ -29,7 +29,7 @@ import { keyframes } from '@emotion/react';
29
29
  import { Card } from '@workday/canvas-kit-react/card';
30
30
  import { space, type } from '@workday/canvas-kit-react/tokens';
31
31
  import { styled, getTranslateFromOrigin, useConstant, createSubcomponent, } from '@workday/canvas-kit-react/common';
32
- import { Stack } from '@workday/canvas-kit-react/layout';
32
+ import { Flex } from '@workday/canvas-kit-react/layout';
33
33
  import { getTransformFromPlacement } from './getTransformFromPlacement';
34
34
  import { usePopupCard, usePopupModel } from './hooks';
35
35
  var popupAnimation = function (transformOrigin) {
@@ -61,9 +61,9 @@ export var PopupCard = createSubcomponent('div')({
61
61
  var transformOrigin = React.useMemo(function () {
62
62
  return getTransformFromPlacement(model.state.placement || 'bottom');
63
63
  }, [model.state.placement]);
64
- // As is a Stack that will render an element of `Element`
65
- var As = useConstant(function () { return Stack.as(Element); });
66
- return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 5, maxWidth: "calc(100vw - " + space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin ? space[elemProps.margin] || elemProps.margin : space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
64
+ // As is a Flex that will render an element of `Element`
65
+ var As = useConstant(function () { return Flex.as(Element); });
66
+ return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", depth: 5, maxWidth: "calc(100vw - " + space.l + ")", flexDirection: "column", minHeight: 0, padding: "m", maxHeight: "calc(100vh - " + (elemProps.margin ? space[elemProps.margin] || elemProps.margin : space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
67
67
  }, elemProps), children));
68
68
  });
69
69
  var templateObject_1;
package/dist/es6/popup/lib/PopupHeading.js CHANGED
@@ -30,5 +30,5 @@ export var PopupHeading = createSubcomponent('h2')({
30
30
  elemPropsHook: usePopupHeading,
31
31
  })(function (_a, Element) {
32
32
  var children = _a.children, elemProps = __rest(_a, ["children"]);
33
- return (React.createElement(Card.Heading, __assign({ as: Element, marginBottom: "s" }, elemProps), children));
33
+ return (React.createElement(Card.Heading, __assign({ as: Element, marginBottom: "xxs", padding: "xxs" }, elemProps), children));
34
34
  });
package/dist/es6/toast/lib/Toast.js CHANGED
@@ -52,7 +52,7 @@ export var Toast = createComponent('div')({
52
52
  iconColor = _c === void 0 ? colors.greenApple400 : _c, onClose = _a.onClose, onActionClick = _a.onActionClick, actionText = _a.actionText, children = _a.children, elemProps = __rest(_a, ["icon", "iconColor", "onClose", "onActionClick", "actionText", "children"]);
53
53
  var isInteractive = onClose || onActionClick;
54
54
  var isError = iconColor === colors.cinnamon500 && icon === exclamationCircleIcon;
55
- return (React.createElement(Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive }, elemProps),
55
+ return (React.createElement(Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, depth: 5, role: isInteractive ? 'dialog' : isError ? 'alert' : 'status', "aria-live": isInteractive ? 'off' : isError ? 'assertive' : 'polite', "aria-atomic": !isInteractive, padding: "xxs" }, elemProps),
56
56
  onClose && React.createElement(Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
57
57
  React.createElement(Popup.Body, null,
58
58
  React.createElement(ToastContentContainer, { onClose: onClose },
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.0+0ec455ac",
3
+ "version": "7.3.1",
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.0+0ec455ac",
52
+ "@workday/canvas-kit-popup-stack": "^7.3.1",
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": "0ec455ac3784594025a176e8f569b97deab5e0d4"
71
+ "gitHead": "41e6eb9532da50e341fe07b805becc2516f9d420"
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
 
package/popup/lib/PopupBody.tsx CHANGED
@@ -8,5 +8,5 @@ export const PopupBody = createSubcomponent('div')({
8
8
  displayName: 'Popup.Body',
9
9
  modelHook: usePopupModel,
10
10
  })<ExtractProps<typeof Card.Body>>(elemProps => {
11
- return <Card.Body overflowY="auto" {...elemProps} />;
11
+ return <Card.Body overflowY="auto" padding="xxs" {...elemProps} />;
12
12
  });
package/popup/lib/PopupCard.tsx CHANGED
@@ -12,12 +12,13 @@ import {
12
12
  useConstant,
13
13
  createSubcomponent,
14
14
  } from '@workday/canvas-kit-react/common';
15
- import {Stack, StackStyleProps} from '@workday/canvas-kit-react/layout';
15
+ import {Flex, FlexStyleProps} from '@workday/canvas-kit-react/layout';
16
16
 
17
17
  import {getTransformFromPlacement} from './getTransformFromPlacement';
18
18
  import {usePopupCard, usePopupModel} from './hooks';
19
19
 
20
- export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
20
+ export type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
21
+ export interface PopupCardProps extends FlexAndBoxProps {
21
22
  children?: React.ReactNode;
22
23
  }
23
24
 
@@ -63,20 +64,19 @@ export const PopupCard = createSubcomponent('div')({
63
64
  return getTransformFromPlacement(model.state.placement || 'bottom');
64
65
  }, [model.state.placement]);
65
66
 
66
- // As is a Stack that will render an element of `Element`
67
- const As = useConstant(() => Stack.as(Element));
67
+ // As is a Flex that will render an element of `Element`
68
+ const As = useConstant(() => Flex.as(Element));
68
69
 
69
70
  return (
70
71
  <StyledPopupCard
71
72
  as={As}
72
73
  transformOrigin={transformOrigin}
73
74
  position="relative"
74
- padding="l"
75
75
  depth={5}
76
76
  maxWidth={`calc(100vw - ${space.l})`}
77
- spacing={0}
78
77
  flexDirection="column"
79
78
  minHeight={0}
79
+ padding="m"
80
80
  maxHeight={`calc(100vh - ${
81
81
  elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl
82
82
  } * 2)`}
package/popup/lib/PopupHeading.tsx CHANGED
@@ -15,7 +15,7 @@ export const PopupHeading = createSubcomponent('h2')({
15
15
  elemPropsHook: usePopupHeading,
16
16
  })<PopupHeadingProps>(({children, ...elemProps}, Element) => {
17
17
  return (
18
- <Card.Heading as={Element} marginBottom="s" {...elemProps}>
18
+ <Card.Heading as={Element} marginBottom="xxs" padding="xxs" {...elemProps}>
19
19
  {children}
20
20
  </Card.Heading>
21
21
  );
package/toast/lib/Toast.tsx CHANGED
@@ -92,11 +92,11 @@ export const Toast = createComponent('div')({
92
92
  ref={ref}
93
93
  as={Element}
94
94
  width={toastWidth}
95
- padding="s"
96
95
  depth={5}
97
96
  role={isInteractive ? 'dialog' : isError ? 'alert' : 'status'}
98
97
  aria-live={isInteractive ? 'off' : isError ? 'assertive' : 'polite'}
99
98
  aria-atomic={!isInteractive}
99
+ padding="xxs"
100
100
  {...elemProps}
101
101
  >
102
102
  {onClose && <Popup.CloseIcon aria-label="Close" onClick={onClose} size="small" />}