@workday/canvas-kit-react 10.3.4 → 10.3.6
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/lib/styles/errorRing.ts +2 -2
- 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/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/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/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/package.json +4 -4
- package/select/lib/Select.tsx +50 -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
|
@@ -37,10 +37,10 @@ const StyledTextInput = common_1.styled('input')({
|
|
|
37
37
|
'&::placeholder': {
|
|
38
38
|
color: tokens_1.inputColors.placeholder,
|
|
39
39
|
},
|
|
40
|
-
'&:hover': {
|
|
40
|
+
'&:hover, &.hover': {
|
|
41
41
|
borderColor: tokens_1.inputColors.hoverBorder,
|
|
42
42
|
},
|
|
43
|
-
'&:focus:not([disabled])': {
|
|
43
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled]), &:focus:not([disabled])': {
|
|
44
44
|
borderColor: tokens_1.inputColors.focusBorder,
|
|
45
45
|
boxShadow: `inset 0 0 0 1px ${tokens_1.inputColors.focusBorder}`,
|
|
46
46
|
outline: 'none',
|
|
@@ -63,7 +63,7 @@ const StyledTextInput = common_1.styled('input')({
|
|
|
63
63
|
width: '100%',
|
|
64
64
|
}, ({ theme, error }) => {
|
|
65
65
|
return {
|
|
66
|
-
'&:focus:not([disabled])': {
|
|
66
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled])': {
|
|
67
67
|
borderColor: theme.canvas.palette.common.focusOutline,
|
|
68
68
|
boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
|
|
69
69
|
outline: 'none',
|
|
@@ -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"}
|
|
@@ -27,7 +27,7 @@ import { useListModel } from '@workday/canvas-kit-react/collection';
|
|
|
27
27
|
*/
|
|
28
28
|
export const useListItemAllowChildStrings = createElemPropsHook(useListModel)((_, __, elemProps = {}) => {
|
|
29
29
|
const props = {};
|
|
30
|
-
if (!elemProps['data-id'] && typeof elemProps.children === 'string') {
|
|
30
|
+
if (!elemProps['data-id'] && !elemProps.item && typeof elemProps.children === 'string') {
|
|
31
31
|
props['data-id'] = elemProps.children;
|
|
32
32
|
}
|
|
33
33
|
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"}
|
|
@@ -65,6 +65,7 @@ export const useComboboxInput = composeHooks(createElemPropsHook(useComboboxMode
|
|
|
65
65
|
'aria-expanded': model.state.visibility === 'visible',
|
|
66
66
|
'aria-autocomplete': 'list',
|
|
67
67
|
'aria-controls': `${model.state.id}-list`,
|
|
68
|
+
'aria-activedescendant': model.state.visibility === 'hidden' ? null : undefined,
|
|
68
69
|
id: model.state.id,
|
|
69
70
|
ref: elementRef,
|
|
70
71
|
};
|
|
@@ -46,12 +46,11 @@ export const useComboboxKeyboardTypeAhead = createElemPropsHook(useComboboxModel
|
|
|
46
46
|
}
|
|
47
47
|
return -1;
|
|
48
48
|
};
|
|
49
|
-
const
|
|
50
|
-
const cursorFocusedIndex = currentItem.index;
|
|
49
|
+
const currentItemIndex = model.state.items.length > 0 ? model.navigation.getItem(model.state.cursorId, model).index : 0;
|
|
51
50
|
const handleKeyboardTypeAhead = (key, numOptions) => {
|
|
52
51
|
// If the starting point is beyond the list of options, reset it
|
|
53
52
|
// to the beginning of the list
|
|
54
|
-
const startNumber = keySofar.current.length === 0 ?
|
|
53
|
+
const startNumber = keySofar.current.length === 0 ? currentItemIndex + 1 : currentItemIndex;
|
|
55
54
|
const start = startNumber === numOptions ? 0 : startNumber;
|
|
56
55
|
// Keeps track of the current key types and adds to it
|
|
57
56
|
// 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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"}
|
|
@@ -49,8 +49,7 @@ export const useComboboxModel = createModelHook({
|
|
|
49
49
|
const input = useInputModel(config);
|
|
50
50
|
const menu = useMenuModel(useMenuModel.mergeConfig(config, {
|
|
51
51
|
onSelect({ id }) {
|
|
52
|
-
|
|
53
|
-
dispatchInputEvent(menu.state.targetRef.current, textValue);
|
|
52
|
+
dispatchInputEvent(menu.state.targetRef.current, id);
|
|
54
53
|
},
|
|
55
54
|
}));
|
|
56
55
|
const [width, setWidth] = React.useState(0);
|
|
@@ -49,10 +49,10 @@ export function errorRing(error, theme) {
|
|
|
49
49
|
borderColor: errorColors.outer,
|
|
50
50
|
transition: '100ms box-shadow',
|
|
51
51
|
boxShadow: errorBoxShadow,
|
|
52
|
-
'&:hover, &:disabled': {
|
|
52
|
+
'&:hover, &:disabled, &.hover, &.disabled': {
|
|
53
53
|
borderColor: errorColors.outer,
|
|
54
54
|
},
|
|
55
|
-
'&:focus:not([disabled])': {
|
|
55
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled])': {
|
|
56
56
|
borderColor: errorColors.outer,
|
|
57
57
|
boxShadow: `${errorBoxShadow},
|
|
58
58
|
0 0 0 2px ${colors.frenchVanilla100},
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DvB,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"}
|
|
@@ -10,14 +10,16 @@ import { useSelectCard } from './hooks/useSelectCard';
|
|
|
10
10
|
import { useSelectInput } from './hooks/useSelectInput';
|
|
11
11
|
import { createStyles } from '@workday/canvas-kit-styling';
|
|
12
12
|
const selectInputStyles = createStyles({ name: "1gpclr4", styles: "caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" });
|
|
13
|
+
const hiddenSelectStyles = createStyles({ name: "1uxiz6e", styles: "position:absolute;top:0px;bottom:0px;left:0px;right:0px;opacity:0px;cursor:default;pointer-events:none;" });
|
|
13
14
|
export const SelectInput = createSubcomponent(TextInput)({
|
|
14
15
|
modelHook: useSelectModel,
|
|
15
16
|
elemPropsHook: useSelectInput,
|
|
16
|
-
})(({ placeholder = 'Choose an option', inputStartIcon, ...elemProps }, Element, model) => {
|
|
17
|
+
})(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, ref, onChange, onInput, onFocus, value, name, ...elemProps }, Element, model) => {
|
|
17
18
|
return (React.createElement(InputGroup, null,
|
|
18
19
|
inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, { pointerEvents: "none" },
|
|
19
20
|
React.createElement(SystemIcon, { icon: inputStartIcon }))),
|
|
20
|
-
React.createElement(InputGroup.Input,
|
|
21
|
+
React.createElement(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 }),
|
|
22
|
+
React.createElement(InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, mergeStyles(elemProps, [selectInputStyles]))),
|
|
21
23
|
React.createElement(InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
|
|
22
24
|
React.createElement(SystemIcon, { icon: caretDownSmallIcon }))));
|
|
23
25
|
});
|
|
@@ -80,8 +80,13 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
|
|
|
80
80
|
getId: (item: any) => string;
|
|
81
81
|
}, {
|
|
82
82
|
readonly onKeyDown: (event: React.KeyboardEvent) => void;
|
|
83
|
-
readonly
|
|
83
|
+
readonly onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
84
84
|
readonly autoComplete: "off";
|
|
85
|
+
readonly onFocus: () => void;
|
|
86
|
+
readonly textInputProps: {
|
|
87
|
+
readonly ref: React.RefObject<HTMLInputElement>;
|
|
88
|
+
};
|
|
89
|
+
readonly ref: (instance: HTMLInputElement | null) => void;
|
|
85
90
|
readonly defaultValue: string | undefined;
|
|
86
91
|
} & {
|
|
87
92
|
onKeyDown(event: React.KeyboardEvent<Element>): void;
|
|
@@ -97,6 +102,7 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
|
|
|
97
102
|
readonly 'aria-expanded': boolean;
|
|
98
103
|
readonly 'aria-autocomplete': "list";
|
|
99
104
|
readonly 'aria-controls': `${string}-list`;
|
|
105
|
+
readonly 'aria-activedescendant': null | undefined;
|
|
100
106
|
readonly id: string;
|
|
101
107
|
readonly ref: (instance: unknown) => void;
|
|
102
108
|
} & {
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA8CF,mBAAmB;+BAvCP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0FvE,CAAC"}
|
|
@@ -1,13 +1,24 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { composeHooks, createElemPropsHook, useLocalRef, useResizeObserver, dispatchInputEvent, } from '@workday/canvas-kit-react/common';
|
|
2
3
|
import { useComboboxInput, useComboboxKeyboardTypeAhead, useComboboxMoveCursorToSelected, useComboboxResetCursorToSelected, } from '@workday/canvas-kit-react/combobox';
|
|
3
4
|
import { useSelectModel } from './useSelectModel';
|
|
4
5
|
/**
|
|
5
6
|
* `useSelectInput` extends {@link useComboboxInput useComboboxInput} and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
|
|
6
7
|
*/
|
|
7
8
|
export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((model, ref, elemProps = {}) => {
|
|
8
|
-
const {
|
|
9
|
+
const { elementRef } = useLocalRef(ref);
|
|
10
|
+
const textInputRef = React.useRef(null);
|
|
11
|
+
// Update the text value of the input
|
|
12
|
+
const handleOnChange = (event) => {
|
|
13
|
+
var _a;
|
|
14
|
+
const value = (_a = model.navigation.getItem(event.target.value, model)) === null || _a === void 0 ? void 0 : _a.textValue;
|
|
15
|
+
const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(textInputRef.current), 'value');
|
|
16
|
+
if (nativeInputValue && nativeInputValue.set) {
|
|
17
|
+
nativeInputValue.set.call(textInputRef.current, value);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
9
20
|
useResizeObserver({
|
|
10
|
-
ref:
|
|
21
|
+
ref: textInputRef,
|
|
11
22
|
onResize: data => {
|
|
12
23
|
if (model.state.visibility === 'visible') {
|
|
13
24
|
// Width of the Input + 2px border + 8px padding
|
|
@@ -16,6 +27,20 @@ export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((
|
|
|
16
27
|
}
|
|
17
28
|
},
|
|
18
29
|
});
|
|
30
|
+
// The intent is if items are loaded after the component is rendered, it will update the input with the value.
|
|
31
|
+
// **Note: We might need to watch for other things or how often we should do this**
|
|
32
|
+
React.useEffect(() => {
|
|
33
|
+
if (model.state.inputRef.current &&
|
|
34
|
+
model.state.items.length > 0 &&
|
|
35
|
+
model.state.selectedIds[0]) {
|
|
36
|
+
const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
|
|
37
|
+
if (model.state.inputRef.current.value !== value) {
|
|
38
|
+
// 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
|
+
dispatchInputEvent(model.state.inputRef.current, value);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
43
|
+
}, [model.state.inputRef, model.state.items.length]);
|
|
19
44
|
return {
|
|
20
45
|
onKeyDown(event) {
|
|
21
46
|
// Prevent the keys from being enter in the input
|
|
@@ -39,8 +64,21 @@ export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((
|
|
|
39
64
|
}
|
|
40
65
|
}
|
|
41
66
|
},
|
|
42
|
-
|
|
67
|
+
onChange: handleOnChange,
|
|
43
68
|
autoComplete: 'off',
|
|
44
|
-
|
|
69
|
+
// When the hidden input is focused, we want to show the focus/hover states of the input that sits below it.
|
|
70
|
+
onFocus() {
|
|
71
|
+
var _a;
|
|
72
|
+
(_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
73
|
+
},
|
|
74
|
+
textInputProps: {
|
|
75
|
+
ref: textInputRef,
|
|
76
|
+
},
|
|
77
|
+
ref: elementRef,
|
|
78
|
+
// Account for the case where an initial item is selected when the Select first renders
|
|
79
|
+
defaultValue: model.state.selectedIds.length > 0 && model.state.items.length > 0
|
|
80
|
+
? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
|
|
81
|
+
model.state.value
|
|
82
|
+
: undefined,
|
|
45
83
|
};
|
|
46
84
|
}), useComboboxKeyboardTypeAhead, useComboboxResetCursorToSelected, useComboboxMoveCursorToSelected, useComboboxInput);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelectModel.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectModel.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"useSelectModel.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectModel.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWzB,CAAC"}
|
|
@@ -15,10 +15,10 @@ const StyledTextInput = styled('input')({
|
|
|
15
15
|
'&::placeholder': {
|
|
16
16
|
color: inputColors.placeholder,
|
|
17
17
|
},
|
|
18
|
-
'&:hover': {
|
|
18
|
+
'&:hover, &.hover': {
|
|
19
19
|
borderColor: inputColors.hoverBorder,
|
|
20
20
|
},
|
|
21
|
-
'&:focus:not([disabled])': {
|
|
21
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled]), &:focus:not([disabled])': {
|
|
22
22
|
borderColor: inputColors.focusBorder,
|
|
23
23
|
boxShadow: `inset 0 0 0 1px ${inputColors.focusBorder}`,
|
|
24
24
|
outline: 'none',
|
|
@@ -41,7 +41,7 @@ const StyledTextInput = styled('input')({
|
|
|
41
41
|
width: '100%',
|
|
42
42
|
}, ({ theme, error }) => {
|
|
43
43
|
return {
|
|
44
|
-
'&:focus:not([disabled])': {
|
|
44
|
+
'&:focus-visible:not([disabled]), &.focus:not([disabled])': {
|
|
45
45
|
borderColor: theme.canvas.palette.common.focusOutline,
|
|
46
46
|
boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
|
|
47
47
|
outline: 'none',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "10.3.
|
|
3
|
+
"version": "10.3.6",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
"@emotion/styled": "^11.6.0",
|
|
51
51
|
"@popperjs/core": "^2.5.4",
|
|
52
52
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
53
|
-
"@workday/canvas-kit-popup-stack": "^10.3.
|
|
54
|
-
"@workday/canvas-kit-styling": "^10.3.
|
|
53
|
+
"@workday/canvas-kit-popup-stack": "^10.3.6",
|
|
54
|
+
"@workday/canvas-kit-styling": "^10.3.6",
|
|
55
55
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
56
56
|
"@workday/canvas-tokens-web": "^1.0.0",
|
|
57
57
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
70
70
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
71
71
|
},
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "eb4bb0dca899f228ce654f2bc8b251b0e082b59d"
|
|
73
73
|
}
|
package/select/lib/Select.tsx
CHANGED
|
@@ -15,9 +15,9 @@ import {useSelectModel} from './hooks/useSelectModel';
|
|
|
15
15
|
import {useSelectCard} from './hooks/useSelectCard';
|
|
16
16
|
import {useSelectInput} from './hooks/useSelectInput';
|
|
17
17
|
import {CanvasSystemIcon} from '@workday/design-assets-types';
|
|
18
|
-
import {createStyles} from '@workday/canvas-kit-styling';
|
|
18
|
+
import {createStyles, CSProps} from '@workday/canvas-kit-styling';
|
|
19
19
|
|
|
20
|
-
export interface SelectInputProps extends ExtractProps<typeof TextInput
|
|
20
|
+
export interface SelectInputProps extends ExtractProps<typeof TextInput>, CSProps {
|
|
21
21
|
/**
|
|
22
22
|
* The Icon to render at the start of the `input`. Use this prop if your options
|
|
23
23
|
* include icons that you would like to render in the `input` when selected.
|
|
@@ -34,11 +34,39 @@ const selectInputStyles = createStyles({
|
|
|
34
34
|
},
|
|
35
35
|
});
|
|
36
36
|
|
|
37
|
+
const hiddenSelectStyles = createStyles({
|
|
38
|
+
position: 'absolute',
|
|
39
|
+
top: 0,
|
|
40
|
+
bottom: 0,
|
|
41
|
+
left: 0,
|
|
42
|
+
right: 0,
|
|
43
|
+
opacity: 0,
|
|
44
|
+
cursor: 'default',
|
|
45
|
+
pointerEvents: 'none',
|
|
46
|
+
});
|
|
47
|
+
|
|
37
48
|
export const SelectInput = createSubcomponent(TextInput)({
|
|
38
49
|
modelHook: useSelectModel,
|
|
39
50
|
elemPropsHook: useSelectInput,
|
|
40
51
|
})<SelectInputProps>(
|
|
41
|
-
(
|
|
52
|
+
(
|
|
53
|
+
{
|
|
54
|
+
placeholder = 'Choose an option',
|
|
55
|
+
inputStartIcon,
|
|
56
|
+
error,
|
|
57
|
+
textInputProps,
|
|
58
|
+
disabled,
|
|
59
|
+
ref,
|
|
60
|
+
onChange,
|
|
61
|
+
onInput,
|
|
62
|
+
onFocus,
|
|
63
|
+
value,
|
|
64
|
+
name,
|
|
65
|
+
...elemProps
|
|
66
|
+
},
|
|
67
|
+
Element,
|
|
68
|
+
model
|
|
69
|
+
) => {
|
|
42
70
|
return (
|
|
43
71
|
<InputGroup>
|
|
44
72
|
{inputStartIcon && model.state.selectedIds.length > 0 && (
|
|
@@ -46,11 +74,29 @@ export const SelectInput = createSubcomponent(TextInput)({
|
|
|
46
74
|
<SystemIcon icon={inputStartIcon} />
|
|
47
75
|
</InputGroup.InnerStart>
|
|
48
76
|
)}
|
|
77
|
+
{/* Hidden input to handle ids */}
|
|
78
|
+
<InputGroup.Input
|
|
79
|
+
error={error}
|
|
80
|
+
disabled={disabled}
|
|
81
|
+
className={hiddenSelectStyles}
|
|
82
|
+
tabIndex={-1}
|
|
83
|
+
aria-hidden={true}
|
|
84
|
+
onChange={onChange}
|
|
85
|
+
onInput={onInput}
|
|
86
|
+
value={value}
|
|
87
|
+
onFocus={onFocus}
|
|
88
|
+
name={name}
|
|
89
|
+
ref={ref}
|
|
90
|
+
/>
|
|
91
|
+
{/* Visual input */}
|
|
49
92
|
<InputGroup.Input
|
|
50
93
|
as={Element}
|
|
94
|
+
disabled={disabled}
|
|
51
95
|
placeholder={placeholder}
|
|
96
|
+
error={error}
|
|
97
|
+
{...textInputProps}
|
|
52
98
|
{...mergeStyles(elemProps, [selectInputStyles])}
|
|
53
|
-
|
|
99
|
+
/>
|
|
54
100
|
<InputGroup.InnerEnd position="absolute" pointerEvents="none">
|
|
55
101
|
<SystemIcon icon={caretDownSmallIcon} />
|
|
56
102
|
</InputGroup.InnerEnd>
|