diff --git a/package-lock.json b/package-lock.json
index dfb1a828195..d406b2523c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36748,6 +36748,7 @@
"@arcgis/lumina": "4.32.0-next.20",
"@esri/calcite-ui-icons": "4.0.0-next.0",
"@floating-ui/dom": "1.6.12",
+ "@floating-ui/utils": "0.2.8",
"@types/color": "3.0.6",
"@types/sortablejs": "1.15.8",
"color": "4.2.3",
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index 2424625493d..ced78b7795b 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -75,6 +75,7 @@
"@arcgis/lumina": "4.32.0-next.20",
"@esri/calcite-ui-icons": "4.0.0-next.0",
"@floating-ui/dom": "1.6.12",
+ "@floating-ui/utils": "0.2.8",
"@types/color": "3.0.6",
"@types/sortablejs": "1.15.8",
"color": "4.2.3",
diff --git a/packages/calcite-components/src/components/modal/modal.scss b/packages/calcite-components/src/components/modal/modal.scss
index 7411a70b924..3c596f22ef8 100644
--- a/packages/calcite-components/src/components/modal/modal.scss
+++ b/packages/calcite-components/src/components/modal/modal.scss
@@ -13,7 +13,10 @@
:host {
--calcite-modal-scrim-background: #{rgba($calcite-color-neutral-blk-240, $calcite-opacity-85)};
- @apply absolute flex inset-0 opacity-0 z-overlay;
+}
+
+:host {
+ @apply fixed flex inset-0 opacity-0 z-overlay;
visibility: hidden !important;
transition:
visibility 0ms linear var(--calcite-internal-animation-timing-slow),
@@ -29,14 +32,13 @@
.container {
@apply text-color-2
- fixed
+ absolute
inset-0
flex
items-center
justify-center
overflow-y-hidden
- opacity-0
- z-overlay;
+ opacity-0;
visibility: hidden !important;
transition:
visibility 0ms linear var(--calcite-internal-animation-timing-slow),
@@ -66,7 +68,7 @@
.scrim {
--calcite-scrim-background: var(--calcite-modal-scrim-background, var(--calcite-color-transparent-scrim));
- @apply fixed inset-0 flex overflow-y-hidden;
+ @apply absolute inset-0 flex overflow-y-hidden;
}
.modal {
@@ -165,7 +167,6 @@
padding-inline: var(--calcite-modal-padding-internal);
flex: 0 0 auto;
calcite-icon {
- @apply pointer-events-none;
vertical-align: -2px;
}
&:focus {
@@ -402,16 +403,4 @@ slot[name="primary"] {
}
}
-/**
- * Conditional styles for when Modal is slotted in Shell
- */
-
-.container--embedded {
- position: absolute;
- pointer-events: auto;
- calcite-scrim {
- position: absolute;
- }
-}
-
@include base-component();
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index f2ffa91cc3e..e1114490bbe 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -10,6 +10,7 @@ import {
JsxNode,
setAttribute,
} from "@arcgis/lumina";
+import { getNearestOverflowAncestor } from "@floating-ui/utils/dom";
import {
ensureId,
focusFirstTabbable,
@@ -154,14 +155,6 @@ export class Modal
/** When `true`, prevents the component from expanding to the entire screen on mobile devices. */
@property({ reflect: true }) docked: boolean;
- /**
- * This internal property, managed by a containing calcite-shell, is used
- * to inform the component if special configuration or styles are needed
- *
- * @private
- */
- @property() embedded = false;
-
/** When `true`, disables the default close on escape behavior. */
@property({ reflect: true }) escapeDisabled = false;
@@ -330,7 +323,6 @@ export class Modal
this.mutationObserver?.disconnect();
this.cssVarObserver?.disconnect();
deactivateFocusTrap(this);
- this.embedded = false;
}
// #endregion
@@ -424,7 +416,7 @@ export class Modal
this.titleId = ensureId(this.titleEl);
this.contentId = ensureId(this.contentEl);
- if (!this.embedded) {
+ if (getNearestOverflowAncestor(this.el) === document.body) {
if (totalOpenModals === 0) {
initialDocumentOverflowStyle = document.documentElement.style.overflow;
}
@@ -458,9 +450,14 @@ export class Modal
}
}
- totalOpenModals--;
+ if (getNearestOverflowAncestor(this.el) === document.body) {
+ totalOpenModals--;
+ if (totalOpenModals === 0) {
+ this.removeOverflowHiddenClass();
+ }
+ }
+
this.opened = false;
- this.removeOverflowHiddenClass();
}
private removeOverflowHiddenClass(): void {
@@ -498,7 +495,6 @@ export class Modal
class={{
[CSS.container]: true,
[CSS.containerOpen]: this.opened,
- [CSS.containerEmbedded]: this.embedded,
}}
>
diff --git a/packages/calcite-components/src/components/shell/shell.scss b/packages/calcite-components/src/components/shell/shell.scss
index d2880ef6b19..de63379e0fd 100755
--- a/packages/calcite-components/src/components/shell/shell.scss
+++ b/packages/calcite-components/src/components/shell/shell.scss
@@ -141,4 +141,8 @@ slot[name="panel-top"]::slotted(calcite-shell-center-row) {
inset: 0;
}
+slot[name="modals"]::slotted(calcite-modal) {
+ position: absolute;
+}
+
@include base-component();
diff --git a/packages/calcite-components/src/components/shell/shell.tsx b/packages/calcite-components/src/components/shell/shell.tsx
index 6a6e72650cd..2f58cd72f02 100755
--- a/packages/calcite-components/src/components/shell/shell.tsx
+++ b/packages/calcite-components/src/components/shell/shell.tsx
@@ -2,7 +2,6 @@ import { PropertyValues } from "lit";
import { LitElement, property, Fragment, h, state, JsxNode } from "@arcgis/lumina";
import { slotChangeGetAssignedElements, slotChangeHasAssignedElement } from "../../utils/dom";
import type { Dialog } from "../dialog/dialog";
-import type { Modal } from "../modal/modal";
import type { Sheet } from "../sheet/sheet";
import type { Alert } from "../alert/alert";
import { styles } from "./shell.scss";
@@ -135,11 +134,6 @@ export class Shell extends LitElement {
private handleModalsSlotChange(event: Event): void {
this.hasModals = !!slotChangeHasAssignedElement(event);
- slotChangeGetAssignedElements(event)?.map((el) => {
- if (el.tagName === "CALCITE-MODAL") {
- (el as Modal["el"]).embedded = true;
- }
- });
}
private handlePanelTopChange(event: Event): void {
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
index 7dc7aab8ed6..520e983d578 100644
--- a/packages/calcite-components/src/custom-theme.stories.ts
+++ b/packages/calcite-components/src/custom-theme.stories.ts
@@ -122,8 +122,8 @@ const kitchenSink = (args: Record, useTestValues = false) =>
${chips} ${pagination} ${slider}
- ${datePicker} ${tabs} ${label} ${link} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials} ${avatarThumbnail}
- ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
+ ${datePicker} ${tabs} ${label} ${link} ${loader} ${calciteSwitch} ${avatarIcon} ${avatarInitials}
+ ${avatarThumbnail} ${progress} ${handle} ${textArea} ${popover} ${tile} ${tooltip}
${alert} ${navigation}