@workday/canvas-kit-react 9.1.22 → 9.1.23

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 +14 -5
  3. package/dist/es6/popup/lib/hooks/useReturnFocus.d.ts.map +1 -1
  4. package/dist/es6/popup/lib/hooks/useReturnFocus.js +14 -5
  5. package/package.json +3 -3
  6. package/popup/lib/hooks/useReturnFocus.tsx +20 -5
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;AAiC1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;MA6GzB,CAAC"}
1
+ {"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkD1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;MA2GzB,CAAC"}
package/dist/commonjs/popup/lib/hooks/useReturnFocus.js CHANGED
@@ -30,6 +30,17 @@ function getFocusableElement(element) {
30
30
  }
31
31
  return getFocusableElement(element.parentElement);
32
32
  }
33
+ /**
34
+ * Is the element outside of bounds. An element is outside of bounds if it is less than half visible.
35
+ */
36
+ function isElementOutOfBounds(element, boundingRect) {
37
+ const elementRect = element.getBoundingClientRect();
38
+ return (elementRect.top + elementRect.height / 2 < boundingRect.top || // is the top half of the target element visible?
39
+ elementRect.bottom - elementRect.height / 2 > boundingRect.bottom || // is the bottom half of the target element visible?
40
+ elementRect.left + elementRect.width / 2 < boundingRect.left || // is the left half of the target element visible?
41
+ elementRect.right - elementRect.width / 2 > boundingRect.right // is the right half of the target element visible?
42
+ );
43
+ }
33
44
  /**
34
45
  * Returns focus to the target element when the popup is hidden. This works well with
35
46
  * {@link useInitialFocus}. This should be used with {@link useFocusRedirect} or
@@ -91,14 +102,12 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
91
102
  }
92
103
  const scrollParent = getScrollParent(element);
93
104
  const scrollParentRect = scrollParent.getBoundingClientRect();
94
- const elementRect = element.getBoundingClientRect();
105
+ const viewportRect = { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
95
106
  // Don't change focus if user focused on a different element like a `input` or the target
96
107
  // element isn't on at least halfway rendered on the screen.
97
108
  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?
109
+ isElementOutOfBounds(element, scrollParentRect) || // Is the element not visible in its scroll parent?
110
+ isElementOutOfBounds(element, viewportRect) // Is the element not visible in the viewport?
102
111
  ) {
103
112
  // reset the focus element and bail early
104
113
  elementRef.current = null;
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;AAiC1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;MA6GzB,CAAC"}
1
+ {"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkD1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;MA2GzB,CAAC"}
package/dist/es6/popup/lib/hooks/useReturnFocus.js CHANGED
@@ -24,6 +24,17 @@ function getFocusableElement(element) {
24
24
  }
25
25
  return getFocusableElement(element.parentElement);
26
26
  }
27
+ /**
28
+ * Is the element outside of bounds. An element is outside of bounds if it is less than half visible.
29
+ */
30
+ function isElementOutOfBounds(element, boundingRect) {
31
+ const elementRect = element.getBoundingClientRect();
32
+ return (elementRect.top + elementRect.height / 2 < boundingRect.top || // is the top half of the target element visible?
33
+ elementRect.bottom - elementRect.height / 2 > boundingRect.bottom || // is the bottom half of the target element visible?
34
+ elementRect.left + elementRect.width / 2 < boundingRect.left || // is the left half of the target element visible?
35
+ elementRect.right - elementRect.width / 2 > boundingRect.right // is the right half of the target element visible?
36
+ );
37
+ }
27
38
  /**
28
39
  * Returns focus to the target element when the popup is hidden. This works well with
29
40
  * {@link useInitialFocus}. This should be used with {@link useFocusRedirect} or
@@ -85,14 +96,12 @@ export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
85
96
  }
86
97
  const scrollParent = getScrollParent(element);
87
98
  const scrollParentRect = scrollParent.getBoundingClientRect();
88
- const elementRect = element.getBoundingClientRect();
99
+ const viewportRect = { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight };
89
100
  // Don't change focus if user focused on a different element like a `input` or the target
90
101
  // element isn't on at least halfway rendered on the screen.
91
102
  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?
103
+ isElementOutOfBounds(element, scrollParentRect) || // Is the element not visible in its scroll parent?
104
+ isElementOutOfBounds(element, viewportRect) // Is the element not visible in the viewport?
96
105
  ) {
97
106
  // reset the focus element and bail early
98
107
  elementRef.current = null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "9.1.22",
3
+ "version": "9.1.23",
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": "^9.1.22",
52
+ "@workday/canvas-kit-popup-stack": "^9.1.23",
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",
@@ -66,5 +66,5 @@
66
66
  "@workday/canvas-accent-icons-web": "^3.0.0",
67
67
  "@workday/canvas-applet-icons-web": "^2.0.0"
68
68
  },
69
- "gitHead": "b00fd1c6dd6d3c2653d4ec7e518df12427557562"
69
+ "gitHead": "edea2541425f275aeb8ada02b4c84eddf3a5b96a"
70
70
  }
package/popup/lib/hooks/useReturnFocus.tsx CHANGED
@@ -31,6 +31,23 @@ function getFocusableElement(element: Element | null): Element | null {
31
31
  return getFocusableElement(element.parentElement);
32
32
  }
33
33
 
34
+ /**
35
+ * Is the element outside of bounds. An element is outside of bounds if it is less than half visible.
36
+ */
37
+ function isElementOutOfBounds(
38
+ element: HTMLElement,
39
+ boundingRect: {top: number; bottom: number; left: number; right: number}
40
+ ) {
41
+ const elementRect = element.getBoundingClientRect();
42
+
43
+ return (
44
+ elementRect.top + elementRect.height / 2 < boundingRect.top || // is the top half of the target element visible?
45
+ elementRect.bottom - elementRect.height / 2 > boundingRect.bottom || // is the bottom half of the target element visible?
46
+ elementRect.left + elementRect.width / 2 < boundingRect.left || // is the left half of the target element visible?
47
+ elementRect.right - elementRect.width / 2 > boundingRect.right // is the right half of the target element visible?
48
+ );
49
+ }
50
+
34
51
  /**
35
52
  * Returns focus to the target element when the popup is hidden. This works well with
36
53
  * {@link useInitialFocus}. This should be used with {@link useFocusRedirect} or
@@ -100,16 +117,14 @@ export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
100
117
  }
101
118
  const scrollParent = getScrollParent(element);
102
119
  const scrollParentRect = scrollParent.getBoundingClientRect();
103
- const elementRect = element.getBoundingClientRect();
120
+ const viewportRect = {left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight};
104
121
 
105
122
  // Don't change focus if user focused on a different element like a `input` or the target
106
123
  // element isn't on at least halfway rendered on the screen.
107
124
  if (
108
125
  (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?
126
+ isElementOutOfBounds(element, scrollParentRect) || // Is the element not visible in its scroll parent?
127
+ isElementOutOfBounds(element, viewportRect) // Is the element not visible in the viewport?
113
128
  ) {
114
129
  // reset the focus element and bail early
115
130
  elementRef.current = null;