gantri-components 2.33.1 → 2.34.0-beta.2

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 (71) hide show
  1. package/dist/components/aspect-ratio/aspect-ratio.styles.d.ts +1 -2
  2. package/dist/components/badge/badge.styles.d.ts +1 -1
  3. package/dist/components/box/box.styles.d.ts +1 -3
  4. package/dist/components/box/box.types.d.ts +4 -21
  5. package/dist/components/button/button.styles.d.ts +1 -2
  6. package/dist/components/cell/cell.styles.d.ts +1 -3
  7. package/dist/components/grid/grid.styles.d.ts +1 -3
  8. package/dist/components/icon/generated/ui-control/ExlamationCircleFilled.d.ts +3 -0
  9. package/dist/components/icon/generated/ui-control/ExlamationCircleFilled24.d.ts +3 -0
  10. package/dist/components/index.d.ts +1 -0
  11. package/dist/components/modal/modal.styles.d.ts +2 -4
  12. package/dist/components/paging/index.d.ts +1 -0
  13. package/dist/components/paging/paging.d.ts +5 -0
  14. package/dist/components/paging/paging.presets.d.ts +2 -0
  15. package/dist/components/paging/paging.styles.d.ts +5 -0
  16. package/dist/components/paging/paging.types.d.ts +6 -0
  17. package/dist/components/table/components/table-actions-wrapper/components/search/index.d.ts +1 -0
  18. package/dist/components/table/components/table-actions-wrapper/components/search/search.d.ts +2 -0
  19. package/dist/components/table/components/table-actions-wrapper/components/search/search.styles.d.ts +1 -0
  20. package/dist/components/table/components/table-actions-wrapper/components/search/search.types.d.ts +7 -0
  21. package/dist/components/table/components/table-actions-wrapper/components/sort/helpers/get-sort-mapping/get-sort-mapping.d.ts +3 -0
  22. package/dist/components/table/components/table-actions-wrapper/components/sort/helpers/get-sort-mapping/get-sort-mapping.types.d.ts +2 -0
  23. package/dist/components/table/components/table-actions-wrapper/components/sort/helpers/get-sort-mapping/index.d.ts +1 -0
  24. package/dist/components/table/components/table-actions-wrapper/components/sort/index.d.ts +1 -0
  25. package/dist/components/table/components/table-actions-wrapper/components/sort/sort.d.ts +2 -0
  26. package/dist/components/table/components/table-actions-wrapper/components/sort/sort.styles.d.ts +2 -0
  27. package/dist/components/table/components/table-actions-wrapper/components/sort/sort.types.d.ts +24 -0
  28. package/dist/components/table/components/table-actions-wrapper/index.d.ts +1 -0
  29. package/dist/components/table/components/table-actions-wrapper/table-actions-wrapper.d.ts +30 -0
  30. package/dist/components/table/components/table-footer/index.d.ts +1 -0
  31. package/dist/components/table/components/table-footer/table-footer.d.ts +3 -0
  32. package/dist/components/table/components/table-footer/table-footer.types.d.ts +5 -0
  33. package/dist/components/table/components/table-header/index.d.ts +1 -0
  34. package/dist/components/table/components/table-header/table-header.d.ts +3 -0
  35. package/dist/components/table/components/table-header/table-header.types.d.ts +5 -0
  36. package/dist/components/table/components/table-row/hooks/use-drag-and-drop/index.d.ts +1 -0
  37. package/dist/components/table/components/table-row/hooks/use-drag-and-drop/use-drag-and-drop.d.ts +7 -0
  38. package/dist/components/table/components/table-row/hooks/use-drag-and-drop/use-drag-and-drop.types.d.ts +10 -0
  39. package/dist/components/table/components/table-row/index.d.ts +1 -0
  40. package/dist/components/table/components/table-row/table-row.constants.d.ts +10 -0
  41. package/dist/components/table/components/table-row/table-row.d.ts +3 -0
  42. package/dist/components/table/components/table-row/table-row.styles.d.ts +4 -0
  43. package/dist/components/table/components/table-row/table-row.types.d.ts +12 -0
  44. package/dist/components/table/helpers/add-missing-ids/index.d.ts +3 -0
  45. package/dist/components/table/index.d.ts +1 -0
  46. package/dist/components/table/table.d.ts +5 -0
  47. package/dist/components/table/table.presets.d.ts +2 -0
  48. package/dist/components/table/table.styles.d.ts +3 -0
  49. package/dist/components/table/table.types.d.ts +32 -0
  50. package/dist/global/index.d.ts +0 -1
  51. package/dist/helpers/format-as-locale-number/format-as-locale-number.d.ts +6 -0
  52. package/dist/helpers/format-as-locale-number/format-as-locale-number.types.d.ts +3 -0
  53. package/dist/helpers/format-as-locale-number/index.d.ts +1 -0
  54. package/dist/helpers/mark-sticky-elements/__tests__/mark-sticky-elements.test.d.ts +1 -0
  55. package/dist/helpers/mark-sticky-elements/__tests__/setup.d.ts +2 -0
  56. package/dist/helpers/mark-sticky-elements/helpers/get-intersection-observer-callback/__tests__/get-intersection-observer-callback.test.d.ts +1 -0
  57. package/dist/helpers/mark-sticky-elements/helpers/get-intersection-observer-callback/get-intersection-observer-callback.d.ts +2 -0
  58. package/dist/helpers/mark-sticky-elements/helpers/get-intersection-observer-callback/get-intersection-observer-callback.types.d.ts +8 -0
  59. package/dist/helpers/mark-sticky-elements/helpers/get-intersection-observer-callback/index.d.ts +1 -0
  60. package/dist/helpers/mark-sticky-elements/index.d.ts +1 -0
  61. package/dist/helpers/mark-sticky-elements/mark-sticky-elements.constants.d.ts +2 -0
  62. package/dist/helpers/mark-sticky-elements/mark-sticky-elements.d.ts +26 -0
  63. package/dist/helpers/mark-sticky-elements/mark-sticky-elements.types.d.ts +28 -0
  64. package/dist/index.cjs.js +1 -1
  65. package/dist/index.d.ts +1 -7
  66. package/dist/index.esm.js +1 -1
  67. package/dist/index.umd.js +1 -1
  68. package/dist/styles/theme.d.ts +1 -16
  69. package/dist/types/resolution-aware-prop.type.d.ts +1 -5
  70. package/package.json +4 -1
  71. package/dist/global/constants.d.ts +0 -92
