@openedx/paragon 21.11.1 → 21.11.3

package/dist/ColorPicker/index.js

@@ -3,7 +3,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import React, { useCallback, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { HexColorPicker } from 'react-colorful';
@@ -22,23 +22,52 @@ function ColorPicker(_ref) {
   } = _ref;
   const [isOpen, open, close] = useToggle(false);
   const [target, setTarget] = React.useState(null);
-  const [hexValid, setHexValid] = React.useState(true);
-  const validateHex = useCallback(input => {
+  const colorIsValid = colorToValidate => {
     const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-    if (input.length > 1 && !input.startsWith('#')) {
-      setColor(`#${input}`);
-    } else {
-      setColor(input);
+    return hexRegex.test(colorToValidate);
+  };
+  const formatHexColorString = colorString => {
+    if (!colorString.startsWith('#')) {
+      return `#${colorString}`.slice(0, 7);
     }
-    if (input === '' || hexRegex.test(input) === true) {
+    return colorString.slice(0, 7);
+  };
+  const [hexValid, setHexValid] = React.useState(() => color === '' || colorIsValid(formatHexColorString(color)));
+  const [hexColorString, setHexColorString] = React.useState(() => {
+    if (color === '') {
+      return '';
+    }
+    return formatHexColorString(color);
+  });
+  const [colorToDisplay, setColorToDisplay] = React.useState(() => {
+    const formattedColor = formatHexColorString(color);
+    if (colorIsValid(formattedColor)) {
+      return formattedColor;
+    }
+    return '#fff';
+  });
+  const setValidatedColor = newColor => {
+    if (newColor === '') {
+      setHexValid(true);
+      setColor('');
+      setHexColorString('');
+      setColorToDisplay('#fff');
+      return;
+    }
+    const formattedColor = formatHexColorString(newColor);
+    if (colorIsValid(formattedColor)) {
       setHexValid(true);
-    } else {
-      setHexValid(false);
+      setColor(formattedColor);
+      setHexColorString(formattedColor);
+      setColorToDisplay(formattedColor);
+      return;
     }
-  }, [setColor]);
+    setHexValid(false);
+    setHexColorString(formattedColor);
 
-  // this is needed for when a user changes the color through the sliders
-  useEffect(() => validateHex(color), [validateHex, color]);
+    // ensure the picker value stays in sync with the textbox
+    setColor(formattedColor);
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: "d-flex"
   }, /*#__PURE__*/React.createElement(OverlayTrigger, {
@@ -66,8 +95,8 @@ function ColorPicker(_ref) {
       textAlign: 'start'
     }
   }, /*#__PURE__*/React.createElement(HexColorPicker, {
-    color: color || '',
-    onChange: setColor
+    color: colorToDisplay,
+    onChange: setValidatedColor
   }), /*#__PURE__*/React.createElement(Form.Group, {
     className: "pgn__hex-form",
     size: "sm"
@@ -76,9 +105,10 @@ function ColorPicker(_ref) {
   }, "Hex"), /*#__PURE__*/React.createElement(Form.Control, {
     className: "pgn__hex-field",
     isInvalid: !hexValid,
-    value: color,
-    onChange: e => validateHex(e.target.value),
-    "data-testid": "hex-input"
+    value: hexColorString,
+    onChange: e => setValidatedColor(e.target.value),
+    "data-testid": "hex-input",
+    spellCheck: "false"
   })), !hexValid && /*#__PURE__*/React.createElement(Form.Control.Feedback, {
     className: "pgn__color-error",
     type: "invalid"

package/dist/ColorPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","useEffect","PropTypes","classNames","HexColorPicker","Button","Form","ModalPopup","OverlayTrigger","Tooltip","useToggle","ColorPicker","_ref","color","setColor","className","size","isOpen","open","close","target","setTarget","useState","hexValid","setHexValid","validateHex","input","hexRegex","length","startsWith","test","createElement","Fragment","placement","overlay","id","ref","style","_objectSpread","background","onClick","positionRef","onClose","textAlign","onChange","Group","Label","Control","isInvalid","value","e","Feedback","type","defaultProps","undefined","propTypes","string","func","isRequired","oneOf"],"sources":["../../src/ColorPicker/index.jsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { HexColorPicker } from 'react-colorful';\n\nimport Button from '../Button';\nimport Form from '../Form';\nimport ModalPopup from '../Modal/ModalPopup';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\nimport useToggle from '../hooks/useToggle';\n\nfunction ColorPicker({\n  color, setColor, className, size,\n}) {\n  const [isOpen, open, close] = useToggle(false);\n  const [target, setTarget] = React.useState(null);\n  const [hexValid, setHexValid] = React.useState(true);\n\n  const validateHex = useCallback((input) => {\n    const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n    if (input.length > 1 && !input.startsWith('#')) {\n      setColor(`#${input}`);\n    } else {\n      setColor(input);\n    }\n    if (input === '' || hexRegex.test(input) === true) {\n      setHexValid(true);\n    } else {\n      setHexValid(false);\n    }\n  }, [setColor]);\n\n  // this is needed for when a user changes the color through the sliders\n  useEffect(() => validateHex(color), [validateHex, color]);\n\n  return (\n    <>\n      <span className=\"d-flex\">\n        <OverlayTrigger\n          placement=\"top\"\n          overlay={<Tooltip id=\"color-picker-tooltip\">Color picker</Tooltip>}\n        >\n          <Button\n            ref={setTarget}\n            className={classNames(\n              className,\n              'pgn__color-picker',\n              `pgn__color-picker-${size}`,\n            )}\n            style={{\n              ...(color && hexValid ? { background: `${color}` } : {}),\n            }}\n            onClick={open}\n          />\n        </OverlayTrigger>\n      </span>\n      <ModalPopup\n        positionRef={target}\n        isOpen={isOpen}\n        style={{ background: 'black' }}\n        onClose={close}\n      >\n        <div\n          className=\"pgn__color-modal rounded shadow\"\n          style={{ textAlign: 'start' }}\n        >\n          <HexColorPicker color={color || ''} onChange={setColor} />\n          <Form.Group className=\"pgn__hex-form\" size=\"sm\">\n            <div>\n              <Form.Label className=\"pgn__hex-label\">Hex</Form.Label>\n              <Form.Control\n                className=\"pgn__hex-field\"\n                isInvalid={!hexValid}\n                value={color}\n                onChange={(e) => validateHex(e.target.value)}\n                data-testid=\"hex-input\"\n              />\n            </div>\n            {!hexValid && (\n              <Form.Control.Feedback\n                className=\"pgn__color-error\"\n                type=\"invalid\"\n              >\n                Colors must be in hexadecimal format.\n              </Form.Control.Feedback>\n            )}\n          </Form.Group>\n        </div>\n      </ModalPopup>\n    </>\n  );\n}\n\nColorPicker.defaultProps = {\n  color: '',\n  className: undefined,\n  size: 'md',\n};\n\nColorPicker.propTypes = {\n  /** A default hex code to preset the picker to display. */\n  color: PropTypes.string,\n  /** Passing setState function allows parent to alter the color. */\n  setColor: PropTypes.func.isRequired,\n  /** A class name to append to the base element. */\n  className: PropTypes.string,\n  /** Size of the color picker */\n  size: PropTypes.oneOf(['sm', 'md']),\n};\n\nexport default ColorPicker;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","HexColorPicker","Button","Form","ModalPopup","OverlayTrigger","Tooltip","useToggle","ColorPicker","_ref","color","setColor","className","size","isOpen","open","close","target","setTarget","useState","colorIsValid","colorToValidate","hexRegex","test","formatHexColorString","colorString","startsWith","slice","hexValid","setHexValid","hexColorString","setHexColorString","colorToDisplay","setColorToDisplay","formattedColor","setValidatedColor","newColor","createElement","Fragment","placement","overlay","id","ref","style","_objectSpread","background","onClick","positionRef","onClose","textAlign","onChange","Group","Label","Control","isInvalid","value","e","spellCheck","Feedback","type","defaultProps","undefined","propTypes","string","func","isRequired","oneOf"],"sources":["../../src/ColorPicker/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { HexColorPicker } from 'react-colorful';\n\nimport Button from '../Button';\nimport Form from '../Form';\nimport ModalPopup from '../Modal/ModalPopup';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\nimport useToggle from '../hooks/useToggle';\n\nfunction ColorPicker({\n  color, setColor, className, size,\n}) {\n  const [isOpen, open, close] = useToggle(false);\n  const [target, setTarget] = React.useState(null);\n\n  const colorIsValid = (colorToValidate) => {\n    const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n    return hexRegex.test(colorToValidate);\n  };\n\n  const formatHexColorString = (colorString) => {\n    if (!colorString.startsWith('#')) {\n      return `#${colorString}`.slice(0, 7);\n    }\n\n    return colorString.slice(0, 7);\n  };\n\n  const [hexValid, setHexValid] = React.useState(() => (color === '' || colorIsValid(formatHexColorString(color))));\n\n  const [hexColorString, setHexColorString] = React.useState(() => {\n    if (color === '') {\n      return '';\n    }\n\n    return formatHexColorString(color);\n  });\n  const [colorToDisplay, setColorToDisplay] = React.useState(() => {\n    const formattedColor = formatHexColorString(color);\n    if (colorIsValid(formattedColor)) {\n      return formattedColor;\n    }\n\n    return '#fff';\n  });\n\n  const setValidatedColor = (newColor) => {\n    if (newColor === '') {\n      setHexValid(true);\n      setColor('');\n      setHexColorString('');\n      setColorToDisplay('#fff');\n      return;\n    }\n\n    const formattedColor = formatHexColorString(newColor);\n\n    if (colorIsValid(formattedColor)) {\n      setHexValid(true);\n      setColor(formattedColor);\n      setHexColorString(formattedColor);\n      setColorToDisplay(formattedColor);\n      return;\n    }\n\n    setHexValid(false);\n    setHexColorString(formattedColor);\n\n    // ensure the picker value stays in sync with the textbox\n    setColor(formattedColor);\n  };\n\n  return (\n    <>\n      <span className=\"d-flex\">\n        <OverlayTrigger\n          placement=\"top\"\n          overlay={<Tooltip id=\"color-picker-tooltip\">Color picker</Tooltip>}\n        >\n          <Button\n            ref={setTarget}\n            className={classNames(\n              className,\n              'pgn__color-picker',\n              `pgn__color-picker-${size}`,\n            )}\n            style={{\n              ...(color && hexValid ? { background: `${color}` } : {}),\n            }}\n            onClick={open}\n          />\n        </OverlayTrigger>\n      </span>\n      <ModalPopup\n        positionRef={target}\n        isOpen={isOpen}\n        style={{ background: 'black' }}\n        onClose={close}\n      >\n        <div\n          className=\"pgn__color-modal rounded shadow\"\n          style={{ textAlign: 'start' }}\n        >\n          <HexColorPicker color={colorToDisplay} onChange={setValidatedColor} />\n          <Form.Group className=\"pgn__hex-form\" size=\"sm\">\n            <div>\n              <Form.Label className=\"pgn__hex-label\">Hex</Form.Label>\n              <Form.Control\n                className=\"pgn__hex-field\"\n                isInvalid={!hexValid}\n                value={hexColorString}\n                onChange={(e) => setValidatedColor(e.target.value)}\n                data-testid=\"hex-input\"\n                spellCheck=\"false\"\n              />\n            </div>\n            {!hexValid && (\n              <Form.Control.Feedback\n                className=\"pgn__color-error\"\n                type=\"invalid\"\n              >\n                Colors must be in hexadecimal format.\n              </Form.Control.Feedback>\n            )}\n          </Form.Group>\n        </div>\n      </ModalPopup>\n    </>\n  );\n}\n\nColorPicker.defaultProps = {\n  color: '',\n  className: undefined,\n  size: 'md',\n};\n\nColorPicker.propTypes = {\n  /** A default hex code to preset the picker to display. */\n  color: PropTypes.string,\n  /** Passing setState function allows parent to alter the color. */\n  setColor: PropTypes.func.isRequired,\n  /** A class name to append to the base element. */\n  className: PropTypes.string,\n  /** Size of the color picker */\n  size: PropTypes.oneOf(['sm', 'md']),\n};\n\nexport default ColorPicker;\n"],"mappings":"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"}

package/dist/Form/FormAutosuggest.js

@@ -14,7 +14,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useIntl } from 'react-intl';
 import { KeyboardArrowUp, KeyboardArrowDown } from '../../icons';
 import Icon from '../Icon';
-import FormGroup from './FormGroup';
+import { FormGroupContextProvider, useFormGroupContext } from './FormGroupContext';
 import FormControl from './FormControl';
 import FormControlFeedback from './FormControlFeedback';
 import IconButton from '../IconButton';
@@ -198,6 +198,10 @@ function FormAutosuggest(_ref) {
     }
     setDisplayValue(e.target.value);
   };
+  const {
+    getControlProps
+  } = useFormGroupContext();
+  const controlProps = getControlProps(props);
   return /*#__PURE__*/React.createElement("div", {
     className: "pgn__form-autosuggest__wrapper",
     ref: parentRef
@@ -205,7 +209,8 @@ function FormAutosuggest(_ref) {
     "aria-live": "assertive",
     className: "sr-only",
     "data-testid": "autosuggest-screen-reader-options-count"
-  }, `${state.dropDownItems.length} options found`), /*#__PURE__*/React.createElement(FormGroup, {
+  }, `${state.dropDownItems.length} options found`), /*#__PURE__*/React.createElement(FormGroupContextProvider, {
+    controlId: controlProps.id,
     isInvalid: !!state.errorMessage
   }, /*#__PURE__*/React.createElement(FormControl, _extends({
     ref: formControlRef,
@@ -221,11 +226,11 @@ function FormAutosuggest(_ref) {
     onClick: handleClick,
     trailingElement: iconToggle,
     "data-testid": "autosuggest-textbox-input"
-  }, props)), helpMessage && !state.errorMessage && /*#__PURE__*/React.createElement(FormControlFeedback, {
+  }, controlProps)), helpMessage && !state.errorMessage && /*#__PURE__*/React.createElement(FormControlFeedback, {
     type: "default"
   }, helpMessage), state.errorMessage && /*#__PURE__*/React.createElement(FormControlFeedback, {
     type: "invalid",
-    "feedback-for": props.name
+    "feedback-for": controlProps.name
   }, errorMessageText)), /*#__PURE__*/React.createElement("ul", {
     id: "pgn__form-autosuggest__dropdown-box",
     className: "pgn__form-autosuggest__dropdown",

package/dist/Form/FormAutosuggest.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormAutosuggest.js","names":["React","useEffect","useState","useRef","PropTypes","v4","uuidv4","useIntl","KeyboardArrowUp","KeyboardArrowDown","Icon","FormGroup","FormControl","FormControlFeedback","IconButton","Spinner","useArrowKeyNavigation","messages","FormAutosuggest","_ref","children","arrowKeyNavigationSelector","ignoredArrowKeysNames","screenReaderText","value","isLoading","errorMessageText","onChange","onSelected","helpMessage","props","_objectWithoutProperties","_excluded","intl","formControlRef","parentRef","selectors","ignoredKeys","isMenuClosed","setIsMenuClosed","isActive","setIsActive","state","setState","displayValue","errorMessage","dropDownItems","activeMenuItemId","setActiveMenuItemId","handleMenuItemFocus","menuItemId","handleItemClick","e","onClick","clickedValue","currentTarget","getAttribute","prevState","_objectSpread","getItems","strToFind","arguments","length","undefined","childrenOpt","Children","map","child","_child$props","rest","_excluded2","cloneElement","id","onFocus","filter","opt","toLowerCase","includes","handleExpand","newState","iconToggle","createElement","className","tabindex","src","iconAs","size","variant","alt","formatMessage","iconButtonOpened","iconButtonClosed","leaveControl","handleDocumentClick","current","contains","target","keyDownHandler","key","preventDefault","focus","document","addEventListener","removeEventListener","setDisplayValue","itemValue","optValue","forEach","push","normalized","find","o","handleClick","handleOnChange","findStr","filteredItems","ref","isInvalid","_extends","toString","role","autoComplete","trailingElement","type","name","animation","defaultProps","floatingLabel","placeholder","readOnly","propTypes","string","arrayOf","bool","func","node"],"sources":["../../src/Form/FormAutosuggest.jsx"],"sourcesContent":["import React, {\n  useEffect, useState, useRef,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { v4 as uuidv4 } from 'uuid';\nimport { useIntl } from 'react-intl';\nimport { KeyboardArrowUp, KeyboardArrowDown } from '../../icons';\nimport Icon from '../Icon';\nimport FormGroup from './FormGroup';\nimport FormControl from './FormControl';\nimport FormControlFeedback from './FormControlFeedback';\nimport IconButton from '../IconButton';\nimport Spinner from '../Spinner';\nimport useArrowKeyNavigation from '../hooks/useArrowKeyNavigation';\nimport messages from './messages';\n\nfunction FormAutosuggest({\n  children,\n  arrowKeyNavigationSelector,\n  ignoredArrowKeysNames,\n  screenReaderText,\n  value,\n  isLoading,\n  errorMessageText,\n  onChange,\n  onSelected,\n  helpMessage,\n  ...props\n}) {\n  const intl = useIntl();\n  const formControlRef = useRef();\n  const parentRef = useArrowKeyNavigation({\n    selectors: arrowKeyNavigationSelector,\n    ignoredKeys: ignoredArrowKeysNames,\n  });\n  const [isMenuClosed, setIsMenuClosed] = useState(true);\n  const [isActive, setIsActive] = useState(false);\n  const [state, setState] = useState({\n    displayValue: value || '',\n    errorMessage: '',\n    dropDownItems: [],\n  });\n  const [activeMenuItemId, setActiveMenuItemId] = useState(null);\n\n  const handleMenuItemFocus = (menuItemId) => {\n    setActiveMenuItemId(menuItemId);\n  };\n\n  const handleItemClick = (e, onClick) => {\n    const clickedValue = e.currentTarget.getAttribute('data-value');\n\n    if (onSelected && clickedValue !== value) {\n      onSelected(clickedValue);\n    }\n\n    setState(prevState => ({\n      ...prevState,\n      dropDownItems: [],\n      displayValue: clickedValue,\n    }));\n\n    setIsMenuClosed(true);\n\n    if (onClick) {\n      onClick(e);\n    }\n  };\n\n  function getItems(strToFind = '') {\n    let childrenOpt = React.Children.map(children, (child) => {\n      // eslint-disable-next-line no-shadow\n      const { children, onClick, ...rest } = child.props;\n      const menuItemId = uuidv4();\n\n      return React.cloneElement(child, {\n        ...rest,\n        children,\n        'data-value': children,\n        onClick: (e) => handleItemClick(e, onClick),\n        id: menuItemId,\n        onFocus: () => handleMenuItemFocus(menuItemId),\n      });\n    });\n\n    if (strToFind.length > 0) {\n      childrenOpt = childrenOpt\n        .filter((opt) => (opt.props.children.toLowerCase().includes(strToFind.toLowerCase())));\n    }\n\n    return childrenOpt;\n  }\n\n  const handleExpand = () => {\n    setIsMenuClosed(!isMenuClosed);\n\n    const newState = {\n      dropDownItems: [],\n    };\n\n    if (isMenuClosed) {\n      setIsActive(true);\n      newState.dropDownItems = getItems(state.displayValue);\n      newState.errorMessage = '';\n    }\n\n    setState(prevState => ({\n      ...prevState,\n      ...newState,\n    }));\n  };\n\n  const iconToggle = (\n    <IconButton\n      className=\"pgn__form-autosuggest__icon-button\"\n      data-testid=\"autosuggest-iconbutton\"\n      tabindex=\"-1\"\n      src={isMenuClosed ? KeyboardArrowDown : KeyboardArrowUp}\n      iconAs={Icon}\n      size=\"sm\"\n      variant=\"secondary\"\n      alt={isMenuClosed\n        ? intl.formatMessage(messages.iconButtonOpened)\n        : intl.formatMessage(messages.iconButtonClosed)}\n      onClick={(e) => handleExpand(e, isMenuClosed)}\n    />\n  );\n\n  const leaveControl = () => {\n    setIsActive(false);\n\n    setState(prevState => ({\n      ...prevState,\n      dropDownItems: [],\n      errorMessage: !state.displayValue ? errorMessageText : '',\n    }));\n\n    setIsMenuClosed(true);\n  };\n\n  const handleDocumentClick = (e) => {\n    if (parentRef.current && !parentRef.current.contains(e.target) && isActive) {\n      leaveControl();\n    }\n  };\n\n  const keyDownHandler = e => {\n    if (e.key === 'Escape' && isActive) {\n      e.preventDefault();\n\n      if (formControlRef) {\n        formControlRef.current.focus();\n      }\n\n      setState(prevState => ({\n        ...prevState,\n        dropDownItems: [],\n      }));\n\n      setIsMenuClosed(true);\n    }\n    if (e.key === 'Tab' && isActive) {\n      leaveControl();\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', keyDownHandler);\n    document.addEventListener('click', handleDocumentClick, true);\n\n    return () => {\n      document.removeEventListener('click', handleDocumentClick, true);\n      document.removeEventListener('keydown', keyDownHandler);\n    };\n  });\n\n  useEffect(() => {\n    if (value || value === '') {\n      setState(prevState => ({\n        ...prevState,\n        displayValue: value,\n      }));\n    }\n  }, [value]);\n\n  const setDisplayValue = (itemValue) => {\n    const optValue = [];\n\n    children.forEach(opt => {\n      optValue.push(opt.props.children);\n    });\n\n    const normalized = itemValue.toLowerCase();\n    const opt = optValue.find((o) => o.toLowerCase() === normalized);\n\n    setState(prevState => ({\n      ...prevState,\n      displayValue: opt || itemValue,\n    }));\n  };\n\n  const handleClick = (e) => {\n    setIsActive(true);\n    const dropDownItems = getItems(e.target.value);\n\n    if (dropDownItems.length > 1) {\n      setState(prevState => ({\n        ...prevState,\n        dropDownItems,\n        errorMessage: '',\n      }));\n\n      setIsMenuClosed(false);\n    }\n  };\n\n  const handleOnChange = (e) => {\n    const findStr = e.target.value;\n\n    if (onChange) { onChange(findStr); }\n\n    if (findStr.length) {\n      const filteredItems = getItems(findStr);\n      setState(prevState => ({\n        ...prevState,\n        dropDownItems: filteredItems,\n        errorMessage: '',\n      }));\n\n      setIsMenuClosed(false);\n    } else {\n      setState(prevState => ({\n        ...prevState,\n        dropDownItems: [],\n      }));\n\n      setIsMenuClosed(true);\n    }\n\n    setDisplayValue(e.target.value);\n  };\n\n  return (\n    <div className=\"pgn__form-autosuggest__wrapper\" ref={parentRef}>\n      <div aria-live=\"assertive\" className=\"sr-only\" data-testid=\"autosuggest-screen-reader-options-count\">\n        {`${state.dropDownItems.length} options found`}\n      </div>\n      <FormGroup isInvalid={!!state.errorMessage}>\n        <FormControl\n          ref={formControlRef}\n          aria-expanded={(state.dropDownItems.length > 0).toString()}\n          aria-owns=\"pgn__form-autosuggest__dropdown-box\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          autoComplete=\"off\"\n          value={state.displayValue}\n          aria-invalid={state.errorMessage}\n          aria-activedescendant={activeMenuItemId}\n          onChange={handleOnChange}\n          onClick={handleClick}\n          trailingElement={iconToggle}\n          data-testid=\"autosuggest-textbox-input\"\n          {...props}\n        />\n\n        {helpMessage && !state.errorMessage && (\n          <FormControlFeedback type=\"default\">\n            {helpMessage}\n          </FormControlFeedback>\n        )}\n\n        {state.errorMessage && (\n          <FormControlFeedback type=\"invalid\" feedback-for={props.name}>\n            {errorMessageText}\n          </FormControlFeedback>\n        )}\n      </FormGroup>\n\n      <ul\n        id=\"pgn__form-autosuggest__dropdown-box\"\n        className=\"pgn__form-autosuggest__dropdown\"\n        role=\"listbox\"\n      >\n        {isLoading ? (\n          <div className=\"pgn__form-autosuggest__dropdown-loading\">\n            <Spinner\n              animation=\"border\"\n              variant=\"dark\"\n              screenReaderText={screenReaderText}\n              data-testid=\"autosuggest-loading-spinner\"\n            />\n          </div>\n        ) : state.dropDownItems.length > 0 && state.dropDownItems}\n      </ul>\n    </div>\n  );\n}\n\nFormAutosuggest.defaultProps = {\n  arrowKeyNavigationSelector: 'a:not(:disabled),li:not(:disabled, .btn-icon),input:not(:disabled)',\n  ignoredArrowKeysNames: ['ArrowRight', 'ArrowLeft'],\n  isLoading: false,\n  className: null,\n  floatingLabel: null,\n  onChange: null,\n  onSelected: null,\n  helpMessage: '',\n  placeholder: '',\n  value: null,\n  errorMessageText: null,\n  readOnly: false,\n  children: null,\n  name: 'form-autosuggest',\n  screenReaderText: 'loading',\n};\n\nFormAutosuggest.propTypes = {\n  /**\n   * Specifies the CSS selector string that indicates to which elements\n   * the user can navigate using the arrow keys\n  */\n  arrowKeyNavigationSelector: PropTypes.string,\n  /** Specifies ignored hook keys. */\n  ignoredArrowKeysNames: PropTypes.arrayOf(PropTypes.string),\n  /** Specifies loading state. */\n  isLoading: PropTypes.bool,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies floating label to display for the input component. */\n  floatingLabel: PropTypes.string,\n  /** Specifies onChange event handler. */\n  onChange: PropTypes.func,\n  /** Specifies help information for the user. */\n  helpMessage: PropTypes.string,\n  /** Specifies the placeholder text for the input. */\n  placeholder: PropTypes.string,\n  /** Specifies values for the input. */\n  value: PropTypes.string,\n  /** Informs user has errors. */\n  errorMessageText: PropTypes.string,\n  /** Specifies the name of the base input element. */\n  name: PropTypes.string,\n  /** Selected list item is read-only. */\n  readOnly: PropTypes.bool,\n  /** Specifies the content of the `FormAutosuggest`. */\n  children: PropTypes.node,\n  /** Specifies the screen reader text */\n  screenReaderText: PropTypes.string,\n  /** Function that receives the selected value. */\n  onSelected: PropTypes.func,\n};\n\nexport default FormAutosuggest;\n"],"mappings":"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"}
+{"version":3,"file":"FormAutosuggest.js","names":["React","useEffect","useState","useRef","PropTypes","v4","uuidv4","useIntl","KeyboardArrowUp","KeyboardArrowDown","Icon","FormGroupContextProvider","useFormGroupContext","FormControl","FormControlFeedback","IconButton","Spinner","useArrowKeyNavigation","messages","FormAutosuggest","_ref","children","arrowKeyNavigationSelector","ignoredArrowKeysNames","screenReaderText","value","isLoading","errorMessageText","onChange","onSelected","helpMessage","props","_objectWithoutProperties","_excluded","intl","formControlRef","parentRef","selectors","ignoredKeys","isMenuClosed","setIsMenuClosed","isActive","setIsActive","state","setState","displayValue","errorMessage","dropDownItems","activeMenuItemId","setActiveMenuItemId","handleMenuItemFocus","menuItemId","handleItemClick","e","onClick","clickedValue","currentTarget","getAttribute","prevState","_objectSpread","getItems","strToFind","arguments","length","undefined","childrenOpt","Children","map","child","_child$props","rest","_excluded2","cloneElement","id","onFocus","filter","opt","toLowerCase","includes","handleExpand","newState","iconToggle","createElement","className","tabindex","src","iconAs","size","variant","alt","formatMessage","iconButtonOpened","iconButtonClosed","leaveControl","handleDocumentClick","current","contains","target","keyDownHandler","key","preventDefault","focus","document","addEventListener","removeEventListener","setDisplayValue","itemValue","optValue","forEach","push","normalized","find","o","handleClick","handleOnChange","findStr","filteredItems","getControlProps","controlProps","ref","controlId","isInvalid","_extends","toString","role","autoComplete","trailingElement","type","name","animation","defaultProps","floatingLabel","placeholder","readOnly","propTypes","string","arrayOf","bool","func","node"],"sources":["../../src/Form/FormAutosuggest.jsx"],"sourcesContent":["import React, {\n  useEffect, useState, useRef,\n} from 'react';\nimport PropTypes from 'prop-types';\nimport { v4 as uuidv4 } from 'uuid';\nimport { useIntl } from 'react-intl';\nimport { KeyboardArrowUp, KeyboardArrowDown } from '../../icons';\nimport Icon from '../Icon';\nimport { FormGroupContextProvider, useFormGroupContext } from './FormGroupContext';\nimport FormControl from './FormControl';\nimport FormControlFeedback from './FormControlFeedback';\nimport IconButton from '../IconButton';\nimport Spinner from '../Spinner';\nimport useArrowKeyNavigation from '../hooks/useArrowKeyNavigation';\nimport messages from './messages';\n\nfunction FormAutosuggest({\n  children,\n  arrowKeyNavigationSelector,\n  ignoredArrowKeysNames,\n  screenReaderText,\n  value,\n  isLoading,\n  errorMessageText,\n  onChange,\n  onSelected,\n  helpMessage,\n  ...props\n}) {\n  const intl = useIntl();\n  const formControlRef = useRef();\n  const parentRef = useArrowKeyNavigation({\n    selectors: arrowKeyNavigationSelector,\n    ignoredKeys: ignoredArrowKeysNames,\n  });\n  const [isMenuClosed, setIsMenuClosed] = useState(true);\n  const [isActive, setIsActive] = useState(false);\n  const [state, setState] = useState({\n    displayValue: value || '',\n    errorMessage: '',\n    dropDownItems: [],\n  });\n  const [activeMenuItemId, setActiveMenuItemId] = useState(null);\n\n  const handleMenuItemFocus = (menuItemId) => {\n    setActiveMenuItemId(menuItemId);\n  };\n\n  const handleItemClick = (e, onClick) => {\n    const clickedValue = e.currentTarget.getAttribute('data-value');\n\n    if (onSelected && clickedValue !== value) {\n      onSelected(clickedValue);\n    }\n\n    setState(prevState => ({\n      ...prevState,\n      dropDownItems: [],\n      displayValue: clickedValue,\n    }));\n\n    setIsMenuClosed(true);\n\n    if (onClick) {\n      onClick(e);\n    }\n  };\n\n  function getItems(strToFind = '') {\n    let childrenOpt = React.Children.map(children, (child) => {\n      // eslint-disable-next-line no-shadow\n      const { children, onClick, ...rest } = child.props;\n      const menuItemId = uuidv4();\n\n      return React.cloneElement(child, {\n        ...rest,\n        children,\n        'data-value': children,\n        onClick: (e) => handleItemClick(e, onClick),\n        id: menuItemId,\n        onFocus: () => handleMenuItemFocus(menuItemId),\n      });\n    });\n\n    if (strToFind.length > 0) {\n      childrenOpt = childrenOpt\n        .filter((opt) => (opt.props.children.toLowerCase().includes(strToFind.toLowerCase())));\n    }\n\n    return childrenOpt;\n  }\n\n  const handleExpand = () => {\n    setIsMenuClosed(!isMenuClosed);\n\n    const newState = {\n      dropDownItems: [],\n    };\n\n    if (isMenuClosed) {\n      setIsActive(true);\n      newState.dropDownItems = getItems(state.displayValue);\n      newState.errorMessage = '';\n    }\n\n    setState(prevState => ({\n      ...prevState,\n      ...newState,\n    }));\n  };\n\n  const iconToggle = (\n    <IconButton\n      className=\"pgn__form-autosuggest__icon-button\"\n      data-testid=\"autosuggest-iconbutton\"\n      tabindex=\"-1\"\n      src={isMenuClosed ? KeyboardArrowDown : KeyboardArrowUp}\n      iconAs={Icon}\n      size=\"sm\"\n      variant=\"secondary\"\n      alt={isMenuClosed\n        ? intl.formatMessage(messages.iconButtonOpened)\n        : intl.formatMessage(messages.iconButtonClosed)}\n      onClick={(e) => handleExpand(e, isMenuClosed)}\n    />\n  );\n\n  const leaveControl = () => {\n    setIsActive(false);\n\n    setState(prevState => ({\n      ...prevState,\n      dropDownItems: [],\n      errorMessage: !state.displayValue ? errorMessageText : '',\n    }));\n\n    setIsMenuClosed(true);\n  };\n\n  const handleDocumentClick = (e) => {\n    if (parentRef.current && !parentRef.current.contains(e.target) && isActive) {\n      leaveControl();\n    }\n  };\n\n  const keyDownHandler = e => {\n    if (e.key === 'Escape' && isActive) {\n      e.preventDefault();\n\n      if (formControlRef) {\n        formControlRef.current.focus();\n      }\n\n      setState(prevState => ({\n        ...prevState,\n        dropDownItems: [],\n      }));\n\n      setIsMenuClosed(true);\n    }\n    if (e.key === 'Tab' && isActive) {\n      leaveControl();\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', keyDownHandler);\n    document.addEventListener('click', handleDocumentClick, true);\n\n    return () => {\n      document.removeEventListener('click', handleDocumentClick, true);\n      document.removeEventListener('keydown', keyDownHandler);\n    };\n  });\n\n  useEffect(() => {\n    if (value || value === '') {\n      setState(prevState => ({\n        ...prevState,\n        displayValue: value,\n      }));\n    }\n  }, [value]);\n\n  const setDisplayValue = (itemValue) => {\n    const optValue = [];\n\n    children.forEach(opt => {\n      optValue.push(opt.props.children);\n    });\n\n    const normalized = itemValue.toLowerCase();\n    const opt = optValue.find((o) => o.toLowerCase() === normalized);\n\n    setState(prevState => ({\n      ...prevState,\n      displayValue: opt || itemValue,\n    }));\n  };\n\n  const handleClick = (e) => {\n    setIsActive(true);\n    const dropDownItems = getItems(e.target.value);\n\n    if (dropDownItems.length > 1) {\n      setState(prevState => ({\n        ...prevState,\n        dropDownItems,\n        errorMessage: '',\n      }));\n\n      setIsMenuClosed(false);\n    }\n  };\n\n  const handleOnChange = (e) => {\n    const findStr = e.target.value;\n\n    if (onChange) { onChange(findStr); }\n\n    if (findStr.length) {\n      const filteredItems = getItems(findStr);\n      setState(prevState => ({\n        ...prevState,\n        dropDownItems: filteredItems,\n        errorMessage: '',\n      }));\n\n      setIsMenuClosed(false);\n    } else {\n      setState(prevState => ({\n        ...prevState,\n        dropDownItems: [],\n      }));\n\n      setIsMenuClosed(true);\n    }\n\n    setDisplayValue(e.target.value);\n  };\n\n  const { getControlProps } = useFormGroupContext();\n  const controlProps = getControlProps(props);\n\n  return (\n    <div className=\"pgn__form-autosuggest__wrapper\" ref={parentRef}>\n      <div aria-live=\"assertive\" className=\"sr-only\" data-testid=\"autosuggest-screen-reader-options-count\">\n        {`${state.dropDownItems.length} options found`}\n      </div>\n      <FormGroupContextProvider\n        controlId={controlProps.id}\n        isInvalid={!!state.errorMessage}\n      >\n        <FormControl\n          ref={formControlRef}\n          aria-expanded={(state.dropDownItems.length > 0).toString()}\n          aria-owns=\"pgn__form-autosuggest__dropdown-box\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          autoComplete=\"off\"\n          value={state.displayValue}\n          aria-invalid={state.errorMessage}\n          aria-activedescendant={activeMenuItemId}\n          onChange={handleOnChange}\n          onClick={handleClick}\n          trailingElement={iconToggle}\n          data-testid=\"autosuggest-textbox-input\"\n          {...controlProps}\n        />\n\n        {helpMessage && !state.errorMessage && (\n          <FormControlFeedback type=\"default\">\n            {helpMessage}\n          </FormControlFeedback>\n        )}\n\n        {state.errorMessage && (\n          <FormControlFeedback type=\"invalid\" feedback-for={controlProps.name}>\n            {errorMessageText}\n          </FormControlFeedback>\n        )}\n      </FormGroupContextProvider>\n\n      <ul\n        id=\"pgn__form-autosuggest__dropdown-box\"\n        className=\"pgn__form-autosuggest__dropdown\"\n        role=\"listbox\"\n      >\n        {isLoading ? (\n          <div className=\"pgn__form-autosuggest__dropdown-loading\">\n            <Spinner\n              animation=\"border\"\n              variant=\"dark\"\n              screenReaderText={screenReaderText}\n              data-testid=\"autosuggest-loading-spinner\"\n            />\n          </div>\n        ) : state.dropDownItems.length > 0 && state.dropDownItems}\n      </ul>\n    </div>\n  );\n}\n\nFormAutosuggest.defaultProps = {\n  arrowKeyNavigationSelector: 'a:not(:disabled),li:not(:disabled, .btn-icon),input:not(:disabled)',\n  ignoredArrowKeysNames: ['ArrowRight', 'ArrowLeft'],\n  isLoading: false,\n  className: null,\n  floatingLabel: null,\n  onChange: null,\n  onSelected: null,\n  helpMessage: '',\n  placeholder: '',\n  value: null,\n  errorMessageText: null,\n  readOnly: false,\n  children: null,\n  name: 'form-autosuggest',\n  screenReaderText: 'loading',\n};\n\nFormAutosuggest.propTypes = {\n  /**\n   * Specifies the CSS selector string that indicates to which elements\n   * the user can navigate using the arrow keys\n  */\n  arrowKeyNavigationSelector: PropTypes.string,\n  /** Specifies ignored hook keys. */\n  ignoredArrowKeysNames: PropTypes.arrayOf(PropTypes.string),\n  /** Specifies loading state. */\n  isLoading: PropTypes.bool,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies floating label to display for the input component. */\n  floatingLabel: PropTypes.string,\n  /** Specifies onChange event handler. */\n  onChange: PropTypes.func,\n  /** Specifies help information for the user. */\n  helpMessage: PropTypes.string,\n  /** Specifies the placeholder text for the input. */\n  placeholder: PropTypes.string,\n  /** Specifies values for the input. */\n  value: PropTypes.string,\n  /** Informs user has errors. */\n  errorMessageText: PropTypes.string,\n  /** Specifies the name of the base input element. */\n  name: PropTypes.string,\n  /** Selected list item is read-only. */\n  readOnly: PropTypes.bool,\n  /** Specifies the content of the `FormAutosuggest`. */\n  children: PropTypes.node,\n  /** Specifies the screen reader text */\n  screenReaderText: PropTypes.string,\n  /** Function that receives the selected value. */\n  onSelected: PropTypes.func,\n};\n\nexport default FormAutosuggest;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.11.1",
+  "version": "21.11.3",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -100,11 +100,11 @@
     "@formatjs/cli": "^5.0.2",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^12.1.4",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.0",
+    "@types/jest": "^29.5.10",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.11",
     "@types/react-test-renderer": "^18.0.0",

package/src/ColorPicker/ColorPicker.test.jsx

@@ -29,13 +29,35 @@ describe('picker works as expected', () => {
   const color = 'wassap';
   const setColor = jest.fn();
   it('validates hex color', async () => {
-    const { rerender } = render(<ColorPicker color={color} setColor={setColor} />);
+    render(<ColorPicker color={color} setColor={setColor} />);
+
     await act(async () => {
       await userEvent.click(screen.getByRole('button'));
     });
+    expect(screen.queryByTestId('hex-input').value).toEqual('#wassap');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
 
-    rerender(<ColorPicker color="#32116c" setColor={setColor} />);
+    await act(async () => {
+      await userEvent.clear(screen.getByTestId('hex-input'));
+      await userEvent.paste(screen.getByTestId('hex-input'), '32116c');
+    });
+    expect(screen.queryByTestId('hex-input').value).toEqual('#32116c');
+    expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
+
+    await act(async () => {
+      await userEvent.clear(screen.getByTestId('hex-input'));
+      await userEvent.paste(screen.getByTestId('hex-input'), 'yuk');
+    });
+
+    expect(screen.queryByTestId('hex-input').value).toEqual('#yuk');
+    expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
+
+    await act(async () => {
+      await userEvent.clear(screen.getByTestId('hex-input'));
+      await userEvent.paste(screen.getByTestId('hex-input'), '#fad');
+    });
+
+    expect(screen.queryByTestId('hex-input').value).toEqual('#fad');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
   });
 });

package/src/ColorPicker/index.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { HexColorPicker } from 'react-colorful';
@@ -15,24 +15,63 @@ function ColorPicker({
 }) {
   const [isOpen, open, close] = useToggle(false);
   const [target, setTarget] = React.useState(null);
-  const [hexValid, setHexValid] = React.useState(true);
 
-  const validateHex = useCallback((input) => {
+  const colorIsValid = (colorToValidate) => {
     const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-    if (input.length > 1 && !input.startsWith('#')) {
-      setColor(`#${input}`);
-    } else {
-      setColor(input);
+    return hexRegex.test(colorToValidate);
+  };
+
+  const formatHexColorString = (colorString) => {
+    if (!colorString.startsWith('#')) {
+      return `#${colorString}`.slice(0, 7);
+    }
+
+    return colorString.slice(0, 7);
+  };
+
+  const [hexValid, setHexValid] = React.useState(() => (color === '' || colorIsValid(formatHexColorString(color))));
+
+  const [hexColorString, setHexColorString] = React.useState(() => {
+    if (color === '') {
+      return '';
+    }
+
+    return formatHexColorString(color);
+  });
+  const [colorToDisplay, setColorToDisplay] = React.useState(() => {
+    const formattedColor = formatHexColorString(color);
+    if (colorIsValid(formattedColor)) {
+      return formattedColor;
     }
-    if (input === '' || hexRegex.test(input) === true) {
+
+    return '#fff';
+  });
+
+  const setValidatedColor = (newColor) => {
+    if (newColor === '') {
       setHexValid(true);
-    } else {
-      setHexValid(false);
+      setColor('');
+      setHexColorString('');
+      setColorToDisplay('#fff');
+      return;
     }
-  }, [setColor]);
 
-  // this is needed for when a user changes the color through the sliders
-  useEffect(() => validateHex(color), [validateHex, color]);
+    const formattedColor = formatHexColorString(newColor);
+
+    if (colorIsValid(formattedColor)) {
+      setHexValid(true);
+      setColor(formattedColor);
+      setHexColorString(formattedColor);
+      setColorToDisplay(formattedColor);
+      return;
+    }
+
+    setHexValid(false);
+    setHexColorString(formattedColor);
+
+    // ensure the picker value stays in sync with the textbox
+    setColor(formattedColor);
+  };
 
   return (
     <>
@@ -65,16 +104,17 @@ function ColorPicker({
           className="pgn__color-modal rounded shadow"
           style={{ textAlign: 'start' }}
         >
-          <HexColorPicker color={color || ''} onChange={setColor} />
+          <HexColorPicker color={colorToDisplay} onChange={setValidatedColor} />
           <Form.Group className="pgn__hex-form" size="sm">
             <div>
               <Form.Label className="pgn__hex-label">Hex</Form.Label>
               <Form.Control
                 className="pgn__hex-field"
                 isInvalid={!hexValid}
-                value={color}
-                onChange={(e) => validateHex(e.target.value)}
+                value={hexColorString}
+                onChange={(e) => setValidatedColor(e.target.value)}
                 data-testid="hex-input"
+                spellCheck="false"
               />
             </div>
             {!hexValid && (

package/src/Form/FormAutosuggest.jsx

@@ -6,7 +6,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { useIntl } from 'react-intl';
 import { KeyboardArrowUp, KeyboardArrowDown } from '../../icons';
 import Icon from '../Icon';
-import FormGroup from './FormGroup';
+import { FormGroupContextProvider, useFormGroupContext } from './FormGroupContext';
 import FormControl from './FormControl';
 import FormControlFeedback from './FormControlFeedback';
 import IconButton from '../IconButton';
@@ -239,12 +239,18 @@ function FormAutosuggest({
     setDisplayValue(e.target.value);
   };
 
+  const { getControlProps } = useFormGroupContext();
+  const controlProps = getControlProps(props);
+
   return (
     <div className="pgn__form-autosuggest__wrapper" ref={parentRef}>
       <div aria-live="assertive" className="sr-only" data-testid="autosuggest-screen-reader-options-count">
         {`${state.dropDownItems.length} options found`}
       </div>
-      <FormGroup isInvalid={!!state.errorMessage}>
+      <FormGroupContextProvider
+        controlId={controlProps.id}
+        isInvalid={!!state.errorMessage}
+      >
         <FormControl
           ref={formControlRef}
           aria-expanded={(state.dropDownItems.length > 0).toString()}
@@ -259,7 +265,7 @@ function FormAutosuggest({
           onClick={handleClick}
           trailingElement={iconToggle}
           data-testid="autosuggest-textbox-input"
-          {...props}
+          {...controlProps}
         />
 
         {helpMessage && !state.errorMessage && (
@@ -269,11 +275,11 @@ function FormAutosuggest({
         )}
 
         {state.errorMessage && (
-          <FormControlFeedback type="invalid" feedback-for={props.name}>
+          <FormControlFeedback type="invalid" feedback-for={controlProps.name}>
             {errorMessageText}
           </FormControlFeedback>
         )}
-      </FormGroup>
+      </FormGroupContextProvider>
 
       <ul
         id="pgn__form-autosuggest__dropdown-box"

package/src/Form/form-autosuggest.mdx

@@ -19,93 +19,101 @@ Form auto-suggest enables users to manually select or type to find matching opti
 
 ```jsx live
 () => {
-    const [selected, setSelected] = useState('');
+  const [selected, setSelected] = useState('');
 
-    return (
-        <Form.Autosuggest
-            floatingLabel="Programming language"
-            aria-label="form autosuggest"
-            helpMessage="Select language"
-            errorMessageText="Error, no selected value"
-            value={selected}
-            onSelected={(value) => setSelected(value)}
-        >
-            <Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Python</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Rube</Form.AutosuggestOption>
-            <Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
-                Option with custom onClick
-            </Form.AutosuggestOption>
-        </Form.Autosuggest>
-    );
-}
+  return (
+    <Form.Group>
+      <Form.Label>
+        <h4>Programming language</h4>
+      </Form.Label>
+      <Form.Autosuggest
+        aria-label="form autosuggest"
+        helpMessage="Select language"
+        errorMessageText="Error, no selected value"
+        value={selected}
+        onSelected={(value) => setSelected(value)}
+      >
+        <Form.AutosuggestOption>JavaScript</Form.AutosuggestOption>
+        <Form.AutosuggestOption>Python</Form.AutosuggestOption>
+        <Form.AutosuggestOption>Rube</Form.AutosuggestOption>
+        <Form.AutosuggestOption onClick={(e) => alert(e.currentTarget.getAttribute('data-value'))}>
+          Option with custom onClick
+        </Form.AutosuggestOption>
+      </Form.Autosuggest>
+    </Form.Group>
+  );
+};
 ```
 
 ## Search Usage
 
 ```jsx live
 () => {
-    const [selected, setSelected] = useState('');
+  const [selected, setSelected] = useState('');
 
-    return (
-        <Form.Autosuggest
-            placeholder="Type 'T'"
-            aria-label="form autosuggest"
-            errorMessageText="Error, no selected value"
-            helpMessage="Select language"
-            value={selected}
-            onSelected={(value) => setSelected(value)}
-        >
-            <Form.AutosuggestOption>PHP</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Java</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Turbo Pascal</Form.AutosuggestOption>
-            <Form.AutosuggestOption>Flask</Form.AutosuggestOption>
-        </Form.Autosuggest>
-    );
-}
+  return (
+    <Form.Autosuggest
+      placeholder="Type 'T'"
+      aria-label="form autosuggest"
+      errorMessageText="Error, no selected value"
+      helpMessage="Select language"
+      value={selected}
+      onSelected={(value) => setSelected(value)}
+    >
+      <Form.AutosuggestOption>PHP</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Java</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Turbo Pascal</Form.AutosuggestOption>
+      <Form.AutosuggestOption>Flask</Form.AutosuggestOption>
+    </Form.Autosuggest>
+  );
+};
 ```
 
 ## Loading state
 
 ```jsx live
 () => {
-    const [data, setData] = useState([]);
-    const [showLoading, setShowLoading] = useState(false);
+  const [data, setData] = useState([]);
+  const [showLoading, setShowLoading] = useState(false);
 
-    useEffect(() => {
-        setShowLoading(true);
-        fetch('https://api.sampleapis.com/coffee/hot')
-            .then(data => data.json())
-            .then(items => {
-                setTimeout(() => {
-                  setData(items);
-                  setShowLoading(false);
-                }, 1500);
-            });
-    }, [])
+  useEffect(() => {
+    setShowLoading(true);
+    fetch('https://api.sampleapis.com/coffee/hot')
+      .then(data => data.json())
+      .then(items => {
+        setTimeout(() => {
+          setData(items);
+          setShowLoading(false);
+        }, 1500);
+      });
+  }, []);
 
-    const searchCoffee = (title) => {
-        setShowLoading(true);
-        fetch('https://api.sampleapis.com/coffee/hot')
-            .then(data => data.json())
-            .then(items => setTimeout(() => {
-                const filteredCoffee = items.filter(res => res.title.toLowerCase().includes(title.toLowerCase()));
-                setShowLoading(false);
-                if (filteredCoffee) { return filteredCoffee }
-                return { ...title, filteredCoffee }
-        }, 1500));
-    };
+  const searchCoffee = (title) => {
+    setShowLoading(true);
+    fetch('https://api.sampleapis.com/coffee/hot')
+      .then(data => data.json())
+      .then(items => setTimeout(() => {
+        const filteredCoffee = items.filter(res => res.title.toLowerCase().includes(title.toLowerCase()));
+        setShowLoading(false);
+        if (filteredCoffee) { return filteredCoffee; }
+        return { ...title, filteredCoffee };
+      }, 1500));
+  };
 
-    return (
-        <Form.Autosuggest
-            isLoading={showLoading}
-            placeholder="This is placeholder"
-            floatingLabel="This is floating label"
-            screenReaderText="Loading..."
-            onChange={searchCoffee}
-        >
-            {data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
-        </Form.Autosuggest>
-    );
-}
+  return (
+    <Form.Group>
+      <Form.Label>
+        <h4>Café API</h4>
+      </Form.Label>
+      <Form.Autosuggest
+        isLoading={showLoading}
+        placeholder="This is placeholder"
+        screenReaderText="Loading..."
+        onChange={searchCoffee}
+      >
+        {data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
+      </Form.Autosuggest>
+    </Form.Group>
+  );
+};
 ```

package/src/Form/tests/FormAutosuggest.test.jsx

@@ -6,6 +6,8 @@ import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
 import FormAutosuggest from '../FormAutosuggest';
 import FormAutosuggestOption from '../FormAutosuggestOption';
+import FormGroup from '../FormGroup';
+import FormLabel from '../FormLabel';
 
 function FormAutosuggestWrapper(props) {
   return (
@@ -31,6 +33,19 @@ function FormAutosuggestTestComponent(props) {
   );
 }
 
+function FormAutosuggestLabelTestComponent() {
+  return (
+    <FormGroup>
+      <FormLabel data-testid="autosuggest-label">
+        <h3>Label</h3>
+      </FormLabel>
+      <FormAutosuggestWrapper>
+        <FormAutosuggestOption>Option</FormAutosuggestOption>
+      </FormAutosuggestWrapper>
+    </FormGroup>
+  );
+}
+
 FormAutosuggestTestComponent.defaultProps = {
   onSelected: jest.fn(),
   onClick: jest.fn(),
@@ -112,6 +127,12 @@ describe('render behavior', () => {
 
     expect(getByText('3 options found')).toBeInTheDocument();
   });
+
+  it('associates labels with the input textbox', () => {
+    const { getByTestId } = render(<FormAutosuggestLabelTestComponent />);
+
+    expect(getByTestId('autosuggest-label').getAttribute('for')).toEqual(getByTestId('autosuggest-textbox-input').getAttribute('id'));
+  });
 });
 
 describe('controlled behavior', () => {

package/src/SelectableBox/tests/SelectableBoxSet.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import SelectableBox from '..';