@sap-ux/ui-components 1.22.0 → 1.22.2

package/storybook/UICombobox-story.07a3f7b0.iframe.bundle.js

@@ -1 +0,0 @@
-"use strict";(()=>{var j=Object.defineProperty,Z=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var M=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var I=(c,t,u)=>t in c?j(c,t,{enumerable:!0,configurable:!0,writable:!0,value:u}):c[t]=u,m=(c,t)=>{for(var u in t||(t={}))J.call(t,u)&&I(c,u,t[u]);if(M)for(var u of M(t))Y.call(t,u)&&I(c,u,t[u]);return c},h=(c,t)=>Z(c,z(t));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[632],{"./stories/UICombobox.story.tsx":function(c,t,u){var b=this&&this.__createBinding||(Object.create?function(a,l,n,i){i===void 0&&(i=n);var d=Object.getOwnPropertyDescriptor(l,n);(!d||("get"in d?!l.__esModule:d.writable||d.configurable))&&(d={enumerable:!0,get:function(){return l[n]}}),Object.defineProperty(a,i,d)}:function(a,l,n,i){i===void 0&&(i=n),a[i]=l[n]}),x=this&&this.__setModuleDefault||(Object.create?function(a,l){Object.defineProperty(a,"default",{enumerable:!0,value:l})}:function(a,l){a.default=l}),f=this&&this.__importStar||function(a){if(a&&a.__esModule)return a;var l={};if(a!=null)for(var n in a)n!=="default"&&Object.prototype.hasOwnProperty.call(a,n)&&b(l,a,n);return x(l,a),l};Object.defineProperty(t,"__esModule",{value:!0}),t.AdditionalCustomSearch=t.SearchIncludeKeys=t.customRender=t.groupsAndSeparators=t.accessibilityStates=t.openMenuOnClick=t.Messages=t.MultiSelectSearchHighlight=t.DifferentStates=t.WithLoading=t.WithRefresh=t.WithoutSearch=t.SearchWithoutHighlight=t.SearchHighlight=void 0;const e=f(u("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),k=u("../../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=u("./src/components/UIComboBox/index.tsx"),g=u("./src/components/UICheckbox/index.tsx"),r=u("./test/__mock__/select-data.ts"),B=u("./src/components/index.tsx");t.default={title:"Dropdowns/Combobox"};const S=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(o.UIComboBox,{options:r.data,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on"}),e.default.createElement(o.UIComboBox,{options:r.data,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",disabled:!0}));t.SearchHighlight=S;const U=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(o.UIComboBox,{options:r.data,dropdownWidth:300,placeholder:"Search",allowFreeform:!0,autoComplete:"on",openOnKeyboardFocus:!0}));t.SearchWithoutHighlight=U;const A=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(o.UIComboBox,{options:r.data,dropdownWidth:300}));t.WithoutSearch=A;const D=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(o.UIComboBox,{options:r.data,onRefresh:()=>console.log("refresh trigged!")}),e.default.createElement("small",null,"*watch console"));t.WithRefresh=D;const w=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(o.UIComboBox,{options:r.data,isLoading:!0,styles:{optionsContainerWrapper:{width:"262px"}},label:"Default"}),e.default.createElement(o.UIComboBox,{options:r.data,isLoading:[o.UIComboBoxLoaderType.List],styles:{optionsContainerWrapper:{width:"262px"}},label:"List"}),e.default.createElement(o.UIComboBox,{options:r.data,isLoading:[o.UIComboBoxLoaderType.Input],styles:{optionsContainerWrapper:{width:"262px"}},label:"Input"}),e.default.createElement(o.UIComboBox,{options:r.data,isLoading:[o.UIComboBoxLoaderType.List,o.UIComboBoxLoaderType.Input],styles:{optionsContainerWrapper:{width:"262px"}},label:"List and Input"}));t.WithLoading=w;const O=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(o.UIComboBox,{options:r.data,label:"Error",highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",errorMessage:"Dummy Error"}),e.default.createElement(o.UIComboBox,{options:r.data,label:"Disabled",highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",disabled:!0}),e.default.createElement(o.UIComboBox,{options:r.data,label:"Required",highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",required:!0}));t.DifferentStates=O;const v=()=>{const[a,l]=(0,e.useState)([]);function n(i,d,y,E){if(d){const s=[...a,d.key].filter(p=>d.selected?!0:p!==d.key);l(s)}}return e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(o.UIComboBox,{options:r.data,selectedKey:a,onChange:n,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,multiSelect:!0,autoComplete:"on"}))};t.MultiSelectSearchHighlight=v;const W=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(o.UIComboBox,{options:r.data,label:"Error",highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",errorMessage:"Dummy Error"}),e.default.createElement(o.UIComboBox,{options:r.data,label:"Error",highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",warningMessage:"Dummy Warning"}),e.default.createElement(o.UIComboBox,{options:r.data,label:"Error",highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",infoMessage:"Dummy Info"}));t.Messages=W;const T=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(o.UIComboBox,{options:r.data,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",openMenuOnClick:!0,label:"Open menu on click"}),e.default.createElement(o.UIComboBox,{options:r.data,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",openMenuOnClick:!1,label:"Do not open menu on click"}));t.openMenuOnClick=T;const _=()=>{const[a,l]=e.default.useState(!1),[n,i]=e.default.useState("EE"),d={childrenGap:40},y={options:r.data,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,multiSelect:a,onChange:(E,s)=>{if(Array.isArray(n)){const p=[...n,s==null?void 0:s.key].filter(N=>s!=null&&s.selected?!0:N!==(s==null?void 0:s.key));i(p)}else s&&i(s.key)}};return e.default.createElement("div",null,e.default.createElement(k.Stack,{horizontal:!0,tokens:d},e.default.createElement(g.UICheckbox,{label:"Multi Select",checked:a,onChange:(E,s)=>{s&&!Array.isArray(n)?i([n]):!s&&Array.isArray(n)&&i(n[0]),l(s)}})),e.default.createElement(k.Stack,{horizontal:!0,tokens:d},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(o.UIComboBox,h(m({},y),{placeholder:"Placeholder"}))),e.default.createElement("td",null,e.default.createElement(o.UIComboBox,h(m({},y),{selectedKey:n})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Error"),e.default.createElement("td",null,e.default.createElement(o.UIComboBox,h(m({},y),{placeholder:"Placeholder",errorMessage:"Dummy error"}))),e.default.createElement("td",null,e.default.createElement(o.UIComboBox,h(m({},y),{errorMessage:"Dummy error",selectedKey:n})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Disabled"),e.default.createElement("td",null,e.default.createElement(o.UIComboBox,h(m({},y),{placeholder:"Placeholder",disabled:!0}))),e.default.createElement("td",null,e.default.createElement(o.UIComboBox,h(m({},y),{selectedKey:n,disabled:!0})))),e.default.createElement("tr",null,e.default.createElement("td",null,"Read Only"),e.default.createElement("td",null,e.default.createElement(o.UIComboBox,h(m({},y),{placeholder:"Placeholder",readOnly:!0}))),e.default.createElement("td",null,e.default.createElement(o.UIComboBox,h(m({},y),{selectedKey:n,readOnly:!0})))))))};t.accessibilityStates=_;const K=()=>{const a=[...r.groupsData];return a.splice(5,0,{key:"div1",text:"",itemType:o.UISelectableOptionMenuItemType.Divider}),a.splice(15,0,{key:"div1",text:"",itemType:o.UISelectableOptionMenuItemType.Divider}),e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(o.UIComboBox,{options:r.groupsData,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",openMenuOnClick:!0,label:"Menu items with headers"}),e.default.createElement(o.UIComboBox,{options:a,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",openMenuOnClick:!0,label:"Menu items with dividers and headers"}),e.default.createElement(o.UIComboBox,{options:r.groupsData,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",openMenuOnClick:!0,multiSelect:!0,label:"Menu items with headers - multi select"}),e.default.createElement(o.UIComboBox,{options:a,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",openMenuOnClick:!0,multiSelect:!0,label:"Menu items with dividers and headers - multi select"}))};t.groupsAndSeparators=K;const R=["AR","BR","DK"],F=r.data.map(a=>R.includes(a.key)?h(m({},a),{editable:!0}):a),L=()=>e.default.createElement(o.UIComboBox,{options:F,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",onRenderOption:(a,l)=>{var n;return"editable"in(a!=null?a:{})?e.default.createElement(B.UITextInput,{onMouseDown:i=>{i.target.focus()},onClick:i=>{i.nativeEvent.preventDefault(),i.nativeEvent.stopPropagation(),i.preventDefault(),i.stopPropagation()}}):(n=l==null?void 0:l(a))!=null?n:null},onRenderItem:(a,l)=>{var n;return(n=l==null?void 0:l(a))!=null?n:null}});t.customRender=L;const C=[{key:"test1",text:"test1"},{key:"dummy",text:"dummy"},{key:"customer",text:"customer"},{key:"name",text:"name"},{key:"employee",text:"employee"},{key:"ID",text:"ID"},{key:"tripEndDate",text:"tripEndDate"},{key:"bookings",text:"bookings",itemType:o.UISelectableOptionMenuItemType.Divider},{key:"bookings",text:"bookings",itemType:o.UISelectableOptionMenuItemType.Header},{key:"bookings/airlines",text:"airlines"},{key:"bookings/bookingDate",text:"bookingDate"},{key:"bookings/DateOnBookings",text:"DateOnBookings"},{key:"bookings/employee",text:"employee"},{key:"bookings/flightDate",text:"flightDate"},{key:"bookings/ID",text:"ID"},{key:"bookings/priceUSD",text:"priceUSD"},{key:"bookings/travel_ID",text:"travel_ID"},{key:"bookings/usedString5",text:"usedString5"},{key:"notes",text:"notes",itemType:o.UISelectableOptionMenuItemType.Divider},{key:"notes",text:"notes",itemType:o.UISelectableOptionMenuItemType.Header},{key:"notes/comment",text:"comment"},{key:"notes/description",text:"description"}],P=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(o.UIComboBox,{options:C,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",searchByKeyEnabled:!0}),e.default.createElement(o.UIComboBox,{options:C,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",disabled:!0,searchByKeyEnabled:!0}));t.SearchIncludeKeys=P;const H=[...r.data,{key:"A1",text:"Do not hide",customMark:!0},{key:"A2",text:"Always visible",customMark:!0}],G=()=>e.default.createElement("div",{style:{width:"300px"}},e.default.createElement(o.UIComboBox,{options:H,highlight:!0,allowFreeform:!0,useComboBoxAsMenuMinWidth:!0,autoComplete:"on",customSearchFilter:(a,l)=>{if("customMark"in l&&l.customMark)return!0}}));t.AdditionalCustomSearch=G},"./test/__mock__/select-data.ts":(c,t,u)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.groupsData=t.shortData=t.data=void 0;const b=u("./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 x={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 f in x){t.groupsData.push({key:f,text:f.charAt(0).toUpperCase()+f.slice(1),itemType:b.UISelectableOptionMenuItemType.Header});const e=x[f];for(const k of e){const o=t.data.find(g=>g.key===k);o&&t.groupsData.push(o)}}}}]);})();