@alfalab/core-components 48.8.0-beta.0 → 48.8.0

package/popover/moderncssm/Component.js

@@ -1,10 +1,13 @@
-import React, { forwardRef, useRef, useState, useMemo, useImperativeHandle } from 'react';
+import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
+import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
-import { offset, flip, shift, size, arrow, useFloating, autoUpdate } from '@floating-ui/react-dom';
+import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
+import maxSize from 'popper-max-size-modifier';
 import { Portal } from '../../portal/moderncssm';
 import { Stack } from '../../stack/moderncssm';
+import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { stackingOrder } from '@alfalab/stack-context';
 import styles from './index.module.css';
 
@@ -17,10 +20,23 @@ const CSS_TRANSITION_CLASS_NAMES = {
     exit: styles.exit,
     exitActive: styles.exitActive,
 };
+const availableHieghtModifier = {
+    name: 'availableHeight',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['maxSize'],
+    fn({ state: { modifiersData, elements: { popper }, }, }) {
+        const { height } = modifiersData.maxSize;
+        const content = popper.querySelector(`.${styles.scrollableContent}`);
+        if (content && !content.style.maxHeight) {
+            content.style.maxHeight = `${height}px`;
+        }
+    },
+};
 const DEFAULT_OFFSET = [0, 0];
 // Минимальное расстояние стрелки до края поповера
 const MIN_DISTANCE_TO_EDGE = 24;
-function getArrowPadding(placement) {
+function getArrowPadding({ placement, }) {
     if (placement === 'right-end' || placement === 'left-end') {
         return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
     }
@@ -35,65 +51,100 @@ function getArrowPadding(placement) {
     }
     return 0;
 }
-function PopoverRender(...[{ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth = false, offset: offsetFromProps = DEFAULT_OFFSET, withArrow = false, withTransition = true, position = 'left', preventFlip = false, popperClassName, arrowClassName, className, open, dataTestId, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, update: updateRef, }, ref,]) {
-    const arrowElementRef = useRef(null);
-    const rootElementRef = useRef(null);
-    const [height, setHeight] = useState();
-    const [width, setWidth] = useState();
-    const floatingMiddlewares = useMemo(() => {
-        const [crossAxis, mainAxis] = offsetFromProps;
-        const middlewares = [
-            offset({ mainAxis, crossAxis }),
-            flip({
-                fallbackPlacements,
-                mainAxis: !preventFlip,
-                flipAlignment: false,
-            }),
-        ];
-        if (!preventOverflow) {
-            middlewares.push(shift());
-        }
-        middlewares.push(size({
-            apply({ availableHeight: nextHeight, rects: { reference } }) {
-                setWidth(reference.width);
-                setHeight(nextHeight);
-            },
-        }));
+const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, }, ref) => {
+    const [referenceElement, setReferenceElement] = useState(anchorElement);
+    const [popperElement, setPopperElement] = useState(null);
+    const [arrowElement, setArrowElement] = useState(null);
+    const updatePopperRef = useRef();
+    const popperRef = useRef(null);
+    const innerRef = useRef(null);
+    const popperModifiers = useMemo(() => {
+        const modifiers = [{ name: 'offset', options: { offset } }];
         if (withArrow) {
-            middlewares.push(arrow((state) => ({
-                element: arrowElementRef,
-                padding: getArrowPadding(state.placement),
-            })));
+            modifiers.push({
+                name: 'arrow',
+                options: {
+                    element: arrowElement,
+                    padding: getArrowPadding,
+                },
+            });
+        }
+        if (preventFlip) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
+        }
+        if (fallbackPlacements) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements } });
+        }
+        if (preventOverflow) {
+            modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
+        }
+        if (availableHeight) {
+            modifiers.push({ ...maxSize, options: {} });
+            modifiers.push({ ...availableHieghtModifier, options: {} });
         }
