@phillips/seldon 1.84.1 → 1.85.1

package/dist/components/Accordion/Accordion.stories.d.ts

@@ -1,8 +1,12 @@
 import { AccordionProps } from './Accordion';
+import { AccordionItemProps } from './AccordionItem';
 import { AccordionVariants } from './types';
 declare const meta: {
     title: string;
     component: ({ className, children, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        transitionTimeInMs: number;
+    };
     argTypes: {
         variant: {
             options: AccordionVariants[];
@@ -13,6 +17,6 @@ declare const meta: {
     };
 };
 export default meta;
-export declare const AccordionLarge: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
-export declare const AccordionSmall: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
-export declare const AccordionSubmenu: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionLarge: ({ transitionTimeInMs, ...props }: AccordionProps & AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionSmall: ({ transitionTimeInMs, ...props }: AccordionProps & AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionSubmenu: ({ transitionTimeInMs, ...props }: AccordionProps & AccordionItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/AccordionItem.d.ts

@@ -29,6 +29,18 @@ export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement>
      * When true applied the transition keyframe animation on item expand. Default as false.
      */
     hasTransition?: boolean;
+    /**
+     * Number of milliseconds for the expansion transition. Defaults to 250.
+     */
+    transitionTimeInMs?: number;
+    /**
+     * Callback function that is called when the item is opened.
+     */
+    onOpen?: () => void;
+    /**
+     * Callback function that is called when the item is closed.
+     */
+    onClose?: () => void;
 }
 declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
 export default AccordionItem;

package/dist/components/Accordion/AccordionItem.js

@@ -1,122 +1,136 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { getCommonProps as v } from "../../utils/index.js";
-import I from "../../assets/plus.svg.js";
-import _ from "../../assets/minus.svg.js";
-import x from "../../assets/lock.svg.js";
-import s from "../../node_modules/classnames/index.js";
-import { Item as A, Trigger as N, Content as k } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
-import { AccordionItemVariant as $ } from "./types.js";
-import { getIconClasses as u } from "./utils.js";
-const C = ({
-  children: n,
+import { jsxs as _, jsx as o } from "react/jsx-runtime";
+import { Item as A, Trigger as k, Content as x } from "../../node_modules/@radix-ui/react-accordion/dist/index.js";
+import u from "../../node_modules/classnames/index.js";
+import { forwardRef as N, useRef as R, useCallback as S } from "react";
+import T from "../../assets/lock.svg.js";
+import j from "../../assets/minus.svg.js";
+import w from "../../assets/plus.svg.js";
+import { getCommonProps as y } from "../../utils/index.js";
+import { AccordionItemVariant as I } from "./types.js";
+import { getIconClasses as v } from "./utils.js";
+const P = ({
+  children: c,
   className: r,
-  baseClassName: o,
-  disable: d,
-  isLargeVariation: c,
-  id: e
+  baseClassName: t,
+  disable: i,
+  isLargeVariation: e,
+  id: n,
+  onOpen: d,
+  onClose: m
 }) => {
-  const i = d, l = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-    x,
+  const l = R(null), a = i, f = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+    T,
     {
-      className: u(o, c, "lock"),
-      "data-testid": `${e}-lockedIcon`,
+      className: v(t, e, "lock"),
+      "data-testid": `${n}-lockedIcon`,
       "aria-hidden": !0
     }
-  ) }), a = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-    I,
+  ) }), g = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+    w,
     {
-      className: u(o, c, "plus"),
-      "data-testid": `${e}-plusIcon`,
+      className: v(t, e, "plus"),
+      "data-testid": `${n}-plusIcon`,
       "aria-hidden": !0
     }
-  ) }), p = /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-    _,
+  ) }), p = /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+    j,
     {
-      className: u(o, c, "minus"),
-      "data-testid": `${e}-minusIcon`,
+      className: v(t, e, "minus"),
+      "data-testid": `${n}-minusIcon`,
       "aria-hidden": !0
     }
