funda-ui 4.7.250 → 4.7.254

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/Date/index.js +51 -0
  2. package/NumberInput/index.js +20 -22
  3. package/lib/cjs/Date/index.js +51 -0
  4. package/lib/cjs/NumberInput/index.js +20 -22
  5. package/lib/esm/Date/index.tsx +47 -18
  6. package/lib/esm/Input/index.tsx +1 -0
  7. package/lib/esm/NumberInput/index.tsx +88 -59
  8. 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/NumberInput/index.js CHANGED
@@ -892,7 +892,8 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
892
892
  arrowBtnContainerClassName = props.arrowBtnContainerClassName,
893
893
  increaseIcon = props.increaseIcon,
894
894
  decreaseIcon = props.decreaseIcon,
895
- hideArrowButton = props.hideArrowButton,
895
+ _props$hideArrowButto = props.hideArrowButton,
896
+ hideArrowButton = _props$hideArrowButto === void 0 ? false : _props$hideArrowButto,
896
897
  requiredLabel = props.requiredLabel,
897
898
  disabled = props.disabled,
898
899
  required = props.required,
@@ -923,7 +924,6 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
923
924
  attributes = _objectWithoutProperties(props, _excluded);
924
925
  var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1___default()();
925
926
  var idRes = id || uniqueID;
926
- var HIDE_ARROW = typeof hideArrowButton === 'undefined' ? false : hideArrowButton;
927
927
  var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
928
928
  var valRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
929
929
  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value || ''),
@@ -1093,13 +1093,13 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
1093
1093
  }, label)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1094
1094
  className: "position-relative"
1095
1095
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1096
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupWrapperClassName, 'input-group position-relative z-1'), {
1096
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupWrapperClassName, 'input-group position-relative z-1 d-flex align-items-stretch'), {
1097
1097
  'has-left-content': propExist(iconLeft),
1098
1098
  'has-right-content': propExist(iconRight) || propExist(units)
1099
1099
  })
1100
- }, propExist(iconLeft) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1101
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
1102
- }, iconLeft)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
1100
+ }, propExist(iconLeft) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1101
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
1102
+ }, iconLeft) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
1103
1103
  ref: function ref(node) {
1104
1104
  valRef.current = node;
1105
1105
  if (typeof externalRef === 'function') {
@@ -1112,9 +1112,7 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
1112
1112
  type: "text",
1113
1113
  inputMode: decimalPlaces > 0 ? 'decimal' : 'numeric' // numeric | decimal
1114
1114
  ,
1115
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlClassName, 'form-control'), {
1116
- 'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units)
1117
- }),
1115
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlClassName, 'form-control')),
1118
1116
  id: idRes,
1119
1117
  name: name,
1120
1118
  min: min || null,
@@ -1131,20 +1129,16 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
1131
1129
  required: required || null,
1132
1130
  readOnly: readOnly || null,
1133
1131
  style: style
1134
- }, attributes)), propExist(units) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1135
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
1136
- }, units)) : null, propExist(iconRight) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1137
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
1138
- }, iconRight)) : null, required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, requiredLabel || requiredLabel === '' ? requiredLabel : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1139
- className: "position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3"
1140
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1141
- className: "text-danger"
1142
- }, "*"))) : ''), HIDE_ARROW ? null : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1143
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(arrowBtnContainerClassName, 'btn-group-vertical position-absolute top-0 end-0 h-100 z-3 border-start'),
1132
+ }, attributes)), propExist(units) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1133
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
1134
+ }, units) : null, propExist(iconRight) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1135
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
1136
+ }, iconRight) : null, hideArrowButton ? null : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1137
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(arrowBtnContainerClassName, 'btn-group-vertical d-flex flex-column justify-content-center align-items-center border border-start-0 rounded-end'),
1144
1138
  role: "group"
1145
1139
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
1146
1140
  type: "button",
1147
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill'),
1141
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill')),
1148
1142
  tabIndex: -1,
1149
1143
  onClick: handleIncrement,
1150
1144
  disabled: disabled || null
@@ -1164,7 +1158,7 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
1164
1158
  height: "24"
