@pine-ds/core 3.14.2 → 3.15.0

package/dist/types/components/pds-combobox/pds-combobox.d.ts

@@ -1,9 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { BasePdsProps } from "../../utils/interfaces";
 import type { ChipSentimentType } from "../../utils/types";
+import type { ComboboxOption, ComboboxSearchEventDetail, ComboboxLoadOptionsEventDetail } from './combobox-interface';
 /**
  * @slot option - Option elements for the combobox dropdown
  * @slot trigger-content - Custom content for the button trigger when customTriggerContent is true
+ * @slot empty - Custom empty state message when no options match
+ * @slot loading - Custom loading indicator
  */
 export declare class PdsCombobox implements BasePdsProps {
     /** Reference to the host element */
@@ -104,12 +107,48 @@ export declare class PdsCombobox implements BasePdsProps {
      * The value of the combobox input.
      */
     value: string;
+    /**
+     * URL endpoint for async data fetching.
+     */
+    asyncUrl?: string;
+    /**
+     * HTTP method for async requests.
+     */
+    asyncMethod: 'GET' | 'POST';
+    /**
+     * Debounce delay in milliseconds for search/fetch.
+     */
+    debounce: number;
+    /**
+     * Timeout in milliseconds for async fetch requests.
+     */
+    fetchTimeout: number;
+    /**
+     * Whether the component is currently loading async options.
+     */
+    loading: boolean;
+    /**
+     * Options provided externally (for consumer-managed async).
+     */
+    options?: ComboboxOption[];
+    /**
+     * Function to format async results. Receives raw API response item.
+     */
+    formatResult?: (item: unknown) => ComboboxOption;
     /**
      * Emitted when the value changes.
      */
     pdsComboboxChange: EventEmitter<{
         value: string;
     }>;
+    /**
+     * Emitted on search input (for consumer-managed async).
+     */
+    pdsComboboxSearch: EventEmitter<ComboboxSearchEventDetail>;
+    /**
+     * Emitted to request more options (pagination).
+     */
+    pdsComboboxLoadOptions: EventEmitter<ComboboxLoadOptionsEventDetail>;
     /**
      * Internal state for the display text shown in the input/trigger
      */
@@ -138,6 +177,18 @@ export declare class PdsCombobox implements BasePdsProps {
      * Internal state to track chip properties for automatic rendering
      */
     selectedOptionChipProps: any;
+    /**
+     * Internal state for async options.
+     */
+    internalOptions: ComboboxOption[];
+    /**
+     * Internal state for current page (pagination).
+     */
+    currentPage: number;
+    /**
+     * Internal state for hasMore (pagination).
+     */
+    hasMore: boolean;
     private inputEl?;
     private optionEls;
     private allItems;
@@ -145,11 +196,23 @@ export declare class PdsCombobox implements BasePdsProps {
     private listboxEl?;
     private internals?;
     private isUpdatingFromSelection;
+    private abortController?;
+    private fetchDebounceTimer?;
+    private fetchTimeoutTimer?;
+    private observer?;
+    private originalSearchEmitter?;
     connectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    protected setupDebounce(): void;
+    protected optionsChanged(): void;
     handleValueChange(): void;
     handleSelectedOptionChange(): void;
+    private clearAsyncFetchState;
+    private debouncedFetchAsyncOptions;
+    private fetchOptions;
+    private updateOptionsFromAsync;
     private updateOptions;
     private getOptionLabel;
     private getOptionLayoutContent;
@@ -215,6 +278,7 @@ export declare class PdsCombobox implements BasePdsProps {
     private onButtonTriggerKeyUp;
     private onComboboxFocusOut;
     private handleOptionClick;
+    private handleScroll;
     private renderDropdown;
     private renderCaretIcon;
     private renderLayoutContent;

package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.d.ts

@@ -20,6 +20,19 @@ export declare class PdsDropdownMenuItem implements BasePdsProps {
      *  If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.
      */
     href: string | undefined;
+    /**
+     * Determines whether the link should open in a new tab and display an external icon.
+     * This is a simpler alternative to using `target="_blank"` for the common case.
+     * @defaultValue false
+     */
+    external: boolean;
+    /**
+     * Specifies where to open the linked document when href is provided.
+     * Takes precedence over the `external` prop if both are set.
+     * Only applies when href is set.
+     * @defaultValue undefined
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top';
     /**
      * Emitted when the dropdown-item is clicked.
      *

package/dist/types/components/pds-link/pds-link.d.ts

@@ -14,8 +14,16 @@ export declare class PdsLink {
     /**
      * Determines whether the link should open in a new tab.
      * @defaultValue false
+     * @deprecated Consider using the `target` prop for more control. This prop will be maintained for backward compatibility.
      */
     external: boolean;
+    /**
+     * Specifies where to open the linked document.
+     * @defaultValue undefined
+     * @example
+     * <pds-link href="https://example.com" target="_blank">Opens in new tab</pds-link>
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top';
     /**
      * Sets the link variant styles.
      * @defaultValue inline

package/dist/types/components/pds-multiselect/multiselect-interface.d.ts

@@ -1,6 +1,7 @@
 export interface MultiselectOption {
     id: string | number;
     text: string;
+    isCreateOption?: boolean;
     [key: string]: unknown;
 }
 export interface MultiselectChangeEventDetail {
@@ -14,6 +15,10 @@ export interface MultiselectLoadOptionsEventDetail {
     query: string;
     page: number;
 }
+export interface MultiselectCreateEventDetail {
+    query: string;
+    newOption: MultiselectOption;
+}
 export interface AsyncResponse {
     results: Array<{
         id: string | number;
@@ -22,3 +27,8 @@ export interface AsyncResponse {
     }>;
     totalCount?: number;
 }
+export interface CreateResponse {
+    id: string | number;
+    text: string;
+    [key: string]: unknown;
+}

package/dist/types/components/pds-multiselect/pds-multiselect.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { MultiselectOption, MultiselectChangeEventDetail, MultiselectSearchEventDetail, MultiselectLoadOptionsEventDetail } from './multiselect-interface';
+import type { MultiselectOption, MultiselectChangeEventDetail, MultiselectSearchEventDetail, MultiselectLoadOptionsEventDetail, MultiselectCreateEventDetail } from './multiselect-interface';
 /**
  * @slot (default) - Static option elements for the multiselect
  * @slot empty - Custom empty state message when no options match
@@ -14,6 +14,7 @@ export declare class PdsMultiselect {
     private internals?;
     private abortController?;
     private fetchDebounceTimer?;
+    private fetchTimeoutTimer?;
     private observer?;
     private cleanupAutoUpdate?;
     el: HTMLPdsMultiselectElement;
@@ -53,6 +54,10 @@ export declare class PdsMultiselect {
      * Debounce delay in milliseconds for search/fetch.
      */
     debounce: number;
+    /**
+     * Timeout in milliseconds for async fetch requests.
+     */
+    fetchTimeout: number;
     /**
      * Maximum number of selections allowed.
      */
@@ -105,6 +110,10 @@ export declare class PdsMultiselect {
      * Function to format async results. Receives raw API response item.
      */
     formatResult?: (item: unknown) => MultiselectOption;
+    /**
+     * URL endpoint for creating new options. When set, shows "Add" option when no matches found.
+     */
+    createUrl?: string;
     isOpen: boolean;
     searchQuery: string;
     highlightedIndex: number;
@@ -112,6 +121,7 @@ export declare class PdsMultiselect {
     selectedItems: MultiselectOption[];
     currentPage: number;
     hasMore: boolean;
+    creating: boolean;
     private isOpening;
     /**
      * Emitted when selection changes.
@@ -125,6 +135,10 @@ export declare class PdsMultiselect {
      * Emitted to request more options (pagination).
      */
     pdsMultiselectLoadOptions: EventEmitter<MultiselectLoadOptionsEventDetail>;
+    /**
+     * Emitted when a new option is created.
+     */
+    pdsMultiselectCreate: EventEmitter<MultiselectCreateEventDetail>;
     private originalSearchEmitter?;
     connectedCallback(): void;
     componentWillLoad(): void;
@@ -154,6 +168,7 @@ export declare class PdsMultiselect {
     private getFilteredOptions;
     private updateFormValue;
     private fetchOptions;
+    private createOption;
     private handleTriggerClick;
     private handleTriggerKeyDown;
     private handleSearchInputChange;

package/dist/types/components.d.ts

@@ -9,9 +9,10 @@ import { BoxColumnType, BoxShadowSizeType, BoxSpacingType } from "./utils/types"
 import { Event } from "./stencil-public-runtime";
 import { CheckboxChangeEventDetail } from "./components/pds-checkbox/checkbox-interface";
 import { ChipSentimentType, ChipVariantType, PlacementType } from "./utils/types";
+import { ComboboxLoadOptionsEventDetail, ComboboxOption, ComboboxSearchEventDetail } from "./components/pds-combobox/combobox-interface";
 import { PdsFilterClearEventDetail, PdsFilterCloseEventDetail, PdsFilterOpenEventDetail, PdsFilterVariant } from "./components/pds-filters/pds-filter/filter-interface";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/pds-input/input-interface";
-import { MultiselectChangeEventDetail, MultiselectLoadOptionsEventDetail, MultiselectOption, MultiselectSearchEventDetail } from "./components/pds-multiselect/multiselect-interface";
+import { MultiselectChangeEventDetail, MultiselectCreateEventDetail, MultiselectLoadOptionsEventDetail, MultiselectOption, MultiselectSearchEventDetail } from "./components/pds-multiselect/multiselect-interface";
 import { PdsPopoverEventDetail } from "./components/pds-popover/popover-interface";
 import { RadioGroupChangeEventDetail } from "./components/pds-radio-group/radio-group-interface";
 import { SortableEvent } from "sortablejs";
@@ -20,9 +21,10 @@ export { BoxColumnType, BoxShadowSizeType, BoxSpacingType } from "./utils/types"
 export { Event } from "./stencil-public-runtime";
 export { CheckboxChangeEventDetail } from "./components/pds-checkbox/checkbox-interface";
 export { ChipSentimentType, ChipVariantType, PlacementType } from "./utils/types";
+export { ComboboxLoadOptionsEventDetail, ComboboxOption, ComboboxSearchEventDetail } from "./components/pds-combobox/combobox-interface";
 export { PdsFilterClearEventDetail, PdsFilterCloseEventDetail, PdsFilterOpenEventDetail, PdsFilterVariant } from "./components/pds-filters/pds-filter/filter-interface";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/pds-input/input-interface";
-export { MultiselectChangeEventDetail, MultiselectLoadOptionsEventDetail, MultiselectOption, MultiselectSearchEventDetail } from "./components/pds-multiselect/multiselect-interface";
+export { MultiselectChangeEventDetail, MultiselectCreateEventDetail, MultiselectLoadOptionsEventDetail, MultiselectOption, MultiselectSearchEventDetail } from "./components/pds-multiselect/multiselect-interface";
 export { PdsPopoverEventDetail } from "./components/pds-popover/popover-interface";
 export { RadioGroupChangeEventDetail } from "./components/pds-radio-group/radio-group-interface";
 export { SortableEvent } from "sortablejs";
@@ -841,6 +843,18 @@ export namespace Components {
           * @defaultValue false
          */
         "large": boolean;
+        /**
+          * HTTP method to use for the remove action. Adds data-method and data-turbo-method attributes for Rails/Turbo compatibility. Only applies when removeUrl is provided.
+         */
+        "removeHttpMethod"?: 'get' | 'post' | 'put' | 'patch' | 'delete';
+        /**
+          * Specifies where to open the linked document when removeUrl is provided. Only applies when removeUrl is set.
+         */
+        "removeTarget"?: '_blank' | '_self' | '_parent' | '_top';
+        /**
+          * URL to navigate to when the remove button is clicked. When provided, renders the close button as a link instead of a button. Only applies to tag variant.
+         */
+        "removeUrl"?: string;
         /**
           * Defines the color scheme of the chip.
           * @defaultValue 'neutral'
@@ -853,6 +867,15 @@ export namespace Components {
         "variant": ChipVariantType;
     }
     interface PdsCombobox {
+        /**
+          * HTTP method for async requests.
+          * @default 'GET'
+         */
+        "asyncMethod": 'GET' | 'POST';
+        /**
+          * URL endpoint for async data fetching.
+         */
+        "asyncUrl"?: string;
         /**
           * Whether a dot should be displayed on the chip trigger.
           * @default false
@@ -886,6 +909,11 @@ export namespace Components {
           * @default false
          */
         "customTriggerContent": boolean;
+        /**
+          * Debounce delay in milliseconds for search/fetch.
+          * @default 300
+         */
+        "debounce": number;
         /**
           * If true, the combobox is disabled.
           * @default false
@@ -901,6 +929,15 @@ export namespace Components {
           * @default '236px'
          */
         "dropdownWidth": string;
+        /**
+          * Timeout in milliseconds for async fetch requests.
+          * @default 30000
+         */
+        "fetchTimeout": number;
+        /**
+          * Function to format async results. Receives raw API response item.
+         */
+        "formatResult"?: (item: unknown) => ComboboxOption;
         /**
           * Gets the value of the currently selected option.
          */
@@ -914,6 +951,11 @@ export namespace Components {
           * Text to be displayed as the combobox label.
          */
         "label"?: string;
+        /**
+          * Whether the component is currently loading async options.
+          * @default false
+         */
+        "loading": boolean;
         /**
           * Maximum height of the dropdown. Can be any valid CSS height value (e.g., '200px', '10rem'). When content exceeds this height, the dropdown will scroll.
          */
@@ -927,6 +969,10 @@ export namespace Components {
           * The name of the form control. Submitted with the form as part of a name/value pair.
          */
         "name"?: string;
+        /**
+          * Options provided externally (for consumer-managed async).
+         */
+        "options"?: ComboboxOption[];
         /**
           * Placeholder text for the input field.
          */
@@ -1026,10 +1072,20 @@ export namespace Components {
           * @defaultValue false
          */
         "disabled": boolean;
+        /**
+          * Determines whether the link should open in a new tab and display an external icon. This is a simpler alternative to using `target="_blank"` for the common case.
+          * @defaultValue false
+         */
+        "external": boolean;
         /**
           * If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.
          */
         "href": string | undefined;
+        /**
+          * Specifies where to open the linked document when href is provided. Takes precedence over the `external` prop if both are set. Only applies when href is set.
+          * @defaultValue undefined
+         */
+        "target"?: '_blank' | '_self' | '_parent' | '_top';
     }
     interface PdsDropdownMenuSeparator {
         /**
@@ -1229,6 +1285,7 @@ export namespace Components {
         /**
           * Determines whether the link should open in a new tab.
           * @defaultValue false
+          * @deprecated Consider using the `target` prop for more control. This prop will be maintained for backward compatibility.
          */
         "external": boolean;
         /**
@@ -1240,6 +1297,12 @@ export namespace Components {
           * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.
          */
         "href": string;
+        /**
+          * Specifies where to open the linked document.
+          * @defaultValue undefined
+          * @example <pds-link href="https://example.com" target="_blank">Opens in new tab</pds-link>
+         */
+        "target"?: '_blank' | '_self' | '_parent' | '_top';
         /**
           * Sets the link variant styles.
           * @defaultValue inline
@@ -1332,6 +1395,10 @@ export namespace Components {
           * A unique identifier used for the underlying component `id` attribute.
          */
         "componentId": string;
+        /**
+          * URL endpoint for creating new options. When set, shows "Add" option when no matches found.
+         */
+        "createUrl"?: string;
         /**
           * Debounce delay in milliseconds for search/fetch.
           * @default 300
@@ -1346,6 +1413,11 @@ export namespace Components {
           * Error message to display.
          */
         "errorMessage"?: string;
+        /**
+          * Timeout in milliseconds for async fetch requests.
+          * @default 30000
+         */
+        "fetchTimeout": number;
         /**
           * Function to format async results. Receives raw API response item.
          */
@@ -2373,6 +2445,8 @@ declare global {
     };
     interface HTMLPdsComboboxElementEventMap {
         "pdsComboboxChange": { value: string };
+        "pdsComboboxSearch": ComboboxSearchEventDetail;
+        "pdsComboboxLoadOptions": ComboboxLoadOptionsEventDetail;
     }
     interface HTMLPdsComboboxElement extends Components.PdsCombobox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPdsComboboxElementEventMap>(type: K, listener: (this: HTMLPdsComboboxElement, ev: PdsComboboxCustomEvent<HTMLPdsComboboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2550,6 +2624,7 @@ declare global {
         "pdsMultiselectChange": MultiselectChangeEventDetail;
         "pdsMultiselectSearch": MultiselectSearchEventDetail;
         "pdsMultiselectLoadOptions": MultiselectLoadOptionsEventDetail;
+        "pdsMultiselectCreate": MultiselectCreateEventDetail;
     }
     interface HTMLPdsMultiselectElement extends Components.PdsMultiselect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPdsMultiselectElementEventMap>(type: K, listener: (this: HTMLPdsMultiselectElement, ev: PdsMultiselectCustomEvent<HTMLPdsMultiselectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3738,6 +3813,18 @@ declare namespace LocalJSX {
           * Event emitted when the close button is clicked on a tag variant chip.
          */
         "onPdsTagCloseClick"?: (event: PdsChipCustomEvent<void>) => void;
+        /**
+          * HTTP method to use for the remove action. Adds data-method and data-turbo-method attributes for Rails/Turbo compatibility. Only applies when removeUrl is provided.
+         */
+        "removeHttpMethod"?: 'get' | 'post' | 'put' | 'patch' | 'delete';
+        /**
+          * Specifies where to open the linked document when removeUrl is provided. Only applies when removeUrl is set.
+         */
+        "removeTarget"?: '_blank' | '_self' | '_parent' | '_top';
+        /**
+          * URL to navigate to when the remove button is clicked. When provided, renders the close button as a link instead of a button. Only applies to tag variant.
+         */
+        "removeUrl"?: string;
         /**
           * Defines the color scheme of the chip.
           * @defaultValue 'neutral'
@@ -3750,6 +3837,15 @@ declare namespace LocalJSX {
         "variant"?: ChipVariantType;
     }
     interface PdsCombobox {
+        /**
+          * HTTP method for async requests.
+          * @default 'GET'
+         */
+        "asyncMethod"?: 'GET' | 'POST';
+        /**
+          * URL endpoint for async data fetching.
+         */
+        "asyncUrl"?: string;
         /**
           * Whether a dot should be displayed on the chip trigger.
           * @default false
@@ -3783,6 +3879,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "customTriggerContent"?: boolean;
+        /**
+          * Debounce delay in milliseconds for search/fetch.
+          * @default 300
+         */
+        "debounce"?: number;
         /**
           * If true, the combobox is disabled.
           * @default false
@@ -3798,6 +3899,15 @@ declare namespace LocalJSX {
           * @default '236px'
          */
         "dropdownWidth"?: string;
+        /**
+          * Timeout in milliseconds for async fetch requests.
+          * @default 30000
+         */
+        "fetchTimeout"?: number;
+        /**
+          * Function to format async results. Receives raw API response item.
+         */
+        "formatResult"?: (item: unknown) => ComboboxOption;
         /**
           * Visually hides the label text for instances where only the combobox should be displayed. Label remains accessible to assistive technology such as screen readers.
           * @default false
@@ -3807,6 +3917,11 @@ declare namespace LocalJSX {
           * Text to be displayed as the combobox label.
          */
         "label"?: string;
+        /**
+          * Whether the component is currently loading async options.
+          * @default false
+         */
+        "loading"?: boolean;
         /**
           * Maximum height of the dropdown. Can be any valid CSS height value (e.g., '200px', '10rem'). When content exceeds this height, the dropdown will scroll.
          */
@@ -3824,6 +3939,18 @@ declare namespace LocalJSX {
           * Emitted when the value changes.
          */
         "onPdsComboboxChange"?: (event: PdsComboboxCustomEvent<{ value: string }>) => void;
+        /**
+          * Emitted to request more options (pagination).
+         */
+        "onPdsComboboxLoadOptions"?: (event: PdsComboboxCustomEvent<ComboboxLoadOptionsEventDetail>) => void;
+        /**
+          * Emitted on search input (for consumer-managed async).
+         */
+        "onPdsComboboxSearch"?: (event: PdsComboboxCustomEvent<ComboboxSearchEventDetail>) => void;
+        /**
+          * Options provided externally (for consumer-managed async).
+         */
+        "options"?: ComboboxOption[];
         /**
           * Placeholder text for the input field.
          */
@@ -3919,6 +4046,11 @@ declare namespace LocalJSX {
           * @defaultValue false
          */
         "disabled"?: boolean;
+        /**
+          * Determines whether the link should open in a new tab and display an external icon. This is a simpler alternative to using `target="_blank"` for the common case.
+          * @defaultValue false
+         */
+        "external"?: boolean;
         /**
           * If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.
          */
@@ -3927,6 +4059,11 @@ declare namespace LocalJSX {
           * Emitted when the dropdown-item is clicked.
          */
         "onPdsClick"?: (event: PdsDropdownMenuItemCustomEvent<{itemIndex: number, item: HTMLPdsDropdownMenuItemElement, content: string}>) => void;
+        /**
+          * Specifies where to open the linked document when href is provided. Takes precedence over the `external` prop if both are set. Only applies when href is set.
+          * @defaultValue undefined
+         */
+        "target"?: '_blank' | '_self' | '_parent' | '_top';
     }
     interface PdsDropdownMenuSeparator {
         /**
@@ -4146,6 +4283,7 @@ declare namespace LocalJSX {
         /**
           * Determines whether the link should open in a new tab.
           * @defaultValue false
+          * @deprecated Consider using the `target` prop for more control. This prop will be maintained for backward compatibility.
          */
         "external"?: boolean;
         /**
@@ -4157,6 +4295,12 @@ declare namespace LocalJSX {
           * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.
          */
         "href": string;
+        /**
+          * Specifies where to open the linked document.
+          * @defaultValue undefined
+          * @example <pds-link href="https://example.com" target="_blank">Opens in new tab</pds-link>
+         */
+        "target"?: '_blank' | '_self' | '_parent' | '_top';
         /**
           * Sets the link variant styles.
           * @defaultValue inline
@@ -4249,6 +4393,10 @@ declare namespace LocalJSX {
           * A unique identifier used for the underlying component `id` attribute.
          */
         "componentId": string;
+        /**
+          * URL endpoint for creating new options. When set, shows "Add" option when no matches found.
+         */
+        "createUrl"?: string;
         /**
           * Debounce delay in milliseconds for search/fetch.
           * @default 300
@@ -4263,6 +4411,11 @@ declare namespace LocalJSX {
           * Error message to display.
          */
         "errorMessage"?: string;
+        /**
+          * Timeout in milliseconds for async fetch requests.
+          * @default 30000
+         */
+        "fetchTimeout"?: number;
         /**
           * Function to format async results. Receives raw API response item.
          */
@@ -4311,6 +4464,10 @@ declare namespace LocalJSX {
           * Emitted when selection changes.
          */
         "onPdsMultiselectChange"?: (event: PdsMultiselectCustomEvent<MultiselectChangeEventDetail>) => void;
+        /**
+          * Emitted when a new option is created.
+         */
+        "onPdsMultiselectCreate"?: (event: PdsMultiselectCustomEvent<MultiselectCreateEventDetail>) => void;
         /**
           * Emitted to request more options (pagination).
          */