instead.'\n );\n }\n\n if (\n this.lastDeltaChangeSet &&\n props.value === this.lastDeltaChangeSet\n ) throw new Error(\n 'You are passing the `delta` object from the `onChange` event back ' +\n 'as `value`. You most probably want `editor.getContents()` instead. ' +\n 'See: https://github.com/zenoamaro/react-quill#using-deltas'\n );\n }\n\n shouldComponentUpdate(nextProps: ReactQuillProps, nextState: ReactQuillState) {\n this.validateProps(nextProps);\n\n // If the editor hasn't been instantiated yet, or the component has been\n // regenerated, we already know we should update.\n if (!this.editor || this.state.generation !== nextState.generation) {\n return true;\n }\n\n // Handle value changes in-place\n if ('value' in nextProps) {\n const prevContents = this.getEditorContents();\n const nextContents = nextProps.value ?? '';\n\n // NOTE: Seeing that Quill is missing a way to prevent edits, we have to\n // settle for a hybrid between controlled and uncontrolled mode. We\n // can't prevent the change, but we'll still override content\n // whenever `value` differs from current state.\n // NOTE: Comparing an HTML string and a Quill Delta will always trigger a\n // change, regardless of whether they represent the same document.\n if (!this.isEqualValue(nextContents, prevContents)) {\n this.setEditorContents(this.editor, nextContents);\n }\n }\n\n // Handle read-only changes in-place\n if (nextProps.readOnly !== this.props.readOnly) {\n this.setEditorReadOnly(this.editor, nextProps.readOnly!);\n }\n\n // Clean and Dirty props require a render\n return [...this.cleanProps, ...this.dirtyProps].some((prop) => {\n return !isEqual(nextProps[prop], this.props[prop]);\n });\n }\n\n shouldComponentRegenerate(nextProps: ReactQuillProps): boolean {\n // Whenever a `dirtyProp` changes, the editor needs reinstantiation.\n return this.dirtyProps.some((prop) => {\n return !isEqual(nextProps[prop], this.props[prop]);\n });\n }\n\n componentDidMount() {\n this.instantiateEditor();\n this.setEditorContents(this.editor!, this.getEditorContents());\n }\n\n componentWillUnmount() {\n this.destroyEditor();\n }\n\n componentDidUpdate(prevProps: ReactQuillProps, prevState: ReactQuillState) {\n // If we're changing one of the `dirtyProps`, the entire Quill Editor needs\n // to be re-instantiated. Regenerating the editor will cause the whole tree,\n // including the container, to be cleaned up and re-rendered from scratch.\n // Store the contents so they can be restored later.\n if (this.editor && this.shouldComponentRegenerate(prevProps)) {\n const delta = this.editor.getContents();\n const selection = this.editor.getSelection();\n this.regenerationSnapshot = {delta, selection};\n this.setState({generation: this.state.generation + 1});\n this.destroyEditor();\n }\n\n // The component has been regenerated, so it must be re-instantiated, and\n // its content must be restored to the previous values from the snapshot.\n if (this.state.generation !== prevState.generation) {\n const {delta, selection} = this.regenerationSnapshot!;\n delete this.regenerationSnapshot;\n this.instantiateEditor();\n const editor = this.editor!;\n editor.setContents(delta);\n postpone(() => this.setEditorSelection(editor, selection));\n }\n }\n\n instantiateEditor(): void {\n if (this.editor) {\n this.hookEditor(this.editor);\n } else {\n this.editor = this.createEditor(\n this.getEditingArea(),\n this.getEditorConfig()\n );\n }\n }\n\n destroyEditor(): void {\n if (!this.editor) return;\n this.unhookEditor(this.editor);\n }\n\n /*\n We consider the component to be controlled if `value` is being sent in props.\n */\n isControlled(): boolean {\n return 'value' in this.props;\n }\n\n getEditorConfig(): QuillOptions {\n return {\n bounds: this.props.bounds,\n formats: this.props.formats,\n modules: this.props.modules,\n placeholder: this.props.placeholder,\n readOnly: this.props.readOnly,\n scrollingContainer: this.props.scrollingContainer,\n tabIndex: this.props.tabIndex,\n theme: this.props.theme,\n };\n }\n\n getEditor(): Quill {\n if (!this.editor) throw new Error('Accessing non-instantiated editor');\n return this.editor;\n }\n\n /**\n Creates an editor on the given element. The editor will be passed the\n configuration, have its events bound,\n */\n createEditor(element: Element, config: QuillOptions) {\n const editor = new Quill(element, config);\n if (config.tabIndex != null) {\n this.setEditorTabIndex(editor, config.tabIndex);\n }\n this.hookEditor(editor);\n return editor;\n }\n\n hookEditor(editor: Quill) {\n // Expose the editor on change events via a weaker, unprivileged proxy\n // object that does not allow accidentally modifying editor state.\n this.unprivilegedEditor = this.makeUnprivilegedEditor(editor);\n // Using `editor-change` allows picking up silent updates, like selection\n // changes on typing.\n editor.on('editor-change', this.onEditorChange);\n }\n\n unhookEditor(editor: Quill) {\n editor.off('editor-change', this.onEditorChange);\n }\n\n getEditorContents(): Value {\n return this.value;\n }\n\n getEditorSelection(): Range {\n return this.selection;\n }\n\n /*\n True if the value is a Delta instance or a Delta look-alike.\n */\n isDelta(value: any): boolean {\n return value && value.ops;\n }\n\n /*\n Special comparison function that knows how to compare Deltas.\n */\n isEqualValue(value: any, nextValue: any): boolean {\n if (this.isDelta(value) && this.isDelta(nextValue)) {\n return isEqual(value.ops, nextValue.ops);\n } else {\n return isEqual(value, nextValue);\n }\n }\n\n /*\n Replace the contents of the editor, but keep the previous selection hanging\n around so that the cursor won't move.\n */\n setEditorContents(editor: Quill, value: Value) {\n this.value = value;\n const sel = this.getEditorSelection();\n if (typeof value === 'string') {\n editor.setContents(editor.clipboard.convert(value));\n } else {\n editor.setContents(value);\n }\n postpone(() => this.setEditorSelection(editor, sel));\n }\n\n setEditorSelection(editor: Quill, range: Range) {\n this.selection = range;\n if (range) {\n // Validate bounds before applying.\n const length = editor.getLength();\n range.index = Math.max(0, Math.min(range.index, length-1));\n range.length = Math.max(0, Math.min(range.length, (length-1) - range.index));\n editor.setSelection(range);\n }\n }\n\n setEditorTabIndex(editor: Quill, tabIndex: number) {\n if (editor?.scroll?.domNode) {\n (editor.scroll.domNode as HTMLElement).tabIndex = tabIndex;\n }\n }\n\n setEditorReadOnly(editor: Quill, value: boolean) {\n if (value) {\n editor.disable();\n } else {\n editor.enable();\n }\n }\n\n /*\n Returns a weaker, unprivileged proxy object that only exposes read-only\n accessors found on the editor instance, without any state-modifying methods.\n */\n makeUnprivilegedEditor(editor: Quill) {\n const e = editor;\n return {\n getHTML: () => e.root.innerHTML,\n getLength: e.getLength.bind(e),\n getText: e.getText.bind(e),\n getContents: e.getContents.bind(e),\n getSelection: e.getSelection.bind(e),\n getBounds: e.getBounds.bind(e),\n };\n }\n\n getEditingArea(): Element {\n if (!this.editingArea) {\n throw new Error('Instantiating on missing editing area');\n }\n const element = ReactDOM.findDOMNode(this.editingArea);\n if (!element) {\n throw new Error('Cannot find element for editing area');\n }\n if (element.nodeType === 3) {\n throw new Error('Editing area cannot be a text node');\n }\n return element as Element;\n }\n\n /*\n Renders an editor area, unless it has been provided one to clone.\n */\n renderEditingArea(): JSX.Element {\n const {children, preserveWhitespace} = this.props;\n const {generation} = this.state;\n\n const properties = {\n key: generation,\n ref: (instance: React.ReactInstance | null) => {\n this.editingArea = instance\n },\n };\n\n if (React.Children.count(children)) {\n return React.cloneElement(\n React.Children.only(children)!,\n properties\n );\n }\n\n return preserveWhitespace ?\n
\n );\n }\n\n onEditorChange = (\n eventName: 'text-change' | 'selection-change',\n rangeOrDelta: Range | DeltaStatic,\n oldRangeOrDelta: Range | DeltaStatic,\n source: Sources,\n ) => {\n if (eventName === 'text-change') {\n this.onEditorChangeText?.(\n this.editor!.root.innerHTML,\n rangeOrDelta as DeltaStatic,\n source,\n this.unprivilegedEditor!\n );\n } else if (eventName === 'selection-change') {\n this.onEditorChangeSelection?.(\n rangeOrDelta as RangeStatic,\n source,\n this.unprivilegedEditor!\n );\n }\n };\n\n onEditorChangeText(\n value: string,\n delta: DeltaStatic,\n source: Sources,\n editor: UnprivilegedEditor,\n ): void {\n if (!this.editor) return;\n\n // We keep storing the same type of value as what the user gives us,\n // so that value comparisons will be more stable and predictable.\n const nextContents = this.isDelta(this.value)\n ? editor.getContents()\n : editor.getHTML();\n\n if (nextContents !== this.getEditorContents()) {\n // Taint this `delta` object, so we can recognize whether the user\n // is trying to send it back as `value`, preventing a likely loop.\n this.lastDeltaChangeSet = delta;\n\n this.value = nextContents;\n this.props.onChange?.(value, delta, source, editor);\n }\n }\n\n onEditorChangeSelection(\n nextSelection: RangeStatic,\n source: Sources,\n editor: UnprivilegedEditor,\n ): void {\n if (!this.editor) return;\n const currentSelection = this.getEditorSelection();\n const hasGainedFocus = !currentSelection && nextSelection;\n const hasLostFocus = currentSelection && !nextSelection;\n\n if (isEqual(nextSelection, currentSelection)) return;\n\n this.selection = nextSelection;\n this.props.onChangeSelection?.(nextSelection, source, editor);\n\n if (hasGainedFocus) {\n this.props.onFocus?.(nextSelection, source, editor);\n } else if (hasLostFocus) {\n this.props.onBlur?.(currentSelection, source, editor);\n }\n }\n\n focus(): void {\n if (!this.editor) return;\n this.editor.focus();\n }\n\n blur(): void {\n if (!this.editor) return;\n this.selection = null;\n this.editor.blur();\n }\n}\n\n/*\nSmall helper to execute a function in the next micro-tick.\n*/\nfunction postpone(fn: (value: void) => void) {\n Promise.resolve().then(fn);\n}\n\n// Compatibility Export to avoid `require(...).default` on CommonJS.\n// See: https://github.com/Microsoft/TypeScript/issues/2719\nexport = ReactQuill;\n","'use strict';\n\nfunction _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }\n\nvar React = require('react');\nvar React__default = _interopDefault(React);\n\nfunction _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n subClass.__proto__ = superClass;\n}\n\nvar canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);\nfunction withSideEffect(reducePropsToState, handleStateChangeOnClient, mapStateOnServer) {\n if (typeof reducePropsToState !== 'function') {\n throw new Error('Expected reducePropsToState to be a function.');\n }\n\n if (typeof handleStateChangeOnClient !== 'function') {\n throw new Error('Expected handleStateChangeOnClient to be a function.');\n }\n\n if (typeof mapStateOnServer !== 'undefined' && typeof mapStateOnServer !== 'function') {\n throw new Error('Expected mapStateOnServer to either be undefined or a function.');\n }\n\n function getDisplayName(WrappedComponent) {\n return WrappedComponent.displayName || WrappedComponent.name || 'Component';\n }\n\n return function wrap(WrappedComponent) {\n if (typeof WrappedComponent !== 'function') {\n throw new Error('Expected WrappedComponent to be a React component.');\n }\n\n var mountedInstances = [];\n var state;\n\n function emitChange() {\n state = reducePropsToState(mountedInstances.map(function (instance) {\n return instance.props;\n }));\n\n if (SideEffect.canUseDOM) {\n handleStateChangeOnClient(state);\n } else if (mapStateOnServer) {\n state = mapStateOnServer(state);\n }\n }\n\n var SideEffect =\n /*#__PURE__*/\n function (_PureComponent) {\n _inheritsLoose(SideEffect, _PureComponent);\n\n function SideEffect() {\n return _PureComponent.apply(this, arguments) || this;\n }\n\n // Try to use displayName of wrapped component\n // Expose canUseDOM so tests can monkeypatch it\n SideEffect.peek = function peek() {\n return state;\n };\n\n SideEffect.rewind = function rewind() {\n if (SideEffect.canUseDOM) {\n throw new Error('You may only call rewind() on the server. Call peek() to read the current state.');\n }\n\n var recordedState = state;\n state = undefined;\n mountedInstances = [];\n return recordedState;\n };\n\n var _proto = SideEffect.prototype;\n\n _proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {\n mountedInstances.push(this);\n emitChange();\n };\n\n _proto.componentDidUpdate = function componentDidUpdate() {\n emitChange();\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n var index = mountedInstances.indexOf(this);\n mountedInstances.splice(index, 1);\n emitChange();\n };\n\n _proto.render = function render() {\n return React__default.createElement(WrappedComponent, this.props);\n };\n\n return SideEffect;\n }(React.PureComponent);\n\n _defineProperty(SideEffect, \"displayName\", \"SideEffect(\" + getDisplayName(WrappedComponent) + \")\");\n\n _defineProperty(SideEffect, \"canUseDOM\", canUseDOM);\n\n return SideEffect;\n };\n}\n\nmodule.exports = withSideEffect;\n","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.default = addClass;\n\nvar _hasClass = _interopRequireDefault(require(\"./hasClass\"));\n\nfunction addClass(element, className) {\n if (element.classList) element.classList.add(className);else if (!(0, _hasClass.default)(element, className)) if (typeof element.className === 'string') element.className = element.className + ' ' + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + ' ' + className);\n}\n\nmodule.exports = exports[\"default\"];","\"use strict\";\n\nexports.__esModule = true;\nexports.default = hasClass;\n\nfunction hasClass(element, className) {\n if (element.classList) return !!className && element.classList.contains(className);else return (\" \" + (element.className.baseVal || element.className) + \" \").indexOf(\" \" + className + \" \") !== -1;\n}\n\nmodule.exports = exports[\"default\"];","'use strict';\n\nfunction replaceClassName(origClass, classToRemove) {\n return origClass.replace(new RegExp('(^|\\\\s)' + classToRemove + '(?:\\\\s|$)', 'g'), '$1').replace(/\\s+/g, ' ').replace(/^\\s*|\\s*$/g, '');\n}\n\nmodule.exports = function removeClass(element, className) {\n if (element.classList) element.classList.remove(className);else if (typeof element.className === 'string') element.className = replaceClassName(element.className, className);else element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));\n};","\"use strict\";\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar PropTypes = _interopRequireWildcard(require(\"prop-types\"));\n\nvar _addClass = _interopRequireDefault(require(\"dom-helpers/class/addClass\"));\n\nvar _removeClass = _interopRequireDefault(require(\"dom-helpers/class/removeClass\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _Transition = _interopRequireDefault(require(\"./Transition\"));\n\nvar _PropTypes = require(\"./utils/PropTypes\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }\n\nfunction _extends() { _extends = Object.assign || 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); }\n\nfunction _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }\n\nvar addClass = function addClass(node, classes) {\n return node && classes && classes.split(' ').forEach(function (c) {\n return (0, _addClass.default)(node, c);\n });\n};\n\nvar removeClass = function removeClass(node, classes) {\n return node && classes && classes.split(' ').forEach(function (c) {\n return (0, _removeClass.default)(node, c);\n });\n};\n/**\n * A transition component inspired by the excellent\n * [ng-animate](http://www.nganimate.org/) library, you should use it if you're\n * using CSS transitions or animations. It's built upon the\n * [`Transition`](https://reactcommunity.org/react-transition-group/transition)\n * component, so it inherits all of its props.\n *\n * `CSSTransition` applies a pair of class names during the `appear`, `enter`,\n * and `exit` states of the transition. The first class is applied and then a\n * second `*-active` class in order to activate the CSSS transition. After the\n * transition, matching `*-done` class names are applied to persist the\n * transition state.\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n *
\n *
\n * \n * {\"I'll receive my-node-* classes\"}\n *
\n * \n *
\n *
\n * );\n * }\n * ```\n *\n * When the `in` prop is set to `true`, the child component will first receive\n * the class `example-enter`, then the `example-enter-active` will be added in\n * the next tick. `CSSTransition` [forces a\n * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)\n * between before adding the `example-enter-active`. This is an important trick\n * because it allows us to transition between `example-enter` and\n * `example-enter-active` even though they were added immediately one after\n * another. Most notably, this is what makes it possible for us to animate\n * _appearance_.\n *\n * ```css\n * .my-node-enter {\n * opacity: 0;\n * }\n * .my-node-enter-active {\n * opacity: 1;\n * transition: opacity 200ms;\n * }\n * .my-node-exit {\n * opacity: 1;\n * }\n * .my-node-exit-active {\n * opacity: 0;\n * transition: opacity: 200ms;\n * }\n * ```\n *\n * `*-active` classes represent which styles you want to animate **to**.\n */\n\n\nvar CSSTransition =\n/*#__PURE__*/\nfunction (_React$Component) {\n _inheritsLoose(CSSTransition, _React$Component);\n\n function CSSTransition() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n\n _this.onEnter = function (node, appearing) {\n var _this$getClassNames = _this.getClassNames(appearing ? 'appear' : 'enter'),\n className = _this$getClassNames.className;\n\n _this.removeClasses(node, 'exit');\n\n addClass(node, className);\n\n if (_this.props.onEnter) {\n _this.props.onEnter(node, appearing);\n }\n };\n\n _this.onEntering = function (node, appearing) {\n var _this$getClassNames2 = _this.getClassNames(appearing ? 'appear' : 'enter'),\n activeClassName = _this$getClassNames2.activeClassName;\n\n _this.reflowAndAddClass(node, activeClassName);\n\n if (_this.props.onEntering) {\n _this.props.onEntering(node, appearing);\n }\n };\n\n _this.onEntered = function (node, appearing) {\n var appearClassName = _this.getClassNames('appear').doneClassName;\n\n var enterClassName = _this.getClassNames('enter').doneClassName;\n\n var doneClassName = appearing ? appearClassName + \" \" + enterClassName : enterClassName;\n\n _this.removeClasses(node, appearing ? 'appear' : 'enter');\n\n addClass(node, doneClassName);\n\n if (_this.props.onEntered) {\n _this.props.onEntered(node, appearing);\n }\n };\n\n _this.onExit = function (node) {\n var _this$getClassNames3 = _this.getClassNames('exit'),\n className = _this$getClassNames3.className;\n\n _this.removeClasses(node, 'appear');\n\n _this.removeClasses(node, 'enter');\n\n addClass(node, className);\n\n if (_this.props.onExit) {\n _this.props.onExit(node);\n }\n };\n\n _this.onExiting = function (node) {\n var _this$getClassNames4 = _this.getClassNames('exit'),\n activeClassName = _this$getClassNames4.activeClassName;\n\n _this.reflowAndAddClass(node, activeClassName);\n\n if (_this.props.onExiting) {\n _this.props.onExiting(node);\n }\n };\n\n _this.onExited = function (node) {\n var _this$getClassNames5 = _this.getClassNames('exit'),\n doneClassName = _this$getClassNames5.doneClassName;\n\n _this.removeClasses(node, 'exit');\n\n addClass(node, doneClassName);\n\n if (_this.props.onExited) {\n _this.props.onExited(node);\n }\n };\n\n _this.getClassNames = function (type) {\n var classNames = _this.props.classNames;\n var isStringClassNames = typeof classNames === 'string';\n var prefix = isStringClassNames && classNames ? classNames + '-' : '';\n var className = isStringClassNames ? prefix + type : classNames[type];\n var activeClassName = isStringClassNames ? className + '-active' : classNames[type + 'Active'];\n var doneClassName = isStringClassNames ? className + '-done' : classNames[type + 'Done'];\n return {\n className: className,\n activeClassName: activeClassName,\n doneClassName: doneClassName\n };\n };\n\n return _this;\n }\n\n var _proto = CSSTransition.prototype;\n\n _proto.removeClasses = function removeClasses(node, type) {\n var _this$getClassNames6 = this.getClassNames(type),\n className = _this$getClassNames6.className,\n activeClassName = _this$getClassNames6.activeClassName,\n doneClassName = _this$getClassNames6.doneClassName;\n\n className && removeClass(node, className);\n activeClassName && removeClass(node, activeClassName);\n doneClassName && removeClass(node, doneClassName);\n };\n\n _proto.reflowAndAddClass = function reflowAndAddClass(node, className) {\n // This is for to force a repaint,\n // which is necessary in order to transition styles when adding a class name.\n if (className) {\n /* eslint-disable no-unused-expressions */\n node && node.scrollTop;\n /* eslint-enable no-unused-expressions */\n\n addClass(node, className);\n }\n };\n\n _proto.render = function render() {\n var props = _extends({}, this.props);\n\n delete props.classNames;\n return _react.default.createElement(_Transition.default, _extends({}, props, {\n onEnter: this.onEnter,\n onEntered: this.onEntered,\n onEntering: this.onEntering,\n onExit: this.onExit,\n onExiting: this.onExiting,\n onExited: this.onExited\n }));\n };\n\n return CSSTransition;\n}(_react.default.Component);\n\nCSSTransition.defaultProps = {\n classNames: ''\n};\nCSSTransition.propTypes = process.env.NODE_ENV !== \"production\" ? _extends({}, _Transition.default.propTypes, {\n /**\n * The animation classNames applied to the component as it enters, exits or\n * has finished the transition. A single name can be provided and it will be\n * suffixed for each stage: e.g.\n *\n * `classNames=\"fade\"` applies `fade-enter`, `fade-enter-active`,\n * `fade-enter-done`, `fade-exit`, `fade-exit-active`, `fade-exit-done`,\n * `fade-appear`, `fade-appear-active`, and `fade-appear-done`.\n *\n * **Note**: `fade-appear-done` and `fade-enter-done` will _both_ be applied.\n * This allows you to define different behavior for when appearing is done and\n * when regular entering is done, using selectors like\n * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply an\n * epic entrance animation when element first appears in the DOM using\n * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can\n * simply use `fade-enter-done` for defining both cases.\n *\n * Each individual classNames can also be specified independently like:\n *\n * ```js\n * classNames={{\n * appear: 'my-appear',\n * appearActive: 'my-active-appear',\n * appearDone: 'my-done-appear',\n * enter: 'my-enter',\n * enterActive: 'my-active-enter',\n * enterDone: 'my-done-enter',\n * exit: 'my-exit',\n * exitActive: 'my-active-exit',\n * exitDone: 'my-done-exit',\n * }}\n * ```\n *\n * If you want to set these classes using CSS Modules:\n *\n * ```js\n * import styles from './styles.css';\n * ```\n *\n * you might want to use camelCase in your CSS file, that way could simply\n * spread them instead of listing them one by one:\n *\n * ```js\n * classNames={{ ...styles }}\n * ```\n *\n * @type {string | {\n * appear?: string,\n * appearActive?: string,\n * appearDone?: string,\n * enter?: string,\n * enterActive?: string,\n * enterDone?: string,\n * exit?: string,\n * exitActive?: string,\n * exitDone?: string,\n * }}\n */\n classNames: _PropTypes.classNamesShape,\n\n /**\n * A `