@frui.ts/dataviews - npm Package Compare versions

Comparing version 1.0.0-alpha.12 to 1.0.0-alpha.13

dist/dataList/dataListRow.d.ts

 /// <reference types="react" />
-import type { PropsWithColumns, ResponsiveColumnDefinition } from "../dataTypes";
+import { PropsWithColumns, ResponsiveColumnDefinition } from "../dataTypes";
 export interface DataListRowProps<TItem, TContext> extends PropsWithColumns<TItem, TContext> {
@@ -4,0 +4,0 @@ item: TItem;

dist/dataList/dataListRow.js

@@ -6,32 +6,34 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const mobx_react_lite_1 = require("mobx-react-lite");
-const react_1 = __importDefault(require("react"));
-function Header({ column, context }) {
-    var _a, _b, _c, _d, _e;
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = __importDefault(require("react"));
+function Header(_a) {
+    var column = _a.column, context = _a.context;
+    var _b, _c, _d, _e, _f;
     if (column.headerFormatter) {
-        return react_1.default.createElement(react_1.default.Fragment, null, column.headerFormatter({ key: "list-header", column, context }));
+        return react_1.default.createElement(react_1.default.Fragment, null, column.headerFormatter({ key: "list-header", column: column, context: context }));
     }
     else {
-        return (react_1.default.createElement("th", { scope: "row", className: column.headerClassName }, (_e = (_c = (_b = (_a = column.responsiveTitleFactory) === null || _a === void 0 ? void 0 : _a.call(column, context)) !== null && _b !== void 0 ? _b : column.responsiveTitle) !== null && _c !== void 0 ? _c : (_d = column.titleFactory) === null || _d === void 0 ? void 0 : _d.call(column, context)) !== null && _e !== void 0 ? _e : column.title));
+        return (react_1.default.createElement("th", { scope: "row", className: column.headerClassName }, (_f = (_d = (_c = (_b = column.responsiveTitleFactory) === null || _b === void 0 ? void 0 : _b.call(column, context)) !== null && _c !== void 0 ? _c : column.responsiveTitle) !== null && _d !== void 0 ? _d : (_e = column.titleFactory) === null || _e === void 0 ? void 0 : _e.call(column, context)) !== null && _f !== void 0 ? _f : column.title));
     }
 }
-function DataListRowImpl({ item, columns, context }) {
+function DataListRowImpl(_a) {
+    var item = _a.item, columns = _a.columns, context = _a.context;
     return (react_1.default.createElement("tbody", null, columns
-        .filter(x => x.responsiveVisible !== false)
-        .map((column, i) => {
+        .filter(function (x) { return x.responsiveVisible !== false; })
+        .map(function (column, i) {
         var _a;
-        const key = (_a = column.property) !== null && _a !== void 0 ? _a : i;
-        const value = column.property ? item[column.property] : undefined;
-        const hasHeader = column.responsiveTitle !== false;
+        var key = (_a = column.property) !== null && _a !== void 0 ? _a : i;
+        var value = column.property ? item[column.property] : undefined;
+        var hasHeader = column.responsiveTitle !== false;
         return (react_1.default.createElement("tr", { key: key },
             hasHeader && react_1.default.createElement(Header, { column: column, context: context }),
             react_1.default.createElement("td", { colSpan: hasHeader ? 1 : 2 }, column.cellFormatter
-                ? column.cellFormatter({ key, value, item, column, context })
+                ? column.cellFormatter({ key: key, value: value, item: item, column: column, context: context })
                 : column.valueFormatter
-                    ? column.valueFormatter({ value, item, column, context })
+                    ? column.valueFormatter({ value: value, item: item, column: column, context: context })
                     : value)));
     })));
 }
-const DataListRow = (0, mobx_react_lite_1.observer)(DataListRowImpl);
+var DataListRow = mobx_react_lite_1.observer(DataListRowImpl);
 exports.default = DataListRow;
 //# sourceMappingURL=dataListRow.js.map

dist/dataList/index.d.ts

 /// <reference types="react" />
-import type { DataTableProps } from "../dataTable";
-import type { ResponsiveColumnDefinition } from "../dataTypes";
+import { DataTableProps } from "../dataTable";
+import { ResponsiveColumnDefinition } from "../dataTypes";
 export interface DataListProps<TItem, TContext> extends DataTableProps<TItem, TContext> {
@@ -9,5 +9,5 @@ columns: ResponsiveColumnDefinition<TItem, TContext>[];
 declare namespace DataListImpl {
-    var defaultProps: Omit<Partial<DataListProps<any, any>>, "id" | "columns" | "context">;
+    var defaultProps: Pick<Partial<DataListProps<any, any>>, "className" | "rowProps" | "headerRowClassName" | "pagingFilter" | "onColumnSort" | "displayHeader" | "items" | "itemKey">;
 }
 declare const DataList: typeof DataListImpl;
 export default DataList;

dist/dataList/index.js

@@ -6,12 +6,13 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const mobx_react_lite_1 = require("mobx-react-lite");
-const react_1 = __importDefault(require("react"));
-const dataListRow_1 = __importDefault(require("./dataListRow"));
-const defaultProps = {};
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = __importDefault(require("react"));
+var dataListRow_1 = __importDefault(require("./dataListRow"));
+var defaultProps = {};
 function DataListImpl(props) {
-    return (react_1.default.createElement("table", { id: props.id, className: props.className }, props.items.map(item => (react_1.default.createElement(dataListRow_1.default, { key: String(item[props.itemKey]), item: item, columns: props.columns, context: props.context })))));
+    var _a;
+    return (react_1.default.createElement("table", { id: props.id, className: props.className }, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (react_1.default.createElement(dataListRow_1.default, { key: String(item[props.itemKey]), item: item, columns: props.columns, context: props.context })); })));
 }
 DataListImpl.defaultProps = defaultProps;
-const DataList = (0, mobx_react_lite_1.observer)(DataListImpl);
+var DataList = mobx_react_lite_1.observer(DataListImpl);
 exports.default = DataList;
 //# sourceMappingURL=index.js.map

dist/dataRepeater/index.d.ts

@@ -1,3 +0,3 @@
-import React from "react";
-import type { DataTablePropsBase } from "../dataTypes";
+import * as React from "react";
+import { DataTablePropsBase } from "../dataTypes";
 export interface DataRepeaterProps<TItem, TContext, TWrapper extends React.ElementType, THeadWrapper extends React.ElementType, THeadCell extends React.ElementType, TBodyWrapper extends React.ElementType, TItemWrapper extends React.ElementType, TItemCell extends React.ElementType> extends DataTablePropsBase<TItem, TContext> {
@@ -4,0 +4,0 @@ wrapperType?: TWrapper;

dist/dataRepeater/index.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,7 +24,7 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-const mobx_react_lite_1 = require("mobx-react-lite");
-const react_1 = __importDefault(require("react"));
-const repeaterHeader_1 = __importDefault(require("./repeaterHeader"));
-const repeaterRow_1 = __importDefault(require("./repeaterRow"));
-const defaultProps = {
+var mobx_react_lite_1 = require("mobx-react-lite");
+var React = __importStar(require("react"));
+var repeaterHeader_1 = __importDefault(require("./repeaterHeader"));
+var repeaterRow_1 = __importDefault(require("./repeaterRow"));
+var defaultProps = {
     displayHeader: true,
@@ -16,11 +34,11 @@ };
     var _a, _b;
-    const Wrapper = (_a = props.wrapperType) !== null && _a !== void 0 ? _a : "table";
-    const ItemWrapper = (_b = props.bodyWrapperType) !== null && _b !== void 0 ? _b : "tbody";
-    return (react_1.default.createElement(Wrapper, Object.assign({ id: props.id }, props.wrapperProps),
-        props.displayHeader && (react_1.default.createElement(repeaterHeader_1.default, { columns: props.columns, context: props.context, pagingFilter: props.pagingFilter, onColumnSort: props.onColumnSort, wrapperType: props.headWrapperType, wrapperProps: props.headWrapperProps, itemCellType: props.headCellType, itemCellProps: props.headCellProps })),
-        react_1.default.createElement(ItemWrapper, Object.assign({}, props.bodyWrapperProps), props.items.map(item => (react_1.default.createElement(repeaterRow_1.default, { key: String(item[props.itemKey]), item: item, columns: props.columns, context: props.context, wrapperType: props.itemWrapperType, wrapperProps: props.itemWrapperProps, itemCellType: props.itemCellType, itemCellProps: props.itemCellProps }))))));
+    var Wrapper = (_a = props.wrapperType) !== null && _a !== void 0 ? _a : "table";
+    var ItemWrapper = (_b = props.bodyWrapperType) !== null && _b !== void 0 ? _b : "tbody";
+    return (React.createElement(Wrapper, __assign({ id: props.id }, props.wrapperProps),
+        props.displayHeader && (React.createElement(repeaterHeader_1.default, { columns: props.columns, context: props.context, pagingFilter: props.pagingFilter, onColumnSort: props.onColumnSort, wrapperType: props.headWrapperType, wrapperProps: props.headWrapperProps, itemCellType: props.headCellType, itemCellProps: props.headCellProps })),
+        React.createElement(ItemWrapper, __assign({}, props.bodyWrapperProps), props.items.map(function (item) { return (React.createElement(repeaterRow_1.default, { key: String(item[props.itemKey]), item: item, columns: props.columns, context: props.context, wrapperType: props.itemWrapperType, wrapperProps: props.itemWrapperProps, itemCellType: props.itemCellType, itemCellProps: props.itemCellProps })); }))));
 }
 dataRepeater.defaultProps = defaultProps;
-const DataRepeater = (0, mobx_react_lite_1.observer)(dataRepeater);
+var DataRepeater = mobx_react_lite_1.observer(dataRepeater);
 exports.default = DataRepeater;
 //# sourceMappingURL=index.js.map

dist/dataRepeater/repeaterHeader.d.ts

@@ -1,4 +0,4 @@
-import type { IPagingFilter } from "@frui.ts/data";
-import React from "react";
-import type { ColumnDefinition, PropsWithColumns } from "../dataTypes";
+import { IPagingFilter } from "@frui.ts/data";
+import * as React from "react";
+import { ColumnDefinition, PropsWithColumns } from "../dataTypes";
 export interface HeaderRowProps<TItem, TContext, TWrapper extends React.ElementType, TItemCell extends React.ElementType> extends PropsWithColumns<TItem, TContext> {
@@ -5,0 +5,0 @@ pagingFilter?: IPagingFilter;

dist/dataRepeater/repeaterHeader.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const data_1 = require("@frui.ts/data");
-const data_2 = require("@frui.ts/data");
-const mobx_react_lite_1 = require("mobx-react-lite");
-const react_1 = __importDefault(require("react"));
+var data_1 = require("@frui.ts/data");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var React = __importStar(require("react"));
 function getSortIndicatorClass(pagingFilter, columnName) {
-    const currentDirection = (0, data_1.getSortingDirection)(pagingFilter, columnName);
-    if (currentDirection) {
-        return currentDirection === data_2.SortingDirection.Descending ? "sort-indicator desc" : "sort-indicator asc";
+    if (pagingFilter.sortColumn === columnName) {
+        return pagingFilter.sortDirection === data_1.SortingDirection.Descending ? "sort-indicator desc" : "sort-indicator asc";
     }
@@ -21,23 +34,23 @@ else {
     var _a, _b;
-    const Wrapper = (_a = props.wrapperType) !== null && _a !== void 0 ? _a : "tr";
-    const Item = (_b = props.itemCellType) !== null && _b !== void 0 ? _b : "th";
-    const { context } = props;
-    return (react_1.default.createElement(Wrapper, Object.assign({}, props.wrapperProps), props.columns.map((column, i) => {
+    var Wrapper = (_a = props.wrapperType) !== null && _a !== void 0 ? _a : "tr";
+    var Item = (_b = props.itemCellType) !== null && _b !== void 0 ? _b : "th";
+    var context = props.context;
+    return (React.createElement(Wrapper, __assign({}, props.wrapperProps), props.columns.map(function (column, i) {
         var _a;
-        const key = (_a = column.property) !== null && _a !== void 0 ? _a : i;
+        var key = (_a = column.property) !== null && _a !== void 0 ? _a : i;
         if (column.headerFormatter) {
-            return column.headerFormatter({ key, column, context });
+            return column.headerFormatter({ key: key, column: column, context: context });
         }
         else if (props.pagingFilter && column.sortable && column.property) {
-            return (react_1.default.createElement(Item, Object.assign({ key: key, className: column.headerClassName ? `sortable ${column.headerClassName}` : "sortable", onClick: () => { var _a; return void ((_a = props.onColumnSort) === null || _a === void 0 ? void 0 : _a.call(props, column)); } }, props.itemCellProps),
+            return (React.createElement(Item, __assign({ key: key, className: column.headerClassName ? "sortable " + column.headerClassName : "sortable", onClick: function () { var _a; return (_a = props.onColumnSort) === null || _a === void 0 ? void 0 : _a.call(props, column); } }, props.itemCellProps),
                 column.titleFactory ? column.titleFactory(context) : column.title,
-                react_1.default.createElement("span", { className: getSortIndicatorClass(props.pagingFilter, column.property) })));
+                React.createElement("span", { className: getSortIndicatorClass(props.pagingFilter, column.property) })));
         }
         else {
-            return (react_1.default.createElement(Item, Object.assign({ key: key, className: column.headerClassName }, props.itemCellProps), column.titleFactory ? column.titleFactory(context) : column.title));
+            return (React.createElement(Item, __assign({ key: key, className: column.headerClassName }, props.itemCellProps), column.titleFactory ? column.titleFactory(context) : column.title));
         }
     })));
 }
-const RepeaterHeader = (0, mobx_react_lite_1.observer)(repeaterHeader);
+var RepeaterHeader = mobx_react_lite_1.observer(repeaterHeader);
 exports.default = RepeaterHeader;
 //# sourceMappingURL=repeaterHeader.js.map

dist/dataRepeater/repeaterRow.d.ts

@@ -1,3 +0,3 @@
-import React from "react";
-import type { PropsWithColumns } from "../dataTypes";
+import * as React from "react";
+import { PropsWithColumns } from "../dataTypes";
 export interface DataRowProps<TItem, TContext, TWrapper extends React.ElementType, TItemCell extends React.ElementType> extends PropsWithColumns<TItem, TContext> {
@@ -4,0 +4,0 @@ item: TItem;

dist/dataRepeater/repeaterRow.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const mobx_react_lite_1 = require("mobx-react-lite");
-const react_1 = __importDefault(require("react"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var React = __importStar(require("react"));
 function repeaterRow(props) {
     var _a, _b;
-    const Wrapper = (_a = props.wrapperType) !== null && _a !== void 0 ? _a : "tr";
-    const Item = (_b = props.itemCellType) !== null && _b !== void 0 ? _b : "td";
-    const { context } = props;
-    const { columns, item, itemCellProps } = props;
-    return (react_1.default.createElement(Wrapper, Object.assign({}, props.wrapperProps), columns.map((column, i) => {
+    var Wrapper = (_a = props.wrapperType) !== null && _a !== void 0 ? _a : "tr";
+    var Item = (_b = props.itemCellType) !== null && _b !== void 0 ? _b : "td";
+    var context = props.context;
+    var columns = props.columns, item = props.item, itemCellProps = props.itemCellProps;
+    return (React.createElement(Wrapper, __assign({}, props.wrapperProps), columns.map(function (column, i) {
         var _a, _b;
-        const key = (_a = column.property) !== null && _a !== void 0 ? _a : i;
-        const value = column.property ? item[column.property] : undefined;
+        var key = (_a = column.property) !== null && _a !== void 0 ? _a : i;
+        var value = column.property ? item[column.property] : undefined;
         if (column.cellFormatter) {
-            return column.cellFormatter({ key, value, item, column, context });
+            return column.cellFormatter({ key: key, value: value, item: item, column: column, context: context });
         }
         else {
-            return (react_1.default.createElement(Item, Object.assign({ key: key, className: column.cellClassName }, itemCellProps, (_b = column.cellProps) === null || _b === void 0 ? void 0 : _b.call(column, { value, item, column, context })), column.valueFormatter ? column.valueFormatter({ value, item, column, context }) : value));
+            return (React.createElement(Item, __assign({ key: key, className: column.cellClassName }, itemCellProps, (_b = column.cellProps) === null || _b === void 0 ? void 0 : _b.call(column, { value: value, item: item, column: column, context: context })), column.valueFormatter ? column.valueFormatter({ value: value, item: item, column: column, context: context }) : value));
         }
     })));
 }
-const RepeaterRow = (0, mobx_react_lite_1.observer)(repeaterRow);
+var RepeaterRow = mobx_react_lite_1.observer(repeaterRow);
 exports.default = RepeaterRow;
 //# sourceMappingURL=repeaterRow.js.map

dist/dataTable/index.d.ts

 /// <reference types="react" />
-import type { DataTablePropsBase } from "../dataTypes";
-import type { TableRowProps } from "./tableRow";
+import { DataTablePropsBase } from "../dataTypes";
+import { TableRowProps } from "./tableRow";
 export interface DataTableProps<TItem, TContext> extends DataTablePropsBase<TItem, TContext>, Pick<TableRowProps<TItem, TContext>, "rowProps"> {
@@ -5,0 +5,0 @@ className?: string;

dist/dataTable/index.js

 "use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,18 +13,19 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-const mobx_react_lite_1 = require("mobx-react-lite");
-const react_1 = __importDefault(require("react"));
-const tableHeader_1 = __importDefault(require("./tableHeader"));
-const tableRow_1 = __importDefault(require("./tableRow"));
-const defaultProps = {
+var mobx_react_lite_1 = require("mobx-react-lite");
+var React = __importStar(require("react"));
+var tableHeader_1 = __importDefault(require("./tableHeader"));
+var tableRow_1 = __importDefault(require("./tableRow"));
+var defaultProps = {
     displayHeader: true,
 };
 function dataTable(props) {
-    return (react_1.default.createElement("table", { id: props.id, className: props.className },
-        props.displayHeader && (react_1.default.createElement("thead", null,
-            react_1.default.createElement(tableHeader_1.default, { columns: props.columns, context: props.context, pagingFilter: props.pagingFilter, onColumnSort: props.onColumnSort, className: props.headerRowClassName }))),
-        react_1.default.createElement("tbody", null, props.items.map(item => (react_1.default.createElement(tableRow_1.default, { key: String(item[props.itemKey]), item: item, columns: props.columns, context: props.context, rowProps: props.rowProps }))))));
+    var _a;
+    return (React.createElement("table", { id: props.id, className: props.className },
+        props.displayHeader && (React.createElement("thead", null,
+            React.createElement(tableHeader_1.default, { columns: props.columns, context: props.context, pagingFilter: props.pagingFilter, onColumnSort: props.onColumnSort, className: props.headerRowClassName }))),
+        React.createElement("tbody", null, (_a = props.items) === null || _a === void 0 ? void 0 : _a.map(function (item) { return (React.createElement(tableRow_1.default, { key: String(item[props.itemKey]), item: item, columns: props.columns, context: props.context, rowProps: props.rowProps })); }))));
 }
 dataTable.defaultProps = defaultProps;
-const DataTable = (0, mobx_react_lite_1.observer)(dataTable);
+var DataTable = mobx_react_lite_1.observer(dataTable);
 exports.default = DataTable;
 //# sourceMappingURL=index.js.map

dist/dataTable/tableHeader.d.ts

 /// <reference types="react" />
-import type { IPagingFilter } from "@frui.ts/data";
-import type { ColumnDefinition, PropsWithColumns } from "../dataTypes";
+import { IPagingFilter } from "@frui.ts/data";
+import { ColumnDefinition, PropsWithColumns } from "../dataTypes";
 export interface HeaderRowProps<TItem, TContext> extends PropsWithColumns<TItem, TContext> {
@@ -5,0 +5,0 @@ pagingFilter?: IPagingFilter;

dist/dataTable/tableHeader.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const data_1 = require("@frui.ts/data");
-const mobx_react_lite_1 = require("mobx-react-lite");
-const react_1 = __importDefault(require("react"));
+var data_1 = require("@frui.ts/data");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var React = __importStar(require("react"));
 function getSortIndicatorClass(pagingFilter, columnName) {
-    const currentDirection = (0, data_1.getSortingDirection)(pagingFilter, columnName);
-    if (currentDirection) {
-        return currentDirection === data_1.SortingDirection.Descending ? "sort-indicator desc" : "sort-indicator asc";
+    if (pagingFilter.sortColumn === columnName) {
+        return pagingFilter.sortDirection === data_1.SortingDirection.Descending ? "sort-indicator desc" : "sort-indicator asc";
     }
@@ -19,20 +22,20 @@ else {
 function tableHeader(props) {
-    return (react_1.default.createElement("tr", { className: props.className }, props.columns.map((column, i) => {
+    return (React.createElement("tr", { className: props.className }, props.columns.map(function (column, i) {
         var _a;
-        const key = (_a = column.property) !== null && _a !== void 0 ? _a : i;
+        var key = (_a = column.property) !== null && _a !== void 0 ? _a : i;
         if (column.headerFormatter) {
-            return column.headerFormatter({ key, column, context: props.context });
+            return column.headerFormatter({ key: key, column: column, context: props.context });
         }
         else if (props.pagingFilter && column.sortable && column.property) {
-            return (react_1.default.createElement("th", { key: key, className: column.headerClassName ? `sortable ${column.headerClassName}` : "sortable", onClick: () => { var _a; return void ((_a = props.onColumnSort) === null || _a === void 0 ? void 0 : _a.call(props, column)); } },
+            return (React.createElement("th", { key: key, className: column.headerClassName ? "sortable " + column.headerClassName : "sortable", onClick: function () { var _a; return (_a = props.onColumnSort) === null || _a === void 0 ? void 0 : _a.call(props, column); } },
                 column.titleFactory ? column.titleFactory(props.context) : column.title,
-                react_1.default.createElement("span", { className: getSortIndicatorClass(props.pagingFilter, column.property) })));
+                React.createElement("span", { className: getSortIndicatorClass(props.pagingFilter, column.property) })));
         }
         else {
-            return (react_1.default.createElement("th", { key: key, className: column.headerClassName }, column.titleFactory ? column.titleFactory(props.context) : column.title));
+            return (React.createElement("th", { key: key, className: column.headerClassName }, column.titleFactory ? column.titleFactory(props.context) : column.title));
         }
     })));
 }
-const TableHeader = (0, mobx_react_lite_1.observer)(tableHeader);
+var TableHeader = mobx_react_lite_1.observer(tableHeader);
 exports.default = TableHeader;
 //# sourceMappingURL=tableHeader.js.map

dist/dataTable/tableRow.d.ts

@@ -1,3 +0,3 @@
-import React from "react";
-import type { PropsWithColumns } from "../dataTypes";
+import * as React from "react";
+import { PropsWithColumns } from "../dataTypes";
 export interface TableRowProps<TItem, TContext> extends PropsWithColumns<TItem, TContext> {
@@ -4,0 +4,0 @@ item: TItem;

dist/dataTable/tableRow.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const mobx_react_lite_1 = require("mobx-react-lite");
-const react_1 = __importDefault(require("react"));
-function tableRow({ item, columns, context, rowProps }) {
-    return (react_1.default.createElement("tr", Object.assign({}, rowProps === null || rowProps === void 0 ? void 0 : rowProps(item, context)), columns.map((column, i) => {
+var mobx_react_lite_1 = require("mobx-react-lite");
+var React = __importStar(require("react"));
+function tableRow(_a) {
+    var item = _a.item, columns = _a.columns, context = _a.context, rowProps = _a.rowProps;
+    return (React.createElement("tr", __assign({}, rowProps === null || rowProps === void 0 ? void 0 : rowProps(item, context)), columns.map(function (column, i) {
         var _a, _b;
-        const key = (_a = column.property) !== null && _a !== void 0 ? _a : i;
-        const value = column.property ? item[column.property] : undefined;
+        var key = (_a = column.property) !== null && _a !== void 0 ? _a : i;
+        var value = column.property ? item[column.property] : undefined;
         if (column.cellFormatter) {
-            return column.cellFormatter({ key, value, item, column, context });
+            return column.cellFormatter({ key: key, value: value, item: item, column: column, context: context });
         }
         else {
-            return (react_1.default.createElement("td", Object.assign({ key: key, className: column.cellClassName }, (_b = column.cellProps) === null || _b === void 0 ? void 0 : _b.call(column, { value, item, column, context })), column.valueFormatter ? column.valueFormatter({ value, item, column, context }) : value));
+            return (React.createElement("td", __assign({ key: key, className: column.cellClassName }, (_b = column.cellProps) === null || _b === void 0 ? void 0 : _b.call(column, { value: value, item: item, column: column, context: context })), column.valueFormatter ? column.valueFormatter({ value: value, item: item, column: column, context: context }) : value));
         }
     })));
 }
-const TableRow = (0, mobx_react_lite_1.observer)(tableRow);
+var TableRow = mobx_react_lite_1.observer(tableRow);
 exports.default = TableRow;
 //# sourceMappingURL=tableRow.js.map

dist/dataTypes.d.ts

@@ -1,4 +0,3 @@
-import type { IPagingFilter } from "@frui.ts/data";
-import type { ReactNode } from "react";
-import type React from "react";
+import { IPagingFilter } from "@frui.ts/data";
+import { ReactNode } from "react";
 export declare type PropertyKey<TItem> = keyof TItem & (string | number);
@@ -5,0 +4,0 @@ export interface KeyRenderProps {

dist/index.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResponsiveTable = exports.DataTable = exports.DataRepeater = exports.DataList = void 0;
 var dataList_1 = require("./dataList");
-Object.defineProperty(exports, "DataList", { enumerable: true, get: function () { return __importDefault(dataList_1).default; } });
+exports.DataList = dataList_1.default;
 var dataRepeater_1 = require("./dataRepeater");
-Object.defineProperty(exports, "DataRepeater", { enumerable: true, get: function () { return __importDefault(dataRepeater_1).default; } });
+exports.DataRepeater = dataRepeater_1.default;
 var dataTable_1 = require("./dataTable");
-Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return __importDefault(dataTable_1).default; } });
-__exportStar(require("./dataTypes"), exports);
+exports.DataTable = dataTable_1.default;
 var responsiveTable_1 = require("./responsiveTable");
-Object.defineProperty(exports, "ResponsiveTable", { enumerable: true, get: function () { return __importDefault(responsiveTable_1).default; } });
+exports.ResponsiveTable = responsiveTable_1.default;
 //# sourceMappingURL=index.js.map

dist/responsiveTable.d.ts

 /// <reference types="react" />
-import type { DataTableProps } from "./dataTable";
-import type { ResponsiveColumnDefinition } from "./dataTypes";
+import { DataTableProps } from "./dataTable";
+import { ResponsiveColumnDefinition } from "./dataTypes";
 export declare type ViewMode = "table" | "list";
@@ -13,5 +13,5 @@ export interface ResponsiveTableProps<TItem, TContext> extends DataTableProps<TItem, TContext> {
 declare namespace ResponsiveTableImpl {
-    var defaultProps: Omit<Partial<ResponsiveTableProps<any, any>>, "id" | "columns" | "context">;
+    var defaultProps: Pick<Partial<ResponsiveTableProps<any, any>>, "className" | "rowProps" | "headerRowClassName" | "pagingFilter" | "onColumnSort" | "displayHeader" | "items" | "itemKey" | "widthBreakpoint" | "listModeClassName" | "onModeChanged">;
 }
 declare const ResponsiveTable: typeof ResponsiveTableImpl;
 export default ResponsiveTable;

dist/responsiveTable.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
@@ -32,2 +24,25 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -37,11 +52,11 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-const mobx_react_lite_1 = require("mobx-react-lite");
-const react_1 = __importStar(require("react"));
-const dataList_1 = __importDefault(require("./dataList"));
-const dataTable_1 = __importDefault(require("./dataTable"));
-const helpers_1 = require("@frui.ts/helpers");
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = __importStar(require("react"));
+var dataList_1 = __importDefault(require("./dataList"));
+var dataTable_1 = __importDefault(require("./dataTable"));
+var helpers_1 = require("@frui.ts/helpers");
 function getWidth() {
     return document.body.clientWidth || document.documentElement.clientWidth || window.innerWidth;
 }
-const defaultProps = {
+var defaultProps = {
     widthBreakpoint: 576,
@@ -51,7 +66,7 @@ listModeClassName: "table-list-view",
 function ResponsiveTableImpl(_a) {
-    var { widthBreakpoint, listModeClassName, onModeChanged } = _a, restProps = __rest(_a, ["widthBreakpoint", "listModeClassName", "onModeChanged"]);
-    const [mode, setMode] = (0, react_1.useState)("table");
-    (0, react_1.useEffect)(() => {
-        const resizeHandler = () => {
-            const newMode = getWidth() < widthBreakpoint ? "list" : "table";
+    var widthBreakpoint = _a.widthBreakpoint, listModeClassName = _a.listModeClassName, onModeChanged = _a.onModeChanged, restProps = __rest(_a, ["widthBreakpoint", "listModeClassName", "onModeChanged"]);
+    var _b = __read(react_1.useState("table"), 2), mode = _b[0], setMode = _b[1];
+    react_1.useEffect(function () {
+        var resizeHandler = function () {
+            var newMode = getWidth() < widthBreakpoint ? "list" : "table";
             if (newMode !== mode) {
@@ -64,3 +79,3 @@ onModeChanged === null || onModeChanged === void 0 ? void 0 : onModeChanged(newMode);
         window.addEventListener("resize", resizeHandler);
-        return () => {
+        return function () {
             window.removeEventListener("resize", resizeHandler);
@@ -70,11 +85,11 @@ };
     if (mode === "list") {
-        return react_1.default.createElement(dataList_1.default, Object.assign({}, restProps, { className: (0, helpers_1.combineClassNames)(restProps.className, listModeClassName) }));
+        return react_1.default.createElement(dataList_1.default, __assign({}, restProps, { className: helpers_1.combineClassNames(restProps.className, listModeClassName) }));
     }
     else {
-        return react_1.default.createElement(dataTable_1.default, Object.assign({}, restProps));
+        return react_1.default.createElement(dataTable_1.default, __assign({}, restProps));
     }
 }
 ResponsiveTableImpl.defaultProps = defaultProps;
-const ResponsiveTable = (0, mobx_react_lite_1.observer)(ResponsiveTableImpl);
+var ResponsiveTable = mobx_react_lite_1.observer(ResponsiveTableImpl);
 exports.default = ResponsiveTable;
 //# sourceMappingURL=responsiveTable.js.map

dist/responsiveTableHeaders.d.ts

 import React from "react";
-import type { ResponsiveColumnDefinition } from ".";
+import { ResponsiveColumnDefinition } from ".";
 import "./responsiveTableHeaders.scss";
@@ -13,5 +13,5 @@ export interface ResponsiveTableHeadersProps<TItem, TContext> {
 declare namespace responsiveTableHeaders {
-    var defaultProps: Omit<Partial<ResponsiveTableHeadersProps<any, any>>, "id" | "columns" | "context">;
+    var defaultProps: Pick<Partial<ResponsiveTableHeadersProps<any, any>>, "className" | "mediaQuery">;
 }
 declare const ResponsiveTableHeaders: typeof responsiveTableHeaders;
 export default ResponsiveTableHeaders;

dist/responsiveTableHeaders.js

@@ -6,16 +6,16 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const mobx_react_lite_1 = require("mobx-react-lite");
-const react_1 = __importDefault(require("react"));
+var mobx_react_lite_1 = require("mobx-react-lite");
+var react_1 = __importDefault(require("react"));
 require("./responsiveTableHeaders.scss");
-const defaultProps = {
+var defaultProps = {
     mediaQuery: "@media only screen and (max-width: 576px) ",
 };
 function getStyleWithHeaders(id, headers, mediaQuery) {
-    const headerStyles = headers
-        .map((label, index) => `#${id} td:nth-of-type(${index + 1})::before { content: "${headers[index]}"; }`)
+    var headerStyles = headers
+        .map(function (label, index) { return "#" + id + " td:nth-of-type(" + (index + 1) + ")::before { content: \"" + headers[index] + "\"; }"; })
         .join(" ");
-    return mediaQuery ? `${mediaQuery} { ${headerStyles} }` : headerStyles;
+    return mediaQuery ? mediaQuery + " { " + headerStyles + " }" : headerStyles;
 }
 function responsiveTableHeaders(props) {
-    const columnHeaders = props.columns.map(column => {
+    var columnHeaders = props.columns.map(function (column) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -33,4 +33,4 @@ return column.responsiveTitle === false
 responsiveTableHeaders.defaultProps = defaultProps;
-const ResponsiveTableHeaders = (0, mobx_react_lite_1.observer)(responsiveTableHeaders);
+var ResponsiveTableHeaders = mobx_react_lite_1.observer(responsiveTableHeaders);
 exports.default = ResponsiveTableHeaders;
 //# sourceMappingURL=responsiveTableHeaders.js.map

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "1.0.0-alpha.12",
+  "version": "1.0.0-alpha.13",
   "description": "View components for data display",
@@ -41,14 +41,14 @@ "keywords": [
   "dependencies": {
-    "@frui.ts/data": "^1.0.0-alpha.12",
-    "@frui.ts/helpers": "^1.0.0-alpha.12",
-    "mobx-react-lite": "^2.2.2"
+    "@frui.ts/data": "^1.0.0-alpha.13",
+    "@frui.ts/helpers": "^1.0.0-alpha.13",
+    "mobx-react-lite": "^2.0.6"
   },
   "devDependencies": {
-    "@types/react": "^17.0.33",
-    "copyfiles": "^2.4.1"
+    "@types/react": "^16.9.34",
+    "copyfiles": "^2.3.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2"
+    "react": "^16.13.0"
   },
-  "gitHead": "a2742c744911b8aff2a8cddb9fbad3b124ec065f"
+  "gitHead": "5454d007244bb9cdd28be5207a9f125f04a9ac43"
 }

No alert changes

Improved metrics

Total package byte prevSize

71729

increased by2.06%

Lines of code

624

increased by13.87%

Dependency changes

• - Removedreact@17.0.2(transitive)

• [e-mail]/data@^1.0.0-alpha.13

• [e-mail]/helpers@^1.0.0-alpha.13

• Updatedmobx-react-lite@^2.0.6