@@ -1,7 +1,6 @@
1
1
  import { Property } from 'csstype';
2
2
  import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
3
3
  import { AspectRatioProps } from './aspect-ratio.types';
4
- import { PropsWithHidden } from '../box/box.types';
5
4
  export declare const populateAspectRatioStyles: (aspectRatio: ResolutionAwareProp<string>, height?: ResolutionAwareProp<Property.Height>) => import("styled-components").FlattenSimpleInterpolation;
6
- export declare const StyledAspectRatio: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<PropsWithHidden<AspectRatioProps>>, never>;
5
+ export declare const StyledAspectRatio: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<AspectRatioProps>, never>;
7
6
  export declare const StyledAspectRatioContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -1,2 +1,2 @@
1
1
  import { BadgeProps } from './badge.types';
2
- export declare const StyledBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, Pick<BadgeProps, "color" | "minWidth" | "width" | "variant" | "opacity" | "size" | "borderColor" | "textColor">, never>;
2
+ export declare const StyledBadge: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, Pick<BadgeProps, "color" | "variant" | "minWidth" | "width" | "opacity" | "size" | "borderColor" | "textColor">, never>;
@@ -1,4 +1,2 @@
1
1
  import { BoxProps } from './box.types';
2
- export declare const StyledBoxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BoxProps & {
3
- $hidden?: import("../../types/resolution-aware-prop.type").ResolutionAwareProp<boolean> | undefined;
4
- }, never>;
2
+ export declare const StyledBoxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, BoxProps, never>;
@@ -1,22 +1,9 @@
1
1
  import { HTMLAttributes } from 'react';
2
- import { Property } from 'csstype';
3
- import { Color } from '../../styles';
2
+ import { Globals, Property } from 'csstype';
4
3
  import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
