@workday/canvas-kit-react 16.0.0-alpha.0476-next.0 → 16.0.0-alpha.0478-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.
Files changed (19) hide show
  1. package/dist/commonjs/menu/lib/MenuPopper.js +1 -1
  2. package/dist/commonjs/select/lib/SelectInput.d.ts.map +1 -1
  3. package/dist/commonjs/select/lib/SelectInput.js +5 -5
  4. package/dist/commonjs/text-input/lib/InputGroup.d.ts.map +1 -1
  5. package/dist/commonjs/text-input/lib/InputGroup.js +14 -10
  6. package/dist/commonjs/text-input/lib/TextInput.d.ts.map +1 -1
  7. package/dist/commonjs/text-input/lib/TextInput.js +2 -2
  8. package/dist/es6/menu/lib/MenuPopper.js +1 -1
  9. package/dist/es6/select/lib/SelectInput.d.ts.map +1 -1
  10. package/dist/es6/select/lib/SelectInput.js +6 -6
  11. package/dist/es6/text-input/lib/InputGroup.d.ts.map +1 -1
  12. package/dist/es6/text-input/lib/InputGroup.js +15 -11
  13. package/dist/es6/text-input/lib/TextInput.d.ts.map +1 -1
  14. package/dist/es6/text-input/lib/TextInput.js +2 -2
  15. package/menu/lib/MenuPopper.tsx +1 -1
  16. package/package.json +4 -4
  17. package/select/lib/SelectInput.tsx +10 -2
  18. package/text-input/lib/InputGroup.tsx +17 -2
  19. package/text-input/lib/TextInput.tsx +0 -1
package/dist/commonjs/menu/lib/MenuPopper.js CHANGED
@@ -12,7 +12,7 @@ exports.defaultMenuPopperOptions = {
12
12
  {
13
13
  name: 'offset',
14
14
  options: {
15
- offset: () => [0, 4],
15
+ offset: () => [0, 8],
16
16
  },
17
17
  },
18
18
  ],
package/dist/commonjs/select/lib/SelectInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAC,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAC,gBAAgB,EAAqB,MAAM,kCAAkC,CAAC;AAMtF,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO;IACtF;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAuE7B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BtB,CAAC"}
1
+ {"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAC,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EACL,gBAAgB,EAGjB,MAAM,kCAAkC,CAAC;AAM1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO;IACtF;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAuE7B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BtB,CAAC"}
package/dist/commonjs/select/lib/SelectInput.js CHANGED
@@ -20,17 +20,17 @@ exports.selectInputStencil = (0, canvas_kit_styling_1.createStencil)({
20
20
  hiddenInput: 'select-hidden-input',
21
21
  visualInput: 'select-visual-input',
22
22
  },
23
- base: { name: "2bnoiw", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;}[data-part=\"select-start-icon\"], [data-part=\"select-end-icon\"], [data-part=\"select-caret-container\"], [data-part=\"select-start-icon-container\"]{position:absolute;pointer-events:none;}[data-part=\"select-visual-input\"]{caret-color:transparent;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-fg-default);}&::selection{background-color:transparent;}}[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}&:has(:disabled, .disabled){[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}}" },
23
+ base: { name: "r1mii", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;}[data-part=\"select-start-icon\"], [data-part=\"select-end-icon\"], [data-part=\"select-caret-container\"], [data-part=\"select-start-icon-container\"]{position:absolute;pointer-events:none;}[data-part=\"select-visual-input\"]{caret-color:transparent;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-fg-default);}&::selection{background-color:transparent;}}[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}&:has(:disabled, .disabled){[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}}" },
24
24
  modifiers: {
25
25
  error: {
26
- error: { name: "zr9yt", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));}" },
27
- caution: { name: "12wrkt", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));}" }
26
+ error: { name: "23y4gy", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));}" },
27
+ caution: { name: "o7q5t", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));}" }
28
28
  }
29
29
  }
