@headless-adminapp/fluent 0.0.17-alpha.1

package/DataGrid/GridTableContainer.js

@@ -0,0 +1,248 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridTableContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const hooks_1 = require("@headless-adminapp/app/datagrid/hooks");
+const locale_1 = require("@headless-adminapp/app/locale");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
+const hooks_3 = require("@headless-adminapp/app/route/hooks");
+const app_1 = require("@headless-adminapp/core/experience/app");
+const react_table_1 = require("@tanstack/react-table");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const react_1 = require("react");
+const ScrollbarWithMoreDataRequest_1 = require("./ScrollbarWithMoreDataRequest");
+const useTableColumns_1 = require("./useTableColumns");
+const utils_1 = require("./utils");
+const useStyles = (0, react_components_1.makeStyles)({
+    root: {
+        '&:hover': {
+            // background: tokens.colorNeutralForeground1Hover,
+            '& .fui-TableSelectionCell': {
+                background: 'inherit',
+            },
+            '& .tableCellAction': {
+                background: 'inherit !important',
+            },
+        },
+        '& .tableCellAction': {
+            background: react_components_1.tokens.colorNeutralBackground1,
+        },
+        borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+        '& .fui-TableCell': {
+        // borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
+        // borderBottom: 'none !important',
+        },
+    },
+    selectionCell: {
+        position: 'sticky',
+        left: 0,
+        background: react_components_1.tokens.colorNeutralBackground1,
+        zIndex: 1,
+        display: 'flex',
+        alignItems: 'center',
+    },
+    table: {
+        color: 'yellow',
+        '&:after': {
+            content: ' ',
+            display: 'block',
+            height: '32px',
+        },
+    },
+});
+const fallbackData = [];
+const GridTableContainer = ({ noPadding, disableColumnFilter, disableColumnSort, disableColumnResize, disableContextMenu, disableSelection, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const styles = useStyles();
+    const data = (0, hooks_1.useGridData)();
+    const dataState = (0, hooks_1.useGridDataState)();
+    const fetchNextPage = (0, mutable_1.useContextSelector)(datagrid_1.GridContext, (state) => state.fetchNextPage);
+    const columns = (0, hooks_1.useGridColumns)();
+    const [sorting] = (0, hooks_1.useGridSorting)();
+    const schema = (0, hooks_1.useDataGridSchema)();
+    const [selectedIds, setSelectedIds] = (0, hooks_1.useGridSelection)();
+    const setSelectedIdsRef = (0, react_1.useRef)(setSelectedIds);
+    setSelectedIdsRef.current = setSelectedIds;
+    const sortingState = (0, react_1.useMemo)(() => {
+        return sorting.map((sort) => ({
+            id: sort.field,
+            desc: sort.order === 'desc',
+        }));
+    }, [sorting]);
+    const tableWrapperRef = (0, react_1.useRef)(null);
+    const routeResolver = (0, hooks_3.useRouteResolver)();
+    const router = (0, hooks_3.useRouter)();
+    const recordSetSetter = (0, hooks_2.useRecordSetSetter)();
+    const openRecord = (0, react_1.useCallback)((id) => {
+        var _a, _b;
+        const path = routeResolver({
+            logicalName: schema.logicalName,
+            type: app_1.PageType.EntityForm,
+            id,
+        });
+        recordSetSetter(schema.logicalName, (_b = (_a = dataRef.current) === null || _a === void 0 ? void 0 : _a.records.map((x) => x[schema.idAttribute])) !== null && _b !== void 0 ? _b : []);
+        router.push(path);
+    }, [
+        recordSetSetter,
+        routeResolver,
+        router,
+        schema.idAttribute,
+        schema.logicalName,
+    ]);
+    const { direction } = (0, locale_1.useLocale)();
+    const dataRef = (0, react_1.useRef)(data);
+    dataRef.current = data;
+    const tableColumns = (0, useTableColumns_1.useTableColumns)({
+        disableColumnFilter,
+        disableColumnResize,
+        disableColumnSort,
+        disableContextMenu,
+        disableSelection,
+        tableWrapperRef,
+    });
+    const rowSelection = (0, react_1.useMemo)(() => {
+        return selectedIds.reduce((acc, id) => {
+            acc[id] = true;
+            return acc;
+        }, {});
+    }, [selectedIds]);
+    const table = (0, react_table_1.useReactTable)({
+        data: (_a = data === null || data === void 0 ? void 0 : data.records) !== null && _a !== void 0 ? _a : fallbackData,
+        columns: tableColumns,
+        getRowId: (row) => row[schema.idAttribute],
+        enableRowSelection: true,
+        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
+        columnResizeMode: 'onChange',
+        columnResizeDirection: 'ltr',
+        onRowSelectionChange: () => {
+            // do nothing
+        },
+        state: {
+            rowSelection,
+            sorting: sortingState,
+        },
+    });
+    const tableRef = (0, react_1.useRef)(table);
+    tableRef.current = table;
+    (0, react_1.useEffect)(() => {
+        tableRef.current.resetColumnSizing();
+    }, [columns]);
+    const rows = table.getRowModel().rows;
+    const virtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: () => { var _a, _b; return (_b = (_a = tableWrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement; },
+        estimateSize: () => 44,
+        overscan: 30,
+        paddingStart: 33,
+    });
+    const tableElementRef = (0, react_1.useRef)(null);
+    const virtualItems = virtualizer.getVirtualItems();
+    const virtualSize = virtualizer.getTotalSize();
+    const [isScrollNearBottom, setIsScrollNearBottom] = (0, react_1.useState)(false);
+    // callback to adjust the height of the pseudo element
+    const handlePseudoResize = (0, react_1.useCallback)(() => {
+        return (0, utils_1.adjustTableHeight)(tableElementRef, virtualSize);
+    }, [virtualSize]);
+    // callback to handle scrolling, checking if we are near the bottom
+    const handleScroll = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if ((_b = (_a = tableWrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement) {
+            const scrollPosition = (_e = (_d = (_c = tableWrapperRef.current) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.scrollTop;
+            const visibleHeight = (_h = (_g = (_f = tableWrapperRef.current) === null || _f === void 0 ? void 0 : _f.parentElement) === null || _g === void 0 ? void 0 : _g.parentElement) === null || _h === void 0 ? void 0 : _h.clientHeight;
+            setIsScrollNearBottom(scrollPosition > virtualSize * 0.95 - visibleHeight);
+        }
+    }, [virtualSize]);
+    // add an event listener on the scrollable parent container and resize the
+    // pseudo element whenever the table renders with new data
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const scrollable = (_b = (_a = tableWrapperRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.parentElement;
+        if (scrollable)
+            scrollable.addEventListener('scroll', handleScroll);
+        handlePseudoResize();
+        return () => {
+            if (scrollable)
+                scrollable.removeEventListener('scroll', handleScroll);
+        };
+    }, [data, handleScroll, handlePseudoResize]);
+    // if we are near the bottom of the table, resize the pseudo element each time
+    // the length of virtual items changes (which is effectively the number of table
+    // rows rendered to the DOM). This ensures we don't scroll too far or too short.
+    (0, react_1.useEffect)(() => {
+        if (isScrollNearBottom)
+            handlePseudoResize();
+    }, [isScrollNearBottom, virtualItems.length, handlePseudoResize]);
+    const isScrolledToRight = ((_d = (_c = (_b = tableWrapperRef.current) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.scrollLeft) ===
+        ((_h = (_g = (_f = (_e = tableWrapperRef.current) === null || _e === void 0 ? void 0 : _e.parentElement) === null || _f === void 0 ? void 0 : _f.parentElement) === null || _g === void 0 ? void 0 : _g.scrollWidth) !== null && _h !== void 0 ? _h : 0) -
+            ((_m = (_l = (_k = (_j = tableWrapperRef.current) === null || _j === void 0 ? void 0 : _j.parentElement) === null || _k === void 0 ? void 0 : _k.parentElement) === null || _l === void 0 ? void 0 : _l.clientWidth) !== null && _m !== void 0 ? _m : 0);
+    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollbarWithMoreDataRequest_1.ScrollbarWithMoreDataRequest, { data: data === null || data === void 0 ? void 0 : data.records, hasMore: dataState === null || dataState === void 0 ? void 0 : dataState.hasNextPage, rtl: direction === 'rtl', onRequestMore: () => {
+                fetchNextPage();
+            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                    paddingInline: noPadding ? 0 : 8,
+                    position: 'relative',
+                }, ref: tableWrapperRef, children: (0, jsx_runtime_1.jsxs)(react_components_1.Table, { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        borderCollapse: 'collapse',
+                        width: '100%',
+                        height: virtualizer.getTotalSize() + 33,
+                        ['--action-shadow']: !isScrolledToRight
+                            ? '-2px 0px 6px rgba(0, 0, 0, 0.12)'
+                            : 'none',
+                    }, ref: tableElementRef, className: "table-pseduo", children: [(0, jsx_runtime_1.jsx)(react_components_1.TableHeader, { style: {
+                                display: 'flex',
+                                position: 'sticky',
+                                top: 0,
+                                background: react_components_1.tokens.colorNeutralBackground3,
+                                zIndex: 2,
+                            }, children: table.getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+                                    position: 'sticky',
+                                    top: 0,
+                                    display: 'flex',
+                                    minWidth: 'calc(100% - 16px)',
+                                }, children: headerGroup.headers.map((header) => header.isPlaceholder
+                                    ? null
+                                    : (0, react_table_1.flexRender)(header.column.columnDef.header, Object.assign(Object.assign({}, header.getContext()), { key: header.id }))) }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                transform: 'translateY(-33px)',
+                            }, children: virtualItems.map((virtualRow) => {
+                                const row = rows[virtualRow.index];
+                                return ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { className: (0, react_components_1.mergeClasses)(styles.root), style: {
+                                        display: 'flex',
+                                        height: `${virtualRow.size}px`,
+                                        minWidth: 'calc(100% - 16px)',
+                                        position: 'absolute',
+                                        transform: `translateY(${virtualRow.start}px)`,
+                                    }, onClick: () => {
+                                        setSelectedIdsRef.current(() => {
+                                            const id = row.original[schema.idAttribute];
+                                            return [id];
+                                        });
+                                    }, onDoubleClick: () => {
+                                        const id = row.original[schema.idAttribute];
+                                        openRecord(id);
+                                    }, children: row.getVisibleCells().map((cell) => (0, react_table_1.flexRender)(cell.column.columnDef.cell, Object.assign(Object.assign({}, cell.getContext()), { key: cell.column.id }))) }, row.id));
+                            }) }), dataState.isFetching && ((0, jsx_runtime_1.jsx)(react_components_1.TableBody, { style: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                position: 'absolute',
+                                transform: `translateY(${virtualSize}px)`,
+                            }, children: Array.from({ length: 10 }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_components_1.TableRow, { style: {
+                                    display: 'flex',
+                                    height: 44,
+                                    alignItems: 'center',
+                                }, children: table.getAllColumns().map((column, index) => {
+                                    if (!column.getIsVisible())
+                                        return null;
+                                    return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            width: column.getSize(),
+                                        }, children: (0, jsx_runtime_1.jsx)(react_components_1.SkeletonItem, { size: 16 }) }, index));
+                                }) }, index))) }))] }) }) }) }));
+};
+exports.GridTableContainer = GridTableContainer;

