Merge branch 'v8-master'

betocantu93 · betocantu93 · commit dcad5f171bc4 · 2025-03-09T18:19:19.000-06:00
diff --git a/packages/changeset-form/CHANGELOG.md b/packages/changeset-form/CHANGELOG.md
@@ -203,6 +203,13 @@
 
 - Updated dependencies [157b860]
   - @ember-eui/core@8.1.0
+## 8.0.48
+
+### Patch Changes
+
+- Adds eui-wrapping-popover component
+- Updated dependencies
+  - @ember-eui/core@8.0.48
 
 ## 8.0.47
 
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -141,6 +141,11 @@
 ### Minor Changes
 
 - 157b860: Fixes issues
+## 8.0.48
+
+### Patch Changes
+
+- Adds eui-wrapping-popover component
 
 ## 8.0.47
 
diff --git a/packages/core/docs/layout/popover/demo/d12-popover-using-and-html-element-as-the-anchor.md b/packages/core/docs/layout/popover/demo/d12-popover-using-and-html-element-as-the-anchor.md
@@ -5,5 +5,64 @@ order: 12
 # Popover using an HTML Element as the anchor
 
 ```hbs template
-  <TodoText @text='To do'/>
-```
+{{#each this.buttons key='id' as |ele|}}
+  {{ele.button}}
+{{/each}}
+
+{{#if this.isOpen}}
+  <EuiWrappingPopover
+    @button={{this.button}}
+    @isOpen={{this.isOpen}}
+    @closePopover={{this.closePopover}}
+  >
+    <div>Normal JSX content populates the popover.</div>
+  </EuiWrappingPopover>
+{{/if}}
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { next } from '@ember/runloop';
+
+export default class PopoverDemo1 extends Component {
+  @tracked isOpen = false;
+  @tracked button = null;
+  @tracked counter = 1;
+
+  @tracked buttons = [];
+
+  closePopover = () => {
+    this.isOpen = false;
+    this.createButton();
+  };
+
+  createButton = () => {
+    const button = document.createElement('div');
+
+    button.innerHTML = `This is a dynamically inserted html node with <b>ID = ${this.counter}</b>, if you click, you will get a popover on it.`;
+
+    button.addEventListener('click', () => {
+      this.isOpen = true;
+      this.button = button;
+    });
+
+    const ele = {
+      button,
+      id: `${this.counter}`
+    };
+
+    this.buttons = [...this.buttons, ele];
+    this.counter++;
+  };
+
+  constructor() {
+    super(...arguments);
+
+    next(() => {
+      this.createButton();
+    });
+  }
+}
+```
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -417,6 +417,7 @@
       "./components/eui-toast.js": "./dist/_app_/components/eui-toast.js",
       "./components/eui-tool-tip-popover.js": "./dist/_app_/components/eui-tool-tip-popover.js",
       "./components/eui-tool-tip.js": "./dist/_app_/components/eui-tool-tip.js",
+      "./components/eui-wrapping-popover.js": "./dist/_app_/components/eui-wrapping-popover.js",
       "./components/text-block.js": "./dist/_app_/components/text-block.js",
       "./helpers/arg-or-default.js": "./dist/_app_/helpers/arg-or-default.js",
       "./helpers/cast-to.js": "./dist/_app_/helpers/cast-to.js",
diff --git a/packages/core/src/components/eui-portal.gts b/packages/core/src/components/eui-portal.gts
@@ -22,7 +22,7 @@ type EuiPortalInsertPosition = keyof typeof insertPositions;
 
 export interface EuiPortalArgs {
   insert?: { sibling: HTMLElement; position: EuiPortalInsertPosition };
-  portalRef?: (ref: HTMLDivElement | null) => void;
+  portalRef?: (ref: HTMLElement) => void;
 }
 
 export interface EuiPortalSignature {
@@ -53,6 +53,10 @@ export default class EuiPortal extends Component<EuiPortalSignature> {
         this.portalNode
       );
     }
+
+    if (this.args.portalRef) {
+      this.args.portalRef(this.portalNode);
+    }
   }
 
   willDestroy(): void {
diff --git a/packages/core/src/components/eui-wrapping-popover.gts b/packages/core/src/components/eui-wrapping-popover.gts
@@ -0,0 +1,85 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { modifier } from 'ember-modifier';
+
+import EuiPopover from './eui-popover.gts';
+import EuiPortal from './eui-portal.gts';
+
+import type { EuiPopoverSignature } from './eui-popover.gts';
+
+export interface EuiWrappingPopoverSignature {
+  Element: EuiPopoverSignature['Element'];
+  Args: EuiPopoverSignature['Args'] & {
+    button?: HTMLElement;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class EuiWrappingPopover extends Component<EuiWrappingPopoverSignature> {
+  private portal: HTMLElement | null = null;
+  private anchor: HTMLElement | null = null;
+
+  setAnchorRef = modifier((element: HTMLElement) => {
+    this.anchor = element;
+    this.anchor.insertAdjacentElement('beforebegin', this.args.button!);
+  });
+
+  setPortalRef = (element: HTMLElement) => {
+    this.portal = element;
+  };
+
+  get insert(): { sibling: HTMLElement; position: 'after' } | undefined {
+    if (this.args.button) {
+      return {
+        sibling: this.args.button,
+        position: 'after'
+      };
+    }
+
+    return;
+  }
+
+  willDestroy() {
+    super.willDestroy();
+
+    if (this.args.button && this.args.button.parentNode) {
+      if (this.portal) {
+        this.portal.insertAdjacentElement('beforebegin', this.args.button);
+      }
+    }
+  }
+
+  <template>
+    <EuiPortal @portalRef={{this.setPortalRef}} @insert={{this.insert}}>
+      <EuiPopover
+        @closePopover={{@closePopover}}
+        @isOpen={{@isOpen}}
+        @anchorClassName={{@anchorClassName}}
+        @anchorPosition={{@anchorPosition}}
+        @attachToAnchor={{@attachToAnchor}}
+        @container={{@container}}
+        @display={{@display}}
+        @hasArrow={{@hasArrow}}
+        @initialFocus={{@initialFocus}}
+        @ownFocus={{@ownFocus}}
+        @panelClassName={{@panelClassName}}
+        @panelPaddingSize={{@panelPaddingSize}}
+        @panelStyle={{@panelStyle}}
+        @panelRef={{@panelRef}}
+        @popoverRef={{@popoverRef}}
+        ...attributes
+      >
+        <:button>
+          <div {{this.setAnchorRef}} class="euiWrappingPopover__anchor" />
+        </:button>
+
+        <:content>
+          {{yield}}
+        </:content>
+      </EuiPopover>
+    </EuiPortal>
+  </template>
+}
diff --git a/packages/flatpickr/CHANGELOG.md b/packages/flatpickr/CHANGELOG.md
@@ -203,6 +203,13 @@
 
 - Updated dependencies [157b860]
   - @ember-eui/core@8.1.0
+## 8.0.48
+
+### Patch Changes
+
+- Adds eui-wrapping-popover component
+- Updated dependencies
+  - @ember-eui/core@8.0.48
 
 ## 8.0.47
 
diff --git a/packages/pikaday/CHANGELOG.md b/packages/pikaday/CHANGELOG.md
@@ -203,6 +203,13 @@
 
 - Updated dependencies [157b860]
   - @ember-eui/core@8.1.0
+## 8.0.48
+
+### Patch Changes
+
+- Adds eui-wrapping-popover component
+- Updated dependencies
+  - @ember-eui/core@8.0.48
 
 ## 8.0.47
 
diff --git a/packages/validated-form/CHANGELOG.md b/packages/validated-form/CHANGELOG.md
@@ -203,6 +203,13 @@
 
 - Updated dependencies [157b860]
   - @ember-eui/core@8.1.0
+## 8.0.48
+
+### Patch Changes
+
+- Adds eui-wrapping-popover component
+- Updated dependencies
+  - @ember-eui/core@8.0.48
 
 ## 8.0.47
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/site/CHANGELOG.md b/site/CHANGELOG.md

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ type EuiPortalInsertPosition = keyof typeof insertPositions;`
`22`	`22`
`23`	`23`	`export interface EuiPortalArgs {`
`24`	`24`	`insert?: { sibling: HTMLElement; position: EuiPortalInsertPosition };`
`25`		`- portalRef?: (ref: HTMLDivElement \| null) => void;`
	`25`	`+ portalRef?: (ref: HTMLElement) => void;`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`export interface EuiPortalSignature {`
`@@ -53,6 +53,10 @@ export default class EuiPortal extends Component<EuiPortalSignature> {`
`53`	`53`	`this.portalNode`
`54`	`54`	`);`
`55`	`55`	`}`
	`56`	`+`
	`57`	`+ if (this.args.portalRef) {`
	`58`	`+ this.args.portalRef(this.portalNode);`
	`59`	`+ }`
`56`	`60`	`}`
`57`	`61`
`58`	`62`	`willDestroy(): void {`