30
- }, "select-input-8483f2");
30
+ }, "select-input-3e661d");
31
31
  exports.SelectInput = (0, common_1.createSubcomponent)(text_input_1.TextInput)({
32
32
  modelHook: useSelectModel_1.useSelectModel,
33
33
  elemPropsHook: useSelectInput_1.useSelectInput,
34
34
  })(({ inputStartIcon, formInputProps, error, ...elemProps }, Element, model) => {
35
- return ((0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { "data-width": "ck-formfield-width", ...(0, exports.selectInputStencil)({ error: error }), children: [inputStartIcon && model.state.selectedIds.length > 0 && ((0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerStart, { ...exports.selectInputStencil.parts.startIconContainer, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { ...exports.selectInputStencil.parts.startIcon, icon: inputStartIcon }) })), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { ...exports.selectInputStencil.parts.hiddenInput, ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { as: Element, placeholder: "Choose an option", error: error, ...exports.selectInputStencil.parts.visualInput, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { ...exports.selectInputStencil.parts.caretContainer, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { ...exports.selectInputStencil.parts.caret, icon: canvas_system_icons_web_1.caretDownSmallIcon }) })] }));
35
+ return ((0, jsx_runtime_1.jsxs)(text_input_1.InputGroup, { "data-width": "ck-formfield-width", ...(0, exports.selectInputStencil)({ error: error }), children: [inputStartIcon && model.state.selectedIds.length > 0 && ((0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerStart, { ...exports.selectInputStencil.parts.startIconContainer, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { ...exports.selectInputStencil.parts.startIcon, icon: inputStartIcon }) })), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { ...exports.selectInputStencil.parts.hiddenInput, ...formInputProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.Input, { as: Element, placeholder: "Choose an option", error: error, ...exports.selectInputStencil.parts.visualInput, ...elemProps }), (0, jsx_runtime_1.jsx)(text_input_1.InputGroup.InnerEnd, { ...exports.selectInputStencil.parts.caretContainer, children: (0, jsx_runtime_1.jsx)(icon_1.SystemIcon, { size: "md", ...exports.selectInputStencil.parts.caret, icon: model.state.visibility === 'visible' ? canvas_system_icons_web_1.chevronUpSmallIcon : canvas_system_icons_web_1.chevronDownSmallIcon }) })] }));
36
36
  });
package/dist/commonjs/text-input/lib/InputGroup.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAC,gBAAgB,EAAa,MAAM,kCAAkC,CAAC;AAK9E,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;IAE/B;;;OAGG;;IAEH;;;OAGG;;;;IAIH;;OAEG;;gBAkBL,CAAC;AA4CH,eAAO,MAAM,kBAAkB;;;;;;;;EAO7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;gBAiBjC,CAAC;AAsBH,eAAO,MAAM,cAAc;;;;;;;;;;kCAWJ,gBAAgB;;EAQrC,CAAC;AA6BH,eAAO,MAAM,iBAAiB,iJAiB5B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CAsDL,CAAC"}
1
+ {"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,EAAC,gBAAgB,EAAa,MAAM,kCAAkC,CAAC;AAK9E,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;IAE/B;;;OAGG;;IAEH;;;OAGG;;;;IAIH;;OAEG;;gBAmBL,CAAC;AA4CH,eAAO,MAAM,kBAAkB;;;;;;;;EAO7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;gBAiBjC,CAAC;AAsBH,eAAO,MAAM,cAAc;;;;;;;;;;kCAWJ,gBAAgB;;EAQrC,CAAC;AA0CH,eAAO,MAAM,iBAAiB,iJAiB5B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CAsDL,CAAC"}
package/dist/commonjs/text-input/lib/InputGroup.js CHANGED
@@ -8,6 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const react_1 = __importDefault(require("react"));
9
9
  const button_1 = require("@workday/canvas-kit-react/button");
10
10
  const common_1 = require("@workday/canvas-kit-react/common");
11
+ const icon_1 = require("@workday/canvas-kit-react/icon");
11
12
  const layout_1 = require("@workday/canvas-kit-react/layout");
12
13
  const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
13
14
  const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
