@gnist/design-system 2.0.30 → 2.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/dist/components/surfaces/modal/Modal.cjs +36 -4
  3. package/dist/components/surfaces/modal/Modal.d.ts.map +1 -1
  4. package/dist/components/surfaces/modal/Modal.js +39 -7
  5. package/dist/components/surfaces/modal/modal.css.cjs +20 -10
  6. package/dist/components/surfaces/modal/modal.css.d.ts.map +1 -1
  7. package/dist/components/surfaces/modal/modal.css.js +20 -10
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,11 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## <small>2.0.31 (2025-03-26)</small>
7
+
8
+ * 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))
9
+ * 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))
10
+
6
11
  ## <small>2.0.30 (2025-03-21)</small>
7
12
 
8
13
  * feat: add new icons ([982f902](https://github.com/mollerdigital/design-system-design-system/commit/982f902))
package/dist/components/surfaces/modal/Modal.cjs CHANGED
@@ -17,8 +17,8 @@ require("../../actions/chips/TagChip.cjs");
17
17
  const index$1 = require("../../../foundation/typography/index.cjs");
18
18
  const index = require("../../../translations/index.cjs");
19
19
  const tokens_css_js = require("@gnist/themes/tokens.css.js");
20
- const base = require("@mui/base");
21
20
  const React = require("react");
21
+ const reactDom = require("react-dom");
22
22
  const modal_css = require("./modal.css.cjs");
23
23
  function _interopNamespaceCompat(e) {
24
24
  if (e && typeof e === "object" && "default" in e) return e;
@@ -54,13 +54,45 @@ const Modal = React__namespace.forwardRef(function Modal2({ children, title, isO
54
54
  var _a, _b;
55
55
  const text = index.useTranslation((t) => t.components.surfaces.modal);
56
56
  const [contentHeight, setContentHeight] = React.useState(0);
57
+ const [renderComponent, setRenderComponent] = React.useState(false);
58
+ const dialogRef = React.useRef(null);
57
59
  const handleBackdropClick = (event) => {
58
60
  if (event.target === event.currentTarget) {
59
61
  handleClose();
60
62
  }
61
63
  };
62
- const Backdrop = () => jsxRuntime.jsx("div", { role: "presentation", className: modal_css.backdropStyle, onClick: handleBackdropClick });
63
- 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({
64
+ const handleDialogClose = (event) => {
65
+ if (event.target === dialogRef.current) {
66
+ handleClose();
67
+ }
68
+ };
69
+ React.useEffect(() => {
70
+ const handleEscape = (event) => {
71
+ if (isOpen && event.key === "Escape") {
72
+ handleClose();
73
+ }
74
+ };
75
+ if (isOpen) {
76
+ window.addEventListener("keydown", handleEscape);
77
+ }
78
+ return () => {
79
+ window.removeEventListener("keydown", handleEscape);
80
+ };
81
+ }, [dialogRef, isOpen, handleClose]);
82
+ React.useEffect(() => {
83
+ var _a2, _b2;
84
+ if (isOpen) {
85
+ setRenderComponent(true);
86
+ (_a2 = dialogRef.current) == null ? void 0 : _a2.show();
87
+ } else {
88
+ (_b2 = dialogRef.current) == null ? void 0 : _b2.close();
89
+ setTimeout(() => setRenderComponent(false), 300);
90
+ }
91
+ }, [isOpen, renderComponent]);
92
+ if (!renderComponent) {
93
+ return null;
94
+ }
95
+ 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({
64
96
  size,
65
97
  hasScroll: hasScroll(size, contentHeight)
66
98
  }), 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
73
105
  }), children })] }), primaryAction || secondaryAction || action ? jsxRuntime.jsxs("div", { className: modal_css.actionRowRecipe({
74
106
  size,
75
107
  hasScroll: hasScroll(size, contentHeight)
76
- }), 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] }) });
108
+ }), 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);
77
109
  });
78
110
  exports.Modal = Modal;
package/dist/components/surfaces/modal/Modal.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { jsxs, jsx } from "react/jsx-runtime";
3
3
  import { PrimaryButton } from "../../actions/buttons/PrimaryButton.js";
4
4
  import "../../actions/buttons/SecondaryButton.js";
5
5
  import "../../actions/buttons/SuccessButton.js";
@@ -15,10 +15,10 @@ import "../../actions/chips/TagChip.js";
15
15
  import { Heading1Text } from "../../../foundation/typography/index.js";
16
16
  import { useTranslation } from "../../../translations/index.js";
17
17
  import { tokens } from "@gnist/themes/tokens.css.js";
18
- import { Modal as Modal$1 } from "@mui/base";
19
18
  import * as React from "react";
