@atlaskit/contextual-survey 6.0.12 → 6.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/components/SurveyForm.js +2 -38
  3. package/dist/cjs/components/SurveyMarshal.compiled.css +0 -1
  4. package/dist/cjs/components/SurveyMarshal.js +15 -63
  5. package/dist/cjs/new-survey/SurveyForm.js +2 -37
  6. package/dist/es2019/components/SurveyForm.js +2 -36
  7. package/dist/es2019/components/SurveyMarshal.compiled.css +0 -1
  8. package/dist/es2019/components/SurveyMarshal.js +15 -64
  9. package/dist/es2019/new-survey/SurveyForm.js +2 -35
  10. package/dist/esm/components/SurveyForm.js +2 -38
  11. package/dist/esm/components/SurveyMarshal.compiled.css +0 -1
  12. package/dist/esm/components/SurveyMarshal.js +15 -63
  13. package/dist/esm/new-survey/SurveyForm.js +2 -37
  14. package/package.json +4 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/contextual-survey
2
2
 
3
+ ## 6.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`08f86d1686ebb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/08f86d1686ebb) -
8
+ Making library react19 compatible - Converting JSX.Element to React.JSX.Element & using
9
+ @atlaskit/motion instead of react-transition-group
10
+
3
11
  ## 6.0.12
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/components/SurveyForm.js CHANGED
@@ -13,30 +13,14 @@ var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
15
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
16
- var _reactTransitionGroup = require("react-transition-group");
17
16
  var _form = _interopRequireWildcard(require("@atlaskit/form"));
18
17
  var _heading = _interopRequireDefault(require("@atlaskit/heading"));
19
18
  var _motion = require("@atlaskit/motion");
20
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
21
19
  var _compiled = require("@atlaskit/primitives/compiled");
22
20
  var _FeedbackScoreButtons = _interopRequireDefault(require("./FeedbackScoreButtons"));
23
21
  var _SurveyFormExpandedFeedback = require("./SurveyFormExpandedFeedback");
24
22
  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); }
25
23
  var transitionBaseStyles = null;
26
- var getExpandedHeight = function getExpandedHeight(ref, state) {
27
- if (!ref.current) {
28
- return '0';
29
- }
30
- switch (state) {
31
- case 'entering':
32
- return "".concat(ref.current.scrollHeight, "px");
33
- case 'entered':
34
- // needed for TextField auto height expand
35
- return "none";
36
- default:
37
- return '0';
38
- }
39
- };
40
24
  var TRANSITION_DURATION = 200;
41
25
  var _default = exports.default = function _default(_ref) {
42
26
  var question = _ref.question,
@@ -53,7 +37,6 @@ var _default = exports.default = function _default(_ref) {
53
37
  canContactDefault = _useState4[0],
54
38
  setCanContactDefault = _useState4[1];
55
39
  var hasAutoFilledCanContactRef = (0, _react.useRef)(false);
56
- var expandedAreaRef = (0, _react.useRef)(null);
57
40
  var onScoreSelect = (0, _react.useCallback)(function () {
58
41
  setExpanded(true);
59
42
  }, [setExpanded]);
@@ -104,7 +87,7 @@ var _default = exports.default = function _default(_ref) {
104
87
  onScoreSelect();
105
88
  }
106
89
  }));
107
- }), (0, _platformFeatureFlags.fg)('platform_contextual_survey_use_atlaskit_motion') ? /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, resizingHeightProps, {
90
+ }), /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, resizingHeightProps, {
108
91
  className: (0, _runtime.ax)(["_1reo15vq _18m915vq"])
109
92
  }), expanded ? /*#__PURE__*/React.createElement(_SurveyFormExpandedFeedback.SurveyFormExpandedFeedback, {
110
93
  canContactDefault: canContactDefault,
@@ -112,25 +95,6 @@ var _default = exports.default = function _default(_ref) {
112
95
  submitting: submitting,
113
96
  textLabel: textLabel,
114
97
  textPlaceholder: textPlaceholder
115
- }) : null) : /*#__PURE__*/React.createElement(_reactTransitionGroup.Transition, {
116
- in: expanded,
117
- timeout: TRANSITION_DURATION,
118
- mountOnEnter: true
119
- }, function (state) {
120
- return /*#__PURE__*/React.createElement("div", {
121
- style: {
122
- transition: "max-height ".concat(TRANSITION_DURATION, "ms ease-in-out"),
123
- maxHeight: getExpandedHeight(expandedAreaRef, state)
124
- },
125
- ref: expandedAreaRef,
126
- className: (0, _runtime.ax)(["_1reo15vq _18m915vq"])
127
- }, /*#__PURE__*/React.createElement(_SurveyFormExpandedFeedback.SurveyFormExpandedFeedback, {
128
- canContactDefault: canContactDefault,
129
- onFeedbackChange: onFeedbackChange,
130
- submitting: submitting,
131
- textLabel: textLabel,
132
- textPlaceholder: textPlaceholder
133
- }));
134
- }));
98
+ }) : null));
135
99
  }));
