@longline/aqua-ui 1.0.0

package/controls/ListView/IListViewProps.d.ts

@@ -0,0 +1,105 @@
+interface IListViewProps {
+    /**
+     * Array of data to show in the table
+     */
+    data: any[];
+    /**
+     * Does this `ListView` use the `dark` style?
+     * @default false
+     */
+    dark?: boolean;
+    /**
+     * If set, rows will have a hover effect.
+     * @default false
+     */
+    hover?: boolean;
+    /**
+     * If set, rows will be striped.
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * If set, a grid is drawn.
+     * @default false
+     */
+    grid?: boolean;
+    /**
+     * Active record, if any. This record will be highlighted. If an `infoBox`
+     * is set, it will be shown by the active record, but not shown when there
+     * is no active record.
+     */
+    active?: any;
+    /**
+     * If set, show a total at the bottom of the table.
+     */
+    total?: boolean;
+    /**
+     * Singular unit used in total, e.g. "user". Also see `plural`.
+     */
+    singular?: React.ReactNode;
+    /**
+     * Plural unit used in total, e.g. "users". Also see `singular`.
+     */
+    plural?: React.ReactNode;
+    /**
+     * If a component is provided, then it is shown next to the active item,
+     * and will scroll with the table (but not leave the screen).  If the active
+     * item is null, then the aux component is not shown.
+     */
+    aux?: React.ReactElement<{
+        value: any;
+    }>;
+    /**
+     * 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
+     * for any styling.
+     * If not set, a default component is shown.
+     * If set to `false`, no component is shown at all.
+     */
+    noData?: React.ReactNode | false;
+    /**
+     * If set, `narrow` mode is active and columns will be vertically oriented.
+     * @default false
+     */
+    narrow?: boolean;
+    /**
+     * If set, a small shadow shown is under the table header.
+     * @default false
+     */
+    shadow?: boolean;
+    /**
+     * If set, `ListView` is in ghost mode.
+     * @default false
+     */
+    ghost?: boolean;
+    /**
+     * If set, then the `ListView` allows editing of its columns.
+     * @default false
+     */
+    columnsEditable?: boolean;
+    /**
+     * Optionally provides a function that returns a decorative element for each row.
+     * @param item Row data
+     * The function must return a `ReactNode`. It is expected to use absolute positioning
+     * to place the decorator.
+     */
+    decorator?: (item: any) => React.ReactNode;
+    /**
+     * Fired when a row is clicked.
+     * @param item Clicked item
+     */
+    onClick?: (item: any) => void;
+    /**
+     * Fired when a row is double-clicked.
+     * @param item Clicked item
+     */
+    onDoubleClick?: (item: any) => void;
+    /**
+     * If this callback is provided, items can be checked or unchecked. Items must have
+     * a key `checked` when they're checked. If `item` is true, then all items must be checked.
+     * If `item` is false, the all items must be unchecked.
+     * @param item Item to toggle.
+     */
+    onCheck?: (idx: number | boolean) => void;
+}
+export { IListViewProps };

package/controls/ListView/IListViewProps.js

@@ -0,0 +1 @@
+export {};

package/controls/ListView/ListView.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { IColumnProps } from './Column';
+import { IListViewProps } from './IListViewProps';
+interface IProps extends IListViewProps {
+    /**
+     * Column specifications. These are a set of `Column` children,
+     * each of which set a column name, width, sort key and sort direction, and
+     * cell content alignment. The content of a Column is a function which
+     * is given a data row and returns formatted cell content.
+     */
+    children?: React.ReactElement<IColumnProps> | React.ReactElement<IColumnProps>[];
+}
+declare const ListView: {
+    ({ dark, hover, striped, grid, total, singular, plural, narrow, shadow, ghost, columnsEditable, ...props }: IProps): React.JSX.Element;
+    Column: {
+        (_: IColumnProps): null;
+        displayName: string;
+    };
+};
+export { ListView };

package/controls/ListView/ListView.js

