@justeattakeaway/pie-data-table 0.0.0-snapshot-release-20250910151748 → 0.0.0-snapshot-release-20251010234024

package/src/pie-data-table-cell/index.ts

@@ -0,0 +1,61 @@
+import { html, nothing, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
+
+import styles from './data-table-cell.scss?inline';
+import {
+    type DataTableCellProps,
+    dataTableCellTextAlign,
+    defaultProps,
+} from './defs';
+
+export * from './defs';
+
+const componentSelector = 'pie-data-table-cell';
+
+/**
+ * @tagname pie-data-table-cell
+ */
+@safeCustomElement('pie-data-table-cell')
+export class PieDataTableCell extends PieElement implements DataTableCellProps {
+    /**
+     * Text alignment for the cell content
+     */
+    @property({ type: String })
+    @validPropertyValues(componentSelector, dataTableCellTextAlign, defaultProps.textAlign)
+    public textAlign?: DataTableCellProps['textAlign'];
+
+    /**
+     * Whether the cell is hidden
+     */
+    @property({ type: Boolean })
+    public isHidden?: DataTableCellProps['isHidden'];
+
+    connectedCallback () {
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'cell');
+        }
+
+        super.connectedCallback();
+    }
+
+    render () {
+        const { isHidden } = this;
+
+        if (isHidden) {
+            return nothing;
+        }
+
+        return html`<slot></slot>`;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableCell;
+    }
+}

package/src/pie-data-table-cell/react.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { PieDataTableCell as PieDataTableCellLit } from './index';
+import { type DataTableCellProps } from './defs';
+
+export * from './defs';
+
+const PieDataTableCellReact = createComponent({
+    displayName: 'PieDataTableCell',
+    elementClass: PieDataTableCellLit,
+    react: React,
+    tagName: 'pie-data-table-cell',
+    events: {},
+});
+
+type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export const PieDataTableCell = PieDataTableCellReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableCellProps>
+    & React.RefAttributes<PieDataTableCellLit> & ReactBaseType>;

package/src/pie-data-table-contents/data-table-contents.scss

@@ -0,0 +1,4 @@
+:host {
+    inline-size: 100%;
+    display: table;
+}

package/src/pie-data-table-contents/defs-react.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>

package/src/pie-data-table-contents/defs.ts

@@ -0,0 +1 @@
+export type DataTableContentsProps = Partial<HTMLTableElement>;

package/src/pie-data-table-contents/index.ts

@@ -0,0 +1,35 @@
+import { html, unsafeCSS } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { safeCustomElement } from '@justeattakeaway/pie-webc-core';
+
+import styles from './data-table-contents.scss?inline';
+import { type DataTableContentsProps } from './defs';
+
+export * from './defs';
+
+const componentSelector = 'pie-data-table-contents';
+
+/**
+ * @tagname pie-data-table-contents
+ */
+@safeCustomElement('pie-data-table-contents')
+export class PieDataTableContents extends PieElement implements DataTableContentsProps {
+    connectedCallback () {
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'table');
+        }
+        super.connectedCallback();
+    }
+
+    render () {
+        return html`<slot></slot>`;
+    }
+
+    static styles = unsafeCSS(styles);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableContents;
+    }
+}

package/src/pie-data-table-contents/react.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { PieDataTableContents as PieDataTableContentsLit } from './index';
+import { type DataTableContentsProps } from './defs';
+
+export * from './defs';
+
+const PieDataTableContentsReact = createComponent({
+    displayName: 'PieDataTableContents',
+    elementClass: PieDataTableContentsLit,
+    react: React,
+    tagName: 'pie-data-table-contents',
+    events: {},
+});
+
+type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export const PieDataTableContents = PieDataTableContentsReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableContentsProps>
+    & React.RefAttributes<PieDataTableContentsLit> & ReactBaseType>;

package/src/pie-data-table-head/data-table-head.scss

@@ -0,0 +1,8 @@
+:host {
+  background-color: transparent;
+  font-weight: var(--dt-font-weight-bold);
+  color: var(--data-table-header-color);
+  border-bottom: 1px solid var(--data-table-border-color);
+  display: table-header-group;
+}
+

package/src/pie-data-table-head/defs-react.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>

package/src/pie-data-table-head/defs.ts