-  ) });
-  return /* @__PURE__ */ t(
-    N,
+  ) }), $ = S(() => {
+    var s;
+    ((s = l.current) == null ? void 0 : s.getAttribute("data-state")) === "closed" ? d == null || d() : m == null || m();
+  }, [d, m]);
+  return /* @__PURE__ */ o(
+    k,
     {
-      "data-disabled": d,
+      "data-disabled": i,
       asChild: !0,
-      className: s(
-        o,
-        { [`${o}--large`]: c },
-        { [`${o}--hoverable`]: !d },
+      className: u(
+        t,
+        { [`${t}--large`]: e },
+        { [`${t}--hoverable`]: !i },
         r
       ),
-      children: /* @__PURE__ */ h("div", { "data-testid": `${e}-trigger`, children: [
-        /* @__PURE__ */ t("div", { className: s(`${o}__text`, { [`${o}__text--lg`]: c }), children: n }),
-        i && l,
-        !i && a,
-        !i && p
+      ref: l,
+      onClick: $,
+      children: /* @__PURE__ */ _("div", { "data-testid": `${n}-trigger`, children: [
+        /* @__PURE__ */ o("div", { className: u(`${t}__text`, { [`${t}__text--lg`]: e }), children: c }),
+        a && f,
+        !a && g,
+        !a && p
       ] })
     }
   );
-}, S = ({
-  children: n,
+}, b = ({
+  children: c,
   baseClassName: r,
-  disable: o,
-  hasTransition: d,
-  isLargeVariation: c,
-  className: e
-}) => o && n ? /* @__PURE__ */ t("div", { className: `${r}__content--locked`, children: n }) : /* @__PURE__ */ t(
-  k,
+  disable: t,
+  hasTransition: i,
+  isLargeVariation: e,
+  className: n
+}) => t && c ? /* @__PURE__ */ o("div", { className: `${r}__content--locked`, children: c }) : /* @__PURE__ */ o(
+  x,
   {
     asChild: !0,
-    className: s(
+    className: u(
       `${r}__content`,
-      { [`${r}__content--lg`]: c },
-      { [`${r}--transition`]: d },
-      e
+      { [`${r}__content--lg`]: e },
+      { [`${r}--transition`]: i },
+      n
     ),
-    children: n
+    children: c
   }
-), j = g(
+), C = N(
   ({
-    isLocked: n = !1,
-    variant: r = $.sm,
-    id: o,
-    label: d,
-    isLastItem: c,
-    hasTransition: e = !1,
-    children: i,
-    ...l
-  }, a) => {
-    const { className: p } = v({ id: o }, "Accordion"), f = r === $.lg, m = `${p}-item`;
-    return /* @__PURE__ */ h(
+    isLocked: c = !1,
+    variant: r = I.sm,
+    id: t,
+    label: i,
+    isLastItem: e,
+    hasTransition: n = !1,
+    children: d,
+    className: m,
+    transitionTimeInMs: l = 250,
+    onOpen: a,
+    onClose: f,
+    ...g
+  }, p) => {
+    const { className: $ } = y({ id: t }, "Accordion"), h = r === I.lg, s = `${$}-item`;
+    return /* @__PURE__ */ _(
       A,
       {
-        disabled: n,
-        value: o,
-        className: s(m, {
-          [`${m}__border-bottom`]: !c
+        disabled: c,
+        value: t,
+        style: { "--seldon-accordion-transition-time": `${l}ms` },
+        className: u(s, m, {
+          [`${s}__border-bottom`]: !e
         }),
-        ref: a,
-        ...l,
+        ref: p,
+        ...g,
         children: [
-          /* @__PURE__ */ t(
-            C,
+          /* @__PURE__ */ o(
+            P,
             {
-              disable: n,
-              isLargeVariation: f,
-              id: o,
-              baseClassName: `${m}-label`,
-              children: d
+              disable: c,
+              isLargeVariation: h,
+              id: t,
+              baseClassName: `${s}-label`,
+              onOpen: a,
+              onClose: f,
+              children: i
             }
           ),
-          /* @__PURE__ */ t(
-            S,
+          /* @__PURE__ */ o(
+            b,
             {
-              disable: n,
-              hasTransition: e,
-              isLargeVariation: f,
-              baseClassName: m,
-              children: /* @__PURE__ */ t("div", { className: "radix-accordion-content", children: i })
+              disable: c,
+              hasTransition: n,
+              isLargeVariation: h,
+              baseClassName: s,
+              children: /* @__PURE__ */ o("div", { className: "radix-accordion-content", children: d })
             }
           )
         ]
@@ -124,7 +138,7 @@ const C = ({
     );
   }
 );
-j.displayName = "AccordionItem";
+C.displayName = "AccordionItem";
 export {
-  j as default
+  C as default
 };

package/dist/components/Accordion/AccordionItem.test.d.ts

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

package/dist/components/Accordion/types.d.ts

@@ -17,6 +17,14 @@ export interface AccordionHeaderType {
      * Unique id for icon component testing
      */
     id?: string;
+    /**
+     * Callback function that is called when the header is opened.
+     */
+    onOpen?: () => void;
+    /**
+     * Callback function that is called when the header is closed.
+     */
+    onClose?: () => void;
 }
 export interface AccordionContentType {
     /**

package/dist/node_modules/exenv/index.js

@@ -1,4 +1,4 @@
-import { __module as t } from "../../_virtual/index5.js";
+import { __module as t } from "../../_virtual/index6.js";
 /*!
   Copyright (c) 2015 Jed Watson.
   Based on code that is Copyright 2013-2015, Facebook, Inc.

package/dist/node_modules/prop-types/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as e } from "../../../../_virtual/index6.js";
+import { __module as e } from "../../../../_virtual/index5.js";
 import { __require as o } from "./cjs/react-is.production.min.js";
 import { __require as t } from "./cjs/react-is.development.js";
 var r;

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

@@ -37,16 +37,24 @@
     @include text($body2);
   }
 
+  &--transition[data-state='open'] {
+    animation: slide-down var(--seldon-accordion-transition-time) ease-in-out;
+  }
+
+  &--transition[data-state='closed'] {
+    animation: slide-up var(--seldon-accordion-transition-time) ease-in-out;
+  }
+
   &--transition {
     overflow: hidden;
   }
 
   &--transition[data-state='open'] {
-    animation: slide-down 250ms ease-in-out;
+    animation: slide-down var(--seldon-accordion-transition-time) ease-in-out;
   }
 
   &--transition[data-state='closed'] {
-    animation: slide-up 250ms ease-in-out;
+    animation: slide-up var(--seldon-accordion-transition-time) ease-in-out;
   }
 
   &[data-state='open'] {

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

@@ -30,9 +30,14 @@ $lg: #{$px}-input--lg;
     border: 1px solid $keyline-gray;
     border-radius: 0.1875rem;
     font-size: 0.8125rem;
+    font-variation-settings: 'wght' 600;
     margin-bottom: 0.25rem;
     padding: $padding-xsm;
 
+    &::placeholder {
+      font-variation-settings: 'wght' 400;
+    }
+
     &:focus-within {
       outline: 1px solid $pure-black;
     }
@@ -98,12 +103,16 @@ $lg: #{$px}-input--lg;
     .#{$px}-input__input,
     .#{$px}-input__input::placeholder,
     .#{$px}-input__validation {
-      color: inherit;
+      color: $pure-black;
     }
 
     .#{$px}-input__input {
       border: 1px solid $error-red;
       box-shadow: inset 0 0 3px 3px $error-pink;
+
+      &:focus-within {
+        outline: 1px solid $error-red;
+      }
     }
   }
 

package/package.json

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