@instructure/ui-editable 8.10.3-snapshot.3 → 8.11.1-snapshot.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.11.0](https://github.com/instructure/instructure-ui/compare/v8.10.2...v8.11.0) (2021-10-15)
+
+**Note:** Version bump only for package @instructure/ui-editable
+
 ## [8.10.2](https://github.com/instructure/instructure-ui/compare/v8.10.1...v8.10.2) (2021-10-01)
 
 **Note:** Version bump only for package @instructure/ui-editable

package/es/Editable/index.js

@@ -97,6 +97,17 @@ class Editable extends Component {
       this.enterEdit();
     };
 
+    this.ref = null;
+
+    this.handleContainerRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
     this.getContainerProps = (props = {}) => {
       const _this$props = this.props,
             mode = _this$props.mode,
@@ -107,7 +118,8 @@ class Editable extends Component {
         onMouseDown: mode !== 'edit' ? this.handleViewClick : null,
         onKeyUp: mode === 'edit' ? this.handleEditESC : null,
         readOnly,
-        ...props
+        ...props,
+        ref: this.handleContainerRef
       };
     };
 

package/es/Editable/props.js

@@ -65,7 +65,12 @@ const propTypes = {
   /**
    * The mode is fixed as 'view'
    */
-  readOnly: PropTypes.bool
+  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'];
+const allowedProps = ['mode', 'onChangeMode', 'children', 'render', 'value', 'onChange', 'readOnly', 'elementRef'];
 export { propTypes, allowedProps };

package/es/InPlaceEdit/index.js

@@ -45,6 +45,11 @@ category: components
 let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp = _class2 = class InPlaceEdit extends Component {
   constructor(props) {
     super(props);
+    this.ref = null;
+
+    this.handleRef = el => {
+      this.ref = el;
+    };
 
     this.handleEditButtonRef = el => {
       this._editButtonRef = el;
@@ -140,7 +145,8 @@ let InPlaceEdit = (_dec = withStyle(generateStyle, null), _dec(_class = (_temp =
       render: this.renderAll,
       value: value,
       onChange: onChange,
-      readOnly: readOnly
+      readOnly: readOnly,
+      elementRef: this.handleRef
     });
   }
 

package/lib/Editable/index.js

@@ -109,6 +109,17 @@ class Editable extends _react.Component {
       this.enterEdit();
     };
 
+    this.ref = null;
+
+    this.handleContainerRef = el => {
+      const elementRef = this.props.elementRef;
+      this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
     this.getContainerProps = (props = {}) => {
       const _this$props = this.props,
             mode = _this$props.mode,
@@ -119,7 +130,8 @@ class Editable extends _react.Component {
         onMouseDown: mode !== 'edit' ? this.handleViewClick : null,
         onKeyUp: mode === 'edit' ? this.handleEditESC : null,
         readOnly,
-        ...props
+        ...props,
+        ref: this.handleContainerRef
       };
     };
 

package/lib/Editable/props.js

@@ -75,8 +75,13 @@ const propTypes = {
   /**
    * The mode is fixed as 'view'
    */
-  readOnly: _propTypes.default.bool
+  readOnly: _propTypes.default.bool,
+
+  /**
+   * provides a reference to the underlying html root element (container)
+   */
+  elementRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;
-const allowedProps = ['mode', 'onChangeMode', 'children', 'render', 'value', 'onChange', 'readOnly'];
+const allowedProps = ['mode', 'onChangeMode', 'children', 'render', 'value', 'onChange', 'readOnly', 'elementRef'];
 exports.allowedProps = allowedProps;

package/lib/InPlaceEdit/index.js

@@ -39,6 +39,11 @@ category: components
 let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_class = (_temp = _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;
@@ -134,7 +139,8 @@ let InPlaceEdit = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec(_
       render: this.renderAll,
       value: value,
       onChange: onChange,
-      readOnly: readOnly
+      readOnly: readOnly,
+      elementRef: this.handleRef
     });
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-editable",
-  "version": "8.10.3-snapshot.3+2ee813492",
+  "version": "8.11.1-snapshot.0+8536a1c9b",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,21 +24,21 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.10.3-snapshot.3+2ee813492",
-    "@instructure/ui-test-utils": "8.10.3-snapshot.3+2ee813492"
+    "@instructure/ui-babel-preset": "8.11.1-snapshot.0+8536a1c9b",
+    "@instructure/ui-test-utils": "8.11.1-snapshot.0+8536a1c9b"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.10.3-snapshot.3+2ee813492",
-    "@instructure/emotion": "8.10.3-snapshot.3+2ee813492",
-    "@instructure/ui-a11y-content": "8.10.3-snapshot.3+2ee813492",
-    "@instructure/ui-buttons": "8.10.3-snapshot.3+2ee813492",
-    "@instructure/ui-dom-utils": "8.10.3-snapshot.3+2ee813492",
-    "@instructure/ui-flex": "8.10.3-snapshot.3+2ee813492",
-    "@instructure/ui-focusable": "8.10.3-snapshot.3+2ee813492",
-    "@instructure/ui-icons": "8.10.3-snapshot.3+2ee813492",
-    "@instructure/ui-utils": "8.10.3-snapshot.3+2ee813492",
-    "@instructure/ui-view": "8.10.3-snapshot.3+2ee813492",
+    "@instructure/console": "8.11.1-snapshot.0+8536a1c9b",
+    "@instructure/emotion": "8.11.1-snapshot.0+8536a1c9b",
+    "@instructure/ui-a11y-content": "8.11.1-snapshot.0+8536a1c9b",
+    "@instructure/ui-buttons": "8.11.1-snapshot.0+8536a1c9b",
+    "@instructure/ui-dom-utils": "8.11.1-snapshot.0+8536a1c9b",
+    "@instructure/ui-flex": "8.11.1-snapshot.0+8536a1c9b",
+    "@instructure/ui-focusable": "8.11.1-snapshot.0+8536a1c9b",
+    "@instructure/ui-icons": "8.11.1-snapshot.0+8536a1c9b",
+    "@instructure/ui-utils": "8.11.1-snapshot.0+8536a1c9b",
+    "@instructure/ui-view": "8.11.1-snapshot.0+8536a1c9b",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -49,5 +49,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "2ee8134925b02efbc5d39662a8b1edb2c83a420d"
+  "gitHead": "8536a1c9badcd8c1d2ce55dfb462d1899e3ca500"
 }

package/src/Editable/index.tsx

@@ -171,6 +171,18 @@ class Editable extends Component<EditableProps> {
     this.enterEdit()
   }
 
+  ref: Element | null = null
+
+  handleContainerRef = (el: Element | null) => {
+    const { elementRef } = this.props
+
+    this.ref = el
+
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
   // ------- prop getters ------
   getContainerProps = (props = {}) => {
     const { mode, readOnly } = this.props
@@ -180,7 +192,8 @@ class Editable extends Component<EditableProps> {
       onMouseDown: mode !== 'edit' ? this.handleViewClick : null,
       onKeyUp: mode === 'edit' ? this.handleEditESC : null,
       readOnly,
-      ...props
+      ...props,
+      ref: this.handleContainerRef
     }
   }
 

package/src/Editable/props.ts

@@ -34,6 +34,7 @@ type EditableOwnProps = {
   value?: any
   onChange?: (...args: any[]) => any
   readOnly?: boolean
+  elementRef?: (element: Element | null) => void
 }
 
 type PropKeys = keyof EditableOwnProps
@@ -81,7 +82,11 @@ const propTypes: PropValidators<PropKeys> = {
   /**
    * The mode is fixed as 'view'
    */
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  /**
+   * provides a reference to the underlying html root element (container)
+   */
+  elementRef: PropTypes.func
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -91,7 +96,8 @@ const allowedProps: AllowedPropKeys = [
   'render',
   'value',
   'onChange',
-  'readOnly'
+  'readOnly',
+  'elementRef'
 ]
 
 export type { EditableProps }

package/src/InPlaceEdit/index.tsx

@@ -56,6 +56,12 @@ class InPlaceEdit extends Component<InPlaceEditProps> {
     editButtonPlacement: 'end'
   }
 
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    this.ref = el
+  }
+
   // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
   constructor(props) {
     super(props)
@@ -189,6 +195,7 @@ class InPlaceEdit extends Component<InPlaceEditProps> {
         value={value}
         onChange={onChange}
         readOnly={readOnly}
+        elementRef={this.handleRef}
       />
     )
   }

package/types/Editable/index.d.ts

@@ -15,6 +15,7 @@ declare class Editable extends Component<EditableProps> {
         value?: any;
         onChange?: ((...args: any[]) => any) | undefined;
         readOnly?: boolean | undefined;
+        elementRef?: ((element: Element | null) => void) | undefined;
     }>;
     static allowedProps: readonly (keyof {
         mode: "view" | "edit";
@@ -24,6 +25,7 @@ declare class Editable extends Component<EditableProps> {
         value?: any;
         onChange?: ((...args: any[]) => any) | undefined;
         readOnly?: boolean | undefined;
+        elementRef?: ((element: Element | null) => void) | undefined;
     })[];
     static defaultProps: {
         readOnly: boolean;
@@ -50,7 +52,10 @@ declare class Editable extends Component<EditableProps> {
     handleEditButtonFocus: (event: any) => void;
     handleEditButtonBlur: (event: any) => void;
     handleEditButtonClick: (event: any) => void;
+    ref: Element | null;
+    handleContainerRef: (el: Element | null) => void;
     getContainerProps: (props?: {}) => {
+        ref: (el: Element | null) => void;
         onMouseOver: (event: any) => void;
         onMouseOut: (event: any) => void;
         onMouseDown: ((event: any) => void) | null;

package/types/Editable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Editable/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C;;;;;GAKG;AACH,cAAM,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7C,MAAM,CAAC,SAAS;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;MAGlB;IAED,KAAK;;;MAGJ;IAED,UAAU,OAAO;IACjB,cAAc,OAAO;gBAGT,KAAK,KAAA;IASjB,iBAAiB;IAKjB,oBAAoB;IAGpB,kBAAkB,CAAC,SAAS,KAAA;IAmB5B,WAAW;IAWX,SAAS;IAOT,SAAS;IAUT,aAAa,uBAIZ;IAGD,mBAAmB,uBAMlB;IAGD,kBAAkB,uBAOjB;IAGD,eAAe,uBAMd;IAGD,cAAc,uBAEb;IAGD,qBAAqB,uBAEpB;IAGD,oBAAoB,uBAEnB;IAGD,qBAAqB,uBAEpB;IAGD,iBAAiB;;;;;;MAUhB;IAED,cAAc;;;MAMb;IAGD,cAAc,sBAWb;IAED,kBAAkB;;;;;;;MAajB;IAED,MAAM;CAeP;AAED,eAAe,QAAQ,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Editable/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C;;;;;GAKG;AACH,cAAM,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7C,MAAM,CAAC,SAAS;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;MAGlB;IAED,KAAK;;;MAGJ;IAED,UAAU,OAAO;IACjB,cAAc,OAAO;gBAGT,KAAK,KAAA;IASjB,iBAAiB;IAKjB,oBAAoB;IAGpB,kBAAkB,CAAC,SAAS,KAAA;IAmB5B,WAAW;IAWX,SAAS;IAOT,SAAS;IAUT,aAAa,uBAIZ;IAGD,mBAAmB,uBAMlB;IAGD,kBAAkB,uBAOjB;IAGD,eAAe,uBAMd;IAGD,cAAc,uBAEb;IAGD,qBAAqB,uBAEpB;IAGD,oBAAoB,uBAEnB;IAGD,qBAAqB,uBAEpB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,kBAAkB,OAAQ,OAAO,GAAG,IAAI,UAQvC;IAGD,iBAAiB;kBAXS,OAAO,GAAG,IAAI;;;;;;MAsBvC;IAED,cAAc;;;MAMb;IAGD,cAAc,sBAWb;IAED,kBAAkB;;;;;;;MAajB;IAED,MAAM;CAeP;AAED,eAAe,QAAQ,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/types/Editable/props.d.ts

@@ -7,6 +7,7 @@ declare type EditableOwnProps = {
     value?: any;
     onChange?: (...args: any[]) => any;
     readOnly?: boolean;
+    elementRef?: (element: Element | null) => void;
 };
 declare type PropKeys = keyof EditableOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;

package/types/Editable/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Editable/props.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,aAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAChC,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,gBAAgB,CAAA;AAEtC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,aAAa,GAAG,gBAAgB,CAAA;AAErC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAwCvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAQnB,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Editable/props.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,aAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAChC,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,gBAAgB,CAAA;AAEtC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,aAAa,GAAG,gBAAgB,CAAA;AAErC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA4CvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eASnB,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/InPlaceEdit/index.d.ts

@@ -41,6 +41,8 @@ declare class InPlaceEdit extends Component<InPlaceEditProps> {
         inline: boolean;
         editButtonPlacement: string;
     };
+    ref: Element | null;
+    handleRef: (el: Element | null) => void;
     constructor(props: any);
     componentDidMount(): void;
     componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;

package/types/InPlaceEdit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InPlaceEdit/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAOrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;GAIG;AACH,cACM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,iBAAgB;IAC3C,MAAM,CAAC,SAAS;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;MAKlB;gBAGW,KAAK,KAAA;IASjB,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAMjD,mBAAmB,oBAGlB;IAGD,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE;;;;;KAAA;IAoBlD,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;;KAAA;IAK/B,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE;;;KAAA;IASvC,MAAM,CAAC,uBAAuB;;;;;iCAuB7B;IAED,SAAS;;;;;0BAiCR;IAED,MAAM;CAcP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InPlaceEdit/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAOrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;GAIG;AACH,cACM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,iBAAgB;IAC3C,MAAM,CAAC,SAAS;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;gBAGW,KAAK,KAAA;IASjB,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAMjD,mBAAmB,oBAGlB;IAGD,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE;;;;;KAAA;IAoBlD,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;;KAAA;IAK/B,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE;;;KAAA;IASvC,MAAM,CAAC,uBAAuB;;;;;iCAuB7B;IAED,SAAS;;;;;0BAiCR;IAED,MAAM;CAeP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}