indicator-ui 1.1.18 → 1.1.20

package/dist/types/src/hooks/ui-animations/assets/index.d.ts

@@ -2,6 +2,5 @@ export * from './modalAnimations';
 export * from './backdropModalAnimations';
 export * from './shimmerAnimation';
 export * from './movingAnimations';
-export * from './collapsibleAnimations';
 export * from './textAutoScrollAnimations';
 export * from './carouselAnimations';

package/dist/types/src/hooks/ui-animations/{assets/collapsibleAnimations.d.ts → drawer/animation.d.ts}

@@ -3,7 +3,7 @@ type PropsType = [
     content: HTMLElement,
     timeline: gsap.core.Timeline
 ];
-export declare function COLLAPSIBLE_ANIM(...args: PropsType): {
+export declare function DRAWER_ANIM(...args: PropsType): {
     appear: (height: number) => gsap.core.Timeline;
     disappear: () => gsap.core.Timeline;
     changeHeight: (height: number) => gsap.core.Timeline;

package/dist/types/src/hooks/ui-animations/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useDrawer';
+export { type DrawerState } from './useDrawerActions';

package/dist/types/src/hooks/ui-animations/drawer/useDrawer.d.ts

@@ -0,0 +1,15 @@
+import { DrawerState } from './useDrawerActions';
+import { useDrawerRefs } from './useDrawerRefs';
+type PropsType<W extends HTMLElement, C extends HTMLElement> = Pick<Parameters<typeof useDrawerRefs<W, C>>[number], 'wrapperRef' | 'contentRef'> & {
+    initElState?: DrawerState;
+};
+export declare function useDrawer<W extends HTMLElement, C extends HTMLElement>(props: PropsType<W, C>): {
+    elState: DrawerState;
+    getElState: () => DrawerState;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    getContentInitStyle: () => import('react').CSSProperties;
+    getWrapperInitStyle: () => import('react').CSSProperties;
+};
+export {};

package/dist/types/src/hooks/ui-animations/drawer/useDrawerActions.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import { useDrawerAnimation } from './useDrawerAnimation';
+import { useDrawerRefs } from './useDrawerRefs';
+export type DrawerState = 'open' | 'close';
+type PropsType = Pick<ReturnType<typeof useDrawerRefs>, 'contentRef'> & Pick<ReturnType<typeof useDrawerAnimation>, 'resizeAnim' | 'openAnim' | 'closeAnim'> & {
+    initElState: DrawerState;
+};
+export declare function useDrawerActions(props: PropsType): {
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
+    elState: DrawerState;
+    getElState: () => DrawerState;
+    getWrapperInitStyle: () => CSSProperties;
+    getContentInitStyle: () => CSSProperties;
+};
+export {};

package/dist/types/src/hooks/ui-animations/drawer/useDrawerAnimation.d.ts

@@ -0,0 +1,8 @@
+import { useDrawerRefs } from './useDrawerRefs';
+type PropsType<W extends HTMLElement, C extends HTMLElement> = Pick<ReturnType<typeof useDrawerRefs<W, C>>, 'getElements'>;
+export declare function useDrawerAnimation<W extends HTMLElement, C extends HTMLElement>(props: PropsType<W, C>): {
+    openAnim: () => void;
+    closeAnim: () => void;
+    resizeAnim: () => void;
+};
+export {};

package/dist/types/src/hooks/ui-animations/drawer/useDrawerRefs.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+type PropsType<W extends HTMLElement, C extends HTMLElement> = {
+    wrapperRef: React.RefObject<W | null>;
+    contentRef: React.RefObject<C | null>;
+};
+export declare function useDrawerRefs<W extends HTMLElement, C extends HTMLElement>(props: PropsType<W, C>): {
+    getElements: () => {
+        content: C;
+        wrapper: W;
+    };
+    wrapperRef: React.RefObject<W | null>;
+    contentRef: React.RefObject<C | null>;
+};
+export {};

package/dist/types/src/hooks/ui-animations/index.d.ts

@@ -1,6 +1,6 @@
 export * from './useModalAnim';
 export * from './useBackgroundModalAnim';
-export * from './useCollapsible';
+export * from './drawer';
 export * from './useHoverAutoScrollText';
 export * from './useCarousel';
 export * from './helpers';

package/dist/types/src/ui/Drawer/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useDrawerProvider';

package/dist/types/src/ui/Drawer/hooks/useDrawerProvider.d.ts

@@ -0,0 +1,34 @@
+import { default as React, CSSProperties, ElementType } from 'react';
+import { DrawerState, useDrawer } from '../../../hooks';
+import { PolyPropsWithInstanceRef } from '../../../types';
+type RefType<W extends ElementType, C extends ElementType> = {
+    wrapper: React.ComponentRef<W>;
+    content: React.ComponentRef<C>;
+    actions: ReturnType<typeof useDrawer>;
+};
+type PropsType<W extends ElementType, C extends ElementType> = PolyPropsWithInstanceRef<C, RefType<W, C>, Pick<Parameters<typeof useDrawer>[number], 'initElState'> & {
+    wrapperAs?: W;
+    wrapperClassName?: string;
+    wrapperStyle?: CSSProperties;
+    onUpdateState?: (state: DrawerState) => void;
+    offSyncWidth?: boolean;
+}>;
+export declare function useDrawerProvider<W extends ElementType, C extends ElementType>(props: PropsType<W, C>): {
+    actions: {
+        elState: DrawerState;
+        getElState: () => DrawerState;
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+        getContentInitStyle: () => CSSProperties;
+        getWrapperInitStyle: () => CSSProperties;
+    };
+    wrapperRef: React.RefObject<HTMLElement | null>;
+    contentRef: React.RefObject<HTMLElement | null>;
+    as: C | undefined;
+    wrapperAs: W | undefined;
+    wrapperStyle: React.CSSProperties | undefined;
+    wrapperClassName: string | undefined;
+    contentProps: Omit<PropsType<W, C>, "as" | "instanceRef" | "initElState" | "wrapperAs" | "wrapperClassName" | "wrapperStyle" | "onUpdateState" | "offSyncWidth">;
+};
+export {};

package/dist/types/src/ui/Drawer/ui/Drawer.d.ts

@@ -0,0 +1,5 @@
+import { ElementType } from 'react';
+import { useDrawerProvider } from '../hooks';
+type PropsType<W extends ElementType, C extends ElementType> = Parameters<typeof useDrawerProvider<W, C>>[number];
+export declare function Drawer<W extends ElementType, C extends ElementType>(props: PropsType<W, C>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/ui/Drawer/ui/index.d.ts

@@ -0,0 +1 @@
+export * from './Drawer';

package/dist/types/src/ui/formFields/FormSelectField/ui/FormSelectFieldBase.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { FieldPropsType } from '../../../../hooks';
+import { FieldPropsType, useModal } from '../../../../hooks';
 import { DropdownItemPropsType } from '../../..';
 import { FormFieldBase } from '../../FormField';
 type OptionsExtendItemType<T> = DropdownItemPropsType & {
@@ -16,6 +16,9 @@ type BasePropsType<D, M extends boolean> = {
     disabled?: boolean;
     required?: boolean;
 };
-type PropsType<D, M extends boolean> = Omit<React.ComponentProps<typeof FormFieldBase>, keyof BasePropsType<D, M> | keyof FieldPropsType<ValueType<D, M>>> & FieldPropsType<ValueType<D, M>> & BasePropsType<D, M>;
+type PositionSetting = NonNullable<Parameters<typeof useModal>[1]>['position'];
+type PropsType<D, M extends boolean> = Omit<React.ComponentProps<typeof FormFieldBase>, keyof BasePropsType<D, M> | keyof FieldPropsType<ValueType<D, M>>> & FieldPropsType<ValueType<D, M>> & BasePropsType<D, M> & {
+    modalPosition?: PositionSetting;
+};
 export declare function FormSelectFieldBase<D, M extends boolean = false>(props: PropsType<D, M>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/src/ui/formFields/dates/FormDateField/hooks/useDatePickerController.d.ts

@@ -1,9 +1,12 @@
 import { default as React } from 'react';
+import { useModal } from '../../../../../hooks';
 import { DateInputValue } from './useDateDraft';
 import { useInputFieldController } from './useInputFieldController';
 import { useDateFormats } from './useDateFormats';
+export type PositionSetting = NonNullable<Parameters<typeof useModal>[1]>['position'];
 type PropsType = Pick<ReturnType<typeof useDateFormats>, 'extractDateInputToPickerInputs'> & Pick<ReturnType<typeof useInputFieldController>, 'doubleInputRef'> & {
     disablePicker?: boolean;
+    pickerPosition?: PositionSetting;
 };
 export declare function useDatePickerController(props: PropsType): {
     datePickerRef: React.RefObject<(Pick<{

package/dist/types/src/ui/formFields/dates/FormDateField/hooks/useFormDateFieldProvider.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { FieldPropsType } from '../../../../../hooks';
 import { DatePickerV2 } from '../../../..';
 import { DoubleInputItemProps } from './useInputFieldProps';
+import { PositionSetting } from './useDatePickerController';
 type DatePickerV2Props = React.ComponentProps<typeof DatePickerV2>;
 type ValueBaseType = string;
 type FieldProps = FieldPropsType<ValueBaseType>;
@@ -27,6 +28,7 @@ type PropsType = FieldProps & Pick<DatePickerV2Props, 'requestDaysData' | 'reque
     onDismissClick?: DoubleInputItemProps['onDismissClick'] | false;
     pickerSubtitle?: DatePickerV2Props['subtitle'];
     disablePicker?: boolean;
+    pickerPosition?: PositionSetting;
 };
 export declare function useFormDateFieldProvider(props: PropsType): {
     dateInputValue: import('./useDateDraft').DateInputValue;

package/dist/types/src/ui/formFields/dates/FormDateRangeField/hooks/useDateTimePickerController.d.ts

@@ -1,9 +1,12 @@
 import { default as React } from 'react';
+import { useModal } from '../../../../../hooks';
 import { DateRangeInputValue } from './useDateRangeDraft';
 import { useInputFieldController } from './useInputFieldController';
 import { useDateUtils } from './useDateUtils';
+export type PositionSetting = NonNullable<Parameters<typeof useModal>[1]>['position'];
 type PropsType = Pick<ReturnType<typeof useInputFieldController>, 'doubleInputRef'> & Pick<ReturnType<typeof useDateUtils>, 'extractDateInputToPickerData'> & {
     disablePicker?: boolean;
+    pickerPosition?: PositionSetting;
 };
 export declare function useDateTimePickerController(props: PropsType): {
     dateTimePickerRef: React.RefObject<(Pick<{

package/dist/types/src/ui/formFields/dates/FormDateRangeField/hooks/useFormDateRangeFieldProvider.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { FieldPropsType } from '../../../../../hooks';
 import { DateRangePickerV2 } from '../../../..';
 import { DoubleInputItemProps } from './useInputFieldProps';
+import { PositionSetting } from './useDateTimePickerController';
 type DateRangePickerV2Props = React.ComponentProps<typeof DateRangePickerV2>;
 export type ValueItemType = string;
 export type ValueBaseType = Array<ValueItemType>;
@@ -31,6 +32,7 @@ type PropsType = FieldProps & Pick<DateRangePickerV2Props, 'requestedDaysData' |
     onDismissClick?: DoubleInputItemProps['onDismissClick'] | false;
     pickerSubtitle?: DateRangePickerV2Props['subtitle'];
     disablePicker?: boolean;
+    pickerPosition?: PositionSetting;
 };
 export declare function useFormDateRangeFieldProvider(props: PropsType): {
     fromDateValue: import('./useDateRangeDraft').DateRangeInputValue;

package/dist/types/src/ui/formFields/dates/FormDateTimeField/hooks/useDateTimePickerController.d.ts

@@ -1,10 +1,13 @@
 import { default as React } from 'react';
+import { useModal } from '../../../../../hooks';
 import { DateInputValue, TimeInputValue } from './useDateTimeDraft';
 import { useInputFieldController } from './useInputFieldController';
 import { useDateTimeFormats } from './useDateTimeFormats';
 import { useDateUtils } from './useDateUtils';
+export type PositionSetting = NonNullable<Parameters<typeof useModal>[1]>['position'];
 type PropsType = Pick<ReturnType<typeof useDateTimeFormats>, 'parseTimeInput' | 'parseDateInput'> & Pick<ReturnType<typeof useInputFieldController>, 'doubleInputRef'> & Pick<ReturnType<typeof useDateUtils>, 'extractDateInputValue' | 'extractTimeInputValue'> & {
     disablePicker?: boolean;
+    pickerPosition?: PositionSetting;
 };
 export declare function useDateTimePickerController(props: PropsType): {
     dateTimePickerRef: React.RefObject<(Pick<{

package/dist/types/src/ui/formFields/dates/FormDateTimeField/hooks/useFormDateTimeFieldProvider.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { FieldPropsType } from '../../../../../hooks';
 import { DateTimePickerV2 } from '../../../..';
 import { DoubleInputItemProps } from './useInputFieldProps';
+import { PositionSetting } from './useDateTimePickerController';
 type DateTimePickerV2Props = React.ComponentProps<typeof DateTimePickerV2>;
 type ValueBaseType = string;
 type FieldProps = FieldPropsType<ValueBaseType>;
@@ -37,6 +38,7 @@ type PropsType = FieldProps & Pick<DateTimePickerV2Props, 'requestDaysData' | 'r
     onDismissClick?: DoubleInputItemProps['onDismissClick'] | false;
     pickerSubtitle?: DateTimePickerV2Props['subtitle'];
     disablePicker?: boolean;
+    pickerPosition?: PositionSetting;
 };
 export declare function useFormDateTimeFieldProvider(props: PropsType): {
     dateInputValue: import('./useDateTimeDraft').DateInputValue;

package/dist/types/src/ui/formFields/dates/FormTimeField/hooks/useFormTimeFieldProvider.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { FieldPropsType } from '../../../../../hooks';
 import { TimePickerV2 } from '../../../..';
 import { DoubleInputItemProps } from './useInputFieldProps';
+import { PositionSetting } from './useTimePickerController';
 type TimePickerV2Props = React.ComponentProps<typeof TimePickerV2>;
 type ValueBaseType = string;
 type FieldProps = FieldPropsType<ValueBaseType>;
@@ -27,6 +28,7 @@ type PropsType = FieldProps & {
     onTimeDismissClick?: DoubleInputItemProps['onDismissClick'] | false;
     pickerSubtitle?: TimePickerV2Props['subtitle'];
     disablePicker?: boolean;
+    pickerPosition?: PositionSetting;
 };
 export declare function useFormTimeFieldProvider(props: PropsType): {
     timeInputValue: import('./useTimeDraft').TimeInputValue;

package/dist/types/src/ui/formFields/dates/FormTimeField/hooks/useTimePickerController.d.ts

@@ -1,9 +1,12 @@
 import { default as React } from 'react';
+import { useModal } from '../../../../../hooks';
 import { TimeInputValue } from './useTimeDraft';
 import { useInputFieldController } from './useInputFieldController';
 import { useDateUtils } from './useDateUtils';
+export type PositionSetting = NonNullable<Parameters<typeof useModal>[1]>['position'];
 type PropsType = Pick<ReturnType<typeof useInputFieldController>, 'doubleInputRef'> & Pick<ReturnType<typeof useDateUtils>, 'extractTimeInput'> & {
     disablePicker?: boolean;
+    pickerPosition?: PositionSetting;
 };
 export declare function useTimePickerController(props: PropsType): {
     timePickerRef: React.RefObject<(Pick<{

package/dist/types/src/ui/index.d.ts

@@ -26,7 +26,7 @@ export * from './DateTimePicker';
 export * from './Tooltip';
 export * from './Dropdown';
 export * from './Breadcrumbs';
-export * from './Collapse';
+export * from './Drawer';
 export * from './formFields';
 export * from './DropdownV2';
 export * from './MediaViewerV2';

package/package.json

@@ -11,7 +11,7 @@
     "react-components",
     "ui-kit"
   ],
-  "version": "1.1.18",
+  "version": "1.1.20",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",

package/dist/types/src/hooks/ui-animations/useCollapsible.d.ts

@@ -1,65 +0,0 @@
-import { default as React, CSSProperties } from 'react';
-export type CollapseState = 'open' | 'close';
-type PropsType<W extends HTMLElement, C extends HTMLElement> = {
-    initElState?: CollapseState;
-    wrapperRef: React.RefObject<W | null>;
-    contentRef: React.RefObject<C | null>;
-};
-type FunReturnType = {
-    elState: CollapseState;
-    getElState: () => CollapseState;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-    getContentInitStyle: () => CSSProperties;
-    getWrapperInitStyle: () => CSSProperties;
-};
-/**
- * Хук React для создания сворачиваемых/разворачиваемых UI элементов с GSAP анимациями.
- *
- * @template W - Тип HTML элемента обёртки (контейнер, высота которого изменяется)
- * @template C - Тип HTML элемента контента (внутреннее содержимое, которое сворачивается/разворачивается)
- *
- * @param {Object} props - Параметры хука
- * @param {CollapseState} [props.initElState='open'] - Начальное состояние элемента ('open' или 'close')
- * @param {React.RefObject<W>} props.wrapperRef - Ref объект для элемента обёртки
- * @param {React.RefObject<C>} props.contentRef - Ref объект для элемента контента
- *
- * @returns {Object} Объект интерфейса хука
- * @returns {CollapseState} returns.elState - Текущее состояние ('open' или 'close') - реактивное значение для рендеринга
- * @returns {Function} returns.getElState - Функция получения последнего состояния - используйте в коллбэках для избежания stale closure
- * @returns {Function} returns.open - Открывает элемент с анимацией
- * @returns {Function} returns.close - Закрывает элемент с анимацией
- * @returns {Function} returns.toggle - Переключает между состояниями открыто/закрыто
- *
- * @example
- * ```tsx
- * const wrapperRef = useRef<HTMLDivElement>(null);
- * const contentRef = useRef<HTMLDivElement>(null);
- *
- * const { elState, toggle } = useCollapsible({
- *   initElState: 'close',
- *   wrapperRef,
- *   contentRef
- * });
- *
- * return (
- *   <div>
- *     <button onClick={toggle}>Переключить</button>
- *     <div ref={wrapperRef}>
- *       <div ref={contentRef}>
- *         Сворачиваемый контент здесь
- *       </div>
- *     </div>
- *   </div>
- * );
- * ```
- *
- * @remarks
- * - Автоматически обрабатывает изменение размера контента через ResizeObserver в открытом состоянии
- * - Использует GSAP для плавных анимаций с адаптивной длительностью на основе высоты контента
- * - Элемент обёртки должен иметь overflow: hidden для предотвращения видимости контента при сворачивании
- * - Ref объекты должны быть созданы через useRef перед вызовом хука
- */
-export declare function useCollapsible<W extends HTMLElement, C extends HTMLElement>(props: PropsType<W, C>): FunReturnType;
-export {};

package/dist/types/src/ui/Collapse/hooks/index.d.ts

@@ -1 +0,0 @@
-export * from './useCollapse';

package/dist/types/src/ui/Collapse/hooks/useCollapse.d.ts

@@ -1,19 +0,0 @@
-import { CollapseState } from '../../../hooks';
-type PropsType = [
-    onUpdateState?: (state: CollapseState) => void,
-    initElState?: CollapseState
-];
-export declare function useCollapse<WEl extends HTMLElement, CEl extends HTMLElement>(...args: PropsType): {
-    actions: {
-        elState: CollapseState;
-        getElState: () => CollapseState;
-        open: () => void;
-        close: () => void;
-        toggle: () => void;
-        getContentInitStyle: () => import('react').CSSProperties;
-        getWrapperInitStyle: () => import('react').CSSProperties;
-    };
-    wrapperRef: import('react').RefObject<WEl | null>;
-    contentRef: import('react').RefObject<CEl | null>;
-};
-export {};

package/dist/types/src/ui/Collapse/ui/Collapse.d.ts

@@ -1,60 +0,0 @@
-import { default as React, CSSProperties, ElementType } from 'react';
-import { AsProps } from '../../../types';
-import { CollapseState, useCollapsible } from '../../../hooks';
-type CollapsibleReturnType = ReturnType<typeof useCollapsible>;
-type PropsType<C extends ElementType, W extends ElementType> = AsProps<C, {
-    wrapperAs?: W;
-    wrapperClassName?: string;
-    wrapperStyle?: CSSProperties;
-    onUpdateState?: (state: CollapseState) => void;
-    initialState?: CollapseState;
-    style?: CSSProperties;
-}, React.ComponentRef<C>>;
-type RefType = Omit<CollapsibleReturnType, 'getWrapperInitStyle' | 'getContentInitStyle'>;
-/**
- * Collapse — полиморфный JSX-компонент, являющийся компонентной реализацией хука `useCollapsible`.
- *
- * Компонент рендерит “обёртку” (`wrapperAs`) и “контент” (`as`), создаёт `ref`-ы для обоих элементов
- * и подключает к ним логику сворачивания/разворачивания (анимации/изменение размеров) через `useCollapsible`.
- *
- * @template C Тип элемента/компонента контента (prop `as`).
- * @template W Тип элемента/компонента обёртки (prop `wrapperAs`).
- *
- * @param {object} props Props компонента.
- * @param {C} [props.as='div'] Элемент/компонент для контента. В него пробрасываются остальные props.
- * @param {W} [props.wrapperAs='div'] Элемент/компонент для обёртки (контейнер с изменяемой высотой).
- * @param {string} [props.wrapperClassName] `className` для обёртки.
- * @param {import('react').CSSProperties} [props.wrapperStyle] `style` для обёртки (будет объединён с `{ overflow: 'hidden' }`).
- * @param {(state: import('@/hooks').CollapseState) => void} [props.onUpdateState]
- * Коллбэк, вызываемый при смене состояния (`'open' | 'close'`).
- *
- * @returns {import('react').ReactElement | null} React-элемент или `null`.
- *
- * @ref
- * Ref (imperative API) возвращает объект действий из `useCollapsible`, например:
- * `open()`, `close()`, `toggle()`, `elState`, `getElState()` и связанные методы.
- *
- * @remarks
- * - `as` и `wrapperAs` должны поддерживать `ref` на `HTMLElement` (обычно intrinsic теги или компоненты с `forwardRef`).
- * - Обёртке принудительно задаётся `overflow: hidden` (плюс ваш `wrapperStyle`) для корректного визуального коллапса.
- *
- * @example
- * ```tsx
- * const apiRef = useRef<CollapsibleReturnType>(null);
- *
- * <Collapse
- *   wrapperAs="div"
- *   as="div"
- *   wrapperClassName="my-wrapper"
- *   wrapperStyle={{ willChange: 'height' }}
- *   onUpdateState={(s) => console.log('state:', s)}
- *   ref={apiRef}
- * >
- *   Контент
- * </Collapse>
- *
- * // apiRef.current?.toggle();
- * ```
- */
-export declare const Collapse: <C extends ElementType, W extends ElementType, WEl extends HTMLElement = React.ComponentRef<W> extends HTMLElement ? React.ComponentRef<W> : never, CEl extends HTMLElement = React.ComponentRef<C> extends HTMLElement ? React.ComponentRef<C> : never>(props: PropsType<C, W> & React.RefAttributes<RefType>) => React.ReactElement | null;
-export {};

package/dist/types/src/ui/Collapse/ui/index.d.ts

@@ -1 +0,0 @@
-export * from './Collapse';