@social.io/catalog 1.3.0 → 2.1.0

package/ts_web/elements/sio-dropdown-menu.ts

@@ -3,17 +3,14 @@ import {
   property,
   html,
   customElement,
-  type TemplateResult,
-  cssManager,
   css,
-  unsafeCSS,
   state,
+  type TemplateResult,
 } from '@design.estate/dees-element';
 
-// Import design tokens
-import { colors, bdTheme } from './00colors.js';
-import { spacing, radius, shadows, transitions } from './00tokens.js';
-import { fontFamilies } from './00fonts.js';
+import { sioElementStyles } from './tokens.js';
+import './sio-icon.js';
+import './sio-button.js';
 
 export interface IDropdownMenuItem {
   id: string;
@@ -33,16 +30,26 @@ declare global {
 @customElement('sio-dropdown-menu')
 export class SioDropdownMenu extends DeesElement {
   public static demo = () => html`
-    <div style="position: relative; height: 200px; display: flex; justify-content: center; padding-top: 50px;">
-      <sio-dropdown-menu .items=${[
-        { id: 'mute', label: 'Mute notifications', icon: 'bell-off' },
-        { id: 'pin', label: 'Pin conversation', icon: 'pin' },
-        { id: 'divider1', label: '', divider: true },
-        { id: 'export', label: 'Export chat', icon: 'download' },
-        { id: 'clear', label: 'Clear history', icon: 'trash-2', destructive: true }
-      ]}>
-        <sio-button type="ghost" size="sm">
-          <sio-icon icon="more-vertical" size="16"></sio-icon>
+    <div
+      style="position: relative; height: 320px; display: flex; justify-content: center; padding-top: 40px; background: var(--sio-bg); border-radius: 14px;"
+    >
+      <sio-dropdown-menu
+        .items=${[
+          { id: 'reply', label: 'Reply', icon: 'reply' },
+          { id: 'forward', label: 'Forward', icon: 'forward' },
+          { id: 'divider1', label: '', divider: true },
+          { id: 'later', label: 'Move to Later', icon: 'clock' },
+          { id: 'done', label: 'Mark as Done', icon: 'check' },
+          { id: 'pin', label: 'Pin conversation', icon: 'pin' },
+          { id: 'mute', label: 'Mute notifications', icon: 'bell-off', disabled: true },
+          { id: 'divider2', label: '', divider: true },
+          { id: 'block', label: 'Block sender', icon: 'user-x', destructive: true },
+          { id: 'delete', label: 'Delete thread', icon: 'trash-2', destructive: true },
+        ] satisfies IDropdownMenuItem[]}
+      >
+        <sio-button type="outline" size="sm">
+          <sio-icon icon="ellipsis" size="15"></sio-icon>
+          Thread actions
         </sio-button>
       </sio-dropdown-menu>
     </div>
@@ -57,17 +64,16 @@ export class SioDropdownMenu extends DeesElement {
   @state()
   private accessor isOpen: boolean = false;
 
-  private documentClickHandler: (e: MouseEvent) => void;
-  private scrollHandler: () => void;
-  private resizeHandler: () => void;
+  private documentClickHandler?: (e: MouseEvent) => void;
+  private resizeHandler?: () => void;
 
   public static styles = [
-    cssManager.defaultStyles,
+    ...sioElementStyles,
     css`
       :host {
         position: relative;
         display: inline-block;
-        font-family: ${unsafeCSS(fontFamilies.sans)};
+        font-family: var(--sio-font-sf);
       }
 
       .trigger {
@@ -76,19 +82,23 @@ export class SioDropdownMenu extends DeesElement {
 
       .dropdown {
         position: absolute;
-        top: calc(100% + 10px);
+        top: calc(100% + 8px);
         right: 0;
-        min-width: 200px;
-        background: ${bdTheme('background')};
-        border: 1px solid ${bdTheme('border')};
-        border-radius: ${unsafeCSS(radius.lg)};
-        box-shadow: ${unsafeCSS(shadows.lg)};
-        overflow: hidden;
+        min-width: 210px;
+        padding: 5px;
+        background: var(--sio-surface);
+        border-radius: var(--sio-radius-md);
+        /* hairline ring + soft depth, per the v7 floating-surface recipe */
+        box-shadow:
+          0 18px 50px rgba(0, 0, 0, 0.22),
+          0 0 0 var(--sio-hairline) var(--sio-separator);
         z-index: 100000;
         opacity: 0;
-        transform: translateY(-10px) scale(0.95);
+        transform: translateY(-8px) scale(0.96);
         pointer-events: none;
-        transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+        transition:
+          opacity 160ms ease,
+          transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
         transform-origin: top right;
       }
 
@@ -107,48 +117,52 @@ export class SioDropdownMenu extends DeesElement {
       .menu-item {
         display: flex;
         align-items: center;
-        gap: ${unsafeCSS(spacing["3"])};
-        padding: ${unsafeCSS(spacing["2.5"])} ${unsafeCSS(spacing["3"])};
-        font-size: 0.875rem;
-        line-height: 1.5;
-        color: ${bdTheme('foreground')};
-        cursor: pointer;
-        transition: ${unsafeCSS(transitions.all)};
-        user-select: none;
+        gap: 10px;
+        width: 100%;
+        padding: 8px 10px;
         border: none;
+        border-radius: var(--sio-radius-sm);
         background: none;
-        width: 100%;
+        font-family: var(--sio-font-sf);
+        font-size: 13px;
+        font-weight: 500;
+        letter-spacing: -0.08px;
+        line-height: 18px;
         text-align: left;
+        color: var(--sio-label);
+        cursor: pointer;
+        transition: background 80ms ease;
+        user-select: none;
       }
 
       .menu-item:hover:not(.disabled) {
-        background: ${bdTheme('accent')};
+        background: var(--sio-surface-2);
       }
 
       .menu-item:active:not(.disabled) {
-        transform: scale(0.98);
+        background: color-mix(in oklab, var(--sio-label) 10%, transparent);
       }
 
       .menu-item.disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
+        opacity: 0.4;
+        cursor: default;
       }
 
       .menu-item.destructive {
-        color: ${bdTheme('destructive')};
+        color: var(--sio-red);
       }
 
       .menu-item.destructive:hover:not(.disabled) {
-        background: ${bdTheme('destructive')}10;
+        background: color-mix(in oklab, var(--sio-red) 10%, transparent);
       }
 
       .menu-icon {
         flex-shrink: 0;
-        color: ${bdTheme('mutedForeground')};
+        color: var(--sio-label-3);
       }
 
       .menu-item.destructive .menu-icon {
-        color: ${bdTheme('destructive')};
+        color: var(--sio-red);
       }
 
       .menu-label {
@@ -156,30 +170,9 @@ export class SioDropdownMenu extends DeesElement {
       }
 
       .divider {
-        height: 1px;
-        background: ${bdTheme('border')};
-        margin: ${unsafeCSS(spacing["1"])} 0;
-      }
-
-      /* Mobile adjustments */
-      @media (max-width: 600px) {
-        .dropdown {
-          position: fixed;
-          top: auto !important;
-          left: ${unsafeCSS(spacing["4"])} !important;
-          right: ${unsafeCSS(spacing["4"])};
-          bottom: ${unsafeCSS(spacing["4"])};
-          width: auto;
-          transform-origin: bottom center;
-        }
-
-        .dropdown.open {
-          transform: translateY(0) scale(1);
-        }
-
-        .dropdown:not(.open) {
-          transform: translateY(10px) scale(0.95);
-        }
+        height: var(--sio-hairline);
+        background: var(--sio-separator);
+        margin: 4px 6px;
       }
     `,
   ];
@@ -190,109 +183,98 @@ export class SioDropdownMenu extends DeesElement {
         <slot></slot>
       </div>
       <div class="dropdown ${this.isOpen ? 'open' : ''} align-${this.align}">
-        ${this.items.map(item => 
-          item.divider ? html`
-            <div class="divider"></div>
-          ` : html`
-            <button
-              class="menu-item ${item.destructive ? 'destructive' : ''} ${item.disabled ? 'disabled' : ''}"
-              @click=${() => this.handleItemClick(item)}
-              ?disabled=${item.disabled}
-            >
-              ${item.icon ? html`
-                <sio-icon class="menu-icon" icon="${item.icon}" size="16"></sio-icon>
-              ` : ''}
-              <span class="menu-label">${item.label}</span>
-            </button>
-          `
+        ${this.items.map((item) =>
+          item.divider
+            ? html`<div class="divider"></div>`
+            : html`
+                <button
+                  class="menu-item ${item.destructive ? 'destructive' : ''} ${item.disabled
+                    ? 'disabled'
+                    : ''}"
+                  @click=${() => this.handleItemClick(item)}
+                  ?disabled=${item.disabled}
+                >
+                  ${item.icon
+                    ? html`<sio-icon class="menu-icon" icon="${item.icon}" size="15"></sio-icon>`
+                    : ''}
+                  <span class="menu-label">${item.label}</span>
+                </button>
+              `,
         )}
       </div>
     `;
   }
 
   private toggleDropdown = (e: Event) => {
-    console.log('[Dropdown] Toggle called, current state:', this.isOpen);
     e.preventDefault();
     e.stopPropagation();
-    
+
     this.isOpen = !this.isOpen;
-    console.log('[Dropdown] New state:', this.isOpen);
-    
+
     if (this.isOpen) {
-      this.addDocumentListener();
+      this.addDocumentListeners();
     } else {
-      this.removeDocumentListener();
+      this.removeDocumentListeners();
     }
-  }
-
-  private updateDropdownPosition() {
-    // For absolute positioning, we don't need to calculate position dynamically
-    // The CSS handles it with top: calc(100% + 10px) and right: 0
-    console.log('[Dropdown] Position is handled by CSS (absolute positioning)');
-  }
+  };
 
   private handleItemClick(item: IDropdownMenuItem) {
     if (item.disabled || item.divider) return;
-    
+
     this.isOpen = false;
-    this.removeDocumentListener();
-    
-    // Dispatch custom event with the selected item
-    this.dispatchEvent(new CustomEvent('item-selected', {
-      detail: { item },
-      bubbles: true,
-      composed: true
-    }));
+    this.removeDocumentListeners();
+
+    this.dispatchEvent(
+      new CustomEvent('item-selected', {
+        detail: { item },
+        bubbles: true,
+        composed: true,
+      }),
+    );
   }
 
-  private addDocumentListener() {
-    // Close dropdown when clicking outside
+  private addDocumentListeners() {
+    // Close when clicking outside the component.
     this.documentClickHandler = (e: MouseEvent) => {
       const path = e.composedPath();
       if (!path.includes(this)) {
-        this.isOpen = false;
-        this.removeDocumentListener();
+        this.close();
       }
     };
-    
-    // Update position on scroll/resize
-    this.scrollHandler = () => this.updateDropdownPosition();
+
+    // Close on small viewports to avoid stale absolute positioning.
     this.resizeHandler = () => {
-      this.updateDropdownPosition();
       if (window.innerWidth <= 600) {
-        // Close on mobile resize to prevent positioning issues
-        this.isOpen = false;
-        this.removeDocumentListener();
+        this.close();
       }
     };
-    
-    // Delay to avoid immediate closing
+
+    // Delay to avoid the opening click closing the menu again.
     setTimeout(() => {
+      if (!this.documentClickHandler || !this.resizeHandler) return;
       document.addEventListener('click', this.documentClickHandler);
-      window.addEventListener('scroll', this.scrollHandler, true);
       window.addEventListener('resize', this.resizeHandler);
     }, 0);
   }
 
-  private removeDocumentListener() {
+  private removeDocumentListeners() {
     if (this.documentClickHandler) {
       document.removeEventListener('click', this.documentClickHandler);
-    }
-    if (this.scrollHandler) {
-      window.removeEventListener('scroll', this.scrollHandler, true);
+      this.documentClickHandler = undefined;
     }
     if (this.resizeHandler) {
       window.removeEventListener('resize', this.resizeHandler);
+      this.resizeHandler = undefined;
     }
   }
 
   public async disconnectedCallback() {
     await super.disconnectedCallback();
-    this.removeDocumentListener();
+    this.removeDocumentListeners();
   }
 
   public close() {
     this.isOpen = false;
-    this.removeDocumentListener();
+    this.removeDocumentListeners();
   }
-}
+}