@instructure/ui-focusable 8.10.1-snapshot.4 → 8.10.2-snapshot.22

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.10.1](https://github.com/instructure/instructure-ui/compare/v8.10.0...v8.10.1) (2021-10-01)
+
+**Note:** Version bump only for package @instructure/ui-focusable
+
 # [8.10.0](https://github.com/instructure/instructure-ui/compare/v8.9.1...v8.10.0) (2021-09-28)
 
 **Note:** Version bump only for package @instructure/ui-focusable

package/es/Focusable/index.js

@@ -21,16 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { Component } from 'react';
+import { cloneElement, Component } from 'react';
 import { addInputModeListener, addEventListener, containsActiveElement, findFocusable } from '@instructure/ui-dom-utils';
 import { logWarn as warn } from '@instructure/console';
 import { propTypes, allowedProps } from './props';
-
+import { createChainedFunction } from '@instructure/ui-utils';
 /**
 ---
 category: components/utilities
 ---
 **/
+
 class Focusable extends Component {
   constructor(...args) {
     super(...args);
@@ -59,6 +60,12 @@ class Focusable extends Component {
         focused: false
       });
     };
+
+    this.ref = null;
+
+    this.attachRef = el => {
+      this.ref = el;
+    };
   }
 
   componentDidMount() {
@@ -217,10 +224,14 @@ class Focusable extends Component {
           focused = _this$state2.focused;
 
     if (typeof render === 'function') {
-      return render({
+      const rendered = render({
         focused,
         focusable,
-        focusVisible: this.isFocusVisible(focusable, focused)
+        focusVisible: this.isFocusVisible(focusable, focused),
+        attachRef: this.attachRef
+      });
+      return /*#__PURE__*/cloneElement(rendered, {
+        ref: rendered.ref ? createChainedFunction(rendered.ref, this.attachRef) : this.attachRef
       });
     } else {
       return null;

package/lib/Focusable/index.js

@@ -19,6 +19,8 @@ var _console = require("@instructure/console");
 
 var _props = require("./props");
 
+var _createChainedFunction = require("@instructure/ui-utils/lib/createChainedFunction.js");
+
 /*
  * The MIT License (MIT)
  *
@@ -76,6 +78,12 @@ class Focusable extends _react.Component {
         focused: false
       });
     };
+
+    this.ref = null;
+
+    this.attachRef = el => {
+      this.ref = el;
+    };
   }
 
   componentDidMount() {
@@ -234,10 +242,14 @@ class Focusable extends _react.Component {
           focused = _this$state2.focused;
 
     if (typeof render === 'function') {
-      return render({
+      const rendered = render({
         focused,
         focusable,
-        focusVisible: this.isFocusVisible(focusable, focused)
+        focusVisible: this.isFocusVisible(focusable, focused),
+        attachRef: this.attachRef
+      });
+      return /*#__PURE__*/(0, _react.cloneElement)(rendered, {
+        ref: rendered.ref ? (0, _createChainedFunction.createChainedFunction)(rendered.ref, this.attachRef) : this.attachRef
       });
     } else {
       return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-focusable",
-  "version": "8.10.1-snapshot.4+6c5c9e653",
+  "version": "8.10.2-snapshot.22+b84160eff",
   "description": "A utility used to identify when an element receives focus.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,16 +24,16 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.10.1-snapshot.4+6c5c9e653",
-    "@instructure/ui-test-utils": "8.10.1-snapshot.4+6c5c9e653"
+    "@instructure/ui-babel-preset": "8.10.2-snapshot.22+b84160eff",
+    "@instructure/ui-test-utils": "8.10.2-snapshot.22+b84160eff"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.10.1-snapshot.4+6c5c9e653",
-    "@instructure/ui-dom-utils": "8.10.1-snapshot.4+6c5c9e653",
-    "@instructure/ui-react-utils": "8.10.1-snapshot.4+6c5c9e653",
-    "@instructure/ui-utils": "8.10.1-snapshot.4+6c5c9e653",
-    "@instructure/ui-view": "8.10.1-snapshot.4+6c5c9e653",
+    "@instructure/console": "8.10.2-snapshot.22+b84160eff",
+    "@instructure/ui-dom-utils": "8.10.2-snapshot.22+b84160eff",
+    "@instructure/ui-react-utils": "8.10.2-snapshot.22+b84160eff",
+    "@instructure/ui-utils": "8.10.2-snapshot.22+b84160eff",
+    "@instructure/ui-view": "8.10.2-snapshot.22+b84160eff",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "6c5c9e653f7ce3d239296f4ed19c5679fdddcd5b"
+  "gitHead": "b84160effefb01aeb94b754f0b7a64f8dad1b7f2"
 }

package/src/Focusable/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import { Component } from 'react'
+import { cloneElement, Component } from 'react'
 
 import {
   addInputModeListener,
@@ -34,6 +34,7 @@ import { logWarn as warn } from '@instructure/console'
 
 import { propTypes, allowedProps } from './props'
 import type { FocusableProps } from './props'
+import { createChainedFunction } from '@instructure/ui-utils'
 
 /**
 ---
@@ -225,6 +226,12 @@ class Focusable extends Component<FocusableProps> {
     }
   }
 
+  ref: Element | null = null
+
+  attachRef = (el: Element) => {
+    this.ref = el
+  }
+
   // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'focusable' implicitly has an 'any' type... Remove this comment to see the full error message
   isFocusVisible(focusable, focused) {
     if (!focusable || !focused) return false
@@ -256,10 +263,17 @@ class Focusable extends Component<FocusableProps> {
     const { focusable, focused } = this.state
 
     if (typeof render === 'function') {
-      return render({
+      const rendered = render({
         focused,
         focusable,
-        focusVisible: this.isFocusVisible(focusable, focused)
+        focusVisible: this.isFocusVisible(focusable, focused),
+        attachRef: this.attachRef
+      })
+
+      return cloneElement(rendered, {
+        ref: rendered.ref
+          ? createChainedFunction(rendered.ref, this.attachRef)
+          : this.attachRef
       })
     } else {
       return null

package/types/Focusable/index.d.ts

@@ -61,8 +61,12 @@ declare class Focusable extends Component<FocusableProps> {
     get focusable(): false | Element[];
     get focusVisible(): boolean;
     focus(): void;
+    ref: Element | null;
+    attachRef: (el: Element) => void;
     isFocusVisible(focusable: any, focused: any): boolean;
-    render(): any;
+    render(): import("react").FunctionComponentElement<{
+        ref: (...args: any[]) => any;
+    }> | null;
 }
 export default Focusable;
 export { Focusable };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Focusable/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAWjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;GAIG;AACH,cAAM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,SAAS;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;SAAe;IAClC,MAAM,CAAC,YAAY;;MAElB;IAED,MAAM,CAAC,UAAU;;;;;;;;;;;;;;MAchB;IAED,cAAc,EAAE;QAAE,MAAM,IAAI,IAAI,CAAA;KAAE,GAAG,IAAI,CAAO;IAChD,aAAa,EAAE;QAAE,MAAM,IAAI,IAAI,CAAA;KAAE,GAAG,IAAI,CAAO;IAC/C,kBAAkB,EAAE;QAClB,cAAc,IAAI,OAAO,CAAA;QACzB,MAAM,IAAI,IAAI,CAAA;KACf,GAAG,IAAI,CAAO;IAEf,KAAK;;;MAGJ;IAED,iBAAiB;IAajB,uBAAuB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA;IAU5C,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA;IA0BvC,oBAAoB;IASpB,qBAAqB,CAAC,SAAS,KAAA,EAAE,OAAO,KAAA;IAoBxC,wBAAwB;IAKxB,mBAAmB;IAOnB,kBAAkB;IAOlB,qBAAqB,aAEpB;IAGD,WAAW,uBAGV;IAGD,UAAU,uBAGT;IAED,IAAI,OAAO,YAEV;IAED,IAAI,SAAS,sBAkBZ;IAED,IAAI,YAAY,YAGf;IAED,KAAK;IASL,cAAc,CAAC,SAAS,KAAA,EAAE,OAAO,KAAA;IAyBjC,MAAM;CAcP;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Focusable/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAA;AAW/C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAG7C;;;;GAIG;AACH,cAAM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,MAAM,CAAC,SAAS;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;SAAe;IAClC,MAAM,CAAC,YAAY;;MAElB;IAED,MAAM,CAAC,UAAU;;;;;;;;;;;;;;MAchB;IAED,cAAc,EAAE;QAAE,MAAM,IAAI,IAAI,CAAA;KAAE,GAAG,IAAI,CAAO;IAChD,aAAa,EAAE;QAAE,MAAM,IAAI,IAAI,CAAA;KAAE,GAAG,IAAI,CAAO;IAC/C,kBAAkB,EAAE;QAClB,cAAc,IAAI,OAAO,CAAA;QACzB,MAAM,IAAI,IAAI,CAAA;KACf,GAAG,IAAI,CAAO;IAEf,KAAK;;;MAGJ;IAED,iBAAiB;IAajB,uBAAuB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA;IAU5C,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA;IA0BvC,oBAAoB;IASpB,qBAAqB,CAAC,SAAS,KAAA,EAAE,OAAO,KAAA;IAoBxC,wBAAwB;IAKxB,mBAAmB;IAOnB,kBAAkB;IAOlB,qBAAqB,aAEpB;IAGD,WAAW,uBAGV;IAGD,UAAU,uBAGT;IAED,IAAI,OAAO,YAEV;IAED,IAAI,SAAS,sBAkBZ;IAED,IAAI,YAAY,YAGf;IAED,KAAK;IAQL,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,UAEvB;IAGD,cAAc,CAAC,SAAS,KAAA,EAAE,OAAO,KAAA;IAyBjC,MAAM;;;CAqBP;AAED,eAAe,SAAS,CAAA;AACxB,OAAO,EAAE,SAAS,EAAE,CAAA"}