@sap-ux/ui-components/storybook/UICallout-story.2dadd97e.iframe.bundle.js

SAP UI Components Library

(()=>{var E=Object.defineProperty,S=Object.defineProperties;var P=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var O=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var C=(i,s,o)=>s in i?E(i,s,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[s]=o,g=(i,s)=>{for(var o in s||(s={}))O.call(s,o)&&C(i,o,s[o]);if(v)for(var o of v(s))U.call(s,o)&&C(i,o,s[o]);return i},I=(i,s)=>S(i,P(s));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[239],{"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[12].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.101.0_webpack@5.105.0_@swc+core@1.15.18__732f0ac8c0547d446bff736b53e6fec4/node_modules/sass-loader/dist/cjs.js!./src/styles/_shadows.scss"(i,s,o){var u=o("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/noSourceMaps.js"),_=o("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/api.js"),n=_(u);n.push([i.id,":root{--ui-box-shadow-small: 0 4px 8px 0 var(--vscode-widget-shadow);--ui-box-shadow-medium: 0 6px 12px 0 var(--vscode-widget-shadow);--ui-box-shadow-large: 0 10px 20px 0 var(--vscode-widget-shadow)}.ui-box-shadow-small{box-shadow:var(--ui-box-shadow-small)}.ui-box-shadow-medium{box-shadow:var(--ui-box-shadow-medium)}.ui-box-shadow-large{box-shadow:var(--ui-box-shadow-large)}",""]),i.exports=n},"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/api.js"(i){"use strict";i.exports=function(s){var o=[];return o.toString=function(){return this.map(function(_){var n="",e=typeof _[5]!="undefined";return _[4]&&(n+="@supports (".concat(_[4],") {")),_[2]&&(n+="@media ".concat(_[2]," {")),e&&(n+="@layer".concat(_[5].length>0?" ".concat(_[5]):""," {")),n+=s(_),e&&(n+="}"),_[2]&&(n+="}"),_[4]&&(n+="}"),n}).join("")},o.i=function(_,n,e,t,r){typeof _=="string"&&(_=[[null,_,void 0]]);var l={};if(e)for(var p=0;p<this.length;p++){var y=this[p][0];y!=null&&(l[y]=!0)}for(var m=0;m<_.length;m++){var a=[].concat(_[m]);e&&l[a[0]]||(typeof r!="undefined"&&(typeof a[5]=="undefined"||(a[1]="@layer".concat(a[5].length>0?" ".concat(a[5]):""," {").concat(a[1],"}")),a[5]=r),n&&(a[2]&&(a[1]="@media ".concat(a[2]," {").concat(a[1],"}")),a[2]=n),t&&(a[4]?(a[1]="@supports (".concat(a[4],") {").concat(a[1],"}"),a[4]=t):a[4]="".concat(t)),o.push(a))}},o}},"../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/runtime/noSourceMaps.js"(i){"use strict";i.exports=function(s){return s[1]}},"./src/styles/_shadows.scss"(i,s,o){"use strict";o.r(s),o.d(s,{default:()=>T});var u=o("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),_=o.n(u),n=o("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleDomAPI.js"),e=o.n(n),t=o("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertBySelector.js"),r=o.n(t),l=o("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),p=o.n(l),y=o("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertStyleElement.js"),m=o.n(y),a=o("../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleTagTransform.js"),f=o.n(a),c=o("../../node_modules/.pnpm/css-loader@7.1.4_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[12].use[1]!../../node_modules/.pnpm/sass-loader@16.0.7_sass-embedded@1.97.3_sass@1.101.0_webpack@5.105.0_@swc+core@1.15.18__732f0ac8c0547d446bff736b53e6fec4/node_modules/sass-loader/dist/cjs.js!./src/styles/_shadows.scss"),d=o.n(c),b={};for(const w in c)w!=="default"&&(b[w]=()=>c[w]);o.d(s,b);var h={};h.styleTagTransform=f(),h.setAttributes=p(),h.insert=r().bind(null,"head"),h.domAPI=e(),h.insertStyleElement=m();var D=_()(d(),h);const T=d()&&d().locals?d().locals:void 0},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"(i){"use strict";var s=[];function o(n){for(var e=-1,t=0;t<s.length;t++)if(s[t].identifier===n){e=t;break}return e}function u(n,e){for(var t={},r=[],l=0;l<n.length;l++){var p=n[l],y=e.base?p[0]+e.base:p[0],m=t[y]||0,a="".concat(y," ").concat(m);t[y]=m+1;var f=o(a),c={css:p[1],media:p[2],sourceMap:p[3],supports:p[4],layer:p[5]};if(f!==-1)s[f].references++,s[f].updater(c);else{var d=_(c,e);e.byIndex=l,s.splice(l,0,{identifier:a,updater:d,references:1})}r.push(a)}return r}function _(n,e){var t=e.domAPI(e);t.update(n);var r=function(p){if(p){if(p.css===n.css&&p.media===n.media&&p.sourceMap===n.sourceMap&&p.supports===n.supports&&p.layer===n.layer)return;t.update(n=p)}else t.remove()};return r}i.exports=function(n,e){e=e||{},n=n||[];var t=u(n,e);return function(l){l=l||[];for(var p=0;p<t.length;p++){var y=t[p],m=o(y);s[m].references--}for(var a=u(l,e),f=0;f<t.length;f++){var c=t[f],d=o(c);s[d].references===0&&(s[d].updater(),s.splice(d,1))}t=a}}},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertBySelector.js"(i){"use strict";var s={};function o(_){if(typeof s[_]=="undefined"){var n=document.querySelector(_);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}s[_]=n}return s[_]}function u(_,n){var e=o(_);if(!e)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");e.appendChild(n)}i.exports=u},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/insertStyleElement.js"(i){"use strict";function s(o){var u=document.createElement("style");return o.setAttributes(u,o.attributes),o.insert(u,o.options),u}i.exports=s},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"(i,s,o){"use strict";function u(_){var n=o.nc;n&&_.setAttribute("nonce",n)}i.exports=u},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleDomAPI.js"(i){"use strict";function s(_,n,e){var t="";e.supports&&(t+="@supports (".concat(e.supports,") {")),e.media&&(t+="@media ".concat(e.media," {"));var r=typeof e.layer!="undefined";r&&(t+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),t+=e.css,r&&(t+="}"),e.media&&(t+="}"),e.supports&&(t+="}");var l=e.sourceMap;l&&typeof btoa!="undefined"&&(t+=`
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(l))))," */")),n.styleTagTransform(t,_,n.options)}function o(_){if(_.parentNode===null)return!1;_.parentNode.removeChild(_)}function u(_){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var n=_.insertStyleElement(_);return{update:function(t){s(n,_,t)},remove:function(){o(n)}}}i.exports=u},"../../node_modules/.pnpm/style-loader@4.0.0_webpack@5.105.0_@swc+core@1.15.18_@swc+helpers@0.5.19__esbuild@0.27.4_postcss@8.5.15_/node_modules/style-loader/dist/runtime/styleTagTransform.js"(i){"use strict";function s(o,u){if(u.styleSheet)u.styleSheet.cssText=o;else{for(;u.firstChild;)u.removeChild(u.firstChild);u.appendChild(document.createTextNode(o))}}i.exports=s},"./src/components/UICallout/CalloutCollisionTransform.ts"(i,s){"use strict";Object.defineProperty(s,"__esModule",{value:!0}),s.CalloutCollisionTransform=void 0;const o={target:".ms-Dialog-actions",container:".ms-Dialog-main",absolute:!0,minPagePadding:10},u=20;class _{constructor(e,t,r=o){this.originalStyle={},this.source=e,this.callout=t,this.props=r,this.applyTransformation=this.applyTransformation.bind(this),this.resetTransformation=this.resetTransformation.bind(this),this.preventDismissOnEvent=this.preventDismissOnEvent.bind(this)}createPlaceholder(e){const t=document.createElement("div");return t.classList.add("ts-Callout-transformation"),t.style.height=`${e}px`,t}getElements(){const e=this.source.current,t=e==null?void 0:e.closest(this.props.container);if(t&&e){const r=t==null?void 0:t.querySelector(this.props.target);if(r){const l={container:{dom:t,rect:t.getBoundingClientRect()},target:{dom:r,rect:r.getBoundingClientRect()},source:{dom:e,rect:e.getBoundingClientRect()}},p=this.callout.current;return p&&(l.callout={dom:p,rect:p.getBoundingClientRect()}),l}}}applyTransformation(){const e=this.getElements();if(!e)return;const{container:t,target:r,callout:l,source:p}=e;if(l){const y=window.innerHeight-o.minPagePadding,m=l.rect.height,a=p.rect.bottom;let f=a+m-r.rect.top,c=a+l.rect.height;if(f<=0||c>=y)return;if(c+=r.rect.height,c<=y&&(f+=u),this.props.absolute){const d=t.dom.style;this.originalStyle={transform:d.transform,position:d.position,top:d.top,left:d.left},d.transform="",d.position="absolute",d.top=`${t.rect.top}px`,d.left=`${t.rect.left}px`}this.placeholder=this.createPlaceholder(f),r.dom.prepend(this.placeholder)}}resetTransformation(){const e=this.getElements();if(!e)return;const{container:t}=e;for(const r in this.originalStyle){const l=this.originalStyle[r];typeof l=="string"&&(t.dom.style[r]=l)}this.originalStyle={},this.placeholder&&(this.placeholder.remove(),this.placeholder=void 0)}preventDismissOnEvent(e){const t=this.getElements();return!!(e.type==="focus"&&(t!=null&&t.target.dom.contains(e.target)))}}s.CalloutCollisionTransform=_},"./src/components/UICallout/UICallout.tsx"(i,s,o){"use strict";var u=this&&this.__importDefault||function(m){return m&&m.__esModule?m:{default:m}};Object.defineProperty(s,"__esModule",{value:!0}),s.UICallout=s.getCalloutStyle=s.UICalloutContentPadding=s.CALLOUT_STYLES=void 0;const _=u(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=o("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js"),e=o("./src/utilities/index.ts");o("./src/styles/_shadows.scss"),s.CALLOUT_STYLES={background:"var(--vscode-editorWidget-background)",boxShadow:"var(--ui-box-shadow-small)",borderColor:"var(--vscode-editorWidget-border)",text:"var(--vscode-editorWidget-foreground)",borderRadius:"var(--vscode-cornerRadius-small, 4px)"};var t;(function(m){m.None="None",m.Standard="Standard"})(t||(s.UICalloutContentPadding=t={}));const r=new Map([[t.Standard,8]]),l=(m,a)=>typeof m=="object"&&typeof m[a]=="object"?m[a]:{},p=m=>{var a,f;return{root:g({boxShadow:s.CALLOUT_STYLES.boxShadow,backgroundColor:s.CALLOUT_STYLES.background,borderRadius:s.CALLOUT_STYLES.borderRadius,border:`1px solid ${s.CALLOUT_STYLES.borderColor}`},l(m.styles,"root")),beak:g({backgroundColor:s.CALLOUT_STYLES.background,boxShadow:s.CALLOUT_STYLES.boxShadow},l(m.styles,"beak")),beakCurtain:g({backgroundColor:s.CALLOUT_STYLES.background,borderRadius:s.CALLOUT_STYLES.borderRadius},l(m.styles,"beakCurtain")),calloutMain:g({backgroundColor:"transparent",color:s.CALLOUT_STYLES.text,borderRadius:s.CALLOUT_STYLES.borderRadius,minWidth:(a=m.calloutMinWidth)!=null?a:300,boxSizing:"border-box",padding:r.get((f=m.contentPadding)!=null?f:t.None)},l(m.styles,"calloutMain")),container:l(m.styles,"container")}};s.getCalloutStyle=p;class y extends _.default.Component{constructor(a){super(a),this.onKeyDown=this.onKeyDown.bind(this)}onKeyDown(a){const{onKeyDown:f,focusTargetSiblingOnTabPress:c,target:d}=this.props;if(c&&a.key==="Tab"&&d){let b=null;if(typeof d=="string"){const h=(0,n.getDocument)();b=h==null?void 0:h.querySelector(d)}else"getBoundingClientRect"in d&&(0,e.isHTMLElement)(d)&&(b=d);b&&(0,e.focusToSibling)(b,!a.shiftKey)&&(a.stopPropagation(),a.preventDefault())}f==null||f(a)}render(){return _.default.createElement(n.Callout,I(g({},this.props),{onKeyDown:this.onKeyDown,styles:(0,s.getCalloutStyle)(this.props)}),this.props.children)}}s.UICallout=y,y.__docgenInfo={description:`UICallout component.
based on https://developer.microsoft.com/en-us/fluentui#/controls/web/callout

@exports
@class UICallout
@extends {React.Component<ICalloutProps, {}>}`,methods:[],displayName:"UICallout",props:{calloutMinWidth:{required:!1,tsType:{name:"number"},description:""},contentPadding:{required:!1,tsType:{name:"UICalloutContentPadding"},description:""},focusTargetSiblingOnTabPress:{required:!1,tsType:{name:"boolean"},description:""}},composes:["ICalloutProps"]}},"./src/components/UICallout/index.tsx"(i,s,o){"use strict";var u=this&&this.__createBinding||(Object.create?(function(n,e,t,r){r===void 0&&(r=t);var l=Object.getOwnPropertyDescriptor(e,t);(!l||("get"in l?!e.__esModule:l.writable||l.configurable))&&(l={enumerable:!0,get:function(){return e[t]}}),Object.defineProperty(n,r,l)}):(function(n,e,t,r){r===void 0&&(r=t),n[r]=e[t]})),_=this&&this.__exportStar||function(n,e){for(var t in n)t!=="default"&&!Object.prototype.hasOwnProperty.call(e,t)&&u(e,n,t)};Object.defineProperty(s,"__esModule",{value:!0}),_(o("./src/components/UICallout/CalloutCollisionTransform.ts"),s),_(o("./src/components/UICallout/UICallout.tsx"),s)},"./src/components/UIFocusZone/UIFocusTrapZone.tsx"(i,s,o){"use strict";var u=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(s,"__esModule",{value:!0}),s.UIFocusTrapZone=void 0;const _=u(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=o("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js");class e extends _.default.Component{constructor(r){super(r)}render(){return _.default.createElement(n.FocusTrapZone,g({},this.props),this.props.children)}}s.UIFocusTrapZone=e,e.__docgenInfo={description:`UIFocusTrapZone component
based on https://developer.microsoft.com/en-us/fluentui/#/controls/web/focustrapzone

@exports
@class UIFocusTrapZone
@extends {React.Component<IFocusTrapZoneProps, {}>}`,methods:[],displayName:"UIFocusTrapZone"}},"./src/components/UIFocusZone/UIFocusZone.tsx"(i,s,o){"use strict";var u=this&&this.__importDefault||function(r){return r&&r.__esModule?r:{default:r}};Object.defineProperty(s,"__esModule",{value:!0}),s.UIFocusZone=s.UIFocusZoneTabbableElements=s.UIFocusZoneDirection=void 0;const _=u(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=o("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js");var e=o("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js");Object.defineProperty(s,"UIFocusZoneDirection",{enumerable:!0,get:function(){return e.FocusZoneDirection}}),Object.defineProperty(s,"UIFocusZoneTabbableElements",{enumerable:!0,get:function(){return e.FocusZoneTabbableElements}});class t extends _.default.Component{constructor(l){super(l)}render(){return _.default.createElement(n.FocusZone,g({},this.props),this.props.children)}}s.UIFocusZone=t,t.__docgenInfo={description:`UIFocusZone component
based on https://developer.microsoft.com/en-us/fluentui#/controls/web/focuszone

@exports
@class UIFocusZone
@extends {React.Component<IFocusZoneProps, {}>}`,methods:[],displayName:"UIFocusZone"}},"./src/components/UIFocusZone/index.tsx"(i,s,o){"use strict";var u=this&&this.__createBinding||(Object.create?(function(n,e,t,r){r===void 0&&(r=t);var l=Object.getOwnPropertyDescriptor(e,t);(!l||("get"in l?!e.__esModule:l.writable||l.configurable))&&(l={enumerable:!0,get:function(){return e[t]}}),Object.defineProperty(n,r,l)}):(function(n,e,t,r){r===void 0&&(r=t),n[r]=e[t]})),_=this&&this.__exportStar||function(n,e){for(var t in n)t!=="default"&&!Object.prototype.hasOwnProperty.call(e,t)&&u(e,n,t)};Object.defineProperty(s,"__esModule",{value:!0}),_(o("./src/components/UIFocusZone/UIFocusTrapZone.tsx"),s),_(o("./src/components/UIFocusZone/UIFocusZone.tsx"),s)},"./stories/UICallout.story.tsx"(i,s,o){"use strict";var u=this&&this.__createBinding||(Object.create?(function(f,c,d,b){b===void 0&&(b=d);var h=Object.getOwnPropertyDescriptor(c,d);(!h||("get"in h?!c.__esModule:h.writable||h.configurable))&&(h={enumerable:!0,get:function(){return c[d]}}),Object.defineProperty(f,b,h)}):(function(f,c,d,b){b===void 0&&(b=d),f[b]=c[d]})),_=this&&this.__setModuleDefault||(Object.create?(function(f,c){Object.defineProperty(f,"default",{enumerable:!0,value:c})}):function(f,c){f.default=c}),n=this&&this.__importStar||(function(){var f=function(c){return f=Object.getOwnPropertyNames||function(d){var b=[];for(var h in d)Object.prototype.hasOwnProperty.call(d,h)&&(b[b.length]=h);return b},f(c)};return function(c){if(c&&c.__esModule)return c;var d={};if(c!=null)for(var b=f(c),h=0;h<b.length;h++)b[h]!=="default"&&u(d,c,b[h]);return _(d,c),d}})();Object.defineProperty(s,"__esModule",{value:!0}),s.Callout=void 0;const e=n(o("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),t=o("./src/components/UIButton/index.tsx"),r=o("./src/components/UICallout/index.tsx"),l=o("./src/components/UIFocusZone/index.tsx"),p=o("./src/components/Icons.tsx");s.default={title:"Dropdowns/Callout"};const y=f=>{const{id:c}=f,[d,b]=(0,e.useState)(!1),h=()=>{b(!d)};return e.default.createElement("div",null,e.default.createElement(t.UIIconButton,{id:c,iconProps:{iconName:p.UiIcons.Bulb},checked:d,onClick:h}),d&&e.default.createElement(r.UICallout,{target:`#${c}`,isBeakVisible:!0,beakWidth:5,directionalHint:4,onDismiss:()=>h(),calloutWidth:300,calloutMinWidth:300,contentPadding:r.UICalloutContentPadding.Standard},e.default.createElement("div",null,"lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt")))},m=f=>{const{id:c}=f,[d,b]=(0,e.useState)(!1),h=()=>{b(!d)};return e.default.createElement("div",null,e.default.createElement(t.UIDefaultButton,{id:c,iconProps:{iconName:p.UiIcons.Bulb},checked:d,onClick:h},"Open"),d&&e.default.createElement(r.UICallout,{target:`#${c}`,isBeakVisible:!0,setInitialFocus:!0,beakWidth:5,directionalHint:4,onDismiss:()=>h(),calloutWidth:300,calloutMinWidth:300,contentPadding:r.UICalloutContentPadding.Standard,focusTargetSiblingOnTabPress:!0},e.default.createElement("div",null,e.default.createElement(l.UIFocusZone,null,e.default.createElement(t.UIDefaultButton,{onClick:h},"Option 1"),e.default.createElement(t.UIDefaultButton,{onClick:h},"Option 2"),e.default.createElement(t.UIDefaultButton,{onClick:h},"Option 3")))))},a=()=>e.default.createElement("div",null,e.default.createElement(y,{id:"callout-with-text-id"}),e.default.createElement(m,{id:"callout-with-items-1-id"}),e.default.createElement(m,{id:"callout-with-items-2-id"}));s.Callout=a}}]);})();