@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.1

package/src/DataGrid/DataGridHeader/DataGridHeader.test.tsx

@@ -1,276 +0,0 @@
-/*
- * 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, { useEffect, useRef } from "react";
-import { DataGridHeader, Props } from "./DataGridHeader";
-import { getByRole, render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  headers: [
-    { name: "firstName", headline: "First name", align: "center" },
-    { name: "lastName", headline: "Last name", align: "right" }
-  ]
-};
-
-const createDataGridHeader = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const container = document.createElement("table");
-  const queries = render(<DataGridHeader {...parameters} data-testid="dataGridHeader" />, {
-    container
-  });
-  const dataGridHeader = queries.getByTestId("dataGridHeader");
-  return {
-    ...queries,
-    dataGridHeader
-  };
-};
-
-describe("DataGridHeader should render", () => {
-  it("renders without crashing", () => {
-    const { dataGridHeader, getAllByRole, getByRole } = createDataGridHeader();
-
-    expect(dataGridHeader).toBeDefined();
-    expect(getAllByRole("columnheader")).toHaveLength(2);
-    expect(getByRole("cell")).toBeDefined(); //context-menu empty cell
-
-    const headerCells = dataGridHeader.querySelectorAll("th");
-
-    expect(headerCells).toHaveLength(2);
-    expect(headerCells[0]).toHaveStyle({ textAlign: "center" });
-    expect(headerCells[1]).toHaveStyle({ textAlign: "right" });
-
-    expect(dataGridHeader.querySelectorAll("[data-icon]")).toHaveLength(0);
-  });
-
-  it("renders without hidden cell", () => {
-    const { dataGridHeader, getByRole } = createDataGridHeader(params => ({
-      ...params,
-      headers: [...params.headers].map((header, idx) => ({ ...header, hidden: idx === 1 }))
-    }));
-
-    expect(dataGridHeader).toBeDefined();
-    expect(getByRole("columnheader")).toHaveTextContent(defaultParams.headers[0].headline);
-    expect(getByRole("cell")).toBeDefined(); //context-menu empty cell
-
-    expect(dataGridHeader.querySelectorAll("[data-icon]")).toHaveLength(0);
-  });
-
-  it("renders without contenxt-menu empty cell", () => {
-    const { dataGridHeader, getAllByRole, queryByRole } = createDataGridHeader(params => ({
-      ...params,
-      disableContextMenuColumn: true
-    }));
-
-    expect(dataGridHeader).toBeDefined();
-    expect(getAllByRole("columnheader")).toHaveLength(2);
-    expect(queryByRole("cell")).toBeNull(); //context-menu empty cell
-  });
-
-  it("renders headers cells without sorting indicators even when initialSort is provided", () => {
-    const { dataGridHeader } = createDataGridHeader(params => ({
-      ...params,
-      initialSort: [{ name: params.headers[0].name, direction: "ASC" }]
-    }));
-
-    expect(dataGridHeader.querySelectorAll("[data-icon]")).toHaveLength(0);
-  });
-
-  it("renders headers cells with sorting indicators", () => {
-    const onSort = jest.fn();
-    const { dataGridHeader } = createDataGridHeader(params => ({
-      ...params,
-      onSort
-    }));
-
-    const sortingIcons = dataGridHeader.querySelectorAll("[data-icon]");
-    expect(sortingIcons).toHaveLength(4);
-    sortingIcons.forEach(icon => expect(icon).not.toHaveClass("hidden"));
-  });
-
-  it("renders headers cells with sorting indicators when initialSort provided with direction ASC", () => {
-    const onSort = jest.fn();
-    const { dataGridHeader, getAllByRole } = createDataGridHeader(params => ({
-      ...params,
-      initialSort: [{ name: params.headers[0].name, direction: "ASC" }],
-      onSort
-    }));
-
-    expect(dataGridHeader.querySelectorAll("[data-icon]:not(.hidden)")).toHaveLength(3);
-    const [firstNameCell, lastNameCell] = getAllByRole("columnheader");
-    expect(firstNameCell).toHaveAttribute("aria-sort", "ascending");
-    expect(lastNameCell).not.toHaveAttribute("aria-sort");
-  });
-
-  it("renders headers cells with sorting indicators when initialSort provided with direction DESC", () => {
-    const onSort = jest.fn();
-    const { dataGridHeader, getAllByRole } = createDataGridHeader(params => ({
-      ...params,
-      initialSort: [{ name: params.headers[1].name, direction: "DESC" }],
-      onSort
-    }));
-
-    expect(dataGridHeader.querySelectorAll("[data-icon]:not(.hidden)")).toHaveLength(3);
-    const [firstNameCell, lastNameCell] = getAllByRole("columnheader");
-    expect(firstNameCell).not.toHaveAttribute("aria-sort");
-    expect(lastNameCell).toHaveAttribute("aria-sort", "descending");
-  });
-});
-
-describe("DataGridHeader should be interactive", () => {
-  it("clicking on cell call onSort callback", () => {
-    const onSortHandler = jest.fn();
-    const { getAllByRole } = createDataGridHeader(params => ({
-      ...params,
-      onSort: onSortHandler
-    }));
-
-    const [firstNameCell, lastNameCell] = getAllByRole("columnheader");
-    userEvent.click(getByRole(firstNameCell, "button"));
-
-    expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[0].name, direction: "ASC" }
-    ]);
-    expect(firstNameCell).toHaveAttribute("aria-sort", "ascending");
-    expect(lastNameCell).not.toHaveAttribute("aria-sort");
-  });
-
-  it("clicking on multiple cells call onSort callback with one column selected when single-sorting is enabled", () => {
-    const onSortHandler = jest.fn();
-    const { getAllByRole } = createDataGridHeader(params => ({
-      ...params,
-      onSort: onSortHandler
-    }));
-
-    const [firstNameCell, lastNameCell] = getAllByRole("columnheader");
-
-    userEvent.click(getByRole(firstNameCell, "button"));
-    userEvent.click(getByRole(lastNameCell, "button"));
-    expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[0].name, direction: "ASC" }
-    ]);
-    expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[1].name, direction: "ASC" }
-    ]);
-    expect(firstNameCell).not.toHaveAttribute("aria-sort");
-    expect(lastNameCell).toHaveAttribute("aria-sort", "ascending");
-
-    userEvent.click(getByRole(lastNameCell, "button"));
-    expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[1].name, direction: "DESC" }
-    ]);
-    expect(firstNameCell).not.toHaveAttribute("aria-sort");
-    expect(lastNameCell).toHaveAttribute("aria-sort", "descending");
-
-    userEvent.click(getByRole(firstNameCell, "button"));
-    expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[0].name, direction: "ASC" }
-    ]);
-    expect(firstNameCell).toHaveAttribute("aria-sort", "ascending");
-    expect(lastNameCell).not.toHaveAttribute("aria-sort");
-
-    userEvent.click(getByRole(firstNameCell, "button"));
-    expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[1].name, direction: "DESC" }
-    ]);
-    expect(firstNameCell).toHaveAttribute("aria-sort", "descending");
-    expect(lastNameCell).not.toHaveAttribute("aria-sort");
-
-    userEvent.click(getByRole(firstNameCell, "button"));
-    expect(onSortHandler).toBeCalledWith([]);
-    expect(firstNameCell).not.toHaveAttribute("aria-sort");
-    expect(lastNameCell).not.toHaveAttribute("aria-sort");
-  });
-
-  it("clicking on multiple cells call onSort callback with multiple columns selected when multi-sorting is enabled", () => {
-    const onSortHandler = jest.fn();
-    const { getAllByRole } = createDataGridHeader(params => ({
-      ...params,
-      enableMultiSorting: true,
-      onSort: onSortHandler
-    }));
-
-    const [firstNameCell, lastNameCell] = getAllByRole("columnheader");
-
-    userEvent.click(getByRole(firstNameCell, "button"));
-    userEvent.click(getByRole(lastNameCell, "button"));
-    expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[0].name, direction: "ASC" }
-    ]);
-    expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[1].name, direction: "ASC" },
-      { name: defaultParams.headers[0].name, direction: "ASC" }
-    ]);
-    expect(firstNameCell).toHaveAttribute("aria-sort", "ascending");
-    expect(lastNameCell).toHaveAttribute("aria-sort", "ascending");
-
-    userEvent.click(getByRole(lastNameCell, "button"));
-    expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[1].name, direction: "DESC" },
-      { name: defaultParams.headers[0].name, direction: "ASC" }
-    ]);
-    expect(firstNameCell).toHaveAttribute("aria-sort", "ascending");
-    expect(lastNameCell).toHaveAttribute("aria-sort", "descending");
-
-    userEvent.click(getByRole(firstNameCell, "button"));
-    expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[0].name, direction: "DESC" },
-      { name: defaultParams.headers[1].name, direction: "DESC" }
-    ]);
-    expect(firstNameCell).toHaveAttribute("aria-sort", "descending");
-    expect(lastNameCell).toHaveAttribute("aria-sort", "descending");
-
-    userEvent.click(getByRole(firstNameCell, "button"));
-    expect(onSortHandler).toBeCalledWith([
-      { name: defaultParams.headers[1].name, direction: "DESC" }
-    ]);
-    expect(firstNameCell).not.toHaveAttribute("aria-sort");
-    expect(lastNameCell).toHaveAttribute("aria-sort", "descending");
-
-    userEvent.click(getByRole(lastNameCell, "button"));
-    expect(onSortHandler).toBeCalledWith([]);
-    expect(firstNameCell).not.toHaveAttribute("aria-sort");
-    expect(lastNameCell).not.toHaveAttribute("aria-sort");
-  });
-});
-
-describe("ref should work", () => {
-  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
-    const ExampleComponent = ({
-      propagateRef
-    }: {
-      propagateRef: (ref: React.RefObject<HTMLElement>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        propagateRef(ref);
-      }, [ref]);
-
-      return <DataGridHeader {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    const container = document.createElement("table");
-    render(<ExampleComponent propagateRef={refCheck} />, { container });
-  });
-});

package/src/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -1,121 +0,0 @@
-/*
- * 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, { ForwardRefRenderFunction, ComponentPropsWithRef, useEffect, useState } from "react";
-import { ColumnName, Direction, HeaderCell, OnSortFunction, Sort } from "../datagrid.interfaces";
-import { DataGridHeaderCell } from "./DataGridHeaderCell";
-import classes from "./DataGridHeader.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"thead"> {
-  headers: HeaderCell[];
-  initialSort?: Sort;
-  onSort?: OnSortFunction;
-  disableContextMenuColumn?: boolean;
-  enableMultiSorting?: boolean;
-  spacing?: React.CSSProperties;
-}
-
-const sortingStates = [undefined, "ASC", "DESC"] as (Direction | undefined)[];
-
-const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement, Props> = (
-  {
-    initialSort,
-    onSort,
-    headers,
-    disableContextMenuColumn,
-    enableMultiSorting,
-    spacing,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const [sortList, setSortList] = useState(initialSort || []);
-
-  useEffect(() => {
-    setSortList(initialSort || []);
-  }, [initialSort]);
-
-  const calculateNextSortState = (direction?: Direction) => {
-    const currentDirectionIdx = sortingStates.findIndex(item => item === direction);
-    return sortingStates[currentDirectionIdx + (1 % sortingStates.length)];
-  };
-
-  /**
-   * The sortList contains sorting columns objects. The order of those objects determinates priorities of sorting.
-   * Last modified sorting column has the highest priority.
-   */
-  const updateSortList = (name: ColumnName): Sort => {
-    const current = sortList.find(item => item.name === name);
-    const restSortList = enableMultiSorting ? sortList.filter(item => item.name !== name) : [];
-    const newSortDirection = calculateNextSortState(current?.direction);
-    return newSortDirection
-      ? [{ name, direction: newSortDirection }, ...restSortList]
-      : restSortList;
-  };
-
-  const wrapOnSort = (name: ColumnName) => {
-    const newSort = updateSortList(name);
-    onSort && onSort(newSort);
-    setSortList(newSort);
-  };
-
-  const headerCells = headers.map((header, index) => {
-    if (header.hidden) {
-      return null;
-    }
-
-    let headerStyle: React.CSSProperties = {
-      textAlign: header.align || "left"
-    };
-
-    if (index === 0) {
-      headerStyle.paddingLeft = spacing?.paddingLeft;
-    }
-    if (index === headers.length - 1 && disableContextMenuColumn) {
-      headerStyle.paddingRight = spacing?.paddingRight;
-    }
-
-    const sort = sortList.find(item => item.name === header.name);
-    return (
-      <DataGridHeaderCell
-        key={header.name}
-        name={header.name}
-        headline={header.headline}
-        disableSorting={header.disableSorting || !onSort}
-        onSort={wrapOnSort}
-        activeSortDirection={sort?.direction}
-        style={headerStyle}
-      />
-    );
-  });
-
-  return (
-    <thead {...rest} ref={ref} className={classes["thead"]}>
-      <tr className={classes["row"]}>
-        {headerCells}
-        {!disableContextMenuColumn && (
-          <td
-            style={{ paddingRight: spacing?.paddingRight }}
-            aria-label="context menu"
-            className={classes["context-menu"]}
-          ></td>
-        )}
-      </tr>
-    </thead>
-  );
-};
-
-export const DataGridHeader = React.forwardRef(DataGridHeaderComponent);

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.test.tsx

