indicator-ui 0.0.347 → 0.0.348

package/dist/types/src/hooks/animations/assets/backdropModalAnimations.d.ts

@@ -0,0 +1,20 @@
+type AnimationTypes = 'fade-in-scale-up' | 'slide-up-fade-in' | 'slide-down-fade-in' | 'fade-in';
+type PosType = [number, number];
+type AnimationItemType = (timeline: gsap.core.Timeline) => gsap.core.Timeline;
+type AnimationValueType = {
+    appear: AnimationItemType;
+    disappear: AnimationItemType;
+};
+type AnimationsType = Record<AnimationTypes, AnimationValueType>;
+type PropsType = {
+    modal: HTMLElement;
+    backdrop: HTMLElement;
+    target: HTMLElement;
+    targetPos: PosType;
+    targetCenter: PosType;
+    targetSize: PosType;
+    modalSize: PosType;
+    predictPos: PosType;
+};
+export declare const BACKDROP_MODAL_ANIMATIONS: (props: PropsType) => AnimationsType;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './modalAnimations';
+export * from './backdropModalAnimations';

package/dist/types/src/hooks/animations/assets/modalAnimations.d.ts

@@ -0,0 +1,20 @@
+type AnimationTypes = 'popover' | 'dropdown' | 'context-menu' | 'action-sheet';
+type PosType = [number, number];
+type AnimationItemType = (timeline: gsap.core.Timeline) => gsap.core.Timeline;
+type AnimationValueType = {
+    appear: AnimationItemType;
+    disappear: AnimationItemType;
+};
+type AnimationsType = Record<AnimationTypes, AnimationValueType>;
+type PropsType = {
+    modal: HTMLElement;
+    backdrop: HTMLElement;
+    target: HTMLElement;
+    targetPos: PosType;
+    targetCenter: PosType;
+    targetSize: PosType;
+    modalSize: PosType;
+    predictPos: PosType;
+};
+export declare const MODAL_ANIMATIONS: (props: PropsType) => AnimationsType;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './useModalAnim';
+export * from './useBackgroundModalAnim';

package/dist/types/src/hooks/animations/useBackgroundModalAnim.d.ts

@@ -0,0 +1,33 @@
+import { RefObject } from "react";
+import { BACKDROP_MODAL_ANIMATIONS } from "./assets";
+type OptionsType<T extends HTMLElement = HTMLElement> = {
+    targetRef?: RefObject<T>;
+    onViewing?: () => void;
+    onHiding?: () => void;
+    backdropClassName?: string;
+    animeType?: AnimationsTypes;
+};
+type PropsType<T extends HTMLElement = HTMLElement> = [ref: RefObject<T>, options?: OptionsType];
+type AnimationsTypes = keyof ReturnType<typeof BACKDROP_MODAL_ANIMATIONS>;
+/**
+ * Хук для анимации backdrop-модального окна.
+ *
+ * ---
+ *
+ * Важные пропсы:
+ * - `ref` - рефка на компонент модалки.
+ * - `targetRef` - рефка на компонент, который вызывает появление модалки.
+ *
+ * ---
+ *
+ * Виды модалок:
+ *
+ * Все очень просто, название за себя говорит, как будет появляться модалка.
+ * Исчезать она будет по такому же принципу, но наоборот.
+ * */
+export declare function useBackgroundModalAnim(...args: PropsType): {
+    appearanceAnim: () => void;
+    disappearanceAnim: () => void;
+    reinit: () => void;
+};
+export {};

package/dist/types/src/hooks/animations/useModalAnim.d.ts

@@ -0,0 +1,40 @@
+import { RefObject } from "react";
+import { useSmartPlacementResolver } from "../useSmartPlacementResolver";
+import { MODAL_ANIMATIONS } from "./assets";
+type UseSmartPlacementResolverOptionsType = Exclude<Parameters<typeof useSmartPlacementResolver>['1'], undefined>;
+type OptionsType<T extends HTMLElement = HTMLElement> = {
+    targetRef?: RefObject<T>;
+    onViewing?: () => void;
+    onHiding?: () => void;
+    smartPlacementOptions?: UseSmartPlacementResolverOptionsType;
+    backdropClassName?: string;
+    animeType?: AnimationsTypes;
+};
+type PropsType<T extends HTMLElement = HTMLElement> = [ref: RefObject<T>, options?: OptionsType];
+type AnimationsTypes = keyof ReturnType<typeof MODAL_ANIMATIONS>;
+/**
+ * Хук для анимации модального окна.
+ *
+ * ---
+ *
+ * Важные пропсы:
+ * - `ref` - рефка на компонент модалки.
+ * - `targetRef` - рефка на компонент, который вызывает появление модалки.
+ *
+ * ---
+ *
+ * Виды модалок:
+ *
+ * - `popover` - хорошо подойдет для подсказок, появляется немного скейлясь.
+ * - `dropdown` - обычный дропдаун.
+ * - `context-menu` - подойдет для быстрого показа списка возможностей, при этом скрывает его немного замедленно,
+ *    чтобы пользователь мог разглядеть его.
+ * - `action-sheet` - какой-то список действий, который требует полной фокусировки, затеняет фон для этого (не затеняет `target`).
+ *    К примеру, модальнрое окна для сообщения в чате.
+ * */
+export declare function useModalAnim(...args: PropsType): {
+    appearanceAnim: () => void;
+    disappearanceAnim: () => void;
+    reinit: () => void;
+};
+export {};

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

