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

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

@@ -0,0 +1,106 @@
+import { PropertyValues } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { DaikinInputGroup } from "../input-group/daikin-input-group.cjs";
+/**
+ * The date picker component provides a date selection function that can be combined with forms. This component uses `daikin-calendar` internally (users do not need to nest this).
+ *
+ * @fires select - Fires when the date is selected.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/date-picker/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-date-picker></daikin-date-picker>
+ * ```
+ */
+export declare class DaikinDatePicker extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The placeholder text.
+     */
+    placeholder: string | null;
+    /**
+     * The minimum date.
+     * example: `1900-01-01`
+     */
+    min: string;
+    /**
+     * The maximum date.
+     * example: `2099-12-31`
+     */
+    max: string;
+    /**
+     * Whether the text field is readonly.
+     */
+    readonly: boolean;
+    /**
+     * Whether the text field is disabled.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    disabled: boolean;
+    /**
+     * Whether the text field is required.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    required: boolean;
+    /**
+     * Whether or not to display error states.
+     * Ignored if the `disabled` is `true`.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    error: boolean;
+    /**
+     * Whether the date picker is open.
+     */
+    open: boolean;
+    /**
+     * The month that is initially displayed when the date picker is opened.
+     * If there is a `value` attribute, this is ignored.
+     */
+    defaultValue: string | null;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _currentSelection;
+    private _autoUpdateController;
+    private _dateInputElement;
+    private _calendarElement;
+    private get _value();
+    private get _min();
+    private get _max();
+    private get _defaultValue();
+    private get _viewDate();
+    private get _open();
+    private _emitSelect;
+    private _handleFocusIn;
+    private _handleFocusOut;
+    private _handleChange;
+    private _handleMouseUp;
+    private _handleKeyDown;
+    private _handleBeforeInput;
+    private _handleSelect;
+    private _handlePointerUp;
+    private _handleCalendarKeyDown;
+    private _handleToggle;
+    private _updateValue;
+    private _updateInputSelection;
+    private _updateSelection;
+    render(): import('lit-html').TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues<this>): 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-date-picker": DaikinDatePicker;
+    }
+}

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinDatePicker = require("./daikin-date-picker.cjs");
+Object.defineProperty(exports, "DaikinDatePicker", {
+  enumerable: true,
+  get: () => daikinDatePicker.DaikinDatePicker
+});

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

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

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

@@ -6,13 +6,14 @@ 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");
+require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
-const clickOutside = require("../../controllers/click-outside.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const isSimpleKey = require("../../utils/is-simple-key.cjs");
+require("../dropdown-item/daikin-dropdown-item.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators2, target, key, kind) => {
@@ -45,12 +46,13 @@ const cvaButton = classVarianceAuthority.cva(
     "outline",
     "outline-1",
     "-outline-offset-1",
+    "break-all",
     "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",
-    "after:i-daikin-dropdown-chevron-down",
+    "after:i-daikin-chevron-down",
     "after:size-6",
     "after:flex-none",
     "after:ml-auto",
@@ -100,11 +102,9 @@ const floatingPositionOptions = {
     })
   ]
 };
-exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
+exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this._internals = this.attachInternals();
-    this.value = null;
     this.placeholder = "";
     this.disabled = false;
     this.required = false;
@@ -116,10 +116,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
     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();
   }
@@ -132,9 +129,6 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
       }
     );
   }
