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.
Files changed (28) hide show
  1. package/dist/components/Table/Table.context.d.ts +6 -0
  2. package/dist/components/Table/Table.d.ts +4 -3
  3. package/dist/components/Table/Table.stories.d.ts +3 -3
  4. package/dist/components/Table/Table.types.d.ts +6 -0
  5. package/dist/components/Table/index.d.ts +1 -1
  6. package/dist/components/Table/subcomponents/Cell/Cell.d.ts +8 -1
  7. package/dist/components/Table/subcomponents/Cell/Cell.stories.d.ts +5 -1
  8. package/dist/components/Table/subcomponents/Cell/CellContent.d.ts +3 -2
  9. package/dist/components/Table/subcomponents/HeadCell/HeadCell.d.ts +4 -2
  10. package/dist/components/Table/subcomponents/HeadCell/HeadCell.stories.d.ts +3 -1
  11. package/dist/components/Table/subcomponents/Row.d.ts +8 -1
  12. package/dist/index.js +6563 -6193
  13. package/lib/components/Table/Table.context.ts +12 -0
  14. package/lib/components/Table/Table.tsx +91 -12
  15. package/lib/components/Table/Table.types.ts +21 -0
  16. package/lib/components/Table/__tests__/Table.test.tsx +95 -1
  17. package/lib/components/Table/__tests__/__snapshots__/Table.test.tsx.snap +54 -13
  18. package/lib/components/Table/index.ts +6 -1
  19. package/lib/components/Table/subcomponents/Body.tsx +16 -3
  20. package/lib/components/Table/subcomponents/Cell/Cell.tsx +193 -4
  21. package/lib/components/Table/subcomponents/Cell/CellContent.tsx +63 -3
  22. package/lib/components/Table/subcomponents/Cell/__tests__/__snapshots__/Cell.test.tsx.snap +15 -10
  23. package/lib/components/Table/subcomponents/Head.tsx +14 -3
  24. package/lib/components/Table/subcomponents/HeadCell/HeadCell.tsx +17 -4
  25. package/lib/components/Table/subcomponents/HeadCell/__tests__/__snapshots__/HeadCell.test.tsx.snap +3 -3
  26. package/lib/components/Table/subcomponents/Row.tsx +195 -6
  27. package/lib/components/Table/subcomponents/SortIcon.tsx +4 -4
  28. 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 }: import('./subcomponents').TableHeadCellProps) => import("react").JSX.Element;
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;