@phillips/seldon 1.77.0 → 1.77.2

package/dist/components/Accordion/AccordionItem.js

@@ -1,111 +1,112 @@
-import { jsxs as g, jsx as o, Fragment as f } from "react/jsx-runtime";
-import { getCommonProps as v } from "../../utils/index.js";
-import $ from "../../assets/plus.svg.js";
-import I from "../../assets/minus.svg.js";
-import _ from "../../assets/lock.svg.js";
-import d from "../../node_modules/classnames/index.js";
-import { Item as C, Trigger as x, Content as N } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
+import { jsxs as $, jsx as t } from "react/jsx-runtime";
+import { getCommonProps as f } from "../../utils/index.js";
+import g from "../../assets/plus.svg.js";
+import v from "../../assets/minus.svg.js";
+import I from "../../assets/lock.svg.js";
+import a from "../../node_modules/classnames/index.js";
+import { Item as _, Trigger as x, Content as C } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
 import { AccordionItemVariant as h } from "./types.js";
 import { getIconClasses as u } from "./utils.js";
 const A = ({
   children: n,
-  className: s,
-  baseClassName: t,
-  disable: c,
-  isLargeVariation: e,
-  id: r
+  className: e,
+  baseClassName: o,
+  disable: s,
+  isLargeVariation: r,
+  id: c
 }) => {
-  const i = c, l = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
-    _,
+  const i = s, l = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+    I,
     {
-      className: u(t, e, "lock"),
-      "data-testid": `${r}-lockedIcon`,
+      className: u(o, r, "lock"),
+      "data-testid": `${c}-lockedIcon`,
       "aria-hidden": !0
     }
-  ) }), p = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
-    $,
+  ) }), p = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+    g,
     {
-      className: u(t, e, "plus"),
-      "data-testid": `${r}-plusIcon`,
+      className: u(o, r, "plus"),
+      "data-testid": `${c}-plusIcon`,
       "aria-hidden": !0
     }
