@openedx/paragon 23.2.0 → 23.3.1

package/dist/Hyperlink/index.js

@@ -1,35 +1,30 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "destination", "children", "target", "onClick", "externalLinkAlternativeText", "externalLinkTitle", "variant", "isInline", "showLaunchIcon"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-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; }
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Launch } from '../../icons';
 import Icon from '../Icon';
-export var HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';
-export var HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';
-var Hyperlink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    destination = _ref.destination,
-    children = _ref.children,
-    target = _ref.target,
-    onClick = _ref.onClick,
-    externalLinkAlternativeText = _ref.externalLinkAlternativeText,
-    externalLinkTitle = _ref.externalLinkTitle,
-    variant = _ref.variant,
-    isInline = _ref.isInline,
-    showLaunchIcon = _ref.showLaunchIcon,
-    attrs = _objectWithoutProperties(_ref, _excluded);
-  var externalLinkIcon;
+export const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';
+export const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';
+const Hyperlink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    destination,
+    children,
+    target,
+    onClick,
+    externalLinkAlternativeText,
+    externalLinkTitle,
+    variant,
+    isInline,
+    showLaunchIcon,
+    ...attrs
+  } = _ref;
+  let externalLinkIcon;
   if (target === '_blank') {
-    var generateRel = function generateRel() {
-      var rel = attrs.rel;
+    const generateRel = () => {
+      let {
+        rel
+      } = attrs;
       if (!rel) {
         return 'noopener noreferrer';
       }
@@ -59,21 +54,22 @@ var Hyperlink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }));
     }
   }
