@sledge-app/react-instant-search 2.0.14 → 2.0.16

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

@@ -4146,10 +4146,11 @@ const addToCartTrigger = async (data) => {
   });
 };
 const VariantSelector = (props) => {
-  const { data, setSelectedVariantId, setSelectedVariantStock, setSelectedVariantInventoryManagement, setSelectedVariantInventoryPolicy } = props;
+  var _a;
+  const { data, setSelectedVariantId, setSelectedVariantStock, setSelectedVariantInventoryManagement, setSelectedVariantInventoryPolicy, sourceApp } = props;
   const { product } = data || {};
   const { variants } = product || {};
-  const { id, handle } = product || {};
+  const { id, handle, url } = product || {};
   const options = (product == null ? void 0 : product.options) ? Object.entries(product.options) : [];
   const images = (product == null ? void 0 : product.images) ?? [];
   const defaultSelected = {};
@@ -4194,7 +4195,7 @@ const VariantSelector = (props) => {
     }
   }
   function setSelectedVariant(element, value, optionIndex) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
     const parentCard = element.target.offsetParent;
     const selectedInput = parentCard.querySelector(`.sledge__product-grid-card-selected-option[data-product-id='${id}']`);
     setElementAttribute({
@@ -4202,7 +4203,7 @@ const VariantSelector = (props) => {
       attributeName: `data-selected-option${optionIndex}`,
       value
     });
-    const option1 = `[data-option-1="${stringToSlug((_b = (_a = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _a["data-selected-option1"]) == null ? void 0 : _b.value)}"]`;
+    const option1 = `[data-option-1="${stringToSlug((_b = (_a2 = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _a2["data-selected-option1"]) == null ? void 0 : _b.value)}"]`;
     const option2 = `${((_c = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _c["data-selected-option2"]) ? `[data-option-2="${stringToSlug((_e = (_d = selectedInput == null ? void 0 : selectedInput.attributes) == null ? void 0 : _d["data-selected-option2"]) == null ? void 0 : _e.value)}"]` : ""}`;
     const selectOption = parentCard.querySelector(`select option${option1}${option2}`);
     const variantId = selectOption.attributes["data-graphql-id"].value;
@@ -4211,11 +4212,11 @@ const VariantSelector = (props) => {
     const inventoryManagement = (_h = selectOption.attributes["data-inventory-management"]) == null ? void 0 : _h.value;
     const inventoryPolicy = (_i = selectOption.attributes["data-inventory-policy"]) == null ? void 0 : _i.value;
     const setOther = () => {
-      var _a2, _b2;
+      var _a3, _b2;
       setElementAttribute({
         element: selectedInput,
         attributeName: "data-variant-id",
-        value: ((_b2 = (_a2 = selectOption == null ? void 0 : selectOption.attributes) == null ? void 0 : _a2["data-graphql-id"]) == null ? void 0 : _b2.value) || ""
+        value: ((_b2 = (_a3 = selectOption == null ? void 0 : selectOption.attributes) == null ? void 0 : _a3["data-graphql-id"]) == null ? void 0 : _b2.value) || ""
       });
       setElementAttribute({
         element: selectedInput,
@@ -4268,37 +4269,76 @@ const VariantSelector = (props) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx("option", { ...optionAttributes, children: title }, id2);
     }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: images == null ? void 0 : images.map((image) => /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "hidden", id: image == null ? void 0 : image.id, value: image == null ? void 0 : image.src }, image == null ? void 0 : image.id)) }),
