@hh.ru/magritte-internal-drop-base 5.0.4 → 5.1.1
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.js +4 -3
- package/DropBase.js.map +1 -1
- package/index.css +1 -1
- package/package.json +2 -2
- package/types.d.ts +6 -0
package/DropBase.js
CHANGED
|
@@ -14,7 +14,7 @@ import '@hh.ru/magritte-common-func-utils';
|
|
|
14
14
|
import '@hh.ru/magritte-common-metrics';
|
|
15
15
|
import './calculateRect.js';
|
|
16
16
|
|
|
17
|
-
var styles = {"drop-base":"magritte-drop-base___uJNG4_5-
|
|
17
|
+
var styles = {"drop-base":"magritte-drop-base___uJNG4_5-1-1","dropBase":"magritte-drop-base___uJNG4_5-1-1"};
|
|
18
18
|
|
|
19
19
|
const EVENTS_TO_PREVENT_BUBBLING = [
|
|
20
20
|
'onClick',
|
|
@@ -59,7 +59,7 @@ const preventBubblingProps = EVENTS_TO_PREVENT_BUBBLING.reduce((result, eventNam
|
|
|
59
59
|
result[eventName] = bubblingCancelHandler;
|
|
60
60
|
return result;
|
|
61
61
|
}, {});
|
|
62
|
-
const DropBaseComponent = ({ visible, children, arrowGuardDistance, activatorRef, host, alignment, direction, preferredViewport, onClose, autoFocusWhenOpened = false, closeByClickOutside = true, animationTimeout, animationClassNames, guardDistance = 8, role, occupyAllAvailableViewportHeight = false, forcePosition = false, widthEqualToActivator = false, arrowNavigation = false, ignoreIntersections = false, style = {}, ...props }, ref) => {
|
|
62
|
+
const DropBaseComponent = ({ visible, children, arrowGuardDistance, activatorRef, host, alignment, direction, preferredViewport, onClose, autoFocusWhenOpened = false, closeByClickOutside = true, animationTimeout, animationClassNames, guardDistance = 8, role, occupyAllAvailableViewportHeight = false, forcePosition = false, widthEqualToActivator = false, arrowNavigation = false, ignoreIntersections = false, style = {}, onAppear, onBeforeExit, onAfterExit, ...props }, ref) => {
|
|
63
63
|
const dropNodeRef = useRef(null);
|
|
64
64
|
const dropScrollableContainerRef = useRef(null);
|
|
65
65
|
const [renderPortal, setRenderPortal] = useState(false);
|
|
@@ -108,7 +108,8 @@ const DropBaseComponent = ({ visible, children, arrowGuardDistance, activatorRef
|
|
|
108
108
|
return (jsx(Fragment, { children: renderPortal &&
|
|
109
109
|
createPortal(jsx(CSSTransition, { in: visible, onEntered: () => {
|
|
110
110
|
setLockClickOutside(false);
|
|
111
|
-
|
|
111
|
+
onAppear?.();
|
|
112
|
+
}, onExited: onAfterExit, onExit: onBeforeExit, timeout: animationTimeout, classNames: animationClassNames, unmountOnExit: true, nodeRef: dropNodeRef, children: jsx("div", { ...props, ...preventBubblingProps, "data-qa": "drop-base", tabIndex: autoFocusWhenOpened ? 0 : -1, className: styles.dropBase, ref: dropNodeRefCallback, style: {
|
|
112
113
|
...style,
|
|
113
114
|
top: `${metrics.top}px`,
|
|
114
115
|
left: `${metrics.left}px`,
|
package/DropBase.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropBase.js","sources":["../src/DropBase.tsx"],"sourcesContent":["import { useEffect, ReactElement, useRef, useState, forwardRef, ForwardedRef, ReactEventHandler } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { useEscapeToClose, useArrowNavigation } 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 { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport { useIntersectionSubscription } from '@hh.ru/magritte-internal-drop-base/intersectionManager';\nimport { useScrollSubscription } from '@hh.ru/magritte-internal-drop-base/scrollManager';\nimport type {\n DropBaseProps,\n DropBaseHorizontalPosition,\n DropBaseVerticalPosition,\n DropBaseHorizontalPositionWithoutCenter,\n DropBaseVerticalPositionWithoutCenter,\n} from '@hh.ru/magritte-internal-drop-base/types';\nimport { useRenderParams } from '@hh.ru/magritte-internal-drop-base/useRenderParams';\n\nimport styles from './styles.less';\n\nconst EVENTS_TO_PREVENT_BUBBLING = [\n 'onClick',\n 'onContextMenu',\n 'onDoubleClick',\n 'onMouseDown',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOver',\n 'onMouseOut',\n 'onMouseUp',\n 'onKeyDown',\n 'onKeyPress',\n 'onKeyUp',\n 'onBlur',\n 'onChange',\n 'onFocus',\n 'onInput',\n 'onInvalid',\n 'onReset',\n 'onSelect',\n 'onSubmit',\n 'onDrag',\n 'onDragEnd',\n 'onDragEnter',\n 'onDragLeave',\n 'onDragOver',\n 'onDragStart',\n 'onDrop',\n 'onCopy',\n 'onCut',\n 'onPaste',\n 'onWheel',\n 'onTouchCancel',\n 'onTouchEnd',\n 'onTouchMove',\n 'onTouchStart',\n] as const;\n\nconst bubblingCancelHandler: ReactEventHandler = (event) => event.stopPropagation();\nconst preventBubblingProps = EVENTS_TO_PREVENT_BUBBLING.reduce((result, eventName) => {\n result[eventName] = bubblingCancelHandler;\n return result;\n}, {} as Record<(typeof EVENTS_TO_PREVENT_BUBBLING)[number], ReactEventHandler>);\n\nconst DropBaseComponent = <\n T extends\n | DropBaseHorizontalPosition\n | DropBaseVerticalPosition\n | DropBaseHorizontalPositionWithoutCenter\n | DropBaseVerticalPositionWithoutCenter\n>(\n {\n visible,\n children,\n arrowGuardDistance,\n activatorRef,\n host,\n alignment,\n direction,\n preferredViewport,\n onClose,\n autoFocusWhenOpened = false,\n closeByClickOutside = true,\n animationTimeout,\n animationClassNames,\n guardDistance = 8,\n role,\n occupyAllAvailableViewportHeight = false,\n forcePosition = false,\n widthEqualToActivator = false,\n arrowNavigation = false,\n ignoreIntersections = false,\n style = {},\n ...props\n }: DropBaseProps<T>,\n ref: ForwardedRef<HTMLElement>\n): ReactElement => {\n const dropNodeRef = useRef<HTMLDivElement>(null);\n const dropScrollableContainerRef = useRef(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 { metrics, position } = useRenderParams({\n alignment,\n direction,\n activatorRef,\n dropElementRef: dropNodeRef,\n host,\n arrowGuardDistance,\n preferredViewport,\n visible: isVisibleDropDown,\n guardDistance,\n occupyAllAvailableViewportHeight,\n dropScrollableContainerRef,\n forcePosition,\n widthEqualToActivator,\n });\n\n useScrollSubscription(activatorRef, dropNodeRef, isVisibleDropDown);\n useIntersectionSubscription(activatorRef, isVisibleDropDown, ignoreIntersections, () => {\n onClose?.();\n });\n\n const escapeToCloseRef = useEscapeToClose(onClose);\n const arrowNavigationRef = useArrowNavigation({\n enabled: isVisibleDropDown && arrowNavigation,\n });\n const dropNodeRefCallback = useMultipleRefs(ref, dropNodeRef, arrowNavigationRef, escapeToCloseRef);\n\n useCloseByClickOutside(\n dropNodeRef,\n () => {\n if (isVisibleDropDown && !lockClickOutside && activatorRef.current !== document.activeElement) {\n onClose?.();\n }\n },\n closeByClickOutside\n );\n\n useEffect(() => {\n if (!isVisibleDropDown) {\n setLockClickOutside(true);\n }\n }, [isVisibleDropDown, setLockClickOutside]);\n\n useEffect(() => {\n if (autoFocusWhenOpened && isVisibleDropDown && !lockClickOutside) {\n dropNodeRef.current?.focus();\n }\n }, [autoFocusWhenOpened, isVisibleDropDown, lockClickOutside]);\n\n return (\n <>\n {renderPortal &&\n createPortal(\n <CSSTransition\n in={visible}\n onEntered={() => {\n setLockClickOutside(false);\n }}\n timeout={animationTimeout}\n classNames={animationClassNames}\n unmountOnExit\n nodeRef={dropNodeRef}\n >\n <div\n {...props}\n {...preventBubblingProps}\n data-qa=\"drop-base\"\n tabIndex={autoFocusWhenOpened ? 0 : -1}\n className={styles.dropBase}\n ref={dropNodeRefCallback}\n style={{\n ...style,\n top: `${metrics.top}px`,\n left: `${metrics.left}px`,\n }}\n role={role}\n >\n {children(position, {\n metrics,\n dropScrollableContainerRef,\n })}\n </div>\n </CSSTransition>,\n host?.current ?? document.body\n )}\n </>\n );\n};\n\nconst DropBase = forwardRef(DropBaseComponent) as (<\n T extends\n | DropBaseHorizontalPosition\n | DropBaseVerticalPosition\n | DropBaseHorizontalPositionWithoutCenter\n | DropBaseVerticalPositionWithoutCenter\n>(\n props: DropBaseProps<T> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement) & { displayName: string };\n\nDropBase.displayName = 'DropBase';\n\nexport { DropBase };\n"],"names":["_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DropBase.js","sources":["../src/DropBase.tsx"],"sourcesContent":["import { useEffect, ReactElement, useRef, useState, forwardRef, ForwardedRef, ReactEventHandler } from 'react';\nimport { createPortal } from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\n\nimport { useEscapeToClose, useArrowNavigation } 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 { useWhenFontLoaded } from '@hh.ru/magritte-common-use-when-font-loaded';\nimport { useIntersectionSubscription } from '@hh.ru/magritte-internal-drop-base/intersectionManager';\nimport { useScrollSubscription } from '@hh.ru/magritte-internal-drop-base/scrollManager';\nimport type {\n DropBaseProps,\n DropBaseHorizontalPosition,\n DropBaseVerticalPosition,\n DropBaseHorizontalPositionWithoutCenter,\n DropBaseVerticalPositionWithoutCenter,\n} from '@hh.ru/magritte-internal-drop-base/types';\nimport { useRenderParams } from '@hh.ru/magritte-internal-drop-base/useRenderParams';\n\nimport styles from './styles.less';\n\nconst EVENTS_TO_PREVENT_BUBBLING = [\n 'onClick',\n 'onContextMenu',\n 'onDoubleClick',\n 'onMouseDown',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOver',\n 'onMouseOut',\n 'onMouseUp',\n 'onKeyDown',\n 'onKeyPress',\n 'onKeyUp',\n 'onBlur',\n 'onChange',\n 'onFocus',\n 'onInput',\n 'onInvalid',\n 'onReset',\n 'onSelect',\n 'onSubmit',\n 'onDrag',\n 'onDragEnd',\n 'onDragEnter',\n 'onDragLeave',\n 'onDragOver',\n 'onDragStart',\n 'onDrop',\n 'onCopy',\n 'onCut',\n 'onPaste',\n 'onWheel',\n 'onTouchCancel',\n 'onTouchEnd',\n 'onTouchMove',\n 'onTouchStart',\n] as const;\n\nconst bubblingCancelHandler: ReactEventHandler = (event) => event.stopPropagation();\nconst preventBubblingProps = EVENTS_TO_PREVENT_BUBBLING.reduce((result, eventName) => {\n result[eventName] = bubblingCancelHandler;\n return result;\n}, {} as Record<(typeof EVENTS_TO_PREVENT_BUBBLING)[number], ReactEventHandler>);\n\nconst DropBaseComponent = <\n T extends\n | DropBaseHorizontalPosition\n | DropBaseVerticalPosition\n | DropBaseHorizontalPositionWithoutCenter\n | DropBaseVerticalPositionWithoutCenter\n>(\n {\n visible,\n children,\n arrowGuardDistance,\n activatorRef,\n host,\n alignment,\n direction,\n preferredViewport,\n onClose,\n autoFocusWhenOpened = false,\n closeByClickOutside = true,\n animationTimeout,\n animationClassNames,\n guardDistance = 8,\n role,\n occupyAllAvailableViewportHeight = false,\n forcePosition = false,\n widthEqualToActivator = false,\n arrowNavigation = false,\n ignoreIntersections = false,\n style = {},\n onAppear,\n onBeforeExit,\n onAfterExit,\n ...props\n }: DropBaseProps<T>,\n ref: ForwardedRef<HTMLElement>\n): ReactElement => {\n const dropNodeRef = useRef<HTMLDivElement>(null);\n const dropScrollableContainerRef = useRef(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 { metrics, position } = useRenderParams({\n alignment,\n direction,\n activatorRef,\n dropElementRef: dropNodeRef,\n host,\n arrowGuardDistance,\n preferredViewport,\n visible: isVisibleDropDown,\n guardDistance,\n occupyAllAvailableViewportHeight,\n dropScrollableContainerRef,\n forcePosition,\n widthEqualToActivator,\n });\n\n useScrollSubscription(activatorRef, dropNodeRef, isVisibleDropDown);\n useIntersectionSubscription(activatorRef, isVisibleDropDown, ignoreIntersections, () => {\n onClose?.();\n });\n\n const escapeToCloseRef = useEscapeToClose(onClose);\n const arrowNavigationRef = useArrowNavigation({\n enabled: isVisibleDropDown && arrowNavigation,\n });\n const dropNodeRefCallback = useMultipleRefs(ref, dropNodeRef, arrowNavigationRef, escapeToCloseRef);\n\n useCloseByClickOutside(\n dropNodeRef,\n () => {\n if (isVisibleDropDown && !lockClickOutside && activatorRef.current !== document.activeElement) {\n onClose?.();\n }\n },\n closeByClickOutside\n );\n\n useEffect(() => {\n if (!isVisibleDropDown) {\n setLockClickOutside(true);\n }\n }, [isVisibleDropDown, setLockClickOutside]);\n\n useEffect(() => {\n if (autoFocusWhenOpened && isVisibleDropDown && !lockClickOutside) {\n dropNodeRef.current?.focus();\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 nodeRef={dropNodeRef}\n >\n <div\n {...props}\n {...preventBubblingProps}\n data-qa=\"drop-base\"\n tabIndex={autoFocusWhenOpened ? 0 : -1}\n className={styles.dropBase}\n ref={dropNodeRefCallback}\n style={{\n ...style,\n top: `${metrics.top}px`,\n left: `${metrics.left}px`,\n }}\n role={role}\n >\n {children(position, {\n metrics,\n dropScrollableContainerRef,\n })}\n </div>\n </CSSTransition>,\n host?.current ?? document.body\n )}\n </>\n );\n};\n\nconst DropBase = forwardRef(DropBaseComponent) as (<\n T extends\n | DropBaseHorizontalPosition\n | DropBaseVerticalPosition\n | DropBaseHorizontalPositionWithoutCenter\n | DropBaseVerticalPositionWithoutCenter\n>(\n props: DropBaseProps<T> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement) & { displayName: string };\n\nDropBase.displayName = 'DropBase';\n\nexport { DropBase };\n"],"names":["_jsx"],"mappings":"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"}
|
package/index.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-internal-drop-base",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.1.1",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"publishConfig": {
|
|
35
35
|
"access": "public"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "a72846c6f393720276c3a8abcbd754142906f5d1"
|
|
38
38
|
}
|
package/types.d.ts
CHANGED
|
@@ -48,6 +48,12 @@ export interface DropBasePermanentProps {
|
|
|
48
48
|
/** Флаг отключающий вызов onClose при пересечении активатора с другим элементом на странице */
|
|
49
49
|
ignoreIntersections?: boolean;
|
|
50
50
|
style?: CSSProperties;
|
|
51
|
+
/** Колбек, который будет вызван после завершения анимации открытия */
|
|
52
|
+
onAppear?: VoidFunction;
|
|
53
|
+
/** Колбек, который будет вызван перед началом анимации закрытия */
|
|
54
|
+
onBeforeExit?: VoidFunction;
|
|
55
|
+
/** Колбек, который будет вызван после анимации закрытия */
|
|
56
|
+
onAfterExit?: VoidFunction;
|
|
51
57
|
}
|
|
52
58
|
export type BaseArrowGuardDistance<K extends DropBaseHorizontalPosition | DropBaseVerticalPosition> = {
|
|
53
59
|
[D in DropBaseProps<K>['direction']]: {
|