@@ -41,13 +42,13 @@ exports.inputGroupInnerStencil = (0, canvas_kit_styling_1.createStencil)({
41
42
  */
42
43
  pointerEvents: '',
43
44
  },
44
- base: { name: "2tze9n", styles: "--insetInlineStart-input-group-inner-9e2c81:initial;--insetInlineEnd-input-group-inner-9e2c81:initial;--width-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-9e2c81);height:var(--height-input-group-inner-9e2c81);inset-inline-start:var(--insetInlineStart-input-group-inner-9e2c81);inset-inline-end:var(--insetInlineEnd-input-group-inner-9e2c81);" },
45
+ base: { name: "3m5lrc", styles: "--insetInlineStart-input-group-inner-fddb83:initial;--insetInlineEnd-input-group-inner-fddb83:initial;--width-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-fddb83);height:var(--height-input-group-inner-fddb83);inset-inline-start:var(--insetInlineStart-input-group-inner-fddb83);inset-inline-end:var(--insetInlineEnd-input-group-inner-fddb83);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);" },
45
46
  modifiers: {
46
47
  pointerEvents: {
47
- _: { name: "1rcuyd", styles: "pointer-events:var(--pointerEvents-input-group-inner-9e2c81);" }
48
+ _: { name: "26ygsl", styles: "pointer-events:var(--pointerEvents-input-group-inner-fddb83);" }
48
49
  }
49
50
  }
50
- }, "input-group-inner-9e2c81");
51
+ }, "input-group-inner-fddb83");
51
52
  const InputGroupInnerStart = (0, common_1.createSubcomponent)('div')({
52
53
  modelHook: exports.useInputGroupModel,
53
54
  })(({ pointerEvents, insetInlineStart, insetInlineEnd, width, height, ...elemProps }, Element) => {
@@ -82,16 +83,16 @@ exports.inputGroupInputStencil = (0, canvas_kit_styling_1.createStencil)({
82
83
  paddingInlineStart: '',
83
84
  paddingInlineEnd: '',
84
85
  },
85
- base: { name: "4edwl9", styles: "box-sizing:border-box;display:flex;width:100%;" },
86
+ base: { name: "3czs8y", styles: "box-sizing:border-box;display:flex;width:100%;" },
86
87
  modifiers: {
87
88
  paddingInlineStart: {
88
- _: { name: "10t2az", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-7be7a4);" }
89
+ _: { name: "2h3jl8", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-b51031);" }
89
90
  },
90
91
  paddingInlineEnd: {
91
- _: { name: "2txv9n", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-7be7a4);" }
92
+ _: { name: "4bzoag", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-b51031);" }
92
93
  }
93
94
  }
94
- }, "input-group-input-7be7a4");
95
+ }, "input-group-input-b51031");
95
96
  const InputGroupInput = (0, common_1.createSubcomponent)(TextInput_1.TextInput)({
96
97
  modelHook: exports.useInputGroupModel,
97
98
  elemPropsHook: exports.useInputGroupInput,
@@ -121,6 +122,9 @@ exports.useClearButton = (0, common_1.createElemPropsHook)(exports.useInputGroup
121
122
  },
122
123
  };
123
124
  });
125
+ const clearButtonStencil = (0, canvas_kit_styling_1.createStencil)({
126
+ base: { name: "4946g7", styles: "box-sizing:border-box;svg{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);}" }
127
+ }, "clear-button-49e5c1");
124
128
  /**
125
129
  * A clear input button. This can be a component later.
126
130
  */
@@ -128,7 +132,7 @@ const ClearButton = (0, common_1.createSubcomponent)(button_1.TertiaryButton)({
128
132
  modelHook: exports.useInputGroupModel,
129
133
  elemPropsHook: exports.useClearButton,
130
134
  })((elemProps, Element) => {
131
- return (0, jsx_runtime_1.jsx)(Element, { "data-part": "input-group-clear-button", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps) });
135
+ return ((0, jsx_runtime_1.jsx)(Element, { "data-part": "input-group-clear-button", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, clearButtonStencil()) }));
132
136
  });
133
137
  // make sure we always use pixels if the input is a number - this is required for `calc`
