@workday/canvas-kit-react 7.4.0-next.2 → 7.4.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 (6) hide show
  1. package/dist/commonjs/popup/lib/hooks/useReturnFocus.d.ts.map +1 -1
  2. package/dist/commonjs/popup/lib/hooks/useReturnFocus.js +18 -27
  3. package/dist/es6/popup/lib/hooks/useReturnFocus.d.ts.map +1 -1
  4. package/dist/es6/popup/lib/hooks/useReturnFocus.js +18 -27
  5. package/package.json +3 -3
  6. package/popup/lib/hooks/useReturnFocus.tsx +22 -30
package/dist/commonjs/popup/lib/hooks/useReturnFocus.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAyGzB,CAAC"}
1
+ {"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiC1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAgGzB,CAAC"}
package/dist/commonjs/popup/lib/hooks/useReturnFocus.js CHANGED
@@ -7,6 +7,7 @@ exports.useReturnFocus = void 0;
7
7
  var react_1 = __importDefault(require("react"));
8
8
  var common_1 = require("@workday/canvas-kit-react/common");
9
9
  var usePopupModel_1 = require("./usePopupModel");
10
+ var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
10
11
  function getScrollParent(element) {
11
12
  if (element === document.body || !element.parentElement) {
12
13
  return element;
@@ -49,17 +50,15 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
49
50
  requiresFocusChangeRef.current = true;
50
51
  }
51
52
  }, []);
52
- var onKeyUp = react_1.default.useCallback(function (event) {
53
- requiresFocusChangeRef.current = false;
54
- }, []);
55
53
  // track mousedown events to determine if the mouse target is a focusable element. If it is, we
56
54
  // should not return focus
57
55
  var onMouseDown = react_1.default.useCallback(function (event) {
58
- elementRef.current = event.target;
59
- }, []);
60
- var onMouseUp = react_1.default.useCallback(function () {
61
- elementRef.current = null;
62
- }, []);
56
+ if (model.state.stackRef.current && event.target instanceof HTMLElement) {
57
+ if (!canvas_kit_popup_stack_1.PopupStack.contains(model.state.stackRef.current, event.target)) {
58
+ elementRef.current = event.target;
59
+ }
60
+ }
61
+ }, [model.state.stackRef]);
63
62
  // We use `useLayoutEffect` because the callback will be called _before_ the browser changes
64
63
  // focus. This allows the browser to change focus as normal. For example, if the popup closes
65
64
  // because the user hits the tab key when focused on the last focusable element,
@@ -80,16 +79,13 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
80
79
  return;
81
80
  }
82
81
  // capture the element here. The refs will be null by the time the cleanup function is called
83
- var element = (model.state.returnFocusRef || model.state.targetRef).current;
82
+ var element = (model.state.returnFocusRef || model.state.targetRef)
83
+ .current;
84
84
  document.addEventListener('mousedown', onMouseDown, true);
85
- document.addEventListener('mouseup', onMouseUp, true);
86
85
  document.addEventListener('keydown', onKeyDown, true);
87
- document.addEventListener('keyup', onKeyUp, true);
88
86
  return function () {
89
87
  document.removeEventListener('mousedown', onMouseDown, true);
90
- document.removeEventListener('mouseup', onMouseUp, true);
91
88
  document.removeEventListener('keydown', onKeyDown, true);
92
- document.removeEventListener('keyup', onKeyUp, true);
93
89
  if (!element) {
94
90
  return;
95
91
  }
@@ -98,11 +94,14 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
98
94
  var elementRect = element.getBoundingClientRect();
99
95
  // Don't change focus if user focused on a different element like a `input` or the target
100
96
  // element isn't on at least halfway rendered on the screen.
101
- if ((elementRef.current && getFocusableElement(elementRef.current)) ||
102
- elementRect.top + elementRect.height / 2 < scrollParentRect.top ||
103
- elementRect.bottom - elementRect.height / 2 > scrollParentRect.bottom ||
104
- elementRect.left + elementRect.width / 2 < scrollParentRect.left ||
105
- elementRect.right - elementRect.width / 2 > scrollParentRect.right) {
97
+ if ((elementRef.current && getFocusableElement(elementRef.current)) || // did the user click on a focusable element?
98
+ elementRect.top + elementRect.height / 2 < scrollParentRect.top || // is the top half of the target element visible?
99
+ elementRect.bottom - elementRect.height / 2 > scrollParentRect.bottom || // is the bottom half of the target element visible?
100
+ elementRect.left + elementRect.width / 2 < scrollParentRect.left || // is the left half of the target element visible?
101
+ elementRect.right - elementRect.width / 2 > scrollParentRect.right // is the right half of the target element visible?
102
+ ) {
103
+ // reset the focus element and bail early
104
+ elementRef.current = null;
106
105
  return;
107
106
  }
108
107
  if (requiresFocusChangeRef.current) {
@@ -120,14 +119,6 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
120
119
  }
121
120
  elementRef.current = null;
122
121
  };
123
- }, [
124
- model.state.returnFocusRef,
125
- model.state.targetRef,
126
- visible,
127
- onMouseDown,
128
- onMouseUp,
129
- onKeyDown,
130
- onKeyUp,
131
- ]);
122
+ }, [model.state.returnFocusRef, model.state.targetRef, visible, onMouseDown, onKeyDown]);
132
123
  return {};
