@workday/canvas-kit-preview-react 16.0.0-alpha.0477-next.0 → 16.0.0-alpha.0479-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/dist/commonjs/multi-select/lib/MultiSelectInput.d.ts +10 -2
- package/dist/commonjs/multi-select/lib/MultiSelectInput.d.ts.map +1 -1
- package/dist/commonjs/multi-select/lib/MultiSelectInput.js +9 -8
- package/dist/es6/multi-select/lib/MultiSelectInput.d.ts +10 -2
- package/dist/es6/multi-select/lib/MultiSelectInput.d.ts.map +1 -1
- package/dist/es6/multi-select/lib/MultiSelectInput.js +11 -10
- package/multi-select/lib/MultiSelectInput.tsx +25 -7
- package/package.json +5 -5
|
@@ -33,7 +33,11 @@ export declare const multiSelectInputStencil: import("@workday/canvas-kit-stylin
|
|
|
33
33
|
outlineOffset: string;
|
|
34
34
|
};
|
|
35
35
|
};
|
|
36
|
-
}, {}, {},
|
|
36
|
+
}, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
|
|
37
|
+
shape: string;
|
|
38
|
+
}, never>, {}, {
|
|
39
|
+
shape: string;
|
|
40
|
+
}, never, never>, never>;
|
|
37
41
|
/** @deprecated use `multiSelectInputStencil` instead. This will be removed in a future version. */
|
|
38
42
|
export declare const multiSelectStencil: import("@workday/canvas-kit-styling").Stencil<{
|
|
39
43
|
error: {
|
|
@@ -66,7 +70,11 @@ export declare const multiSelectStencil: import("@workday/canvas-kit-styling").S
|
|
|
66
70
|
outlineOffset: string;
|
|
67
71
|
};
|
|
68
72
|
};
|
|
69
|
-
}, {}, {},
|
|
73
|
+
}, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
|
|
74
|
+
shape: string;
|
|
75
|
+
}, never>, {}, {
|
|
76
|
+
shape: string;
|
|
77
|
+
}, never, never>, never>;
|
|
70
78
|
export declare const useMultiSelectInput: import("@workday/canvas-kit-react/common").BehaviorHook<{
|
|
71
79
|
state: {
|
|
72
80
|
stackRef: React.RefObject<HTMLDivElement>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EACL,SAAS,
|
|
1
|
+
{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EACL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAQzF,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAI3D,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAiIlC,CAAC;AAEH,mGAAmG;AACnG,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAA0B,CAAC;AAE1D,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAGT,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sMA2BzC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,OAAO,EACb,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,CACvD,EACD,IAAI,CAAC,sBAAsB,EAAE,aAAa,CAAC;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6C5B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDlC,CAAC"}
|
|
@@ -13,14 +13,15 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
|
|
|
13
13
|
const MultiSelectedList_1 = require("./MultiSelectedList");
|
|
14
14
|
const useMultiSelectModel_1 = require("./useMultiSelectModel");
|
|
15
15
|
exports.multiSelectInputStencil = (0, canvas_kit_styling_1.createStencil)({
|
|
16
|
-
|
|
16
|
+
extends: common_1.cornerShapeStencil,
|
|
17
|
+
base: { name: "35bu6n", styles: "box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));transition:0.2s box-shadow, 0.2s border-color;margin:0;--width-text-input-7c8776:100%;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));&:where([data-part=\"user-input\"], [data-part=\"form-input\"]){height:2.375rem;}border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}&:has(:disabled, .disabled) :where([data-part=\"user-input\"]){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled) :where([data-part=\"form-input\"]){opacity:0;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}& :where([data-part=\"form-input\"]){position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));height:1px;margin:0 var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));flex-wrap:wrap;}" },
|
|
17
18
|
modifiers: {
|
|
18
19
|
error: {
|
|
19
|
-
error: { name: "
|
|
20
|
-
caution: { name: "
|
|
20
|
+
error: { name: "1rvzj4", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1)));background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))), 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}" },
|
|
21
|
+
caution: { name: "302ri3", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:hover, &.hover{border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:has(:focus-visible, .focus):not(:has([disabled])){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;" }
|
|
21
22
|
}
|
|
22
23
|
}
|
|
23
|
-
}, "multi-select-input-
|
|
24
|
+
}, "multi-select-input-5cacc4");
|
|
24
25
|
/** @deprecated use `multiSelectInputStencil` instead. This will be removed in a future version. */
|
|
25
26
|
exports.multiSelectStencil = exports.multiSelectInputStencil;
|
|
26
27
|
exports.useMultiSelectInput = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useMultiSelectModel_1.useMultiSelectModel)((model, ref) => {
|
|
@@ -50,12 +51,12 @@ exports.useMultiSelectInput = (0, common_1.composeHooks)((0, common_1.createElem
|
|
|
50
51
|
exports.MultiSelectInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
|
|
51
52
|
modelHook: useMultiSelectModel_1.useMultiSelectModel,
|
|
52
53
|
elemPropsHook: exports.useMultiSelectInput,
|
|
53
|
-
})(({ className, cs, style, error, 'aria-labelledby': ariaLabelledBy, removeLabel, disabled, formInputProps, ...elemProps }, Element) => {
|
|
54
|
-
return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectInputStencil)({ error })), children: [(0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "form-input", ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, disabled: disabled, error: error, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.
|
|
54
|
+
})(({ className, cs, style, error, 'aria-labelledby': ariaLabelledBy, removeLabel, disabled, formInputProps, ...elemProps }, Element, model) => {
|
|
55
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectInputStencil)({ error })), children: [(0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "form-input", ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, disabled: disabled, error: error, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { size: "md", icon: model.state.visibility === 'visible' ? canvas_system_icons_web_1.chevronUpSmallIcon : canvas_system_icons_web_1.chevronDownSmallIcon }) })] }), (0, jsx_runtime_1.jsx)(MultiSelectedList_1.MultiSelectedList, { disabled: disabled, removeLabel: removeLabel })] }));
|
|
55
56
|
});
|
|
56
57
|
exports.MultiSelectSearchInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
|
|
57
58
|
modelHook: useMultiSelectModel_1.useMultiSelectModel,
|
|
58
59
|
elemPropsHook: exports.useMultiSelectInput,
|
|
59
|
-
})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, disabled, error, ...elemProps }, Element) => {
|
|
60
|
-
return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectInputStencil)({})), children: [(0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerStart, { pointerEvents: "none", width: canvas_tokens_web_1.system.legacy.size.sm, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.searchIcon, size: "xs" }) }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, disabled: disabled, error: error, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { width: canvas_tokens_web_1.system.legacy.size.xxxs, children: (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.ClearButton, {}) }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.
|
|
60
|
+
})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, disabled, error, ...elemProps }, Element, model) => {
|
|
61
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ...(0, canvas_kit_styling_1.handleCsProp)({ className, cs, style }, (0, exports.multiSelectInputStencil)({})), children: [(0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { children: [(0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerStart, { pointerEvents: "none", width: canvas_tokens_web_1.system.legacy.size.sm, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.searchIcon, size: "xs" }) }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, disabled: disabled, error: error, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { width: canvas_tokens_web_1.system.legacy.size.xxxs, children: (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.ClearButton, {}) }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { size: "md", icon: model.state.visibility === 'visible' ? canvas_system_icons_web_1.chevronUpSmallIcon : canvas_system_icons_web_1.chevronDownSmallIcon }) })] }), (0, jsx_runtime_1.jsx)(MultiSelectedList_1.MultiSelectedList, { removeLabel: removeLabel, disabled: disabled })] }));
|
|
61
62
|
});
|
|
@@ -33,7 +33,11 @@ export declare const multiSelectInputStencil: import("@workday/canvas-kit-stylin
|
|
|
33
33
|
outlineOffset: string;
|
|
34
34
|
};
|
|
35
35
|
};
|
|
36
|
-
}, {}, {},
|
|
36
|
+
}, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
|
|
37
|
+
shape: string;
|
|
38
|
+
}, never>, {}, {
|
|
39
|
+
shape: string;
|
|
40
|
+
}, never, never>, never>;
|
|
37
41
|
/** @deprecated use `multiSelectInputStencil` instead. This will be removed in a future version. */
|
|
38
42
|
export declare const multiSelectStencil: import("@workday/canvas-kit-styling").Stencil<{
|
|
39
43
|
error: {
|
|
@@ -66,7 +70,11 @@ export declare const multiSelectStencil: import("@workday/canvas-kit-styling").S
|
|
|
66
70
|
outlineOffset: string;
|
|
67
71
|
};
|
|
68
72
|
};
|
|
69
|
-
}, {}, {},
|
|
73
|
+
}, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
|
|
74
|
+
shape: string;
|
|
75
|
+
}, never>, {}, {
|
|
76
|
+
shape: string;
|
|
77
|
+
}, never, never>, never>;
|
|
70
78
|
export declare const useMultiSelectInput: import("@workday/canvas-kit-react/common").BehaviorHook<{
|
|
71
79
|
state: {
|
|
72
80
|
stackRef: React.RefObject<HTMLDivElement>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EACL,SAAS,
|
|
1
|
+
{"version":3,"file":"MultiSelectInput.d.ts","sourceRoot":"","sources":["../../../../multi-select/lib/MultiSelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EACL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,OAAO,EAAsC,MAAM,6BAA6B,CAAC;AAQzF,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAI3D,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAiIlC,CAAC;AAEH,mGAAmG;AACnG,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAA0B,CAAC;AAE1D,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAGT,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sMA2BzC,CAAC;AAEF,MAAM,WAAW,qBACf,SAAQ,OAAO,EACb,IAAI,CACF,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,iBAAiB,CACvD,EACD,IAAI,CAAC,sBAAsB,EAAE,aAAa,CAAC;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6C5B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuDlC,CAAC"}
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { getCursor } from '@workday/canvas-kit-react/collection';
|
|
3
3
|
import { useComboboxInput, useComboboxInputConstrained } from '@workday/canvas-kit-react/combobox';
|
|
4
|
-
import { composeHooks, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
|
|
4
|
+
import { composeHooks, cornerShapeStencil, createElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
|
|
5
5
|
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
6
6
|
import { InputGroup, TextInput, textInputStencil } from '@workday/canvas-kit-react/text-input';
|
|
7
7
|
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
|
|
8
|
-
import {
|
|
8
|
+
import { chevronDownSmallIcon, chevronUpSmallIcon, searchIcon, } from '@workday/canvas-system-icons-web';
|
|
9
9
|
import { system } from '@workday/canvas-tokens-web';
|
|
10
10
|
import { MultiSelectedList } from './MultiSelectedList';
|
|
11
11
|
import { useMultiSelectModel } from './useMultiSelectModel';
|
|
12
12
|
export const multiSelectInputStencil = createStencil({
|
|
13
|
-
|
|
13
|
+
extends: cornerShapeStencil,
|
|
14
|
+
base: { name: "35bu6n", styles: "box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);min-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));transition:0.2s box-shadow, 0.2s border-color;margin:0;--width-text-input-7c8776:100%;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));}& [data-part=\"user-input\"]{font-family:var(--cnvs-sys-font-family-default);font-size:var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));background-color:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-radius:var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));&:where([data-part=\"user-input\"], [data-part=\"form-input\"]){height:2.375rem;}border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}&:has(:disabled, .disabled) :where([data-part=\"user-input\"]){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled){opacity:var(--cnvs-sys-opacity-disabled);--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}&:has(:disabled, .disabled) :where([data-part=\"form-input\"]){opacity:0;--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}& :where([data-part=\"form-input\"]){position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));height:1px;margin:0 var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));flex-wrap:wrap;}" },
|
|
14
15
|
modifiers: {
|
|
15
16
|
error: {
|
|
16
|
-
error: { name: "
|
|
17
|
-
caution: { name: "
|
|
17
|
+
error: { name: "1rvzj4", styles: "border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1)));background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));&:has(:hover, :disabled, :focus-visible), &:is(.hover, .disabled, .focus){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:has(:focus-visible:not([disabled])), &.focus{border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))), 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))), 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));outline-offset:0.125rem;}" },
|
|
18
|
+
caution: { name: "302ri3", styles: "border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));&:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:hover, &.hover{border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:has(:focus-visible, .focus):not(:has([disabled])){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),\n 0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),\n 0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}outline-offset:0.125rem;" }
|
|
18
19
|
}
|
|
19
20
|
}
|
|
20
|
-
}, "multi-select-input-
|
|
21
|
+
}, "multi-select-input-5cacc4");
|
|
21
22
|
/** @deprecated use `multiSelectInputStencil` instead. This will be removed in a future version. */
|
|
22
23
|
export const multiSelectStencil = multiSelectInputStencil;
|
|
23
24
|
export const useMultiSelectInput = composeHooks(createElemPropsHook(useMultiSelectModel)((model, ref) => {
|
|
@@ -47,12 +48,12 @@ export const useMultiSelectInput = composeHooks(createElemPropsHook(useMultiSele
|
|
|
47
48
|
export const MultiSelectInput = createSubcomponent(TextInput)({
|
|
48
49
|
modelHook: useMultiSelectModel,
|
|
49
50
|
elemPropsHook: useMultiSelectInput,
|
|
50
|
-
})(({ className, cs, style, error, 'aria-labelledby': ariaLabelledBy, removeLabel, disabled, formInputProps, ...elemProps }, Element) => {
|
|
51
|
-
return (_jsxs("div", { ...handleCsProp({ className, cs, style }, multiSelectInputStencil({ error })), children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.Input, { "data-part": "form-input", ...formInputProps }), _jsx(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, disabled: disabled, error: error, ...elemProps }), _jsx(InputGroup.InnerEnd, { pointerEvents: "none", children: _jsx(SystemIcon, {
|
|
51
|
+
})(({ className, cs, style, error, 'aria-labelledby': ariaLabelledBy, removeLabel, disabled, formInputProps, ...elemProps }, Element, model) => {
|
|
52
|
+
return (_jsxs("div", { ...handleCsProp({ className, cs, style }, multiSelectInputStencil({ error })), children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.Input, { "data-part": "form-input", ...formInputProps }), _jsx(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, readOnly: true, disabled: disabled, error: error, ...elemProps }), _jsx(InputGroup.InnerEnd, { pointerEvents: "none", children: _jsx(SystemIcon, { size: "md", icon: model.state.visibility === 'visible' ? chevronUpSmallIcon : chevronDownSmallIcon }) })] }), _jsx(MultiSelectedList, { disabled: disabled, removeLabel: removeLabel })] }));
|
|
52
53
|
});
|
|
53
54
|
export const MultiSelectSearchInput = createSubcomponent(TextInput)({
|
|
54
55
|
modelHook: useMultiSelectModel,
|
|
55
56
|
elemPropsHook: useMultiSelectInput,
|
|
56
|
-
})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, disabled, error, ...elemProps }, Element) => {
|
|
57
|
-
return (_jsxs("div", { ...handleCsProp({ className, cs, style }, multiSelectInputStencil({})), children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.InnerStart, { pointerEvents: "none", width: system.legacy.size.sm, children: _jsx(SystemIcon, { icon: searchIcon, size: "xs" }) }), _jsx(InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }), _jsx(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, disabled: disabled, error: error, ...elemProps }), _jsx(InputGroup.InnerEnd, { width: system.legacy.size.xxxs, children: _jsx(InputGroup.ClearButton, {}) }), _jsx(InputGroup.InnerEnd, { pointerEvents: "none", children: _jsx(SystemIcon, {
|
|
57
|
+
})(({ className, cs, style, 'aria-labelledby': ariaLabelledBy, removeLabel, formInputProps, ref, disabled, error, ...elemProps }, Element, model) => {
|
|
58
|
+
return (_jsxs("div", { ...handleCsProp({ className, cs, style }, multiSelectInputStencil({})), children: [_jsxs(InputGroup, { children: [_jsx(InputGroup.InnerStart, { pointerEvents: "none", width: system.legacy.size.sm, children: _jsx(SystemIcon, { icon: searchIcon, size: "xs" }) }), _jsx(InputGroup.Input, { "data-part": "form-input", placeholder: null, ...formInputProps }), _jsx(InputGroup.Input, { "data-part": "user-input", as: Element, "aria-labelledby": ariaLabelledBy, disabled: disabled, error: error, ...elemProps }), _jsx(InputGroup.InnerEnd, { width: system.legacy.size.xxxs, children: _jsx(InputGroup.ClearButton, {}) }), _jsx(InputGroup.InnerEnd, { pointerEvents: "none", children: _jsx(SystemIcon, { size: "md", icon: model.state.visibility === 'visible' ? chevronUpSmallIcon : chevronDownSmallIcon }) })] }), _jsx(MultiSelectedList, { removeLabel: removeLabel, disabled: disabled })] }));
|
|
58
59
|
});
|
|
@@ -5,13 +5,18 @@ import {useComboboxInput, useComboboxInputConstrained} from '@workday/canvas-kit
|
|
|
5
5
|
import {
|
|
6
6
|
ErrorType,
|
|
7
7
|
composeHooks,
|
|
8
|
+
cornerShapeStencil,
|
|
8
9
|
createElemPropsHook,
|
|
9
10
|
createSubcomponent,
|
|
10
11
|
} from '@workday/canvas-kit-react/common';
|
|
11
12
|
import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
12
13
|
import {InputGroup, TextInput, textInputStencil} from '@workday/canvas-kit-react/text-input';
|
|
13
14
|
import {CSProps, createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
|
|
14
|
-
import {
|
|
15
|
+
import {
|
|
16
|
+
chevronDownSmallIcon,
|
|
17
|
+
chevronUpSmallIcon,
|
|
18
|
+
searchIcon,
|
|
19
|
+
} from '@workday/canvas-system-icons-web';
|
|
15
20
|
import {system} from '@workday/canvas-tokens-web';
|
|
16
21
|
|
|
17
22
|
import {MultiSelectedItemProps} from './MultiSelectedItem';
|
|
@@ -19,12 +24,13 @@ import {MultiSelectedList} from './MultiSelectedList';
|
|
|
19
24
|
import {useMultiSelectModel} from './useMultiSelectModel';
|
|
20
25
|
|
|
21
26
|
export const multiSelectInputStencil = createStencil({
|
|
27
|
+
extends: cornerShapeStencil,
|
|
22
28
|
base: {
|
|
23
|
-
border:
|
|
29
|
+
border: `${px2rem(1)} solid ${system.color.border.input.default}`,
|
|
24
30
|
display: 'flex',
|
|
25
31
|
flexDirection: 'column',
|
|
26
32
|
backgroundColor: system.legacy.color.surface.default,
|
|
27
|
-
|
|
33
|
+
[cornerShapeStencil.vars.shape]: system.legacy.shape.lg,
|
|
28
34
|
boxSizing: 'border-box',
|
|
29
35
|
minHeight: system.legacy.size.md,
|
|
30
36
|
transition: '0.2s box-shadow, 0.2s border-color',
|
|
@@ -209,7 +215,8 @@ export const MultiSelectInput = createSubcomponent(TextInput)({
|
|
|
209
215
|
formInputProps,
|
|
210
216
|
...elemProps
|
|
211
217
|
},
|
|
212
|
-
Element
|
|
218
|
+
Element,
|
|
219
|
+
model
|
|
213
220
|
) => {
|
|
214
221
|
return (
|
|
215
222
|
<div {...handleCsProp({className, cs, style}, multiSelectInputStencil({error}))}>
|
|
@@ -225,7 +232,12 @@ export const MultiSelectInput = createSubcomponent(TextInput)({
|
|
|
225
232
|
{...elemProps}
|
|
226
233
|
/>
|
|
227
234
|
<InputGroup.InnerEnd pointerEvents="none">
|
|
228
|
-
<SystemIcon
|
|
235
|
+
<SystemIcon
|
|
236
|
+
size="md"
|
|
237
|
+
icon={
|
|
238
|
+
model.state.visibility === 'visible' ? chevronUpSmallIcon : chevronDownSmallIcon
|
|
239
|
+
}
|
|
240
|
+
/>
|
|
229
241
|
</InputGroup.InnerEnd>
|
|
230
242
|
</InputGroup>
|
|
231
243
|
<MultiSelectedList disabled={disabled} removeLabel={removeLabel} />
|
|
@@ -251,7 +263,8 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
|
|
|
251
263
|
error,
|
|
252
264
|
...elemProps
|
|
253
265
|
},
|
|
254
|
-
Element
|
|
266
|
+
Element,
|
|
267
|
+
model
|
|
255
268
|
) => {
|
|
256
269
|
return (
|
|
257
270
|
<div {...handleCsProp({className, cs, style}, multiSelectInputStencil({}))}>
|
|
@@ -276,7 +289,12 @@ export const MultiSelectSearchInput = createSubcomponent(TextInput)({
|
|
|
276
289
|
<InputGroup.ClearButton />
|
|
277
290
|
</InputGroup.InnerEnd>
|
|
278
291
|
<InputGroup.InnerEnd pointerEvents="none">
|
|
279
|
-
<SystemIcon
|
|
292
|
+
<SystemIcon
|
|
293
|
+
size="md"
|
|
294
|
+
icon={
|
|
295
|
+
model.state.visibility === 'visible' ? chevronUpSmallIcon : chevronDownSmallIcon
|
|
296
|
+
}
|
|
297
|
+
/>
|
|
280
298
|
</InputGroup.InnerEnd>
|
|
281
299
|
</InputGroup>
|
|
282
300
|
<MultiSelectedList removeLabel={removeLabel} disabled={disabled} />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-preview-react",
|
|
3
|
-
"version": "16.0.0-alpha.
|
|
3
|
+
"version": "16.0.0-alpha.0479-next.0",
|
|
4
4
|
"description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -48,10 +48,10 @@
|
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@emotion/react": "^11.7.1",
|
|
50
50
|
"@emotion/styled": "^11.6.0",
|
|
51
|
-
"@workday/canvas-kit-react": "^16.0.0-alpha.
|
|
52
|
-
"@workday/canvas-kit-styling": "^16.0.0-alpha.
|
|
51
|
+
"@workday/canvas-kit-react": "^16.0.0-alpha.0479-next.0",
|
|
52
|
+
"@workday/canvas-kit-styling": "^16.0.0-alpha.0479-next.0",
|
|
53
53
|
"@workday/canvas-system-icons-web": "4.0.4",
|
|
54
|
-
"@workday/canvas-tokens-web": "4.4.0-beta.
|
|
54
|
+
"@workday/canvas-tokens-web": "4.4.0-beta.7",
|
|
55
55
|
"@workday/design-assets-types": "^0.3.0"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"react-hook-form": "7.36.1",
|
|
61
61
|
"yup": "^0.32.11"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "1345e0f544f5bbd437409e92c3002f77e866306c"
|
|
64
64
|
}
|