@workday/canvas-kit-react 10.3.57 → 10.3.59

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 (13) hide show
  1. package/button/lib/types.ts +11 -0
  2. package/dist/commonjs/button/lib/types.d.ts +11 -0
  3. package/dist/commonjs/button/lib/types.d.ts.map +1 -1
  4. package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts +1 -0
  5. package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts.map +1 -1
  6. package/dist/commonjs/select/lib/hooks/useSelectInput.js +8 -7
  7. package/dist/es6/button/lib/types.d.ts +11 -0
  8. package/dist/es6/button/lib/types.d.ts.map +1 -1
  9. package/dist/es6/select/lib/hooks/useSelectInput.d.ts +1 -0
  10. package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map +1 -1
  11. package/dist/es6/select/lib/hooks/useSelectInput.js +8 -7
  12. package/package.json +4 -4
  13. package/select/lib/hooks/useSelectInput.ts +10 -7
package/button/lib/types.ts CHANGED
@@ -16,7 +16,18 @@ export interface ButtonColors {
16
16
  hover?: ButtonStateColors;
17
17
  active?: ButtonStateColors;
18
18
  focus?: ButtonStateColors & {
19
+ /**
20
+ * @deprecated This option is no longer supported at run time and will be removed from the type interface in a v12. If you want to customize the focus ring, use `boxShadowInner` and `boxShadowOuter` to update the inner and outer colors of the focus ring. Use with caution.
21
+ */
19
22
  focusRing?: CSSObject;
23
+ /**
24
+ * Updates the color of the inner `box-shadow` within a focus ring.
25
+ */
26
+ boxShadowInner?: string;
27
+ /**
28
+ * Updates the color of the outer `box-shadow` within a focus ring.
29
+ */
30
+ boxShadowOuter?: string;
20
31
  };
21
32
  disabled?: ButtonStateColors;
22
33
  }
package/dist/commonjs/button/lib/types.d.ts CHANGED
@@ -15,7 +15,18 @@ export interface ButtonColors {
15
15
  hover?: ButtonStateColors;
16
16
  active?: ButtonStateColors;
17
17
  focus?: ButtonStateColors & {
18
+ /**
19
+ * @deprecated This option is no longer supported at run time and will be removed from the type interface in a v12. If you want to customize the focus ring, use `boxShadowInner` and `boxShadowOuter` to update the inner and outer colors of the focus ring. Use with caution.
20
+ */
18
21
  focusRing?: CSSObject;
22
+ /**
23
+ * Updates the color of the inner `box-shadow` within a focus ring.
24
+ */
25
+ boxShadowInner?: string;
26
+ /**
27
+ * Updates the color of the outer `box-shadow` within a focus ring.
28
+ */
29
+ boxShadowOuter?: string;
19
30
  };
20
31
  disabled?: ButtonStateColors;
21
32
  }
package/dist/commonjs/button/lib/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,iBAAiB,GAAG;QAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IACF,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED;;;;;GAKG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtE,oBAAY,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,iBAAiB,GAAG;QAC1B;;WAEG;QACH,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED;;;;;GAKG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtE,oBAAY,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC"}
package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts CHANGED
@@ -109,6 +109,7 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
109
109
  readonly onKeyDown: (event: React.KeyboardEvent) => void;
110
110
  readonly onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
111
111
  readonly autoComplete: "off";
112
+ readonly ref: (instance: HTMLInputElement | null) => void;
112
113
  readonly onFocus: () => void;
