@workday/canvas-kit-react 10.3.18 → 10.3.20
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/button/lib/BaseButton.tsx +5 -17
- package/collection/lib/useCursorListModel.tsx +1 -1
- package/dist/commonjs/button/lib/BaseButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/BaseButton.js +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/button/lib/BaseButton.d.ts.map +1 -1
- package/dist/es6/button/lib/BaseButton.js +1 -1
- 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
|
@@ -147,7 +147,7 @@ const baseButtonStyles = createStyles({
|
|
|
147
147
|
boxShadow: 'none',
|
|
148
148
|
opacity: cssVar(buttonVars.disabled.opacity, '1'),
|
|
149
149
|
},
|
|
150
|
-
'& span .wd-icon-fill': {
|
|
150
|
+
'& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
|
|
151
151
|
transitionDuration: '40ms',
|
|
152
152
|
fill: cssVar(buttonVars.default.icon, base.blackPepper400),
|
|
153
153
|
},
|
|
@@ -158,10 +158,7 @@ const baseButtonStyles = createStyles({
|
|
|
158
158
|
backgroundColor: cssVar(buttonVars.focus.background, 'transparent'),
|
|
159
159
|
borderColor: cssVar(buttonVars.focus.border, 'transparent'),
|
|
160
160
|
color: cssVar(buttonVars.focus.label, base.blackPepper400),
|
|
161
|
-
'& span .wd-icon-fill': {
|
|
162
|
-
fill: cssVar(buttonVars.focus.icon, base.blackPepper400),
|
|
163
|
-
},
|
|
164
|
-
'.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
|
|
161
|
+
'& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
|
|
165
162
|
fill: cssVar(buttonVars.focus.icon, base.blackPepper400),
|
|
166
163
|
},
|
|
167
164
|
...focusRing({
|
|
@@ -175,10 +172,7 @@ const baseButtonStyles = createStyles({
|
|
|
175
172
|
backgroundColor: cssVar(buttonVars.hover.background, base.blackPepper500),
|
|
176
173
|
borderColor: cssVar(buttonVars.hover.border, 'transparent'),
|
|
177
174
|
color: cssVar(buttonVars.hover.label, base.blackPepper500),
|
|
178
|
-
'& span .wd-icon-fill': {
|
|
179
|
-
fill: cssVar(buttonVars.hover.icon, base.blackPepper500),
|
|
180
|
-
},
|
|
181
|
-
'.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
|
|
175
|
+
'& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
|
|
182
176
|
fill: cssVar(buttonVars.hover.icon, base.blackPepper500),
|
|
183
177
|
},
|
|
184
178
|
},
|
|
@@ -187,10 +181,7 @@ const baseButtonStyles = createStyles({
|
|
|
187
181
|
backgroundColor: cssVar(buttonVars.active.background, 'transparent'),
|
|
188
182
|
borderColor: cssVar(buttonVars.active.border, 'transparent'),
|
|
189
183
|
color: cssVar(buttonVars.active.label, base.blackPepper400),
|
|
190
|
-
'& span .wd-icon-fill': {
|
|
191
|
-
fill: cssVar(buttonVars.active.icon, base.blackPepper400),
|
|
192
|
-
},
|
|
193
|
-
'.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
|
|
184
|
+
'& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
|
|
194
185
|
fill: cssVar(buttonVars.active.icon, base.blackPepper400),
|
|
195
186
|
},
|
|
196
187
|
},
|
|
@@ -198,10 +189,7 @@ const baseButtonStyles = createStyles({
|
|
|
198
189
|
backgroundColor: cssVar(buttonVars.disabled.background, 'transparent'),
|
|
199
190
|
borderColor: cssVar(buttonVars.disabled.border, 'transparent'),
|
|
200
191
|
color: cssVar(buttonVars.disabled.label, base.blackPepper400),
|
|
201
|
-
'& span .wd-icon-fill': {
|
|
202
|
-
fill: cssVar(buttonVars.disabled.icon, base.blackPepper400),
|
|
203
|
-
},
|
|
204
|
-
'.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
|
|
192
|
+
'& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2': {
|
|
205
193
|
fill: cssVar(buttonVars.disabled.icon, base.blackPepper400),
|
|
206
194
|
},
|
|
207
195
|
},
|
|
@@ -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
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAG5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAG5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;AAsFF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;EA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CAyCrB,CAAC"}
|
|
@@ -40,7 +40,7 @@ exports.buttonVars = {
|
|
|
40
40
|
/**
|
|
41
41
|
* Base styles for Buttons.
|
|
42
42
|
*/
|
|
43
|
-
const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
43
|
+
const baseButtonStyles = canvas_kit_styling_1.createStyles({ name: "s5s586", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--cnvs-button-default-background, transparent);color:var(--cnvs-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--cnvs-button-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-default-borderRadius, var(--cnvs-sys-shape-round, calc(0.25rem * 250)));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-disabled-opacity, 1);}& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{transition-duration:40ms;fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}&:focus-visible, &.focus{background-color:var(--cnvs-button-focus-background, transparent);border-color:var(--cnvs-button-focus-border, transparent);color:var(--cnvs-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}box-shadow:0 0 0 2px var(--cnvs-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))), 0 0 0 4px var(--cnvs-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(8,117,225,1)));}&:hover, &.hover{background-color:var(--cnvs-button-hover-background, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));border-color:var(--cnvs-button-hover-border, transparent);color:var(--cnvs-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-active-background, transparent);border-color:var(--cnvs-button-active-border, transparent);color:var(--cnvs-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}&:disabled, &.disabled{background-color:var(--cnvs-button-disabled-background, transparent);border-color:var(--cnvs-button-disabled-border, transparent);color:var(--cnvs-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}" });
|
|
44
44
|
/**
|
|
45
45
|
* Button modifiers that will overwrite the base styles of Buttons.
|
|
46
46
|
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
@@ -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;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAaH;;WAEG;;;;;QAEH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAhFH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqCH;;OAEG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaH;;OAEG;;;;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA3BH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAaH;;WAEG;;;;;QAEH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BL,CAAC"}
|
|
@@ -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
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAG5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAG5F,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;CAmDtB,CAAC;AAsFF;;;;;GAKG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;EA4E1B,CAAC;AAEH,wBAAgB,UAAU,CAAC,MAAM,GAAE,MAAW,UAE7C;AAED,wBAAgB,eAAe,CAC7B,IAAI,CAAC,EAAE,MAAM,OAAO,eAAe,CAAC,IAAI,EACxC,YAAY,CAAC,EAAE,aAAa,EAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GACzB,MAAM,OAAO,eAAe,CAAC,YAAY,CAE3C;AAED;;GAEG;AACH,eAAO,MAAM,UAAU;;;CAyCrB,CAAC"}
|
|
@@ -18,7 +18,7 @@ export const buttonVars = {
|
|
|
18
18
|
/**
|
|
19
19
|
* Base styles for Buttons.
|
|
20
20
|
*/
|
|
21
|
-
const baseButtonStyles = createStyles({ name: "
|
|
21
|
+
const baseButtonStyles = createStyles({ name: "s5s586", styles: "font-family:\"Roboto\", \"Helvetica Neue\", \"Helvetica\", Arial, sans-serif;font-size:0.875rem;line-height:normal;letter-spacing:0.015rem;font-weight:bold;background-color:var(--cnvs-button-default-background, transparent);color:var(--cnvs-button-default-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));border-width:1px;border-style:solid;gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));border-color:var(--cnvs-button-default-border, transparent);cursor:pointer;display:inline-flex;box-shadow:none;align-items:center;justify-content:center;box-sizing:border-box;outline:2px transparent;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:var(--cnvs-button-default-borderRadius, var(--cnvs-sys-shape-round, calc(0.25rem * 250)));position:relative;vertical-align:middle;overflow:hidden;transition:box-shadow 120ms linear, border 120ms linear, background-color 120ms linear, color 120ms linear;&:disabled, &:disabled:active, &.disabled{cursor:default;box-shadow:none;opacity:var(--cnvs-button-disabled-opacity, 1);}& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{transition-duration:40ms;fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2{fill:var(--cnvs-button-default-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}&:focus-visible, &.focus{background-color:var(--cnvs-button-focus-background, transparent);border-color:var(--cnvs-button-focus-border, transparent);color:var(--cnvs-button-focus-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{fill:var(--cnvs-button-focus-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}box-shadow:0 0 0 2px var(--cnvs-button-focus-boxShadowInner, var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1))), 0 0 0 4px var(--cnvs-button-focus-boxShadowOuter, var(--cnvs-brand-primary-base, rgba(8,117,225,1)));}&:hover, &.hover{background-color:var(--cnvs-button-hover-background, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));border-color:var(--cnvs-button-hover-border, transparent);color:var(--cnvs-button-hover-label-emotion-safe, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{fill:var(--cnvs-button-hover-icon, var(--cnvs-base-palette-black-pepper-500, rgba(30,30,30,1)));}}&:hover:active{transition-duration:40ms;}&:active, &.active{background-color:var(--cnvs-button-active-background, transparent);border-color:var(--cnvs-button-active-border, transparent);color:var(--cnvs-button-active-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{fill:var(--cnvs-button-active-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}&:disabled, &.disabled{background-color:var(--cnvs-button-disabled-background, transparent);border-color:var(--cnvs-button-disabled-border, transparent);color:var(--cnvs-button-disabled-label-emotion-safe, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));& span .wd-icon-fill, & span .wd-icon-accent, & span .wd-icon-accent2{fill:var(--cnvs-button-disabled-icon, var(--cnvs-base-palette-black-pepper-400, rgba(51,51,51,1)));}}" });
|
|
22
22
|
/**
|
|
23
23
|
* Button modifiers that will overwrite the base styles of Buttons.
|
|
24
24
|
* - `Size`: These modifiers will dictate a size of a Button and has a set of styles to associated with it.
|
|
@@ -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;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAaH;;WAEG;;;;;QAEH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAhFH;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqCH;;OAEG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaH;;OAEG;;;;;IAEH;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA3BH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAaH;;WAEG;;;;;QAEH;;WAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BL,CAAC"}
|
|
@@ -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": "10.3.
|
|
3
|
+
"version": "10.3.20",
|
|
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": "^10.3.
|
|
54
|
-
"@workday/canvas-kit-styling": "^10.3.
|
|
53
|
+
"@workday/canvas-kit-popup-stack": "^10.3.20",
|
|
54
|
+
"@workday/canvas-kit-styling": "^10.3.20",
|
|
55
55
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
56
56
|
"@workday/canvas-tokens-web": "^1.0.0",
|
|
57
57
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
70
70
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "9b527c32c8b8000389bad9dd308cefac74964011"
|
|
73
73
|
}
|
|
@@ -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 = {
|