@comicrelief/component-library 8.10.1 → 8.11.0

package/dist/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -56,6 +56,10 @@ const TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef((_ref, forw
       ['mousedown', 'touchstart'].forEach(event => document.removeEventListener(event, handleClickOutside));
     };
   }, [options.length, forceClosed, onChange]);
+  const closeDropdown = () => {
+    setForceClosed(true);
+    setActiveOption(-1);
+  };
 
   // Reset forceClosed when options change
   (0, _react.useEffect)(() => {
@@ -93,6 +97,7 @@ const TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef((_ref, forw
     onSelect,
     dropdownInstruction,
     activeOption,
+    closeDropdown,
     resetActiveOption: () => setActiveOption(-1)
   };
   return /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.Container, {
@@ -114,6 +119,7 @@ const Options = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     dropdownInstruction,
     onSelect,
     activeOption,
+    closeDropdown,
     resetActiveOption,
     ...rest
   } = _ref2;
@@ -135,8 +141,11 @@ const Options = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     role: "listbox",
     onBlur: onBlur,
     "aria-activedescendant": activeOption > -1 ? "option-".concat(activeOption) : undefined
-  }, dropdownInstruction && /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.DropdownItem, {
-    role: "option"
+  }, dropdownInstruction && /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.DropdownItemSelectable, {
+    id: "dropdown-instruction",
+    role: "option",
+    key: "dropdown-instruction",
+    onClick: closeDropdown
   }, /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.TextItalic, null, dropdownInstruction)), options.map((option, index) => /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.DropdownItemSelectable, {
     id: "option-".concat(index),
     role: "option",

package/dist/components/Molecules/Lookup/Lookup.js

@@ -35,7 +35,6 @@ const KEY_CODE_ENTER = 13;
  * - only throw errors with user-friendly messages
  *
  * Any errors thrown will be caught and the message will be displayed to the user.
- *
  * The `onSelect` function will receive the chosen option.
  *
  * @param name
@@ -118,7 +117,8 @@ const Lookup = _ref2 => {
     onClick: () => handler(),
     loading: isSearching,
     disabled: isSearching,
-    loadingText: "Searching"
+    loadingText: "Searching",
+    "data-test": "lookupButton"
   }, buttonText));
 };
 var _default = exports.default = Lookup;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "8.10.1",
+  "version": "8.11.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -7,7 +7,6 @@ import {
   Container,
   Dropdown,
   DropdownList,
-  DropdownItem,
   DropdownItemSelectable,
   TextItalic
 } from './TextInputWithDropdown.style';
@@ -66,6 +65,11 @@ const TextInputWithDropdown = React.forwardRef(
       };
     }, [options.length, forceClosed, onChange]);
 
+    const closeDropdown = () => {
+      setForceClosed(true);
+      setActiveOption(-1);
+    };
+
     // Reset forceClosed when options change
     useEffect(() => {
       setForceClosed(false);
@@ -112,6 +116,7 @@ const TextInputWithDropdown = React.forwardRef(
       onSelect,
       dropdownInstruction,
       activeOption,
+      closeDropdown,
       resetActiveOption: () => setActiveOption(-1)
     };
 
@@ -144,6 +149,7 @@ const Options = React.forwardRef(({
   dropdownInstruction,
   onSelect,
   activeOption,
+  closeDropdown,
   resetActiveOption,
   ...rest
 }, ref) => {
@@ -170,9 +176,16 @@ const Options = React.forwardRef(({
         }
       >
         {dropdownInstruction && (
-          <DropdownItem role="option">
-            <TextItalic>{dropdownInstruction}</TextItalic>
-          </DropdownItem>
+          <DropdownItemSelectable
+            id="dropdown-instruction"
+            role="option"
+            key="dropdown-instruction"
+            onClick={closeDropdown}
+          >
+            <TextItalic>
+              {dropdownInstruction}
+            </TextItalic>
+          </DropdownItemSelectable>
         )}
         {options.map((option, index) => (
           <DropdownItemSelectable
@@ -220,7 +233,8 @@ Options.propTypes = {
   dropdownInstruction: PropTypes.string,
   activeOption: PropTypes.number.isRequired,
   resetActiveOption: PropTypes.func.isRequired,
-  hideBorder: PropTypes.bool
+  hideBorder: PropTypes.bool,
+  closeDropdown: PropTypes.func
 };
 
 TextInputWithDropdown.displayName = 'TextInputWithDropdown';

package/src/components/Molecules/Lookup/Lookup.js

@@ -11,7 +11,6 @@ const StyledButton = styled(ButtonWithStates)`${({ theme }) => css`
   background-color: ${theme.color('white')};
   padding-left: ${spacing('lg')};
   padding-right: ${spacing('lg')};
-  
   &:hover {
     color: ${theme.color('grey_dark')};
     background-color: ${theme.color('white')};
@@ -33,7 +32,6 @@ const KEY_CODE_ENTER = 13;
  * - only throw errors with user-friendly messages
  *
  * Any errors thrown will be caught and the message will be displayed to the user.
- *
  * The `onSelect` function will receive the chosen option.
  *
  * @param name
@@ -121,6 +119,7 @@ const Lookup = ({
         loading={isSearching}
         disabled={isSearching}
         loadingText="Searching"
+        data-test="lookupButton"
       >
         {buttonText}
       </StyledButton>