gantri-components 2.38.0 → 2.39.0-beta.2

package/dist/components/dropdown-menu/dropdown-menu.styles.d.ts

@@ -1,3 +1,4 @@
+import { Property } from 'csstype';
 export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     $hasHeader?: boolean | undefined;
     $noShadow: boolean;
@@ -5,6 +6,7 @@ export declare const StyledContainer: import("styled-components").StyledComponen
 export declare const StyledHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     $basic: boolean;
-    $disabled?: boolean | undefined;
+    $disabled: boolean | undefined;
+    $justifyContent: Property.JustifyContent | undefined;
     $selected: boolean;
 }, never>;

package/dist/components/dropdown-menu/dropdown-menu.types.d.ts

@@ -8,6 +8,8 @@ export interface DropdownMenuProps<T = Record<string, unknown>> {
     idProperty?: keyof T;
     /** Can optionally include `disabled: true` to any index to disable that item. */
     items: T[];
+    /** Sets the alignment of the dropdown items. */
+    justifyContent?: Property.JustifyContent;
     keyProperty?: (item?: T) => string;
     labelProperty?: keyof T | ((item?: T) => string);
     labelPropertyTx?: (item?: T) => string;

package/dist/components/icon/generated/ui-control/ExlamationCircleFilled.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgExlamationCircleFilled: React.NamedExoticComponent<object>;
+export default SvgExlamationCircleFilled;

package/dist/components/icon/generated/ui-control/ExlamationCircleFilled24.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SvgExlamationCircleFilled24: React.NamedExoticComponent<object>;
+export default SvgExlamationCircleFilled24;

package/dist/components/index.d.ts

@@ -27,6 +27,7 @@ export * from './radio';
 export * from './search-field';
 export * from './slider';
 export * from './stack';
+export * from './table';
 export * from './tabs';
 export * from './text-area';
 export * from './text-field';

package/dist/components/paging/__tests__/paging.test.d.ts

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

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

@@ -0,0 +1 @@
+export { Paging } from './paging';

package/dist/components/paging/paging.d.ts

@@ -0,0 +1,5 @@
+import { PagingProps } from './paging.types';
+export declare const Paging: {
+    (props: PagingProps): JSX.Element;
+    defaultProps: Partial<PagingProps>;
+};

package/dist/components/paging/paging.presets.d.ts

@@ -0,0 +1,2 @@
+import { PagingProps } from './paging.types';
+export declare const pagingDefaultProps: Partial<PagingProps>;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+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>;
+export declare const StyledPagingButton: import("styled-components").StyledComponent<import("react").FC<import("../button/button.types").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,8 @@
+export interface PagingProps {
+    currentPage: number;
+    onPageChange: (page: number) => void;
+    /** Total number of pages. */
+    pageCount: number;
+    /** Total number of returned results. */
+    total: number;
+}

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

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

package/dist/components/table/components/table-actions-wrapper/components/search/__tests__/search.test.d.ts

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

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

@@ -0,0 +1 @@
+export * from './search';

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

@@ -0,0 +1,5 @@
+import { SearchProps } from './search.types';
+export declare const Search: {
+    (props: SearchProps): JSX.Element;
+    defaultProps: import("./search.types").SearchDefaultProps;
+};

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

@@ -0,0 +1,2 @@
+import { SearchDefaultProps } from './search.types';
+export declare const searchDefaultProps: SearchDefaultProps;

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

@@ -0,0 +1 @@
+export declare const StyledSearchInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,9 @@
+import { TextFieldProps } from '../../../../../text-field';
+export interface SearchProps extends Partial<SearchDefaultProps> {
+    onChange: TextFieldProps['onTextChange'];
+    onFocus?: TextFieldProps['onFocus'];
+}
+export interface SearchDefaultProps {
+    placeholder: string;
+    value: string;
+}

package/dist/components/table/components/table-actions-wrapper/components/sort/helpers/get-sort-mapping/get-sort-mapping.d.ts

@@ -0,0 +1,3 @@
+import { TableSortField } from '../../sort.types';
+import { SortMapping } from './get-sort-mapping.types';
+export declare const getSortMapping: <SortingField = string>(sortingOptions?: TableSortField<SortingField>[]) => SortMapping<SortingField>;

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

@@ -0,0 +1,2 @@
+import { SortInfo } from '../../../../table.props';
+export type SortMapping<SortingField = string> = Record<string, SortInfo<SortingField>>;

package/dist/components/table/components/table-actions-wrapper/components/sort/helpers/get-sort-mapping/index.d.ts

@@ -0,0 +1 @@
+export * from './get-sort-mapping';

package/dist/components/table/components/table-actions-wrapper/components/sort/helpers/get-sort-options/__tests__/get-sort-options.test.d.ts

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

package/dist/components/table/components/table-actions-wrapper/components/sort/helpers/get-sort-options/get-sort-options.d.ts

@@ -0,0 +1,8 @@
+import { SortInfo, TableSortField } from '../../sort.types';
+interface MappedSortItem<SortingField = string> {
+    id: string;
+    label: string;
+    value: SortInfo<SortingField>;
+}
+export declare const getSortOptions: <SortingField = string>(sortingOptions?: TableSortField<SortingField>[]) => MappedSortItem<SortingField>[];
+export {};

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

@@ -0,0 +1,2 @@
+import { SortInfo } from '../../sort.types';
+export type SortMapping<SortingField = string> = Record<string, SortInfo<SortingField>>;

package/dist/components/table/components/table-actions-wrapper/components/sort/helpers/get-sort-options/index.d.ts

@@ -0,0 +1 @@
+export * from './get-sort-options';

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

@@ -0,0 +1 @@
+export * from './sort';

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

@@ -0,0 +1,2 @@
+import { SortProps } from './sort.types';
+export declare const Sort: (props: SortProps) => JSX.Element;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledDropdown: import("styled-components").StyledComponent<import("react").FC<import("react").PropsWithChildren<import("../../../../../dropdown").DropdownProps<any>>>, import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,24 @@
+export interface SortProps {
+    current: SortInfo;
+    disabled?: boolean;
+    fields: TableSortField<string>[];
+    onSort: (sortInfo: SortInfo) => void;
+}
+export interface SortInfo<SortingField = string> {
+    label?: string;
+    sortingField: SortingField;
+    sortingType?: SortingType;
+}
+export type SortingType = 'ASC' | 'DESC';
+export type TableSortField<SortingField = string> = {
+    bidirectional?: never;
+    label: string;
+    sortingField: SortingField;
+    /** If not provided, defaults to 'DESC' */
+    sortingType?: SortingType;
+} | {
+    bidirectional: true;
+    label: string;
+    sortingField: SortingField;
+    sortingType?: never;
+};

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

@@ -0,0 +1 @@
+export * from './table-actions-wrapper';

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

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

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

@@ -0,0 +1,28 @@
+import { JSXElementConstructor } from 'react';
+import { PagingProps } from '../../../paging/paging.types';
+import { SortProps } from './components/sort/sort.types';
+export type FiltersProps = {
+    count: number;
+    filtersContent: JSX.Element;
+    numActive: number;
+    onApply: () => void;
+    onClose: () => void;
+    onReset: () => void;
+};
+export interface SearchProps {
+    onSearch: (value: string) => void;
+    placeholder?: string;
+    value: string;
+}
+export interface CustomActionProps {
+    Component: JSXElementConstructor<Record<never, never>>;
+    position?: 'left' | 'right';
+}
+export interface TableActionsWrapperProps {
+    className: string | undefined;
+    customAction: CustomActionProps | undefined;
+    filters: FiltersProps | undefined;
+    paging: PagingProps | undefined;
+    search: SearchProps | undefined;
+    sorting: SortProps | undefined;
+}

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

@@ -0,0 +1 @@
+export * from './table-footer';

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

@@ -0,0 +1,7 @@
+import { RowData } from '@tanstack/react-table';
+import { TableFooterProps } from './table-footer.types';
+export declare const TableFooter: <DataType extends RowData<{
+    [key: string]: unknown;
+    id: string | number;
+    subRows?: any[] | undefined;
+}>>(props: TableFooterProps<DataType>) => JSX.Element;

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

@@ -0,0 +1,4 @@
+import { RowData, Table } from '@tanstack/react-table';
+export type TableFooterProps<DataType extends RowData> = {
+    table: Table<DataType>;
+};

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

@@ -0,0 +1 @@
+export * from './table-header';

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

@@ -0,0 +1,7 @@
+import { RowData } from '@tanstack/react-table';
+import { TableHeaderProps } from './table-header.types';
+export declare const TableHeader: <DataType extends RowData<{
+    [key: string]: unknown;
+    id: string | number;
+    subRows?: any[] | undefined;
+}>>(props: TableHeaderProps<DataType>) => JSX.Element;

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

@@ -0,0 +1,3 @@
+export declare const StyledTH: import("styled-components").StyledComponent<"th", import("styled-components").DefaultTheme, {
+    size: number;
+}, never>;

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

@@ -0,0 +1,6 @@
+import { RowData, Table } from '@tanstack/react-table';
+import { GetHeaderCellProps } from '../../table.types';
+export type TableHeaderProps<DataType extends RowData> = {
+    getHeaderCellProps: GetHeaderCellProps<DataType> | undefined;
+    table: Table<DataType>;
+};

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

@@ -0,0 +1 @@
+export * from './use-drag-and-drop';

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { RowData } from '@tanstack/react-table';
+import { UseDragAndDropProps } from './use-drag-and-drop.types';
+export declare const useDragAndDrop: <DataType extends RowData<{
+    [key: string]: unknown;
+    id: string | number;
+    subRows?: any[] | undefined;
+}>>(props: UseDragAndDropProps<DataType>) => {
+    dragAndDropRef: import("react").RefObject<HTMLTableRowElement>;
+    isDragging: boolean;
+};

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

@@ -0,0 +1,9 @@
+import { Row, RowData } from '@tanstack/react-table';
+export interface UseDragAndDropProps<DataType extends RowData> {
+    enableReordering: boolean;
+    handleOnReorder: () => Promise<void>;
+    index: number;
+    isSubRow: boolean;
+    moveRow: (startIndex: number, endIndex: number) => void;
+    row: Row<DataType>;
+}

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

@@ -0,0 +1 @@
+export * from './table-row';

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

@@ -0,0 +1,10 @@
+/** See `RowStatusValue` type for possible values. */
+export declare const dataAttrRowStatus: "data-row-status";
+export declare const dataAttrRowIsClickable: "data-row-is-clickable";
+export declare const dataAttrRowHighlightOnHover: "data-row-highlight-on-hover";
+/** Applying this data attribute marks a row as active, applying a new background color. */
+export declare const dataAttrActiveRow: "data-active-row";
+/** Prefix added to table cell data attrs (like cell ID). */
+export declare const dataAttrCellPrefix: "data-cell";
+/** Applied when a sticky styled element is observed to have become sticky via `markStickyElements`. */
+export declare const dataAttrIsSticky: "data-is-sticky";

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

@@ -0,0 +1,7 @@
+import { RowData } from '@tanstack/react-table';
+import { TableRowProps } from './table-row.types';
+export declare const TableRow: <DataType extends RowData<{
+    [key: string]: unknown;
+    id: string | number;
+    subRows?: any[] | undefined;
+}>>(props: TableRowProps<DataType>) => JSX.Element;

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

@@ -0,0 +1,4 @@
+export declare const StyledTR: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
+    canReorder: boolean;
+    isDragging: boolean;
+}, never>;

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

