@openedx/paragon 21.11.0 → 21.11.2

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/Dropzone/index.js

@@ -177,8 +177,7 @@ function Dropzone(_ref) {
   return /*#__PURE__*/React.createElement("div", _extends({
     "data-testid": "dropzone-container"
   }, getRootProps({
-    className: classNames('pgn__dropzone', {
-      className,
+    className: classNames('pgn__dropzone', className, {
       'pgn__dropzone-validation-error': isMultipleDragged || errors.length > 0 || isDragReject,
       'pgn__dropzone-active': isDragActive && !isDragReject
     })

package/dist/Dropzone/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useState","PropTypes","classNames","useDropzone","ErrorCode","fromEvent","useIntl","DragError","GenericError","UploadProgress","DefaultContent","messages","getTypesString","isMultipleTypes","formatBytes","Dropzone","_ref","className","accept","minSize","maxSize","validator","errorMessages","progressVariant","inputComponent","onProcessUpload","onUploadProgress","onUploadCancel","props","_objectWithoutProperties","_excluded","isMultipleDragged","setIsMultipleDragged","errors","setErrors","progress","setProgress","fileName","setFileName","undefined","controller","setController","intl","uploadError","uploadErrorMsg","invalidSizeLess","invalidSizeLessMsg","invalidSizeMore","invalidSizeMoreMsg","invalidType","invalidTypeMsg","multipleDragged","multipleDraggedMsg","onDragEnter","e","files","length","onDragLeave","onDropRejected","map","error","code","FileTooLarge","formatMessage","size","FileTooSmall","FileInvalidType","count","typeString","unexpectedValidationError","handleProgressUpload","progressEvent","percentValue","Math","round","loaded","total","handleUploadError","processUpload","fileData","newController","AbortController","requestConfig","signal","handleError","onDropAccepted","file","customValidationError","formData","FormData","append","name","handleUploadCancel","abort","getRootProps","getInputProps","isDragActive","isDragReject","multiple","maxFiles","disabled","renderContent","createElement","message","Fragment","errorMsgs","variant","percent","onCancel","_extends","defaultProps","Infinity","propTypes","string","objectOf","arrayOf","number","func","isRequired","shape","oneOfType","element","oneOf","node"],"sources":["../../src/Dropzone/index.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useDropzone, ErrorCode } from 'react-dropzone';\nimport { fromEvent } from 'file-selector';\nimport { useIntl } from 'react-intl';\n\nimport DragError from './DragError';\nimport GenericError from './GenericError';\nimport UploadProgress from './UploadProgress';\nimport DefaultContent from './DefaultContent';\nimport messages from './messages';\nimport { getTypesString, isMultipleTypes, formatBytes } from './utils';\n\nfunction Dropzone({\n  className, accept, minSize, maxSize, validator,\n  errorMessages, progressVariant, inputComponent,\n  onProcessUpload, onUploadProgress, onUploadCancel,\n  ...props\n}) {\n  const [isMultipleDragged, setIsMultipleDragged] = useState(false);\n  const [errors, setErrors] = useState([]);\n  const [progress, setProgress] = useState(0);\n  const [fileName, setFileName] = useState(undefined);\n  const [controller, setController] = useState(undefined);\n  const intl = useIntl();\n\n  const {\n    uploadError: uploadErrorMsg,\n    invalidSizeLess: invalidSizeLessMsg,\n    invalidSizeMore: invalidSizeMoreMsg,\n    invalidType: invalidTypeMsg,\n    multipleDragged: multipleDraggedMsg,\n  } = errorMessages;\n\n  const onDragEnter = async (e) => {\n    if (errors) {\n      setErrors([]);\n    }\n    const files = await fromEvent(e);\n    if (files && files.length > 1) {\n      setIsMultipleDragged(true);\n    }\n  };\n\n  const onDragLeave = () => {\n    if (isMultipleDragged) {\n      setIsMultipleDragged(false);\n    }\n  };\n\n  const onDropRejected = (files) => {\n    if (!isMultipleDragged) {\n      setErrors(files[0].errors.map(error => {\n        switch (error.code) {\n          case ErrorCode.FileTooLarge:\n            return invalidSizeMoreMsg || intl.formatMessage(messages.invalidSizeMore, { size: formatBytes(maxSize) });\n          case ErrorCode.FileTooSmall:\n            return invalidSizeLessMsg || intl.formatMessage(messages.invalidSizeLess, { size: formatBytes(minSize) });\n          case ErrorCode.FileInvalidType:\n            return invalidTypeMsg || intl.formatMessage(\n              messages.invalidType,\n              { count: isMultipleTypes(accept) ? 2 : 1, typeString: getTypesString(accept) },\n            );\n          default:\n            return intl.formatMessage(messages.unexpectedValidationError);\n        }\n      }));\n    } else {\n      setIsMultipleDragged(false);\n    }\n  };\n\n  const handleProgressUpload = (progressEvent) => {\n    const percentValue = Math.round((progressEvent.loaded * 100) / progressEvent.total);\n    setProgress(percentValue);\n    onUploadProgress(percentValue, progressEvent);\n  };\n\n  const handleUploadError = (error) => {\n    // check if request has been canceled before treating the exception as an upload error\n    if (error.code !== 'ERR_CANCELED') {\n      setProgress(0);\n      setErrors([uploadErrorMsg || intl.formatMessage(messages.uploadError)]);\n    }\n  };\n\n  const processUpload = (fileData) => {\n    const newController = new AbortController();\n    setController(newController);\n\n    const requestConfig = {\n      onUploadProgress: handleProgressUpload,\n      signal: newController.signal,\n    };\n\n    onProcessUpload({\n      fileData,\n      requestConfig,\n      handleError: handleUploadError,\n    });\n  };\n\n  const onDropAccepted = async (files) => {\n    const file = files[0];\n    if (validator) {\n      const customValidationError = await validator(file);\n      if (customValidationError) {\n        setErrors([customValidationError]);\n        return;\n      }\n    }\n\n    if (errors) {\n      setErrors([]);\n    }\n\n    const formData = new FormData();\n    formData.append('file', file);\n    setFileName(file.name);\n\n    processUpload(formData);\n  };\n\n  const handleUploadCancel = () => {\n    controller.abort();\n    setProgress(0);\n    onUploadCancel();\n  };\n\n  const {\n    getRootProps,\n    getInputProps,\n    isDragActive,\n    isDragReject,\n  } = useDropzone({\n    multiple: false,\n    maxFiles: 1,\n    maxSize,\n    minSize,\n    onDragLeave,\n    onDragEnter,\n    onDropRejected,\n    onDropAccepted,\n    accept,\n    disabled: progress && progress !== 100,\n  });\n\n  const renderContent = () => {\n    if (isMultipleDragged) {\n      return <DragError message={multipleDraggedMsg || intl.formatMessage(messages.multipleDragged)} />;\n    }\n\n    if (errors.length > 0) {\n      return (\n        <>\n          <GenericError errorMsgs={errors} />\n          {inputComponent || <DefaultContent minSize={minSize} maxSize={maxSize} accept={accept} />}\n        </>\n      );\n    }\n\n    if (progress && progress !== 100) {\n      return (\n        <UploadProgress\n          variant={progressVariant}\n          percent={progress}\n          name={fileName}\n          onCancel={handleUploadCancel}\n        />\n      );\n    }\n\n    return inputComponent || <DefaultContent minSize={minSize} maxSize={maxSize} accept={accept} />;\n  };\n\n  return (\n    <div\n      data-testid=\"dropzone-container\"\n      {...getRootProps({\n        className: classNames('pgn__dropzone', {\n          className,\n          'pgn__dropzone-validation-error': isMultipleDragged || errors.length > 0 || isDragReject,\n          'pgn__dropzone-active': isDragActive && !isDragReject,\n        }),\n      })}\n      {...props}\n    >\n      <input {...getInputProps()} />\n      <div className=\"d-flex flex-column justify-content-around align-items-center w-100\">\n        {renderContent()}\n      </div>\n    </div>\n  );\n}\n\nDropzone.defaultProps = {\n  className: undefined,\n  accept: undefined,\n  maxSize: Infinity,\n  minSize: 0,\n  onUploadProgress: () => {},\n  onUploadCancel: () => {},\n  errorMessages: {\n    invalidType: undefined,\n    invalidSizeLess: undefined,\n    invalidSizeMore: undefined,\n    multipleDragged: undefined,\n    uploadError: undefined,\n  },\n  progressVariant: 'spinner',\n  validator: undefined,\n  inputComponent: undefined,\n};\n\nDropzone.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /**\n   * Set accepted file types.\n   * This should be an object with the keys set to the\n   * [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)\n   * and the values to an array of file extensions.\n   */\n  accept: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),\n  /** Maximum file size (in bytes). */\n  maxSize: PropTypes.number,\n  /** Minimum file size (in bytes). */\n  minSize: PropTypes.number,\n  /**\n   * A callback fired each time an upload progress event happens,\n   * receives (percentageUploaded, progressEvent) as arguments.\n   */\n  onUploadProgress: PropTypes.func,\n  /** A callback fired upon successful upload, receives Response object as a single argument. */\n  onUploadCancel: PropTypes.func,\n  /**\n   * A function responsible for uploading the file.\n   * Receives following object as its only argument\n   * {\n   *   @param {object} fileData - Metadata about the uploaded file.\n   *   @param {object} requestConfig - Config to pass to `axios` call.\n   *   @param {function} handleError - Function to communicate to `Dropzone` that file upload resulted in failure,\n   *   expects `Error` object to be passed as its only argument.\n   * }\n   */\n  onProcessUpload: PropTypes.func.isRequired,\n  /**\n   * An object containing error messages, following are supported:\n   * 1) invalidType - A message to display when file of invalid type is dropped into `Dropzone`.\n   * Defaults to 'The file type must be {filType} file / one of {fileTypes} files.'.\n   * 2) invalidSizeLess - A message to display when file of size less than minSize value is dropped into `Dropzone`.\n   * Defaults to 'File must be larger than {minSize}.'.\n   * 3) invalidSizeMore - A message to display when file of size greater than maxSize value is dropped into `Dropzone`.\n   * Defaults to 'File must be less than {maxSize}.'.\n   * 4) multipleDragged - A message to display when multiple files are dragged over `Dropzone`.\n   * 5) uploadError - A message to display in case upload results in an error\n   */\n  errorMessages: PropTypes.shape({\n    invalidType: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n    invalidSizeLess: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n    invalidSizeMore: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n    multipleDragged: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n    uploadError: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  }),\n  /** Specifies how the upload progress should be displayed, component shows either spinner or a progress bar. */\n  progressVariant: PropTypes.oneOf(['spinner', 'bar']),\n  /**\n   * Custom validation function, receives `File` object as its only argument.\n   * Note that this function will be invoked as a last validation step before beginning an upload process.\n   */\n  validator: PropTypes.func,\n  /** A component to display initial state of the `Dropzone`. */\n  inputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n};\n\nexport default Dropzone;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useState","PropTypes","classNames","useDropzone","ErrorCode","fromEvent","useIntl","DragError","GenericError","UploadProgress","DefaultContent","messages","getTypesString","isMultipleTypes","formatBytes","Dropzone","_ref","className","accept","minSize","maxSize","validator","errorMessages","progressVariant","inputComponent","onProcessUpload","onUploadProgress","onUploadCancel","props","_objectWithoutProperties","_excluded","isMultipleDragged","setIsMultipleDragged","errors","setErrors","progress","setProgress","fileName","setFileName","undefined","controller","setController","intl","uploadError","uploadErrorMsg","invalidSizeLess","invalidSizeLessMsg","invalidSizeMore","invalidSizeMoreMsg","invalidType","invalidTypeMsg","multipleDragged","multipleDraggedMsg","onDragEnter","e","files","length","onDragLeave","onDropRejected","map","error","code","FileTooLarge","formatMessage","size","FileTooSmall","FileInvalidType","count","typeString","unexpectedValidationError","handleProgressUpload","progressEvent","percentValue","Math","round","loaded","total","handleUploadError","processUpload","fileData","newController","AbortController","requestConfig","signal","handleError","onDropAccepted","file","customValidationError","formData","FormData","append","name","handleUploadCancel","abort","getRootProps","getInputProps","isDragActive","isDragReject","multiple","maxFiles","disabled","renderContent","createElement","message","Fragment","errorMsgs","variant","percent","onCancel","_extends","defaultProps","Infinity","propTypes","string","objectOf","arrayOf","number","func","isRequired","shape","oneOfType","element","oneOf","node"],"sources":["../../src/Dropzone/index.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useDropzone, ErrorCode } from 'react-dropzone';\nimport { fromEvent } from 'file-selector';\nimport { useIntl } from 'react-intl';\n\nimport DragError from './DragError';\nimport GenericError from './GenericError';\nimport UploadProgress from './UploadProgress';\nimport DefaultContent from './DefaultContent';\nimport messages from './messages';\nimport { getTypesString, isMultipleTypes, formatBytes } from './utils';\n\nfunction Dropzone({\n  className, accept, minSize, maxSize, validator,\n  errorMessages, progressVariant, inputComponent,\n  onProcessUpload, onUploadProgress, onUploadCancel,\n  ...props\n}) {\n  const [isMultipleDragged, setIsMultipleDragged] = useState(false);\n  const [errors, setErrors] = useState([]);\n  const [progress, setProgress] = useState(0);\n  const [fileName, setFileName] = useState(undefined);\n  const [controller, setController] = useState(undefined);\n  const intl = useIntl();\n\n  const {\n    uploadError: uploadErrorMsg,\n    invalidSizeLess: invalidSizeLessMsg,\n    invalidSizeMore: invalidSizeMoreMsg,\n    invalidType: invalidTypeMsg,\n    multipleDragged: multipleDraggedMsg,\n  } = errorMessages;\n\n  const onDragEnter = async (e) => {\n    if (errors) {\n      setErrors([]);\n    }\n    const files = await fromEvent(e);\n    if (files && files.length > 1) {\n      setIsMultipleDragged(true);\n    }\n  };\n\n  const onDragLeave = () => {\n    if (isMultipleDragged) {\n      setIsMultipleDragged(false);\n    }\n  };\n\n  const onDropRejected = (files) => {\n    if (!isMultipleDragged) {\n      setErrors(files[0].errors.map(error => {\n        switch (error.code) {\n          case ErrorCode.FileTooLarge:\n            return invalidSizeMoreMsg || intl.formatMessage(messages.invalidSizeMore, { size: formatBytes(maxSize) });\n          case ErrorCode.FileTooSmall:\n            return invalidSizeLessMsg || intl.formatMessage(messages.invalidSizeLess, { size: formatBytes(minSize) });\n          case ErrorCode.FileInvalidType:\n            return invalidTypeMsg || intl.formatMessage(\n              messages.invalidType,\n              { count: isMultipleTypes(accept) ? 2 : 1, typeString: getTypesString(accept) },\n            );\n          default:\n            return intl.formatMessage(messages.unexpectedValidationError);\n        }\n      }));\n    } else {\n      setIsMultipleDragged(false);\n    }\n  };\n\n  const handleProgressUpload = (progressEvent) => {\n    const percentValue = Math.round((progressEvent.loaded * 100) / progressEvent.total);\n    setProgress(percentValue);\n    onUploadProgress(percentValue, progressEvent);\n  };\n\n  const handleUploadError = (error) => {\n    // check if request has been canceled before treating the exception as an upload error\n    if (error.code !== 'ERR_CANCELED') {\n      setProgress(0);\n      setErrors([uploadErrorMsg || intl.formatMessage(messages.uploadError)]);\n    }\n  };\n\n  const processUpload = (fileData) => {\n    const newController = new AbortController();\n    setController(newController);\n\n    const requestConfig = {\n      onUploadProgress: handleProgressUpload,\n      signal: newController.signal,\n    };\n\n    onProcessUpload({\n      fileData,\n      requestConfig,\n      handleError: handleUploadError,\n    });\n  };\n\n  const onDropAccepted = async (files) => {\n    const file = files[0];\n    if (validator) {\n      const customValidationError = await validator(file);\n      if (customValidationError) {\n        setErrors([customValidationError]);\n        return;\n      }\n    }\n\n    if (errors) {\n      setErrors([]);\n    }\n\n    const formData = new FormData();\n    formData.append('file', file);\n    setFileName(file.name);\n\n    processUpload(formData);\n  };\n\n  const handleUploadCancel = () => {\n    controller.abort();\n    setProgress(0);\n    onUploadCancel();\n  };\n\n  const {\n    getRootProps,\n    getInputProps,\n    isDragActive,\n    isDragReject,\n  } = useDropzone({\n    multiple: false,\n    maxFiles: 1,\n    maxSize,\n    minSize,\n    onDragLeave,\n    onDragEnter,\n    onDropRejected,\n    onDropAccepted,\n    accept,\n    disabled: progress && progress !== 100,\n  });\n\n  const renderContent = () => {\n    if (isMultipleDragged) {\n      return <DragError message={multipleDraggedMsg || intl.formatMessage(messages.multipleDragged)} />;\n    }\n\n    if (errors.length > 0) {\n      return (\n        <>\n          <GenericError errorMsgs={errors} />\n          {inputComponent || <DefaultContent minSize={minSize} maxSize={maxSize} accept={accept} />}\n        </>\n      );\n    }\n\n    if (progress && progress !== 100) {\n      return (\n        <UploadProgress\n          variant={progressVariant}\n          percent={progress}\n          name={fileName}\n          onCancel={handleUploadCancel}\n        />\n      );\n    }\n\n    return inputComponent || <DefaultContent minSize={minSize} maxSize={maxSize} accept={accept} />;\n  };\n\n  return (\n    <div\n      data-testid=\"dropzone-container\"\n      {...getRootProps({\n        className: classNames('pgn__dropzone', className, {\n          'pgn__dropzone-validation-error': isMultipleDragged || errors.length > 0 || isDragReject,\n          'pgn__dropzone-active': isDragActive && !isDragReject,\n        }),\n      })}\n      {...props}\n    >\n      <input {...getInputProps()} />\n      <div className=\"d-flex flex-column justify-content-around align-items-center w-100\">\n        {renderContent()}\n      </div>\n    </div>\n  );\n}\n\nDropzone.defaultProps = {\n  className: undefined,\n  accept: undefined,\n  maxSize: Infinity,\n  minSize: 0,\n  onUploadProgress: () => {},\n  onUploadCancel: () => {},\n  errorMessages: {\n    invalidType: undefined,\n    invalidSizeLess: undefined,\n    invalidSizeMore: undefined,\n    multipleDragged: undefined,\n    uploadError: undefined,\n  },\n  progressVariant: 'spinner',\n  validator: undefined,\n  inputComponent: undefined,\n};\n\nDropzone.propTypes = {\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /**\n   * Set accepted file types.\n   * This should be an object with the keys set to the\n   * [MIME type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)\n   * and the values to an array of file extensions.\n   */\n  accept: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),\n  /** Maximum file size (in bytes). */\n  maxSize: PropTypes.number,\n  /** Minimum file size (in bytes). */\n  minSize: PropTypes.number,\n  /**\n   * A callback fired each time an upload progress event happens,\n   * receives (percentageUploaded, progressEvent) as arguments.\n   */\n  onUploadProgress: PropTypes.func,\n  /** A callback fired upon successful upload, receives Response object as a single argument. */\n  onUploadCancel: PropTypes.func,\n  /**\n   * A function responsible for uploading the file.\n   * Receives following object as its only argument\n   * {\n   *   @param {object} fileData - Metadata about the uploaded file.\n   *   @param {object} requestConfig - Config to pass to `axios` call.\n   *   @param {function} handleError - Function to communicate to `Dropzone` that file upload resulted in failure,\n   *   expects `Error` object to be passed as its only argument.\n   * }\n   */\n  onProcessUpload: PropTypes.func.isRequired,\n  /**\n   * An object containing error messages, following are supported:\n   * 1) invalidType - A message to display when file of invalid type is dropped into `Dropzone`.\n   * Defaults to 'The file type must be {filType} file / one of {fileTypes} files.'.\n   * 2) invalidSizeLess - A message to display when file of size less than minSize value is dropped into `Dropzone`.\n   * Defaults to 'File must be larger than {minSize}.'.\n   * 3) invalidSizeMore - A message to display when file of size greater than maxSize value is dropped into `Dropzone`.\n   * Defaults to 'File must be less than {maxSize}.'.\n   * 4) multipleDragged - A message to display when multiple files are dragged over `Dropzone`.\n   * 5) uploadError - A message to display in case upload results in an error\n   */\n  errorMessages: PropTypes.shape({\n    invalidType: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n    invalidSizeLess: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n    invalidSizeMore: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n    multipleDragged: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n    uploadError: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  }),\n  /** Specifies how the upload progress should be displayed, component shows either spinner or a progress bar. */\n  progressVariant: PropTypes.oneOf(['spinner', 'bar']),\n  /**\n   * Custom validation function, receives `File` object as its only argument.\n   * Note that this function will be invoked as a last validation step before beginning an upload process.\n   */\n  validator: PropTypes.func,\n  /** A component to display initial state of the `Dropzone`. */\n  inputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),\n};\n\nexport default Dropzone;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.11.0",
+  "version": "21.11.2",
   "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/Dropzone/index.jsx

@@ -178,8 +178,7 @@ function Dropzone({
     <div
       data-testid="dropzone-container"
       {...getRootProps({
-        className: classNames('pgn__dropzone', {
-          className,
+        className: classNames('pgn__dropzone', className, {
           'pgn__dropzone-validation-error': isMultipleDragged || errors.length > 0 || isDragReject,
           'pgn__dropzone-active': isDragActive && !isDragReject,
         }),

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 '..';