136
100
  };
package/dist/cjs/components/SurveyMarshal.compiled.css CHANGED
@@ -1,5 +1,4 @@
1
1
  ._1pbyni7l{z-index:600}
2
2
  ._1xi2oahv{right:var(--ds-space-600,3pc)}
3
3
  ._94n5oahv{bottom:var(--ds-space-600,3pc)}
4
- ._k8m01rjc{transition-property:transform,opacity}
5
4
  ._kqsw1n9t{position:fixed}
package/dist/cjs/components/SurveyMarshal.js CHANGED
@@ -10,80 +10,32 @@ exports.default = SurveyMarshal;
10
10
  require("./SurveyMarshal.compiled.css");
11
11
  var React = _interopRequireWildcard(require("react"));
12
12
  var _runtime = require("@compiled/react/runtime");
13
- var _reactTransitionGroup = require("react-transition-group");
14
13
  var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
15
14
  var _slideIn = _interopRequireDefault(require("@atlaskit/motion/slide-in"));
16
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
15
  var _constants = require("@atlaskit/theme/constants");
18
16
  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); }
19
17
  // 8px is the base unit in pixels
20
18
  var surveyOffset = "var(--ds-space-600, 48px)";
21
- var animationDuration = 300;
22
- var offscreen = {
23
- // Hard-coded because there is no large enough space token and this component is not responsive.
24
- translateX: '488px',
25
- //survey container width + survey offset
26
- opacity: '0'
27
- };
28
- var getAnimationProps = function getAnimationProps(state) {
29
- switch (state) {
30
- case 'entered':
31
- {
32
- return {
33
- translateX: '0',
34
- opacity: '1'
35
- };
36
- }
37
- case 'entering':
38
- case 'unmounted':
39
- case 'exited':
40
- case 'exiting':
41
- {
42
- return offscreen;
43
- }
44
- }
45
- };
46
- var transitionBaseStyles = null;
47
19
  var marshalLayoutStyles = null;
48
20
  var marshalMotionLayerStyles = null;
49
21
  function SurveyMarshal(props) {
50
22
  var children = props.children,
51
23
  shouldShow = props.shouldShow;
52
- if ((0, _platformFeatureFlags.fg)('platform_contextual_survey_use_atlaskit_motion')) {
53
- return /*#__PURE__*/React.createElement(_exitingPersistence.default, {
54
- appear: true
55
- }, shouldShow && /*#__PURE__*/React.createElement(_slideIn.default, {
56
- key: "contextual-survey-marshal",
57
- enterFrom: "right",
58
- fade: "inout",
59
- duration: "medium"
60
- }, function (motionProps) {
61
- return /*#__PURE__*/React.createElement("div", {
62
- ref: motionProps.ref
63
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- motion keyframes
64
- ,
65
- className: (0, _runtime.ax)(["_kqsw1n9t _1xi2oahv _94n5oahv", "_1pbyni7l", motionProps.className]),
66
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- motion animation styles
67
- style: motionProps.style
68
- }, children());
69
- }));
70
- }
71
- return /*#__PURE__*/React.createElement(_reactTransitionGroup.Transition, {
72
- in: shouldShow,
73
- timeout: animationDuration,
74
- unmountOnExit: true
75
- }, function (state) {
76
- var _getAnimationProps = getAnimationProps(state),
77
- translateX = _getAnimationProps.translateX,
78
- opacity = _getAnimationProps.opacity;
24
+ return /*#__PURE__*/React.createElement(_exitingPersistence.default, {
25
+ appear: true
26
+ }, shouldShow && /*#__PURE__*/React.createElement(_slideIn.default, {
27
+ key: "contextual-survey-marshal",
28
+ enterFrom: "right",
29
+ fade: "inout",
30
+ duration: "medium"
31
+ }, function (motionProps) {
79
32
  return /*#__PURE__*/React.createElement("div", {
80
- style: {
81
- opacity: opacity,
82
- transition: "all ".concat(animationDuration, "ms ease-in-out"),
83
- zIndex: _constants.layers.flag(),
84
- transform: "translateX(".concat(translateX, ")")
85
- },
86
- className: (0, _runtime.ax)(["_kqsw1n9t _1xi2oahv _94n5oahv _k8m01rjc"])
33
+ ref: motionProps.ref
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- motion keyframes
35
+ ,
36
+ className: (0, _runtime.ax)(["_kqsw1n9t _1xi2oahv _94n5oahv", "_1pbyni7l", motionProps.className]),
37
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- motion animation styles
38
+ style: motionProps.style
87
39
  }, children());
88
- });
40
+ }));
89
41
  }