@@ -0,0 +1,12 @@
+import { Row, RowData } from '@tanstack/react-table';
+import { CustomRowProps, GetCellProps, OnRowClick } from '../../table.types';
+export interface TableRowProps<DataType extends RowData> {
+    customRowProps: CustomRowProps;
+    enableReordering: boolean;
+    getCellProps: GetCellProps<DataType> | undefined;
+    handleOnReorder: () => Promise<void>;
+    index: number;
+    moveRow: (startIndex: number, endIndex: number) => void;
+    onRowClick?: OnRowClick<DataType>;
+    row: Row<DataType>;
+}

package/dist/components/table/helpers/add-missing-ids/index.d.ts

@@ -0,0 +1,7 @@
+import { RowData } from '@tanstack/react-table';
+/** If an index does not contain an `id` value, one is added using uuid. */
+export declare const addMissingIds: <DataType extends RowData<{
+    [key: string]: unknown;
+    id: string | number;
+    subRows?: any[] | undefined;
+}>>(data: DataType[]) => DataType[];

package/dist/components/table/helpers/hyphenate-column-id/hyphenate-column-id.d.ts

@@ -0,0 +1 @@
+export declare const hyphenateColumnId: ((id: string) => string) & import("lodash").MemoizedFunction;

package/dist/components/table/helpers/hyphenate-column-id/index.d.ts

