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

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.
Files changed (9) hide show
  1. package/dist/components/SearchResultWidget/components/Facet.d.ts.map +1 -1
  2. package/dist/components/SearchResultWidget/layouts/Elements.d.ts +1 -0
  3. package/dist/components/SearchResultWidget/layouts/Elements.d.ts.map +1 -1
  4. package/dist/sledge-react-instant-search.cjs +1 -1
  5. package/dist/sledge-react-instant-search.cjs.map +1 -1
  6. package/dist/sledge-react-instant-search.js +97 -98
  7. package/dist/sledge-react-instant-search.js.map +1 -1
  8. package/dist/style.css +1 -1
  9. package/package.json +1 -1
package/dist/sledge-react-instant-search.js CHANGED
@@ -1106,7 +1106,7 @@ const Pagination = (props) => {
1106
1106
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__pagination", "data-pagination-type": type, children: renderPaginationLayout() });
1107
1107
  };
1108
1108
  const RadioGroup$1 = "";
1109
- const rowRenderer$1 = ({ virtualized, item, id, labelStyle }) => {
1109
+ const rowRenderer = ({ virtualized, item, id, labelStyle }) => {
1110
1110
  const { index, key = "" } = virtualized || {};
1111
1111
  const { label, value } = item;
1112
1112
  const content = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -1120,7 +1120,7 @@ const RadioGroup = ({ id, name, required, value, items, labelStyle = {}, onValue
1120
1120
  VirtualizedList,
1121
1121
  {
1122
1122
  rowCount: items == null ? void 0 : items.length,
1123
- rowRenderer: ({ index, key }) => rowRenderer$1({
1123
+ rowRenderer: ({ index, key }) => rowRenderer({
1124
1124
  virtualized: {
1125
1125
  index,
1126
1126
  key
@@ -1134,7 +1134,7 @@ const RadioGroup = ({ id, name, required, value, items, labelStyle = {}, onValue
1134
1134
  parentRef
1135
1135
  }
1136
1136
  ) : items.map(
1137
- (item, index) => rowRenderer$1({
1137
+ (item, index) => rowRenderer({
1138
1138
  virtualized: {
1139
1139
  index
1140
1140
  },
@@ -1177,25 +1177,32 @@ const ColorSwatch = ({ id, name, value, rgb, image, required, checked, onClick }
1177
1177
  );
1178
1178
  };
1179
1179
  const Select$1 = "";
1180
- const rowRenderer = ({ virtualized, item, labelStyle }) => {
1181
- const { index, key = "" } = virtualized || {};
1182
- const { label, value } = item;
1183
- return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemComponent, { value, children: label }, index);
1184
- };
1185
- const Select = ({ name, placeholder, required, defaultValue, items: itemsProp, labelStyle = {}, onValueChange, useVirtualized = false }) => {
1180
+ const Select = ({ name, placeholder, required, defaultValue, items, labelStyle = {}, onValueChange, useLoadMore = false, loadMoreText = "Load More" }) => {
1181
+ var _a;
1182
+ const maxItemPerPage = 30;
1183
+ const defaultVisibleItemsLoadMore = (items == null ? void 0 : items.length) ? items.slice(0, maxItemPerPage) : [];
1186
1184
  const [isLoading, setIsLoading] = React__default.useState(true);
1187
- const [items, setItems] = React__default.useState([]);
1188
- const selectViewportRef = React__default.useRef(null);
1189
- const scrollToPosition = (direction) => {
1190
- const directionMultiplier = direction === "up" ? -1 : 1;
1191
- if (selectViewportRef.current) {
1192
- const currentPosition = selectViewportRef.current.scrollTop;
1193
- const scrollAmount = 500 * directionMultiplier;
1194
- selectViewportRef.current.scrollTo({
1195
- top: currentPosition + scrollAmount
1196
- });
1197
- }
1185
+ const [visibleItems, setVisibleItems] = React__default.useState((items == null ? void 0 : items.length) ? useLoadMore ? defaultVisibleItemsLoadMore : items : []);
1186
+ const [page, setPage] = React__default.useState(1);
1187
+ const handleLoadMore = () => {
1188
+ var _a2;
1189
+ const nextItems = (_a2 = items == null ? void 0 : items.slice) == null ? void 0 : _a2.call(items, 0, (page + 1) * maxItemPerPage);
1190
+ setVisibleItems(nextItems);
1191
+ setPage(page + 1);
1192
+ setTimeout(() => {
1193
+ var _a3, _b, _c, _d;
1194
+ const selectRootElement = document.querySelector(".sledge__select-root");
1195
+ if (selectRootElement) {
1196
+ const currentHeight = (_b = (_a3 = window == null ? void 0 : window.getComputedStyle) == null ? void 0 : _a3.call(window, selectRootElement)) == null ? void 0 : _b.height;
1197
+ const currentMaxHeight = (_d = (_c = window == null ? void 0 : window.getComputedStyle) == null ? void 0 : _c.call(window, selectRootElement)) == null ? void 0 : _d.maxHeight;
1198
+ if (currentHeight)
1199
+ selectRootElement.style.height = currentHeight;
1200
+ if (currentMaxHeight)
1201
+ selectRootElement.style.height = currentMaxHeight;
1202
+ }
1203
+ }, 0);
1198
1204
  };
1205
+ const hasMore = visibleItems.length < items.length;
1199
1206
  React__default.useEffect(() => {
1200
1207
  setIsLoading(true);
1201
1208
  setTimeout(() => {
@@ -1212,25 +1219,19 @@ const Select = ({ name, placeholder, required, defaultValue, items: itemsProp, l
1212
1219
  selectRootElement.classList.toggle("sledge__select-root");
1213
1220
  }
1214
1221
  };
1215
- return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__select-wrapper", "data-use-virtualized": useVirtualized, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
1222
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isLoading ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__select-wrapper", "data-use-load-more": useLoadMore, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
1216
1223
  $cc7e05a45900e73f$export$be92b6f5f03c0fe9,
1217
1224
  {
1218
1225
  name,
1219
1226
  required,
1220
1227
  onValueChange,
1221
- onOpenChange: (open) => {
1222
- handleClassNameRoot(open);
1223
- setItems(open && (itemsProp == null ? void 0 : itemsProp.length) ? [itemsProp == null ? void 0 : itemsProp[0]] : []);
1224
- setTimeout(() => {
1225
- setItems(open && (itemsProp == null ? void 0 : itemsProp.length) ? itemsProp : []);
1226
- }, 0);
1227
- },
1228
+ onOpenChange: (open) => handleClassNameRoot(open),
1228
1229
  ...defaultValue ? {
1229
1230
  defaultValue
1230
1231
  } : {},
1231
1232
  children: [
1232
1233
  /* @__PURE__ */ jsxRuntimeExports.jsxs($cc7e05a45900e73f$export$41fb9f06171c75f4, { className: "sledge__select-trigger", style: labelStyle, children: [
1233
- useVirtualized && defaultValue ? /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$4c8d1a57a761ef94, { children: defaultValue }) : /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$4c8d1a57a761ef94, { placeholder }),
1234
+ useLoadMore && defaultValue ? /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$4c8d1a57a761ef94, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: defaultValue }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$4c8d1a57a761ef94, { placeholder }),
1234
1235
  /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "sledge__select-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1235
1236
  "path",
1236
1237
  {
@@ -1241,15 +1242,18 @@ const Select = ({ name, placeholder, required, defaultValue, items: itemsProp, l
1241
1242
  }
1242
1243
  ) }) })
1243
1244
  ] }),
1244
- /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$602eac185826482c, { className: "sledge__select-portal", children: /* @__PURE__ */ jsxRuntimeExports.jsxs($cc7e05a45900e73f$export$7c6e2c02157bb7d2, { className: "sledge__select-content", children: [
1245
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1246
- $cc7e05a45900e73f$export$2f60d3ec9ad468f2,
1247
- {
1248
- className: "sledge__select-scroll-button",
1249
- ...useVirtualized ? {
1250
- onClick: () => scrollToPosition("up")
1251
- } : {},
1252
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1245
+ /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$602eac185826482c, { className: "sledge__select-portal", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
1246
+ $cc7e05a45900e73f$export$7c6e2c02157bb7d2,
1247
+ {
1248
+ className: "sledge__select-content",
1249
+ onCloseAutoFocus: () => {
1250
+ if (!useLoadMore)
1251
+ return;
1252
+ setVisibleItems(defaultVisibleItemsLoadMore);
1253
+ setPage(1);
1254
+ },
1255
+ children: [
1256
+ /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$2f60d3ec9ad468f2, { className: "sledge__select-scroll-button", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1253
1257
  "path",
1254
1258
  {
1255
1259
  d: "M3.13523 8.84197C3.3241 9.04343 3.64052 9.05363 3.84197 8.86477L7.5 5.43536L11.158 8.86477C11.3595 9.05363 11.6759 9.04343 11.8648 8.84197C12.0536 8.64051 12.0434 8.32409 11.842 8.13523L7.84197 4.38523C7.64964 4.20492 7.35036 4.20492 7.15803 4.38523L3.15803 8.13523C2.95657 8.32409 2.94637 8.64051 3.13523 8.84197Z",
@@ -1257,37 +1261,20 @@ const Select = ({ name, placeholder, required, defaultValue, items: itemsProp, l
1257
1261
  fillRule: "evenodd",
1258
1262
  clipRule: "evenodd"
1259
1263
  }
1260
- ) })
1261
- }
1262
- ),
1263
- /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$d5c6c08dc2d3ca7, { className: "sledge__select-viewport", ref: selectViewportRef, children: useVirtualized && (items == null ? void 0 : items.length) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
1264
- VirtualizedList,
1265
- {
1266
- rowCount: items == null ? void 0 : items.length,
1267
- rowRenderer: ({ index, key }) => rowRenderer({
1268
- virtualized: {
1269
- index,
1270
- key
1271
- },
1272
- item: items == null ? void 0 : items[index],
1273
- labelStyle
1274
- }),
1275
- parentRef: selectViewportRef
1276
- }
1277
- ) : items.map(
1278
- (item, index) => {
1279
- const { label, value } = item;
1280
- return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemComponent, { value, children: label }, index);
1281
- }
1282
- ) }),
1283
- /* @__PURE__ */ jsxRuntimeExports.jsx(
1284
- $cc7e05a45900e73f$export$bf1aedc3039c8d63,
1285
- {
1286
- className: "sledge__select-scroll-button",
1287
- ...useVirtualized ? {
1288
- onClick: () => scrollToPosition("down")
1289
- } : {},
1290
- children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1264
+ ) }) }),
1265
+ /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$d5c6c08dc2d3ca7, { className: "sledge__select-viewport", children: useLoadMore ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
1266
+ (_a = visibleItems == null ? void 0 : visibleItems.map) == null ? void 0 : _a.call(visibleItems, (item, index) => {
1267
+ const { label, value } = item;
1268
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemComponent, { value, children: label }, index);
1269
+ }),
1270
+ hasMore && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__select-load-more", onClick: handleLoadMore, children: loadMoreText })
1271
+ ] }) : items.map(
1272
+ (item, index) => {
1273
+ const { label, value } = item;
1274
+ return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItemComponent, { value, children: label }, index);
1275
+ }
1276
+ ) }),
1277
+ /* @__PURE__ */ jsxRuntimeExports.jsx($cc7e05a45900e73f$export$bf1aedc3039c8d63, { className: "sledge__select-scroll-button", children: /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: 15, height: 15, viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
1291
1278
  "path",
1292
1279
  {
1293
1280
  d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",
@@ -1295,10 +1282,10 @@ const Select = ({ name, placeholder, required, defaultValue, items: itemsProp, l
1295
1282
  fillRule: "evenodd",
1296
1283
  clipRule: "evenodd"
1297
1284
  }
1298
- ) })
1299
- }
1300
- )
1301
- ] }) })
1285
+ ) }) })
1286
+ ]
1287
+ }
1288
+ ) })
1302
1289
  ]
