@atlaskit/inline-edit 13.7.4 → 13.7.6

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 (21) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/inline-edit.js +5 -8
  3. package/dist/cjs/inline-editable-textfield.js +27 -35
  4. package/dist/cjs/internal/buttons.js +1 -3
  5. package/dist/cjs/internal/read-view.js +4 -4
  6. package/dist/es2019/inline-edit.js +5 -6
  7. package/dist/es2019/inline-editable-textfield.js +24 -35
  8. package/dist/es2019/internal/buttons.js +1 -3
  9. package/dist/es2019/internal/read-view.js +4 -4
  10. package/dist/esm/inline-edit.js +5 -8
  11. package/dist/esm/inline-editable-textfield.js +24 -36
  12. package/dist/esm/internal/buttons.js +1 -3
  13. package/dist/esm/internal/read-view.js +4 -4
  14. package/dist/types/inline-editable-textfield.d.ts +2 -2
  15. package/dist/types-ts4.5/inline-editable-textfield.d.ts +2 -2
  16. package/package.json +7 -7
  17. package/dist/cjs/internal/constants.js +0 -9
  18. package/dist/es2019/internal/constants.js +0 -3
  19. package/dist/esm/internal/constants.js +0 -3
  20. package/dist/types/internal/constants.d.ts +0 -2
  21. package/dist/types-ts4.5/internal/constants.d.ts +0 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/inline-edit
2
2
 
