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

package/dist/cjs/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/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/components/combobox/index.d.cts

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