@openedx/paragon 22.0.0-alpha.19 → 22.0.0-alpha.21

package/dist/Form/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","names":["React","useCallback","useEffect","PropTypes","classNames","RBFormControl","useFormGroupContext","FormControlFeedback","FormControlDecoratorGroup","callAllHandlers","useHasValue","FormControl","forwardRef","_ref","ref","as","className","controlClassName","leadingElement","trailingElement","floatingLabel","autoResize","onChange","props","_objectWithoutProperties","_excluded","_useFormGroupContext","isInvalid","isValid","getControlProps","formGroupContext","_excluded2","inputRef","useRef","resolvedRef","size","hasValue","checkInputEventValue","defaultValue","value","handleResize","current","initialHeight","offsets","offsetHeight","clientHeight","style","height","scrollHeight","controlProps","_objectSpread","onBlur","handleOnChange","e","createElement","_extends","SIZE_CHOICES","Feedback","Description","propTypes","string","elementType","func","oneOfType","number","id","oneOf","node","plaintext","bool","defaultProps","undefined"],"sources":["../../src/Form/FormControl.jsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport RBFormControl from 'react-bootstrap/FormControl';\nimport { useFormGroupContext } from './FormGroupContext';\nimport FormControlFeedback from './FormControlFeedback';\nimport FormControlDecoratorGroup from './FormControlDecoratorGroup';\n\nimport { callAllHandlers, useHasValue } from './fieldUtils';\n\nconst FormControl = React.forwardRef(({\n  as,\n  className,\n  controlClassName,\n  leadingElement,\n  trailingElement,\n  floatingLabel,\n  autoResize,\n  onChange,\n  ...props\n}, ref) => {\n  const {\n    isInvalid,\n    isValid,\n    getControlProps,\n    ...formGroupContext\n  } = useFormGroupContext();\n  const inputRef = React.useRef();\n  const resolvedRef = ref || inputRef;\n  const size = props.size || formGroupContext.size;\n\n  const [hasValue, checkInputEventValue] = useHasValue({\n    defaultValue: props.defaultValue,\n    value: props.value,\n  });\n\n  const handleResize = useCallback(() => {\n    if (as === 'textarea' && autoResize) {\n      if (!resolvedRef.current.initialHeight && !resolvedRef.current.offsets) {\n        resolvedRef.current.initialHeight = resolvedRef.current.offsetHeight;\n        resolvedRef.current.offsets = resolvedRef.current.offsetHeight - resolvedRef.current.clientHeight;\n      }\n      resolvedRef.current.style.height = `${resolvedRef.current.initialHeight}px`;\n      resolvedRef.current.style.height = `${resolvedRef.current.scrollHeight + resolvedRef.current.offsets}px`;\n    }\n  }, [as, autoResize, resolvedRef]);\n\n  useEffect(() => {\n    handleResize();\n  }, [handleResize]);\n\n  const controlProps = getControlProps({\n    ...props,\n    // eslint-disable-next-line react/prop-types\n    onBlur: callAllHandlers(checkInputEventValue, props.onBlur),\n  });\n\n  const handleOnChange = (e) => {\n    handleResize();\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <FormControlDecoratorGroup\n      size={size}\n      leadingElement={leadingElement}\n      trailingElement={trailingElement}\n      floatingLabel={floatingLabel}\n      className={className}\n    >\n      <RBFormControl\n        as={as}\n        ref={resolvedRef}\n        size={size}\n        isInvalid={isInvalid}\n        isValid={isValid}\n        className={classNames(controlClassName, {\n          'has-value': hasValue,\n        })}\n        onChange={handleOnChange}\n        {...controlProps}\n      />\n    </FormControlDecoratorGroup>\n  );\n});\n\nconst SIZE_CHOICES = ['sm', 'lg'];\n\nFormControl.Feedback = FormControlFeedback;\nFormControl.Description = FormControlFeedback;\n\nFormControl.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies base element for the control component. */\n  as: PropTypes.elementType,\n  /** Specifies function that is triggered on input value change. */\n  onChange: PropTypes.func,\n  /** Specifies default value of the input component. */\n  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Specifies current value of the input component. */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Specifies id of the control component. */\n  id: PropTypes.string,\n  /** Specifies class name for the control component. */\n  controlClassName: PropTypes.string,\n  /** Specifies size for the control component. */\n  size: PropTypes.oneOf(SIZE_CHOICES),\n  /** Specifies leading element to display for the input component. */\n  leadingElement: PropTypes.node,\n  /** Specifies trailing element to display for the input component. */\n  trailingElement: PropTypes.node,\n  /** Specifies floating label to display for the input component. */\n  floatingLabel: PropTypes.node,\n  /** Specifies whether to render input as plain text. */\n  plaintext: PropTypes.bool,\n  /** Specifies whether to display control in valid state, this affects styling. */\n  isValid: PropTypes.bool,\n  /** Specifies whether to display control in invalid state, this affects styling. */\n  isInvalid: PropTypes.bool,\n  /** Only for `as=\"textarea\"`. Specifies whether the input can be resized according to the height of content. */\n  autoResize: PropTypes.bool,\n};\n\nFormControl.defaultProps = {\n  as: 'input',\n  className: undefined,\n  id: undefined,\n  controlClassName: undefined,\n  onChange: undefined,\n  defaultValue: undefined,\n  value: undefined,\n  size: undefined,\n  leadingElement: undefined,\n  trailingElement: undefined,\n  floatingLabel: undefined,\n  plaintext: false,\n  isValid: undefined,\n  isInvalid: undefined,\n  autoResize: false,\n};\n\nexport default FormControl;\n"],"mappings":"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"}
+{"version":3,"file":"FormControl.js","names":["React","useCallback","useEffect","PropTypes","classNames","RBFormControl","IMaskInput","useFormGroupContext","FormControlFeedback","FormControlDecoratorGroup","callAllHandlers","useHasValue","FormControl","forwardRef","_ref","ref","as","className","controlClassName","leadingElement","trailingElement","floatingLabel","autoResize","onChange","inputMask","props","_objectWithoutProperties","_excluded","_useFormGroupContext","isInvalid","isValid","getControlProps","formGroupContext","_excluded2","inputRef","useRef","resolvedRef","size","hasValue","checkInputEventValue","defaultValue","value","handleResize","current","initialHeight","offsets","offsetHeight","clientHeight","style","height","scrollHeight","controlProps","_objectSpread","onBlur","handleOnChange","e","createElement","_extends","mask","SIZE_CHOICES","Feedback","Description","propTypes","string","elementType","func","oneOfType","number","id","oneOf","node","plaintext","bool","defaultProps","undefined"],"sources":["../../src/Form/FormControl.jsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport RBFormControl from 'react-bootstrap/FormControl';\nimport { IMaskInput } from 'react-imask';\nimport { useFormGroupContext } from './FormGroupContext';\nimport FormControlFeedback from './FormControlFeedback';\nimport FormControlDecoratorGroup from './FormControlDecoratorGroup';\n\nimport { callAllHandlers, useHasValue } from './fieldUtils';\n\nconst FormControl = React.forwardRef(({\n  as,\n  className,\n  controlClassName,\n  leadingElement,\n  trailingElement,\n  floatingLabel,\n  autoResize,\n  onChange,\n  inputMask,\n  ...props\n}, ref) => {\n  const {\n    isInvalid,\n    isValid,\n    getControlProps,\n    ...formGroupContext\n  } = useFormGroupContext();\n  const inputRef = React.useRef();\n  const resolvedRef = ref || inputRef;\n  const size = props.size || formGroupContext.size;\n\n  const [hasValue, checkInputEventValue] = useHasValue({\n    defaultValue: props.defaultValue,\n    value: props.value,\n  });\n\n  const handleResize = useCallback(() => {\n    if (as === 'textarea' && autoResize) {\n      if (!resolvedRef.current.initialHeight && !resolvedRef.current.offsets) {\n        resolvedRef.current.initialHeight = resolvedRef.current.offsetHeight;\n        resolvedRef.current.offsets = resolvedRef.current.offsetHeight - resolvedRef.current.clientHeight;\n      }\n      resolvedRef.current.style.height = `${resolvedRef.current.initialHeight}px`;\n      resolvedRef.current.style.height = `${resolvedRef.current.scrollHeight + resolvedRef.current.offsets}px`;\n    }\n  }, [as, autoResize, resolvedRef]);\n\n  useEffect(() => {\n    handleResize();\n  }, [handleResize]);\n\n  const controlProps = getControlProps({\n    ...props,\n    // eslint-disable-next-line react/prop-types\n    onBlur: callAllHandlers(checkInputEventValue, props.onBlur),\n  });\n\n  const handleOnChange = (e) => {\n    handleResize();\n    if (onChange) {\n      onChange(e);\n    }\n  };\n\n  return (\n    <FormControlDecoratorGroup\n      size={size}\n      leadingElement={leadingElement}\n      trailingElement={trailingElement}\n      floatingLabel={floatingLabel}\n      className={className}\n    >\n      <RBFormControl\n        as={inputMask ? IMaskInput : as}\n        ref={resolvedRef}\n        size={size}\n        isInvalid={isInvalid}\n        isValid={isValid}\n        className={classNames(controlClassName, {\n          'has-value': hasValue,\n        })}\n        onChange={handleOnChange}\n        mask={inputMask}\n        {...controlProps}\n      />\n    </FormControlDecoratorGroup>\n  );\n});\n\nconst SIZE_CHOICES = ['sm', 'lg'];\n\nFormControl.Feedback = FormControlFeedback;\nFormControl.Description = FormControlFeedback;\n\nFormControl.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies base element for the control component. */\n  as: PropTypes.elementType,\n  /** Specifies function that is triggered on input value change. */\n  onChange: PropTypes.func,\n  /** Specifies default value of the input component. */\n  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Specifies current value of the input component. */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Specifies id of the control component. */\n  id: PropTypes.string,\n  /** Specifies class name for the control component. */\n  controlClassName: PropTypes.string,\n  /** Specifies size for the control component. */\n  size: PropTypes.oneOf(SIZE_CHOICES),\n  /** Specifies leading element to display for the input component. */\n  leadingElement: PropTypes.node,\n  /** Specifies trailing element to display for the input component. */\n  trailingElement: PropTypes.node,\n  /** Specifies floating label to display for the input component. */\n  floatingLabel: PropTypes.node,\n  /** Specifies whether to render input as plain text. */\n  plaintext: PropTypes.bool,\n  /** Specifies whether to display control in valid state, this affects styling. */\n  isValid: PropTypes.bool,\n  /** Specifies whether to display control in invalid state, this affects styling. */\n  isInvalid: PropTypes.bool,\n  /** Only for `as=\"textarea\"`. Specifies whether the input can be resized according to the height of content. */\n  autoResize: PropTypes.bool,\n  /** Specifies what format to use for the input mask. */\n  inputMask: PropTypes.string,\n};\n\nFormControl.defaultProps = {\n  as: 'input',\n  className: undefined,\n  id: undefined,\n  controlClassName: undefined,\n  onChange: undefined,\n  defaultValue: undefined,\n  value: undefined,\n  size: undefined,\n  leadingElement: undefined,\n  trailingElement: undefined,\n  floatingLabel: undefined,\n  plaintext: false,\n  isValid: undefined,\n  isInvalid: undefined,\n  autoResize: false,\n  inputMask: undefined,\n};\n\nexport default FormControl;\n"],"mappings":"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"}

package/dist/ProductTour/Checkpoint.js

@@ -33,6 +33,7 @@ const Checkpoint = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       // Use the Popper library to translate the Checkpoint to its target's coordinates
       const checkpointPopper = createPopper(targetElement, checkpoint, {
         placement: isMobile ? 'top' : placement,
+        strategy: 'fixed',
         modifiers: [{
           name: 'arrow',
           options: {

package/dist/ProductTour/Checkpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkpoint.js","names":["React","useEffect","useState","useMediaQuery","PropTypes","createPopper","FormattedMessage","breakpoints","CheckpointActionRow","CheckpointBody","CheckpointBreadcrumbs","CheckpointTitle","Checkpoint","forwardRef","_ref","ref","body","index","placement","target","title","totalCheckpoints","props","_objectWithoutProperties","_excluded","checkpointVisible","setCheckpointVisible","isMobile","maxWidth","small","targetElement","document","querySelector","checkpoint","checkpointPopper","modifiers","name","options","padding","offset","tetherOffset","forceUpdate","targetOffset","getBoundingClientRect","top","bottom","global","innerHeight","includes","scrollTo","behavior","button","focus","isLastCheckpoint","isOnlyCheckpoint","createElement","id","className","role","style","visibility","pointerEvents","defaultMessage","value","step","description","currentIndex","_extends","defaultProps","advanceButtonText","dismissButtonText","endButtonText","showDismissButton","undefined","propTypes","node","number","isRequired","onAdvance","func","onDismiss","onEnd","oneOf","string","bool"],"sources":["../../src/ProductTour/Checkpoint.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport PropTypes from 'prop-types';\nimport { createPopper } from '@popperjs/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport breakpoints from '../utils/breakpoints';\n\nimport CheckpointActionRow from './CheckpointActionRow';\nimport CheckpointBody from './CheckpointBody';\nimport CheckpointBreadcrumbs from './CheckpointBreadcrumbs';\nimport CheckpointTitle from './CheckpointTitle';\n\nconst Checkpoint = React.forwardRef(({\n  body,\n  index,\n  placement,\n  target,\n  title,\n  totalCheckpoints,\n  ...props\n}, ref) => {\n  const [checkpointVisible, setCheckpointVisible] = useState(false);\n  const isMobile = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });\n\n  useEffect(() => {\n    const targetElement = document.querySelector(target);\n    const checkpoint = document.querySelector('#pgn__checkpoint');\n    if (targetElement && checkpoint) {\n      // Use the Popper library to translate the Checkpoint to its target's coordinates\n      const checkpointPopper = createPopper(targetElement, checkpoint, {\n        placement: isMobile ? 'top' : placement,\n        modifiers: [\n          {\n            name: 'arrow',\n            options: {\n              padding: 25,\n            },\n          },\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 20],\n            },\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 20,\n              tetherOffset: 35,\n            },\n          },\n        ],\n      });\n      setCheckpointVisible(true);\n      if (checkpointPopper) {\n        checkpointPopper.forceUpdate();\n      }\n    }\n  }, [target, isMobile, placement]);\n\n  useEffect(() => {\n    if (checkpointVisible) {\n      // Scroll the Checkpoint into view once its rendered\n      const targetElement = document.querySelector(target);\n      let targetOffset = targetElement.getBoundingClientRect().top;\n      if ((targetOffset < 0) || (targetElement.getBoundingClientRect().bottom > global.innerHeight)) {\n        if (placement.includes('top')) {\n          if (targetOffset < 0) {\n            targetOffset *= -1;\n          }\n          targetOffset -= 280;\n        } else {\n          targetOffset -= 80;\n        }\n\n        global.scrollTo({\n          top: targetOffset, behavior: 'smooth',\n        });\n      }\n\n      const button = document.querySelector('.pgn__checkpoint-button_advance');\n      button.focus();\n    }\n  }, [target, checkpointVisible, placement]);\n\n  const isLastCheckpoint = index + 1 === totalCheckpoints;\n  const isOnlyCheckpoint = totalCheckpoints === 1;\n\n  return (\n    <div\n      id=\"pgn__checkpoint\"\n      className=\"pgn__checkpoint\"\n      aria-labelledby=\"pgn__checkpoint-title\"\n      ref={ref}\n      role=\"dialog\"\n      style={{ visibility: checkpointVisible ? 'visible' : 'hidden', pointerEvents: checkpointVisible ? 'auto' : 'none' }}\n    >\n      <span className=\"sr-only\">\n        <FormattedMessage\n          id=\"pgn.ProductTour.Checkpoint.position-text\"\n          defaultMessage=\"Top of step {step}\"\n          value={{ step: index + 1 }}\n          description=\"Screen-reader message to indicate the user's position in a sequence of checkpoints.\"\n        />\n      </span>\n      {(title || !isOnlyCheckpoint) && (\n        <div className=\"pgn__checkpoint-header\">\n          <CheckpointTitle>{title}</CheckpointTitle>\n          <CheckpointBreadcrumbs currentIndex={index} totalCheckpoints={totalCheckpoints} />\n        </div>\n      )}\n      <CheckpointBody>{body}</CheckpointBody>\n      <CheckpointActionRow\n        isLastCheckpoint={isLastCheckpoint}\n        index={index}\n        {...props}\n      />\n      <div id=\"pgn__checkpoint-arrow\" data-popper-arrow />\n      {/* This text is not translated due to Paragon's lack of i18n support */}\n      <span className=\"sr-only\">Bottom of step {index + 1}</span>\n    </div>\n  );\n});\n\nCheckpoint.defaultProps = {\n  advanceButtonText: null,\n  body: null,\n  dismissButtonText: null,\n  endButtonText: null,\n  placement: 'top',\n  title: null,\n  showDismissButton: undefined,\n};\n\nCheckpoint.propTypes = {\n  /** The text displayed on the button used to advance the tour for the given Checkpoint. */\n  advanceButtonText: PropTypes.node,\n  /** The text displayed in the body of the Checkpoint */\n  body: PropTypes.node,\n  /** The text displayed on the button used to dismiss the tour for the given Checkpoint. */\n  dismissButtonText: PropTypes.node,\n  /** The text displayed on the button used to end the tour for the given Checkpoint. */\n  endButtonText: PropTypes.node,\n  /** The current index of the given Checkpoint */\n  index: PropTypes.number.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button for the given Checkpoint. */\n  onAdvance: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the dismiss\n   * button for the given Checkpoint. */\n  onDismiss: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button if the given Checkpoint is the only or last Checkpoint in a tour. */\n  onEnd: PropTypes.func.isRequired,\n  /** A string that dictates the alignment of the Checkpoint around its target. */\n  placement: PropTypes.oneOf([\n    'top', 'top-start', 'top-end', 'right-start', 'right', 'right-end',\n    'left-start', 'left', 'left-end', 'bottom', 'bottom-start', 'bottom-end',\n  ]),\n  /** The CSS selector for the Checkpoint's desired target. */\n  target: PropTypes.string.isRequired,\n  /** The text displayed in the title of the Checkpoint */\n  title: PropTypes.node,\n  /** The total number of Checkpoints in a tour */\n  totalCheckpoints: PropTypes.number.isRequired,\n  /** Enforces visibility of the dismiss button under all circumstances */\n  showDismissButton: PropTypes.bool,\n};\n\nexport default Checkpoint;\n"],"mappings":"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"}
+{"version":3,"file":"Checkpoint.js","names":["React","useEffect","useState","useMediaQuery","PropTypes","createPopper","FormattedMessage","breakpoints","CheckpointActionRow","CheckpointBody","CheckpointBreadcrumbs","CheckpointTitle","Checkpoint","forwardRef","_ref","ref","body","index","placement","target","title","totalCheckpoints","props","_objectWithoutProperties","_excluded","checkpointVisible","setCheckpointVisible","isMobile","maxWidth","small","targetElement","document","querySelector","checkpoint","checkpointPopper","strategy","modifiers","name","options","padding","offset","tetherOffset","forceUpdate","targetOffset","getBoundingClientRect","top","bottom","global","innerHeight","includes","scrollTo","behavior","button","focus","isLastCheckpoint","isOnlyCheckpoint","createElement","id","className","role","style","visibility","pointerEvents","defaultMessage","value","step","description","currentIndex","_extends","defaultProps","advanceButtonText","dismissButtonText","endButtonText","showDismissButton","undefined","propTypes","node","number","isRequired","onAdvance","func","onDismiss","onEnd","oneOf","string","bool"],"sources":["../../src/ProductTour/Checkpoint.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport PropTypes from 'prop-types';\nimport { createPopper } from '@popperjs/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport breakpoints from '../utils/breakpoints';\n\nimport CheckpointActionRow from './CheckpointActionRow';\nimport CheckpointBody from './CheckpointBody';\nimport CheckpointBreadcrumbs from './CheckpointBreadcrumbs';\nimport CheckpointTitle from './CheckpointTitle';\n\nconst Checkpoint = React.forwardRef(({\n  body,\n  index,\n  placement,\n  target,\n  title,\n  totalCheckpoints,\n  ...props\n}, ref) => {\n  const [checkpointVisible, setCheckpointVisible] = useState(false);\n  const isMobile = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });\n\n  useEffect(() => {\n    const targetElement = document.querySelector(target);\n    const checkpoint = document.querySelector('#pgn__checkpoint');\n    if (targetElement && checkpoint) {\n      // Use the Popper library to translate the Checkpoint to its target's coordinates\n      const checkpointPopper = createPopper(targetElement, checkpoint, {\n        placement: isMobile ? 'top' : placement,\n        strategy: 'fixed',\n        modifiers: [\n          {\n            name: 'arrow',\n            options: {\n              padding: 25,\n            },\n          },\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 20],\n            },\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 20,\n              tetherOffset: 35,\n            },\n          },\n        ],\n      });\n      setCheckpointVisible(true);\n      if (checkpointPopper) {\n        checkpointPopper.forceUpdate();\n      }\n    }\n  }, [target, isMobile, placement]);\n\n  useEffect(() => {\n    if (checkpointVisible) {\n      // Scroll the Checkpoint into view once its rendered\n      const targetElement = document.querySelector(target);\n      let targetOffset = targetElement.getBoundingClientRect().top;\n      if ((targetOffset < 0) || (targetElement.getBoundingClientRect().bottom > global.innerHeight)) {\n        if (placement.includes('top')) {\n          if (targetOffset < 0) {\n            targetOffset *= -1;\n          }\n          targetOffset -= 280;\n        } else {\n          targetOffset -= 80;\n        }\n\n        global.scrollTo({\n          top: targetOffset, behavior: 'smooth',\n        });\n      }\n\n      const button = document.querySelector('.pgn__checkpoint-button_advance');\n      button.focus();\n    }\n  }, [target, checkpointVisible, placement]);\n\n  const isLastCheckpoint = index + 1 === totalCheckpoints;\n  const isOnlyCheckpoint = totalCheckpoints === 1;\n\n  return (\n    <div\n      id=\"pgn__checkpoint\"\n      className=\"pgn__checkpoint\"\n      aria-labelledby=\"pgn__checkpoint-title\"\n      ref={ref}\n      role=\"dialog\"\n      style={{ visibility: checkpointVisible ? 'visible' : 'hidden', pointerEvents: checkpointVisible ? 'auto' : 'none' }}\n    >\n      <span className=\"sr-only\">\n        <FormattedMessage\n          id=\"pgn.ProductTour.Checkpoint.position-text\"\n          defaultMessage=\"Top of step {step}\"\n          value={{ step: index + 1 }}\n          description=\"Screen-reader message to indicate the user's position in a sequence of checkpoints.\"\n        />\n      </span>\n      {(title || !isOnlyCheckpoint) && (\n        <div className=\"pgn__checkpoint-header\">\n          <CheckpointTitle>{title}</CheckpointTitle>\n          <CheckpointBreadcrumbs currentIndex={index} totalCheckpoints={totalCheckpoints} />\n        </div>\n      )}\n      <CheckpointBody>{body}</CheckpointBody>\n      <CheckpointActionRow\n        isLastCheckpoint={isLastCheckpoint}\n        index={index}\n        {...props}\n      />\n      <div id=\"pgn__checkpoint-arrow\" data-popper-arrow />\n      {/* This text is not translated due to Paragon's lack of i18n support */}\n      <span className=\"sr-only\">Bottom of step {index + 1}</span>\n    </div>\n  );\n});\n\nCheckpoint.defaultProps = {\n  advanceButtonText: null,\n  body: null,\n  dismissButtonText: null,\n  endButtonText: null,\n  placement: 'top',\n  title: null,\n  showDismissButton: undefined,\n};\n\nCheckpoint.propTypes = {\n  /** The text displayed on the button used to advance the tour for the given Checkpoint. */\n  advanceButtonText: PropTypes.node,\n  /** The text displayed in the body of the Checkpoint */\n  body: PropTypes.node,\n  /** The text displayed on the button used to dismiss the tour for the given Checkpoint. */\n  dismissButtonText: PropTypes.node,\n  /** The text displayed on the button used to end the tour for the given Checkpoint. */\n  endButtonText: PropTypes.node,\n  /** The current index of the given Checkpoint */\n  index: PropTypes.number.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button for the given Checkpoint. */\n  onAdvance: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the dismiss\n   * button for the given Checkpoint. */\n  onDismiss: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button if the given Checkpoint is the only or last Checkpoint in a tour. */\n  onEnd: PropTypes.func.isRequired,\n  /** A string that dictates the alignment of the Checkpoint around its target. */\n  placement: PropTypes.oneOf([\n    'top', 'top-start', 'top-end', 'right-start', 'right', 'right-end',\n    'left-start', 'left', 'left-end', 'bottom', 'bottom-start', 'bottom-end',\n  ]),\n  /** The CSS selector for the Checkpoint's desired target. */\n  target: PropTypes.string.isRequired,\n  /** The text displayed in the title of the Checkpoint */\n  title: PropTypes.node,\n  /** The total number of Checkpoints in a tour */\n  totalCheckpoints: PropTypes.number.isRequired,\n  /** Enforces visibility of the dismiss button under all circumstances */\n  showDismissButton: PropTypes.bool,\n};\n\nexport default Checkpoint;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.0.0-alpha.19",
+  "version": "22.0.0-alpha.21",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -82,6 +82,7 @@
     "react-colorful": "^5.6.1",
     "react-dropzone": "^14.2.1",
     "react-focus-on": "^3.5.4",
+    "react-imask": "^7.1.3",
     "react-loading-skeleton": "^3.1.0",
     "react-popper": "^2.2.5",
     "react-proptype-conditional-require": "^1.0.4",
@@ -204,5 +205,8 @@
     "www",
     "icons",
     "dependent-usage-analyzer"
-  ]
+  ],
+  "overrides": {
+    "@testing-library/dom": "9.3.3"
+  }
 }

package/src/ActionRow/README.md

@@ -17,6 +17,7 @@ A layout utility for the common use case of aligning buttons, links or text
 in a row in a control bar or nav.
 
 ActionRow assumes that its last child is the primary action and lays out actions so that the last item is in a primary location. If horizontal, the primary action sits on the right. If stacked, the primary action sits at the top of the stack (this is done via `flex-direction: column-reverse;`).
+
 ## Basic Usage
 
 ```jsx live
@@ -36,7 +37,9 @@ ActionRow can also be used with a helper component ``ActionRow.Spacer`` to inser
 
 ```jsx live
 <ActionRow>
-  <Form.Checkbox className="flex-column flex-sm-row">Don't ask me again.</Form.Checkbox>
+  <Form.Checkbox className="flex-column flex-sm-row">
+      Don't ask me again.
+  </Form.Checkbox>
   <ActionRow.Spacer />
   <Button variant="tertiary">
     Cancel
@@ -49,7 +52,6 @@ ActionRow can also be used with a helper component ``ActionRow.Spacer`` to inser
 
 ## Stacked Usage
 
-
 ```jsx live
 <ActionRow isStacked>
   <p className="x-small">

package/src/DataTable/CollapsibleButtonGroup.jsx

@@ -102,7 +102,7 @@ CollapsibleButtonGroup.propTypes = {
   className: PropTypes.string,
   /** Array of action objects, containing a component and their callback args */
   actions: PropTypes.arrayOf(PropTypes.shape({
-    component: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,
+    component: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]).isRequired,
     args: PropTypes.shape({}),
   })).isRequired,
 };

package/src/DataTable/TableFilters.jsx

@@ -30,7 +30,7 @@ TableFilters.defaultProps = {
 
 TableFilters.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.shape({
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     canFilter: PropTypes.bool,
     render: PropTypes.func.isRequired,
   })).isRequired,

package/src/DataTable/TableFooter.jsx

@@ -25,11 +25,7 @@ function TableFooter({ className, children }) {
 
 TableFooter.propTypes = {
   /** Specifies the content of the `TableFooter` */
-  children: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.node,
-    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.node])),
-  ]),
+  children: PropTypes.node,
   /** Specifies class name to append to the base element. */
   className: PropTypes.string,
 };

package/src/DataTable/filters/CheckboxFilter.jsx

@@ -62,7 +62,7 @@ CheckboxFilter.propTypes = {
    */
   column: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     filterChoices: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string.isRequired,
       value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

package/src/DataTable/filters/DropdownFilter.jsx

@@ -50,7 +50,7 @@ DropdownFilter.propTypes = {
    */
   column: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     filterChoices: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string.isRequired,
       number: PropTypes.number,

package/src/DataTable/filters/MultiSelectDropdownFilter.jsx

@@ -66,7 +66,7 @@ MultiSelectDropdownFilter.propTypes = {
     /** Function to set the filter value */
     setFilter: PropTypes.func.isRequired,
     /** Column header used for labels and placeholders */
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     /** Names and values for the select options */
     filterChoices: PropTypes.arrayOf(PropTypes.shape({
       name: PropTypes.string.isRequired,

package/src/DataTable/filters/TextFilter.jsx

@@ -51,7 +51,7 @@ TextFilter.propTypes = {
    */
   column: PropTypes.shape({
     setFilter: PropTypes.func.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     getHeaderProps: PropTypes.func.isRequired,
     filterValue: PropTypes.string,
   }).isRequired,

package/src/DataTable/index.jsx

@@ -270,13 +270,13 @@ DataTable.propTypes = {
   /** Definition of table columns */
   columns: PropTypes.arrayOf(PropTypes.shape({
     /** User visible column name */
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
     /** String used to access the correct cell data for this column */
     accessor: requiredWhenNot(PropTypes.string, 'Cell'),
     /** Specifies a function that receives `row` as argument and returns cell content */
-    Cell: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
+    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
     /** Specifies filter component */
-    Filter: PropTypes.func,
+    Filter: PropTypes.elementType,
     /** Specifies filter type */
     filter: PropTypes.string,
     /** Specifies filter choices */
@@ -293,8 +293,8 @@ DataTable.propTypes = {
   /** Alternate column for selecting rows. See react table useSort docs for more information */
   manualSelectColumn: PropTypes.shape({
     id: PropTypes.string.isRequired,
-    Header: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-    Cell: PropTypes.func.isRequired,
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]).isRequired,
+    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
     disableSortBy: PropTypes.bool.isRequired,
   }),
   /** Table columns can be sorted */
@@ -315,16 +315,16 @@ DataTable.propTypes = {
   /** defaults that will be set on each column. Will be overridden by individual column values */
   defaultColumnValues: PropTypes.shape({
     /** A default filter component for the column */
-    Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+    Filter: PropTypes.elementType,
   }),
   /** Actions or other additional non-data columns can be added here  */
   additionalColumns: PropTypes.arrayOf(PropTypes.shape({
     /** id must be unique from other columns ids */
     id: PropTypes.string.isRequired,
     /** column header that will be displayed to the user */
-    Header: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    Header: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
     /** Component that renders in the added column. It will receive the row as a prop */
-    Cell: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+    Cell: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
   })),
   /** Function that will fetch table data. Called when page size, page index or filters change.
     * Meant to be used with manual filters and pagination */
@@ -401,15 +401,15 @@ DataTable.propTypes = {
   /** Number between one and four filters that can be shown on the top row. */
   numBreakoutFilters: PropTypes.oneOf([1, 2, 3, 4]),
   /** Component to be displayed when the table is empty */
-  EmptyTableComponent: PropTypes.func,
+  EmptyTableComponent: PropTypes.elementType,
   /** Component to be displayed for row status, ie, 10 of 20 rows. Displayed by default in the TableControlBar */
-  RowStatusComponent: PropTypes.func,
+  RowStatusComponent: PropTypes.elementType,
   /** Component to be displayed for selection status. Displayed when there are selected rows and no active filters */
-  SelectionStatusComponent: PropTypes.func,
+  SelectionStatusComponent: PropTypes.elementType,
   /** Component to be displayed for filter status. Displayed when there are active filters. */
-  FilterStatusComponent: PropTypes.func,
+  FilterStatusComponent: PropTypes.elementType,
   /** If children are not provided a table with control bar and footer will be rendered */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  children: PropTypes.node,
   /** If true filters will be shown on sidebar instead */
   showFiltersInSidebar: PropTypes.bool,
   /** options for data view toggle */

package/src/DataTable/tests/TableActions.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import classNames from 'classnames';
 import TableActions from '../TableActions';
@@ -216,9 +216,10 @@ describe('<TableActions />', () => {
       expect(overflowToggle).toBeInTheDocument();
 
       userEvent.click(overflowToggle);
-
-      const buttons = screen.getAllByRole('button');
-      expect(buttons.length).toBeGreaterThan(1);
+      waitFor(() => {
+        const buttons = screen.getAllByRole('button');
+        expect(buttons.length).toBeGreaterThan(1);
+      });
     });
 
     it('renders the correct alt text for the dropdown', () => {

package/src/Form/FormControl.jsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import RBFormControl from 'react-bootstrap/FormControl';
+import { IMaskInput } from 'react-imask';
 import { useFormGroupContext } from './FormGroupContext';
 import FormControlFeedback from './FormControlFeedback';
 import FormControlDecoratorGroup from './FormControlDecoratorGroup';
@@ -17,6 +18,7 @@ const FormControl = React.forwardRef(({
   floatingLabel,
   autoResize,
   onChange,
+  inputMask,
   ...props
 }, ref) => {
   const {
@@ -71,7 +73,7 @@ const FormControl = React.forwardRef(({
       className={className}
     >
       <RBFormControl
-        as={as}
+        as={inputMask ? IMaskInput : as}
         ref={resolvedRef}
         size={size}
         isInvalid={isInvalid}
@@ -80,6 +82,7 @@ const FormControl = React.forwardRef(({
           'has-value': hasValue,
         })}
         onChange={handleOnChange}
+        mask={inputMask}
         {...controlProps}
       />
     </FormControlDecoratorGroup>
@@ -122,6 +125,8 @@ FormControl.propTypes = {
   isInvalid: PropTypes.bool,
   /** Only for `as="textarea"`. Specifies whether the input can be resized according to the height of content. */
   autoResize: PropTypes.bool,
+  /** Specifies what format to use for the input mask. */
+  inputMask: PropTypes.string,
 };
 
 FormControl.defaultProps = {
@@ -140,6 +145,7 @@ FormControl.defaultProps = {
   isValid: undefined,
   isInvalid: undefined,
   autoResize: false,
+  inputMask: undefined,
 };
 
 export default FormControl;

package/src/Form/form-control.mdx

@@ -43,7 +43,6 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 }
 ```
 
-
 ## Input types
 
 ```jsx live
@@ -163,6 +162,148 @@ or [select attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 }
 ```
 
+## Input masks
+Paragon uses the [react-imask](https://www.npmjs.com/package/react-imask) library,
+which allows you to add masks of different types for inputs.
+To create your own mask, you need to pass the required mask pattern (`+{1} (000) 000-0000`) to the `inputMask` property. <br />
+See [react-imask](https://imask.js.org) for documentation on available props.
+
+```jsx live
+() => {
+  {/* start example state */}
+  const [maskType, setMaskType] = useState('phone');
+  {/* end example state */}
+
+  const inputsWithMask = {
+    phone: (
+      <>
+        <h3>Phone</h3>
+        <Form.Group>
+          <Form.Control
+            inputMask="+{1} (000) 000-0000"
+            value={value}
+            onChange={handleChange}
+            leadingElement={<Icon src={FavoriteBorder} />}
+            floatingLabel="What is your phone number?"
+          />
+        </Form.Group>
+      </>
+    ),
+    creditCard: (<>
+      <h3>Credit card</h3>
+      <Form.Group>
+        <Form.Control
+          inputMask="0000 0000 0000 0000"
+          value={value}
+          onChange={handleChange}
+          leadingElement={<Icon src={FavoriteBorder} />}
+          floatingLabel="What is your credit card number?"
+        />
+      </Form.Group>
+    </>),
+    securePassword: (<>
+      <h3>Secure password</h3>
+      <Form.Group>
+        <Form.Control
+          inputMask="XXX-XX-0000"
+          value={value}
+          definitions={{
+            X: {
+              mask: '0',
+              displayChar: 'X',
+              placeholderChar: '#',
+            },
+          }}
+          onChange={handleChange}
+          leadingElement={<Icon src={FavoriteBorder} />}
+          floatingLabel="What is your password?"
+        />
+      </Form.Group>
+    </>),
+    OTPpassword: (<>
+      <h3>OTP password</h3>
+      <Form.Group>
+        <Form.Control
+          inputMask="G-00000"
+          value={value}
+          onChange={handleChange}
+          leadingElement={<Icon src={FavoriteBorder} />}
+          floatingLabel="What is your OPT password?"
+        />
+      </Form.Group>
+    </>),
+    price: (
+        <>
+          <h3>Course priсe</h3>
+          <Form.Group>
+            <Form.Control
+              inputMask="$num"
+              blocks={{
+                num: {
+                  // nested masks are available!
+                  mask: Number,
+                  thousandsSeparator: ' '
+                }
+              }}
+              value={value}
+              onChange={handleChange}
+              leadingElement={<Icon src={FavoriteBorder} />}
+              floatingLabel="What is the price of this course?"
+            />
+          </Form.Group>
+        </>
+    ),
+  };
+
+  const [value, setValue] = useState('');
+
+  const handleChange = (e) => setValue(e.target.value);
+
+  return (
+    <>
+      {/* start example form block */}
+      <ExamplePropsForm
+        inputs={[
+          { value: maskType, setValue: setMaskType, options: Object.keys(inputsWithMask), name: 'Mask variants' },
+        ]}
+      />
+      {/* end example form block */}
+
+      {inputsWithMask[maskType]}
+    </>
+  );
+}
+```
+
+## Input masks with clear value
+To get a value without a mask, you need to use `onChange` instead of `onAccept` to handle changes.
+
+```jsx live
+() => {
+  const [value, setValue] = useState('');
+
+  return (
+      <>
+        <Form.Group>
+          <Form.Control
+            inputMask="+{1} (000) 000-0000"
+            leadingElement={<Icon src={FavoriteBorder} />}
+            trailingElement={<Icon src={Verified} />}
+            floatingLabel="What is your phone number?"
+            value={value}
+            // depending on prop above first argument is
+            // `value` if `unmask=false`,
+            // `unmaskedValue` if `unmask=true`,
+            // `typedValue` if `unmask='typed'`
+            onAccept={(_, mask) => setValue(mask._unmaskedValue)}
+          />
+        </Form.Group>
+        Unmasked value: {JSON.stringify(value)}
+      </>
+  );
+}
+```
+
 ## Textarea autoResize
 
 `autoResize` prop allows input to be resized according to the content height.

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -8,8 +8,27 @@ const ref = {
   current: null,
 };
 
+let unmaskedInputValue;
+
+// eslint-disable-next-line react/prop-types
+function Component({ isClearValue }) {
+  const [inputValue, setInputValue] = useState('');
+  unmaskedInputValue = inputValue;
+
+  return (
+    <FormControl
+      inputMask="+{1} (000) 000-0000"
+      value={inputValue}
+      onChange={(e) => (!isClearValue ? setInputValue(e.target.value) : null)}
+      /* eslint-disable-next-line no-underscore-dangle */
+      onAccept={(_, mask) => (isClearValue ? setInputValue(mask._unmaskedValue) : null)}
+      data-testid="form-control-with-mask"
+    />
+  );
+}
+
 describe('FormControl', () => {
-  it('textarea changes its height with autoResize prop', async () => {
+  it('textarea changes its height with autoResize prop', () => {
     const useReferenceSpy = jest.spyOn(React, 'useRef').mockReturnValue(ref);
     const onChangeFunc = jest.fn();
     const inputText = 'new text';
@@ -26,9 +45,27 @@ describe('FormControl', () => {
     expect(useReferenceSpy).toHaveBeenCalledTimes(1);
     expect(ref.current.style.height).toBe('0px');
 
-    await userEvent.type(textarea, inputText);
+    userEvent.type(textarea, inputText);
 
     expect(onChangeFunc).toHaveBeenCalledTimes(inputText.length);
     expect(ref.current.style.height).toEqual(`${ref.current.scrollHeight + ref.current.offsetHeight}px`);
   });
+
+  it('should apply and accept input mask for phone numbers', () => {
+    render(<Component />);
+
+    const input = screen.getByTestId('form-control-with-mask');
+    userEvent.type(input, '5555555555');
+    expect(input.value).toBe('+1 (555) 555-5555');
+  });
+
+  it('should be cleared from the mask elements value', () => {
+    render(<Component isClearValue />);
+
+    const input = screen.getByTestId('form-control-with-mask');
+    userEvent.type(input, '5555555555');
+
+    expect(input.value).toBe('+1 (555) 555-5555');
+    expect(unmaskedInputValue).toBe('15555555555');
+  });
 });

package/src/ProductTour/Checkpoint.jsx

@@ -30,6 +30,7 @@ const Checkpoint = React.forwardRef(({
       // Use the Popper library to translate the Checkpoint to its target's coordinates
       const checkpointPopper = createPopper(targetElement, checkpoint, {
         placement: isMobile ? 'top' : placement,
+        strategy: 'fixed',
         modifiers: [
           {
             name: 'arrow',