@openedx/paragon 21.11.2 → 21.11.3

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.2",
+  "version": "21.11.3",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

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', () => {