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

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/box/box.types.d.ts

@@ -9,7 +9,7 @@ type DeprecatedSize = 's1' | 's2' | 's3' | 's4' | 's5' | 's6';
 /**
  *
  */
-export type BoxDimension = DeprecatedSize | '.5x' | 'x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | '11x' | '12x' | '16x' | '18x' | '24x' | 'unset' | null | '0' | `${number}px` | `${number}rem` | `${number}vw` | `${number}%` | `calc(${string})`;
+export type BoxDimension = DeprecatedSize | '.5x' | 'x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x' | '11x' | '12x' | '13x' | '14x' | '15x' | '16x' | '17x' | '18x' | '19x' | '20x' | '24x' | 'unset' | null | '0' | `${number}px` | `${number}rem` | `${number}vw` | `${number}%` | `calc(${string})`;
 type AllowedBoxDimension<T> = T extends BoxDimension ? T : never;
 export interface ResolutionAwarePropBase<T> {
     lg?: AllowedBoxDimension<T>;

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

@@ -1,5 +1,5 @@
 import { DropdownMenuProps } from './dropdown-menu.types';
 export declare const DropdownMenu: {
-    <T>(props: DropdownMenuProps<T>): JSX.Element;
+    <T extends Record<any, any>>(props: DropdownMenuProps<T>): JSX.Element;
     defaultProps: Partial<DropdownMenuProps<Record<string, unknown>>>;
 };

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

@@ -21,6 +21,8 @@ export interface DropdownMenuProps<T = Record<string, unknown>> {
     renderItem?: (item: T) => Maybe<ReactNode>;
     searchType?: 'startsWith' | 'contains' | 'endsWith';
     searchable?: boolean;
+    /** Optionally provide to highlight multiple items as selected. */
+    selectedItems?: T[];
     value?: string | number;
     width?: Property.Width<string | number>;
 }

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

@@ -1,12 +1,14 @@
 import { Property } from 'csstype';
-import { BoxProps } from '../box/box.types';
+import { BoxDimension, BoxProps } from '../box/box.types';
 import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
 export interface FlexProps extends BoxProps {
     alignItems?: ResolutionAwareProp<Property.AlignItems>;
+    columnGap?: ResolutionAwareProp<BoxDimension>;
     direction?: ResolutionAwareProp<any>;
     gap?: ResolutionAwareProp<Property.Gap>;
     height?: ResolutionAwareProp<string>;
     justifyContent?: ResolutionAwareProp<Property.JustifyContent>;
+    rowGap?: ResolutionAwareProp<BoxDimension>;
     width?: ResolutionAwareProp<string>;
     wrap?: ResolutionAwareProp<Property.FlexWrap>;
 }

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/XSmall.d.ts

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

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

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

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';
@@ -39,3 +41,5 @@ export { default as ThreeDotsHorizontal } from './ThreeDotsHorizontal';
 export { default as ThreeDotsHorizontal24 } from './ThreeDotsHorizontal24';
 export { default as X } from './X';
 export { default as X24 } from './X24';
+export { default as XSmall } from './XSmall';
+export { default as XSmall24 } from './XSmall24';

package/dist/components/icon/generated/work/SdCardFilledExclamation.d.ts

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

package/dist/components/icon/generated/work/SdCardFilledExclamation24.d.ts

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

package/dist/components/icon/generated/work/SdCardOutline.d.ts

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

package/dist/components/icon/generated/work/SdCardOutline24.d.ts

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

package/dist/components/icon/generated/work/index.d.ts

@@ -28,6 +28,10 @@ export { default as SandPaper } from './SandPaper';
 export { default as SandPaper24 } from './SandPaper24';
 export { default as SandPrimed } from './SandPrimed';
 export { default as SandPrimed24 } from './SandPrimed24';
+export { default as SdCardFilledExclamation } from './SdCardFilledExclamation';
+export { default as SdCardFilledExclamation24 } from './SdCardFilledExclamation24';
+export { default as SdCardOutline } from './SdCardOutline';
+export { default as SdCardOutline24 } from './SdCardOutline24';
 export { default as Sun } from './Sun';
 export { default as Sun24 } from './Sun24';
 export { default as TriangleRuler } from './TriangleRuler';

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", "ui-control:x_small", "ui-control:x_small_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:sd_card_filled_exclamation", "work:sd_card_filled_exclamation_24", "work:sd_card_outline", "work:sd_card_outline_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/index.d.ts

@@ -21,6 +21,7 @@ export * from './in-view';
 export * from './line';
 export * from './linear-progress';
 export * from './modal';
+export * from './multi-select-list';
 export * from './overlay';
 export * from './pills';
 export * from './radio';

package/dist/components/multi-select-list/index.d.ts

@@ -0,0 +1 @@
+export * from './multi-select-list';

package/dist/components/multi-select-list/multi-select-list.d.ts

@@ -0,0 +1,5 @@
+import { MultiSelectListProps } from './multi-select-list.types';
+export declare const MultiSelectList: {
+    <Item extends Record<any, any>>(props: MultiSelectListProps<Item>): JSX.Element;
+    defaultProps: import("./multi-select-list.types").MultiSelectListDefaultProps<Record<string, unknown>>;
+};

package/dist/components/multi-select-list/multi-select-list.presets.d.ts

@@ -0,0 +1,2 @@
+import { MultiSelectListDefaultProps } from './multi-select-list.types';
+export declare const multiSelectListDefaultProps: MultiSelectListDefaultProps<Record<string, unknown>>;

package/dist/components/multi-select-list/multi-select-list.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledFlexItem: 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>;

package/dist/components/multi-select-list/multi-select-list.types.d.ts

@@ -0,0 +1,11 @@
+import { FlexProps } from '../flex/flex.types';
+export interface MultiSelectListProps<Item extends Record<any, any>> extends Partial<MultiSelectListDefaultProps<Item>>, Partial<FlexProps> {
+    items: Item[];
+    labelPropertyTx?: (item?: Item) => string;
+    setItems: (newItems: Item[]) => void;
+}
+export interface MultiSelectListDefaultProps<Item extends Record<any, any>> {
+    clearButtonText?: string;
+    idProperty: keyof Item;
+    labelProperty: keyof Item | ((item?: Item) => string);
+}

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.d.ts

@@ -1,5 +1,5 @@
 import { SearchFieldProps } from './search-field.types';
 export declare const SearchField: {
-    <T>(props: SearchFieldProps<T>): JSX.Element;
+    <T extends Record<any, any>>(props: SearchFieldProps<T>): JSX.Element;
     defaultProps: Partial<SearchFieldProps<any>>;
 };

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

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

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

@@ -6,8 +6,10 @@ import { BlurChangeEvent, DropdownChangeEvent } from '../dropdown';
 export interface SearchFieldProps<T = Record<string, unknown>> extends Omit<DropdownMenuProps<T>, 'items'> {
     borderless?: boolean;
     className?: string;
+    clearButtonText?: string;
     disabled?: boolean;
     dropdownPopupWidth?: Property.Width<string | number>;
+    enableSelectedItemsList?: boolean;
     errorMessage?: ErrorMessageType;
     filterFn?: (searchBy: string, item: T) => boolean;
     hideErrors?: boolean;
@@ -15,12 +17,16 @@ export interface SearchFieldProps<T = Record<string, unknown>> extends Omit<Drop
     /** Can optionally include `disabled: true` to any index to disable that item. */
     items?: T[];
     keyProperty?: (option?: T) => string;
-    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;
+    onChange?: (event: DropdownChangeEvent<T> | DropdownChangeEvent<T[keyof T][]>) => void;
     onFocus?: (event: FocusEvent<HTMLDivElement>) => void;
     onOpen?: () => void;
     onTextChange?: (value: string) => void;
@@ -29,7 +35,9 @@ export interface SearchFieldProps<T = Record<string, unknown>> extends Omit<Drop
     placeholderTxValues?: {
         [key: string]: string;
     };
-    renderPlaceholder?: (option?: T) => JSX.Element;
+    processing?: boolean;
+    processingText?: string;
+    processingTx?: string;
     resetSelectionOnDisabled?: boolean;
     /**
      * If internal, the component will search over the provided list of items,
@@ -37,6 +45,8 @@ export interface SearchFieldProps<T = Record<string, unknown>> extends Omit<Drop
      * the new items must be provided after.
      * */
     searchMode?: 'internal' | 'external';
+    selectedItemsList?: (keyof T)[];
     style?: CSSProperties;
     variant?: 'line' | 'filled';
+    labelPosition?: 'top' | 'left';
 }

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

@@ -1,10 +1,10 @@
 import { PropsWithChildren, ReactNode } from 'react';
 import { RowData } from '@tanstack/react-table';
-import { ReorderingProps } from '../../table.types';
+import { RowReorderingProps } 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;
+    reordering: RowReorderingProps<TData> | undefined;
 }>;

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,3 @@
+export * from './preference-item-overlay';
+export * from './sortable-preference-item';
+export * from './user-preferences-modal';