@@ -11,3 +11,5 @@ export * from './useSmartScroll';
 export * from './useInteractiveZone';
 export * from './useDidUpdateEffect';
 export * from './useSmartPlacementResolver';
+export * from './animations';
+export * from './modalWindows';

package/dist/types/src/hooks/modalWindows/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useBackdropModal';
+export * from './useModal';

package/dist/types/src/hooks/modalWindows/useBackdropModal.d.ts

@@ -0,0 +1,34 @@
+import { RefObject } from "react";
+import { useBackgroundModalAnim } from "../animations";
+type UseBackgroundModalAnimOptionsPropsType = Exclude<Parameters<typeof useBackgroundModalAnim>['1'], undefined>;
+type OptionsType<T extends HTMLElement = HTMLElement, C extends HTMLElement = HTMLElement> = Pick<UseBackgroundModalAnimOptionsPropsType, 'animeType'> & {
+    targetRef?: RefObject<T>;
+    containerClickAreaRef?: RefObject<C>;
+};
+type PropsType<T extends HTMLElement = HTMLElement> = [ref: RefObject<T>, options?: OptionsType];
+/**
+ * Хук для backdrop-модального окна.
+ *
+ * ---
+ *
+ * Важные пропсы:
+ * - `ref` - рефка на компонент модалки.
+ * - `targetRef` - рефка на компонент, который вызывает появление модалки.
+ * - `containerClickAreaRef` - зона кликов модалки. Поможет, если вы обернули модалку в доп компонент, но клик по нему
+ *    (мимо основной модалки) должен закрывать модалку, в таком случае в `ref` передайте ссылку на обертку,
+ *    а в `containerClickAreaRef` именно на модалку.
+ *
+ * ---
+ *
+ * Виды модалок:
+ *
+ * Все очень просто, название за себя говорит, как будет появляться модалка.
+ * Исчезать она будет по такому же принципу, но наоборот.
+ * */
+export declare function useBackdropModal(...args: PropsType): {
+    isShow: boolean;
+    open: () => void;
+    close: () => void;
+    switching: () => void;
+};
+export {};

package/dist/types/src/hooks/modalWindows/useModal.d.ts

@@ -0,0 +1,37 @@
+import { RefObject } from "react";
+import { useInteractiveZone } from "../useInteractiveZone";
+import { useModalAnim } from "../animations";
+type UseModalAnimOptionsPropsType = Exclude<Parameters<typeof useModalAnim>['1'], undefined>;
+type UseInteractiveZoneOptionsPropsType = Exclude<Parameters<typeof useInteractiveZone>['2'], undefined>;
+type OptionsType<T extends HTMLElement = HTMLElement> = Pick<UseInteractiveZoneOptionsPropsType, 'addition'> & Pick<UseModalAnimOptionsPropsType, 'animeType'> & {
+    targetRef?: RefObject<T>;
+};
+type PropsType<T extends HTMLElement = HTMLElement> = [ref: RefObject<T>, options?: OptionsType];
+/**
+ * Хук для модального окна.
+ *
+ * ---
+ *
+ * Важные пропсы:
+ * - `ref` - рефка на компонент модалки.
+ * - `targetRef` - рефка на компонент, который вызывает появление модалки.
+ * - `addition` - дополнительные элементы, которые будут игнорироваться при мисс-клике.
+ *    (Клик по ним не вызовет закрытие модалки)
+ * ---
+ *
+ * Виды модалок:
+ *
+ * - `popover` - хорошо подойдет для подсказок, появляется немного скейлясь.
+ * - `dropdown` - обычный дропдаун.
+ * - `context-menu` - подойдет для быстрого показа списка возможностей, при этом скрывает его немного замедленно,
+ *    чтобы пользователь мог разглядеть его.
+ * - `action-sheet` - какой-то список действий, который требует полной фокусировки, затеняет фон для этого (не затеняет `target`).
+ *    К примеру, модальнрое окна для сообщения в чате.
+ * */
+export declare function useModal(...args: PropsType): {
+    isShow: boolean;
+    open: () => void;
+    close: () => void;
+    switching: () => void;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indicator-ui",
-  "version": "0.0.347",
+  "version": "0.0.348",
   "main": "dist/index.js",
   "types": "dist/types/src/index.d.ts",
   "style": "dist/index.css",
@@ -38,6 +38,7 @@
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "file-loader": "^6.2.0",
+    "gsap": "^3.13.0",
     "html-loader": "^5.1.0",
     "html-webpack-plugin": "^5.6.3",
     "jest": "^29.7.0",
@@ -77,7 +78,6 @@
     "docs"
   ],
   "dependencies": {
-    "@gsap/react": "^2.1.2",
-    "gsap": "^3.13.0"
+    "@gsap/react": "^2.1.2"
   }
 }