package/dist/cjs/new-survey/SurveyForm.js CHANGED
@@ -13,12 +13,10 @@ var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
15
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
16
- var _reactTransitionGroup = require("react-transition-group");
17
16
  var _new = _interopRequireDefault(require("@atlaskit/button/new"));
18
17
  var _form = _interopRequireWildcard(require("@atlaskit/form"));
19
18
  var _heading = _interopRequireDefault(require("@atlaskit/heading"));
20
19
  var _motion = require("@atlaskit/motion");
21
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
22
20
  var _compiled = require("@atlaskit/primitives/compiled");
23
21
  var _FeedbackScoreButtons = _interopRequireDefault(require("./FeedbackScoreButtons"));
24
22
  var _SurveyFormExpandedFeedback = require("./SurveyFormExpandedFeedback");
@@ -28,20 +26,6 @@ var styles = {
28
26
  buttonContainer: "_19pk1ejb",
29
27
  questionContainer: "_otyrv47k"
30
28
  };
31
- var getExpandedHeight = function getExpandedHeight(ref, state) {
32
- if (!ref.current) {
33
- return '0';
34
- }
35
- switch (state) {
36
- case 'entering':
37
- return "".concat(ref.current.scrollHeight, "px");
38
- case 'entered':
39
- // needed for TextField auto height expand
40
- return "none";
41
- default:
42
- return '0';
43
- }
44
- };
45
29
  var TRANSITION_DURATION = 200;
46
30
  var _default = exports.default = function _default(_ref) {
47
31
  var question = _ref.question,
@@ -58,7 +42,6 @@ var _default = exports.default = function _default(_ref) {
58
42
  canContactDefault = _useState4[0],
59
43
  setCanContactDefault = _useState4[1];
60
44
  var hasAutoFilledCanContactRef = (0, _react.useRef)(false);
61
- var expandedAreaRef = (0, _react.useRef)(null);
62
45
  var onScoreSelect = (0, _react.useCallback)(function () {
63
46
  setExpanded(true);
64
47
  }, [setExpanded]);
@@ -113,32 +96,14 @@ var _default = exports.default = function _default(_ref) {
113
96
  onScoreSelect();
114
97
  }
115
98
  }));
