@workday/canvas-kit-react 11.0.0-alpha.788-next.0 → 11.0.0-alpha.792-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/badge/lib/CountBadge.tsx +1 -1
- package/combobox/lib/hooks/useComboboxInput.ts +1 -1
- package/dist/commonjs/badge/lib/CountBadge.js +1 -1
- package/dist/commonjs/combobox/lib/hooks/useComboboxInput.d.ts +1 -1
- package/dist/commonjs/combobox/lib/hooks/useComboboxInput.js +1 -1
- package/dist/commonjs/select/lib/Select.d.ts +0 -280
- package/dist/commonjs/select/lib/Select.d.ts.map +1 -1
- package/dist/commonjs/select/lib/Select.js +18 -6
- package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts +2 -1
- package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts.map +1 -1
- package/dist/commonjs/select/lib/hooks/useSelectInput.js +1 -0
- package/dist/es6/badge/lib/CountBadge.js +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxInput.d.ts +1 -1
- package/dist/es6/combobox/lib/hooks/useComboboxInput.js +1 -1
- package/dist/es6/select/lib/Select.d.ts +0 -280
- package/dist/es6/select/lib/Select.d.ts.map +1 -1
- package/dist/es6/select/lib/Select.js +19 -7
- package/dist/es6/select/lib/hooks/useSelectInput.d.ts +2 -1
- package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map +1 -1
- package/dist/es6/select/lib/hooks/useSelectInput.js +1 -0
- package/package.json +4 -4
- package/select/lib/Select.tsx +21 -3
- package/select/lib/hooks/useSelectInput.ts +1 -0
|
@@ -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":"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,EAEV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,EAAE,OAAO;IAC/E;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAgCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4EvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWrB,CAAC;AAMH,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"}
|
|
@@ -8,25 +8,37 @@ 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, } from '@workday/canvas-kit-react/common';
|
|
11
|
+
import { createSubcomponent, createContainer, useLocalRef, } from '@workday/canvas-kit-react/common';
|
|
12
12
|
import { system } from '@workday/canvas-tokens-web';
|
|
13
13
|
const selectInputStencil = createStencil({
|
|
14
|
-
base: { name: "
|
|
14
|
+
base: { name: "10220f", styles: "box-sizing:border-box;caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
|
|
15
15
|
}, "cnvs-select-input");
|
|
16
16
|
const selectIconsStencil = createStencil({
|
|
17
|
-
base: { name: "
|
|
17
|
+
base: { name: "def785", styles: "box-sizing:border-box;position:absolute;pointer-events:none;" }
|
|
18
18
|
}, "cnvs-select-icons");
|
|
19
19
|
const hiddenSelectInputStencil = createStencil({
|
|
20
|
-
base: { name: "
|
|
20
|
+
base: { name: "cf34d9", 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
21
|
}, "cnvs-hidden-select-input");
|
|
22
22
|
export const SelectInput = createSubcomponent(TextInput)({
|
|
23
23
|
modelHook: useSelectModel,
|
|
24
24
|
elemPropsHook: useSelectInput,
|
|
25
|
-
})(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, width, ref, onChange, onInput,
|
|
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
|
+
localRef.current.focus = (options) => {
|
|
31
|
+
textInputProps.ref.current.focus(options);
|
|
32
|
+
};
|
|
33
|
+
localRef.current.blur = () => {
|
|
34
|
+
textInputProps.ref.current.blur();
|
|
35
|
+
};
|
|
36
|
+
return localRef.current;
|
|
37
|
+
}, [textInputProps.ref, localRef]);
|
|
26
38
|
return (React.createElement(InputGroup, { "data-width": "ck-formfield-width" },
|
|
27
39
|
inputStartIcon && model.state.selectedIds.length > 0 && (React.createElement(InputGroup.InnerStart, Object.assign({}, selectIconsStencil()),
|
|
28
40
|
React.createElement(SystemIcon, { icon: inputStartIcon }))),
|
|
29
|
-
React.createElement(InputGroup.Input, Object.assign({ error: error, disabled: disabled, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value,
|
|
41
|
+
React.createElement(InputGroup.Input, Object.assign({ error: error, disabled: disabled, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, name: name, ref: elementRef }, hiddenSelectInputStencil())),
|
|
30
42
|
React.createElement(InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, mergeStyles(elemProps, selectInputStencil()))),
|
|
31
43
|
React.createElement(InputGroup.InnerEnd, Object.assign({}, selectIconsStencil()),
|
|
32
44
|
React.createElement(SystemIcon, { icon: caretDownSmallIcon }))));
|
|
@@ -39,7 +51,7 @@ export const SelectItem = createSubcomponent('li')({
|
|
|
39
51
|
})(({ children, ...elemProps }, Element, _model) => {
|
|
40
52
|
return (React.createElement(Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
|
|
41
53
|
});
|
|
42
|
-
const selectCardStyles = createStyles({ name: "
|
|
54
|
+
const selectCardStyles = createStyles({ name: "2fefdf", styles: "max-height:18.75rem;" });
|
|
43
55
|
export const SelectCard = createSubcomponent('div')({
|
|
44
56
|
modelHook: useSelectModel,
|
|
45
57
|
elemPropsHook: useSelectCard,
|
|
@@ -90,6 +90,7 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
|
|
|
90
90
|
readonly value: string;
|
|
91
91
|
};
|
|
92
92
|
readonly ref: (instance: HTMLInputElement | null) => void;
|
|
93
|
+
readonly 'aria-haspopup': "menu";
|
|
93
94
|
} & {
|
|
94
95
|
onKeyDown(event: React.KeyboardEvent<Element>): void;
|
|
95
96
|
keySofar: string;
|
|
@@ -100,7 +101,7 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
|
|
|
100
101
|
readonly onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
|
|
101
102
|
readonly value: string | undefined;
|
|
102
103
|
readonly role: "combobox";
|
|
103
|
-
readonly 'aria-haspopup': true;
|
|
104
|
+
readonly 'aria-haspopup': boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
|
|
104
105
|
readonly 'aria-expanded': boolean;
|
|
105
106
|
readonly 'aria-autocomplete': "list";
|
|
106
107
|
readonly 'aria-controls': `${string}-list`;
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA4FF,mBAAmB;+BArFP,MAAM,WAAW,CAAC,gBAAgB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA4FF,mBAAmB;+BArFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuIvE,CAAC"}
|
|
@@ -118,5 +118,6 @@ export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((
|
|
|
118
118
|
: '',
|
|
119
119
|
},
|
|
120
120
|
ref: elementRef,
|
|
121
|
+
'aria-haspopup': 'menu',
|
|
121
122
|
};
|
|
122
123
|
}), useComboboxKeyboardTypeAhead, useComboboxResetCursorToSelected, useComboboxMoveCursorToSelected, useComboboxInput);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "11.0.0-alpha.
|
|
3
|
+
"version": "11.0.0-alpha.792-next.0",
|
|
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.0.0-alpha.
|
|
53
|
-
"@workday/canvas-kit-styling": "^11.0.0-alpha.
|
|
52
|
+
"@workday/canvas-kit-popup-stack": "^11.0.0-alpha.792-next.0",
|
|
53
|
+
"@workday/canvas-kit-styling": "^11.0.0-alpha.792-next.0",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
55
55
|
"@workday/canvas-tokens-web": "^1.3.1",
|
|
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": "a0579b1f9cb4ec69296e6b24569e06dd6a78fc0e"
|
|
71
71
|
}
|
package/select/lib/Select.tsx
CHANGED
|
@@ -14,6 +14,7 @@ import {
|
|
|
14
14
|
ExtractProps,
|
|
15
15
|
createContainer,
|
|
16
16
|
Themeable,
|
|
17
|
+
useLocalRef,
|
|
17
18
|
} from '@workday/canvas-kit-react/common';
|
|
18
19
|
import {system} from '@workday/canvas-tokens-web';
|
|
19
20
|
|
|
@@ -71,7 +72,6 @@ export const SelectInput = createSubcomponent(TextInput)({
|
|
|
71
72
|
ref,
|
|
72
73
|
onChange,
|
|
73
74
|
onInput,
|
|
74
|
-
onFocus,
|
|
75
75
|
value,
|
|
76
76
|
name,
|
|
77
77
|
...elemProps
|
|
@@ -79,6 +79,25 @@ export const SelectInput = createSubcomponent(TextInput)({
|
|
|
79
79
|
Element,
|
|
80
80
|
model
|
|
81
81
|
) => {
|
|
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
|
+
localRef.current!.focus = (options?: FocusOptions) => {
|
|
90
|
+
textInputProps.ref.current!.focus(options);
|
|
91
|
+
};
|
|
92
|
+
localRef.current!.blur = () => {
|
|
93
|
+
textInputProps.ref.current!.blur();
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
return localRef.current!;
|
|
97
|
+
},
|
|
98
|
+
[textInputProps.ref, localRef]
|
|
99
|
+
);
|
|
100
|
+
|
|
82
101
|
return (
|
|
83
102
|
<InputGroup data-width="ck-formfield-width">
|
|
84
103
|
{inputStartIcon && model.state.selectedIds.length > 0 && (
|
|
@@ -95,9 +114,8 @@ export const SelectInput = createSubcomponent(TextInput)({
|
|
|
95
114
|
onChange={onChange}
|
|
96
115
|
onInput={onInput}
|
|
97
116
|
value={value}
|
|
98
|
-
onFocus={onFocus}
|
|
99
117
|
name={name}
|
|
100
|
-
ref={
|
|
118
|
+
ref={elementRef}
|
|
101
119
|
{...hiddenSelectInputStencil()}
|
|
102
120
|
/>
|
|
103
121
|
{/* Visual input */}
|