1303
1290
  }
1304
1291
  ) }) });
@@ -4350,7 +4337,7 @@ const ProductCard = React__default.memo((props) => {
4350
4337
  display_button_add_to_cart_style = {}
4351
4338
  } = setting || {};
4352
4339
  const { product, variants } = item || {};
4353
- const { id, title, image, url, vendor = "", currency, handle } = product || {};
4340
+ const { id, title, image, url, vendor = "", currency, handle, images } = product || {};
4354
4341
  const {
4355
4342
  id: variant_id = "",
4356
4343
  admin_graphql_api_id: variant_admin_graphql_api_id = "",
@@ -4363,6 +4350,7 @@ const ProductCard = React__default.memo((props) => {
4363
4350
  const defaultSelectedVariantStock = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_quantity") ? variants[0].inventory_quantity : 0;
4364
4351
  const defaultSelectedVariantInventoryManagement = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_management") ? variants[0].inventory_management : null;
4365
4352
  const defaultSelectedVariantInventoryPolicy = (variants == null ? void 0 : variants.length) && Object.hasOwn(variants[0], "inventory_policy") ? variants[0].inventory_policy : "";
4353
+ const secondaryImage = images == null ? void 0 : images[1];
4366
4354
  const [selectedVariantId, setSelectedVariantId] = React__default.useState(defaultSelectedVariantId);
4367
4355
  const [selectedVariantStock, setSelectedVariantStock] = React__default.useState(defaultSelectedVariantStock);
4368
4356
  const [selectedVariantInventoryManagement, setSelectedVariantInventoryManagement] = React__default.useState(defaultSelectedVariantInventoryManagement);
@@ -4550,27 +4538,37 @@ const ProductCard = React__default.memo((props) => {
4550
4538
  } : {}
4551
4539
  }
4552
4540
  ),
4553
- /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-featured-image-element", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
4554
- "img",
4555
- {
4556
- ref: imageRef,
4557
- ...hasEntryImage ? {
4558
- src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
4559
- ["loaded"]: ""
4560
- } : {
4561
- ["data-src"]: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`
4562
- },
4563
- alt: "sledge-card-image",
4564
- loading: "lazy",
4565
- className: "sledge__product-grid-card-image-featured-image",
4566
- onError: ({ currentTarget }) => {
4567
- if (!currentTarget)
4568
- return;
4569
- currentTarget.onerror = null;
4570
- currentTarget.src = `${CDN_URL}/images/blank-image.png`;
4541
+ /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "sledge__product-grid-card-featured-image-element", children: [
4542
+ /* @__PURE__ */ jsxRuntimeExports.jsx(
4543
+ "img",
4544
+ {
4545
+ ref: imageRef,
4546
+ ...hasEntryImage ? {
4547
+ src: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`,
4548
+ ["loaded"]: ""
4549
+ } : {
4550
+ ["data-src"]: (image == null ? void 0 : image.src) || `${CDN_URL}/images/blank-image.png`
4551
+ },
4552
+ alt: "sledge-card-image",
4553
+ loading: "lazy",
4554
+ className: "sledge__product-grid-card-image-featured-image",
4555
+ onError: ({ currentTarget }) => {
4556
+ if (!currentTarget)
4557
+ return;
4558
+ currentTarget.onerror = null;
4559
+ currentTarget.src = `${CDN_URL}/images/blank-image.png`;
4560
+ }
4571
4561
  }
4572
- }
4573
- ) }),
4562
+ ),
4563
+ secondaryImage && /* @__PURE__ */ jsxRuntimeExports.jsx(
4564
+ "img",
4565
+ {
4566
+ src: secondaryImage == null ? void 0 : secondaryImage.src,
4567
+ alt: "sledge-card-image",
4568
+ className: "sledge__product-grid-card-image-featured-image sledge__product-grid-card-image-featured-image--secondary"
4569
+ }
4570
+ )
4571
+ ] }),
4574
4572
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge__product-grid-card-variant-images", children: (_g = (_f = product == null ? void 0 : product.images) == null ? void 0 : _f.map) == null ? void 0 : _g.call(_f, (image2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
4575
4573
  "img",
