@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"}
|
|
@@ -17,22 +17,34 @@ const useSelectModel_1 = require("./hooks/useSelectModel");
|
|
|
17
17
|
const common_1 = require("@workday/canvas-kit-react/common");
|
|
18
18
|
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
19
19
|
const selectInputStencil = canvas_kit_styling_1.createStencil({
|
|
20
|
-
base: { name: "
|
|
20
|
+
base: { name: "10220f", styles: "box-sizing:border-box;caret-color:transparent;cursor:default;&::selection{background-color:transparent;}" }
|
|
21
21
|
}, "cnvs-select-input");
|
|
22
22
|
const selectIconsStencil = canvas_kit_styling_1.createStencil({
|
|
23
|
-
base: { name: "
|
|
23
|
+
base: { name: "def785", styles: "box-sizing:border-box;position:absolute;pointer-events:none;" }
|
|
24
24
|
}, "cnvs-select-icons");
|
|
25
25
|
const hiddenSelectInputStencil = canvas_kit_styling_1.createStencil({
|
|
26
|
-
base: { name: "
|
|
26
|
+
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;" }
|
|
27
27
|
}, "cnvs-hidden-select-input");
|
|
28
28
|
exports.SelectInput = common_1.createSubcomponent(text_input_1.TextInput)({
|
|
29
29
|
modelHook: useSelectModel_1.useSelectModel,
|
|
30
30
|
elemPropsHook: useSelectInput_1.useSelectInput,
|
|
31
|
-
})(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, width, ref, onChange, onInput,
|
|
31
|
+
})(({ placeholder = 'Choose an option', inputStartIcon, error, textInputProps, disabled, width, ref, onChange, onInput, value, name, ...elemProps }, Element, model) => {
|
|
32
|
+
const { localRef, elementRef } = common_1.useLocalRef(ref);
|
|
33
|
+
// We need to create a proxy between the multiple inputs. We need to redirect a few methods to
|
|
34
|
+
// the visible input
|
|
35
|
+
react_1.default.useImperativeHandle(elementRef, () => {
|
|
36
|
+
localRef.current.focus = (options) => {
|
|
37
|
+
textInputProps.ref.current.focus(options);
|
|
38
|
+
};
|
|
39
|
+
localRef.current.blur = () => {
|
|
40
|
+
textInputProps.ref.current.blur();
|
|
41
|
+
};
|
|
42
|
+
return localRef.current;
|
|
43
|
+
}, [textInputProps.ref, localRef]);
|
|
32
44
|
return (react_1.default.createElement(text_input_1.InputGroup, { "data-width": "ck-formfield-width" },
|
|
33
45
|
inputStartIcon && model.state.selectedIds.length > 0 && (react_1.default.createElement(text_input_1.InputGroup.InnerStart, Object.assign({}, selectIconsStencil()),
|
|
34
46
|
react_1.default.createElement(icon_1.SystemIcon, { icon: inputStartIcon }))),
|
|
35
|
-
react_1.default.createElement(text_input_1.InputGroup.Input, Object.assign({ error: error, disabled: disabled, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value,
|
|
47
|
+
react_1.default.createElement(text_input_1.InputGroup.Input, Object.assign({ error: error, disabled: disabled, tabIndex: -1, "aria-hidden": true, onChange: onChange, onInput: onInput, value: value, name: name, ref: elementRef }, hiddenSelectInputStencil())),
|
|
36
48
|
react_1.default.createElement(text_input_1.InputGroup.Input, Object.assign({ as: Element, disabled: disabled, placeholder: placeholder, error: error }, textInputProps, layout_1.mergeStyles(elemProps, selectInputStencil()))),
|
|
37
49
|
react_1.default.createElement(text_input_1.InputGroup.InnerEnd, Object.assign({}, selectIconsStencil()),
|
|
38
50
|
react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon }))));
|
|
@@ -45,7 +57,7 @@ exports.SelectItem = common_1.createSubcomponent('li')({
|
|
|
45
57
|
})(({ children, ...elemProps }, Element, _model) => {
|
|
46
58
|
return (react_1.default.createElement(combobox_1.Combobox.Menu.Item, Object.assign({ role: "option", as: Element }, elemProps), children));
|
|
47
59
|
});
|
|
48
|
-
const selectCardStyles = canvas_kit_styling_1.createStyles({ name: "
|
|
60
|
+
const selectCardStyles = canvas_kit_styling_1.createStyles({ name: "2fefdf", styles: "max-height:18.75rem;" });
|
|
49
61
|
exports.SelectCard = common_1.createSubcomponent('div')({
|
|
50
62
|
modelHook: useSelectModel_1.useSelectModel,
|
|
51
63
|
elemPropsHook: useSelectCard_1.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"}
|
|
@@ -124,5 +124,6 @@ exports.useSelectInput = common_1.composeHooks(common_1.createElemPropsHook(useS
|
|
|
124
124
|
: '',
|
|
125
125
|
},
|
|
126
126
|
ref: elementRef,
|
|
127
|
+
'aria-haspopup': 'menu',
|
|
127
128
|
};
|
|
128
129
|
}), combobox_1.useComboboxKeyboardTypeAhead, combobox_1.useComboboxResetCursorToSelected, combobox_1.useComboboxMoveCursorToSelected, combobox_1.useComboboxInput);
|
|
@@ -17,7 +17,7 @@ const countBadgeStencil = createStencil({
|
|
|
17
17
|
* `CountBadge` provides a quantity-based summary with dynamic values.
|
|
18
18
|
*/
|
|
19
19
|
export const CountBadge = createComponent('span')({
|
|
20
|
-
displayName: '
|
|
20
|
+
displayName: 'CountBadge',
|
|
21
21
|
Component: ({ count = 0, limit = 1000, variant, ...elemProps }, ref, Element) => {
|
|
22
22
|
const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
|
|
23
23
|
return (React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, [countBadgeStencil({ variant })])), formattedCount));
|
|
@@ -88,7 +88,7 @@ export declare const useComboboxInput: import("@workday/canvas-kit-react/common"
|
|
|
88
88
|
readonly onClick: (event: React.MouseEvent) => void;
|
|
89
89
|
readonly value: string | undefined;
|
|
90
90
|
readonly role: "combobox";
|
|
91
|
-
readonly 'aria-haspopup': true;
|
|
91
|
+
readonly 'aria-haspopup': boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
|
|
92
92
|
readonly 'aria-expanded': boolean;
|
|
93
93
|
readonly 'aria-autocomplete': "list";
|
|
94
94
|
readonly 'aria-controls': `${string}-list`;
|
|
@@ -61,7 +61,7 @@ export const useComboboxInput = composeHooks(createElemPropsHook(useComboboxMode
|
|
|
61
61
|
},
|
|
62
62
|
value: model.state.value,
|
|
63
63
|
role: 'combobox',
|
|
64
|
-
'aria-haspopup': true,
|
|
64
|
+
'aria-haspopup': 'true',
|
|
65
65
|
'aria-expanded': model.state.visibility === 'visible',
|
|
66
66
|
'aria-autocomplete': 'list',
|
|
67
67
|
'aria-controls': `${model.state.id}-list`,
|