@enact/spotlight - npm Package Compare versions

Comparing version 4.9.0-alpha.2 to 4.9.0-alpha.3

CHANGELOG.md

@@ -5,2 +5,12 @@ # Change Log
 
+## [4.9.0-alpha.3] - 2024-06-05
+
+### Changed
+
+- `spotlight/Spottable` to have sibling DOM node as alternative to findDOMNode API which will be removed in React 19
+
+## [4.0.15] - 2024-05-28
+
+No significant changes.
+
 ## [4.9.0-alpha.2] - 2024-05-24
@@ -7,0 +17,0 @@

package.json

 {
   "name": "@enact/spotlight",
-  "version": "4.9.0-alpha.2",
+  "version": "4.9.0-alpha.3",
   "description": "A focus management library",
@@ -28,3 +28,3 @@ "repository": {
   "dependencies": {
-    "@enact/core": "^4.9.0-alpha.2",
+    "@enact/core": "^4.9.0-alpha.3",
     "classnames": "^2.5.1",
@@ -31,0 +31,0 @@ "prop-types": "^15.8.1",

Spottable/Spottable.js

@@ -22,10 +22,9 @@ "use strict";
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
-var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _WithRef = require("@enact/core/internal/WithRef");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _useSpottable = require("./useSpottable");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "disabled", "handleForceUpdate", "onSpotlightDisappear", "onSpotlightDown", "onSpotlightLeft", "onSpotlightRight", "onSpotlightUp", "selectionKeys", "spotlightDisabled", "spotlightId", "spotRef"];
+var _excluded = ["className", "disabled", "handleForceUpdate", "onSpotlightDisappear", "onSpotlightDown", "onSpotlightLeft", "onSpotlightRight", "onSpotlightUp", "selectionKeys", "spotlightDisabled", "spotlightId"];
 /**
@@ -128,3 +127,5 @@ * Adds spottability to components.
   var emulateMouse = config.emulateMouse;
+  var WrappedWithRef = (0, _WithRef.WithRef)(Wrapped);
   function SpottableBase(props) {
+    var nodeRef = (0, _react.useRef)();
     var className = props.className,
@@ -141,7 +142,10 @@ disabled = props.disabled,
       spotlightId = props.spotlightId,
-      spotRef = props.spotRef,
       rest = _objectWithoutProperties(props, _excluded);
+    var getSpotRef = (0, _react.useCallback)(function () {
+      return nodeRef.current;
+    }, []);
     var spot = (0, _useSpottable.useSpottable)({
       disabled: disabled,
       emulateMouse: emulateMouse,
+      getSpotRef: getSpotRef,
       handleForceUpdate: handleForceUpdate,
@@ -156,4 +160,3 @@ onSelectionCancel: rest.onMouseUp,
       spotlightDisabled: spotlightDisabled,
-      spotlightId: spotlightId,
-      spotRef: spotRef
+      spotlightId: spotlightId
     });
@@ -167,5 +170,7 @@ var tabIndex = rest.tabIndex;
     delete rest.spotlightId;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, rest), spot.attributes), handlers), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedWithRef, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, rest), spot.attributes), handlers), {}, {
       className: (0, _classnames["default"])(className, spot.className),
-      disabled: disabled
+      disabled: disabled,
+      outermostRef: nodeRef,
+      referrerName: "Spottable"
     }));
@@ -181,3 +186,3 @@ }
      */
-    disabled: _propTypes2["default"].bool,
+    disabled: _propTypes["default"].bool,
     /**
@@ -189,3 +194,3 @@ * The handler to force update the component.
      */
-    handleForceUpdate: _propTypes2["default"].func,
+    handleForceUpdate: _propTypes["default"].func,
     /**
@@ -198,3 +203,3 @@ * The handler to run when the component is removed while retaining focus.
      */
-    onSpotlightDisappear: _propTypes2["default"].func,
+    onSpotlightDisappear: _propTypes["default"].func,
     /**
@@ -207,3 +212,3 @@ * The handler to run when the 5-way down key is pressed.
      */
-    onSpotlightDown: _propTypes2["default"].func,
+    onSpotlightDown: _propTypes["default"].func,
     /**
@@ -216,3 +221,3 @@ * The handler to run when the 5-way left key is pressed.
      */
-    onSpotlightLeft: _propTypes2["default"].func,
+    onSpotlightLeft: _propTypes["default"].func,
     /**
@@ -225,3 +230,3 @@ * The handler to run when the 5-way right key is pressed.
      */
-    onSpotlightRight: _propTypes2["default"].func,
+    onSpotlightRight: _propTypes["default"].func,
     /**
@@ -234,3 +239,3 @@ * The handler to run when the 5-way up key is pressed.
      */
-    onSpotlightUp: _propTypes2["default"].func,
+    onSpotlightUp: _propTypes["default"].func,
     /**
@@ -245,3 +250,3 @@ * An array of numbers representing keyCodes that should trigger mouse event
      */
-    selectionKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].number),
+    selectionKeys: _propTypes["default"].arrayOf(_propTypes["default"].number),
     /**
@@ -254,3 +259,3 @@ * When `true`, the component cannot be navigated using spotlight.
      */
