indicator-ui 0.1.22 → 0.1.24

package/dist/scss/ui/Buttons/styles/mixins/baseButton.scss

@@ -3,6 +3,7 @@
 @mixin base-button() {
   cursor: pointer;
   transition: background-color ease-out 0.2s;
+  border-radius: 8px;
   @include modify-flex(row, center, center);
 
   .icon {

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

@@ -10,10 +10,10 @@ export * from './useDidUpdateEffect';
 export * from './useSmartPosition';
 export * from './useSmartScroll';
 export * from './useInteractiveZone';
-export * from './useSmartPlacementResolver';
 export * from './useScrollIndicators';
 export * from './ui-animations';
 export * from './modalWindows';
 export * from './controlsInput';
 export * from './elementObservers';
 export * from './simpleRefWork';
+export * from './placement';

package/dist/types/src/hooks/placement/calculateAvailablePosition.d.ts

@@ -0,0 +1,46 @@
+type NewPlacementPosType = {
+    top: number;
+    left: number;
+};
+type WeightTableType = [
+    [
+        number,
+        number,
+        number
+    ],
+    [
+        number,
+        number,
+        number
+    ],
+    [
+        number,
+        number,
+        number
+    ]
+];
+type PropsType = {
+    objRect: {
+        width: number;
+        height: number;
+    };
+    parentRect: {
+        width: number;
+        height: number;
+        top: number;
+        left: number;
+    };
+    windowRect: {
+        width: number;
+        height: number;
+        top: number;
+        left: number;
+    };
+    position?: 'absolute' | 'fixed' | 'relative';
+    offset?: number;
+    weights?: WeightTableType;
+    alignX?: 'left' | 'center' | 'right';
+    alignY?: 'top' | 'center' | 'bottom';
+};
+export declare function calculateAvailablePosition(props: PropsType): NewPlacementPosType;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './useSmartPlacementResolver';
+export * from './calculateAvailablePosition';

package/dist/types/src/hooks/{useSmartPlacementResolver.d.ts → placement/useSmartPlacementResolver.d.ts}

@@ -1,35 +1,12 @@
-import { RefObject } from "react";
-type NewPlacementPosType = {
-    top: number;
-    left: number;
-};
-type WeightTableType = [
-    [
-        number,
-        number,
-        number
-    ],
-    [
-        number,
-        number,
-        number
-    ],
-    [
-        number,
-        number,
-        number
-    ]
-];
+import { CSSProperties, RefObject } from "react";
+import { calculateAvailablePosition } from "./calculateAvailablePosition";
+type CalculateAvailablePositionPropsType = Parameters<typeof calculateAvailablePosition>['0'];
+type NewPlacementPosType = ReturnType<typeof calculateAvailablePosition>;
 type PropsType = [
     ref: RefObject<HTMLElement | null>,
-    options?: {
+    options?: Omit<CalculateAvailablePositionPropsType, 'objRect' | 'parentRect' | 'windowRect'> & {
         parentRef?: RefObject<HTMLElement | null>;
         windowRef?: RefObject<HTMLElement | null>;
-        position?: 'absolute' | 'fixed' | 'relative';
-        offset?: number;
-        weights?: WeightTableType;
-        alignX?: 'left' | 'center' | 'right';
-        alignY?: 'top' | 'center' | 'bottom';
     }
 ];
 type FunReturnType = {
@@ -41,6 +18,10 @@ type FunReturnType = {
      * Просчитывает позицию для объекта
      * */
     calc: () => NewPlacementPosType;
+    /**
+     * Возвращает изначальный стиль объекта
+     * */
+    getInitStyle: () => CSSProperties;
 };
 /**
  * Хук для умного позиционирования элемента.

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

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 type AnimationTypes = 'fade-in-scale-up' | 'slide-up-fade-in' | 'slide-down-fade-in' | 'fade-in';
 type PosType = [number, number];
 type AnimationItemOptionsType = {
@@ -21,6 +22,8 @@ type AnimationItemType = (props: PropsType, timeline: gsap.core.Timeline, option
 type AnimationValueType = {
     appear: AnimationItemType;
     disappear: AnimationItemType;
+    getInitStyle: () => CSSProperties;
+    getBackdropInitStyle: () => CSSProperties;
 };
 type AnimationsType = Record<AnimationTypes, AnimationValueType>;
 export declare const BACKDROP_MODAL_ANIMATIONS: () => AnimationsType;

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

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 type AnimationTypes = 'popover' | 'dropdown' | 'context-menu' | 'action-sheet';
 type PosType = [number, number];
 type AnimationItemOptionsType = {
@@ -17,11 +18,13 @@ type PropsType = {
     targetSize: PosType;
     modalSize: PosType;
     predictPos: PosType;
+    position: 'absolute' | 'fixed' | 'relative';
 };
 type AnimationItemType = (props: PropsType, timeline: gsap.core.Timeline, options?: AnimationItemOptionsType) => gsap.core.Timeline;
 type AnimationValueType = {
     appear: AnimationItemType;
     disappear: AnimationItemType;
+    getInitStyle: (props: Pick<PropsType, 'position'>) => CSSProperties;
 };
 type AnimationsType = Record<AnimationTypes, AnimationValueType>;
 export declare const MODAL_ANIMATIONS: () => AnimationsType;

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

@@ -5,7 +5,6 @@ type MovingOptionsType = {
         left: number;
         top: number;
     };
-    position?: 'absolute' | 'fixed' | 'relative';
 };
 type AnimationItemType = (element: HTMLElement, timeline: TimelineType, options: MovingOptionsType) => TimelineType;
 type AnimationsType = Record<AnimationTypes, AnimationItemType>;

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

@@ -1,5 +1,5 @@
 import { CSSProperties, RefObject } from "react";
-import { useSmartPlacementResolver } from "../useSmartPlacementResolver";
+import { useSmartPlacementResolver } from "../placement/useSmartPlacementResolver";
 import { MODAL_ANIMATIONS } from "./assets";
 type UseSmartPlacementResolverOptionsType = Exclude<Parameters<typeof useSmartPlacementResolver>['1'], undefined>;
 type OptionsType<T extends HTMLElement = HTMLElement> = Pick<UseSmartPlacementResolverOptionsType, 'position'> & {

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

@@ -1,4 +1,4 @@
-import { useSmartPlacementResolver } from "../hooks/useSmartPlacementResolver";
+import { useSmartPlacementResolver } from "../hooks/placement/useSmartPlacementResolver";
 type NewPlacementPosType = {
     top: number;
     left: number;

package/dist/types/src/ui/DateTimePicker/types/DateTimePickerTypes.d.ts

@@ -28,4 +28,5 @@ export type DateTimePickerPropsType = {
      * Тип выбора даты.
      * */
     type?: DateTimePickerTypeTypes;
+    style?: React.CSSProperties;
 };

package/dist/types/src/ui/Dropdown/types/DropdownTypes.d.ts

@@ -22,6 +22,7 @@ export type DropdownPropsBaseType<T> = {
     width?: number | 'fill' | 'hug';
     isActive?: (value: T) => boolean;
     styles?: CSSProperties;
+    style?: CSSProperties;
     className?: string;
     elementAfter?: React.ReactNode;
     elementBefore?: React.ReactNode;

package/dist/types/src/ui/InputFields/DateTimeField/types/DateFieldTypes.d.ts

@@ -1,6 +1,6 @@
 import { DateTimeFieldPropsType } from "../../../../ui";
-import { useSmartPosition } from "../../../../hooks";
-type PositionType = Exclude<Parameters<typeof useSmartPosition>[1], undefined>['position'];
+import { useModal } from "../../../../hooks";
+type PositionType = Exclude<Parameters<typeof useModal>[1], undefined>['position'];
 export type DateFieldPropsType = Omit<DateTimeFieldPropsType, 'iconTime' | 'textTime' | 'timePlaceholder' | 'timeFormat'> & {
     /** Определяет, как будет располагать пикер даты (fixed, absolute).
      * В нужной ситуации можно использовать разные подходы,

package/dist/types/src/ui/InputFields/DateTimeField/types/DateTimeFieldTypes.d.ts

@@ -1,8 +1,8 @@
 import { FieldsBasePropsType } from "../../FieldsBase";
 import { FormatNameType } from "../../../../lib";
 import React from "react";
-import { useSmartPosition } from "../../../../hooks";
-type PositionType = Exclude<Parameters<typeof useSmartPosition>[1], undefined>['position'];
+import { useModal } from "../../../../hooks";
+type PositionType = Exclude<Parameters<typeof useModal>[1], undefined>['position'];
 export type DateTimeFieldValueType = string;
 export type DateTimeFieldPropsType = FieldsBasePropsType<DateTimeFieldValueType> & {
     /**

package/dist/types/src/ui/InputFields/DateTimeField/types/TimeFieldTypes.d.ts

@@ -1,6 +1,6 @@
 import { DateTimeFieldPropsType } from "../../../../ui";
-import { useSmartPosition } from "../../../../hooks";
-type PositionType = Exclude<Parameters<typeof useSmartPosition>[1], undefined>['position'];
+import { useModal } from "../../../../hooks";
+type PositionType = Exclude<Parameters<typeof useModal>[1], undefined>['position'];
 export type TimeFieldPropsType = Omit<DateTimeFieldPropsType, 'iconDate' | 'textDate' | 'datePlaceholder' | 'dateFormat'> & {
     /** Определяет, как будет располагать пикер даты (fixed, absolute).
      * В нужной ситуации можно использовать разные подходы,

package/dist/types/src/ui/InputFields/DateTimeRangeField/types/DateRangeFieldTypes.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { FieldsBasePropsType } from "../../../../ui";
-import { DateTimeRangeFieldValueType } from "./DateTimeRangeFieldTypes";
 import { useModal } from "../../../../hooks";
+import { DateTimeRangeFieldValueType } from "./DateTimeRangeFieldTypes";
 type PositionType = Exclude<Parameters<typeof useModal>[1], undefined>['position'];
 export type DateRangeFieldPropsType = FieldsBasePropsType<DateTimeRangeFieldValueType> & {
     firstPlaceholder?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indicator-ui",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "main": "dist/index.js",
   "types": "dist/types/src/index.d.ts",
   "style": "dist/index.css",