@equinor/apollo-components 2.0.0 → 3.0.0

package/dist/index.d.ts

@@ -45,18 +45,6 @@ interface TableHeaderProps<T> {
 }
 declare function TableHeader<T>({ table, sticky }: TableHeaderProps<T>): JSX.Element;
 
-interface HeaderConfig {
-    sticky?: boolean;
-}
-interface FilterConfig {
-    enableTableCaption?: boolean;
-    totalRowCount?: number;
-    columnSelect?: boolean;
-    globalFilter?: boolean;
-    globalFilterPlaceholder?: string;
-    filterFromLeafRows?: boolean;
-    customActions?: <T>(table: Table<T>) => ReactNode;
-}
 interface TableRowWrapper<T> {
     (props: TableRowWrapperProps<T>): ReactElement;
 }
@@ -109,10 +97,10 @@ interface DataTableProps<T> {
     columns: ColumnDef<T, any>[];
     cellConfig?: CellConfig<T>;
     rowConfig?: RowConfig<T>;
-    headerConfig?: HeaderConfig;
     isLoading?: boolean;
     height?: string;
     width?: string;
+    stickyHeader?: boolean;
     /**
      * Defaults to `'auto'`.
      *
@@ -139,7 +127,10 @@ interface DataTableProps<T> {
     };
     globalFilter?: ControlledState<string>;
     columnVisibility?: ControlledState<VisibilityState>;
-    actionsRow?: {
+    /**
+     * Everything that has todo with the area (banner) over the table
+     */
+    bannerConfig?: {
         enableTableCaption?: boolean;
         totalRowCount?: number;
         enableColumnSelect?: boolean;
@@ -147,6 +138,11 @@ interface DataTableProps<T> {
         globalFilterPlaceholder?: string;
         filterFromLeafRows?: boolean;
         customActions?: <T>(table: Table<T>) => ReactNode;
+        /**
+         * Default 1rem
+         * Accepts any CSS padding value
+         */
+        padding?: string;
     };
     tableContainerProps?: HTMLPropsRef<HTMLDivElement>;
     infiniteScroll?: InfiniteScrollConfig;
@@ -179,4 +175,4 @@ declare type TypographyProps = {
 } & TypographyProps$1;
 declare const TypographyCustom: (props: TypographyProps) => JSX.Element;
 
-export { AppShell, AppSidebar, CellConfig, ChipsCell, ColumnSelect, DataTable, DataTableProps, DynamicCell, FilterConfig, HTMLPropsRef, HeaderConfig, HierarchyCell, InfiniteScrollConfig, RowConfig, RowSelectionMode, SelectColumnDef, SortConfig, StickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TruncateMode, TypographyCustom, capitalizeHeader, prependSelectColumn };
+export { AppShell, AppSidebar, CellConfig, ChipsCell, ColumnSelect, DataTable, DataTableProps, DynamicCell, HTMLPropsRef, HierarchyCell, InfiniteScrollConfig, RowConfig, RowSelectionMode, SelectColumnDef, SortConfig, StickyCell, TableHeader, TableLayout, TableRowWrapper, TableRowWrapperProps, TruncateMode, TypographyCustom, capitalizeHeader, prependSelectColumn };

package/dist/index.js

@@ -802,12 +802,12 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 
 // src/DataTable/components/DataTableHeader.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var DataTableHeaderWrapper = import_styled_components15.default.div`
+var TableBannerWrapper = import_styled_components15.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
-  padding: 1rem;
+  padding: ${(props) => props.padding || "1rem"};
 `;
 var FilterContainer = import_styled_components15.default.div`
   display: flex;
@@ -815,45 +815,47 @@ var FilterContainer = import_styled_components15.default.div`
   gap: 1rem;
   justify-content: flex-end;
 `;
-function ActionsHeaderRow({
+function TableBanner({
   table,
-  actionsRow,
+  bannerConfig,
   tableCaption,
   globalFilter
 }) {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(DataTableHeaderWrapper, {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(TableBannerWrapper, {
     className: "--table-caption",
+    padding: bannerConfig == null ? void 0 : bannerConfig.padding,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(FilterContainer, {
         className: "--filter-container-left",
         children: [
-          (actionsRow == null ? void 0 : actionsRow.enableTableCaption) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Typography, {
+          (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_eds_core_react15.Typography, {
             variant: "h3",
+            as: "h2",
             children: tableCaption
           }),
-          (_a = actionsRow == null ? void 0 : actionsRow.customActions) == null ? void 0 : _a.call(actionsRow, table)
+          (_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
         ]
       }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(FilterContainer, {
         className: "--filter-container-right",
         children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, {
           children: [
-            (actionsRow == null ? void 0 : actionsRow.enableGlobalFilterInput) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DebouncedInput, {
+            (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DebouncedInput, {
               value: globalFilter.state,
               icon: import_eds_icons7.search,
-              placeholder: actionsRow.globalFilterPlaceholder ?? "Search all columns",
+              placeholder: bannerConfig.globalFilterPlaceholder ?? "Search all columns",
               onChange: (value) => globalFilter.onChange(String(value))
             }),
-            (actionsRow == null ? void 0 : actionsRow.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColumnSelect, {
+            (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ColumnSelect, {
               table
             }),
-            (actionsRow == null ? void 0 : actionsRow.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", {
+            (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", {
               children: [
                 table.options.data.length.toLocaleString(),
                 " /",
                 " ",
-                actionsRow.totalRowCount.toLocaleString(),
+                bannerConfig.totalRowCount.toLocaleString(),
                 " rows"
               ]
             })
@@ -984,8 +986,8 @@ var DataTableWrapper = import_styled_components16.default.div`
   }
 `;
 function DataTable(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
-  const { columns, data, actionsRow, cellConfig, sorting } = props;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  const { columns, data, bannerConfig, cellConfig, sorting } = props;
   const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react5.useState)({});
   const [columnVisibility, setColumnVisibility] = [
     ((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
@@ -996,7 +998,7 @@ function DataTable(props) {
     ((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
     ((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
   ];
-  const shouldEnableGlobalFilter = ((_e = props.actionsRow) == null ? void 0 : _e.enableGlobalFilterInput) || Boolean(props.globalFilter);
+  const shouldEnableGlobalFilter = ((_e = props.bannerConfig) == null ? void 0 : _e.enableGlobalFilterInput) || Boolean(props.globalFilter);
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
@@ -1040,7 +1042,7 @@ function DataTable(props) {
     enableExpanding: Boolean(props.expansion),
     enableMultiRowSelection: ((_n = props.rowSelection) == null ? void 0 : _n.mode) === "multiple",
     enableSubRowSelection: ((_o = props.rowSelection) == null ? void 0 : _o.mode) !== "single",
-    filterFromLeafRows: actionsRow == null ? void 0 : actionsRow.filterFromLeafRows,
+    filterFromLeafRows: bannerConfig == null ? void 0 : bannerConfig.filterFromLeafRows,
     getFilteredRowModel: enableGlobalFilter((0, import_react_table3.getFilteredRowModel)()),
     getCoreRowModel: (0, import_react_table3.getCoreRowModel)(),
     getExpandedRowModel: (0, import_react_table3.getExpandedRowModel)(),
@@ -1070,9 +1072,9 @@ function DataTable(props) {
     width: props == null ? void 0 : props.width,
     tableLayout: props == null ? void 0 : props.tableLayout,
     children: [
-      props.actionsRow && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ActionsHeaderRow, {
+      props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TableBanner, {
         table,
-        actionsRow: props.actionsRow,
+        bannerConfig: props.bannerConfig,
         globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
         tableCaption: props.tableCaption
       }),
@@ -1096,14 +1098,14 @@ function DataTable(props) {
           rowConfig,
           cellConfig,
           isLoading,
-          stickyHeader: (_s = props.headerConfig) == null ? void 0 : _s.sticky
+          stickyHeader: props.stickyHeader
         }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BasicTable, {
           tableCaption: props.tableCaption,
           table,
           rowConfig,
           cellConfig,
           isLoading,
-          stickyHeader: (_t = props.headerConfig) == null ? void 0 : _t.sticky
+          stickyHeader: props.stickyHeader
         })
       })
     ]

package/dist/index.mjs

@@ -766,12 +766,12 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 
 // src/DataTable/components/DataTableHeader.tsx
 import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
-var DataTableHeaderWrapper = styled15.div`
+var TableBannerWrapper = styled15.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
-  padding: 1rem;
+  padding: ${(props) => props.padding || "1rem"};
 `;
 var FilterContainer = styled15.div`
   display: flex;
@@ -779,45 +779,47 @@ var FilterContainer = styled15.div`
   gap: 1rem;
   justify-content: flex-end;
 `;
-function ActionsHeaderRow({
+function TableBanner({
   table,
-  actionsRow,
+  bannerConfig,
   tableCaption,
   globalFilter
 }) {
   var _a;
-  return /* @__PURE__ */ jsxs8(DataTableHeaderWrapper, {
+  return /* @__PURE__ */ jsxs8(TableBannerWrapper, {
     className: "--table-caption",
+    padding: bannerConfig == null ? void 0 : bannerConfig.padding,
     children: [
       /* @__PURE__ */ jsxs8(FilterContainer, {
         className: "--filter-container-left",
         children: [
-          (actionsRow == null ? void 0 : actionsRow.enableTableCaption) && /* @__PURE__ */ jsx15(Typography2, {
+          (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx15(Typography2, {
             variant: "h3",
+            as: "h2",
             children: tableCaption
           }),
-          (_a = actionsRow == null ? void 0 : actionsRow.customActions) == null ? void 0 : _a.call(actionsRow, table)
+          (_a = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _a.call(bannerConfig, table)
         ]
       }),
       /* @__PURE__ */ jsx15(FilterContainer, {
         className: "--filter-container-right",
         children: /* @__PURE__ */ jsxs8(Fragment3, {
           children: [
-            (actionsRow == null ? void 0 : actionsRow.enableGlobalFilterInput) && /* @__PURE__ */ jsx15(DebouncedInput, {
+            (bannerConfig == null ? void 0 : bannerConfig.enableGlobalFilterInput) && /* @__PURE__ */ jsx15(DebouncedInput, {
               value: globalFilter.state,
               icon: search,
-              placeholder: actionsRow.globalFilterPlaceholder ?? "Search all columns",
+              placeholder: bannerConfig.globalFilterPlaceholder ?? "Search all columns",
               onChange: (value) => globalFilter.onChange(String(value))
             }),
-            (actionsRow == null ? void 0 : actionsRow.enableColumnSelect) && /* @__PURE__ */ jsx15(ColumnSelect, {
+            (bannerConfig == null ? void 0 : bannerConfig.enableColumnSelect) && /* @__PURE__ */ jsx15(ColumnSelect, {
               table
             }),
-            (actionsRow == null ? void 0 : actionsRow.totalRowCount) && /* @__PURE__ */ jsxs8("span", {
+            (bannerConfig == null ? void 0 : bannerConfig.totalRowCount) && /* @__PURE__ */ jsxs8("span", {
               children: [
                 table.options.data.length.toLocaleString(),
                 " /",
                 " ",
-                actionsRow.totalRowCount.toLocaleString(),
+                bannerConfig.totalRowCount.toLocaleString(),
                 " rows"
               ]
             })
@@ -948,8 +950,8 @@ var DataTableWrapper = styled16.div`
   }
 `;
 function DataTable(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
-  const { columns, data, actionsRow, cellConfig, sorting } = props;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  const { columns, data, bannerConfig, cellConfig, sorting } = props;
   const [internalColumnVisibility, setInternalColumnVisibility] = useState4({});
   const [columnVisibility, setColumnVisibility] = [
     ((_a = props.columnVisibility) == null ? void 0 : _a.state) ?? internalColumnVisibility,
@@ -960,7 +962,7 @@ function DataTable(props) {
     ((_c = props.globalFilter) == null ? void 0 : _c.state) ?? internalGlobalFilterState,
     ((_d = props.globalFilter) == null ? void 0 : _d.onChange) ?? setInternalGlobalFilterState
   ];
-  const shouldEnableGlobalFilter = ((_e = props.actionsRow) == null ? void 0 : _e.enableGlobalFilterInput) || Boolean(props.globalFilter);
+  const shouldEnableGlobalFilter = ((_e = props.bannerConfig) == null ? void 0 : _e.enableGlobalFilterInput) || Boolean(props.globalFilter);
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
@@ -1004,7 +1006,7 @@ function DataTable(props) {
     enableExpanding: Boolean(props.expansion),
     enableMultiRowSelection: ((_n = props.rowSelection) == null ? void 0 : _n.mode) === "multiple",
     enableSubRowSelection: ((_o = props.rowSelection) == null ? void 0 : _o.mode) !== "single",
-    filterFromLeafRows: actionsRow == null ? void 0 : actionsRow.filterFromLeafRows,
+    filterFromLeafRows: bannerConfig == null ? void 0 : bannerConfig.filterFromLeafRows,
     getFilteredRowModel: enableGlobalFilter(getFilteredRowModel()),
     getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
@@ -1034,9 +1036,9 @@ function DataTable(props) {
     width: props == null ? void 0 : props.width,
     tableLayout: props == null ? void 0 : props.tableLayout,
     children: [
-      props.actionsRow && /* @__PURE__ */ jsx18(ActionsHeaderRow, {
+      props.bannerConfig && /* @__PURE__ */ jsx18(TableBanner, {
         table,
-        actionsRow: props.actionsRow,
+        bannerConfig: props.bannerConfig,
         globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
         tableCaption: props.tableCaption
       }),
@@ -1060,14 +1062,14 @@ function DataTable(props) {
           rowConfig,
           cellConfig,
           isLoading,
-          stickyHeader: (_s = props.headerConfig) == null ? void 0 : _s.sticky
+          stickyHeader: props.stickyHeader
         }) : /* @__PURE__ */ jsx18(BasicTable, {
           tableCaption: props.tableCaption,
           table,
           rowConfig,
           cellConfig,
           isLoading,
-          stickyHeader: (_t = props.headerConfig) == null ? void 0 : _t.sticky
+          stickyHeader: props.stickyHeader
         })
       })
     ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",