@@ -0,0 +1 @@
+export * from './hyphenate-column-id';

package/dist/components/table/hooks/use-move-row/index.d.ts

@@ -0,0 +1 @@
+export * from './use-move-row';

package/dist/components/table/hooks/use-move-row/use-move-row.d.ts

@@ -0,0 +1,9 @@
+import { RowData } from '@tanstack/react-table';
+import { UseMoveRowProps } from './use-move-row.types';
+export declare const useMoveRow: <TData extends RowData<{
+    [key: string]: unknown;
+    id: string | number;
+    subRows?: any[] | undefined;
+}>>(props: UseMoveRowProps<TData>) => {
+    moveRow: (startIndex: number, endIndex: number) => void;
+};

package/dist/components/table/hooks/use-move-row/use-move-row.types.d.ts

@@ -0,0 +1,5 @@
+import { RowData } from '@tanstack/react-table';
+import { Dispatch, SetStateAction } from 'react';
+export interface UseMoveRowProps<TData extends RowData> {
+    setData: Dispatch<SetStateAction<TData[]>>;
+}

package/dist/components/table/hooks/use-track-sticky-cells/index.d.ts

@@ -0,0 +1 @@
+export * from './use-track-sticky-cells';

package/dist/components/table/hooks/use-track-sticky-cells/use-track-sticky-cells.d.ts

