@enact/spotlight - npm Package Compare versions

Comparing version 3.4.3 to 3.4.4

CHANGELOG.md

@@ -5,2 +5,6 @@ # Change Log
 
+## [3.4.4] - 2020-08-17
+
+No significant changes.
+
 ## [3.4.3] - 2020-08-10
@@ -7,0 +11,0 @@

package.json

 {
   "name": "@enact/spotlight",
-  "version": "3.4.3",
+  "version": "3.4.4",
   "description": "A focus management library",
@@ -21,3 +21,3 @@ "main": "src/spotlight.js",
   "dependencies": {
-    "@enact/core": "^3.4.3",
+    "@enact/core": "^3.4.4",
     "prop-types": "^15.7.2",
@@ -24,0 +24,0 @@ "ramda": "^0.24.1",

SpotlightContainerDecorator/SpotlightContainerDecorator.d.ts

@@ -28,4 +28,8 @@ // Type definitions for spotlight/SpotlightContainerDecorator
   /**
-   * Whether the container will preserve the id when it unmounts.
+   * Filter the navigable elements.
    */
+  navigableFilter?: Function;
+  /**
+   * Whether the container will preserve the specified  `spotlightId`  when it unmounts.
+   */
   preserveId?: boolean;
@@ -32,0 +36,0 @@ }

SpotlightContainerDecorator/SpotlightContainerDecorator.js

@@ -6,6 +6,14 @@ "use strict";
 });
+Object.defineProperty(exports, "useSpotlightContainer", {
+  enumerable: true,
+  get: function get() {
+    return _useSpotlightContainer["default"];
+  }
+});
 exports.spotlightDefaultClass = exports.SpotlightContainerDecorator = exports["default"] = void 0;
 
-var _handle = require("@enact/core/handle");
+var _handle = _interopRequireWildcard(require("@enact/core/handle"));
 
+var _useHandlers = _interopRequireDefault(require("@enact/core/useHandlers"));
+
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
@@ -17,34 +25,10 @@
 
-var _pointer = require("../src/pointer");
+var _useSpotlightContainer = _interopRequireDefault(require("./useSpotlightContainer"));
 
-var _spotlight = _interopRequireDefault(require("../src/spotlight"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-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, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); 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 } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || 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; } 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -54,2 +38,14 @@
 
+var callContext = function callContext(name) {
+  return function (ev, props, context) {
+    return context[name](ev, props);
+  };
+};
+
+var containerHandlers = {
+  onMouseEnter: (0, _handle["default"])((0, _handle.forward)('onMouseEnter'), callContext('onPointerEnter')),
+  onMouseLeave: (0, _handle["default"])((0, _handle.forward)('onMouseLeave'), callContext('onPointerLeave')),
+  onFocusCapture: (0, _handle["default"])(callContext('onFocusCapture'), (0, _handle.forward)('onFocusCapture')),
+  onBlurCapture: (0, _handle["default"])(callContext('onBlurCapture'), (0, _handle.forward)('onBlurCapture'))
+};
 /**
@@ -61,14 +57,4 @@ * The class name to apply to the default component to focus in a container.
  */
+
 var spotlightDefaultClass = 'spottable-default';
