@momentum-design/components 0.27.6 → 0.28.1

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import Badge from './components/badge';
 import Presence from './components/presence';
 import Text from './components/text';
 import Button from './components/button';
+import Popover from './components/popover';
 import Bullet from './components/bullet';
 import Marker from './components/marker';
 import Divider from './components/divider';
@@ -23,6 +24,6 @@ import Spinner from './components/spinner';
 import RadioGroup from './components/radiogroup';
 import type { TextType } from './components/text/text.types';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, Spinner, RadioGroup, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Popover, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, Spinner, RadioGroup, };
 export type { TextType, SpinnerSize, SpinnerVariant, };
 export { inMemoryCache, webAPIIconsCache };

package/dist/index.js

@@ -6,6 +6,7 @@ import Badge from './components/badge';
 import Presence from './components/presence';
 import Text from './components/text';
 import Button from './components/button';
+import Popover from './components/popover';
 import Bullet from './components/bullet';
 import Marker from './components/marker';
 import Divider from './components/divider';
@@ -21,5 +22,5 @@ import FormfieldGroup from './components/formfieldgroup';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import Spinner from './components/spinner';
 import RadioGroup from './components/radiogroup';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, Spinner, RadioGroup, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Popover, Bullet, Marker, Divider, AvatarButton, Input, Link, Toggle, Checkbox, Radio, VirtualizedList, Tab, FormfieldGroup, Spinner, RadioGroup, };
 export { inMemoryCache, webAPIIconsCache };

package/dist/react/index.d.ts

@@ -5,15 +5,16 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
+export { default as Divider } from './divider';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
-export { default as Divider } from './divider';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as Link } from './link';
 export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
+export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';

package/dist/react/index.js

@@ -5,15 +5,16 @@ export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
+export { default as Divider } from './divider';
 export { default as FormfieldGroup } from './formfieldgroup';
 export { default as FormfieldWrapper } from './formfieldwrapper';
-export { default as Divider } from './divider';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Input } from './input';
 export { default as Link } from './link';
 export { default as Marker } from './marker';
 export { default as Modalcontainer } from './modalcontainer';
+export { default as Popover } from './popover';
 export { default as Presence } from './presence';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';

package/dist/react/popover/index.d.ts

@@ -0,0 +1,24 @@
+import Component from '../../components/popover';
+/**
+ * Popover component is a lightweight floating UI element that displays additional content when triggered.
+ * It can be used for tooltips, dropdowns, or contextual menus.
+ * The popover automatically positions itself based on available space and
+ * supports dynamic height adjustments with scrollable content when needed。
+ *
+ * @dependency mdc-button
+ * @dependency mdc-modalcontainer
+ *
+ * @tagname mdc-popover
+ *
+ * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
+ * @cssproperty --mdc-popover-arrow-border - border of the arrow
+ * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
+ * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
+ * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
+ * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
+ *
+ * @slot - Default slot for modal container
+ *
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/popover/index.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/popover';
+import { TAG_NAME } from '../../components/popover/popover.constants';
+/**
+ * Popover component is a lightweight floating UI element that displays additional content when triggered.
+ * It can be used for tooltips, dropdowns, or contextual menus.
+ * The popover automatically positions itself based on available space and
+ * supports dynamic height adjustments with scrollable content when needed。
+ *
+ * @dependency mdc-button
+ * @dependency mdc-modalcontainer
+ *
+ * @tagname mdc-popover
+ *
+ * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border
+ * @cssproperty --mdc-popover-arrow-border - border of the arrow
+ * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover
+ * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover
+ * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover
+ * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover
+ *
+ * @slot - Default slot for modal container
+ *
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Popover',
+});
+export default reactWrapper;

package/dist/utils/mixins/DataAriaDescribedbyMixin.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './index.types';
+export interface DataAriaDescribedbyMixinInterface {
+    dataAriaDescribedby: string | null;
+}
+export declare const DataAriaDescribedbyMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<DataAriaDescribedbyMixinInterface> & T;

package/dist/utils/mixins/DataAriaDescribedbyMixin.js

@@ -0,0 +1,30 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property } from 'lit/decorators.js';
+export const DataAriaDescribedbyMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * Defines an ID reference to one or more elements that provide additional
+             * descriptive information for the current element.
+             * The `aria-describedby` attribute to be set for accessibility.
+             * @default null
+             */
+            this.dataAriaDescribedby = null;
+        }
+    }
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'data-aria-describedby' }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "dataAriaDescribedby", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

