@veeqo/ui 5.13.0 → 5.15.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/README.md +1 -1
- package/dist/components/ActionMenu/ActionMenu.d.ts +10 -0
- package/dist/components/ActionMenu/ActionMenu.test.d.ts +1 -0
- package/dist/components/ActionMenu/index.d.ts +1 -0
- package/dist/components/ActionMenu/styled.d.ts +2 -0
- package/dist/components/DataTable/DataTable.d.ts +1 -1
- package/dist/components/DataTable/components/ColumnDivider.d.ts +11 -0
- package/dist/components/DataTable/hooks/useColumnWidths.d.ts +10 -0
- package/dist/components/DataTable/hooks/useColumns.d.ts +54 -4
- package/dist/components/DataTable/renderers/renderHeader.d.ts +6 -2
- package/dist/components/DataTable/types.d.ts +12 -0
- package/dist/components/DataTable/utils/customEventEmitter.d.ts +1 -0
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +13 -13
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@ In the longer term Icons and Integrations **WILL** be moved to their own library
|
|
|
10
10
|
|
|
11
11
|
### Links ⚓️
|
|
12
12
|
|
|
13
|
-
**This Library**: [Storybook 📋](https://ui.veeqo.amazon.dev/?path=/docs/get-started-how-to-install--docs) | Playroom 🛝 (not deployed
|
|
13
|
+
**This Library**: [Storybook 📋](https://ui.veeqo.amazon.dev/?path=/docs/get-started-how-to-install--docs) | Playroom 🛝 (not deployed)
|
|
14
14
|
|
|
15
15
|
**Old Library**: [Storybook 📋](https://master.d1cz47hw90nvy2.amplifyapp.com/) | [Playroom 🛝](https://master.d1cz47hw90nvy2.amplifyapp.com/playroom)
|
|
16
16
|
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { MenuItemProps } from 'react-aria-components';
|
|
3
|
+
import { ButtonProps } from '../Button/types';
|
|
4
|
+
export type ActionMenuProps = {
|
|
5
|
+
id?: string;
|
|
6
|
+
menuLabel?: string;
|
|
7
|
+
actions: MenuItemProps[];
|
|
8
|
+
ctaProps: ButtonProps;
|
|
9
|
+
};
|
|
10
|
+
export declare const ActionMenu: ({ id, menuLabel, ctaProps, actions }: ActionMenuProps) => React.JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ActionMenu } from './ActionMenu';
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const MenuItem: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").MenuItemProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;
|
|
@@ -4,7 +4,7 @@ import { ColumnMenu } from './components/ColumnMenu';
|
|
|
4
4
|
import { SelectionCell } from './components/SelectionCell';
|
|
5
5
|
import { SelectionHeader } from './components/SelectionHeader';
|
|
6
6
|
export declare const DataTable: {
|
|
7
|
-
({ ActionBarSlot, borderMode, columns, emptyState, expandedRowIds, loading, loadingRowCount, onChangeSort, rows, disabledRowIds, selectionMode, selectionState, setExpanded, sortState, stripingMode, enableStickyHeader, }: DataTableProps): React.JSX.Element;
|
|
7
|
+
({ ActionBarSlot, borderMode, columns: initialColumns, emptyState, expandedRowIds, loading, loadingRowCount, onChangeSort, rows, disabledRowIds, selectionMode, selectionState, setExpanded, sortState, stripingMode, enableStickyHeader, resizeableColumns, }: DataTableProps): React.JSX.Element;
|
|
8
8
|
defaultProps: {
|
|
9
9
|
loading: boolean;
|
|
10
10
|
loadingRowCount: number;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ColumnId, ColumnWidthHandler } from '../types';
|
|
3
|
+
export type ColumnDividerProps = {
|
|
4
|
+
columnId: ColumnId;
|
|
5
|
+
setColumnWidth?: ColumnWidthHandler;
|
|
6
|
+
};
|
|
7
|
+
export type CalculateWidthProps = {
|
|
8
|
+
event: MouseEvent;
|
|
9
|
+
};
|
|
10
|
+
export declare const ResizerBar: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
|
+
export declare const ColumnDivider: ({ columnId, setColumnWidth }: ColumnDividerProps) => React.JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
import { ColumnConfigs, ColumnWidthsType, ColumnWidthHandler, ColumnId } from '../types';
|
|
3
|
+
export declare const useColumnWidths: ({ tableRef, columns, columnIds, }: {
|
|
4
|
+
tableRef: RefObject<HTMLElement>;
|
|
5
|
+
columns: ColumnConfigs;
|
|
6
|
+
columnIds: ColumnId[];
|
|
7
|
+
}) => {
|
|
8
|
+
setColumnWidth: ColumnWidthHandler;
|
|
9
|
+
columnWidths: ColumnWidthsType;
|
|
10
|
+
};
|
|
@@ -1,6 +1,56 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
1
2
|
import { ColumnConfigs } from '../types';
|
|
2
|
-
export declare function useColumns(columns: ColumnConfigs): {
|
|
3
|
-
visible:
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
export declare function useColumns(columns: ColumnConfigs, tableRef: RefObject<HTMLElement>): {
|
|
4
|
+
visible: {
|
|
5
|
+
width: import("../types").ColumnWidth | import("../types").ColumnWidthBounded | undefined;
|
|
6
|
+
id: import("../types").ColumnId;
|
|
7
|
+
align?: import("../types").ColumnAlignment | undefined;
|
|
8
|
+
hidden?: boolean | undefined;
|
|
9
|
+
icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
10
|
+
pinned?: import("../types").ColumnPinned | undefined;
|
|
11
|
+
sortable?: boolean | undefined;
|
|
12
|
+
spacing?: keyof import("../../Stack/types").SizeScale | undefined;
|
|
13
|
+
span?: number | undefined;
|
|
14
|
+
title?: string | undefined;
|
|
15
|
+
tooltip?: string | undefined;
|
|
16
|
+
renderCell: import("../types").CellRenderer;
|
|
17
|
+
renderFooter?: import("../types").FooterRenderer | undefined;
|
|
18
|
+
renderHeader?: import("../types").HeaderRenderer | undefined;
|
|
19
|
+
renderNestedCell?: import("../types").NestedCellRenderer | undefined;
|
|
20
|
+
}[];
|
|
21
|
+
pinnedLeft: {
|
|
22
|
+
width: import("../types").ColumnWidth | import("../types").ColumnWidthBounded | undefined;
|
|
23
|
+
id: import("../types").ColumnId;
|
|
24
|
+
align?: import("../types").ColumnAlignment | undefined;
|
|
25
|
+
hidden?: boolean | undefined;
|
|
26
|
+
icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
27
|
+
pinned?: import("../types").ColumnPinned | undefined;
|
|
28
|
+
sortable?: boolean | undefined;
|
|
29
|
+
spacing?: keyof import("../../Stack/types").SizeScale | undefined;
|
|
30
|
+
span?: number | undefined;
|
|
31
|
+
title?: string | undefined;
|
|
32
|
+
tooltip?: string | undefined;
|
|
33
|
+
renderCell: import("../types").CellRenderer;
|
|
34
|
+
renderFooter?: import("../types").FooterRenderer | undefined;
|
|
35
|
+
renderHeader?: import("../types").HeaderRenderer | undefined;
|
|
36
|
+
renderNestedCell?: import("../types").NestedCellRenderer | undefined;
|
|
37
|
+
}[];
|
|
38
|
+
pinnedRight: {
|
|
39
|
+
width: import("../types").ColumnWidth | import("../types").ColumnWidthBounded | undefined;
|
|
40
|
+
id: import("../types").ColumnId;
|
|
41
|
+
align?: import("../types").ColumnAlignment | undefined;
|
|
42
|
+
hidden?: boolean | undefined;
|
|
43
|
+
icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
44
|
+
pinned?: import("../types").ColumnPinned | undefined;
|
|
45
|
+
sortable?: boolean | undefined;
|
|
46
|
+
spacing?: keyof import("../../Stack/types").SizeScale | undefined;
|
|
47
|
+
span?: number | undefined;
|
|
48
|
+
title?: string | undefined;
|
|
49
|
+
tooltip?: string | undefined;
|
|
50
|
+
renderCell: import("../types").CellRenderer;
|
|
51
|
+
renderFooter?: import("../types").FooterRenderer | undefined;
|
|
52
|
+
renderHeader?: import("../types").HeaderRenderer | undefined;
|
|
53
|
+
renderNestedCell?: import("../types").NestedCellRenderer | undefined;
|
|
54
|
+
}[];
|
|
55
|
+
setColumnWidth: import("../types").ColumnWidthHandler;
|
|
6
56
|
};
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { ColumnConfig, SortState, SortChangeHandler } from '../types';
|
|
2
|
+
import { ColumnConfig, SortState, SortChangeHandler, ColumnWidthHandler } from '../types';
|
|
3
3
|
type RenderHeaderParameters = {
|
|
4
4
|
column: ColumnConfig;
|
|
5
5
|
sortState?: SortState;
|
|
6
6
|
onChangeSort?: SortChangeHandler;
|
|
7
|
+
resizeableColumns?: boolean;
|
|
8
|
+
setColumnWidth?: ColumnWidthHandler;
|
|
9
|
+
columnCount?: number;
|
|
10
|
+
columnI?: number;
|
|
7
11
|
};
|
|
8
12
|
/**
|
|
9
13
|
* Default renderer for table header cells
|
|
@@ -11,5 +15,5 @@ type RenderHeaderParameters = {
|
|
|
11
15
|
* @param column Column configuration object
|
|
12
16
|
* @returns Header cell instance
|
|
13
17
|
*/
|
|
14
|
-
export declare function renderHeader({ column, sortState, onChangeSort, }: RenderHeaderParameters): ReactNode;
|
|
18
|
+
export declare function renderHeader({ column, sortState, onChangeSort, resizeableColumns, setColumnWidth, columnCount, columnI, }: RenderHeaderParameters): ReactNode;
|
|
15
19
|
export {};
|
|
@@ -46,6 +46,11 @@ export type SortState = {
|
|
|
46
46
|
direction: SortDirection;
|
|
47
47
|
};
|
|
48
48
|
export type SortChangeHandler = (sortState: SortState) => void;
|
|
49
|
+
export type ColumnWidthState = {
|
|
50
|
+
columnId: ColumnId;
|
|
51
|
+
width: number | string;
|
|
52
|
+
};
|
|
53
|
+
export type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => void;
|
|
49
54
|
export type RowId = number | string;
|
|
50
55
|
export interface NestedTableRow {
|
|
51
56
|
id: RowId;
|
|
@@ -65,9 +70,11 @@ export interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellEleme
|
|
|
65
70
|
align?: ColumnAlignment;
|
|
66
71
|
spacing?: ColumnSpacing;
|
|
67
72
|
span?: number;
|
|
73
|
+
zIndex?: number;
|
|
68
74
|
}
|
|
69
75
|
export interface RendererHeaderProps extends HeaderProps {
|
|
70
76
|
key: string;
|
|
77
|
+
'data-columnid'?: string;
|
|
71
78
|
}
|
|
72
79
|
export interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {
|
|
73
80
|
selected: boolean;
|
|
@@ -112,5 +119,10 @@ export interface DataTableProps {
|
|
|
112
119
|
setExpanded?: SetExpandedAction;
|
|
113
120
|
sortState?: SortState;
|
|
114
121
|
stripingMode?: StripingMode;
|
|
122
|
+
resizeableColumns?: boolean;
|
|
115
123
|
}
|
|
124
|
+
export type ColumnWidthsType = {
|
|
125
|
+
[key: ColumnId]: ColumnWidthType;
|
|
126
|
+
};
|
|
127
|
+
export type ColumnWidthType = ColumnWidthFixed | ColumnWidthBounded | undefined;
|
|
116
128
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const customEventEmitter: (eventType: string, data: any) => void;
|