@pine-ds/core 4.0.0-mercury.0 → 4.0.0

package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js

@@ -1,44 +1,186 @@
 import { Host, h } from "@stencil/core";
 import { downSmall, upSmall } from "@pine-ds/icons/icons";
+import { isScrolledFromInlineStart } from "../../../utils/scroll";
 export class PdsTableHeadCell {
     constructor() {
+        this.scrollContainer = null;
+        this.setupRetries = 0;
+        /**
+         * The direction of sorting.
+         */
+        this.sortingDirection = 'asc';
+        /**
+         * Determines if the table is currently scrolling.
+         * @defaultValue false
+         */
+        this.tableScrolling = false;
+        /**
+         * Determines if the table row is currently selected.
+         * @defaultValue false
+         */
+        this.isSelected = false;
+        /**
+         * Determines if the parent table-head has the border attribute.
+         * @defaultValue false
+         */
+        this.hasHeadBorder = false;
+        /**
+         * Determines if the parent table-head has the background attribute.
+         * @defaultValue false
+         */
+        this.hasHeadBackground = false;
+        /**
+         * Determines if this column is the currently active sorted column.
+         * @defaultValue false
+         */
+        this.isActive = false;
+        /**
+         * Handles scroll events to update fixed column shadow state.
+         * Updates the tableScrolling state to control CSS classes for fixed column shadows.
+         * @private
+         */
         this.handleScroll = () => {
-            if (this.tableRef.scrollLeft > 0) {
-                this.tableScrolling = true;
+            if (!this.scrollContainer) {
+                return;
             }
-            else {
-                this.tableScrolling = false;
+            try {
+                this.tableScrolling = isScrolledFromInlineStart(this.scrollContainer);
+            }
+            catch (error) {
+                console.warn('Scroll handler error:', error);
             }
         };
         this.toggleSort = () => {
             if (this.sortable) {
+                // Guard: return early if tableRef is not available
+                if (!this.tableRef) {
+                    return;
+                }
                 const column = this.hostElement.innerText.trim();
+                // Always toggle the direction (preserves original behavior)
                 this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';
-                this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {
-                    headCell.classList.remove('is-active');
+                // Reset all OTHER head cells to inactive state (skip the current one)
+                this.tableRef.querySelectorAll('pds-table-head-cell').forEach(async (headCell) => {
+                    // Skip clearing the current cell
+                    if (headCell !== this.hostElement) {
+                        const headCellComponent = headCell;
+                        await headCellComponent.clearActiveSort();
+                    }
                 });
-                this.hostElement.classList.toggle('is-active');
+                // Mark this column as active
+                this.isActive = true;
+                this.hostElement.classList.add('is-active');
+                // Emit the sort event with the current direction
                 this.pdsTableSort.emit({ column, direction: this.sortingDirection });
             }
         };
-        this.sortable = undefined;
-        this.sortingDirection = 'asc';
-        this.tableScrolling = false;
-        this.isSelected = false;
     }
-    componentWillRender() {
+    /**
+     * Programmatically sets this column as the active sort column with the specified direction.
+     * Used by pds-table to apply a default sort on initial load.
+     * @param direction - The sort direction to apply ('asc' or 'desc')
+     */
+    async setActiveSort(direction) {
+        if (!this.sortable)
+            return;
+        this.sortingDirection = direction;
+        this.isActive = true;
+        this.hostElement.classList.add('is-active');
+    }
+    /**
+     * Clears the active sort state from this column.
+     * Used internally when another column becomes active.
+     */
+    async clearActiveSort() {
+        this.isActive = false;
+        this.hostElement.classList.remove('is-active');
+    }
+    componentWillLoad() {
+        // Set initial references and state before first render
         this.tableRef = this.hostElement.closest('pds-table');
+        const tableHead = this.hostElement.closest('pds-table-head');
+        if (tableHead) {
+            this.hasHeadBorder = tableHead.hasAttribute('border');
+            this.hasHeadBackground = tableHead.hasAttribute('background');
+        }
     }
     componentDidLoad() {
         if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {
-            this.tableRef.addEventListener('scroll', this.handleScroll);
+            // For responsive tables with fixed columns, set up scroll detection
+            // This enables the first column header to show a shadow when the table is scrolled horizontally
+            this.setupScrollListener();
+        }
+        // Watch for changes to the parent table-head's border and background attributes
+        const tableHead = this.hostElement.closest('pds-table-head');
+        if (tableHead && typeof MutationObserver !== 'undefined') {
+            // Defensive guard: disconnect existing observer before creating a new one
+            if (this.headObserver) {
+                this.headObserver.disconnect();
+            }
+            this.headObserver = new MutationObserver(() => {
+                // Update state when border or background attributes change
+                this.hasHeadBorder = tableHead.hasAttribute('border');
+                this.hasHeadBackground = tableHead.hasAttribute('background');
+            });
+            this.headObserver.observe(tableHead, {
+                attributes: true,
+                attributeFilter: ['border', 'background']
+            });
+        }
+    }
+    disconnectedCallback() {
+        this.cleanupScrollListener();
+        if (this.headObserver) {
+            this.headObserver.disconnect();
+        }
+    }
+    setupScrollListener() {
+        var _a;
+        if (!this.tableRef)
+            return;
+        // Query shadowRoot once and cache the container
+        const container = (_a = this.tableRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-table-responsive-container');
+        if (container) {
+            // Container available immediately
+            this.scrollContainer = container;
+            this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
+            this.handleScroll(); // Initial check
+            this.setupRetries = 0; // Reset counter on success
+        }
+        else {
+            // Container not ready, set up timer for retry with bounds
+            this.setupTimer = window.setTimeout(() => {
+                if (this.scrollContainer)
+                    return; // Already found
+                this.setupRetries = (this.setupRetries || 0) + 1;
+                if (this.setupRetries <= 50) {
+                    this.setupScrollListener();
+                }
+                else {
+                    console.warn('Failed to find responsive container after 50 attempts');
+                }
+            }, 100);
+        }
+    }
+    cleanupScrollListener() {
+        if (this.scrollContainer) {
+            this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+            this.scrollContainer = null;
+        }
+        if (this.setupTimer !== undefined) {
+            window.clearTimeout(this.setupTimer);
+            this.setupTimer = undefined;
         }
+        this.setupRetries = 0; // Reset retry counter
     }
     classNames() {
         const classNames = [];
         if (this.tableRef && this.tableRef.compact) {
             classNames.push('is-compact');
         }
+        if (this.cellAlign) {
+            classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);
+        }
         if (this.sortable) {
             classNames.push('is-sortable');
         }
@@ -48,14 +190,20 @@ export class PdsTableHeadCell {
         if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {
             classNames.push('has-scrolled');
         }
-        return classNames.join('  ');
+        if (this.hasHeadBackground) {
+            classNames.push('has-head-background');
+        }
+        if (this.hasHeadBorder) {
+            classNames.push('has-head-border');
+        }
+        return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '72e242a22774d4b534b7a8653673606e0e9c6ef1', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
+        return (h(Host, { key: 'e0a30c326b81e0cc3fa8c0392b61f2a6625aad71', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '08e1d5aab1761ed097e2669716884196c946bcc3' }), this.sortable && (h("pds-icon", { key: '43421a2b1401426878601468acee702ce45404bf', icon: this.sortingDirection === 'asc' ? upSmall : downSmall }))));
+                : {} }, h("slot", { key: '3d0012983b2b552e4e61a3d84717afb9de8e572f' }), this.sortable && this.isActive && (h("pds-icon", { key: '326607f90b12ecc26a731dc696d0a3b8ebb0960c', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
     }
     static get is() { return "pds-table-head-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -71,6 +219,25 @@ export class PdsTableHeadCell {
     }
     static get properties() {
         return {
+            "cellAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'end' | 'justify'",
+                    "resolved": "\"center\" | \"end\" | \"justify\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the text alignment within the head cell."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cell-align"
+            },
             "sortable": {
                 "type": "boolean",
                 "mutable": false,
@@ -85,8 +252,10 @@ export class PdsTableHeadCell {
                     "tags": [],
                     "text": "Determines whether the table column is sortable when set to `true`."
                 },
-                "attribute": "sortable",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sortable"
             }
         };
     }
@@ -94,7 +263,10 @@ export class PdsTableHeadCell {
         return {
             "sortingDirection": {},
             "tableScrolling": {},
-            "isSelected": {}
+            "isSelected": {},
+            "hasHeadBorder": {},
+            "hasHeadBackground": {},
+            "isActive": {}
         };
     }
     static get events() {
@@ -115,6 +287,50 @@ export class PdsTableHeadCell {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "setActiveSort": {
+                "complexType": {
+                    "signature": "(direction: \"asc\" | \"desc\") => Promise<void>",
+                    "parameters": [{
+                            "name": "direction",
+                            "type": "\"desc\" | \"asc\"",
+                            "docs": "- The sort direction to apply ('asc' or 'desc')"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically sets this column as the active sort column with the specified direction.\nUsed by pds-table to apply a default sort on initial load.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "direction - The sort direction to apply ('asc' or 'desc')"
+                        }]
+                }
+            },
+            "clearActiveSort": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the active sort state from this column.\nUsed internally when another column becomes active.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=pds-table-head-cell.js.map

package/dist/collection/components/pds-table/pds-table-head-cell/stories/pds-table-head-cell.stories.js

@@ -1,24 +1,29 @@
 import { html } from 'lit-html';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
-  argTypes: extractArgTypes('pds-table-head-cell'),
+  argTypes: {
+    cellAlign: {
+      control: {
+        type: 'select',
+      },
+      options: ['start', 'center', 'end', 'justify'],
+    },
+  },
   component: 'pds-table-head-cell',
-  decorators: [withActions],
   title: 'components/Table/Head',
 };
 
 const BaseTemplate = (args) => html`
 <pds-table>
   <pds-table-head>
-    <pds-table-head-cell sortable=${args.sortable}>Column Heading Alpha</pds-table-head-cell>
-    <pds-table-head-cell sortable=${args.sortable}>Column Heading Beta</pds-table-head-cell>
-    <pds-table-head-cell sortable=${args.sortable}>Column Heading Charlie</pds-table-head-cell>
+    <pds-table-head-cell sortable=${args.sortable} cell-align=${args.cellAlign}>Column Heading Alpha</pds-table-head-cell>
+    <pds-table-head-cell sortable=${args.sortable} cell-align=${args.cellAlign}>Column Heading Beta</pds-table-head-cell>
+    <pds-table-head-cell sortable=${args.sortable} cell-align=${args.cellAlign}>Column Heading Charlie</pds-table-head-cell>
   </pds-table-head>
 </pds-table>`;
 
 export const Default = BaseTemplate.bind();
 Default.args = {
   sortable: false,
+  cellAlign: 'start',
 };

package/dist/collection/components/pds-table/pds-table-row/pds-table-row.css

@@ -1,15 +1,14 @@
 :host {
-  --color-background-fixed: var(--pine-color-white);
-  --color-background-interactive: var(--pine-color-grey-200);
+  --color-background-interactive: var(--pine-color-background-subtle);
   border-color: inherit;
   display: table-row;
   vertical-align: inherit;
 }
 :host::part(checkbox-cell) {
-  background-color: var(--color-background-fixed);
-  left: 0;
+  background-color: var(--pine-color-background-container);
+  inset-inline-start: var(--pine-dimension-none);
   position: sticky;
-  z-index: 1;
+  z-index: var(--pine-z-index-raised);
 }
 
 :host(:hover),
@@ -19,4 +18,14 @@
 :host(.is-selected)::part(checkbox-cell),
 :host(.is-selected) ::slotted(pds-table-cell) {
   background: var(--color-background-interactive);
+}
+
+:host(.has-divider) ::slotted(pds-table-cell),
+:host(.has-divider) pds-table-cell {
+  border-block-end: var(--pine-border-width-thin) solid var(--pine-color-border-subtle);
+}
+
+:host(.has-divider.is-last-row) ::slotted(pds-table-cell),
+:host(.has-divider.is-last-row) pds-table-cell {
+  border-block-end: 0;
 }

package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js

@@ -2,8 +2,20 @@ import { Host, h } from "@stencil/core";
 import { closest } from "../../../utils/closest";
 export class PdsTableRow {
     constructor() {
-        this.handleClick = () => {
-            this.isSelected = !this.isSelected; // Toggle the selected state
+        this.observer = null;
+        this.bodyObserver = null;
+        /**
+         * Determines if the row should have a divider border.
+         * @defaultValue false
+         */
+        this.hasDivider = false;
+        /**
+         * Determines if this is the last row in the table body.
+         * @defaultValue false
+         */
+        this.isLastRow = false;
+        this.handleCheckboxChange = (event) => {
+            this.isSelected = event.detail.checked;
             this.handleSelect(this.isSelected);
         };
         this.handleSelect = (isSelected) => {
@@ -22,17 +34,23 @@ export class PdsTableRow {
             const uniqueId = `${randomString}-${timestamp}`;
             return uniqueId;
         };
-        this.indeterminate = undefined;
-        this.isSelected = undefined;
     }
     classNames() {
         const classNames = [];
         if (this.isSelected) {
             classNames.push("is-selected");
         }
-        return classNames.join('  ');
+        if (this.hasDivider) {
+            classNames.push("has-divider");
+        }
+        if (this.isLastRow) {
+            classNames.push("is-last-row");
+        }
+        return classNames.join(' ');
     }
     componentWillRender() {
+        // Always refresh tableRef to get latest prop values
+        // This ensures we pick up changes to parent table props
         this.tableRef = this.hostElement.closest('pds-table');
         if (this.tableRef && this.tableRef.fixedColumn) {
             const tableCell = this.hostElement.querySelector('pds-table-cell');
@@ -40,12 +58,86 @@ export class PdsTableRow {
         }
     }
     componentWillLoad() {
+        // Handle initial selection state
         if (this.isSelected) {
             this.handleSelect(this.isSelected);
         }
+        // Note: tableRef, observers, and divider state are set up in connectedCallback
+        // which runs before componentWillLoad and also handles row re-attachment after sorting
+    }
+    connectedCallback() {
+        // When a row is re-attached to the DOM (e.g., after sorting),
+        // we need to re-setup the observers since disconnectedCallback cleared them
+        // Note: componentDidLoad only fires once, but connectedCallback fires every time
+        // the element is attached to the DOM (including after being moved)
+        this.tableRef = this.hostElement.closest('pds-table');
+        this.setupObservers();
+        this.updateDividerState();
+    }
+    disconnectedCallback() {
+        this.cleanupObservers();
+    }
+    cleanupObservers() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+        if (this.bodyObserver) {
+            this.bodyObserver.disconnect();
+            this.bodyObserver = null;
+        }
+    }
+    setupObservers() {
+        // Clean up any existing observers first
+        this.cleanupObservers();
+        // Watch for changes to the parent table's row-dividers attribute
+        if (this.tableRef && typeof MutationObserver !== 'undefined') {
+            this.observer = new MutationObserver(() => {
+                this.updateDividerState();
+            });
+            this.observer.observe(this.tableRef, {
+                attributes: true,
+                attributeFilter: ['row-dividers']
+            });
+        }
+        // Watch for child list changes in table body (e.g., when rows are reordered during sorting)
+        const tableBody = this.hostElement.closest('pds-table-body');
+        if (tableBody && typeof MutationObserver !== 'undefined') {
+            this.bodyObserver = new MutationObserver(() => {
+                this.updateLastRowState();
+            });
+            this.bodyObserver.observe(tableBody, {
+                childList: true
+            });
+        }
+    }
+    shouldHaveDivider() {
+        if (!this.tableRef) {
+            this.tableRef = this.hostElement.closest('pds-table');
+        }
+        // Reads the parent pds-table component's rowDividers property value directly
+        return !!(this.tableRef && this.tableRef.rowDividers);
+    }
+    updateDividerState() {
+        this.hasDivider = this.shouldHaveDivider();
+        this.updateLastRowState();
+    }
+    updateLastRowState() {
+        if (!this.hasDivider) {
+            this.isLastRow = false;
+            return;
+        }
+        const tableBody = this.hostElement.closest('pds-table-body');
+        if (tableBody) {
+            const rows = Array.from(tableBody.querySelectorAll('pds-table-row'));
+            this.isLastRow = rows[rows.length - 1] === this.hostElement;
+        }
+        else {
+            this.isLastRow = false;
+        }
     }
     render() {
-        return (h(Host, { key: 'dbfba35e818a96281f5df7e51e60f0bbaf4d5527', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: 'a0d9118e63db0829f4352875cbacf76c11978fff', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '60ebde7bb2e745af55e3713b952f963d50396485', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", labelHidden: true, checked: this.isSelected }))), h("slot", { key: '97f90a8d36781f3b278f83b16c778d5e2b6e9bce' })));
+        return (h(Host, { key: '6bbd8bb7cd1f90de0e418748bf8d3b9240ab0cb8', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '9a92396654e7cdf819536335ebe95169d4d4c26d', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: 'bf61a00da4d3c19280aae90d8eaff9515a716c52', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: 'f77887e878913bea5e0ca0a281a639285a65f1c1' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }
@@ -73,10 +165,12 @@ export class PdsTableRow {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates that the selection state is indeterminate."
+                    "text": "Determines if the row selected is in an indeterminate state."
                 },
-                "attribute": "indeterminate",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indeterminate"
             },
             "isSelected": {
                 "type": "boolean",
@@ -90,13 +184,21 @@ export class PdsTableRow {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A local state to track whether the row is currently selected."
+                    "text": "Determines if the table row is currently selected."
                 },
-                "attribute": "is-selected",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-selected"
             }
         };
     }
+    static get states() {
+        return {
+            "hasDivider": {},
+            "isLastRow": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "pdsTableRowSelected",
@@ -117,4 +219,3 @@ export class PdsTableRow {
     }
     static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=pds-table-row.js.map

package/dist/collection/components/pds-table/pds-table-row/stories/pds-table-row.stories.js

@@ -1,16 +1,10 @@
 import { html } from 'lit-html';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
+
 
 export default {
-  argTypes: extractArgTypes('pds-table-row'),
+
   component: 'pds-table-row',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onclick', 'pdsTableRowSelected'],
-    },
-  },
+  parameters: {},
   title: 'components/Table/Rows',
 };