package/DataGrid/ScrollbarWithMoreDataRequest.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+interface ScrollbarWithMoreDataRequest {
+    data: any;
+    hasMore: boolean;
+    onRequestMore: () => void;
+    rtl?: boolean;
+}
+export declare const ScrollbarWithMoreDataRequest: FC<PropsWithChildren<ScrollbarWithMoreDataRequest>>;
+export {};

package/DataGrid/ScrollbarWithMoreDataRequest.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollbarWithMoreDataRequest = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
+const react_1 = require("react");
+function getReaminingSpace(div) {
+    return div.scrollHeight - div.scrollTop - div.clientHeight;
+}
+const ScrollbarWithMoreDataRequest = ({ data, onRequestMore, hasMore, children, rtl }) => {
+    const divRef = (0, react_1.useRef)(null);
+    const onRequestMoreRef = (0, react_1.useRef)(onRequestMore);
+    onRequestMoreRef.current = onRequestMore;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const div = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!div) {
+            return;
+        }
+        const remainingSpace = getReaminingSpace(div);
+        if (remainingSpace <= 0 && hasMore) {
+            onRequestMoreRef.current();
+        }
+    }, [data, hasMore]);
+    return ((0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, rtl: rtl, onScroll: (e) => {
+            const div = e.target;
+            const remainingSpace = getReaminingSpace(div);
+            if (remainingSpace <= 0 && hasMore) {
+                onRequestMoreRef.current();
+            }
+        }, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, children: children }) }));
+};
+exports.ScrollbarWithMoreDataRequest = ScrollbarWithMoreDataRequest;

