Merge branch 'main' into issue-2437/table-tabbing-in-edit-mode

stencil-workspace/src/components.d.ts

@@ -1779,6 +1779,17 @@ export namespace Components {
         "tabIndexValue": string | number;
         "updateComponent": () => Promise<void>;
     }
+    interface ModusUtilityPanel {
+        /**
+          * The panel is expanded or closed
+         */
+        "expanded": boolean;
+        /**
+          * Determines if the panel pushes content or displays an overlay.
+         */
+        "pushContent": boolean;
+        "targetContent": string;
+    }
 }
 export interface ModusAccordionItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -1932,6 +1943,10 @@ export interface ModusTreeViewItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLModusTreeViewItemElement;
 }
+export interface ModusUtilityPanelCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLModusUtilityPanelElement;
+}
 declare global {
     interface HTMLModusAccordionElement extends Components.ModusAccordion, HTMLStencilElement {
     }
@@ -2761,6 +2776,24 @@ declare global {
         prototype: HTMLModusTreeViewItemElement;
         new (): HTMLModusTreeViewItemElement;
     };
+    interface HTMLModusUtilityPanelElementEventMap {
+        "panelOpened": void;
+        "panelClosed": void;
+    }
+    interface HTMLModusUtilityPanelElement extends Components.ModusUtilityPanel, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLModusUtilityPanelElementEventMap>(type: K, listener: (this: HTMLModusUtilityPanelElement, ev: ModusUtilityPanelCustomEvent<HTMLModusUtilityPanelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLModusUtilityPanelElementEventMap>(type: K, listener: (this: HTMLModusUtilityPanelElement, ev: ModusUtilityPanelCustomEvent<HTMLModusUtilityPanelElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLModusUtilityPanelElement: {
+        prototype: HTMLModusUtilityPanelElement;
+        new (): HTMLModusUtilityPanelElement;
+    };
     interface HTMLElementTagNameMap {
         "modus-accordion": HTMLModusAccordionElement;
         "modus-accordion-item": HTMLModusAccordionItemElement;
@@ -2822,6 +2855,7 @@ declare global {
         "modus-tooltip": HTMLModusTooltipElement;
         "modus-tree-view": HTMLModusTreeViewElement;
         "modus-tree-view-item": HTMLModusTreeViewItemElement;
+        "modus-utility-panel": HTMLModusUtilityPanelElement;
     }
 }
 declare namespace LocalJSX {
@@ -4781,6 +4815,25 @@ declare namespace LocalJSX {
          */
         "tabIndexValue"?: string | number;
     }
+    interface ModusUtilityPanel {
+        /**
+          * The panel is expanded or closed
+         */
+        "expanded"?: boolean;
+        /**
+          * An event that fires when the panel is closed.
+         */
+        "onPanelClosed"?: (event: ModusUtilityPanelCustomEvent<void>) => void;
+        /**
+          * An event that fires when the panel is opened.
+         */
+        "onPanelOpened"?: (event: ModusUtilityPanelCustomEvent<void>) => void;
+        /**
+          * Determines if the panel pushes content or displays an overlay.
+         */
+        "pushContent"?: boolean;
+        "targetContent"?: string;
+    }
     interface IntrinsicElements {
         "modus-accordion": ModusAccordion;
         "modus-accordion-item": ModusAccordionItem;
@@ -4842,6 +4895,7 @@ declare namespace LocalJSX {
         "modus-tooltip": ModusTooltip;
         "modus-tree-view": ModusTreeView;
         "modus-tree-view-item": ModusTreeViewItem;
+        "modus-utility-panel": ModusUtilityPanel;
     }
 }
 export { LocalJSX as JSX };
@@ -4911,6 +4965,7 @@ declare module "@stencil/core" {
             "modus-tooltip": LocalJSX.ModusTooltip & JSXBase.HTMLAttributes<HTMLModusTooltipElement>;
             "modus-tree-view": LocalJSX.ModusTreeView & JSXBase.HTMLAttributes<HTMLModusTreeViewElement>;
             "modus-tree-view-item": LocalJSX.ModusTreeViewItem & JSXBase.HTMLAttributes<HTMLModusTreeViewItemElement>;
+            "modus-utility-panel": LocalJSX.ModusUtilityPanel & JSXBase.HTMLAttributes<HTMLModusUtilityPanelElement>;
         }
     }
 }

stencil-workspace/src/components/modus-utility-panel/modus-utility-panel.e2e.ts

@@ -0,0 +1,109 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('modus-utility-panel', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<modus-utility-panel></modus-utility-panel>');
+
+    const element = await page.find('modus-utility-panel');
+    expect(element).toHaveClass('hydrated');
+  });
+
+  it('renders changes to expanded prop', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<modus-utility-panel></modus-utility-panel>');
+
+    const component = await page.find('modus-utility-panel');
+    component.setProperty('expanded', true);
+    await page.waitForChanges();
+
+    const element = await page.find('modus-utility-panel >>> .utility-panel');
+    expect(element).toHaveClass('open');
+  });
+
+  it('renders changes to pushContent prop', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<div id="content">Test Content</div><modus-utility-panel></modus-utility-panel>');
+
+    const component = await page.find('modus-utility-panel');
+    component.setProperty('targetContent', '#content');
+    component.setProperty('pushContent', true);
+    component.setProperty('expanded', true);
+    await page.waitForChanges();
+    await new Promise((r) => setTimeout(r, 300)); // Allow transition to complete
+
+    const content = await page.find('#content');
+    const computedStyle = await content.getComputedStyle();
+    expect(computedStyle['marginRight']).toEqual('312px');
+
+    component.setProperty('expanded', false);
+    await page.waitForChanges();
+    await new Promise((r) => setTimeout(r, 300)); // Allow transition to complete
+
+    const updatedStyle = await content.getComputedStyle();
+    expect(updatedStyle['marginRight']).toEqual('0px');
+  });
+
+  it('emits panelOpened event', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<modus-utility-panel></modus-utility-panel>');
+
+    const component = await page.find('modus-utility-panel');
+    const openedEvent = await page.spyOnEvent('panelOpened');
+
+    component.setProperty('expanded', true);
+    await page.waitForChanges();
+
+    expect(openedEvent).toHaveReceivedEvent();
+  });
+
+  it('emits panelClosed event', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<modus-utility-panel></modus-utility-panel>');
+
+    const component = await page.find('modus-utility-panel');
+    const closedEvent = await page.spyOnEvent('panelClosed');
+
+    component.setProperty('expanded', true);
+    await page.waitForChanges();
+    component.setProperty('expanded', false);
+    await page.waitForChanges();
+
+    expect(closedEvent).toHaveReceivedEvent();
+  });
+
+  it('adjusts content margin when expanded with pushContent true', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<div id="content">Test Content</div><modus-utility-panel></modus-utility-panel>');
+
+    const component = await page.find('modus-utility-panel');
+    component.setProperty('targetContent', '#content');
+    component.setProperty('pushContent', true);
+    component.setProperty('expanded', true);
+    await page.waitForChanges();
+    await new Promise((r) => setTimeout(r, 300)); // Allow transition to complete
+
+    const content = await page.find('#content');
+    const computedStyle = await content.getComputedStyle();
+    expect(computedStyle['marginRight']).toEqual('312px');
+  });
+
+  it('adjusts content margin when collapsed with pushContent true', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<div id="content">Test Content</div><modus-utility-panel></modus-utility-panel>');
+
+    const component = await page.find('modus-utility-panel');
+    component.setProperty('targetContent', '#content');
+    component.setProperty('pushContent', true);
+    component.setProperty('expanded', true);
+    await page.waitForChanges();
+
+    component.setProperty('expanded', false);
+    await page.waitForChanges();
+    await new Promise((r) => setTimeout(r, 300)); // Allow transition to complete
+
+    const content = await page.find('#content');
+    const computedStyle = await content.getComputedStyle();
+    expect(computedStyle['marginRight']).toEqual('0px');
+  });
+});

