@phillips/seldon 1.169.0 → 1.169.1

package/dist/patterns/FiltersInline/FilterButton.js

@@ -1,35 +1,36 @@
 import { jsxs as p, jsx as e } from "react/jsx-runtime";
 import u from "../../node_modules/classnames/index.js";
 import b from "react";
-import h from "../../components/Button/Button.js";
-import { ButtonVariants as $ } from "../../components/Button/types.js";
+import $ from "../../components/Button/Button.js";
+import { ButtonVariants as h } from "../../components/Button/types.js";
 import x from "../../components/Icon/Icon.js";
 import { TextVariants as v } from "../../components/Text/types.js";
-import w from "../../components/Text/Text.js";
+import F from "../../components/Text/Text.js";
 import { px as t } from "../../utils/index.js";
-import { getIcon as B } from "./utils.js";
-const F = b.forwardRef(
-  ({ className: m, label: n, onClick: l, isSelected: a, type: r = "ChevronDown", count: s, id: o, ariaLabel: f, isMobile: c, totalCount: i }, d) => /* @__PURE__ */ p(
-    h,
+import { getIcon as w } from "./utils.js";
+const B = b.forwardRef(
+  ({ className: m, label: n, onClick: l, isSelected: a, type: r = "ChevronDown", count: s, id: i, ariaLabel: f, isMobile: c, totalCount: o }, d) => /* @__PURE__ */ p(
+    $,
     {
       ref: d,
       className: u(`${t}-filter-button`, m, {
-        [`${t}-filter-button--selected`]: a || s > 0 || r === "Filter" && i > 0
+        [`${t}-filter-button--selected`]: a || s > 0 || r === "Filter" && o > 0,
+        [`${t}-filter-button--filter`]: r === "Filter"
       }),
       "aria-label": f,
-      variant: $.secondary,
-      "data-testid": `${o}-filter-button`,
+      variant: h.secondary,
+      "data-testid": `${i}-filter-button`,
       "data-viewport": c ? "mobile" : "desktop",
       onClick: l,
       children: [
-        /* @__PURE__ */ e(w, { variant: v.string2, "data-testid": `${o}-filter-label`, children: n }),
-        /* @__PURE__ */ e(x, { icon: B(r, a), height: 8, width: 8, className: `${t}__icon` }),
-        i > 0 && r === "Filter" && /* @__PURE__ */ e("div", { className: `${t}-filter-button--count`, "data-testid": `${o}-filter-count`, children: i })
+        /* @__PURE__ */ e(F, { variant: v.string2, "data-testid": `${i}-filter-label`, children: n }),
+        /* @__PURE__ */ e(x, { icon: w(r, a), height: 8, width: 8, className: `${t}__icon` }),
+        o > 0 && r === "Filter" && /* @__PURE__ */ e("div", { className: `${t}-filter-button--count`, "data-testid": `${i}-filter-count`, children: o })
       ]
     }
   )
 );
-F.displayName = "FilterButton";
+B.displayName = "FilterButton";
 export {
-  F as FilterButton
+  B as FilterButton
 };

package/dist/patterns/FiltersInline/FiltersInline.d.ts

@@ -1,5 +1,24 @@
 import { default as React } from 'react';
-import { FiltersInlineProps } from './types';
+import { BaseFilterProps, DropdownMenuTranslation, FilterButtonType } from './types';
+/**
+ * Props for the FiltersInline component (main component).
+ */
+export interface FiltersInlineProps extends BaseFilterProps {
+    /** Unique id for component testing */
+    id: string;
+    /** Handler for filter button click */
+    handleFilterClick?: () => void;
+    /** List of states for the filter buttons */
+    filtersListState?: boolean[];
+    /** Setter for the filter button states */
+    setFiltersLabelListState?: (state: boolean[]) => void;
+    /** Main filter button type (e.g., 'Filter', 'Sort') */
+    mainFilterLabel: FilterButtonType;
+    /** Object containing translated strings for dropdown menu actions.*/
+    dropdownMenuTranslation?: DropdownMenuTranslation;
+    /** Whether to hide the desktop sort button */
+    hideDesktopSortButton?: boolean;
+}
 /**
  * ## Overview
  *

package/dist/patterns/FiltersInline/FiltersInline.js

@@ -1,10 +1,10 @@
-import { jsxs as I, jsx as u } from "react/jsx-runtime";
-import N from "../../node_modules/classnames/index.js";
-import h from "react";
-import { getCommonProps as x } from "../../utils/index.js";
-import { MainFilterDropdown as T } from "./MainFilterDropdown.js";
-import { SubFilterDropdown as j } from "./SubFilterDropdown.js";
-const w = h.forwardRef(
+import { jsxs as N, jsx as u } from "react/jsx-runtime";
+import h from "../../node_modules/classnames/index.js";
+import x from "react";
+import { getCommonProps as T } from "../../utils/index.js";
+import { MainFilterDropdown as j } from "./MainFilterDropdown.js";
+import { SubFilterDropdown as w } from "./SubFilterDropdown.js";
+const y = x.forwardRef(
   ({
     id: o,
     className: c,
@@ -17,12 +17,13 @@ const w = h.forwardRef(
     resultsCount: b,
     mainFilterLabel: m,
     dropdownMenuTranslation: p,
-    ...d
-  }, f) => {
-    const { className: $, ...i } = x({ id: o, ...d }, "FiltersInline");
-    return /* @__PURE__ */ I("div", { ref: f, className: N($, c), ...i, id: o, children: [
+    hideDesktopSortButton: d = !0,
+    ...f
+  }, $) => {
+    const { className: i, ...B } = T({ id: o, ...f }, "FiltersInline");
+    return /* @__PURE__ */ N("div", { ref: $, className: h(i, c), ...B, id: o, children: [
       /* @__PURE__ */ u(
-        T,
+        j,
         {
           id: `${o}-${m}-button`,
           filterButtonLabel: m,
@@ -37,29 +38,30 @@ const w = h.forwardRef(
         },
         `${o}-${m}-button`
       ),
-      a?.map((t, B) => /* @__PURE__ */ u(
-        j,
+      a?.map((t, I) => /* @__PURE__ */ u(
+        w,
         {
           id: `${o}-${t.label}-button`,
           filterButtonLabel: t.label,
           buttonType: t.buttonType,
           handleClick: r,
           filtersListState: n,
-          filterId: B + 1,
+          filterId: I + 1,
           filters: a,
           onSelectFilter: e,
           onApplyFilter: l,
           onClickClear: s,
           resultsCount: b,
           filterButtonLabelTranslated: t.filterButtonLabelTranslated,
-          dropdownMenuTranslation: p
+          dropdownMenuTranslation: p,
+          hideDesktopSortButton: d
         },
         `${o}-${t.label}-button`
       ))
     ] });
   }
 );
-w.displayName = "FiltersInline";
+y.displayName = "FiltersInline";
 export {
-  w as default
+  y as default
 };

package/dist/patterns/FiltersInline/FiltersInline.stories.d.ts

@@ -4,7 +4,7 @@ import { FilterDropdownMenuProps, FilterType } from './types';
  */
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<import('./types').FiltersInlineProps & import('react').RefAttributes<HTMLDivElement>>;
+    component: import('react').ForwardRefExoticComponent<import('./FiltersInline').FiltersInlineProps & import('react').RefAttributes<HTMLDivElement>>;
 };
 export default meta;
 export declare const Playground: {

package/dist/patterns/FiltersInline/MainFilterDropdown.js

@@ -1,66 +1,67 @@
-import { jsxs as n, Fragment as A, jsx as o } from "react/jsx-runtime";
+import { jsxs as l, Fragment as A, jsx as o } from "react/jsx-runtime";
 import N from "../../node_modules/classnames/index.js";
 import x from "react";
-import p from "../../components/Button/Button.js";
+import c from "../../components/Button/Button.js";
 import { ButtonVariants as g } from "../../components/Button/types.js";
 import k from "../../components/Drawer/Drawer.js";
-import D from "../../components/Filter/Filter.js";
-import M from "../../components/Filter/FilterHeader.js";
-import j from "../../components/Filter/FilterInput.js";
+import B from "../../components/Filter/Filter.js";
+import D from "../../components/Filter/FilterHeader.js";
+import M from "../../components/Filter/FilterInput.js";
 import { px as t } from "../../utils/index.js";
-import B from "../FilterMenu/FilterMenu.js";
+import j from "../FilterMenu/FilterMenu.js";
 import { FilterButton as H } from "./FilterButton.js";
+import { FilterButtonIconType as I } from "./types.js";
 import { countActiveFilters as O, getFilterButtonClickHandler as R, resetAllFilters as S } from "./utils.js";
-const I = x.forwardRef(
+const T = x.forwardRef(
   ({
     className: f,
-    filterButtonLabel: l,
-    handleClick: i,
-    filtersListState: a,
+    filterButtonLabel: n,
+    handleClick: a,
+    filtersListState: i,
     filters: m,
     onSelectFilter: u,
-    onApplyFilter: w,
-    onClickClear: b,
+    onApplyFilter: b,
+    onClickClear: w,
     resultsCount: F,
     dropdownMenuTranslation: d,
     ariaLabels: s = {},
     id: h
   }, _) => {
-    const c = a?.[0] ?? !1, { totalCount: C, filterCount: $ } = O(m, l);
-    return /* @__PURE__ */ n(A, { children: [
+    const p = i?.[0] ?? !1, { totalCount: y, filterCount: C } = O(m, n);
+    return /* @__PURE__ */ l(A, { children: [
       /* @__PURE__ */ o(
         H,
         {
           ref: _,
           className: f,
-          isSelected: c,
-          count: $,
-          label: l,
-          totalCount: C,
+          isSelected: p,
+          count: C,
+          label: n,
+          totalCount: y,
           id: h,
-          ariaLabel: s.button || `${l} button`,
-          onClick: R(a, i, 0),
+          ariaLabel: s.button || `${n} button`,
+          onClick: R(i, a, 0),
           isMobile: !1,
-          type: l
+          type: I.Filter
         }
       ),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ l(
         k,
         {
-          isOpen: c,
+          isOpen: p,
           drawerOpenSide: "left",
-          onClose: () => S(a, i),
+          onClose: () => S(i, a),
           className: `${t}-filter-drawer`,
           "aria-label": s.drawer || "Filter drawer",
           children: [
-            /* @__PURE__ */ o(B, { className: `${t}-filter-drawer-menu`, children: m?.map((r) => /* @__PURE__ */ n(D, { name: r.label, children: [
-              /* @__PURE__ */ o(M, { heading: r.label }),
+            /* @__PURE__ */ o(j, { className: `${t}-filter-drawer-menu`, children: m?.map((r) => /* @__PURE__ */ l(B, { name: r.label, children: [
+              /* @__PURE__ */ o(D, { heading: r.label }),
               Array.from(r.filterDimensions).map((e) => /* @__PURE__ */ o(
-                j,
+                M,
                 {
                   id: e.label,
                   labelText: e.label,
-                  onChange: (y) => u?.(y, r.label),
+                  onChange: ($) => u?.($, r.buttonType),
                   type: r.type,
                   disabled: e?.disabled,
                   name: e.label,
@@ -69,7 +70,7 @@ const I = x.forwardRef(
                 e.label
               ))
             ] }, r.id)) }),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ l(
               "div",
               {
                 className: N(
@@ -78,15 +79,15 @@ const I = x.forwardRef(
                 ),
                 children: [
                   /* @__PURE__ */ o(
-                    p,
+                    c,
                     {
                       className: `${t}-filter-dropdown-menu__button`,
                       variant: g.secondary,
-                      onClick: () => b?.("all"),
+                      onClick: () => w?.("all"),
                       children: d?.clearAll || "Clear all"
                     }
                   ),
-                  /* @__PURE__ */ o(p, { className: `${t}-filter-dropdown-menu__button`, onClick: () => w?.(!1), children: d?.showAuctions || `Show ${F} Auctions` })
+                  /* @__PURE__ */ o(c, { className: `${t}-filter-dropdown-menu__button`, onClick: () => b?.(!1), children: d?.showAuctions || `Show ${F} Auctions` })
                 ]
               }
             )
@@ -96,7 +97,7 @@ const I = x.forwardRef(
     ] });
   }
 );
-I.displayName = "MainFilterDropdown";
+T.displayName = "MainFilterDropdown";
 export {
-  I as MainFilterDropdown
+  T as MainFilterDropdown
 };

package/dist/patterns/FiltersInline/SubFilterDropdown.js

@@ -1,72 +1,74 @@
-import { jsxs as g, Fragment as R, jsx as o } from "react/jsx-runtime";
-import { Root as S, Trigger as j, Portal as v, Content as P } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
+import { jsxs as g, Fragment as S, jsx as o } from "react/jsx-runtime";
+import { Root as f, Trigger as j, Portal as v, Content as P } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
 import _ from "react";
-import f from "../../components/Drawer/Drawer.js";
+import q from "../../components/Drawer/Drawer.js";
 import { SSRMediaQuery as D } from "../../providers/SeldonProvider/utils.js";
-import { px as q } from "../../utils/index.js";
+import { px as E } from "../../utils/index.js";
 import { FilterButton as O } from "./FilterButton.js";
-import { FilterDropdownMenuDesktop as E } from "./FilterDropdownMenuDesktop.js";
-import { FilterDropdownMenuMobile as H } from "./FilterDropdownMenuMobile.js";
-import { countActiveFilters as N, getFilterButtonClickHandler as t, getFilterButtonLabel as Q } from "./utils.js";
-const k = _.forwardRef(
+import { FilterDropdownMenuDesktop as H } from "./FilterDropdownMenuDesktop.js";
+import { FilterDropdownMenuMobile as N } from "./FilterDropdownMenuMobile.js";
+import { FilterButtonType as Q } from "./types.js";
+import { countActiveFilters as k, getFilterButtonClickHandler as d, getFilterButtonLabel as z } from "./utils.js";
+const A = _.forwardRef(
   ({
     filterId: e = 0,
-    className: u,
+    className: w,
     filterButtonLabel: r,
-    buttonType: i,
+    buttonType: n,
     handleClick: m,
     filtersListState: a,
-    filters: c,
-    onSelectFilter: w,
+    filters: l,
+    onSelectFilter: b,
     onApplyFilter: h,
     onClickClear: F,
     resultsCount: $,
-    filterButtonLabelTranslated: l,
+    filterButtonLabelTranslated: c,
     dropdownMenuTranslation: M,
-    ariaLabels: n = {},
+    ariaLabels: i = {},
+    hideDesktopSortButton: R,
     id: p
   }, x) => {
-    const d = a?.[e] ?? !1, { totalCount: C, filterCount: s } = N(c, i), b = Q(r, s, l || null);
-    return /* @__PURE__ */ g(R, { children: [
+    const t = a?.[e] ?? !1, { totalCount: C, filterCount: s } = k(l, n), u = z(r, s, c || null);
+    return R && n === Q.Sort ? null : /* @__PURE__ */ g(S, { children: [
       /* @__PURE__ */ g(D.Media, { lessThan: "md", children: [
         /* @__PURE__ */ o(
           O,
           {
             ref: x,
-            className: u,
-            isSelected: d,
+            className: w,
+            isSelected: t,
             count: s,
-            label: b,
+            label: u,
             id: p,
             totalCount: C,
-            ariaLabel: n.button || `${r} button`,
-            onClick: t(a, m, e),
+            ariaLabel: i.button || `${r} button`,
+            onClick: d(a, m, e),
             isMobile: !0,
-            type: i
+            type: n
           }
         ),
         /* @__PURE__ */ o(
-          f,
+          q,
           {
             drawerOpenSide: "bottom",
-            isOpen: d,
-            onClose: t(a, m, e),
-            "aria-label": n.drawer || `${r} drawer`,
-            className: `${q}-filter-drawer-mobile`,
-            bottomContentLabel: `${b} Filter`,
+            isOpen: t,
+            onClose: d(a, m, e),
+            "aria-label": i.drawer || `${r} drawer`,
+            className: `${E}-filter-drawer-mobile`,
+            bottomContentLabel: `${u} Filter`,
             children: /* @__PURE__ */ o(
-              H,
+              N,
               {
-                buttonType: i,
-                filters: c,
+                buttonType: n,
+                filters: l,
                 filterIndex: e,
-                onSelectFilter: w,
+                onSelectFilter: b,
                 onApplyFilter: h,
                 onClickClear: F,
                 resultsCount: $,
-                ariaLabels: n?.ariaLabel,
+                ariaLabels: i?.ariaLabel,
                 filterButtonLabel: r,
-                filterButtonLabelTranslated: l,
+                filterButtonLabelTranslated: c,
                 dropdownMenuTranslation: M
               }
             )
@@ -74,25 +76,25 @@ const k = _.forwardRef(
         )
       ] }),
       /* @__PURE__ */ o(D.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ g(
-        S,
+        f,
         {
-          open: d,
-          onOpenChange: t(a, m, e),
+          open: t,
+          onOpenChange: d(a, m, e),
           children: [
             /* @__PURE__ */ o(j, { asChild: !0, children: /* @__PURE__ */ o(
               O,
               {
                 ref: x,
-                className: u,
-                isSelected: d,
+                className: w,
+                isSelected: t,
                 count: s,
-                label: b,
+                label: u,
                 totalCount: C,
                 id: p,
-                ariaLabel: n.ariaLabel || `${r} button`,
-                onClick: t(a, m, e),
+                ariaLabel: i.ariaLabel || `${r} button`,
+                onClick: d(a, m, e),
                 isMobile: !1,
-                type: i
+                type: n
               }
             ) }),
             /* @__PURE__ */ o(v, { children: /* @__PURE__ */ o(
@@ -103,20 +105,20 @@ const k = _.forwardRef(
                 sideOffset: 5,
                 align: "start",
                 alignOffset: 5,
-                "aria-label": n.ariaLabel || `${r} dropdown`,
+                "aria-label": i.ariaLabel || `${r} dropdown`,
                 children: /* @__PURE__ */ o(
-                  E,
+                  H,
                   {
-                    buttonType: i,
-                    filters: c,
+                    buttonType: n,
+                    filters: l,
                     filterIndex: e,
-                    onSelectFilter: w,
+                    onSelectFilter: b,
                     onApplyFilter: h,
                     onClickClear: F,
                     resultsCount: $,
-                    ariaLabels: n?.ariaLabel,
+                    ariaLabels: i?.ariaLabel,
                     filterButtonLabel: r,
-                    filterButtonLabelTranslated: l,
+                    filterButtonLabelTranslated: c,
                     dropdownMenuTranslation: M
                   }
                 )
@@ -129,7 +131,7 @@ const k = _.forwardRef(
     ] });
   }
 );
-k.displayName = "SubFilterDropdown";
+A.displayName = "SubFilterDropdown";
 export {
-  k as SubFilterDropdown
+  A as SubFilterDropdown
 };

package/dist/patterns/FiltersInline/types.d.ts

@@ -7,8 +7,9 @@ export declare enum FilterButtonType {
     Sort = "Sort",// Sort filter
     Sale = "Sale",// Sale filter
     Departments = "Departments",// Departments filter
+    Location = "Location",// Location filter
     Month = "Month",// Month filter
-    Location = "Location"
+    Empty = ""
 }
 /**
  * Enum for the icon types used in filter buttons.
@@ -105,23 +106,6 @@ export interface FilterButtonAriaLabels {
     /** Aria-label for filter button */
     ariaLabel?: string;
 }
-/**
- * Props for the FiltersInline component (main component).
- */
-export interface FiltersInlineProps extends BaseFilterProps {
-    /** Unique id for component testing */
-    id: string;
-    /** Handler for filter button click */
-    handleFilterClick?: () => void;
-    /** List of states for the filter buttons */
-    filtersListState?: boolean[];
-    /** Setter for the filter button states */
-    setFiltersLabelListState?: (state: boolean[]) => void;
-    /** Main filter button type (e.g., 'Filter', 'Sort') */
-    mainFilterLabel: FilterButtonType;
-    /** Object containing translated strings for dropdown menu actions.*/
-    dropdownMenuTranslation?: DropdownMenuTranslation;
-}
 /**
  * Props for an individual filter button.
  */
@@ -146,6 +130,8 @@ export interface FilterDropdownProps extends BaseFilterProps {
     filterButtonLabelTranslated?: string;
     /** Object containing translated strings for dropdown menu actions.*/
     dropdownMenuTranslation?: DropdownMenuTranslation;
+    /** Whether to hide the desktop sort button */
+    hideDesktopSortButton?: boolean;
 }
 /**
  * Object containing translated strings for dropdown menu actions.

package/dist/patterns/FiltersInline/types.js

@@ -1,4 +1,5 @@
-var r = /* @__PURE__ */ ((a) => (a.Filter = "Filter", a.Sort = "Sort", a.Sale = "Sale", a.Departments = "Departments", a.Month = "Month", a.Location = "Location", a))(r || {});
+var a = /* @__PURE__ */ ((r) => (r.Filter = "Filter", r.Sort = "Sort", r.Sale = "Sale", r.Departments = "Departments", r.Location = "Location", r.Month = "Month", r.Empty = "", r))(a || {}), h = /* @__PURE__ */ ((r) => (r.Filter = "Filter", r.Sort = "Sort", r.ChevronUp = "ChevronUp", r.ChevronDown = "ChevronDown", r))(h || {});
 export {
-  r as FilterButtonType
+  h as FilterButtonIconType,
+  a as FilterButtonType
 };

package/dist/patterns/FiltersInline/utils.d.ts

@@ -17,6 +17,12 @@ export declare const FiltersInlineFilters: {
         value: string;
         active: boolean;
     }[];
+    Location: {
+        id: string;
+        label: string;
+        value: string;
+        active: boolean;
+    }[];
     Month: ({
         id: string;
         label: string;
@@ -30,12 +36,6 @@ export declare const FiltersInlineFilters: {
         active: boolean;
         disabled: boolean;
     })[];
-    Location: {
-        id: string;
-        label: string;
-        value: string;
-        active: boolean;
-    }[];
 };
 export declare const SalesMockData: {
     auctionType: string;

package/dist/patterns/FiltersInline/utils.js

@@ -1,5 +1,5 @@
 import { FilterButtonType as e } from "./types.js";
-e.Filter, e.Sort, e.Sale, e.Departments, e.Month, e.Location;
+e.Filter, e.Sort, e.Sale, e.Departments, e.Location, e.Month;
 const f = (n, t) => {
   if (!n) return { totalCount: 0, filterCount: 0 };
   const r = n.filter((o) => o.id !== "Sort").reduce(

package/dist/scss/patterns/FiltersInline/_filterButton.scss

@@ -3,12 +3,16 @@
 .#{$px}-filter-button {
   border: 1px solid $light-gray;
   gap: 4px;
-  padding: $spacing-xsm $spacing-sm;
+  padding: $spacing-xsm $spacing-xsm;
 
   &--selected {
     border: 1px solid $pure-black;
   }
 
+  &--filter {
+    border-radius: 8px;
+  }
+
   &--count {
     background: $pure-black;
     border: 2px solid $white;

package/dist/scss/patterns/FiltersInline/_filterDropdownMenu.scss

@@ -35,6 +35,10 @@
       gap: $spacing-xl;
       padding: $spacing-md;
       width: 100%;
+
+      @media (min-width: $breakpoint-xl) {
+        gap: 0;
+      }
     }
   }
 

package/dist/scss/patterns/FiltersInline/_filtersInline.scss

@@ -1,4 +1,4 @@
-@use '../../scss/allPartials' as *;
+@use '../../allPartials' as *;
 
 .#{$px}-filters-inline {
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.169.0",
+  "version": "1.169.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"