{"version":3,"file":"/Users/anthonygubler/development/dojo-org/widgets/src/popup/index.tsx","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { dimensions } from '@dojo/framework/core/middleware/dimensions';\nimport { resize } from '@dojo/framework/core/middleware/resize';\nimport theme from '../middleware/theme';\nimport { bodyScroll } from '../middleware/bodyScroll';\nimport { create, tsx } from '@dojo/framework/core/vdom';\nimport * as css from '../theme/default/popup.m.css';\nimport * as fixedCss from './popup.m.css';\nimport { RenderResult } from '@dojo/framework/core/interfaces';\n\nexport type PopupPosition = 'above' | 'below' | 'left' | 'right';\n\nexport interface BasePopupProperties {\n\t/** Preferred position where the popup should render relative to the provided position (defaults to \"below\"). If the popup does not have room to fully render in the preferred position it will switch to the opposite side. */\n\tposition?: PopupPosition;\n\t/** If the underlay should be visible (defaults to false) */\n\tunderlayVisible?: boolean;\n\t/** Callback triggered when the popup is closed */\n\tonClose?(): void;\n}\n\nexport interface PopupProperties extends BasePopupProperties {\n\t/** The Y position on the page where the bottom of the popup should be if rendering \"above\" */\n\tyBottom: number;\n\t/** The Y position on the page where the popup should start if rendering \"below\" */\n\tyTop: number;\n\t/** The right boundary of the popup position */\n\txRight: number;\n\t/** The left boundary for the popup position */\n\txLeft: number;\n\t/** Whether the popup is currently open */\n\topen?: boolean;\n}\n\nexport interface PopupChildren {\n\t(position: PopupPosition): RenderResult;\n}\n\nconst factory = create({ dimensions, theme, bodyScroll, resize })\n\t.properties<PopupProperties>()\n\t.children<PopupChildren | RenderResult>();\n\nexport const Popup = factory(function Popup({\n\tproperties,\n\tchildren,\n\tmiddleware: { dimensions, theme, bodyScroll, resize }\n}) {\n\tconst { underlayVisible = false, yBottom, yTop, xRight, xLeft, onClose, open } = properties();\n\tlet { position = 'below' as PopupPosition } = properties();\n\n\tresize.get('wrapper');\n\tconst wrapperDimensions = dimensions.get('wrapper');\n\tconst bottomOfVisibleScreen =\n\t\tdocument.documentElement.scrollTop + document.documentElement.clientHeight;\n\tconst topOfVisibleScreen = document.documentElement.scrollTop;\n\tconst widthOfScreen = document.documentElement.clientWidth;\n\n\tconst willFit = {\n\t\tbelow: yTop + wrapperDimensions.size.height <= bottomOfVisibleScreen,\n\t\tabove: yBottom - wrapperDimensions.size.height >= topOfVisibleScreen,\n\t\tleft: xLeft - wrapperDimensions.size.width >= 0,\n\t\tright: xRight + wrapperDimensions.size.width <= widthOfScreen\n\t};\n\n\tlet wrapperStyles: Partial<CSSStyleDeclaration> = {\n\t\topacity: '0'\n\t};\n\n\tif (wrapperDimensions.size.height) {\n\t\twrapperStyles = {\n\t\t\tleft: `${xLeft}px`,\n\t\t\topacity: '1'\n\t\t};\n\n\t\tif (position === 'below') {\n\t\t\tif (willFit.below) {\n\t\t\t\twrapperStyles.top = `${yTop}px`;\n\t\t\t} else {\n\t\t\t\twrapperStyles.top = `${yBottom - wrapperDimensions.size.height}px`;\n\t\t\t}\n\t\t} else if (position === 'above') {\n\t\t\tif (willFit.above) {\n\t\t\t\twrapperStyles.top = `${yBottom - wrapperDimensions.size.height}px`;\n\t\t\t} else {\n\t\t\t\twrapperStyles.top = `${yTop}px`;\n\t\t\t}\n\t\t}\n\n\t\tif (position === 'left' || position === 'right') {\n\t\t\tconst triggerHeight = yTop - yBottom;\n\t\t\twrapperStyles.top = `${Math.max(\n\t\t\t\tyBottom + triggerHeight / 2 - wrapperDimensions.size.height / 2,\n\t\t\t\ttopOfVisibleScreen\n\t\t\t)}px`;\n\t\t}\n\n\t\tif (position === 'left') {\n\t\t\tif (willFit.left) {\n\t\t\t\twrapperStyles.left = `${xLeft - wrapperDimensions.size.width}px`;\n\t\t\t} else {\n\t\t\t\twrapperStyles.left = `${xRight}px`;\n\t\t\t}\n\t\t} else if (position === 'right') {\n\t\t\tif (willFit.right) {\n\t\t\t\twrapperStyles.left = `${xRight}px`;\n\t\t\t} else {\n\t\t\t\twrapperStyles.left = `${xLeft - wrapperDimensions.size.width}px`;\n\t\t\t}\n\t\t}\n\t}\n\tconst classes = theme.classes(css);\n\tconst [content] = children();\n\tconst contentResult = typeof content === 'function' ? content(position) : content;\n\n\tbodyScroll(!open);\n\n\treturn (\n\t\topen && (\n\t\t\t<body>\n\t\t\t\t<div\n\t\t\t\t\tkey=\"underlay\"\n\t\t\t\t\tclasses={[\n\t\t\t\t\t\ttheme.variant(),\n\t\t\t\t\t\tfixedCss.underlay,\n\t\t\t\t\t\tunderlayVisible && classes.underlayVisible\n\t\t\t\t\t]}\n\t\t\t\t\tonclick={onClose}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tkey=\"wrapper\"\n\t\t\t\t\tclasses={[theme.variant(), fixedCss.root]}\n\t\t\t\t\tstyles={wrapperStyles}\n\t\t\t\t>\n\t\t\t\t\t{contentResult}\n\t\t\t\t</div>\n\t\t\t</body>\n\t\t)\n\t);\n});\n\nexport default Popup;\n"]}