npm - funda-ui - Versions diffs - 4.7.252 → 4.7.254 - Mend

funda-ui 4.7.252 → 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 (4) hide show

package/NumberInput/index.js +20 -22
package/lib/cjs/NumberInput/index.js +20 -22
package/lib/esm/NumberInput/index.tsx +88 -59
package/package.json +1 -1

package/NumberInput/index.js CHANGED Viewed

@@ -892,7 +892,8 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     arrowBtnContainerClassName = props.arrowBtnContainerClassName,
     increaseIcon = props.increaseIcon,
     decreaseIcon = props.decreaseIcon,
-    hideArrowButton = props.hideArrowButton,
+    _props$hideArrowButto = props.hideArrowButton,
+    hideArrowButton = _props$hideArrowButto === void 0 ? false : _props$hideArrowButto,
     requiredLabel = props.requiredLabel,
     disabled = props.disabled,
     required = props.required,
@@ -923,7 +924,6 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     attributes = _objectWithoutProperties(props, _excluded);
   var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1___default()();
   var idRes = id || uniqueID;
-  var HIDE_ARROW = typeof hideArrowButton === 'undefined' ? false : hideArrowButton;
   var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var valRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value || ''),
@@ -1093,13 +1093,13 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
   }, label)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "position-relative"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    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'), {
+    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'), {
       'has-left-content': propExist(iconLeft),
       'has-right-content': propExist(iconRight) || propExist(units)
     })
-  }, 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", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
-  }, iconLeft)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
+  }, propExist(iconLeft) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
+  }, iconLeft) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
     ref: function ref(node) {
       valRef.current = node;
       if (typeof externalRef === 'function') {
@@ -1112,9 +1112,7 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     type: "text",
     inputMode: decimalPlaces > 0 ? 'decimal' : 'numeric' // numeric | decimal
     ,
-    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'), {
-      'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units)
-    }),
+    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')),
     id: idRes,
     name: name,
     min: min || null,
@@ -1131,20 +1129,16 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     required: required || null,
     readOnly: readOnly || null,
     style: style
-  }, 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", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
-  }, 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", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
-  }, 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", {
-    className: "position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
-    className: "text-danger"
-  }, "*"))) : ''), 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", {
-    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'),
+  }, attributes)), propExist(units) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
+  }, units) : null, propExist(iconRight) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
+  }, 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", {
+    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'),
     role: "group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     type: "button",
-    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'),
+    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')),
     tabIndex: -1,
     onClick: handleIncrement,
     disabled: disabled || null
@@ -1164,7 +1158,7 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     height: "24"
   })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     type: "button",
-    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'),
+    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')),
     tabIndex: -1,
     onClick: handleDecrement,
     disabled: disabled || null
@@ -1182,7 +1176,11 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     fill: "none",
     width: "24",
     height: "24"
-  })))))))));
+  }))))))), 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", {
+    className: "position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3 z-1"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    className: "text-danger"
+  }, "*"))) : '')));
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (NumberInput);
 })();

package/lib/cjs/NumberInput/index.js CHANGED Viewed

@@ -892,7 +892,8 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     arrowBtnContainerClassName = props.arrowBtnContainerClassName,
     increaseIcon = props.increaseIcon,
     decreaseIcon = props.decreaseIcon,
-    hideArrowButton = props.hideArrowButton,
+    _props$hideArrowButto = props.hideArrowButton,
+    hideArrowButton = _props$hideArrowButto === void 0 ? false : _props$hideArrowButto,
     requiredLabel = props.requiredLabel,
     disabled = props.disabled,
     required = props.required,
@@ -923,7 +924,6 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     attributes = _objectWithoutProperties(props, _excluded);
   var uniqueID = funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1___default()();
   var idRes = id || uniqueID;
-  var HIDE_ARROW = typeof hideArrowButton === 'undefined' ? false : hideArrowButton;
   var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var valRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value || ''),
@@ -1093,13 +1093,13 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
   }, label)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "position-relative"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    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'), {
+    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'), {
       'has-left-content': propExist(iconLeft),
       'has-right-content': propExist(iconRight) || propExist(units)
     })
