@gnist/design-system 2.0.30 → 2.0.32

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>2.0.32 (2025-03-27)</small>
+
+* fix: ownerState not recognised error for Select components ([cbdbd81](https://github.com/mollerdigital/design-system-design-system/commit/cbdbd81))
+
+## <small>2.0.31 (2025-03-26)</small>
+
+* fix: close modal with ESC key and unmount from DOM when not in use ([13d58a0](https://github.com/mollerdigital/design-system-design-system/commit/13d58a0))
+* fix: replace baseModal from mui/base with dialog element in Modal component to support react 19 ([e065ad8](https://github.com/mollerdigital/design-system-design-system/commit/e065ad8))
+
 ## <small>2.0.30 (2025-03-21)</small>
 
 * feat: add new icons ([982f902](https://github.com/mollerdigital/design-system-design-system/commit/982f902))

package/dist/components/inputs/dropdowns/SelectBase.cjs

@@ -37,8 +37,8 @@ const labelStyles_css = require("../shared-styles/labelStyles.css.cjs");
 const select_css = require("./select.css.cjs");
 const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefaultCompat(classNames);
-const listBoxComponent = componentUtils.component("listBox", select_css.listBoxStyle, "div");
-const popUpComponent = componentUtils.component("popUp", select_css.popUpStyle, "div");
+const listBoxComponent = base.prepareForSlot(componentUtils.component("listBox", select_css.listBoxStyle, "div"));
+const popUpComponent = base.prepareForSlot(componentUtils.component("popUp", select_css.popUpStyle, "div"));
 function SelectBase(props, isMultiple, ref) {
   var _a, _b;
   const { contentProps, wrapperProps, commonInputProps } = shared.useSelectInputLogic(props);

package/dist/components/inputs/dropdowns/SelectBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/SelectBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,oBAAoB,EAGvB,qBAAyD;AAM1D,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAqB/C,MAAM,WAAW,eAAe,CAAC,IAAI,CAAE,SAAQ,oBAAoB,CAAC,IAAI,CAAC;IACrE;;;OAGG;IACH,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/C;AAKD,wBAAgB,UAAU,CAAC,CAAC,EACxB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EACzB,UAAU,EAAE,OAAO,EACnB,GAAG,EAAE,YAAY,CAAC,iBAAiB,CAAC,2CA4HvC"}
+{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdowns/SelectBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACH,oBAAoB,EAGvB,qBAAyD;AAM1D,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAqB/C,MAAM,WAAW,eAAe,CAAC,IAAI,CAAE,SAAQ,oBAAoB,CAAC,IAAI,CAAC;IACrE;;;OAGG;IACH,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/C;AAOD,wBAAgB,UAAU,CAAC,CAAC,EACxB,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EACzB,UAAU,EAAE,OAAO,EACnB,GAAG,EAAE,YAAY,CAAC,iBAAiB,CAAC,2CA4HvC"}

package/dist/components/inputs/dropdowns/SelectBase.js

@@ -15,7 +15,7 @@ import "../../../foundation/typography/index.js";
 import classNames from "classnames";
 import "../../../foundation/logos/Logo.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
-import { Select, Option } from "@mui/base";
+import { prepareForSlot, Select, Option } from "@mui/base";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import "../../actions/buttons/PrimaryButton.js";
 import "../../actions/buttons/SecondaryButton.js";
@@ -33,8 +33,8 @@ import { inputFieldWrapperRecipe, inputContentWrapper, wrapperStyle } from "../s
 import { postInputWidth, preInputWidth } from "../shared-styles/inputFieldConstants.css.js";
 import { labelStyle } from "../shared-styles/labelStyles.css.js";
 import { listBoxStyle, popUpStyle, selectStyle, optionStyle, optionBackground, singleOptionStyle } from "./select.css.js";
-const listBoxComponent = component("listBox", listBoxStyle, "div");
-const popUpComponent = component("popUp", popUpStyle, "div");
+const listBoxComponent = prepareForSlot(component("listBox", listBoxStyle, "div"));
+const popUpComponent = prepareForSlot(component("popUp", popUpStyle, "div"));
 function SelectBase(props, isMultiple, ref) {
   var _a, _b;
   const { contentProps, wrapperProps, commonInputProps } = useSelectInputLogic(props);

package/dist/components/surfaces/modal/Modal.cjs

@@ -17,8 +17,8 @@ require("../../actions/chips/TagChip.cjs");
 const index$1 = require("../../../foundation/typography/index.cjs");
 const index = require("../../../translations/index.cjs");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
-const base = require("@mui/base");
 const React = require("react");
+const reactDom = require("react-dom");
 const modal_css = require("./modal.css.cjs");
 function _interopNamespaceCompat(e) {
   if (e && typeof e === "object" && "default" in e) return e;
@@ -54,13 +54,45 @@ const Modal = React__namespace.forwardRef(function Modal2({ children, title, isO
   var _a, _b;
   const text = index.useTranslation((t) => t.components.surfaces.modal);
   const [contentHeight, setContentHeight] = React.useState(0);
+  const [renderComponent, setRenderComponent] = React.useState(false);
+  const dialogRef = React.useRef(null);
   const handleBackdropClick = (event) => {
     if (event.target === event.currentTarget) {
       handleClose();
     }
   };
-  const Backdrop = () => jsxRuntime.jsx("div", { role: "presentation", className: modal_css.backdropStyle, onClick: handleBackdropClick });
-  return jsxRuntime.jsx(base.Modal, { className: modal_css.modalStyle, open: isOpen, slots: { backdrop: Backdrop }, children: jsxRuntime.jsxs("div", { ref, className: modal_css.dialogRecipe({ size }), ...rest, style: { backgroundColor }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: modal_css.headerRowRecipe({
+  const handleDialogClose = (event) => {
+    if (event.target === dialogRef.current) {
+      handleClose();
+    }
+  };
+  React.useEffect(() => {
+    const handleEscape = (event) => {
+      if (isOpen && event.key === "Escape") {
+        handleClose();
+      }
+    };
+    if (isOpen) {
+      window.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      window.removeEventListener("keydown", handleEscape);
+    };
+  }, [dialogRef, isOpen, handleClose]);
+  React.useEffect(() => {
+    var _a2, _b2;
+    if (isOpen) {
+      setRenderComponent(true);
+      (_a2 = dialogRef.current) == null ? void 0 : _a2.show();
+    } else {
+      (_b2 = dialogRef.current) == null ? void 0 : _b2.close();
+      setTimeout(() => setRenderComponent(false), 300);
+    }
+  }, [isOpen, renderComponent]);
+  if (!renderComponent) {
+    return null;
+  }
+  return reactDom.createPortal(jsxRuntime.jsxs("dialog", { ref: dialogRef, className: modal_css.modalStyle, onClick: handleDialogClose, children: [jsxRuntime.jsx("div", { role: "presentation", className: modal_css.backdropStyle, onClick: handleBackdropClick }), jsxRuntime.jsxs("div", { ref, className: modal_css.dialogRecipe({ size }), ...rest, style: { backgroundColor }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: modal_css.headerRowRecipe({
     size,
     hasScroll: hasScroll(size, contentHeight)
   }), style: { backgroundColor }, children: [title ? jsxRuntime.jsx(index$1.Heading1Text, { children: title }) : jsxRuntime.jsx("span", { "aria-hidden": true }), jsxRuntime.jsx(IconButton.IconButton, { icon: "close", label: text.dismissLabel, onClick: handleClose, disabled: (_a = primaryAction == null ? void 0 : primaryAction.loading) == null ? void 0 : _a.isLoading, autoFocus: true })] }), jsxRuntime.jsx("div", { ref: (element) => {
@@ -73,6 +105,6 @@ const Modal = React__namespace.forwardRef(function Modal2({ children, title, isO
   }), children })] }), primaryAction || secondaryAction || action ? jsxRuntime.jsxs("div", { className: modal_css.actionRowRecipe({
     size,
     hasScroll: hasScroll(size, contentHeight)
-  }), style: { backgroundColor }, children: [primaryAction ? jsxRuntime.jsx(PrimaryButton.PrimaryButton, { ...primaryAction, children: primaryAction.label }) : null, secondaryAction ? jsxRuntime.jsx(TextButton.TextButton, { ...secondaryAction, disabled: (_b = primaryAction == null ? void 0 : primaryAction.loading) == null ? void 0 : _b.isLoading, children: secondaryAction.label }) : null, action ? action : null] }) : null] }) });
+  }), style: { backgroundColor }, children: [primaryAction ? jsxRuntime.jsx(PrimaryButton.PrimaryButton, { ...primaryAction, children: primaryAction.label }) : null, secondaryAction ? jsxRuntime.jsx(TextButton.TextButton, { ...secondaryAction, disabled: (_b = primaryAction == null ? void 0 : primaryAction.loading) == null ? void 0 : _b.isLoading, children: secondaryAction.label }) : null, action ? action : null] }) : null] })] }), document.body);
 });
 exports.Modal = Modal;

package/dist/components/surfaces/modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,4CAAsE;AAKjG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKH,UAAU,EAGb,uBAAmD;AAEpD,UAAU,MAAO,SAAQ,gBAAgB,CAAC,QAAQ,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACvB,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6GAA6G;IAC7G,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+GAA+G;IAC/G,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAeD;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,KAAK,mFA0GhB,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,4CAAsE;AAIjG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAKH,UAAU,EAGb,uBAAmD;AAEpD,UAAU,MAAO,SAAQ,gBAAgB,CAAC,QAAQ,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACvB,uCAAuC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6GAA6G;IAC7G,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+GAA+G;IAC/G,eAAe,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC1C,4BAA4B;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAeD;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,KAAK,mFAgJhB,CAAC"}

package/dist/components/surfaces/modal/Modal.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { PrimaryButton } from "../../actions/buttons/PrimaryButton.js";
 import "../../actions/buttons/SecondaryButton.js";
 import "../../actions/buttons/SuccessButton.js";
@@ -15,10 +15,10 @@ import "../../actions/chips/TagChip.js";
 import { Heading1Text } from "../../../foundation/typography/index.js";
 import { useTranslation } from "../../../translations/index.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
-import { Modal as Modal$1 } from "@mui/base";
 import * as React from "react";
-import { useState } from "react";
-import { modalStyle, dialogRecipe, headerRowRecipe, contentContainerRecipe, actionRowRecipe, backdropStyle } from "./modal.css.js";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { modalStyle, backdropStyle, dialogRecipe, headerRowRecipe, contentContainerRecipe, actionRowRecipe } from "./modal.css.js";
 const hasScroll = (size, height) => {
   switch (size) {
     case "fullscreen":
@@ -35,13 +35,45 @@ const Modal = React.forwardRef(function Modal2({ children, title, isOpen, handle
   var _a, _b;
   const text = useTranslation((t) => t.components.surfaces.modal);
   const [contentHeight, setContentHeight] = useState(0);
+  const [renderComponent, setRenderComponent] = useState(false);
+  const dialogRef = useRef(null);
   const handleBackdropClick = (event) => {
     if (event.target === event.currentTarget) {
       handleClose();
     }
   };
-  const Backdrop = () => jsx("div", { role: "presentation", className: backdropStyle, onClick: handleBackdropClick });
-  return jsx(Modal$1, { className: modalStyle, open: isOpen, slots: { backdrop: Backdrop }, children: jsxs("div", { ref, className: dialogRecipe({ size }), ...rest, style: { backgroundColor }, children: [jsxs("div", { children: [jsxs("div", { className: headerRowRecipe({
+  const handleDialogClose = (event) => {
+    if (event.target === dialogRef.current) {
+      handleClose();
+    }
+  };
+  useEffect(() => {
+    const handleEscape = (event) => {
+      if (isOpen && event.key === "Escape") {
+        handleClose();
+      }
+    };
+    if (isOpen) {
+      window.addEventListener("keydown", handleEscape);
+    }
+    return () => {
+      window.removeEventListener("keydown", handleEscape);
+    };
+  }, [dialogRef, isOpen, handleClose]);
+  useEffect(() => {
+    var _a2, _b2;
+    if (isOpen) {
+      setRenderComponent(true);
+      (_a2 = dialogRef.current) == null ? void 0 : _a2.show();
+    } else {
+      (_b2 = dialogRef.current) == null ? void 0 : _b2.close();
+      setTimeout(() => setRenderComponent(false), 300);
+    }
+  }, [isOpen, renderComponent]);
+  if (!renderComponent) {
+    return null;
+  }
+  return createPortal(jsxs("dialog", { ref: dialogRef, className: modalStyle, onClick: handleDialogClose, children: [jsx("div", { role: "presentation", className: backdropStyle, onClick: handleBackdropClick }), jsxs("div", { ref, className: dialogRecipe({ size }), ...rest, style: { backgroundColor }, children: [jsxs("div", { children: [jsxs("div", { className: headerRowRecipe({
     size,
     hasScroll: hasScroll(size, contentHeight)
   }), style: { backgroundColor }, children: [title ? jsx(Heading1Text, { children: title }) : jsx("span", { "aria-hidden": true }), jsx(IconButton, { icon: "close", label: text.dismissLabel, onClick: handleClose, disabled: (_a = primaryAction == null ? void 0 : primaryAction.loading) == null ? void 0 : _a.isLoading, autoFocus: true })] }), jsx("div", { ref: (element) => {
@@ -54,7 +86,7 @@ const Modal = React.forwardRef(function Modal2({ children, title, isOpen, handle
   }), children })] }), primaryAction || secondaryAction || action ? jsxs("div", { className: actionRowRecipe({
     size,
     hasScroll: hasScroll(size, contentHeight)
-  }), style: { backgroundColor }, children: [primaryAction ? jsx(PrimaryButton, { ...primaryAction, children: primaryAction.label }) : null, secondaryAction ? jsx(TextButton, { ...secondaryAction, disabled: (_b = primaryAction == null ? void 0 : primaryAction.loading) == null ? void 0 : _b.isLoading, children: secondaryAction.label }) : null, action ? action : null] }) : null] }) });
+  }), style: { backgroundColor }, children: [primaryAction ? jsx(PrimaryButton, { ...primaryAction, children: primaryAction.label }) : null, secondaryAction ? jsx(TextButton, { ...secondaryAction, disabled: (_b = primaryAction == null ? void 0 : primaryAction.loading) == null ? void 0 : _b.isLoading, children: secondaryAction.label }) : null, action ? action : null] }) : null] })] }), document.body);
 });
 export {
   Modal

package/dist/components/surfaces/modal/modal.css.cjs

@@ -17,16 +17,26 @@ const backdropStyle = css.style({
   WebkitTapHighlightColor: "transparent"
 });
 const modalStyle = css.style({
-  position: "fixed",
-  zIndex: 1300,
-  right: 0,
-  bottom: 0,
-  top: 0,
-  left: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  isolation: "isolate"
+  selectors: {
+    "&:open": {
+      position: "fixed",
+      zIndex: 1300,
+      right: 0,
+      bottom: 0,
+      top: 0,
+      left: 0,
+      width: "100%",
+      maxWidth: "unset",
+      maxHeight: "unset",
+      backgroundColor: "transparent",
+      border: "none",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      isolation: "isolate"
+    }
+  }
 });
 const dialogPadding = (size) => {
   switch (size) {

package/dist/components/surfaces/modal/modal.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/modal.css.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAErE,eAAO,MAAM,aAAa,QASxB,CAAC;AAEH,eAAO,MAAM,UAAU,QAWrB,CAAC;AAcH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DvB,CAAC;AASH,eAAO,MAAM,eAAe;;;;;;;;;;;;;EAiC1B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;EAwDjC,CAAC;AAWH,eAAO,MAAM,eAAe;;;;;;;;;;;;;EAyC1B,CAAC"}
+{"version":3,"file":"modal.css.d.ts","sourceRoot":"","sources":["../../../../src/components/surfaces/modal/modal.css.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AAErE,eAAO,MAAM,aAAa,QASxB,CAAC;AAEH,eAAO,MAAM,UAAU,QAqBrB,CAAC;AAcH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DvB,CAAC;AASH,eAAO,MAAM,eAAe;;;;;;;;;;;;;EAiC1B,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;EAwDjC,CAAC;AAWH,eAAO,MAAM,eAAe;;;;;;;;;;;;;EAyC1B,CAAC"}

package/dist/components/surfaces/modal/modal.css.js

@@ -15,16 +15,26 @@ const backdropStyle = style({
   WebkitTapHighlightColor: "transparent"
 });
 const modalStyle = style({
-  position: "fixed",
-  zIndex: 1300,
-  right: 0,
-  bottom: 0,
-  top: 0,
-  left: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  isolation: "isolate"
+  selectors: {
+    "&:open": {
+      position: "fixed",
+      zIndex: 1300,
+      right: 0,
+      bottom: 0,
+      top: 0,
+      left: 0,
+      width: "100%",
+      maxWidth: "unset",
+      maxHeight: "unset",
+      backgroundColor: "transparent",
+      border: "none",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      isolation: "isolate"
+    }
+  }
 });
 const dialogPadding = (size) => {
   switch (size) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gnist/design-system",
-    "version": "2.0.30",
+    "version": "2.0.32",
     "license": "UNLICENSED",
     "type": "module",
     "main": "dist/index.cjs",
@@ -104,5 +104,5 @@
             "optional": true
         }
     },
-    "gitHead": "97d94f2d298c90505f4c7e683434f3c34a4a1a19"
+    "gitHead": "fe93b45cb3f1cd91b321b2d6b0962f76c32cf172"
 }