113
114
  readonly textInputProps: {
114
115
  readonly ref: (instance: HTMLInputElement | null) => void;
package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts.map CHANGED
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0HF,mBAAmB;+BAtFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;EAmIvE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA4HF,mBAAmB;+BAtFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;EAoIvE,CAAC"}
package/dist/commonjs/select/lib/hooks/useSelectInput.js CHANGED
@@ -18,20 +18,20 @@ exports.useSelectInput = common_1.composeHooks(combobox_1.useComboboxInput, comb
18
18
  const { elementRef: textInputElementRef, localRef: textInputRef } = common_1.useLocalRef(
19
19
  // PopupModel says the targetRef is a `HTMLButtonElement`, but it is a `HTMLInputElement`
20
20
  model.state.targetRef);
21
- const { localRef, elementRef } = common_1.useLocalRef(ref);
21
+ const { localRef: hiddenLocalRef, elementRef: hiddenElementRef } = common_1.useLocalRef(ref);
22
22
  // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
23
23
  // the visible input
24
- react_1.default.useImperativeHandle(elementRef, () => {
25
- if (localRef.current) {
26
- localRef.current.focus = (options) => {
24
+ react_1.default.useImperativeHandle(hiddenElementRef, () => {
25
+ if (hiddenLocalRef.current) {
26
+ hiddenLocalRef.current.focus = (options) => {
27
27
  textInputRef.current.focus(options);
28
28
  };
29
- localRef.current.blur = () => {
29
+ hiddenLocalRef.current.blur = () => {
30
30
  textInputRef.current.blur();
31
31
  };
32
32
  }
33
- return localRef.current;
34
- }, [textInputRef, localRef]);
33
+ return hiddenLocalRef.current;
34
+ }, [textInputRef, hiddenLocalRef]);
35
35
  // Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that.
36
36
  // Update the text value of the input
37
37
  const handleOnChange = (event) => {
@@ -128,6 +128,7 @@ exports.useSelectInput = common_1.composeHooks(combobox_1.useComboboxInput, comb
128
128
  },
129
129
  onChange: handleOnChange,
130
130
  autoComplete: 'off',
131
+ ref: hiddenElementRef,
131
132
  // When the hidden input is focused, we want to show the focus/hover states of the input that sits below it.
132
133
  onFocus() {
133
134
  var _a;
package/dist/es6/button/lib/types.d.ts CHANGED
@@ -15,7 +15,18 @@ export interface ButtonColors {
15
15
  hover?: ButtonStateColors;
16
16
  active?: ButtonStateColors;
17
17
  focus?: ButtonStateColors & {
18
+ /**
19
+ * @deprecated This option is no longer supported at run time and will be removed from the type interface in a v12. If you want to customize the focus ring, use `boxShadowInner` and `boxShadowOuter` to update the inner and outer colors of the focus ring. Use with caution.
20
+ */
18
21
  focusRing?: CSSObject;
22
+ /**
23
+ * Updates the color of the inner `box-shadow` within a focus ring.
24
+ */
25
+ boxShadowInner?: string;
26
+ /**
27
+ * Updates the color of the outer `box-shadow` within a focus ring.
28
+ */
29
+ boxShadowOuter?: string;
19
30
  };
20
31
  disabled?: ButtonStateColors;
21
32
  }
package/dist/es6/button/lib/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,iBAAiB,GAAG;QAC1B,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IACF,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED;;;;;GAKG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtE,oBAAY,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,iBAAiB,GAAG;QAC1B;;WAEG;QACH,SAAS,CAAC,EAAE,SAAS,CAAC;QACtB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;WAEG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED;;;;;GAKG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtE,oBAAY,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC"}
package/dist/es6/select/lib/hooks/useSelectInput.d.ts CHANGED
@@ -109,6 +109,7 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
109
109
  readonly onKeyDown: (event: React.KeyboardEvent) => void;
110
110
  readonly onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
111
111
  readonly autoComplete: "off";
112
+ readonly ref: (instance: HTMLInputElement | null) => void;
112
113
  readonly onFocus: () => void;
113
114
  readonly textInputProps: {
114
115
  readonly ref: (instance: HTMLInputElement | null) => void;
package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map CHANGED
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0HF,mBAAmB;+BAtFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;EAmIvE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA4HF,mBAAmB;+BAtFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;EAoIvE,CAAC"}
package/dist/es6/select/lib/hooks/useSelectInput.js CHANGED
@@ -12,20 +12,20 @@ export const useSelectInput = composeHooks(useComboboxInput, useComboboxKeyboard
12
12
  const { elementRef: textInputElementRef, localRef: textInputRef } = useLocalRef(
13
13
  // PopupModel says the targetRef is a `HTMLButtonElement`, but it is a `HTMLInputElement`
14
14
  model.state.targetRef);
15
- const { localRef, elementRef } = useLocalRef(ref);
15
+ const { localRef: hiddenLocalRef, elementRef: hiddenElementRef } = useLocalRef(ref);
16
16
  // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
17
17
  // the visible input
18
- React.useImperativeHandle(elementRef, () => {
19
- if (localRef.current) {
20
- localRef.current.focus = (options) => {
18
+ React.useImperativeHandle(hiddenElementRef, () => {
19
+ if (hiddenLocalRef.current) {
20
+ hiddenLocalRef.current.focus = (options) => {
21
21
  textInputRef.current.focus(options);
22
22
  };
23
- localRef.current.blur = () => {
23
+ hiddenLocalRef.current.blur = () => {
24
24
  textInputRef.current.blur();
25
25
  };
26
26
  }
27
- return localRef.current;
28
- }, [textInputRef, localRef]);
27
+ return hiddenLocalRef.current;
28
+ }, [textInputRef, hiddenLocalRef]);
29
29
  // Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that.
30
30
  // Update the text value of the input
31
31
  const handleOnChange = (event) => {
@@ -122,6 +122,7 @@ export const useSelectInput = composeHooks(useComboboxInput, useComboboxKeyboard
122
122
  },
123
123
  onChange: handleOnChange,
124
124
  autoComplete: 'off',
125
+ ref: hiddenElementRef,
125
126
  // When the hidden input is focused, we want to show the focus/hover states of the input that sits below it.
126
127
  onFocus() {
127
128
  var _a;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "10.3.57",
3
+ "version": "10.3.59",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -49,8 +49,8 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^10.3.57",
53
- "@workday/canvas-kit-styling": "^10.3.57",
52
+ "@workday/canvas-kit-popup-stack": "^10.3.59",
53
+ "@workday/canvas-kit-styling": "^10.3.59",
54
54
  "@workday/canvas-system-icons-web": "^3.0.0",
55
55
  "@workday/canvas-tokens-web": "^1.0.0",
56
56
  "@workday/design-assets-types": "^0.2.8",
@@ -68,5 +68,5 @@
68
68
  "@workday/canvas-accent-icons-web": "^3.0.0",
69
69
  "@workday/canvas-applet-icons-web": "^2.0.0"
70
70
  },
71
- "gitHead": "291cce32914e6c797053fce60569973f7351ad3b"
71
+ "gitHead": "59c7bda2d43fbefb738588ec1033b7b9f837ceaa"
72
72
  }
package/select/lib/hooks/useSelectInput.ts CHANGED
@@ -33,25 +33,27 @@ export const useSelectInput = composeHooks(
33
33
  model.state.targetRef as any as React.Ref<HTMLInputElement>
34
34
  );
35
35
 
36
- const {localRef, elementRef} = useLocalRef(ref as React.Ref<HTMLInputElement>);
36
+ const {localRef: hiddenLocalRef, elementRef: hiddenElementRef} = useLocalRef(
37
+ ref as React.Ref<HTMLInputElement>
38
+ );
37
39
 
38
40
  // We need to create a proxy between the multiple inputs. We need to redirect a few methods to
39
41
  // the visible input
40
42
  React.useImperativeHandle(
41
- elementRef,
43
+ hiddenElementRef,
42
44
  () => {
43
- if (localRef.current) {
44
- localRef.current.focus = (options?: FocusOptions) => {
45
+ if (hiddenLocalRef.current) {
46
+ hiddenLocalRef.current.focus = (options?: FocusOptions) => {
45
47
  textInputRef.current!.focus(options);
46
48
  };
47
- localRef.current.blur = () => {
49
+ hiddenLocalRef.current.blur = () => {
48
50
  textInputRef.current!.blur();
49
51
  };
50
52
  }
51
53
 
52
- return localRef.current!;
54
+ return hiddenLocalRef.current!;
53
55
  },
54
- [textInputRef, localRef]
56
+ [textInputRef, hiddenLocalRef]
55
57
  );
56
58
 
57
59
  // Remap the Popup model's targetRef to be the visible ref. `ref` and `model.state.targetRef` are already linked. We have to override that.
@@ -172,6 +174,7 @@ export const useSelectInput = composeHooks(
172
174
  },
173
175
  onChange: handleOnChange,
174
176
  autoComplete: 'off',
177
+ ref: hiddenElementRef,
175
178
  // When the hidden input is focused, we want to show the focus/hover states of the input that sits below it.
176
179
  onFocus() {
177
180
  textInputRef.current?.focus();