infinity-ui-elements 1.7.10 → 1.7.12
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/components/Dropdown/Dropdown.d.ts +8 -0
- package/dist/components/Dropdown/Dropdown.d.ts.map +1 -1
- package/dist/components/Dropdown/Dropdown.stories.d.ts +7 -0
- package/dist/components/Dropdown/Dropdown.stories.d.ts.map +1 -1
- package/dist/components/Dropdown/DropdownMenu.d.ts +8 -0
- package/dist/components/Dropdown/DropdownMenu.d.ts.map +1 -1
- package/dist/components/Table/Table.d.ts +4 -1
- package/dist/components/Table/Table.d.ts.map +1 -1
- package/dist/components/Table/Table.stories.d.ts +1 -0
- package/dist/components/Table/Table.stories.d.ts.map +1 -1
- package/dist/index.esm.js +47 -12
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +47 -12
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -13,6 +13,10 @@ export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
13
13
|
* Items to display in the dropdown
|
|
14
14
|
*/
|
|
15
15
|
items?: DropdownItem[];
|
|
16
|
+
/**
|
|
17
|
+
* Custom content to render instead of the default item list
|
|
18
|
+
*/
|
|
19
|
+
customContent?: React.ReactNode;
|
|
16
20
|
/**
|
|
17
21
|
* Section heading text
|
|
18
22
|
*/
|
|
@@ -93,6 +97,10 @@ export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>
|
|
|
93
97
|
* Disable footer buttons
|
|
94
98
|
*/
|
|
95
99
|
disableFooter?: boolean;
|
|
100
|
+
/**
|
|
101
|
+
* Whether to show footer actions (overrides disableFooter)
|
|
102
|
+
*/
|
|
103
|
+
showFooter?: boolean;
|
|
96
104
|
}
|
|
97
105
|
export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
|
|
98
106
|
export { dropdownVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAErE,QAAA,MAAM,gBAAgB;;mFAcrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAErE,QAAA,MAAM,gBAAgB;;mFAcrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,sFAmIpB,CAAC;AAIF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -12,6 +12,7 @@ declare const meta: {
|
|
|
12
12
|
decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
|
|
13
13
|
trigger?: React.ReactNode;
|
|
14
14
|
items?: import("./Dropdown").DropdownItem[] | undefined;
|
|
15
|
+
customContent?: React.ReactNode;
|
|
15
16
|
sectionHeading?: string | undefined;
|
|
16
17
|
isLoading?: boolean | undefined;
|
|
17
18
|
isEmpty?: boolean | undefined;
|
|
@@ -32,6 +33,7 @@ declare const meta: {
|
|
|
32
33
|
showChevron?: boolean | undefined;
|
|
33
34
|
emptyIcon?: React.ReactNode;
|
|
34
35
|
disableFooter?: boolean | undefined;
|
|
36
|
+
showFooter?: boolean | undefined;
|
|
35
37
|
color?: string | undefined | undefined;
|
|
36
38
|
defaultChecked?: boolean | undefined | undefined;
|
|
37
39
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
@@ -323,6 +325,10 @@ declare const meta: {
|
|
|
323
325
|
control: "boolean";
|
|
324
326
|
description: string;
|
|
325
327
|
};
|
|
328
|
+
showFooter: {
|
|
329
|
+
control: "boolean";
|
|
330
|
+
description: string;
|
|
331
|
+
};
|
|
326
332
|
};
|
|
327
333
|
};
|
|
328
334
|
export default meta;
|
|
@@ -336,6 +342,7 @@ export declare const WithoutFooter: Story;
|
|
|
336
342
|
export declare const SmallSize: Story;
|
|
337
343
|
export declare const LargeSize: Story;
|
|
338
344
|
export declare const WithChevrons: Story;
|
|
345
|
+
export declare const WithCustomContent: Story;
|
|
339
346
|
export declare const DisabledItems: Story;
|
|
340
347
|
export declare const Interactive: Story;
|
|
341
348
|
export declare const WithSearch: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,IAAI
|
|
1
|
+
{"version":3,"file":"Dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA0FnC,eAAO,MAAM,OAAO,EAAE,KASrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAgC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAQnC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA6C/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA8B3B,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAyEzB,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAwDxB,CAAC"}
|
|
@@ -13,6 +13,10 @@ export interface DropdownMenuProps {
|
|
|
13
13
|
* Items to display in the dropdown
|
|
14
14
|
*/
|
|
15
15
|
items?: DropdownMenuItem[];
|
|
16
|
+
/**
|
|
17
|
+
* Custom content to render instead of the default item list
|
|
18
|
+
*/
|
|
19
|
+
customContent?: React.ReactNode;
|
|
16
20
|
/**
|
|
17
21
|
* Section heading text
|
|
18
22
|
*/
|
|
@@ -69,6 +73,10 @@ export interface DropdownMenuProps {
|
|
|
69
73
|
* Disable footer buttons
|
|
70
74
|
*/
|
|
71
75
|
disableFooter?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Whether to show the footer actions (overrides disableFooter)
|
|
78
|
+
*/
|
|
79
|
+
showFooter?: boolean;
|
|
72
80
|
/**
|
|
73
81
|
* Footer layout orientation
|
|
74
82
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CAClC;AAED,eAAO,MAAM,YAAY,0FA6LxB,CAAC"}
|
|
@@ -30,11 +30,14 @@ export interface TableProps<TData extends RowData> extends React.HTMLAttributes<
|
|
|
30
30
|
hideColumnsOnDetailOpen?: number;
|
|
31
31
|
selectedRowId?: string;
|
|
32
32
|
onRowSelectionChange?: (rowId: string | null) => void;
|
|
33
|
+
loading?: boolean;
|
|
34
|
+
loadingSkeletonRows?: number;
|
|
35
|
+
loadingSkeletonHeight?: number | string;
|
|
33
36
|
columnWidths?: Partial<Record<string, string | number>>;
|
|
34
37
|
columnMinWidths?: Partial<Record<string, string | number>>;
|
|
35
38
|
columnMaxWidths?: Partial<Record<string, string | number>>;
|
|
36
39
|
}
|
|
37
|
-
declare function TableComponent<TData extends RowData>({ className, wrapperClassName, containerClassName, variant, size, table, enableRowSelection, enableSelectAll, isLoading, loadingComponent, emptyComponent, enableHorizontalScroll, stickyHeader, maxHeight, showRowHover, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground, detailPanel, hideColumnsOnDetailOpen, selectedRowId, onRowSelectionChange, columnWidths, columnMinWidths, columnMaxWidths, ...props }: TableProps<TData>, ref: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
declare function TableComponent<TData extends RowData>({ className, wrapperClassName, containerClassName, variant, size, table, enableRowSelection, enableSelectAll, isLoading, loading, loadingComponent, emptyComponent, enableHorizontalScroll, stickyHeader, maxHeight, showRowHover, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground, detailPanel, hideColumnsOnDetailOpen, selectedRowId, onRowSelectionChange, loadingSkeletonRows, loadingSkeletonHeight, columnWidths, columnMinWidths, columnMaxWidths, ...props }: TableProps<TData>, ref: React.ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
38
41
|
export declare const Table: <TData extends RowData>(props: TableProps<TData> & {
|
|
39
42
|
ref?: React.ForwardedRef<HTMLDivElement>;
|
|
40
43
|
}) => ReturnType<typeof TableComponent>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,KAAK,IAAI,aAAa,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAK7E,OAAO,EAAE,aAAa,
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,6 +18,7 @@ export declare const StickyHeaderScrollableContainer: Story;
|
|
|
18
18
|
export declare const WithRowClick: Story;
|
|
19
19
|
export declare const HorizontalScroll: Story;
|
|
20
20
|
export declare const CustomColumnWidths: Story;
|
|
21
|
+
export declare const LoadingSkeleton: Story;
|
|
21
22
|
export declare const WithoutHeaderBackground: Story;
|
|
22
23
|
export declare const WithHeaderBackground: Story;
|
|
23
24
|
export declare const WithDetailPanel: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAyThC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAO5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,KAmC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAgC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAgD5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyB5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAkB1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAyC9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiC1B,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAyC7C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA6B9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAuChC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAyBrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAyBlC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgJ7B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAoH1C,CAAC"}
|
|
1
|
+
{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAyThC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAO5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,YAAY,EAAE,KAmC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAgC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAgD5B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAyB5B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAyBvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAkB1B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAyC9B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAiC1B,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,KAyC7C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwC1B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA6B9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAuChC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA0B7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAyBrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAyBlC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgJ7B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAoH1C,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -1433,11 +1433,14 @@ const Link = React.forwardRef(({ className, type = "anchor", color = "primary",
|
|
|
1433
1433
|
});
|
|
1434
1434
|
Link.displayName = "Link";
|
|
1435
1435
|
|
|
1436
|
-
const DropdownMenu = React.forwardRef(({ items = [], sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
|
|
1436
|
+
const DropdownMenu = React.forwardRef(({ items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, showFooter, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", }, ref) => {
|
|
1437
1437
|
const renderContent = () => {
|
|
1438
1438
|
if (isLoading) {
|
|
1439
1439
|
return (jsx("div", { className: "flex flex-col items-center justify-center py-12 px-6", children: jsx(Loader2, { className: "w-12 h-12 text-action-ink-primary-normal mb-4 animate-spin" }) }));
|
|
1440
1440
|
}
|
|
1441
|
+
if (customContent) {
|
|
1442
|
+
return (jsxs("div", { className: "py-3 px-3 max-h-[400px] overflow-y-auto", children: [sectionHeading && (jsx(Text, { as: "div", variant: "body", size: "small", weight: "medium", className: "text-body-small-medium text-surface-ink-neutral-muted px-3 py-2 mb-1", children: sectionHeading })), jsx("div", { className: "px-1", children: customContent })] }));
|
|
1443
|
+
}
|
|
1441
1444
|
if (isEmpty || items.length === 0) {
|
|
1442
1445
|
return (jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-6 text-center", children: [emptyIcon || (jsx(Search, { className: "w-12 h-12 text-surface-ink-neutral-muted mb-4" })), jsx(Text, { as: "h3", variant: "body", size: "small", weight: "semibold", className: "text-surface-ink-neutral-normal mb-2", children: emptyTitle }), jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", className: "text-surface-ink-neutral-muted mb-3", children: emptyDescription }), emptyLinkText && (jsx(Link, { type: "anchor", color: "primary", size: "small", onClick: onEmptyLinkClick, children: emptyLinkText }))] }));
|
|
1443
1446
|
}
|
|
@@ -1447,10 +1450,11 @@ const DropdownMenu = React.forwardRef(({ items = [], sectionHeading, isLoading =
|
|
|
1447
1450
|
}, containerClassName: cn(index === focusedIndex && "bg-action-fill-primary-faded") }, item.id))) })] }));
|
|
1448
1451
|
};
|
|
1449
1452
|
const widthClass = width === "full" ? "w-full" : width === "auto" ? "w-auto" : "";
|
|
1453
|
+
const footerVisible = showFooter ?? !disableFooter;
|
|
1450
1454
|
return (jsxs("div", { ref: ref, className: cn("bg-white rounded-large overflow-hidden", widthClass, className), style: {
|
|
1451
1455
|
boxShadow: "0 1px 2px rgba(25, 25, 30, 0.1), 0 2px 6px rgba(25, 25, 30, 0.06)",
|
|
1452
1456
|
...(width !== "full" && width !== "auto" ? { width } : {}),
|
|
1453
|
-
}, children: [renderContent(),
|
|
1457
|
+
}, children: [renderContent(), footerVisible && (jsxs("div", { className: "flex flex-col", children: [jsx(Divider, { thickness: "thin", variant: "muted" }), jsxs("div", { className: cn("flex gap-3 p-4", footerLayout === "vertical"
|
|
1454
1458
|
? "flex-col"
|
|
1455
1459
|
: "items-center flex-row"), children: [jsx(Button, { variant: "secondary", color: "primary", size: "medium", isFullWidth: true, onClick: onSecondaryClick, children: secondaryButtonText }), jsx(Button, { variant: "primary", color: "primary", size: "medium", isFullWidth: true, onClick: onPrimaryClick, children: primaryButtonText })] })] }))] }));
|
|
1456
1460
|
});
|
|
@@ -1468,7 +1472,7 @@ const dropdownVariants = cva("bg-surface-fill-primary-normal border border-surfa
|
|
|
1468
1472
|
size: "medium",
|
|
1469
1473
|
},
|
|
1470
1474
|
});
|
|
1471
|
-
const Dropdown = React.forwardRef(({ className, trigger, items = [], sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, ...props }, ref) => {
|
|
1475
|
+
const Dropdown = React.forwardRef(({ className, trigger, items = [], customContent, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, showFooter, ...props }, ref) => {
|
|
1472
1476
|
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
|
|
1473
1477
|
const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
|
|
1474
1478
|
const dropdownRef = React.useRef(null);
|
|
@@ -1515,7 +1519,7 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], sectionHead
|
|
|
1515
1519
|
medium: "w-80",
|
|
1516
1520
|
large: "w-96",
|
|
1517
1521
|
};
|
|
1518
|
-
return (jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isOpen && (jsx(DropdownMenu, { ref: ref, items: items, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: isEmpty, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, onClose: () => handleOpenChange(false), className: cn("absolute z-50 mt-2", menuClassName, className), width: sizeMap[size] }))] }));
|
|
1522
|
+
return (jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isOpen && (jsx(DropdownMenu, { ref: ref, items: items, customContent: customContent, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: isEmpty, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: showFooter, onClose: () => handleOpenChange(false), className: cn("absolute z-50 mt-2", menuClassName, className), width: sizeMap[size] }))] }));
|
|
1519
1523
|
});
|
|
1520
1524
|
Dropdown.displayName = "Dropdown";
|
|
1521
1525
|
|
|
@@ -2911,7 +2915,7 @@ function renderDefaultEmptyState({ colSpan }) {
|
|
|
2911
2915
|
}
|
|
2912
2916
|
|
|
2913
2917
|
// ==================== Component ====================
|
|
2914
|
-
function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
|
|
2918
|
+
function TableComponent({ className, wrapperClassName, containerClassName, variant, size = "medium", table, enableRowSelection = false, enableSelectAll = false, isLoading = false, loading, loadingComponent, emptyComponent, enableHorizontalScroll = false, stickyHeader = false, maxHeight, showRowHover = true, onRowClick, rowClassName, headerClassName, cellClassName, showHeaderBackground = true, detailPanel, hideColumnsOnDetailOpen = 3, selectedRowId, onRowSelectionChange, loadingSkeletonRows, loadingSkeletonHeight, columnWidths, columnMinWidths, columnMaxWidths, ...props }, ref) {
|
|
2915
2919
|
// ==================== State ====================
|
|
2916
2920
|
const [internalSelectedRowId, setInternalSelectedRowId] = React.useState(null);
|
|
2917
2921
|
const selectedRowIdRef = React.useRef(null);
|
|
@@ -2974,6 +2978,43 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
|
|
|
2974
2978
|
maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
|
|
2975
2979
|
};
|
|
2976
2980
|
}, [maxHeight]);
|
|
2981
|
+
const resolvedLoading = typeof loading === "boolean" ? loading : Boolean(isLoading);
|
|
2982
|
+
const skeletonRowCount = loadingSkeletonRows ?? 5;
|
|
2983
|
+
const sizeKey = size || "medium";
|
|
2984
|
+
const skeletonHeightMap = {
|
|
2985
|
+
small: 16,
|
|
2986
|
+
medium: 20,
|
|
2987
|
+
large: 24,
|
|
2988
|
+
};
|
|
2989
|
+
const skeletonCellHeight = normalizeSizeValue(loadingSkeletonHeight ?? skeletonHeightMap[sizeKey]);
|
|
2990
|
+
const selectionSkeletonSize = sizeKey === "small" ? 14 : sizeKey === "large" ? 20 : 16;
|
|
2991
|
+
const renderSkeletonRows = React.useCallback(() => {
|
|
2992
|
+
const visibleColumns = table.getVisibleLeafColumns();
|
|
2993
|
+
if (visibleColumns.length === 0) {
|
|
2994
|
+
return renderDefaultLoadingState({
|
|
2995
|
+
colSpan: table.getAllColumns().length || 1,
|
|
2996
|
+
});
|
|
2997
|
+
}
|
|
2998
|
+
return Array.from({ length: skeletonRowCount }).map((_, rowIndex) => (jsxs("tr", { children: [enableRowSelection && (jsx("td", { className: cn(tableCellVariants({ size: sizeKey }), "w-10", cellClassName), children: jsx(Skeleton, { variant: "circle", width: selectionSkeletonSize, height: selectionSkeletonSize }) })), visibleColumns.map((column) => (jsx("td", { className: cn(tableCellVariants({ size: sizeKey }), column.columnDef.meta?.cellClassName, cellClassName), style: getColumnStyle(column.id, {
|
|
2999
|
+
width: column.getSize(),
|
|
3000
|
+
minWidth: column.columnDef.minSize,
|
|
3001
|
+
maxWidth: column.columnDef.maxSize,
|
|
3002
|
+
}), children: jsx(Skeleton, { className: "w-full", height: skeletonCellHeight, rounded: "medium" }) }, `${column.id}-${rowIndex}`)))] }, `skeleton-row-${rowIndex}`)));
|
|
3003
|
+
}, [
|
|
3004
|
+
cellClassName,
|
|
3005
|
+
enableRowSelection,
|
|
3006
|
+
getColumnStyle,
|
|
3007
|
+
selectionSkeletonSize,
|
|
3008
|
+
sizeKey,
|
|
3009
|
+
skeletonCellHeight,
|
|
3010
|
+
skeletonRowCount,
|
|
3011
|
+
table,
|
|
3012
|
+
]);
|
|
3013
|
+
const renderLoadingContent = React.useCallback(() => {
|
|
3014
|
+
if (loadingComponent)
|
|
3015
|
+
return loadingComponent;
|
|
3016
|
+
return renderSkeletonRows();
|
|
3017
|
+
}, [loadingComponent, renderSkeletonRows]);
|
|
2977
3018
|
// ==================== Callbacks ====================
|
|
2978
3019
|
const getRowClassName = React.useCallback((row) => {
|
|
2979
3020
|
if (typeof rowClassName === "function") {
|
|
@@ -3010,19 +3051,13 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
|
|
|
3010
3051
|
onRowSelectionChange(null);
|
|
3011
3052
|
}
|
|
3012
3053
|
};
|
|
3013
|
-
// ==================== Render Helpers ====================
|
|
3014
|
-
const renderLoadingState = () => {
|
|
3015
|
-
if (loadingComponent)
|
|
3016
|
-
return loadingComponent;
|
|
3017
|
-
return renderDefaultLoadingState({ colSpan: table.getAllColumns().length });
|
|
3018
|
-
};
|
|
3019
3054
|
const renderEmptyState = () => {
|
|
3020
3055
|
if (emptyComponent)
|
|
3021
3056
|
return emptyComponent;
|
|
3022
3057
|
return renderDefaultEmptyState({ colSpan: table.getAllColumns().length });
|
|
3023
3058
|
};
|
|
3024
3059
|
// ==================== Render ====================
|
|
3025
|
-
return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: [jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }),
|
|
3060
|
+
return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsxs("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: [jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, isDetailPanelOpen: isDetailPanelOpen, visibleHeadersCount: visibleHeadersCount, effectiveSelectedRowId: effectiveSelectedRowId, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }), detailPanel && (jsx(DetailPanel, { isOpen: isDetailPanelOpen, content: detailPanel, data: getSelectedRowData(), onClose: handleDetailPanelClose }))] }) }));
|
|
3026
3061
|
}
|
|
3027
3062
|
// ==================== Export ====================
|
|
3028
3063
|
const Table = React.forwardRef(TableComponent);
|