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

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

@@ -1,19 +0,0 @@
-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

@@ -1,21 +0,0 @@
-: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

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

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

@@ -1,19 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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-header/data-table-header.scss

@@ -1,44 +0,0 @@
-@use '@justeattakeaway/pie-css/scss' as p;
-
-:host {
-  display: block;
-}
-
-.c-data-table-header {
-  --data-table-header-background: transparent;
-  padding: var(--dt-spacing-d);
-  
-  background-color: var(--data-table-header-background);
-  border-bottom: 1px solid var(--data-table-border-color);
-
-  display: flex;
-  justify-content: space-between;
-  align-items:flex-end;
-}
-
-.c-data-table-header-title-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dt-spacing-b);
-}
-
-.c-data-table-header-title {
-  font-weight: var(--dt-font-weight-extrabold);
-  font-size: #{p.font-size(--dt-font-size-24)};
-  line-height: calc(var(--dt-font-size-24-line-height) * 1px);
-}
-
-.c-data-table-header-subtitle {
-  font-weight: var(--dt-font-weight-regular);
-  font-size: #{p.font-size(--dt-font-size-16)};
-  line-height: calc(var(--dt-font-size-16-line-height) * 1px);
-}
-
-.c-data-table-header--strong {
-  --data-table-header-background: var(--dt-color-support-brand-02);
-}
-
-.c-data-table-action-buttons-wrapper {
-  display: flex;
-  gap: var(--dt-spacing-d);
-}

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

@@ -1,8 +0,0 @@
-import type React from 'react';
-/**
- * TODO: Verify if ReactBaseType can be set as a more specific React interface
- * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
- * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
- * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
- */
-export type ReactBaseType = React.HTMLAttributes<HTMLElement>

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

@@ -1,22 +0,0 @@
-import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
-
-export const dataTableHeaderVariant = ['subtle', 'strong'];
-
-export interface DataTableHeaderProps {
-  /**
-   * Title text for the data table header
-   */
-  title: string;
-  /**
-   * Subtitle text for the data table header
-   */
-  subtitle?: string;
-  /**
-   * Emphasis level for the header
-   */
-  variant?: typeof dataTableHeaderVariant[number];
-}
-
-export const defaultProps: ComponentDefaultProps<DataTableHeaderProps, keyof Omit<DataTableHeaderProps, 'title' | 'subtitle'>> = {
-    variant: 'subtle',
-};

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

@@ -1,101 +0,0 @@
-import { html, nothing, unsafeCSS } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
-import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
-import { classMap } from 'lit/directives/class-map.js';
-
-import styles from './data-table-header.scss?inline';
-import {
-    type DataTableHeaderProps,
-    dataTableHeaderVariant,
-    defaultProps,
-} from './defs';
-
-// Valid values available to consumers
-export * from './defs';
-
-const componentSelector = 'pie-data-table-header';
-
-/**
- * @tagname pie-data-table-header
- */
-@safeCustomElement('pie-data-table-header')
-export class PieDataTableHeader extends PieElement implements DataTableHeaderProps {
-    /**
-     * Title text for the data table header
-     */
-    @property({ type: String })
-    public title!: DataTableHeaderProps['title'];
-
-    /**
-     * Subtitle text for the data table header
-     */
-    @property({ type: String })
-    public subtitle: DataTableHeaderProps['subtitle'];
-
-    /**
-     * Emphasis level for the header
-     */
-    @property({ type: String })
-    @validPropertyValues(componentSelector, dataTableHeaderVariant, defaultProps.variant)
-    public variant?: typeof defaultProps.variant;
-
-    @state()
-    private hasActionButtons = false;
-
-    /**
-     * Handles the slot change event to determine if there are action buttons.
-     *
-     * @param event - The slot change event
-     */
-    private handleSlotChange (event: Event) {
-        const slot = event.target as HTMLSlotElement;
-        this.hasActionButtons = slot.assignedElements().length > 0;
-    }
-
-    /**
-     * Lit lifecycle: called after the component's DOM has been rendered the first time.
-     */
-    firstUpdated () {
-        // Get the named slot element after shadowRoot is ready
-        const slot = this.shadowRoot?.querySelector('slot[name="action-button"]') as HTMLSlotElement | null;
-        if (slot) {
-            this.hasActionButtons = slot.assignedElements().length > 0;
-        }
-    }
-
-    render () {
-        const { title, subtitle, variant } = this;
-
-        const classes = {
-            'c-data-table-header': true,
-            'c-data-table-header--strong': variant === 'strong',
-        };
-
-        return html`
-            <header class="${classMap(classes)}">
-                <div class="c-data-table-header-title-wrapper">
-                    ${title ? html`<span class="c-data-table-header-title">${title}</span>` : nothing}
-
-                    ${subtitle ? html`<span class="c-data-table-header-subtitle">${subtitle}</span>` : nothing}
-                </div>
-                ${this.hasActionButtons ? html`
-                    <div class="c-data-table-action-buttons-wrapper">
-                        <slot name="action-button" @slotchange=${this.handleSlotChange}></slot>
-                    </div>
-                ` : html`
-                    <slot name="action-button" @slotchange=${this.handleSlotChange} style="display: none;"></slot>
-                `}
-            </header>
-        `;
-    }
-
-    // Renders a `CSSResult` generated from SCSS by Vite
-    static styles = unsafeCSS(styles);
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieDataTableHeader;
-    }
-}

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

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

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

@@ -1,12 +0,0 @@
-: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

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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>;