@openedx/paragon 23.0.0-alpha.2 → 23.0.0-alpha.4

package/dist/IconButton/index.d.ts

@@ -0,0 +1,342 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { type Placement } from 'react-bootstrap/Overlay';
+interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+    iconAs?: React.ComponentType<any>;
+    /** Additional CSS class[es] to apply to this button */
+    className?: string;
+    /** Alt text for your icon. For best practice, avoid using alt text to describe
+     * the image in the `IconButton`. Instead, we recommend describing the function
+     * of the button. */
+    alt: string;
+    /** Changes icon styles for dark background */
+    invertColors?: boolean;
+    /** An icon component to render. Example import of a Paragon icon component:
+     * `import { Check } from '@openedx/paragon/icons';`
+     * */
+    src?: React.ComponentType;
+    /** Extra class names that will be added to the icon */
+    iconClassNames?: string;
+    /** Click handler for the button */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
+    isActive?: boolean;
+    /** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */
+    icon?: {
+        prefix?: string;
+        iconName?: string;
+        icon?: any[];
+    };
+    /** Type of button (uses Bootstrap options) */
+    variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';
+    /** size of button to render */
+    size?: 'sm' | 'md' | 'inline';
+    /** no children */
+    children?: never;
+}
+interface PropsWithTooltip extends Props {
+    /** choose from https://popper.js.org/docs/v2/constructors/#options */
+    tooltipPlacement: Placement;
+    /** any content to pass to tooltip content area */
+    tooltipContent: React.ReactNode;
+}
+/**
+ * An icon button wrapped in overlaytrigger to display a tooltip.
+ */
+declare function IconButtonWithTooltip({ tooltipPlacement, tooltipContent, ...props }: PropsWithTooltip): import("react/jsx-runtime").JSX.Element;
+declare namespace IconButtonWithTooltip {
+    var defaultProps: {
+        tooltipPlacement: string;
+        iconAs?: React.ComponentType<any> | undefined;
+        className?: string | undefined;
+        alt?: string | undefined;
+        invertColors?: boolean | undefined;
+        src?: React.ComponentType<{}> | undefined;
+        iconClassNames?: string | undefined;
+        onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        isActive?: boolean | undefined;
+        icon?: {
+            prefix?: string | undefined;
+            iconName?: string | undefined;
+            icon?: any[] | undefined;
+        } | undefined;
+        variant?: "primary" | "success" | "warning" | "secondary" | "danger" | "dark" | "light" | "black" | "brand" | undefined;
+        size?: "sm" | "md" | "inline" | undefined;
+        children?: undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoFocus?: boolean | undefined;
+        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | 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;
+        tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: React.AriaRole | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCapitalize?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | 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-busy"?: (boolean | "true" | "false") | undefined;
+        "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | 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-details"?: string | undefined;
+        "aria-disabled"?: (boolean | "true" | "false") | undefined;
+        "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: (boolean | "true" | "false") | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+        "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+        "aria-hidden"?: (boolean | "true" | "false") | undefined;
+        "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: (boolean | "true" | "false") | undefined;
+        "aria-multiline"?: (boolean | "true" | "false") | undefined;
+        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+        "aria-readonly"?: (boolean | "true" | "false") | undefined;
+        "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: (boolean | "true" | "false") | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: (boolean | "true" | "false") | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        dangerouslySetInnerHTML?: {
+            __html: string | TrustedHTML;
+        } | undefined;
+        onCopy?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCopyCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCut?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCutCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onPaste?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onPasteCapture?: React.ClipboardEventHandler<HTMLButtonElement> | undefined;
+        onCompositionEnd?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionEndCapture?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionStart?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionStartCapture?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionUpdate?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLButtonElement> | undefined;
+        onFocus?: React.FocusEventHandler<HTMLButtonElement> | undefined;
+        onFocusCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
+        onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
+        onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
+        onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onReset?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onResetCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onSubmit?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onSubmitCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onInvalid?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onInvalidCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onErrorCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyDownCapture?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyPressCapture?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onKeyUpCapture?: React.KeyboardEventHandler<HTMLButtonElement> | undefined;
+        onAbort?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onAbortCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlay?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlayCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlayThrough?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onDurationChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onDurationChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEmptied?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEmptiedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEncrypted?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEncryptedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEnded?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onEndedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedData?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedDataCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedMetadata?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadStart?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onLoadStartCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPause?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPauseCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlay?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlayCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlaying?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onPlayingCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onProgress?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onProgressCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onRateChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeeked?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeeking?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSeekingCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onStalled?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onStalledCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSuspend?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSuspendCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onTimeUpdate?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onTimeUpdateCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onVolumeChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onVolumeChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onWaiting?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onWaitingCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onAuxClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onAuxClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onContextMenu?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onContextMenuCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onDoubleClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onDoubleClickCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onDrag?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEnd?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEndCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEnter?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragEnterCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragExit?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragExitCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragLeave?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragLeaveCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragOver?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragOverCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragStart?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDragStartCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDrop?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onDropCapture?: React.DragEventHandler<HTMLButtonElement> | undefined;
+        onMouseDown?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseDownCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseEnter?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseLeave?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseMove?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseMoveCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOut?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOutCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOver?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseOverCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseUp?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onMouseUpCapture?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+        onSelect?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSelectCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onTouchCancel?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchCancelCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchEnd?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchEndCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchMove?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchMoveCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchStart?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onTouchStartCapture?: React.TouchEventHandler<HTMLButtonElement> | undefined;
+        onPointerDown?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerDownCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerMove?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerMoveCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerUp?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onPointerUpCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        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;
+        onPointerOutCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onGotPointerCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onLostPointerCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLButtonElement> | undefined;
+        onScroll?: React.UIEventHandler<HTMLButtonElement> | undefined;
+        onScrollCapture?: React.UIEventHandler<HTMLButtonElement> | undefined;
+        onWheel?: React.WheelEventHandler<HTMLButtonElement> | undefined;
+        onWheelCapture?: React.WheelEventHandler<HTMLButtonElement> | undefined;
+        onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationStartCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationEndCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationIteration?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
+        onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
+        ref?: React.Ref<HTMLButtonElement> | undefined;
+        key?: React.Key | null | undefined;
+    };
+    var propTypes: {
+        /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */
+        tooltipPlacement: PropTypes.Requireable<string>;
+        /** any valid JSX or text to be rendered as tooltip contents */
+        tooltipContent: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /** Type of button (uses Bootstrap options) */
+        variant: PropTypes.Requireable<string>;
+        /** Changes icon styles for dark background */
+        invertColors: PropTypes.Requireable<boolean>;
+    };
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>> & {
+    IconButtonWithTooltip: typeof IconButtonWithTooltip;
+};
+export default _default;
+export { IconButtonWithTooltip };