package/DataGrid/TableCell/TableCellAction.d.ts

@@ -0,0 +1,8 @@
+import { ArrayGroupWithAtLeastOne } from '@headless-adminapp/core/types';
+import { FC } from 'react';
+import { MenuItemProps } from '../../CommandBar/MenuItem';
+export interface TableCellActionProps {
+    items: ArrayGroupWithAtLeastOne<MenuItemProps>;
+    onOpen?: () => void;
+}
+export declare const TableCellAction: FC<TableCellActionProps>;

package/DataGrid/TableCell/TableCellAction.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellAction = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const icons_1 = require("@headless-adminapp/icons");
+const MenuList_1 = require("../../CommandBar/MenuList");
+const useStyles = (0, react_components_1.makeStyles)({
+    button: {
+        '&:hover': {
+            background: react_components_1.tokens.colorNeutralBackground5,
+        },
+    },
+});
+const TableCellAction = ({ items, onOpen, }) => {
+    const styles = useStyles();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { className: "tableCellAction", style: {
+            display: 'flex',
+            padding: 0,
+            // width: 32,
+            minWidth: 32,
+            // maxWidth: 32,
+            flex: 1,
+            flexShrink: 0,
+            position: 'sticky',
+            right: 0,
+            // top: 0,
+            zIndex: 1,
+            justifyContent: 'right',
+            // background: 'white',
+            // boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
+            borderBottom: `${react_components_1.tokens.strokeWidthThin} solid ${react_components_1.tokens.colorNeutralStroke3}`,
+        }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Menu, { positioning: "before-top", children: [(0, jsx_runtime_1.jsx)(react_components_1.MenuTrigger, { children: (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "transparent", icon: (0, jsx_runtime_1.jsx)(icons_1.Icons.MoreVertical, {}), onClick: onOpen, className: styles.button, style: {
+                            // background: 'white',
+                            // boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
+                            boxShadow: 'var(--action-shadow)',
+                            borderRadius: 0,
+                            // background: tokens.colorNeutralBackground1,
+                        } }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(MenuList_1.MenuList, { items: items }) })] }) }));
+};
+exports.TableCellAction = TableCellAction;