133
124
  });
package/dist/es6/popup/lib/hooks/useReturnFocus.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAyGzB,CAAC"}
1
+ {"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiC1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAgGzB,CAAC"}
package/dist/es6/popup/lib/hooks/useReturnFocus.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import { changeFocus, createElemPropsHook, isFocusable } from '@workday/canvas-kit-react/common';
3
3
  import { usePopupModel } from './usePopupModel';
4
+ import { PopupStack } from '@workday/canvas-kit-popup-stack';
4
5
  function getScrollParent(element) {
5
6
  if (element === document.body || !element.parentElement) {
6
7
  return element;
@@ -43,17 +44,15 @@ export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model)
43
44
  requiresFocusChangeRef.current = true;
44
45
  }
45
46
  }, []);
46
- var onKeyUp = React.useCallback(function (event) {
47
- requiresFocusChangeRef.current = false;
48
- }, []);
49
47
  // track mousedown events to determine if the mouse target is a focusable element. If it is, we
50
48
  // should not return focus
51
49
  var onMouseDown = React.useCallback(function (event) {
52
- elementRef.current = event.target;
53
- }, []);
54
- var onMouseUp = React.useCallback(function () {
55
- elementRef.current = null;
56
- }, []);
50
+ if (model.state.stackRef.current && event.target instanceof HTMLElement) {
51
+ if (!PopupStack.contains(model.state.stackRef.current, event.target)) {
52
+ elementRef.current = event.target;
53
+ }
54
+ }
55
+ }, [model.state.stackRef]);
57
56
  // We use `useLayoutEffect` because the callback will be called _before_ the browser changes
58
57
  // focus. This allows the browser to change focus as normal. For example, if the popup closes
59
58
  // because the user hits the tab key when focused on the last focusable element,
@@ -74,16 +73,13 @@ export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model)
74
73
  return;
75
74
  }
76
75
  // capture the element here. The refs will be null by the time the cleanup function is called
77
- var element = (model.state.returnFocusRef || model.state.targetRef).current;
76
+ var element = (model.state.returnFocusRef || model.state.targetRef)
77
+ .current;
78
78
  document.addEventListener('mousedown', onMouseDown, true);
79
- document.addEventListener('mouseup', onMouseUp, true);
80
79
  document.addEventListener('keydown', onKeyDown, true);
81
- document.addEventListener('keyup', onKeyUp, true);
82
80
  return function () {
83
81
  document.removeEventListener('mousedown', onMouseDown, true);
84
- document.removeEventListener('mouseup', onMouseUp, true);
85
82
  document.removeEventListener('keydown', onKeyDown, true);
86
- document.removeEventListener('keyup', onKeyUp, true);
87
83
  if (!element) {
88
84
  return;
89
85
  }
@@ -92,11 +88,14 @@ export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model)
92
88
  var elementRect = element.getBoundingClientRect();
93
89
  // Don't change focus if user focused on a different element like a `input` or the target
94
90
  // element isn't on at least halfway rendered on the screen.
95
- if ((elementRef.current && getFocusableElement(elementRef.current)) ||
96
- elementRect.top + elementRect.height / 2 < scrollParentRect.top ||
97
- elementRect.bottom - elementRect.height / 2 > scrollParentRect.bottom ||
98
- elementRect.left + elementRect.width / 2 < scrollParentRect.left ||
99
- elementRect.right - elementRect.width / 2 > scrollParentRect.right) {
91
+ if ((elementRef.current && getFocusableElement(elementRef.current)) || // did the user click on a focusable element?
92
+ elementRect.top + elementRect.height / 2 < scrollParentRect.top || // is the top half of the target element visible?
93
+ elementRect.bottom - elementRect.height / 2 > scrollParentRect.bottom || // is the bottom half of the target element visible?
94
+ elementRect.left + elementRect.width / 2 < scrollParentRect.left || // is the left half of the target element visible?
95
+ elementRect.right - elementRect.width / 2 > scrollParentRect.right // is the right half of the target element visible?
96
+ ) {
97
+ // reset the focus element and bail early
98
+ elementRef.current = null;
100
99
  return;
101
100
  }
102
101
  if (requiresFocusChangeRef.current) {
@@ -114,14 +113,6 @@ export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model)
114
113
  }
115
114
  elementRef.current = null;
116
115
  };
117
- }, [
118
- model.state.returnFocusRef,
119
- model.state.targetRef,
120
- visible,
121
- onMouseDown,
122
- onMouseUp,
123
- onKeyDown,
124
- onKeyUp,
125
- ]);
116
+ }, [model.state.returnFocusRef, model.state.targetRef, visible, onMouseDown, onKeyDown]);
126
117
  return {};