-exports.spotlightDefaultClass = spotlightDefaultClass;
-
-var isNewPointerPosition = function isNewPointerPosition(ev) {
-  return (0, _pointer.hasPointerMoved)(ev.clientX, ev.clientY);
-};
-
-var not = function not(fn) {
-  return function () {
-    return !fn.apply(this, arguments);
-  };
-};
 /**
@@ -81,3 +67,3 @@ * Default config for {@link spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator}
 
-
+exports.spotlightDefaultClass = spotlightDefaultClass;
 var defaultConfig = {
@@ -119,4 +105,13 @@ /**
   /**
-   * Whether the container will preserve the id when it unmounts.
+   * Filter the navigable elements.
    *
+   * @type {Function}
+   * @memberof spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator.defaultConfig
+   * @public
+   */
+  navigableFilter: null,
+
+  /**
+   * Whether the container will preserve the specified `spotlightId` when it unmounts.
+   *
    * @type {Boolean}
@@ -173,161 +168,29 @@ * @default false
 var SpotlightContainerDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
-  var _class, _temp;
-
   var navigableFilter = config.navigableFilter,
       preserveId = config.preserveId,
-      containerConfig = _objectWithoutProperties(config, ["navigableFilter", "preserveId"]);
+      containerConfig = _objectWithoutProperties(config, ["navigableFilter", "preserveId"]); // eslint-disable-next-line no-shadow
 
-  var stateFromProps = function stateFromProps(_ref) {
-    var spotlightId = _ref.spotlightId,
-        spotlightRestrict = _ref.spotlightRestrict;
-    var options = {
-      restrict: spotlightRestrict
-    };
 
-    var id = _spotlight["default"].add(spotlightId || options, options);
+  function SpotlightContainerDecorator(props) {
+    var spotlightDisabled = props.spotlightDisabled,
+        spotlightId = props.spotlightId,
+        spotlightMuted = props.spotlightMuted,
+        spotlightRestrict = props.spotlightRestrict,
+        rest = _objectWithoutProperties(props, ["spotlightDisabled", "spotlightId", "spotlightMuted", "spotlightRestrict"]);
 
-    return {
-      id: id,
-      preserveId: preserveId && id === spotlightId,
-      spotlightRestrict: spotlightRestrict
-    };
-  };
+    var spotlightContainer = (0, _useSpotlightContainer["default"])({
+      id: spotlightId,
+      muted: spotlightMuted,
+      disabled: spotlightDisabled,
+      restrict: spotlightRestrict,
+      containerConfig: containerConfig,
+      // continue5WayHold, defaultElement, and enterTo can be in the containerConfig object.
+      navigableFilter: navigableFilter,
+      preserveId: preserveId
+    });
+    var handlers = (0, _useHandlers["default"])(containerHandlers, props, spotlightContainer);
+    return /*#__PURE__*/_react["default"].createElement(Wrapped, Object.assign({}, rest, spotlightContainer.attributes, handlers));
+  }
 