@@ -0,0 +1,97 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import * as React from 'react';
+import { Column } from './Column';
+import { Table } from './Table';
+import { sortItems } from './sortItems';
+import { Ghost } from './Ghost';
+var ListViewBase = function (props) {
+    var _a, _b;
+    var children = props.children, otherProps = __rest(props, ["children"]);
+    var _c = React.useState(false), columnsMode = _c[0], setColumnsMode = _c[1];
+    var originalColumns = React.Children.toArray(children).map(function (c) {
+        return c.props;
+    });
+    var _d = React.useState(originalColumns), columns = _d[0], setColumns = _d[1];
+    // Find default sort column:
+    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];
+    React.useEffect(function () {
+        setData(sortItems(data, sort, reverse));
+    }, [props.data, sort, reverse]);
+    // Change sort:
+    var handleSort = function (column) {
+        var _a;
+        if (sort === column.sort) {
+            setReverse(!reverse);
+        }
+        else {
+            setSort(column.sort);
+            setReverse((_a = column.reverse) !== null && _a !== void 0 ? _a : false);
+        }
+    };
+    var handleCheck = function (index) {
+        if (!props.onCheck)
+            return;
+        var newData = data.map(function (d, idx) {
+            if (index === true)
+                return __assign(__assign({}, d), { checked: true });
+            if (index === false)
+                return __assign(__assign({}, d), { checked: false });
+            return __assign(__assign({}, d), { checked: index === idx ? !d.checked : !!d.checked });
+        });
+        setData(newData);
+        props.onCheck(index);
+    };
+    var handleColumns = function () {
+        setColumnsMode(true);
+    };
+    var handleChangeColumns = function (newColumns) {
+        setColumns(newColumns);
+    };
+    var handleResetColumns = function () {
+        setColumns(__spreadArray([], originalColumns, true));
+    };
+    if (props.ghost) {
+        return React.createElement(Ghost, __assign({}, otherProps, { columns: columns }));
+    }
+    return (React.createElement(Table, __assign({}, otherProps, { data: data, columns: columns, sort: sort, reverse: reverse, onSortClick: handleSort, columnsMode: columnsMode, onOpenColumns: handleColumns, onCheck: props.onCheck ? handleCheck : null, onChangeColumns: handleChangeColumns, onCloseColumns: function () { return setColumnsMode(false); }, onResetColumns: handleResetColumns })));
+};
+// Wrapper for default values:
+var ListView = function (_a) {
+    var _b = _a.dark, dark = _b === void 0 ? false : _b, _c = _a.hover, hover = _c === void 0 ? false : _c, _d = _a.striped, striped = _d === void 0 ? false : _d, _e = _a.grid, grid = _e === void 0 ? false : _e, _f = _a.total, total = _f === void 0 ? false : _f, _g = _a.singular, singular = _g === void 0 ? "record" : _g, _h = _a.plural, plural = _h === void 0 ? "records" : _h, _j = _a.narrow, narrow = _j === void 0 ? false : _j, _k = _a.shadow, shadow = _k === void 0 ? false : _k, _l = _a.ghost, ghost = _l === void 0 ? false : _l, _m = _a.columnsEditable, columnsEditable = _m === void 0 ? false : _m, props = __rest(_a, ["dark", "hover", "striped", "grid", "total", "singular", "plural", "narrow", "shadow", "ghost", "columnsEditable"]);
+    return React.createElement(ListViewBase, __assign({ dark: dark, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, narrow: narrow, shadow: shadow, ghost: ghost, columnsEditable: columnsEditable }, props));
+};
+ListView.Column = Column;
+export { ListView };

package/controls/ListView/NoData.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * 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 responsible
+     * for any styling.
+     * If not set, a default component is shown.
+     * If set to `false`, no component is shown at all.
+     */
+    component: React.ReactNode;
+    /**
+     * Dark mode?
+     */
+    dark?: boolean;
+}
+declare const NoData: (props: IProps) => React.JSX.Element;
+export { NoData, IProps };

package/controls/ListView/NoData.js

