@hh.ru/magritte-ui-drop 5.0.8

package/Drop.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement, ForwardedRef } from 'react';
+import { type DropBaseHorizontalPositionWithoutCenter, type DropBaseVerticalPositionWithoutCenter } from '@hh.ru/magritte-internal-drop-base';
+import type { DropProps } from './types';
+declare const Drop: (<T extends DropBaseHorizontalPositionWithoutCenter | DropBaseVerticalPositionWithoutCenter>(props: Omit<import("@hh.ru/magritte-internal-drop-base").DropBasePermanentProps, "arrowGuardDistance" | "children" | "animationTimeout" | "animationClassNames" | "role" | "autoFocusWhenOpened" | "guardDistance" | "occupyAllAvailableViewportHeight"> & T & import("./types").DropPropsOnly & {
+    children?: import("react").ReactNode;
+} & {
+    ref?: ForwardedRef<HTMLElement> | undefined;
+}) => ReactElement | null) & {
+    displayName?: string | undefined;
+};
+export { Drop };

package/Drop.js

@@ -0,0 +1,51 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { DropBase, INITIAL_HEIGHT_VALUE } from '@hh.ru/magritte-internal-drop-base';
+import { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';
+import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
+import { s as styles, D as DropContainer } from './DropContainer-931ee089.js';
+import { PureChildren } from './PureChildren.js';
+import { Layer } from '@hh.ru/magritte-ui-layer';
+import '@hh.ru/magritte-ui-divider';
+
+const DropComponent = ({ direction, alignment, visible, host, activatorRef, onClose, maxWidth = 320, minHeightForContent = 300, space = 600, children, footer, role = 'dialog', dividerState = 'show', widthEqualToActivator = false, closeByClickOutside = true, 'data-qa': dataQA = 'drop', ...props }, ref) => {
+    const { isMobile } = useBreakpoint();
+    const footerRef = useRef(null);
+    const [animationTimeout, setAnimationTimeout] = useState(200);
+    useEffect(() => {
+        const animationTimeoutElement = document.createElement('div');
+        animationTimeoutElement.classList.add(styles.dropAnimationTimeout);
+        document.body.appendChild(animationTimeoutElement);
+        const style = window.getComputedStyle(animationTimeoutElement);
+        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);
+        if (Number.isInteger(animationTimeout)) {
+            setAnimationTimeout(animationTimeout);
+        }
+        document.body.removeChild(animationTimeoutElement);
+    }, []);
+    if (isMobile) {
+        return null;
+    }
+    const position = { direction, alignment };
+    return (jsx(Layer, { layer: InternalLayerName.Drop, children: jsx(DropBase, { ...props, ...position, visible: visible, host: host, activatorRef: activatorRef, closeByClickOutside: closeByClickOutside, onClose: onClose, autoFocusWhenOpened: role !== 'status', occupyAllAvailableViewportHeight: true, animationClassNames: {
+                enter: styles.dropEnter,
+                enterActive: styles.dropEnterActive,
+                exit: styles.dropExit,
+                exitActive: styles.dropExitActive,
+            }, animationTimeout: animationTimeout, widthEqualToActivator: widthEqualToActivator, ref: ref, children: ({ direction }, { metrics, dropScrollableContainerRef }) => (jsxs("div", { className: classnames(`${styles.drop} ${styles[`drop-direction-${direction}`]}`, {
+                    [styles.dropSpace300]: space === 300,
+                    [styles.dropSpace400]: space === 400,
+                    [styles.dropSpace600]: space === 600,
+                    [styles.dropWithFooter]: !!footer,
+                }), style: {
+                    maxWidth: widthEqualToActivator ? 'none' : maxWidth,
+                    maxHeight: metrics.height === INITIAL_HEIGHT_VALUE ? 'auto' : `${metrics.height}px`,
+                }, "data-qa": dataQA, children: [jsx(DropContainer, { height: metrics.height === INITIAL_HEIGHT_VALUE ? undefined : metrics.height, dividerState: !footer ? 'hide' : dividerState, ref: dropScrollableContainerRef, minHeightForContent: minHeightForContent, children: jsx(PureChildren, { children: children }) }), footer && (jsx("div", { ref: footerRef, className: styles.dropFooter, children: jsx(PureChildren, { children: footer }) }))] })) }) }));
+};
+const Drop = forwardRef(DropComponent);
+Drop.displayName = 'Drop';
+
+export { Drop };
+//# sourceMappingURL=Drop.js.map

