@workday/canvas-kit-react 9.0.1 → 9.0.2

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/collection/lib/useListItemRovingFocus.tsx +14 -8
  2. package/dist/commonjs/collection/lib/useListItemRovingFocus.d.ts.map +1 -1
  3. package/dist/commonjs/collection/lib/useListItemRovingFocus.js +14 -5
  4. package/dist/es6/collection/lib/useListItemRovingFocus.d.ts.map +1 -1
  5. package/dist/es6/collection/lib/useListItemRovingFocus.js +14 -5
  6. package/package.json +3 -3
package/collection/lib/useListItemRovingFocus.tsx CHANGED
@@ -33,28 +33,34 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
33
33
  const stateRef = React.useRef(model.state);
34
34
  stateRef.current = model.state;
35
35
 
36
- const keyDownRef = React.useRef(false);
36
+ const keyElementRef = React.useRef<Element | null>(null);
37
37
  const isRTL = useIsRTL();
38
38
 
39
39
  React.useEffect(() => {
40
- if (keyDownRef.current) {
40
+ if (keyElementRef.current) {
41
41
  const item = model.navigation.getItem(model.state.cursorId, model);
42
42
  if (model.state.isVirtualized) {
43
43
  model.state.UNSTABLE_virtual.scrollToIndex(item.index);
44
44
  }
45
45
 
46
+ const selector = (id?: string) => {
47
+ return document.querySelector<HTMLElement>(`[data-focus-id="${`${id}-${item.id}`}"]`);
48
+ };
49
+
46
50
  // In React concurrent mode, there could be several render attempts before the element we're
47
51
  // looking for could be available in the DOM
48
52
  retryEachFrame(() => {
49
- const element = document.querySelector<HTMLElement>(
50
- `[data-focus-id="${`${model.state.id}-${item.id}`}"]`
51
- );
53
+ // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
54
+ // do not agree on a generated ID
55
+ const clientId = keyElementRef.current?.getAttribute('data-focus-id')?.split('-')[0];
56
+ const element = selector(clientId) || selector(model.state.id);
52
57
 
53
58
  element?.focus();
59
+ if (element) {
60
+ keyElementRef.current = null;
61
+ }
54
62
  return !!element;
55
63
  }, 5); // 5 should be enough, right?!
56
-
57
- keyDownRef.current = false;
58
64
  }
59
65
  // we only want to run this effect if the cursor changes and not any other time
60
66
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -72,7 +78,7 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
72
78
  const handled = keyboardEventToCursorEvents(event, model, isRTL);
73
79
  if (handled) {
74
80
  event.preventDefault();
75
- keyDownRef.current = true;
81
+ keyElementRef.current = event.currentTarget;
76
82
  }
77
83
  },
78
84
  onClick() {
package/dist/commonjs/collection/lib/useListItemRovingFocus.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2CZ,mBAAmB;;;;EAkBzC,CAAC"}
1
+ {"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiDZ,mBAAmB;;;;EAkBzC,CAAC"}
package/dist/commonjs/collection/lib/useListItemRovingFocus.js CHANGED
@@ -34,22 +34,31 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
34
34
  // empty array
35
35
  const stateRef = react_1.default.useRef(model.state);
36
36
  stateRef.current = model.state;
37
- const keyDownRef = react_1.default.useRef(false);
37
+ const keyElementRef = react_1.default.useRef(null);
38
38
  const isRTL = common_1.useIsRTL();
39
39
  react_1.default.useEffect(() => {
40
- if (keyDownRef.current) {
40
+ if (keyElementRef.current) {
41
41
  const item = model.navigation.getItem(model.state.cursorId, model);
42
42
  if (model.state.isVirtualized) {
43
43
  model.state.UNSTABLE_virtual.scrollToIndex(item.index);
44
44
  }
45
+ const selector = (id) => {
46
+ return document.querySelector(`[data-focus-id="${`${id}-${item.id}`}"]`);
47
+ };
45
48
  // In React concurrent mode, there could be several render attempts before the element we're
46
49
  // looking for could be available in the DOM
47
50
  retryEachFrame(() => {
48
- const element = document.querySelector(`[data-focus-id="${`${model.state.id}-${item.id}`}"]`);
51
+ var _a, _b;
52
+ // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
53
+ // do not agree on a generated ID
54
+ const clientId = (_b = (_a = keyElementRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('data-focus-id')) === null || _b === void 0 ? void 0 : _b.split('-')[0];
55
+ const element = selector(clientId) || selector(model.state.id);
49
56
  element === null || element === void 0 ? void 0 : element.focus();
57
+ if (element) {
58
+ keyElementRef.current = null;
59
+ }
50
60
  return !!element;
51
61
  }, 5); // 5 should be enough, right?!
52
- keyDownRef.current = false;
53
62
  }
54
63
  // we only want to run this effect if the cursor changes and not any other time
55
64
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -65,7 +74,7 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
65
74
  const handled = keyUtils_1.keyboardEventToCursorEvents(event, model, isRTL);
66
75
  if (handled) {
67
76
  event.preventDefault();
68
- keyDownRef.current = true;
77
+ keyElementRef.current = event.currentTarget;
69
78
  }
70
79
  },
71
80
  onClick() {
package/dist/es6/collection/lib/useListItemRovingFocus.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2CZ,mBAAmB;;;;EAkBzC,CAAC"}
1
+ {"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiDZ,mBAAmB;;;;EAkBzC,CAAC"}
package/dist/es6/collection/lib/useListItemRovingFocus.js CHANGED
@@ -28,22 +28,31 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)((m
28
28
  // empty array
29
29
  const stateRef = React.useRef(model.state);
30
30
  stateRef.current = model.state;
31
- const keyDownRef = React.useRef(false);
31
+ const keyElementRef = React.useRef(null);
32
32
  const isRTL = useIsRTL();
33
33
  React.useEffect(() => {
34
- if (keyDownRef.current) {
34
+ if (keyElementRef.current) {
35
35
  const item = model.navigation.getItem(model.state.cursorId, model);
36
36
  if (model.state.isVirtualized) {
37
37
  model.state.UNSTABLE_virtual.scrollToIndex(item.index);
38
38
  }
39
+ const selector = (id) => {
40
+ return document.querySelector(`[data-focus-id="${`${id}-${item.id}`}"]`);
41
+ };
39
42
  // In React concurrent mode, there could be several render attempts before the element we're
40
43
  // looking for could be available in the DOM
41
44
  retryEachFrame(() => {
42
- const element = document.querySelector(`[data-focus-id="${`${model.state.id}-${item.id}`}"]`);
45
+ var _a, _b;
46
+ // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
47
+ // do not agree on a generated ID
48
+ const clientId = (_b = (_a = keyElementRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('data-focus-id')) === null || _b === void 0 ? void 0 : _b.split('-')[0];
49
+ const element = selector(clientId) || selector(model.state.id);
43
50
  element === null || element === void 0 ? void 0 : element.focus();
51
+ if (element) {
52
+ keyElementRef.current = null;
53
+ }
44
54
  return !!element;
45
55
  }, 5); // 5 should be enough, right?!
46
- keyDownRef.current = false;
47
56
  }
48
57
  // we only want to run this effect if the cursor changes and not any other time
49
58
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -59,7 +68,7 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)((m
59
68
  const handled = keyboardEventToCursorEvents(event, model, isRTL);
60
69
  if (handled) {
61
70
  event.preventDefault();
62
- keyDownRef.current = true;
71
+ keyElementRef.current = event.currentTarget;
63
72
  }
64
73
  },
65
74
  onClick() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "9.0.1",
3
+ "version": "9.0.2",
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.0.1",
52
+ "@workday/canvas-kit-popup-stack": "^9.0.2",
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": "dc49ff11c7d7597d8362cbf4fb796d9d143468b0"
69
+ "gitHead": "9e43c415e80c1586df4b5b8cdd81c8cdbfc4171d"
70
70
  }