@@ -0,0 +1,30 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled from 'styled-components';
+var NoDataBase = function (props) {
+    // Render nothing if component === false.
+    if (props.component === false)
+        return null;
+    return (React.createElement("div", { className: props.className },
+        props.component && props.component,
+        !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 NoData = function (props) { return React.createElement(NoDataStyled, __assign({}, props)); };
+export { NoData };
+var templateObject_1, templateObject_2;

package/controls/ListView/SortButton.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** Is corresponding column currently sorted? */
+    active?: boolean;
+    /** If set, sort button is reversed (Z-A). */
+    reverse?: boolean;
+    dark?: boolean;
+}
+/**
+ * The SortButton displays a caret that rotates and lights up depending on
+ * its active/reverse props.
+ */
+declare const SortButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export { SortButton };

package/controls/ListView/SortButton.js

@@ -0,0 +1,26 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+var SortButtonBase = function (props) {
+    return (React.createElement("div", { className: props.className },
+        React.createElement("svg", { viewBox: "0 0 100 100" },
+            React.createElement("path", { className: "bottom", d: "M9.5,77.9h81c4.3,0,8.1,3.3,8.1,7.2v6.1c0,3.9-3.8,7.2-8.1,7.2h-81c-4.3,0-8.1-3.3-8.1-7.2\r\n          v-6.1C1.4,81.2,5.2,77.9,9.5,77.9z" }),
+            React.createElement("path", { className: "middle", d: "M9.5,39.5h52.9c4.3,0,8.1,3.3,8.1,7.2v6.1c0,3.9-3.8,7.2-8.1,7.2H9.5c-4.3,0-8.1-3.3-8.1-7.2\r\n          v-6.1C1.4,42.9,5.2,39.5,9.5,39.5z" }),
+            React.createElement("path", { className: "top", d: "M10,1.1h24.8c4.9,0,8.6,3.3,8.6,7.2v6.1c0,3.9-3.8,7.2-8.6,7.2H10c-4.9,0-8.6-3.3-8.6-7.2V8.4\r\n          C1.4,3.9,5.2,1.1,10,1.1z" }))));
+};
+var SortIconAnimation = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 1;\n  }\n  40% {\n    opacity: 0;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"], ["\n  0% {\n    opacity: 1;\n  }\n  40% {\n    opacity: 0;\n  }\n  60% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"
+    /**
+     * The SortButton displays a caret that rotates and lights up depending on
+     * its active/reverse props.
+     */
+])));
+/**
+ * The SortButton displays a caret that rotates and lights up depending on
+ * its active/reverse props.
+ */
+var SortButton = styled(SortButtonBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Position\n  position:    relative;\n  display:     flex; // Needed for SVG to be centered in div.\n  width:       12px;\n  height:      12px;\n\n  // Appearance\n  transition: opacity ease-in-out 150ms,\n              transform ease-in-out 150ms;\n  transform: scaleY(", ");\n  opacity: ", ";\n\n  svg {\n    transition: fill ease-in-out 150ms;\n    fill: ", ";\n    path.top, path.middle, path.bottom {\n      transform-origin: 0 0;\n      animation-name: ", ";\n      // Animation duration is set by parent TableHeaderCell.\n      animation-duration: 0;\n      animation-timing-function: linear;\n      animation-iteration-count: infinite;\n    }\n    path.middle {\n      animation-delay: 0.25s;\n    }\n    path.bottom {\n      animation-delay: 0.5s;\n    }     \n  }\n"], ["\n  // Position\n  position:    relative;\n  display:     flex; // Needed for SVG to be centered in div.\n  width:       12px;\n  height:      12px;\n\n  // Appearance\n  transition: opacity ease-in-out 150ms,\n              transform ease-in-out 150ms;\n  transform: scaleY(", ");\n  opacity: ", ";\n\n  svg {\n    transition: fill ease-in-out 150ms;\n    fill: ", ";\n    path.top, path.middle, path.bottom {\n      transform-origin: 0 0;\n      animation-name: ", ";\n      // Animation duration is set by parent TableHeaderCell.\n      animation-duration: 0;\n      animation-timing-function: linear;\n      animation-iteration-count: infinite;\n    }\n    path.middle {\n      animation-delay: 0.25s;\n    }\n    path.bottom {\n      animation-delay: 0.5s;\n    }     \n  }\n"])), function (p) { return p.reverse ? -1 : 1; }, function (p) { return p.active ? 1 : 0; }, function (p) { return p.dark ? p.theme.colors.primary[1] : p.theme.colors.neutral[10]; }, SortIconAnimation);
+export { SortButton };
+var templateObject_1, templateObject_2;

package/controls/ListView/Table.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IListViewProps } from './IListViewProps';
+import { IColumnProps } from './Column';
+interface IProps extends IListViewProps {
+    /** @ignore */
+    className?: string;
+    columns: IColumnProps[];
+    sort: string;
+    reverse: boolean;
+    onSortClick: (column: IColumnProps) => void;
+    columnsMode: boolean;
+    onOpenColumns: () => void;
+    onChangeColumns: (columns: IColumnProps[]) => void;
+    onCloseColumns: () => void;
+    onResetColumns: () => void;
+}
+declare const Table: (props: IProps) => React.JSX.Element;
+export { Table };

package/controls/ListView/Table.js

