@dropins/storefront-product-discovery 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*! Copyright 2025 Adobe
|
|
2
2
|
All Rights Reserved. */
|
|
3
|
-
import{jsx as a,jsxs as x}from"@dropins/tools/preact-jsx-runtime.js";import{useRef as O,useCallback as o,useEffect as $,useMemo as B,useState as
|
|
4
|
-
`),url:y}},[s]),h=l=>{H(l.sku,M)};return x("a",{className:"product-discovery--product-item",href:c(s),
|
|
3
|
+
import{jsx as a,jsxs as x}from"@dropins/tools/preact-jsx-runtime.js";import{useRef as O,useCallback as o,useEffect as $,useMemo as B,useState as b}from"@dropins/tools/preact-compat.js";import{Image as Q,Price as U,Button as z}from"@dropins/tools/components.js";import{VComponent as _,Slot as k}from"@dropins/tools/lib.js";import{events as S}from"@dropins/tools/event-bus.js";/* empty css */import{s as H,S as M}from"../chunks/acdlEvents.js";import{useText as V}from"@dropins/tools/i18n.js";const C=({productList:c,viewAllButton:s,onClose:i,...r})=>{const n=c&&c.length>0,u=O(null),t=o(l=>{u.current&&!u.current.contains(l.target)&&(i==null||i())},[i]),h=o(l=>{l.key==="Escape"&&(i==null||i())},[i]);return $(()=>{if(n)return document.addEventListener("mousedown",t),document.addEventListener("keydown",h),()=>{document.removeEventListener("mousedown",t),document.removeEventListener("keydown",h)}},[n,t,h]),n?a("div",{className:"product-discovery--search-bar-results",...r,children:a("div",{className:"product-discovery--search-bar-results__popover",ref:u,role:"region","aria-label":"Search results","aria-live":"polite",children:x("div",{className:"product-discovery--search-bar-results__outer-container",...r,children:[a("div",{className:"product-discovery--search-bar-results__grid",role:"list","aria-label":`${(c==null?void 0:c.length)||0} search results`,children:c==null?void 0:c.map((l,d)=>a("div",{role:"listitem",children:l},d))}),s&&a("div",{className:"product-discovery--search-bar-results__view-all-wrapper",children:a(_,{className:"product-discovery--search-bar-results__view-all-button",node:s})})]})})}):null},F=({productRouteSearch:c=t=>(t==null?void 0:t.url)||"",productItem:s,productImage:i,productName:r,productPrice:n,...u})=>{const t=B(()=>{const{name:l="",sku:d="",url:y=""}=s||{};return{tooltipText:[l,d&&`SKU: ${d}`].filter(Boolean).join(`
|
|
4
|
+
`),url:y}},[s]),h=l=>{H(l.sku,M)};return x("a",{className:"product-discovery--product-item",href:c(s),rel:"noopener noreferrer",title:t.tooltipText,onClick:()=>h(s),...u,children:[a("div",{className:"product-discovery--product-item__image",children:a(_,{node:i})}),x("div",{className:"product-discovery--product-item__details",children:[a(_,{node:r}),a(_,{node:n})]})]})},ee=({products:c=[],productRouteSearch:s=n=>(n==null?void 0:n.url)||"",routeSearch:i=()=>{},slots:r})=>{const[n,u]=b(c),[t,h]=b(""),[l,d]=b(c.length>0),y=V({viewAllButton:"Search.SearchInput.viewAllButton"}),N=o(({result:e=[],request:m={}})=>{const{phrase:v=""}=m;u(e),h(v),d(e.length>0&&v.length>0)},[]);$(()=>{const e=S.on("search-input/result",N);return()=>{e==null||e.off()}},[N]);const w=o(()=>{S.emit("search-input/result",{result:[],request:{phrase:""}}),d(!1)},[]),R=o(()=>{i&&i(t),S.emit("search/request",{phrase:t}),w()},[i,t,w]),E=o(e=>{var v,f,g,P;const m={loading:"lazy",src:((f=(v=e.images)==null?void 0:v[0])==null?void 0:f.url)||"",alt:((P=(g=e.images)==null?void 0:g[0])==null?void 0:P.label)||"",width:"165",height:"165"};return a(k,{name:"ProductImage",slot:r==null?void 0:r.ProductImage,context:{productItem:e,defaultImageProps:m},children:a(Q,{...m,"aria-label":e.sku})})},[r==null?void 0:r.ProductImage]),p=o(e=>a(k,{name:"ProductName",slot:r==null?void 0:r.ProductName,context:{productItem:e},children:(e==null?void 0:e.name)||""}),[r==null?void 0:r.ProductName]),A=o(e=>{var f,g,P,j,D;const{value:m,currency:v}=((g=(f=e==null?void 0:e.price)==null?void 0:f.final)==null?void 0:g.amount)||((D=(j=(P=e==null?void 0:e.priceRange)==null?void 0:P.minimum)==null?void 0:j.final)==null?void 0:D.amount)||{};return a(k,{name:"ProductPrice",slot:r==null?void 0:r.ProductPrice,context:{productItem:e},children:a(U,{amount:typeof m=="number"?m:void 0,currency:v})})},[r==null?void 0:r.ProductPrice]),T=o(e=>a(F,{productRouteSearch:s,productItem:e,productImage:E(e),productName:p(e),productPrice:A(e)}),[s,E,p,A]),q=B(()=>a(z,{variant:"tertiary",onClick:R,children:y.viewAllButton}),[y.viewAllButton,R]),K=B(()=>n==null?void 0:n.map(e=>T(e)),[n,T]);return!n.length||!l?null:a(C,{productList:K,viewAllButton:q,onClose:w})};export{ee as SearchBarResults,ee as default};
|
|
5
5
|
//# sourceMappingURL=SearchBarResults.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBarResults.js","sources":["/@dropins/storefront-product-discovery/src/components/SearchBarResults/SearchBarResults.tsx","/@dropins/storefront-product-discovery/src/components/ProductItem/ProductItem.tsx","/@dropins/storefront-product-discovery/src/containers/SearchBarResults/SearchBarResults.tsx"],"sourcesContent":["/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes, useEffect, useRef, useCallback } from 'preact/compat';\nimport { VComponent } from '@adobe-commerce/elsie/lib';\n\nimport '@/plp/components/SearchBarResults/SearchBarResults.css';\n\nexport interface SearchBarResultsProps extends HTMLAttributes<HTMLDivElement> {\n productList?: VNode[];\n viewAllButton?: VNode;\n onClose?: () => void;\n}\n\nexport const SearchBarResults: FunctionComponent<SearchBarResultsProps> = ({\n productList,\n viewAllButton,\n onClose,\n ...props\n}) => {\n const hasData = productList && productList.length > 0;\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {\n onClose?.();\n }\n },\n [onClose],\n );\n\n const handleEscapeKey = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onClose?.();\n }\n },\n [onClose],\n );\n\n useEffect(() => {\n if (!hasData) return;\n\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('keydown', handleEscapeKey);\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('keydown', handleEscapeKey);\n };\n }, [hasData, handleClickOutside, handleEscapeKey]);\n\n if (!hasData) return null;\n\n return (\n <div className=\"product-discovery--search-bar-results\" {...props}>\n <div\n className=\"product-discovery--search-bar-results__popover\"\n ref={popoverRef}\n role=\"region\"\n aria-label=\"Search results\"\n aria-live=\"polite\"\n >\n <div className=\"product-discovery--search-bar-results__outer-container\" {...props}>\n <div\n className=\"product-discovery--search-bar-results__grid\"\n role=\"list\"\n aria-label={`${productList?.length || 0} search results`}\n >\n {productList?.map((item, index) => (\n <div key={index} role=\"listitem\">\n {item}\n </div>\n ))}\n </div>\n {viewAllButton && (\n <div className=\"product-discovery--search-bar-results__view-all-wrapper\">\n <VComponent className=\"product-discovery--search-bar-results__view-all-button\" node={viewAllButton} />\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n","/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n ***************************************************************************/\n\nimport { FunctionComponent, VNode } from 'preact';\nimport { AnchorHTMLAttributes, useMemo } from 'preact/compat';\nimport { VComponent } from '@adobe-commerce/elsie/lib';\nimport { Product } from '@/plp/data/models/product';\n\nimport '@/plp/components/ProductItem/ProductItem.css';\nimport { SEARCH_UNIT_ID, searchProductClick } from '@/plp/utils/acdlEvents';\n\nexport interface ProductItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n productRouteSearch?: (product: Product) => string;\n productItem: Product;\n productImage?: VNode;\n productName?: VNode;\n productPrice?: VNode;\n}\n\nexport const ProductItem: FunctionComponent<ProductItemProps> = ({\n productRouteSearch = (product: Product) => product?.url || '',\n productItem,\n productImage,\n productName,\n productPrice,\n ...props\n}) => {\n const productData = useMemo(() => {\n const { name = '', sku = '', url = '' } = productItem || {};\n\n // create tooltip text depending on available data\n const tooltipText = [name, sku && `SKU: ${sku}`].filter(Boolean).join('\\n');\n\n return { tooltipText, url };\n }, [productItem]);\n\n const handleProductClick = (product: Product): void => {\n searchProductClick(product.sku, SEARCH_UNIT_ID);\n };\n\n return (\n <a\n className=\"product-discovery--product-item\"\n href={productRouteSearch(productItem)}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n title={productData.tooltipText}\n onClick={() => handleProductClick(productItem)}\n {...props}\n >\n <div className=\"product-discovery--product-item__image\">\n <VComponent node={productImage} />\n </div>\n <div className=\"product-discovery--product-item__details\">\n <VComponent node={productName} />\n <VComponent node={productPrice} />\n </div>\n </a>\n );\n};\n","/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { HTMLAttributes, useState, useEffect, useCallback, useMemo } from 'preact/compat';\nimport { Button, Image, ImageProps, Price } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\n\nimport { Product, SearchInputRequest, SearchInputResult } from '@/plp/data/models/product';\nimport { SearchVariables } from '@/plp/data/models/api';\nimport { SearchBarResults as SearchBarResultsComponent } from '@/plp/components/SearchBarResults';\nimport { ProductItem as ProductItemComponent } from '@/plp/components/ProductItem';\n\nexport interface SearchBarResultsProps extends HTMLAttributes<HTMLDivElement> {\n products?: Product[];\n productRouteSearch?: (product: Product) => string;\n routeSearch?: (searchQuery: string) => void;\n slots?: {\n ProductImage?: SlotProps;\n ProductName?: SlotProps;\n ProductPrice?: SlotProps;\n };\n}\n\nexport const SearchBarResults: Container<SearchBarResultsProps> = ({\n products = [],\n productRouteSearch = (product: Product) => product?.url || '',\n routeSearch = () => {},\n slots,\n}) => {\n const [searchResults, setSearchResults] = useState<Product[]>(products);\n const [searchQuery, setSearchQuery] = useState('');\n const [showResults, setShowResults] = useState(products.length > 0);\n\n const translations = useText({ viewAllButton: 'Search.SearchInput.viewAllButton' });\n\n const handleSearchInputResult = useCallback(\n ({ result = [], request = {} }: { result?: Product[]; request?: Pick<SearchVariables, 'phrase'> }) => {\n const { phrase = '' } = request;\n setSearchResults(result);\n setSearchQuery(phrase);\n setShowResults(result.length > 0 && phrase.length > 0);\n },\n [],\n );\n\n useEffect(() => {\n const searchInputEvent = events.on('search-input/result', handleSearchInputResult);\n\n return () => {\n searchInputEvent?.off();\n };\n }, [handleSearchInputResult]);\n\n const handleClose = useCallback(() => {\n // emit \"search-input/result\" event with empty payloads to clear anything listening for that\n events.emit('search-input/result', {\n result: [],\n request: { phrase: '' },\n } as SearchInputResult);\n\n setShowResults(false);\n }, []);\n\n const handleOnSearchAll = useCallback(() => {\n // if a `routeSearch` cb function is provided, use it to handle any navigation needed\n routeSearch && routeSearch(searchQuery);\n\n // emit \"search/request\" event to trigger listeners of the search event\n events.emit('search/request', { phrase: searchQuery } as SearchInputRequest);\n\n handleClose();\n }, [routeSearch, searchQuery, handleClose]);\n\n const getProductImage = useCallback(\n (productItem: Product) => {\n const defaultImageProps: ImageProps = {\n loading: 'lazy',\n src: productItem.images?.[0]?.url || '',\n alt: productItem.images?.[0]?.label || '',\n width: '165',\n height: '165',\n };\n return (\n <Slot name=\"ProductImage\" slot={slots?.ProductImage} context={{ productItem, defaultImageProps }}>\n <Image {...defaultImageProps} aria-label={productItem.sku} />\n </Slot>\n );\n },\n [slots?.ProductImage],\n );\n\n const getProductName = useCallback(\n (productItem: Product) => (\n <Slot name=\"ProductName\" slot={slots?.ProductName} context={{ productItem }}>\n {productItem?.name || ''}\n </Slot>\n ),\n [slots?.ProductName],\n );\n\n const getProductPrice = useCallback(\n (productItem: Product) => {\n const { value, currency } =\n productItem?.price?.final?.amount || productItem?.priceRange?.minimum?.final?.amount || {};\n return (\n <Slot name=\"ProductPrice\" slot={slots?.ProductPrice} context={{ productItem }}>\n <Price amount={typeof value === 'number' ? value : undefined} currency={currency} />\n </Slot>\n );\n },\n [slots?.ProductPrice],\n );\n\n const productContainer = useCallback(\n (productItem: Product) => (\n <ProductItemComponent\n productRouteSearch={productRouteSearch}\n productItem={productItem}\n productImage={getProductImage(productItem)}\n productName={getProductName(productItem)}\n productPrice={getProductPrice(productItem)}\n />\n ),\n [productRouteSearch, getProductImage, getProductName, getProductPrice],\n );\n\n const viewAllButton = useMemo(\n () => (\n <Button variant=\"tertiary\" onClick={handleOnSearchAll}>\n {translations.viewAllButton}\n </Button>\n ),\n [translations.viewAllButton, handleOnSearchAll],\n );\n\n const productList = useMemo(\n () => searchResults?.map((product) => productContainer(product)),\n [searchResults, productContainer],\n );\n\n if (!searchResults.length || !showResults) {\n return null;\n }\n\n return <SearchBarResultsComponent productList={productList} viewAllButton={viewAllButton} onClose={handleClose} />;\n};\n"],"names":["SearchBarResults","productList","viewAllButton","onClose","props","hasData","popoverRef","useRef","handleClickOutside","useCallback","event","handleEscapeKey","useEffect","jsx","jsxs","item","index","VComponent","ProductItem","productRouteSearch","product","productItem","productImage","productName","productPrice","productData","useMemo","name","sku","url","handleProductClick","searchProductClick","SEARCH_UNIT_ID","products","routeSearch","slots","searchResults","setSearchResults","useState","searchQuery","setSearchQuery","showResults","setShowResults","translations","useText","handleSearchInputResult","result","request","phrase","searchInputEvent","events","handleClose","handleOnSearchAll","getProductImage","defaultImageProps","_b","_a","_d","_c","Slot","Image","getProductName","getProductPrice","value","currency","_e","Price","productContainer","ProductItemComponent","Button","SearchBarResultsComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SearchBarResults.js","sources":["/@dropins/storefront-product-discovery/src/components/SearchBarResults/SearchBarResults.tsx","/@dropins/storefront-product-discovery/src/components/ProductItem/ProductItem.tsx","/@dropins/storefront-product-discovery/src/containers/SearchBarResults/SearchBarResults.tsx"],"sourcesContent":["/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { FunctionComponent, VNode } from 'preact';\nimport { HTMLAttributes, useEffect, useRef, useCallback } from 'preact/compat';\nimport { VComponent } from '@adobe-commerce/elsie/lib';\n\nimport '@/plp/components/SearchBarResults/SearchBarResults.css';\n\nexport interface SearchBarResultsProps extends HTMLAttributes<HTMLDivElement> {\n productList?: VNode[];\n viewAllButton?: VNode;\n onClose?: () => void;\n}\n\nexport const SearchBarResults: FunctionComponent<SearchBarResultsProps> = ({\n productList,\n viewAllButton,\n onClose,\n ...props\n}) => {\n const hasData = productList && productList.length > 0;\n const popoverRef = useRef<HTMLDivElement>(null);\n\n const handleClickOutside = useCallback(\n (event: MouseEvent) => {\n if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {\n onClose?.();\n }\n },\n [onClose],\n );\n\n const handleEscapeKey = useCallback(\n (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n onClose?.();\n }\n },\n [onClose],\n );\n\n useEffect(() => {\n if (!hasData) return;\n\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('keydown', handleEscapeKey);\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('keydown', handleEscapeKey);\n };\n }, [hasData, handleClickOutside, handleEscapeKey]);\n\n if (!hasData) return null;\n\n return (\n <div className=\"product-discovery--search-bar-results\" {...props}>\n <div\n className=\"product-discovery--search-bar-results__popover\"\n ref={popoverRef}\n role=\"region\"\n aria-label=\"Search results\"\n aria-live=\"polite\"\n >\n <div className=\"product-discovery--search-bar-results__outer-container\" {...props}>\n <div\n className=\"product-discovery--search-bar-results__grid\"\n role=\"list\"\n aria-label={`${productList?.length || 0} search results`}\n >\n {productList?.map((item, index) => (\n <div key={index} role=\"listitem\">\n {item}\n </div>\n ))}\n </div>\n {viewAllButton && (\n <div className=\"product-discovery--search-bar-results__view-all-wrapper\">\n <VComponent className=\"product-discovery--search-bar-results__view-all-button\" node={viewAllButton} />\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n","/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n ***************************************************************************/\n\nimport { FunctionComponent, VNode } from 'preact';\nimport { AnchorHTMLAttributes, useMemo } from 'preact/compat';\nimport { VComponent } from '@adobe-commerce/elsie/lib';\nimport { Product } from '@/plp/data/models/product';\n\nimport '@/plp/components/ProductItem/ProductItem.css';\nimport { SEARCH_UNIT_ID, searchProductClick } from '@/plp/utils/acdlEvents';\n\nexport interface ProductItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n productRouteSearch?: (product: Product) => string;\n productItem: Product;\n productImage?: VNode;\n productName?: VNode;\n productPrice?: VNode;\n}\n\nexport const ProductItem: FunctionComponent<ProductItemProps> = ({\n productRouteSearch = (product: Product) => product?.url || '',\n productItem,\n productImage,\n productName,\n productPrice,\n ...props\n}) => {\n const productData = useMemo(() => {\n const { name = '', sku = '', url = '' } = productItem || {};\n\n // create tooltip text depending on available data\n const tooltipText = [name, sku && `SKU: ${sku}`].filter(Boolean).join('\\n');\n\n return { tooltipText, url };\n }, [productItem]);\n\n const handleProductClick = (product: Product): void => {\n searchProductClick(product.sku, SEARCH_UNIT_ID);\n };\n\n return (\n <a\n className=\"product-discovery--product-item\"\n href={productRouteSearch(productItem)}\n rel=\"noopener noreferrer\"\n title={productData.tooltipText}\n onClick={() => handleProductClick(productItem)}\n {...props}\n >\n <div className=\"product-discovery--product-item__image\">\n <VComponent node={productImage} />\n </div>\n <div className=\"product-discovery--product-item__details\">\n <VComponent node={productName} />\n <VComponent node={productPrice} />\n </div>\n </a>\n );\n};\n","/********************************************************************\n * Copyright 2025 Adobe\n * All Rights Reserved.\n *\n * NOTICE: Adobe permits you to use, modify, and distribute this\n * file in accordance with the terms of the Adobe license agreement\n * accompanying it.\n *******************************************************************/\n\nimport { HTMLAttributes, useState, useEffect, useCallback, useMemo } from 'preact/compat';\nimport { Button, Image, ImageProps, Price } from '@adobe-commerce/elsie/components';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport { Container, Slot, SlotProps } from '@adobe-commerce/elsie/lib';\nimport { events } from '@adobe-commerce/event-bus';\n\nimport { Product, SearchInputRequest, SearchInputResult } from '@/plp/data/models/product';\nimport { SearchVariables } from '@/plp/data/models/api';\nimport { SearchBarResults as SearchBarResultsComponent } from '@/plp/components/SearchBarResults';\nimport { ProductItem as ProductItemComponent } from '@/plp/components/ProductItem';\n\nexport interface SearchBarResultsProps extends HTMLAttributes<HTMLDivElement> {\n products?: Product[];\n productRouteSearch?: (product: Product) => string;\n routeSearch?: (searchQuery: string) => void;\n slots?: {\n ProductImage?: SlotProps;\n ProductName?: SlotProps;\n ProductPrice?: SlotProps;\n };\n}\n\nexport const SearchBarResults: Container<SearchBarResultsProps> = ({\n products = [],\n productRouteSearch = (product: Product) => product?.url || '',\n routeSearch = () => {},\n slots,\n}) => {\n const [searchResults, setSearchResults] = useState<Product[]>(products);\n const [searchQuery, setSearchQuery] = useState('');\n const [showResults, setShowResults] = useState(products.length > 0);\n\n const translations = useText({ viewAllButton: 'Search.SearchInput.viewAllButton' });\n\n const handleSearchInputResult = useCallback(\n ({ result = [], request = {} }: { result?: Product[]; request?: Pick<SearchVariables, 'phrase'> }) => {\n const { phrase = '' } = request;\n setSearchResults(result);\n setSearchQuery(phrase);\n setShowResults(result.length > 0 && phrase.length > 0);\n },\n [],\n );\n\n useEffect(() => {\n const searchInputEvent = events.on('search-input/result', handleSearchInputResult);\n\n return () => {\n searchInputEvent?.off();\n };\n }, [handleSearchInputResult]);\n\n const handleClose = useCallback(() => {\n // emit \"search-input/result\" event with empty payloads to clear anything listening for that\n events.emit('search-input/result', {\n result: [],\n request: { phrase: '' },\n } as SearchInputResult);\n\n setShowResults(false);\n }, []);\n\n const handleOnSearchAll = useCallback(() => {\n // if a `routeSearch` cb function is provided, use it to handle any navigation needed\n routeSearch && routeSearch(searchQuery);\n\n // emit \"search/request\" event to trigger listeners of the search event\n events.emit('search/request', { phrase: searchQuery } as SearchInputRequest);\n\n handleClose();\n }, [routeSearch, searchQuery, handleClose]);\n\n const getProductImage = useCallback(\n (productItem: Product) => {\n const defaultImageProps: ImageProps = {\n loading: 'lazy',\n src: productItem.images?.[0]?.url || '',\n alt: productItem.images?.[0]?.label || '',\n width: '165',\n height: '165',\n };\n return (\n <Slot name=\"ProductImage\" slot={slots?.ProductImage} context={{ productItem, defaultImageProps }}>\n <Image {...defaultImageProps} aria-label={productItem.sku} />\n </Slot>\n );\n },\n [slots?.ProductImage],\n );\n\n const getProductName = useCallback(\n (productItem: Product) => (\n <Slot name=\"ProductName\" slot={slots?.ProductName} context={{ productItem }}>\n {productItem?.name || ''}\n </Slot>\n ),\n [slots?.ProductName],\n );\n\n const getProductPrice = useCallback(\n (productItem: Product) => {\n const { value, currency } =\n productItem?.price?.final?.amount || productItem?.priceRange?.minimum?.final?.amount || {};\n return (\n <Slot name=\"ProductPrice\" slot={slots?.ProductPrice} context={{ productItem }}>\n <Price amount={typeof value === 'number' ? value : undefined} currency={currency} />\n </Slot>\n );\n },\n [slots?.ProductPrice],\n );\n\n const productContainer = useCallback(\n (productItem: Product) => (\n <ProductItemComponent\n productRouteSearch={productRouteSearch}\n productItem={productItem}\n productImage={getProductImage(productItem)}\n productName={getProductName(productItem)}\n productPrice={getProductPrice(productItem)}\n />\n ),\n [productRouteSearch, getProductImage, getProductName, getProductPrice],\n );\n\n const viewAllButton = useMemo(\n () => (\n <Button variant=\"tertiary\" onClick={handleOnSearchAll}>\n {translations.viewAllButton}\n </Button>\n ),\n [translations.viewAllButton, handleOnSearchAll],\n );\n\n const productList = useMemo(\n () => searchResults?.map((product) => productContainer(product)),\n [searchResults, productContainer],\n );\n\n if (!searchResults.length || !showResults) {\n return null;\n }\n\n return <SearchBarResultsComponent productList={productList} viewAllButton={viewAllButton} onClose={handleClose} />;\n};\n"],"names":["SearchBarResults","productList","viewAllButton","onClose","props","hasData","popoverRef","useRef","handleClickOutside","useCallback","event","handleEscapeKey","useEffect","jsx","jsxs","item","index","VComponent","ProductItem","productRouteSearch","product","productItem","productImage","productName","productPrice","productData","useMemo","name","sku","url","handleProductClick","searchProductClick","SEARCH_UNIT_ID","products","routeSearch","slots","searchResults","setSearchResults","useState","searchQuery","setSearchQuery","showResults","setShowResults","translations","useText","handleSearchInputResult","result","request","phrase","searchInputEvent","events","handleClose","handleOnSearchAll","getProductImage","defaultImageProps","_b","_a","_d","_c","Slot","Image","getProductName","getProductPrice","value","currency","_e","Price","productContainer","ProductItemComponent","Button","SearchBarResultsComponent"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name": "@dropins/storefront-product-discovery", "version": "1.0.
|
|
1
|
+
{"name": "@dropins/storefront-product-discovery", "version": "1.0.1", "@dropins/tools": "^1.3.0-beta6", "license": "SEE LICENSE IN LICENSE.md"}
|