134
138
  const toPx = (input) => {
@@ -146,8 +150,8 @@ const wrapInCalc = (values) => {
146
150
  return `calc(${values.map(toPx).join(' + ')})`;
147
151
  };
148
152
  exports.inputGroupStencil = (0, canvas_kit_styling_1.createStencil)({
149
- base: { name: "ax3sr", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
150
- }, "input-group-2e0e78");
153
+ base: { name: "1mby7n", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
154
+ }, "input-group-1aae89");
151
155
  /**
152
156
  * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
153
157
  * elements. The inner start and end elements are usually icons or icon buttons visually represented
package/dist/commonjs/text-input/lib/TextInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,OAAO,EAAgC,MAAM,6BAA6B,CAAC;AAGnF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,OAAO;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2G3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAqBpB,CAAC"}
1
+ {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,OAAO,EAAgC,MAAM,6BAA6B,CAAC;AAGnF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,OAAO;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0G3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAqBpB,CAAC"}
package/dist/commonjs/text-input/lib/TextInput.js CHANGED
@@ -18,8 +18,8 @@ exports.textInputStencil = (0, canvas_kit_styling_1.createStencil)({
18
18
  false: { name: "2f0cc6", styles: "width:initial;" }
19
19
  },
20
20
  error: {
21
- error: { name: "30qz77", 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-border-critical, oklch(0.6495 0.2369 30.04 / 1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 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;}@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;}" },
22
- caution: { name: "2y4znt", 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)));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([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;@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;outline-offset:0;}" }
21
+ error: { name: "sif5x", 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-border-critical, oklch(0.6495 0.2369 30.04 / 1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 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;}@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;}" },
22
+ caution: { name: "6plwv", 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)));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([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;@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;outline-offset:0;}" }
23
23
  }
24
24
  },
25
25
  defaultModifiers: {
package/dist/es6/menu/lib/MenuPopper.js CHANGED
@@ -9,7 +9,7 @@ export const defaultMenuPopperOptions = {
9
9
  {
10
10
  name: 'offset',
11
11
  options: {
12
- offset: () => [0, 4],
12
+ offset: () => [0, 8],
13
13
  },
14
14
  },
15
15
  ],
package/dist/es6/select/lib/SelectInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAC,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EAAC,gBAAgB,EAAqB,MAAM,kCAAkC,CAAC;AAMtF,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO;IACtF;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAuE7B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BtB,CAAC"}
1
+ {"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAa,SAAS,EAAC,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAC,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AACnE,OAAO,EACL,gBAAgB,EAGjB,MAAM,kCAAkC,CAAC;AAM1C,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC,EAAE,OAAO;IACtF;;;;OAIG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAuE7B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BtB,CAAC"}
package/dist/es6/select/lib/SelectInput.js CHANGED
@@ -3,7 +3,7 @@ import { createSubcomponent } from '@workday/canvas-kit-react/common';
3
3
  import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
4
4
  import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
5
5
  import { createStencil } from '@workday/canvas-kit-styling';
6
- import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
6
+ import { chevronDownSmallIcon, chevronUpSmallIcon, } from '@workday/canvas-system-icons-web';
7
7
  import { system } from '@workday/canvas-tokens-web';
8
8
  import { useSelectInput } from './hooks/useSelectInput';
9
9
  import { useSelectModel } from './hooks/useSelectModel';
@@ -17,17 +17,17 @@ export const selectInputStencil = createStencil({
17
17
  hiddenInput: 'select-hidden-input',
18
18
  visualInput: 'select-visual-input',
19
19
  },
20
- base: { name: "2bnoiw", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;}[data-part=\"select-start-icon\"], [data-part=\"select-end-icon\"], [data-part=\"select-caret-container\"], [data-part=\"select-start-icon-container\"]{position:absolute;pointer-events:none;}[data-part=\"select-visual-input\"]{caret-color:transparent;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-fg-default);}&::selection{background-color:transparent;}}[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}&:has(:disabled, .disabled){[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}}" },
20
+ base: { name: "r1mii", styles: "box-sizing:border-box;[data-part=\"select-hidden-input\"]{position:absolute;top:0;bottom:0;left:0;right:0;opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;min-width:100%;width:100%;}[data-part=\"select-start-icon\"], [data-part=\"select-end-icon\"], [data-part=\"select-caret-container\"], [data-part=\"select-start-icon-container\"]{position:absolute;pointer-events:none;}[data-part=\"select-visual-input\"]{caret-color:transparent;background-color:var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));color:var(--cnvs-sys-color-fg-default);cursor:default;&::placeholder{color:var(--cnvs-sys-color-fg-default);}&::selection{background-color:transparent;}}[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);}&:has(:disabled, .disabled){[data-part=\"select-caret-icon\"]{--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-disabled);}}" },
21
21
  modifiers: {
22
22
  error: {
23
- error: { name: "zr9yt", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));}" },
24
- caution: { name: "12wrkt", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));}" }
23
+ error: { name: "23y4gy", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));}" },
24
+ caution: { name: "o7q5t", styles: "[data-part=\"select-visual-input\"]{background-color:var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));}" }
25
25
  }
26
26
  }
27
- }, "select-input-8483f2");
27
+ }, "select-input-3e661d");
28
28
  export const SelectInput = createSubcomponent(TextInput)({
29
29
  modelHook: useSelectModel,
30
30
  elemPropsHook: useSelectInput,
31
31
  })(({ inputStartIcon, formInputProps, error, ...elemProps }, Element, model) => {
32
- return (_jsxs(InputGroup, { "data-width": "ck-formfield-width", ...selectInputStencil({ error: error }), children: [inputStartIcon && model.state.selectedIds.length > 0 && (_jsx(InputGroup.InnerStart, { ...selectInputStencil.parts.startIconContainer, children: _jsx(SystemIcon, { ...selectInputStencil.parts.startIcon, icon: inputStartIcon }) })), _jsx(InputGroup.Input, { ...selectInputStencil.parts.hiddenInput, ...formInputProps }), _jsx(InputGroup.Input, { as: Element, placeholder: "Choose an option", error: error, ...selectInputStencil.parts.visualInput, ...elemProps }), _jsx(InputGroup.InnerEnd, { ...selectInputStencil.parts.caretContainer, children: _jsx(SystemIcon, { ...selectInputStencil.parts.caret, icon: caretDownSmallIcon }) })] }));
32
+ return (_jsxs(InputGroup, { "data-width": "ck-formfield-width", ...selectInputStencil({ error: error }), children: [inputStartIcon && model.state.selectedIds.length > 0 && (_jsx(InputGroup.InnerStart, { ...selectInputStencil.parts.startIconContainer, children: _jsx(SystemIcon, { ...selectInputStencil.parts.startIcon, icon: inputStartIcon }) })), _jsx(InputGroup.Input, { ...selectInputStencil.parts.hiddenInput, ...formInputProps }), _jsx(InputGroup.Input, { as: Element, placeholder: "Choose an option", error: error, ...selectInputStencil.parts.visualInput, ...elemProps }), _jsx(InputGroup.InnerEnd, { ...selectInputStencil.parts.caretContainer, children: _jsx(SystemIcon, { size: "md", ...selectInputStencil.parts.caret, icon: model.state.visibility === 'visible' ? chevronUpSmallIcon : chevronDownSmallIcon }) })] }));
33
33
  });
package/dist/es6/text-input/lib/InputGroup.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,EAAC,gBAAgB,EAAa,MAAM,kCAAkC,CAAC;AAK9E,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;IAE/B;;;OAGG;;IAEH;;;OAGG;;;;IAIH;;OAEG;;gBAkBL,CAAC;AA4CH,eAAO,MAAM,kBAAkB;;;;;;;;EAO7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;gBAiBjC,CAAC;AAsBH,eAAO,MAAM,cAAc;;;;;;;;;;kCAWJ,gBAAgB;;EAQrC,CAAC;AA6BH,eAAO,MAAM,iBAAiB,iJAiB5B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CAsDL,CAAC"}
1
+ {"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,EAAC,gBAAgB,EAAa,MAAM,kCAAkC,CAAC;AAK9E,eAAO,MAAM,kBAAkB;;;;;;;;;;;;EAS7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;IAE/B;;;OAGG;;IAEH;;;OAGG;;;;IAIH;;OAEG;;gBAmBL,CAAC;AA4CH,eAAO,MAAM,kBAAkB;;;;;;;;EAO7B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;gBAiBjC,CAAC;AAsBH,eAAO,MAAM,cAAc;;;;;;;;;;kCAWJ,gBAAgB;;EAQrC,CAAC;AA0CH,eAAO,MAAM,iBAAiB,iJAiB5B,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU;;;;;;IAInB;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;;;IAEH;;;;;OAKG;;;;;;;IAEH;;;OAGG;;;;;;;CAsDL,CAAC"}
package/dist/es6/text-input/lib/InputGroup.js CHANGED
@@ -2,10 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import React from 'react';
3
3
  import { TertiaryButton } from '@workday/canvas-kit-react/button';
4
4
  import { createContainer, createElemPropsHook, createModelHook, createSubcomponent, dispatchInputEvent, useForkRef, } from '@workday/canvas-kit-react/common';
5
+ import { systemIconStencil } from '@workday/canvas-kit-react/icon';
5
6
  import { mergeStyles } from '@workday/canvas-kit-react/layout';
6
7
  import { createStencil, handleCsProp, wrapProperty } from '@workday/canvas-kit-styling';
7
8
  import { xSmallIcon } from '@workday/canvas-system-icons-web';
8
- import { system } from '@workday/canvas-tokens-web';
9
+ import { component, system } from '@workday/canvas-tokens-web';
9
10
  import { TextInput } from './TextInput';
10
11
  export const useInputGroupModel = createModelHook({})(() => {
11
12
  const inputRef = React.useRef(null);
@@ -35,13 +36,13 @@ export const inputGroupInnerStencil = createStencil({
35
36
  */
36
37
  pointerEvents: '',
37
38
  },
38
- base: { name: "2tze9n", styles: "--insetInlineStart-input-group-inner-9e2c81:initial;--insetInlineEnd-input-group-inner-9e2c81:initial;--width-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-9e2c81:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-9e2c81);height:var(--height-input-group-inner-9e2c81);inset-inline-start:var(--insetInlineStart-input-group-inner-9e2c81);inset-inline-end:var(--insetInlineEnd-input-group-inner-9e2c81);" },
39
+ base: { name: "3m5lrc", styles: "--insetInlineStart-input-group-inner-fddb83:initial;--insetInlineEnd-input-group-inner-fddb83:initial;--width-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));--height-input-group-inner-fddb83:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));box-sizing:border-box;display:flex;position:absolute;align-items:center;justify-content:center;width:var(--width-input-group-inner-fddb83);height:var(--height-input-group-inner-fddb83);inset-inline-start:var(--insetInlineStart-input-group-inner-fddb83);inset-inline-end:var(--insetInlineEnd-input-group-inner-fddb83);--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);" },
39
40
  modifiers: {
40
41
  pointerEvents: {
41
- _: { name: "1rcuyd", styles: "pointer-events:var(--pointerEvents-input-group-inner-9e2c81);" }
42
+ _: { name: "26ygsl", styles: "pointer-events:var(--pointerEvents-input-group-inner-fddb83);" }
42
43
  }
43
44
  }
