@enact/spotlight - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

CHANGELOG.md

@@ -5,2 +5,8 @@ # Change Log
 
+## [4.0.1] - 2021-05-21
+
+### Changed
+
+- `spotlight/SpotlightRootDecorator` to remove focus effect when touching up
+
 ## [4.0.0] - 2021-03-26
@@ -7,0 +13,0 @@

package.json

 {
   "name": "@enact/spotlight",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "A focus management library",
@@ -21,3 +21,3 @@ "main": "src/spotlight.js",
   "dependencies": {
-    "@enact/core": "^4.0.0",
+    "@enact/core": "^4.0.1",
     "classnames": "^2.2.6",
@@ -24,0 +24,0 @@ "prop-types": "^15.7.2",

SpotlightRootDecorator/SpotlightRootDecorator.d.ts

@@ -11,2 +11,6 @@ // Type definitions for spotlight/SpotlightRootDecorator
   noAutoFocus?: boolean;
+  /**
+   * Specifies the id of the React DOM tree root node
+   */
+  rootId?: string;
 }
@@ -13,0 +17,0 @@ export interface SpotlightRootDecoratorProps {}

SpotlightRootDecorator/SpotlightRootDecorator.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _keymap = require("@enact/core/keymap");
+
 var _react = require("react");
@@ -66,3 +68,13 @@
    */
-  noAutoFocus: false
+  noAutoFocus: false,
+
+  /**
+   * Specifies the id of the React DOM tree root node
+   *
+   * @type {String}
+   * @default 'root'
+   * @public
+   * @memberof spotlight/SpotlightRootDecorator.SpotlightRootDecorator.defaultConfig
+   */
+  rootId: 'root'
 };
@@ -91,3 +103,15 @@ /**
 
-  var noAutoFocus = config.noAutoFocus;
+  var getInputTypeSetter = config.getInputTypeSetter,
+      noAutoFocus = config.noAutoFocus,
+      rootId = config.rootId;
+  var rootNode = typeof document === 'object' && document.querySelector('#' + rootId) || document;
+  var input = {
+    activated: false,
+    applied: false,
+    types: {
+      key: true,
+      mouse: false,
+      touch: false
+    }
+  };
   return _temp = _class = /*#__PURE__*/function (_Component) {
@@ -105,4 +129,56 @@ _inherits(_class, _Component);
 
+      _this.activateInputType = function (activated) {
+        input.activated = activated;
+      };
+
+      _this.applyInputType = function () {
+        if (_assertThisInitialized(_this) && _this.containerRef && _this.containerRef.current) {
+          Object.keys(input.types).map(function (type) {
+            _this.containerRef.current.classList.toggle('spotlight-input-' + type, input.types[type]);
+          });
+          input.applied = true;
+        }
+      };
+
+      _this.setInputType = function (inputType) {
+        if (Object.prototype.hasOwnProperty.call(input.types, inputType) && !input.types[inputType]) {
+          Object.keys(input.types).map(function (type) {
+            input.types[type] = false;
+          });
+          input.types[inputType] = true;
+          input.applied = false;
+        }
+      };
+
+      _this.handlePointerOver = function (ev) {
+        _this.setInputType(ev.pointerType);
+
+        _this.applyInputType();
+      };
+
+      _this.handleFocusIn = function () {
+        if (!input.applied) {
+          _this.applyInputType();
+        }
+      };
+
+      _this.handleKeyDown = function (ev) {
+        var keyCode = ev.keyCode;
+
+        if ((0, _keymap.is)('enter', keyCode) && _this.containerRef.current.classList.contains('spotlight-input-touch')) {
+          // Prevent onclick event trigger by enter key
+          ev.preventDefault();
+        }
+
+        setTimeout(function () {
+          if (!input.activated) {
+            _this.setInputType('key');
+          }
+
+          _this.applyInputType();
+        }, 0);
+      };
+
       _this.navigableFilter = function (elem) {
-        while (elem && elem !== document && elem.nodeType === 1) {
+        while (elem && elem !== rootNode && elem.nodeType === 1) {
           if (elem.getAttribute('data-spotlight-container-disabled') === 'true') return false;
@@ -113,2 +189,4 @@ elem = elem.parentNode;
 
+      _this.containerRef = /*#__PURE__*/(0, _react.createRef)();
+
       if (typeof window === 'object') {
@@ -125,2 +203,6 @@ _spotlight["default"].initialize({
 
+      if (typeof getInputTypeSetter === 'function') {
+        getInputTypeSetter(_this.setInputType, _this.activateInputType);
+      }
+
       return _this;
@@ -135,2 +217,12 @@ }
         }
+
+        rootNode.addEventListener('focusin', this.handleFocusIn, {
+          capture: true
+        });
+        rootNode.addEventListener('pointerover', this.handlePointerOver, {
+          capture: true
+        });
+        rootNode.addEventListener('keydown', this.handleKeyDown, {
+          capture: true
+        });
       }
@@ -141,2 +233,12 @@ }, {
         _spotlight["default"].terminate();
+
+        rootNode.removeEventListener('focusin', this.handleFocusIn, {
+          capture: true
+        });
+        rootNode.removeEventListener('pointerover', this.handlePointerOver, {
+          capture: true
+        });
+        rootNode.removeEventListener('keydown', this.handleKeyDown, {
+          capture: true
+        });
       }
@@ -146,3 +248,6 @@ }, {
       value: function render() {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, this.props));
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: this.containerRef,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, this.props))
+        });
       }
