@phillips/seldon 1.270.0 → 1.272.0

package/dist/patterns/FiltersInline/SubFilterDropdown.js

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

package/dist/patterns/FiltersInline/utils.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./types.cjs");r.FilterButtonType.Filter,r.FilterButtonType.Sort,r.FilterButtonType.Sale,r.FilterButtonType.Departments,r.FilterButtonType.Location,r.FilterButtonType.Month,r.FilterButtonType.Year;const s=(t,e)=>{if(!t)return{totalCount:0,filterCount:0};const o=t.filter(n=>n.id!=="Sort").reduce((n,i)=>n+Array.from(i.filterDimensions).filter(l=>l.active).length,0),u=e==="Sort"?0:(()=>{const n=t.find(i=>i.id===e)?.filterDimensions;return n?Array.from(n).filter(i=>i.active).length:0})();return{totalCount:o,filterCount:u}},c=(t,e)=>t&&typeof e=="number"&&t[e-1]&&t[e-1].filterDimensions?Array.from(t[e-1].filterDimensions):[],F=(t,e)=>t==="Filter"?"Filters":e?"ChevronUp":"ChevronDown",a=(t,e,o)=>()=>{t&&e&&e(t.map((u,n)=>n===o?!u:!1))};function f(t,e,o){o&&o(t,e)}function m(t,e){t&&e&&e(t.map(()=>!1))}function p(t,e){return e||`${t}`}exports.countActiveFilters=s;exports.getFilterButtonClickHandler=a;exports.getFilterButtonLabel=p;exports.getFilterDimensions=c;exports.getIcon=F;exports.handleInputChange=f;exports.resetAllFilters=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./types.cjs");i.FilterButtonType.Filter,i.FilterButtonType.Sort,i.FilterButtonType.Sale,i.FilterButtonType.Departments,i.FilterButtonType.Location,i.FilterButtonType.Month,i.FilterButtonType.Year;const l=(t,e)=>{if(!t)return{totalCount:0,filterCount:0};const r=t.filter(n=>n.id!=="Sort").reduce((n,s)=>n+Array.from(s.filterDimensions).filter(u=>u.active).length,0),o=e==="Sort"?0:(()=>{const n=t.find(s=>s.id===e)?.filterDimensions;return n?Array.from(n).filter(s=>s.active).length:0})();return{totalCount:r,filterCount:o}},c=(t,e,r)=>{if(!t)return!1;const o=t.find(n=>n.id===e)?.filterDimensions??(typeof r=="number"?t[r-1]?.filterDimensions:void 0);return o?Array.from(o).some(n=>n.active):!1},a=(t,e)=>t&&typeof e=="number"&&t[e-1]&&t[e-1].filterDimensions?Array.from(t[e-1].filterDimensions):[],f=(t,e)=>t==="Filter"?"Filters":e?"ChevronUp":"ChevronDown",m=(t,e,r)=>()=>{t&&e&&e(t.map((o,n)=>n===r?!o:!1))};function F(t,e,r){r&&r(t,e)}function p(t,e){t&&e&&e(t.map(()=>!1))}function y(t,e){return e||`${t}`}exports.countActiveFilters=l;exports.getFilterButtonClickHandler=m;exports.getFilterButtonLabel=y;exports.getFilterDimensions=a;exports.getIcon=f;exports.handleInputChange=F;exports.hasActiveDimensions=c;exports.resetAllFilters=p;

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

@@ -48,6 +48,10 @@ export declare const countActiveFilters: (filters?: FilterType[], buttonType?: s
     totalCount: number;
     filterCount: number;
 };
+export declare const hasActiveDimensions: (filters: {
+    id?: string;
+    filterDimensions: Set<FilterDimension>;
+}[] | undefined, buttonType?: string, filterIndex?: number) => boolean;
 export declare const getFilterDimensions: (filters: {
     filterDimensions: Set<FilterDimension>;
 }[] | undefined, filterIndex: number | undefined) => FilterDimension[];

