@longline/aqua-ui 1.0.136 → 1.0.138

package/controls/LinearChart/LinearChart.js

@@ -36,7 +36,7 @@ var LinearChartBase = function (props) {
 var Label = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 120px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  height: 18px;\n  line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n  font-weight: 700; // TODO: Needs to use theme font weight\n"], ["\n  width: 120px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  height: 18px;\n  line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n  font-weight: 700; // TODO: Needs to use theme font weight\n"])));
 var Number = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 40px;\n  text-align: right;\n  height: 18px;     // If not, will chop accents of \u00C3 and \u00C7.\n  line-height: 18px;\n"], ["\n  width: 40px;\n  text-align: right;\n  height: 18px;     // If not, will chop accents of \u00C3 and \u00C7.\n  line-height: 18px;\n"])));
 var Bar = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative; \n  box-sizing: border-box;\n  flex: 1;\n  height: 14px;\n\n  background-color: ", ";\n  border-radius: 7px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    box-sizing: border-box;\n    transition: width ", "ms ease;\n    border-radius: 7px;\n  }  \n"], ["\n  position: relative; \n  box-sizing: border-box;\n  flex: 1;\n  height: 14px;\n\n  background-color: ", ";\n  border-radius: 7px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    box-sizing: border-box;\n    transition: width ", "ms ease;\n    border-radius: 7px;\n  }  \n"])), function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.animation.duration * 2; });