116
- }), (0, _platformFeatureFlags.fg)('platform_contextual_survey_use_atlaskit_motion') ? /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, resizingHeightProps, {
99
+ }), /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, resizingHeightProps, {
117
100
  className: (0, _runtime.ax)(["_1reo15vq _18m915vq"])
118
101
  }), expanded ? /*#__PURE__*/React.createElement(_SurveyFormExpandedFeedback.SurveyFormExpandedFeedback, {
119
102
  canContactDefault: canContactDefault,
120
103
  onFeedbackChange: onFeedbackChange,
121
104
  submitting: submitting,
122
105
  textLabel: textLabel
123
- }) : null) : /*#__PURE__*/React.createElement(_reactTransitionGroup.Transition, {
124
- in: expanded,
125
- timeout: TRANSITION_DURATION,
126
- mountOnEnter: true
127
- }, function (state) {
128
- return /*#__PURE__*/React.createElement("div", {
129
- style: {
130
- transition: "max-height ".concat(TRANSITION_DURATION, "ms ease-in-out"),
131
- maxHeight: getExpandedHeight(expandedAreaRef, state)
132
- },
133
- ref: expandedAreaRef,
134
- className: (0, _runtime.ax)(["_1reo15vq _18m915vq"])
135
- }, /*#__PURE__*/React.createElement(_SurveyFormExpandedFeedback.SurveyFormExpandedFeedback, {
136
- canContactDefault: canContactDefault,
137
- onFeedbackChange: onFeedbackChange,
138
- submitting: submitting,
139
- textLabel: textLabel
140
- }));
141
- }), /*#__PURE__*/React.createElement(_compiled.Box, {
106
+ }) : null), /*#__PURE__*/React.createElement(_compiled.Box, {
142
107
  xcss: styles.buttonContainer
143
108
  }, /*#__PURE__*/React.createElement(_new.default, {
144
109
  isDisabled: !expanded,
package/dist/es2019/components/SurveyForm.js CHANGED
@@ -4,29 +4,13 @@ import "./SurveyForm.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { useCallback, useRef, useState } from 'react';
7
- import { Transition } from 'react-transition-group';
8
7
  import Form, { Field } from '@atlaskit/form';
9
8
  import Heading from '@atlaskit/heading';
10
9
  import { useResizingHeight } from '@atlaskit/motion';
11
- import { fg } from '@atlaskit/platform-feature-flags';
12
10
  import { Stack, Text } from '@atlaskit/primitives/compiled';
13
11
  import FeedbackScoreButtons from './FeedbackScoreButtons';
14
12
  import { SurveyFormExpandedFeedback } from './SurveyFormExpandedFeedback';
15
13
  const transitionBaseStyles = null;
16
- const getExpandedHeight = (ref, state) => {
17
- if (!ref.current) {
18
- return '0';
19
- }
20
- switch (state) {
21
- case 'entering':
22
- return `${ref.current.scrollHeight}px`;
23
- case 'entered':
24
- // needed for TextField auto height expand
25
- return `none`;
26
- default:
27
- return '0';
28
- }
29
- };
30
14
  const TRANSITION_DURATION = 200;
31
15
  export default (({
32
16
  question,
@@ -38,7 +22,6 @@ export default (({
38
22
  const [expanded, setExpanded] = useState(false);
39
23
  const [canContactDefault, setCanContactDefault] = useState(false);
40
24
  const hasAutoFilledCanContactRef = useRef(false);
41
- const expandedAreaRef = useRef(null);
42
25
  const onScoreSelect = useCallback(() => {
43
26
  setExpanded(true);
44
27
  }, [setExpanded]);
@@ -84,7 +67,7 @@ export default (({
84
67
  fieldProps.onChange(score);
85
68
  onScoreSelect();
86
69
  }
87
- }))), fg('platform_contextual_survey_use_atlaskit_motion') ? /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
70
+ }))), /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
88
71
  className: ax(["_1reo15vq _18m915vq"])
89
72
  }), expanded ? /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
90
73
  canContactDefault: canContactDefault,
@@ -92,22 +75,5 @@ export default (({
92
75
  submitting: submitting,
93
76
  textLabel: textLabel,
94
77
  textPlaceholder: textPlaceholder
95
- }) : null) : /*#__PURE__*/React.createElement(Transition, {
96
- in: expanded,
97
- timeout: TRANSITION_DURATION,
98
- mountOnEnter: true
99
- }, state => /*#__PURE__*/React.createElement("div", {
100
- style: {
101
- transition: `max-height ${TRANSITION_DURATION}ms ease-in-out`,
102
- maxHeight: getExpandedHeight(expandedAreaRef, state)
103
- },
104
- ref: expandedAreaRef,
105
- className: ax(["_1reo15vq _18m915vq"])
106
- }, /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
107
- canContactDefault: canContactDefault,
108
- onFeedbackChange: onFeedbackChange,
109
- submitting: submitting,
110
- textLabel: textLabel,
111
- textPlaceholder: textPlaceholder
112
- }))))));
78
+ }) : null))));
113
79
  });
package/dist/es2019/components/SurveyMarshal.compiled.css CHANGED
@@ -1,5 +1,4 @@
1
1
  ._1pbyni7l{z-index:600}
2
2
  ._1xi2oahv{right:var(--ds-space-600,3pc)}
3
3
  ._94n5oahv{bottom:var(--ds-space-600,3pc)}
4
- ._k8m01rjc{transition-property:transform,opacity}
5
4
  ._kqsw1n9t{position:fixed}
package/dist/es2019/components/SurveyMarshal.js CHANGED
@@ -2,39 +2,11 @@
2
2
  import "./SurveyMarshal.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
- import { Transition } from 'react-transition-group';
6
5
  import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
7
6
  import SlideIn from '@atlaskit/motion/slide-in';
8
- import { fg } from '@atlaskit/platform-feature-flags';
9
7
  import { layers } from '@atlaskit/theme/constants';
10
8
  // 8px is the base unit in pixels
11
9
  const surveyOffset = "var(--ds-space-600, 48px)";
12
- const animationDuration = 300;
13
- const offscreen = {
14
- // Hard-coded because there is no large enough space token and this component is not responsive.
15
- translateX: '488px',
16
- //survey container width + survey offset
17
- opacity: '0'
18
- };
19
- const getAnimationProps = state => {
20
- switch (state) {
21
- case 'entered':
22
- {
23
- return {
24
- translateX: '0',
25
- opacity: '1'
26
- };
27
- }
28
- case 'entering':
29
- case 'unmounted':
30
- case 'exited':
31
- case 'exiting':
32
- {
33
- return offscreen;
34
- }
35
- }
36
- };
37
- const transitionBaseStyles = null;
38
10
  const marshalLayoutStyles = null;
