@workday/canvas-kit-react 8.6.18 → 8.6.20

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 (9) hide show
  1. package/dist/commonjs/popup/lib/hooks/useReturnFocus.js +2 -2
  2. package/dist/commonjs/tabs/lib/TabsItem.d.ts.map +1 -1
  3. package/dist/commonjs/tabs/lib/TabsItem.js +1 -6
  4. package/dist/es6/popup/lib/hooks/useReturnFocus.js +2 -2
  5. package/dist/es6/tabs/lib/TabsItem.d.ts.map +1 -1
  6. package/dist/es6/tabs/lib/TabsItem.js +1 -6
  7. package/package.json +3 -3
  8. package/popup/lib/hooks/useReturnFocus.tsx +4 -4
  9. package/tabs/lib/TabsItem.tsx +0 -7
package/dist/commonjs/popup/lib/hooks/useReturnFocus.js CHANGED
@@ -53,7 +53,7 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
53
53
  // track mousedown events to determine if the mouse target is a focusable element. If it is, we
54
54
  // should not return focus
55
55
  var onMouseDown = react_1.default.useCallback(function (event) {
56
- if (model.state.stackRef.current && event.target instanceof HTMLElement) {
56
+ if (model.state.stackRef.current && event.target instanceof Element) {
57
57
  if (!canvas_kit_popup_stack_1.PopupStack.contains(model.state.stackRef.current, event.target)) {
58
58
  elementRef.current = event.target;
59
59
  }
@@ -106,7 +106,7 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
106
106
  }
107
107
  var activeElementOutsidePopupStack = document.activeElement !== document.body &&
108
108
  model.state.stackRef.current &&
109
- document.activeElement instanceof HTMLElement &&
109
+ document.activeElement instanceof Element &&
110
110
  !canvas_kit_popup_stack_1.PopupStack.contains(model.state.stackRef.current, document.activeElement);
111
111
  if (activeElementOutsidePopupStack || requiresFocusChangeRef.current) {
112
112
  // We need to change focus _before_ the browser process the default action of picking a new
package/dist/commonjs/tabs/lib/TabsItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,UAAU,EAGV,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAYjE,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa;;;;wDAwFzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
1
+ {"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,UAAU,EAGV,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAYjE,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa;;;;wDAiFzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
package/dist/commonjs/tabs/lib/TabsItem.js CHANGED
@@ -54,17 +54,12 @@ exports.StyledTabItem = common_1.styled(layout_1.Box.as('button'))(function (_a)
54
54
  var theme = _a.theme, spacing = _a.spacing;
55
55
  return (__assign(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), { '& > *:not(style) ~ *:not(style)': {
56
56
  marginLeft: spacing || tokens_1.space.xxs,
57
- }, fontWeight: tokens_1.type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', alignItems: 'center', padding: tokens_1.space.xs + " " + tokens_1.space.s, height: 52, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.licorice300, position: 'relative', borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease' }), common_1.hideMouseFocus), { '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
58
- fill: tokens_1.iconColors.active,
59
- }, '&:hover, &:focus': {
57
+ }, fontWeight: tokens_1.type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', alignItems: 'center', padding: tokens_1.space.xs + " " + tokens_1.space.s, height: 52, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.licorice300, position: 'relative', borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease' }), common_1.hideMouseFocus), { '&:hover, &:focus': {
60
58
  backgroundColor: tokens_1.colors.soap200,
61
59
  color: tokens_1.colors.blackPepper400,
62
60
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
63
61
  fill: tokens_1.iconColors.hover,
64
62
  },
65
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
66
- fill: tokens_1.iconColors.active,
67
- },
68
63
  }, '&:focus': __assign({ outline: "none" }, common_1.focusRing({ inset: 'outer', width: 0, separation: 2 }, theme)), '&:disabled, &[aria-disabled]': {
69
64
  color: tokens_1.colors.licorice100,
70
65
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
package/dist/es6/popup/lib/hooks/useReturnFocus.js CHANGED
@@ -47,7 +47,7 @@ export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model)
47
47
  // track mousedown events to determine if the mouse target is a focusable element. If it is, we
48
48
  // should not return focus
49
49
  var onMouseDown = React.useCallback(function (event) {
50
- if (model.state.stackRef.current && event.target instanceof HTMLElement) {
50
+ if (model.state.stackRef.current && event.target instanceof Element) {
51
51
  if (!PopupStack.contains(model.state.stackRef.current, event.target)) {
52
52
  elementRef.current = event.target;
53
53
  }
@@ -100,7 +100,7 @@ export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model)
100
100
  }
101
101
  var activeElementOutsidePopupStack = document.activeElement !== document.body &&
102
102
  model.state.stackRef.current &&
103
- document.activeElement instanceof HTMLElement &&
103
+ document.activeElement instanceof Element &&
104
104
  !PopupStack.contains(model.state.stackRef.current, document.activeElement);
105
105
  if (activeElementOutsidePopupStack || requiresFocusChangeRef.current) {
106
106
  // We need to change focus _before_ the browser process the default action of picking a new
package/dist/es6/tabs/lib/TabsItem.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,UAAU,EAGV,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAYjE,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa;;;;wDAwFzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
1
+ {"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAIL,UAAU,EAGV,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAYjE,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,aAAa;;;;wDAiFzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
package/dist/es6/tabs/lib/TabsItem.js CHANGED
@@ -32,17 +32,12 @@ export var StyledTabItem = styled(Box.as('button'))(function (_a) {
32
32
  var theme = _a.theme, spacing = _a.spacing;
33
33
  return (__assign(__assign(__assign(__assign({}, type.levels.subtext.large), { '& > *:not(style) ~ *:not(style)': {
34
34
  marginLeft: spacing || space.xxs,
35
- }, fontWeight: type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', alignItems: 'center', padding: space.xs + " " + space.s, height: 52, boxSizing: 'border-box', cursor: 'pointer', color: colors.licorice300, position: 'relative', borderRadius: borderRadius.m + " " + borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease' }), hideMouseFocus), { '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
36
- fill: iconColors.active,
37
- }, '&:hover, &:focus': {
35
+ }, fontWeight: type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', alignItems: 'center', padding: space.xs + " " + space.s, height: 52, boxSizing: 'border-box', cursor: 'pointer', color: colors.licorice300, position: 'relative', borderRadius: borderRadius.m + " " + borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease' }), hideMouseFocus), { '&:hover, &:focus': {
38
36
  backgroundColor: colors.soap200,
39
37
  color: colors.blackPepper400,
40
38
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
41
39
  fill: iconColors.hover,
42
40
  },
43
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
44
- fill: iconColors.active,
45
- },
46
41
  }, '&:focus': __assign({ outline: "none" }, focusRing({ inset: 'outer', width: 0, separation: 2 }, theme)), '&:disabled, &[aria-disabled]': {
47
42
  color: colors.licorice100,
48
43
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "8.6.18",
3
+ "version": "8.6.20",
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": "^8.6.18",
52
+ "@workday/canvas-kit-popup-stack": "^8.6.20",
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",
@@ -67,5 +67,5 @@
67
67
  "@workday/canvas-accent-icons-web": "^3.0.0",
68
68
  "@workday/canvas-applet-icons-web": "^2.0.0"
69
69
  },
70
- "gitHead": "aee7bb9056c1b5e2f55c24b062701a74c37b444e"
70
+ "gitHead": "76e356d904725e1d69f260f0cfcf5df5b67594d1"
71
71
  }
package/popup/lib/hooks/useReturnFocus.tsx CHANGED
@@ -58,8 +58,8 @@ export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
58
58
  // should not return focus
59
59
  const onMouseDown = React.useCallback(
60
60
  (event: MouseEvent) => {
61
- if (model.state.stackRef.current && event.target instanceof HTMLElement) {
62
- if (!PopupStack.contains(model.state.stackRef.current, event.target)) {
61
+ if (model.state.stackRef.current && event.target instanceof Element) {
62
+ if (!PopupStack.contains(model.state.stackRef.current, event.target as HTMLElement)) {
63
63
  elementRef.current = event.target;
64
64
  }
65
65
  }
@@ -119,8 +119,8 @@ export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
119
119
  const activeElementOutsidePopupStack =
120
120
  document.activeElement !== document.body &&
121
121
  model.state.stackRef.current &&
122
- document.activeElement instanceof HTMLElement &&
123
- !PopupStack.contains(model.state.stackRef.current, document.activeElement);
122
+ document.activeElement instanceof Element &&
123
+ !PopupStack.contains(model.state.stackRef.current, document.activeElement as HTMLElement);
124
124
 
125
125
  if (activeElementOutsidePopupStack || requiresFocusChangeRef.current) {
126
126
  // We need to change focus _before_ the browser process the default action of picking a new
package/tabs/lib/TabsItem.tsx CHANGED
@@ -103,19 +103,12 @@ export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItem
103
103
 
104
104
  ...hideMouseFocus,
105
105
 
106
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
107
- fill: iconColors.active,
108
- },
109
-
110
106
  '&:hover, &:focus': {
111
107
  backgroundColor: colors.soap200,
112
108
  color: colors.blackPepper400,
113
109
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
114
110
  fill: iconColors.hover,
115
111
  },
116
- '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
117
- fill: iconColors.active,
118
- },
119
112
  },
120
113
 
121
114
  '&:focus': {