@foxford/ui 2.26.2 → 2.27.0-beta-b8dc728-20240507

package/dts/index.d.ts

@@ -3,6 +3,7 @@ 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, StyledProps } from 'styled-components';
+import * as IconPack from '@foxford/icon-pack';
 import { Props, PopperInstance, PlacementOptions, SelectorOrElement, Styles } from 'react-floater/lib/types';
 import { Classes } from 'react-modal';
 import * as rc_scrollbars_lib_Scrollbars_types from 'rc-scrollbars/lib/Scrollbars/types';
@@ -1049,6 +1050,38 @@ declare const Text: React.ForwardRefExoticComponent<TextProps> & {
     Ellipse: typeof TextEllipse;
 };
 
+declare type IconPackIconName = Uncapitalize<keyof typeof IconPack>;
+declare type IconNameDefault = 'book' | 'blackBoard' | 'burger' | 'eye' | 'email' | 'sort' | 'unsort' | 'person' | 'diamond' | 'diamondFilled' | 'diamondSolid' | 'infoInverse' | 'list' | 'login' | 'logout' | 'fire' | 'camps' | 'cart' | 'clock' | 'clockFilled' | 'courses' | 'discount' | 'externat' | 'headphones' | 'page' | 'priceTag' | 'phone' | 'prof' | 'star' | 'settings' | 'student' | 'target' | 'textbook' | 'trophy' | 'message' | 'wallet' | 'edit' | 'copy' | 'print' | 'objective' | 'present' | 'coins' | 'calendar' | 'calendar_simple' | 'chevronDown' | 'chevronUp' | 'chevronRight' | 'chevronLeft' | 'cross' | 'dialog' | 'dropDownArrow' | 'externalLink' | 'file' | 'fileBordered' | 'lessons' | 'pencil' | 'phoneNoFill' | 'radioChecked' | 'radioNotChecked' | 'search' | 'tasks' | 'tinyCross' | 'sharpCross' | 'plus' | 'plusThin' | 'play' | 'reload' | 'checkCircle' | 'info' | 'check' | 'home' | 'questionFilled' | 'document' | 'cancel' | 'playPause' | 'video';
+declare type IconName = IconPackIconName | IconNameDefault;
+interface IconProps extends ResponsiveSizeProps, Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
+    /** UI: brand (v3), or default (v2) */
+    preset?: ThemePreset;
+    /** Icon color */
+    color?: Color;
+    /** Built-in icon name */
+    name?: IconName;
+    /** Custom icon element */
+    icon?: JSX.Element;
+    /** Value for vertical-align */
+    vAlign?: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline';
+    /** @ignore @deprecated */
+    as?: React.ElementType<any>;
+}
+
+/**
+ *
+ * Component accepts all \<span\> attributes.
+ *
+ * Responsive "size" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [IconProps](https://github.com/foxford/ui/blob/master/src/components/Icon/types.ts)
+ */
+declare const Icon: React.ForwardRefExoticComponent<IconProps>;
+
+declare const defaultIcons: Record<IconNameDefault, React.FC>;
+
 declare global {
     // Some users of this package are don't use "dom" libs
     interface EventTarget {}
@@ -1121,125 +1154,6 @@ type TransitionPromptHook<S = LocationState> = History.TransitionPromptHook<S>;
 type Hash = History.Hash;
 type Href = History.Href;
 
-interface VAlign {
-    vAlign?: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline';
-}
-declare const vAlign: (vAlign: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline') => styled_components.FlattenSimpleInterpolation;
-
-declare enum IconNames {
-    book = "book",
-    blackBoard = "blackBoard",
-    burger = "burger",
-    eye = "eye",
-    email = "email",
-    sort = "sort",
-    unsort = "unsort",
-    person = "person",
-    diamond = "diamond",
-    diamondFilled = "diamondFilled",
-    diamondSolid = "diamondSolid",
-    infoInverse = "infoInverse",
-    list = "list",
-    login = "login",
-    logout = "logout",
-    fire = "fire",
-    camps = "camps",
-    cart = "cart",
-    clock = "clock",
-    clockFilled = "clockFilled",
-    courses = "courses",
-    discount = "discount",
-    externat = "externat",
-    headphones = "headphones",
-    page = "page",
-    priceTag = "priceTag",
-    phone = "phone",
-    prof = "prof",
-    star = "star",
-    settings = "settings",
-    student = "student",
-    target = "target",
-    textbook = "textbook",
-    trophy = "trophy",
-    message = "message",
-    wallet = "wallet",
-    edit = "edit",
-    copy = "copy",
-    print = "print",
-    objective = "objective",
-    present = "present",
-    coins = "coins",
-    calendar = "calendar",
-    calendar_simple = "calendar_simple",
-    chevronDown = "chevronDown",
-    chevronUp = "chevronUp",
-    chevronRight = "chevronRight",
-    chevronLeft = "chevronLeft",
-    cross = "cross",
-    dialog = "dialog",
-    dropDownArrow = "dropDownArrow",
-    externalLink = "externalLink",
-    file = "file",
-    fileBordered = "fileBordered",
-    lessons = "lessons",
-    pencil = "pencil",
-    phoneNoFill = "phoneNoFill",
-    radioChecked = "radioChecked",
-    radioNotChecked = "radioNotChecked",
-    search = "search",
-    tasks = "tasks",
-    tinyCross = "tinyCross",
-    sharpCross = "sharpCross",
-    plus = "plus",
-    plusThin = "plusThin",
-    play = "play",
-    reload = "reload",
-    checkCircle = "checkCircle",
-    info = "info",
-    check = "check",
-    home = "home",
-    questionFilled = "questionFilled",
-    document = "document",
-    cancel = "cancel",
-    playPause = "playPause",
-    video = "video"
-}
-declare type Icon$1 = React.FC<React.SVGProps<SVGSVGElement>> | (() => JSX.Element);
-declare const defaultIcons: Record<IconNames, Icon$1>;
-
-interface IconProps extends BaseProps, ColorProperty, VAlign, ResponsiveNamedProperty<'size'> {
-    /**
-     * Children react node
-     */
-    children?: React.ReactNode;
-    /**
-     * Name of default icon
-     */
-    name?: keyof typeof IconNames;
-    /**
-     * Object with icon's svg. Use for custom icon insertion
-     */
-    icon?: React.ReactNode;
-    /**
-     * Show pointer cursor on hover?
-     */
-    pointer?: boolean;
-    /** Root node polymorphic type */
-    as?: React.ElementType<any>;
-}
-/**
- * Расширен:
- * - [`BaseProps`](#/Миксины)
- * - [`VAlign`](#/Миксины)
- * - [`Color`](#/Миксины)
- * - [`Color<'fontColor'>`](#/Миксины)
- * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
- */
-declare function Icon(props: IconProps): JSX.Element;
-declare namespace Icon {
-    var displayName: string;
-}
-
 declare type AnchorPalette = {
     color: CSSColor;
     colorHover: CSSColor;
@@ -1267,7 +1181,7 @@ DisplayProperty {
     /** Underline text content */
     underline?: CSSBorderStyle | boolean;
     /** Icons before and after content */
-    icon?: JSX.Element | [Nullable<JSX.Element>, Nullable<JSX.Element>];
+    icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
     /** Props for icon components */
     iconProps?: IconProps;
     /** Build rel attribute with relBuilder from context */
@@ -1354,7 +1268,7 @@ ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
     /** Display inline */
     inline?: boolean;
     /** Icons before and after content */
-    icon?: JSX.Element | [Nullable<JSX.Element>, Nullable<JSX.Element>];
+    icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
     /** Props for icon components */
     iconProps?: IconProps;
     /** Border radius 50% */
@@ -1432,7 +1346,7 @@ interface AlertProps extends BaseProps {
     /** This method is taken from react-toastify library */
     closeToast?(): void;
     /** Icon name (for inner Icon component) */
-    customIcon?: keyof typeof IconNames;
+    customIcon?: IconName;
     /** Any custom image (e.g.: img, svg, icon from @foxford/icon-pack) */
     image?: React.ReactNode;
     /** Use for tablet and mobile view */
@@ -1793,7 +1707,7 @@ DisplayProperty, Omit<React.ComponentPropsWithRef<'div'>, 'color' | 'children'>
     /** Root border radius  */
     borderRadius?: string | number;
     /** Icons before and after content */
-    icon?: JSX.Element | [Nullable<JSX.Element>, Nullable<JSX.Element>];
+    icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
     /** Props for icon components */
     iconProps?: IconProps;
     /** Don't use margin-right: 8px; */
@@ -2298,13 +2212,15 @@ declare const screenMinXl: (params?: MediaQueryParams) => <T extends object>(arg
  */
 declare const screenRetina: (args_0: TemplateStringsArray | CSSObject, args_1: SimpleInterpolation) => styled_components.FlattenSimpleInterpolation;
 
+declare const vAlign: (vAlign: 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'baseline') => styled_components.FlattenSimpleInterpolation;
+
 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) */
-    icon?: keyof typeof IconNames;
+    icon?: IconName;
     disabled?: boolean;
     active?: boolean;
     onClick?(): void;
@@ -3586,7 +3502,7 @@ ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
     /** Label position */
     labelPosition?: 'dynamic' | 'top' | 'center';
     /** Icon before input */
-    icon?: JSX.Element;
+    icon?: JSX.Element | IconName;
     /** Props for icon component */
     iconProps?: IconProps;
     /** Props for text component */
@@ -3594,12 +3510,12 @@ ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
     /** Input controls */
     controls?: {
         additional?: {
-            icon: JSX.Element;
+            icon: JSX.Element | IconName;
             iconProps?: IconProps;
             buttonProps?: React.ComponentPropsWithoutRef<'button'>;
         };
         number?: {
-            icon?: [JSX.Element, JSX.Element];
+            icon?: [JSX.Element | IconName, JSX.Element | IconName];
             iconProps?: IconProps;
             buttonProps?: React.ComponentPropsWithoutRef<'button'> | [Nullable<React.ComponentPropsWithoutRef<'button'>>, Nullable<React.ComponentPropsWithoutRef<'button'>>];
         };
@@ -3827,7 +3743,7 @@ interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, Rea
     hint?: {
         text?: React.ReactNode;
         textProps?: TextProps;
-        icon?: JSX.Element;
+        icon?: JSX.Element | IconName;
         iconProps?: IconProps;
         buttonProps?: React.ComponentPropsWithoutRef<'button'>;
     };