package/Drop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drop.js","sources":["../src/Drop.tsx"],"sourcesContent":["import { useRef, useEffect, useState, type ReactElement, ForwardedRef, forwardRef } from 'react';\nimport classnames from 'classnames';\n\nimport {\n    DropBase,\n    INITIAL_HEIGHT_VALUE,\n    type DropBaseHorizontalPositionWithoutCenter,\n    type DropBaseVerticalPositionWithoutCenter,\n} from '@hh.ru/magritte-internal-drop-base';\nimport { InternalLayerName } from '@hh.ru/magritte-internal-layer-name';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { DropContainer } from '@hh.ru/magritte-ui-drop/DropContainer';\nimport { PureChildren } from '@hh.ru/magritte-ui-drop/PureChildren';\nimport type { DropProps } from '@hh.ru/magritte-ui-drop/types';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\n\nimport styles from './drop.less';\n\nconst DropComponent = <T extends DropBaseHorizontalPositionWithoutCenter | DropBaseVerticalPositionWithoutCenter>(\n    {\n        direction,\n        alignment,\n        visible,\n        host,\n        activatorRef,\n        onClose,\n        maxWidth = 320,\n        minHeightForContent = 300,\n        space = 600,\n        children,\n        footer,\n        role = 'dialog',\n        dividerState = 'show',\n        widthEqualToActivator = false,\n        closeByClickOutside = true,\n        'data-qa': dataQA = 'drop',\n        ...props\n    }: DropProps<T>,\n    ref: ForwardedRef<HTMLElement>\n): ReactElement | null => {\n    const { isMobile } = useBreakpoint();\n    const footerRef = useRef<HTMLDivElement>(null);\n    const [animationTimeout, setAnimationTimeout] = useState(200);\n\n    useEffect(() => {\n        const animationTimeoutElement = document.createElement('div');\n        animationTimeoutElement.classList.add(styles.dropAnimationTimeout);\n        document.body.appendChild(animationTimeoutElement);\n        const style = window.getComputedStyle(animationTimeoutElement);\n        const animationTimeout = parseInt(style.getPropertyValue(`--animation-duration`), 10);\n        if (Number.isInteger(animationTimeout)) {\n            setAnimationTimeout(animationTimeout);\n        }\n        document.body.removeChild(animationTimeoutElement);\n    }, []);\n\n    if (isMobile) {\n        return null;\n    }\n\n    const position = { direction, alignment } as\n        | DropBaseVerticalPositionWithoutCenter\n        | DropBaseHorizontalPositionWithoutCenter;\n\n    return (\n        <Layer layer={InternalLayerName.Drop}>\n            <DropBase\n                {...props}\n                {...position}\n                visible={visible}\n                host={host}\n                activatorRef={activatorRef}\n                closeByClickOutside={closeByClickOutside}\n                onClose={onClose}\n                autoFocusWhenOpened={role !== 'status'}\n                occupyAllAvailableViewportHeight\n                animationClassNames={{\n                    enter: styles.dropEnter,\n                    enterActive: styles.dropEnterActive,\n                    exit: styles.dropExit,\n                    exitActive: styles.dropExitActive,\n                }}\n                animationTimeout={animationTimeout}\n                widthEqualToActivator={widthEqualToActivator}\n                ref={ref}\n            >\n                {({ direction }, { metrics, dropScrollableContainerRef }) => (\n                    <div\n                        className={classnames(`${styles.drop} ${styles[`drop-direction-${direction}`]}`, {\n                            [styles.dropSpace300]: space === 300,\n                            [styles.dropSpace400]: space === 400,\n                            [styles.dropSpace600]: space === 600,\n                            [styles.dropWithFooter]: !!footer,\n                        })}\n                        style={{\n                            maxWidth: widthEqualToActivator ? 'none' : maxWidth,\n                            maxHeight: metrics.height === INITIAL_HEIGHT_VALUE ? 'auto' : `${metrics.height}px`,\n                        }}\n                        data-qa={dataQA}\n                    >\n                        <DropContainer\n                            height={metrics.height === INITIAL_HEIGHT_VALUE ? undefined : metrics.height}\n                            dividerState={!footer ? 'hide' : dividerState}\n                            ref={dropScrollableContainerRef}\n                            minHeightForContent={minHeightForContent}\n                        >\n                            <PureChildren>{children}</PureChildren>\n                        </DropContainer>\n                        {footer && (\n                            <div ref={footerRef} className={styles.dropFooter}>\n                                <PureChildren>{footer}</PureChildren>\n                            </div>\n                        )}\n                    </div>\n                )}\n            </DropBase>\n        </Layer>\n    );\n};\n\nconst Drop = forwardRef(DropComponent) as (<\n    T extends DropBaseHorizontalPositionWithoutCenter | DropBaseVerticalPositionWithoutCenter\n>(\n    props: DropProps<T> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement | null) & { displayName?: string };\n\nDrop.displayName = 'Drop';\n\nexport { Drop };\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/DropContainer-931ee089.js

@@ -0,0 +1,36 @@
+import './index.css';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect } from 'react';
+import { Divider } from '@hh.ru/magritte-ui-divider';
+
+var styles = {"drop":"magritte-drop___Z10P4_5-0-8","drop-container":"magritte-drop-container___dbMt9_5-0-8","dropContainer":"magritte-drop-container___dbMt9_5-0-8","drop-footer":"magritte-drop-footer___v8ZEO_5-0-8","dropFooter":"magritte-drop-footer___v8ZEO_5-0-8","drop-space-300":"magritte-drop-space-300___41acH_5-0-8","dropSpace300":"magritte-drop-space-300___41acH_5-0-8","drop-space-400":"magritte-drop-space-400___XX1RM_5-0-8","dropSpace400":"magritte-drop-space-400___XX1RM_5-0-8","drop-padding":"magritte-drop-padding___xBiJO_5-0-8","dropPadding":"magritte-drop-padding___xBiJO_5-0-8","drop-space-600":"magritte-drop-space-600___6B1i0_5-0-8","dropSpace600":"magritte-drop-space-600___6B1i0_5-0-8","drop-with-footer":"magritte-drop-with-footer___CgBIV_5-0-8","dropWithFooter":"magritte-drop-with-footer___CgBIV_5-0-8","drop-enter":"magritte-drop-enter___4vEuH_5-0-8","dropEnter":"magritte-drop-enter___4vEuH_5-0-8","drop-exit":"magritte-drop-exit___brFjz_5-0-8","dropExit":"magritte-drop-exit___brFjz_5-0-8","drop-enter-active":"magritte-drop-enter-active___SQUog_5-0-8","dropEnterActive":"magritte-drop-enter-active___SQUog_5-0-8","drop-exit-active":"magritte-drop-exit-active___GB0ET_5-0-8","dropExitActive":"magritte-drop-exit-active___GB0ET_5-0-8","drop-animation-timeout":"magritte-drop-animation-timeout___uO7LF_5-0-8","dropAnimationTimeout":"magritte-drop-animation-timeout___uO7LF_5-0-8","drop-direction-top":"magritte-drop-direction-top___3CelS_5-0-8","dropDirectionTop":"magritte-drop-direction-top___3CelS_5-0-8","drop-direction-bottom":"magritte-drop-direction-bottom___719rs_5-0-8","dropDirectionBottom":"magritte-drop-direction-bottom___719rs_5-0-8","drop-direction-left":"magritte-drop-direction-left___2PTob_5-0-8","dropDirectionLeft":"magritte-drop-direction-left___2PTob_5-0-8","drop-direction-right":"magritte-drop-direction-right___SPOr1_5-0-8","dropDirectionRight":"magritte-drop-direction-right___SPOr1_5-0-8"};
+
+const DropContainer = forwardRef(({ children, height, dividerState, minHeightForContent }, ref) => {
+    const dividerRef = useRef(null);
+    const showDivider = dividerState !== 'hide';
+    useEffect(() => {
+        if (showDivider && ref && 'current' in ref && ref?.current !== null && dividerRef.current && !!height) {
+            const hasScroll = ref.current.scrollHeight - ref.current.clientHeight > 0;
+            dividerRef.current.style.visibility = hasScroll ? 'visible' : 'hidden';
+        }
+    }, [ref, dividerRef, height, showDivider]);
+    const props = showDivider
+        ? {
+            onScroll: ({ target }) => {
+                const scrollableContainer = target;
+                if (dividerRef.current && dividerState !== 'showWhenFullyScrolled') {
+                    const scrollEnded = scrollableContainer.scrollTop +
+                        scrollableContainer.offsetHeight -
+                        scrollableContainer.scrollHeight ===
+                        0;
+                    dividerRef.current.style.visibility = scrollEnded ? 'hidden' : 'visible';
+                }
+            },
+        }
+        : {};
+    return (jsxs(Fragment, { children: [jsx("div", { ref: ref, className: styles.dropContainer, style: { height: height === undefined ? `${minHeightForContent}px` : 'auto' }, ...props, children: children }), showDivider && (jsx("div", { ref: dividerRef, "data-qa": "drop-divider", children: jsx(Divider, {}) }))] }));
+});
+DropContainer.displayName = 'DropContainer';
+
+export { DropContainer as D, styles as s };
+//# sourceMappingURL=DropContainer-931ee089.js.map

