@workday/canvas-kit-react 10.3.25 → 10.3.27

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 (8) hide show
  1. package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts +4 -1
  2. package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts.map +1 -1
  3. package/dist/commonjs/select/lib/hooks/useSelectInput.js +14 -5
  4. package/dist/es6/select/lib/hooks/useSelectInput.d.ts +4 -1
  5. package/dist/es6/select/lib/hooks/useSelectInput.d.ts.map +1 -1
  6. package/dist/es6/select/lib/hooks/useSelectInput.js +14 -5
  7. package/package.json +4 -4
  8. package/select/lib/hooks/useSelectInput.ts +24 -8
package/dist/commonjs/select/lib/hooks/useSelectInput.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ declare function noop(): void;
2
3
  /**
3
4
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput} and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
4
5
  */
@@ -85,9 +86,10 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
85
86
  readonly onFocus: () => void;
86
87
  readonly textInputProps: {
87
88
  readonly ref: React.RefObject<HTMLInputElement>;
89
+ readonly onChange: typeof noop;
90
+ readonly value: string;
88
91
  };
89
92
  readonly ref: (instance: HTMLInputElement | null) => void;
90
- readonly defaultValue: string | undefined;
91
93
  } & {
92
94
  onKeyDown(event: React.KeyboardEvent<Element>): void;
93
95
  keySofar: string;
@@ -115,4 +117,5 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
115
117
  ref: (instance: unknown) => void;
116
118
  onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
117
119
  }>;
120
+ export {};
118
121
  //# sourceMappingURL=useSelectInput.d.ts.map
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;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA8EF,mBAAmB;+BAvEP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0HvE,CAAC"}
1
+ {"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,iBAAS,IAAI,SAEZ;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA4FF,mBAAmB;+BArFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsIvE,CAAC"}
package/dist/commonjs/select/lib/hooks/useSelectInput.js CHANGED
@@ -8,6 +8,9 @@ const react_1 = __importDefault(require("react"));
8
8
  const common_1 = require("@workday/canvas-kit-react/common");
9
9
  const combobox_1 = require("@workday/canvas-kit-react/combobox");
10
10
  const useSelectModel_1 = require("./useSelectModel");
11
+ function noop() {
12
+ // Do nothing
13
+ }
11
14
  /**
12
15
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput} and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
13
16
  */
@@ -41,6 +44,13 @@ exports.useSelectInput = common_1.composeHooks(common_1.createElemPropsHook(useS
41
44
  model.state.items.length > 0 &&
42
45
  model.state.selectedIds[0]) {
43
46
  const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
47
+ // force the hidden input to have the correct value
48
+ if (model.state.inputRef.current.value !== value) {
49
+ const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(model.state.inputRef.current), 'value');
50
+ if (nativeInputValue && nativeInputValue.set) {
51
+ nativeInputValue.set.call(model.state.inputRef.current, value);
52
+ }
53
+ }
44
54
  if (model.state.selectedIds[0] !== value &&
45
55
  model.state.inputRef.current.value !== value) {
46
56
  // Programmatically dispatch an onChange once items are loaded. This account for when a consumer wants an initial selected item and they're loading them from a server.
@@ -108,12 +118,11 @@ exports.useSelectInput = common_1.composeHooks(common_1.createElemPropsHook(useS
108
118
  },
109
119
  textInputProps: {
110
120
  ref: textInputRef,
121
+ onChange: noop,
122
+ value: model.state.selectedIds.length > 0 && model.state.items.length > 0
123
+ ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
124
+ : '',
111
125
  },
112
126
  ref: elementRef,
113
- // Account for the case where an initial item is selected when the Select first renders
114
- defaultValue: model.state.selectedIds.length > 0 && model.state.items.length > 0
115
- ? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
116
- model.state.value
117
- : undefined,
118
127
  };
119
128
  }), combobox_1.useComboboxKeyboardTypeAhead, combobox_1.useComboboxResetCursorToSelected, combobox_1.useComboboxMoveCursorToSelected, combobox_1.useComboboxInput);
package/dist/es6/select/lib/hooks/useSelectInput.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ declare function noop(): void;
2
3
  /**
3
4
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput} and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
4
5
  */
@@ -85,9 +86,10 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
85
86
  readonly onFocus: () => void;
86
87
  readonly textInputProps: {
87
88
  readonly ref: React.RefObject<HTMLInputElement>;
89
+ readonly onChange: typeof noop;
90
+ readonly value: string;
88
91
  };
89
92
  readonly ref: (instance: HTMLInputElement | null) => void;
90
- readonly defaultValue: string | undefined;
91
93
  } & {
92
94
  onKeyDown(event: React.KeyboardEvent<Element>): void;
93
95
  keySofar: string;
@@ -115,4 +117,5 @@ export declare const useSelectInput: import("@workday/canvas-kit-react/common").
115
117
  ref: (instance: unknown) => void;
116
118
  onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
117
119
  }>;
