@propeller-commerce/propeller-v2-react-ui 0.11.4 → 0.13.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as _propeller_commerce_propeller_v2_core_ui from '@propeller-commerce/propeller-v2-core-ui';
-import { Services, ShopMode, UserMode, PriceComponentProps, StockComponentProps, AddToCartComponentProps, ImageComponentProps, BadgesComponentProps, FavoriteComponentProps, ProductBundlesComponentProps, ProductBulkPricesComponentProps, ProductSurchargesComponentProps, AnyUser, Result } from '@propeller-commerce/propeller-v2-core-ui';
+import { Services, ShopMode, UserMode, PriceComponentProps, StockComponentProps, AddToCartComponentProps, ImageComponentProps, BadgesComponentProps, FavoriteComponentProps, ProductBundlesComponentProps, ProductBulkPricesComponentProps, ProductSurchargesComponentProps, AnyUser, Result, Availability } from '@propeller-commerce/propeller-v2-core-ui';
 export * from '@propeller-commerce/propeller-v2-core-ui';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ComponentType } from 'react';
@@ -1383,12 +1383,24 @@ interface UseProductSearchOptions {
      * without a contract still sees the full catalogue.
      */
     applyOrderlists?: boolean;
+    /**
+     * Attribute names to request per product, e.g. `['MPN']`. Unset returns the
+     * first page of ALL attributes (12 per product), so products with more than
+     * 12 silently lose the rest — name what you render.
+     */
+    productTrackAttributes?: string[];
     /** Attribute text filters applied to the category search. */
     textFilters?: ProductTextFilterInput[];
     /** Lower price bound filter. */
     priceFilterMin?: number;
     /** Upper price bound filter. */
     priceFilterMax?: number;
+    /**
+     * Stock buckets to filter by. Empty, unset, or both buckets sends no stock
+     * filter. Filtering happens server-side, so `itemsFound` and the page count
+     * describe the filtered set.
+     */
+    availability?: Availability[];
     /** Sort field; overrides the internal sort state when set. */
     sortField?: string;
     /** Sort direction (`'ASC'` / `'DESC'`); overrides internal state when set. */
@@ -4612,6 +4624,23 @@ interface GridFiltersProps {
     activePriceMin?: number;
     /** Currently active price filter max from URL state. */
     activePriceMax?: number;
+    /**
+     * Show the availability (stock) section. Defaults to false so hosts opt in
+     * rather than gaining a new filter section on upgrade.
+     *
+     * The host should pass its own "show stock" setting here — a stock filter
+     * is meaningless when no stock is displayed anywhere in the grid. When
+     * truthy the section is still subject to the same semi-closed-portal
+     * visibility rule as the price filter (hidden for anonymous users).
+     */
+    showAvailabilityFilter?: boolean;
+    /**
+     * Currently active availability buckets (URL-driven). Seeds the checkboxes
+     * on the first render so a restored filtered URL renders them ticked.
+     */
+    activeAvailability?: Availability[];
+    /** Called whenever an availability checkbox is toggled. */
+    onAvailabilityChange?: (sel: Availability[]) => void;
     /**
      * When true, all checkboxes and price inputs are disabled.
      * Wire to ProductGrid's `onLoadingChange` to block rapid re-clicks while a fetch is in flight.
@@ -4796,6 +4825,16 @@ interface GridToolbarProps {
      * Called when the price filter badge × is clicked.
      */
     onPriceFilterRemove?: () => void;
+    /**
+     * Currently active availability (stock) filter selections.
+     * Renders one removable chip per selected bucket.
+     */
+    availability?: Availability[];
+    /**
+     * Called when an availability filter badge × is clicked.
+     * Receives the specific bucket to remove.
+     */
+    onAvailabilityFilterRemove?: (value: Availability) => void;
     /**
      * Called when "Clear All" is clicked.
      */
@@ -6146,6 +6185,13 @@ interface ProductGridProps {
      * still sees the full catalogue.
      */
     applyOrderlists?: boolean;
+    /**
+     * Attribute names to request per product, e.g. `['MPN']` — makes
+     * `product.attributes` usable in card slots like `belowName`. Unset returns
+     * the first page of ALL attributes (12 per product), so products with more
+     * than 12 silently lose the rest.
+     */
+    productTrackAttributes?: string[];
     /** Number of columns in the grid. Accepts 2, 3, 4, 5, or 6. Defaults to 3. */
     columns?: number;
     /**
@@ -6182,6 +6228,11 @@ interface ProductGridProps {
     /**  * Active text filters to apply — built by the parent from FiltersSidebar  * `onFilterChange` callbacks.  Each entry maps to a `textFilters` input  * row in the CategoryService query.  * When this prop changes the grid automatically re-fetches (page resets to 1).  */ textFilters?: ProductTextFilterInput[];
     /**  * Active price range lower bound from the FiltersSidebar `onPriceChange`.  * Triggers a re-fetch when changed.  */ priceFilterMin?: number;
     /**  * Active price range upper bound from the FiltersSidebar `onPriceChange`.  * Triggers a re-fetch when changed.  */ priceFilterMax?: number;
+    /**
+     * Active stock buckets from the filters sidebar. Triggers a re-fetch when
+     * changed. Empty or both buckets means no stock filter.
+     */
+    availability?: Availability[];
     /**  * Called when sort state changes internally (for syncing a sibling toolbar).  */ onSortChange?: (field: string, order: string) => void;
     /**  * Called after each internal data fetch with the min/max price of the  * current product set — use to populate a price range slider in the parent.  */ onPriceBoundsChange?: (min: number, max: number) => void;
     /**  * Called after each fetch with the total number of products found —  * use to display a result count in the parent toolbar.  */ onItemsFoundChange?: (count: number) => void;
@@ -7300,6 +7351,8 @@ interface SearchBarProps {
      * still sees the full catalogue.
      */
     applyOrderlists?: boolean;
+    /** Attribute names to request per product, e.g. `['MPN']`. See ProductGrid. */
+    productTrackAttributes?: string[];
     /**
      * Bump this counter to clear the search input from outside (e.g. on route
      * change). Each unique value triggers a one-time reset of the local term.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _propeller_commerce_propeller_v2_core_ui from '@propeller-commerce/propeller-v2-core-ui';
-import { Services, ShopMode, UserMode, PriceComponentProps, StockComponentProps, AddToCartComponentProps, ImageComponentProps, BadgesComponentProps, FavoriteComponentProps, ProductBundlesComponentProps, ProductBulkPricesComponentProps, ProductSurchargesComponentProps, AnyUser, Result } from '@propeller-commerce/propeller-v2-core-ui';
+import { Services, ShopMode, UserMode, PriceComponentProps, StockComponentProps, AddToCartComponentProps, ImageComponentProps, BadgesComponentProps, FavoriteComponentProps, ProductBundlesComponentProps, ProductBulkPricesComponentProps, ProductSurchargesComponentProps, AnyUser, Result, Availability } from '@propeller-commerce/propeller-v2-core-ui';
 export * from '@propeller-commerce/propeller-v2-core-ui';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ComponentType } from 'react';
@@ -1383,12 +1383,24 @@ interface UseProductSearchOptions {
      * without a contract still sees the full catalogue.
      */
     applyOrderlists?: boolean;
+    /**
+     * Attribute names to request per product, e.g. `['MPN']`. Unset returns the
+     * first page of ALL attributes (12 per product), so products with more than
+     * 12 silently lose the rest — name what you render.
+     */
+    productTrackAttributes?: string[];
     /** Attribute text filters applied to the category search. */
     textFilters?: ProductTextFilterInput[];
     /** Lower price bound filter. */
     priceFilterMin?: number;
     /** Upper price bound filter. */
     priceFilterMax?: number;
+    /**
+     * Stock buckets to filter by. Empty, unset, or both buckets sends no stock
+     * filter. Filtering happens server-side, so `itemsFound` and the page count
+     * describe the filtered set.
+     */
+    availability?: Availability[];
     /** Sort field; overrides the internal sort state when set. */
     sortField?: string;
     /** Sort direction (`'ASC'` / `'DESC'`); overrides internal state when set. */
@@ -4612,6 +4624,23 @@ interface GridFiltersProps {
     activePriceMin?: number;
     /** Currently active price filter max from URL state. */
     activePriceMax?: number;
+    /**
+     * Show the availability (stock) section. Defaults to false so hosts opt in
+     * rather than gaining a new filter section on upgrade.
+     *
+     * The host should pass its own "show stock" setting here — a stock filter
+     * is meaningless when no stock is displayed anywhere in the grid. When
+     * truthy the section is still subject to the same semi-closed-portal
+     * visibility rule as the price filter (hidden for anonymous users).
+     */
+    showAvailabilityFilter?: boolean;
+    /**
+     * Currently active availability buckets (URL-driven). Seeds the checkboxes
+     * on the first render so a restored filtered URL renders them ticked.
+     */
+    activeAvailability?: Availability[];
+    /** Called whenever an availability checkbox is toggled. */
+    onAvailabilityChange?: (sel: Availability[]) => void;
     /**
      * When true, all checkboxes and price inputs are disabled.
      * Wire to ProductGrid's `onLoadingChange` to block rapid re-clicks while a fetch is in flight.
@@ -4796,6 +4825,16 @@ interface GridToolbarProps {
      * Called when the price filter badge × is clicked.
      */
     onPriceFilterRemove?: () => void;
+    /**
+     * Currently active availability (stock) filter selections.
+     * Renders one removable chip per selected bucket.
+     */
+    availability?: Availability[];
+    /**
+     * Called when an availability filter badge × is clicked.
+     * Receives the specific bucket to remove.
+     */
+    onAvailabilityFilterRemove?: (value: Availability) => void;
     /**
      * Called when "Clear All" is clicked.
      */
@@ -6146,6 +6185,13 @@ interface ProductGridProps {
      * still sees the full catalogue.
      */
     applyOrderlists?: boolean;
+    /**
+     * Attribute names to request per product, e.g. `['MPN']` — makes
+     * `product.attributes` usable in card slots like `belowName`. Unset returns
+     * the first page of ALL attributes (12 per product), so products with more
+     * than 12 silently lose the rest.
+     */
+    productTrackAttributes?: string[];
     /** Number of columns in the grid. Accepts 2, 3, 4, 5, or 6. Defaults to 3. */
     columns?: number;
     /**
@@ -6182,6 +6228,11 @@ interface ProductGridProps {
     /**  * Active text filters to apply — built by the parent from FiltersSidebar  * `onFilterChange` callbacks.  Each entry maps to a `textFilters` input  * row in the CategoryService query.  * When this prop changes the grid automatically re-fetches (page resets to 1).  */ textFilters?: ProductTextFilterInput[];
     /**  * Active price range lower bound from the FiltersSidebar `onPriceChange`.  * Triggers a re-fetch when changed.  */ priceFilterMin?: number;
     /**  * Active price range upper bound from the FiltersSidebar `onPriceChange`.  * Triggers a re-fetch when changed.  */ priceFilterMax?: number;
+    /**
+     * Active stock buckets from the filters sidebar. Triggers a re-fetch when
+     * changed. Empty or both buckets means no stock filter.
+     */
+    availability?: Availability[];
     /**  * Called when sort state changes internally (for syncing a sibling toolbar).  */ onSortChange?: (field: string, order: string) => void;
     /**  * Called after each internal data fetch with the min/max price of the  * current product set — use to populate a price range slider in the parent.  */ onPriceBoundsChange?: (min: number, max: number) => void;
     /**  * Called after each fetch with the total number of products found —  * use to display a result count in the parent toolbar.  */ onItemsFoundChange?: (count: number) => void;
@@ -7300,6 +7351,8 @@ interface SearchBarProps {
      * still sees the full catalogue.
      */
     applyOrderlists?: boolean;
+    /** Attribute names to request per product, e.g. `['MPN']`. See ProductGrid. */
+    productTrackAttributes?: string[];
     /**
      * Bump this counter to clear the search input from outside (e.g. on route
      * change). Each unique value triggers a one-time reset of the local term.

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { getLabel, getLocalizedValue, formatPrice, getClusterSku, getClusterImageUrl, isContentHidden, getProductSku, getProductImageUrl, createServices, err, ok, formatSurcharge, deriveUserMode, isContact, isCustomer, getAddresses, attributeNameMatches, getAttributeDisplayName, filterProductsBySelections, extractAttributeValues, getLanguageString, collectAttributeValues, getCountryName } from '@propeller-commerce/propeller-v2-core-ui';
+import { getLabel, getLocalizedValue, formatPrice, getClusterSku, getClusterImageUrl, isContentHidden, getProductSku, getProductImageUrl, createServices, err, ok, formatSurcharge, deriveUserMode, isContact, isCustomer, getAddresses, attributeNameMatches, getAttributeDisplayName, filterProductsBySelections, extractAttributeValues, buildInventoryFilter, getLanguageString, collectAttributeValues, getCountryName } from '@propeller-commerce/propeller-v2-core-ui';
 export * from '@propeller-commerce/propeller-v2-core-ui';
 import * as React6 from 'react';
 import { createContext, useState, useRef, useMemo, useCallback, useContext, useEffect } from 'react';
@@ -2070,7 +2070,7 @@ function useProductInfo(options) {
     if (options.user && "customerId" in options.user) input.customerId = options.user.customerId;
     return input;
   }
-  function buildAttributeInput() {
+  function buildAttributeInput2() {
     const names = options.productTrackAttributes;
     if (!names || names.length === 0) return void 0;
     return { attributeDescription: { names } };
@@ -2093,7 +2093,7 @@ function useProductInfo(options) {
         orderlistIds = (orderlists?.items ?? []).map((ol) => ol.id);
       }
       const service = createServices(graphqlClient).product;
-      const attributeInput = buildAttributeInput();
+      const attributeInput = buildAttributeInput2();
       const variables = {
         productId,
         language,
@@ -2183,6 +2183,10 @@ function useProductInfo(options) {
   };
 }
 var inflightFetches2 = /* @__PURE__ */ new Set();
+function buildAttributeInput(names) {
+  if (!names || names.length === 0) return void 0;
+  return { attributeDescription: { names } };
+}
 function useProductSearch(options) {
   const { graphqlClient, configuration } = options;
   const isControlled = options.products !== void 0;
@@ -2237,7 +2241,8 @@ function useProductSearch(options) {
       userKey,
       JSON.stringify(options.textFilters ?? []),
       options.priceFilterMin ?? "",
-      options.priceFilterMax ?? ""
+      options.priceFilterMax ?? "",
+      JSON.stringify(options.availability ?? [])
     ].join("|");
     if (inflightFetches2.has(inflightKey)) {
       fetchIdRef.current--;
@@ -2279,6 +2284,7 @@ function useProductSearch(options) {
         }
       ] : [];
       const priceFilter = options.priceFilterMin !== void 0 || options.priceFilterMax !== void 0 ? { from: options.priceFilterMin ?? 0, to: options.priceFilterMax ?? 999999 } : void 0;
+      const inventoryFilter = buildInventoryFilter(options.availability);
       const userId = options.user && "contactId" in options.user ? options.user.contactId : options.user && "customerId" in options.user ? options.user.customerId : void 0;
       const contactId = options.user && "contactId" in options.user ? options.user.contactId : void 0;
       const customerId = options.user && "customerId" in options.user ? options.user.customerId : void 0;
@@ -2301,6 +2307,7 @@ function useProductSearch(options) {
         ...options.brand && { manufacturers: [options.brand] },
         ...options.textFilters?.length && { textFilters: options.textFilters },
         ...priceFilter && { price: priceFilter },
+        ...inventoryFilter && { inventory: inventoryFilter },
         ...sortInputs.length && { sortInputs },
         ...options.companyId && { companyId: options.companyId },
         ...userId !== void 0 && { userId },
@@ -2315,6 +2322,7 @@ function useProductSearch(options) {
       const filterAvailableAttributeInput = {
         isSearchable: true
       };
+      const attributeInput = buildAttributeInput(options.productTrackAttributes);
       const variables = {
         categoryId: catId,
         language: lang,
@@ -2322,7 +2330,8 @@ function useProductSearch(options) {
         priceCalculateProductInput,
         filterAvailableAttributeInput,
         imageSearchFilters: configuration?.imageSearchFiltersGrid,
-        imageVariantFilters: configuration?.imageVariantFiltersMedium
+        imageVariantFilters: configuration?.imageVariantFiltersMedium,
+        ...attributeInput && { attributeResultSearchInput: attributeInput }
       };
       const response = await service.getCategory(variables);
       if (thisId !== fetchIdRef.current) return;
@@ -2375,6 +2384,7 @@ function useProductSearch(options) {
     options.textFilters,
     options.priceFilterMin,
     options.priceFilterMax,
+    options.availability,
     options.sortField,
     options.sortOrder,
     options.companyId,
@@ -2383,7 +2393,9 @@ function useProductSearch(options) {
     taxZone,
     pageSize,
     pagination.currentPage,
-    configuration
+    configuration,
+    // Stringified: callers pass an array literal, so identity changes each render.
+    JSON.stringify(options.productTrackAttributes ?? [])
   ]);
   const search = useCallback(
     (term) => {
@@ -2412,6 +2424,7 @@ function useProductSearch(options) {
           const userId = options.user && "contactId" in options.user ? options.user.contactId : options.user && "customerId" in options.user ? options.user.customerId : void 0;
           const contactId = options.user && "contactId" in options.user ? options.user.contactId : void 0;
           const customerId = options.user && "customerId" in options.user ? options.user.customerId : void 0;
+          const inventoryFilter = buildInventoryFilter(options.availability);
           const categoryProductSearchInput = {
             language,
             page: 1,
@@ -2423,6 +2436,7 @@ function useProductSearch(options) {
               ProductStatus.S
             ],
             hidden: false,
+            ...inventoryFilter && { inventory: inventoryFilter },
             term,
             searchFields: [
               {
@@ -2462,13 +2476,15 @@ function useProductSearch(options) {
             ...contactId !== void 0 && { contactId },
             ...customerId !== void 0 && { customerId }
           };
+          const attributeInput = buildAttributeInput(options.productTrackAttributes);
           const variables = {
             categoryId: catId,
             language,
             categoryProductSearchInput,
             priceCalculateProductInput,
             imageSearchFilters: configuration?.imageSearchFiltersGrid,
-            imageVariantFilters: configuration?.imageVariantFiltersMedium
+            imageVariantFilters: configuration?.imageVariantFiltersMedium,
+            ...attributeInput && { attributeResultSearchInput: attributeInput }
           };
           const response = await service.getCategory(variables);
           const productsResponse = response?.products;
@@ -2487,7 +2503,7 @@ function useProductSearch(options) {
       }, 300);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [graphqlClient, language, configuration, userKey, JSON.stringify(options.orderlistIds ?? []), options.applyOrderlists]
+    [graphqlClient, language, configuration, userKey, JSON.stringify(options.orderlistIds ?? []), options.applyOrderlists, JSON.stringify(options.productTrackAttributes ?? [])]
   );
   useEffect(() => {
     if (!isControlled) fetchProducts();
@@ -2500,6 +2516,7 @@ function useProductSearch(options) {
     JSON.stringify(options.textFilters),
     options.priceFilterMin,
     options.priceFilterMax,
+    options.availability,
     options.sortField,
     options.sortOrder,
     pageSize,
@@ -9014,6 +9031,7 @@ function ProductGrid(rawProps) {
     brand: props.brand,
     orderlistIds: props.orderlistIds,
     applyOrderlists: props.applyOrderlists,
+    productTrackAttributes: props.productTrackAttributes,
     language: props.language,
     taxZone: props.taxZone,
     user: props.user,
@@ -9021,6 +9039,7 @@ function ProductGrid(rawProps) {
     textFilters: props.textFilters,
     priceFilterMin: props.priceFilterMin,
     priceFilterMax: props.priceFilterMax,
+    availability: props.availability,
     sortField: props.sortField,
     sortOrder: props.sortOrder,
     pageSize: props.pageSize,
@@ -9323,11 +9342,18 @@ function GridFilters(rawProps) {
   const [isPending, setIsPending] = useState(() => false);
   const [appliedMin, setAppliedMin] = useState(() => void 0);
   const [appliedMax, setAppliedMax] = useState(() => void 0);
+  const [availability, setAvailability] = useState(
+    () => [...props.activeAvailability || []]
+  );
   function showPriceFilter() {
     const mode = props.portalMode || "open";
     if (mode === "open") return true;
     return !!props.user;
   }
+  function showAvailability() {
+    if (!props.showAvailabilityFilter) return false;
+    return !isContentHidden(props.portalMode, props.user);
+  }
   function getFilterName(filter) {
     return filter?.attributeDescription?.name || "";
   }
@@ -9372,6 +9398,13 @@ function GridFilters(rawProps) {
     props.onFilterChange(filter, value);
     if (props.getSelectedFilters) props.getSelectedFilters();
   }
+  function handleAvailabilityToggle(value, checked) {
+    const next = checked ? [...availability, value] : availability.filter((v) => v !== value);
+    setAvailability(next);
+    setIsPending(true);
+    if (props.onAvailabilityChange) props.onAvailabilityChange(next);
+    if (props.getSelectedFilters) props.getSelectedFilters();
+  }
   function handleMinChange(value) {
     const n = value > currentMax ? currentMax : value;
     setCurrentMin(n);
@@ -9445,11 +9478,16 @@ function GridFilters(rawProps) {
     setCurrentMin(props.priceMin || 0);
     setCurrentMax(props.priceMax || 9999);
     setExpandedFilters({});
+    setAvailability([]);
   }, [props.clearSignal, props.priceMin, props.priceMax]);
   useEffect(() => {
     if (!props.activeTextFilters) return;
     setSelectedFilters(props.activeTextFilters);
   }, [props.activeTextFilters]);
+  useEffect(() => {
+    if (!props.activeAvailability) return;
+    setAvailability([...props.activeAvailability]);
+  }, [props.activeAvailability]);
   useEffect(() => {
     if (props.activePriceMin === void 0 && props.activePriceMax === void 0) {
       setCurrentMin(props.priceMin || 0);
@@ -9549,6 +9587,40 @@ function GridFilters(rawProps) {
           " ",
           /* @__PURE__ */ jsx("div", { className: "propeller-grid-filters__divider h-px bg-border-subtle" })
         ] }) : null,
+        showAvailability() ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "propeller-grid-filters__availability space-y-3", children: [
+            /* @__PURE__ */ jsx("h3", { className: "propeller-grid-filters__availability-title text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: getLabel(props.labels, "availability", "Availability") }),
+            /* @__PURE__ */ jsxs("div", { className: "propeller-grid-filters__availability-options space-y-1.5", children: [
+              /* @__PURE__ */ jsxs("label", { className: "propeller-grid-filters__option flex items-center gap-2 cursor-pointer group", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "propeller-grid-filters__checkbox h-4 w-4 rounded border-input text-secondary focus:ring-secondary cursor-pointer flex-shrink-0",
+                    checked: availability.includes("in-stock"),
+                    disabled: !!props.isLoading,
+                    onChange: (e) => handleAvailabilityToggle("in-stock", e.target.checked)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "propeller-grid-filters__option-label flex-1 text-sm text-muted-foreground leading-none select-none group-hover:text-foreground", children: getLabel(props.labels, "inStock", "In stock") })
+              ] }),
+              /* @__PURE__ */ jsxs("label", { className: "propeller-grid-filters__option flex items-center gap-2 cursor-pointer group", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "propeller-grid-filters__checkbox h-4 w-4 rounded border-input text-secondary focus:ring-secondary cursor-pointer flex-shrink-0",
+                    checked: availability.includes("out-of-stock"),
+                    disabled: !!props.isLoading,
+                    onChange: (e) => handleAvailabilityToggle("out-of-stock", e.target.checked)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "propeller-grid-filters__option-label flex-1 text-sm text-muted-foreground leading-none select-none group-hover:text-foreground", children: getLabel(props.labels, "outOfStock", "Out of stock") })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "propeller-grid-filters__divider h-px bg-border-subtle" })
+        ] }) : null,
         props.filters.length === 0 ? /* @__PURE__ */ jsx("p", { className: "propeller-grid-filters__empty text-sm text-foreground-subtle italic", children: getLabel(props.labels, "noFiltersAvailable", "No filters available") }) : null,
         getFilteredFilters()?.map((filter) => /* @__PURE__ */ jsxs("div", { className: "propeller-grid-filters__group border-b border-border-subtle pb-3 last:border-b-0", "data-expanded": isExpanded(getFilterName(filter)) ? "true" : "false", children: [
           /* @__PURE__ */ jsxs(
@@ -9724,6 +9796,8 @@ var DEFAULT_LABELS = {
   results: "results",
   perPage: " per page",
   price: "Price",
+  inStock: "In stock",
+  outOfStock: "Out of stock",
   switchToList: "Switch to list view",
   switchToGrid: "Switch to grid view"
 };
@@ -9752,7 +9826,8 @@ function GridToolbar(rawProps) {
     const text = props.activeTextFilters || {};
     const hasText = Object.keys(text).some((k) => (text[k] || []).length > 0);
     const hasPrice = props.priceFilterMin !== void 0 || props.priceFilterMax !== void 0;
-    return hasText || hasPrice;
+    const hasAvailability = (props.availability || []).length > 0;
+    return hasText || hasPrice || hasAvailability;
   }
   function getActiveFilterBadges() {
     const text = props.activeTextFilters || {};
@@ -9770,6 +9845,9 @@ function GridToolbar(rawProps) {
   function isPriceSortDisabled() {
     return isContentHidden(props.portalMode, props.user);
   }
+  function getAvailabilityLabel(value) {
+    return value === "in-stock" ? getLabel56("inStock") : getLabel56("outOfStock");
+  }
   function handleSortFieldChange(field) {
     setCurrentSortField(field);
     if (props.onSortChange) props.onSortChange(field, currentSortOrder);
@@ -9943,6 +10021,20 @@ function GridToolbar(rawProps) {
               ]
             }
           ) : null,
+          (props.availability || []).map((value) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "propeller-grid-toolbar__filter-badge propeller-grid-toolbar__filter-badge--availability inline-flex items-center gap-1 cursor-pointer px-2.5 py-0.5 rounded-full text-xs font-semibold border border-input bg-background hover:bg-primary hover:text-primary-foreground hover:border-primary transition-colors",
+              onClick: (event) => {
+                if (props.onAvailabilityFilterRemove) props.onAvailabilityFilterRemove(value);
+              },
+              children: [
+                getAvailabilityLabel(value),
+                /* @__PURE__ */ jsx("span", { className: "propeller-grid-toolbar__filter-badge-remove", children: "\xD7" })
+              ]
+            },
+            value
+          )),
           getActiveFilterBadges()?.map((badge) => /* @__PURE__ */ jsxs(
             "span",
             {
@@ -18376,7 +18468,8 @@ function SearchBar(rawProps) {
     user: props.user,
     companyId: props.companyId,
     orderlistIds: props.orderlistIds,
-    applyOrderlists: props.applyOrderlists
+    applyOrderlists: props.applyOrderlists,
+    productTrackAttributes: props.productTrackAttributes
   });
   const results = searchResults.slice(0, maxResults).map((item) => mapToSearchBarResult(item, props.language));
   const itemsFound = searchItemsFound;