@sledge-app/react-instant-search 1.0.38 → 1.0.39

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

@@ -504,52 +504,38 @@ const Checkbox = ({ id, name, value, required, label, checked, labelStyle = {},
 };
 const Slider$1 = "";
 const Slider = (props) => {
-  const { defaultValue, min, max, step = 1, setValueCommit, setValueChange } = props;
-  const [valueSlider, setValueSlider] = React__default.useState(defaultValue);
-  const [hoverActiveMin, setHoverActiveMin] = React__default.useState(false);
-  const [hoverActiveMax, setHoverActiveMax] = React__default.useState(false);
-  React__default.useEffect(() => {
-    setValueSlider(defaultValue);
-  }, [defaultValue]);
+  const { value, min, max, step = 1, setValueCommit, setValueChange } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("form", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     $faa2e61a3361514f$export$be92b6f5f03c0fe9,
     {
       className: "sledge__SliderRoot",
-      defaultValue,
-      value: valueSlider,
+      value,
       ...typeof min !== "undefined" ? {
         min
       } : {},
       max,
       step,
       "aria-label": "Volume",
-      onValueCommit: (valueCommit) => {
-        setValueCommit == null ? void 0 : setValueCommit(valueCommit);
-      },
-      onValueChange: (valueChange) => {
-        setValueChange == null ? void 0 : setValueChange(valueChange);
-        setValueSlider(valueChange);
-      },
+      onValueCommit: (valueCommit) => setValueCommit == null ? void 0 : setValueCommit(valueCommit),
+      onValueChange: (valueChange) => setValueChange == null ? void 0 : setValueChange(valueChange),
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$13921ac0cc260818, { className: "sledge__SliderTrack", children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$9a58ef0d7ad3278c, { className: "sledge__SliderRange" }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Tooltip,
           {
-            content: valueSlider[0],
+            content: value[0],
             customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#43c6ac"/></svg>`,
             wrapTrigger: false,
-            forceOpen: hoverActiveMin,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb", onMouseEnter: () => setHoverActiveMin(true), onMouseLeave: () => setHoverActiveMin(false) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
           }
         ),
-        !defaultValue[1] ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        !value[1] ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
           Tooltip,
           {
-            content: valueSlider[1],
+            content: value[1],
             customArrow: `<svg width="19" height="5" viewBox="0 0 19 5" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 4.99998C9 9.48298e-05 16.4996 1.99678e-05 18.4999 0L9 2.2985e-06L0.5 2.04891e-06C9 2.2985e-06 9 4.99998 9 4.99998Z" fill="#43c6ac"/></svg>`,
             wrapTrigger: false,
-            forceOpen: hoverActiveMax,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb", onMouseEnter: () => setHoverActiveMax(true), onMouseLeave: () => setHoverActiveMax(false) })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx($faa2e61a3361514f$export$6521433ed15a34db, { className: "sledge__SliderThumb" })
           }
         )
       ]
@@ -2955,7 +2941,7 @@ const ArticleGrid = ({ className = "", data, cards: CardsComponent, isComponentJ
   }) }) });
 };
 const Tooltip$1 = "";
