gantri-components 3.0.0-beta.3 → 3.0.0-beta.5

package/dist/components/table/components/cell-reorder-wrapper/cell-reorder-wrapper.d.ts

@@ -0,0 +1,8 @@
+import { RowData } from '@tanstack/react-table';
+import { CellReorderWrapperProps } from './cell-reorder-wrapper.types';
+/** When reordering is provided, wraps the first column in the provided props. */
+export declare const CellReorderWrapper: <TData extends RowData<{
+    [key: string]: unknown;
+    id?: string | number | undefined;
+    subRows?: any[] | undefined;
+}>>(props: CellReorderWrapperProps<TData>) => JSX.Element;

package/dist/components/table/components/cell-reorder-wrapper/cell-reorder-wrapper.types.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { RowData } from '@tanstack/react-table';
+import { ReorderingProps } from '../../table.types';
+export type CellReorderWrapperProps<TData extends RowData> = PropsWithChildren<{
+    FirstColumnContent: JSX.Element | ReactNode;
+    /** Rendered when `reordering` is provided, but `reordering.isAvailable === false`. */
+    FirstColumnFallback: JSX.Element | ReactNode;
+    index: number;
+    reordering: ReorderingProps<TData> | undefined;
+}>;

package/dist/components/table/components/cell-reorder-wrapper/index.d.ts

@@ -0,0 +1 @@
+export * from './cell-reorder-wrapper';

package/dist/components/table/components/custom-columns-wrapper/custom-columns-wrapper.styles.d.ts

@@ -1,3 +1,4 @@
+export declare const StyledTableContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledToggleWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     isScrolling: boolean;
 }, never>;

package/dist/components/table/components/custom-columns-wrapper/custom-columns-wrapper.types.d.ts

