@dfds-ui/experiences 0.10.0 → 1.0.0-alpha.8d4fd23a

package/cjs/dynamic-table/stories/headerRowSortable.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const headerRowSortable = [{
+  displayName: 'ID',
+  key: 'id',
+  sortable: true
+}, {
+  displayName: 'Pallets',
+  key: 'pallets'
+}, {
+  displayName: 'From',
+  key: 'from',
+  sortable: true
+}, {
+  displayName: 'To',
+  key: 'to',
+  sortable: true
+}, {
+  displayName: 'Price',
+  key: 'price',
+  textAlign: 'right'
+}];
+var _default = headerRowSortable;
+exports.default = _default;

package/cjs/dynamic-table/stories/tableRows.d.ts

@@ -0,0 +1,3 @@
+import { Row } from '../DynamicTable.types';
+declare const tableRows: Row[];
+export default tableRows;

package/cjs/dynamic-table/stories/tableRows.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Currency = () => (0, _react2.jsx)("span", {
+  style: {
+    fontSize: '10px'
+  }
+}, "EUR");
+
+const tableRows = [{
+  id: '1001',
+  pallets: 10,
+  from: 'Copenhagen',
+  to: 'Stockholm',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "200"))
+}, {
+  id: '1002',
+  pallets: 41,
+  from: 'Istanbul',
+  to: 'London',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "320"))
+}, {
+  id: '1003',
+  pallets: 9,
+  from: 'Delphi',
+  to: 'Madrid',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "1574"))
+}, {
+  id: '1004',
+  pallets: 52,
+  from: 'Stockholm',
+  to: 'Amsterdam',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "945.50"))
+}, {
+  id: '1005',
+  pallets: 4,
+  from: 'London',
+  to: 'Paris',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "850"))
+}, {
+  id: '1006',
+  pallets: 33,
+  from: 'Madrid',
+  to: 'Berlin',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "2000"))
+}, {
+  id: '1007',
+  pallets: 17,
+  from: 'Berlin',
+  to: 'Oslo',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "887"))
+}, {
+  id: '1008',
+  pallets: 14,
+  from: 'Oslo',
+  to: 'Cairo',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "2400"))
+}, {
+  id: '1009',
+  pallets: 23,
+  from: 'Paris',
+  to: 'Rome',
+  price: (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(Currency, null), " ", (0, _react2.jsx)("strong", null, "1280.30"))
+}];
+var _default = tableRows;
+exports.default = _default;

package/dynamic-table/Body/TableBody.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableBodyProps } from './TableBody.types';
+declare const TableBody: React.MemoExoticComponent<({ activeRow, headerRow, onClickRow, onSelectRow, rows, selectableRows, selectedRows }: TableBodyProps) => JSX.Element>;
+export default TableBody;

package/dynamic-table/Body/TableBody.js

@@ -0,0 +1,52 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import React, { useCallback } from 'react';
+import TableRow from './TableRow';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TableBody = /*#__PURE__*/React.memo(function (_ref) {
+  var activeRow = _ref.activeRow,
+      headerRow = _ref.headerRow,
+      onClickRow = _ref.onClickRow,
+      onSelectRow = _ref.onSelectRow,
+      rows = _ref.rows,
+      selectableRows = _ref.selectableRows,
+      selectedRows = _ref.selectedRows;
+  // update state and callback functions
+  var updateSelectedRows = useCallback(function (id) {
+    if (onSelectRow && selectableRows) {
+      var selection = _toConsumableArray(selectedRows);
+
+      if (selectedRows.includes(id)) {
+        var index = selectedRows.indexOf(id);
+        if (index !== -1) selection.splice(index, 1);
+        onSelectRow(selection);
+      } else {
+        selection.push(id);
+        onSelectRow(selection);
+      }
+    }
+  }, [selectableRows, selectedRows]);
+  return ___EmotionJSX("tbody", null, rows.map(function (row, index) {
+    return ___EmotionJSX(TableRow, {
+      headerRow: headerRow,
+      isActive: activeRow ? row.id === activeRow : undefined,
+      key: index,
+      onClickRow: onClickRow,
+      onSelectRow: updateSelectedRows,
+      row: row,
+      selectableRows: selectableRows,
+      selectedRows: selectedRows
+    });
+  }));
+});
+export default TableBody;

package/dynamic-table/Body/TableBody.types.d.ts

@@ -0,0 +1,10 @@
+import { Header, Row } from '../DynamicTable.types';
+export declare type TableBodyProps = {
+    activeRow?: string;
+    headerRow: Header[];
+    onClickRow?: (id: string) => void;
+    onSelectRow?: (list: string[]) => void;
+    rows: Row[];
+    selectableRows: boolean;
+    selectedRows: string[];
+};

