@foxford/ui 2.48.0-beta-971f42e-20241010 → 2.48.1-beta-5f7af17-20241016

package/components/DialogComponent/DialogComponent.js

@@ -1,2 +1,2 @@
-'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var constants$1=require('../../shared/constants.js');var DialogContainer=require('./DialogContainer.js');var dragging=require('./images/dragging.svg.js');var style=require('./style.js');var utils=require('./utils.js');var constants=require('./constants.js');var require$$0=require('react/jsx-runtime');var Visibility=require('../Visibility/Visibility.js');var Icon=require('../Icon/Icon.js');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var Button=require('../Button/Button.js');const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=ResizeObserver?new ResizeObserver((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))})):null;const DialogComponent=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:i="s",iconButtonProps:t={},captionProps:s={},titleProps:n={},subtitleProps:o={},draggingIconProps:a={},imgSrc:l={},skeletonProps:c={},children:d,caption:u,title:$,subtitle:g,controls:x,imgLandscapePositionRight:y,draggable:S,loading:q,sizeXXS:p,sizeXS:h,sizeS:j,sizeM:b,sizeL:I,sizeXL:m,onGrab:z,onNudge:T,...v}=e;const k={size:i,sizeXXS:p,sizeXS:h,sizeS:j,sizeM:b,sizeL:I,sizeXL:m};const B=utils.getCommonSizeProps(k);const[w,D]=React.useState(null);const[P,E]=React.useState(null);const R=React.useRef(null);const L=React.useCallback((e=>{e.scrollHeight===e.clientHeight?(D(null),E(null)):(D(e.scrollTop<=0),E(Math.abs(e.scrollHeight-e.clientHeight-e.scrollTop)<=1))}),[]);return React.useLayoutEffect((()=>(resizeObserver&&R.current&&(R.current[resizeHandlerSymbol]=L,resizeObserver.observe(R.current,{box:'border-box'})),()=>{resizeObserver&&R.current&&resizeObserver.unobserve(R.current)})),[L]),require$$0.jsxs(style.Root,{...v,...k,ref:r,children:[(S||l.portrait)&&require$$0.jsxs(Visibility.Visibility,{...k,sizes:constants.VISIBILITY_PORTRAIT,children:[S&&require$$0.jsx(style.DraggingHandle,{onPointerDown:z,children:require$$0.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:T,children:require$$0.jsx(Icon.Icon,{icon:require$$0.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary",...a})})}),l.portrait&&require$$0.jsxs(style.MediaPortrait,{children:[require$$0.jsx(style.Placeholder,{orientation:"portrait",aspectRatio:"3:1"}),q?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.portrait})]})]}),l.landscape&&!y&&require$$0.jsx(Visibility.Visibility,{...k,sizes:constants.VISIBILITY_LANDSCAPE_MEDIA,children:require$$0.jsxs(style.MediaLandscape,{children:[require$$0.jsx(style.Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),q?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.landscape})]})}),t.onClick&&require$$0.jsx(style.PositionedIconButton,{size:"l",icon:"close",...t}),require$$0.jsxs(DialogContainer.DialogContainer,{...k,children:[S&&require$$0.jsx(Visibility.Visibility,{...k,sizes:constants.VISIBILITY_LANDSCAPE,children:require$$0.jsx(style.DraggingHandle,{onPointerDown:z,children:require$$0.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:T,children:require$$0.jsx(Icon.Icon,{icon:require$$0.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary",...a})})})}),require$$0.jsx(style.Fading,{visible:w===!1}),require$$0.jsx(style.ScrollableContent,{ref:R,tabIndex:0,onScroll:e=>{resizeObserver&&L(e.currentTarget)},onKeyDown:e=>{constants$1.keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):constants$1.keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:require$$0.jsxs(require$$0.Fragment,q?{children:[require$$0.jsx(Skeleton.Skeleton,{children:require$$0.jsx(Text.Text,{appearance:"heading",marginBottom:"1.5em",sizes:constants.SIZES_TITLE,...B,...n})}),require$$0.jsx(Skeleton.Skeleton,{width:"90%",children:require$$0.jsx(Text.Text,{appearance:"body",marginBottom:"0.4em",sizes:constants.SIZES_SUBTITLE,...B,...o})}),require$$0.jsx(Skeleton.Skeleton,{width:"70%",children:require$$0.jsx(Text.Text,{appearance:"body",marginBottom:"0.4em",sizes:constants.SIZES_SUBTITLE,...B,...o})}),require$$0.jsx(Skeleton.Skeleton,{width:"50%",children:require$$0.jsx(Text.Text,{appearance:"body",marginBottom:"0.8em",sizes:constants.SIZES_SUBTITLE,...B,...o})})]}:{children:[u&&require$$0.jsx(Text.Text,{appearance:"body",color:"content-onmain-tertiary",wordBreak:"break-word",marginBottom:"0.8em",sizes:constants.SIZES_CAPTION,...B,...s,children:u}),$&&require$$0.jsx(Text.Text,{as:"h2",appearance:"heading",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.5em",sizes:constants.SIZES_TITLE,...B,...n,children:$}),g&&require$$0.jsx(Text.Text,{as:"p",appearance:"body",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.8em",sizes:constants.SIZES_SUBTITLE,...B,...o,children:g}),d]})}),require$$0.jsx(style.Fading,{visible:P===!1,after:!0}),x&&require$$0.jsx(style.Controls,{children:q?require$$0.jsx(Skeleton.Skeleton,{borderRadius:48,...c,children:require$$0.jsx(Button.Button,{preset:"brand",...B})}):x(B)})]}),l.landscape&&y&&require$$0.jsx(Visibility.Visibility,{...k,sizes:constants.VISIBILITY_LANDSCAPE_MEDIA,children:require$$0.jsxs(style.MediaLandscape,{children:[require$$0.jsx(style.Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),q?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.landscape})]})})]})})),{sizes:constants.SIZES,displayName:'DialogComponent'});exports.SIZES=constants.SIZES,exports.DialogComponent=DialogComponent;
+'use strict';var React=require('react');var ResizeObserver=require('../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.js');var withMergedProps=require('../../hocs/withMergedProps.js');var constants$1=require('../../shared/constants.js');var DialogContainer=require('./DialogContainer.js');var dragging=require('./images/dragging.svg.js');var style=require('./style.js');var utils=require('./utils.js');var constants=require('./constants.js');var require$$0=require('react/jsx-runtime');var Visibility=require('../Visibility/Visibility.js');var Icon=require('../Icon/Icon.js');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var Button=require('../Button/Button.js');const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver.default((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));const DialogComponent=withMergedProps.withMergedProps(React.forwardRef(((e,r)=>{const{size:i="s",iconButtonProps:t={},captionProps:s={},titleProps:n={},subtitleProps:o={},draggingIconProps:a={},imgSrc:l={},skeletonProps:c={},children:d,caption:u,title:$,subtitle:g,controls:x,imgLandscapePositionRight:y,draggable:p,loading:S,sizeXXS:q,sizeXS:j,sizeS:h,sizeM:b,sizeL:I,sizeXL:m,onGrab:z,onNudge:T,...v}=e;const k={size:i,sizeXXS:q,sizeXS:j,sizeS:h,sizeM:b,sizeL:I,sizeXL:m};const B=utils.getCommonSizeProps(k);const[w,D]=React.useState(null);const[P,E]=React.useState(null);const R=React.useRef(null);const L=React.useCallback((e=>{e.scrollHeight===e.clientHeight?(D(null),E(null)):(D(e.scrollTop<=0),E(Math.abs(e.scrollHeight-e.clientHeight-e.scrollTop)<=1))}),[]);return React.useLayoutEffect((()=>(R.current&&(R.current[resizeHandlerSymbol]=L,resizeObserver.observe(R.current)),()=>{R.current&&resizeObserver.unobserve(R.current)})),[L]),require$$0.jsxs(style.Root,{...v,...k,ref:r,children:[(p||l.portrait)&&require$$0.jsxs(Visibility.Visibility,{...k,sizes:constants.VISIBILITY_PORTRAIT,children:[p&&require$$0.jsx(style.DraggingHandle,{onPointerDown:z,children:require$$0.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:T,children:require$$0.jsx(Icon.Icon,{icon:require$$0.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary",...a})})}),l.portrait&&require$$0.jsxs(style.MediaPortrait,{children:[require$$0.jsx(style.Placeholder,{orientation:"portrait",aspectRatio:"3:1"}),S?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.portrait})]})]}),l.landscape&&!y&&require$$0.jsx(Visibility.Visibility,{...k,sizes:constants.VISIBILITY_LANDSCAPE_MEDIA,children:require$$0.jsxs(style.MediaLandscape,{children:[require$$0.jsx(style.Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),S?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.landscape})]})}),t.onClick&&require$$0.jsx(style.PositionedIconButton,{size:"l",icon:"close",...t}),require$$0.jsxs(DialogContainer.DialogContainer,{...k,children:[p&&require$$0.jsx(Visibility.Visibility,{...k,sizes:constants.VISIBILITY_LANDSCAPE,children:require$$0.jsx(style.DraggingHandle,{onPointerDown:z,children:require$$0.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:T,children:require$$0.jsx(Icon.Icon,{icon:require$$0.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary",...a})})})}),require$$0.jsx(style.Fading,{visible:w===!1}),require$$0.jsx(style.ScrollableContent,{ref:R,tabIndex:0,onScroll:e=>{L(e.currentTarget)},onKeyDown:e=>{constants$1.keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):constants$1.keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:require$$0.jsxs(require$$0.Fragment,S?{children:[require$$0.jsx(Skeleton.Skeleton,{children:require$$0.jsx(Text.Text,{appearance:"heading",marginBottom:"1.5em",sizes:constants.SIZES_TITLE,...B,...n})}),require$$0.jsx(Skeleton.Skeleton,{width:"90%",children:require$$0.jsx(Text.Text,{appearance:"body",marginBottom:"0.4em",sizes:constants.SIZES_SUBTITLE,...B,...o})}),require$$0.jsx(Skeleton.Skeleton,{width:"70%",children:require$$0.jsx(Text.Text,{appearance:"body",marginBottom:"0.4em",sizes:constants.SIZES_SUBTITLE,...B,...o})}),require$$0.jsx(Skeleton.Skeleton,{width:"50%",children:require$$0.jsx(Text.Text,{appearance:"body",marginBottom:"0.8em",sizes:constants.SIZES_SUBTITLE,...B,...o})})]}:{children:[u&&require$$0.jsx(Text.Text,{appearance:"body",color:"content-onmain-tertiary",wordBreak:"break-word",marginBottom:"0.8em",sizes:constants.SIZES_CAPTION,...B,...s,children:u}),$&&require$$0.jsx(Text.Text,{as:"h2",appearance:"heading",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.5em",sizes:constants.SIZES_TITLE,...B,...n,children:$}),g&&require$$0.jsx(Text.Text,{as:"p",appearance:"body",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.8em",sizes:constants.SIZES_SUBTITLE,...B,...o,children:g}),d]})}),require$$0.jsx(style.Fading,{visible:P===!1,after:!0}),x&&require$$0.jsx(style.Controls,{children:S?require$$0.jsx(Skeleton.Skeleton,{borderRadius:48,...c,children:require$$0.jsx(Button.Button,{preset:"brand",...B})}):x(B)})]}),l.landscape&&y&&require$$0.jsx(Visibility.Visibility,{...k,sizes:constants.VISIBILITY_LANDSCAPE_MEDIA,children:require$$0.jsxs(style.MediaLandscape,{children:[require$$0.jsx(style.Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),S?require$$0.jsx(style.MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):require$$0.jsx(style.Media,{src:l.landscape})]})})]})})),{sizes:constants.SIZES,displayName:'DialogComponent'});exports.SIZES=constants.SIZES,exports.DialogComponent=DialogComponent;
 //# sourceMappingURL=DialogComponent.js.map

