orcs-design-system 3.2.4 → 3.2.6

package/es/components/Table/Table.stories.js

@@ -3,44 +3,47 @@ import Table from ".";
 import Card from "../Card/index";
 import Box from "../Box";
 import Badge from "../Badge";
+import { jsx as _jsx } from "react/jsx-runtime";
 export default {
   title: "Components/Table",
   component: Table
 };
-export var Default = function Default() {
-  var columns = useMemo(function () {
-    return [{
-      accessorKey: "name",
-      header: "Name",
-      enableHiding: false
-    }, {
-      accessorFn: function accessorFn(originalRow) {
-        return parseInt(originalRow.age);
-      },
-      id: "age",
-      header: "Age",
-      Header: /*#__PURE__*/React.createElement("i", null, "Age"),
-      Cell: function Cell(_ref) {
-        var cell = _ref.cell;
-        return /*#__PURE__*/React.createElement("i", null, cell.getValue().toLocaleString());
-      }
-    }];
-  }, []);
-  var data = useMemo(function () {
-    return [{
-      name: "John",
-      age: 30
-    }, {
-      name: "Sara",
-      age: 25
-    }];
-  }, []);
-  return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Table, {
-    columns: columns,
-    data: data
-  }));
+export const Default = () => {
+  const columns = useMemo(() => [{
+    accessorKey: "name",
+    header: "Name",
+    enableHiding: false
+  }, {
+    accessorFn: originalRow => parseInt(originalRow.age),
+    id: "age",
+    header: "Age",
+    Header: /*#__PURE__*/_jsx("i", {
+      children: "Age"
+    }),
+    Cell: _ref => {
+      let {
+        cell
+      } = _ref;
+      return /*#__PURE__*/_jsx("i", {
+        children: cell.getValue().toLocaleString()
+      });
+    }
+  }], []);
+  const data = useMemo(() => [{
+    name: "John",
+    age: 30
+  }, {
+    name: "Sara",
+    age: 25
+  }], []);
+  return /*#__PURE__*/_jsx(Card, {
+    children: /*#__PURE__*/_jsx(Table, {
+      columns: columns,
+      data: data
+    })
+  });
 };