package/DataGrid/TableCell/TableCellBase.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, FC, MouseEventHandler, ReactNode } from 'react';
+export interface TableCellBaseProps {
+    children?: ReactNode;
+    onClick?: MouseEventHandler | undefined;
+    style?: CSSProperties | undefined;
+}
+export declare const TableCellBase: FC<TableCellBaseProps>;

package/DataGrid/TableCell/TableCellBase.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const TableCellBase = ({ children, onClick, style, }) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { onClick: onClick, style: Object.assign({ display: 'flex', alignItems: 'center' }, style), children: children }));
+};
+exports.TableCellBase = TableCellBase;

package/DataGrid/TableCell/TableCellCheckbox.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export interface TableCellCheckboxProps {
+    checked?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const TableCellCheckbox: FC<TableCellCheckboxProps>;

package/DataGrid/TableCell/TableCellCheckbox.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellCheckbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const TableCellCheckbox = ({ checked, onChange, }) => {
+    return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: { display: 'flex', alignItems: 'center' }, onClick: (event) => {
+            event.stopPropagation();
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Checkbox, { checked: checked !== null && checked !== void 0 ? checked : false, onChange: (event) => {
+                event.stopPropagation();
+                onChange === null || onChange === void 0 ? void 0 : onChange(event);
+            } }) }));
+};
+exports.TableCellCheckbox = TableCellCheckbox;

package/DataGrid/TableCell/TableCellLink.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export interface TableCellLinkProps {
+    value: string | undefined | null;
+    href?: string;
+    onClick?: () => void;
+    width: number;
+}
+export declare const TableCellLink: FC<TableCellLinkProps>;

package/DataGrid/TableCell/TableCellLink.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellLink = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/route/hooks");
+const TableCellLink = ({ value, href, onClick, width, }) => {
+    const router = (0, hooks_1.useRouter)();
+    return ((0, jsx_runtime_1.jsx)(react_components_1.TableCell, { style: {
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            width,
+            minWidth: width,
+            maxWidth: width,
+            display: 'flex',
+            alignItems: 'center',
+        }, children: (0, jsx_runtime_1.jsx)(react_components_1.Link, { as: "a", href: href, onClick: (event) => {
+                if (event.metaKey || event.ctrlKey) {
+                    return;
+                }
+                if (onClick) {
+                    event.preventDefault();
+                    onClick();
+                    return;
+                }
+                if (href === null || href === void 0 ? void 0 : href.startsWith('/')) {
+                    router.push(href);
+                    event.preventDefault();
+                }
+            }, children: value }) }));
+};
+exports.TableCellLink = TableCellLink;