package/dist/components/table/components/custom-columns-toggle/components/user-preferences-toggle/components/preference-item-drag-handle/index.d.ts

@@ -0,0 +1 @@
+export * from './preference-item-drag-handle';

package/dist/components/table/components/custom-columns-toggle/components/user-preferences-toggle/components/preference-item-drag-handle/preference-item-drag-handle.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+export declare const PreferenceItemDragHandle: FC<{
+    id: string;
+}>;

package/dist/components/table/components/custom-columns-toggle/components/user-preferences-toggle/components/preference-item-drag-handle/preference-item-drag-handle.styles.d.ts

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

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

@@ -0,0 +1 @@
+export * from './preference-item-overlay';

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { CustomColumnOption } from '../../../../custom-columns-toggle.types';
+export declare const PreferenceItemOverlay: FC<{
+    data: CustomColumnOption;
+}>;

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

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

package/dist/components/table/components/custom-columns-toggle/components/user-preferences-toggle/components/sortable-preference-item/SortablePreferenceItem.types.d.ts

@@ -0,0 +1,4 @@
+export interface SortablePreferenceItemProps {
+    id: string;
+    reorderEnable: boolean;
+}

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

@@ -0,0 +1 @@
+export * from './sortable-preference-item';

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

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+import { SortablePreferenceItemProps } from './SortablePreferenceItem.types';
+export declare const SortablePreferenceItem: FC<PropsWithChildren<SortablePreferenceItemProps>>;

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

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

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

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const Sortable: FC<PropsWithChildren<{
+    id: string;
+}>>;

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,10 @@
+import { CustomColumnOption } from '../../../../custom-columns-toggle.types';
+import { SyncState } from '../../../../../../table.types';
+export interface UserPreferencesModalProps {
+    activeIndex: number;
+    checklistOptions: CustomColumnOption[];
+    onClose: () => Promise<void>;
+    onReset: () => Promise<void>;
+    syncState?: SyncState;
+    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,12 @@
+import { Dispatch, SetStateAction } from 'react';
+import { CustomColumnOption } from '../../custom-columns-toggle.types';
+import { SyncState } from '../../../../table.types';
+export interface UserPreferencesToggleProps {
+    activeIndex: number;
+    checklistOptions: CustomColumnOption[];
+    isActive: boolean;
+    modalHeading: string;
+    onReset: () => Promise<void>;
+    setIsActive: Dispatch<SetStateAction<boolean>>;
+    syncState?: SyncState;
+}

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

@@ -0,0 +1,3 @@
+export declare const transformsRecordsIntoIds: (records: Array<{
+    id?: string | number;
+}>) => string[];

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.helpers.d.ts

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

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,23 @@
+import { RowData, Table } from '@tanstack/react-table';
+import { Dispatch, SetStateAction } from 'react';
+import { SyncState } from '../../table.types';
+export interface CustomColumnsWrapperProps<TData extends RowData> {
+    isActive: boolean;
+    isScrolling: boolean;
+    setIsActive: Dispatch<SetStateAction<boolean>>;
+    syncState?: SyncState;
+    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;
+    id: string;
+    label: string;
+    onChange: (event: unknown) => void;
+    reorderable: boolean;
+}

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.styles.d.ts

@@ -1,4 +1,3 @@
-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

@@ -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,7 +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>;
-}>;