@sap-ux/ui-components/storybook/UIDropdown-story.20290ff6.iframe.bundle.js

SAP UI Components Library

"use strict";(()=>{var T=Object.defineProperty,B=Object.defineProperties;var O=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var w=(u,t,d)=>t in u?T(u,t,{enumerable:!0,configurable:!0,writable:!0,value:d}):u[t]=d,i=(u,t)=>{for(var d in t||(t={}))P.call(t,d)&&w(u,d,t[d]);if(x)for(var d of x(t))G.call(t,d)&&w(u,d,t[d]);return u},c=(u,t)=>B(u,O(t));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[6],{"./stories/UIDropdown.story.tsx":function(u,t,d){var p=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(t,"__esModule",{value:!0}),t.customRender=t.groupsAndSeparators=t.accessibilityStates=t.UseDropdownAsMenuMinWidth=t.Messages=t.MultiSelectDropdown=t.States=t.Short=t.Basic=void 0;const e=p(d("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),E=d("../../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"),a=d("./src/components/index.tsx"),n=d("./test/__mock__/select-data.ts");t.default={title:"Dropdowns/Dropdown"};const k=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(a.UIDropdown,{options:n.data,useDropdownAsMenuMinWidth:!0}));t.Basic=k;const D=()=>e.default.createElement("div",{style:{width:"150px"}},e.default.createElement(a.UIDropdown,{options:n.shortData}),e.default.createElement(a.UIDropdown,{options:n.shortData,disabled:!0}));t.Short=D;const I=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(a.UIDropdown,{options:n.data,label:"Error",errorMessage:"Dummy Error"}),e.default.createElement(a.UIDropdown,{options:n.data,label:"Disabled",disabled:!0}),e.default.createElement(a.UIDropdown,{options:n.data,label:"Required",required:!0}));t.States=I;const M=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(a.UIDropdown,{options:n.data,multiSelect:!0,responsiveMode:5}));t.MultiSelectDropdown=M;const S=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(a.UIDropdown,{options:n.data,label:"Error",errorMessage:"Dummy Error"}),e.default.createElement(a.UIDropdown,{options:n.data,label:"Warning",warningMessage:"Dummy Warning"}),e.default.createElement(a.UIDropdown,{options:n.data,label:"Info",infoMessage:"Dummy Info"}));t.Messages=S;const U=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement("div",null,e.default.createElement("div",null,"useDropdownAsMenuMinWidth ON"),e.default.createElement(a.UIDropdown,{label:"Long",options:n.data,useDropdownAsMenuMinWidth:!0}),e.default.createElement(a.UIDropdown,{label:"Short",options:n.shortData,useDropdownAsMenuMinWidth:!0})),e.default.createElement("div",null,e.default.createElement("div",null,"useDropdownAsMenuMinWidth OFF"),e.default.createElement(a.UIDropdown,{label:"Long",options:n.data}),e.default.createElement(a.UIDropdown,{label:"Short",options:n.shortData})));t.UseDropdownAsMenuMinWidth=U;const A=()=>{const[l,y]=e.default.useState(!1),[r,s]=e.default.useState("EE"),h={childrenGap:40},f=Array.isArray(r)?r:void 0,m={options:n.data,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,multiSelect:l,onChange:(C,o)=>{if(Array.isArray(r)){const K=[...r,o==null?void 0:o.key].filter(R=>o!=null&&o.selected?!0:R!==(o==null?void 0:o.key));s(K)}else o&&s(o.key)}};return e.default.createElement("div",null,e.default.createElement(a.UICheckbox,{label:"Multi Select",checked:l,onChange:(C,o)=>{o&&!Array.isArray(r)?s([r]):!o&&Array.isArray(r)&&s(r[0]),y(o)}}),e.default.createElement(E.Stack,{horizontal:!0,tokens:h},e.default.createElement("table",{style:{borderSpacing:20,width:"100%",maxWidth:750}},e.default.createElement("tr",null,e.default.createElement("td",{style:{minWidth:100,width:150}}),e.default.createElement("td",{style:{width:"50%"}},"Placeholder Text"),e.default.createElement("td",{style:{width:"50%"}},"Input Text")),e.default.createElement("tr",null,e.default.createElement("td",null,"Regular"),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{placeholder:"Placeholder"}))),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{selectedKey:r,selectedKeys:f})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Error"),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{placeholder:"Placeholder",errorMessage:"Dummy error"}))),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{errorMessage:"Dummy error",selectedKey:r,selectedKeys:f})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Disabled"),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{placeholder:"Placeholder",disabled:!0}))),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{selectedKey:r,selectedKeys:f,disabled:!0})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Read Only"),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{placeholder:"Placeholder",readOnly:!0}))),e.default.createElement("td",null,e.default.createElement(a.UIDropdown,c(i({},m),{selectedKey:r,selectedKeys:f,readOnly:!0})))))))};t.accessibilityStates=A;const g=()=>{const l=[...n.groupsData];return l.splice(4,0,{key:"div1",text:"",itemType:a.UISelectableOptionMenuItemType.Divider}),l.splice(14,0,{key:"div1",text:"",itemType:a.UISelectableOptionMenuItemType.Divider}),l.splice(18,0,{key:"div1",text:"",itemType:a.UISelectableOptionMenuItemType.Divider}),e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(a.UIDropdown,{options:n.groupsData,label:"Menu items with headers"}),e.default.createElement(a.UIDropdown,{options:l,label:"Menu items with dividers and headers"}),e.default.createElement(a.UIDropdown,{options:n.groupsData,multiSelect:!0,label:"Menu items with headers - multi select"}),e.default.createElement(a.UIDropdown,{options:l,multiSelect:!0,label:"Menu items with dividers and headers - multi select"}))};t.groupsAndSeparators=g;const b=["AR","BR","DK"],v=n.data.map(l=>b.includes(l.key)?c(i({},l),{editable:!0}):l),_=()=>e.default.createElement(a.UIDropdown,{options:v,onRenderOption:(l,y)=>{var r;return"editable"in(l!=null?l:{})?e.default.createElement(a.UITextInput,{onMouseDown:s=>{s.target.focus()},onClick:s=>{s.nativeEvent.preventDefault(),s.nativeEvent.stopPropagation(),s.preventDefault(),s.stopPropagation()}}):(r=y==null?void 0:y(l))!=null?r:null},onRenderItem:(l,y)=>{var r;return(r=y==null?void 0:y(l))!=null?r:null}});t.customRender=_},"./test/__mock__/select-data.ts":(u,t,d)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.groupsData=t.shortData=t.data=void 0;const p=d("./src/components/index.tsx");t.data=[{key:"",text:""},{key:"DZ",text:"Algeria"},{key:"AR",text:"Argentina"},{key:"AU",text:"Australia"},{key:"AT",text:"Austria"},{key:"BH",text:"Bahrain"},{key:"BE",text:"Belgium"},{key:"BC",text:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod"},{key:"BA",text:"Bosnia and Herzegovina"},{key:"BR",text:"Brazil"},{key:"BG",text:"Bulgaria"},{key:"CA",text:"Canada"},{key:"CL",text:"Chile"},{key:"CO",text:"Colombia"},{key:"HR",text:"Croatia"},{key:"CU",text:"Cuba"},{key:"CZ",text:"Czech Republic"},{key:"DK",text:"Denmark"},{key:"EG",text:"Egypt"},{key:"EE",text:"Estonia"},{key:"FI",text:"Finland"},{key:"FR",text:"France"},{key:"GER",text:"Germany"},{key:"GH",text:"Ghana"},{key:"GR",text:"Greece"},{key:"HU",text:"Hungary"},{key:"IN",text:"India"},{key:"ID",text:"Indonesia"},{key:"IE",text:"Ireland"},{key:"IL",text:"Israel"},{key:"IT",text:"Italy"},{key:"JP",text:"Japan"},{key:"JO",text:"Jordan"},{key:"KE",text:"Kenya"},{key:"KW",text:"Kuwait"},{key:"LV",text:"Latvia"},{key:"LT",text:"Lithuania"},{key:"MK",text:"Macedonia"},{key:"MY",text:"Malaysia"},{key:"MX",text:"Mexico"},{key:"ME",text:"Montenegro"},{key:"MA",text:"Morocco"},{key:"NL",text:"Netherlands"},{key:"NZ",text:"New Zealand"},{key:"NG",text:"Nigeria"},{key:"NO",text:"Norway"},{key:"OM",text:"Oman"},{key:"PE",text:"Peru"},{key:"PH",text:"Philippines"},{key:"PL",text:"Poland"},{key:"PT",text:"Portugal"},{key:"QA",text:"Qatar"},{key:"RO",text:"Romania"},{key:"RU",text:"Russia"},{key:"SA",text:"Saudi Arabia"},{key:"SN",text:"Senegal"},{key:"RS",text:"Serbia"},{key:"SG",text:"Singapore"},{key:"SK",text:"Slovakia"},{key:"SI",text:"Slovenia"},{key:"ZA",text:"South Africa"},{key:"KR",text:"South Korea"},{key:"ES",text:"Spain"},{key:"SE",text:"Sweden"},{key:"CH",text:"Switzerland"},{key:"TN",text:"Tunisia"},{key:"TR",text:"Turkey"},{key:"UG",text:"Uganda"},{key:"UA",text:"Ukraine"},{key:"AE",text:"United Arab Emirates"},{key:"GB",text:"United Kingdom"},{key:"DU",text:"Dummmmmmmmyyyyyy"},{key:"DD",text:"Dudududumy"},{key:"YE",text:"Yemen"}],t.shortData=[t.data[0],t.data[1],t.data[2],t.data[3],t.data[4]];const e={africa:["DZ","EG","GH","KE","MA","NG","SN","ZA","TN","UG"],asia:["BH","IN","ID","JP","JO","KW","MY","OM","PH","QA","SA","SG","KR","AE","YE"],"Australia and Oceania":["AU","BC","NZ"],europe:["AT","BE","BA","BG","HR","CZ","DK","EE","FI","FR","GER","GR","HU","IE","IL","IT","LV","LT","MK","ME","NL","NO","PL","PT","RO","RU","RS","SK","SI","ES","SE","CH","TR","UA","GB"],northAmerica:["CA"],southAmerica:["AR","BR","CL","CO","CU","MX","PE"],unknown:["DU","DD"]};t.groupsData=[];for(const E in e){t.groupsData.push({key:E,text:E.charAt(0).toUpperCase()+E.slice(1),itemType:p.UISelectableOptionMenuItemType.Header});const a=e[E];for(const n of a){const k=t.data.find(D=>D.key===n);k&&t.groupsData.push(k)}}}}]);})();