@openedx/paragon 21.11.1 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.11.1",
+  "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/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 '..';