-    spotlightDisabled: _propTypes2["default"].bool,
+    spotlightDisabled: _propTypes["default"].bool,
     /**
@@ -262,10 +267,3 @@ * Used to identify this component within the Spotlight system
      */
-    spotlightId: _propTypes2["default"].string,
-    /*
-     * Called with a reference to spottable component
-     *
-     * @type {Object|Function}
-     * @private
-     */
-    spotRef: _propTypes["default"].ref,
+    spotlightId: _propTypes["default"].string,
     /**
@@ -278,3 +276,3 @@ * The tabIndex of the component. This value will default to -1 if left
      */
-    tabIndex: _propTypes2["default"].number
+    tabIndex: _propTypes["default"].number
   };
@@ -301,17 +299,9 @@
       value: function componentDidMount() {
-        // eslint-disable-next-line react/no-find-dom-node
-        this.node = _reactDom["default"].findDOMNode(this);
         this.forceUpdate();
       }
     }, {
-      key: "spotRef",
-      get: function get() {
-        return this.node;
-      }
-    }, {
       key: "render",
       value: function render() {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpottableBase, _objectSpread(_objectSpread({}, this.props), {}, {
-          handleForceUpdate: this.handleForceUpdate,
-          spotRef: this.spotRef
+          handleForceUpdate: this.handleForceUpdate
         }));
@@ -318,0 +308,0 @@ }

Spottable/tests/useSpot-specs.js

 "use strict";
 
 var _handle = _interopRequireWildcard(require("@enact/core/handle"));
+var _WithRef = require("@enact/core/internal/WithRef");
 var _useHandlers = _interopRequireDefault(require("@enact/core/useHandlers"));
