@sebgroup/green-react 1.8.0 → 1.8.1

package/index.js

@@ -3429,6 +3429,7 @@ function Slider({
 }) {
   const [background, setBackground] = React.useState();
   const [sliderValue, setSliderValue] = React.useState(value !== null && value !== void 0 ? value : defaultValue);
+  const [inputFieldValue, setInputFieldValue] = React.useState(sliderValue + '');
   React.useLayoutEffect(() => {
     if (disabled) {
       setBackground(sliderColors.disabled);
@@ -3438,60 +3439,60 @@ function Slider({
     if (sliderValue !== undefined) percent = (sliderValue - min) / (max - min) * 100;
     setBackground(getSliderTrackBackground(percent));
   }, [disabled, sliderValue]);
-  const clamp = origValue => {
-    if (!enableClamping || origValue === undefined) return origValue;
-    let newValue = origValue;
-    let hasClamped = false;
-    if (newValue < min) {
-      hasClamped = true;
-      newValue = min;
-    }
-    if (newValue > max) {
-      hasClamped = true;
-      newValue = max;
-    }
-    if (hasClamped && onClamp) onClamp(origValue);
-    return newValue;
+  const clamp = unclamped => {
+    if (!enableClamping) return Number(unclamped);
+    if (typeof unclamped === 'string') unclamped = Number(unclamped);
+    if (!unclamped || Number.isNaN(unclamped)) return min;
+    const clamped = Math.min(Math.max(min, unclamped), max);
+    if (clamped !== unclamped && onClamp) onClamp(unclamped);
+    return clamped;
   };
-  const setNumValueOrEmpty = value => {
-    let numValue = Number(value);
-    if (Number.isNaN(numValue) || value === '') numValue = undefined;
-    setSliderValue(clamp(numValue));
-    return numValue;
+  const setNumValue = value => {
+    if (value === '') value = min;
+    const unclamped = Number(value);
+    const clamped = clamp(unclamped);
+    setSliderValue(clamped);
+    return [unclamped, clamped];
   };
   React.useEffect(() => {
-    setNumValueOrEmpty(value);
+    setNumValue(value);
   }, [value]);
-  const handleChange = e => {
-    const {
-      value
-    } = e.target;
-    const newVal = setNumValueOrEmpty(value);
-    if (onChange) onChange(newVal);
+  const handleChange = value => {
+    const [unclamped, clamped] = setNumValue(value);
+    setInputFieldValue(unclamped + '');
+    if (onChange) onChange(clamped);
+  };
+  const handleInputFieldChange = (value, shouldClamp = false) => {
+    handleChange(value);
+    if (value === '') setInputFieldValue('');else if (shouldClamp) setInputFieldValue(clamp(value) + '');
   };
   return jsxs(Fragment, {
-    children: [label && jsxs("div", Object.assign({
+    children: [jsxs("div", Object.assign({
       className: "gds-slider-label-container"
     }, {
-      children: [jsxs("div", {
-        children: [jsx("label", Object.assign({
-          htmlFor: name
-        }, {
-          children: label
-        })), instruction && jsx("p", {
-          children: instruction
-        })]
+      children: [jsx("div", {
+        children: label && jsxs(Fragment, {
+          children: [jsx("label", Object.assign({
+            htmlFor: name
+          }, {
+            children: label
+          })), instruction && jsx("p", {
+            children: instruction
+          })]
+        })
       }), hasTextbox && jsx(InputWrapper, Object.assign({
         unitLabel: unitLabel
       }, {
         children: jsx("input", {
           type: "number",
-          value: sliderValue !== null && sliderValue !== void 0 ? sliderValue : '',
+          value: inputFieldValue,
           id: `${name}-textbox`,
           name: name,
           className: errorMessage ? 'is-invalid' : '',
           disabled: disabled,
-          onChange: handleChange,
+          onChange: e => handleInputFieldChange(e.currentTarget.value),
+          onKeyDown: e => e.key === 'Enter' && handleInputFieldChange(e.currentTarget.value, true),
+          onBlur: e => handleInputFieldChange(e.currentTarget.value, true),
           min: min,
           max: max,
           onInvalid: e => {
@@ -3508,7 +3509,7 @@ function Slider({
       max: max,
       step: step,
       disabled: disabled,
-      onChange: handleChange,
+      onChange: e => handleChange(e.currentTarget.value),
       style: {
         background
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"

package/src/types/props/index.d.ts

@@ -25,7 +25,7 @@ export interface SliderProps {
     hasTextbox?: boolean;
     unitLabel?: string;
     disabled?: boolean;
-    onChange?: (value: number | undefined) => void;
+    onChange?: (value: number) => void;
     enableClamping?: boolean;
     onClamp?: (value: number) => void;
     /**