@synergy-design-system/mcp 0.1.0 → 1.0.0

package/metadata/packages/components/components/syn-dropdown/component.ts

@@ -0,0 +1,484 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { animateTo, stopAnimations } from '../../internal/animate.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';
+import { getDeepestActiveElement } from '../../internal/active-elements.js';
+import { getTabbableBoundary } from '../../internal/tabbable.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import { property, query } from 'lit/decorators.js';
+import { waitForEvent } from '../../internal/event.js';
+import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import SynPopup from '../popup/popup.component.js';
+import styles from './dropdown.styles.js';
+import customStyles from './dropdown.custom.styles.js';
+import type { CSSResultGroup } from 'lit';
+import type { SynSelectEvent } from '../../events/syn-select.js';
+import type SynButton from '../button/button.js';
+import type SynIconButton from '../icon-button/icon-button.js';
+import type SynMenu from '../menu/menu.js';
+
+/**
+ * @summary Dropdowns expose additional content that "drops down" in a panel.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-popup
+ *
+ * @slot - The dropdown's main content.
+ * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.
+ *
+ * @event syn-show - Emitted when the dropdown opens.
+ * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.
+ * @event syn-hide - Emitted when the dropdown closes.
+ * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper, an `<syn-popup>` element.
+ * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+ * @csspart trigger - The container that wraps the trigger.
+ * @csspart panel - The panel that gets shown when the dropdown is open.
+ *
+ * @animation dropdown.show - The animation to use when showing the dropdown.
+ * @animation dropdown.hide - The animation to use when hiding the dropdown.
+ */
+export default class SynDropdown extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static dependencies = { 'syn-popup': SynPopup };
+
+  @query('.dropdown') popup: SynPopup;
+  @query('.dropdown__trigger') trigger: HTMLSlotElement;
+  @query('.dropdown__panel') panel: HTMLSlotElement;
+
+  private readonly localize = new LocalizeController(this);
+  private closeWatcher: CloseWatcher | null;
+
+  /**
+   * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
+   * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
+   */
+  @property({ type: Boolean, reflect: true }) open = false;
+
+  /**
+   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+   * inside of the viewport.
+   */
+  @property({ reflect: true }) placement:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end' = 'bottom-start';
+
+  /** Disables the dropdown so the panel will not open. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /**
+   * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+   * dropdowns that allow for multiple interactions.
+   */
+  @property({ attribute: 'stay-open-on-select', type: Boolean, reflect: true }) stayOpenOnSelect = false;
+
+  /**
+   * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
+   * components that use a dropdown internally.
+   */
+  @property({ attribute: false }) containingElement?: HTMLElement;
+
+  /** The distance in pixels from which to offset the panel away from its trigger. */
+  @property({ type: Number }) distance = 0;
+
+  /** The distance in pixels from which to offset the panel along its trigger. */
+  @property({ type: Number }) skidding = 0;
+
+  /**
+   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+   */
+  @property({ type: Boolean }) hoist = false;
+
+  /**
+   * Syncs the popup width or height to that of the trigger element.
+   */
+  @property({ reflect: true }) sync: 'width' | 'height' | 'both' | undefined = undefined;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (!this.containingElement) {
+      this.containingElement = this;
+    }
+  }
+
+  firstUpdated() {
+    this.panel.hidden = !this.open;
+
+    // If the dropdown is visible on init, update its position
+    if (this.open) {
+      this.addOpenListeners();
+      this.popup.active = true;
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeOpenListeners();
+    this.hide();
+  }
+
+  focusOnTrigger() {
+    const trigger = this.trigger.assignedElements({ flatten: true })[0] as HTMLElement | undefined;
+    if (typeof trigger?.focus === 'function') {
+      trigger.focus();
+    }
+  }
+
+  getMenu() {
+    return this.panel.assignedElements({ flatten: true }).find(el => el.tagName.toLowerCase() === 'syn-menu') as
+      | SynMenu
+      | undefined;
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    // Close when escape is pressed inside an open dropdown. We need to listen on the panel itself and stop propagation
+    // in case any ancestors are also listening for this key.
+    if (this.open && event.key === 'Escape') {
+      event.stopPropagation();
+      this.hide();
+      this.focusOnTrigger();
+    }
+  };
+
+  private handleDocumentKeyDown = (event: KeyboardEvent) => {
+    // Close when escape or tab is pressed
+    if (event.key === 'Escape' && this.open && !this.closeWatcher) {
+      event.stopPropagation();
+      this.focusOnTrigger();
+      this.hide();
+      return;
+    }
+
+    // Handle tabbing
+    if (event.key === 'Tab') {
+      // Tabbing within an open menu should close the dropdown and refocus the trigger
+      if (this.open && document.activeElement?.tagName.toLowerCase() === 'syn-menu-item') {
+        event.preventDefault();
+        this.hide();
+        this.focusOnTrigger();
+        return;
+      }
+
+      const computeClosestContaining = (element: Element | null | undefined, tagName: string): Element | null => {
+        if (!element) return null;
+
+        const closest = element.closest(tagName);
+        if (closest) return closest;
+
+        const rootNode = element.getRootNode();
+        if (rootNode instanceof ShadowRoot) {
+          return computeClosestContaining(rootNode.host, tagName);
+        }
+
+        return null;
+      };
+
+      // Tabbing outside of the containing element closes the panel
+      //
+      // If the dropdown is used within a shadow DOM, we need to obtain the activeElement within that shadowRoot,
+      // otherwise `document.activeElement` will only return the name of the parent shadow DOM element.
+      setTimeout(() => {
+        const activeElement =
+          this.containingElement?.getRootNode() instanceof ShadowRoot
+            ? getDeepestActiveElement()
+            : document.activeElement;
+
+        if (
+          !this.containingElement ||
+          computeClosestContaining(activeElement, this.containingElement.tagName.toLowerCase()) !==
+            this.containingElement
+        ) {
+          this.hide();
+        }
+      });
+    }
+  };
+
+  private handleDocumentMouseDown = (event: MouseEvent) => {
+    // Close when clicking outside of the containing element
+    const path = event.composedPath();
+    if (this.containingElement && !path.includes(this.containingElement)) {
+      this.hide();
+    }
+  };
+
+  private handlePanelSelect = (event: SynSelectEvent) => {
+    const target = event.target as HTMLElement;
+
+    // Hide the dropdown when a menu item is selected
+    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === 'syn-menu') {
+      this.hide();
+      this.focusOnTrigger();
+    }
+  };
+
+  handleTriggerClick() {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+      this.focusOnTrigger();
+    }
+  }
+
+  async handleTriggerKeyDown(event: KeyboardEvent) {
+    // When spacebar/enter is pressed, show the panel but don't focus on the menu. This let's the user press the same
+    // key again to hide the menu in case they don't want to make a selection.
+    if ([' ', 'Enter'].includes(event.key)) {
+      event.preventDefault();
+      this.handleTriggerClick();
+      return;
+    }
+
+    const menu = this.getMenu();
+
+    if (menu) {
+      const menuItems = menu.getAllItems();
+      const firstMenuItem = menuItems[0];
+      const lastMenuItem = menuItems[menuItems.length - 1];
+
+      // When up/down is pressed, we make the assumption that the user is familiar with the menu and plans to make a
+      // selection. Rather than toggle the panel, we focus on the menu (if one exists) and activate the first item for
+      // faster navigation.
+      if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+        event.preventDefault();
+
+        // Show the menu if it's not already open
+        if (!this.open) {
+          this.show();
+
+          // Wait for the dropdown to open before focusing, but not the animation
+          await this.updateComplete;
+        }
+
+        if (menuItems.length > 0) {
+          // Focus on the first/last menu item after showing
+          this.updateComplete.then(() => {
+            if (event.key === 'ArrowDown' || event.key === 'Home') {
+              menu.setCurrentItem(firstMenuItem);
+              firstMenuItem.focus();
+            }
+
+            if (event.key === 'ArrowUp' || event.key === 'End') {
+              menu.setCurrentItem(lastMenuItem);
+              lastMenuItem.focus();
+            }
+          });
+        }
+      }
+    }
+  }
+
+  handleTriggerKeyUp(event: KeyboardEvent) {
+    // Prevent space from triggering a click event in Firefox
+    if (event.key === ' ') {
+      event.preventDefault();
+    }
+  }
+
+  handleTriggerSlotChange() {
+    this.updateAccessibleTrigger();
+  }
+
+  //
+  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
+  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+  // a child of the slotted element, or an element in the slotted element's shadow root.
+  //
+  // For example, the accessible trigger of an <syn-button> is a <button> located inside its shadow root.
+  //
+  // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
+  //
+  updateAccessibleTrigger() {
+    const assignedElements = this.trigger.assignedElements({ flatten: true }) as HTMLElement[];
+    const accessibleTrigger = assignedElements.find(el => getTabbableBoundary(el).start);
+    let target: HTMLElement;
+
+    if (accessibleTrigger) {
+      switch (accessibleTrigger.tagName.toLowerCase()) {
+        // Synergy buttons have to update the internal button so it's announced correctly by screen readers
+        case 'syn-button':
+        case 'syn-icon-button':
+          target = (accessibleTrigger as SynButton | SynIconButton).button;
+          break;
+
+        default:
+          target = accessibleTrigger;
+      }
+
+      target.setAttribute('aria-haspopup', 'true');
+      target.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    }
+  }
+
+  /** Shows the dropdown panel. */
+  async show() {
+    if (this.open) {
+      return undefined;
+    }
+
+    this.open = true;
+    return waitForEvent(this, 'syn-after-show');
+  }
+
+  /** Hides the dropdown panel */
+  async hide() {
+    if (!this.open) {
+      return undefined;
+    }
+
+    this.open = false;
+    return waitForEvent(this, 'syn-after-hide');
+  }
+
+  /**
+   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+   * is activated.
+   */
+  reposition() {
+    this.popup.reposition();
+  }
+
+  addOpenListeners() {
+    this.panel.addEventListener('syn-select', this.handlePanelSelect);
+    if ('CloseWatcher' in window) {
+      this.closeWatcher?.destroy();
+      this.closeWatcher = new CloseWatcher();
+      this.closeWatcher.onclose = () => {
+        this.hide();
+        this.focusOnTrigger();
+      };
+    } else {
+      this.panel.addEventListener('keydown', this.handleKeyDown);
+    }
+    document.addEventListener('keydown', this.handleDocumentKeyDown);
+    document.addEventListener('mousedown', this.handleDocumentMouseDown);
+  }
+
+  removeOpenListeners() {
+    if (this.panel) {
+      this.panel.removeEventListener('syn-select', this.handlePanelSelect);
+      this.panel.removeEventListener('keydown', this.handleKeyDown);
+    }
+    document.removeEventListener('keydown', this.handleDocumentKeyDown);
+    document.removeEventListener('mousedown', this.handleDocumentMouseDown);
+    this.closeWatcher?.destroy();
+  }
+
+  @watch('open', { waitUntilFirstUpdate: true })
+  async handleOpenChange() {
+    if (this.disabled) {
+      this.open = false;
+      return;
+    }
+
+    this.updateAccessibleTrigger();
+
+    if (this.open) {
+      // Show
+      this.emit('syn-show');
+      this.addOpenListeners();
+
+      await stopAnimations(this);
+      this.panel.hidden = false;
+      this.popup.active = true;
+      const { keyframes, options } = getAnimation(this, 'dropdown.show', { dir: this.localize.dir() });
+      await animateTo(this.popup.popup, keyframes, options);
+
+      this.emit('syn-after-show');
+    } else {
+      // Hide
+      this.emit('syn-hide');
+      this.removeOpenListeners();
+
+      await stopAnimations(this);
+      const { keyframes, options } = getAnimation(this, 'dropdown.hide', { dir: this.localize.dir() });
+      await animateTo(this.popup.popup, keyframes, options);
+      this.panel.hidden = true;
+      this.popup.active = false;
+
+      this.emit('syn-after-hide');
+    }
+  }
+
+  render() {
+    return html`
+      <syn-popup
+        part="base"
+        exportparts="popup:base__popup"
+        id="dropdown"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        flip
+        shift
+        auto-size="vertical"
+        auto-size-padding="10"
+        sync=${ifDefined(this.sync ? this.sync : undefined)}
+        class=${classMap({
+          dropdown: true,
+          'dropdown--open': this.open
+        })}
+      >
+        <slot
+          name="trigger"
+          slot="anchor"
+          part="trigger"
+          class="dropdown__trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+          @keyup=${this.handleTriggerKeyUp}
+          @slotchange=${this.handleTriggerSlotChange}
+        ></slot>
+
+        <div aria-hidden=${this.open ? 'false' : 'true'} aria-labelledby="dropdown">
+          <slot part="panel" class="dropdown__panel"></slot>
+        </div>
+      </syn-popup>
+    `;
+  }
+}
+
+setDefaultAnimation('dropdown.show', {
+  keyframes: [
+    { opacity: 0, scale: 0.9 },
+    { opacity: 1, scale: 1 }
+  ],
+  options: { duration: 100, easing: 'ease' }
+});
+
+setDefaultAnimation('dropdown.hide', {
+  keyframes: [
+    { opacity: 1, scale: 1 },
+    { opacity: 0, scale: 0.9 }
+  ],
+  options: { duration: 100, easing: 'ease' }
+});

