@longline/aqua-ui 1.0.208 → 1.0.209

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,22 @@ var TableBase = function (_a) {
             }
         }
     }, [activeRef]);
+    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.209",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",