funda-ui 4.7.250 → 4.7.252

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 (5) hide show
  1. package/Date/index.js +51 -0
  2. package/lib/cjs/Date/index.js +51 -0
  3. package/lib/esm/Date/index.tsx +47 -18
  4. package/lib/esm/Input/index.tsx +1 -0
  5. package/package.json +1 -1
package/Date/index.js CHANGED
@@ -5425,6 +5425,11 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
5425
5425
  e.target.select();
5426
5426
  resetDefauleValueExist();
5427
5427
 
5428
+ // Automatically pop up a pop-up window
5429
+ if (enableEntireAreaPopup) {
5430
+ handleShow();
5431
+ }
5432
+
5428
5433
  // If there is no valid default value in the input field,
5429
5434
  // onChange should be triggered only after the resetDefauleValueExist() function is processed
5430
5435
  if (!dateDefaultValueExist) {
@@ -5838,6 +5843,15 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
5838
5843
  setDateVal(_date);
5839
5844
  setChangedVal(_full);
5840
5845
  setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
5846
+
5847
+ // Auto focus to next input if year is 4 digits
5848
+ if (_val.length === 4) {
5849
+ var nextInput = splitInputs.current.get(splitInputsIds[1]);
5850
+ if (nextInput) {
5851
+ nextInput.focus();
5852
+ nextInput.select();
5853
+ }
5854
+ }
5841
5855
  }
5842
5856
  }, attributes)), dateDefaultValueExist ? DELIMITER_DATE : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
5843
5857
  ref: function ref(node) {
@@ -5877,6 +5891,15 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
5877
5891
  setDateVal(_date);
5878
5892
  setChangedVal(_full);
5879
5893
  setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
5894
+
5895
+ // Auto focus to next input if month is 2 digits
5896
+ if (_val.length === 2) {
5897
+ var nextInput = splitInputs.current.get(splitInputsIds[2]);
5898
+ if (nextInput) {
5899
+ nextInput.focus();
5900
+ nextInput.select();
5901
+ }
5902
+ }
5880
5903
  }
5881
5904
  }, attributes)), dateDefaultValueExist ? DELIMITER_DATE : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
5882
5905
  ref: function ref(node) {
@@ -5921,6 +5944,15 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
5921
5944
  setDateVal(_date);
5922
5945
  setChangedVal(_full);
5923
5946
  setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
5947
+
5948
+ // Auto focus to next input if day is 2 digits
5949
+ if (_val.length === 2) {
5950
+ var nextInput = splitInputs.current.get(splitInputsIds[3]);
5951
+ if (nextInput) {
5952
+ nextInput.focus();
5953
+ nextInput.select();
5954
+ }
5955
+ }
5924
5956
  }
5925
5957
  }, attributes)), "\xA0") : null, COM_HAS_TIME ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
5926
5958
  ref: function ref(node) {
@@ -5957,6 +5989,15 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
5957
5989
  setDateVal(_date);
5958
5990
  setChangedVal(_full);
5959
5991
  setTimeVal([_val, splitVals[4], splitVals[5]]);
5992
+
5993
+ // Auto focus to next input if hour is 2 digits
5994
+ if (_val.length === 2) {
5995
+ var nextInput = splitInputs.current.get(splitInputsIds[4]);
5996
+ if (nextInput) {
5997
+ nextInput.focus();
5998
+ nextInput.select();
5999
+ }
6000
+ }
5960
6001
  }
5961
6002
  }, attributes)), dateDefaultValueExist ? DELIMITER_TIME : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
5962
6003
  ref: function ref(node) {
@@ -5993,6 +6034,15 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
5993
6034
  setDateVal(_date);
5994
6035
  setChangedVal(_full);
5995
6036
  setTimeVal([splitVals[3], _val, splitVals[5]]);
6037
+
6038
+ // Auto focus to next input if minute is 2 digits
6039
+ if (_val.length === 2) {
6040
+ var nextInput = splitInputs.current.get(splitInputsIds[5]);
6041
+ if (nextInput) {
6042
+ nextInput.focus();
6043
+ nextInput.select();
6044
+ }
6045
+ }
5996
6046
  }
