"use strict";(self.webpackChunk_woocommerce_storybook=self.webpackChunk_woocommerce_storybook||[]).push([[4087],{"../../packages/js/components/src/tag/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),_wordpress_element__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/@wordpress+i18n@4.6.1/node_modules/@wordpress/i18n/build-module/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),_wordpress_components__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/button/index.js"),_wordpress_components__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/popover/index.js"),_wordpress_icons__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/icon/index.js"),_wordpress_icons__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/library/close-small.js"),_wordpress_html_entities__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../node_modules/.pnpm/@wordpress+html-entities@3.6.1/node_modules/@wordpress/html-entities/build-module/index.js"),_wordpress_compose__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/.pnpm/@wordpress+compose@5.4.1_react@17.0.2/node_modules/@wordpress/compose/build-module/hooks/use-instance-id/index.js"),Tag=(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.forwardRef)((function(_ref,removeButtonRef){var id=_ref.id,label=_ref.label,popoverContents=_ref.popoverContents,remove=_ref.remove,screenReaderLabel=_ref.screenReaderLabel,className=_ref.className,_useState=(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.useState)(!1),_useState2=(0,_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_3__.A)(_useState,2),isVisible=_useState2[0],setIsVisible=_useState2[1],instanceId=(0,_wordpress_compose__WEBPACK_IMPORTED_MODULE_4__.A)(Tag);if(screenReaderLabel=screenReaderLabel||label,!label)return null;label=(0,_wordpress_html_entities__WEBPACK_IMPORTED_MODULE_5__.S)(label);var classes=classnames__WEBPACK_IMPORTED_MODULE_1___default()("woocommerce-tag",className,{"has-remove":!!remove}),labelId="woocommerce-tag__label-".concat(instanceId),labelTextNode=(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.Fragment,null,(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)("span",{className:"screen-reader-text"},screenReaderLabel),(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)("span",{"aria-hidden":"true"},label));return(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)("span",{className:classes},popoverContents?(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.A,{className:"woocommerce-tag__text",id:labelId,onClick:function onClick(){return setIsVisible(!0)}},labelTextNode):(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)("span",{className:"woocommerce-tag__text",id:labelId},labelTextNode),popoverContents&&isVisible&&(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_7__.A,{onClose:function onClose(){return setIsVisible(!1)}},popoverContents),remove&&(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_6__.A,{className:"woocommerce-tag__remove",ref:removeButtonRef,onClick:remove(id),label:(0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.nv)((0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)("Remove %s","woocommerce"),label),"aria-describedby":labelId},(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_2__.createElement)(_wordpress_icons__WEBPACK_IMPORTED_MODULE_8__.A,{icon:_wordpress_icons__WEBPACK_IMPORTED_MODULE_9__.A,size:20,className:"clear-icon"})))}));const __WEBPACK_DEFAULT_EXPORT__=Tag;try{tag.displayName="tag",tag.__docgenInfo={description:"",displayName:"tag",props:{label:{defaultValue:null,description:"The name for this item, displayed as the tag's text.",name:"label",required:!0,type:{name:"string"}},id:{defaultValue:null,description:"A unique ID for this item. This is used to identify the item when the remove button is clicked.",name:"id",required:!1,type:{name:"string | number"}},popoverContents:{defaultValue:null,description:"Contents to display on click in a popover",name:"popoverContents",required:!1,type:{name:"ReactNode"}},remove:{defaultValue:null,description:"A function called when the remove X is clicked. If not used, no X icon will display.",name:"remove",required:!1,type:{name:"((id: string | number) => MouseEventHandler)"}},screenReaderLabel:{defaultValue:null,description:"A more descriptive label for screen reader users. Defaults to the `name` prop.",name:"screenReaderLabel",required:!1,type:{name:"string"}},className:{defaultValue:null,description:"Additional CSS classes.",name:"className",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/tag/index.tsx#tag"]={docgenInfo:tag.__docgenInfo,name:"tag",path:"../../packages/js/components/src/tag/index.tsx#tag"})}catch(__react_docgen_typescript_loader_error){}},"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Async:()=>Async,AsyncWithoutListeningFilterEvents:()=>AsyncWithoutListeningFilterEvents,CustomItemType:()=>CustomItemType,CustomRender:()=>CustomRender,CustomSuffix:()=>CustomSuffix,CustomSuffixIcon:()=>CustomSuffixIcon,DefaultSuffix:()=>DefaultSuffix,ExternalTags:()=>ExternalTags,FuzzyMatching:()=>FuzzyMatching,Multiple:()=>Multiple,NoSuffix:()=>NoSuffix,Single:()=>Single,SingleWithinModalUsingBodyDropdownPlacement:()=>SingleWithinModalUsingBodyDropdownPlacement,ToggleButton:()=>ToggleButton,default:()=>select_control_story});var defineProperty=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/defineProperty.js"),asyncToGenerator=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js"),esm_extends=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/extends.js"),objectWithoutProperties=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),toConsumableArray=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),slicedToArray=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),react=__webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),regenerator=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/regenerator/index.js"),regenerator_default=__webpack_require__.n(regenerator),spinner=(__webpack_require__("../../node_modules/.pnpm/regenerator-runtime@0.13.11/node_modules/regenerator-runtime/runtime.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.is-array.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.regexp.constructor.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.regexp.to-string.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.index-of.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/web.timers.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.sort.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.includes.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.string.includes.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.find.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.string.replace.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.function.name.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.get-own-property-descriptor.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.get-own-property-descriptors.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.define-properties.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/spinner/index.js")),checkbox_control=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/checkbox-control/index.js"),slot_fill=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/slot-fill/index.js"),build_module_button=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/button/index.js"),modal=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/modal/index.js"),tag=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/library/tag.js"),menu_item=__webpack_require__("../../packages/js/components/src/experimental-select-control/menu-item.tsx"),select_control=__webpack_require__("../../packages/js/components/src/experimental-select-control/select-control.tsx"),use_debounce=(__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.promise.finally.js"),__webpack_require__("../../node_modules/.pnpm/@wordpress+compose@5.4.1_react@17.0.2/node_modules/@wordpress/compose/build-module/hooks/use-debounce/index.js")),suffix_icon=__webpack_require__("../../packages/js/components/src/experimental-select-control/suffix-icon.tsx");function useAsyncFilter(_ref){var filter=_ref.filter,onFilterStart=_ref.onFilterStart,onFilterEnd=_ref.onFilterEnd,onFilterError=_ref.onFilterError,debounceTime=_ref.debounceTime,_useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.A)(_useState,2),isFetching=_useState2[0],setIsFetching=_useState2[1],handleInputChange=(0,react.useCallback)((function handleInputChangeCallback(value){"function"==typeof filter&&("function"==typeof onFilterStart&&onFilterStart(value),setIsFetching(!0),filter(value).then((function(filteredItems){"function"==typeof onFilterEnd&&onFilterEnd(filteredItems,value)})).catch((function(error){"function"==typeof onFilterError&&onFilterError(error,value)})).finally((function(){setIsFetching(!1)})))}),[filter,onFilterStart,onFilterEnd,onFilterError]);return{isFetching,suffix:!0===isFetching?(0,react.createElement)(suffix_icon.f,{icon:(0,react.createElement)(spinner.A,null)}):void 0,getFilteredItems:function getFilteredItems(items){return items},onInputChange:(0,use_debounce.A)(handleInputChange,"number"==typeof debounceTime?debounceTime:250)}}try{useasyncfilter.displayName="useasyncfilter",useasyncfilter.__docgenInfo={description:"",displayName:"useasyncfilter",props:{filter:{defaultValue:null,description:"",name:"filter",required:!0,type:{name:"(value?: string | undefined) => Promise"}},onFilterStart:{defaultValue:null,description:"",name:"onFilterStart",required:!1,type:{name:"((value?: string) => void)"}},onFilterEnd:{defaultValue:null,description:"",name:"onFilterEnd",required:!1,type:{name:"((filteredItems: T[], value?: string) => void)"}},onFilterError:{defaultValue:null,description:"",name:"onFilterError",required:!1,type:{name:"((error: Error, value?: string) => void)"}},debounceTime:{defaultValue:null,description:"",name:"debounceTime",required:!1,type:{name:"number"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/hooks/use-async-filter.tsx#useasyncfilter"]={docgenInfo:useasyncfilter.__docgenInfo,name:"useasyncfilter",path:"../../packages/js/components/src/experimental-select-control/hooks/use-async-filter.tsx#useasyncfilter"})}catch(__react_docgen_typescript_loader_error){}var menu=__webpack_require__("../../packages/js/components/src/experimental-select-control/menu.tsx"),_excluded=["isFetching"],_excluded2=["isFetching"];function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r=0)&&re.test(item.label.toLowerCase())}))},items:sampleItems,label:"Fuzzy matching",selected,onSelect:function onSelect(item){return setSelected([].concat((0,toConsumableArray.A)(selected),[item]))},onRemove:function onRemove(item){return setSelected(selected.filter((function(i){return i!==item})))}})},Async=function Async(){var _useState9=(0,react.useState)(null),_useState10=(0,slicedToArray.A)(_useState9,2),selectedItem=_useState10[0],setSelectedItem=_useState10[1],_useState11=(0,react.useState)([]),_useState12=(0,slicedToArray.A)(_useState11,2),fetchedItems=_useState12[0],setFetchedItems=_useState12[1],filter=(0,react.useCallback)((function(){var value=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return new Promise((function(resolve){setTimeout((function(){var filteredItems=[].concat(sampleItems).sort((function(a,b){return a.label.localeCompare(b.label)})).filter((function(_ref){return _ref.label.toLowerCase().includes(value.toLowerCase())}));resolve(filteredItems)}),1500)}))}),[selectedItem]),_useAsyncFilter=useAsyncFilter({filter,onFilterStart:function onFilterStart(){setFetchedItems([])},onFilterEnd:function onFilterEnd(filteredItems){setFetchedItems(filteredItems)}}),isFetching=_useAsyncFilter.isFetching,selectProps=(0,objectWithoutProperties.A)(_useAsyncFilter,_excluded);return(0,react.createElement)(react.Fragment,null,(0,react.createElement)(select_control.Y,(0,esm_extends.A)({},selectProps,{label:"Async",items:fetchedItems,selected:selectedItem,placeholder:"Start typing...",onSelect:setSelectedItem,onRemove:function onRemove(){return setSelectedItem(null)}}),(function(_ref2){var items=_ref2.items,isOpen=_ref2.isOpen,highlightedIndex=_ref2.highlightedIndex,getItemProps=_ref2.getItemProps,getMenuProps=_ref2.getMenuProps;return(0,react.createElement)(menu.W,{isOpen,getMenuProps},isFetching?(0,react.createElement)(spinner.A,null):items.map((function(item,index){return(0,react.createElement)(menu_item.D,{key:"".concat(item.value).concat(index),index,isActive:highlightedIndex===index,item,getItemProps},item.label)})))})))},AsyncWithoutListeningFilterEvents=function AsyncWithoutListeningFilterEvents(){var _useState13=(0,react.useState)(null),_useState14=(0,slicedToArray.A)(_useState13,2),selectedItem=_useState14[0],setSelectedItem=_useState14[1],_useState15=(0,react.useState)([]),_useState16=(0,slicedToArray.A)(_useState15,2),fetchedItems=_useState16[0],setFetchedItems=_useState16[1],filter=(0,react.useCallback)((0,asyncToGenerator.A)(regenerator_default().mark((function _callee(){var value,_args=arguments;return regenerator_default().wrap((function _callee$(_context){for(;;)switch(_context.prev=_context.next){case 0:return value=_args.length>0&&void 0!==_args[0]?_args[0]:"",setFetchedItems([]),_context.abrupt("return",new Promise((function(resolve){setTimeout((function(){var filteredItems=[].concat(sampleItems).sort((function(a,b){return a.label.localeCompare(b.label)})).filter((function(_ref4){return _ref4.label.toLowerCase().includes(value.toLowerCase())}));resolve(filteredItems)}),1500)})).then((function(filteredItems){return setFetchedItems(filteredItems),filteredItems})));case 3:case"end":return _context.stop()}}),_callee)}))),[selectedItem]),_useAsyncFilter2=useAsyncFilter({filter}),isFetching=_useAsyncFilter2.isFetching,selectProps=(0,objectWithoutProperties.A)(_useAsyncFilter2,_excluded2);return(0,react.createElement)(react.Fragment,null,(0,react.createElement)(select_control.Y,(0,esm_extends.A)({},selectProps,{label:"Async",items:fetchedItems,selected:selectedItem,placeholder:"Start typing...",onSelect:setSelectedItem,onRemove:function onRemove(){return setSelectedItem(null)}}),(function(_ref5){var items=_ref5.items,isOpen=_ref5.isOpen,highlightedIndex=_ref5.highlightedIndex,getItemProps=_ref5.getItemProps,getMenuProps=_ref5.getMenuProps;return(0,react.createElement)(menu.W,{isOpen,getMenuProps},isFetching?(0,react.createElement)(spinner.A,null):items.map((function(item,index){return(0,react.createElement)(menu_item.D,{key:"".concat(item.value).concat(index),index,isActive:highlightedIndex===index,item,getItemProps},item.label)})))})))},CustomRender=function CustomRender(){var _useState17=(0,react.useState)([sampleItems[0]]),_useState18=(0,slicedToArray.A)(_useState17,2),selected=_useState18[0],setSelected=_useState18[1],onRemove=function onRemove(item){setSelected(selected.filter((function(i){return i!==item})))};return(0,react.createElement)(react.Fragment,null,(0,react.createElement)(select_control.Y,{multiple:!0,label:"Custom render",items:sampleItems,selected,onSelect:function onSelect(item){selected.find((function(i){return i.value===item.value}))?onRemove(item):setSelected([].concat((0,toConsumableArray.A)(selected),[item]))},onRemove,getFilteredItems:function getFilteredItems(allItems,inputValue,selectedItems,getItemLabel){var escapedInputValue=inputValue.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),re=new RegExp(escapedInputValue,"gi");return allItems.filter((function(item){return re.test(getItemLabel(item).toLowerCase())}))},stateReducer:function stateReducer(state,actionAndChanges){var changes=actionAndChanges.changes;switch(actionAndChanges.type){case select_control.U.ControlledPropUpdatedSelectedItem:return _objectSpread(_objectSpread({},changes),{},{inputValue:state.inputValue});case select_control.U.ItemClick:return _objectSpread(_objectSpread({},changes),{},{isOpen:!0,inputValue:state.inputValue,highlightedIndex:state.highlightedIndex});default:return changes}}},(function(_ref6){var items=_ref6.items,highlightedIndex=_ref6.highlightedIndex,getItemProps=_ref6.getItemProps,getMenuProps=_ref6.getMenuProps,isOpen=_ref6.isOpen;return(0,react.createElement)(menu.W,{isOpen,getMenuProps},items.map((function(item,index){var isSelected=selected.includes(item);return(0,react.createElement)(menu_item.D,{key:"".concat(item.value),index,isActive:highlightedIndex===index,item,getItemProps},(0,react.createElement)(react.Fragment,null,(0,react.createElement)(checkbox_control.A,{onChange:function onChange(){return null},checked:isSelected,label:(0,react.createElement)("span",{style:{fontWeight:isSelected?"bold":"normal"}},item.label)})))})))})))},customItems=[{itemId:1,user:{name:"Joe",email:"joe@a8c.com",id:32}},{itemId:2,user:{name:"Jen",id:16}},{itemId:3,user:{name:"Jared",id:112}}],CustomItemType=function CustomItemType(){var _useState19=(0,react.useState)([]),_useState20=(0,slicedToArray.A)(_useState19,2),selected=_useState20[0],setSelected=_useState20[1];return(0,react.createElement)(react.Fragment,null,"Selected: ",JSON.stringify(selected),(0,react.createElement)(select_control.Y,{multiple:!0,items:customItems,label:"CustomItemType value",selected,onSelect:function onSelect(item){return setSelected(Array.isArray(selected)?[].concat((0,toConsumableArray.A)(selected),[item]):[item])},onRemove:function onRemove(item){return setSelected((null==selected?void 0:selected.filter((function(i){return i!==item})))||[])},getItemLabel:function getItemLabel(item){return(null==item?void 0:item.user.name)||""},getItemValue:function getItemValue(item){return String(null==item?void 0:item.itemId)}}))},SingleWithinModalUsingBodyDropdownPlacement=function SingleWithinModalUsingBodyDropdownPlacement(){var _useState21=(0,react.useState)(!0),_useState22=(0,slicedToArray.A)(_useState21,2),isOpen=_useState22[0],setOpen=_useState22[1],_useState23=(0,react.useState)(),_useState24=(0,slicedToArray.A)(_useState23,2),selected=_useState24[0],setSelected=_useState24[1],_useState25=(0,react.useState)(),_useState26=(0,slicedToArray.A)(_useState25,2),selectedTwo=_useState26[0],setSelectedTwo=_useState26[1];return(0,react.createElement)(slot_fill.Kq,null,"Selected: ",JSON.stringify(selected),(0,react.createElement)(build_module_button.A,{onClick:function onClick(){return setOpen(!0)}},"Show Dropdown in Modal"),isOpen&&(0,react.createElement)(modal.A,{title:"Dropdown Modal",onRequestClose:function onRequestClose(){return setOpen(!1)}},(0,react.createElement)(select_control.Y,{items:sampleItems,label:"Single value",selected,onSelect:function onSelect(item){return item&&setSelected(item)},onRemove:function onRemove(){return setSelected(null)}}),(0,react.createElement)(select_control.Y,{items:sampleItems,label:"Single value",selected:selectedTwo,onSelect:function onSelect(item){return item&&setSelectedTwo(item)},onRemove:function onRemove(){return setSelectedTwo(null)}})),(0,react.createElement)(menu.c,null))},DefaultSuffix=function DefaultSuffix(){var _useState27=(0,react.useState)(sampleItems[1]),_useState28=(0,slicedToArray.A)(_useState27,2),selected=_useState28[0],setSelected=_useState28[1];return(0,react.createElement)(select_control.Y,{items:sampleItems,label:"Default suffix",selected,onSelect:function onSelect(item){return item&&setSelected(item)},onRemove:function onRemove(){return setSelected(null)}})},CustomSuffixIcon=function CustomSuffixIcon(){var _useState29=(0,react.useState)(sampleItems[1]),_useState30=(0,slicedToArray.A)(_useState29,2),selected=_useState30[0],setSelected=_useState30[1];return(0,react.createElement)(select_control.Y,{items:sampleItems,label:"Custom suffix icon",selected,onSelect:function onSelect(item){return item&&setSelected(item)},onRemove:function onRemove(){return setSelected(null)},suffix:(0,react.createElement)(suffix_icon.f,{icon:tag.A})})},NoSuffix=function NoSuffix(){var _useState31=(0,react.useState)(sampleItems[1]),_useState32=(0,slicedToArray.A)(_useState31,2),selected=_useState32[0],setSelected=_useState32[1];return(0,react.createElement)(select_control.Y,{items:sampleItems,label:"No suffix",selected,onSelect:function onSelect(item){return item&&setSelected(item)},onRemove:function onRemove(){return setSelected(null)},suffix:null})},CustomSuffix=function CustomSuffix(){var _useState33=(0,react.useState)(sampleItems[1]),_useState34=(0,slicedToArray.A)(_useState33,2),selected=_useState34[0],setSelected=_useState34[1];return(0,react.createElement)(select_control.Y,{items:sampleItems,label:"Custom suffix",selected,onSelect:function onSelect(item){return item&&setSelected(item)},onRemove:function onRemove(){return setSelected(null)},suffix:(0,react.createElement)("div",{style:{background:"red",height:"100%"}},"Suffix!")})},ToggleButton=function ToggleButton(){var _useState35=(0,react.useState)(),_useState36=(0,slicedToArray.A)(_useState35,2),selected=_useState36[0],setSelected=_useState36[1];return(0,react.createElement)(select_control.Y,{items:sampleItems,label:"Has toggle button",selected,onSelect:function onSelect(item){return item&&setSelected(item)},onRemove:function onRemove(){return setSelected(null)},suffix:null,showToggleButton:!0,__experimentalOpenMenuOnFocus:!0})};const select_control_story={title:"WooCommerce Admin/experimental/SelectControl",component:select_control.Y};Single.parameters={...Single.parameters,docs:{...Single.parameters?.docs,source:{originalSource:'() => {\n const [selected, setSelected] = useState>(sampleItems[1]);\n return <>\n Selected: {JSON.stringify(selected)}\n item && setSelected(item)} onRemove={() => setSelected(null)} />\n ;\n}',...Single.parameters?.docs?.source}}},Multiple.parameters={...Multiple.parameters,docs:{...Multiple.parameters?.docs,source:{originalSource:'() => {\n const [selected, setSelected] = useState([sampleItems[0], sampleItems[2]]);\n return <>\n Array.isArray(selected) && setSelected([...selected, item])} onRemove={item => setSelected(selected.filter(i => i !== item))} />\n ;\n}',...Multiple.parameters?.docs?.source}}},ExternalTags.parameters={...ExternalTags.parameters,docs:{...ExternalTags.parameters?.docs,source:{originalSource:'() => {\n const [selected, setSelected] = useState([]);\n return <>\n Array.isArray(selected) && setSelected([...selected, item])} onRemove={item => setSelected(selected.filter(i => i !== item))} />\n ;\n}',...ExternalTags.parameters?.docs?.source}}},FuzzyMatching.parameters={...FuzzyMatching.parameters,docs:{...FuzzyMatching.parameters?.docs,source:{originalSource:"() => {\n const [selected, setSelected] = useState([]);\n const getFilteredItems = (allItems: DefaultItemType[], inputValue: string, selectedItems: DefaultItemType[]) => {\n const pattern = '.*' + inputValue.toLowerCase().split('').join('.*') + '.*';\n const re = new RegExp(pattern);\n return allItems.filter(item => {\n if (selectedItems.indexOf(item) >= 0) {\n return false;\n }\n return re.test(item.label.toLowerCase());\n });\n };\n return setSelected([...selected, item])} onRemove={item => setSelected(selected.filter(i => i !== item))} />;\n}",...FuzzyMatching.parameters?.docs?.source}}},Async.parameters={...Async.parameters,docs:{...Async.parameters?.docs,source:{originalSource:'() => {\n const [selectedItem, setSelectedItem] = useState(null);\n const [fetchedItems, setFetchedItems] = useState([]);\n const filter = useCallback((value = \'\') => new Promise(resolve => {\n setTimeout(() => {\n const filteredItems = [...sampleItems].sort((a, b) => a.label.localeCompare(b.label)).filter(({\n label\n }) => label.toLowerCase().includes(value.toLowerCase()));\n resolve(filteredItems);\n }, 1500);\n }), [selectedItem]);\n const {\n isFetching,\n ...selectProps\n } = useAsyncFilter({\n filter,\n onFilterStart() {\n setFetchedItems([]);\n },\n onFilterEnd(filteredItems) {\n setFetchedItems(filteredItems);\n }\n });\n return <>\n {...selectProps} label="Async" items={fetchedItems} selected={selectedItem} placeholder="Start typing..." onSelect={setSelectedItem} onRemove={() => setSelectedItem(null)}>\n {({\n items,\n isOpen,\n highlightedIndex,\n getItemProps,\n getMenuProps\n }) => {\n return \n {isFetching ? : items.map((item, index: number) => \n {item.label}\n )}\n ;\n }}\n \n ;\n}',...Async.parameters?.docs?.source}}},AsyncWithoutListeningFilterEvents.parameters={...AsyncWithoutListeningFilterEvents.parameters,docs:{...AsyncWithoutListeningFilterEvents.parameters?.docs,source:{originalSource:'() => {\n const [selectedItem, setSelectedItem] = useState(null);\n const [fetchedItems, setFetchedItems] = useState([]);\n const filter = useCallback(async (value = \'\') => {\n setFetchedItems([]);\n return new Promise(resolve => {\n setTimeout(() => {\n const filteredItems = [...sampleItems].sort((a, b) => a.label.localeCompare(b.label)).filter(({\n label\n }) => label.toLowerCase().includes(value.toLowerCase()));\n resolve(filteredItems);\n }, 1500);\n }).then(filteredItems => {\n setFetchedItems(filteredItems);\n return filteredItems;\n });\n }, [selectedItem]);\n const {\n isFetching,\n ...selectProps\n } = useAsyncFilter({\n filter\n });\n return <>\n {...selectProps} label="Async" items={fetchedItems} selected={selectedItem} placeholder="Start typing..." onSelect={setSelectedItem} onRemove={() => setSelectedItem(null)}>\n {({\n items,\n isOpen,\n highlightedIndex,\n getItemProps,\n getMenuProps\n }) => {\n return \n {isFetching ? : items.map((item, index: number) => \n {item.label}\n )}\n ;\n }}\n \n ;\n}',...AsyncWithoutListeningFilterEvents.parameters?.docs?.source}}},CustomRender.parameters={...CustomRender.parameters,docs:{...CustomRender.parameters?.docs,source:{originalSource:"() => {\n const [selected, setSelected] = useState([sampleItems[0]]);\n const onRemove = item => {\n setSelected(selected.filter(i => i !== item));\n };\n const onSelect = item => {\n const isSelected = selected.find(i => i.value === item.value);\n if (isSelected) {\n onRemove(item);\n return;\n }\n setSelected([...selected, item]);\n };\n const getFilteredItems = (allItems: DefaultItemType[], inputValue: string, selectedItems: DefaultItemType[], getItemLabel: getItemLabelType) => {\n const escapedInputValue = inputValue.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n const re = new RegExp(escapedInputValue, 'gi');\n return allItems.filter(item => {\n return re.test(getItemLabel(item).toLowerCase());\n });\n };\n return <>\n {\n const {\n changes,\n type\n } = actionAndChanges;\n switch (type) {\n case selectControlStateChangeTypes.ControlledPropUpdatedSelectedItem:\n return {\n ...changes,\n inputValue: state.inputValue\n };\n case selectControlStateChangeTypes.ItemClick:\n return {\n ...changes,\n isOpen: true,\n inputValue: state.inputValue,\n highlightedIndex: state.highlightedIndex\n };\n default:\n return changes;\n }\n }}>\n {({\n items,\n highlightedIndex,\n getItemProps,\n getMenuProps,\n isOpen\n }) => {\n return \n {items.map((item, index: number) => {\n const isSelected = selected.includes(item);\n return \n <>\n null} checked={isSelected} label={\n {item.label}\n } />\n \n ;\n })}\n ;\n }}\n \n ;\n}",...CustomRender.parameters?.docs?.source}}},CustomItemType.parameters={...CustomItemType.parameters,docs:{...CustomItemType.parameters?.docs,source:{originalSource:"() => {\n const [selected, setSelected] = useState>>([]);\n return <>\n Selected: {JSON.stringify(selected)}\n multiple items={customItems} label=\"CustomItemType value\" selected={selected} onSelect={item => setSelected(Array.isArray(selected) ? [...selected, item] : [item])} onRemove={item => setSelected(selected?.filter(i => i !== item) || [])} getItemLabel={item => item?.user.name || ''} getItemValue={item => String(item?.itemId)} />\n ;\n}",...CustomItemType.parameters?.docs?.source}}},SingleWithinModalUsingBodyDropdownPlacement.parameters={...SingleWithinModalUsingBodyDropdownPlacement.parameters,docs:{...SingleWithinModalUsingBodyDropdownPlacement.parameters?.docs,source:{originalSource:'() => {\n const [isOpen, setOpen] = useState(true);\n const [selected, setSelected] = useState>();\n const [selectedTwo, setSelectedTwo] = useState>();\n return \n Selected: {JSON.stringify(selected)}\n \n {isOpen && setOpen(false)}>\n item && setSelected(item)} onRemove={() => setSelected(null)} />\n item && setSelectedTwo(item)} onRemove={() => setSelectedTwo(null)} />\n }\n \n ;\n}',...SingleWithinModalUsingBodyDropdownPlacement.parameters?.docs?.source}}},DefaultSuffix.parameters={...DefaultSuffix.parameters,docs:{...DefaultSuffix.parameters?.docs,source:{originalSource:'() => {\n const [selected, setSelected] = useState>(sampleItems[1]);\n return item && setSelected(item)} onRemove={() => setSelected(null)} />;\n}',...DefaultSuffix.parameters?.docs?.source}}},CustomSuffixIcon.parameters={...CustomSuffixIcon.parameters,docs:{...CustomSuffixIcon.parameters?.docs,source:{originalSource:'() => {\n const [selected, setSelected] = useState>(sampleItems[1]);\n return item && setSelected(item)} onRemove={() => setSelected(null)} suffix={} />;\n}',...CustomSuffixIcon.parameters?.docs?.source}}},NoSuffix.parameters={...NoSuffix.parameters,docs:{...NoSuffix.parameters?.docs,source:{originalSource:'() => {\n const [selected, setSelected] = useState>(sampleItems[1]);\n return item && setSelected(item)} onRemove={() => setSelected(null)} suffix={null} />;\n}',...NoSuffix.parameters?.docs?.source}}},CustomSuffix.parameters={...CustomSuffix.parameters,docs:{...CustomSuffix.parameters?.docs,source:{originalSource:"() => {\n const [selected, setSelected] = useState>(sampleItems[1]);\n return item && setSelected(item)} onRemove={() => setSelected(null)} suffix={
\n Suffix!\n
} />;\n}",...CustomSuffix.parameters?.docs?.source}}},ToggleButton.parameters={...ToggleButton.parameters,docs:{...ToggleButton.parameters?.docs,source:{originalSource:'() => {\n const [selected, setSelected] = useState>();\n return item && setSelected(item)} onRemove={() => setSelected(null)} suffix={null} showToggleButton={true} __experimentalOpenMenuOnFocus={true} />;\n}',...ToggleButton.parameters?.docs?.source}}};try{Single.displayName="Single",Single.__docgenInfo={description:"",displayName:"Single",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#Single"]={docgenInfo:Single.__docgenInfo,name:"Single",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#Single"})}catch(__react_docgen_typescript_loader_error){}try{Multiple.displayName="Multiple",Multiple.__docgenInfo={description:"",displayName:"Multiple",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#Multiple"]={docgenInfo:Multiple.__docgenInfo,name:"Multiple",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#Multiple"})}catch(__react_docgen_typescript_loader_error){}try{ExternalTags.displayName="ExternalTags",ExternalTags.__docgenInfo={description:"",displayName:"ExternalTags",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#ExternalTags"]={docgenInfo:ExternalTags.__docgenInfo,name:"ExternalTags",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#ExternalTags"})}catch(__react_docgen_typescript_loader_error){}try{FuzzyMatching.displayName="FuzzyMatching",FuzzyMatching.__docgenInfo={description:"",displayName:"FuzzyMatching",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#FuzzyMatching"]={docgenInfo:FuzzyMatching.__docgenInfo,name:"FuzzyMatching",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#FuzzyMatching"})}catch(__react_docgen_typescript_loader_error){}try{Async.displayName="Async",Async.__docgenInfo={description:"",displayName:"Async",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#Async"]={docgenInfo:Async.__docgenInfo,name:"Async",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#Async"})}catch(__react_docgen_typescript_loader_error){}try{AsyncWithoutListeningFilterEvents.displayName="AsyncWithoutListeningFilterEvents",AsyncWithoutListeningFilterEvents.__docgenInfo={description:"",displayName:"AsyncWithoutListeningFilterEvents",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#AsyncWithoutListeningFilterEvents"]={docgenInfo:AsyncWithoutListeningFilterEvents.__docgenInfo,name:"AsyncWithoutListeningFilterEvents",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#AsyncWithoutListeningFilterEvents"})}catch(__react_docgen_typescript_loader_error){}try{CustomRender.displayName="CustomRender",CustomRender.__docgenInfo={description:"",displayName:"CustomRender",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#CustomRender"]={docgenInfo:CustomRender.__docgenInfo,name:"CustomRender",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#CustomRender"})}catch(__react_docgen_typescript_loader_error){}try{CustomItemType.displayName="CustomItemType",CustomItemType.__docgenInfo={description:"",displayName:"CustomItemType",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#CustomItemType"]={docgenInfo:CustomItemType.__docgenInfo,name:"CustomItemType",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#CustomItemType"})}catch(__react_docgen_typescript_loader_error){}try{SingleWithinModalUsingBodyDropdownPlacement.displayName="SingleWithinModalUsingBodyDropdownPlacement",SingleWithinModalUsingBodyDropdownPlacement.__docgenInfo={description:"",displayName:"SingleWithinModalUsingBodyDropdownPlacement",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#SingleWithinModalUsingBodyDropdownPlacement"]={docgenInfo:SingleWithinModalUsingBodyDropdownPlacement.__docgenInfo,name:"SingleWithinModalUsingBodyDropdownPlacement",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#SingleWithinModalUsingBodyDropdownPlacement"})}catch(__react_docgen_typescript_loader_error){}try{DefaultSuffix.displayName="DefaultSuffix",DefaultSuffix.__docgenInfo={description:"",displayName:"DefaultSuffix",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#DefaultSuffix"]={docgenInfo:DefaultSuffix.__docgenInfo,name:"DefaultSuffix",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#DefaultSuffix"})}catch(__react_docgen_typescript_loader_error){}try{CustomSuffixIcon.displayName="CustomSuffixIcon",CustomSuffixIcon.__docgenInfo={description:"",displayName:"CustomSuffixIcon",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#CustomSuffixIcon"]={docgenInfo:CustomSuffixIcon.__docgenInfo,name:"CustomSuffixIcon",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#CustomSuffixIcon"})}catch(__react_docgen_typescript_loader_error){}try{NoSuffix.displayName="NoSuffix",NoSuffix.__docgenInfo={description:"",displayName:"NoSuffix",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#NoSuffix"]={docgenInfo:NoSuffix.__docgenInfo,name:"NoSuffix",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#NoSuffix"})}catch(__react_docgen_typescript_loader_error){}try{CustomSuffix.displayName="CustomSuffix",CustomSuffix.__docgenInfo={description:"",displayName:"CustomSuffix",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#CustomSuffix"]={docgenInfo:CustomSuffix.__docgenInfo,name:"CustomSuffix",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#CustomSuffix"})}catch(__react_docgen_typescript_loader_error){}try{ToggleButton.displayName="ToggleButton",ToggleButton.__docgenInfo={description:"",displayName:"ToggleButton",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#ToggleButton"]={docgenInfo:ToggleButton.__docgenInfo,name:"ToggleButton",path:"../../packages/js/components/src/experimental-select-control/stories/select-control.story.tsx#ToggleButton"})}catch(__react_docgen_typescript_loader_error){}}}]);