@guardian/interactive-component-library 0.1.0-alpha.36 → 0.1.0-alpha.38

package/dist/interactive-component-library.js

@@ -1204,6 +1204,11 @@ const sortAscending = (accessor) => {
   return (a, b) => {
     const valueA = a[accessor];
     const valueB = b[accessor];
+    if (valueA === null) {
+      return -1;
+    } else if (valueB === null) {
+      return 1;
+    }
     if (valueA < valueB)
       return -1;
     if (valueA > valueB)
@@ -1215,6 +1220,11 @@ const sortDescending = (accessor) => {
   return (a, b) => {
     const valueA = a[accessor];
     const valueB = b[accessor];
+    if (valueA === null) {
+      return 1;
+    } else if (valueB === null) {
+      return -1;
+    }
     if (valueA > valueB)
       return -1;
     if (valueA < valueB)
@@ -1317,21 +1327,23 @@ class CellModel {
       const rowData = JSON.stringify(this.row, null, 2);
       throw new Error(`Missing value for key ${this.column.accessor} in ${rowData}`);
     }
-    return this.row[this.column.accessor].toString();
+    return this.row[this.column.accessor] !== null ? this.row[this.column.accessor].toString() : "null";
   }
 }
-const table = "_table_1dg64_9";
-const hideHeader = "_hideHeader_1dg64_19";
-const hideHeaderNoBorder = "_hideHeaderNoBorder_1dg64_28";
-const headerCell = "_headerCell_1dg64_32";
-const headerCellButton = "_headerCellButton_1dg64_40";
-const bodyRow = "_bodyRow_1dg64_49";
-const bodyCell = "_bodyCell_1dg64_54";
+const table = "_table_fhbur_9";
+const hideHeader = "_hideHeader_fhbur_20";
+const hideHeaderNoBorder = "_hideHeaderNoBorder_fhbur_29";
+const headerCell = "_headerCell_fhbur_33";
+const stickyHeader = "_stickyHeader_fhbur_42";
+const headerCellButton = "_headerCellButton_fhbur_49";
+const bodyRow = "_bodyRow_fhbur_58";
+const bodyCell = "_bodyCell_fhbur_62";
 const defaultStyles$f = {
   table,
   hideHeader,
   hideHeaderNoBorder,
   headerCell,
+  stickyHeader,
   headerCellButton,
   bodyRow,
   bodyCell
@@ -1340,6 +1352,7 @@ function Table({
   columns,
   data,
   hideHeader: hideHeader2 = false,
+  stickyHeader: stickyHeader2 = false,
   styles: styles2
 }) {
   const [sortState, setSortState] = useState(() => {
@@ -1378,9 +1391,13 @@ function Table({
       children: jsx("tr", {
         children: table2.columns.map((column, index) => {
           var _a;
+          let columnStyle = mergeStyles(styles2.headerCell, (_a = column.styles) == null ? void 0 : _a.headerCell);
+          if (stickyHeader2) {
+            columnStyle = mergeStyles(columnStyle, styles2.stickyHeader);
+          }
           return jsx("th", {
             scope: "col",
-            className: mergeStyles(styles2.headerCell, (_a = column.styles) == null ? void 0 : _a.headerCell),
+            className: columnStyle,
             children: jsx(HeaderCell, {
               styles: mergeStyles(styles2, column.styles),
               onClick: () => sortByColumn(index),
@@ -1860,11 +1877,11 @@ const ToplineResult = forwardRef(({
     })]
   });
 });
-const borderTop = "_borderTop_1yz7f_9";
-const section = "_section_1yz7f_14";
-const fullWidth = "_fullWidth_1yz7f_57";
-const header = "_header_1yz7f_96";
-const content = "_content_1yz7f_133";
+const borderTop = "_borderTop_gph7y_9";
+const section = "_section_gph7y_13";
+const fullWidth = "_fullWidth_gph7y_19";
+const header = "_header_gph7y_95";
+const content = "_content_gph7y_132";
 const defaultStyles$9 = {
   borderTop,
   section,