1 line
53 KiB
JavaScript
1 line
53 KiB
JavaScript
"use strict";(self.webpackChunk_woocommerce_storybook=self.webpackChunk_woocommerce_storybook||[]).push([[7111],{"../../packages/js/components/src/select-control/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>select_control});__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.reflect.construct.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");var toConsumableArray=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),classCallCheck=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/classCallCheck.js"),createClass=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/createClass.js"),assertThisInitialized=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js"),inherits=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/inherits.js"),possibleConstructorReturn=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/possibleConstructorReturn.js"),getPrototypeOf=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js"),defineProperty=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/defineProperty.js"),react=__webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),build_module=(__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.find-index.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.function.bind.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.string.search.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.some.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.find.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.map.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.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.string.trim.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.to-string.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.promise.js"),__webpack_require__("../../node_modules/.pnpm/@wordpress+i18n@4.6.1/node_modules/@wordpress/i18n/build-module/index.js")),classnames=__webpack_require__("../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),lodash=__webpack_require__("../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/lodash.js"),with_spoken_messages=__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/higher-order/with-spoken-messages/index.js"),with_focus_outside=__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/higher-order/with-focus-outside/index.js"),compose=__webpack_require__("../../node_modules/.pnpm/@wordpress+compose@5.4.1_react@17.0.2/node_modules/@wordpress/compose/build-module/higher-order/compose.js"),with_instance_id=__webpack_require__("../../node_modules/.pnpm/@wordpress+compose@5.4.1_react@17.0.2/node_modules/@wordpress/compose/build-module/higher-order/with-instance-id/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"),keycodes_build_module=__webpack_require__("../../node_modules/.pnpm/@wordpress+keycodes@3.6.1/node_modules/@wordpress/keycodes/build-module/index.js");function _createSuper(Derived){var hasNativeReflectConstruct=function _isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=(0,getPrototypeOf.A)(Derived);if(hasNativeReflectConstruct){var NewTarget=(0,getPrototypeOf.A)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return(0,possibleConstructorReturn.A)(this,result)}}var List=function(_Component){(0,inherits.A)(List,_Component);var _super=_createSuper(List);function List(props){var _this;return(0,classCallCheck.A)(this,List),_this=_super.call(this,props),(0,defineProperty.A)((0,assertThisInitialized.A)(_this),"optionRefs",void 0),(0,defineProperty.A)((0,assertThisInitialized.A)(_this),"listbox",void 0),_this.handleKeyDown=_this.handleKeyDown.bind((0,assertThisInitialized.A)(_this)),_this.select=_this.select.bind((0,assertThisInitialized.A)(_this)),_this.optionRefs={},_this.listbox=(0,react.createRef)(),_this}return(0,createClass.A)(List,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){var _this$props=this.props,options=_this$props.options,selectedIndex=_this$props.selectedIndex;(0,lodash.isEqual)(options,prevProps.options)||(this.optionRefs={}),selectedIndex!==prevProps.selectedIndex&&(0,lodash.isNumber)(selectedIndex)&&this.scrollToOption(selectedIndex)}},{key:"getOptionRef",value:function getOptionRef(index){return this.optionRefs.hasOwnProperty(index)||(this.optionRefs[index]=(0,react.createRef)()),this.optionRefs[index]}},{key:"select",value:function select(option){var onSelect=this.props.onSelect;option.isDisabled||onSelect(option)}},{key:"scrollToOption",value:function scrollToOption(index){var listbox=this.listbox.current;if(listbox&&!(listbox.scrollHeight<=listbox.clientHeight)&&this.optionRefs[index]){var option=this.optionRefs[index].current;if(option){var scrollBottom=listbox.clientHeight+listbox.scrollTop,elementBottom=option.offsetTop+option.offsetHeight;elementBottom>scrollBottom?listbox.scrollTop=elementBottom-listbox.clientHeight:option.offsetTop<listbox.scrollTop&&(listbox.scrollTop=option.offsetTop)}else console.warn("Option not found, index:",index)}}},{key:"handleKeyDown",value:function handleKeyDown(event){var _this$props2=this.props,decrementSelectedIndex=_this$props2.decrementSelectedIndex,incrementSelectedIndex=_this$props2.incrementSelectedIndex,options=_this$props2.options,onSearch=_this$props2.onSearch,selectedIndex=_this$props2.selectedIndex,setExpanded=_this$props2.setExpanded;if(0!==options.length)switch(event.keyCode){case keycodes_build_module.UP:decrementSelectedIndex(),event.preventDefault(),event.stopPropagation();break;case keycodes_build_module.PX:incrementSelectedIndex(),event.preventDefault(),event.stopPropagation();break;case keycodes_build_module.Fm:(0,lodash.isNumber)(selectedIndex)&&options[selectedIndex]&&this.select(options[selectedIndex]),event.preventDefault(),event.stopPropagation();break;case keycodes_build_module.M3:case keycodes_build_module.NS:setExpanded(!1);break;case keycodes_build_module._f:return setExpanded(!1),void onSearch(null);case keycodes_build_module.wn:(0,lodash.isNumber)(selectedIndex)&&options[selectedIndex]&&this.select(options[selectedIndex]),setExpanded(!1)}}},{key:"toggleKeyEvents",value:function toggleKeyEvents(isListening){var node=this.props.node;node?node[isListening?"addEventListener":"removeEventListener"]("keydown",this.handleKeyDown,!0):console.warn("No node to bind events to.")}},{key:"componentDidMount",value:function componentDidMount(){var selectedIndex=this.props.selectedIndex;(0,lodash.isNumber)(selectedIndex)&&selectedIndex>-1&&this.scrollToOption(selectedIndex),this.toggleKeyEvents(!0)}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.toggleKeyEvents(!1)}},{key:"render",value:function render(){var _this2=this,_this$props3=this.props,instanceId=_this$props3.instanceId,listboxId=_this$props3.listboxId,options=_this$props3.options,selectedIndex=_this$props3.selectedIndex,staticList=_this$props3.staticList,listboxClasses=classnames_default()("woocommerce-select-control__listbox",{"is-static":staticList});return(0,react.createElement)("div",{ref:this.listbox,id:listboxId,role:"listbox",className:listboxClasses,tabIndex:-1},options.map((function(option,index){return(0,react.createElement)(build_module_button.A,{ref:_this2.getOptionRef(index),key:option.key,id:"woocommerce-select-control__option-".concat(instanceId,"-").concat(option.key),role:"option","aria-selected":index===selectedIndex,disabled:option.isDisabled,className:classnames_default()("woocommerce-select-control__option",{"is-selected":index===selectedIndex}),onClick:function onClick(){return _this2.select(option)},tabIndex:-1},option.label)})))}}]),List}(react.Component);const list=List;try{List.displayName="List",List.__docgenInfo={description:"A list box that displays filtered options after search.",displayName:"List",props:{listboxId:{defaultValue:null,description:"ID of the main SelectControl instance.",name:"listboxId",required:!1,type:{name:"string"}},instanceId:{defaultValue:null,description:"ID used for a11y in the listbox.",name:"instanceId",required:!0,type:{name:"number"}},node:{defaultValue:null,description:"Parent node to bind keyboard events to.",name:"node",required:!0,type:{name:"HTMLElement | null"}},onSelect:{defaultValue:null,description:"Function to execute when an option is selected.",name:"onSelect",required:!0,type:{name:"(option: Option) => void"}},options:{defaultValue:null,description:"Array of options to display.",name:"options",required:!0,type:{name:"Option[]"}},selectedIndex:{defaultValue:null,description:"Integer for the currently selected item.",name:"selectedIndex",required:!0,type:{name:"number | null | undefined"}},staticList:{defaultValue:null,description:"Bool to determine if the list should be positioned absolutely or statically.",name:"staticList",required:!0,type:{name:"boolean"}},decrementSelectedIndex:{defaultValue:null,description:"Function to execute when keyboard navigation should decrement the selected index.",name:"decrementSelectedIndex",required:!0,type:{name:"() => void"}},incrementSelectedIndex:{defaultValue:null,description:"Function to execute when keyboard navigation should increment the selected index.",name:"incrementSelectedIndex",required:!0,type:{name:"() => void"}},onSearch:{defaultValue:null,description:"Function to execute when the search value changes.",name:"onSearch",required:!0,type:{name:"(option: string | null) => void"}},setExpanded:{defaultValue:null,description:"Function to execute when the list should be expanded or collapsed.",name:"setExpanded",required:!0,type:{name:"(expanded: boolean) => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/select-control/list.tsx#List"]={docgenInfo:List.__docgenInfo,name:"List",path:"../../packages/js/components/src/select-control/list.tsx#List"})}catch(__react_docgen_typescript_loader_error){}__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.slice.js");var icon=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/icon/index.js"),cancel_circle_filled=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/library/cancel-circle-filled.js"),tag=__webpack_require__("../../packages/js/components/src/tag/index.tsx");function tags_createSuper(Derived){var hasNativeReflectConstruct=function tags_isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=(0,getPrototypeOf.A)(Derived);if(hasNativeReflectConstruct){var NewTarget=(0,getPrototypeOf.A)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return(0,possibleConstructorReturn.A)(this,result)}}var Tags=function(_Component){(0,inherits.A)(Tags,_Component);var _super=tags_createSuper(Tags);function Tags(props){var _this;return(0,classCallCheck.A)(this,Tags),(_this=_super.call(this,props)).removeAll=_this.removeAll.bind((0,assertThisInitialized.A)(_this)),_this.removeResult=_this.removeResult.bind((0,assertThisInitialized.A)(_this)),_this}return(0,createClass.A)(Tags,[{key:"removeAll",value:function removeAll(){(0,this.props.onChange)([])}},{key:"removeResult",value:function removeResult(key){var _this2=this;return function(){var _this2$props=_this2.props,selected=_this2$props.selected,onChange=_this2$props.onChange;if((0,lodash.isArray)(selected)){var i=(0,lodash.findIndex)(selected,{key});onChange([].concat((0,toConsumableArray.A)(selected.slice(0,i)),(0,toConsumableArray.A)(selected.slice(i+1))))}}}},{key:"render",value:function render(){var _this3=this,_this$props=this.props,selected=_this$props.selected,showClearButton=_this$props.showClearButton;return(0,lodash.isArray)(selected)&&selected.length?(0,react.createElement)(react.Fragment,null,(0,react.createElement)("div",{className:"woocommerce-select-control__tags"},selected.map((function(item,i){if(!item.label)return null;var screenReaderLabel=(0,build_module.nv)((0,build_module.__)("%1$s (%2$s of %3$s)","woocommerce"),item.label,i+1,selected.length);return(0,react.createElement)(tag.A,{key:item.key,id:item.key,label:item.label,remove:_this3.removeResult,screenReaderLabel})}))),showClearButton&&(0,react.createElement)(build_module_button.A,{className:"woocommerce-select-control__clear",isLink:!0,onClick:this.removeAll},(0,react.createElement)(icon.A,{icon:cancel_circle_filled.A,className:"clear-icon"}),(0,react.createElement)("span",{className:"screen-reader-text"},(0,build_module.__)("Clear all","woocommerce")))):null}}]),Tags}(react.Component);const tags=Tags;try{Tags.displayName="Tags",Tags.__docgenInfo={description:"A list of tags to display selected items.",displayName:"Tags",props:{onChange:{defaultValue:null,description:"Function called when selected results change, passed result list.",name:"onChange",required:!0,type:{name:"(selected: Option[]) => void"}},selected:{defaultValue:null,description:"An array of objects describing selected values. If the label of the selected\nvalue is omitted, the Tag of that value will not be rendered inside the\nsearch box.",name:"selected",required:!1,type:{name:"Selected"}},showClearButton:{defaultValue:null,description:"Render a 'Clear' button next to the input box to remove its contents.",name:"showClearButton",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/select-control/tags.tsx#Tags"]={docgenInfo:Tags.__docgenInfo,name:"Tags",path:"../../packages/js/components/src/select-control/tags.tsx#Tags"})}catch(__react_docgen_typescript_loader_error){}var search=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/library/search.js");function control_createSuper(Derived){var hasNativeReflectConstruct=function control_isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=(0,getPrototypeOf.A)(Derived);if(hasNativeReflectConstruct){var NewTarget=(0,getPrototypeOf.A)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return(0,possibleConstructorReturn.A)(this,result)}}var Control=function(_Component){(0,inherits.A)(Control,_Component);var _super=control_createSuper(Control);function Control(props){var _this;return(0,classCallCheck.A)(this,Control),_this=_super.call(this,props),(0,defineProperty.A)((0,assertThisInitialized.A)(_this),"input",void 0),_this.state={isActive:!1},_this.input=(0,react.createRef)(),_this.updateSearch=_this.updateSearch.bind((0,assertThisInitialized.A)(_this)),_this.onFocus=_this.onFocus.bind((0,assertThisInitialized.A)(_this)),_this.onBlur=_this.onBlur.bind((0,assertThisInitialized.A)(_this)),_this.onKeyDown=_this.onKeyDown.bind((0,assertThisInitialized.A)(_this)),_this}return(0,createClass.A)(Control,[{key:"updateSearch",value:function updateSearch(onSearch){return function(event){onSearch(event.target.value)}}},{key:"onFocus",value:function onFocus(onSearch){var _this2=this,_this$props=this.props,isSearchable=_this$props.isSearchable,setExpanded=_this$props.setExpanded,showAllOnFocus=_this$props.showAllOnFocus,updateSearchOptions=_this$props.updateSearchOptions;return function(event){_this2.setState({isActive:!0}),isSearchable&&showAllOnFocus?(event.target.select(),updateSearchOptions("")):isSearchable?onSearch(event.target.value):setExpanded(!0)}}},{key:"onBlur",value:function onBlur(){var onBlur=this.props.onBlur;"function"==typeof onBlur&&onBlur(),this.setState({isActive:!1})}},{key:"onKeyDown",value:function onKeyDown(event){var _this$props2=this.props,decrementSelectedIndex=_this$props2.decrementSelectedIndex,incrementSelectedIndex=_this$props2.incrementSelectedIndex,selected=_this$props2.selected,onChange=_this$props2.onChange,query=_this$props2.query,setExpanded=_this$props2.setExpanded;keycodes_build_module.G_===event.keyCode&&!query&&(0,lodash.isArray)(selected)&&selected.length&&onChange((0,toConsumableArray.A)(selected.slice(0,-1))),keycodes_build_module.PX===event.keyCode&&(incrementSelectedIndex(),setExpanded(!0),event.preventDefault(),event.stopPropagation()),keycodes_build_module.UP===event.keyCode&&(decrementSelectedIndex(),setExpanded(!0),event.preventDefault(),event.stopPropagation())}},{key:"renderButton",value:function renderButton(){var _this$props3=this.props,multiple=_this$props3.multiple,selected=_this$props3.selected;return!multiple&&(0,lodash.isArray)(selected)&&selected.length?(0,react.createElement)("div",{className:"woocommerce-select-control__control-value"},selected[0].label):null}},{key:"renderInput",value:function renderInput(){var _this$props$ariaLabel,_this$props4=this.props,activeId=_this$props4.activeId,disabled=_this$props4.disabled,hasTags=_this$props4.hasTags,inlineTags=_this$props4.inlineTags,instanceId=_this$props4.instanceId,isExpanded=_this$props4.isExpanded,isSearchable=_this$props4.isSearchable,listboxId=_this$props4.listboxId,onSearch=_this$props4.onSearch,placeholder=_this$props4.placeholder,searchInputType=_this$props4.searchInputType,autoComplete=_this$props4.autoComplete,isActive=this.state.isActive;return(0,react.createElement)("input",{autoComplete:autoComplete||"off",className:"woocommerce-select-control__control-input",id:"woocommerce-select-control-".concat(instanceId,"__control-input"),ref:this.input,type:isSearchable?searchInputType:"button",value:this.getInputValue(),placeholder:isActive?placeholder:"",onChange:this.updateSearch(onSearch),onFocus:this.onFocus(onSearch),onBlur:this.onBlur,onKeyDown:this.onKeyDown,role:"combobox","aria-autocomplete":"list","aria-expanded":isExpanded,"aria-haspopup":"true","aria-owns":listboxId,"aria-controls":listboxId,"aria-activedescendant":activeId,"aria-describedby":hasTags&&inlineTags?"search-inline-input-".concat(instanceId):void 0,disabled,"aria-label":null!==(_this$props$ariaLabel=this.props.ariaLabel)&&void 0!==_this$props$ariaLabel?_this$props$ariaLabel:this.props.label})}},{key:"getInputValue",value:function getInputValue(){var _this$props5=this.props,inlineTags=_this$props5.inlineTags,isFocused=_this$props5.isFocused,isSearchable=_this$props5.isSearchable,multiple=_this$props5.multiple,query=_this$props5.query,selected=_this$props5.selected,selectedValue=(0,lodash.isArray)(selected)&&selected.length?selected[0].label:"";return multiple||isFocused||inlineTags?isSearchable&&isFocused&&query?query:"":selectedValue}},{key:"render",value:function render(){var _this$getInputValue,_this3=this,_this$props6=this.props,className=_this$props6.className,disabled=_this$props6.disabled,hasTags=_this$props6.hasTags,help=_this$props6.help,inlineTags=_this$props6.inlineTags,instanceId=_this$props6.instanceId,isSearchable=_this$props6.isSearchable,label=_this$props6.label,query=_this$props6.query,onChange=_this$props6.onChange,showClearButton=_this$props6.showClearButton,isActive=this.state.isActive;return(0,react.createElement)("div",{className:classnames_default()("components-base-control","woocommerce-select-control__control",className,{empty:!query||0===query.length,"is-active":isActive,"has-tags":inlineTags&&hasTags,"with-value":null===(_this$getInputValue=this.getInputValue())||void 0===_this$getInputValue?void 0:_this$getInputValue.length,"has-error":!!help,"is-disabled":disabled}),onClick:function onClick(event){"components-base-control__help"!==event.target.className&&_this3.input.current&&_this3.input.current.focus()}},isSearchable&&(0,react.createElement)(icon.A,{className:"woocommerce-select-control__control-icon",icon:search.A}),inlineTags&&(0,react.createElement)(tags,{onChange,showClearButton,selected:this.props.selected}),(0,react.createElement)("div",{className:"components-base-control__field"},!!label&&(0,react.createElement)("label",{htmlFor:"woocommerce-select-control-".concat(instanceId,"__control-input"),className:"components-base-control__label"},label),this.renderInput(),inlineTags&&(0,react.createElement)("span",{id:"search-inline-input-".concat(instanceId),className:"screen-reader-text"},(0,build_module.__)("Move backward for selected items","woocommerce")),!!help&&(0,react.createElement)("p",{id:"woocommerce-select-control-".concat(instanceId,"__help"),className:"components-base-control__help"},help)))}}]),Control}(react.Component);const control=Control;try{Control.displayName="Control",Control.__docgenInfo={description:"A search control to allow user input to filter the options.",displayName:"Control",props:{hasTags:{defaultValue:null,description:"Bool to determine if tags should be rendered.",name:"hasTags",required:!1,type:{name:"boolean"}},help:{defaultValue:null,description:"Help text to be appended beneath the input.",name:"help",required:!1,type:{name:"string | Element"}},inlineTags:{defaultValue:null,description:"Render tags inside input, otherwise render below input.",name:"inlineTags",required:!1,type:{name:"boolean"}},isSearchable:{defaultValue:null,description:"Allow the select options to be filtered by search input.",name:"isSearchable",required:!1,type:{name:"boolean"}},instanceId:{defaultValue:null,description:"ID of the main SelectControl instance.",name:"instanceId",required:!1,type:{name:"number"}},label:{defaultValue:null,description:"A label to use for the main input.",name:"label",required:!1,type:{name:"string"}},listboxId:{defaultValue:null,description:"ID used for a11y in the listbox.",name:"listboxId",required:!1,type:{name:"string"}},onBlur:{defaultValue:null,description:"Function called when the input is blurred.",name:"onBlur",required:!1,type:{name:"(() => void)"}},onChange:{defaultValue:null,description:"Function called when selected results change, passed result list.",name:"onChange",required:!0,type:{name:"(selected: Option[]) => void"}},onSearch:{defaultValue:null,description:"Function called when input field is changed or focused.",name:"onSearch",required:!0,type:{name:"(query: string) => void"}},placeholder:{defaultValue:null,description:"A placeholder for the search input.",name:"placeholder",required:!1,type:{name:"string"}},query:{defaultValue:null,description:"Search query entered by user.",name:"query",required:!1,type:{name:"string | null"}},selected:{defaultValue:null,description:"An array of objects describing selected values. If the label of the selected\nvalue is omitted, the Tag of that value will not be rendered inside the\nsearch box.",name:"selected",required:!1,type:{name:"Selected"}},showAllOnFocus:{defaultValue:null,description:"Show all options on focusing, even if a query exists.",name:"showAllOnFocus",required:!1,type:{name:"boolean"}},autoComplete:{defaultValue:null,description:"Control input autocomplete field, defaults: off.",name:"autoComplete",required:!1,type:{name:"string"}},setExpanded:{defaultValue:null,description:"Function to execute when the control should be expanded or collapsed.",name:"setExpanded",required:!0,type:{name:"(expanded: boolean) => void"}},updateSearchOptions:{defaultValue:null,description:"Function to execute when the search value changes.",name:"updateSearchOptions",required:!0,type:{name:"(query: string) => void"}},decrementSelectedIndex:{defaultValue:null,description:"Function to execute when keyboard navigation should decrement the selected index.",name:"decrementSelectedIndex",required:!0,type:{name:"() => void"}},incrementSelectedIndex:{defaultValue:null,description:"Function to execute when keyboard navigation should increment the selected index.",name:"incrementSelectedIndex",required:!0,type:{name:"() => void"}},multiple:{defaultValue:null,description:"Multi-select mode allows multiple options to be selected.",name:"multiple",required:!1,type:{name:"boolean"}},isFocused:{defaultValue:null,description:"Is the control currently focused.",name:"isFocused",required:!1,type:{name:"boolean"}},activeId:{defaultValue:null,description:"ID for accessibility purposes. aria-activedescendant will be set to this value.",name:"activeId",required:!1,type:{name:"string"}},disabled:{defaultValue:null,description:"Disable the control.",name:"disabled",required:!1,type:{name:"boolean"}},isExpanded:{defaultValue:null,description:"Is the control currently expanded. This is for accessibility purposes.",name:"isExpanded",required:!1,type:{name:"boolean"}},searchInputType:{defaultValue:null,description:"The type of input to use for the search field.",name:"searchInputType",required:!1,type:{name:"HTMLInputTypeAttribute"}},ariaLabel:{defaultValue:null,description:"The aria label for the search input.",name:"ariaLabel",required:!1,type:{name:"string"}},className:{defaultValue:null,description:"Class name to be added to the input.",name:"className",required:!1,type:{name:"string"}},showClearButton:{defaultValue:null,description:"Show the clear button.",name:"showClearButton",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/select-control/control.tsx#Control"]={docgenInfo:Control.__docgenInfo,name:"Control",path:"../../packages/js/components/src/select-control/control.tsx#Control"})}catch(__react_docgen_typescript_loader_error){}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<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach((function(r){(0,defineProperty.A)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function select_control_createSuper(Derived){var hasNativeReflectConstruct=function select_control_isNativeReflectConstruct(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function _createSuperInternal(){var result,Super=(0,getPrototypeOf.A)(Derived);if(hasNativeReflectConstruct){var NewTarget=(0,getPrototypeOf.A)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return(0,possibleConstructorReturn.A)(this,result)}}var initialState={isExpanded:!1,isFocused:!1,query:"",searchOptions:[]},SelectControl=function(_Component){(0,inherits.A)(SelectControl,_Component);var _super=select_control_createSuper(SelectControl);function SelectControl(props){var _this;(0,classCallCheck.A)(this,SelectControl),_this=_super.call(this,props),(0,defineProperty.A)((0,assertThisInitialized.A)(_this),"node",null),(0,defineProperty.A)((0,assertThisInitialized.A)(_this),"activePromise",null),(0,defineProperty.A)((0,assertThisInitialized.A)(_this),"cacheSearchOptions",[]);var selected=props.selected,options=props.options,excludeSelectedOptions=props.excludeSelectedOptions;return _this.state=_objectSpread(_objectSpread({},initialState),{},{searchOptions:[],selectedIndex:selected&&null!=options&&options.length&&!excludeSelectedOptions?options.findIndex((function(option){return option.key===selected})):null}),_this.bindNode=_this.bindNode.bind((0,assertThisInitialized.A)(_this)),_this.decrementSelectedIndex=_this.decrementSelectedIndex.bind((0,assertThisInitialized.A)(_this)),_this.incrementSelectedIndex=_this.incrementSelectedIndex.bind((0,assertThisInitialized.A)(_this)),_this.onAutofillChange=_this.onAutofillChange.bind((0,assertThisInitialized.A)(_this)),_this.updateSearchOptions=(0,lodash.debounce)(_this.updateSearchOptions.bind((0,assertThisInitialized.A)(_this)),props.searchDebounceTime),_this.search=_this.search.bind((0,assertThisInitialized.A)(_this)),_this.selectOption=_this.selectOption.bind((0,assertThisInitialized.A)(_this)),_this.setExpanded=_this.setExpanded.bind((0,assertThisInitialized.A)(_this)),_this.setNewValue=_this.setNewValue.bind((0,assertThisInitialized.A)(_this)),_this}return(0,createClass.A)(SelectControl,[{key:"bindNode",value:function bindNode(node){this.node=node}},{key:"reset",value:function reset(){var selected=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.getSelected(),_this$props=this.props,multiple=_this$props.multiple,excludeSelectedOptions=_this$props.excludeSelectedOptions,newState=_objectSpread({},initialState);!multiple&&(0,lodash.isArray)(selected)&&selected.length&&selected[0].key&&(newState.selectedIndex=excludeSelectedOptions?null:this.props.options.findIndex((function(i){return i.key===selected[0].key}))),this.setState(newState)}},{key:"handleFocusOutside",value:function handleFocusOutside(){this.reset()}},{key:"hasMultiple",value:function hasMultiple(){var _this$props2=this.props,multiple=_this$props2.multiple,selected=_this$props2.selected;return!!multiple&&(Array.isArray(selected)?selected.some((function(item){return Boolean(item.label)})):Boolean(selected))}},{key:"getSelected",value:function getSelected(){var _this$props3=this.props,multiple=_this$props3.multiple,options=_this$props3.options,selected=_this$props3.selected;if(multiple||Array.isArray(selected))return selected;var selectedOption=options.find((function(option){return option.key===selected}));return selectedOption?[selectedOption]:[]}},{key:"selectOption",value:function selectOption(option){var _this$props4=this.props,multiple=_this$props4.multiple,selected=_this$props4.selected,newSelected=multiple&&(0,lodash.isArray)(selected)?[].concat((0,toConsumableArray.A)(selected),[option]):[option];this.reset(newSelected),-1===(Array.isArray(selected)?selected:[{key:selected}]).findIndex((function(val){return val.key===option.key}))&&this.setNewValue(newSelected);var newSelectedIndex=this.props.excludeSelectedOptions?null:this.getOptions().findIndex((function(i){return i.key===option.key}));this.setState({selectedIndex:newSelectedIndex})}},{key:"setNewValue",value:function setNewValue(newValue){var _this$props5=this.props,onChange=_this$props5.onChange,selected=_this$props5.selected,multiple=_this$props5.multiple,query=this.state.query;multiple||Array.isArray(selected)?onChange(newValue,query):onChange(newValue.length>0?newValue[0].key:"",query)}},{key:"decrementSelectedIndex",value:function decrementSelectedIndex(){var selectedIndex=this.state.selectedIndex,options=this.getOptions(),nextSelectedIndex=(0,lodash.isNumber)(selectedIndex)?(0===selectedIndex?options.length:selectedIndex)-1:options.length-1;this.setState({selectedIndex:nextSelectedIndex})}},{key:"incrementSelectedIndex",value:function incrementSelectedIndex(){var selectedIndex=this.state.selectedIndex,options=this.getOptions(),nextSelectedIndex=(0,lodash.isNumber)(selectedIndex)?(selectedIndex+1)%options.length:0;this.setState({selectedIndex:nextSelectedIndex})}},{key:"announce",value:function announce(searchOptions){var debouncedSpeak=this.props.debouncedSpeak;debouncedSpeak&&(searchOptions.length?debouncedSpeak((0,build_module.nv)((0,build_module._n)("%d result found, use up and down arrow keys to navigate.","%d results found, use up and down arrow keys to navigate.",searchOptions.length,"woocommerce"),searchOptions.length),"assertive"):debouncedSpeak((0,build_module.__)("No results.","woocommerce"),"assertive"))}},{key:"getOptions",value:function getOptions(){var _this$props6=this.props,isSearchable=_this$props6.isSearchable,options=_this$props6.options,excludeSelectedOptions=_this$props6.excludeSelectedOptions,searchOptions=this.state.searchOptions,selected=this.getSelected(),selectedKeys=(0,lodash.isArray)(selected)?selected.map((function(option){return option.key})):[],shownOptions=isSearchable?searchOptions:options;return excludeSelectedOptions?null==shownOptions?void 0:shownOptions.filter((function(option){return!selectedKeys.includes(option.key)})):shownOptions}},{key:"getOptionsByQuery",value:function getOptionsByQuery(options,query){for(var _this$props7=this.props,getSearchExpression=_this$props7.getSearchExpression,maxResults=_this$props7.maxResults,onFilter=_this$props7.onFilter,filtered=[],expression=getSearchExpression((0,lodash.escapeRegExp)(query?query.trim():"")),search=expression?new RegExp(expression,"i"):/^$/,i=0;i<options.length;i++){var option=options[i],_option$keywords=option.keywords,keywords=void 0===_option$keywords?[]:_option$keywords;if("string"==typeof option.label&&(keywords=[].concat((0,toConsumableArray.A)(keywords),[option.label])),keywords.some((function(keyword){return search.test(keyword)}))&&(filtered.push(option),maxResults&&filtered.length===maxResults))break}return onFilter(filtered,query)}},{key:"setExpanded",value:function setExpanded(value){this.setState({isExpanded:value})}},{key:"search",value:function search(query){var _this2=this,cacheSearchOptions=this.cacheSearchOptions||[],searchOptions=null===query||query.length||this.props.hideBeforeSearch?this.getOptionsByQuery(cacheSearchOptions,query):cacheSearchOptions;this.setState({query,isFocused:!0,searchOptions,selectedIndex:query&&(null==query?void 0:query.length)>0?null:this.state.selectedIndex},(function(){var _this2$getOptions;_this2.setState({isExpanded:Boolean(null===(_this2$getOptions=_this2.getOptions())||void 0===_this2$getOptions?void 0:_this2$getOptions.length)})})),this.updateSearchOptions(query)}},{key:"updateSearchOptions",value:function updateSearchOptions(query){var _this3=this,_this$props8=this.props,hideBeforeSearch=_this$props8.hideBeforeSearch,options=_this$props8.options,onSearch=_this$props8.onSearch,promise=this.activePromise=Promise.resolve(onSearch(options,query)).then((function(promiseOptions){if(promise===_this3.activePromise){_this3.cacheSearchOptions=promiseOptions;var searchOptions=null===query||query.length||hideBeforeSearch?_this3.getOptionsByQuery(promiseOptions,query):promiseOptions;_this3.setState({searchOptions,selectedIndex:query&&(null==query?void 0:query.length)>0?null:_this3.state.selectedIndex},(function(){_this3.setState({isExpanded:Boolean(_this3.getOptions().length)}),_this3.announce(searchOptions)}))}}))}},{key:"onAutofillChange",value:function onAutofillChange(event){var options=this.props.options,searchOptions=this.getOptionsByQuery(options,event.target.value);1===searchOptions.length&&this.selectOption(searchOptions[0])}},{key:"render",value:function render(){var _this$props9=this.props,autofill=_this$props9.autofill,children=_this$props9.children,className=_this$props9.className,disabled=_this$props9.disabled,controlClassName=_this$props9.controlClassName,inlineTags=_this$props9.inlineTags,instanceId=_this$props9.instanceId,isSearchable=_this$props9.isSearchable,options=_this$props9.options,_this$state=this.state,isExpanded=_this$state.isExpanded,isFocused=_this$state.isFocused,selectedIndex=_this$state.selectedIndex,hasMultiple=this.hasMultiple(),_ref$key=((0,lodash.isNumber)(selectedIndex)&&options[selectedIndex]||{}).key,selectedKey=void 0===_ref$key?"":_ref$key,listboxId=isExpanded?"woocommerce-select-control__listbox-".concat(instanceId):void 0,activeId=isExpanded?"woocommerce-select-control__option-".concat(instanceId,"-").concat(selectedKey):void 0;return(0,react.createElement)("div",{className:classnames_default()("woocommerce-select-control",className,{"has-inline-tags":hasMultiple&&inlineTags,"is-focused":isFocused,"is-searchable":isSearchable}),ref:this.bindNode},autofill&&(0,react.createElement)("input",{onChange:this.onAutofillChange,name:autofill,type:"text",className:"woocommerce-select-control__autofill-input",tabIndex:-1}),children,(0,react.createElement)(control,{help:this.props.help,label:this.props.label,inlineTags,isSearchable,isFocused,instanceId,searchInputType:this.props.searchInputType,query:this.state.query,placeholder:this.props.placeholder,autoComplete:this.props.autoComplete,multiple:this.props.multiple,ariaLabel:this.props.ariaLabel,onBlur:this.props.onBlur,showAllOnFocus:this.props.showAllOnFocus,activeId,className:controlClassName,disabled,hasTags:hasMultiple,isExpanded,listboxId,onSearch:this.search,selected:this.getSelected(),onChange:this.setNewValue,setExpanded:this.setExpanded,updateSearchOptions:this.updateSearchOptions,decrementSelectedIndex:this.decrementSelectedIndex,incrementSelectedIndex:this.incrementSelectedIndex,showClearButton:this.props.showClearButton}),!inlineTags&&hasMultiple&&(0,react.createElement)(tags,{onChange:this.props.onChange,showClearButton:this.props.showClearButton,selected:this.getSelected()}),isExpanded&&(0,react.createElement)(list,{instanceId,selectedIndex,staticList:this.props.staticList,listboxId,node:this.node,onSelect:this.selectOption,onSearch:this.search,options:this.getOptions(),decrementSelectedIndex:this.decrementSelectedIndex,incrementSelectedIndex:this.incrementSelectedIndex,setExpanded:this.setExpanded}))}}]),SelectControl}(react.Component);(0,defineProperty.A)(SelectControl,"defaultProps",{excludeSelectedOptions:!0,getSearchExpression:lodash.identity,inlineTags:!1,isSearchable:!1,onChange:lodash.noop,onFilter:lodash.identity,onSearch:function onSearch(options){return Promise.resolve(options)},maxResults:0,multiple:!1,searchDebounceTime:0,searchInputType:"search",selected:[],showAllOnFocus:!1,showClearButton:!1,hideBeforeSearch:!1,staticList:!1,autoComplete:"off"});const select_control=(0,compose.A)(with_spoken_messages.A,with_instance_id.A,with_focus_outside.A)(SelectControl);try{SelectControl.displayName="SelectControl",SelectControl.__docgenInfo={description:"A search box which filters options while typing,\nallowing a user to select from an option from a filtered list.",displayName:"SelectControl",props:{autofill:{defaultValue:null,description:"Name to use for the autofill field, not used if no string is passed.",name:"autofill",required:!1,type:{name:"string"}},children:{defaultValue:null,description:"A renderable component (or string) which will be displayed before the `Control` of this component.",name:"children",required:!1,type:{name:"ReactNode"}},className:{defaultValue:null,description:"Class name applied to parent div.",name:"className",required:!1,type:{name:"string"}},controlClassName:{defaultValue:null,description:"Class name applied to control wrapper.",name:"controlClassName",required:!1,type:{name:"string"}},disabled:{defaultValue:null,description:"Allow the select options to be disabled.",name:"disabled",required:!1,type:{name:"boolean"}},excludeSelectedOptions:{defaultValue:{value:"true"},description:"Exclude already selected options from the options list.",name:"excludeSelectedOptions",required:!1,type:{name:"boolean"}},onFilter:{defaultValue:null,description:"Add or remove items to the list of options after filtering,\npassed the array of filtered options and should return an array of options.",name:"onFilter",required:!1,type:{name:"((options: Option[], query: string | null) => Option[])"}},getSearchExpression:{defaultValue:null,description:"Function to add regex expression to the filter the results, passed the search query.",name:"getSearchExpression",required:!1,type:{name:"((query: string) => RegExp)"}},help:{defaultValue:null,description:"Help text to be appended beneath the input.",name:"help",required:!1,type:{name:"string | Element"}},inlineTags:{defaultValue:{value:"false"},description:"Render tags inside input, otherwise render below input.",name:"inlineTags",required:!1,type:{name:"boolean"}},isSearchable:{defaultValue:{value:"false"},description:"Allow the select options to be filtered by search input.",name:"isSearchable",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"A label to use for the main input.",name:"label",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"Function called when selected results change, passed result list.",name:"onChange",required:!1,type:{name:"((selected: string | Option[], query?: string | null) => void)"}},onSearch:{defaultValue:{value:"( options: Option[] ) => Promise.resolve( options )"},description:"Function run after search query is updated, passed previousOptions and query,\nshould return a promise with an array of updated options.",name:"onSearch",required:!1,type:{name:"((previousOptions: Option[], query: string | null) => Promise<Option[]>)"}},options:{defaultValue:null,description:"An array of objects for the options list. The option along with its key, label and\nvalue will be returned in the onChange event.",name:"options",required:!0,type:{name:"Option[]"}},placeholder:{defaultValue:null,description:"A placeholder for the search input.",name:"placeholder",required:!1,type:{name:"string"}},searchDebounceTime:{defaultValue:{value:"0"},description:"Time in milliseconds to debounce the search function after typing.",name:"searchDebounceTime",required:!1,type:{name:"number"}},selected:{defaultValue:{value:"[]"},description:"An array of objects describing selected values or optionally a string for a single value.\nIf the label of the selected value is omitted, the Tag of that value will not\nbe rendered inside the search box.",name:"selected",required:!1,type:{name:"Selected"}},maxResults:{defaultValue:{value:"0"},description:"A limit for the number of results shown in the options menu. Set to 0 for no limit.",name:"maxResults",required:!1,type:{name:"number"}},multiple:{defaultValue:{value:"false"},description:"Allow multiple option selections.",name:"multiple",required:!1,type:{name:"boolean"}},showClearButton:{defaultValue:{value:"false"},description:"Render a 'Clear' button next to the input box to remove its contents.",name:"showClearButton",required:!1,type:{name:"boolean"}},searchInputType:{defaultValue:{value:"search"},description:"The input type for the search box control.",name:"searchInputType",required:!1,type:{name:"HTMLInputTypeAttribute"}},hideBeforeSearch:{defaultValue:{value:"false"},description:"Only show list options after typing a search query.",name:"hideBeforeSearch",required:!1,type:{name:"boolean"}},showAllOnFocus:{defaultValue:{value:"false"},description:"Show all options on focusing, even if a query exists.",name:"showAllOnFocus",required:!1,type:{name:"boolean"}},staticList:{defaultValue:{value:"false"},description:"Render results list positioned statically instead of absolutely.",name:"staticList",required:!1,type:{name:"boolean"}},autoComplete:{defaultValue:{value:"off"},description:"autocomplete prop for the Control input field.",name:"autoComplete",required:!1,type:{name:"string"}},instanceId:{defaultValue:null,description:"Instance ID for the component.",name:"instanceId",required:!1,type:{name:"number"}},debouncedSpeak:{defaultValue:null,description:"From withSpokenMessages",name:"debouncedSpeak",required:!1,type:{name:"((message: string, assertive?: string) => void)"}},ariaLabel:{defaultValue:null,description:"aria-label for the search input.",name:"ariaLabel",required:!1,type:{name:"string"}},onBlur:{defaultValue:null,description:"On Blur callback.",name:"onBlur",required:!1,type:{name:"(() => void)"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/select-control/index.tsx#SelectControl"]={docgenInfo:SelectControl.__docgenInfo,name:"SelectControl",path:"../../packages/js/components/src/select-control/index.tsx#SelectControl"})}catch(__react_docgen_typescript_loader_error){}},"../../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<HTMLButtonElement>)"}},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){}}}]); |