@instructure/ui-editable 8.25.1-snapshot-10 → 8.25.1-snapshot-13

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.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
+## [8.25.1-snapshot-13](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-13) (2022-06-22)
 
 **Note:** Version bump only for package @instructure/ui-editable
 

package/es/Editable/index.js

@@ -34,24 +34,136 @@ experimental: true
 ---
 **/
 class Editable extends Component {
-  static displayName = "Editable";
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    readOnly: false,
-    children: null
-  };
-  state = {
-    showModeToggle: false,
-    valueOnEdit: null // the value when mode flips from view -> edit
-
-  };
-  _editorRef = null;
-  _editButtonRef = null;
-
-  constructor(props) {
-    super(props);
-    warn(props.readOnly ? props.mode === 'view' : true, '[Editable] When readOnly is true, mode must be "view"');
+  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
+        event.stopPropagation();
+        this.setState({
+          showModeToggle: true
+        });
+      }
+    };
+
+    this.handleViewMouseOut = event => {
+      if (this.props.mode === 'view') {
+        event.stopPropagation();
+        this.setState({
+          showModeToggle: document.activeElement === this._editButtonRef
+        });
+      }
+    };
+
+    this.handleViewClick = event => {
+      if (event.buttons === 1) {
+        requestAnimationFrame(() => {
+          this.enterEdit();
+        });
+      }
+    };
+
+    this.handleEditBlur = event => {
+      this.enterView();
+    };
+
+    this.handleEditButtonFocus = event => {
+      this.setState({
+        showModeToggle: true
+      });
+    };
+
+    this.handleEditButtonBlur = event => {
+      this.setState({
+        showModeToggle: false
+      });
+    };
+
+    this.handleEditButtonClick = event => {
+      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;
+      return {
+        onMouseOver: _this.handleViewMouseOver,
+        onMouseOut: _this.handleViewMouseOut,
+        onMouseDown: mode !== 'edit' ? _this.handleViewClick : null,
+        onKeyUp: mode === 'edit' ? _this.handleEditESC : null,
+        readOnly,
+        ...props,
+        ref: _this.handleContainerRef
+      };
+    };
+
+    this.getViewerProps = function () {
+      let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+      return {
+        mode: _this.props.mode,
+        readOnly: _this.props.readOnly,
+        ...props
+      };
+    };
+
+    this.getEditorProps = props => {
+      return {
+        mode: this.props.mode,
+        onBlur: this.handleEditBlur,
+        editorRef: el => {
+          this._editorRef = el;
+        },
+        readOnly: this.props.readOnly,
+        ...props
+      };
+    };
+
+    this.getEditButtonProps = function () {
+      let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+      return {
+        onClick: _this.handleEditButtonClick,
+        onFocus: _this.handleEditButtonFocus,
+        onBlur: _this.handleEditButtonBlur,
+        isVisible: _this.state.showModeToggle,
+        buttonRef: el => {
+          _this._editButtonRef = el;
+        },
+        readOnly: _this.props.readOnly,
+        ...props
+      };
+    };
+
+    warn(_props.readOnly ? _props.mode === 'view' : true, '[Editable] When readOnly is true, mode must be "view"');
   }
 
   componentDidMount() {
@@ -63,10 +175,10 @@ class Editable extends Component {
   componentWillUnmount() {}
 
   componentDidUpdate(prevProps) {
-    const _this$props = this.props,
-          mode = _this$props.mode,
-          value = _this$props.value,
-          onChange = _this$props.onChange; // on the switch from view -> edit
+    const _this$props2 = this.props,
+          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({
@@ -114,122 +226,6 @@ class Editable extends Component {
     }
   }
 
-  handleEditESC = event => {
-    if (event.key === 'Escape') {
-      this.enterView();
-    }
-  };
-  handleViewMouseOver = event => {
-    if (this.props.mode === 'view') {
-      // because the mouse event handlers are on the container, not the view
-      event.stopPropagation();
-      this.setState({
-        showModeToggle: true
-      });
-    }
-  };
-  handleViewMouseOut = event => {
-    if (this.props.mode === 'view') {
-      event.stopPropagation();
-      this.setState({
-        showModeToggle: document.activeElement === this._editButtonRef
-      });
-    }
-  };
-  handleViewClick = event => {
-    if (event.buttons === 1) {
-      requestAnimationFrame(() => {
-        this.enterEdit();
-      });
-    }
-  };
-  handleEditBlur = event => {
-    this.enterView();
-  };
-  handleEditButtonFocus = event => {
-    this.setState({
-      showModeToggle: true
-    });
-  };
-  handleEditButtonBlur = event => {
-    this.setState({
-      showModeToggle: false
-    });
-  };
-  handleEditButtonClick = event => {
-    this.enterEdit();
-  };
-  ref = null;
-  handleContainerRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  }; // ------- prop getters ------
-
-  getContainerProps = (() => {
-    var _this = this;
-
-    return function () {
-      let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-      const _this$props2 = _this.props,
-            mode = _this$props2.mode,
-            readOnly = _this$props2.readOnly;
-      return {
-        onMouseOver: _this.handleViewMouseOver,
-        onMouseOut: _this.handleViewMouseOut,
-        onMouseDown: mode !== 'edit' ? _this.handleViewClick : null,
-        onKeyUp: mode === 'edit' ? _this.handleEditESC : null,
-        readOnly,
-        ...props,
-        ref: _this.handleContainerRef
-      };
-    };
-  })();
-  getViewerProps = (() => {
-    var _this2 = this;
-
-    return function () {
-      let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-      return {
-        mode: _this2.props.mode,
-        readOnly: _this2.props.readOnly,
-        ...props
-      };
-    };
-  })();
-  getEditorProps = props => {
-    return {
-      mode: this.props.mode,
-      onBlur: this.handleEditBlur,
-      editorRef: el => {
-        this._editorRef = el;
-      },
-      readOnly: this.props.readOnly,
-      ...props
-    };
-  };
-  getEditButtonProps = (() => {
-    var _this3 = this;
-
-    return function () {
-      let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-      return {
-        onClick: _this3.handleEditButtonClick,
-        onFocus: _this3.handleEditButtonFocus,
-        onBlur: _this3.handleEditButtonBlur,
-        isVisible: _this3.state.showModeToggle,
-        buttonRef: el => {
-          _this3._editButtonRef = el;
-        },
-        readOnly: _this3.props.readOnly,
-        ...props
-      };
-    };
-  })();
-
   render() {
     const _this$props3 = this.props,
           children = _this$props3.children,
@@ -252,5 +248,12 @@ class Editable extends Component {
 
 }
 
+Editable.displayName = "Editable";
+Editable.propTypes = propTypes;
+Editable.allowedProps = allowedProps;
+Editable.defaultProps = {
+  readOnly: false,
+  children: null
+};
 export default Editable;
 export { Editable };

package/es/InPlaceEdit/index.js

@@ -2,7 +2,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 const _excluded = ["buttonRef"],
       _excluded2 = ["isVisible", "readOnly", "label"];
 
-var _dec, _class;
+var _dec, _class, _class2;
 
 /*
  * The MIT License (MIT)
@@ -46,24 +46,39 @@ import { propTypes, allowedProps } from './props';
 category: components
 ---
 **/
-let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = class InPlaceEdit extends Component {
-  static displayName = "InPlaceEdit";
-  static componentId = 'InPlaceEdit';
-  static propTypes = propTypes;
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    readOnly: false,
-    showFocusRing: true,
-    inline: true,
-    editButtonPlacement: 'end'
-  };
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
-
+let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2 = class InPlaceEdit extends Component {
   constructor(props) {
     super(props);
+    this.ref = 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;
+      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';
+      return jsx(Flex, Object.assign({
+        display: this.props.inline ? 'inline-flex' : 'flex',
+        direction: flexDir,
+        justifyItems: justifyItems
+      }, getContainerProps()), jsx(Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true
+      }, this.renderEditor(getEditorProps()), this.renderViewer(getViewerProps())), jsx(Flex.Item, {
+        margin: buttonMargin
+      }, this.renderEditButton(getEditButtonProps())));
+    };
+
     warn(props.readOnly ? props.mode === 'view' : true, '[InPlaceEdit] When readOnly is true, mode is forced to "view"');
   }
 
@@ -75,17 +90,13 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = class In
     this.props.makeStyles();
   }
 
-  handleEditButtonRef = el => {
-    this._editButtonRef = el;
-  };
-
-  renderEditor(_ref) {
+  renderEditor(_ref2) {
     var _this$props$styles;
 
-    let mode = _ref.mode,
-        onBlur = _ref.onBlur,
-        editorRef = _ref.editorRef,
-        readOnly = _ref.readOnly;
+    let mode = _ref2.mode,
+        onBlur = _ref2.onBlur,
+        editorRef = _ref2.editorRef,
+        readOnly = _ref2.readOnly;
     const _this$props = this.props,
           showFocusRing = _this$props.showFocusRing,
           renderEditor = _this$props.renderEditor;
@@ -104,15 +115,15 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = class In
     })) : null;
   }
 
