@workday/canvas-kit-react 8.5.5 → 8.5.6
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
|
@@ -319,7 +319,7 @@ export const useCursorListModel = createModelHook({
|
|
|
319
319
|
const columnCount = config.columnCount || 0;
|
|
320
320
|
const list = useBaseListModel(config);
|
|
321
321
|
const initialCurrentRef = React.useRef(
|
|
322
|
-
config.initialCursorId || (config.items?.length ? getId(
|
|
322
|
+
config.initialCursorId || (config.items?.length ? getId(list.state.items![0]) : '')
|
|
323
323
|
);
|
|
324
324
|
const navigation = config.navigation;
|
|
325
325
|
|
|
@@ -70,11 +70,10 @@ const hasOwnKey = <T extends object>(obj: T, key: any): key is keyof T => obj.ha
|
|
|
70
70
|
```
|
|
71
71
|
*/
|
|
72
72
|
export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
|
|
73
|
-
({state, events,
|
|
73
|
+
({state, events, navigation}, ref, elemProps: {'data-id'?: string} = {}) => {
|
|
74
74
|
// Tracks when this element has focus. If this item is removed while still focused, we have to
|
|
75
75
|
// inform the model to move the cursor to the next item.
|
|
76
76
|
const focusRef = React.useRef(false);
|
|
77
|
-
const getIdRef = React.useRef(getId);
|
|
78
77
|
|
|
79
78
|
// Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
|
|
80
79
|
// current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
|
|
@@ -93,9 +92,7 @@ export const useListItemRovingFocus = createElemPropsHook(useCursorListModel)(
|
|
|
93
92
|
}
|
|
94
93
|
requestAnimationFrame(() => {
|
|
95
94
|
document
|
|
96
|
-
.querySelector<HTMLElement>(
|
|
97
|
-
`[data-focus-id="${`${state.id}-${getIdRef.current(item)}`}"]`
|
|
98
|
-
)
|
|
95
|
+
.querySelector<HTMLElement>(`[data-focus-id="${`${state.id}-${item.id}`}"]`)
|
|
99
96
|
?.focus();
|
|
100
97
|
});
|
|
101
98
|
|
|
@@ -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;;;;;;;;;;;;;GAaG;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;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}
|
|
@@ -72,12 +72,11 @@ var hasOwnKey = function (obj, key) { return obj.hasOwnProperty(key); };
|
|
|
72
72
|
```
|
|
73
73
|
*/
|
|
74
74
|
exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel_1.useCursorListModel)(function (_a, ref, elemProps) {
|
|
75
|
-
var state = _a.state, events = _a.events,
|
|
75
|
+
var state = _a.state, events = _a.events, navigation = _a.navigation;
|
|
76
76
|
if (elemProps === void 0) { elemProps = {}; }
|
|
77
77
|
// Tracks when this element has focus. If this item is removed while still focused, we have to
|
|
78
78
|
// inform the model to move the cursor to the next item.
|
|
79
79
|
var focusRef = react_1.default.useRef(false);
|
|
80
|
-
var getIdRef = react_1.default.useRef(getId);
|
|
81
80
|
// Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
|
|
82
81
|
// current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
|
|
83
82
|
// empty array
|
|
@@ -94,7 +93,7 @@ exports.useListItemRovingFocus = common_1.createElemPropsHook(useCursorListModel
|
|
|
94
93
|
requestAnimationFrame(function () {
|
|
95
94
|
var _a;
|
|
96
95
|
(_a = document
|
|
97
|
-
.querySelector("[data-focus-id=\"" + (state.id + "-" +
|
|
96
|
+
.querySelector("[data-focus-id=\"" + (state.id + "-" + item_1.id) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
|
|
98
97
|
});
|
|
99
98
|
keyDownRef.current = false;
|
|
100
99
|
}
|
|
@@ -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;;;;;;;;;;;;;GAaG;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;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAkCZ,mBAAmB;;;;;;;;;OA+CzC,CAAC"}
|
|
@@ -66,12 +66,11 @@ var hasOwnKey = function (obj, key) { return obj.hasOwnProperty(key); };
|
|
|
66
66
|
```
|
|
67
67
|
*/
|
|
68
68
|
export var useListItemRovingFocus = createElemPropsHook(useCursorListModel)(function (_a, ref, elemProps) {
|
|
69
|
-
var state = _a.state, events = _a.events,
|
|
69
|
+
var state = _a.state, events = _a.events, navigation = _a.navigation;
|
|
70
70
|
if (elemProps === void 0) { elemProps = {}; }
|
|
71
71
|
// Tracks when this element has focus. If this item is removed while still focused, we have to
|
|
72
72
|
// inform the model to move the cursor to the next item.
|
|
73
73
|
var focusRef = React.useRef(false);
|
|
74
|
-
var getIdRef = React.useRef(getId);
|
|
75
74
|
// Create a ref out of state. We don't want to watch state on unmount, so we use a ref to get the
|
|
76
75
|
// current value at the time of unmounting. Otherwise, `state.items` would be a cached value of an
|
|
77
76
|
// empty array
|
|
@@ -88,7 +87,7 @@ export var useListItemRovingFocus = createElemPropsHook(useCursorListModel)(func
|
|
|
88
87
|
requestAnimationFrame(function () {
|
|
89
88
|
var _a;
|
|
90
89
|
(_a = document
|
|
91
|
-
.querySelector("[data-focus-id=\"" + (state.id + "-" +
|
|
90
|
+
.querySelector("[data-focus-id=\"" + (state.id + "-" + item_1.id) + "\"]")) === null || _a === void 0 ? void 0 : _a.focus();
|
|
92
91
|
});
|
|
93
92
|
keyDownRef.current = false;
|
|
94
93
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "8.5.
|
|
3
|
+
"version": "8.5.6",
|
|
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.5.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^8.5.6",
|
|
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": "
|
|
70
|
+
"gitHead": "cf85e69b017456ecc6a022c91aa5aa5bfa42ab04"
|
|
71
71
|
}
|