package/dynamic-table/Body/TableBody.types.js

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

package/dynamic-table/Body/TableCell.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableCellProps } from './TableCell.types';
+declare const TableCell: React.MemoExoticComponent<({ children, headerCell }: TableCellProps) => JSX.Element>;
+export default TableCell;

package/dynamic-table/Body/TableCell.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TableCellStyled } from './TableCell.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TableCell = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children,
+      headerCell = _ref.headerCell;
+  return ___EmotionJSX(TableCellStyled, {
+    align: headerCell === null || headerCell === void 0 ? void 0 : headerCell.textAlign,
+    "data-cy": "dynamic-table-cell-".concat(headerCell === null || headerCell === void 0 ? void 0 : headerCell.key),
+    customWidth: headerCell === null || headerCell === void 0 ? void 0 : headerCell.width
+  }, children);
+});
+export default TableCell;

package/dynamic-table/Body/TableCell.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const genericTableCellStyle: import("@emotion/react").SerializedStyles;
+declare type TableCellProps = {
+    align?: 'center' | 'left' | 'right';
+    customWidth?: string;
+};
+export declare const TableCellStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TableCellProps, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+export declare const TableCellCheckboxStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+export {};

package/dynamic-table/Body/TableCell.styles.js

@@ -0,0 +1,32 @@
+import _styled from "@emotion/styled/base";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { theme } from '@dfds-ui/theme';
+import { css } from '@emotion/react';
+export var genericTableCellStyle = /*#__PURE__*/css("padding:0 ", theme.spacing.xs, ";&:first-of-type{padding-left:", theme.spacing.s, ";}&:last-of-type{padding-right:", theme.spacing.s, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:genericTableCellStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSXdDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0aGVtZSB9IGZyb20gJ0BkZmRzLXVpL3RoZW1lJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcblxuZXhwb3J0IGNvbnN0IGdlbmVyaWNUYWJsZUNlbGxTdHlsZSA9IGNzc2BcbiAgcGFkZGluZzogMCAke3RoZW1lLnNwYWNpbmcueHN9O1xuXG4gICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1sZWZ0OiAke3RoZW1lLnNwYWNpbmcuc307XG4gIH1cblxuICAmOmxhc3Qtb2YtdHlwZSB7XG4gICAgcGFkZGluZy1yaWdodDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuICB9XG5gXG5cbnR5cGUgVGFibGVDZWxsUHJvcHMgPSB7XG4gIGFsaWduPzogJ2NlbnRlcicgfCAnbGVmdCcgfCAncmlnaHQnXG4gIGN1c3RvbVdpZHRoPzogc3RyaW5nXG59XG5cbmV4cG9ydCBjb25zdCBUYWJsZUNlbGxTdHlsZWQgPSBzdHlsZWQudGQ8VGFibGVDZWxsUHJvcHM+YFxuICAke3sgLi4uZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlIH19XG5cbiAgbWluLXdpZHRoOiAkeyh7IGN1c3RvbVdpZHRoIH0pID0+IGN1c3RvbVdpZHRoIHx8ICdhdXRvJ307XG4gIHRleHQtYWxpZ246ICR7KHsgYWxpZ24gfSkgPT4gYWxpZ24gfHwgJ2xlZnQnfTtcbiAgd2lkdGg6ICR7KHsgY3VzdG9tV2lkdGggfSkgPT4gY3VzdG9tV2lkdGggfHwgJ2F1dG8nfTtcbmBcblxuZXhwb3J0IGNvbnN0IFRhYmxlQ2VsbENoZWNrYm94U3R5bGVkID0gc3R5bGVkLnRkYFxuICAke3sgLi4uZ2VuZXJpY1RhYmxlQ2VsbFN0eWxlIH19XG5cbiAgbWF4LXdpZHRoOiA0MHB4O1xuICB3aWR0aDogNDBweDtcbmBcbiJdfQ== */");
+export var TableCellStyled = _styled("td", process.env.NODE_ENV === "production" ? {
+  target: "e1uuobsr1"
+} : {
+  target: "e1uuobsr1",
+  label: "TableCellStyled"
+})(_objectSpread({}, genericTableCellStyle), " min-width:", function (_ref) {
+  var customWidth = _ref.customWidth;
+  return customWidth || 'auto';
+}, ";text-align:", function (_ref2) {
+  var align = _ref2.align;
+  return align || 'left';
+}, ";width:", function (_ref3) {
+  var customWidth = _ref3.customWidth;
+  return customWidth || 'auto';
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBcUJ3RCIsImZpbGUiOiIuLi8uLi8uLi9zcmMvZHluYW1pYy10YWJsZS9Cb2R5L1RhYmxlQ2VsbC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBnZW5lcmljVGFibGVDZWxsU3R5bGUgPSBjc3NgXG4gIHBhZGRpbmc6IDAgJHt0aGVtZS5zcGFjaW5nLnhzfTtcblxuICAmOmZpcnN0LW9mLXR5cGUge1xuICAgIHBhZGRpbmctbGVmdDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuICB9XG5cbiAgJjpsYXN0LW9mLXR5cGUge1xuICAgIHBhZGRpbmctcmlnaHQ6ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgfVxuYFxuXG50eXBlIFRhYmxlQ2VsbFByb3BzID0ge1xuICBhbGlnbj86ICdjZW50ZXInIHwgJ2xlZnQnIHwgJ3JpZ2h0J1xuICBjdXN0b21XaWR0aD86IHN0cmluZ1xufVxuXG5leHBvcnQgY29uc3QgVGFibGVDZWxsU3R5bGVkID0gc3R5bGVkLnRkPFRhYmxlQ2VsbFByb3BzPmBcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZSB9fVxuXG4gIG1pbi13aWR0aDogJHsoeyBjdXN0b21XaWR0aCB9KSA9PiBjdXN0b21XaWR0aCB8fCAnYXV0byd9O1xuICB0ZXh0LWFsaWduOiAkeyh7IGFsaWduIH0pID0+IGFsaWduIHx8ICdsZWZ0J307XG4gIHdpZHRoOiAkeyh7IGN1c3RvbVdpZHRoIH0pID0+IGN1c3RvbVdpZHRoIHx8ICdhdXRvJ307XG5gXG5cbmV4cG9ydCBjb25zdCBUYWJsZUNlbGxDaGVja2JveFN0eWxlZCA9IHN0eWxlZC50ZGBcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZSB9fVxuXG4gIG1heC13aWR0aDogNDBweDtcbiAgd2lkdGg6IDQwcHg7XG5gXG4iXX0= */"));
+export var TableCellCheckboxStyled = _styled("td", process.env.NODE_ENV === "production" ? {
+  target: "e1uuobsr0"
+} : {
+  target: "e1uuobsr0",
+  label: "TableCellCheckboxStyled"
+})(_objectSpread({}, genericTableCellStyle), " max-width:40px;width:40px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVDZWxsLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJnRCIsImZpbGUiOiIuLi8uLi8uLi9zcmMvZHluYW1pYy10YWJsZS9Cb2R5L1RhYmxlQ2VsbC5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBnZW5lcmljVGFibGVDZWxsU3R5bGUgPSBjc3NgXG4gIHBhZGRpbmc6IDAgJHt0aGVtZS5zcGFjaW5nLnhzfTtcblxuICAmOmZpcnN0LW9mLXR5cGUge1xuICAgIHBhZGRpbmctbGVmdDogJHt0aGVtZS5zcGFjaW5nLnN9O1xuICB9XG5cbiAgJjpsYXN0LW9mLXR5cGUge1xuICAgIHBhZGRpbmctcmlnaHQ6ICR7dGhlbWUuc3BhY2luZy5zfTtcbiAgfVxuYFxuXG50eXBlIFRhYmxlQ2VsbFByb3BzID0ge1xuICBhbGlnbj86ICdjZW50ZXInIHwgJ2xlZnQnIHwgJ3JpZ2h0J1xuICBjdXN0b21XaWR0aD86IHN0cmluZ1xufVxuXG5leHBvcnQgY29uc3QgVGFibGVDZWxsU3R5bGVkID0gc3R5bGVkLnRkPFRhYmxlQ2VsbFByb3BzPmBcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZSB9fVxuXG4gIG1pbi13aWR0aDogJHsoeyBjdXN0b21XaWR0aCB9KSA9PiBjdXN0b21XaWR0aCB8fCAnYXV0byd9O1xuICB0ZXh0LWFsaWduOiAkeyh7IGFsaWduIH0pID0+IGFsaWduIHx8ICdsZWZ0J307XG4gIHdpZHRoOiAkeyh7IGN1c3RvbVdpZHRoIH0pID0+IGN1c3RvbVdpZHRoIHx8ICdhdXRvJ307XG5gXG5cbmV4cG9ydCBjb25zdCBUYWJsZUNlbGxDaGVja2JveFN0eWxlZCA9IHN0eWxlZC50ZGBcbiAgJHt7IC4uLmdlbmVyaWNUYWJsZUNlbGxTdHlsZSB9fVxuXG4gIG1heC13aWR0aDogNDBweDtcbiAgd2lkdGg6IDQwcHg7XG5gXG4iXX0= */"));

package/dynamic-table/Body/TableCell.types.d.ts

@@ -0,0 +1,5 @@
+import { Header } from '../DynamicTable.types';
+export declare type TableCellProps = {
+    children: React.ReactNode;
+    headerCell?: Header;
+};

package/dynamic-table/Body/TableCell.types.js

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

package/dynamic-table/Body/TableRow.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TableRowProps } from './TableRow.types';
+declare const TableRow: React.MemoExoticComponent<({ headerRow, isActive, onClickRow, onSelectRow, row, selectableRows, selectedRows }: TableRowProps) => JSX.Element>;
+export default TableRow;

package/dynamic-table/Body/TableRow.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Checkbox } from '@dfds-ui/forms';
+import TableCell from './TableCell';
+import { TableCellCheckboxStyled } from './TableCell.styles';
+import { TableRowStyled } from './TableRow.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TableRow = /*#__PURE__*/React.memo(function (_ref) {
+  var headerRow = _ref.headerRow,
+      isActive = _ref.isActive,
+      onClickRow = _ref.onClickRow,
+      onSelectRow = _ref.onSelectRow,
+      row = _ref.row,
+      selectableRows = _ref.selectableRows,
+      selectedRows = _ref.selectedRows;
+  return ___EmotionJSX(TableRowStyled, {
+    active: isActive,
+    hoverColor: !!onClickRow,
+    onClick: function onClick() {
+      return onClickRow && onClickRow(row.id ? String(row.id) : '');
+    }
+  }, selectableRows && row.id && ___EmotionJSX(TableCellCheckboxStyled, null, ___EmotionJSX(Checkbox, {
+    checked: selectedRows.includes(row.id),
+    name: row.id,
+    onChange: function onChange() {
+      if (!row.id) return;
+      onSelectRow(row.id);
+    },
+    onLabelClick: function onLabelClick(e) {
+      e.stopPropagation();
+    },
+    visualSize: "small"
+  })), headerRow.map(function (headerCell, index) {
+    return ___EmotionJSX(TableCell, {
+      headerCell: headerRow === null || headerRow === void 0 ? void 0 : headerRow[index],
+      key: index
+    }, row[headerCell.key] || '-');
+  }));
+});
+export default TableRow;

