@workday/canvas-kit-react 11.0.0-alpha.718-next.0 → 11.0.0-alpha.721-next.0
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/dist/commonjs/collection/lib/useCursorListModel.js +1 -1
- package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts.map +1 -1
- package/dist/commonjs/select/lib/hooks/useSelectInput.js +30 -1
- package/dist/commonjs/tabs/lib/useTabsModel.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/useTabsModel.js +2 -4
- package/dist/es6/collection/lib/useCursorListModel.js +1 -1
- package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map +1 -1
- package/dist/es6/select/lib/hooks/useSelectInput.js +30 -1
- package/dist/es6/tabs/lib/useTabsModel.d.ts.map +1 -1
- package/dist/es6/tabs/lib/useTabsModel.js +2 -4
- package/package.json +4 -4
- package/select/lib/hooks/useSelectInput.ts +33 -1
- package/tabs/lib/useTabsModel.tsx +3 -4
|
@@ -130,7 +130,7 @@ export const getNextPage: NavigationRequestor = (index, {state}) => {
|
|
|
130
130
|
};
|
|
131
131
|
|
|
132
132
|
const getItem: (id: string, model: NavigationInput) => Item<Generic> = (id, {state}) => {
|
|
133
|
-
const item =
|
|
133
|
+
const item = state.items.find(item => item.id === id) || state.items[0]; // no id, return first item
|
|
134
134
|
assert(item, `Item not found: ${id}`);
|
|
135
135
|
return item;
|
|
136
136
|
};
|
|
@@ -86,7 +86,7 @@ const getNextPage = (index, { state }) => {
|
|
|
86
86
|
};
|
|
87
87
|
exports.getNextPage = getNextPage;
|
|
88
88
|
const getItem = (id, { state }) => {
|
|
89
|
-
const item =
|
|
89
|
+
const item = state.items.find(item => item.id === id) || state.items[0]; // no id, return first item
|
|
90
90
|
common_1.assert(item, `Item not found: ${id}`);
|
|
91
91
|
return item;
|
|
92
92
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA8EF,mBAAmB;+BAvEP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0HvE,CAAC"}
|
|
@@ -36,17 +36,46 @@ exports.useSelectInput = common_1.composeHooks(common_1.createElemPropsHook(useS
|
|
|
36
36
|
// The intent is if items are loaded after the component is rendered, it will update the input with the value.
|
|
37
37
|
// **Note: We might need to watch for other things or how often we should do this**
|
|
38
38
|
react_1.default.useEffect(() => {
|
|
39
|
+
var _a;
|
|
39
40
|
if (model.state.inputRef.current &&
|
|
40
41
|
model.state.items.length > 0 &&
|
|
41
42
|
model.state.selectedIds[0]) {
|
|
42
43
|
const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
|
|
43
|
-
if (model.state.
|
|
44
|
+
if (model.state.selectedIds[0] !== value &&
|
|
45
|
+
model.state.inputRef.current.value !== value) {
|
|
44
46
|
// Programmatically dispatch an onChange once items are loaded. This account for when a consumer wants an initial selected item and they're loading them from a server.
|
|
45
47
|
common_1.dispatchInputEvent(model.state.inputRef.current, value);
|
|
46
48
|
}
|
|
47
49
|
}
|
|
50
|
+
if (!model.state.selectedIds[0] && ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
|
|
51
|
+
common_1.dispatchInputEvent(textInputRef.current, '');
|
|
52
|
+
}
|
|
48
53
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
49
54
|
}, [model.state.inputRef, model.state.items.length]);
|
|
55
|
+
// This effect is a copy of what is in useComboboxInput. In this case, we need access to `textInputRef` instead of `model.state.inputRef`
|
|
56
|
+
// since it points to the visual input and not the hidden input. This allows scroll to index to work
|
|
57
|
+
react_1.default.useEffect(() => {
|
|
58
|
+
var _a;
|
|
59
|
+
if (model.state.cursorId && model.state.visibility === 'visible') {
|
|
60
|
+
const item = model.navigation.getItem(model.state.cursorId, model);
|
|
61
|
+
if (model.state.isVirtualized && item) {
|
|
62
|
+
model.state.UNSTABLE_virtual.scrollToIndex(item.index);
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
const listboxId = (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-controls');
|
|
66
|
+
if (listboxId) {
|
|
67
|
+
const menuItem = document.querySelector(`[id="${listboxId}"] [data-id="${model.state.cursorId}"]`);
|
|
68
|
+
if (menuItem) {
|
|
69
|
+
requestAnimationFrame(() => {
|
|
70
|
+
menuItem.scrollIntoView({ block: 'nearest' });
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
// we only want to run this effect if the cursor, visibility and selectedIds change and not any other time
|
|
77
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
78
|
+
}, [model.state.cursorId, model.state.selectedIds, model.state.visibility]);
|
|
50
79
|
return {
|
|
51
80
|
onKeyDown(event) {
|
|
52
81
|
// Prevent the keys from being enter in the input
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTabsModel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/useTabsModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY;IAGrB;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useTabsModel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/useTabsModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY;IAGrB;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAqCH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WA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"}
|
|
@@ -54,11 +54,9 @@ exports.useTabsModel = common_1.createModelHook({
|
|
|
54
54
|
const initialSelectedRef = react_1.default.useRef(config.initialTab);
|
|
55
55
|
const getId = config.getId || collection_1.defaultGetId;
|
|
56
56
|
const modality = common_1.useModalityType();
|
|
57
|
-
const items = config.items;
|
|
58
57
|
const model = collection_1.useOverflowListModel(collection_1.useOverflowListModel.mergeConfig(config, {
|
|
59
58
|
shouldCalculateOverflow: modality !== 'touch',
|
|
60
59
|
orientation: config.orientation || 'horizontal',
|
|
61
|
-
items,
|
|
62
60
|
onRegisterItem(data) {
|
|
63
61
|
if (!initialSelectedRef.current) {
|
|
64
62
|
initialSelectedRef.current = getId(data.item);
|
|
@@ -88,9 +86,9 @@ exports.useTabsModel = common_1.createModelHook({
|
|
|
88
86
|
*/
|
|
89
87
|
panelIndexRef: panels.state.indexRef,
|
|
90
88
|
};
|
|
91
|
-
const overflowItems = react_1.default.useMemo(() =>
|
|
89
|
+
const overflowItems = react_1.default.useMemo(() => config.items ? config.items.filter(item => state.hiddenIds.includes(getId(item))) : undefined,
|
|
92
90
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
93
|
-
[state.hiddenIds, items]);
|
|
91
|
+
[state.hiddenIds, config.items]);
|
|
94
92
|
const events = {
|
|
95
93
|
...model.events,
|
|
96
94
|
/**
|
|
@@ -73,7 +73,7 @@ export const getNextPage = (index, { state }) => {
|
|
|
73
73
|
return getLast(index, { state });
|
|
74
74
|
};
|
|
75
75
|
const getItem = (id, { state }) => {
|
|
76
|
-
const item =
|
|
76
|
+
const item = state.items.find(item => item.id === id) || state.items[0]; // no id, return first item
|
|
77
77
|
assert(item, `Item not found: ${id}`);
|
|
78
78
|
return item;
|
|
79
79
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA8EF,mBAAmB;+BAvEP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0HvE,CAAC"}
|
|
@@ -30,17 +30,46 @@ export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((
|
|
|
30
30
|
// The intent is if items are loaded after the component is rendered, it will update the input with the value.
|
|
31
31
|
// **Note: We might need to watch for other things or how often we should do this**
|
|
32
32
|
React.useEffect(() => {
|
|
33
|
+
var _a;
|
|
33
34
|
if (model.state.inputRef.current &&
|
|
34
35
|
model.state.items.length > 0 &&
|
|
35
36
|
model.state.selectedIds[0]) {
|
|
36
37
|
const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
|
|
37
|
-
if (model.state.
|
|
38
|
+
if (model.state.selectedIds[0] !== value &&
|
|
39
|
+
model.state.inputRef.current.value !== value) {
|
|
38
40
|
// Programmatically dispatch an onChange once items are loaded. This account for when a consumer wants an initial selected item and they're loading them from a server.
|
|
39
41
|
dispatchInputEvent(model.state.inputRef.current, value);
|
|
40
42
|
}
|
|
41
43
|
}
|
|
44
|
+
if (!model.state.selectedIds[0] && ((_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
|
|
45
|
+
dispatchInputEvent(textInputRef.current, '');
|
|
46
|
+
}
|
|
42
47
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
43
48
|
}, [model.state.inputRef, model.state.items.length]);
|
|
49
|
+
// This effect is a copy of what is in useComboboxInput. In this case, we need access to `textInputRef` instead of `model.state.inputRef`
|
|
50
|
+
// since it points to the visual input and not the hidden input. This allows scroll to index to work
|
|
51
|
+
React.useEffect(() => {
|
|
52
|
+
var _a;
|
|
53
|
+
if (model.state.cursorId && model.state.visibility === 'visible') {
|
|
54
|
+
const item = model.navigation.getItem(model.state.cursorId, model);
|
|
55
|
+
if (model.state.isVirtualized && item) {
|
|
56
|
+
model.state.UNSTABLE_virtual.scrollToIndex(item.index);
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
const listboxId = (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-controls');
|
|
60
|
+
if (listboxId) {
|
|
61
|
+
const menuItem = document.querySelector(`[id="${listboxId}"] [data-id="${model.state.cursorId}"]`);
|
|
62
|
+
if (menuItem) {
|
|
63
|
+
requestAnimationFrame(() => {
|
|
64
|
+
menuItem.scrollIntoView({ block: 'nearest' });
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
// we only want to run this effect if the cursor, visibility and selectedIds change and not any other time
|
|
71
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
72
|
+
}, [model.state.cursorId, model.state.selectedIds, model.state.visibility]);
|
|
44
73
|
return {
|
|
45
74
|
onKeyDown(event) {
|
|
46
75
|
// Prevent the keys from being enter in the input
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTabsModel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/useTabsModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY;IAGrB;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useTabsModel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/useTabsModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY;IAGrB;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAqCH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WA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"}
|
|
@@ -48,11 +48,9 @@ export const useTabsModel = createModelHook({
|
|
|
48
48
|
const initialSelectedRef = React.useRef(config.initialTab);
|
|
49
49
|
const getId = config.getId || defaultGetId;
|
|
50
50
|
const modality = useModalityType();
|
|
51
|
-
const items = config.items;
|
|
52
51
|
const model = useOverflowListModel(useOverflowListModel.mergeConfig(config, {
|
|
53
52
|
shouldCalculateOverflow: modality !== 'touch',
|
|
54
53
|
orientation: config.orientation || 'horizontal',
|
|
55
|
-
items,
|
|
56
54
|
onRegisterItem(data) {
|
|
57
55
|
if (!initialSelectedRef.current) {
|
|
58
56
|
initialSelectedRef.current = getId(data.item);
|
|
@@ -82,9 +80,9 @@ export const useTabsModel = createModelHook({
|
|
|
82
80
|
*/
|
|
83
81
|
panelIndexRef: panels.state.indexRef,
|
|
84
82
|
};
|
|
85
|
-
const overflowItems = React.useMemo(() =>
|
|
83
|
+
const overflowItems = React.useMemo(() => config.items ? config.items.filter(item => state.hiddenIds.includes(getId(item))) : undefined,
|
|
86
84
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
87
|
-
[state.hiddenIds, items]);
|
|
85
|
+
[state.hiddenIds, config.items]);
|
|
88
86
|
const events = {
|
|
89
87
|
...model.events,
|
|
90
88
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "11.0.0-alpha.
|
|
3
|
+
"version": "11.0.0-alpha.721-next.0",
|
|
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",
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"@emotion/styled": "^11.6.0",
|
|
51
51
|
"@popperjs/core": "^2.5.4",
|
|
52
52
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
53
|
-
"@workday/canvas-kit-popup-stack": "^11.0.0-alpha.
|
|
54
|
-
"@workday/canvas-kit-styling": "^11.0.0-alpha.
|
|
53
|
+
"@workday/canvas-kit-popup-stack": "^11.0.0-alpha.721-next.0",
|
|
54
|
+
"@workday/canvas-kit-styling": "^11.0.0-alpha.721-next.0",
|
|
55
55
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
56
56
|
"@workday/canvas-tokens-web": "^1.0.2",
|
|
57
57
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -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": "e7fad00a4763b2f506fc08d6c419b4b251c7d925"
|
|
72
72
|
}
|
|
@@ -54,14 +54,46 @@ export const useSelectInput = composeHooks(
|
|
|
54
54
|
model.state.selectedIds[0]
|
|
55
55
|
) {
|
|
56
56
|
const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
|
|
57
|
-
if (
|
|
57
|
+
if (
|
|
58
|
+
model.state.selectedIds[0] !== value &&
|
|
59
|
+
model.state.inputRef.current.value !== value
|
|
60
|
+
) {
|
|
58
61
|
// Programmatically dispatch an onChange once items are loaded. This account for when a consumer wants an initial selected item and they're loading them from a server.
|
|
59
62
|
dispatchInputEvent(model.state.inputRef.current, value);
|
|
60
63
|
}
|
|
61
64
|
}
|
|
65
|
+
if (!model.state.selectedIds[0] && textInputRef.current?.value) {
|
|
66
|
+
dispatchInputEvent(textInputRef.current, '');
|
|
67
|
+
}
|
|
62
68
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
63
69
|
}, [model.state.inputRef, model.state.items.length]);
|
|
64
70
|
|
|
71
|
+
// This effect is a copy of what is in useComboboxInput. In this case, we need access to `textInputRef` instead of `model.state.inputRef`
|
|
72
|
+
// since it points to the visual input and not the hidden input. This allows scroll to index to work
|
|
73
|
+
React.useEffect(() => {
|
|
74
|
+
if (model.state.cursorId && model.state.visibility === 'visible') {
|
|
75
|
+
const item = model.navigation.getItem(model.state.cursorId, model);
|
|
76
|
+
if (model.state.isVirtualized && item) {
|
|
77
|
+
model.state.UNSTABLE_virtual.scrollToIndex(item.index);
|
|
78
|
+
} else {
|
|
79
|
+
const listboxId = textInputRef.current?.getAttribute('aria-controls');
|
|
80
|
+
if (listboxId) {
|
|
81
|
+
const menuItem = document.querySelector(
|
|
82
|
+
`[id="${listboxId}"] [data-id="${model.state.cursorId}"]`
|
|
83
|
+
);
|
|
84
|
+
if (menuItem) {
|
|
85
|
+
requestAnimationFrame(() => {
|
|
86
|
+
menuItem.scrollIntoView({block: 'nearest'});
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// we only want to run this effect if the cursor, visibility and selectedIds change and not any other time
|
|
94
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
95
|
+
}, [model.state.cursorId, model.state.selectedIds, model.state.visibility]);
|
|
96
|
+
|
|
65
97
|
return {
|
|
66
98
|
onKeyDown(event: React.KeyboardEvent) {
|
|
67
99
|
// Prevent the keys from being enter in the input
|
|
@@ -54,13 +54,11 @@ export const useTabsModel = createModelHook({
|
|
|
54
54
|
const getId = config.getId || defaultGetId;
|
|
55
55
|
const modality = useModalityType();
|
|
56
56
|
|
|
57
|
-
const items = config.items;
|
|
58
57
|
|
|
59
58
|
const model = useOverflowListModel(
|
|
60
59
|
useOverflowListModel.mergeConfig(config, {
|
|
61
60
|
shouldCalculateOverflow: modality !== 'touch',
|
|
62
61
|
orientation: config.orientation || 'horizontal',
|
|
63
|
-
items,
|
|
64
62
|
onRegisterItem(data) {
|
|
65
63
|
if (!initialSelectedRef.current) {
|
|
66
64
|
initialSelectedRef.current = getId(data.item);
|
|
@@ -95,9 +93,10 @@ export const useTabsModel = createModelHook({
|
|
|
95
93
|
};
|
|
96
94
|
|
|
97
95
|
const overflowItems = React.useMemo(
|
|
98
|
-
() =>
|
|
96
|
+
() =>
|
|
97
|
+
config.items ? config.items.filter(item => state.hiddenIds.includes(getId(item))) : undefined,
|
|
99
98
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
100
|
-
[state.hiddenIds, items]
|
|
99
|
+
[state.hiddenIds, config.items]
|
|
101
100
|
);
|
|
102
101
|
|
|
103
102
|
const events = {
|