1165
1159
  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
1166
1160
  type: "button",
1167
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill'),
1161
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill')),
1168
1162
  tabIndex: -1,
1169
1163
  onClick: handleDecrement,
1170
1164
  disabled: disabled || null
@@ -1182,7 +1176,11 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
1182
1176
  fill: "none",
1183
1177
  width: "24",
1184
1178
  height: "24"
1185
- })))))))));
1179
+ }))))))), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, requiredLabel || requiredLabel === '' ? requiredLabel : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1180
+ className: "position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3 z-1"
1181
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1182
+ className: "text-danger"
1183
+ }, "*"))) : '')));
1186
1184
  });
1187
1185
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (NumberInput);
1188
1186
  })();
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/cjs/NumberInput/index.js CHANGED
@@ -892,7 +892,8 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
892
892
  arrowBtnContainerClassName = props.arrowBtnContainerClassName,
893
893
  increaseIcon = props.increaseIcon,
894
894
  decreaseIcon = props.decreaseIcon,
895
- hideArrowButton = props.hideArrowButton,
895
+ _props$hideArrowButto = props.hideArrowButton,
896
+ hideArrowButton = _props$hideArrowButto === void 0 ? false : _props$hideArrowButto,
896
897
  requiredLabel = props.requiredLabel,
897
898
  disabled = props.disabled,
898
899
  required = props.required,
@@ -923,7 +924,6 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
923
924
  attributes = _objectWithoutProperties(props, _excluded);
924
925
  var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1___default()();
925
926
  var idRes = id || uniqueID;
926
- var HIDE_ARROW = typeof hideArrowButton === 'undefined' ? false : hideArrowButton;
927
927
  var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
928
928
  var valRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
929
929
  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value || ''),
@@ -1093,13 +1093,13 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
1093
1093
  }, label)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1094
1094
  className: "position-relative"
1095
1095
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1096
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupWrapperClassName, 'input-group position-relative z-1'), {
1096
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupWrapperClassName, 'input-group position-relative z-1 d-flex align-items-stretch'), {
1097
1097
  'has-left-content': propExist(iconLeft),
1098
1098
  'has-right-content': propExist(iconRight) || propExist(units)
1099
1099
  })
1100
- }, propExist(iconLeft) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1101
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
1102
- }, iconLeft)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
1100
+ }, propExist(iconLeft) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1101
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
1102
+ }, iconLeft) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
1103
1103
  ref: function ref(node) {
1104
1104
  valRef.current = node;
1105
1105
  if (typeof externalRef === 'function') {
@@ -1112,9 +1112,7 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
1112
1112
  type: "text",
1113
1113
  inputMode: decimalPlaces > 0 ? 'decimal' : 'numeric' // numeric | decimal
1114
1114
  ,
1115
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlClassName, 'form-control'), {
1116
- 'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units)
1117
- }),
1115
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlClassName, 'form-control')),
1118
1116
  id: idRes,
1119
1117
  name: name,
1120
1118
  min: min || null,
@@ -1131,20 +1129,16 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
1131
1129
  required: required || null,
1132
1130
  readOnly: readOnly || null,
1133
1131
  style: style
1134
- }, attributes)), propExist(units) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1135
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
1136
- }, units)) : null, propExist(iconRight) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1137
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
1138
- }, iconRight)) : null, required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, requiredLabel || requiredLabel === '' ? requiredLabel : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1139
- className: "position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3"
1140
- }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1141
- className: "text-danger"
1142
- }, "*"))) : ''), HIDE_ARROW ? null : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1143
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(arrowBtnContainerClassName, 'btn-group-vertical position-absolute top-0 end-0 h-100 z-3 border-start'),
1132
+ }, attributes)), propExist(units) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1133
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
1134
+ }, units) : null, propExist(iconRight) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1135
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
1136
+ }, iconRight) : null, hideArrowButton ? null : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1137
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(arrowBtnContainerClassName, 'btn-group-vertical d-flex flex-column justify-content-center align-items-center border border-start-0 rounded-end'),
1144
1138
  role: "group"
