@povio/ui 2.3.0-rc.23 → 2.3.0-rc.24

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 (2) hide show
  1. package/dist/components/inputs/Input/NumberInput/NumberInput.js +195 -188
  2. package/package.json +1 -1
package/dist/components/inputs/Input/NumberInput/NumberInput.js CHANGED
@@ -18,9 +18,10 @@ import { Controller } from "react-hook-form";
18
18
  import { useNumberFieldState } from "react-stately";
19
19
  //#region src/components/inputs/Input/NumberInput/NumberInput.tsx
20
20
  var NumberInputBase = (props) => {
21
- const $ = c(87);
21
+ const $ = c(89);
22
22
  const ui = UIConfig.useConfig();
23
23
  const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
24
+ const hasControlledValue = "value" in props;
24
25
  const inputRef = useRef(null);
25
26
  const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions: formatOptionsProp, variant: variantProp, as: asProp, size: sizeProp, hideLabel: hideLabelProp, isClearable: isClearableProp, autoFocusOnMount, ...rest } = props;
26
27
  const formatOptions = formatOptionsProp ?? ui.numberInput.formatOptions;
@@ -33,90 +34,96 @@ var NumberInputBase = (props) => {
33
34
  const { isFocusVisible } = useFocusVisible();
34
35
  const { locale } = useLocale();
35
36
  let t0;
36
- if ($[0] !== onBlur) {
37
- t0 = (e) => onBlur?.({ target: e.target });
38
- $[0] = onBlur;
37
+ if ($[0] !== onChange) {
38
+ t0 = (nextValue) => onChange?.(Number.isNaN(nextValue) ? null : nextValue);
39
+ $[0] = onChange;
39
40
  $[1] = t0;
40
41
  } else t0 = $[1];
42
+ let t1;
43
+ if ($[2] !== onBlur) {
44
+ t1 = (e) => onBlur?.({ target: e.target });
45
+ $[2] = onBlur;
46
+ $[3] = t1;
47
+ } else t1 = $[3];
41
48
  const numberProps = {
42
49
  ...rest,
43
- value: value ?? void 0,
50
+ value: hasControlledValue ? value ?? NaN : void 0,
44
51
  label,
45
52
  isDisabled,
46
53
  isInvalid: !!error,
47
54
  isRequired,
48
- onChange,
49
- onBlur: t0,
55
+ onChange: t0,
56
+ onBlur: t1,
50
57
  locale,
51
58
  formatOptions
52
59
  };
53
60
  const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
54
- let t1;
55
61
  let t2;
56
- if ($[2] !== autoFocusOnMount || $[3] !== isDisabled) {
57
- t1 = () => {
62
+ let t3;
63
+ if ($[4] !== autoFocusOnMount || $[5] !== isDisabled) {
64
+ t2 = () => {
58
65
  if (!autoFocusOnMount || isDisabled) return;
59
66
  requestAnimationFrame(() => inputRef.current?.focus());
60
67
  };
61
- t2 = [autoFocusOnMount, isDisabled];
62
- $[2] = autoFocusOnMount;
63
- $[3] = isDisabled;
64
- $[4] = t1;
65
- $[5] = t2;
68
+ t3 = [autoFocusOnMount, isDisabled];
69
+ $[4] = autoFocusOnMount;
70
+ $[5] = isDisabled;
71
+ $[6] = t2;
72
+ $[7] = t3;
66
73
  } else {
67
- t1 = $[4];
68
- t2 = $[5];
74
+ t2 = $[6];
75
+ t3 = $[7];
69
76
  }
70
- useEffect(t1, t2);
71
- const t3 = isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
72
- let t4;
73
- if ($[6] !== error || $[7] !== errorClassName || $[8] !== headerClassName || $[9] !== helperText || $[10] !== hideLabel || $[11] !== isDisabled || $[12] !== isRequired || $[13] !== label || $[14] !== rightContent || $[15] !== t3 || $[16] !== tooltipText) {
74
- t4 = {
77
+ useEffect(t2, t3);
78
+ const t4 = isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
79
+ let t5;
80
+ if ($[8] !== error || $[9] !== errorClassName || $[10] !== headerClassName || $[11] !== helperText || $[12] !== hideLabel || $[13] !== isDisabled || $[14] !== isRequired || $[15] !== label || $[16] !== rightContent || $[17] !== t4 || $[18] !== tooltipText) {
81
+ t5 = {
75
82
  error,
76
83
  label,
77
84
  tooltipText,
78
85
  helperText,
79
86
  isRequired,
80
87
  rightContent,
81
- isHeaderHidden: t3,
88
+ isHeaderHidden: t4,
82
89
  hideLabel,
83
90
  isDisabled,
84
91
  headerClassName,
85
92
  errorClassName
86
93
  };
87
- $[6] = error;
88
- $[7] = errorClassName;
89
- $[8] = headerClassName;
90
- $[9] = helperText;
91
- $[10] = hideLabel;
92
- $[11] = isDisabled;
93
- $[12] = isRequired;
94
- $[13] = label;
95
- $[14] = rightContent;
96
- $[15] = t3;
97
- $[16] = tooltipText;
94
+ $[8] = error;
95
+ $[9] = errorClassName;
96
+ $[10] = headerClassName;
97
+ $[11] = helperText;
98
+ $[12] = hideLabel;
99
+ $[13] = isDisabled;
100
+ $[14] = isRequired;
101
+ $[15] = label;
102
+ $[16] = rightContent;
98
103
  $[17] = t4;
99
- } else t4 = $[17];
100
- const formFieldProps = t4;
101
- let t5;
102
- if ($[18] !== onBlur) {
103
- t5 = (e_0) => {
104
- const target = numberFieldRef.current ?? e_0?.target;
105
- onBlur?.({ target });
106
- };
107
- $[18] = onBlur;
104
+ $[18] = tooltipText;
108
105
  $[19] = t5;
109
106
  } else t5 = $[19];
110
- const handleInputBlur = t5;
107
+ const formFieldProps = t5;
111
108
  let t6;
112
- if ($[20] !== onChange) {
113
- t6 = (val) => onChange?.(val === "" ? null : Number(val));
114
- $[20] = onChange;
109
+ if ($[20] !== onBlur) {
110
+ t6 = (e_0) => {
111
+ const target = numberFieldRef.current ?? e_0?.target;
112
+ onBlur?.({ target });
113
+ };
114
+ $[20] = onBlur;
115
115
  $[21] = t6;
116
116
  } else t6 = $[21];
117
+ const handleInputBlur = t6;
117
118
  let t7;
118
- if ($[22] !== action || $[23] !== handleInputBlur || $[24] !== isClearable || $[25] !== isDisabled || $[26] !== isLoading || $[27] !== leadingIcon || $[28] !== t6 || $[29] !== trailingIcon || $[30] !== unit || $[31] !== value) {
119
- t7 = {
119
+ if ($[22] !== onChange) {
120
+ t7 = (val) => onChange?.(val === "" ? null : Number(val));
121
+ $[22] = onChange;
122
+ $[23] = t7;
123
+ } else t7 = $[23];
124
+ let t8;
125
+ if ($[24] !== action || $[25] !== handleInputBlur || $[26] !== isClearable || $[27] !== isDisabled || $[28] !== isLoading || $[29] !== leadingIcon || $[30] !== t7 || $[31] !== trailingIcon || $[32] !== unit || $[33] !== value) {
126
+ t8 = {
120
127
  unit,
121
128
  isLoading,
122
129
  isDisabled,
@@ -125,185 +132,185 @@ var NumberInputBase = (props) => {
125
132
  trailingIcon,
126
133
  isClearable,
127
134
  value,
128
- onChange: t6,
135
+ onChange: t7,
129
136
  onBlur: handleInputBlur
130
137
  };
131
- $[22] = action;
132
- $[23] = handleInputBlur;
133
- $[24] = isClearable;
134
- $[25] = isDisabled;
135
- $[26] = isLoading;
136
- $[27] = leadingIcon;
137
- $[28] = t6;
138
- $[29] = trailingIcon;
139
- $[30] = unit;
140
- $[31] = value;
141
- $[32] = t7;
142
- } else t7 = $[32];
143
- const inputContentProps = t7;
144
- const t8 = hideLabel || isHeaderHidden;
145
- let t9;
146
- if ($[33] !== headerClassName || $[34] !== helperText || $[35] !== isDisabled || $[36] !== isRequired || $[37] !== label || $[38] !== labelProps || $[39] !== rightContent || $[40] !== t8 || $[41] !== tooltipText) {
147
- t9 = {
138
+ $[24] = action;
139
+ $[25] = handleInputBlur;
140
+ $[26] = isClearable;
141
+ $[27] = isDisabled;
142
+ $[28] = isLoading;
143
+ $[29] = leadingIcon;
144
+ $[30] = t7;
145
+ $[31] = trailingIcon;
146
+ $[32] = unit;
147
+ $[33] = value;
148
+ $[34] = t8;
149
+ } else t8 = $[34];
150
+ const inputContentProps = t8;
151
+ const t9 = hideLabel || isHeaderHidden;
152
+ let t10;
153
+ if ($[35] !== headerClassName || $[36] !== helperText || $[37] !== isDisabled || $[38] !== isRequired || $[39] !== label || $[40] !== labelProps || $[41] !== rightContent || $[42] !== t9 || $[43] !== tooltipText) {
154
+ t10 = {
148
155
  label,
149
156
  tooltipText,
150
157
  helperText,
151
158
  isRequired,
152
159
  rightContent,
153
- isHeaderHidden: t8,
160
+ isHeaderHidden: t9,
154
161
  isDisabled,
155
162
  className: headerClassName,
156
163
  labelProps
157
164
  };
158
- $[33] = headerClassName;
159
- $[34] = helperText;
160
- $[35] = isDisabled;
161
- $[36] = isRequired;
162
- $[37] = label;
163
- $[38] = labelProps;
164
- $[39] = rightContent;
165
- $[40] = t8;
166
- $[41] = tooltipText;
165
+ $[35] = headerClassName;
166
+ $[36] = helperText;
167
+ $[37] = isDisabled;
168
+ $[38] = isRequired;
169
+ $[39] = label;
170
+ $[40] = labelProps;
171
+ $[41] = rightContent;
167
172
  $[42] = t9;
168
- } else t9 = $[42];
169
- const headerProps = t9;
173
+ $[43] = tooltipText;
174
+ $[44] = t10;
175
+ } else t10 = $[44];
176
+ const headerProps = t10;
170
177
  const dataIsDisabled = isDisabled || void 0;
171
178
  const T0 = TooltipWrapper;
172
- const t10 = as === "inline" ? -1 : void 0;
179
+ const t11 = as === "inline" ? -1 : void 0;
173
180
  const T1 = FormField;
174
- let t11;
175
- if ($[43] !== className) {
176
- t11 = clsx("group w-full", className);
177
- $[43] = className;
178
- $[44] = t11;
179
- } else t11 = $[44];
180
- const t12 = as === "inline" ? -1 : void 0;
181
- const t13 = clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
181
+ let t12;
182
+ if ($[45] !== className) {
183
+ t12 = clsx("group w-full", className);
184
+ $[45] = className;
185
+ $[46] = t12;
186
+ } else t12 = $[46];
187
+ const t13 = as === "inline" ? -1 : void 0;
188
+ const t14 = clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
182
189
  variant,
183
190
  as,
184
191
  ...rest
185
192
  }), inputClassName);
186
- let t14;
187
- if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
188
- t14 = () => inputRef.current?.focus();
189
- $[45] = t14;
190
- } else t14 = $[45];
191
- const t15 = value === null || value === void 0 || void 0;
192
- const t16 = isRequired || void 0;
193
- let t17;
194
- if ($[46] !== ref) {
195
- t17 = mergeRefs(ref, inputRef);
196
- $[46] = ref;
197
- $[47] = t17;
198
- } else t17 = $[47];
199
- const t18 = isDirty || void 0;
200
- const t19 = isRequired || void 0;
201
- const t20 = value === null || value === void 0 || void 0;
202
- const t21 = !("" + value === "" || value === null || value === void 0) || void 0;
203
- const t22 = as === "floating" ? "\xA0" : inputProps.placeholder;
204
- let t23;
205
- if ($[48] !== inputProps || $[49] !== isFocusVisible) {
206
- t23 = (e_1) => {
193
+ let t15;
194
+ if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
195
+ t15 = () => inputRef.current?.focus();
196
+ $[47] = t15;
197
+ } else t15 = $[47];
198
+ const t16 = value === null || value === void 0 || void 0;
199
+ const t17 = isRequired || void 0;
200
+ let t18;
201
+ if ($[48] !== ref) {
202
+ t18 = mergeRefs(ref, inputRef);
203
+ $[48] = ref;
204
+ $[49] = t18;
205
+ } else t18 = $[49];
206
+ const t19 = isDirty || void 0;
207
+ const t20 = isRequired || void 0;
208
+ const t21 = value === null || value === void 0 || void 0;
209
+ const t22 = !("" + value === "" || value === null || value === void 0) || void 0;
210
+ const t23 = as === "floating" ? "\xA0" : inputProps.placeholder;
211
+ let t24;
212
+ if ($[50] !== inputProps || $[51] !== isFocusVisible) {
213
+ t24 = (e_1) => {
207
214
  inputProps.onFocus?.(e_1);
208
215
  if (isFocusVisible) e_1.target.select();
209
216
  };
210
- $[48] = inputProps;
211
- $[49] = isFocusVisible;
212
- $[50] = t23;
213
- } else t23 = $[50];
214
- let t24;
215
- if ($[51] !== dataIsDisabled || $[52] !== inputProps || $[53] !== t17 || $[54] !== t18 || $[55] !== t19 || $[56] !== t20 || $[57] !== t21 || $[58] !== t22 || $[59] !== t23) {
216
- t24 = /* @__PURE__ */ jsx(Input, {
217
+ $[50] = inputProps;
218
+ $[51] = isFocusVisible;
219
+ $[52] = t24;
220
+ } else t24 = $[52];
221
+ let t25;
222
+ if ($[53] !== dataIsDisabled || $[54] !== inputProps || $[55] !== t18 || $[56] !== t19 || $[57] !== t20 || $[58] !== t21 || $[59] !== t22 || $[60] !== t23 || $[61] !== t24) {
223
+ t25 = /* @__PURE__ */ jsx(Input, {
217
224
  ...inputProps,
218
- ref: t17,
219
- "data-is-dirty": t18,
220
- "data-is-required": t19,
221
- "data-is-empty": t20,
222
- "data-is-filled": t21,
225
+ ref: t18,
226
+ "data-is-dirty": t19,
227
+ "data-is-required": t20,
228
+ "data-is-empty": t21,
229
+ "data-is-filled": t22,
223
230
  "data-is-disabled": dataIsDisabled,
224
- placeholder: t22,
231
+ placeholder: t23,
225
232
  className: "w-full bg-transparent outline-none",
226
- onFocus: t23
233
+ onFocus: t24
227
234
  });
228
- $[51] = dataIsDisabled;
229
- $[52] = inputProps;
230
- $[53] = t17;
231
- $[54] = t18;
232
- $[55] = t19;
233
- $[56] = t20;
234
- $[57] = t21;
235
- $[58] = t22;
236
- $[59] = t23;
237
- $[60] = t24;
238
- } else t24 = $[60];
239
- let t25;
240
- if ($[61] !== as || $[62] !== headerProps || $[63] !== inputContentProps || $[64] !== size || $[65] !== t24) {
241
- t25 = /* @__PURE__ */ jsx(InputContent, {
235
+ $[53] = dataIsDisabled;
236
+ $[54] = inputProps;
237
+ $[55] = t18;
238
+ $[56] = t19;
239
+ $[57] = t20;
240
+ $[58] = t21;
241
+ $[59] = t22;
242
+ $[60] = t23;
243
+ $[61] = t24;
244
+ $[62] = t25;
245
+ } else t25 = $[62];
246
+ let t26;
247
+ if ($[63] !== as || $[64] !== headerProps || $[65] !== inputContentProps || $[66] !== size || $[67] !== t25) {
248
+ t26 = /* @__PURE__ */ jsx(InputContent, {
242
249
  ...inputContentProps,
243
250
  headerProps,
244
251
  as,
245
252
  size,
246
- children: t24
247
- });
248
- $[61] = as;
249
- $[62] = headerProps;
250
- $[63] = inputContentProps;
251
- $[64] = size;
252
- $[65] = t24;
253
- $[66] = t25;
254
- } else t25 = $[66];
255
- let t26;
256
- if ($[67] !== dataIsDisabled || $[68] !== t13 || $[69] !== t15 || $[70] !== t16 || $[71] !== t25) {
257
- t26 = /* @__PURE__ */ jsx("div", {
258
- className: t13,
259
- onClick: t14,
260
- "data-is-empty": t15,
261
- "data-is-required": t16,
262
- "data-is-disabled": dataIsDisabled,
263
253
  children: t25
264
254
  });
265
- $[67] = dataIsDisabled;
266
- $[68] = t13;
267
- $[69] = t15;
268
- $[70] = t16;
269
- $[71] = t25;
270
- $[72] = t26;
271
- } else t26 = $[72];
255
+ $[63] = as;
256
+ $[64] = headerProps;
257
+ $[65] = inputContentProps;
258
+ $[66] = size;
259
+ $[67] = t25;
260
+ $[68] = t26;
261
+ } else t26 = $[68];
272
262
  let t27;
273
- if ($[73] !== T1 || $[74] !== as || $[75] !== formFieldProps || $[76] !== labelProps || $[77] !== t11 || $[78] !== t12 || $[79] !== t26) {
274
- t27 = /* @__PURE__ */ jsx(T1, {
263
+ if ($[69] !== dataIsDisabled || $[70] !== t14 || $[71] !== t16 || $[72] !== t17 || $[73] !== t26) {
264
+ t27 = /* @__PURE__ */ jsx("div", {
265
+ className: t14,
266
+ onClick: t15,
267
+ "data-is-empty": t16,
268
+ "data-is-required": t17,
269
+ "data-is-disabled": dataIsDisabled,
270
+ children: t26
271
+ });
272
+ $[69] = dataIsDisabled;
273
+ $[70] = t14;
274
+ $[71] = t16;
275
+ $[72] = t17;
276
+ $[73] = t26;
277
+ $[74] = t27;
278
+ } else t27 = $[74];
279
+ let t28;
280
+ if ($[75] !== T1 || $[76] !== as || $[77] !== formFieldProps || $[78] !== labelProps || $[79] !== t12 || $[80] !== t13 || $[81] !== t27) {
281
+ t28 = /* @__PURE__ */ jsx(T1, {
275
282
  ...formFieldProps,
276
283
  as,
277
284
  labelProps,
278
- className: t11,
279
- tabIndex: t12,
280
- children: t26
285
+ className: t12,
286
+ tabIndex: t13,
287
+ children: t27
281
288
  });
282
- $[73] = T1;
283
- $[74] = as;
284
- $[75] = formFieldProps;
285
- $[76] = labelProps;
286
- $[77] = t11;
287
- $[78] = t12;
288
- $[79] = t26;
289
- $[80] = t27;
290
- } else t27 = $[80];
291
- let t28;
292
- if ($[81] !== T0 || $[82] !== as || $[83] !== error || $[84] !== t10 || $[85] !== t27) {
293
- t28 = /* @__PURE__ */ jsx(T0, {
289
+ $[75] = T1;
290
+ $[76] = as;
291
+ $[77] = formFieldProps;
292
+ $[78] = labelProps;
293
+ $[79] = t12;
294
+ $[80] = t13;
295
+ $[81] = t27;
296
+ $[82] = t28;
297
+ } else t28 = $[82];
298
+ let t29;
299
+ if ($[83] !== T0 || $[84] !== as || $[85] !== error || $[86] !== t11 || $[87] !== t28) {
300
+ t29 = /* @__PURE__ */ jsx(T0, {
294
301
  as,
295
302
  error,
296
- triggerTabIndex: t10,
297
- children: t27
303
+ triggerTabIndex: t11,
304
+ children: t28
298
305
  });
299
- $[81] = T0;
300
- $[82] = as;
301
- $[83] = error;
302
- $[84] = t10;
303
- $[85] = t27;
304
- $[86] = t28;
305
- } else t28 = $[86];
306
- return t28;
306
+ $[83] = T0;
307
+ $[84] = as;
308
+ $[85] = error;
309
+ $[86] = t11;
310
+ $[87] = t28;
311
+ $[88] = t29;
312
+ } else t29 = $[88];
313
+ return t29;
307
314
  };
308
315
  var NumberInputInner = (t0) => {
309
316
  const $ = c(9);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@povio/ui",
3
- "version": "2.3.0-rc.23",
3
+ "version": "2.3.0-rc.24",
4
4
  "type": "module",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",