-var LinearChartStyled = styled(LinearChartBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  min-width: 200px;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  min-width: 200px;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"
+var LinearChartStyled = styled(LinearChartBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  min-width: 200px;\n  user-select: none;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  min-width: 200px;\n  user-select: none;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"
     /**
      * Data visualization element.
      *

package/controls/ListView/Body.js

@@ -21,7 +21,7 @@ var Body = React.forwardRef(function (props, ref) {
                             " ",
                             col.children(row)),
                         index == props.columns.length - 1 &&
-                            React.createElement("div", { style: { position: 'absolute', top: 0, right: 0 }, ref: (props.active == row ? ref : null) }));
+                            React.createElement("div", { style: { position: 'absolute', top: 0, right: 0, scrollMargin: "".concat(props.rowHeight, "px") }, ref: (props.active == row ? ref : null) }));
                 }),
                 props.columnsEditable && React.createElement("td", null)));
             if (props.expanded && props.active == row) {

package/controls/ListView/IListViewProps.d.ts

@@ -103,6 +103,11 @@ interface IListViewProps {
      * Content to show when active row is expanded.
      */
     expansion?: React.ReactNode;
+    /**
+     * If set, when an item is activated it scrolls into view.
+     * @fefault false
+     */
+    focusActive?: boolean;
     /**
      * Fired when a row is clicked.
      * @param item Clicked item

package/controls/ListView/ListView.d.ts

@@ -11,7 +11,7 @@ interface IProps extends IListViewProps {
     children?: React.ReactElement<IColumnProps> | React.ReactElement<IColumnProps>[];
 }
 declare const ListView: {
-    ({ dark, noheader, hover, striped, grid, total, singular, plural, narrow, shadow, ghost, rowHeight, columnsEditable, expanded, ...props }: IProps): React.JSX.Element;
+    ({ dark, noheader, hover, striped, grid, total, singular, plural, narrow, shadow, ghost, rowHeight, columnsEditable, expanded, focusActive, ...props }: IProps): React.JSX.Element;
     Column: {
         (_: IColumnProps): null;
         displayName: string;

package/controls/ListView/ListView.js

@@ -99,8 +99,8 @@ var ListViewBase = function (props) {
 };
 // Wrapper for default values:
 var ListView = function (_a) {
-    var _b = _a.dark, dark = _b === void 0 ? false : _b, _c = _a.noheader, noheader = _c === void 0 ? false : _c, _d = _a.hover, hover = _d === void 0 ? false : _d, _e = _a.striped, striped = _e === void 0 ? false : _e, _f = _a.grid, grid = _f === void 0 ? false : _f, _g = _a.total, total = _g === void 0 ? false : _g, _h = _a.singular, singular = _h === void 0 ? "record" : _h, _j = _a.plural, plural = _j === void 0 ? "records" : _j, _k = _a.narrow, narrow = _k === void 0 ? false : _k, _l = _a.shadow, shadow = _l === void 0 ? false : _l, _m = _a.ghost, ghost = _m === void 0 ? false : _m, _o = _a.rowHeight, rowHeight = _o === void 0 ? 48 : _o, _p = _a.columnsEditable, columnsEditable = _p === void 0 ? false : _p, _q = _a.expanded, expanded = _q === void 0 ? false : _q, props = __rest(_a, ["dark", "noheader", "hover", "striped", "grid", "total", "singular", "plural", "narrow", "shadow", "ghost", "rowHeight", "columnsEditable", "expanded"]);
-    return React.createElement(ListViewBase, __assign({ dark: dark, noheader: noheader, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, narrow: narrow, shadow: shadow, ghost: ghost, rowHeight: rowHeight, columnsEditable: columnsEditable, expanded: expanded }, props));
+    var _b = _a.dark, dark = _b === void 0 ? false : _b, _c = _a.noheader, noheader = _c === void 0 ? false : _c, _d = _a.hover, hover = _d === void 0 ? false : _d, _e = _a.striped, striped = _e === void 0 ? false : _e, _f = _a.grid, grid = _f === void 0 ? false : _f, _g = _a.total, total = _g === void 0 ? false : _g, _h = _a.singular, singular = _h === void 0 ? "record" : _h, _j = _a.plural, plural = _j === void 0 ? "records" : _j, _k = _a.narrow, narrow = _k === void 0 ? false : _k, _l = _a.shadow, shadow = _l === void 0 ? false : _l, _m = _a.ghost, ghost = _m === void 0 ? false : _m, _o = _a.rowHeight, rowHeight = _o === void 0 ? 48 : _o, _p = _a.columnsEditable, columnsEditable = _p === void 0 ? false : _p, _q = _a.expanded, expanded = _q === void 0 ? false : _q, _r = _a.focusActive, focusActive = _r === void 0 ? false : _r, props = __rest(_a, ["dark", "noheader", "hover", "striped", "grid", "total", "singular", "plural", "narrow", "shadow", "ghost", "rowHeight", "columnsEditable", "expanded", "focusActive"]);
+    return React.createElement(ListViewBase, __assign({ dark: dark, noheader: noheader, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, narrow: narrow, shadow: shadow, ghost: ghost, rowHeight: rowHeight, columnsEditable: columnsEditable, expanded: expanded, focusActive: focusActive }, props));
 };
 ListView.Column = Column;
 export { ListView };

package/controls/ListView/Table.js

@@ -80,6 +80,12 @@ var TableBase = function (_a) {
         resizeObserver.observe(auxRef.current);
         return function () { return resizeObserver.disconnect(); };
     }, []);
+    // If desired, scroll newly selected item into view.
+    React.useEffect(function () {
+        if (activeRef && props.focusActive) {
+            activeRef.scrollIntoView({ behavior: 'smooth' });
+        }
+    }, [activeRef]);
     return (React.createElement(Wrapper, { "$dark": props.dark },
         props.columnsMode &&
             React.createElement(Anchor, { right: "32px", top: "64px" },

package/map/Map/Map.js

@@ -84,11 +84,11 @@ var MapBase = function (props) {
         bearing: props.bearing,
         padding: { top: 0, bottom: 0, left: 0, right: 0 }
     }), viewState = _a[0], setViewState = _a[1];
-    React.useEffect(function () {
-        // TODO: REMOVE THIS!
-        // Clears entire Mapbox tile cache for testing of clipping strategy.
-        // MapboxGL.clearStorage();
-    }, []);
+    // TODO: REMOVE THIS!
+    // React.useEffect(() => {
+    //   // Clears entire Mapbox tile cache for testing of clipping strategy.
+    //   MapboxGL.clearStorage();
+    // }, []);  
     var loadImage = function (url) {
         return new Promise(function (res, rej) {
             var img = new Image();

package/package.json

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