@daikin-oss/design-system-web-components 0.7.0 → 1.1.0

package/dist/cjs/components/dropdown/daikin-dropdown.cjs

@@ -5,15 +5,20 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
+const ref_js = require("lit/directives/ref.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const clickOutside = require("../../controllers/click-outside.cjs");
 const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
 const tailwind = require("../../tailwind.css.cjs");
+const isSimpleKey = require("../../utils/is-simple-key.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, 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])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
@@ -21,36 +26,34 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaButton = classVarianceAuthority.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",
     "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"
   ],
@@ -61,17 +64,19 @@ const cvaButton = classVarianceAuthority.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"],
@@ -95,7 +100,7 @@ const floatingPositionOptions = {
     })
   ]
 };
-exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
+exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this._internals = this.attachInternals();
@@ -105,37 +110,31 @@ exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
     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 floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._clickOutsideController = new clickOutside.ClickOutsideController(
       this,
       this._onClickOutside
     );
     this._lastFocusedItem = null;
+    this._dropdownRef = ref_js.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) => {
@@ -157,13 +156,6 @@ exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
       this.open = true;
     }
   }
-  _handleKeyDownEscape() {
-    if (this.open) {
-      this.open = false;
-    } else {
-      this.value = null;
-    }
-  }
   _moveFocus(moveOffset) {
     if (!this.open) {
       this.open = true;
@@ -185,7 +177,56 @@ exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
       break;
     }
   }
+  _updateFormValue() {
+    this._internals.setFormValue(JSON.stringify(this.value));
+  }
+  _updateItemsSelectable() {
+    for (const item of this._items) {
+      item.selectable = this.multiple;
+    }
+  }
+  _updateValueBySelectedOptions() {
+    this.value = this.selectedOptions.at(-1) ?? null;
+  }
+  _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];
+  }
+  /**
+   * 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) ?? null;
+    } else {
+      this.selectedOptions = [];
+      this.value = null;
+    }
+  }
+  _handleClick() {
+    if (this.disabled) {
+      return;
+    }
+    this.open = !this.open;
+  }
   _handleKeyDown(event) {
+    if (!isSimpleKey.isSimpleKeyEvent(event)) {
+      return;
+    }
     const printableCharacter = event.key.trim().length === 1 ? event.key : null;
     if (printableCharacter) {
       event.preventDefault();
@@ -209,19 +250,12 @@ exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
         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.
@@ -243,14 +277,28 @@ exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
     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 lit.html`<div class="w-full relative" @keydown=${this._handleKeyDown}>
       <button
+        ${ref_js.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"
@@ -263,18 +311,19 @@ exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
         @click=${this._handleClick}
         ${this._autoUpdateController.refReference()}
       >
-        ${this._hasSelectedItem ? this._selectedItemLabel : this.placeholder}
+        ${this.selectedOptions.length ? this.multiple && this.selectedOptions.length > (this.maxLabels ?? 0) ? `${this.selectedOptions.length} items selected` : this._selectionLabels.join(", ") : this.placeholder}
       </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"
         aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
         role="listbox"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >
         <slot
+          @slotchange=${this._handleSlotChange}
           @select=${this._handleSelect}
           @focusin=${this._handleFocusIn}
         ></slot>
@@ -289,15 +338,37 @@ exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
     this._clickOutsideController.directive(this.open && !this.disabled)}
     </div>`;
   }
+  /**
+   * Focuses on the inner button.
+   * @param options focus options
+   */
   focus(options) {
     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(
@@ -307,7 +378,20 @@ exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
         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.
+   * @private
+   */
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && !!inputGroup.error;
     this.disabled = !!inputGroup.disabled;
@@ -347,6 +431,15 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "open", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinDropdown.prototype, "multiple", 2);
+__decorateClass([
+  decorators_js.property({ type: Array, attribute: false })
+], exports.DaikinDropdown.prototype, "selectedOptions", 2);
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true, attribute: "max-labels" })
+], exports.DaikinDropdown.prototype, "maxLabels", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-dropdown-item" })
 ], exports.DaikinDropdown.prototype, "_items", 2);
@@ -356,12 +449,6 @@ __decorateClass([
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinDropdown.prototype, "_label", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinDropdown.prototype, "_hasSelectedItem", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinDropdown.prototype, "_selectedItemLabel", 2);
 exports.DaikinDropdown = __decorateClass([
-  decorators_js.customElement("daikin-dropdown")
+  decorators.ddsElement("daikin-dropdown")
 ], exports.DaikinDropdown);

package/dist/cjs/components/dropdown/daikin-dropdown.d.cts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
 /**
  * A dropdown list component.
@@ -13,6 +14,11 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/dropdown/index.js";
+ * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-dropdown label="Dropdown label">
  *   <daikin-dropdown-item value="value1">Dropdown item 1</daikin-dropdown-item>
@@ -21,13 +27,16 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * </daikin-dropdown>
  * ```
  */
-export declare class DaikinDropdown extends LitElement {
+export declare class DaikinDropdown extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     static readonly formAssociated = true;
     private _internals;
     /**
      * Form value of the dropdown.
      * `null` if not selected.
+     *
+     * If `multiple` is `true`, please use `selectedOptions` instead.
+     * If multiple selection is enabled, the value set to this property will be one of the selected items, and it is not possible to predict which value will be set.
      */
     value: string | null;
     /**
@@ -50,6 +59,22 @@ export declare class DaikinDropdown extends LitElement {
      * 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;
     /**
@@ -57,8 +82,8 @@ export declare class DaikinDropdown extends LitElement {
      * Set automatically by `reflectInputGroup` method.
      */
     private _label;
-    private _hasSelectedItem;
-    private _selectedItemLabel;
+    private get _selectionLabels();
+    private _initialUpdateCompleted;
     private _autoUpdateController;
     private _clickOutsideController;
     /**
@@ -66,18 +91,32 @@ export declare class DaikinDropdown extends LitElement {
      * 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;
+    /**
+     * 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.
      */
@@ -88,9 +127,23 @@ export declare class DaikinDropdown extends LitElement {
      * 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.
+     * @private
+     */
     reflectInputGroup(inputGroup: DaikinInputGroup): void;
 }
 declare global {