-var types = {
+const types = {
   strat_outcome: {
     variant: "primaryDark",
     label: "Strategic Outcome"
@@ -58,95 +61,98 @@ var types = {
     label: "Work Item"
   }
 };
-export var NestedTreeStructure = function NestedTreeStructure() {
-  var columns = useMemo(function () {
-    return [{
-      accessorKey: "name",
-      id: "name",
-      header: "Strategy"
-    }, {
-      accessorKey: "workForce",
-      id: "workForce",
-      header: "Work force"
-    }, {
-      accessorKey: "type",
-      id: "type",
-      header: "Type",
-      Cell: function Cell(_ref2) {
-        var cell = _ref2.cell;
-        var type = types[cell.getValue()];
-        return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Badge, {
-          variant: type === null || type === void 0 ? void 0 : type.variant
-        }, type === null || type === void 0 ? void 0 : type.label));
-      }
-    }];
-  }, []);
-  var data = useMemo(function () {
-    return [{
-      name: "Never gonna give you up",
-      workForce: 391,
-      type: "strat_outcome",
+export const NestedTreeStructure = () => {
+  const columns = useMemo(() => [{
+    accessorKey: "name",
+    id: "name",
+    header: "Strategy"
+  }, {
+    accessorKey: "workForce",
+    id: "workForce",
+    header: "Work force"
+  }, {
+    accessorKey: "type",
+    id: "type",
+    header: "Type",
+    Cell: _ref2 => {
+      let {
+        cell
+      } = _ref2;
+      const type = types[cell.getValue()];
+      return /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(Badge, {
+          variant: type === null || type === void 0 ? void 0 : type.variant,
+          children: type === null || type === void 0 ? void 0 : type.label
+        })
+      });
+    }
+  }], []);
+  const data = useMemo(() => [{
+    name: "Never gonna give you up",
+    workForce: 391,
+    type: "strat_outcome",
+    children: [{
+      name: "Never gonna let you down",
+      workForce: 25,
+      type: "okr",
       children: [{
-        name: "Never gonna let you down",
-        workForce: 25,
-        type: "okr",
+        name: "TPP-441 Never gonna run around and desert you",
+        workForce: 30,
+        type: "epic",
         children: [{
-          name: "TPP-441 Never gonna run around and desert you",
-          workForce: 30,
-          type: "epic",
-          children: [{
-            name: "TPP-684 Never gonna make you cry",
-            workForce: 25,
-            type: "work_item"
-          }, {
-            name: "TPP-685 Never gonna say goodbye",
-            workForce: 25,
-            type: "work_item"
-          }, {
-            name: "TPP-685 Never gonna tell a lie and hurt you",
-            workForce: 25,
-            type: "work_item"
-          }]
+          name: "TPP-684 Never gonna make you cry",
+          workForce: 25,
+          type: "work_item"
+        }, {
+          name: "TPP-685 Never gonna say goodbye",
+          workForce: 25,
+          type: "work_item"
+        }, {
+          name: "TPP-685 Never gonna tell a lie and hurt you",
+          workForce: 25,
+          type: "work_item"
         }]
       }]
-    }, {
-      name: "Grow customer base by 5 mill",
-      workForce: 391,
-      type: "strat_outcome",
+    }]
+  }, {
+    name: "Grow customer base by 5 mill",
+    workForce: 391,
+    type: "strat_outcome",
+    children: [{
+      name: "Launch our revolutionary HPLSF module",
+      workForce: 25,
+      type: "okr",
       children: [{
-        name: "Launch our revolutionary HPLSF module",
-        workForce: 25,
-        type: "okr",
+        name: "TPP-441 New space flight model test",
+        workForce: 30,
+        type: "epic",
         children: [{
-          name: "TPP-441 New space flight model test",
-          workForce: 30,
-          type: "epic",
-          children: [{
-            name: "TPP-684 Infra benchmarking",
-            workForce: 25,
-            type: "work_item"
-          }]
+          name: "TPP-684 Infra benchmarking",
+          workForce: 25,
+          type: "work_item"
         }]
       }]
-    }];
-  }, []);
-  return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Table, {
-    columns: columns,
-    data: data,
-    enableExpanding: true,
-    enableExpandAll: true,
-    muiTableBodyCellProps: function muiTableBodyCellProps(_ref3) {
-      var row = _ref3.row;
-      return {
-        sx: function sx() {
-          return {
+    }]
+  }], []);
+  return /*#__PURE__*/_jsx(Card, {
+    children: /*#__PURE__*/_jsx(Table, {
+      columns: columns,
+      data: data,
+      enableExpanding: true,
+      enableExpandAll: true,
+      muiTableBodyCellProps: _ref3 => {
+        let {
+          row
+        } = _ref3;
+        return {
+          sx: () => ({
             color: row.original.type === "work_item" ? "grey" : "",
             fontWeight: row.depth === 0 ? 600 : row.depth === 1 ? 500 : undefined
-          };
-        }
-      };
-    }
-  }));
+          })
+        };
+      }
+    })
+  });
 };
 Default.__docgenInfo = {
   "description": "",

package/es/components/Table/getExpandColumnConfig.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import { Stack } from "@mui/material";
 import { MRT_ExpandAllButton } from "material-react-table";
 import React from "react";
@@ -6,84 +5,90 @@ import Box from "../Box";
 import { get } from "lodash";
 import styled from "styled-components";
 import { PropTypes } from "prop-types";
-var StyledHighlight = styled.span.withConfig({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledHighlight = styled.span.withConfig({
   displayName: "getExpandColumnConfig__StyledHighlight",
   componentId: "sc-kekww4-0"
-})(["background-color:", ";border-radius:2px;padding:2px 1px;"], function (props) {
-  return props.matchHighlightColor;
-});
-var getHiglightedSearchTerm = function getHiglightedSearchTerm(_ref) {
-  var value = _ref.value,
-    searchTerm = _ref.searchTerm,
-    matchHighlightColor = _ref.matchHighlightColor;
-  var regex = new RegExp("(".concat(searchTerm, ")"), "i");
-  return value.split(regex).map(function (part, i) {
-    return part.match(regex) ? /*#__PURE__*/React.createElement(StyledHighlight, {
-      key: part + i,
-      matchHighlightColor: matchHighlightColor
-    }, part) : part;
-  });
+})(["background-color:", ";border-radius:2px;padding:2px 1px;"], props => props.matchHighlightColor);
+const getHiglightedSearchTerm = _ref => {
+  let {
+    value,
+    searchTerm,
+    matchHighlightColor
+  } = _ref;
+  const regex = new RegExp("(".concat(searchTerm, ")"), "i");
+  return value.split(regex).map((part, i) => part.match(regex) ? /*#__PURE__*/_jsx(StyledHighlight, {
+    matchHighlightColor: matchHighlightColor,
+    children: part
+  }, part + i) : part);
 };
-var _GroupedCell = function GroupedCell(props) {
-  var row = props.row,
-    table = props.table,
-    firstCol = props.firstCol;
-  var _ref2 = (table === null || table === void 0 ? void 0 : table.options) || {},
-    matchHighlightColor = _ref2.mrtTheme.matchHighlightColor,
-    enableFilterMatchHighlighting = _ref2.enableFilterMatchHighlighting;
-  var searchTerm = table.getState().globalFilter;
-  var value = get(row.original, firstCol.accessorKey);
-  var renderedCellValue = value;
+const GroupedCell = props => {
+  const {
+    row,
+    table,
+    firstCol
+  } = props;
+  const {
+    mrtTheme: {
+      matchHighlightColor
+    },
+    enableFilterMatchHighlighting
+  } = (table === null || table === void 0 ? void 0 : table.options) || {};
+  const searchTerm = table.getState().globalFilter;
+  const value = get(row.original, firstCol.accessorKey);
+  let renderedCellValue = value;
   if (enableFilterMatchHighlighting && searchTerm) {
     renderedCellValue = getHiglightedSearchTerm({
-      value: value,
-      searchTerm: searchTerm,
-      matchHighlightColor: matchHighlightColor
+      value,
+      searchTerm,
+      matchHighlightColor
     });
   }
   if (firstCol.Cell) {
-    return /*#__PURE__*/React.createElement(firstCol.Cell, _extends({}, props, {
+    return /*#__PURE__*/_jsx(firstCol.Cell, {
+      ...props,
       renderedCellValue: renderedCellValue
-    }));
+    });
   }
   return renderedCellValue;
 };
-_GroupedCell.propTypes = PropTypes.Obj;
-var HeaderCell = function HeaderCell(props) {
-  var table = props.table,
-    firstCol = props.firstCol,
-    tableConfig = props.tableConfig;
-  var headerMarkup = firstCol.header;
+GroupedCell.propTypes = PropTypes.Obj;
+const HeaderCell = props => {
+  const {
+    table,
+    firstCol,
+    tableConfig
+  } = props;
+  let headerMarkup = firstCol.header;
   if ( /*#__PURE__*/React.isValidElement(firstCol.Header)) {
     headerMarkup = firstCol.Header;
   }
   if (typeof firstCol.Header === "function") {
-    headerMarkup = /*#__PURE__*/React.createElement(firstCol.Header, null);
+    headerMarkup = /*#__PURE__*/_jsx(firstCol.Header, {});
   }
-  return /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/_jsxs(Stack, {
     direction: "row",
-    alignItems: "center"
-  }, tableConfig.enableExpandAll && /*#__PURE__*/React.createElement(MRT_ExpandAllButton, {
-    table: table
-  }), /*#__PURE__*/React.createElement(Box, null, headerMarkup));
+    alignItems: "center",
+    children: [tableConfig.enableExpandAll && /*#__PURE__*/_jsx(MRT_ExpandAllButton, {
+      table: table
+    }), /*#__PURE__*/_jsx(Box, {
+      children: headerMarkup
+    })]
+  });
 };
 HeaderCell.propTypes = PropTypes.Obj;
-export default (function (firstCol, tableConfig) {
-  return {
-    "mrt-row-expand": {
-      Header: function Header(props) {
-        return /*#__PURE__*/React.createElement(HeaderCell, _extends({}, props, {
-          firstCol: firstCol,
-          tableConfig: tableConfig
-        }));
-      },
-      GroupedCell: function GroupedCell(props) {
-        return /*#__PURE__*/React.createElement(_GroupedCell, _extends({}, props, {
-          firstCol: firstCol
-        }));
-      },
-      enableResizing: true,
-      size: 200
-    }
-  };
-});
+export default ((firstCol, tableConfig) => ({
+  "mrt-row-expand": {
+    Header: props => /*#__PURE__*/_jsx(HeaderCell, {
+      ...props,
+      firstCol: firstCol,
+      tableConfig: tableConfig
+    }),
+    GroupedCell: props => /*#__PURE__*/_jsx(GroupedCell, {
+      ...props,
+      firstCol: firstCol
+    }),
+    enableResizing: true,
+    size: 200
+  }
+}));

package/es/components/Table/index.js

@@ -1,47 +1,44 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["data", "columns"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useMemo } from "react";
 import { useMaterialReactTable, MaterialReactTable } from "material-react-table";
 import { merge } from "lodash";
 import muiStyleOverrides from "./muiStyleOverrides";
 import getExpandColumnConfig from "./getExpandColumnConfig";
 import { PropTypes } from "prop-types";
-var Table = function Table(_ref) {
-  var data = _ref.data,
-    columns = _ref.columns,
-    tableConfig = _objectWithoutProperties(_ref, _excluded);
-  var otherConfig = {};
-  var columnVisibility = {};
-  var firstCol = useMemo(function () {
-    return columns[0];
-  }, [columns]);
+import { jsx as _jsx } from "react/jsx-runtime";
+const Table = _ref => {
+  let {
+    data,
+    columns,
+    ...tableConfig
+  } = _ref;
+  const otherConfig = {};
+  const columnVisibility = {};
+  const firstCol = useMemo(() => columns[0], [columns]);
   if (tableConfig.enableExpanding) {
     columnVisibility[firstCol.id] = false;
     columns[0].visibleInShowHideMenu = false;
     otherConfig.displayColumnDefOptions = getExpandColumnConfig(firstCol, tableConfig);
   }
-  var table = useMaterialReactTable(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    getSubRows: function getSubRows(row) {
-      return row.children;
-    }
-  }, muiStyleOverrides), otherConfig), tableConfig), {}, {
-    columns: columns,
-    data: data,
+  const table = useMaterialReactTable({
+    getSubRows: row => row.children,
+    ...muiStyleOverrides,
+    ...otherConfig,
+    ...tableConfig,
+    columns,
+    data,
     initialState: merge({
       density: "compact",
-      columnVisibility: columnVisibility
+      columnVisibility
     }, tableConfig.initialState || {})
-  }));
-  var customSetColumnVisibility = useCallback(function (columnVisibility) {
-    return _objectSpread(_objectSpread({}, columnVisibility), {}, _defineProperty({}, firstCol.id, false));
-  }, [firstCol]);
+  });
+  const customSetColumnVisibility = useCallback(columnVisibility => ({
+    ...columnVisibility,
+    [firstCol.id]: false
+  }), [firstCol]);
   if (tableConfig.enableExpanding) {
     table.setColumnVisibility = customSetColumnVisibility;
   }