44
- }, "input-group-inner-9e2c81");
45
+ }, "input-group-inner-fddb83");
45
46
  const InputGroupInnerStart = createSubcomponent('div')({
46
47
  modelHook: useInputGroupModel,
47
48
  })(({ pointerEvents, insetInlineStart, insetInlineEnd, width, height, ...elemProps }, Element) => {
@@ -76,16 +77,16 @@ export const inputGroupInputStencil = createStencil({
76
77
  paddingInlineStart: '',
77
78
  paddingInlineEnd: '',
78
79
  },
79
- base: { name: "4edwl9", styles: "box-sizing:border-box;display:flex;width:100%;" },
80
+ base: { name: "3czs8y", styles: "box-sizing:border-box;display:flex;width:100%;" },
80
81
  modifiers: {
81
82
  paddingInlineStart: {
82
- _: { name: "10t2az", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-7be7a4);" }
83
+ _: { name: "2h3jl8", styles: "padding-inline-start:var(--paddingInlineStart-input-group-input-b51031);" }
83
84
  },
84
85
  paddingInlineEnd: {
85
- _: { name: "2txv9n", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-7be7a4);" }
86
+ _: { name: "4bzoag", styles: "padding-inline-end:var(--paddingInlineEnd-input-group-input-b51031);" }
86
87
  }
87
88
  }
88
- }, "input-group-input-7be7a4");
89
+ }, "input-group-input-b51031");
89
90
  const InputGroupInput = createSubcomponent(TextInput)({
90
91
  modelHook: useInputGroupModel,
91
92
  elemPropsHook: useInputGroupInput,
@@ -115,6 +116,9 @@ export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
115
116
  },
116
117
  };
117
118
  });
119
+ const clearButtonStencil = createStencil({
120
+ base: { name: "4946g7", styles: "box-sizing:border-box;svg{--size-svg-bca693:var(--cnvs-component-system-icon-size-xs);}" }
121
+ }, "clear-button-49e5c1");
118
122
  /**
119
123
  * A clear input button. This can be a component later.
120
124
  */
