1 line
64 KiB
JavaScript
1 line
64 KiB
JavaScript
"use strict";(self.webpackChunk_woocommerce_storybook=self.webpackChunk_woocommerce_storybook||[]).push([[2721],{"../../packages/js/components/src/experimental-select-control/combo-box.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{a:()=>ComboBox});var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/extends.js"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/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_icons__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/icon/index.js"),_wordpress_icons__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/library/chevron-down.js"),ToggleButton=(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)((function(props,ref){return(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("button",(0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_2__.A)({className:"woocommerce-experimental-select-control__combox-box-toggle-button"},props,{ref}),(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_icons__WEBPACK_IMPORTED_MODULE_3__.A,{icon:_wordpress_icons__WEBPACK_IMPORTED_MODULE_4__.A}))})),ComboBox=function ComboBox(_ref){var children=_ref.children,comboBoxProps=_ref.comboBoxProps,_ref$getToggleButtonP=_ref.getToggleButtonProps,getToggleButtonProps=void 0===_ref$getToggleButtonP?function(){return{}}:_ref$getToggleButtonP,inputProps=_ref.inputProps,suffix=_ref.suffix,showToggleButton=_ref.showToggleButton,inputRef=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);return(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()("woocommerce-experimental-select-control__combo-box-wrapper",{"woocommerce-experimental-select-control__combo-box-wrapper--disabled":inputProps.disabled}),onMouseDown:function maybeFocusInput(event){inputRef&&inputRef.current&&document.activeElement!==inputRef.current&&(event.preventDefault(),inputRef.current.focus(),event.stopPropagation())}},(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div",{className:"woocommerce-experimental-select-control__items-wrapper"},children,(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div",(0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_2__.A)({},comboBoxProps,{className:"woocommerce-experimental-select-control__combox-box"}),(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("input",(0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_2__.A)({},inputProps,{ref:function ref(node){inputRef.current=node,"function"==typeof inputProps.ref&&inputProps.ref(node)}})))),suffix&&(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)("div",{className:"woocommerce-experimental-select-control__suffix"},suffix),showToggleButton&&(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(ToggleButton,getToggleButtonProps()))};try{ComboBox.displayName="ComboBox",ComboBox.__docgenInfo={description:"",displayName:"ComboBox",props:{comboBoxProps:{defaultValue:null,description:"",name:"comboBoxProps",required:!0,type:{name:"DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>"}},inputProps:{defaultValue:null,description:"",name:"inputProps",required:!0,type:{name:"DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>"}},getToggleButtonProps:{defaultValue:{value:"() => ( {} )"},description:"",name:"getToggleButtonProps",required:!1,type:{name:'(() => Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">)'}},suffix:{defaultValue:null,description:"",name:"suffix",required:!1,type:{name:"Element | null"}},showToggleButton:{defaultValue:null,description:"",name:"showToggleButton",required:!1,type:{name:"boolean"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/combo-box.tsx#ComboBox"]={docgenInfo:ComboBox.__docgenInfo,name:"ComboBox",path:"../../packages/js/components/src/experimental-select-control/combo-box.tsx#ComboBox"})}catch(__react_docgen_typescript_loader_error){}},"../../packages/js/components/src/experimental-select-control/selected-items.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{K:()=>SelectedItems});var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/extends.js"),_wordpress_element__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),classnames__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.join.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.map.js"),__webpack_require__("../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js")),classnames__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_2__),_wordpress_html_entities__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/.pnpm/@wordpress+html-entities@3.6.1/node_modules/@wordpress/html-entities/build-module/index.js"),_tag__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../../packages/js/components/src/tag/index.tsx"),SelectedItems=(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_3__.forwardRef)((function PrivateSelectedItems(_ref,ref){var isReadOnly=_ref.isReadOnly,items=_ref.items,getItemLabel=_ref.getItemLabel,getItemValue=_ref.getItemValue,getSelectedItemProps=_ref.getSelectedItemProps,onRemove=_ref.onRemove,onBlur=_ref.onBlur,onSelectedItemsEnd=_ref.onSelectedItemsEnd,classes=classnames__WEBPACK_IMPORTED_MODULE_2___default()("woocommerce-experimental-select-control__selected-items",{"is-read-only":isReadOnly}),lastRemoveButtonRef=(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_3__.useRef)(null);if((0,_wordpress_element__WEBPACK_IMPORTED_MODULE_3__.useImperativeHandle)(ref,(function(){return function(){var _lastRemoveButtonRef$;return null===(_lastRemoveButtonRef$=lastRemoveButtonRef.current)||void 0===_lastRemoveButtonRef$?void 0:_lastRemoveButtonRef$.focus()}}),[]),isReadOnly)return(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_3__.createElement)("div",{className:classes},items.map((function(item){return(0,_wordpress_html_entities__WEBPACK_IMPORTED_MODULE_4__.S)(getItemLabel(item))})).join(", "));var focusSibling=function focusSibling(event){var _querySelector,selectedItem=event.target.closest(".woocommerce-experimental-select-control__selected-item"),sibling="ArrowLeft"===event.key||"Backspace"===event.key?null==selectedItem?void 0:selectedItem.previousSibling:null==selectedItem?void 0:selectedItem.nextSibling;return!!sibling&&(null===(_querySelector=sibling.querySelector(".woocommerce-tag__remove"))||void 0===_querySelector||_querySelector.focus(),!0)};return(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_3__.createElement)("div",{className:classes},items.map((function(item,index){return(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_3__.createElement)("div",(0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_5__.A)({key:"selected-item-".concat(index),className:"woocommerce-experimental-select-control__selected-item"},getSelectedItemProps({selectedItem:item,index}),{onMouseDown:function onMouseDown(event){event.preventDefault()},onClick:function onClick(event){event.preventDefault()},onKeyDown:function onKeyDown(event){"ArrowLeft"===event.key||"ArrowRight"===event.key?!focusSibling(event)&&"ArrowRight"===event.key&&onSelectedItemsEnd&&onSelectedItemsEnd():"ArrowUp"===event.key||"ArrowDown"===event.key?event.preventDefault():"Backspace"===event.key&&(onRemove(item),focusSibling(event))},onBlur}),(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_3__.createElement)(_tag__WEBPACK_IMPORTED_MODULE_6__.A,{id:getItemValue(item),remove:function remove(){return function(){return onRemove(item)}},label:getItemLabel(item),ref:index===items.length-1?lastRemoveButtonRef:void 0}))})))}));try{SelectedItems.displayName="SelectedItems",SelectedItems.__docgenInfo={description:"",displayName:"SelectedItems",props:{isReadOnly:{defaultValue:null,description:"",name:"isReadOnly",required:!0,type:{name:"boolean"}},items:{defaultValue:null,description:"",name:"items",required:!0,type:{name:"ItemType[]"}},getItemLabel:{defaultValue:null,description:"",name:"getItemLabel",required:!0,type:{name:"getItemLabelType<ItemType>"}},getItemValue:{defaultValue:null,description:"",name:"getItemValue",required:!0,type:{name:"getItemValueType<ItemType>"}},getSelectedItemProps:{defaultValue:null,description:"",name:"getSelectedItemProps",required:!0,type:{name:"({ selectedItem: any, index: any }: { selectedItem: any; index: any; }) => { [key: string]: string; }"}},onRemove:{defaultValue:null,description:"",name:"onRemove",required:!0,type:{name:"(item: ItemType) => void"}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"((event: FocusEvent<Element, Element>) => void)"}},onSelectedItemsEnd:{defaultValue:null,description:"",name:"onSelectedItemsEnd",required:!1,type:{name:"(() => void)"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"ForwardedRef<SelectedItemFocusHandle>"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/selected-items.tsx#SelectedItems"]={docgenInfo:SelectedItems.__docgenInfo,name:"SelectedItems",path:"../../packages/js/components/src/experimental-select-control/selected-items.tsx#SelectedItems"})}catch(__react_docgen_typescript_loader_error){}},"../../packages/js/components/src/experimental-select-control/suffix-icon.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{f:()=>SuffixIcon});var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),_wordpress_icons__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/icon/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),SuffixIcon=function SuffixIcon(_ref){var _ref$className=_ref.className,className=void 0===_ref$className?"":_ref$className,icon=_ref.icon;return(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.createElement)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("woocommerce-experimental-select-control__suffix-icon",className)},(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_1__.createElement)(_wordpress_icons__WEBPACK_IMPORTED_MODULE_2__.A,{icon,size:24}))};try{SuffixIcon.displayName="SuffixIcon",SuffixIcon.__docgenInfo={description:"",displayName:"SuffixIcon",props:{icon:{defaultValue:null,description:"",name:"icon",required:!0,type:{name:"Element"}},className:{defaultValue:{value:""},description:"",name:"className",required:!1,type:{name:"string"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-control/suffix-icon.tsx#SuffixIcon"]={docgenInfo:SuffixIcon.__docgenInfo,name:"SuffixIcon",path:"../../packages/js/components/src/experimental-select-control/suffix-icon.tsx#SuffixIcon"})}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){}},"../../packages/js/components/src/experimental-select-tree-control/stories/select-tree-control.story.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{MultipleSelectTree:()=>MultipleSelectTree,SingleSelectTree:()=>SingleSelectTree,SingleWithinModalUsingBodyDropdownPlacement:()=>SingleWithinModalUsingBodyDropdownPlacement,default:()=>select_tree_control_story});var select_tree_menu_namespaceObject={};__webpack_require__.r(select_tree_menu_namespaceObject),__webpack_require__.d(select_tree_menu_namespaceObject,{e:()=>SelectTreeMenu});var slicedToArray=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/slicedToArray.js"),toConsumableArray=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/toConsumableArray.js"),react=__webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),slot_fill=(__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.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.find.js"),__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.array.is-array.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.some.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/slot-fill/index.js")),build_module_button=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/button/index.js"),modal=__webpack_require__("../../node_modules/.pnpm/@wordpress+components@19.8.5_@types+react@17.0.71_react-dom@17.0.2_react@17.0.2__react-with-d_oli5xz3n7pc4ztqokra47llglu/node_modules/@wordpress/components/build-module/modal/index.js"),esm_extends=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/extends.js"),objectWithoutProperties=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),close_small=__webpack_require__("../../node_modules/.pnpm/@wordpress+icons@8.2.3/node_modules/@wordpress/icons/build-module/library/close-small.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"),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"),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"),text_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/text-control/index.js"),build_module=__webpack_require__("../../node_modules/.pnpm/@wordpress+html-entities@3.6.1/node_modules/@wordpress/html-entities/build-module/index.js"),i18n_build_module=__webpack_require__("../../node_modules/.pnpm/@wordpress+i18n@4.6.1/node_modules/@wordpress/i18n/build-module/index.js"),a11y_build_module=__webpack_require__("../../node_modules/.pnpm/@wordpress+a11y@3.6.1/node_modules/@wordpress/a11y/build-module/index.js"),linked_tree_utils=__webpack_require__("../../packages/js/components/src/experimental-tree-control/linked-tree-utils.ts"),selected_items=__webpack_require__("../../packages/js/components/src/experimental-select-control/selected-items.tsx"),combo_box=__webpack_require__("../../packages/js/components/src/experimental-select-control/combo-box.tsx"),suffix_icon=__webpack_require__("../../packages/js/components/src/experimental-select-control/suffix-icon.tsx"),popover=(__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.regexp.exec.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.regexp.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/@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")),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"),lodash=__webpack_require__("../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/lodash.js"),tree=__webpack_require__("../../packages/js/components/src/experimental-tree-control/tree.tsx"),_excluded=["isEventOutside","isLoading","isOpen","className","position","scrollIntoViewOnOpen","items","treeRef","onClose","onEscape","shouldShowCreateButton","onFirstItemLoop","onExpand"],SelectTreeMenu=function SelectTreeMenu(_ref){var _selectControlMenuRef3,isEventOutside=_ref.isEventOutside,isLoading=_ref.isLoading,isOpen=_ref.isOpen,className=_ref.className,_ref$position=_ref.position,position=void 0===_ref$position?"bottom center":_ref$position,_ref$scrollIntoViewOn=_ref.scrollIntoViewOnOpen,scrollIntoViewOnOpen=void 0!==_ref$scrollIntoViewOn&&_ref$scrollIntoViewOn,items=_ref.items,ref=_ref.treeRef,_ref$onClose=_ref.onClose,onClose=void 0===_ref$onClose?function(){}:_ref$onClose,onEscape=_ref.onEscape,shouldShowCreateButton=_ref.shouldShowCreateButton,onFirstItemLoop=_ref.onFirstItemLoop,onExpand=_ref.onExpand,props=(0,objectWithoutProperties.A)(_ref,_excluded),_useState=(0,react.useState)(),_useState2=(0,slicedToArray.A)(_useState,2),boundingRect=_useState2[0],setBoundingRect=_useState2[1],selectControlMenuRef=(0,react.useRef)(null);(0,react.useLayoutEffect)((function(){var _selectControlMenuRef,_selectControlMenuRef2;null!==(_selectControlMenuRef=selectControlMenuRef.current)&&void 0!==_selectControlMenuRef&&_selectControlMenuRef.parentElement&&(null===(_selectControlMenuRef2=selectControlMenuRef.current)||void 0===_selectControlMenuRef2?void 0:_selectControlMenuRef2.parentElement.clientWidth)>0&&setBoundingRect(selectControlMenuRef.current.parentElement.getBoundingClientRect())}),[selectControlMenuRef.current,null===(_selectControlMenuRef3=selectControlMenuRef.current)||void 0===_selectControlMenuRef3?void 0:_selectControlMenuRef3.clientWidth]),(0,react.useEffect)((function(){var _selectControlMenuRef4,_selectControlMenuRef5;isOpen&&scrollIntoViewOnOpen&&(null===(_selectControlMenuRef4=selectControlMenuRef.current)||void 0===_selectControlMenuRef4||null===(_selectControlMenuRef5=_selectControlMenuRef4.scrollIntoView)||void 0===_selectControlMenuRef5||_selectControlMenuRef5.call(_selectControlMenuRef4))}),[isOpen,scrollIntoViewOnOpen]);return(0,react.createElement)("div",{ref:selectControlMenuRef,className:"woocommerce-experimental-select-tree-control__menu"},(0,react.createElement)("div",null,(0,react.createElement)(popover.A,{focusOnMount:!1,inline:!0,className:classnames_default()("woocommerce-experimental-select-tree-control__popover-menu",className,{"is-open":isOpen,"has-results":items.length>0}),position,flip:!1,resize:!1,animate:!1,onFocusOutside:function onFocusOutside(event){isEventOutside(event)&&onClose()}},isOpen&&(0,react.createElement)("div",null,isLoading?(0,react.createElement)("div",{style:{width:null==boundingRect?void 0:boundingRect.width}},(0,react.createElement)(spinner.A,null)):(0,react.createElement)(tree.P,(0,esm_extends.A)({},props,{ref,items,onTreeBlur:onClose,onExpand,shouldItemBeExpanded:function shouldItemBeExpanded(item){var _item$children;return!(!props.createValue||null===(_item$children=item.children)||void 0===_item$children||!_item$children.length)&&item.children.some((function(child){return!!new RegExp((0,lodash.escapeRegExp)(props.createValue||""),"ig").test(child.data.label)||shouldItemBeExpanded(child)}))},shouldShowCreateButton,onFirstItemLoop,onEscape,style:{width:null==boundingRect?void 0:boundingRect.width}}))))))};try{SelectTreeMenu.displayName="SelectTreeMenu",SelectTreeMenu.__docgenInfo={description:"",displayName:"SelectTreeMenu",props:{isEventOutside:{defaultValue:null,description:"",name:"isEventOutside",required:!0,type:{name:"(event: FocusEvent<Element, Element>) => boolean"}},isOpen:{defaultValue:null,description:"",name:"isOpen",required:!0,type:{name:"boolean"}},isLoading:{defaultValue:null,description:"",name:"isLoading",required:!1,type:{name:"boolean"}},position:{defaultValue:{value:"bottom center"},description:"",name:"position",required:!1,type:{name:"enum",value:[{value:'"top left"'},{value:'"top right"'},{value:'"top center"'},{value:'"middle left"'},{value:'"middle right"'},{value:'"middle center"'},{value:'"bottom left"'},{value:'"bottom right"'},{value:'"bottom center"'}]}},scrollIntoViewOnOpen:{defaultValue:{value:"false"},description:"",name:"scrollIntoViewOnOpen",required:!1,type:{name:"boolean"}},highlightedIndex:{defaultValue:null,description:"",name:"highlightedIndex",required:!1,type:{name:"number"}},items:{defaultValue:null,description:"",name:"items",required:!0,type:{name:"LinkedTree[]"}},treeRef:{defaultValue:null,description:"",name:"treeRef",required:!1,type:{name:"ForwardedRef<HTMLOListElement>"}},onClose:{defaultValue:{value:"() => {}"},description:"",name:"onClose",required:!1,type:{name:"(() => void)"}},onSelect:{defaultValue:null,description:"When `multiple` is true and a child item is selected, all its\nancestors and its descendants are also selected. If it's false\nonly the clicked item is selected.\n@param value The selection",name:"onSelect",required:!1,type:{name:"((value: Item | Item[]) => void)"}},selected:{defaultValue:null,description:"It contains one item if `multiple` value is false or\na list of items if it is true.",name:"selected",required:!1,type:{name:"Item | Item[]"}},onExpand:{defaultValue:null,description:"",name:"onExpand",required:!1,type:{name:"((index: number, value: boolean) => void)"}},multiple:{defaultValue:null,description:"Whether the tree items are single or multiple selected.",name:"multiple",required:!1,type:{name:"boolean"}},shouldNotRecursivelySelect:{defaultValue:null,description:"In `multiple` mode, when this flag is also set, selecting children does\nnot select their parents and selecting parents does not select their children.",name:"shouldNotRecursivelySelect",required:!1,type:{name:"boolean"}},createValue:{defaultValue:null,description:"The value to be used for comparison to determine if 'create new' button should be shown.",name:"createValue",required:!1,type:{name:"string"}},onCreateNew:{defaultValue:null,description:"Called when the 'create new' button is clicked.",name:"onCreateNew",required:!1,type:{name:"(() => void)"}},shouldShowCreateButton:{defaultValue:null,description:"If passed, shows create button if return from callback is true",name:"shouldShowCreateButton",required:!1,type:{name:"((value?: string) => boolean)"}},isExpanded:{defaultValue:null,description:"",name:"isExpanded",required:!1,type:{name:"boolean"}},onRemove:{defaultValue:null,description:"When `multiple` is true and a child item is unselected, all its\nancestors (if no sibblings are selected) and its descendants\nare also unselected. If it's false only the clicked item is\nunselected.\n@param value The unselection",name:"onRemove",required:!1,type:{name:"((value: Item | Item[]) => void)"}},shouldItemBeHighlighted:{defaultValue:null,description:"It provides a way to determine whether the current rendering\nitem is highlighted or not from outside the tree.\n@example <Tree\n\tshouldItemBeHighlighted={ isFirstChild }\n/>\n@param item The current linked tree item, useful to\ntraverse the entire linked tree from this item.\n@see {@link LinkedTree }",name:"shouldItemBeHighlighted",required:!1,type:{name:"((item: LinkedTree) => boolean)"}},onTreeBlur:{defaultValue:null,description:"Called when the create button is clicked to help closing any related popover.",name:"onTreeBlur",required:!1,type:{name:"(() => void)"}},onFirstItemLoop:{defaultValue:null,description:"",name:"onFirstItemLoop",required:!1,type:{name:"((event: KeyboardEvent<HTMLDivElement>) => void)"}},onEscape:{defaultValue:null,description:"Called when the escape key is pressed.",name:"onEscape",required:!1,type:{name:"(() => void)"}},getItemLabel:{defaultValue:null,description:"It gives a way to render a different Element as the\ntree item label.\n@example <Tree\n\tgetItemLabel={ ( item ) => <span>${ item.data.label }</span> }\n/>\n@param item The current rendering tree item\n@see {@link LinkedTree }",name:"getItemLabel",required:!1,type:{name:"((item: LinkedTree) => Element)"}},shouldItemBeExpanded:{defaultValue:null,description:"Return if the tree item passed in should be expanded.\n@example <Tree\n\tshouldItemBeExpanded={\n\t\t( item ) => checkExpanded( item, filter )\n\t}\n/>\n@param item The tree item to determine if should be expanded.\n@see {@link LinkedTree }",name:"shouldItemBeExpanded",required:!1,type:{name:"((item: LinkedTree) => boolean)"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-tree-control/select-tree-menu.tsx#SelectTreeMenu"]={docgenInfo:SelectTreeMenu.__docgenInfo,name:"SelectTreeMenu",path:"../../packages/js/components/src/experimental-select-tree-control/select-tree-menu.tsx#SelectTreeMenu"})}catch(__react_docgen_typescript_loader_error){}__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.get-own-property-descriptor.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.get-own-property-descriptors.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.define-properties.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.define-property.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.sort.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.string.replace.js");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){_defineProperty(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 createOrderedChildren(children,order,props,injectProps){var _getChildrenAndProps=function getChildrenAndProps(children,order,props,injectProps){if("function"==typeof children)return{children:children(_objectSpread(_objectSpread({},props),{},{order},injectProps)),props:_objectSpread({order},injectProps)};if(isValidElement(children))return"function"==typeof(null==children?void 0:children.type)?{children,props:_objectSpread(_objectSpread({},props),{},{order},injectProps)}:{children,props:_objectSpread({order},injectProps)};throw Error("Invalid children type")}(children,order,props,injectProps),childrenToRender=_getChildrenAndProps.children,propsToRender=_getChildrenAndProps.props;return cloneElement(childrenToRender,propsToRender)}var sortFillsByOrder=function sortFillsByOrder(fills){var sortedFills=_toConsumableArray(fills).sort((function(a,b){return a[0].props.order-b[0].props.order}));return createElement(Fragment,null,sortedFills)},escapeHTML=function escapeHTML(string){return string.replace(/&/g,"&").replace(/>/g,">").replace(/</g,"<")};try{createOrderedChildren.displayName="createOrderedChildren",createOrderedChildren.__docgenInfo={description:"Ordered fill item.",displayName:"createOrderedChildren",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/utils.tsx#createOrderedChildren"]={docgenInfo:createOrderedChildren.__docgenInfo,name:"createOrderedChildren",path:"../../packages/js/components/src/utils.tsx#createOrderedChildren"})}catch(__react_docgen_typescript_loader_error){}try{sortFillsByOrder.displayName="sortFillsByOrder",sortFillsByOrder.__docgenInfo={description:"Sort fills by order for slot children.",displayName:"sortFillsByOrder",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/utils.tsx#sortFillsByOrder"]={docgenInfo:sortFillsByOrder.__docgenInfo,name:"sortFillsByOrder",path:"../../packages/js/components/src/utils.tsx#sortFillsByOrder"})}catch(__react_docgen_typescript_loader_error){}try{escapeHTML.displayName="escapeHTML",escapeHTML.__docgenInfo={description:"",displayName:"escapeHTML",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/utils.tsx#escapeHTML"]={docgenInfo:escapeHTML.__docgenInfo,name:"escapeHTML",path:"../../packages/js/components/src/utils.tsx#escapeHTML"})}catch(__react_docgen_typescript_loader_error){}var select_tree_excluded=["items","treeRef","isLoading","disabled","initialInputValue","onInputChange","shouldShowCreateButton","help","isClearingAllowed","onClear"],SelectTree=function SelectTree(_ref){var items=_ref.items,ref=_ref.treeRef,isLoading=_ref.isLoading,disabled=_ref.disabled,initialInputValue=_ref.initialInputValue,onInputChange=_ref.onInputChange,shouldShowCreateButton=_ref.shouldShowCreateButton,help=_ref.help,_ref$isClearingAllowe=_ref.isClearingAllowed,isClearingAllowed=void 0!==_ref$isClearingAllowe&&_ref$isClearingAllowe,_ref$onClear=_ref.onClear,onClear=void 0===_ref$onClear?function(){}:_ref$onClear,props=(0,objectWithoutProperties.A)(_ref,select_tree_excluded),_useState=(0,react.useState)([]),_useState2=(0,slicedToArray.A)(_useState,2),linkedTree=_useState2[0],setLinkedTree=_useState2[1],_useState3=(0,react.useState)(-1),_useState4=(0,slicedToArray.A)(_useState3,2),highlightedIndex=_useState4[0],setHighlightedIndex=_useState4[1];(0,react.useEffect)((function(){setLinkedTree((0,linked_tree_utils.YD)(items,props.createValue))}),[items.length]),(0,react.useEffect)((function(){return setHighlightedIndex(-1)}),[props.createValue]);var selectTreeInstanceId=(0,use_instance_id.A)(SelectTree,"woocommerce-experimental-select-tree-control__dropdown"),menuInstanceId=(0,use_instance_id.A)(SelectTree,"woocommerce-select-tree-control__menu"),selectedItemsFocusHandle=(0,react.useRef)(null);function isEventOutside(event){var _document$getElementB,_document$getElementB2,_event$relatedTarget,isInsideSelect=null===(_document$getElementB=document.getElementById(selectTreeInstanceId))||void 0===_document$getElementB?void 0:_document$getElementB.contains(event.relatedTarget),isInsidePopover=null===(_document$getElementB2=document.getElementById(menuInstanceId))||void 0===_document$getElementB2||null===(_document$getElementB2=_document$getElementB2.closest(".woocommerce-experimental-select-tree-control__popover-menu"))||void 0===_document$getElementB2?void 0:_document$getElementB2.contains(event.relatedTarget),isInRemoveTag=null===(_event$relatedTarget=event.relatedTarget)||void 0===_event$relatedTarget?void 0:_event$relatedTarget.classList.contains("woocommerce-tag__remove");return!isInsideSelect&&!isInRemoveTag&&!isInsidePopover}var recalculateInputValue=function recalculateInputValue(){onInputChange&&(!props.multiple&&props.selected?onInputChange(props.selected.label):onInputChange(""))},focusOnInput=function focusOnInput(){var _document$querySelect;null===(_document$querySelect=document.querySelector("#".concat(props.id,"-input")))||void 0===_document$querySelect||_document$querySelect.focus()},_useState5=(0,react.useState)(!1),_useState6=(0,slicedToArray.A)(_useState5,2),isFocused=_useState6[0],setIsFocused=_useState6[1],_useState7=(0,react.useState)(!1),_useState8=(0,slicedToArray.A)(_useState7,2),isOpen=_useState8[0],setIsOpen=_useState8[1],_useState9=(0,react.useState)(""),_useState10=(0,slicedToArray.A)(_useState9,2),inputValue=_useState10[0],setInputValue=_useState10[1],isReadOnly=!isOpen&&!isFocused;(0,react.useEffect)((function(){void 0!==initialInputValue&&isFocused&&setInputValue(initialInputValue)}),[isFocused]),(0,react.useEffect)((function(){var _document$querySelect2,_document$querySelect3;return null===(_document$querySelect2=document.querySelector(".experimental-woocommerce-tree-item--highlighted"))||void 0===_document$querySelect2||null===(_document$querySelect3=_document$querySelect2.scrollIntoView)||void 0===_document$querySelect3?void 0:_document$querySelect3.call(_document$querySelect2,{block:"nearest"})}),[highlightedIndex]);var placeholder="";Array.isArray(props.selected)?placeholder=0===props.selected.length?props.placeholder:"":props.selected&&(placeholder=props.placeholder),(0,react.useEffect)((function(){highlightedIndex!==items.length||null!=shouldShowCreateButton&&shouldShowCreateButton(props.createValue)||setHighlightedIndex(items.length-1)}),[props.createValue]);var inputProps={className:"woocommerce-experimental-select-control__input",id:"".concat(props.id,"-input"),"aria-autocomplete":"list","aria-activedescendant":highlightedIndex>=0?"woocommerce-experimental-tree-control__menu-item-".concat(highlightedIndex):void 0,"aria-controls":menuInstanceId,"aria-owns":menuInstanceId,role:"combobox",autoComplete:"off","aria-expanded":isOpen,"aria-haspopup":"tree",disabled,onFocus:function onFocus(event){var _props$selected;props.multiple&&(0,a11y_build_module.L)((0,i18n_build_module.__)("To select existing items, type its exact label and separate with commas or the Enter key.","woocommerce")),isOpen||setIsOpen(!0),setIsFocused(!0),Array.isArray(props.selected)&&null!==(_props$selected=props.selected)&&void 0!==_props$selected&&_props$selected.some((function(item){return item.label===event.target.value}))&&setInputValue("")},onBlur:function onBlur(event){event.preventDefault(),isEventOutside(event)&&(setIsOpen(!1),setIsFocused(!1),recalculateInputValue())},onKeyDown:function onKeyDown(event){if(setIsOpen(!0),"ArrowDown"===event.key)if(event.preventDefault(),highlightedIndex===items.length-1&&null!=shouldShowCreateButton&&shouldShowCreateButton(props.createValue))setHighlightedIndex(items.length);else{var visibleNodeIndex=(0,linked_tree_utils.p_)(linkedTree,Math.min(highlightedIndex+1,items.length),"down");void 0!==visibleNodeIndex&&setHighlightedIndex(visibleNodeIndex)}else if("ArrowUp"===event.key)if(event.preventDefault(),highlightedIndex>0){var _visibleNodeIndex=(0,linked_tree_utils.p_)(linkedTree,Math.max(highlightedIndex-1,-1),"up");void 0!==_visibleNodeIndex&&setHighlightedIndex(_visibleNodeIndex)}else setHighlightedIndex(-1);else if("Tab"===event.key||"Escape"===event.key)setIsOpen(!1),recalculateInputValue();else if("Enter"===event.key||","===event.key){var _props$onCreateNew;if(event.preventDefault(),highlightedIndex===items.length&&shouldShowCreateButton)null===(_props$onCreateNew=props.onCreateNew)||void 0===_props$onCreateNew||_props$onCreateNew.call(props);else if(-1!==highlightedIndex){var _props$onSelect,nodeData=(0,linked_tree_utils.g_)(linkedTree,highlightedIndex);if(!nodeData)return;if(props.multiple&&Array.isArray(props.selected))Boolean(props.selected.find((function(i){return i.label===nodeData.label})))?props.onRemove&&props.onRemove(nodeData):props.onSelect&&props.onSelect(nodeData),setInputValue("");else null==onInputChange||onInputChange(nodeData.label),null===(_props$onSelect=props.onSelect)||void 0===_props$onSelect||_props$onSelect.call(props,nodeData),setIsOpen(!1),setIsFocused(!1),focusOnInput()}else if(inputValue){var _props$selected2,_props$onSelect2,item=items.find((function(i){return i.label===escapeHTML(inputValue)})),isAlreadySelected=Array.isArray(props.selected)?Boolean(props.selected.find((function(i){return i.label===escapeHTML(inputValue)}))):(null===(_props$selected2=props.selected)||void 0===_props$selected2?void 0:_props$selected2.label)===escapeHTML(inputValue);if(item&&!isAlreadySelected)null===(_props$onSelect2=props.onSelect)||void 0===_props$onSelect2||_props$onSelect2.call(props,item),setInputValue(""),recalculateInputValue()}}else"Backspace"===event.key&&0===event.target.selectionStart&&0===event.target.selectionEnd&&selectedItemsFocusHandle.current?selectedItemsFocusHandle.current():"ArrowRight"===event.key?setLinkedTree((0,linked_tree_utils.TN)(linkedTree,highlightedIndex,!0)):"ArrowLeft"===event.key?setLinkedTree((0,linked_tree_utils.TN)(linkedTree,highlightedIndex,!1)):"Home"===event.key?(event.preventDefault(),setHighlightedIndex(0)):"End"===event.key&&(event.preventDefault(),setHighlightedIndex(items.length-1))},onChange:function onChange(event){onInputChange&&onInputChange(event.target.value),setInputValue(event.target.value)},placeholder,value:inputValue};return(0,react.createElement)("div",{id:selectTreeInstanceId,className:"woocommerce-experimental-select-tree-control__dropdown",tabIndex:-1},(0,react.createElement)("div",{className:classnames_default()("woocommerce-experimental-select-control",{"is-read-only":isReadOnly,"is-focused":isFocused,"is-multiple":props.multiple,"has-selected-items":Array.isArray(props.selected)&&props.selected.length})},(0,react.createElement)(base_control.Ay,{label:props.label,id:"".concat(props.id,"-input"),help:props.multiple&&!help?(0,i18n_build_module.__)("Separate with commas or the Enter key.","woocommerce"):help},(0,react.createElement)(react.Fragment,null,props.multiple?(0,react.createElement)(combo_box.a,{comboBoxProps:{className:"woocommerce-experimental-select-control__combo-box-wrapper"},inputProps,suffix:(0,react.createElement)("div",{className:"woocommerce-experimental-select-control__suffix-items"},isClearingAllowed&&isOpen&&(0,react.createElement)(build_module_button.A,{label:(0,i18n_build_module.__)("Remove all","woocommerce"),onClick:function handleClear(){isClearingAllowed&&onClear()}},(0,react.createElement)(suffix_icon.f,{className:"woocommerce-experimental-select-control__icon-clear",icon:close_small.A})),(0,react.createElement)(suffix_icon.f,{icon:isOpen?chevron_up.A:chevron_down.A}))},(0,react.createElement)(selected_items.K,{isReadOnly,ref:selectedItemsFocusHandle,items:Array.isArray(props.selected)?props.selected:[props.selected],getItemLabel:function getItemLabel(item){return(null==item?void 0:item.label)||""},getItemValue:function getItemValue(item){return(null==item?void 0:item.value)||""},onRemove:function onRemove(item){item&&!Array.isArray(item)&&props.onRemove&&props.onRemove(item)},onBlur:function onBlur(event){isEventOutside(event)&&(setIsOpen(!1),setIsFocused(!1))},onSelectedItemsEnd:focusOnInput,getSelectedItemProps:function getSelectedItemProps(){return{}}})):(0,react.createElement)(text_control.A,(0,esm_extends.A)({},inputProps,{value:(0,build_module.S)(props.createValue||""),onChange:function onChange(value){onInputChange&&onInputChange(value);var item=items.find((function(i){return i.label===escapeHTML(value)}));props.onSelect&&item&&props.onSelect(item),!value&&props.onRemove&&props.onRemove(props.selected)}})),(0,react.createElement)(SelectTreeMenu,(0,esm_extends.A)({},props,{onSelect:function onSelect(item){!props.multiple&&onInputChange&&(onInputChange(item.label),setIsOpen(!1),setIsFocused(!1),focusOnInput()),props.onSelect&&props.onSelect(item)},id:menuInstanceId,ref,isEventOutside,isLoading,isOpen,highlightedIndex,onExpand:function onExpand(index,value){setLinkedTree((0,linked_tree_utils.TN)(linkedTree,index,value))},items:linkedTree,shouldShowCreateButton,onEscape:function onEscape(){focusOnInput(),setIsOpen(!1)},onClose:function onClose(){setIsOpen(!1)},onFirstItemLoop:focusOnInput}))))))};try{SelectTree.displayName="SelectTree",SelectTree.__docgenInfo={description:"",displayName:"SelectTree",props:{id:{defaultValue:null,description:"",name:"id",required:!0,type:{name:"string"}},selected:{defaultValue:null,description:"It contains one item if `multiple` value is false or\na list of items if it is true.",name:"selected",required:!1,type:{name:"Item | Item[]"}},treeRef:{defaultValue:null,description:"",name:"treeRef",required:!1,type:{name:"ForwardedRef<HTMLOListElement>"}},isLoading:{defaultValue:null,description:"",name:"isLoading",required:!1,type:{name:"boolean"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"boolean"}},label:{defaultValue:null,description:"",name:"label",required:!0,type:{name:"string | Element"}},help:{defaultValue:null,description:"",name:"help",required:!1,type:{name:"string | Element"}},onInputChange:{defaultValue:null,description:"",name:"onInputChange",required:!1,type:{name:"((value: string) => void)"}},initialInputValue:{defaultValue:null,description:"",name:"initialInputValue",required:!1,type:{name:"string"}},isClearingAllowed:{defaultValue:{value:"false"},description:"",name:"isClearingAllowed",required:!1,type:{name:"boolean"}},onClear:{defaultValue:{value:"() => {}"},description:"",name:"onClear",required:!1,type:{name:"(() => void)"}},onSelect:{defaultValue:null,description:"When `multiple` is true and a child item is selected, all its\nancestors and its descendants are also selected. If it's false\nonly the clicked item is selected.\n@param value The selection",name:"onSelect",required:!1,type:{name:"((value: Item | Item[]) => void)"}},onExpand:{defaultValue:null,description:"",name:"onExpand",required:!1,type:{name:"((index: number, value: boolean) => void)"}},highlightedIndex:{defaultValue:null,description:"",name:"highlightedIndex",required:!1,type:{name:"number"}},multiple:{defaultValue:null,description:"Whether the tree items are single or multiple selected.",name:"multiple",required:!1,type:{name:"boolean"}},shouldNotRecursivelySelect:{defaultValue:null,description:"In `multiple` mode, when this flag is also set, selecting children does\nnot select their parents and selecting parents does not select their children.",name:"shouldNotRecursivelySelect",required:!1,type:{name:"boolean"}},createValue:{defaultValue:null,description:"The value to be used for comparison to determine if 'create new' button should be shown.",name:"createValue",required:!1,type:{name:"string"}},onCreateNew:{defaultValue:null,description:"Called when the 'create new' button is clicked.",name:"onCreateNew",required:!1,type:{name:"(() => void)"}},shouldShowCreateButton:{defaultValue:null,description:"If passed, shows create button if return from callback is true",name:"shouldShowCreateButton",required:!1,type:{name:"((value?: string) => boolean)"}},isExpanded:{defaultValue:null,description:"",name:"isExpanded",required:!1,type:{name:"boolean"}},onRemove:{defaultValue:null,description:"When `multiple` is true and a child item is unselected, all its\nancestors (if no sibblings are selected) and its descendants\nare also unselected. If it's false only the clicked item is\nunselected.\n@param value The unselection",name:"onRemove",required:!1,type:{name:"((value: Item | Item[]) => void)"}},shouldItemBeHighlighted:{defaultValue:null,description:"It provides a way to determine whether the current rendering\nitem is highlighted or not from outside the tree.\n@example <Tree\n\tshouldItemBeHighlighted={ isFirstChild }\n/>\n@param item The current linked tree item, useful to\ntraverse the entire linked tree from this item.\n@see {@link LinkedTree }",name:"shouldItemBeHighlighted",required:!1,type:{name:"((item: LinkedTree) => boolean)"}},onTreeBlur:{defaultValue:null,description:"Called when the create button is clicked to help closing any related popover.",name:"onTreeBlur",required:!1,type:{name:"(() => void)"}},onFirstItemLoop:{defaultValue:null,description:"",name:"onFirstItemLoop",required:!1,type:{name:"((event: KeyboardEvent<HTMLDivElement>) => void)"}},onEscape:{defaultValue:null,description:"Called when the escape key is pressed.",name:"onEscape",required:!1,type:{name:"(() => void)"}},getItemLabel:{defaultValue:null,description:"It gives a way to render a different Element as the\ntree item label.\n@example <Tree\n\tgetItemLabel={ ( item ) => <span>${ item.data.label }</span> }\n/>\n@param item The current rendering tree item\n@see {@link LinkedTree }",name:"getItemLabel",required:!1,type:{name:"((item: LinkedTree) => Element)"}},shouldItemBeExpanded:{defaultValue:null,description:"Return if the tree item passed in should be expanded.\n@example <Tree\n\tshouldItemBeExpanded={\n\t\t( item ) => checkExpanded( item, filter )\n\t}\n/>\n@param item The tree item to determine if should be expanded.\n@see {@link LinkedTree }",name:"shouldItemBeExpanded",required:!1,type:{name:"((item: LinkedTree) => boolean)"}},items:{defaultValue:null,description:"",name:"items",required:!0,type:{name:"Item[]"}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-tree-control/select-tree.tsx#SelectTree"]={docgenInfo:SelectTree.__docgenInfo,name:"SelectTree",path:"../../packages/js/components/src/experimental-select-tree-control/select-tree.tsx#SelectTree"})}catch(__react_docgen_typescript_loader_error){}var listItems=[{value:"1",label:"Technology"},{value:"1.1",label:"Notebooks",parent:"1"},{value:"1.2",label:"Phones",parent:"1"},{value:"1.2.1",label:"iPhone",parent:"1.2"},{value:"1.2.1.1",label:"iPhone 14 Pro",parent:"1.2.1"},{value:"1.2.1.2",label:"iPhone 14 Pro Max",parent:"1.2.1"},{value:"1.2.2",label:"Samsung",parent:"1.2"},{value:"1.2.2.1",label:"Samsung Galaxy 22 Plus",parent:"1.2.2"},{value:"1.2.2.2",label:"Samsung Galaxy 22 Ultra",parent:"1.2.2"},{value:"1.3",label:"Wearables",parent:"1"},{value:"2",label:"Hardware"},{value:"2.1",label:"CPU",parent:"2"},{value:"2.2",label:"GPU",parent:"2"},{value:"2.3",label:"Memory RAM",parent:"2"},{value:"3",label:"Other"}],filterItems=function filterItems(items,searchValue){for(var filteredItems=items.filter((function(e){return e.label.includes(searchValue)})),itemsToIterate=(0,toConsumableArray.A)(filteredItems),_loop=function _loop(){var element=itemsToIterate.pop();if(element){var parent=listItems.find((function(item){return item.value===element.parent}));parent&&!filteredItems.includes(parent)&&(filteredItems.push(parent),itemsToIterate.push(parent))}};itemsToIterate.length>0;)_loop();return filteredItems},MultipleSelectTree=function MultipleSelectTree(){var _React$useState=react.useState(""),_React$useState2=(0,slicedToArray.A)(_React$useState,2),value=_React$useState2[0],setValue=_React$useState2[1],_React$useState3=react.useState([]),_React$useState4=(0,slicedToArray.A)(_React$useState3,2),selected=_React$useState4[0],setSelected=_React$useState4[1],items=filterItems(listItems,value);return(0,react.createElement)(SelectTree,{id:"multiple-select-tree",label:"Multiple Select Tree",multiple:!0,items,selected,shouldNotRecursivelySelect:!0,shouldShowCreateButton:function shouldShowCreateButton(typedValue){return!value||-1===listItems.findIndex((function(item){return item.label===typedValue}))},createValue:value,onCreateNew:function onCreateNew(){return alert("create new called")},onInputChange:function onInputChange(a){return setValue(a||"")},onSelect:function onSelect(selectedItems){Array.isArray(selectedItems)&&setSelected([].concat((0,toConsumableArray.A)(selected),(0,toConsumableArray.A)(selectedItems)))},onRemove:function onRemove(removedItems){var newValues=Array.isArray(removedItems)?selected.filter((function(item){return!removedItems.some((function(_ref){var removedValue=_ref.value;return item.value===removedValue}))})):selected.filter((function(item){return item.value!==removedItems.value}));setSelected(newValues)}})},SingleWithinModalUsingBodyDropdownPlacement=function SingleWithinModalUsingBodyDropdownPlacement(){var _useState=(0,react.useState)(!0),_useState2=(0,slicedToArray.A)(_useState,2),isOpen=_useState2[0],setOpen=_useState2[1],_useState3=(0,react.useState)(""),_useState4=(0,slicedToArray.A)(_useState3,2),value=_useState4[0],setValue=_useState4[1],_useState5=(0,react.useState)([]),_useState6=(0,slicedToArray.A)(_useState5,2),selected=_useState6[0],setSelected=_useState6[1],items=filterItems(listItems,value);return(0,react.createElement)(slot_fill.Kq,null,"Selected: ",JSON.stringify(selected),(0,react.createElement)(build_module_button.A,{onClick:function onClick(){return setOpen(!0)}},"Show Dropdown in Modal"),isOpen&&(0,react.createElement)(modal.A,{title:"Dropdown Modal",onRequestClose:function onRequestClose(){return setOpen(!1)}},(0,react.createElement)(SelectTree,{id:"multiple-select-tree",label:"Multiple Select Tree",multiple:!0,items,selected,shouldNotRecursivelySelect:!0,shouldShowCreateButton:function shouldShowCreateButton(typedValue){return!value||-1===listItems.findIndex((function(item){return item.label===typedValue}))},createValue:value,onCreateNew:function onCreateNew(){return alert("create new called")},onInputChange:function onInputChange(a){return setValue(a||"")},onSelect:function onSelect(selectedItems){Array.isArray(selectedItems)&&setSelected([].concat((0,toConsumableArray.A)(selected),(0,toConsumableArray.A)(selectedItems)))},onRemove:function onRemove(removedItems){var newValues=Array.isArray(removedItems)?selected.filter((function(item){return!removedItems.some((function(_ref2){var removedValue=_ref2.value;return item.value===removedValue}))})):selected.filter((function(item){return item.value!==removedItems.value}));setSelected(newValues)}})),(0,react.createElement)(select_tree_menu_namespaceObject.SelectTreeMenuSlot,null))},SingleSelectTree=function SingleSelectTree(){var _React$useState5=react.useState(""),_React$useState6=(0,slicedToArray.A)(_React$useState5,2),value=_React$useState6[0],setValue=_React$useState6[1],_React$useState7=react.useState(),_React$useState8=(0,slicedToArray.A)(_React$useState7,2),selected=_React$useState8[0],setSelected=_React$useState8[1],items=filterItems(listItems,value);return(0,react.createElement)(SelectTree,{id:"single-select-tree",label:"Single Select Tree",items,selected,shouldNotRecursivelySelect:!0,shouldShowCreateButton:function shouldShowCreateButton(typedValue){return!value||-1===listItems.findIndex((function(item){return item.label===typedValue}))},createValue:value,onCreateNew:function onCreateNew(){return alert("create new called")},onInputChange:function onInputChange(a){return setValue(a||"")},onSelect:function onSelect(selectedItems){setSelected(selectedItems)},onRemove:function onRemove(){return setSelected(void 0)}})};const select_tree_control_story={title:"WooCommerce Admin/experimental/SelectTreeControl",component:SelectTree};MultipleSelectTree.parameters={...MultipleSelectTree.parameters,docs:{...MultipleSelectTree.parameters?.docs,source:{originalSource:"() => {\n const [value, setValue] = React.useState('');\n const [selected, setSelected] = React.useState<Item[]>([]);\n const items = filterItems(listItems, value);\n return <SelectTree id=\"multiple-select-tree\" label=\"Multiple Select Tree\" multiple items={items} selected={selected} shouldNotRecursivelySelect shouldShowCreateButton={typedValue => !value || listItems.findIndex(item => item.label === typedValue) === -1} createValue={value}\n // eslint-disable-next-line no-alert\n onCreateNew={() => alert('create new called')} onInputChange={a => setValue(a || '')} onSelect={selectedItems => {\n if (Array.isArray(selectedItems)) {\n setSelected([...selected, ...selectedItems]);\n }\n }} onRemove={removedItems => {\n const newValues = Array.isArray(removedItems) ? selected.filter(item => !removedItems.some(({\n value: removedValue\n }) => item.value === removedValue)) : selected.filter(item => item.value !== removedItems.value);\n setSelected(newValues);\n }} />;\n}",...MultipleSelectTree.parameters?.docs?.source}}},SingleWithinModalUsingBodyDropdownPlacement.parameters={...SingleWithinModalUsingBodyDropdownPlacement.parameters,docs:{...SingleWithinModalUsingBodyDropdownPlacement.parameters?.docs,source:{originalSource:"() => {\n const [isOpen, setOpen] = useState(true);\n const [value, setValue] = useState('');\n const [selected, setSelected] = useState<Item[]>([]);\n const items = filterItems(listItems, value);\n return <SlotFillProvider>\n Selected: {JSON.stringify(selected)}\n <Button onClick={() => setOpen(true)}>\n Show Dropdown in Modal\n </Button>\n {isOpen && <Modal title=\"Dropdown Modal\" onRequestClose={() => setOpen(false)}>\n <SelectTree id=\"multiple-select-tree\" label=\"Multiple Select Tree\" multiple items={items} selected={selected} shouldNotRecursivelySelect shouldShowCreateButton={typedValue => !value || listItems.findIndex(item => item.label === typedValue) === -1} createValue={value}\n // eslint-disable-next-line no-alert\n onCreateNew={() => alert('create new called')} onInputChange={a => setValue(a || '')} onSelect={selectedItems => {\n if (Array.isArray(selectedItems)) {\n setSelected([...selected, ...selectedItems]);\n }\n }} onRemove={removedItems => {\n const newValues = Array.isArray(removedItems) ? selected.filter(item => !removedItems.some(({\n value: removedValue\n }) => item.value === removedValue)) : selected.filter(item => item.value !== removedItems.value);\n setSelected(newValues);\n }} />\n </Modal>}\n <SelectTreeMenuSlot />\n </SlotFillProvider>;\n}",...SingleWithinModalUsingBodyDropdownPlacement.parameters?.docs?.source}}},SingleSelectTree.parameters={...SingleSelectTree.parameters,docs:{...SingleSelectTree.parameters?.docs,source:{originalSource:"() => {\n const [value, setValue] = React.useState('');\n const [selected, setSelected] = React.useState<Item | undefined>();\n const items = filterItems(listItems, value);\n return <SelectTree id=\"single-select-tree\" label=\"Single Select Tree\" items={items} selected={selected} shouldNotRecursivelySelect shouldShowCreateButton={typedValue => !value || listItems.findIndex(item => item.label === typedValue) === -1} createValue={value}\n // eslint-disable-next-line no-alert\n onCreateNew={() => alert('create new called')} onInputChange={a => setValue(a || '')} onSelect={selectedItems => {\n setSelected(selectedItems as Item);\n }} onRemove={() => setSelected(undefined)} />;\n}",...SingleSelectTree.parameters?.docs?.source}}};try{MultipleSelectTree.displayName="MultipleSelectTree",MultipleSelectTree.__docgenInfo={description:"",displayName:"MultipleSelectTree",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-tree-control/stories/select-tree-control.story.tsx#MultipleSelectTree"]={docgenInfo:MultipleSelectTree.__docgenInfo,name:"MultipleSelectTree",path:"../../packages/js/components/src/experimental-select-tree-control/stories/select-tree-control.story.tsx#MultipleSelectTree"})}catch(__react_docgen_typescript_loader_error){}try{SingleWithinModalUsingBodyDropdownPlacement.displayName="SingleWithinModalUsingBodyDropdownPlacement",SingleWithinModalUsingBodyDropdownPlacement.__docgenInfo={description:"",displayName:"SingleWithinModalUsingBodyDropdownPlacement",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-tree-control/stories/select-tree-control.story.tsx#SingleWithinModalUsingBodyDropdownPlacement"]={docgenInfo:SingleWithinModalUsingBodyDropdownPlacement.__docgenInfo,name:"SingleWithinModalUsingBodyDropdownPlacement",path:"../../packages/js/components/src/experimental-select-tree-control/stories/select-tree-control.story.tsx#SingleWithinModalUsingBodyDropdownPlacement"})}catch(__react_docgen_typescript_loader_error){}try{SingleSelectTree.displayName="SingleSelectTree",SingleSelectTree.__docgenInfo={description:"",displayName:"SingleSelectTree",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/experimental-select-tree-control/stories/select-tree-control.story.tsx#SingleSelectTree"]={docgenInfo:SingleSelectTree.__docgenInfo,name:"SingleSelectTree",path:"../../packages/js/components/src/experimental-select-tree-control/stories/select-tree-control.story.tsx#SingleSelectTree"})}catch(__react_docgen_typescript_loader_error){}}}]); |