-        return middlewares;
-    }, [offsetFromProps, fallbackPlacements, preventFlip, withArrow, preventOverflow]);
-    const { floatingStyles, refs, middlewareData, placement, update } = useFloating({
+        return modifiers;
+    }, [
+        offset,
+        withArrow,
+        preventFlip,
+        fallbackPlacements,
+        preventOverflow,
+        availableHeight,
+        arrowElement,
+    ]);
+    const { styles: popperStyles, attributes, update: updatePopper, } = usePopper(referenceElement, popperElement, {
         placement: position,
-        elements: {
-            reference: anchorElement instanceof HTMLElement ? anchorElement : anchorElement?.current,
-        },
-        whileElementsMounted: autoUpdate,
-        middleware: floatingMiddlewares,
-        // strategy 'absolute' causes floating element resize on scroll so used 'fixed'
-        strategy: 'fixed',
+        modifiers: popperModifiers,
     });
-    const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, rootElementRef, refs.setFloating]), style: {
+    if (updatePopper) {
+        updatePopperRef.current = updatePopper;
+    }
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        setReferenceElement(anchorElement);
+    }, [anchorElement]);
+    useEffect(() => {
+        if (updatePopper) {
+            updatePopper();
+        }
+    }, [updatePopper, arrowElement, children]);
+    useEffect(() => {
+        if (update && updatePopper) {
+            // eslint-disable-next-line no-param-reassign
+            update.current = updatePopper;
+        }
+    });
+    useEffect(() => {
+        if (useAnchorWidth) {
+            const updatePopoverWidth = () => updatePopperRef.current?.();
+            const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+            const observer = new ResizeObserver$1(updatePopoverWidth);
+            if (anchorElement) {
+                observer.observe(anchorElement);
+            }
+            return () => {
+                observer.disconnect();
+            };
+        }
+        return () => ({});
+    }, [anchorElement, useAnchorWidth]);
+    const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, popperRef, setPopperElement]), style: {
             zIndex: computedZIndex,
-            width: useAnchorWidth ? width : undefined,
-            ...floatingStyles,
-            ...(floatingStyles.transform ? null : { visibility: 'hidden' }),
-        }, "data-test-id": dataTestId, className: cn(styles.component, className), "data-popper-placement": placement },
-        React.createElement("div", { className: cn(styles.inner, popperClassName), style: transitionDuration === `${DEFAULT_TRANSITION.timeout}ms`
-                ? undefined
-                : { transitionDuration } },
-            React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }), style: { height: availableHeight ? height : undefined } }, children),
-            withArrow && (React.createElement("div", { ref: arrowElementRef, style: {
-                    transform: `translate(${middlewareData.arrow?.x ?? 0}px, ${middlewareData.arrow?.y ?? 0}px)`,
-                }, className: cn(styles.arrow, arrowClassName) })))));
-    useImperativeHandle(updateRef, () => update, [update]);
-    return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, { unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: rootElementRef, ...transition, in: open }, renderContent(computedZIndex))) : (open && renderContent(computedZIndex))))));
-}
-const Popover = forwardRef(PopoverRender);
+            width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
+            ...popperStyles.popper,
+            ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
+        }, "data-test-id": dataTestId, className: cn(styles.component, className), ...attributes.popper },
+        React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
+            React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
+            withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
+    return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, { unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef, ...transition, in: open, onEntering: (node, isAppearing) => {
+            // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
+            if (innerRef.current &&
+                transitionDuration !== `${DEFAULT_TRANSITION.timeout}ms`) {
+                innerRef.current.style.setProperty('transition-duration', transitionDuration);
+            }
+            transition?.onEntering?.(node, isAppearing);
+        } }, renderContent(computedZIndex))) : (open && renderContent(computedZIndex))))));
+});
 Popover.displayName = 'Popover';
 
 export { Popover };

package/popover/moderncssm/index.js

@@ -1,10 +1,13 @@
 export { Popover } from './Component.js';
 import 'react';
 import 'react-merge-refs';
+import 'react-popper';
 import 'react-transition-group';
-import '@floating-ui/react-dom';
+import '@juggle/resize-observer';
 import 'classnames';
+import 'popper-max-size-modifier';
 import '../../portal/moderncssm';
 import '../../stack/moderncssm';
+import '@alfalab/hooks';
 import '@alfalab/stack-context';
 import './index.module.css';

package/popover/moderncssm/index.module.css