@@ -122,7 +126,7 @@ const ClearButton = createSubcomponent(TertiaryButton)({
122
126
  modelHook: useInputGroupModel,
123
127
  elemPropsHook: useClearButton,
124
128
  })((elemProps, Element) => {
125
- return _jsx(Element, { "data-part": "input-group-clear-button", ...handleCsProp(elemProps) });
129
+ return (_jsx(Element, { "data-part": "input-group-clear-button", ...handleCsProp(elemProps, clearButtonStencil()) }));
126
130
  });
127
131
  // make sure we always use pixels if the input is a number - this is required for `calc`
128
132
  const toPx = (input) => {
@@ -140,8 +144,8 @@ const wrapInCalc = (values) => {
140
144
  return `calc(${values.map(toPx).join(' + ')})`;
141
145
  };
142
146
  export const inputGroupStencil = createStencil({
143
- base: { name: "ax3sr", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
144
- }, "input-group-2e0e78");
147
+ base: { name: "1mby7n", styles: "box-sizing:border-box;display:flex;position:relative;align-items:center;& :has([data-part=\"input-group-clear-button\"]){transition:opacity 300ms ease;}&:where(:has(input:placeholder-shown)) :has([data-part=\"input-group-clear-button\"]){opacity:0;pointer-events:none;}" }
148
+ }, "input-group-1aae89");
145
149
  /**
146
150
  * An `InputGroup` is a container around a {@link TextInput} with optional inner start and end
147
151
  * elements. The inner start and end elements are usually icons or icon buttons visually represented
package/dist/es6/text-input/lib/TextInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,OAAO,EAAgC,MAAM,6BAA6B,CAAC;AAGnF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,OAAO;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA2G3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAqBpB,CAAC"}
1
+ {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,cAAc,EAGf,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,OAAO,EAAgC,MAAM,6BAA6B,CAAC;AAGnF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,OAAO;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0G3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAqBpB,CAAC"}
package/dist/es6/text-input/lib/TextInput.js CHANGED
@@ -15,8 +15,8 @@ export const textInputStencil = createStencil({
15
15
  false: { name: "2f0cc6", styles: "width:initial;" }
16
16
  },
17
17
  error: {
18
- error: { name: "30qz77", 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-border-critical, oklch(0.6495 0.2369 30.04 / 1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 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;}@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;}" },
19
- caution: { name: "2y4znt", 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)));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([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;@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;outline-offset:0;}" }
18
+ error: { name: "sif5x", 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-border-critical, oklch(0.6495 0.2369 30.04 / 1));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));}&:is(:focus-visible, .focus):not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 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;}@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;}" },
19
+ caution: { name: "6plwv", 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)));&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled])){border-color:var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));}&:is(:focus-visible, .focus):not([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;@media (forced-colors: active){outline:solid 0.25rem ButtonBorder;outline-offset:0;}" }
20
20
  }
21
21
  },
22
22
  defaultModifiers: {
package/menu/lib/MenuPopper.tsx CHANGED
@@ -13,7 +13,7 @@ export const defaultMenuPopperOptions = {
13
13
  {
14
14
  name: 'offset',
15
15
  options: {
16
- offset: () => [0, 4],
16
+ offset: () => [0, 8],
17
17
  },
18
18
  },
19
19
  ],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "16.0.0-alpha.0476-next.0",
3
+ "version": "16.0.0-alpha.0478-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",
@@ -53,8 +53,8 @@
53
53
  "@tanstack/react-virtual": "^3.13.9",
54
54
  "@workday/canvas-colors-web": "^2.0.0",
55
55
  "@workday/canvas-expressive-icons-web": "1.0.2",
56
- "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0476-next.0",
57
- "@workday/canvas-kit-styling": "^16.0.0-alpha.0476-next.0",
56
+ "@workday/canvas-kit-popup-stack": "^16.0.0-alpha.0478-next.0",
57
+ "@workday/canvas-kit-styling": "^16.0.0-alpha.0478-next.0",
58
58
  "@workday/canvas-system-icons-web": "4.0.4",
59
59
  "@workday/canvas-tokens-web": "4.4.0-beta.6",
60
60
  "@workday/design-assets-types": "^0.3.0",
@@ -69,5 +69,5 @@
69
69
  "@workday/canvas-accent-icons-web": "^3.0.0",
70
70
  "@workday/canvas-applet-icons-web": "^2.0.0"
71
71
  },
72
- "gitHead": "2d96fab9d2a9a47e06b99ae59e5f939799efa76d"
72
+ "gitHead": "d84620c64bada313ccd29fa9672193473f9b5633"
73
73
  }
package/select/lib/SelectInput.tsx CHANGED
@@ -2,7 +2,11 @@ import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common
2
2
  import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
3
3
  import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
4
4
  import {CSProps, createStencil} from '@workday/canvas-kit-styling';
5
- import {CanvasSystemIcon, caretDownSmallIcon} from '@workday/canvas-system-icons-web';
5
+ import {
6
+ CanvasSystemIcon,
7
+ chevronDownSmallIcon,
8
+ chevronUpSmallIcon,
9
+ } from '@workday/canvas-system-icons-web';
6
10
  import {system} from '@workday/canvas-tokens-web';
7
11
 
8
12
  import {useSelectInput} from './hooks/useSelectInput';
@@ -112,7 +116,11 @@ export const SelectInput = createSubcomponent(TextInput)({
112
116
  {...elemProps}
113
117
  />
114
118
  <InputGroup.InnerEnd {...selectInputStencil.parts.caretContainer}>
115
- <SystemIcon {...selectInputStencil.parts.caret} icon={caretDownSmallIcon} />
119
+ <SystemIcon
120
+ size="md"
121
+ {...selectInputStencil.parts.caret}
122
+ icon={model.state.visibility === 'visible' ? chevronUpSmallIcon : chevronDownSmallIcon}
123
+ />
116
124
  </InputGroup.InnerEnd>
117
125
  </InputGroup>
118
126
  );
package/text-input/lib/InputGroup.tsx CHANGED
@@ -10,10 +10,11 @@ import {
10
10
  dispatchInputEvent,
11
11
  useForkRef,
12
12
  } from '@workday/canvas-kit-react/common';
13
+ import {systemIconStencil} from '@workday/canvas-kit-react/icon';
13
14
  import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
14
15
  import {createStencil, handleCsProp, wrapProperty} from '@workday/canvas-kit-styling';
15
16
  import {CanvasSystemIcon, xSmallIcon} from '@workday/canvas-system-icons-web';
16
- import {system} from '@workday/canvas-tokens-web';
17
+ import {component, system} from '@workday/canvas-tokens-web';
17
18
 
18
19
  import {TextInput} from './TextInput';
19
20
 
@@ -56,6 +57,7 @@ export const inputGroupInnerStencil = createStencil({
56
57
  height,
57
58
  insetInlineStart,
58
59
  insetInlineEnd,
60
+ [systemIconStencil.vars.size]: component.systemIcon.size.xs,
59
61
  }),
60
62
  modifiers: {
61
63
  pointerEvents: {
@@ -175,6 +177,14 @@ export const useClearButton = createElemPropsHook(useInputGroupModel)(model => {
175
177
  } as const;
176
178
  });
177
179
 
180
+ const clearButtonStencil = createStencil({
181
+ base: {
182
+ svg: {
183
+ [systemIconStencil.vars.size]: component.systemIcon.size.xs,
184
+ },
185
+ },
186
+ });
187
+
178
188
  /**
179
189
  * A clear input button. This can be a component later.
180
190
  */
@@ -182,7 +192,12 @@ const ClearButton = createSubcomponent(TertiaryButton)({
182
192
  modelHook: useInputGroupModel,
183
193
  elemPropsHook: useClearButton,
184
194
  })<ExtractProps<typeof TertiaryButton, never>>((elemProps, Element) => {
185
- return <Element data-part="input-group-clear-button" {...handleCsProp(elemProps)} />;
195
+ return (
196
+ <Element
197
+ data-part="input-group-clear-button"
198
+ {...handleCsProp(elemProps, clearButtonStencil())}
199
+ />
200
+ );
186
201
  });
187
202
 
188
203
  // make sure we always use pixels if the input is a number - this is required for `calc`
package/text-input/lib/TextInput.tsx CHANGED
@@ -78,7 +78,6 @@ export const textInputStencil = createStencil({
78
78
  error: {
79
79
  error: {
80
80
  borderColor: system.legacy.color.brand.border.critical,
81
- // borderWidth: px2rem(2),
82
81
  boxShadow: `inset 0 0 0 ${px2rem(2)} ${system.legacy.color.brand.border.critical}`,
83
82
  '&:is(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled]), .focus:not([disabled]))':
84
83
  {