@workday/canvas-kit-react 7.4.8 → 7.4.10

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.
@@ -312,7 +312,7 @@ export const useCursorListModel = createModelHook({
312
312
  const columnCount = config.columnCount || 0;
313
313
  const list = useBaseListModel(config);
314
314
  const initialCurrentRef = React.useRef(
315
- config.initialCursorId || (config.items?.length ? getId(config.items![0]) : '')
315
+ config.initialCursorId || (config.items?.length ? getId(list.state.items![0]) : '')
316
316
  );
317
317
  const navigation = config.navigation;
318
318
 
@@ -62,11 +62,10 @@ const hasOwnKey = <T extends object>(obj: T, key: any): key is keyof T => obj.ha
62
62
  * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
63
63
  */
64
64
  export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
65
- ({state, events, getId, navigation}, ref, elemProps: {'data-id'?: string} = {}) => {
65
+ ({state, events, navigation}, ref, elemProps: {'data-id'?: string} = {}) => {
66
66
  // Tracks when this element has focus. If this item is removed while still focused, we have to
67
67
  // inform the model to move the cursor to the next item.
68
68
  const focusRef = React.useRef(false);
69
- const getIdRef = React.useRef(getId);
70
69
 
71
70
  // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
72
71
  // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
@@ -85,9 +84,7 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
85
84
  }
86
85
  requestAnimationFrame(() => {
87
86
  document
88
- .querySelector<HTMLElement>(
89
- `[data-focus-id="${`${state.id}-${getIdRef.current(item)}`}"]`
90
- )
87
+ .querySelector<HTMLElement>(`[data-focus-id="${`${state.id}-${item.id}`}"]`)
91
88
  ?.focus();
92
89
  });
93
90
 
@@ -293,7 +293,7 @@ exports.useCursorListModel = common_1.createModelHook({
293
293
  var _b = react_1.default.useState(config.initialCursorId), cursorId = _b[0], setCursorId = _b[1];
294
294
  var columnCount = config.columnCount || 0;
295
295
  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(config.items[0]) : ''));
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]) : ''));
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 */
@@ -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;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCZ,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;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}
@@ -64,12 +64,11 @@ var hasOwnKey = function (obj, key) { return obj.hasOwnProperty(key); };
64
64
  * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
65
65
  */
66
66
  exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel_1.useCursorListModel)(function (_a, ref, elemProps) {
67
- var state = _a.state, events = _a.events, getId = _a.getId, navigation = _a.navigation;
67
+ var state = _a.state, events = _a.events, navigation = _a.navigation;
68
68
  if (elemProps === void 0) { elemProps = {}; }
69
69
  // Tracks when this element has focus. If this item is removed while still focused, we have to
70
70
  // inform the model to move the cursor to the next item.
71
71
  var focusRef = react_1.default.useRef(false);
72
- var getIdRef = react_1.default.useRef(getId);
73
72
  // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
74
73
  // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
75
74
  // empty array
@@ -86,7 +85,7 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
86
85
  requestAnimationFrame(function () {
87
86
  var _a;
88
87
  (_a = document
89
- .querySelector("[data-focus-id=\"" + (state.id + "-" + getIdRef.current(item_1)) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
88
+ .querySelector("[data-focus-id=\"" + (state.id + "-" + item_1.id) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
90
89
  });
91
90
  keyDownRef.current = false;
92
91
  }
@@ -278,7 +278,7 @@ export var useCursorListModel = createModelHook({
278
278
  var _b = React.useState(config.initialCursorId), cursorId = _b[0], setCursorId = _b[1];
279
279
  var columnCount = config.columnCount || 0;
280
280
  var list = useBaseListModel(config);
281
- var initialCurrentRef = React.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? getId(config.items[0]) : ''));
281
+ var initialCurrentRef = React.useRef(config.initialCursorId || (((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? getId(list.state.items[0]) : ''));
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 */
@@ -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;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqCZ,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;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}
@@ -58,12 +58,11 @@ var hasOwnKey = function (obj, key) { return obj.hasOwnProperty(key); };
58
58
  * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
59
59
  */
60
60
  export var useListItemRovingFocus = createElemPropsHook(useCursorListModel)(function (_a, ref, elemProps) {
61
- var state = _a.state, events = _a.events, getId = _a.getId, navigation = _a.navigation;
61
+ var state = _a.state, events = _a.events, navigation = _a.navigation;
62
62
  if (elemProps === void 0) { elemProps = {}; }
63
63
  // Tracks when this element has focus. If this item is removed while still focused, we have to
64
64
  // inform the model to move the cursor to the next item.
65
65
  var focusRef = React.useRef(false);
66
- var getIdRef = React.useRef(getId);
67
66
  // Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
68
67
  // current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
69
68
  // empty array
@@ -80,7 +79,7 @@ export var useListItemRovingFocus = createElemPropsHook(useCursorListModel)(func
80
79
  requestAnimationFrame(function () {
81
80
  var _a;
82
81
  (_a = document
83
- .querySelector("[data-focus-id=\"" + (state.id + "-" + getIdRef.current(item_1)) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
82
+ .querySelector("[data-focus-id=\"" + (state.id + "-" + item_1.id) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
84
83
  });
85
84
  keyDownRef.current = false;
86
85
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "7.4.8",
3
+ "version": "7.4.10",
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.8",
52
+ "@workday/canvas-kit-popup-stack": "^7.4.10",
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": "95105328bd2875c3018f04831cbddfabe7f76038"
71
+ "gitHead": "b48dc19dd57876636775849a76c053def29e57a7"
72
72
  }