39
11
  const marshalMotionLayerStyles = null;
40
12
  export default function SurveyMarshal(props) {
@@ -42,40 +14,19 @@ export default function SurveyMarshal(props) {
42
14
  children,
43
15
  shouldShow
44
16
  } = props;
45
- if (fg('platform_contextual_survey_use_atlaskit_motion')) {
46
- return /*#__PURE__*/React.createElement(ExitingPersistence, {
47
- appear: true
48
- }, shouldShow && /*#__PURE__*/React.createElement(SlideIn, {
49
- key: "contextual-survey-marshal",
50
- enterFrom: "right",
51
- fade: "inout",
52
- duration: "medium"
53
- }, motionProps => /*#__PURE__*/React.createElement("div", {
54
- ref: motionProps.ref
55
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- motion keyframes
56
- ,
57
- className: ax(["_kqsw1n9t _1xi2oahv _94n5oahv", "_1pbyni7l", motionProps.className]),
58
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- motion animation styles
59
- style: motionProps.style
60
- }, children())));
61
- }
62
- return /*#__PURE__*/React.createElement(Transition, {
63
- in: shouldShow,
64
- timeout: animationDuration,
65
- unmountOnExit: true
66
- }, state => {
67
- const {
68
- translateX,
69
- opacity
70
- } = getAnimationProps(state);
71
- return /*#__PURE__*/React.createElement("div", {
72
- style: {
73
- opacity: opacity,
74
- transition: `all ${animationDuration}ms ease-in-out`,
75
- zIndex: layers.flag(),
76
- transform: `translateX(${translateX})`
77
- },
78
- className: ax(["_kqsw1n9t _1xi2oahv _94n5oahv _k8m01rjc"])
79
- }, children());
80
- });
17
+ return /*#__PURE__*/React.createElement(ExitingPersistence, {
18
+ appear: true
19
+ }, shouldShow && /*#__PURE__*/React.createElement(SlideIn, {
20
+ key: "contextual-survey-marshal",
21
+ enterFrom: "right",
22
+ fade: "inout",
23
+ duration: "medium"
24
+ }, motionProps => /*#__PURE__*/React.createElement("div", {
25
+ ref: motionProps.ref
26
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- motion keyframes
27
+ ,
28
+ className: ax(["_kqsw1n9t _1xi2oahv _94n5oahv", "_1pbyni7l", motionProps.className]),
29
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- motion animation styles
30
+ style: motionProps.style
31
+ }, children())));
81
32
  }
package/dist/es2019/new-survey/SurveyForm.js CHANGED
@@ -4,12 +4,10 @@ import "./SurveyForm.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { useCallback, useRef, useState } from 'react';
7
- import { Transition } from 'react-transition-group';
8
7
  import Button from '@atlaskit/button/new';
9
8
  import Form, { Field } from '@atlaskit/form';
10
9
  import Heading from '@atlaskit/heading';
11
10
  import { useResizingHeight } from '@atlaskit/motion';
12
- import { fg } from '@atlaskit/platform-feature-flags';
13
11
  import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
14
12
  import FeedbackScoreButtons from './FeedbackScoreButtons';
15
13
  import { SurveyFormExpandedFeedback } from './SurveyFormExpandedFeedback';
@@ -18,20 +16,6 @@ const styles = {
18
16
  buttonContainer: "_19pk1ejb",
19
17
  questionContainer: "_otyrv47k"
20
18
  };
21
- const getExpandedHeight = (ref, state) => {
22
- if (!ref.current) {
23
- return '0';
24
- }
25
- switch (state) {
26
- case 'entering':
27
- return `${ref.current.scrollHeight}px`;
28
- case 'entered':
29
- // needed for TextField auto height expand
30
- return `none`;
31
- default:
32
- return '0';
33
- }
34
- };
35
19
  const TRANSITION_DURATION = 200;
36
20
  export default (({
37
21
  question,
@@ -43,7 +27,6 @@ export default (({
43
27
  const [expanded, setExpanded] = useState(false);
44
28
  const [canContactDefault, setCanContactDefault] = useState(false);
45
29
  const hasAutoFilledCanContactRef = useRef(false);
46
- const expandedAreaRef = useRef(null);
47
30
  const onScoreSelect = useCallback(() => {
48
31
  setExpanded(true);
49
32
  }, [setExpanded]);
@@ -93,30 +76,14 @@ export default (({
93
76
  fieldProps.onChange(score);
94
77
  onScoreSelect();
95
78
  }
96
- }))), fg('platform_contextual_survey_use_atlaskit_motion') ? /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
79
+ }))), /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
97
80
  className: ax(["_1reo15vq _18m915vq"])
