@daikin-oss/design-system-web-components 1.1.0 → 1.3.0-next.2

package/dist/es-dev/components/combobox/daikin-combobox.js

@@ -0,0 +1,605 @@
+import { flip, offset, size } from "@floating-ui/dom";
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, nothing, html } from "lit";
+import { property, state, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
+import { ClickOutsideController } from "../../controllers/click-outside.js";
+import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
+import tailwindStyles from "../../tailwind.css.js";
+import { isSimpleKeyEvent } from "../../utils/is-simple-key.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaInput = cva(
+  [
+    "flex",
+    "justify-between",
+    "items-center",
+    "gap-2",
+    "w-full",
+    "h-full",
+    "min-h-12",
+    "bg-ddt-color-common-background-default",
+    "py-3",
+    "pl-4",
+    "pr-16",
+    "rounded",
+    "overflow-hidden",
+    "font-daikinSerif",
+    "text-left",
+    "leading-[130%]",
+    "relative",
+    "outline",
+    "outline-1",
+    "-outline-offset-1",
+    "whitespace-nowrap",
+    "text-ellipsis",
+    "focus-visible:outline-2",
+    "focus-visible:-outline-offset-2",
+    "enabled:outline-[--color-base]",
+    "disabled:text-ddt-color-common-disabled",
+    "disabled:outline-ddt-color-common-disabled",
+    "enabled:after:text-ddt-color-common-text-primary",
+    "disabled:after:text-ddt-color-common-disabled",
+    "enabled:hover:bg-ddt-color-common-surface-hover",
+    "enabled:active:bg-ddt-color-common-surface-press"
+  ],
+  {
+    variants: {
+      error: {
+        false: [
+          "var-color-ddt-color-common-neutral-default/color-base",
+          "hover:var-color-ddt-color-common-neutral-hover/color-base",
+          "focus-visible:var-color-ddt-color-common-border-focus/color-base"
+        ],
+        true: ["var-color-ddt-color-common-danger-default/color-base"]
+      },
+      placeholder: {
+        false: ["text-ddt-color-common-text-primary"],
+        true: ["text-ddt-color-common-text-secondary"]
+      }
+    }
+  }
+);
+const cvaOption = cva(
+  [
+    "flex",
+    "items-center",
+    "gap-1",
+    "size-full",
+    "min-h-12",
+    "p-3",
+    "font-daikinSerif",
+    "leading-[130%]",
+    "text-left",
+    "relative",
+    "data-[focus]:outline",
+    "data-[focus]:outline-2",
+    "data-[focus]:-outline-offset-2",
+    "data-[focus]:outline-ddt-color-common-border-focus"
+  ],
+  {
+    variants: {
+      selected: {
+        false: [
+          "var-color-ddt-color-common-background-default/color-primary",
+          "hover:var-color-ddt-color-common-surface-hover/color-primary",
+          "active:var-color-ddt-color-common-surface-press/color-primary"
+        ],
+        true: [
+          "var-color-ddt-color-common-surface-selected-default/color-primary",
+          "hover:var-color-ddt-color-common-surface-selected-hover/color-primary",
+          "active:var-color-ddt-color-common-surface-selected-press/color-primary",
+          "after:i-daikin-dropdown-check",
+          "after:size-6",
+          "after:flex-none",
+          "justify-between"
+        ]
+      },
+      disabled: {
+        false: [
+          "text-ddt-color-common-text-primary",
+          "bg-[--color-primary]",
+          "cursor-pointer"
+        ],
+        true: [
+          "text-ddt-color-common-disabled",
+          "bg-ddt-color-common-background-default"
+        ]
+      }
+    }
+  }
+);
+const cvaArrow = cva(
+  [
+    "i-daikin-chevron-down",
+    "size-6",
+    "flex-shrink-0",
+    "z-10",
+    "pointer-events-auto"
+  ],
+  {
+    variants: {
+      open: {
+        false: [],
+        true: ["scale-y-[-1]"]
+      },
+      disabled: {
+        false: ["cursor-pointer", "text-ddt-color-common-text-primary"],
+        true: ["text-ddt-color-common-disabled", "pointer-events-none"]
+      }
+    }
+  }
+);
+const floatingPositionOptions = {
+  placement: "bottom",
+  middleware: [
+    flip({ fallbackStrategy: "initialPlacement" }),
+    offset({ mainAxis: 0 }),
+    size({
+      apply({ rects, elements }) {
+        elements.floating.style.setProperty(
+          "--floating-width",
+          `${rects.reference.width}px`
+        );
+      }
+    })
+  ]
+};
+function getItemLabel(item) {
+  return typeof item === "string" ? item : item.label;
+}
+function getItemValue(item) {
+  if (typeof item === "string") {
+    return item;
+  }
+  return item.value ?? item.label;
+}
+function isItemDisabled(item) {
+  return typeof item === "string" ? false : item.disabled ?? false;
+}
+function defaultFilterFn(items, value) {
+  if (!value) {
+    return items;
+  }
+  const searchValue = value.toLowerCase();
+  return items.filter((item) => {
+    const label = getItemLabel(item);
+    return label.toLowerCase().includes(searchValue);
+  });
+}
+let DaikinCombobox = class extends DDSFormElement {
+  constructor() {
+    super(...arguments);
+    this.placeholder = null;
+    this.disabled = false;
+    this.required = false;
+    this.error = false;
+    this.open = false;
+    this.items = [];
+    this._viewItems = [];
+    this._currentFocusItemIndex = null;
+    this.filter = defaultFilterFn;
+    this._label = null;
+    this._autoUpdateController = new FloatingUIAutoUpdateController(this);
+    this._clickOutsideController = new ClickOutsideController(
+      this,
+      this._onClickOutside
+    );
+  }
+  _onClickOutside() {
+    this._closePopup();
+  }
+  _moveFocusByKeydown(moveOffset) {
+    if (!this.open) {
+      this._autoUpdateController.setTriggerContext({
+        trigger: "keyboard"
+      });
+      this._synchronizeShowItems();
+      this.open = true;
+      return;
+    }
+    const enabledItemsWithIndices = this._viewItems.map((item, index) => ({ item, originalIndex: index })).filter(({ item }) => !isItemDisabled(item));
+    if (!enabledItemsWithIndices.length) {
+      return;
+    }
+    const focusedItemIndex = this._currentFocusItemIndex;
+    if (focusedItemIndex === null) {
+      const targetItem = moveOffset > 0 ? enabledItemsWithIndices[0] : enabledItemsWithIndices[enabledItemsWithIndices.length - 1];
+      this._currentFocusItemIndex = targetItem.originalIndex;
+      return;
+    }
+    const currentEnabledIndex = enabledItemsWithIndices.findIndex(
+      ({ originalIndex }) => originalIndex === focusedItemIndex
+    );
+    if (currentEnabledIndex === -1) {
+      this._currentFocusItemIndex = enabledItemsWithIndices[0].originalIndex;
+      return;
+    }
+    let nextEnabledIndex;
+    if (Math.abs(moveOffset) === 1) {
+      nextEnabledIndex = (currentEnabledIndex + moveOffset + enabledItemsWithIndices.length) % enabledItemsWithIndices.length;
+    } else {
+      nextEnabledIndex = Math.min(
+        Math.max(currentEnabledIndex + moveOffset, 0),
+        enabledItemsWithIndices.length - 1
+      );
+    }
+    this._currentFocusItemIndex = enabledItemsWithIndices[nextEnabledIndex].originalIndex;
+  }
+  _updateFormValue() {
+    this.setFormValue(this.value);
+  }
+  _closePopup() {
+    this.open = false;
+    this._currentFocusItemIndex = null;
+  }
+  _handleFocusOut(event) {
+    if (!event.relatedTarget) {
+      this._closePopup();
+    }
+  }
+  _handleClick() {
+    if (this.disabled) {
+      return;
+    }
+    this._autoUpdateController.setTriggerContext({
+      trigger: "mouse"
+    });
+    this._synchronizeShowItems();
+    this.open = !this.open;
+    if (!this.open) {
+      this._currentFocusItemIndex = null;
+    }
+  }
+  _handleArrowClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+    this._handleClick();
+  }
+  _handleClickItem(item) {
+    const value = getItemValue(item);
+    this._handleClick();
+    this.value = value;
+    this.dispatchEvent(
+      new Event("input", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true
+      })
+    );
+  }
+  _handleKeyDown(event) {
+    if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this._autoUpdateController.setTriggerContext({
+          trigger: "mouse"
+        });
+        this._synchronizeShowItems();
+        this.open = true;
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        this._closePopup();
+      }
+      return;
+    }
+    if (event.key === "Enter" && this.open) {
+      const focusedItemIndex = this._currentFocusItemIndex;
+      if (focusedItemIndex !== null) {
+        const item = this._viewItems[focusedItemIndex];
+        if (item) {
+          this._handleClickItem(item);
+        }
+      }
+    }
+    if (!isSimpleKeyEvent(event)) {
+      return;
+    }
+    const operation = {
+      ArrowDown: "down",
+      ArrowUp: "up",
+      PageDown: "pageDown",
+      PageUp: "pageUp",
+      Escape: "close"
+    }[event.key];
+    switch (operation) {
+      case "down":
+      case "up":
+        event.preventDefault();
+        this._moveFocusByKeydown(operation === "up" ? -1 : 1);
+        break;
+      case "pageDown":
+      case "pageUp":
+        event.preventDefault();
+        this._moveFocusByKeydown(operation === "pageUp" ? -10 : 10);
+        break;
+      case "close":
+        event.preventDefault();
+        if (this.open) {
+          this._closePopup();
+        } else {
+          this._handleClearClick();
+        }
+        break;
+    }
+  }
+  /**
+   * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
+   * The combobox menu opens after the Floating UI has finished calculating its position, so there is a slight time lag between the change to `this.open` and the actual display.
+   * Since the focus cannot be moved until the element is displayed on the screen, the focus is moved to the item after receiving the completion of the Floating UI position calculation here.
+   */
+  _handleFloatingReady(event) {
+    const detail = event.detail;
+    const eventType = detail == null ? void 0 : detail.trigger;
+    if (eventType === "mouse") {
+      return;
+    }
+    const firstEnabledIndex = this._viewItems.findIndex(
+      (item) => !isItemDisabled(item)
+    );
+    if (firstEnabledIndex === -1) {
+      return;
+    }
+    if (this._currentFocusItemIndex !== null) {
+      return;
+    } else {
+      this._currentFocusItemIndex = firstEnabledIndex;
+    }
+    this._autoUpdateController.clearTriggerContext();
+  }
+  /**
+   * Handles the clear button click event.
+   * Clears the current value and triggers form value update.
+   */
+  _handleClearClick() {
+    this.value = "";
+    this.dispatchEvent(
+      new Event("input", {
+        bubbles: true,
+        composed: true
+      })
+    );
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true
+      })
+    );
+  }
+  /**
+   * Synchronizes the display items based on the current filter state.
+   * @param type - Whether to show all items or apply filtering
+   */
+  _synchronizeShowItems(type = "all") {
+    this._viewItems = type === "all" ? this.items : this.filter(this.items, this.value);
+  }
+  /**
+   * Handles input events from the combobox input field.
+   * Updates the value, applies filtering, and opens dropdown if matches are found.
+   */
+  _handleInput(event) {
+    this.value = event.target.value;
+    this._synchronizeShowItems("filtered");
+    if (this._viewItems.length > 0) {
+      this.open = true;
+    }
+  }
+  /**
+   * Handles change events from the combobox input field.
+   * Dispatches a custom change event when the input value changes and loses focus.
+   */
+  _handleChange() {
+    this.dispatchEvent(
+      new Event("change", {
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    return html`<div class="w-full relative" @keydown=${this._handleKeyDown}>
+      <span class="sr-only" aria-live="polite"
+        >${`${this._viewItems.length} available results`}</span
+      >
+      <div class="w-full relative">
+        <input
+          class=${cvaInput({
+      error: this.error,
+      placeholder: !this.value || this.value.length === 0
+    })}
+          role="combobox"
+          placeholder=${ifDefined(this.placeholder ?? void 0)}
+          name=${ifDefined(this.name)}
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          aria-label=${ifDefined(this._label ?? void 0)}
+          aria-expanded=${this.open && !this.disabled}
+          aria-disabled=${this.disabled}
+          aria-controls="combobox-items"
+          aria-autocomplete="list"
+          aria-required=${this.required}
+          aria-haspopup="listbox"
+          aria-activedescendant=${ifDefined(
+      this._currentFocusItemIndex !== null ? `combobox-item-${this._currentFocusItemIndex}` : void 0
+    )}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+          @click=${this._handleClick}
+          @focusout=${this._handleFocusOut}
+          ${this._autoUpdateController.refReference()}
+        />
+        <div
+          class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1"
+        >
+          ${!!this.value && !!this.value.length ? html`<daikin-icon-button
+                class="size-6 flex-shrink-0"
+                color="neutral"
+                variant="ghost"
+                ?disabled=${this.disabled}
+                button-aria-label="Clear"
+                icon="close"
+                @click=${this._handleClearClick}
+                @focusout=${this._handleFocusOut}
+              >
+                <span class="i-daikin-close"></span>
+              </daikin-icon-button>` : nothing}
+          <span
+            class=${cvaArrow({ open: this.open, disabled: this.disabled })}
+            button-aria-label=${this.open ? "Close" : "Open"}
+            @mousedown=${this._handleArrowClick}
+            @keydown=${this._handleKeyDown}
+          >
+          </span>
+        </div>
+      </div>
+      <div
+        id="combobox-items"
+        popover="manual"
+        class="flex flex-col overflow-hidden rounded border border-ddt-color-divider floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] opacity-1 transition-[opacity] max-w-min"
+        @floating-ready=${this._handleFloatingReady}
+        ${this._autoUpdateController.refFloating()}
+      >
+        <div
+          class="flex-1 overflow-y-auto break-all"
+          aria-label=${ifDefined(this._label ?? void 0)}
+          role="listbox"
+        >
+          ${repeat(this._viewItems, (item, index) => {
+      const label = getItemLabel(item);
+      const value = getItemValue(item);
+      const disabled = isItemDisabled(item);
+      return html`<button
+              type="button"
+              class=${cvaOption({
+        selected: value === this.value,
+        disabled
+      })}
+              id=${`combobox-item-${index}`}
+              data-value=${value}
+              role="option"
+              aria-selected=${value === this.value}
+              tabindex="-1"
+              ?disabled=${disabled || this.disabled}
+              ?data-focus=${this._currentFocusItemIndex === index}
+              @click=${() => this._handleClickItem(item)}
+            >
+              ${label}
+            </button>`;
+    })}
+        </div>
+      </div>
+      ${// Activate auto update only when the combobox is open.
+    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
+    this._autoUpdateController.directive(
+      floatingPositionOptions,
+      this.open && !this.disabled
+    )}
+      ${// Listen to click outside only when the combobox is open.
+    this._clickOutsideController.directive(this.open && !this.disabled)}
+    </div>`;
+  }
+  /**
+   * Focuses on the input element.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._input) == null ? void 0 : _a.focus(options);
+  }
+  updated(changedProperties) {
+    var _a;
+    if (changedProperties.has("items")) {
+      this._synchronizeShowItems();
+    }
+    if (changedProperties.has("value")) {
+      this._updateFormValue();
+    }
+    if (changedProperties.has("open") || changedProperties.has("disabled")) {
+      (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(
+        this.open && !this.disabled
+      );
+      if (changedProperties.get("open") && !this.open && !this.disabled) {
+        this.focus();
+      }
+    }
+  }
+  /**
+   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+   * @private
+   */
+  reflectInputGroup(inputGroup) {
+    const isError = !inputGroup.disabled && !!inputGroup.error;
+    this.disabled = !!inputGroup.disabled;
+    this.required = !!inputGroup.required;
+    this.error = isError;
+    this._label = inputGroup.label;
+  }
+};
+DaikinCombobox.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    ::slotted {
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinCombobox.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCombobox.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCombobox.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCombobox.prototype, "error", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCombobox.prototype, "open", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], DaikinCombobox.prototype, "items", 2);
+__decorateClass([
+  state()
+], DaikinCombobox.prototype, "_viewItems", 2);
+__decorateClass([
+  state()
+], DaikinCombobox.prototype, "_currentFocusItemIndex", 2);
+__decorateClass([
+  property({ attribute: false })
+], DaikinCombobox.prototype, "filter", 2);
+__decorateClass([
+  query("input")
+], DaikinCombobox.prototype, "_input", 2);
+__decorateClass([
+  state()
+], DaikinCombobox.prototype, "_label", 2);
+DaikinCombobox = __decorateClass([
+  ddsElement("daikin-combobox")
+], DaikinCombobox);
+export {
+  DaikinCombobox,
+  defaultFilterFn
+};

package/dist/es-dev/components/combobox/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-combobox.js";

package/dist/es-dev/components/combobox/index.js

@@ -0,0 +1,5 @@
+import { DaikinCombobox, defaultFilterFn } from "./daikin-combobox.js";
+export {
+  DaikinCombobox,
+  defaultFilterFn
+};