@hh.ru/magritte-ui-drop 11.0.11 → 11.1.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.
Files changed (12) hide show
  1. package/Drop.js +4 -2
  2. package/Drop.js.map +1 -1
  3. package/{DropContainer-BsSQeLTZ.js → DropContainer-CiVP6tCy.js} +8 -5
  4. package/DropContainer-CiVP6tCy.js.map +1 -0
  5. package/DropContainer.d.ts +1 -0
  6. package/DropContainer.js +3 -1
  7. package/DropContainer.js.map +1 -1
  8. package/index.css +45 -29
  9. package/index.js +3 -1
  10. package/index.js.map +1 -1
  11. package/package.json +4 -3
  12. package/DropContainer-BsSQeLTZ.js.map +0 -1
package/Drop.js CHANGED
@@ -4,10 +4,12 @@ import { forwardRef, useState, useRef, useEffect, cloneElement } from 'react';
4
4
  import { usePlacement, DropBase } from '@hh.ru/magritte-internal-drop-base';
5
5
  import { isActionBarComponent } from '@hh.ru/magritte-ui-action-bar';
6
6
  import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
7
- import { s as styles, D as DropContainer } from './DropContainer-BsSQeLTZ.js';
7
+ import { s as styles, D as DropContainer } from './DropContainer-CiVP6tCy.js';
8
8
  import { Layer } from '@hh.ru/magritte-ui-layer';
9
+ import 'classnames';
9
10
  import '@hh.ru/magritte-common-use-multiple-refs';
10
11
  import '@hh.ru/magritte-ui-divider';
12
+ import '@hh.ru/magritte-ui-scrollbar';
11
13
 
