@true-engineering/true-react-common-ui-kit 1.0.1

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

@@ -0,0 +1,239 @@
+import { ComponentStyles } from '../../types';
+export declare const styles: {
+    root: {};
+    fixedPosition: {
+        position: string;
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+        zIndex: number;
+        overflowX: string;
+        '-webkit-overflow-scrolling': string;
+        '& $innerOverlay': {
+            display: string;
+            width: string;
+            minHeight: string;
+            boxSizing: string;
+        };
+    };
+    innerOverlay: {};
+    sideBar: {
+        '& $modal': {
+            borderRadius: number;
+            margin: number;
+            minHeight: string;
+        };
+    };
+    'position-static': {};
+    'position-left': {};
+    'position-right': {
+        justifyContent: string;
+    };
+    'position-center': {
+        padding: number[];
+    };
+    overlay: {
+        backgroundColor: string;
+    };
+    modal: {
+        backgroundColor: "#ffffff";
+        borderRadius: 16;
+        boxShadow: string;
+        margin: string;
+        position: string;
+        maxWidth: string;
+    };
+    title: {
+        fontSize: number;
+        lineHeight: number;
+        marginTop: number;
+    };
+    titleWithCloseButton: {
+        paddingRight: number;
+    };
+    close: {
+        position: string;
+    };
+    content: {};
+    footer: {
+        display: string;
+        gap: number;
+    };
+    stickyFooterWrapper: {
+        position: string;
+        bottom: number;
+        marginTop: string;
+        zIndex: number;
+    };
+    stickyFooter: {
+        borderTop: (string | number)[];
+        padding: number[];
+        borderBottomLeftRadius: 16;
+        borderBottomRightRadius: 16;
+        backgroundColor: "#ffffff";
+    };
+    'buttons-left': {
+        justifyContent: string;
+    };
+    'buttons-center': {
+        justifyContent: string;
+    };
+    'buttons-right': {
+        justifyContent: string;
+    };
+    withoutFooter: {};
+    withStickyFooter: {
+        display: string;
+        flexDirection: string;
+        '& $content': {
+            position: string;
+            zIndex: number;
+        };
+    };
+    footerWrapper: {};
+    l: {
+        '& $modal': {
+            padding: number[];
+            fontSize: number;
+            width: number;
+            '&$withStickyFooter': {
+                paddingBottom: number;
+            };
+        };
+        '& $withoutFooter': {
+            paddingBottom: number;
+        };
+        '& $title': {
+            fontSize: number;
+            marginBottom: number;
+        };
+        '& $close': {
+            right: number;
+            top: number;
+        };
+        '& $footerWrapper': {
+            paddingTop: number;
+        };
+        '& $stickyFooter': {
+            paddingLeft: number;
+            paddingRight: number;
+            marginLeft: number;
+            marginRight: number;
+        };
+    };
+    m: {
+        '& $modal': {
+            padding: number[];
+            width: number;
+            '&$withStickyFooter': {
+                paddingBottom: number;
+            };
+        };
+        '& $withoutFooter': {
+            paddingBottom: number;
+        };
+        '& $title': {
+            fontSize: number;
+            marginBottom: number;
+        };
+        '& $close': {
+            right: number;
+            top: number;
+        };
+        '& $footerWrapper': {
+            paddingTop: number;
+        };
+        '& $stickyFooter': {
+            paddingLeft: number;
+            paddingRight: number;
+            marginLeft: number;
+            marginRight: number;
+        };
+    };
+    s: {
+        '& $modal': {
+            padding: number[];
+            fontSize: number;
+            width: number;
+            '&$withStickyFooter': {
+                paddingBottom: number;
+            };
+        };
+        '& $withoutFooter': {
+            paddingBottom: number;
+        };
+        '& $title': {
+            fontSize: number;
+            marginBottom: number;
+        };
+        '& $close': {
+            right: number;
+            top: number;
+        };
+        '& $footerWrapper': {
+            paddingTop: number;
+        };
+        '& $stickyFooter': {
+            paddingLeft: number;
+            paddingRight: number;
+            marginLeft: number;
+            marginRight: number;
+        };
+    };
+    modalWrapper: {
+        display: string;
+        width: string;
+    };
+    animationEnd: {
+        '& $modal': {
+            opacity: number;
+        };
+        '& $position-center $modal': {
+            transform: string;
+        };
+        '& $position-right $modal': {
+            transform: string;
+        };
+        '& $position-left $modal': {
+            transform: string;
+        };
+        '& $overlay': {
+            opacity: number;
+        };
+    };
+    animationStart: {
+        '& $modal': {
+            opacity: number;
+            transition: string;
+            transitionProperty: string;
+        };
+        '& $position-center $modal': {
+            transform: string;
+        };
+        '& $position-right $modal': {
+            transform: string;
+        };
+        '& $position-left $modal': {
+            transform: string;
+        };
+        '& $overlay': {
+            opacity: number;
+            transition: string;
+        };
+    };
+    'modal-enter': {
+        extend: string;
+    };
+    'modal-enter-active': {
+        extend: string;
+    };
+    'modal-exit': {
+        extend: string;
+    };
+    'modal-exit-active': {
+        extend: string;
+    };
+    tweakCloseButton: {};
+};
+export declare type ModalStyles = ComponentStyles<typeof styles>;

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