package/dist/utils/mixins/DataAriaLabelledbyMixin.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+import type { Constructor } from './index.types';
+export interface DataAriaLabelledbyMixinInterface {
+    dataAriaLabelledby: string | null;
+}
+export declare const DataAriaLabelledbyMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<DataAriaLabelledbyMixinInterface> & T;

package/dist/utils/mixins/DataAriaLabelledbyMixin.js

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property } from 'lit/decorators.js';
+export const DataAriaLabelledbyMixin = (superClass) => {
+    class InnerMixinClass extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * Defines an ID reference to one or more elements that label the current element.
+             * The `aria-labelledby` attribute to be set for accessibility.
+             * @default null
+             */
+            this.dataAriaLabelledby = null;
+        }
+    }
+    __decorate([
+        property({ type: String, reflect: true, attribute: 'data-aria-labelledby' }),
+        __metadata("design:type", Object)
+    ], InnerMixinClass.prototype, "dataAriaLabelledby", void 0);
+    // Cast return type to your mixin's interface intersected with the superClass type
+    return InnerMixinClass;
+};

package/dist/utils/mixins/FocusTrapMixin.d.ts

@@ -0,0 +1,9 @@
+import type { Constructor } from './index.types';
+export interface FocusTrapClassInterface {
+    enabledFocusTrap: boolean;
+    enabledPreventScroll: boolean;
+    setFocusableElements(): void;
+    setInitialFocus(prefferableElement?: number): void;
+    deactivateFocusTrap(): void;
+}
+export declare const FocusTrapMixin: <T extends Constructor<HTMLElement>>(superClass: T) => Constructor<HTMLElement & FocusTrapClassInterface> & T;

package/dist/utils/mixins/FocusTrapMixin.js