5
- /**
6
- * @deprecated Use values from our 8 point grid instead
7
- */
8
- type DeprecatedSize = 's1' | 's2' | 's3' | 's4' | 's5' | 's6';
9
- /**
10
- *
11
- */
12
- export type BoxDimension = DeprecatedSize | '.5x' | 'x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | '11x' | '12x' | '24x' | 'unset' | null | `${number}px` | `${number}rem`;
13
- type AllowedBoxDimension<T> = T extends BoxDimension ? T : never;
14
- export interface ResolutionAwarePropBase<T> {
15
- lg?: AllowedBoxDimension<T>;
16
- md?: AllowedBoxDimension<T>;
17
- sm?: AllowedBoxDimension<T>;
18
- }
19
- export interface BaseProps extends Omit<HTMLAttributes<any>, 'hidden'> {
4
+ import { Color } from '../../styles';
5
+ export type BoxDimension = 's1' | 's2' | 's3' | 's4' | 's5' | 's6' | Globals | string;
6
+ export interface BaseProps extends HTMLAttributes<any> {
20
7
  children?: any;
21
8
  className?: string;
22
9
  }
@@ -49,7 +36,3 @@ export interface BoxProps extends BaseProps {
49
36
  verticalPadding?: ResolutionAwareProp<BoxDimension>;
50
37
  width?: ResolutionAwareProp<string>;
51
38
  }
52
- export type PropsWithHidden<T> = T & {
53
- $hidden?: ResolutionAwareProp<boolean>;
54
- };
55
- export {};
@@ -1,5 +1,4 @@
1
1
  import { DefaultTheme } from 'styled-components';
2
2
  import { ButtonProps } from './button.types';
3
- import { PropsWithHidden } from '../box/box.types';
4
- export declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme, Partial<PropsWithHidden<ButtonProps>>, never>;
3
+ export declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme, Partial<ButtonProps>, never>;
5
4
  export declare const StyledButtonContent: import("styled-components").StyledComponent<"div", DefaultTheme, ButtonProps, never>;
@@ -1,4 +1,2 @@
1
1
  import { CellProps } from './cell.types';
2
- export declare const StyledCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CellProps & {
3
- $hidden?: import("../../types/resolution-aware-prop.type").ResolutionAwareProp<boolean> | undefined;
4
- }, never>;
2
+ export declare const StyledCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, CellProps, never>;
@@ -1,4 +1,2 @@
1
1
  import { GridProps } from './grid.types';
2
- export declare const StyledGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
3
- $hidden?: import("../../types/resolution-aware-prop.type").ResolutionAwareProp<boolean> | undefined;
4
- }, never>;
2
+ export declare const StyledGrid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps, never>;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const SvgExlamationCircleFilled: React.NamedExoticComponent<object>;
3
+ export default SvgExlamationCircleFilled;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const SvgExlamationCircleFilled24: React.NamedExoticComponent<object>;
3
+ export default SvgExlamationCircleFilled24;
@@ -26,6 +26,7 @@ export * from './radio';
26
26
  export * from './search-field';
27
27
  export * from './slider';
28
28
  export * from './stack';
29
+ export * from './table';
29
30
  export * from './tabs';
30
31
  export * from './text-area';
31
32
  export * from './text-field';
@@ -1,14 +1,12 @@
1
1
  /// <reference types="react" />
2
- import { Property } from 'csstype';
3
2
  import { ModalProps } from './modal.types';
4
- import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
5
3
  export declare const StyledModal: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
6
4
  export declare const StyledModalBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ModalProps & {
7
5
  isFullScreen?: boolean | undefined;
8
6
  noTopSpacing?: boolean | undefined;
9
7
  } & {
10
- $height?: ResolutionAwareProp<Property.Height<0 | (string & {})>> | undefined;
11
- $width?: ResolutionAwareProp<Property.Width<0 | (string & {})>> | undefined;
8
+ $height?: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<string & {}> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"-moz-initial"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"inherit"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"initial"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"revert"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"unset"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"auto"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<0> | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"-moz-max-content"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"-moz-min-content"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"-webkit-fit-content"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"fit-content"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"max-content"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"min-content"> | undefined;
9
+ $width?: 0 | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<string & {}> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"-moz-initial"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"inherit"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"initial"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"revert"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"unset"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"auto"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<0> | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "fit-content" | "max-content" | "min-content" | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"-moz-max-content"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"-moz-min-content"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"-webkit-fit-content"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"fit-content"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"max-content"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"min-content"> | "-moz-fit-content" | "-webkit-max-content" | "intrinsic" | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"-moz-fit-content"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"-webkit-max-content"> | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"intrinsic"> | "min-intrinsic" | import("../../types/resolution-aware-prop.type").ResolutionAwarePropBase<"min-intrinsic"> | undefined;
12
10
  }, never>;
