@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,469 +0,0 @@
-/* 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 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];
-  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;
-
-  /**
-   * 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}
-        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

@@ -1,152 +0,0 @@
-<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'];
-
-  /**
-   * 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>