woocommerce/list-stories-list-story.220a6625.iframe.bundle.js

(self.webpackChunk_woocommerce_storybook=self.webpackChunk_woocommerce_storybook||[]).push([[7860,2491],{"../../packages/js/components/src/link/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,N:()=>Link});__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.keys.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.symbol.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.filter.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.to-string.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.get-own-property-descriptor.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.for-each.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/web.dom-collections.for-each.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.get-own-property-descriptors.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.define-properties.js"),__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.object.define-property.js");var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/extends.js"),_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/defineProperty.js"),_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("../../node_modules/.pnpm/@babel+runtime@7.23.5/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),react__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),lodash__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/lodash.js"),_woocommerce_navigation__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("../../packages/js/navigation/src/index.js"),_excluded=["href","children","type"];function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach((function(r){(0,_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_10__.A)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var Link=function Link(_ref){var href=_ref.href,children=_ref.children,_ref$type=_ref.type,type=void 0===_ref$type?"wc-admin":_ref$type,passProps=_objectSpread(_objectSpread({},(0,_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_14__.A)(_ref,_excluded)),{},{"data-link-type":type});return"wc-admin"===type&&(passProps.onClick=(0,lodash__WEBPACK_IMPORTED_MODULE_11__.partial)((function wcAdminLinkHandler(onClick,event){if(!(null!=event&&event.ctrlKey||null!=event&&event.metaKey||null!=event&&event.altKey||null!=event&&event.shiftKey)&&(null==event||event.preventDefault(),!1!==(!onClick||!event||onClick(event))&&(null==event?void 0:event.target)instanceof Element)){var _event$target$closest,closestEventTarget=null===(_event$target$closest=event.target.closest("a"))||void 0===_event$target$closest?void 0:_event$target$closest.getAttribute("href");closestEventTarget?(0,_woocommerce_navigation__WEBPACK_IMPORTED_MODULE_12__.JK)().push(closestEventTarget):console.error("@woocommerce/components/link is trying to push an undefined state into navigation stack")}}),passProps.onClick)),(0,react__WEBPACK_IMPORTED_MODULE_13__.createElement)("a",(0,_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_15__.A)({href},passProps),children)};const __WEBPACK_DEFAULT_EXPORT__=Link;try{Link.displayName="Link",Link.__docgenInfo={description:"Use `Link` to create a link to another resource. It accepts a type to automatically\ncreate wp-admin links, wc-admin links, and external links.",displayName:"Link",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/link/index.tsx#Link"]={docgenInfo:Link.__docgenInfo,name:"Link",path:"../../packages/js/components/src/link/index.tsx#Link"})}catch(__react_docgen_typescript_loader_error){}try{link.displayName="link",link.__docgenInfo={description:"Use `Link` to create a link to another resource. It accepts a type to automatically\ncreate wp-admin links, wc-admin links, and external links.",displayName:"link",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["../../packages/js/components/src/link/index.tsx#link"]={docgenInfo:link.__docgenInfo,name:"link",path:"../../packages/js/components/src/link/index.tsx#link"})}catch(__react_docgen_typescript_loader_error){}},"../../node_modules/.pnpm/memoizerific@1.11.3/node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="../../node_modules/.pnpm/memoizerific@1.11.3/node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext},"../../packages/js/components/src/list/stories/list.story.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{BeforeAndAfter:()=>BeforeAndAfter,CustomStyleAndTags:()=>CustomStyleAndTags,Default:()=>Default,default:()=>list_story});var react=__webpack_require__("../../node_modules/.pnpm/react@18.3.1/node_modules/react/index.js"),dist=(__webpack_require__("../../node_modules/.pnpm/core-js@3.34.0/node_modules/core-js/modules/es.array.concat.js"),__webpack_require__("../../node_modules/.pnpm/gridicons@3.4.2_react@17.0.2/node_modules/gridicons/dist/index.js")),addon_console_dist=__webpack_require__("../../node_modules/.pnpm/@storybook+addon-console@1.2.3_@storybook+addon-actions@7.6.19/node_modules/@storybook/addon-console/dist/index.js"),addon_docs_dist=__webpack_require__("../../node_modules/.pnpm/@storybook+addon-docs@7.6.19_@types+react-dom@17.0.25_@types+react@17.0.71_encoding@0.1.13_re_j5ticmbniq4dpeaytax4zse4vy/node_modules/@storybook/addon-docs/dist/index.mjs"),addon_links_dist=__webpack_require__("../../node_modules/.pnpm/@storybook+addon-links@7.6.19_react@17.0.2/node_modules/@storybook/addon-links/dist/index.mjs"),classnames=(__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_default=__webpack_require__.n(classnames),prop_types=__webpack_require__("../../node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),TransitionGroup=__webpack_require__("../../node_modules/.pnpm/react-transition-group@4.4.5_react-dom@17.0.2_react@17.0.2__react@17.0.2/node_modules/react-transition-group/esm/TransitionGroup.js"),CSSTransition=__webpack_require__("../../node_modules/.pnpm/react-transition-group@4.4.5_react-dom@17.0.2_react@17.0.2__react@17.0.2/node_modules/react-transition-group/esm/CSSTransition.js"),build_module=__webpack_require__("../../node_modules/.pnpm/@wordpress+deprecated@3.6.1/node_modules/@wordpress/deprecated/build-module/index.js"),keycodes_build_module=__webpack_require__("../../node_modules/.pnpm/@wordpress+keycodes@3.6.1/node_modules/@wordpress/keycodes/build-module/index.js"),src_link=__webpack_require__("../../packages/js/components/src/link/index.tsx");function getItemLinkType(item){var href=item.href,linkType=item.linkType;return linkType||(href?"external":null)}function ListItem(props){var item=props.item,before=item.before,title=item.title,after=item.after,content=item.content,onClick=item.onClick,href=item.href,target=item.target,listItemTag=item.listItemTag,hasAction="function"==typeof onClick||href,InnerTag=href?src_link.A:"div",innerTagProps={className:"woocommerce-list__item-inner",onClick:"function"==typeof onClick?onClick:null,"aria-disabled":hasAction?"false":null,tabIndex:hasAction?"0":null,role:hasAction?"menuitem":null,onKeyDown:function onKeyDown(e){return hasAction?function handleKeyDown(event,onClick){"function"==typeof onClick&&event.keyCode===keycodes_build_module.Fm&&onClick()}(e,onClick):null},target:href?target:null,type:getItemLinkType(item),href,"data-list-item-tag":listItemTag};return(0,react.createElement)(InnerTag,innerTagProps,before&&(0,react.createElement)("div",{className:"woocommerce-list__item-before"},before),(0,react.createElement)("div",{className:"woocommerce-list__item-text"},(0,react.createElement)("span",{className:"woocommerce-list__item-title"},title),content&&(0,react.createElement)("span",{className:"woocommerce-list__item-content"},content)),after&&(0,react.createElement)("div",{className:"woocommerce-list__item-after"},after))}ListItem.propTypes={item:prop_types_default().shape({after:prop_types_default().node,before:prop_types_default().node,className:prop_types_default().string,content:prop_types_default().oneOfType([prop_types_default().string,prop_types_default().node]),href:prop_types_default().string,onClick:prop_types_default().func,target:prop_types_default().string,title:prop_types_default().oneOfType([prop_types_default().string,prop_types_default().node])}).isRequired};const list_item=ListItem;function List(props){var className=props.className,items=props.items,children=props.children,listClassName=classnames_default()("woocommerce-list",className);return(0,build_module.A)("List with items prop is deprecated",{version:"9.0.0",hint:"See ExperimentalList / ExperimentalListItem for the new API that will replace this component in future versions."}),(0,react.createElement)(TransitionGroup.A,{component:"ul",className:listClassName,role:"menu"},items.map((function(item,index){var itemClasses=item.className,href=item.href,key=item.key,hasAction="function"==typeof item.onClick||href,itemClassName=classnames_default()("woocommerce-list__item",itemClasses,{"has-action":hasAction});return(0,react.createElement)(CSSTransition.A,{key:key||index,timeout:500,classNames:"woocommerce-list__item"},(0,react.createElement)("li",{className:itemClassName},children?children(item,index):(0,react.createElement)(list_item,{item})))})))}List.propTypes={className:prop_types_default().string,items:prop_types_default().arrayOf(prop_types_default().shape({after:prop_types_default().node,before:prop_types_default().node,className:prop_types_default().string,content:prop_types_default().oneOfType([prop_types_default().string,prop_types_default().node]),href:prop_types_default().string,onClick:prop_types_default().func,target:prop_types_default().string,title:prop_types_default().oneOfType([prop_types_default().string,prop_types_default().node]),key:prop_types_default().string}))};const list=List;function logItemClick(event){var a=event.currentTarget,itemDescription=a.href?"[".concat(a.textContent,"](").concat(a.href,") ").concat(a.dataset.linkType):"[".concat(a.textContent,"]"),itemTag=a.dataset.listItemTag?"'".concat(a.dataset.listItemTag,"'"):"not set",logMessage="[".concat(itemDescription," item clicked (tag: ").concat(itemTag,")");return console.log(logMessage),event.preventDefault(),!1}const list_story={title:"WooCommerce Admin/components/List",component:list,decorators:[function(storyFn,context){return(0,addon_console_dist.QW)()(storyFn)(context)},addon_links_dist.q9],parameters:{docs:{page:function page(){return(0,react.createElement)(react.Fragment,null,(0,react.createElement)(addon_docs_dist.hE,null),(0,react.createElement)(addon_docs_dist.Pd,null),(0,react.createElement)(addon_docs_dist.VY,{markdown:'[deprecated] and will be replaced by\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tdata-sb-kind="woocommerce-admin-experimental-list"\n\t\t\t\t\t\t\tdata-sb-story="default"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tExperimentalList\n\t\t\t\t\t\t</a>'}),(0,react.createElement)(addon_docs_dist.Tn,null),(0,react.createElement)(addon_docs_dist.uY,{story:addon_docs_dist.h1}),(0,react.createElement)(addon_docs_dist.om,null))}}}};var Default=function Default(){var listItems=[{title:"WooCommerce.com",href:"https://woocommerce.com",onClick:logItemClick},{title:"WordPress.org",href:"https://wordpress.org",onClick:logItemClick},{title:"A list item with no action"},{title:"Click me!",content:"An alert will be triggered.",onClick:function onClick(event){return window.alert("List item clicked"),logItemClick(event)}}];return(0,react.createElement)(list,{items:listItems})};Default.storyName="Default (deprecated)";var BeforeAndAfter=function BeforeAndAfter(){var listItems=[{before:(0,react.createElement)(dist.A,{icon:"cart"}),after:(0,react.createElement)(dist.A,{icon:"chevron-right"}),title:"WooCommerce.com",href:"https://woocommerce.com",onClick:logItemClick},{before:(0,react.createElement)(dist.A,{icon:"my-sites"}),after:(0,react.createElement)(dist.A,{icon:"chevron-right"}),title:"WordPress.org",href:"https://wordpress.org",onClick:logItemClick},{before:(0,react.createElement)(dist.A,{icon:"link-break"}),title:"A list item with no action",description:"List item description text"},{before:(0,react.createElement)(dist.A,{icon:"notice"}),title:"Click me!",content:"An alert will be triggered.",onClick:function onClick(event){return window.alert("List item clicked"),logItemClick(event)}}];return(0,react.createElement)(list,{items:listItems})};BeforeAndAfter.storyName="Before and after (deprecated)";var CustomStyleAndTags=function CustomStyleAndTags(){var listItems=[{before:(0,react.createElement)(dist.A,{icon:"cart"}),after:(0,react.createElement)(dist.A,{icon:"chevron-right"}),title:"WooCommerce.com",href:"https://woocommerce.com",onClick:logItemClick,listItemTag:"woo.com-link"},{before:(0,react.createElement)(dist.A,{icon:"my-sites"}),after:(0,react.createElement)(dist.A,{icon:"chevron-right"}),title:"WordPress.org",href:"https://wordpress.org",onClick:logItemClick,listItemTag:"wordpress.org-link"},{before:(0,react.createElement)(dist.A,{icon:"link-break"}),title:"A list item with no action"},{before:(0,react.createElement)(dist.A,{icon:"notice"}),title:"Click me!",content:"An alert will be triggered.",onClick:function onClick(event){return window.alert("List item clicked"),logItemClick(event)},listItemTag:"click-me"}];return(0,react.createElement)(list,{items:listItems,className:"storybook-custom-list"})};CustomStyleAndTags.storyName="Custom style and tags (deprecated)",Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:"() => {\n  const listItems = [{\n    title: 'WooCommerce.com',\n    href: 'https://woocommerce.com',\n    onClick: logItemClick\n  }, {\n    title: 'WordPress.org',\n    href: 'https://wordpress.org',\n    onClick: logItemClick\n  }, {\n    title: 'A list item with no action'\n  }, {\n    title: 'Click me!',\n    content: 'An alert will be triggered.',\n    onClick: event => {\n      // eslint-disable-next-line no-alert\n      window.alert('List item clicked');\n      return logItemClick(event);\n    }\n  }];\n  return <List items={listItems} />;\n}",...Default.parameters?.docs?.source}}},BeforeAndAfter.parameters={...BeforeAndAfter.parameters,docs:{...BeforeAndAfter.parameters?.docs,source:{originalSource:"() => {\n  const listItems = [{\n    before: <Gridicon icon=\"cart\" />,\n    after: <Gridicon icon=\"chevron-right\" />,\n    title: 'WooCommerce.com',\n    href: 'https://woocommerce.com',\n    onClick: logItemClick\n  }, {\n    before: <Gridicon icon=\"my-sites\" />,\n    after: <Gridicon icon=\"chevron-right\" />,\n    title: 'WordPress.org',\n    href: 'https://wordpress.org',\n    onClick: logItemClick\n  }, {\n    before: <Gridicon icon=\"link-break\" />,\n    title: 'A list item with no action',\n    description: 'List item description text'\n  }, {\n    before: <Gridicon icon=\"notice\" />,\n    title: 'Click me!',\n    content: 'An alert will be triggered.',\n    onClick: event => {\n      // eslint-disable-next-line no-alert\n      window.alert('List item clicked');\n      return logItemClick(event);\n    }\n  }];\n  return <List items={listItems} />;\n}",...BeforeAndAfter.parameters?.docs?.source}}},CustomStyleAndTags.parameters={...CustomStyleAndTags.parameters,docs:{...CustomStyleAndTags.parameters?.docs,source:{originalSource:"() => {\n  const listItems = [{\n    before: <Gridicon icon=\"cart\" />,\n    after: <Gridicon icon=\"chevron-right\" />,\n    title: 'WooCommerce.com',\n    href: 'https://woocommerce.com',\n    onClick: logItemClick,\n    listItemTag: 'woo.com-link'\n  }, {\n    before: <Gridicon icon=\"my-sites\" />,\n    after: <Gridicon icon=\"chevron-right\" />,\n    title: 'WordPress.org',\n    href: 'https://wordpress.org',\n    onClick: logItemClick,\n    listItemTag: 'wordpress.org-link'\n  }, {\n    before: <Gridicon icon=\"link-break\" />,\n    title: 'A list item with no action'\n  }, {\n    before: <Gridicon icon=\"notice\" />,\n    title: 'Click me!',\n    content: 'An alert will be triggered.',\n    onClick: event => {\n      // eslint-disable-next-line no-alert\n      window.alert('List item clicked');\n      return logItemClick(event);\n    },\n    listItemTag: 'click-me'\n  }];\n  return <List items={listItems} className=\"storybook-custom-list\" />;\n}",...CustomStyleAndTags.parameters?.docs?.source}}}}}]);