-  }, 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", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
-  }, iconLeft)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
+  }, propExist(iconLeft) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
+  }, iconLeft) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", _extends({
     ref: function ref(node) {
       valRef.current = node;
       if (typeof externalRef === 'function') {
@@ -1112,9 +1112,7 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     type: "text",
     inputMode: decimalPlaces > 0 ? 'decimal' : 'numeric' // numeric | decimal
     ,
-    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'), {
-      'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units)
-    }),
+    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')),
     id: idRes,
     name: name,
     min: min || null,
@@ -1131,20 +1129,16 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     required: required || null,
     readOnly: readOnly || null,
     style: style
-  }, 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", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
-  }, 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", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text')
-  }, 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", {
-    className: "position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
-    className: "text-danger"
-  }, "*"))) : ''), 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", {
-    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'),
+  }, attributes)), propExist(units) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
+  }, units) : null, propExist(iconRight) ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(controlGroupTextClassName, 'input-group-text d-flex align-items-center')
+  }, 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", {
+    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'),
     role: "group"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     type: "button",
-    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'),
+    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')),
     tabIndex: -1,
     onClick: handleIncrement,
     disabled: disabled || null
@@ -1164,7 +1158,7 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     height: "24"
   })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     type: "button",
-    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'),
+    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')),
     tabIndex: -1,
     onClick: handleDecrement,
     disabled: disabled || null
@@ -1182,7 +1176,11 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
     fill: "none",
     width: "24",
     height: "24"
-  })))))))));
+  }))))))), 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", {
+    className: "position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3 z-1"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    className: "text-danger"
+  }, "*"))) : '')));
 });
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (NumberInput);
 })();

package/lib/esm/NumberInput/index.tsx CHANGED Viewed

@@ -63,7 +63,7 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
         arrowBtnContainerClassName,
         increaseIcon,
         decreaseIcon,
-        hideArrowButton,
+        hideArrowButton = false,
         requiredLabel,
         disabled,
         required,
@@ -93,7 +93,6 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
     const uniqueID = useComId();
     const idRes = id || uniqueID;
-    const HIDE_ARROW = typeof hideArrowButton === 'undefined' ? false : hideArrowButton;
     const rootRef = useRef<any>(null);
     const valRef = useRef<any>(null);
     const [changedVal, setChangedVal] = useState<string>(value || '');
@@ -288,16 +287,22 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
                 <div className="position-relative">
-                    {/* INPUT GROUP*/}
-                    <div className={combinedCls(
-                        clsWrite(controlGroupWrapperClassName, 'input-group position-relative z-1'),
-                        {
-                            'has-left-content': propExist(iconLeft),
-                            'has-right-content': propExist(iconRight) || propExist(units)
-                        }
-                    )}>
-                        {propExist(iconLeft) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconLeft}</span></> : null}
+                    {/* FLEX INPUT GROUP: Use flexbox to align input, units, iconRight, and arrow buttons */}
+                    <div
+                        className={combinedCls(
+                            clsWrite(controlGroupWrapperClassName, 'input-group position-relative z-1 d-flex align-items-stretch'),
+                            {
+                                'has-left-content': propExist(iconLeft),
+                                'has-right-content': propExist(iconRight) || propExist(units)
+                            }
+                        )}
+                    >
+                        {/* Left icon, if present */}
+                        {propExist(iconLeft) ? (
+                            <span className={clsWrite(controlGroupTextClassName, 'input-group-text d-flex align-items-center')}>{iconLeft}</span>
+                        ) : null}
+                        {/* Main input field */}
                         <input
                             ref={(node) => {
                                 valRef.current = node;
@@ -307,15 +312,11 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
                                     externalRef.current = node;
                                 }
                             }}
                             tabIndex={tabIndex || 0}
                             type="text"
-                            inputMode={decimalPlaces > 0 ? 'decimal' : 'numeric' }   // numeric | decimal
+                            inputMode={decimalPlaces > 0 ? 'decimal' : 'numeric'}   // numeric | decimal
                             className={combinedCls(
-                                clsWrite(controlClassName, 'form-control'),
-                                {
-                                    'rounded': !propExist(iconLeft) && !propExist(iconRight) && !propExist(units)
-                                }
+                                clsWrite(controlClassName, 'form-control')
                             )}
                             id={idRes}
                             name={name}
@@ -335,50 +336,78 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
                             style={style}
                             {...attributes}
                         />