@@ -0,0 +1,323 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property } from 'lit/decorators.js';
+import { DEFAULTS as POPOVER_DEFAULTS } from '../../components/popover/popover.constants';
+export const FocusTrapMixin = (superClass) => {
+    class FocusTrap extends superClass {
+        constructor(...args) {
+            super(...args);
+            /**
+             * Determines whether the focus trap is enabled.
+             * If true, focus will be restricted to the content within this component.
+             * @default false
+             */
+            this.enabledFocusTrap = POPOVER_DEFAULTS.FOCUS_TRAP;
+            /**
+             * Prevent outside scrolling when popover show.
+             * @default false
+             */
+            this.enabledPreventScroll = POPOVER_DEFAULTS.PREVENT_SCROLL;
+            /** @internal */
+            this.focusTrapIndex = -1;
+            /** @internal */
+            this.focusableElements = [];
+            this.shouldWrapFocus = () => true;
+            this.addEventListener('keydown', this.handleKeydown);
+        }
+        /**
+         * Deactivate the focus trap.
+         */
+        deactivateFocusTrap() {
+            this.enabledFocusTrap = false;
+            this.enabledPreventScroll = false;
+            this.focusTrapIndex = -1;
+            document.body.style.overflow = '';
+        }
+        /**
+         * Checks if the element has no client rectangles (not visible in the viewport).
+         *
+         * @param element - The element to check.
+         * @returns True if the element has no client rectangles.
+         */
+        hasNoClientRects(element) {
+            return element.getClientRects().length === 0;
+        }
+        /**
+         * Checks if the element has zero dimensions (width and height are both 0).
+         *
+         * @param element - The element to check.
+         * @returns True if the element has zero dimensions.
+         */
+        hasZeroDimensions(element) {
+            const { width, height } = element.getBoundingClientRect();
+            const { offsetWidth, offsetHeight } = element;
+            return offsetWidth + offsetHeight + height + width === 0;
+        }
+        /**
+         * Determines if the element is not visible in the DOM.
+         *
+         * @param element - The element to check.
+         * @returns True if the element is not visible.
+         */
+        isNotVisible(element) {
+            return this.hasZeroDimensions(element) || this.hasNoClientRects(element);
+        }
+        /**
+         * Checks if the element has inline styles that make it hidden.
+         *
+         * @param element - The element to check.
+         * @returns True if the element has inline styles that make it hidden.
+         */
+        hasHiddenStyle(element) {
+            const { display, opacity, visibility } = element.style;
+            return display === 'none' || opacity === '0' || visibility === 'hidden' || visibility === 'collapse';
+        }
+        /**
+         * Checks if the element is hidden by a computed style.
+         *
+         * @param element - The element to check.
+         * @returns True if the element is hidden by a computed style.
+         */
+        hasComputedHidden(element) {
+            const computedStyle = getComputedStyle(element);
+            return computedStyle.visibility === 'hidden' || computedStyle.height === '0' || computedStyle.display === 'none';
+        }
+        /**
+         * Checks if the element is hidden from the user.
+         *
+         * @param element - The element to check.
+         * @returns True if the element is hidden.
+         */
+        isHidden(element) {
+            return (element.hasAttribute('hidden')
+                || element.getAttribute('aria-hidden') === 'true'
+                || this.hasHiddenStyle(element)
+                || this.isNotVisible(element)
+                || this.hasComputedHidden(element));
+        }
+        /**
+         * Checks if the element is not tabbable.
+         *
+         * @param element - The element to check.
+         * @returns True if the element is not tabbable.
+         */
+        isNotTabbable(element) {
+            return element.getAttribute('tabindex') === '-1';
+        }
+        /**
+         * Checks if the element is interactive.
+         *
+         * @param element - The element to check.
+         * @returns True if the element is interactive.
+         */
+        isInteractiveElement(element) {
+            const interactiveTags = new Set(['BUTTON', 'DETAILS', 'EMBED', 'IFRAME', 'SELECT', 'TEXTAREA']);
+            if (interactiveTags.has(element.tagName)) {
+                return true;
+            }
+            if (element instanceof HTMLAnchorElement && element.hasAttribute('href')) {
+                return true;
+            }
+            if (element instanceof HTMLInputElement && element.type !== 'hidden') {
+                return true;
+            }
+            if ((element instanceof HTMLAudioElement || element instanceof HTMLVideoElement)
+                && element.hasAttribute('controls')) {
+                return true;
+            }
+            if ((element instanceof HTMLImageElement || element instanceof HTMLObjectElement)
+                && element.hasAttribute('usemap')) {
+                return true;
+            }
+            if (element.hasAttribute('tabindex') && element.tabIndex > -1) {
+                return true;
+            }
+            return false;
+        }
+        /**
+         * Checks if the element is focusable.
+         *
+         * @param element - The element to check.
+         * @returns True if the element is focusable.
+         */
+        isFocusable(element) {
+            if (this.isHidden(element) || this.isNotTabbable(element)) {
+                return false;
+            }
+            return this.isInteractiveElement(element);
+        }
+        /**
+         * Recursively finds all focusable elements within the given root and its descendants.
+         *
+         * @param root - The root element to search for focusable elements.
+         * @param matches - The set of focusable elements.
+         * @returns The list of focusable elements.
+         */
+        findFocusable(root, matches = new Set()) {
+            if (root instanceof HTMLElement && this.isFocusable(root)) {
+                matches.add(root);
+            }
+            const children = Array.from(root.children);
+            children.forEach((child) => {
+                const element = child;
+                if (this.isFocusable(element)) {
+                    matches.add(element);
+                }
+                if (element.shadowRoot) {
+                    this.findFocusable(element.shadowRoot, matches);
+                }
+                else if (element.tagName === 'SLOT') {
+                    const assignedNodes = element.assignedElements({ flatten: true });
+                    assignedNodes.forEach((node) => {
+                        if (node instanceof HTMLElement) {
+                            this.findFocusable(node, matches);
+                        }
+                    });
+                }
+                else {
+                    this.findFocusable(element, matches);
+                }
+            });
+            return [...matches];
+        }
+        /**
+         * Updates the list of focusable elements within the component's shadow root.
+         */
+        setFocusableElements() {
+            if (!this.shadowRoot)
+                return;
+            this.focusableElements = this.findFocusable(this.shadowRoot, new Set());
+        }
+        /**
+         * Sets the initial focus within the container.
+         *
+         * @param prefferableElement - The index of the prefferable element to focus.
+         */
+        setInitialFocus(prefferableElement = 0) {
+            if (this.focusableElements.length === 0)
+                return;
+            if (this.enabledPreventScroll) {
+                document.body.style.overflow = 'hidden';
+            }
+            if (this.focusableElements[prefferableElement]) {
+                this.focusTrapIndex = prefferableElement;
+                this.focusableElements[prefferableElement].focus();
+            }
+        }
+        /**
+         * Calculates the next index for the focus trap.
+         *
+         * @param currentIndex - The current index.
+         * @param step - The step to calculate the next index.
+         * @returns The next index.
+         */
+        calculateNextIndex(currentIndex, step) {
+            const { length } = this.focusableElements;
+            const wrapFocus = this.shouldWrapFocus();
+            if (currentIndex === -1) {
+                return step > 0 ? 0 : length - 1;
+            }
+            let nextIndex = currentIndex + step;
+            if (wrapFocus) {
+                if (nextIndex < 0)
+                    nextIndex = length - 1;
+                if (nextIndex >= length)
+                    nextIndex = 0;
+            }
+            else {
+                if (nextIndex < 0)
+                    nextIndex = 0;
+                if (nextIndex >= length)
+                    nextIndex = length - 1;
+            }
+            return nextIndex;
+        }
+        /**
+         * Returns the deepest active element in the shadow DOM.
+         *
+         * @returns The deepest active element.
+         */
+        getDeepActiveElement() {
+            var _a;
+            let host = document.activeElement || document.body;
+            while (host instanceof HTMLElement && ((_a = host.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)) {
+                host = host.shadowRoot.activeElement;
+            }
+            return host || document.body;
+        }
+        /**
+         * Finds the index of the active element within the focusable elements.
+         *
+         * @param activeElement - The active element.
+         * @returns The index of the active element.
+         */
+        findElement(activeElement) {
+            return this.focusableElements.findIndex((element) => this.isEqualFocusNode(activeElement, element));
+        }
+        /**
+         * Checks if the active element is equal to the given element.
+         *
+         * @param activeElement - The active element.
+         * @param element - The element to compare.
+         * @returns True if the active element is equal to the given element.
+         */
+        isEqualFocusNode(activeElement, element) {
+            if (activeElement.nodeType >= 0) {
+                return element.isEqualNode(activeElement) && element === activeElement;
+            }
+            return false;
+        }
+        /**
+         * Traps focus within the container.
+         *
+         * @param direction - The direction of the focus trap.
+         * If true, the focus will be trapped in the previous element.
+         */
+        trapFocus(direction) {
+            if (this.focusableElements.length === 0)
+                return;
+            const activeElement = this.getDeepActiveElement();
+            const activeIndex = this.findElement(activeElement);
+            if (direction) {
+                this.focusTrapIndex = this.calculateNextIndex(activeIndex, -1);
+            }
+            else {
+                this.focusTrapIndex = this.calculateNextIndex(activeIndex, 1);
+            }
+            const nextElement = this.focusableElements[this.focusTrapIndex];
+            if (nextElement) {
+                nextElement.focus();
+            }
+        }
+        /**
+         * Traps focus within the container.
+         *
+         * @param event - The keyboard event.
+         */
+        handleKeydown(event) {
+            if (!this.enabledFocusTrap || !this.focusableElements.length) {
+                return;
+            }
+            if (event.key === 'Tab') {
+                event.preventDefault();
+                this.trapFocus(event.shiftKey);
+            }
+        }
+    }
+    __decorate([
+        property({ type: Boolean }),
+        __metadata("design:type", Boolean)
+    ], FocusTrap.prototype, "enabledFocusTrap", void 0);
+    __decorate([
+        property({ type: Boolean }),
+        __metadata("design:type", Boolean)
+    ], FocusTrap.prototype, "enabledPreventScroll", void 0);
+    return FocusTrap;
+};

package/package.json

@@ -28,6 +28,7 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
+    "@floating-ui/dom": "^1.6.12",
     "@lit/context": "^1.1.2",
     "@lit/react": "^1.0.5",
     "@momentum-design/fonts": "*",
@@ -37,5 +38,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.27.6"
+  "version": "0.28.1"
 }