@instructure/ui-editable 8.33.2-snapshot-0 → 8.33.2-snapshot-5

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.33.2-snapshot-0](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-0) (2023-01-13)
+## [8.33.2-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2-snapshot-5) (2023-01-23)
 
 **Note:** Version bump only for package @instructure/ui-editable
 

package/es/Editable/index.js

@@ -26,7 +26,6 @@ import { deepEqual } from '@instructure/ui-utils';
 import { logWarn as warn } from '@instructure/console';
 import { requestAnimationFrame } from '@instructure/ui-dom-utils';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -36,23 +35,19 @@ category: components
 class Editable extends Component {
   constructor(_props) {
     var _this;
-
     super(_props);
     _this = this;
     this.state = {
       showModeToggle: false,
       valueOnEdit: null // the value when mode flips from view -> edit
-
     };
     this._editorRef = null;
     this._editButtonRef = null;
-
     this.handleEditESC = event => {
       if (event.key === 'Escape') {
         this.enterView();
       }
     };
-
     this.handleViewMouseOver = event => {
       if (this.props.mode === 'view') {
         // because the mouse event handlers are on the container, not the view
@@ -62,7 +57,6 @@ class Editable extends Component {
         });
       }
     };
-
     this.handleViewMouseOut = event => {
       if (this.props.mode === 'view') {
         event.stopPropagation();
@@ -71,7 +65,6 @@ class Editable extends Component {
         });
       }
     };
