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

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>;