13
11
  export declare const StyledModalContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../stack/stack.types").StackProps & import("react").RefAttributes<import("../stack/stack.types").StackProps>>, import("styled-components").DefaultTheme, {
14
12
  isFullScreen?: boolean | undefined;
@@ -0,0 +1 @@
1
+ export { Paging } from './paging';
@@ -0,0 +1,5 @@
1
+ import { PagingProps } from './paging.types';
2
+ export declare const Paging: {
3
+ (props: PagingProps): JSX.Element;
4
+ defaultProps: Partial<PagingProps>;
5
+ };
@@ -0,0 +1,2 @@
1
+ import { PagingProps } from './paging.types';
2
+ export declare const pagingDefaultProps: Partial<PagingProps>;
@@ -0,0 +1,5 @@
1
+ /// <reference types="react" />
2
+ export declare const StyledFlex: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../flex/flex.types").FlexProps & import("react").RefAttributes<import("../flex/flex.types").FlexProps>>, import("styled-components").DefaultTheme, {}, never>;
3
+ export declare const StyledPagingButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
4
+ disabled: boolean;
5
+ }, never>;
@@ -0,0 +1,6 @@
1
+ export interface PagingProps {
2
+ currentPage: number;
3
+ onPageChange: (page: number) => void;
4
+ pageCount: number;
5
+ total: number;
6
+ }
@@ -0,0 +1,2 @@
1
+ import { SearchProps } from './search.types';
2
+ export declare const Search: (props: SearchProps) => JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const StyledSearchInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -0,0 +1,7 @@
1
+ import { TextFieldProps } from '../../../../../text-field';
2
+ export interface SearchProps {
3
+ onChange: TextFieldProps['onTextChange'];
4
+ onFocus?: TextFieldProps['onFocus'];
5
+ placeholder?: string;
6
+ value?: string;
7
+ }
@@ -0,0 +1,3 @@
1
+ import { TableSortField } from '../../sort.types';
2
+ import { SortMapping } from './get-sort-mapping.types';
3
+ export declare const getSortMapping: <SortingField = string>(sortingOptions?: TableSortField<SortingField>[]) => SortMapping<SortingField>;
@@ -0,0 +1,2 @@
1
+ import { SortInfo } from '../../../../table.props';
2
+ export type SortMapping<SortingField = string> = Record<string, SortInfo<SortingField>>;
@@ -0,0 +1,2 @@
1
+ import { SortProps } from './sort.types';
2
+ export declare const Sort: (props: SortProps) => JSX.Element;
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const StyledDropdown: import("styled-components").StyledComponent<import("react").FC<import("react").PropsWithChildren<import("../../../../../dropdown").DropdownProps<any>>>, import("styled-components").DefaultTheme, {}, never>;
@@ -0,0 +1,24 @@
1
+ export interface SortProps {
2
+ current: SortInfo;
3
+ disabled?: boolean;
4
+ fields: TableSortField<string>[];
5
+ onSort: (sortInfo: SortInfo) => void;
6
+ }
7
+ export interface SortInfo<SortingField = string> {
8
+ label?: string;
9
+ sortingField: SortingField;
10
+ sortingType?: SortingType;
11
+ }
12
+ export type SortingType = 'ASC' | 'DESC';
13
+ export type TableSortField<SortingField = string> = {
14
+ bidirectional?: never;
15
+ label: string;
16
+ sortingField: SortingField;
17
+ /** If not provided, defaults to 'DESC' */
18
+ sortingType?: SortingType;
19
+ } | {
20
+ bidirectional: true;
21
+ label: string;
22
+ sortingField: SortingField;
23
+ sortingType?: never;
24
+ };
@@ -0,0 +1 @@
1
+ export * from './table-actions-wrapper';
@@ -0,0 +1,30 @@
1
+ import { JSXElementConstructor, PropsWithChildren } from 'react';
2
+ import { PagingProps } from '../../../paging/paging.types';
3
+ import { SortProps } from './components/sort/sort.types';
4
+ export type FiltersProps = {
5
+ FiltersContent: JSX.Element;
6
+ count: number;
7
+ numActive: number;
8
+ onApply: () => void;
9
+ onClose: () => void;
10
+ onReset: () => void;
11
+ };
12
+ export interface SearchProps {
13
+ onSearch: (value: string) => void;
14
+ placeholder?: string;
15
+ value: string;
16
+ }
17
+ export interface CustomActionProps {
18
+ Component: JSXElementConstructor<Record<never, never>>;
19
+ position?: 'left' | 'right';
20
+ }
21
+ interface TableActionsWrapperProps {
22
+ customAction: CustomActionProps | undefined;
23
+ filters: FiltersProps | undefined;
24
+ paging: PagingProps | undefined;
25
+ search: SearchProps | undefined;
26
+ sorting: SortProps | undefined;
27
+ }
28
+ /** Wraps the table with relevant components for paging, filters, sort, and table actions. */
29
+ export declare const TableActionsWrapper: (props: PropsWithChildren<TableActionsWrapperProps>) => JSX.Element;
30
+ export {};
@@ -0,0 +1 @@
1
+ export * from './table-footer';
@@ -0,0 +1,3 @@
1
+ import { BaseDataType } from '../../table.types';
2
+ import { TableFooterProps } from './table-footer.types';
3
+ export declare const TableFooter: <DataType extends BaseDataType>(props: TableFooterProps<DataType>) => JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { Table } from '@tanstack/react-table';
2
+ import { BaseDataType } from '../../table.types';
3
+ export type TableFooterProps<DataType extends BaseDataType> = {
4
+ table: Table<DataType>;
5
+ };
@@ -0,0 +1 @@
1
+ export * from './table-header';
@@ -0,0 +1,3 @@
1
+ import { BaseDataType } from '../../table.types';
2
+ import { TableHeaderProps } from './table-header.types';
3
+ export declare const TableHeader: <DataType extends BaseDataType>(props: TableHeaderProps<DataType>) => JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { Table } from '@tanstack/react-table';
2
+ import { BaseDataType } from '../../table.types';
3
+ export type TableHeaderProps<DataType extends BaseDataType> = {
4
+ table: Table<DataType>;
5
+ };
@@ -0,0 +1 @@
1
+ export * from './use-drag-and-drop';
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ import { BaseDataType } from '../../../../table.types';
3
+ import { UseDragAndDropProps } from './use-drag-and-drop.types';
4
+ export declare const useDragAndDrop: <DataType extends BaseDataType>(props: UseDragAndDropProps<DataType>) => {
5
+ dragAndDropRef: import("react").RefObject<HTMLTableRowElement>;
6
+ isDragging: boolean;
7
+ };
@@ -0,0 +1,10 @@
1
+ import { Row } from '@tanstack/react-table';
2
+ import { BaseDataType } from '../../../../table.types';
3
+ export interface UseDragAndDropProps<DataType extends BaseDataType> {
4
+ enableReordering: boolean;
5
+ handleOnReorder: () => Promise<void>;
6
+ index: number;
7
+ isSubRow: boolean;
8
+ moveRow: (startIndex: number, endIndex: number) => void;
9
+ row: Row<DataType>;
10
+ }
@@ -0,0 +1 @@
1
+ export * from './table-row';
@@ -0,0 +1,10 @@
1
+ /** See `RowStatusValue` type for possible values. */
2
+ export declare const dataAttrRowStatus: "data-row-status";
3
+ export declare const dataAttrRowIsClickable: "data-row-is-clickable";
4
+ export declare const dataAttrRowHighlightOnHover: "data-row-highlight-on-hover";
5
+ /** Applying this data attribute marks a row as active, applying a new background color. */
6
+ export declare const dataAttrActiveRow: "data-active-row";
7
+ /** Prefix added to table cell data attrs (like cell ID). */
8
+ export declare const dataAttrCellPrefix: "data-cell";
9
+ /** Applied when a sticky styled element is observed to have become sticky via `markStickyElements`. */
10
+ export declare const dataAttrIsSticky: "data-is-sticky";
@@ -0,0 +1,3 @@
1
+ import { BaseDataType } from '../../table.types';
2
+ import { TableRowProps } from './table-row.types';
3
+ export declare const TableRow: <DataType extends BaseDataType>(props: TableRowProps<DataType>) => JSX.Element;
@@ -0,0 +1,4 @@
1
+ export declare const StyledTR: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
2
+ canReorder: boolean;
3
+ isDragging: boolean;
4
+ }, never>;
@@ -0,0 +1,12 @@
1
+ import { Row } from '@tanstack/react-table';
2
+ import { MouseEvent } from 'react';
3
+ import { BaseDataType, CustomRowProps } from '../../table.types';
4
+ export interface TableRowProps<DataType extends BaseDataType> {
5
+ customRowProps: CustomRowProps;
6
+ enableReordering: boolean;
7
+ handleOnReorder: () => Promise<void>;
8
+ index: number;
9
+ moveRow: (startIndex: number, endIndex: number) => void;
10
+ onRowClick?: (data: Row<DataType>, event: MouseEvent<HTMLTableRowElement>) => void;
11
+ row: Row<DataType>;
12
+ }
@@ -0,0 +1,3 @@
1
+ import { BaseDataType } from '../../table.types';
2
+ /** If an index does not contain an `id` value, one is added using uuid. */
3
+ export declare const addMissingIds: <DataType extends BaseDataType>(data: DataType[]) => DataType[];
@@ -0,0 +1 @@
1
+ export * from './table';
@@ -0,0 +1,5 @@
1
+ import { BaseDataType, TableProps } from './table.types';
2
+ export declare const Table: {
3
+ <DataType extends BaseDataType>(props: TableProps<DataType>): JSX.Element;
4
+ defaultProps: import("./table.types").TableDefaultProps;
5
+ };
@@ -0,0 +1,2 @@
1
+ import { TableDefaultProps } from './table.types';
2
+ export declare const tableDefaultProps: TableDefaultProps;
@@ -0,0 +1,3 @@
1
+ export declare const StyledTable: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {
2
+ stickyFirstColumn: boolean | undefined;
3
+ }, never>;
@@ -0,0 +1,32 @@
1
+ import { ColumnDef, Row, TableOptions } from '@tanstack/react-table';
2
+ import { HTMLAttributes, MouseEvent } from 'react';
3
+ import { PagingProps } from '../paging/paging.types';
4
+ import { CustomActionProps, FiltersProps, SearchProps } from './components/table-actions-wrapper';
5
+ import { SortProps } from './components/table-actions-wrapper/components/sort/sort.types';
6
+ export interface BaseDataType {
7
+ [key: string]: unknown;
8
+ id?: string | number;
9
+ subRows?: BaseDataType[];
10
+ }
11
+ export interface TableProps<DataType extends BaseDataType> extends Partial<TableDefaultProps> {
12
+ columns: ColumnDef<DataType, any>[];
13
+ customAction?: CustomActionProps;
14
+ data: DataType[];
15
+ enableReordering?: boolean;
16
+ filters?: FiltersProps;
17
+ /** Include `status` in the returned value to set the row status color. */
18
+ getRowProps?: (row: Row<DataType>, rows: Row<DataType>[]) => CustomRowProps;
19
+ onReorder?: (data: DataType[]) => Promise<void>;
20
+ onRowClick?: (data: Row<DataType>, event: MouseEvent<HTMLTableRowElement>) => void;
21
+ options?: Partial<TableOptions<DataType>>;
22
+ paging?: PagingProps;
23
+ search?: SearchProps;
24
+ sorting?: SortProps;
25
+ }
26
+ export interface TableDefaultProps {
27
+ stickyFirstColumn: boolean;
28
+ }
29
+ export interface CustomRowProps extends HTMLAttributes<HTMLTableRowElement> {
30
+ status?: RowStatusValue | undefined;
31
+ }
32
+ export type RowStatusValue = 'handled' | 'next' | 'error' | 'warning';
@@ -1,4 +1,3 @@
1
1
  export * from './hooks';
