@instructure/ui-editable 8.25.1-snapshot.0 → 8.26.0

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.26.0](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.26.0) (2022-06-30)
+
+**Note:** Version bump only for package @instructure/ui-editable
+
 # [8.25.0](https://github.com/instructure/instructure-ui/compare/v8.24.5...v8.25.0) (2022-06-03)
 
 **Note:** Version bump only for package @instructure/ui-editable

package/es/Editable/index.js

@@ -30,8 +30,8 @@ import { propTypes, allowedProps } from './props';
 /**
 ---
 category: components
-experimental: true
 ---
+@tsProps
 **/
 class Editable extends Component {
   constructor(_props) {
@@ -80,23 +80,23 @@ class Editable extends Component {
       }
     };
 
-    this.handleEditBlur = event => {
+    this.handleEditBlur = () => {
       this.enterView();
     };
 
-    this.handleEditButtonFocus = event => {
+    this.handleEditButtonFocus = () => {
       this.setState({
         showModeToggle: true
       });
     };
 
-    this.handleEditButtonBlur = event => {
+    this.handleEditButtonBlur = () => {
       this.setState({
         showModeToggle: false
       });
     };
 
-    this.handleEditButtonClick = event => {
+    this.handleEditButtonClick = () => {
       this.enterEdit();
     };
 
@@ -119,8 +119,8 @@ class Editable extends Component {
       return {
         onMouseOver: _this.handleViewMouseOver,
         onMouseOut: _this.handleViewMouseOut,
-        onMouseDown: mode !== 'edit' ? _this.handleViewClick : null,
-        onKeyUp: mode === 'edit' ? _this.handleEditESC : null,
+        onMouseDown: mode !== 'edit' ? _this.handleViewClick : void 0,
+        onKeyUp: mode === 'edit' ? _this.handleEditESC : void 0,
         readOnly,
         ...props,
         ref: _this.handleContainerRef
@@ -136,14 +136,15 @@ class Editable extends Component {
       };
     };
 
-    this.getEditorProps = props => {
+    this.getEditorProps = function () {
+      let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
       return {
-        mode: this.props.mode,
-        onBlur: this.handleEditBlur,
+        mode: _this.props.mode,
+        onBlur: _this.handleEditBlur,
         editorRef: el => {
-          this._editorRef = el;
+          _this._editorRef = el;
         },
-        readOnly: this.props.readOnly,
+        readOnly: _this.props.readOnly,
         ...props
       };
     };
@@ -172,8 +173,6 @@ class Editable extends Component {
     }
   }
 
-  componentWillUnmount() {}
-
   componentDidUpdate(prevProps) {
     const _this$props2 = this.props,
           mode = _this$props2.mode,

package/es/Editable/props.js

@@ -23,53 +23,13 @@
  */
 import PropTypes from 'prop-types';
 const propTypes = {
-  /**
-   * If `'view'`: the view component is rendered,
-   * if `'edit'`: the edit component is rendered
-   */
   mode: PropTypes.oneOf(['view', 'edit']).isRequired,
-
-  /**
-   * Called when the component's mode changes
-   * @param {string} new_mode
-   */
   onChangeMode: PropTypes.func.isRequired,
-
-  /**
-   * @param {Object} renderProps
-   * @param {Boolean} mode
-   * @param {Function} renderProps.getContainerProps - Props to be spread onto the container element
-   * @param {Function} renderProps.getEditorProps - Props to be spread onto the editor element
-   * @param {Function} renderProps.getEditButtonProps - Props to be spread onto the edit button element
-   */
   children: PropTypes.func,
-
-  /**
-   * Identical to children
-   */
   render: PropTypes.func,
-
-  /**
-   * The current value.
-   * The value is managed by the consuming app, but we need to tell Editable
-   * it's changed or it won't re-render
-   */
   value: PropTypes.any,
-
-  /**
-   * Called when Editable switches from edit to view mode and the value has changed.
-   * @param {any} value
-   */
   onChange: PropTypes.func,
-
-  /**
-   * The mode is fixed as 'view'
-   */
   readOnly: PropTypes.bool,
-
-  /**
-   * provides a reference to the underlying html root element (container)
-   */
   elementRef: PropTypes.func
 };
 const allowedProps = ['mode', 'onChangeMode', 'children', 'render', 'value', 'onChange', 'readOnly', 'elementRef'];

package/es/InPlaceEdit/index.js

@@ -45,11 +45,13 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2 = class InPlaceEdit extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
+    this._editButtonRef = null;
 
     this.handleRef = el => {
       this.ref = el;
@@ -83,11 +85,15 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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(prevProps, prevState, snapshot) {
-    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);
   }
 
   renderEditor(_ref2) {
@@ -97,9 +103,9 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2
         onBlur = _ref2.onBlur,
         editorRef = _ref2.editorRef,
         readOnly = _ref2.readOnly;
-    const _this$props = this.props,
-          showFocusRing = _this$props.showFocusRing,
-          renderEditor = _this$props.renderEditor;
+    const _this$props3 = this.props,
+          showFocusRing = _this$props3.showFocusRing,
+          renderEditor = _this$props3.renderEditor;
     const isEditMode = !readOnly && mode === 'edit';
     return isEditMode ? jsx(View, {
       as: "span",
@@ -134,12 +140,12 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_class2
 
 
   render() {
-    const _this$props2 = this.props,
-          mode = _this$props2.mode,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange,
-          onChangeMode = _this$props2.onChangeMode,
-          readOnly = _this$props2.readOnly;
+    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;
     return jsx(Editable, {
       mode: mode,
       onChangeMode: onChangeMode,

package/es/InPlaceEdit/props.js

@@ -23,86 +23,16 @@
  */
 import PropTypes from 'prop-types';
 const propTypes = {
-  /**
-   * Function to render the view mode component.
-   * It is the consumer's responsibility to provide the
-   * current value or children.
-   *
-   * @returns {element} the viewer DOM sub-tree.
-   */
   renderViewer: PropTypes.func.isRequired,
-
-  /**
-   * Function to render the edit mode component
-   * It is the consumer's responsibility to provide the
-   * current value, and to attach the appropriate onChange
-   * event handler needed to capture the updated value. This
-   * new value must then be forwarded to the view mode component.
-   *
-   * @returns {element} the editor DOM sub-tree.
-   */
   renderEditor: PropTypes.func.isRequired,
-
-  /**
-   * Function to render the edit button.
-   *
-   * @param {Object} { isVisible, onClick, onFocus, onBlur, buttonRef }
-   * @returns {element} the edit button DOM sub-tree
-   *
-   * If you choose to use the default edit button, add `label` to the
-   * incoming `props` parameter and call `InPlaceEdit.renderDefaultEditButton(props)`
-   *
-   * If you choose to render a custom button, attach the on* event handlers
-   * and set `buttonRef` as a `ref` type property on the `button` element.
-   *
-   * `isVisible` is a hint as to whether the button is _typically_ shown,
-   * but you're free to ignore it for your use-case.
-   */
   renderEditButton: PropTypes.func.isRequired,
-
-  /**
-   * If `'view'`: the view component is rendered,
-   * if `'edit'`: the edit component is rendered
-   */
   mode: PropTypes.oneOf(['view', 'edit']).isRequired,
-
-  /**
-   * Called when the component's mode changes
-   * @param {string} newMode
-   */
   onChangeMode: PropTypes.func.isRequired,
-
-  /**
-   * The current value.
-   * The value is managed by the consuming app, but we need to tell InPlaceEdit
-   * it's changed or it won't re-render
-   */
   value: PropTypes.any,
-
-  /**
-   * Called when Editable switches from edit to view mode and the value has changed.
-   * @param {any} value
-   */
   onChange: PropTypes.func,
-
-  /**
-   * The mode is fixed as 'view'
-   */
   readOnly: PropTypes.bool,
-
-  /**
-   * Show a focus outline when the input is focused
-   */
   showFocusRing: PropTypes.bool,
-
-  /**
-   * Put the edit button before or after the view
-   */
   editButtonPlacement: PropTypes.oneOf(['start', 'end']),
-
-  /**
-   * Render outermost element inline v. block
-   */
   inline: PropTypes.bool
 };
 const allowedProps = ['renderViewer', 'renderEditor', 'renderEditButton', 'mode', 'onChangeMode', 'value', 'onChange', 'readOnly', 'showFocusRing', 'editButtonPlacement', 'inline'];

package/lib/Editable/index.js

@@ -42,8 +42,8 @@ var _props2 = require("./props");
 /**
 ---
 category: components
-experimental: true
 ---
+@tsProps
 **/
 class Editable extends _react.Component {
   constructor(_props) {
@@ -92,23 +92,23 @@ class Editable extends _react.Component {
       }
     };
 
-    this.handleEditBlur = event => {
+    this.handleEditBlur = () => {
       this.enterView();
     };
 
-    this.handleEditButtonFocus = event => {
+    this.handleEditButtonFocus = () => {
       this.setState({
         showModeToggle: true
       });
     };
 
-    this.handleEditButtonBlur = event => {
+    this.handleEditButtonBlur = () => {
       this.setState({
         showModeToggle: false
       });
     };
 
-    this.handleEditButtonClick = event => {
+    this.handleEditButtonClick = () => {
       this.enterEdit();
     };
 
@@ -131,8 +131,8 @@ class Editable extends _react.Component {
       return {
         onMouseOver: _this.handleViewMouseOver,
         onMouseOut: _this.handleViewMouseOut,
-        onMouseDown: mode !== 'edit' ? _this.handleViewClick : null,
-        onKeyUp: mode === 'edit' ? _this.handleEditESC : null,
+        onMouseDown: mode !== 'edit' ? _this.handleViewClick : void 0,
+        onKeyUp: mode === 'edit' ? _this.handleEditESC : void 0,
         readOnly,
         ...props,
         ref: _this.handleContainerRef
@@ -148,14 +148,15 @@ class Editable extends _react.Component {
       };
     };
 
-    this.getEditorProps = props => {
+    this.getEditorProps = function () {
+      let props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
       return {
-        mode: this.props.mode,
-        onBlur: this.handleEditBlur,
+        mode: _this.props.mode,
+        onBlur: _this.handleEditBlur,
         editorRef: el => {
-          this._editorRef = el;
+          _this._editorRef = el;
         },
-        readOnly: this.props.readOnly,
+        readOnly: _this.props.readOnly,
         ...props
       };
     };
@@ -184,8 +185,6 @@ class Editable extends _react.Component {
     }
   }
 
-  componentWillUnmount() {}
-
   componentDidUpdate(prevProps) {
     const _this$props2 = this.props,
           mode = _this$props2.mode,

package/lib/Editable/props.js

@@ -33,53 +33,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * If `'view'`: the view component is rendered,
-   * if `'edit'`: the edit component is rendered
-   */
   mode: _propTypes.default.oneOf(['view', 'edit']).isRequired,
-
-  /**
-   * Called when the component's mode changes
-   * @param {string} new_mode
-   */
   onChangeMode: _propTypes.default.func.isRequired,
-
-  /**
-   * @param {Object} renderProps
-   * @param {Boolean} mode
-   * @param {Function} renderProps.getContainerProps - Props to be spread onto the container element
-   * @param {Function} renderProps.getEditorProps - Props to be spread onto the editor element
-   * @param {Function} renderProps.getEditButtonProps - Props to be spread onto the edit button element
-   */
   children: _propTypes.default.func,
-
-  /**
-   * Identical to children
-   */
   render: _propTypes.default.func,
-
-  /**
-   * The current value.
-   * The value is managed by the consuming app, but we need to tell Editable
-   * it's changed or it won't re-render
-   */
   value: _propTypes.default.any,
-
-  /**
-   * Called when Editable switches from edit to view mode and the value has changed.
-   * @param {any} value
-   */
   onChange: _propTypes.default.func,
-
-  /**
-   * The mode is fixed as 'view'
-   */
   readOnly: _propTypes.default.bool,
-
-  /**
-   * provides a reference to the underlying html root element (container)
-   */
   elementRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/lib/InPlaceEdit/index.js

@@ -40,11 +40,13 @@ var _dec, _class, _class2;
 ---
 category: components
 ---
+@tsProps
 **/
 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._editButtonRef = null;
 
     this.handleRef = el => {
       this.ref = el;
@@ -78,11 +80,15 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
   }
 
   componentDidMount() {
-    this.props.makeStyles();
+    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(prevProps, prevState, snapshot) {
-    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);
   }
 
   renderEditor(_ref2) {
@@ -92,9 +98,9 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
         onBlur = _ref2.onBlur,
         editorRef = _ref2.editorRef,
         readOnly = _ref2.readOnly;
-    const _this$props = this.props,
-          showFocusRing = _this$props.showFocusRing,
-          renderEditor = _this$props.renderEditor;
+    const _this$props3 = this.props,
+          showFocusRing = _this$props3.showFocusRing,
+          renderEditor = _this$props3.renderEditor;
     const isEditMode = !readOnly && mode === 'edit';
     return isEditMode ? (0, _emotion.jsx)(_View.View, {
       as: "span",
@@ -128,12 +134,12 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
 
 
   render() {
-    const _this$props2 = this.props,
-          mode = _this$props2.mode,
-          value = _this$props2.value,
-          onChange = _this$props2.onChange,
-          onChangeMode = _this$props2.onChangeMode,
-          readOnly = _this$props2.readOnly;
+    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;
     return (0, _emotion.jsx)(_Editable.Editable, {
       mode: mode,
       onChangeMode: onChangeMode,

package/lib/InPlaceEdit/props.js

@@ -33,86 +33,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * Function to render the view mode component.
-   * It is the consumer's responsibility to provide the
-   * current value or children.
-   *
-   * @returns {element} the viewer DOM sub-tree.
-   */
   renderViewer: _propTypes.default.func.isRequired,
-
-  /**
-   * Function to render the edit mode component
-   * It is the consumer's responsibility to provide the
-   * current value, and to attach the appropriate onChange
-   * event handler needed to capture the updated value. This
-   * new value must then be forwarded to the view mode component.
-   *
-   * @returns {element} the editor DOM sub-tree.
-   */
   renderEditor: _propTypes.default.func.isRequired,
-
-  /**
-   * Function to render the edit button.
-   *
-   * @param {Object} { isVisible, onClick, onFocus, onBlur, buttonRef }
-   * @returns {element} the edit button DOM sub-tree
-   *
-   * If you choose to use the default edit button, add `label` to the
-   * incoming `props` parameter and call `InPlaceEdit.renderDefaultEditButton(props)`
-   *
-   * If you choose to render a custom button, attach the on* event handlers
-   * and set `buttonRef` as a `ref` type property on the `button` element.
-   *
-   * `isVisible` is a hint as to whether the button is _typically_ shown,
-   * but you're free to ignore it for your use-case.
-   */
   renderEditButton: _propTypes.default.func.isRequired,
-
-  /**
-   * If `'view'`: the view component is rendered,
-   * if `'edit'`: the edit component is rendered
-   */
   mode: _propTypes.default.oneOf(['view', 'edit']).isRequired,
-
-  /**
-   * Called when the component's mode changes
-   * @param {string} newMode
-   */
   onChangeMode: _propTypes.default.func.isRequired,
-
-  /**
-   * The current value.
-   * The value is managed by the consuming app, but we need to tell InPlaceEdit
-   * it's changed or it won't re-render
-   */
   value: _propTypes.default.any,
-
-  /**
-   * Called when Editable switches from edit to view mode and the value has changed.
-   * @param {any} value
-   */
   onChange: _propTypes.default.func,
-
-  /**
-   * The mode is fixed as 'view'
-   */
   readOnly: _propTypes.default.bool,
-
-  /**
-   * Show a focus outline when the input is focused
-   */
   showFocusRing: _propTypes.default.bool,
-
-  /**
-   * Put the edit button before or after the view
-   */
   editButtonPlacement: _propTypes.default.oneOf(['start', 'end']),
-
-  /**
-   * Render outermost element inline v. block
-   */
   inline: _propTypes.default.bool
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-editable",
-  "version": "8.25.1-snapshot.0+59b6babce",
+  "version": "8.26.0",
   "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.0+59b6babce",
-    "@instructure/ui-test-utils": "8.25.1-snapshot.0+59b6babce"
+    "@instructure/ui-babel-preset": "8.26.0",
+    "@instructure/ui-test-utils": "8.26.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/emotion": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-a11y-content": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-buttons": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-dom-utils": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-flex": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-focusable": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-icons": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-utils": "8.25.1-snapshot.0+59b6babce",
-    "@instructure/ui-view": "8.25.1-snapshot.0+59b6babce",
+    "@instructure/console": "8.26.0",
+    "@instructure/emotion": "8.26.0",
+    "@instructure/ui-a11y-content": "8.26.0",
+    "@instructure/ui-buttons": "8.26.0",
+    "@instructure/ui-dom-utils": "8.26.0",
+    "@instructure/ui-flex": "8.26.0",
+    "@instructure/ui-focusable": "8.26.0",
+    "@instructure/ui-icons": "8.26.0",
+    "@instructure/ui-utils": "8.26.0",
+    "@instructure/ui-view": "8.26.0",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -47,6 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "59b6babce07a9242111475156f544ec11c1a9283"
+  "sideEffects": false
 }