gantri-components 1.69.0 → 1.72.0

package/dist/components/confirmation-modal/confirmation-modal.types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { ButtonColor } from 'gantri-components/dist/components/button/button.types';
 import { ModalProps } from '../modal/modal.types';
+import { ButtonColor } from '../button/button.types';
 export interface ConfirmationModalProps extends Partial<ModalProps> {
     confirmButtonIsDisabled?: boolean;
     confirmButtonText?: string;

package/dist/components/dropdown/default-option.d.ts

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

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

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

package/dist/components/dropdown/dropdown.presets.d.ts

@@ -0,0 +1,2 @@
+import { DropdownProps } from './dropdown.types';
+export declare const DropdownPresets: Partial<DropdownProps>;

package/dist/components/dropdown/dropdown.styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledOption: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../typography/typography.types").TypographyProps & import("react").RefAttributes<unknown>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,46 @@
+import { ChangeEvent, CSSProperties, FocusEvent, ReactElement } from 'react';
+import { DropdownMenuProps } from '../dropdown-menu/dropdown-menu.types';
+import { ErrorMessageType } from '../text-field';
+export interface DropdownProps<T = Record<string, unknown>> extends Pick<DropdownMenuProps<T>, Exclude<keyof DropdownMenuProps<T>, 'items'>> {
+    borderless?: boolean;
+    className?: string;
+    disabled?: boolean;
+    dropdownVariant?: 'inline' | 'external';
+    errorMessage?: ErrorMessageType;
+    hideErrors?: boolean;
+    icon?: ReactElement;
+    items?: T[];
+    keyProperty?: (option?: T) => string;
+    labelPosition?: 'top' | 'left';
+    labelText?: string;
+    labelTx?: string;
+    name?: string;
+    onBlur?: (event: BlurChangeEvent) => void;
+    onChange?: (event: DropdownChangeEvent<T>) => void;
+    onFocus?: (event: FocusEvent<HTMLDivElement>) => void;
+    onOpen?: () => void;
+    placeholder?: string;
+    placeholderTx?: string;
+    placeholderTxValues?: {
+        [key: string]: string;
+    };
+    renderPlaceholder?: (option?: T) => JSX.Element;
+    resetSelectionOnDisabled?: boolean;
+    style?: CSSProperties;
+    variant?: 'line' | 'filled';
+}
+export interface DefaultOptionProps {
+    label?: string;
+    labelTx?: string;
+}
+export interface DropdownChangeEvent<T = Record<string, unknown>> extends Pick<ChangeEvent<HTMLInputElement>, Exclude<keyof ChangeEvent<HTMLInputElement>, 'target'>> {
+    target: {
+        name: string;
+        value: T[keyof T];
+    };
+}
+export interface BlurChangeEvent extends Pick<FocusEvent<HTMLDivElement>, Exclude<keyof FocusEvent<HTMLDivElement>, 'target'>> {
+    target: {
+        name: string;
+    };
+}

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

@@ -0,0 +1,2 @@
+export * from './dropdown';
+export * from './default-option';

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { DropdownMenuProps } from './dropdown-menu.types';
+export declare const DropdownMenu: {
+    <T>(props: DropdownMenuProps<T>): JSX.Element;
+    defaultProps: Partial<DropdownMenuProps<Record<string, unknown>>>;
+};

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

@@ -0,0 +1,2 @@
+import { DropdownMenuProps } from './dropdown-menu.types';
+export declare const DropdownMenuPresets: Partial<DropdownMenuProps>;

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

@@ -0,0 +1,8 @@
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $noShadow: boolean;
+}, never>;
+export declare const StyledHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    $basic: boolean;
+    $selected: boolean;
+}, never>;

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

@@ -0,0 +1,20 @@
+import { Property } from 'csstype';
+import { ReactNode } from 'react';
+export interface DropdownMenuProps<T = Record<string, unknown>> {
+    className?: string;
+    header?: ReactNode;
+    idProperty?: keyof T;
+    items: T[];
+    keyProperty?: (item?: T) => string;
+    labelProperty?: keyof T | ((item?: T) => string);
+    labelPropertyTx?: (item?: T) => string;
+    maxHeight?: Property.MaxHeight<string | number>;
+    noShadow?: boolean;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onSelect?: (item: T | null) => void;
+    renderItem?: (item: T) => ReactNode;
+    searchType?: 'startsWith' | 'contains' | 'endsWith';
+    searchable?: boolean;
+    value?: string | number;
+    width?: Property.Width<string | number>;
+}

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

@@ -0,0 +1 @@
+export * from './dropdown-menu';

package/dist/components/index.d.ts

@@ -5,12 +5,15 @@ export * from './button';
 export * from './cell';
 export * from './checkbox';
 export * from './confirmation-modal';