@@ -9,20 +10,9 @@ require("@testing-library/jest-dom");
 var _react2 = require("react");
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _spotlight = _interopRequireDefault(require("../../src/spotlight.js"));
 var _useSpottable = _interopRequireDefault(require("../useSpottable"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "component", "componentRef", "disabled", "emulateMouse", "onSelectionCancel", "onSpotlightDisappear", "onSpotlightDown", "onSpotlightLeft", "onSpotlightRight", "onSpotlightUp", "selectionKeys", "spotlightDisabled", "spotlightId"];
+var _excluded = ["className", "component", "disabled", "emulateMouse", "onSelectionCancel", "onSpotlightDisappear", "onSpotlightDown", "onSpotlightLeft", "onSpotlightRight", "onSpotlightUp", "selectionKeys", "spotlightDisabled", "spotlightId"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -63,6 +53,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 describe('useSpottable', function () {
-  function SpottableBase(props) {
+  function SpottableComponent(props) {
+    var nodeRef = (0, _react2.useRef)();
+    var getSpotRef = (0, _react2.useCallback)(function () {
+      return nodeRef.current;
+    }, []);
     var className = props.className,
       component = props.component,
-      componentRef = props.componentRef,
       disabled = props.disabled,
@@ -83,2 +76,3 @@ emulateMouse = props.emulateMouse,
       emulateMouse: emulateMouse,
+      getSpotRef: getSpotRef,
       onSelectionCancel: onSelectionCancel,
@@ -95,39 +89,12 @@ onSpotlightDisappear: onSpotlightDisappear,
     var Comp = component || 'div';
+    var CompWithRef = (0, _WithRef.WithRef)(Comp);
     rest.tabIndex = -1;
     var handlers = (0, _useHandlers["default"])(spotHandlers, rest, spot);
-    compRef = componentRef;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, rest), spot.attributes), handlers), {}, {
+    compRef = nodeRef.current;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(CompWithRef, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, rest), spot.attributes), handlers), {}, {
       className: (0, _classnames["default"])(className, spot.className),
       disabled: disabled,
-      ref: spot.ref
+      outermostRef: nodeRef
     }));
   }
-  var SpottableComponent = /*#__PURE__*/function (_Component) {
-    _inherits(SpottableComponent, _Component);
-    var _super = _createSuper(SpottableComponent);
-    function SpottableComponent() {
-      _classCallCheck(this, SpottableComponent);
-      return _super.apply(this, arguments);
-    }
-    _createClass(SpottableComponent, [{
-      key: "componentDidMount",
-      value: function componentDidMount() {
-        // eslint-disable-next-line react/no-find-dom-node
-        this.node = _reactDom["default"].findDOMNode(this);
-      }
-    }, {
-      key: "componentRef",
-      get: function get() {
-        return this.node;
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpottableBase, _objectSpread(_objectSpread({}, this.props), {}, {
-          componentRef: this.componentRef
-        }));
-      }
-    }]);
-    return SpottableComponent;
-  }(_react2.Component);
   beforeEach(function () {
@@ -138,3 +105,3 @@ // Spotlight.getCurrent() did not work in unit tests. It always returns `undefined`.
     _spotlight["default"].getCurrent = function () {
-      return compRef.current;
+      return compRef;
     };
@@ -141,0 +108,0 @@ });

Spottable/useSpottable.js

@@ -17,3 +17,3 @@ "use strict";
 var _SpottableCore = require("./SpottableCore");
-var _excluded = ["spotRef", "emulateMouse", "selectionKeys", "spotlightDisabled"];
+var _excluded = ["emulateMouse", "getSpotRef", "selectionKeys", "spotlightDisabled"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -63,3 +63,3 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
  * @property {Boolean}  [mouseLeave] Handle when mouse leaves.
- * @property {Boolean}  [ref]        The ref for the target node.
+ * @property {Boolean}  [spotNode]   The ref for the target node.
  * @private
@@ -81,4 +81,4 @@ */
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    spotRef = _ref.spotRef,
     emulateMouse = _ref.emulateMouse,
+    getSpotRef = _ref.getSpotRef,
     _ref$selectionKeys = _ref.selectionKeys,
@@ -108,7 +108,7 @@ selectionKeys = _ref$selectionKeys === void 0 ? [ENTER_KEY, REMOTE_OK_KEY] : _ref$selectionKeys,
   (0, _react.useLayoutEffect)(function () {
-    hook.load(spotRef || null);
+    hook.load(getSpotRef() || null);
     return function () {
       hook.unload();
     };
-  }, [spotRef]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [getSpotRef]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -115,0 +115,0 @@ (0, _react.useLayoutEffect)(hook.didUpdate); // eslint-disable-line react-hooks/exhaustive-deps

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

396821

decreased by-0.89%

Lines of code

8006

decreased by-0.58%

Dependency changes

• Updated@enact/core@^4.9.0-alpha.3