3
+ ## 13.7.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 13.7.5
10
+
11
+ ### Patch Changes
12
+
13
+ - [`ccf8247b000e5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ccf8247b000e5) -
14
+ Changes to spacing and typography internal styles for improved compatiblity with
15
+ `@atlaskit/primitives`. Examples in documentation have updated to reflect recommended approach to
16
+ compose primitives.
17
+
3
18
  ## 13.7.4
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/inline-edit.js CHANGED
@@ -11,7 +11,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
11
11
  var _react = _interopRequireWildcard(require("react"));
12
12
  var _react2 = require("@emotion/react");
13
13
  var _analyticsNext = require("@atlaskit/analytics-next");
14
- var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
15
14
  var _Field = _interopRequireDefault(require("@atlaskit/form/Field"));
16
15
  var _Form = _interopRequireDefault(require("@atlaskit/form/Form"));
17
16
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -34,7 +33,7 @@ var fieldStyles = (0, _react2.css)({
34
33
  var analyticsAttributes = {
35
34
  componentName: 'inlineEdit',
36
35
  packageName: "@atlaskit/inline-edit",
37
- packageVersion: "13.7.4"
36
+ packageVersion: "13.7.6"
38
37
  };
39
38
  var InnerInlineEdit = function InnerInlineEdit(props) {
40
39
  var _props$startWithEditV = props.startWithEditViewOpen,
@@ -63,10 +62,8 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
63
62
  editView = props.editView,
64
63
  analyticsContext = props.analyticsContext,
65
64
  providedOnConfirm = props.onConfirm,
66
- _props$onCancel = props.onCancel,
67
- providedOnCancel = _props$onCancel === void 0 ? _noop.default : _props$onCancel,
68
- _props$onEdit = props.onEdit,
69
- providedOnEdit = _props$onEdit === void 0 ? _noop.default : _props$onEdit,
65
+ providedOnCancel = props.onCancel,
66
+ providedOnEdit = props.onEdit,
70
67
  testId = props.testId;
71
68
  var wasFocusReceivedSinceLastBlurRef = (0, _react.useRef)(false);
72
69
  var isControlled = typeof isEditing === 'undefined';
@@ -84,13 +81,13 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
84
81
  if (isControlled) {
85
82
  setEditingState(false);
86
83
  }
87
- providedOnCancel();
84
+ providedOnCancel === null || providedOnCancel === void 0 || providedOnCancel();
88
85
  }, [isControlled, providedOnCancel]);
89
86
  var onEditRequested = (0, _react.useCallback)(function () {
90
87
  if (isControlled) {
91
88
  setEditingState(true);
92
89
  }
93
- providedOnEdit();
90
+ providedOnEdit === null || providedOnEdit === void 0 || providedOnEdit();
94
91
  if (shouldBeEditing && editViewRef.current) {
95
92
  editViewRef.current.focus();
96
93
  }
package/dist/cjs/inline-editable-textfield.js CHANGED
@@ -1,79 +1,71 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = void 0;
8
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
10
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
- var _react = require("react");
11
- var _react2 = require("@emotion/react");
11
+ var _react = _interopRequireWildcard(require("react"));
12
12
  var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
13
13
  var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
14
+ var _primitives = require("@atlaskit/primitives");
14
15
  var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
15
16
  var _colors = require("@atlaskit/theme/colors");
16
17
  var _inlineEdit = _interopRequireDefault(require("./inline-edit"));
17
- var _constants = require("./internal/constants");
18
18
  var _excluded = ["errorMessage", "isInvalid"];
19
- /**
20
- * @jsxRuntime classic
21
- * @jsx jsx
22
- */
23
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
24
- var errorIconContainerStyles = (0, _react2.css)({
25
- paddingInlineEnd: "var(--ds-space-075, 6px)",
26
- lineHeight: '100%'
19
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
21
+ var errorIconContainerStyles = (0, _primitives.xcss)({
22
+ lineHeight: '100%',
23
+ paddingInlineEnd: 'space.075'
27
24
  });
28
- var readViewForTextFieldStyles = (0, _react2.css)({
25
+ var readViewForTextFieldStyles = (0, _primitives.xcss)({
29
26
  display: 'flex',
27
+ font: 'font.body',
30
28
  maxWidth: '100%',
31
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
32
- minHeight: "".concat(8 * 2.5 / _constants.fontSize, "em"),
33
- padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)"),
34
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
35
- fontSize: _constants.fontSize,
36
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
37
- lineHeight: 8 * 2.5 / _constants.fontSize,
29
+ paddingBlock: 'space.100',
30
+ paddingInline: 'space.075',
38
31
  wordBreak: 'break-word'
39
32
  });
40
- var compactStyles = (0, _react2.css)({
41
- padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
33
+ var compactStyles = (0, _primitives.xcss)({
34
+ paddingBlock: 'space.050',
35
+ paddingInline: 'space.075'
42
36
  });
43
- var noop = function noop() {};
44
37
  var InlineEditableTextfield = function InlineEditableTextfield(props) {
45
38
  var _props$isCompact = props.isCompact,
46
39
  isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
47
40
  defaultValue = props.defaultValue,
48
41
  placeholder = props.placeholder,
49
42
  testId = props.testId,
50
- _props$onCancel = props.onCancel,
51
- providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel;
43
+ providedOnCancel = props.onCancel;
52
44
  var textFieldRef = (0, _react.useRef)();
53
45
  var onCancel = (0, _react.useCallback)(function () {
54
46
  if (textFieldRef.current) {
55
47
  textFieldRef.current.value = defaultValue || '';
56
48
  }
57
- providedOnCancel();
49
+ providedOnCancel === null || providedOnCancel === void 0 || providedOnCancel();
58
50
  }, [defaultValue, providedOnCancel]);
59
- return (0, _react2.jsx)(_inlineEdit.default, (0, _extends2.default)({}, props, {
51
+ return /*#__PURE__*/_react.default.createElement(_inlineEdit.default, (0, _extends2.default)({}, props, {
60
52
  onCancel: onCancel,
61
53
  defaultValue: defaultValue,
62
54
  editView: function editView(_ref) {
63
55
  var errorMessage = _ref.errorMessage,
64
56
  isInvalid = _ref.isInvalid,
65
57
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
66
- return (0, _react2.jsx)(_inlineDialog.default, {
58
+ return /*#__PURE__*/_react.default.createElement(_inlineDialog.default, {
67
59
  isOpen: isInvalid,
68
- content: (0, _react2.jsx)("div", {
60
+ content: /*#__PURE__*/_react.default.createElement("div", {
69
61
  id: "error-message"
70
62
  }, errorMessage),
71
63
  placement: "right"
72
- }, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, props, {
64
+ }, /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, props, {
73
65
  ref: textFieldRef,
74
- elemAfterInput: isInvalid && (0, _react2.jsx)("div", {
75
- css: errorIconContainerStyles
76
- }, (0, _react2.jsx)(_error.default, {
66
+ elemAfterInput: isInvalid && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
67
+ xcss: errorIconContainerStyles
68
+ }, /*#__PURE__*/_react.default.createElement(_error.default, {
77
69
  label: "error",
78
70
  primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
79
71
  })),
@@ -83,10 +75,10 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
83
75
  })));
84
76
  },
85
77
  readView: function readView() {
86
- return (0, _react2.jsx)("div", {
87
- css: [readViewForTextFieldStyles, isCompact && compactStyles],
78
+ return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
79
+ xcss: [readViewForTextFieldStyles, isCompact && compactStyles],
88
80
  "data-compact": isCompact,
89
- "data-testid": testId && "read-view-".concat(testId)
81
+ testId: testId && "read-view-".concat(testId)
90
82
  }, defaultValue || placeholder);
91
83
  }
92
84
  }));
package/dist/cjs/internal/buttons.js CHANGED
@@ -11,7 +11,6 @@ var _new = require("@atlaskit/button/new");
11
11
  var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
12
12
  var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
13
13
  var _colors = require("@atlaskit/theme/colors");
14
- var _constants = require("./constants");
15
14
  /* eslint-disable @atlaskit/design-system/no-nested-styles */
16
15
  /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
17
16
  /**
@@ -36,8 +35,7 @@ var buttonWrapperBaseStyles = (0, _react.css)({
36
35
  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
37
36
  borderRadius: "var(--ds-border-radius, 3px)",
38
37
  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")"),
39
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
40
- fontSize: _constants.fontSize,
38
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
41
39
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
42
40
  '&:last-child': {
43
41
  marginInlineStart: "var(--ds-space-050, 4px)"
package/dist/cjs/internal/read-view.js CHANGED
@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
9
9
  var _react2 = require("@emotion/react");
10
10
  var _primitives = require("@atlaskit/primitives");
11
11
  var _colors = require("@atlaskit/theme/colors");
12
- var _constants = require("./constants");
13
12
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
13
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
15
14
  /**
@@ -48,8 +47,7 @@ var readViewWrapperStyles = (0, _react2.css)({
48
47
  width: 'auto',
49
48
  maxWidth: '100%',
50
49
  border: '2px solid transparent',
51
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
52
- borderRadius: _constants.borderRadius,
50
+ borderRadius: "var(--ds-border-radius, 3px)",
53
51
  transition: 'background 0.2s',
54
52
  '&:hover': {
55
53
  background: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30, ")")
@@ -74,7 +72,9 @@ var ReadView = function ReadView(_ref) {
74
72
  };
75
73
  var onReadViewClick = function onReadViewClick(event) {
76
74
  var element = event.target;
77
- /** If a link is clicked in the read view, default action should be taken */
75
+ /**
76
+ * If a link is clicked in the read view, default action should be taken
77
+ */
78
78
  if (element.tagName.toLowerCase() !== 'a' && !mouseHasMovedAfterMouseDown(event)) {
79
79
  event.preventDefault();
80
80
  onEditRequested();
package/dist/es2019/inline-edit.js CHANGED
@@ -7,7 +7,6 @@ import React, { useCallback, useRef, useState } from 'react';
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
10
- import __noop from '@atlaskit/ds-lib/noop';
11
10
  import Field from '@atlaskit/form/Field';
12
11
  import Form from '@atlaskit/form/Form';
13
12
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -23,7 +22,7 @@ const fieldStyles = css({
23
22
  const analyticsAttributes = {
24
23
  componentName: 'inlineEdit',
25
24
  packageName: "@atlaskit/inline-edit",
26
- packageVersion: "13.7.4"
25
+ packageVersion: "13.7.6"
27
26
  };
28
27
  const InnerInlineEdit = props => {
29
28
  const {
@@ -44,8 +43,8 @@ const InnerInlineEdit = props => {
44
43
  editView,
45
44
  analyticsContext,
46
45
  onConfirm: providedOnConfirm,
47
- onCancel: providedOnCancel = __noop,
48
- onEdit: providedOnEdit = __noop,
46
+ onCancel: providedOnCancel,
47
+ onEdit: providedOnEdit,
49
48
  testId
50
49
  } = props;
51
50
  const wasFocusReceivedSinceLastBlurRef = useRef(false);
@@ -62,13 +61,13 @@ const InnerInlineEdit = props => {
62
61
  if (isControlled) {
63
62
  setEditingState(false);
64
63
  }
65
- providedOnCancel();
64
+ providedOnCancel === null || providedOnCancel === void 0 ? void 0 : providedOnCancel();
66
65
  }, [isControlled, providedOnCancel]);
67
66
  const onEditRequested = useCallback(() => {
68
67
  if (isControlled) {
69
68
  setEditingState(true);
70
69
  }
71
- providedOnEdit();
70
+ providedOnEdit === null || providedOnEdit === void 0 ? void 0 : providedOnEdit();
72
71
  if (shouldBeEditing && editViewRef.current) {
73
72
  editViewRef.current.focus();
74
73
  }
package/dist/es2019/inline-editable-textfield.js CHANGED
@@ -1,71 +1,60 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- */
6
- import { useCallback, useRef } from 'react';
7
-
8
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
- import { css, jsx } from '@emotion/react';
2
+ import React, { useCallback, useRef } from 'react';
10
3
  import ErrorIcon from '@atlaskit/icon/glyph/error';
11
4
  import InlineDialog from '@atlaskit/inline-dialog';
5
+ import { Box, xcss } from '@atlaskit/primitives';
12
6
  import Textfield from '@atlaskit/textfield';
13
7
  import { R400 } from '@atlaskit/theme/colors';
14
8
  import InlineEdit from './inline-edit';
15
- import { fontSize } from './internal/constants';
16
- const errorIconContainerStyles = css({
17
- paddingInlineEnd: "var(--ds-space-075, 6px)",
18
- lineHeight: '100%'
9
+ const errorIconContainerStyles = xcss({
10
+ lineHeight: '100%',
11
+ paddingInlineEnd: 'space.075'
19
12
  });
20
- const readViewForTextFieldStyles = css({
13
+ const readViewForTextFieldStyles = xcss({
21
14
  display: 'flex',
15
+ font: 'font.body',
22
16
  maxWidth: '100%',
23
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
24
- minHeight: `${8 * 2.5 / fontSize}em`,
25
- padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}`,
26
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
27
- fontSize: fontSize,
28
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
29
- lineHeight: 8 * 2.5 / fontSize,
17
+ paddingBlock: 'space.100',
18
+ paddingInline: 'space.075',
30
19
  wordBreak: 'break-word'
31
20
  });
