woocommerce/components-attribute-combobox-field-stories-attribute-combobox-field-story.e8b874c1.iframe.bundle.js

"use strict";(self.webpackChunk_woocommerce_storybook=self.webpackChunk_woocommerce_storybook||[]).push([[2527],{"../../packages/js/product-editor/src/components/attribute-combobox-field/stories/attribute-combobox-field.story.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,MultipleInstances:()=>MultipleInstances,default:()=>attribute_combobox_field_story});var esm_extends=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/extends.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"),build_module=__webpack_require__("../../node_modules/.pnpm/@wordpress+i18n@4.6.1/node_modules/@wordpress/i18n/build-module/index.js"),defineProperty=(__webpack_require__("../../node_modules/.pnpm/@wordpress+interface@4.5.6_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-dir_imd5lple4ttszfhibm65m7atq4/node_modules/@wordpress/interface/src/style.scss"),__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.array.filter.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/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/defineProperty.js")),toConsumableArray=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),combobox_control=(__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.array.map.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.object.assign.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.object.to-string.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.number.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.string.replace.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/combobox-control/index.js")),spinner=__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"),base_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/base-control/index.js"),classnames=__webpack_require__("../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames);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}var ComboboxControl=combobox_control.A;function mapItemToOption(attr){return{label:attr.name,value:"attr-".concat(attr.id),disabled:!!attr.isDisabled}}var createNewAttributeOptionDefault={label:"",value:"",state:"draft"};function ComboboxControlOption(props){var item=props.item;return item.disabled?(0,react.createElement)("div",{className:"item-wrapper is-disabled"},item.label):(0,react.createElement)("div",{className:"item-wrapper"},item.label)}const attribute_combobox_field=function AttributesComboboxControl(_ref){var label=_ref.label,help=_ref.help,_ref$current=_ref.current,current=void 0===_ref$current?null:_ref$current,_ref$items=_ref.items,items=void 0===_ref$items?[]:_ref$items,_ref$instanceNumber=_ref.instanceNumber,instanceNumber=void 0===_ref$instanceNumber?0:_ref$instanceNumber,_ref$isLoading=_ref.isLoading,isLoading=void 0!==_ref$isLoading&&_ref$isLoading,onAddNew=_ref.onAddNew,_onChange=_ref.onChange,_useState=(0,react.useState)(createNewAttributeOptionDefault),_useState2=(0,slicedToArray.A)(_useState,2),createNewAttributeOption=_useState2[0],updateCreateNewAttributeOption=_useState2[1],attributeOptions=null==items?void 0:items.map(mapItemToOption),options=(0,react.useMemo)((function(){return createNewAttributeOption.label.length?[].concat((0,toConsumableArray.A)(attributeOptions),[{label:"draft"===createNewAttributeOption.state?(0,build_module.nv)((0,build_module.__)('Create "%s"',"woocommerce"),createNewAttributeOption.label):createNewAttributeOption.label,value:createNewAttributeOption.value}]):attributeOptions}),[attributeOptions,createNewAttributeOption]),currentValue=current?"attr-".concat(current.id):"";"creating"===createNewAttributeOption.state&&(currentValue="create-attribute");var comboRef=(0,react.useRef)(null),_useState3=(0,react.useState)(""),_useState4=(0,slicedToArray.A)(_useState3,2),labelFor=_useState4[0],setLabelFor=_useState4[1];return(0,react.useEffect)((function(){if(null!=comboRef&&comboRef.current){var inputElement=comboRef.current.querySelector("input.components-combobox-control__input"),id=null==inputElement?void 0:inputElement.getAttribute("id");inputElement&&"string"==typeof id&&setLabelFor(id);var listContainerElement=comboRef.current.querySelector(".components-combobox-control__suggestions-container"),style={zIndex:1e3-instanceNumber};listContainerElement&&Object.assign(listContainerElement.style,style)}}),[instanceNumber]),help||(help=(0,react.createElement)("div",{className:"woocommerce-attributes-combobox-help"},(0,build_module.__)("Select an attribute or type to create.","woocommerce")),isLoading?help=(0,react.createElement)("div",{className:"woocommerce-attributes-combobox-help"},(0,react.createElement)(spinner.A,null),(0,build_module.__)("Loading…","woocommerce")):items.length||(help=(0,react.createElement)("div",{className:"woocommerce-attributes-combobox-help"},(0,build_module.__)("No attributes yet. Type to create.","woocommerce")))),(0,react.createElement)("div",{className:classnames_default()("woocommerce-attributes-combobox-container",{"no-items":!options.length}),ref:comboRef},(0,react.createElement)(base_control.Ay,{label,help,id:labelFor},(0,react.createElement)(ComboboxControl,{className:"woocommerce-attributes-combobox",allowReset:!1,options,value:currentValue,onChange:function onChange(newValue){if(newValue){if("create-attribute"===newValue)return updateCreateNewAttributeOption(_objectSpread(_objectSpread({},createNewAttributeOption),{},{state:"creating"})),null==onAddNew?void 0:onAddNew(createNewAttributeOption.label);var selectedAttribute=null==items?void 0:items.find((function(item){return item.id===Number(newValue.replace("attr-",""))}));selectedAttribute&&!selectedAttribute.isDisabled&&_onChange(selectedAttribute)}},onFilterValueChange:function onFilterValueChange(filterValue){updateCreateNewAttributeOption({label:filterValue,value:"create-attribute",state:"draft"})},__experimentalRenderItem:ComboboxControlOption})))};try{attributecomboboxfield.displayName="attributecomboboxfield",attributecomboboxfield.__docgenInfo={description:"",displayName:"attributecomboboxfield",props:{label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string"}},help:{defaultValue:null,description:"",name:"help",required:!1,type:{name:"string | Element | null"}},isLoading:{defaultValue:{value:"false"},description:"",name:"isLoading",required:!1,type:{name:"boolean"}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean"}},instanceNumber:{defaultValue:{value:"0"},description:"",name:"instanceNumber",required:!1,type:{name:"number"}},current:{defaultValue:{value:"null"},description:"",name:"current",required:!1,type:{name:"AttributesComboboxControlItem | null"}},items:{defaultValue:{value:"[]"},description:"",name:"items",required:!1,type:{name:"AttributesComboboxControlItem[]"}},disabledAttributeMessage:{defaultValue:null,description:"",name:"disabledAttributeMessage",required:!1,type:{name:"string"}},createNewAttributesAsGlobal:{defaultValue:null,description:"",name:"createNewAttributesAsGlobal",required:!1,type:{name:"boolean"}},onAddNew:{defaultValue:null,description:"",name:"onAddNew",required:!1,type:{name:"((value: string) => void)"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"(value: AttributesComboboxControlItem) => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/product-editor/src/components/attribute-combobox-field/index.tsx#attributecomboboxfield"]={docgenInfo:attributecomboboxfield.__docgenInfo,name:"attributecomboboxfield",path:"../../packages/js/product-editor/src/components/attribute-combobox-field/index.tsx#attributecomboboxfield"})}catch(__react_docgen_typescript_loader_error){}const attribute_combobox_field_story={title:"Product Editor/components/AttributesComboboxControl",component:attribute_combobox_field};var items=[{id:1,name:"Color"},{id:2,name:"Size"},{id:3,name:"Material",isDisabled:!0},{id:4,name:"Style"},{id:5,name:"Brand"},{id:6,name:"Pattern"},{id:7,name:"Theme",isDisabled:!0},{id:8,name:"Collection",isDisabled:!0},{id:9,name:"Occasion"},{id:10,name:"Season"}],Default=function Default(args){var _useState=(0,react.useState)(null),_useState2=(0,slicedToArray.A)(_useState,2),selectedAttribute=_useState2[0],setSelectedAttribute=_useState2[1];return(0,react.createElement)(attribute_combobox_field,(0,esm_extends.A)({},args,{label:(0,build_module.__)("Attributes","woocommerce"),items,help:(0,build_module.__)("Select or create attributes for this product.","woocommerce"),onChange:function selectAttribute(item){"string"!=typeof item&&(setSelectedAttribute(item),args.onChange(item))},current:selectedAttribute}))};Default.args={onChange:function onChange(newValue){console.log("(onChange) newValue:",newValue)}};var MultipleInstances=function MultipleInstances(args){return(0,react.createElement)(react.Fragment,null,(0,react.createElement)(attribute_combobox_field,(0,esm_extends.A)({},args,{label:(0,build_module.__)("Attributes 1","woocommerce"),items,instanceNumber:1})),(0,react.createElement)(attribute_combobox_field,(0,esm_extends.A)({},args,{label:(0,build_module.__)("Attributes 2","woocommerce"),items,instanceNumber:2})))};MultipleInstances.args=Default.args,Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"(args: AttributesComboboxControlComponent) => {\n  const [selectedAttribute, setSelectedAttribute] = useState<AttributesComboboxControlItem | null>(null);\n  function selectAttribute(item: AttributesComboboxControlItem) {\n    if (typeof item === 'string') {\n      return;\n    }\n    setSelectedAttribute(item);\n    args.onChange(item);\n  }\n  return <AttributesComboboxControl {...args} label={__('Attributes', 'woocommerce')} items={items} help={__('Select or create attributes for this product.', 'woocommerce')} onChange={selectAttribute} current={selectedAttribute} />;\n}",...Default.parameters?.docs?.source}}},MultipleInstances.parameters={...MultipleInstances.parameters,docs:{...MultipleInstances.parameters?.docs,source:{originalSource:"(args: AttributesComboboxControlComponent) => {\n  return <>\n            <AttributesComboboxControl {...args} label={__('Attributes 1', 'woocommerce')} items={items} instanceNumber={1} />\n\n            <AttributesComboboxControl {...args} label={__('Attributes 2', 'woocommerce')} items={items} instanceNumber={2} />\n        </>;\n}",...MultipleInstances.parameters?.docs?.source}}};try{Default.displayName="Default",Default.__docgenInfo={description:"",displayName:"Default",props:{label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string"}},help:{defaultValue:null,description:"",name:"help",required:!1,type:{name:"string | Element | null"}},isLoading:{defaultValue:null,description:"",name:"isLoading",required:!0,type:{name:"boolean"}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean"}},instanceNumber:{defaultValue:null,description:"",name:"instanceNumber",required:!1,type:{name:"number"}},current:{defaultValue:null,description:"",name:"current",required:!0,type:{name:"AttributesComboboxControlItem | null"}},items:{defaultValue:null,description:"",name:"items",required:!0,type:{name:"AttributesComboboxControlItem[]"}},disabledAttributeMessage:{defaultValue:null,description:"",name:"disabledAttributeMessage",required:!1,type:{name:"string"}},createNewAttributesAsGlobal:{defaultValue:null,description:"",name:"createNewAttributesAsGlobal",required:!1,type:{name:"boolean"}},onAddNew:{defaultValue:null,description:"",name:"onAddNew",required:!1,type:{name:"((value: string) => void)"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"(value: AttributesComboboxControlItem) => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/product-editor/src/components/attribute-combobox-field/stories/attribute-combobox-field.story.tsx#Default"]={docgenInfo:Default.__docgenInfo,name:"Default",path:"../../packages/js/product-editor/src/components/attribute-combobox-field/stories/attribute-combobox-field.story.tsx#Default"})}catch(__react_docgen_typescript_loader_error){}try{MultipleInstances.displayName="MultipleInstances",MultipleInstances.__docgenInfo={description:"",displayName:"MultipleInstances",props:{label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string"}},help:{defaultValue:null,description:"",name:"help",required:!1,type:{name:"string | Element | null"}},isLoading:{defaultValue:null,description:"",name:"isLoading",required:!0,type:{name:"boolean"}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"string"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean"}},instanceNumber:{defaultValue:null,description:"",name:"instanceNumber",required:!1,type:{name:"number"}},current:{defaultValue:null,description:"",name:"current",required:!0,type:{name:"AttributesComboboxControlItem | null"}},items:{defaultValue:null,description:"",name:"items",required:!0,type:{name:"AttributesComboboxControlItem[]"}},disabledAttributeMessage:{defaultValue:null,description:"",name:"disabledAttributeMessage",required:!1,type:{name:"string"}},createNewAttributesAsGlobal:{defaultValue:null,description:"",name:"createNewAttributesAsGlobal",required:!1,type:{name:"boolean"}},onAddNew:{defaultValue:null,description:"",name:"onAddNew",required:!1,type:{name:"((value: string) => void)"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"(value: AttributesComboboxControlItem) => void"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/product-editor/src/components/attribute-combobox-field/stories/attribute-combobox-field.story.tsx#MultipleInstances"]={docgenInfo:MultipleInstances.__docgenInfo,name:"MultipleInstances",path:"../../packages/js/product-editor/src/components/attribute-combobox-field/stories/attribute-combobox-field.story.tsx#MultipleInstances"})}catch(__react_docgen_typescript_loader_error){}}}]);