@foxford/ui 2.12.1 → 2.13.0-beta-264f0a6-20231011

package/dts/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
+import * as react from 'react';
+import { CSSProperties, Component, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
 import * as styled_components from 'styled-components';
 import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, Interpolation, ThemeProps, SimpleInterpolation, css } from 'styled-components';
 import { Link, NavLink } from 'react-router-dom';
-import * as react from 'react';
-import { Component, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
 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';
@@ -797,26 +797,14 @@ declare type Color = keyof typeof ColorNames | ColorValue;
 declare type ColorProperty<T extends ColorPropertyVariants = 'color'> = {
     [key in `${T}`]?: Color;
 };
-declare const color: (color?: Color, cssProperty?: ColorCssProperty) => () => (props: {
+declare const color: (color?: Color | string, cssProperty?: ColorCssProperty) => () => (props: {
     theme: DefaultTheme;
 }) => FlattenSimpleInterpolation | null;
 
-declare enum SizeLatin {
-    xxxl = "xxxl",
-    xxl = "xxl",
-    xl = "xl",
-    l = "l",
-    m = "m",
-    s = "s",
-    xs = "xs",
-    xxs = "xxs",
-    xxxs = "xxxs"
-}
-
 /**
  * Value for breakpoint
  */
-declare type PossibleValues = number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean;
+declare type PossibleValues = number | Size | 'auto' | 'initial' | 'inherit' | boolean;
 declare type PropsProperties = 'size' | 'fontSize' | 'height' | 'width' | 'top' | 'right' | 'bottom' | 'left' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'fluid';
 declare type CalcProperty = (_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null;
 declare type CssProperty = string | CalcProperty;
@@ -824,29 +812,15 @@ declare type ResponsiveKeys = '' | 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
 declare type ResponsiveNamedProperty<T extends PropsProperties, V extends PossibleValues = PossibleValues> = {
     [key in `${T}${ResponsiveKeys}`]?: V;
 };
-declare type ResponsiveProperty<V = number | keyof typeof SizeLatin> = V | [desktop: V, tablet: V, mobile: V] | [xl: V, l: V, m: V, s: V, xs: V, xxs: V];
-declare const property: (value: PossibleValues, cssProperty?: CssProperty, sizing?: null | string, sizes?: Record<SizeLatin, number>) => () => () => FlattenSimpleInterpolation | null;
-/**
- * Sort keys as desktop first
- * @param a key a
- * @param b key b
- * @returns number
- */
-declare const desktopFirst: (a: string, b: string) => number;
-/**
- * Sort keys as mobile first
- * @param a key a
- * @param b key b
- * @returns number
- */
-declare const mobileFirst: (a: string, b: string) => number;
+declare type ResponsiveProperty<V = number | Size> = V | [desktop: V, tablet: V, mobile: V] | [xl: V, l: V, m: V, s: V, xs: V, xxs: V];
+declare const property: (value: PossibleValues, cssProperty?: CssProperty, sizing?: null | string, sizes?: Record<Size, number>) => () => () => FlattenSimpleInterpolation | null;
 interface ResponsiveNamedPropertyPayload<T extends PropsProperties> {
     sizes: ResponsiveNamedProperty<T>;
     cssProperty: CssProperty;
     sizing?: null | string;
     customSizeHandler?: (_value: PossibleValues) => PossibleValues;
     sort?: (_a: string, _b: string) => number;
-    predefinedSizes?: Record<SizeLatin, number>;
+    predefinedSizes?: Record<Size, number>;
 }
 /**
  * Миксин для генерации media запросов
@@ -883,6 +857,11 @@ declare type FontWeight = 'normal' | 'bold' | 'lighter' | 'bolder' | number;
 declare type ThemePreset = 'default' | 'brand';
 declare type ThemeMode = 'light' | 'dark';
 declare type ThemeName = 'mother' | 'baby' | 'teen' | 'adult';
+declare type Size = 'xxxl' | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs';
+declare type Breakpoint = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL';
+declare type CSSUnit = 'px' | 'rem' | 'em' | '%';
+declare type SizeValue = Size | number;
+declare type Sizes = Record<Size, CSSProperties>;
 interface BaseProps {
     /** Appearance preset */
     preset?: 'default' | 'brand';
@@ -925,6 +904,19 @@ interface InputField extends ColorProperty, ColorProperty<'placeholderColor'>, R
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
 }
+declare type ResponsiveSizeProps = {
+    sizeUnits?: CSSUnit;
+    sizes?: Partial<Sizes>;
+    size?: SizeValue | [desktop: SizeValue, tablet: SizeValue, mobile: SizeValue] | [xl: SizeValue, l: SizeValue, m: SizeValue, s: SizeValue, xs: SizeValue, xxs: SizeValue];
+} & {
+    [key in `size${Breakpoint}`]?: SizeValue;
+};
+declare type ResponsiveInterpolationProps<T extends ResponsiveSizeProps> = Omit<T, 'sizes' | 'size'> & {
+    dynamicSizeDeclaration?: (size: number, cssProperty: keyof CSSProperties, cssUnit: CSSUnit) => CSSProperties;
+    sizeProperty?: keyof CSSProperties;
+    sizes: Sizes;
+    size: SizeValue | [desktop: SizeValue, tablet: SizeValue, mobile: SizeValue] | [xl: SizeValue, l: SizeValue, m: SizeValue, s: SizeValue, xs: SizeValue, xxs: SizeValue];
+};
 
 /**
  * Converts HEX color code to RGB(A) string
@@ -1028,13 +1020,9 @@ declare namespace Anchor {
     };
 }
 
-declare type ButtonStaticSize = 'xl' | 'l' | 'm' | 's' | 'xs';
-declare type ButtonSize = ButtonStaticSize | ResponsiveProperty<`${number}rem` | number>;
-interface ButtonProps extends BaseProps, DisplayProperty, ColorProperty, ColorProperty<'fontColor'>, ResponsiveNamedProperty<'padding'>, ResponsiveNamedProperty<'paddingTop'>, ResponsiveNamedProperty<'paddingRight'>, ResponsiveNamedProperty<'paddingBottom'>, ResponsiveNamedProperty<'paddingLeft'>, ResponsiveNamedProperty<'margin'>, ResponsiveNamedProperty<'marginTop'>, ResponsiveNamedProperty<'marginRight'>, ResponsiveNamedProperty<'marginBottom'>, ResponsiveNamedProperty<'marginLeft'>, ResponsiveNamedProperty<'fontSize'>, ResponsiveNamedProperty<'fluid', boolean>, ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
+interface ButtonProps extends BaseProps, ResponsiveSizeProps, DisplayProperty, ColorProperty, ColorProperty<'fontColor'>, ResponsiveNamedProperty<'padding'>, ResponsiveNamedProperty<'paddingTop'>, ResponsiveNamedProperty<'paddingRight'>, ResponsiveNamedProperty<'paddingBottom'>, ResponsiveNamedProperty<'paddingLeft'>, ResponsiveNamedProperty<'margin'>, ResponsiveNamedProperty<'marginTop'>, ResponsiveNamedProperty<'marginRight'>, ResponsiveNamedProperty<'marginBottom'>, ResponsiveNamedProperty<'marginLeft'>, ResponsiveNamedProperty<'fontSize'>, ResponsiveNamedProperty<'fluid', boolean>, ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
     /** Root node polymorphic type */
     as?: 'div' | 'span' | 'a' | 'button' | typeof Link | typeof Anchor;
-    /** Button size */
-    size?: ButtonSize;
     /** Button type attribute */
     type?: 'button' | 'submit' | 'reset';
     /** Button icons */
@@ -1091,7 +1079,7 @@ interface ButtonProps extends BaseProps, DisplayProperty, ColorProperty, ColorPr
     /** @deprecated Use children */
     content?: React.ReactNode;
     /** @deprecated Use ref */
-    innerRef?: React.LegacyRef<HTMLElement>;
+    innerRef?: any;
     /** Component's children */
     children?: React.ReactNode | React.ReactNode[];
     onClick?: (evt: React.SyntheticEvent<HTMLElement>) => void;
@@ -1280,7 +1268,7 @@ interface TextProps extends DisplayProperty, ColorProperty, ResponsiveNamedPrope
     /** Use predefined props with low priority */
     appearance?: TextAppearance;
     /** Custom sizes set */
-    sizes?: Record<SizeLatin, number>;
+    sizes?: Record<Size, number>;
     /** Sizing units */
     fontUnits?: string;
     /** Font family */
@@ -1314,7 +1302,7 @@ interface TextComponent extends ForwardRefExoticComponent<PropsWithoutRef<TextPr
 declare const Text: TextComponent;
 
 declare type AlertType = 'warning' | 'error' | 'info' | 'success';
-declare type AlertSize = keyof Pick<typeof SizeLatin, 'l' | 's'>;
+declare type AlertSize = 'l' | 's';
 interface AlertProps extends BaseProps {
     /** Text of the timer cancellation button */
     cancelTimerText?: string | React.ReactNode;
@@ -1594,7 +1582,9 @@ declare const screenMinXl: (params?: MediaQueryParams) => <T extends object>(arg
  */
 declare const screenRetina: (args_0: TemplateStringsArray | CSSObject, args_1: SimpleInterpolation) => styled_components.FlattenSimpleInterpolation;
 
-declare function buildMediaQuery(value: number | keyof typeof SizeLatin | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string, sizes?: Record<SizeLatin, number>): ReturnType<typeof css>;
+declare function buildMediaQuery(value: number | Size | 'auto' | 'initial' | 'inherit' | boolean, property: string | ((_size: number | 'auto' | 'initial' | 'inherit' | boolean, _sizing?: null | string) => FlattenSimpleInterpolation | null), screenQueryFunction: typeof screenXs, sizing: null | string, sizes?: Record<Size, number>): ReturnType<typeof css>;
+declare const desktopFirst: (a: string, b: string) => number;
+declare const mobileFirst: (a: string, b: string) => number;
 
 interface ActionBtnProps extends BaseProps, DisplayProperty {
     /** Icon name (for inner Icon component) */
@@ -3197,4 +3187,4 @@ declare namespace Select {
     var displayName: string;
 }
 
-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, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, 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, Breakpoint, Button, COUNTRY_DATA, CSSUnit, CURRENCY_MAP, Checkbox, ColorNames, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FontWeight, HEX, INITIAL_MASK, Icon, Input, InputField, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, ResponsiveInterpolationProps, ResponsiveSizeProps, withThemeScrollable as Scrollable, Section, Select, Separator, Size, SizeValue, Sizes, Spacer, Spinner, Switcher, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, 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 };