@openedx/paragon 21.12.0 → 21.12.2

package/dist/withDeprecatedProps.js

@@ -1,12 +1,23 @@
-const _excluded = ["children"];
+var _excluded = ["children"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 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); }
+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); }
 /* eslint no-console: 0 */
 import React from 'react';
-export let DeprTypes = /*#__PURE__*/function (DeprTypes) {
+export var DeprTypes = /*#__PURE__*/function (DeprTypes) {
   DeprTypes["MOVED"] = "MOVED";
   DeprTypes["REMOVED"] = "REMOVED";
   DeprTypes["FORMAT"] = "FORMAT";
@@ -14,68 +25,78 @@ export let DeprTypes = /*#__PURE__*/function (DeprTypes) {
   return DeprTypes;
 }({});
 function withDeprecatedProps(WrappedComponent, componentName, deprecatedProps) {
-  class WithDeprecatedProps extends React.Component {
+  var WithDeprecatedProps = /*#__PURE__*/function (_React$Component) {
+    _inherits(WithDeprecatedProps, _React$Component);
+    var _super = _createSuper(WithDeprecatedProps);
     // eslint-disable-next-line react/static-property-placement
 
-    constructor(props) {
-      super(props);
-      this.transformProps = this.transformProps.bind(this);
+    function WithDeprecatedProps(props) {
+      var _this;
+      _classCallCheck(this, WithDeprecatedProps);
+      _this = _super.call(this, props);
+      _this.transformProps = _this.transformProps.bind(_assertThisInitialized(_this));
+      return _this;
     }
-    warn(message) {
-      if (process.env.NODE_ENV === 'development') {
-        if (console) {
-          console.warn(`[Deprecated] ${message}`);
+    _createClass(WithDeprecatedProps, [{
+      key: "warn",
+      value: function warn(message) {
+        if (process.env.NODE_ENV === 'development') {
+          if (console) {
+            console.warn("[Deprecated] ".concat(message));
+          }
         }
       }
-    }
-    transformProps(acc, propName) {
-      if (deprecatedProps[propName] === undefined) {
-        acc[propName] = this.props[propName];
+    }, {
+      key: "transformProps",
+      value: function transformProps(acc, propName) {
+        if (deprecatedProps[propName] === undefined) {
+          acc[propName] = this.props[propName];
+          return acc;
+        }
+        var _deprecatedProps$prop = deprecatedProps[propName],
+          deprType = _deprecatedProps$prop.deprType,
+          newName = _deprecatedProps$prop.newName,
+          expect = _deprecatedProps$prop.expect,
+          transform = _deprecatedProps$prop.transform,
+          message = _deprecatedProps$prop.message;
+        switch (deprType) {
+          case DeprTypes.MOVED:
+            this.warn("".concat(componentName, ": The prop '").concat(propName, "' has been moved to '").concat(newName, "'."));
+            acc[newName] = this.props[propName];
+            break;
+          case DeprTypes.REMOVED:
+            this.warn("".concat(componentName, ": The prop '").concat(propName, "' has been removed. '").concat(message, "'"));
+            break;
+          case DeprTypes.FORMAT:
+            if (!expect(this.props[propName])) {
+              this.warn("".concat(componentName, ": The prop '").concat(propName, "' expects a new format. ").concat(message));
+              acc[propName] = transform(this.props[propName], this.props);
+            } else {
+              acc[propName] = this.props[propName];
+            }
+            break;
+          case DeprTypes.MOVED_AND_FORMAT:
+            this.warn("".concat(componentName, ": The prop '").concat(propName, "' has been moved to '").concat(newName, "' and expects a new format. ").concat(message));
+            acc[newName] = transform(this.props[propName], this.props);
+            break;
+          default:
+            acc[propName] = this.props[propName];
+            break;
+        }
         return acc;
       }
-      const {
-        deprType,
-        newName,
-        expect,
-        transform,
-        message
-      } = deprecatedProps[propName];
-      switch (deprType) {
-        case DeprTypes.MOVED:
-          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}'.`);
-          acc[newName] = this.props[propName];
-          break;
-        case DeprTypes.REMOVED:
-          this.warn(`${componentName}: The prop '${propName}' has been removed. '${message}'`);
-          break;
-        case DeprTypes.FORMAT:
-          if (!expect(this.props[propName])) {
-            this.warn(`${componentName}: The prop '${propName}' expects a new format. ${message}`);
-            acc[propName] = transform(this.props[propName], this.props);
-          } else {
-            acc[propName] = this.props[propName];
-          }
-          break;
-        case DeprTypes.MOVED_AND_FORMAT:
-          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}' and expects a new format. ${message}`);
-          acc[newName] = transform(this.props[propName], this.props);
-          break;
-        default:
-          acc[propName] = this.props[propName];
-          break;
+    }, {
+      key: "render",
+      value: function render() {
+        var _Object$keys$reduce = Object.keys(this.props).reduce(this.transformProps, {}),
+          children = _Object$keys$reduce.children,
+          transformedProps = _objectWithoutProperties(_Object$keys$reduce, _excluded);
+        return /*#__PURE__*/React.createElement(WrappedComponent, transformedProps, this.props.children || children);
       }
-      return acc;
-    }
-    render() {
-      const _Object$keys$reduce = Object.keys(this.props).reduce(this.transformProps, {}),
-        {
-          children
-        } = _Object$keys$reduce,
-        transformedProps = _objectWithoutProperties(_Object$keys$reduce, _excluded);
-      return /*#__PURE__*/React.createElement(WrappedComponent, transformedProps, this.props.children || children);
-    }
-  }
-  _defineProperty(WithDeprecatedProps, "displayName", `withDeprecatedProps(${componentName})`);
+    }]);
+    return WithDeprecatedProps;
+  }(React.Component);
+  _defineProperty(WithDeprecatedProps, "displayName", "withDeprecatedProps(".concat(componentName, ")"));
   return WithDeprecatedProps;
 }
 export default withDeprecatedProps;

package/dist/withDeprecatedProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"withDeprecatedProps.js","names":["React","DeprTypes","withDeprecatedProps","WrappedComponent","componentName","deprecatedProps","WithDeprecatedProps","Component","constructor","props","transformProps","bind","warn","message","process","env","NODE_ENV","console","acc","propName","undefined","deprType","newName","expect","transform","MOVED","REMOVED","FORMAT","MOVED_AND_FORMAT","render","_Object$keys$reduce","Object","keys","reduce","children","transformedProps","_objectWithoutProperties","_excluded","createElement","_defineProperty"],"sources":["../src/withDeprecatedProps.tsx"],"sourcesContent":["/* eslint no-console: 0 */\nimport React from 'react';\n\nexport enum DeprTypes {\n  MOVED = 'MOVED',\n  REMOVED = 'REMOVED',\n  FORMAT = 'FORMAT',\n  MOVED_AND_FORMAT = 'MOVED_AND_FORMAT',\n}\n\nexport interface DeprecatedProps extends Record<string, any> {\n  deprType: DeprTypes,\n  newName?: string,\n  expect?: (propValue: any) => boolean,\n  transform?: (propValue: any, allProps: Record<string, any>) => any,\n  message?: string,\n}\n\nfunction withDeprecatedProps<T extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<any>,\n  componentName: string,\n  deprecatedProps: Record<string, DeprecatedProps>,\n) : any {\n  class WithDeprecatedProps extends React.Component<T> {\n    // eslint-disable-next-line react/static-property-placement\n    public static displayName = `withDeprecatedProps(${componentName})`;\n\n    constructor(props: T) {\n      super(props);\n      this.transformProps = this.transformProps.bind(this);\n    }\n\n    warn(message: string) {\n      if (process.env.NODE_ENV === 'development') {\n        if (console) { console.warn(`[Deprecated] ${message}`); }\n      }\n    }\n\n    transformProps(acc: Record<string, any>, propName: string) : Record<string, any> {\n      if (deprecatedProps[propName] === undefined) {\n        acc[propName] = this.props[propName];\n        return acc;\n      }\n\n      const {\n        deprType,\n        newName,\n        expect,\n        transform,\n        message,\n      } = deprecatedProps[propName];\n\n      switch (deprType) {\n        case DeprTypes.MOVED:\n          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}'.`);\n          acc[newName!] = this.props[propName];\n          break;\n        case DeprTypes.REMOVED:\n          this.warn(`${componentName}: The prop '${propName}' has been removed. '${message}'`);\n          break;\n        case DeprTypes.FORMAT:\n          if (!expect!(this.props[propName])) {\n            this.warn(`${componentName}: The prop '${propName}' expects a new format. ${message}`);\n            acc[propName] = transform!(this.props[propName], this.props);\n          } else {\n            acc[propName] = this.props[propName];\n          }\n          break;\n        case DeprTypes.MOVED_AND_FORMAT:\n          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}' and expects a new format. ${message}`);\n          acc[newName!] = transform!(this.props[propName], this.props);\n          break;\n        default:\n          acc[propName] = this.props[propName];\n          break;\n      }\n\n      return acc;\n    }\n\n    render() {\n      const { children, ...transformedProps } = Object\n        .keys(this.props)\n        .reduce(this.transformProps, {});\n\n      return (\n        <WrappedComponent {...transformedProps as T}>\n          {this.props.children || children}\n        </WrappedComponent>\n      );\n    }\n  }\n\n  return WithDeprecatedProps;\n}\n\nexport default withDeprecatedProps;\n"],"mappings":";;;;;;AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,WAAYC,SAAS,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA;AAerB,SAASC,mBAAmBA,CAC1BC,gBAA0C,EAC1CC,aAAqB,EACrBC,eAAgD,EAC1C;EACN,MAAMC,mBAAmB,SAASN,KAAK,CAACO,SAAS,CAAI;IACnD;;IAGAC,WAAWA,CAACC,KAAQ,EAAE;MACpB,KAAK,CAACA,KAAK,CAAC;MACZ,IAAI,CAACC,cAAc,GAAG,IAAI,CAACA,cAAc,CAACC,IAAI,CAAC,IAAI,CAAC;IACtD;IAEAC,IAAIA,CAACC,OAAe,EAAE;MACpB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,EAAE;QAC1C,IAAIC,OAAO,EAAE;UAAEA,OAAO,CAACL,IAAI,CAAE,gBAAeC,OAAQ,EAAC,CAAC;QAAE;MAC1D;IACF;IAEAH,cAAcA,CAACQ,GAAwB,EAAEC,QAAgB,EAAwB;MAC/E,IAAId,eAAe,CAACc,QAAQ,CAAC,KAAKC,SAAS,EAAE;QAC3CF,GAAG,CAACC,QAAQ,CAAC,GAAG,IAAI,CAACV,KAAK,CAACU,QAAQ,CAAC;QACpC,OAAOD,GAAG;MACZ;MAEA,MAAM;QACJG,QAAQ;QACRC,OAAO;QACPC,MAAM;QACNC,SAAS;QACTX;MACF,CAAC,GAAGR,eAAe,CAACc,QAAQ,CAAC;MAE7B,QAAQE,QAAQ;QACd,KAAKpB,SAAS,CAACwB,KAAK;UAClB,IAAI,CAACb,IAAI,CAAE,GAAER,aAAc,eAAce,QAAS,wBAAuBG,OAAQ,IAAG,CAAC;UACrFJ,GAAG,CAACI,OAAO,CAAE,GAAG,IAAI,CAACb,KAAK,CAACU,QAAQ,CAAC;UACpC;QACF,KAAKlB,SAAS,CAACyB,OAAO;UACpB,IAAI,CAACd,IAAI,CAAE,GAAER,aAAc,eAAce,QAAS,wBAAuBN,OAAQ,GAAE,CAAC;UACpF;QACF,KAAKZ,SAAS,CAAC0B,MAAM;UACnB,IAAI,CAACJ,MAAM,CAAE,IAAI,CAACd,KAAK,CAACU,QAAQ,CAAC,CAAC,EAAE;YAClC,IAAI,CAACP,IAAI,CAAE,GAAER,aAAc,eAAce,QAAS,2BAA0BN,OAAQ,EAAC,CAAC;YACtFK,GAAG,CAACC,QAAQ,CAAC,GAAGK,SAAS,CAAE,IAAI,CAACf,KAAK,CAACU,QAAQ,CAAC,EAAE,IAAI,CAACV,KAAK,CAAC;UAC9D,CAAC,MAAM;YACLS,GAAG,CAACC,QAAQ,CAAC,GAAG,IAAI,CAACV,KAAK,CAACU,QAAQ,CAAC;UACtC;UACA;QACF,KAAKlB,SAAS,CAAC2B,gBAAgB;UAC7B,IAAI,CAAChB,IAAI,CAAE,GAAER,aAAc,eAAce,QAAS,wBAAuBG,OAAQ,+BAA8BT,OAAQ,EAAC,CAAC;UACzHK,GAAG,CAACI,OAAO,CAAE,GAAGE,SAAS,CAAE,IAAI,CAACf,KAAK,CAACU,QAAQ,CAAC,EAAE,IAAI,CAACV,KAAK,CAAC;UAC5D;QACF;UACES,GAAG,CAACC,QAAQ,CAAC,GAAG,IAAI,CAACV,KAAK,CAACU,QAAQ,CAAC;UACpC;MACJ;MAEA,OAAOD,GAAG;IACZ;IAEAW,MAAMA,CAAA,EAAG;MACP,MAAAC,mBAAA,GAA0CC,MAAM,CAC7CC,IAAI,CAAC,IAAI,CAACvB,KAAK,CAAC,CAChBwB,MAAM,CAAC,IAAI,CAACvB,cAAc,EAAE,CAAC,CAAC,CAAC;QAF5B;UAAEwB;QAA8B,CAAC,GAAAJ,mBAAA;QAAlBK,gBAAgB,GAAAC,wBAAA,CAAAN,mBAAA,EAAAO,SAAA;MAIrC,oBACErC,KAAA,CAAAsC,aAAA,CAACnC,gBAAgB,EAAKgC,gBAAgB,EACnC,IAAI,CAAC1B,KAAK,CAACyB,QAAQ,IAAIA,QACR,CAAC;IAEvB;EACF;EAACK,eAAA,CApEKjC,mBAAmB,iBAEM,uBAAsBF,aAAc,GAAE;EAoErE,OAAOE,mBAAmB;AAC5B;AAEA,eAAeJ,mBAAmB"}
+{"version":3,"file":"withDeprecatedProps.js","names":["React","DeprTypes","withDeprecatedProps","WrappedComponent","componentName","deprecatedProps","WithDeprecatedProps","_React$Component","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","transformProps","bind","_assertThisInitialized","_createClass","key","value","warn","message","process","env","NODE_ENV","console","concat","acc","propName","undefined","_deprecatedProps$prop","deprType","newName","expect","transform","MOVED","REMOVED","FORMAT","MOVED_AND_FORMAT","render","_Object$keys$reduce","Object","keys","reduce","children","transformedProps","_objectWithoutProperties","_excluded","createElement","Component","_defineProperty"],"sources":["../src/withDeprecatedProps.tsx"],"sourcesContent":["/* eslint no-console: 0 */\nimport React from 'react';\n\nexport enum DeprTypes {\n  MOVED = 'MOVED',\n  REMOVED = 'REMOVED',\n  FORMAT = 'FORMAT',\n  MOVED_AND_FORMAT = 'MOVED_AND_FORMAT',\n}\n\nexport interface DeprecatedProps extends Record<string, any> {\n  deprType: DeprTypes,\n  newName?: string,\n  expect?: (propValue: any) => boolean,\n  transform?: (propValue: any, allProps: Record<string, any>) => any,\n  message?: string,\n}\n\nfunction withDeprecatedProps<T extends Record<string, any>>(\n  WrappedComponent: React.ComponentType<any>,\n  componentName: string,\n  deprecatedProps: Record<string, DeprecatedProps>,\n) : any {\n  class WithDeprecatedProps extends React.Component<T> {\n    // eslint-disable-next-line react/static-property-placement\n    public static displayName = `withDeprecatedProps(${componentName})`;\n\n    constructor(props: T) {\n      super(props);\n      this.transformProps = this.transformProps.bind(this);\n    }\n\n    warn(message: string) {\n      if (process.env.NODE_ENV === 'development') {\n        if (console) { console.warn(`[Deprecated] ${message}`); }\n      }\n    }\n\n    transformProps(acc: Record<string, any>, propName: string) : Record<string, any> {\n      if (deprecatedProps[propName] === undefined) {\n        acc[propName] = this.props[propName];\n        return acc;\n      }\n\n      const {\n        deprType,\n        newName,\n        expect,\n        transform,\n        message,\n      } = deprecatedProps[propName];\n\n      switch (deprType) {\n        case DeprTypes.MOVED:\n          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}'.`);\n          acc[newName!] = this.props[propName];\n          break;\n        case DeprTypes.REMOVED:\n          this.warn(`${componentName}: The prop '${propName}' has been removed. '${message}'`);\n          break;\n        case DeprTypes.FORMAT:\n          if (!expect!(this.props[propName])) {\n            this.warn(`${componentName}: The prop '${propName}' expects a new format. ${message}`);\n            acc[propName] = transform!(this.props[propName], this.props);\n          } else {\n            acc[propName] = this.props[propName];\n          }\n          break;\n        case DeprTypes.MOVED_AND_FORMAT:\n          this.warn(`${componentName}: The prop '${propName}' has been moved to '${newName}' and expects a new format. ${message}`);\n          acc[newName!] = transform!(this.props[propName], this.props);\n          break;\n        default:\n          acc[propName] = this.props[propName];\n          break;\n      }\n\n      return acc;\n    }\n\n    render() {\n      const { children, ...transformedProps } = Object\n        .keys(this.props)\n        .reduce(this.transformProps, {});\n\n      return (\n        <WrappedComponent {...transformedProps as T}>\n          {this.props.children || children}\n        </WrappedComponent>\n      );\n    }\n  }\n\n  return WithDeprecatedProps;\n}\n\nexport default withDeprecatedProps;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.12.0",
+  "version": "21.12.2",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -93,7 +93,6 @@
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@edx/browserslist-config": "^1.2.0",
     "@edx/eslint-config": "^3.2.0",
     "@edx/stylelint-config-edx": "^2.3.0",
     "@edx/typescript-config": "^1.0.1",
@@ -177,9 +176,6 @@
       "/node_modules/(?!(@edx/paragon)/).*/"
     ]
   },
-  "browserslist": [
-    "extends @edx/browserslist-config"
-  ],
   "husky": {
     "hooks": {
       "pre-commit": "npm run lint"

package/src/Button/index.jsx

@@ -52,10 +52,10 @@ Button.propTypes = {
   variant: PropTypes.string,
   /** An icon component to render.
   * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
-  iconBefore: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
   /** An icon component to render.
   * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';` */
-  iconAfter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
 };
 
 Button.defaultProps = {

package/src/Container/index.jsx

@@ -28,11 +28,14 @@ Container.propTypes = {
   ...RBContainer.propTypes,
   /** Override the base element */
   as: PropTypes.elementType,
+  /** Specifies the contents of the container */
   children: PropTypes.node,
   /** Fill all available space at any breakpoint */
   fluid: PropTypes.bool,
   /** Set the maximum width for the container */
   size: PropTypes.oneOf(Object.keys(SIZE_CLASS_NAMES)),
+  /** Overrides underlying component base CSS class name */
+  bsPrefix: PropTypes.string,
 };
 
 Container.defaultProps = {
@@ -40,6 +43,7 @@ Container.defaultProps = {
   children: undefined,
   fluid: true,
   size: undefined,
+  bsPrefix: 'container',
 };
 
 export default Container;

package/src/Dropdown/index.jsx

@@ -69,6 +69,7 @@ const Dropdown = React.forwardRef(
     );
   },
 );
+
 Dropdown.propTypes = {
   autoClose: PropTypes.oneOfType([
     PropTypes.string,
@@ -79,6 +80,7 @@ Dropdown.propTypes = {
   show: PropTypes.bool,
   variant: PropTypes.oneOf(['light', 'dark']),
 };
+
 Dropdown.defaultProps = {
   autoClose: true,
   className: '',
@@ -127,9 +129,11 @@ Dropdown.Item = React.forwardRef(
     );
   },
 );
+
 Dropdown.Item.propTypes = {
   className: PropTypes.string,
 };
+
 Dropdown.Item.defaultProps = {
   className: undefined,
 };

package/src/Dropzone/index.jsx

@@ -270,7 +270,7 @@ Dropzone.propTypes = {
    */
   validator: PropTypes.func,
   /** A component to display initial state of the `Dropzone`. */
-  inputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  inputComponent: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
 };
 
 export default Dropzone;

package/src/Form/FormSwitch.jsx

@@ -79,8 +79,11 @@ FormSwitch.propTypes = {
   children: PropTypes.node.isRequired,
   /** Specifies class name to append to the base element. */
   className: PropTypes.string,
+  /** Specifies class name to append to the label element. */
   labelClassName: PropTypes.string,
+  /** Specifies helper text to display below the switch. */
   helperText: PropTypes.node,
+  /** Determines whether the label should float to the left when the switch is active. */
   floatLabelLeft: PropTypes.bool,
 };
 

package/src/Hyperlink/index.jsx

@@ -101,18 +101,19 @@ Hyperlink.propTypes = {
   children: PropTypes.node.isRequired,
   /** Custom class names for the hyperlink */
   className: PropTypes.string,
-  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be loaded into the same browsing context as the current one. If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
-   */
+  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be
+   * loaded into the same browsing context as the current one.
+   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
+   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
+  */
   target: PropTypes.string,
   /** specifies the callback function when the link is clicked */
   onClick: PropTypes.func,
-  // eslint-disable-next-line max-len
   /** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */
   externalLinkAlternativeText: isRequiredIf(
     PropTypes.string,
     props => props.target === '_blank',
   ),
-  // eslint-disable-next-line max-len
   /** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */
   externalLinkTitle: isRequiredIf(
     PropTypes.string,
@@ -120,9 +121,9 @@ Hyperlink.propTypes = {
   ),
   /** type of hyperlink */
   variant: PropTypes.oneOf(['default', 'muted', 'brand']),
-  /** specify the link style. By default it will be underlined. */
+  /** specify the link style. By default, it will be underlined. */
   isInline: PropTypes.bool,
-  /** specify if we need to show launch Icon. By default it will be visible. */
+  /** specify if we need to show launch Icon. By default, it will be visible. */
   showLaunchIcon: PropTypes.bool,
 };
 

package/src/Hyperlink/index.scss

@@ -1,9 +1,9 @@
 .pgn__hyperlink {
+  display: inline-flex;
+  align-items: center;
   text-align: start;
 
   &__external-icon {
-    display: inline-block;
-    vertical-align: middle;
     margin-inline-start: map_get($spacers, 2);
   }
 }

package/src/Icon/index.jsx

@@ -70,28 +70,35 @@ function Icon({
 }
 
 Icon.propTypes = {
-  // eslint-disable-next-line max-len
-  /** An icon component to render. Example import of a Paragon icon component: `import { Check } from '@edx/paragon/dist/icon';` */
-  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * An icon component to render.
+   * Example import of a Paragon icon component: `import { Check } from '@edx/paragon/icons';`
+   */
+  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** HTML element attributes to pass through to the underlying svg element */
   svgAttrs: PropTypes.shape({
     'aria-label': PropTypes.string,
     'aria-labelledby': PropTypes.string,
   }),
-  // eslint-disable-next-line max-len
-  /** the `id` property of the Icon element, by default this value is generated with the `newId` function with the `prefix` of `Icon`. */
+  /**
+   * the `id` property of the Icon element, by default this value is generated
+   * with the `newId` function with the `prefix` of `Icon`.
+   */
   id: PropTypes.string,
-  // eslint-disable-next-line max-len
   /** The size of the icon. */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  // eslint-disable-next-line max-len
   /** A class name that will define what the Icon looks like. */
   className: PropTypes.string,
-  // eslint-disable-next-line max-len
-  /** a boolean that determines the value of `aria-hidden` attribute on the Icon span, this value is `true` by default. */
+  /**
+   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,
+   * this value is `true` by default.
+   */
   hidden: PropTypes.bool,
-  // eslint-disable-next-line max-len
-  /** a string or an element that will be used on a secondary span leveraging the `sr-only` style for screenreader only text, this value is `undefined` by default. This value is recommended for use unless the Icon is being used in a way that is purely decorative or provides no additional context for screen reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.
+  /**
+   * a string or an element that will be used on a secondary span leveraging the `sr-only` style
+   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless
+   * the Icon is being used in a way that is purely decorative or provides no additional context for screen
+   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.
    */
   screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 };

package/src/IconButton/__snapshots__/IconButton.test.jsx.snap

@@ -19,16 +19,18 @@ exports[`<IconButton /> renders with required props 1`] = `
       role="img"
       src={null}
       style={Object {}}
-      viewBox="0 0 props => /*#__PURE__*/React.createElement(\\"svg\\", _extends({
-  width: 24,
-  height: 24,
-  viewBox: \\"0 0 24 24\\",
-  fill: \\"none\\",
-  xmlns: \\"http://www.w3.org/2000/svg\\"
-}, props), /*#__PURE__*/React.createElement(\\"path\\", {
-  d: \\"M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z\\",
-  fill: \\"currentColor\\"
-})) undefined"
+      viewBox="0 0 function SvgInfoOutline(props) {
+  return /*#__PURE__*/React.createElement(\\"svg\\", _extends({
+    width: 24,
+    height: 24,
+    viewBox: \\"0 0 24 24\\",
+    fill: \\"none\\",
+    xmlns: \\"http://www.w3.org/2000/svg\\"
+  }, props), /*#__PURE__*/React.createElement(\\"path\\", {
+    d: \\"M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z\\",
+    fill: \\"currentColor\\"
+  }));
+} undefined"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/IconButton/index.jsx

@@ -80,14 +80,14 @@ IconButton.propTypes = {
   /** An icon component to render. Example import of a Paragon icon component:
    * `import { Check } from '@edx/paragon/dist/icon';`
    * */
-  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** Alt text for your icon. For best practice, avoid using alt text to describe
    * the image in the `IconButton`. Instead, we recommend describing the function
    * of the button. */
   alt: PropTypes.string.isRequired,
   /** Changes icon styles for dark background */
   invertColors: PropTypes.bool,
-  /** Accepts a React fontawesome icon. https://fontawesome.com/how-to-use/on-the-web/using-with/react */
+  /** Accepts a React fontawesome icon. */
   icon: PropTypes.shape({
     prefix: PropTypes.string,
     iconName: PropTypes.string,

package/src/Layout/index.jsx

@@ -84,9 +84,6 @@ SIZES.forEach(size => {
   Layout.defaultProps[size] = sizeDefaultProps;
 });
 
-export {
-  Col,
-  Row,
-};
+export { Col, Row };
 Layout.Element = LayoutElement;
 export default Layout;

package/src/Menu/MenuItem.jsx

@@ -40,9 +40,9 @@ MenuItem.propTypes = {
   /** Specifies the base element */
   as: PropTypes.elementType,
   /** Specifies the jsx before the content of the ``MenuItem`` */
-  iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** Specifies the jsx after the content of the ``MenuItem`` */
-  iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
 };
 
 MenuItem.defaultProps = {

package/src/Modal/ModalDialog.jsx

@@ -116,6 +116,9 @@ ModalDialog.propTypes = {
    * Prevent clicking on the backdrop to close the modal
    */
   isBlocking: PropTypes.bool,
+  /**
+   * Specifies the z-index of the modal
+   */
   zIndex: PropTypes.number,
 };
 

package/src/Modal/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
@@ -271,21 +270,26 @@ class Modal extends React.Component {
 Modal.propTypes = {
   /** specifies whether the modal renders open or closed on the initial render. It defaults to false. */
   open: PropTypes.bool,
-  /** is the selector for an element in the dom which the modal should be rendered under. It uses querySelector to find the first element that matches that selector, and then creates a react portal to a div underneath the parent element.
- */
+  /** is the selector for an element in the dom which the modal should be rendered under.
+   * It uses querySelector to find the first element that matches that selector,
+   * and then creates a React portal to a div underneath the parent element.
+   */
   parentSelector: PropTypes.string,
   /** a string or an element that is rendered inside of the modal title, above the modal body. */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
   /** a string or an element that is rendered inside of the modal body, between the title and the footer. */
   body: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-  /** an array of either elements or shapes that take the form of the buttonPropTypes. See the [buttonPropTypes](https://github.com/openedx/paragon/blob/master/src/Button/index.jsx#L40) for a list of acceptable props to pass as part of a button. */
+  /** an array of either elements or shapes that take the form of the buttonPropTypes.
+   * See the [buttonPropTypes](https://github.com/openedx/paragon/blob/master/src/Button/index.jsx#L40)
+   * for a list of acceptable props to pass as part of a button. */
   buttons: PropTypes.arrayOf(PropTypes.oneOfType([
     PropTypes.element,
     PropTypes.shape({}), // TODO: Only accept nodes in the future
   ])),
   /** specifies the display text of the default Close button. It defaults to "Close". */
   closeText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  /** a function that is called on close. It can be used to perform actions upon closing of the modal, such as restoring focus to the previous logical focusable element. */
+  /** a function that is called on close. It can be used to perform actions upon closing of the modal,
+   * such as restoring focus to the previous logical focusable element. */
   onClose: PropTypes.func.isRequired,
   variant: PropTypes.shape({
     status: PropTypes.string,
@@ -295,7 +299,8 @@ Modal.propTypes = {
   /** specifies whether a close button is rendered in the modal header. It defaults to true. */
   renderHeaderCloseButton: PropTypes.bool,
   /**
-   * Specifies optional classes to add to the element with the '.modal-dialog' class.  See Bootstrap documentation for possible classes.  Some options: modal-lg, modal-sm, modal-dialog-centered
+   * Specifies optional classes to add to the element with the '.modal-dialog' class.
+   * See Bootstrap documentation for possible classes.  Some options: modal-lg, modal-sm, modal-dialog-centered
    */
   dialogClassName: PropTypes.string,
 };

package/src/Overlay/README.md

@@ -38,7 +38,7 @@ This component is used to power Tooltips and Popovers.
           Click me to see
         </Button>
       </div>
-      <Overlay target={target.current} show={open} placement="right">
+      <Overlay target={target.current} show={isOpen} placement="right">
         {({ placement, arrowProps, show: _show, popper, ...props }) => (
           <div
             {...props}

package/src/Overlay/index.jsx

@@ -89,7 +89,7 @@ Overlay.propTypes = {
    * Animate the entering and exiting of the Overlay. `true` will use the `<Fade>` transition,
    * or a custom react-transition-group `<Transition>` component can be provided.
    */
-  transition: PropTypes.func,
+  transition: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
 };
 
 OverlayTrigger.propTypes = {

package/src/Popover/README.md

@@ -3,7 +3,6 @@ title: 'Popover'
 type: 'component'
 components:
 - Popover
-- WrapperPopover
 - PopoverTitle
 - PopoverContent
 categories: