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

package/README.md

@@ -3,7 +3,7 @@
 ## Adding new icons
 
 1. From [Figma](https://www.figma.com/file/7XptZJEfgLsGIjLT4PAFXY/Gantri-DS-%7C-Atoms?node-id=1%3A9456&t=BvL578PsHUyfuJYh-1), right click on icon from sidebar (Make sure you have the right element selected. They should be 16x16 or 24x24) and click `Copy/Paste as > Copy as SVG`.
-2. Create a new .svg file in the `/assets/icons/__APPROPRIATE_CATEGORY_FOLDER__/` directory with the same name as what appears in [Figma](https://www.figma.com/file/7XptZJEfgLsGIjLT4PAFXY/Gantri-DS-%7C-Atoms?node-id=1%3A9456&t=BvL578PsHUyfuJYh-1) minus `ic_` and `_16` (example: `ic_corner_16` and `ic_corner_24` become `corner` and `corner_24`).
+2. Create a new .svg file in the `/src/assets/icons/__APPROPRIATE_CATEGORY_FOLDER__/` directory with the same name as what appears in [Figma](https://www.figma.com/file/7XptZJEfgLsGIjLT4PAFXY/Gantri-DS-%7C-Atoms?node-id=1%3A9456&t=BvL578PsHUyfuJYh-1) minus `ic_` and `_16` (example: `ic_corner_16` and `ic_corner_24` become `corner` and `corner_24`).
 3. Look at each new svg file and verify that the viewbox is `viewbox="0 0 16 16"` or `viewbox="0 0 24 24"`, as applicable. Update any that are not the appropriate value. If the icons do not look correct when complete, you can try reverting the change or talk to the designers about correcting them.
 4. Update `fill` attributes to reference value `"currentColor"`. `stroke` attributes should also be updated. Be careful to check that the updated icon matches the original icon. Send the icon back to the designers to correct if there are any issues.
 5. Remove IDs and masks. Be careful to check that the updated icon matches the original icon. Send the icon back to the designers to correct if there are any issues.

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

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

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

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

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

@@ -17,6 +17,8 @@ export { default as LinesThree } from './LinesThree';
 export { default as LinesThree24 } from './LinesThree24';
 export { default as LinesTwo } from './LinesTwo';
 export { default as LinesTwo24 } from './LinesTwo24';
+export { default as LinesTwoDots } from './LinesTwoDots';
+export { default as LinesTwoDots24 } from './LinesTwoDots24';
 export { default as Minus } from './Minus';
 export { default as Minus24 } from './Minus24';
 export { default as MinusCircle } from './MinusCircle';

package/dist/components/icon/icon.type.d.ts

@@ -1,2 +1,2 @@
-export declare const IconsList: readonly ["actions:funnel", "actions:funnel_24", "actions:funnel_filled", "actions:funnel_filled_24", "actions:gear", "actions:gear_24", "actions:life_buoy", "actions:life_buoy_24", "actions:link", "actions:link_24", "actions:star", "actions:star_24", "actions:star_filled", "actions:star_filled_24", "actions:star_half", "actions:star_half_24", "actions:thumbs_up", "actions:thumbs_up_24", "actions:trash_can", "actions:trash_can_24", "alert:bell", "alert:bell_24", "alert:bell_filled", "alert:bell_filled_24", "alert:i_circle", "alert:i_circle_24", "alert:lightning_bolt", "alert:lightning_bolt_24", "alert:lightning_bolt_filled", "alert:lightning_bolt_filled_24", "alert:question_mark_circle", "alert:question_mark_circle_24", "alert:warning_triangle", "alert:warning_triangle_24", "animated:loader", "arrows:arrow_chevron_double_down", "arrows:arrow_chevron_double_down_24", "arrows:arrow_chevron_double_left", "arrows:arrow_chevron_double_left_24", "arrows:arrow_chevron_double_right", "arrows:arrow_chevron_double_right_24", "arrows:arrow_chevron_double_up", "arrows:arrow_chevron_double_up_24", "arrows:arrow_chevron_down", "arrows:arrow_chevron_down_24", "arrows:arrow_chevron_left", "arrows:arrow_chevron_left_24", "arrows:arrow_chevron_right", "arrows:arrow_chevron_right_24", "arrows:arrow_chevron_up", "arrows:arrow_chevron_up_24", "arrows:arrow_down", "arrows:arrow_down_24", "arrows:arrow_download", "arrows:arrow_download_24", "arrows:arrow_external", "arrows:arrow_external_24", "arrows:arrow_left", "arrows:arrow_left_24", "arrows:arrow_line_down", "arrows:arrow_line_down_24", "arrows:arrow_line_left", "arrows:arrow_line_left_24", "arrows:arrow_line_right", "arrows:arrow_line_right_24", "arrows:arrow_line_up", "arrows:arrow_line_up_24", "arrows:arrow_return", "arrows:arrow_right", "arrows:arrow_right_24", "arrows:arrow_rotate_two", "arrows:arrow_rotate_two_24", "arrows:arrow_triangle_down", "arrows:arrow_triangle_down_24", "arrows:arrow_triangle_left", "arrows:arrow_triangle_left_24", "arrows:arrow_triangle_right", "arrows:arrow_triangle_right_24", "arrows:arrow_triangle_up", "arrows:arrow_triangle_up_24", "arrows:arrow_triangle_updown", "arrows:arrow_triangle_updown_24", "arrows:arrow_triangle_updown_down_filled", "arrows:arrow_triangle_updown_down_filled_24", "arrows:arrow_triangle_updown_filled", "arrows:arrow_triangle_updown_filled_24", "arrows:arrow_triangle_updown_top_filled", "arrows:arrow_triangle_updown_top_filled_24", "arrows:arrow_up", "arrows:arrow_up_24", "arrows:arrow_updown", "arrows:arrow_updown_24", "arrows:arrow_updown_filled", "arrows:arrow_updown_filled_24", "arrows:arrow_upload", "arrows:arrow_upload_24", "data:chart_bar", "data:chart_bar_24", "docs:document_blank", "docs:document_blank_24", "docs:pencil", "docs:pencil_24", "location:house", "location:house_24", "location:location_california", "location:location_california_24", "location:location_pin", "location:location_pin_24", "logos:logo_affirm", "logos:logo_affirm_colored", "logos:logo_apple", "logos:logo_apple_text", "logos:logo_behance", "logos:logo_facebook", "logos:logo_gantri", "logos:logo_github", "logos:logo_google", "logos:logo_google_text", "logos:logo_instagram", "logos:logo_linkedin", "logos:logo_pinterest", "logos:logo_tiktok", "logos:logo_twitter", "logos:logo_yotpo", "logos:logo_youtube", "machine:difficulty_easy", "machine:difficulty_hard", "machine:difficulty_moderate", "machine:difficulty_multiple", "machine:laptop", "media:photo", "media:photo_24", "media:photo_filled", "media:photo_filled_24", "payment:cash", "payment:cash_24", "payment:credit_card", "payment:credit_card_24", "payment:gift_box", "payment:gift_box_24", "payment:gift_card", "payment:gift_card_24", "payment:shopping_bag", "payment:shopping_bag_24", "people:people", "people:people_24", "people:person", "people:person_24", "people:person_outline", "people:person_outline_24", "time:calendar", "time:calendar_24", "time:clock", "time:clock_24", "time:clock_filled", "time:clock_filled_24", "ui-control:award_ribbon", "ui-control:check_mark", "ui-control:check_mark_24", "ui-control:check_mark_circle_filled", "ui-control:check_mark_circle_filled_24", "ui-control:drag", "ui-control:email", "ui-control:email_24", "ui-control:exclamation_circle_filled", "ui-control:exclamation_circle_filled_24", "ui-control:globe", "ui-control:globe_24", "ui-control:grid", "ui-control:grid_24", "ui-control:left_quote", "ui-control:lines_three", "ui-control:lines_three_24", "ui-control:lines_two", "ui-control:lines_two_24", "ui-control:minus", "ui-control:minus_24", "ui-control:minus_circle", "ui-control:minus_circle_24", "ui-control:minus_circle_filled", "ui-control:minus_circle_filled_24", "ui-control:pause", "ui-control:pause_24", "ui-control:play", "ui-control:plus", "ui-control:plus_24", "ui-control:plus_circle", "ui-control:plus_circle_24", "ui-control:sound_off", "ui-control:sound_off_24", "ui-control:sound_on", "ui-control:three_dots_cluster", "ui-control:three_dots_cluster_24", "ui-control:three_dots_horizontal", "ui-control:three_dots_horizontal_24", "ui-control:x", "ui-control:x_24", "view:eye_open", "view:eye_open_24", "view:magnifying_glass", "view:magnifying_glass_24", "view:magnifying_glass_filled", "view:magnifying_glass_filled_24", "work:assemble", "work:assemble_24", "work:basket_filled", "work:basket_filled_24", "work:box", "work:box_24", "work:corner", "work:corner_24", "work:cube_outline", "work:cube_outline_24", "work:leaf", "work:leaf_24", "work:light_bulb", "work:light_bulb_24", "work:mask", "work:mask_24", "work:no_entry", "work:no_entry_24", "work:p_circle", "work:p_circle_24", "work:print_nozzle", "work:print_nozzle_24", "work:rfid_signal", "work:rfid_signal_24", "work:sand_painted", "work:sand_painted_24", "work:sand_paper", "work:sand_paper_24", "work:sand_primed", "work:sand_primed_24", "work:sun", "work:sun_24", "work:triangle_ruler", "work:triangle_ruler_24", "work:triangle_ruler_filled", "work:tumbler", "work:tumbler_24", "work:water_drop", "work:water_drop_24", "work:water_drop_dotted", "work:water_drop_dotted_24", "work:wrench", "work:wrench_24"];
+export declare const IconsList: readonly ["actions:funnel", "actions:funnel_24", "actions:funnel_filled", "actions:funnel_filled_24", "actions:gear", "actions:gear_24", "actions:life_buoy", "actions:life_buoy_24", "actions:link", "actions:link_24", "actions:star", "actions:star_24", "actions:star_filled", "actions:star_filled_24", "actions:star_half", "actions:star_half_24", "actions:thumbs_up", "actions:thumbs_up_24", "actions:trash_can", "actions:trash_can_24", "alert:bell", "alert:bell_24", "alert:bell_filled", "alert:bell_filled_24", "alert:i_circle", "alert:i_circle_24", "alert:lightning_bolt", "alert:lightning_bolt_24", "alert:lightning_bolt_filled", "alert:lightning_bolt_filled_24", "alert:question_mark_circle", "alert:question_mark_circle_24", "alert:warning_triangle", "alert:warning_triangle_24", "animated:loader", "arrows:arrow_chevron_double_down", "arrows:arrow_chevron_double_down_24", "arrows:arrow_chevron_double_left", "arrows:arrow_chevron_double_left_24", "arrows:arrow_chevron_double_right", "arrows:arrow_chevron_double_right_24", "arrows:arrow_chevron_double_up", "arrows:arrow_chevron_double_up_24", "arrows:arrow_chevron_down", "arrows:arrow_chevron_down_24", "arrows:arrow_chevron_left", "arrows:arrow_chevron_left_24", "arrows:arrow_chevron_right", "arrows:arrow_chevron_right_24", "arrows:arrow_chevron_up", "arrows:arrow_chevron_up_24", "arrows:arrow_down", "arrows:arrow_down_24", "arrows:arrow_download", "arrows:arrow_download_24", "arrows:arrow_external", "arrows:arrow_external_24", "arrows:arrow_left", "arrows:arrow_left_24", "arrows:arrow_line_down", "arrows:arrow_line_down_24", "arrows:arrow_line_left", "arrows:arrow_line_left_24", "arrows:arrow_line_right", "arrows:arrow_line_right_24", "arrows:arrow_line_up", "arrows:arrow_line_up_24", "arrows:arrow_return", "arrows:arrow_right", "arrows:arrow_right_24", "arrows:arrow_rotate_two", "arrows:arrow_rotate_two_24", "arrows:arrow_triangle_down", "arrows:arrow_triangle_down_24", "arrows:arrow_triangle_left", "arrows:arrow_triangle_left_24", "arrows:arrow_triangle_right", "arrows:arrow_triangle_right_24", "arrows:arrow_triangle_up", "arrows:arrow_triangle_up_24", "arrows:arrow_triangle_updown", "arrows:arrow_triangle_updown_24", "arrows:arrow_triangle_updown_down_filled", "arrows:arrow_triangle_updown_down_filled_24", "arrows:arrow_triangle_updown_filled", "arrows:arrow_triangle_updown_filled_24", "arrows:arrow_triangle_updown_top_filled", "arrows:arrow_triangle_updown_top_filled_24", "arrows:arrow_up", "arrows:arrow_up_24", "arrows:arrow_updown", "arrows:arrow_updown_24", "arrows:arrow_updown_filled", "arrows:arrow_updown_filled_24", "arrows:arrow_upload", "arrows:arrow_upload_24", "data:chart_bar", "data:chart_bar_24", "docs:document_blank", "docs:document_blank_24", "docs:pencil", "docs:pencil_24", "location:house", "location:house_24", "location:location_california", "location:location_california_24", "location:location_pin", "location:location_pin_24", "logos:logo_affirm", "logos:logo_affirm_colored", "logos:logo_apple", "logos:logo_apple_text", "logos:logo_behance", "logos:logo_facebook", "logos:logo_gantri", "logos:logo_github", "logos:logo_google", "logos:logo_google_text", "logos:logo_instagram", "logos:logo_linkedin", "logos:logo_pinterest", "logos:logo_tiktok", "logos:logo_twitter", "logos:logo_yotpo", "logos:logo_youtube", "machine:difficulty_easy", "machine:difficulty_hard", "machine:difficulty_moderate", "machine:difficulty_multiple", "machine:laptop", "media:photo", "media:photo_24", "media:photo_filled", "media:photo_filled_24", "payment:cash", "payment:cash_24", "payment:credit_card", "payment:credit_card_24", "payment:gift_box", "payment:gift_box_24", "payment:gift_card", "payment:gift_card_24", "payment:shopping_bag", "payment:shopping_bag_24", "people:people", "people:people_24", "people:person", "people:person_24", "people:person_outline", "people:person_outline_24", "time:calendar", "time:calendar_24", "time:clock", "time:clock_24", "time:clock_filled", "time:clock_filled_24", "ui-control:award_ribbon", "ui-control:check_mark", "ui-control:check_mark_24", "ui-control:check_mark_circle_filled", "ui-control:check_mark_circle_filled_24", "ui-control:drag", "ui-control:email", "ui-control:email_24", "ui-control:exclamation_circle_filled", "ui-control:exclamation_circle_filled_24", "ui-control:globe", "ui-control:globe_24", "ui-control:grid", "ui-control:grid_24", "ui-control:left_quote", "ui-control:lines_three", "ui-control:lines_three_24", "ui-control:lines_two", "ui-control:lines_two_24", "ui-control:lines_two_dots", "ui-control:lines_two_dots_24", "ui-control:minus", "ui-control:minus_24", "ui-control:minus_circle", "ui-control:minus_circle_24", "ui-control:minus_circle_filled", "ui-control:minus_circle_filled_24", "ui-control:pause", "ui-control:pause_24", "ui-control:play", "ui-control:plus", "ui-control:plus_24", "ui-control:plus_circle", "ui-control:plus_circle_24", "ui-control:sound_off", "ui-control:sound_off_24", "ui-control:sound_on", "ui-control:three_dots_cluster", "ui-control:three_dots_cluster_24", "ui-control:three_dots_horizontal", "ui-control:three_dots_horizontal_24", "ui-control:x", "ui-control:x_24", "view:eye_open", "view:eye_open_24", "view:magnifying_glass", "view:magnifying_glass_24", "view:magnifying_glass_filled", "view:magnifying_glass_filled_24", "work:assemble", "work:assemble_24", "work:basket_filled", "work:basket_filled_24", "work:box", "work:box_24", "work:corner", "work:corner_24", "work:cube_outline", "work:cube_outline_24", "work:leaf", "work:leaf_24", "work:light_bulb", "work:light_bulb_24", "work:mask", "work:mask_24", "work:no_entry", "work:no_entry_24", "work:p_circle", "work:p_circle_24", "work:print_nozzle", "work:print_nozzle_24", "work:rfid_signal", "work:rfid_signal_24", "work:sand_painted", "work:sand_painted_24", "work:sand_paper", "work:sand_paper_24", "work:sand_primed", "work:sand_primed_24", "work:sun", "work:sun_24", "work:triangle_ruler", "work:triangle_ruler_24", "work:triangle_ruler_filled", "work:tumbler", "work:tumbler_24", "work:water_drop", "work:water_drop_24", "work:water_drop_dotted", "work:water_drop_dotted_24", "work:wrench", "work:wrench_24"];
 export type IconType = typeof IconsList[number];

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

@@ -2,6 +2,7 @@ import { CSSProperties, ReactNode } from 'react';
 export interface OverlayProps {
     /** Trigger event interactions with this component causes `content` to render, as appropriate. */
     children?: ReactNode;
+    className?: string;
     /** Applied as inline styles to the `children` wrapper. */
     containerStyles?: CSSProperties;
     /** The component to show/hide. */

package/dist/components/search-field/search-field.types.d.ts

@@ -18,6 +18,11 @@ export interface SearchFieldProps<T = Record<string, unknown>> extends Omit<Drop
     labelPosition?: 'top' | 'left';
     labelText?: string;
     labelTx?: string;
+    /**
+     * System will start searching after user has input n digits
+     * There will be no dropdown shown initially, until user enters the n digits and systems begins search.
+     * */
+    minSearchLength?: number;
     name?: string;
     onBlur?: (event: BlurChangeEvent) => void;
     onChange?: (event: DropdownChangeEvent<T>) => void;

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-toggle/components/index.d.ts

@@ -0,0 +1 @@
+export * from './user-preferences-toggle';

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

@@ -0,0 +1 @@
+export * from './user-preferences-modal';

package/dist/components/table/components/custom-columns-toggle/components/user-preferences-toggle/components/user-preferences-modal/index.d.ts

@@ -0,0 +1 @@
+export * from './user-preferences-modal';

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

@@ -0,0 +1,2 @@
+import { UserPreferencesModalProps } from './user-preferences-modal.types';
+export declare const UserPreferencesModal: (props: UserPreferencesModalProps) => JSX.Element;

package/dist/components/table/components/custom-columns-toggle/components/user-preferences-toggle/components/user-preferences-modal/user-preferences-modal.styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledPreferencesPopUp: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHeading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../../../grid/grid.types").GridProps & import("react").RefAttributes<import("../../../../../../../grid/grid.types").GridProps>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledClickableIcon: import("styled-components").StyledComponent<import("react").FC<import("../../../../../../../icon/icon.types").IconProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/table/components/custom-columns-toggle/components/user-preferences-toggle/components/user-preferences-modal/user-preferences-modal.types.d.ts

@@ -0,0 +1,7 @@
+import { CustomColumnOption } from '../../../../custom-columns-toggle.types';
+export interface UserPreferencesModalProps {
+    checklistOptions: CustomColumnOption[];
+    onClose: () => Promise<void>;
+    onReset: () => Promise<void>;
+    title: string;
+}

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

@@ -0,0 +1 @@
+export * from './user-preferences-toggle';

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

@@ -0,0 +1,3 @@
+import { UserPreferencesToggleProps } from './user-preferences-toggle.types';
+/** Toggles a dialog where the user can save their preferences for the specified `page`. */
+export declare const UserPreferencesToggle: (props: UserPreferencesToggleProps) => JSX.Element;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledButton: import("styled-components").StyledComponent<import("react").FC<import("../../../../../button/button.types").ButtonProps>, import("styled-components").DefaultTheme, {
+    'data-is-active': boolean;
+}, never>;

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

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction } from 'react';
+import { CustomColumnOption } from '../../custom-columns-toggle.types';
+export interface UserPreferencesToggleProps {
+    checklistOptions: CustomColumnOption[];
+    isActive: boolean;
+    modalHeading: string;
+    onClose: () => Promise<void>;
+    onReset: () => Promise<void>;
+    setIsActive: Dispatch<SetStateAction<boolean>>;
+}

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { RowData, Table } from '@tanstack/react-table';
+export interface CustomColumnsWrapperProps<TData extends RowData> {
+    customColumns: CustomColumnsProps<TData> | undefined;
+    isScrolling: boolean;
+    table: Table<TData>;
+}
+export interface CustomColumnsProps<TData extends RowData> {
+    disabledColumns: (keyof TData | string)[];
+    hiddenColumns: (keyof TData | string)[];
+    onUpdateHiddenColumns: (columnsToHide: string[]) => Promise<void>;
+}
+export interface CustomColumnOption {
+    checked: boolean;
+    disabled: boolean;
+    label: string;
+    onChange: (event: unknown) => void;
+    value: string;
+}

package/dist/components/table/components/custom-columns-toggle/helpers/get-custom-column-initial-visibility/get-custom-column-initial-visibility.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Used to mark the starting hidden columns when using custom columns.
+ *
+ * @example
+ * const [hiddenColumns, setHiddenColumns] = useState<string[]>(STARTING_HIDDEN_COLUMNS);
+ * const initialColumnVisibility = getCustomColumnInitialVisibility(hiddenColumns);
+ * const [columnVisibility, setColumnVisibility] = useState(initialColumnVisibility);
+ *
+ * return (
+ *   <TableComponent
+ *     data={tableData}
+ *     columns={tableColumns}
+ *     options={{
+ *       state: {
+ *         columnVisibility,
+ *       },
+ *       onColumnVisibilityChange: setColumnVisibility,
+ *     }}
+ *     customColumns={{
+ *       disabledColumns: [DISABLED_COLUMNS],
+ *       onUpdateHiddenColumns: async columns => {
+ *         // REQUEST API HIDE COLUMNS
+ *         setHiddenColumns(columns);
+ *       },
+ *       hiddenColumns: hiddenColumns,
+ *     }}
+ *   />
+ * )
+ */
+export declare const getCustomColumnInitialVisibility: (hiddenColumns: string[]) => {};

package/dist/components/table/components/custom-columns-toggle/helpers/get-custom-column-initial-visibility/index.d.ts

@@ -0,0 +1 @@
+export * from './get-custom-column-initial-visibility';

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

@@ -0,0 +1,8 @@
+import { RowData } from '@tanstack/react-table';
+import { CustomColumnOption } from '../../custom-columns-toggle.types';
+import { GetCustomColumnOptionsArgs } from './get-custom-column-options.types';
+export declare const getCustomColumnOptions: <TData extends RowData<{
+    [key: string]: unknown;
+    id?: string | number | undefined;
+    subRows?: any[] | undefined;
+}>>(args: GetCustomColumnOptionsArgs<TData>) => CustomColumnOption[];

package/dist/components/table/components/custom-columns-toggle/helpers/get-custom-column-options/get-custom-column-options.types.d.ts

@@ -0,0 +1,6 @@
+import { RowData, Table } from '@tanstack/react-table';
+import { CustomColumnsProps } from '../../custom-columns-toggle.types';
+export interface GetCustomColumnOptionsArgs<TData extends RowData> {
+    customColumns: CustomColumnsProps<TData> | undefined;
+    table: Table<TData>;
+}

package/dist/components/table/components/custom-columns-toggle/helpers/get-custom-column-options/index.d.ts

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

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

@@ -0,0 +1,2 @@
+export * from './get-custom-column-initial-visibility';
+export * from './get-custom-column-options';

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

@@ -0,0 +1 @@
+export * from './use-detect-scroll';

package/dist/components/table/components/custom-columns-toggle/hooks/use-detect-scroll/index.d.ts

@@ -0,0 +1 @@
+export * from './use-detect-scroll';

package/dist/components/table/components/custom-columns-toggle/hooks/use-detect-scroll/use-detect-scroll.d.ts

@@ -0,0 +1,4 @@
+import { UseDetectScrollProps } from './use-detect-scroll.types';
+export declare const useDetectScroll: (props: UseDetectScrollProps) => {
+    isScrolling: boolean;
+};

package/dist/components/table/components/custom-columns-toggle/hooks/use-detect-scroll/use-detect-scroll.types.d.ts

@@ -0,0 +1,9 @@
+export interface UseDetectScrollProps {
+    /** Time after scrolling has stopped before acting on it. */
+    delay?: number;
+    direction: 'horizontal' | 'vertical';
+    element: HTMLElement | null;
+    enabled?: boolean;
+    onEndScrolling?: () => void;
+    onStartScrolling?: () => void;
+}

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

@@ -0,0 +1 @@
+export * from './custom-columns-toggle';

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

@@ -1,6 +1,6 @@
 import { RowData } from '@tanstack/react-table';
 import { CustomColumnsWrapperProps } from './custom-columns-wrapper.types';
-export declare const CustomColumnsWrapper: <TData extends RowData<{
+export declare const CustomColumnsToggle: <TData extends RowData<{
     [key: string]: unknown;
     id?: string | number | undefined;
     subRows?: any[] | undefined;

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

@@ -1,5 +1,9 @@
 import { RowData, Table } from '@tanstack/react-table';
-import { PropsWithChildren } from 'react';
+export interface CustomColumnsWrapperProps<TData extends RowData> {
+    customColumns: CustomColumnsProps<TData> | undefined;
+    isScrolling: boolean;
+    table: Table<TData>;
+}
 export interface CustomColumnsProps<TData extends RowData> {
     disabledColumns: (keyof TData | string)[];
     hiddenColumns: (keyof TData | string)[];
@@ -12,8 +16,3 @@ export interface CustomColumnOption {
     onChange: (event: unknown) => void;
     value: string;
 }
-export type CustomColumnsWrapperProps<TData extends RowData> = PropsWithChildren<{
-    customColumns: CustomColumnsProps<TData> | undefined;
-    table: Table<TData>;
-    tableContainerEl: HTMLDivElement | null;
-}>;

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

@@ -1 +1 @@
-export * from './useDetectHorizontalScroll';
+export * from './use-detect-scroll';

package/dist/components/table/components/custom-columns-wrapper/hooks/use-detect-scroll/index.d.ts

@@ -0,0 +1 @@
+export * from './use-detect-scroll';

package/dist/components/table/components/custom-columns-wrapper/hooks/use-detect-scroll/use-detect-scroll.d.ts

@@ -0,0 +1,4 @@
+import { UseDetectScrollProps } from './use-detect-scroll.types';
+export declare const useDetectScroll: (props: UseDetectScrollProps) => {
+    isScrolling: boolean;
+};

package/dist/components/table/components/custom-columns-wrapper/hooks/use-detect-scroll/use-detect-scroll.types.d.ts

@@ -0,0 +1,9 @@
+export interface UseDetectScrollProps {
+    /** Time after scrolling has stopped before acting on it. */
+    delay?: number;
+    direction: 'horizontal' | 'vertical';
+    element: HTMLElement | null;
+    enabled?: boolean;
+    onEndScrolling?: () => void;
+    onStartScrolling?: () => void;
+}

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

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

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

@@ -1 +1,4 @@
-export declare const StyledSearchInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+import { Property } from 'csstype';
+export declare const StyledSearchInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $maxWidth: Property.MaxWidth | undefined;
+}, never>;

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

@@ -1,12 +1,16 @@
+import { Property } from 'csstype';
 import { TextFieldProps } from '../../../../../text-field';
 import { OnConfirmInteraction } from '../../hooks';
 export interface SearchProps extends Partial<SearchDefaultProps> {
-    onChange: TextFieldProps['onTextChange'];
+    onSearch: TextFieldProps['onTextChange'];
+    value: SearchDefaultProps['value'];
 }
 export interface SearchComponentProps extends SearchProps {
     onConfirmInteraction: OnConfirmInteraction;
 }
 export interface SearchDefaultProps {
+    /** Desktop only. */
+    maxWidth: Property.MaxWidth;
     placeholder: string;
     value: string;
 }

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

@@ -2,6 +2,8 @@ import { JSXElementConstructor } from 'react';
 import { RowData, Table } from '@tanstack/react-table';
 import { PagingProps } from './components/paging/paging.types';
 import { SortProps } from './components/sort/sort.types';
+import { SearchProps } from './components/search/search.types';
+export type { SearchProps };
 export type FiltersProps = {
     count: number;
     filtersContent: JSX.Element;
@@ -10,16 +12,12 @@ export type FiltersProps = {
     onClose: () => void;
     onReset: () => void;
 };
-export interface SearchProps {
-    onSearch: (value: string) => void;
-    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,10 @@
 import { RowData, Table } from '@tanstack/react-table';
-import { GetHeaderCellProps } from '../../table.types';
+import { GetHeaderCellProps, ReorderingProps } from '../../table.types';
+import { CustomColumnsProps } from '../custom-columns-toggle/custom-columns-toggle.types';
 export type TableHeaderProps<TData extends RowData> = {
+    customColumns: CustomColumnsProps<TData> | undefined;
     getHeaderCellProps: GetHeaderCellProps<TData> | undefined;
-    reorderEnabled?: boolean;
-    reorderable: boolean;
+    isScrolling: boolean;
+    reordering: ReorderingProps<TData> | undefined;
     table: Table<TData>;
 };