-  var releaseContainer = function releaseContainer(_ref2) {
-    var preserve = _ref2.preserveId,
-        id = _ref2.id;
-
-    if (preserve) {
-      _spotlight["default"].unmount(id);
-    } else {
-      _spotlight["default"].remove(id);
-    }
-  };
-
-  return _temp = _class = /*#__PURE__*/function (_React$Component) {
-    _inherits(_class, _React$Component);
-
-    var _super = _createSuper(_class);
-
-    function _class(props) {
-      var _this;
-
-      _classCallCheck(this, _class);
-
-      _this = _super.call(this, props);
-
-      _this.navigableFilter = function (elem) {
-        // If the component to which this was applied specified a navigableFilter, run it
-        if (typeof navigableFilter === 'function') {
-          if (navigableFilter(elem, _this.props, _this.context) === false) {
-            return false;
-          }
-        }
-
-        return true;
-      };
-
-      _this.silentBlur = function (_ref3) {
-        var target = _ref3.target;
-        _this.shouldPreventBlur = true;
-        target.blur();
-        _this.shouldPreventBlur = false;
-      };
-
-      _this.handle = _handle.handle.bind(_assertThisInitialized(_this));
-      _this.handleBlur = (0, _handle.oneOf)([function () {
-        return _this.shouldPreventBlur;
-      }, _handle.stop], [_handle.returnsTrue, (0, _handle.forward)('onBlurCapture')]).bindAs(_assertThisInitialized(_this), 'handleBlur');
-      _this.handleFocus = (0, _handle.oneOf)([(0, _handle.forProp)('spotlightDisabled', true), (0, _handle.handle)(_handle.stop, (0, _handle.call)('silentBlur'))], [_handle.returnsTrue, (0, _handle.forward)('onFocusCapture')]).bindAs(_assertThisInitialized(_this), 'handleFocus');
-      _this.handleMouseEnter = _this.handle((0, _handle.forward)('onMouseEnter'), isNewPointerPosition, function () {
-        return _spotlight["default"].setActiveContainer(_this.state.id);
-      });
-      _this.handleMouseLeave = _this.handle((0, _handle.forward)('onMouseLeave'), not((0, _handle.forProp)('spotlightRestrict', 'self-only')), isNewPointerPosition, function (ev) {
-        var parentContainer = ev.currentTarget.parentNode.closest('[data-spotlight-container]');
-
-        var activeContainer = _spotlight["default"].getActiveContainer(); // if this container is wrapped by another and this is the currently active
-        // container, move the active container to the parent
-
-
-        if (parentContainer && activeContainer === _this.state.id) {
-          activeContainer = parentContainer.dataset.spotlightId;
-
-          _spotlight["default"].setActiveContainer(activeContainer);
-        }
-      });
-      _this.state = stateFromProps(props); // Used to indicate that we want to stop propagation on blur events that occur as a
-      // result of this component imperatively blurring itself on focus when spotlightDisabled
-
-      _this.shouldPreventBlur = false;
-
-      var cfg = _objectSpread(_objectSpread({}, containerConfig), {}, {
-        navigableFilter: _this.navigableFilter
-      });
-
-      _spotlight["default"].set(_this.state.id, cfg);
-
-      return _this;
-    }
-
-    _createClass(_class, [{
-      key: "componentWillUnmount",
-      value: function componentWillUnmount() {
-        releaseContainer(this.state);
-      }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this$props = this.props,
-            spotlightDisabled = _this$props.spotlightDisabled,
-            spotlightMuted = _this$props.spotlightMuted,
-            rest = _objectWithoutProperties(_this$props, ["spotlightDisabled", "spotlightMuted"]);
-
-        delete rest.containerId;
-        delete rest.spotlightId;
-        delete rest.spotlightRestrict;
-        rest['data-spotlight-container'] = true;
-        rest['data-spotlight-id'] = this.state.id;
-        rest.onBlurCapture = this.handleBlur;
-        rest.onFocusCapture = this.handleFocus;
-        rest.onMouseEnter = this.handleMouseEnter;
-        rest.onMouseLeave = this.handleMouseLeave;
-
-        if (spotlightDisabled) {
-          rest['data-spotlight-container-disabled'] = spotlightDisabled;
-        }
-
-        if (spotlightMuted) {
-          rest['data-spotlight-container-muted'] = spotlightMuted;
-        }
-
-        return /*#__PURE__*/_react["default"].createElement(Wrapped, rest);
-      }
-    }], [{
-      key: "getDerivedStateFromProps",
-      value: function getDerivedStateFromProps(props, state) {
-        var id = props.spotlightId,
-            spotlightRestrict = props.spotlightRestrict;
-        var prevId = state.id,
-            prevSpotlightRestrict = state.spotlightRestrict; // prevId will only be undefined the first render so this prevents releasing the
-        // container after initially creating it
-
-        var isIdChanged = prevId && id && prevId !== id;
-
-        if (isIdChanged) {
-          releaseContainer(state);
-        }
-
-        if (isIdChanged || spotlightRestrict !== prevSpotlightRestrict) {
-          return stateFromProps(_objectSpread({
-            spotlightId: prevId,
-            spotlightRestrict: prevSpotlightRestrict
-          }, props));
-        } else {
-          return null;
-        }
-      }
-    }]);
-
-    return _class;
-  }(_react["default"].Component), _class.displayName = 'SpotlightContainerDecorator', _class.propTypes =
+  SpotlightContainerDecorator.propTypes =
   /** @lends spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator.prototype */
@@ -376,7 +239,9 @@ {
     spotlightRestrict: _propTypes["default"].oneOf(['none', 'self-first', 'self-only'])
-  }, _class.defaultProps = {
+  };
+  SpotlightContainerDecorator.defaultProps = {
     spotlightDisabled: false,
     spotlightMuted: false,
     spotlightRestrict: 'self-first'
-  }, _temp;
+  };
+  return SpotlightContainerDecorator;
 });
@@ -383,0 +248,0 @@ exports.SpotlightContainerDecorator = SpotlightContainerDecorator;

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

317326

increased by5.31%

Number of package files

40

increased by8.11%

Lines of code

6515

increased by4.95%

Dependency changes

• Updated@enact/core@^3.4.4