@phillips/seldon 1.167.0 → 1.169.0

package/dist/patterns/FiltersInline/FilterDropdownMenuDesktop.js

@@ -0,0 +1,92 @@
+import { jsxs as p, jsx as r, Fragment as C } from "react/jsx-runtime";
+import e from "../../node_modules/classnames/index.js";
+import F from "react";
+import n from "../../components/Button/Button.js";
+import { ButtonVariants as s } from "../../components/Button/types.js";
+import v from "../../components/Filter/FilterHeader.js";
+import D from "../../components/Filter/FilterInput.js";
+import m from "../../components/Text/Text.js";
+import { TextVariants as c } from "../../components/Text/types.js";
+import { px as B } from "../../utils/index.js";
+import { getFilterButtonLabel as S, getFilterDimensions as j, handleInputChange as A } from "./utils.js";
+const I = F.forwardRef(
+  ({
+    className: f,
+    buttonType: i,
+    filters: _,
+    filterIndex: h,
+    onSelectFilter: b,
+    onClickClear: u,
+    onApplyFilter: d,
+    resultsCount: $,
+    ariaLabels: N,
+    filterButtonLabel: x,
+    filterButtonLabelTranslated: g,
+    dropdownMenuTranslation: o
+  }, k) => {
+    const l = i === "Sort", t = `${B}-filter-dropdown-menu`;
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        className: e(t, f),
+        ref: k,
+        "data-testid": "filter-dropdown-desktop",
+        "aria-label": N || `${i} dropdown desktop`,
+        children: [
+          /* @__PURE__ */ r(
+            v,
+            {
+              heading: S(x, null, g || null),
+              className: e(`${t}__header`)
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: e(`${t}__filters`), children: j(_, h).map((a) => /* @__PURE__ */ r(
+            D,
+            {
+              id: a.label,
+              labelText: a.label,
+              name: a.label,
+              type: l ? "radio" : "checkbox",
+              checked: a.active,
+              disabled: a?.disabled,
+              onChange: (w) => A(w, i ?? "", b)
+            },
+            a.label
+          )) }),
+          /* @__PURE__ */ r("div", { className: e(l ? `${t}__button-wrap` : `${t}__buttons-wrap`), children: l ? /* @__PURE__ */ r(
+            n,
+            {
+              className: e(`${t}__button`),
+              variant: s.primary,
+              onClick: () => d?.(!1),
+              children: /* @__PURE__ */ r(m, { variant: c.string2, className: `${t}__button-text`, children: o?.confirm || "Confirm" })
+            }
+          ) : /* @__PURE__ */ p(C, { children: [
+            /* @__PURE__ */ r(
+              n,
+              {
+                className: e(`${t}__buttons`),
+                variant: s.secondary,
+                onClick: () => u?.(i ?? ""),
+                children: /* @__PURE__ */ r(m, { variant: c.string2, children: o?.clearAll || "Clear all" })
+              }
+            ),
+            /* @__PURE__ */ r(
+              n,
+              {
+                className: e(`${t}__buttons`),
+                variant: s.primary,
+                onClick: () => d?.(!1),
+                children: /* @__PURE__ */ r(m, { variant: c.string2, className: `${t}__button-text`, children: o?.showAuctions || `Show ${$} Auctions` })
+              }
+            )
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+I.displayName = "FilterDropdownMenuDesktop";
+export {
+  I as FilterDropdownMenuDesktop
+};

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { FilterDropdownMenuProps } from './types';
+export declare const FilterDropdownMenuMobile: React.ForwardRefExoticComponent<FilterDropdownMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/patterns/FiltersInline/FilterDropdownMenuMobile.js

@@ -0,0 +1,99 @@
+import { jsxs as d, jsx as r, Fragment as g } from "react/jsx-runtime";
+import e from "../../node_modules/classnames/index.js";
+import C from "react";
+import n from "../../components/Button/Button.js";
+import { ButtonVariants as s } from "../../components/Button/types.js";
+import k from "../../components/Filter/FilterInput.js";
+import m from "../../components/Text/Text.js";
+import { TextVariants as c } from "../../components/Text/types.js";
+import { px as v } from "../../utils/index.js";
+import { getFilterDimensions as F, handleInputChange as B } from "./utils.js";
+const D = C.forwardRef(
+  ({
+    className: b,
+    buttonType: o,
+    filters: f,
+    filterIndex: p,
+    onApplyFilter: _,
+    onClickClear: $,
+    onSelectFilter: h,
+    resultsCount: u,
+    ariaLabels: x,
+    dropdownMenuTranslation: a
+  }, N) => {
+    const l = o === "Sort", t = `${v}-filter-dropdown-menu`;
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        className: e(`${t}`, b, `${t}--mobile`),
+        ref: N,
+        "data-testid": "filter-dropdown-mobile",
+        "aria-label": x || `${o} dropdown mobile`,
+        children: [
+          /* @__PURE__ */ r("div", { className: e(`${t}__filters`, `${t}__filters--mobile`), children: F(f, p).map((i) => /* @__PURE__ */ r(
+            k,
+            {
+              id: i.label,
+              labelText: i.label,
+              name: i.label,
+              type: l ? "radio" : "checkbox",
+              checked: i.active,
+              disabled: i?.disabled,
+              onChange: (w) => B(w, o ?? "", h)
+            },
+            i.label
+          )) }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: e(
+                l ? `${t}__button-wrap` : `${t}__buttons-wrap`,
+                `${t}__mobile-wrap`
+              ),
+              children: l ? /* @__PURE__ */ r(
+                n,
+                {
+                  className: e(`${t}__button`, `${t}__button--mobile`),
+                  variant: s.primary,
+                  onClick: () => _?.(!1),
+                  children: /* @__PURE__ */ r(m, { variant: c.string1, className: `${t}__button-text`, children: a?.confirm || "Confirm" })
+                }
+              ) : /* @__PURE__ */ d(g, { children: [
+                /* @__PURE__ */ r(
+                  n,
+                  {
+                    className: e(
+                      `${t}__buttons`,
+                      `${t}__buttons--mobile`,
+                      `${t}__buttons--left`
+                    ),
+                    variant: s.secondary,
+                    onClick: () => $?.(o ?? ""),
+                    children: /* @__PURE__ */ r(m, { variant: c.string2, children: a?.clearAll || "Clear all" })
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  n,
+                  {
+                    className: e(
+                      `${t}__buttons`,
+                      `${t}__buttons--mobile`,
+                      `${t}__buttons--right`
+                    ),
+                    variant: s.primary,
+                    onClick: () => _?.(!1),
+                    children: /* @__PURE__ */ r(m, { variant: c.string2, className: `${t}__button-text`, children: a?.showAuctions || `Show ${u} Auctions` })
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+D.displayName = "FilterDropdownMenuMobile";
+export {
+  D as FilterDropdownMenuMobile
+};

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { FiltersInlineProps } from './types';
+/**
+ * ## Overview
+ *
+ * FiltersInline component for rendering a row of filter buttons.
+ *
+ * [Figma Link](https://www.figma.com/design/H1kCh6MXU8jasYbQuCbyBt/Calendar?node-id=55-487568&p=f&m=dev)
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-filters-inline--overview)
+ */
+declare const FiltersInline: React.ForwardRefExoticComponent<FiltersInlineProps & React.RefAttributes<HTMLDivElement>>;
+export default FiltersInline;

package/dist/patterns/FiltersInline/FiltersInline.js

@@ -0,0 +1,65 @@
+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(
+  ({
+    id: o,
+    className: c,
+    filtersListState: n,
+    setFiltersLabelListState: r,
+    filters: a,
+    onSelectFilter: e,
+    onApplyFilter: l,
+    onClickClear: s,
+    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: [
+      /* @__PURE__ */ u(
+        T,
+        {
+          id: `${o}-${m}-button`,
+          filterButtonLabel: m,
+          handleClick: r,
+          filtersListState: n,
+          filters: a,
+          onSelectFilter: e,
+          onApplyFilter: l,
+          onClickClear: s,
+          resultsCount: b,
+          dropdownMenuTranslation: p
+        },
+        `${o}-${m}-button`
+      ),
+      a?.map((t, B) => /* @__PURE__ */ u(
+        j,
+        {
+          id: `${o}-${t.label}-button`,
+          filterButtonLabel: t.label,
+          buttonType: t.buttonType,
+          handleClick: r,
+          filtersListState: n,
+          filterId: B + 1,
+          filters: a,
+          onSelectFilter: e,
+          onApplyFilter: l,
+          onClickClear: s,
+          resultsCount: b,
+          filterButtonLabelTranslated: t.filterButtonLabelTranslated,
+          dropdownMenuTranslation: p
+        },
+        `${o}-${t.label}-button`
+      ))
+    ] });
+  }
+);
+w.displayName = "FiltersInline";
+export {
+  w as default
+};

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

@@ -0,0 +1,17 @@
+import { FilterDropdownMenuProps, FilterType } from './types';
+/**
+ * Storybook: https://storybook.js.org/docs/react/writing-stories/introduction
+ */
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./types').FiltersInlineProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (props: FilterDropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        id: string;
+        filters: FilterType[];
+    };
+    argTypes: {};
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { FilterDropdownProps } from './types';
+export declare const MainFilterDropdown: React.ForwardRefExoticComponent<FilterDropdownProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/patterns/FiltersInline/MainFilterDropdown.js

@@ -0,0 +1,102 @@
+import { jsxs as n, 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 { 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 { px as t } from "../../utils/index.js";
+import B from "../FilterMenu/FilterMenu.js";
+import { FilterButton as H } from "./FilterButton.js";
+import { countActiveFilters as O, getFilterButtonClickHandler as R, resetAllFilters as S } from "./utils.js";
+const I = x.forwardRef(
+  ({
+    className: f,
+    filterButtonLabel: l,
+    handleClick: i,
+    filtersListState: a,
+    filters: m,
+    onSelectFilter: u,
+    onApplyFilter: w,
+    onClickClear: b,
+    resultsCount: F,
+    dropdownMenuTranslation: d,
+    ariaLabels: s = {},
+    id: h
+  }, _) => {
+    const c = a?.[0] ?? !1, { totalCount: C, filterCount: $ } = O(m, l);
+    return /* @__PURE__ */ n(A, { children: [
+      /* @__PURE__ */ o(
+        H,
+        {
+          ref: _,
+          className: f,
+          isSelected: c,
+          count: $,
+          label: l,
+          totalCount: C,
+          id: h,
+          ariaLabel: s.button || `${l} button`,
+          onClick: R(a, i, 0),
+          isMobile: !1,
+          type: l
+        }
+      ),
+      /* @__PURE__ */ n(
+        k,
+        {
+          isOpen: c,
+          drawerOpenSide: "left",
+          onClose: () => S(a, i),
+          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 }),
+              Array.from(r.filterDimensions).map((e) => /* @__PURE__ */ o(
+                j,
+                {
+                  id: e.label,
+                  labelText: e.label,
+                  onChange: (y) => u?.(y, r.label),
+                  type: r.type,
+                  disabled: e?.disabled,
+                  name: e.label,
+                  checked: e.active
+                },
+                e.label
+              ))
+            ] }, r.id)) }),
+            /* @__PURE__ */ n(
+              "div",
+              {
+                className: N(
+                  `${t}-filter-dropdown-menu__buttons-wrap`,
+                  `${t}-filter-dropdown-menu__buttons-wrap--drawer`
+                ),
+                children: [
+                  /* @__PURE__ */ o(
+                    p,
+                    {
+                      className: `${t}-filter-dropdown-menu__button`,
+                      variant: g.secondary,
+                      onClick: () => b?.("all"),
+                      children: d?.clearAll || "Clear all"
+                    }
+                  ),
+                  /* @__PURE__ */ o(p, { className: `${t}-filter-dropdown-menu__button`, onClick: () => w?.(!1), children: d?.showAuctions || `Show ${F} Auctions` })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+I.displayName = "MainFilterDropdown";
+export {
+  I as MainFilterDropdown
+};

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { FilterDropdownProps } from './types';
+export declare const SubFilterDropdown: React.ForwardRefExoticComponent<FilterDropdownProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/patterns/FiltersInline/SubFilterDropdown.js

@@ -0,0 +1,135 @@
+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 _ from "react";
+import f from "../../components/Drawer/Drawer.js";
+import { SSRMediaQuery as D } from "../../providers/SeldonProvider/utils.js";
+import { px as q } 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(
+  ({
+    filterId: e = 0,
+    className: u,
+    filterButtonLabel: r,
+    buttonType: i,
+    handleClick: m,
+    filtersListState: a,
+    filters: c,
+    onSelectFilter: w,
+    onApplyFilter: h,
+    onClickClear: F,
+    resultsCount: $,
+    filterButtonLabelTranslated: l,
+    dropdownMenuTranslation: M,
+    ariaLabels: n = {},
+    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: [
+      /* @__PURE__ */ g(D.Media, { lessThan: "md", children: [
+        /* @__PURE__ */ o(
+          O,
+          {
+            ref: x,
+            className: u,
+            isSelected: d,
+            count: s,
+            label: b,
+            id: p,
+            totalCount: C,
+            ariaLabel: n.button || `${r} button`,
+            onClick: t(a, m, e),
+            isMobile: !0,
+            type: i
+          }
+        ),
+        /* @__PURE__ */ o(
+          f,
+          {
+            drawerOpenSide: "bottom",
+            isOpen: d,
+            onClose: t(a, m, e),
+            "aria-label": n.drawer || `${r} drawer`,
+            className: `${q}-filter-drawer-mobile`,
+            bottomContentLabel: `${b} Filter`,
+            children: /* @__PURE__ */ o(
+              H,
+              {
+                buttonType: i,
+                filters: c,
+                filterIndex: e,
+                onSelectFilter: w,
+                onApplyFilter: h,
+                onClickClear: F,
+                resultsCount: $,
+                ariaLabels: n?.ariaLabel,
+                filterButtonLabel: r,
+                filterButtonLabelTranslated: l,
+                dropdownMenuTranslation: M
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(D.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ g(
+        S,
+        {
+          open: d,
+          onOpenChange: t(a, m, e),
+          children: [
+            /* @__PURE__ */ o(j, { asChild: !0, children: /* @__PURE__ */ o(
+              O,
+              {
+                ref: x,
+                className: u,
+                isSelected: d,
+                count: s,
+                label: b,
+                totalCount: C,
+                id: p,
+                ariaLabel: n.ariaLabel || `${r} button`,
+                onClick: t(a, m, e),
+                isMobile: !1,
+                type: i
+              }
+            ) }),
+            /* @__PURE__ */ o(v, { children: /* @__PURE__ */ o(
+              P,
+              {
+                avoidCollisions: !0,
+                collisionPadding: 10,
+                sideOffset: 5,
+                align: "start",
+                alignOffset: 5,
+                "aria-label": n.ariaLabel || `${r} dropdown`,
+                children: /* @__PURE__ */ o(
+                  E,
+                  {
+                    buttonType: i,
+                    filters: c,
+                    filterIndex: e,
+                    onSelectFilter: w,
+                    onApplyFilter: h,
+                    onClickClear: F,
+                    resultsCount: $,
+                    ariaLabels: n?.ariaLabel,
+                    filterButtonLabel: r,
+                    filterButtonLabelTranslated: l,
+                    dropdownMenuTranslation: M
+                  }
+                )
+              }
+            ) })
+          ]
+        },
+        `${p}-${r}-button`
+      ) })
+    ] });
+  }
+);
+k.displayName = "SubFilterDropdown";
+export {
+  k as SubFilterDropdown
+};

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

@@ -0,0 +1 @@
+export { default as FiltersInline } from './FiltersInline';