98
81
  }), expanded ? /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
99
82
  canContactDefault: canContactDefault,
100
83
  onFeedbackChange: onFeedbackChange,
101
84
  submitting: submitting,
102
85
  textLabel: textLabel
103
- }) : null) : /*#__PURE__*/React.createElement(Transition, {
104
- in: expanded,
105
- timeout: TRANSITION_DURATION,
106
- mountOnEnter: true
107
- }, state => /*#__PURE__*/React.createElement("div", {
108
- style: {
109
- transition: `max-height ${TRANSITION_DURATION}ms ease-in-out`,
110
- maxHeight: getExpandedHeight(expandedAreaRef, state)
111
- },
112
- ref: expandedAreaRef,
113
- className: ax(["_1reo15vq _18m915vq"])
114
- }, /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
115
- canContactDefault: canContactDefault,
116
- onFeedbackChange: onFeedbackChange,
117
- submitting: submitting,
118
- textLabel: textLabel
119
- }))), /*#__PURE__*/React.createElement(Box, {
86
+ }) : null), /*#__PURE__*/React.createElement(Box, {
120
87
  xcss: styles.buttonContainer
121
88
  }, /*#__PURE__*/React.createElement(Button, {
122
89
  isDisabled: !expanded,
package/dist/esm/components/SurveyForm.js CHANGED
@@ -5,29 +5,13 @@ import "./SurveyForm.compiled.css";
5
5
  import * as React from 'react';
6
6
  import { ax, ix } from "@compiled/react/runtime";
7
7
  import { useCallback, useRef, useState } from 'react';
8
- import { Transition } from 'react-transition-group';
9
8
  import Form, { Field } from '@atlaskit/form';
10
9
  import Heading from '@atlaskit/heading';
11
10
  import { useResizingHeight } from '@atlaskit/motion';
12
- import { fg } from '@atlaskit/platform-feature-flags';
13
11
  import { Stack, Text } from '@atlaskit/primitives/compiled';
14
12
  import FeedbackScoreButtons from './FeedbackScoreButtons';
15
13
  import { SurveyFormExpandedFeedback } from './SurveyFormExpandedFeedback';
16
14
  var transitionBaseStyles = null;
17
- var getExpandedHeight = function getExpandedHeight(ref, state) {
18
- if (!ref.current) {
19
- return '0';
20
- }
21
- switch (state) {
22
- case 'entering':
23
- return "".concat(ref.current.scrollHeight, "px");
24
- case 'entered':
25
- // needed for TextField auto height expand
26
- return "none";
27
- default:
28
- return '0';
29
- }
30
- };
31
15
  var TRANSITION_DURATION = 200;
32
16
  export default (function (_ref) {
33
17
  var question = _ref.question,
@@ -44,7 +28,6 @@ export default (function (_ref) {
44
28
  canContactDefault = _useState4[0],
45
29
  setCanContactDefault = _useState4[1];
46
30
  var hasAutoFilledCanContactRef = useRef(false);
47
- var expandedAreaRef = useRef(null);
48
31
  var onScoreSelect = useCallback(function () {
49
32
  setExpanded(true);
50
33
  }, [setExpanded]);
@@ -95,7 +78,7 @@ export default (function (_ref) {
95
78
  onScoreSelect();
96
79
  }
97
80
  }));
98
- }), fg('platform_contextual_survey_use_atlaskit_motion') ? /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
81
+ }), /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
99
82
  className: ax(["_1reo15vq _18m915vq"])
100
83
  }), expanded ? /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
101
84
  canContactDefault: canContactDefault,
@@ -103,25 +86,6 @@ export default (function (_ref) {
103
86
  submitting: submitting,
104
87
  textLabel: textLabel,
105
88
  textPlaceholder: textPlaceholder
106
- }) : null) : /*#__PURE__*/React.createElement(Transition, {
107
- in: expanded,
108
- timeout: TRANSITION_DURATION,
109
- mountOnEnter: true
110
- }, function (state) {
111
- return /*#__PURE__*/React.createElement("div", {
112
- style: {
113
- transition: "max-height ".concat(TRANSITION_DURATION, "ms ease-in-out"),
114
- maxHeight: getExpandedHeight(expandedAreaRef, state)
115
- },
116
- ref: expandedAreaRef,
117
- className: ax(["_1reo15vq _18m915vq"])
118
- }, /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
119
- canContactDefault: canContactDefault,
120
- onFeedbackChange: onFeedbackChange,
121
- submitting: submitting,
122
- textLabel: textLabel,
123
- textPlaceholder: textPlaceholder
124
- }));
125
- }));
89
+ }) : null));
126
90
  }));
127
91
  });
