@askdialog/dialog-react 2.3.0 → 2.3.1

package/README.md

@@ -2,6 +2,23 @@
 
 React component library for Dialog AI-powered product assistance.
 
+## Table of contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Available Components](#available-components)
+  - [DialogProductBlock](#dialogproductblock)
+  - [DialogInput](#dialoginput)
+  - [Storefront search](#storefront-search)
+    - [useDialogSearch](#usedialogsearch)
+    - [DialogSearchBar](#dialogsearchbar)
+    - [DialogSearchResults](#dialogsearchresults)
+    - [DialogSearchPagination](#dialogsearchpagination)
+- [Theming](#theming)
+- [Development](#development)
+- [TypeScript](#typescript)
+- [React Version](#react-version)
+
 ## Installation
 
 ```bash
@@ -123,6 +140,7 @@ Creates one search controller per hook instance and disposes it on unmount.
 - `navigate` ((url, hit) => void, optional) - Router adapter called after selection attribution (e.g. `(url) => router.push(url)`). Omit it to let the cards' plain `<a href>` links navigate natively.
 - `debounceMs` (number, optional) - Keystroke debounce (default: 250)
 - `hitsPerPage` (number, optional) - Results per page (default: 12)
+- `locale` (string, optional) - Locale forwarded to the search request
 
 **Returns:** `{ controller, state }` — pass both to the components below. `state.status` is `idle` / `loading` / `success` / `empty` / `error`.
 
@@ -134,6 +152,7 @@ Search input: typing runs a debounced search, submitting (Enter) searches immedi
 - `controller` (SearchController) - From `useDialogSearch` (required)
 - `placeholder` (string, optional) - Input placeholder text
 - `autoFocus` (boolean, optional) - Focus the input on mount
+- `submitAriaLabel` (string, optional) - Accessible label of the submit button (default: `'Search'`)
 
 #### DialogSearchResults
 
@@ -142,6 +161,7 @@ Floating results panel overlaying the page content: portaled to `document.body`
 **Props:**
 - `controller` (SearchController) - From `useDialogSearch` (required)
 - `state` (SearchControllerState) - From `useDialogSearch` (required)
+- `locale` (string, optional) - BCP 47 locale used to format the card prices via `Intl.NumberFormat` (browser default when omitted)
 
 #### DialogSearchPagination
 
@@ -324,6 +344,3 @@ This package includes TypeScript type definitions. The types are automatically a
 
 This package requires React 19 or higher as a peer dependency.
 
-## License
-
-[Your License Here]

package/dist/dialog-react.js

@@ -203,7 +203,7 @@ const O = ({
   f(() => {
     A({
       method: "react",
-      version: "2.3.0"
+      version: "2.3.1"
     }), I("pdp-block");
   }, []);
   const h = S(
@@ -607,7 +607,7 @@ const O = ({
   }), f(() => {
     A({
       method: "react",
-      version: "2.3.0"
+      version: "2.3.1"
     });
     const i = r();
     return () => {

package/dist/dialog-react.umd.cjs

@@ -1 +1 @@
-(function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react"),require("@askdialog/dialog-sdk"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@askdialog/dialog-sdk","react-dom"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f["dialog-react"]={},f["react/jsx-runtime"],f.React,f.dialogSdk,f.ReactDOM))})(this,(function(f,t,d,p,E){"use strict";const L=({title:e="Your expert",description:s="A question about this product?"})=>t.jsxs("div",{className:"dialog-block-header-container",children:[t.jsx("div",{className:"dialog-block-title",children:e}),t.jsx("div",{className:"dialog-block-description",children:s})]}),A=({color:e="#181825"})=>t.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsxs("g",{clipPath:"url(#clip0_466_934)",children:[t.jsx("path",{d:"M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011 12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684 13.7084 7.85932 13.9296L9.16675 14.5833L7.85932 15.237C7.41684 15.4583 7.19559 15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232 16.3622 6.2917 16.5834 6.07046 17.0259L5.41675 18.3333L4.76303 17.0259C4.54179 16.5834 4.43117 16.3622 4.28339 16.1704C4.15225 16.0003 3.99974 15.8478 3.82962 15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418 13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225 13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675 10.8333Z",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("path",{d:"M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175 5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687 6.2828 15.7797 6.5178L18.3334 7.49999L15.7797 8.48217C15.1687 8.71718 14.8632 8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348 9.8631 13.7173 10.1686 13.4823 10.7796L12.5001 13.3333L11.5179 10.7796C11.2829 10.1686 11.1654 9.8631 10.9827 9.60612C10.8207 9.37836 10.6217 9.17937 10.3939 9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043 6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207 5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001 1.66666Z",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),t.jsx("defs",{children:t.jsx("clipPath",{id:"clip0_466_934",children:t.jsx("rect",{width:"20",height:"20",fill:"white"})})})]}),_=({client:e,questions:s,productId:o,productTitle:r,selectedVariantId:i})=>{const l=c=>{e.sendProductMessage({productId:o,productTitle:r,selectedVariantId:i,question:c,fromQuestionSuggestion:!0})};return t.jsx(t.Fragment,{children:s.map(c=>t.jsxs("button",{className:"dialog-block-suggestions-item",onClick:()=>l(c.question),children:[t.jsx(A,{color:e.theme.primaryColor}),t.jsx("span",{className:"dialog-block-suggestions-item-label",children:c.question})]},c.question))})},D=()=>t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),t.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),t.jsx("div",{className:"dialog-block-suggestions-skeleton-item"})]}),M=({client:e,questions:s,isLoading:o,productId:r,productTitle:i,selectedVariantId:l})=>t.jsx("div",{className:"dialog-block-suggestions-container",children:o||!s?t.jsx(D,{}):t.jsx(_,{client:e,questions:s,productId:r,productTitle:i,selectedVariantId:l})}),I=({color:e="#ffffff"})=>t.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),y=({client:e,placeholder:s="Ask anything...",productId:o,productTitle:r,selectedVariantId:i})=>{const l=d.useRef(null),[c,a]=d.useState(""),n=()=>{var u;(u=l.current)==null||u.focus()},g=()=>{const u=c;u.trim()&&(e.sendProductMessage({productId:o,productTitle:r,selectedVariantId:i,question:u,fromQuestionSuggestion:!0}),a(""))},b=u=>{u.key==="Enter"&&g()};return t.jsxs("div",{className:"dialog-input-wrapper",onClick:n,children:[t.jsx("input",{id:"dialog-ask-anything-input-ai-input",ref:l,value:c,onChange:u=>a(u.target.value),className:"dialog-ask-anything-input-ai-input",placeholder:s,onKeyDown:b}),t.jsx("button",{id:"send-message-button-ai-input",className:"dialog-input-submit",disabled:!c.trim(),onClick:g,children:t.jsx(I,{color:e.theme.ctaTextColor})})]})},m=e=>e.replace(/([A-Z])/g,"-$1").toLowerCase(),F=e=>{if(!e)return;const s=document.body;Object.keys(e).forEach(o=>{const r=o,i=m(o);if(e[r]!==void 0){if(typeof e[r]=="object"){Object.keys(e[r]).forEach(l=>{var a;const c=l;if(c!==void 0){const n=m(l),g=e[r];s.style.setProperty(`--dialog-theme-${i}-${n}`,(a=g[c])==null?void 0:a.toString())}});return}if(r==="ctaBorderType"){const l=e[r]==="rounded"?"24px":"0";s.style.setProperty(`--dialog-theme-${i}`,l);return}s.style.setProperty(`--dialog-theme-${i}`,e[r].toString())}})},O=({theme:e,children:s})=>(d.useEffect(()=>{e&&F(e)},[e]),t.jsx(t.Fragment,{children:s})),T=({client:e,productId:s,productTitle:o,selectedVariantId:r,enableInput:i=!0})=>{const[l,c]=d.useState(!0),[a,n]=d.useState(void 0);d.useEffect(()=>{p.registerDialogInstallation({method:"react",version:"2.3.0"}),p.addAuditCapability("pdp-block")},[]);const g=d.useMemo(()=>l?"":a==null?void 0:a.assistantName,[a,l]),b=d.useMemo(()=>l?"":a==null?void 0:a.description,[a,l]),u=d.useMemo(()=>l?"":a==null?void 0:a.inputPlaceholder,[a,l]),S=d.useMemo(()=>{var h;return p.resolveTextDirection((h=e.getLocalizationInformations())==null?void 0:h.languageCode)},[e]);return d.useEffect(()=>{let h=!0;return(async()=>{c(!0),n(void 0);try{const C=await e.getSuggestions(s);h&&n(C)}catch(C){console.error("error",C)}finally{h&&c(!1)}})(),()=>{h=!1}},[e,s]),t.jsx(O,{theme:e.theme,children:t.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",dir:S,children:[t.jsx(L,{title:g,description:b}),t.jsx(M,{client:e,questions:a==null?void 0:a.questions,isLoading:l,productId:s,productTitle:o,selectedVariantId:r}),i&&t.jsx(y,{client:e,placeholder:u,productId:s,productTitle:o,selectedVariantId:r})]})})},B=()=>t.jsx("svg",{width:16,height:16,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t.jsx("path",{d:"M8 13V3M8 3L3 8M8 3L13 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),q="M5.3217 0.588255C5.63241 -0.196084 6.36759 -0.196085 6.6783 0.588254C6.98901 1.37259 7.68193 2.82807 8.42693 3.57307C9.17193 4.31807 10.6274 5.01099 11.4117 5.3217C12.1961 5.63241 12.1961 6.36759 11.4117 6.6783C10.6274 6.98901 9.17193 7.68193 8.42693 8.42693C7.68193 9.17193 6.98901 10.6274 6.6783 11.4117C6.36759 12.1961 5.63241 12.1961 5.3217 11.4117C5.01099 10.6274 4.31807 9.17193 3.57307 8.42693C2.82808 7.68193 1.37259 6.98901 0.588255 6.6783C-0.196084 6.36759 -0.196085 5.63241 0.588254 5.3217C1.37259 5.01099 2.82807 4.31807 3.57307 3.57307C4.31807 2.82808 5.01099 1.37259 5.3217 0.588255Z",H=({color:e="currentColor"})=>t.jsx("svg",{width:16,height:16,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t.jsx("path",{d:q,fill:e})}),V=({controller:e,placeholder:s="Search products...",autoFocus:o=!1,submitAriaLabel:r="Search"})=>{const[i,l]=d.useState(""),c=a=>{a.preventDefault(),e.submit(i)};return t.jsxs("form",{className:"dialog-search-bar",role:"search",onSubmit:c,children:[t.jsxs("div",{className:"dialog-search-bar-field",children:[t.jsx("span",{className:"dialog-search-bar-icon",children:t.jsx(H,{})}),t.jsx("input",{type:"text",name:"dialog-search-query",className:"dialog-search-bar-input",value:i,"aria-label":s,placeholder:s,autoFocus:o,onChange:a=>{l(a.target.value),e.setQuery(a.target.value)}})]}),t.jsx("button",{type:"submit",className:"dialog-search-bar-submit","aria-label":r,children:t.jsx(B,{})})]})},w=({controller:e,state:s})=>{const o=s.response;return o===void 0||o.nbPages<=1?null:t.jsxs("nav",{"aria-label":"Search results pages",className:"dialog-search-pagination",children:[t.jsx("button",{type:"button",disabled:o.page===0,onClick:()=>e.setPage(o.page-1),children:"Previous"}),t.jsxs("span",{children:["Page ",o.page+1," / ",o.nbPages]}),t.jsx("button",{type:"button",disabled:o.page>=o.nbPages-1,onClick:()=>e.setPage(o.page+1),children:"Next"})]})},v=({amount:e,currencyCode:s},o)=>new Intl.NumberFormat(o,{style:"currency",currency:s}).format(Number(e)),N=({min:e,max:s},o)=>e.amount===s.amount?v(e,o):`${v(e,o)} – ${v(s,o)}`,x=(e,s)=>{if(e===void 0)return"";try{return N(e,s)}catch{return""}},K=(e,s)=>{const o=e.priceRange,r=e.compareAtPriceRange;if(o===void 0||r===void 0||Number(r.min.amount)<=Number(o.min.amount))return"";try{return N(r,s)}catch{return""}},$=e=>{try{const{protocol:s}=new URL(e,window.location.href);return s==="http:"||s==="https:"?e:void 0}catch{return}},P=({controller:e,hit:s,index:o,locale:r})=>{const i=d.useRef(null);d.useEffect(()=>{i.current!==null&&e.observeResult(i.current,o)},[e,s,o]);const l=h=>{const k=h.metaKey||h.ctrlKey||h.shiftKey||h.altKey;e.selectResult(o,{navigate:!k})&&h.preventDefault()},c=h=>{h.button===1&&e.selectResult(o,{navigate:!1})},{product:a}=s,n=a.title??a.id,g=x(a.priceRange,r),b=K(a,r),u=a.url===void 0?void 0:$(a.url),S=t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"dialog-search-card-image",children:a.imageUrl!==void 0&&t.jsx("img",{src:a.imageUrl,alt:n,loading:"lazy"})}),t.jsxs("div",{className:"dialog-search-card-info",children:[t.jsx("p",{className:"dialog-search-card-title",children:n}),g!==""&&t.jsxs("p",{className:"dialog-search-card-price",children:[g,b!==""&&t.jsxs("s",{className:"dialog-search-card-compare-at",children:[" ",b]})]})]})]});return t.jsx("li",{ref:i,className:"dialog-search-card",children:u===void 0?t.jsx("div",{className:"dialog-search-card-body",children:S}):t.jsx("a",{className:"dialog-search-card-body",href:u,onClick:l,onAuxClick:c,children:S})})},X=e=>{const s=d.useRef(null),[o,r]=d.useState(void 0),[i,l]=d.useState(0);return d.useLayoutEffect(()=>{if(!e)return;const c=()=>{const a=s.current;if(a===null)return;const n=a.previousElementSibling??a,{top:g,bottom:b,left:u,width:S}=n.getBoundingClientRect();l(window.innerHeight),r(h=>h!==void 0&&h.top===g&&h.bottom===b&&h.left===u&&h.width===S?h:{top:g,bottom:b,left:u,width:S})};return c(),window.addEventListener("scroll",c,!0),window.addEventListener("resize",c),()=>{window.removeEventListener("scroll",c,!0),window.removeEventListener("resize",c)}},[e]),{anchorRef:s,rect:o,viewportHeight:i}},j=(e,s)=>{const[o,r]=d.useState(!1),i=d.useRef(null),l=e.status!==p.SearchStatus.IDLE&&!o;return d.useEffect(()=>{r(!1)},[e.query]),d.useEffect(()=>{if(!l)return;const c=a=>{var S,h;const n=a.target;if(!(n instanceof Node))return;const g=(S=s.current)==null?void 0:S.previousElementSibling,b=((h=i.current)==null?void 0:h.contains(n))??!1,u=(g==null?void 0:g.contains(n))??!1;!b&&!u&&r(!0)};return document.addEventListener("pointerdown",c),()=>document.removeEventListener("pointerdown",c)},[l,s]),d.useEffect(()=>{var n;const c=(n=s.current)==null?void 0:n.previousElementSibling;if(c==null)return;const a=()=>r(!1);return c.addEventListener("focusin",a),()=>c.removeEventListener("focusin",a)},[s]),{isOpen:l,panelRef:i}},W=e=>e instanceof p.DialogSearchError?`Search failed (${e.status}${e.code?` ${e.code}`:""}): ${e.message}`:"Search failed: network error. Check your connection and try again.",Q=(e,s)=>e.bottom>0&&e.top<s,U=(e,s)=>{const o=s-e.bottom-8-16,r=e.top-8-16,i={left:e.left,width:e.width};return o<200&&r>o?{...i,bottom:s-e.top+8,maxHeight:Math.max(r,0)}:{...i,top:e.bottom+8,maxHeight:Math.max(o,0)}},z=(e,s,o)=>{const r=s.response;switch(s.status){case p.SearchStatus.LOADING:return t.jsxs("p",{role:"status",className:"dialog-search-status",children:["Searching “",s.query,"”…"]});case p.SearchStatus.ERROR:return t.jsxs("div",{className:"dialog-search-error",children:[t.jsx("p",{role:"alert",className:"dialog-search-status dialog-search-status-error",children:W(s.error)}),t.jsx("button",{type:"button",className:"dialog-search-retry",onClick:()=>e.retry(),children:"Retry"})]});case p.SearchStatus.EMPTY:return t.jsxs("p",{role:"status",className:"dialog-search-status",children:["No products match “",r==null?void 0:r.query,"”."]});case p.SearchStatus.SUCCESS:return r===void 0?null:t.jsxs(t.Fragment,{children:[t.jsxs("p",{role:"status",className:"dialog-search-status",children:[r.nbHits," result",r.nbHits>1?"s":""]}),t.jsx("ul",{className:"dialog-search-results",children:r.hits.map((i,l)=>t.jsx(P,{controller:e,hit:i,index:l,locale:o},i.id))}),t.jsx(w,{controller:e,state:s})]});default:return null}},G=({controller:e,state:s,locale:o})=>{const r=s.status!==p.SearchStatus.IDLE,{anchorRef:i,rect:l,viewportHeight:c}=X(r),{isOpen:a,panelRef:n}=j(s,i);return t.jsxs(t.Fragment,{children:[t.jsx("div",{ref:i}),a&&l!==void 0&&Q(l,c)&&E.createPortal(t.jsx("div",{ref:n,className:"dialog-search-panel",style:U(l,c),children:z(e,s,o)}),document.body)]})},Z={status:p.SearchStatus.IDLE,query:"",page:0},Y=e=>{const s=d.useRef(e);s.current=e;const o=d.useRef(void 0),r=d.useCallback(()=>{if(o.current===void 0){const{client:n,surface:g="search_page",...b}=s.current;o.current=p.createSearchController({search:(u,S)=>n.search(u,S),analytics:{surface:g,trackViewSearchResults:u=>n.trackViewSearchResults(u),trackSelectSearchResult:u=>n.trackSelectSearchResult(u)},...b})}return o.current},[]),i=d.useRef(void 0);i.current??(i.current={setQuery:n=>r().setQuery(n),submit:n=>r().submit(n),setPage:n=>r().setPage(n),retry:()=>r().retry(),observeResult:(n,g)=>r().observeResult(n,g),selectResult:(n,g)=>r().selectResult(n,g),subscribe:n=>r().subscribe(n),getState:()=>r().getState(),dispose:()=>{var n;(n=o.current)==null||n.dispose(),o.current=void 0}}),d.useEffect(()=>{p.registerDialogInstallation({method:"react",version:"2.3.0"});const n=r();return()=>{n.dispose(),o.current===n&&(o.current=void 0)}},[r]);const l=d.useCallback(n=>r().subscribe(n),[r]),c=d.useCallback(()=>r().getState(),[r]),a=d.useSyncExternalStore(l,c,()=>Z);return{controller:i.current,state:a}};f.DialogInput=y,f.DialogProductBlock=T,f.DialogSearchBar=V,f.DialogSearchPagination=w,f.DialogSearchProductCard=P,f.DialogSearchResults=G,f.useDialogSearch=Y,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
+(function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react/jsx-runtime"),require("react"),require("@askdialog/dialog-sdk"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@askdialog/dialog-sdk","react-dom"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f["dialog-react"]={},f["react/jsx-runtime"],f.React,f.dialogSdk,f.ReactDOM))})(this,(function(f,t,d,p,E){"use strict";const L=({title:e="Your expert",description:s="A question about this product?"})=>t.jsxs("div",{className:"dialog-block-header-container",children:[t.jsx("div",{className:"dialog-block-title",children:e}),t.jsx("div",{className:"dialog-block-description",children:s})]}),A=({color:e="#181825"})=>t.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsxs("g",{clipPath:"url(#clip0_466_934)",children:[t.jsx("path",{d:"M5.41675 10.8333L6.07046 12.1408C6.2917 12.5832 6.40232 12.8045 6.55011 12.9962C6.68124 13.1663 6.83375 13.3188 7.00388 13.45C7.19559 13.5977 7.41684 13.7084 7.85932 13.9296L9.16675 14.5833L7.85932 15.237C7.41684 15.4583 7.19559 15.5689 7.00388 15.7167C6.83375 15.8478 6.68124 16.0003 6.55011 16.1704C6.40232 16.3622 6.2917 16.5834 6.07046 17.0259L5.41675 18.3333L4.76303 17.0259C4.54179 16.5834 4.43117 16.3622 4.28339 16.1704C4.15225 16.0003 3.99974 15.8478 3.82962 15.7167C3.6379 15.5689 3.41666 15.4583 2.97418 15.237L1.66675 14.5833L2.97418 13.9296C3.41666 13.7084 3.6379 13.5977 3.82962 13.45C3.99974 13.3188 4.15225 13.1663 4.28339 12.9962C4.43117 12.8045 4.54179 12.5832 4.76303 12.1408L5.41675 10.8333Z",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),t.jsx("path",{d:"M12.5001 1.66666L13.4823 4.22034C13.7173 4.83136 13.8348 5.13688 14.0175 5.39386C14.1795 5.62162 14.3785 5.82061 14.6062 5.98256C14.8632 6.16529 15.1687 6.2828 15.7797 6.5178L18.3334 7.49999L15.7797 8.48217C15.1687 8.71718 14.8632 8.83469 14.6062 9.01742C14.3785 9.17937 14.1795 9.37836 14.0175 9.60612C13.8348 9.8631 13.7173 10.1686 13.4823 10.7796L12.5001 13.3333L11.5179 10.7796C11.2829 10.1686 11.1654 9.8631 10.9827 9.60612C10.8207 9.37836 10.6217 9.17937 10.3939 9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043 6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207 5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001 1.66666Z",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),t.jsx("defs",{children:t.jsx("clipPath",{id:"clip0_466_934",children:t.jsx("rect",{width:"20",height:"20",fill:"white"})})})]}),_=({client:e,questions:s,productId:o,productTitle:r,selectedVariantId:i})=>{const l=c=>{e.sendProductMessage({productId:o,productTitle:r,selectedVariantId:i,question:c,fromQuestionSuggestion:!0})};return t.jsx(t.Fragment,{children:s.map(c=>t.jsxs("button",{className:"dialog-block-suggestions-item",onClick:()=>l(c.question),children:[t.jsx(A,{color:e.theme.primaryColor}),t.jsx("span",{className:"dialog-block-suggestions-item-label",children:c.question})]},c.question))})},D=()=>t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),t.jsx("div",{className:"dialog-block-suggestions-skeleton-item"}),t.jsx("div",{className:"dialog-block-suggestions-skeleton-item"})]}),M=({client:e,questions:s,isLoading:o,productId:r,productTitle:i,selectedVariantId:l})=>t.jsx("div",{className:"dialog-block-suggestions-container",children:o||!s?t.jsx(D,{}):t.jsx(_,{client:e,questions:s,productId:r,productTitle:i,selectedVariantId:l})}),I=({color:e="#ffffff"})=>t.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:e,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),y=({client:e,placeholder:s="Ask anything...",productId:o,productTitle:r,selectedVariantId:i})=>{const l=d.useRef(null),[c,a]=d.useState(""),n=()=>{var u;(u=l.current)==null||u.focus()},g=()=>{const u=c;u.trim()&&(e.sendProductMessage({productId:o,productTitle:r,selectedVariantId:i,question:u,fromQuestionSuggestion:!0}),a(""))},b=u=>{u.key==="Enter"&&g()};return t.jsxs("div",{className:"dialog-input-wrapper",onClick:n,children:[t.jsx("input",{id:"dialog-ask-anything-input-ai-input",ref:l,value:c,onChange:u=>a(u.target.value),className:"dialog-ask-anything-input-ai-input",placeholder:s,onKeyDown:b}),t.jsx("button",{id:"send-message-button-ai-input",className:"dialog-input-submit",disabled:!c.trim(),onClick:g,children:t.jsx(I,{color:e.theme.ctaTextColor})})]})},m=e=>e.replace(/([A-Z])/g,"-$1").toLowerCase(),F=e=>{if(!e)return;const s=document.body;Object.keys(e).forEach(o=>{const r=o,i=m(o);if(e[r]!==void 0){if(typeof e[r]=="object"){Object.keys(e[r]).forEach(l=>{var a;const c=l;if(c!==void 0){const n=m(l),g=e[r];s.style.setProperty(`--dialog-theme-${i}-${n}`,(a=g[c])==null?void 0:a.toString())}});return}if(r==="ctaBorderType"){const l=e[r]==="rounded"?"24px":"0";s.style.setProperty(`--dialog-theme-${i}`,l);return}s.style.setProperty(`--dialog-theme-${i}`,e[r].toString())}})},O=({theme:e,children:s})=>(d.useEffect(()=>{e&&F(e)},[e]),t.jsx(t.Fragment,{children:s})),T=({client:e,productId:s,productTitle:o,selectedVariantId:r,enableInput:i=!0})=>{const[l,c]=d.useState(!0),[a,n]=d.useState(void 0);d.useEffect(()=>{p.registerDialogInstallation({method:"react",version:"2.3.1"}),p.addAuditCapability("pdp-block")},[]);const g=d.useMemo(()=>l?"":a==null?void 0:a.assistantName,[a,l]),b=d.useMemo(()=>l?"":a==null?void 0:a.description,[a,l]),u=d.useMemo(()=>l?"":a==null?void 0:a.inputPlaceholder,[a,l]),S=d.useMemo(()=>{var h;return p.resolveTextDirection((h=e.getLocalizationInformations())==null?void 0:h.languageCode)},[e]);return d.useEffect(()=>{let h=!0;return(async()=>{c(!0),n(void 0);try{const C=await e.getSuggestions(s);h&&n(C)}catch(C){console.error("error",C)}finally{h&&c(!1)}})(),()=>{h=!1}},[e,s]),t.jsx(O,{theme:e.theme,children:t.jsxs("div",{id:"dialog-instant",className:"dialog-block-container",dir:S,children:[t.jsx(L,{title:g,description:b}),t.jsx(M,{client:e,questions:a==null?void 0:a.questions,isLoading:l,productId:s,productTitle:o,selectedVariantId:r}),i&&t.jsx(y,{client:e,placeholder:u,productId:s,productTitle:o,selectedVariantId:r})]})})},B=()=>t.jsx("svg",{width:16,height:16,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t.jsx("path",{d:"M8 13V3M8 3L3 8M8 3L13 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),q="M5.3217 0.588255C5.63241 -0.196084 6.36759 -0.196085 6.6783 0.588254C6.98901 1.37259 7.68193 2.82807 8.42693 3.57307C9.17193 4.31807 10.6274 5.01099 11.4117 5.3217C12.1961 5.63241 12.1961 6.36759 11.4117 6.6783C10.6274 6.98901 9.17193 7.68193 8.42693 8.42693C7.68193 9.17193 6.98901 10.6274 6.6783 11.4117C6.36759 12.1961 5.63241 12.1961 5.3217 11.4117C5.01099 10.6274 4.31807 9.17193 3.57307 8.42693C2.82808 7.68193 1.37259 6.98901 0.588255 6.6783C-0.196084 6.36759 -0.196085 5.63241 0.588254 5.3217C1.37259 5.01099 2.82807 4.31807 3.57307 3.57307C4.31807 2.82808 5.01099 1.37259 5.3217 0.588255Z",H=({color:e="currentColor"})=>t.jsx("svg",{width:16,height:16,viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:t.jsx("path",{d:q,fill:e})}),V=({controller:e,placeholder:s="Search products...",autoFocus:o=!1,submitAriaLabel:r="Search"})=>{const[i,l]=d.useState(""),c=a=>{a.preventDefault(),e.submit(i)};return t.jsxs("form",{className:"dialog-search-bar",role:"search",onSubmit:c,children:[t.jsxs("div",{className:"dialog-search-bar-field",children:[t.jsx("span",{className:"dialog-search-bar-icon",children:t.jsx(H,{})}),t.jsx("input",{type:"text",name:"dialog-search-query",className:"dialog-search-bar-input",value:i,"aria-label":s,placeholder:s,autoFocus:o,onChange:a=>{l(a.target.value),e.setQuery(a.target.value)}})]}),t.jsx("button",{type:"submit",className:"dialog-search-bar-submit","aria-label":r,children:t.jsx(B,{})})]})},w=({controller:e,state:s})=>{const o=s.response;return o===void 0||o.nbPages<=1?null:t.jsxs("nav",{"aria-label":"Search results pages",className:"dialog-search-pagination",children:[t.jsx("button",{type:"button",disabled:o.page===0,onClick:()=>e.setPage(o.page-1),children:"Previous"}),t.jsxs("span",{children:["Page ",o.page+1," / ",o.nbPages]}),t.jsx("button",{type:"button",disabled:o.page>=o.nbPages-1,onClick:()=>e.setPage(o.page+1),children:"Next"})]})},v=({amount:e,currencyCode:s},o)=>new Intl.NumberFormat(o,{style:"currency",currency:s}).format(Number(e)),N=({min:e,max:s},o)=>e.amount===s.amount?v(e,o):`${v(e,o)} – ${v(s,o)}`,x=(e,s)=>{if(e===void 0)return"";try{return N(e,s)}catch{return""}},K=(e,s)=>{const o=e.priceRange,r=e.compareAtPriceRange;if(o===void 0||r===void 0||Number(r.min.amount)<=Number(o.min.amount))return"";try{return N(r,s)}catch{return""}},$=e=>{try{const{protocol:s}=new URL(e,window.location.href);return s==="http:"||s==="https:"?e:void 0}catch{return}},P=({controller:e,hit:s,index:o,locale:r})=>{const i=d.useRef(null);d.useEffect(()=>{i.current!==null&&e.observeResult(i.current,o)},[e,s,o]);const l=h=>{const k=h.metaKey||h.ctrlKey||h.shiftKey||h.altKey;e.selectResult(o,{navigate:!k})&&h.preventDefault()},c=h=>{h.button===1&&e.selectResult(o,{navigate:!1})},{product:a}=s,n=a.title??a.id,g=x(a.priceRange,r),b=K(a,r),u=a.url===void 0?void 0:$(a.url),S=t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"dialog-search-card-image",children:a.imageUrl!==void 0&&t.jsx("img",{src:a.imageUrl,alt:n,loading:"lazy"})}),t.jsxs("div",{className:"dialog-search-card-info",children:[t.jsx("p",{className:"dialog-search-card-title",children:n}),g!==""&&t.jsxs("p",{className:"dialog-search-card-price",children:[g,b!==""&&t.jsxs("s",{className:"dialog-search-card-compare-at",children:[" ",b]})]})]})]});return t.jsx("li",{ref:i,className:"dialog-search-card",children:u===void 0?t.jsx("div",{className:"dialog-search-card-body",children:S}):t.jsx("a",{className:"dialog-search-card-body",href:u,onClick:l,onAuxClick:c,children:S})})},X=e=>{const s=d.useRef(null),[o,r]=d.useState(void 0),[i,l]=d.useState(0);return d.useLayoutEffect(()=>{if(!e)return;const c=()=>{const a=s.current;if(a===null)return;const n=a.previousElementSibling??a,{top:g,bottom:b,left:u,width:S}=n.getBoundingClientRect();l(window.innerHeight),r(h=>h!==void 0&&h.top===g&&h.bottom===b&&h.left===u&&h.width===S?h:{top:g,bottom:b,left:u,width:S})};return c(),window.addEventListener("scroll",c,!0),window.addEventListener("resize",c),()=>{window.removeEventListener("scroll",c,!0),window.removeEventListener("resize",c)}},[e]),{anchorRef:s,rect:o,viewportHeight:i}},j=(e,s)=>{const[o,r]=d.useState(!1),i=d.useRef(null),l=e.status!==p.SearchStatus.IDLE&&!o;return d.useEffect(()=>{r(!1)},[e.query]),d.useEffect(()=>{if(!l)return;const c=a=>{var S,h;const n=a.target;if(!(n instanceof Node))return;const g=(S=s.current)==null?void 0:S.previousElementSibling,b=((h=i.current)==null?void 0:h.contains(n))??!1,u=(g==null?void 0:g.contains(n))??!1;!b&&!u&&r(!0)};return document.addEventListener("pointerdown",c),()=>document.removeEventListener("pointerdown",c)},[l,s]),d.useEffect(()=>{var n;const c=(n=s.current)==null?void 0:n.previousElementSibling;if(c==null)return;const a=()=>r(!1);return c.addEventListener("focusin",a),()=>c.removeEventListener("focusin",a)},[s]),{isOpen:l,panelRef:i}},W=e=>e instanceof p.DialogSearchError?`Search failed (${e.status}${e.code?` ${e.code}`:""}): ${e.message}`:"Search failed: network error. Check your connection and try again.",Q=(e,s)=>e.bottom>0&&e.top<s,U=(e,s)=>{const o=s-e.bottom-8-16,r=e.top-8-16,i={left:e.left,width:e.width};return o<200&&r>o?{...i,bottom:s-e.top+8,maxHeight:Math.max(r,0)}:{...i,top:e.bottom+8,maxHeight:Math.max(o,0)}},z=(e,s,o)=>{const r=s.response;switch(s.status){case p.SearchStatus.LOADING:return t.jsxs("p",{role:"status",className:"dialog-search-status",children:["Searching “",s.query,"”…"]});case p.SearchStatus.ERROR:return t.jsxs("div",{className:"dialog-search-error",children:[t.jsx("p",{role:"alert",className:"dialog-search-status dialog-search-status-error",children:W(s.error)}),t.jsx("button",{type:"button",className:"dialog-search-retry",onClick:()=>e.retry(),children:"Retry"})]});case p.SearchStatus.EMPTY:return t.jsxs("p",{role:"status",className:"dialog-search-status",children:["No products match “",r==null?void 0:r.query,"”."]});case p.SearchStatus.SUCCESS:return r===void 0?null:t.jsxs(t.Fragment,{children:[t.jsxs("p",{role:"status",className:"dialog-search-status",children:[r.nbHits," result",r.nbHits>1?"s":""]}),t.jsx("ul",{className:"dialog-search-results",children:r.hits.map((i,l)=>t.jsx(P,{controller:e,hit:i,index:l,locale:o},i.id))}),t.jsx(w,{controller:e,state:s})]});default:return null}},G=({controller:e,state:s,locale:o})=>{const r=s.status!==p.SearchStatus.IDLE,{anchorRef:i,rect:l,viewportHeight:c}=X(r),{isOpen:a,panelRef:n}=j(s,i);return t.jsxs(t.Fragment,{children:[t.jsx("div",{ref:i}),a&&l!==void 0&&Q(l,c)&&E.createPortal(t.jsx("div",{ref:n,className:"dialog-search-panel",style:U(l,c),children:z(e,s,o)}),document.body)]})},Z={status:p.SearchStatus.IDLE,query:"",page:0},Y=e=>{const s=d.useRef(e);s.current=e;const o=d.useRef(void 0),r=d.useCallback(()=>{if(o.current===void 0){const{client:n,surface:g="search_page",...b}=s.current;o.current=p.createSearchController({search:(u,S)=>n.search(u,S),analytics:{surface:g,trackViewSearchResults:u=>n.trackViewSearchResults(u),trackSelectSearchResult:u=>n.trackSelectSearchResult(u)},...b})}return o.current},[]),i=d.useRef(void 0);i.current??(i.current={setQuery:n=>r().setQuery(n),submit:n=>r().submit(n),setPage:n=>r().setPage(n),retry:()=>r().retry(),observeResult:(n,g)=>r().observeResult(n,g),selectResult:(n,g)=>r().selectResult(n,g),subscribe:n=>r().subscribe(n),getState:()=>r().getState(),dispose:()=>{var n;(n=o.current)==null||n.dispose(),o.current=void 0}}),d.useEffect(()=>{p.registerDialogInstallation({method:"react",version:"2.3.1"});const n=r();return()=>{n.dispose(),o.current===n&&(o.current=void 0)}},[r]);const l=d.useCallback(n=>r().subscribe(n),[r]),c=d.useCallback(()=>r().getState(),[r]),a=d.useSyncExternalStore(l,c,()=>Z);return{controller:i.current,state:a}};f.DialogInput=y,f.DialogProductBlock=T,f.DialogSearchBar=V,f.DialogSearchPagination=w,f.DialogSearchProductCard=P,f.DialogSearchResults=G,f.useDialogSearch=Y,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askdialog/dialog-react",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "private": false,
   "type": "module",
   "main": "./dist/dialog-react.umd.js",