@comicrelief/component-library 8.10.0 → 8.10.2

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

@@ -24,7 +24,7 @@ const KEY_CODE_ESCAPE = 27;
  *
  * See the Typeahead and SchoolLookup molecules for the full implementation
  */
-const TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) => {
   let {
     options,
     onChange,
@@ -34,14 +34,37 @@ const TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef((_ref, ref)
     label,
     dropdownInstruction = null,
     className = '',
+    hideBorder = false,
     ...otherInputProps
   } = _ref;
   const [activeOption, setActiveOption] = (0, _react.useState)(-1);
   const [forceClosed, setForceClosed] = (0, _react.useState)(false);
+  const dropdownRef = (0, _react.useRef)(null);
+  const containerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
-    // reset if options change
+    const handleClickOutside = event => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && !containerRef.current.contains(event.target)) {
+        setForceClosed(true);
+      }
+    };
+
+    // Only add the listeners if we have options showing
+    if (options.length > 0 && !forceClosed) {
+      ['mousedown', 'touchstart'].forEach(event => document.addEventListener(event, handleClickOutside));
+    }
+    return () => {
+      ['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)(() => {
     setForceClosed(false);
+    setActiveOption(-1);
   }, [options]);
   const down = () => activeOption < options.length - 1 ? setActiveOption(activeOption + 1) : setActiveOption(0);
   const up = () => activeOption < 1 ? setActiveOption(options.length - 1) : setActiveOption(activeOption - 1);
@@ -74,24 +97,29 @@ const TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef((_ref, ref)
     onSelect,
     dropdownInstruction,
     activeOption,
+    closeDropdown,
     resetActiveOption: () => setActiveOption(-1)
   };
   return /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.Container, {
     className: "TextInputWithDropdown ".concat(className).trim(),
-    onKeyDown: navigateOptions
+    onKeyDown: navigateOptions,
+    ref: containerRef
   }, /*#__PURE__*/_react.default.createElement(_Input.default, Object.assign({}, inputProps, {
     className: "TextInputWithDropdown__input",
-    ref: ref
-  })), options.length > 0 && forceClosed === false && /*#__PURE__*/_react.default.createElement(Options, Object.assign({}, optionsProps, {
-    className: "TextInputWithDropdown__options"
+    ref: forwardedRef
+  })), options.length > 0 && !forceClosed && /*#__PURE__*/_react.default.createElement(Options, Object.assign({}, optionsProps, {
+    className: "TextInputWithDropdown__options",
+    ref: dropdownRef,
+    hideBorder: hideBorder
   })));
 });
-const Options = _ref2 => {
+const Options = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     options,
     dropdownInstruction,
     onSelect,
     activeOption,
+    closeDropdown,
     resetActiveOption,
     ...rest
   } = _ref2;
@@ -109,11 +137,15 @@ const Options = _ref2 => {
     }, 100);
   };
   return /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.Dropdown, rest, /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.DropdownList, {
+    ref: 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",
@@ -129,5 +161,6 @@ const Options = _ref2 => {
     "aria-selected": index === activeOption,
     ref: index === activeOption ? element => element && element.focus() : null
   }, /*#__PURE__*/_react.default.createElement(_Text.default, null, option)))));
-};
+});
+TextInputWithDropdown.displayName = 'TextInputWithDropdown';
 var _default = exports.default = TextInputWithDropdown;

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

