@justeattakeaway/pie-data-table 0.0.0-snapshot-release-20251014131309 → 0.0.0-snapshot-release-20251111101641

package/dist/index.d.ts

@@ -1,62 +1,20 @@
-import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import { DataTableProps, Column, DataTableAdditionalRow } from './defs';
-export * from './defs';
-declare const componentSelector = "pie-data-table";
-declare const PieDataTable_base: import('@justeattakeaway/pie-webc-core').GenericConstructor<import('@justeattakeaway/pie-webc-core').RTLInterface> & typeof PieElement;
-/**
- * @tagname pie-data-table
- */
-export declare class PieDataTable extends PieDataTable_base implements DataTableProps {
-    /**
-     * Array of column definitions
-     */
-    columns: Column[];
-    /**
-     * Array of data objects to display
-     */
-    data: Record<string, unknown>[];
-    /**
-     * Arbitrary additional rows to display at the bottom of the table
-     */
-    additionalRows?: DataTableAdditionalRow[];
-    /**
-     * Maps text alignment values to corresponding CSS classes
-     *
-     * @param prefix - The prefix for the CSS class
-     * @param textAlign - The text alignment value
-     * @returns An object with CSS classes as keys and boolean values indicating whether the class should be applied
-     */
-    private mapTextAlignClasses;
-    /**
-     * Renders a header cell for the table
-     * @param column - The column definition to render
-     */
-    private renderHeaderCell;
-    /**
-     * Renders the table header
-     */
-    private renderTableHeader;
-    /**
-     * Renders a table cell for the given column and row
-     * @param column - The column definition to render
-     * @param row - The data object for the current row
-     */
-    private renderTableCell;
-    /**
-     * Renders the table rows
-     */
-    private renderTableRows;
-    /**
-     * Renders the additional rows for the table
-     */
-    private renderAdditionalRows;
-    private renderHTMLTable;
-    render(): import('lit-html').TemplateResult<1>;
-    static styles: import('lit').CSSResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieDataTable;
-    }
-}
-//# sourceMappingURL=index.d.ts.map
+import { CSSResult } from 'lit';
+import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import { TemplateResult } from 'lit-html';
+
+export declare interface DataTableProps {
+}
+
+/**
+ * @tagname pie-data-table
+ */
+export declare class PieDataTable extends PieDataTable_base implements DataTableProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare const PieDataTable_base: GenericConstructor<RTLInterface> & typeof PieElement;
+
+export { }

package/dist/index.js

@@ -1,159 +1,27 @@
-import { nothing as c, html as l, unsafeCSS as g } from "lit";
-import { property as h } from "lit/decorators.js";
-import { P as u } from "./PieElement-DgHPBi0_.js";
-import { RtlMixin as p, safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
-import { classMap as n } from "lit/directives/class-map.js";
-const v = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-data-table{--data-table-background-color: var(--dt-color-container-default);--data-table-background-hover-or-active: var(--dt-color-container-subtle);--data-table-border-color: var(--dt-color-border-default);--data-table-border-radius: var(--dt-radius-rounded-c);--data-table-text-color: var(--dt-color-content-default);background-color:var(--data-table-background-color);border:1px solid var(--data-table-border-color);border-radius:var(--data-table-border-radius);color:var(--data-table-text-color);width:100%;overflow:hidden}.c-data-table table{border-spacing:0;width:100%}.c-data-table tbody{overflow:auto}.c-data-table tbody tr:hover{background-color:var(--data-table-background-hover-or-active)}.c-data-table-head-cell{background-color:transparent;font-weight:var(--dt-font-weight-bold);color:var(--data-table-header-color);text-align:left}.c-data-table-head-cell-text-align--left,.c-data-table-cell-text-align--left{text-align:left}.c-data-table-head-cell-text-align--right,.c-data-table-cell-text-align--right{text-align:right}.c-data-table-head-cell-text-align--center,.c-data-table-cell-text-align--center{text-align:center}.c-data-table-cell,.c-data-table-head-cell{padding:var(--dt-spacing-d);border-bottom:1px solid var(--data-table-border-color)}.c-data-table-cell--hidden,.c-data-table-row--hidden{display:none}", f = {
-  additionalRows: []
+import { LitElement as b, html as d, unsafeCSS as f } from "lit";
+import { RtlMixin as h, safeCustomElement as v } from "@justeattakeaway/pie-webc-core";
+const e = class e extends b {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", e.v);
+  }
 };