@@ -149,0 +254,0 @@ }]);

Spottable/Spottable.d.ts

@@ -23,2 +23,6 @@ // Type definitions for spotlight/Spottable
   /**
+   * The handler to force update the component.
+   */
+  handleForceUpdate?: Function;
+  /**
    * The handler to run when the component is removed while retaining focus.
@@ -25,0 +29,0 @@ */

Spottable/Spottable.js

@@ -152,2 +152,3 @@ "use strict";
         disabled = props.disabled,
+        handleForceUpdate = props.handleForceUpdate,
         onSpotlightDisappear = props.onSpotlightDisappear,
@@ -162,3 +163,3 @@ onSpotlightDown = props.onSpotlightDown,
         spotRef = props.spotRef,
-        rest = _objectWithoutProperties(props, ["className", "disabled", "onSpotlightDisappear", "onSpotlightDown", "onSpotlightLeft", "onSpotlightRight", "onSpotlightUp", "selectionKeys", "spotlightDisabled", "spotlightId", "spotRef"]);
+        rest = _objectWithoutProperties(props, ["className", "disabled", "handleForceUpdate", "onSpotlightDisappear", "onSpotlightDown", "onSpotlightLeft", "onSpotlightRight", "onSpotlightUp", "selectionKeys", "spotlightDisabled", "spotlightId", "spotRef"]);
 
@@ -168,2 +169,3 @@ var spot = (0, _useSpottable.useSpottable)({
       emulateMouse: emulateMouse,
+      handleForceUpdate: handleForceUpdate,
       onSelectionCancel: rest.onMouseUp,
@@ -208,2 +210,10 @@ onSpotlightDisappear: onSpotlightDisappear,
     /**
+     * The handler to force update the component.
+     *
+     * @type {Function}
+     * @public
+     */
+    handleForceUpdate: _propTypes2["default"].func,
+
+    /**
      * The handler to run when the component is removed while retaining focus.
@@ -305,5 +315,17 @@ *
     function Spottable() {
+      var _this;
+
       _classCallCheck(this, Spottable);
 
-      return _super.apply(this, arguments);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      _this = _super.call.apply(_super, [this].concat(args));
+
+      _this.handleForceUpdate = function () {
+        _this.forceUpdate();
+      };
+
+      return _this;
     }
@@ -327,2 +349,3 @@
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpottableBase, _objectSpread(_objectSpread({}, this.props), {}, {
+          handleForceUpdate: this.handleForceUpdate,
           spotRef: this.spotRef
@@ -329,0 +352,0 @@ }));

Spottable/SpottableCore.js

@@ -53,4 +53,3 @@ "use strict";
 
-    var emulateMouse = _ref.emulateMouse,
-        useForceUpdate = _ref.useForceUpdate;
+    var emulateMouse = _ref.emulateMouse;
 
@@ -216,3 +215,3 @@ _classCallCheck(this, SpottableCore);
 
-          _this.config.useForceUpdate();
+          _this.props.handleForceUpdate();
         }
@@ -238,4 +237,3 @@ }
     this.config = {
-      emulateMouse: emulateMouse,
-      useForceUpdate: useForceUpdate
+      emulateMouse: emulateMouse
     };
@@ -242,0 +240,0 @@ this.props = {};

Spottable/useSpottable.js

@@ -43,3 +43,4 @@ "use strict";
  * @property {Boolean}  emulateMouse         Whether or not the component should emulate mouse events as a response to Spotlight 5-way events.
- * @property {Function} onSelectionCancel    Is is called if the component is focused and became disabled.
+ * @property {Function} handleForceUpdate    It is called if the component needs to be force updated.
+ * @property {Function} onSelectionCancel    It is called if the component is focused and became disabled.
  * @property {Function} onSpotlightDisappear The handler to run when the component is removed while retaining focus.
@@ -93,11 +94,4 @@ * @property {Function} onSpotlightDown      The handler to run when the 5-way down key is pressed.
 
-  var useForceUpdate = function useForceUpdate() {
-    return (0, _react.useReducer)(function (x) {
-      return x + 1;
-    }, 0);
-  };
-
   var hook = (0, _useClass["default"])(_SpottableCore.SpottableCore, {
-    emulateMouse: emulateMouse,
-    useForceUpdate: useForceUpdate
+    emulateMouse: emulateMouse
   });
@@ -104,0 +98,0 @@ var context = (0, _react.useRef)({

src/container.js

@@ -54,3 +54,3 @@ "use strict";
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
@@ -57,0 +57,0 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

src/target.js

@@ -38,3 +38,3 @@ "use strict";
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
@@ -41,0 +41,0 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

src/tests/navigate-specs.js

@@ -13,3 +13,3 @@ "use strict";
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
@@ -16,0 +16,0 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

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

Improved metrics

Total package byte prevSize

359620

increased by1.22%

Lines of code

7200

increased by1.52%

Dependency changes

• Updated@enact/core@^4.0.1