@dfds-ui/experiences 2.2.0-alpha.9bb1ab0f → 2.2.0-alpha.a1ae8508

package/dynamic-table/Head/TableHead.js

@@ -3,7 +3,7 @@ import { ChevronDown } from '@dfds-ui/icons/system';
 import { Checkbox } from '@dfds-ui/react-components';
 import { chevronStyles, tableHeadCellCheckboxStyles, tableHeadCellExpanderStyles, tableHeadCellStyles } from './TableHead.styles';
 import { genericTableRowStyles } from '../Body/TableRow.styles';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 var TableHead = /*#__PURE__*/React.memo(function (_ref) {
   var expandable = _ref.expandable,
     headerRow = _ref.headerRow,
@@ -36,45 +36,53 @@ var TableHead = /*#__PURE__*/React.memo(function (_ref) {
       setSortDescending(!sortDescending);
     }
   }, [onSort, setSortDescending, setSortByKeyValue, sortDescending]);
-  return ___EmotionJSX("thead", null, ___EmotionJSX("tr", {
-    css: genericTableRowStyles
-  }, expandable && ___EmotionJSX("th", {
-    css: tableHeadCellExpanderStyles({
-      stickyHeader: stickyHeader
+  return _jsx("thead", {
+    children: _jsxs("tr", {
+      css: genericTableRowStyles,
+      children: [expandable && _jsx("th", {
+        css: tableHeadCellExpanderStyles({
+          stickyHeader: stickyHeader
+        })
+      }), selectableRows && _jsx("th", {
+        css: tableHeadCellCheckboxStyles({
+          stickyHeader: stickyHeader
+        }),
+        children: _jsx(Checkbox, {
+          checked: selectedRows.length > 0,
+          indeterminate: true,
+          name: "all",
+          onChange: toggleAll,
+          size: "small"
+        })
+      }), headerRow.map(function (headerCell, i) {
+        var sortKey = headerCell.sortKey || headerCell.key;
+        var clickHandler = function clickHandler() {
+          return headerCell.sortable && sort(sortByKeyValue, sortKey);
+        };
+        var showChevron = String(sortByKeyValue === sortKey);
+        return _jsx("th", {
+          align: headerCell.textAlign,
+          css: tableHeadCellStyles({
+            align: headerCell.textAlign,
+            customWidth: headerCell.width,
+            sortByKey: onSort,
+            sortable: headerCell.sortable,
+            stickyHeader: stickyHeader
+          }),
+          onClick: clickHandler,
+          children: _jsxs("div", {
+            children: [_jsx("span", {
+              children: headerCell.displayName
+            }), headerCell.sortable && onSort && _jsx(ChevronDown, {
+              css: chevronStyles({
+                descending: String(sortDescending),
+                show: showChevron
+              })
+            })]
+          })
+        }, i);
+      })]
     })
-  }), selectableRows && ___EmotionJSX("th", {
-    css: tableHeadCellCheckboxStyles({
-      stickyHeader: stickyHeader
-    })
-  }, ___EmotionJSX(Checkbox, {
-    checked: selectedRows.length > 0,
-    indeterminate: true,
-    name: "all",
-    onChange: toggleAll,
-    size: "small"
-  })), headerRow.map(function (headerCell, i) {
-    var sortKey = headerCell.sortKey || headerCell.key;
-    var clickHandler = function clickHandler() {
-      return headerCell.sortable && sort(sortByKeyValue, sortKey);
-    };
-    var showChevron = String(sortByKeyValue === sortKey);
-    return ___EmotionJSX("th", {
-      align: headerCell.textAlign,
-      css: tableHeadCellStyles({
-        align: headerCell.textAlign,
-        customWidth: headerCell.width,
-        sortByKey: onSort,
-        sortable: headerCell.sortable,
-        stickyHeader: stickyHeader
-      }),
-      key: i,
-      onClick: clickHandler
-    }, ___EmotionJSX("div", null, ___EmotionJSX("span", null, headerCell.displayName), headerCell.sortable && onSort && ___EmotionJSX(ChevronDown, {
-      css: chevronStyles({
-        descending: String(sortDescending),
-        show: showChevron
-      })
-    })));
-  })));
+  });
 });
 export default TableHead;

package/dynamic-table/Skeleton/helpers/createSkeletonRows.js

@@ -3,12 +3,12 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) { n[e] = r[e]; } return n; }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 import React from 'react';
 import { Skeleton } from '@dfds-ui/react-components';
 import { css } from '@emotion/react';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1m8u2wf",
   styles: "height:12px;width:100%;text-align:left"