@@ -0,0 +1,99 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { Header } from './Header';
+import { Body } from './Body';
+import { darken } from '../../helper/darken';
+import { Total } from './Total';
+import { NoData } from './NoData';
+import { ColumnsManager } from './ColumnsManager/ColumnsManager';
+import { Anchor } from '../../containers/Anchor';
+var TABLE_ROW_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 || props.active == null)
+            return;
+        if (!offset) {
+            offset = scrollPos.current;
+        }
+        else {
+            scrollPos.current = offset;
+        }
+        var pos = props.data.indexOf(props.active);
+        var ROWHEIGHT = TABLE_ROW_HEIGHT;
+        var HEADERHEIGHT = TABLE_ROW_HEIGHT;
+        var top = Math.min(wrapperRef.current.clientHeight - auxRef.current.clientHeight - 16, Math.max(HEADERHEIGHT, -offset + HEADERHEIGHT + pos * ROWHEIGHT)) + "px";
+        auxRef.current.style.top = top;
+    };
+    React.useEffect(function () { setAuxPosition(); }, [props.active]);
+    var handleScroll = function () {
+        if (innerRef.current == null)
+            return;
+        setAuxPosition(innerRef.current.scrollTop);
+    };
+    return (React.createElement(Wrapper, { "$dark": props.dark, ref: wrapperRef },
+        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) &&
+            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(Inner, { onScroll: handleScroll, ref: innerRef },
+            React.createElement("table", { className: className },
+                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 })));
+};
+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]; });
+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\n  // Grid:\n  display: grid;\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\n  // Grid:\n  display: grid;\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"])), TABLE_ROW_HEIGHT, function (p) {
+    // Prefix a check column?
+    return (p.onCheck ? ['48px'] : []).concat(
+    // Actual columns:
+    p.columns.filter(function (c) { return c.active; }).map(function (col) {
+        var _a;
+        var width = (_a = col.width) !== null && _a !== void 0 ? _a : 1;
+        // Numeric width? 
+        if (typeof width === 'number' && !isNaN(width))
+            return "minmax(0, ".concat(width, "fr)");
+        return "minmax(0, ".concat(width, ")");
+    }))
+        // Postfix an columns management column?
+        .concat(p.columnsEditable ? ['48px'] : [])
+        .join(" ");
+}, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.dark ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.hover && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    tr:hover td { background-color: ", "; }\n  "], ["\n    tr:hover td { background-color: ", "; }\n  "])), p.dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[95]); }, function (p) { return p.striped && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    tr:nth-child(2n+2) td {\n      background-color: ", ";\n    }\n  "], ["\n    tr:nth-child(2n+2) td {\n      background-color: ", ";\n    }\n  "])), darken(0.02, p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100])); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.dark ? p.theme.colors.primary[5] : p.theme.colors.neutral[100]; }, function (p) { return p.dark ? p.theme.colors.neutral[10] : p.theme.colors.neutral[95]; }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.shadow && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      &:before {\n        position: absolute;\n        pointer-events: none;\n        content: '';\n        z-index: 1;\n        top: calc(100%);\n        left: 0;\n        right: 0;\n        height: 8px;\n        background: linear-gradient(rgba(0,0,0,0.1), transparent);\n      }\n    "], ["\n      &:before {\n        position: absolute;\n        pointer-events: none;\n        content: '';\n        z-index: 1;\n        top: calc(100%);\n        left: 0;\n        right: 0;\n        height: 8px;\n        background: linear-gradient(rgba(0,0,0,0.1), transparent);\n      }\n    "]))); }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.grid && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    td:not(:last-child), th:not(:last-child) {\n      border-right: dashed 1px ", ";\n    }\n  "], ["\n    td:not(:last-child), th:not(:last-child) {\n      border-right: dashed 1px ", ";\n    }\n  "])), p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]); }, function (p) { return p.columnsEditable && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    th:last-child {\n      &:hover {\n        &:after { \n          background-color: ", ";\n        }\n      }\n    }\n    th:nth-last-child(2), td:nth-last-child(2) {\n      border-right: none;\n    }\n  "], ["\n    th:last-child {\n      &:hover {\n        &:after { \n          background-color: ", ";\n        }\n      }\n    }\n    th:nth-last-child(2), td:nth-last-child(2) {\n      border-right: none;\n    }\n  "])), function (p) { return p.theme.colors.primary[2]; }); }, function (p) { return p.narrow && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    grid-template-columns: 1fr;\n    tr th {\n      display: none;\n    }    \n    th, td:not(:last-child) {\n      &:after {\n        visibility: hidden;\n      }\n    }\n    td {\n      flex-direction: column;\n      align-items: start;\n      justify-content: center;\n    }\n    td span.label {\n      font: ", ";\n    }\n    td:last-child {\n      padding-right: 16px;\n    }\n  "], ["\n    grid-template-columns: 1fr;\n    tr th {\n      display: none;\n    }    \n    th, td:not(:last-child) {\n      &:after {\n        visibility: hidden;\n      }\n    }\n    td {\n      flex-direction: column;\n      align-items: start;\n      justify-content: center;\n    }\n    td span.label {\n      font: ", ";\n    }\n    td:last-child {\n      padding-right: 16px;\n    }\n  "])), function (p) { return p.theme.font.labelSmall; }); });
+var Table = function (props) { return React.createElement(TableStyled, __assign({}, props)); };
+export { Table };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/controls/ListView/Total.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    className?: string;
+    value: number;
+    singular?: React.ReactNode;
+    plural?: React.ReactNode;
+}
+declare const Total: (props: IProps) => React.JSX.Element;
+export { Total };

