@true-engineering/true-react-common-ui-kit 4.0.0-alpha3 → 4.0.0-alpha31

package/dist/components/Select/Select.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, SyntheticEvent } from 'react';
+import { ReactNode, Ref, SyntheticEvent } from 'react';
 import { ICommonProps, IDropdownWithPopperOptions } from '../../types';
 import { IIcon } from '../Icon';
 import { IInputProps } from '../Input';
@@ -27,8 +27,10 @@ export interface ISelectProps<Value> extends Omit<IInputProps, 'value' | 'onChan
     shouldScrollToList?: boolean;
     isMultiSelect?: false;
     searchInput?: {
-        shouldRenderInList: true;
-    } & Pick<ISearchInputProps, 'placeholder'>;
+        /** @default false */
+        shouldRenderInList?: boolean;
+        ref?: Ref<HTMLInputElement>;
+    } & Pick<ISearchInputProps, 'placeholder' | 'shouldFocusOnMount'>;
     isOptionDisabled?: (option: Value) => boolean;
     onChange: (value: Value | undefined, event: IChangeSelectEvent) => void;
     onBlur?: (event: Event | SyntheticEvent) => void;

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

@@ -3,15 +3,15 @@ import { type IInputStyles } from '../Input';
 import { type ISearchInputStyles } from '../SearchInput';
 import { IWithMessagesStyles } from '../WithMessages';
 import { type ISelectListStyles } from './components';
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "icon" | "disabled" | "inputWrapper" | "arrow" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter" | "iconWrapper", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "disabled" | "inputWrapper" | "arrow" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter", unknown>;
 export declare const readonlyInputStyles: Partial<import("jss").Styles<"input" | "withValue" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
     tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "wrapper" | "controlWrapper" | "minContent" | "activeLabel" | "disabledLabel" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
         tweakPreloader: Partial<import("jss").Styles<"root" | "default" | "currentColor" | "dots" | "logo", unknown, undefined>> & Partial<{
             tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
             tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
         }>;
-    }>;
-    tweakWithMessages: Partial<import("jss").Styles<"error" | "horizontal" | "vertical" | "children" | "info" | "withMessages" | "message", unknown, undefined>> & Partial<unknown>;
+    } & import("..").IControlWrapperSizes>;
+    tweakWithMessages: Partial<import("jss").Styles<"error" | "children" | "horizontal" | "vertical" | "info" | "withMessages" | "message", unknown, undefined>> & Partial<unknown>;
 }>;
 export declare const readonlyMultiSelectStyles: Partial<import("jss").Styles<"input" | "withValue" | "inputContent" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput", unknown, undefined>> & Partial<{
     tweakControlWrapper: Partial<import("jss").Styles<"invalid" | "icon" | "disabled" | "loader" | "loading" | "label" | "requiredLabel" | "withValue" | "clearIcon" | "focused" | "wrapper" | "controlWrapper" | "minContent" | "activeLabel" | "disabledLabel" | "controls" | "iconInner" | "customIcon" | "endIcon" | "activeIcon" | "placement-top" | "placement-bottom" | "placement-top-left" | "placement-top-right" | "placement-bottom-left" | "placement-bottom-right" | "placement-left" | "placement-right" | "placement-middle", unknown, undefined>> & Partial<{
@@ -19,8 +19,8 @@ export declare const readonlyMultiSelectStyles: Partial<import("jss").Styles<"in
             tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
             tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
         }>;