-  return /*#__PURE__*/React.createElement(MaterialReactTable, {
+  return /*#__PURE__*/_jsx(MaterialReactTable, {
     table: table
   });
 };

package/es/components/Table/muiStyleOverrides.js

@@ -1,4 +1,4 @@
-var muiStyleOverrides = {
+const muiStyleOverrides = {
   muiBottomToolbarProps: {
     sx: {
       boxShadow: "none"
@@ -27,27 +27,29 @@ var muiStyleOverrides = {
       }
     }
   },
-  muiTableBodyRowProps: function muiTableBodyRowProps(_ref) {
-    var row = _ref.row,
-      table = _ref.table;
-    var borderBottomStyle = "solid";
+  muiTableBodyRowProps: _ref => {
+    let {
+      row,
+      table
+    } = _ref;
+    let borderBottomStyle = "solid";
     if (row.getIsExpanded()) {
       borderBottomStyle = "dashed";
     }
     if (!row.originalSubRows && table.options.enableExpanding) {
       var _row$getParentRow;
-      var subRows = (_row$getParentRow = row.getParentRow()) === null || _row$getParentRow === void 0 ? void 0 : _row$getParentRow.subRows;
+      const subRows = (_row$getParentRow = row.getParentRow()) === null || _row$getParentRow === void 0 ? void 0 : _row$getParentRow.subRows;
       if (!subRows) {
         borderBottomStyle = "none";
       } else {
-        var lastSubRowOfParent = subRows[subRows.length - 1];
+        const lastSubRowOfParent = subRows[subRows.length - 1];
         borderBottomStyle = lastSubRowOfParent.id === row.id ? "solid" : "none";
       }
     }
     return {
       sx: {
         "&:not(.Mui-TableBodyCell-DetailPanel) .MuiTableCell-root": {
-          borderBottomStyle: borderBottomStyle
+          borderBottomStyle
         }
       }
     };

package/es/components/Tabs/Tab.stories.js

@@ -2,58 +2,75 @@ import React from "react";
 import Box from "../Box";
 import { TabsContainer, Tab } from ".";
 import Popover from "../Popover";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Tabs/Tab",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      bg: "greyLightest",
-      p: "xl"
-    }, storyFn());
-  }],
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    bg: "greyLightest",
+    p: "xl",
+    children: storyFn()
+  })],
   component: Tab
 };
-export var activeTab = function activeTab() {
-  return /*#__PURE__*/React.createElement(TabsContainer, null, /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement("a", {
-    href: "#"
-  }, "Details")), /*#__PURE__*/React.createElement(Tab, {
-    active: true
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "#"
-  }, "Planning")));
-};
+export const activeTab = () => /*#__PURE__*/_jsxs(TabsContainer, {
+  children: [/*#__PURE__*/_jsx(Tab, {
+    children: /*#__PURE__*/_jsx("a", {
+      href: "#",
+      children: "Details"
+    })
+  }), /*#__PURE__*/_jsx(Tab, {
+    active: true,
+    children: /*#__PURE__*/_jsx("a", {
+      href: "#",
+      children: "Planning"
+    })
+  })]
+});
 activeTab.story = {
   name: "Active Tab"
 };
-export var withNotificationsTab = function withNotificationsTab() {
-  return /*#__PURE__*/React.createElement(TabsContainer, null, /*#__PURE__*/React.createElement(Tab, {
-    notification: "1"
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "#"
-  }, "Details")), /*#__PURE__*/React.createElement(Tab, {
-    notification: "7"
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "#"
-  }, "Planning")));
-};
+export const withNotificationsTab = () => /*#__PURE__*/_jsxs(TabsContainer, {
+  children: [/*#__PURE__*/_jsx(Tab, {
+    notification: "1",
+    children: /*#__PURE__*/_jsx("a", {
+      href: "#",
+      children: "Details"
+    })
+  }), /*#__PURE__*/_jsx(Tab, {
+    notification: "7",
+    children: /*#__PURE__*/_jsx("a", {
+      href: "#",
+      children: "Planning"
+    })
+  })]
+});
 activeTab.story = {
   name: "With Notifications Tab"
 };