-  return /*#__PURE__*/React.createElement("a", _objectSpread({
+  return /*#__PURE__*/React.createElement("a", {
     ref: ref,
-    className: classNames('pgn__hyperlink', "".concat(variant, "-link"), {
+    className: classNames('pgn__hyperlink', `${variant}-link`, {
       'standalone-link': !isInline,
       'inline-link': isInline
     }, className),
     href: destination,
     target: target,
-    onClick: onClick
-  }, attrs), children, externalLinkIcon);
+    onClick: onClick,
+    ...attrs
+  }, children, externalLinkIcon);
 });
 Hyperlink.defaultProps = {
   className: undefined,
   target: '_self',
-  onClick: function onClick() {},
+  onClick: () => {},
   externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,
   externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,
   variant: 'default',
@@ -84,6 +80,7 @@ Hyperlink.propTypes = {
   /** specifies the URL */
   destination: PropTypes.string.isRequired,
   /** Content of the hyperlink */
+  // @ts-ignore
   children: PropTypes.node.isRequired,
   /** Custom class names for the hyperlink */
   className: PropTypes.string,

package/dist/Hyperlink/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Launch","Icon","HYPER_LINK_EXTERNAL_LINK_ALT_TEXT","HYPER_LINK_EXTERNAL_LINK_TITLE","Hyperlink","forwardRef","_ref","ref","className","destination","children","target","onClick","externalLinkAlternativeText","externalLinkTitle","variant","isInline","showLaunchIcon","attrs","_objectWithoutProperties","_excluded","externalLinkIcon","generateRel","rel","includes","createElement","title","src","screenReaderText","style","height","width","_objectSpread","concat","href","defaultProps","undefined","propTypes","string","isRequired","node","oneOf","func","bool"],"sources":["../../src/Hyperlink/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nexport const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';\nexport const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';\n\ninterface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {\n  /** specifies the URL */\n  destination: string;\n  /** Content of the hyperlink */\n  children: React.ReactNode;\n  /** Custom class names for the hyperlink */\n  className?: string;\n  /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n  externalLinkAlternativeText?: string;\n  /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n  externalLinkTitle?: string;\n  /** type of hyperlink */\n  variant?: 'default' | 'muted' | 'brand';\n  /** Display the link with an underline. By default, it is only underlined on hover. */\n  isInline?: boolean;\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon?: boolean;\n  target?: '_blank' | '_self';\n}\n\nconst Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({\n  className,\n  destination,\n  children,\n  target,\n  onClick,\n  externalLinkAlternativeText,\n  externalLinkTitle,\n  variant,\n  isInline,\n  showLaunchIcon,\n  ...attrs\n}, ref) => {\n  let externalLinkIcon;\n\n  if (target === '_blank') {\n    const generateRel = () => {\n      let { rel } = attrs;\n      if (!rel) {\n        return 'noopener noreferrer';\n      }\n      if (!rel.includes('noopener')) {\n        rel += ' noopener';\n      }\n      if (!rel.includes('noreferrer')) {\n        rel += ' noreferrer';\n      }\n      return rel;\n    };\n\n    // Add this rel attribute to prevent Reverse Tabnabbing\n    attrs.rel = generateRel();\n    if (showLaunchIcon) {\n      externalLinkIcon = (\n        <span\n          className=\"pgn__hyperlink__external-icon\"\n          title={externalLinkTitle}\n        >\n          <Icon\n            src={Launch}\n            screenReaderText={externalLinkAlternativeText}\n            style={{ height: '1em', width: '1em' }}\n            data-testid=\"hyperlink-icon\"\n          />\n        </span>\n      );\n    }\n  }\n\n  return (\n    <a\n      ref={ref}\n      className={classNames(\n        'pgn__hyperlink',\n        `${variant}-link`,\n        {\n          'standalone-link': !isInline,\n          'inline-link': isInline,\n        },\n        className,\n      )}\n      href={destination}\n      target={target}\n      onClick={onClick}\n      {...attrs}\n    >\n      {children}\n      {externalLinkIcon}\n    </a>\n  );\n});\n\nHyperlink.defaultProps = {\n  className: undefined,\n  target: '_self',\n  onClick: () => {},\n  externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,\n  externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,\n  variant: 'default',\n  isInline: false,\n  showLaunchIcon: true,\n};\n\nHyperlink.propTypes = {\n  /** specifies the URL */\n  destination: PropTypes.string.isRequired,\n  /** Content of the hyperlink */\n  children: PropTypes.node.isRequired,\n  /** Custom class names for the hyperlink */\n  className: PropTypes.string,\n  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n   * loaded into the same browsing context as the current one.\n   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n   */\n  target: PropTypes.oneOf(['_blank', '_self']),\n  /** specifies the callback function when the link is clicked */\n  onClick: PropTypes.func,\n  /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n  externalLinkAlternativeText: PropTypes.string,\n  /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n  externalLinkTitle: PropTypes.string,\n  /** type of hyperlink */\n  variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n  /** Display the link with an underline. By default, it is only underlined on hover. */\n  isInline: PropTypes.bool,\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon: PropTypes.bool,\n};\n\nexport default Hyperlink;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Launch","Icon","HYPER_LINK_EXTERNAL_LINK_ALT_TEXT","HYPER_LINK_EXTERNAL_LINK_TITLE","Hyperlink","forwardRef","_ref","ref","className","destination","children","target","onClick","externalLinkAlternativeText","externalLinkTitle","variant","isInline","showLaunchIcon","attrs","externalLinkIcon","generateRel","rel","includes","createElement","title","src","screenReaderText","style","height","width","href","defaultProps","undefined","propTypes","string","isRequired","node","oneOf","func","bool"],"sources":["../../src/Hyperlink/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nexport const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';\nexport const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';\n\ninterface Props extends Omit<React.ComponentPropsWithRef<'a'>, 'href' | 'target'> {\n  /** specifies the URL */\n  destination: string;\n  /** Content of the hyperlink */\n  children: React.ReactNode;\n  /** Custom class names for the hyperlink */\n  className?: string;\n  /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n  externalLinkAlternativeText?: string;\n  /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n  externalLinkTitle?: string;\n  /** type of hyperlink */\n  variant?: 'default' | 'muted' | 'brand';\n  /** Display the link with an underline. By default, it is only underlined on hover. */\n  isInline?: boolean;\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon?: boolean;\n  target?: '_blank' | '_self';\n}\n\nconst Hyperlink = React.forwardRef<HTMLAnchorElement, Props>(({\n  className,\n  destination,\n  children,\n  target,\n  onClick,\n  externalLinkAlternativeText,\n  externalLinkTitle,\n  variant,\n  isInline,\n  showLaunchIcon,\n  ...attrs\n}, ref) => {\n  let externalLinkIcon;\n\n  if (target === '_blank') {\n    const generateRel = () => {\n      let { rel } = attrs;\n      if (!rel) {\n        return 'noopener noreferrer';\n      }\n      if (!rel.includes('noopener')) {\n        rel += ' noopener';\n      }\n      if (!rel.includes('noreferrer')) {\n        rel += ' noreferrer';\n      }\n      return rel;\n    };\n\n    // Add this rel attribute to prevent Reverse Tabnabbing\n    attrs.rel = generateRel();\n    if (showLaunchIcon) {\n      externalLinkIcon = (\n        <span\n          className=\"pgn__hyperlink__external-icon\"\n          title={externalLinkTitle}\n        >\n          <Icon\n            src={Launch}\n            screenReaderText={externalLinkAlternativeText}\n            style={{ height: '1em', width: '1em' }}\n            data-testid=\"hyperlink-icon\"\n          />\n        </span>\n      );\n    }\n  }\n\n  return (\n    <a\n      ref={ref}\n      className={classNames(\n        'pgn__hyperlink',\n        `${variant}-link`,\n        {\n          'standalone-link': !isInline,\n          'inline-link': isInline,\n        },\n        className,\n      )}\n      href={destination}\n      target={target}\n      onClick={onClick}\n      {...attrs}\n    >\n      {children}\n      {externalLinkIcon}\n    </a>\n  );\n});\n\nHyperlink.defaultProps = {\n  className: undefined,\n  target: '_self',\n  onClick: () => {},\n  externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,\n  externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,\n  variant: 'default',\n  isInline: false,\n  showLaunchIcon: true,\n};\n\nHyperlink.propTypes = {\n  /** specifies the URL */\n  destination: PropTypes.string.isRequired,\n  /** Content of the hyperlink */\n  // @ts-ignore\n  children: PropTypes.node.isRequired,\n  /** Custom class names for the hyperlink */\n  className: PropTypes.string,\n  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n   * loaded into the same browsing context as the current one.\n   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n   */\n  target: PropTypes.oneOf(['_blank', '_self']),\n  /** specifies the callback function when the link is clicked */\n  onClick: PropTypes.func,\n  /** Alt text for the icon indicating that this link opens in a new tab, if target=\"_blank\". e.g. _(\"in a new tab\") */\n  externalLinkAlternativeText: PropTypes.string,\n  /** Tooltip text for the \"opens in new tab\" icon, if target=\"_blank\". e.g. _(\"Opens in a new tab\"). */\n  externalLinkTitle: PropTypes.string,\n  /** type of hyperlink */\n  variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n  /** Display the link with an underline. By default, it is only underlined on hover. */\n  isInline: PropTypes.bool,\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon: PropTypes.bool,\n};\n\nexport default Hyperlink;\n"],"mappings":"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","ignoreList":[]}

package/dist/Icon/index.js

@@ -1,12 +1,3 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["src", "id", "className", "hidden", "screenReaderText", "svgAttrs", "size"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-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; }
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -21,29 +12,37 @@ import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
  */
 
 function Icon(_ref) {
-  var Component = _ref.src,
-    id = _ref.id,
-    className = _ref.className,
-    hidden = _ref.hidden,
-    screenReaderText = _ref.screenReaderText,
-    svgAttrs = _ref.svgAttrs,
-    size = _ref.size,
-    attrs = _objectWithoutProperties(_ref, _excluded);
+  let {
+    src: Component,
+    id,
+    className,
+    hidden,
+    screenReaderText,
+    svgAttrs,
+    size,
+    ...attrs
+  } = _ref;
   if (Component) {
     // If no aria label is specified, hide this icon from screenreaders
-    var hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];
-    var mergedSvgProps = _objectSpread({}, svgAttrs);
+    const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];
+    const mergedSvgProps = {
+      ...svgAttrs
+    };
     if (!hasAriaLabel) {
       mergedSvgProps['aria-label'] = undefined;
       mergedSvgProps['aria-hidden'] = true;
     }
-    return /*#__PURE__*/React.createElement("span", _objectSpread({
-      className: classNames('pgn__icon', _defineProperty({}, "pgn__icon__".concat(size), !!size), className),
-      id: id
-    }, attrs), /*#__PURE__*/React.createElement(Component, _objectSpread({
+    return /*#__PURE__*/React.createElement("span", {
+      className: classNames('pgn__icon', {
+        [`pgn__icon__${size}`]: !!size
+      }, className),
+      id: id,
+      ...attrs
+    }, /*#__PURE__*/React.createElement(Component, {
       role: "img",
-      focusable: false
-    }, mergedSvgProps)), screenReaderText && /*#__PURE__*/React.createElement("span", {
+      focusable: false,
+      ...mergedSvgProps
+    }), screenReaderText && /*#__PURE__*/React.createElement("span", {
       className: "sr-only"
     }, screenReaderText));
   }
@@ -100,12 +99,8 @@ Icon.defaultProps = {
 export default withDeprecatedProps(Icon, 'Icon', {
   className: {
     deprType: DeprTypes.FORMAT,
-    expect: function expect(value) {
-      return typeof value === 'string';
-    },
-    transform: function transform(value) {
-      return Array.isArray(value) ? value.join(' ') : value;
-    },
+    expect: value => typeof value === 'string',
+    transform: value => Array.isArray(value) ? value.join(' ') : value,
     message: 'It should be a string.'
   }
 });

package/dist/Icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","withDeprecatedProps","DeprTypes","Icon","_ref","Component","src","id","className","hidden","screenReaderText","svgAttrs","size","attrs","_objectWithoutProperties","_excluded","hasAriaLabel","mergedSvgProps","_objectSpread","undefined","createElement","_defineProperty","concat","role","focusable","Fragment","propTypes","elementType","shape","string","oneOf","bool","oneOfType","element","defaultProps","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/Icon/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\n/**\n * An svg with an \"img\" role must satisfy the following a11y requirements\n * - It needs a text alternative in the form of aria-label, aria-labelledby, or screen-reader only text.\n * - If no label is desired, aria-label will be set to an empty string and aria-hidden to \"true\".\n * - focusable is set to false on the svg in all cases as a workaround for an ie11 bug\n */\n\nfunction Icon({\n  src: Component,\n  id,\n  className,\n  hidden,\n  screenReaderText,\n  svgAttrs,\n  size,\n  ...attrs\n}) {\n  if (Component) {\n    // If no aria label is specified, hide this icon from screenreaders\n    const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];\n\n    const mergedSvgProps = { ...svgAttrs };\n\n    if (!hasAriaLabel) {\n      mergedSvgProps['aria-label'] = undefined;\n      mergedSvgProps['aria-hidden'] = true;\n    }\n\n    return (\n      <span\n        className={classNames('pgn__icon', { [`pgn__icon__${size}`]: !!size }, className)}\n        id={id}\n        {...attrs}\n      >\n        <Component\n          role=\"img\"\n          focusable={false}\n          {...mergedSvgProps}\n        />\n        {screenReaderText && (\n          <span className=\"sr-only\">\n            {screenReaderText}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      <span\n        id={id || newId('Icon')}\n        className={className}\n        aria-hidden={hidden}\n      />\n      {screenReaderText && (\n        <span className=\"sr-only\">\n          {screenReaderText}\n        </span>\n      )}\n    </>\n  );\n}\n\nIcon.propTypes = {\n  /**\n   * An icon component to render.\n   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`\n   */\n  src: PropTypes.elementType,\n  /** HTML element attributes to pass through to the underlying svg element */\n  svgAttrs: PropTypes.shape({\n    'aria-label': PropTypes.string,\n    'aria-labelledby': PropTypes.string,\n  }),\n  /**\n   * the `id` property of the Icon element, by default this value is generated\n   * with the `newId` function with the `prefix` of `Icon`.\n   */\n  id: PropTypes.string,\n  /** The size of the icon. */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),\n  /** A class name that will define what the Icon looks like. */\n  className: PropTypes.string,\n  /**\n   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,\n   * this value is `true` by default.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * a string or an element that will be used on a secondary span leveraging the `sr-only` style\n   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless\n   * the Icon is being used in a way that is purely decorative or provides no additional context for screen\n   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.\n   */\n  screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nIcon.defaultProps = {\n  src: null,\n  svgAttrs: {},\n  id: undefined,\n  hidden: true,\n  screenReaderText: undefined,\n  size: undefined,\n  className: undefined,\n};\n\nexport default withDeprecatedProps(Icon, 'Icon', {\n  className: {\n    deprType: DeprTypes.FORMAT,\n    expect: value => typeof value === 'string',\n    transform: value => (Array.isArray(value) ? value.join(' ') : value),\n    message: 'It should be a string.',\n  },\n});\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","withDeprecatedProps","DeprTypes","Icon","_ref","src","Component","id","className","hidden","screenReaderText","svgAttrs","size","attrs","hasAriaLabel","mergedSvgProps","undefined","createElement","role","focusable","Fragment","propTypes","elementType","shape","string","oneOf","bool","oneOfType","element","defaultProps","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/Icon/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\n/**\n * An svg with an \"img\" role must satisfy the following a11y requirements\n * - It needs a text alternative in the form of aria-label, aria-labelledby, or screen-reader only text.\n * - If no label is desired, aria-label will be set to an empty string and aria-hidden to \"true\".\n * - focusable is set to false on the svg in all cases as a workaround for an ie11 bug\n */\n\nfunction Icon({\n  src: Component,\n  id,\n  className,\n  hidden,\n  screenReaderText,\n  svgAttrs,\n  size,\n  ...attrs\n}) {\n  if (Component) {\n    // If no aria label is specified, hide this icon from screenreaders\n    const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];\n\n    const mergedSvgProps = { ...svgAttrs };\n\n    if (!hasAriaLabel) {\n      mergedSvgProps['aria-label'] = undefined;\n      mergedSvgProps['aria-hidden'] = true;\n    }\n\n    return (\n      <span\n        className={classNames('pgn__icon', { [`pgn__icon__${size}`]: !!size }, className)}\n        id={id}\n        {...attrs}\n      >\n        <Component\n          role=\"img\"\n          focusable={false}\n          {...mergedSvgProps}\n        />\n        {screenReaderText && (\n          <span className=\"sr-only\">\n            {screenReaderText}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      <span\n        id={id || newId('Icon')}\n        className={className}\n        aria-hidden={hidden}\n      />\n      {screenReaderText && (\n        <span className=\"sr-only\">\n          {screenReaderText}\n        </span>\n      )}\n    </>\n  );\n}\n\nIcon.propTypes = {\n  /**\n   * An icon component to render.\n   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`\n   */\n  src: PropTypes.elementType,\n  /** HTML element attributes to pass through to the underlying svg element */\n  svgAttrs: PropTypes.shape({\n    'aria-label': PropTypes.string,\n    'aria-labelledby': PropTypes.string,\n  }),\n  /**\n   * the `id` property of the Icon element, by default this value is generated\n   * with the `newId` function with the `prefix` of `Icon`.\n   */\n  id: PropTypes.string,\n  /** The size of the icon. */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),\n  /** A class name that will define what the Icon looks like. */\n  className: PropTypes.string,\n  /**\n   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,\n   * this value is `true` by default.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * a string or an element that will be used on a secondary span leveraging the `sr-only` style\n   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless\n   * the Icon is being used in a way that is purely decorative or provides no additional context for screen\n   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.\n   */\n  screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nIcon.defaultProps = {\n  src: null,\n  svgAttrs: {},\n  id: undefined,\n  hidden: true,\n  screenReaderText: undefined,\n  size: undefined,\n  className: undefined,\n};\n\nexport default withDeprecatedProps(Icon, 'Icon', {\n  className: {\n    deprType: DeprTypes.FORMAT,\n    expect: value => typeof value === 'string',\n    transform: value => (Array.isArray(value) ? value.join(' ') : value),\n    message: 'It should be a string.',\n  },\n});\n"],"mappings":"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","ignoreList":[]}

package/dist/IconButton/index.d.ts

@@ -68,16 +68,17 @@ declare namespace IconButtonWithTooltip {
         suppressContentEditableWarning?: boolean | undefined;
         suppressHydrationWarning?: boolean | undefined;
         accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | undefined;
         autoFocus?: boolean | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
+        enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
         nonce?: string | undefined;
-        placeholder?: string | undefined;
         slot?: string | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         style?: React.CSSProperties | undefined;
@@ -97,7 +98,6 @@ declare namespace IconButtonWithTooltip {
         rev?: string | undefined;
         typeof?: string | undefined;
         vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
         autoCorrect?: string | undefined;
         autoSave?: string | undefined;
         color?: string | undefined;
@@ -108,20 +108,24 @@ declare namespace IconButtonWithTooltip {
         itemRef?: string | undefined;
         results?: number | undefined;
         security?: string | undefined;
-        unselectable?: "on" | "off" | undefined;
+        unselectable?: "off" | "on" | undefined;
         inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         "aria-activedescendant"?: string | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
         "aria-autocomplete"?: "inline" | "list" | "none" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
         "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
         "aria-colcount"?: number | undefined;
         "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
         "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
         "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
         "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
@@ -151,6 +155,7 @@ declare namespace IconButtonWithTooltip {
         "aria-roledescription"?: string | undefined;
         "aria-rowcount"?: number | undefined;
         "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
         "aria-rowspan"?: number | undefined;
         "aria-selected"?: (boolean | "true" | "false") | undefined;
         "aria-setsize"?: number | undefined;
@@ -230,6 +235,8 @@ declare namespace IconButtonWithTooltip {
         onProgressCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResize?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResizeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -298,9 +305,7 @@ declare namespace IconButtonWithTooltip {
         onPointerCancel?: React.PointerEventHandler<HTMLButtonElement> | undefined;
         onPointerCancelCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
         onPointerEnter?: React.PointerEventHandler<HTMLButtonElement> | undefined;
-        onPointerEnterCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
         onPointerLeave?: React.PointerEventHandler<HTMLButtonElement> | undefined;
-        onPointerLeaveCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
         onPointerOver?: React.PointerEventHandler<HTMLButtonElement> | undefined;
         onPointerOverCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
         onPointerOut?: React.PointerEventHandler<HTMLButtonElement> | undefined;
@@ -321,7 +326,7 @@ declare namespace IconButtonWithTooltip {
         onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
-        ref?: React.Ref<HTMLButtonElement> | undefined;
+        ref?: React.LegacyRef<HTMLButtonElement> | undefined;
         key?: React.Key | null | undefined;
     };
     var propTypes: {

package/dist/IconButton/index.js

@@ -1,43 +1,39 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "alt", "invertColors", "icon", "src", "iconClassNames", "onClick", "size", "variant", "iconAs", "isActive", "children"],
-  _excluded2 = ["tooltipPlacement", "tooltipContent"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-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; }
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { OverlayTrigger } from '../Overlay';
 import Tooltip from '../Tooltip';
 import Icon from '../Icon';
-var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    alt = _ref.alt,
-    invertColors = _ref.invertColors,
-    icon = _ref.icon,
-    src = _ref.src,
-    iconClassNames = _ref.iconClassNames,
-    onClick = _ref.onClick,
-    size = _ref.size,
-    variant = _ref.variant,
-    iconAs = _ref.iconAs,
-    isActive = _ref.isActive,
-    children = _ref.children,
-    attrs = _objectWithoutProperties(_ref, _excluded);
-  var invert = invertColors ? 'inverse-' : '';
-  var activeStyle = isActive ? "".concat(variant, "-") : '';
-  var IconComponent = iconAs;
-  return /*#__PURE__*/React.createElement("button", _objectSpread({
+const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    alt,
+    invertColors,
+    icon,
+    src,
+    iconClassNames,
+    onClick,
+    size,
+    variant,
+    iconAs,
+    isActive,
+    children,
+    // unused, just here because we don't want it to be part of 'attrs'
+    ...attrs
+  } = _ref;
+  const invert = invertColors ? 'inverse-' : '';
+  const activeStyle = isActive ? `${variant}-` : '';
+  const IconComponent = iconAs;
+  return /*#__PURE__*/React.createElement("button", {
     "aria-label": alt,
-    className: classNames('btn-icon', "btn-icon-".concat(invert).concat(variant), "btn-icon-".concat(size), _defineProperty({}, "btn-icon-".concat(invert).concat(activeStyle, "active"), isActive), className),
+    className: classNames('btn-icon', `btn-icon-${invert}${variant}`, `btn-icon-${size}`, {
+      [`btn-icon-${invert}${activeStyle}active`]: isActive
+    }, className),
     onClick: onClick,
     type: "button",
-    ref: ref
-  }, attrs), /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    ...attrs
+  }, /*#__PURE__*/React.createElement("span", {
     className: "btn-icon__icon-container"
   }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
     className: classNames('btn-icon__icon', iconClassNames),
@@ -54,7 +50,7 @@ IconButton.defaultProps = {
   invertColors: false,
   variant: 'primary',
   size: 'md',
-  onClick: function onClick() {},
+  onClick: () => {},
   isActive: false,
   children: undefined
 };
@@ -95,21 +91,26 @@ IconButton.propTypes = {
  * An icon button wrapped in overlaytrigger to display a tooltip.
  */
 function IconButtonWithTooltip(_ref2) {
-  var tooltipPlacement = _ref2.tooltipPlacement,
-    tooltipContent = _ref2.tooltipContent,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  var invert = props.invertColors ? 'inverse-' : '';
+  let {
+    tooltipPlacement,
+    tooltipContent,
+    ...props
+  } = _ref2;
+  const invert = props.invertColors ? 'inverse-' : '';
   return /*#__PURE__*/React.createElement(OverlayTrigger, {
     placement: tooltipPlacement,
     overlay: /*#__PURE__*/React.createElement(Tooltip, {
-      id: "iconbutton-tooltip-".concat(tooltipPlacement),
+      id: `iconbutton-tooltip-${tooltipPlacement}`,
       variant: invert ? 'light' : undefined
     }, tooltipContent)
-  }, /*#__PURE__*/React.createElement(IconButton, _objectSpread({}, props)));
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    ...props
+  }));
 }
-IconButtonWithTooltip.defaultProps = _objectSpread(_objectSpread({}, IconButton.defaultProps), {}, {
+IconButtonWithTooltip.defaultProps = {
+  ...IconButton.defaultProps,
   tooltipPlacement: 'top'
-});
+};
 IconButtonWithTooltip.propTypes = {
   /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */
   tooltipPlacement: PropTypes.string,

package/dist/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","OverlayTrigger","Tooltip","Icon","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","children","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","concat","IconComponent","createElement","_objectSpread","_defineProperty","type","defaultProps","undefined","propTypes","string","elementType","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","node"],"sources":["../../src/IconButton/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { type Placement } from 'react-bootstrap/Overlay';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\ninterface Props extends React.HTMLAttributes<HTMLButtonElement> {\n  iconAs?: React.ComponentType<any>,\n  /** Additional CSS class[es] to apply to this button */\n  className?: string;\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: string;\n  /** Changes icon styles for dark background */\n  invertColors?: boolean;\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  // Note: React.ComponentType is what we want here. React.ElementType would allow some element type strings like \"div\",\n  // but we only want to allow components like 'Add' (a specific icon component function/class)\n  src?: React.ComponentType;\n  /** Extra class names that will be added to the icon */\n  iconClassNames?: string;\n  /** Click handler for the button */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive?: boolean;\n  /** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */\n  icon?: { prefix?: string; iconName?: string, icon?: any[] },\n  /** Type of button (uses Bootstrap options) */\n  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';\n  /** size of button to render */\n  size?: 'sm' | 'md' | 'inline';\n  /** no children */\n  children?: never;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  children, // unused, just here because we don't want it to be part of 'attrs'\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  const IconComponent = iconAs;\n\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        {IconComponent && (\n          <IconComponent\n            className={classNames('btn-icon__icon', iconClassNames)}\n            icon={icon as any}\n            src={src}\n          />\n        )}\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: Icon,\n  src: undefined,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n  children: undefined,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `Icon` */\n  iconAs: PropTypes.elementType as any,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  src: PropTypes.elementType as any,\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }) as any,\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n};\n\ninterface PropsWithTooltip extends Props {\n  /** choose from https://popper.js.org/docs/v2/constructors/#options */\n  tooltipPlacement: Placement,\n  /** any content to pass to tooltip content area */\n  tooltipContent: React.ReactNode,\n}\n\n/**\n * An icon button wrapped in overlaytrigger to display a tooltip.\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, ...props\n}: PropsWithTooltip) {\n  const invert = props.invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : undefined}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  ...IconButton.defaultProps,\n  tooltipPlacement: 'top',\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\n(IconButton as any).IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton as typeof IconButton & {\n  IconButtonWithTooltip: typeof IconButtonWithTooltip,\n};\nexport { IconButtonWithTooltip };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","OverlayTrigger","Tooltip","Icon","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","children","attrs","invert","activeStyle","IconComponent","createElement","type","defaultProps","undefined","propTypes","string","elementType","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","placement","overlay","id","node"],"sources":["../../src/IconButton/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { type Placement } from 'react-bootstrap/Overlay';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\ninterface Props extends React.HTMLAttributes<HTMLButtonElement> {\n  iconAs?: React.ComponentType<any>,\n  /** Additional CSS class[es] to apply to this button */\n  className?: string;\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: string;\n  /** Changes icon styles for dark background */\n  invertColors?: boolean;\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  // Note: React.ComponentType is what we want here. React.ElementType would allow some element type strings like \"div\",\n  // but we only want to allow components like 'Add' (a specific icon component function/class)\n  src?: React.ComponentType;\n  /** Extra class names that will be added to the icon */\n  iconClassNames?: string;\n  /** Click handler for the button */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive?: boolean;\n  /** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */\n  icon?: { prefix?: string; iconName?: string, icon?: any[] },\n  /** Type of button (uses Bootstrap options) */\n  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';\n  /** size of button to render */\n  size?: 'sm' | 'md' | 'inline';\n  /** no children */\n  children?: never;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  children, // unused, just here because we don't want it to be part of 'attrs'\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  const IconComponent = iconAs;\n\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        {IconComponent && (\n          <IconComponent\n            className={classNames('btn-icon__icon', iconClassNames)}\n            icon={icon as any}\n            src={src}\n          />\n        )}\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: Icon,\n  src: undefined,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n  children: undefined,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `Icon` */\n  iconAs: PropTypes.elementType as any,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  src: PropTypes.elementType as any,\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }) as any,\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n};\n\ninterface PropsWithTooltip extends Props {\n  /** choose from https://popper.js.org/docs/v2/constructors/#options */\n  tooltipPlacement: Placement,\n  /** any content to pass to tooltip content area */\n  tooltipContent: React.ReactNode,\n}\n\n/**\n * An icon button wrapped in overlaytrigger to display a tooltip.\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, ...props\n}: PropsWithTooltip) {\n  const invert = props.invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : undefined}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  ...IconButton.defaultProps,\n  tooltipPlacement: 'top',\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\n(IconButton as any).IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton as typeof IconButton & {\n  IconButtonWithTooltip: typeof IconButtonWithTooltip,\n};\nexport { IconButtonWithTooltip };\n"],"mappings":"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","ignoreList":[]}

package/dist/IconButtonToggle/index.js

@@ -12,28 +12,28 @@ import PropTypes from 'prop-types';
  * @returns {React.Component} A React component
  */
 function IconButtonToggle(_ref) {
-  var activeValue = _ref.activeValue,
-    onChange = _ref.onChange,
-    children = _ref.children;
-  var iconButtons = useMemo(function () {
-    return React.Children.map(children, function (iconButton) {
-      var isActive = iconButton.props.value === activeValue;
-      return /*#__PURE__*/React.cloneElement(iconButton, {
-        onClick: function onClick() {
-          onChange(iconButton.props.value);
-        },
-        isActive: isActive,
-        'aria-selected': isActive,
-        'data-testid': "icon-btn-val-".concat(iconButton.props.value)
-      });
+  let {
+    activeValue,
+    onChange,
+    children
+  } = _ref;
+  const iconButtons = useMemo(() => React.Children.map(children, iconButton => {
+    const isActive = iconButton.props.value === activeValue;
+    return /*#__PURE__*/React.cloneElement(iconButton, {
+      onClick: () => {
+        onChange(iconButton.props.value);
+      },
+      isActive,
+      'aria-selected': isActive,
+      'data-testid': `icon-btn-val-${iconButton.props.value}`
     });
-  }, [children, activeValue, onChange]);
+  }), [children, activeValue, onChange]);
   return /*#__PURE__*/React.createElement("div", {
     className: "pgn__icon-button-toggle__container"
   }, iconButtons);
 }
 IconButtonToggle.defaultProps = {
-  onChange: function onChange() {},
+  onChange: () => {},
   activeValue: undefined
 };
 IconButtonToggle.propTypes = {

package/dist/IconButtonToggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","IconButtonToggle","_ref","activeValue","onChange","children","iconButtons","Children","map","iconButton","isActive","props","value","cloneElement","onClick","concat","createElement","className","defaultProps","undefined","propTypes","string","func","node","isRequired"],"sources":["../../src/IconButtonToggle/index.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\n/**\n *\n * @param {object} args arguments\n * @param {boolean} args.activeValue the current value of the active/selected iconButton.\n *                                   if not provided, none of the iconButtons will initially be active\n * @param {Function} args.onChange callback to call when toggle value changes.\n *                                 Receives value of the selected toggle button.\n * @param {Array<IconButton>} args.children children components expected to be IconButton\n * @returns {React.Component} A React component\n */\nfunction IconButtonToggle({ activeValue, onChange, children }) {\n  const iconButtons = useMemo(\n    () => React.Children.map(children, iconButton => {\n      const isActive = iconButton.props.value === activeValue;\n      return React.cloneElement(iconButton, {\n        onClick: () => { onChange(iconButton.props.value); },\n        isActive,\n        'aria-selected': isActive,\n        'data-testid': `icon-btn-val-${iconButton.props.value}`,\n      });\n    }),\n    [children, activeValue, onChange],\n  );\n  return <div className=\"pgn__icon-button-toggle__container\">{iconButtons}</div>;\n}\n\nIconButtonToggle.defaultProps = {\n  onChange: () => {},\n  activeValue: undefined,\n};\n\nIconButtonToggle.propTypes = {\n  /** value to use to check which button to set to active */\n  activeValue: PropTypes.string,\n  /** handler that is passed the currently active button's value when a button is selected */\n  onChange: PropTypes.func,\n  /** child nodes of type `IconButton` (or its subcomponents) to be rendered within toggle group */\n  children: PropTypes.node.isRequired,\n};\n\nexport default IconButtonToggle;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,SAAS,MAAM,YAAY;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAAAC,IAAA,EAAsC;EAAA,IAAnCC,WAAW,GAAAD,IAAA,CAAXC,WAAW;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;EACzD,IAAMC,WAAW,GAAGP,OAAO,CACzB;IAAA,OAAMD,KAAK,CAACS,QAAQ,CAACC,GAAG,CAACH,QAAQ,EAAE,UAAAI,UAAU,EAAI;MAC/C,IAAMC,QAAQ,GAAGD,UAAU,CAACE,KAAK,CAACC,KAAK,KAAKT,WAAW;MACvD,oBAAOL,KAAK,CAACe,YAAY,CAACJ,UAAU,EAAE;QACpCK,OAAO,EAAE,SAAAA,QAAA,EAAM;UAAEV,QAAQ,CAACK,UAAU,CAACE,KAAK,CAACC,KAAK,CAAC;QAAE,CAAC;QACpDF,QAAQ,EAARA,QAAQ;QACR,eAAe,EAAEA,QAAQ;QACzB,aAAa,kBAAAK,MAAA,CAAkBN,UAAU,CAACE,KAAK,CAACC,KAAK;MACvD,CAAC,CAAC;IACJ,CAAC,CAAC;EAAA,GACF,CAACP,QAAQ,EAAEF,WAAW,EAAEC,QAAQ,CAClC,CAAC;EACD,oBAAON,KAAA,CAAAkB,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAAEX,WAAiB,CAAC;AAChF;AAEAL,gBAAgB,CAACiB,YAAY,GAAG;EAC9Bd,QAAQ,EAAE,SAAAA,SAAA,EAAM,CAAC,CAAC;EAClBD,WAAW,EAAEgB;AACf,CAAC;AAEDlB,gBAAgB,CAACmB,SAAS,GAAG;EAC3B;EACAjB,WAAW,EAAEH,SAAS,CAACqB,MAAM;EAC7B;EACAjB,QAAQ,EAAEJ,SAAS,CAACsB,IAAI;EACxB;EACAjB,QAAQ,EAAEL,SAAS,CAACuB,IAAI,CAACC;AAC3B,CAAC;AAED,eAAevB,gBAAgB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","IconButtonToggle","_ref","activeValue","onChange","children","iconButtons","Children","map","iconButton","isActive","props","value","cloneElement","onClick","createElement","className","defaultProps","undefined","propTypes","string","func","node","isRequired"],"sources":["../../src/IconButtonToggle/index.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\n/**\n *\n * @param {object} args arguments\n * @param {boolean} args.activeValue the current value of the active/selected iconButton.\n *                                   if not provided, none of the iconButtons will initially be active\n * @param {Function} args.onChange callback to call when toggle value changes.\n *                                 Receives value of the selected toggle button.\n * @param {Array<IconButton>} args.children children components expected to be IconButton\n * @returns {React.Component} A React component\n */\nfunction IconButtonToggle({ activeValue, onChange, children }) {\n  const iconButtons = useMemo(\n    () => React.Children.map(children, iconButton => {\n      const isActive = iconButton.props.value === activeValue;\n      return React.cloneElement(iconButton, {\n        onClick: () => { onChange(iconButton.props.value); },\n        isActive,\n        'aria-selected': isActive,\n        'data-testid': `icon-btn-val-${iconButton.props.value}`,\n      });\n    }),\n    [children, activeValue, onChange],\n  );\n  return <div className=\"pgn__icon-button-toggle__container\">{iconButtons}</div>;\n}\n\nIconButtonToggle.defaultProps = {\n  onChange: () => {},\n  activeValue: undefined,\n};\n\nIconButtonToggle.propTypes = {\n  /** value to use to check which button to set to active */\n  activeValue: PropTypes.string,\n  /** handler that is passed the currently active button's value when a button is selected */\n  onChange: PropTypes.func,\n  /** child nodes of type `IconButton` (or its subcomponents) to be rendered within toggle group */\n  children: PropTypes.node.isRequired,\n};\n\nexport default IconButtonToggle;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,SAAS,MAAM,YAAY;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAAAC,IAAA,EAAsC;EAAA,IAArC;IAAEC,WAAW;IAAEC,QAAQ;IAAEC;EAAS,CAAC,GAAAH,IAAA;EAC3D,MAAMI,WAAW,GAAGP,OAAO,CACzB,MAAMD,KAAK,CAACS,QAAQ,CAACC,GAAG,CAACH,QAAQ,EAAEI,UAAU,IAAI;IAC/C,MAAMC,QAAQ,GAAGD,UAAU,CAACE,KAAK,CAACC,KAAK,KAAKT,WAAW;IACvD,oBAAOL,KAAK,CAACe,YAAY,CAACJ,UAAU,EAAE;MACpCK,OAAO,EAAEA,CAAA,KAAM;QAAEV,QAAQ,CAACK,UAAU,CAACE,KAAK,CAACC,KAAK,CAAC;MAAE,CAAC;MACpDF,QAAQ;MACR,eAAe,EAAEA,QAAQ;MACzB,aAAa,EAAE,gBAAgBD,UAAU,CAACE,KAAK,CAACC,KAAK;IACvD,CAAC,CAAC;EACJ,CAAC,CAAC,EACF,CAACP,QAAQ,EAAEF,WAAW,EAAEC,QAAQ,CAClC,CAAC;EACD,oBAAON,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAAEV,WAAiB,CAAC;AAChF;AAEAL,gBAAgB,CAACgB,YAAY,GAAG;EAC9Bb,QAAQ,EAAEA,CAAA,KAAM,CAAC,CAAC;EAClBD,WAAW,EAAEe;AACf,CAAC;AAEDjB,gBAAgB,CAACkB,SAAS,GAAG;EAC3B;EACAhB,WAAW,EAAEH,SAAS,CAACoB,MAAM;EAC7B;EACAhB,QAAQ,EAAEJ,SAAS,CAACqB,IAAI;EACxB;EACAhB,QAAQ,EAAEL,SAAS,CAACsB,IAAI,CAACC;AAC3B,CAAC;AAED,eAAetB,gBAAgB","ignoreList":[]}