@workday/canvas-kit-react 8.6.7 → 8.6.9

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/collection/lib/useCursorListModel.tsx +3 -3
  2. package/collection/lib/useListItemRovingFocus.tsx +13 -9
  3. package/dist/commonjs/collection/lib/useCursorListModel.js +3 -3
  4. package/dist/commonjs/collection/lib/useListItemRovingFocus.d.ts.map +1 -1
  5. package/dist/commonjs/collection/lib/useListItemRovingFocus.js +13 -8
  6. package/dist/es6/collection/lib/useCursorListModel.js +3 -3
  7. package/dist/es6/collection/lib/useListItemRovingFocus.d.ts.map +1 -1
  8. package/dist/es6/collection/lib/useListItemRovingFocus.js +13 -8
  9. package/package.json +3 -3
package/collection/lib/useCursorListModel.tsx CHANGED
@@ -315,12 +315,12 @@ export const useCursorListModel = createModelHook({
315
315
  },
316
316
  requiredConfig: useBaseListModel.requiredConfig,
317
317
  })(config => {
318
- const [cursorId, setCursorId] = React.useState(config.initialCursorId);
319
- const columnCount = config.columnCount || 0;
320
318
  const list = useBaseListModel(config);
321
- const initialCurrentRef = React.useRef(
319
+ const [cursorId, setCursorId] = React.useState(
322
320
  config.initialCursorId || (config.items?.length ? getId(list.state.items![0]) : '')
323
321
  );
322
+ const columnCount = config.columnCount || 0;
323
+ const initialCurrentRef = React.useRef(cursorId);
324
324
  const navigation = config.navigation;
325
325
 
326
326
  const state = {
package/collection/lib/useListItemRovingFocus.tsx CHANGED
@@ -81,22 +81,26 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
81
81
  const stateRef = React.useRef(state);
82
82
  stateRef.current = state;
83
83
 
84
- const keyDownRef = React.useRef(false);
84
+ const keyElementRef = React.useRef<Element | null>(null);
85
85
  const isRTL = useIsRTL();
86
86
 
87
87
  React.useEffect(() => {
88
- if (keyDownRef.current) {
88
+ if (keyElementRef.current) {
89
89
  const item = navigation.getItem(state.cursorId, {state});
90
90
  if (state.isVirtualized) {
91
91
  state.UNSTABLE_virtual.scrollToIndex(item.index);
92
92
  }
93
93
  requestAnimationFrame(() => {
94
- document
95
- .querySelector<HTMLElement>(`[data-focus-id="${`${state.id}-${item.id}`}"]`)
96
- ?.focus();
97
- });
94
+ // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
95
+ // do not agree on a generated ID
96
+ const clientId = keyElementRef.current?.getAttribute('data-focus-id')?.split('-')[0];
97
+
98
+ [clientId, state.id].forEach(id => {
99
+ document.querySelector<HTMLElement>(`[data-focus-id="${`${id}-${item.id}`}"]`)?.focus();
100
+ });
98
101
 
99
- keyDownRef.current = false;
102
+ keyElementRef.current = null;
103
+ });
100
104
  }
101
105
  // we only want to run this effect if the cursor changes and not any other time
102
106
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -109,7 +113,7 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
109
113
  for (const key in ctrlKeyMap) {
110
114
  if (hasOwnKey(ctrlKeyMap, key)) {
111
115
  if (event.key === key) {
112
- keyDownRef.current = true;
116
+ keyElementRef.current = event.currentTarget;
113
117
  events[ctrlKeyMap[key]]?.();
114
118
  event.preventDefault();
115
119
  return;
@@ -123,7 +127,7 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
123
127
  if (isRTL ? event.key === rightToLeftMap[key] : event.key === key) {
124
128
  const eventName =
125
129
  state.columnCount > 0 ? gridKeyMap[key] : orientationKeyMap[state.orientation][key];
126
- keyDownRef.current = true;
130
+ keyElementRef.current = event.currentTarget;
127
131
  if (events[eventName]) {
128
132
  events[eventName]?.();
129
133
  event.preventDefault();
package/dist/commonjs/collection/lib/useCursorListModel.js CHANGED
@@ -290,10 +290,10 @@ exports.useCursorListModel = common_1.createModelHook({
290
290
  requiredConfig: useBaseListModel_1.useBaseListModel.requiredConfig,
291
291
  })(function (config) {
292
292
  var _a;
293
- var _b = react_1.default.useState(config.initialCursorId), cursorId = _b[0], setCursorId = _b[1];
294
- var columnCount = config.columnCount || 0;
295
293
  var list = useBaseListModel_1.useBaseListModel(config);
296
- var initialCurrentRef = react_1.default.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? useBaseListModel_1.defaultGetId(list.state.items[0]) : ''));
294
+ var _b = react_1.default.useState(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? useBaseListModel_1.defaultGetId(list.state.items[0]) : '')), cursorId = _b[0], setCursorId = _b[1];
295
+ var columnCount = config.columnCount || 0;
296
+ var initialCurrentRef = react_1.default.useRef(cursorId);
297
297
  var navigation = config.navigation;
298
298
  var state = __assign(__assign({}, list.state), {
299
299
  /** The id of the list item the cursor is pointing to */
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;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}
1
+ {"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAsCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}
package/dist/commonjs/collection/lib/useListItemRovingFocus.js CHANGED
@@ -82,20 +82,25 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
82
82
  // empty array
83
83
  var stateRef = react_1.default.useRef(state);
84
84
  stateRef.current = state;
85
- var keyDownRef = react_1.default.useRef(false);
85
+ var keyElementRef = react_1.default.useRef(null);
86
86
  var isRTL = common_1.useIsRTL();
87
87
  react_1.default.useEffect(function () {
88
- if (keyDownRef.current) {
88
+ if (keyElementRef.current) {
89
89
  var item_1 = navigation.getItem(state.cursorId, { state: state });
90
90
  if (state.isVirtualized) {
91
91
  state.UNSTABLE_virtual.scrollToIndex(item_1.index);
92
92
  }
93
93
  requestAnimationFrame(function () {
94
- var _a;
95
- (_a = document
96
- .querySelector("[data-focus-id=\"" + (state.id + "-" + item_1.id) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
94
+ var _a, _b;
95
+ // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
96
+ // do not agree on a generated ID
97
+ var 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];
98
+ [clientId, state.id].forEach(function (id) {
99
+ var _a;
100
+ (_a = document.querySelector("[data-focus-id=\"" + (id + "-" + item_1.id) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
101
+ });
102
+ keyElementRef.current = null;
97
103
  });
98
- keyDownRef.current = false;
99
104
  }
100
105
  // we only want to run this effect if the cursor changes and not any other time
101
106
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -108,7 +113,7 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
108
113
  for (var key in ctrlKeyMap) {
109
114
  if (hasOwnKey(ctrlKeyMap, key)) {
110
115
  if (event.key === key) {
111
- keyDownRef.current = true;
116
+ keyElementRef.current = event.currentTarget;
112
117
  (_a = events[ctrlKeyMap[key]]) === null || _a === void 0 ? void 0 : _a.call(events);
113
118
  event.preventDefault();
114
119
  return;
@@ -121,7 +126,7 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
121
126
  var _a;
122
127
  if (isRTL ? event.key === rightToLeftMap[key] : event.key === key) {
123
128
  var eventName = state.columnCount > 0 ? gridKeyMap[key] : exports.orientationKeyMap[state.orientation][key];
124
- keyDownRef.current = true;
129
+ keyElementRef.current = event.currentTarget;
125
130
  if (events[eventName]) {
126
131
  (_a = events[eventName]) === null || _a === void 0 ? void 0 : _a.call(events);
127
132
  event.preventDefault();
package/dist/es6/collection/lib/useCursorListModel.js CHANGED
@@ -275,10 +275,10 @@ export var useCursorListModel = createModelHook({
275
275
  requiredConfig: useBaseListModel.requiredConfig,
276
276
  })(function (config) {
277
277
  var _a;
278
- var _b = React.useState(config.initialCursorId), cursorId = _b[0], setCursorId = _b[1];
279
- var columnCount = config.columnCount || 0;
280
278
  var list = useBaseListModel(config);
281
- var initialCurrentRef = React.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? getId(list.state.items[0]) : ''));
279
+ var _b = React.useState(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? getId(list.state.items[0]) : '')), cursorId = _b[0], setCursorId = _b[1];
280
+ var columnCount = config.columnCount || 0;
281
+ var initialCurrentRef = React.useRef(cursorId);
282
282
  var navigation = config.navigation;
283
283
  var state = __assign(__assign({}, list.state), {
284
284
  /** The id of the list item the cursor is pointing to */
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;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}
1
+ {"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;CAqBpB,CAAC;AA+BX;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAsCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}
package/dist/es6/collection/lib/useListItemRovingFocus.js CHANGED
@@ -76,20 +76,25 @@ export var useListItemRovingFocus = createElemPropsHook(useCursorListModel)(func
76
76
  // empty array
77
77
  var stateRef = React.useRef(state);
78
78
  stateRef.current = state;
79
- var keyDownRef = React.useRef(false);
79
+ var keyElementRef = React.useRef(null);
80
80
  var isRTL = useIsRTL();
81
81
  React.useEffect(function () {
82
- if (keyDownRef.current) {
82
+ if (keyElementRef.current) {
83
83
  var item_1 = navigation.getItem(state.cursorId, { state: state });
84
84
  if (state.isVirtualized) {
85
85
  state.UNSTABLE_virtual.scrollToIndex(item_1.index);
86
86
  }
87
87
  requestAnimationFrame(function () {
88
- var _a;
89
- (_a = document
90
- .querySelector("[data-focus-id=\"" + (state.id + "-" + item_1.id) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
88
+ var _a, _b;
89
+ // Attempt to extract the ID from the DOM element. This fixes issues where the server and client
90
+ // do not agree on a generated ID
91
+ var 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];
92
+ [clientId, state.id].forEach(function (id) {
93
+ var _a;
94
+ (_a = document.querySelector("[data-focus-id=\"" + (id + "-" + item_1.id) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
95
+ });
96
+ keyElementRef.current = null;
91
97
  });
92
- keyDownRef.current = false;
93
98
  }
94
99
  // we only want to run this effect if the cursor changes and not any other time
95
100
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -102,7 +107,7 @@ export var useListItemRovingFocus = createElemPropsHook(useCursorListModel)(func
102
107
  for (var key in ctrlKeyMap) {
103
108
  if (hasOwnKey(ctrlKeyMap, key)) {
104
109
  if (event.key === key) {
105
- keyDownRef.current = true;
110
+ keyElementRef.current = event.currentTarget;
106
111
  (_a = events[ctrlKeyMap[key]]) === null || _a === void 0 ? void 0 : _a.call(events);
107
112
  event.preventDefault();
108
113
  return;
@@ -115,7 +120,7 @@ export var useListItemRovingFocus = createElemPropsHook(useCursorListModel)(func
115
120
  var _a;
116
121
  if (isRTL ? event.key === rightToLeftMap[key] : event.key === key) {
117
122
  var eventName = state.columnCount > 0 ? gridKeyMap[key] : orientationKeyMap[state.orientation][key];
118
- keyDownRef.current = true;
123
+ keyElementRef.current = event.currentTarget;
119
124
  if (events[eventName]) {
120
125
  (_a = events[eventName]) === null || _a === void 0 ? void 0 : _a.call(events);
121
126
  event.preventDefault();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "8.6.7",
3
+ "version": "8.6.9",
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.7",
52
+ "@workday/canvas-kit-popup-stack": "^8.6.9",
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": "cae5b94c10ae3ad205cf7d298e1c574b30f304a1"
70
+ "gitHead": "b91a644ee5be8cd16734fbd9e37ef66f18092be3"
71
71
  }