@workday/canvas-kit-react 10.3.51 → 10.3.53
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/dist/commonjs/select/lib/Select.d.ts.map +1 -1
- package/dist/commonjs/select/lib/Select.js +1 -15
- package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts +1 -2
- package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts.map +1 -1
- package/dist/commonjs/select/lib/hooks/useSelectInput.js +22 -6
- package/dist/es6/select/lib/Select.d.ts.map +1 -1
- package/dist/es6/select/lib/Select.js +2 -16
- package/dist/es6/select/lib/hooks/useSelectInput.d.ts +1 -2
- package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map +1 -1
- package/dist/es6/select/lib/hooks/useSelectInput.js +22 -6
- package/package.json +4 -4
- package/select/lib/Select.tsx +1 -23
- package/select/lib/hooks/useSelectInput.ts +31 -6
|
@@ -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,
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDvB,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"}
|
|
@@ -21,24 +21,10 @@ exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
|
|
|
21
21
|
modelHook: useSelectModel_1.useSelectModel,
|
|
22
22
|
elemPropsHook: useSelectInput_1.useSelectInput,
|
|
23
23
|
})(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, ref, onChange, onInput, value, name, ...elemProps }, Element, model) => {
|
|
24
|
-
const { localRef, elementRef } = common_1.useLocalRef(ref);
|
|
25
|
-
// We need to create a proxy between the multiple inputs. We need to redirect a few methods to
|
|
26
|
-
// the visible input
|
|
27
|
-
react_1.default.useImperativeHandle(elementRef, () => {
|
|
28
|
-
if (localRef.current) {
|
|
29
|
-
localRef.current.focus = (options) => {
|
|
30
|
-
textInputProps.ref.current.focus(options);
|
|
31
|
-
};
|
|
32
|
-
localRef.current.blur = () => {
|
|
33
|
-
textInputProps.ref.current.blur();
|
|
34
|
-
};
|
|
35
|
-
}
|
|
36
|
-
return localRef.current;
|
|
37
|
-
}, [textInputProps.ref, localRef]);
|
|
38
24
|
return (react_1.default.createElement(text_input_1.InputGroup, null,
|
|
39
25
|
inputStartIcon && model.state.selectedIds.length > 0 && (react_1.default.createElement(text_input_1.InputGroup.InnerStart, { pointerEvents: "none" },
|
|
40
26
|
react_1.default.createElement(icon_1.SystemIcon, { icon: inputStartIcon }))),
|
|
41
|
-
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, name: name, ref:
|
|
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, name: name, ref: ref }),
|
|
42
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]))),
|
|
43
29
|
react_1.default.createElement(text_input_1.InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
|
|
44
30
|
react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }))));
|
|
@@ -111,11 +111,10 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
|
|
|
111
111
|
readonly autoComplete: "off";
|
|
112
112
|
readonly onFocus: () => void;
|
|
113
113
|
readonly textInputProps: {
|
|
114
|
-
readonly ref:
|
|
114
|
+
readonly ref: (instance: HTMLInputElement | null) => void;
|
|
115
115
|
readonly onChange: typeof noop;
|
|
116
116
|
readonly value: string;
|
|
117
117
|
};
|
|
118
|
-
readonly ref: (instance: HTMLInputElement | null) => void;
|
|
119
118
|
readonly 'aria-haspopup': "menu";
|
|
120
119
|
}>;
|
|
121
120
|
export {};
|
|
@@ -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,iBAAS,IAAI,SAEZ;AAED;;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,iBAAS,IAAI,SAEZ;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0HF,mBAAmB;+BAtFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;EAmIvE,CAAC"}
|
|
@@ -15,8 +15,24 @@ function noop() {
|
|
|
15
15
|
* `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/).
|
|
16
16
|
*/
|
|
17
17
|
exports.useSelectInput = common_1.composeHooks(combobox_1.useComboboxInput, combobox_1.useComboboxKeyboardTypeAhead, combobox_1.useComboboxResetCursorToSelected, combobox_1.useComboboxMoveCursorToSelected, common_1.createElemPropsHook(useSelectModel_1.useSelectModel)((model, ref, elemProps = {}) => {
|
|
18
|
-
const { elementRef } = common_1.useLocalRef(
|
|
19
|
-
|
|
18
|
+
const { elementRef: textInputElementRef, localRef: textInputRef } = common_1.useLocalRef(
|
|
19
|
+
// PopupModel says the targetRef is a `HTMLButtonElement`, but it is a `HTMLInputElement`
|
|
20
|
+
model.state.targetRef);
|
|
21
|
+
const { localRef, elementRef } = common_1.useLocalRef(ref);
|
|
22
|
+
// We need to create a proxy between the multiple inputs. We need to redirect a few methods to
|
|
23
|
+
// the visible input
|
|
24
|
+
react_1.default.useImperativeHandle(elementRef, () => {
|
|
25
|
+
if (localRef.current) {
|
|
26
|
+
localRef.current.focus = (options) => {
|
|
27
|
+
textInputRef.current.focus(options);
|
|
28
|
+
};
|
|
29
|
+
localRef.current.blur = () => {
|
|
30
|
+
textInputRef.current.blur();
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
return localRef.current;
|
|
34
|
+
}, [textInputRef, localRef]);
|
|
35
|
+
// Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that.
|
|
20
36
|
// Update the text value of the input
|
|
21
37
|
const handleOnChange = (event) => {
|
|
22
38
|
var _a;
|
|
@@ -44,6 +60,7 @@ exports.useSelectInput = common_1.composeHooks(combobox_1.useComboboxInput, comb
|
|
|
44
60
|
model.state.items.length > 0 &&
|
|
45
61
|
model.state.selectedIds[0]) {
|
|
46
62
|
const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
|
|
63
|
+
const oldValue = model.state.inputRef.current.value;
|
|
47
64
|
// force the hidden input to have the correct value
|
|
48
65
|
if (model.state.inputRef.current.value !== value) {
|
|
49
66
|
const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(model.state.inputRef.current), 'value');
|
|
@@ -51,8 +68,8 @@ exports.useSelectInput = common_1.composeHooks(combobox_1.useComboboxInput, comb
|
|
|
51
68
|
nativeInputValue.set.call(model.state.inputRef.current, value);
|
|
52
69
|
}
|
|
53
70
|
}
|
|
54
|
-
if (model.state.selectedIds[0] !==
|
|
55
|
-
model.state.inputRef.current.value !==
|
|
71
|
+
if (model.state.selectedIds[0] !== oldValue &&
|
|
72
|
+
model.state.inputRef.current.value !== oldValue) {
|
|
56
73
|
// 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.
|
|
57
74
|
common_1.dispatchInputEvent(model.state.inputRef.current, value);
|
|
58
75
|
}
|
|
@@ -117,13 +134,12 @@ exports.useSelectInput = common_1.composeHooks(combobox_1.useComboboxInput, comb
|
|
|
117
134
|
(_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
118
135
|
},
|
|
119
136
|
textInputProps: {
|
|
120
|
-
ref:
|
|
137
|
+
ref: textInputElementRef,
|
|
121
138
|
onChange: noop,
|
|
122
139
|
value: model.state.selectedIds.length > 0 && model.state.items.length > 0
|
|
123
140
|
? model.navigation.getItem(model.state.selectedIds[0], model).textValue
|
|
124
141
|
: '',
|
|
125
142
|
},
|
|
126
|
-
ref: elementRef,
|
|
127
143
|
'aria-haspopup': 'menu',
|
|
128
144
|
};
|
|
129
145
|
}));
|
|
@@ -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,
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDvB,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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { createSubcomponent, createContainer,
|
|
2
|
+
import { createSubcomponent, createContainer, } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { Combobox } from '@workday/canvas-kit-react/combobox';
|
|
4
4
|
import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
|
|
5
5
|
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
@@ -15,24 +15,10 @@ export const SelectInput = createSubcomponent(TextInput)({
|
|
|
15
15
|
modelHook: useSelectModel,
|
|
16
16
|
elemPropsHook: useSelectInput,
|
|
17
17
|
})(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, ref, onChange, onInput, value, name, ...elemProps }, Element, model) => {
|
|
18
|
-
const { localRef, elementRef } = useLocalRef(ref);
|
|
19
|
-
// We need to create a proxy between the multiple inputs. We need to redirect a few methods to
|
|
20
|
-
// the visible input
|
|
21
|
-
React.useImperativeHandle(elementRef, () => {
|
|
22
|
-
if (localRef.current) {
|
|
23
|
-
localRef.current.focus = (options) => {
|
|
24
|
-
textInputProps.ref.current.focus(options);
|
|
25
|
-
};
|
|
26
|
-
localRef.current.blur = () => {
|
|
27
|
-
textInputProps.ref.current.blur();
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
return localRef.current;
|
|
31
|
-
}, [textInputProps.ref, localRef]);
|
|
32
18
|
return (React.createElement(InputGroup, null,
|
|
33
19
|
inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, { pointerEvents: "none" },
|
|
34
20
|
React.createElement(SystemIcon, { icon: inputStartIcon }))),
|
|
35
|
-
React.createElement(InputGroup.Input, { error: error, disabled: disabled, className: hiddenSelectStyles, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, name: name, ref:
|
|
21
|
+
React.createElement(InputGroup.Input, { error: error, disabled: disabled, className: hiddenSelectStyles, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, name: name, ref: ref }),
|
|
36
22
|
React.createElement(InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, mergeStyles(elemProps, [selectInputStyles]))),
|
|
37
23
|
React.createElement(InputGroup.InnerEnd, { position: "absolute", pointerEvents: "none" },
|
|
38
24
|
React.createElement(SystemIcon, { icon: caretDownSmallIcon }))));
|
|
@@ -111,11 +111,10 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
|
|
|
111
111
|
readonly autoComplete: "off";
|
|
112
112
|
readonly onFocus: () => void;
|
|
113
113
|
readonly textInputProps: {
|
|
114
|
-
readonly ref:
|
|
114
|
+
readonly ref: (instance: HTMLInputElement | null) => void;
|
|
115
115
|
readonly onChange: typeof noop;
|
|
116
116
|
readonly value: string;
|
|
117
117
|
};
|
|
118
|
-
readonly ref: (instance: HTMLInputElement | null) => void;
|
|
119
118
|
readonly 'aria-haspopup': "menu";
|
|
120
119
|
}>;
|
|
121
120
|
export {};
|
|
@@ -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,iBAAS,IAAI,SAEZ;AAED;;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,iBAAS,IAAI,SAEZ;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0HF,mBAAmB;+BAtFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;EAmIvE,CAAC"}
|
|
@@ -9,8 +9,24 @@ function noop() {
|
|
|
9
9
|
* `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/).
|
|
10
10
|
*/
|
|
11
11
|
export const useSelectInput = composeHooks(useComboboxInput, useComboboxKeyboardTypeAhead, useComboboxResetCursorToSelected, useComboboxMoveCursorToSelected, createElemPropsHook(useSelectModel)((model, ref, elemProps = {}) => {
|
|
12
|
-
const { elementRef } = useLocalRef(
|
|
13
|
-
|
|
12
|
+
const { elementRef: textInputElementRef, localRef: textInputRef } = useLocalRef(
|
|
13
|
+
// PopupModel says the targetRef is a `HTMLButtonElement`, but it is a `HTMLInputElement`
|
|
14
|
+
model.state.targetRef);
|
|
15
|
+
const { localRef, elementRef } = useLocalRef(ref);
|
|
16
|
+
// We need to create a proxy between the multiple inputs. We need to redirect a few methods to
|
|
17
|
+
// the visible input
|
|
18
|
+
React.useImperativeHandle(elementRef, () => {
|
|
19
|
+
if (localRef.current) {
|
|
20
|
+
localRef.current.focus = (options) => {
|
|
21
|
+
textInputRef.current.focus(options);
|
|
22
|
+
};
|
|
23
|
+
localRef.current.blur = () => {
|
|
24
|
+
textInputRef.current.blur();
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
return localRef.current;
|
|
28
|
+
}, [textInputRef, localRef]);
|
|
29
|
+
// Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that.
|
|
14
30
|
// Update the text value of the input
|
|
15
31
|
const handleOnChange = (event) => {
|
|
16
32
|
var _a;
|
|
@@ -38,6 +54,7 @@ export const useSelectInput = composeHooks(useComboboxInput, useComboboxKeyboard
|
|
|
38
54
|
model.state.items.length > 0 &&
|
|
39
55
|
model.state.selectedIds[0]) {
|
|
40
56
|
const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
|
|
57
|
+
const oldValue = model.state.inputRef.current.value;
|
|
41
58
|
// force the hidden input to have the correct value
|
|
42
59
|
if (model.state.inputRef.current.value !== value) {
|
|
43
60
|
const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(model.state.inputRef.current), 'value');
|
|
@@ -45,8 +62,8 @@ export const useSelectInput = composeHooks(useComboboxInput, useComboboxKeyboard
|
|
|
45
62
|
nativeInputValue.set.call(model.state.inputRef.current, value);
|
|
46
63
|
}
|
|
47
64
|
}
|
|
48
|
-
if (model.state.selectedIds[0] !==
|
|
49
|
-
model.state.inputRef.current.value !==
|
|
65
|
+
if (model.state.selectedIds[0] !== oldValue &&
|
|
66
|
+
model.state.inputRef.current.value !== oldValue) {
|
|
50
67
|
// 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.
|
|
51
68
|
dispatchInputEvent(model.state.inputRef.current, value);
|
|
52
69
|
}
|
|
@@ -111,13 +128,12 @@ export const useSelectInput = composeHooks(useComboboxInput, useComboboxKeyboard
|
|
|
111
128
|
(_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
112
129
|
},
|
|
113
130
|
textInputProps: {
|
|
114
|
-
ref:
|
|
131
|
+
ref: textInputElementRef,
|
|
115
132
|
onChange: noop,
|
|
116
133
|
value: model.state.selectedIds.length > 0 && model.state.items.length > 0
|
|
117
134
|
? model.navigation.getItem(model.state.selectedIds[0], model).textValue
|
|
118
135
|
: '',
|
|
119
136
|
},
|
|
120
|
-
ref: elementRef,
|
|
121
137
|
'aria-haspopup': 'menu',
|
|
122
138
|
};
|
|
123
139
|
}));
|
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.53",
|
|
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",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"@emotion/styled": "^11.6.0",
|
|
50
50
|
"@popperjs/core": "^2.5.4",
|
|
51
51
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
52
|
-
"@workday/canvas-kit-popup-stack": "^10.3.
|
|
53
|
-
"@workday/canvas-kit-styling": "^10.3.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^10.3.53",
|
|
53
|
+
"@workday/canvas-kit-styling": "^10.3.53",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
55
55
|
"@workday/canvas-tokens-web": "^1.0.0",
|
|
56
56
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
69
69
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "e8774056fbabc57307b542429ebd2742b024175b"
|
|
72
72
|
}
|
package/select/lib/Select.tsx
CHANGED
|
@@ -4,7 +4,6 @@ import {
|
|
|
4
4
|
ExtractProps,
|
|
5
5
|
createContainer,
|
|
6
6
|
Themeable,
|
|
7
|
-
useLocalRef,
|
|
8
7
|
} from '@workday/canvas-kit-react/common';
|
|
9
8
|
import {Combobox} from '@workday/canvas-kit-react/combobox';
|
|
10
9
|
|
|
@@ -67,27 +66,6 @@ export const SelectInput = createSubcomponent(TextInput)({
|
|
|
67
66
|
Element,
|
|
68
67
|
model
|
|
69
68
|
) => {
|
|
70
|
-
const {localRef, elementRef} = useLocalRef(ref);
|
|
71
|
-
|
|
72
|
-
// We need to create a proxy between the multiple inputs. We need to redirect a few methods to
|
|
73
|
-
// the visible input
|
|
74
|
-
React.useImperativeHandle(
|
|
75
|
-
elementRef,
|
|
76
|
-
() => {
|
|
77
|
-
if (localRef.current) {
|
|
78
|
-
localRef.current.focus = (options?: FocusOptions) => {
|
|
79
|
-
textInputProps.ref.current!.focus(options);
|
|
80
|
-
};
|
|
81
|
-
localRef.current.blur = () => {
|
|
82
|
-
textInputProps.ref.current!.blur();
|
|
83
|
-
};
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
return localRef.current!;
|
|
87
|
-
},
|
|
88
|
-
[textInputProps.ref, localRef]
|
|
89
|
-
);
|
|
90
|
-
|
|
91
69
|
return (
|
|
92
70
|
<InputGroup>
|
|
93
71
|
{inputStartIcon && model.state.selectedIds.length > 0 && (
|
|
@@ -106,7 +84,7 @@ export const SelectInput = createSubcomponent(TextInput)({
|
|
|
106
84
|
onInput={onInput}
|
|
107
85
|
value={value}
|
|
108
86
|
name={name}
|
|
109
|
-
ref={
|
|
87
|
+
ref={ref}
|
|
110
88
|
/>
|
|
111
89
|
{/* Visual input */}
|
|
112
90
|
<InputGroup.Input
|
|
@@ -28,8 +28,33 @@ export const useSelectInput = composeHooks(
|
|
|
28
28
|
useComboboxMoveCursorToSelected,
|
|
29
29
|
createElemPropsHook(useSelectModel)(
|
|
30
30
|
(model, ref, elemProps: {keySofar?: string; placeholder?: string; value?: string} = {}) => {
|
|
31
|
-
const {elementRef} = useLocalRef
|
|
32
|
-
|
|
31
|
+
const {elementRef: textInputElementRef, localRef: textInputRef} = useLocalRef(
|
|
32
|
+
// PopupModel says the targetRef is a `HTMLButtonElement`, but it is a `HTMLInputElement`
|
|
33
|
+
model.state.targetRef as any as React.Ref<HTMLInputElement>
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLInputElement>);
|
|
37
|
+
|
|
38
|
+
// We need to create a proxy between the multiple inputs. We need to redirect a few methods to
|
|
39
|
+
// the visible input
|
|
40
|
+
React.useImperativeHandle(
|
|
41
|
+
elementRef,
|
|
42
|
+
() => {
|
|
43
|
+
if (localRef.current) {
|
|
44
|
+
localRef.current.focus = (options?: FocusOptions) => {
|
|
45
|
+
textInputRef.current!.focus(options);
|
|
46
|
+
};
|
|
47
|
+
localRef.current.blur = () => {
|
|
48
|
+
textInputRef.current!.blur();
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
return localRef.current!;
|
|
53
|
+
},
|
|
54
|
+
[textInputRef, localRef]
|
|
55
|
+
);
|
|
56
|
+
|
|
57
|
+
// Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that.
|
|
33
58
|
|
|
34
59
|
// Update the text value of the input
|
|
35
60
|
const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
@@ -63,6 +88,7 @@ export const useSelectInput = composeHooks(
|
|
|
63
88
|
model.state.selectedIds[0]
|
|
64
89
|
) {
|
|
65
90
|
const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
|
|
91
|
+
const oldValue = model.state.inputRef.current.value;
|
|
66
92
|
|
|
67
93
|
// force the hidden input to have the correct value
|
|
68
94
|
if (model.state.inputRef.current.value !== value) {
|
|
@@ -77,8 +103,8 @@ export const useSelectInput = composeHooks(
|
|
|
77
103
|
}
|
|
78
104
|
|
|
79
105
|
if (
|
|
80
|
-
model.state.selectedIds[0] !==
|
|
81
|
-
model.state.inputRef.current.value !==
|
|
106
|
+
model.state.selectedIds[0] !== oldValue &&
|
|
107
|
+
model.state.inputRef.current.value !== oldValue
|
|
82
108
|
) {
|
|
83
109
|
// 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.
|
|
84
110
|
dispatchInputEvent(model.state.inputRef.current, value);
|
|
@@ -151,14 +177,13 @@ export const useSelectInput = composeHooks(
|
|
|
151
177
|
textInputRef.current?.focus();
|
|
152
178
|
},
|
|
153
179
|
textInputProps: {
|
|
154
|
-
ref:
|
|
180
|
+
ref: textInputElementRef,
|
|
155
181
|
onChange: noop,
|
|
156
182
|
value:
|
|
157
183
|
model.state.selectedIds.length > 0 && model.state.items.length > 0
|
|
158
184
|
? model.navigation.getItem(model.state.selectedIds[0], model).textValue
|
|
159
185
|
: '',
|
|
160
186
|
},
|
|
161
|
-
ref: elementRef,
|
|
162
187
|
'aria-haspopup': 'menu',
|
|
163
188
|
} as const;
|
|
164
189
|
}
|