@quadrats/react 1.0.0 → 1.1.0

package/table/index.d.ts

@@ -0,0 +1,16 @@
+export * from './contexts/TableActionsContext';
+export * from './contexts/TableMetadataContext';
+export * from './contexts/TableStateContext';
+export * from './hooks/useTableActionsContext';
+export * from './hooks/useTableMetadata';
+export * from './hooks/useTableStateContext';
+export * from './hooks/useTableCellToolbarActions';
+export * from './typings';
+export * from './components/Table';
+export * from './components/TableTitle';
+export * from './components/TableMain';
+export * from './components/TableHeader';
+export * from './components/TableRow';
+export * from './components/TableCell';
+export { defaultRenderTableElements } from './defaultRenderTableElements';
+export { CreateReactTableOptions, createReactTable } from './createReactTable';

package/table/index.js

@@ -0,0 +1,24 @@
+export { TableActionsContext } from './contexts/TableActionsContext.js';
+export { TableMetadataContext } from './contexts/TableMetadataContext.js';
+export { TableStateContext } from './contexts/TableStateContext.js';
+export { useTableActionsContext } from './hooks/useTableActionsContext.js';
+export { useTableMetadata } from './hooks/useTableMetadata.js';
+export { useTableStateContext } from './hooks/useTableStateContext.js';
+export { useTableCellToolbarActions } from './hooks/useTableCellToolbarActions.js';
+import 'react';
+import '@quadrats/core';
+import '@quadrats/common/table';
+import 'slate-react';
+import '@quadrats/react';
+import '@quadrats/common/align';
+import '@quadrats/react/components';
+import '@quadrats/icons';
+import 'clsx';
+import '@quadrats/react/toolbar';
+import 'slate';
+import './contexts/TableScrollContext.js';
+import '@quadrats/react/utils';
+import '@quadrats/common/list';
+import './contexts/TableHeaderContext.js';
+export { defaultRenderTableElements } from './defaultRenderTableElements.js';
+export { createReactTable } from './createReactTable.js';

package/table/jsx-serializer/components/Table.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export declare const TableJsxSerializeElement: ({ children }: JsxSerializeElementProps) => React.JSX.Element;

package/table/jsx-serializer/components/Table.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TableJsxSerializeElement = ({ children }) => {
+    return React.createElement("div", { className: "qdr-table" }, children);
+};
+
+export { TableJsxSerializeElement };

package/table/jsx-serializer/components/TableBody.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export declare const TableBodyJsxSerializeElement: ({ children }: JsxSerializeElementProps) => React.JSX.Element;

package/table/jsx-serializer/components/TableBody.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TableBodyJsxSerializeElement = ({ children }) => {
+    return React.createElement("tbody", { className: "qdr-table__body" }, children);
+};
+
+export { TableBodyJsxSerializeElement };

package/table/jsx-serializer/components/TableCell.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { JsxSerializeTableElementProps } from '../typings';
+export declare const TableCellJsxSerializeElement: ({ children, element, isColumnPinned, }: JsxSerializeTableElementProps & {
+    isColumnPinned?: boolean;
+}) => React.JSX.Element;

package/table/jsx-serializer/components/TableCell.js

