diff --git a/docs/iframe.html b/docs/iframe.html index 8bdcb59..75553b3 100644 --- a/docs/iframe.html +++ b/docs/iframe.html @@ -361,4 +361,4 @@ - window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.story.tsx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.story\\.tsx)$"}]; \ No newline at end of file + window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.story.tsx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.story\\.tsx)$"}]; \ No newline at end of file diff --git a/docs/main.5f3505d3.iframe.bundle.js b/docs/main.5f3505d3.iframe.bundle.js deleted file mode 100644 index c60ba1c..0000000 --- a/docs/main.5f3505d3.iframe.bundle.js +++ /dev/null @@ -1 +0,0 @@ -(self.webpackChunk_codastic_react_positioning_portal=self.webpackChunk_codastic_react_positioning_portal||[]).push([[179],{"./.storybook/preview.js-generated-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var preview_namespaceObject={};__webpack_require__.r(preview_namespaceObject),__webpack_require__.d(preview_namespaceObject,{__namedExportsOrder:()=>__namedExportsOrder,decorators:()=>decorators});__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("./node_modules/core-js/modules/es.object.get-own-property-descriptor.js"),__webpack_require__("./node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("./node_modules/core-js/modules/es.object.get-own-property-descriptors.js"),__webpack_require__("./node_modules/core-js/modules/es.object.define-properties.js"),__webpack_require__("./node_modules/core-js/modules/es.object.define-property.js");var _templateObject,ClientApi=__webpack_require__("./node_modules/@storybook/client-api/dist/esm/ClientApi.js"),styled_components_browser_esm=(__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js")),styles=__webpack_require__("./src/storybook/styles.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");var GlobalStyle=(0,styled_components_browser_esm.vJ)(_templateObject||(_templateObject=function _taggedTemplateLiteralLoose(strings,raw){return raw||(raw=strings.slice(0)),strings.raw=raw,strings}(["\n *, *:after, *:before {\n box-sizing: border-box;\n }\n\n body {\n color: ",";\n font-family: sans-serif;\n }\n"])),styles.D.text);var decorators=[function globalStyle(story){return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(GlobalStyle,{}),story()]})}],__namedExportsOrder=["decorators"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}Object.keys(preview_namespaceObject).forEach((function(key){var value=preview_namespaceObject[key];switch(key){case"args":return(0,ClientApi.uc)(value);case"argTypes":return(0,ClientApi.v9)(value);case"decorators":return value.forEach((function(decorator){return(0,ClientApi.$9)(decorator,!1)}));case"loaders":return value.forEach((function(loader){return(0,ClientApi.HZ)(loader,!1)}));case"parameters":return(0,ClientApi.h1)(function _objectSpread(target){for(var i=1;i{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Base:()=>Base,CloseOnKeydownQ:()=>CloseOnKeydownQ,NoClickOutsideClose:()=>NoClickOutsideClose,SameWidthAsParent:()=>SameWidthAsParent,ScrollableTest:()=>ScrollableTest,WithAnimation:()=>WithAnimation,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/react/index.js");var _storybook_client_api__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("./node_modules/@storybook/addons/dist/esm/hooks.js"),_storybook_decorators_scrollable__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./src/storybook/decorators/scrollable.tsx"),_storybook_utils__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./src/storybook/utils.tsx"),react_transition_group__WEBPACK_IMPORTED_MODULE_20__=__webpack_require__("./node_modules/react-transition-group/esm/Transition.js"),_storybook_Button__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./src/storybook/Button.tsx"),_storybook_Flyout__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./src/storybook/Flyout.tsx"),_PositioningPortal__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("./src/components/PositioningPortal.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("./node_modules/react/jsx-runtime.js");function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null!=_i){var _s,_e,_x,_r,_arr=[],_n=!0,_d=!1;try{if(_x=(_i=_i.call(arr)).next,0===i){if(Object(_i)!==_i)return;_n=!1}else for(;!(_n=(_s=_x.call(_i)).done)&&(_arr.push(_s.value),_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{if(!_n&&null!=_i.return&&(_r=_i.return(),Object(_r)!==_r))return}finally{if(_d)throw _e}}return _arr}}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i {\n return ;\n}"}},Base.parameters),ScrollableTest.parameters=Object.assign({storySource:{source:"extendStory(Base)"}},ScrollableTest.parameters),WithAnimation.parameters=Object.assign({storySource:{source:"extendStory(Base, {\n portalContent: ({\n isOpen,\n isPositioned,\n transitionStarted,\n transitionEnded,\n close,\n }) => (\n \n addEndListener={(node, done) => {\n node.addEventListener('transitionend', done, false);\n }}\n in={isOpen && isPositioned}\n onEnter={transitionStarted}\n onExited={transitionEnded}\n >\n {(state) => (\n \n Flyout positioned with portal.\n \n \n )}\n \n ),\n})"}},WithAnimation.parameters),SameWidthAsParent.parameters=Object.assign({storySource:{source:'extendStory(Base, {\n portalContent: ({ close, relatedWidth }) => (\n \n Flyout positioned with portal.\n \n \n ),\n})'}},SameWidthAsParent.parameters),NoClickOutsideClose.parameters=Object.assign({storySource:{source:"extendStory(Base, {\n closeOnOutsideClick: false,\n})"}},NoClickOutsideClose.parameters),CloseOnKeydownQ.parameters=Object.assign({storySource:{source:"extendStory(Base, {\n closeOnKeyDown: (event: KeyboardEvent) => event.code === 'KeyQ',\n})"}},CloseOnKeydownQ.parameters);var __namedExportsOrder=["Base","ScrollableTest","WithAnimation","SameWidthAsParent","NoClickOutsideClose","CloseOnKeydownQ"]},"./src/components/PositioningPortalWithState.story.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Base:()=>Base,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _PositioningPortal__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/PositioningPortal.tsx"),_PositioningPortalWithState__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/PositioningPortalWithState.tsx"),_storybook_Button__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/storybook/Button.tsx"),_storybook_Flyout__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/storybook/Flyout.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/react/jsx-runtime.js");const __WEBPACK_DEFAULT_EXPORT__={title:"PositioningPortalWithState",component:_PositioningPortalWithState__WEBPACK_IMPORTED_MODULE_3__.Z};var Base=function Base(args){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_PositioningPortalWithState__WEBPACK_IMPORTED_MODULE_3__.Z,Object.assign({},args))};Base.displayName="Base",Base.args={positionStrategy:_PositioningPortal__WEBPACK_IMPORTED_MODULE_2__.GL,portalContent:function portalContent(_ref){var close=_ref.close;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsxs)(_storybook_Flyout__WEBPACK_IMPORTED_MODULE_5__.Z,{children:["Flyout positioned with portal.",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_storybook_Button__WEBPACK_IMPORTED_MODULE_4__.Z,{type:"button",onClick:close,children:"Close flyout"})]})},children:function children(_ref2){var open=_ref2.open,close=_ref2.close,isOpen=_ref2.isOpen;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_6__.jsx)(_storybook_Button__WEBPACK_IMPORTED_MODULE_4__.Z,{onClick:isOpen?close:open,children:isOpen?"Close portal":"Open portal"})}},Base.parameters=Object.assign({storySource:{source:"function (args) {\n return ;\n }"}},Base.parameters);var __namedExportsOrder=["Base"]},"./src/components/Tooltip.story.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Base:()=>Base,PreferredPositionTop:()=>PreferredPositionTop,ScrollableTest:()=>ScrollableTest,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.array.find.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js");var _templateObject,_templateObject2,styled_components__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),_storybook_Button__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/storybook/Button.tsx"),_storybook_styles__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/storybook/styles.ts"),_PositioningPortalWithState__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/components/PositioningPortalWithState.tsx"),_storybook_utils__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/storybook/utils.tsx"),_storybook_decorators_scrollable__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/storybook/decorators/scrollable.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./node_modules/react/jsx-runtime.js");function _taggedTemplateLiteralLoose(strings,raw){return raw||(raw=strings.slice(0)),strings.raw=raw,strings}var POSITION;!function(POSITION){POSITION.TOP="top",POSITION.LEFT="left",POSITION.RIGHT="right",POSITION.BOTTOM="bottom"}(POSITION||(POSITION={}));var StyledTooltip=styled_components__WEBPACK_IMPORTED_MODULE_10__.ZP.div(_templateObject||(_templateObject=_taggedTemplateLiteralLoose(["\n display: inline-block;\n max-width: 260px;\n position: relative;\n background-color: ",";\n color: ",";\n padding: 16px;\n border-radius: 4px;\n"])),_storybook_styles__WEBPACK_IMPORTED_MODULE_5__.D.primary,_storybook_styles__WEBPACK_IMPORTED_MODULE_5__.D.textInvert),StyledTooltipArrow=styled_components__WEBPACK_IMPORTED_MODULE_10__.ZP.div(_templateObject2||(_templateObject2=_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 0;\n height: 0;\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n\n ","\n"])),(function(props){return props.position===POSITION.TOP&&"\n top: 100%;\n left: 50%;\n margin-left: -10px;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-top: 10px solid "+_storybook_styles__WEBPACK_IMPORTED_MODULE_5__.D.primary+";\n "}),(function(props){return props.position===POSITION.BOTTOM&&"\n top: auto;\n bottom: 100%;\n left: 50%;\n margin-left: -10px;\n border-left: 10px solid transparent;\n border-right: 10px solid transparent;\n border-bottom: 10px solid "+_storybook_styles__WEBPACK_IMPORTED_MODULE_5__.D.primary+";\n "}),(function(props){return props.position===POSITION.LEFT&&"\n left: 100%;\n top: 50%;\n margin-top: -10px;\n border-top: 10px solid transparent;\n border-bottom: 10px solid transparent;\n border-left: 10px solid "+_storybook_styles__WEBPACK_IMPORTED_MODULE_5__.D.primary+";\n "}),(function(props){return props.position===POSITION.RIGHT&&"\n left: auto;\n top: 50%;\n right: 100%;\n margin-top: -10px;\n border-top: 10px solid transparent;\n border-bottom: 10px solid transparent;\n border-right: 10px solid "+_storybook_styles__WEBPACK_IMPORTED_MODULE_5__.D.primary+";\n "}),(function(props){return(props.position===POSITION.TOP||props.position===POSITION.BOTTOM)&&"\n transform: translateX("+-props.shift+"px);\n "}),(function(props){return(props.position===POSITION.LEFT||props.position===POSITION.RIGHT)&&"\n transform: translateY("+-props.shift+"px);\n "})),Tooltip=function Tooltip(_ref){var children=_ref.children,_ref$position=_ref.position,position=void 0===_ref$position?POSITION.TOP:_ref$position,_ref$shift=_ref.shift,shift=void 0===_ref$shift?0:_ref$shift;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(StyledTooltip,{children:[children,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(StyledTooltipArrow,{position,shift})]})};Tooltip.displayName="Tooltip";var positionStrategy=function positionStrategy(preferredPosition){return function(parentRect,portalRect){var _positions,scrollX=window.scrollX||window.pageXOffset,scrollY=window.scrollY||window.pageYOffset,body=window.document.documentElement||window.document.body,horizontalCenter=(parentRect.width-portalRect.width)/2,verticalCenter=(parentRect.height-portalRect.height)/2,positions=((_positions={})[POSITION.BOTTOM]={position:POSITION.BOTTOM,top:parentRect.top+parentRect.height+scrollY+15,left:parentRect.left+scrollX+horizontalCenter,enoughSpace:parentRect.top+parentRect.height+portalRect.height+150},_positions[POSITION.LEFT]={position:POSITION.LEFT,top:parentRect.top+scrollY+verticalCenter,left:parentRect.left+scrollX-portalRect.width-15,enoughSpace:parentRect.left-portalRect.width-15>0},_positions[POSITION.RIGHT]={position:POSITION.RIGHT,top:parentRect.top+scrollY+verticalCenter,left:parentRect.left+scrollX+parentRect.width+15,enoughSpace:parentRect.left+parentRect.width+portalRect.width+15;\n}"}},Base.parameters),ScrollableTest.parameters=Object.assign({storySource:{source:"extendStory(Base)"}},ScrollableTest.parameters),PreferredPositionTop.parameters=Object.assign({storySource:{source:"extendStory(Base, {\n positionStrategy: positionStrategy(POSITION.TOP)\n})"}},PreferredPositionTop.parameters);var __namedExportsOrder=["Base","ScrollableTest","PreferredPositionTop"]},"./src/components/PositioningPortal.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{ZP:()=>components_PositioningPortal,GL:()=>defaultPositionStrategy});__webpack_require__("./node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("./node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("./node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("./node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("./node_modules/core-js/modules/es.promise.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/core-js/modules/es.object.set-prototype-of.js"),__webpack_require__("./node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("./node_modules/core-js/modules/es.object.get-prototype-of.js"),__webpack_require__("./node_modules/core-js/modules/es.reflect.construct.js"),__webpack_require__("./node_modules/core-js/modules/es.object.create.js"),__webpack_require__("./node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.to-primitive.js"),__webpack_require__("./node_modules/core-js/modules/es.date.to-primitive.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.number.constructor.js"),__webpack_require__("./node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js");var react=__webpack_require__("./node_modules/react/index.js"),react_dom=__webpack_require__("./node_modules/react-dom/index.js");function _toConsumableArray(arr){return function _arrayWithoutHoles(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function _iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr)||function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i1&&void 0!==arguments[1]?arguments[1]:[];return element&&"BODY"!==element.tagName?getScrollParents(element.parentElement,isScrollParent(element)?[].concat(_toConsumableArray(scrollParents),[element]):scrollParents):[].concat(_toConsumableArray(scrollParents),[window])}const noop=function(){};var Position,jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function PositioningPortal_toConsumableArray(arr){return function PositioningPortal_arrayWithoutHoles(arr){if(Array.isArray(arr))return PositioningPortal_arrayLikeToArray(arr)}(arr)||function PositioningPortal_iterableToArray(iter){if("undefined"!=typeof Symbol&&null!=iter[Symbol.iterator]||null!=iter["@@iterator"])return Array.from(iter)}(arr)||function PositioningPortal_unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return PositioningPortal_arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return PositioningPortal_arrayLikeToArray(o,minLen)}(arr)||function PositioningPortal_nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function PositioningPortal_arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i(window.document.documentElement||window.document.body).clientHeight&&parentRect.top-portalRect.height>0,top=openAbove?parentRect.top-portalRect.height+window.scrollY:parentRect.top+parentRect.height+window.scrollY,alignRight=parentRect.left+portalRect.width>(window.document.documentElement||window.document.body).clientWidth&&parentRect.left-portalRect.width>0,left=alignRight?window.scrollX+parentRect.left-portalRect.width+parentRect.width:parentRect.left+window.scrollX,strategy=Position.BELOW_RIGHT;return openAbove&&alignRight&&(strategy=Position.ABOVE_LEFT),openAbove&&!alignRight&&(strategy=Position.ABOVE_RIGHT),!openAbove&&alignRight&&(strategy=Position.BELOW_LEFT),openAbove||alignRight||(strategy=Position.BELOW_RIGHT),{top,left,strategy}},KEYCODES_ESCAPE=27,EVENT_CONTEXT_KEY="PositioningPortal-context",PositioningPortal=function(_React$Component){!function _inherits(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),Object.defineProperty(subClass,"prototype",{writable:!1}),superClass&&_setPrototypeOf(subClass,superClass)}(PositioningPortal,_React$Component);var _super=_createSuper(PositioningPortal);function PositioningPortal(){var _this;_classCallCheck(this,PositioningPortal);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++)args[_key]=arguments[_key];return(_this=_super.call.apply(_super,[this].concat(args))).state={top:null,left:null,portalRect:null,parentRect:null,isPositioned:!1,isOpen:!1,transitionActive:!1,shouldRender:!1,scrollParents:[],strategy:null},_this.portalRef=react.createRef(),_this.close=function(){_this.props.onShouldClose&&_this.props.onShouldClose()},_this.transitionStarted=function(){_this.setState({transitionActive:!0})},_this.transitionEnded=function(){_this.setState({transitionActive:!1})},_this.handleOutsideMouseClick=function(event){if(_this.props.closeOnOutsideClick&&_this.state.isOpen&&!(_this.portalRef.current&&_this.portalRef.current.contains(event.target)||(event[EVENT_CONTEXT_KEY]||[]).includes(_assertThisInitialized(_this)))){var parentDom=react_dom.findDOMNode(_assertThisInitialized(_this));parentDom&&parentDom.contains(event.target)||_this.close()}},_this.handleKeydown=function(event){_this.state.isOpen&&_this.props.closeOnKeyDown&&_this.props.closeOnKeyDown(event)&&_this.close()},_this.onOpen=function(){_this.state.isOpen||_this.preRenderPortal().then(_this.finalRenderPortal).then((function(){_this.props.onOpen()}))},_this.onClose=function(){_this.state.isOpen&&(_this.state.scrollParents.forEach((function(node){return node.removeEventListener("scroll",_this.close,!1)})),_this.setState({isOpen:!1,scrollParents:[]}),_this.props.onClose())},_this.markClickEvent=function(event){event.nativeEvent[EVENT_CONTEXT_KEY]=[].concat(PositioningPortal_toConsumableArray(event.nativeEvent[EVENT_CONTEXT_KEY]||[]),[_assertThisInitialized(_this)])},_this.preRenderPortal=function(){return new Promise((function(resolve){var parentDom=react_dom.findDOMNode(_assertThisInitialized(_this));if(parentDom&&parentDom.nodeType===Node.ELEMENT_NODE){var _parentRect=parentDom.getBoundingClientRect(),scrollParents=[];_this.props.closeOnScroll&&(scrollParents=getScrollParents(parentDom)).forEach((function(node){return node.addEventListener("scroll",_this.close,!1)})),_this.setState({isOpen:!0,transitionActive:!1,isPositioned:!1,left:0,top:0,strategy:null,parentRect:_parentRect,portalRect:null,scrollParents},resolve)}else resolve()}))},_this.finalRenderPortal=function(){return new Promise((function(resolve){if(_this.state.isOpen&&!_this.state.isPositioned&&_this.portalRef.current&&_this.state.parentRect){var _portalRect=_this.portalRef.current.getBoundingClientRect(),_this$props$positionS=_this.props.positionStrategy(_this.state.parentRect,_portalRect,_this.props),top=_this$props$positionS.top,left=_this$props$positionS.left,strategy=_this$props$positionS.strategy;_this.setState({isPositioned:!0,left,strategy,top,portalRect:_portalRect},resolve)}else resolve()}))},_this}return function _createClass(Constructor,protoProps,staticProps){return protoProps&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),Object.defineProperty(Constructor,"prototype",{writable:!1}),Constructor}(PositioningPortal,[{key:"componentDidMount",value:function componentDidMount(){window.document.addEventListener("keydown",this.handleKeydown,!1),window.document.addEventListener("click",this.handleOutsideMouseClick,!1),this.setState({shouldRender:!0}),this.props.isOpen&&this.onOpen()}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){this.props.isOpen!==prevProps.isOpen&&(this.props.isOpen?this.onOpen():this.onClose())}},{key:"componentWillUnmount",value:function componentWillUnmount(){var _this2=this;window.document.removeEventListener("keydown",this.handleKeydown,!1),window.document.removeEventListener("click",this.handleOutsideMouseClick,!1),this.props.closeOnScroll&&this.state.scrollParents.forEach((function(node){return node.removeEventListener("scroll",_this2.close,!1)}))}},{key:"render",value:function render(){var _this3=this,_this$props=this.props,children=_this$props.children,portalContent=_this$props.portalContent,portalElement=_this$props.portalElement,rootNode=_this$props.rootNode,_this$state=this.state,top=_this$state.top,left=_this$state.left,parentRect=_this$state.parentRect,portalRect=_this$state.portalRect,isPositioned=_this$state.isPositioned,isOpen=_this$state.isOpen,strategy=_this$state.strategy,transitionActive=_this$state.transitionActive,shouldRender=_this$state.shouldRender,relatedWidth=parentRect?parentRect.width:0,relatedHeight=parentRect?parentRect.height:0,portalStyle={position:"absolute",width:portalRect?portalRect.width+"px":"auto",left:left+"px",top:top+"px",visibility:isPositioned?"visible":"hidden"},shouldRenderPortal=shouldRender&&(isOpen||transitionActive);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[children,shouldRenderPortal&&function renderPortal(){return react_dom.createPortal(react.cloneElement(portalElement||(0,jsx_runtime.jsx)("div",{}),{ref:_this3.portalRef,style:Object.assign({},portalStyle,portalElement&&portalElement.props.style||{}),onClick:_this3.markClickEvent},function renderProps(element,props){return"function"==typeof element?element(props):element}(portalContent,{close:_this3.close,transitionStarted:_this3.transitionStarted,transitionEnded:_this3.transitionEnded,strategy,isOpen,isPositioned,relatedWidth,relatedHeight})),rootNode||window.document.body)}()]})}}]),PositioningPortal}(react.Component);PositioningPortal.defaultProps={isOpen:!1,closeOnScroll:!0,onOpen:noop,onClose:noop,onShouldClose:noop,closeOnOutsideClick:!0,closeOnKeyDown:function closeOnKeyDown(event){return event.keyCode===KEYCODES_ESCAPE},positionStrategy:defaultPositionStrategy};const components_PositioningPortal=PositioningPortal;try{PositioningPortal.displayName="PositioningPortal",PositioningPortal.__docgenInfo={description:"",displayName:"PositioningPortal",props:{portalElement:{defaultValue:null,description:"",name:"portalElement",required:!1,type:{name:"ReactElement>"}},portalContent:{defaultValue:null,description:"",name:"portalContent",required:!0,type:{name:"ReactNode | ((params: PortalContentRenderProps) => ReactNode)"}},onOpen:{defaultValue:null,description:"",name:"onOpen",required:!1,type:{name:"() => void"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"() => void"}},onShouldClose:{defaultValue:null,description:"",name:"onShouldClose",required:!1,type:{name:"() => void"}},closeOnScroll:{defaultValue:{value:"true"},description:"",name:"closeOnScroll",required:!1,type:{name:"boolean"}},closeOnOutsideClick:{defaultValue:{value:"true"},description:"",name:"closeOnOutsideClick",required:!1,type:{name:"boolean"}},closeOnKeyDown:{defaultValue:{value:"(event: KeyboardEvent) => event.keyCode === KEYCODES.ESCAPE"},description:"",name:"closeOnKeyDown",required:!1,type:{name:"(event: KeyboardEvent) => boolean"}},isOpen:{defaultValue:{value:"false"},description:"",name:"isOpen",required:!1,type:{name:"boolean"}},positionStrategy:{defaultValue:{value:"(\n parentRect: ClientRect,\n portalRect: ClientRect\n /* props: Props */\n) => {\n // Open the content portal above the child if there is not enough space to the bottom,\n // but if there also isn't enough space at the top, open to the bottom.\n const openAbove =\n parentRect.top + parentRect.height + portalRect.height >\n (window.document.documentElement || window.document.body).clientHeight &&\n parentRect.top - portalRect.height > 0;\n\n const top = openAbove\n ? parentRect.top - portalRect.height + window.scrollY\n : parentRect.top + parentRect.height + window.scrollY;\n\n // Open the content portal to the left if there is not enough space at the right,\n // but if there also isn't enough space at the right, open to the left.\n const alignRight =\n parentRect.left + portalRect.width >\n (window.document.documentElement || window.document.body).clientWidth &&\n parentRect.left - portalRect.width > 0;\n\n const left = !alignRight\n ? parentRect.left + window.scrollX\n : window.scrollX + parentRect.left - portalRect.width + parentRect.width;\n\n let strategy = Position.BELOW_RIGHT;\n if (openAbove && alignRight) {\n strategy = Position.ABOVE_LEFT;\n }\n if (openAbove && !alignRight) {\n strategy = Position.ABOVE_RIGHT;\n }\n if (!openAbove && alignRight) {\n strategy = Position.BELOW_LEFT;\n }\n if (!openAbove && !alignRight) {\n strategy = Position.BELOW_RIGHT;\n }\n\n return {\n top,\n left,\n strategy,\n };\n}"},description:"",name:"positionStrategy",required:!1,type:{name:"PositioningStrategy"}},rootNode:{defaultValue:null,description:"",name:"rootNode",required:!1,type:{name:"HTMLElement"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/PositioningPortal.tsx#PositioningPortal"]={docgenInfo:PositioningPortal.__docgenInfo,name:"PositioningPortal",path:"src/components/PositioningPortal.tsx#PositioningPortal"})}catch(__react_docgen_typescript_loader_error){}},"./src/components/PositioningPortalWithState.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/core-js/modules/es.symbol.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.description.js"),__webpack_require__("./node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("./node_modules/core-js/modules/es.symbol.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.string.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("./node_modules/core-js/modules/web.dom-collections.iterator.js"),__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/es.function.name.js"),__webpack_require__("./node_modules/core-js/modules/es.array.from.js"),__webpack_require__("./node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("./node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/core-js/modules/es.array.is-array.js");var react__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("./node_modules/react/index.js"),_PositioningPortal__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("./src/components/PositioningPortal.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("./node_modules/react/jsx-runtime.js"),_excluded=["children"];function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function _slicedToArray(arr,i){return function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}(arr)||function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null!=_i){var _s,_e,_x,_r,_arr=[],_n=!0,_d=!1;try{if(_x=(_i=_i.call(arr)).next,0===i){if(Object(_i)!==_i)return;_n=!1}else for(;!(_n=(_s=_x.call(_i)).done)&&(_arr.push(_s.value),_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{if(!_n&&null!=_i.return&&(_r=_i.return(),Object(_r)!==_r))return}finally{if(_d)throw _e}}return _arr}}(arr,i)||function _unsupportedIterableToArray(o,minLen){if(!o)return;if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);"Object"===n&&o.constructor&&(n=o.constructor.name);if("Map"===n||"Set"===n)return Array.from(o);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}(arr,i)||function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i>"}},portalContent:{defaultValue:null,description:"",name:"portalContent",required:!0,type:{name:"ReactNode | ((params: PortalContentRenderProps) => ReactNode)"}},onOpen:{defaultValue:null,description:"",name:"onOpen",required:!1,type:{name:"() => void"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!1,type:{name:"() => void"}},onShouldClose:{defaultValue:null,description:"",name:"onShouldClose",required:!1,type:{name:"() => void"}},closeOnScroll:{defaultValue:null,description:"",name:"closeOnScroll",required:!1,type:{name:"boolean"}},closeOnOutsideClick:{defaultValue:null,description:"",name:"closeOnOutsideClick",required:!1,type:{name:"boolean"}},closeOnKeyDown:{defaultValue:null,description:"",name:"closeOnKeyDown",required:!1,type:{name:"(event: KeyboardEvent) => boolean"}},positionStrategy:{defaultValue:null,description:"",name:"positionStrategy",required:!1,type:{name:"PositioningStrategy"}},rootNode:{defaultValue:null,description:"",name:"rootNode",required:!1,type:{name:"HTMLElement"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/PositioningPortalWithState.tsx#PositioningPortalWithState"]={docgenInfo:PositioningPortalWithState.__docgenInfo,name:"PositioningPortalWithState",path:"src/components/PositioningPortalWithState.tsx#PositioningPortalWithState"})}catch(__react_docgen_typescript_loader_error){}},"./src/storybook/Button.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/core-js/modules/es.array.slice.js");var _templateObject,styled_components__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),_styles__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/storybook/styles.ts");var Button=styled_components__WEBPACK_IMPORTED_MODULE_2__.ZP.button(_templateObject||(_templateObject=function _taggedTemplateLiteralLoose(strings,raw){return raw||(raw=strings.slice(0)),strings.raw=raw,strings}(["\n background-color: ",";\n padding: 8px 16px;\n color: ",";\n border-radius: 4px;\n letter-spacing: 0.03;\n outline: none;\n border: none;\n cursor: pointer;\n white-space: nowrap;\n transition: background-color 0.2s linear;\n font-size: 14px;\n\n &:hover,\n &:focus {\n background-color: ",";\n }\n"])),_styles__WEBPACK_IMPORTED_MODULE_1__.D.primary,_styles__WEBPACK_IMPORTED_MODULE_1__.D.textInvert,_styles__WEBPACK_IMPORTED_MODULE_1__.D.primaryActive);const __WEBPACK_DEFAULT_EXPORT__=Button;try{Button.displayName="Button",Button.__docgenInfo={description:"",displayName:"Button",props:{ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"any"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/storybook/Button.tsx#Button"]={docgenInfo:Button.__docgenInfo,name:"Button",path:"src/storybook/Button.tsx#Button"})}catch(__react_docgen_typescript_loader_error){}},"./src/storybook/Flyout.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/core-js/modules/es.array.slice.js");var _templateObject,styled_components__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),_styles__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/storybook/styles.ts");var Flyout=styled_components__WEBPACK_IMPORTED_MODULE_2__.ZP.div(_templateObject||(_templateObject=function _taggedTemplateLiteralLoose(strings,raw){return raw||(raw=strings.slice(0)),strings.raw=raw,strings}(["\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n text-align: center;\n width: ",";\n height: 120px;\n padding: 20px;\n margin: 10px 0;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n background: ",";\n color: ",";\n opacity: 1;\n transition: opacity 0.2s linear;\n\n ","\n"])),(function(props){return void 0!==props.relatedWidth?props.relatedWidth+"px":"250px"}),_styles__WEBPACK_IMPORTED_MODULE_1__.D.background,_styles__WEBPACK_IMPORTED_MODULE_1__.D.text,(function(props){return"exiting"===props.state||"exited"===props.state?"opacity: 0;":""}));const __WEBPACK_DEFAULT_EXPORT__=Flyout;try{Flyout.displayName="Flyout",Flyout.__docgenInfo={description:"",displayName:"Flyout",props:{ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref"}},relatedWidth:{defaultValue:null,description:"",name:"relatedWidth",required:!1,type:{name:"number"}},state:{defaultValue:null,description:"",name:"state",required:!1,type:{name:"string"}},theme:{defaultValue:null,description:"",name:"theme",required:!1,type:{name:"any"}},as:{defaultValue:null,description:"",name:"as",required:!1,type:{name:"undefined"}},forwardedAs:{defaultValue:null,description:"",name:"forwardedAs",required:!1,type:{name:"undefined"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/storybook/Flyout.tsx#Flyout"]={docgenInfo:Flyout.__docgenInfo,name:"Flyout",path:"src/storybook/Flyout.tsx#Flyout"})}catch(__react_docgen_typescript_loader_error){}},"./src/storybook/decorators/scrollable.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Z:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("./node_modules/core-js/modules/es.array.slice.js"),__webpack_require__("./node_modules/core-js/modules/web.timers.js");var _templateObject,react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/react/index.js"),styled_components__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/react/jsx-runtime.js");var Root=styled_components__WEBPACK_IMPORTED_MODULE_4__.ZP.div(_templateObject||(_templateObject=function _taggedTemplateLiteralLoose(strings,raw){return raw||(raw=strings.slice(0)),strings.raw=raw,strings}(["\n display: inline-block;\n margin: 150vh 150vw;\n"])));function Scrollable(_ref){var children=_ref.children,scrollRef=(0,react__WEBPACK_IMPORTED_MODULE_2__.useRef)(null);return(0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)((function(){setTimeout((function(){scrollRef.current&&scrollRef.current.scrollIntoView({block:"center",inline:"center"})}),0)}),[]),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Root,{ref:scrollRef,children})}Scrollable.displayName="Scrollable";var scrollableDecorator=function scrollableDecorator(story){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Scrollable,{children:story()})};scrollableDecorator.displayName="scrollableDecorator";const __WEBPACK_DEFAULT_EXPORT__=scrollableDecorator},"./src/storybook/styles.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{D:()=>COLORS});var COLORS={primary:"#1976d2",primaryActive:"#115293",text:"#333333",textInvert:"#ffffff",background:"#ffffff"}},"./src/storybook/utils.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{I:()=>extendStory});__webpack_require__("./node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("./node_modules/core-js/modules/es.object.assign.js"),__webpack_require__("./node_modules/react/index.js"),__webpack_require__("./node_modules/react/jsx-runtime.js");var extendStory=function extendStory(BaseStory){var args=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},Story=BaseStory.bind({});return Story.args=Object.assign({},BaseStory.args,args),Story}},"./storybook-init-framework-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__("./node_modules/@storybook/react/dist/esm/client/index.js")},"./src sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.story\\.tsx)$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./components/PositioningPortal.story.tsx":"./src/components/PositioningPortal.story.tsx","./components/PositioningPortalWithState.story.tsx":"./src/components/PositioningPortalWithState.story.tsx","./components/Tooltip.story.tsx":"./src/components/Tooltip.story.tsx"};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id="./src sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.story\\.tsx)$"},"?4f7e":()=>{},"./generated-stories-entry.cjs":(module,__unused_webpack_exports,__webpack_require__)=>{"use strict";module=__webpack_require__.nmd(module),(0,__webpack_require__("./node_modules/@storybook/react/dist/esm/client/index.js").configure)([__webpack_require__("./src sync recursive ^\\.(?:(?:^%7C\\/%7C(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/)(?%21\\.)(?=.)[^/]*?\\.story\\.tsx)$")],module,!1)}},__webpack_require__=>{var __webpack_exec__=moduleId=>__webpack_require__(__webpack_require__.s=moduleId);__webpack_require__.O(0,[4],(()=>(__webpack_exec__("./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js"),__webpack_exec__("./node_modules/@storybook/core-client/dist/esm/globals/globals.js"),__webpack_exec__("./storybook-init-framework-entry.js"),__webpack_exec__("./node_modules/@storybook/react/dist/esm/client/docs/config-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-docs/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-actions/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-backgrounds/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-measure/preview.js-generated-config-entry.js"),__webpack_exec__("./node_modules/@storybook/addon-outline/preview.js-generated-config-entry.js"),__webpack_exec__("./.storybook/preview.js-generated-config-entry.js"),__webpack_exec__("./generated-stories-entry.cjs"))));__webpack_require__.O()}]); \ No newline at end of file diff --git a/docs/project.json b/docs/project.json index 537dada..aea78a4 100644 --- a/docs/project.json +++ b/docs/project.json @@ -1 +1 @@ -{"generatedAt":1688568222358,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"8.19.3"},"storybookVersion":"6.5.14","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.14"},"@storybook/manager-webpack5":{"version":"6.5.14"},"@storybook/react":{"version":"6.5.14"}},"framework":{"name":"react"},"addons":{"@storybook/addon-essentials":{"version":"6.5.14"},"@storybook/addon-storysource":{"options":{"rule":{"test":{},"include":["/Users/mvolke/Documents/work/codastic/react-positioning-portal/src"]},"loaderOptions":{"parser":"typescript"}},"version":"6.5.14"}}} +{"generatedAt":1763140618837,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.9.2"},"storybookVersion":"6.5.14","language":"typescript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.14"},"@storybook/manager-webpack5":{"version":"6.5.14"},"@storybook/react":{"version":"6.5.14"}},"framework":{"name":"react"},"addons":{"@storybook/addon-essentials":{"version":"6.5.14"},"@storybook/addon-storysource":{"options":{"rule":{"test":{},"include":["/Users/jacopobonta/workspace/react-positioning-portal/src"]},"loaderOptions":{"parser":"typescript"}},"version":"6.5.14"}}} diff --git a/lib/components/PositioningPortal.d.ts b/lib/components/PositioningPortal.d.ts index d55d5b6..4f71f9d 100644 --- a/lib/components/PositioningPortal.d.ts +++ b/lib/components/PositioningPortal.d.ts @@ -60,6 +60,7 @@ declare class PositioningPortal extends React.Component; private portalRef; + private parentRef; componentDidMount(): void; componentDidUpdate(prevProps: Props): void; componentWillUnmount(): void; diff --git a/lib/index.js b/lib/index.js index dccd2b0..dc68b1b 100644 --- a/lib/index.js +++ b/lib/index.js @@ -156,6 +156,7 @@ var PositioningPortal = /** @class */ (function (_super) { strategy: null, }; _this.portalRef = React.createRef(); + _this.parentRef = React.createRef(); _this.close = function () { if (_this.props.onShouldClose) { _this.props.onShouldClose(); @@ -181,7 +182,7 @@ var PositioningPortal = /** @class */ (function (_super) { if ((event[EVENT_CONTEXT_KEY] || []).includes(_this)) { return; } - var parentDom = ReactDOM.findDOMNode(_this); + var parentDom = _this.parentRef.current; if (parentDom && parentDom.contains(event.target)) { return; } @@ -229,7 +230,7 @@ var PositioningPortal = /** @class */ (function (_super) { return new Promise(function (resolve) { // A tricky way to get the first child DOM element of the fragment of this component. // Unfortunately there seems to be no way to achieve this with refs. - var parentDom = ReactDOM.findDOMNode(_this); + var parentDom = _this.parentRef.current; if (parentDom && parentDom.nodeType === Node.ELEMENT_NODE) { var parentRect = parentDom.getBoundingClientRect(); var scrollParents = []; @@ -340,7 +341,7 @@ var PositioningPortal = /** @class */ (function (_super) { })), rootNode || window.document.body); }; var shouldRenderPortal = shouldRender && (isOpen || transitionActive); - return (React.createElement(React.Fragment, null, + return (React.createElement("div", { ref: this.parentRef }, children, shouldRenderPortal && renderPortal())); }; diff --git a/lib/legacy/index.js/components/PositioningPortal.d.ts b/lib/legacy/index.js/components/PositioningPortal.d.ts index d55d5b6..4f71f9d 100644 --- a/lib/legacy/index.js/components/PositioningPortal.d.ts +++ b/lib/legacy/index.js/components/PositioningPortal.d.ts @@ -60,6 +60,7 @@ declare class PositioningPortal extends React.Component; private portalRef; + private parentRef; componentDidMount(): void; componentDidUpdate(prevProps: Props): void; componentWillUnmount(): void; diff --git a/lib/legacy/index.js/index.js b/lib/legacy/index.js/index.js index 253bc8d..93295d2 100644 --- a/lib/legacy/index.js/index.js +++ b/lib/legacy/index.js/index.js @@ -178,6 +178,7 @@ var PositioningPortal = /** @class */ (function (_super) { strategy: null, }; _this.portalRef = React__namespace.createRef(); + _this.parentRef = React__namespace.createRef(); _this.close = function () { if (_this.props.onShouldClose) { _this.props.onShouldClose(); @@ -203,7 +204,7 @@ var PositioningPortal = /** @class */ (function (_super) { if ((event[EVENT_CONTEXT_KEY] || []).includes(_this)) { return; } - var parentDom = ReactDOM__namespace.findDOMNode(_this); + var parentDom = _this.parentRef.current; if (parentDom && parentDom.contains(event.target)) { return; } @@ -251,7 +252,7 @@ var PositioningPortal = /** @class */ (function (_super) { return new Promise(function (resolve) { // A tricky way to get the first child DOM element of the fragment of this component. // Unfortunately there seems to be no way to achieve this with refs. - var parentDom = ReactDOM__namespace.findDOMNode(_this); + var parentDom = _this.parentRef.current; if (parentDom && parentDom.nodeType === Node.ELEMENT_NODE) { var parentRect = parentDom.getBoundingClientRect(); var scrollParents = []; @@ -362,7 +363,7 @@ var PositioningPortal = /** @class */ (function (_super) { })), rootNode || window.document.body); }; var shouldRenderPortal = shouldRender && (isOpen || transitionActive); - return (React__namespace.createElement(React__namespace.Fragment, null, + return (React__namespace.createElement("div", { ref: this.parentRef }, children, shouldRenderPortal && renderPortal())); }; diff --git a/src/components/PositioningPortal.tsx b/src/components/PositioningPortal.tsx index 6e74cb6..c5461e5 100644 --- a/src/components/PositioningPortal.tsx +++ b/src/components/PositioningPortal.tsx @@ -8,8 +8,8 @@ export interface Props { children: React.ReactNode; portalElement?: React.ReactElement; portalContent: - | React.ReactNode - | ((params: PortalContentRenderProps) => React.ReactNode); + | React.ReactNode + | ((params: PortalContentRenderProps) => React.ReactNode); onOpen?: () => void; onClose?: () => void; onShouldClose?: () => void; @@ -53,7 +53,7 @@ const renderProps: ( element: Props['portalContent'], props: PortalContentRenderProps ) => React.ReactNode = (element, props) => - typeof element === 'function' ? element(props) : element; + typeof element === 'function' ? element(props) : element; export const defaultPositionStrategy: PositioningStrategy = ( parentRect: ClientRect, @@ -64,7 +64,7 @@ export const defaultPositionStrategy: PositioningStrategy = ( // but if there also isn't enough space at the top, open to the bottom. const openAbove = parentRect.top + parentRect.height + portalRect.height > - (window.document.documentElement || window.document.body).clientHeight && + (window.document.documentElement || window.document.body).clientHeight && parentRect.top - portalRect.height > 0; const top = openAbove @@ -75,7 +75,7 @@ export const defaultPositionStrategy: PositioningStrategy = ( // but if there also isn't enough space at the right, open to the left. const alignRight = parentRect.left + portalRect.width > - (window.document.documentElement || window.document.body).clientWidth && + (window.document.documentElement || window.document.body).clientWidth && parentRect.left - portalRect.width > 0; const left = !alignRight @@ -151,6 +151,7 @@ class PositioningPortal extends React.Component< }; private portalRef = React.createRef(); + private parentRef = React.createRef(); public componentDidMount() { window.document.addEventListener('keydown', this.handleKeydown, false); @@ -232,7 +233,7 @@ class PositioningPortal extends React.Component< return; } - const parentDom = ReactDOM.findDOMNode(this); + const parentDom = this.parentRef.current; if (parentDom && parentDom.contains(event.target as Node)) { return; } @@ -299,7 +300,7 @@ class PositioningPortal extends React.Component< new Promise((resolve) => { // A tricky way to get the first child DOM element of the fragment of this component. // Unfortunately there seems to be no way to achieve this with refs. - const parentDom = ReactDOM.findDOMNode(this); + const parentDom = this.parentRef.current; if (parentDom && parentDom.nodeType === Node.ELEMENT_NODE) { const parentRect = (parentDom as Element).getBoundingClientRect(); @@ -417,10 +418,10 @@ class PositioningPortal extends React.Component< const shouldRenderPortal = shouldRender && (isOpen || transitionActive); return ( - <> +
{children} {shouldRenderPortal && renderPortal()} - +
); } }