@gnist/design-system 2.0.31 → 2.0.33

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>2.0.33 (2025-03-27)</small>
+
+* fix: modal is now compatible with safari and ios browsers ([d91081a](https://github.com/mollerdigital/design-system-design-system/commit/d91081a))
+
+## <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))

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

@@ -92,7 +92,7 @@ const Modal = React__namespace.forwardRef(function Modal2({ children, title, isO
   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({
+  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({
     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) => {

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

@@ -73,7 +73,7 @@ const Modal = React.forwardRef(function Modal2({ children, title, isOpen, handle
   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({
+  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({
     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) => {

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

@@ -17,26 +17,22 @@ const backdropStyle = css.style({
   WebkitTapHighlightColor: "transparent"
 });
 const modalStyle = css.style({
-  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"
-    }
-  }
+  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,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"}
+{"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

@@ -15,26 +15,22 @@ const backdropStyle = style({
   WebkitTapHighlightColor: "transparent"
 });
 const modalStyle = style({
-  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"
-    }
-  }
+  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.31",
+    "version": "2.0.33",
     "license": "UNLICENSED",
     "type": "module",
     "main": "dist/index.cjs",
@@ -104,5 +104,5 @@
             "optional": true
         }
     },
-    "gitHead": "5b288b91fd9111c0fea2117dda92b56358120970"
+    "gitHead": "4e143c0723418c23cd27bb032fff0af1dad4627d"
 }