@frui.ts/dataviews - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

dist/fruits-dataviews.es.js

@@ -1,268 +0,218 @@
-import { observer } from "mobx-react-lite";
-import React, { useState, useEffect } from "react";
-import { getSortingDirection, SortingDirection } from "@frui.ts/data";
-import { combineClassNames } from "@frui.ts/helpers";
-function Header({ column, context }) {
-  var _a, _b, _c, _d, _e;
-  if (column.headerFormatter) {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, column.headerFormatter({ key: "list-header", column, context }));
-  } else {
-    return /* @__PURE__ */ React.createElement("th", {
-      scope: "row",
-      className: column.headerClassName
-    }, (_e = (_d = (_b = (_a = column.responsiveTitleFactory) == null ? void 0 : _a.call(column, context)) != null ? _b : column.responsiveTitle) != null ? _d : (_c = column.titleFactory) == null ? void 0 : _c.call(column, context)) != null ? _e : column.title);
-  }
+import { observer as y } from "mobx-react-lite";
+import l, { useState as T, useEffect as P } from "react";
+import { getSortingDirection as N, SortingDirection as b } from "@frui.ts/data";
+import { combineClassNames as p } from "@frui.ts/helpers";
+function S({ column: e, context: t }) {
+  var s, r, a, n, i;
+  return e.headerFormatter ? /* @__PURE__ */ l.createElement(l.Fragment, null, e.headerFormatter({ key: "list-header", column: e, context: t })) : /* @__PURE__ */ l.createElement("th", {
+    scope: "row",
+    className: e.headerClassName
+  }, (i = (n = (r = (s = e.responsiveTitleFactory) == null ? void 0 : s.call(e, t)) != null ? r : e.responsiveTitle) != null ? n : (a = e.titleFactory) == null ? void 0 : a.call(e, t)) != null ? i : e.title);
 }