-export var withPopoverTab = function withPopoverTab() {
-  return /*#__PURE__*/React.createElement(TabsContainer, null, /*#__PURE__*/React.createElement(Popover, {
+export const withPopoverTab = () => /*#__PURE__*/_jsxs(TabsContainer, {
+  children: [/*#__PURE__*/_jsx(Popover, {
     direction: "right",
     text: "Example with tooltip explaining tab",
-    width: "218px"
-  }, /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement("a", {
-    href: "#"
-  }, "Details"))), /*#__PURE__*/React.createElement(Popover, {
+    width: "218px",
+    children: /*#__PURE__*/_jsx(Tab, {
+      children: /*#__PURE__*/_jsx("a", {
+        href: "#",
+        children: "Details"
+      })
+    })
+  }), /*#__PURE__*/_jsx(Popover, {
     direction: "top",
     text: "Example with tooltip explaining tab",
-    width: "218px"
-  }, /*#__PURE__*/React.createElement(Tab, null, /*#__PURE__*/React.createElement("a", {
-    href: "#",
-    tabIndex: "-1"
-  }, "Additional information"))));
-};
+    width: "218px",
+    children: /*#__PURE__*/_jsx(Tab, {
+      children: /*#__PURE__*/_jsx("a", {
+        href: "#",
+        tabIndex: "-1",
+        children: "Additional information"
+      })
+    })
+  })]
+});
 withPopoverTab.story = {
   name: "With Popover Tab"
 };