@hh.ru/magritte-internal-drop-base 7.0.17 → 7.0.18

package/DropBase.d.ts

@@ -51,7 +51,7 @@ declare const DropBase: import("react").ForwardRefExoticComponent<{
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -101,8 +101,6 @@ declare const DropBase: import("react").ForwardRefExoticComponent<{
     onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
     onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
     onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
-    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
     onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
     onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
     onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
@@ -172,9 +170,7 @@ declare const DropBase: import("react").ForwardRefExoticComponent<{
     onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
-    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
     onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;

package/DropBase.js

@@ -13,7 +13,7 @@ import { usePositionManager } from './positionManager.js';
 import './findBestFitPlacement.js';
 import './useMonitorResize.js';
 
-var styles = {"drop-base":"magritte-drop-base___uJNG4_7-0-17","dropBase":"magritte-drop-base___uJNG4_7-0-17"};
+var styles = {"drop-base":"magritte-drop-base___uJNG4_7-0-18","dropBase":"magritte-drop-base___uJNG4_7-0-18"};
 
 const DropBaseComponent = ({ visible, children, arrowGuardDistance, activatorRef, preferredViewport, onClose, autoFocusWhenOpened = false, closeByClickOutside = true, animationTimeout, animationClassNames, guardDistanceToActivator = 8, guardDistanceToViewport = 24, minHeight = 200, role, widthEqualToActivator = false, allowShrinkHeightToFitIntoViewport = false, keyboardNavigationMode = null, ignoreIntersections = false, style = {}, onAppear, onBeforeExit, onAfterExit, host, placement, forceDropMetricsUpdate, lockPlacement = false, ...props }, ref) => {
     const dropNodeRef = useRef(null);

package/index.css

@@ -1,4 +1,4 @@
-.magritte-drop-base___uJNG4_7-0-17{
+.magritte-drop-base___uJNG4_7-0-18{
   position:absolute;
   outline:none;
 }

package/index.d.ts

@@ -1,2 +1,3 @@
 export * from '@hh.ru/magritte-internal-drop-base/DropBase';
 export * from '@hh.ru/magritte-internal-drop-base/types';
+export * from '@hh.ru/magritte-internal-drop-base/usePlacements';

package/index.js

@@ -1,5 +1,6 @@
 import './index.css';
 export { DropBase } from './DropBase.js';
+export { usePlacement } from './usePlacements.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'react-dom';
@@ -13,4 +14,5 @@ import './intersectionManager.js';
 import './positionManager.js';
 import './findBestFitPlacement.js';
 import './useMonitorResize.js';
+import './useArrayMemo.js';
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-internal-drop-base",
-  "version": "7.0.17",
+  "version": "7.0.18",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -33,5 +33,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "669ee43046224945e90495ba7f31c22996a92d4a"
+  "gitHead": "4bb5448cb39f50a8b84cec5100fda12a9a45f6c1"
 }

package/useArrayMemo.d.ts

@@ -0,0 +1,3 @@
+export declare const isEqual: (first: unknown[], second: unknown[]) => boolean;
+declare const useArrayMemo: <T, R>(cb: () => R, array: T[], ...restArgs: unknown[]) => R;
+export { useArrayMemo };

package/useArrayMemo.js

@@ -0,0 +1,20 @@
+import './index.css';
+import { useRef } from 'react';
+
+const isEqual = (first, second) => first === second || (first.length === second.length && first.every((e, i) => e === second[i]));
+const useArrayMemo = (cb, array, ...restArgs) => {
+    const prevArrayRef = useRef(array);
+    const prevRestArgsRef = useRef(restArgs);
+    const resultRef = useRef();
+    const isArrayEqual = isEqual(prevArrayRef.current, array);
+    const isRestArgsEqual = isEqual(prevRestArgsRef.current, restArgs);
+    prevArrayRef.current = array;
+    prevRestArgsRef.current = restArgs;
+    if (resultRef.current === undefined || !isArrayEqual || !isRestArgsEqual) {
+        resultRef.current = cb();
+    }
+    return resultRef.current;
+};
+
+export { isEqual, useArrayMemo };
+//# sourceMappingURL=useArrayMemo.js.map

package/useArrayMemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useArrayMemo.js","sources":["../src/useArrayMemo.ts"],"sourcesContent":["import { useRef } from 'react';\n\nexport const isEqual = (first: unknown[], second: unknown[]): boolean =>\n    first === second || (first.length === second.length && first.every((e: unknown, i: number) => e === second[i]));\n\nconst useArrayMemo = <T, R>(cb: () => R, array: T[], ...restArgs: unknown[]): R => {\n    const prevArrayRef = useRef(array);\n    const prevRestArgsRef = useRef(restArgs);\n\n    const resultRef = useRef<undefined | R>();\n\n    const isArrayEqual = isEqual(prevArrayRef.current, array);\n    const isRestArgsEqual = isEqual(prevRestArgsRef.current, restArgs);\n\n    prevArrayRef.current = array;\n    prevRestArgsRef.current = restArgs;\n\n    if (resultRef.current === undefined || !isArrayEqual || !isRestArgsEqual) {\n        resultRef.current = cb();\n    }\n\n    return resultRef.current;\n};\n\nexport { useArrayMemo };\n"],"names":[],"mappings":";;AAEa,MAAA,OAAO,GAAG,CAAC,KAAgB,EAAE,MAAiB,KACvD,KAAK,KAAK,MAAM,KAAK,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAU,EAAE,CAAS,KAAK,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;AAE9G,MAAA,YAAY,GAAG,CAAO,EAAW,EAAE,KAAU,EAAE,GAAG,QAAmB,KAAO;AAC9E,IAAA,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AACnC,IAAA,MAAM,eAAe,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;AAEzC,IAAA,MAAM,SAAS,GAAG,MAAM,EAAiB,CAAC;IAE1C,MAAM,YAAY,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC1D,MAAM,eAAe,GAAG,OAAO,CAAC,eAAe,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAEnE,IAAA,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;AAC7B,IAAA,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAC;AAEnC,IAAA,IAAI,SAAS,CAAC,OAAO,KAAK,SAAS,IAAI,CAAC,YAAY,IAAI,CAAC,eAAe,EAAE;AACtE,QAAA,SAAS,CAAC,OAAO,GAAG,EAAE,EAAE,CAAC;KAC5B;IAED,OAAO,SAAS,CAAC,OAAO,CAAC;AAC7B;;;;"}

package/usePlacements.d.ts

@@ -0,0 +1,2 @@
+import type { Placement } from '@hh.ru/magritte-internal-drop-base/types';
+export declare const usePlacement: (preferredPlacements: Placement[] | Placement, availablePlacements: Set<Placement>, forcePlacement: boolean) => Placement[];

package/usePlacements.js

@@ -0,0 +1,66 @@
+import './index.css';
+import { useArrayMemo } from './useArrayMemo.js';
+import 'react';
+
+const HOR_DIRECTION_ALIGNMENT_PRIORITIES = ['center', 'top', 'bottom'];
+const VER_DIRECTION_ALIGNMENT_PRIORITIES = ['center', 'left', 'right'];
+const PLACEMENTS_MAP = {
+    right: HOR_DIRECTION_ALIGNMENT_PRIORITIES,
+    left: HOR_DIRECTION_ALIGNMENT_PRIORITIES,
+    top: VER_DIRECTION_ALIGNMENT_PRIORITIES,
+    bottom: VER_DIRECTION_ALIGNMENT_PRIORITIES,
+};
+const HOR_DIRECTIONS = ['right', 'left'];
+const VER_DIRECTIONS = ['top', 'bottom'];
+const usePlacement = (preferredPlacements, availablePlacements, forcePlacement) => {
+    const placements = Array.isArray(preferredPlacements) ? preferredPlacements : [preferredPlacements];
+    const result = useArrayMemo(() => {
+        if (forcePlacement) {
+            return placements;
+        }
+        const result = [...placements];
+        const processedDirections = {};
+        // массив, содержащий только уникальные directions из prefferedPlacements в порядке их первого
+        // упоминания в массиве
+        const preferredDirections = placements
+            .map((placement) => placement.split('-')[0])
+            .reduce((result, direction) => {
+            if (processedDirections[direction]) {
+                return result;
+            }
+            processedDirections[direction] = true;
+            result.push(direction);
+            return result;
+        }, []);
+        // Если перечислены не все возможные directions добавляем недостающие
+        // причем если наиболее приоритетный direction был вертикальным, то сначала добавляем вертикальные
+        // иначе горизонтальные
+        if (preferredDirections.length < 4) {
+            const directions = HOR_DIRECTIONS.includes(preferredDirections[0])
+                ? [...HOR_DIRECTIONS, ...VER_DIRECTIONS]
+                : [...VER_DIRECTIONS, ...HOR_DIRECTIONS];
+            for (const direction of directions) {
+                !preferredDirections.includes(direction) && preferredDirections.push(direction);
+            }
+        }
+        // проходимся по всем directions в порядке приоритета
+        // для каждого из них генерируем все placements перебирая alignment в порядке приоритета
+        // для каждого placement проверяем есть ли он в preferredPlacements и в availablePlacements
+        // если нет в preferredPlacements и есть в availablePlacements, то добавляем этот placements к результату
+        // в итоге получаем список placement отсортированный по приоритетам directions в исходном массиве
+        for (const direction of preferredDirections) {
+            const alignments = PLACEMENTS_MAP[direction];
+            for (const alignment of alignments) {
+                const placement = `${direction}-${alignment}`;
+                if (!preferredPlacements.includes(placement) && availablePlacements.has(placement)) {
+                    result.push(placement);
+                }
+            }
+        }
+        return result;
+    }, placements, forcePlacement, availablePlacements);
+    return result;
+};
+
+export { usePlacement };
+//# sourceMappingURL=usePlacements.js.map

package/usePlacements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePlacements.js","sources":["../src/usePlacements.ts"],"sourcesContent":["import type {\n    Placement,\n    VerticalDirection,\n    HorizontalDirection,\n    AlignmentForVerticalDirection,\n    AlignmentForHorizontalDirection,\n} from '@hh.ru/magritte-internal-drop-base/types';\nimport { useArrayMemo } from '@hh.ru/magritte-internal-drop-base/useArrayMemo';\n\nconst HOR_DIRECTION_ALIGNMENT_PRIORITIES = ['center', 'top', 'bottom'] as const;\nconst VER_DIRECTION_ALIGNMENT_PRIORITIES = ['center', 'left', 'right'] as const;\nconst PLACEMENTS_MAP = {\n    right: HOR_DIRECTION_ALIGNMENT_PRIORITIES,\n    left: HOR_DIRECTION_ALIGNMENT_PRIORITIES,\n    top: VER_DIRECTION_ALIGNMENT_PRIORITIES,\n    bottom: VER_DIRECTION_ALIGNMENT_PRIORITIES,\n} as const satisfies { [key in VerticalDirection]: readonly AlignmentForVerticalDirection[] } & {\n    [key in HorizontalDirection]: readonly AlignmentForHorizontalDirection[];\n};\nconst HOR_DIRECTIONS: (VerticalDirection | HorizontalDirection)[] = ['right', 'left'];\nconst VER_DIRECTIONS: (VerticalDirection | HorizontalDirection)[] = ['top', 'bottom'];\n\nexport const usePlacement = (\n    preferredPlacements: Placement[] | Placement,\n    availablePlacements: Set<Placement>,\n    forcePlacement: boolean\n): Placement[] => {\n    const placements = Array.isArray(preferredPlacements) ? preferredPlacements : [preferredPlacements];\n\n    const result = useArrayMemo(\n        () => {\n            if (forcePlacement) {\n                return placements;\n            }\n\n            const result = [...placements];\n            const processedDirections: Record<string, boolean> = {};\n\n            // массив, содержащий только уникальные directions из prefferedPlacements в порядке их первого\n            // упоминания в массиве\n            const preferredDirections = placements\n                .map((placement) => placement.split('-')[0])\n                .reduce<string[]>((result, direction) => {\n                    if (processedDirections[direction]) {\n                        return result;\n                    }\n\n                    processedDirections[direction] = true;\n                    result.push(direction);\n                    return result;\n                }, []) as (VerticalDirection | HorizontalDirection)[];\n\n            // Если перечислены не все возможные directions добавляем недостающие\n            // причем если наиболее приоритетный direction был вертикальным, то сначала добавляем вертикальные\n            // иначе горизонтальные\n            if (preferredDirections.length < 4) {\n                const directions = HOR_DIRECTIONS.includes(preferredDirections[0])\n                    ? [...HOR_DIRECTIONS, ...VER_DIRECTIONS]\n                    : [...VER_DIRECTIONS, ...HOR_DIRECTIONS];\n                for (const direction of directions) {\n                    !preferredDirections.includes(direction) && preferredDirections.push(direction);\n                }\n            }\n\n            // проходимся по всем directions в порядке приоритета\n            // для каждого из них генерируем все placements перебирая alignment в порядке приоритета\n            // для каждого placement проверяем есть ли он в preferredPlacements и в availablePlacements\n            // если нет в preferredPlacements и есть в availablePlacements, то добавляем этот placements к результату\n            // в итоге получаем список placement отсортированный по приоритетам directions в исходном массиве\n            for (const direction of preferredDirections) {\n                const alignments = PLACEMENTS_MAP[direction];\n                for (const alignment of alignments) {\n                    const placement = `${direction}-${alignment}` as Placement;\n                    if (!preferredPlacements.includes(placement) && availablePlacements.has(placement)) {\n                        result.push(placement);\n                    }\n                }\n            }\n\n            return result;\n        },\n        placements,\n        forcePlacement,\n        availablePlacements\n    );\n\n    return result;\n};\n"],"names":[],"mappings":";;;AASA,MAAM,kCAAkC,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAU,CAAC;AAChF,MAAM,kCAAkC,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAU,CAAC;AAChF,MAAM,cAAc,GAAG;AACnB,IAAA,KAAK,EAAE,kCAAkC;AACzC,IAAA,IAAI,EAAE,kCAAkC;AACxC,IAAA,GAAG,EAAE,kCAAkC;AACvC,IAAA,MAAM,EAAE,kCAAkC;CAG7C,CAAC;AACF,MAAM,cAAc,GAAgD,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AACtF,MAAM,cAAc,GAAgD,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAEzE,MAAA,YAAY,GAAG,CACxB,mBAA4C,EAC5C,mBAAmC,EACnC,cAAuB,KACV;AACb,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,mBAAmB,CAAC,GAAG,mBAAmB,GAAG,CAAC,mBAAmB,CAAC,CAAC;AAEpG,IAAA,MAAM,MAAM,GAAG,YAAY,CACvB,MAAK;QACD,IAAI,cAAc,EAAE;AAChB,YAAA,OAAO,UAAU,CAAC;SACrB;AAED,QAAA,MAAM,MAAM,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC;QAC/B,MAAM,mBAAmB,GAA4B,EAAE,CAAC;;;QAIxD,MAAM,mBAAmB,GAAG,UAAU;AACjC,aAAA,GAAG,CAAC,CAAC,SAAS,KAAK,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3C,aAAA,MAAM,CAAW,CAAC,MAAM,EAAE,SAAS,KAAI;AACpC,YAAA,IAAI,mBAAmB,CAAC,SAAS,CAAC,EAAE;AAChC,gBAAA,OAAO,MAAM,CAAC;aACjB;AAED,YAAA,mBAAmB,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;AACtC,YAAA,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AACvB,YAAA,OAAO,MAAM,CAAC;SACjB,EAAE,EAAE,CAAgD,CAAC;;;;AAK1D,QAAA,IAAI,mBAAmB,CAAC,MAAM,GAAG,CAAC,EAAE;YAChC,MAAM,UAAU,GAAG,cAAc,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;AAC9D,kBAAE,CAAC,GAAG,cAAc,EAAE,GAAG,cAAc,CAAC;kBACtC,CAAC,GAAG,cAAc,EAAE,GAAG,cAAc,CAAC,CAAC;AAC7C,YAAA,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE;AAChC,gBAAA,CAAC,mBAAmB,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;aACnF;SACJ;;;;;;AAOD,QAAA,KAAK,MAAM,SAAS,IAAI,mBAAmB,EAAE;AACzC,YAAA,MAAM,UAAU,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;AAC7C,YAAA,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE;AAChC,gBAAA,MAAM,SAAS,GAAG,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,SAAS,EAAe,CAAC;AAC3D,gBAAA,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,mBAAmB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;AAChF,oBAAA,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;iBAC1B;aACJ;SACJ;AAED,QAAA,OAAO,MAAM,CAAC;AAClB,KAAC,EACD,UAAU,EACV,cAAc,EACd,mBAAmB,CACtB,CAAC;AAEF,IAAA,OAAO,MAAM,CAAC;AAClB;;;;"}