@@ -1,144 +0,0 @@
-/*
- * 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, { useEffect, useRef } from "react";
-import { DataGridHeaderCell, Props } from "./DataGridHeaderCell";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = { name: "name-123", headline: "Test" };
-
-const createDataGridHeaderCell = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const container = document.createElement("tr");
-  const queries = render(<DataGridHeaderCell {...parameters} data-testid="dataGridHeaderCell" />, {
-    container
-  });
-  const dataGridHeaderCell = queries.getByTestId("dataGridHeaderCell");
-
-  return {
-    ...queries,
-    dataGridHeaderCell
-  };
-};
-
-describe("DataGridHeaderCell should render", () => {
-  it("renders without crashing", () => {
-    const { dataGridHeaderCell, queryByRole } = createDataGridHeaderCell();
-
-    expect(dataGridHeaderCell).toBeDefined();
-    expect(dataGridHeaderCell).toHaveTextContent(defaultParams.headline);
-    expect(queryByRole("button")).toBeDefined();
-    expect(dataGridHeaderCell.querySelectorAll("[data-icon]")).toHaveLength(2);
-  });
-
-  it("renders without sorting indicators (icons)", () => {
-    const { dataGridHeaderCell } = createDataGridHeaderCell(params => ({
-      ...params,
-      disableSorting: true
-    }));
-
-    expect(dataGridHeaderCell.querySelector("[data-icon]")).toBeNull();
-  });
-
-  it("renders DESC and ASC sorting indicators (icons) when sorting is enabled and current sorting is not defined", () => {
-    const { dataGridHeaderCell } = createDataGridHeaderCell();
-
-    expect(dataGridHeaderCell).toBeDefined();
-    const sortingIcons = dataGridHeaderCell.querySelectorAll("[data-icon]");
-    expect(sortingIcons).toHaveLength(2);
-    sortingIcons.forEach(icon => {
-      expect(icon).toHaveClass("indicator");
-      expect(icon).not.toHaveClass("active");
-      expect(icon).not.toHaveClass("hidden");
-    });
-  });
-
-  it("renders ASC sorting indicator (icon) when sorting is enabled and current sorting is ASC", () => {
-    const { dataGridHeaderCell } = createDataGridHeaderCell(params => ({
-      ...params,
-      activeSortDirection: "ASC"
-    }));
-
-    expect(dataGridHeaderCell).toBeDefined();
-    const sortingIcons = dataGridHeaderCell.querySelectorAll("[data-icon]");
-    expect(sortingIcons).toHaveLength(2);
-    sortingIcons.forEach(icon => expect(icon).toHaveClass("indicator"));
-    expect(sortingIcons[0]).toHaveClass("indicator", "active", "icon-triangle-up");
-    expect(sortingIcons[0]).not.toHaveClass("hidden");
-    expect(sortingIcons[1]).toHaveClass("indicator", "hidden", "icon-triangle-down");
-    expect(sortingIcons[1]).not.toHaveClass("active");
-  });
-});
-
-it("renders DESC sorting indicator (icon) when sorting is enabled and current sorting is DESC", () => {
-  const { dataGridHeaderCell } = createDataGridHeaderCell(params => ({
-    ...params,
-    activeSortDirection: "DESC"
-  }));
-
-  expect(dataGridHeaderCell).toBeDefined();
-  const sortingIcons = dataGridHeaderCell.querySelectorAll("[data-icon]");
-  expect(sortingIcons).toHaveLength(2);
-  sortingIcons.forEach(icon => expect(icon).toHaveClass("indicator"));
-  expect(sortingIcons[0]).toHaveClass("indicator", "hidden", "icon-triangle-up");
-  expect(sortingIcons[0]).not.toHaveClass("active");
-  expect(sortingIcons[1]).toHaveClass("indicator", "active", "icon-triangle-down");
-  expect(sortingIcons[1]).not.toHaveClass("hidden");
-});
-
-describe("DataGridHeaderCell should be interactive", () => {
-  it("clicking on cell calls onSort callback", () => {
-    const onSortHandler = jest.fn();
-    const { getByRole } = createDataGridHeaderCell(params => ({
-      ...params,
-      disableSorting: false,
-      onSort: onSortHandler
-    }));
-
-    userEvent.click(getByRole("button"));
-
-    expect(onSortHandler).toBeCalledWith(defaultParams.name);
-  });
-});
-
-describe("ref should work", () => {
-  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
-    const ExampleComponent = ({
-      propagateRef
-    }: {
-      propagateRef: (ref: React.RefObject<HTMLElement>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        propagateRef(ref);
-      }, [ref]);
-
-      return <DataGridHeaderCell {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    const container = document.createElement("tr");
-    render(<ExampleComponent propagateRef={refCheck} />, { container });
-  });
-});

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.tsx

@@ -1,88 +0,0 @@
-/*
- * 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, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
-import { Icon, Icons } from "../../Icon/Icon";
-import { ColumnName, Direction } from "../datagrid.interfaces";
-import classes from "./DataGridHeaderCell.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"th"> {
-  headline: string;
-  name: ColumnName;
-  disableSorting?: boolean;
-  activeSortDirection?: Direction;
-  onSort?: (name: ColumnName) => void;
-}
-
-const ariaSortMapping = {
-  ASC: "ascending",
-  DESC: "descending"
-} as const;
-
-const DataGridHeaderCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (
-  { headline, name, disableSorting, activeSortDirection, onSort, ...rest }: Props,
-  ref
-) => {
-  const onCellClick = () => {
-    onSort && onSort(name);
-  };
-
-  const sortingIndicator = () => {
-    const getSortingIndicatorClasses = (direction: Direction) => {
-      const sortingIndicatorClasses = [classes["indicator"]];
-      activeSortDirection &&
-        sortingIndicatorClasses.push(
-          activeSortDirection === direction ? classes["active"] : classes["hidden"]
-        );
-      return sortingIndicatorClasses;
-    };
-
-    return (
-      <Fragment>
-        <Icon className={getSortingIndicatorClasses("ASC").join(" ")} icon={Icons.TriangleUp} />
-        <Icon className={getSortingIndicatorClasses("DESC").join(" ")} icon={Icons.TriangleDown} />
-      </Fragment>
-    );
-  };
-
-  const innerContent = (
-    <Fragment>
-      <span className={classes["headline"]}>{headline}</span>
-      {!disableSorting && (
-        <div className={classes["sorting-indicator-container"]}>{sortingIndicator()}</div>
-      )}
-    </Fragment>
-  );
-
-  return (
-    <th
-      {...rest}
-      ref={ref}
-      className={classes["header-cell"]}
-      aria-sort={activeSortDirection && ariaSortMapping[activeSortDirection]}
-    >
-      {disableSorting ? (
-        <div key={name}>{innerContent}</div>
-      ) : (
-        <button key={name} onClick={onCellClick}>
-          {innerContent}
-        </button>
-      )}
-    </th>
-  );
-};
-
-export const DataGridHeaderCell = React.forwardRef(DataGridHeaderCellComponent);

package/src/DataGrid/datagrid.interfaces.ts

@@ -1,31 +0,0 @@
-/*
- * 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.
- */
-
-export type ColumnName = string;
-export type Direction = "ASC" | "DESC";
-export type Sort = {
-  name: ColumnName;
-  direction: Direction;
-}[];
-export type OnSortFunction = (sort: Sort) => void;
-
-export interface HeaderCell {
-  name: ColumnName;
-  headline: string;
-  disableSorting?: boolean;
-  hidden?: boolean;
-  align?: "left" | "right" | "center";
-}