@dmsi/wedgekit-react 0.0.1248 → 0.0.1249
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-MOBFZ672.js → chunk-3DJWSTPS.js} +1 -1
- package/dist/{chunk-EA6Y4HXQ.js → chunk-4FUZDLWX.js} +1 -1
- package/dist/{chunk-PABII472.js → chunk-H5SHC4XZ.js} +40 -33
- package/dist/{chunk-PBJ2MEHM.js → chunk-QW4AJ5FK.js} +1 -1
- package/dist/{chunk-5UPADXVU.js → chunk-WSZ3ET5G.js} +4 -4
- package/dist/components/CalendarRange.cjs +40 -33
- package/dist/components/CalendarRange.js +5 -5
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.cjs +40 -33
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/ColumnSelectorMenuOption.js +5 -5
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/index.cjs +40 -33
- package/dist/components/DataGrid/ColumnSelectorHeaderCell/index.js +5 -5
- package/dist/components/DataGrid/PinnedColumns.cjs +40 -33
- package/dist/components/DataGrid/PinnedColumns.js +5 -5
- package/dist/components/DataGrid/TableBody/LoadingCell.cjs +40 -33
- package/dist/components/DataGrid/TableBody/LoadingCell.js +5 -5
- package/dist/components/DataGrid/TableBody/TableBodyRow.cjs +40 -33
- package/dist/components/DataGrid/TableBody/TableBodyRow.js +5 -5
- package/dist/components/DataGrid/TableBody/index.cjs +40 -33
- package/dist/components/DataGrid/TableBody/index.js +5 -5
- package/dist/components/DataGrid/index.cjs +40 -33
- package/dist/components/DataGrid/index.js +5 -5
- package/dist/components/DataGrid/utils.cjs +40 -33
- package/dist/components/DataGrid/utils.js +5 -5
- package/dist/components/DataGridCell.cjs +40 -33
- package/dist/components/DataGridCell.js +3 -3
- package/dist/components/DateInput.cjs +40 -33
- package/dist/components/DateInput.js +5 -5
- package/dist/components/DateRangeInput.cjs +40 -33
- package/dist/components/DateRangeInput.js +5 -5
- package/dist/components/FilterGroup.cjs +40 -33
- package/dist/components/FilterGroup.js +2 -2
- package/dist/components/Input.cjs +40 -33
- package/dist/components/Input.js +1 -1
- package/dist/components/MobileDataGrid/ColumnSelector/index.cjs +40 -33
- package/dist/components/MobileDataGrid/ColumnSelector/index.js +5 -5
- package/dist/components/MobileDataGrid/MobileDataGridHeader.cjs +40 -33
- package/dist/components/MobileDataGrid/MobileDataGridHeader.js +5 -5
- package/dist/components/MobileDataGrid/index.cjs +40 -33
- package/dist/components/MobileDataGrid/index.js +5 -5
- package/dist/components/Password.cjs +40 -33
- package/dist/components/Password.js +1 -1
- package/dist/components/Search.cjs +40 -33
- package/dist/components/Search.js +2 -2
- package/dist/components/Select.cjs +40 -33
- package/dist/components/Select.js +2 -2
- package/dist/components/Stepper.cjs +40 -33
- package/dist/components/Stepper.js +1 -1
- package/dist/components/Time.cjs +40 -33
- package/dist/components/Time.js +1 -1
- package/dist/components/index.cjs +40 -33
- package/dist/components/index.js +5 -5
- package/package.json +1 -1
|
@@ -919,6 +919,14 @@ function formatCurrencyDisplay(value) {
|
|
|
919
919
|
|
|
920
920
|
// src/components/Input.tsx
|
|
921
921
|
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
922
|
+
function hasEquivalentNumericValue(currentValue, nextValue) {
|
|
923
|
+
if (!currentValue || !nextValue) {
|
|
924
|
+
return false;
|
|
925
|
+
}
|
|
926
|
+
const currentNumericValue = Number(currentValue.replace(/,/g, ""));
|
|
927
|
+
const nextNumericValue = Number(nextValue.replace(/,/g, ""));
|
|
928
|
+
return !Number.isNaN(currentNumericValue) && !Number.isNaN(nextNumericValue) && currentNumericValue === nextNumericValue;
|
|
929
|
+
}
|
|
922
930
|
var InputBase = (_a) => {
|
|
923
931
|
var _b = _a, {
|
|
924
932
|
id,
|
|
@@ -1141,28 +1149,33 @@ var Input = (_a) => {
|
|
|
1141
1149
|
const [internalValue, setInternalValue] = (0, import_react.useState)("");
|
|
1142
1150
|
const [displayValue, setDisplayValue] = (0, import_react.useState)("");
|
|
1143
1151
|
const [isFocused, setIsFocused] = (0, import_react.useState)(false);
|
|
1152
|
+
const internalValueRef = (0, import_react.useRef)("");
|
|
1153
|
+
const setInputValues = (nextInternalValue, nextDisplayValue) => {
|
|
1154
|
+
internalValueRef.current = nextInternalValue;
|
|
1155
|
+
setInternalValue(nextInternalValue);
|
|
1156
|
+
setDisplayValue(nextDisplayValue);
|
|
1157
|
+
};
|
|
1144
1158
|
(0, import_react.useEffect)(() => {
|
|
1145
1159
|
var _a2;
|
|
1146
1160
|
const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
|
|
1147
1161
|
const shouldUseThousandsFormatting = variant === "currency" || variant === "uom" && currencyFormat;
|
|
1148
1162
|
if (!stringValue) {
|
|
1149
|
-
|
|
1150
|
-
setDisplayValue("");
|
|
1163
|
+
setInputValues("", "");
|
|
1151
1164
|
return;
|
|
1152
1165
|
}
|
|
1153
1166
|
if (!shouldUseThousandsFormatting) {
|
|
1154
|
-
|
|
1155
|
-
|
|
1167
|
+
setInputValues(stringValue, stringValue);
|
|
1168
|
+
return;
|
|
1169
|
+
}
|
|
1170
|
+
if (isFocused && hasEquivalentNumericValue(internalValueRef.current, stringValue)) {
|
|
1156
1171
|
return;
|
|
1157
1172
|
}
|
|
1158
|
-
const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
|
|
1159
1173
|
if (formatOnBlur && isFocused) {
|
|
1160
|
-
|
|
1161
|
-
setDisplayValue(stringValue);
|
|
1174
|
+
setInputValues(stringValue, stringValue);
|
|
1162
1175
|
return;
|
|
1163
1176
|
}
|
|
1164
|
-
|
|
1165
|
-
|
|
1177
|
+
const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
|
|
1178
|
+
setInputValues(formatted, formatCurrencyDisplay(formatted));
|
|
1166
1179
|
}, [propValue, variant, currencyFormat, decimals, formatOnBlur, isFocused]);
|
|
1167
1180
|
const getInputProps = () => {
|
|
1168
1181
|
var _a2;
|
|
@@ -1184,6 +1197,7 @@ var Input = (_a) => {
|
|
|
1184
1197
|
return __spreadProps(__spreadValues({}, baseProps), {
|
|
1185
1198
|
align: "right",
|
|
1186
1199
|
type: "text",
|
|
1200
|
+
inputMode: "decimal",
|
|
1187
1201
|
value: displayValue
|
|
1188
1202
|
});
|
|
1189
1203
|
case "percentage":
|
|
@@ -1191,6 +1205,7 @@ var Input = (_a) => {
|
|
|
1191
1205
|
return __spreadProps(__spreadValues({}, baseProps), {
|
|
1192
1206
|
type: currencyFormat ? "text" : "number",
|
|
1193
1207
|
align: "right",
|
|
1208
|
+
inputMode: currencyFormat ? "decimal" : void 0,
|
|
1194
1209
|
value: currencyFormat ? displayValue : propValue
|
|
1195
1210
|
});
|
|
1196
1211
|
default:
|
|
@@ -1237,8 +1252,7 @@ var Input = (_a) => {
|
|
|
1237
1252
|
}
|
|
1238
1253
|
};
|
|
1239
1254
|
const handleSearchReset = () => {
|
|
1240
|
-
|
|
1241
|
-
setDisplayValue("");
|
|
1255
|
+
setInputValues("", "");
|
|
1242
1256
|
if (onChange) {
|
|
1243
1257
|
const syntheticEvent = {
|
|
1244
1258
|
target: { value: "" }
|
|
@@ -1255,8 +1269,7 @@ var Input = (_a) => {
|
|
|
1255
1269
|
if (variant === "currency") {
|
|
1256
1270
|
const raw = rawValue.replace(/,/g, "");
|
|
1257
1271
|
if (raw === "") {
|
|
1258
|
-
|
|
1259
|
-
setDisplayValue("");
|
|
1272
|
+
setInputValues("", "");
|
|
1260
1273
|
if (onChange) {
|
|
1261
1274
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
1262
1275
|
target: __spreadProps(__spreadValues({}, e.target), { value: "" })
|
|
@@ -1277,8 +1290,8 @@ var Input = (_a) => {
|
|
|
1277
1290
|
clamped.toString(),
|
|
1278
1291
|
currentDecimals
|
|
1279
1292
|
);
|
|
1280
|
-
|
|
1281
|
-
|
|
1293
|
+
setInputValues(
|
|
1294
|
+
formattedClamped,
|
|
1282
1295
|
formatOnBlur ? formattedClamped : formatCurrencyDisplay(formattedClamped)
|
|
1283
1296
|
);
|
|
1284
1297
|
if (onChange) {
|
|
@@ -1289,8 +1302,7 @@ var Input = (_a) => {
|
|
|
1289
1302
|
}
|
|
1290
1303
|
return;
|
|
1291
1304
|
}
|
|
1292
|
-
|
|
1293
|
-
setDisplayValue(formatOnBlur ? raw : formatCurrencyDisplay(raw));
|
|
1305
|
+
setInputValues(raw, formatOnBlur ? raw : formatCurrencyDisplay(raw));
|
|
1294
1306
|
if (!isNaN(asNumber) && onChange) {
|
|
1295
1307
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
1296
1308
|
target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
|
|
@@ -1302,8 +1314,7 @@ var Input = (_a) => {
|
|
|
1302
1314
|
if (variant === "uom" && currencyFormat) {
|
|
1303
1315
|
const raw = rawValue.replace(/,/g, "");
|
|
1304
1316
|
if (raw === "") {
|
|
1305
|
-
|
|
1306
|
-
setDisplayValue("");
|
|
1317
|
+
setInputValues("", "");
|
|
1307
1318
|
if (onChange) {
|
|
1308
1319
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
1309
1320
|
target: __spreadProps(__spreadValues({}, e.target), { value: "" })
|
|
@@ -1324,8 +1335,10 @@ var Input = (_a) => {
|
|
|
1324
1335
|
clamped.toString(),
|
|
1325
1336
|
currentDecimals
|
|
1326
1337
|
);
|
|
1327
|
-
|
|
1328
|
-
|
|
1338
|
+
setInputValues(
|
|
1339
|
+
formattedClamped,
|
|
1340
|
+
formatCurrencyDisplay(formattedClamped)
|
|
1341
|
+
);
|
|
1329
1342
|
if (onChange) {
|
|
1330
1343
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
1331
1344
|
target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
|
|
@@ -1334,8 +1347,7 @@ var Input = (_a) => {
|
|
|
1334
1347
|
}
|
|
1335
1348
|
return;
|
|
1336
1349
|
}
|
|
1337
|
-
|
|
1338
|
-
setDisplayValue(formatCurrencyDisplay(raw));
|
|
1350
|
+
setInputValues(raw, formatCurrencyDisplay(raw));
|
|
1339
1351
|
if (!isNaN(asNumber) && onChange) {
|
|
1340
1352
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
1341
1353
|
target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
|
|
@@ -1352,8 +1364,7 @@ var Input = (_a) => {
|
|
|
1352
1364
|
clamped.toString(),
|
|
1353
1365
|
decimals != null ? decimals : 0
|
|
1354
1366
|
);
|
|
1355
|
-
|
|
1356
|
-
setDisplayValue(formattedClamped);
|
|
1367
|
+
setInputValues(formattedClamped, formattedClamped);
|
|
1357
1368
|
if (typeof onChange === "function") {
|
|
1358
1369
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
1359
1370
|
target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
|
|
@@ -1362,15 +1373,13 @@ var Input = (_a) => {
|
|
|
1362
1373
|
}
|
|
1363
1374
|
return;
|
|
1364
1375
|
}
|
|
1365
|
-
|
|
1366
|
-
setDisplayValue(rawValue);
|
|
1376
|
+
setInputValues(rawValue, rawValue);
|
|
1367
1377
|
if (typeof onChange === "function") {
|
|
1368
1378
|
onChange(e);
|
|
1369
1379
|
}
|
|
1370
1380
|
return;
|
|
1371
1381
|
}
|
|
1372
|
-
|
|
1373
|
-
setDisplayValue(rawValue);
|
|
1382
|
+
setInputValues(rawValue, rawValue);
|
|
1374
1383
|
if (typeof onChange === "function") {
|
|
1375
1384
|
onChange(e);
|
|
1376
1385
|
}
|
|
@@ -1383,8 +1392,7 @@ var Input = (_a) => {
|
|
|
1383
1392
|
}
|
|
1384
1393
|
if (variant === "currency") {
|
|
1385
1394
|
const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
|
|
1386
|
-
|
|
1387
|
-
setDisplayValue(formatCurrencyDisplay(formatted));
|
|
1395
|
+
setInputValues(formatted, formatCurrencyDisplay(formatted));
|
|
1388
1396
|
const asNumber = Number(formatted);
|
|
1389
1397
|
if (!isNaN(asNumber) && onChange) {
|
|
1390
1398
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
@@ -1395,8 +1403,7 @@ var Input = (_a) => {
|
|
|
1395
1403
|
} else if (variant === "uom") {
|
|
1396
1404
|
if (currencyFormat) {
|
|
1397
1405
|
const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
|
|
1398
|
-
|
|
1399
|
-
setDisplayValue(formatCurrencyDisplay(formatted));
|
|
1406
|
+
setInputValues(formatted, formatCurrencyDisplay(formatted));
|
|
1400
1407
|
const asNumber = Number(formatted);
|
|
1401
1408
|
if (!isNaN(asNumber) && onChange) {
|
|
1402
1409
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
@@ -378,6 +378,14 @@ Paragraph.displayName = "Paragraph";
|
|
|
378
378
|
|
|
379
379
|
// src/components/Input.tsx
|
|
380
380
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
381
|
+
function hasEquivalentNumericValue(currentValue, nextValue) {
|
|
382
|
+
if (!currentValue || !nextValue) {
|
|
383
|
+
return false;
|
|
384
|
+
}
|
|
385
|
+
const currentNumericValue = Number(currentValue.replace(/,/g, ""));
|
|
386
|
+
const nextNumericValue = Number(nextValue.replace(/,/g, ""));
|
|
387
|
+
return !Number.isNaN(currentNumericValue) && !Number.isNaN(nextNumericValue) && currentNumericValue === nextNumericValue;
|
|
388
|
+
}
|
|
381
389
|
var InputBase = (_a) => {
|
|
382
390
|
var _b = _a, {
|
|
383
391
|
id,
|
|
@@ -600,28 +608,33 @@ var Input = (_a) => {
|
|
|
600
608
|
const [internalValue, setInternalValue] = (0, import_react.useState)("");
|
|
601
609
|
const [displayValue, setDisplayValue] = (0, import_react.useState)("");
|
|
602
610
|
const [isFocused, setIsFocused] = (0, import_react.useState)(false);
|
|
611
|
+
const internalValueRef = (0, import_react.useRef)("");
|
|
612
|
+
const setInputValues = (nextInternalValue, nextDisplayValue) => {
|
|
613
|
+
internalValueRef.current = nextInternalValue;
|
|
614
|
+
setInternalValue(nextInternalValue);
|
|
615
|
+
setDisplayValue(nextDisplayValue);
|
|
616
|
+
};
|
|
603
617
|
(0, import_react.useEffect)(() => {
|
|
604
618
|
var _a2;
|
|
605
619
|
const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
|
|
606
620
|
const shouldUseThousandsFormatting = variant === "currency" || variant === "uom" && currencyFormat;
|
|
607
621
|
if (!stringValue) {
|
|
608
|
-
|
|
609
|
-
setDisplayValue("");
|
|
622
|
+
setInputValues("", "");
|
|
610
623
|
return;
|
|
611
624
|
}
|
|
612
625
|
if (!shouldUseThousandsFormatting) {
|
|
613
|
-
|
|
614
|
-
|
|
626
|
+
setInputValues(stringValue, stringValue);
|
|
627
|
+
return;
|
|
628
|
+
}
|
|
629
|
+
if (isFocused && hasEquivalentNumericValue(internalValueRef.current, stringValue)) {
|
|
615
630
|
return;
|
|
616
631
|
}
|
|
617
|
-
const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
|
|
618
632
|
if (formatOnBlur && isFocused) {
|
|
619
|
-
|
|
620
|
-
setDisplayValue(stringValue);
|
|
633
|
+
setInputValues(stringValue, stringValue);
|
|
621
634
|
return;
|
|
622
635
|
}
|
|
623
|
-
|
|
624
|
-
|
|
636
|
+
const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
|
|
637
|
+
setInputValues(formatted, formatCurrencyDisplay(formatted));
|
|
625
638
|
}, [propValue, variant, currencyFormat, decimals, formatOnBlur, isFocused]);
|
|
626
639
|
const getInputProps = () => {
|
|
627
640
|
var _a2;
|
|
@@ -643,6 +656,7 @@ var Input = (_a) => {
|
|
|
643
656
|
return __spreadProps(__spreadValues({}, baseProps), {
|
|
644
657
|
align: "right",
|
|
645
658
|
type: "text",
|
|
659
|
+
inputMode: "decimal",
|
|
646
660
|
value: displayValue
|
|
647
661
|
});
|
|
648
662
|
case "percentage":
|
|
@@ -650,6 +664,7 @@ var Input = (_a) => {
|
|
|
650
664
|
return __spreadProps(__spreadValues({}, baseProps), {
|
|
651
665
|
type: currencyFormat ? "text" : "number",
|
|
652
666
|
align: "right",
|
|
667
|
+
inputMode: currencyFormat ? "decimal" : void 0,
|
|
653
668
|
value: currencyFormat ? displayValue : propValue
|
|
654
669
|
});
|
|
655
670
|
default:
|
|
@@ -696,8 +711,7 @@ var Input = (_a) => {
|
|
|
696
711
|
}
|
|
697
712
|
};
|
|
698
713
|
const handleSearchReset = () => {
|
|
699
|
-
|
|
700
|
-
setDisplayValue("");
|
|
714
|
+
setInputValues("", "");
|
|
701
715
|
if (onChange) {
|
|
702
716
|
const syntheticEvent = {
|
|
703
717
|
target: { value: "" }
|
|
@@ -714,8 +728,7 @@ var Input = (_a) => {
|
|
|
714
728
|
if (variant === "currency") {
|
|
715
729
|
const raw = rawValue.replace(/,/g, "");
|
|
716
730
|
if (raw === "") {
|
|
717
|
-
|
|
718
|
-
setDisplayValue("");
|
|
731
|
+
setInputValues("", "");
|
|
719
732
|
if (onChange) {
|
|
720
733
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
721
734
|
target: __spreadProps(__spreadValues({}, e.target), { value: "" })
|
|
@@ -736,8 +749,8 @@ var Input = (_a) => {
|
|
|
736
749
|
clamped.toString(),
|
|
737
750
|
currentDecimals
|
|
738
751
|
);
|
|
739
|
-
|
|
740
|
-
|
|
752
|
+
setInputValues(
|
|
753
|
+
formattedClamped,
|
|
741
754
|
formatOnBlur ? formattedClamped : formatCurrencyDisplay(formattedClamped)
|
|
742
755
|
);
|
|
743
756
|
if (onChange) {
|
|
@@ -748,8 +761,7 @@ var Input = (_a) => {
|
|
|
748
761
|
}
|
|
749
762
|
return;
|
|
750
763
|
}
|
|
751
|
-
|
|
752
|
-
setDisplayValue(formatOnBlur ? raw : formatCurrencyDisplay(raw));
|
|
764
|
+
setInputValues(raw, formatOnBlur ? raw : formatCurrencyDisplay(raw));
|
|
753
765
|
if (!isNaN(asNumber) && onChange) {
|
|
754
766
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
755
767
|
target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
|
|
@@ -761,8 +773,7 @@ var Input = (_a) => {
|
|
|
761
773
|
if (variant === "uom" && currencyFormat) {
|
|
762
774
|
const raw = rawValue.replace(/,/g, "");
|
|
763
775
|
if (raw === "") {
|
|
764
|
-
|
|
765
|
-
setDisplayValue("");
|
|
776
|
+
setInputValues("", "");
|
|
766
777
|
if (onChange) {
|
|
767
778
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
768
779
|
target: __spreadProps(__spreadValues({}, e.target), { value: "" })
|
|
@@ -783,8 +794,10 @@ var Input = (_a) => {
|
|
|
783
794
|
clamped.toString(),
|
|
784
795
|
currentDecimals
|
|
785
796
|
);
|
|
786
|
-
|
|
787
|
-
|
|
797
|
+
setInputValues(
|
|
798
|
+
formattedClamped,
|
|
799
|
+
formatCurrencyDisplay(formattedClamped)
|
|
800
|
+
);
|
|
788
801
|
if (onChange) {
|
|
789
802
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
790
803
|
target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
|
|
@@ -793,8 +806,7 @@ var Input = (_a) => {
|
|
|
793
806
|
}
|
|
794
807
|
return;
|
|
795
808
|
}
|
|
796
|
-
|
|
797
|
-
setDisplayValue(formatCurrencyDisplay(raw));
|
|
809
|
+
setInputValues(raw, formatCurrencyDisplay(raw));
|
|
798
810
|
if (!isNaN(asNumber) && onChange) {
|
|
799
811
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
800
812
|
target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
|
|
@@ -811,8 +823,7 @@ var Input = (_a) => {
|
|
|
811
823
|
clamped.toString(),
|
|
812
824
|
decimals != null ? decimals : 0
|
|
813
825
|
);
|
|
814
|
-
|
|
815
|
-
setDisplayValue(formattedClamped);
|
|
826
|
+
setInputValues(formattedClamped, formattedClamped);
|
|
816
827
|
if (typeof onChange === "function") {
|
|
817
828
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
818
829
|
target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
|
|
@@ -821,15 +832,13 @@ var Input = (_a) => {
|
|
|
821
832
|
}
|
|
822
833
|
return;
|
|
823
834
|
}
|
|
824
|
-
|
|
825
|
-
setDisplayValue(rawValue);
|
|
835
|
+
setInputValues(rawValue, rawValue);
|
|
826
836
|
if (typeof onChange === "function") {
|
|
827
837
|
onChange(e);
|
|
828
838
|
}
|
|
829
839
|
return;
|
|
830
840
|
}
|
|
831
|
-
|
|
832
|
-
setDisplayValue(rawValue);
|
|
841
|
+
setInputValues(rawValue, rawValue);
|
|
833
842
|
if (typeof onChange === "function") {
|
|
834
843
|
onChange(e);
|
|
835
844
|
}
|
|
@@ -842,8 +851,7 @@ var Input = (_a) => {
|
|
|
842
851
|
}
|
|
843
852
|
if (variant === "currency") {
|
|
844
853
|
const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
|
|
845
|
-
|
|
846
|
-
setDisplayValue(formatCurrencyDisplay(formatted));
|
|
854
|
+
setInputValues(formatted, formatCurrencyDisplay(formatted));
|
|
847
855
|
const asNumber = Number(formatted);
|
|
848
856
|
if (!isNaN(asNumber) && onChange) {
|
|
849
857
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
@@ -854,8 +862,7 @@ var Input = (_a) => {
|
|
|
854
862
|
} else if (variant === "uom") {
|
|
855
863
|
if (currencyFormat) {
|
|
856
864
|
const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
|
|
857
|
-
|
|
858
|
-
setDisplayValue(formatCurrencyDisplay(formatted));
|
|
865
|
+
setInputValues(formatted, formatCurrencyDisplay(formatted));
|
|
859
866
|
const asNumber = Number(formatted);
|
|
860
867
|
if (!isNaN(asNumber) && onChange) {
|
|
861
868
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
package/dist/components/Input.js
CHANGED
|
@@ -1911,6 +1911,14 @@ var import_react11 = require("react");
|
|
|
1911
1911
|
var import_react10 = require("react");
|
|
1912
1912
|
var import_clsx8 = __toESM(require("clsx"), 1);
|
|
1913
1913
|
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
1914
|
+
function hasEquivalentNumericValue(currentValue, nextValue) {
|
|
1915
|
+
if (!currentValue || !nextValue) {
|
|
1916
|
+
return false;
|
|
1917
|
+
}
|
|
1918
|
+
const currentNumericValue = Number(currentValue.replace(/,/g, ""));
|
|
1919
|
+
const nextNumericValue = Number(nextValue.replace(/,/g, ""));
|
|
1920
|
+
return !Number.isNaN(currentNumericValue) && !Number.isNaN(nextNumericValue) && currentNumericValue === nextNumericValue;
|
|
1921
|
+
}
|
|
1914
1922
|
var InputBase = (_a) => {
|
|
1915
1923
|
var _b = _a, {
|
|
1916
1924
|
id,
|
|
@@ -2133,28 +2141,33 @@ var Input = (_a) => {
|
|
|
2133
2141
|
const [internalValue, setInternalValue] = (0, import_react10.useState)("");
|
|
2134
2142
|
const [displayValue, setDisplayValue] = (0, import_react10.useState)("");
|
|
2135
2143
|
const [isFocused, setIsFocused] = (0, import_react10.useState)(false);
|
|
2144
|
+
const internalValueRef = (0, import_react10.useRef)("");
|
|
2145
|
+
const setInputValues = (nextInternalValue, nextDisplayValue) => {
|
|
2146
|
+
internalValueRef.current = nextInternalValue;
|
|
2147
|
+
setInternalValue(nextInternalValue);
|
|
2148
|
+
setDisplayValue(nextDisplayValue);
|
|
2149
|
+
};
|
|
2136
2150
|
(0, import_react10.useEffect)(() => {
|
|
2137
2151
|
var _a2;
|
|
2138
2152
|
const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
|
|
2139
2153
|
const shouldUseThousandsFormatting = variant === "currency" || variant === "uom" && currencyFormat;
|
|
2140
2154
|
if (!stringValue) {
|
|
2141
|
-
|
|
2142
|
-
setDisplayValue("");
|
|
2155
|
+
setInputValues("", "");
|
|
2143
2156
|
return;
|
|
2144
2157
|
}
|
|
2145
2158
|
if (!shouldUseThousandsFormatting) {
|
|
2146
|
-
|
|
2147
|
-
|
|
2159
|
+
setInputValues(stringValue, stringValue);
|
|
2160
|
+
return;
|
|
2161
|
+
}
|
|
2162
|
+
if (isFocused && hasEquivalentNumericValue(internalValueRef.current, stringValue)) {
|
|
2148
2163
|
return;
|
|
2149
2164
|
}
|
|
2150
|
-
const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
|
|
2151
2165
|
if (formatOnBlur && isFocused) {
|
|
2152
|
-
|
|
2153
|
-
setDisplayValue(stringValue);
|
|
2166
|
+
setInputValues(stringValue, stringValue);
|
|
2154
2167
|
return;
|
|
2155
2168
|
}
|
|
2156
|
-
|
|
2157
|
-
|
|
2169
|
+
const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
|
|
2170
|
+
setInputValues(formatted, formatCurrencyDisplay(formatted));
|
|
2158
2171
|
}, [propValue, variant, currencyFormat, decimals, formatOnBlur, isFocused]);
|
|
2159
2172
|
const getInputProps = () => {
|
|
2160
2173
|
var _a2;
|
|
@@ -2176,6 +2189,7 @@ var Input = (_a) => {
|
|
|
2176
2189
|
return __spreadProps(__spreadValues({}, baseProps), {
|
|
2177
2190
|
align: "right",
|
|
2178
2191
|
type: "text",
|
|
2192
|
+
inputMode: "decimal",
|
|
2179
2193
|
value: displayValue
|
|
2180
2194
|
});
|
|
2181
2195
|
case "percentage":
|
|
@@ -2183,6 +2197,7 @@ var Input = (_a) => {
|
|
|
2183
2197
|
return __spreadProps(__spreadValues({}, baseProps), {
|
|
2184
2198
|
type: currencyFormat ? "text" : "number",
|
|
2185
2199
|
align: "right",
|
|
2200
|
+
inputMode: currencyFormat ? "decimal" : void 0,
|
|
2186
2201
|
value: currencyFormat ? displayValue : propValue
|
|
2187
2202
|
});
|
|
2188
2203
|
default:
|
|
@@ -2229,8 +2244,7 @@ var Input = (_a) => {
|
|
|
2229
2244
|
}
|
|
2230
2245
|
};
|
|
2231
2246
|
const handleSearchReset = () => {
|
|
2232
|
-
|
|
2233
|
-
setDisplayValue("");
|
|
2247
|
+
setInputValues("", "");
|
|
2234
2248
|
if (onChange) {
|
|
2235
2249
|
const syntheticEvent = {
|
|
2236
2250
|
target: { value: "" }
|
|
@@ -2247,8 +2261,7 @@ var Input = (_a) => {
|
|
|
2247
2261
|
if (variant === "currency") {
|
|
2248
2262
|
const raw = rawValue.replace(/,/g, "");
|
|
2249
2263
|
if (raw === "") {
|
|
2250
|
-
|
|
2251
|
-
setDisplayValue("");
|
|
2264
|
+
setInputValues("", "");
|
|
2252
2265
|
if (onChange) {
|
|
2253
2266
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
2254
2267
|
target: __spreadProps(__spreadValues({}, e.target), { value: "" })
|
|
@@ -2269,8 +2282,8 @@ var Input = (_a) => {
|
|
|
2269
2282
|
clamped.toString(),
|
|
2270
2283
|
currentDecimals
|
|
2271
2284
|
);
|
|
2272
|
-
|
|
2273
|
-
|
|
2285
|
+
setInputValues(
|
|
2286
|
+
formattedClamped,
|
|
2274
2287
|
formatOnBlur ? formattedClamped : formatCurrencyDisplay(formattedClamped)
|
|
2275
2288
|
);
|
|
2276
2289
|
if (onChange) {
|
|
@@ -2281,8 +2294,7 @@ var Input = (_a) => {
|
|
|
2281
2294
|
}
|
|
2282
2295
|
return;
|
|
2283
2296
|
}
|
|
2284
|
-
|
|
2285
|
-
setDisplayValue(formatOnBlur ? raw : formatCurrencyDisplay(raw));
|
|
2297
|
+
setInputValues(raw, formatOnBlur ? raw : formatCurrencyDisplay(raw));
|
|
2286
2298
|
if (!isNaN(asNumber) && onChange) {
|
|
2287
2299
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
2288
2300
|
target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
|
|
@@ -2294,8 +2306,7 @@ var Input = (_a) => {
|
|
|
2294
2306
|
if (variant === "uom" && currencyFormat) {
|
|
2295
2307
|
const raw = rawValue.replace(/,/g, "");
|
|
2296
2308
|
if (raw === "") {
|
|
2297
|
-
|
|
2298
|
-
setDisplayValue("");
|
|
2309
|
+
setInputValues("", "");
|
|
2299
2310
|
if (onChange) {
|
|
2300
2311
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
2301
2312
|
target: __spreadProps(__spreadValues({}, e.target), { value: "" })
|
|
@@ -2316,8 +2327,10 @@ var Input = (_a) => {
|
|
|
2316
2327
|
clamped.toString(),
|
|
2317
2328
|
currentDecimals
|
|
2318
2329
|
);
|
|
2319
|
-
|
|
2320
|
-
|
|
2330
|
+
setInputValues(
|
|
2331
|
+
formattedClamped,
|
|
2332
|
+
formatCurrencyDisplay(formattedClamped)
|
|
2333
|
+
);
|
|
2321
2334
|
if (onChange) {
|
|
2322
2335
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
2323
2336
|
target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
|
|
@@ -2326,8 +2339,7 @@ var Input = (_a) => {
|
|
|
2326
2339
|
}
|
|
2327
2340
|
return;
|
|
2328
2341
|
}
|
|
2329
|
-
|
|
2330
|
-
setDisplayValue(formatCurrencyDisplay(raw));
|
|
2342
|
+
setInputValues(raw, formatCurrencyDisplay(raw));
|
|
2331
2343
|
if (!isNaN(asNumber) && onChange) {
|
|
2332
2344
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
2333
2345
|
target: __spreadProps(__spreadValues({}, e.target), { value: asNumber.toString() })
|
|
@@ -2344,8 +2356,7 @@ var Input = (_a) => {
|
|
|
2344
2356
|
clamped.toString(),
|
|
2345
2357
|
decimals != null ? decimals : 0
|
|
2346
2358
|
);
|
|
2347
|
-
|
|
2348
|
-
setDisplayValue(formattedClamped);
|
|
2359
|
+
setInputValues(formattedClamped, formattedClamped);
|
|
2349
2360
|
if (typeof onChange === "function") {
|
|
2350
2361
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
2351
2362
|
target: __spreadProps(__spreadValues({}, e.target), { value: clamped.toString() })
|
|
@@ -2354,15 +2365,13 @@ var Input = (_a) => {
|
|
|
2354
2365
|
}
|
|
2355
2366
|
return;
|
|
2356
2367
|
}
|
|
2357
|
-
|
|
2358
|
-
setDisplayValue(rawValue);
|
|
2368
|
+
setInputValues(rawValue, rawValue);
|
|
2359
2369
|
if (typeof onChange === "function") {
|
|
2360
2370
|
onChange(e);
|
|
2361
2371
|
}
|
|
2362
2372
|
return;
|
|
2363
2373
|
}
|
|
2364
|
-
|
|
2365
|
-
setDisplayValue(rawValue);
|
|
2374
|
+
setInputValues(rawValue, rawValue);
|
|
2366
2375
|
if (typeof onChange === "function") {
|
|
2367
2376
|
onChange(e);
|
|
2368
2377
|
}
|
|
@@ -2375,8 +2384,7 @@ var Input = (_a) => {
|
|
|
2375
2384
|
}
|
|
2376
2385
|
if (variant === "currency") {
|
|
2377
2386
|
const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
|
|
2378
|
-
|
|
2379
|
-
setDisplayValue(formatCurrencyDisplay(formatted));
|
|
2387
|
+
setInputValues(formatted, formatCurrencyDisplay(formatted));
|
|
2380
2388
|
const asNumber = Number(formatted);
|
|
2381
2389
|
if (!isNaN(asNumber) && onChange) {
|
|
2382
2390
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
@@ -2387,8 +2395,7 @@ var Input = (_a) => {
|
|
|
2387
2395
|
} else if (variant === "uom") {
|
|
2388
2396
|
if (currencyFormat) {
|
|
2389
2397
|
const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
|
|
2390
|
-
|
|
2391
|
-
setDisplayValue(formatCurrencyDisplay(formatted));
|
|
2398
|
+
setInputValues(formatted, formatCurrencyDisplay(formatted));
|
|
2392
2399
|
const asNumber = Number(formatted);
|
|
2393
2400
|
if (!isNaN(asNumber) && onChange) {
|
|
2394
2401
|
const syntheticEvent = __spreadProps(__spreadValues({}, e), {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
ColumnSelector
|
|
3
|
-
} from "../../../chunk-
|
|
3
|
+
} from "../../../chunk-WSZ3ET5G.js";
|
|
4
4
|
import "../../../chunk-3UPUZBP5.js";
|
|
5
5
|
import "../../../chunk-7ZJIGTFN.js";
|
|
6
6
|
import "../../../chunk-E3FOCECQ.js";
|
|
@@ -21,7 +21,7 @@ import "../../../chunk-AJ5M6MVX.js";
|
|
|
21
21
|
import "../../../chunk-7IPESTQS.js";
|
|
22
22
|
import "../../../chunk-EWGHVZL5.js";
|
|
23
23
|
import "../../../chunk-AT4AWD6B.js";
|
|
24
|
-
import "../../../chunk-
|
|
24
|
+
import "../../../chunk-4FUZDLWX.js";
|
|
25
25
|
import "../../../chunk-CIYLALYO.js";
|
|
26
26
|
import "../../../chunk-KBIEWFQS.js";
|
|
27
27
|
import "../../../chunk-NSZTJ5R4.js";
|
|
@@ -38,12 +38,12 @@ import "../../../chunk-UARCWLMD.js";
|
|
|
38
38
|
import "../../../chunk-SJZNVG4N.js";
|
|
39
39
|
import "../../../chunk-75USUR3I.js";
|
|
40
40
|
import "../../../chunk-BWPNXY7T.js";
|
|
41
|
-
import "../../../chunk-
|
|
41
|
+
import "../../../chunk-QW4AJ5FK.js";
|
|
42
42
|
import "../../../chunk-3JUIYULW.js";
|
|
43
43
|
import "../../../chunk-OM7QLLI2.js";
|
|
44
44
|
import "../../../chunk-PE3EZP56.js";
|
|
45
|
-
import "../../../chunk-
|
|
46
|
-
import "../../../chunk-
|
|
45
|
+
import "../../../chunk-3DJWSTPS.js";
|
|
46
|
+
import "../../../chunk-H5SHC4XZ.js";
|
|
47
47
|
import "../../../chunk-4UGMSWWA.js";
|
|
48
48
|
import "../../../chunk-WVUIIBRR.js";
|
|
49
49
|
import "../../../chunk-I3W5K76C.js";
|