+export * from './dropdown';
+export * from './dropdown-menu';
 export * from './flex';
 export * from './formik-input';
 export * from './grid';
 export * from './icon';
 export * from './image';
 export * from './modal';
+export * from './overlay';
 export * from './radio';
 export * from './stack';
 export * from './text-area';

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

@@ -0,0 +1,2 @@
+export * from './overlay';
+export * from './useOverlay.hook';

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

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

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

@@ -0,0 +1,2 @@
+import { OverlayProps } from './overlay.types';
+export declare const OverlayPresets: Partial<OverlayProps>;

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

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

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

@@ -0,0 +1,22 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface OverlayProps {
+    containerStyles?: CSSProperties;
+    content: ReactNode;
+    disabled?: boolean;
+    offsetBottom?: string;
+    offsetLeft?: string;
+    offsetRight?: string;
+    offsetTop?: string;
+    onClose?: (opened: false) => void;
+    onOpen?: (opened: true) => void;
+    open?: boolean;
+    parentContainer?: HTMLElement;
+    position?: OverlayPosition;
+    prerenderContent?: boolean;
+    triggerEvent?: 'click' | 'hover' | 'focus' | 'manual';
+}
+export interface UseOverlayParams {
+    content: ReactNode;
+    position?: OverlayPosition;
+}
+export declare type OverlayPosition = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';

package/dist/components/overlay/useOverlay.hook.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { UseOverlayParams } from './overlay.types';
+export declare const useOverlay: (params: UseOverlayParams) => {
+    closeOverlay: () => void;
+    overlayComponent: JSX.Element;
+    showRelativeTo: (parent: string | Element) => void;
+};

package/dist/components/select/default-option.d.ts

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

package/dist/components/select/dropdown.d.ts

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

package/dist/components/select/dropdown.presets.d.ts

@@ -0,0 +1,2 @@
+import { DropdownProps } from './dropdown.types';
+export declare const DropdownPresets: Partial<DropdownProps>;

package/dist/components/select/dropdown.styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const StyledOption: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../typography/typography.types").TypographyProps & import("react").RefAttributes<unknown>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/select/dropdown.types.d.ts

@@ -0,0 +1,45 @@
+import { ChangeEvent, CSSProperties, FocusEvent, ReactElement } from 'react';
+import { DropdownMenuProps } from '../dropdown-menu/dropdown-menu.types';
+import { ErrorMessageType } from '../text-field';
+export interface DropdownProps<T = Record<string, unknown>> extends DropdownMenuProps<T> {
+    borderless?: boolean;
+    className?: string;
+    disabled?: boolean;
+    dropdownVariant?: 'inline' | 'external';
+    errorMessage?: ErrorMessageType;
+    hideErrors?: boolean;
+    icon?: ReactElement;
+    keyProperty?: (option?: T) => string;
+    labelPosition?: 'top' | 'left';
+    labelText?: string;
+    labelTx?: string;
+    name?: string;
+    onBlur?: (event: BlurChangeEvent) => void;
+    onChange?: (event: DropdownChangeEvent<T>) => void;
+    onFocus?: (event: FocusEvent<HTMLDivElement>) => void;
+    onOpen?: () => void;
+    placeholder?: string;
+    placeholderTx?: string;
+    placeholderTxValues?: {
+        [key: string]: string;
+    };
+    renderPlaceholder?: (option?: T) => JSX.Element;
+    resetSelectionOnDisabled?: boolean;
+    style?: CSSProperties;
+    variant?: 'line' | 'filled';
+}
+export interface DefaultOptionProps {
+    label?: string;
+    labelTx?: string;
+}
+export interface DropdownChangeEvent<T = Record<string, unknown>> extends Pick<ChangeEvent<HTMLInputElement>, Exclude<keyof ChangeEvent<HTMLInputElement>, 'target'>> {
+    target: {
+        name: string;
+        value: T[keyof T];
+    };
+}
+export interface BlurChangeEvent extends Pick<FocusEvent<HTMLDivElement>, Exclude<keyof FocusEvent<HTMLDivElement>, 'target'>> {
+    target: {
+        name: string;
+    };
+}

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

@@ -0,0 +1,2 @@
+export * from './dropdown';
+export * from './default-option';

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

@@ -20,12 +20,12 @@ export interface TextFieldProps {
      * */
     errorMessage?: ErrorMessageType;
     hideErrors?: boolean;
-    icon?: ReactElement;
     id?: string;
     labelPosition?: 'top' | 'left';
     labelText?: string;
     labelTx?: string;
     labelTxValues?: Record<string, unknown>;
+    leftIcon?: ReactElement;
     maxLength?: number;
     maxValue?: number;
     minValue?: number;
@@ -44,6 +44,7 @@ export interface TextFieldProps {
     };
     readOnly?: boolean;
     required?: boolean;
+    rightIcon?: ReactElement;
     style?: CSSProperties;
     throttle?: number;
     type?: string;