@@ -20,8 +20,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
 var createSkeletonRows = function createSkeletonRows(headerRow) {
   return _toConsumableArray(Array(7)).map(function (_, index) {
     var row = {};
-    headerRow === null || headerRow === void 0 ? void 0 : headerRow.forEach(function (cell) {
-      row[cell.key] = ___EmotionJSX(Skeleton, {
+    headerRow === null || headerRow === void 0 || headerRow.forEach(function (cell) {
+      row[cell.key] = _jsx(Skeleton, {
         css: _ref,
         variant: "text"
       });

package/dynamic-table/stories/tableRows.js

@@ -1,65 +1,102 @@
 import React from 'react';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 var Currency = function Currency() {
-  return ___EmotionJSX("span", {
+  return _jsx("span", {
     style: {
       fontSize: '10px'
-    }
-  }, "EUR");
+    },
+    children: "EUR"
+  });
 };
 var tableRows = [{
   id: '1001',
   pallets: 10,
   from: 'Copenhagen',
   to: 'Stockholm',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "200"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "200"
+    })]
+  })
 }, {
   id: '1002',
   pallets: 41,
   from: 'Istanbul',
   to: 'London',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "320"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "320"
+    })]
+  })
 }, {
   id: '1003',
   pallets: 9,
   from: 'Delphi',
   to: 'Madrid',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "1574"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "1574"
+    })]
+  })
 }, {
   id: '1004',
   pallets: 52,
   from: 'Stockholm',
   to: 'Amsterdam',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "945.50"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "945.50"
+    })]
+  })
 }, {
   id: '1005',
   pallets: 4,
   from: 'London',
   to: 'Paris',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "850"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "850"
+    })]
+  })
 }, {
   id: '1006',
   pallets: 33,
   from: 'Madrid',
   to: 'Berlin',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "2000"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "2000"
+    })]
+  })
 }, {
   id: '1007',
   pallets: 17,
   from: 'Berlin',
   to: 'Oslo',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "887"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "887"
+    })]
+  })
 }, {
   id: '1008',
   pallets: 14,
   from: 'Oslo',
   to: 'Cairo',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "2400"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "2400"
+    })]
+  })
 }, {
   id: '1009',
   pallets: 23,
   from: 'Paris',
   to: 'Rome',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "1280.30"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "1280.30"
+    })]
+  })
 }];
 export default tableRows;

package/dynamic-table/stories/tableRowsExpandable.js

@@ -1,67 +1,104 @@
 import React from 'react';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 var Currency = function Currency() {
-  return ___EmotionJSX("span", {
+  return _jsx("span", {
     style: {
       fontSize: '10px'
-    }
-  }, "EUR");
+    },
+    children: "EUR"
+  });
 };
 var tableRowsExpandable = [{
   id: '1001',
   pallets: 10,
   from: 'Copenhagen',
   to: 'Stockholm',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "200"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "200"
+    })]
+  })
 }, {
   id: '1002',
   pallets: 41,
   from: 'Istanbul',
   to: 'London',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "320"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "320"
+    })]
+  })
 }, {
   id: '1003',
   pallets: 9,
   from: 'Delphi',
   to: 'Madrid',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "1574")),
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "1574"
+    })]
+  }),
   subRows: [{
     id: '1004',
     pallets: 52,
     from: 'Stockholm',
     to: 'Amsterdam',
-    price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "945.50"))
+    price: _jsxs(_Fragment, {
+      children: [_jsx(Currency, {}), " ", _jsx("strong", {
+        children: "945.50"
+      })]
+    })
   }, {
     id: '1005',
     pallets: 4,
     from: 'London',
     to: 'Paris',
-    price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "850"))
+    price: _jsxs(_Fragment, {
+      children: [_jsx(Currency, {}), " ", _jsx("strong", {
+        children: "850"
+      })]
+    })
   }]
 }, {
   id: '1006',
   pallets: 33,
   from: 'Madrid',
   to: 'Berlin',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "2000"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "2000"
+    })]
+  })
 }, {
   id: '1007',
   pallets: 17,
   from: 'Berlin',
   to: 'Oslo',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "887")),
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "887"
+    })]
+  }),
   subRows: [{
     id: '1008',
     pallets: 14,
     from: 'Oslo',
     to: 'Cairo',
-    price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "2400"))
+    price: _jsxs(_Fragment, {
+      children: [_jsx(Currency, {}), " ", _jsx("strong", {
+        children: "2400"
+      })]
+    })
   }]
 }, {
   id: '1009',
   pallets: 23,
   from: 'Paris',
   to: 'Rome',
-  price: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Currency, null), " ", ___EmotionJSX("strong", null, "1280.30"))
+  price: _jsxs(_Fragment, {
+    children: [_jsx(Currency, {}), " ", _jsx("strong", {
+      children: "1280.30"
+    })]
+  })
 }];
 export default tableRowsExpandable;