127
118
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "7.4.0-next.2+8fa218c6",
3
+ "version": "7.4.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.4.0-next.2+8fa218c6",
52
+ "@workday/canvas-kit-popup-stack": "^7.4.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": "8fa218c6bce7dce3e7a4723802cac972f7d928cc"
71
+ "gitHead": "e7ec941a539167de0027486cf9a7c03f11c9b0b1"
72
72
  }
package/popup/lib/hooks/useReturnFocus.tsx CHANGED
@@ -3,6 +3,7 @@ import React from 'react';
3
3
  import {changeFocus, createElemPropsHook, isFocusable} from '@workday/canvas-kit-react/common';
4
4
 
5
5
  import {usePopupModel} from './usePopupModel';
6
+ import {PopupStack} from '@workday/canvas-kit-popup-stack';
6
7
 
7
8
  function getScrollParent(element: HTMLElement): HTMLElement {
8
9
  if (element === document.body || !element.parentElement) {
@@ -53,19 +54,18 @@ export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
53
54
  }
54
55
  }, []);
55
56
 
56
- const onKeyUp = React.useCallback((event: KeyboardEvent) => {
57
- requiresFocusChangeRef.current = false;
58
- }, []);
59
-
60
57
  // track mousedown events to determine if the mouse target is a focusable element. If it is, we
61
58
  // should not return focus
62
- const onMouseDown = React.useCallback((event: MouseEvent) => {
63
- elementRef.current = event.target as Element;
64
- }, []);
65
-
66
- const onMouseUp = React.useCallback(() => {
67
- elementRef.current = null;
68
- }, []);
59
+ const onMouseDown = React.useCallback(
60
+ (event: MouseEvent) => {
61
+ if (model.state.stackRef.current && event.target instanceof HTMLElement) {
62
+ if (!PopupStack.contains(model.state.stackRef.current, event.target)) {
63
+ elementRef.current = event.target;
64
+ }
65
+ }
66
+ },
67
+ [model.state.stackRef]
68
+ );
69
69
 
70
70
  // We use `useLayoutEffect` because the callback will be called _before_ the browser changes
71
71
  // focus. This allows the browser to change focus as normal. For example, if the popup closes
@@ -87,17 +87,14 @@ export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
87
87
  return;
88
88
  }
89
89
  // capture the element here. The refs will be null by the time the cleanup function is called
90
- const element = (model.state.returnFocusRef || model.state.targetRef).current as HTMLElement | null;
90
+ const element = (model.state.returnFocusRef || model.state.targetRef)
91
+ .current as HTMLElement | null;
91
92
  document.addEventListener('mousedown', onMouseDown, true);
92
- document.addEventListener('mouseup', onMouseUp, true);
93
93
  document.addEventListener('keydown', onKeyDown, true);
94
- document.addEventListener('keyup', onKeyUp, true);
95
94
 
96
95
  return () => {
97
96
  document.removeEventListener('mousedown', onMouseDown, true);
98
- document.removeEventListener('mouseup', onMouseUp, true);
99
97
  document.removeEventListener('keydown', onKeyDown, true);
100
- document.removeEventListener('keyup', onKeyUp, true);
101
98
  if (!element) {
102
99
  return;
103
100
  }
@@ -108,12 +105,14 @@ export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
108
105
  // Don't change focus if user focused on a different element like a `input` or the target
109
106
  // element isn't on at least halfway rendered on the screen.
110
107
  if (
111
- (elementRef.current && getFocusableElement(elementRef.current)) ||
112
- elementRect.top + elementRect.height / 2 < scrollParentRect.top ||
113
- elementRect.bottom - elementRect.height / 2 > scrollParentRect.bottom ||
114
- elementRect.left + elementRect.width / 2 < scrollParentRect.left ||
115
- elementRect.right - elementRect.width / 2 > scrollParentRect.right
108
+ (elementRef.current && getFocusableElement(elementRef.current)) || // did the user click on a focusable element?
109
+ elementRect.top + elementRect.height / 2 < scrollParentRect.top || // is the top half of the target element visible?
110
+ elementRect.bottom - elementRect.height / 2 > scrollParentRect.bottom || // is the bottom half of the target element visible?
111
+ elementRect.left + elementRect.width / 2 < scrollParentRect.left || // is the left half of the target element visible?
112
+ elementRect.right - elementRect.width / 2 > scrollParentRect.right // is the right half of the target element visible?
116
113
  ) {
114
+ // reset the focus element and bail early
115
+ elementRef.current = null;
117
116
  return;
118
117
  }
119
118
 
@@ -129,17 +128,10 @@ export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
129
128
  changeFocus(element);
130
129
  });
131
130
  }
131
+
132
132
  elementRef.current = null;
133
133
  };
134
- }, [
135
- model.state.returnFocusRef,
136
- model.state.targetRef,
137
- visible,
138
- onMouseDown,
139
- onMouseUp,
140
- onKeyDown,
141
- onKeyUp,
142
- ]);
134
+ }, [model.state.returnFocusRef, model.state.targetRef, visible, onMouseDown, onKeyDown]);
143
135
 
144
136
  return {};
145
137
  });