@instructure/ui-editable 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/lib/Editable/v1/index.js

@@ -8,7 +8,7 @@ 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");
+var _props = require("./props");
 /*
  * The MIT License (MIT)
  *
@@ -39,115 +39,21 @@ category: components
 ---
 **/
 class Editable extends _react.Component {
-  constructor(_props) {
-    super(_props);
-    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') {
-        event.stopPropagation();
-        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 = () => {
-      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);
-      }
-    };
-    // ------- prop getters ------
-    this.getContainerProps = (props = {}) => {
-      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 : void 0,
-        onKeyUp: mode === 'edit' ? this.handleEditESC : void 0,
-        readOnly,
-        ...props,
-        ref: this.handleContainerRef
-      };
-    };
-    this.getViewerProps = (props = {}) => {
-      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 = (props = {}) => {
-      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"');
+  static displayName = "Editable";
+  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"');
   }
   componentDidMount() {
     if (this.props.mode === 'edit') {
@@ -155,10 +61,11 @@ class Editable extends _react.Component {
     }
   }
   componentDidUpdate(prevProps) {
-    const _this$props2 = this.props,
-      mode = _this$props2.mode,
-      value = _this$props2.value,
-      onChange = _this$props2.onChange;
+    const {
+      mode,
+      value,
+      onChange
+    } = this.props;
 
     // on the switch from view -> edit
     if (prevProps.mode !== 'edit' && mode === 'edit') {
@@ -200,12 +107,116 @@ class Editable extends _react.Component {
       }
     }
   }
+  handleEditESC = event => {
+    if (event.key === 'Escape') {
+      event.stopPropagation();
+      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 = () => {
+    this.enterView();
+  };
+  handleEditButtonFocus = () => {
+    this.setState({
+      showModeToggle: true
+    });
+  };
+  handleEditButtonBlur = () => {
+    this.setState({
+      showModeToggle: false
+    });
+  };
+  handleEditButtonClick = () => {
+    this.enterEdit();
+  };
+  ref = null;
+  handleContainerRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
+
+  // ------- prop getters ------
+  getContainerProps = (props = {}) => {
+    const {
+      mode,
+      readOnly
+    } = this.props;
+    return {
+      onMouseOver: this.handleViewMouseOver,
+      onMouseOut: this.handleViewMouseOut,
+      onMouseDown: mode !== 'edit' ? this.handleViewClick : undefined,
+      onKeyUp: mode === 'edit' ? this.handleEditESC : undefined,
+      readOnly,
+      ...props,
+      ref: this.handleContainerRef
+    };
+  };
+  getViewerProps = (props = {}) => {
+    return {
+      mode: this.props.mode,
+      readOnly: this.props.readOnly,
+      ...props
+    };
+  };
+  getEditorProps = (props = {}) => {
+    return {
+      mode: this.props.mode,
+      onBlur: this.handleEditBlur,
+      editorRef: el => {
+        this._editorRef = el;
+      },
+      readOnly: this.props.readOnly,
+      ...props
+    };
+  };
+  getEditButtonProps = (props = {}) => {
+    return {
+      onClick: this.handleEditButtonClick,
+      onFocus: this.handleEditButtonFocus,
+      onBlur: this.handleEditButtonBlur,
+      isVisible: this.state.showModeToggle,
+      buttonRef: el => {
+        this._editButtonRef = el;
+      },
+      readOnly: this.props.readOnly,
+      ...props
+    };
+  };
   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;
+    const {
+      children,
+      render = children,
+      mode
+    } = this.props;
     if (typeof render === 'function') {
       return render({
         mode,
@@ -220,10 +231,4 @@ class Editable extends _react.Component {
   }
 }
 exports.Editable = Editable;
-Editable.displayName = "Editable";
-Editable.allowedProps = _props2.allowedProps;
-Editable.defaultProps = {
-  readOnly: false,
-  children: null
-};
 var _default = exports.default = Editable;

package/lib/InPlaceEdit/v1/index.js

@@ -17,7 +17,7 @@ var _v = require("../../Editable/v1");
 var _styles = _interopRequireDefault(require("./styles"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _InPlaceEdit;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -46,68 +46,51 @@ var _dec, _class, _InPlaceEdit;
 category: components
 ---
 **/
-let InPlaceEdit = exports.InPlaceEdit = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = (_InPlaceEdit = class InPlaceEdit extends _react.Component {
+let InPlaceEdit = exports.InPlaceEdit = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = class InPlaceEdit extends _react.Component {
+  static displayName = "InPlaceEdit";
+  static componentId = 'InPlaceEdit';
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    readOnly: false,
+    showFocusRing: true,
+    inline: true,
+    editButtonPlacement: 'end'
+  };
+  ref = null;
+  _editButtonRef = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   constructor(props) {
     super(props);
-    this.ref = null;
-    this._editButtonRef = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-    this.handleEditButtonRef = el => {
-      this._editButtonRef = el;
-    };
-    this.renderAll = ({
-      getContainerProps,
-      getViewerProps,
-      getEditorProps,
-      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, _jsxRuntime.jsxs)(_v11_.Flex, {
-        display: this.props.inline ? 'inline-flex' : 'flex',
-        direction: flexDir,
-        justifyItems: justifyItems,
-        ...getContainerProps(),
-        children: [(0, _jsxRuntime.jsxs)(_v11_.Flex.Item, {
-          shouldGrow: true,
-          shouldShrink: true,
-          children: [this.renderEditor(getEditorProps()), this.renderViewer(getViewerProps())]
-        }), (0, _jsxRuntime.jsx)(_v11_.Flex.Item, {
-          margin: buttonMargin,
-          children: this.renderEditButton(getEditButtonProps())
-        })]
-      });
-    };
     (0, _console.logWarn)(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);
+    this.props.makeStyles?.();
   }
   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);
+    this.props.makeStyles?.();
   }
+  handleEditButtonRef = el => {
+    this._editButtonRef = el;
+  };
   renderEditor({
     mode,
     onBlur,
     editorRef,
     readOnly
   }) {
-    var _this$props$styles;
-    const _this$props3 = this.props,
-      showFocusRing = _this$props3.showFocusRing,
-      renderEditor = _this$props3.renderEditor;
+    const {
+      showFocusRing,
+      renderEditor
+    } = this.props;
     const isEditMode = !readOnly && mode === 'edit';
     return isEditMode ? (0, _jsxRuntime.jsx)(_v11_3.View, {
       as: "span",
       display: "block",
       withFocusOutline: showFocusRing,
       position: "relative",
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.inPlaceEdit,
+      css: this.props.styles?.inPlaceEdit,
       borderRadius: "medium",
       margin: "auto",
       children: renderEditor({
@@ -134,14 +117,56 @@ let InPlaceEdit = exports.InPlaceEdit = (_dec = (0, _emotion.withStyleLegacy)(_s
 
   // Render a default edit button, an icon button with the edit icon
   // the margin makes room for the focus ring
-
+  static renderDefaultEditButton = ({
+    isVisible,
+    readOnly,
+    label,
+    ...buttonProps
+  }) => {
+    if (readOnly) {
+      return null;
+    }
+    return (0, _jsxRuntime.jsx)(_v11_2.IconButton, {
+      size: "small",
+      screenReaderLabel: label,
+      withBackground: false,
+      withBorder: false,
+      ...buttonProps,
+      children: isVisible ? _IconEditLine.IconEditLine : null
+    });
+  };
+  renderAll = ({
+    getContainerProps,
+    getViewerProps,
+    getEditorProps,
+    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, _jsxRuntime.jsxs)(_v11_.Flex, {
+      display: this.props.inline ? 'inline-flex' : 'flex',
+      direction: flexDir,
+      justifyItems: justifyItems,
+      ...getContainerProps(),
+      children: [(0, _jsxRuntime.jsxs)(_v11_.Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true,
+        children: [this.renderEditor(getEditorProps()), this.renderViewer(getViewerProps())]
+      }), (0, _jsxRuntime.jsx)(_v11_.Flex.Item, {
+        margin: buttonMargin,
+        children: this.renderEditButton(getEditButtonProps())
+      })]
+    });
+  };
   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;
+    const {
+      mode,
+      value,
+      onChange,
+      onChangeMode,
+      readOnly
+    } = this.props;
     return (0, _jsxRuntime.jsx)(_v.Editable, {
       mode: mode,
       onChangeMode: onChangeMode,
@@ -152,27 +177,5 @@ let InPlaceEdit = exports.InPlaceEdit = (_dec = (0, _emotion.withStyleLegacy)(_s
       elementRef: this.handleRef
     });
   }
-}, _InPlaceEdit.displayName = "InPlaceEdit", _InPlaceEdit.componentId = 'InPlaceEdit', _InPlaceEdit.allowedProps = _props.allowedProps, _InPlaceEdit.defaultProps = {
-  readOnly: false,
-  showFocusRing: true,
-  inline: true,
-  editButtonPlacement: 'end'
-}, _InPlaceEdit.renderDefaultEditButton = ({
-  isVisible,
-  readOnly,
-  label,
-  ...buttonProps
-}) => {
-  if (readOnly) {
-    return null;
-  }
-  return (0, _jsxRuntime.jsx)(_v11_2.IconButton, {
-    size: "small",
-    screenReaderLabel: label,
-    withBackground: false,
-    withBorder: false,
-    ...buttonProps,
-    children: isVisible ? _IconEditLine.IconEditLine : null
-  });
-}, _InPlaceEdit)) || _class);
+}) || _class);
 var _default = exports.default = InPlaceEdit;

package/lib/InPlaceEdit/v2/index.js

@@ -17,7 +17,7 @@ var _v = require("../../Editable/v1");
 var _styles = _interopRequireDefault(require("./styles"));
 var _props = require("./props");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
-var _dec, _class, _InPlaceEdit;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -46,68 +46,51 @@ var _dec, _class, _InPlaceEdit;
 category: components
 ---
 **/
-let InPlaceEdit = exports.InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = (_InPlaceEdit = class InPlaceEdit extends _react.Component {
+let InPlaceEdit = exports.InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default), _dec(_class = class InPlaceEdit extends _react.Component {
+  static displayName = "InPlaceEdit";
+  static componentId = 'InPlaceEdit';
+  static allowedProps = _props.allowedProps;
+  static defaultProps = {
+    readOnly: false,
+    showFocusRing: true,
+    inline: true,
+    editButtonPlacement: 'end'
+  };
+  ref = null;
+  _editButtonRef = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   constructor(props) {
     super(props);
-    this.ref = null;
-    this._editButtonRef = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-    this.handleEditButtonRef = el => {
-      this._editButtonRef = el;
-    };
-    this.renderAll = ({
-      getContainerProps,
-      getViewerProps,
-      getEditorProps,
-      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, _jsxRuntime.jsxs)(_latest.Flex, {
-        display: this.props.inline ? 'inline-flex' : 'flex',
-        direction: flexDir,
-        justifyItems: justifyItems,
-        ...getContainerProps(),
-        children: [(0, _jsxRuntime.jsxs)(_latest.Flex.Item, {
-          shouldGrow: true,
-          shouldShrink: true,
-          children: [this.renderEditor(getEditorProps()), this.renderViewer(getViewerProps())]
-        }), (0, _jsxRuntime.jsx)(_latest.Flex.Item, {
-          margin: buttonMargin,
-          children: this.renderEditButton(getEditButtonProps())
-        })]
-      });
-    };
     (0, _console.logWarn)(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);
+    this.props.makeStyles?.();
   }
   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);
+    this.props.makeStyles?.();
   }
+  handleEditButtonRef = el => {
+    this._editButtonRef = el;
+  };
   renderEditor({
     mode,
     onBlur,
     editorRef,
     readOnly
   }) {
-    var _this$props$styles;
-    const _this$props3 = this.props,
-      showFocusRing = _this$props3.showFocusRing,
-      renderEditor = _this$props3.renderEditor;
+    const {
+      showFocusRing,
+      renderEditor
+    } = this.props;
     const isEditMode = !readOnly && mode === 'edit';
     return isEditMode ? (0, _jsxRuntime.jsx)(_latest3.View, {
       as: "span",
       display: "block",
       withFocusOutline: showFocusRing,
       position: "relative",
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.inPlaceEdit,
+      css: this.props.styles?.inPlaceEdit,
       borderRadius: "medium",
       margin: "auto",
       children: renderEditor({
@@ -134,14 +117,56 @@ let InPlaceEdit = exports.InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.
 
   // Render a default edit button, an icon button with the edit icon
   // the margin makes room for the focus ring
-
+  static renderDefaultEditButton = ({
+    isVisible,
+    readOnly,
+    label,
+    ...buttonProps
+  }) => {
+    if (readOnly) {
+      return null;
+    }
+    return (0, _jsxRuntime.jsx)(_latest2.IconButton, {
+      size: "small",
+      screenReaderLabel: label,
+      withBackground: false,
+      withBorder: false,
+      ...buttonProps,
+      children: isVisible ? _uiIcons.PencilInstUIIcon : null
+    });
+  };
+  renderAll = ({
+    getContainerProps,
+    getViewerProps,
+    getEditorProps,
+    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, _jsxRuntime.jsxs)(_latest.Flex, {
+      display: this.props.inline ? 'inline-flex' : 'flex',
+      direction: flexDir,
+      justifyItems: justifyItems,
+      ...getContainerProps(),
+      children: [(0, _jsxRuntime.jsxs)(_latest.Flex.Item, {
+        shouldGrow: true,
+        shouldShrink: true,
+        children: [this.renderEditor(getEditorProps()), this.renderViewer(getViewerProps())]
+      }), (0, _jsxRuntime.jsx)(_latest.Flex.Item, {
+        margin: buttonMargin,
+        children: this.renderEditButton(getEditButtonProps())
+      })]
+    });
+  };
   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;
+    const {
+      mode,
+      value,
+      onChange,
+      onChangeMode,
+      readOnly
+    } = this.props;
     return (0, _jsxRuntime.jsx)(_v.Editable, {
       mode: mode,
       onChangeMode: onChangeMode,
@@ -152,27 +177,5 @@ let InPlaceEdit = exports.InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.
       elementRef: this.handleRef
     });
   }
-}, _InPlaceEdit.displayName = "InPlaceEdit", _InPlaceEdit.componentId = 'InPlaceEdit', _InPlaceEdit.allowedProps = _props.allowedProps, _InPlaceEdit.defaultProps = {
-  readOnly: false,
-  showFocusRing: true,
-  inline: true,
-  editButtonPlacement: 'end'
-}, _InPlaceEdit.renderDefaultEditButton = ({
-  isVisible,
-  readOnly,
-  label,
-  ...buttonProps
-}) => {
-  if (readOnly) {
-    return null;
-  }
-  return (0, _jsxRuntime.jsx)(_latest2.IconButton, {
-    size: "small",
-    screenReaderLabel: label,
-    withBackground: false,
-    withBorder: false,
-    ...buttonProps,
-    children: isVisible ? _uiIcons.PencilInstUIIcon : null
-  });
-}, _InPlaceEdit)) || _class);
+}) || _class);
 var _default = exports.default = InPlaceEdit;