@workday/canvas-kit-react 10.3.19 → 10.3.21
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/common/lib/CanvasProvider.tsx +2 -2
- package/dist/commonjs/collection/lib/useCursorListModel.js +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.d.ts.map +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +2 -2
- package/dist/commonjs/layout/lib/utils/mergeStyles.d.ts.map +1 -1
- package/dist/commonjs/layout/lib/utils/mergeStyles.js +3 -8
- 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/common/lib/CanvasProvider.d.ts.map +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +2 -2
- package/dist/es6/layout/lib/utils/mergeStyles.d.ts.map +1 -1
- package/dist/es6/layout/lib/utils/mergeStyles.js +3 -8
- 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/layout/lib/utils/mergeStyles.ts +3 -11
- package/package.json +4 -5
- 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
|
};
|
|
@@ -3,8 +3,7 @@ import {Theme, ThemeProvider, CacheProvider} from '@emotion/react';
|
|
|
3
3
|
import {InputProvider} from './InputProvider';
|
|
4
4
|
import {defaultCanvasTheme, PartialEmotionCanvasTheme, useTheme} from './theming';
|
|
5
5
|
import {brand} from '@workday/canvas-tokens-web';
|
|
6
|
-
import {
|
|
7
|
-
import {createStyles} from '@workday/canvas-kit-styling';
|
|
6
|
+
import {createStyles, getCache} from '@workday/canvas-kit-styling';
|
|
8
7
|
|
|
9
8
|
export interface CanvasProviderProps {
|
|
10
9
|
theme?: PartialEmotionCanvasTheme;
|
|
@@ -89,6 +88,7 @@ export const CanvasProvider = ({
|
|
|
89
88
|
...props
|
|
90
89
|
}: CanvasProviderProps & React.HTMLAttributes<HTMLElement>) => {
|
|
91
90
|
const elemProps = useCanvasThemeToCssVars(theme, props);
|
|
91
|
+
const cache = getCache();
|
|
92
92
|
return (
|
|
93
93
|
<CacheProvider value={cache}>
|
|
94
94
|
<ThemeProvider theme={theme as Theme}>
|
|
@@ -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":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;AAIlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAkDD,eAAO,MAAM,uBAAuB,UAC3B,yBAAyB,GAAG,SAAS,aACjC,MAAM,cAAc,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqB7C,CAAC;AAEF,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,gBAgBzD,CAAC"}
|
|
@@ -25,7 +25,6 @@ const react_1 = require("@emotion/react");
|
|
|
25
25
|
const InputProvider_1 = require("./InputProvider");
|
|
26
26
|
const theming_1 = require("./theming");
|
|
27
27
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
28
|
-
const css_1 = require("@emotion/css");
|
|
29
28
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
30
29
|
// copied from brand/_variables.css
|
|
31
30
|
const defaultBranding = canvas_kit_styling_1.createStyles({ name: "fijyj9", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1));--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400, rgba(74,85,97,1));--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600, rgba(185,192,199,1));--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600, rgba(33,122,55,1));--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500, rgba(49,156,76,1));--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400, rgba(67,196,99,1));--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300, rgba(95,227,128,1));--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100, rgba(235,255,240,1));--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600, rgba(163,27,18,1));--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200, rgba(252,201,197,1));--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100, rgba(255,239,238,1));--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600, rgba(192,108,0,1));--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500, rgba(243,139,0,1));--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1));--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200, rgba(252,212,159,1));--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100, rgba(255,238,217,1));--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600, rgba(0,67,135,1));--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500, rgba(0,92,185,1));--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200, rgba(166,210,255,1));--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100, rgba(215,234,252,1));--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base, rgba(8,117,225,1)) 0%, var(--cnvs-brand-primary-dark, rgba(0,92,185,1)) 100%);" });
|
|
@@ -62,7 +61,8 @@ exports.useCanvasThemeToCssVars = useCanvasThemeToCssVars;
|
|
|
62
61
|
const CanvasProvider = ({ children, theme = { canvas: theming_1.defaultCanvasTheme }, ...props }) => {
|
|
63
62
|
var _a;
|
|
64
63
|
const elemProps = exports.useCanvasThemeToCssVars(theme, props);
|
|
65
|
-
|
|
64
|
+
const cache = canvas_kit_styling_1.getCache();
|
|
65
|
+
return (React.createElement(react_1.CacheProvider, { value: cache },
|
|
66
66
|
React.createElement(react_1.ThemeProvider, { theme: theme },
|
|
67
67
|
React.createElement(InputProvider_1.InputProvider, null),
|
|
68
68
|
React.createElement("div", Object.assign({ dir: ((_a = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _a === void 0 ? void 0 : _a.direction) || theming_1.defaultCanvasTheme.direction }, elemProps), children))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAe,MAAM,6BAA6B,CAAC;AAYzE,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AA0B9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,EAAE;AACtC;;;GAGG;AACH,QAAQ,EAAE,CAAC;AACX;;;GAGG;AACH,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,gBAAgB,CAAC,CA4BxC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.mergeStyles = void 0;
|
|
4
|
-
const css_1 = require("@emotion/css");
|
|
5
4
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
6
5
|
const Box_1 = require("../Box");
|
|
7
6
|
const background_1 = require("./background");
|
|
@@ -67,16 +66,12 @@ localCs) {
|
|
|
67
66
|
}
|
|
68
67
|
return result;
|
|
69
68
|
}, {});
|
|
70
|
-
|
|
71
|
-
// classes into a single class name in the order that the class names are listed. This variable
|
|
72
|
-
// will collect the CSS class name created by Emotion if we detect style props.
|
|
73
|
-
let stylePropsClassName = '';
|
|
69
|
+
let styles = {};
|
|
74
70
|
// We have style props. We need to create style and merge with our `csToProps` to get the correct
|
|
75
71
|
// merging order for styles
|
|
76
72
|
if (shouldRuntimeMergeStyles) {
|
|
77
|
-
|
|
78
|
-
stylePropsClassName = css_1.css(styles);
|
|
73
|
+
styles = Box_1.boxStyleFn(styleProps);
|
|
79
74
|
}
|
|
80
|
-
return canvas_kit_styling_1.handleCsProp(elemProps, [localCs,
|
|
75
|
+
return canvas_kit_styling_1.handleCsProp(elemProps, [localCs, styles]);
|
|
81
76
|
}
|
|
82
77
|
exports.mergeStyles = mergeStyles;
|
|
@@ -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":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAqB,yBAAyB,EAAW,MAAM,WAAW,CAAC;AAIlF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,yBAAyB,CAAC;CACnC;AAkDD,eAAO,MAAM,uBAAuB,UAC3B,yBAAyB,GAAG,SAAS,aACjC,MAAM,cAAc,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqB7C,CAAC;AAEF,eAAO,MAAM,cAAc,kCAIxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,gBAgBzD,CAAC"}
|
|
@@ -3,8 +3,7 @@ import { ThemeProvider, CacheProvider } from '@emotion/react';
|
|
|
3
3
|
import { InputProvider } from './InputProvider';
|
|
4
4
|
import { defaultCanvasTheme, useTheme } from './theming';
|
|
5
5
|
import { brand } from '@workday/canvas-tokens-web';
|
|
6
|
-
import {
|
|
7
|
-
import { createStyles } from '@workday/canvas-kit-styling';
|
|
6
|
+
import { createStyles, getCache } from '@workday/canvas-kit-styling';
|
|
8
7
|
// copied from brand/_variables.css
|
|
9
8
|
const defaultBranding = createStyles({ name: "fijyj9", styles: "--cnvs-brand-error-darkest:rgba(128,22,14,1);--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1));--cnvs-brand-common-error-inner:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));--cnvs-brand-neutral-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-licorice-400, rgba(74,85,97,1));--cnvs-brand-neutral-dark:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));--cnvs-brand-neutral-base:var(--cnvs-base-palette-soap-600, rgba(185,192,199,1));--cnvs-brand-neutral-light:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));--cnvs-brand-success-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-apple-600, rgba(33,122,55,1));--cnvs-brand-success-dark:var(--cnvs-base-palette-green-apple-500, rgba(49,156,76,1));--cnvs-brand-success-base:var(--cnvs-base-palette-green-apple-400, rgba(67,196,99,1));--cnvs-brand-success-light:var(--cnvs-base-palette-green-apple-300, rgba(95,227,128,1));--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-apple-100, rgba(235,255,240,1));--cnvs-brand-error-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-error-dark:var(--cnvs-base-palette-cinnamon-600, rgba(163,27,18,1));--cnvs-brand-error-base:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));--cnvs-brand-error-light:var(--cnvs-base-palette-cinnamon-200, rgba(252,201,197,1));--cnvs-brand-error-lightest:var(--cnvs-base-palette-cinnamon-100, rgba(255,239,238,1));--cnvs-brand-alert-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-alert-darkest:var(--cnvs-base-palette-cantaloupe-600, rgba(192,108,0,1));--cnvs-brand-alert-dark:var(--cnvs-base-palette-cantaloupe-500, rgba(243,139,0,1));--cnvs-brand-alert-base:var(--cnvs-base-palette-cantaloupe-400, rgba(255,161,38,1));--cnvs-brand-alert-light:var(--cnvs-base-palette-cantaloupe-200, rgba(252,212,159,1));--cnvs-brand-alert-lightest:var(--cnvs-base-palette-cantaloupe-100, rgba(255,238,217,1));--cnvs-brand-primary-accent:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blueberry-600, rgba(0,67,135,1));--cnvs-brand-primary-dark:var(--cnvs-base-palette-blueberry-500, rgba(0,92,185,1));--cnvs-brand-primary-base:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));--cnvs-brand-primary-light:var(--cnvs-base-palette-blueberry-200, rgba(166,210,255,1));--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blueberry-100, rgba(215,234,252,1));--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base, rgba(8,117,225,1)) 0%, var(--cnvs-brand-primary-dark, rgba(0,92,185,1)) 100%);" });
|
|
10
9
|
const mappedKeys = {
|
|
@@ -39,6 +38,7 @@ export const useCanvasThemeToCssVars = (theme, elemProps) => {
|
|
|
39
38
|
export const CanvasProvider = ({ children, theme = { canvas: defaultCanvasTheme }, ...props }) => {
|
|
40
39
|
var _a;
|
|
41
40
|
const elemProps = useCanvasThemeToCssVars(theme, props);
|
|
41
|
+
const cache = getCache();
|
|
42
42
|
return (React.createElement(CacheProvider, { value: cache },
|
|
43
43
|
React.createElement(ThemeProvider, { theme: theme },
|
|
44
44
|
React.createElement(InputProvider, null),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"mergeStyles.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/mergeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAe,MAAM,6BAA6B,CAAC;AAYzE,OAAO,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC;AA0B9C;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,EAAE;AACtC;;;GAGG;AACH,QAAQ,EAAE,CAAC;AACX;;;GAGG;AACH,OAAO,CAAC,EAAE,cAAc,GACvB,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,gBAAgB,CAAC,CA4BxC"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { css } from '@emotion/css';
|
|
2
1
|
import { handleCsProp } from '@workday/canvas-kit-styling';
|
|
3
2
|
import { boxStyleFn } from '../Box';
|
|
4
3
|
import { backgroundStyleFnConfigs } from './background';
|
|
@@ -64,15 +63,11 @@ localCs) {
|
|
|
64
63
|
}
|
|
65
64
|
return result;
|
|
66
65
|
}, {});
|
|
67
|
-
|
|
68
|
-
// classes into a single class name in the order that the class names are listed. This variable
|
|
69
|
-
// will collect the CSS class name created by Emotion if we detect style props.
|
|
70
|
-
let stylePropsClassName = '';
|
|
66
|
+
let styles = {};
|
|
71
67
|
// We have style props. We need to create style and merge with our `csToProps` to get the correct
|
|
72
68
|
// merging order for styles
|
|
73
69
|
if (shouldRuntimeMergeStyles) {
|
|
74
|
-
|
|
75
|
-
stylePropsClassName = css(styles);
|
|
70
|
+
styles = boxStyleFn(styleProps);
|
|
76
71
|
}
|
|
77
|
-
return handleCsProp(elemProps, [localCs,
|
|
72
|
+
return handleCsProp(elemProps, [localCs, styles]);
|
|
78
73
|
}
|
|
@@ -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
|
/**
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import {css} from '@emotion/css';
|
|
2
1
|
import {CSToPropsInput, handleCsProp} from '@workday/canvas-kit-styling';
|
|
3
2
|
import {boxStyleFn} from '../Box';
|
|
4
3
|
import {backgroundStyleFnConfigs} from './background';
|
|
@@ -71,20 +70,13 @@ export function mergeStyles<T extends {}>(
|
|
|
71
70
|
return result;
|
|
72
71
|
}, {});
|
|
73
72
|
|
|
74
|
-
|
|
75
|
-
// classes into a single class name in the order that the class names are listed. This variable
|
|
76
|
-
// will collect the CSS class name created by Emotion if we detect style props.
|
|
77
|
-
let stylePropsClassName = '';
|
|
73
|
+
let styles = {};
|
|
78
74
|
|
|
79
75
|
// We have style props. We need to create style and merge with our `csToProps` to get the correct
|
|
80
76
|
// merging order for styles
|
|
81
77
|
if (shouldRuntimeMergeStyles) {
|
|
82
|
-
|
|
83
|
-
stylePropsClassName = css(styles);
|
|
78
|
+
styles = boxStyleFn(styleProps);
|
|
84
79
|
}
|
|
85
80
|
|
|
86
|
-
return handleCsProp(elemProps, [localCs,
|
|
87
|
-
T,
|
|
88
|
-
'cs' | keyof CommonStyleProps
|
|
89
|
-
>;
|
|
81
|
+
return handleCsProp(elemProps, [localCs, styles]) as Omit<T, 'cs' | keyof CommonStyleProps>;
|
|
90
82
|
}
|
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.21",
|
|
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",
|
|
@@ -44,14 +44,13 @@
|
|
|
44
44
|
"react": ">=16.14"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@emotion/css": "^11.7.1",
|
|
48
47
|
"@emotion/is-prop-valid": "^1.1.1",
|
|
49
48
|
"@emotion/react": "^11.7.1",
|
|
50
49
|
"@emotion/styled": "^11.6.0",
|
|
51
50
|
"@popperjs/core": "^2.5.4",
|
|
52
51
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
53
|
-
"@workday/canvas-kit-popup-stack": "^10.3.
|
|
54
|
-
"@workday/canvas-kit-styling": "^10.3.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^10.3.21",
|
|
53
|
+
"@workday/canvas-kit-styling": "^10.3.21",
|
|
55
54
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
56
55
|
"@workday/canvas-tokens-web": "^1.0.0",
|
|
57
56
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -69,5 +68,5 @@
|
|
|
69
68
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
70
69
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
71
70
|
},
|
|
72
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "34c1299ee9d566e02138463314a7d7eaf8ddde85"
|
|
73
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 = {
|