@foxford/ui 2.6.0 → 2.7.0-beta-5133c5e-20230721

package/dts/index.d.ts

@@ -2,16 +2,16 @@
 import * as styled_components from 'styled-components';
 import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, SimpleInterpolation, css } from 'styled-components';
 import * as react from 'react';
-import { PureComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
-import { Link, NavLink } from 'react-router-dom';
-import { ResponsiveProperty as ResponsiveProperty$1, ResponsiveNamedProperty as ResponsiveNamedProperty$1 } from 'mixins/responsive-property';
+import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
+import { ResponsiveNamedProperty as ResponsiveNamedProperty$1, ResponsiveProperty as ResponsiveProperty$1 } from 'mixins/responsive-property';
 import { BaseProps as BaseProps$1, Nullable as Nullable$1, FontWeight as FontWeight$1 } from 'shared/interfaces';
+import { SizeLatin as SizeLatin$1 } from 'shared/enums/sizeLatin';
+import { Link, NavLink } from 'react-router-dom';
 import { Display as Display$1 } from 'mixins/display';
 import { Color as Color$1 } from 'mixins/color';
-import { SizeLatin as SizeLatin$1 } from 'shared/enums/sizeLatin';
+import { Anchor as Anchor$1 } from 'components/Anchor';
 import { TextHeadingProps } from 'components/Text.Heading';
 import { TextEllipse } from 'components/Text.Ellipse';
-import { Anchor as Anchor$1 } from 'components/Anchor';
 import { Classes } from 'react-modal';
 import * as rc_scrollbars_lib_Scrollbars_types from 'rc-scrollbars/lib/Scrollbars/types';
 import * as rc_scrollbars from 'rc-scrollbars';
@@ -209,7 +209,8 @@ declare enum ColorNames {
     grey = "grey",
     darkgrey = "darkgrey",
     lightgrey = "lightgrey",
-    superlightgrey = "superlightgrey"
+    superlightgrey = "superlightgrey",
+    transparent = "transparent"
 }
 
 declare type ColorPropsProperties = 'color' | 'fontColor' | `${string}Color` | `color${string}`;
@@ -578,6 +579,243 @@ declare namespace ActionBtn {
     var displayName: string;
 }
 
+interface AnchorProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {
+    /**
+     * Custom CSS class name
+     */
+    as?: 'div' | 'span' | 'a' | typeof Link;
+    /**
+     * React router link to
+     */
+    to?: string;
+    /**
+     *  Link href
+     */
+    href?: string;
+    /**
+     * Is display inline
+     * */
+    wrapper?: boolean;
+    /**
+     * Pseudo link has dashed bottom border
+     * */
+    pseudo?: boolean;
+    /**
+     * If link should be underlined
+     * */
+    underline?: boolean;
+    /**
+     * Primary content
+     */
+    /**
+     * Children react node
+     */
+    children?: React.ReactNode;
+    /**
+     * Primary content
+     */
+    content?: string;
+    /**
+     * Onclick handler
+     */
+    onClick?: () => void;
+    tabIndex?: number;
+    target?: string;
+    rel?: string;
+    /**
+     * Auto-generate rel. You must specify domain inside theme
+     */
+    autoRel?: boolean;
+}
+/**
+ * Расширен:
+ * - [`BaseProps`](#/Миксины)
+ * - [`Color`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
+ * - [`Display`](#/Миксины)
+ */
+declare function Anchor(props: typeof Anchor.defaultProps & AnchorProps): JSX.Element;
+declare namespace Anchor {
+    var displayName: string;
+    var defaultProps: {
+        display: string;
+    };
+}
+
+declare type ButtonStaticSize = 'xl' | 'l' | 'm' | 's' | 'xs';
+declare type ButtonSize = ButtonStaticSize | ResponsiveProperty$1<`${number}rem` | number>;
+interface ButtonProps extends BaseProps$1, Display$1, Color$1, Color$1<'fontColor'>, ResponsiveNamedProperty$1<'padding'>, ResponsiveNamedProperty$1<'paddingTop'>, ResponsiveNamedProperty$1<'paddingRight'>, ResponsiveNamedProperty$1<'paddingBottom'>, ResponsiveNamedProperty$1<'paddingLeft'>, ResponsiveNamedProperty$1<'margin'>, ResponsiveNamedProperty$1<'marginTop'>, ResponsiveNamedProperty$1<'marginRight'>, ResponsiveNamedProperty$1<'marginBottom'>, ResponsiveNamedProperty$1<'marginLeft'>, ResponsiveNamedProperty$1<'fontSize'>, ResponsiveNamedProperty$1<'fluid', boolean>, ResponsiveNamedProperty$1<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, ResponsiveNamedProperty$1<'height', 'l' | 'm' | 's' | 'xs' | number> {
+    /** Root node polymorphic type */
+    as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor$1;
+    /** Button size */
+    size?: ButtonSize;
+    /** Button type attribute */
+    type?: 'button' | 'submit' | 'reset';
+    /** Button icons */
+    icon?: JSX.Element | [Nullable$1<JSX.Element>, Nullable$1<JSX.Element>];
+    /** Button success state */
+    success?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Button disabled */
+    disabled?: boolean;
+    /** Rounded border radius */
+    rounded?: boolean;
+    /** Rounded shape button */
+    round?: boolean;
+    /** Anchor target attribute  */
+    target?: string;
+    /** Anchor rel attribute */
+    rel?: string;
+    /** Auto-generate rel. You must specify domain inside theme */
+    autoRel?: boolean;
+    /** Anchor href attribute */
+    href?: string;
+    /** React router Link to prop */
+    to?: string;
+    /**
+     * Indicates if there should not be any margin
+     * between this button and the previous one
+     */
+    noSpacing?: boolean;
+    /** Outline appearance */
+    outline?: boolean;
+    /** Content font weight */
+    fontWeight?: FontWeight$1;
+    /** Associated form */
+    form?: string;
+    /** @preset {Default} Primary appearance */
+    primary?: boolean;
+    /** @preset {Default} Secondary appearance */
+    secondary?: boolean;
+    /** @preset {Default} Inverted colors */
+    inverted?: boolean;
+    /** @preset {Brand} Base appearance */
+    base?: boolean;
+    /** @preset {Brand} Clear appearance */
+    clear?: boolean;
+    /** @preset {Brand} Black colors appearance  */
+    black?: boolean;
+    /** @preset {Brand} Red colors appearance */
+    danger?: boolean;
+    /** @preset {Brand} Modifies appearance on colored background */
+    onColored?: boolean;
+    /** @deprecated Use outline */
+    basic?: boolean;
+    /** @deprecated Use children */
+    content?: React.ReactNode;
+    /** @deprecated Use ref */
+    innerRef?: React.LegacyRef<HTMLElement>;
+    /** Component's children */
+    children?: React.ReactNode | React.ReactNode[];
+    onClick?: (evt: React.SyntheticEvent<HTMLElement>) => void;
+    onClickCapture?: (evt: React.SyntheticEvent<HTMLElement>) => void;
+    onMouseEnter?: (evt: React.SyntheticEvent<HTMLElement>) => void;
+    onMouseLeave?: (evt: React.SyntheticEvent<HTMLElement>) => void;
+}
+
+/**
+ * Main button
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
+
+declare type TextAppearance = 'display' | 'heading' | 'subheading' | 'subheading-compact' | 'body' | 'caption';
+interface TextProps extends Display$1, Color$1, ResponsiveNamedProperty$1<'size'>, BaseProps$1 {
+    /** Root node polymorphic type */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
+    /** Root id attribute */
+    id?: string;
+    /** Use predefined props with low priority */
+    appearance?: TextAppearance;
+    /** Custom sizes set */
+    sizes?: Record<SizeLatin$1, number>;
+    /** Sizing units */
+    fontUnits?: string;
+    /** Font family */
+    fontFamily?: string;
+    /** Font weight */
+    weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number;
+    /** Font style */
+    fontStyle?: 'normal' | 'italic';
+    /** Text transform */
+    transform?: 'capitalize' | 'uppercase' | 'lowercase';
+    /** Root margin */
+    margin?: number | string;
+    /** Underlined text  */
+    underlineLinks?: boolean;
+    /** Text align */
+    textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
+    /** Line height */
+    lineHeight?: 'l' | 'm' | 's' | 'xs' | number;
+    /** Title attribute */
+    title?: string;
+    /** Component's children */
+    children?: React.ReactNode;
+    /** @deprecated Use children */
+    content?: string;
+}
+interface TextComponent extends ForwardRefExoticComponent<PropsWithoutRef<TextProps> & RefAttributes<HTMLElement>> {
+    Heading: (props: TextHeadingProps) => JSX.Element;
+    Ellipse: typeof TextEllipse;
+}
+
+declare const Text: TextComponent;
+
+declare type AlertType = 'warning' | 'error' | 'info' | 'success';
+declare type AlertSize = keyof Pick<typeof SizeLatin$1, 'l' | 's'>;
+interface AlertProps extends BaseProps$1 {
+    /** Text of the timer cancellation button */
+    cancelTimerText?: string | React.ReactNode;
+    /** Children react node */
+    children?: React.ReactNode;
+    /** Use a colorless background */
+    clear?: boolean;
+    /** This method is taken from react-toastify library */
+    closeToast?(): void;
+    /** Icon name (for inner Icon component) */
+    customIcon?: keyof typeof IconNames;
+    /** Any custom image (e.g.: img, svg, icon from @foxford/icon-pack) */
+    image?: React.ReactNode;
+    /** Use for tablet and mobile view */
+    isCompact?: boolean;
+    /** Display a hyperlink */
+    link?: {
+        content: string | React.ReactNode;
+        onClick(): void;
+    };
+    linkProps?: AnchorProps;
+    /** Use alert without icon */
+    noIcon?: boolean;
+    /** You can cancel the action if the timer has not expired yet */
+    onClickCancelTimer?(): void;
+    /** Display the action button */
+    primaryAction?: {
+        content: string | React.ReactNode;
+        onClick(): void;
+    };
+    primaryActionProps?: ButtonProps;
+    /** Display the second action button */
+    secondaryAction?: {
+        content: string | React.ReactNode;
+        onClick(): void;
+    };
+    secondaryActionProps?: ButtonProps;
+    /** Use this to change the appearance of the alert */
+    size?: AlertSize;
+    /** Use it when you need to move text to another line in alerts without a title */
+    textProps?: TextProps;
+    textWrap?: boolean;
+    /** It is used in alerts with a timer. Pass the value in seconds */
+    timer?: number;
+    /** Display a title */
+    title?: string;
+    titleProps?: TextProps;
+    type?: AlertType;
+    width?: ResponsiveProperty$1;
+}
+
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+
 declare enum CurrencyCodes {
     ALL = "ALL",
     AFN = "AFN",
@@ -753,68 +991,6 @@ declare class Amount extends PureComponent<AmountProps> {
     render(): JSX.Element;
 }
 
-interface AnchorProps extends BaseProps, Color, ResponsiveNamedProperty<'size'>, Display {
-    /**
-     * Custom CSS class name
-     */
-    as?: 'div' | 'span' | 'a' | typeof Link;
-    /**
-     * React router link to
-     */
-    to?: string;
-    /**
-     *  Link href
-     */
-    href?: string;
-    /**
-     * Is display inline
-     * */
-    wrapper?: boolean;
-    /**
-     * Pseudo link has dashed bottom border
-     * */
-    pseudo?: boolean;
-    /**
-     * If link should be underlined
-     * */
-    underline?: boolean;
-    /**
-     * Primary content
-     */
-    /**
-     * Children react node
-     */
-    children?: React.ReactNode;
-    /**
-     * Primary content
-     */
-    content?: string;
-    /**
-     * Onclick handler
-     */
-    onClick?: () => void;
-    target?: string;
-    rel?: string;
-    /**
-     * Auto-generate rel. You must specify domain inside theme
-     */
-    autoRel?: boolean;
-}
-/**
- * Расширен:
- * - [`BaseProps`](#/Миксины)
- * - [`Color`](#/Миксины)
- * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
- * - [`Display`](#/Миксины)
- */
-declare function Anchor(props: typeof Anchor.defaultProps & AnchorProps): JSX.Element;
-declare namespace Anchor {
-    var displayName: string;
-    var defaultProps: {
-        display: string;
-    };
-}
-
 declare type ArrowStaticSize = 'l' | 'm' | 'xs';
 declare type ArrowSize = ArrowStaticSize | ResponsiveProperty$1<`${number}rem` | number>;
 interface ArrowProps extends BaseProps$1 {
@@ -884,48 +1060,6 @@ declare class Avatar extends PureComponent<AvatarProps> {
     render(): JSX.Element;
 }
 
-declare type TextAppearance = 'display' | 'heading' | 'subheading' | 'subheading-compact' | 'body' | 'caption';
-interface TextProps extends Display$1, Color$1, ResponsiveNamedProperty$1<'size'>, BaseProps$1 {
-    /** Root node polymorphic type */
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
-    /** Root id attribute */
-    id?: string;
-    /** Use predefined props with low priority */
-    appearance?: TextAppearance;
-    /** Custom sizes set */
-    sizes?: Record<SizeLatin$1, number>;
-    /** Sizing units */
-    fontUnits?: string;
-    /** Font family */
-    fontFamily?: string;
-    /** Font weight */
-    weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number;
-    /** Font style */
-    fontStyle?: 'normal' | 'italic';
-    /** Text transform */
-    transform?: 'capitalize' | 'uppercase' | 'lowercase';
-    /** Root margin */
-    margin?: number | string;
-    /** Underlined text  */
-    underlineLinks?: boolean;
-    /** Text align */
-    textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
-    /** Line height */
-    lineHeight?: 'l' | 'm' | 's' | 'xs' | number;
-    /** Title attribute */
-    title?: string;
-    /** Component's children */
-    children?: React.ReactNode;
-    /** @deprecated Use children */
-    content?: string;
-}
-interface TextComponent extends ForwardRefExoticComponent<PropsWithoutRef<TextProps> & RefAttributes<HTMLElement>> {
-    Heading: (props: TextHeadingProps) => JSX.Element;
-    Ellipse: typeof TextEllipse;
-}
-
-declare const Text: TextComponent;
-
 interface BadgeProps extends BaseProps, Color, Display {
     /**
      * Children react node
@@ -947,83 +1081,6 @@ declare namespace Badge {
     var displayName: string;
 }
 
-declare type ButtonStaticSize = 'xl' | 'l' | 'm' | 's' | 'xs';
-declare type ButtonSize = ButtonStaticSize | ResponsiveProperty$1<`${number}rem` | number>;
-interface ButtonProps extends BaseProps$1, Display$1, Color$1, Color$1<'fontColor'>, ResponsiveNamedProperty$1<'padding'>, ResponsiveNamedProperty$1<'paddingTop'>, ResponsiveNamedProperty$1<'paddingRight'>, ResponsiveNamedProperty$1<'paddingBottom'>, ResponsiveNamedProperty$1<'paddingLeft'>, ResponsiveNamedProperty$1<'margin'>, ResponsiveNamedProperty$1<'marginTop'>, ResponsiveNamedProperty$1<'marginRight'>, ResponsiveNamedProperty$1<'marginBottom'>, ResponsiveNamedProperty$1<'marginLeft'>, ResponsiveNamedProperty$1<'fontSize'>, ResponsiveNamedProperty$1<'fluid', boolean>, ResponsiveNamedProperty$1<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, ResponsiveNamedProperty$1<'height', 'l' | 'm' | 's' | 'xs' | number> {
-    /** Root node polymorphic type */
-    as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor$1;
-    /** Button size */
-    size?: ButtonSize;
-    /** Button type attribute */
-    type?: 'button' | 'submit' | 'reset';
-    /** Button icons */
-    icon?: JSX.Element | [Nullable$1<JSX.Element>, Nullable$1<JSX.Element>];
-    /** Button success state */
-    success?: boolean;
-    /** Loading state */
-    loading?: boolean;
-    /** Button disabled */
-    disabled?: boolean;
-    /** Rounded border radius */
-    rounded?: boolean;
-    /** Rounded shape button */
-    round?: boolean;
-    /** Anchor target attribute  */
-    target?: string;
-    /** Anchor rel attribute */
-    rel?: string;
-    /** Auto-generate rel. You must specify domain inside theme */
-    autoRel?: boolean;
-    /** Anchor href attribute */
-    href?: string;
-    /** React router Link to prop */
-    to?: string;
-    /**
-     * Indicates if there should not be any margin
-     * between this button and the previous one
-     */
-    noSpacing?: boolean;
-    /** Outline appearance */
-    outline?: boolean;
-    /** Content font weight */
-    fontWeight?: FontWeight$1;
-    /** Associated form */
-    form?: string;
-    /** @preset {Default} Primary appearance */
-    primary?: boolean;
-    /** @preset {Default} Secondary appearance */
-    secondary?: boolean;
-    /** @preset {Default} Inverted colors */
-    inverted?: boolean;
-    /** @preset {Brand} Base appearance */
-    base?: boolean;
-    /** @preset {Brand} Clear appearance */
-    clear?: boolean;
-    /** @preset {Brand} Black colors appearance  */
-    black?: boolean;
-    /** @preset {Brand} Red colors appearance */
-    danger?: boolean;
-    /** @preset {Brand} Modifies appearance on colored background */
-    onColored?: boolean;
-    /** @deprecated Use outline */
-    basic?: boolean;
-    /** @deprecated Use children */
-    content?: React.ReactNode;
-    /** @deprecated Use ref */
-    innerRef?: React.LegacyRef<HTMLElement>;
-    /** Component's children */
-    children?: React.ReactNode | React.ReactNode[];
-    onClick?: (evt: React.SyntheticEvent<HTMLElement>) => void;
-    onClickCapture?: (evt: React.SyntheticEvent<HTMLElement>) => void;
-    onMouseEnter?: (evt: React.SyntheticEvent<HTMLElement>) => void;
-    onMouseLeave?: (evt: React.SyntheticEvent<HTMLElement>) => void;
-}
-
-/**
- * Main button
- */
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
-
 interface ContainerProps extends BaseProps, Display, Color {
     /**
      * Primary content
@@ -2401,4 +2458,4 @@ declare namespace Select {
     var displayName: string;
 }
 
-export { ActionBtn, Amount, Anchor, Arrow, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
+export { ActionBtn, Alert, Amount, Anchor, Arrow, Avatar, Badge, BaseProps, Button, COUNTRY_DATA, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };