@pine-ds/core 4.2.0 → 4.4.0

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

@@ -1,10 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { PluralForms } from '../../i18n';
-import type { MultiselectOption, MultiselectChangeEventDetail, MultiselectSearchEventDetail, MultiselectLoadOptionsEventDetail, MultiselectCreateEventDetail } from './multiselect-interface';
+import type { MultiselectOption, MultiselectChangeEventDetail, MultiselectSearchEventDetail, MultiselectLoadOptionsEventDetail, MultiselectCreateEventDetail, MultiselectOptionActionEventDetail } from './multiselect-interface';
 /**
  * @slot (default) - Static option elements for the multiselect
  * @slot empty - Custom empty state message when no options match
  * @slot loading - Custom loading indicator
+ * @slot trigger - Custom trigger element that replaces the built-in trigger. It opens the dropdown panel and receives `aria-expanded` and `aria-haspopup`; it supplies its own accessible name. Slot the focusable control itself, not a wrapper around it.
+ * @slot footer - Links or buttons displayed below the options inside the dropdown panel
  * @part trigger - The trigger surface that opens the dropdown panel
  * @part pill-toggle - The chevron button inside the inline pill trigger
  */
@@ -21,6 +23,8 @@ export declare class PdsMultiselect {
     private fetchTimeoutTimer?;
     private observer?;
     private cleanupAutoUpdate?;
+    private hoverlessQuery?;
+    private hasDisabledSlottedTrigger;
     el: HTMLPdsMultiselectElement;
     /**
      * A unique identifier used for the underlying component `id` attribute.
@@ -176,6 +180,13 @@ export declare class PdsMultiselect {
      * @default 3
      */
     maxInlinePills: number;
+    /**
+     * Display mode for options in the dropdown panel.
+     * `'text'` shows each option's text (default). `'chip'` shows each option as a
+     * pds-chip, with a dot when the option has a `dotColor`.
+     * @defaultValue 'text'
+     */
+    optionDisplay: 'text' | 'chip';
     /**
      * Error message to display.
      */
@@ -218,6 +229,21 @@ export declare class PdsMultiselect {
      * CSRF header name for authenticated requests. Defaults to `X-CSRF-Token`.
      */
     csrfHeaderName?: string;
+    /**
+     * Shows an action icon on each option that has an `actionIcon`, such as an edit pencil.
+     * The icon shows on the hovered or highlighted option; clicking it, or pressing Right Arrow on the highlighted option, emits `pdsMultiselectOptionAction`.
+     */
+    optionActions: boolean;
+    /**
+     * Tooltip for an option's action icon when the option has no `actionLabel`. Pass a translated string to localize it; `{text}` is interpolated.
+     * @defaultValue 'Edit {text}'
+     */
+    optionActionLabel: string;
+    /**
+     * Screen-reader hint on each option that has an action, naming the key that runs it. Pass a translated string to localize it; `{action}` is interpolated with the option's action label.
+     * @defaultValue 'Press Right Arrow to {action}'
+     */
+    optionActionDescription: string;
     isOpen: boolean;
     searchQuery: string;
     highlightedIndex: number;
@@ -227,6 +253,7 @@ export declare class PdsMultiselect {
     hasMore: boolean;
     creating: boolean;
     private removalAnnouncement;
+    private slottedTriggerEl?;
     private isOpening;
     private isClosingViaSelection;
     private initialAsyncFetchTriggered;
@@ -259,6 +286,11 @@ export declare class PdsMultiselect {
      * Equivalent to Sage's `onEscapeHook`. Use this to restore parent UI state or run cleanup when the user cancels their interaction.
      */
     pdsMultiselectDismiss: EventEmitter<void>;
+    /**
+     * Emitted when an option's action runs, from a click on its icon or Right Arrow on the highlighted option.
+     * The panel closes and focus returns to the trigger first, so a modal opened from the handler restores focus to the trigger.
+     */
+    pdsMultiselectOptionAction: EventEmitter<MultiselectOptionActionEventDetail>;
     private originalSearchEmitter?;
     connectedCallback(): void;
     componentWillLoad(): void;
@@ -269,6 +301,8 @@ export declare class PdsMultiselect {
     protected valueChanged(newValue: string[] | string): void;
     protected optionsChanged(): void;
     protected internalOptionsChanged(): void;
+    protected isOpenChanged(): void;
+    protected disabledChanged(): void;
     /**
      * Sets focus on the trigger button.
      */
@@ -277,13 +311,23 @@ export declare class PdsMultiselect {
      * Clears all selected values and resets the component.
      */
     clear(): Promise<void>;
+    /**
+     * Refetches the first page of options from `asyncUrl` for the current search, such as after an option is renamed
+     * or recolored elsewhere. Selected items in that page pick up the new text and dot color without emitting a change;
+     * other selected items keep the text and dot color they were last loaded with. Does nothing without `asyncUrl`.
+     */
+    refreshOptions(): Promise<void>;
     /**
      * Handle global keyboard events for accessibility.
      * Closes dropdown on Escape key press regardless of focus location.
      */
     handleWindowKeyDown(event: KeyboardEvent): void;
+    private get activeTriggerEl();
+    private syncSlottedTrigger;
+    private setSlottedTriggerDisabled;
     private setupMutationObserver;
     private updateOptionsFromSlot;
+    private parseSlottedOption;
     private clearAsyncFetchState;
     private debouncedFetchAsyncOptions;
     private syncSelectedItems;
@@ -298,18 +342,29 @@ export declare class PdsMultiselect {
     private handleTriggerKeyDown;
     private handleSearchInputChange;
     private handleSearchInputKeyDown;
+    private handleFooterKeyDown;
+    private getFooterTabbables;
+    private isCaretAtEndOfSearch;
+    private hasOptionAction;
+    private get isHoverless();
+    private runOptionAction;
     private handleContainerFocusOut;
     private openDropdown;
     private closeDropdown;
     private positionDropdown;
     private scrollOptionIntoView;
+    private emitChange;
     private toggleOption;
     private selectOption;
     private handleOptionMouseDown;
     private handleOptionMouseEnter;
+    private handleOptionActionMouseDown;
+    private handleOptionActionClick;
+    private handleFooterMouseDown;
     private handleScroll;
     private getGroupedRenderItems;
     private renderOption;
+    private renderOptionAction;
     private renderSelectedItemsList;
     private renderDropdown;
     private handlePillRemove;

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

@@ -92,6 +92,7 @@ export declare class PdsPopover {
      * Handles changes to the trigger slot
      */
     private handleTriggerSlotChange;
+    private linkTriggerToPortal;
     /**
      * Handles changes to the default slot (popover content)
      * When the popover is active, re-sync content with portal to handle dynamic updates

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

@@ -1,9 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot label - Content displayed as the switch label in place of the `label` text. Clicking it toggles the switch.
+ */
 export declare class PdsSwitch {
     private inheritedAttributes;
     private internals?;
     private readonly _type;
     el: HTMLPdsSwitchElement;
+    private hasLabelSlot;
     /**
      * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
      */
@@ -60,5 +64,6 @@ export declare class PdsSwitch {
     private updateFormValue;
     formStateRestoreCallback(state: string | FormData | null): void;
     componentWillLoad(): void;
+    private updateHasLabelSlot;
     render(): any;
 }