package/DropContainer-931ee089.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropContainer-931ee089.js","sources":["../src/DropContainer.tsx"],"sourcesContent":["import { useRef, PropsWithChildren, useEffect, forwardRef } from 'react';\n\nimport { Divider } from '@hh.ru/magritte-ui-divider';\nimport type { DividerState } from '@hh.ru/magritte-ui-drop/types';\n\nimport styles from './drop.less';\n\nexport const DropContainer = forwardRef<\n    HTMLDivElement,\n    PropsWithChildren<{\n        height?: number | string;\n        dividerState: DividerState;\n        minHeightForContent: number;\n    }>\n>(({ children, height, dividerState, minHeightForContent }, ref) => {\n    const dividerRef = useRef<HTMLDivElement>(null);\n    const showDivider = dividerState !== 'hide';\n\n    useEffect(() => {\n        if (showDivider && ref && 'current' in ref && ref?.current !== null && dividerRef.current && !!height) {\n            const hasScroll = ref.current.scrollHeight - ref.current.clientHeight > 0;\n            dividerRef.current.style.visibility = hasScroll ? 'visible' : 'hidden';\n        }\n    }, [ref, dividerRef, height, showDivider]);\n\n    const props = showDivider\n        ? {\n              onScroll: ({ target }: { target: EventTarget }) => {\n                  const scrollableContainer = target as HTMLDivElement;\n\n                  if (dividerRef.current && dividerState !== 'showWhenFullyScrolled') {\n                      const scrollEnded =\n                          scrollableContainer.scrollTop +\n                              scrollableContainer.offsetHeight -\n                              scrollableContainer.scrollHeight ===\n                          0;\n\n                      dividerRef.current.style.visibility = scrollEnded ? 'hidden' : 'visible';\n                  }\n              },\n          }\n        : {};\n\n    return (\n        <>\n            <div\n                ref={ref}\n                className={styles.dropContainer}\n                style={{ height: height === undefined ? `${minHeightForContent}px` : 'auto' }}\n                {...props}\n            >\n                {children}\n            </div>\n            {showDivider && (\n                <div ref={dividerRef} data-qa=\"drop-divider\">\n                    <Divider />\n                </div>\n            )}\n        </>\n    );\n});\n\nDropContainer.displayName = 'DropContainer';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;AAOa,MAAA,aAAa,GAAG,UAAU,CAOrC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,EAAE,GAAG,KAAI;AAC/D,IAAA,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;AAChD,IAAA,MAAM,WAAW,GAAG,YAAY,KAAK,MAAM,CAAC;IAE5C,SAAS,CAAC,MAAK;QACX,IAAI,WAAW,IAAI,GAAG,IAAI,SAAS,IAAI,GAAG,IAAI,GAAG,EAAE,OAAO,KAAK,IAAI,IAAI,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,EAAE;AACnG,YAAA,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC,YAAY,GAAG,GAAG,CAAC,OAAO,CAAC,YAAY,GAAG,CAAC,CAAC;AAC1E,YAAA,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC1E,SAAA;KACJ,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IAE3C,MAAM,KAAK,GAAG,WAAW;AACrB,UAAE;AACI,YAAA,QAAQ,EAAE,CAAC,EAAE,MAAM,EAA2B,KAAI;gBAC9C,MAAM,mBAAmB,GAAG,MAAwB,CAAC;AAErD,gBAAA,IAAI,UAAU,CAAC,OAAO,IAAI,YAAY,KAAK,uBAAuB,EAAE;AAChE,oBAAA,MAAM,WAAW,GACb,mBAAmB,CAAC,SAAS;AACzB,wBAAA,mBAAmB,CAAC,YAAY;AAChC,wBAAA,mBAAmB,CAAC,YAAY;AACpC,wBAAA,CAAC,CAAC;AAEN,oBAAA,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC5E,iBAAA;aACJ;AACJ,SAAA;UACD,EAAE,CAAC;IAET,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,KAAK,SAAS,GAAG,CAAA,EAAG,mBAAmB,CAAA,EAAA,CAAI,GAAG,MAAM,EAAE,EACzE,GAAA,KAAK,EAER,QAAA,EAAA,QAAQ,EACP,CAAA,EACL,WAAW,KACRA,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,UAAU,EAAU,SAAA,EAAA,cAAc,EACxC,QAAA,EAAAA,GAAA,CAAC,OAAO,EAAA,EAAA,CAAG,EACT,CAAA,CACT,CACF,EAAA,CAAA,EACL;AACN,CAAC,EAAE;AAEH,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

package/DropContainer.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { DividerState } from './types';
+export declare const DropContainer: import("react").ForwardRefExoticComponent<{
+    height?: string | number | undefined;
+    dividerState: DividerState;
+    minHeightForContent: number;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/DropContainer.js

@@ -0,0 +1,6 @@
+import './index.css';
+import 'react/jsx-runtime';
+import 'react';
+import '@hh.ru/magritte-ui-divider';
+export { D as DropContainer } from './DropContainer-931ee089.js';
+//# sourceMappingURL=DropContainer.js.map

package/DropContainer.js.map

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

package/PureChildren.d.ts

@@ -0,0 +1,3 @@
+import { type FC, type PropsWithChildren } from 'react';
+declare const PureChildren: FC<PropsWithChildren>;
+export { PureChildren };

package/PureChildren.js

@@ -0,0 +1,9 @@
+import './index.css';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const PureChildren = memo(({ children }) => jsx(Fragment, { children: children }));
+PureChildren.displayName = 'PureChildren';
+
+export { PureChildren };
+//# sourceMappingURL=PureChildren.js.map

package/PureChildren.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PureChildren.js","sources":["../src/PureChildren.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo } from 'react';\n\nconst PureChildren: FC<PropsWithChildren> = memo(({ children }) => <>{children}</>);\n\nPureChildren.displayName = 'PureChildren';\n\nexport { PureChildren };\n"],"names":["_jsx","_Fragment"],"mappings":";;;AAEA,MAAM,YAAY,GAA0B,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAKA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAI,EAAE;AAEpF,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/index.css

@@ -0,0 +1,126 @@
+:root{
+  --magritte-color-component-drop-background-content-v18-1-1:#ffffff;
+  --magritte-shadow-level-2-color-v18-1-1:#7090b03d;
+  --magritte-shadow-level-2-x-v18-1-1:0px;
+  --magritte-shadow-level-2-y-v18-1-1:8px;
+  --magritte-shadow-level-2-blur-v18-1-1:16px;
+  --magritte-shadow-level-2-spread-v18-1-1:0px;
+}
+:root{
+  --magritte-semantic-animation-ease-in-out-100-duration-v18-1-1:100ms;
+  --magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-1:cubic-bezier(0.25, 0.1, 0.25, 1);
+  --magritte-semantic-animation-ease-in-out-200-duration-v18-1-1:200ms;
+  --magritte-static-space-300-v18-1-1:12px;
+  --magritte-static-space-400-v18-1-1:16px;
+  --magritte-static-space-600-v18-1-1:24px;
+  --magritte-static-border-radius-600-v18-1-1:24px;
+}
+.magritte-night-theme{
+  --magritte-color-component-drop-background-content-v18-1-1:#1B1B1B;
+  --magritte-shadow-level-2-color-v18-1-1:#0000003d;
+  --magritte-shadow-level-2-x-v18-1-1:0px;
+  --magritte-shadow-level-2-y-v18-1-1:8px;
+  --magritte-shadow-level-2-blur-v18-1-1:16px;
+  --magritte-shadow-level-2-spread-v18-1-1:0px;
+}
+.magritte-drop___Z10P4_5-0-8{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  background:var(--magritte-color-component-drop-background-content-v18-1-1);
+  border-radius:var(--magritte-static-border-radius-600-v18-1-1);
+  box-shadow:var(--magritte-shadow-level-2-x-v18-1-1) var(--magritte-shadow-level-2-y-v18-1-1) var(--magritte-shadow-level-2-blur-v18-1-1) var(--magritte-shadow-level-2-spread-v18-1-1) var(--magritte-shadow-level-2-color-v18-1-1);
+  box-sizing:border-box;
+  overflow:hidden;
+}
+.magritte-drop-container___dbMt9_5-0-8{
+  display:block;
+  overflow:auto;
+}
+.magritte-drop-footer___v8ZEO_5-0-8{
+  display:flex;
+  flex-flow:column;
+  gap:12px;
+}
+.magritte-drop-space-300___41acH_5-0-8 .magritte-drop-container___dbMt9_5-0-8,
+.magritte-drop-space-300___41acH_5-0-8 .magritte-drop-footer___v8ZEO_5-0-8{
+  padding:var(--magritte-static-space-300-v18-1-1);
+}
+.magritte-drop-space-400___XX1RM_5-0-8 .magritte-drop-padding___xBiJO_5-0-8,
+.magritte-drop-space-400___XX1RM_5-0-8 .magritte-drop-container___dbMt9_5-0-8,
+.magritte-drop-space-400___XX1RM_5-0-8 .magritte-drop-footer___v8ZEO_5-0-8{
+  padding:var(--magritte-static-space-400-v18-1-1);
+}
+.magritte-drop-space-600___6B1i0_5-0-8 .magritte-drop-padding___xBiJO_5-0-8,
+.magritte-drop-space-600___6B1i0_5-0-8 .magritte-drop-container___dbMt9_5-0-8,
+.magritte-drop-space-600___6B1i0_5-0-8 .magritte-drop-footer___v8ZEO_5-0-8{
+  padding:var(--magritte-static-space-600-v18-1-1);
+}
+.magritte-drop-with-footer___CgBIV_5-0-8 .magritte-drop-container___dbMt9_5-0-8{
+  padding-bottom:0;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-drop-enter___4vEuH_5-0-8 .magritte-drop___Z10P4_5-0-8{
+    opacity:0;
+  }
+  .magritte-drop-exit___brFjz_5-0-8 .magritte-drop___Z10P4_5-0-8,
+  .magritte-drop-enter-active___SQUog_5-0-8 .magritte-drop___Z10P4_5-0-8{
+    opacity:1;
+  }
+  .magritte-drop-exit-active___GB0ET_5-0-8 .magritte-drop___Z10P4_5-0-8{
+    opacity:0;
+  }
+  .magritte-drop-animation-timeout___uO7LF_5-0-8,
+  .magritte-drop-enter-active___SQUog_5-0-8 .magritte-drop___Z10P4_5-0-8{
+    transition-property:opacity, transform;
+    transition-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-1-1);
+    transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-1);
+    --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v18-1-1);
+  }
+  .magritte-drop-animation-timeout___uO7LF_5-0-8,
+  .magritte-drop-exit-active___GB0ET_5-0-8 .magritte-drop___Z10P4_5-0-8{
+    transition-property:opacity, transform;
+    transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v18-1-1);
+    transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-1-1);
+  }
+  .magritte-drop-enter___4vEuH_5-0-8 .magritte-drop-direction-top___3CelS_5-0-8{
+    transform:translateY(-4px);
+  }
+  .magritte-drop-exit___brFjz_5-0-8 .magritte-drop-direction-top___3CelS_5-0-8,
+  .magritte-drop-enter-active___SQUog_5-0-8 .magritte-drop-direction-top___3CelS_5-0-8{
+    transform:translateY(0%);
+  }
+  .magritte-drop-exit-active___GB0ET_5-0-8 .magritte-drop-direction-top___3CelS_5-0-8{
+    transform:translateY(-4px);
+  }
+  .magritte-drop-enter___4vEuH_5-0-8 .magritte-drop-direction-bottom___719rs_5-0-8{
+    transform:translateY(4px);
+  }
+  .magritte-drop-exit___brFjz_5-0-8 .magritte-drop-direction-bottom___719rs_5-0-8,
+  .magritte-drop-enter-active___SQUog_5-0-8 .magritte-drop-direction-bottom___719rs_5-0-8{
+    transform:translateY(0%);
+  }
+  .magritte-drop-exit-active___GB0ET_5-0-8 .magritte-drop-direction-bottom___719rs_5-0-8{
+    transform:translateY(4px);
+  }
+  .magritte-drop-enter___4vEuH_5-0-8 .magritte-drop-direction-left___2PTob_5-0-8{
+    transform:translateX(-4px);
+  }
+  .magritte-drop-exit___brFjz_5-0-8 .magritte-drop-direction-left___2PTob_5-0-8,
+  .magritte-drop-enter-active___SQUog_5-0-8 .magritte-drop-direction-left___2PTob_5-0-8{
+    transform:translateX(0%);
+  }
+  .magritte-drop-exit-active___GB0ET_5-0-8 .magritte-drop-direction-left___2PTob_5-0-8{
+    transform:translateX(4px);
+  }
+  .magritte-drop-enter___4vEuH_5-0-8 .magritte-drop-direction-right___SPOr1_5-0-8{
+    transform:translateX(4px);
+  }
+  .magritte-drop-exit___brFjz_5-0-8 .magritte-drop-direction-right___SPOr1_5-0-8,
+  .magritte-drop-enter-active___SQUog_5-0-8 .magritte-drop-direction-right___SPOr1_5-0-8{
+    transform:translateX(0%);
+  }
+  .magritte-drop-exit-active___GB0ET_5-0-8 .magritte-drop-direction-right___SPOr1_5-0-8{
+    transform:translateX(4px);
+  }
+}

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@hh.ru/magritte-ui-theme-provider';
+export * from './Drop';
+export type { DropProps } from './types';

