woocommerce/tree-select-control-stories-tree-select-control-story.d9467214.iframe.bundle.js

"use strict";(self.webpackChunk_woocommerce_storybook=self.webpackChunk_woocommerce_storybook||[]).push([[5826],{"../../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){}},"../../packages/js/components/src/tree-select-control/stories/tree-select-control.story.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Base:()=>Base,default:()=>tree_select_control_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"),defineProperty=(__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.function.bind.js"),__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/defineProperty.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"),lodash=(__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.iterator.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.map.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.string.iterator.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/web.dom-collections.iterator.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.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.array.flat-map.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.unscopables.flat-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.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.every.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.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/core-js@3.34.0/node_modules/core-js/modules/es.array.reduce.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.object.define-properties.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.find.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/lodash@4.17.21/node_modules/lodash/lodash.js")),build_module=__webpack_require__("../../node_modules/.pnpm/@wordpress+i18n@4.6.1/node_modules/@wordpress/i18n/build-module/index.js"),dom_build_module=__webpack_require__("../../node_modules/.pnpm/@wordpress+dom@3.6.1/node_modules/@wordpress/dom/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),use_instance_id=__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"),use_focus_outside=__webpack_require__("../../node_modules/.pnpm/@wordpress+compose@5.4.1_react@17.0.2/node_modules/@wordpress/compose/build-module/hooks/use-focus-outside/index.js");const tree_select_control_useIsEqualRefValue=function useIsEqualRefValue(value){var optionsRef=(0,react.useRef)(value);return(0,lodash.isEqual)(optionsRef.current,value)||(optionsRef.current=value),optionsRef.current};__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.slice.js");var 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"),tag=__webpack_require__("../../packages/js/components/src/tag/index.tsx");const tree_select_control_tags=function Tags(_ref){var _ref$tags=_ref.tags,tags=void 0===_ref$tags?[]:_ref$tags,disabled=_ref.disabled,_ref$maxVisibleTags=_ref.maxVisibleTags,maxVisibleTags=void 0===_ref$maxVisibleTags?0:_ref$maxVisibleTags,_ref$onChange=_ref.onChange,onChange=void 0===_ref$onChange?function(){}:_ref$onChange,_useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.A)(_useState,2),showAll=_useState2[0],setShowAll=_useState2[1],maxTags=Math.max(0,maxVisibleTags),visibleTags=showAll||!maxTags?tags:tags.slice(0,maxTags);if(!tags.length)return null;var remove=function remove(key){return function(){disabled||onChange(tags.filter((function(tag){return tag.id!==key})))}};return(0,react.createElement)("div",{className:"woocommerce-tree-select-control__tags"},visibleTags.map((function(item,i){if(!item.label)return null;var screenReaderLabel=(0,build_module.nv)((0,build_module.__)("%1$s (%2$d of %3$d)","woocommerce"),item.label,i+1,tags.length);return(0,react.createElement)(tag.A,{key:item.id,id:item.id,label:item.label,screenReaderLabel,remove})})),maxTags>0&&tags.length>maxTags&&(0,react.createElement)(build_module_button.A,{isTertiary:!0,className:"woocommerce-tree-select-control__show-more",onClick:function onClick(){setShowAll(!showAll)}},showAll?(0,build_module.__)("Show less","woocommerce"):(0,build_module.nv)((0,build_module.__)("+ %d more","woocommerce"),tags.length-maxTags)))};var ROOT_VALUE="__WC_TREE_SELECT_COMPONENT_ROOT__";const control=(0,react.forwardRef)((function(_ref,ref){var _ref$tags=_ref.tags,tags=void 0===_ref$tags?[]:_ref$tags,instanceId=_ref.instanceId,placeholder=_ref.placeholder,isExpanded=_ref.isExpanded,disabled=_ref.disabled,maxVisibleTags=_ref.maxVisibleTags,_ref$value=_ref.value,value=void 0===_ref$value?"":_ref$value,_ref$onFocus=_ref.onFocus,onFocus=void 0===_ref$onFocus?function(){}:_ref$onFocus,_ref$onTagsChange=_ref.onTagsChange,onTagsChange=void 0===_ref$onTagsChange?function(){}:_ref$onTagsChange,_ref$onInputChange=_ref.onInputChange,onInputChange=void 0===_ref$onInputChange?function(){}:_ref$onInputChange,_ref$onControlClick=_ref.onControlClick,onControlClick=void 0===_ref$onControlClick?lodash.noop:_ref$onControlClick,_ref$alwaysShowPlaceh=_ref.alwaysShowPlaceholder,alwaysShowPlaceholder=void 0!==_ref$alwaysShowPlaceh&&_ref$alwaysShowPlaceh,hasTags=tags.length>0,showPlaceholder=!!alwaysShowPlaceholder||!hasTags&&!isExpanded;return(0,react.createElement)("div",{className:classnames_default()("components-base-control","woocommerce-tree-select-control__control",{"is-disabled":disabled,"has-tags":hasTags}),onClick:function onClick(e){ref.current.focus(),onControlClick(e)}},hasTags&&(0,react.createElement)(tree_select_control_tags,{disabled,tags,maxVisibleTags,onChange:onTagsChange}),(0,react.createElement)("div",{className:"components-base-control__field"},(0,react.createElement)("input",{ref,id:"woocommerce-tree-select-control-".concat(instanceId,"__control-input"),type:"search",placeholder:showPlaceholder?placeholder:"",autoComplete:"off",className:"woocommerce-tree-select-control__control-input",role:"combobox","aria-autocomplete":"list",value,"aria-expanded":isExpanded,disabled,onFocus,onChange:onInputChange,onKeyDown:function handleKeydown(event){if("Backspace"===event.key){if(value)return;onTagsChange(tags.slice(0,-1)),event.preventDefault()}}})))}));var component=__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/flex/flex/component.js"),icon=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/icon/index.js"),chevron_up=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/library/chevron-up.js"),chevron_down=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/library/chevron-down.js"),check=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/library/check.js"),_excluded=["option","checked","className"];const tree_select_control_checkbox=function Checkbox(_ref){var _option$key,_option$key2,option=_ref.option,checked=_ref.checked,className=_ref.className,props=(0,objectWithoutProperties.A)(_ref,_excluded);return(0,react.createElement)("div",{className},(0,react.createElement)("div",{className:"components-base-control__field"},(0,react.createElement)("span",{className:"components-checkbox-control__input-container"},(0,react.createElement)("input",(0,esm_extends.A)({id:"inspector-checkbox-control-".concat(null!==(_option$key=option.key)&&void 0!==_option$key?_option$key:option.value),className:"components-checkbox-control__input",type:"checkbox",tabIndex:"-1",value:option.value,checked},props)),checked&&(0,react.createElement)(icon.A,{icon:check.A,role:"presentation",className:"components-checkbox-control__checked"})),(0,react.createElement)("label",{className:"components-checkbox-control__label",htmlFor:"inspector-checkbox-control-".concat(null!==(_option$key2=option.key)&&void 0!==_option$key2?_option$key2:option.value)},option.label)))};const tree_select_control_options=function Options(_ref){var _ref$options=_ref.options,options=void 0===_ref$options?[]:_ref$options,_ref$onChange=_ref.onChange,_onChange=void 0===_ref$onChange?function(){}:_ref$onChange,_ref$onExpanderClick=_ref.onExpanderClick,onExpanderClick=void 0===_ref$onExpanderClick?lodash.noop:_ref$onExpanderClick,_ref$onToggleExpanded=_ref.onToggleExpanded,onToggleExpanded=void 0===_ref$onToggleExpanded?lodash.noop:_ref$onToggleExpanded,_ref$parent=_ref.parent,parent=void 0===_ref$parent?null:_ref$parent;return options.map((function(option){var _option$key,isRoot=option.value===ROOT_VALUE,hasChildren=option.hasChildren,checked=option.checked,partialChecked=option.partialChecked,expanded=option.expanded;return null!=option&&option.value&&(isRoot||null!=option&&option.isVisible)?(0,react.createElement)("div",{key:"".concat(null!==(_option$key=option.key)&&void 0!==_option$key?_option$key:option.value),role:hasChildren?"treegroup":"treeitem","aria-expanded":hasChildren?expanded:void 0,className:classnames_default()("woocommerce-tree-select-control__node",hasChildren&&"has-children")},(0,react.createElement)(component.A,{justify:"flex-start"},!isRoot&&(0,react.createElement)("button",{className:classnames_default()("woocommerce-tree-select-control__expander",!hasChildren&&"is-hidden"),tabIndex:"-1",onClick:function onClick(e){e.preventDefault(),onExpanderClick(e),onToggleExpanded(option)}},(0,react.createElement)(icon.A,{icon:expanded?chevron_up.A:chevron_down.A})),(0,react.createElement)(tree_select_control_checkbox,{className:classnames_default()("components-base-control","woocommerce-tree-select-control__option",partialChecked&&"is-partially-checked"),option,checked,onChange:function onChange(e){_onChange(e.target.checked,option,parent)},onKeyDown:function onKeyDown(e){!function handleKeyDown(event,option){option.hasChildren&&("ArrowRight"!==event.key||option.expanded?"ArrowLeft"===event.key&&option.expanded&&onToggleExpanded(option):onToggleExpanded(option))}(e,option)}})),hasChildren&&expanded&&(0,react.createElement)("div",{className:classnames_default()("woocommerce-tree-select-control__children",isRoot&&"woocommerce-tree-select-control__main")},(0,react.createElement)(Options,{options:option.children,onChange:_onChange,onExpanderClick,onToggleExpanded,parent:option}))):null}))};var tree_select_control_excluded=["children"];const tree_select_control=function TreeSelectControl(_ref){var id=_ref.id,label=_ref.label,_ref$selectAllLabel=_ref.selectAllLabel,selectAllLabel=void 0===_ref$selectAllLabel?(0,build_module.__)("All","woocommerce"):_ref$selectAllLabel,help=_ref.help,placeholder=_ref.placeholder,className=_ref.className,disabled=_ref.disabled,_ref$options=_ref.options,options=void 0===_ref$options?[]:_ref$options,_ref$value=_ref.value,value=void 0===_ref$value?[]:_ref$value,maxVisibleTags=_ref.maxVisibleTags,_ref$onChange=_ref.onChange,onChange=void 0===_ref$onChange?function(){}:_ref$onChange,_ref$onDropdownVisibi=_ref.onDropdownVisibilityChange,onDropdownVisibilityChange=void 0===_ref$onDropdownVisibi?lodash.noop:_ref$onDropdownVisibi,_ref$onInputChange=_ref.onInputChange,onInputChange=void 0===_ref$onInputChange?lodash.noop:_ref$onInputChange,_ref$includeParent=_ref.includeParent,includeParent=void 0!==_ref$includeParent&&_ref$includeParent,_ref$individuallySele=_ref.individuallySelectParent,individuallySelectParent=void 0!==_ref$individuallySele&&_ref$individuallySele,_ref$alwaysShowPlaceh=_ref.alwaysShowPlaceholder,alwaysShowPlaceholder=void 0!==_ref$alwaysShowPlaceh&&_ref$alwaysShowPlaceh,_ref$minFilterQueryLe=_ref.minFilterQueryLength,minFilterQueryLength=void 0===_ref$minFilterQueryLe?3:_ref$minFilterQueryLe,_ref$clearOnSelect=_ref.clearOnSelect,clearOnSelect=void 0===_ref$clearOnSelect||_ref$clearOnSelect,instanceId=(0,use_instance_id.A)(TreeSelectControl);instanceId=null!=id?id:instanceId;var _useState=(0,react.useState)(!1),_useState2=(0,slicedToArray.A)(_useState,2),treeVisible=_useState2[0],setTreeVisible=_useState2[1],_useState3=(0,react.useState)([]),_useState4=(0,slicedToArray.A)(_useState3,2),nodesExpanded=_useState4[0],setNodesExpanded=_useState4[1],_useState5=(0,react.useState)(""),_useState6=(0,slicedToArray.A)(_useState5,2),inputControlValue=_useState6[0],setInputControlValue=_useState6[1],controlRef=(0,react.useRef)(),dropdownRef=(0,react.useRef)(),onDropdownVisibilityChangeRef=(0,react.useRef)();onDropdownVisibilityChangeRef.current=onDropdownVisibilityChange;var cacheRef=(0,react.useRef)({filteredOptionsMap:new Map});cacheRef.current.expandedValues=nodesExpanded,cacheRef.current.selectedValues=value;var showTree=!disabled&&treeVisible,root=!1!==selectAllLabel?{label:selectAllLabel,value:ROOT_VALUE,children:options}:null,treeOptions=tree_select_control_useIsEqualRefValue(root?[root]:options),focusOutside=(0,use_focus_outside.A)((function(){setTreeVisible(!1)})),filterQuery=inputControlValue.trim().toLowerCase(),filter=filterQuery.length>=minFilterQueryLength?filterQuery:"",optionsRepository=(0,react.useMemo)((function(){var repository={};return cacheRef.current.filteredOptionsMap.clear(),treeOptions.forEach((function loadOption(option,parentId){var _option$children,_option$key;option.parent=parentId,null===(_option$children=option.children)||void 0===_option$children||_option$children.forEach((function(el){return loadOption(el,option.value)})),repository[null!==(_option$key=option.key)&&void 0!==_option$key?_option$key:option.value]=option})),repository}),[treeOptions]),filteredOptions=(0,react.useMemo)((function(){var cache=cacheRef.current,cachedFilteredOptions=cache.filteredOptionsMap.get(filter);if(cachedFilteredOptions)return cachedFilteredOptions;var isSearching=Boolean(filter),descriptors={hasChildren:{get:function get(){var _this$children;return(null===(_this$children=this.children)||void 0===_this$children?void 0:_this$children.length)>0}},leaves:{get:function get(){return this.hasChildren?this.children.flatMap((function(option){return option.hasChildren?includeParent&&option.value!==ROOT_VALUE?[option].concat((0,toConsumableArray.A)(option.leaves)):option.leaves:option})):[]}},checked:{get:function get(){return includeParent&&this.value!==ROOT_VALUE||individuallySelectParent?cache.selectedValues.includes(this.value):this.hasChildren?this.leaves.every((function(opt){return opt.checked})):cache.selectedValues.includes(this.value)}},partialChecked:{get:function get(){return!!this.hasChildren&&(!this.checked&&this.children.some((function(opt){return opt.checked||opt.partialChecked})))}},isVisible:{get:function get(){return!isSearching||(!!this.isSearchResult||(this.hasChildren?this.children.some((function(opt){return opt.isVisible})):this.leaves.some((function(opt){return opt.isSearchResult}))))}},isSearchResult:{get:function get(){return!!isSearching&&!!this.filterMatch}},expanded:{get:function get(){return isSearching&&this.isVisible||this.value===ROOT_VALUE||cache.expandedValues.includes(this.value)}}},removeAccents=function removeAccents(str){return str.normalize("NFD").replace(/[\u0300-\u036f]/g,"")},filteredTreeOptions=treeOptions.reduce((function reduceOptions(acc,_ref2){var _ref2$children=_ref2.children,children=void 0===_ref2$children?[]:_ref2$children,option=(0,objectWithoutProperties.A)(_ref2,tree_select_control_excluded);if(children.length&&(option.children=children.reduce(reduceOptions,[])),isSearching){var labelWithAccentsRemoved=removeAccents(option.label),filterWithAccentsRemoved=removeAccents(filter),match=labelWithAccentsRemoved.toLowerCase().indexOf(filterWithAccentsRemoved);match>-1&&(option.label=function highlightOptionLabel(optionLabel,matchPosition){var matchLength=matchPosition+filter.length;return isSearching?(0,react.createElement)("span",null,(0,react.createElement)("span",null,optionLabel.substring(0,matchPosition)),(0,react.createElement)("strong",null,optionLabel.substring(matchPosition,matchLength)),(0,react.createElement)("span",null,optionLabel.substring(matchLength))):optionLabel}(option.label,match),option.filterMatch=!0)}return Object.defineProperties(option,descriptors),acc.push(option),acc}),[]);return cache.filteredOptionsMap.set(filter,filteredTreeOptions),filteredTreeOptions}),[treeOptions,filter]);(0,react.useEffect)((function(){onDropdownVisibilityChangeRef.current(showTree)}),[showTree]);var tags=(0,react.useMemo)((function(){return options.length?value.map((function(key){var option=optionsRepository[key];return{id:key,label:null==option?void 0:option.label}})):[]}),[optionsRepository,value,options]),handleToggleExpanded=function handleToggleExpanded(option){setNodesExpanded(option.expanded?nodesExpanded.filter((function(el){return option.value!==el})):[].concat((0,toConsumableArray.A)(nodesExpanded),[option.value]))};return(0,react.createElement)("div",(0,esm_extends.A)({},focusOutside,{onKeyDown:function onKeyDown(event){if(!disabled){"Escape"===event.key&&setTreeVisible(!1),"Enter"===event.key&&(setTreeVisible(!0),"checkbox"===event.target.type&&event.target.click(),event.preventDefault());var step=(0,defineProperty.A)((0,defineProperty.A)({},"ArrowUp",-1),"ArrowDown",1)[event.key];if(step&&dropdownRef.current&&filteredOptions.length){var elements=dom_build_module.XC.focusable.find(dropdownRef.current).filter((function(el){return"checkbox"===el.type})),currentIndex=elements.indexOf(event.target),index=Math.max(currentIndex+step,-1)%elements.length;elements.at(index).focus(),event.preventDefault()}}},className:classnames_default()("woocommerce-tree-select-control",className)}),!!label&&(0,react.createElement)("label",{htmlFor:"woocommerce-tree-select-control-".concat(instanceId,"__control-input"),className:"woocommerce-tree-select-control__label"},label),(0,react.createElement)(control,{ref:controlRef,disabled,tags,isExpanded:showTree,onFocus:function onFocus(){setTreeVisible(!0)},onControlClick:function onControlClick(){setTreeVisible(!0)},instanceId,placeholder,label,maxVisibleTags,value:inputControlValue,onTagsChange:function handleTagsChange(newTags){onChange((0,toConsumableArray.A)(newTags.map((function(el){return el.id}))))},onInputChange:function handleOnInputChange(e){setTreeVisible(!0),onInputChange(e.target.value),setInputControlValue(e.target.value)},alwaysShowPlaceholder}),showTree&&(0,react.createElement)("div",{ref:dropdownRef,className:"woocommerce-tree-select-control__tree",role:"tree",tabIndex:"-1"},(0,react.createElement)(tree_select_control_options,{options:filteredOptions,onChange:function handleOptionsChange(checked,option,parent){option.hasChildren?function handleParentChange(checked,option){var newValue,changedValues=individuallySelectParent?[option.value]:option.leaves.filter((function(opt){return opt.checked!==checked})).map((function(opt){return opt.value}));includeParent&&!individuallySelectParent&&option.value!==ROOT_VALUE&&changedValues.push(option.value),checked?(option.expanded||handleToggleExpanded(option),newValue=value.concat(changedValues)):newValue=value.filter((function(el){return!changedValues.includes(el)})),onChange(newValue)}(checked,option):function handleSingleChange(checked,option,parent){var newValue=checked?[].concat((0,toConsumableArray.A)(value),[option.value]):value.filter((function(el){return el!==option.value}));includeParent&&parent&&parent.value!==ROOT_VALUE&&parent.children&&parent.children.every((function(child){return newValue.includes(child.value)}))&&!newValue.includes(parent.value)&&newValue.push(parent.value),onChange(newValue)}(checked,option,parent),clearOnSelect&&(onInputChange(""),setInputControlValue(""),nodesExpanded.includes(option.parent)||controlRef.current.focus())},onExpanderClick:function handleExpanderClick(e){var elements=dom_build_module.XC.focusable.find(dropdownRef.current),index=elements.indexOf(e.currentTarget)+1;elements[index].focus()},onToggleExpanded:handleToggleExpanded})),help&&(0,react.createElement)("div",{className:"woocommerce-tree-select-control__help"},help))};var Base=function Template(args){var _useState=(0,react.useState)(["ES"]),_useState2=(0,slicedToArray.A)(_useState,2),selected=_useState2[0],setSelected=_useState2[1];return(0,react.useEffect)((function(){args.onChange&&args.onChange(selected)}),[selected]),(0,react.createElement)(tree_select_control,(0,esm_extends.A)({},args,{value:selected,onChange:setSelected}))}.bind({});Base.args={id:"my-id",label:"Select Countries",placeholder:"Search countries",disabled:!1,options:[{value:"EU",label:"Europe",children:[{value:"ES",label:"Spain"},{value:"FR",label:"France"},{value:"TR",label:"Türkiye"},{key:"FR-Colonies",value:"FR-C",label:"France (Colonies)"}]},{value:"AS",label:"Asia",children:[{value:"JP",label:"Japan",children:[{value:"TO",label:"Tokyo",children:[{value:"SI",label:"Shibuya"},{value:"GI",label:"Ginza"}]},{value:"OK",label:"Okinawa"}]},{value:"CH",label:"China"},{value:"MY",label:"Malaysia",children:[{value:"KU",label:"Kuala Lumpur"}]}]},{value:"NA",label:"North America",children:[{value:"US",label:"United States",children:[{value:"NY",label:"New York"},{value:"TX",label:"Texas"},{value:"GE",label:"Georgia"}]},{value:"CA",label:"Canada"}]}],maxVisibleTags:3,selectAllLabel:"All countries",includeParent:!1,alwaysShowPlaceholder:!1,individuallySelectParent:!1,clearOnSelect:!0},Base.argTypes={onInputChange:{action:"onInputChange"},onChange:{action:"onChange"}};const tree_select_control_story={title:"WooCommerce Admin/components/TreeSelectControl",component:tree_select_control};Base.parameters={...Base.parameters,docs:{...Base.parameters?.docs,source:{originalSource:"args => {\n  const [selected, setSelected] = useState(['ES']);\n  useEffect(() => {\n    if (args.onChange) {\n      args.onChange(selected);\n    }\n  }, [selected]);\n  return <TreeSelectControl {...args} value={selected} onChange={setSelected} />;\n}",...Base.parameters?.docs?.source}}}}}]);