4576
4574
  {
@@ -7841,7 +7839,8 @@ const Facet = (props) => {
7841
7839
  }),
7842
7840
  defaultValue: clickedFacets && ((_e = clickedFacets[value]) == null ? void 0 : _e.length) ? clickedFacets[value][0] : "",
7843
7841
  labelStyle: filter_option_style,
7844
- useVirtualized: true
7842
+ loadMoreText: button_load_more || "Load More",
7843
+ useLoadMore: true
7845
7844
  }
7846
7845
  ) });
7847
7846
  } else if (display.toLowerCase() === "swatch" && (currentItems == null ? void 0 : currentItems.length)) {
@@ -8013,8 +8012,8 @@ const ResultWrapper = (props) => {
8013
8012
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-wrapper", "data-filter-layout": (_a = displaySettings == null ? void 0 : displaySettings.filter) == null ? void 0 : _a.layout, children });
8014
8013
  };
8015
8014
  const ResultData = (props) => {
8016
- const { children } = props;
8017
- return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "sledge-instant-search__result-data", children });
8015
+ const { children, className = "" } = props;
8016
+ return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-instant-search__result-data ${className}`, children });
8018
8017
  };
8019
8018
  const ResultDataKeyword = (props) => {
8020
8019
  const { children } = props;
@@ -8311,7 +8310,7 @@ const EnterpriseLayout = (props) => {
8311
8310
  ((_d = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _d.hide_search_bar) ? null : searchField,
8312
8311
  ((_e = displaySettings == null ? void 0 : displaySettings.search) == null ? void 0 : _e.show_switch_view_option) ? /* @__PURE__ */ jsxRuntimeExports.jsx(SelectFieldWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnGridSelectorWrapper, { children: columnGridSelector }) }) : null
8313
8312
  ] }),
8314
- /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { children: [
8313
+ /* @__PURE__ */ jsxRuntimeExports.jsxs(ResultData, { className: openFilterToggle ? "" : "sledge__has-closed-filter-toggle", children: [
8315
8314
  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `sledge-instant-search__result-filter-toggle-panel ${"animated"}`, "data-filter-toggle": openFilterToggle ? "open" : "closed", children: filterVertical == null ? void 0 : filterVertical({
8316
8315
  filterLayoutType: "standard",
8317
8316
  isSkeleton: Boolean(!isAllowedFilterTree && isFirstLoading || isAllowedFilterTree && isLoadingProduct || isLoadingSetting)