-  renderViewer(_ref2) {
-    let readOnly = _ref2.readOnly,
-        mode = _ref2.mode;
+  renderViewer(_ref3) {
+    let readOnly = _ref3.readOnly,
+        mode = _ref3.mode;
     return readOnly || mode === 'view' ? this.props.renderViewer() : null;
   }
 
-  renderEditButton(_ref3) {
-    let buttonRef = _ref3.buttonRef,
-        rest = _objectWithoutProperties(_ref3, _excluded);
+  renderEditButton(_ref4) {
+    let buttonRef = _ref4.buttonRef,
+        rest = _objectWithoutProperties(_ref4, _excluded);
 
     return this.props.renderEditButton({
       elementRef: createChainedFunction(this.handleEditButtonRef, buttonRef),
@@ -122,43 +133,6 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = class In
   // the margin makes room for the focus ring
 
 
-  static renderDefaultEditButton = _ref4 => {
-    let isVisible = _ref4.isVisible,
-        readOnly = _ref4.readOnly,
-        label = _ref4.label,
-        buttonProps = _objectWithoutProperties(_ref4, _excluded2);
-
-    if (readOnly) {
-      return null;
-    }
-
-    return jsx(IconButton, Object.assign({
-      size: "small",
-      screenReaderLabel: label,
-      withBackground: false,
-      withBorder: false
-    }, buttonProps), isVisible ? IconEditLine : null);
-  };
-  renderAll = _ref5 => {
-    let getContainerProps = _ref5.getContainerProps,
-        getViewerProps = _ref5.getViewerProps,
-        getEditorProps = _ref5.getEditorProps,
-        getEditButtonProps = _ref5.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';
-    return jsx(Flex, Object.assign({
-      display: this.props.inline ? 'inline-flex' : 'flex',
-      direction: flexDir,
-      justifyItems: justifyItems
-    }, getContainerProps()), jsx(Flex.Item, {
-      shouldGrow: true,
-      shouldShrink: true
-    }, this.renderEditor(getEditorProps()), this.renderViewer(getViewerProps())), jsx(Flex.Item, {
-      margin: buttonMargin
-    }, this.renderEditButton(getEditButtonProps())));
-  };
-
   render() {
     const _this$props2 = this.props,
           mode = _this$props2.mode,
@@ -177,6 +151,27 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = class In
     });
   }
 
-}) || _class);
+}, _class2.displayName = "InPlaceEdit", _class2.componentId = 'InPlaceEdit', _class2.propTypes = propTypes, _class2.allowedProps = allowedProps, _class2.defaultProps = {
+  readOnly: false,
+  showFocusRing: true,
+  inline: true,
+  editButtonPlacement: 'end'
+}, _class2.renderDefaultEditButton = _ref5 => {
+  let isVisible = _ref5.isVisible,
+      readOnly = _ref5.readOnly,
+      label = _ref5.label,
+      buttonProps = _objectWithoutProperties(_ref5, _excluded2);
+
+  if (readOnly) {
+    return null;
+  }
+
+  return jsx(IconButton, Object.assign({
+    size: "small",
+    screenReaderLabel: label,
+    withBackground: false,
+    withBorder: false
+  }, buttonProps), isVisible ? IconEditLine : null);
+}, _class2)) || _class);
 export default InPlaceEdit;
 export { InPlaceEdit };