package/components/DialogComponent/DialogComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogComponent.js","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, useCallback } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Visibility } from 'components/Visibility'\nimport { Skeleton } from 'components/Skeleton'\nimport { Button } from 'components/Button'\nimport type { Nullable } from 'shared/types'\nimport { DialogContainer } from './DialogContainer'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport { getCommonSizeProps } from './utils'\nimport {\n  SIZES,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  VISIBILITY_PORTRAIT,\n  VISIBILITY_LANDSCAPE,\n  VISIBILITY_LANDSCAPE_MEDIA,\n} from './constants'\nimport type { DialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver: Nullable<ResizeObserver> = ResizeObserver\n  ? new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n          entry.target[resizeHandlerSymbol](entry.target)\n        }\n      })\n    })\n  : null\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n */\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      size = 's',\n      iconButtonProps = {},\n      captionProps = {},\n      titleProps = {},\n      subtitleProps = {},\n      draggingIconProps = {},\n      imgSrc = {},\n      skeletonProps = {},\n      children,\n      caption,\n      title,\n      subtitle,\n      controls,\n      imgLandscapePositionRight,\n      draggable,\n      loading,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const dialogSizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const sizeProps = getCommonSizeProps(dialogSizeProps)\n\n    const [scrollTop, setScrollTop] = useState<Nullable<boolean>>(null)\n    const [scrollBottom, setScrollBottom] = useState<Nullable<boolean>>(null)\n\n    const scrollable = useRef<HTMLDivElement | null>(null)\n\n    const handleScrollThresholds = useCallback((e: HTMLDivElement) => {\n      if (e.scrollHeight === e.clientHeight) {\n        setScrollTop(null)\n        setScrollBottom(null)\n      } else {\n        setScrollTop(e.scrollTop <= 0)\n        setScrollBottom(Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) <= 1)\n      }\n    }, [])\n\n    useLayoutEffect(() => {\n      if (resizeObserver && scrollable.current) {\n        scrollable.current[resizeHandlerSymbol] = handleScrollThresholds\n        resizeObserver.observe(scrollable.current, { box: 'border-box' })\n      }\n\n      return () => {\n        if (resizeObserver && scrollable.current) {\n          resizeObserver.unobserve(scrollable.current)\n        }\n      }\n    }, [handleScrollThresholds])\n\n    return (\n      <Styled.Root {...restProps} {...dialogSizeProps} ref={ref}>\n        {(draggable || imgSrc.portrait) && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            {draggable && (\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            )}\n            {imgSrc.portrait && (\n              <Styled.MediaPortrait>\n                <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                {loading ? (\n                  <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                ) : (\n                  <Styled.Media src={imgSrc.portrait} />\n                )}\n              </Styled.MediaPortrait>\n            )}\n          </Visibility>\n        )}\n        {imgSrc.landscape && !imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {iconButtonProps.onClick && <Styled.PositionedIconButton size='l' icon='close' {...iconButtonProps} />}\n        <DialogContainer {...dialogSizeProps}>\n          {draggable && (\n            <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE}>\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            </Visibility>\n          )}\n          <Styled.Fading visible={scrollTop === false} />\n          <Styled.ScrollableContent\n            ref={scrollable}\n            tabIndex={0}\n            onScroll={(evt) => {\n              if (!resizeObserver) return\n              handleScrollThresholds(evt.currentTarget)\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, -13)\n              } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, 13)\n              }\n            }}\n          >\n            {loading ? (\n              <>\n                <Skeleton>\n                  <Text appearance='heading' marginBottom='1.5em' sizes={SIZES_TITLE} {...sizeProps} {...titleProps} />\n                </Skeleton>\n                <Skeleton width='90%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='70%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='50%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n              </>\n            ) : (\n              <>\n                {caption && (\n                  <Text\n                    appearance='body'\n                    color='content-onmain-tertiary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_CAPTION}\n                    {...sizeProps}\n                    {...captionProps}\n                  >\n                    {caption}\n                  </Text>\n                )}\n                {title && (\n                  <Text\n                    as='h2'\n                    appearance='heading'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.5em'\n                    sizes={SIZES_TITLE}\n                    {...sizeProps}\n                    {...titleProps}\n                  >\n                    {title}\n                  </Text>\n                )}\n                {subtitle && (\n                  <Text\n                    as='p'\n                    appearance='body'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  >\n                    {subtitle}\n                  </Text>\n                )}\n                {children}\n              </>\n            )}\n          </Styled.ScrollableContent>\n          <Styled.Fading visible={scrollBottom === false} after />\n          {controls && (\n            <Styled.Controls>\n              {loading ? (\n                <Skeleton borderRadius={48} {...skeletonProps}>\n                  <Button preset='brand' {...sizeProps} />\n                </Skeleton>\n              ) : (\n                controls(sizeProps)\n              )}\n            </Styled.Controls>\n          )}\n        </DialogContainer>\n        {imgSrc.landscape && imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: SIZES,\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n\nexport { SIZES }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","entries","forEach","entry","target","DialogComponent","withMergedProps","forwardRef","props","ref","size","iconButtonProps","captionProps","titleProps","subtitleProps","draggingIconProps","imgSrc","skeletonProps","children","caption","title","subtitle","controls","imgLandscapePositionRight","draggable","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","onGrab","onNudge","restProps","dialogSizeProps","sizeProps","getCommonSizeProps","scrollTop","setScrollTop","useState","scrollBottom","setScrollBottom","scrollable","useRef","handleScrollThresholds","useCallback","e","scrollHeight","clientHeight","Math","abs","useLayoutEffect","current","observe","box","unobserve","_jsxs","Styled","portrait","jsxs","Visibility","sizes","VISIBILITY_PORTRAIT","_jsx","jsx","onPointerDown","tabIndex","onKeyDown","Icon","icon","Dragging","default","color","orientation","aspectRatio","width","height","borderRadius","src","landscape","VISIBILITY_LANDSCAPE_MEDIA","onClick","DialogContainer","VISIBILITY_LANDSCAPE","visible","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","_Fragment","Skeleton","Text","appearance","marginBottom","SIZES_TITLE","SIZES_SUBTITLE","wordBreak","SIZES_CAPTION","as","after","Button","preset","SIZES","displayName"],"mappings":"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"}
+{"version":3,"file":"DialogComponent.js","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Visibility } from 'components/Visibility'\nimport { Skeleton } from 'components/Skeleton'\nimport { Button } from 'components/Button'\nimport type { Nullable } from 'shared/types'\nimport { DialogContainer } from './DialogContainer'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport { getCommonSizeProps } from './utils'\nimport {\n  SIZES,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  VISIBILITY_PORTRAIT,\n  VISIBILITY_LANDSCAPE,\n  VISIBILITY_LANDSCAPE_MEDIA,\n} from './constants'\nimport type { DialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n  entries.forEach((entry) => {\n    if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n      entry.target[resizeHandlerSymbol](entry.target)\n    }\n  })\n})\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n */\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      size = 's',\n      iconButtonProps = {},\n      captionProps = {},\n      titleProps = {},\n      subtitleProps = {},\n      draggingIconProps = {},\n      imgSrc = {},\n      skeletonProps = {},\n      children,\n      caption,\n      title,\n      subtitle,\n      controls,\n      imgLandscapePositionRight,\n      draggable,\n      loading,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const dialogSizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const sizeProps = getCommonSizeProps(dialogSizeProps)\n\n    const [scrollTop, setScrollTop] = useState<Nullable<boolean>>(null)\n    const [scrollBottom, setScrollBottom] = useState<Nullable<boolean>>(null)\n\n    const scrollable = useRef<HTMLDivElement | null>(null)\n\n    const handleScrollThresholds = useCallback((e: HTMLDivElement) => {\n      if (e.scrollHeight === e.clientHeight) {\n        setScrollTop(null)\n        setScrollBottom(null)\n      } else {\n        setScrollTop(e.scrollTop <= 0)\n        setScrollBottom(Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) <= 1)\n      }\n    }, [])\n\n    useLayoutEffect(() => {\n      if (scrollable.current) {\n        scrollable.current[resizeHandlerSymbol] = handleScrollThresholds\n        resizeObserver.observe(scrollable.current)\n      }\n\n      return () => {\n        if (scrollable.current) {\n          resizeObserver.unobserve(scrollable.current)\n        }\n      }\n    }, [handleScrollThresholds])\n\n    return (\n      <Styled.Root {...restProps} {...dialogSizeProps} ref={ref}>\n        {(draggable || imgSrc.portrait) && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            {draggable && (\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            )}\n            {imgSrc.portrait && (\n              <Styled.MediaPortrait>\n                <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                {loading ? (\n                  <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                ) : (\n                  <Styled.Media src={imgSrc.portrait} />\n                )}\n              </Styled.MediaPortrait>\n            )}\n          </Visibility>\n        )}\n        {imgSrc.landscape && !imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {iconButtonProps.onClick && <Styled.PositionedIconButton size='l' icon='close' {...iconButtonProps} />}\n        <DialogContainer {...dialogSizeProps}>\n          {draggable && (\n            <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE}>\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            </Visibility>\n          )}\n          <Styled.Fading visible={scrollTop === false} />\n          <Styled.ScrollableContent\n            ref={scrollable}\n            tabIndex={0}\n            onScroll={(evt) => {\n              handleScrollThresholds(evt.currentTarget)\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, -13)\n              } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, 13)\n              }\n            }}\n          >\n            {loading ? (\n              <>\n                <Skeleton>\n                  <Text appearance='heading' marginBottom='1.5em' sizes={SIZES_TITLE} {...sizeProps} {...titleProps} />\n                </Skeleton>\n                <Skeleton width='90%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='70%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='50%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n              </>\n            ) : (\n              <>\n                {caption && (\n                  <Text\n                    appearance='body'\n                    color='content-onmain-tertiary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_CAPTION}\n                    {...sizeProps}\n                    {...captionProps}\n                  >\n                    {caption}\n                  </Text>\n                )}\n                {title && (\n                  <Text\n                    as='h2'\n                    appearance='heading'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.5em'\n                    sizes={SIZES_TITLE}\n                    {...sizeProps}\n                    {...titleProps}\n                  >\n                    {title}\n                  </Text>\n                )}\n                {subtitle && (\n                  <Text\n                    as='p'\n                    appearance='body'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  >\n                    {subtitle}\n                  </Text>\n                )}\n                {children}\n              </>\n            )}\n          </Styled.ScrollableContent>\n          <Styled.Fading visible={scrollBottom === false} after />\n          {controls && (\n            <Styled.Controls>\n              {loading ? (\n                <Skeleton borderRadius={48} {...skeletonProps}>\n                  <Button preset='brand' {...sizeProps} />\n                </Skeleton>\n              ) : (\n                controls(sizeProps)\n              )}\n            </Styled.Controls>\n          )}\n        </DialogContainer>\n        {imgSrc.landscape && imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: SIZES,\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n\nexport { SIZES }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","default","entries","forEach","entry","target","DialogComponent","withMergedProps","forwardRef","props","ref","size","iconButtonProps","captionProps","titleProps","subtitleProps","draggingIconProps","imgSrc","skeletonProps","children","caption","title","subtitle","controls","imgLandscapePositionRight","draggable","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","onGrab","onNudge","restProps","dialogSizeProps","sizeProps","getCommonSizeProps","scrollTop","setScrollTop","useState","scrollBottom","setScrollBottom","scrollable","useRef","handleScrollThresholds","useCallback","e","scrollHeight","clientHeight","Math","abs","useLayoutEffect","current","observe","unobserve","_jsxs","Styled","portrait","jsxs","Visibility","sizes","VISIBILITY_PORTRAIT","_jsx","jsx","onPointerDown","tabIndex","onKeyDown","Icon","icon","Dragging","color","orientation","aspectRatio","width","height","borderRadius","src","landscape","VISIBILITY_LANDSCAPE_MEDIA","onClick","DialogContainer","VISIBILITY_LANDSCAPE","visible","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","_Fragment","Skeleton","Text","appearance","marginBottom","SIZES_TITLE","SIZES_SUBTITLE","wordBreak","SIZES_CAPTION","as","after","Button","preset","SIZES","displayName"],"mappings":"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"}

package/components/DialogComponent/DialogComponent.mjs

@@ -1,2 +1,2 @@
-import{forwardRef,useState,useRef,useCallback,useLayoutEffect}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{DialogContainer}from'./DialogContainer.mjs';import SvgDragging from'./images/dragging.svg.mjs';import{Root,DraggingHandle,DraggingIconContainer,MediaPortrait,Placeholder,MediaSkeleton,Media,MediaLandscape,PositionedIconButton,Fading,ScrollableContent,Controls}from'./style.mjs';import{getCommonSizeProps}from'./utils.mjs';import{SIZES,VISIBILITY_PORTRAIT,VISIBILITY_LANDSCAPE_MEDIA,VISIBILITY_LANDSCAPE,SIZES_TITLE,SIZES_SUBTITLE,SIZES_CAPTION}from'./constants.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Visibility}from'../Visibility/Visibility.mjs';import{Icon}from'../Icon/Icon.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Button}from'../Button/Button.mjs';const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=ResizeObserver?new ResizeObserver((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))})):null;const DialogComponent=withMergedProps(forwardRef(((e,r)=>{const{size:o="s",iconButtonProps:i={},captionProps:t={},titleProps:n={},subtitleProps:s={},draggingIconProps:a={},imgSrc:l={},skeletonProps:c={},children:d,caption:m,title:g,subtitle:S,controls:p,imgLandscapePositionRight:I,draggable:x,loading:j,sizeXXS:h,sizeXS:b,sizeS:u,sizeM:z,sizeL:T,sizeXL:y,onGrab:f,onNudge:E,...B}=e;const D={size:o,sizeXXS:h,sizeXS:b,sizeS:u,sizeM:z,sizeL:T,sizeXL:y};const P=getCommonSizeProps(D);const[L,k]=useState(null);const[w,C]=useState(null);const M=useRef(null);const v=useCallback((e=>{e.scrollHeight===e.clientHeight?(k(null),C(null)):(k(e.scrollTop<=0),C(Math.abs(e.scrollHeight-e.clientHeight-e.scrollTop)<=1))}),[]);return useLayoutEffect((()=>(resizeObserver&&M.current&&(M.current[resizeHandlerSymbol]=v,resizeObserver.observe(M.current,{box:'border-box'})),()=>{resizeObserver&&M.current&&resizeObserver.unobserve(M.current)})),[v]),jsxs(Root,{...B,...D,ref:r,children:[(x||l.portrait)&&jsxs(Visibility,{...D,sizes:VISIBILITY_PORTRAIT,children:[x&&jsx(DraggingHandle,{onPointerDown:f,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:E,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary",...a})})}),l.portrait&&jsxs(MediaPortrait,{children:[jsx(Placeholder,{orientation:"portrait",aspectRatio:"3:1"}),j?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.portrait})]})]}),l.landscape&&!I&&jsx(Visibility,{...D,sizes:VISIBILITY_LANDSCAPE_MEDIA,children:jsxs(MediaLandscape,{children:[jsx(Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),j?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.landscape})]})}),i.onClick&&jsx(PositionedIconButton,{size:"l",icon:"close",...i}),jsxs(DialogContainer,{...D,children:[x&&jsx(Visibility,{...D,sizes:VISIBILITY_LANDSCAPE,children:jsx(DraggingHandle,{onPointerDown:f,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:E,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary",...a})})})}),jsx(Fading,{visible:L===!1}),jsx(ScrollableContent,{ref:M,tabIndex:0,onScroll:e=>{resizeObserver&&v(e.currentTarget)},onKeyDown:e=>{keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:jsxs(Fragment,j?{children:[jsx(Skeleton,{children:jsx(Text,{appearance:"heading",marginBottom:"1.5em",sizes:SIZES_TITLE,...P,...n})}),jsx(Skeleton,{width:"90%",children:jsx(Text,{appearance:"body",marginBottom:"0.4em",sizes:SIZES_SUBTITLE,...P,...s})}),jsx(Skeleton,{width:"70%",children:jsx(Text,{appearance:"body",marginBottom:"0.4em",sizes:SIZES_SUBTITLE,...P,...s})}),jsx(Skeleton,{width:"50%",children:jsx(Text,{appearance:"body",marginBottom:"0.8em",sizes:SIZES_SUBTITLE,...P,...s})})]}:{children:[m&&jsx(Text,{appearance:"body",color:"content-onmain-tertiary",wordBreak:"break-word",marginBottom:"0.8em",sizes:SIZES_CAPTION,...P,...t,children:m}),g&&jsx(Text,{as:"h2",appearance:"heading",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.5em",sizes:SIZES_TITLE,...P,...n,children:g}),S&&jsx(Text,{as:"p",appearance:"body",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.8em",sizes:SIZES_SUBTITLE,...P,...s,children:S}),d]})}),jsx(Fading,{visible:w===!1,after:!0}),p&&jsx(Controls,{children:j?jsx(Skeleton,{borderRadius:48,...c,children:jsx(Button,{preset:"brand",...P})}):p(P)})]}),l.landscape&&I&&jsx(Visibility,{...D,sizes:VISIBILITY_LANDSCAPE_MEDIA,children:jsxs(MediaLandscape,{children:[jsx(Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),j?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.landscape})]})})]})})),{sizes:SIZES,displayName:'DialogComponent'});export{DialogComponent,SIZES};
+import{forwardRef,useState,useRef,useCallback,useLayoutEffect}from'react';import ResizeObserver from'../../external/.pnpm/resize-observer-polyfill@1.5.1/node_modules/resize-observer-polyfill/dist/ResizeObserver.mjs';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{DialogContainer}from'./DialogContainer.mjs';import SvgDragging from'./images/dragging.svg.mjs';import{Root,DraggingHandle,DraggingIconContainer,MediaPortrait,Placeholder,MediaSkeleton,Media,MediaLandscape,PositionedIconButton,Fading,ScrollableContent,Controls}from'./style.mjs';import{getCommonSizeProps}from'./utils.mjs';import{SIZES,VISIBILITY_PORTRAIT,VISIBILITY_LANDSCAPE_MEDIA,VISIBILITY_LANDSCAPE,SIZES_TITLE,SIZES_SUBTITLE,SIZES_CAPTION}from'./constants.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Visibility}from'../Visibility/Visibility.mjs';import{Icon}from'../Icon/Icon.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Button}from'../Button/Button.mjs';const resizeHandlerSymbol=Symbol('resize-handler');const resizeObserver=new ResizeObserver((e=>{e.forEach((e=>{typeof e.target[resizeHandlerSymbol]=='function'&&e.target[resizeHandlerSymbol](e.target)}))}));const DialogComponent=withMergedProps(forwardRef(((e,r)=>{const{size:o="s",iconButtonProps:i={},captionProps:t={},titleProps:n={},subtitleProps:s={},draggingIconProps:a={},imgSrc:l={},skeletonProps:c={},children:d,caption:m,title:g,subtitle:p,controls:S,imgLandscapePositionRight:I,draggable:x,loading:j,sizeXXS:h,sizeXS:b,sizeS:u,sizeM:z,sizeL:T,sizeXL:y,onGrab:f,onNudge:E,...B}=e;const D={size:o,sizeXXS:h,sizeXS:b,sizeS:u,sizeM:z,sizeL:T,sizeXL:y};const P=getCommonSizeProps(D);const[L,k]=useState(null);const[w,C]=useState(null);const M=useRef(null);const R=useCallback((e=>{e.scrollHeight===e.clientHeight?(k(null),C(null)):(k(e.scrollTop<=0),C(Math.abs(e.scrollHeight-e.clientHeight-e.scrollTop)<=1))}),[]);return useLayoutEffect((()=>(M.current&&(M.current[resizeHandlerSymbol]=R,resizeObserver.observe(M.current)),()=>{M.current&&resizeObserver.unobserve(M.current)})),[R]),jsxs(Root,{...B,...D,ref:r,children:[(x||l.portrait)&&jsxs(Visibility,{...D,sizes:VISIBILITY_PORTRAIT,children:[x&&jsx(DraggingHandle,{onPointerDown:f,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:E,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary",...a})})}),l.portrait&&jsxs(MediaPortrait,{children:[jsx(Placeholder,{orientation:"portrait",aspectRatio:"3:1"}),j?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.portrait})]})]}),l.landscape&&!I&&jsx(Visibility,{...D,sizes:VISIBILITY_LANDSCAPE_MEDIA,children:jsxs(MediaLandscape,{children:[jsx(Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),j?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.landscape})]})}),i.onClick&&jsx(PositionedIconButton,{size:"l",icon:"close",...i}),jsxs(DialogContainer,{...D,children:[x&&jsx(Visibility,{...D,sizes:VISIBILITY_LANDSCAPE,children:jsx(DraggingHandle,{onPointerDown:f,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:E,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary",...a})})})}),jsx(Fading,{visible:L===!1}),jsx(ScrollableContent,{ref:M,tabIndex:0,onScroll:e=>{R(e.currentTarget)},onKeyDown:e=>{keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:jsxs(Fragment,j?{children:[jsx(Skeleton,{children:jsx(Text,{appearance:"heading",marginBottom:"1.5em",sizes:SIZES_TITLE,...P,...n})}),jsx(Skeleton,{width:"90%",children:jsx(Text,{appearance:"body",marginBottom:"0.4em",sizes:SIZES_SUBTITLE,...P,...s})}),jsx(Skeleton,{width:"70%",children:jsx(Text,{appearance:"body",marginBottom:"0.4em",sizes:SIZES_SUBTITLE,...P,...s})}),jsx(Skeleton,{width:"50%",children:jsx(Text,{appearance:"body",marginBottom:"0.8em",sizes:SIZES_SUBTITLE,...P,...s})})]}:{children:[m&&jsx(Text,{appearance:"body",color:"content-onmain-tertiary",wordBreak:"break-word",marginBottom:"0.8em",sizes:SIZES_CAPTION,...P,...t,children:m}),g&&jsx(Text,{as:"h2",appearance:"heading",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.5em",sizes:SIZES_TITLE,...P,...n,children:g}),p&&jsx(Text,{as:"p",appearance:"body",color:"content-onmain-primary",wordBreak:"break-word",marginBottom:"0.8em",sizes:SIZES_SUBTITLE,...P,...s,children:p}),d]})}),jsx(Fading,{visible:w===!1,after:!0}),S&&jsx(Controls,{children:j?jsx(Skeleton,{borderRadius:48,...c,children:jsx(Button,{preset:"brand",...P})}):S(P)})]}),l.landscape&&I&&jsx(Visibility,{...D,sizes:VISIBILITY_LANDSCAPE_MEDIA,children:jsxs(MediaLandscape,{children:[jsx(Placeholder,{orientation:"landscape",aspectRatio:"5:7"}),j?jsx(MediaSkeleton,{width:"100%",height:"100%",borderRadius:0,...c}):jsx(Media,{src:l.landscape})]})})]})})),{sizes:SIZES,displayName:'DialogComponent'});export{DialogComponent,SIZES};
 //# sourceMappingURL=DialogComponent.mjs.map

package/components/DialogComponent/DialogComponent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, useCallback } from 'react'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Visibility } from 'components/Visibility'\nimport { Skeleton } from 'components/Skeleton'\nimport { Button } from 'components/Button'\nimport type { Nullable } from 'shared/types'\nimport { DialogContainer } from './DialogContainer'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport { getCommonSizeProps } from './utils'\nimport {\n  SIZES,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  VISIBILITY_PORTRAIT,\n  VISIBILITY_LANDSCAPE,\n  VISIBILITY_LANDSCAPE_MEDIA,\n} from './constants'\nimport type { DialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver: Nullable<ResizeObserver> = ResizeObserver\n  ? new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n          entry.target[resizeHandlerSymbol](entry.target)\n        }\n      })\n    })\n  : null\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n */\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      size = 's',\n      iconButtonProps = {},\n      captionProps = {},\n      titleProps = {},\n      subtitleProps = {},\n      draggingIconProps = {},\n      imgSrc = {},\n      skeletonProps = {},\n      children,\n      caption,\n      title,\n      subtitle,\n      controls,\n      imgLandscapePositionRight,\n      draggable,\n      loading,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const dialogSizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const sizeProps = getCommonSizeProps(dialogSizeProps)\n\n    const [scrollTop, setScrollTop] = useState<Nullable<boolean>>(null)\n    const [scrollBottom, setScrollBottom] = useState<Nullable<boolean>>(null)\n\n    const scrollable = useRef<HTMLDivElement | null>(null)\n\n    const handleScrollThresholds = useCallback((e: HTMLDivElement) => {\n      if (e.scrollHeight === e.clientHeight) {\n        setScrollTop(null)\n        setScrollBottom(null)\n      } else {\n        setScrollTop(e.scrollTop <= 0)\n        setScrollBottom(Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) <= 1)\n      }\n    }, [])\n\n    useLayoutEffect(() => {\n      if (resizeObserver && scrollable.current) {\n        scrollable.current[resizeHandlerSymbol] = handleScrollThresholds\n        resizeObserver.observe(scrollable.current, { box: 'border-box' })\n      }\n\n      return () => {\n        if (resizeObserver && scrollable.current) {\n          resizeObserver.unobserve(scrollable.current)\n        }\n      }\n    }, [handleScrollThresholds])\n\n    return (\n      <Styled.Root {...restProps} {...dialogSizeProps} ref={ref}>\n        {(draggable || imgSrc.portrait) && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            {draggable && (\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            )}\n            {imgSrc.portrait && (\n              <Styled.MediaPortrait>\n                <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                {loading ? (\n                  <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                ) : (\n                  <Styled.Media src={imgSrc.portrait} />\n                )}\n              </Styled.MediaPortrait>\n            )}\n          </Visibility>\n        )}\n        {imgSrc.landscape && !imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {iconButtonProps.onClick && <Styled.PositionedIconButton size='l' icon='close' {...iconButtonProps} />}\n        <DialogContainer {...dialogSizeProps}>\n          {draggable && (\n            <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE}>\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            </Visibility>\n          )}\n          <Styled.Fading visible={scrollTop === false} />\n          <Styled.ScrollableContent\n            ref={scrollable}\n            tabIndex={0}\n            onScroll={(evt) => {\n              if (!resizeObserver) return\n              handleScrollThresholds(evt.currentTarget)\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, -13)\n              } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, 13)\n              }\n            }}\n          >\n            {loading ? (\n              <>\n                <Skeleton>\n                  <Text appearance='heading' marginBottom='1.5em' sizes={SIZES_TITLE} {...sizeProps} {...titleProps} />\n                </Skeleton>\n                <Skeleton width='90%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='70%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='50%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n              </>\n            ) : (\n              <>\n                {caption && (\n                  <Text\n                    appearance='body'\n                    color='content-onmain-tertiary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_CAPTION}\n                    {...sizeProps}\n                    {...captionProps}\n                  >\n                    {caption}\n                  </Text>\n                )}\n                {title && (\n                  <Text\n                    as='h2'\n                    appearance='heading'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.5em'\n                    sizes={SIZES_TITLE}\n                    {...sizeProps}\n                    {...titleProps}\n                  >\n                    {title}\n                  </Text>\n                )}\n                {subtitle && (\n                  <Text\n                    as='p'\n                    appearance='body'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  >\n                    {subtitle}\n                  </Text>\n                )}\n                {children}\n              </>\n            )}\n          </Styled.ScrollableContent>\n          <Styled.Fading visible={scrollBottom === false} after />\n          {controls && (\n            <Styled.Controls>\n              {loading ? (\n                <Skeleton borderRadius={48} {...skeletonProps}>\n                  <Button preset='brand' {...sizeProps} />\n                </Skeleton>\n              ) : (\n                controls(sizeProps)\n              )}\n            </Styled.Controls>\n          )}\n        </DialogContainer>\n        {imgSrc.landscape && imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: SIZES,\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n\nexport { SIZES }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","entries","forEach","entry","target","DialogComponent","withMergedProps","forwardRef","props","ref","size","iconButtonProps","captionProps","titleProps","subtitleProps","draggingIconProps","imgSrc","skeletonProps","children","caption","title","subtitle","controls","imgLandscapePositionRight","draggable","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","onGrab","onNudge","restProps","dialogSizeProps","sizeProps","getCommonSizeProps","scrollTop","setScrollTop","useState","scrollBottom","setScrollBottom","scrollable","useRef","handleScrollThresholds","useCallback","e","scrollHeight","clientHeight","Math","abs","useLayoutEffect","current","observe","box","unobserve","_jsxs","Styled","portrait","Visibility","sizes","VISIBILITY_PORTRAIT","_jsx","onPointerDown","tabIndex","onKeyDown","Icon","icon","Dragging","color","orientation","aspectRatio","width","height","borderRadius","src","landscape","VISIBILITY_LANDSCAPE_MEDIA","onClick","DialogContainer","VISIBILITY_LANDSCAPE","visible","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","_Fragment","Skeleton","Text","appearance","marginBottom","SIZES_TITLE","SIZES_SUBTITLE","wordBreak","SIZES_CAPTION","as","after","Button","preset","SIZES","displayName"],"mappings":"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"}
+{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState, useCallback } from 'react'\nimport ResizeObserver from 'resize-observer-polyfill'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Visibility } from 'components/Visibility'\nimport { Skeleton } from 'components/Skeleton'\nimport { Button } from 'components/Button'\nimport type { Nullable } from 'shared/types'\nimport { DialogContainer } from './DialogContainer'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport { getCommonSizeProps } from './utils'\nimport {\n  SIZES,\n  SIZES_CAPTION,\n  SIZES_TITLE,\n  SIZES_SUBTITLE,\n  VISIBILITY_PORTRAIT,\n  VISIBILITY_LANDSCAPE,\n  VISIBILITY_LANDSCAPE_MEDIA,\n} from './constants'\nimport type { DialogComponentProps } from './types'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst resizeHandlerSymbol = Symbol('resize-handler')\n\nconst resizeObserver = new ResizeObserver((entries) => {\n  entries.forEach((entry) => {\n    if (typeof entry.target[resizeHandlerSymbol] === 'function') {\n      entry.target[resizeHandlerSymbol](entry.target)\n    }\n  })\n})\n\n/**\n *\n * Компонент поддерживает все атрибуты \\<div\\> элемента.\n *\n * Можно передать \"ref\", который будет ассоциирован с рутовым элементом.\n *\n * Поддерживаются пропсы определения размеров в зависимости от ширины вьюпорта.\n *\n * Полный интерфейс можно посмотреть [тут](https://github.com/foxford/ui/blob/master/src/components/DialogComponent/types.ts).\n */\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n  DialogComponentProps,\n  HTMLDivElement\n>(\n  forwardRef((props, ref) => {\n    const {\n      size = 's',\n      iconButtonProps = {},\n      captionProps = {},\n      titleProps = {},\n      subtitleProps = {},\n      draggingIconProps = {},\n      imgSrc = {},\n      skeletonProps = {},\n      children,\n      caption,\n      title,\n      subtitle,\n      controls,\n      imgLandscapePositionRight,\n      draggable,\n      loading,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n      onGrab,\n      onNudge,\n      ...restProps\n    } = props\n\n    const dialogSizeProps = {\n      size,\n      sizeXXS,\n      sizeXS,\n      sizeS,\n      sizeM,\n      sizeL,\n      sizeXL,\n    }\n\n    const sizeProps = getCommonSizeProps(dialogSizeProps)\n\n    const [scrollTop, setScrollTop] = useState<Nullable<boolean>>(null)\n    const [scrollBottom, setScrollBottom] = useState<Nullable<boolean>>(null)\n\n    const scrollable = useRef<HTMLDivElement | null>(null)\n\n    const handleScrollThresholds = useCallback((e: HTMLDivElement) => {\n      if (e.scrollHeight === e.clientHeight) {\n        setScrollTop(null)\n        setScrollBottom(null)\n      } else {\n        setScrollTop(e.scrollTop <= 0)\n        setScrollBottom(Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) <= 1)\n      }\n    }, [])\n\n    useLayoutEffect(() => {\n      if (scrollable.current) {\n        scrollable.current[resizeHandlerSymbol] = handleScrollThresholds\n        resizeObserver.observe(scrollable.current)\n      }\n\n      return () => {\n        if (scrollable.current) {\n          resizeObserver.unobserve(scrollable.current)\n        }\n      }\n    }, [handleScrollThresholds])\n\n    return (\n      <Styled.Root {...restProps} {...dialogSizeProps} ref={ref}>\n        {(draggable || imgSrc.portrait) && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_PORTRAIT}>\n            {draggable && (\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            )}\n            {imgSrc.portrait && (\n              <Styled.MediaPortrait>\n                <Styled.Placeholder orientation='portrait' aspectRatio='3:1' />\n                {loading ? (\n                  <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n                ) : (\n                  <Styled.Media src={imgSrc.portrait} />\n                )}\n              </Styled.MediaPortrait>\n            )}\n          </Visibility>\n        )}\n        {imgSrc.landscape && !imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n        {iconButtonProps.onClick && <Styled.PositionedIconButton size='l' icon='close' {...iconButtonProps} />}\n        <DialogContainer {...dialogSizeProps}>\n          {draggable && (\n            <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE}>\n              <Styled.DraggingHandle onPointerDown={onGrab}>\n                <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n                  <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' {...draggingIconProps} />\n                </Styled.DraggingIconContainer>\n              </Styled.DraggingHandle>\n            </Visibility>\n          )}\n          <Styled.Fading visible={scrollTop === false} />\n          <Styled.ScrollableContent\n            ref={scrollable}\n            tabIndex={0}\n            onScroll={(evt) => {\n              handleScrollThresholds(evt.currentTarget)\n            }}\n            onKeyDown={(evt) => {\n              if (keyboardKeys.ArrowUp.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, -13)\n              } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n                evt.preventDefault()\n                evt.currentTarget.scrollBy(0, 13)\n              }\n            }}\n          >\n            {loading ? (\n              <>\n                <Skeleton>\n                  <Text appearance='heading' marginBottom='1.5em' sizes={SIZES_TITLE} {...sizeProps} {...titleProps} />\n                </Skeleton>\n                <Skeleton width='90%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='70%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.4em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n                <Skeleton width='50%'>\n                  <Text\n                    appearance='body'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  />\n                </Skeleton>\n              </>\n            ) : (\n              <>\n                {caption && (\n                  <Text\n                    appearance='body'\n                    color='content-onmain-tertiary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_CAPTION}\n                    {...sizeProps}\n                    {...captionProps}\n                  >\n                    {caption}\n                  </Text>\n                )}\n                {title && (\n                  <Text\n                    as='h2'\n                    appearance='heading'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.5em'\n                    sizes={SIZES_TITLE}\n                    {...sizeProps}\n                    {...titleProps}\n                  >\n                    {title}\n                  </Text>\n                )}\n                {subtitle && (\n                  <Text\n                    as='p'\n                    appearance='body'\n                    color='content-onmain-primary'\n                    wordBreak='break-word'\n                    marginBottom='0.8em'\n                    sizes={SIZES_SUBTITLE}\n                    {...sizeProps}\n                    {...subtitleProps}\n                  >\n                    {subtitle}\n                  </Text>\n                )}\n                {children}\n              </>\n            )}\n          </Styled.ScrollableContent>\n          <Styled.Fading visible={scrollBottom === false} after />\n          {controls && (\n            <Styled.Controls>\n              {loading ? (\n                <Skeleton borderRadius={48} {...skeletonProps}>\n                  <Button preset='brand' {...sizeProps} />\n                </Skeleton>\n              ) : (\n                controls(sizeProps)\n              )}\n            </Styled.Controls>\n          )}\n        </DialogContainer>\n        {imgSrc.landscape && imgLandscapePositionRight && (\n          <Visibility {...dialogSizeProps} sizes={VISIBILITY_LANDSCAPE_MEDIA}>\n            <Styled.MediaLandscape>\n              <Styled.Placeholder orientation='landscape' aspectRatio='5:7' />\n              {loading ? (\n                <Styled.MediaSkeleton width='100%' height='100%' borderRadius={0} {...skeletonProps} />\n              ) : (\n                <Styled.Media src={imgSrc.landscape} />\n              )}\n            </Styled.MediaLandscape>\n          </Visibility>\n        )}\n      </Styled.Root>\n    )\n  }),\n  {\n    sizes: SIZES,\n    displayName: COMPONENT_NAME,\n  }\n)\n\nexport { DialogComponent }\n\nexport { SIZES }\n"],"names":["resizeHandlerSymbol","Symbol","resizeObserver","ResizeObserver","entries","forEach","entry","target","DialogComponent","withMergedProps","forwardRef","props","ref","size","iconButtonProps","captionProps","titleProps","subtitleProps","draggingIconProps","imgSrc","skeletonProps","children","caption","title","subtitle","controls","imgLandscapePositionRight","draggable","loading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","onGrab","onNudge","restProps","dialogSizeProps","sizeProps","getCommonSizeProps","scrollTop","setScrollTop","useState","scrollBottom","setScrollBottom","scrollable","useRef","handleScrollThresholds","useCallback","e","scrollHeight","clientHeight","Math","abs","useLayoutEffect","current","observe","unobserve","_jsxs","Styled","portrait","Visibility","sizes","VISIBILITY_PORTRAIT","_jsx","onPointerDown","tabIndex","onKeyDown","Icon","icon","Dragging","color","orientation","aspectRatio","width","height","borderRadius","src","landscape","VISIBILITY_LANDSCAPE_MEDIA","onClick","DialogContainer","VISIBILITY_LANDSCAPE","visible","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","_Fragment","Skeleton","Text","appearance","marginBottom","SIZES_TITLE","SIZES_SUBTITLE","wordBreak","SIZES_CAPTION","as","after","Button","preset","SIZES","displayName"],"mappings":"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"}

package/external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/Close/index.js

@@ -1,2 +1,2 @@
-'use strict';var index=require('../../../../../../../../_virtual/index3.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var require$$0__default=_interopDefault(require('react/jsx-runtime'));Object.defineProperty(index.__exports,"__esModule",{value:!0}),exports.Close=index.__exports.Close=void 0;const jsx_runtime_1=require$$0__default.default;function Close(e){const{color:t,size:r,...l}=e;return(0,jsx_runtime_1.jsx)("svg",{xmlns:'http://www.w3.org/2000/svg',width:r,height:r,viewBox:'0 0 24 24',fill:t,...l,children:(0,jsx_runtime_1.jsx)("path",{fillRule:'evenodd',d:'M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z',clipRule:'evenodd'})})}exports.Close=index.__exports.Close=Close,index.__exports.default=Close;
+'use strict';var index=require('../../../../../../../../_virtual/index4.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var require$$0__default=_interopDefault(require('react/jsx-runtime'));Object.defineProperty(index.__exports,"__esModule",{value:!0}),exports.Close=index.__exports.Close=void 0;const jsx_runtime_1=require$$0__default.default;function Close(e){const{color:t,size:r,...l}=e;return(0,jsx_runtime_1.jsx)("svg",{xmlns:'http://www.w3.org/2000/svg',width:r,height:r,viewBox:'0 0 24 24',fill:t,...l,children:(0,jsx_runtime_1.jsx)("path",{fillRule:'evenodd',d:'M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z',clipRule:'evenodd'})})}exports.Close=index.__exports.Close=Close,index.__exports.default=Close;
 //# sourceMappingURL=index.js.map

package/external/.pnpm/@foxford_icon-pack@0.9.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@foxford/icon-pack/icons/CloseCirlceFill/index.js

@@ -1,2 +1,2 @@
-'use strict';var index=require('../../../../../../../../_virtual/index4.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var require$$0__default=_interopDefault(require('react/jsx-runtime'));Object.defineProperty(index.__exports,"__esModule",{value:!0}),exports.CloseCirlceFill=index.__exports.CloseCirlceFill=void 0;const jsx_runtime_1=require$$0__default.default;function CloseCirlceFill(e){const{color:l,size:i,...r}=e;return(0,jsx_runtime_1.jsx)("svg",{xmlns:'http://www.w3.org/2000/svg',width:i,height:i,viewBox:'0 0 24 24',fill:l,...r,children:(0,jsx_runtime_1.jsx)("path",{fillRule:'evenodd',d:'M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM9.707 8.293a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z',clipRule:'evenodd'})})}exports.CloseCirlceFill=index.__exports.CloseCirlceFill=CloseCirlceFill,index.__exports.default=CloseCirlceFill;
+'use strict';var index=require('../../../../../../../../_virtual/index3.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var require$$0__default=_interopDefault(require('react/jsx-runtime'));Object.defineProperty(index.__exports,"__esModule",{value:!0}),exports.CloseCirlceFill=index.__exports.CloseCirlceFill=void 0;const jsx_runtime_1=require$$0__default.default;function CloseCirlceFill(e){const{color:l,size:i,...r}=e;return(0,jsx_runtime_1.jsx)("svg",{xmlns:'http://www.w3.org/2000/svg',width:i,height:i,viewBox:'0 0 24 24',fill:l,...r,children:(0,jsx_runtime_1.jsx)("path",{fillRule:'evenodd',d:'M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM9.707 8.293a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293Z',clipRule:'evenodd'})})}exports.CloseCirlceFill=index.__exports.CloseCirlceFill=CloseCirlceFill,index.__exports.default=CloseCirlceFill;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxford/ui",
-  "version": "2.48.0-beta-971f42e-20241010",
+  "version": "2.48.1-beta-5f7af17-20241016",
   "description": "UI components library",
   "bugs": {
     "url": "https://github.com/foxford/ui/issues"