fix(shell, shell-panel): support resizing shell panel when there is a…

…n iframe slotted in shell content (#8317) **Related Issue:** #8156 ## Summary - When resizing starts & stops on a shell panel, emit an event to the shell. - The shell will listen for that event and set pointer events none on the default slot container when resizing is active. - This will prevent the iframe from capturing any pointer events and not bubbling them up which fixes the resize functionality
Esri · Dec 5, 2023 · e0f69c9 · e0f69c9
1 parent c5e9521
commit e0f69c9
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 7 deletions.
diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -1,4 +1,15 @@
-import { Component, Element, forceUpdate, h, Prop, State, VNode, Watch } from "@stencil/core";
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  forceUpdate,
+  h,
+  Prop,
+  State,
+  VNode,
+  Watch,
+} from "@stencil/core";
 import {
   ConditionalSlotComponent,
   connectConditionalSlotComponent,
@@ -216,6 +227,22 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
 
   @State() hasHeader = false;
 
+  // --------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  // --------------------------------------------------------------------------
+
+  /**
+   * @internal
+   */
+  @Event({ cancelable: false }) calciteInternalShellPanelResizeStart: EventEmitter<void>;
+
+  /**
+   * @internal
+   */
+  @Event({ cancelable: false }) calciteInternalShellPanelResizeEnd: EventEmitter<void>;
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -577,6 +604,8 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
       return;
     }
 
+    this.calciteInternalShellPanelResizeEnd.emit();
+
     event.preventDefault();
     window.removeEventListener("pointerup", this.separatorPointerUp);
     window.removeEventListener("pointermove", this.separatorPointerMove);
@@ -595,6 +624,8 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent,
       return;
     }
 
+    this.calciteInternalShellPanelResizeStart.emit();
+
     event.preventDefault();
     const { separatorEl } = this;
 

diff --git a/packages/calcite-components/src/components/shell/resources.ts b/packages/calcite-components/src/components/shell/resources.ts
@@ -2,6 +2,7 @@ export const CSS = {
   main: "main",
   content: "content",
   contentBehind: "content--behind",
+  contentNonInteractive: "content--non-interactive",
   footer: "footer",
   positionedSlotWrapper: "positioned-slot-wrapper",
   container: "container",

diff --git a/packages/calcite-components/src/components/shell/shell.scss b/packages/calcite-components/src/components/shell/shell.scss
@@ -29,13 +29,17 @@
     overflow-hidden;
 }
 
-.content {
+.content,
+.content--non-interactive {
   @apply flex
     h-full
     w-full
     flex-col
-    flex-nowrap
-    overflow-auto;
+    flex-nowrap;
+}
+
+.content {
+  @apply overflow-auto;
 }
 
 .content ::slotted(calcite-shell-center-row),
@@ -53,6 +57,10 @@
   display: initial;
 }
 
+.content--non-interactive {
+  @apply pointer-events-none;
+}
+
 ::slotted(calcite-shell-center-row) {
   inline-size: unset;
 }

diff --git a/packages/calcite-components/src/components/shell/shell.tsx b/packages/calcite-components/src/components/shell/shell.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Fragment, h, Prop, State, VNode } from "@stencil/core";
+import { Component, Element, Fragment, h, Listen, Prop, State, VNode } from "@stencil/core";
 import {
   ConditionalSlotComponent,
   connectConditionalSlotComponent,
@@ -38,6 +38,24 @@ export class Shell implements ConditionalSlotComponent {
    */
   @Prop({ reflect: true }) contentBehind = false;
 
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+
+  @Listen("calciteInternalShellPanelResizeStart")
+  handleCalciteInternalShellPanelResizeStart(event: CustomEvent<void>): void {
+    this.panelIsResizing = true;
+    event.stopPropagation();
+  }
+
+  @Listen("calciteInternalShellPanelResizeEnd")
+  handleCalciteInternalShellPanelResizeEnd(event: CustomEvent<void>): void {
+    this.panelIsResizing = false;
+    event.stopPropagation();
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Private Properties
@@ -56,6 +74,8 @@ export class Shell implements ConditionalSlotComponent {
 
   @State() hasSheets = false;
 
+  @State() panelIsResizing = false;
+
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -158,7 +178,13 @@ export class Shell implements ConditionalSlotComponent {
   }
 
   renderContent(): VNode[] {
+    const { panelIsResizing } = this;
     const defaultSlotNode: VNode = <slot key="default-slot" />;
+    const defaultSlotContainerNode = panelIsResizing ? (
+      <div class={CSS.contentNonInteractive}>{defaultSlotNode}</div>
+    ) : (
+      defaultSlotNode
+    );
     const deprecatedCenterRowSlotNode: VNode = (
       <slot key="center-row-slot" name={SLOTS.centerRow} />
     );
@@ -176,7 +202,7 @@ export class Shell implements ConditionalSlotComponent {
             }}
             key={contentContainerKey}
           >
-            {defaultSlotNode}
+            {defaultSlotContainerNode}
           </div>,
           <div class={CSS.contentBehindCenterContent}>
             {panelTopSlotNode}
@@ -187,7 +213,7 @@ export class Shell implements ConditionalSlotComponent {
       : [
           <div class={CSS.content} key={contentContainerKey}>
             {panelTopSlotNode}
-            {defaultSlotNode}
+            {defaultSlotContainerNode}
             {panelBottomSlotNode}
             {deprecatedCenterRowSlotNode}
           </div>,