-  ) }), a = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
-    I,
+  ) }), d = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+    v,
     {
-      className: u(t, e, "minus"),
-      "data-testid": `${r}-minusIcon`,
+      className: u(o, r, "minus"),
+      "data-testid": `${c}-minusIcon`,
       "aria-hidden": !0
     }
   ) });
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ t(
     x,
     {
-      "data-disabled": c,
+      "data-disabled": s,
       asChild: !0,
-      className: d(t, { [`${t}--hoverable`]: !c }, s),
-      children: /* @__PURE__ */ g("div", { "data-testid": `${r}-trigger`, children: [
-        /* @__PURE__ */ o("div", { className: d(`${t}__text`, { [`${t}__text--lg`]: e }), children: n }),
+      className: a(o, { [`${o}--hoverable`]: !s }, e),
+      children: /* @__PURE__ */ $("div", { "data-testid": `${c}-trigger`, children: [
+        /* @__PURE__ */ t("div", { className: a(`${o}__text`, { [`${o}__text--lg`]: r }), children: n }),
         i && l,
         !i && p,
-        !i && a
+        !i && d
       ] })
     }
   );
-}, k = ({
+}, N = ({
   children: n,
-  baseClassName: s,
-  disable: t,
-  hasTransition: c,
-  isLargeVariation: e,
-  className: r
-}) => /* @__PURE__ */ o(f, { children: t && n ? /* @__PURE__ */ o("div", { children: n }) : /* @__PURE__ */ o(
-  N,
+  baseClassName: e,
+  disable: o,
+  hasTransition: s,
+  isLargeVariation: r,
+  className: c
+}) => o && n ? /* @__PURE__ */ t("div", { children: n }) : /* @__PURE__ */ t(
+  C,
   {
     asChild: !0,
-    className: d(
-      { [`${s}__content--lg`]: e },
-      { [`${s}--transition`]: c },
-      r
+    className: a(
+      `${e}__content`,
+      { [`${e}__content--lg`]: r },
+      { [`${e}--transition`]: s },
+      c
     ),
     children: n
   }
-) }), q = ({
+), q = ({
   isLocked: n = !1,
-  variant: s = h.sm,
-  id: t,
-  label: c,
-  isLastItem: e,
-  hasTransition: r = !1,
+  variant: e = h.sm,
+  id: o,
+  label: s,
+  isLastItem: r,
+  hasTransition: c = !1,
   children: i,
   ...l
 }) => {
-  const { className: p } = v({ id: t }, "Accordion"), a = s === h.lg, m = `${p}-item`;
-  return /* @__PURE__ */ g(
-    C,
+  const { className: p } = f({ id: o }, "Accordion"), d = e === h.lg, m = `${p}-item`;
+  return /* @__PURE__ */ $(
+    _,
     {
       disabled: n,
-      value: t,
-      className: d(m, { [`${m}__border-bottom`]: !e }),
+      value: o,
+      className: a(m, { [`${m}__border-bottom`]: !r }),
       ...l,
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ t(
           A,
           {
             disable: n,
-            isLargeVariation: a,
-            id: t,
+            isLargeVariation: d,
+            id: o,
             baseClassName: `${m}-label`,
-            children: c
+            children: s
           }
         ),
-        /* @__PURE__ */ o(
-          k,
+        /* @__PURE__ */ t(
+          N,
           {
             disable: n,
-            hasTransition: r,
-            isLargeVariation: a,
+            hasTransition: c,
+            isLargeVariation: d,
             baseClassName: m,
-            children: /* @__PURE__ */ o("div", { className: "radix-accordion-content", children: i })
+            children: /* @__PURE__ */ t("div", { className: "radix-accordion-content", children: i })
           }
         )
       ]

package/dist/components/Pagination/Pagination.js

@@ -1,78 +1,82 @@
-import { jsxs as O, jsx as n } from "react/jsx-runtime";
-import u from "../../node_modules/classnames/index.js";
-import { getCommonProps as P, px as i } from "../../utils/index.js";
-import S from "../Select/Select.js";
+import { jsxs as O, jsx as i } from "react/jsx-runtime";
+import p from "../../node_modules/classnames/index.js";
+import { getCommonProps as w, px as r } from "../../utils/index.js";
+import V from "../Select/Select.js";
 import f from "../../assets/chevronRight.svg.js";
-import g from "../IconButton/IconButton.js";
+import h from "../IconButton/IconButton.js";
 import { ButtonVariants as x } from "../Button/types.js";
-import { determineOptionValue as r, findOptionFromSelectString as v } from "./utils.js";
-const R = ({
+import { determineOptionValue as o, findOptionFromSelectString as j } from "./utils.js";
+import { usePendingState as k } from "../../utils/hooks.js";
+const E = ({
   className: b,
-  onChange: o,
+  onChange: P,
   variant: $ = "inline",
-  options: e = [],
-  value: l,
-  isDisabled: c,
-  previousLabel: h = "Previous",
-  nextLabel: N = "Next",
-  selectLabel: _ = "Select",
-  ...m
+  options: n = [],
+  value: g,
+  isDisabled: l,
+  previousLabel: S = "Previous",
+  nextLabel: v = "Next",
+  selectLabel: C = "Select",
+  ...s
 }) => {
-  const y = "pagination", { className: p, ...I } = P(m, "Pagination"), { id: s } = m;
+  const N = "pagination", { className: u, ..._ } = w(s, "Pagination"), { id: c } = s, { pendingState: y, setPendingState: I } = k(o(g)), m = y || g, d = (t, e) => {
+    const a = o(t);
+    I(a), P(a, e);
+  };
   return /* @__PURE__ */ O(
     "div",
     {
-      className: u(`${i}-${y}`, { [`${p}__wrapper`]: p }, b),
-      ...I,
-      ...m,
+      className: p(`${r}-${N}`, { [`${u}__wrapper`]: u }, b),
+      ..._,
+      ...s,
       children: [
-        /* @__PURE__ */ n(
-          g,
+        /* @__PURE__ */ i(
+          h,
           {
-            className: u(`${i}__pagination-button`, `${i}-left-arrow`),
+            className: p(`${r}__pagination-button`, `${r}-left-arrow`),
             onClick: () => {
-              const t = e.findIndex((d) => r(d) === l) - 1, a = e.at(t) || "";
-              o(r(a));
+              const t = n.findIndex((a) => o(a) === m) - 1, e = n.at(t) || "";
+              d(e);
             },
-            "data-testid": `${s}-previous-button`,
-            isDisabled: c,
-            "aria-label": h,
+            "data-testid": `${c}-previous-button`,
+            isDisabled: l,
+            "aria-label": S,
             variant: x.tertiary,
-            children: /* @__PURE__ */ n(f, {})
+            children: /* @__PURE__ */ i(f, {})
           }
         ),
-        /* @__PURE__ */ n(
-          S,
+        /* @__PURE__ */ i(
+          V,
           {
-            className: $ === "inline" && `${i}--inline-pagination`,
-            "aria-label": _,
-            value: l,
+            className: $ === "inline" && `${r}--inline-pagination`,
+            "aria-label": C,
+            value: m,
             onChange: (t) => {
-              const a = v(e, t == null ? void 0 : t.currentTarget.value);
-              a && o(r(a), t);
+              const e = j(n, t == null ? void 0 : t.currentTarget.value);
+              e && d(e, t);
             },
-            "data-testid": `${s}-select-button`,
+            "data-testid": `${c}-select-button`,
             hideLabel: !0,
-            disabled: c,
-            children: e.map((t) => {
-              const a = r(t);
-              return /* @__PURE__ */ n("option", { value: a, children: typeof t == "string" || typeof t == "number" ? t : t.label }, a);
+            disabled: l,
+            children: n.map((t) => {
+              const e = o(t);
+              return /* @__PURE__ */ i("option", { value: e, children: typeof t == "string" || typeof t == "number" ? t : t.label }, e);
             })
           }
         ),
-        /* @__PURE__ */ n(
-          g,
+        /* @__PURE__ */ i(
+          h,
           {
-            className: `${i}__pagination-button`,
+            className: `${r}__pagination-button`,
             onClick: () => {
-              const t = (e.findIndex((d) => r(d) === l) + 1) % e.length, a = e[t];
-              o(r(a));
+              const t = (n.findIndex((a) => o(a) === m) + 1) % n.length, e = n[t];
+              d(e);
             },
-            "data-testid": `${s}-next-button`,
-            isDisabled: c,
-            "aria-label": N,
+            "data-testid": `${c}-next-button`,
+            isDisabled: l,
+            "aria-label": v,
             variant: x.tertiary,
-            children: /* @__PURE__ */ n(f, {})
+            children: /* @__PURE__ */ i(f, {})
           }
         )
       ]
@@ -80,5 +84,5 @@ const R = ({
   );
 };
 export {
-  R as default
+  E as default
 };

package/dist/index.d.ts

@@ -52,3 +52,4 @@ export * from './components/PinchZoom';
 export * from './components/Tabs';
 export * from './components/SeldonImage';
 export * from './patterns/SaleHeaderBanner';
+export * from './utils/hooks';

package/dist/index.js

@@ -1,4 +1,4 @@
-import { PaddingTokens as f, SpacingTokens as l, defaultYear as s, emailValidation as m, encodeURLSearchParams as p, findChildrenExcludingTypes as d, findChildrenOfType as u, generatePaddingClassName as n, getCommonProps as x, noOp as i, px as g, useNormalizedInputProps as c } from "./utils/index.js";
+import { PaddingTokens as f, SpacingTokens as l, defaultYear as s, emailValidation as m, encodeURLSearchParams as p, findChildrenExcludingTypes as d, findChildrenOfType as n, generatePaddingClassName as u, getCommonProps as x, noOp as i, px as g, useNormalizedInputProps as c } from "./utils/index.js";
 import { default as C } from "./pages/Page.js";
 import { default as P } from "./components/Button/Button.js";
 import { ButtonVariants as b } from "./components/Button/types.js";
@@ -23,7 +23,7 @@ import { GridItemAlign as ae } from "./components/GridItem/types.js";
 import { default as le } from "./components/Search/Search.js";
 import { default as me } from "./components/Select/Select.js";
 import { default as de } from "./components/SplitPanel/SplitPanel.js";
-import { default as ne } from "./patterns/Subscribe/Subscribe.js";
+import { default as ue } from "./patterns/Subscribe/Subscribe.js";
 import { SubscriptionState as ie } from "./patterns/Subscribe/types.js";
 import { default as ce } from "./patterns/Social/Social.js";
 import { default as Ce } from "./patterns/ViewingsList/ViewingsList.js";
@@ -52,7 +52,7 @@ import { default as ro } from "./components/ContentPeek/ContentPeek.js";
 import { default as fo } from "./components/Collapsible/Collapsible.js";
 import { default as so } from "./components/Collapsible/CollapsibleContent.js";
 import { default as po } from "./components/Collapsible/CollapsibleTrigger.js";
-import { SeldonProvider as no } from "./providers/SeldonProvider/SeldonProvider.js";
+import { SeldonProvider as uo } from "./providers/SeldonProvider/SeldonProvider.js";
 import { default as io } from "./components/PageContentWrapper/PageContentWrapper.js";
 import { default as co } from "./components/Carousel/Carousel.js";
 import { default as Co } from "./components/Carousel/CarouselContent.js";
@@ -69,6 +69,7 @@ import { default as Oo } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
 import { default as Uo } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
 import { default as Fo } from "./patterns/SaleHeaderBanner/SaleHeaderCountdown.js";
 import { AuctionState as Yo } from "./patterns/SaleHeaderBanner/types.js";
+import { usePendingState as jo } from "./utils/hooks.js";
 export {
   Ee as Accordion,
   Oe as AccordionItem,
@@ -122,13 +123,13 @@ export {
   Fo as SaleHeaderCountdown,
   le as Search,
   Eo as SeldonImage,
-  no as SeldonProvider,
+  uo as SeldonProvider,
   me as Select,
   ce as Social,
   l as SpacingTokens,
   de as SplitPanel,
   Be as StatefulViewingsList,
-  ne as Subscribe,
+  ue as Subscribe,
   ie as SubscriptionState,
   qe as SupportedLanguages,
   vo as TabsContainer,
@@ -144,10 +145,11 @@ export {
   m as emailValidation,
   p as encodeURLSearchParams,
   d as findChildrenExcludingTypes,
-  u as findChildrenOfType,
-  n as generatePaddingClassName,
+  n as findChildrenOfType,
+  u as generatePaddingClassName,
   x as getCommonProps,
   i as noOp,
   g as px,
-  c as useNormalizedInputProps
+  c as useNormalizedInputProps,
+  jo as usePendingState
 };

package/dist/scss/components/Accordion/_accordion.scss

@@ -23,10 +23,12 @@
     height: auto;
   }
 
+  &__content {
+    margin: $spacing-sm 0;
+  }
+
   &__content--lg {
     @include text($body2);
-
-    margin: 1.25rem 0;
   }
 
   &--transition {

package/dist/scss/components/Input/_input.scss

@@ -61,11 +61,15 @@ $lg: #{$px}-input--lg;
   // Disabled
   &--disabled {
     color: $keyline-gray;
+    cursor: default;
 
     .#{$px}-input__label,
     .#{$px}-input__input {
       color: inherit;
-      cursor: not-allowed;
+    }
+    .#{$px}-input__label:hover,
+    .#{$px}-input__input:hover {
+      cursor: default;
     }
   }
 

package/dist/scss/components/Pagination/_pagination.scss

@@ -8,11 +8,16 @@
 }
 
 .#{$px} {
-  &-icon-button.#{$px}__pagination-button {
-    @include media($breakpoint-md) {
-      > svg {
-        height: 1.75rem;
-        width: 1.75rem;
+  &-icon-button {
+    &:disabled {
+      border: unset;
+    }
+    &.#{$px}__pagination-button {
+      @include media($breakpoint-md) {
+        > svg {
+          height: 1.75rem;
+          width: 1.75rem;
+        }
       }
     }
   }

package/dist/utils/hooks.d.ts

@@ -0,0 +1,4 @@
+export declare const usePendingState: <StateType>(value: StateType) => {
+    pendingState: StateType | null;
+    setPendingState: import("react").Dispatch<import("react").SetStateAction<StateType | null>>;
+};

package/dist/utils/hooks.js

@@ -0,0 +1,10 @@
+import { useState as s, useEffect as i } from "react";
+const r = (t) => {
+  const [n, e] = s(null);
+  return i(() => {
+    t && e(null);
+  }, [t]), { pendingState: n, setPendingState: e };
+};
+export {
+  r as usePendingState
+};

package/package.json

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