@true-engineering/true-react-common-ui-kit 2.6.0 → 3.0.0-alpha.0

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

@@ -1,16 +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;
+import { IMoreMenuStyles } from './MoreMenu.styles';
+export interface IMoreMenuProps extends ICommonProps<IMoreMenuStyles> {
     items: IListItem[];
     isDisabled?: boolean;
     /**
      * @default true
      */
     hasDefaultStateBackground?: boolean;
-    testId?: string;
     onMenuOpen?(): void;
     onMenuClose?(): void;
 }

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

@@ -1,54 +1,6 @@
-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;
-    };
-    tweakList: {};
-};
-export declare type MoreMenuStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+import { IListStyles } from '../List';
+export declare const useStyles: import("../../theme").IUseStyles<"menu" | "root" | "button" | "icon" | "active" | "disabled" | "hasCircle", unknown>;
+export declare type IMoreMenuStyles = ITweakStyles<typeof useStyles, {
+    tweakList: IListStyles;
+}>;

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

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

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

@@ -1,18 +1,18 @@
 /// <reference types="react" />
+import { ICommonProps } from '../../types';
 import { IMultiSelectListValues, IMultiSelectLocale, IMultiSelectLocaleKey } from '../MultiSelectList';
-import { THorizontalCornerConnection } from './types';
-import { MultiSelectStyles } from './MultiSelect.styles';
-export interface IMultiSelectProps<Value = string> {
-    tweakStyles?: MultiSelectStyles;
+import { IHorizontalCornerConnection } from './types';
+import { IMultiSelectStyles } from './MultiSelect.styles';
+export interface IMultiSelectProps<Value = string> extends ICommonProps<IMultiSelectStyles> {
     value?: IMultiSelectListValues<Value>;
-    corners?: THorizontalCornerConnection;
+    corners?: IHorizontalCornerConnection;
     isInvalid?: boolean;
     isRequired?: boolean;
     isDisabled?: boolean;
     placeholder?: string;
     localeKey?: IMultiSelectLocaleKey;
     locale?: IMultiSelectLocale;
-    onChange: (value?: IMultiSelectListValues<Value>) => void;
-    fetchOptions: (value?: string, page?: number) => Promise<Value[]>;
+    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;
+export declare function MultiSelect<Value = string>({ value, corners, isInvalid, isRequired, isDisabled, placeholder, localeKey, locale, testId, data, onChange, fetchOptions, tweakStyles, }: IMultiSelectProps<Value>): JSX.Element;

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

@@ -1,44 +1,7 @@
-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>;
+import { ITweakStyles } from '../../theme';
+import { IMultiSelectListStyles } from '../MultiSelectList';
+export declare const useStyles: import("../../theme").IUseStyles<"right" | "left" | "root" | "open" | "disabled" | "invalid" | "required" | "listContainer" | "full", unknown>;
+export declare const multiSelectListStyles: IMultiSelectListStyles;
+export declare type IMultiSelectStyles = ITweakStyles<typeof useStyles, {
+    tweakMultiSelectList: IMultiSelectListStyles;
+}>;

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

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

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

@@ -1,62 +1,3 @@
-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>;
+import { ITweakStyles } from '../../../../theme';
+export declare const useStyles: import("../../../../theme").IUseStyles<"arrow" | "value" | "root" | "values" | "placeholder" | "placeholderSmall" | "amount" | "indicator" | "arrowUp" | "indicatorDisabled", unknown>;
+export declare type IMultiSelectInputStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,2 +1,2 @@
 export * from './MultiSelectInput';
-export type { MultiSelectInputStyles } from './MultiSelectInput.styles';
+export type { IMultiSelectInputStyles } from './MultiSelectInput.styles';

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

@@ -1,4 +1,4 @@
 export * from './MultiSelect';
 export * from './types';
-export type { MultiSelectStyles } from './MultiSelect.styles';
-export type { MultiSelectInputStyles } from './components';
+export type { IMultiSelectStyles } from './MultiSelect.styles';
+export type { IMultiSelectInputStyles } from './components';

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

@@ -1 +1 @@
-export declare type THorizontalCornerConnection = 'full' | 'left' | 'right';
+export declare type IHorizontalCornerConnection = 'full' | 'left' | 'right';

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

@@ -1,9 +1,8 @@
 import { ReactNode } from 'react';
 import { ICommonProps } from '../../types';
 import { IMultiSelectListValues, IMultiSelectLocale, IMultiSelectLocaleKey } from './types';
-import { MultiSelectListStyles } from './MultiSelectList.styles';
-export interface IMultiSelectListProps<Value, Option> extends ICommonProps {
-    tweakStyles?: MultiSelectListStyles;
+import { IMultiSelectListStyles } from './MultiSelectList.styles';
+export interface IMultiSelectListProps<Value, Option> extends ICommonProps<IMultiSelectListStyles> {
     value?: Value;
     isSearchEnabled?: boolean;
     width?: number | string;
@@ -20,6 +19,5 @@ export interface IMultiSelectListProps<Value, Option> extends ICommonProps {
     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

@@ -1,105 +1,13 @@
-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>;
+import { ITweakStyles } from '../../theme';
+import { IButtonStyles } from '../Button';
+import { ICheckboxStyles } from '../Checkbox';
+import { ISearchInputStyles } from '../SearchInput';
+export declare const useStyles: import("../../theme").IUseStyles<"list" | "clear" | "item" | "root" | "label" | "option" | "labelChosen" | "withoutTopGap" | "panel" | "preloader" | "dropdownInput" | "nothingFound" | "selectedItem", unknown>;
+export declare const searchInputStyles: ISearchInputStyles;
+export declare const checkboxStyles: ICheckboxStyles;
+export declare const clearButtonStyles: IButtonStyles;
+export declare type IMultiSelectListStyles = ITweakStyles<typeof useStyles, {
+    tweakSearchInput: ISearchInputStyles;
+    tweakCheckbox: ICheckboxStyles;
+    tweakClearButton: IButtonStyles;
+}>;

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

@@ -1,3 +1,3 @@
 export * from './MultiSelectList';
 export * from './types';
-export type { MultiSelectListStyles } from './MultiSelectList.styles';
+export type { IMultiSelectListStyles } from './MultiSelectList.styles';

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

@@ -1,10 +1,9 @@
 import { FC, ReactNode } from 'react';
 import { ICommonProps } from '../../types';
-import { NotificationType } from './types';
-import { NotificationStyles } from './Notification.styles';
-export interface INotificationProps extends ICommonProps {
-    tweakStyles?: NotificationStyles;
-    type: NotificationType;
+import { INotificationType } from './types';
+import { INotificationStyles } from './Notification.styles';
+export interface INotificationProps extends ICommonProps<INotificationStyles> {
+    type: INotificationType;
     /**
      * @default true
      */
@@ -15,7 +14,6 @@ export interface INotificationProps extends ICommonProps {
      * @default `s`
      */
     size?: 's' | 'm' | 'l';
-    testId?: string;
     children?: ReactNode;
 }
 export declare const Notification: FC<INotificationProps>;

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

@@ -1,37 +1,3 @@
-import { ComponentStyles } from '../../types';
-import type { NotificationType } from './types';
-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 {};
+import { ITweakStyles } from '../../theme';
+export declare const useStyles: import("../../theme").IUseStyles<"content" | "root" | "inline" | "text" | "icon" | "body" | "s" | "title" | "error" | "warning" | "m" | "l" | "info" | "withText" | "withTitle" | "ok" | "not-ok", unknown>;
+export declare type INotificationStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,3 +1,3 @@
 export * from './Notification';
 export * from './types';
-export type { NotificationStyles } from './Notification.styles';
+export type { INotificationStyles } from './Notification.styles';

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

@@ -1 +1 @@
-export declare type NotificationType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';
+export declare type INotificationType = 'error' | 'info' | 'warning' | 'ok' | 'not-ok';

package/dist/components/PhoneInput/PhoneInput.d.ts

@@ -1,9 +1,9 @@
 import { FC, MouseEvent, FormEvent } from 'react';
+import { ICommonProps } from '../../types';
 import { IInputProps } from '../Input';
 import { IPhoneValue } from './types';
-import { PhoneInputStyles } from './PhoneInput.styles';
-export interface IPhoneInputProps extends Omit<IInputProps, 'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder'> {
-    tweakStyles?: PhoneInputStyles;
+import { IPhoneInputStyles } from './PhoneInput.styles';
+export interface IPhoneInputProps extends Omit<IInputProps, 'value' | 'onChange' | 'type' | 'mask' | 'units' | 'placeholder' | 'tweakStyles'>, ICommonProps<IPhoneInputStyles> {
     locale?: string;
     codeSearchPlaceholder?: string;
     noMatchesLabel?: string;

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

@@ -1,66 +1,9 @@
-import { ComponentStyles } from '../../types';
-export declare const styles: {
-    root: {
-        width: string;
-        position: string;
-        boxSizing: string;
-    };
-    countrySelectContainer: {
-        position: string;
-        left: number;
-        top: number;
-        width: number;
-        height: number;
-        display: string;
-        alignItems: string;
-        justifyContent: string;
-        borderRight: (string | number)[];
-        transition: string;
-        cursor: string;
-        zIndex: number;
-    };
-    disabledCountrySelect: {
-        cursor: string;
-    };
-    flag: {
-        width: number;
-        height: number;
-    };
-    arrow: {
-        width: number;
-        color: "#95a0b3";
-        marginLeft: number;
-        transition: string;
-    };
-    up: {
-        transform: string;
-    };
-    invalidArrow: {
-        color: "#f14d56";
-    };
-    focusedBorder: {};
-    invalidBorder: {
-        borderColor: "#f14d56";
-    };
-    inputContainer: {
-        position: string;
-        flex: number;
-    };
-    flagListContainer: {
-        position: string;
-        width: string;
-        top: number;
-        left: number;
-        zIndex: number;
-    };
-    tweakInput: {
-        inputWrapper: {
-            paddingLeft: number;
-        };
-        label: {
-            marginLeft: number;
-        };
-    };
-    tweakCountryList: {};
-};
-export declare type PhoneInputStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../theme';
+import { IInputStyles } from '../Input';
+import { IPhoneInputCountryListStyles } from './components';
+export declare const useStyles: import("../../theme").IUseStyles<"arrow" | "root" | "countrySelectContainer" | "disabledCountrySelect" | "flag" | "up" | "invalidArrow" | "focusedBorder" | "invalidBorder" | "inputContainer" | "flagListContainer", unknown>;
+export declare const inputStyles: IInputStyles;
+export declare type IPhoneInputStyles = ITweakStyles<typeof useStyles, {
+    tweakInput: IInputStyles;
+    tweakCountryList: IPhoneInputCountryListStyles;
+}>;

package/dist/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.d.ts

@@ -1,9 +1,8 @@
 import { FC, MouseEvent } from 'react';
 import { ICommonProps } from '../../../../types';
 import { IPhoneInfo } from '../../types';
-import { PhoneInputCountryListStyles } from './PhoneInputCountryList.styles';
-export interface IPhoneInputCountryListProps extends ICommonProps {
-    tweakStyles?: PhoneInputCountryListStyles;
+import { IPhoneInputCountryListStyles } from './PhoneInputCountryList.styles';
+export interface IPhoneInputCountryListProps extends Pick<ICommonProps<IPhoneInputCountryListStyles>, 'tweakStyles'> {
     selectedCountryCode?: string;
     locale: string;
     placeholder: string;