@mhmo91/schmancy 0.10.4 → 0.10.6

package/src/date-range/date-range.ts

@@ -1,11 +1,10 @@
 import { SchmancyElement } from '@mixins/index'
 import dayjs from 'dayjs'
 import quarterOfYear from 'dayjs/plugin/quarterOfYear'
-import { html, PropertyValues, render } from 'lit'
+import { html, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
-import { debounceTime, fromEvent, takeUntil, timer } from 'rxjs'
-import { $dialog } from '../dialog/dialog-service'
-import { sheet } from '../sheet/sheet.service'
+import { fromEvent, Subscription, takeUntil, timer } from 'rxjs'
+import { show } from '../overlay/overlay.service'
 import { detectDateRangeType, formatDateRange } from './date-range-helpers'
 import { DateRangePreset, generatePresetCategories, PresetCategory } from './date-range-presets'
 import { validateInitialDateRange } from './date-utils'
@@ -14,6 +13,13 @@ import './date-range-dialog'
 // Add quarter plugin to dayjs
 dayjs.extend(quarterOfYear)
 
+// Bridge the inner-content events used inside the overlay template down to a
+// `close` event on the same element. `show()` translates a bubbling 'close'
+// event into observable completion + an emission of `event.detail`.
+const dispatchClose = (target: EventTarget | null): void => {
+	target?.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+}
+
 export type SchmancyDateRangeChangeEvent = CustomEvent<{
 	dateFrom: string
 	dateTo: string
@@ -54,7 +60,6 @@ export class SchmancyDateRange extends SchmancyElement {
 	@state() private selectedDateRange: string = ''
 	@state() private activePreset: string | null = null
 	@state() private announceMessage: string = ''
-	@state() private isMobile = false
 
 	// Default presets
 	private presetRanges: DateRangePreset[] = []
@@ -74,7 +79,6 @@ export class SchmancyDateRange extends SchmancyElement {
 	connectedCallback(): void {
 		super.connectedCallback()
 		this.initPresetRanges()
-		this.checkMobileView()
 
 		// Validate initial date range
 		const dateFormat = this.getDateFormat() as 'YYYY-MM-DD' | 'YYYY-MM-DDTHH:mm'
@@ -102,16 +106,6 @@ export class SchmancyDateRange extends SchmancyElement {
 			.subscribe(event => {
 				this.handleKeyboardNavigation(event)
 			})
-
-		// Handle window resize with debouncing
-		fromEvent(window, 'resize')
-			.pipe(
-				debounceTime(150),
-				takeUntil(this.disconnecting)
-			)
-			.subscribe(() => {
-				this.checkMobileView()
-			})
 	}
 
 	updated(changedProps: PropertyValues) {
@@ -227,12 +221,19 @@ export class SchmancyDateRange extends SchmancyElement {
 		}
 	}
 
+	private _overlaySubscription: Subscription | null = null
+
 	private openDropdown(e?: MouseEvent) {
 		if (this.disabled || this.step !== undefined) return
 
 		this.dispatchEvent(new CustomEvent('beforeopen', { bubbles: true, composed: true }))
 		this.isOpen = true
 
+		// Inline-template overlay. Inner handlers dispatch a 'close' event
+		// from the dialog itself (via the module-scoped `dispatchClose`),
+		// which `show()` translates into observable completion + an emission.
+		// Layout (centered vs sheet) is chosen by the overlay system based on
+		// viewport / anchor presence.
 		const dialogContent = html`
 			<schmancy-date-range-dialog
 				.type="${this.type}"
@@ -242,51 +243,39 @@ export class SchmancyDateRange extends SchmancyElement {
 				.maxDate="${this.maxDate}"
 				.activePreset="${this.activePreset}"
 				.presetCategories="${this.presetCategories}"
-				@preset-select="${(e: CustomEvent) => {
-					this.activePreset = e.detail.preset.label
-					this.setDateRange(e.detail.preset.range.dateFrom, e.detail.preset.range.dateTo)
-					this.closeDropdown()
+				@preset-select="${(ev: CustomEvent) => {
+					this.activePreset = ev.detail.preset.label
+					this.setDateRange(ev.detail.preset.range.dateFrom, ev.detail.preset.range.dateTo)
+					dispatchClose(ev.currentTarget)
 				}}"
 				@date-change="${() => this.updateSelectedDateRange()}"
-				@apply-dates="${(e: CustomEvent) => {
-					const { dateFrom, dateTo, swapIfNeeded } = e.detail
+				@apply-dates="${(ev: CustomEvent) => {
+					const { dateFrom, dateTo, swapIfNeeded } = ev.detail
 					if (swapIfNeeded) {
 						this.setDateRange(dateTo, dateFrom)
 					} else {
 						this.setDateRange(dateFrom, dateTo)
 					}
-					this.closeDropdown()
+					dispatchClose(ev.currentTarget)
 				}}"
-				@announce="${(e: CustomEvent) => this.announceToScreenReader(e.detail.message)}"
+				@announce="${(ev: CustomEvent) => this.announceToScreenReader(ev.detail.message)}"
 			></schmancy-date-range-dialog>
 		`
 
-		if (this.isMobile) {
-			const container = document.createElement('div')
-			render(dialogContent, container)
-			sheet.push({
-				component: container,
-				uid: 'date-range-sheet',
-				close: () => { this.isOpen = false }
-			})
-		} else {
-			$dialog.component(dialogContent, {
-				title: 'Select Date Range',
-				hideActions: true,
-				position: e
-			}).then(() => {
-				this.isOpen = false
-				return
+		this._overlaySubscription?.unsubscribe()
+		this._overlaySubscription = show(dialogContent, { anchor: e })
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe({
+				complete: () => {
+					this.isOpen = false
+					this._overlaySubscription = null
+				},
 			})
-		}
 	}
 
 	private closeDropdown() {
-		if (this.isMobile) {
-			sheet.dismiss('date-range-sheet')
-		} else {
-			$dialog.dismiss()
-		}
+		this._overlaySubscription?.unsubscribe()
+		this._overlaySubscription = null
 		this.isOpen = false
 	}
 
@@ -424,13 +413,6 @@ export class SchmancyDateRange extends SchmancyElement {
 		}
 	}
 
-	/**
-	 * Check if view is mobile
-	 */
-	private checkMobileView() {
-		this.isMobile = window.innerWidth < 768
-	}
-
 	/**
 	 * Check if we can navigate backward
 	 */

package/src/index.ts

@@ -9,14 +9,12 @@ export * from './card';
 export * from './charts';
 export * from './checkbox';
 export * from './chips';
-export * from './code-highlight';
 export * from './connectivity';
 export * from './content-drawer';
 export * from './date-range';
 export * from './date-range-inline';
 export * from './delay';
 export * from './details';
-export * from './dialog';
 export * from './directives';
 export * from './discovery';
 export * from './divider';
@@ -33,7 +31,6 @@ export * from './json';
 export * from './layout';
 export * from './lightbox';
 export * from './list';
-export * from './mailbox';
 export * from './map';
 export * from './menu';
 export * from './nav-drawer';
@@ -49,7 +46,6 @@ export * from './radio-group';
 export * from './range';
 export * from './rxjs-utils';
 export * from './select';
-export * from './sheet';
 export * from './slider';
 export * from './state';
 export * from './steps';

package/src/menu/menu-item.ts

@@ -1,7 +1,6 @@
 import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement } from 'lit/decorators.js'
-import { $dialog } from '../dialog/dialog-service'
 
 @customElement('schmancy-menu-item')
 export default class SchmancyMenuItem extends SchmancyElement {
@@ -11,10 +10,16 @@ export default class SchmancyMenuItem extends SchmancyElement {
 	}
 `]
 
+	private dismissParentMenu = (): void => {
+		// Bubbling 'close' is the protocol the overlay `show()` watches; the
+		// enclosing `<schmancy-menu>` opens the menu via `show()` and this
+		// completes the subscription, so the overlay tears itself down.
+		this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))
+	}
 
 	protected render(): unknown {
 		return html`
-			<schmancy-list-item @click=${() => $dialog.dismiss()}>
+			<schmancy-list-item @click=${this.dismissParentMenu}>
 				<slot></slot>
 			</schmancy-list-item>
 		`

package/src/menu/menu.ts

@@ -1,14 +1,15 @@
 import { SchmancyElement } from '@mixins/index'
 import { css, html } from 'lit'
 import { customElement, query } from 'lit/decorators.js'
-import { $dialog } from '../dialog/dialog-service'
+import { takeUntil } from 'rxjs'
+import { show } from '../overlay/overlay.service'
 
 /**
  * Menu Component
  *
- * CRITICAL: The dialog ONLY renders the raw menu items passed via the default slot.
- * NO <ul> wrapper, NO classes, NO additional markup in the dialog call.
- * The dialog service handles positioning and display - we just pass the pure content.
+ * The overlay renders ONLY the raw menu items passed via the default slot.
+ * NO <ul> wrapper, NO classes, NO additional markup. The overlay system
+ * handles positioning (anchored at the trigger click) and dismissal.
  *
  * @example Basic menu with auto-dismiss
  * ```typescript
@@ -18,20 +19,22 @@ import { $dialog } from '../dialog/dialog-service'
  *   <schmancy-menu-item @click=${() => deleteItem()}>Delete</schmancy-menu-item>
  * </schmancy-menu>
  * ```
- * Note: Dialog auto-dismisses when schmancy-menu-item is clicked
+ * Note: `<schmancy-menu-item>` dispatches a bubbling 'close' event on click;
+ * the overlay `show()` observable completes and the menu tears down.
  *
  * @example Custom component (manual dismiss)
  * ```typescript
  * <schmancy-menu>
  *   <schmancy-icon-button slot="trigger">settings</schmancy-icon-button>
- *   <my-settings-form @submit=${() => $dialog.dismiss()}></my-settings-form>
+ *   <my-settings-form
+ *     @submit=${(e) => e.target.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))}
+ *   ></my-settings-form>
  * </schmancy-menu>
  * ```
- * Note: Custom components must call $dialog.dismiss() manually
  *
  * @slot trigger - Button to open menu (new naming)
  * @slot button - Button to open menu (backward compatible)
- * @slot default - Menu items or any custom component to display in dialog
+ * @slot default - Menu items or any custom component to display in the overlay
  */
 @customElement('schmancy-menu')
 export default class SchmancyMenu extends SchmancyElement {
@@ -45,22 +48,23 @@ export default class SchmancyMenu extends SchmancyElement {
 	@query('slot:not([name])')
 	private menuSlot!: HTMLSlotElement
 
-	private showMenu(event: MouseEvent) {
+	private showMenu = (event: MouseEvent): void => {
 		const menuItems = this.menuSlot?.assignedElements() || []
 		if (menuItems.length === 0) return
 
-		// Create container and move actual elements to preserve full functionality
-		const dialogContainer = document.createElement('div')
-		menuItems.forEach(item => dialogContainer.appendChild(item))
+		// Move slot items into a fresh container so the overlay can adopt them
+		// without leaving stale references in our shadow tree.
+		const overlayContainer = document.createElement('div')
+		menuItems.forEach(item => overlayContainer.appendChild(item))
 
-		$dialog
-			.component(dialogContainer, {
-				position: event,
-				hideActions: true,
-		})
-			.finally(() => {
-				// Restore elements as light DOM children (will be projected via slot)
-				menuItems.forEach(item => this.appendChild(item))
+		// Anchor at the click so the overlay system positions the menu
+		// adjacent to the trigger; subscription completion (any dismissal —
+		// item click → bubbling 'close', backdrop, Esc, disconnect) restores
+		// the items as light DOM so the next open re-projects them.
+		show(overlayContainer, { anchor: event })
+			.pipe(takeUntil(this.disconnecting))
+			.subscribe({
+				complete: () => menuItems.forEach(item => this.appendChild(item)),
 			})
 	}
 

package/types/src/content-drawer/drawer.d.ts

@@ -37,7 +37,9 @@ export declare class SchmancyContentDrawer extends SchmancyElement {
     private setupRenderListener;
     private updateMaxHeight;
     private updateMode;
+    private _overlaySubscription;
     private handleRender;
+    private dismissOverlay;
     getOffsetTop(element: HTMLElement | null): number;
     protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }

package/types/src/content-drawer/events.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Internal event protocol between `<schmancy-content-drawer>` and its child
+ * `<schmancy-content-drawer-sheet>`. Bubbling + composed so the parent can
+ * listen on itself even when the child is in a deeper shadow tree.
+ */
+export declare const OVERLAY_DISMISS_EVENT = "schmancy-content-drawer-overlay-dismiss";

package/types/src/content-drawer/sheet.d.ts

@@ -18,14 +18,15 @@ export declare class SchmancyContentDrawerSheet extends SchmancyElement {
      */
     open(): void;
     /**
-     * Close everything (modal sheet + the sheet itself).
+     * Ask the parent `<schmancy-content-drawer>` to dismiss any modal overlay
+     * it currently owns. Bubbling so the parent catches it on itself.
      */
-    closeAll(): void;
+    private requestOverlayDismiss;
     /**
-     * Dismiss the "modal sheet."
-     * This just returns an Observable that completes immediately.
+     * Close everything (parent's modal overlay + the sheet itself, in
+     * parallel).
      */
-    closeModalSheet(): Observable<boolean>;
+    closeAll(): void;
     /**
      * Slide the sheet out of view + hide it.
      * Return an Observable so we can merge it with other close operations.

package/types/src/date-range/date-range.d.ts

@@ -40,7 +40,6 @@ export declare class SchmancyDateRange extends SchmancyElement {
     private selectedDateRange;
     private activePreset;
     private announceMessage;
-    private isMobile;
     private presetRanges;
     private presetCategories;
     private memoizedPresets;
@@ -56,6 +55,7 @@ export declare class SchmancyDateRange extends SchmancyElement {
     private updateSelectedDateRange;
     private setDateRange;
     private toggleDropdown;
+    private _overlaySubscription;
     private openDropdown;
     private closeDropdown;
     /**
@@ -71,10 +71,6 @@ export declare class SchmancyDateRange extends SchmancyElement {
      * and updates the activePreset accordingly
      */
     private checkAndUpdateActivePreset;
-    /**
-     * Check if view is mobile
-     */
-    private checkMobileView;
     /**
      * Check if we can navigate backward
      */

package/types/src/index.d.ts

@@ -9,14 +9,12 @@ export * from './card';
 export * from './charts';
 export * from './checkbox';
 export * from './chips';
-export * from './code-highlight';
 export * from './connectivity';
 export * from './content-drawer';
 export * from './date-range';
 export * from './date-range-inline';
 export * from './delay';
 export * from './details';
-export * from './dialog';
 export * from './directives';
 export * from './discovery';
 export * from './divider';
@@ -33,7 +31,6 @@ export * from './json';
 export * from './layout';
 export * from './lightbox';
 export * from './list';
-export * from './mailbox';
 export * from './map';
 export * from './menu';
 export * from './nav-drawer';
@@ -49,7 +46,6 @@ export * from './radio-group';
 export * from './range';
 export * from './rxjs-utils';
 export * from './select';
-export * from './sheet';
 export * from './slider';
 export * from './state';
 export * from './steps';

package/types/src/menu/menu-item.d.ts

@@ -1,6 +1,7 @@
 import { SchmancyElement } from '@mixins/index';
 export default class SchmancyMenuItem extends SchmancyElement {
     static styles: import("lit").CSSResult[];
+    private dismissParentMenu;
     protected render(): unknown;
 }
 declare global {

package/types/src/menu/menu.d.ts

@@ -2,9 +2,9 @@ import { SchmancyElement } from '@mixins/index';
 /**
  * Menu Component
  *
- * CRITICAL: The dialog ONLY renders the raw menu items passed via the default slot.
- * NO <ul> wrapper, NO classes, NO additional markup in the dialog call.
- * The dialog service handles positioning and display - we just pass the pure content.
+ * The overlay renders ONLY the raw menu items passed via the default slot.
+ * NO <ul> wrapper, NO classes, NO additional markup. The overlay system
+ * handles positioning (anchored at the trigger click) and dismissal.
  *
  * @example Basic menu with auto-dismiss
  * ```typescript
@@ -14,20 +14,22 @@ import { SchmancyElement } from '@mixins/index';
  *   <schmancy-menu-item @click=${() => deleteItem()}>Delete</schmancy-menu-item>
  * </schmancy-menu>
  * ```
- * Note: Dialog auto-dismisses when schmancy-menu-item is clicked
+ * Note: `<schmancy-menu-item>` dispatches a bubbling 'close' event on click;
+ * the overlay `show()` observable completes and the menu tears down.
  *
  * @example Custom component (manual dismiss)
  * ```typescript
  * <schmancy-menu>
  *   <schmancy-icon-button slot="trigger">settings</schmancy-icon-button>
- *   <my-settings-form @submit=${() => $dialog.dismiss()}></my-settings-form>
+ *   <my-settings-form
+ *     @submit=${(e) => e.target.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }))}
+ *   ></my-settings-form>
  * </schmancy-menu>
  * ```
- * Note: Custom components must call $dialog.dismiss() manually
  *
  * @slot trigger - Button to open menu (new naming)
  * @slot button - Button to open menu (backward compatible)
- * @slot default - Menu items or any custom component to display in dialog
+ * @slot default - Menu items or any custom component to display in the overlay
  */
 export default class SchmancyMenu extends SchmancyElement {
     static styles: import("lit").CSSResult[];