package/dynamic-table/Body/TableRow.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const genericTableRowStyle: import("@emotion/react").SerializedStyles;
+declare type TableRowProps = {
+    active?: boolean;
+    hoverColor: boolean;
+};
+export declare const TableRowStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TableRowProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export {};

package/dynamic-table/Body/TableRow.styles.js

@@ -0,0 +1,23 @@
+import _styled from "@emotion/styled/base";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { theme } from '@dfds-ui/theme';
+import { css } from '@emotion/react';
+export var genericTableRowStyle = /*#__PURE__*/css("border-bottom:1px solid ", theme.colors.surface.secondary, ";border-collapse:collapse;height:48px;" + (process.env.NODE_ENV === "production" ? "" : ";label:genericTableRowStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFJdUMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvQm9keS9UYWJsZVJvdy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBnZW5lcmljVGFibGVSb3dTdHlsZSA9IGNzc2BcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcbiAgaGVpZ2h0OiA0OHB4O1xuYFxuXG50eXBlIFRhYmxlUm93UHJvcHMgPSB7XG4gIGFjdGl2ZT86IGJvb2xlYW5cbiAgaG92ZXJDb2xvcjogYm9vbGVhblxufVxuXG5leHBvcnQgY29uc3QgVGFibGVSb3dTdHlsZWQgPSBzdHlsZWQudHI8VGFibGVSb3dQcm9wcz5gXG4gICR7eyAuLi5nZW5lcmljVGFibGVSb3dTdHlsZSB9fVxuXG4gICY6aG92ZXIge1xuICAgICR7KHsgaG92ZXJDb2xvciB9KSA9PlxuICAgICAgaG92ZXJDb2xvciAmJlxuICAgICAgYFxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG4gICAgICAgIGN1cnNvcjogJHtob3ZlckNvbG9yICYmICdwb2ludGVyJ307XG4gICAgICBgfTtcbiAgfVxuXG4gICR7KHsgYWN0aXZlIH0pID0+XG4gICAgYWN0aXZlICYmXG4gICAgYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCA0MywgNjksIDAuMTIpO1xuICAgIGB9O1xuYFxuIl19 */");
+export var TableRowStyled = _styled("tr", process.env.NODE_ENV === "production" ? {
+  target: "e1ozhs4m0"
+} : {
+  target: "e1ozhs4m0",
+  label: "TableRowStyled"
+})(_objectSpread({}, genericTableRowStyle), " &:hover{", function (_ref) {
+  var hoverColor = _ref.hoverColor;
+  return hoverColor && "\n        background-color: ".concat(theme.colors.surface.secondary, ";\n        cursor: ").concat(hoverColor && 'pointer', ";\n      ");
+}, ";}", function (_ref2) {
+  var active = _ref2.active;
+  return active && "\n      background-color: rgba(0, 43, 69, 0.12);\n    ";
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9keW5hbWljLXRhYmxlL0JvZHkvVGFibGVSb3cuc3R5bGVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFlc0QiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2R5bmFtaWMtdGFibGUvQm9keS9UYWJsZVJvdy5zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdGhlbWUgfSBmcm9tICdAZGZkcy11aS90aGVtZSdcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5cbmV4cG9ydCBjb25zdCBnZW5lcmljVGFibGVSb3dTdHlsZSA9IGNzc2BcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICR7dGhlbWUuY29sb3JzLnN1cmZhY2Uuc2Vjb25kYXJ5fTtcbiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcbiAgaGVpZ2h0OiA0OHB4O1xuYFxuXG50eXBlIFRhYmxlUm93UHJvcHMgPSB7XG4gIGFjdGl2ZT86IGJvb2xlYW5cbiAgaG92ZXJDb2xvcjogYm9vbGVhblxufVxuXG5leHBvcnQgY29uc3QgVGFibGVSb3dTdHlsZWQgPSBzdHlsZWQudHI8VGFibGVSb3dQcm9wcz5gXG4gICR7eyAuLi5nZW5lcmljVGFibGVSb3dTdHlsZSB9fVxuXG4gICY6aG92ZXIge1xuICAgICR7KHsgaG92ZXJDb2xvciB9KSA9PlxuICAgICAgaG92ZXJDb2xvciAmJlxuICAgICAgYFxuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke3RoZW1lLmNvbG9ycy5zdXJmYWNlLnNlY29uZGFyeX07XG4gICAgICAgIGN1cnNvcjogJHtob3ZlckNvbG9yICYmICdwb2ludGVyJ307XG4gICAgICBgfTtcbiAgfVxuXG4gICR7KHsgYWN0aXZlIH0pID0+XG4gICAgYWN0aXZlICYmXG4gICAgYFxuICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmdiYSgwLCA0MywgNjksIDAuMTIpO1xuICAgIGB9O1xuYFxuIl19 */"));

package/dynamic-table/Body/TableRow.types.d.ts

@@ -0,0 +1,10 @@
+import { Header, Row } from '../DynamicTable.types';
+export declare type TableRowProps = {
+    headerRow: Header[];
+    isActive?: boolean;
+    onClickRow?: (id: string) => void;
+    onSelectRow: (id: string) => void;
+    row: Row;
+    selectableRows: boolean;
+    selectedRows: string[];
+};

package/dynamic-table/Body/TableRow.types.js

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

package/dynamic-table/DynamicTable.d.ts

@@ -1,29 +1,4 @@
-import { FunctionComponent } from 'react';
-declare type DataKey = {
-    displayName: string;
-    key: string;
-    rightAlign?: boolean;
-    customColumnWidth?: string;
-    bold?: boolean;
-};
-declare type DynamicTableProps = {
-    data: any[];
-    dataKeys?: DataKey[];
-    className?: string;
-    hasHeader?: boolean;
-    colorScheme?: {
-        valueKey: string;
-        colors: any;
-    };
-    badgesScheme?: {
-        valueKey: string;
-        intentMapping: any;
-    };
-    fixedHeight?: string;
-    stickyHeader?: boolean;
-    onSortByKey?: (value: string, sortByDescending: boolean) => void;
-    onSelectFunction?: (list: string[]) => void;
-    onSelectRow?: (id: string) => void;
-};
-declare const DynamicTable: FunctionComponent<DynamicTableProps>;
-export default DynamicTable;
+import React from 'react';
+import { DynamicTableProps } from './DynamicTable.types';
+declare const _default: React.NamedExoticComponent<DynamicTableProps>;
+export default _default;