@atlaskit/contextual-survey 6.0.11 → 6.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/contextual-survey
 
+## 6.1.0
+
+### Minor Changes
+
+- [`08f86d1686ebb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/08f86d1686ebb) -
+  Making library react19 compatible - Converting JSX.Element to React.JSX.Element & using
+  @atlaskit/motion instead of react-transition-group
+
+## 6.0.12
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.0.11
 
 ### Patch Changes

package/dist/cjs/components/SurveyForm.js

@@ -13,30 +13,14 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _reactTransitionGroup = require("react-transition-group");
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _motion = require("@atlaskit/motion");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _FeedbackScoreButtons = _interopRequireDefault(require("./FeedbackScoreButtons"));
 var _SurveyFormExpandedFeedback = require("./SurveyFormExpandedFeedback");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var transitionBaseStyles = null;
-var getExpandedHeight = function getExpandedHeight(ref, state) {
-  if (!ref.current) {
-    return '0';
-  }
-  switch (state) {
-    case 'entering':
-      return "".concat(ref.current.scrollHeight, "px");
-    case 'entered':
-      // needed for TextField auto height expand
-      return "none";
-    default:
-      return '0';
-  }
-};
 var TRANSITION_DURATION = 200;
 var _default = exports.default = function _default(_ref) {
   var question = _ref.question,
@@ -53,7 +37,6 @@ var _default = exports.default = function _default(_ref) {
     canContactDefault = _useState4[0],
     setCanContactDefault = _useState4[1];
   var hasAutoFilledCanContactRef = (0, _react.useRef)(false);
-  var expandedAreaRef = (0, _react.useRef)(null);
   var onScoreSelect = (0, _react.useCallback)(function () {
     setExpanded(true);
   }, [setExpanded]);
@@ -104,7 +87,7 @@ var _default = exports.default = function _default(_ref) {
           onScoreSelect();
         }
       }));
-    }), (0, _platformFeatureFlags.fg)('platform_contextual_survey_use_atlaskit_motion') ? /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, resizingHeightProps, {
+    }), /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, resizingHeightProps, {
       className: (0, _runtime.ax)(["_1reo15vq _18m915vq"])
     }), expanded ? /*#__PURE__*/React.createElement(_SurveyFormExpandedFeedback.SurveyFormExpandedFeedback, {
       canContactDefault: canContactDefault,
@@ -112,25 +95,6 @@ var _default = exports.default = function _default(_ref) {
       submitting: submitting,
       textLabel: textLabel,
       textPlaceholder: textPlaceholder
-    }) : null) : /*#__PURE__*/React.createElement(_reactTransitionGroup.Transition, {
-      in: expanded,
-      timeout: TRANSITION_DURATION,
-      mountOnEnter: true
-    }, function (state) {
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          transition: "max-height ".concat(TRANSITION_DURATION, "ms ease-in-out"),
-          maxHeight: getExpandedHeight(expandedAreaRef, state)
-        },
-        ref: expandedAreaRef,
-        className: (0, _runtime.ax)(["_1reo15vq _18m915vq"])
-      }, /*#__PURE__*/React.createElement(_SurveyFormExpandedFeedback.SurveyFormExpandedFeedback, {
-        canContactDefault: canContactDefault,
-        onFeedbackChange: onFeedbackChange,
-        submitting: submitting,
-        textLabel: textLabel,
-        textPlaceholder: textPlaceholder
-      }));
-    }));
+    }) : null));
   }));
 };

package/dist/cjs/components/SurveyMarshal.compiled.css

@@ -1,5 +1,4 @@
 ._1pbyni7l{z-index:600}
 ._1xi2oahv{right:var(--ds-space-600,3pc)}
 ._94n5oahv{bottom:var(--ds-space-600,3pc)}
-._k8m01rjc{transition-property:transform,opacity}
 ._kqsw1n9t{position:fixed}

package/dist/cjs/components/SurveyMarshal.js

@@ -10,80 +10,32 @@ exports.default = SurveyMarshal;
 require("./SurveyMarshal.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _reactTransitionGroup = require("react-transition-group");
 var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
 var _slideIn = _interopRequireDefault(require("@atlaskit/motion/slide-in"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("@atlaskit/theme/constants");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // 8px is the base unit in pixels
 var surveyOffset = "var(--ds-space-600, 48px)";
-var animationDuration = 300;
-var offscreen = {
-  // Hard-coded because there is no large enough space token and this component is not responsive.
-  translateX: '488px',
-  //survey container width + survey offset
-  opacity: '0'
-};
-var getAnimationProps = function getAnimationProps(state) {
-  switch (state) {
-    case 'entered':
-      {
-        return {
-          translateX: '0',
-          opacity: '1'
-        };
-      }
-    case 'entering':
-    case 'unmounted':
-    case 'exited':
-    case 'exiting':
-      {
-        return offscreen;
-      }
-  }
-};
-var transitionBaseStyles = null;
 var marshalLayoutStyles = null;
 var marshalMotionLayerStyles = null;
 function SurveyMarshal(props) {
   var children = props.children,
     shouldShow = props.shouldShow;
-  if ((0, _platformFeatureFlags.fg)('platform_contextual_survey_use_atlaskit_motion')) {
-    return /*#__PURE__*/React.createElement(_exitingPersistence.default, {
-      appear: true
-    }, shouldShow && /*#__PURE__*/React.createElement(_slideIn.default, {
-      key: "contextual-survey-marshal",
-      enterFrom: "right",
-      fade: "inout",
-      duration: "medium"
-    }, function (motionProps) {
-      return /*#__PURE__*/React.createElement("div", {
-        ref: motionProps.ref
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- motion keyframes
-        ,
-        className: (0, _runtime.ax)(["_kqsw1n9t _1xi2oahv _94n5oahv", "_1pbyni7l", motionProps.className]),
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- motion animation styles
-        style: motionProps.style
-      }, children());
-    }));
-  }
-  return /*#__PURE__*/React.createElement(_reactTransitionGroup.Transition, {
-    in: shouldShow,
-    timeout: animationDuration,
-    unmountOnExit: true
-  }, function (state) {
-    var _getAnimationProps = getAnimationProps(state),
-      translateX = _getAnimationProps.translateX,
-      opacity = _getAnimationProps.opacity;
+  return /*#__PURE__*/React.createElement(_exitingPersistence.default, {
+    appear: true
+  }, shouldShow && /*#__PURE__*/React.createElement(_slideIn.default, {
+    key: "contextual-survey-marshal",
+    enterFrom: "right",
+    fade: "inout",
+    duration: "medium"
+  }, function (motionProps) {
     return /*#__PURE__*/React.createElement("div", {
-      style: {
-        opacity: opacity,
-        transition: "all ".concat(animationDuration, "ms ease-in-out"),
-        zIndex: _constants.layers.flag(),
-        transform: "translateX(".concat(translateX, ")")
-      },
-      className: (0, _runtime.ax)(["_kqsw1n9t _1xi2oahv _94n5oahv _k8m01rjc"])
+      ref: motionProps.ref
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- motion keyframes
+      ,
+      className: (0, _runtime.ax)(["_kqsw1n9t _1xi2oahv _94n5oahv", "_1pbyni7l", motionProps.className]),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- motion animation styles
+      style: motionProps.style
     }, children());
-  });
+  }));
 }

package/dist/cjs/new-survey/SurveyForm.js

@@ -13,34 +13,19 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _reactTransitionGroup = require("react-transition-group");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
-var _checkbox = require("@atlaskit/checkbox");
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _motion = require("@atlaskit/motion");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _textarea = _interopRequireDefault(require("@atlaskit/textarea"));
 var _FeedbackScoreButtons = _interopRequireDefault(require("./FeedbackScoreButtons"));
+var _SurveyFormExpandedFeedback = require("./SurveyFormExpandedFeedback");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var transitionBaseStyles = null;
 var styles = {
   buttonContainer: "_19pk1ejb",
   questionContainer: "_otyrv47k"
 };
-var getExpandedHeight = function getExpandedHeight(ref, state) {
-  if (!ref.current) {
-    return '0';
-  }
-  switch (state) {
-    case 'entering':
-      return "".concat(ref.current.scrollHeight, "px");
-    case 'entered':
-      // needed for TextField auto height expand
-      return "none";
-    default:
-      return '0';
-  }
-};
 var TRANSITION_DURATION = 200;
 var _default = exports.default = function _default(_ref) {
   var question = _ref.question,
@@ -57,7 +42,6 @@ var _default = exports.default = function _default(_ref) {
     canContactDefault = _useState4[0],
     setCanContactDefault = _useState4[1];
   var hasAutoFilledCanContactRef = (0, _react.useRef)(false);
-  var expandedAreaRef = (0, _react.useRef)(null);
   var onScoreSelect = (0, _react.useCallback)(function () {
     setExpanded(true);
   }, [setExpanded]);
@@ -72,6 +56,14 @@ var _default = exports.default = function _default(_ref) {
     hasAutoFilledCanContactRef.current = true;
     setCanContactDefault(true);
   }, []);
+  var resizingHeightProps = (0, _motion.useResizingHeight)({
+    duration: function duration() {
+      return TRANSITION_DURATION;
+    },
+    timingFunction: function timingFunction() {
+      return 'ease-in-out';
+    }
+  });
   return /*#__PURE__*/React.createElement("section", {
     "aria-labelledby": "contextualSurveyQuestion"
   }, /*#__PURE__*/React.createElement(_compiled.Stack, {
@@ -104,43 +96,14 @@ var _default = exports.default = function _default(_ref) {
           onScoreSelect();
         }
       }));
-    }), /*#__PURE__*/React.createElement(_reactTransitionGroup.Transition, {
-      in: expanded,
-      timeout: TRANSITION_DURATION,
-      mountOnEnter: true
-    }, function (state) {
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          transition: "max-height ".concat(TRANSITION_DURATION, "ms ease-in-out"),
-          maxHeight: getExpandedHeight(expandedAreaRef, state)
-        },
-        ref: expandedAreaRef,
-        className: (0, _runtime.ax)(["_1reo15vq _18m915vq"])
-      }, /*#__PURE__*/React.createElement(_form.Field, {
-        name: "writtenFeedback",
-        defaultValue: "",
-        isDisabled: submitting,
-        label: textLabel
-      }, function (_ref4) {
-        var fieldProps = _ref4.fieldProps;
-        return /*#__PURE__*/React.createElement(_textarea.default, (0, _extends2.default)({}, fieldProps, {
-          "aria-label": textLabel,
-          onChange: function onChange(event) {
-            fieldProps.onChange(event);
-            onFeedbackChange();
-          }
-        }));
-      }), /*#__PURE__*/React.createElement(_form.CheckboxField, {
-        name: "canContact",
-        isDisabled: submitting,
-        defaultIsChecked: canContactDefault
-      }, function (_ref5) {
-        var fieldProps = _ref5.fieldProps;
-        return /*#__PURE__*/React.createElement(_checkbox.Checkbox, (0, _extends2.default)({}, fieldProps, {
-          label: "Atlassian can contact me about this feedback"
-        }));
-      }));
-    }), /*#__PURE__*/React.createElement(_compiled.Box, {
+    }), /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, resizingHeightProps, {
+      className: (0, _runtime.ax)(["_1reo15vq _18m915vq"])
+    }), expanded ? /*#__PURE__*/React.createElement(_SurveyFormExpandedFeedback.SurveyFormExpandedFeedback, {
+      canContactDefault: canContactDefault,
+      onFeedbackChange: onFeedbackChange,
+      submitting: submitting,
+      textLabel: textLabel
+    }) : null), /*#__PURE__*/React.createElement(_compiled.Box, {
       xcss: styles.buttonContainer
     }, /*#__PURE__*/React.createElement(_new.default, {
       isDisabled: !expanded,

package/dist/cjs/new-survey/SurveyFormExpandedFeedback.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SurveyFormExpandedFeedback = SurveyFormExpandedFeedback;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _checkbox = _interopRequireDefault(require("@atlaskit/checkbox"));
+var _form = require("@atlaskit/form");
+var _textarea = _interopRequireDefault(require("@atlaskit/textarea"));
+function SurveyFormExpandedFeedback(_ref) {
+  var canContactDefault = _ref.canContactDefault,
+    onFeedbackChange = _ref.onFeedbackChange,
+    submitting = _ref.submitting,
+    textLabel = _ref.textLabel;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_form.Field, {
+    name: "writtenFeedback",
+    defaultValue: "",
+    isDisabled: submitting,
+    label: textLabel
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps;
+    return /*#__PURE__*/_react.default.createElement(_textarea.default, (0, _extends2.default)({}, fieldProps, {
+      "aria-label": textLabel,
+      onChange: function onChange(event) {
+        fieldProps.onChange(event);
+        onFeedbackChange();
+      }
+    }));
+  }), /*#__PURE__*/_react.default.createElement(_form.CheckboxField, {
+    name: "canContact",
+    isDisabled: submitting,
+    defaultIsChecked: canContactDefault
+  }, function (_ref3) {
+    var fieldProps = _ref3.fieldProps;
+    return /*#__PURE__*/_react.default.createElement(_checkbox.default, (0, _extends2.default)({}, fieldProps, {
+      label: "Atlassian can contact me about this feedback"
+    }));
+  }));
+}

package/dist/es2019/components/SurveyForm.js

@@ -4,29 +4,13 @@ import "./SurveyForm.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useRef, useState } from 'react';
-import { Transition } from 'react-transition-group';
 import Form, { Field } from '@atlaskit/form';
 import Heading from '@atlaskit/heading';
 import { useResizingHeight } from '@atlaskit/motion';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Stack, Text } from '@atlaskit/primitives/compiled';
 import FeedbackScoreButtons from './FeedbackScoreButtons';
 import { SurveyFormExpandedFeedback } from './SurveyFormExpandedFeedback';
 const transitionBaseStyles = null;
-const getExpandedHeight = (ref, state) => {
-  if (!ref.current) {
-    return '0';
-  }
-  switch (state) {
-    case 'entering':
-      return `${ref.current.scrollHeight}px`;
-    case 'entered':
-      // needed for TextField auto height expand
-      return `none`;
-    default:
-      return '0';
-  }
-};
 const TRANSITION_DURATION = 200;
 export default (({
   question,
@@ -38,7 +22,6 @@ export default (({
   const [expanded, setExpanded] = useState(false);
   const [canContactDefault, setCanContactDefault] = useState(false);
   const hasAutoFilledCanContactRef = useRef(false);
-  const expandedAreaRef = useRef(null);
   const onScoreSelect = useCallback(() => {
     setExpanded(true);
   }, [setExpanded]);
@@ -84,7 +67,7 @@ export default (({
       fieldProps.onChange(score);
       onScoreSelect();
     }
-  }))), fg('platform_contextual_survey_use_atlaskit_motion') ? /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
+  }))), /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
     className: ax(["_1reo15vq _18m915vq"])
   }), expanded ? /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
     canContactDefault: canContactDefault,
@@ -92,22 +75,5 @@ export default (({
     submitting: submitting,
     textLabel: textLabel,
     textPlaceholder: textPlaceholder
-  }) : null) : /*#__PURE__*/React.createElement(Transition, {
-    in: expanded,
-    timeout: TRANSITION_DURATION,
-    mountOnEnter: true
-  }, state => /*#__PURE__*/React.createElement("div", {
-    style: {
-      transition: `max-height ${TRANSITION_DURATION}ms ease-in-out`,
-      maxHeight: getExpandedHeight(expandedAreaRef, state)
-    },
-    ref: expandedAreaRef,
-    className: ax(["_1reo15vq _18m915vq"])
-  }, /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
-    canContactDefault: canContactDefault,
-    onFeedbackChange: onFeedbackChange,
-    submitting: submitting,
-    textLabel: textLabel,
-    textPlaceholder: textPlaceholder
-  }))))));
+  }) : null))));
 });

package/dist/es2019/components/SurveyMarshal.compiled.css

@@ -1,5 +1,4 @@
 ._1pbyni7l{z-index:600}
 ._1xi2oahv{right:var(--ds-space-600,3pc)}
 ._94n5oahv{bottom:var(--ds-space-600,3pc)}
-._k8m01rjc{transition-property:transform,opacity}
 ._kqsw1n9t{position:fixed}

package/dist/es2019/components/SurveyMarshal.js

@@ -2,39 +2,11 @@
 import "./SurveyMarshal.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Transition } from 'react-transition-group';
 import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
 import SlideIn from '@atlaskit/motion/slide-in';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
 // 8px is the base unit in pixels
 const surveyOffset = "var(--ds-space-600, 48px)";
-const animationDuration = 300;
-const offscreen = {
-  // Hard-coded because there is no large enough space token and this component is not responsive.
-  translateX: '488px',
-  //survey container width + survey offset
-  opacity: '0'
-};
-const getAnimationProps = state => {
-  switch (state) {
-    case 'entered':
-      {
-        return {
-          translateX: '0',
-          opacity: '1'
-        };
-      }
-    case 'entering':
-    case 'unmounted':
-    case 'exited':
-    case 'exiting':
-      {
-        return offscreen;
-      }
-  }
-};
-const transitionBaseStyles = null;
 const marshalLayoutStyles = null;
 const marshalMotionLayerStyles = null;
 export default function SurveyMarshal(props) {
@@ -42,40 +14,19 @@ export default function SurveyMarshal(props) {
     children,
     shouldShow
   } = props;
-  if (fg('platform_contextual_survey_use_atlaskit_motion')) {
-    return /*#__PURE__*/React.createElement(ExitingPersistence, {
-      appear: true
-    }, shouldShow && /*#__PURE__*/React.createElement(SlideIn, {
-      key: "contextual-survey-marshal",
-      enterFrom: "right",
-      fade: "inout",
-      duration: "medium"
-    }, motionProps => /*#__PURE__*/React.createElement("div", {
-      ref: motionProps.ref
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- motion keyframes
-      ,
-      className: ax(["_kqsw1n9t _1xi2oahv _94n5oahv", "_1pbyni7l", motionProps.className]),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- motion animation styles
-      style: motionProps.style
-    }, children())));
-  }
-  return /*#__PURE__*/React.createElement(Transition, {
-    in: shouldShow,
-    timeout: animationDuration,
-    unmountOnExit: true
-  }, state => {
-    const {
-      translateX,
-      opacity
-    } = getAnimationProps(state);
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        opacity: opacity,
-        transition: `all ${animationDuration}ms ease-in-out`,
-        zIndex: layers.flag(),
-        transform: `translateX(${translateX})`
-      },
-      className: ax(["_kqsw1n9t _1xi2oahv _94n5oahv _k8m01rjc"])
-    }, children());
-  });
+  return /*#__PURE__*/React.createElement(ExitingPersistence, {
+    appear: true
+  }, shouldShow && /*#__PURE__*/React.createElement(SlideIn, {
+    key: "contextual-survey-marshal",
+    enterFrom: "right",
+    fade: "inout",
+    duration: "medium"
+  }, motionProps => /*#__PURE__*/React.createElement("div", {
+    ref: motionProps.ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- motion keyframes
+    ,
+    className: ax(["_kqsw1n9t _1xi2oahv _94n5oahv", "_1pbyni7l", motionProps.className]),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- motion animation styles
+    style: motionProps.style
+  }, children())));
 }

package/dist/es2019/new-survey/SurveyForm.js

@@ -4,33 +4,18 @@ import "./SurveyForm.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useRef, useState } from 'react';
-import { Transition } from 'react-transition-group';
 import Button from '@atlaskit/button/new';
-import { Checkbox } from '@atlaskit/checkbox';
-import Form, { CheckboxField, Field } from '@atlaskit/form';
+import Form, { Field } from '@atlaskit/form';
 import Heading from '@atlaskit/heading';
+import { useResizingHeight } from '@atlaskit/motion';
 import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
-import Textarea from '@atlaskit/textarea';
 import FeedbackScoreButtons from './FeedbackScoreButtons';
+import { SurveyFormExpandedFeedback } from './SurveyFormExpandedFeedback';
 const transitionBaseStyles = null;
 const styles = {
   buttonContainer: "_19pk1ejb",
   questionContainer: "_otyrv47k"
 };
-const getExpandedHeight = (ref, state) => {
-  if (!ref.current) {
-    return '0';
-  }
-  switch (state) {
-    case 'entering':
-      return `${ref.current.scrollHeight}px`;
-    case 'entered':
-      // needed for TextField auto height expand
-      return `none`;
-    default:
-      return '0';
-  }
-};
 const TRANSITION_DURATION = 200;
 export default (({
   question,
@@ -42,7 +27,6 @@ export default (({
   const [expanded, setExpanded] = useState(false);
   const [canContactDefault, setCanContactDefault] = useState(false);
   const hasAutoFilledCanContactRef = useRef(false);
-  const expandedAreaRef = useRef(null);
   const onScoreSelect = useCallback(() => {
     setExpanded(true);
   }, [setExpanded]);
@@ -57,6 +41,10 @@ export default (({
     hasAutoFilledCanContactRef.current = true;
     setCanContactDefault(true);
   }, []);
+  const resizingHeightProps = useResizingHeight({
+    duration: () => TRANSITION_DURATION,
+    timingFunction: () => 'ease-in-out'
+  });
   return /*#__PURE__*/React.createElement("section", {
     "aria-labelledby": "contextualSurveyQuestion"
   }, /*#__PURE__*/React.createElement(Stack, {
@@ -88,39 +76,14 @@ export default (({
       fieldProps.onChange(score);
       onScoreSelect();
     }
-  }))), /*#__PURE__*/React.createElement(Transition, {
-    in: expanded,
-    timeout: TRANSITION_DURATION,
-    mountOnEnter: true
-  }, state => /*#__PURE__*/React.createElement("div", {
-    style: {
-      transition: `max-height ${TRANSITION_DURATION}ms ease-in-out`,
-      maxHeight: getExpandedHeight(expandedAreaRef, state)
-    },
-    ref: expandedAreaRef,
+  }))), /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
     className: ax(["_1reo15vq _18m915vq"])
-  }, /*#__PURE__*/React.createElement(Field, {
-    name: "writtenFeedback",
-    defaultValue: "",
-    isDisabled: submitting,
-    label: textLabel
-  }, ({
-    fieldProps
-  }) => /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
-    "aria-label": textLabel,
-    onChange: event => {
-      fieldProps.onChange(event);
-      onFeedbackChange();
-    }
-  }))), /*#__PURE__*/React.createElement(CheckboxField, {
-    name: "canContact",
-    isDisabled: submitting,
-    defaultIsChecked: canContactDefault
-  }, ({
-    fieldProps
-  }) => /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
-    label: "Atlassian can contact me about this feedback"
-  }))))), /*#__PURE__*/React.createElement(Box, {
+  }), expanded ? /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
+    canContactDefault: canContactDefault,
+    onFeedbackChange: onFeedbackChange,
+    submitting: submitting,
+    textLabel: textLabel
+  }) : null), /*#__PURE__*/React.createElement(Box, {
     xcss: styles.buttonContainer
   }, /*#__PURE__*/React.createElement(Button, {
     isDisabled: !expanded,

package/dist/es2019/new-survey/SurveyFormExpandedFeedback.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Checkbox from '@atlaskit/checkbox';
+import { CheckboxField, Field } from '@atlaskit/form';
+import Textarea from '@atlaskit/textarea';
+export function SurveyFormExpandedFeedback({
+  canContactDefault,
+  onFeedbackChange,
+  submitting,
+  textLabel
+}) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, {
+    name: "writtenFeedback",
+    defaultValue: "",
+    isDisabled: submitting,
+    label: textLabel
+  }, ({
+    fieldProps
+  }) => /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
+    "aria-label": textLabel,
+    onChange: event => {
+      fieldProps.onChange(event);
+      onFeedbackChange();
+    }
+  }))), /*#__PURE__*/React.createElement(CheckboxField, {
+    name: "canContact",
+    isDisabled: submitting,
+    defaultIsChecked: canContactDefault
+  }, ({
+    fieldProps
+  }) => /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
+    label: "Atlassian can contact me about this feedback"
+  }))));
+}

package/dist/esm/components/SurveyForm.js

@@ -5,29 +5,13 @@ import "./SurveyForm.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useRef, useState } from 'react';
-import { Transition } from 'react-transition-group';
 import Form, { Field } from '@atlaskit/form';
 import Heading from '@atlaskit/heading';
 import { useResizingHeight } from '@atlaskit/motion';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Stack, Text } from '@atlaskit/primitives/compiled';
 import FeedbackScoreButtons from './FeedbackScoreButtons';
 import { SurveyFormExpandedFeedback } from './SurveyFormExpandedFeedback';
 var transitionBaseStyles = null;
-var getExpandedHeight = function getExpandedHeight(ref, state) {
-  if (!ref.current) {
-    return '0';
-  }
-  switch (state) {
-    case 'entering':
-      return "".concat(ref.current.scrollHeight, "px");
-    case 'entered':
-      // needed for TextField auto height expand
-      return "none";
-    default:
-      return '0';
-  }
-};
 var TRANSITION_DURATION = 200;
 export default (function (_ref) {
   var question = _ref.question,
@@ -44,7 +28,6 @@ export default (function (_ref) {
     canContactDefault = _useState4[0],
     setCanContactDefault = _useState4[1];
   var hasAutoFilledCanContactRef = useRef(false);
-  var expandedAreaRef = useRef(null);
   var onScoreSelect = useCallback(function () {
     setExpanded(true);
   }, [setExpanded]);
@@ -95,7 +78,7 @@ export default (function (_ref) {
           onScoreSelect();
         }
       }));
-    }), fg('platform_contextual_survey_use_atlaskit_motion') ? /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
+    }), /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
       className: ax(["_1reo15vq _18m915vq"])
     }), expanded ? /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
       canContactDefault: canContactDefault,
@@ -103,25 +86,6 @@ export default (function (_ref) {
       submitting: submitting,
       textLabel: textLabel,
       textPlaceholder: textPlaceholder
-    }) : null) : /*#__PURE__*/React.createElement(Transition, {
-      in: expanded,
-      timeout: TRANSITION_DURATION,
-      mountOnEnter: true
-    }, function (state) {
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          transition: "max-height ".concat(TRANSITION_DURATION, "ms ease-in-out"),
-          maxHeight: getExpandedHeight(expandedAreaRef, state)
-        },
-        ref: expandedAreaRef,
-        className: ax(["_1reo15vq _18m915vq"])
-      }, /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
-        canContactDefault: canContactDefault,
-        onFeedbackChange: onFeedbackChange,
-        submitting: submitting,
-        textLabel: textLabel,
-        textPlaceholder: textPlaceholder
-      }));
-    }));
+    }) : null));
   }));
 });

package/dist/esm/components/SurveyMarshal.compiled.css

@@ -1,5 +1,4 @@
 ._1pbyni7l{z-index:600}
 ._1xi2oahv{right:var(--ds-space-600,3pc)}
 ._94n5oahv{bottom:var(--ds-space-600,3pc)}
-._k8m01rjc{transition-property:transform,opacity}
 ._kqsw1n9t{position:fixed}

package/dist/esm/components/SurveyMarshal.js

@@ -2,79 +2,31 @@
 import "./SurveyMarshal.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Transition } from 'react-transition-group';
 import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
 import SlideIn from '@atlaskit/motion/slide-in';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { layers } from '@atlaskit/theme/constants';
 // 8px is the base unit in pixels
 var surveyOffset = "var(--ds-space-600, 48px)";
-var animationDuration = 300;
-var offscreen = {
-  // Hard-coded because there is no large enough space token and this component is not responsive.
-  translateX: '488px',
-  //survey container width + survey offset
-  opacity: '0'
-};
-var getAnimationProps = function getAnimationProps(state) {
-  switch (state) {
-    case 'entered':
-      {
-        return {
-          translateX: '0',
-          opacity: '1'
-        };
-      }
-    case 'entering':
-    case 'unmounted':
-    case 'exited':
-    case 'exiting':
-      {
-        return offscreen;
-      }
-  }
-};
-var transitionBaseStyles = null;
 var marshalLayoutStyles = null;
 var marshalMotionLayerStyles = null;
 export default function SurveyMarshal(props) {
   var children = props.children,
     shouldShow = props.shouldShow;
-  if (fg('platform_contextual_survey_use_atlaskit_motion')) {
-    return /*#__PURE__*/React.createElement(ExitingPersistence, {
-      appear: true
-    }, shouldShow && /*#__PURE__*/React.createElement(SlideIn, {
-      key: "contextual-survey-marshal",
-      enterFrom: "right",
-      fade: "inout",
-      duration: "medium"
-    }, function (motionProps) {
-      return /*#__PURE__*/React.createElement("div", {
-        ref: motionProps.ref
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- motion keyframes
-        ,
-        className: ax(["_kqsw1n9t _1xi2oahv _94n5oahv", "_1pbyni7l", motionProps.className]),
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- motion animation styles
-        style: motionProps.style
-      }, children());
-    }));
-  }
-  return /*#__PURE__*/React.createElement(Transition, {
-    in: shouldShow,
-    timeout: animationDuration,
-    unmountOnExit: true
-  }, function (state) {
-    var _getAnimationProps = getAnimationProps(state),
-      translateX = _getAnimationProps.translateX,
-      opacity = _getAnimationProps.opacity;
+  return /*#__PURE__*/React.createElement(ExitingPersistence, {
+    appear: true
+  }, shouldShow && /*#__PURE__*/React.createElement(SlideIn, {
+    key: "contextual-survey-marshal",
+    enterFrom: "right",
+    fade: "inout",
+    duration: "medium"
+  }, function (motionProps) {
     return /*#__PURE__*/React.createElement("div", {
-      style: {
-        opacity: opacity,
-        transition: "all ".concat(animationDuration, "ms ease-in-out"),
-        zIndex: layers.flag(),
-        transform: "translateX(".concat(translateX, ")")
-      },
-      className: ax(["_kqsw1n9t _1xi2oahv _94n5oahv _k8m01rjc"])
+      ref: motionProps.ref
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- motion keyframes
+      ,
+      className: ax(["_kqsw1n9t _1xi2oahv _94n5oahv", "_1pbyni7l", motionProps.className]),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- motion animation styles
+      style: motionProps.style
     }, children());
-  });
+  }));
 }

package/dist/esm/new-survey/SurveyForm.js

@@ -5,33 +5,18 @@ import "./SurveyForm.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useRef, useState } from 'react';
-import { Transition } from 'react-transition-group';
 import Button from '@atlaskit/button/new';
-import { Checkbox } from '@atlaskit/checkbox';
-import Form, { CheckboxField, Field } from '@atlaskit/form';
+import Form, { Field } from '@atlaskit/form';
 import Heading from '@atlaskit/heading';
+import { useResizingHeight } from '@atlaskit/motion';
 import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
-import Textarea from '@atlaskit/textarea';
 import FeedbackScoreButtons from './FeedbackScoreButtons';
+import { SurveyFormExpandedFeedback } from './SurveyFormExpandedFeedback';
 var transitionBaseStyles = null;
 var styles = {
   buttonContainer: "_19pk1ejb",
   questionContainer: "_otyrv47k"
 };
-var getExpandedHeight = function getExpandedHeight(ref, state) {
-  if (!ref.current) {
-    return '0';
-  }
-  switch (state) {
-    case 'entering':
-      return "".concat(ref.current.scrollHeight, "px");
-    case 'entered':
-      // needed for TextField auto height expand
-      return "none";
-    default:
-      return '0';
-  }
-};
 var TRANSITION_DURATION = 200;
 export default (function (_ref) {
   var question = _ref.question,
@@ -48,7 +33,6 @@ export default (function (_ref) {
     canContactDefault = _useState4[0],
     setCanContactDefault = _useState4[1];
   var hasAutoFilledCanContactRef = useRef(false);
-  var expandedAreaRef = useRef(null);
   var onScoreSelect = useCallback(function () {
     setExpanded(true);
   }, [setExpanded]);
@@ -63,6 +47,14 @@ export default (function (_ref) {
     hasAutoFilledCanContactRef.current = true;
     setCanContactDefault(true);
   }, []);
+  var resizingHeightProps = useResizingHeight({
+    duration: function duration() {
+      return TRANSITION_DURATION;
+    },
+    timingFunction: function timingFunction() {
+      return 'ease-in-out';
+    }
+  });
   return /*#__PURE__*/React.createElement("section", {
     "aria-labelledby": "contextualSurveyQuestion"
   }, /*#__PURE__*/React.createElement(Stack, {
@@ -95,43 +87,14 @@ export default (function (_ref) {
           onScoreSelect();
         }
       }));
-    }), /*#__PURE__*/React.createElement(Transition, {
-      in: expanded,
-      timeout: TRANSITION_DURATION,
-      mountOnEnter: true
-    }, function (state) {
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          transition: "max-height ".concat(TRANSITION_DURATION, "ms ease-in-out"),
-          maxHeight: getExpandedHeight(expandedAreaRef, state)
-        },
-        ref: expandedAreaRef,
-        className: ax(["_1reo15vq _18m915vq"])
-      }, /*#__PURE__*/React.createElement(Field, {
-        name: "writtenFeedback",
-        defaultValue: "",
-        isDisabled: submitting,
-        label: textLabel
-      }, function (_ref4) {
-        var fieldProps = _ref4.fieldProps;
-        return /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
-          "aria-label": textLabel,
-          onChange: function onChange(event) {
-            fieldProps.onChange(event);
-            onFeedbackChange();
-          }
-        }));
-      }), /*#__PURE__*/React.createElement(CheckboxField, {
-        name: "canContact",
-        isDisabled: submitting,
-        defaultIsChecked: canContactDefault
-      }, function (_ref5) {
-        var fieldProps = _ref5.fieldProps;
-        return /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
-          label: "Atlassian can contact me about this feedback"
-        }));
-      }));
-    }), /*#__PURE__*/React.createElement(Box, {
+    }), /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
+      className: ax(["_1reo15vq _18m915vq"])
+    }), expanded ? /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
+      canContactDefault: canContactDefault,
+      onFeedbackChange: onFeedbackChange,
+      submitting: submitting,
+      textLabel: textLabel
+    }) : null), /*#__PURE__*/React.createElement(Box, {
       xcss: styles.buttonContainer
     }, /*#__PURE__*/React.createElement(Button, {
       isDisabled: !expanded,

package/dist/esm/new-survey/SurveyFormExpandedFeedback.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Checkbox from '@atlaskit/checkbox';
+import { CheckboxField, Field } from '@atlaskit/form';
+import Textarea from '@atlaskit/textarea';
+export function SurveyFormExpandedFeedback(_ref) {
+  var canContactDefault = _ref.canContactDefault,
+    onFeedbackChange = _ref.onFeedbackChange,
+    submitting = _ref.submitting,
+    textLabel = _ref.textLabel;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, {
+    name: "writtenFeedback",
+    defaultValue: "",
+    isDisabled: submitting,
+    label: textLabel
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps;
+    return /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
+      "aria-label": textLabel,
+      onChange: function onChange(event) {
+        fieldProps.onChange(event);
+        onFeedbackChange();
+      }
+    }));
+  }), /*#__PURE__*/React.createElement(CheckboxField, {
+    name: "canContact",
+    isDisabled: submitting,
+    defaultIsChecked: canContactDefault
+  }, function (_ref3) {
+    var fieldProps = _ref3.fieldProps;
+    return /*#__PURE__*/React.createElement(Checkbox, _extends({}, fieldProps, {
+      label: "Atlassian can contact me about this feedback"
+    }));
+  }));
+}

package/dist/types/new-survey/SurveyFormExpandedFeedback.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type SurveyFormExpandedFeedbackProps = {
+    canContactDefault: boolean;
+    onFeedbackChange: () => void;
+    submitting: boolean;
+    textLabel: string;
+};
+export declare function SurveyFormExpandedFeedback({ canContactDefault, onFeedbackChange, submitting, textLabel, }: SurveyFormExpandedFeedbackProps): React.JSX.Element;

package/dist/types-ts4.5/new-survey/SurveyFormExpandedFeedback.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type SurveyFormExpandedFeedbackProps = {
+    canContactDefault: boolean;
+    onFeedbackChange: () => void;
+    submitting: boolean;
+    textLabel: string;
+};
+export declare function SurveyFormExpandedFeedback({ canContactDefault, onFeedbackChange, submitting, textLabel, }: SurveyFormExpandedFeedbackProps): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/contextual-survey",
-	"version": "6.0.11",
+	"version": "6.1.0",
 	"description": "A React component used to ask the user for feedback",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,24 +39,22 @@
 		"@atlaskit/icon": "^34.0.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/motion": "^5.5.0",
+		"@atlaskit/motion": "^5.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^18.1.0",
+		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/textarea": "^8.2.0",
 		"@atlaskit/theme": "^23.0.0",
-		"@atlaskit/tokens": "^12.0.0",
+		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
-		"@emotion/react": "^11.7.1",
-		"react-transition-group": "^4.4.1"
+		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"react": "^18.2.0"
+		"react": "^18.2.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@testing-library/react": "^16.3.0",
-		"@types/react-transition-group": "^2.0.6"
+		"@testing-library/react": "^16.3.0"
 	},
 	"keywords": [
 		"atlaskit",
@@ -73,10 +71,5 @@
 				"spacing"
 			]
 		}
-	},
-	"platform-feature-flags": {
-		"platform_contextual_survey_use_atlaskit_motion": {
-			"type": "boolean"
-		}
 	}
 }