@hh.ru/magritte-internal-drop-base 6.0.4 → 7.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DropBase.d.ts +194 -7
- package/DropBase.js +9 -29
- package/DropBase.js.map +1 -1
- package/findBestFitPlacement.d.ts +69 -0
- package/findBestFitPlacement.js +270 -0
- package/findBestFitPlacement.js.map +1 -0
- package/index.css +1 -1
- package/index.d.ts +0 -1
- package/index.js +3 -3
- package/package.json +4 -4
- package/positionManager.d.ts +11 -0
- package/positionManager.js +180 -0
- package/positionManager.js.map +1 -0
- package/types.d.ts +34 -172
- package/useMonitorResize.d.ts +18 -0
- package/useMonitorResize.js +56 -0
- package/useMonitorResize.js.map +1 -0
- package/calculateRect.d.ts +0 -18
- package/calculateRect.js +0 -319
- package/calculateRect.js.map +0 -1
- package/scrollManager.d.ts +0 -8
- package/scrollManager.js +0 -131
- package/scrollManager.js.map +0 -1
- package/useRenderParams.d.ts +0 -53
- package/useRenderParams.js +0 -345
- package/useRenderParams.js.map +0 -1
package/DropBase.d.ts
CHANGED
|
@@ -1,8 +1,195 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare const DropBase: import("react").ForwardRefExoticComponent<{
|
|
3
|
+
visible?: boolean | undefined;
|
|
4
|
+
activatorRef: import("react").RefObject<import("@hh.ru/magritte-internal-drop-base/types").ActivatorElementType>;
|
|
5
|
+
arrowGuardDistance?: Partial<Record<import("@hh.ru/magritte-internal-drop-base/types").VerticalDirection, Record<import("@hh.ru/magritte-internal-drop-base/types").AlignmentForVerticalDirection, number>> & Record<import("@hh.ru/magritte-internal-drop-base/types").HorizontalDirection, Record<import("@hh.ru/magritte-internal-drop-base/types").AlignmentForHorizontalDirection, number>>> | undefined;
|
|
6
|
+
preferredViewport?: import("react").RefObject<HTMLElement> | undefined;
|
|
7
|
+
children: (ref: import("@hh.ru/magritte-internal-drop-base/types").RefCallbackFactory) => import("react").ReactNode;
|
|
8
|
+
onClose?: VoidFunction | undefined;
|
|
9
|
+
closeByClickOutside?: boolean | undefined;
|
|
10
|
+
autoFocusWhenOpened?: boolean | undefined;
|
|
11
|
+
animationClassNames: import("react-transition-group/CSSTransition").CSSTransitionClassNames;
|
|
12
|
+
animationTimeout: number | {
|
|
13
|
+
appear?: number | undefined;
|
|
14
|
+
enter?: number | undefined;
|
|
15
|
+
exit?: number | undefined;
|
|
16
|
+
};
|
|
17
|
+
guardDistanceToActivator?: number | undefined;
|
|
18
|
+
role?: string | undefined;
|
|
19
|
+
widthEqualToActivator?: boolean | undefined;
|
|
20
|
+
keyboardNavigationMode?: import("@hh.ru/magritte-common-keyboard").KeyboardNavigationMode | null | undefined;
|
|
21
|
+
ignoreIntersections?: boolean | undefined;
|
|
22
|
+
style?: import("react").CSSProperties | undefined;
|
|
23
|
+
onAppear?: VoidFunction | undefined;
|
|
24
|
+
onBeforeExit?: VoidFunction | undefined;
|
|
25
|
+
onAfterExit?: VoidFunction | undefined;
|
|
26
|
+
placement: import("@hh.ru/magritte-internal-drop-base/types").Placement | import("@hh.ru/magritte-internal-drop-base/types").Placement[];
|
|
27
|
+
allowShrinkHeightToFitIntoViewport?: boolean | undefined;
|
|
28
|
+
guardDistanceToViewport?: number | undefined;
|
|
29
|
+
minHeight?: number | undefined;
|
|
30
|
+
host?: import("react").RefObject<HTMLElement> | undefined;
|
|
31
|
+
} & {
|
|
32
|
+
onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
33
|
+
onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
34
|
+
onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
35
|
+
onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
36
|
+
onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
37
|
+
onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
38
|
+
onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
39
|
+
onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
40
|
+
onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
41
|
+
onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
42
|
+
onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
43
|
+
onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
44
|
+
onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
45
|
+
onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
46
|
+
onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
47
|
+
onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
48
|
+
onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
49
|
+
onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
50
|
+
onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
51
|
+
onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
52
|
+
onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
53
|
+
onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
54
|
+
onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
55
|
+
onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
56
|
+
onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
57
|
+
onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
58
|
+
onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
59
|
+
onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
60
|
+
onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
61
|
+
onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
62
|
+
onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
63
|
+
onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
64
|
+
onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
65
|
+
onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
66
|
+
onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
67
|
+
onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
68
|
+
onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
69
|
+
onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
70
|
+
onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
71
|
+
onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
72
|
+
onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
73
|
+
onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
74
|
+
onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
75
|
+
onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
76
|
+
onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
77
|
+
onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
78
|
+
onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
79
|
+
onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
80
|
+
onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
81
|
+
onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
82
|
+
onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
83
|
+
onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
84
|
+
onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
85
|
+
onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
86
|
+
onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
87
|
+
onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
88
|
+
onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
89
|
+
onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
90
|
+
onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
91
|
+
onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
92
|
+
onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
93
|
+
onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
94
|
+
onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
95
|
+
onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
96
|
+
onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
97
|
+
onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
98
|
+
onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
99
|
+
onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
100
|
+
onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
101
|
+
onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
102
|
+
onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
103
|
+
onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
104
|
+
onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
105
|
+
onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
106
|
+
onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
107
|
+
onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
108
|
+
onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
109
|
+
onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
110
|
+
onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
111
|
+
onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
112
|
+
onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
113
|
+
onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
114
|
+
onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
115
|
+
onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
116
|
+
onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
117
|
+
onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
118
|
+
onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
119
|
+
onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
120
|
+
onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
121
|
+
onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
122
|
+
onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
123
|
+
onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
124
|
+
onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
125
|
+
onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
126
|
+
onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
127
|
+
onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
128
|
+
onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
129
|
+
onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
130
|
+
onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
131
|
+
onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
132
|
+
onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
133
|
+
onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
134
|
+
onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
135
|
+
onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
136
|
+
onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
137
|
+
onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
138
|
+
onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
139
|
+
onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
140
|
+
onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
141
|
+
onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
142
|
+
onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
143
|
+
onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
144
|
+
onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
145
|
+
onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
146
|
+
onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
147
|
+
onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
148
|
+
onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
149
|
+
onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
150
|
+
onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
151
|
+
onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
152
|
+
onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
153
|
+
onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
154
|
+
onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
155
|
+
onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
156
|
+
onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
157
|
+
onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
158
|
+
onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
159
|
+
onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
160
|
+
onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
161
|
+
onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
162
|
+
onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
163
|
+
onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
164
|
+
onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
165
|
+
onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
166
|
+
onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
167
|
+
onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
168
|
+
onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
169
|
+
onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
170
|
+
onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
171
|
+
onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
172
|
+
onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
173
|
+
onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
174
|
+
onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
175
|
+
onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
176
|
+
onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
177
|
+
onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
178
|
+
onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
179
|
+
onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
180
|
+
onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
181
|
+
onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
182
|
+
onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
183
|
+
onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
184
|
+
onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
|
|
185
|
+
onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
|
|
186
|
+
onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
187
|
+
onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
188
|
+
onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
189
|
+
onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
190
|
+
onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
191
|
+
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
192
|
+
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
193
|
+
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
194
|
+
} & import("react").RefAttributes<HTMLElement>>;
|
|
8
195
|
export { DropBase };
|
package/DropBase.js
CHANGED
|
@@ -9,37 +9,21 @@ import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
|
|
|
9
9
|
import { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';
|
|
10
10
|
import { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';
|
|
11
11
|
import { useIntersectionSubscription } from './intersectionManager.js';
|
|
12
|
-
import {
|
|
13
|
-
import { useRenderParams } from './useRenderParams.js';
|
|
12
|
+
import { usePositionManager } from './positionManager.js';
|
|
14
13
|
import '@hh.ru/magritte-common-func-utils';
|
|
14
|
+
import './findBestFitPlacement.js';
|
|
15
15
|
import '@hh.ru/magritte-common-metrics';
|
|
16
|
-
import './
|
|
16
|
+
import './useMonitorResize.js';
|
|
17
17
|
|
|
18
|
-
var styles = {"drop-base":"magritte-drop-
|
|
18
|
+
var styles = {"drop-base":"magritte-drop-base___uJNG4_7-0-0","dropBase":"magritte-drop-base___uJNG4_7-0-0"};
|
|
19
19
|
|
|
20
|
-
const DropBaseComponent = ({ visible, children, arrowGuardDistance, activatorRef,
|
|
20
|
+
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, ...props }, ref) => {
|
|
21
21
|
const dropNodeRef = useRef(null);
|
|
22
|
-
const dropScrollableContainerRef = useRef(null);
|
|
23
22
|
const [renderPortal, setRenderPortal] = useState(false);
|
|
24
23
|
const isVisibleDropDown = !!(renderPortal && visible);
|
|
25
24
|
const [lockClickOutside, setLockClickOutside] = useState(true);
|
|
26
25
|
useWhenFontLoaded(() => setRenderPortal(true));
|
|
27
|
-
const {
|
|
28
|
-
alignment,
|
|
29
|
-
direction,
|
|
30
|
-
activatorRef,
|
|
31
|
-
dropElementRef: dropNodeRef,
|
|
32
|
-
host,
|
|
33
|
-
arrowGuardDistance,
|
|
34
|
-
preferredViewport,
|
|
35
|
-
visible: isVisibleDropDown,
|
|
36
|
-
guardDistance,
|
|
37
|
-
occupyAllAvailableViewportHeight,
|
|
38
|
-
dropScrollableContainerRef,
|
|
39
|
-
forcePosition,
|
|
40
|
-
widthEqualToActivator,
|
|
41
|
-
});
|
|
42
|
-
useScrollSubscription(activatorRef, dropNodeRef, isVisibleDropDown);
|
|
26
|
+
const { bestFitPlacementRect, resizeRefCallbackFactory } = usePositionManager(activatorRef, dropNodeRef, isVisibleDropDown, placement, preferredViewport, allowShrinkHeightToFitIntoViewport, widthEqualToActivator, arrowGuardDistance || {}, guardDistanceToActivator, guardDistanceToViewport, minHeight);
|
|
43
27
|
useIntersectionSubscription(activatorRef, isVisibleDropDown, ignoreIntersections, () => {
|
|
44
28
|
onClose?.();
|
|
45
29
|
});
|
|
@@ -74,14 +58,10 @@ const DropBaseComponent = ({ visible, children, arrowGuardDistance, activatorRef
|
|
|
74
58
|
createPortal(jsx(CSSTransition, { in: visible, onEntered: () => {
|
|
75
59
|
setLockClickOutside(false);
|
|
76
60
|
onAppear?.();
|
|
77
|
-
}, onExited: onAfterExit, onExit: onBeforeExit, timeout: animationTimeout, classNames: animationClassNames, unmountOnExit: true, nodeRef: dropNodeRef, children: jsx("div", { ...props, ...eventHandlers, "data-qa": "drop-base", tabIndex: autoFocusWhenOpened ? 0 : -1, className: styles.dropBase, ref: dropNodeRefCallback, style: {
|
|
61
|
+
}, onExited: onAfterExit, onExit: onBeforeExit, timeout: animationTimeout, classNames: animationClassNames, unmountOnExit: true, appear: true, nodeRef: dropNodeRef, children: jsx("div", { ...props, ...eventHandlers, "data-qa": "drop-base", tabIndex: autoFocusWhenOpened ? 0 : -1, className: styles.dropBase, ref: dropNodeRefCallback, style: {
|
|
78
62
|
...style,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}, role: role, children: children(position, {
|
|
82
|
-
metrics,
|
|
83
|
-
dropScrollableContainerRef,
|
|
84
|
-
}) }) }), host?.current ?? document.body) }));
|
|
63
|
+
...(bestFitPlacementRect || {}),
|
|
64
|
+
}, role: role, children: children(resizeRefCallbackFactory) }) }), host?.current ?? document.body) }));
|
|
85
65
|
};
|
|
86
66
|
const DropBase = forwardRef(DropBaseComponent);
|
|
87
67
|
DropBase.displayName = 'DropBase';
|
package/DropBase.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropBase.js","sources":["../src/DropBase.tsx"],"sourcesContent":["import { ForwardedRef, ReactElement, forwardRef, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { findNextFocusableElement, useEscapeToClose, useKeyboardNavigation } from '@hh.ru/magritte-common-keyboard';\nimport { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport { useIntersectionSubscription } from '@hh.ru/magritte-internal-drop-base/intersectionManager';\nimport {
|
|
1
|
+
{"version":3,"file":"DropBase.js","sources":["../src/DropBase.tsx"],"sourcesContent":["import { ForwardedRef, ReactElement, forwardRef, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { findNextFocusableElement, useEscapeToClose, useKeyboardNavigation } from '@hh.ru/magritte-common-keyboard';\nimport { useCloseByClickOutside } from '@hh.ru/magritte-common-mouse';\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useNoBubbling } from '@hh.ru/magritte-common-use-no-bubbling';\nimport { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport { useIntersectionSubscription } from '@hh.ru/magritte-internal-drop-base/intersectionManager';\nimport { usePositionManager } from '@hh.ru/magritte-internal-drop-base/positionManager';\nimport type { DropBasePermanentProps } from '@hh.ru/magritte-internal-drop-base/types';\n\nimport styles from './styles.less';\n\nconst DropBaseComponent = (\n {\n visible,\n children,\n arrowGuardDistance,\n activatorRef,\n preferredViewport,\n onClose,\n autoFocusWhenOpened = false,\n closeByClickOutside = true,\n animationTimeout,\n animationClassNames,\n guardDistanceToActivator = 8,\n guardDistanceToViewport = 24,\n minHeight = 200,\n role,\n widthEqualToActivator = false,\n allowShrinkHeightToFitIntoViewport = false,\n keyboardNavigationMode = null,\n ignoreIntersections = false,\n style = {},\n onAppear,\n onBeforeExit,\n onAfterExit,\n host,\n placement,\n ...props\n }: DropBasePermanentProps,\n ref: ForwardedRef<HTMLElement>\n): ReactElement => {\n const dropNodeRef = useRef<HTMLDivElement>(null);\n const [renderPortal, setRenderPortal] = useState(false);\n const isVisibleDropDown = !!(renderPortal && visible);\n const [lockClickOutside, setLockClickOutside] = useState(true);\n\n useWhenFontLoaded(() => setRenderPortal(true));\n\n const { bestFitPlacementRect, resizeRefCallbackFactory } = usePositionManager(\n activatorRef,\n dropNodeRef,\n isVisibleDropDown,\n placement,\n preferredViewport,\n allowShrinkHeightToFitIntoViewport,\n widthEqualToActivator,\n arrowGuardDistance || {},\n guardDistanceToActivator,\n guardDistanceToViewport,\n minHeight\n );\n useIntersectionSubscription(activatorRef, isVisibleDropDown, ignoreIntersections, () => {\n onClose?.();\n });\n\n const escapeToCloseRef = useEscapeToClose(onClose);\n const keyboardNavigationRef = useKeyboardNavigation(\n keyboardNavigationMode !== null\n ? { enabled: isVisibleDropDown, mode: keyboardNavigationMode }\n : { enabled: false }\n );\n const dropNodeRefCallback = useMultipleRefs(ref, dropNodeRef, keyboardNavigationRef, escapeToCloseRef);\n\n useCloseByClickOutside(\n dropNodeRef,\n () => {\n if (isVisibleDropDown && !lockClickOutside && activatorRef.current !== document.activeElement) {\n onClose?.();\n }\n },\n closeByClickOutside\n );\n\n const eventHandlers = useNoBubbling(props);\n\n useEffect(() => {\n if (!isVisibleDropDown) {\n setLockClickOutside(true);\n }\n }, [isVisibleDropDown, setLockClickOutside]);\n\n useEffect(() => {\n if (autoFocusWhenOpened && dropNodeRef.current !== null && isVisibleDropDown && !lockClickOutside) {\n const nextFocusableElement = findNextFocusableElement(dropNodeRef.current, null, 'down', 'list');\n if (nextFocusableElement !== null) {\n nextFocusableElement.focus();\n } else {\n dropNodeRef.current.focus();\n }\n }\n }, [autoFocusWhenOpened, isVisibleDropDown, lockClickOutside]);\n\n return (\n <>\n {renderPortal &&\n createPortal(\n <CSSTransition\n in={visible}\n onEntered={() => {\n setLockClickOutside(false);\n onAppear?.();\n }}\n onExited={onAfterExit}\n onExit={onBeforeExit}\n timeout={animationTimeout}\n classNames={animationClassNames}\n unmountOnExit\n appear\n nodeRef={dropNodeRef}\n >\n <div\n {...props}\n {...eventHandlers}\n data-qa=\"drop-base\"\n tabIndex={autoFocusWhenOpened ? 0 : -1}\n className={styles.dropBase}\n ref={dropNodeRefCallback}\n style={{\n ...style,\n ...(bestFitPlacementRect || {}),\n }}\n role={role}\n >\n {children(resizeRefCallbackFactory)}\n </div>\n </CSSTransition>,\n host?.current ?? document.body\n )}\n </>\n );\n};\n\nconst DropBase = forwardRef<HTMLElement, DropBasePermanentProps>(DropBaseComponent);\n\nDropBase.displayName = 'DropBase';\n\nexport { DropBase };\n"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
import { ActivatorElementType, Placement, ArrowGuardDistance, ParsedPlacement } from '@hh.ru/magritte-internal-drop-base/types';
|
|
3
|
+
interface GetMetricsFunc {
|
|
4
|
+
(args: {
|
|
5
|
+
activatorRef: RefObject<ActivatorElementType>;
|
|
6
|
+
customViewport?: RefObject<HTMLElement>;
|
|
7
|
+
dropRef: RefObject<HTMLElement>;
|
|
8
|
+
}): {
|
|
9
|
+
activatorRect: DOMRect;
|
|
10
|
+
viewportRect: DOMRect;
|
|
11
|
+
offsetParentRect: DOMRect;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
export declare const getMetrics: GetMetricsFunc;
|
|
15
|
+
export interface FindBestFitPlacementFunc {
|
|
16
|
+
(args: {
|
|
17
|
+
/** Список доступных направлений для выпадения, напр.: `['top-left', 'left-bottom']` */
|
|
18
|
+
placements: Placement[];
|
|
19
|
+
/** Содержащий прямоугольник активатора */
|
|
20
|
+
activatorRect: DOMRect;
|
|
21
|
+
/** Содержащий прямоугольник viewport */
|
|
22
|
+
viewportRect: DOMRect;
|
|
23
|
+
/** Содержащий прямоугольник offsetParent дропа */
|
|
24
|
+
offsetParentRect: DOMRect;
|
|
25
|
+
/** Ширина дропа */
|
|
26
|
+
dropWidth: number;
|
|
27
|
+
/** Высота дропа */
|
|
28
|
+
dropHeight: number;
|
|
29
|
+
/** Расстояние от дропа до активатора */
|
|
30
|
+
guardDistanceToActivator: number;
|
|
31
|
+
/** Расстояние от дропа до верхней и нижней границы экрана */
|
|
32
|
+
guardDistanceToViewport: number;
|
|
33
|
+
/** Расстояние от центра стрелки (например в тултипе), до ближайшего края дропа */
|
|
34
|
+
arrowGuardDistance: ArrowGuardDistance;
|
|
35
|
+
/**
|
|
36
|
+
* Минимальная высота дропа, используется для вычисления позиции и размера дропа в случае когда
|
|
37
|
+
* необходимо уместить дроп во `viewport`. Если дроп не умещается во `viewport`, то его высота будет уменьшаться
|
|
38
|
+
* до достижения этого значения. После достижения будет игнорироваться параметр `guardDistanceToViewport`.
|
|
39
|
+
* */
|
|
40
|
+
minDropHeight: number;
|
|
41
|
+
/** Флаг, указывающий что требуется пытаться уместить дроп во viewport за счет изменения его размеров */
|
|
42
|
+
allowShrinkHeightToFitIntoViewport: boolean;
|
|
43
|
+
/** Флаг, указывающий что ширина дропа должна быть равна ширине активатора */
|
|
44
|
+
widthEqualToActivator: boolean;
|
|
45
|
+
prefferedPlacement: Placement | undefined;
|
|
46
|
+
}): {
|
|
47
|
+
/** Содержащий прямоугольник выбранного места размещения дропа. Задает позицию и размер дропа */
|
|
48
|
+
rect: DOMRect;
|
|
49
|
+
/**
|
|
50
|
+
* Вариант из списка переданного в параметре `placements` выбранный в качестве
|
|
51
|
+
* наиболее подходящего для размещения дропа
|
|
52
|
+
* */
|
|
53
|
+
parsedPlacement: ParsedPlacement;
|
|
54
|
+
placement: Placement;
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Функция находит наилучшее расположение для дропа с учетом доступного пространства.
|
|
59
|
+
* Наилучшее расположение выбирается из списка допустимых (`placements`).
|
|
60
|
+
* Алгоритм выбора следующий:
|
|
61
|
+
* - Если дроп полностью умещается на экране при выпадении в соответствующем направлении, то выбирается это направление.
|
|
62
|
+
* - Если таких направлений несколько, то выбирается направление с наименьшим индексом в списке.
|
|
63
|
+
* - Если ни одно из направлений не может полностью уместить дроп, то выбирается направление, которое умещает наибольшую
|
|
64
|
+
* часть дропа по вертикали. Если таких направлений несколько, то среди них выбирается первое направление полностью
|
|
65
|
+
* умещающее дроп по ширине, или умещающее наибольшую часть его ширины.
|
|
66
|
+
*/
|
|
67
|
+
export declare const findBestFitPlacement: FindBestFitPlacementFunc;
|
|
68
|
+
export declare const applyPlacementToDrop: (dropRef: RefObject<HTMLElement>, placement: DOMRect) => void;
|
|
69
|
+
export {};
|