120
+ export {};
118
121
  //# sourceMappingURL=useSelectInput.d.ts.map
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;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA8EF,mBAAmB;+BAvEP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0HvE,CAAC"}
1
+ {"version":3,"file":"useSelectInput.d.ts","sourceRoot":"","sources":["../../../../../select/lib/hooks/useSelectInput.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,iBAAS,IAAI,SAEZ;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA4FF,mBAAmB;+BArFP,MAAM,WAAW,CAAC,gBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsIvE,CAAC"}
package/dist/es6/select/lib/hooks/useSelectInput.js CHANGED
@@ -2,6 +2,9 @@ import React from 'react';
2
2
  import { composeHooks, createElemPropsHook, useLocalRef, useResizeObserver, dispatchInputEvent, } from '@workday/canvas-kit-react/common';
3
3
  import { useComboboxInput, useComboboxKeyboardTypeAhead, useComboboxMoveCursorToSelected, useComboboxResetCursorToSelected, } from '@workday/canvas-kit-react/combobox';
4
4
  import { useSelectModel } from './useSelectModel';
5
+ function noop() {
6
+ // Do nothing
7
+ }
5
8
  /**
6
9
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput} and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
7
10
  */
@@ -35,6 +38,13 @@ export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((
35
38
  model.state.items.length > 0 &&
36
39
  model.state.selectedIds[0]) {
37
40
  const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
41
+ // force the hidden input to have the correct value
42
+ if (model.state.inputRef.current.value !== value) {
43
+ const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(model.state.inputRef.current), 'value');
44
+ if (nativeInputValue && nativeInputValue.set) {
45
+ nativeInputValue.set.call(model.state.inputRef.current, value);
46
+ }
47
+ }
38
48
  if (model.state.selectedIds[0] !== value &&
39
49
  model.state.inputRef.current.value !== value) {
40
50
  // Programmatically dispatch an onChange once items are loaded. This account for when a consumer wants an initial selected item and they're loading them from a server.
@@ -102,12 +112,11 @@ export const useSelectInput = composeHooks(createElemPropsHook(useSelectModel)((
102
112
  },
103
113
  textInputProps: {
104
114
  ref: textInputRef,
115
+ onChange: noop,
116
+ value: model.state.selectedIds.length > 0 && model.state.items.length > 0
117
+ ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
118
+ : '',
105
119
  },
106
120
  ref: elementRef,
107
- // Account for the case where an initial item is selected when the Select first renders
108
- defaultValue: model.state.selectedIds.length > 0 && model.state.items.length > 0
109
- ? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
110
- model.state.value
111
- : undefined,
112
121
  };
113
122
  }), useComboboxKeyboardTypeAhead, useComboboxResetCursorToSelected, useComboboxMoveCursorToSelected, useComboboxInput);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "10.3.25",
3
+ "version": "10.3.27",
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.25",
53
- "@workday/canvas-kit-styling": "^10.3.25",
52
+ "@workday/canvas-kit-popup-stack": "^10.3.27",
53
+ "@workday/canvas-kit-styling": "^10.3.27",
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": "af9441714610f3e6f17abc7c7e2977d95cba25c1"
71
+ "gitHead": "4f3249fc9c39711f63c21317a5049b01efb49337"
72
72
  }
package/select/lib/hooks/useSelectInput.ts CHANGED
@@ -14,12 +14,16 @@ import {
14
14
  } from '@workday/canvas-kit-react/combobox';
15
15
  import {useSelectModel} from './useSelectModel';
16
16
 
17
+ function noop() {
18
+ // Do nothing
19
+ }
20
+
17
21
  /**
18
22
  * `useSelectInput` extends {@link useComboboxInput useComboboxInput} and {@link useComboboxKeyboardTypeAhead useComboboxKeyboardTypeAhead} and adds type ahead functionality and Select-specific [keyboard support](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/).
19
23
  */
20
24
  export const useSelectInput = composeHooks(
21
25
  createElemPropsHook(useSelectModel)(
22
- (model, ref, elemProps: {keySofar?: string; placeholder?: string} = {}) => {
26
+ (model, ref, elemProps: {keySofar?: string; placeholder?: string; value?: string} = {}) => {
23
27
  const {elementRef} = useLocalRef<HTMLInputElement>(ref as any);
24
28
  const textInputRef = React.useRef<HTMLInputElement>(null);
25
29
 
@@ -30,6 +34,7 @@ export const useSelectInput = composeHooks(
30
34
  Object.getPrototypeOf(textInputRef.current),
31
35
  'value'
32
36
  );
37
+
33
38
  if (nativeInputValue && nativeInputValue.set) {
34
39
  nativeInputValue.set.call(textInputRef.current, value);
35
40
  }
@@ -54,6 +59,19 @@ export const useSelectInput = composeHooks(
54
59
  model.state.selectedIds[0]
55
60
  ) {
56
61
  const value = model.navigation.getItem(model.state.selectedIds[0], model).id;
62
+
63
+ // force the hidden input to have the correct value
64
+ if (model.state.inputRef.current.value !== value) {
65
+ const nativeInputValue = Object.getOwnPropertyDescriptor(
66
+ Object.getPrototypeOf(model.state.inputRef.current),
67
+ 'value'
68
+ );
69
+
70
+ if (nativeInputValue && nativeInputValue.set) {
71
+ nativeInputValue.set.call(model.state.inputRef.current, value);
72
+ }
73
+ }
74
+
57
75
  if (
58
76
  model.state.selectedIds[0] !== value &&
59
77
  model.state.inputRef.current.value !== value
@@ -130,15 +148,13 @@ export const useSelectInput = composeHooks(
130
148
  },
131
149
  textInputProps: {
132
150
  ref: textInputRef,
151
+ onChange: noop,
152
+ value:
153
+ model.state.selectedIds.length > 0 && model.state.items.length > 0
154
+ ? model.navigation.getItem(model.state.selectedIds[0], model).textValue
155
+ : '',
133
156
  },
134
157
  ref: elementRef,
135
-
136
- // Account for the case where an initial item is selected when the Select first renders
137
- defaultValue:
138
- model.state.selectedIds.length > 0 && model.state.items.length > 0
139
- ? model.navigation.getItem(model.state.selectedIds[0], model).textValue ||
140
- model.state.value
141
- : undefined,
142
158
  } as const;
143
159
  }
144
160
  ),