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

package/dist/cjs-dev/components/combobox/daikin-combobox.d.cts

@@ -0,0 +1,134 @@
+import { PropertyValues } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { DaikinInputGroup } from "../input-group/index.cjs";
+/**
+ * Interface for combobox option object
+ */
+export interface ComboboxOption {
+    label: string;
+    disabled?: boolean;
+    value?: string;
+}
+/**
+ * Type for combobox items - can be string or object array
+ */
+export type ComboboxItem = string | ComboboxOption;
+export declare function defaultFilterFn(items: readonly ComboboxItem[], value: string): readonly ComboboxItem[];
+/**
+ * A combobox component.
+ * Unlike a dropdown component, a combobox primarily functions as a text field (using a native <input> tag) that can accept custom user input. The dropdown list serves as a helpful aid to expedite the user's input process.
+ *
+ * @fires change - A custom event emitted when a user selects a combobox item or inputs a custom value.
+ * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). Triggered when the user types in the input field, clicks clear button, or selects from dropdown options.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/combobox/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-combobox></daikin-combobox>
+ *
+ * <script>
+ *   const combobox = document.querySelector("daikin-combobox");
+ *   combobox.items = [ "Apple", "Banana", "Cherry" ];
+ * </script>
+ * ```
+ */
+export declare class DaikinCombobox extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Placeholder text of the combobox.
+     */
+    placeholder: string | null;
+    /**
+     * Whether the combobox is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the combobox is required.
+     */
+    required: boolean;
+    /**
+     * Whether the combobox is in an error state.
+     */
+    error: boolean;
+    /**
+     * Whether the combobox menu is opened.
+     */
+    open: boolean;
+    /**
+     * An array of items for the combobox dropdown. Can be:
+     * - Array of strings: ['Option 1', 'Option 2']
+     * - Array of objects: [{label: 'Option 1', disabled: false}, {label: 'Option 2', disabled: true}]
+     */
+    items: ComboboxItem[];
+    private _viewItems;
+    private _currentFocusItemIndex;
+    /**
+     * This property accepts a function that allows users to customize the logic for matching options in the dropdown.
+     * Default implementation performs case-insensitive substring matching.
+     */
+    filter: typeof defaultFilterFn;
+    private _input;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _autoUpdateController;
+    private _clickOutsideController;
+    private _onClickOutside;
+    private _moveFocusByKeydown;
+    private _updateFormValue;
+    private _closePopup;
+    private _handleFocusOut;
+    private _handleClick;
+    private _handleArrowClick;
+    private _handleClickItem;
+    private _handleKeyDown;
+    /**
+     * 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.
+     */
+    private _handleFloatingReady;
+    /**
+     * Handles the clear button click event.
+     * Clears the current value and triggers form value update.
+     */
+    private _handleClearClick;
+    /**
+     * Synchronizes the display items based on the current filter state.
+     * @param type - Whether to show all items or apply filtering
+     */
+    private _synchronizeShowItems;
+    /**
+     * Handles input events from the combobox input field.
+     * Updates the value, applies filtering, and opens dropdown if matches are found.
+     */
+    private _handleInput;
+    /**
+     * Handles change events from the combobox input field.
+     * Dispatches a custom change event when the input value changes and loses focus.
+     */
+    private _handleChange;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the input element.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): 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 {
+    interface HTMLElementTagNameMap {
+        "daikin-combobox": DaikinCombobox;
+    }
+}

package/dist/cjs-dev/components/combobox/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinCombobox = require("./daikin-combobox.cjs");
+Object.defineProperty(exports, "DaikinCombobox", {
+  enumerable: true,
+  get: () => daikinCombobox.DaikinCombobox
+});
+exports.defaultFilterFn = daikinCombobox.defaultFilterFn;

package/dist/cjs-dev/components/combobox/index.d.cts

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

package/dist/cjs-dev/components/date-picker/daikin-date-picker.cjs

