@instructure/ui-editable 8.38.2-snapshot-5 → 8.38.2-snapshot-7

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 (7) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Editable/index.js +22 -28
  3. package/es/InPlaceEdit/index.js +26 -24
  4. package/lib/Editable/index.js +22 -28
  5. package/lib/InPlaceEdit/index.js +26 -24
  6. package/package.json +14 -14
  7. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [8.38.2-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.38.1...v8.38.2-snapshot-5) (2023-07-14)
6
+ ## [8.38.2-snapshot-7](https://github.com/instructure/instructure-ui/compare/v8.38.1...v8.38.2-snapshot-7) (2023-07-21)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-editable
9
9
 
package/es/Editable/index.js CHANGED
@@ -34,9 +34,7 @@ category: components
34
34
  **/
35
35
  class Editable extends Component {
36
36
  constructor(_props) {
37
- var _this;
38
37
  super(_props);
39
- _this = this;
40
38
  this.state = {
41
39
  showModeToggle: false,
42
40
  valueOnEdit: null // the value when mode flips from view -> edit
@@ -97,52 +95,48 @@ class Editable extends Component {
97
95
  }
98
96
  };
99
97
  // ------- prop getters ------
100
- this.getContainerProps = function () {
101
- let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
102
- const _this$props = _this.props,
98
+ this.getContainerProps = (props = {}) => {
99
+ const _this$props = this.props,
103
100
  mode = _this$props.mode,
104
101
  readOnly = _this$props.readOnly;
105
102
  return {
106
- onMouseOver: _this.handleViewMouseOver,
107
- onMouseOut: _this.handleViewMouseOut,
108
- onMouseDown: mode !== 'edit' ? _this.handleViewClick : void 0,
109
- onKeyUp: mode === 'edit' ? _this.handleEditESC : void 0,
103
+ onMouseOver: this.handleViewMouseOver,
104
+ onMouseOut: this.handleViewMouseOut,
105
+ onMouseDown: mode !== 'edit' ? this.handleViewClick : void 0,
106
+ onKeyUp: mode === 'edit' ? this.handleEditESC : void 0,
110
107
  readOnly,
111
108
  ...props,
112
- ref: _this.handleContainerRef
109
+ ref: this.handleContainerRef
113
110
  };
114
111
  };
115
- this.getViewerProps = function () {
116
- let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
112
+ this.getViewerProps = (props = {}) => {
117
113
  return {
118
- mode: _this.props.mode,
119
- readOnly: _this.props.readOnly,
114
+ mode: this.props.mode,
115
+ readOnly: this.props.readOnly,
120
116
  ...props
121
117
  };
122
118
  };
123
- this.getEditorProps = function () {
124
- let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
119
+ this.getEditorProps = (props = {}) => {
125
120
  return {
126
- mode: _this.props.mode,
127
- onBlur: _this.handleEditBlur,
121
+ mode: this.props.mode,
122
+ onBlur: this.handleEditBlur,
128
123
  editorRef: el => {
129
- _this._editorRef = el;
124
+ this._editorRef = el;
130
125
  },
131
- readOnly: _this.props.readOnly,
126
+ readOnly: this.props.readOnly,
132
127
  ...props
133
128
  };
134
129
  };
135
- this.getEditButtonProps = function () {
136
- let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
130
+ this.getEditButtonProps = (props = {}) => {
137
131
  return {
138
- onClick: _this.handleEditButtonClick,
139
- onFocus: _this.handleEditButtonFocus,
140
- onBlur: _this.handleEditButtonBlur,
141
- isVisible: _this.state.showModeToggle,
132
+ onClick: this.handleEditButtonClick,
133
+ onFocus: this.handleEditButtonFocus,
134
+ onBlur: this.handleEditButtonBlur,
135
+ isVisible: this.state.showModeToggle,
142
136
  buttonRef: el => {
143
- _this._editButtonRef = el;
137
+ this._editButtonRef = el;
144
138
  },
145
- readOnly: _this.props.readOnly,
139
+ readOnly: this.props.readOnly,
146
140
  ...props
147
141
  };
148
142
  };
package/es/InPlaceEdit/index.js CHANGED
@@ -1,6 +1,3 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["buttonRef"],
3
- _excluded2 = ["isVisible", "readOnly", "label"];
4
1
  var _dec, _class, _class2;
5
2
  /*
6
3
  * The MIT License (MIT)
@@ -55,11 +52,12 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2
55
52
  this.handleEditButtonRef = el => {
56
53
  this._editButtonRef = el;
57
54
  };
58
- this.renderAll = _ref => {
59
- let getContainerProps = _ref.getContainerProps,
60
- getViewerProps = _ref.getViewerProps,
61
- getEditorProps = _ref.getEditorProps,
62
- getEditButtonProps = _ref.getEditButtonProps;
55
+ this.renderAll = ({
56
+ getContainerProps,
57
+ getViewerProps,
58
+ getEditorProps,
59
+ getEditButtonProps
60
+ }) => {
63
61
  const flexDir = this.props.editButtonPlacement === 'start' ? 'row-reverse' : 'row';
64
62
  const justifyItems = flexDir === 'row-reverse' ? 'end' : 'start';
65
63
  const buttonMargin = this.props.editButtonPlacement === 'start' ? '0 xx-small 0 0' : '0 0 0 xx-small';
@@ -84,12 +82,13 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2
84
82
  var _this$props$makeStyle2, _this$props2;
85
83
  (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
86
84
  }
87
- renderEditor(_ref2) {
85
+ renderEditor({
86
+ mode,
87
+ onBlur,
88
+ editorRef,
89
+ readOnly
90
+ }) {
88
91
  var _this$props$styles;
89
- let mode = _ref2.mode,
90
- onBlur = _ref2.onBlur,
91
- editorRef = _ref2.editorRef,
92
- readOnly = _ref2.readOnly;
93
92
  const _this$props3 = this.props,
94
93
  showFocusRing = _this$props3.showFocusRing,
95
94
  renderEditor = _this$props3.renderEditor;
@@ -107,14 +106,16 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2
107
106
  editorRef
108
107
  })) : null;
109
108
  }
110
- renderViewer(_ref3) {
111
- let readOnly = _ref3.readOnly,
112
- mode = _ref3.mode;
109
+ renderViewer({
110
+ readOnly,
111
+ mode
112
+ }) {
113
113
  return readOnly || mode === 'view' ? this.props.renderViewer() : null;
114
114
  }
115
- renderEditButton(_ref4) {
116
- let buttonRef = _ref4.buttonRef,
117
- rest = _objectWithoutProperties(_ref4, _excluded);
115
+ renderEditButton({
116
+ buttonRef,
117
+ ...rest
118
+ }) {
118
119
  return this.props.renderEditButton({
119
120
  elementRef: createChainedFunction(this.handleEditButtonRef, buttonRef),
120
121
  ...rest
@@ -146,11 +147,12 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2
146
147
  showFocusRing: true,
147
148
  inline: true,
148
149
  editButtonPlacement: 'end'
149
- }, _class2.renderDefaultEditButton = _ref5 => {
150
- let isVisible = _ref5.isVisible,
151
- readOnly = _ref5.readOnly,
152
- label = _ref5.label,
153
- buttonProps = _objectWithoutProperties(_ref5, _excluded2);
150
+ }, _class2.renderDefaultEditButton = ({
151
+ isVisible,
152
+ readOnly,
153
+ label,
154
+ ...buttonProps
155
+ }) => {
154
156
  if (readOnly) {
155
157
  return null;
156
158
  }
package/lib/Editable/index.js CHANGED
@@ -41,9 +41,7 @@ category: components
41
41
  **/
42
42
  class Editable extends _react.Component {
43
43
  constructor(_props) {
44
- var _this;
45
44
  super(_props);
46
- _this = this;
47
45
  this.state = {
48
46
  showModeToggle: false,
49
47
  valueOnEdit: null // the value when mode flips from view -> edit
@@ -104,52 +102,48 @@ class Editable extends _react.Component {
104
102
  }
105
103
  };
106
104
  // ------- prop getters ------
107
- this.getContainerProps = function () {
108
- let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
109
- const _this$props = _this.props,
105
+ this.getContainerProps = (props = {}) => {
106
+ const _this$props = this.props,
110
107
  mode = _this$props.mode,
111
108
  readOnly = _this$props.readOnly;
112
109
  return {
113
- onMouseOver: _this.handleViewMouseOver,
114
- onMouseOut: _this.handleViewMouseOut,
115
- onMouseDown: mode !== 'edit' ? _this.handleViewClick : void 0,
116
- onKeyUp: mode === 'edit' ? _this.handleEditESC : void 0,
110
+ onMouseOver: this.handleViewMouseOver,
111
+ onMouseOut: this.handleViewMouseOut,
112
+ onMouseDown: mode !== 'edit' ? this.handleViewClick : void 0,
113
+ onKeyUp: mode === 'edit' ? this.handleEditESC : void 0,
117
114
  readOnly,
118
115
  ...props,
119
- ref: _this.handleContainerRef
116
+ ref: this.handleContainerRef
120
117
  };
121
118
  };
122
- this.getViewerProps = function () {
123
- let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
119
+ this.getViewerProps = (props = {}) => {
124
120
  return {
125
- mode: _this.props.mode,
126
- readOnly: _this.props.readOnly,
121
+ mode: this.props.mode,
122
+ readOnly: this.props.readOnly,
127
123
  ...props
128
124
  };
129
125
  };
130
- this.getEditorProps = function () {
131
- let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
126
+ this.getEditorProps = (props = {}) => {
132
127
  return {
133
- mode: _this.props.mode,
134
- onBlur: _this.handleEditBlur,
128
+ mode: this.props.mode,
129
+ onBlur: this.handleEditBlur,
135
130
  editorRef: el => {
136
- _this._editorRef = el;
131
+ this._editorRef = el;
137
132
  },
138
- readOnly: _this.props.readOnly,
133
+ readOnly: this.props.readOnly,
139
134
  ...props
140
135
  };
141
136
  };
142
- this.getEditButtonProps = function () {
143
- let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
137
+ this.getEditButtonProps = (props = {}) => {
144
138
  return {
145
- onClick: _this.handleEditButtonClick,
146
- onFocus: _this.handleEditButtonFocus,
147
- onBlur: _this.handleEditButtonBlur,
148
- isVisible: _this.state.showModeToggle,
139
+ onClick: this.handleEditButtonClick,
140
+ onFocus: this.handleEditButtonFocus,
141
+ onBlur: this.handleEditButtonBlur,
142
+ isVisible: this.state.showModeToggle,
149
143
  buttonRef: el => {
150
- _this._editButtonRef = el;
144
+ this._editButtonRef = el;
151
145
  },
152
- readOnly: _this.props.readOnly,
146
+ readOnly: this.props.readOnly,
153
147
  ...props
154
148
  };
155
149
  };
package/lib/InPlaceEdit/index.js CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = exports.InPlaceEdit = void 0;
8
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
9
8
  var _react = require("react");
10
9
  var _Flex = require("@instructure/ui-flex/lib/Flex");
11
10
  var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
@@ -17,8 +16,6 @@ var _View = require("@instructure/ui-view/lib/View");
17
16
  var _Editable = require("../Editable");
18
17
  var _styles = _interopRequireDefault(require("./styles"));
19
18
  var _props = require("./props");
20
- const _excluded = ["buttonRef"],
21
- _excluded2 = ["isVisible", "readOnly", "label"];
22
19
  var _dec, _class, _class2;
23
20
  /*
24
21
  * The MIT License (MIT)
@@ -61,11 +58,12 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
61
58
  this.handleEditButtonRef = el => {
62
59
  this._editButtonRef = el;
63
60
  };
64
- this.renderAll = _ref => {
65
- let getContainerProps = _ref.getContainerProps,
66
- getViewerProps = _ref.getViewerProps,
67
- getEditorProps = _ref.getEditorProps,
68
- getEditButtonProps = _ref.getEditButtonProps;
61
+ this.renderAll = ({
62
+ getContainerProps,
63
+ getViewerProps,
64
+ getEditorProps,
65
+ getEditButtonProps
66
+ }) => {
69
67
  const flexDir = this.props.editButtonPlacement === 'start' ? 'row-reverse' : 'row';
70
68
  const justifyItems = flexDir === 'row-reverse' ? 'end' : 'start';
71
69
  const buttonMargin = this.props.editButtonPlacement === 'start' ? '0 xx-small 0 0' : '0 0 0 xx-small';
@@ -90,12 +88,13 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
90
88
  var _this$props$makeStyle2, _this$props2;
91
89
  (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
92
90
  }
93
- renderEditor(_ref2) {
91
+ renderEditor({
92
+ mode,
93
+ onBlur,
94
+ editorRef,
95
+ readOnly
96
+ }) {
94
97
  var _this$props$styles;
95
- let mode = _ref2.mode,
96
- onBlur = _ref2.onBlur,
97
- editorRef = _ref2.editorRef,
98
- readOnly = _ref2.readOnly;
99
98
  const _this$props3 = this.props,
100
99
  showFocusRing = _this$props3.showFocusRing,
101
100
  renderEditor = _this$props3.renderEditor;
@@ -113,14 +112,16 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
113
112
  editorRef
114
113
  })) : null;
115
114
  }
116
- renderViewer(_ref3) {
117
- let readOnly = _ref3.readOnly,
118
- mode = _ref3.mode;
115
+ renderViewer({
116
+ readOnly,
117
+ mode
118
+ }) {
119
119
  return readOnly || mode === 'view' ? this.props.renderViewer() : null;
120
120
  }
121
- renderEditButton(_ref4) {
122
- let buttonRef = _ref4.buttonRef,
123
- rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
121
+ renderEditButton({
122
+ buttonRef,
123
+ ...rest
124
+ }) {
124
125
  return this.props.renderEditButton({
125
126
  elementRef: (0, _createChainedFunction.createChainedFunction)(this.handleEditButtonRef, buttonRef),
126
127
  ...rest
@@ -152,11 +153,12 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
152
153
  showFocusRing: true,
153
154
  inline: true,
154
155
  editButtonPlacement: 'end'
155
- }, _class2.renderDefaultEditButton = _ref5 => {
156
- let isVisible = _ref5.isVisible,
157
- readOnly = _ref5.readOnly,
158
- label = _ref5.label,
159
- buttonProps = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
156
+ }, _class2.renderDefaultEditButton = ({
157
+ isVisible,
158
+ readOnly,
159
+ label,
160
+ ...buttonProps
161
+ }) => {
160
162
  if (readOnly) {
161
163
  return null;
162
164
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-editable",
3
- "version": "8.38.2-snapshot-5",
3
+ "version": "8.38.2-snapshot-7",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,21 +23,21 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.38.2-snapshot-5",
27
- "@instructure/ui-test-utils": "8.38.2-snapshot-5"
26
+ "@instructure/ui-babel-preset": "8.38.2-snapshot-7",
27
+ "@instructure/ui-test-utils": "8.38.2-snapshot-7"
28
28
  },
29
29
  "dependencies": {
30
- "@babel/runtime": "^7.22.5",
31
- "@instructure/console": "8.38.2-snapshot-5",
32
- "@instructure/emotion": "8.38.2-snapshot-5",
33
- "@instructure/ui-a11y-content": "8.38.2-snapshot-5",
34
- "@instructure/ui-buttons": "8.38.2-snapshot-5",
35
- "@instructure/ui-dom-utils": "8.38.2-snapshot-5",
36
- "@instructure/ui-flex": "8.38.2-snapshot-5",
37
- "@instructure/ui-focusable": "8.38.2-snapshot-5",
38
- "@instructure/ui-icons": "8.38.2-snapshot-5",
39
- "@instructure/ui-utils": "8.38.2-snapshot-5",
40
- "@instructure/ui-view": "8.38.2-snapshot-5",
30
+ "@babel/runtime": "^7.22.6",
31
+ "@instructure/console": "8.38.2-snapshot-7",
32
+ "@instructure/emotion": "8.38.2-snapshot-7",
33
+ "@instructure/ui-a11y-content": "8.38.2-snapshot-7",
34
+ "@instructure/ui-buttons": "8.38.2-snapshot-7",
35
+ "@instructure/ui-dom-utils": "8.38.2-snapshot-7",
36
+ "@instructure/ui-flex": "8.38.2-snapshot-7",
37
+ "@instructure/ui-focusable": "8.38.2-snapshot-7",
38
+ "@instructure/ui-icons": "8.38.2-snapshot-7",
39
+ "@instructure/ui-utils": "8.38.2-snapshot-7",
40
+ "@instructure/ui-view": "8.38.2-snapshot-7",
41
41
  "prop-types": "^15.8.1"
42
42
  },
43
43
  "peerDependencies": {