@openedx/paragon 21.9.0 → 21.10.0

package/dist/ProductTour/Checkpoint.js

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

package/dist/ProductTour/Checkpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkpoint.js","names":["React","useEffect","useState","useMediaQuery","PropTypes","createPopper","FormattedMessage","breakpoints","CheckpointActionRow","CheckpointBody","CheckpointBreadcrumbs","CheckpointTitle","Checkpoint","forwardRef","_ref","ref","body","index","placement","target","title","totalCheckpoints","props","_objectWithoutProperties","_excluded","checkpointVisible","setCheckpointVisible","isMobile","maxWidth","small","targetElement","document","querySelector","checkpoint","checkpointPopper","modifiers","name","options","padding","offset","tetherOffset","forceUpdate","targetOffset","getBoundingClientRect","top","bottom","global","innerHeight","includes","scrollTo","behavior","button","focus","isLastCheckpoint","isOnlyCheckpoint","createElement","id","className","role","style","visibility","pointerEvents","defaultMessage","value","step","description","currentIndex","_extends","defaultProps","advanceButtonText","dismissButtonText","endButtonText","showDismissButton","undefined","propTypes","node","number","isRequired","onAdvance","func","onDismiss","onEnd","oneOf","string","bool"],"sources":["../../src/ProductTour/Checkpoint.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport PropTypes from 'prop-types';\nimport { createPopper } from '@popperjs/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport breakpoints from '../utils/breakpoints';\n\nimport CheckpointActionRow from './CheckpointActionRow';\nimport CheckpointBody from './CheckpointBody';\nimport CheckpointBreadcrumbs from './CheckpointBreadcrumbs';\nimport CheckpointTitle from './CheckpointTitle';\n\nconst Checkpoint = React.forwardRef(({\n  body,\n  index,\n  placement,\n  target,\n  title,\n  totalCheckpoints,\n  ...props\n}, ref) => {\n  const [checkpointVisible, setCheckpointVisible] = useState(false);\n  const isMobile = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });\n\n  useEffect(() => {\n    const targetElement = document.querySelector(target);\n    const checkpoint = document.querySelector('#pgn__checkpoint');\n    if (targetElement && checkpoint) {\n      // Use the Popper library to translate the Checkpoint to its target's coordinates\n      const checkpointPopper = createPopper(targetElement, checkpoint, {\n        placement: isMobile ? 'top' : placement,\n        modifiers: [\n          {\n            name: 'arrow',\n            options: {\n              padding: 25,\n            },\n          },\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 20],\n            },\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 20,\n              tetherOffset: 35,\n            },\n          },\n        ],\n      });\n      setCheckpointVisible(true);\n      if (checkpointPopper) {\n        checkpointPopper.forceUpdate();\n      }\n    }\n  }, [target, isMobile, placement]);\n\n  useEffect(() => {\n    if (checkpointVisible) {\n      // Scroll the Checkpoint into view once its rendered\n      const targetElement = document.querySelector(target);\n      let targetOffset = targetElement.getBoundingClientRect().top;\n      if ((targetOffset < 0) || (targetElement.getBoundingClientRect().bottom > global.innerHeight)) {\n        if (placement.includes('top')) {\n          if (targetOffset < 0) {\n            targetOffset *= -1;\n          }\n          targetOffset -= 280;\n        } else {\n          targetOffset -= 80;\n        }\n\n        global.scrollTo({\n          top: targetOffset, behavior: 'smooth',\n        });\n      }\n\n      const button = document.querySelector('.pgn__checkpoint-button_advance');\n      button.focus();\n    }\n  }, [target, checkpointVisible, placement]);\n\n  const isLastCheckpoint = index + 1 === totalCheckpoints;\n  const isOnlyCheckpoint = totalCheckpoints === 1;\n\n  return (\n    <div\n      id=\"pgn__checkpoint\"\n      className=\"pgn__checkpoint\"\n      aria-labelledby=\"pgn__checkpoint-title\"\n      ref={ref}\n      role=\"dialog\"\n      style={{ visibility: checkpointVisible ? 'visible' : 'hidden', pointerEvents: checkpointVisible ? 'auto' : 'none' }}\n    >\n      <span className=\"sr-only\">\n        <FormattedMessage\n          id=\"pgn.ProductTour.Checkpoint.position-text\"\n          defaultMessage=\"Top of step {step}\"\n          value={{ step: index + 1 }}\n          description=\"Screen-reader message to indicate the user's position in a sequence of checkpoints.\"\n        />\n      </span>\n      {(title || !isOnlyCheckpoint) && (\n        <div className=\"pgn__checkpoint-header\">\n          <CheckpointTitle>{title}</CheckpointTitle>\n          <CheckpointBreadcrumbs currentIndex={index} totalCheckpoints={totalCheckpoints} />\n        </div>\n      )}\n      <CheckpointBody>{body}</CheckpointBody>\n      <CheckpointActionRow\n        isLastCheckpoint={isLastCheckpoint}\n        index={index}\n        {...props}\n      />\n      <div id=\"pgn__checkpoint-arrow\" data-popper-arrow />\n      {/* This text is not translated due to Paragon's lack of i18n support */}\n      <span className=\"sr-only\">Bottom of step {index + 1}</span>\n    </div>\n  );\n});\n\nCheckpoint.defaultProps = {\n  advanceButtonText: null,\n  body: null,\n  dismissButtonText: null,\n  endButtonText: null,\n  placement: 'top',\n  title: null,\n  showDismissButton: undefined,\n};\n\nCheckpoint.propTypes = {\n  /** The text displayed on the button used to advance the tour for the given Checkpoint. */\n  advanceButtonText: PropTypes.node,\n  /** The text displayed in the body of the Checkpoint */\n  body: PropTypes.node,\n  /** The text displayed on the button used to dismiss the tour for the given Checkpoint. */\n  dismissButtonText: PropTypes.node,\n  /** The text displayed on the button used to end the tour for the given Checkpoint. */\n  endButtonText: PropTypes.node,\n  /** The current index of the given Checkpoint */\n  index: PropTypes.number.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button for the given Checkpoint. */\n  onAdvance: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the dismiss\n   * button for the given Checkpoint. */\n  onDismiss: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button if the given Checkpoint is the only or last Checkpoint in a tour. */\n  onEnd: PropTypes.func.isRequired,\n  /** A string that dictates the alignment of the Checkpoint around its target. */\n  placement: PropTypes.oneOf([\n    'top', 'top-start', 'top-end', 'right-start', 'right', 'right-end',\n    'left-start', 'left', 'left-end', 'bottom', 'bottom-start', 'bottom-end',\n  ]),\n  /** The CSS selector for the Checkpoint's desired target. */\n  target: PropTypes.string.isRequired,\n  /** The text displayed in the title of the Checkpoint */\n  title: PropTypes.node,\n  /** The total number of Checkpoints in a tour */\n  totalCheckpoints: PropTypes.number.isRequired,\n  /** Enforces visibility of the dismiss button under all circumstances */\n  showDismissButton: PropTypes.bool,\n};\n\nexport default Checkpoint;\n"],"mappings":"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"}
+{"version":3,"file":"Checkpoint.js","names":["React","useEffect","useState","useMediaQuery","PropTypes","createPopper","FormattedMessage","breakpoints","CheckpointActionRow","CheckpointBody","CheckpointBreadcrumbs","CheckpointTitle","Checkpoint","forwardRef","_ref","ref","body","index","placement","target","title","totalCheckpoints","props","_objectWithoutProperties","_excluded","checkpointVisible","setCheckpointVisible","isMobile","maxWidth","small","targetElement","document","querySelector","checkpoint","checkpointPopper","strategy","modifiers","name","options","padding","offset","tetherOffset","forceUpdate","targetOffset","getBoundingClientRect","top","bottom","global","innerHeight","includes","scrollTo","behavior","button","focus","isLastCheckpoint","isOnlyCheckpoint","createElement","id","className","role","style","visibility","pointerEvents","defaultMessage","value","step","description","currentIndex","_extends","defaultProps","advanceButtonText","dismissButtonText","endButtonText","showDismissButton","undefined","propTypes","node","number","isRequired","onAdvance","func","onDismiss","onEnd","oneOf","string","bool"],"sources":["../../src/ProductTour/Checkpoint.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport PropTypes from 'prop-types';\nimport { createPopper } from '@popperjs/core';\nimport { FormattedMessage } from 'react-intl';\n\nimport breakpoints from '../utils/breakpoints';\n\nimport CheckpointActionRow from './CheckpointActionRow';\nimport CheckpointBody from './CheckpointBody';\nimport CheckpointBreadcrumbs from './CheckpointBreadcrumbs';\nimport CheckpointTitle from './CheckpointTitle';\n\nconst Checkpoint = React.forwardRef(({\n  body,\n  index,\n  placement,\n  target,\n  title,\n  totalCheckpoints,\n  ...props\n}, ref) => {\n  const [checkpointVisible, setCheckpointVisible] = useState(false);\n  const isMobile = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });\n\n  useEffect(() => {\n    const targetElement = document.querySelector(target);\n    const checkpoint = document.querySelector('#pgn__checkpoint');\n    if (targetElement && checkpoint) {\n      // Use the Popper library to translate the Checkpoint to its target's coordinates\n      const checkpointPopper = createPopper(targetElement, checkpoint, {\n        placement: isMobile ? 'top' : placement,\n        strategy: 'fixed',\n        modifiers: [\n          {\n            name: 'arrow',\n            options: {\n              padding: 25,\n            },\n          },\n          {\n            name: 'offset',\n            options: {\n              offset: [0, 20],\n            },\n          },\n          {\n            name: 'preventOverflow',\n            options: {\n              padding: 20,\n              tetherOffset: 35,\n            },\n          },\n        ],\n      });\n      setCheckpointVisible(true);\n      if (checkpointPopper) {\n        checkpointPopper.forceUpdate();\n      }\n    }\n  }, [target, isMobile, placement]);\n\n  useEffect(() => {\n    if (checkpointVisible) {\n      // Scroll the Checkpoint into view once its rendered\n      const targetElement = document.querySelector(target);\n      let targetOffset = targetElement.getBoundingClientRect().top;\n      if ((targetOffset < 0) || (targetElement.getBoundingClientRect().bottom > global.innerHeight)) {\n        if (placement.includes('top')) {\n          if (targetOffset < 0) {\n            targetOffset *= -1;\n          }\n          targetOffset -= 280;\n        } else {\n          targetOffset -= 80;\n        }\n\n        global.scrollTo({\n          top: targetOffset, behavior: 'smooth',\n        });\n      }\n\n      const button = document.querySelector('.pgn__checkpoint-button_advance');\n      button.focus();\n    }\n  }, [target, checkpointVisible, placement]);\n\n  const isLastCheckpoint = index + 1 === totalCheckpoints;\n  const isOnlyCheckpoint = totalCheckpoints === 1;\n\n  return (\n    <div\n      id=\"pgn__checkpoint\"\n      className=\"pgn__checkpoint\"\n      aria-labelledby=\"pgn__checkpoint-title\"\n      ref={ref}\n      role=\"dialog\"\n      style={{ visibility: checkpointVisible ? 'visible' : 'hidden', pointerEvents: checkpointVisible ? 'auto' : 'none' }}\n    >\n      <span className=\"sr-only\">\n        <FormattedMessage\n          id=\"pgn.ProductTour.Checkpoint.position-text\"\n          defaultMessage=\"Top of step {step}\"\n          value={{ step: index + 1 }}\n          description=\"Screen-reader message to indicate the user's position in a sequence of checkpoints.\"\n        />\n      </span>\n      {(title || !isOnlyCheckpoint) && (\n        <div className=\"pgn__checkpoint-header\">\n          <CheckpointTitle>{title}</CheckpointTitle>\n          <CheckpointBreadcrumbs currentIndex={index} totalCheckpoints={totalCheckpoints} />\n        </div>\n      )}\n      <CheckpointBody>{body}</CheckpointBody>\n      <CheckpointActionRow\n        isLastCheckpoint={isLastCheckpoint}\n        index={index}\n        {...props}\n      />\n      <div id=\"pgn__checkpoint-arrow\" data-popper-arrow />\n      {/* This text is not translated due to Paragon's lack of i18n support */}\n      <span className=\"sr-only\">Bottom of step {index + 1}</span>\n    </div>\n  );\n});\n\nCheckpoint.defaultProps = {\n  advanceButtonText: null,\n  body: null,\n  dismissButtonText: null,\n  endButtonText: null,\n  placement: 'top',\n  title: null,\n  showDismissButton: undefined,\n};\n\nCheckpoint.propTypes = {\n  /** The text displayed on the button used to advance the tour for the given Checkpoint. */\n  advanceButtonText: PropTypes.node,\n  /** The text displayed in the body of the Checkpoint */\n  body: PropTypes.node,\n  /** The text displayed on the button used to dismiss the tour for the given Checkpoint. */\n  dismissButtonText: PropTypes.node,\n  /** The text displayed on the button used to end the tour for the given Checkpoint. */\n  endButtonText: PropTypes.node,\n  /** The current index of the given Checkpoint */\n  index: PropTypes.number.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button for the given Checkpoint. */\n  onAdvance: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the dismiss\n   * button for the given Checkpoint. */\n  onDismiss: PropTypes.func.isRequired,\n  /** A function that runs when triggering the `onClick` event of the advance\n   * button if the given Checkpoint is the only or last Checkpoint in a tour. */\n  onEnd: PropTypes.func.isRequired,\n  /** A string that dictates the alignment of the Checkpoint around its target. */\n  placement: PropTypes.oneOf([\n    'top', 'top-start', 'top-end', 'right-start', 'right', 'right-end',\n    'left-start', 'left', 'left-end', 'bottom', 'bottom-start', 'bottom-end',\n  ]),\n  /** The CSS selector for the Checkpoint's desired target. */\n  target: PropTypes.string.isRequired,\n  /** The text displayed in the title of the Checkpoint */\n  title: PropTypes.node,\n  /** The total number of Checkpoints in a tour */\n  totalCheckpoints: PropTypes.number.isRequired,\n  /** Enforces visibility of the dismiss button under all circumstances */\n  showDismissButton: PropTypes.bool,\n};\n\nexport default Checkpoint;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAClD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,gBAAgB,QAAQ,YAAY;AAE7C,OAAOC,WAAW,MAAM,sBAAsB;AAE9C,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D,OAAOC,eAAe,MAAM,mBAAmB;AAE/C,MAAMC,UAAU,gBAAGZ,KAAK,CAACa,UAAU,CAAC,CAAAC,IAAA,EAQjCC,GAAG,KAAK;EAAA,IAR0B;MACnCC,IAAI;MACJC,KAAK;MACLC,SAAS;MACTC,MAAM;MACNC,KAAK;MACLC;IAEF,CAAC,GAAAP,IAAA;IADIQ,KAAK,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAER,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGxB,QAAQ,CAAC,KAAK,CAAC;EACjE,MAAMyB,QAAQ,GAAGxB,aAAa,CAAC;IAAEyB,QAAQ,EAAErB,WAAW,CAACsB,KAAK,CAACD;EAAS,CAAC,CAAC;EAExE3B,SAAS,CAAC,MAAM;IACd,MAAM6B,aAAa,GAAGC,QAAQ,CAACC,aAAa,CAACb,MAAM,CAAC;IACpD,MAAMc,UAAU,GAAGF,QAAQ,CAACC,aAAa,CAAC,kBAAkB,CAAC;IAC7D,IAAIF,aAAa,IAAIG,UAAU,EAAE;MAC/B;MACA,MAAMC,gBAAgB,GAAG7B,YAAY,CAACyB,aAAa,EAAEG,UAAU,EAAE;QAC/Df,SAAS,EAAES,QAAQ,GAAG,KAAK,GAAGT,SAAS;QACvCiB,QAAQ,EAAE,OAAO;QACjBC,SAAS,EAAE,CACT;UACEC,IAAI,EAAE,OAAO;UACbC,OAAO,EAAE;YACPC,OAAO,EAAE;UACX;QACF,CAAC,EACD;UACEF,IAAI,EAAE,QAAQ;UACdC,OAAO,EAAE;YACPE,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;UAChB;QACF,CAAC,EACD;UACEH,IAAI,EAAE,iBAAiB;UACvBC,OAAO,EAAE;YACPC,OAAO,EAAE,EAAE;YACXE,YAAY,EAAE;UAChB;QACF,CAAC;MAEL,CAAC,CAAC;MACFf,oBAAoB,CAAC,IAAI,CAAC;MAC1B,IAAIQ,gBAAgB,EAAE;QACpBA,gBAAgB,CAACQ,WAAW,CAAC,CAAC;MAChC;IACF;EACF,CAAC,EAAE,CAACvB,MAAM,EAAEQ,QAAQ,EAAET,SAAS,CAAC,CAAC;EAEjCjB,SAAS,CAAC,MAAM;IACd,IAAIwB,iBAAiB,EAAE;MACrB;MACA,MAAMK,aAAa,GAAGC,QAAQ,CAACC,aAAa,CAACb,MAAM,CAAC;MACpD,IAAIwB,YAAY,GAAGb,aAAa,CAACc,qBAAqB,CAAC,CAAC,CAACC,GAAG;MAC5D,IAAKF,YAAY,GAAG,CAAC,IAAMb,aAAa,CAACc,qBAAqB,CAAC,CAAC,CAACE,MAAM,GAAGC,MAAM,CAACC,WAAY,EAAE;QAC7F,IAAI9B,SAAS,CAAC+B,QAAQ,CAAC,KAAK,CAAC,EAAE;UAC7B,IAAIN,YAAY,GAAG,CAAC,EAAE;YACpBA,YAAY,IAAI,CAAC,CAAC;UACpB;UACAA,YAAY,IAAI,GAAG;QACrB,CAAC,MAAM;UACLA,YAAY,IAAI,EAAE;QACpB;QAEAI,MAAM,CAACG,QAAQ,CAAC;UACdL,GAAG,EAAEF,YAAY;UAAEQ,QAAQ,EAAE;QAC/B,CAAC,CAAC;MACJ;MAEA,MAAMC,MAAM,GAAGrB,QAAQ,CAACC,aAAa,CAAC,iCAAiC,CAAC;MACxEoB,MAAM,CAACC,KAAK,CAAC,CAAC;IAChB;EACF,CAAC,EAAE,CAAClC,MAAM,EAAEM,iBAAiB,EAAEP,SAAS,CAAC,CAAC;EAE1C,MAAMoC,gBAAgB,GAAGrC,KAAK,GAAG,CAAC,KAAKI,gBAAgB;EACvD,MAAMkC,gBAAgB,GAAGlC,gBAAgB,KAAK,CAAC;EAE/C,oBACErB,KAAA,CAAAwD,aAAA;IACEC,EAAE,EAAC,iBAAiB;IACpBC,SAAS,EAAC,iBAAiB;IAC3B,mBAAgB,uBAAuB;IACvC3C,GAAG,EAAEA,GAAI;IACT4C,IAAI,EAAC,QAAQ;IACbC,KAAK,EAAE;MAAEC,UAAU,EAAEpC,iBAAiB,GAAG,SAAS,GAAG,QAAQ;MAAEqC,aAAa,EAAErC,iBAAiB,GAAG,MAAM,GAAG;IAAO;EAAE,gBAEpHzB,KAAA,CAAAwD,aAAA;IAAME,SAAS,EAAC;EAAS,gBACvB1D,KAAA,CAAAwD,aAAA,CAAClD,gBAAgB;IACfmD,EAAE,EAAC,0CAA0C;IAC7CM,cAAc,EAAC,oBAAoB;IACnCC,KAAK,EAAE;MAAEC,IAAI,EAAEhD,KAAK,GAAG;IAAE,CAAE;IAC3BiD,WAAW,EAAC;EAAqF,CAClG,CACG,CAAC,EACN,CAAC9C,KAAK,IAAI,CAACmC,gBAAgB,kBAC1BvD,KAAA,CAAAwD,aAAA;IAAKE,SAAS,EAAC;EAAwB,gBACrC1D,KAAA,CAAAwD,aAAA,CAAC7C,eAAe,QAAES,KAAuB,CAAC,eAC1CpB,KAAA,CAAAwD,aAAA,CAAC9C,qBAAqB;IAACyD,YAAY,EAAElD,KAAM;IAACI,gBAAgB,EAAEA;EAAiB,CAAE,CAC9E,CACN,eACDrB,KAAA,CAAAwD,aAAA,CAAC/C,cAAc,QAAEO,IAAqB,CAAC,eACvChB,KAAA,CAAAwD,aAAA,CAAChD,mBAAmB,EAAA4D,QAAA;IAClBd,gBAAgB,EAAEA,gBAAiB;IACnCrC,KAAK,EAAEA;EAAM,GACTK,KAAK,CACV,CAAC,eACFtB,KAAA,CAAAwD,aAAA;IAAKC,EAAE,EAAC,uBAAuB;IAAC;EAAiB,CAAE,CAAC,eAEpDzD,KAAA,CAAAwD,aAAA;IAAME,SAAS,EAAC;EAAS,GAAC,iBAAe,EAACzC,KAAK,GAAG,CAAQ,CACvD,CAAC;AAEV,CAAC,CAAC;AAEFL,UAAU,CAACyD,YAAY,GAAG;EACxBC,iBAAiB,EAAE,IAAI;EACvBtD,IAAI,EAAE,IAAI;EACVuD,iBAAiB,EAAE,IAAI;EACvBC,aAAa,EAAE,IAAI;EACnBtD,SAAS,EAAE,KAAK;EAChBE,KAAK,EAAE,IAAI;EACXqD,iBAAiB,EAAEC;AACrB,CAAC;AAED9D,UAAU,CAAC+D,SAAS,GAAG;EACrB;EACAL,iBAAiB,EAAElE,SAAS,CAACwE,IAAI;EACjC;EACA5D,IAAI,EAAEZ,SAAS,CAACwE,IAAI;EACpB;EACAL,iBAAiB,EAAEnE,SAAS,CAACwE,IAAI;EACjC;EACAJ,aAAa,EAAEpE,SAAS,CAACwE,IAAI;EAC7B;EACA3D,KAAK,EAAEb,SAAS,CAACyE,MAAM,CAACC,UAAU;EAClC;AACF;EACEC,SAAS,EAAE3E,SAAS,CAAC4E,IAAI,CAACF,UAAU;EACpC;AACF;EACEG,SAAS,EAAE7E,SAAS,CAAC4E,IAAI,CAACF,UAAU;EACpC;AACF;EACEI,KAAK,EAAE9E,SAAS,CAAC4E,IAAI,CAACF,UAAU;EAChC;EACA5D,SAAS,EAAEd,SAAS,CAAC+E,KAAK,CAAC,CACzB,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,WAAW,EAClE,YAAY,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,YAAY,CACzE,CAAC;EACF;EACAhE,MAAM,EAAEf,SAAS,CAACgF,MAAM,CAACN,UAAU;EACnC;EACA1D,KAAK,EAAEhB,SAAS,CAACwE,IAAI;EACrB;EACAvD,gBAAgB,EAAEjB,SAAS,CAACyE,MAAM,CAACC,UAAU;EAC7C;EACAL,iBAAiB,EAAErE,SAAS,CAACiF;AAC/B,CAAC;AAED,eAAezE,UAAU"}

package/dist/SelectableBox/index.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "value", "checked", "children", "isIndeterminate", "isInvalid", "onClick", "onFocus", "inputHidden", "className"];
+const _excluded = ["type", "value", "checked", "children", "isIndeterminate", "isInvalid", "onClick", "onFocus", "inputHidden", "className", "showActiveBoxState"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -26,7 +26,8 @@ const SelectableBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onClick,
       onFocus,
       inputHidden,
-      className
+      className,
+      showActiveBoxState
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const inputType = getInputType('SelectableBox', type);
@@ -68,7 +69,7 @@ const SelectableBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onClick: () => inputRef.current.click(),
     onFocus: onFocus,
     className: classNames('pgn__selectable_box', className, {
-      'pgn__selectable_box-active': isChecked() || checked,
+      'pgn__selectable_box-active': !inputHidden && !showActiveBoxState ? false : isChecked() || checked,
       'pgn__selectable_box-invalid': isInvalid
     }),
     tabIndex: 0,
@@ -95,7 +96,9 @@ SelectableBox.propTypes = {
   /** Adds errors styles to the `SelectableBox`. */
   isInvalid: PropTypes.bool,
   /** A class that is appended to the base element. */
-  className: PropTypes.string
+  className: PropTypes.string,
+  /** Controls the visibility of the active state for the `SelectableBox`. */
+  showActiveBoxState: PropTypes.bool
 };
 SelectableBox.defaultProps = {
   value: undefined,
@@ -106,7 +109,8 @@ SelectableBox.defaultProps = {
   inputHidden: true,
   isIndeterminate: false,
   isInvalid: false,
-  className: undefined
+  className: undefined,
+  showActiveBoxState: true
 };
 SelectableBox.Set = SelectableBoxSet;
 export default SelectableBox;

package/dist/SelectableBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useRef","useEffect","PropTypes","classNames","SelectableBoxSet","useCheckboxSetContext","useRadioSetContext","getInputType","INPUT_TYPES","SelectableBox","forwardRef","_ref","ref","type","value","checked","children","isIndeterminate","isInvalid","onClick","onFocus","inputHidden","className","props","_objectWithoutProperties","_excluded","inputType","radioValue","checkboxValues","isChecked","includes","inputRef","input","createElement","_objectSpread","hidden","tabIndex","onChange","current","onclick","_extends","role","onKeyPress","click","propTypes","node","isRequired","oneOfType","string","number","bool","oneOf","func","defaultProps","undefined","Set"],"sources":["../../src/SelectableBox/index.jsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport SelectableBoxSet from './SelectableBoxSet';\nimport { useCheckboxSetContext } from '../Form/FormCheckboxSetContext';\nimport { useRadioSetContext } from '../Form/FormRadioSetContext';\nimport { getInputType } from './utils';\n\nconst INPUT_TYPES = [\n  'radio',\n  'checkbox',\n];\n\nconst SelectableBox = React.forwardRef(({\n  type,\n  value,\n  checked,\n  children,\n  isIndeterminate,\n  isInvalid,\n  onClick,\n  onFocus,\n  inputHidden,\n  className,\n  ...props\n}, ref) => {\n  const inputType = getInputType('SelectableBox', type);\n  const { value: radioValue } = useRadioSetContext();\n  const { value: checkboxValues = [] } = useCheckboxSetContext();\n\n  const isChecked = () => {\n    switch (type) {\n      case 'radio':\n        return radioValue === value;\n      case 'checkbox':\n        return checkboxValues.includes(value);\n      default:\n        return radioValue === value;\n    }\n  };\n\n  const inputRef = useRef(null);\n  const input = React.createElement(inputType, {\n    value,\n    checked,\n    hidden: inputHidden,\n    ref: inputRef,\n    tabIndex: -1,\n    onChange: () => {},\n    ...(type === 'checkbox' ? { ...props, isIndeterminate } : { ...props }),\n  }, null);\n\n  useEffect(() => {\n    if (onClick && inputRef.current) {\n      inputRef.current.onclick = () => onClick(inputRef.current);\n    }\n  }, [onClick]);\n\n  return (\n    <div\n      role=\"button\"\n      onKeyPress={() => inputRef.current.click()}\n      onClick={() => inputRef.current.click()}\n      onFocus={onFocus}\n      className={classNames('pgn__selectable_box', className, {\n        'pgn__selectable_box-active': isChecked() || checked,\n        'pgn__selectable_box-invalid': isInvalid,\n      })}\n      tabIndex={0}\n      ref={ref}\n      {...props}\n    >\n      {input}\n      {children}\n    </div>\n  );\n});\n\nSelectableBox.propTypes = {\n  /** Content of the `SelectableBox`. */\n  children: PropTypes.node.isRequired,\n  /** A value that is passed to the input tag. */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Controls whether `SelectableBox` is checked. */\n  checked: PropTypes.bool,\n  /** Indicates the input type: checkbox or radio. */\n  type: PropTypes.oneOf(INPUT_TYPES),\n  /** Function that is called when the `SelectableBox` is clicked. */\n  onClick: PropTypes.func,\n  /** Function that is called when the `SelectableBox` is focused. */\n  onFocus: PropTypes.func,\n  /** Controls display of the input (checkbox or radio button) on the `SelectableBox`. */\n  inputHidden: PropTypes.bool,\n  /** Indicates a state for the 'checkbox' `type` when `SelectableBox` is neither checked nor unchecked. */\n  isIndeterminate: PropTypes.bool,\n  /** Adds errors styles to the `SelectableBox`. */\n  isInvalid: PropTypes.bool,\n  /** A class that is appended to the base element. */\n  className: PropTypes.string,\n};\n\nSelectableBox.defaultProps = {\n  value: undefined,\n  checked: false,\n  type: 'radio',\n  onClick: () => {},\n  onFocus: () => {},\n  inputHidden: true,\n  isIndeterminate: false,\n  isInvalid: false,\n  className: undefined,\n};\n\nSelectableBox.Set = SelectableBoxSet;\nexport default SelectableBox;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useRef","useEffect","PropTypes","classNames","SelectableBoxSet","useCheckboxSetContext","useRadioSetContext","getInputType","INPUT_TYPES","SelectableBox","forwardRef","_ref","ref","type","value","checked","children","isIndeterminate","isInvalid","onClick","onFocus","inputHidden","className","showActiveBoxState","props","_objectWithoutProperties","_excluded","inputType","radioValue","checkboxValues","isChecked","includes","inputRef","input","createElement","_objectSpread","hidden","tabIndex","onChange","current","onclick","_extends","role","onKeyPress","click","propTypes","node","isRequired","oneOfType","string","number","bool","oneOf","func","defaultProps","undefined","Set"],"sources":["../../src/SelectableBox/index.jsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport SelectableBoxSet from './SelectableBoxSet';\nimport { useCheckboxSetContext } from '../Form/FormCheckboxSetContext';\nimport { useRadioSetContext } from '../Form/FormRadioSetContext';\nimport { getInputType } from './utils';\n\nconst INPUT_TYPES = [\n  'radio',\n  'checkbox',\n];\n\nconst SelectableBox = React.forwardRef(({\n  type,\n  value,\n  checked,\n  children,\n  isIndeterminate,\n  isInvalid,\n  onClick,\n  onFocus,\n  inputHidden,\n  className,\n  showActiveBoxState,\n  ...props\n}, ref) => {\n  const inputType = getInputType('SelectableBox', type);\n  const { value: radioValue } = useRadioSetContext();\n  const { value: checkboxValues = [] } = useCheckboxSetContext();\n\n  const isChecked = () => {\n    switch (type) {\n      case 'radio':\n        return radioValue === value;\n      case 'checkbox':\n        return checkboxValues.includes(value);\n      default:\n        return radioValue === value;\n    }\n  };\n\n  const inputRef = useRef(null);\n  const input = React.createElement(inputType, {\n    value,\n    checked,\n    hidden: inputHidden,\n    ref: inputRef,\n    tabIndex: -1,\n    onChange: () => {},\n    ...(type === 'checkbox' ? { ...props, isIndeterminate } : { ...props }),\n  }, null);\n\n  useEffect(() => {\n    if (onClick && inputRef.current) {\n      inputRef.current.onclick = () => onClick(inputRef.current);\n    }\n  }, [onClick]);\n\n  return (\n    <div\n      role=\"button\"\n      onKeyPress={() => inputRef.current.click()}\n      onClick={() => inputRef.current.click()}\n      onFocus={onFocus}\n      className={classNames('pgn__selectable_box', className, {\n        'pgn__selectable_box-active': (!inputHidden && !showActiveBoxState) ? false : isChecked() || checked,\n        'pgn__selectable_box-invalid': isInvalid,\n      })}\n      tabIndex={0}\n      ref={ref}\n      {...props}\n    >\n      {input}\n      {children}\n    </div>\n  );\n});\n\nSelectableBox.propTypes = {\n  /** Content of the `SelectableBox`. */\n  children: PropTypes.node.isRequired,\n  /** A value that is passed to the input tag. */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Controls whether `SelectableBox` is checked. */\n  checked: PropTypes.bool,\n  /** Indicates the input type: checkbox or radio. */\n  type: PropTypes.oneOf(INPUT_TYPES),\n  /** Function that is called when the `SelectableBox` is clicked. */\n  onClick: PropTypes.func,\n  /** Function that is called when the `SelectableBox` is focused. */\n  onFocus: PropTypes.func,\n  /** Controls display of the input (checkbox or radio button) on the `SelectableBox`. */\n  inputHidden: PropTypes.bool,\n  /** Indicates a state for the 'checkbox' `type` when `SelectableBox` is neither checked nor unchecked. */\n  isIndeterminate: PropTypes.bool,\n  /** Adds errors styles to the `SelectableBox`. */\n  isInvalid: PropTypes.bool,\n  /** A class that is appended to the base element. */\n  className: PropTypes.string,\n  /** Controls the visibility of the active state for the `SelectableBox`. */\n  showActiveBoxState: PropTypes.bool,\n};\n\nSelectableBox.defaultProps = {\n  value: undefined,\n  checked: false,\n  type: 'radio',\n  onClick: () => {},\n  onFocus: () => {},\n  inputHidden: true,\n  isIndeterminate: false,\n  isInvalid: false,\n  className: undefined,\n  showActiveBoxState: true,\n};\n\nSelectableBox.Set = SelectableBoxSet;\nexport default SelectableBox;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.9.0",
+  "version": "21.10.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Button/README.md

@@ -200,30 +200,11 @@ For link to be `disabled`, it must have href defined with some value.
 )}
 ```
 
-### With a Spinner
-
-```jsx live
-<>
-  <Button variant="primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="outline-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="outline-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="inverse-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="inverse-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-</>
-```
+## Stateful buttons
+To implement loading state using a `Button` component, the [StatefulButton](https://paragon-openedx.netlify.app/components/statefulbutton/) component
+is available for use. <br/>
+This specialized component is designed to seamlessly manage and display boot states, providing a more efficient and 
+user-friendly experience.
 
 ***
 

package/src/DataTable/README.md

@@ -436,7 +436,7 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
       }}
       isSortable
       defaultColumnValues={{ Filter: TextFilter }}
-      itemCount={7}
+      itemCount={3}
       data={[
         {
           name: 'Lil Bub',

package/src/ProductTour/Checkpoint.jsx

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

package/src/SelectableBox/README.md

@@ -6,9 +6,9 @@ components:
 - SelectableBoxSet
 categories:
 - Forms
-status: 'New'
+status: 'Stable'
 designStatus: 'Done'
-devStatus: 'In progress'
+devStatus: 'Done'
 notes: |
 ---
 
@@ -26,7 +26,7 @@ As ``Checkbox``
   const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
   const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     e.target.checked ? add(e.target.value) : remove(e.target.value);
   };
   
@@ -34,35 +34,32 @@ As ``Checkbox``
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
   
   return (
-    <div className="bg-light-200 p-3">
-      <SelectableBox.Set
-        value={checkedCheeses}
+    <SelectableBox.Set
+      className="bg-light-200 p-3"
+      value={checkedCheeses}
+      type={type}
+      onChange={handleChange}
+      name="cheeses"
+      columns={isExtraSmall ? 1 : 2}
+      ariaLabel="cheese selection"
+    >
+      <SelectableBox value="swiss" type={type} aria-label="swiss checkbox">
+        <h3>It is my first SelectableBox</h3>
+        <p>Swiss</p>
+      </SelectableBox>
+      <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
+        <h3>Cheddar</h3>
+      </SelectableBox>
+      <SelectableBox
+        value="pepperjack"
+        inputHidden={false}
         type={type}
-        onChange={handleChange}
-        name="cheeses"
-        columns={isExtraSmall ? 1 : 2}
-        ariaLabel="cheese selection"
+        isInvalid={isInvalid()}
+        aria-label="pepperjack checkbox"
       >
-        <SelectableBox value="swiss" type={type} aria-label="swiss checkbox">
-          <div>
-            <h3>It is my first SelectableBox</h3>
-            <p>Swiss</p>
-          </div>
-        </SelectableBox>
-        <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
-          Cheddar
-        </SelectableBox>
-        <SelectableBox
-          value="pepperjack"
-          inputHidden={false}
-          type={type}
-          isInvalid={isInvalid()}
-          aria-label="pepperjack checkbox"
-        >
-          <h3>Pepperjack</h3>
-        </SelectableBox>
-      </SelectableBox.Set>
-    </div>
+        <h3>Pepperjack</h3>
+      </SelectableBox>
+    </SelectableBox.Set>
   );
 }
 ```
@@ -71,31 +68,27 @@ As ``Checkbox``
 
 ```jsx live
 () => {
-  const type = 'radio';
   const [value, setValue] = useState('green');
-  const handleChange = e => setValue(e.target.value);
+  const handleChange = (e) => setValue(e.target.value);
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
 
   return (
     <SelectableBox.Set
-      type={type}
       value={value}
       onChange={handleChange}
       name="colors"
       columns={isExtraSmall ? 1 : 3}
       ariaLabel="color selection"
     >
-      <SelectableBox value="red" type={type} aria-label="red checkbox">
-        <div>
-          <h3>It is Red color</h3>
-          <p>Select me</p>
-        </div>
+      <SelectableBox value="red" aria-label="red checkbox">
+        <h3>It is Red color</h3>
+        <p>Select me</p>
       </SelectableBox>
-      <SelectableBox value="green" inputHidden={false} type={type} aria-label="green-checkbox">
+      <SelectableBox value="green" inputHidden={false} aria-label="green radio-button">
         <h3>Green</h3>
         <p>Leaves and grass</p>
       </SelectableBox>
-      <SelectableBox value="blue" inputHidden={false} type={type} aria-label="blue checkbox">
+      <SelectableBox value="blue" inputHidden={false} aria-label="blue radio-button">
         <h3>Blue</h3>
         <p>The sky</p>
       </SelectableBox>
@@ -103,6 +96,7 @@ As ``Checkbox``
   );
 }
 ```
+
 ## As Checkbox
 As ``Checkbox`` with ``isIndeterminate``
 
@@ -117,7 +111,7 @@ As ``Checkbox`` with ``isIndeterminate``
   const isIndeterminate = someChecked && !allChecked;
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     e.target.checked ? add(e.target.value) : remove(e.target.value);
   };
 
@@ -127,18 +121,17 @@ As ``Checkbox`` with ``isIndeterminate``
 
   return (
     <>
-      <div className="mb-3">
-        <SelectableBox
-          checked={allChecked}
-          isIndeterminate={isIndeterminate}
-          onClick={handleCheckAllChange}
-          inputHidden={false}
-          type={type}
-          aria-label="all options checkbox"
-        >
-          All the cheese
-        </SelectableBox>
-      </div>
+      <SelectableBox
+        className="mb-3"
+        checked={allChecked}
+        isIndeterminate={isIndeterminate}
+        onClick={handleCheckAllChange}
+        inputHidden={false}
+        type={type}
+        aria-label="all options checkbox"
+      >
+        All the cheese
+      </SelectableBox>
       <SelectableBox.Set
         value={checkedCheeses}
         type={type}
@@ -148,13 +141,11 @@ As ``Checkbox`` with ``isIndeterminate``
         ariaLabel="cheese selection"
       >
         <SelectableBox value="swiss" type={type} aria-label="swiss checkbox">
-          <div>
-            <h3>It is my first SelectableBox</h3>
-            <p>Swiss</p>
-          </div>
+          <h3>It is my first SelectableBox</h3>
+          <p>Swiss</p>
         </SelectableBox>
         <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
-          Cheddar
+          <h3>Cheddar</h3>
         </SelectableBox>
         <SelectableBox value="pepperjack" inputHidden={false} type={type} aria-label="pepperjack checkbox">
           <h3>Pepperjack</h3>
@@ -173,16 +164,16 @@ As ``Checkbox`` with ``ariaLabelledby``
   const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
   const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     e.target.checked ? add(e.target.value) : remove(e.target.value);
   };
   
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
   
   return (
-    <div className="bg-light-200 p-3">
+    <Stack className="bg-light-200 p-3">
       <h3 id="cheese selection" className="mb-4">
-        Select your favorite cheese
+        Select your favorite cheese:
       </h3>
       <SelectableBox.Set
         value={checkedCheeses}
@@ -193,22 +184,63 @@ As ``Checkbox`` with ``ariaLabelledby``
         ariaLabelledby="cheese selection"
       >
         <SelectableBox value="swiss" inputHidden={false} type={type} aria-label="swiss checkbox">
-          <h3>
-            Swiss
-          </h3>
+          <h3>Swiss</h3>
         </SelectableBox>
         <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
-          <h3>
-            Cheddar
-          </h3>
+          <h3>Cheddar</h3>
         </SelectableBox>
         <SelectableBox value="pepperjack" inputHidden={false} type={type} aria-label="pepperjack checkbox">
-          <h3>
-            Pepperjack
-          </h3>
+          <h3>Pepperjack</h3>
         </SelectableBox>
       </SelectableBox.Set>
-    </div>
+    </Stack>
+  );
+}
+```
+
+## Without active outline
+The `showActiveBoxState` property only affects `SelectableBox` that have `inputHidden` set to `false`.
+If a component has no input, the border is always rendered in an active state.
+
+```jsx live
+() => {
+  const [value, setValue] = useState('apples');
+  const handleChange = (e) => setValue(e.target.value);
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <SelectableBox.Set
+      value={value}
+      onChange={handleChange}
+      name="fruits"
+      columns={isExtraSmall ? 1 : 3}
+      ariaLabel="fruits selection"
+    >
+      <SelectableBox
+        value="apples"
+        inputHidden={false}
+        showActiveBoxState={false}
+        aria-label="apple radio-button"
+      >
+        <h3>Apples</h3>
+      </SelectableBox>
+      <SelectableBox
+        value="oranges"
+        inputHidden={false}
+        showActiveBoxState={false}
+        aria-label="orange radio-button"
+      >
+        <h3>Oranges</h3>
+      </SelectableBox>
+      <SelectableBox
+        value="bananas"
+        inputHidden={false}
+        showActiveBoxState={false}
+        aria-label="banana radio-button"
+      >
+        <h3>Bananas</h3>
+      </SelectableBox>
+    </SelectableBox.Set>
   );
 }
 ```

package/src/SelectableBox/index.jsx

@@ -22,6 +22,7 @@ const SelectableBox = React.forwardRef(({
   onFocus,
   inputHidden,
   className,
+  showActiveBoxState,
   ...props
 }, ref) => {
   const inputType = getInputType('SelectableBox', type);
@@ -63,7 +64,7 @@ const SelectableBox = React.forwardRef(({
       onClick={() => inputRef.current.click()}
       onFocus={onFocus}
       className={classNames('pgn__selectable_box', className, {
-        'pgn__selectable_box-active': isChecked() || checked,
+        'pgn__selectable_box-active': (!inputHidden && !showActiveBoxState) ? false : isChecked() || checked,
         'pgn__selectable_box-invalid': isInvalid,
       })}
       tabIndex={0}
@@ -97,6 +98,8 @@ SelectableBox.propTypes = {
   isInvalid: PropTypes.bool,
   /** A class that is appended to the base element. */
   className: PropTypes.string,
+  /** Controls the visibility of the active state for the `SelectableBox`. */
+  showActiveBoxState: PropTypes.bool,
 };
 
 SelectableBox.defaultProps = {
@@ -109,6 +112,7 @@ SelectableBox.defaultProps = {
   isIndeterminate: false,
   isInvalid: false,
   className: undefined,
+  showActiveBoxState: true,
 };
 
 SelectableBox.Set = SelectableBoxSet;

package/src/SelectableBox/tests/SelectableBox.test.jsx

@@ -100,6 +100,13 @@ describe('<SelectableBox />', () => {
       rerender(<SelectableCheckbox inputHidden={false} />);
       expect(inputElement.getAttribute('hidden')).toBeNull();
     });
+    it('renders with active state and updates to inactive when showActiveBoxState is false', async () => {
+      const { rerender } = render(<SelectableCheckbox inputHidden={false} checked />);
+      const selectableBox = screen.getByRole('button');
+      expect(selectableBox.classList.contains('pgn__selectable_box-active')).toEqual(true);
+      rerender(<SelectableCheckbox inputHidden={false} showActiveBoxState={false} checked />);
+      expect(selectableBox.classList.contains('pgn__selectable_box-active')).toEqual(false);
+    });
   });
   describe('correct interactions', () => {
     it('correct checkbox state change when checked is changed', () => {

package/src/Tabs/README.md

@@ -226,6 +226,60 @@ notes: |
 </Tabs>
 ```
 
+## Conditional rendering
+
+```jsx live
+() => {
+  const librariesEnabled = true;
+  const visibleTabs = useMemo(() => {
+    const tabs = [];
+        
+    tabs.push(
+      <Tab
+        key="courses"
+        eventKey="courses"
+        title="Courses"
+      >
+        Hello I am the courses panel.
+      </Tab>
+    );
+
+    tabs.push(
+      <Tab
+        key="programs"
+        eventKey="programs"
+        title="Programs"
+      >
+        Hello I am the programs panel.
+      </Tab>
+    );
+    
+    if (librariesEnabled) {
+      tabs.push(
+        <Tab
+          key="libraries"
+          eventKey="libraries"
+          title="Libraries"
+        >
+          Hello I am the libraries panel.
+        </Tab>
+      );   
+    }
+
+    return tabs;
+  }, [librariesEnabled]);
+
+  return (
+    <Tabs
+      id="tabs"
+      defaultActiveKey="courses"
+    >
+      {visibleTabs}
+    </Tabs>
+  );
+}
+```
+
 ***
 
 ## Tabs.Deprecated