-var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, a, e, d) => {
-  for (var r = d > 1 ? void 0 : d ? x(a, e) : a, s = t.length - 1, b; s >= 0; s--)
-    (b = t[s]) && (r = (d ? b(a, e, r) : b(r)) || r);
-  return d && r && w(a, e, r), r;
+e.v = "0.1.6";
+let r = e;
+const c = "*,*:after,*:before{box-sizing:inherit}:host{display:block}";
+var u = Object.getOwnPropertyDescriptor, m = (i, l, p, o) => {
+  for (var t = o > 1 ? void 0 : o ? u(l, p) : l, s = i.length - 1, n; s >= 0; s--)
+    (n = i[s]) && (t = n(t) || t);
+  return t;
 };
-let o = class extends p(u) {
-  constructor() {
-    super(...arguments), this.columns = [], this.data = [], this.additionalRows = f.additionalRows;
-  }
-  /**
-   * Maps text alignment values to corresponding CSS classes
-   *
-   * @param prefix - The prefix for the CSS class
-   * @param textAlign - The text alignment value
-   * @returns An object with CSS classes as keys and boolean values indicating whether the class should be applied
-   */
-  mapTextAlignClasses(t, a) {
-    return {
-      [`${t}-text-align--left`]: a === "left",
-      [`${t}-text-align--right`]: a === "right",
-      [`${t}-text-align--center`]: a === "center"
-    };
-  }
-  /**
-   * Renders a header cell for the table
-   * @param column - The column definition to render
-   */
-  renderHeaderCell(t) {
-    const { width: a, heading: e, textAlign: d } = t, r = a ? `width: ${a}` : c, s = {
-      "c-data-table-head-cell": !0,
-      ...this.mapTextAlignClasses("c-data-table-head-cell", d)
-    };
-    return l`
-            <th style="${String(r)}" class="${n(s)}">
-                ${e}
-            </th>
-        `;
-  }
-  /**
-   * Renders the table header
-   */
-  renderTableHeader() {
-    return l`
-            <thead>
-                <tr>
-                    ${this.columns.map((t) => this.renderHeaderCell(t))}
-                </tr>
-            </thead>
-        `;
-  }
-  /**
-   * Renders a table cell for the given column and row
-   * @param column - The column definition to render
-   * @param row - The data object for the current row
-   */
-  renderTableCell(t, a) {
-    const e = {
-      "c-data-table-cell": !0,
-      ...this.mapTextAlignClasses("c-data-table-cell", t.textAlign)
-    };
-    return l`
-            <td class="${n(e)}">
-                ${t.accessor ? a[t.accessor] : ""}
-            </td>
-        `;
-  }
-  /**
-   * Renders the table rows
-   */
-  renderTableRows() {
-    return l`
-            <tbody>
-                ${this.data.map((t) => l`
-                    <tr class="c-data-table-row">
-                        ${this.columns.map((a) => this.renderTableCell(a, t))}
-                    </tr>
-                `)} 
-            </tbody>
-        `;
-  }
-  /**
-   * Renders the additional rows for the table
-   */
-  renderAdditionalRows() {
-    return l`
-            <tfoot>
-                ${this.additionalRows && this.additionalRows.length > 0 && this.additionalRows.map((t) => {
-      const a = {
-        "c-data-table-row": !0,
-        "c-data-table-row--hidden": !!t.hideRow
-      };
-      return l`
-                        <tr class="${n(a)}">
-                        ${t.cells.map((e) => {
-        const d = {
-          "c-data-table-cell": !0,
-          "c-data-table-cell--hidden": !!e.hideCell,
-          ...this.mapTextAlignClasses("c-data-table-cell", e.textAlign)
-        };
-        return l`
-                                <td
-                                    class="${n(d)}"
-                                    colspan=${e.colSpan || 1}
-                                >
-                                    ${e.content}
-                                </td>
-                            `;
-      })}
-                        </tr>
-                    `;
-    })}
-            </tfoot>
-        `;
-  }
-  renderHTMLTable() {
-    return l`
-            <table>
-                ${this.columns.length > 0 ? this.renderTableHeader() : c}
-                ${this.data.length > 0 ? this.renderTableRows() : c}
-                ${this.additionalRows && this.additionalRows.length > 0 ? this.renderAdditionalRows() : c}
-            </table>
-        `;
-  }
+let a = class extends h(r) {
   render() {
-    return l`
-            <div class="${n({
-      "c-data-table": !0
-    })}">
-                <slot name="table-header"></slot>
-                ${this.data.length > 0 && this.columns.length > 0 ? this.renderHTMLTable() : l`<slot></slot>`}
-            </div>
-        `;
+    return d`<h1 data-test-id="pie-data-table">Hello world!</h1>`;
   }
 };
-o.styles = g(v);
-i([
-  h({ type: Array })
-], o.prototype, "columns", 2);
-i([
-  h({ type: Array })
-], o.prototype, "data", 2);
-i([
-  h({ type: Array })
-], o.prototype, "additionalRows", 2);
-o = i([
-  m("pie-data-table")
-], o);
+a.styles = f(c);
+a = m([
+  v("pie-data-table")
+], a);
 export {
-  o as PieDataTable,
-  f as defaultProps
+  a as PieDataTable
 };

package/dist/react.d.ts

@@ -1,7 +1,25 @@
-import { PieDataTable as PieDataTableLit } from './index';
-import { DataTableProps } from './defs';
-import * as React from 'react';
-export * from './defs';
-type ReactBaseType = React.HTMLAttributes<HTMLElement>;
-export declare const PieDataTable: React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableProps> & React.RefAttributes<PieDataTableLit> & ReactBaseType>;
-//# sourceMappingURL=react.d.ts.map
+import { CSSResult } from 'lit';
+import { GenericConstructor } from '@justeattakeaway/pie-webc-core';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import * as React_2 from 'react';
+import { RTLInterface } from '@justeattakeaway/pie-webc-core';
+import { TemplateResult } from 'lit-html';
+
+export declare interface DataTableProps {
+}
+
+export declare const PieDataTable: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<DataTableProps> & React_2.RefAttributes<PieDataTable_2> & ReactBaseType>;
+
+/**
+ * @tagname pie-data-table
+ */
+declare class PieDataTable_2 extends PieDataTable_base implements DataTableProps {
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+declare const PieDataTable_base: GenericConstructor<RTLInterface> & typeof PieElement;
+
+declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
+
+export { }

package/dist/react.js

@@ -1,15 +1,13 @@
 import * as a from "react";
 import { createComponent as e } from "@lit/react";
 import { PieDataTable as t } from "./index.js";
-import { defaultProps as s } from "./index.js";
 const o = e({
   displayName: "PieDataTable",
   elementClass: t,
   react: a,
   tagName: "pie-data-table",
   events: {}
-}), i = o;
+}), l = o;
 export {
-  i as PieDataTable,
-  s as defaultProps
+  l as PieDataTable
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-data-table",
   "description": "PIE Design System Data Table built using Web Components",
-  "version": "0.0.0-snapshot-release-20251014131309",
+  "version": "0.0.0-snapshot-release-20251111101641",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,12 +37,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.22.0",
+    "@justeattakeaway/pie-css": "0.0.0-snapshot-release-20251111101641",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "2.0.0"
+    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20251111101641"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/data-table.scss

@@ -1,66 +1,7 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
 :host {
+    // Note: For consistency sake, the recommended display should be either
+    // "block" or "inline-block", otherwise it can be ommited for floating elements
     display: block;
 }
-
-.c-data-table {
-  --data-table-background-color: var(--dt-color-container-default);
-  --data-table-background-hover-or-active: var(--dt-color-container-subtle);
-  --data-table-border-color: var(--dt-color-border-default);
-  --data-table-border-radius: var(--dt-radius-rounded-c);
-  --data-table-text-color: var(--dt-color-content-default);
-
-  background-color: var(--data-table-background-color);
-  border: 1px solid var(--data-table-border-color);
-  border-radius: var(--data-table-border-radius);
-  color: var(--data-table-text-color);
-
-  width: 100%;
-  overflow: hidden;
-  
-  table {
-    border-spacing: 0;
-    width: 100%;
-  }
-
-  tbody {
-    overflow: auto;
-  }
-
-  tbody tr:hover {
-    background-color: var(--data-table-background-hover-or-active);
-  }
-}
-
-.c-data-table-head-cell {
-  background-color: transparent;
-  font-weight: var(--dt-font-weight-bold);
-  color: var(--data-table-header-color);
-  text-align: left;
-}
-
-.c-data-table-head-cell-text-align--left, 
-.c-data-table-cell-text-align--left {
-  text-align: left;
-}
-
-.c-data-table-head-cell-text-align--right, 
-.c-data-table-cell-text-align--right {
-  text-align: right;
-}
-
-.c-data-table-head-cell-text-align--center,
-.c-data-table-cell-text-align--center {
-  text-align: center;
-}
-
-.c-data-table-cell, .c-data-table-head-cell {
-  padding: var(--dt-spacing-d);
-  border-bottom: 1px solid var(--data-table-border-color);
-}
-
-.c-data-table-cell--hidden, 
-.c-data-table-row--hidden {
-  display: none;
-}

package/src/defs.ts

@@ -1,60 +1,3 @@
-import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
-
-type TextAlign = 'left' | 'right' | 'center';
-
-export interface Column {
-  /**
-   * Unique identifier for the column
-   * */
-  id: string;
-  /**
-   * Optional property to specify the display name for the column heading
-   * */
-  heading: string;
-  /**
-   * Optional property to specify the text alignment of the column
-   * */
-  textAlign?: TextAlign;
-
-  /**
-   * Optional property to specify the width of the column
-   * */
-  width?: string;
-  /**
-   * Optional property to specify the key in the data object to display in this column
-   * */
-  accessor?: string;
-}
-
-export type AdditionalCell = {
-  content: string | number;
-  textAlign?: TextAlign;
-  colSpan?: number;
-  hideCell?: boolean;
-};
-
-export type DataTableAdditionalRow = {
-  cells: AdditionalCell[];
-  hideRow?: boolean;
-};
-
-export interface DataTableProps {
-  /**
-   * Array of column definitions
-   */
-  columns?: Column[];
-
-  /**
-   * Array of data objects to display
-   */
-  data?: Record<string, unknown>[];
-
-  /**
-   * Arbitrary additional rows to display at the bottom of the table
-   */
-  additionalRows?: DataTableAdditionalRow[];
-}
-
-export const defaultProps: ComponentDefaultProps<DataTableProps, keyof Omit<DataTableProps, 'columns' | 'data' >> = {
-    additionalRows: [],
-};
+// TODO - please remove the eslint disable comment below when you add props to this interface
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface DataTableProps {}

package/src/index.ts

@@ -1,23 +1,9 @@
-import { html, nothing, unsafeCSS } from 'lit';
-import { property } from 'lit/decorators.js';
+import { html, unsafeCSS } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { RtlMixin, safeCustomElement } from '@justeattakeaway/pie-webc-core';
-import { classMap } from 'lit/directives/class-map.js';
-
-// import '@justeattakeaway/pie-data-table-contents';
-// import '@justeattakeaway/pie-data-table-head';
-// import '@justeattakeaway/pie-data-table-head-cell';
-// import '@justeattakeaway/pie-data-table-body';
-// import '@justeattakeaway/pie-data-table-row';
-// import '@justeattakeaway/pie-data-table-cell';
 
 import styles from './data-table.scss?inline';
-import {
-    type DataTableProps,
-    type Column,
-    type DataTableAdditionalRow,
-    defaultProps,
-} from './defs';
+import { type DataTableProps } from './defs';
 
 // Valid values available to consumers
 export * from './defs';
@@ -29,163 +15,8 @@ const componentSelector = 'pie-data-table';
  */
 @safeCustomElement('pie-data-table')
 export class PieDataTable extends RtlMixin(PieElement) implements DataTableProps {
-    /**
-     * Array of column definitions
-     */
-    @property({ type: Array })
-    public columns: Column[] = [];
-
-    /**
-     * Array of data objects to display
-     */
-    @property({ type: Array })
-    public data: Record<string, unknown>[] = [];
-
-    /**
-     * Arbitrary additional rows to display at the bottom of the table
-     */
-    @property({ type: Array })
-    public additionalRows?: DataTableAdditionalRow[] = defaultProps.additionalRows;
-
-    /**
-     * Maps text alignment values to corresponding CSS classes
-     *
-     * @param prefix - The prefix for the CSS class
-     * @param textAlign - The text alignment value
-     * @returns An object with CSS classes as keys and boolean values indicating whether the class should be applied
-     */
-    private mapTextAlignClasses (prefix: string, textAlign?: string) {
-        return {
-            [`${prefix}-text-align--left`]: textAlign === 'left',
-            [`${prefix}-text-align--right`]: textAlign === 'right',
-            [`${prefix}-text-align--center`]: textAlign === 'center',
-        };
-    }
-
-    /**
-     * Renders a header cell for the table
-     * @param column - The column definition to render
-     */
-    private renderHeaderCell (column: Column) {
-        const { width, heading, textAlign } = column;
-        const style = width ? `width: ${width}` : nothing;
-        const classes = {
-            'c-data-table-head-cell': true,
-            ...this.mapTextAlignClasses('c-data-table-head-cell', textAlign),
-        };
-
-        return html`
-            <th style="${String(style)}" class="${classMap(classes)}">
-                ${heading}
-            </th>
-        `;
-    }
-
-    /**
-     * Renders the table header
-     */
-    private renderTableHeader () {
-        return html`
-            <thead>
-                <tr>
-                    ${this.columns.map((column) => this.renderHeaderCell(column))}
-                </tr>
-            </thead>
-        `;
-    }
-
-    /**
-     * Renders a table cell for the given column and row
-     * @param column - The column definition to render
-     * @param row - The data object for the current row
-     */
-    private renderTableCell (column: Column, row: Record<string, unknown>) {
-        const classes = {
-            'c-data-table-cell': true,
-            ...this.mapTextAlignClasses('c-data-table-cell', column.textAlign),
-        };
-
-        return html`
-            <td class="${classMap(classes)}">
-                ${column.accessor ? row[column.accessor] : ''}
-            </td>
-        `;
-    }
-
-    /**
-     * Renders the table rows
-     */
-    private renderTableRows () {
-        return html`
-            <tbody>
-                ${this.data.map((row) => html`
-                    <tr class="c-data-table-row">
-                        ${this.columns.map((column) => this.renderTableCell(column, row))}
-                    </tr>
-                `)} 
-            </tbody>
-        `;
-    }
-
-    /**
-     * Renders the additional rows for the table
-     */
-    private renderAdditionalRows () {
-        /* eslint-disable indent */
-        return html`
-            <tfoot>
-                ${this.additionalRows && this.additionalRows.length > 0 && this.additionalRows.map((row) => {
-                    const rowClasses = {
-                        'c-data-table-row': true,
-                        'c-data-table-row--hidden': !!row.hideRow,
-                    };
-                    return html`
-                        <tr class="${classMap(rowClasses)}">
-                        ${row.cells.map((cell) => {
-                            const cellClasses = {
-                                'c-data-table-cell': true,
-                                'c-data-table-cell--hidden': !!cell.hideCell,
-                                ...this.mapTextAlignClasses('c-data-table-cell', cell.textAlign),
-                            };
-
-                            return html`
-                                <td
-                                    class="${classMap(cellClasses)}"
-                                    colspan=${cell.colSpan || 1}
-                                >
-                                    ${cell.content}
-                                </td>
-                            `;
-                        })}
-                        </tr>
-                    `;
-                })}
-            </tfoot>
-        `;
-        /* eslint-enable indent */
-    }
-
-    private renderHTMLTable () {
-        return html`
-            <table>
-                ${this.columns.length > 0 ? this.renderTableHeader() : nothing}
-                ${this.data.length > 0 ? this.renderTableRows() : nothing}
-                ${this.additionalRows && this.additionalRows.length > 0 ? this.renderAdditionalRows() : nothing}
-            </table>
-        `;
-    }
-
     render () {
-        const classes = {
-            'c-data-table': true,
-        };
-
-        return html`
-            <div class="${classMap(classes)}">
-                <slot name="table-header"></slot>
-                ${this.data.length > 0 && this.columns.length > 0 ? this.renderHTMLTable() : html`<slot></slot>`}
-            </div>
-        `;
+        return html`<h1 data-test-id="pie-data-table">Hello world!</h1>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/dist/PieElement-DgHPBi0_.js

@@ -1,11 +0,0 @@
-import { LitElement as i } from "lit";
-const t = class t extends i {
-  willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", t.v);
-  }
-};
-t.v = "0.1.2";
-let s = t;
-export {
-  s as P
-};