gantri-components 3.0.0-beta.26 → 3.0.0-beta.28

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/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/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/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,11 +12,6 @@ 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>;