-                        {propExist(units) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{units}</span></> : null}
-                        {propExist(iconRight) ? <><span className={clsWrite(controlGroupTextClassName, 'input-group-text')}>{iconRight}</span></> : null}
-                        {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>}</> : ''}
+                        {/* Units, if present */}
+                        {propExist(units) ? (
+                            <span className={clsWrite(controlGroupTextClassName, 'input-group-text d-flex align-items-center')}>{units}</span>
+                        ) : null}
+                        {/* Right icon, if present */}
+                        {propExist(iconRight) ? (
+                            <span className={clsWrite(controlGroupTextClassName, 'input-group-text d-flex align-items-center')}>{iconRight}</span>
+                        ) : null}
+                        {/* ARROW GROUP*/}
+                        {hideArrowButton ? null : <>
+                            <span
+                                className={clsWrite(
+                                    arrowBtnContainerClassName,
+                                    'btn-group-vertical d-flex flex-column justify-content-center align-items-center border border-start-0 rounded-end',
+                                )}
+                                role="group"
+                                >
+                                <button
+                                    type="button"
+                                    className={combinedCls(
+                                        clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill')
+                                    )}
+                                    tabIndex={-1}
+                                    onClick={handleIncrement}
+                                    disabled={disabled || null}
+                                >
+                                    <span>{increaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
+                                        <path d="M18.5,15.5l-6-7l-6,7H18.5z" />
+                                        <rect fill="none" width="24" height="24" />
+                                        <rect fill="none" width="24" height="24" />
+                                    </svg>}</span>
+                                </button>
+                                <button
+                                    type="button"
+                                    className={combinedCls(
+                                        clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill')
+                                    )}
+                                    tabIndex={-1}
+                                    onClick={handleDecrement}
+                                    disabled={disabled || null}
+                                >
+                                    <span>{decreaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
+                                        <path d="M6.5,8.5l6,7l6-7H6.5z"/>
+                                        <rect fill="none" width="24" height="24" />
+                                        <rect fill="none" width="24" height="24" />
+                                    </svg>}</span>
+                                </button>
+                            </span>
+                        </>}
+                        {/* /ARROW GROUP*/}
                     </div>
-                    {/* /INPUT GROUP*/}
-                    {/* ARROW GROUP*/}
-                    {HIDE_ARROW ? null : <>
-                        <span className={clsWrite(arrowBtnContainerClassName, 'btn-group-vertical position-absolute top-0 end-0 h-100 z-3 border-start')} role="group">
-                            <button
-                                type="button"
-                                className={clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[0] : undefined, 'btn btn-sm border-0 border-bottom py-0 lh-1 flex-fill')}
-                                tabIndex={-1}
-                                onClick={handleIncrement}
-                                disabled={disabled || null}
-                            >
-                                <span>{increaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
-                                    <path d="M18.5,15.5l-6-7l-6,7H18.5z" />
-                                    <rect fill="none" width="24" height="24" />
-                                    <rect fill="none" width="24" height="24" />
-                                </svg>}</span>
-                            </button>
-                            <button
-                                type="button"
-                                className={clsWrite(Array(arrowBtnClassName) && arrowBtnClassName ? arrowBtnClassName[1] : undefined, 'btn btn-sm border-0 py-0 lh-1 flex-fill')}
-                                tabIndex={-1}
-                                onClick={handleDecrement}
-                                disabled={disabled || null}
-                            >
-                                <span>{decreaseIcon || <svg width={13} fill="#000000" viewBox="0 0 24 24">
-                                    <path d="M6.5,8.5l6,7l6-7H6.5z"/>
-                                    <rect fill="none" width="24" height="24" />
-                                    <rect fill="none" width="24" height="24" />
-                                </svg>}</span>
-                            </button>
-                        </span>
-                    </>}
-                    {/* /ARROW GROUP*/}
+                    {/* /FLEX INPUT GROUP*/}
+                    {/* Required label, if present */}
+                    {required ? (
+                        <>
+                            {requiredLabel || requiredLabel === '' ? requiredLabel : (
+                                <span className="position-absolute end-0 top-0 my-2 mx-2 me-3 pe-3 z-1">
+                                    <span className="text-danger">*</span>
+                                </span>
+                            )}
+                        </>
+                    ) : ''}
                 </div>

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.7.252",
+  "version": "4.7.254",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",