@digital-realty/ix-select 1.0.2 → 1.0.4

package/src/IxSelect.ts

@@ -1,218 +0,0 @@
-import { html, LitElement, nothing, PropertyValues } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { Select } from '@material/web/select/internal/select.js';
-import { Field } from '@material/web/field/internal/field';
-import { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';
-import '@material/web/select/filled-select.js';
-import '@material/web/select/outlined-select.js';
-import './selectoption/ix-select-option.js';
-
-export const DEFAULT_TYPEAHEAD_BUFFER_TIME = 200;
-
-export class IxSelect extends LitElement {
-  /** @nocollapse */
-  static readonly formAssociated = true;
-
-  @query('.field') private readonly field!: Field | null;
-
-  @query('slot') slotEl!: HTMLSlotElement;
-
-  @query('md-outlined-select') default!: Select;
-
-  @property() appearance: 'filled' | 'outlined' = 'outlined';
-
-  @property() label: String = '';
-
-  @property({ type: Boolean }) quick = false;
-
-  @property({ type: Boolean }) required = false;
-
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  @property({ type: String, attribute: 'error-text' }) errorText = '';
-
-  @property({ type: String, attribute: 'supporting-text' }) supportingText = '';
-
-  @property({ type: Boolean, reflect: true }) error = false;
-
-  @property({ type: String, attribute: 'display-text' }) displayText = '';
-
-  /**
-   * Whether or not the underlying md-menu should be position: fixed to display
-   * in a top-level manner, or position: absolute.
-   *
-   * position:fixed is useful for cases where select is inside of another
-   * element with stacking context and hidden overflows such as `md-dialog`.
-   */
-  @property({ attribute: 'menu-positioning' })
-  menuPositioning: 'absolute' | 'fixed' = 'absolute';
-
-  /**
-   * The max time between the keystrokes of the typeahead select / menu behavior
-   * before it clears the typeahead buffer.
-   */
-  @property({ type: Number, attribute: 'typeahead-delay' })
-  typeaheadDelay = DEFAULT_TYPEAHEAD_BUFFER_TIME;
-
-  @state() private nativeError = false;
-
-  @state() private nativeErrorText = '';
-
-  private get hasError() {
-    return this.error || this.nativeError;
-  }
-
-  private readonly internals = (this as HTMLElement) /* needed for closure */
-    .attachInternals();
-
-  private customValidationMessage = '';
-
-  get form() {
-    return this.internals.form;
-  }
-
-  get labels() {
-    return this.internals.labels;
-  }
-
-  get name() {
-    return this.getAttribute('name') ?? '';
-  }
-
-  set name(name: string) {
-    this.setAttribute('name', name);
-  }
-
-  get validity() {
-    this.syncValidity();
-    return this.internals.validity;
-  }
-
-  get value() {
-    return this.materialRoot.value;
-  }
-
-  get validationMessage() {
-    this.syncValidity();
-    return this.internals.validationMessage;
-  }
-
-  get materialRoot(): Select {
-    return this.shadowRoot?.querySelector('md-filled-select') ?? this.default;
-  }
-
-  firstUpdated() {
-    this.addEventListener('request-selection', () => {
-      this.internals.setFormValue(this.materialRoot.value);
-    });
-  }
-
-  protected override updated(changed: PropertyValues<Select>) {
-    if (changed.has('required')) {
-      this.syncValidity();
-    }
-  }
-
-  // eslint-disable-next-line consistent-return
-  render() {
-    if (this.appearance === 'outlined') {
-      return html` <md-outlined-select
-        .aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}
-        .tabindex=${this.disabled ? '-1' : '0'}
-        .label=${this.label}
-        .populated=${!!this.displayText}
-        .disabled=${this.disabled}
-        .quick=${this.quick}
-        .menu-positioning=${this.menuPositioning}
-        .typeaheadDelay=${this.typeaheadDelay}
-        .error=${this.hasError}
-        .name=${this.name}
-        .required=${this.required}
-        supporting-text=${this.supportingText}
-        error-text=${this.getErrorText()}
-      >
-        <slot></slot>
-      </md-outlined-select>`;
-    }
-    if (this.appearance === 'filled') {
-      return html`
-        <md-filled-select 
-          .aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}
-          .tabindex=${this.disabled ? '-1' : '0'}
-          .label=${this.label}
-          .populated=${!!this.displayText}
-          .disabled=${this.disabled}
-          .quick=${this.quick}
-          .positioning=${this.menuPositioning}
-          .typeaheadDelay=${this.typeaheadDelay}
-          .required=${this.required}
-          .error=${this.hasError}
-          supporting-text=${this.supportingText}
-          error-text=${this.getErrorText()}
-        >
-          <slot></slot>
-      </md-outlined-select>`;
-    }
-  }
-
-  private getErrorText() {
-    return this.error ? this.errorText : this.nativeErrorText;
-  }
-
-  checkValidity() {
-    this.syncValidity();
-    return this.internals.checkValidity();
-  }
-
-  reportValidity() {
-    let invalidEvent: Event | undefined;
-    this.addEventListener(
-      'invalid',
-      event => {
-        invalidEvent = event;
-      },
-      { once: true }
-    );
-
-    const valid = this.checkValidity();
-    if (invalidEvent?.defaultPrevented) {
-      return valid;
-    }
-
-    const prevMessage = this.getErrorText();
-    this.nativeError = !valid;
-    this.nativeErrorText = this.validationMessage;
-
-    if (prevMessage === this.getErrorText()) {
-      this.field?.reannounceError();
-    }
-
-    return valid;
-  }
-
-  setCustomValidity(error: string) {
-    this.customValidationMessage = error;
-    this.syncValidity();
-  }
-
-  private syncValidity() {
-    const valueMissing = this.required && !this.materialRoot.value;
-    const customError = !!this.customValidationMessage;
-    const validationMessage =
-      this.customValidationMessage ||
-      (valueMissing && this.getRequiredValidationMessage()) ||
-      '';
-
-    this.internals.setValidity(
-      { valueMissing, customError },
-      validationMessage
-    );
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  private getRequiredValidationMessage() {
-    const select = document.createElement('select');
-    select.required = true;
-    return select.validationMessage;
-  }
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export { IxSelect } from './IxSelect.js';
-export { IxSelectOption } from './selectoption/IxSelectOption.js';

package/src/ix-select.ts

@@ -1,3 +0,0 @@
-import { IxSelect } from './IxSelect.js';
-
-window.customElements.define('ix-select', IxSelect);

package/src/react/IxSelect.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { createComponent } from '@lit-labs/react';
-import { IxSelect as IxSelectLit } from '../IxSelect.js';
-
-window.customElements.define('ix-select', IxSelectLit);
-
-export const IxSelect = createComponent({
-  tagName: 'ix-select',
-  elementClass: IxSelectLit,
-  react: React,
-  events: {
-    onclick: 'onClick',
-  },
-});

package/src/react/IxSelectOption.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { createComponent } from '@lit-labs/react';
-import { IxSelectOption as IxSelectOptionLit } from '../selectoption/IxSelectOption.js';
-
-window.customElements.define('ix-select', IxSelectOptionLit);
-
-export const IxSelectOption = createComponent({
-  tagName: 'ix-select',
-  elementClass: IxSelectOptionLit,
-  react: React,
-  events: {
-    onclick: 'onClick',
-  },
-});

package/src/selectoption/IxSelectOption.ts

@@ -1,192 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import '@material/web/ripple/ripple.js';
-import '@material/web/focus/md-focus-ring.js';
-import '@material/web/labs/item/item.js';
-
-import { html, LitElement, nothing } from 'lit';
-import { property, query, queryAssignedElements } from 'lit/decorators.js';
-import { ClassInfo, classMap } from 'lit/directives/class-map.js';
-
-import { ARIAMixinStrict } from '@material/web/internal/aria/aria.js';
-import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
-
-import {
-  SelectOption,
-  SelectOptionController,
-} from './selectOptionController.js';
-
-/**
- * @fires close-menu Closes the encapsulating menu on
- * @fires request-selection Requests the parent md-select to select this element
- * (and deselect others if single-selection) when `selected` changed to `true`.
- * @fires request-deselection Requests the parent md-select to deselect this
- * element when `selected` changed to `false`.
- */
-export class IxSelectOption extends LitElement implements SelectOption {
-  static {
-    requestUpdateOnAriaChange(IxSelectOption);
-  }
-
-  /** @nocollapse */
-  static override shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
-  /**
-   * Disables the item and makes it non-selectable and non-interactive.
-   */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  /**
-   * READONLY: self-identifies as a menu item and sets its identifying attribute
-   */
-  @property({ type: Boolean, attribute: 'md-menu-item', reflect: true })
-  isMenuItem = true;
-
-  /**
-   * Sets the item in the selected visual state when a submenu is opened.
-   */
-  @property({ type: Boolean }) selected = false;
-
-  /**
-   * Form value of the option.
-   */
-  @property() value = '';
-
-  @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;
-
-  @queryAssignedElements({ slot: 'headline' })
-  protected readonly headlineElements!: HTMLElement[];
-
-  type = 'option' as const;
-
-  /**
-   * The text that is selectable via typeahead. If not set, defaults to the
-   * innerText of the item slotted into the `"headline"` slot.
-   */
-  get typeaheadText() {
-    return this.selectOptionController.typeaheadText;
-  }
-
-  @property({ attribute: 'typeahead-text' })
-  set typeaheadText(text: string) {
-    this.selectOptionController.setTypeaheadText(text);
-  }
-
-  /**
-   * The text that is displayed in the select field when selected. If not set,
-   * defaults to the textContent of the item slotted into the `"headline"` slot.
-   */
-  get displayText() {
-    return this.selectOptionController.displayText;
-  }
-
-  @property({ attribute: 'display-text' })
-  set displayText(text: string) {
-    this.selectOptionController.setDisplayText(text);
-  }
-
-  private readonly selectOptionController = new SelectOptionController(this, {
-    getHeadlineElements: () => this.headlineElements,
-  });
-
-  protected override render() {
-    return this.renderListItem(html`
-      <md-item>
-        <div slot="container">
-          ${this.renderRipple()} ${this.renderFocusRing()}
-        </div>
-        <slot name="start" slot="start"></slot>
-        <slot name="end" slot="end"></slot>
-        ${this.renderBody()}
-      </md-item>
-    `);
-  }
-
-  /**
-   * Renders the root list item.
-   *
-   * @param content the child content of the list item.
-   */
-  protected renderListItem(content: unknown) {
-    return html`
-      <li
-        id="item"
-        tabindex=${this.disabled ? -1 : 0}
-        role=${this.selectOptionController.role}
-        aria-label=${(this as ARIAMixinStrict).ariaLabel || nothing}
-        aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}
-        aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}
-        aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}
-        aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}
-        class="list-item ${classMap(this.getRenderClasses())}"
-        @click=${this.selectOptionController.onClick}
-        @keydown=${this.selectOptionController.onKeydown}
-      >
-        ${content}
-      </li>
-    `;
-  }
-
-  /**
-   * Handles rendering of the ripple element.
-   */
-  protected renderRipple() {
-    return html` <md-ripple
-      part="ripple"
-      for="item"
-      ?disabled=${this.disabled}
-    ></md-ripple>`;
-  }
-
-  /**
-   * Handles rendering of the focus ring.
-   */
-  // eslint-disable-next-line class-methods-use-this
-  protected renderFocusRing() {
-    return html` <md-focus-ring
-      part="focus-ring"
-      for="item"
-      inward
-    ></md-focus-ring>`;
-  }
-
-  /**
-   * Classes applied to the list item root.
-   */
-  protected getRenderClasses(): ClassInfo {
-    return {
-      disabled: this.disabled,
-      selected: this.selected,
-    };
-  }
-
-  /**
-   * Handles rendering the headline and supporting text.
-   */
-  // eslint-disable-next-line class-methods-use-this
-  protected renderBody() {
-    return html`
-      <slot></slot>
-      <slot name="overline" slot="overline"></slot>
-      <slot name="headline" slot="headline"></slot>
-      <slot name="supporting-text" slot="supporting-text"></slot>
-      <slot
-        name="trailing-supporting-text"
-        slot="trailing-supporting-text"
-      ></slot>
-    `;
-  }
-
-  override focus() {
-    // TODO(b/300334509): needed for some cases where delegatesFocus doesn't
-    // work programmatically like in FF and select-option
-    this.listItemRoot?.focus();
-  }
-}

package/src/selectoption/ix-select-option.ts

@@ -1,3 +0,0 @@
-import { IxSelectOption } from './IxSelectOption.js';
-
-window.customElements.define('ix-select-option', IxSelectOption);

package/src/selectoption/selectOptionController.ts

@@ -1,179 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import { ReactiveController, ReactiveControllerHost } from 'lit';
-
-import {
-  MenuItem,
-  MenuItemController,
-  MenuItemControllerConfig,
-} from '@material/web/menu/internal/controllers/menuItemController.js';
-
-/**
- * The interface specific to a Select Option
- */
-interface SelectOptionSelf {
-  /**
-   * The form value associated with the Select Option. (Note: the visual portion
-   * of the SelectOption is the headline defined in ListItem)
-   */
-  value: string;
-  /**
-   * Whether or not the SelectOption is selected.
-   */
-  selected: boolean;
-  /**
-   * The text to display in the select when selected. Defaults to the
-   * textContent of the Element slotted into the headline.
-   */
-  displayText: string;
-}
-
-/**
- * The interface to implement for a select option. Additionally, the element
- * must have `md-list-item` and `md-menu-item` attributes on the host.
- */
-export type SelectOption = SelectOptionSelf & MenuItem;
-
-/**
- * Creates an event fired by a SelectOption to request selection from md-select.
- * Typically fired after `selected` changes from `false` to `true`.
- */
-export function createRequestSelectionEvent() {
-  return new Event('request-selection', {
-    bubbles: true,
-    composed: true,
-  });
-}
-
-/**
- * Creates an event fired by a SelectOption to request deselection from
- * md-select. Typically fired after `selected` changes from `true` to `false`.
- */
-export function createRequestDeselectionEvent() {
-  return new Event('request-deselection', {
-    bubbles: true,
-    composed: true,
-  });
-}
-
-/**
- * The options used to inialize SelectOptionController.
- */
-export type SelectOptionConfig = MenuItemControllerConfig;
-
-/**
- * A controller that provides most functionality and md-select compatibility for
- * an element that implements the SelectOption interface.
- */
-export class SelectOptionController implements ReactiveController {
-  private readonly menuItemController: MenuItemController;
-
-  private readonly getHeadlineElements: SelectOptionConfig['getHeadlineElements'];
-
-  private internalDisplayText: string | null = null;
-
-  private lastSelected = this.host.selected;
-
-  private firstUpdate = true;
-
-  /**
-   * The recommended role of the select option.
-   */
-  get role() {
-    return this.menuItemController.role;
-  }
-
-  /**
-   * The text that is selectable via typeahead. If not set, defaults to the
-   * innerText of the item slotted into the `"headline"` slot.
-   */
-  get typeaheadText() {
-    return this.menuItemController.typeaheadText;
-  }
-
-  setTypeaheadText(text: string) {
-    this.menuItemController.setTypeaheadText(text);
-  }
-
-  /**
-   * The text that is displayed in the select field when selected. If not set,
-   * defaults to the textContent of the item slotted into the `"headline"` slot.
-   */
-  get displayText() {
-    if (this.internalDisplayText !== null) {
-      return this.internalDisplayText;
-    }
-
-    const headlineElements = this.getHeadlineElements();
-
-    const textParts: string[] = [];
-    headlineElements.forEach(headlineElement => {
-      if (headlineElement.textContent && headlineElement.textContent.trim()) {
-        textParts.push(headlineElement.textContent.trim());
-      }
-    });
-
-    return textParts.join(' ');
-  }
-
-  setDisplayText(text: string) {
-    this.internalDisplayText = text;
-  }
-
-  /**
-   * @param host The SelectOption in which to attach this controller to.
-   * @param config The object that configures this controller's behavior.
-   */
-  constructor(
-    private readonly host: ReactiveControllerHost & SelectOption,
-    config: SelectOptionConfig
-  ) {
-    this.menuItemController = new MenuItemController(host, config);
-    this.getHeadlineElements = config.getHeadlineElements;
-    host.addController(this);
-  }
-
-  hostUpdate() {
-    if (this.lastSelected !== this.host.selected) {
-      this.host.ariaSelected = this.host.selected ? 'true' : 'false';
-    }
-  }
-
-  hostUpdated() {
-    // Do not dispatch event on first update / boot-up.
-    if (this.lastSelected !== this.host.selected && !this.firstUpdate) {
-      // This section is really useful for when the user sets selected on the
-      // option programmatically. Most other cases (click and keyboard) are
-      // handled by md-select because it needs to coordinate the
-      // single-selection behavior.
-      if (this.host.selected) {
-        this.host.dispatchEvent(createRequestSelectionEvent());
-      } else {
-        this.host.dispatchEvent(createRequestDeselectionEvent());
-      }
-    }
-
-    this.lastSelected = this.host.selected;
-    this.firstUpdate = false;
-  }
-
-  /**
-   * Bind this click listener to the interactive element. Handles closing the
-   * menu.
-   */
-  onClick = () => {
-    this.menuItemController.onClick();
-  };
-
-  /**
-   * Bind this click listener to the interactive element. Handles closing the
-   * menu.
-   */
-  onKeydown = (e: KeyboardEvent) => {
-    this.menuItemController.onKeydown(e);
-  };
-}