package/dist/esm/components/SurveyMarshal.compiled.css CHANGED
@@ -1,5 +1,4 @@
1
1
  ._1pbyni7l{z-index:600}
2
2
  ._1xi2oahv{right:var(--ds-space-600,3pc)}
3
3
  ._94n5oahv{bottom:var(--ds-space-600,3pc)}
4
- ._k8m01rjc{transition-property:transform,opacity}
5
4
  ._kqsw1n9t{position:fixed}
package/dist/esm/components/SurveyMarshal.js CHANGED
@@ -2,79 +2,31 @@
2
2
  import "./SurveyMarshal.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
- import { Transition } from 'react-transition-group';
6
5
  import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
7
6
  import SlideIn from '@atlaskit/motion/slide-in';
8
- import { fg } from '@atlaskit/platform-feature-flags';
9
7
  import { layers } from '@atlaskit/theme/constants';
10
8
  // 8px is the base unit in pixels
11
9
  var surveyOffset = "var(--ds-space-600, 48px)";
12
- var animationDuration = 300;
13
- var offscreen = {
14
- // Hard-coded because there is no large enough space token and this component is not responsive.
15
- translateX: '488px',
16
- //survey container width + survey offset
17
- opacity: '0'
18
- };
19
- var getAnimationProps = function getAnimationProps(state) {
20
- switch (state) {
21
- case 'entered':
22
- {
23
- return {
24
- translateX: '0',
25
- opacity: '1'
26
- };
27
- }
28
- case 'entering':
29
- case 'unmounted':
30
- case 'exited':
31
- case 'exiting':
32
- {
33
- return offscreen;
34
- }
35
- }
36
- };
37
- var transitionBaseStyles = null;
38
10
  var marshalLayoutStyles = null;
39
11
  var marshalMotionLayerStyles = null;
40
12
  export default function SurveyMarshal(props) {
41
13
  var children = props.children,
42
14
  shouldShow = props.shouldShow;
43
- if (fg('platform_contextual_survey_use_atlaskit_motion')) {
44
- return /*#__PURE__*/React.createElement(ExitingPersistence, {
45
- appear: true
46
- }, shouldShow && /*#__PURE__*/React.createElement(SlideIn, {
47
- key: "contextual-survey-marshal",
48
- enterFrom: "right",
49
- fade: "inout",
50
- duration: "medium"
51
- }, function (motionProps) {
52
- return /*#__PURE__*/React.createElement("div", {
53
- ref: motionProps.ref
54
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- motion keyframes
55
- ,
56
- className: ax(["_kqsw1n9t _1xi2oahv _94n5oahv", "_1pbyni7l", motionProps.className]),
57
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- motion animation styles
58
- style: motionProps.style
59
- }, children());
60
- }));
61
- }
62
- return /*#__PURE__*/React.createElement(Transition, {
63
- in: shouldShow,
64
- timeout: animationDuration,
65
- unmountOnExit: true
66
- }, function (state) {
67
- var _getAnimationProps = getAnimationProps(state),
68
- translateX = _getAnimationProps.translateX,
69
- opacity = _getAnimationProps.opacity;
15
+ return /*#__PURE__*/React.createElement(ExitingPersistence, {
16
+ appear: true
17
+ }, shouldShow && /*#__PURE__*/React.createElement(SlideIn, {
18
+ key: "contextual-survey-marshal",
19
+ enterFrom: "right",
20
+ fade: "inout",
21
+ duration: "medium"
22
+ }, function (motionProps) {
70
23
  return /*#__PURE__*/React.createElement("div", {
71
- style: {
72
- opacity: opacity,
73
- transition: "all ".concat(animationDuration, "ms ease-in-out"),
74
- zIndex: layers.flag(),
75
- transform: "translateX(".concat(translateX, ")")
76
- },
77
- className: ax(["_kqsw1n9t _1xi2oahv _94n5oahv _k8m01rjc"])
24
+ ref: motionProps.ref
25
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- motion keyframes
26
+ ,
27
+ className: ax(["_kqsw1n9t _1xi2oahv _94n5oahv", "_1pbyni7l", motionProps.className]),
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- motion animation styles
29
+ style: motionProps.style
78
30
  }, children());
79
- });
31
+ }));
80
32
  }
package/dist/esm/new-survey/SurveyForm.js CHANGED
@@ -5,12 +5,10 @@ import "./SurveyForm.compiled.css";
5
5
  import * as React from 'react';
6
6
  import { ax, ix } from "@compiled/react/runtime";
7
7
  import { useCallback, useRef, useState } from 'react';
8
- import { Transition } from 'react-transition-group';
9
8
  import Button from '@atlaskit/button/new';