@@ -0,0 +1,33 @@
+import React, { useContext, useRef, useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { TableHeaderContext } from '../contexts/TableHeaderContext.js';
+import { TableScrollContext } from '../contexts/TableScrollContext.js';
+
+const TableCellJsxSerializeElement = ({ children, element, isColumnPinned, }) => {
+    const isHeader = useContext(TableHeaderContext);
+    // calculate the left position of the cell when it is stuck
+    const cellRef = useRef(null);
+    const { scrollRef } = useContext(TableScrollContext);
+    const [cellStuckAtLeft, setCellStuckAtLeft] = useState(0);
+    useEffect(() => {
+        const { current: cell } = cellRef;
+        const { current: scrollContainer } = scrollRef;
+        if (scrollContainer && cell) {
+            const cellRect = cell.getBoundingClientRect();
+            const containerRect = scrollContainer.getBoundingClientRect();
+            setCellStuckAtLeft(Math.max(Math.round(cellRect.left - containerRect.left), 0));
+        }
+    }, [scrollRef]);
+    const CellTag = isHeader ? 'th' : 'td';
+    const shouldPinned = element.pinned && isColumnPinned && element.treatAsTitle;
+    return (React.createElement(CellTag, { ref: cellRef, className: clsx('qdr-table__cell', {
+            'qdr-table__cell--header': isHeader || element.treatAsTitle,
+            'qdr-table__cell--pinned': shouldPinned,
+        }), style: shouldPinned
+            ? {
+                left: cellStuckAtLeft,
+            }
+            : undefined }, children));
+};
+
+export { TableCellJsxSerializeElement };

package/table/jsx-serializer/components/TableHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export declare const TableHeaderJsxSerializeElement: ({ children, element }: JsxSerializeElementProps) => React.JSX.Element;

package/table/jsx-serializer/components/TableHeader.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TableHeaderContext } from '../contexts/TableHeaderContext.js';
+
+const TableHeaderJsxSerializeElement = ({ children, element }) => {
+    const hasAnyRowPinned = element.children.some((child) => child.children.every((cell) => cell.pinned));
+    return (React.createElement(TableHeaderContext.Provider, { value: true },
+        React.createElement("thead", { className: `qdr-table__header ${hasAnyRowPinned ? 'qdr-table__header--pinned' : ''}` }, children)));
+};
+
+export { TableHeaderJsxSerializeElement };

package/table/jsx-serializer/components/TableMain.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+import { ColumnWidth } from '@quadrats/common/table';
+export declare const TableMainJsxSerializeElement: ({ children, columnWidths, }: JsxSerializeElementProps & {
+    columnWidths?: ColumnWidth[];
+}) => React.JSX.Element;

package/table/jsx-serializer/components/TableMain.js

@@ -0,0 +1,18 @@
+import React, { useRef, useMemo } from 'react';
+import { TableScrollContext } from '../contexts/TableScrollContext.js';
+import { calculateTableMinWidth, columnWidthToCSS } from '@quadrats/common/table';
+
+const TableMainJsxSerializeElement = ({ children, columnWidths, }) => {
+    const scrollRef = useRef(null);
+    const scrollContextValue = useMemo(() => ({ scrollRef }), [scrollRef]);
+    const tableMinWidth = useMemo(() => (columnWidths ? calculateTableMinWidth(columnWidths) : '100%'), [columnWidths]);
+    return (React.createElement("div", { ref: scrollRef, className: "qdr-table__scrollContainer" },
+        React.createElement(TableScrollContext.Provider, { value: scrollContextValue },
+            React.createElement("table", { className: "qdr-table__main", style: {
+                    minWidth: tableMinWidth,
+                } },
+                (columnWidths === null || columnWidths === void 0 ? void 0 : columnWidths.length) ? (React.createElement("colgroup", null, columnWidths.map((width, index) => (React.createElement("col", { key: index, style: { width: columnWidthToCSS(width), minWidth: columnWidthToCSS(width) } }))))) : null,
+                children))));
+};
+
+export { TableMainJsxSerializeElement };

package/table/jsx-serializer/components/TableRow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export declare const TableRowJsxSerializeElement: ({ children }: JsxSerializeElementProps) => React.JSX.Element;

package/table/jsx-serializer/components/TableRow.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TableRowJsxSerializeElement = ({ children }) => {
+    return React.createElement("tr", { className: "qdr-table__row" }, children);
+};
+
+export { TableRowJsxSerializeElement };

package/table/jsx-serializer/components/TableTitle.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+export declare const TableTitleJsxSerializeElement: ({ children }: JsxSerializeElementProps) => React.JSX.Element;

package/table/jsx-serializer/components/TableTitle.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TableTitleJsxSerializeElement = ({ children }) => {
+    return React.createElement("span", { className: "qdr-table__title" }, children);
+};
+
+export { TableTitleJsxSerializeElement };