@@ -16,7 +16,7 @@ const Container = exports.Container = _styledComponents.default.div.withConfig({
 const Dropdown = exports.Dropdown = _styledComponents.default.div.withConfig({
   displayName: "TextInputWithDropdownstyle__Dropdown",
   componentId: "sc-1s4bv7m-1"
-})(["", " font-family:", ";position:absolute;left:0;max-height:300px;overflow:auto;background-color:", ";border:1px solid;margin-top:-1px;width:100%;@media ", "{max-width:500px;}"], (0, _zIndex.default)('high'), _ref => {
+})(["", " font-family:", ";position:absolute;left:0;max-height:300px;overflow:auto;background-color:", ";border:", ";margin-top:-1px;width:100%;@media ", "{max-width:500px;}"], (0, _zIndex.default)('high'), _ref => {
   let {
     theme
   } = _ref;
@@ -28,8 +28,13 @@ const Dropdown = exports.Dropdown = _styledComponents.default.div.withConfig({
   return theme.color('white');
 }, _ref3 => {
   let {
-    theme
+    hideBorder
   } = _ref3;
+  return hideBorder ? 'none' : '1px solid';
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
   return theme.allBreakpoints('M');
 });
 const DropdownList = exports.DropdownList = _styledComponents.default.ul.withConfig({
@@ -43,15 +48,15 @@ const DropdownItem = exports.DropdownItem = _styledComponents.default.li.withCon
 const DropdownItemSelectable = exports.DropdownItemSelectable = (0, _styledComponents.default)(DropdownItem).withConfig({
   displayName: "TextInputWithDropdownstyle__DropdownItemSelectable",
   componentId: "sc-1s4bv7m-4"
-})(["cursor:pointer;border-top:1px solid ", ";&:hover,&:focus{background-color:", ";}"], _ref4 => {
+})(["cursor:pointer;border-top:1px solid ", ";&:hover,&:focus{background-color:", ";}"], _ref5 => {
   let {
     theme
-  } = _ref4;
+  } = _ref5;
   return theme.color('grey_light');
-}, _ref5 => {
+}, _ref6 => {
   let {
     theme
-  } = _ref5;
+  } = _ref6;
   return theme.color('grey_light');
 });
 const TextItalic = exports.TextItalic = (0, _styledComponents.default)(_Text.default).withConfig({

package/dist/components/Molecules/SchoolLookup/SchoolLookup.js

@@ -25,6 +25,7 @@ const SchoolLookup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     dropdownInstruction = 'Please select a school from the list below',
     notFoundMessage = "Sorry, we can't find this school",
     onSelect,
+    hideBorder = false,
     ...rest
   } = _ref;
   const props = {
@@ -37,10 +38,12 @@ const SchoolLookup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     placeholder,
     notFoundMessage,
     dropdownInstruction,
+    hideBorder,
     ...rest
   };
   return /*#__PURE__*/_react.default.createElement(_Typeahead.default, Object.assign({}, props, {
     ref: ref
   }));
 });
+SchoolLookup.displayName = 'SchoolLookup';
 var _default = exports.default = SchoolLookup;

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import Input from '../Input/Input';
@@ -7,7 +7,6 @@ import {
   Container,
   Dropdown,
   DropdownList,
-  DropdownItem,
   DropdownItemSelectable,
   TextItalic
 } from './TextInputWithDropdown.style';
@@ -37,16 +36,44 @@ const TextInputWithDropdown = React.forwardRef(
       label,
       dropdownInstruction = null,
       className = '',
+      hideBorder = false,
       ...otherInputProps
     },
-    ref
+    forwardedRef
   ) => {
     const [activeOption, setActiveOption] = useState(-1);
     const [forceClosed, setForceClosed] = useState(false);
+    const dropdownRef = useRef(null);
+    const containerRef = useRef(null);
+
     useEffect(() => {
-      // reset if options change
+      const handleClickOutside = event => {
+        if (dropdownRef.current
+          && !dropdownRef.current.contains(event.target)
+          && !containerRef.current.contains(event.target)) {
+          setForceClosed(true);
+        }
+      };
+
+      // Only add the listeners if we have options showing
+      if (options.length > 0 && !forceClosed) {
+        ['mousedown', 'touchstart'].forEach(event => document.addEventListener(event, handleClickOutside));
+      }
+
+      return () => {
+        ['mousedown', 'touchstart'].forEach(event => document.removeEventListener(event, handleClickOutside));
+      };
+    }, [options.length, forceClosed, onChange]);
+
+    const closeDropdown = () => {
+      setForceClosed(true);
       setActiveOption(-1);
+    };
+
+    // Reset forceClosed when options change
+    useEffect(() => {
       setForceClosed(false);
+      setActiveOption(-1);
     }, [options]);
 
     const down = () => (activeOption < options.length - 1
@@ -89,6 +116,7 @@ const TextInputWithDropdown = React.forwardRef(
       onSelect,
       dropdownInstruction,
       activeOption,
+      closeDropdown,
       resetActiveOption: () => setActiveOption(-1)
     };
 
@@ -96,16 +124,19 @@ const TextInputWithDropdown = React.forwardRef(
       <Container
         className={`TextInputWithDropdown ${className}`.trim()}
         onKeyDown={navigateOptions}
+        ref={containerRef}
       >
         <Input
           {...inputProps}
           className="TextInputWithDropdown__input"
-          ref={ref}
+          ref={forwardedRef}
         />
-        {options.length > 0 && forceClosed === false && (
+        {options.length > 0 && !forceClosed && (
           <Options
             {...optionsProps}
             className="TextInputWithDropdown__options"
+            ref={dropdownRef}
+            hideBorder={hideBorder}
           />
         )}
       </Container>
@@ -113,14 +144,15 @@ const TextInputWithDropdown = React.forwardRef(
   }
 );
 
-const Options = ({
+const Options = React.forwardRef(({
   options,
   dropdownInstruction,
   onSelect,
   activeOption,
+  closeDropdown,
   resetActiveOption,
   ...rest
-}) => {
+}, ref) => {
   // Reset 'activeOption' when the list is unfocused.
   const onBlur = e => {
     const { target } = e;
@@ -136,6 +168,7 @@ const Options = ({
   return (
     <Dropdown {...rest}>
       <DropdownList
+        ref={ref}
         role="listbox"
         onBlur={onBlur}
         aria-activedescendant={
@@ -143,9 +176,16 @@ const Options = ({
         }
       >
         {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
@@ -173,7 +213,7 @@ const Options = ({
       </DropdownList>
     </Dropdown>
   );
-};
+});
 
 TextInputWithDropdown.propTypes = {
   options: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -183,7 +223,8 @@ TextInputWithDropdown.propTypes = {
   name: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   className: PropTypes.string,
-  dropdownInstruction: PropTypes.string
+  dropdownInstruction: PropTypes.string,
+  hideBorder: PropTypes.bool
 };
 
 Options.propTypes = {
@@ -191,7 +232,11 @@ Options.propTypes = {
   onSelect: PropTypes.func.isRequired,
   dropdownInstruction: PropTypes.string,
   activeOption: PropTypes.number.isRequired,
-  resetActiveOption: PropTypes.func.isRequired
+  resetActiveOption: PropTypes.func.isRequired,
+  hideBorder: PropTypes.bool,
+  closeDropdown: PropTypes.func
 };
 
+TextInputWithDropdown.displayName = 'TextInputWithDropdown';
+
 export default TextInputWithDropdown;

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

@@ -16,7 +16,7 @@ const Dropdown = styled.div`
   max-height: 300px;
   overflow: auto;
   background-color: ${({ theme }) => theme.color('white')};
-  border: 1px solid;
+  border: ${({ hideBorder }) => (hideBorder ? 'none' : '1px solid')};
   margin-top: -1px;
   width: 100%;
 

package/src/components/Molecules/SchoolLookup/SchoolLookup.js

@@ -25,6 +25,7 @@ const SchoolLookup = React.forwardRef(
       dropdownInstruction = 'Please select a school from the list below',
       notFoundMessage = "Sorry, we can't find this school",
       onSelect,
+      hideBorder = false,
       ...rest
     },
     ref
@@ -39,6 +40,7 @@ const SchoolLookup = React.forwardRef(
       placeholder,
       notFoundMessage,
       dropdownInstruction,
+      hideBorder,
       ...rest
     };
 
@@ -52,7 +54,10 @@ SchoolLookup.propTypes = {
   label: PropTypes.string,
   placeholder: PropTypes.string,
   dropdownInstruction: PropTypes.string,
-  notFoundMessage: PropTypes.string
+  notFoundMessage: PropTypes.string,
+  hideBorder: PropTypes.bool
 };
 
+SchoolLookup.displayName = 'SchoolLookup';
+
 export default SchoolLookup;