@foxford/ui 2.23.0 → 2.25.0

package/dts/index.d.ts

@@ -7,7 +7,7 @@ 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';
 import { ScrollbarsProps } from 'rc-scrollbars';
-import { Styles, Props } from 'react-floater/lib/types';
+import { Props, PopperInstance, PlacementOptions, SelectorOrElement, Styles } from 'react-floater/lib/types';
 import { InputState, MaskOptions } from 'react-input-mask';
 import { ReactSelectProps } from 'react-select';
 
@@ -275,7 +275,15 @@ declare enum BaseColorNames {
     'product-bg-course' = "product-bg-course",
     'product-bg-tutor' = "product-bg-tutor",
     'product-bg-group' = "product-bg-group",
-    'product-bg-complect' = "product-bg-complect"
+    'product-bg-complect' = "product-bg-complect",
+    'skeleton-onmain-primary' = "skeleton-onmain-primary",
+    'skeleton-onmain-secondary' = "skeleton-onmain-secondary",
+    'skeleton-gradient-from-color-onmain' = "skeleton-gradient-from-color-onmain",
+    'skeleton-gradient-to-color-onmain' = "skeleton-gradient-to-color-onmain",
+    'skeleton-oncolor-primary' = "skeleton-oncolor-primary",
+    'skeleton-oncolor-secondary' = "skeleton-oncolor-secondary",
+    'skeleton-gradient-from-color-oncolor' = "skeleton-gradient-from-color-oncolor",
+    'skeleton-gradient-to-color-oncolor' = "skeleton-gradient-to-color-oncolor"
 }
 declare enum BrandColorNames {
     'content-brand-primary' = "content-brand-primary",
@@ -490,6 +498,14 @@ declare const ColorNames: {
     'product-bg-tutor': (typeof BaseColorNames)["product-bg-tutor"];
     'product-bg-group': (typeof BaseColorNames)["product-bg-group"];
     'product-bg-complect': (typeof BaseColorNames)["product-bg-complect"];
+    'skeleton-onmain-primary': (typeof BaseColorNames)["skeleton-onmain-primary"];
+    'skeleton-onmain-secondary': (typeof BaseColorNames)["skeleton-onmain-secondary"];
+    'skeleton-gradient-from-color-onmain': (typeof BaseColorNames)["skeleton-gradient-from-color-onmain"];
+    'skeleton-gradient-to-color-onmain': (typeof BaseColorNames)["skeleton-gradient-to-color-onmain"];
+    'skeleton-oncolor-primary': (typeof BaseColorNames)["skeleton-oncolor-primary"];
+    'skeleton-oncolor-secondary': (typeof BaseColorNames)["skeleton-oncolor-secondary"];
+    'skeleton-gradient-from-color-oncolor': (typeof BaseColorNames)["skeleton-gradient-from-color-oncolor"];
+    'skeleton-gradient-to-color-oncolor': (typeof BaseColorNames)["skeleton-gradient-to-color-oncolor"];
     profession: UnitColorNames.profession;
     professionDark: UnitColorNames.professionDark;
     camps: UnitColorNames.camps;
@@ -2813,144 +2829,136 @@ declare namespace Tabs {
     var Tab: react.ForwardRefExoticComponent<TabProps>;
 }
 
-/**
-Matches any [primitive value](https://developer.mozilla.org/en-US/docs/Glossary/Primitive).
-
-@category Type
-*/
-type Primitive =
-	| null
-	| undefined
-	| string
-	| number
-	| boolean
-	| symbol
-	| bigint;
-
-declare global {
-	interface SymbolConstructor {
-		readonly observable: symbol;
-	}
-}
-
-/**
-Matches any primitive, `Date`, or `RegExp` value.
-*/
-type BuiltIns = Primitive | Date | RegExp;
-
-/**
-Create a type from another type with all keys and nested keys set to optional.
-
-Use-cases:
-- Merging a default settings/config object with another object, the second object would be a deep partial of the default object.
-- Mocking and testing complex entities, where populating an entire object with its keys would be redundant in terms of the mock or test.
-
-@example
-```
-import type {PartialDeep} from 'type-fest';
-
-const settings: Settings = {
-	textEditor: {
-		fontSize: 14;
-		fontColor: '#000000';
-		fontWeight: 400;
-	}
-	autocomplete: false;
-	autosave: true;
+declare type TooltipComponentPalette = {
+    color: CSSColor;
+    backgroundColor: CSSColor;
+    shadowColor: CSSColor;
+    closeColor: CSSColor;
+    closeColorHover: CSSColor;
+    closeColorActive: CSSColor;
+    closeColorDisabled: CSSColor;
 };
-
-const applySavedSettings = (savedSettings: PartialDeep<Settings>) => {
-	return {...settings, ...savedSettings};
-}
-
-settings = applySavedSettings({textEditor: {fontWeight: 500}});
-```
-
-@category Object
-@category Array
-@category Set
-@category Map
-*/
-type PartialDeep<T> = T extends BuiltIns
-	? T
-	: T extends Map<infer KeyType, infer ValueType>
-	? PartialMapDeep<KeyType, ValueType>
-	: T extends Set<infer ItemType>
-	? PartialSetDeep<ItemType>
-	: T extends ReadonlyMap<infer KeyType, infer ValueType>
-	? PartialReadonlyMapDeep<KeyType, ValueType>
-	: T extends ReadonlySet<infer ItemType>
-	? PartialReadonlySetDeep<ItemType>
-	: T extends ((...arguments: any[]) => unknown)
-	? T | undefined
-	: T extends object
-	? T extends Array<infer ItemType> // Test for arrays/tuples, per https://github.com/microsoft/TypeScript/issues/35156
-		? ItemType[] extends T // Test for arrays (non-tuples) specifically
-			? Array<PartialDeep<ItemType | undefined>> // Recreate relevant array type to prevent eager evaluation of circular reference
-			: PartialObjectDeep<T> // Tuples behave properly
-		: PartialObjectDeep<T>
-	: unknown;
-
-/**
-Same as `PartialDeep`, but accepts only `Map`s and as inputs. Internal helper for `PartialDeep`.
-*/
-interface PartialMapDeep<KeyType, ValueType> extends Map<PartialDeep<KeyType>, PartialDeep<ValueType>> {}
-
-/**
-Same as `PartialDeep`, but accepts only `Set`s as inputs. Internal helper for `PartialDeep`.
-*/
-interface PartialSetDeep<T> extends Set<PartialDeep<T>> {}
-
-/**
-Same as `PartialDeep`, but accepts only `ReadonlyMap`s as inputs. Internal helper for `PartialDeep`.
-*/
-interface PartialReadonlyMapDeep<KeyType, ValueType> extends ReadonlyMap<PartialDeep<KeyType>, PartialDeep<ValueType>> {}
-
-/**
-Same as `PartialDeep`, but accepts only `ReadonlySet`s as inputs. Internal helper for `PartialDeep`.
-*/
-interface PartialReadonlySetDeep<T> extends ReadonlySet<PartialDeep<T>> {}
+interface TooltipComponentProps extends ResponsiveSizeProps, Omit<React.ComponentPropsWithRef<'div'>, 'children' | 'title'> {
+    /** Custom colors */
+    palette?: Partial<Record<keyof TooltipComponentPalette, Color>>;
+    /** Appearance variant */
+    black?: boolean;
+    /** Appearance variant */
+    contrast?: boolean;
+    /** Title text */
+    title?: React.ReactNode;
+    /** Props for title text component */
+    titleProps?: TextProps;
+    /** Main content text */
+    content?: React.ReactNode;
+    /** Props for content text component */
+    contentProps?: TextProps;
+    /** Footer segment */
+    footer?: React.ReactNode;
+    /** Show close button */
+    showCloseButton?: boolean;
+    /** Props for close button */
+    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
+    /** Apply drop shadow filter */
+    elevated?: boolean;
+    /** @ignore */
+    closeFn?: () => void;
+}
 
 /**
-Same as `PartialDeep`, but accepts only `object`s as inputs. Internal helper for `PartialDeep`.
-*/
-type PartialObjectDeep<ObjectType extends object> = {
-	[KeyType in keyof ObjectType]?: PartialDeep<ObjectType[KeyType]>
-};
+ *
+ * Component accepts all \<div\> attributes.
+ *
+ * Responsive "size" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [TooltipComponentProps](https://github.com/foxford/ui/blob/master/src/components/TooltipComponent/types.ts)
+ */
+declare const TooltipComponent: React.ForwardRefExoticComponent<TooltipComponentProps>;
 
-declare type TooltipDefaultProps = {
-    autoOpen: boolean;
-    disableAnimation: boolean;
-    disableFlip: boolean;
-    disableHoverToClick: boolean;
-    event: string;
-    eventDelay: number;
-    offset: number;
-    placement: string;
-    showCloseButton: boolean;
-    styles: PartialDeep<Styles> | undefined;
-    target: null;
-    wrapperOptions: {
-        position: boolean;
+interface TooltipProps extends ResponsiveSizeProps, React.RefAttributes<HTMLDivElement> {
+    /** UI: brand (v3), or default (v2) */
+    preset?: ThemePreset;
+    /** Custom colors */
+    palette?: Partial<Record<keyof TooltipComponentPalette, Color>>;
+    /** Appearance variant */
+    black?: boolean;
+    /** Appearance variant */
+    contrast?: boolean;
+    /** Open automatically */
+    autoOpen?: boolean;
+    /** It will be called on state change */
+    callback?: (action: 'open' | 'close', props: Props) => void;
+    /** Default tooltip target */
+    children?: React.ReactNode;
+    /** Custom UI for tooltip */
+    component?: React.ReactElement | ((props: Pick<TooltipProps, 'size' | 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'black' | 'contrast' | 'showCloseButton' | 'closeButtonProps'> & {
+        id?: string;
+        role?: string;
+        closeFn?: () => void;
+    }) => React.ReactElement);
+    /** Tooltip content */
+    content?: React.ReactNode;
+    /** Props for content text component */
+    contentProps?: TextProps;
+    /** Debugging logs in console */
+    debug?: boolean;
+    /** Don't adjust tooltip on scroll / resize */
+    disableFlip?: boolean;
+    /** Don't convert 'hover' to 'click' event on mobile */
+    disableHoverToClick?: boolean;
+    /** Trigger event for tooltip */
+    event?: 'click' | 'hover';
+    /** Pause in 'seconds' to wait before close tooltip (valid for 'hover' event) */
+    eventDelay?: number;
+    /** Tooltip footer */
+    footer?: React.ReactNode;
+    /** Callback to get popper.js instance */
+    getPopper?: (popper: PopperInstance, origin: 'floater' | 'wrapper') => void;
+    /** Don't show tooltip arrow */
+    hideArrow?: boolean;
+    /** Distance in 'px' between tooltip and its target */
+    offset?: number;
+    /** Switch between normal and controlled modes. It will disable built in tooltip behavior */
+    open?: boolean;
+    /** Tooltip position relative to its target */
+    placement?: PlacementOptions;
+    /** CSS selector or element to render tooltips */
+    portalElement?: SelectorOrElement;
+    /** Custom styles */
+    styles?: Partial<Styles>;
+    /** Show button to close tooltip */
+    showCloseButton?: boolean;
+    /** Props for button to close tooltip */
+    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
+    /** Tooltip target. If it's not set, 'children' will be used */
+    target?: SelectorOrElement;
+    /** Tooltip title */
+    title?: React.ReactNode;
+    /** Props for title text component */
+    titleProps?: TextProps;
+    /** Position of tooltip wrapper relative to target */
+    wrapperOptions?: {
+        offset?: number;
+        placement?: Omit<PlacementOptions, 'center'>;
+        position?: boolean;
     };
-    component: null;
-};
-declare type TooltipDefaultStyles = {
-    tooltipStyles: PartialDeep<Styles> | undefined;
-    tooltipDisplayBlockStyles: PartialDeep<Styles> | undefined;
-    tooltipStylesRounend: PartialDeep<Styles> | undefined;
-};
+}
 
-declare type TooltipProps = Props;
 /**
- * Основан на [react-floater](https://github.com/gilbarbara/react-floater).
+ *
+ * Component accepts ["react-floater"](https://www.npmjs.com/package/react-floater/v/0.8.2) v0.8.2 props.
+ *
+ * Responsive "size" props are supported.
+ *
+ * Exposed "ref" attached to tooltip component root.
+ *
+ * See full [TooltipProps](https://github.com/foxford/ui/blob/master/src/components/Tooltip/types.ts)
  */
-declare function Tooltip({ children, styles, ...props }: TooltipProps): JSX.Element;
-declare namespace Tooltip {
-    var defaultProps: TooltipDefaultProps;
-    var themes: TooltipDefaultStyles;
-    var displayName: string;
-}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps> & {
+    Component: typeof TooltipComponent;
+};
 
 interface TagProps extends BaseProps, DisplayProperty, ColorProperty, ResponsiveNamedProperty<'height'>, ResponsiveNamedProperty<'width'> {
     as?: 'button' | 'div' | 'input' | 'label';
@@ -3377,7 +3385,7 @@ declare type StyledBaseInputProps = React.ComponentPropsWithoutRef<'input'> & Pi
 
 /**
  *
- * Component accepts all \<input\> attributes and "react-input-mask" props.
+ * Component accepts all \<input\> attributes and "react-input-mask" v2.0.4 props.
  *
  * Responsive "size", "margin" props are supported.
  *
@@ -3593,4 +3601,48 @@ interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, Rea
  */
 declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps>;
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, Input, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Spacer, Spinner, Switcher, Tab, 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 };
+declare type SkeletonPalette = {
+    color: CSSColor;
+    gradientColor: CSSColor;
+    gradientHighlightColor: CSSColor;
+};
+interface SkeletonProps extends ResponsiveMarginProps, React.ComponentPropsWithRef<'div'> {
+    /** Element to infer sizing */
+    children?: React.ReactNode;
+    /** Custom colors */
+    palette?: Partial<Record<keyof SkeletonPalette, Color>>;
+    /** Display 'inline-block' */
+    inline?: boolean;
+    /** Root border-radius: 50% */
+    round?: boolean;
+    /** Root border-radius */
+    borderRadius?: string | number;
+    /** Root width */
+    width?: string | number;
+    /** Root height */
+    height?: string | number;
+    /** Value (ms) to control animation speed */
+    animationDuration?: number;
+    /** Delay to animation start (ms) to avoid flicker at fast connection */
+    animationDelay?: number;
+    /** Appearance variant */
+    primary?: boolean;
+    /** Appearance variant */
+    secondary?: boolean;
+    /** Appearance variant */
+    onColored?: boolean;
+}
+
+/**
+ *
+ * Component accepts all \<div\> attributes.
+ *
+ * Responsive "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [SkeletonProps](https://github.com/foxford/ui/blob/master/src/components/Skeleton/types.ts)
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps>;
+
+export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, Input, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, 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 };

package/hooks/useKeyboardListener.js

@@ -0,0 +1,2 @@
+import{useEffect as e}from'react';var r=(r,t,n)=>{e((()=>{var e=e=>{t.includes(e.key)&&n(e)};return document.addEventListener(r,e),()=>{document.removeEventListener(r,e)}}),[r,n,t])};export{r as useKeyboardListener};
+//# sourceMappingURL=useKeyboardListener.js.map

package/hooks/useKeyboardListener.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardListener.js","sources":["../../../src/hooks/useKeyboardListener.ts"],"sourcesContent":["import { useEffect } from 'react'\n\nexport const useKeyboardListener = (\n  keyboardEvtType: 'keydown' | 'keyup',\n  keyboardKeys: string[],\n  keyboardEvtHandler: (evt: KeyboardEvent) => void\n) => {\n  useEffect(() => {\n    const handleKeyboardEvt = (evt: KeyboardEvent) => {\n      if (keyboardKeys.includes(evt.key)) keyboardEvtHandler(evt)\n    }\n\n    document.addEventListener(keyboardEvtType, handleKeyboardEvt)\n\n    return () => {\n      document.removeEventListener(keyboardEvtType, handleKeyboardEvt)\n    }\n  }, [keyboardEvtType, keyboardEvtHandler, keyboardKeys])\n}\n"],"names":["useKeyboardListener","keyboardEvtType","keyboardKeys","keyboardEvtHandler","useEffect","handleKeyboardEvt","evt","includes","key","document","addEventListener","removeEventListener"],"mappings":"kCAEO,IAAMA,EAAsB,CACjCC,EACAC,EACAC,KAEAC,GAAAA,KACE,IAAMC,EAAqBC,IACrBJ,EAAaK,SAASD,EAAIE,MAAML,EAAmBG,IAKzD,OAFAG,SAASC,iBAAiBT,EAAiBI,GAEpC,KACLI,SAASE,oBAAoBV,EAAiBI,MAE/C,CAACJ,EAAiBE,EAAoBD"}

package/hooks/usePalette.js

@@ -0,0 +1,2 @@
+import{useTheme as e}from'styled-components';var r=r=>{var{palette:t}=r;var a=e();return t?Object.keys(t).reduce(((e,r)=>{var o;return e[r]=null!==(o=a.colors[t[r]])&&void 0!==o?o:t[r],e}),{}):{}};export{r as usePalette};
+//# sourceMappingURL=usePalette.js.map

package/hooks/usePalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePalette.js","sources":["../../../src/hooks/usePalette.ts"],"sourcesContent":["import { useTheme } from 'styled-components'\nimport type { ColorPaletteKey, Color, CSSColor } from 'shared/types'\n\ntype PropsWithPalette = {\n  palette?: Partial<Record<ColorPaletteKey, Color>>\n}\n\nexport const usePalette = ({ palette }: PropsWithPalette): Record<ColorPaletteKey, CSSColor> => {\n  const theme = useTheme()\n\n  return palette\n    ? Object.keys(palette).reduce((injected, key) => {\n        injected[key] = theme.colors[palette[key]] ?? palette[key]\n        return injected\n      }, {} as Record<ColorPaletteKey, CSSColor>)\n    : {}\n}\n"],"names":["usePalette","_ref","palette","theme","useTheme","Object","keys","reduce","injected","key","_theme$colors$palette","colors"],"mappings":"6CAOO,IAAMA,EAAaC,IAAsE,IAArEC,QAAEA,GAAmED,EAC9F,IAAME,EAAQC,IAEd,OAAOF,EACHG,OAAOC,KAAKJ,GAASK,SAAQC,EAAUC,KAAQ,IAAAC,EAE7C,OADAF,EAASC,WAAON,EAAAA,EAAMQ,OAAOT,EAAQO,WAAAA,QAASP,EAAQO,GAC/CD,IACN,IACH"}