gantri-components 2.251.0 → 2.252.0

package/dist/components/picture/__test__/infer-sizes-from-width.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/picture/helpers/index.d.ts

@@ -3,3 +3,4 @@ export * from './build-cloudinary-url';
 export * from './build-srcset';
 export * from './build-placeholder';
 export * from './normalize-resolution-aware';
+export * from './infer-sizes-from-width';

package/dist/components/picture/helpers/infer-sizes-from-width.d.ts

@@ -0,0 +1,21 @@
+import { NormalizedResolutionAware } from './normalize-resolution-aware';
+/**
+ * Build a `sizes` attribute string from a normalized `width` map so
+ * `<Picture width={...} />` doesn't need a hand-written `sizes`. The
+ * browser uses `sizes` together with each `<source>`'s `srcset` to pick
+ * a single variant per DPR — without an accurate value it defaults to
+ * `100vw` and over-fetches on small containers (e.g. a 400-px desktop
+ * card pulling the 1200w variant instead of 800w).
+ *
+ *   width=400                          → "400px"
+ *   width={{ lg: 400, sm: 720 }}       → "(max-width: 720px) 720px, 400px"
+ *   width={{ lg: 400, md: 600, sm: 720 }} →
+ *     "(max-width: 720px) 720px, (max-width: 1024px) 600px, 400px"
+ *   width=undefined                    → undefined (caller should fall
+ *                                        back to the default `100vw`)
+ *
+ * When a breakpoint has no explicit width, we substitute `100vw` for
+ * that segment so the inferred string never silently invents a desktop
+ * size from a sm-only spec.
+ */
+export declare const inferSizesFromWidth: (widths: NormalizedResolutionAware<number>) => string | undefined;

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

