@commercetools-uikit/data-table 16.10.0 → 16.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commercetools-uikit-data-table.cjs.dev.js +1 -1
- package/dist/commercetools-uikit-data-table.cjs.prod.js +1 -1
- package/dist/commercetools-uikit-data-table.esm.js +1 -1
- package/dist/declarations/src/export-types.d.ts +1 -1
- package/dist/declarations/src/index.d.ts +3 -3
- package/package.json +7 -7
- package/dist/declarations/src/cell.d.ts +0 -21
- package/dist/declarations/src/cell.styles.d.ts +0 -33
- package/dist/declarations/src/column-resizer.d.ts +0 -10
- package/dist/declarations/src/column-resizing-context.d.ts +0 -3
- package/dist/declarations/src/data-row.d.ts +0 -14
- package/dist/declarations/src/data-table.styles.d.ts +0 -38
- package/dist/declarations/src/footer.d.ts +0 -12
- package/dist/declarations/src/header-cell.d.ts +0 -24
- package/dist/declarations/src/header-cell.styles.d.ts +0 -31
- package/dist/declarations/src/use-manual-column-resizing-reducer.d.ts +0 -20
- package/dist/declarations/src/utils/convert-numeric-dimension-to-pixel-value.d.ts +0 -2
- package/dist/declarations/src/utils/is-fixed-width-value.d.ts +0 -2
|
@@ -947,7 +947,7 @@ DataTable.displayName = 'DataTable';
|
|
|
947
947
|
var DataTable$1 = DataTable;
|
|
948
948
|
|
|
949
949
|
// NOTE: This string will be replaced on build time with the package version.
|
|
950
|
-
var version = "16.
|
|
950
|
+
var version = "16.12.0";
|
|
951
951
|
|
|
952
952
|
Object.defineProperty(exports, 'useRowSelection', {
|
|
953
953
|
enumerable: true,
|
|
@@ -750,7 +750,7 @@ DataTable.displayName = 'DataTable';
|
|
|
750
750
|
var DataTable$1 = DataTable;
|
|
751
751
|
|
|
752
752
|
// NOTE: This string will be replaced on build time with the package version.
|
|
753
|
-
var version = "16.
|
|
753
|
+
var version = "16.12.0";
|
|
754
754
|
|
|
755
755
|
Object.defineProperty(exports, 'useRowSelection', {
|
|
756
756
|
enumerable: true,
|
|
@@ -923,6 +923,6 @@ DataTable.displayName = 'DataTable';
|
|
|
923
923
|
var DataTable$1 = DataTable;
|
|
924
924
|
|
|
925
925
|
// NOTE: This string will be replaced on build time with the package version.
|
|
926
|
-
var version = "16.
|
|
926
|
+
var version = "16.12.0";
|
|
927
927
|
|
|
928
928
|
export { DataTable$1 as default, version };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type { TRow, TColumn, TDataTableProps } from
|
|
1
|
+
export type { TRow, TColumn, TDataTableProps } from "./data-table.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { default } from
|
|
1
|
+
export { default } from "./data-table.js";
|
|
2
2
|
export { useRowSelection, useSorting } from '@commercetools-uikit/hooks';
|
|
3
|
-
export { default as version } from
|
|
4
|
-
export * from
|
|
3
|
+
export { default as version } from "./version.js";
|
|
4
|
+
export * from "./export-types.js";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/data-table",
|
|
3
3
|
"description": "A component for rendering tabular data.",
|
|
4
|
-
"version": "16.
|
|
4
|
+
"version": "16.12.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/accessible-button": "16.
|
|
25
|
-
"@commercetools-uikit/design-system": "16.
|
|
26
|
-
"@commercetools-uikit/hooks": "16.
|
|
27
|
-
"@commercetools-uikit/icons": "16.
|
|
28
|
-
"@commercetools-uikit/secondary-icon-button": "16.
|
|
29
|
-
"@commercetools-uikit/utils": "16.
|
|
24
|
+
"@commercetools-uikit/accessible-button": "16.12.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "16.12.0",
|
|
26
|
+
"@commercetools-uikit/hooks": "16.12.0",
|
|
27
|
+
"@commercetools-uikit/icons": "16.12.0",
|
|
28
|
+
"@commercetools-uikit/secondary-icon-button": "16.12.0",
|
|
29
|
+
"@commercetools-uikit/utils": "16.12.0",
|
|
30
30
|
"@emotion/react": "^11.10.5",
|
|
31
31
|
"@emotion/styled": "^11.10.5",
|
|
32
32
|
"lodash": "4.17.21",
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
export type TDataCell = {
|
|
3
|
-
children: ReactNode;
|
|
4
|
-
isCondensed?: boolean;
|
|
5
|
-
isTruncated?: boolean;
|
|
6
|
-
onCellClick?: () => void;
|
|
7
|
-
shouldIgnoreRowClick?: boolean;
|
|
8
|
-
verticalCellAlignment?: 'top' | 'center' | 'bottom';
|
|
9
|
-
horizontalCellAlignment?: 'left' | 'center' | 'right';
|
|
10
|
-
shouldRenderBottomBorder: boolean;
|
|
11
|
-
shouldRenderCollapseButton: boolean;
|
|
12
|
-
shouldRenderResizingIndicator: boolean;
|
|
13
|
-
handleRowCollapseClick?: () => void;
|
|
14
|
-
isRowCollapsed?: boolean;
|
|
15
|
-
};
|
|
16
|
-
declare const DataCell: {
|
|
17
|
-
(props: TDataCell): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
18
|
-
displayName: string;
|
|
19
|
-
defaultProps: Pick<TDataCell, "isTruncated" | "shouldRenderBottomBorder">;
|
|
20
|
-
};
|
|
21
|
-
export default DataCell;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { TDataCell } from './cell';
|
|
3
|
-
type TCellInner = {
|
|
4
|
-
shouldClipContent?: boolean;
|
|
5
|
-
} & Pick<TDataCell, 'verticalCellAlignment' | 'horizontalCellAlignment' | 'isTruncated' | 'isCondensed'>;
|
|
6
|
-
declare const getPaddingStyle: (props: TCellInner) => import("@emotion/utils").SerializedStyles;
|
|
7
|
-
declare const getHorizontalAlignmentStyle: (props: TCellInner) => import("@emotion/utils").SerializedStyles;
|
|
8
|
-
declare const getVerticalAlignmentStyle: (props: TCellInner) => import("@emotion/utils").SerializedStyles;
|
|
9
|
-
declare const getCellInnerStyles: (props: TCellInner) => (string | import("@emotion/utils").SerializedStyles)[];
|
|
10
|
-
declare const CellInner: import("@emotion/styled").StyledComponent<{
|
|
11
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
12
|
-
as?: import("react").ElementType<any> | undefined;
|
|
13
|
-
} & {
|
|
14
|
-
shouldClipContent?: boolean | undefined;
|
|
15
|
-
} & Pick<TDataCell, "isCondensed" | "horizontalCellAlignment" | "verticalCellAlignment" | "isTruncated">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
16
|
-
declare const BaseCell: import("@emotion/styled").StyledComponent<{
|
|
17
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
18
|
-
as?: import("react").ElementType<any> | undefined;
|
|
19
|
-
} & {
|
|
20
|
-
shouldClipContent?: boolean | undefined;
|
|
21
|
-
} & Pick<TDataCell, "shouldIgnoreRowClick" | "shouldRenderBottomBorder">, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
|
|
22
|
-
type TBaseFooterCell = {
|
|
23
|
-
disableFooterStickiness?: boolean;
|
|
24
|
-
numberOfColumns?: number;
|
|
25
|
-
};
|
|
26
|
-
declare const BaseFooterCell: import("@emotion/styled").StyledComponent<{
|
|
27
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
28
|
-
as?: import("react").ElementType<any> | undefined;
|
|
29
|
-
} & TBaseFooterCell, import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {}>;
|
|
30
|
-
declare const RowExpandCollapseButton: import("@emotion/styled").StyledComponent<import("@commercetools-uikit/accessible-button").TAccessibleButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
|
|
31
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
32
|
-
} & Pick<TDataCell, "isRowCollapsed">, {}, {}>;
|
|
33
|
-
export { getPaddingStyle, getVerticalAlignmentStyle, getHorizontalAlignmentStyle, getCellInnerStyles, BaseCell, CellInner, BaseFooterCell, RowExpandCollapseButton, };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { MouseEvent } from 'react';
|
|
2
|
-
type TColumnResizer = {
|
|
3
|
-
onMouseDown?: (event: MouseEvent) => void;
|
|
4
|
-
isOnDataCell?: boolean;
|
|
5
|
-
};
|
|
6
|
-
declare const ColumnResizer: {
|
|
7
|
-
(props: TColumnResizer): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
8
|
-
displayName: string;
|
|
9
|
-
};
|
|
10
|
-
export default ColumnResizer;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { TColumn, TRow, TDataTableProps } from './data-table';
|
|
2
|
-
export type TDataRow<Row extends TRow = TRow> = {
|
|
3
|
-
row: Row;
|
|
4
|
-
rowIndex: number;
|
|
5
|
-
columns: TColumn<Row>[];
|
|
6
|
-
shouldClipContent: boolean;
|
|
7
|
-
shouldRenderBottomBorder: boolean;
|
|
8
|
-
} & Pick<TDataTableProps<Row>, 'onRowClick' | 'isCondensed' | 'verticalCellAlignment' | 'horizontalCellAlignment' | 'itemRenderer'>;
|
|
9
|
-
declare const DataRow: {
|
|
10
|
-
<Row extends TRow = TRow>(props: TDataRow<Row>): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
11
|
-
defaultProps: Pick<TDataRow<TRow>, "isCondensed" | "horizontalCellAlignment" | "verticalCellAlignment" | "itemRenderer" | "shouldRenderBottomBorder" | "shouldClipContent">;
|
|
12
|
-
displayName: string;
|
|
13
|
-
};
|
|
14
|
-
export default DataRow;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { TDataTableProps } from './data-table';
|
|
3
|
-
type TGetClickableRowStyleProps = {
|
|
4
|
-
isRowClickable: boolean;
|
|
5
|
-
};
|
|
6
|
-
type TTableContainer = {
|
|
7
|
-
isBeingResized?: boolean;
|
|
8
|
-
maxWidth?: string | number;
|
|
9
|
-
maxHeight?: string | number;
|
|
10
|
-
disableSelfContainment: boolean;
|
|
11
|
-
};
|
|
12
|
-
declare const TableContainer: import("@emotion/styled").StyledComponent<{
|
|
13
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
14
|
-
as?: import("react").ElementType<any> | undefined;
|
|
15
|
-
} & TTableContainer, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
16
|
-
type TTableGrid = {
|
|
17
|
-
resizedTotalWidth?: number;
|
|
18
|
-
columns?: TDataTableProps['columns'];
|
|
19
|
-
disableSelfContainment: boolean;
|
|
20
|
-
maxHeight?: string | number;
|
|
21
|
-
};
|
|
22
|
-
declare const TableGrid: import("@emotion/styled").StyledComponent<{
|
|
23
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
24
|
-
as?: import("react").ElementType<any> | undefined;
|
|
25
|
-
} & TTableGrid, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
|
|
26
|
-
declare const TableHeader: import("@emotion/styled").StyledComponent<{
|
|
27
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
28
|
-
as?: import("react").ElementType<any> | undefined;
|
|
29
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
|
|
30
|
-
declare const TableBody: import("@emotion/styled").StyledComponent<{
|
|
31
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
32
|
-
as?: import("react").ElementType<any> | undefined;
|
|
33
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {}>;
|
|
34
|
-
declare const TableRow: import("@emotion/styled").StyledComponent<{
|
|
35
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
36
|
-
as?: import("react").ElementType<any> | undefined;
|
|
37
|
-
} & TGetClickableRowStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
|
|
38
|
-
export { TableContainer, TableGrid, TableHeader, TableBody, TableRow };
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
type TFooter = {
|
|
3
|
-
children: ReactNode;
|
|
4
|
-
isCondensed?: boolean;
|
|
5
|
-
horizontalCellAlignment?: 'left' | 'center' | 'right';
|
|
6
|
-
resizedTotalWidth?: number;
|
|
7
|
-
};
|
|
8
|
-
declare const Footer: import("@emotion/styled").StyledComponent<{
|
|
9
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
10
|
-
as?: import("react").ElementType<any> | undefined;
|
|
11
|
-
} & TFooter, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
12
|
-
export default Footer;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
import type { TColumn } from './data-table';
|
|
3
|
-
export type THeaderCell = {
|
|
4
|
-
onClick?: (columnKey: string, sortDirection: 'asc' | 'desc') => void;
|
|
5
|
-
sortedBy?: string;
|
|
6
|
-
children: ReactNode;
|
|
7
|
-
columnKey: string;
|
|
8
|
-
columnWidth?: string;
|
|
9
|
-
shouldWrap?: boolean;
|
|
10
|
-
isSortable?: boolean;
|
|
11
|
-
isCondensed?: boolean;
|
|
12
|
-
sortDirection?: 'desc' | 'asc';
|
|
13
|
-
disableResizing?: boolean;
|
|
14
|
-
onColumnResized?: (args: TColumn[]) => void;
|
|
15
|
-
disableHeaderStickiness: boolean;
|
|
16
|
-
horizontalCellAlignment: 'left' | 'center' | 'right';
|
|
17
|
-
iconComponent?: ReactNode;
|
|
18
|
-
};
|
|
19
|
-
declare const HeaderCell: {
|
|
20
|
-
(props: THeaderCell): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
21
|
-
displayName: string;
|
|
22
|
-
defaultProps: Pick<THeaderCell, "sortDirection" | "horizontalCellAlignment" | "disableHeaderStickiness">;
|
|
23
|
-
};
|
|
24
|
-
export default HeaderCell;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { THeaderCell } from './header-cell';
|
|
3
|
-
type TGetSortableHeaderStyles = {
|
|
4
|
-
isActive?: boolean;
|
|
5
|
-
label?: 'asc' | 'desc';
|
|
6
|
-
};
|
|
7
|
-
declare const HeaderCellInner: import("@emotion/styled").StyledComponent<{
|
|
8
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
9
|
-
as?: import("react").ElementType<any> | undefined;
|
|
10
|
-
} & Pick<THeaderCell, "isCondensed" | "horizontalCellAlignment" | "isSortable" | "shouldWrap"> & TGetSortableHeaderStyles, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
11
|
-
type TBaseHeaderCell = {
|
|
12
|
-
disableHeaderStickiness?: boolean;
|
|
13
|
-
shouldClipContent?: boolean;
|
|
14
|
-
};
|
|
15
|
-
declare const BaseHeaderCell: import("@emotion/styled").StyledComponent<{
|
|
16
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
17
|
-
as?: import("react").ElementType<any> | undefined;
|
|
18
|
-
} & TBaseHeaderCell, import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
|
|
19
|
-
declare const HeaderLabelWrapper: import("@emotion/styled").StyledComponent<{
|
|
20
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
21
|
-
as?: import("react").ElementType<any> | undefined;
|
|
22
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
23
|
-
declare const HeaderLabelTextWrapper: import("@emotion/styled").StyledComponent<{
|
|
24
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
25
|
-
as?: import("react").ElementType<any> | undefined;
|
|
26
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
27
|
-
declare const HeaderIconWrapper: import("@emotion/styled").StyledComponent<{
|
|
28
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
29
|
-
as?: import("react").ElementType<any> | undefined;
|
|
30
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
31
|
-
export { HeaderCellInner, BaseHeaderCell, HeaderLabelWrapper, HeaderLabelTextWrapper, HeaderIconWrapper, };
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { MutableRefObject } from 'react';
|
|
2
|
-
type TTableRef = MutableRefObject<HTMLTableElement | undefined>;
|
|
3
|
-
export type TRenderedColumnMeasurements = {
|
|
4
|
-
key: string | null;
|
|
5
|
-
width: number;
|
|
6
|
-
};
|
|
7
|
-
declare const useManualColumnResizing: (tableRef?: TTableRef) => {
|
|
8
|
-
reset: () => void;
|
|
9
|
-
getSizes: () => TRenderedColumnMeasurements[] | undefined;
|
|
10
|
-
startResizing: (headerRef: MutableRefObject<{
|
|
11
|
-
cellIndex: number;
|
|
12
|
-
} & HTMLTableElement>, mouseEvent: MouseEvent) => void;
|
|
13
|
-
onDragResizing: (event: MouseEvent, columnIndex: number) => void;
|
|
14
|
-
finishResizing: () => TRenderedColumnMeasurements[] | undefined;
|
|
15
|
-
getHasTableBeenResized: () => boolean | undefined;
|
|
16
|
-
getIsColumnBeingResized: (columnIndex: number) => boolean;
|
|
17
|
-
getIsAnyColumnBeingResized: () => boolean;
|
|
18
|
-
getTotalResizedTableWidth: () => number;
|
|
19
|
-
};
|
|
20
|
-
export default useManualColumnResizing;
|