@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 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: import("../types").ColumnConfig[];
4
- pinnedLeft: import("../types").ColumnConfig[];
5
- pinnedRight: import("../types").ColumnConfig[];
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;