20
- import { useState } from "react";
21
- import { modalStyle, dialogRecipe, headerRowRecipe, contentContainerRecipe, actionRowRecipe, backdropStyle } from "./modal.css.js";
19
+ import { useState, useRef, useEffect } from "react";
20
+ import { createPortal } from "react-dom";
21
+ import { modalStyle, backdropStyle, dialogRecipe, headerRowRecipe, contentContainerRecipe, actionRowRecipe } from "./modal.css.js";
22
22
  const hasScroll = (size, height) => {
23
23
  switch (size) {
24
24
  case "fullscreen":
@@ -35,13 +35,45 @@ const Modal = React.forwardRef(function Modal2({ children, title, isOpen, handle
35
35
  var _a, _b;
36
36
  const text = useTranslation((t) => t.components.surfaces.modal);
37
37
  const [contentHeight, setContentHeight] = useState(0);
38
+ const [renderComponent, setRenderComponent] = useState(false);
39
+ const dialogRef = useRef(null);
38
40
  const handleBackdropClick = (event) => {
39
41
  if (event.target === event.currentTarget) {
40
42
  handleClose();
41
43
  }
42
44
  };
43
- const Backdrop = () => jsx("div", { role: "presentation", className: backdropStyle, onClick: handleBackdropClick });
44
- 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({
45
+ const handleDialogClose = (event) => {
46
+ if (event.target === dialogRef.current) {
47
+ handleClose();
48
+ }
49
+ };
50
+ useEffect(() => {
51
+ const handleEscape = (event) => {
52
+ if (isOpen && event.key === "Escape") {
53
+ handleClose();
54
+ }
55
+ };
56
+ if (isOpen) {
57
+ window.addEventListener("keydown", handleEscape);
58
+ }
59
+ return () => {
60
+ window.removeEventListener("keydown", handleEscape);
61
+ };
62
+ }, [dialogRef, isOpen, handleClose]);
63
+ useEffect(() => {
64
+ var _a2, _b2;
65
+ if (isOpen) {
66
+ setRenderComponent(true);
67
+ (_a2 = dialogRef.current) == null ? void 0 : _a2.show();
68
+ } else {
69
+ (_b2 = dialogRef.current) == null ? void 0 : _b2.close();
70
+ setTimeout(() => setRenderComponent(false), 300);
71
+ }
72
+ }, [isOpen, renderComponent]);
73
+ if (!renderComponent) {
74
+ return null;
75
+ }
76
+ 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({
45
77
  size,
46
78
  hasScroll: hasScroll(size, contentHeight)
47
79
  }), 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
54
86
  }), children })] }), primaryAction || secondaryAction || action ? jsxs("div", { className: actionRowRecipe({
55
87
  size,
56
88
  hasScroll: hasScroll(size, contentHeight)
57
- }), 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] }) });
89
+ }), 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);
58
90
  });
59
91
  export {
60
92
  Modal
package/dist/components/surfaces/modal/modal.css.cjs CHANGED
@@ -17,16 +17,26 @@ const backdropStyle = css.style({
17
17
  WebkitTapHighlightColor: "transparent"
18
18
  });
19
19
  const modalStyle = css.style({
20
- position: "fixed",
21
- zIndex: 1300,
22
- right: 0,
23
- bottom: 0,
24
- top: 0,
25
- left: 0,
26
- display: "flex",
27
- alignItems: "center",
28
- justifyContent: "center",
29
- isolation: "isolate"
20
+ selectors: {
21
+ "&:open": {
22
+ position: "fixed",
23
+ zIndex: 1300,
24
+ right: 0,
25
+ bottom: 0,
26
+ top: 0,
27
+ left: 0,
28
+ width: "100%",
29
+ maxWidth: "unset",
30
+ maxHeight: "unset",
31
+ backgroundColor: "transparent",
32
+ border: "none",
33
+ height: "100%",
34
+ display: "flex",
35
+ alignItems: "center",
36
+ justifyContent: "center",
37
+ isolation: "isolate"
38
+ }
39
+ }
30
40
  });
31
41
  const dialogPadding = (size) => {
32
42
  switch (size) {
package/dist/components/surfaces/modal/modal.css.d.ts.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -15,16 +15,26 @@ const backdropStyle = style({
15
15
  WebkitTapHighlightColor: "transparent"
16
16
  });
17
17
  const modalStyle = style({
18
- position: "fixed",
19
- zIndex: 1300,
20
- right: 0,
21
- bottom: 0,
22
- top: 0,
23
- left: 0,
24
- display: "flex",
25
- alignItems: "center",
26
- justifyContent: "center",
27
- isolation: "isolate"
18
+ selectors: {
19
+ "&:open": {
20
+ position: "fixed",
21
+ zIndex: 1300,
22
+ right: 0,
23
+ bottom: 0,
24
+ top: 0,
25
+ left: 0,
26
+ width: "100%",
27
+ maxWidth: "unset",
28
+ maxHeight: "unset",
29
+ backgroundColor: "transparent",
30
+ border: "none",
31
+ height: "100%",
32
+ display: "flex",
33
+ alignItems: "center",
34
+ justifyContent: "center",
35
+ isolation: "isolate"
36
+ }
37
+ }
28
38
  });
29
39
  const dialogPadding = (size) => {
30
40
  switch (size) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gnist/design-system",
3
- "version": "2.0.30",
3
+ "version": "2.0.31",
4
4
  "license": "UNLICENSED",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
@@ -104,5 +104,5 @@
104
104
  "optional": true
105
105
  }
106
106
  },
107
- "gitHead": "97d94f2d298c90505f4c7e683434f3c34a4a1a19"
107
+ "gitHead": "5b288b91fd9111c0fea2117dda92b56358120970"
108
108
  }