@workday/canvas-kit-react 11.0.0-alpha.682-next.0 → 11.0.0-alpha.696-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/collection/lib/useCursorListModel.tsx +86 -90
- package/collection/lib/useListItemAllowChildStrings.ts +3 -3
- package/collection/lib/useListRenderItem.tsx +1 -1
- package/combobox/lib/hooks/useComboboxInput.ts +1 -0
- package/combobox/lib/hooks/useComboboxKeyboardTypeAhead.ts +3 -3
- package/combobox/lib/hooks/useComboboxModel.tsx +1 -2
- package/common/README.md +32 -14
- package/common/lib/styles/errorRing.ts +2 -2
- package/dist/commonjs/badge/lib/CountBadge.js +1 -1
- package/dist/commonjs/collection/lib/useCursorListModel.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useListItemAllowChildStrings.d.ts +2 -1
- package/dist/commonjs/collection/lib/useListItemAllowChildStrings.d.ts.map +1 -1
- package/dist/commonjs/collection/lib/useListItemAllowChildStrings.js +1 -1
- package/dist/commonjs/collection/lib/useListRenderItem.js +1 -1
- package/dist/commonjs/combobox/lib/hooks/useComboboxInput.d.ts +1 -0
- package/dist/commonjs/combobox/lib/hooks/useComboboxInput.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/hooks/useComboboxInput.js +1 -0
- package/dist/commonjs/combobox/lib/hooks/useComboboxKeyboardTypeAhead.js +2 -3
- package/dist/commonjs/combobox/lib/hooks/useComboboxModel.d.ts.map +1 -1
- package/dist/commonjs/combobox/lib/hooks/useComboboxModel.js +1 -2
- package/dist/commonjs/common/lib/styles/errorRing.js +2 -2
- package/dist/commonjs/form-field/lib/Label.js +3 -7
- package/dist/commonjs/loading-dots/lib/LoadingDots.js +1 -1
- package/dist/commonjs/select/lib/Select.d.ts +2 -1
- package/dist/commonjs/select/lib/Select.d.ts.map +1 -1
- package/dist/commonjs/select/lib/Select.js +4 -2
- package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts +7 -1
- package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts.map +1 -1
- package/dist/commonjs/select/lib/hooks/useSelectInput.js +45 -4
- package/dist/commonjs/select/lib/hooks/useSelectModel.d.ts.map +1 -1
- package/dist/commonjs/select/lib/hooks/useSelectModel.js +1 -2
- package/dist/commonjs/text-input/lib/TextInput.js +3 -3
- package/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts.map +1 -1
- package/dist/commonjs/tooltip/lib/OverflowTooltip.js +3 -2
- package/dist/es6/collection/lib/useCursorListModel.d.ts.map +1 -1
- package/dist/es6/collection/lib/useListItemAllowChildStrings.d.ts +2 -1
- package/dist/es6/collection/lib/useListItemAllowChildStrings.d.ts.map +1 -1
- package/dist/es6/collection/lib/useListItemAllowChildStrings.js +1 -1
- package/dist/es6/collection/lib/useListRenderItem.js +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxInput.d.ts +1 -0
- package/dist/es6/combobox/lib/hooks/useComboboxInput.d.ts.map +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxInput.js +1 -0
- package/dist/es6/combobox/lib/hooks/useComboboxKeyboardTypeAhead.js +2 -3
- package/dist/es6/combobox/lib/hooks/useComboboxModel.d.ts.map +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxModel.js +1 -2
- package/dist/es6/common/lib/styles/errorRing.js +2 -2
- package/dist/es6/form-field/lib/Label.js +3 -7
- package/dist/es6/select/lib/Select.d.ts +2 -1
- package/dist/es6/select/lib/Select.d.ts.map +1 -1
- package/dist/es6/select/lib/Select.js +4 -2
- package/dist/es6/select/lib/hooks/useSelectInput.d.ts +7 -1
- package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map +1 -1
- package/dist/es6/select/lib/hooks/useSelectInput.js +43 -5
- package/dist/es6/select/lib/hooks/useSelectModel.d.ts.map +1 -1
- package/dist/es6/select/lib/hooks/useSelectModel.js +1 -2
- package/dist/es6/text-input/lib/TextInput.js +3 -3
- package/dist/es6/tooltip/lib/OverflowTooltip.d.ts.map +1 -1
- package/dist/es6/tooltip/lib/OverflowTooltip.js +3 -2
- package/form-field/lib/Label.tsx +10 -10
- package/package.json +4 -4
- package/select/lib/Select.tsx +51 -4
- package/select/lib/hooks/useSelectInput.ts +86 -44
- package/select/lib/hooks/useSelectModel.tsx +1 -2
- package/text-input/lib/TextInput.tsx +3 -3
- package/tooltip/lib/OverflowTooltip.tsx +3 -2
|
@@ -135,112 +135,108 @@ const getItem: (id: string, model: NavigationInput) => Item<Generic> = (id, {sta
|
|
|
135
135
|
return item;
|
|
136
136
|
};
|
|
137
137
|
|
|
138
|
-
export const getWrappingOffsetItem =
|
|
139
|
-
|
|
140
|
-
{state}: NavigationInput,
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
if (offset === -1) {
|
|
149
|
-
return getLast(index, {state});
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
const items = state.items;
|
|
153
|
-
|
|
154
|
-
let nextIndex = index + offset;
|
|
155
|
-
|
|
156
|
-
// calculate idealLength as in if the grid was a perfect rectangle
|
|
157
|
-
const rows = Math.ceil(items.length / state.columnCount);
|
|
158
|
-
const idealLength = rows * state.columnCount;
|
|
159
|
-
if (nextIndex < 0) {
|
|
160
|
-
if (offset === -1) {
|
|
161
|
-
// if the offset is -1, we want to wrap to the end
|
|
162
|
-
nextIndex = items.length - 1;
|
|
163
|
-
} else {
|
|
164
|
-
// if the offset is smaller than -1, we want to wrap by column
|
|
165
|
-
if (idealLength + nextIndex >= items.length) {
|
|
166
|
-
// we'll overflow the grid because there isn't enough items. Move `nextIndex` up so we wrap in
|
|
167
|
-
// the right spot
|
|
168
|
-
nextIndex -= state.columnCount;
|
|
138
|
+
export const getWrappingOffsetItem =
|
|
139
|
+
(offset: number) =>
|
|
140
|
+
(index: number, {state}: NavigationInput, tries = state.items.length): number => {
|
|
141
|
+
if (Number.isNaN(index)) {
|
|
142
|
+
// we have no valid index. If the offset is positive, we'll return the first item
|
|
143
|
+
if (offset === 1) {
|
|
144
|
+
return getFirst(index, {state});
|
|
145
|
+
}
|
|
146
|
+
if (offset === -1) {
|
|
147
|
+
return getLast(index, {state});
|
|
169
148
|
}
|
|
170
|
-
nextIndex = idealLength + nextIndex;
|
|
171
149
|
}
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
150
|
+
const items = state.items;
|
|
151
|
+
|
|
152
|
+
let nextIndex = index + offset;
|
|
153
|
+
|
|
154
|
+
// calculate idealLength as in if the grid was a perfect rectangle
|
|
155
|
+
const rows = Math.ceil(items.length / state.columnCount);
|
|
156
|
+
const idealLength = rows * state.columnCount;
|
|
157
|
+
if (nextIndex < 0) {
|
|
158
|
+
if (offset === -1) {
|
|
159
|
+
// if the offset is -1, we want to wrap to the end
|
|
160
|
+
nextIndex = items.length - 1;
|
|
161
|
+
} else {
|
|
162
|
+
// if the offset is smaller than -1, we want to wrap by column
|
|
163
|
+
if (idealLength + nextIndex >= items.length) {
|
|
164
|
+
// we'll overflow the grid because there isn't enough items. Move `nextIndex` up so we wrap in
|
|
165
|
+
// the right spot
|
|
166
|
+
nextIndex -= state.columnCount;
|
|
167
|
+
}
|
|
168
|
+
nextIndex = idealLength + nextIndex;
|
|
169
|
+
}
|
|
170
|
+
} else if (nextIndex >= items.length) {
|
|
171
|
+
if (offset === 1) {
|
|
172
|
+
// if the offset is 1, we want to wrap to the beginning
|
|
173
|
+
nextIndex = 0;
|
|
174
|
+
} else {
|
|
175
|
+
// if the offset is larger than 1, we want to wrap by column
|
|
176
|
+
if (nextIndex - idealLength < 0) {
|
|
177
|
+
// we're going to overflow the grid because there isn't enough items. Move `nextIndex` down to
|
|
178
|
+
// the missing item in the next row. This way we'll end up wrapping in the right spot
|
|
179
|
+
nextIndex += state.columnCount;
|
|
180
|
+
}
|
|
181
|
+
nextIndex = nextIndex - idealLength;
|
|
182
182
|
}
|
|
183
|
-
nextIndex = nextIndex - idealLength;
|
|
184
183
|
}
|
|
185
|
-
}
|
|
186
184
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
185
|
+
if (items.length > 1 && state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
|
|
186
|
+
// The next item is disabled, try again, but only if we haven't already tried everything.
|
|
187
|
+
// Avoid an infinite loop with `tries`
|
|
188
|
+
return getWrappingOffsetItem(offset)(nextIndex, {state}, tries - 1);
|
|
189
|
+
}
|
|
192
190
|
|
|
193
|
-
|
|
194
|
-
};
|
|
191
|
+
return nextIndex;
|
|
192
|
+
};
|
|
195
193
|
|
|
196
|
-
export const getOffsetItem =
|
|
197
|
-
|
|
198
|
-
{state}: NavigationInput,
|
|
199
|
-
|
|
200
|
-
): number => {
|
|
201
|
-
const {items, columnCount} = state;
|
|
194
|
+
export const getOffsetItem =
|
|
195
|
+
(offset: number) =>
|
|
196
|
+
(index: number, {state}: NavigationInput, tries = state.items.length): number => {
|
|
197
|
+
const {items, columnCount} = state;
|
|
202
198
|
|
|
203
|
-
|
|
199
|
+
let nextIndex = index + offset;
|
|
204
200
|
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
201
|
+
if (Math.abs(offset) < columnCount) {
|
|
202
|
+
// if we're here, the columnCount is non-zero and the absolute value of offset is less than the
|
|
203
|
+
// column count. We don't want to wrap, so we'll bound within the row
|
|
208
204
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
205
|
+
const currentIndexInRow = index % columnCount;
|
|
206
|
+
const nextIndexInRow = nextIndex - index + currentIndexInRow;
|
|
207
|
+
if (nextIndexInRow >= columnCount || nextIndexInRow < 0) {
|
|
208
|
+
nextIndex = index;
|
|
209
|
+
}
|
|
210
|
+
} else if (columnCount) {
|
|
211
|
+
// if we're here, there's a column count, but the offset will move into another row. We need to
|
|
212
|
+
// bound to row values
|
|
213
|
+
const nextRow = Math.floor(nextIndex / columnCount);
|
|
218
214
|
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
215
|
+
if (nextRow < 0 || nextRow >= columnCount) {
|
|
216
|
+
nextIndex = index;
|
|
217
|
+
}
|
|
222
218
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
219
|
+
// make sure we don't go out of bounds if the grid isn't a perfect rectangle
|
|
220
|
+
if (nextIndex > items.length - 1) {
|
|
221
|
+
nextIndex = index;
|
|
222
|
+
}
|
|
226
223
|
}
|
|
227
|
-
}
|
|
228
224
|
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
225
|
+
// make sure we're always in bounds
|
|
226
|
+
if (nextIndex < 0) {
|
|
227
|
+
nextIndex = 0;
|
|
228
|
+
} else if (nextIndex >= items.length) {
|
|
229
|
+
nextIndex = items.length - 1;
|
|
230
|
+
}
|
|
235
231
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
232
|
+
if (state.nonInteractiveIds.includes(items[nextIndex].id) && tries > 0) {
|
|
233
|
+
// The next item is disabled, try again, but only if we haven't already tried everything.
|
|
234
|
+
// Avoid an infinite loop with `tries`
|
|
235
|
+
return getOffsetItem(offset)(nextIndex, {state}, tries - 1);
|
|
236
|
+
}
|
|
241
237
|
|
|
242
|
-
|
|
243
|
-
};
|
|
238
|
+
return nextIndex;
|
|
239
|
+
};
|
|
244
240
|
|
|
245
241
|
/**
|
|
246
242
|
* The default navigation manager of lists. This navigation manager will wrap around when the edge
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {createElemPropsHook} from '@workday/canvas-kit-react/common';
|
|
2
|
-
import {useListModel} from '@workday/canvas-kit-react/collection';
|
|
2
|
+
import {useListModel, Item} from '@workday/canvas-kit-react/collection';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* This elemProps hook allows for children values to be considered identifiers if the children are
|
|
@@ -27,9 +27,9 @@ import {useListModel} from '@workday/canvas-kit-react/collection';
|
|
|
27
27
|
* ```
|
|
28
28
|
*/
|
|
29
29
|
export const useListItemAllowChildStrings = createElemPropsHook(useListModel)(
|
|
30
|
-
(_, __, elemProps: {'data-id'?: string; children?: React.ReactNode} = {}) => {
|
|
30
|
+
(_, __, elemProps: {'data-id'?: string; children?: React.ReactNode; item?: Item<any>} = {}) => {
|
|
31
31
|
const props: {'data-id'?: string} = {};
|
|
32
|
-
if (!elemProps['data-id'] && typeof elemProps.children === 'string') {
|
|
32
|
+
if (!elemProps['data-id'] && !elemProps.item && typeof elemProps.children === 'string') {
|
|
33
33
|
props['data-id'] = elemProps.children;
|
|
34
34
|
}
|
|
35
35
|
|
|
@@ -74,6 +74,7 @@ export const useComboboxInput = composeHooks(
|
|
|
74
74
|
'aria-expanded': model.state.visibility === 'visible',
|
|
75
75
|
'aria-autocomplete': 'list',
|
|
76
76
|
'aria-controls': `${model.state.id}-list`,
|
|
77
|
+
'aria-activedescendant': model.state.visibility === 'hidden' ? null : undefined, // Removes activedescendant on menu close
|
|
77
78
|
id: model.state.id,
|
|
78
79
|
ref: elementRef,
|
|
79
80
|
} as const;
|
|
@@ -57,13 +57,13 @@ export const useComboboxKeyboardTypeAhead = createElemPropsHook(useComboboxModel
|
|
|
57
57
|
return -1;
|
|
58
58
|
};
|
|
59
59
|
|
|
60
|
-
const
|
|
61
|
-
|
|
60
|
+
const currentItemIndex =
|
|
61
|
+
model.state.items.length > 0 ? model.navigation.getItem(model.state.cursorId, model).index : 0;
|
|
62
62
|
|
|
63
63
|
const handleKeyboardTypeAhead = (key: string, numOptions: number) => {
|
|
64
64
|
// If the starting point is beyond the list of options, reset it
|
|
65
65
|
// to the beginning of the list
|
|
66
|
-
const startNumber = keySofar.current.length === 0 ?
|
|
66
|
+
const startNumber = keySofar.current.length === 0 ? currentItemIndex + 1 : currentItemIndex;
|
|
67
67
|
|
|
68
68
|
const start = startNumber === numOptions ? 0 : startNumber;
|
|
69
69
|
|
|
@@ -56,8 +56,7 @@ export const useComboboxModel = createModelHook({
|
|
|
56
56
|
const menu = useMenuModel(
|
|
57
57
|
useMenuModel.mergeConfig(config, {
|
|
58
58
|
onSelect({id}) {
|
|
59
|
-
|
|
60
|
-
dispatchInputEvent(menu.state.targetRef.current, textValue);
|
|
59
|
+
dispatchInputEvent(menu.state.targetRef.current, id);
|
|
61
60
|
},
|
|
62
61
|
})
|
|
63
62
|
);
|
package/common/README.md
CHANGED
|
@@ -10,16 +10,32 @@ yarn add @workday/canvas-kit-react
|
|
|
10
10
|
|
|
11
11
|
Includes:
|
|
12
12
|
|
|
13
|
-
- [
|
|
14
|
-
- [
|
|
15
|
-
- [
|
|
16
|
-
- [
|
|
17
|
-
- [
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
- [
|
|
21
|
-
|
|
22
|
-
- [
|
|
13
|
+
- [Canvas Kit Common](#canvas-kit-common)
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [CanvasProvider](#canvasprovider)
|
|
16
|
+
- [Storybook Decorator](#storybook-decorator)
|
|
17
|
+
- [Input Provider](#input-provider)
|
|
18
|
+
- [Definitions](#definitions)
|
|
19
|
+
- [Usage](#usage)
|
|
20
|
+
- [Static Properties](#static-properties)
|
|
21
|
+
- [`InputTypes`](#inputtypes)
|
|
22
|
+
- [Component Props](#component-props)
|
|
23
|
+
- [Required](#required)
|
|
24
|
+
- [Optional](#optional)
|
|
25
|
+
- [`provideIntent: boolean`](#provideintent-boolean)
|
|
26
|
+
- [`container: HTMLElement | React.RefObject<HTMLElement>`](#container-htmlelement--reactrefobjecthtmlelement)
|
|
27
|
+
- [Storybook Decorator](#storybook-decorator-1)
|
|
28
|
+
- [Theming](#theming)
|
|
29
|
+
- [Bidirectionality](#bidirectionality)
|
|
30
|
+
- [Component Functions](#component-functions)
|
|
31
|
+
- [`createComponent`](#createcomponent)
|
|
32
|
+
- [`ExtractProps`](#extractprops)
|
|
33
|
+
- [Common Hooks](#common-hooks)
|
|
34
|
+
- [useUniqueId](#useuniqueid)
|
|
35
|
+
- [Utility Functions](#utility-functions)
|
|
36
|
+
- [generateUniqueId](#generateuniqueid)
|
|
37
|
+
- [setUniqueSeed](#setuniqueseed)
|
|
38
|
+
- [resetUniqueIdCount](#resetuniqueidcount)
|
|
23
39
|
|
|
24
40
|
## CanvasProvider
|
|
25
41
|
|
|
@@ -71,7 +87,7 @@ MyStory.decorators = [CanvasProviderDecorator];
|
|
|
71
87
|
### Input Provider
|
|
72
88
|
|
|
73
89
|
This is a higher order (wrapping) component for providing css-referencable data attributes for the
|
|
74
|
-
users current input. Focus outlines are required for
|
|
90
|
+
users current input. Focus outlines are required for accessibility, but they can be unnecessary
|
|
75
91
|
visual noise when using a mouse. This allows us to hide focus outlines (as desired) while the user
|
|
76
92
|
is interacting with components using a mouse, touch, etc. and show them when keyboard navigation
|
|
77
93
|
begins. This logic is heavily influenced by [what-input](https://github.com/ten1seven/what-input).
|
|
@@ -344,7 +360,7 @@ this example, `onClick` doesn't exist on `MyComponent`, but since `MyComponent`
|
|
|
344
360
|
If we inspect the `MyNewComponentProps` type, it will return the following:
|
|
345
361
|
|
|
346
362
|
```tsx
|
|
347
|
-
MyComponentProps & React.HTMLAttributes<HTMLElement
|
|
363
|
+
MyComponentProps & React.HTMLAttributes<HTMLElement>;
|
|
348
364
|
```
|
|
349
365
|
|
|
350
366
|
Inside Canvas Kit components, we use `ExtractProps` when we need to extend from the interfaces of
|
|
@@ -377,9 +393,11 @@ be returned since there is not HTML attribute interface associated with `Compone
|
|
|
377
393
|
|
|
378
394
|
### useUniqueId
|
|
379
395
|
|
|
380
|
-
A hook to generate a unique identifier for an element
|
|
396
|
+
A hook to generate a unique identifier for an element – most commonly used for accessibility. The
|
|
381
397
|
hook will generate a unique id the first render and always return the same id every render. This
|
|
382
|
-
uses [generateUniqueId](#generateuniqueid) internally.
|
|
398
|
+
uses [generateUniqueId](#generateuniqueid) internally. You should use `useUniqueId` when you need to
|
|
399
|
+
create a unique ID within a component's render loop. Otherwise, you should opt for
|
|
400
|
+
`generateUniqueId`.
|
|
383
401
|
|
|
384
402
|
```tsx
|
|
385
403
|
const MyComponent = () => {
|
|
@@ -53,10 +53,10 @@ export function errorRing(error?: ErrorType, theme?: EmotionCanvasTheme): CSSObj
|
|
|
53
53
|
borderColor: errorColors.outer,
|
|
54
54
|
transition: '100ms box-shadow',
|
|
55
55
|
boxShadow: errorBoxShadow,
|
|
56
|
-
'&:hover, &:disabled': {
|
|
56
|
+
'&:hover, &:disabled, &.hover, &.disabled': {
|
|
57
57
|
borderColor: errorColors.outer,
|
|
58
58
|
},
|
|
59
|
-
'&:focus:not([disabled])': {
|
|
59
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled])': {
|
|
60
60
|
borderColor: errorColors.outer,
|
|
61
61
|
boxShadow: `${errorBoxShadow},
|
|
62
62
|
0 0 0 2px ${colors.frenchVanilla100},
|
|
@@ -24,7 +24,7 @@ const React = __importStar(require("react"));
|
|
|
24
24
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
25
25
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
26
26
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
27
|
-
const grow = keyframes({ name: "b0dw69", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
|
|
27
|
+
const grow = canvas_kit_styling_1.keyframes({ name: "b0dw69", styles: "from{transform:scale(0.85);}to{transform:scale(1.0);}" });
|
|
28
28
|
const countBadgeStencil = canvas_kit_styling_1.createStencil({
|
|
29
29
|
base: { name: "n9a3hm", styles: "align-items:center;animation:animation-b0dw69 0.2s ease;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;display:inline-flex;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-size:var(--cnvs-sys-font-size-subtext-medium, 0.75rem);font-weight:var(--cnvs-sys-font-weight-bold, 700);height:1.25rem;justify-content:center;line-height:1.25rem;min-width:1.25rem;padding:0 0.375rem;" },
|
|
30
30
|
modifiers: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,OAAO,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAmB,IAAI,EAAC,MAAM,oBAAoB,CAAC;AAE1D,aAAK,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC;AAE5E;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC;0CACsC;IACtC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B;mCAC+B;IAC/B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,0CAA0C;IAC1C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC;IAC/D;2FACuF;IACvF,OAAO,EAAE,mBAAmB,CAAC;IAC7B;uCACmC;IACnC,UAAU,EAAE,mBAAmB,CAAC;IAChC;+FAC2F;IAC3F,WAAW,EAAE,mBAAmB,CAAC;IACjC;0CACsC;IACtC,cAAc,EAAE,mBAAmB,CAAC;IACpC;kBACc;IACd,aAAa,EAAE,mBAAmB,CAAC;IACnC;kBACc;IACd,YAAY,EAAE,mBAAmB,CAAC;IAClC;;yEAEqE;IACrE,WAAW,EAAE,mBAAmB,CAAC;IACjC;;gFAE4E;IAC5E,eAAe,EAAE,mBAAmB,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,uBAAuB,YAAa,iBAAiB,sBAAY,CAAC;AAE/E;;GAEG;AACH,oBAAY,mBAAmB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,MAAM,CAAC;AAEpF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,mBAAuC,CAAC;AAC/D;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,mBAA4D,CAAC;AAEnF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,mBAM3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,mBAU1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,mBAMzB,CAAC;AAQF,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"useCursorListModel.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useCursorListModel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Item } from '@workday/canvas-kit-react/collection';
|
|
1
2
|
/**
|
|
2
3
|
* This elemProps hook allows for children values to be considered identifiers if the children are
|
|
3
4
|
* strings. This can be useful for autocomplete or select components that allow string values. This
|
|
@@ -47,7 +48,7 @@ export declare const useListItemAllowChildStrings: import("@workday/canvas-kit-r
|
|
|
47
48
|
indexRef: import("react").MutableRefObject<number>;
|
|
48
49
|
nonInteractiveIds: string[];
|
|
49
50
|
isVirtualized: boolean;
|
|
50
|
-
items:
|
|
51
|
+
items: Item<any>[];
|
|
51
52
|
};
|
|
52
53
|
events: {
|
|
53
54
|
select(data: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useListItemAllowChildStrings.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemAllowChildStrings.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useListItemAllowChildStrings.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemAllowChildStrings.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,IAAI,EAAC,MAAM,sCAAsC,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASxC,CAAC"}
|
|
@@ -30,7 +30,7 @@ const collection_1 = require("@workday/canvas-kit-react/collection");
|
|
|
30
30
|
*/
|
|
31
31
|
exports.useListItemAllowChildStrings = common_1.createElemPropsHook(collection_1.useListModel)((_, __, elemProps = {}) => {
|
|
32
32
|
const props = {};
|
|
33
|
-
if (!elemProps['data-id'] && typeof elemProps.children === 'string') {
|
|
33
|
+
if (!elemProps['data-id'] && !elemProps.item && typeof elemProps.children === 'string') {
|
|
34
34
|
props['data-id'] = elemProps.children;
|
|
35
35
|
}
|
|
36
36
|
return props;
|
|
@@ -92,6 +92,7 @@ export declare const useComboboxInput: import("@workday/canvas-kit-react/common"
|
|
|
92
92
|
readonly 'aria-expanded': boolean;
|
|
93
93
|
readonly 'aria-autocomplete': "list";
|
|
94
94
|
readonly 'aria-controls': `${string}-list`;
|
|
95
|
+
readonly 'aria-activedescendant': null | undefined;
|
|
95
96
|
readonly id: string;
|
|
96
97
|
readonly ref: (instance: unknown) => void;
|
|
97
98
|
} & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComboboxInput.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA6BN,mBAAmB;6BActB,gBAAgB;;8BAIf,gBAAgB
|
|
1
|
+
{"version":3,"file":"useComboboxInput.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA6BN,mBAAmB;6BActB,gBAAgB;;8BAIf,gBAAgB;;;;;;;;;;;;;;;;;;;EAqBpC,CAAC"}
|
|
@@ -71,6 +71,7 @@ exports.useComboboxInput = common_1.composeHooks(common_1.createElemPropsHook(us
|
|
|
71
71
|
'aria-expanded': model.state.visibility === 'visible',
|
|
72
72
|
'aria-autocomplete': 'list',
|
|
73
73
|
'aria-controls': `${model.state.id}-list`,
|
|
74
|
+
'aria-activedescendant': model.state.visibility === 'hidden' ? null : undefined,
|
|
74
75
|
id: model.state.id,
|
|
75
76
|
ref: elementRef,
|
|
76
77
|
};
|
|
@@ -52,12 +52,11 @@ exports.useComboboxKeyboardTypeAhead = common_1.createElemPropsHook(useComboboxM
|
|
|
52
52
|
}
|
|
53
53
|
return -1;
|
|
54
54
|
};
|
|
55
|
-
const
|
|
56
|
-
const cursorFocusedIndex = currentItem.index;
|
|
55
|
+
const currentItemIndex = model.state.items.length > 0 ? model.navigation.getItem(model.state.cursorId, model).index : 0;
|
|
57
56
|
const handleKeyboardTypeAhead = (key, numOptions) => {
|
|
58
57
|
// If the starting point is beyond the list of options, reset it
|
|
59
58
|
// to the beginning of the list
|
|
60
|
-
const startNumber = keySofar.current.length === 0 ?
|
|
59
|
+
const startNumber = keySofar.current.length === 0 ? currentItemIndex + 1 : currentItemIndex;
|
|
61
60
|
const start = startNumber === numOptions ? 0 : startNumber;
|
|
62
61
|
// Keeps track of the current key types and adds to it
|
|
63
62
|
// if you type `de` vs `d` for denver
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useComboboxModel.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;;;GAMG;AACH,eAAO,MAAM,aAAa;;oBAIN,MAAM,WAAW,CAAC,gBAAgB,CAAC;;sBAAnC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;oBAAnC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;sBAAnC,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;EAYrD,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;oBA1BT,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useComboboxModel.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxModel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -55,8 +55,7 @@ exports.useComboboxModel = common_1.createModelHook({
|
|
|
55
55
|
const input = exports.useInputModel(config);
|
|
56
56
|
const menu = menu_1.useMenuModel(menu_1.useMenuModel.mergeConfig(config, {
|
|
57
57
|
onSelect({ id }) {
|
|
58
|
-
|
|
59
|
-
common_1.dispatchInputEvent(menu.state.targetRef.current, textValue);
|
|
58
|
+
common_1.dispatchInputEvent(menu.state.targetRef.current, id);
|
|
60
59
|
},
|
|
61
60
|
}));
|
|
62
61
|
const [width, setWidth] = react_1.default.useState(0);
|
|
@@ -56,10 +56,10 @@ function errorRing(error, theme) {
|
|
|
56
56
|
borderColor: errorColors.outer,
|
|
57
57
|
transition: '100ms box-shadow',
|
|
58
58
|
boxShadow: errorBoxShadow,
|
|
59
|
-
'&:hover, &:disabled': {
|
|
59
|
+
'&:hover, &:disabled, &.hover, &.disabled': {
|
|
60
60
|
borderColor: errorColors.outer,
|
|
61
61
|
},
|
|
62
|
-
'&:focus:not([disabled])': {
|
|
62
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled])': {
|
|
63
63
|
borderColor: errorColors.outer,
|
|
64
64
|
boxShadow: `${errorBoxShadow},
|
|
65
65
|
0 0 0 2px ${tokens_1.colors.frenchVanilla100},
|
|
@@ -77,13 +77,9 @@ const LabelComponent = common_1.styled('label')(...labelStyles);
|
|
|
77
77
|
class Label extends React.Component {
|
|
78
78
|
render() {
|
|
79
79
|
const { labelPosition = Label.Position.Top, isLegend = false, required, ...elemProps } = this.props;
|
|
80
|
-
const children = !required
|
|
81
|
-
|
|
82
|
-
:
|
|
83
|
-
React.createElement("span", null,
|
|
84
|
-
this.props.children,
|
|
85
|
-
React.createElement(RequiredAsterisk, { key: '0', "aria-hidden": true }, "*")),
|
|
86
|
-
];
|
|
80
|
+
const children = !required ? (this.props.children) : (React.createElement("span", null,
|
|
81
|
+
this.props.children,
|
|
82
|
+
React.createElement(RequiredAsterisk, { key: '0', "aria-hidden": true }, "*")));
|
|
87
83
|
return (React.createElement(React.Fragment, null, isLegend ? (React.createElement(LegendComponent, Object.assign({ labelPosition: labelPosition, isLegend: isLegend }, elemProps, { children: children }))) : (React.createElement(LabelComponent, Object.assign({ labelPosition: labelPosition }, elemProps, { children: children })))));
|
|
88
84
|
}
|
|
89
85
|
}
|
|
@@ -31,7 +31,7 @@ const ANIMATION_DURATION_MS = '1400';
|
|
|
31
31
|
/**
|
|
32
32
|
* Keyframe for the dots loading animation.
|
|
33
33
|
*/
|
|
34
|
-
const keyframesLoading = keyframes({ name: "zl77bl", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
|
|
34
|
+
const keyframesLoading = canvas_kit_styling_1.keyframes({ name: "zl77bl", styles: "0%, 80%, 100%{transform:scale(0);}40%{transform:scale(1);}" });
|
|
35
35
|
const loadingDotStyles = canvas_kit_styling_1.createStyles({ name: "1f3yrdb", styles: "background-color:var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));width:var(--cnvs-sys-space-x4, calc(0.25rem * 4));height:var(--cnvs-sys-space-x4, calc(0.25rem * 4));font-size:var(--cnvs-sys-space-zero, 0);border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));transform:scale(0);display:inline-block;animation-name:animation-zl77bl;animation-duration:1400ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:both;&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1400ms * (4/35));}&:nth-child(3){animation-delay:calc(1400ms * (8/35));}" });
|
|
36
36
|
/**
|
|
37
37
|
* The actual loading dot div.
|
|
@@ -3,7 +3,8 @@ import { ExtractProps, Themeable } from '@workday/canvas-kit-react/common';
|
|
|
3
3
|
import { Combobox } from '@workday/canvas-kit-react/combobox';
|
|
4
4
|
import { TextInput } from '@workday/canvas-kit-react/text-input';
|
|
5
5
|
import { CanvasSystemIcon } from '@workday/design-assets-types';
|
|
6
|
-
|
|
6
|
+
import { CSProps } from '@workday/canvas-kit-styling';
|
|
7
|
+
export interface SelectInputProps extends ExtractProps<typeof TextInput>, CSProps {
|
|
7
8
|
/**
|
|
8
9
|
* The Icon to render at the start of the `input`. Use this prop if your options
|
|
9
10
|
* include icons that you would like to render in the `input` when selected.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAEZ,SAAS,EACV,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAE5D,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAO3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAElE,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAqBD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAEH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASrB,CAAC;AAEH,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC;CAAG;AAChF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIf;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;OAaG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;;;;;;;;;OAiBG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CASL,CAAC"}
|
|
@@ -16,14 +16,16 @@ const useSelectCard_1 = require("./hooks/useSelectCard");
|
|
|
16
16
|
const useSelectInput_1 = require("./hooks/useSelectInput");
|
|
17
17
|
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
|
|
18
18
|
const selectInputStyles = canvas_kit_styling_1.createStyles({ name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
|
|
19
|
+
const hiddenSelectStyles = canvas_kit_styling_1.createStyles({ name: "1uxiz6e", styles: "position:absolute;top:0px;bottom:0px;left:0px;right:0px;opacity:0px;cursor:default;pointer-events:none;" });
|
|
19
20
|
exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
|
|
20
21
|
modelHook: useSelectModel_1.useSelectModel,
|
|
21
22
|
elemPropsHook: useSelectInput_1.useSelectInput,
|
|
22
|
-
})(({ placeholder = 'Choose an option', inputStartIcon, width, ...elemProps }, Element, model) => {
|
|
23
|
+
})(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, width, ref, onChange, onInput, onFocus, value, name, ...elemProps }, Element, model) => {
|
|
23
24
|
return (react_1.default.createElement(text_input_1.InputGroup, { width: width, "data-width": "ck-formfield-width" },
|
|
24
25
|
inputStartIcon && model.state.selectedIds.length > 0 && (react_1.default.createElement(text_input_1.InputGroup.InnerStart, { pointerEvents: "none" },
|
|
25
26
|
react_1.default.createElement(icon_1.SystemIcon, { icon: inputStartIcon }))),
|
|
26
|
-
react_1.default.createElement(text_input_1.InputGroup.Input,
|
|
27
|
+
react_1.default.createElement(text_input_1.InputGroup.Input, { error: error, disabled: disabled, className: hiddenSelectStyles, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, onFocus: onFocus, name: name, ref: ref }),
|
|
28
|
+
react_1.default.createElement(text_input_1.InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, layout_1.mergeStyles(elemProps, [selectInputStyles]))),
|
|
27
29
|
react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
|
|
28
30
|
react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }))));
|
|
29
31
|
});
|