@commercetools-uikit/data-table 12.2.2 → 12.2.6

package/dist/declarations/src/cell.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export declare type TDataCell = {
+    children: ReactNode;
+    isCondensed?: boolean;
+    isTruncated?: boolean;
+    onCellClick?: () => void;
+    shouldIgnoreRowClick?: boolean;
+    verticalCellAlignment?: 'top' | 'center' | 'bottom';
+    horizontalCellAlignment?: 'left' | 'center' | 'right';
+    shouldRenderBottomBorder: boolean;
+    shouldRenderCollapseButton: boolean;
+    shouldRenderResizingIndicator: boolean;
+    handleRowCollapseClick?: () => void;
+    isRowCollapsed?: boolean;
+};
+declare type TDefaultProps = {
+    isTruncated: boolean;
+    shouldRenderBottomBorder: boolean;
+};
+declare const DataCell: {
+    (props: TDataCell): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: TDefaultProps;
+};
+export default DataCell;

package/dist/declarations/src/cell.styles.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import type { TDataCell } from './cell';
+declare type TCellInner = {
+    shouldClipContent?: boolean;
+} & Pick<TDataCell, 'verticalCellAlignment' | 'horizontalCellAlignment' | 'isTruncated' | 'isCondensed'>;
+declare const getPaddingStyle: (props: TCellInner) => import("@emotion/utils").SerializedStyles;
+declare const getHorizontalAlignmentStyle: (props: TCellInner) => import("@emotion/utils").SerializedStyles;
+declare const getVerticalAlignmentStyle: (props: TCellInner) => import("@emotion/utils").SerializedStyles;
+declare const getCellInnerStyles: (props: TCellInner) => (string | import("@emotion/utils").SerializedStyles)[];
+declare const CellInner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    shouldClipContent?: boolean | undefined;
+} & Pick<TDataCell, "isCondensed" | "horizontalCellAlignment" | "verticalCellAlignment" | "isTruncated">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const BaseCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    shouldClipContent?: boolean | undefined;
+} & Pick<TDataCell, "shouldIgnoreRowClick" | "shouldRenderBottomBorder">, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+declare type TBaseFooterCell = {
+    disableFooterStickiness?: boolean;
+    numberOfColumns?: number;
+};
+declare const BaseFooterCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TBaseFooterCell, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
+declare const RowExpandCollapseButton: import("@emotion/styled").StyledComponent<{
+    as?: string | import("react").ComponentType<{}> | undefined;
+    id?: string | undefined;
+    type?: "button" | "reset" | "submit" | undefined;
+    label: string;
+    children: import("react").ReactNode;
+    isToggleButton?: boolean | undefined;
+    isToggled?: boolean | undefined;
+    isDisabled?: boolean | undefined;
+    className?: string | undefined;
+    onClick?: ((event: import("react").MouseEvent<HTMLButtonElement, MouseEvent> | import("react").KeyboardEvent<HTMLButtonElement>) => void) | undefined;
+    buttonAttributes?: Record<string, unknown> | undefined;
+} & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Pick<TDataCell, "isRowCollapsed">, {}, {}>;
+export { getPaddingStyle, getVerticalAlignmentStyle, getHorizontalAlignmentStyle, getCellInnerStyles, BaseCell, CellInner, BaseFooterCell, RowExpandCollapseButton, };

package/dist/declarations/src/column-resizer.d.ts