package/controls/ListView/Total.js

@@ -0,0 +1,28 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { Number } from '../../formatters/Number';
+var TotalBase = function (props) {
+    return React.createElement("div", { className: props.className },
+        React.createElement(Number, { value: props.value, decimals: 0 }),
+        " ",
+        props.value == 1 ? props.singular : props.plural);
+};
+var TotalStyled = styled(TotalBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position:\n  position: absolute;\n  z-index: 1;\n  left: 8px;\n  bottom: 8px;\n\n  // Behavior:\n  user-select: none;\n  pointer-events: none;\n\n  // Appearance:\n  font: ", ";\n  border-radius: ", "px;\n  background: ", ";\n  color: ", ";\n  padding: 5px 8px;\n"], ["\n  // Position:\n  position: absolute;\n  z-index: 1;\n  left: 8px;\n  bottom: 8px;\n\n  // Behavior:\n  user-select: none;\n  pointer-events: none;\n\n  // Appearance:\n  font: ", ";\n  border-radius: ", "px;\n  background: ", ";\n  color: ", ";\n  padding: 5px 8px;\n"])), function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.colors.neutral[100]; });
+var Total = function (props) { return React.createElement(TotalStyled, __assign({}, props)); };
+export { Total };
+var templateObject_1;

package/controls/ListView/sortItems.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Sort function. By default, this sorts items by comparing the "sort" field.
+ * However, a custom value retrieval function can be provided.
+ */
+declare const sortItems: (items: any[], sort: string, reverse: boolean, onSortValue?: (item: any, key: string) => any) => any[];
+export { sortItems };

package/controls/ListView/sortItems.js

@@ -0,0 +1,35 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/**
+ * Sort function. By default, this sorts items by comparing the "sort" field.
+ * However, a custom value retrieval function can be provided.
+ */
+var sortItems = function (items, sort, reverse, onSortValue) {
+    var newItems = __spreadArray([], items, true);
+    newItems.sort(function (a, b) {
+        var _a, _b;
+        if (a == null || b == null)
+            return 0;
+        var vA = (_a = (onSortValue ? onSortValue(a, sort) : a[sort])) !== null && _a !== void 0 ? _a : "";
+        var vB = (_b = (onSortValue ? onSortValue(b, sort) : b[sort])) !== null && _b !== void 0 ? _b : "";
+        // Trim strings, because leading spaces will throw sort off.
+        if (typeof vA === 'string')
+            vA = vA.trim();
+        if (typeof vB === 'string')
+            vB = vB.trim();
+        if (vA.localeCompare)
+            return vA.localeCompare(vB);
+        return vA - vB;
+    });
+    if (reverse)
+        newItems.reverse();
+    return newItems;
+};
+export { sortItems };

package/controls/Mouse/Mouse.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Is left button depressed?
+     * @default false
+     */
+    left?: boolean;
+    /**
+     * Is right button depressed?
+     * @default false
+     */
+    right?: boolean;
+    /**
+     * Is mouse wheel highlighted?
+     * @default false
+     */
+    wheel?: boolean;
+    /**
+     * Optional mouse color. Defaults to theme color.
+     */
+    color?: string;
+    /**
+     * Optional accent color (for the mouse wheel). Defaults to theme color.
+     */
+    accent?: string;
+    /**
+     * If set, the `Mouse` is rendered at the specified `size` (in pixels).
+     */
+    size?: number;
+}
+/**
+ * `Mouse` renders an SVG with a mouse image, optionally with its
+ * `left`, `right` or `wheel` buttons pressed.
+ */
+declare const Mouse: ({ left, right, wheel, ...props }: IProps) => React.JSX.Element;
+export { Mouse };