package/lib/Editable/index.js

@@ -13,7 +13,7 @@ var _console = require("@instructure/console");
 
 var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnimationFrame.js");
 
-var _props = require("./props");
+var _props2 = require("./props");
 
 /*
  * The MIT License (MIT)
@@ -46,24 +46,136 @@ experimental: true
 ---
 **/
 class Editable extends _react.Component {
-  static displayName = "Editable";
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    readOnly: false,
-    children: null
-  };
-  state = {
-    showModeToggle: false,
-    valueOnEdit: null // the value when mode flips from view -> edit
-
-  };
-  _editorRef = null;
-  _editButtonRef = null;
-
-  constructor(props) {
-    super(props);
-    (0, _console.logWarn)(props.readOnly ? props.mode === 'view' : true, '[Editable] When readOnly is true, mode must be "view"');
+  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
+        event.stopPropagation();
+        this.setState({
+          showModeToggle: true
+        });
+      }
+    };
+
+    this.handleViewMouseOut = event => {
+      if (this.props.mode === 'view') {
+        event.stopPropagation();
+        this.setState({
+          showModeToggle: document.activeElement === this._editButtonRef
+        });
+      }
+    };
+
+    this.handleViewClick = event => {
+      if (event.buttons === 1) {
+        (0, _requestAnimationFrame.requestAnimationFrame)(() => {
+          this.enterEdit();
+        });
+      }
+    };
+
+    this.handleEditBlur = event => {
+      this.enterView();
+    };
+
+    this.handleEditButtonFocus = event => {
+      this.setState({
+        showModeToggle: true
+      });
+    };
+
+    this.handleEditButtonBlur = event => {
+      this.setState({
+        showModeToggle: false
+      });
+    };
+
+    this.handleEditButtonClick = event => {
+      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;
+      return {
+        onMouseOver: _this.handleViewMouseOver,
+        onMouseOut: _this.handleViewMouseOut,
+        onMouseDown: mode !== 'edit' ? _this.handleViewClick : null,
+        onKeyUp: mode === 'edit' ? _this.handleEditESC : null,
+        readOnly,
+        ...props,
+        ref: _this.handleContainerRef
+      };
+    };
+
+    this.getViewerProps = function () {
+      let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+      return {
+        mode: _this.props.mode,
+        readOnly: _this.props.readOnly,
+        ...props
+      };
+    };
+
+    this.getEditorProps = props => {
+      return {
+        mode: this.props.mode,
+        onBlur: this.handleEditBlur,
+        editorRef: el => {
+          this._editorRef = el;
+        },
+        readOnly: this.props.readOnly,
+        ...props
+      };
+    };
+
+    this.getEditButtonProps = function () {
+      let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+      return {
+        onClick: _this.handleEditButtonClick,
+        onFocus: _this.handleEditButtonFocus,
+        onBlur: _this.handleEditButtonBlur,
+        isVisible: _this.state.showModeToggle,
+        buttonRef: el => {
+          _this._editButtonRef = el;
+        },
+        readOnly: _this.props.readOnly,
+        ...props
+      };
+    };
+
+    (0, _console.logWarn)(_props.readOnly ? _props.mode === 'view' : true, '[Editable] When readOnly is true, mode must be "view"');
   }
 
   componentDidMount() {
@@ -75,10 +187,10 @@ class Editable extends _react.Component {
   componentWillUnmount() {}
 
   componentDidUpdate(prevProps) {
-    const _this$props = this.props,
-          mode = _this$props.mode,
-          value = _this$props.value,
-          onChange = _this$props.onChange; // on the switch from view -> edit
+    const _this$props2 = this.props,
+          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({
@@ -126,122 +238,6 @@ class Editable extends _react.Component {
     }
   }
 
-  handleEditESC = event => {
-    if (event.key === 'Escape') {
-      this.enterView();
-    }
-  };
-  handleViewMouseOver = event => {
-    if (this.props.mode === 'view') {
-      // because the mouse event handlers are on the container, not the view
-      event.stopPropagation();
-      this.setState({
-        showModeToggle: true
-      });
-    }
-  };
-  handleViewMouseOut = event => {
-    if (this.props.mode === 'view') {
-      event.stopPropagation();
-      this.setState({
-        showModeToggle: document.activeElement === this._editButtonRef
-      });
-    }
-  };
-  handleViewClick = event => {
-    if (event.buttons === 1) {
-      (0, _requestAnimationFrame.requestAnimationFrame)(() => {
-        this.enterEdit();
-      });
-    }
-  };
-  handleEditBlur = event => {
-    this.enterView();
-  };
-  handleEditButtonFocus = event => {
-    this.setState({
-      showModeToggle: true
-    });
-  };
-  handleEditButtonBlur = event => {
-    this.setState({
-      showModeToggle: false
-    });
-  };
-  handleEditButtonClick = event => {
-    this.enterEdit();
-  };
-  ref = null;
-  handleContainerRef = el => {
-    const elementRef = this.props.elementRef;
-    this.ref = el;
-
-    if (typeof elementRef === 'function') {
-      elementRef(el);
-    }
-  }; // ------- prop getters ------
-
-  getContainerProps = (() => {
-    var _this = this;
-
-    return function () {
-      let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-      const _this$props2 = _this.props,
-            mode = _this$props2.mode,
-            readOnly = _this$props2.readOnly;
-      return {
-        onMouseOver: _this.handleViewMouseOver,
-        onMouseOut: _this.handleViewMouseOut,
-        onMouseDown: mode !== 'edit' ? _this.handleViewClick : null,
-        onKeyUp: mode === 'edit' ? _this.handleEditESC : null,
-        readOnly,
-        ...props,
-        ref: _this.handleContainerRef
-      };
-    };
-  })();
-  getViewerProps = (() => {
-    var _this2 = this;
-
-    return function () {
-      let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-      return {
-        mode: _this2.props.mode,
-        readOnly: _this2.props.readOnly,
-        ...props
-      };
-    };
-  })();
-  getEditorProps = props => {
-    return {
-      mode: this.props.mode,
-      onBlur: this.handleEditBlur,
-      editorRef: el => {
-        this._editorRef = el;
-      },
-      readOnly: this.props.readOnly,
-      ...props
-    };
-  };
-  getEditButtonProps = (() => {
-    var _this3 = this;
-
-    return function () {
-      let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-      return {
-        onClick: _this3.handleEditButtonClick,
-        onFocus: _this3.handleEditButtonFocus,
-        onBlur: _this3.handleEditButtonBlur,
-        isVisible: _this3.state.showModeToggle,
-        buttonRef: el => {
-          _this3._editButtonRef = el;
-        },
-        readOnly: _this3.props.readOnly,
-        ...props
-      };
-    };
-  })();
-
   render() {
     const _this$props3 = this.props,
           children = _this$props3.children,
@@ -265,5 +261,12 @@ class Editable extends _react.Component {
 }
 
 exports.Editable = Editable;
+Editable.displayName = "Editable";
+Editable.propTypes = _props2.propTypes;
+Editable.allowedProps = _props2.allowedProps;
+Editable.defaultProps = {
+  readOnly: false,
+  children: null
+};
 var _default = Editable;
 exports.default = _default;

package/lib/InPlaceEdit/index.js

@@ -34,31 +34,46 @@ var _props = require("./props");
 const _excluded = ["buttonRef"],
       _excluded2 = ["isVisible", "readOnly", "label"];
 
-var _dec, _class;
+var _dec, _class, _class2;
 
 /**
 ---
 category: components
 ---
 **/
-let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = class InPlaceEdit extends _react.Component {
-  static displayName = "InPlaceEdit";
-  static componentId = 'InPlaceEdit';
-  static propTypes = _props.propTypes;
-  static allowedProps = _props.allowedProps;
-  static defaultProps = {
-    readOnly: false,
-    showFocusRing: true,
-    inline: true,
-    editButtonPlacement: 'end'
-  };
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
-
+let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_class2 = class InPlaceEdit extends _react.Component {
   constructor(props) {
     super(props);
+    this.ref = 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;
+      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';
+      return (0, _emotion.jsx)(_Flex.Flex, Object.assign({
+        display: this.props.inline ? 'inline-flex' : 'flex',
+        direction: flexDir,
+        justifyItems: justifyItems
+      }, getContainerProps()), (0, _emotion.jsx)(_Flex.Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true
+      }, this.renderEditor(getEditorProps()), this.renderViewer(getViewerProps())), (0, _emotion.jsx)(_Flex.Flex.Item, {
+        margin: buttonMargin
+      }, this.renderEditButton(getEditButtonProps())));
+    };
+
     (0, _console.logWarn)(props.readOnly ? props.mode === 'view' : true, '[InPlaceEdit] When readOnly is true, mode is forced to "view"');
   }
 
@@ -70,17 +85,13 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
     this.props.makeStyles();
   }
 
-  handleEditButtonRef = el => {
-    this._editButtonRef = el;
-  };
-
-  renderEditor(_ref) {
+  renderEditor(_ref2) {
     var _this$props$styles;
 
-    let mode = _ref.mode,
-        onBlur = _ref.onBlur,
-        editorRef = _ref.editorRef,
-        readOnly = _ref.readOnly;
+    let mode = _ref2.mode,
+        onBlur = _ref2.onBlur,
+        editorRef = _ref2.editorRef,
+        readOnly = _ref2.readOnly;
     const _this$props = this.props,
           showFocusRing = _this$props.showFocusRing,
           renderEditor = _this$props.renderEditor;
@@ -99,15 +110,15 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
     })) : null;
   }
 
-  renderViewer(_ref2) {
-    let readOnly = _ref2.readOnly,
-        mode = _ref2.mode;
+  renderViewer(_ref3) {
+    let readOnly = _ref3.readOnly,
+        mode = _ref3.mode;
     return readOnly || mode === 'view' ? this.props.renderViewer() : null;
   }
 
-  renderEditButton(_ref3) {
-    let buttonRef = _ref3.buttonRef,
-        rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  renderEditButton(_ref4) {
+    let buttonRef = _ref4.buttonRef,
+        rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded);
     return this.props.renderEditButton({
       elementRef: (0, _createChainedFunction.createChainedFunction)(this.handleEditButtonRef, buttonRef),
       ...rest
@@ -116,43 +127,6 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
   // the margin makes room for the focus ring
 
 
-  static renderDefaultEditButton = _ref4 => {
-    let isVisible = _ref4.isVisible,
-        readOnly = _ref4.readOnly,
-        label = _ref4.label,
-        buttonProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
-
-    if (readOnly) {
-      return null;
-    }
-
-    return (0, _emotion.jsx)(_IconButton.IconButton, Object.assign({
-      size: "small",
-      screenReaderLabel: label,
-      withBackground: false,
-      withBorder: false
-    }, buttonProps), isVisible ? _IconEditLine.IconEditLine : null);
-  };
-  renderAll = _ref5 => {
-    let getContainerProps = _ref5.getContainerProps,
-        getViewerProps = _ref5.getViewerProps,
-        getEditorProps = _ref5.getEditorProps,
-        getEditButtonProps = _ref5.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';
-    return (0, _emotion.jsx)(_Flex.Flex, Object.assign({
-      display: this.props.inline ? 'inline-flex' : 'flex',
-      direction: flexDir,
-      justifyItems: justifyItems
-    }, getContainerProps()), (0, _emotion.jsx)(_Flex.Flex.Item, {
-      shouldGrow: true,
-      shouldShrink: true
-    }, this.renderEditor(getEditorProps()), this.renderViewer(getViewerProps())), (0, _emotion.jsx)(_Flex.Flex.Item, {
-      margin: buttonMargin
-    }, this.renderEditButton(getEditButtonProps())));
-  };
-
   render() {
     const _this$props2 = this.props,
           mode = _this$props2.mode,
@@ -171,7 +145,28 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
     });
   }
 
-}) || _class);
+}, _class2.displayName = "InPlaceEdit", _class2.componentId = 'InPlaceEdit', _class2.propTypes = _props.propTypes, _class2.allowedProps = _props.allowedProps, _class2.defaultProps = {
+  readOnly: false,
+  showFocusRing: true,
+  inline: true,
+  editButtonPlacement: 'end'
+}, _class2.renderDefaultEditButton = _ref5 => {
+  let isVisible = _ref5.isVisible,
+      readOnly = _ref5.readOnly,
+      label = _ref5.label,
+      buttonProps = (0, _objectWithoutProperties2.default)(_ref5, _excluded2);
+
+  if (readOnly) {
+    return null;
+  }
+
+  return (0, _emotion.jsx)(_IconButton.IconButton, Object.assign({
+    size: "small",
+    screenReaderLabel: label,
+    withBackground: false,
+    withBorder: false
+  }, buttonProps), isVisible ? _IconEditLine.IconEditLine : null);
+}, _class2)) || _class);
 exports.InPlaceEdit = InPlaceEdit;
 var _default = InPlaceEdit;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-editable",