package/index.js

@@ -0,0 +1,14 @@
+import './index.css';
+export * from '@hh.ru/magritte-ui-theme-provider';
+export { Drop } from './Drop.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-internal-drop-base';
+import '@hh.ru/magritte-internal-layer-name';
+import '@hh.ru/magritte-ui-breakpoint';
+import './DropContainer-931ee089.js';
+import '@hh.ru/magritte-ui-divider';
+import './PureChildren.js';
+import '@hh.ru/magritte-ui-layer';
+//# sourceMappingURL=index.js.map

package/index.js.map

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

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@hh.ru/magritte-ui-drop",
+  "version": "5.0.8",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "changelog": "yarn root:changelog $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-test": "yarn root:stylelint-test $(pwd)",
+    "eslint-test": "yarn root:eslint-test $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-design-tokens": "18.1.1",
+    "@hh.ru/magritte-internal-drop-base": "5.0.4",
+    "@hh.ru/magritte-internal-layer-name": "2.1.1",
+    "@hh.ru/magritte-ui-breakpoint": "4.0.1",
+    "@hh.ru/magritte-ui-divider": "1.1.24",
+    "@hh.ru/magritte-ui-layer": "2.0.3",
+    "@hh.ru/magritte-ui-theme-provider": "1.1.21"
+  },
+  "peerDependencies": {
+    "classnames": "2.3.2",
+    "react": ">=18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "b660dd64fca3eaad5ec44ea9a73f92bb0d9694aa"
+}