-const Tooltip = ({ children, content, withArrow = true, customArrow = "", sideOffset = 5, alignOffset = 0, wrapTrigger = true, forceOpen }) => {
+const Tooltip = ({ children, content, withArrow = true, customArrow = "", sideOffset = 5, alignOffset = 0, wrapTrigger = true }) => {
   const [open, setOpen] = React__default.useState(false);
   React__default.useEffect(() => {
     var _a;
@@ -2965,22 +2951,13 @@ const Tooltip = ({ children, content, withArrow = true, customArrow = "", sideOf
       arrowElement.innerHTML = customArrow;
     }
   }, [open]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$2881499e37b75b9a, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    $a093c7e1ec25a057$export$be92b6f5f03c0fe9,
-    {
-      onOpenChange: setOpen,
-      ...forceOpen ? {
-        open: forceOpen
-      } : {},
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$41fb9f06171c75f4, { asChild: true, children: wrapTrigger ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children }) : children }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs($a093c7e1ec25a057$export$7c6e2c02157bb7d2, { className: "sledge__tooltip-content", sideOffset, alignOffset, children: [
-          content,
-          withArrow ? /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$21b07c8f274aebd5, { className: "sledge__tooltip-arrow" }) : null
-        ] }) })
-      ]
-    }
-  ) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$2881499e37b75b9a, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($a093c7e1ec25a057$export$be92b6f5f03c0fe9, { onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$41fb9f06171c75f4, { asChild: true, children: wrapTrigger ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children }) : children }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$602eac185826482c, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs($a093c7e1ec25a057$export$7c6e2c02157bb7d2, { className: "sledge__tooltip-content", sideOffset, alignOffset, children: [
+      content,
+      withArrow ? /* @__PURE__ */ jsxRuntimeExports.jsx($a093c7e1ec25a057$export$21b07c8f274aebd5, { className: "sledge__tooltip-arrow" }) : null
+    ] }) })
+  ] }) });
 };
 const ScrollArea$1 = "";
 const ScrollArea = ({ children, isLoading = false, className = "" }) => {
@@ -4853,11 +4830,14 @@ const ResultProduct = (props) => {
       ) }) })
     ] }, index);
   };