-    options == null ? void 0 : options.map((option, optionParentIndex) => {
+    (_a = options == null ? void 0 : options.map) == null ? void 0 : _a.call(options, (option, optionParentIndex) => {
+      var _a2;
       const optionName = option[0];
       const optionValues = option[1];
       let selectedOption = optionValues[0];
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: optionValues[0] !== "Default Title" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge__product-variant-size-swatch-flex options-button-${stringToSlug(optionName)}`, children: optionValues.map((item, index) => {
-        var _a;
-        const defaultOptionClass = `
+      const initialVisibleCount = 2;
+      const hiddenOptionsCount = optionValues.length - initialVisibleCount;
+      const showMoreText = `${hiddenOptionsCount}+`;
+      const showMoreButton = /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "a",
+        {
+          className: `${optionName === "Color" ? "sledge__product-variant-color-swatch" : "sledge__product-variant-size-swatch"}`,
+          href: url,
+          onClick: () => {
+            if (sourceApp === "instant-search") {
+              productClickTrigger$1({
+                productId: id
+              });
+            } else if (productRecommendationSourceApps.includes(sourceApp)) {
+              productClickTrigger({
+                productId: id,
+                sourceApp
+              });
+            }
+          },
+          "data-show-more": true,
+          children: showMoreText
+        }
+      );
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: optionValues[0] !== "Default Title" ? optionName === "Color" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `sledge__product-variant-size-swatch-flex options-button-${stringToSlug(optionName)}`, children: [
+        (_a2 = optionValues == null ? void 0 : optionValues.slice(0, initialVisibleCount)) == null ? void 0 : _a2.map((item, index) => {
+          var _a3;
+          const defaultOptionClass = `
 ${selectedOption === item ? "sledge__product-variant-size-swatch-active" : ""} sledge__product-variant-size-swatch`;
-        const colorOptionClass = `${selectedOption === item ? "sledge__product-variant-color-swatch-active" : ""} sledge__product-variant-color-swatch`;
-        const colorDataSettings = ((_a = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING))) == null ? void 0 : _a.colors) || [];
-        const getColorSwatch = (colorDataSettings == null ? void 0 : colorDataSettings.filter(({ name }) => name === item)[0]) || {};
-        const colorSwatch = (getColorSwatch == null ? void 0 : getColorSwatch.image) ? `url(${getColorSwatch == null ? void 0 : getColorSwatch.image})` : (getColorSwatch == null ? void 0 : getColorSwatch.rgb) || item;
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            className: optionName === "Color" ? colorOptionClass : defaultOptionClass,
-            style: {
-              background: optionName === "Color" ? colorSwatch : null,
-              backgroundSize: "contain"
-            },
-            onClick: (el) => {
-              setSelectedVariant(el, item, optionParentIndex + 1);
-              setSelectedOption(el, optionName);
+          const colorOptionClass = `${selectedOption === item ? "sledge__product-variant-color-swatch-active" : ""} sledge__product-variant-color-swatch`;
+          const colorDataSettings = ((_a3 = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY.INSTANT_SEARCH_SETTING))) == null ? void 0 : _a3.colors) || [];
+          const getColorSwatch = (colorDataSettings == null ? void 0 : colorDataSettings.filter(({ name }) => name === item)[0]) || {};
+          const colorSwatch = (getColorSwatch == null ? void 0 : getColorSwatch.image) ? `url(${getColorSwatch == null ? void 0 : getColorSwatch.image})` : (getColorSwatch == null ? void 0 : getColorSwatch.rgb) || item;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              className: optionName === "Color" ? colorOptionClass : defaultOptionClass,
+              style: {
+                background: optionName === "Color" ? colorSwatch : null,
+                backgroundSize: "contain"
+              },
+              onClick: (el) => {
+                setSelectedVariant(el, item, optionParentIndex + 1);
+                setSelectedOption(el, optionName);
+              },
+              title: optionName === "Color" ? null : item,
+              children: optionName === "Color" ? null : item
             },
-            title: optionName === "Color" ? null : item,
-            children: optionName === "Color" ? null : item
+            index
+          );
+        }),
+        hiddenOptionsCount > 0 && showMoreButton
+      ] }, optionParentIndex) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "select",
+        {
+          className: "sledge__product-variant-size-swatch-select",
+          onChange: (el) => {
+            let { value } = el.target;
+            setSelectedVariant(el, value, optionParentIndex + 1);
+            setSelectedOption(el, optionName);
           },
-          index
-        );
-      }) }, optionParentIndex) });
+          children: optionValues.map((item, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: item, children: item }, index))
+        }
+      ) : "" });
     })
   ] });
 };
@@ -4652,7 +4692,8 @@ const ProductCard = React__default.memo((props) => {
               setSelectedVariantId,
               setSelectedVariantStock,
               setSelectedVariantInventoryManagement,
-              setSelectedVariantInventoryPolicy
+              setSelectedVariantInventoryPolicy,
+              sourceApp
             }
           )
         ] })
@@ -8377,7 +8418,7 @@ const YuvaLayout = (props) => {
         ((_e = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _e.hide_limit_options) ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldItem, { children: limit })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { className: openFilterToggle ? "" : "sledge__has-closed-filter-toggle", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-instant-search__result-filter-toggle-panel ${""}`, "data-filter-toggle": openFilterToggle ? "open" : "closed", children: filterVertical == null ? void 0 : filterVertical({
         filterLayoutType: "standard",
         isSkeleton: Boolean(!isAllowedFilterTree && isFirstLoading || isAllowedFilterTree && isLoadingProduct || isLoadingSetting)