@longline/aqua-ui 1.0.85 → 1.0.87

package/controls/ListView/Body.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Selector } from '../../inputs/Selector';
 var Body = function (props) {
-    return (React.createElement("tbody", null, props.data.map(function (row, index) {
+    return (React.createElement("tbody", null, Array.isArray(props.data) && props.data.map(function (row, index) {
         return React.createElement("tr", { key: index, 
             // Set classnames for tr; styles are in Table.
             className: [

package/controls/ListView/Header.js

@@ -13,14 +13,12 @@ import * as React from 'react';
 import { HeaderCell } from './HeaderCell';
 import { Selector } from '../../inputs/Selector';
 import { SVG } from '../../svg';
-import { useTheme } from 'styled-components';
 import { HeaderButton } from './HeaderButton';
 var Header = function (props) {
-    var theme = useTheme();
     // Are ALL items checked?
-    var allChecked = props.data.map(function (x) { return !!x.checked; }).reduce(function (acc, cur) { return acc && !!cur; }, true) == true;
+    var allChecked = Array.isArray(props.data) ? props.data.map(function (x) { return !!x.checked; }).reduce(function (acc, cur) { return acc && !!cur; }, true) == true : false;
     // Are NO items checked?
-    var noneChecked = props.data.map(function (x) { return !!x.checked; }).reduce(function (acc, cur) { return acc || !!cur; }, false) == false;
+    var noneChecked = Array.isArray(props.data) ? props.data.map(function (x) { return !!x.checked; }).reduce(function (acc, cur) { return acc || !!cur; }, false) == false : true;
     var indeterminate = !allChecked && !noneChecked;
     return (React.createElement("thead", null,
         React.createElement("tr", null,

package/controls/ListView/IListViewProps.d.ts

@@ -2,7 +2,7 @@ interface IListViewProps {
     /**
      * Array of data to show in the table
      */
-    data: any[];
+    data: any[] | null | undefined;
     /**
      * If set, show no header.
      * @default false

package/controls/ListView/ListView.js

@@ -46,9 +46,10 @@ var ListViewBase = function (props) {
     var sortColumn = (_a = columns.find(function (c) { return c.defaultSort; })) !== null && _a !== void 0 ? _a : columns[0];
     var _e = React.useState(sortColumn.sort), sort = _e[0], setSort = _e[1];
     var _f = React.useState((_b = sortColumn.reverse) !== null && _b !== void 0 ? _b : false), reverse = _f[0], setReverse = _f[1];
-    var _g = React.useState(sortItems(props.data, sort, reverse)), data = _g[0], setData = _g[1];
+    var _g = React.useState(null), data = _g[0], setData = _g[1];
     React.useEffect(function () {
-        setData(sortItems(props.data, sort, reverse));
+        if (Array.isArray(props.data))
+            setData(sortItems(props.data, sort, reverse));
     }, [props.data, sort, reverse]);
     // If children change, then update columns state.
     React.useEffect(function () {
@@ -70,6 +71,8 @@ var ListViewBase = function (props) {
     var handleCheck = function (index) {
         if (!props.onCheck)
             return;
+        if (!Array.isArray(data))
+            return;
         var newData = data.map(function (d, idx) {
             if (index === true)
                 return __assign(__assign({}, d), { checked: true });

package/controls/ListView/NoData.d.ts

@@ -3,7 +3,7 @@ interface IProps {
     /** @ignore */
     className?: string;
     /**
-     * Component to show when there is no data (data is `null` or data is `[]`).
+     * Component to show when there is no data (data is `null`, `undefined` or `[]`).
      * The component is placed under the header, and the component is responsible
      * for any styling.
      * If not set, a default component is shown.

package/controls/ListView/NoData.js

@@ -24,7 +24,7 @@ var NoDataBase = function (props) {
         !props.component && React.createElement(DefaultMessage, null, "Your query returned no data.  Your filter might be too restrictive.")));
 };
 var DefaultMessage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n"], ["\n"])));
-var NoDataStyled = styled(NoDataBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 64px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  ", " {\n    margin: 0 16px 0 16px;\n    color: ", ";\n    user-select: none;\n    padding: 8px 16px 8px 16px;\n    border-radius: ", "px;\n    background: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 64px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  ", " {\n    margin: 0 16px 0 16px;\n    color: ", ";\n    user-select: none;\n    padding: 8px 16px 8px 16px;\n    border-radius: ", "px;\n    background: ", ";\n  }\n"])), DefaultMessage, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.dark ? p.theme.colors.neutral[10] : p.theme.colors.neutral[10]; });
+var NoDataStyled = styled(NoDataBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 64px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  z-index: 1;\n  ", " {\n    margin: 0 16px 0 16px;\n    color: ", ";\n    user-select: none;\n    padding: 8px 16px 8px 16px;\n    border-radius: ", "px;\n    background: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 64px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  z-index: 1;\n  ", " {\n    margin: 0 16px 0 16px;\n    color: ", ";\n    user-select: none;\n    padding: 8px 16px 8px 16px;\n    border-radius: ", "px;\n    background: ", ";\n  }\n"])), DefaultMessage, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.dark ? p.theme.colors.neutral[10] : p.theme.colors.neutral[10]; });
 var NoData = function (props) { return React.createElement(NoDataStyled, __assign({}, props)); };
 export { NoData };
 var templateObject_1, templateObject_2;

package/controls/ListView/Table.js

@@ -77,14 +77,14 @@ var TableBase = function (_a) {
         props.columnsMode &&
             React.createElement(Anchor, { right: "32px", top: "64px" },
                 React.createElement(ColumnsManager, { columns: props.columns, onChange: props.onChangeColumns, onClose: props.onCloseColumns, onReset: props.onResetColumns })),
-        (props.data == null || props.data.length == 0) &&
+        (!Array.isArray(props.data) || props.data.length == 0) &&
             React.createElement(NoData, { dark: props.dark, component: props.noData }),
-        React.createElement(AuxHolder, { ref: auxRef, style: { visibility: (props.active && props.aux && props.data.includes(props.active)) ? 'visible' : 'hidden' } }, (props.active && props.aux && props.data.includes(props.active)) && React.cloneElement(props.aux, { value: props.active })),
+        React.createElement(AuxHolder, { ref: auxRef, style: { visibility: (props.active && props.aux && Array.isArray(props.data) && props.data.includes(props.active)) ? 'visible' : 'hidden' } }, (props.active && props.aux && Array.isArray(props.data) && props.data.includes(props.active)) && React.cloneElement(props.aux, { value: props.active })),
         React.createElement(Inner, { onScroll: handleScroll, ref: innerRef },
             React.createElement("table", { className: className },
                 props.noheader != true && React.createElement(Header, __assign({}, props, { columns: activeColumns, onOpenColumns: props.onOpenColumns })),
                 React.createElement(Body, __assign({}, props, { columns: activeColumns })))),
-        props.total && React.createElement(Total, { value: props.data.length, singular: props.singular, plural: props.plural })));
+        props.total && Array.isArray(props.data) && React.createElement(Total, { value: props.data.length, singular: props.singular, plural: props.plural })));
 };
 var AuxHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  // The AuxHolder is 16px right of the table. Its \"top\" position will\n  // be set by the table scroll handler.\n  left: calc(100% + 16px);\n  z-index: 1;\n"], ["\n  position: absolute;\n  // The AuxHolder is 16px right of the table. Its \"top\" position will\n  // be set by the table scroll handler.\n  left: calc(100% + 16px);\n  z-index: 1;\n"])));
 var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Size and position. A table fills its container.\n  position:    relative;\n  width:       100%;\n  height:      100%;\n  background-color: ", ";\n"], ["\n  // Size and position. A table fills its container.\n  position:    relative;\n  width:       100%;\n  height:      100%;\n  background-color: ", ";\n"])), function (p) { return p.$dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.85",
+  "version": "1.0.87",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",