@@ -0,0 +1,2 @@
+export * from './Modal';
+export type { ModalStyles } from './Modal.styles';

package/dist/components/MoreMenu/MoreMenu.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { ICommonProps } from '../../types';
+import { IListItem } from '../List';
+import { MoreMenuStyles } from './MoreMenu.styles';
+export interface IMoreMenuProps extends ICommonProps {
+    tweakStyles?: MoreMenuStyles;
+    items: IListItem[];
+    isDisabled?: boolean;
+    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
+    hasDefaultStateBackground?: boolean;
+    testId?: string;
+}
+export declare const MoreMenu: FC<IMoreMenuProps>;

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

@@ -0,0 +1,53 @@
+import { ComponentStyles } from '../../types';
+export declare const styles: {
+    root: {
+        position: string;
+    };
+    hasCircle: {};
+    button: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        width: number;
+        height: number;
+        backgroundColor: string;
+        color: "#505f79";
+        padding: number;
+        borderRadius: string;
+        border: string;
+        cursor: string;
+        transition: string;
+        '&$hasCircle': {
+            backgroundColor: string;
+        };
+        '&:hover': {
+            backgroundColor: string;
+        };
+        '&:focus': {
+            backgroundColor: string;
+        };
+        '&:active, &$active': {
+            backgroundColor: string;
+        };
+        '&$disabled': {
+            backgroundColor: string;
+            color: "#d0d6e1";
+        };
+    };
+    icon: {
+        width: number;
+        height: number;
+    };
+    active: {};
+    disabled: {
+        cursor: string;
+    };
+    menu: {
+        position: string;
+        zIndex: number;
+        top: string;
+        right: number;
+        marginTop: number;
+    };
+};
+export declare type MoreMenuStyles = ComponentStyles<typeof styles>;

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

@@ -0,0 +1,2 @@
+export * from './MoreMenu';
+export type { MoreMenuStyles } from './MoreMenu.styles';

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { IMultiSelectListValues } from '../MultiSelectList';
+import { IMultiSelectLocale, IMultiSelectLocaleKey } from '../MultiSelectList/locales';
+import { MultiSelectStyles } from './MultiSelect.styles';
+export declare type THorizontalCornerConnection = 'full' | 'left' | 'right';
+export interface IMultiSelectProps<Value = string> {
+    tweakStyles?: MultiSelectStyles;
+    value?: IMultiSelectListValues<Value>;
+    corners?: THorizontalCornerConnection;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    placeholder?: string;
+    localeKey?: IMultiSelectLocaleKey;
+    locale?: IMultiSelectLocale;
+    onChange: (value?: IMultiSelectListValues<Value>) => void;
+    fetchOptions: (value?: string, page?: number) => Promise<Value[]>;
+}
+export declare function MultiSelect<Value = string>({ value, corners, isInvalid, isRequired, isDisabled, placeholder, localeKey, locale, onChange, fetchOptions, tweakStyles, }: IMultiSelectProps<Value>): JSX.Element;

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

@@ -0,0 +1,44 @@
+import { ComponentStyles } from '../../types';
+export declare const styles: {
+    root: {
+        position: string;
+        boxSizing: string;
+        height: string;
+        width: string;
+        cursor: string;
+        fontSize: number;
+    };
+    required: {
+        '&:before': {
+            content: string;
+            position: string;
+            left: number;
+            top: string;
+            transform: string;
+            width: number;
+            height: number;
+            borderRadius: string;
+        };
+    };
+    disabled: {
+        cursor: string;
+    };
+    listContainer: {
+        position: string;
+        top: string;
+        left: number;
+        right: number;
+        zIndex: number;
+    };
+    invalid: {};
+    open: {};
+    full: {};
+    left: {};
+    right: {};
+    tweakMultiSelectList: {
+        root: {
+            width: string;
+        };
+    };
+};
+export declare type MultiSelectStyles = ComponentStyles<typeof styles>;