@@ -0,0 +1,10 @@
+import type { MouseEvent } from 'react';
+declare type TColumnResizer = {
+    onMouseDown?: (event: MouseEvent) => void;
+    isOnDataCell?: boolean;
+};
+declare const ColumnResizer: {
+    (props: TColumnResizer): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ColumnResizer;

package/dist/declarations/src/column-resizing-context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: import("react").Context<{}>;
+export default _default;

package/dist/declarations/src/data-row.d.ts

@@ -0,0 +1,14 @@
+import { TColumn, TRow, TDataTableProps } from './data-table';
+export declare type TDataRow<Row extends TRow = TRow> = {
+    row: Row;
+    rowIndex: number;
+    columns: TColumn[];
+    shouldClipContent: boolean;
+    shouldRenderBottomBorder: boolean;
+} & Pick<TDataTableProps, 'onRowClick' | 'isCondensed' | 'verticalCellAlignment' | 'horizontalCellAlignment' | 'itemRenderer'>;
+declare const DataRow: {
+    <Row extends TRow = TRow>(props: TDataRow<Row>): import("@emotion/react/jsx-runtime").JSX.Element;
+    defaultProps: Pick<TDataRow<TRow>, "isCondensed" | "horizontalCellAlignment" | "verticalCellAlignment" | "itemRenderer" | "shouldRenderBottomBorder" | "shouldClipContent">;
+    displayName: string;
+};
+export default DataRow;

package/dist/declarations/src/data-table.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode, MouseEventHandler } from 'react';
+export interface TRow {
+    id: string;
+}
+export declare type TColumn<Row extends TRow = TRow> = {
+    key: string;
+    label: ReactNode;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    onClick?: (event: MouseEventHandler) => void;
+    renderItem?: (row: Row, isRowCollapsed: boolean) => ReactNode;
+    headerIcon?: ReactNode;
+    isTruncated?: boolean;
+    isSortable?: boolean;
+    disableResizing?: boolean;
+    shouldIgnoreRowClick?: boolean;
+};
+export declare type TDataTableProps<Row extends TRow = TRow> = {
+    rows: Row[];
+    columns: TColumn[];
+    footer?: ReactNode;
+    maxWidth?: number | string;
+    maxHeight?: number | string;
+    onRowClick?: (row: TRow, rowIndex: number, columnKey: string) => void;
+    isCondensed?: boolean;
+    onColumnResized?: (args: TColumn<Row>[]) => void;
+    disableSelfContainment?: boolean;
+    disableHeaderStickiness?: boolean;
+    itemRenderer: (item: TRow, column: TColumn<Row>, isRowCollapsed: boolean) => ReactNode;
+    wrapHeaderLabels?: boolean;
+    verticalCellAlignment?: 'top' | 'center' | 'bottom';
+    horizontalCellAlignment?: 'left' | 'center' | 'right';
+    sortedBy?: string;
+    onSortChange?: (columnKey: string, sortDirection: 'asc' | 'desc') => void;
+    sortDirection?: 'desc' | 'asc';
+};
+declare const DataTable: {
+    <Row extends TRow = TRow>(props: TDataTableProps<Row>): import("@emotion/react/jsx-runtime").JSX.Element;
+    defaultProps: Pick<TDataTableProps<TRow>, "isCondensed" | "wrapHeaderLabels" | "horizontalCellAlignment" | "verticalCellAlignment" | "disableSelfContainment" | "itemRenderer">;
+    displayName: string;
+};
+export default DataTable;

package/dist/declarations/src/data-table.styles.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import type { TDataTableProps } from './data-table';
+import type { TDataRow } from './data-row';
+declare type TGetClickableRowStyle = {
+    isRowClickable?: TDataRow['onRowClick'];
+};
+declare type TTableContainer = {
+    isBeingResized?: boolean;
+    maxWidth?: string | number;
+    disableSelfContainment: boolean;
+};
+declare const TableContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TTableContainer, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare type TTableGrid = {
+    resizedTotalWidth?: number;
+    columns?: TDataTableProps['columns'];
+    disableSelfContainment: boolean;
+    maxHeight?: string | number;
+};
+declare const TableGrid: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TTableGrid, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+declare const Header: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
+declare const Body: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
+declare const Row: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TGetClickableRowStyle, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export { TableContainer, TableGrid, Header, Body, Row };

package/dist/declarations/src/footer.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+declare type TFooter = {
+    children: ReactNode;
+    isCondensed?: boolean;
+    horizontalCellAlignment?: 'left' | 'center' | 'right';
+    resizedTotalWidth?: number;
+};
+declare const Footer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TFooter, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export default Footer;

package/dist/declarations/src/header-cell.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import type { TColumn } from './data-table';
+export declare type THeaderCell = {
+    onClick?: (columnKey: string, sortDirection: 'asc' | 'desc') => void;
+    sortedBy?: string;
+    children: ReactNode;
+    columnKey: string;
+    columnWidth?: string;
+    shouldWrap?: boolean;
+    isSortable?: boolean;
+    isCondensed?: boolean;
+    sortDirection?: 'desc' | 'asc';
+    disableResizing?: boolean;
+    onColumnResized?: (args: TColumn[]) => void;
+    disableHeaderStickiness: boolean;
+    horizontalCellAlignment: 'left' | 'center' | 'right';
+    iconComponent?: ReactNode;
+};
+declare const HeaderCell: {
+    (props: THeaderCell): import("@emotion/react/jsx-runtime").JSX.Element;
+    displayName: string;
+    defaultProps: Pick<THeaderCell, "sortDirection" | "horizontalCellAlignment" | "disableHeaderStickiness">;
+};
+export default HeaderCell;

