gantri-components 3.0.0-beta.40 → 3.0.0-beta.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import { DropdownMenuProps } from './dropdown-menu.types';
2
2
  export declare const DropdownMenu: {
3
- <T>(props: DropdownMenuProps<T>): JSX.Element;
3
+ <T extends Record<string, unknown>>(props: DropdownMenuProps<T>): JSX.Element;
4
4
  defaultProps: Partial<DropdownMenuProps<Record<string, unknown>>>;
5
5
  };
@@ -21,6 +21,8 @@ export interface DropdownMenuProps<T = Record<string, unknown>> {
21
21
  renderItem?: (item: T) => Maybe<ReactNode>;
22
22
  searchType?: 'startsWith' | 'contains' | 'endsWith';
23
23
  searchable?: boolean;
24
+ /** Optionally provide to highlight multiple items as selected. */
25
+ selectedItems?: T[];
24
26
  value?: string | number;
25
27
  width?: Property.Width<string | number>;
26
28
  }
@@ -1,12 +1,14 @@
1
1
  import { Property } from 'csstype';
2
- import { BoxProps } from '../box/box.types';
2
+ import { BoxDimension, BoxProps } from '../box/box.types';
3
3
  import { ResolutionAwareProp } from '../../types/resolution-aware-prop.type';
4
4
  export interface FlexProps extends BoxProps {
5
5
  alignItems?: ResolutionAwareProp<Property.AlignItems>;
6
+ columnGap?: ResolutionAwareProp<BoxDimension>;
6
7
  direction?: ResolutionAwareProp<any>;
7
8
  gap?: ResolutionAwareProp<Property.Gap>;
8
9
  height?: ResolutionAwareProp<string>;
9
10
  justifyContent?: ResolutionAwareProp<Property.JustifyContent>;
11
+ rowGap?: ResolutionAwareProp<BoxDimension>;
10
12
  width?: ResolutionAwareProp<string>;
11
13
  wrap?: ResolutionAwareProp<Property.FlexWrap>;
12
14
  }
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const SvgXSmall: React.NamedExoticComponent<object>;
3
+ export default SvgXSmall;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ declare const SvgXSmall24: React.NamedExoticComponent<object>;
3
+ export default SvgXSmall24;
@@ -41,3 +41,5 @@ export { default as ThreeDotsHorizontal } from './ThreeDotsHorizontal';
41
41
  export { default as ThreeDotsHorizontal24 } from './ThreeDotsHorizontal24';
42
42
  export { default as X } from './X';
43
43
  export { default as X24 } from './X24';
44
+ export { default as XSmall } from './XSmall';
45
+ export { default as XSmall24 } from './XSmall24';
@@ -1,2 +1,2 @@
1
- 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"];
1
+ 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"];
2
2
  export type IconType = typeof IconsList[number];
@@ -21,6 +21,7 @@ export * from './in-view';
21
21
  export * from './line';
22
22
  export * from './linear-progress';
23
23
  export * from './modal';
24
+ export * from './multi-select-list';
24
25
  export * from './overlay';
25
26
  export * from './pills';
26
27
  export * from './radio';
@@ -0,0 +1 @@
1
+ export * from './multi-select-list';
@@ -0,0 +1,5 @@
1
+ import { MultiSelectListProps } from './multi-select-list.types';
2
+ export declare const MultiSelectList: {
3
+ <Item extends Record<string, unknown>>(props: MultiSelectListProps<Item>): JSX.Element;
4
+ defaultProps: import("./multi-select-list.types").MultiSelectListDefaultProps<Record<string, unknown>>;
5
+ };
@@ -0,0 +1,2 @@
1
+ import { MultiSelectListDefaultProps } from './multi-select-list.types';
2
+ export declare const multiSelectListDefaultProps: MultiSelectListDefaultProps<Record<string, unknown>>;
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ 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>;
@@ -0,0 +1,11 @@
1
+ import { Dispatch, SetStateAction } from 'react';
2
+ import { FlexProps } from '../flex/flex.types';
3
+ export interface MultiSelectListProps<Item extends Record<string, unknown>> extends Partial<MultiSelectListDefaultProps<Item>>, Partial<FlexProps> {
4
+ items: Item[];
5
+ labelPropertyTx?: (item?: Item) => string;
6
+ setItems: Dispatch<SetStateAction<Item[]>>;
7
+ }
8
+ export interface MultiSelectListDefaultProps<Item extends Record<string, unknown>> {
9
+ idProperty: keyof Item;
10
+ labelProperty: keyof Item | ((item?: Item) => string);
11
+ }
@@ -1,5 +1,5 @@
1
1
  import { SearchFieldProps } from './search-field.types';
2
2
  export declare const SearchField: {
3
- <T>(props: SearchFieldProps<T>): JSX.Element;
3
+ <T extends Record<string, unknown>>(props: SearchFieldProps<T>): JSX.Element;
4
4
  defaultProps: Partial<SearchFieldProps<any>>;
5
5
  };
@@ -8,6 +8,7 @@ export interface SearchFieldProps<T = Record<string, unknown>> extends Omit<Drop
8
8
  className?: string;
9
9
  disabled?: boolean;
10
10
  dropdownPopupWidth?: Property.Width<string | number>;
11
+ enableSelectedItemsList?: boolean;
11
12
  errorMessage?: ErrorMessageType;
12
13
  filterFn?: (searchBy: string, item: T) => boolean;
13
14
  hideErrors?: boolean;
@@ -1,7 +1,8 @@
1
1
  export interface TabProps {
2
+ className?: string;
2
3
  disabled?: boolean;
3
4
  icon?: JSX.Element;
4
- label: string;
5
+ label?: string;
5
6
  labelTx?: string;
6
7
  value: string | number;
7
8
  }
@@ -1,5 +1,6 @@
1
1
  import { CSSProperties } from 'react';
2
2
  export interface TabPanelProps {
3
+ className?: string;
3
4
  style?: CSSProperties;
4
5
  value: string | number;
5
6
  }
@@ -1,6 +1,7 @@
1
1
  import { Property } from 'csstype';
2
2
  export interface TabsListProps {
3
3
  align?: Property.JustifyContent;
4
+ className?: string;
4
5
  hasBorder?: boolean;
5
6
  onValueChange?: (value: string | number) => void;
6
7
  }