@@ -0,0 +1,3 @@
+import { UseTrackStickyCellsProps } from './use-track-sticky-cells.types';
+/** Mark table if header and/or first column cells are sticky. */
+export declare const useTrackStickyCells: (props: UseTrackStickyCellsProps) => void;

package/dist/components/table/hooks/use-track-sticky-cells/use-track-sticky-cells.types.d.ts

@@ -0,0 +1,7 @@
+import { ColumnDef } from '@tanstack/react-table';
+export interface UseTrackStickyCellsProps {
+    columns: ColumnDef<any, any>[];
+    /** The containing element that the child will intersect with. */
+    root: Element | null;
+    stickyFirstColumn: boolean | undefined;
+}

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

@@ -0,0 +1,3 @@
+export * from './table';
+export * from './table.types';
+export * from './components/table-row/table-row.constants';

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

@@ -0,0 +1,10 @@
+import { RowData } from '@tanstack/react-table';
+import { TableProps } from './table.types';
+export declare const Table: {
+    <DataType extends RowData<{
+        [key: string]: unknown;
+        id: string | number;
+        subRows?: any[] | undefined;
+    }>>(props: TableProps<DataType>): JSX.Element;
+    defaultProps: import("./table.types").TableDefaultProps;
+};

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

@@ -0,0 +1,2 @@
+import { TableDefaultProps } from './table.types';
+export declare const tableDefaultProps: TableDefaultProps;

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

@@ -0,0 +1,4 @@
+export declare const StyledTableContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTable: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {
+    stickyFirstColumn: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,44 @@
+import { Cell, ColumnDef, Header, Row, RowData, TableOptions } from '@tanstack/react-table';
+import { HTMLAttributes, MouseEvent } from 'react';
+import { PagingProps } from '../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';
+export interface TableProps<DataType extends RowData> extends Partial<TableDefaultProps> {
+    className?: string;
+    columns: ColumnDef<DataType, any>[];
+    customAction?: CustomActionProps;
+    /**
+     * For each index, if no `id` key exists, one will be assigned.
+     *
+     * To create collapsable rows, optionally provide the index with a `subRows` key. It should be an array of objects matching the expected data type.
+     */
+    data: DataType[];
+    filters?: FiltersProps;
+    getCellProps?: GetCellProps<DataType>;
+    getHeaderCellProps?: GetHeaderCellProps<DataType>;
+    /** Include `status` in the returned value to set the row status color. */
+    getRowProps?: GetRowProps<DataType>;
+    onRowClick?: OnRowClick<DataType>;
+    /** Any options provided are passed to `useReactTable` and may override default values. */
+    options?: Partial<TableOptions<DataType>>;
+    paging?: PagingProps;
+    reordering?: {
+        enable: boolean;
+        onReorder: (data: DataType[]) => Promise<void>;
+    };
+    search?: SearchProps;
+    sorting?: SortProps;
+}
+export interface TableDefaultProps {
+    stickyFirstColumn: boolean;
+}
+export type GetHeaderCellProps<DataType extends RowData> = (cell?: Header<DataType, unknown>) => CustomCellProps;
+export type GetRowProps<DataType extends RowData> = (row?: Row<DataType>, rows?: Row<DataType>[]) => CustomRowProps;
+export type GetCellProps<DataType extends RowData> = (cell?: Cell<DataType, unknown>) => CustomCellProps;
+export type OnRowClick<DataType extends RowData> = (data: Row<DataType>, event: MouseEvent<HTMLTableRowElement>) => void;
+export interface CustomRowProps extends Record<string, unknown>, HTMLAttributes<HTMLTableRowElement> {
+    status?: RowStatusValue | undefined;
+}
+export interface CustomCellProps extends Record<string, unknown>, HTMLAttributes<HTMLTableCellElement> {
+}
+export type RowStatusValue = 'handled' | 'next' | 'error' | 'warning';

package/dist/helpers/format-as-locale-number/format-as-locale-number.d.ts

@@ -0,0 +1,6 @@
+import { FormatAsLocaleNumberOptions } from './format-as-locale-number.types';
+/**
+ * Set `locale` in `options` to override default `'en-US'`.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options */
+export declare const formatAsLocaleNumber: (value: number, options?: FormatAsLocaleNumberOptions) => string;

package/dist/helpers/format-as-locale-number/format-as-locale-number.types.d.ts

@@ -0,0 +1,3 @@
+export interface FormatAsLocaleNumberOptions extends Intl.NumberFormatOptions {
+    locale?: string;
+}

package/dist/helpers/format-as-locale-number/index.d.ts

@@ -0,0 +1 @@
+export * from './format-as-locale-number';

package/dist/helpers/mark-sticky-elements/__tests__/mark-sticky-elements.test.d.ts

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

package/dist/helpers/mark-sticky-elements/__tests__/setup.d.ts

@@ -0,0 +1,8 @@
+import { RenderResult } from '@testing-library/react';
+import { StickyTo } from '../mark-sticky-elements.types';
+interface SetupMockElementsResponse extends RenderResult {
+    elementsToMark: Element[];
+    elementsToObserve: Element[];
+}
+export declare const setupMockElements: (stickyTo: StickyTo) => SetupMockElementsResponse;
+export {};

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

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

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

@@ -0,0 +1,2 @@
+import { GetIntersectionObserverCallbackArgs } from './get-intersection-observer-callback.types';
+export declare const getIntersectionObserverCallback: (args: GetIntersectionObserverCallbackArgs) => IntersectionObserverCallback;

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

@@ -0,0 +1,8 @@
+import { StickyTo } from '../../mark-sticky-elements.types';
+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. */
+    stickyTo?: StickyTo;
+}

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