package/dist/declarations/src/header-cell.styles.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import type { THeaderCell } from './header-cell';
+declare type TGetSortableHeaderStyles = {
+    isActive?: boolean;
+};
+declare const HeaderCellInner: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & Pick<THeaderCell, "isCondensed" | "horizontalCellAlignment" | "isSortable" | "shouldWrap"> & TGetSortableHeaderStyles, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare type TBaseHeaderCell = {
+    disableHeaderStickiness?: boolean;
+    shouldClipContent?: boolean;
+};
+declare const BaseHeaderCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & TBaseHeaderCell, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
+declare const HeaderLabelWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const HeaderIconWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export { HeaderCellInner, BaseHeaderCell, HeaderLabelWrapper, HeaderIconWrapper, };

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

@@ -0,0 +1,3 @@
+export { default } from './data-table';
+export { useRowSelection, useSorting } from '@commercetools-uikit/hooks';
+export { default as version } from './version';

package/dist/declarations/src/use-manual-column-resizing-reducer.d.ts

@@ -0,0 +1,20 @@
+import { MutableRefObject } from 'react';
+declare type TTableRef = MutableRefObject<HTMLTableElement | undefined>;
+export declare type TRenderedColumnMeasurements = {
+    key: string | null;
+    width: number;
+};
+declare const useManualColumnResizing: (tableRef?: TTableRef | undefined) => {
+    reset: () => void;
+    getSizes: () => TRenderedColumnMeasurements[] | undefined;
+    startResizing: (headerRef: MutableRefObject<{
+        cellIndex: number;
+    } & HTMLTableElement>, mouseEvent: MouseEvent) => void;
+    onDragResizing: (event: MouseEvent, columnIndex: number) => void;
+    finishResizing: () => TRenderedColumnMeasurements[] | undefined;
+    getHasTableBeenResized: () => boolean | undefined;
+    getIsColumnBeingResized: (columnIndex: number) => boolean;
+    getIsAnyColumnBeingResized: () => boolean;
+    getTotalResizedTableWidth: () => number;
+};
+export default useManualColumnResizing;

package/dist/declarations/src/utils/convert-numeric-dimension-to-pixel-value.d.ts

@@ -0,0 +1,2 @@
+declare const convertNumericDimensionToPixelValue: (dimensionValue: number | string) => string;
+export default convertNumericDimensionToPixelValue;

package/dist/declarations/src/utils/is-fixed-width-value.d.ts

@@ -0,0 +1,2 @@
+declare const isFixedWidthValue: (value: string | number) => boolean;
+export default isFixedWidthValue;

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/data-table",
   "description": "A component for rendering tabular data.",
-  "version": "12.2.2",
+  "version": "12.2.6",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -11,7 +11,6 @@
   "homepage": "https://uikit.commercetools.com",
   "keywords": ["javascript", "design system", "react", "uikit"],
   "license": "MIT",
-  "private": false,
   "publishConfig": {
     "access": "public"
   },
@@ -19,18 +18,15 @@
   "main": "dist/commercetools-uikit-data-table.cjs.js",
   "module": "dist/commercetools-uikit-data-table.esm.js",
   "files": ["dist"],
-  "scripts": {
-    "prepare": "../../../scripts/version.js replace"
-  },
   "dependencies": {
-    "@babel/runtime": "7.14.8",
-    "@babel/runtime-corejs3": "7.14.8",
-    "@commercetools-uikit/accessible-button": "12.2.2",
-    "@commercetools-uikit/design-system": "12.2.2",
-    "@commercetools-uikit/hooks": "12.2.2",
-    "@commercetools-uikit/icons": "12.2.2",
-    "@commercetools-uikit/secondary-icon-button": "12.2.2",
-    "@commercetools-uikit/utils": "12.2.0",
+    "@babel/runtime": "7.16.3",
+    "@babel/runtime-corejs3": "7.16.3",
+    "@commercetools-uikit/accessible-button": "12.2.5",
+    "@commercetools-uikit/design-system": "12.2.5",
+    "@commercetools-uikit/hooks": "12.2.5",
+    "@commercetools-uikit/icons": "12.2.6",
+    "@commercetools-uikit/secondary-icon-button": "12.2.5",
+    "@commercetools-uikit/utils": "12.2.5",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "lodash": "4.17.21",
@@ -38,7 +34,7 @@
     "react-required-if": "1.0.3"
   },
   "devDependencies": {
-    "@testing-library/react-hooks": "7.0.1",
+    "@testing-library/react-hooks": "7.0.2",
     "formik": "^2.2.9",
     "react": "17.0.2"
   },