5997
6047
  }, attributes)), COM_NO_SECONDS ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, dateDefaultValueExist ? DELIMITER_TIME : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
5998
6048
  ref: function ref(node) {
@@ -6029,6 +6079,7 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
6029
6079
  setDateVal(_date);
6030
6080
  setChangedVal(_full);
6031
6081
  setTimeVal([splitVals[3], splitVals[4], _val]);
6082
+ // No auto focus for the last input (seconds)
6032
6083
  }
6033
6084
  }, attributes))) : null) : null), propExist(iconRight) ? tools() : null),
6034
6085
  style: style
package/lib/cjs/Date/index.js CHANGED
@@ -5425,6 +5425,11 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
5425
5425
  e.target.select();
5426
5426
  resetDefauleValueExist();
5427
5427
 
5428
+ // Automatically pop up a pop-up window
5429
+ if (enableEntireAreaPopup) {
5430
+ handleShow();
5431
+ }
5432
+
5428
5433
  // If there is no valid default value in the input field,
5429
5434
  // onChange should be triggered only after the resetDefauleValueExist() function is processed
5430
5435
  if (!dateDefaultValueExist) {
@@ -5838,6 +5843,15 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
5838
5843
  setDateVal(_date);
5839
5844
  setChangedVal(_full);
5840
5845
  setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
5846
+
5847
+ // Auto focus to next input if year is 4 digits
5848
+ if (_val.length === 4) {
5849
+ var nextInput = splitInputs.current.get(splitInputsIds[1]);
5850
+ if (nextInput) {
5851
+ nextInput.focus();
5852
+ nextInput.select();
5853
+ }
5854
+ }
5841
5855
  }
5842
5856
  }, attributes)), dateDefaultValueExist ? DELIMITER_DATE : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
5843
5857
  ref: function ref(node) {
@@ -5877,6 +5891,15 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
5877
5891
  setDateVal(_date);
5878
5892
  setChangedVal(_full);
5879
5893
  setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
5894
+
5895
+ // Auto focus to next input if month is 2 digits
5896
+ if (_val.length === 2) {
5897
+ var nextInput = splitInputs.current.get(splitInputsIds[2]);
5898
+ if (nextInput) {
5899
+ nextInput.focus();
5900
+ nextInput.select();
5901
+ }
5902
+ }
5880
5903
  }
5881
5904
  }, attributes)), dateDefaultValueExist ? DELIMITER_DATE : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
5882
5905
  ref: function ref(node) {
@@ -5921,6 +5944,15 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
5921
5944
  setDateVal(_date);
5922
5945
  setChangedVal(_full);
5923
5946
  setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
5947
+
5948
+ // Auto focus to next input if day is 2 digits
5949
+ if (_val.length === 2) {
5950
+ var nextInput = splitInputs.current.get(splitInputsIds[3]);
5951
+ if (nextInput) {
5952
+ nextInput.focus();
5953
+ nextInput.select();
5954
+ }
5955
+ }
5924
5956
  }
5925
5957
  }, attributes)), "\xA0") : null, COM_HAS_TIME ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
5926
5958
  ref: function ref(node) {
@@ -5957,6 +5989,15 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
5957
5989
  setDateVal(_date);
5958
5990
  setChangedVal(_full);
5959
5991
  setTimeVal([_val, splitVals[4], splitVals[5]]);
5992
+
5993
+ // Auto focus to next input if hour is 2 digits
5994
+ if (_val.length === 2) {
5995
+ var nextInput = splitInputs.current.get(splitInputsIds[4]);
5996
+ if (nextInput) {
5997
+ nextInput.focus();
5998
+ nextInput.select();
5999
+ }
6000
+ }
5960
6001
  }
5961
6002
  }, attributes)), dateDefaultValueExist ? DELIMITER_TIME : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
