@sledge-app/react-instant-search 1.0.116 → 1.0.118

package/dist/sledge-react-instant-search.js

@@ -663,6 +663,18 @@ const Checkbox = ({ id, name, value, required, label, checked, labelStyle = {},
   ] });
 };
 const Slider$1 = "";
+const inputRangeFormatter = (value) => {
+  var _a, _b;
+  const cleanValue = (_b = (_a = String(value)) == null ? void 0 : _a.replace) == null ? void 0 : _b.call(_a, /[^0-9.]/g, "");
+  const numValue = parseFloat(cleanValue);
+  if (isNaN(numValue))
+    return value;
+  if (Number.isInteger(numValue))
+    return numValue.toString();
+  const [integerPart, decimalPart] = cleanValue.split(".");
+  const formattedDecimal = (decimalPart || "").slice(0, 2).padEnd(2, "0");
+  return `${integerPart}.${formattedDecimal}`;
+};
 const Slider = (props) => {
   var _a, _b, _c;
   const {
@@ -682,8 +694,8 @@ const Slider = (props) => {
     minMaxClassName = "",
     minMaxTextClassName = ""
   } = props;
-  const [inputRangeMin, setInputRangeMin] = React__default.useState(value == null ? void 0 : value[0]);
-  const [inputRangeMax, setInputRangeMax] = React__default.useState((value == null ? void 0 : value[1]) || (value == null ? void 0 : value[0]));
+  const [inputRangeMin, setInputRangeMin] = React__default.useState(inputRangeFormatter(value == null ? void 0 : value[0]));
+  const [inputRangeMax, setInputRangeMax] = React__default.useState(inputRangeFormatter((value == null ? void 0 : value[1]) || (value == null ? void 0 : value[0])));
   const delayInputRangeRef = React__default.useRef(null);
   let content = (textValue == null ? void 0 : textValue.length) ? textValue : value;
   const hasMaxValue = (value == null ? void 0 : value.length) && (value == null ? void 0 : value[1]);
@@ -693,25 +705,51 @@ const Slider = (props) => {
   const isTypeIncludeInputRange = (_c = String(type)) == null ? void 0 : _c.includes("input_range");
   const handleChangeInputRange = ({ event, type: type2 }) => {
     var _a2;
-    const valueInput = (_a2 = event == null ? void 0 : event.target) == null ? void 0 : _a2.value;
-    const valueCommit = type2 === "min" ? [valueInput || 0, value == null ? void 0 : value[1]] : [value == null ? void 0 : value[0], valueInput || 0];
+    let valueInput = (_a2 = event == null ? void 0 : event.target) == null ? void 0 : _a2.value;
+    if (!Number(valueInput) && Number(valueInput) !== 0)
+      return;
+    let valueCommit = type2 === "min" ? [valueInput || 0, (value == null ? void 0 : value[1]) || (value == null ? void 0 : value[0])] : [value == null ? void 0 : value[0], valueInput || 0];
     if (type2 === "min") {
       setInputRangeMin(valueInput);
     } else {
       setInputRangeMax(valueInput);
     }
-    setValueChange == null ? void 0 : setValueChange(valueCommit);
     if (delayInputRangeRef.current) {
       clearTimeout(delayInputRangeRef.current);
     }
     delayInputRangeRef.current = setTimeout(() => {
-      setValueCommit == null ? void 0 : setValueCommit(valueCommit);
+      const lastValueMin = valueCommit == null ? void 0 : valueCommit[0];
+      const lastValueMax = (valueCommit == null ? void 0 : valueCommit[1]) || lastValueMin;
+      const valueInputRange = inputRangeFormatter(type2 === "min" ? lastValueMax : lastValueMin);
+      const valueCommitFiltered = [valueInputRange, valueInputRange];
+      valueInput = inputRangeFormatter(valueInput);
+      valueCommit = [inputRangeFormatter(valueCommit[0]), inputRangeFormatter(valueCommit[1])];
+      let filterValueMinOrMax = false;
+      if (type2 === "min") {
+        filterValueMinOrMax = Number(valueInput) > Number(lastValueMax);
+      } else {
+        filterValueMinOrMax = Number(valueInput) < Number(lastValueMin);
+      }
+      if (filterValueMinOrMax) {
+        setInputRangeMin(valueInputRange);
+        setInputRangeMax(valueInputRange);
+        setValueChange == null ? void 0 : setValueChange(valueCommitFiltered);
+        setValueCommit == null ? void 0 : setValueCommit(valueCommitFiltered);
+      } else {
+        if (type2 === "min") {
+          setInputRangeMin(valueInput);
+        } else {
+          setInputRangeMax(valueInput);
+        }
+        setValueChange == null ? void 0 : setValueChange(valueCommit);
+        setValueCommit == null ? void 0 : setValueCommit(valueCommit);
+      }
     }, 500);
   };
   useEffectOnChange(() => {
     if (isTypeIncludeInputRange && !(valueFilterSliderChange == null ? void 0 : valueFilterSliderChange.length)) {
-      setInputRangeMin(value == null ? void 0 : value[0]);
-      setInputRangeMax((value == null ? void 0 : value[1]) || (value == null ? void 0 : value[0]));
+      setInputRangeMin(inputRangeFormatter(value == null ? void 0 : value[0]));
+      setInputRangeMax(inputRangeFormatter((value == null ? void 0 : value[1]) || (value == null ? void 0 : value[0])));
     }
   }, [valueFilterSliderChange]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__slider-wrapper ${wrapperClassName}`, "data-slider-type": type, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FormWrapper, { children: [
@@ -755,7 +793,13 @@ const Slider = (props) => {
           step,
           "aria-label": "Volume",
           onValueCommit: (valueCommit) => setValueCommit == null ? void 0 : setValueCommit(valueCommit),
-          onValueChange: (valueChange) => setValueChange == null ? void 0 : setValueChange(valueChange),
+          onValueChange: (valueChange) => {
+            setValueChange == null ? void 0 : setValueChange(valueChange);
+            if (isTypeIncludeInputRange) {
+              setInputRangeMin(inputRangeFormatter(valueChange == null ? void 0 : valueChange[0]));
+              setInputRangeMax(inputRangeFormatter((valueChange == null ? void 0 : valueChange[1]) || (valueChange == null ? void 0 : valueChange[0])));
+            }
+          },
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$13921ac0cc260818, { className: "sledge__SliderTrack", children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$9a58ef0d7ad3278c, { className: "sledge__SliderRange" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5301,6 +5345,11 @@ const FacetComponent = (props) => {
     }
     let defaultValueMin = (valueFilterSliderChange == null ? void 0 : valueFilterSliderChange[0]) || (items == null ? void 0 : items.min);
     let defaultValueMax = (valueFilterSliderChange == null ? void 0 : valueFilterSliderChange[1]) || (items == null ? void 0 : items.max);
+    const isTypeSliderWithInputRange = display.toLowerCase() === "slider_with_input_range";
+    if (isTypeSliderWithInputRange) {
+      defaultValueMin = (items == null ? void 0 : items.min) && Number(defaultValueMin) < Number(items == null ? void 0 : items.min) ? items == null ? void 0 : items.min : defaultValueMin;
+      defaultValueMax = (items == null ? void 0 : items.max) && Number(defaultValueMax) > Number(items == null ? void 0 : items.max) ? items == null ? void 0 : items.max : defaultValueMax;
+    }
     let contentDefaultValueMin = isPriceValue ? shopifyFormatMoney(defaultValueMin * 100, money_format) : isSalePercent ? `${defaultValueMin}%` : defaultValueMin;
     let contentDefaultValueMax = isPriceValue ? shopifyFormatMoney(defaultValueMax * 100, money_format) : isSalePercent ? `${defaultValueMax}%` : defaultValueMax;
     let contentFacetStatsMax = isPriceValue ? shopifyFormatMoney((items == null ? void 0 : items.max) * 100, money_format) : isSalePercent ? `${items == null ? void 0 : items.max}%` : items == null ? void 0 : items.max;