@daikin-oss/design-system-web-components 1.0.0 → 1.2.0

package/dist/es-dev/components/dropdown/daikin-dropdown.d.ts

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import { DaikinInputGroup } from "../input-group/index.js";
 /**
  * A dropdown list component.
@@ -27,15 +27,8 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * </daikin-dropdown>
  * ```
  */
-export declare class DaikinDropdown extends DDSElement {
+export declare class DaikinDropdown extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
-    static readonly formAssociated = true;
-    private _internals;
-    /**
-     * Form value of the dropdown.
-     * `null` if not selected.
-     */
-    value: string | null;
     /**
      * Placeholder text of the dropdown.
      */
@@ -56,6 +49,22 @@ export declare class DaikinDropdown extends DDSElement {
      * Whether the dropdown menu is opened.
      */
     open: boolean;
+    /**
+     * Whether the dropdown menu is supports multiple selections.
+     */
+    multiple: boolean;
+    /**
+     * An array of `value` s for the currently selected option.
+     *
+     * This can be used regardless of the value of `multiple`, but if `multiple` is `true`, always use this instead of `value`.
+     * If `multiple` is `false`, the second and subsequent items will be deleted.
+     */
+    selectedOptions: string[];
+    /**
+     * Specifies the maximum number of items to display without omission in the label when `multiple` is `true`.
+     * Specify `null` to display all selected items without omission.
+     */
+    maxLabels: number | null;
     private readonly _items;
     private _button;
     /**
@@ -63,8 +72,8 @@ export declare class DaikinDropdown extends DDSElement {
      * Set automatically by `reflectInputGroup` method.
      */
     private _label;
-    private _hasSelectedItem;
-    private _selectedItemLabel;
+    private get _selectionLabels();
+    private _initialUpdateCompleted;
     private _autoUpdateController;
     private _clickOutsideController;
     /**
@@ -72,18 +81,33 @@ export declare class DaikinDropdown extends DDSElement {
      * The next time the dropdown opens, the focus will be moved to this element.
      */
     private _lastFocusedItem;
-    private _updateFormValue;
+    private _dropdownRef;
     private _onClickOutside;
-    private _reflectItemsAndLabel;
-    private _handleClick;
     private _searchItem;
-    private _handleKeyDownEscape;
     private _moveFocus;
-    private _handleKeyDown;
+    private _updateFormValue;
+    private _updateItemsSelectable;
+    private _updateValueBySelectedOptions;
+    private _updateSelectedOptionsByValue;
     /**
-     * Handle `select` event from `daikin-dropdown-item`.
+     * Handling for when an option is selected.
+     * If multiple selection is enabled, the specified option is added to or removed from the array of selected options.
+     * If multiple selection is disabled, the current value is set to the specified option. The selection is not cleared.
+     *
+     * @param value The value of selected option.
      */
-    private _handleSelect;
+    private _handleSelectOption;
+    private _handleFocusOut;
+    /**
+     * Removes the last selected option.
+     *
+     * If multiple selection is enabled, remove the last selected option and the array will eventually become empty.
+     * If multiple selection is disabled, directly empty the selected options.
+     */
+    private _removeLastSelection;
+    private _handleClick;
+    private _handleKeyDown;
+    private _handleKeyDownEscape;
     /**
      * Handle `focusin` event to remember last focused item.
      */
@@ -94,12 +118,18 @@ export declare class DaikinDropdown extends DDSElement {
      * 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.
      */
     private _handleFloatingReady;
+    /**
+     * Handle `select` event from `daikin-dropdown-item`.
+     */
+    private _handleSelect;
+    private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
     /**
      * Focuses on the inner button.
      * @param options focus options
      */
     focus(options?: FocusOptions): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues<this>): void;
     /**
      * This method is used by `daikin-input-group` to reflect it's attributes to this component.

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

@@ -1,14 +1,18 @@
 import { flip, offset, size } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { DDSElement } from "../../base/dds-element.js";
+import { createRef, ref } from "lit/directives/ref.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";
+import "../dropdown-item/daikin-dropdown-item.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -22,36 +26,35 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaButton = cva(
   [
     "flex",
+    "justify-between",
     "items-center",
     "gap-2",
     "w-full",
     "h-full",
     "min-h-12",
     "bg-ddt-color-common-background-default",
-    "p-3",
-    "border",
-    "border-[--color-base]",
+    "py-3",
+    "pl-4",
+    "pr-3",
     "rounded",
     "overflow-hidden",
     "font-daikinSerif",
     "text-left",
-    "leading-5",
+    "leading-[130%]",
     "relative",
     "outline",
-    "outline-0",
-    "-outline-offset-2",
+    "outline-1",
+    "-outline-offset-1",
+    "break-all",
     "focus-visible:outline-2",
-    "focus-visible:outline-[--color-focus]",
+    "focus-visible:-outline-offset-2",
+    "enabled:outline-[--color-base]",
     "disabled:text-ddt-color-common-disabled",
-    "disabled:border-ddt-color-common-disabled",
+    "disabled:outline-ddt-color-common-disabled",
     "after:i-daikin-dropdown-chevron-down",
-    "after:w-6",
-    "after:h-6",
-    "after:absolute",
-    "after:m-auto",
-    "after:top-0",
-    "after:bottom-0",
-    "after:right-3",
+    "after:size-6",
+    "after:flex-none",
+    "after:ml-auto",
     "enabled:after:text-ddt-color-common-text-primary",
     "disabled:after:text-ddt-color-common-disabled"
   ],
@@ -62,17 +65,19 @@ const cvaButton = cva(
           "enabled:hover:bg-ddt-color-common-surface-hover",
           "enabled:active:bg-ddt-color-common-surface-press"
         ],
-        true: ["enabled:bg-ddt-color-common-surface-press"]
+        true: [
+          "enabled:bg-ddt-color-common-surface-press",
+          "after:scale-y-[-1]"
+        ]
       },
       error: {
         false: [
           "var-color-ddt-color-common-neutral-default/color-base",
-          "var-color-ddt-color-common-border-focus/color-focus"
+          "hover:var-color-ddt-color-common-neutral-hover/color-base",
+          "active:var-color-ddt-color-common-neutral-press/color-base",
+          "focus-visible:var-color-ddt-color-common-border-focus/color-base"
         ],
-        true: [
-          "var-color-ddt-color-common-danger-default/color-base",
-          "var-color-ddt-color-common-danger-default/color-focus"
-        ]
+        true: ["var-color-ddt-color-common-danger-default/color-base"]
       },
       placeholder: {
         false: ["text-ddt-color-common-text-primary"],
@@ -96,47 +101,39 @@ const floatingPositionOptions = {
     })
   ]
 };
-let DaikinDropdown = class extends DDSElement {
+let DaikinDropdown = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this._internals = this.attachInternals();
-    this.value = null;
     this.placeholder = "";
     this.disabled = false;
     this.required = false;
     this.error = false;
     this.open = false;
+    this.multiple = false;
+    this.selectedOptions = [];
+    this.maxLabels = null;
     this._label = null;
-    this._hasSelectedItem = false;
-    this._selectedItemLabel = "";
+    this._initialUpdateCompleted = false;
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._clickOutsideController = new ClickOutsideController(
       this,
       this._onClickOutside
     );
     this._lastFocusedItem = null;
+    this._dropdownRef = createRef();
   }
-  _updateFormValue() {
-    this._internals.setFormValue(this.value);
+  get _selectionLabels() {
+    const items = this._items;
+    return this.selectedOptions.map(
+      (value) => {
+        var _a;
+        return ((_a = items.find((item) => item.value === value)) == null ? void 0 : _a.textContent) ?? "";
+      }
+    );
   }
   _onClickOutside() {
     this.open = false;
   }
-  _reflectItemsAndLabel() {
-    const items = this._items;
-    const selectedItem = items.find((item) => item.value === this.value);
-    for (const item of items) {
-      item.selected = item === selectedItem;
-    }
-    this._hasSelectedItem = !!selectedItem;
-    this._selectedItemLabel = (selectedItem == null ? void 0 : selectedItem.textContent) ?? "";
-  }
-  _handleClick() {
-    if (this.disabled) {
-      return;
-    }
-    this.open = !this.open;
-  }
   _searchItem(prefix) {
     const items = this._items.filter(
       (item) => {
@@ -158,35 +155,88 @@ let DaikinDropdown = class extends DDSElement {
       this.open = true;
     }
   }
-  _handleKeyDownEscape() {
-    if (this.open) {
-      this.open = false;
-    } else {
-      this.value = null;
-    }
-  }
   _moveFocus(moveOffset) {
     if (!this.open) {
       this.open = true;
       return;
     }
-    const items = this._items;
+    const items = this._items.filter(({ disabled }) => !disabled);
     const activeElement = document.activeElement;
-    const focusedItemIndex = activeElement ? items.findIndex((item) => item.contains(activeElement)) : -1;
+    const focusedItemIndex = activeElement ? items.findIndex((item2) => item2.contains(activeElement)) : -1;
     if (focusedItemIndex === -1) {
       moveOffset = 1;
     }
-    for (let index = focusedItemIndex + moveOffset, i = 0; i < items.length; index += moveOffset, i++) {
-      index = (index + items.length) % items.length;
-      const item = items[index];
-      if (item.disabled) {
-        continue;
+    const item = items[Math.max(0, Math.min(focusedItemIndex + moveOffset, items.length - 1))];
+    item.focus();
+  }
+  _updateFormValue() {
+    this.setFormValue(this.value);
+  }
+  _updateItemsSelectable() {
+    for (const item of this._items) {
+      item.selectable = this.multiple;
+    }
+  }
+  _updateValueBySelectedOptions() {
+    this.value = this.selectedOptions.at(-1) ?? "";
+  }
+  _updateSelectedOptionsByValue() {
+    this.selectedOptions = this.value ? [this.value] : [];
+  }
+  /**
+   * Handling for when an option is selected.
+   * If multiple selection is enabled, the specified option is added to or removed from the array of selected options.
+   * If multiple selection is disabled, the current value is set to the specified option. The selection is not cleared.
+   *
+   * @param value The value of selected option.
+   */
+  _handleSelectOption(value) {
+    this.value = value;
+    this.selectedOptions = this.multiple ? this.selectedOptions.includes(value) ? this.selectedOptions.filter((option) => option != value) : [...this.selectedOptions, value] : [value];
+  }
+  _handleFocusOut(event) {
+    if (!event.relatedTarget) {
+      if (!this.multiple && this._lastFocusedItem) {
+        this._handleSelectOption(this._lastFocusedItem.value);
       }
-      item.focus();
-      break;
+      this.open = false;
     }
   }
+  /**
+   * Removes the last selected option.
+   *
+   * If multiple selection is enabled, remove the last selected option and the array will eventually become empty.
+   * If multiple selection is disabled, directly empty the selected options.
+   */
+  _removeLastSelection() {
+    if (this.multiple) {
+      this.selectedOptions = this.selectedOptions.slice(0, -1);
+      this.value = this.selectedOptions.at(-1) ?? "";
+    } else {
+      this.selectedOptions = [];
+      this.value = "";
+    }
+  }
+  _handleClick() {
+    if (this.disabled) {
+      return;
+    }
+    this.open = !this.open;
+  }
   _handleKeyDown(event) {
+    if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this.open = true;
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        this.open = false;
+      }
+      return;
+    }
+    if (!isSimpleKeyEvent(event)) {
+      return;
+    }
     const printableCharacter = event.key.trim().length === 1 ? event.key : null;
     if (printableCharacter) {
       event.preventDefault();
@@ -196,6 +246,8 @@ let DaikinDropdown = class extends DDSElement {
     const operation = {
       ArrowDown: "down",
       ArrowUp: "up",
+      PageDown: "pageDown",
+      PageUp: "pageUp",
       Escape: "close"
     }[event.key];
     switch (operation) {
@@ -204,25 +256,23 @@ let DaikinDropdown = class extends DDSElement {
         event.preventDefault();
         this._moveFocus(operation === "up" ? -1 : 1);
         break;
+      case "pageDown":
+      case "pageUp":
+        event.preventDefault();
+        this._moveFocus(operation === "pageUp" ? -10 : 10);
+        break;
       case "close":
         event.preventDefault();
         this._handleKeyDownEscape();
         break;
     }
   }
-  /**
-   * Handle `select` event from `daikin-dropdown-item`.
-   */
-  _handleSelect(event) {
-    const target = event.target;
-    if (!target || !this._items.includes(target)) {
-      return;
+  _handleKeyDownEscape() {
+    if (this.open) {
+      this.open = false;
+    } else {
+      this._removeLastSelection();
     }
-    this._hasSelectedItem = true;
-    this._selectedItemLabel = target.textContent ?? "";
-    this.value = target.value;
-    this.open = false;
-    this.dispatchEvent(new Event("change"));
   }
   /**
    * Handle `focusin` event to remember last focused item.
@@ -244,14 +294,28 @@ let DaikinDropdown = class extends DDSElement {
     const item = items.find((item2) => item2 === this._lastFocusedItem) ?? items.find((item2) => item2.value === this.value) ?? items.at(0);
     item == null ? void 0 : item.focus();
   }
+  /**
+   * Handle `select` event from `daikin-dropdown-item`.
+   */
+  _handleSelect(event) {
+    this._handleSelectOption(event.target.value);
+    if (!this.multiple) {
+      this.open = false;
+    }
+    this.dispatchEvent(new Event("change"));
+  }
+  _handleSlotChange() {
+    this._updateItemsSelectable();
+  }
   render() {
     return html`<div class="w-full relative" @keydown=${this._handleKeyDown}>
       <button
+        ${ref(this._dropdownRef)}
         type="button"
         class=${cvaButton({
       open: this.open,
       error: this.error,
-      placeholder: !this._hasSelectedItem
+      placeholder: !this.selectedOptions.length
     })}
         ?disabled=${this.disabled}
         role="combobox"
@@ -261,23 +325,28 @@ let DaikinDropdown = class extends DDSElement {
         aria-controls="dropdown-items"
         aria-autocomplete="list"
         aria-required=${this.required}
+        aria-haspopup="listbox"
         @click=${this._handleClick}
         ${this._autoUpdateController.refReference()}
       >
-        ${this._hasSelectedItem ? this._selectedItemLabel : this.placeholder}
+        <span class="truncate">
+          ${this.selectedOptions.length ? this.multiple && this.selectedOptions.length > (this.maxLabels ?? 0) ? this.selectedOptions.length === 1 ? `one item selected` : `${this.selectedOptions.length} items selected` : this._selectionLabels.join(", ") : this.placeholder}
+        </span>
       </button>
       <div
         id="dropdown-items"
         popover
-        class="floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] overflow-y-auto opacity-1 transition-[opacity] rounded shadow-dropdown"
+        class="floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider overflow-y-auto opacity-1 transition-[opacity] rounded max-w-min break-all"
         aria-label=${ifDefined(this._label ?? void 0)}
         role="listbox"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >
         <slot
+          @slotchange=${this._handleSlotChange}
           @select=${this._handleSelect}
           @focusin=${this._handleFocusIn}
+          @focusout=${this._handleFocusOut}
         ></slot>
       </div>
       ${// Activate auto update only when the dropdown is open.
@@ -298,11 +367,29 @@ let DaikinDropdown = class extends DDSElement {
     var _a;
     (_a = this._button) == null ? void 0 : _a.focus(options);
   }
+  willUpdate(changedProperties) {
+    if (!this._initialUpdateCompleted) {
+      if (!!this.selectedOptions.length && (!this.value || !this.selectedOptions.includes(this.value))) {
+        this._updateValueBySelectedOptions();
+      } else if (!!this.value && !this.selectedOptions.length) {
+        this.selectedOptions = [this.value];
+      }
+      this._initialUpdateCompleted = true;
+      return;
+    }
+    const hasChangedValue = changedProperties.has("value");
+    const hasChangedSelectedOptions = changedProperties.has("selectedOptions");
+    if (hasChangedValue && !hasChangedSelectedOptions) {
+      this._updateSelectedOptionsByValue();
+    }
+    if (!hasChangedValue && hasChangedSelectedOptions) {
+      this._updateValueBySelectedOptions();
+    }
+  }
   updated(changedProperties) {
     var _a;
     if (changedProperties.has("value")) {
       this._updateFormValue();
-      this._reflectItemsAndLabel();
     }
     if (changedProperties.has("open") || changedProperties.has("disabled")) {
       (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(
@@ -312,6 +399,15 @@ let DaikinDropdown = class extends DDSElement {
         this.focus();
       }
     }
+    if (changedProperties.has("selectedOptions")) {
+      const items = this._items;
+      for (const item of items) {
+        item.selected = this.selectedOptions.includes(item.value);
+      }
+    }
+    if (changedProperties.has("multiple")) {
+      this._updateItemsSelectable();
+    }
   }
   /**
    * This method is used by `daikin-input-group` to reflect it's attributes to this component.
@@ -337,10 +433,6 @@ DaikinDropdown.styles = css`
       width: 100%;
     }
   `;
-DaikinDropdown.formAssociated = true;
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinDropdown.prototype, "value", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinDropdown.prototype, "placeholder", 2);
@@ -356,6 +448,15 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinDropdown.prototype, "open", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDropdown.prototype, "multiple", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], DaikinDropdown.prototype, "selectedOptions", 2);
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "max-labels" })
+], DaikinDropdown.prototype, "maxLabels", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-dropdown-item" })
 ], DaikinDropdown.prototype, "_items", 2);
@@ -365,12 +466,6 @@ __decorateClass([
 __decorateClass([
   state()
 ], DaikinDropdown.prototype, "_label", 2);
-__decorateClass([
-  state()
-], DaikinDropdown.prototype, "_hasSelectedItem", 2);
-__decorateClass([
-  state()
-], DaikinDropdown.prototype, "_selectedItemLabel", 2);
 DaikinDropdown = __decorateClass([
   ddsElement("daikin-dropdown")
 ], DaikinDropdown);

package/dist/es-dev/components/dropdown-item/daikin-dropdown-item.d.ts

@@ -34,8 +34,13 @@ export declare class DaikinDropdownItem extends DDSElement {
      * Set automatically by `daikin-dropdown` component.
      */
     selected: boolean;
-    private _button;
+    selectable: boolean;
+    private _focusableElement;
     private _handleClick;
+    private _handleChange;
+    private _handleKeydown;
+    private _handleMousedown;
+    private _emitSelect;
     render(): import('lit-html').TemplateResult<1>;
     /**
      * Focuses on the inner button.