stencil-workspace/src/components/modus-utility-panel/modus-utility-panel.scss

@@ -0,0 +1,52 @@
+@import './modus-utility-panel.vars';
+
+.utility-panel {
+  background-color: $modus-utility-panel-bg;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  color: $modus-utility-panel-color;
+  height: 100%;
+  position: absolute;
+  right: -324px;
+  top: 0;
+  transition: right 0.3s ease-out;
+  width: 312px;
+
+  &.open {
+    right: 0;
+    transition: right 0.3s ease-out;
+  }
+
+  .overlay {
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+  }
+
+  .panel-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .panel-header,
+    .panel-footer {
+      align-items: center;
+      display: flex;
+      height: 50px;
+      padding: 0 1rem;
+    }
+
+    .panel-body {
+      flex: 1;
+      overflow: auto;
+      padding: 1rem;
+    }
+
+    hr {
+      border: none;
+      border-top: 1px solid #ccc;
+      margin: 0;
+    }
+  }
+}

stencil-workspace/src/components/modus-utility-panel/modus-utility-panel.spec.ts

@@ -0,0 +1,70 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { ModusUtilityPanel } from './modus-utility-panel';
+
+describe('modus-utility-panel', () => {
+  it('renders', async () => {
+    const { root } = await newSpecPage({
+      components: [ModusUtilityPanel],
+      html: '<modus-utility-panel></modus-utility-panel>',
+    });
+    expect(root).toEqualHtml(`
+      <modus-utility-panel>
+        <mock:shadow-root>
+          <div class="overlay utility-panel">
+            <div class="panel-content">
+              <div aria-labelledby="body" class="panel-body">
+                <slot name="body"></slot>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </modus-utility-panel>
+    `);
+  });
+
+  it('renders changes to expanded prop', async () => {
+    const { root } = await newSpecPage({
+      components: [ModusUtilityPanel],
+      html: '<modus-utility-panel expanded="true"></modus-utility-panel>',
+    });
+
+    expect(root).toEqualHtml(`
+      <modus-utility-panel expanded="true">
+        <mock:shadow-root>
+          <div class="open overlay utility-panel">
+            <div class="panel-content">
+              <div aria-labelledby="body" class="panel-body">
+                <slot name="body"></slot>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </modus-utility-panel>
+    `);
+  });
+
+  it('renders changes to pushContent prop', async () => {
+    const { root } = await newSpecPage({
+      components: [ModusUtilityPanel],
+      html: '<modus-utility-panel expanded="true" push-content="true"></modus-utility-panel>',
+    });
+
+    root.targetContent = '#content';
+    root.pushContent = true;
+    root.expanded = true;
+
+    expect(root).toEqualHtml(`
+      <modus-utility-panel expanded="true" push-content="true">
+        <mock:shadow-root>
+          <div class="open utility-panel">
+            <div class="panel-content">
+              <div aria-labelledby="body" class="panel-body">
+                <slot name="body"></slot>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </modus-utility-panel>
+    `);
+  });
+});