@@ -0,0 +1 @@
+export type DataTableHeadProps = Partial<HTMLTableSectionElement>;

package/src/pie-data-table-head/index.ts

@@ -0,0 +1,36 @@
+import { html, unsafeCSS } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { safeCustomElement } from '@justeattakeaway/pie-webc-core';
+
+import styles from './data-table-head.scss?inline';
+import { type DataTableHeadProps } from './defs';
+
+export * from './defs';
+
+const componentSelector = 'pie-data-table-head';
+
+/**
+ * @tagname pie-data-table-head
+ */
+@safeCustomElement('pie-data-table-head')
+export class PieDataTableHead extends PieElement implements DataTableHeadProps {
+    connectedCallback () {
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'rowgroup');
+        }
+        super.connectedCallback();
+    }
+
+    render () {
+        return html`<slot></slot>`;
+    }
+
+    static styles = unsafeCSS(styles);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableHead;
+    }
+}
+

package/src/pie-data-table-head/react.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { PieDataTableHead as PieDataTableHeadLit } from './index';
+import { type DataTableHeadProps } from './defs';
+
+export * from './defs';
+
+const PieDataTableHeadReact = createComponent({
+    displayName: 'PieDataTableHead',
+    elementClass: PieDataTableHeadLit,
+    react: React,
+    tagName: 'pie-data-table-head',
+    events: {},
+});
+
+type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export const PieDataTableHead = PieDataTableHeadReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableHeadProps>
+    & React.RefAttributes<PieDataTableHeadLit> & ReactBaseType>;

package/src/pie-data-table-head-cell/data-table-head-cell.scss

@@ -0,0 +1,21 @@
+:host {
+  padding: var(--dt-spacing-d);
+  border-bottom: 1px solid var(--data-table-border-color);
+  display: table-cell;
+}
+
+:host([textAlign="right"]) {
+  text-align: right;
+}
+
+:host([textAlign="center"]) {
+  text-align: center;
+}
+
+:host([textAlign="left"]) {
+  text-align: left; 
+}
+
+:host([isHidden]) {
+  display: none;
+}

package/src/pie-data-table-head-cell/defs-react.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>

package/src/pie-data-table-head-cell/defs.ts

@@ -0,0 +1,19 @@
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export const dataTableHeadCellTextAlign = ['left', 'right', 'center'] as const;
+
+export interface DataTableHeadCellProps {
+  /**
+   * Text alignment for the cell content
+   */
+  textAlign?: typeof dataTableHeadCellTextAlign[number];
+  /**
+   * Whether the cell is hidden
+   */
+  isHidden?: boolean;
+}
+
+export const defaultProps: ComponentDefaultProps<DataTableHeadCellProps, 'textAlign' | 'isHidden'> = {
+    textAlign: 'left',
+    isHidden: false,
+};

package/src/pie-data-table-head-cell/index.ts

@@ -0,0 +1,59 @@
+import { html, nothing, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
+
+import styles from './data-table-head-cell.scss?inline';
+import {
+    type DataTableHeadCellProps,
+    dataTableHeadCellTextAlign,
+    defaultProps,
+} from './defs';
+
+export * from './defs';
+
+const componentSelector = 'pie-data-table-head-cell';
+
+/**
+ * @tagname pie-data-table-head-cell
+ */
+@safeCustomElement('pie-data-table-head-cell')
+export class PieDataTableHeadCell extends PieElement implements DataTableHeadCellProps {
+    /**
+     * Text alignment for the cell content
+     */
+    @property({ type: String })
+    @validPropertyValues(componentSelector, dataTableHeadCellTextAlign, defaultProps.textAlign)
+    public textAlign?: DataTableHeadCellProps['textAlign'];
+
+    /**
+     * Whether the cell is hidden
+     */
+    @property({ type: Boolean })
+    public isHidden?: DataTableHeadCellProps['isHidden'];
+
+    connectedCallback () {
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'columnheader');
+        }
+        super.connectedCallback();
+    }
+
+    render () {
+        const { isHidden } = this;
+
+        if (isHidden) {
+            return nothing;
+        }
+
+        return html`<slot></slot>`;
+    }
+
+    static styles = unsafeCSS(styles);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableHeadCell;
+    }
+}

