@pine-ds/core 4.11.0 → 4.12.0

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

@@ -1,4 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @part responsive-container - Exposes the horizontal scroll container for styling. Appears only when `responsive` is set.
+ * @part responsive-table - Set on the `pds-table` element itself when `responsive` is set, so `::part(responsive-table)` matches it only from a shadow root that contains it. Style `pds-table` directly instead.
+ * @part responsive-wrapper - Exposes the wrapper inside the scroll container for styling. Appears only when `responsive` is set.
+ * @part scroll-shadow-left - Exposes the scroll shadow at the inline-start edge for styling. Appears only when `responsive` is set.
+ * @part scroll-shadow-right - Exposes the scroll shadow at the inline-end edge for styling. Appears only when `responsive` is set.
+ * @part table - Set on the `pds-table` element itself, so `::part(table)` matches it only from a shadow root that contains it. Style `pds-table` directly instead.
+ * @part table-inner - Exposes the inner table element around the slotted head and body for styling. Appears only when `responsive` is set.
+ */
 export declare class PdsTable {
     el: HTMLPdsTableElement;
     private scrollContainer;
@@ -6,6 +15,11 @@ export declare class PdsTable {
     private _responsiveHandleResize;
     private _responsiveResizeObserver;
     private _teardownResponsive;
+    private _fixedLayoutResizeObserver;
+    private _fixedLayoutHandleResize;
+    private _fixedLayoutMutationObserver;
+    private _pendingColumnWidthsRecalc;
+    private hasLoaded;
     /**
      * Determines if the table displays with reduced table cell padding.
      */
@@ -19,7 +33,7 @@ export declare class PdsTable {
      */
     responsive: boolean;
     /**
-     * Determines if the should display a fixed first column.
+     * Determines if the table displays a fixed first column.
      */
     fixedColumn: boolean;
     /**
@@ -37,6 +51,18 @@ export declare class PdsTable {
      * @defaultValue false
      */
     rowDividers: boolean;
+    /**
+     * Sets how the table sizes its columns. With `auto`, each column is sized from its content,
+     * so columns can change width when the rows change (for example after a sort). With `fixed`,
+     * columns take the `width` set on their `pds-table-head-cell` and ignore their content;
+     * columns without a `width` share the remaining space. Under `responsive`, that remaining
+     * share keeps a 120px floor on narrow viewports where the other columns' widths already fill
+     * it, growing the table instead (scrollable) -- without `responsive` there's no floor, since
+     * there would be nothing to scroll the overflow it would create. Content longer than its
+     * column overflows, so add `truncate` to cells whose content may not fit.
+     * @defaultValue 'auto'
+     */
+    tableLayout: 'auto' | 'fixed';
     /**
      * The name of the column to sort by on initial load.
      * Must match the text content of a sortable column header.
@@ -59,7 +85,8 @@ export declare class PdsTable {
      */
     sortingDirection: 'asc' | 'desc';
     /**
-     * Event that is emitted when the select all checkbox is clicked, carrying the selected value.
+     * Event that is emitted by `pds-table-head` when the select all checkbox is clicked, carrying the selected value.
+     * It bubbles through the table; the table doesn't emit it itself.
      */
     pdsTableSelectAll: EventEmitter<{
         isSelected: boolean;
@@ -71,7 +98,54 @@ export declare class PdsTable {
      * @private
      */
     private applyDefaultSort;
+    /**
+     * Re-attaches the responsive scroll listeners and the fixed-layout width floor after the table
+     * reconnects (it was re-parented, reordered, or moved by a DOM morph) -- `disconnectedCallback`
+     * tears both down, and neither comes back on its own.
+     */
+    connectedCallback(): void;
+    private attachLifecycleBoundSetup;
     disconnectedCallback(): void;
+    /**
+     * `tableLayout` or `responsive` changing at runtime is handled here, deferred to
+     * `componentDidRender` rather than done directly -- a `@Watch` runs before this component's
+     * own re-render, and both the floor's measurement and the responsive scroll setup query
+     * `.pds-table-responsive-container`, which that re-render is what creates or removes. Reading
+     * it any earlier would still see the old tree.
+     */
+    private _pendingFixedLayoutInputsSync;
+    handleFixedLayoutInputsChange(): void;
+    componentDidRender(): void;
+    /**
+     * The floor only applies with `tableLayout="fixed"` and `responsive` both set, so either one
+     * changing at runtime can turn it on or off -- and `responsive` on its own also starts or stops
+     * the (separate) scroll listeners, same as it does on first load. A head cell only reads
+     * `tableLayout` during its own render, and the floor this sets lives in inline style, not a
+     * re-render -- so turning the floor off (including live, e.g. the Storybook control) needs
+     * both cleared explicitly, not just the observers torn down. The select-all column reads
+     * `tableLayout` the same way, one level up in `pds-table-head`'s own render, since it owns that
+     * cell rather than letting it through a `<slot>`. A `fixedColumn` cell's own sticky-shadow
+     * scroll listener is bound to this same container, cached on the cell itself -- it stays in
+     * light DOM across this change and never reconnects on its own, so it needs telling directly
+     * rather than finding out the container moved.
+     * @private
+     */
+    private syncFixedLayoutInputs;
+    private allHeadCells;
+    private allBodyCells;
+    /**
+     * Measures the explicit-width columns against the available space and gives the columns with
+     * no `width` of their own (which otherwise share whatever's left) a floor so none of them
+     * squeeze below `AUTO_COLUMN_FLOOR_WIDTH_PX`. Re-run on resize, since the responsive
+     * container's available width can change after load -- and only under `responsive`: that
+     * container is the one thing in this layout the floor's own growth can't also grow, which is
+     * what keeps this from measuring its own effect and oscillating.
+     * @private
+     */
+    private recalcAutoColumnWidths;
+    private setupFixedLayoutWidths;
+    private scheduleColumnWidthsRecalc;
+    private teardownFixedLayoutWidths;
     /**
      * Sets up responsive scrolling behavior for the table.
      *

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

@@ -37,7 +37,7 @@ export declare class PdsTabs {
      */
     divider?: boolean;
     /**
-     * Stretches the component so the active tab panel fills the remaining height.
+     * Stretches the component to fill its container's height. The active tab panel keeps the height of its content.
      * Requires the component to have a constrained height (e.g. a flex parent).
      * @defaultValue false
      */

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

@@ -2,6 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';
 /**
  * @slot action - Content to be displayed in the label area, typically for help icons or links
+ * @part action - Exposes the wrapper around the `action` slot for styling. Appears only when the `action` slot has content.
  */
 export declare class PdsTextarea {
     private nativeTextarea?;
@@ -14,26 +15,26 @@ export declare class PdsTextarea {
     private readonly _type;
     el: HTMLPdsTextareaElement;
     /**
-     * Emitted when the input loses focus.
+     * Emitted when the textarea loses focus.
      */
     pdsBlur: EventEmitter<FocusEvent>;
     /**
-     * Emitted when the input has focus.
+     * Emitted when the textarea has focus.
      */
     pdsFocus: EventEmitter<FocusEvent>;
     /**
-     * Emitted when a keyboard input occurs.
+     * Emitted after each `input` event, such as typing or pasting. With `debounce`, it waits until that many milliseconds have passed since the last one.
+     * `detail` has `value`, the current text, and `event`, the native `input` event.
      *
-     * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
-     * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
-     * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If
-     * the input is cleared on edit, the type is `null`.
+     * This event will not emit when programmatically setting the `value` property.
      */
     pdsInput: EventEmitter<TextareaInputEventDetail>;
     /**
-     * Event emitted whenever the value of the textarea changes.
+     * Emitted when the user changes the value and then leaves the textarea. `Enter` adds a new line, so it doesn't emit this event.
+     * `detail` has `value`, the text, and `event`, the native event behind it, usually `change`.
      *
-     * This event will not emit when programmatically setting the `value` property.
+     * This event will not emit when programmatically setting the `value` property, unless the field has focus at the time;
+     * then it emits when the field loses focus.
      */
     pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;
     /**
@@ -59,11 +60,11 @@ export declare class PdsTextarea {
      */
     disabled: boolean;
     /**
-     * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.
+     * Sets the number of milliseconds to wait after each input event before emitting `pdsInput`.
      */
     debounce?: number;
     /**
-     * Displays an error message below the textarea field.
+     * Displays an error message below the textarea while `invalid` is set.
      */
     errorMessage?: string;
     /**
@@ -71,7 +72,8 @@ export declare class PdsTextarea {
      */
     helperMessage?: string;
     /**
-     * Determines whether or not the textarea is invalid or throws an error.
+     * Determines whether or not the textarea is invalid. When `required` is set, the textarea sets it
+     * itself each time `pdsTextareaChange` fires, replacing a value you set.
      * @defaultValue false
      */
     invalid: boolean;
@@ -85,7 +87,7 @@ export declare class PdsTextarea {
      */
     hideLabel: boolean;
     /**
-     * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.
+     * Specifies the name. Submitted with the form name/value pair.
      */
     name: string;
     /**

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * @part dismiss
+ * @part dismiss - Exposes the dismiss button for styling. Appears unless `dismissible` is `false`.
  */
 export declare class PdsToast {
     el: HTMLPdsToastElement;
@@ -67,6 +67,10 @@ export declare class PdsToast {
     componentDidLoad(): void;
     disconnectedCallback(): void;
     handleDurationChange(newDuration: number): void;
+    /**
+     * Dismisses the toast, as the dismiss button and `duration` do: plays the exit animation and emits `pdsToastDismissed`, and the toast
+     * gets `hidden` on the next render, after the event. Works even when `dismissible` is `false`. The toast stays in the DOM.
+     */
     dismiss(): Promise<void>;
     private waitForDismissAnimation;
     private getDismissAnimationDurationMs;