gantri-components 2.47.1 → 2.48.1

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/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

@@ -41,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/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: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 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: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/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.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,7 +17,6 @@ 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;
     /**
@@ -25,7 +26,7 @@ export interface SearchFieldProps<T = Record<string, unknown>> extends Omit<Drop
     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;
@@ -44,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';
 }