-function DataListRowImpl({ item, columns, context }) {
-  return /* @__PURE__ */ React.createElement("tbody", null, columns.filter((x) => x.responsiveVisible !== false).map((column, i) => {
-    var _a;
-    const key = (_a = column.property) != null ? _a : i;
-    const value = column.property ? item[column.property] : void 0;
-    const hasHeader = column.responsiveTitle !== false;
-    return /* @__PURE__ */ React.createElement("tr", {
-      key
-    }, hasHeader && /* @__PURE__ */ React.createElement(Header, {
-      column,
-      context
-    }), /* @__PURE__ */ React.createElement("td", {
-      colSpan: hasHeader ? 1 : 2
-    }, column.cellFormatter ? column.cellFormatter({ key, value, item, column, context }) : column.valueFormatter ? column.valueFormatter({ value, item, column, context }) : value));
+function R({ item: e, columns: t, context: s }) {
+  return /* @__PURE__ */ l.createElement("tbody", null, t.filter((r) => r.responsiveVisible !== !1).map((r, a) => {
+    var o;
+    const n = (o = r.property) != null ? o : a, i = r.property ? e[r.property] : void 0, c = r.responsiveTitle !== !1;
+    return /* @__PURE__ */ l.createElement("tr", {
+      key: n
+    }, c && /* @__PURE__ */ l.createElement(S, {
+      column: r,
+      context: s
+    }), /* @__PURE__ */ l.createElement("td", {
+      colSpan: c ? 1 : 2
+    }, r.cellFormatter ? r.cellFormatter({ key: n, value: i, item: e, column: r, context: s }) : r.valueFormatter ? r.valueFormatter({ value: i, item: e, column: r, context: s }) : i));
   }));
 }
-const DataListRow = observer(DataListRowImpl);
-const defaultProps$3 = {};
-function DataListImpl(props) {
-  return /* @__PURE__ */ React.createElement("table", {
-    id: props.id,
-    className: props.className
-  }, props.items.map((item) => /* @__PURE__ */ React.createElement(DataListRow, {
-    key: String(item[props.itemKey]),
-    item,
-    columns: props.columns,
-    context: props.context
+const W = y(R), k = {};
+function h(e) {
+  return /* @__PURE__ */ l.createElement("table", {
+    id: e.id,
+    className: e.className
+  }, e.items.map((t) => /* @__PURE__ */ l.createElement(W, {
+    key: String(t[e.itemKey]),
+    item: t,
+    columns: e.columns,
+    context: e.context
   })));
 }
-DataListImpl.defaultProps = defaultProps$3;
-const DataList = observer(DataListImpl);
-function getSortIndicatorClass$1(pagingFilter, columnName) {
-  const currentDirection = getSortingDirection(pagingFilter, columnName);
-  if (currentDirection) {
-    return currentDirection === SortingDirection.Descending ? "sort-indicator desc" : "sort-indicator asc";
-  } else {
-    return "sort-indicator";
-  }
+h.defaultProps = k;
+const D = y(h);
+function H(e, t) {
+  const s = N(e, t);
+  return s ? s === b.Descending ? "sort-indicator desc" : "sort-indicator asc" : "sort-indicator";
 }
-function repeaterHeader(props) {
-  var _a, _b;
-  const Wrapper = (_a = props.wrapperType) != null ? _a : "tr";
-  const Item = (_b = props.itemCellType) != null ? _b : "th";
-  const { context } = props;
-  return /* @__PURE__ */ React.createElement(Wrapper, {
-    ...props.wrapperProps
-  }, props.columns.map((column, i) => {
-    var _a2;
-    const key = (_a2 = column.property) != null ? _a2 : i;
-    if (column.headerFormatter) {
-      return column.headerFormatter({ key, column, context });
-    } else if (props.pagingFilter && column.sortable && column.property) {
-      return /* @__PURE__ */ React.createElement(Item, {
-        key,
-        className: column.headerClassName ? `sortable ${column.headerClassName}` : "sortable",
-        onClick: () => {
-          var _a3;
-          return void ((_a3 = props.onColumnSort) == null ? void 0 : _a3.call(props, column));
-        },
-        ...props.itemCellProps
-      }, column.titleFactory ? column.titleFactory(context) : column.title, /* @__PURE__ */ React.createElement("span", {
-        className: getSortIndicatorClass$1(props.pagingFilter, column.property)
-      }));
-    } else {
-      return /* @__PURE__ */ React.createElement(Item, {
-        key,
-        className: column.headerClassName,
-        ...props.itemCellProps
-      }, column.titleFactory ? column.titleFactory(context) : column.title);
-    }
+function x(e) {
+  var a, n;
+  const t = (a = e.wrapperType) != null ? a : "tr", s = (n = e.itemCellType) != null ? n : "th", { context: r } = e;
+  return /* @__PURE__ */ l.createElement(t, {
+    ...e.wrapperProps
+  }, e.columns.map((i, c) => {
+    var d;
+    const o = (d = i.property) != null ? d : c;
+    return i.headerFormatter ? i.headerFormatter({ key: o, column: i, context: r }) : e.pagingFilter && i.sortable && i.property ? /* @__PURE__ */ l.createElement(s, {
+      key: o,
+      className: i.headerClassName ? `sortable ${i.headerClassName}` : "sortable",
+      onClick: () => {
+        var m;
+        return void ((m = e.onColumnSort) == null ? void 0 : m.call(e, i));
+      },
+      ...e.itemCellProps
+    }, i.titleFactory ? i.titleFactory(r) : i.title, /* @__PURE__ */ l.createElement("span", {
+      className: H(e.pagingFilter, i.property)
+    })) : /* @__PURE__ */ l.createElement(s, {
+      key: o,
+      className: i.headerClassName,
+      ...e.itemCellProps
+    }, i.titleFactory ? i.titleFactory(r) : i.title);
   }));
 }
-const RepeaterHeader = observer(repeaterHeader);
-function repeaterRow(props) {
-  var _a, _b;
-  const Wrapper = (_a = props.wrapperType) != null ? _a : "tr";
-  const Item = (_b = props.itemCellType) != null ? _b : "td";
-  const { context } = props;
-  const { columns, item, itemCellProps } = props;
-  return /* @__PURE__ */ React.createElement(Wrapper, {
-    ...props.wrapperProps
-  }, columns.map((column, i) => {
-    var _a2, _b2;
-    const key = (_a2 = column.property) != null ? _a2 : i;
-    const value = column.property ? item[column.property] : void 0;
-    if (column.cellFormatter) {
-      return column.cellFormatter({ key, value, item, column, context });
-    } else {
-      return /* @__PURE__ */ React.createElement(Item, {
-        key,
-        className: column.cellClassName,
-        ...itemCellProps,
-        ...(_b2 = column.cellProps) == null ? void 0 : _b2.call(column, { value, item, column, context })
-      }, column.valueFormatter ? column.valueFormatter({ value, item, column, context }) : value);
-    }
+const I = y(x);
+function L(e) {
+  var c, o;
+  const t = (c = e.wrapperType) != null ? c : "tr", s = (o = e.itemCellType) != null ? o : "td", { context: r } = e, { columns: a, item: n, itemCellProps: i } = e;
+  return /* @__PURE__ */ l.createElement(t, {
+    ...e.wrapperProps
+  }, a.map((d, m) => {
+    var E, C;
+    const F = (E = d.property) != null ? E : m, f = d.property ? n[d.property] : void 0;
+    return d.cellFormatter ? d.cellFormatter({ key: F, value: f, item: n, column: d, context: r }) : /* @__PURE__ */ l.createElement(s, {
+      key: F,
+      className: d.cellClassName,
+      ...i,
+      ...(C = d.cellProps) == null ? void 0 : C.call(d, { value: f, item: n, column: d, context: r })
+    }, d.valueFormatter ? d.valueFormatter({ value: f, item: n, column: d, context: r }) : f);
   }));
 }
-const RepeaterRow = observer(repeaterRow);
-const defaultProps$2 = {
-  displayHeader: true
+const $ = y(L), u = {
+  displayHeader: !0
 };
-function dataRepeater(props) {
-  var _a, _b;
-  const Wrapper = (_a = props.wrapperType) != null ? _a : "table";
-  const ItemWrapper = (_b = props.bodyWrapperType) != null ? _b : "tbody";
-  return /* @__PURE__ */ React.createElement(Wrapper, {
-    id: props.id,
-    ...props.wrapperProps
-  }, props.displayHeader && /* @__PURE__ */ React.createElement(RepeaterHeader, {
-    columns: props.columns,
-    context: props.context,
-    pagingFilter: props.pagingFilter,
-    onColumnSort: props.onColumnSort,
-    wrapperType: props.headWrapperType,
-    wrapperProps: props.headWrapperProps,
-    itemCellType: props.headCellType,
-    itemCellProps: props.headCellProps
-  }), /* @__PURE__ */ React.createElement(ItemWrapper, {
-    ...props.bodyWrapperProps
-  }, props.items.map((item) => /* @__PURE__ */ React.createElement(RepeaterRow, {
-    key: String(item[props.itemKey]),
-    item,
-    columns: props.columns,
-    context: props.context,
-    wrapperType: props.itemWrapperType,
-    wrapperProps: props.itemWrapperProps,
-    itemCellType: props.itemCellType,
-    itemCellProps: props.itemCellProps
+function v(e) {
+  var r, a;
+  const t = (r = e.wrapperType) != null ? r : "table", s = (a = e.bodyWrapperType) != null ? a : "tbody";
+  return /* @__PURE__ */ l.createElement(t, {
+    id: e.id,
+    ...e.wrapperProps
+  }, e.displayHeader && /* @__PURE__ */ l.createElement(I, {
+    columns: e.columns,
+    context: e.context,
+    pagingFilter: e.pagingFilter,
+    onColumnSort: e.onColumnSort,
+    wrapperType: e.headWrapperType,
+    wrapperProps: e.headWrapperProps,
+    itemCellType: e.headCellType,
+    itemCellProps: e.headCellProps
+  }), /* @__PURE__ */ l.createElement(s, {
+    ...e.bodyWrapperProps
+  }, e.items.map((n) => /* @__PURE__ */ l.createElement($, {
+    key: String(n[e.itemKey]),
+    item: n,
+    columns: e.columns,
+    context: e.context,
+    wrapperType: e.itemWrapperType,
+    wrapperProps: e.itemWrapperProps,
+    itemCellType: e.itemCellType,
+    itemCellProps: e.itemCellProps
   }))));
 }
-dataRepeater.defaultProps = defaultProps$2;
-const DataRepeater = observer(dataRepeater);
-function getSortIndicatorClass(pagingFilter, columnName) {
-  const currentDirection = getSortingDirection(pagingFilter, columnName);
-  if (currentDirection) {
-    return currentDirection === SortingDirection.Descending ? "sort-indicator desc" : "sort-indicator asc";
-  } else {
-    return "sort-indicator";
-  }
+v.defaultProps = u;
+const Y = y(v);
+function z(e, t) {
+  const s = N(e, t);
+  return s ? s === b.Descending ? "sort-indicator desc" : "sort-indicator asc" : "sort-indicator";
 }
-function tableHeader(props) {
-  return /* @__PURE__ */ React.createElement("tr", {
-    className: props.className
-  }, props.columns.map((column, i) => {
-    var _a;
-    const key = (_a = column.property) != null ? _a : i;
-    if (column.headerFormatter) {
-      return column.headerFormatter({ key, column, context: props.context });
-    } else if (props.pagingFilter && column.sortable && column.property) {
-      return /* @__PURE__ */ React.createElement("th", {
-        key,
-        className: column.headerClassName ? `sortable ${column.headerClassName}` : "sortable",
-        onClick: () => {
-          var _a2;
-          return void ((_a2 = props.onColumnSort) == null ? void 0 : _a2.call(props, column));
-        }
-      }, column.titleFactory ? column.titleFactory(props.context) : column.title, /* @__PURE__ */ React.createElement("span", {
-        className: getSortIndicatorClass(props.pagingFilter, column.property)
-      }));
-    } else {
-      return /* @__PURE__ */ React.createElement("th", {
-        key,
-        className: column.headerClassName
-      }, column.titleFactory ? column.titleFactory(props.context) : column.title);
-    }
+function K(e) {
+  return /* @__PURE__ */ l.createElement("tr", {
+    className: e.className
+  }, e.columns.map((t, s) => {
+    var a;
+    const r = (a = t.property) != null ? a : s;
+    return t.headerFormatter ? t.headerFormatter({ key: r, column: t, context: e.context }) : e.pagingFilter && t.sortable && t.property ? /* @__PURE__ */ l.createElement("th", {
+      key: r,
+      className: t.headerClassName ? `sortable ${t.headerClassName}` : "sortable",
+      onClick: () => {
+        var n;
+        return void ((n = e.onColumnSort) == null ? void 0 : n.call(e, t));
+      }
+    }, t.titleFactory ? t.titleFactory(e.context) : t.title, /* @__PURE__ */ l.createElement("span", {
+      className: z(e.pagingFilter, t.property)
+    })) : /* @__PURE__ */ l.createElement("th", {
+      key: r,
+      className: t.headerClassName
+    }, t.titleFactory ? t.titleFactory(e.context) : t.title);
   }));
 }
-const TableHeader = observer(tableHeader);
-function tableRow({ item, columns, context, rowProps }) {
-  return /* @__PURE__ */ React.createElement("tr", {
-    ...rowProps == null ? void 0 : rowProps(item, context)
-  }, columns.map((column, i) => {
-    var _a, _b;
-    const key = (_a = column.property) != null ? _a : i;
-    const value = column.property ? item[column.property] : void 0;
-    if (column.cellFormatter) {
-      return column.cellFormatter({ key, value, item, column, context });
-    } else {
-      return /* @__PURE__ */ React.createElement("td", {
-        key,
-        className: column.cellClassName,
-        ...(_b = column.cellProps) == null ? void 0 : _b.call(column, { value, item, column, context })
-      }, column.valueFormatter ? column.valueFormatter({ value, item, column, context }) : value);
-    }
+const B = y(K);
+function V({ item: e, columns: t, context: s, rowProps: r }) {
+  return /* @__PURE__ */ l.createElement("tr", {
+    ...r == null ? void 0 : r(e, s)
+  }, t.map((a, n) => {
+    var o, d;
+    const i = (o = a.property) != null ? o : n, c = a.property ? e[a.property] : void 0;
+    return a.cellFormatter ? a.cellFormatter({ key: i, value: c, item: e, column: a, context: s }) : /* @__PURE__ */ l.createElement("td", {
+      key: i,
+      className: a.cellClassName,
+      ...(d = a.cellProps) == null ? void 0 : d.call(a, { value: c, item: e, column: a, context: s })
+    }, a.valueFormatter ? a.valueFormatter({ value: c, item: e, column: a, context: s }) : c);
   }));
 }
-const TableRow = observer(tableRow);
-const defaultProps$1 = {
-  displayHeader: true
+const j = y(V), q = {
+  displayHeader: !0
 };
-function dataTable(props) {
-  return /* @__PURE__ */ React.createElement("table", {
-    id: props.id,
-    className: props.className
-  }, props.displayHeader && /* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement(TableHeader, {
-    columns: props.columns,
-    context: props.context,
-    pagingFilter: props.pagingFilter,
-    onColumnSort: props.onColumnSort,
-    className: props.headerRowClassName
-  })), /* @__PURE__ */ React.createElement("tbody", null, props.items.map((item) => /* @__PURE__ */ React.createElement(TableRow, {
-    key: String(item[props.itemKey]),
-    item,
-    columns: props.columns,
-    context: props.context,
-    rowProps: props.rowProps
+function w(e) {
+  return /* @__PURE__ */ l.createElement("table", {
+    id: e.id,
+    className: e.className
+  }, e.displayHeader && /* @__PURE__ */ l.createElement("thead", null, /* @__PURE__ */ l.createElement(B, {
+    columns: e.columns,
+    context: e.context,
+    pagingFilter: e.pagingFilter,
+    onColumnSort: e.onColumnSort,
+    className: e.headerRowClassName
+  })), /* @__PURE__ */ l.createElement("tbody", null, e.items.map((t) => /* @__PURE__ */ l.createElement(j, {
+    key: String(t[e.itemKey]),
+    item: t,
+    columns: e.columns,
+    context: e.context,
+    rowProps: e.rowProps
   }))));
 }
-dataTable.defaultProps = defaultProps$1;
-const DataTable = observer(dataTable);
-function getWidth() {
+w.defaultProps = q;
+const A = y(w);
+function G() {
   return document.body.clientWidth || document.documentElement.clientWidth || window.innerWidth;
 }
-const defaultProps = {
+const J = {
   widthBreakpoint: 576,
   listModeClassName: "table-list-view"
 };
-function ResponsiveTableImpl({
-  widthBreakpoint,
-  listModeClassName,
-  onModeChanged,
-  ...restProps
+function g({
+  widthBreakpoint: e,
+  listModeClassName: t,
+  onModeChanged: s,
+  ...r
 }) {
-  const [mode, setMode] = useState("table");
-  useEffect(() => {
-    const resizeHandler = () => {
-      const newMode = getWidth() < widthBreakpoint ? "list" : "table";
-      if (newMode !== mode) {
-        onModeChanged == null ? void 0 : onModeChanged(newMode);
-        setMode(newMode);
-      }
+  const [a, n] = T("table");
+  return P(() => {
+    const i = () => {
+      const c = G() < e ? "list" : "table";
+      c !== a && (s == null || s(c), n(c));
     };
-    resizeHandler();
-    window.addEventListener("resize", resizeHandler);
-    return () => {
-      window.removeEventListener("resize", resizeHandler);
+    return i(), window.addEventListener("resize", i), () => {
+      window.removeEventListener("resize", i);
     };
+  }), a === "list" ? /* @__PURE__ */ l.createElement(D, {
+    ...r,
+    className: p(r.className, t)
+  }) : /* @__PURE__ */ l.createElement(A, {
+    ...r
   });
-  if (mode === "list") {
-    return /* @__PURE__ */ React.createElement(DataList, {
-      ...restProps,
-      className: combineClassNames(restProps.className, listModeClassName)
-    });
-  } else {
-    return /* @__PURE__ */ React.createElement(DataTable, {
-      ...restProps
-    });
-  }
 }
-ResponsiveTableImpl.defaultProps = defaultProps;
-const ResponsiveTable = observer(ResponsiveTableImpl);
-export { DataList, DataRepeater, DataTable, ResponsiveTable };
+g.defaultProps = J;
+const Z = y(g);
+export {
+  D as DataList,
+  Y as DataRepeater,
+  A as DataTable,
+  Z as ResponsiveTable
+};
 //# sourceMappingURL=fruits-dataviews.es.js.map

dist/fruits-dataviews.umd.js

@@ -1,2 +0,2 @@
-(function(c,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("mobx-react-lite"),require("react"),require("@frui.ts/data"),require("@frui.ts/helpers")):typeof define=="function"&&define.amd?define(["exports","mobx-react-lite","react","@frui.ts/data","@frui.ts/helpers"],o):(c=typeof globalThis!="undefined"?globalThis:c||self,o(c["fruits-dataviews"]={},c.mobxReactLite,c.React,c.data,c.helpers))})(this,function(c,o,F,u,P){"use strict";function S(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var i=S(F);function D({column:e,context:t}){var s,a,r,n,l;return e.headerFormatter?i.default.createElement(i.default.Fragment,null,e.headerFormatter({key:"list-header",column:e,context:t})):i.default.createElement("th",{scope:"row",className:e.headerClassName},(l=(n=(a=(s=e.responsiveTitleFactory)==null?void 0:s.call(e,t))!=null?a:e.responsiveTitle)!=null?n:(r=e.titleFactory)==null?void 0:r.call(e,t))!=null?l:e.title)}function W({item:e,columns:t,context:s}){return i.default.createElement("tbody",null,t.filter(a=>a.responsiveVisible!==!1).map((a,r)=>{var y;const n=(y=a.property)!=null?y:r,l=a.property?e[a.property]:void 0,f=a.responsiveTitle!==!1;return i.default.createElement("tr",{key:n},f&&i.default.createElement(D,{column:a,context:s}),i.default.createElement("td",{colSpan:f?1:2},a.cellFormatter?a.cellFormatter({key:n,value:l,item:e,column:a,context:s}):a.valueFormatter?a.valueFormatter({value:l,item:e,column:a,context:s}):l))}))}const k=o.observer(W),H={};function E(e){return i.default.createElement("table",{id:e.id,className:e.className},e.items.map(t=>i.default.createElement(k,{key:String(t[e.itemKey]),item:t,columns:e.columns,context:e.context})))}E.defaultProps=H;const b=o.observer(E);function I(e,t){const s=u.getSortingDirection(e,t);return s?s===u.SortingDirection.Descending?"sort-indicator desc":"sort-indicator asc":"sort-indicator"}function R(e){var r,n;const t=(r=e.wrapperType)!=null?r:"tr",s=(n=e.itemCellType)!=null?n:"th",{context:a}=e;return i.default.createElement(t,{...e.wrapperProps},e.columns.map((l,f)=>{var d;const y=(d=l.property)!=null?d:f;return l.headerFormatter?l.headerFormatter({key:y,column:l,context:a}):e.pagingFilter&&l.sortable&&l.property?i.default.createElement(s,{key:y,className:l.headerClassName?`sortable ${l.headerClassName}`:"sortable",onClick:()=>{var m;return void((m=e.onColumnSort)==null?void 0:m.call(e,l))},...e.itemCellProps},l.titleFactory?l.titleFactory(a):l.title,i.default.createElement("span",{className:I(e.pagingFilter,l.property)})):i.default.createElement(s,{key:y,className:l.headerClassName,...e.itemCellProps},l.titleFactory?l.titleFactory(a):l.title)}))}const $=o.observer(R);function _(e){var f,y;const t=(f=e.wrapperType)!=null?f:"tr",s=(y=e.itemCellType)!=null?y:"td",{context:a}=e,{columns:r,item:n,itemCellProps:l}=e;return i.default.createElement(t,{...e.wrapperProps},r.map((d,m)=>{var w,p;const g=(w=d.property)!=null?w:m,v=d.property?n[d.property]:void 0;return d.cellFormatter?d.cellFormatter({key:g,value:v,item:n,column:d,context:a}):i.default.createElement(s,{key:g,className:d.cellClassName,...l,...(p=d.cellProps)==null?void 0:p.call(d,{value:v,item:n,column:d,context:a})},d.valueFormatter?d.valueFormatter({value:v,item:n,column:d,context:a}):v)}))}const q=o.observer(_),j={displayHeader:!0};function h(e){var a,r;const t=(a=e.wrapperType)!=null?a:"table",s=(r=e.bodyWrapperType)!=null?r:"tbody";return i.default.createElement(t,{id:e.id,...e.wrapperProps},e.displayHeader&&i.default.createElement($,{columns:e.columns,context:e.context,pagingFilter:e.pagingFilter,onColumnSort:e.onColumnSort,wrapperType:e.headWrapperType,wrapperProps:e.headWrapperProps,itemCellType:e.headCellType,itemCellProps:e.headCellProps}),i.default.createElement(s,{...e.bodyWrapperProps},e.items.map(n=>i.default.createElement(q,{key:String(n[e.itemKey]),item:n,columns:e.columns,context:e.context,wrapperType:e.itemWrapperType,wrapperProps:e.itemWrapperProps,itemCellType:e.itemCellType,itemCellProps:e.itemCellProps}))))}h.defaultProps=j;const x=o.observer(h);function z(e,t){const s=u.getSortingDirection(e,t);return s?s===u.SortingDirection.Descending?"sort-indicator desc":"sort-indicator asc":"sort-indicator"}function K(e){return i.default.createElement("tr",{className:e.className},e.columns.map((t,s)=>{var r;const a=(r=t.property)!=null?r:s;return t.headerFormatter?t.headerFormatter({key:a,column:t,context:e.context}):e.pagingFilter&&t.sortable&&t.property?i.default.createElement("th",{key:a,className:t.headerClassName?`sortable ${t.headerClassName}`:"sortable",onClick:()=>{var n;return void((n=e.onColumnSort)==null?void 0:n.call(e,t))}},t.titleFactory?t.titleFactory(e.context):t.title,i.default.createElement("span",{className:z(e.pagingFilter,t.property)})):i.default.createElement("th",{key:a,className:t.headerClassName},t.titleFactory?t.titleFactory(e.context):t.title)}))}const B=o.observer(K);function L({item:e,columns:t,context:s,rowProps:a}){return i.default.createElement("tr",{...a==null?void 0:a(e,s)},t.map((r,n)=>{var y,d;const l=(y=r.property)!=null?y:n,f=r.property?e[r.property]:void 0;return r.cellFormatter?r.cellFormatter({key:l,value:f,item:e,column:r,context:s}):i.default.createElement("td",{key:l,className:r.cellClassName,...(d=r.cellProps)==null?void 0:d.call(r,{value:f,item:e,column:r,context:s})},r.valueFormatter?r.valueFormatter({value:f,item:e,column:r,context:s}):f)}))}const M=o.observer(L),O={displayHeader:!0};function C(e){return i.default.createElement("table",{id:e.id,className:e.className},e.displayHeader&&i.default.createElement("thead",null,i.default.createElement(B,{columns:e.columns,context:e.context,pagingFilter:e.pagingFilter,onColumnSort:e.onColumnSort,className:e.headerRowClassName})),i.default.createElement("tbody",null,e.items.map(t=>i.default.createElement(M,{key:String(t[e.itemKey]),item:t,columns:e.columns,context:e.context,rowProps:e.rowProps}))))}C.defaultProps=O;const N=o.observer(C);function V(){return document.body.clientWidth||document.documentElement.clientWidth||window.innerWidth}const A={widthBreakpoint:576,listModeClassName:"table-list-view"};function T({widthBreakpoint:e,listModeClassName:t,onModeChanged:s,...a}){const[r,n]=F.useState("table");return F.useEffect(()=>{const l=()=>{const f=V()<e?"list":"table";f!==r&&(s==null||s(f),n(f))};return l(),window.addEventListener("resize",l),()=>{window.removeEventListener("resize",l)}}),r==="list"?i.default.createElement(b,{...a,className:P.combineClassNames(a.className,t)}):i.default.createElement(N,{...a})}T.defaultProps=A;const G=o.observer(T);c.DataList=b,c.DataRepeater=x,c.DataTable=N,c.ResponsiveTable=G,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(f,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("mobx-react-lite"),require("react"),require("@frui.ts/data"),require("@frui.ts/helpers")):typeof define=="function"&&define.amd?define(["exports","mobx-react-lite","react","@frui.ts/data","@frui.ts/helpers"],o):(f=typeof globalThis<"u"?globalThis:f||self,o(f["fruits-dataviews"]={},f.mobxReactLite,f.React,f.data,f.helpers))})(this,function(f,o,F,u,P){"use strict";const i=(e=>e&&typeof e=="object"&&"default"in e?e:{default:e})(F);function D({column:e,context:t}){var s,a,r,n,l;return e.headerFormatter?i.default.createElement(i.default.Fragment,null,e.headerFormatter({key:"list-header",column:e,context:t})):i.default.createElement("th",{scope:"row",className:e.headerClassName},(l=(n=(a=(s=e.responsiveTitleFactory)==null?void 0:s.call(e,t))!=null?a:e.responsiveTitle)!=null?n:(r=e.titleFactory)==null?void 0:r.call(e,t))!=null?l:e.title)}function S({item:e,columns:t,context:s}){return i.default.createElement("tbody",null,t.filter(a=>a.responsiveVisible!==!1).map((a,r)=>{var y;const n=(y=a.property)!=null?y:r,l=a.property?e[a.property]:void 0,c=a.responsiveTitle!==!1;return i.default.createElement("tr",{key:n},c&&i.default.createElement(D,{column:a,context:s}),i.default.createElement("td",{colSpan:c?1:2},a.cellFormatter?a.cellFormatter({key:n,value:l,item:e,column:a,context:s}):a.valueFormatter?a.valueFormatter({value:l,item:e,column:a,context:s}):l))}))}const W=o.observer(S),k={};function E(e){return i.default.createElement("table",{id:e.id,className:e.className},e.items.map(t=>i.default.createElement(W,{key:String(t[e.itemKey]),item:t,columns:e.columns,context:e.context})))}E.defaultProps=k;const b=o.observer(E);function H(e,t){const s=u.getSortingDirection(e,t);return s?s===u.SortingDirection.Descending?"sort-indicator desc":"sort-indicator asc":"sort-indicator"}function I(e){var r,n;const t=(r=e.wrapperType)!=null?r:"tr",s=(n=e.itemCellType)!=null?n:"th",{context:a}=e;return i.default.createElement(t,{...e.wrapperProps},e.columns.map((l,c)=>{var d;const y=(d=l.property)!=null?d:c;return l.headerFormatter?l.headerFormatter({key:y,column:l,context:a}):e.pagingFilter&&l.sortable&&l.property?i.default.createElement(s,{key:y,className:l.headerClassName?`sortable ${l.headerClassName}`:"sortable",onClick:()=>{var m;return void((m=e.onColumnSort)==null?void 0:m.call(e,l))},...e.itemCellProps},l.titleFactory?l.titleFactory(a):l.title,i.default.createElement("span",{className:H(e.pagingFilter,l.property)})):i.default.createElement(s,{key:y,className:l.headerClassName,...e.itemCellProps},l.titleFactory?l.titleFactory(a):l.title)}))}const R=o.observer(I);function _(e){var c,y;const t=(c=e.wrapperType)!=null?c:"tr",s=(y=e.itemCellType)!=null?y:"td",{context:a}=e,{columns:r,item:n,itemCellProps:l}=e;return i.default.createElement(t,{...e.wrapperProps},r.map((d,m)=>{var w,p;const g=(w=d.property)!=null?w:m,v=d.property?n[d.property]:void 0;return d.cellFormatter?d.cellFormatter({key:g,value:v,item:n,column:d,context:a}):i.default.createElement(s,{key:g,className:d.cellClassName,...l,...(p=d.cellProps)==null?void 0:p.call(d,{value:v,item:n,column:d,context:a})},d.valueFormatter?d.valueFormatter({value:v,item:n,column:d,context:a}):v)}))}const $=o.observer(_),q={displayHeader:!0};function h(e){var a,r;const t=(a=e.wrapperType)!=null?a:"table",s=(r=e.bodyWrapperType)!=null?r:"tbody";return i.default.createElement(t,{id:e.id,...e.wrapperProps},e.displayHeader&&i.default.createElement(R,{columns:e.columns,context:e.context,pagingFilter:e.pagingFilter,onColumnSort:e.onColumnSort,wrapperType:e.headWrapperType,wrapperProps:e.headWrapperProps,itemCellType:e.headCellType,itemCellProps:e.headCellProps}),i.default.createElement(s,{...e.bodyWrapperProps},e.items.map(n=>i.default.createElement($,{key:String(n[e.itemKey]),item:n,columns:e.columns,context:e.context,wrapperType:e.itemWrapperType,wrapperProps:e.itemWrapperProps,itemCellType:e.itemCellType,itemCellProps:e.itemCellProps}))))}h.defaultProps=q;const j=o.observer(h);function x(e,t){const s=u.getSortingDirection(e,t);return s?s===u.SortingDirection.Descending?"sort-indicator desc":"sort-indicator asc":"sort-indicator"}function z(e){return i.default.createElement("tr",{className:e.className},e.columns.map((t,s)=>{var r;const a=(r=t.property)!=null?r:s;return t.headerFormatter?t.headerFormatter({key:a,column:t,context:e.context}):e.pagingFilter&&t.sortable&&t.property?i.default.createElement("th",{key:a,className:t.headerClassName?`sortable ${t.headerClassName}`:"sortable",onClick:()=>{var n;return void((n=e.onColumnSort)==null?void 0:n.call(e,t))}},t.titleFactory?t.titleFactory(e.context):t.title,i.default.createElement("span",{className:x(e.pagingFilter,t.property)})):i.default.createElement("th",{key:a,className:t.headerClassName},t.titleFactory?t.titleFactory(e.context):t.title)}))}const K=o.observer(z);function L({item:e,columns:t,context:s,rowProps:a}){return i.default.createElement("tr",{...a==null?void 0:a(e,s)},t.map((r,n)=>{var y,d;const l=(y=r.property)!=null?y:n,c=r.property?e[r.property]:void 0;return r.cellFormatter?r.cellFormatter({key:l,value:c,item:e,column:r,context:s}):i.default.createElement("td",{key:l,className:r.cellClassName,...(d=r.cellProps)==null?void 0:d.call(r,{value:c,item:e,column:r,context:s})},r.valueFormatter?r.valueFormatter({value:c,item:e,column:r,context:s}):c)}))}const B=o.observer(L),M={displayHeader:!0};function C(e){return i.default.createElement("table",{id:e.id,className:e.className},e.displayHeader&&i.default.createElement("thead",null,i.default.createElement(K,{columns:e.columns,context:e.context,pagingFilter:e.pagingFilter,onColumnSort:e.onColumnSort,className:e.headerRowClassName})),i.default.createElement("tbody",null,e.items.map(t=>i.default.createElement(B,{key:String(t[e.itemKey]),item:t,columns:e.columns,context:e.context,rowProps:e.rowProps}))))}C.defaultProps=M;const N=o.observer(C);function O(){return document.body.clientWidth||document.documentElement.clientWidth||window.innerWidth}const V={widthBreakpoint:576,listModeClassName:"table-list-view"};function T({widthBreakpoint:e,listModeClassName:t,onModeChanged:s,...a}){const[r,n]=F.useState("table");return F.useEffect(()=>{const l=()=>{const c=O()<e?"list":"table";c!==r&&(s==null||s(c),n(c))};return l(),window.addEventListener("resize",l),()=>{window.removeEventListener("resize",l)}}),r==="list"?i.default.createElement(b,{...a,className:P.combineClassNames(a.className,t)}):i.default.createElement(N,{...a})}T.defaultProps=V;const A=o.observer(T);f.DataList=b,f.DataRepeater=j,f.DataTable=N,f.ResponsiveTable=A,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
 //# sourceMappingURL=fruits-dataviews.umd.js.map

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "View components for data display",
@@ -43,8 +43,8 @@ "keywords": [
   "dependencies": {
-    "@frui.ts/data": "^1.0.0-beta.1",
-    "@frui.ts/helpers": "^1.0.0-beta.1",
-    "mobx-react-lite": "^2.2.2"
+    "@frui.ts/data": "^1.0.0-beta.2",
+    "@frui.ts/helpers": "^1.0.0-beta.2",
+    "mobx-react-lite": "3"
   },
   "devDependencies": {
-    "@types/react": "^17.0.33",
+    "@types/react": "^18.0.21",
     "copyfiles": "^2.4.1"
@@ -55,3 +55,3 @@ },
   },
-  "gitHead": "1a7897ad15a6a5be5adc7e67725f174a1dbc6394"
+  "gitHead": "5d7b8915490794c56dcad28698a47e6e2a904e4e"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

79052

increased by1.14%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Lines of code

436

decreased by-10.47%

Dependency changes

• + Addedmobx-react-lite@3.4.3(transitive)

• - Removedmobx@5.15.7(transitive)

• - Removedmobx-react-lite@2.2.2(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• [e-mail]/data@^1.0.0-beta.2

• [e-mail]/helpers@^1.0.0-beta.2

• Updatedmobx-react-lite@3