@phillips/seldon 1.167.0 → 1.168.0

package/dist/components/Modal/Modal.d.ts

@@ -28,6 +28,14 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement>, Dialog
      * Content label for accessibility
      */
     contentLabel?: string;
+    /**
+     * Custom close icon
+     */
+    closeIcon?: React.ReactElement;
+    /**
+     * Position of the close icon
+     */
+    closeIconPosition?: 'left' | 'right';
 }
 /**
  * ## Overview

package/dist/components/Modal/Modal.js

@@ -1,51 +1,64 @@
-import { jsx as o, jsxs as e } from "react/jsx-runtime";
-import r from "../../node_modules/classnames/index.js";
-import { getCommonProps as C, noOp as y } from "../../utils/index.js";
-import N from "../Icon/Icon.js";
-import M from "../IconButton/IconButton.js";
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import t from "../../node_modules/classnames/index.js";
+import { getCommonProps as N, noOp as _ } from "../../utils/index.js";
+import M from "../Icon/Icon.js";
+import g from "../IconButton/IconButton.js";
 import { ButtonVariants as v } from "../Button/types.js";
-import { Root as _, Portal as b, Overlay as g, Content as x, Title as I, Description as O, Close as P } from "../../node_modules/@radix-ui/react-dialog/dist/index.js";
-import { VisuallyHidden as j } from "../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
-import { forwardRef as w } from "react";
-const B = w(
-  ({ children: l, className: i, overlayClassName: s, isOpen: m = !1, onClose: d = y, style: n, contentLabel: c, ...t }, p) => {
-    const { className: a, "data-testid": f, ...h } = C(t, "Modal");
+import { Root as b, Portal as x, Overlay as I, Content as O, Title as P, Description as $, Close as j } from "../../node_modules/@radix-ui/react-dialog/dist/index.js";
+import { VisuallyHidden as w } from "../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+import { forwardRef as B } from "react";
+const R = B(
+  ({
+    children: l,
+    className: i,
+    overlayClassName: s,
+    isOpen: m = !1,
+    onClose: d = _,
+    style: n,
+    contentLabel: c,
+    closeIcon: f = /* @__PURE__ */ o(M, { icon: "CloseX", height: 32, width: 32, color: "currentColor" }),
+    closeIconPosition: p = "right",
+    ...e
+  }, h) => {
+    const { className: a, "data-testid": u, ...C } = N(e, "Modal");
     return /* @__PURE__ */ o(
-      _,
+      b,
       {
         open: m,
-        onOpenChange: (u) => {
-          u || d();
+        onOpenChange: (y) => {
+          y || d();
         },
-        children: /* @__PURE__ */ e(b, { children: [
+        children: /* @__PURE__ */ r(x, { children: [
           /* @__PURE__ */ o(
-            g,
+            I,
             {
-              className: r(`${a}__overlay`, s),
+              className: t(`${a}__overlay`, s),
               "data-testid": "modal-overlay"
             }
           ),
-          /* @__PURE__ */ e(
-            x,
+          /* @__PURE__ */ r(
+            O,
             {
-              ref: p,
-              className: r(a, i),
-              "data-testid": f,
+              ref: h,
+              className: t(a, i),
+              "data-testid": u,
               "aria-modal": "true",
               style: n,
-              ...h,
-              ...t,
+              ...C,
+              ...e,
               children: [
-                /* @__PURE__ */ o(j, { asChild: !0, children: /* @__PURE__ */ o(I, { children: c ?? "Modal" }) }),
-                /* @__PURE__ */ o(O, {}),
-                /* @__PURE__ */ o(P, { asChild: !0, children: /* @__PURE__ */ o(
-                  M,
+                /* @__PURE__ */ o(w, { asChild: !0, children: /* @__PURE__ */ o(P, { children: c ?? "Modal" }) }),
+                /* @__PURE__ */ o($, {}),
+                /* @__PURE__ */ o(j, { asChild: !0, children: /* @__PURE__ */ o(
+                  g,
                   {
                     id: "modal-close-button",
                     "aria-label": "Close Modal",
-                    className: r(`${a}__close`),
+                    className: t(`${a}__close`, {
+                      [`${a}__close--left`]: p === "left"
+                    }),
                     variant: v.tertiary,
-                    children: /* @__PURE__ */ o(N, { icon: "CloseX", height: 32, width: 32, color: "currentColor" })
+                    children: f
                   }
                 ) }),
                 l
@@ -57,7 +70,7 @@ const B = w(
     );
   }
 );
-B.displayName = "Modal";
+R.displayName = "Modal";
 export {
-  B as default
+  R as default
 };

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

@@ -10,3 +10,4 @@ export declare const Playground: {
     };
 };
 export declare const ModalFromDrawer: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomCloseIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/scss/components/Modal/_modal.scss

@@ -12,6 +12,11 @@
   transform: translate(-50%, -50%);
   z-index: 30;
 
+  &__close--left {
+    left: 0.4rem;
+    right: auto;
+  }
+
   &__overlay {
     background-color: $overlay-black;
     inset: 0;

package/package.json

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