32
- const compactStyles = css({
33
- padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-075, 6px)"}`
21
+ const compactStyles = xcss({
22
+ paddingBlock: 'space.050',
23
+ paddingInline: 'space.075'
34
24
  });
35
- const noop = () => {};
36
25
  const InlineEditableTextfield = props => {
37
26
  const {
38
27
  isCompact = false,
39
28
  defaultValue,
40
29
  placeholder,
41
30
  testId,
42
- onCancel: providedOnCancel = noop
31
+ onCancel: providedOnCancel
43
32
  } = props;
44
33
  const textFieldRef = useRef();
45
34
  const onCancel = useCallback(() => {
46
35
  if (textFieldRef.current) {
47
36
  textFieldRef.current.value = defaultValue || '';
48
37
  }
49
- providedOnCancel();
38
+ providedOnCancel === null || providedOnCancel === void 0 ? void 0 : providedOnCancel();
50
39
  }, [defaultValue, providedOnCancel]);
51
- return jsx(InlineEdit, _extends({}, props, {
40
+ return /*#__PURE__*/React.createElement(InlineEdit, _extends({}, props, {
52
41
  onCancel: onCancel,
53
42
  defaultValue: defaultValue,
54
43
  editView: ({
55
44
  errorMessage,
56
45
  isInvalid,
57
46
  ...props
58
- }) => jsx(InlineDialog, {
47
+ }) => /*#__PURE__*/React.createElement(InlineDialog, {
59
48
  isOpen: isInvalid,
60
- content: jsx("div", {
49
+ content: /*#__PURE__*/React.createElement("div", {
61
50
  id: "error-message"
62
51
  }, errorMessage),
63
52
  placement: "right"
64
- }, jsx(Textfield, _extends({}, props, {
53
+ }, /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
65
54
  ref: textFieldRef,
66
- elemAfterInput: isInvalid && jsx("div", {
67
- css: errorIconContainerStyles
68
- }, jsx(ErrorIcon, {
55
+ elemAfterInput: isInvalid && /*#__PURE__*/React.createElement(Box, {
56
+ xcss: errorIconContainerStyles
57
+ }, /*#__PURE__*/React.createElement(ErrorIcon, {
69
58
  label: "error",
70
59
  primaryColor: `var(--ds-icon-danger, ${R400})`
71
60
  })),
@@ -73,10 +62,10 @@ const InlineEditableTextfield = props => {
73
62
  isCompact: isCompact,
74
63
  autoFocus: true
75
64
  }))),
76
- readView: () => jsx("div", {
77
- css: [readViewForTextFieldStyles, isCompact && compactStyles],
65
+ readView: () => /*#__PURE__*/React.createElement(Box, {
66
+ xcss: [readViewForTextFieldStyles, isCompact && compactStyles],
78
67
  "data-compact": isCompact,
79
- "data-testid": testId && `read-view-${testId}`
68
+ testId: testId && `read-view-${testId}`
80
69
  }, defaultValue || placeholder)
81
70
  }));
82
71
  };
package/dist/es2019/internal/buttons.js CHANGED
@@ -12,7 +12,6 @@ import { IconButton } from '@atlaskit/button/new';
12
12
  import ConfirmIcon from '@atlaskit/icon/glyph/check';
13
13
  import CancelIcon from '@atlaskit/icon/glyph/cross';
14
14
  import { B400, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
15
- import { fontSize } from './constants';
16
15
  const buttonsContainerStyles = css({
17
16
  display: 'flex',
18
17
  position: 'absolute',
@@ -28,8 +27,7 @@ const buttonWrapperBaseStyles = css({
28
27
  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
29
28
  borderRadius: "var(--ds-border-radius, 3px)",
30
29
  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
31
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
32
- fontSize: fontSize,
30
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
33
31
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
34
32
  '&:last-child': {
35
33
  marginInlineStart: "var(--ds-space-050, 4px)"
package/dist/es2019/internal/read-view.js CHANGED
@@ -8,7 +8,6 @@ import React, { useRef } from 'react';
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import { Pressable, xcss } from '@atlaskit/primitives';
10
10
  import { N30 } from '@atlaskit/theme/colors';
11
- import { borderRadius } from './constants';
12
11
  const readViewContainerStyles = css({
13
12
  lineHeight: 1
14
13
  });
@@ -38,8 +37,7 @@ const readViewWrapperStyles = css({
38
37
  width: 'auto',
39
38
  maxWidth: '100%',
40
39
  border: '2px solid transparent',
41
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
42
- borderRadius: borderRadius,
40
+ borderRadius: "var(--ds-border-radius, 3px)",
43
41
  transition: 'background 0.2s',
44
42
  '&:hover': {
45
43
  background: `var(--ds-background-neutral-subtle-hovered, ${N30})`
@@ -65,7 +63,9 @@ const ReadView = ({
65
63
  };
66
64
  const onReadViewClick = event => {
67
65
  const element = event.target;
68
- /** If a link is clicked in the read view, default action should be taken */
66
+ /**
67
+ * If a link is clicked in the read view, default action should be taken
68
+ */
69
69
  if (element.tagName.toLowerCase() !== 'a' && !mouseHasMovedAfterMouseDown(event)) {
70
70
  event.preventDefault();
71
71
  onEditRequested();
package/dist/esm/inline-edit.js CHANGED
@@ -11,7 +11,6 @@ import React, { useCallback, useRef, useState } from 'react';
11
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
12
  import { css, jsx } from '@emotion/react';
13
13
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
14
- import __noop from '@atlaskit/ds-lib/noop';
15
14
  import Field from '@atlaskit/form/Field';
16
15
  import Form from '@atlaskit/form/Form';
17
16
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -27,7 +26,7 @@ var fieldStyles = css({
27
26
  var analyticsAttributes = {
28
27
  componentName: 'inlineEdit',
29
28
  packageName: "@atlaskit/inline-edit",
30
- packageVersion: "13.7.4"
29
+ packageVersion: "13.7.6"
31
30
  };
32
31
  var InnerInlineEdit = function InnerInlineEdit(props) {
33
32
  var _props$startWithEditV = props.startWithEditViewOpen,
@@ -56,10 +55,8 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
56
55
  editView = props.editView,
57
56
  analyticsContext = props.analyticsContext,
58
57
  providedOnConfirm = props.onConfirm,
59
- _props$onCancel = props.onCancel,
60
- providedOnCancel = _props$onCancel === void 0 ? __noop : _props$onCancel,
61
- _props$onEdit = props.onEdit,
62
- providedOnEdit = _props$onEdit === void 0 ? __noop : _props$onEdit,
58
+ providedOnCancel = props.onCancel,
59
+ providedOnEdit = props.onEdit,
63
60
  testId = props.testId;
64
61
  var wasFocusReceivedSinceLastBlurRef = useRef(false);
65
62
  var isControlled = typeof isEditing === 'undefined';
@@ -77,13 +74,13 @@ var InnerInlineEdit = function InnerInlineEdit(props) {
77
74
  if (isControlled) {
78
75
  setEditingState(false);
79
76
  }
80
- providedOnCancel();
77
+ providedOnCancel === null || providedOnCancel === void 0 || providedOnCancel();
81
78
  }, [isControlled, providedOnCancel]);
82
79
  var onEditRequested = useCallback(function () {
83
80
  if (isControlled) {
84
81
  setEditingState(true);
85
82
  }
86
- providedOnEdit();
83
+ providedOnEdit === null || providedOnEdit === void 0 || providedOnEdit();
87
84
  if (shouldBeEditing && editViewRef.current) {
88
85
  editViewRef.current.focus();
89
86
  }
package/dist/esm/inline-editable-textfield.js CHANGED
@@ -1,73 +1,61 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  var _excluded = ["errorMessage", "isInvalid"];
4
- /**
5
- * @jsxRuntime classic
6
- * @jsx jsx
7
- */
8
- import { useCallback, useRef } from 'react';
9
-
10
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
11
- import { css, jsx } from '@emotion/react';
4
+ import React, { useCallback, useRef } from 'react';
12
5
  import ErrorIcon from '@atlaskit/icon/glyph/error';
13
6
  import InlineDialog from '@atlaskit/inline-dialog';
7
+ import { Box, xcss } from '@atlaskit/primitives';
14
8
  import Textfield from '@atlaskit/textfield';
15
9
  import { R400 } from '@atlaskit/theme/colors';
16
10
  import InlineEdit from './inline-edit';
17
- import { fontSize } from './internal/constants';
18
- var errorIconContainerStyles = css({
19
- paddingInlineEnd: "var(--ds-space-075, 6px)",
20
- lineHeight: '100%'
11
+ var errorIconContainerStyles = xcss({
12
+ lineHeight: '100%',
13
+ paddingInlineEnd: 'space.075'
21
14
  });
22
- var readViewForTextFieldStyles = css({
15
+ var readViewForTextFieldStyles = xcss({
23
16
  display: 'flex',
17
+ font: 'font.body',
24
18
  maxWidth: '100%',
25
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
26
- minHeight: "".concat(8 * 2.5 / fontSize, "em"),
27
- padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)"),
28
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
29
- fontSize: fontSize,
30
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
31
- lineHeight: 8 * 2.5 / fontSize,
19
+ paddingBlock: 'space.100',
20
+ paddingInline: 'space.075',
32
21
  wordBreak: 'break-word'
33
22
  });
34
- var compactStyles = css({
35
- padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-075, 6px)")
23
+ var compactStyles = xcss({
24
+ paddingBlock: 'space.050',
25
+ paddingInline: 'space.075'
36
26
  });
37
- var noop = function noop() {};
38
27
  var InlineEditableTextfield = function InlineEditableTextfield(props) {
39
28
  var _props$isCompact = props.isCompact,
40
29
  isCompact = _props$isCompact === void 0 ? false : _props$isCompact,
41
30
  defaultValue = props.defaultValue,
42
31
  placeholder = props.placeholder,
43
32
  testId = props.testId,
44
- _props$onCancel = props.onCancel,
45
- providedOnCancel = _props$onCancel === void 0 ? noop : _props$onCancel;
33
+ providedOnCancel = props.onCancel;
46
34
  var textFieldRef = useRef();
47
35
  var onCancel = useCallback(function () {
48
36
  if (textFieldRef.current) {
49
37
  textFieldRef.current.value = defaultValue || '';
50
38
  }
51
- providedOnCancel();
39
+ providedOnCancel === null || providedOnCancel === void 0 || providedOnCancel();
52
40
  }, [defaultValue, providedOnCancel]);
53
- return jsx(InlineEdit, _extends({}, props, {
41
+ return /*#__PURE__*/React.createElement(InlineEdit, _extends({}, props, {
54
42
  onCancel: onCancel,
55
43
  defaultValue: defaultValue,
56
44
  editView: function editView(_ref) {
57
45
  var errorMessage = _ref.errorMessage,
58
46
  isInvalid = _ref.isInvalid,
59
47
  props = _objectWithoutProperties(_ref, _excluded);
60
- return jsx(InlineDialog, {
48
+ return /*#__PURE__*/React.createElement(InlineDialog, {
61
49
  isOpen: isInvalid,
62
- content: jsx("div", {
50
+ content: /*#__PURE__*/React.createElement("div", {
63
51
  id: "error-message"
64
52
  }, errorMessage),
65
53
  placement: "right"
66
- }, jsx(Textfield, _extends({}, props, {
54
+ }, /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
67
55
  ref: textFieldRef,
68
- elemAfterInput: isInvalid && jsx("div", {
69
- css: errorIconContainerStyles
70
- }, jsx(ErrorIcon, {
56
+ elemAfterInput: isInvalid && /*#__PURE__*/React.createElement(Box, {
57
+ xcss: errorIconContainerStyles
58
+ }, /*#__PURE__*/React.createElement(ErrorIcon, {
71
59
  label: "error",
72
60
  primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
73
61
  })),
@@ -77,10 +65,10 @@ var InlineEditableTextfield = function InlineEditableTextfield(props) {
77
65
  })));
78
66
  },
79
67
  readView: function readView() {
80
- return jsx("div", {
81
- css: [readViewForTextFieldStyles, isCompact && compactStyles],
68
+ return /*#__PURE__*/React.createElement(Box, {
69
+ xcss: [readViewForTextFieldStyles, isCompact && compactStyles],
82
70
  "data-compact": isCompact,
83
- "data-testid": testId && "read-view-".concat(testId)
71
+ testId: testId && "read-view-".concat(testId)
84
72
  }, defaultValue || placeholder);
85
73
  }
86
74
  }));
package/dist/esm/internal/buttons.js CHANGED
@@ -12,7 +12,6 @@ import { IconButton } from '@atlaskit/button/new';
12
12
  import ConfirmIcon from '@atlaskit/icon/glyph/check';
13
13
  import CancelIcon from '@atlaskit/icon/glyph/cross';
14
14
  import { B400, N0, N20A, N30A, N50A, N60A } from '@atlaskit/theme/colors';
15
- import { fontSize } from './constants';
16
15
  var buttonsContainerStyles = css({
17
16
  display: 'flex',
18
17
  position: 'absolute',
@@ -28,8 +27,7 @@ var buttonWrapperBaseStyles = css({
28
27
  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
29
28
  borderRadius: "var(--ds-border-radius, 3px)",
30
29
  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")"),
31
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
32
- fontSize: fontSize,
30
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
33
31
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
34
32
  '&:last-child': {
35
33
  marginInlineStart: "var(--ds-space-050, 4px)"
package/dist/esm/internal/read-view.js CHANGED
@@ -8,7 +8,6 @@ import React, { useRef } from 'react';
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import { Pressable, xcss } from '@atlaskit/primitives';
10
10
  import { N30 } from '@atlaskit/theme/colors';
11
- import { borderRadius } from './constants';
12
11
  var readViewContainerStyles = css({
13
12
  lineHeight: 1
14
13
  });
@@ -38,8 +37,7 @@ var readViewWrapperStyles = css({
38
37
  width: 'auto',
39
38
  maxWidth: '100%',
40
39
  border: '2px solid transparent',
41
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
42
- borderRadius: borderRadius,
40
+ borderRadius: "var(--ds-border-radius, 3px)",
43
41
  transition: 'background 0.2s',
44
42
  '&:hover': {
45
43
  background: "var(--ds-background-neutral-subtle-hovered, ".concat(N30, ")")
@@ -64,7 +62,9 @@ var ReadView = function ReadView(_ref) {
64
62
  };
65
63
  var onReadViewClick = function onReadViewClick(event) {
66
64
  var element = event.target;
67
- /** If a link is clicked in the read view, default action should be taken */
65
+ /**
66
+ * If a link is clicked in the read view, default action should be taken
67
+ */
68
68
  if (element.tagName.toLowerCase() !== 'a' && !mouseHasMovedAfterMouseDown(event)) {
69
69
  event.preventDefault();
70
70
  onEditRequested();
package/dist/types/inline-editable-textfield.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx } from '@emotion/react';
1
+ /// <reference types="react" />
2
2
  import { type InlineEditableTextfieldProps } from './types';
3
- declare const InlineEditableTextfield: (props: InlineEditableTextfieldProps) => jsx.JSX.Element;
3
+ declare const InlineEditableTextfield: (props: InlineEditableTextfieldProps) => JSX.Element;
4
4
  export default InlineEditableTextfield;
package/dist/types-ts4.5/inline-editable-textfield.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx } from '@emotion/react';
1
+ /// <reference types="react" />
2
2
  import { type InlineEditableTextfieldProps } from './types';
3
- declare const InlineEditableTextfield: (props: InlineEditableTextfieldProps) => jsx.JSX.Element;
3
+ declare const InlineEditableTextfield: (props: InlineEditableTextfieldProps) => JSX.Element;
4
4
  export default InlineEditableTextfield;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-edit",
3
- "version": "13.7.4",
3
+ "version": "13.7.6",
4
4
  "description": "An inline edit displays a custom input component that switches between reading and editing on the same page.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -36,12 +36,12 @@
36
36
  "@atlaskit/button": "^20.2.0",
37
37
  "@atlaskit/codemod-utils": "^4.2.0",
38
38
  "@atlaskit/form": "^10.5.0",
39
- "@atlaskit/icon": "^22.18.0",
40
- "@atlaskit/inline-dialog": "^15.0.0",
39
+ "@atlaskit/icon": "^22.22.0",
40
+ "@atlaskit/inline-dialog": "^15.1.0",
41
41
  "@atlaskit/platform-feature-flags": "^0.3.0",
42
42
  "@atlaskit/primitives": "^12.2.0",
43
43
  "@atlaskit/textfield": "^6.5.0",
44
- "@atlaskit/theme": "^13.0.0",
44
+ "@atlaskit/theme": "^14.0.0",
45
45
  "@atlaskit/tokens": "^2.0.0",
46
46
  "@atlaskit/visually-hidden": "^1.5.0",
47
47
  "@babel/runtime": "^7.0.0",
@@ -53,11 +53,11 @@
53
53
  "devDependencies": {
54
54
  "@af/accessibility-testing": "*",
55
55
  "@af/integration-testing": "*",
56
- "@atlaskit/datetime-picker": "^15.0.0",
56
+ "@atlaskit/datetime-picker": "^15.4.0",
57
57
  "@atlaskit/docs": "*",
58
- "@atlaskit/ds-lib": "^2.6.0",
58
+ "@atlaskit/ds-lib": "^3.1.0",
59
59
  "@atlaskit/section-message": "^6.6.0",
60
- "@atlaskit/select": "^17.19.0",
60
+ "@atlaskit/select": "^18.1.0",
61
61
  "@atlaskit/ssr": "*",
62
62
  "@atlaskit/tag": "^12.6.0",
63
63
  "@atlaskit/tag-group": "^10.6.0",
package/dist/cjs/internal/constants.js DELETED
@@ -1,9 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.fontSize = exports.borderRadius = void 0;
7
- var _constants = require("@atlaskit/theme/constants");
8
- var fontSize = exports.fontSize = 14;
9
- var borderRadius = exports.borderRadius = (0, _constants.borderRadius)();
package/dist/es2019/internal/constants.js DELETED
@@ -1,3 +0,0 @@
1
- import { borderRadius as getBorderRadius } from '@atlaskit/theme/constants';
2
- export const fontSize = 14;
3
- export const borderRadius = getBorderRadius();
package/dist/esm/internal/constants.js DELETED
@@ -1,3 +0,0 @@
1
- import { borderRadius as getBorderRadius } from '@atlaskit/theme/constants';
2
- export var fontSize = 14;
3
- export var borderRadius = getBorderRadius();
package/dist/types/internal/constants.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare const fontSize = 14;
2
- export declare const borderRadius: number;
package/dist/types-ts4.5/internal/constants.d.ts DELETED
@@ -1,2 +0,0 @@
1
- export declare const fontSize = 14;
2
- export declare const borderRadius: number;