5962
6003
  ref: function ref(node) {
@@ -5993,6 +6034,15 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
5993
6034
  setDateVal(_date);
5994
6035
  setChangedVal(_full);
5995
6036
  setTimeVal([splitVals[3], _val, splitVals[5]]);
6037
+
6038
+ // Auto focus to next input if minute is 2 digits
6039
+ if (_val.length === 2) {
6040
+ var nextInput = splitInputs.current.get(splitInputsIds[5]);
6041
+ if (nextInput) {
6042
+ nextInput.focus();
6043
+ nextInput.select();
6044
+ }
6045
+ }
5996
6046
  }
5997
6047
  }, attributes)), COM_NO_SECONDS ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, dateDefaultValueExist ? DELIMITER_TIME : null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("input", _extends({
5998
6048
  ref: function ref(node) {
@@ -6029,6 +6079,7 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
6029
6079
  setDateVal(_date);
6030
6080
  setChangedVal(_full);
6031
6081
  setTimeVal([splitVals[3], splitVals[4], _val]);
6082
+ // No auto focus for the last input (seconds)
6032
6083
  }
6033
6084
  }, attributes))) : null) : null), propExist(iconRight) ? tools() : null),
6034
6085
  style: style
package/lib/esm/Date/index.tsx CHANGED
@@ -29,7 +29,6 @@ import { isNumeric } from 'funda-utils/dist/cjs/math';
29
29
  import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
30
30
 
31
31
 
32
-
33
32
  import Calendar from './Calendar';
34
33
 
35
34
 
@@ -644,6 +643,11 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
644
643
 
645
644
  resetDefauleValueExist();
646
645
 
646
+ // Automatically pop up a pop-up window
647
+ if (enableEntireAreaPopup) {
648
+ handleShow();
649
+ }
650
+
647
651
  // If there is no valid default value in the input field,
648
652
  // onChange should be triggered only after the resetDefauleValueExist() function is processed
649
653
  if (!dateDefaultValueExist) {
@@ -1093,12 +1097,9 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
1093
1097
  if (_val !== '' && !isValidYear(_val) && isNumeric(_val) && Number(_val) > 9999) _val = '9999';
1094
1098
  if (_val !== '' && !isValidYear(_val) && !isNumeric(_val)) _val = `${getCurrentYear()}`;
1095
1099
 
1096
-
1097
1100
  const _date = `${_val}-${splitVals[1]}-${splitVals[2]}`;
1098
1101
  const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${splitVals[5]}`;
1099
1102
 
1100
-
1101
-
1102
1103
  onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
1103
1104
  setSplitVals((prevState: string[]) => {
1104
1105
  return [_val, prevState[1], prevState[2], prevState[3], prevState[4], prevState[5]];
@@ -1109,7 +1110,14 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
1109
1110
  setChangedVal(_full);
1110
1111
  setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
1111
1112
 
1112
-
1113
+ // Auto focus to next input if year is 4 digits
1114
+ if (_val.length === 4) {
1115
+ const nextInput = splitInputs.current.get(splitInputsIds[1]);
1116
+ if (nextInput) {
1117
+ (nextInput as HTMLInputElement).focus();
1118
+ (nextInput as HTMLInputElement).select();
1119
+ }
1120
+ }
1113
1121
  }}
1114
1122
  {...attributes}
1115
1123
  />
@@ -1142,13 +1150,9 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
1142
1150
  }
1143
1151
  if (_val !== '' && !isValidMonth(_val) && !isNumeric(_val)) _val = `${getCurrentMonth()}`;
1144
1152
 
1145
-
1146
-
1147
1153
  const _date = `${splitVals[0]}-${_val}-${splitVals[2]}`;
1148
1154
  const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${splitVals[5]}`;
1149
1155
 
1150
-
1151
-
1152
1156
  onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
1153
1157
  setSplitVals((prevState: string[]) => {
1154
1158
  return [prevState[0], _val, prevState[2], prevState[3], prevState[4], prevState[5]];
@@ -1158,7 +1162,15 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
1158
1162
  setDateVal(_date);
1159
1163
  setChangedVal(_full);
1160
1164
  setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
1161
-
1165
+
1166
+ // Auto focus to next input if month is 2 digits
1167
+ if (_val.length === 2) {
1168
+ const nextInput = splitInputs.current.get(splitInputsIds[2]);
1169
+ if (nextInput) {
1170
+ (nextInput as HTMLInputElement).focus();
1171
+ (nextInput as HTMLInputElement).select();
1172
+ }
1173
+ }
1162
1174
  }}
1163
1175
  {...attributes}
1164
1176
  />
@@ -1199,13 +1211,9 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
1199
1211
  }