package/dist/IconButton/index.js

@@ -1,6 +1,8 @@
 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"],
-  _excluded2 = ["tooltipPlacement", "tooltipContent", "variant", "invertColors"];
+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 _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 _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 + ""; }
@@ -25,6 +27,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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, "-") : '';
@@ -37,7 +40,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref
   }, attrs), /*#__PURE__*/React.createElement("span", {
     className: "btn-icon__icon-container"
-  }, /*#__PURE__*/React.createElement(IconComponent, {
+  }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
     className: classNames('btn-icon__icon', iconClassNames),
     icon: icon,
     src: src
@@ -45,7 +48,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 IconButton.defaultProps = {
   iconAs: Icon,
-  src: null,
+  src: undefined,
   icon: undefined,
   iconClassNames: undefined,
   className: undefined,
@@ -53,7 +56,8 @@ IconButton.defaultProps = {
   variant: 'primary',
   size: 'md',
   onClick: function onClick() {},
-  isActive: false
+  isActive: false,
+  children: undefined
 };
 IconButton.propTypes = {
   /** A custom class name. */
@@ -61,9 +65,9 @@ IconButton.propTypes = {
   /** Component that renders the icon, currently defaults to `Icon` */
   iconAs: PropTypes.elementType,
   /** An icon component to render. Example import of a Paragon icon component:
-   * `import { Check } from '@openedx/paragon/dist/icon';`
+   * `import { Check } from '@openedx/paragon/icons';`
    * */
-  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
+  src: PropTypes.elementType,
   /** Alt text for your icon. For best practice, avoid using alt text to describe
    * the image in the `IconButton`. Instead, we recommend describing the function
    * of the button. */
@@ -88,37 +92,25 @@ IconButton.propTypes = {
   /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
   isActive: PropTypes.bool
 };
-
 /**
- *
- * @param { object } args Arguments
- * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options
- * @param { React.Component } args.tooltipContent any content to pass to tooltip content area
- * @returns { IconButton } a button wrapped in overlaytrigger
+ * An icon button wrapped in overlaytrigger to display a tooltip.
  */
 function IconButtonWithTooltip(_ref2) {
   var tooltipPlacement = _ref2.tooltipPlacement,
     tooltipContent = _ref2.tooltipContent,
-    variant = _ref2.variant,
-    invertColors = _ref2.invertColors,
     props = _objectWithoutProperties(_ref2, _excluded2);
-  var invert = invertColors ? 'inverse-' : '';
+  var invert = props.invertColors ? 'inverse-' : '';
   return /*#__PURE__*/React.createElement(OverlayTrigger, {
     placement: tooltipPlacement,
     overlay: /*#__PURE__*/React.createElement(Tooltip, {
       id: "iconbutton-tooltip-".concat(tooltipPlacement),
-      variant: invert ? 'light' : ''
+      variant: invert ? 'light' : undefined
     }, tooltipContent)
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    variant: variant,
-    invertColors: invertColors
-  }, props)));
+  }, /*#__PURE__*/React.createElement(IconButton, props));
 }
-IconButtonWithTooltip.defaultProps = {
-  tooltipPlacement: 'top',
-  variant: 'primary',
-  invertColors: false
-};
+IconButtonWithTooltip.defaultProps = _objectSpread(_objectSpread({}, 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","Icon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","concat","IconComponent","createElement","_extends","_defineProperty","type","defaultProps","undefined","propTypes","string","elementType","oneOfType","element","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","node"],"sources":["../../src/IconButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport Icon from '../Icon';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\n\nconst IconButton = React.forwardRef(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\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          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: Icon,\n  src: null,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\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,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/dist/icon';`\n   * */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\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  }),\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\n/**\n *\n * @param { object } args Arguments\n * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options\n * @param { React.Component } args.tooltipContent any content to pass to tooltip content area\n * @returns { IconButton } a button wrapped in overlaytrigger\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, variant, invertColors, ...props\n}) {\n  const invert = invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : ''}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton variant={variant} invertColors={invertColors} {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  tooltipPlacement: 'top',\n  variant: 'primary',\n  invertColors: false,\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\nIconButton.IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton;\nexport { IconButtonWithTooltip };\n"],"mappings":";;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,IAAI,MAAM,SAAS;AAC1B,SAASC,cAAc,QAAQ,YAAY;AAC3C,OAAOC,OAAO,MAAM,YAAY;AAEhC,IAAMC,UAAU,gBAAGN,KAAK,CAACO,UAAU,CAAC,UAAAC,IAAA,EAajCC,GAAG,EAAK;EAAA,IAZTC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,GAAG,GAAAH,IAAA,CAAHG,GAAG;IACHC,YAAY,GAAAJ,IAAA,CAAZI,YAAY;IACZC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IACJC,GAAG,GAAAN,IAAA,CAAHM,GAAG;IACHC,cAAc,GAAAP,IAAA,CAAdO,cAAc;IACdC,OAAO,GAAAR,IAAA,CAAPQ,OAAO;IACPC,IAAI,GAAAT,IAAA,CAAJS,IAAI;IACJC,OAAO,GAAAV,IAAA,CAAPU,OAAO;IACPC,MAAM,GAAAX,IAAA,CAANW,MAAM;IACNC,QAAQ,GAAAZ,IAAA,CAARY,QAAQ;IACLC,KAAK,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA;EAER,IAAMC,MAAM,GAAGZ,YAAY,GAAG,UAAU,GAAG,EAAE;EAC7C,IAAMa,WAAW,GAAGL,QAAQ,MAAAM,MAAA,CAAMR,OAAO,SAAM,EAAE;EACjD,IAAMS,aAAa,GAAGR,MAAM;EAE5B,oBACEnB,KAAA,CAAA4B,aAAA,WAAAC,QAAA;IACE,cAAYlB,GAAI;IAChBD,SAAS,EAAER,UAAU,CACnB,UAAU,cAAAwB,MAAA,CACEF,MAAM,EAAAE,MAAA,CAAGR,OAAO,eAAAQ,MAAA,CAChBT,IAAI,GAAAa,eAAA,iBAAAJ,MAAA,CAEDF,MAAM,EAAAE,MAAA,CAAGD,WAAW,aAAWL,QAAQ,GAEtDV,SACF,CAAE;IACFM,OAAO,EAAEA,OAAQ;IACjBe,IAAI,EAAC,QAAQ;IACbtB,GAAG,EAAEA;EAAI,GACLY,KAAK,gBAETrB,KAAA,CAAA4B,aAAA;IAAMlB,SAAS,EAAC;EAA0B,gBACxCV,KAAA,CAAA4B,aAAA,CAACD,aAAa;IACZjB,SAAS,EAAER,UAAU,CAAC,gBAAgB,EAAEa,cAAc,CAAE;IACxDF,IAAI,EAAEA,IAAK;IACXC,GAAG,EAAEA;EAAI,CACV,CACG,CACA,CAAC;AAEb,CAAC,CAAC;AAEFR,UAAU,CAAC0B,YAAY,GAAG;EACxBb,MAAM,EAAEhB,IAAI;EACZW,GAAG,EAAE,IAAI;EACTD,IAAI,EAAEoB,SAAS;EACflB,cAAc,EAAEkB,SAAS;EACzBvB,SAAS,EAAEuB,SAAS;EACpBrB,YAAY,EAAE,KAAK;EACnBM,OAAO,EAAE,SAAS;EAClBD,IAAI,EAAE,IAAI;EACVD,OAAO,EAAE,SAAAA,QAAA,EAAM,CAAC,CAAC;EACjBI,QAAQ,EAAE;AACZ,CAAC;AAEDd,UAAU,CAAC4B,SAAS,GAAG;EACrB;EACAxB,SAAS,EAAET,SAAS,CAACkC,MAAM;EAC3B;EACAhB,MAAM,EAAElB,SAAS,CAACmC,WAAW;EAC7B;AACF;AACA;EACEtB,GAAG,EAAEb,SAAS,CAACoC,SAAS,CAAC,CAACpC,SAAS,CAACqC,OAAO,EAAErC,SAAS,CAACmC,WAAW,CAAC,CAAC;EACpE;AACF;AACA;EACEzB,GAAG,EAAEV,SAAS,CAACkC,MAAM,CAACI,UAAU;EAChC;EACA3B,YAAY,EAAEX,SAAS,CAACuC,IAAI;EAC5B;EACA3B,IAAI,EAAEZ,SAAS,CAACwC,KAAK,CAAC;IACpBC,MAAM,EAAEzC,SAAS,CAACkC,MAAM;IACxBQ,QAAQ,EAAE1C,SAAS,CAACkC,MAAM;IAC1B;IACAtB,IAAI,EAAEZ,SAAS,CAAC2C;EAClB,CAAC,CAAC;EACF;EACA7B,cAAc,EAAEd,SAAS,CAACkC,MAAM;EAChC;EACAnB,OAAO,EAAEf,SAAS,CAAC4C,IAAI;EACvB;EACA3B,OAAO,EAAEjB,SAAS,CAAC6C,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;EACrH;EACA7B,IAAI,EAAEhB,SAAS,CAAC6C,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;EAC7C;EACA1B,QAAQ,EAAEnB,SAAS,CAACuC;AACtB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASO,qBAAqBA,CAAAC,KAAA,EAE3B;EAAA,IADDC,gBAAgB,GAAAD,KAAA,CAAhBC,gBAAgB;IAAEC,cAAc,GAAAF,KAAA,CAAdE,cAAc;IAAEhC,OAAO,GAAA8B,KAAA,CAAP9B,OAAO;IAAEN,YAAY,GAAAoC,KAAA,CAAZpC,YAAY;IAAKuC,KAAK,GAAA7B,wBAAA,CAAA0B,KAAA,EAAAI,UAAA;EAEjE,IAAM5B,MAAM,GAAGZ,YAAY,GAAG,UAAU,GAAG,EAAE;EAC7C,oBACEZ,KAAA,CAAA4B,aAAA,CAACxB,cAAc;IACbiD,SAAS,EAAEJ,gBAAiB;IAC5BK,OAAO,eACLtD,KAAA,CAAA4B,aAAA,CAACvB,OAAO;MACNkD,EAAE,wBAAA7B,MAAA,CAAwBuB,gBAAgB,CAAG;MAC7C/B,OAAO,EAAEM,MAAM,GAAG,OAAO,GAAG;IAAG,GAE9B0B,cACM;EACT,gBAEFlD,KAAA,CAAA4B,aAAA,CAACtB,UAAU,EAAAuB,QAAA;IAACX,OAAO,EAAEA,OAAQ;IAACN,YAAY,EAAEA;EAAa,GAAKuC,KAAK,CAAG,CACxD,CAAC;AAErB;AAEAJ,qBAAqB,CAACf,YAAY,GAAG;EACnCiB,gBAAgB,EAAE,KAAK;EACvB/B,OAAO,EAAE,SAAS;EAClBN,YAAY,EAAE;AAChB,CAAC;AAEDmC,qBAAqB,CAACb,SAAS,GAAG;EAChC;EACAe,gBAAgB,EAAEhD,SAAS,CAACkC,MAAM;EAClC;EACAe,cAAc,EAAEjD,SAAS,CAACuD,IAAI,CAACjB,UAAU;EACzC;EACArB,OAAO,EAAEjB,SAAS,CAAC6C,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;EACrH;EACAlC,YAAY,EAAEX,SAAS,CAACuC;AAC1B,CAAC;AAEDlC,UAAU,CAACyC,qBAAqB,GAAGA,qBAAqB;AAExD,eAAezC,UAAU;AACzB,SAASyC,qBAAqB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Icon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","children","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","concat","IconComponent","createElement","_extends","_defineProperty","type","defaultProps","undefined","propTypes","string","elementType","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","_objectSpread","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 Icon from '../Icon';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\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":[]}