-    }>;
-    tweakWithMessages: Partial<import("jss").Styles<"error" | "horizontal" | "vertical" | "children" | "info" | "withMessages" | "message", unknown, undefined>> & Partial<unknown>;
+    } & import("..").IControlWrapperSizes>;
+    tweakWithMessages: Partial<import("jss").Styles<"error" | "children" | "horizontal" | "vertical" | "info" | "withMessages" | "message", unknown, undefined>> & Partial<unknown>;
 }>;
 export declare const getInputStyles: ({ hasReadonlyInput, isMultiSelect, }: {
     hasReadonlyInput: boolean;

package/dist/components/Select/components/SelectListItem/SelectListItem.d.ts

@@ -1,6 +1,7 @@
 import { type ChangeEvent, type FC, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';
 import { type Classes } from 'jss';
-export interface ISelectListItemProps {
+import { IDataAttributesProps } from '../../../../types';
+export interface ISelectListItemProps extends IDataAttributesProps {
     index: number;
     isSemiChecked?: boolean;
     isDisabled?: boolean;

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

@@ -1,4 +1,4 @@
 export * from './Select';
 export * from './types';
 export type { ISelectStyles } from './Select.styles';
-export type { ISelectListStyles } from './components';
+export { type ISelectListStyles, SelectList } from './components';

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

@@ -1,3 +1,4 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"root" | "text" | "blue" | "green" | "grey" | "orange" | "red" | "teal" | "violet" | "icon" | "custom" | "s" | "m" | "iconLeft" | "badge" | "xs", unknown>;
-export type IStatusStyles = ITweakStyles<typeof useStyles>;
+import { IStatusColors } from './types';
+export declare const useStyles: import("../../theme").IUseStyles<"custom" | "root" | "text" | "icon" | "s" | "m" | "iconLeft" | "badge" | "xs", unknown>;
+export type IStatusStyles = ITweakStyles<typeof useStyles, IStatusColors>;

package/dist/components/Status/constants.d.ts

@@ -1,2 +1 @@
-export declare const STATUS_COLORS: readonly ["green", "teal", "blue", "grey", "orange", "red", "violet", "custom"];
 export declare const STATUS_SIZES: readonly ["xs", "s", "m"];

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

@@ -1,2 +1,3 @@
 export * from './Status';
+export * from './types';
 export type { IStatusStyles } from './Status.styles';

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

@@ -1,3 +1,6 @@
-import { STATUS_COLORS, STATUS_SIZES } from './constants';
-export type IStatusColor = (typeof STATUS_COLORS)[number];
+import { IDefaultExtendableProps } from '../../types';
+import type { STATUS_SIZES } from './constants';
 export type IStatusSize = (typeof STATUS_SIZES)[number];
+export interface IStatusColors extends IDefaultExtendableProps {
+}
+export type IStatusColor = keyof IStatusColors;

package/dist/components/TextArea/TextArea.d.ts

@@ -1,14 +1,13 @@
-import { FormEvent } from 'react';
+import { FormEvent, TextareaHTMLAttributes } from 'react';
 import { ICommonProps } from '../../types';
 import { IControlWrapperProps } from '../ControlWrapper';
 import { IWithMessagesProps } from '../WithMessages';
-import { ITextAreaHTMLBaseProps } from './types';
+import { ITextAreaCounterPosition } from './types';
 import { ITextAreaStyles } from './TextArea.styles';
-export interface ITextAreaProps extends ICommonProps<ITextAreaStyles>, Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled'>, Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'>, Pick<ITextAreaHTMLBaseProps, 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'> {
+export interface ITextAreaProps extends ICommonProps<ITextAreaStyles>, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>, Pick<IControlWrapperProps, 'label' | 'isInvalid' | 'isRequired' | 'isDisabled' | 'size' | 'groupPlacement'>, Pick<IWithMessagesProps, 'infoMessage' | 'errorMessage'> {
     value?: string;
     placeholder?: string;
-    /** @default false */
-    isDisabled?: boolean;
+    counterPosition?: ITextAreaCounterPosition;
     /** @default false */
     isActive?: boolean;
     /**

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

@@ -1,9 +1,10 @@
 import { ITweakStyles } from '../../theme';
-import { IControlWrapperStyles } from '../ControlWrapper';
+import { IWithPrefix } from '../../types';
+import { IControlWrapperSizes, IControlWrapperStyles } from '../ControlWrapper';
 import { IWithMessagesStyles } from '../WithMessages';
-export declare const useStyles: import("../../theme").IUseStyles<"textarea" | "autoSized" | "wrapper" | "symbolsCount" | "symbolsCountError", unknown>;
-export declare const controlWrapperStyles: IControlWrapperStyles;
+import { ITextAreaCounterPositions } from './types';
+export declare const useStyles: import("../../theme").IUseStyles<"root" | "textarea" | "autoSized" | "withLabel" | "wrapper" | "symbolsCount" | "symbolsCountError" | "symbolsCountActive" | "counter-default", unknown>;
 export type ITextAreaStyles = ITweakStyles<typeof useStyles, {
     tweakWithMessages: IWithMessagesStyles;
     tweakControlWrapper: IControlWrapperStyles;
-}>;
+} & IWithPrefix<ITextAreaCounterPositions, 'counter-'> & IControlWrapperSizes>;

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

@@ -1,3 +1,3 @@
 export * from './TextArea';
-export * from './types';
 export type { ITextAreaStyles } from './TextArea.styles';
+export * from './types';

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

@@ -1,2 +1,4 @@
-import { TextareaHTMLAttributes } from 'react';
-export type ITextAreaHTMLBaseProps = Pick<TextareaHTMLAttributes<HTMLTextAreaElement>, 'placeholder' | 'name' | 'maxLength' | 'rows' | 'onPaste' | 'onFocus' | 'onBlur'>;
+import { IExtendableProps } from '../../types';
+export interface ITextAreaCounterPositions extends IExtendableProps<'default'> {
+}
+export type ITextAreaCounterPosition = keyof ITextAreaCounterPositions;

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

@@ -1,6 +1,6 @@
 import { ITweakStyles } from '../../theme';
 import { IThemedPreloaderStyles } from '../ThemedPreloader';
-export declare const useStyles: import("../../theme").IUseStyles<"content" | "bold" | "root" | "circle" | "icon" | "active" | "disabled" | "primary" | "secondary" | "custom" | "l" | "xl" | "loader" | "loading" | "iconContainer" | "reverseContent", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"content" | "custom" | "bold" | "root" | "circle" | "icon" | "active" | "disabled" | "primary" | "secondary" | "l" | "xl" | "loader" | "loading" | "iconContainer" | "reverseContent", unknown>;
 export declare const preloaderStyles: IThemedPreloaderStyles;
 export type ITextButtonStyles = ITweakStyles<typeof useStyles, {
     tweakPreloader: IThemedPreloaderStyles;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -4,7 +4,7 @@ import { ITooltipStyles } from './Tooltip.styles';
 export interface ITooltipProps extends ICommonProps<ITooltipStyles> {
     text: ReactNode;
     /** @default 'tooltip' */
-    view?: 'tooltip' | 'hint';
+    view?: 'tooltip' | 'hint' | 'custom';
     /** @default 'info' */
     type?: 'info' | 'error';
 }

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

@@ -1,3 +1,3 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"error" | "root" | "tooltip" | "info" | "hint", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"custom" | "error" | "root" | "tooltip" | "info" | "hint", unknown>;
 export type ITooltipStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,3 +1,3 @@
 import { ITweakStyles } from '../../theme';
-export declare const useStyles: import("../../theme").IUseStyles<"error" | "horizontal" | "vertical" | "children" | "info" | "withMessages" | "message", unknown>;
+export declare const useStyles: import("../../theme").IUseStyles<"error" | "children" | "horizontal" | "vertical" | "info" | "withMessages" | "message", unknown>;
 export type IWithMessagesStyles = ITweakStyles<typeof useStyles>;

package/dist/components/WithPopup/WithPopup.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Placement, Middleware, OffsetOptions, UseHoverProps } from '@floating-ui/react';
+import { Placement, Middleware, OffsetOptions, UseHoverProps, UseClickProps, UseFocusProps, UseDismissProps, UseTransitionStatusProps } from '@floating-ui/react';
 import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
 import { IPopupArrowProps, IPopupEventType, IWithPopupChildrenProps, IWithPopupToggleEvent, IWithPopupTriggerProps } from './types';
 import { IWithPopupStyles } from './WithPopup.styles';
@@ -11,8 +11,11 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
     placement?: Placement;
     /** @default 'click' */
     eventType?: IPopupEventType;
-    /** @default 0 */
-    hoverDelay?: UseHoverProps['delay'];
+    /**
+     * @deprecated Используйте hoverOptions
+     * @default 0
+     */
+    hoverDelay?: number;
     /** @default 6 */
     popupOffset?: OffsetOptions;
     arrowProps?: IPopupArrowProps;
@@ -35,6 +38,11 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
     /** Должна ли минимальная ширина попапа быть равна ширине триггера
      * @default false */
     isMinWidthSameAsTrigger?: boolean;
+    hoverOptions?: UseHoverProps;
+    clickOptions?: UseClickProps;
+    focusOptions?: UseFocusProps;
+    dismissOptions?: UseDismissProps;
+    transitionOptions?: UseTransitionStatusProps;
     onToggle?: (isActive: boolean, event?: IWithPopupToggleEvent) => void;
 }
 export declare const WithPopup: FC<IWithPopupProps>;

package/dist/hooks/index.d.ts

@@ -1,7 +1,10 @@
+export * from './use-did-mount-effect';
+export * from './use-dropdown';
+export * from './use-intersection-ref';
 export * from './use-is-mounted';
+export * from './use-latest-ref';
+export * from './use-merge';
+export * from './use-merged-refs';
+export * from './use-mixed-styles';
 export * from './use-on-click-outside';
-export * from './use-dropdown';
 export * from './use-tweak-styles';
-export * from './use-did-mount-effect';
-export * from './use-mixed-styles';
-export * from './use-merged-refs';

package/dist/hooks/use-intersection-ref.d.ts

@@ -0,0 +1,8 @@
+import { RefCallback } from 'react';
+export interface IInsertionRefOptions {
+    /** @default false */
+    isDisabled?: boolean;
+    onIntersection?: VoidFunction;
+    onIntersectionEnd?: VoidFunction;
+}
+export declare const useIntersectionRef: (options?: IInsertionRefOptions) => RefCallback<Element>;

package/dist/hooks/use-latest-ref.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare const useLatestRef: <T>(value: T) => MutableRefObject<T>;

package/dist/hooks/use-merge.d.ts

@@ -0,0 +1 @@
+export declare const useMerge: <T>(one?: T | undefined, two?: T | undefined) => T | undefined;

package/dist/hooks/use-mixed-styles.d.ts

@@ -1 +1,3 @@
-export declare const useMixedStyles: <StyleSheet_1>(baseStyles?: StyleSheet_1 | undefined, tweakStyles?: StyleSheet_1 | undefined) => StyleSheet_1 | undefined;
+import type { IMixedStyles } from '../theme';
+export declare const mixStyles: <T>(...tweakStyles: IMixedStyles<T>[]) => NonNullable<T>[];
+export declare const useMixedStyles: <StyleSheet_1>(baseStyles?: IMixedStyles<StyleSheet_1>, tweakStyles?: IMixedStyles<StyleSheet_1>) => NonNullable<StyleSheet_1>[];

package/dist/hooks/use-on-click-outside.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
 export declare const checkElementParentsClassNames: (element: HTMLElement, className: string) => boolean;
 export declare const isElementOneOfParents: (element: HTMLElement, elToSearch: HTMLElement) => boolean;
-export declare function useOnClickOutsideWithRef<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(ref: RefObject<Elem>, handler: (event: MouseEvent | TouchEvent) => void, ignoreRef?: RefObject<IgnoreElem>): void;
-export declare function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(ref: RefObject<Elem>, handler: (event: MouseEvent | TouchEvent) => void, ignoreClassName?: string, ignoreRef?: RefObject<IgnoreElem>): void;
+export declare function useOnClickOutsideWithRef<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(refOrGetter: RefObject<Elem | null> | (() => Elem | null | undefined) | undefined, handler: (event: MouseEvent | TouchEvent) => void, ignoreRef?: RefObject<IgnoreElem>): void;
+export declare function useOnClickOutside<Elem extends HTMLElement, IgnoreElem extends HTMLElement>(refOrGetter: RefObject<Elem | null> | (() => Elem | null | undefined) | undefined, handler: (event: MouseEvent | TouchEvent) => void, ignoreClassName?: string, ignoreRef?: RefObject<IgnoreElem>): void;

package/dist/hooks/use-tweak-styles.d.ts

@@ -1,15 +1,15 @@
-import { IComponentName } from '../theme';
-export declare const useTweakStyles: <StyleSheet_1, ClassName extends keyof StyleSheet_1 & `tweak${string}`>({ innerStyles, tweakStyles: currentComponentTweakStyles, className, currentComponentName, }: {
+import { IComponentName, IMaybeArray, IMixedStyles } from '../theme';
+export declare const useTweakStyles: <StyleSheet_1, ClassName extends keyof StyleSheet_1 & `tweak${string}`>({ innerStyles, tweakStyles, className, currentComponentName, }: {
     /**
      * Это tweakStyles, определенные в родительском компоненте
      * (например, стили для Input, определенные в стилях компонента Select)
      */
-    innerStyles?: StyleSheet_1[ClassName] | undefined;
+    innerStyles?: IMixedStyles<StyleSheet_1[ClassName]>;
     /**
      * Пропса tweakStyles из родительского компонента
      * (это уже непосредственно ISelectProps.tweakStyles)
      */
-    tweakStyles?: StyleSheet_1 | undefined;
+    tweakStyles?: IMaybeArray<StyleSheet_1> | undefined;
     /**
      * Класс для переопределения tweakStyles из-вне. (Например, 'tweakInput')
      */
@@ -18,4 +18,4 @@ export declare const useTweakStyles: <StyleSheet_1, ClassName extends keyof Styl
      * Название компонента который вызывает useTweakStyles. (В данном примере 'Select')
      */
     currentComponentName?: keyof import("../theme").IComponentStyles | undefined;
-}) => StyleSheet_1[ClassName];
+}) => NonNullable<StyleSheet_1[ClassName]>[];