package/types.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode, PropsWithChildren } from 'react';
+import { type DropBasePermanentProps, type DropBaseHorizontalPositionWithoutCenter, type DropBaseVerticalPositionWithoutCenter } from '@hh.ru/magritte-internal-drop-base';
+export type DividerState = 'show' | 'hide' | 'showWhenFullyScrolled';
+export interface DropPropsOnly {
+    /** Cостояние divider, позволяет упровлять его логикой показа
+     * show - показывать если не доскролили до конца блока
+     * showWhenFullyScrolled - показывать даже если доскролили до конца блока
+     * hide - скрыть
+     * */
+    dividerState?: DividerState;
+    /** Максимальная ширина Drop */
+    maxWidth?: number;
+    /** Минимальная высота содержимого первого контейнера Drop */
+    minHeightForContent?: number;
+    /** Роли для доступности */
+    role?: 'alertdialog' | 'dialog' | 'listbox' | 'status';
+    /** Содержимое нижнего контейнера */
+    footer?: ReactNode;
+    /** Размеры отступов внутри Drop */
+    space?: 0 | 300 | 400 | 600;
+    /** QA атрибут */
+    'data-qa'?: string;
+    /** Ширина дропа равна ширине активатора, при установке флага значение пропа maxWidth игнорируется */
+    widthEqualToActivator?: boolean;
+}
+export type DropProps<T extends DropBaseHorizontalPositionWithoutCenter | DropBaseVerticalPositionWithoutCenter> = Omit<DropBasePermanentProps, 'arrowGuardDistance' | 'children' | 'animationTimeout' | 'animationClassNames' | 'role' | 'autoFocusWhenOpened' | 'guardDistance' | 'occupyAllAvailableViewportHeight'> & T & PropsWithChildren<DropPropsOnly>;

package/types.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=types.js.map

package/types.js.map

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