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","export default {\n disabled: false\n};","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport config from './config';\nimport { timeoutsShape } from './utils/PropTypes';\nimport TransitionGroupContext from './TransitionGroupContext';\nimport { forceReflow } from './utils/reflow';\nexport var UNMOUNTED = 'unmounted';\nexport var EXITED = 'exited';\nexport var ENTERING = 'entering';\nexport var ENTERED = 'entered';\nexport var EXITING = 'exiting';\n/**\n * The Transition component lets you describe a transition from one component\n * state to another _over time_ with a simple declarative API. Most commonly\n * it's used to animate the mounting and unmounting of a component, but can also\n * be used to describe in-place transition states as well.\n *\n * ---\n *\n * **Note**: `Transition` is a platform-agnostic base component. If you're using\n * transitions in CSS, you'll probably want to use\n * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)\n * instead. It inherits all the features of `Transition`, but contains\n * additional features necessary to play nice with CSS transitions (hence the\n * name of the component).\n *\n * ---\n *\n * By default the `Transition` component does not alter the behavior of the\n * component it renders, it only tracks \"enter\" and \"exit\" states for the\n * components. It's up to you to give meaning and effect to those states. For\n * example we can add styles to a component when it enters or exits:\n *\n * ```jsx\n * import { Transition } from 'react-transition-group';\n *\n * const duration = 300;\n *\n * const defaultStyle = {\n * transition: `opacity ${duration}ms ease-in-out`,\n * opacity: 0,\n * }\n *\n * const transitionStyles = {\n * entering: { opacity: 1 },\n * entered: { opacity: 1 },\n * exiting: { opacity: 0 },\n * exited: { opacity: 0 },\n * };\n *\n * const Fade = ({ in: inProp }) => (\n *
\n * {state => (\n * \n * I'm a fade Transition!\n *
\n * )}\n * \n * );\n * ```\n *\n * There are 4 main states a Transition can be in:\n * - `'entering'`\n * - `'entered'`\n * - `'exiting'`\n * - `'exited'`\n *\n * Transition state is toggled via the `in` prop. When `true` the component\n * begins the \"Enter\" stage. During this stage, the component will shift from\n * its current transition state, to `'entering'` for the duration of the\n * transition and then to the `'entered'` stage once it's complete. Let's take\n * the following example (we'll use the\n * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n if (this.props.unmountOnExit || this.props.mountOnEnter) {\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749\n // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.\n // To make the animation happen, we have to separate each rendering and avoid being processed as batched.\n\n if (node) forceReflow(node);\n }\n\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n *
\n * ```\n */\n children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,\n\n /**\n * Show the component; triggers the enter or exit states\n */\n in: PropTypes.bool,\n\n /**\n * By default the child component is mounted immediately along with\n * the parent `Transition` component. If you want to \"lazy mount\" the component on the\n * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay\n * mounted, even on \"exited\", unless you also specify `unmountOnExit`.\n */\n mountOnEnter: PropTypes.bool,\n\n /**\n * By default the child component stays mounted after it reaches the `'exited'` state.\n * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit: PropTypes.bool,\n\n /**\n * By default the child component does not perform the enter transition when\n * it first mounts, regardless of the value of `in`. If you want this\n * behavior, set both `appear` and `in` to `true`.\n *\n * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop\n * > only adds an additional enter transition. However, in the\n * > `