package/table/jsx-serializer/contexts/TableHeaderContext.d.ts

@@ -0,0 +1 @@
+export declare const TableHeaderContext: import("react").Context<boolean>;

package/table/jsx-serializer/contexts/TableHeaderContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const TableHeaderContext = createContext(false);
+
+export { TableHeaderContext };

package/table/jsx-serializer/contexts/TableScrollContext.d.ts

@@ -0,0 +1,2 @@
+import { TableScrollContextType } from '../typings';
+export declare const TableScrollContext: import("react").Context<TableScrollContextType>;

package/table/jsx-serializer/contexts/TableScrollContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const TableScrollContext = createContext({
+    scrollRef: { current: null },
+});
+
+export { TableScrollContext };

package/table/jsx-serializer/createJsxSerializeTable.d.ts

@@ -0,0 +1,5 @@
+import { TableTypeKey, TableTitleTypeKey, TableMainTypeKey, TableHeaderTypeKey, TableBodyTypeKey, TableRowTypeKey, TableCellTypeKey } from '@quadrats/common/table';
+import { CreateJsxSerializeElementOptions, JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+import { JsxSerializeTableElementProps } from './typings';
+export type CreateJsxSerializeTableOptions = Partial<Record<TableTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeTableElementProps>>> & Record<TableTitleTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> & Record<TableMainTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> & Record<TableHeaderTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> & Record<TableBodyTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> & Record<TableRowTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>> & Record<TableCellTypeKey, Partial<CreateJsxSerializeElementOptions<JsxSerializeElementProps>>>>;
+export declare function createJsxSerializeTable(options?: CreateJsxSerializeTableOptions): (props: JsxSerializeElementProps) => import("react").JSX.Element | null | undefined;

package/table/jsx-serializer/createJsxSerializeTable.js

@@ -0,0 +1,113 @@
+import { getFirstAncestor } from '@quadrats/core/serializers';
+import { TABLE_TYPES } from '@quadrats/common/table';
+import { createJsxSerializeElements } from '@quadrats/react/jsx-serializer';
+import { defaultRenderTableElements } from './defaultRenderTableElements.js';
+import { Element } from '@quadrats/core';
+
+/* eslint-disable @typescript-eslint/naming-convention */
+function createJsxSerializeTable(options = {}) {
+    const { table = {}, table_title = {}, table_main = {}, table_header = {}, table_body = {}, table_row = {}, table_cell = {}, } = options;
+    const tableType = table.type || TABLE_TYPES.table;
+    const tableTitleType = table_title.type || TABLE_TYPES.table_title;
+    const tableMainType = table_main.type || TABLE_TYPES.table_main;
+    const tableHeaderType = table_header.type || TABLE_TYPES.table_header;
+    const tableBodyType = table_body.type || TABLE_TYPES.table_body;
+    const tableRowType = table_row.type || TABLE_TYPES.table_row;
+    const tableCellType = table_cell.type || TABLE_TYPES.table_cell;
+    const renderTable = table.render || defaultRenderTableElements.table;
+    const renderTableTitle = table_title.render || defaultRenderTableElements.table_title;
+    const renderTableMain = table_main.render || defaultRenderTableElements.table_main;
+    const renderTableHeader = table_header.render || defaultRenderTableElements.table_header;
+    const renderTableBody = table_body.render || defaultRenderTableElements.table_body;
+    const renderTableRow = table_row.render || defaultRenderTableElements.table_row;
+    const renderTableCell = table_cell.render || defaultRenderTableElements.table_cell;
+    return createJsxSerializeElements([
+        {
+            type: tableType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderTable({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: tableTitleType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderTableTitle({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: tableMainType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                const firstAncestor = getFirstAncestor(element, (node) => node.type === tableType);
+                const columnWidths = (firstAncestor === null || firstAncestor === void 0 ? void 0 : firstAncestor.columnWidths) || [];
+                return renderTableMain({
+                    children,
+                    element,
+                    columnWidths,
+                });
+            },
+        },
+        {
+            type: tableHeaderType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderTableHeader({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: tableBodyType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderTableBody({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: tableRowType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderTableRow({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: tableCellType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                const firstAncestor = getFirstAncestor(element, (node) => node.type === tableMainType);
+                const body = firstAncestor === null || firstAncestor === void 0 ? void 0 : firstAncestor.children.find((child) => child.type === tableBodyType);
+                const firstRow = body === null || body === void 0 ? void 0 : body.children[0];
+                const firstCell = Element.isElement(firstRow) ? firstRow.children[0] : null;
+                return renderTableCell({
+                    children,
+                    element,
+                    isColumnPinned: Element.isElement(firstCell) ? firstCell.pinned : false,
+                });
+            },
+        },
+    ]);
+}
+
+export { createJsxSerializeTable };

package/table/jsx-serializer/defaultRenderTableElements.d.ts

@@ -0,0 +1,2 @@
+import { TableJsxSerializeElements } from './typings';
+export declare const defaultRenderTableElements: TableJsxSerializeElements;

package/table/jsx-serializer/defaultRenderTableElements.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TableJsxSerializeElement } from './components/Table.js';
+import { TableTitleJsxSerializeElement } from './components/TableTitle.js';
+import { TableMainJsxSerializeElement } from './components/TableMain.js';
+import { TableHeaderJsxSerializeElement } from './components/TableHeader.js';
+import { TableBodyJsxSerializeElement } from './components/TableBody.js';
+import { TableRowJsxSerializeElement } from './components/TableRow.js';
+import { TableCellJsxSerializeElement } from './components/TableCell.js';
+
+const defaultRenderTableElements = {
+    table: (props) => React.createElement(TableJsxSerializeElement, Object.assign({}, props)),
+    table_title: (props) => React.createElement(TableTitleJsxSerializeElement, Object.assign({}, props)),
+    table_main: (props) => React.createElement(TableMainJsxSerializeElement, Object.assign({}, props)),
+    table_header: (props) => React.createElement(TableHeaderJsxSerializeElement, Object.assign({}, props)),
+    table_body: (props) => React.createElement(TableBodyJsxSerializeElement, Object.assign({}, props)),
+    table_row: (props) => React.createElement(TableRowJsxSerializeElement, Object.assign({}, props)),
+    table_cell: (props) => React.createElement(TableCellJsxSerializeElement, Object.assign({}, props)),
+};
+
+export { defaultRenderTableElements };

package/table/jsx-serializer/index.cjs.js

@@ -0,0 +1,195 @@
+'use strict';
+
+var React = require('react');
+var table = require('@quadrats/common/table');
+var clsx = require('clsx');
+var serializers = require('@quadrats/core/serializers');
+var jsxSerializer = require('@quadrats/react/jsx-serializer');
+var core = require('@quadrats/core');
+
+const TableJsxSerializeElement = ({ children }) => {
+    return React.createElement("div", { className: "qdr-table" }, children);
+};
+
+const TableTitleJsxSerializeElement = ({ children }) => {
+    return React.createElement("span", { className: "qdr-table__title" }, children);
+};
+
+const TableScrollContext = React.createContext({
+    scrollRef: { current: null },
+});
+
+const TableMainJsxSerializeElement = ({ children, columnWidths, }) => {
+    const scrollRef = React.useRef(null);
+    const scrollContextValue = React.useMemo(() => ({ scrollRef }), [scrollRef]);
+    const tableMinWidth = React.useMemo(() => (columnWidths ? table.calculateTableMinWidth(columnWidths) : '100%'), [columnWidths]);
+    return (React.createElement("div", { ref: scrollRef, className: "qdr-table__scrollContainer" },
+        React.createElement(TableScrollContext.Provider, { value: scrollContextValue },
+            React.createElement("table", { className: "qdr-table__main", style: {
+                    minWidth: tableMinWidth,
+                } },
+                (columnWidths === null || columnWidths === void 0 ? void 0 : columnWidths.length) ? (React.createElement("colgroup", null, columnWidths.map((width, index) => (React.createElement("col", { key: index, style: { width: table.columnWidthToCSS(width), minWidth: table.columnWidthToCSS(width) } }))))) : null,
+                children))));
+};
+
+const TableHeaderContext = React.createContext(false);
+
+const TableHeaderJsxSerializeElement = ({ children, element }) => {
+    const hasAnyRowPinned = element.children.some((child) => child.children.every((cell) => cell.pinned));
+    return (React.createElement(TableHeaderContext.Provider, { value: true },
+        React.createElement("thead", { className: `qdr-table__header ${hasAnyRowPinned ? 'qdr-table__header--pinned' : ''}` }, children)));
+};
+
+const TableBodyJsxSerializeElement = ({ children }) => {
+    return React.createElement("tbody", { className: "qdr-table__body" }, children);
+};
+
+const TableRowJsxSerializeElement = ({ children }) => {
+    return React.createElement("tr", { className: "qdr-table__row" }, children);
+};
+
+const TableCellJsxSerializeElement = ({ children, element, isColumnPinned, }) => {
+    const isHeader = React.useContext(TableHeaderContext);
+    // calculate the left position of the cell when it is stuck
+    const cellRef = React.useRef(null);
+    const { scrollRef } = React.useContext(TableScrollContext);
+    const [cellStuckAtLeft, setCellStuckAtLeft] = React.useState(0);
+    React.useEffect(() => {
+        const { current: cell } = cellRef;
+        const { current: scrollContainer } = scrollRef;
+        if (scrollContainer && cell) {
+            const cellRect = cell.getBoundingClientRect();
+            const containerRect = scrollContainer.getBoundingClientRect();
+            setCellStuckAtLeft(Math.max(Math.round(cellRect.left - containerRect.left), 0));
+        }
+    }, [scrollRef]);
+    const CellTag = isHeader ? 'th' : 'td';
+    const shouldPinned = element.pinned && isColumnPinned && element.treatAsTitle;
+    return (React.createElement(CellTag, { ref: cellRef, className: clsx('qdr-table__cell', {
+            'qdr-table__cell--header': isHeader || element.treatAsTitle,
+            'qdr-table__cell--pinned': shouldPinned,
+        }), style: shouldPinned
+            ? {
+                left: cellStuckAtLeft,
+            }
+            : undefined }, children));
+};
+
+const defaultRenderTableElements = {
+    table: (props) => React.createElement(TableJsxSerializeElement, Object.assign({}, props)),
+    table_title: (props) => React.createElement(TableTitleJsxSerializeElement, Object.assign({}, props)),
+    table_main: (props) => React.createElement(TableMainJsxSerializeElement, Object.assign({}, props)),
+    table_header: (props) => React.createElement(TableHeaderJsxSerializeElement, Object.assign({}, props)),
+    table_body: (props) => React.createElement(TableBodyJsxSerializeElement, Object.assign({}, props)),
+    table_row: (props) => React.createElement(TableRowJsxSerializeElement, Object.assign({}, props)),
+    table_cell: (props) => React.createElement(TableCellJsxSerializeElement, Object.assign({}, props)),
+};
+
+/* eslint-disable @typescript-eslint/naming-convention */
+function createJsxSerializeTable(options = {}) {
+    const { table: table$1 = {}, table_title = {}, table_main = {}, table_header = {}, table_body = {}, table_row = {}, table_cell = {}, } = options;
+    const tableType = table$1.type || table.TABLE_TYPES.table;
+    const tableTitleType = table_title.type || table.TABLE_TYPES.table_title;
+    const tableMainType = table_main.type || table.TABLE_TYPES.table_main;
+    const tableHeaderType = table_header.type || table.TABLE_TYPES.table_header;
+    const tableBodyType = table_body.type || table.TABLE_TYPES.table_body;
+    const tableRowType = table_row.type || table.TABLE_TYPES.table_row;
+    const tableCellType = table_cell.type || table.TABLE_TYPES.table_cell;
+    const renderTable = table$1.render || defaultRenderTableElements.table;
+    const renderTableTitle = table_title.render || defaultRenderTableElements.table_title;
+    const renderTableMain = table_main.render || defaultRenderTableElements.table_main;
+    const renderTableHeader = table_header.render || defaultRenderTableElements.table_header;
+    const renderTableBody = table_body.render || defaultRenderTableElements.table_body;
+    const renderTableRow = table_row.render || defaultRenderTableElements.table_row;
+    const renderTableCell = table_cell.render || defaultRenderTableElements.table_cell;
+    return jsxSerializer.createJsxSerializeElements([
+        {
+            type: tableType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderTable({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: tableTitleType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderTableTitle({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: tableMainType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                const firstAncestor = serializers.getFirstAncestor(element, (node) => node.type === tableType);
+                const columnWidths = (firstAncestor === null || firstAncestor === void 0 ? void 0 : firstAncestor.columnWidths) || [];
+                return renderTableMain({
+                    children,
+                    element,
+                    columnWidths,
+                });
+            },
+        },
+        {
+            type: tableHeaderType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderTableHeader({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: tableBodyType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderTableBody({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: tableRowType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                return renderTableRow({
+                    children,
+                    element,
+                });
+            },
+        },
+        {
+            type: tableCellType,
+            render: (props) => {
+                const { children } = props;
+                const element = props.element;
+                const firstAncestor = serializers.getFirstAncestor(element, (node) => node.type === tableMainType);
+                const body = firstAncestor === null || firstAncestor === void 0 ? void 0 : firstAncestor.children.find((child) => child.type === tableBodyType);
+                const firstRow = body === null || body === void 0 ? void 0 : body.children[0];
+                const firstCell = core.Element.isElement(firstRow) ? firstRow.children[0] : null;
+                return renderTableCell({
+                    children,
+                    element,
+                    isColumnPinned: core.Element.isElement(firstCell) ? firstCell.pinned : false,
+                });
+            },
+        },
+    ]);
+}
+
+exports.createJsxSerializeTable = createJsxSerializeTable;
+exports.defaultRenderTableElements = defaultRenderTableElements;

package/table/jsx-serializer/index.d.ts

@@ -0,0 +1,3 @@
+export * from './typings';
+export { defaultRenderTableElements } from './defaultRenderTableElements';
+export { CreateJsxSerializeTableOptions, createJsxSerializeTable } from './createJsxSerializeTable';

package/table/jsx-serializer/index.js

@@ -0,0 +1,2 @@
+export { defaultRenderTableElements } from './defaultRenderTableElements.js';
+export { createJsxSerializeTable } from './createJsxSerializeTable.js';

package/table/jsx-serializer/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@quadrats/react/table/jsx-serializer",
+  "sideEffects": false,
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/table/jsx-serializer/typings.d.ts

@@ -0,0 +1,12 @@
+import { TableElement, TableTypeKey, TableTitleTypeKey, TableMainTypeKey, TableHeaderTypeKey, TableBodyTypeKey, TableRowTypeKey, TableCellTypeKey, ColumnWidth } from '@quadrats/common/table';
+import { JsxSerializeElementProps } from '@quadrats/react/jsx-serializer';
+import { RefObject } from 'react';
+export type JsxSerializeTableElementProps = JsxSerializeElementProps<TableElement>;
+export type TableJsxSerializeElements = Record<TableTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> & Record<TableTitleTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> & Record<TableMainTypeKey, (props: JsxSerializeTableElementProps & {
+    columnWidths?: ColumnWidth[];
+}) => JSX.Element | null | undefined> & Record<TableHeaderTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> & Record<TableBodyTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> & Record<TableRowTypeKey, (props: JsxSerializeTableElementProps) => JSX.Element | null | undefined> & Record<TableCellTypeKey, (props: JsxSerializeTableElementProps & {
+    isColumnPinned?: boolean;
+}) => JSX.Element | null | undefined>;
+export type TableScrollContextType = {
+    scrollRef: RefObject<HTMLDivElement | null>;
+};

package/table/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@quadrats/react/table",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
+}

package/table/table.css

@@ -0,0 +1 @@
+.qdr-table__table-toolbar{right:unset;left:50%;top:-4px;transform:translate(-50%, -100%)}.qdr-table{display:flex;flex-flow:column;align-items:flex-start;gap:var(--qdr-spacing-4);margin:var(--qdr-spacing-11) 0;position:relative}.qdr-table__selection{padding:0;position:absolute;left:-22px;top:0;z-index:0;width:20px;height:20px;color:var(--qdr-action-inactive);border:none;border-radius:var(--qdr-radius-1);background-color:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;cursor:pointer}.qdr-table__selection:hover{background-color:var(--qdr-secondary-active-bg);color:var(--qdr-action-active)}.qdr-table__portal-container{position:relative;pointer-events:none}.qdr-table__title{width:100%;display:block;position:relative;margin:0;font-size:var(--qdr-typography-article-h6-font-size);line-height:var(--qdr-typography-article-h6-line-height);letter-spacing:var(--qdr-typography-article-h6-letter-spacing);font-weight:var(--qdr-typography-article-h6-font-weight);color:var(--qdr-text-primary);background-color:var(--qdr-surface-secondary)}.qdr-table__title__placeholder{position:absolute;left:0;top:0;color:var(--qdr-text-secondary);pointer-events:none}.qdr-table__header{background-color:var(--qdr-bg)}.qdr-table__header--pinned{position:sticky;z-index:2;top:0;box-shadow:0 2px 4px -2px rgba(0,0,0,.1490196078)}.qdr-table__scrollContainer{width:100%;max-width:100%;max-height:420px;overflow:auto;scrollbar-width:thin;position:relative}.qdr-table__main{margin:0;border-collapse:separate;border-spacing:0;table-layout:fixed}.qdr-table__main th:not(:first-child),.qdr-table__main td:not(:first-child){border-left:none}.qdr-table__main thead tr:not(:last-child) th,.qdr-table__main tbody tr:not(:last-child) td{border-bottom:none}.qdr-table__inline-table-toolbar,.qdr-table__cell__inline-table-toolbar{pointer-events:none;top:-50px;left:0;right:unset}.qdr-table__mainWrapper{width:100%;max-width:100%;height:100%;position:relative}.qdr-table__mainWrapper--selected .qdr-table__main{border:2px solid var(--qdr-primary)}.qdr-table__mainWrapper--selected .qdr-table__table-toolbar{opacity:1;pointer-events:auto}.qdr-table__body{background-color:var(--qdr-surface-primary)}.qdr-table__cell{position:relative;padding:var(--qdr-spacing-3) var(--qdr-spacing-4);font-size:var(--qdr-typography-article-body1-font-size);line-height:var(--qdr-typography-article-body1-line-height);letter-spacing:var(--qdr-typography-article-body1-letter-spacing);font-weight:var(--qdr-typography-article-body1-font-weight);color:var(--qdr-text-primary);text-align:left;border-top:1px solid var(--qdr-border);border-right:1px solid var(--qdr-border);border-bottom:1px solid var(--qdr-border);border-left:1px solid var(--qdr-border);vertical-align:top;word-break:break-all}.qdr-table__cell p,.qdr-table__cell ul,.qdr-table__cell ol{margin:0}.qdr-table__cell--resizing::after{content:"";position:absolute;right:0;top:0;width:2px;height:100%;background-color:var(--qdr-primary-light);pointer-events:none;opacity:1}.qdr-table__cell__resize-handle{position:absolute;right:0;top:0;width:6px;height:100%;transform:translateX(0);cursor:col-resize;z-index:1}.qdr-table__cell--header{font-weight:var(--qdr-typography-article-h6-font-weight);color:var(--qdr-text-primary);background-color:var(--qdr-bg)}.qdr-table__cell--pinned{position:sticky;z-index:1;left:0;box-shadow:2px 0 4px -2px rgba(0,0,0,.1490196078)}.qdr-table__cell--top-active{border-top:2px solid var(--qdr-primary-light) !important}.qdr-table__cell--right-active{border-right:2px solid var(--qdr-primary-light) !important}.qdr-table__cell--bottom-active{border-bottom:2px solid var(--qdr-primary-light) !important}.qdr-table__cell--left-active{border-left:2px solid var(--qdr-primary-light) !important}.qdr-table__btn-icon{color:var(--qdr-action-disabled);pointer-events:none}.qdr-table__add-column{position:absolute;z-index:0;cursor:pointer;padding:0;background-color:var(--qdr-block);border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-divider);display:flex;align-items:center;justify-content:center;right:-24px;top:0;width:20px;height:100%}.qdr-table__add-column:hover{background-color:var(--qdr-bg)}.qdr-table__add-column:hover .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-column:active{background-color:var(--qdr-divider);border:1px solid var(--qdr-border)}.qdr-table__add-column:active .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-row{position:absolute;z-index:0;cursor:pointer;padding:0;background-color:var(--qdr-block);border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-divider);display:flex;align-items:center;justify-content:center;bottom:-24px;left:0;width:100%;height:20px}.qdr-table__add-row:hover{background-color:var(--qdr-bg)}.qdr-table__add-row:hover .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-row:active{background-color:var(--qdr-divider);border:1px solid var(--qdr-border)}.qdr-table__add-row:active .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-both{position:absolute;z-index:0;cursor:pointer;padding:0;background-color:var(--qdr-block);border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-divider);display:flex;align-items:center;justify-content:center;right:-24px;bottom:-24px;width:20px;height:20px}.qdr-table__add-both:hover{background-color:var(--qdr-bg)}.qdr-table__add-both:hover .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__add-both:active{background-color:var(--qdr-divider);border:1px solid var(--qdr-border)}.qdr-table__add-both:active .qdr-table__btn-icon{color:var(--qdr-text-secondary)}.qdr-table__delete{color:var(--qdr-error)}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.qdr-table__cell__focus-toolbar,.qdr-table__cell__inline-table-toolbar{position:absolute;right:unset;transform:translate(-10%, -100%);padding:4px;border-radius:10px;border:1px solid var(--qdr-border);background:var(--qdr-bg);box-shadow:0 4px 8px -2px rgba(0,0,0,.1019607843),0 2px 4px -2px rgba(0,0,0,.0392156863);animation-name:fade-in;animation-duration:.1s;animation-delay:.1s;animation-iteration-count:1;animation-fill-mode:forwards;animation-timing-function:linear;pointer-events:auto;z-index:10}.qdr-table__cell-row-action{position:absolute;z-index:9;width:20px;height:24px;padding:0;border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-primary-active-bg);background-color:var(--qdr-primary-hover-bg);display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;opacity:1}.qdr-table__cell-column-action{position:absolute;z-index:9;width:20px;height:24px;padding:0;border-radius:var(--qdr-radius-1);border:1px solid var(--qdr-primary-active-bg);background-color:var(--qdr-primary-hover-bg);display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;opacity:1;transform:rotate(90deg);transform-origin:center}.qdr-table__size-indicators{display:none;overflow:hidden;position:absolute;z-index:1;left:0;top:0;width:100%;max-width:100%;padding:8px 0;pointer-events:none;transform:translateY(-100%);flex-flow:row nowrap;align-items:center}.qdr-table__size-indicator{display:flex;align-items:center;justify-content:center;position:relative}.qdr-table__size{background-color:var(--qdr-action-inactive);color:var(--qdr-on-primary);padding:4px 8px;font-size:12px;white-space:pre-wrap;position:relative}.qdr-table__size::after{position:absolute;content:"";z-index:-1;top:calc(100% - 2px);left:50%;width:10px;height:10px;background-color:var(--qdr-action-inactive);border-right:1px solid var(--qdr-action-inactive);border-bottom:1px solid var(--qdr-action-inactive);transform:translateX(-50%) translateY(-50%) rotate(45deg)}