@workday/canvas-kit-react 10.4.0-706-next.0 → 10.4.0-725-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/button/lib/BaseButton.tsx +5 -17
- package/collection/lib/useCursorListModel.tsx +1 -1
- package/common/lib/CanvasProvider.tsx +2 -2
- package/common/lib/theming/useThemedRing.ts +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/common/lib/CanvasProvider.d.ts.map +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +2 -2
- package/dist/commonjs/common/lib/theming/useThemedRing.d.ts +1 -1
- package/dist/commonjs/common/lib/theming/useThemedRing.js +1 -1
- 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/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/common/lib/CanvasProvider.d.ts.map +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +2 -2
- package/dist/es6/common/lib/theming/useThemedRing.d.ts +1 -1
- package/dist/es6/common/lib/theming/useThemedRing.js +1 -1
- 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
- package/action-bar/LICENSE +0 -51
- package/action-bar/README.md +0 -6
- package/avatar/LICENSE +0 -51
- package/avatar/README.md +0 -111
- package/badge/LICENSE +0 -51
- package/badge/README.md +0 -127
- package/banner/LICENSE +0 -51
- package/banner/README.md +0 -7
- package/breadcrumbs/LICENSE +0 -52
- package/breadcrumbs/README.md +0 -9
- package/button/LICENSE +0 -51
- package/button/README.md +0 -272
- package/card/LICENSE +0 -51
- package/card/README.md +0 -7
- package/checkbox/LICENSE +0 -51
- package/checkbox/README.md +0 -7
- package/collection/LICENSE +0 -52
- package/collection/README.md +0 -32
- package/color-picker/LICENSE +0 -51
- package/color-picker/README.md +0 -13
- package/combobox/LICENSE +0 -52
- package/combobox/README.md +0 -7
- package/common/LICENSE +0 -51
- package/common/README.md +0 -467
- package/dialog/LICENSE +0 -52
- package/dialog/README.md +0 -10
- package/form-field/LICENSE +0 -51
- package/form-field/README.md +0 -5
- package/icon/LICENSE +0 -51
- package/icon/README.md +0 -428
- package/layout/LICENSE +0 -52
- package/layout/README.md +0 -151
- package/loading-dots/LICENSE +0 -51
- package/loading-dots/README.md +0 -7
- package/menu/LICENSE +0 -52
- package/menu/README.md +0 -32
- package/modal/README.md +0 -12
- package/pagination/LICENSE +0 -51
- package/pagination/README.md +0 -7
- package/popup/LICENSE +0 -51
- package/popup/README.md +0 -12
- package/radio/LICENSE +0 -51
- package/radio/README.md +0 -7
- package/segmented-control/LICENSE +0 -51
- package/segmented-control/README.md +0 -56
- package/select/README.md +0 -12
- package/side-panel/README.md +0 -174
- package/skeleton/README.md +0 -7
- package/status-indicator/LICENSE +0 -51
- package/status-indicator/README.md +0 -7
- package/switch/README.md +0 -7
- package/table/README.md +0 -7
- package/tabs/LICENSE +0 -51
- package/tabs/README.md +0 -7
- package/testing/LICENSE +0 -52
- package/testing/README.md +0 -6
- package/text/LICENSE +0 -52
- package/text/README.md +0 -5
- package/text-area/LICENSE +0 -51
- package/text-area/README.md +0 -7
- package/text-input/LICENSE +0 -51
- package/text-input/README.md +0 -7
- package/toast/LICENSE +0 -52
- package/toast/README.md +0 -5
- package/tokens/LICENSE +0 -51
- package/tokens/README.md +0 -427
- package/tooltip/LICENSE +0 -51
- package/tooltip/README.md +0 -77
|
@@ -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
|
};
|
|
@@ -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}>
|
|
@@ -63,7 +63,7 @@ export function getPaletteColorsForFocusRing(
|
|
|
63
63
|
* alerts, but use them in combination with icons or hint text.
|
|
64
64
|
* ```tsx
|
|
65
65
|
* // Add here jsx pragma to use css
|
|
66
|
-
* import {jsx} from '@emotion/
|
|
66
|
+
* import {jsx} from '@emotion/react';
|
|
67
67
|
* import React from 'react';
|
|
68
68
|
* import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
69
69
|
* import {useThemedRing} from '@workday/canvas-kit-react/common';
|
|
@@ -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":"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))));
|
|
@@ -15,7 +15,7 @@ export declare function getPaletteColorsForFocusRing(type: paletteSelection, the
|
|
|
15
15
|
* alerts, but use them in combination with icons or hint text.
|
|
16
16
|
* ```tsx
|
|
17
17
|
* // Add here jsx pragma to use css
|
|
18
|
-
* import {jsx} from '@emotion/
|
|
18
|
+
* import {jsx} from '@emotion/react';
|
|
19
19
|
* import React from 'react';
|
|
20
20
|
* import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
21
21
|
* import {useThemedRing} from '@workday/canvas-kit-react/common';
|
|
@@ -52,7 +52,7 @@ exports.getPaletteColorsForFocusRing = getPaletteColorsForFocusRing;
|
|
|
52
52
|
* alerts, but use them in combination with icons or hint text.
|
|
53
53
|
* ```tsx
|
|
54
54
|
* // Add here jsx pragma to use css
|
|
55
|
-
* import {jsx} from '@emotion/
|
|
55
|
+
* import {jsx} from '@emotion/react';
|
|
56
56
|
* import React from 'react';
|
|
57
57
|
* import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
58
58
|
* import {useThemedRing} from '@workday/canvas-kit-react/common';
|
|
@@ -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
|
/**
|
|
@@ -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":"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),
|
|
@@ -15,7 +15,7 @@ export declare function getPaletteColorsForFocusRing(type: paletteSelection, the
|
|
|
15
15
|
* alerts, but use them in combination with icons or hint text.
|
|
16
16
|
* ```tsx
|
|
17
17
|
* // Add here jsx pragma to use css
|
|
18
|
-
* import {jsx} from '@emotion/
|
|
18
|
+
* import {jsx} from '@emotion/react';
|
|
19
19
|
* import React from 'react';
|
|
20
20
|
* import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
21
21
|
* import {useThemedRing} from '@workday/canvas-kit-react/common';
|
|
@@ -45,7 +45,7 @@ export function getPaletteColorsForFocusRing(type, theme) {
|
|
|
45
45
|
* alerts, but use them in combination with icons or hint text.
|
|
46
46
|
* ```tsx
|
|
47
47
|
* // Add here jsx pragma to use css
|
|
48
|
-
* import {jsx} from '@emotion/
|
|
48
|
+
* import {jsx} from '@emotion/react';
|
|
49
49
|
* import React from 'react';
|
|
50
50
|
* import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
51
51
|
* import {useThemedRing} from '@workday/canvas-kit-react/common';
|
|
@@ -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;;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
|
/**
|