@onewelcome/react-lib-components 8.1.2 → 8.2.0

package/dist/esm/src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.d.ts

@@ -34,6 +34,7 @@ export interface DataGridColumnMetadata {
     headline: string;
     operators?: string[];
     defaultValues?: string[];
+    disableAddNew?: boolean;
 }
 export interface PopoverTranslations {
     columnSelectLabel?: string;

package/dist/esm/src/components/DataGrid/DataGridHeader/DataGridHeader.d.ts

@@ -5,6 +5,7 @@ export interface Props extends ComponentPropsWithRef<"thead"> {
     initialSort?: Sort;
     onSort?: OnSortFunction;
     enableExpandableRow?: boolean;
+    enableNestedRows?: boolean;
     disableContextMenuColumn?: boolean;
     enableMultiSorting?: boolean;
     spacing?: React.CSSProperties;

package/package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "http://onewelcome.github.io/react-lib-components",
   "name": "@onewelcome/react-lib-components",
-  "version": "8.1.2",
+  "version": "8.2.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/cjs/src/index.cjs.js",
@@ -31,12 +31,12 @@
   },
   "scripts": {
     "analyze": "size-limit --why",
-    "build": "rm -rf dist && rollup -c --bundleConfigAsCjs",
+    "build": "rimraf dist && rollup -c --bundleConfigAsCjs",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes",
     "dev": "npm-run-all -p start test:watch storybook",
-    "lint": "eslint '**/*.{ts,tsx}'",
-    "prepare": "husky install && rollup -c --bundleConfigAsCjs",
+    "lint": "eslint \"**/*.{ts,tsx}\"",
+    "prepare": "husky && rollup -c --bundleConfigAsCjs",
     "size": "size-limit",
     "start": "rollup -c -w --bundleConfigAsCjs",
     "test": "jest",
@@ -102,7 +102,7 @@
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^9.0.11",
+    "husky": "^9.1.6",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -120,6 +120,7 @@
     "react-is": "^18.3.1",
     "react-router-dom": "^6.24.1",
     "remark-gfm": "^4.0.0",
+    "rimraf": "^6.0.1",
     "rollup": "^4.18.0",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.77.6",

package/src/components/DataGrid/DataGrid.tsx

@@ -52,6 +52,9 @@ export interface Props<T> extends Omit<ComponentPropsWithRef<"div">, "children">
     searchBtnProps?: ButtonProps;
     searchIconBtnProps?: ButtonProps;
   };
+  nestedRowConfig?: {
+    nestedItemsKey?: keyof T;
+  };
   emptyLabel?: string;
   paginationProps?: PaginationProps;
   disableContextMenuColumn?: boolean;
@@ -75,6 +78,7 @@ const DataGridInner = <T extends {}>(
     headers,
     actions = {},
     paginationProps,
+    nestedRowConfig,
     disableContextMenuColumn,
     enableExpandableRow,
     filters,
@@ -177,6 +181,7 @@ const DataGridInner = <T extends {}>(
             onSort={onSort}
             disableContextMenuColumn={disableContextMenuColumn}
             enableExpandableRow={enableExpandableRow}
+            enableNestedRows={!!nestedRowConfig}
             enableMultiSorting={enableMultiSorting}
             spacing={styleWithSpacing}
           />
@@ -185,6 +190,7 @@ const DataGridInner = <T extends {}>(
             headers={internalHeaders}
             isLoading={isLoading}
             disableContextMenuColumn={disableContextMenuColumn}
+            nestedRowConfig={nestedRowConfig}
             emptyLabel={emptyLabel}
             spacing={styleWithSpacing}
             searchValue={search?.initialSearchValue}

package/src/components/DataGrid/DataGridBody/DataGridBody.tsx

@@ -24,6 +24,9 @@ import { Typography } from "../../Typography/Typography";
 export interface Props<T> extends Omit<ComponentPropsWithRef<"tbody">, "children"> {
   children: ({ item, index }: { item: T; index: number }) => ReactElement;
   data?: T[];
+  nestedRowConfig?: {
+    nestedItemsKey?: keyof T;
+  };
   headers: HeaderCell[];
   isLoading?: boolean;
   disableContextMenuColumn?: boolean;
@@ -39,6 +42,7 @@ const DataGridBodyInner = <T extends {}>(
     children,
     data,
     headers,
+    nestedRowConfig,
     isLoading,
     disableContextMenuColumn,
     emptyLabel,
@@ -82,7 +86,14 @@ const DataGridBodyInner = <T extends {}>(
         searchValue: searchValue,
         headers,
         spacing,
-        disableContextMenuColumn
+        item,
+        disableContextMenuColumn,
+        nestedRowProps: {
+          rowTemplate: children,
+          enableNestedRow: !!nestedRowConfig,
+          nestedItemsKey: nestedRowConfig?.nestedItemsKey,
+          isLastChild: index + 1 === data.length
+        }
       });
     });
   };

package/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.module.scss

@@ -28,6 +28,12 @@
     padding-right: 1rem;
   }
 
+  .content-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
   .text {
     font-size: var(--font-size-data-grid);
     line-height: var(--data-grid-line-height);

package/src/components/DataGrid/DataGridBody/DataGridCell/DataGridCell.tsx

@@ -25,6 +25,7 @@ import classes from "./DataGridCell.module.scss";
 
 export interface Props extends ComponentPropsWithRef<"td"> {
   children?: ReactElement | string | number;
+  prefixElement?: ReactElement;
   isLoading?: boolean;
   spacing?: React.CSSProperties;
   searchValue?: string;
@@ -39,6 +40,7 @@ const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Prop
     className,
     isLoading,
     spacing,
+    prefixElement,
     searchValue,
     cellIndex,
     columnLength,
@@ -91,11 +93,34 @@ const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Prop
       style={{ ...rest.style, ...cellStyle }}
       className={`${classes["cell"]} ${className ?? ""}`}
     >
-      {isLoading && <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>}
-      {!isLoading && (
-        <Typography className={classes["text"]} variant="body" tag="span">
-          {renderContent()}
-        </Typography>
+      {prefixElement ? (
+        <div className={classes["content-wrapper"]}>
+          {prefixElement}
+          {isLoading && (
+            <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>
+          )}
+          {!isLoading && (
+            <Typography
+              className={classes["text"]}
+              variant="body"
+              tag="span"
+              spacing={{ marginBottom: 0 }}
+            >
+              {renderContent()}
+            </Typography>
+          )}
+        </div>
+      ) : (
+        <>
+          {isLoading && (
+            <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>
+          )}
+          {!isLoading && (
+            <Typography className={classes["text"]} variant="body" tag="span">
+              {renderContent()}
+            </Typography>
+          )}
+        </>
       )}
     </td>
   );

package/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.module.scss

@@ -13,6 +13,7 @@
  *    See the License for the specific language governing permissions and
  *    limitations under the License.
  */
+$nesting-limit: 6;
 
 .row {
   position: relative;
@@ -22,24 +23,45 @@
     background-color: var(--data-grid-row-hover-background-color);
   }
 
-  @mixin borderAfter {
+  @mixin borderAfter($i, $no-offset: false) {
     content: "";
     position: absolute;
-    width: 100%;
-    left: 0;
+
+    @if $no-offset {
+      width: 100%;
+      left: 0;
+    } @else if $i > 0 {
+      width: calc(100% - calc(3.0625rem + $i * 4.125rem));
+      left: calc(3.0625rem + $i * 4.125rem);
+    } @else {
+      width: calc(100% - 3.0625rem);
+      left: 3.0625rem;
+    }
     bottom: 0;
     border-bottom: 1px solid var(--light-grey-border);
   }
 
+  @mixin border-x {
+    @for $i from 0 through $nesting-limit {
+      &.border-#{$i} {
+        &:not(:last-child)::after {
+          @include borderAfter($i);
+        }
+      }
+    }
+  }
+
+  @include border-x();
+
   &.border {
     &:not(:last-child)::after {
-      @include borderAfter();
+      @include borderAfter(0, true);
     }
   }
 
   &.border-drawer {
     &:not(:last-child):not(:nth-last-child(2))::after {
-      @include borderAfter();
+      @include borderAfter(0, true);
     }
   }
 }
@@ -47,3 +69,74 @@
 .expand-button-cell {
   padding: 0;
 }
+
+@mixin offset-left {
+  @for $i from 0 through $nesting-limit {
+    &.offset-left-#{$i} {
+      left: $i * 4.125rem;
+    }
+  }
+}
+
+.connector {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2.875rem;
+  height: 3.25rem;
+
+  @include offset-left();
+
+  &.vertical {
+    &::before {
+      position: absolute;
+      content: "";
+      left: 50%;
+      height: 100%;
+      width: 0.0625rem;
+      background-color: var(--color-blue-grey200);
+    }
+  }
+
+  &.t-shape {
+    &::before {
+      position: absolute;
+      content: "";
+      left: 50%;
+      height: 3.25rem;
+      width: 0.0625rem;
+      background-color: var(--color-blue-grey200);
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      top: 50%;
+      left: 50%;
+      height: 0.0625rem;
+      width: 100%;
+      background-color: var(--color-blue-grey200);
+    }
+  }
+
+  &.line {
+    &::before {
+      position: absolute;
+      content: "";
+      left: 50%;
+      height: 50%;
+      width: 1px;
+      background-color: var(--color-blue-grey200);
+    }
+
+    &::after {
+      position: absolute;
+      content: "";
+      top: 50%;
+      left: 50%;
+      height: 1px;
+      width: 100%;
+      background-color: var(--color-blue-grey200);
+    }
+  }
+}

package/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, useState, Fragment, ForwardRefRenderFunction } from "react";
+import React, { ComponentPropsWithRef, useState, Fragment, Ref, ReactElement } from "react";
 import { HeaderCell } from "../../datagrid.interfaces";
 import classes from "./DataGridRow.module.scss";
 import { IconButton } from "../../../Button/IconButton";
@@ -22,13 +22,22 @@ import { Icon, Icons } from "../../../Icon/Icon";
 import { DataGridCell } from "../DataGridCell/DataGridCell";
 import { DataGridDrawer } from "../DataGridDrawer/DataGridDrawer";
 import { generateID } from "../../../../util/helper";
+import { useNestedRow } from "./useNestedRow";
 
-export interface Props extends ComponentPropsWithRef<"tr"> {
+export interface Props<T> extends ComponentPropsWithRef<"tr"> {
+  item?: T;
   headers?: HeaderCell[];
   isLoading?: boolean;
   spacing?: React.CSSProperties;
   searchValue?: string;
   disableContextMenuColumn?: boolean;
+  nestedRowProps?: {
+    rowTemplate?: ({ item, index }: { item: T; index: number }) => ReactElement;
+    indentationLevel?: number;
+    indentationLevels?: { level: number; isLastChild: boolean }[];
+    enableNestedRow?: boolean;
+    nestedItemsKey?: keyof T;
+  };
   expandableRowProps?: {
     enableExpandableRow: boolean;
     expandableRowContent: React.ReactNode;
@@ -38,8 +47,9 @@ export interface Props extends ComponentPropsWithRef<"tr"> {
   };
 }
 
-const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props> = (
+const DataGridRowComponent = <T,>(
   {
+    item,
     children,
     className,
     headers,
@@ -48,9 +58,10 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
     spacing,
     expandableRowProps,
     disableContextMenuColumn,
+    nestedRowProps,
     ...rest
-  },
-  ref
+  }: Props<T>,
+  ref: Ref<HTMLTableRowElement>
 ) => {
   const {
     enableExpandableRow = false,
@@ -59,15 +70,73 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
     drawerId = `ID-${generateID()}`,
     expandableRowContent
   } = expandableRowProps || {};
+  const {
+    indentationLevels,
+    indentationLevel = 0,
+    nestedItemsKey,
+    enableNestedRow,
+    rowTemplate
+  } = nestedRowProps || {};
   const [isRowExpanded, setIsRowExpanded] = useState(false);
+  const { renderNestedRowConnectors, renderNestedRow, getNestedChildSpacing, hasNestedChildren } =
+    useNestedRow({
+      indentationLevels,
+      indentationLevel,
+      item,
+      nestedItemsKey,
+      rowTemplate,
+      isRowExpanded,
+      enableNestedRow,
+      rowProps: {
+        searchValue,
+        headers,
+        spacing,
+        disableContextMenuColumn
+      }
+    });
+
+  const classNames = [classes["row"]];
+  const rowBorderClass = enableNestedRow
+    ? classes[`border-${indentationLevel}`]
+    : classes[`border`];
+
+  className && classNames.push(className);
+  enableExpandableRow
+    ? !isRowExpanded && classNames.push(classes["border-drawer"])
+    : classNames.push(rowBorderClass);
+  isLoading && classNames.push(classes["loading"]);
+
+  const getPrefixButton = (hasNestedChildren: boolean) =>
+    hasNestedChildren ? (
+      <IconButton
+        id={expandButtonId}
+        title={expandButtonTitle}
+        aria-expanded={isRowExpanded}
+        onClick={() => setIsRowExpanded(!isRowExpanded)}
+      >
+        <Icon size="0.75rem" icon={isRowExpanded ? Icons.ChevronUp : Icons.ChevronDown} />
+      </IconButton>
+    ) : null;
+
   const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {
+    const childSpacing = enableNestedRow ? getNestedChildSpacing(spacing, index) : spacing;
+
+    const prefixElement =
+      enableNestedRow && index === 0 ? (
+        <>
+          {getPrefixButton(!!hasNestedChildren)}
+          {renderNestedRowConnectors()}
+        </>
+      ) : null;
+
     if (child) {
       const cellWithSpacing = React.cloneElement(child, {
         searchValue,
-        spacing: spacing,
+        spacing: childSpacing,
         cellIndex: index,
         columnLength: headers?.length,
-        disableContextMenuColumn
+        disableContextMenuColumn,
+        prefixElement
       });
 
       const visible = headers && headers.length > index ? !headers[index].hidden : true;
@@ -76,13 +145,6 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
     return null;
   });
 
-  const classNames = [classes["row"]];
-  className && classNames.push(className);
-  enableExpandableRow
-    ? !isRowExpanded && classNames.push(classes["border-drawer"])
-    : classNames.push(classes["border"]);
-  isLoading && classNames.push(classes["loading"]);
-
   return (
     <Fragment>
       <tr {...rest} ref={ref} className={classNames.join(" ")}>
@@ -90,7 +152,9 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
           <DataGridCell
             className={classes["expand-button-cell"]}
             onClick={() => setIsRowExpanded(!isRowExpanded)}
-            style={{ width: "1px" }}
+            style={{
+              width: "1px"
+            }}
           >
             <IconButton
               id={expandButtonId}
@@ -118,8 +182,11 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
           </td>
         </tr>
       )}
+      {enableNestedRow && renderNestedRow()}
     </Fragment>
   );
 };
 
-export const DataGridRow = React.forwardRef(DataGridRowComponent);
+export const DataGridRow = React.forwardRef(DataGridRowComponent) as <T extends {}>(
+  p: Props<T> & { ref?: Ref<HTMLTableRowElement> }
+) => ReactElement;

package/src/components/DataGrid/DataGridBody/DataGridRow/useNestedRow.tsx

@@ -0,0 +1,143 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ReactElement } from "react";
+import classes from "./DataGridRow.module.scss";
+import { HeaderCell } from "../../datagrid.interfaces";
+
+export interface UseNestedRowProps<T> {
+  indentationLevels?: { level: number; isLastChild: boolean }[];
+  item?: T;
+  nestedItemsKey?: keyof T;
+  rowTemplate?: ({ item, index }: { item: T; index: number }) => ReactElement;
+  isRowExpanded?: boolean;
+  indentationLevel: number;
+  enableNestedRow?: boolean;
+  rowProps: {
+    searchValue?: string;
+    headers?: HeaderCell[];
+    spacing?: React.CSSProperties;
+    disableContextMenuColumn?: boolean;
+  };
+}
+
+export const useNestedRow = <T,>({
+  indentationLevels,
+  item,
+  nestedItemsKey,
+  rowTemplate,
+  isRowExpanded,
+  indentationLevel,
+  enableNestedRow,
+  rowProps: { searchValue, headers, spacing, disableContextMenuColumn }
+}: UseNestedRowProps<T>) => {
+  const hasNestedChildren = item && nestedItemsKey && item[nestedItemsKey];
+
+  const getNestedChildSpacing = (spacing: React.CSSProperties | undefined, index: number) => {
+    const expandButtonWidth = 46;
+    const nestedChildOffset = !hasNestedChildren ? expandButtonWidth : 0;
+
+    const connectorWidth = 68;
+    const nestedChildIndentation = `${nestedChildOffset + indentationLevel * connectorWidth}`;
+
+    const gap = 4;
+    const notIndentedWithNoChildrenOffset =
+      indentationLevel === 0 && !hasNestedChildren ? expandButtonWidth + gap : gap;
+    const childIndentation = `${indentationLevel ? nestedChildIndentation : notIndentedWithNoChildrenOffset}px`;
+
+    if (spacing) {
+      return {
+        ...spacing,
+        paddingLeft: index === 0 ? childIndentation : spacing.paddingLeft
+      };
+    }
+    return {
+      paddingLeft: index === 0 ? childIndentation : ""
+    };
+  };
+
+  const renderNestedRowConnectors = () => {
+    if (indentationLevels) {
+      return indentationLevels.map(({ level, isLastChild }) =>
+        renderNestedRowConnector(level, isLastChild, indentationLevels.length)
+      );
+    }
+
+    return null;
+  };
+
+  const renderNestedRowConnector = (level: number, isLastChild: boolean, levelsLength: number) => {
+    const offsetLeftClass = classes[`offset-left-${level - 1}`];
+
+    if (level === levelsLength) {
+      const variant = isLastChild ? "line" : "t-shape";
+
+      return (
+        <div
+          key={level}
+          data-testid="dataGridRowConnector"
+          className={`${classes["connector"]} ${classes[variant]} ${offsetLeftClass}`}
+        />
+      );
+    } else if (!isLastChild) {
+      return (
+        <div
+          key={level}
+          data-testid="dataGridRowConnector"
+          className={`${classes["connector"]} ${classes["vertical"]}  ${offsetLeftClass}`}
+        />
+      );
+    }
+    return null;
+  };
+
+  const renderNestedRow = () => {
+    if (rowTemplate && item && nestedItemsKey && item[nestedItemsKey] && isRowExpanded) {
+      const nestedItemsArray: T[] = item[nestedItemsKey] as T[];
+      const getIndentationLevel = (index: number) => ({
+        level: indentationLevel + 1,
+        isLastChild: index + 1 === nestedItemsArray.length
+      });
+
+      return nestedItemsArray.map((item, index) => {
+        return React.cloneElement(rowTemplate({ item, index }), {
+          searchValue,
+          headers,
+          spacing,
+          disableContextMenuColumn,
+          item,
+          nestedRowProps: {
+            rowTemplate,
+            enableNestedRow,
+            nestedItemsKey,
+            indentationLevel: indentationLevel + 1,
+            indentationLevels:
+              indentationLevels && nestedItemsArray
+                ? [...indentationLevels, getIndentationLevel(index)]
+                : [getIndentationLevel(index)]
+          }
+        });
+      });
+    }
+  };
+
+  return {
+    renderNestedRow,
+    renderNestedRowConnectors,
+    getNestedChildSpacing,
+    hasNestedChildren
+  };
+};