@@ -0,0 +1 @@
+export * from './get-intersection-observer-callback';

package/dist/helpers/mark-sticky-elements/index.d.ts

@@ -0,0 +1 @@
+export * from './mark-sticky-elements';

package/dist/helpers/mark-sticky-elements/mark-sticky-elements.constants.d.ts

@@ -0,0 +1,2 @@
+/** Applied when a sticky styled element is observed to have become sticky via `markStickyElements`. */
+export declare const dataAttrIsSticky = "data-is-sticky";

package/dist/helpers/mark-sticky-elements/mark-sticky-elements.d.ts

@@ -0,0 +1,28 @@
+import { MarkStickyElementsArgs } from './mark-sticky-elements.types';
+/**
+ * When each arg's `elementsToObserve` is recognized as sticky, the `dataAttrIsSticky` variable value is applied to that element.
+ * @example
+ * useEffect(() => {
+ *   const elementsToMark = [document.querySelector('table')];
+ *   const elementsToObserve = Array.from(
+ *     document.querySelectorAll('tr td:first-child'),
+ *   );
+ *   const root = [document.querySelector('[data-table-container]')];
+ *   const stickyTo = 'left';
+ *
+ *    const { cleanupUseEffect } = markStickyElements({
+ *     attrToApply: `${dataAttrIsSticky}-${stickyTo}`,
+ *     elementsToMark,
+ *     elementsToObserve,
+ *     root,
+ *     stickyTo,
+ *   });
+ *
+ *    return cleanupUseEffect;
+ * }, [allColumns]);
+ *
+ * @source https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
+ */
+export declare const markStickyElements: (...args: MarkStickyElementsArgs) => {
+    cleanupUseEffect: () => void;
+};

package/dist/helpers/mark-sticky-elements/mark-sticky-elements.types.d.ts

@@ -0,0 +1,28 @@
+export interface StickyElementsDetails {
+    /** 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;
+    /**
+     * All elements in this array will be labeled as sticky according to the status of `elementsToObserve`.
+     *
+     * If using `document.querySelectorAll`, you can use `Array.from(document.querySelectorAll(SELECTOR))` to satisfy TypeScript.
+     */
+    elementsToMark?: Element[];
+    /**
+     * 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.
+     *
+     * If using `document.querySelectorAll`, you can use `Array.from(document.querySelectorAll(SELECTOR))` to satisfy TypeScript.
+     *
+     * **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.
+     */
+    elementsToObserve: Element[];
+    /**
+     * The containing element that the child will intersect with. Value is passed to IntersectionObserver options.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root
+     * */
+    root?: Document | Element;
+    /** If not provided, an intersection in any direction mark the elements. */
+    stickyTo?: StickyTo;
+}
+export type StickyTo = 'top' | 'bottom' | 'left' | 'right';
+export type MarkStickyElementsArgs = StickyElementsDetails[];