package/src/pie-data-table-head-cell/react.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { PieDataTableHeadCell as PieDataTableHeadCellLit } from './index';
+import { type DataTableHeadCellProps } from './defs';
+
+export * from './defs';
+
+const PieDataTableHeadCellReact = createComponent({
+    displayName: 'PieDataTableHeadCell',
+    elementClass: PieDataTableHeadCellLit,
+    react: React,
+    tagName: 'pie-data-table-head-cell',
+    events: {},
+});
+
+type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export const PieDataTableHeadCell = PieDataTableHeadCellReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableHeadCellProps>
+    & React.RefAttributes<PieDataTableHeadCellLit> & ReactBaseType>;

package/src/pie-data-table-row/data-table-row.scss

@@ -0,0 +1,12 @@
+:host {
+  display: table-row;
+  border-bottom: 1px solid var(--data-table-border-color);
+
+  ::slotted(pie-data-table-cell) {
+    background-color: var(--data-table-background-hover-or-active, transparent);
+  }  
+}
+
+:host([isSelected]) {
+  background-color: var(--dt-color-container-subtle);
+}

package/src/pie-data-table-row/defs-react.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>

package/src/pie-data-table-row/defs.ts

@@ -0,0 +1,17 @@
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export interface DataTableRowProps extends Partial<HTMLTableRowElement> {
+  /**
+   * Whether the row is currently selected
+   */
+  isSelected?: boolean;
+  /**
+   * Whether the row is hidden
+   */
+  isHidden?: boolean;
+}
+
+export const defaultProps: ComponentDefaultProps<DataTableRowProps, 'isSelected' | 'isHidden'> = {
+    isSelected: false,
+    isHidden: false,
+};

package/src/pie-data-table-row/index.ts

@@ -0,0 +1,77 @@
+import { html, nothing, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { safeCustomElement } from '@justeattakeaway/pie-webc-core';
+
+import styles from './data-table-row.scss?inline';
+import {
+    type DataTableRowProps,
+} from './defs';
+
+export * from './defs';
+
+const componentSelector = 'pie-data-table-row';
+
+/**
+ * @tagname pie-data-table-row
+ */
+@safeCustomElement('pie-data-table-row')
+export class PieDataTableRow extends PieElement implements DataTableRowProps {
+    /**
+     * Whether the row is currently selected
+     */
+    @property({ type: Boolean })
+    public isSelected?: DataTableRowProps['isSelected'];
+
+    /**
+     * Whether the row is hidden
+     */
+    @property({ type: Boolean })
+    public isHidden?: DataTableRowProps['isHidden'];
+
+    connectedCallback () {
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'row');
+        }
+
+        this.addEventListener('mouseenter', this._handleMouseEnter);
+        this.addEventListener('mouseleave', this._handleMouseLeave);
+        this.style.setProperty('--data-table-background-hover-or-active', 'transparent');
+
+        super.connectedCallback();
+    }
+
+    disconnectedCallback () {
+        super.disconnectedCallback();
+
+        this.removeEventListener('mouseenter', this._handleMouseEnter);
+        this.removeEventListener('mouseleave', this._handleMouseLeave);
+    }
+
+    private _handleMouseEnter = () => {
+        this.style.setProperty('--data-table-background-hover-or-active', 'var(--dt-color-container-subtle)');
+    };
+
+    private _handleMouseLeave = () => {
+        this.style.setProperty('--data-table-background-hover-or-active', 'transparent');
+    };
+
+    render () {
+        const { isHidden } = this;
+
+        if (isHidden) {
+            return nothing;
+        }
+
+        return html`<slot></slot>`;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        [componentSelector]: PieDataTableRow;
+    }
+}

package/src/pie-data-table-row/react.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import { PieDataTableRow as PieDataTableRowLit } from './index';
+import { type DataTableRowProps } from './defs';
+
+export * from './defs';
+
+const PieDataTableRowReact = createComponent({
+    displayName: 'PieDataTableRow',
+    elementClass: PieDataTableRowLit,
+    react: React,
+    tagName: 'pie-data-table-row',
+    events: {},
+});
+
+type ReactBaseType = React.HTMLAttributes<HTMLElement>
+
+export const PieDataTableRow = PieDataTableRowReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<DataTableRowProps>
+    & React.RefAttributes<PieDataTableRowLit> & ReactBaseType>;