package/src/components/DataGrid/DataGridFilters/DataGridFilterPopover.tsx

@@ -87,6 +87,9 @@ export const DataGridFilterPopover = ({
     }
   }, [isOpen]);
 
+  const columnMetadata = columnsMetadata.find(({ name }) => name === column);
+  const disableAddNew = columnMetadata?.disableAddNew;
+
   return (
     <Popover
       tabIndex={-1}
@@ -153,16 +156,18 @@ export const DataGridFilterPopover = ({
               )
             }
             selectProps={{
-              addNew: {
-                label: addNewValueLabel,
-                onAddNew: value => {
-                  if (value) {
-                    setValues(prev => [...prev, value]);
-                    setPickedValues(prev => [...prev, value]);
-                  }
-                },
-                btnProps: { title: addNewValueButtonTitle, type: "button" }
-              },
+              addNew: disableAddNew
+                ? undefined
+                : {
+                    label: addNewValueLabel,
+                    onAddNew: value => {
+                      if (value) {
+                        setValues(prev => [...prev, value]);
+                        setPickedValues(prev => [...prev, value]);
+                      }
+                    },
+                    btnProps: { title: addNewValueButtonTitle, type: "button" }
+                  },
               search: {
                 enabled: true,
                 renderThreshold: 0

package/src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.ts

@@ -57,6 +57,7 @@ export interface DataGridColumnMetadata {
   headline: string;
   operators?: string[];
   defaultValues?: string[];
+  disableAddNew?: boolean;
 }
 
 export interface PopoverTranslations {