@longline/aqua-ui 1.0.208 → 1.0.210

package/controls/ListView/IListViewProps.d.ts

@@ -60,7 +60,7 @@ interface IListViewProps {
     }>;
     /**
      * Component to show when there is no data (`data` is `null` or `data` is `[]`).
-     * The component is placed under the header, and the component is responsable
+     * The component is placed under the header, and the component is responsible
      * for any styling.
      * If not set, a default component is shown.
      * If set to `false`, no component is shown at all.

package/controls/ListView/elements/Table.js

@@ -43,7 +43,8 @@ var TableBase = function (_a) {
     var activeColumns = props.columns.filter(function (c) { return c.active; });
     var _b = React.useState(null), activeRef = _b[0], setActiveRef = _b[1];
     var _c = React.useState(0), time = _c[0], setTime = _c[1];
-    var _d = usePopper(activeRef, auxRef.current, {
+    var _d = React.useState(false), showingNoData = _d[0], setShowingNoData = _d[1];
+    var _e = usePopper(activeRef, auxRef.current, {
         placement: 'right-start',
         modifiers: [
             {
@@ -63,7 +64,7 @@ var TableBase = function (_a) {
                 }
             }
         ]
-    }), styles = _d.styles, attributes = _d.attributes, update = _d.update;
+    }), styles = _e.styles, attributes = _e.attributes, update = _e.update;
     React.useEffect(function () {
         if (update)
             update();
@@ -93,12 +94,25 @@ var TableBase = function (_a) {
             }
         }
     }, [activeRef]);
+    // Show no-data element only after an additional render tick. Race conditions
+    // in evaluating multiple states in ListView's user can result in a situation
+    // where data is present, and yet "no data" appears.
+    React.useEffect(function () {
+        var _a;
+        if ((!Array.isArray(props.data) || ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) === 0) && !props.ghost) {
+            var id_1 = requestAnimationFrame(function () { return setShowingNoData(true); });
+            return function () { return cancelAnimationFrame(id_1); };
+        }
+        else {
+            setShowingNoData(false);
+        }
+        return function () { };
+    }, [props.data, props.ghost]);
     return (React.createElement(Wrapper, { "$dark": props.dark },
         props.columnsMode &&
             React.createElement(Anchor, { right: "32px", top: "64px" },
                 React.createElement(ColumnsManager, { columns: props.columns, onChange: props.onChangeColumns, onClose: props.onCloseColumns, onReset: props.onResetColumns })),
-        (!Array.isArray(props.data) || props.data.length == 0) &&
-            React.createElement(NoData, { dark: props.dark, component: props.noData }),
+        showingNoData && React.createElement(NoData, { dark: props.dark, component: props.noData }),
         React.createElement(AuxHolder, __assign({ ref: auxRef, style: __assign({ visibility: (props.active && props.aux && Array.isArray(props.data) && props.data.includes(props.active)) ? 'visible' : 'hidden' }, styles.popper) }, attributes.popper), (props.active && props.aux && Array.isArray(props.data) && props.data.includes(props.active)) && React.cloneElement(props.aux, { value: props.active })),
         React.createElement(OverlayScrollbarsComponent, { ref: innerRef, defer: true, options: { scrollbars: { theme: 'os-theme-light', autoHide: 'leave' } }, style: {
                 position: "absolute",

package/package.json

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

package/styles/StyleBase.js

@@ -3,6 +3,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { createGlobalStyle } from 'styled-components';
-var StyleBase = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  body {\n    font-family: Roboto;\n    font-style: normal;\n    font-weight: 400;\n    font-display: swap;\n    color: ", ";\n  }\n\n  b, strong {\n    font-weight: 700;\n  }\n\n  i, em {\n    font-style: italic;\n  }\n\n  small, sub, sup { font-size: .83em; }\n  sub             { vertical-align: sub; }\n  sup             { vertical-align: super; }\n"], ["\n\n  body {\n    font-family: Roboto;\n    font-style: normal;\n    font-weight: 400;\n    font-display: swap;\n    color: ", ";\n  }\n\n  b, strong {\n    font-weight: 700;\n  }\n\n  i, em {\n    font-style: italic;\n  }\n\n  small, sub, sup { font-size: .83em; }\n  sub             { vertical-align: sub; }\n  sup             { vertical-align: super; }\n"])), function (p) { return p.theme.colors.font; });
+var StyleBase = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  body {\n    font-family: Roboto;\n    font-style: normal;\n    font-weight: 400;\n    font-display: swap;\n    color: ", ";\n  }\n\n  b, strong {\n    font-weight: 700;\n  }\n\n  i, em {\n    font-style: italic;\n  }\n\n  a, a:visited, a:active, a:link {\n    color: ", ";\n  }\n\n  small, sub, sup { font-size: .83em; }\n  sub             { vertical-align: sub; }\n  sup             { vertical-align: super; }\n"], ["\n\n  body {\n    font-family: Roboto;\n    font-style: normal;\n    font-weight: 400;\n    font-display: swap;\n    color: ", ";\n  }\n\n  b, strong {\n    font-weight: 700;\n  }\n\n  i, em {\n    font-style: italic;\n  }\n\n  a, a:visited, a:active, a:link {\n    color: ", ";\n  }\n\n  small, sub, sup { font-size: .83em; }\n  sub             { vertical-align: sub; }\n  sup             { vertical-align: super; }\n"])), function (p) { return p.theme.colors.font; }, function (p) { return p.theme.colors.primary[1]; });
 export { StyleBase };
 var templateObject_1;