1145
1139
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
1146
1140
  type: "button",
1147
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill'),
1141
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill')),
1148
1142
  tabIndex: -1,
1149
1143
  onClick: handleIncrement,
1150
1144
  disabled: disabled || null
@@ -1164,7 +1158,7 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
1164
1158
  height: "24"
1165
1159
  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
1166
1160
  type: "button",
1167
- className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill'),
1161
+ className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill')),
1168
1162
  tabIndex: -1,
1169
1163
  onClick: handleDecrement,
1170
1164
  disabled: disabled || null
@@ -1182,7 +1176,11 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
1182
1176
  fill: "none",
1183
1177
  width: "24",
1184
1178
  height: "24"
1185
- })))))))));
1179
+ }))))))), required ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, requiredLabel || requiredLabel === '' ? requiredLabel : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1180
+ className: "position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3 z-1"
1181
+ }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1182
+ className: "text-danger"
1183
+ }, "*"))) : '')));
1186
1184
  });
1187
1185
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (NumberInput);
1188
1186
  })();
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/lib/esm/NumberInput/index.tsx CHANGED
@@ -63,7 +63,7 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
63
63
  arrowBtnContainerClassName,
64
64
  increaseIcon,
65
65
  decreaseIcon,
66
- hideArrowButton,
66
+ hideArrowButton = false,
67
67
  requiredLabel,
68
68
  disabled,
69
69
  required,
@@ -93,7 +93,6 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
93
93
 
94
94
  const uniqueID = useComId();
95
95
  const idRes = id || uniqueID;
96
- const HIDE_ARROW = typeof hideArrowButton === 'undefined' ? false : hideArrowButton;
97
96
  const rootRef = useRef<any>(null);
98
97
  const valRef = useRef<any>(null);
99
98
  const [changedVal, setChangedVal] = useState<string>(value || '');
@@ -288,16 +287,22 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
288
287
 
289
288
  <div className="position-relative">
290
289
 
291
- {/* INPUT GROUP*/}
292
- <div className={combinedCls(
293
- clsWrite(controlGroupWrapperClassName, 'input-group position-relative z-1'),
294
- {
295
- 'has-left-content': propExist(iconLeft),
296
- 'has-right-content': propExist(iconRight) || propExist(units)
297
- }
298
- )}>
299
- {propExist(iconLeft) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconLeft}</span></> : null}
300
-
290
+ {/* FLEX INPUT GROUP: Use flexbox to align input, units, iconRight, and arrow buttons */}
291
+ <div
292
+ className={combinedCls(
293
+ clsWrite(controlGroupWrapperClassName, 'input-group position-relative z-1 d-flex align-items-stretch'),
294
+ {
295
+ 'has-left-content': propExist(iconLeft),
296
+ 'has-right-content': propExist(iconRight) || propExist(units)
297
+ }
298
+ )}
299
+ >
300
+ {/* Left icon, if present */}
301
+ {propExist(iconLeft) ? (
302
+ <span className={clsWrite(controlGroupTextClassName, 'input-group-text d-flex align-items-center')}>{iconLeft}</span>
303
+ ) : null}
304
+
305
+ {/* Main input field */}
301
306
  <input
302
307
  ref={(node) => {
303
308
  valRef.current = node;
@@ -307,15 +312,11 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
307
312
  externalRef.current = node;
308
313
  }
309
314
  }}
310
-
311
315
  tabIndex={tabIndex || 0}
312
316
  type="text"
313
- inputMode={decimalPlaces > 0 ? 'decimal' : 'numeric' } // numeric | decimal
317
+ inputMode={decimalPlaces > 0 ? 'decimal' : 'numeric'} // numeric | decimal
314
318
  className={combinedCls(
315
- clsWrite(controlClassName, 'form-control'),
316
- {
317
- 'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units)
318
- }
319
+ clsWrite(controlClassName, 'form-control')
319
320
  )}
320
321
  id={idRes}
321
322
  name={name}
@@ -335,50 +336,78 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
335
336
  style={style}
336
337
  {...attributes}
337
338
  />