12
14
  const AVAILABLE_PLACEMENTS_LIST = new Set([
13
15
  'left-top',
@@ -112,7 +114,7 @@ const DropComponent = ({ visible, activatorRef, onClose, maxWidth = 320, minHeig
112
114
  enterActive: styles.dropEnterActive,
113
115
  exit: styles.dropExit,
114
116
  exitActive: styles.dropExitActive,
115
- }, animationTimeout: animationTimeout, widthEqualToActivator: widthEqualToActivator, allowShrinkHeightToFitIntoViewport: allowShrinkHeightToFitIntoViewport, ignoreIntersections: actualIgnoreIntersections, minHeight: minHeight, ref: ref, onAppear: onAppear, onBeforeExit: onBeforeExit, onAfterExit: onAfterExit, forceDropMetricsUpdate: forceUpdateDropMetricsRef, lockPlacement: isPlacementLockedByFocus || lockPlacement, children: (resizeRefCallbackFactory) => (jsxs("div", { className: styles.drop, style: widthStyle, "data-qa": dataQA, onFocus: focusHandler, onBlur: blurHandler, children: [jsx(DropContainer, { dividerState: !footer ? 'hide' : dividerState, ref: resizeRefCallbackFactory('scroll-container', false, true), padding: { padding, ...contentPaddingProps }, children: jsx("div", { ref: resizeRefCallbackFactory('drop-content'), children: children }) }, "drop-container"), footer && (jsx("div", { ref: resizeRefCallbackFactory('drop-footer'), "data-qa": "drop-footer", style: { padding: paddingFooter ?? padding, ...footerPaddingProps }, children: isActionBarComponent(footer)
117
+ }, animationTimeout: animationTimeout, widthEqualToActivator: widthEqualToActivator, allowShrinkHeightToFitIntoViewport: allowShrinkHeightToFitIntoViewport, ignoreIntersections: actualIgnoreIntersections, minHeight: minHeight, ref: ref, onAppear: onAppear, onBeforeExit: onBeforeExit, onAfterExit: onAfterExit, forceDropMetricsUpdate: forceUpdateDropMetricsRef, lockPlacement: isPlacementLockedByFocus || lockPlacement, children: (resizeRefCallbackFactory) => (jsxs("div", { className: styles.drop, style: widthStyle, "data-qa": dataQA, onFocus: focusHandler, onBlur: blurHandler, children: [jsx(DropContainer, { dividerState: !footer ? 'hide' : dividerState, ref: resizeRefCallbackFactory('scroll-container', false, true), padding: { padding, ...contentPaddingProps }, withFooter: !!footer, children: jsx("div", { ref: resizeRefCallbackFactory('drop-content'), children: children }) }, "drop-container"), footer && (jsx("div", { ref: resizeRefCallbackFactory('drop-footer'), "data-qa": "drop-footer", style: { padding: paddingFooter ?? padding, ...footerPaddingProps }, children: isActionBarComponent(footer)
116
118
  ? cloneElement(footer, {
117
119
  type: footer.props.type || 'vertical',
118
120
  padding: footer.props.padding || 0,
package/Drop.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Drop.js","sources":["../src/Drop.tsx"],"sourcesContent":["import {\n useEffect,\n useState,\n type ReactElement,\n ForwardedRef,\n forwardRef,\n useRef,\n RefObject,\n CSSProperties,\n type FocusEvent,\n cloneElement,\n} from 'react';\n\nimport { DropBase, type Placement, usePlacement } from '@hh.ru/magritte-internal-drop-base';\nimport { isActionBarComponent } from '@hh.ru/magritte-ui-action-bar';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { DropContainer } from '@hh.ru/magritte-ui-drop/DropContainer';\nimport type { DropProps, DropPadding } from '@hh.ru/magritte-ui-drop/types';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\n\nimport styles from './drop.less';\n\nconst AVAILABLE_PLACEMENTS_LIST: Set<Placement> = new Set([\n 'left-top',\n 'left-bottom',\n 'right-top',\n 'right-bottom',\n 'top-left',\n 'top-right',\n 'bottom-left',\n 'bottom-right',\n]);\n\nconst genPaddingProps = (paddingProps: {\n Left?: DropPadding;\n Right?: DropPadding;\n Top?: DropPadding;\n Bottom?: DropPadding;\n}) =>\n Object.entries(paddingProps).reduce<Record<string, number>>(\n (acc, [key, value]) => (value !== undefined ? { ...acc, [`padding${key}`]: value } : acc),\n {}\n );\n\nconst isKeyboardInput = (element: HTMLElement): boolean => {\n const tagName = element.tagName.toLowerCase();\n const keyboardInputTypes = ['text', 'password', 'email', 'number', 'tel', 'url', 'search'];\n return (\n (tagName === 'input' && keyboardInputTypes.includes((element as HTMLInputElement).type)) ||\n tagName === 'textarea' ||\n element.hasAttribute('contenteditable')\n );\n};\n\nconst DropComponent = (\n {\n visible,\n activatorRef,\n onClose,\n maxWidth = 320,\n minHeight = 200,\n width,\n children,\n footer,\n role = 'dialog',\n dividerState = 'show',\n widthEqualToActivator = false,\n allowShrinkHeightToFitIntoViewport = true,\n autoFocusWhenOpened,\n closeByClickOutside = true,\n 'data-qa': dataQA = 'drop',\n onAppear,\n onBeforeExit,\n onAfterExit,\n placement,\n forcePlacement,\n ignoreIntersections,\n lockPlacement = false,\n padding = 24,\n paddingLeft,\n paddingRight,\n paddingTop,\n paddingBottom,\n paddingFooter,\n paddingFooterLeft,\n paddingFooterRight,\n paddingFooterBottom,\n paddingFooterTop,\n ...props\n }: DropProps,\n ref: ForwardedRef<HTMLElement>\n): ReactElement | null => {\n const { isMobile } = useBreakpoint();\n const [animationTimeout, setAnimationTimeout] = useState(200);\n const [isPlacementLockedByFocus, setPlacementLockedByFocus] = useState(false);\n const forceUpdateDropMetricsRef = useRef<VoidFunction>();\n\n const actualIgnoreIntersections =\n ignoreIntersections === undefined ? !allowShrinkHeightToFitIntoViewport : ignoreIntersections;\n\n const placementsList = usePlacement(placement as Placement, AVAILABLE_PLACEMENTS_LIST, !!forcePlacement);\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 useEffect(() => {\n forceUpdateDropMetricsRef.current?.();\n }, [\n maxWidth,\n padding,\n paddingLeft,\n paddingRight,\n paddingTop,\n paddingBottom,\n paddingFooter,\n paddingFooterLeft,\n paddingFooterRight,\n paddingFooterTop,\n paddingFooterBottom,\n footer,\n ]);\n\n const focusHandler = (event: Event | FocusEvent) => {\n const target = event.target;\n if (!target || !isKeyboardInput(target as HTMLElement)) {\n return;\n }\n setPlacementLockedByFocus(true);\n };\n const blurHandler = () => setPlacementLockedByFocus(false);\n\n useEffect(() => {\n if (!visible || isMobile || !activatorRef.current) {\n return void 0;\n }\n\n const activatorElement = activatorRef.current;\n activatorElement.addEventListener('focus', focusHandler);\n activatorElement.addEventListener('blur', blurHandler);\n return () => {\n activatorElement.removeEventListener('focus', focusHandler);\n activatorElement.removeEventListener('blur', blurHandler);\n };\n }, [visible, activatorRef, isMobile]);\n\n if (isMobile) {\n return null;\n }\n\n let widthStyle: CSSProperties;\n if (widthEqualToActivator) {\n widthStyle = { width: '100%' };\n } else {\n widthStyle = width ? { width } : { maxWidth };\n }\n\n let currentPaddingBottom = paddingBottom;\n if (footer && currentPaddingBottom === undefined) {\n currentPaddingBottom = 0;\n }\n\n const contentPaddingProps = genPaddingProps({\n Left: paddingLeft,\n Right: paddingRight,\n Top: paddingTop,\n Bottom: currentPaddingBottom,\n });\n\n const footerPaddingProps = genPaddingProps({\n Left: paddingFooterLeft,\n Right: paddingFooterRight,\n Top: paddingFooterTop,\n Bottom: paddingFooterBottom,\n });\n\n return (\n <Layer layer=\"drop\">\n <DropBase\n {...props}\n visible={visible}\n placement={placementsList}\n activatorRef={activatorRef}\n closeByClickOutside={closeByClickOutside}\n onClose={onClose}\n autoFocusWhenOpened={autoFocusWhenOpened ?? role !== 'status'}\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 allowShrinkHeightToFitIntoViewport={allowShrinkHeightToFitIntoViewport}\n ignoreIntersections={actualIgnoreIntersections}\n minHeight={minHeight}\n ref={ref}\n onAppear={onAppear}\n onBeforeExit={onBeforeExit}\n onAfterExit={onAfterExit}\n forceDropMetricsUpdate={forceUpdateDropMetricsRef as RefObject<VoidFunction>}\n lockPlacement={isPlacementLockedByFocus || lockPlacement}\n >\n {(resizeRefCallbackFactory) => (\n <div\n className={styles.drop}\n style={widthStyle}\n data-qa={dataQA}\n key=\"drop-outer-container\"\n onFocus={focusHandler}\n onBlur={blurHandler}\n >\n <DropContainer\n key=\"drop-container\"\n dividerState={!footer ? 'hide' : dividerState}\n ref={resizeRefCallbackFactory('scroll-container', false, true)}\n padding={{ padding, ...contentPaddingProps }}\n >\n <div ref={resizeRefCallbackFactory('drop-content')}>{children}</div>\n </DropContainer>\n {footer && (\n <div\n ref={resizeRefCallbackFactory('drop-footer')}\n data-qa=\"drop-footer\"\n style={{ padding: paddingFooter ?? padding, ...footerPaddingProps }}\n >\n {isActionBarComponent(footer)\n ? cloneElement(footer, {\n type: footer.props.type || 'vertical',\n padding: footer.props.padding || 0,\n showDivider: false,\n })\n : footer}\n </div>\n )}\n <div className={styles.dropBorder} />\n </div>\n )}\n </DropBase>\n </Layer>\n );\n};\n\nconst Drop = forwardRef<HTMLElement, DropProps>(DropComponent);\nexport { Drop };\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"Drop.js","sources":["../src/Drop.tsx"],"sourcesContent":["import {\n useEffect,\n useState,\n type ReactElement,\n ForwardedRef,\n forwardRef,\n useRef,\n RefObject,\n CSSProperties,\n type FocusEvent,\n cloneElement,\n} from 'react';\n\nimport { DropBase, type Placement, usePlacement } from '@hh.ru/magritte-internal-drop-base';\nimport { isActionBarComponent } from '@hh.ru/magritte-ui-action-bar';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { DropContainer } from '@hh.ru/magritte-ui-drop/DropContainer';\nimport type { DropProps, DropPadding } from '@hh.ru/magritte-ui-drop/types';\nimport { Layer } from '@hh.ru/magritte-ui-layer';\n\nimport styles from './drop.less';\n\nconst AVAILABLE_PLACEMENTS_LIST: Set<Placement> = new Set([\n 'left-top',\n 'left-bottom',\n 'right-top',\n 'right-bottom',\n 'top-left',\n 'top-right',\n 'bottom-left',\n 'bottom-right',\n]);\n\nconst genPaddingProps = (paddingProps: {\n Left?: DropPadding;\n Right?: DropPadding;\n Top?: DropPadding;\n Bottom?: DropPadding;\n}) =>\n Object.entries(paddingProps).reduce<Record<string, number>>(\n (acc, [key, value]) => (value !== undefined ? { ...acc, [`padding${key}`]: value } : acc),\n {}\n );\n\nconst isKeyboardInput = (element: HTMLElement): boolean => {\n const tagName = element.tagName.toLowerCase();\n const keyboardInputTypes = ['text', 'password', 'email', 'number', 'tel', 'url', 'search'];\n return (\n (tagName === 'input' && keyboardInputTypes.includes((element as HTMLInputElement).type)) ||\n tagName === 'textarea' ||\n element.hasAttribute('contenteditable')\n );\n};\n\nconst DropComponent = (\n {\n visible,\n activatorRef,\n onClose,\n maxWidth = 320,\n minHeight = 200,\n width,\n children,\n footer,\n role = 'dialog',\n dividerState = 'show',\n widthEqualToActivator = false,\n allowShrinkHeightToFitIntoViewport = true,\n autoFocusWhenOpened,\n closeByClickOutside = true,\n 'data-qa': dataQA = 'drop',\n onAppear,\n onBeforeExit,\n onAfterExit,\n placement,\n forcePlacement,\n ignoreIntersections,\n lockPlacement = false,\n padding = 24,\n paddingLeft,\n paddingRight,\n paddingTop,\n paddingBottom,\n paddingFooter,\n paddingFooterLeft,\n paddingFooterRight,\n paddingFooterBottom,\n paddingFooterTop,\n ...props\n }: DropProps,\n ref: ForwardedRef<HTMLElement>\n): ReactElement | null => {\n const { isMobile } = useBreakpoint();\n const [animationTimeout, setAnimationTimeout] = useState(200);\n const [isPlacementLockedByFocus, setPlacementLockedByFocus] = useState(false);\n const forceUpdateDropMetricsRef = useRef<VoidFunction>();\n\n const actualIgnoreIntersections =\n ignoreIntersections === undefined ? !allowShrinkHeightToFitIntoViewport : ignoreIntersections;\n\n const placementsList = usePlacement(placement as Placement, AVAILABLE_PLACEMENTS_LIST, !!forcePlacement);\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 useEffect(() => {\n forceUpdateDropMetricsRef.current?.();\n }, [\n maxWidth,\n padding,\n paddingLeft,\n paddingRight,\n paddingTop,\n paddingBottom,\n paddingFooter,\n paddingFooterLeft,\n paddingFooterRight,\n paddingFooterTop,\n paddingFooterBottom,\n footer,\n ]);\n\n const focusHandler = (event: Event | FocusEvent) => {\n const target = event.target;\n if (!target || !isKeyboardInput(target as HTMLElement)) {\n return;\n }\n setPlacementLockedByFocus(true);\n };\n const blurHandler = () => setPlacementLockedByFocus(false);\n\n useEffect(() => {\n if (!visible || isMobile || !activatorRef.current) {\n return void 0;\n }\n\n const activatorElement = activatorRef.current;\n activatorElement.addEventListener('focus', focusHandler);\n activatorElement.addEventListener('blur', blurHandler);\n return () => {\n activatorElement.removeEventListener('focus', focusHandler);\n activatorElement.removeEventListener('blur', blurHandler);\n };\n }, [visible, activatorRef, isMobile]);\n\n if (isMobile) {\n return null;\n }\n\n let widthStyle: CSSProperties;\n if (widthEqualToActivator) {\n widthStyle = { width: '100%' };\n } else {\n widthStyle = width ? { width } : { maxWidth };\n }\n\n let currentPaddingBottom = paddingBottom;\n if (footer && currentPaddingBottom === undefined) {\n currentPaddingBottom = 0;\n }\n\n const contentPaddingProps = genPaddingProps({\n Left: paddingLeft,\n Right: paddingRight,\n Top: paddingTop,\n Bottom: currentPaddingBottom,\n });\n\n const footerPaddingProps = genPaddingProps({\n Left: paddingFooterLeft,\n Right: paddingFooterRight,\n Top: paddingFooterTop,\n Bottom: paddingFooterBottom,\n });\n\n return (\n <Layer layer=\"drop\">\n <DropBase\n {...props}\n visible={visible}\n placement={placementsList}\n activatorRef={activatorRef}\n closeByClickOutside={closeByClickOutside}\n onClose={onClose}\n autoFocusWhenOpened={autoFocusWhenOpened ?? role !== 'status'}\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 allowShrinkHeightToFitIntoViewport={allowShrinkHeightToFitIntoViewport}\n ignoreIntersections={actualIgnoreIntersections}\n minHeight={minHeight}\n ref={ref}\n onAppear={onAppear}\n onBeforeExit={onBeforeExit}\n onAfterExit={onAfterExit}\n forceDropMetricsUpdate={forceUpdateDropMetricsRef as RefObject<VoidFunction>}\n lockPlacement={isPlacementLockedByFocus || lockPlacement}\n >\n {(resizeRefCallbackFactory) => (\n <div\n className={styles.drop}\n style={widthStyle}\n data-qa={dataQA}\n key=\"drop-outer-container\"\n onFocus={focusHandler}\n onBlur={blurHandler}\n >\n <DropContainer\n key=\"drop-container\"\n dividerState={!footer ? 'hide' : dividerState}\n ref={resizeRefCallbackFactory('scroll-container', false, true)}\n padding={{ padding, ...contentPaddingProps }}\n withFooter={!!footer}\n >\n <div ref={resizeRefCallbackFactory('drop-content')}>{children}</div>\n </DropContainer>\n {footer && (\n <div\n ref={resizeRefCallbackFactory('drop-footer')}\n data-qa=\"drop-footer\"\n style={{ padding: paddingFooter ?? padding, ...footerPaddingProps }}\n >\n {isActionBarComponent(footer)\n ? cloneElement(footer, {\n type: footer.props.type || 'vertical',\n padding: footer.props.padding || 0,\n showDivider: false,\n })\n : footer}\n </div>\n )}\n <div className={styles.dropBorder} />\n </div>\n )}\n </DropBase>\n </Layer>\n );\n};\n\nconst Drop = forwardRef<HTMLElement, DropProps>(DropComponent);\nexport { Drop };\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
package/{DropContainer-BsSQeLTZ.js → DropContainer-CiVP6tCy.js} RENAMED
@@ -1,17 +1,20 @@
1
1
  import './index.css';
2
2
  import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
3
3
  import { forwardRef, useRef, useCallback, useEffect } from 'react';
4
+ import classnames from 'classnames';
4
5
  import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
5
6
  import { Divider } from '@hh.ru/magritte-ui-divider';
7
+ import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
6
8
 
7
- var styles = {"drop":"magritte-drop___Z10P4_11-0-11","drop-border":"magritte-drop-border___UDWjW_11-0-11","dropBorder":"magritte-drop-border___UDWjW_11-0-11","drop-container":"magritte-drop-container___dbMt9_11-0-11","dropContainer":"magritte-drop-container___dbMt9_11-0-11","divider-container":"magritte-divider-container___ZCdDW_11-0-11","dividerContainer":"magritte-divider-container___ZCdDW_11-0-11","drop-enter":"magritte-drop-enter___4vEuH_11-0-11","dropEnter":"magritte-drop-enter___4vEuH_11-0-11","drop-exit":"magritte-drop-exit___brFjz_11-0-11","dropExit":"magritte-drop-exit___brFjz_11-0-11","drop-enter-active":"magritte-drop-enter-active___SQUog_11-0-11","dropEnterActive":"magritte-drop-enter-active___SQUog_11-0-11","drop-exit-active":"magritte-drop-exit-active___GB0ET_11-0-11","dropExitActive":"magritte-drop-exit-active___GB0ET_11-0-11","drop-animation-timeout":"magritte-drop-animation-timeout___uO7LF_11-0-11","dropAnimationTimeout":"magritte-drop-animation-timeout___uO7LF_11-0-11"};
9
+ var styles = {"drop":"magritte-drop___Z10P4_11-1-0","drop-border":"magritte-drop-border___UDWjW_11-1-0","dropBorder":"magritte-drop-border___UDWjW_11-1-0","drop-container-wrapper":"magritte-drop-container-wrapper___o-ySf_11-1-0","dropContainerWrapper":"magritte-drop-container-wrapper___o-ySf_11-1-0","drop-container-wrapper-with-footer":"magritte-drop-container-wrapper-with-footer___-6tNU_11-1-0","dropContainerWrapperWithFooter":"magritte-drop-container-wrapper-with-footer___-6tNU_11-1-0","drop-container":"magritte-drop-container___dbMt9_11-1-0","dropContainer":"magritte-drop-container___dbMt9_11-1-0","divider-container":"magritte-divider-container___ZCdDW_11-1-0","dividerContainer":"magritte-divider-container___ZCdDW_11-1-0","drop-enter":"magritte-drop-enter___4vEuH_11-1-0","dropEnter":"magritte-drop-enter___4vEuH_11-1-0","drop-exit":"magritte-drop-exit___brFjz_11-1-0","dropExit":"magritte-drop-exit___brFjz_11-1-0","drop-enter-active":"magritte-drop-enter-active___SQUog_11-1-0","dropEnterActive":"magritte-drop-enter-active___SQUog_11-1-0","drop-exit-active":"magritte-drop-exit-active___GB0ET_11-1-0","dropExitActive":"magritte-drop-exit-active___GB0ET_11-1-0","drop-animation-timeout":"magritte-drop-animation-timeout___uO7LF_11-1-0","dropAnimationTimeout":"magritte-drop-animation-timeout___uO7LF_11-1-0"};
8
10
 
9
- const DropContainer = forwardRef(({ children, dividerState, padding }, ref) => {
11
+ const DropContainer = forwardRef(({ children, dividerState, padding, withFooter }, ref) => {
10
12
  const dividerRef = useRef(null);
11
13
  const showDividerRef = useRef(false);
12
14
  showDividerRef.current = dividerState !== 'hide';
13
15
  const contentContainerRef = useRef(null);
14
- const contentContainerRefMulti = useMultipleRefs(contentContainerRef, ref);
16
+ const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({ axis: 'vertical' });
17
+ const contentContainerRefMulti = useMultipleRefs(contentContainerRef, ref, scrollbar.scrollContainerRef);
15
18
  const updateDividerVisibility = useCallback((showDivider) => {
16
19
  if (!contentContainerRef.current || !dividerRef.current) {
17
20
  return;
@@ -50,9 +53,9 @@ const DropContainer = forwardRef(({ children, dividerState, padding }, ref) => {
50
53
  },
51
54
  }
52
55
  : {};
53
- return (jsxs(Fragment, { children: [jsx("div", { ref: contentContainerRefMulti, className: styles.dropContainer, ...props, style: padding, children: children }), jsx("div", { ref: dividerRef, className: styles.dividerContainer, "data-qa": "drop-divider", children: jsx(Divider, {}) })] }));
56
+ return (jsxs(Fragment, { children: [jsxs("div", { className: classnames(styles.dropContainerWrapper, { [styles.dropContainerWrapperWithFooter]: withFooter }, scrollbar.hoverContainerCssClass), children: [jsx("div", { ref: contentContainerRefMulti, className: styles.dropContainer, ...props, style: padding, children: children }), hasVerticalScroll && jsx(Scrollbar, { ...verticalScrollbarProps })] }), jsx("div", { ref: dividerRef, className: styles.dividerContainer, "data-qa": "drop-divider", children: jsx(Divider, {}) })] }));
54
57
  });
55
58
  DropContainer.displayName = 'DropContainer';
56
59
 
57
60
  export { DropContainer as D, styles as s };
58
- //# sourceMappingURL=DropContainer-BsSQeLTZ.js.map
61
+ //# sourceMappingURL=DropContainer-CiVP6tCy.js.map
package/DropContainer-CiVP6tCy.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DropContainer-CiVP6tCy.js","sources":["../src/DropContainer.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren, useEffect, useCallback, forwardRef, CSSProperties } from 'react';\nimport classnames from 'classnames';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\nimport type { DividerState } from '@hh.ru/magritte-ui-drop/types';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\n\nimport styles from './drop.less';\n\nexport const DropContainer = forwardRef<\n HTMLDivElement,\n PropsWithChildren<{\n dividerState: DividerState;\n padding: CSSProperties;\n withFooter: boolean;\n }>\n>(({ children, dividerState, padding, withFooter }, ref) => {\n const dividerRef = useRef<HTMLDivElement>(null);\n const showDividerRef = useRef(false);\n showDividerRef.current = dividerState !== 'hide';\n const contentContainerRef = useRef<HTMLDivElement>(null);\n const { hasVerticalScroll, verticalScrollbarProps, ...scrollbar } = useScrollbar({ axis: 'vertical' });\n const contentContainerRefMulti = useMultipleRefs(contentContainerRef, ref, scrollbar.scrollContainerRef);\n\n const updateDividerVisibility = useCallback(\n (showDivider: boolean) => {\n if (!contentContainerRef.current || !dividerRef.current) {\n return;\n }\n if (!showDivider) {\n dividerRef.current.style.visibility = 'hidden';\n return;\n }\n if (contentContainerRef?.current !== null && dividerRef.current) {\n const hasScroll =\n contentContainerRef.current.scrollHeight - contentContainerRef.current.clientHeight > 0;\n dividerRef.current.style.visibility = hasScroll ? 'visible' : 'hidden';\n }\n },\n [contentContainerRef, dividerRef]\n );\n\n useEffect(() => {\n const observer = new ResizeObserver(() => {\n updateDividerVisibility(showDividerRef.current);\n });\n observer.observe(contentContainerRef.current as Element);\n return () => observer.disconnect();\n }, [updateDividerVisibility]);\n\n useEffect(() => {\n updateDividerVisibility(showDividerRef.current);\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [updateDividerVisibility, showDividerRef.current]);\n\n const props = showDividerRef.current\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 className={classnames(\n styles.dropContainerWrapper,\n { [styles.dropContainerWrapperWithFooter]: withFooter },\n scrollbar.hoverContainerCssClass\n )}\n >\n <div ref={contentContainerRefMulti} className={styles.dropContainer} {...props} style={padding}>\n {children}\n </div>\n {hasVerticalScroll && <Scrollbar {...verticalScrollbarProps} />}\n </div>\n <div ref={dividerRef} className={styles.dividerContainer} data-qa=\"drop-divider\">\n <Divider />\n </div>\n </>\n );\n});\n\nDropContainer.displayName = 'DropContainer';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}
package/DropContainer.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { DividerState } from '@hh.ru/magritte-ui-drop/types';
3
3
  export declare const DropContainer: import("react").ForwardRefExoticComponent<{
4
4
  dividerState: DividerState;
5
5
  padding: CSSProperties;
6
+ withFooter: boolean;
6
7
  } & {
7
8
  children?: import("react").ReactNode | undefined;
8
9
  } & import("react").RefAttributes<HTMLDivElement>>;
package/DropContainer.js CHANGED
@@ -1,7 +1,9 @@
1
1
  import './index.css';
2
2
  import 'react/jsx-runtime';
3
3
  import 'react';
4
+ import 'classnames';
4
5
  import '@hh.ru/magritte-common-use-multiple-refs';
5
6
  import '@hh.ru/magritte-ui-divider';
6
- export { D as DropContainer } from './DropContainer-BsSQeLTZ.js';
7
+ import '@hh.ru/magritte-ui-scrollbar';
8
+ export { D as DropContainer } from './DropContainer-CiVP6tCy.js';
7
9
  //# sourceMappingURL=DropContainer.js.map
package/DropContainer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DropContainer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
1
+ {"version":3,"file":"DropContainer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
package/index.css CHANGED
@@ -34,7 +34,7 @@
34
34
  --magritte-shadow-level-2-blur-v23-2-1:16px;
35
35
  --magritte-shadow-level-2-spread-v23-2-1:0px;
36
36
  }
37
- .magritte-drop___Z10P4_11-0-11{
37
+ .magritte-drop___Z10P4_11-1-0{
38
38
  position:relative;
39
39
  display:flex;
40
40
  flex-direction:column;
@@ -45,7 +45,7 @@
45
45
  height:100%;
46
46
  overflow:hidden;
47
47
  }
48
- .magritte-drop-border___UDWjW_11-0-11{
48
+ .magritte-drop-border___UDWjW_11-1-0{
49
49
  box-shadow:inset 0 0 0 1px var(--magritte-color-stroke-neutral-v23-2-1);
50
50
  position:absolute;
51
51
  border-radius:var(--magritte-static-border-radius-600-v23-2-1);
@@ -53,75 +53,91 @@
53
53
  inset:0;
54
54
  z-index:1;
55
55
  }
56
- .magritte-drop-container___dbMt9_11-0-11{
57
- display:block;
56
+ .magritte-drop-container-wrapper___o-ySf_11-1-0{
57
+ position:relative;
58
+ overflow:hidden;
59
+ --magritte-ui-scrollbar-border-radius:var(--magritte-static-border-radius-600-v23-2-1);
60
+ }
61
+ .magritte-drop-container-wrapper-with-footer___-6tNU_11-1-0{
62
+ --magritte-ui-scrollbar-border-bottom-left-radius:0;
63
+ --magritte-ui-scrollbar-border-bottom-right-radius:0;
64
+ }
65
+ .magritte-drop-container___dbMt9_11-1-0{
66
+ width:100%;
67
+ height:100%;
68
+ box-sizing:border-box;
58
69
  overflow:auto;
70
+ overscroll-behavior:contain;
71
+ scrollbar-width:none;
72
+ }
73
+ .magritte-drop-container___dbMt9_11-1-0::-webkit-scrollbar{
74
+ display:none;
59
75
  }
60
- .magritte-divider-container___ZCdDW_11-0-11{
76
+ .magritte-divider-container___ZCdDW_11-1-0{
61
77
  visibility:hidden;
62
78
  }
63
79
  @media (prefers-reduced-motion: no-preference){
64
- .magritte-drop-enter___4vEuH_11-0-11 .magritte-drop___Z10P4_11-0-11{
80
+ .magritte-drop-enter___4vEuH_11-1-0 .magritte-drop___Z10P4_11-1-0{
65
81
  opacity:0;
66
82
  }
67
- .magritte-drop-exit___brFjz_11-0-11 .magritte-drop___Z10P4_11-0-11,
68
- .magritte-drop-enter-active___SQUog_11-0-11 .magritte-drop___Z10P4_11-0-11{
83
+ .magritte-drop-exit___brFjz_11-1-0 .magritte-drop___Z10P4_11-1-0,
84
+ .magritte-drop-enter-active___SQUog_11-1-0 .magritte-drop___Z10P4_11-1-0{
69
85
  opacity:1;
70
86
  }
71
- .magritte-drop-exit-active___GB0ET_11-0-11 .magritte-drop___Z10P4_11-0-11{
87
+ .magritte-drop-exit-active___GB0ET_11-1-0 .magritte-drop___Z10P4_11-1-0{
72
88
  opacity:0;
73
89
  }
74
- .magritte-drop-animation-timeout___uO7LF_11-0-11,
75
- .magritte-drop-enter-active___SQUog_11-0-11 .magritte-drop___Z10P4_11-0-11{
90
+ .magritte-drop-animation-timeout___uO7LF_11-1-0,
91
+ .magritte-drop-enter-active___SQUog_11-1-0 .magritte-drop___Z10P4_11-1-0{
76
92
  transition-property:opacity, transform;
77
93
  transition-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v23-2-1);
78
94
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v23-2-1);
79
95
  --animation-duration:var(--magritte-semantic-animation-ease-in-out-200-duration-v23-2-1);
80
96
  }
81
- .magritte-drop-animation-timeout___uO7LF_11-0-11,
82
- .magritte-drop-exit-active___GB0ET_11-0-11 .magritte-drop___Z10P4_11-0-11{
97
+ .magritte-drop-animation-timeout___uO7LF_11-1-0,
98
+ .magritte-drop-exit-active___GB0ET_11-1-0 .magritte-drop___Z10P4_11-1-0{
83
99
  transition-property:opacity, transform;
84
100
  transition-duration:var(--magritte-semantic-animation-ease-in-out-100-duration-v23-2-1);
85
101
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-200-timing-function-v23-2-1);
86
102
  }
87
- .magritte-drop-enter___4vEuH_11-0-11[data-magritte-drop-base-direction='top'] .magritte-drop___Z10P4_11-0-11{
103
+ .magritte-drop-enter___4vEuH_11-1-0[data-magritte-drop-base-direction='top'] .magritte-drop___Z10P4_11-1-0{
88
104
  transform:translateY(-4px);
89
105
  }
90
- .magritte-drop-exit-active___GB0ET_11-0-11[data-magritte-drop-base-direction='top'] .magritte-drop___Z10P4_11-0-11{
106
+ .magritte-drop-exit-active___GB0ET_11-1-0[data-magritte-drop-base-direction='top'] .magritte-drop___Z10P4_11-1-0{
91
107
  transform:translateY(-4px);
92
108
  }
93
- .magritte-drop-enter___4vEuH_11-0-11[data-magritte-drop-base-direction='bottom'] .magritte-drop___Z10P4_11-0-11{
109
+ .magritte-drop-enter___4vEuH_11-1-0[data-magritte-drop-base-direction='bottom'] .magritte-drop___Z10P4_11-1-0{
94
110
  transform:translateY(4px);
95
111
  }
96
- .magritte-drop-exit-active___GB0ET_11-0-11[data-magritte-drop-base-direction='bottom'] .magritte-drop___Z10P4_11-0-11{
112
+ .magritte-drop-exit-active___GB0ET_11-1-0[data-magritte-drop-base-direction='bottom'] .magritte-drop___Z10P4_11-1-0{
97
113
  transform:translateY(4px);
98
114
  }
99
- .magritte-drop-enter___4vEuH_11-0-11[data-magritte-drop-base-direction='left'] .magritte-drop___Z10P4_11-0-11{
115
+ .magritte-drop-enter___4vEuH_11-1-0[data-magritte-drop-base-direction='left'] .magritte-drop___Z10P4_11-1-0{
100
116
  transform:translateX(-4px);
101
117
  }
102
- .magritte-drop-exit-active___GB0ET_11-0-11[data-magritte-drop-base-direction='left'] .magritte-drop___Z10P4_11-0-11{
118
+ .magritte-drop-exit-active___GB0ET_11-1-0[data-magritte-drop-base-direction='left'] .magritte-drop___Z10P4_11-1-0{
103
119
  transform:translateX(4px);
104
120
  }
105
- .magritte-drop-enter___4vEuH_11-0-11[data-magritte-drop-base-direction='right'] .magritte-drop___Z10P4_11-0-11{
121
+ .magritte-drop-enter___4vEuH_11-1-0[data-magritte-drop-base-direction='right'] .magritte-drop___Z10P4_11-1-0{
106
122
  transform:translateX(4px);
107
123
  }
108
- .magritte-drop-exit-active___GB0ET_11-0-11[data-magritte-drop-base-direction='right'] .magritte-drop___Z10P4_11-0-11{
124
+ .magritte-drop-exit-active___GB0ET_11-1-0[data-magritte-drop-base-direction='right'] .magritte-drop___Z10P4_11-1-0{
109
125
  transform:translateX(4px);
110
126
  }
111
- .magritte-drop-exit___brFjz_11-0-11[data-magritte-drop-base-direction='left'] .magritte-drop___Z10P4_11-0-11,
112
- .magritte-drop-enter-active___SQUog_11-0-11[data-magritte-drop-base-direction='left'] .magritte-drop___Z10P4_11-0-11{
127
+ .magritte-drop-exit___brFjz_11-1-0[data-magritte-drop-base-direction='left'] .magritte-drop___Z10P4_11-1-0,
128
+ .magritte-drop-enter-active___SQUog_11-1-0[data-magritte-drop-base-direction='left'] .magritte-drop___Z10P4_11-1-0{
113
129
  transform:translateX(0%);
114
130
  }
115
- .magritte-drop-exit___brFjz_11-0-11[data-magritte-drop-base-direction='bottom'] .magritte-drop___Z10P4_11-0-11,
116
- .magritte-drop-enter-active___SQUog_11-0-11[data-magritte-drop-base-direction='bottom'] .magritte-drop___Z10P4_11-0-11{
131
+ .magritte-drop-exit___brFjz_11-1-0[data-magritte-drop-base-direction='bottom'] .magritte-drop___Z10P4_11-1-0,
132
+ .magritte-drop-enter-active___SQUog_11-1-0[data-magritte-drop-base-direction='bottom'] .magritte-drop___Z10P4_11-1-0{
117
133
  transform:translateY(0%);
118
134
  }
119
- .magritte-drop-exit___brFjz_11-0-11[data-magritte-drop-base-direction='right'] .magritte-drop___Z10P4_11-0-11,
120
- .magritte-drop-enter-active___SQUog_11-0-11[data-magritte-drop-base-direction='right'] .magritte-drop___Z10P4_11-0-11{
135
+ .magritte-drop-exit___brFjz_11-1-0[data-magritte-drop-base-direction='right'] .magritte-drop___Z10P4_11-1-0,
136
+ .magritte-drop-enter-active___SQUog_11-1-0[data-magritte-drop-base-direction='right'] .magritte-drop___Z10P4_11-1-0{
121
137
  transform:translateX(0%);
122
138
  }
123
- .magritte-drop-exit___brFjz_11-0-11[data-magritte-drop-base-direction='top'] .magritte-drop___Z10P4_11-0-11,
124
- .magritte-drop-enter-active___SQUog_11-0-11[data-magritte-drop-base-direction='top'] .magritte-drop___Z10P4_11-0-11{
139
+ .magritte-drop-exit___brFjz_11-1-0[data-magritte-drop-base-direction='top'] .magritte-drop___Z10P4_11-1-0,
140
+ .magritte-drop-enter-active___SQUog_11-1-0[data-magritte-drop-base-direction='top'] .magritte-drop___Z10P4_11-1-0{
125
141
  transform:translateY(0%);
126
142
  }
127
143
  }
package/index.js CHANGED
@@ -5,8 +5,10 @@ import 'react';
5
5
  import '@hh.ru/magritte-internal-drop-base';
6
6
  import '@hh.ru/magritte-ui-action-bar';
7
7
  import '@hh.ru/magritte-ui-breakpoint';
8
- import './DropContainer-BsSQeLTZ.js';
8
+ import './DropContainer-CiVP6tCy.js';
9
+ import 'classnames';
9
10
  import '@hh.ru/magritte-common-use-multiple-refs';
10
11
  import '@hh.ru/magritte-ui-divider';
12
+ import '@hh.ru/magritte-ui-scrollbar';
11
13
  import '@hh.ru/magritte-ui-layer';
12
14
  //# sourceMappingURL=index.js.map
package/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-drop",
3
- "version": "11.0.11",
3
+ "version": "11.1.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -26,7 +26,8 @@
26
26
  "@hh.ru/magritte-ui-action-bar": "5.0.5",
27
27
  "@hh.ru/magritte-ui-breakpoint": "6.0.1",
28
28
  "@hh.ru/magritte-ui-divider": "3.0.5",
29
- "@hh.ru/magritte-ui-layer": "3.0.3"
29
+ "@hh.ru/magritte-ui-layer": "3.0.3",
30
+ "@hh.ru/magritte-ui-scrollbar": "1.0.1"
30
31
  },
31
32
  "peerDependencies": {
32
33
  "classnames": "2.3.2",
@@ -35,5 +36,5 @@
35
36
  "publishConfig": {
36
37
  "access": "public"
37
38
  },
38
- "gitHead": "18a4c9f53b8572077ce0fba28266865c1b619cee"
39
+ "gitHead": "8c9ac514d963c54434c7f9ed84d3ae347fc5f396"
39
40
  }
package/DropContainer-BsSQeLTZ.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"DropContainer-BsSQeLTZ.js","sources":["../src/DropContainer.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren, useEffect, useCallback, forwardRef, CSSProperties } from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\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 dividerState: DividerState;\n padding: CSSProperties;\n }>\n>(({ children, dividerState, padding }, ref) => {\n const dividerRef = useRef<HTMLDivElement>(null);\n const showDividerRef = useRef(false);\n showDividerRef.current = dividerState !== 'hide';\n const contentContainerRef = useRef<HTMLDivElement>(null);\n const contentContainerRefMulti = useMultipleRefs(contentContainerRef, ref);\n\n const updateDividerVisibility = useCallback(\n (showDivider: boolean) => {\n if (!contentContainerRef.current || !dividerRef.current) {\n return;\n }\n if (!showDivider) {\n dividerRef.current.style.visibility = 'hidden';\n return;\n }\n if (contentContainerRef?.current !== null && dividerRef.current) {\n const hasScroll =\n contentContainerRef.current.scrollHeight - contentContainerRef.current.clientHeight > 0;\n dividerRef.current.style.visibility = hasScroll ? 'visible' : 'hidden';\n }\n },\n [contentContainerRef, dividerRef]\n );\n\n useEffect(() => {\n const observer = new ResizeObserver(() => {\n updateDividerVisibility(showDividerRef.current);\n });\n observer.observe(contentContainerRef.current as Element);\n return () => observer.disconnect();\n }, [updateDividerVisibility]);\n\n useEffect(() => {\n updateDividerVisibility(showDividerRef.current);\n // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n }, [updateDividerVisibility, showDividerRef.current]);\n\n const props = showDividerRef.current\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 ref={contentContainerRefMulti} className={styles.dropContainer} {...props} style={padding}>\n {children}\n </div>\n <div ref={dividerRef} className={styles.dividerContainer} data-qa=\"drop-divider\">\n <Divider />\n </div>\n </>\n );\n});\n\nDropContainer.displayName = 'DropContainer';\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}