-  const handleConditionUpdateFacetDistribution = (value) => {
+  const handleConditionNotUpdateFacetDistribution = (value) => {
+    let arrPriorityFacet = ["vendor"];
     let isHasFacetSelected = arrFacetSelected == null ? void 0 : arrFacetSelected.length;
-    let isOnFacetSelectedOne = arrFacetSelected.includes(value) && (arrFacetSelected == null ? void 0 : arrFacetSelected.length) === 1;
-    let isPriorityFacetClicked = ["vendor"].includes(value);
-    return !(arrFacetSelected == null ? void 0 : arrFacetSelected.length) || isHasFacetSelected && (isPriorityFacetClicked || isOnFacetSelectedOne);
+    let isNoneFacetSelected = !isHasFacetSelected;
+    let isOnFacetSelectedOne = isHasFacetSelected && arrFacetSelected.includes(value) && isHasFacetSelected === 1;
+    let isSelectedFacetWithPrice = arrFacetSelected.includes("variants.price");
+    let isPriorityFacet = isHasFacetSelected && !isOnFacetSelectedOne && arrPriorityFacet.includes(value) && !isSelectedFacetWithPrice;
+    return isNoneFacetSelected || isOnFacetSelectedOne || isPriorityFacet;
   };
   const facetComponent = (filter) => {
     var _a2, _b2;
@@ -4867,6 +4847,19 @@ const ResultProduct = (props) => {
     let blockComponent = null;
     let items = searchResultFacets[value];
     let isShowNumberMatchingProduct = (_a2 = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a2.show_number_matching_product;
+    let itemsComponent = [];
+    if (["checkbox", "radio", "select"].includes(display.toLowerCase()))
+      itemsComponent = items == null ? void 0 : items.map((item) => {
+        let labelName = item.name;
+        if (languageSettings && (languageSettings[item.value] || languageSettings[item.name]))
+          labelName = languageSettings[item.value] || languageSettings[item.name];
+        let counter = handleConditionNotUpdateFacetDistribution(value) ? (item == null ? void 0 : item.total) || 0 : searchFacetDistribution[value] && searchFacetDistribution[value][item.value] ? searchFacetDistribution[value][item.value] : 0;
+        return {
+          ...item,
+          labelName,
+          counter
+        };
+      });
     if (display.toLowerCase() === "slider") {
       items = defaultFacetStats[value] && Object.keys(defaultFacetStats[value]).length ? defaultFacetStats[value] : {};
       let defaultValueMin = valueFilterPriceChange[0] || (items == null ? void 0 : items.min);
@@ -4875,16 +4868,14 @@ const ResultProduct = (props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Slider,
           {
-            defaultValue: defaultValueMin === defaultValueMax ? [defaultValueMax] : [defaultValueMin, defaultValueMax],
+            value: defaultValueMin === defaultValueMax ? [defaultValueMax] : [defaultValueMin, defaultValueMax],
             ...(items == null ? void 0 : items.min) === (items == null ? void 0 : items.max) ? {} : {
               min: items == null ? void 0 : items.min
             },
             max: items == null ? void 0 : items.max,
             step: 1,
-            setValueCommit: (valueCommit) => {
-              setValueFilterPriceChange(valueCommit);
-              handleFilterChange(value, valueCommit);
-            }
+            setValueCommit: (valueCommit) => handleFilterChange(value, valueCommit),
+            setValueChange: (valueChange) => setValueFilterPriceChange(valueChange)
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge-instant-search__result-filter-item-list-slider-minmax", children: [
@@ -4893,21 +4884,18 @@ const ResultProduct = (props) => {
         ] })
       ] });
     } else if (display.toLowerCase() === "checkbox" && (items == null ? void 0 : items.length)) {
-      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: items == null ? void 0 : items.map((item, index) => {
+      blockComponent = /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: itemsComponent == null ? void 0 : itemsComponent.map((item, index) => {
         var _a3;
-        let labelName = item.name;
-        let labelTotal = handleConditionUpdateFacetDistribution(value) ? (item == null ? void 0 : item.total) || 0 : searchFacetDistribution[value] && searchFacetDistribution[value][item.value] ? searchFacetDistribution[value][item.value] : 0;
-        if (languageSettings && (languageSettings[item.value] || languageSettings[item.name]))
-          labelName = languageSettings[item.value] || languageSettings[item.name];
+        const { labelName, value: itemValue, counter } = item;
         return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Checkbox,
           {
             id: `${value}_${index}`,
             name: value,
-            value: item.value,
-            label: `${labelName}${labelTotal !== void 0 && isShowNumberMatchingProduct ? ` (${labelTotal})` : ""}`,
+            value: itemValue,
+            label: `${labelName}${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}`,
             onClick: (e) => handleFilterChange(value, e.currentTarget.value),
-            checked: Boolean(clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(item.value))),
+            checked: Boolean(clickedFacets && ((_a3 = clickedFacets[value]) == null ? void 0 : _a3.includes(itemValue))),
             labelStyle: filter_option_style
           }
         ) }, index);
@@ -4920,14 +4908,10 @@ const ResultProduct = (props) => {
           name: value,
           onValueChange: (getValue) => handleFilterChange(value, getValue, true),
           items: items == null ? void 0 : items.map((item) => {
-            const { name, value: itemValue, total } = item;
-            let labelTotal = handleConditionUpdateFacetDistribution(value) ? total || 0 : searchFacetDistribution[value] && searchFacetDistribution[value][itemValue] ? searchFacetDistribution[value][itemValue] : 0;
-            let labelName = name;
-            if (languageSettings && (languageSettings[itemValue] || languageSettings[name]))
-              labelName = languageSettings[itemValue] || languageSettings[name];
+            const { labelName, value: value2, counter } = item;
             return {
-              label: `${labelName} ${labelTotal !== void 0 && isShowNumberMatchingProduct ? ` (${labelTotal})` : ""}`,
-              value: itemValue
+              label: `${labelName} ${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}`,
+              value: value2
             };
           }),
           defaultValue: clickedFacets && ((_b2 = clickedFacets[value]) == null ? void 0 : _b2.length) ? clickedFacets[value][0] : "",
@@ -4942,14 +4926,10 @@ const ResultProduct = (props) => {
           name: value,
           onValueChange: (getValue) => handleFilterChange(value, getValue, true),
           items: items == null ? void 0 : items.map((item) => {
-            const { name, value: itemValue, total } = item;
-            let labelTotal = handleConditionUpdateFacetDistribution(value) ? total || 0 : searchFacetDistribution[value] && searchFacetDistribution[value][itemValue] ? searchFacetDistribution[value][itemValue] : 0;
-            let labelName = name;
-            if (languageSettings && (languageSettings[itemValue] || languageSettings[name]))
-              labelName = languageSettings[itemValue] || languageSettings[name];
+            const { labelName, value: value2, counter } = item;
             return {
-              label: `${labelName} ${labelTotal !== void 0 && isShowNumberMatchingProduct ? ` (${labelTotal})` : ""}`,
-              value: itemValue
+              label: `${labelName} ${counter !== void 0 && isShowNumberMatchingProduct ? ` (${counter})` : ""}`,
+              value: value2
             };
           }),
           labelStyle: filter_option_style