338
- {propExist(units) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{units}</span></> : null}
339
- {propExist(iconRight) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconRight}</span></> : null}
340
339
 
341
- {required ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3"><span className="text-danger">*</span></span>}</> : ''}
340
+ {/* Units, if present */}
341
+ {propExist(units) ? (
342
+ <span className={clsWrite(controlGroupTextClassName, 'input-group-text d-flex align-items-center')}>{units}</span>
343
+ ) : null}
344
+
345
+ {/* Right icon, if present */}
346
+ {propExist(iconRight) ? (
347
+ <span className={clsWrite(controlGroupTextClassName, 'input-group-text d-flex align-items-center')}>{iconRight}</span>
348
+ ) : null}
349
+
350
+
351
+ {/* ARROW GROUP*/}
352
+ {hideArrowButton ? null : <>
353
+ <span
354
+ className={clsWrite(
355
+ arrowBtnContainerClassName,
356
+ 'btn-group-vertical d-flex flex-column justify-content-center align-items-center border border-start-0 rounded-end',
357
+ )}
358
+ role="group"
359
+ >
360
+ <button
361
+ type="button"
362
+ className={combinedCls(
363
+ clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill')
364
+ )}
365
+ tabIndex={-1}
366
+ onClick={handleIncrement}
367
+ disabled={disabled || null}
368
+ >
369
+ <span>{increaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
370
+ <path d="M18.5,15.5l-6-7l-6,7H18.5z" />
371
+ <rect fill="none" width="24" height="24" />
372
+ <rect fill="none" width="24" height="24" />
373
+ </svg>}</span>
374
+ </button>
375
+
376
+ <button
377
+ type="button"
378
+ className={combinedCls(
379
+ clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill')
380
+ )}
381
+ tabIndex={-1}
382
+ onClick={handleDecrement}
383
+ disabled={disabled || null}
384
+ >
385
+ <span>{decreaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
386
+ <path d="M6.5,8.5l6,7l6-7H6.5z"/>
387
+ <rect fill="none" width="24" height="24" />
388
+ <rect fill="none" width="24" height="24" />
389
+ </svg>}</span>
390
+ </button>
391
+ </span>
392
+ </>}
393
+ {/* /ARROW GROUP*/}
342
394
 
343
395
  </div>
344
-
345
- {/* /INPUT GROUP*/}
346
-
347
-
348
-
349
- {/* ARROW GROUP*/}
350
- {HIDE_ARROW ? null : <>
351
- <span className={clsWrite(arrowBtnContainerClassName, 'btn-group-vertical position-absolute top-0 end-0 h-100 z-3 border-start')} role="group">
352
- <button
353
- type="button"
354
- className={clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill')}
355
- tabIndex={-1}
356
- onClick={handleIncrement}
357
- disabled={disabled || null}
358
- >
359
- <span>{increaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
360
- <path d="M18.5,15.5l-6-7l-6,7H18.5z" />
361
- <rect fill="none" width="24" height="24" />
362
- <rect fill="none" width="24" height="24" />
363
- </svg>}</span>
364
- </button>
365
-
366
- <button
367
- type="button"
368
- className={clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill')}
369
- tabIndex={-1}
370
- onClick={handleDecrement}
371
- disabled={disabled || null}
372
- >
373
- <span>{decreaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
374
- <path d="M6.5,8.5l6,7l6-7H6.5z"/>
375
- <rect fill="none" width="24" height="24" />
376
- <rect fill="none" width="24" height="24" />
377
- </svg>}</span>
378
- </button>
379
- </span>
380
- </>}
381
- {/* /ARROW GROUP*/}
396
+ {/* /FLEX INPUT GROUP*/}
397
+
398
+
399
+ {/* Required label, if present */}
400
+ {required ? (
401
+ <>
402
+ {requiredLabel || requiredLabel === '' ? requiredLabel : (
403
+ <span className="position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3 z-1">
404
+ <span className="text-danger">*</span>
405
+ </span>
406
+ )}
407
+ </>
408
+ ) : ''}
409
+
410
+
382
411
  </div>
383
412
 
384
413
 
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.254",
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",