package/dist/components/MultiSelect/MultiSelectInput/MultiSelectInput.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { IMultiSelectListValues } from '../../index';
+import { ICommonProps } from '../../../types';
+export interface IMultiSelectInputProps<Value> extends ICommonProps {
+    value?: IMultiSelectListValues<Value>;
+    isOpen: boolean;
+    isDisabled: boolean;
+    placeholder: string;
+    onToggle: (state: boolean) => void;
+}
+export declare function MultiSelectInput<Value>({ value: v, isOpen, isDisabled, placeholder, onToggle, }: IMultiSelectInputProps<Value>): ReactElement | null;

package/dist/components/MultiSelect/MultiSelectInput/MultiSelectInput.styles.d.ts

@@ -0,0 +1,62 @@
+import { ComponentStyles } from '../../../types';
+export declare const styles: {
+    root: {
+        display: string;
+        justifyContent: string;
+        flexDirection: string;
+        height: string;
+        padding: number[];
+        overflow: string;
+        whiteSpace: string;
+    };
+    placeholder: {
+        fontSize: number;
+        userSelect: string;
+    };
+    placeholderSmall: {
+        fontSize: number;
+        marginBottom: number;
+        position: string;
+    };
+    values: {
+        width: string;
+    };
+    value: {
+        width: string;
+        overflow: string;
+        textOverflow: string;
+    };
+    amount: {
+        boxSizing: string;
+        position: string;
+        top: string;
+        right: number;
+        height: number;
+        minWidth: number;
+        fontSize: number;
+        lineHeight: string;
+        textAlign: string;
+        padding: number[];
+    };
+    indicator: {
+        position: string;
+        top: number;
+        right: number;
+        height: string;
+        width: number;
+        borderRadius: number;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+    arrow: {
+        width: number;
+        height: number;
+        transition: string;
+    };
+    arrowUp: {
+        transform: string;
+    };
+    indicatorDisabled: {};
+};
+export declare type MultiSelectInputStyles = ComponentStyles<typeof styles>;

package/dist/components/MultiSelect/MultiSelectInput/index.d.ts

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

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

@@ -0,0 +1,3 @@
+export * from './MultiSelect';
+export type { MultiSelectStyles } from './MultiSelect.styles';
+export type { MultiSelectInputStyles } from './MultiSelectInput/MultiSelectInput.styles';

package/dist/components/MultiSelectList/MultiSelectList.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { ICommonProps } from '../../types';
+import { IMultiSelectLocale, IMultiSelectLocaleKey } from './locales';
+import { MultiSelectListStyles } from './MultiSelectList.styles';
+export interface IMultiSelectListValues<Option> {
+    include: Option[];
+}
+export interface IMultiSelectListProps<Value, Option> extends ICommonProps {
+    tweakStyles?: MultiSelectListStyles;
+    value?: Value;
+    isSearchEnabled?: boolean;
+    width?: number | string;
+    localeKey?: IMultiSelectLocaleKey;
+    locale?: Partial<IMultiSelectLocale>;
+    onClose?: () => void;
+    onChange: (val?: Value) => void;
+    options?: Option[];
+    fetchOptions?: (val?: string, page?: number) => Promise<Option[]>;
+    getValueView?: (val: Option) => ReactNode;
+    getValueId?: (val: Option) => string;
+    getValueString?: (val: Option) => string;
+    isGroupingEnabled?: boolean;
+    checkboxPosition?: 'left' | 'right';
+    pageSize?: number;
+    searchMaxLength?: number;
+    testId?: string;
+}
+export declare function MultiSelectList<Value extends IMultiSelectListValues<Option>, Option = string>({ value, tweakStyles, data, isSearchEnabled, width, localeKey, locale, onChange, onClose, options, fetchOptions, isGroupingEnabled, getValueView, getValueId, getValueString, checkboxPosition, pageSize, searchMaxLength, testId, }: IMultiSelectListProps<Value, Option>): JSX.Element;

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

@@ -0,0 +1,105 @@
+import { ComponentStyles } from '../../types';
+export declare const styles: {
+    root: {
+        width: ({ width }: {
+            width: number | string;
+        }) => string | number;
+        background: "#ffffff";
+    };
+    list: {
+        paddingTop: number;
+        maxHeight: number;
+        overscrollBehavior: string;
+    } | {
+        paddingTop: number;
+        maxHeight: number;
+        overscrollBehavior: string;
+    };
+    label: {
+        boxSizing: string;
+        fontSize: number;
+        padding: number[];
+        userSelect: string;
+        display: string;
+        alignItems: string;
+        color: "#7a869a";
+    };
+    labelChosen: {
+        fontWeight: string;
+        color: "#222a37";
+        padding: number[];
+    };
+    withoutTopGap: {
+        paddingTop: number;
+    };
+    item: {
+        boxSizing: string;
+        padding: number;
+        maxWidth: string;
+        fontSize: number;
+    };
+    option: {
+        display: string;
+        userSelect: string;
+        maxWidth: string;
+        overflow: string;
+        whiteSpace: string;
+        textOverflow: string;
+    };
+    panel: {
+        display: string;
+        padding: number[];
+    };
+    clear: {
+        marginLeft: string;
+    };
+    selectedItem: {};
+    preloader: {
+        width: number;
+        height: number;
+        margin: string;
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+    };
+    dropdownInput: {
+        borderBottom: (string | number)[];
+    };
+    nothingFound: {
+        display: string;
+        alignItems: string;
+        justifyContent: string;
+        textAlign: string;
+        padding: number;
+        fontSize: number;
+    };
+    tweakSearchInput: {
+        tweakInput: {
+            inputWrapper: {
+                backgroundColor: string;
+                border: string;
+                height: number;
+            };
+        };
+    };
+    tweakCheckbox: {
+        root: {
+            padding: number[];
+        };
+        children: {
+            marginRight: string;
+        };
+    };
+    tweakClearButton: {
+        text: {
+            color: "#95a0b3";
+            '&:hover, &:focus': {
+                color: "#505f79";
+            };
+            '&:active': {
+                color: "#505f79";
+            };
+        };
+    };
+};
+export declare type MultiSelectListStyles = ComponentStyles<typeof styles>;

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

@@ -0,0 +1,2 @@
+export * from './MultiSelectList';
+export type { MultiSelectListStyles } from './MultiSelectList.styles';

package/dist/components/MultiSelectList/locales.d.ts

@@ -0,0 +1,11 @@
+export interface IMultiSelectLocale {
+    clear: string;
+    all: string;
+    chosen: string;
+    searchPlaceholder: string;
+    nothingFound: string;
+}
+export declare const MultiSelectLocales: Record<string, IMultiSelectLocale>;
+export declare type IMultiSelectLocaleKey = keyof typeof MultiSelectLocales;
+export declare const DEFAULT_LOCALE: IMultiSelectLocaleKey;
+export declare const getLocale: (key?: IMultiSelectLocaleKey, custom?: Partial<IMultiSelectLocale>, custom2?: Partial<IMultiSelectLocale>) => IMultiSelectLocale;

package/dist/components/Notification/Notification.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from 'react';
+import { ICommonProps } from '../../types';
+import { NotificationStyles } from './Notification.styles';
+export declare type NotificationType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
+export interface INotificationProps extends ICommonProps {
+    tweakStyles?: NotificationStyles;
+    type: NotificationType;
+    isFullWidth?: boolean;
+    text?: string;
+    title?: string;
+    size?: 's' | 'm' | 'l';
+    testId?: string;
+    children?: ReactNode;
+}
+export declare const Notification: FC<INotificationProps>;
+export default Notification;

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

@@ -0,0 +1,37 @@
+import { ComponentStyles } from '../../types';
+import type { NotificationType } from './Notification';
+interface IStyleProps {
+    type: NotificationType;
+}
+export declare const styles: {
+    root: {
+        display: string;
+    };
+    inline: {
+        width: string;
+    };
+    icon: {
+        width: number;
+        height: number;
+        marginRight: number;
+        flexShrink: number;
+    };
+    body: {
+        flexGrow: number;
+    };
+    title: {
+        display: string;
+        fontWeight: string;
+    };
+    text: {
+        display: string;
+    };
+    content: {};
+    s: {};
+    m: {};
+    l: {};
+    withText: {};
+    withTitle: {};
+};
+export declare type NotificationStyles = ComponentStyles<typeof styles, IStyleProps>;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './Notification';
+export type { NotificationStyles } from './Notification.styles';

package/dist/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IInputProps } from '../Input';
+export interface INumberInputProps extends Omit<IInputProps, 'value' | 'onChange' | 'type'> {
+    value?: number;
+    canBeFloat?: boolean;
+    precision?: number;
+    intPartPrecision?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    onChange: (value: number | undefined, event?: React.FormEvent<HTMLInputElement>) => void;
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<INumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/NumberInput/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const getNewCaretPosition: (defaultPosition: number, oldValue: string, newValue: string, isDeleteForwardAction?: boolean) => number;
+export declare const formatNumberWithDefault: (value: number | undefined, defaultValue?: number) => string;