@longline/aqua-ui 1.0.126 → 1.0.128

package/controls/ListView/Body.d.ts

@@ -4,5 +4,5 @@ import { IColumnProps } from './Column';
 interface IProps extends IListViewProps {
     columns: IColumnProps[];
 }
-declare const Body: (props: IProps) => React.JSX.Element;
+declare const Body: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLElement>>;
 export { Body };

package/controls/ListView/Body.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Selector } from '../../inputs/Selector';
-var Body = function (props) {
+var Body = React.forwardRef(function (props, ref) {
     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.
@@ -16,9 +16,11 @@ var Body = function (props) {
                     React.createElement("span", { className: "label" }, props.narrow && col.name),
                     React.createElement("span", { className: "content" },
                         " ",
-                        col.children(row)));
+                        col.children(row)),
+                    index == props.columns.length - 1 &&
+                        React.createElement("div", { style: { position: 'absolute', top: 0, right: 0 }, ref: (props.active == row ? ref : null) }));
             }),
             props.columnsEditable && React.createElement("td", null));
     })));
-};
+});
 export { Body };

package/controls/ListView/Table.js

@@ -26,6 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled, { css } from 'styled-components';
+import { usePopper } from 'react-popper';
 import { Header } from './Header';
 import { Body } from './Body';
 import { darken } from '../../helper/darken';
@@ -36,57 +37,49 @@ import { Anchor } from '../../containers/Anchor';
 var HEADER_HEIGHT = 48;
 var TableBase = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    var scrollPos = React.useRef(0);
-    var wrapperRef = React.useRef(null);
     var innerRef = React.useRef(null);
     var auxRef = React.useRef(null);
     var activeColumns = props.columns.filter(function (c) { return c.active; });