-  _onClickOutside() {
-    this.open = false;
-  }
   _searchItem(prefix) {
     const items = this._items.filter(
       (item) => {
@@ -161,24 +155,18 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
       this.open = true;
       return;
     }
-    const items = this._items;
-    const activeElement = document.activeElement;
-    const focusedItemIndex = activeElement ? items.findIndex((item) => item.contains(activeElement)) : -1;
+    const items = this._items.filter(({ disabled }) => !disabled);
+    const focusedItemIndex = items.findIndex(
+      (item2) => item2.matches(":focus-within")
+    );
     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;
-      }
-      item.focus();
-      break;
-    }
+    const item = items[Math.max(0, Math.min(focusedItemIndex + moveOffset, items.length - 1))];
+    item.focus();
   }
   _updateFormValue() {
-    this._internals.setFormValue(JSON.stringify(this.value));
+    this.setFormValue(this.value);
   }
   _updateItemsSelectable() {
     for (const item of this._items) {
@@ -186,7 +174,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
     }
   }
   _updateValueBySelectedOptions() {
-    this.value = this.selectedOptions.at(-1) ?? null;
+    this.value = this.selectedOptions.at(-1) ?? "";
   }
   _updateSelectedOptionsByValue() {
     this.selectedOptions = this.value ? [this.value] : [];
@@ -201,6 +189,15 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
   _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 && !this._willBeFocusedByPress) {
+      if (!this.multiple && this._lastFocusedItem) {
+        this._handleSelectOption(this._lastFocusedItem.value);
+      }
+      this.open = false;
+    }
   }
   /**
    * Removes the last selected option.
@@ -211,19 +208,23 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
   _removeLastSelection() {
     if (this.multiple) {
       this.selectedOptions = this.selectedOptions.slice(0, -1);
-      this.value = this.selectedOptions.at(-1) ?? null;
+      this.value = this.selectedOptions.at(-1) ?? "";
     } else {
       this.selectedOptions = [];
-      this.value = null;
+      this.value = "";
     }
   }
-  _handleClick() {
-    if (this.disabled) {
+  _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;
     }
-    this.open = !this.open;
-  }
-  _handleKeyDown(event) {
     if (!isSimpleKey.isSimpleKeyEvent(event)) {
       return;
     }
@@ -236,6 +237,8 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
     const operation = {
       ArrowDown: "down",
       ArrowUp: "up",
+      PageDown: "pageDown",
+      PageUp: "pageUp",
       Escape: "close"
     }[event.key];
     switch (operation) {
@@ -244,6 +247,11 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.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();
@@ -267,6 +275,28 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
     }
     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.
@@ -275,7 +305,9 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
   _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`.
@@ -285,13 +317,13 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
     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"
@@ -301,32 +333,40 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
       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}
-        @click=${this._handleClick}
+        aria-haspopup="listbox"
+        @pointerup=${this._handlePointerUp}
+        @pointerdown=${this._handlePointerDown}
+        @keydown=${this._handleButtonKeyDown}
         ${this._autoUpdateController.refReference()}
       >
-        ${this.selectedOptions.length ? this.multiple && this.selectedOptions.length > (this.maxLabels ?? 0) ? `${this.selectedOptions.length} items selected` : this._selectionLabels.join(", ") : 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] border border-ddt-color-divider overflow-y-auto opacity-1 transition-[opacity] rounded"
-        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}
-        ></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
@@ -334,8 +374,6 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
       floatingPositionOptions,
       this.open && !this.disabled
     )}
-      ${// Listen to click outside only when the dropdown is open.
-    this._clickOutsideController.directive(this.open && !this.disabled)}
     </div>`;
   }
   /**
@@ -412,10 +450,6 @@ exports.DaikinDropdown.styles = lit.css`
       width: 100%;
     }
   `;
-exports.DaikinDropdown.formAssociated = true;
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinDropdown.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinDropdown.prototype, "placeholder", 2);

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.cjs";
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
 /**
  * A dropdown list component.
@@ -27,18 +27,8 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * </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.
-     *
-     * 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;
     /**
      * Placeholder text of the dropdown.
      */
@@ -85,14 +75,13 @@ export declare class DaikinDropdown extends DDSElement {
     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;
@@ -107,6 +96,7 @@ export declare class DaikinDropdown extends DDSElement {
      * @param value The value of selected option.
      */
     private _handleSelectOption;
+    private _handleFocusOut;
     /**
      * Removes the last selected option.
      *
@@ -114,13 +104,15 @@ export declare class DaikinDropdown extends DDSElement {
      * 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.