@atlaskit/contextual-survey 6.0.9 → 6.0.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/contextual-survey
 
+## 6.0.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.0.10
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.0.9
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -47,6 +47,9 @@
 		{
 			"path": "../../../design-system/link/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/motion/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -47,6 +47,9 @@
 		{
 			"path": "../../../design-system/link/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/motion/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../platform/feature-flags/afm-products/tsconfig.json"
 		},

package/dist/cjs/components/SurveyForm.js

@@ -14,13 +14,13 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 getExpandedHeight = function getExpandedHeight(ref, state) {
@@ -37,7 +37,7 @@ var getExpandedHeight = function getExpandedHeight(ref, state) {
       return '0';
   }
 };
-var transitionDuration = 200;
+var TRANSITION_DURATION = 200;
 var _default = exports.default = function _default(_ref) {
   var question = _ref.question,
     statement = _ref.statement,
@@ -68,6 +68,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, {
@@ -96,46 +104,33 @@ var _default = exports.default = function _default(_ref) {
           onScoreSelect();
         }
       }));
-    }), /*#__PURE__*/React.createElement(_reactTransitionGroup.Transition, {
+    }), (0, _platformFeatureFlags.fg)('platform_contextual_survey_use_atlaskit_motion') ? /*#__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,
+      textPlaceholder: textPlaceholder
+    }) : null) : /*#__PURE__*/React.createElement(_reactTransitionGroup.Transition, {
       in: expanded,
-      timeout: transitionDuration,
+      timeout: TRANSITION_DURATION,
       mountOnEnter: true
     }, function (state) {
       return /*#__PURE__*/React.createElement("div", {
         style: {
-          transition: "max-height ".concat(transitionDuration, "ms ease-in-out"),
+          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
-      }, function (_ref4) {
-        var fieldProps = _ref4.fieldProps;
-        return /*#__PURE__*/React.createElement(_textarea.default, (0, _extends2.default)({}, fieldProps, {
-          "aria-label": textLabel,
-          placeholder: textPlaceholder,
-          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(_form.FormFooter, null, /*#__PURE__*/React.createElement(_new.default, {
-        type: "submit",
-        appearance: "primary",
-        isLoading: submitting
-      }, "Submit")));
+      }, /*#__PURE__*/React.createElement(_SurveyFormExpandedFeedback.SurveyFormExpandedFeedback, {
+        canContactDefault: canContactDefault,
+        onFeedbackChange: onFeedbackChange,
+        submitting: submitting,
+        textLabel: textLabel,
+        textPlaceholder: textPlaceholder
+      }));
     }));
   }));
 };

package/dist/cjs/components/SurveyFormExpandedFeedback.js

@@ -0,0 +1,50 @@
+/* SurveyFormExpandedFeedback.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SurveyFormExpandedFeedback = SurveyFormExpandedFeedback;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _checkbox = 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,
+    textPlaceholder = _ref.textPlaceholder;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_form.Field, {
+    name: "writtenFeedback",
+    defaultValue: "",
+    isDisabled: submitting
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps;
+    return /*#__PURE__*/_react.default.createElement(_textarea.default, (0, _extends2.default)({}, fieldProps, {
+      "aria-label": textLabel,
+      placeholder: textPlaceholder,
+      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.Checkbox, (0, _extends2.default)({}, fieldProps, {
+      label: "Atlassian can contact me about this feedback"
+    }));
+  }), /*#__PURE__*/_react.default.createElement(_form.FormFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+    type: "submit",
+    appearance: "primary",
+    isLoading: submitting
+  }, "Submit")));
+}

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

@@ -1,3 +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}

package/dist/cjs/components/SurveyMarshal.js