-  "version": "8.25.1-snapshot-10",
+  "version": "8.25.1-snapshot-13",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,21 +23,21 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.25.1-snapshot-10",
-    "@instructure/ui-test-utils": "8.25.1-snapshot-10"
+    "@instructure/ui-babel-preset": "8.25.1-snapshot-13",
+    "@instructure/ui-test-utils": "8.25.1-snapshot-13"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.25.1-snapshot-10",
-    "@instructure/emotion": "8.25.1-snapshot-10",
-    "@instructure/ui-a11y-content": "8.25.1-snapshot-10",
-    "@instructure/ui-buttons": "8.25.1-snapshot-10",
-    "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-flex": "8.25.1-snapshot-10",
-    "@instructure/ui-focusable": "8.25.1-snapshot-10",
-    "@instructure/ui-icons": "8.25.1-snapshot-10",
-    "@instructure/ui-utils": "8.25.1-snapshot-10",
-    "@instructure/ui-view": "8.25.1-snapshot-10",
+    "@instructure/console": "8.25.1-snapshot-13",
+    "@instructure/emotion": "8.25.1-snapshot-13",
+    "@instructure/ui-a11y-content": "8.25.1-snapshot-13",
+    "@instructure/ui-buttons": "8.25.1-snapshot-13",
+    "@instructure/ui-dom-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-flex": "8.25.1-snapshot-13",
+    "@instructure/ui-focusable": "8.25.1-snapshot-13",
+    "@instructure/ui-icons": "8.25.1-snapshot-13",
+    "@instructure/ui-utils": "8.25.1-snapshot-13",
+    "@instructure/ui-view": "8.25.1-snapshot-13",
     "prop-types": "^15"
   },
   "peerDependencies": {