@arcteryx/components-click-and-collect - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [1.1.4](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-click-and-collect@1.1.3...@arcteryx/components-click-and-collect@1.1.4) (2021-12-21)
+
+
+### Bug Fixes
+
+* (Click and Collect) TMS-2009 Implement useForm from react-hook-form ([d68db37](http://bitbucket.org/arcteryx/arcteryx-js-helpers/commits/d68db379086070d494315d18e96a829262a79103))
+
+
+
+
+
 ## [1.1.3](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-click-and-collect@1.1.2...@arcteryx/components-click-and-collect@1.1.3) (2021-12-20)
@@ -8,0 +19,0 @@

dist/cjs/index.js

@@ -9,10 +9,11 @@ 'use strict';
 var React__default = _interopDefault(React);
-var styled = _interopDefault(require('styled-components'));
+var styled = require('styled-components');
+var styled__default = _interopDefault(styled);
 var componentsTypography = require('@arcteryx/components-typography');
 var reactI18next = require('react-i18next');
-var componentsAnimatedEllipsis = require('@arcteryx/components-animated-ellipsis');
 var componentsForm = require('@arcteryx/components-form');
 var componentsButton = require('@arcteryx/components-button');
+var reactHookForm = require('react-hook-form');
 
-const StoreAddressDiv = styled.div`
+const StoreAddressDiv = styled__default.div`
   text-align: left;
@@ -26,3 +27,3 @@ margin: 0 0 1rem 2rem;
 
-const StoreNameWrapper = styled.div`
+const StoreNameWrapper = styled__default.div`
   display: flex;
@@ -37,3 +38,3 @@ flex-flow: row wrap;
 `;
-const Icon = styled.span`
+const Icon = styled__default.span`
   background-image: url("https://images-dynamic-arcteryx.imgix.net/foundation-ui/svgs/ArcPin_Icon.svg");
@@ -47,3 +48,3 @@ background-repeat: no-repeat;
 `;
-const Name = styled.span``;
+const Name = styled__default.span``;
 
@@ -62,3 +63,3 @@ const StoreName = ({
 
-const Inventory = styled.div`
+const Inventory = styled__default.div`
   margin-left: 0.25rem;
@@ -130,3 +131,62 @@ font-style: italic;
 
-const StoreWrapper = styled.div`
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
+}
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var getSize = function getSize(size) {
+  if (size === "small") {
+    return "0.125rem";
+  }
+
+  if (size === "large") {
+    return "1rem";
+  }
+
+  return "0.25rem";
+};
+
+var getMargin = function getMargin(size) {
+  if (size === "small") {
+    return "0 0.125rem";
+  }
+
+  if (size === "large") {
+    return "1em 0.5em";
+  }
+
+  return "0 0.125em";
+};
+
+var loadingAnim = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t0%, 100%{\n\t\topacity: 0;\n\t}\n\n\t60%{\n\t\topacity: 1;\n\t}\n"])));
+var Div = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n"])));
+var Span = styled__default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: ", ";\n  height: ", ";\n  border-radius: 100%;\n  background-color: var(--black);\n  margin: ", ";\n  opacity: 0;\n  &:nth-child(1) {\n    animation: ", " 1s ease-in-out infinite;\n  }\n  &:nth-child(2) {\n    animation: ", " 1s ease-in-out 0.33s infinite;\n  }\n  &:nth-child(3) {\n    animation: ", " 1s ease-in-out 0.66s infinite;\n  }\n"])), function (props) {
+  return getSize(props.size);
+}, function (props) {
+  return getSize(props.size);
+}, function (props) {
+  return getMargin(props.size);
+}, loadingAnim, loadingAnim, loadingAnim);
+
+var AnimatedEllipsis = function AnimatedEllipsis(_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/React__default.createElement(Div, null, /*#__PURE__*/React__default.createElement(Span, {
+    size: size
+  }), /*#__PURE__*/React__default.createElement(Span, {
+    size: size
+  }), /*#__PURE__*/React__default.createElement(Span, {
+    size: size
+  }));
+};
+
+const StoreWrapper = styled__default.div`
   display: flex;
@@ -147,3 +207,3 @@ flex-flow: row wrap;
   name: name
-}), isLoading && /*#__PURE__*/React__default.createElement(componentsAnimatedEllipsis.AnimatedEllipsis, {
+}), isLoading && /*#__PURE__*/React__default.createElement(AnimatedEllipsis, {
   size: "small"
@@ -214,3 +274,3 @@ }), /*#__PURE__*/React__default.createElement(StoreInventory, {
 
-const StoreWrapper$1 = styled.div`
+const StoreWrapper$1 = styled__default.div`
   display: flex;
@@ -232,7 +292,7 @@ flex-wrap: wrap;
 `;
-const StoreDetails = styled.div``;
-const InventoryWrapper = styled.div`
+const StoreDetails = styled__default.div``;
+const InventoryWrapper = styled__default.div`
   width: 100%;
 `;
-const StoreDistance = styled(componentsTypography.P)`
+const StoreDistance = styled__default(componentsTypography.P)`
   color: var(--inactive-state-grey);
@@ -242,3 +302,3 @@ display: inline-block;
 `;
-const StoreUrl = styled.a`
+const StoreUrl = styled__default.a`
   display: inline-block;
@@ -260,6 +320,6 @@ color: var(--colour-copy);
 `;
-const StoreWrappLeft = styled.div`
+const StoreWrappLeft = styled__default.div`
   text-align: left;
 `;
-const StoreWrappRight = styled.div`
+const StoreWrappRight = styled__default.div`
   display: flex;
@@ -278,3 +338,3 @@ flex-wrap: wrap;
 `;
-const StoreSelect = styled.div`
+const StoreSelect = styled__default.div`
   width: 100%;
@@ -344,3 +404,3 @@ margin-top: 1rem;
     title: t("Store Details")
-  }, t("Store Details")))), /*#__PURE__*/React__default.createElement(StoreWrappRight, null, /*#__PURE__*/React__default.createElement(InventoryWrapper, null, checkingInventory ? /*#__PURE__*/React__default.createElement(componentsAnimatedEllipsis.AnimatedEllipsis, {
+  }, t("Store Details")))), /*#__PURE__*/React__default.createElement(StoreWrappRight, null, /*#__PURE__*/React__default.createElement(InventoryWrapper, null, checkingInventory ? /*#__PURE__*/React__default.createElement(AnimatedEllipsis, {
     size: "small"
@@ -361,6 +421,24 @@ }) : null, /*#__PURE__*/React__default.createElement(StoreInventory, {
 
-const StoreFinderWrapper = styled.div`
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+const StoreFinderWrapper = styled__default.div`
   padding: 2rem 1rem;
 `;
-const StoreFinderInner = styled.div`
+const StoreFinderInner = styled__default.div`
   width: 100%;
@@ -371,3 +449,3 @@ max-width: 760px;
 `;
-const SearchBar = styled.div`
+const SearchBar = styled__default.div`
   height: auto;
@@ -404,6 +482,6 @@ display: flex;
 `;
-const SearchButton = styled(componentsButton.Button)`
+const SearchButton = styled__default(componentsButton.Button)`
   margin: 0;
 `;
-const StoreSearchResults = styled.div`
+const StoreSearchResults = styled__default.div`
   margin: 3rem auto 0;
@@ -430,2 +508,6 @@ padding: 1rem 0 0;
   const placeholder = country === "us" ? t("Search city or zip code") : t("Search city or postal code");
+  const {
+    register,
+    handleSubmit
+  } = reactHookForm.useForm();
 
@@ -439,8 +521,9 @@ const handleFormSubmit = e => {
   return /*#__PURE__*/React__default.createElement(StoreFinderWrapper, null, /*#__PURE__*/React__default.createElement(componentsTypography.H1, null, t("Select a Store")), /*#__PURE__*/React__default.createElement(StoreFinderInner, null, /*#__PURE__*/React__default.createElement("form", {
-    onSubmit: handleFormSubmit
-  }, /*#__PURE__*/React__default.createElement(SearchBar, null, /*#__PURE__*/React__default.createElement(componentsForm.FormInputField, {
+    onSubmit: handleSubmit(handleFormSubmit)
+  }, /*#__PURE__*/React__default.createElement(SearchBar, null, /*#__PURE__*/React__default.createElement(componentsForm.FormInputField, _extends({
     type: "text",
     name: "search",
     value: searchQuery,
-    placeholder: placeholder,
+    placeholder: placeholder
+  }, register("search"), {
     onChange: event => {
@@ -452,3 +535,3 @@ const {
     }
-  }), /*#__PURE__*/React__default.createElement(SearchButton, {
+  })), /*#__PURE__*/React__default.createElement(SearchButton, {
     context: "Standard",
@@ -455,0 +538,0 @@ onClick: handleFormSubmit,

dist/es/index.js

 import React, { useState, useEffect } from 'react';
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import { P, H3, Breakpoint, H1 } from '@arcteryx/components-typography';
 import { useTranslation } from 'react-i18next';
-import { AnimatedEllipsis } from '@arcteryx/components-animated-ellipsis';
 import { RadioVariant, FormInputField } from '@arcteryx/components-form';
 import { Button } from '@arcteryx/components-button';
+import { useForm } from 'react-hook-form';
 
@@ -118,2 +118,61 @@ const StoreAddressDiv = styled.div`
 
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
+}
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var getSize = function getSize(size) {
+  if (size === "small") {
+    return "0.125rem";
+  }
+
+  if (size === "large") {
+    return "1rem";
+  }
+
+  return "0.25rem";
+};
+
+var getMargin = function getMargin(size) {
+  if (size === "small") {
+    return "0 0.125rem";
+  }
+
+  if (size === "large") {
+    return "1em 0.5em";
+  }
+
+  return "0 0.125em";
+};
+
+var loadingAnim = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t0%, 100%{\n\t\topacity: 0;\n\t}\n\n\t60%{\n\t\topacity: 1;\n\t}\n"])));
+var Div = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n"])));
+var Span = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: ", ";\n  height: ", ";\n  border-radius: 100%;\n  background-color: var(--black);\n  margin: ", ";\n  opacity: 0;\n  &:nth-child(1) {\n    animation: ", " 1s ease-in-out infinite;\n  }\n  &:nth-child(2) {\n    animation: ", " 1s ease-in-out 0.33s infinite;\n  }\n  &:nth-child(3) {\n    animation: ", " 1s ease-in-out 0.66s infinite;\n  }\n"])), function (props) {
+  return getSize(props.size);
+}, function (props) {
+  return getSize(props.size);
+}, function (props) {
+  return getMargin(props.size);
+}, loadingAnim, loadingAnim, loadingAnim);
+
+var AnimatedEllipsis = function AnimatedEllipsis(_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/React.createElement(Div, null, /*#__PURE__*/React.createElement(Span, {
+    size: size
+  }), /*#__PURE__*/React.createElement(Span, {
+    size: size
+  }), /*#__PURE__*/React.createElement(Span, {
+    size: size
+  }));
+};
+
 const StoreWrapper = styled.div`
@@ -342,2 +401,20 @@ display: flex;
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 const StoreFinderWrapper = styled.div`
@@ -409,2 +486,6 @@ padding: 2rem 1rem;
   const placeholder = country === "us" ? t("Search city or zip code") : t("Search city or postal code");
+  const {
+    register,
+    handleSubmit
+  } = useForm();
 
@@ -418,8 +499,9 @@ const handleFormSubmit = e => {
   return /*#__PURE__*/React.createElement(StoreFinderWrapper, null, /*#__PURE__*/React.createElement(H1, null, t("Select a Store")), /*#__PURE__*/React.createElement(StoreFinderInner, null, /*#__PURE__*/React.createElement("form", {
-    onSubmit: handleFormSubmit
-  }, /*#__PURE__*/React.createElement(SearchBar, null, /*#__PURE__*/React.createElement(FormInputField, {
+    onSubmit: handleSubmit(handleFormSubmit)
+  }, /*#__PURE__*/React.createElement(SearchBar, null, /*#__PURE__*/React.createElement(FormInputField, _extends({
     type: "text",
     name: "search",
     value: searchQuery,
-    placeholder: placeholder,
+    placeholder: placeholder
+  }, register("search"), {
     onChange: event => {
@@ -431,3 +513,3 @@ const {
     }
-  }), /*#__PURE__*/React.createElement(SearchButton, {
+  })), /*#__PURE__*/React.createElement(SearchButton, {
     context: "Standard",
@@ -434,0 +516,0 @@ onClick: handleFormSubmit,

dist/umd/index.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@arcteryx/components-typography'), require('react-i18next'), require('@arcteryx/components-animated-ellipsis'), require('@arcteryx/components-form'), require('@arcteryx/components-button')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@arcteryx/components-typography', 'react-i18next', '@arcteryx/components-animated-ellipsis', '@arcteryx/components-form', '@arcteryx/components-button'], factory) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('@arcteryx/components-typography'), require('react-i18next'), require('@arcteryx/components-form'), require('@arcteryx/components-button'), require('react-hook-form')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', '@arcteryx/components-typography', 'react-i18next', '@arcteryx/components-form', '@arcteryx/components-button', 'react-hook-form'], factory) :
   (global = global || self, (function () {
     var current = global.ARCTERYX && global.ARCTERYX.componentsclickandcollect;
     var exports = (global.ARCTERYX = global.ARCTERYX || {}, global.ARCTERYX.componentsclickandcollect = {});
-    factory(exports, global.React, global.styled, global.componentsTypography, global.reactI18next, global.componentsAnimatedEllipsis, global.componentsForm, global.componentsButton);
+    factory(exports, global.React, global.styled, global.componentsTypography, global.reactI18next, global.componentsForm, global.componentsButton, global.reactHookForm);
     exports.noConflict = function () { global.ARCTERYX.componentsclickandcollect = current; return exports; };
   }()));
-}(this, (function (exports, React, styled, componentsTypography, reactI18next, componentsAnimatedEllipsis, componentsForm, componentsButton) { 'use strict';
+}(this, (function (exports, React, styled, componentsTypography, reactI18next, componentsForm, componentsButton, reactHookForm) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
-  styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
+  var styled__default = 'default' in styled ? styled['default'] : styled;
 
-  const StoreAddressDiv = styled.div`
+  const StoreAddressDiv = styled__default.div`
   text-align: left;
@@ -24,3 +24,3 @@ margin: 0 0 1rem 2rem;
 
-  const StoreNameWrapper = styled.div`
+  const StoreNameWrapper = styled__default.div`
   display: flex;
@@ -35,3 +35,3 @@ flex-flow: row wrap;
 `;
-  const Icon = styled.span`
+  const Icon = styled__default.span`
   background-image: url("https://images-dynamic-arcteryx.imgix.net/foundation-ui/svgs/ArcPin_Icon.svg");
@@ -45,3 +45,3 @@ background-repeat: no-repeat;
 `;
-  const Name = styled.span``;
+  const Name = styled__default.span``;
 
@@ -60,3 +60,3 @@ const StoreName = ({
 
-  const Inventory = styled.div`
+  const Inventory = styled__default.div`
   margin-left: 0.25rem;
@@ -128,3 +128,62 @@ font-style: italic;
 
-  const StoreWrapper = styled.div`
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
+
+  var _templateObject, _templateObject2, _templateObject3;
+
+  var getSize = function getSize(size) {
+    if (size === "small") {
+      return "0.125rem";
+    }
+
+    if (size === "large") {
+      return "1rem";
+    }
+
+    return "0.25rem";
+  };
+
+  var getMargin = function getMargin(size) {
+    if (size === "small") {
+      return "0 0.125rem";
+    }
+
+    if (size === "large") {
+      return "1em 0.5em";
+    }
+
+    return "0 0.125em";
+  };
+
+  var loadingAnim = styled.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t0%, 100%{\n\t\topacity: 0;\n\t}\n\n\t60%{\n\t\topacity: 1;\n\t}\n"])));
+  var Div = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n"])));
+  var Span = styled__default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: ", ";\n  height: ", ";\n  border-radius: 100%;\n  background-color: var(--black);\n  margin: ", ";\n  opacity: 0;\n  &:nth-child(1) {\n    animation: ", " 1s ease-in-out infinite;\n  }\n  &:nth-child(2) {\n    animation: ", " 1s ease-in-out 0.33s infinite;\n  }\n  &:nth-child(3) {\n    animation: ", " 1s ease-in-out 0.66s infinite;\n  }\n"])), function (props) {
+    return getSize(props.size);
+  }, function (props) {
+    return getSize(props.size);
+  }, function (props) {
+    return getMargin(props.size);
+  }, loadingAnim, loadingAnim, loadingAnim);
+
+  var AnimatedEllipsis = function AnimatedEllipsis(_ref) {
+    var size = _ref.size;
+    return /*#__PURE__*/React__default.createElement(Div, null, /*#__PURE__*/React__default.createElement(Span, {
+      size: size
+    }), /*#__PURE__*/React__default.createElement(Span, {
+      size: size
+    }), /*#__PURE__*/React__default.createElement(Span, {
+      size: size
+    }));
+  };
+
+  const StoreWrapper = styled__default.div`
   display: flex;
@@ -145,3 +204,3 @@ flex-flow: row wrap;
     name: name
-  }), isLoading && /*#__PURE__*/React__default.createElement(componentsAnimatedEllipsis.AnimatedEllipsis, {
+  }), isLoading && /*#__PURE__*/React__default.createElement(AnimatedEllipsis, {
     size: "small"
@@ -212,3 +271,3 @@ }), /*#__PURE__*/React__default.createElement(StoreInventory, {
 
-  const StoreWrapper$1 = styled.div`
+  const StoreWrapper$1 = styled__default.div`
   display: flex;
@@ -230,7 +289,7 @@ flex-wrap: wrap;
 `;
-  const StoreDetails = styled.div``;
-  const InventoryWrapper = styled.div`
+  const StoreDetails = styled__default.div``;
+  const InventoryWrapper = styled__default.div`
   width: 100%;
 `;
-  const StoreDistance = styled(componentsTypography.P)`
+  const StoreDistance = styled__default(componentsTypography.P)`
   color: var(--inactive-state-grey);
@@ -240,3 +299,3 @@ display: inline-block;
 `;
-  const StoreUrl = styled.a`
+  const StoreUrl = styled__default.a`
   display: inline-block;
@@ -258,6 +317,6 @@ color: var(--colour-copy);
 `;
-  const StoreWrappLeft = styled.div`
+  const StoreWrappLeft = styled__default.div`
   text-align: left;
 `;
-  const StoreWrappRight = styled.div`
+  const StoreWrappRight = styled__default.div`
   display: flex;
@@ -276,3 +335,3 @@ flex-wrap: wrap;
 `;
-  const StoreSelect = styled.div`
+  const StoreSelect = styled__default.div`
   width: 100%;
@@ -342,3 +401,3 @@ margin-top: 1rem;
       title: t("Store Details")
-    }, t("Store Details")))), /*#__PURE__*/React__default.createElement(StoreWrappRight, null, /*#__PURE__*/React__default.createElement(InventoryWrapper, null, checkingInventory ? /*#__PURE__*/React__default.createElement(componentsAnimatedEllipsis.AnimatedEllipsis, {
+    }, t("Store Details")))), /*#__PURE__*/React__default.createElement(StoreWrappRight, null, /*#__PURE__*/React__default.createElement(InventoryWrapper, null, checkingInventory ? /*#__PURE__*/React__default.createElement(AnimatedEllipsis, {
       size: "small"
@@ -359,6 +418,24 @@ }) : null, /*#__PURE__*/React__default.createElement(StoreInventory, {
 
-  const StoreFinderWrapper = styled.div`
+  function _extends() {
+    _extends = Object.assign || function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+
+      return target;
+    };
+
+    return _extends.apply(this, arguments);
+  }
+
+  const StoreFinderWrapper = styled__default.div`
   padding: 2rem 1rem;
 `;
-  const StoreFinderInner = styled.div`
+  const StoreFinderInner = styled__default.div`
   width: 100%;
@@ -369,3 +446,3 @@ max-width: 760px;
 `;
-  const SearchBar = styled.div`
+  const SearchBar = styled__default.div`
   height: auto;
@@ -402,6 +479,6 @@ display: flex;
 `;
-  const SearchButton = styled(componentsButton.Button)`
+  const SearchButton = styled__default(componentsButton.Button)`
   margin: 0;
 `;
-  const StoreSearchResults = styled.div`
+  const StoreSearchResults = styled__default.div`
   margin: 3rem auto 0;
@@ -428,2 +505,6 @@ padding: 1rem 0 0;
     const placeholder = country === "us" ? t("Search city or zip code") : t("Search city or postal code");
+    const {
+      register,
+      handleSubmit
+    } = reactHookForm.useForm();
 
@@ -437,8 +518,9 @@ const handleFormSubmit = e => {
     return /*#__PURE__*/React__default.createElement(StoreFinderWrapper, null, /*#__PURE__*/React__default.createElement(componentsTypography.H1, null, t("Select a Store")), /*#__PURE__*/React__default.createElement(StoreFinderInner, null, /*#__PURE__*/React__default.createElement("form", {
-      onSubmit: handleFormSubmit
-    }, /*#__PURE__*/React__default.createElement(SearchBar, null, /*#__PURE__*/React__default.createElement(componentsForm.FormInputField, {
+      onSubmit: handleSubmit(handleFormSubmit)
+    }, /*#__PURE__*/React__default.createElement(SearchBar, null, /*#__PURE__*/React__default.createElement(componentsForm.FormInputField, _extends({
       type: "text",
       name: "search",
       value: searchQuery,
-      placeholder: placeholder,
+      placeholder: placeholder
+    }, register("search"), {
       onChange: event => {
@@ -450,3 +532,3 @@ const {
       }
-    }), /*#__PURE__*/React__default.createElement(SearchButton, {
+    })), /*#__PURE__*/React__default.createElement(SearchButton, {
       context: "Standard",
@@ -453,0 +535,0 @@ onClick: handleFormSubmit,

package.json

 {
   "name": "@arcteryx/components-click-and-collect",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Arcteryx Click and Collect",
@@ -19,5 +19,6 @@ "source": "src/index.js",
   "license": "ISC",
-  "gitHead": "14db24f7abc4d36955b08cab12ecce96c3a9b49f",
+  "gitHead": "f33bd23bbcbcd032b4c6c2b194e1d2edff9073db",
   "peerDependencies": {
     "react": "^16.0.0",
+    "react-hook-form": "^7.5.2",
     "react-i18next": "^11.8.2",
@@ -24,0 +25,0 @@ "styled-components": "^5.2.1"

src/components/StoreFinderSearch.js

@@ -9,2 +9,3 @@ import React, { useState } from "react";
 import { getStoreInventory } from "../utils/helpers";
+import { useForm } from "react-hook-form";
 
@@ -79,2 +80,3 @@ const StoreFinderWrapper = styled.div`
   const placeholder = country === "us" ? t("Search city or zip code") : t("Search city or postal code");
+  const { register, handleSubmit } = useForm();
 
@@ -91,3 +93,3 @@ const handleFormSubmit = e => {
       <StoreFinderInner>
-        <form onSubmit={handleFormSubmit}>
+        <form onSubmit={handleSubmit(handleFormSubmit)}>
           <SearchBar>
@@ -99,2 +101,3 @@ <FormInputField
               placeholder={placeholder}
+              {...register("search")}
               onChange={event => {
@@ -101,0 +104,0 @@ const { value } = event.target;

No alert changes

Improved metrics

Total package byte prevSize

214767

increased by10.39%

Lines of code

3123

increased by7.14%

Worsened metrics

Dependency count

4

increased by33.33%

No dependency changes