package/DataGrid/TableCell/TableCellText.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface TableCellTextProps {
+    value: string;
+    width: number;
+    textAlignment?: 'left' | 'center' | 'right';
+}
+export declare const TableCellText: FC<TableCellTextProps>;

package/DataGrid/TableCell/TableCellText.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TableCellBase_1 = require("./TableCellBase");
+const TableCellText = ({ value, width, textAlignment, }) => {
+    return ((0, jsx_runtime_1.jsx)(TableCellBase_1.TableCellBase, { style: {
+            textAlign: textAlignment || 'left',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            // maxWidth: 50,
+            // width: 50,
+            // width: '100%',
+            width,
+            minWidth: width,
+            maxWidth: width,
+            // minWidth: 200,
+            // display: 'flex',
+            // alignItems: 'center',
+            // borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke3}`,
+        }, children: (0, jsx_runtime_1.jsx)("div", { style: { overflow: 'hidden', textOverflow: 'ellipsis', width: '100%' }, children: value }) }));
+};
+exports.TableCellText = TableCellText;

package/DataGrid/TableCell/index.d.ts

@@ -0,0 +1,4 @@
+export * from './TableCellBase';
+export * from './TableCellText';
+export * from './TableCellAction';
+export * from './TableCellCheckbox';

package/DataGrid/TableCell/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TableCellBase"), exports);
+__exportStar(require("./TableCellText"), exports);
+__exportStar(require("./TableCellAction"), exports);
+__exportStar(require("./TableCellCheckbox"), exports);

package/DataGrid/getAttributeFormattedValue.d.ts

@@ -0,0 +1,16 @@
+import { Attribute, InferredAttributeType } from '@headless-adminapp/core/attributes';
+interface AttributeFormattedValueStringsSet {
+    yes: string;
+    no: string;
+}
+/*** @todo move to app */
+export declare function getAttributeFormattedValue<A extends Attribute = Attribute>(attribute: Attribute, value: InferredAttributeType<A> | null | undefined, options?: {
+    maxCount?: number;
+    strings?: AttributeFormattedValueStringsSet;
+    dateFormat?: string;
+    locale?: string;
+    currency?: string;
+    currencySign?: 'accounting' | 'standard';
+    currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code';
+}): string | null | undefined;
+export {};