@@ -26,8 +26,6 @@
 
 .arrow {
     z-index: 1;
-    position: absolute;
-    bottom: 100%;
 }
 
 .arrow:after {

package/pure-cell/component.js

@@ -6,7 +6,7 @@ require('react-merge-refs');
 require('classnames');
 var coreComponentsComment = require('../comment');
 require('@alfalab/hooks');
-var components_addon_component = require('./component-cc56c025.js');
+var components_addon_component = require('./component-5c929aab.js');
 
 
 

package/pure-cell/components/addon/component.js

@@ -4,7 +4,7 @@ require('tslib');
 require('react');
 require('classnames');
 require('../../../shared');
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/addon/index.d.ts

@@ -1 +1 @@
-export * from "../../component-cc56c025";
+export * from "../../component-5c929aab";

package/pure-cell/components/addon/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/amount/component.js

@@ -6,7 +6,7 @@ require('classnames');
 require('../../../amount');
 require('../../../shared');
 require('../../../typography');
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/amount/index.d.ts

@@ -1 +1 @@
-export * from "../../component-cc56c025";
+export * from "../../component-5c929aab";

package/pure-cell/components/amount/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/amount-title/component.js

@@ -6,7 +6,7 @@ require('classnames');
 require('../../../amount');
 require('../../../shared');
 require('../../../typography');
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/amount-title/index.d.ts

@@ -1 +1 @@
-export * from "../../component-cc56c025";
+export * from "../../component-5c929aab";

package/pure-cell/components/amount-title/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/category/component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('react');
 require('../../../shared');
 require('../../../typography');
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/category/index.d.ts

@@ -1 +1 @@
-export * from "../../component-cc56c025";
+export * from "../../component-5c929aab";

package/pure-cell/components/category/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/content/component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('react');
 require('classnames');
 require('../../../shared');
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/content/index.d.ts

@@ -1 +1 @@
-export * from "../../component-cc56c025";
+export * from "../../component-5c929aab";

package/pure-cell/components/content/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/footer/component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('react');
 require('classnames');
 require('../../../shared');
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/footer/index.d.ts

@@ -1 +1 @@
-export * from "../../component-cc56c025";
+export * from "../../component-5c929aab";

package/pure-cell/components/footer/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/footer-button/component.js

@@ -4,7 +4,7 @@ require('tslib');
 require('react');
 require('../../../button');
 require('../../../shared');
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/footer-button/index.d.ts

@@ -1 +1 @@
-export * from "../../component-cc56c025";
+export * from "../../component-5c929aab";

package/pure-cell/components/footer-button/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/footer-text/component.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('react');
 require('../../../shared');
 require('../../../typography');
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/footer-text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-cc56c025";
+export * from "../../component-5c929aab";

package/pure-cell/components/footer-text/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/graphics/component.js

@@ -4,7 +4,7 @@ require('tslib');
 require('react');
 require('classnames');
 require('../../../shared');
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/graphics/index.d.ts

@@ -1 +1 @@
-export * from "../../component-cc56c025";
+export * from "../../component-5c929aab";

package/pure-cell/components/graphics/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/main/component.js

@@ -4,7 +4,7 @@ require('tslib');
 require('react');
 require('classnames');
 require('../../../shared');
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/main/index.d.ts

@@ -1 +1 @@
-export * from "../../component-cc56c025";
+export * from "../../component-5c929aab";

package/pure-cell/components/main/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/text/component.js

@@ -4,7 +4,7 @@ require('react');
 require('classnames');
 require('../../../shared');
 require('../../../typography');
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-cc56c025";
+export * from "../../component-5c929aab";

package/pure-cell/components/text/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var components_addon_component = require('../../component-cc56c025.js');
+var components_addon_component = require('../../component-5c929aab.js');
 
 
 

package/pure-cell/esm/component.js

@@ -4,7 +4,7 @@ import 'react-merge-refs';
 import 'classnames';
 export { Comment } from '../../comment/esm';
 import '@alfalab/hooks';
-export { c as Addon, A as Amount, b as AmountTitle, e as Category, C as Content, E as ExtraSubtitle, F as Footer, d as FooterButton, G as Graphics, M as Main, P as PureCell, a as PureCellComponent, g as PureCellContext, T as Text } from './component-d128b1a8.js';
+export { c as Addon, A as Amount, b as AmountTitle, e as Category, C as Content, E as ExtraSubtitle, F as Footer, d as FooterButton, G as Graphics, M as Main, P as PureCell, a as PureCellComponent, g as PureCellContext, T as Text } from './component-58b06cd5.js';
 import '../../shared/esm';
 import '../../amount/esm';
 import '../../typography/esm';

package/pure-cell/esm/components/addon/component.js

@@ -2,7 +2,7 @@ import 'tslib';
 import 'react';
 import 'classnames';
 import '../../../../shared/esm';
-export { c as Addon } from '../../component-d128b1a8.js';
+export { c as Addon } from '../../component-58b06cd5.js';
 import 'react-merge-refs';
 import '../../../../comment/esm';
 import '@alfalab/hooks';

package/pure-cell/esm/components/addon/index.d.ts

@@ -1 +1 @@
-export * from "../../component-d128b1a8";
+export * from "../../component-58b06cd5";

package/pure-cell/esm/components/addon/index.js

@@ -1,4 +1,4 @@
-export { c as Addon } from '../../component-d128b1a8.js';
+export { c as Addon } from '../../component-58b06cd5.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/amount/component.js

@@ -4,7 +4,7 @@ import 'classnames';
 import '../../../../amount/esm';
 import '../../../../shared/esm';
 import '../../../../typography/esm';
-export { A as Amount } from '../../component-d128b1a8.js';
+export { A as Amount } from '../../component-58b06cd5.js';
 import 'react-merge-refs';
 import '../../../../comment/esm';
 import '@alfalab/hooks';

package/pure-cell/esm/components/amount/index.d.ts

@@ -1 +1 @@
-export * from "../../component-d128b1a8";
+export * from "../../component-58b06cd5";

package/pure-cell/esm/components/amount/index.js

@@ -1,4 +1,4 @@
-export { A as Amount } from '../../component-d128b1a8.js';
+export { A as Amount } from '../../component-58b06cd5.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/amount-title/component.js

@@ -4,7 +4,7 @@ import 'classnames';
 import '../../../../amount/esm';
 import '../../../../shared/esm';
 import '../../../../typography/esm';
-export { b as AmountTitle } from '../../component-d128b1a8.js';
+export { b as AmountTitle } from '../../component-58b06cd5.js';
 import 'react-merge-refs';
 import '../../../../comment/esm';
 import '@alfalab/hooks';

package/pure-cell/esm/components/amount-title/index.d.ts

@@ -1 +1 @@
-export * from "../../component-d128b1a8";
+export * from "../../component-58b06cd5";

package/pure-cell/esm/components/amount-title/index.js

@@ -1,4 +1,4 @@
-export { b as AmountTitle } from '../../component-d128b1a8.js';
+export { b as AmountTitle } from '../../component-58b06cd5.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/category/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import '../../../../shared/esm';
 import '../../../../typography/esm';
-export { e as Category } from '../../component-d128b1a8.js';
+export { e as Category } from '../../component-58b06cd5.js';
 import 'tslib';
 import 'react-merge-refs';
 import 'classnames';

package/pure-cell/esm/components/category/index.d.ts

@@ -1 +1 @@
-export * from "../../component-d128b1a8";
+export * from "../../component-58b06cd5";

package/pure-cell/esm/components/category/index.js

@@ -1,4 +1,4 @@
-export { e as Category } from '../../component-d128b1a8.js';
+export { e as Category } from '../../component-58b06cd5.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';

package/pure-cell/esm/components/content/component.js

@@ -1,7 +1,7 @@
 import 'react';
 import 'classnames';
 import '../../../../shared/esm';
-export { C as Content } from '../../component-d128b1a8.js';
+export { C as Content } from '../../component-58b06cd5.js';
 import 'tslib';
 import 'react-merge-refs';
 import '../../../../comment/esm';

package/pure-cell/esm/components/content/index.d.ts

@@ -1 +1 @@
-export * from "../../component-d128b1a8";
+export * from "../../component-58b06cd5";

package/pure-cell/esm/components/content/index.js

@@ -1,4 +1,4 @@
-export { C as Content } from '../../component-d128b1a8.js';
+export { C as Content } from '../../component-58b06cd5.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';