2
2
  export * from './typings';
3
3
  export * from './environment';
4
- export * from './constants';
@@ -0,0 +1,6 @@
1
+ import { FormatAsLocaleNumberOptions } from './format-as-locale-number.types';
2
+ /**
3
+ * Set `locale` in `options` to override default `'en-US'`.
4
+ *
5
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options */
6
+ export declare const formatAsLocaleNumber: (value: number, options?: FormatAsLocaleNumberOptions) => string;
@@ -0,0 +1,3 @@
1
+ export interface FormatAsLocaleNumberOptions extends Intl.NumberFormatOptions {
2
+ locale?: string;
3
+ }
@@ -0,0 +1 @@
1
+ export * from './format-as-locale-number';
@@ -0,0 +1,2 @@
1
+ import { StickyTo } from '../mark-sticky-elements.types';
2
+ export declare const setupMockElements: (stickyTo: StickyTo) => any;
@@ -0,0 +1,2 @@
1
+ import { GetIntersectionObserverCallbackArgs } from './get-intersection-observer-callback.types';
2
+ export declare const getIntersectionObserverCallback: (args: GetIntersectionObserverCallbackArgs) => IntersectionObserverCallback;
@@ -0,0 +1,8 @@
1
+ import { StickyTo } from '../../mark-sticky-elements.types';
2
+ export interface GetIntersectionObserverCallbackArgs {
3
+ /** If not provided, the `dataAttrIsSticky` variable value will be used. If `stickyTo` is provided, it will apply that value as a suffix to the attr (ie `${dataAttrIsSticky}-${stickyTo}`). */
4
+ attrToApply?: string;
5
+ elementsToMark: Element[];
6
+ /** If not provided, an intersection in any direction mark the elements. */
7
+ stickyTo?: StickyTo;
8
+ }
@@ -0,0 +1 @@
1
+ export * from './get-intersection-observer-callback';
@@ -0,0 +1 @@
1
+ export * from './mark-sticky-elements';
@@ -0,0 +1,2 @@
1
+ /** Applied when a sticky styled element is observed to have become sticky via `markStickyElements`. */
2
+ export declare const dataAttrIsSticky = "data-is-sticky";
@@ -0,0 +1,26 @@
1
+ import { MarkStickyElementsArgs } from './mark-sticky-elements.types';
2
+ /**
3
+ * When each arg's `elementsToObserve` is recognized as sticky, the `dataAttrIsSticky` variable value is applied to that element.
4
+ * @example
5
+ * useEffect(() => {
6
+ * const elementsToMark = [document.querySelector('table')];
7
+ * const elementsToObserve = Array.from(
8
+ * document.querySelectorAll('tr td:first-child'),
9
+ * );
10
+ * const stickyTo = 'left';
11
+ *
12
+ * const { cleanupUseEffect } = markStickyElements({
13
+ * attrToApply: `${dataAttrIsSticky}-${stickyTo}`,
14
+ * elementsToMark,
15
+ * elementsToObserve,
16
+ * stickyTo,
17
+ * });
18
+ *
19
+ * return cleanupUseEffect;
20
+ * }, [allColumns]);
21
+ *
22
+ * @source https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
23
+ */
24
+ export declare const markStickyElements: (...args: MarkStickyElementsArgs) => {
25
+ cleanupUseEffect: () => void;
26
+ };
@@ -0,0 +1,28 @@
1
+ export interface StickyElementsDetails {
2
+ /** If not provided, the `dataAttrIsSticky` variable value will be used. If `stickyTo` is provided, it will apply that value as a suffix to the attr (ie `${dataAttrIsSticky}-${stickyTo}`). */
3
+ attrToApply?: string;
4
+ /**
5
+ * All elements in this array will be labeled as sticky according to the status of `elementsToObserve`.
6
+ *
7
+ * If using `document.querySelectorAll`, you can use `Array.from(document.querySelectorAll(SELECTOR))` to satisfy TypeScript.
8
+ */
9
+ elementsToMark?: Element[];
10
+ /**
11
+ * When any of these elements are detected as sticky, all elements in `elementsToMark` are labeled with `attrToApply` (or fallback). If `elementsToMark` is not provided, only these elements will be labeled.
12
+ *
13
+ * If using `document.querySelectorAll`, you can use `Array.from(document.querySelectorAll(SELECTOR))` to satisfy TypeScript.
14
+ *
15
+ * **IMPORTANT:** These elements should have a `-1px` styling applied to them in the direction of the sticky direction (ie, if sticky to right, add `position: sticky; right: -1px;`). Without this styling, this function may not work.
16
+ */
17
+ elementsToObserve: Element[];
18
+ /**
19
+ * Value passed to IntersectionObserver options.
20
+ *
21
+ * https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root
22
+ * */
23
+ root?: Document | Element;
24
+ /** If not provided, an intersection in any direction mark the elements. */
25
+ stickyTo?: StickyTo;
26
+ }
27
+ export type StickyTo = 'top' | 'bottom' | 'left' | 'right';
28
+ export type MarkStickyElementsArgs = StickyElementsDetails[];