@true-engineering/true-react-common-ui-kit 4.0.0-alpha75 → 4.0.0-alpha76

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

@@ -1,9 +1,9 @@
 import { ReactNode, Ref, SyntheticEvent } from 'react';
-import { IDropdownWithPopperOptions, IReplaceTweakStylesProps } from '../../types';
+import { IReplaceTweakStylesProps } from '../../types';
 import { IIcon } from '../Icon';
 import { IInputProps } from '../Input';
 import { ISearchInputProps } from '../SearchInput';
-import { IChangeSelectEvent, IMultipleSelectValue, ISelectFooter } from './types';
+import { IChangeSelectEvent, IFloatingDropdownOptions, IMultipleSelectValue, ISelectFooter } from './types';
 import { ISelectStyles } from './Select.styles';
 export interface ISelectProps<Value> extends Omit<IReplaceTweakStylesProps<IInputProps, ISelectStyles>, 'value' | 'onChange' | 'onBlur' | 'type'> {
     header?: ReactNode;
@@ -18,7 +18,7 @@ export interface ISelectProps<Value> extends Omit<IReplaceTweakStylesProps<IInpu
     debounceTime?: number;
     /** @default 0 */
     minSymbolsCountToOpenList?: number;
-    dropdownOptions?: IDropdownWithPopperOptions;
+    dropdownOptions?: IFloatingDropdownOptions;
     /** @default 'chevron-down' */
     dropdownIcon?: IIcon | null;
     options: Value[] | readonly Value[];
@@ -36,7 +36,10 @@ export interface ISelectProps<Value> extends Omit<IReplaceTweakStylesProps<IInpu
     onBlur?: (event: Event | SyntheticEvent) => void;
     onType?: (value: string) => Promise<void>;
     optionsFilter?: (options: Value[], query: string) => Value[];
-    onOpen?: () => void;
+    /** @description Функция должна быть мемоизирована */
+    onOpen?: VoidFunction;
+    /** @description Функция должна быть мемоизирована */
+    onClose?: VoidFunction;
     compareValuesOnChange?: (v1?: Value, v2?: Value) => boolean;
     /** @description Функция должна быть мемоизирована с целью избежания ререндера */
     convertValueToString?: (value: Value) => string | undefined;

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

@@ -2,8 +2,9 @@ import { ITweakStyles } from '../../theme';
 import { IInputStyles } from '../Input';
 import { ISearchInputStyles } from '../SearchInput';
 import { IWithMessagesStyles } from '../WithMessages';
+import { IWithPopupStyles } from '../WithPopup';
 import { ISelectListStyles } from './components';
-export declare const useStyles: import('../../theme').IUseStyles<"root" | "disabled" | "arrow" | "inputWrapper" | "listWrapper" | "withoutPopper" | "listWrapperInBody" | "activeArrow" | "counter">;
+export declare const useStyles: import('../../theme').IUseStyles<"root" | "disabled" | "arrow" | "inputWrapper" | "activeArrow" | "counter">;
 export declare const readonlyInputStyles: Partial<import('../../theme').IStyles<"input" | "withValue" | "inputContent" | "defaultWrapper" | "autoSizeWrapper" | "autoSized" | "withUnits" | "withLabel" | "fakeValue" | "units" | "focusedInput" | "disabledInput" | "invalidInput">> & Partial<{
     tweakControlWrapper: import('..').IControlWrapperStyles;
     tweakWithMessages: IWithMessagesStyles;
@@ -16,9 +17,11 @@ export declare const getInputStyles: ({ hasReadonlyInput, isMultiSelect, }: {
     hasReadonlyInput: boolean;
     isMultiSelect?: boolean;
 }) => IInputStyles;
+export declare const withPopupStyles: IWithPopupStyles;
 export type ISelectStyles = ITweakStyles<typeof useStyles, {
     tweakWithMessages: IWithMessagesStyles;
     tweakInput: IInputStyles;
     tweakSelectList: ISelectListStyles;
     tweakSearchInput: ISearchInputStyles;
+    tweakWithPopup?: IWithPopupStyles;
 }>;

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

@@ -1,8 +1,25 @@
 import { ChangeEvent, KeyboardEvent } from 'react';
 import { IRenderNode } from '../../types';
 import { IChangeInputEvent } from '../Input';
+import { IWithPopupProps } from '../WithPopup';
 export type IMultipleSelectValue<Value> = Array<NonNullable<Value>>;
 export type IChangeSelectEvent = IChangeInputEvent | ChangeEvent<HTMLElement> | KeyboardEvent;
 export type ISelectFooter<T> = IRenderNode<{
     filteredOptions: T[];
 }>;
+export interface IFloatingDropdownOptions {
+    /** @default 'bottom-start' */
+    placement?: IWithPopupProps['placement'];
+    /** @default 4 */
+    popupOffset?: IWithPopupProps['popupOffset'];
+    /** @default false */
+    shouldRenderInBody?: IWithPopupProps['shouldRenderInBody'];
+    /** @default false */
+    shouldHideOnScroll?: IWithPopupProps['shouldHideOnScroll'];
+    /** @default true */
+    isMinWidthSameAsTrigger?: IWithPopupProps['isMinWidthSameAsTrigger'];
+    /** @default false */
+    canBeFlipped?: IWithPopupProps['canBeFlipped'];
+    flipOptions?: IWithPopupProps['flipOptions'];
+    middlewares?: IWithPopupProps['middlewares'];
+}

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

@@ -1,11 +1,12 @@
-import { FC } from 'react';
-import { Placement, Middleware, OffsetOptions, UseHoverProps, UseClickProps, UseFocusProps, UseDismissProps, UseTransitionStatusProps } from '@floating-ui/react';
+import { Dispatch, FC, SetStateAction } from 'react';
+import { Placement, Middleware, OffsetOptions, UseHoverProps, UseClickProps, UseFocusProps, UseDismissProps, UseTransitionStatusProps, FlipOptions, MiddlewareState } from '@floating-ui/react';
 import { ICommonProps, IDataAttributes, IRenderNode } from '../../types';
 import { IPopupArrowProps, IPopupEventType, IWithPopupChildrenProps, IWithPopupToggleEvent, IWithPopupTriggerProps } from './types';
 import { IWithPopupStyles } from './WithPopup.styles';
 export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
     trigger: IRenderNode<IWithPopupTriggerProps>;
     children: IRenderNode<IWithPopupChildrenProps>;
+    state?: [boolean, Dispatch<SetStateAction<boolean>>];
     middlewares?: Middleware[];
     /** @default eventType === 'click' ? 'bottom-end' : 'top' */
     placement?: Placement;
@@ -38,6 +39,7 @@ export interface IWithPopupProps extends ICommonProps<IWithPopupStyles> {
     /** Должна ли минимальная ширина попапа быть равна ширине триггера
      * @default false */
     isMinWidthSameAsTrigger?: boolean;
+    flipOptions?: FlipOptions | ((state: MiddlewareState) => FlipOptions);
     hoverOptions?: UseHoverProps;
     clickOptions?: UseClickProps;
     focusOptions?: UseFocusProps;

package/dist/helpers/misc.d.ts

@@ -4,7 +4,6 @@ export { default as rgba } from 'hex-to-rgba';
 /** @deprecated Используйте `toKebabCase` из `true-react-platform-helpers` */
 export declare const transformToKebab: (string: string) => string;
 export declare const getParentNode: (element: Element | ShadowRoot | Document) => Element;
-export declare const hasExactParent: (element: Element, parent: Element) => boolean;
 export declare const getStyleComputedProperty: (element: Element) => Partial<CSSStyleDeclaration>;
 export declare const getScrollParent: (element: Element | Document) => Element;
 export declare const isElementOffScreen: (element: HTMLElement, input?: HTMLElement) => boolean;