package/dist/patterns/FiltersInline/utils.js

@@ -1,33 +1,38 @@
 import { FilterButtonType as o } from "./types.js";
 o.Filter, o.Sort, o.Sale, o.Departments, o.Location, o.Month, o.Year;
-const c = (t, r) => {
-  if (!t) return { totalCount: 0, filterCount: 0 };
-  const e = t.filter((n) => n.id !== "Sort").reduce(
-    (n, i) => n + Array.from(i.filterDimensions).filter((f) => f.active).length,
+const m = (n, t) => {
+  if (!n) return { totalCount: 0, filterCount: 0 };
+  const e = n.filter((r) => r.id !== "Sort").reduce(
+    (r, s) => r + Array.from(s.filterDimensions).filter((u) => u.active).length,
     0
-  ), u = r === "Sort" ? 0 : (() => {
-    const n = t.find((i) => i.id === r)?.filterDimensions;
-    return n ? Array.from(n).filter((i) => i.active).length : 0;
+  ), i = t === "Sort" ? 0 : (() => {
+    const r = n.find((s) => s.id === t)?.filterDimensions;
+    return r ? Array.from(r).filter((s) => s.active).length : 0;
   })();
-  return { totalCount: e, filterCount: u };
-}, m = (t, r) => t && typeof r == "number" && t[r - 1] && t[r - 1].filterDimensions ? Array.from(t[r - 1].filterDimensions) : [], l = (t, r) => t === "Filter" ? "Filters" : r ? "ChevronUp" : "ChevronDown", a = (t, r, e) => () => {
-  t && r && r(t.map((u, n) => n === e ? !u : !1));
+  return { totalCount: e, filterCount: i };
+}, c = (n, t, e) => {
+  if (!n) return !1;
+  const i = n.find((r) => r.id === t)?.filterDimensions ?? (typeof e == "number" ? n[e - 1]?.filterDimensions : void 0);
+  return i ? Array.from(i).some((r) => r.active) : !1;
+}, a = (n, t) => n && typeof t == "number" && n[t - 1] && n[t - 1].filterDimensions ? Array.from(n[t - 1].filterDimensions) : [], l = (n, t) => n === "Filter" ? "Filters" : t ? "ChevronUp" : "ChevronDown", D = (n, t, e) => () => {
+  n && t && t(n.map((i, r) => r === e ? !i : !1));
 };
-function p(t, r, e) {
-  e && e(t, r);
+function p(n, t, e) {
+  e && e(n, t);
 }
-function D(t, r) {
-  t && r && r(t.map(() => !1));
+function v(n, t) {
+  n && t && t(n.map(() => !1));
 }
-function F(t, r) {
-  return r || `${t}`;
+function F(n, t) {
+  return t || `${n}`;
 }
 export {
-  c as countActiveFilters,
-  a as getFilterButtonClickHandler,
+  m as countActiveFilters,
+  D as getFilterButtonClickHandler,
   F as getFilterButtonLabel,
-  m as getFilterDimensions,
+  a as getFilterDimensions,
   l as getIcon,
   p as handleInputChange,
-  D as resetAllFilters
+  c as hasActiveDimensions,
+  v as resetAllFilters
 };

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

@@ -1,15 +1,16 @@
 @use '../../allPartials' as *;
 
 $dropdown-height: 240px;
+$dropdown-width: 320px;
 
 .#{$px}-filter-dropdown-menu {
   background: $white-100;
-  border-radius: $radius-sm;
+  border-radius: $radius-xs;
   box-shadow: 0 4px 6px $medium-gray;
   display: flex;
   flex-direction: column;
-  min-width: 100%;
   padding: $spacing-sm 0;
+  width: $dropdown-width;
 
   &__filters {
     display: flex;
@@ -37,6 +38,17 @@ $dropdown-height: 240px;
     justify-content: space-between;
     padding: $spacing-sm $spacing-sm 0 $spacing-sm;
 
+    > .#{$px}-button {
+      display: inline-flex;
+      flex: 1 1 0;
+      justify-content: center;
+      margin: 0;
+      max-width: none;
+      min-width: 0;
+      text-align: center;
+      white-space: nowrap;
+    }
+
     &--drawer {
       box-shadow: 0 -4px 8px -4px $medium-gray;
       display: flex;
@@ -50,6 +62,7 @@ $dropdown-height: 240px;
 
   &__mobile-wrap {
     box-shadow: 0 -4px 8px -4px $medium-gray;
+    padding-bottom: calc(#{$spacing-sm} + env(safe-area-inset-bottom));
   }
 
   &__header {
@@ -76,37 +89,14 @@ $dropdown-height: 240px;
     }
   }
 
-  &__buttons {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    &--left {
-      margin-left: auto;
-      margin-right: 0;
-    }
-
-    &--right {
-      margin-left: 0;
-      margin-right: auto;
-    }
-
-    &--mobile {
-      display: block;
-      margin-bottom: $spacing-md;
-      margin-top: $spacing-sm;
-      width: 45%;
-    }
-  }
-
   &__button-text {
     color: $white-100;
   }
 
   &--mobile {
-    border-radius: $radius-sm $radius-sm 0 0;
+    border-radius: $radius-xs $radius-xs 0 0;
     box-shadow: none;
+    height: 100%;
     padding: 0;
     width: 100vw;
   }
@@ -131,7 +121,37 @@ $dropdown-height: 240px;
   }
   .#{$px}-input__input[type='checkbox'] {
     align-self: center;
+    appearance: none;
+    background: $bg-default;
+    border: 1px solid $bg-inverted;
+    border-radius: $radius-xs;
+    display: grid;
+    height: 16px;
+    margin-bottom: 0;
     margin-left: auto;
+    padding: 0;
+    place-content: center;
+    width: 16px;
+
+    &::after {
+      background: $text-inverted;
+      content: '';
+      height: 11px;
+      mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-linecap='square' stroke-width='2'/%3E%3C/svg%3E");
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: 16px 11px;
+      opacity: 0;
+      width: 16px;
+    }
+
+    &:checked {
+      background: $bg-inverted;
+
+      &::after {
+        opacity: 1;
+      }
+    }
   }
 }
 
@@ -140,5 +160,44 @@ $dropdown-height: 240px;
 }
 
 .#{$px}-filter-drawer-mobile {
+  height: min(70dvh, 640px);
   padding: 0;
+
+  .#{$px}-drawer__content {
+    flex: 1 1 auto;
+    height: auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .#{$px}-filter-dropdown-menu--mobile {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .#{$px}-filter-dropdown-menu__filters--mobile {
+    flex: 1 1 auto;
+    max-height: none;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .#{$px}-filter-dropdown-menu__mobile-wrap {
+    flex: 0 0 auto;
+    margin-top: 0;
+  }
+}
+
+.#{$px}-filter-drawer {
+  .#{$px}-filter-drawer-menu {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .#{$px}-filter-dropdown-menu__buttons-wrap--drawer {
+    flex: 0 0 auto;
+    margin-top: auto;
+    overflow: visible;
+  }
 }

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

@@ -4,6 +4,28 @@
   display: flex;
   flex-wrap: wrap;
   gap: $spacing-sm;
+
+  // Desktop: align the Sort filter (and anything following it) to the right of the filter row.
+  @include media($breakpoint-md) {
+    > .#{$px}-filters-inline__sort {
+      margin-left: auto;
+    }
+  }
+
+  // Mobile: filter buttons scroll horizontally and overflow off-screen instead of wrapping.
+  @include media($breakpoint-md, 'max') {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    > * {
+      flex: 0 0 auto;
+    }
+  }
 }
 
 .#{$px}-filter-drawer {

package/package.json

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