@digital-realty/ix-select 1.0.1

package/src/selectoption/IxSelectOption.ts

@@ -0,0 +1,192 @@
+/**
+ * @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

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

package/src/selectoption/selectOptionController.ts

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

package/test/ix-select.test.ts

@@ -0,0 +1,79 @@
+import { html } from 'lit';
+import { fixture, expect } from '@open-wc/testing';
+import { IxSelect } from '../src/IxSelect.js';
+import '../src/ix-select.js';
+
+describe('IxSelect', () => {
+  it('should show the outlined field by default', async () => {
+    const el = await fixture<IxSelect>(html`<ix-select></ix-select>`);
+
+    expect(el.materialRoot.tagName.toLowerCase()).to.be.string(
+      'md-outlined-select'
+    );
+  });
+});
+
+describe('IxSelect', () => {
+  it('should render the appearance specified by property', async () => {
+    const el = await fixture<IxSelect>(
+      html`<ix-select appearance="filled"></ix-select>`
+    );
+
+    expect(el.materialRoot.tagName.toLowerCase()).to.be.string(
+      'md-filled-select'
+    );
+  });
+});
+
+describe('IxSelect', () => {
+  it('form should submit with data', async () => {
+    let formData: FormData;
+
+    const select = await fixture<IxSelect>(html`
+      <ix-select name="theForm" label="theLabel">
+        <ix-select-option value="1">
+          <div slot="headline">Test Value</div>
+        </ix-select-option>
+      </ix-select>
+    `);
+
+    const handleSubmit = (e: Event & { target: HTMLFormElement }) => {
+      e.preventDefault();
+      formData = new FormData(e.target);
+    };
+    const form = await fixture<HTMLFormElement>(html`
+      <form @submit=${handleSubmit}>
+        ${select}
+        <button type="submit">Submit</button>
+      </form>
+    `);
+
+    form.addEventListener('submit', () => {
+      formData.forEach((value, key) => console.log(`${key}: ${value}`));
+    });
+
+    select.materialRoot.options[0].shadowRoot?.querySelector('li')?.click();
+
+    // Wait for 'request-selection' event to propogate to select after dropdown item 'clicked'
+    // Form will not contain any data if we submit before event is received
+    // eslint-disable-next-line no-use-before-define
+    await waitForEvent(select, 'request-selection');
+
+    form.querySelector('button')?.click();
+
+    expect(
+      formData!.get('theForm'),
+      'Form data did not contain expected result'
+    ).is.string('1');
+  });
+});
+
+function waitForEvent(target: EventTarget, eventName: string): Promise<Event> {
+  return new Promise(resolve => {
+    const handler = (event: Event) => {
+      resolve(event);
+      target.removeEventListener(eventName, handler);
+    };
+    target.addEventListener(eventName, handler);
+  });
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true
+  },
+  "include": ["**/*.ts"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});