-
     this.handleViewClick = event => {
       if (event.buttons === 1) {
         requestAnimationFrame(() => {
@@ -79,43 +72,35 @@ class Editable extends Component {
         });
       }
     };
-
     this.handleEditBlur = () => {
       this.enterView();
     };
-
     this.handleEditButtonFocus = () => {
       this.setState({
         showModeToggle: true
       });
     };
-
     this.handleEditButtonBlur = () => {
       this.setState({
         showModeToggle: false
       });
     };
-
     this.handleEditButtonClick = () => {
       this.enterEdit();
     };
-
     this.ref = null;
-
     this.handleContainerRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.getContainerProps = function () {
       let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
       const _this$props = _this.props,
-            mode = _this$props.mode,
-            readOnly = _this$props.readOnly;
+        mode = _this$props.mode,
+        readOnly = _this$props.readOnly;
       return {
         onMouseOver: _this.handleViewMouseOver,
         onMouseOut: _this.handleViewMouseOut,
@@ -126,7 +111,6 @@ class Editable extends Component {
         ref: _this.handleContainerRef
       };
     };
-
     this.getViewerProps = function () {
       let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
       return {
@@ -135,7 +119,6 @@ class Editable extends Component {
         ...props
       };
     };
-
     this.getEditorProps = function () {
       let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
       return {
@@ -148,7 +131,6 @@ class Editable extends Component {
         ...props
       };
     };
-
     this.getEditButtonProps = function () {
       let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
       return {
@@ -163,47 +145,41 @@ class Editable extends Component {
         ...props
       };
     };
-
     warn(_props.readOnly ? _props.mode === 'view' : true, '[Editable] When readOnly is true, mode must be "view"');
   }
-
   componentDidMount() {
     if (this.props.mode === 'edit') {
       this.focusEditor();
     }
   }
-
   componentDidUpdate(prevProps) {
     const _this$props2 = this.props,
-          mode = _this$props2.mode,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange; // on the switch from view -> edit
+      mode = _this$props2.mode,
+      value = _this$props2.value,
+      onChange = _this$props2.onChange;
 
+    // on the switch from view -> edit
     if (prevProps.mode !== 'edit' && mode === 'edit') {
       this.setState({
         valueOnEdit: value
       });
       this.focusEditor();
-    } // on the switch from edit to view
-
+    }
 
+    // on the switch from edit to view
     if (prevProps.mode === 'edit' && mode !== 'edit') {
       this._editButtonRef && this._editButtonRef.focus();
-
       if (onChange && !deepEqual(this.state.valueOnEdit, value)) {
         onChange(value);
       }
     }
   }
-
   focusEditor() {
     warn(!!this._editorRef && !this.props.readOnly, '[Editable] Did you forget to connect editorRef to your editor component?');
-
     if (this._editorRef) {
       this._editorRef.focus();
     }
   }
-
   enterView() {
     if (this.props.mode !== 'view') {
       this.setState({
@@ -212,26 +188,22 @@ class Editable extends Component {
       this.props.onChangeMode('view');
     }
   }
-
   enterEdit() {
     if (!this.props.readOnly) {
       this.setState({
         showModeToggle: false
       });
-
       if (this.props.mode !== 'edit') {
         this.props.onChangeMode('edit');
       }
     }
   }
-
   render() {
     const _this$props3 = this.props,
-          children = _this$props3.children,
-          _this$props3$render = _this$props3.render,
-          render = _this$props3$render === void 0 ? children : _this$props3$render,
-          mode = _this$props3.mode;
-
+      children = _this$props3.children,
+      _this$props3$render = _this$props3.render,
+      render = _this$props3$render === void 0 ? children : _this$props3$render,
+      mode = _this$props3.mode;
     if (typeof render === 'function') {
       return render({
         mode,
@@ -244,9 +216,7 @@ class Editable extends Component {
       return null;
     }
   }
-
 }
-
 Editable.displayName = "Editable";
 Editable.propTypes = propTypes;
 Editable.allowedProps = allowedProps;

package/es/Editable/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 const propTypes = {
   mode: PropTypes.oneOf(['view', 'edit']).isRequired,

package/es/InPlaceEdit/index.js

@@ -1,9 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["buttonRef"],
-      _excluded2 = ["isVisible", "readOnly", "label"];
-
+  _excluded2 = ["isVisible", "readOnly", "label"];
 var _dec, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -40,7 +38,6 @@ import { View } from '@instructure/ui-view';
 import { Editable } from '../Editable';
 import generateStyle from './styles';
 import { propTypes, allowedProps } from './props';
-
 /**
 ---
 category: components
@@ -52,20 +49,17 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2
     super(props);
     this.ref = null;
     this._editButtonRef = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
-
     this.handleEditButtonRef = el => {
       this._editButtonRef = el;
     };
-
     this.renderAll = _ref => {
       let getContainerProps = _ref.getContainerProps,
-          getViewerProps = _ref.getViewerProps,
-          getEditorProps = _ref.getEditorProps,
-          getEditButtonProps = _ref.getEditButtonProps;
+        getViewerProps = _ref.getViewerProps,
+        getEditorProps = _ref.getEditorProps,
+        getEditButtonProps = _ref.getEditButtonProps;
       const flexDir = this.props.editButtonPlacement === 'start' ? 'row-reverse' : 'row';
       const justifyItems = flexDir === 'row-reverse' ? 'end' : 'start';
       const buttonMargin = this.props.editButtonPlacement === 'start' ? '0 xx-small 0 0' : '0 0 0 xx-small';
@@ -80,32 +74,25 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2
         margin: buttonMargin
       }, this.renderEditButton(getEditButtonProps())));
     };
-
     warn(props.readOnly ? props.mode === 'view' : true, '[InPlaceEdit] When readOnly is true, mode is forced to "view"');
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   renderEditor(_ref2) {
     var _this$props$styles;
-
     let mode = _ref2.mode,
-        onBlur = _ref2.onBlur,
-        editorRef = _ref2.editorRef,
-        readOnly = _ref2.readOnly;
+      onBlur = _ref2.onBlur,
+      editorRef = _ref2.editorRef,
+      readOnly = _ref2.readOnly;
     const _this$props3 = this.props,
-          showFocusRing = _this$props3.showFocusRing,
-          renderEditor = _this$props3.renderEditor;
+      showFocusRing = _this$props3.showFocusRing,
+      renderEditor = _this$props3.renderEditor;
     const isEditMode = !readOnly && mode === 'edit';
     return isEditMode ? jsx(View, {
       as: "span",
@@ -120,32 +107,30 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2
       editorRef
     })) : null;
   }
-
   renderViewer(_ref3) {
     let readOnly = _ref3.readOnly,
-        mode = _ref3.mode;
+      mode = _ref3.mode;
     return readOnly || mode === 'view' ? this.props.renderViewer() : null;
   }
-
   renderEditButton(_ref4) {
     let buttonRef = _ref4.buttonRef,
-        rest = _objectWithoutProperties(_ref4, _excluded);
-
+      rest = _objectWithoutProperties(_ref4, _excluded);
     return this.props.renderEditButton({
       elementRef: createChainedFunction(this.handleEditButtonRef, buttonRef),
       ...rest
     });
-  } // Render a default edit button, an icon button with the edit icon
-  // the margin makes room for the focus ring
+  }
 
+  // Render a default edit button, an icon button with the edit icon
+  // the margin makes room for the focus ring
 
   render() {
     const _this$props4 = this.props,
-          mode = _this$props4.mode,
-          value = _this$props4.value,
-          onChange = _this$props4.onChange,
-          onChangeMode = _this$props4.onChangeMode,
-          readOnly = _this$props4.readOnly;
+      mode = _this$props4.mode,
+      value = _this$props4.value,
+      onChange = _this$props4.onChange,
+      onChangeMode = _this$props4.onChangeMode,
+      readOnly = _this$props4.readOnly;
     return jsx(Editable, {
       mode: mode,
       onChangeMode: onChangeMode,
@@ -156,7 +141,6 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2
       elementRef: this.handleRef
     });
   }
-
 }, _class2.displayName = "InPlaceEdit", _class2.componentId = 'InPlaceEdit', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
   readOnly: false,
   showFocusRing: true,
@@ -164,14 +148,12 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2
   editButtonPlacement: 'end'
 }, _class2.renderDefaultEditButton = _ref5 => {
   let isVisible = _ref5.isVisible,
-      readOnly = _ref5.readOnly,
-      label = _ref5.label,
-      buttonProps = _objectWithoutProperties(_ref5, _excluded2);
-
+    readOnly = _ref5.readOnly,
+    label = _ref5.label,
+    buttonProps = _objectWithoutProperties(_ref5, _excluded2);
   if (readOnly) {
     return null;
   }
-
   return jsx(IconButton, Object.assign({
     size: "small",
     screenReaderLabel: label,

package/es/InPlaceEdit/props.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import PropTypes from 'prop-types';
 const propTypes = {
   renderViewer: PropTypes.func.isRequired,

package/es/InPlaceEdit/styles.js

@@ -42,9 +42,7 @@ const generateStyle = () => {
       overflow: 'visible',
       direction: 'inherit',
       margin: 0,
-      textDecoration: 'none'
-      /* for links styled as buttons */
-      ,
+      textDecoration: 'none' /* for links styled as buttons */,
       textAlign: 'inherit',
       userSelect: 'none',
       touchAction: 'manipulation',
@@ -54,5 +52,4 @@ const generateStyle = () => {
     }
   };
 };
-
 export default generateStyle;

package/es/index.js

@@ -21,5 +21,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export { Editable } from './Editable';
 export { InPlaceEdit } from './InPlaceEdit';

package/lib/Editable/index.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Editable = void 0;
-
 var _react = require("react");
-
 var _deepEqual = require("@instructure/ui-utils/lib/deepEqual.js");
-
 var _console = require("@instructure/console");
-
 var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnimationFrame.js");
-
 var _props2 = require("./props");
-
 /*
  * The MIT License (MIT)
  *
@@ -48,23 +42,19 @@ category: components
 class Editable extends _react.Component {
   constructor(_props) {
     var _this;
-
     super(_props);
     _this = this;
     this.state = {
       showModeToggle: false,
       valueOnEdit: null // the value when mode flips from view -> edit
-
     };
     this._editorRef = null;
     this._editButtonRef = null;
-
     this.handleEditESC = event => {
       if (event.key === 'Escape') {
         this.enterView();
       }
     };
-
     this.handleViewMouseOver = event => {
       if (this.props.mode === 'view') {
         // because the mouse event handlers are on the container, not the view
@@ -74,7 +64,6 @@ class Editable extends _react.Component {
         });
       }
     };
-
     this.handleViewMouseOut = event => {
       if (this.props.mode === 'view') {
         event.stopPropagation();
@@ -83,7 +72,6 @@ class Editable extends _react.Component {
         });
       }
     };
-
     this.handleViewClick = event => {
       if (event.buttons === 1) {
         (0, _requestAnimationFrame.requestAnimationFrame)(() => {
@@ -91,43 +79,35 @@ class Editable extends _react.Component {
         });
       }
     };
-
     this.handleEditBlur = () => {
       this.enterView();
     };
-
     this.handleEditButtonFocus = () => {
       this.setState({
         showModeToggle: true
       });
     };
-
     this.handleEditButtonBlur = () => {
       this.setState({
         showModeToggle: false
       });
     };
-
     this.handleEditButtonClick = () => {
       this.enterEdit();
     };
-
     this.ref = null;
-
     this.handleContainerRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.getContainerProps = function () {
       let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
       const _this$props = _this.props,
-            mode = _this$props.mode,
-            readOnly = _this$props.readOnly;
+        mode = _this$props.mode,
+        readOnly = _this$props.readOnly;
       return {
         onMouseOver: _this.handleViewMouseOver,
         onMouseOut: _this.handleViewMouseOut,
@@ -138,7 +118,6 @@ class Editable extends _react.Component {
         ref: _this.handleContainerRef
       };
     };
-
     this.getViewerProps = function () {
       let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
       return {
@@ -147,7 +126,6 @@ class Editable extends _react.Component {
         ...props
       };
     };
-
     this.getEditorProps = function () {
       let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
       return {
@@ -160,7 +138,6 @@ class Editable extends _react.Component {
         ...props
       };
     };
-
     this.getEditButtonProps = function () {
       let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
       return {
@@ -175,47 +152,41 @@ class Editable extends _react.Component {
         ...props
       };
     };
-
     (0, _console.logWarn)(_props.readOnly ? _props.mode === 'view' : true, '[Editable] When readOnly is true, mode must be "view"');
   }
-
   componentDidMount() {
     if (this.props.mode === 'edit') {
       this.focusEditor();
     }
   }
-
   componentDidUpdate(prevProps) {
     const _this$props2 = this.props,
-          mode = _this$props2.mode,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange; // on the switch from view -> edit
+      mode = _this$props2.mode,
+      value = _this$props2.value,
+      onChange = _this$props2.onChange;
 
+    // on the switch from view -> edit
     if (prevProps.mode !== 'edit' && mode === 'edit') {
       this.setState({
         valueOnEdit: value
       });
       this.focusEditor();
-    } // on the switch from edit to view
-
+    }
 
+    // on the switch from edit to view
     if (prevProps.mode === 'edit' && mode !== 'edit') {
       this._editButtonRef && this._editButtonRef.focus();
-
       if (onChange && !(0, _deepEqual.deepEqual)(this.state.valueOnEdit, value)) {
         onChange(value);
       }
     }
   }
-
   focusEditor() {
     (0, _console.logWarn)(!!this._editorRef && !this.props.readOnly, '[Editable] Did you forget to connect editorRef to your editor component?');
-
     if (this._editorRef) {
       this._editorRef.focus();
     }
   }
-
   enterView() {
     if (this.props.mode !== 'view') {
       this.setState({
@@ -224,26 +195,22 @@ class Editable extends _react.Component {
       this.props.onChangeMode('view');
     }
   }
-
   enterEdit() {
     if (!this.props.readOnly) {
       this.setState({
         showModeToggle: false
       });
-
       if (this.props.mode !== 'edit') {
         this.props.onChangeMode('edit');
       }
     }
   }
-
   render() {
     const _this$props3 = this.props,
-          children = _this$props3.children,
-          _this$props3$render = _this$props3.render,
-          render = _this$props3$render === void 0 ? children : _this$props3$render,
-          mode = _this$props3.mode;
-
+      children = _this$props3.children,
+      _this$props3$render = _this$props3.render,
+      render = _this$props3$render === void 0 ? children : _this$props3$render,
+      mode = _this$props3.mode;
     if (typeof render === 'function') {
       return render({
         mode,
@@ -256,9 +223,7 @@ class Editable extends _react.Component {
       return null;
     }
   }
-
 }
-
 exports.Editable = Editable;
 Editable.displayName = "Editable";
 Editable.propTypes = _props2.propTypes;

package/lib/Editable/props.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   mode: _propTypes.default.oneOf(['view', 'edit']).isRequired,
   onChangeMode: _propTypes.default.func.isRequired,