package/controls/Mouse/Mouse.js

@@ -0,0 +1,51 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+var MouseBase = function (props) {
+    return (React.createElement("svg", { className: props.className, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M14 1.75623C8.69307 1.75623 4.375 6.07429 4.375 11.3812V18.3812C4.375 23.6882 8.69307 28.0062 14 28.0062C19.3069 28.0062 23.625 23.6882 23.625 18.3812V11.3812C23.625 6.07429 19.3069 1.75623 14 1.75623ZM21.875 11.3812V12.2562H16.625V10.5062C16.625 9.36653 15.8911 8.40403 14.875 8.04199V3.55756C18.806 3.99506 21.875 7.33546 21.875 11.3812ZM14 9.63123C14.4834 9.63123 14.875 10.0239 14.875 10.5062V13.1312C14.875 13.6136 14.4834 14.0062 14 14.0062C13.5166 14.0062 13.125 13.6136 13.125 13.1312V10.5062C13.125 10.0239 13.5166 9.63123 14 9.63123ZM6.125 11.3812C6.125 7.33546 9.19403 3.99389 13.125 3.55779V8.04223C12.1089 8.40427 11.375 9.36677 11.375 10.5065V12.2565H6.125V11.3812ZM14 26.2562C9.65767 26.2562 6.125 22.7236 6.125 18.3812V14.0062H11.5358C11.8978 15.0223 12.8603 15.7562 14 15.7562C15.1397 15.7562 16.1022 15.0223 16.4642 14.0062H21.875V18.3812C21.875 22.7236 18.3423 26.2562 14 26.2562Z", fill: props.color }),
+        props.left && React.createElement("path", { className: "left", d: "M13.125 3.55798C9.19403 3.99408 6.125 7.33565 6.125 11.3814V12.2567H11.375V10.5067C11.375 9.36696 12.1089 8.40446 13.125 8.04242V3.55798Z" }),
+        props.right && React.createElement("path", { className: "right", d: "M21.875 12.2562V11.3812C21.875 7.33539 18.806 3.995 14.875 3.5575V8.04193C15.8911 8.40397 16.625 9.36647 16.625 10.5062V12.2562H21.875Z" }),
+        props.wheel && React.createElement("path", { className: "wheel", d: "M15.875 10.5062C15.875 9.47241 15.0365 8.63123 14 8.63123C12.9635 8.63123 12.125 9.47241 12.125 10.5062V13.1312C12.125 14.165 12.9635 15.0062 14 15.0062C15.0365 15.0062 15.875 14.165 15.875 13.1312V10.5062Z" })));
+};
+var MouseStyled = styled(MouseBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  max-height: 100px;\n  fill: ", ";\n  .left  { fill: ", "; }\n  .right { fill: ", "; }\n  .wheel { fill: ", "; }\n"], ["\n  ", "\n  max-height: 100px;\n  fill: ", ";\n  .left  { fill: ", "; }\n  .right { fill: ", "; }\n  .wheel { fill: ", "; }\n"
+    /**
+     * `Mouse` renders an SVG with a mouse image, optionally with its
+     * `left`, `right` or `wheel` buttons pressed.
+     */
+])), function (p) { return p.size && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", "px;\n  "], ["\n    height: ", "px;\n  "])), p.size); }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.accent) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
+/**
+ * `Mouse` renders an SVG with a mouse image, optionally with its
+ * `left`, `right` or `wheel` buttons pressed.
+ */
+var Mouse = function (_a) {
+    var _b = _a.left, left = _b === void 0 ? false : _b, _c = _a.right, right = _c === void 0 ? false : _c, _d = _a.wheel, wheel = _d === void 0 ? false : _d, props = __rest(_a, ["left", "right", "wheel"]);
+    return React.createElement(MouseStyled, __assign({ left: left, right: right, wheel: wheel }, props));
+};
+export { Mouse };
+var templateObject_1, templateObject_2;

package/controls/Mouse/index.d.ts

@@ -0,0 +1 @@
+export * from './Mouse';