Merge pull request #561 from umbraco/feature/popover-v2

Feature/popover-container

Author: JesmoDev

README.md

@@ -67,6 +67,7 @@ If you want to develop a component or contribute to the repository go to ["Get s
 | [`<uui-modal>`](packages/uui-modal)                                               | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-modal?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-modal)                                               |
 | [`<uui-pagination>`](packages/uui-pagination)                                     | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-pagination?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-pagination)                                     |
 | [`<uui-popover>`](packages/uui-popover)                                           | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-popover?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-popover)                                           |
+| [`<uui-popover-container>`](packages/uui-popover-container)                       | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-popover-container?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-popover-container)                       |
 | [`<uui-progress-bar>`](packages/uui-progress-bar)                                 | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-progress-bar?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-progress-bar)                                 |
 | [`<uui-range-slider>`](packages/uui-range-slider)                                 | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-range-slider?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-range-slider)                                 |
 | [`<uui-radio>`](packages/uui-radio)                                               | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-radio?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-radio)                                               |

package-lock.json

@@ -84,6 +84,7 @@
     "babel-loader": "9.1.3",
     "chromatic": "6.20.0",
     "element-internals-polyfill": "1.3.5",
+    "esbuild": "0.17.18",
     "eslint": "8.45.0",
     "eslint-config-prettier": "8.9.0",
     "eslint-import-resolver-typescript": "3.5.5",
@@ -125,8 +126,8 @@
     "storybook": "7.2.2",
     "tsc-files": "1.1.4",
     "turbo": "^1.10.12",
-    "typescript": "5.0.4",
-    "vite": "4.4.4",
+    "typescript": "5.2.2",
+    "vite": "4.4.9",
     "vite-tsconfig-paths": "4.2.0",
     "web-component-analyzer": "1.1.7"
   },

package.json

@@ -10,7 +10,7 @@ import importCss from 'rollup-plugin-import-css';
 
 // @ts-ignore-start
 // eslint-disable-next-line -- // @typescript-eslint/ban-ts-comment // @ts-ignore
-import properties from '../packages/uui-css/custom-properties.module.js'; // eslint-disable-line
+import properties from './uui-css/custom-properties.module.js'; // eslint-disable-line
 // @ts-ignore-end
 
 const esbuidOptions = { minify: true };

packages/rollup-package.config.mjs