package/DataGrid/getAttributeFormattedValue.js

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAttributeFormattedValue = getAttributeFormattedValue;
+const dayjs_1 = __importDefault(require("dayjs"));
+const defaultAttributeFormattedValueStrings = {
+    yes: 'Yes',
+    no: 'No',
+};
+const defaultDateFormat = 'YYYY-MM-DD';
+const defaultLocale = 'en-US';
+const defaultCurrency = 'USD';
+const defaultCurrencySign = 'accounting';
+const defaultCurrencyDisplay = 'symbol';
+/*** @todo move to app */
+function getAttributeFormattedValue(attribute, value, options) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    if (value === null || value === undefined) {
+        return null;
+    }
+    const strings = (_a = options === null || options === void 0 ? void 0 : options.strings) !== null && _a !== void 0 ? _a : defaultAttributeFormattedValueStrings;
+    const dateFormat = (_b = options === null || options === void 0 ? void 0 : options.dateFormat) !== null && _b !== void 0 ? _b : defaultDateFormat;
+    const locale = (_c = options === null || options === void 0 ? void 0 : options.locale) !== null && _c !== void 0 ? _c : defaultLocale;
+    const currency = (_d = options === null || options === void 0 ? void 0 : options.currency) !== null && _d !== void 0 ? _d : defaultCurrency;
+    const currencySign = (_e = options === null || options === void 0 ? void 0 : options.currencySign) !== null && _e !== void 0 ? _e : defaultCurrencySign;
+    const currencyDisplay = (_f = options === null || options === void 0 ? void 0 : options.currencyDisplay) !== null && _f !== void 0 ? _f : defaultCurrencyDisplay;
+    switch (attribute.type) {
+        case 'boolean':
+            return value
+                ? (_g = attribute.trueLabel) !== null && _g !== void 0 ? _g : strings.yes
+                : (_h = attribute.falseLabel) !== null && _h !== void 0 ? _h : strings.no;
+        case 'choice':
+            return ((_j = attribute.options.find((option) => option.value === value)) !== null && _j !== void 0 ? _j : {
+                label: '',
+            }).label;
+        case 'choices':
+            return value
+                .map((v) => {
+                var _a;
+                return ((_a = attribute.options.find((option) => option.value === v)) !== null && _a !== void 0 ? _a : {
+                    label: '',
+                }).label;
+            })
+                .join(', ');
+        case 'date':
+            return (0, dayjs_1.default)(value).format(dateFormat);
+        case 'daterange':
+            if (!value)
+                return null;
+            const from = value[0];
+            const to = value[1];
+            if (!from && !to) {
+                return null;
+            }
+            if (from && to) {
+                return ((0, dayjs_1.default)(from).format(dateFormat) + ' - ' + (0, dayjs_1.default)(to).format(dateFormat));
+            }
+            if (from) {
+                return 'After ' + (0, dayjs_1.default)(from).format(dateFormat);
+            }
+            if (to) {
+                return 'Before ' + (0, dayjs_1.default)(to).format(dateFormat);
+            }
+            return null;
+        case 'lookup':
+            return value === null || value === void 0 ? void 0 : value.name;
+        case 'lookups':
+            const items = value === null || value === void 0 ? void 0 : value.map((v) => v.name);
+            if ((options === null || options === void 0 ? void 0 : options.maxCount) && (items === null || items === void 0 ? void 0 : items.length) > options.maxCount) {
+                return (items.slice(0, options.maxCount).join(', ') +
+                    ` (+${items.length - options.maxCount})`);
+            }
+            else {
+                return items === null || items === void 0 ? void 0 : items.join(', ');
+            }
+        case 'money':
+            return new Intl.NumberFormat(locale, {
+                style: 'currency',
+                currency,
+                currencySign,
+                currencyDisplay,
+            }).format(value);
+        case 'number':
+            return new Intl.NumberFormat(locale).format(value);
+        default:
+            return typeof value === 'object'
+                ? JSON.stringify(value)
+                : value;
+    }
+}

package/DataGrid/index.d.ts

@@ -0,0 +1,4 @@
+export { CommandContainer } from './CommandContainer';
+export { GridHeaderContainer } from './GridHeaderContainer';
+export { GridPaginationContainer } from './GridPaginationContainer';
+export { GridTableContainer } from './GridTableContainer';

package/DataGrid/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridTableContainer = exports.GridPaginationContainer = exports.GridHeaderContainer = exports.CommandContainer = void 0;
+var CommandContainer_1 = require("./CommandContainer");
+Object.defineProperty(exports, "CommandContainer", { enumerable: true, get: function () { return CommandContainer_1.CommandContainer; } });
+var GridHeaderContainer_1 = require("./GridHeaderContainer");
+Object.defineProperty(exports, "GridHeaderContainer", { enumerable: true, get: function () { return GridHeaderContainer_1.GridHeaderContainer; } });
+var GridPaginationContainer_1 = require("./GridPaginationContainer");
+Object.defineProperty(exports, "GridPaginationContainer", { enumerable: true, get: function () { return GridPaginationContainer_1.GridPaginationContainer; } });
+var GridTableContainer_1 = require("./GridTableContainer");
+Object.defineProperty(exports, "GridTableContainer", { enumerable: true, get: function () { return GridTableContainer_1.GridTableContainer; } });

package/DataGrid/useTableColumns.d.ts

@@ -0,0 +1,10 @@
+import { InferredSchemaType, SchemaAttributes } from '@headless-adminapp/core/schema';
+import { Data } from '@headless-adminapp/core/transport';
+export declare function useTableColumns({ disableSelection, disableContextMenu, disableColumnResize, disableColumnFilter, disableColumnSort, tableWrapperRef, }: {
+    disableSelection?: boolean;
+    disableContextMenu?: boolean;
+    disableColumnResize?: boolean;
+    disableColumnFilter?: boolean;
+    disableColumnSort?: boolean;
+    tableWrapperRef: React.RefObject<HTMLDivElement>;
+}): import("@tanstack/react-table").AccessorFnColumnDef<Data<InferredSchemaType<SchemaAttributes>>, unknown>[];