@@ -15,5 +15,4 @@ export interface CustomColumnOption {
 export type CustomColumnsWrapperProps<TData extends RowData> = PropsWithChildren<{
     customColumns: CustomColumnsProps<TData> | undefined;
     table: Table<TData>;
-    tableContainerEl: HTMLDivElement | null;
 }>;

package/dist/components/table/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './cell-reorder-wrapper';
 export * from './custom-columns-wrapper';
 export * from './table-draggable-row';
 export * from './table-actions-wrapper';

package/dist/components/table/components/table-actions-wrapper/components/sort/sort.types.d.ts

@@ -1,9 +1,9 @@
 import { OnConfirmInteraction } from '../../hooks';
-export interface SortProps {
-    current: SortInfo;
+export interface SortProps<SortingField = string> {
+    current: SortInfo<SortingField> | SortingField;
     disabled?: boolean;
-    fields: TableSortField<string>[];
-    onSort: (sortInfo: SortInfo) => void;
+    fields: TableSortField<SortingField>[];
+    onSort: (sortInfo: SortInfo<SortingField> | SortingField) => void;
 }
 export interface SortComponentProps extends SortProps {
     confirmAllInteractions: boolean;

package/dist/components/table/components/table-actions-wrapper/table-actions-wrapper.types.d.ts

@@ -15,11 +15,12 @@ export interface SearchProps {
     placeholder?: string;
     value: string;
 }
+export interface CustomActionComponentProps<TData extends RowData> {
+    onConfirmInteraction: () => Promise<boolean>;
+    table: Table<TData>;
+}
 export interface CustomActionProps<TData extends RowData> {
-    Component: JSXElementConstructor<{
-        onConfirmInteraction: () => Promise<boolean>;
-        table: Table<TData>;
-    }>;
+    Component: JSXElementConstructor<CustomActionComponentProps<TData>>;
     position: 'left' | 'right' | 'bottom';
 }
 export interface TableActionsWrapperProps<TData extends RowData> {

package/dist/components/table/components/table-header/table-header.styles.d.ts

@@ -2,5 +2,6 @@ export declare const StyledTH: import("styled-components").StyledComponent<"th",
     size: number;
 }, never>;
 export declare const StyledReorderWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    active: boolean;
+    disabled: boolean;
+    isActive: boolean;
 }, never>;

package/dist/components/table/components/table-header/table-header.types.d.ts

@@ -1,8 +1,7 @@
 import { RowData, Table } from '@tanstack/react-table';
-import { GetHeaderCellProps } from '../../table.types';
+import { GetHeaderCellProps, ReorderingProps } from '../../table.types';
 export type TableHeaderProps<TData extends RowData> = {
     getHeaderCellProps: GetHeaderCellProps<TData> | undefined;
-    reorderEnabled?: boolean;
-    reorderable: boolean;
+    reordering: ReorderingProps<TData> | undefined;
     table: Table<TData>;
 };

package/dist/components/table/components/table-row/table-row.types.d.ts

@@ -1,11 +1,10 @@
 import { Row, RowData } from '@tanstack/react-table';
-import { CustomRowProps, GetCellProps, OnRowClick } from '../../table.types';
+import { CustomRowProps, GetCellProps, OnRowClick, ReorderingProps } from '../../table.types';
 export interface TableRowProps<TData extends RowData> {
     customRowProps: CustomRowProps;
     getCellProps: GetCellProps<TData> | undefined;
     index?: number;
     onRowClick?: OnRowClick<TData>;
-    reorderEnabled?: boolean;
-    reorderable?: boolean;
+    reordering: ReorderingProps<TData> | undefined;
     row: Row<TData>;
 }

package/dist/components/table/components/table-row-cells/table-row-cells.types.d.ts

@@ -1,5 +1,5 @@
 import { RowData } from '@tanstack/react-table';
 import { TableRowProps } from '../table-row/table-row.types';
-export interface TableRowCellsProps<TData extends RowData> extends Pick<TableRowProps<TData>, 'row' | 'getCellProps' | 'reorderEnabled' | 'reorderable'> {
+export interface TableRowCellsProps<TData extends RowData> extends Pick<TableRowProps<TData>, 'row' | 'getCellProps' | 'reordering'> {
     size?: number;
 }

package/dist/components/table/hooks/useTrackStickyCells.d.ts

@@ -6,6 +6,7 @@ export interface UseTrackStickyCellsProps<TData extends RowData> {
     /** The containing element that the child will intersect with. */
     root: Element | null;
     stickyFirstColumn: boolean | undefined;
+    stickyFooter: boolean | undefined;
     stickyLastColumn: boolean | undefined;
 }
 /** Mark table if header and/or first column cells are sticky. */

package/dist/components/table/index.d.ts

@@ -3,3 +3,4 @@ export * from './table.types';
 export * from './components/table-row/table-row.constants';
 export * from './components/custom-columns-wrapper/helpers/get-custom-column-initial-visibility';
 export * from './helpers';
+export * from './components/table-actions-wrapper/table-actions-wrapper.types';

package/dist/components/table/table.d.ts

@@ -1,6 +1,10 @@
 import { RowData } from '@tanstack/react-table';
 import { TableProps } from './table.types';
-/** Official docs: https://tanstack.com/table/v8/docs/guide/overview */
+/**
+ * See https://components.gantri.com/?path=/story/core-table for usage examples.
+ *
+ * Official docs: https://tanstack.com/table/v8/docs/guide/overview
+ */
 export declare const Table: {
     <TData extends RowData<{
         [key: string]: unknown;

package/dist/components/table/table.styles.d.ts

@@ -7,7 +7,6 @@ export declare const getTableRowBackgroundColors: (theme: DefaultTheme) => {
     readonly statusWarningClickableHoverColor: string;
     readonly statusWarningColor: string;
 };
-export declare const StyledTableWrapper: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const StyledTableContainer: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
 export declare const StyledTable: import("styled-components").StyledComponent<"table", DefaultTheme, {
     isCustomColumnsEnabled: boolean;

package/dist/components/table/table.types.d.ts

@@ -1,9 +1,20 @@
 import { Cell, ColumnDef, Header, Row, RowData, TableOptions } from '@tanstack/react-table';
-import { HTMLAttributes, MouseEvent } from 'react';
+import { Dispatch, HTMLAttributes, MouseEvent, SetStateAction } from 'react';
 import { PagingProps } from './components/table-actions-wrapper/components/paging/paging.types';
 import { CustomActionProps, FiltersProps, SearchProps } from './components/table-actions-wrapper/table-actions-wrapper.types';
 import { SortProps } from './components/table-actions-wrapper/components/sort/sort.types';
 import { CustomColumnsProps } from './components/custom-columns-wrapper/custom-columns-wrapper.types';
+import { OverlayPosition } from '../overlay/overlay.types';
+export interface ReorderingProps<TData extends RowData> {
+    disabled?: boolean;
+    isActive: boolean;
+    isAvailable: boolean;
+    /** Is fired when the dragged element is dropped. */
+    onReorder: (data: TData[], oldIndex?: number, newIndex?: number) => Promise<void>;
+    setIsActive: Dispatch<SetStateAction<boolean>>;
+    tooltipPosition?: OverlayPosition;
+    tooltipText?: string;
+}
 export interface TableProps<TData extends RowData> extends Partial<TableDefaultProps> {
     className?: string;
     columns: ColumnDef<TData, any>[];
@@ -16,7 +27,7 @@ export interface TableProps<TData extends RowData> extends Partial<TableDefaultP
      */
     data: TData[];
     filters?: FiltersProps;
-    /** Include `href` and (optionally) `target` in the returned object to apply an anchor with appropriate cell styling. Text styling must be applied within the column. */
+    /** Include `isClickable` in the returned object to apply appropriate cell styling. Text styling must be applied within the column. */
     getCellProps?: GetCellProps<TData>;
     getHeaderCellProps?: GetHeaderCellProps<TData>;
     /** Include `status` in the returned object to set the row status color. */
@@ -25,13 +36,10 @@ export interface TableProps<TData extends RowData> extends Partial<TableDefaultP
     /** Any options provided are passed to `useReactTable` and may override default values. */
     options?: Partial<TableOptions<TData>>;
     paging?: PagingProps;
-    reordering?: {
-        enable: boolean;
-        /** Is fired when the dragged element is dropped. */
-        onReorder: (data: TData[], oldIndex?: number, newIndex?: number) => Promise<void>;
-    };
+    reordering?: ReorderingProps<TData>;
     search?: SearchProps;
     sorting?: SortProps;
+    stickyFooter?: boolean;
     stickyLastColumn?: boolean;
 }
 export interface TableDefaultProps {
@@ -44,10 +52,9 @@ export interface CustomRowProps extends HTMLAttributes<HTMLTableRowElement>, Rec
     status?: RowStatusValue | undefined;
 }
 export type RowStatusValue = 'handled' | 'next' | 'error' | 'warning';
-/** Include `href` and (optionally) `target` in the returned object to apply an anchor with appropriate cell styling. Text styling must be applied within the column. */
+/** Include `isClickable` in the returned object to apply appropriate cell styling. Text styling must be applied within the column. */
 export type GetCellProps<TData extends RowData, TValue = unknown> = (cell?: Cell<TData, TValue>) => CustomCellProps;
 export type OnRowClick<TData extends RowData> = (data: Row<TData>, event: MouseEvent<HTMLTableRowElement>) => void;
 export interface CustomCellProps extends HTMLAttributes<HTMLTableCellElement>, Record<string, unknown> {
-    href?: string;
-    target?: '_blank';
+    isClickable?: boolean;
 }

package/dist/helpers/mark-sticky-elements/helpers/get-intersection-observer-callback/get-intersection-observer-callback.types.d.ts

@@ -3,6 +3,6 @@ export interface GetIntersectionObserverCallbackArgs {
     /** 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}`). */
     attrToApply?: string;
     elementsToMark: Element[];
-    /** If not provided, an intersection in any direction mark the elements. */
+    /** If not provided, an intersection in any direction will mark the elements. */
     stickyTo?: StickyTo;
 }