@workday/canvas-kit-react 11.1.0 → 11.1.2
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 +1306 -57
- package/dist/commonjs/select/lib/Select.d.ts.map +1 -1
- package/dist/commonjs/select/lib/Select.js +8 -22
- 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 +20 -4
- package/dist/es6/select/lib/Select.d.ts +1306 -57
- package/dist/es6/select/lib/Select.d.ts.map +1 -1
- package/dist/es6/select/lib/Select.js +9 -23
- 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 +20 -4
- package/package.json +4 -4
- package/select/lib/Select.tsx +1 -23
- package/select/lib/hooks/useSelectInput.ts +29 -4
|
@@ -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,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,QAAQ,EAAC,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAA8B,OAAO,EAAS,MAAM,6BAA6B,CAAC;AACzF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAM3E,OAAO,EAEL,YAAY,EAEZ,SAAS,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;;;;;;;;;;;;;;;;;WAiBG;;;;;;;QApML;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDA+KD;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"}
|
|
@@ -8,39 +8,25 @@ import { SystemIcon } from '@workday/canvas-kit-react/icon';
|
|
|
8
8
|
import { useSelectCard } from './hooks/useSelectCard';
|
|
9
9
|
import { useSelectInput } from './hooks/useSelectInput';
|
|
10
10
|
import { useSelectModel } from './hooks/useSelectModel';
|
|
11
|
-
import { createSubcomponent, createContainer,
|
|
11
|
+
import { createSubcomponent, createContainer, } from '@workday/canvas-kit-react/common';
|
|
12
12
|
import { system } from '@workday/canvas-tokens-web';
|
|
13
13
|
const selectInputStencil = createStencil({
|
|
14
|
-
base: { name: "
|
|
15
|
-
}, "select-input-
|
|
14
|
+
base: { name: "a28279", styles: "box-sizing:border-box;caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
|
|
15
|
+
}, "select-input-7166ac");
|
|
16
16
|
const selectIconsStencil = createStencil({
|
|
17
|
-
base: { name: "
|
|
18
|
-
}, "select-icons-
|
|
17
|
+
base: { name: "482a82", styles: "box-sizing:border-box;position:absolute;pointer-events:none;" }
|
|
18
|
+
}, "select-icons-61db10");
|
|
19
19
|
const hiddenSelectInputStencil = createStencil({
|
|
20
|
-
base: { name: "
|
|
21
|
-
}, "hidden-select-input-
|
|
20
|
+
base: { name: "99924b", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;" }
|
|
21
|
+
}, "hidden-select-input-87e693");
|
|
22
22
|
export const SelectInput = createSubcomponent(TextInput)({
|
|
23
23
|
modelHook: useSelectModel,
|
|
24
24
|
elemPropsHook: useSelectInput,
|
|
25
25
|
})(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, width, ref, onChange, onInput, value, name, ...elemProps }, Element, model) => {
|
|
26
|
-
const { localRef, elementRef } = useLocalRef(ref);
|
|
27
|
-
// We need to create a proxy between the multiple inputs. We need to redirect a few methods to
|
|
28
|
-
// the visible input
|
|
29
|
-
React.useImperativeHandle(elementRef, () => {
|
|
30
|
-
if (localRef.current) {
|
|
31
|
-
localRef.current.focus = (options) => {
|
|
32
|
-
textInputProps.ref.current.focus(options);
|
|
33
|
-
};
|
|
34
|
-
localRef.current.blur = () => {
|
|
35
|
-
textInputProps.ref.current.blur();
|
|
36
|
-
};
|
|
37
|
-
}
|
|
38
|
-
return localRef.current;
|
|
39
|
-
}, [textInputProps.ref, localRef]);
|
|
40
26
|
return (React.createElement(InputGroup, { "data-width": "ck-formfield-width" },
|
|
41
27
|
inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, Object.assign({}, selectIconsStencil()),
|
|
42
28
|
React.createElement(SystemIcon, { icon: inputStartIcon }))),
|
|
43
|
-
React.createElement(InputGroup.Input, Object.assign({ error: error, disabled: disabled, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, name: name, ref:
|
|
29
|
+
React.createElement(InputGroup.Input, Object.assign({ error: error, disabled: disabled, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, name: name, ref: ref }, hiddenSelectInputStencil())),
|
|
44
30
|
React.createElement(InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, mergeStyles(elemProps, selectInputStencil()))),
|
|
45
31
|
React.createElement(InputGroup.InnerEnd, Object.assign({}, selectIconsStencil()),
|
|
46
32
|
React.createElement(SystemIcon, { icon: caretDownSmallIcon }))));
|
|
@@ -53,7 +39,7 @@ export const SelectItem = createSubcomponent('li')({
|
|
|
53
39
|
})(({ children, ...elemProps }, Element, _model) => {
|
|
54
40
|
return (React.createElement(Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
|
|
55
41
|
});
|
|
56
|
-
const selectCardStyles = createStyles({ name: "
|
|
42
|
+
const selectCardStyles = createStyles({ name: "504572", styles: "max-height:18.75rem;" });
|
|
57
43
|
export const SelectCard = createSubcomponent('div')({
|
|
58
44
|
modelHook: useSelectModel,
|
|
59
45
|
elemPropsHook: useSelectCard,
|
|
@@ -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;+BArFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;EAkIvE,CAAC"}
|
|
@@ -9,8 +9,25 @@ 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
|
|
13
|
-
const textInputRef =
|
|
12
|
+
// const textInputRef = React.useRef<HTMLInputElement>(null);
|
|
13
|
+
const { elementRef: textInputElementRef, localRef: textInputRef } = useLocalRef(
|
|
14
|
+
// PopupModel says the targetRef is a `HTMLButtonElement`, but it is a `HTMLInputElement`
|
|
15
|
+
model.state.targetRef);
|
|
16
|
+
const { localRef, elementRef } = useLocalRef(ref);
|
|
17
|
+
// We need to create a proxy between the multiple inputs. We need to redirect a few methods to
|
|
18
|
+
// the visible input
|
|
19
|
+
React.useImperativeHandle(elementRef, () => {
|
|
20
|
+
if (localRef.current) {
|
|
21
|
+
localRef.current.focus = (options) => {
|
|
22
|
+
textInputRef.current.focus(options);
|
|
23
|
+
};
|
|
24
|
+
localRef.current.blur = () => {
|
|
25
|
+
textInputRef.current.blur();
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
return localRef.current;
|
|
29
|
+
}, [textInputRef, localRef]);
|
|
30
|
+
// 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
31
|
// Update the text value of the input
|
|
15
32
|
const handleOnChange = (event) => {
|
|
16
33
|
var _a;
|
|
@@ -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": "11.1.
|
|
3
|
+
"version": "11.1.2",
|
|
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": "^11.1.
|
|
53
|
-
"@workday/canvas-kit-styling": "^11.1.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^11.1.2",
|
|
53
|
+
"@workday/canvas-kit-styling": "^11.1.2",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
55
55
|
"@workday/canvas-tokens-web": "^2.0.0",
|
|
56
56
|
"@workday/design-assets-types": "^0.2.8",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"@workday/canvas-accent-icons-web": "^3.0.0",
|
|
68
68
|
"@workday/canvas-applet-icons-web": "^2.0.0"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "4c451241b63863e2d43cd7cd495e50f61488f3ab"
|
|
71
71
|
}
|
package/select/lib/Select.tsx
CHANGED
|
@@ -14,7 +14,6 @@ import {
|
|
|
14
14
|
ExtractProps,
|
|
15
15
|
createContainer,
|
|
16
16
|
Themeable,
|
|
17
|
-
useLocalRef,
|
|
18
17
|
} from '@workday/canvas-kit-react/common';
|
|
19
18
|
import {system} from '@workday/canvas-tokens-web';
|
|
20
19
|
|
|
@@ -79,27 +78,6 @@ export const SelectInput = createSubcomponent(TextInput)({
|
|
|
79
78
|
Element,
|
|
80
79
|
model
|
|
81
80
|
) => {
|
|
82
|
-
const {localRef, elementRef} = useLocalRef(ref);
|
|
83
|
-
|
|
84
|
-
// We need to create a proxy between the multiple inputs. We need to redirect a few methods to
|
|
85
|
-
// the visible input
|
|
86
|
-
React.useImperativeHandle(
|
|
87
|
-
elementRef,
|
|
88
|
-
() => {
|
|
89
|
-
if (localRef.current) {
|
|
90
|
-
localRef.current.focus = (options?: FocusOptions) => {
|
|
91
|
-
textInputProps.ref.current!.focus(options);
|
|
92
|
-
};
|
|
93
|
-
localRef.current.blur = () => {
|
|
94
|
-
textInputProps.ref.current!.blur();
|
|
95
|
-
};
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
return localRef.current!;
|
|
99
|
-
},
|
|
100
|
-
[textInputProps.ref, localRef]
|
|
101
|
-
);
|
|
102
|
-
|
|
103
81
|
return (
|
|
104
82
|
<InputGroup data-width="ck-formfield-width">
|
|
105
83
|
{inputStartIcon && model.state.selectedIds.length > 0 && (
|
|
@@ -117,7 +95,7 @@ export const SelectInput = createSubcomponent(TextInput)({
|
|
|
117
95
|
onInput={onInput}
|
|
118
96
|
value={value}
|
|
119
97
|
name={name}
|
|
120
|
-
ref={
|
|
98
|
+
ref={ref}
|
|
121
99
|
{...hiddenSelectInputStencil()}
|
|
122
100
|
/>
|
|
123
101
|
{/* Visual input */}
|
|
@@ -28,8 +28,34 @@ export const useSelectInput = composeHooks(
|
|
|
28
28
|
useComboboxMoveCursorToSelected,
|
|
29
29
|
createElemPropsHook(useSelectModel)(
|
|
30
30
|
(model, ref, elemProps: {keySofar?: string; placeholder?: string; value?: string} = {}) => {
|
|
31
|
-
const
|
|
32
|
-
const textInputRef =
|
|
31
|
+
// const textInputRef = React.useRef<HTMLInputElement>(null);
|
|
32
|
+
const {elementRef: textInputElementRef, localRef: textInputRef} = useLocalRef(
|
|
33
|
+
// PopupModel says the targetRef is a `HTMLButtonElement`, but it is a `HTMLInputElement`
|
|
34
|
+
model.state.targetRef as any as React.Ref<HTMLInputElement>
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLInputElement>);
|
|
38
|
+
|
|
39
|
+
// We need to create a proxy between the multiple inputs. We need to redirect a few methods to
|
|
40
|
+
// the visible input
|
|
41
|
+
React.useImperativeHandle(
|
|
42
|
+
elementRef,
|
|
43
|
+
() => {
|
|
44
|
+
if (localRef.current) {
|
|
45
|
+
localRef.current.focus = (options?: FocusOptions) => {
|
|
46
|
+
textInputRef.current!.focus(options);
|
|
47
|
+
};
|
|
48
|
+
localRef.current.blur = () => {
|
|
49
|
+
textInputRef.current!.blur();
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
return localRef.current!;
|
|
54
|
+
},
|
|
55
|
+
[textInputRef, localRef]
|
|
56
|
+
);
|
|
57
|
+
|
|
58
|
+
// 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
59
|
|
|
34
60
|
// Update the text value of the input
|
|
35
61
|
const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
@@ -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
|
}
|