@onewelcome/react-lib-components 8.1.2 → 8.3.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/dist/esm/src/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,11 @@
+import React, { ComponentPropsWithoutRef } from "react";
+import { DateRange } from "react-day-picker";
+import * as locales from "date-fns/locale";
+export interface Props extends ComponentPropsWithoutRef<any> {
+    onSelect: (date: Date | DateRange | undefined) => void;
+    mode: "single" | "range";
+    value: Date | DateRange | undefined;
+    required?: boolean;
+    locale?: keyof typeof locales;
+}
+export declare const DatePicker: ({ onSelect, value, required, mode, locale, ...rest }: Props) => React.JSX.Element;

package/dist/esm/src/components/DatePicker/DatePicker.test.d.ts

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

package/dist/esm/src/components/Form/Select/MultiSelect/MultiSelect.test.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { MultiSelectProps } from "../Select.interfaces";
 export declare const createMultiSelect: (params?: (defaultParams: MultiSelectProps) => MultiSelectProps) => {
     select: HTMLElement;
@@ -6,7 +7,7 @@ export declare const createMultiSelect: (params?: (defaultParams: MultiSelectPro
     dropdownWrapper: Element | null;
     container: HTMLElement;
     baseElement: HTMLElement;
-    debug: (baseElement?: import("react-dom/client").Container | (Element | Document) | Array<import("react-dom/client").Container | (Element | Document)>, maxLength?: number, options?: import("pretty-format").OptionsReceived) => void;
+    debug: (baseElement?: import("react-dom/client").Container | (Element | Document) | Array<import("react-dom/client").Container | (Element | Document)> | undefined, maxLength?: number | undefined, options?: import("pretty-format").OptionsReceived | undefined) => void;
     rerender: (ui: React.ReactNode) => void;
     unmount: () => void;
     asFragment: () => DocumentFragment;

package/dist/esm/src/components/Form/Select/SingleSelect/Select.test.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { SingleSelectProps } from "../Select.interfaces";
 export declare const defaultParams: SingleSelectProps;
 export declare const createSelect: (params?: (defaultParams: SingleSelectProps) => SingleSelectProps) => {
@@ -7,7 +8,7 @@ export declare const createSelect: (params?: (defaultParams: SingleSelectProps)
     dropdownWrapper: Element | null;
     container: HTMLElement;
     baseElement: HTMLElement;
-    debug: (baseElement?: import("react-dom/client").Container | (Element | Document) | Array<import("react-dom/client").Container | (Element | Document)>, maxLength?: number, options?: import("pretty-format").OptionsReceived) => void;
+    debug: (baseElement?: import("react-dom/client").Container | (Element | Document) | Array<import("react-dom/client").Container | (Element | Document)> | undefined, maxLength?: number | undefined, options?: import("pretty-format").OptionsReceived | undefined) => void;
     rerender: (ui: React.ReactNode) => void;
     unmount: () => void;
     asFragment: () => DocumentFragment;

package/dist/esm/src/index.d.ts

@@ -128,8 +128,12 @@ export type { Props as DataGridDrawerItemProps } from "./components/DataGrid/Dat
 export { DataGridCell } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
 export type { Props as DataGridCellProps } from "./components/DataGrid/DataGridBody/DataGridCell/DataGridCell";
 export { useFiltersReducer } from "./components/DataGrid/DataGridFilters/useFiltersReducer";
+/** Banner */
 export { Banner } from "./components/Notifications/Banner/Banner";
 export type { Props as BannerProps } from "./components/Notifications/Banner/Banner";
+/** DatePicker */
+export { DatePicker } from "./components/DatePicker/DatePicker";
+export type { Props as DatePickerProps } from "./components/DatePicker/DatePicker";
 /** Admin */
 export { MicrofrontendContainer } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";
 export type { Props as MicrofrontendContainerProps } from "./components/admin/layout/MicrofrontendContainer/MicrofrontendContainer";

package/dist/esm/src/index.esm.js

@@ -66,5 +66,6 @@ export { DataGridDrawerItem } from '../DataGrid/DataGridBody/DataGridDrawer/Data
 export { DataGridCell } from '../DataGrid/DataGridBody/DataGridCell/DataGridCell.esm.js';
 export { useFiltersReducer } from '../DataGrid/DataGridFilters/useFiltersReducer.esm.js';
 export { Banner } from '../Notifications/Banner/Banner.esm.js';
+export { DatePicker } from '../DatePicker/DatePicker.esm.js';
 export { MicrofrontendContainer } from '../admin/layout/MicrofrontendContainer/MicrofrontendContainer.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/esm/src/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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.3.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",
@@ -46,22 +46,23 @@
   },
   "peerDependencies": {
     "react": ">=16",
-    "react-dom": ">=16"
+    "react-dom": ">=16",
+    "react-day-picker": "^9.1.3"
   },
   "engines": {
     "node": ">=16"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@chromatic-com/storybook": "^1.6.0",
+    "@chromatic-com/storybook": "^1.6.1",
     "@mdx-js/react": "^3.0.1",
     "@onewelcome/eslint-config-shared-codestyle": "^9.2.3",
     "@onewelcome/storybook-addon-basestyling": "^2.0.0",
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-commonjs": "^26.0.3",
+    "@rollup/plugin-node-resolve": "^15.2.4",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-a11y": "^8.1.11",
@@ -77,60 +78,61 @@
     "@storybook/react": "^8.1.11",
     "@storybook/react-webpack5": "^8.1.11",
     "@storybook/theming": "^8.1.11",
-    "@testing-library/dom": "^10.3.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/dom": "^10.3.2",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@types/mdx": "^2.0.13",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "babel-loader": "^9.1.3",
-    "chromatic": "^11.5.4",
+    "chromatic": "^11.5.6",
     "css-loader": "^7.1.2",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-export-scope": "^2.4.0",
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-license-header": "^0.6.1",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react": "^7.34.4",
     "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",
     "jest-junit": "^16.0.0",
     "jest-sonar-reporter": "^2.0.0",
-    "lint-staged": "^15.2.7",
-    "mini-css-extract-plugin": "^2.9.0",
+    "lint-staged": "^15.2.10",
+    "mini-css-extract-plugin": "^2.9.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.47",
     "postcss-modules": "^6.0.0",
     "postcss-url": "^10.1.3",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
     "react-router-dom": "^6.24.1",
     "remark-gfm": "^4.0.0",
-    "rollup": "^4.18.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.18.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.77.6",
+    "sass": "1.77.8",
     "sass-loader": "^14.2.1",
-    "size-limit": "^11.1.4",
+    "size-limit": "^11.1.6",
     "storybook": "^8.1.11",
     "storybook-addon-mock": "^5.0.0",
     "storybook-addon-pseudo-states": "^3.1.1",
     "style-loader": "^4.0.0",
     "ts-jest": "^29.1.5",
     "tslib": "^2.6.3",
-    "typescript": "^5.5.3"
+    "typescript": "^5.5.4"
   }
 }

package/src/components/Button/BaseButton.module.scss

@@ -17,13 +17,16 @@
 @use "../../mixins.module.scss";
 
 .button {
-  @include mixins.buttonBase();
   position: relative;
 
   .content-hidden {
     visibility: hidden;
     display: flex;
   }
+
+  & {
+    @include mixins.buttonBase();
+  }
 }
 
 .spinner {

package/src/components/Button/IconButton.module.scss

@@ -32,27 +32,30 @@
 
   /** Sizes **/
   &.button-s {
+    width: 1.875rem;
+    height: 1.875rem;
+
     span {
       font-size: 0.75rem;
     }
-    width: 1.875rem;
-    height: 1.875rem;
   }
 
   &.button-m {
+    width: 2.5rem;
+    height: 2.5rem;
+
     span {
       font-size: 1rem;
     }
-    width: 2.5rem;
-    height: 2.5rem;
   }
 
   &.button-l {
+    width: 3.125rem;
+    height: 3.125rem;
+
     span {
       font-size: 1.375rem;
     }
-    width: 3.125rem;
-    height: 3.125rem;
   }
 
   &.fill {

package/src/components/ContextMenu/ContextMenuItem.module.scss

@@ -36,7 +36,6 @@
       outline: none;
 
       &::after {
-        @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
         content: "";
         position: absolute;
         top: 0;
@@ -44,6 +43,7 @@
         height: 100%;
         width: 100%;
         z-index: calc(variables.$popover-z-index + 1);
+        @include mixins.focusVisibleOutline($outlineOffset: 0, $selectors: null);
       }
     }
 
@@ -56,6 +56,8 @@
     }
 
     &.active {
+      color: var(--color-primary);
+
       &::before {
         content: "";
         position: absolute;
@@ -66,8 +68,6 @@
         border-bottom-right-radius: 0.125rem;
         border-left: 0.25rem solid var(--color-primary);
       }
-
-      color: var(--color-primary);
     }
   }
 }

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,16 +28,23 @@
     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);
   }
 
   .loading {
-    @include mixins.skeletonLoading();
     border-radius: 0.5rem;
     height: 1.25rem;
     margin: 0.625rem 0;
+
+    @include mixins.skeletonLoading();
   }
 }
 

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);
+    }
+  }
+}