@@ -4,6 +4,7 @@ const dom = require("@floating-ui/dom");
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
+const guard_js = require("lit/directives/guard.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const ref_js = require("lit/directives/ref.js");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
@@ -261,12 +262,6 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
   get _open() {
     return this.open && !this.disabled && !this.readonly;
   }
-  _openCalendar() {
-    if (this.disabled || this.readonly) {
-      return;
-    }
-    this.open = true;
-  }
   _emitSelect() {
     this.dispatchEvent(
       new Event("select", {
@@ -410,6 +405,22 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     }
     this._emitSelect();
   }
+  _handlePointerUp() {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    this.open = !this.open;
+  }
+  _handleCalendarKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.disabled || this.readonly) {
+        return;
+      }
+      this.open = !this.open;
+    }
+  }
   _handleToggle(event) {
     if (reDispatch.reDispatch(this, event, new ToggleEvent("toggle", event))) {
       this.open = event.newState === "open";
@@ -498,7 +509,8 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
           variant="ghost"
           button-aria-label="Open the date picker"
           ?disabled=${this.disabled}
-          @click=${this._openCalendar}
+          @pointerup=${this._handlePointerUp}
+          @keydown=${this._handleCalendarKeyDown}
         >
           <span class=${calendarCommon.cvaIconButton({ intent: "calender" })}></span>
         </daikin-icon-button>
@@ -512,7 +524,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         default-value=${ifDefined_js.ifDefined(
       this._defaultValue ? calendarCommon.formatDateForProperty(this._defaultValue) : void 0
     )}
-        popover
+        popover="auto"
         class="absolute left-[--floating-x,0] top-[--floating-y,0]"
         @toggle=${this._handleToggle}
         @select=${this._handleSelect}
@@ -520,14 +532,17 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         ${this._autoUpdateController.refFloating()}
       >
       </daikin-calendar>
-      ${// Activate auto update only when the calendar is open.
-    // TODO: refactor here with CSS Anchor Positioning instead of using floating-ui
-    this._autoUpdateController.directive(
-      {
-        placement: "bottom-start",
-        middleware: [dom.offset({ mainAxis: 0 })]
-      },
-      this._open
+      ${// Activate auto update only when the tooltip is open.
+    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
+    guard_js.guard(
+      [this.open],
+      () => this._autoUpdateController.directive(
+        {
+          placement: "bottom-start",
+          middleware: [dom.offset({ mainAxis: 0 }), dom.flip(), dom.shift()]
+        },
+        this.open
+      )
     )}`;
   }
   willUpdate(changedProperties) {

package/dist/cjs-dev/components/date-picker/daikin-date-picker.d.cts

@@ -76,7 +76,6 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private get _defaultValue();
     private get _viewDate();
     private get _open();
-    private _openCalendar;
     private _emitSelect;
     private _handleFocusIn;
     private _handleFocusOut;
@@ -85,6 +84,8 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _handleKeyDown;
     private _handleBeforeInput;
     private _handleSelect;
+    private _handlePointerUp;
+    private _handleCalendarKeyDown;
     private _handleToggle;
     private _updateValue;
     private _updateInputSelection;

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

@@ -10,7 +10,6 @@ require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const ddsFormElement = require("../../base/dds-form-element.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");
@@ -53,7 +52,7 @@ const cvaButton = classVarianceAuthority.cva(
     "enabled:outline-[--color-base]",
     "disabled:text-ddt-color-common-disabled",
     "disabled:outline-ddt-color-common-disabled",
-    "after:i-daikin-dropdown-chevron-down",
+    "after:i-daikin-chevron-down",
     "after:size-6",
     "after:flex-none",
     "after:ml-auto",
@@ -117,10 +116,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     this._label = null;
     this._initialUpdateCompleted = false;
     this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
-    this._clickOutsideController = new clickOutside.ClickOutsideController(
-      this,
-      this._onClickOutside
-    );
+    this._willBeFocusedByPress = false;
     this._lastFocusedItem = null;
     this._dropdownRef = ref_js.createRef();
   }
@@ -133,9 +129,6 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       }
     );
   }
-  _onClickOutside() {
-    this.open = false;
-  }
   _searchItem(prefix) {
     const items = this._items.filter(
       (item) => {
@@ -163,8 +156,9 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       return;
     }
     const items = this._items.filter(({ disabled }) => !disabled);
-    const activeElement = document.activeElement;
-    const focusedItemIndex = activeElement ? items.findIndex((item2) => item2.contains(activeElement)) : -1;
+    const focusedItemIndex = items.findIndex(
+      (item2) => item2.matches(":focus-within")
+    );
     if (focusedItemIndex === -1) {
       moveOffset = 1;
     }
@@ -195,9 +189,10 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
   _handleSelectOption(value) {
     this.value = value;
     this.selectedOptions = this.multiple ? this.selectedOptions.includes(value) ? this.selectedOptions.filter((option) => option != value) : [...this.selectedOptions, value] : [value];
+    this.dispatchEvent(new Event("change"));
   }
   _handleFocusOut(event) {
-    if (!event.relatedTarget) {
+    if (!event.relatedTarget && !this._willBeFocusedByPress) {
       if (!this.multiple && this._lastFocusedItem) {
         this._handleSelectOption(this._lastFocusedItem.value);
       }
@@ -219,12 +214,6 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       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") {
@@ -286,6 +275,28 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     }
     this._lastFocusedItem = target;
   }
+  _handlePointerDown() {
+    if (this.open) {
+      this._willBeFocusedByPress = true;
+    }
+  }
+  _handlePointerUp() {
+    if (this.disabled) {
+      return;
+    }
+    this._willBeFocusedByPress = false;
+    this.open = !this.open;
+  }
+  _handleButtonKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.disabled) {
+        return;
+      }
+      this.open = !this.open;
+    }
+  }
   /**
    * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
    * The dropdown 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.
@@ -294,7 +305,9 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
   _handleFloatingReady() {
     const items = this._items;
     const item = items.find((item2) => item2 === this._lastFocusedItem) ?? items.find((item2) => item2.value === this.value) ?? items.at(0);
-    item == null ? void 0 : item.focus();
+    setTimeout(() => {
+      item == null ? void 0 : item.focus();
+    }, 100);
   }
   /**
    * Handle `select` event from `daikin-dropdown-item`.
@@ -304,13 +317,13 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     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}>
+    const fallbackLabel = this.open && !this.disabled ? "Close dropdown" : this.selectedOptions.length ? `Selected: ${this._selectionLabels.join(", ")}` : "Open dropdown";
+    return lit.html`<div class="w-full" @keydown=${this._handleKeyDown}>
       <button
         ${ref_js.ref(this._dropdownRef)}
         type="button"
@@ -320,15 +333,15 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       placeholder: !this.selectedOptions.length
     })}
         ?disabled=${this.disabled}
-        role="combobox"
-        aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
+        aria-label=${this._label ?? fallbackLabel}
         aria-expanded=${this.open && !this.disabled}
         aria-disabled=${this.disabled}
         aria-controls="dropdown-items"
-        aria-autocomplete="list"
         aria-required=${this.required}
         aria-haspopup="listbox"
-        @click=${this._handleClick}
+        @pointerup=${this._handlePointerUp}
+        @pointerdown=${this._handlePointerDown}
+        @keydown=${this._handleButtonKeyDown}
         ${this._autoUpdateController.refReference()}
       >
         <span class="truncate">
@@ -337,19 +350,23 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       </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] border border-ddt-color-divider overflow-y-auto opacity-1 transition-[opacity] rounded max-w-min break-all"
-        aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
-        role="listbox"
+        popover="manual"
+        class="flex flex-col overflow-hidden 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 opacity-1 transition-[opacity] rounded max-w-min"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >
-        <slot
-          @slotchange=${this._handleSlotChange}
-          @select=${this._handleSelect}
-          @focusin=${this._handleFocusIn}
-          @focusout=${this._handleFocusOut}
-        ></slot>
+        <div
+          class="flex-1 overflow-y-auto break-all"
+          aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
+          role="listbox"
+        >
+          <slot
+            @slotchange=${this._handleSlotChange}
+            @select=${this._handleSelect}
+            @focusin=${this._handleFocusIn}
+            @focusout=${this._handleFocusOut}
+          ></slot>
+        </div>
       </div>
       ${// Activate auto update only when the dropdown is open.
     // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
@@ -357,8 +374,6 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       floatingPositionOptions,
       this.open && !this.disabled
     )}
-      ${// Listen to click outside only when the dropdown is open.
-    this._clickOutsideController.directive(this.open && !this.disabled)}
     </div>`;
   }
   /**

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

@@ -75,14 +75,13 @@ export declare class DaikinDropdown extends DDSFormElement {
     private get _selectionLabels();
     private _initialUpdateCompleted;
     private _autoUpdateController;
-    private _clickOutsideController;
+    private _willBeFocusedByPress;
     /**
      * Last focused dropdown item.
      * The next time the dropdown opens, the focus will be moved to this element.
      */
     private _lastFocusedItem;
     private _dropdownRef;
-    private _onClickOutside;
     private _searchItem;
     private _moveFocus;
     private _updateFormValue;
@@ -105,13 +104,15 @@ export declare class DaikinDropdown extends DDSFormElement {
      * 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.
      */
     private _handleFocusIn;
+    private _handlePointerDown;
+    private _handlePointerUp;
+    private _handleButtonKeyDown;
     /**
      * Handle `floating-ready` event dispatched by `FloatingUIAutoUpdateController`.
      * The dropdown 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.