@@ -1,6 +1,7 @@
 /* SurveyMarshal.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,6 +11,9 @@ 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
@@ -40,9 +44,30 @@ var getAnimationProps = function getAnimationProps(state) {
   }
 };
 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,

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

@@ -41,7 +41,7 @@ var getExpandedHeight = function getExpandedHeight(ref, state) {
       return '0';
   }
 };
-var transitionDuration = 200;
+var TRANSITION_DURATION = 200;
 var _default = exports.default = function _default(_ref) {
   var question = _ref.question,
     statement = _ref.statement,
@@ -106,12 +106,12 @@ var _default = exports.default = function _default(_ref) {
       }));
     }), /*#__PURE__*/React.createElement(_reactTransitionGroup.Transition, {
       in: expanded,
-      timeout: transitionDuration,
+      timeout: TRANSITION_DURATION,
       mountOnEnter: true
     }, function (state) {
       return /*#__PURE__*/React.createElement("div", {
         style: {
-          transition: "max-height ".concat(transitionDuration, "ms ease-in-out"),
+          transition: "max-height ".concat(TRANSITION_DURATION, "ms ease-in-out"),
           maxHeight: getExpandedHeight(expandedAreaRef, state)
         },
         ref: expandedAreaRef,

package/dist/es2019/components/SurveyForm.js

@@ -5,13 +5,13 @@ 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, FormFooter } from '@atlaskit/form';
+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 Textarea from '@atlaskit/textarea';
 import FeedbackScoreButtons from './FeedbackScoreButtons';
+import { SurveyFormExpandedFeedback } from './SurveyFormExpandedFeedback';
 const transitionBaseStyles = null;
 const getExpandedHeight = (ref, state) => {
   if (!ref.current) {
@@ -27,7 +27,7 @@ const getExpandedHeight = (ref, state) => {
       return '0';
   }
 };
-const transitionDuration = 200;
+const TRANSITION_DURATION = 200;
 export default (({
   question,
   statement,
@@ -53,6 +53,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, {
@@ -80,41 +84,30 @@ export default (({
       fieldProps.onChange(score);
       onScoreSelect();
     }
-  }))), /*#__PURE__*/React.createElement(Transition, {
+  }))), fg('platform_contextual_survey_use_atlaskit_motion') ? /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
+    className: ax(["_1reo15vq _18m915vq"])
+  }), expanded ? /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
+    canContactDefault: canContactDefault,
+    onFeedbackChange: onFeedbackChange,
+    submitting: submitting,
+    textLabel: textLabel,
+    textPlaceholder: textPlaceholder
+  }) : null) : /*#__PURE__*/React.createElement(Transition, {
     in: expanded,
-    timeout: transitionDuration,
+    timeout: TRANSITION_DURATION,
     mountOnEnter: true
   }, state => /*#__PURE__*/React.createElement("div", {
     style: {
-      transition: `max-height ${transitionDuration}ms ease-in-out`,
+      transition: `max-height ${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
-  }, ({
-    fieldProps
-  }) => /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
-    "aria-label": textLabel,
-    placeholder: textPlaceholder,
-    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(FormFooter, null, /*#__PURE__*/React.createElement(Button, {
-    type: "submit",
-    appearance: "primary",
-    isLoading: submitting
-  }, "Submit")))))));
+  }, /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
+    canContactDefault: canContactDefault,
+    onFeedbackChange: onFeedbackChange,
+    submitting: submitting,
+    textLabel: textLabel,
+    textPlaceholder: textPlaceholder
+  }))))));
 });

package/dist/es2019/components/SurveyFormExpandedFeedback.js

@@ -0,0 +1,42 @@
+/* SurveyFormExpandedFeedback.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import Button from '@atlaskit/button/new';
+import { Checkbox } from '@atlaskit/checkbox';
+import { CheckboxField, Field, FormFooter } from '@atlaskit/form';
+import Textarea from '@atlaskit/textarea';
+export function SurveyFormExpandedFeedback({
+  canContactDefault,
+  onFeedbackChange,
+  submitting,
+  textLabel,
+  textPlaceholder
+}) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, {
+    name: "writtenFeedback",
+    defaultValue: "",
+    isDisabled: submitting
+  }, ({
+    fieldProps
+  }) => /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
+    "aria-label": textLabel,
+    placeholder: textPlaceholder,
+    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(FormFooter, null, /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    appearance: "primary",
+    isLoading: submitting
+  }, "Submit")));
+}

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

@@ -1,3 +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}

package/dist/es2019/components/SurveyMarshal.js

@@ -3,6 +3,9 @@ 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)";
@@ -32,11 +35,30 @@ const getAnimationProps = state => {
   }
 };
 const transitionBaseStyles = null;
+const marshalLayoutStyles = null;
+const marshalMotionLayerStyles = null;
 export default function SurveyMarshal(props) {
   const {
     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,

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

@@ -31,7 +31,7 @@ const getExpandedHeight = (ref, state) => {
       return '0';
   }
 };
-const transitionDuration = 200;
+const TRANSITION_DURATION = 200;
 export default (({
   question,
   statement,
@@ -90,11 +90,11 @@ export default (({
     }
   }))), /*#__PURE__*/React.createElement(Transition, {
     in: expanded,
-    timeout: transitionDuration,
+    timeout: TRANSITION_DURATION,
     mountOnEnter: true
   }, state => /*#__PURE__*/React.createElement("div", {
     style: {
-      transition: `max-height ${transitionDuration}ms ease-in-out`,
+      transition: `max-height ${TRANSITION_DURATION}ms ease-in-out`,
       maxHeight: getExpandedHeight(expandedAreaRef, state)
     },
     ref: expandedAreaRef,

package/dist/esm/components/SurveyForm.js

@@ -6,13 +6,13 @@ 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, FormFooter } from '@atlaskit/form';
+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 Textarea from '@atlaskit/textarea';
 import FeedbackScoreButtons from './FeedbackScoreButtons';
+import { SurveyFormExpandedFeedback } from './SurveyFormExpandedFeedback';
 var transitionBaseStyles = null;
 var getExpandedHeight = function getExpandedHeight(ref, state) {
   if (!ref.current) {
@@ -28,7 +28,7 @@ var getExpandedHeight = function getExpandedHeight(ref, state) {
       return '0';
   }
 };
-var transitionDuration = 200;
+var TRANSITION_DURATION = 200;
 export default (function (_ref) {
   var question = _ref.question,
     statement = _ref.statement,
@@ -59,6 +59,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, {
@@ -87,46 +95,33 @@ export default (function (_ref) {
           onScoreSelect();
         }
       }));
-    }), /*#__PURE__*/React.createElement(Transition, {
+    }), fg('platform_contextual_survey_use_atlaskit_motion') ? /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
+      className: ax(["_1reo15vq _18m915vq"])
+    }), expanded ? /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
+      canContactDefault: canContactDefault,
+      onFeedbackChange: onFeedbackChange,
+      submitting: submitting,
+      textLabel: textLabel,
+      textPlaceholder: textPlaceholder
+    }) : null) : /*#__PURE__*/React.createElement(Transition, {
       in: expanded,
-      timeout: transitionDuration,
+      timeout: TRANSITION_DURATION,
       mountOnEnter: true
     }, function (state) {
       return /*#__PURE__*/React.createElement("div", {
         style: {
-          transition: "max-height ".concat(transitionDuration, "ms ease-in-out"),
+          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
-      }, function (_ref4) {
-        var fieldProps = _ref4.fieldProps;
-        return /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
-          "aria-label": textLabel,
-          placeholder: textPlaceholder,
-          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(FormFooter, null, /*#__PURE__*/React.createElement(Button, {
-        type: "submit",
-        appearance: "primary",
-        isLoading: submitting
-      }, "Submit")));
+      }, /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
+        canContactDefault: canContactDefault,
+        onFeedbackChange: onFeedbackChange,
+        submitting: submitting,
+        textLabel: textLabel,
+        textPlaceholder: textPlaceholder
+      }));
     }));
   }));
 });

package/dist/esm/components/SurveyFormExpandedFeedback.js

@@ -0,0 +1,43 @@
+/* SurveyFormExpandedFeedback.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import Button from '@atlaskit/button/new';
+import { Checkbox } from '@atlaskit/checkbox';
+import { CheckboxField, Field, FormFooter } 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,
+    textPlaceholder = _ref.textPlaceholder;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Field, {
+    name: "writtenFeedback",
+    defaultValue: "",
+    isDisabled: submitting
+  }, function (_ref2) {
+    var fieldProps = _ref2.fieldProps;
+    return /*#__PURE__*/React.createElement(Textarea, _extends({}, fieldProps, {
+      "aria-label": textLabel,
+      placeholder: textPlaceholder,
+      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"
+    }));
+  }), /*#__PURE__*/React.createElement(FormFooter, null, /*#__PURE__*/React.createElement(Button, {
+    type: "submit",
+    appearance: "primary",
+    isLoading: submitting
+  }, "Submit")));
+}

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

@@ -1,3 +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}

package/dist/esm/components/SurveyMarshal.js

@@ -3,6 +3,9 @@ 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)";
@@ -32,9 +35,30 @@ var getAnimationProps = function getAnimationProps(state) {
   }
 };
 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,

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

@@ -32,7 +32,7 @@ var getExpandedHeight = function getExpandedHeight(ref, state) {
       return '0';
   }
 };
-var transitionDuration = 200;
+var TRANSITION_DURATION = 200;
 export default (function (_ref) {
   var question = _ref.question,
     statement = _ref.statement,
@@ -97,12 +97,12 @@ export default (function (_ref) {
       }));
     }), /*#__PURE__*/React.createElement(Transition, {
       in: expanded,
-      timeout: transitionDuration,
+      timeout: TRANSITION_DURATION,
       mountOnEnter: true
     }, function (state) {
       return /*#__PURE__*/React.createElement("div", {
         style: {
-          transition: "max-height ".concat(transitionDuration, "ms ease-in-out"),
+          transition: "max-height ".concat(TRANSITION_DURATION, "ms ease-in-out"),
           maxHeight: getExpandedHeight(expandedAreaRef, state)
         },
         ref: expandedAreaRef,

package/dist/types/components/FeedbackScoreButtons.d.ts

@@ -6,5 +6,5 @@ interface Props {
     onChange: (value: number) => void;
     value: number | undefined;
 }
-declare const _default: ({ onChange, value }: Props) => JSX.Element;
+declare const _default: ({ onChange, value }: Props) => React.JSX.Element;
 export default _default;

package/dist/types/components/SignUpPrompt.d.ts

@@ -5,5 +5,5 @@
 interface Props {
     onAnswer: (answer: boolean) => Promise<void>;
 }
-declare const _default: ({ onAnswer }: Props) => JSX.Element;
+declare const _default: ({ onAnswer }: Props) => React.JSX.Element;
 export default _default;

package/dist/types/components/SuccessContainer.d.ts

@@ -1,5 +1,5 @@
 interface Props {
     children: React.ReactNode;
 }
-declare const _default: ({ children }: Props) => JSX.Element;
+declare const _default: ({ children }: Props) => React.JSX.Element;
 export default _default;

package/dist/types/components/SurveyContainer.d.ts

@@ -6,5 +6,5 @@ interface Props {
     children: React.ReactNode;
     onDismiss: () => void;
 }
-declare const _default: ({ children, onDismiss }: Props) => JSX.Element;
+declare const _default: ({ children, onDismiss }: Props) => React.JSX.Element;
 export default _default;

package/dist/types/components/SurveyForm.d.ts

@@ -7,5 +7,5 @@ interface Props {
     textLabel: string;
     textPlaceholder: string;
 }
-declare const _default: ({ question, statement, textPlaceholder, textLabel, onSubmit, }: Props) => JSX.Element;
+declare const _default: ({ question, statement, textPlaceholder, textLabel, onSubmit, }: Props) => React.JSX.Element;
 export default _default;

package/dist/types/components/SurveyFormExpandedFeedback.d.ts

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

package/dist/types/components/SurveyMarshal.d.ts

@@ -12,5 +12,5 @@ type Props = {
     /** Whether the form should be rendered */
     shouldShow: boolean;
 };
-export default function SurveyMarshal(props: Props): JSX.Element;
+export default function SurveyMarshal(props: Props): React.JSX.Element;
 export {};

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

@@ -7,5 +7,5 @@ interface Props {
     scoreSubtext?: Array<string>;
     value: number | undefined;
 }
-declare const _default: ({ onChange, value, scoreSubtext }: Props) => JSX.Element;
+declare const _default: ({ onChange, value, scoreSubtext }: Props) => React.JSX.Element;
 export default _default;

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

@@ -5,5 +5,5 @@
 interface Props {
     onAnswer: (answer: boolean) => Promise<void>;
 }
-declare const _default: ({ onAnswer }: Props) => JSX.Element;
+declare const _default: ({ onAnswer }: Props) => React.JSX.Element;
 export default _default;

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

@@ -1,5 +1,5 @@
 interface Props {
     children: React.ReactNode;
 }
-declare const _default: ({ children }: Props) => JSX.Element;
+declare const _default: ({ children }: Props) => React.JSX.Element;
 export default _default;

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

@@ -7,5 +7,5 @@ interface Props {
     headerImage?: string;
     onDismiss: () => void;
 }
-declare const _default: ({ children, onDismiss, headerImage }: Props) => JSX.Element;
+declare const _default: ({ children, onDismiss, headerImage }: Props) => React.JSX.Element;
 export default _default;

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

@@ -7,5 +7,5 @@ interface Props {
     statement?: string;
     textLabel: string;
 }
-declare const _default: ({ question, statement, textLabel, scoreSubtext, onSubmit }: Props) => JSX.Element;
+declare const _default: ({ question, statement, textLabel, scoreSubtext, onSubmit, }: Props) => React.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/FeedbackScoreButtons.d.ts

@@ -6,5 +6,5 @@ interface Props {
     onChange: (value: number) => void;
     value: number | undefined;
 }
-declare const _default: ({ onChange, value }: Props) => JSX.Element;
+declare const _default: ({ onChange, value }: Props) => React.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/SignUpPrompt.d.ts

@@ -5,5 +5,5 @@
 interface Props {
     onAnswer: (answer: boolean) => Promise<void>;
 }
-declare const _default: ({ onAnswer }: Props) => JSX.Element;
+declare const _default: ({ onAnswer }: Props) => React.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/SuccessContainer.d.ts

@@ -1,5 +1,5 @@
 interface Props {
     children: React.ReactNode;
 }
-declare const _default: ({ children }: Props) => JSX.Element;
+declare const _default: ({ children }: Props) => React.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/SurveyContainer.d.ts

@@ -6,5 +6,5 @@ interface Props {
     children: React.ReactNode;
     onDismiss: () => void;
 }
-declare const _default: ({ children, onDismiss }: Props) => JSX.Element;
+declare const _default: ({ children, onDismiss }: Props) => React.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/SurveyForm.d.ts

@@ -7,5 +7,5 @@ interface Props {
     textLabel: string;
     textPlaceholder: string;
 }
-declare const _default: ({ question, statement, textPlaceholder, textLabel, onSubmit, }: Props) => JSX.Element;
+declare const _default: ({ question, statement, textPlaceholder, textLabel, onSubmit, }: Props) => React.JSX.Element;
 export default _default;

package/dist/types-ts4.5/components/SurveyFormExpandedFeedback.d.ts

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

package/dist/types-ts4.5/components/SurveyMarshal.d.ts

@@ -12,5 +12,5 @@ type Props = {
     /** Whether the form should be rendered */
     shouldShow: boolean;
 };
-export default function SurveyMarshal(props: Props): JSX.Element;
+export default function SurveyMarshal(props: Props): React.JSX.Element;
 export {};

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

@@ -7,5 +7,5 @@ interface Props {
     scoreSubtext?: Array<string>;
     value: number | undefined;
 }
-declare const _default: ({ onChange, value, scoreSubtext }: Props) => JSX.Element;
+declare const _default: ({ onChange, value, scoreSubtext }: Props) => React.JSX.Element;
 export default _default;

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

@@ -5,5 +5,5 @@
 interface Props {
     onAnswer: (answer: boolean) => Promise<void>;
 }
-declare const _default: ({ onAnswer }: Props) => JSX.Element;
+declare const _default: ({ onAnswer }: Props) => React.JSX.Element;
 export default _default;

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

@@ -1,5 +1,5 @@
 interface Props {
     children: React.ReactNode;
 }
-declare const _default: ({ children }: Props) => JSX.Element;
+declare const _default: ({ children }: Props) => React.JSX.Element;
 export default _default;

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

@@ -7,5 +7,5 @@ interface Props {
     headerImage?: string;
     onDismiss: () => void;
 }
-declare const _default: ({ children, onDismiss, headerImage }: Props) => JSX.Element;
+declare const _default: ({ children, onDismiss, headerImage }: Props) => React.JSX.Element;
 export default _default;

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

@@ -7,5 +7,5 @@ interface Props {
     statement?: string;
     textLabel: string;
 }
-declare const _default: ({ question, statement, textLabel, scoreSubtext, onSubmit }: Props) => JSX.Element;
+declare const _default: ({ question, statement, textLabel, scoreSubtext, onSubmit, }: Props) => React.JSX.Element;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/contextual-survey",
-	"version": "6.0.9",
+	"version": "6.0.11",
 	"description": "A React component used to ask the user for feedback",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,19 +31,20 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/button": "^23.10.0",
+		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/checkbox": "^17.3.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/heading": "^5.3.0",
+		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/icon": "^34.0.0",
 		"@atlaskit/image": "^3.0.0",
-		"@atlaskit/link": "^3.3.0",
+		"@atlaskit/link": "^3.4.0",
+		"@atlaskit/motion": "^5.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/textarea": "^8.2.0",
-		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tokens": "^11.4.0",
+		"@atlaskit/theme": "^23.0.0",
+		"@atlaskit/tokens": "^12.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -72,5 +73,10 @@
 				"spacing"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform_contextual_survey_use_atlaskit_motion": {
+			"type": "boolean"
+		}
 	}
 }