package/metadata/packages/components/components/syn-dropdown/component.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @summary Dropdowns expose additional content that "drops down" in a panel.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-popup
+ *
+ * @slot - The dropdown's main content.
+ * @slot trigger - The dropdown's trigger, usually a `<syn-button>` element.
+ *
+ * @event syn-show - Emitted when the dropdown opens.
+ * @event syn-after-show - Emitted after the dropdown opens and all animations are complete.
+ * @event syn-hide - Emitted when the dropdown closes.
+ * @event syn-after-hide - Emitted after the dropdown closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper, an `<syn-popup>` element.
+ * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+ * @csspart trigger - The container that wraps the trigger.
+ * @csspart panel - The panel that gets shown when the dropdown is open.
+ *
+ * @animation dropdown.show - The animation to use when showing the dropdown.
+ * @animation dropdown.hide - The animation to use when hiding the dropdown.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/dropdown/dropdown.js';
+
+import type { SynShowEvent } from '@synergy-design-system/components';
+import type { SynAfterShowEvent } from '@synergy-design-system/components';
+import type { SynHideEvent } from '@synergy-design-system/components';
+import type { SynAfterHideEvent } from '@synergy-design-system/components';
+import type { SynDropdown } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynDropdown>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* Indicates whether or not the dropdown is open.
+* You can toggle this attribute to show and hide the dropdown, or you
+can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
+ */
+  open?: SynDropdown['open'];
+
+  /**
+* The preferred placement of the dropdown panel.
+* Note that the actual placement may vary as needed to keep the panel
+inside of the viewport.
+ */
+  placement?: SynDropdown['placement'];
+
+  /**
+   * Disables the dropdown so the panel will not open.
+   */
+  disabled?: SynDropdown['disabled'];
+
+  /**
+* By default, the dropdown is closed when an item is selected.
+* This attribute will keep it open instead.
+* Useful for
+dropdowns that allow for multiple interactions.
+ */
+  stayOpenOnSelect?: SynDropdown['stayOpenOnSelect'];
+
+  /**
+   * The distance in pixels from which to offset the panel away from its trigger.
+   */
+  distance?: SynDropdown['distance'];
+
+  /**
+   * The distance in pixels from which to offset the panel along its trigger.
+   */
+  skidding?: SynDropdown['skidding'];
+
+  /**
+* Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+`overflow: auto|scroll`.
+* Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+ */
+  hoist?: SynDropdown['hoist'];
+
+  /**
+   * Syncs the popup width or height to that of the trigger element.
+   */
+  sync?: SynDropdown['sync'];
+
+  /**
+* The dropdown will close when the user interacts outside of this element (e.g.
+* clicking).
+* Useful for composing other
+components that use a dropdown internally.
+ */
+  containingElement?: SynDropdown['containingElement'];
+}>();
+
+// Make sure prop binding only forwards the props that are actually there.
+// This is needed because :param="param" also adds an empty attribute
+// when using web-components, which breaks optional arguments like size in SynInput
+// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
+const visibleProps = computed(() =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
+  ),
+);
+
+// Map events
+defineEmits<{
+  /**
+   * Emitted when the dropdown opens.
+   */
+  'syn-show': [e: SynShowEvent];
+
+  /**
+   * Emitted after the dropdown opens and all animations are complete.
+   */
+  'syn-after-show': [e: SynAfterShowEvent];
+
+  /**
+   * Emitted when the dropdown closes.
+   */
+  'syn-hide': [e: SynHideEvent];
+
+  /**
+   * Emitted after the dropdown closes and all animations are complete.
+   */
+  'syn-after-hide': [e: SynAfterHideEvent];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynShowEvent } from '@synergy-design-system/components';
+export type { SynAfterShowEvent } from '@synergy-design-system/components';
+export type { SynHideEvent } from '@synergy-design-system/components';
+export type { SynAfterHideEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-dropdown
+    @syn-show="$emit('syn-show', $event)"
+    @syn-after-show="$emit('syn-after-show', $event)"
+    @syn-hide="$emit('syn-hide', $event)"
+    @syn-after-hide="$emit('syn-after-hide', $event)"
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
+  </syn-dropdown>
+</template>