@cruk/cruk-react-components 7.1.5 → 7.2.2

package/lib/index.css

@@ -77,6 +77,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   *,
+  *::backdrop,
   *:after,
   *:before {
     animation-play-state: paused !important;
@@ -2783,87 +2784,72 @@ button {
   }
 }
 
-@keyframes grow {
-  from {
-    opacity: 0;
-    transform: scale(0);
-  }
+.component-modal {
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: var(--clr-background-light, #fff);
+  min-height: 10rem;
+  width: 90%;
+  max-width: 500px;
+  margin: var(--spacing-xs) auto auto auto;
+  margin-bottom: var(--spacing-xxl);
+  padding: var(--spacing-xs);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+  border: none;
+  opacity: 0;
+  scale: 0;
 
-  to {
-    opacity: 1;
-    transform: scale(1);
+  &::backdrop {
+    position: fixed;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    backdrop-filter: 0.3s;
+    z-index: 100;
+    background-color: hsl(0 0 0 / 0.5);
+    display: none;
   }
-}
 
-@keyframes fade {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 0.5;
+  &[data-is-animated="true"],
+  &[data-is-animated="true"]::backdrop {
+    transition-behavior: allow-discrete;
+    transition-property: all;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in-out;
   }
-}
 
-.component-modal {
-  .wrapper {
-    box-sizing: border-box;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: 9999;
-  }
+  &[open] {
+    display: block;
+    opacity: 1;
+    scale: 1;
 
-  .content {
-    position: relative;
-    background-color: var(--clr-background-light, #fff);
-    min-height: 10rem;
-    width: 90%;
-    max-width: 500px;
-    margin: var(--spacing-xs) auto auto auto;
-    margin-bottom: var(--spacing-xxl);
-    padding: var(--spacing-xs);
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
-    z-index: 9999;
-    animation-direction: normal;
-    transform-origin: top center;
-    animation: none;
-
-    &[data-is-animated="true"] {
-      animation: grow 0.2s ease-in-out;
+    @starting-style {
+      opacity: 0;
+      scale: 0;
+    }
+
+    &::backdrop {
+      display: block;
+      background-color: hsl(0 0 0 / 0.5);
+
+      @starting-style {
+        background-color: hsl(0 0 0 / 0);
+      }
     }
   }
 
   .close-button {
     float: right;
-    margin-left: var(--spacing-xs, 1rem);
+    margin-top: calc(var(--spacing-xs, 1rem) * -1);
+    margin-right: calc(var(--spacing-xs, 0.5rem) * -1);
     font-size: 1.2rem;
     padding: 0;
-  }
-
-  .background {
-    position: fixed;
-    background: var(--clr-modal-backdrop, #000);
-    bottom: 0;
-    left: 0;
-    opacity: 0.5;
-    right: 0;
-    top: 0;
-    transition:
-      opacity 0.3s,
-      bottom 0s 0.3s;
-    z-index: 100;
-    animation-direction: normal;
-    animation-timing-function: ease-in-out;
-    animation-duration: 0.3s;
-    animation-name: none;
-
-    &[data-is-animated="true"] {
-      animation-name: fade;
-    }
+    outline-offset: -0.5rem;
   }
 }
 
@@ -2975,365 +2961,130 @@ button {
 }
 
 .component-popover {
-  --_position: "top";
-  --_display: inline-block;
-
-  display: var(--_display, inline-block);
-  position: relative;
-
-  --_modal-margin-top: 0;
-  --_modal-margin-bottom: 10px;
-  --_modal-position-top: auto;
-  --_modal-position-bottom: 100%;
-  --_modal-position-left: 0;
-  --_modal-position-right: auto;
-
-  --_triangle-top: 100%;
-  --_triangle-bottom: auto;
-  --_triangle-left: var(--spacing-s, 1.5rem);
-  --_triangle-right: auto;
-
-  --_triangle-shadow-border-color: rgba(0, 0, 0, 0.25) transparent transparent;
-  --_triangle-shadow-margin: -1px 0 0 0;
-
-  --_triangle-border-color: var(--clr-popover-background, #fff) transparent
-    transparent;
-
-  @media (min-width: 992px) {
-    --_modal-margin-top: 0;
-    --_modal-margin-left: 0;
-    --_modal-margin-right: 0;
-
-    --_triangle-top: 100%;
-    --_triangle-bottom: auto;
-    --_triangle-left: var(--spacing-s, 1.5rem);
-    --_triangle-right: auto;
-
-    --_triangle-shadow-border-color: rgba(0, 0, 0, 0.25) transparent transparent;
-    --_triangle-shadow-margin: -1px 0 0 0;
-    --_triangle-border-color: var(--clr-popover-background, #fff) transparent
-      transparent;
-  }
-
-  &[data-full="true"] {
-    --_display: block;
-  }
-
-  &[data-position="top"] {
-    --_position: "top";
-    --_modal-margin-top: 0;
-    --_modal-margin-bottom: 10px;
-    --_modal-position-top: auto;
-    --_modal-position-bottom: 100%;
-    --_modal-position-left: 0;
-    --_modal-position-right: auto;
-
-    --_triangle-top: 100%;
-    --_triangle-bottom: auto;
-    --_triangle-left: var(--spacing-s, 1.5rem);
-    --_triangle-right: auto;
-
-    --_triangle-shadow-border-color: rgba(0, 0, 0, 0.25) transparent transparent;
-    --_triangle-shadow-margin: -1px 0 0 0;
-
-    --_triangle-border-color: var(--clr-popover-background, #fff) transparent
-      transparent;
+  [popovertarget] {
+    --anchor-name: --popovertarget;
+    position: relative;
 
-    @media (min-width: 992px) {
-      --_modal-margin-top: 0;
-      --_modal-margin-left: 0;
-      --_modal-margin-right: 0;
-
-      --_modal-position-top: auto;
-      --_modal-position-left: 0;
-      --_modal-position-right: auto;
-
-      --_triangle-top: 100%;
-      --_triangle-bottom: auto;
-      --_triangle-left: var(--spacing-s, 1.5rem);
-      --_triangle-right: auto;
-
-      --_triangle-shadow-border-color: rgba(0, 0, 0, 0.25) transparent
-        transparent;
-      --_triangle-shadow-margin: -1px 0 0 0;
-      --_triangle-border-color: var(--clr-popover-background, #fff) transparent
-        transparent;
+    /* Tether arrow */
+    &::before {
+      content: "";
+      position: absolute;
+      box-sizing: border-box;
+      width: 1rem;
+      height: 1rem;
+      rotate: 45deg;
+      transform-origin: center center center;
+      background-color: var(--clr-popover-background, #fff);
+      border: 1px solid var(--clr-cruk-grey-300, #c6c6c6);
+      display: none;
+      opacity: 0;
     }
   }
-  &[data-position="left"] {
-    --_position: "left";
-
-    --_modal-margin-top: 10px;
-    --_modal-margin-bottom: 0;
-    --_modal-margin-left: 0;
-    --_modal-margin-right: 0;
-    --_modal-position-top: 100%;
-    --_modal-position-bottom: auto;
-    --_modal-position-left: auto;
-    --_modal-position-right: auto;
-
-    --_triangle-top: auto;
-    --_triangle-bottom: 100%;
-    --_triangle-left: var(--spacing-s, 1.5rem);
-    --_triangle-right: auto;
-
-    --_triangle-shadow-border-color: transparent transparent rgba(0, 0, 0, 0.25);
-    --_triangle-shadow-margin: 0 0 -1px 0;
-
-    --_triangle-border-color: transparent transparent
-      var(--clr-popover-background, #fff);
 
-    @media (min-width: 992px) {
-      --_modal-margin-top: 0;
-      --_modal-margin-left: 0;
-      --_modal-margin-right: 10px;
+  [popover] {
+    --position-anchor: --popovertarget;
+    position: absolute;
+    inset: auto;
 
-      --_modal-position-top: 100%;
-      --_modal-position-left: auto;
-      --_modal-position-right: auto;
+    max-width: none;
+    min-width: auto;
+    overflow: visible;
 
-      --_triangle-top: var(--spacing-s, 1.5rem);
-      --_triangle-bottom: auto;
-      --_triangle-left: 100%;
-      --_triangle-right: auto;
+    justify-content: center;
+    word-wrap: break-word;
+    font-size: var(--font-size-s, 0.875rem);
+    background-color: var(--clr-popover-background, #fff);
 
-      --_triangle-shadow-border-color: transparent transparent transparent
-        rgba(0, 0, 0, 0.25);
-      --_triangle-shadow-margin: 0 0 0 -1px;
+    border: 1px solid var(--clr-cruk-grey-300, #c6c6c6);
+    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
 
-      --_triangle-border-color: transparent transparent transparent
-        var(--clr-popover-background, #fff);
-    }
+    opacity: 0;
   }
-  &[data-position="right"] {
-    --_position: "right";
-
-    --_modal-margin-top: 10px;
-    --_modal-margin-bottom: 0;
-    --_modal-position-top: 100%;
-    --_modal-position-bottom: auto;
-    --_modal-position-left: auto;
-    --_modal-position-right: 0;
-
-    --_triangle-top: auto;
-    --_triangle-bottom: 100%;
-    --_triangle-left: auto;
-    --_triangle-right: var(--spacing-s, 1.5rem);
-
-    --_triangle-shadow-border-color: transparent transparent rgba(0, 0, 0, 0.25);
-    --_triangle-shadow-margin: 0 0 -1px 0;
-
-    --_triangle-border-color: transparent transparent
-      var(--clr-popover-background, #fff);
-
-    @media (min-width: 992px) {
-      --_modal-margin-top: 0;
-      --_modal-margin-left: 10px;
-      --_modal-margin-right: 0;
-
-      --_modal-position-top: 0;
-      --_modal-position-left: 100%;
-      --_modal-position-right: auto;
-
-      --_triangle-top: var(--spacing-s, 1.5rem);
-      --_triangle-bottom: auto;
-      --_triangle-left: -20px;
-      --_triangle-right: auto;
-
-      --_triangle-shadow-border-color: transparent rgba(0, 0, 0, 0.25)
-        transparent transparent;
-      --_triangle-shadow-margin: 0 0 0 1px;
 
-      --_triangle-border-color: transparent var(--clr-popover-background, #fff)
-        transparent transparent;
+  &[data-is-animated="true"] {
+    [popover],
+    [popovertarget]::before {
+      /* allows display none to block with animation*/
+      transition-behavior: allow-discrete;
+      transition-property: all;
+      transition-duration: 0.2s;
+      transition-timing-function: ease-in-out;
     }
   }
-  &[data-position="bottom"] {
-    --_position: "bottom";
-
-    --_modal-margin-top: 10px;
-    --_modal-margin-bottom: 0;
-    --_modal-position-top: 100%;
-    --_modal-position-bottom: auto;
-    --_modal-position-left: auto;
-    --_modal-position-right: auto;
-
-    --_triangle-top: auto;
-    --_triangle-bottom: 100%;
-    --_triangle-left: var(--spacing-s, 1.5rem);
-    --_triangle-right: auto;
-
-    --_triangle-shadow-border-color: transparent transparent rgba(0, 0, 0, 0.25);
-    --_triangle-shadow-margin: 0 0 -1px 0;
-
-    --_triangle-border-color: transparent transparent
-      var(--clr-popover-background, #fff);
 
-    @media (min-width: 992px) {
-      --_modal-margin-top: 10px;
-      --_modal-margin-left: 0;
-      --_modal-margin-right: 0;
-
-      --_modal-position-top: 100%;
-      --_modal-position-left: auto;
-      --_modal-position-right: auto;
-
-      --_triangle-top: auto;
-      --_triangle-bottom: 100%;
-      --_triangle-left: var(--spacing-s, 1.5rem);
-      --_triangle-right: auto;
-
-      --_triangle-shadow-border-color: transparent transparent
-        rgba(0, 0, 0, 0.25);
-      --_triangle-shadow-margin: 0 0 -1px 0;
+  /* Animate popover */
+  /* Animate tether arrow attached to button */
+  [popover]:popover-open,
+  [popovertarget]:has(+ :popover-open)::before {
+    display: block;
+    opacity: 1;
 
-      --_triangle-border-color: transparent transparent
-        var(--clr-popover-background, #fff);
+    @starting-style {
+      opacity: 0;
     }
   }
-  &[data-position="topLeft"] {
-    --_position: "topLeft";
-
-    --_modal-margin-top: 0;
-    --_modal-margin-bottom: 10px;
-    --_modal-position-top: auto;
-    --_modal-position-bottom: 100%;
-    --_modal-position-left: auto;
-    --_modal-position-right: 0;
-
-    --_triangle-top: 100%;
-    --_triangle-bottom: auto;
-    --_triangle-left: auto;
-    --_triangle-right: var(--spacing-s, 1.5rem);
-
-    --_triangle-shadow-border-color: rgba(0, 0, 0, 0.25) transparent transparent;
-    --_triangle-shadow-margin: -1px 0 0 0;
-
-    --_triangle-border-color: var(--clr-popover-background, #fff) transparent
-      transparent;
-
-    @media (min-width: 992px) {
-      --_modal-margin-top: 0;
-      --_modal-margin-left: 0;
-      --_modal-margin-right: 0;
-
-      --_modal-position-top: auto;
-      --_modal-position-left: auto;
-      --_modal-position-right: 0;
-
-      --_triangle-top: 100%;
-      --_triangle-bottom: auto;
-      --_triangle-left: var(--spacing-s, 1.5rem);
-      --_triangle-right: var(--spacing-s, 1.5rem);
 
-      --_triangle-shadow-border-color: rgba(0, 0, 0, 0.25) transparent
-        transparent;
-      --_triangle-shadow-margin: -1px 0 0 0;
-
-      --_triangle-border-color: var(--clr-popover-background, #fff) transparent
-        transparent;
+  /* Positioning variants*/
+  &[data-position="top"],
+  &:not([data-position]) {
+    [popover] {
+      position-area: top;
+      position-try-fallbacks: --bottom;
+    }
+    [popovertarget]::before {
+      top: -0.5rem;
+      left: calc(50% - 0.5rem);
     }
   }
 
-  &[data-position="bottomLeft"] {
-    --_position: "bottomLeft";
-
-    --_modal-margin-top: 10px;
-    --_modal-margin-bottom: 10px;
-    --_modal-position-top: 100%;
-    --_modal-position-bottom: auto;
-    --_modal-position-left: auto;
-    --_modal-position-right: 0;
-
-    --_triangle-top: auto;
-    --_triangle-bottom: 100%;
-    --_triangle-left: auto;
-    --_triangle-right: var(--spacing-s, 1.5rem);
-
-    --_triangle-shadow-border-color: transparent transparent rgba(0, 0, 0, 0.25);
-    --_triangle-shadow-margin: 0 0 -1px 0;
-
-    --_triangle-border-color: transparent transparent
-      var(--clr-popover-background, #fff);
-
-    @media (min-width: 992px) {
-      --_modal-margin-top: 10px;
-      --_modal-margin-left: 0;
-      --_modal-margin-right: 0;
-
-      --_modal-position-top: 100%;
-      --_modal-position-left: auto;
-      --_modal-position-right: 0;
-
-      --_triangle-top: auto;
-      --_triangle-bottom: 100%;
-      --_triangle-left: auto;
-      --_triangle-right: var(--spacing-s, 1.5rem);
-
-      --_triangle-shadow-border-color: transparent transparent
-        rgba(0, 0, 0, 0.25);
-      --_triangle-shadow-margin: 0 0 -1px 0;
-
-      --_triangle-border-color: transparent transparent
-        var(--clr-popover-background, #fff);
+  &[data-position="bottom"] {
+    [popover] {
+      position-area: bottom;
+      position-try-fallbacks: --top;
+    }
+    [popovertarget]::before {
+      bottom: -0.5rem;
+      left: calc(50% - 0.5rem);
     }
   }
 
-  .popover-modal {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    word-wrap: break-word;
-    z-index: 9999;
-    /* allow inline override */
-    max-width: none;
-    /* allow inline override */
-    min-width: auto;
-    font-size: var(--font-size-s, 0.875rem);
-    background-color: var(--clr-popover-background, #fff);
-    background-clip: padding-box;
-    border: 1px solid rgba(0, 0, 0, 0.25);
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-
-    margin-top: var(--_modal-margin-top, 0);
-    margin-bottom: var(--_modal-margin-bottom, 10px);
-    margin-left: var(--_modal-margin-left, 0);
-    margin-right: var(--_modal-margin-right, 0);
-
-    top: var(--_modal-position-top, auto);
-    bottom: var(--_modal-position-bottom, 100%);
-    left: var(--_modal-position-left, 0);
-    right: var(--_modal-position-right, auto);
-
-    &:after,
-    &:before {
-      content: "";
-      border-style: solid;
-      border-width: 10px;
-      width: 0;
-      height: 0;
-      position: absolute;
-      top: var(--_triangle-top, 100%);
-      bottom: var(--_triangle-bottom, auto);
-      left: var(--_triangle-left, var(--spacing-s, 1.5rem));
-      right: var(--_triangle-right, auto);
+  &[data-position="left"] {
+    [popover] {
+      position-area: left;
+      position-try-fallbacks: --right, --top, --bottom;
     }
-
-    &:before {
-      border-color: var(
-        --_triangle-shadow-border-color,
-        rgba(0, 0, 0, 0.25) transparent transparent
-      );
+    [popovertarget]::before {
+      left: -0.5rem;
+      top: calc(50% - 0.5rem);
     }
+  }
 
-    &:after {
-      margin: var(--_triangle-shadow-margin, -1px 0 0 0);
-      border-color: var(
-        --_triangle-border-color,
-        var(--clr-popover-background, #fff) transparent transparent
-      );
+  &[data-position="right"] {
+    [popover] {
+      position-area: right;
+      position-try-fallbacks: --left, --top, --bottom;
+    }
+    [popovertarget]::before {
+      right: -0.5rem;
+      top: calc(50% - 0.5rem);
     }
   }
+
+  /* anchor name only works within this wrapping class */
+  anchor-scope: --popovertarget;
+}
+
+@position-try --bottom {
+  position-area: bottom;
+}
+@position-try --top {
+  position-area: top;
+}
+@position-try --left {
+  position-area: left;
+}
+@position-try --right {
+  position-area: right;
 }
 
 /* type CircleKeyCircleFillKeyFramesProps = {
@@ -4245,5 +3996,3 @@ button {
     word-break: break-word;
   }
 }
-
-/*# sourceMappingURL=index.css.map */

package/lib/src/components/AddressLookup/index.js

@@ -1,2 +1,2 @@
-import{__rest as e,__assign as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{useState as r,useRef as o,useCallback as s,useEffect as a}from"react";import{faChevronRight as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{useKey as l}from"../../hooks/useKey.js";import{debounce as c}from"../../utils/debounce.js";import{removeCommasFromObjectStringValues as d}from"../../utils/Helper.js";import{Text as u}from"../Text/index.js";import{TextField as m}from"../TextField/index.js";import{IconFa as f}from"../IconFa/index.js";var p=function(p){var h=p.apiKey,g=p.countries,v=p.errorMessage,y=p.hasError,w=p.isValid,E=p.isValidVisible,b=p.isInvalidVisible,x=p.label,I=p.hintText,j=p.ref,T=p.onAddressError,V=void 0===T?function(e){console.log(e)}:T,k=p.onAddressSelected,A=p.onChange,C=p.onBlur,K=e(p,["apiKey","countries","errorMessage","hasError","isValid","isValidVisible","isInvalidVisible","label","hintText","ref","onAddressError","onAddressSelected","onChange","onBlur"]),D=r([]),F=D[0],S=D[1],M=r(-1),_=M[0],B=M[1],H=o(null),L=function(){B(-1),S([])},N=s(c(500,function(e){O(e)}),[]),O=function(e,n){if(void 0===n&&(n=""),0===e.length)return S([]);var t="".concat("https://api.addressy.com/Capture/Interactive/Find/v1.1/json3.ws","?Key=").concat(h,"&Text=").concat(e,"&Container=").concat(n);return void 0!==g&&(t="".concat(t,"&Countries=").concat(g.join(","))),fetch(t).then(function(e){if(!e.ok)throw new Error("Something went wrong please try again");return e.json()}).then(function(e){var n;if((null===(n=null==e?void 0:e.Items)||void 0===n?void 0:n.length)>0&&e.Items[0].Error)throw new Error("Something went wrong please try again");return S(e.Items||[]),null}).catch(function(e){return V(e)}),null},U=function(e){fetch("".concat("https://api.addressy.com/Capture/Interactive/Retrieve/v1/json3.ws","?Key=").concat(h,"&Id=").concat(e)).then(function(e){if(!e.ok)throw new Error("Something went wrong please try again");return e.json()}).then(function(e){var n=e.Items[0],t=d(n);return k(t),L(),null}).catch(function(e){return V(e)})},q=function(e){return"Address"===e.Type?U(e.Id):(O(e.Text,e.Id),null)},R=function(e){H.current&&e.target instanceof HTMLElement&&!H.current.contains(e.target)&&L()};return a(function(){return document.addEventListener("mousedown",R),function(){document.removeEventListener("mousedown",R)}}),l(function(){L()},{detectKeys:["Escape","Tab"]},[]),t.createElement(t.Fragment,null,t.createElement(m,n({"aria-activedescendant":F.length?"addressOptions-".concat(_):"","aria-owns":"found_addresses","aria-autocomplete":"both","aria-expanded":F.length?"true":"false",autoComplete:"off",hasError:y||!!v,errorMessage:v,hintText:null!=I?I:"Start typing your address or postcode",isValid:w,isValidVisible:E,isInvalidVisible:b,label:null!=x?x:"Home address",ref:j,required:!0,role:"combobox",type:"search"},K,{onKeyDown:function(e){"Enter"===e.key&&F[_]?(e.preventDefault(),"Address"===F[_].Type&&U(F[_].Id),O(F[_].Text,F[_].Id),B(-1)):"ArrowUp"===e.key?(e.preventDefault(),_<=-1&&B(F.length-1),B(_-1)):"ArrowDown"===e.key?(e.preventDefault(),_+1>=F.length&&B(0),B(_+1)):B(-1)},onChange:function(e){N(e.target.value),A&&A(e)},onBlur:function(e){var n=!!F.length;C&&!n&&C(e)}})),!!F.length&&t.createElement(t.Fragment,null,t.createElement("div",{className:"screen-reader-only",role:"status","aria-live":"assertive"},!!F.length&&"We have found ".concat(F.length," result").concat(1!==F.length?"s":""," matching your search. Use up and down arrow keys to navigate")),t.createElement("div",{className:"address-lookup-list-wrapper",ref:H},t.createElement("ul",{"aria-label":"found addresses",id:"found_addresses",role:"listbox"},F.map(function(e,n){return t.createElement("li",{tabIndex:0,id:"addressOptions-".concat(n),key:e.Id,onClick:function(){q(e)},onKeyDown:function(n){"Enter"===n.key&&q(e)},role:"option","data-hj-suppress":!0},t.createElement(u,{as:"span","data-hj-suppress":!0},e.Text," ",e.Description),"Address"!==e.Type&&t.createElement(t.Fragment,null,t.createElement("div",{className:"screen-reader-only"},"press enter for these addresses"),t.createElement(f,{faIcon:i})))})))))};export{p as AddressLookup,p as default};
+import{__rest as e,__assign as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{useState as r,useRef as o,useCallback as s,useEffect as a}from"react";import{faChevronRight as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";import{useKey as l}from"../../hooks/useKey.js";import{debounce as c}from"../../utils/debounce.js";import{removeCommasFromObjectStringValues as d}from"../../utils/Helper.js";import{Text as u}from"../Text/index.js";import{TextField as m}from"../TextField/index.js";import{IconFa as f}from"../IconFa/index.js";var p=function(p){var h=p.apiKey,g=p.countries,v=p.errorMessage,y=p.hasError,w=p.isValid,E=p.isValidVisible,b=p.isInvalidVisible,x=p.label,I=p.hintText,j=p.ref,T=p.onAddressError,V=void 0===T?function(e){console.log(e)}:T,k=p.onAddressSelected,A=p.onChange,C=p.onBlur,K=e(p,["apiKey","countries","errorMessage","hasError","isValid","isValidVisible","isInvalidVisible","label","hintText","ref","onAddressError","onAddressSelected","onChange","onBlur"]),D=r([]),F=D[0],S=D[1],M=r(-1),_=M[0],B=M[1],H=o(null),L=function(){B(-1),S([])},N=s(c(500,function(e){O(e)}),[]),O=function(e,n){if(void 0===n&&(n=""),0===e.length)return S([]);var t="".concat("https://api.addressy.com/Capture/Interactive/Find/v1.1/json3.ws","?Key=").concat(h,"&Text=").concat(e,"&Container=").concat(n);return void 0!==g&&(t="".concat(t,"&Countries=").concat(g.join(","))),fetch(t).then(function(e){if(!e.ok)throw new Error("Something went wrong please try again");return e.json()}).then(function(e){var n;if((null===(n=null==e?void 0:e.Items)||void 0===n?void 0:n.length)>0&&e.Items[0].Error)throw new Error("Something went wrong please try again");return S(e.Items||[]),null}).catch(function(e){return V(e)}),null},U=function(e){fetch("".concat("https://api.addressy.com/Capture/Interactive/Retrieve/v1/json3.ws","?Key=").concat(h,"&Id=").concat(e)).then(function(e){if(!e.ok)throw new Error("Something went wrong please try again");return e.json()}).then(function(e){var n=e.Items[0],t=d(n);return k(t),L(),null}).catch(function(e){return V(e)})},q=function(e){return"Address"===e.Type?U(e.Id):(O(e.Text,e.Id),null)},R=function(e){H.current&&e.target instanceof HTMLElement&&!H.current.contains(e.target)&&L()};return a(function(){return document.addEventListener("mousedown",R),function(){document.removeEventListener("mousedown",R)}}),l(function(){L()},{detectKeys:["Escape","Tab"]},[]),t.createElement(t.Fragment,null,t.createElement(m,n({"aria-activedescendant":F.length?"addressOptions-".concat(_):"","aria-owns":"found_addresses","aria-autocomplete":"both","aria-expanded":F.length?"true":"false",autoComplete:"off",hasError:y||!!v,errorMessage:v,hintText:null!=I?I:"Start typing your address or postcode",isValid:w,isValidVisible:E,isInvalidVisible:b,label:null!=x?x:"Home address",ref:j,required:!0,role:"combobox",type:"search"},K,{onKeyDown:function(e){"Enter"===e.key&&F[_]?(e.preventDefault(),"Address"===F[_].Type&&U(F[_].Id),O(F[_].Text,F[_].Id),B(-1)):"ArrowUp"===e.key?(e.preventDefault(),_<=-1&&B(F.length-1),B(_-1)):"ArrowDown"===e.key?(e.preventDefault(),_+1>=F.length&&B(0),B(_+1)):B(-1)},onChange:function(e){N(e.target.value),A&&A(e)},onBlur:function(e){var n=!!F.length;C&&!n&&C(e)}})),!!F.length&&t.createElement(t.Fragment,null,t.createElement("div",{className:"screen-reader-only",role:"status","aria-live":"assertive"},!!F.length&&"We have found ".concat(F.length," result").concat(1!==F.length?"s":""," matching your search. Use up and down arrow keys to navigate")),t.createElement("div",{className:"address-lookup-list-wrapper",ref:H},t.createElement("ul",{"aria-label":"found addresses",id:"found_addresses",role:"listbox"},F.map(function(e,n){return t.createElement("li",{tabIndex:0,id:"addressOptions-".concat(n),key:e.Id,onClick:function(){q(e)},onKeyDown:function(n){"Enter"===n.key&&q(e)},role:"option","data-hj-suppress":!0},t.createElement(u,{as:"span","data-hj-suppress":!0},e.Text," ",e.Description),"Address"!==e.Type&&t.createElement(t.Fragment,null,t.createElement("div",{className:"screen-reader-only"},"press enter for these addresses"),t.createElement(f,{faIcon:i})))})))))};export{p as AddressLookup};
 //# sourceMappingURL=index.js.map