@longline/aqua-ui 1.0.344 → 1.0.347

package/containers/Grid/Grid.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { ITestable } from '../../Types';
+interface IGridProps extends ITestable {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * Column gap in pixels between items on the same row.
+     * @default 8
+     */
+    gap?: number;
+    /**
+     * Row gap in pixels between rows.
+     * @default 0
+     */
+    rowGap?: number;
+    /**
+     * If set, the grid grows to fill its flex container (`flex: 1`).
+     * @default false
+     */
+    fill?: boolean;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
+}
+interface IGridItemProps extends ITestable {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * How many of the grid's 6 columns this item spans (1–6): 6 is a full-width
+     * row, 3 a half, 2 a third, 1 a sixth.
+     * @default 6
+     */
+    weight?: number;
+    /**
+     * Optional inline styles applied to the outer element, for one-off overrides
+     * of the default styling.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * A `Grid` lays out its `Grid.Item` children on a fixed **6-column** grid — the
+ * layout used across our forms and detail views, where a `Grid.Item`'s `weight`
+ * (1–6) says how many columns it spans. Two `weight={3}` items sit side by side;
+ * a `weight={6}` item is a full-width row.
+ *
+ * ### Props
+ * - `gap`: column gap in pixels (default 8).
+ * - `rowGap`: row gap in pixels (default 0).
+ * - `fill`: grow to fill a flex container.
+ *
+ * @example
+ * ```tsx
+ * <Grid>
+ *   <Grid.Item weight={3}><View label="First name">Ada</View></Grid.Item>
+ *   <Grid.Item weight={3}><View label="Last name">Lovelace</View></Grid.Item>
+ *   <Grid.Item><View label="Address">…</View></Grid.Item>
+ * </Grid>
+ * ```
+ */
+declare const Grid: {
+    (props: IGridProps): React.JSX.Element;
+    displayName: string;
+    Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IGridItemProps, never>> & string & Omit<(props: IGridItemProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+};
+export { Grid, IGridProps, IGridItemProps };

package/containers/Grid/Grid.js

@@ -0,0 +1,59 @@
+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, { css } from 'styled-components';
+var GridBase = function (props) {
+    return React.createElement("div", { "data-testid": props['data-testid'] || "Grid", className: props.className, style: props.style }, props.children);
+};
+// A fixed 6-column track. `minmax(0, 1fr)` (rather than a bare `1fr`) lets a
+// column shrink below the intrinsic width of its content — without it, a long
+// unbreakable value would blow the column, and the whole grid, past its
+// container. `column-gap` handles the inter-column spacing, so the tracks stay
+// even regardless of the gap size.
+var GridStyled = styled(GridBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(6, minmax(0, 1fr));\n  column-gap: ", "px;\n  row-gap: ", "px;\n  ", "\n"], ["\n  display: grid;\n  grid-template-columns: repeat(6, minmax(0, 1fr));\n  column-gap: ", "px;\n  row-gap: ", "px;\n  ", "\n"])), function (p) { var _a; return (_a = p.gap) !== null && _a !== void 0 ? _a : 8; }, function (p) { var _a; return (_a = p.rowGap) !== null && _a !== void 0 ? _a : 0; }, function (p) { return p.fill && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["flex: 1;"], ["flex: 1;"]))); });
+var GridItemBase = function (props) {
+    return React.createElement("div", { "data-testid": props['data-testid'] || "Grid.Item", className: props.className, style: props.style }, props.children);
+};
+// A column-flex so its child (a Form.Field, a View, …) fills the cell width.
+// `min-width: 0` is the flex-item counterpart to the track's `minmax(0, 1fr)`:
+// together they stop a wide child from forcing the cell to overflow.
+var GridItem = styled(GridItemBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  grid-column: span ", ";\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n"], ["\n  grid-column: span ", ";\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n"])), function (p) { var _a; return (_a = p.weight) !== null && _a !== void 0 ? _a : 6; });
+GridItem.displayName = "Grid.Item";
+/**
+ * A `Grid` lays out its `Grid.Item` children on a fixed **6-column** grid — the
+ * layout used across our forms and detail views, where a `Grid.Item`'s `weight`
+ * (1–6) says how many columns it spans. Two `weight={3}` items sit side by side;
+ * a `weight={6}` item is a full-width row.
+ *
+ * ### Props
+ * - `gap`: column gap in pixels (default 8).
+ * - `rowGap`: row gap in pixels (default 0).
+ * - `fill`: grow to fill a flex container.
+ *
+ * @example
+ * ```tsx
+ * <Grid>
+ *   <Grid.Item weight={3}><View label="First name">Ada</View></Grid.Item>
+ *   <Grid.Item weight={3}><View label="Last name">Lovelace</View></Grid.Item>
+ *   <Grid.Item><View label="Address">…</View></Grid.Item>
+ * </Grid>
+ * ```
+ */
+var Grid = function (props) { return React.createElement(GridStyled, __assign({}, props)); };
+Grid.displayName = "Grid";
+Grid.Item = GridItem;
+export { Grid };
+var templateObject_1, templateObject_2, templateObject_3;

package/containers/Grid/index.d.ts

@@ -0,0 +1 @@
+export { Grid } from './Grid';

package/containers/Grid/index.js

@@ -0,0 +1 @@
+export { Grid } from './Grid';

package/controls/ListView/IListViewProps.d.ts

@@ -4,6 +4,27 @@ interface IListViewProps {
      * Array of data to show in the table
      */
     data: any[] | null | undefined;
+    /**
+     * Controlled sort key. When `onSortClick` is provided the `ListView` is in
+     * **controlled-sort** mode: it does NOT sort `data` itself (the data is assumed
+     * already sorted — e.g. server-side/paged), and this key + `reverse` only drive
+     * the header's active-sort indicator. Ignored in the default (in-memory sort)
+     * mode, where sorting is internal state.
+     */
+    sort?: string;
+    /**
+     * Controlled sort direction, paired with `sort` (see it).
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Fired when a sortable column header is clicked. **Providing this switches the
+     * `ListView` to controlled-sort mode** (see `sort`): the `ListView` stops sorting
+     * `data` in memory and delegates the decision to you — typically you re-query a
+     * server for the newly-sorted page and feed back `sort`/`reverse` + sorted `data`.
+     * Without it, header clicks sort `data` in memory (the default).
+     */
+    onSortClick?: (column: IColumnProps) => void;
     /**
      * If set, show no header.
      * @default false

package/controls/ListView/ListView.js

@@ -61,26 +61,38 @@ var getColumns = function (children) {
     return getChildrenOfTypeDeep(children, ListView.Column).map(function (c) { return c.props; });
 };
 var ListViewBase = function (props) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     var children = props.children, otherProps = __rest(props, ["children"]);
-    var _d = React.useState(false), columnsMode = _d[0], setColumnsMode = _d[1];
+    var _f = React.useState(false), columnsMode = _f[0], setColumnsMode = _f[1];
     var originalColumns = getColumns(props.children);
-    var _e = React.useState(originalColumns), columns = _e[0], setColumns = _e[1];
+    var _g = React.useState(originalColumns), columns = _g[0], setColumns = _g[1];
     // Find default sort column:
     var sortColumn = (_a = columns.find(function (c) { return c.defaultSort; })) !== null && _a !== void 0 ? _a : columns[0];
-    var _f = React.useState((_b = sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.sort) !== null && _b !== void 0 ? _b : ''), sort = _f[0], setSort = _f[1];
-    var _g = React.useState((_c = sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.reverse) !== null && _c !== void 0 ? _c : false), reverse = _g[0], setReverse = _g[1];
-    var _h = React.useState(null), data = _h[0], setData = _h[1];
+    // Controlled-sort mode: when the consumer supplies onSortClick, it owns the sort
+    // (typically sorting server-side and feeding back pre-sorted data + sort/reverse).
+    var controlled = !!props.onSortClick;
+    // Internal sort state, used only in the default (uncontrolled) in-memory mode.
+    var _h = React.useState((_b = sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.sort) !== null && _b !== void 0 ? _b : ''), sortState = _h[0], setSortState = _h[1];
+    var _j = React.useState((_c = sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.reverse) !== null && _c !== void 0 ? _c : false), reverseState = _j[0], setReverseState = _j[1];
+    var _k = React.useState(null), data = _k[0], setData = _k[1];
+    // The active sort key/direction: from props when controlled, else internal state.
+    var sort = controlled ? ((_d = props.sort) !== null && _d !== void 0 ? _d : '') : sortState;
+    var reverse = controlled ? ((_e = props.reverse) !== null && _e !== void 0 ? _e : false) : reverseState;
     React.useEffect(function () {
         // Don't sort if no data is available yet:
         if (!Array.isArray(props.data))
             return;
+        // Controlled: the data is assumed already sorted (e.g. server-side) — show as-is.
+        if (controlled) {
+            setData(props.data);
+            return;
+        }
         // Find the column corresponding to the current sort key. If none matches
         // (e.g. no sortable column and no defaultSort), show the data unsorted
         // rather than rendering nothing.
-        var sortColumn = columns.find(function (c) { return c.sort === sort; });
-        setData(sortColumn ? sortItems(props.data, sort, reverse, sortColumn.sortValue) : props.data);
-    }, [props.data, sort, reverse, columns]);
+        var sc = columns.find(function (c) { return c.sort === sort; });
+        setData(sc ? sortItems(props.data, sort, reverse, sc.sortValue) : props.data);
+    }, [props.data, sort, reverse, columns, controlled]);
     // If children change, then update columns state.
     React.useEffect(function () {
         setColumns(getColumns(props.children));
@@ -88,12 +100,17 @@ var ListViewBase = function (props) {
     // Change sort:
     var handleSort = function (column) {
         var _a, _b;
-        if (sort === column.sort) {
-            setReverse(!reverse);
+        // Controlled: delegate to the consumer (who re-queries and re-feeds data).
+        if (props.onSortClick) {
+            props.onSortClick(column);
+            return;
+        }
+        if (sortState === column.sort) {
+            setReverseState(!reverseState);
         }
         else {
-            setSort((_a = column.sort) !== null && _a !== void 0 ? _a : '');
-            setReverse((_b = column.reverse) !== null && _b !== void 0 ? _b : false);
+            setSortState((_a = column.sort) !== null && _a !== void 0 ? _a : '');
+            setReverseState((_b = column.reverse) !== null && _b !== void 0 ? _b : false);
         }
     };
     var handleCheck = function (data, item) {

package/package.json

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