@sap-ux/ui-components/storybook/UIContextualMenu-story.69ca0e68.iframe.bundle.js

SAP UI Components Library

(()=>{var B=Object.defineProperty,D=Object.defineProperties;var A=Object.getOwnPropertyDescriptors;var M=Object.getOwnPropertySymbols;var L=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var w=(s,a,r)=>a in s?B(s,a,{enumerable:!0,configurable:!0,writable:!0,value:r}):s[a]=r,_=(s,a)=>{for(var r in a||(a={}))L.call(a,r)&&w(s,r,a[r]);if(M)for(var r of M(a))R.call(a,r)&&w(s,r,a[r]);return s},I=(s,a)=>D(s,A(a));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[289],{"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/api.js":s=>{"use strict";s.exports=function(a){var r=[];return r.toString=function(){return this.map(function(e){var t="",n=typeof e[5]!="undefined";return e[4]&&(t+="@supports (".concat(e[4],") {")),e[2]&&(t+="@media ".concat(e[2]," {")),n&&(t+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),t+=a(e),n&&(t+="}"),e[2]&&(t+="}"),e[4]&&(t+="}"),t}).join("")},r.i=function(e,t,n,o,p){typeof e=="string"&&(e=[[null,e,void 0]]);var f={};if(n)for(var d=0;d<this.length;d++){var v=this[d][0];v!=null&&(f[v]=!0)}for(var k=0;k<e.length;k++){var u=[].concat(e[k]);n&&f[u[0]]||(typeof p!="undefined"&&(typeof u[5]=="undefined"||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=p),t&&(u[2]&&(u[1]="@media ".concat(u[2]," {").concat(u[1],"}")),u[2]=t),o&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=o):u[4]="".concat(o)),r.push(u))}},r}},"../../node_modules/.pnpm/css-loader@6.8.1_webpack@5.96.1/node_modules/css-loader/dist/runtime/noSourceMaps.js":s=>{"use strict";s.exports=function(a){return a[1]}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":s=>{"use strict";var a=[];function r(t){for(var n=-1,o=0;o<a.length;o++)if(a[o].identifier===t){n=o;break}return n}function l(t,n){for(var o={},p=[],f=0;f<t.length;f++){var d=t[f],v=n.base?d[0]+n.base:d[0],k=o[v]||0,u="".concat(v," ").concat(k);o[v]=k+1;var c=r(u),x={css:d[1],media:d[2],sourceMap:d[3],supports:d[4],layer:d[5]};if(c!==-1)a[c].references++,a[c].updater(x);else{var i=e(x,n);n.byIndex=f,a.splice(f,0,{identifier:u,updater:i,references:1})}p.push(u)}return p}function e(t,n){var o=n.domAPI(n);o.update(t);var p=function(d){if(d){if(d.css===t.css&&d.media===t.media&&d.sourceMap===t.sourceMap&&d.supports===t.supports&&d.layer===t.layer)return;o.update(t=d)}else o.remove()};return p}s.exports=function(t,n){n=n||{},t=t||[];var o=l(t,n);return function(f){f=f||[];for(var d=0;d<o.length;d++){var v=o[d],k=r(v);a[k].references--}for(var u=l(f,n),c=0;c<o.length;c++){var x=o[c],i=r(x);a[i].references===0&&(a[i].updater(),a.splice(i,1))}o=u}}},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertBySelector.js":s=>{"use strict";var a={};function r(e){if(typeof a[e]=="undefined"){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(n){t=null}a[e]=t}return a[e]}function l(e,t){var n=r(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(t)}s.exports=l},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/insertStyleElement.js":s=>{"use strict";function a(r){var l=document.createElement("style");return r.setAttributes(l,r.attributes),r.insert(l,r.options),l}s.exports=a},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js":(s,a,r)=>{"use strict";function l(e){var t=r.nc;t&&e.setAttribute("nonce",t)}s.exports=l},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleDomAPI.js":s=>{"use strict";function a(e,t,n){var o="";n.supports&&(o+="@supports (".concat(n.supports,") {")),n.media&&(o+="@media ".concat(n.media," {"));var p=typeof n.layer!="undefined";p&&(o+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),o+=n.css,p&&(o+="}"),n.media&&(o+="}"),n.supports&&(o+="}");var f=n.sourceMap;f&&typeof btoa!="undefined"&&(o+=`
/*# sourceMappingURL=data:application/json;base64,`.concat(btoa(unescape(encodeURIComponent(JSON.stringify(f))))," */")),t.styleTagTransform(o,e,t.options)}function r(e){if(e.parentNode===null)return!1;e.parentNode.removeChild(e)}function l(e){if(typeof document=="undefined")return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(o){a(t,e,o)},remove:function(){r(t)}}}s.exports=l},"../../node_modules/.pnpm/style-loader@3.3.3_webpack@5.96.1/node_modules/style-loader/dist/runtime/styleTagTransform.js":s=>{"use strict";function a(r,l){if(l.styleSheet)l.styleSheet.cssText=r;else{for(;l.firstChild;)l.removeChild(l.firstChild);l.appendChild(document.createTextNode(r))}}s.exports=a},"./src/components/UIToggle/UIToggle.tsx":function(s,a,r){"use strict";var l=this&&this.__importDefault||function(i){return i&&i.__esModule?i:{default:i}};Object.defineProperty(a,"__esModule",{value:!0}),a.UIToggle=a.UIToggleSize=void 0;const e=l(r("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),t=l(r("../../node_modules/.pnpm/react-dom@16.14.0_react@16.14.0/node_modules/react-dom/index.js")),n=r("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js"),o=r("./src/helper/ValidationMessage/index.tsx"),p=r("./src/components/UIIcon/index.tsx"),f=r("./src/components/Icons.tsx");var d;(function(i){i.Standard="Standard",i.Small="Small"})(d||(a.UIToggleSize=d={}));const v={width:30,height:18,padding:"0 1px",margin:"0",label:{fontSize:13,padding:"0px 0px 1px 0px"},circle:{width:14,height:14,borderWidth:1}},k=new Map([[!0,{position:"relative",top:-9,left:0}],[!1,{position:"relative",top:-11,left:0}]]),u=.4,c={pill:{unchecked:{background:"var(--vscode-editorWidget-background)",borderColor:"var(--vscode-editorWidget-border)",hover:{background:"var(--vscode-editorWidget-background)",borderColor:"var(--vscode-editorWidget-border)"}},checked:{background:"var(--vscode-editorWidget-background)",borderColor:"var(--vscode-contrastActiveBorder, var(--vscode-editorWidget-border))",hover:{background:"var(--vscode-editorWidget-background)",borderColor:"var(--vscode-contrastActiveBorder, var(--vscode-editorWidget-border))"}},focus:{outline:"1px solid var(--vscode-focusBorder) !important"}},thumb:{unchecked:{background:"var(--vscode-button-secondaryBackground)",borderColor:"var(--vscode-button-border, transparent)",hover:{borderColor:"var(--vscode-button-border, transparent)",background:"var(--vscode-contrastBorder, var(--vscode-button-secondaryHoverBackground))"}},checked:{background:"var(--vscode-button-background)",borderColor:"var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))",hover:{borderColor:"var(--vscode-contrastActiveBorder, var(--vscode-button-border, transparent))",background:"var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))"}}}};class x extends e.default.Component{constructor(h){super(h),this.toggleRootRef=e.default.createRef(),this.handleChange=this.handleChange.bind(this),this.replaceThumbWithIcon=this.replaceThumbWithIcon.bind(this)}componentDidMount(){var h;this.replaceThumbWithIcon((h=this.props.checked)!=null?h:this.props.defaultChecked)}shouldComponentUpdate(h){return h.checked!==this.props.checked&&this.replaceThumbWithIcon(h.checked),!0}handleChange(h,b){var g,m;this.replaceThumbWithIcon(b),(m=(g=this.props).onChange)==null||m.call(g,h,b)}replaceThumbWithIcon(h=!1){var b;if(this.toggleRootRef.current){const g=(b=this.toggleRootRef.current)==null?void 0:b.querySelector(".ms-Toggle-thumb");if(g){const m=k.get(h);t.default.render(e.default.createElement(p.UIIcon,{iconName:h?f.UiIcons.SwitchOn:f.UiIcons.SwitchOff,style:m}),g)}}}getMarginBottom(h){const{inlineLabel:b}=this.props;if(h)return b?0:4}render(){const{inlineLabelLeft:h,labelFlexGrow:b,inlineLabel:g}=this.props,m=v,y=(0,o.getMessageInfo)(this.props),C=T=>({root:I(_({},b&&{flexGrow:1,justifyContent:"space-between"}),{margin:m==null?void 0:m.margin,marginBottom:this.getMarginBottom(y.message)}),label:I(_(_({color:"var(--vscode-foreground)",fontWeight:"normal",fontSize:m==null?void 0:m.label.fontSize,padding:m==null?void 0:m.label.padding},g&&{marginLeft:10}),h&&{order:0,marginLeft:0,marginRight:10}),{opacity:this.props.disabled?u:"inherit"}),pill:I(_({height:m==null?void 0:m.height,width:m==null?void 0:m.width,padding:m==null?void 0:m.padding,background:c.pill.checked.background,borderColor:c.pill.checked.borderColor,borderStyle:"solid",":hover .ms-Toggle-thumb":{background:c.thumb.checked.hover.background,borderColor:c.thumb.checked.hover.borderColor},":hover":{background:c.pill.checked.hover.background,borderColor:c.pill.checked.hover.borderColor},":disabled":{background:c.pill.checked.background,borderColor:c.pill.checked.borderColor,opacity:u}},!T.checked&&{background:c.pill.unchecked.background,borderColor:c.pill.unchecked.borderColor,borderStyle:"solid",":hover .ms-Toggle-thumb":{background:c.thumb.unchecked.hover.background,borderColor:c.thumb.unchecked.hover.borderColor},":hover":{background:c.pill.unchecked.hover.background,borderColor:c.pill.unchecked.hover.borderColor},":disabled":{background:c.pill.unchecked.background,borderColor:c.pill.unchecked.borderColor,opacity:u}}),{selectors:{":focus::after":{border:"none !important",outline:c.pill.focus.outline}}}),thumb:_({height:m==null?void 0:m.circle.height,width:m==null?void 0:m.circle.width,borderWidth:m==null?void 0:m.circle.borderWidth,backgroundPosition:"center",borderColor:c.thumb.checked.borderColor,backgroundColor:c.thumb.checked.background,":hover":{background:c.thumb.checked.hover.background,borderColor:c.thumb.checked.hover.borderColor}},!T.checked&&{borderColor:c.thumb.unchecked.borderColor,backgroundColor:c.thumb.unchecked.background})}),S=e.default.createElement(n.Toggle,I(_({},this.props),{styles:C,ref:this.toggleRootRef,onChange:this.handleChange}));return y.message?e.default.createElement(o.MessageWrapper,{message:y},S):S}}a.UIToggle=x},"./src/components/UIToggle/index.tsx":function(s,a,r){"use strict";var l=this&&this.__createBinding||(Object.create?function(t,n,o,p){p===void 0&&(p=o);var f=Object.getOwnPropertyDescriptor(n,o);(!f||("get"in f?!n.__esModule:f.writable||f.configurable))&&(f={enumerable:!0,get:function(){return n[o]}}),Object.defineProperty(t,p,f)}:function(t,n,o,p){p===void 0&&(p=o),t[p]=n[o]}),e=this&&this.__exportStar||function(t,n){for(var o in t)o!=="default"&&!Object.prototype.hasOwnProperty.call(n,o)&&l(n,t,o)};Object.defineProperty(a,"__esModule",{value:!0}),e(r("./src/components/UIToggle/UIToggle.tsx"),a)},"./stories/UIContextualMenu.story.tsx":function(s,a,r){"use strict";var l=this&&this.__importDefault||function(i){return i&&i.__esModule?i:{default:i}};Object.defineProperty(a,"__esModule",{value:!0}),a.ContextualMenu=void 0;const e=l(r("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),t=r("../../node_modules/.pnpm/@fluentui+react@8.120.5_@types+react-dom@16.9.24_@types+react@16.14.55_react-dom@16.14.0_react@16.14.0/node_modules/@fluentui/react/lib-commonjs/index.js"),n=r("./src/components/UIContextualMenu/index.tsx"),o=r("./src/components/UIButton/index.tsx"),p=r("./src/components/UITreeDropdown/index.tsx"),f=r("./src/components/Icons.tsx"),d=r("./src/components/UIDropdown/index.tsx"),v=r("./src/components/UIToggle/index.tsx");a.default={title:"Dropdowns/ContextualMenu"};const k={childrenGap:40};function u(i=!1){return[{key:"item1",text:"Menu item 1",title:"Menu item 1",onClick:()=>console.log("New clicked")},{key:"item2",text:"Menu item 2",title:"Menu item 2",subMenuProps:I(_({},i&&{directionalHint:p.UIDirectionalHint.leftTopEdge}),{items:[{key:"submenuitem1",text:"Submenu item 1"},{key:"submenuitem2",text:"Submenu item 2",title:"Submenu item 2",subMenuProps:I(_({},i&&{directionalHint:p.UIDirectionalHint.leftTopEdge}),{items:[{key:"submenuitem21",text:"Submenu item 21",title:"Submenu item 21",canCheck:!0,checked:!0},{key:"submenuitem22",text:"Submenu item 22",title:"Submenu item 22",canCheck:!0}]})},{key:"submenuitem3",text:"Submenu item 3",title:"Submenu item 3"},{key:"submenuitem4",text:"Submenu item 1",title:"Submenu item 1"},{key:"submenuitem5",text:"Submenu item 2",title:"Submenu item 2"},{key:"submenuitem6",text:"Submenu item 3",title:"Submenu item 3"}]})}]}const c=[n.UIContextualMenuLayoutType.ContextualMenu,n.UIContextualMenuLayoutType.DropdownMenu].map(i=>({key:i.toString(),text:i.toString()})),x=()=>{const i=e.default.useRef(null),[h,b]=e.default.useState(n.UIContextualMenuLayoutType.ContextualMenu),[g,m]=e.default.useState(!0),[y,C]=e.default.useState(!1),S=e.default.useCallback(()=>{C(!0)},[]),T=e.default.useCallback(()=>C(!1),[]);return e.default.createElement(t.Stack,{tokens:k},e.default.createElement(d.UIDropdown,{label:"Layout",options:c,selectedKey:h.toString(),onChange:(E,U)=>{U&&b(n.UIContextualMenuLayoutType[U.key])}}),e.default.createElement(v.UIToggle,{checked:g,label:"showSubmenuBeneath",onChange:(E,U)=>{m(!!U)}}),e.default.createElement(t.Stack,{tokens:{childrenGap:16}},e.default.createElement(t.Text,{variant:"large",block:!0},"Default UIContextualMenu rendering"),e.default.createElement("span",{ref:i,onClick:S},"Click for ContextualMenu"),e.default.createElement(n.UIContextualMenu,{hidden:!y,target:i,items:u(),onDismiss:T,layoutType:h,showSubmenuBeneath:g})),e.default.createElement(t.Stack,{tokens:{childrenGap:16}},e.default.createElement(t.Text,{variant:"large",block:!0},"As menuProps of a UIButton elements"),e.default.createElement(t.Stack,{horizontal:!0,tokens:k},e.default.createElement(t.Stack,{tokens:{childrenGap:8}},e.default.createElement(t.Text,{variant:"small",block:!0},"UIDefaultButton"),e.default.createElement(o.UIDefaultButton,{primary:!0,text:"Toggle Contextual menu",menuProps:{items:u(),layoutType:h,showSubmenuBeneath:g}})))),e.default.createElement(t.Stack,{tokens:{childrenGap:16}},e.default.createElement(t.Text,{variant:"large",block:!0},"As menuProps of a UIIconButton"),e.default.createElement(t.Stack,{horizontal:!0,tokens:k},e.default.createElement(t.Stack,{tokens:{childrenGap:8}},e.default.createElement(t.Text,{variant:"small",block:!0},"UIIconButton"),e.default.createElement(o.UIIconButton,{iconProps:{iconName:f.UiIcons.Undo},menuProps:{items:u(),layoutType:h,showSubmenuBeneath:g}})))),e.default.createElement(t.Stack,{tokens:{childrenGap:16}},e.default.createElement(t.Text,{variant:"large",block:!0},"As menuProps with beak and showSubmenuBeneath - iconToLeft and open the menu towards left"),e.default.createElement(t.Stack,{horizontal:!0,tokens:k,horizontalAlign:"center"},e.default.createElement(t.Stack,{tokens:{childrenGap:8}},e.default.createElement(t.Text,{variant:"small",block:!0},"UIIconButton"),e.default.createElement(o.UIIconButton,{iconProps:{iconName:f.UiIcons.ArrowLeft},menuProps:{items:u(!0),isBeakVisible:!0,iconToLeft:!0,layoutType:h,showSubmenuBeneath:g}})))))};a.ContextualMenu=x},"../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/index.js":(s,a,r)=>{var l=r("../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/v1.js"),e=r("../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/v4.js"),t=e;t.v1=l,t.v4=e,s.exports=t},"../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/lib/bytesToUuid.js":s=>{for(var a=[],r=0;r<256;++r)a[r]=(r+256).toString(16).substr(1);function l(e,t){var n=t||0,o=a;return[o[e[n++]],o[e[n++]],o[e[n++]],o[e[n++]],"-",o[e[n++]],o[e[n++]],"-",o[e[n++]],o[e[n++]],"-",o[e[n++]],o[e[n++]],"-",o[e[n++]],o[e[n++]],o[e[n++]],o[e[n++]],o[e[n++]],o[e[n++]]].join("")}s.exports=l},"../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/lib/rng-browser.js":s=>{var a=typeof crypto!="undefined"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||typeof msCrypto!="undefined"&&typeof window.msCrypto.getRandomValues=="function"&&msCrypto.getRandomValues.bind(msCrypto);if(a){var r=new Uint8Array(16);s.exports=function(){return a(r),r}}else{var l=new Array(16);s.exports=function(){for(var t=0,n;t<16;t++)t&3||(n=Math.random()*4294967296),l[t]=n>>>((t&3)<<3)&255;return l}}},"../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/v1.js":(s,a,r)=>{var l=r("../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/lib/rng-browser.js"),e=r("../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/lib/bytesToUuid.js"),t,n,o=0,p=0;function f(d,v,k){var u=v&&k||0,c=v||[];d=d||{};var x=d.node||t,i=d.clockseq!==void 0?d.clockseq:n;if(x==null||i==null){var h=l();x==null&&(x=t=[h[0]|1,h[1],h[2],h[3],h[4],h[5]]),i==null&&(i=n=(h[6]<<8|h[7])&16383)}var b=d.msecs!==void 0?d.msecs:new Date().getTime(),g=d.nsecs!==void 0?d.nsecs:p+1,m=b-o+(g-p)/1e4;if(m<0&&d.clockseq===void 0&&(i=i+1&16383),(m<0||b>o)&&d.nsecs===void 0&&(g=0),g>=1e4)throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");o=b,p=g,n=i,b+=122192928e5;var y=((b&268435455)*1e4+g)%4294967296;c[u++]=y>>>24&255,c[u++]=y>>>16&255,c[u++]=y>>>8&255,c[u++]=y&255;var C=b/4294967296*1e4&268435455;c[u++]=C>>>8&255,c[u++]=C&255,c[u++]=C>>>24&15|16,c[u++]=C>>>16&255,c[u++]=i>>>8|128,c[u++]=i&255;for(var S=0;S<6;++S)c[u+S]=x[S];return v||e(c)}s.exports=f},"../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/v4.js":(s,a,r)=>{var l=r("../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/lib/rng-browser.js"),e=r("../../node_modules/.pnpm/uuid@3.4.0/node_modules/uuid/lib/bytesToUuid.js");function t(n,o,p){var f=o&&p||0;typeof n=="string"&&(o=n==="binary"?new Array(16):null,n=null),n=n||{};var d=n.random||(n.rng||l)();if(d[6]=d[6]&15|64,d[8]=d[8]&63|128,o)for(var v=0;v<16;++v)o[f+v]=d[v];return o||e(d)}s.exports=t}}]);})();