10
9
  import Form, { Field } from '@atlaskit/form';
11
10
  import Heading from '@atlaskit/heading';
12
11
  import { useResizingHeight } from '@atlaskit/motion';
13
- import { fg } from '@atlaskit/platform-feature-flags';
14
12
  import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
15
13
  import FeedbackScoreButtons from './FeedbackScoreButtons';
16
14
  import { SurveyFormExpandedFeedback } from './SurveyFormExpandedFeedback';
@@ -19,20 +17,6 @@ var styles = {
19
17
  buttonContainer: "_19pk1ejb",
20
18
  questionContainer: "_otyrv47k"
21
19
  };
22
- var getExpandedHeight = function getExpandedHeight(ref, state) {
23
- if (!ref.current) {
24
- return '0';
25
- }
26
- switch (state) {
27
- case 'entering':
28
- return "".concat(ref.current.scrollHeight, "px");
29
- case 'entered':
30
- // needed for TextField auto height expand
31
- return "none";
32
- default:
33
- return '0';
34
- }
35
- };
36
20
  var TRANSITION_DURATION = 200;
37
21
  export default (function (_ref) {
38
22
  var question = _ref.question,
@@ -49,7 +33,6 @@ export default (function (_ref) {
49
33
  canContactDefault = _useState4[0],
50
34
  setCanContactDefault = _useState4[1];
51
35
  var hasAutoFilledCanContactRef = useRef(false);
52
- var expandedAreaRef = useRef(null);
53
36
  var onScoreSelect = useCallback(function () {
54
37
  setExpanded(true);
55
38
  }, [setExpanded]);
@@ -104,32 +87,14 @@ export default (function (_ref) {
104
87
  onScoreSelect();
105
88
  }
106
89
  }));
107
- }), fg('platform_contextual_survey_use_atlaskit_motion') ? /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
90
+ }), /*#__PURE__*/React.createElement("div", _extends({}, resizingHeightProps, {
108
91
  className: ax(["_1reo15vq _18m915vq"])
109
92
  }), expanded ? /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
110
93
  canContactDefault: canContactDefault,
111
94
  onFeedbackChange: onFeedbackChange,
112
95
  submitting: submitting,
113
96
  textLabel: textLabel
114
- }) : null) : /*#__PURE__*/React.createElement(Transition, {
115
- in: expanded,
116
- timeout: TRANSITION_DURATION,
117
- mountOnEnter: true
118
- }, function (state) {
119
- return /*#__PURE__*/React.createElement("div", {
120
- style: {
121
- transition: "max-height ".concat(TRANSITION_DURATION, "ms ease-in-out"),
122
- maxHeight: getExpandedHeight(expandedAreaRef, state)
123
- },
124
- ref: expandedAreaRef,
125
- className: ax(["_1reo15vq _18m915vq"])
126
- }, /*#__PURE__*/React.createElement(SurveyFormExpandedFeedback, {
127
- canContactDefault: canContactDefault,
128
- onFeedbackChange: onFeedbackChange,
129
- submitting: submitting,
130
- textLabel: textLabel
131
- }));
132
- }), /*#__PURE__*/React.createElement(Box, {
97
+ }) : null), /*#__PURE__*/React.createElement(Box, {
133
98
  xcss: styles.buttonContainer
134
99
  }, /*#__PURE__*/React.createElement(Button, {
135
100
  isDisabled: !expanded,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/contextual-survey",
3
- "version": "6.0.12",
3
+ "version": "6.1.0",
4
4
  "description": "A React component used to ask the user for feedback",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -48,15 +48,13 @@
48
48
  "@atlaskit/tooltip": "^21.1.0",
49
49
  "@babel/runtime": "^7.0.0",
50
50
  "@compiled/react": "^0.20.0",
51
- "@emotion/react": "^11.7.1",
52
- "react-transition-group": "^4.4.1"
51
+ "@emotion/react": "^11.7.1"
53
52
  },
54
53
  "peerDependencies": {
55
- "react": "^18.2.0"
54
+ "react": "^18.2.0 || ^19.0.0"
56
55
  },
57
56
  "devDependencies": {
58
- "@testing-library/react": "^16.3.0",
59
- "@types/react-transition-group": "^2.0.6"
57
+ "@testing-library/react": "^16.3.0"
60
58
  },
61
59
  "keywords": [
62
60
  "atlaskit",
@@ -73,10 +71,5 @@
73
71
  "spacing"
74
72
  ]
75
73
  }
76
- },
77
- "platform-feature-flags": {
78
- "platform_contextual_survey_use_atlaskit_motion": {
79
- "type": "boolean"
80
- }
81
74
  }
82
75
  }