1200
1212
  if (_val !== '' && !isValidDay(_val) && !isNumeric(_val)) _val = `${getCurrentDay()}`;
1201
1213
 
1202
-
1203
1214
  const _date = `${splitVals[0]}-${splitVals[1]}-${_val}`;
1204
1215
  const _full = `${_date} ${splitVals[3]}:${splitVals[4]}:${splitVals[5]}`;
1205
1216
 
1206
-
1207
-
1208
-
1209
1217
  onChange?.(inputRef.current, valueResConverter(_full), isValidDate(_full), getAllSplittingInputs());
1210
1218
  setSplitVals((prevState: string[]) => {
1211
1219
  return [prevState[0], prevState[1], _val, prevState[3], prevState[4], prevState[5]];
@@ -1216,7 +1224,14 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
1216
1224
  setChangedVal(_full);
1217
1225
  setTimeVal([splitVals[3], splitVals[4], splitVals[5]]);
1218
1226
 
1219
-
1227
+ // Auto focus to next input if day is 2 digits
1228
+ if (_val.length === 2) {
1229
+ const nextInput = splitInputs.current.get(splitInputsIds[3]);
1230
+ if (nextInput) {
1231
+ (nextInput as HTMLInputElement).focus();
1232
+ (nextInput as HTMLInputElement).select();
1233
+ }
1234
+ }
1220
1235
  }}
1221
1236
  {...attributes}
1222
1237
  />
@@ -1266,7 +1281,14 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
1266
1281
  setChangedVal(_full);
1267
1282
  setTimeVal([_val, splitVals[4], splitVals[5]]);
1268
1283
 
1269
-
1284
+ // Auto focus to next input if hour is 2 digits
1285
+ if (_val.length === 2) {
1286
+ const nextInput = splitInputs.current.get(splitInputsIds[4]);
1287
+ if (nextInput) {
1288
+ (nextInput as HTMLInputElement).focus();
1289
+ (nextInput as HTMLInputElement).select();
1290
+ }
1291
+ }
1270
1292
  }}
1271
1293
  {...attributes}
1272
1294
  />
@@ -1314,7 +1336,14 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
1314
1336
  setChangedVal(_full);
1315
1337
  setTimeVal([splitVals[3], _val, splitVals[5]]);
1316
1338
 
1317
-
1339
+ // Auto focus to next input if minute is 2 digits
1340
+ if (_val.length === 2) {
1341
+ const nextInput = splitInputs.current.get(splitInputsIds[5]);
1342
+ if (nextInput) {
1343
+ (nextInput as HTMLInputElement).focus();
1344
+ (nextInput as HTMLInputElement).select();
1345
+ }
1346
+ }
1318
1347
  }}
1319
1348
  {...attributes}
1320
1349
  />
@@ -1364,7 +1393,7 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
1364
1393
  setDateVal(_date);
1365
1394
  setChangedVal(_full);
1366
1395
  setTimeVal([splitVals[3], splitVals[4], _val]);
1367
-
1396
+ // No auto focus for the last input (seconds)
1368
1397
  }}
1369
1398
  {...attributes}
1370
1399
  />
package/lib/esm/Input/index.tsx CHANGED
@@ -7,6 +7,7 @@ import { actualPropertyValue, getTextTop } from 'funda-utils/dist/cjs/inputsCalc
7
7
  import useDebounce from 'funda-utils/dist/cjs/useDebounce';
8
8
 
9
9
 
10
+
10
11
  export type InputProps = {
11
12
  contentRef?: React.ForwardedRef<any>;
12
13
  wrapperClassName?: string;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "author": "UIUX Lab",
3
3
  "email": "uiuxlab@gmail.com",
4
4
  "name": "funda-ui",
5
- "version": "4.7.250",
5
+ "version": "4.7.252",
6
6
  "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
7
7
  "repository": {
8
8
  "type": "git",