@@ -29,6 +29,12 @@ export interface PictureProps extends PicturePassThroughProps {
     alt: string;
     /** Override auto-detection of how to render the asset. */
     as?: PictureAs;
+    /**
+     * Target render width in px. Drives **both** the container CSS width
+     * AND the Cloudinary srcset (DPR multipliers `1x / 2x / 3x` of this
+     * value). Use it alongside `fill` to keep the parent-driven layout
+     * while still capping the source bytes the browser fetches.
+     */
     width?: ResolutionAwareProp<number>;
     height?: ResolutionAwareProp<number>;
     /** e.g. "16:9", "1:1". Drives both CSS aspect-ratio and Cloudinary ar_ transformation. */
@@ -41,7 +47,19 @@ export interface PictureProps extends PicturePassThroughProps {
     minWidth?: ResolutionAwareProp<Property.MinWidth>;
     /** CSS min-height on the container. */
     minHeight?: ResolutionAwareProp<Property.MinHeight>;
-    /** Image fills its (position: relative) parent. Mutually exclusive with width/height. */
+    /**
+     * Image fills its (`position: relative`) parent — CSS-wise the container
+     * becomes `position: absolute; inset: 0; width/height: 100%`, so the
+     * configured `width` / `height` props are ignored for layout.
+     *
+     * `width` is still honored as a **render hint for srcset**: when set
+     * alongside `fill`, the srcset is built from DPR multipliers
+     * `[width × 1, width × 2, width × 3]` instead of the default
+     * `[320, 640, 1024, 1600, 2400]`. Pair `<Picture fill width={400} />`
+     * (with `sizes="400px"` for accuracy) on a 400-px container so the
+     * browser fetches an 800-px source on Retina instead of the 1024 it
+     * would pick from the default set.
+     */
     fill?: boolean;
     /** Native sizes attribute. Default: "100vw". Tells the browser how wide the image renders. */
     sizes?: string;

package/dist/components/table/components/after-row-component/after-row-component.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-import { RowData } from '@tanstack/react-table';
 import { AfterRowComponentProps } from './after-row-component.types';
-export declare const AfterRowComponent: <TData extends RowData<import("../..").CustomTData>>(props: AfterRowComponentProps<TData>) => React.JSX.Element | null;
+export declare const AfterRowComponent: <TData extends RowData>(props: AfterRowComponentProps<TData>) => React.JSX.Element | null;

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

@@ -1,5 +1,4 @@
 import React from 'react';
-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<import("../..").CustomTData>>(props: CellReorderWrapperProps<TData>) => React.JSX.Element;
+export declare const CellReorderWrapper: <TData extends RowData>(props: CellReorderWrapperProps<TData>) => React.JSX.Element;

package/dist/components/table/components/custom-columns-toggle/custom-columns-toggle.d.ts

@@ -1,4 +1,3 @@
-import { RowData } from '@tanstack/react-table';
 import React from 'react';
 import { CustomColumnsWrapperProps } from './custom-columns-toggle.types';
-export declare const CustomColumnsToggle: <TData extends RowData<import("../..").CustomTData>>(props: CustomColumnsWrapperProps<TData>) => React.JSX.Element;
+export declare const CustomColumnsToggle: <TData extends RowData>(props: CustomColumnsWrapperProps<TData>) => React.JSX.Element;

package/dist/components/table/components/custom-columns-toggle/custom-columns-toggle.helpers.d.ts

@@ -3,5 +3,5 @@ import { CustomColumnOption } from './custom-columns-toggle.types';
 export interface GetCustomColumnOptionsArgs<TData extends RowData> {
     table: Table<TData>;
 }
-export declare const getCustomColumnOptions: <TData extends RowData<import("../..").CustomTData>>(args: GetCustomColumnOptionsArgs<TData>) => CustomColumnOption[];
-export declare const transformColumnsIntoVisibilityState: <TData extends RowData<import("../..").CustomTData>>(columns: Column<TData, unknown>[]) => Record<string | number, boolean>;
+export declare const getCustomColumnOptions: <TData extends RowData>(args: GetCustomColumnOptionsArgs<TData>) => CustomColumnOption[];
+export declare const transformColumnsIntoVisibilityState: <TData extends RowData>(columns: Column<TData, unknown>[]) => Record<string | number, boolean>;

package/dist/components/table/components/table-actions-wrapper/hooks/useConfirmInteraction.d.ts

@@ -4,9 +4,9 @@ export interface UseConfirmInteractionProps<TData extends RowData> {
     table: Table<TData>;
 }
 export type OnConfirmInteraction = (interaction: TableInteraction) => Promise<boolean>;
-export declare const useConfirmInteraction: <TData extends RowData<import("../../..").CustomTData>>(props: UseConfirmInteractionProps<TData>) => {
+export declare const useConfirmInteraction: <TData extends RowData>(props: UseConfirmInteractionProps<TData>) => {
     /** Not necessary for `onConfirmInteraction`. Only provided in case additional logic is needed. */
-    confirmAllInteractions: boolean;
+    confirmAllInteractions: any;
     /** If applicable, renders a discard selections confirmation modal when called. */
     onConfirmInteraction: OnConfirmInteraction;
 };

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

@@ -1,5 +1,4 @@
 import React, { PropsWithChildren } from 'react';
-import { RowData } from '@tanstack/react-table';
 import { TableActionsWrapperProps } from './table-actions-wrapper.types';
 /** Wraps the table with relevant components for paging, filters, sort, and table actions. */
-export declare const TableActionsWrapper: <TData extends RowData<import("../..").CustomTData>>(props: React.PropsWithChildren<TableActionsWrapperProps<TData>>) => React.JSX.Element;
+export declare const TableActionsWrapper: <TData extends RowData>(props: React.PropsWithChildren<TableActionsWrapperProps<TData>>) => React.JSX.Element;

package/dist/components/table/components/table-draggable-row/helpers/flatten-table-rows/flatten-table-rows.d.ts

@@ -1,3 +1,2 @@
-import { RowData } from '@tanstack/react-table';
 import { FlattenTableRowsProps } from './flatten-table-rows.types';
-export declare const flattenTableRows: <TData extends RowData<import("../../../..").CustomTData>>(props: FlattenTableRowsProps<TData>) => import("@tanstack/react-table").Row<TData>[];
+export declare const flattenTableRows: <TData extends RowData>(props: FlattenTableRowsProps<TData>) => Row<TData_1>[];

package/dist/components/table/components/table-draggable-row/helpers/is-row-reordering-disabled/is-row-reordering-disabled.d.ts

@@ -1,3 +1,2 @@
-import { RowData } from '@tanstack/react-table';
 import { IsRowReorderDisabledProps } from './is-row-reordering-disabled.types';
-export declare const isRowReorderDisabled: <TData extends RowData<import("../../../..").CustomTData>>(props: IsRowReorderDisabledProps<TData>) => boolean;
+export declare const isRowReorderDisabled: <TData extends RowData>(props: IsRowReorderDisabledProps<TData>) => boolean;

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

@@ -1,4 +1,3 @@
 import React from 'react';
-import { RowData } from '@tanstack/react-table';
 import { DraggableRowProps } from './table-draggable-row.types';
-export declare const TableDraggableRow: <TData extends RowData<import("../..").CustomTData>>(props: DraggableRowProps<TData>) => React.JSX.Element;
+export declare const TableDraggableRow: <TData extends RowData>(props: DraggableRowProps<TData>) => React.JSX.Element;

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

@@ -1,4 +1,3 @@
 import React from 'react';
-import { RowData } from '@tanstack/react-table';
 import { TableFooterProps } from './table-footer.types';
-export declare const TableFooter: <TData extends RowData<import("../..").CustomTData>>(props: TableFooterProps<TData>) => React.JSX.Element;
+export declare const TableFooter: <TData extends RowData>(props: TableFooterProps<TData>) => React.JSX.Element;

package/dist/components/table/components/table-header/components/selectable-row-header-wrapper/selectable-row-header-wrapper.d.ts

@@ -1,4 +1,3 @@
 import React, { PropsWithChildren } from 'react';
-import { RowData } from '@tanstack/react-table';
 import { SelectableRowHeaderWrapperProps } from './selectable-row-header-wrapper.types';
-export declare const SelectableRowHeaderWrapper: <TData extends RowData<import("../../../..").CustomTData>>(props: React.PropsWithChildren<SelectableRowHeaderWrapperProps<TData>>) => React.JSX.Element;
+export declare const SelectableRowHeaderWrapper: <TData extends RowData>(props: React.PropsWithChildren<SelectableRowHeaderWrapperProps<TData>>) => React.JSX.Element;

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

@@ -1,4 +1,3 @@
 import React from 'react';
-import { RowData } from '@tanstack/react-table';
 import { TableHeaderProps } from './table-header.types';
-export declare const TableHeader: <TData extends RowData<import("../..").CustomTData>>(props: TableHeaderProps<TData>) => React.JSX.Element;
+export declare const TableHeader: <TData extends RowData>(props: TableHeaderProps<TData>) => React.JSX.Element;

package/dist/components/table/components/table-row/helpers/get-row-component-props/get-row-component-props.d.ts

@@ -1,7 +1,6 @@
 import { MouseEvent } from 'react';
-import { RowData } from '@tanstack/react-table';
 import { TableRowProps } from '../../table-row.types';
-export declare const getRowComponentProps: <TData extends RowData<import("../../../..").CustomTData>>(props: TableRowProps<TData>) => {
+export declare const getRowComponentProps: <TData extends RowData>(props: TableRowProps<TData>) => {
     className: string;
     onClick: (event: MouseEvent<HTMLTableRowElement>) => void;
     "data-is-data-row": string;

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

@@ -1,4 +1,3 @@
 import React from 'react';
-import { RowData } from '@tanstack/react-table';
 import { TableRowProps } from './table-row.types';
-export declare const TableRow: <TData extends RowData<import("../..").CustomTData>>(props: TableRowProps<TData>) => React.JSX.Element;
+export declare const TableRow: <TData extends RowData>(props: TableRowProps<TData>) => React.JSX.Element;

package/dist/components/table/components/table-row-cells/components/selectable-row-cell-wrapper/helpers/get-row-range/get-row-range.d.ts

@@ -1,3 +1,3 @@
-import { Row, RowData } from '@tanstack/react-table';
+import { Row } from '@tanstack/react-table';
 import { GetRowRangeProps } from './get-row-range.types';
-export declare const getRowRange: <TData extends RowData<import("../../../../../..").CustomTData>>(props: GetRowRangeProps<TData>) => Row<TData>[];
+export declare const getRowRange: <TData extends RowData>(props: GetRowRangeProps<TData>) => Row<TData>[];

package/dist/components/table/components/table-row-cells/components/selectable-row-cell-wrapper/selectable-row-cell-wrapper.d.ts

@@ -1,4 +1,3 @@
 import React, { PropsWithChildren } from 'react';
-import { RowData } from '@tanstack/react-table';
 import { SelectableRowCellWrapperProps } from './selectable-row-cell-wrapper.types';
-export declare const SelectableRowCellWrapper: <TData extends RowData<import("../../../..").CustomTData>>(props: React.PropsWithChildren<SelectableRowCellWrapperProps<TData>>) => React.JSX.Element;
+export declare const SelectableRowCellWrapper: <TData extends RowData>(props: React.PropsWithChildren<SelectableRowCellWrapperProps<TData>>) => React.JSX.Element;

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

@@ -1,4 +1,3 @@
 import React from 'react';
-import { RowData } from '@tanstack/react-table';
 import { TableCellProps } from './table-cell.types';
-export declare const TableCell: <TData extends RowData<import("../../../..").CustomTData>>(props: TableCellProps<TData>) => React.JSX.Element;
+export declare const TableCell: <TData extends RowData>(props: TableCellProps<TData>) => React.JSX.Element;

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

@@ -1,4 +1,3 @@
 import React from 'react';
-import { RowData } from '@tanstack/react-table';
 import { TableRowCellsProps } from './table-row-cells.types';
-export declare const TableRowCells: <TData extends RowData<import("../..").CustomTData>>(props: TableRowCellsProps<TData>) => React.JSX.Element;
+export declare const TableRowCells: <TData extends RowData>(props: TableRowCellsProps<TData>) => React.JSX.Element;

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

@@ -1,4 +1,3 @@
 import React from 'react';
-import { RowData } from '@tanstack/react-table';
 import { TableRowOverlayProps } from './table-row-overlay.types';
-export declare const TableRowOverlay: <TData extends RowData<import("../..").CustomTData>>(props: TableRowOverlayProps<TData>) => React.JSX.Element;
+export declare const TableRowOverlay: <TData extends RowData>(props: TableRowOverlayProps<TData>) => React.JSX.Element;

package/dist/components/table/hooks/use-drag-and-drop-rows/use-drag-and-drop-rows.d.ts

@@ -1,9 +1,8 @@
 import { DragEndEvent, DragStartEvent } from '@dnd-kit/core';
-import { RowData } from '@tanstack/react-table';
 import { UseDragAndDropRowsProps } from './use-drag-and-drop-rows.types';
-export declare const useDragAndDropRows: <TData extends RowData<import("../..").CustomTData>>(props: UseDragAndDropRowsProps<TData>) => {
+export declare const useDragAndDropRows: <TData extends RowData>(props: UseDragAndDropRowsProps<TData>) => {
     draggingItem: TData | undefined;
-    draggingRow: import("@tanstack/react-table").Row<TData> | undefined;
+    draggingRow: any;
     draggingRowId: string | undefined;
     handleDragEnd: (event: DragEndEvent) => void;
     handleDragStart: (event: DragStartEvent) => void;

package/dist/components/table/hooks/use-get-selected-table-rows-data/use-get-selected-table-rows-data.d.ts

@@ -1,6 +1,5 @@
-import { RowData } from '@tanstack/react-table';
 export declare const useGetSelectedRowsData: () => {
-    getSelectedRowsData: <TData extends RowData<import("../..").CustomTData>>(props: {
+    getSelectedRowsData: <TData extends RowData>(props: {
         idProperty: keyof TData | undefined;
         records: TData[];
     }) => TData[];

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

@@ -1,9 +1,9 @@
-import { ColumnDef, ColumnOrderState, RowData, Table, VisibilityState } from '@tanstack/react-table';
+import { ColumnDef, ColumnOrderState } from '@tanstack/react-table';
 import { ColumnConfig } from './table.types';
 export declare const extractColumnIdsFromColumnConfig: (records: ColumnConfig[]) => string[];
 export declare const extractColumnsVisibilityFromColumnConfig: (records: ColumnConfig[]) => VisibilityState;
-export declare const extractColumnsVisibilityFromTable: <TData extends RowData<import("./table.types").CustomTData>>(table: Table<TData>) => {};
-export declare const extractColumnsDefinition: <TData extends RowData<import("./table.types").CustomTData>>(columns: ColumnDef<TData, unknown>[]) => {
+export declare const extractColumnsVisibilityFromTable: <TData extends RowData>(table: Table<TData>) => any;
+export declare const extractColumnsDefinition: <TData extends RowData>(columns: ColumnDef<TData>[]) => {
     order: string[];
     visibility: Record<string, boolean>;
 };

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

@@ -17,5 +17,5 @@ export declare const useTableContext: () => {
     setIsRowSelectionCheckboxes: Dispatch<SetStateAction<boolean>>;
     setIsRowSelectionDisabled: Dispatch<SetStateAction<boolean>>;
     setLastSelectedId: Dispatch<SetStateAction<string>>;
-    setRowSelectionState: Dispatch<SetStateAction<RowSelectionState>>;
+    setRowSelectionState: Dispatch<any>;
 };

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { RowData } from '@tanstack/react-table';
 import { TableProps } from './table.types';
 /**
  * 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<import("./table.types").CustomTData>>(incoming: TableProps<TData>) => React.JSX.Element;
+export declare const Table: <TData extends RowData>(incoming: TableProps<TData>) => React.JSX.Element;

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

@@ -1,5 +1,4 @@
-import { RowData } from '@tanstack/react-table';
 import { ColumnConfig, GetColumnsConfigFn, TDataWithId } from './table.types';
-export declare const addMissingIds: <TData extends RowData<import("./table.types").CustomTData>>(data: TData[]) => TDataWithId<TData>[];
+export declare const addMissingIds: <TData extends RowData>(data: TData[]) => TDataWithId<TData>[];
 export declare const hyphenateColumnId: ((id: string) => string) & import("lodash").MemoizedFunction;
 export declare const processColumnsConfigGenerator: (fetchData: GetColumnsConfigFn, handler: (val: ColumnConfig[]) => void, columnsConfiguration: ColumnConfig[]) => Promise<void | ColumnConfig[]>;