uikit-react-public 0.36.1 → 0.37.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/components/Table/Table.context.d.ts +6 -0
- package/dist/components/Table/Table.d.ts +4 -3
- package/dist/components/Table/Table.stories.d.ts +3 -3
- package/dist/components/Table/Table.types.d.ts +6 -0
- package/dist/components/Table/index.d.ts +1 -1
- package/dist/components/Table/subcomponents/Cell/Cell.d.ts +8 -1
- package/dist/components/Table/subcomponents/Cell/Cell.stories.d.ts +5 -1
- package/dist/components/Table/subcomponents/Cell/CellContent.d.ts +3 -2
- package/dist/components/Table/subcomponents/HeadCell/HeadCell.d.ts +4 -2
- package/dist/components/Table/subcomponents/HeadCell/HeadCell.stories.d.ts +3 -1
- package/dist/components/Table/subcomponents/Row.d.ts +8 -1
- package/dist/index.js +6563 -6193
- package/lib/components/Table/Table.context.ts +12 -0
- package/lib/components/Table/Table.tsx +91 -12
- package/lib/components/Table/Table.types.ts +21 -0
- package/lib/components/Table/__tests__/Table.test.tsx +95 -1
- package/lib/components/Table/__tests__/__snapshots__/Table.test.tsx.snap +54 -13
- package/lib/components/Table/index.ts +6 -1
- package/lib/components/Table/subcomponents/Body.tsx +16 -3
- package/lib/components/Table/subcomponents/Cell/Cell.tsx +193 -4
- package/lib/components/Table/subcomponents/Cell/CellContent.tsx +63 -3
- package/lib/components/Table/subcomponents/Cell/__tests__/__snapshots__/Cell.test.tsx.snap +15 -10
- package/lib/components/Table/subcomponents/Head.tsx +14 -3
- package/lib/components/Table/subcomponents/HeadCell/HeadCell.tsx +17 -4
- package/lib/components/Table/subcomponents/HeadCell/__tests__/__snapshots__/HeadCell.test.tsx.snap +3 -3
- package/lib/components/Table/subcomponents/Row.tsx +195 -6
- package/lib/components/Table/subcomponents/SortIcon.tsx +4 -4
- package/package.json +1 -1
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { TableColumnMetadata } from './Table.types';
|
|
2
|
+
export type TableContextValue = {
|
|
3
|
+
columns: TableColumnMetadata[];
|
|
4
|
+
};
|
|
5
|
+
export declare const TableContextProvider: import('react').Provider<TableContextValue>;
|
|
6
|
+
export declare const useTableContext: () => TableContextValue;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { TableProps } from './Table.types';
|
|
2
|
+
import { TableHeadCellProps } from './subcomponents';
|
|
2
3
|
declare const Table: {
|
|
3
4
|
({ testId, className, children, ref, ariaLabel, ...props }: TableProps): import("react").JSX.Element;
|
|
4
5
|
Head: ({ className, children, ...props }: import('./subcomponents').TableHeadProps) => import("react").JSX.Element;
|
|
5
|
-
HeadCell: ({ variant, accessor, sort, onSortChange, showSortIcon, checked, onCheck, testId, className, children, checkboxAriaLabel, ...props }:
|
|
6
|
+
HeadCell: ({ variant, accessor, mobileRole, mobileLabel, sort, onSortChange, showSortIcon, checked, onCheck, testId, className, children, checkboxAriaLabel, ...props }: TableHeadCellProps) => import("react").JSX.Element;
|
|
6
7
|
Body: ({ className, children, ...props }: import('./subcomponents').TableBodyProps) => import("react").JSX.Element;
|
|
7
|
-
Row: ({ selected, className, children, ...props }: import('./subcomponents').TableRowProps) => import("react").JSX.Element;
|
|
8
|
-
Cell: ({ variant, icon, onCheck, checked, onButtonClick, testId, className, children, checkboxProps, buttonProps, ...props }: import('./subcomponents').TableCellProps) => import("react").JSX.Element;
|
|
8
|
+
Row: ({ selected, mobileExpanded, defaultMobileExpanded, mobileCollapsible, mobileDetailsLabel, mobileExpandLabel, mobileCollapseLabel, onMobileExpandedChange, className, children, ...props }: import('./subcomponents').TableRowProps) => import("react").JSX.Element;
|
|
9
|
+
Cell: ({ variant, icon, onCheck, checked, onButtonClick, testId, className, children, checkboxProps, buttonProps, __mobileColumnIndex, __mobileHasSelection, __mobileHasPrimaryMeta, __mobileIsFirstBodyField, ...props }: import('./subcomponents').TableCellProps) => import("react").JSX.Element;
|
|
9
10
|
};
|
|
10
11
|
export default Table;
|
|
@@ -4,10 +4,10 @@ declare const meta: {
|
|
|
4
4
|
component: {
|
|
5
5
|
({ testId, className, children, ref, ariaLabel, ...props }: import('./Table.types').TableProps): import("react").JSX.Element;
|
|
6
6
|
Head: ({ className, children, ...props }: import('./subcomponents').TableHeadProps) => import("react").JSX.Element;
|
|
7
|
-
HeadCell: ({ variant, accessor, sort, onSortChange, showSortIcon, checked, onCheck, testId, className, children, checkboxAriaLabel, ...props }: import('./subcomponents').TableHeadCellProps) => import("react").JSX.Element;
|
|
7
|
+
HeadCell: ({ variant, accessor, mobileRole, mobileLabel, sort, onSortChange, showSortIcon, checked, onCheck, testId, className, children, checkboxAriaLabel, ...props }: import('./subcomponents').TableHeadCellProps) => import("react").JSX.Element;
|
|
8
8
|
Body: ({ className, children, ...props }: import('./subcomponents').TableBodyProps) => import("react").JSX.Element;
|
|
9
|
-
Row: ({ selected, className, children, ...props }: import('./subcomponents').TableRowProps) => import("react").JSX.Element;
|
|
10
|
-
Cell: ({ variant, icon, onCheck, checked, onButtonClick, testId, className, children, checkboxProps, buttonProps, ...props }: import('./subcomponents').TableCellProps) => import("react").JSX.Element;
|
|
9
|
+
Row: ({ selected, mobileExpanded, defaultMobileExpanded, mobileCollapsible, mobileDetailsLabel, mobileExpandLabel, mobileCollapseLabel, onMobileExpandedChange, className, children, ...props }: import('./subcomponents').TableRowProps) => import("react").JSX.Element;
|
|
10
|
+
Cell: ({ variant, icon, onCheck, checked, onButtonClick, testId, className, children, checkboxProps, buttonProps, __mobileColumnIndex, __mobileHasSelection, __mobileHasPrimaryMeta, __mobileIsFirstBodyField, ...props }: import('./subcomponents').TableCellProps) => import("react").JSX.Element;
|
|
11
11
|
};
|
|
12
12
|
parameters: {
|
|
13
13
|
layout: string;
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
export type ColumnVariant = 'default' | 'numeric' | 'checkbox' | 'button';
|
|
2
2
|
export type SortOrder = 'asc' | 'desc' | null;
|
|
3
|
+
export type TableMobileRole = 'selection' | 'primaryMeta' | 'primary' | 'status' | 'primaryStatus' | 'field' | 'primaryAction' | 'contextMenu' | 'hidden';
|
|
4
|
+
export type NormalizedTableMobileRole = Exclude<TableMobileRole, 'primaryStatus'>;
|
|
5
|
+
export type TableColumnMetadata = {
|
|
6
|
+
mobileRole: NormalizedTableMobileRole;
|
|
7
|
+
mobileLabel?: string;
|
|
8
|
+
};
|
|
3
9
|
export type SortPattern = {
|
|
4
10
|
accessor: string | null;
|
|
5
11
|
order: SortOrder;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { default } from './Table';
|
|
2
|
-
export type { TableProps, ColumnVariant } from './Table.types';
|
|
2
|
+
export type { TableProps, ColumnVariant, TableMobileRole, TableColumnMetadata, } from './Table.types';
|
|
3
3
|
export type { TableHeadProps, TableHeadCellProps, TableBodyProps, TableRowProps, TableCellProps, } from './subcomponents';
|
|
@@ -11,6 +11,13 @@ export interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElemen
|
|
|
11
11
|
testId?: string;
|
|
12
12
|
checkboxProps?: Omit<CheckboxProps, 'checked' | 'onChange'>;
|
|
13
13
|
buttonProps?: Omit<ButtonProps<'button'>, 'variant' | 'onClick' | 'className'>;
|
|
14
|
+
/** @internal */
|
|
15
|
+
__mobileColumnIndex?: number;
|
|
16
|
+
__mobileHasSelection?: boolean;
|
|
17
|
+
/** @internal */
|
|
18
|
+
__mobileHasPrimaryMeta?: boolean;
|
|
19
|
+
/** @internal */
|
|
20
|
+
__mobileIsFirstBodyField?: boolean;
|
|
14
21
|
}
|
|
15
|
-
declare const Cell: ({ variant, icon, onCheck, checked, onButtonClick, testId, className, children, checkboxProps, buttonProps, ...props }: TableCellProps) => import("react").JSX.Element;
|
|
22
|
+
declare const Cell: ({ variant, icon, onCheck, checked, onButtonClick, testId, className, children, checkboxProps, buttonProps, __mobileColumnIndex, __mobileHasSelection, __mobileHasPrimaryMeta, __mobileIsFirstBodyField, ...props }: TableCellProps) => import("react").JSX.Element;
|
|
16
23
|
export default Cell;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { StoryObj } from '@storybook/react-vite';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ variant, icon, onCheck, checked, onButtonClick, testId, className, children, checkboxProps, buttonProps, ...props }: import('./Cell').TableCellProps) => import("react").JSX.Element;
|
|
4
|
+
component: ({ variant, icon, onCheck, checked, onButtonClick, testId, className, children, checkboxProps, buttonProps, __mobileColumnIndex, __mobileHasSelection, __mobileHasPrimaryMeta, __mobileIsFirstBodyField, ...props }: import('./Cell').TableCellProps) => import("react").JSX.Element;
|
|
5
5
|
parameters: {
|
|
6
6
|
layout: string;
|
|
7
7
|
};
|
|
@@ -19,6 +19,10 @@ declare const meta: {
|
|
|
19
19
|
testId?: string | undefined;
|
|
20
20
|
checkboxProps?: Omit<import('../../..').CheckboxProps, "checked" | "onChange"> | undefined;
|
|
21
21
|
buttonProps?: Omit<import('../../..').ButtonProps<"button">, "variant" | "onClick" | "className"> | undefined;
|
|
22
|
+
__mobileColumnIndex?: number | undefined;
|
|
23
|
+
__mobileHasSelection?: boolean | undefined;
|
|
24
|
+
__mobileHasPrimaryMeta?: boolean | undefined;
|
|
25
|
+
__mobileIsFirstBodyField?: boolean | undefined;
|
|
22
26
|
defaultChecked?: boolean | undefined | undefined;
|
|
23
27
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
24
28
|
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { CheckboxProps } from '../../../Checkbox/Checkbox';
|
|
2
2
|
import { ButtonProps } from '../../../Button';
|
|
3
|
-
import { ColumnVariant } from '../../Table.types';
|
|
3
|
+
import { ColumnVariant, NormalizedTableMobileRole } from '../../Table.types';
|
|
4
4
|
interface CellContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
5
|
variant: ColumnVariant;
|
|
6
|
+
mobileRole: NormalizedTableMobileRole;
|
|
6
7
|
icon?: React.ReactNode;
|
|
7
8
|
checked?: boolean;
|
|
8
9
|
checkboxProps?: Omit<CheckboxProps, 'checked' | 'onChange'>;
|
|
@@ -10,5 +11,5 @@ interface CellContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
10
11
|
handleCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
11
12
|
handleButtonClick: (event: React.UIEvent) => void;
|
|
12
13
|
}
|
|
13
|
-
declare const CellContent: ({ variant, icon, checked, checkboxProps, buttonProps, handleCheckboxChange, handleButtonClick, children, }: CellContentProps) => import("react").JSX.Element;
|
|
14
|
+
declare const CellContent: ({ variant, mobileRole, icon, checked, checkboxProps, buttonProps, handleCheckboxChange, handleButtonClick, children, }: CellContentProps) => import("react").JSX.Element;
|
|
14
15
|
export default CellContent;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { ColumnVariant, SortOrder } from '../../Table.types';
|
|
1
|
+
import { ColumnVariant, SortOrder, TableMobileRole } from '../../Table.types';
|
|
2
2
|
export interface TableHeadCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
|
|
3
3
|
variant?: ColumnVariant;
|
|
4
4
|
accessor?: string;
|
|
5
|
+
mobileRole?: TableMobileRole;
|
|
6
|
+
mobileLabel?: string;
|
|
5
7
|
sort?: SortOrder;
|
|
6
8
|
onSortChange?: (accessor: string, sort: SortOrder, event: React.UIEvent) => void;
|
|
7
9
|
showSortIcon?: boolean;
|
|
@@ -10,5 +12,5 @@ export interface TableHeadCellProps extends React.HTMLAttributes<HTMLTableCellEl
|
|
|
10
12
|
testId?: string;
|
|
11
13
|
checkboxAriaLabel?: string;
|
|
12
14
|
}
|
|
13
|
-
declare const HeadCell: ({ variant, accessor, sort, onSortChange, showSortIcon, checked, onCheck, testId, className, children, checkboxAriaLabel, ...props }: TableHeadCellProps) => import("react").JSX.Element;
|
|
15
|
+
declare const HeadCell: ({ variant, accessor, mobileRole, mobileLabel, sort, onSortChange, showSortIcon, checked, onCheck, testId, className, children, checkboxAriaLabel, ...props }: TableHeadCellProps) => import("react").JSX.Element;
|
|
14
16
|
export default HeadCell;
|
|
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
|
|
|
2
2
|
import { SortOrder } from '../../Table.types';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ({ variant, accessor, sort, onSortChange, showSortIcon, checked, onCheck, testId, className, children, checkboxAriaLabel, ...props }: import('./HeadCell').TableHeadCellProps) => import("react").JSX.Element;
|
|
5
|
+
component: ({ variant, accessor, mobileRole, mobileLabel, sort, onSortChange, showSortIcon, checked, onCheck, testId, className, children, checkboxAriaLabel, ...props }: import('./HeadCell').TableHeadCellProps) => import("react").JSX.Element;
|
|
6
6
|
parameters: {
|
|
7
7
|
layout: string;
|
|
8
8
|
};
|
|
@@ -17,6 +17,8 @@ declare const meta: {
|
|
|
17
17
|
decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
18
18
|
variant?: import('../..').ColumnVariant | undefined;
|
|
19
19
|
accessor?: string | undefined;
|
|
20
|
+
mobileRole?: import('../..').TableMobileRole | undefined;
|
|
21
|
+
mobileLabel?: string | undefined;
|
|
20
22
|
sort?: SortOrder | undefined;
|
|
21
23
|
onSortChange?: ((accessor: string, sort: SortOrder, event: React.UIEvent) => void) | undefined;
|
|
22
24
|
showSortIcon?: boolean | undefined;
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
2
2
|
selected?: boolean;
|
|
3
|
+
mobileExpanded?: boolean;
|
|
4
|
+
defaultMobileExpanded?: boolean;
|
|
5
|
+
mobileCollapsible?: boolean;
|
|
6
|
+
mobileDetailsLabel?: string;
|
|
7
|
+
mobileExpandLabel?: string;
|
|
8
|
+
mobileCollapseLabel?: string;
|
|
9
|
+
onMobileExpandedChange?: (expanded: boolean) => void;
|
|
3
10
|
}
|
|
4
|
-
declare const Row: ({ selected, className, children, ...props }: TableRowProps) => import("react").JSX.Element;
|
|
11
|
+
declare const Row: ({ selected, mobileExpanded, defaultMobileExpanded, mobileCollapsible, mobileDetailsLabel, mobileExpandLabel, mobileCollapseLabel, onMobileExpandedChange, className, children, ...props }: TableRowProps) => import("react").JSX.Element;
|
|
5
12
|
export default Row;
|