@gnist/design-system 2.0.32 → 2.0.33

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 (7) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/components/surfaces/modal/Modal.cjs +1 -1
  3. package/dist/components/surfaces/modal/Modal.js +1 -1
  4. package/dist/components/surfaces/modal/modal.css.cjs +16 -20
  5. package/dist/components/surfaces/modal/modal.css.d.ts.map +1 -1
  6. package/dist/components/surfaces/modal/modal.css.js +16 -20
  7. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
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.33 (2025-03-27)</small>
7
+
8
+ * fix: modal is now compatible with safari and ios browsers ([d91081a](https://github.com/mollerdigital/design-system-design-system/commit/d91081a))
9
+
6
10
  ## <small>2.0.32 (2025-03-27)</small>
7
11
 
8
12
  * fix: ownerState not recognised error for Select components ([cbdbd81](https://github.com/mollerdigital/design-system-design-system/commit/cbdbd81))
package/dist/components/surfaces/modal/Modal.cjs CHANGED
@@ -92,7 +92,7 @@ const Modal = React__namespace.forwardRef(function Modal2({ children, title, isO
92
92
  if (!renderComponent) {
93
93
  return null;
94
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({
95
+ return reactDom.createPortal(jsxRuntime.jsxs("dialog", { ref: dialogRef, className: isOpen ? 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({
96
96
  size,
97
97
  hasScroll: hasScroll(size, contentHeight)
98
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) => {
package/dist/components/surfaces/modal/Modal.js CHANGED
@@ -73,7 +73,7 @@ const Modal = React.forwardRef(function Modal2({ children, title, isOpen, handle
73
73
  if (!renderComponent) {
74
74
  return null;
75
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({
76
+ return createPortal(jsxs("dialog", { ref: dialogRef, className: isOpen ? 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({
77
77
  size,
78
78
  hasScroll: hasScroll(size, contentHeight)
79
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) => {
package/dist/components/surfaces/modal/modal.css.cjs CHANGED
@@ -17,26 +17,22 @@ const backdropStyle = css.style({
17
17
  WebkitTapHighlightColor: "transparent"
18
18
  });
19
19
  const modalStyle = css.style({
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
- }
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"
40
36
  });
41
37
  const dialogPadding = (size) => {
42
38
  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,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"}
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,QAiBrB,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,26 +15,22 @@ const backdropStyle = style({
15
15
  WebkitTapHighlightColor: "transparent"
16
16
  });
17
17
  const modalStyle = style({
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
- }
18
+ position: "fixed",
19
+ zIndex: 1300,
20
+ right: 0,
21
+ bottom: 0,
22
+ top: 0,
23
+ left: 0,
24
+ width: "100%",
25
+ maxWidth: "unset",
26
+ maxHeight: "unset",
27
+ backgroundColor: "transparent",
28
+ border: "none",
29
+ height: "100%",
30
+ display: "flex",
31
+ alignItems: "center",
32
+ justifyContent: "center",
33
+ isolation: "isolate"
38
34
  });
39
35
  const dialogPadding = (size) => {
40
36
  switch (size) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gnist/design-system",
3
- "version": "2.0.32",
3
+ "version": "2.0.33",
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": "fe93b45cb3f1cd91b321b2d6b0962f76c32cf172"
107
+ "gitHead": "4e143c0723418c23cd27bb032fff0af1dad4627d"
108
108
  }