@@ -0,0 +1,77 @@
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { findAncestorByAttributeValue } from '../utils';
+
+type Constructor<T = {}> = new (...args: any[]) => T;
+
+export declare class PopoverTargetMixinInterface {
+  /**
+   * Set a popovertarget.
+   * @type {string}
+   * @attr
+   * @default undefined
+   */
+  public popoverContainerElement?: string;
+
+  /**
+   * Toggle the popover.
+   */
+  protected _togglePopover(): void;
+}
+
+/**
+ * This mixin provides popover target functionality to other components.
+ *
+ * @param {Object} superClass - superclass to be extended.
+ * @mixin
+ */
+export const PopoverTargetMixin = <T extends Constructor<LitElement>>(
+  superClass: T
+) => {
+  /**
+   * Popover target mixin class containing the popover target functionality.
+   */
+  class PopoverTargetMixinClass extends superClass {
+    /**
+     * Set a popovertarget.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    @property({ type: String, attribute: 'popovertarget' })
+    public popoverContainerElement?: string;
+
+    #popoverIsOpen = false;
+
+    constructor(...args: any[]) {
+      super(...args);
+      this.addEventListener('uui-popover-before-toggle', this.#popoverListener);
+    }
+
+    protected _togglePopover = () => {
+      if (!this.popoverContainerElement) return;
+
+      const popoverContainerElement = findAncestorByAttributeValue(
+        this,
+        'id',
+        this.popoverContainerElement
+      );
+      if (!popoverContainerElement) return;
+
+      this.#popoverIsOpen
+        ? // @ts-ignore - This is part of the new popover API, but typescript doesn't recognize it yet.
+          popoverContainerElement.hidePopover()
+        : // @ts-ignore - This is part of the new popover API, but typescript doesn't recognize it yet.
+          popoverContainerElement.showPopover();
+    };
+
+    #popoverListener = (event: any) => {
+      // Wait for the click event to finish before updating the popover state
+      requestAnimationFrame(() => {
+        this.#popoverIsOpen = event.detail.newState === 'open';
+      });
+    };
+  }
+  return PopoverTargetMixinClass as unknown as Constructor<PopoverTargetMixinInterface> &
+    T;
+};

packages/uui-base/lib/mixins/PopoverTargetMixin.ts

@@ -3,3 +3,4 @@ export * from './LabelMixin';
 export * from './SelectableMixin';
 export * from './SelectOnlyMixin';
 export * from './FormControlMixin';
+export * from './PopoverTargetMixin';

packages/uui-base/lib/mixins/index.ts

@@ -0,0 +1,40 @@
+/**
+ * Recursively find an ancestor element by attribute name and value. This also checks children of the ancestor.
+ * @func findAncestorByAttributeValue
+ * @param {HTMLElement} startNode - Origin node of the search.
+ * @param {string} attributeName - Name of the attribute to search for.
+ * @param {string} attributeValue - Value of the attribute to search for.
+ */
+export const findAncestorByAttributeValue = (
+  startNode: HTMLElement | ParentNode,
+  attributeName: string,
+  attributeValue: string
+): HTMLElement | null => {
+  let currentNode: typeof startNode | null = startNode;
+
+  while (currentNode !== null) {
+    // Check if the current element has the specified attribute
+    const elementHasAttribute =
+      currentNode instanceof HTMLElement &&
+      currentNode.hasAttribute(attributeName) &&
+      currentNode.getAttribute(attributeName) === attributeValue;
+
+    // Check if the current element contains an element with the specified attribute
+    const elementContainsAttribute =
+      currentNode.querySelector(`[${attributeName}="${attributeValue}"]`) !==
+      null;
+
+    if (elementHasAttribute) {
+      return currentNode as HTMLElement; // Found a matching ancestor
+    } else if (elementContainsAttribute) {
+      return currentNode.querySelector(
+        `[${attributeName}="${attributeValue}"]`
+      ) as HTMLElement; // Found a matching ancestor
+    }
+
+    // Move up the DOM tree to the parent or parentNode, whichever is available
+    currentNode = currentNode.parentElement || currentNode.parentNode || null;
+  }
+
+  return null; // No matching ancestor found
+};

packages/uui-base/lib/utils/findAncestorByAttributeValue.ts

@@ -2,3 +2,4 @@ export * from './Timer';
 export * from './demandCustomElement';
 export * from './drag';
 export * from './math';
+export * from './findAncestorByAttributeValue';

packages/uui-base/lib/utils/index.ts

@@ -3,7 +3,11 @@ import {
   UUIHorizontalShakeKeyframes,
 } from '@umbraco-ui/uui-base/lib/animations';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
-import { FormControlMixin, LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import {
+  FormControlMixin,
+  LabelMixin,
+  PopoverTargetMixin,
+} from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import {
   iconCheck,
@@ -43,7 +47,7 @@ export type UUIButtonType = 'submit' | 'button' | 'reset';
  */
 @defineElement('uui-button')
 export class UUIButtonElement extends FormControlMixin(
-  LabelMixin('', LitElement)
+  LabelMixin('', PopoverTargetMixin(LitElement))
 ) {
   static styles = [
     UUIHorizontalShakeKeyframes,
@@ -459,6 +463,8 @@ export class UUIButtonElement extends FormControlMixin(
           break;
       }
     }
+
+    this._togglePopover();
   }
 
   private _resetStateTimeout?: number;

packages/uui-button/lib/uui-button.element.ts

@@ -0,0 +1,31 @@
+# uui-popover-container
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-popover-container?logoColor=%231B264F)
+
+Umbraco style popover-container component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-popover-container
+```
+
+Import the registration of `<uui-popover-container>` via:
+
+```javascript
+import '@umbraco-ui/uui-popover-container';
+```
+
+When looking to leverage the `UUIPopoverContainerElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIPopoverContainerElement } from '@umbraco-ui/uui-popover-container';
+```
+
+## Usage
+
+```html
+<uui-popover-container></uui-popover-container>
+```