@momentum-design/components 0.104.4 → 0.104.5

package/dist/react/index.d.ts

@@ -54,10 +54,10 @@ export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
-export { default as Select } from './select';
 export { default as Selectlistbox } from './selectlistbox';
-export { default as SideNavigation } from './sidenavigation';
+export { default as Select } from './select';
 export { default as Skeleton } from './skeleton';
+export { default as SideNavigation } from './sidenavigation';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';

package/dist/react/index.js

@@ -54,10 +54,10 @@ export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
-export { default as Select } from './select';
 export { default as Selectlistbox } from './selectlistbox';
-export { default as SideNavigation } from './sidenavigation';
+export { default as Select } from './select';
 export { default as Skeleton } from './skeleton';
+export { default as SideNavigation } from './sidenavigation';
 export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticRadio } from './staticradio';

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

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import type { Component } from '../../models';
+import type { Constructor } from './index.types';
+export declare abstract class BackdropMixinInterface {
+    abstract zIndex: number;
+    protected backdropElement: HTMLElement | null;
+    protected isBackdropInvisible?: boolean;
+    protected backdropAppendTo?: string;
+    protected createBackdrop(classNamePrefix: string): void;
+    protected removeBackdrop(): void;
+    protected keepElementAboveBackdrop(element?: HTMLElement | null): void;
+    protected moveElementBackAfterBackdropRemoval(element?: HTMLElement | null): void;
+}
+export declare const BackdropMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<Component & BackdropMixinInterface> & T;

package/dist/utils/mixins/BackdropMixin.js

@@ -0,0 +1,99 @@
+export const BackdropMixin = (superClass) => {
+    class Backdrop extends superClass {
+        constructor() {
+            super(...arguments);
+            /**
+             * Set this property to true to make the backdrop invisible.
+             * This is useful for components that do want a backdrop which stops interaction,
+             * but do not want the backdrop to be visible.
+             * @internal
+             */
+            this.isBackdropInvisible = false;
+            /** @internal */
+            this.backdropElement = null;
+        }
+        /**
+         * Creates a backdrop element with the specified class name prefix.
+         *
+         * @param classNamePrefix - The prefix for the backdrop class name.
+         * @internal
+         */
+        createBackdrop(classNamePrefix) {
+            const backdrop = document.createElement('div');
+            backdrop.classList.add(`${classNamePrefix}-backdrop`);
+            const styleElement = document.createElement('style');
+            styleElement.textContent = `
+        .${classNamePrefix}-backdrop {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: ${this.isBackdropInvisible ? `transparent` : `var(--mds-color-theme-common-overlays-secondary-normal)`};
+          z-index: ${this.zIndex - 1};
+        }
+      `;
+            backdrop.appendChild(styleElement);
+            const backdropAppendToElement = document.getElementById(this.backdropAppendTo);
+            const elementToAppendTo = backdropAppendToElement || this.parentElement;
+            elementToAppendTo === null || elementToAppendTo === void 0 ? void 0 : elementToAppendTo.appendChild(backdrop);
+            this.backdropElement = backdrop;
+        }
+        /**
+         * Removes the backdrop element if it exists.
+         * @internal
+         */
+        removeBackdrop() {
+            if (this.backdropElement) {
+                this.backdropElement.remove();
+                this.backdropElement = null;
+            }
+        }
+        /**
+         * Keeps the specified element above the backdrop by adjusting its z-index and position.
+         *
+         * This method stores the original z-index and position of the element,
+         * and sets the z-index to the component's zIndex value.
+         * If the element's position is not already set to 'fixed' or 'absolute',
+         * it will be set to 'relative'.
+         * @param element - The element to keep above the backdrop.
+         * @internal
+         */
+        keepElementAboveBackdrop(element) {
+            if (!element) {
+                return;
+            }
+            // Store the original z-index and position of the element
+            this.elementOriginalStyle = {
+                zIndex: element.style.zIndex,
+                position: element.style.position,
+            };
+            // Set the z-index and position to ensure the element is above the backdrop
+            element.style.zIndex = `${this.zIndex}`;
+            // Only set the position to relative if it is not already set to fixed or absolute
+            if (!['fixed', 'absolute'].includes(window.getComputedStyle(element).position)) {
+                element.style.position = 'relative';
+            }
+        }
+        /**
+         * Moves the element back to its original z-index and position after the backdrop is removed.
+         *
+         * This method restores the original z-index and position of the element
+         * that was kept above the backdrop (by using `keepElementAboveBackdrop`).
+         *
+         * @param element - The element which styling should be restored.
+         * @internal
+         */
+        moveElementBackAfterBackdropRemoval(element) {
+            if (!element || !this.elementOriginalStyle) {
+                return;
+            }
+            // Restore the original z-index and position of the element
+            element.style.zIndex = this.elementOriginalStyle.zIndex;
+            element.style.position = this.elementOriginalStyle.position;
+            // Clear the stored original style
+            this.elementOriginalStyle = undefined;
+        }
+    }
+    return Backdrop;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.104.4",
+  "version": "0.104.5",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"