-    var setAuxPosition = function (offset) {
-        if (wrapperRef.current == null || auxRef.current == null)
-            return;
-        if (!offset) {
-            offset = scrollPos.current;
-        }
-        else {
-            scrollPos.current = offset;
-        }
-        var pos = (props.active && Array.isArray(props.data)) ? props.data.indexOf(props.active) : 0;
-        var ROWHEIGHT = props.rowHeight;
-        var top = Math.min(wrapperRef.current.clientHeight - auxRef.current.clientHeight - 16, Math.max(HEADER_HEIGHT, -offset + HEADER_HEIGHT + pos * ROWHEIGHT)) + "px";
-        auxRef.current.style.top = top;
-    };
-    React.useEffect(function () { setAuxPosition(); }, [props.active]);
-    // We use a ResizeObserver to detect changes in the size of aux.
-    // This is because the content of an InfoBox may change, and the Infobox
-    // may then grow or shrink. If its position isn't updated, then the Infobox
-    // may suddenly run off the screen.
-    // When a resize is detected, we reposition the aux.
+    var _b = React.useState(null), activeRef = _b[0], setActiveRef = _b[1];
+    var _c = usePopper(activeRef, auxRef.current, {
+        placement: 'right-start',
+        modifiers: [
+            {
+                name: 'offset',
+                options: {
+                    offset: [0, 16],
+                },
+            }, {
+                name: 'flip',
+                enabled: false
+            }, {
+                name: 'preventOverflow',
+                options: {
+                    boundary: innerRef.current,
+                    tether: false,
+                    padding: { top: HEADER_HEIGHT }
+                }
+            }
+        ]
+    }), styles = _c.styles, attributes = _c.attributes, update = _c.update;
     React.useEffect(function () {
-        var resizeObserver = new ResizeObserver(function () {
-            setAuxPosition();
-        });
-        resizeObserver.observe(auxRef.current);
-        return function () { return resizeObserver.disconnect(); };
-    }, []);
-    var handleScroll = function () {
-        if (innerRef.current == null)
-            return;
-        setAuxPosition(innerRef.current.scrollTop);
-    };
-    return (React.createElement(Wrapper, { "$dark": props.dark, ref: wrapperRef },
+        if (update)
+            update();
+    }, [props.active]);
+    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 }),
-        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(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(Inner, { 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 })))),
+                React.createElement(Body, __assign({ ref: setActiveRef }, props, { columns: activeColumns })))),
         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 AuxHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: 1;\n"], ["\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]; });
 var Inner = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position:  absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  overflow-y: auto;\n"], ["\n  position:  absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  overflow-y: auto;\n"])));
 var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  position: absolute;\n  box-sizing: border-box;\n  left: 0;\n  top: 0;\n  width: 100%;\n  border-collapse: collapse; \n  table-layout: fixed;  \n  padding-bottom: 48px;\n\n  // Grid:\n  display: grid;\n  grid-template-rows: ", "px;\n  grid-auto-rows: ", "px;\n\n  // Convert column widths a string suitable for grid template:\n  grid-template-columns: ", ";\n\n  // Appearance:\n  font: ", ";\n  color: ", ";\n  background-color: ", ";\n\n  // <thead>, <tbody> and <tr> must not participate in CSS grid:\n  tr, tbody, thead { display: contents; }\n\n  // <tr>,<th>,<td> must be styled here, once, because otherwise \n  // styled-components would create too many classes.\n  tr {\n    position: relative;\n  }\n  tr.clickable {\n    cursor: pointer;\n  }\n\n  // Optional row hover effect:\n  ", "\n\n  // Striped rows:\n  ", "\n\n  // General styles for both TD and TH:\n  th, td {\n    position:       relative;\n    box-sizing:     border-box;\n    white-space:    nowrap;\n    text-align:     left;\n    user-select:    none;\n    outline:        none;\n    padding-left: 16px;\n    padding-right: 16px;    \n\n    // th, td use flexbox to vertical-align content:\n    display: flex;\n    align-items: center;\n    justify-content: left;\n\n    // Underline.\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 1px;\n      transition: background-color ", "ms ease-in-out;\n    }    \n  }\n\n  th {\n    // Position and size:\n    position:  sticky;\n    top:       0;\n    z-index:   100;\n    gap: 8px;\n    justify-content: space-between;\n    // Appearance\n    background: ", ";\n    &.sort {\n      background: ", ";\n    }\n    &:after { \n      background-color: ", "; \n    }\n    // Header shadow:\n    ", "\n  }\n  // td bottom border color:\n  td {\n    &:after {\n      background-color: ", ";\n    }            \n  }\n  // Active row TDs:\n  tr.active td {\n    background-color: ", ";\n  }\n  // Last column has double right margin:\n  td:last-child {\n    padding-right: 32px;\n  }\n  // Last row has no bottom border:\n  tr:last-child td {\n    &:after {\n      visibility: hidden;\n    }    \n  }\n  // Spans in td/th are ellipsized:\n  td > span, th > span {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  // Grid:\n  ", "\n\n  // If onColumns is present, remove last column header's hover underline:\n  // Also remove last gridline.\n  ", "\n\n  // Change styles for table to be vertically oriented:\n  ", "\n"], ["\n  position: absolute;\n  box-sizing: border-box;\n  left: 0;\n  top: 0;\n  width: 100%;\n  border-collapse: collapse; \n  table-layout: fixed;  \n  padding-bottom: 48px;\n\n  // Grid:\n  display: grid;\n  grid-template-rows: ", "px;\n  grid-auto-rows: ", "px;\n\n  // Convert column widths a string suitable for grid template:\n  grid-template-columns: ", ";\n\n  // Appearance:\n  font: ", ";\n  color: ", ";\n  background-color: ", ";\n\n  // <thead>, <tbody> and <tr> must not participate in CSS grid:\n  tr, tbody, thead { display: contents; }\n\n  // <tr>,<th>,<td> must be styled here, once, because otherwise \n  // styled-components would create too many classes.\n  tr {\n    position: relative;\n  }\n  tr.clickable {\n    cursor: pointer;\n  }\n\n  // Optional row hover effect:\n  ", "\n\n  // Striped rows:\n  ", "\n\n  // General styles for both TD and TH:\n  th, td {\n    position:       relative;\n    box-sizing:     border-box;\n    white-space:    nowrap;\n    text-align:     left;\n    user-select:    none;\n    outline:        none;\n    padding-left: 16px;\n    padding-right: 16px;    \n\n    // th, td use flexbox to vertical-align content:\n    display: flex;\n    align-items: center;\n    justify-content: left;\n\n    // Underline.\n    &:after {\n      content: '';\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      right: 0;\n      height: 1px;\n      transition: background-color ", "ms ease-in-out;\n    }    \n  }\n\n  th {\n    // Position and size:\n    position:  sticky;\n    top:       0;\n    z-index:   100;\n    gap: 8px;\n    justify-content: space-between;\n    // Appearance\n    background: ", ";\n    &.sort {\n      background: ", ";\n    }\n    &:after { \n      background-color: ", "; \n    }\n    // Header shadow:\n    ", "\n  }\n  // td bottom border color:\n  td {\n    &:after {\n      background-color: ", ";\n    }            \n  }\n  // Active row TDs:\n  tr.active td {\n    background-color: ", ";\n  }\n  // Last column has double right margin:\n  td:last-child {\n    padding-right: 32px;\n  }\n  // Last row has no bottom border:\n  tr:last-child td {\n    &:after {\n      visibility: hidden;\n    }    \n  }\n  // Spans in td/th are ellipsized:\n  td > span, th > span {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  // Grid:\n  ", "\n\n  // If onColumns is present, remove last column header's hover underline:\n  // Also remove last gridline.\n  ", "\n\n  // Change styles for table to be vertically oriented:\n  ", "\n"])), HEADER_HEIGHT, function (p) { return p.rowHeight; }, function (p) {

package/package.json

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