@workday/canvas-kit-react 7.4.9 → 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.
- package/collection/lib/useCursorListModel.tsx +1 -1
- package/collection/lib/useListItemRovingFocus.tsx +2 -5
- package/dist/commonjs/collection/lib/useCursorListModel.js +1 -1
- package/dist/commonjs/collection/lib/useListItemRovingFocus.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useListItemRovingFocus.js +2 -3
- package/dist/es6/collection/lib/useCursorListModel.js +1 -1
- package/dist/es6/collection/lib/useListItemRovingFocus.d.ts.map +1 -1
- package/dist/es6/collection/lib/useListItemRovingFocus.js +2 -3
- package/package.json +3 -3
|
@@ -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(
|
|
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,
|
|
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(
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
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,
|
|
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 + "-" +
|
|
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(
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
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,
|
|
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 + "-" +
|
|
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.
|
|
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.
|
|
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": "
|
|
71
|
+
"gitHead": "b48dc19dd57876636775849a76c053def29e57a7"
|
|
72
72
|
}
|