mtrl 0.8.0-next.39 → 0.8.0-next.40

package/dist/components/drawer/config.d.ts

@@ -72,6 +72,7 @@ export declare const getApiConfig: (comp: {
         setItems: (items: DrawerConfig["items"]) => void;
         getItems: () => DrawerConfig["items"];
         setBadge: (id: string, badge: string) => void;
+        destroy: () => void;
     };
     drawerHeadline: {
         setHeadline: (text: string) => void;

package/dist/components/drawer/config.js

@@ -6,6 +6,7 @@ export const defaultConfig = {
     open: DRAWER_DEFAULTS.OPEN,
     dismissible: DRAWER_DEFAULTS.DISMISSIBLE,
     width: DRAWER_DEFAULTS.WIDTH,
+    ripple: DRAWER_DEFAULTS.RIPPLE,
     items: [],
 };
 export const createBaseConfig = (config = {}) => createComponentConfig(defaultConfig, config, "drawer");
@@ -57,6 +58,7 @@ export const getApiConfig = (comp) => ({
             if (comp._stateCleanup) {
                 comp._stateCleanup();
             }
+            comp.drawerItems.destroy();
             comp.lifecycle.destroy();
         },
     },

package/dist/components/drawer/constants.d.ts

@@ -94,4 +94,6 @@ export declare const DRAWER_DEFAULTS: {
     readonly DISMISSIBLE: true;
     /** Default drawer width in pixels */
     readonly WIDTH: 360;
+    /** Whether items ripple on press */
+    readonly RIPPLE: true;
 };

package/dist/components/drawer/constants.js

@@ -42,4 +42,5 @@ export const DRAWER_DEFAULTS = {
     OPEN: false,
     DISMISSIBLE: true,
     WIDTH: 360,
+    RIPPLE: true,
 };

package/dist/components/drawer/features/items.js

@@ -1,4 +1,5 @@
 import { DRAWER_EVENTS } from "../constants.js";
+import { createRipple, } from "../../../core/compose/features/ripple.js";
 const createItemElement = (item, getClass) => {
     const el = document.createElement("button");
     el.className = getClass("drawer__item");
@@ -55,6 +56,12 @@ export const withItems = (config) => (component) => {
     let currentItems = config.items || [];
     let activeId = null;
     let itemsContainer = null;
+    const ripple = config.ripple !== false ? createRipple() : null;
+    let rippled = [];
+    const unmountRipples = () => {
+        rippled.forEach((element) => ripple?.unmount(element));
+        rippled = [];
+    };
     const initialActive = currentItems.find((item) => item.type !== "divider" && item.type !== "section" && item.active && !item.disabled);
     if (initialActive?.id) {
         activeId = initialActive.id;
@@ -62,6 +69,7 @@ export const withItems = (config) => (component) => {
     const renderItems = () => {
         if (!itemsContainer)
             return;
+        unmountRipples();
         itemsContainer.innerHTML = "";
         let navIndex = 0;
         currentItems.forEach((item) => {
@@ -92,6 +100,10 @@ export const withItems = (config) => (component) => {
                     }
                 }
             });
+            if (ripple && !item.disabled) {
+                ripple.mount(itemEl);
+                rippled.push(itemEl);
+            }
             itemsContainer.appendChild(itemEl);
         });
     };
@@ -197,6 +209,7 @@ export const withItems = (config) => (component) => {
             getItems,
             setBadge,
             renderItems,
+            destroy: unmountRipples,
         },
     };
 };

package/dist/components/drawer/types.d.ts

@@ -102,6 +102,12 @@ export interface DrawerConfig extends BaseComponentConfig {
      * @default false
      */
     dense?: boolean;
+    /**
+     * Whether items show a ripple on press. The ripple is clipped to the
+     * item shape, so it reads as part of the active indicator.
+     * @default true
+     */
+    ripple?: boolean;
     /**
      * Additional CSS classes to add to the drawer
      */

package/dist/core/compose/features/ripple.d.ts

@@ -46,6 +46,12 @@ export interface RippleFeatureConfig {
 export interface RippleComponent extends BaseComponent {
     ripple: RippleController;
 }
+/**
+ * Creates a ripple controller for managing ripple effects
+ * @param config - Ripple configuration
+ * @returns Ripple controller
+ */
+export declare const createRipple: (config?: RippleConfig) => RippleController;
 declare global {
     interface HTMLElement {
         __rippleHandlers?: Array<(e: MouseEvent) => void>;

package/dist/core/compose/features/ripple.js

@@ -1,6 +1,6 @@
 import { RIPPLE_CONFIG } from "./constants.js";
 import { PREFIX } from "../../config.js";
-const createRipple = (config = {}) => {
+export const createRipple = (config = {}) => {
     const options = {
         ...RIPPLE_CONFIG,
         ...config,