@rubenpazch/numeric-up-picker 2.0.0 → 2.0.1
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/NumericUpPicker.d.ts.map +1 -1
- package/dist/index.cjs.js +74 -62
- package/dist/index.esm.js +74 -62
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumericUpPicker.d.ts","sourceRoot":"","sources":["../src/NumericUpPicker.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NumericUpPicker.d.ts","sourceRoot":"","sources":["../src/NumericUpPicker.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,GAAG,EACH,GAAG,EACH,IAAW,EACX,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAgB,EAChB,SAAc,EACd,QAAgB,EAChB,eAAuB,EACvB,cAAsB,EACtB,WAAmB,EACnB,QAAgB,EAChB,aAAqB,EACrB,SAAiB,EACjB,OAAO,GACR,EAAE,oBAAoB,2CA6YtB"}
|
package/dist/index.cjs.js
CHANGED
|
@@ -132,7 +132,7 @@ function requireReactJsxRuntime_development () {
|
|
|
132
132
|
testStringCoercion(value);
|
|
133
133
|
var JSCompiler_inline_result = !1;
|
|
134
134
|
} catch (e) {
|
|
135
|
-
JSCompiler_inline_result =
|
|
135
|
+
JSCompiler_inline_result = !0;
|
|
136
136
|
}
|
|
137
137
|
if (JSCompiler_inline_result) {
|
|
138
138
|
JSCompiler_inline_result = console;
|
|
@@ -176,29 +176,29 @@ function requireReactJsxRuntime_development () {
|
|
|
176
176
|
function hasValidKey(config) {
|
|
177
177
|
if (hasOwnProperty.call(config, "key")) {
|
|
178
178
|
var getter = Object.getOwnPropertyDescriptor(config, "key").get;
|
|
179
|
-
if (getter && getter.isReactWarning) return
|
|
179
|
+
if (getter && getter.isReactWarning) return !1;
|
|
180
180
|
}
|
|
181
181
|
return void 0 !== config.key;
|
|
182
182
|
}
|
|
183
183
|
function defineKeyPropWarningGetter(props, displayName) {
|
|
184
184
|
function warnAboutAccessingKey() {
|
|
185
185
|
specialPropKeyWarningShown ||
|
|
186
|
-
((specialPropKeyWarningShown =
|
|
186
|
+
((specialPropKeyWarningShown = !0),
|
|
187
187
|
console.error(
|
|
188
188
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
189
189
|
displayName
|
|
190
190
|
));
|
|
191
191
|
}
|
|
192
|
-
warnAboutAccessingKey.isReactWarning =
|
|
192
|
+
warnAboutAccessingKey.isReactWarning = !0;
|
|
193
193
|
Object.defineProperty(props, "key", {
|
|
194
194
|
get: warnAboutAccessingKey,
|
|
195
|
-
configurable:
|
|
195
|
+
configurable: !0
|
|
196
196
|
});
|
|
197
197
|
}
|
|
198
198
|
function elementRefGetterWithDeprecationWarning() {
|
|
199
199
|
var componentName = getComponentNameFromType(this.type);
|
|
200
200
|
didWarnAboutElementRef[componentName] ||
|
|
201
|
-
((didWarnAboutElementRef[componentName] =
|
|
201
|
+
((didWarnAboutElementRef[componentName] = !0),
|
|
202
202
|
console.error(
|
|
203
203
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
204
204
|
));
|
|
@@ -216,33 +216,33 @@ function requireReactJsxRuntime_development () {
|
|
|
216
216
|
};
|
|
217
217
|
null !== (void 0 !== refProp ? refProp : null)
|
|
218
218
|
? Object.defineProperty(type, "ref", {
|
|
219
|
-
enumerable:
|
|
219
|
+
enumerable: !1,
|
|
220
220
|
get: elementRefGetterWithDeprecationWarning
|
|
221
221
|
})
|
|
222
|
-
: Object.defineProperty(type, "ref", { enumerable:
|
|
222
|
+
: Object.defineProperty(type, "ref", { enumerable: !1, value: null });
|
|
223
223
|
type._store = {};
|
|
224
224
|
Object.defineProperty(type._store, "validated", {
|
|
225
|
-
configurable:
|
|
226
|
-
enumerable:
|
|
227
|
-
writable:
|
|
225
|
+
configurable: !1,
|
|
226
|
+
enumerable: !1,
|
|
227
|
+
writable: !0,
|
|
228
228
|
value: 0
|
|
229
229
|
});
|
|
230
230
|
Object.defineProperty(type, "_debugInfo", {
|
|
231
|
-
configurable:
|
|
232
|
-
enumerable:
|
|
233
|
-
writable:
|
|
231
|
+
configurable: !1,
|
|
232
|
+
enumerable: !1,
|
|
233
|
+
writable: !0,
|
|
234
234
|
value: null
|
|
235
235
|
});
|
|
236
236
|
Object.defineProperty(type, "_debugStack", {
|
|
237
|
-
configurable:
|
|
238
|
-
enumerable:
|
|
239
|
-
writable:
|
|
237
|
+
configurable: !1,
|
|
238
|
+
enumerable: !1,
|
|
239
|
+
writable: !0,
|
|
240
240
|
value: debugStack
|
|
241
241
|
});
|
|
242
242
|
Object.defineProperty(type, "_debugTask", {
|
|
243
|
-
configurable:
|
|
244
|
-
enumerable:
|
|
245
|
-
writable:
|
|
243
|
+
configurable: !1,
|
|
244
|
+
enumerable: !1,
|
|
245
|
+
writable: !0,
|
|
246
246
|
value: debugTask
|
|
247
247
|
});
|
|
248
248
|
Object.freeze && (Object.freeze(type.props), Object.freeze(type));
|
|
@@ -291,7 +291,7 @@ function requireReactJsxRuntime_development () {
|
|
|
291
291
|
keys,
|
|
292
292
|
children
|
|
293
293
|
),
|
|
294
|
-
(didWarnAboutKeySpread[children + isStaticChildren] =
|
|
294
|
+
(didWarnAboutKeySpread[children + isStaticChildren] = !0));
|
|
295
295
|
}
|
|
296
296
|
children = null;
|
|
297
297
|
void 0 !== maybeKey &&
|
|
@@ -383,7 +383,7 @@ function requireReactJsxRuntime_development () {
|
|
|
383
383
|
type,
|
|
384
384
|
config,
|
|
385
385
|
maybeKey,
|
|
386
|
-
|
|
386
|
+
!1,
|
|
387
387
|
trackActualOwner
|
|
388
388
|
? Error("react-stack-top-frame")
|
|
389
389
|
: unknownOwnerDebugStack,
|
|
@@ -397,7 +397,7 @@ function requireReactJsxRuntime_development () {
|
|
|
397
397
|
type,
|
|
398
398
|
config,
|
|
399
399
|
maybeKey,
|
|
400
|
-
|
|
400
|
+
!0,
|
|
401
401
|
trackActualOwner
|
|
402
402
|
? Error("react-stack-top-frame")
|
|
403
403
|
: unknownOwnerDebugStack,
|
|
@@ -433,7 +433,7 @@ var r,s={exports:{}},o={};var t,l,n={};
|
|
|
433
433
|
*
|
|
434
434
|
* This source code is licensed under the MIT license found in the
|
|
435
435
|
* LICENSE file in the root directory of this source tree.
|
|
436
|
-
*/function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===$?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case x:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case k:return "Suspense";case y:return "SuspenseList";case C:return "Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case u:return "Portal";case g:return e.displayName||"Context";case f:return (e._context.displayName||"Context")+".Consumer";case j:var s=e.render;return (e=e.displayName)||(e=""!==(e=s.displayName||s.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(s=e.displayName||null)?s:r(e.type)||"Memo";case N:s=e._payload,e=e._init;try{return r(e(s))}catch(e){}}return null}function s(e){return ""+e}function o(e){try{s(e);var r=!1;}catch(e){r
|
|
436
|
+
*/function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===$?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case x:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case k:return "Suspense";case y:return "SuspenseList";case C:return "Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case u:return "Portal";case g:return e.displayName||"Context";case f:return (e._context.displayName||"Context")+".Consumer";case j:var s=e.render;return (e=e.displayName)||(e=""!==(e=s.displayName||s.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(s=e.displayName||null)?s:r(e.type)||"Memo";case N:s=e._payload,e=e._init;try{return r(e(s))}catch(e){}}return null}function s(e){return ""+e}function o(e){try{s(e);var r=!1;}catch(e){r=!0;}if(r){var o=(r=console).error,t="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),s(e)}}function t(e){if(e===x)return "<>";if("object"==typeof e&&null!==e&&e.$$typeof===N)return "<...>";try{var s=r(e);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function l(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return W[e]||(W[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function i(e,s,t,l,n,i){var h,m=s.children;if(void 0!==m)if(l)if(M(m)){for(l=0;l<m.length;l++)c(m[l]);Object.freeze&&Object.freeze(m);}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(m);if(z.call(s,"key")){m=r(e);var u=Object.keys(s).filter(function(e){return "key"!==e});l=0<u.length?"{key: someKey, "+u.join(": ..., ")+": ...}":"{key: someKey}",V[m+l]||(u=0<u.length?"{"+u.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',l,m,u,m),V[m+l]=!0);}if(m=null,void 0!==t&&(o(t),m=""+t),function(e){if(z.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return !1}return void 0!==e.key}(s)&&(o(s.key),m=""+s.key),"key"in s)for(var x in t={},s)"key"!==x&&(t[x]=s[x]);else t=s;return m&&function(e,r){function s(){d||(d=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r));}s.isReactWarning=!0,Object.defineProperty(e,"key",{get:s,configurable:!0});}(t,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,s,o,t,l){var n=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==n?n:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:a}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:t}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,t,null===(h=b.A)?null:h.getOwner(),n,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===N&&("fulfilled"===e._payload.status?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1));}function h(e){return "object"==typeof e&&null!==e&&e.$$typeof===w}var d,m=require$$0,w=Symbol.for("react.transitional.element"),u=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),f=Symbol.for("react.consumer"),g=Symbol.for("react.context"),j=Symbol.for("react.forward_ref"),k=Symbol.for("react.suspense"),y=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),N=Symbol.for("react.lazy"),C=Symbol.for("react.activity"),$=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,z=Object.prototype.hasOwnProperty,M=Array.isArray,B=console.createTask?console.createTask:function(){return null},W={},_=(m={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(m,l)(),H=B(t(l)),V={};n.Fragment=x,n.jsx=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,!1,o?Error("react-stack-top-frame"):_,o?B(t(e)):H)},n.jsxs=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,!0,o?Error("react-stack-top-frame"):_,o?B(t(e)):H)};}()),n}var i=(l||(l=1,"production"===process.env.NODE_ENV?s.exports=function(){if(r)return o;r=1;var e=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function t(r,s,o){var t=null;if(void 0!==o&&(t=""+o),void 0!==s.key&&(t=""+s.key),"key"in s)for(var l in o={},s)"key"!==l&&(o[l]=s[l]);else o=s;return s=o.ref,{$$typeof:e,type:r,key:t,ref:void 0!==s?s:null,props:o}}return o.Fragment=s,o.jsx=t,o.jsxs=t,o}():s.exports=a()),s.exports);function m({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:s,"aria-label":"Check",children:i.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}function g({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 18L18 6M6 6l12 12"})})}function R({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M5 12h14"})})}function U({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:s,"aria-label":"Plus",children:i.jsx("path",{d:"M12 4v16m8-8H4"})})}
|
|
437
437
|
|
|
438
438
|
// CSS to hide native number input spinners
|
|
439
439
|
const hideSpinnersStyle = `
|
|
@@ -446,26 +446,33 @@ const hideSpinnersStyle = `
|
|
|
446
446
|
-moz-appearance: textfield;
|
|
447
447
|
}
|
|
448
448
|
`;
|
|
449
|
-
function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder, min, max, step = 0.01, error, hint, warning, disabled = false, className =
|
|
449
|
+
function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder, min, max, step = 0.01, error, hint, warning, disabled = false, className = "", required = false, useMinAsDefault = false, alwaysNegative = false, integerOnly = false, showSign = false, defaultToZero = false, clearable = false, onClear, }) {
|
|
450
450
|
// Track if the field has been touched (user has focused on it)
|
|
451
451
|
const [hasBeenTouched, setHasBeenTouched] = require$$0.useState(false);
|
|
452
|
-
const numValue = typeof value ===
|
|
452
|
+
const numValue = typeof value === "string" ? parseFloat(value) || 0 : value;
|
|
453
453
|
// Format display value with sign if showSign is true
|
|
454
454
|
const displayValue = require$$0.useMemo(() => {
|
|
455
|
-
if (!showSign ||
|
|
456
|
-
|
|
455
|
+
if (!showSign ||
|
|
456
|
+
value === "" ||
|
|
457
|
+
value === "-" ||
|
|
458
|
+
value === null ||
|
|
459
|
+
value === undefined)
|
|
460
|
+
return value || "";
|
|
457
461
|
const strValue = value.toString();
|
|
458
462
|
const numVal = parseFloat(strValue);
|
|
459
463
|
if (isNaN(numVal))
|
|
460
464
|
return value;
|
|
461
|
-
if (numVal > 0 && !strValue.startsWith(
|
|
465
|
+
if (numVal > 0 && !strValue.startsWith("+")) {
|
|
462
466
|
return `+${strValue}`;
|
|
463
467
|
}
|
|
464
468
|
return value;
|
|
465
469
|
}, [value, showSign]);
|
|
466
470
|
const handleIncrement = () => {
|
|
467
471
|
// If value is empty or invalid, start from 0 if defaultToZero, otherwise from min (or 0 if no min)
|
|
468
|
-
if (value ===
|
|
472
|
+
if (value === "" ||
|
|
473
|
+
value === "-" ||
|
|
474
|
+
value === null ||
|
|
475
|
+
value === undefined) {
|
|
469
476
|
const startValue = defaultToZero ? 0 : min !== undefined ? min : 0;
|
|
470
477
|
if (integerOnly) {
|
|
471
478
|
onChange(Math.round(startValue).toString());
|
|
@@ -483,13 +490,18 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
483
490
|
else {
|
|
484
491
|
const formattedValue = newValue.toFixed(2);
|
|
485
492
|
// If alwaysNegative, ensure the value has a negative sign
|
|
486
|
-
onChange(alwaysNegative && newValue > 0
|
|
493
|
+
onChange(alwaysNegative && newValue > 0
|
|
494
|
+
? `-${formattedValue}`
|
|
495
|
+
: formattedValue);
|
|
487
496
|
}
|
|
488
497
|
}
|
|
489
498
|
};
|
|
490
499
|
const handleDecrement = () => {
|
|
491
500
|
// If value is empty or invalid, start from 0 if defaultToZero, otherwise from max (or 0 if no max)
|
|
492
|
-
if (value ===
|
|
501
|
+
if (value === "" ||
|
|
502
|
+
value === "-" ||
|
|
503
|
+
value === null ||
|
|
504
|
+
value === undefined) {
|
|
493
505
|
const startValue = defaultToZero ? 0 : max !== undefined ? max : 0;
|
|
494
506
|
if (integerOnly) {
|
|
495
507
|
onChange(Math.round(startValue).toString());
|
|
@@ -516,11 +528,11 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
516
528
|
};
|
|
517
529
|
const handleKeyDown = (e) => {
|
|
518
530
|
// Handle arrow up/down keys for incrementing/decrementing
|
|
519
|
-
if (e.key ===
|
|
531
|
+
if (e.key === "ArrowUp") {
|
|
520
532
|
e.preventDefault(); // Prevent cursor movement
|
|
521
533
|
handleIncrement();
|
|
522
534
|
}
|
|
523
|
-
else if (e.key ===
|
|
535
|
+
else if (e.key === "ArrowDown") {
|
|
524
536
|
e.preventDefault(); // Prevent cursor movement
|
|
525
537
|
handleDecrement();
|
|
526
538
|
}
|
|
@@ -536,22 +548,22 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
536
548
|
let inputValue = e.target.value;
|
|
537
549
|
// For showSign, remove the plus sign before processing
|
|
538
550
|
if (showSign) {
|
|
539
|
-
inputValue = inputValue.replace(/^\+/,
|
|
551
|
+
inputValue = inputValue.replace(/^\+/, "");
|
|
540
552
|
}
|
|
541
553
|
// For alwaysNegative fields, ensure value always starts with minus sign
|
|
542
554
|
if (alwaysNegative) {
|
|
543
555
|
// Remove any existing minus signs
|
|
544
|
-
inputValue = inputValue.replace(/-/g,
|
|
556
|
+
inputValue = inputValue.replace(/-/g, "");
|
|
545
557
|
// Allow empty input
|
|
546
|
-
if (inputValue ===
|
|
547
|
-
onChange(
|
|
558
|
+
if (inputValue === "") {
|
|
559
|
+
onChange("-");
|
|
548
560
|
return;
|
|
549
561
|
}
|
|
550
562
|
// Add minus sign at the beginning
|
|
551
563
|
inputValue = `-${inputValue}`;
|
|
552
564
|
}
|
|
553
565
|
// Allow empty input (user deleted content)
|
|
554
|
-
if (inputValue ===
|
|
566
|
+
if (inputValue === "" || inputValue === "-") {
|
|
555
567
|
onChange(inputValue);
|
|
556
568
|
return;
|
|
557
569
|
}
|
|
@@ -559,16 +571,16 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
559
571
|
onChange(inputValue);
|
|
560
572
|
};
|
|
561
573
|
const handleClear = () => {
|
|
562
|
-
onChange(
|
|
574
|
+
onChange("");
|
|
563
575
|
onClear?.();
|
|
564
576
|
};
|
|
565
577
|
const handleBlurWithValidation = () => {
|
|
566
578
|
const inputValue = value.toString();
|
|
567
579
|
// If empty, handle based on required and useMinAsDefault flags
|
|
568
|
-
if (inputValue ===
|
|
580
|
+
if (inputValue === "" || inputValue === "-") {
|
|
569
581
|
// For optional fields (!required), allow empty values
|
|
570
582
|
if (!required) {
|
|
571
|
-
onChange(
|
|
583
|
+
onChange("");
|
|
572
584
|
onBlur?.();
|
|
573
585
|
return;
|
|
574
586
|
}
|
|
@@ -594,17 +606,17 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
594
606
|
}
|
|
595
607
|
else if (!hasBeenTouched) {
|
|
596
608
|
// If never touched, keep it empty
|
|
597
|
-
onChange(
|
|
609
|
+
onChange("");
|
|
598
610
|
}
|
|
599
611
|
else {
|
|
600
|
-
onChange(integerOnly ?
|
|
612
|
+
onChange(integerOnly ? "0" : alwaysNegative ? "-0.00" : "0.00");
|
|
601
613
|
}
|
|
602
614
|
onBlur?.();
|
|
603
615
|
return;
|
|
604
616
|
}
|
|
605
617
|
// Parse the input value (remove negative sign if present for alwaysNegative fields)
|
|
606
618
|
let numericValue = alwaysNegative
|
|
607
|
-
? parseFloat(inputValue.replace(/^-/,
|
|
619
|
+
? parseFloat(inputValue.replace(/^-/, ""))
|
|
608
620
|
: parseFloat(inputValue);
|
|
609
621
|
// If not a valid number, reset to min or 0
|
|
610
622
|
if (isNaN(numericValue)) {
|
|
@@ -627,7 +639,7 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
627
639
|
}
|
|
628
640
|
}
|
|
629
641
|
else {
|
|
630
|
-
onChange(integerOnly ?
|
|
642
|
+
onChange(integerOnly ? "0" : alwaysNegative ? "-0.00" : "0.00");
|
|
631
643
|
}
|
|
632
644
|
onBlur?.();
|
|
633
645
|
return;
|
|
@@ -636,7 +648,7 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
636
648
|
if (alwaysNegative) {
|
|
637
649
|
// Clamp the absolute value within the absolute range
|
|
638
650
|
const absMin = Math.abs(max ?? -0.25); // max is the least negative (closest to 0)
|
|
639
|
-
const absMax = Math.abs(min ?? -10); // min is the most negative (farthest from 0)
|
|
651
|
+
const absMax = Math.abs(min ?? -10.0); // min is the most negative (farthest from 0)
|
|
640
652
|
if (numericValue < absMin) {
|
|
641
653
|
numericValue = absMin;
|
|
642
654
|
}
|
|
@@ -672,7 +684,7 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
672
684
|
};
|
|
673
685
|
// Disable buttons only if value is not empty and at min/max
|
|
674
686
|
// When value is empty, allow both buttons (they will set to min/max)
|
|
675
|
-
const isEmpty = value ===
|
|
687
|
+
const isEmpty = value === "" || value === "-" || value === null || value === undefined;
|
|
676
688
|
// For alwaysNegative fields, we compare absolute values
|
|
677
689
|
const isAtMin = !isEmpty &&
|
|
678
690
|
(alwaysNegative
|
|
@@ -682,23 +694,23 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
682
694
|
(alwaysNegative
|
|
683
695
|
? max !== undefined && Math.abs(numValue) <= Math.abs(max)
|
|
684
696
|
: max !== undefined && numValue >= max);
|
|
685
|
-
return (jsxRuntimeExports.jsxs("div", { className: className, children: [jsxRuntimeExports.jsx("style", { children: hideSpinnersStyle }), label && (jsxRuntimeExports.jsxs("label", { className: `block text-sm font-medium mb-2 ${error ?
|
|
686
|
-
?
|
|
697
|
+
return (jsxRuntimeExports.jsxs("div", { className: className, children: [jsxRuntimeExports.jsx("style", { children: hideSpinnersStyle }), label && (jsxRuntimeExports.jsxs("label", { className: `block text-sm font-medium mb-2 ${error ? "text-red-700" : "text-gray-700"}`, children: [label, required && jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-between h-12 rounded-lg border-2 transition-all ${error
|
|
698
|
+
? "border-red-500 bg-red-50"
|
|
687
699
|
: disabled
|
|
688
|
-
?
|
|
689
|
-
:
|
|
690
|
-
?
|
|
700
|
+
? "border-gray-300 bg-gray-100 opacity-50 cursor-not-allowed"
|
|
701
|
+
: "border-gray-300 bg-gray-50"}`, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: handleDecrement, disabled: disabled || isAtMin, className: `flex-shrink-0 w-12 h-full flex items-center justify-center border-r border-gray-300 transition-all ${error
|
|
702
|
+
? "text-red-500"
|
|
691
703
|
: disabled || isAtMin
|
|
692
|
-
?
|
|
693
|
-
:
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
?
|
|
704
|
+
? "opacity-40 cursor-not-allowed text-gray-400"
|
|
705
|
+
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Decrease value", "aria-label": "Decrease", children: jsxRuntimeExports.jsx(R, { size: "md" }) }), jsxRuntimeExports.jsx("div", { className: "flex-1 flex items-center justify-center", children: jsxRuntimeExports.jsx("input", { type: "text", step: step, min: min, max: max, value: displayValue, onChange: handleDirectInput, onBlur: handleBlurWithValidation, onFocus: handleFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, className: `text-center bg-transparent text-lg font-semibold placeholder-gray-400 focus:outline-none border-none ${error ? "text-red-700" : "text-gray-900"} w-full`, style: {
|
|
706
|
+
WebkitAppearance: "none",
|
|
707
|
+
MozAppearance: "textfield",
|
|
708
|
+
appearance: "none",
|
|
709
|
+
} }) }), clearable && !isEmpty && !disabled && (jsxRuntimeExports.jsx("button", { type: "button", onClick: handleClear, className: "flex-shrink-0 w-6 h-6 mr-2 flex items-center justify-center rounded-full transition-all hover:bg-gray-200 active:bg-gray-300 text-gray-500 hover:text-gray-700", title: "Clear value", "aria-label": "Clear", children: jsxRuntimeExports.jsx(g, { size: "sm" }) })), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleIncrement, disabled: disabled || isAtMax, className: `flex-shrink-0 w-12 h-full flex items-center justify-center border-l border-gray-300 transition-all ${error
|
|
710
|
+
? "text-red-500"
|
|
699
711
|
: disabled || isAtMax
|
|
700
|
-
?
|
|
701
|
-
:
|
|
712
|
+
? "opacity-40 cursor-not-allowed text-gray-400"
|
|
713
|
+
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Increase value", "aria-label": "Increase", children: jsxRuntimeExports.jsx(U, { size: "md" }) })] }), error && (jsxRuntimeExports.jsxs("div", { className: "mt-2 flex items-start gap-1.5", children: [jsxRuntimeExports.jsx(m, { size: "sm", className: "text-red-500 flex-shrink-0 mt-0.5" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-red-600 font-medium", children: error })] })), warning && !error && (jsxRuntimeExports.jsxs("div", { className: "mt-2 flex items-start gap-1.5", children: [jsxRuntimeExports.jsx("div", { className: "w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5 flex items-center justify-center", children: jsxRuntimeExports.jsx("span", { className: "text-xs font-bold", children: "!" }) }), jsxRuntimeExports.jsx("p", { className: "text-sm text-amber-700", children: warning })] })), hint && !error && !warning && (jsxRuntimeExports.jsx("p", { className: "mt-2 text-xs text-gray-500", children: hint }))] }));
|
|
702
714
|
}
|
|
703
715
|
|
|
704
716
|
module.exports = NumericUpPicker;
|
package/dist/index.esm.js
CHANGED
|
@@ -130,7 +130,7 @@ function requireReactJsxRuntime_development () {
|
|
|
130
130
|
testStringCoercion(value);
|
|
131
131
|
var JSCompiler_inline_result = !1;
|
|
132
132
|
} catch (e) {
|
|
133
|
-
JSCompiler_inline_result =
|
|
133
|
+
JSCompiler_inline_result = !0;
|
|
134
134
|
}
|
|
135
135
|
if (JSCompiler_inline_result) {
|
|
136
136
|
JSCompiler_inline_result = console;
|
|
@@ -174,29 +174,29 @@ function requireReactJsxRuntime_development () {
|
|
|
174
174
|
function hasValidKey(config) {
|
|
175
175
|
if (hasOwnProperty.call(config, "key")) {
|
|
176
176
|
var getter = Object.getOwnPropertyDescriptor(config, "key").get;
|
|
177
|
-
if (getter && getter.isReactWarning) return
|
|
177
|
+
if (getter && getter.isReactWarning) return !1;
|
|
178
178
|
}
|
|
179
179
|
return void 0 !== config.key;
|
|
180
180
|
}
|
|
181
181
|
function defineKeyPropWarningGetter(props, displayName) {
|
|
182
182
|
function warnAboutAccessingKey() {
|
|
183
183
|
specialPropKeyWarningShown ||
|
|
184
|
-
((specialPropKeyWarningShown =
|
|
184
|
+
((specialPropKeyWarningShown = !0),
|
|
185
185
|
console.error(
|
|
186
186
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
187
187
|
displayName
|
|
188
188
|
));
|
|
189
189
|
}
|
|
190
|
-
warnAboutAccessingKey.isReactWarning =
|
|
190
|
+
warnAboutAccessingKey.isReactWarning = !0;
|
|
191
191
|
Object.defineProperty(props, "key", {
|
|
192
192
|
get: warnAboutAccessingKey,
|
|
193
|
-
configurable:
|
|
193
|
+
configurable: !0
|
|
194
194
|
});
|
|
195
195
|
}
|
|
196
196
|
function elementRefGetterWithDeprecationWarning() {
|
|
197
197
|
var componentName = getComponentNameFromType(this.type);
|
|
198
198
|
didWarnAboutElementRef[componentName] ||
|
|
199
|
-
((didWarnAboutElementRef[componentName] =
|
|
199
|
+
((didWarnAboutElementRef[componentName] = !0),
|
|
200
200
|
console.error(
|
|
201
201
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
202
202
|
));
|
|
@@ -214,33 +214,33 @@ function requireReactJsxRuntime_development () {
|
|
|
214
214
|
};
|
|
215
215
|
null !== (void 0 !== refProp ? refProp : null)
|
|
216
216
|
? Object.defineProperty(type, "ref", {
|
|
217
|
-
enumerable:
|
|
217
|
+
enumerable: !1,
|
|
218
218
|
get: elementRefGetterWithDeprecationWarning
|
|
219
219
|
})
|
|
220
|
-
: Object.defineProperty(type, "ref", { enumerable:
|
|
220
|
+
: Object.defineProperty(type, "ref", { enumerable: !1, value: null });
|
|
221
221
|
type._store = {};
|
|
222
222
|
Object.defineProperty(type._store, "validated", {
|
|
223
|
-
configurable:
|
|
224
|
-
enumerable:
|
|
225
|
-
writable:
|
|
223
|
+
configurable: !1,
|
|
224
|
+
enumerable: !1,
|
|
225
|
+
writable: !0,
|
|
226
226
|
value: 0
|
|
227
227
|
});
|
|
228
228
|
Object.defineProperty(type, "_debugInfo", {
|
|
229
|
-
configurable:
|
|
230
|
-
enumerable:
|
|
231
|
-
writable:
|
|
229
|
+
configurable: !1,
|
|
230
|
+
enumerable: !1,
|
|
231
|
+
writable: !0,
|
|
232
232
|
value: null
|
|
233
233
|
});
|
|
234
234
|
Object.defineProperty(type, "_debugStack", {
|
|
235
|
-
configurable:
|
|
236
|
-
enumerable:
|
|
237
|
-
writable:
|
|
235
|
+
configurable: !1,
|
|
236
|
+
enumerable: !1,
|
|
237
|
+
writable: !0,
|
|
238
238
|
value: debugStack
|
|
239
239
|
});
|
|
240
240
|
Object.defineProperty(type, "_debugTask", {
|
|
241
|
-
configurable:
|
|
242
|
-
enumerable:
|
|
243
|
-
writable:
|
|
241
|
+
configurable: !1,
|
|
242
|
+
enumerable: !1,
|
|
243
|
+
writable: !0,
|
|
244
244
|
value: debugTask
|
|
245
245
|
});
|
|
246
246
|
Object.freeze && (Object.freeze(type.props), Object.freeze(type));
|
|
@@ -289,7 +289,7 @@ function requireReactJsxRuntime_development () {
|
|
|
289
289
|
keys,
|
|
290
290
|
children
|
|
291
291
|
),
|
|
292
|
-
(didWarnAboutKeySpread[children + isStaticChildren] =
|
|
292
|
+
(didWarnAboutKeySpread[children + isStaticChildren] = !0));
|
|
293
293
|
}
|
|
294
294
|
children = null;
|
|
295
295
|
void 0 !== maybeKey &&
|
|
@@ -381,7 +381,7 @@ function requireReactJsxRuntime_development () {
|
|
|
381
381
|
type,
|
|
382
382
|
config,
|
|
383
383
|
maybeKey,
|
|
384
|
-
|
|
384
|
+
!1,
|
|
385
385
|
trackActualOwner
|
|
386
386
|
? Error("react-stack-top-frame")
|
|
387
387
|
: unknownOwnerDebugStack,
|
|
@@ -395,7 +395,7 @@ function requireReactJsxRuntime_development () {
|
|
|
395
395
|
type,
|
|
396
396
|
config,
|
|
397
397
|
maybeKey,
|
|
398
|
-
|
|
398
|
+
!0,
|
|
399
399
|
trackActualOwner
|
|
400
400
|
? Error("react-stack-top-frame")
|
|
401
401
|
: unknownOwnerDebugStack,
|
|
@@ -431,7 +431,7 @@ var r,s={exports:{}},o={};var t,l,n={};
|
|
|
431
431
|
*
|
|
432
432
|
* This source code is licensed under the MIT license found in the
|
|
433
433
|
* LICENSE file in the root directory of this source tree.
|
|
434
|
-
*/function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===$?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case x:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case k:return "Suspense";case y:return "SuspenseList";case C:return "Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case u:return "Portal";case g:return e.displayName||"Context";case f:return (e._context.displayName||"Context")+".Consumer";case j:var s=e.render;return (e=e.displayName)||(e=""!==(e=s.displayName||s.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(s=e.displayName||null)?s:r(e.type)||"Memo";case N:s=e._payload,e=e._init;try{return r(e(s))}catch(e){}}return null}function s(e){return ""+e}function o(e){try{s(e);var r=!1;}catch(e){r
|
|
434
|
+
*/function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===$?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case x:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case k:return "Suspense";case y:return "SuspenseList";case C:return "Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case u:return "Portal";case g:return e.displayName||"Context";case f:return (e._context.displayName||"Context")+".Consumer";case j:var s=e.render;return (e=e.displayName)||(e=""!==(e=s.displayName||s.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(s=e.displayName||null)?s:r(e.type)||"Memo";case N:s=e._payload,e=e._init;try{return r(e(s))}catch(e){}}return null}function s(e){return ""+e}function o(e){try{s(e);var r=!1;}catch(e){r=!0;}if(r){var o=(r=console).error,t="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),s(e)}}function t(e){if(e===x)return "<>";if("object"==typeof e&&null!==e&&e.$$typeof===N)return "<...>";try{var s=r(e);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function l(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return W[e]||(W[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function i(e,s,t,l,n,i){var h,m=s.children;if(void 0!==m)if(l)if(M(m)){for(l=0;l<m.length;l++)c(m[l]);Object.freeze&&Object.freeze(m);}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(m);if(z.call(s,"key")){m=r(e);var u=Object.keys(s).filter(function(e){return "key"!==e});l=0<u.length?"{key: someKey, "+u.join(": ..., ")+": ...}":"{key: someKey}",V[m+l]||(u=0<u.length?"{"+u.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',l,m,u,m),V[m+l]=!0);}if(m=null,void 0!==t&&(o(t),m=""+t),function(e){if(z.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return !1}return void 0!==e.key}(s)&&(o(s.key),m=""+s.key),"key"in s)for(var x in t={},s)"key"!==x&&(t[x]=s[x]);else t=s;return m&&function(e,r){function s(){d||(d=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r));}s.isReactWarning=!0,Object.defineProperty(e,"key",{get:s,configurable:!0});}(t,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,s,o,t,l){var n=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==n?n:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:a}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:t}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,t,null===(h=b.A)?null:h.getOwner(),n,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===N&&("fulfilled"===e._payload.status?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1));}function h(e){return "object"==typeof e&&null!==e&&e.$$typeof===w}var d,m=require$$0,w=Symbol.for("react.transitional.element"),u=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),f=Symbol.for("react.consumer"),g=Symbol.for("react.context"),j=Symbol.for("react.forward_ref"),k=Symbol.for("react.suspense"),y=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),N=Symbol.for("react.lazy"),C=Symbol.for("react.activity"),$=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,z=Object.prototype.hasOwnProperty,M=Array.isArray,B=console.createTask?console.createTask:function(){return null},W={},_=(m={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(m,l)(),H=B(t(l)),V={};n.Fragment=x,n.jsx=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,!1,o?Error("react-stack-top-frame"):_,o?B(t(e)):H)},n.jsxs=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,!0,o?Error("react-stack-top-frame"):_,o?B(t(e)):H)};}()),n}var i=(l||(l=1,"production"===process.env.NODE_ENV?s.exports=function(){if(r)return o;r=1;var e=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function t(r,s,o){var t=null;if(void 0!==o&&(t=""+o),void 0!==s.key&&(t=""+s.key),"key"in s)for(var l in o={},s)"key"!==l&&(o[l]=s[l]);else o=s;return s=o.ref,{$$typeof:e,type:r,key:t,ref:void 0!==s?s:null,props:o}}return o.Fragment=s,o.jsx=t,o.jsxs=t,o}():s.exports=a()),s.exports);function m({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:s,"aria-label":"Check",children:i.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}function g({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 18L18 6M6 6l12 12"})})}function R({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M5 12h14"})})}function U({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:s,"aria-label":"Plus",children:i.jsx("path",{d:"M12 4v16m8-8H4"})})}
|
|
435
435
|
|
|
436
436
|
// CSS to hide native number input spinners
|
|
437
437
|
const hideSpinnersStyle = `
|
|
@@ -444,26 +444,33 @@ const hideSpinnersStyle = `
|
|
|
444
444
|
-moz-appearance: textfield;
|
|
445
445
|
}
|
|
446
446
|
`;
|
|
447
|
-
function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder, min, max, step = 0.01, error, hint, warning, disabled = false, className =
|
|
447
|
+
function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder, min, max, step = 0.01, error, hint, warning, disabled = false, className = "", required = false, useMinAsDefault = false, alwaysNegative = false, integerOnly = false, showSign = false, defaultToZero = false, clearable = false, onClear, }) {
|
|
448
448
|
// Track if the field has been touched (user has focused on it)
|
|
449
449
|
const [hasBeenTouched, setHasBeenTouched] = useState(false);
|
|
450
|
-
const numValue = typeof value ===
|
|
450
|
+
const numValue = typeof value === "string" ? parseFloat(value) || 0 : value;
|
|
451
451
|
// Format display value with sign if showSign is true
|
|
452
452
|
const displayValue = useMemo(() => {
|
|
453
|
-
if (!showSign ||
|
|
454
|
-
|
|
453
|
+
if (!showSign ||
|
|
454
|
+
value === "" ||
|
|
455
|
+
value === "-" ||
|
|
456
|
+
value === null ||
|
|
457
|
+
value === undefined)
|
|
458
|
+
return value || "";
|
|
455
459
|
const strValue = value.toString();
|
|
456
460
|
const numVal = parseFloat(strValue);
|
|
457
461
|
if (isNaN(numVal))
|
|
458
462
|
return value;
|
|
459
|
-
if (numVal > 0 && !strValue.startsWith(
|
|
463
|
+
if (numVal > 0 && !strValue.startsWith("+")) {
|
|
460
464
|
return `+${strValue}`;
|
|
461
465
|
}
|
|
462
466
|
return value;
|
|
463
467
|
}, [value, showSign]);
|
|
464
468
|
const handleIncrement = () => {
|
|
465
469
|
// If value is empty or invalid, start from 0 if defaultToZero, otherwise from min (or 0 if no min)
|
|
466
|
-
if (value ===
|
|
470
|
+
if (value === "" ||
|
|
471
|
+
value === "-" ||
|
|
472
|
+
value === null ||
|
|
473
|
+
value === undefined) {
|
|
467
474
|
const startValue = defaultToZero ? 0 : min !== undefined ? min : 0;
|
|
468
475
|
if (integerOnly) {
|
|
469
476
|
onChange(Math.round(startValue).toString());
|
|
@@ -481,13 +488,18 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
481
488
|
else {
|
|
482
489
|
const formattedValue = newValue.toFixed(2);
|
|
483
490
|
// If alwaysNegative, ensure the value has a negative sign
|
|
484
|
-
onChange(alwaysNegative && newValue > 0
|
|
491
|
+
onChange(alwaysNegative && newValue > 0
|
|
492
|
+
? `-${formattedValue}`
|
|
493
|
+
: formattedValue);
|
|
485
494
|
}
|
|
486
495
|
}
|
|
487
496
|
};
|
|
488
497
|
const handleDecrement = () => {
|
|
489
498
|
// If value is empty or invalid, start from 0 if defaultToZero, otherwise from max (or 0 if no max)
|
|
490
|
-
if (value ===
|
|
499
|
+
if (value === "" ||
|
|
500
|
+
value === "-" ||
|
|
501
|
+
value === null ||
|
|
502
|
+
value === undefined) {
|
|
491
503
|
const startValue = defaultToZero ? 0 : max !== undefined ? max : 0;
|
|
492
504
|
if (integerOnly) {
|
|
493
505
|
onChange(Math.round(startValue).toString());
|
|
@@ -514,11 +526,11 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
514
526
|
};
|
|
515
527
|
const handleKeyDown = (e) => {
|
|
516
528
|
// Handle arrow up/down keys for incrementing/decrementing
|
|
517
|
-
if (e.key ===
|
|
529
|
+
if (e.key === "ArrowUp") {
|
|
518
530
|
e.preventDefault(); // Prevent cursor movement
|
|
519
531
|
handleIncrement();
|
|
520
532
|
}
|
|
521
|
-
else if (e.key ===
|
|
533
|
+
else if (e.key === "ArrowDown") {
|
|
522
534
|
e.preventDefault(); // Prevent cursor movement
|
|
523
535
|
handleDecrement();
|
|
524
536
|
}
|
|
@@ -534,22 +546,22 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
534
546
|
let inputValue = e.target.value;
|
|
535
547
|
// For showSign, remove the plus sign before processing
|
|
536
548
|
if (showSign) {
|
|
537
|
-
inputValue = inputValue.replace(/^\+/,
|
|
549
|
+
inputValue = inputValue.replace(/^\+/, "");
|
|
538
550
|
}
|
|
539
551
|
// For alwaysNegative fields, ensure value always starts with minus sign
|
|
540
552
|
if (alwaysNegative) {
|
|
541
553
|
// Remove any existing minus signs
|
|
542
|
-
inputValue = inputValue.replace(/-/g,
|
|
554
|
+
inputValue = inputValue.replace(/-/g, "");
|
|
543
555
|
// Allow empty input
|
|
544
|
-
if (inputValue ===
|
|
545
|
-
onChange(
|
|
556
|
+
if (inputValue === "") {
|
|
557
|
+
onChange("-");
|
|
546
558
|
return;
|
|
547
559
|
}
|
|
548
560
|
// Add minus sign at the beginning
|
|
549
561
|
inputValue = `-${inputValue}`;
|
|
550
562
|
}
|
|
551
563
|
// Allow empty input (user deleted content)
|
|
552
|
-
if (inputValue ===
|
|
564
|
+
if (inputValue === "" || inputValue === "-") {
|
|
553
565
|
onChange(inputValue);
|
|
554
566
|
return;
|
|
555
567
|
}
|
|
@@ -557,16 +569,16 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
557
569
|
onChange(inputValue);
|
|
558
570
|
};
|
|
559
571
|
const handleClear = () => {
|
|
560
|
-
onChange(
|
|
572
|
+
onChange("");
|
|
561
573
|
onClear?.();
|
|
562
574
|
};
|
|
563
575
|
const handleBlurWithValidation = () => {
|
|
564
576
|
const inputValue = value.toString();
|
|
565
577
|
// If empty, handle based on required and useMinAsDefault flags
|
|
566
|
-
if (inputValue ===
|
|
578
|
+
if (inputValue === "" || inputValue === "-") {
|
|
567
579
|
// For optional fields (!required), allow empty values
|
|
568
580
|
if (!required) {
|
|
569
|
-
onChange(
|
|
581
|
+
onChange("");
|
|
570
582
|
onBlur?.();
|
|
571
583
|
return;
|
|
572
584
|
}
|
|
@@ -592,17 +604,17 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
592
604
|
}
|
|
593
605
|
else if (!hasBeenTouched) {
|
|
594
606
|
// If never touched, keep it empty
|
|
595
|
-
onChange(
|
|
607
|
+
onChange("");
|
|
596
608
|
}
|
|
597
609
|
else {
|
|
598
|
-
onChange(integerOnly ?
|
|
610
|
+
onChange(integerOnly ? "0" : alwaysNegative ? "-0.00" : "0.00");
|
|
599
611
|
}
|
|
600
612
|
onBlur?.();
|
|
601
613
|
return;
|
|
602
614
|
}
|
|
603
615
|
// Parse the input value (remove negative sign if present for alwaysNegative fields)
|
|
604
616
|
let numericValue = alwaysNegative
|
|
605
|
-
? parseFloat(inputValue.replace(/^-/,
|
|
617
|
+
? parseFloat(inputValue.replace(/^-/, ""))
|
|
606
618
|
: parseFloat(inputValue);
|
|
607
619
|
// If not a valid number, reset to min or 0
|
|
608
620
|
if (isNaN(numericValue)) {
|
|
@@ -625,7 +637,7 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
625
637
|
}
|
|
626
638
|
}
|
|
627
639
|
else {
|
|
628
|
-
onChange(integerOnly ?
|
|
640
|
+
onChange(integerOnly ? "0" : alwaysNegative ? "-0.00" : "0.00");
|
|
629
641
|
}
|
|
630
642
|
onBlur?.();
|
|
631
643
|
return;
|
|
@@ -634,7 +646,7 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
634
646
|
if (alwaysNegative) {
|
|
635
647
|
// Clamp the absolute value within the absolute range
|
|
636
648
|
const absMin = Math.abs(max ?? -0.25); // max is the least negative (closest to 0)
|
|
637
|
-
const absMax = Math.abs(min ?? -10); // min is the most negative (farthest from 0)
|
|
649
|
+
const absMax = Math.abs(min ?? -10.0); // min is the most negative (farthest from 0)
|
|
638
650
|
if (numericValue < absMin) {
|
|
639
651
|
numericValue = absMin;
|
|
640
652
|
}
|
|
@@ -670,7 +682,7 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
670
682
|
};
|
|
671
683
|
// Disable buttons only if value is not empty and at min/max
|
|
672
684
|
// When value is empty, allow both buttons (they will set to min/max)
|
|
673
|
-
const isEmpty = value ===
|
|
685
|
+
const isEmpty = value === "" || value === "-" || value === null || value === undefined;
|
|
674
686
|
// For alwaysNegative fields, we compare absolute values
|
|
675
687
|
const isAtMin = !isEmpty &&
|
|
676
688
|
(alwaysNegative
|
|
@@ -680,23 +692,23 @@ function NumericUpPicker({ label, value, onChange, onBlur, onFocus, placeholder,
|
|
|
680
692
|
(alwaysNegative
|
|
681
693
|
? max !== undefined && Math.abs(numValue) <= Math.abs(max)
|
|
682
694
|
: max !== undefined && numValue >= max);
|
|
683
|
-
return (jsxRuntimeExports.jsxs("div", { className: className, children: [jsxRuntimeExports.jsx("style", { children: hideSpinnersStyle }), label && (jsxRuntimeExports.jsxs("label", { className: `block text-sm font-medium mb-2 ${error ?
|
|
684
|
-
?
|
|
695
|
+
return (jsxRuntimeExports.jsxs("div", { className: className, children: [jsxRuntimeExports.jsx("style", { children: hideSpinnersStyle }), label && (jsxRuntimeExports.jsxs("label", { className: `block text-sm font-medium mb-2 ${error ? "text-red-700" : "text-gray-700"}`, children: [label, required && jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-between h-12 rounded-lg border-2 transition-all ${error
|
|
696
|
+
? "border-red-500 bg-red-50"
|
|
685
697
|
: disabled
|
|
686
|
-
?
|
|
687
|
-
:
|
|
688
|
-
?
|
|
698
|
+
? "border-gray-300 bg-gray-100 opacity-50 cursor-not-allowed"
|
|
699
|
+
: "border-gray-300 bg-gray-50"}`, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: handleDecrement, disabled: disabled || isAtMin, className: `flex-shrink-0 w-12 h-full flex items-center justify-center border-r border-gray-300 transition-all ${error
|
|
700
|
+
? "text-red-500"
|
|
689
701
|
: disabled || isAtMin
|
|
690
|
-
?
|
|
691
|
-
:
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
?
|
|
702
|
+
? "opacity-40 cursor-not-allowed text-gray-400"
|
|
703
|
+
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Decrease value", "aria-label": "Decrease", children: jsxRuntimeExports.jsx(R, { size: "md" }) }), jsxRuntimeExports.jsx("div", { className: "flex-1 flex items-center justify-center", children: jsxRuntimeExports.jsx("input", { type: "text", step: step, min: min, max: max, value: displayValue, onChange: handleDirectInput, onBlur: handleBlurWithValidation, onFocus: handleFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, className: `text-center bg-transparent text-lg font-semibold placeholder-gray-400 focus:outline-none border-none ${error ? "text-red-700" : "text-gray-900"} w-full`, style: {
|
|
704
|
+
WebkitAppearance: "none",
|
|
705
|
+
MozAppearance: "textfield",
|
|
706
|
+
appearance: "none",
|
|
707
|
+
} }) }), clearable && !isEmpty && !disabled && (jsxRuntimeExports.jsx("button", { type: "button", onClick: handleClear, className: "flex-shrink-0 w-6 h-6 mr-2 flex items-center justify-center rounded-full transition-all hover:bg-gray-200 active:bg-gray-300 text-gray-500 hover:text-gray-700", title: "Clear value", "aria-label": "Clear", children: jsxRuntimeExports.jsx(g, { size: "sm" }) })), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleIncrement, disabled: disabled || isAtMax, className: `flex-shrink-0 w-12 h-full flex items-center justify-center border-l border-gray-300 transition-all ${error
|
|
708
|
+
? "text-red-500"
|
|
697
709
|
: disabled || isAtMax
|
|
698
|
-
?
|
|
699
|
-
:
|
|
710
|
+
? "opacity-40 cursor-not-allowed text-gray-400"
|
|
711
|
+
: "hover:bg-gray-100 active:bg-gray-200 text-gray-600"}`, title: "Increase value", "aria-label": "Increase", children: jsxRuntimeExports.jsx(U, { size: "md" }) })] }), error && (jsxRuntimeExports.jsxs("div", { className: "mt-2 flex items-start gap-1.5", children: [jsxRuntimeExports.jsx(m, { size: "sm", className: "text-red-500 flex-shrink-0 mt-0.5" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-red-600 font-medium", children: error })] })), warning && !error && (jsxRuntimeExports.jsxs("div", { className: "mt-2 flex items-start gap-1.5", children: [jsxRuntimeExports.jsx("div", { className: "w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5 flex items-center justify-center", children: jsxRuntimeExports.jsx("span", { className: "text-xs font-bold", children: "!" }) }), jsxRuntimeExports.jsx("p", { className: "text-sm text-amber-700", children: warning })] })), hint && !error && !warning && (jsxRuntimeExports.jsx("p", { className: "mt-2 text-xs text-gray-500", children: hint }))] }));
|
|
700
712
|
}
|
|
701
713
|
|
|
702
714
|
export { NumericUpPicker as default };
|