Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@enact/spotlight

Package Overview
Dependencies
Maintainers
1
Versions
218
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@enact/spotlight - npm Package Compare versions

Comparing version 4.5.2 to 4.5.3

Accelerator/tests/Accelerrator-specs.js
SpotlightRootDecorator/tests/SpotlightRootDecorator-specs.js
src/tests/utils-specs.js

42

Accelerator/Accelerator.js

@@ -7,9 +7,5 @@ "use strict";

exports["default"] = exports.Accelerator = void 0;
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); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**

@@ -21,3 +17,2 @@ * Provides the {@link spotlight/Accelerator.Accelerator} class.

*/
/**

@@ -37,7 +32,4 @@ * @class Accelerator

var _this = this;
var frequency = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [3, 3, 3, 2, 2, 2, 1];
_classCallCheck(this, Accelerator);
this.processKey = function (event, callback) {

@@ -48,3 +40,2 @@ switch (event.type) {

_this.reset();
_this.time = Date.now();

@@ -59,14 +50,10 @@ _this.keyCode = event.keyCode;

var elapsedTime = Date.now() - _this.time,
seconds = Math.floor(elapsedTime / 1000),
toSkip = 0;
seconds = Math.floor(elapsedTime / 1000),
toSkip = 0;
seconds = seconds > _this.frequency.length - 1 ? _this.frequency.length - 1 : seconds;
toSkip = _this.frequency[seconds] - 1;
if (toSkip < 0) {
toSkip = 0;
}
_this.accelerating = !(seconds === 0 && _this.skipped === 0);
if (_this.skipped >= toSkip) {

@@ -76,4 +63,4 @@ _this.skipped = 0;

} else {
_this.skipped++; // Prevent skipped keydown events from bubbling
_this.skipped++;
// Prevent skipped keydown events from bubbling
event.preventDefault();

@@ -83,10 +70,7 @@ return true;

}
case 'keyup':
_this.reset();
return callback(event);
}
};
this.reset = function () {

@@ -99,11 +83,8 @@ _this.skipped = 0;

};
this.cancel = function () {
_this.canceled = true;
};
this.isAccelerating = function () {
return _this.accelerating;
};
/*

@@ -116,2 +97,3 @@ * Whether the instance is currently in an accelerating state.

this.accelerating = false;
/*

@@ -123,4 +105,4 @@ * The current count of skipped events.

*/
this.skipped = 0;
this.skipped = 0;
/*

@@ -132,4 +114,4 @@ * The timestamp of the last evaluated event.

*/
this.time = 0;
this.time = 0;
/*

@@ -141,4 +123,4 @@ * The keyCode of the last evaluated event.

*/
this.keyCode = 0;
this.keyCode = 0;
/*

@@ -150,4 +132,4 @@ * Whether the instance is in a state of being canceled.

*/
this.canceled = false;
this.canceled = false;
/*

@@ -161,5 +143,5 @@ * Controls the frequency with which the acceleration will "freeze". While frozen,

*/
this.frequency = frequency;
}
/**

@@ -175,7 +157,5 @@ * Called with the current keydown event and callback, which will be called when the event is

* @memberof spotlight/Accelerator.Accelerator.prototype
*/
);
*/);
exports.Accelerator = Accelerator;
var _default = Accelerator;
exports["default"] = _default;

6

CHANGELOG.md

@@ -5,2 +5,8 @@ # Change Log

## [4.5.3] - 2023-04-06
### Fixed
- `spotlight` to show the focus effect when pointer mode is changed to `false` while an app is loading
## [4.5.2] - 2022-08-17

@@ -7,0 +13,0 @@

10

package.json
{
"name": "@enact/spotlight",
"version": "4.5.2",
"version": "4.5.3",
"description": "A focus management library",
"repository": {
"type": "git",
"url": "https://github.com/enactjs/enact.git",
"directory": "packages/spotlight"
},
"homepage": "https://enactjs.com",
"main": "src/spotlight.js",

@@ -21,3 +27,3 @@ "scripts": {

"dependencies": {
"@enact/core": "^4.5.2",
"@enact/core": "^4.5.3",
"classnames": "^2.3.1",

@@ -24,0 +30,0 @@ "prop-types": "^15.8.1",

26

Pause/Pause.js

@@ -10,9 +10,5 @@ "use strict";

exports.resume = _resume;
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); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
/**

@@ -62,15 +58,17 @@ * Provides a class which allows consumers to safely pause and resume spotlight without resuming

*/
var paused = false; // Private, exported methods used by Spotlight to set and query the pause state from its public API
var paused = false;
// Private, exported methods used by Spotlight to set and query the pause state from its public API
function pause() {
paused = true;
}
function _resume() {
paused = false;
}
function isPaused() {
return paused !== false;
}
/**

@@ -87,4 +85,2 @@ * Acts as a semaphore for Spotlight pause state ensuring that only the last Pause instance can

*/
var Pause = /*#__PURE__*/function () {

@@ -104,6 +100,4 @@ /**

_classCallCheck(this, Pause);
this.name = name;
}
_createClass(Pause, [{

@@ -114,2 +108,3 @@ key: "toString",

}
/**

@@ -122,3 +117,2 @@ * Returns `true` when Spotlight is paused by this instance

*/
}, {

@@ -129,2 +123,3 @@ key: "isPaused",

}
/**

@@ -137,3 +132,2 @@ * Pauses spotlight if not currently paused

*/
}, {

@@ -146,2 +140,3 @@ key: "pause",

}
/**

@@ -154,3 +149,2 @@ * Resumes spotlight if this instance was the last to pause spotlight

*/
}, {

@@ -161,15 +155,11 @@ key: "resume",

_resume();
return true;
}
return false;
}
}]);
return Pause;
}();
exports.Pause = Pause;
var _default = Pause;
exports["default"] = _default;

9

Pause/tests/Pause-specs.js
"use strict";
var _Pause = _interopRequireWildcard(require("../Pause"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
var PAUSED = 'Paused';

@@ -65,2 +62,8 @@ var NOT_PAUSED = 'Not Paused';

});
test('should return name of the pause instance', function () {
var subject = new _Pause["default"]('paused');
var expected = 'Pause<paused>';
var actual = subject.toString();
expect(actual).toBe(expected);
});
});

64

SpotlightContainerDecorator/SpotlightContainer.js

@@ -7,41 +7,26 @@ "use strict";

exports["default"] = exports.SpotlightContainer = void 0;
var _handle = require("@enact/core/handle");
var _pointer = require("../src/pointer");
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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
var isNewPointerPosition = function isNewPointerPosition(ev) {
return (0, _pointer.hasPointerMoved)(ev.clientX, ev.clientY);
};
var SpotlightContainer = /*#__PURE__*/function () {
// set up context and props so we can use handle binding
function SpotlightContainer(_ref) {
var _this = this;
var containerConfig = _ref.containerConfig,
navigableFilter = _ref.navigableFilter,
preserveId = _ref.preserveId;
navigableFilter = _ref.navigableFilter,
preserveId = _ref.preserveId;
_classCallCheck(this, SpotlightContainer);
this.context = {};
this.props = {};
this.navigableFilter = function (elem) {

@@ -54,6 +39,4 @@ // If the component to which this was applied specified a navigableFilter, run it

}
return true;
};
this.onBlurCapture = function (ev) {

@@ -64,18 +47,12 @@ if (_this.shouldPreventBlur) {

}
return true;
};
this.onFocusCapture = function (ev) {
if (_this.props.disabled === true) {
(0, _handle.stop)(ev);
_this.silentBlur(ev);
return false;
}
return true;
};
this.onPointerEnter = (0, _handle.handle)(isNewPointerPosition, function () {

@@ -86,10 +63,8 @@ return _spotlight["default"].setActiveContainer(_this.id);

var parentContainer = ev.currentTarget.parentNode.closest('[data-spotlight-container]');
var activeContainer = _spotlight["default"].getActiveContainer();
var activeContainer = _spotlight["default"].getActiveContainer(); // if this container is wrapped by another and this is the currently active
// 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.id) {
activeContainer = parentContainer.dataset.spotlightId;
_spotlight["default"].setActiveContainer(activeContainer);

@@ -99,19 +74,23 @@ }

// spotlight id - set either via props or generated by Spotlight
this.id = null; // Preserve the spotlight id across instances when it is set via props and preserveId is set
this.id = null;
// Preserve the spotlight id across instances when it is set via props and preserveId is set
this.canPreserveId = preserveId;
this.preserveId = false; // container config - set once when the container is added
this.preserveId = false;
this.config = containerConfig; // optional filter function to limit the spottable candidates for this container
// container config - set once when the container is added
this.config = containerConfig;
this.filter = navigableFilter; // private hash of spotlight DOM attributes
// optional filter function to limit the spottable candidates for this container
this.filter = navigableFilter;
// private hash of spotlight DOM attributes
this.attr = {
'data-spotlight-container': true
}; // Used to indicate that we want to stop propagation on blur events that occur as a
};
// 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;
}
_createClass(SpotlightContainer, [{

@@ -126,7 +105,6 @@ key: "attributes",

var disabled = props.disabled,
id = props.id,
muted = props.muted,
restrict = props.restrict;
id = props.id,
muted = props.muted,
restrict = props.restrict;
this.props = props;
if (this.id == null || id && this.id !== id) {

@@ -136,3 +114,2 @@ if (this.id) {

}
this.id = _spotlight["default"].add(_objectSpread(_objectSpread({}, this.config), {}, {

@@ -149,3 +126,2 @@ id: id,

}
this.attr['data-spotlight-id'] = this.id;

@@ -178,8 +154,6 @@ this.attr['data-spotlight-container-disabled'] = disabled;

}]);
return SpotlightContainer;
}();
exports.SpotlightContainer = SpotlightContainer;
var _default = SpotlightContainer;
exports["default"] = _default;

72

SpotlightContainerDecorator/SpotlightContainerDecorator.js

@@ -13,56 +13,29 @@ "use strict";

});
var _handle = _interopRequireWildcard(require("@enact/core/handle"));
var _useHandlers = _interopRequireDefault(require("@enact/core/useHandlers"));
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _useSpotlightContainer = _interopRequireDefault(require("./useSpotlightContainer"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["navigableFilter", "preserveId"],
_excluded2 = ["spotlightDisabled", "spotlightId", "spotlightMuted", "spotlightRestrict"];
_excluded2 = ["spotlightDisabled", "spotlightId", "spotlightMuted", "spotlightRestrict"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _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); 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 _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; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var callContext = function callContext(name) {

@@ -73,3 +46,2 @@ return function (ev, props, context) {

};
var containerHandlers = {

@@ -81,2 +53,3 @@ onMouseEnter: (0, _handle["default"])((0, _handle.forward)('onMouseEnter'), callContext('onPointerEnter')),

};
/**

@@ -88,4 +61,4 @@ * The class name to apply to the default component to focus in a container.

*/
var spotlightDefaultClass = 'spottable-default';
var spotlightDefaultClass = 'spottable-default';
/**

@@ -97,3 +70,2 @@ * Default config for {@link spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator}

*/
exports.spotlightDefaultClass = spotlightDefaultClass;

@@ -111,3 +83,2 @@ var defaultConfig = {

continue5WayHold: false,
/**

@@ -124,3 +95,2 @@ * The selector for the default spottable element within the container.

defaultElement: ".".concat(spotlightDefaultClass),
/**

@@ -138,3 +108,2 @@ * Directs which element receives focus when gaining focus from another container. If

enterTo: null,
/**

@@ -148,3 +117,2 @@ * Filter the navigable elements.

navigableFilter: null,
/**

@@ -159,3 +127,2 @@ * Whether the container will preserve the specified `spotlightId` when it unmounts.

preserveId: false,
/**

@@ -177,2 +144,3 @@ * Restricts or prioritizes navigation when focus attempts to leave the container. It

};
/**

@@ -220,16 +188,14 @@ * Constructs a higher-order component that allows Spotlight focus to be passed to its own

*/
var SpotlightContainerDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
var navigableFilter = config.navigableFilter,
preserveId = config.preserveId,
containerConfig = _objectWithoutProperties(config, _excluded); // eslint-disable-next-line no-shadow
preserveId = config.preserveId,
containerConfig = _objectWithoutProperties(config, _excluded);
// eslint-disable-next-line no-shadow
function SpotlightContainerDecorator(props) {
var spotlightDisabled = props.spotlightDisabled,
spotlightId = props.spotlightId,
spotlightMuted = props.spotlightMuted,
spotlightRestrict = props.spotlightRestrict,
rest = _objectWithoutProperties(props, _excluded2);
spotlightId = props.spotlightId,
spotlightMuted = props.spotlightMuted,
spotlightRestrict = props.spotlightRestrict,
rest = _objectWithoutProperties(props, _excluded2);
var spotlightContainer = (0, _useSpotlightContainer["default"])({

@@ -248,6 +214,3 @@ id: spotlightId,

}
SpotlightContainerDecorator.propTypes =
/** @lends spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator.prototype */
{
SpotlightContainerDecorator.propTypes = /** @lends spotlight/SpotlightContainerDecorator.SpotlightContainerDecorator.prototype */{
/**

@@ -261,3 +224,2 @@ * When `true`, controls in the container cannot be navigated.

spotlightDisabled: _propTypes["default"].bool,
/**

@@ -274,3 +236,2 @@ * Used to identify this component within the Spotlight system.

spotlightId: _propTypes["default"].string,
/**

@@ -288,3 +249,2 @@ * Whether or not the container is in muted mode.

spotlightMuted: _propTypes["default"].bool,
/**

@@ -309,15 +269,12 @@ * Restricts or prioritizes navigation when focus attempts to leave the container. It

spotlightRestrict: 'self-first'
}; // Wrapping with a React.Component to maintain ref support
};
// Wrapping with a React.Component to maintain ref support
return /*#__PURE__*/function (_Component) {
_inherits(SpotlightContainerDecoratorAdapter, _Component);
var _super = _createSuper(SpotlightContainerDecoratorAdapter);
function SpotlightContainerDecoratorAdapter() {
_classCallCheck(this, SpotlightContainerDecoratorAdapter);
return _super.apply(this, arguments);
}
_createClass(SpotlightContainerDecoratorAdapter, [{

@@ -329,3 +286,2 @@ key: "render",

}]);
return SpotlightContainerDecoratorAdapter;

@@ -332,0 +288,0 @@ }(_react.Component);

15

SpotlightContainerDecorator/tests/Element.prototype.closest.js

@@ -7,4 +7,4 @@ "use strict";

exports["default"] = _default;
/* global Element */
/* global Element */
function _default(set, remove) {

@@ -19,20 +19,15 @@ var polyfilled = false;

}
return n;
};
polyfilled = true;
Element.prototype.closest = function (s) {
var matches = findRoot(this).querySelectorAll(s),
i,
el = this;
i,
el = this;
do {
i = matches.length;
while (--i >= 0 && matches.item(i) !== el) {// nothing
while (--i >= 0 && matches.item(i) !== el) {
// nothing
}
} while (i < 0 && (el = el.parentElement));
return el;

@@ -39,0 +34,0 @@ };

64

SpotlightContainerDecorator/tests/SpotlightContainerDecorator-specs.js
"use strict";
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
var _SpotlightContainerDecorator = _interopRequireDefault(require("../SpotlightContainerDecorator"));
var _pointer = require("../../src/pointer");
var _spotlight = _interopRequireDefault(require("../../src/spotlight"));
var _ElementPrototype = _interopRequireDefault(require("./Element.prototype.closest"));
var _jsxRuntime = require("react/jsx-runtime");
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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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; }
var testId = 'test-spotlightContainerDecorator';

@@ -37,11 +25,8 @@ describe('SpotlightContainerDecorator', function () {

};
var Div = function Div(props) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({}, props));
};
(0, _ElementPrototype["default"])(beforeAll, afterAll);
beforeEach(function () {
_spotlight["default"].setActiveContainer(null);
(0, _pointer.updatePointerPosition)(0, 0);

@@ -55,11 +40,6 @@ });

}));
var component = _react.screen.getByTestId(testId);
_userEvent["default"].hover(component, hoverPosition);
var expected = 'test-container';
var actual = _spotlight["default"].getActiveContainer();
expect(actual).toBe(expected);

@@ -79,16 +59,12 @@ });

});
var component = _react.screen.getByTestId(testId);
var component = _react.screen.getByTestId(testId); // set inner-container as active
// set inner-container as active
_userEvent["default"].hover(component, hoverPosition);
(0, _pointer.updatePointerPosition)(0, 1);
(0, _pointer.updatePointerPosition)(0, 1); // leave inner-container
// leave inner-container
_userEvent["default"].unhover(component, unhoverPosition);
var expected = 'outer-container';
var actual = _spotlight["default"].getActiveContainer();
expect(actual).toBe(expected);

@@ -110,19 +86,15 @@ });

});
var component = _react.screen.getByTestId(testId);
var component = _react.screen.getByTestId(testId); // set inner-container as active
// set inner-container as active
_userEvent["default"].hover(component, hoverPosition);
(0, _pointer.updatePointerPosition)(0, 1);
(0, _pointer.updatePointerPosition)(0, 1); // set another container to be active
// set another container to be active
_spotlight["default"].setActiveContainer('self-only-container');
_spotlight["default"].setActiveContainer('self-only-container'); // leave inner-container
// leave inner-container
_userEvent["default"].unhover(component, unhoverPosition);
var expected = 'self-only-container';
var actual = _spotlight["default"].getActiveContainer();
expect(actual).toBe(expected);

@@ -156,4 +128,5 @@ });

spotlightDisabled: true
})); // building out the api called on the event object + target
}));
// building out the api called on the event object + target
focus({

@@ -173,5 +146,3 @@ stopPropagation: function stopPropagation() {

var spy = jest.fn();
var _blur;
var Component = (0, _SpotlightContainerDecorator["default"])(function (_ref3) {

@@ -185,4 +156,5 @@ var onBlurCapture = _ref3.onBlurCapture;

spotlightDisabled: true
})); // building out the api called on the event object + target
}));
// building out the api called on the event object + target
_blur({

@@ -198,3 +170,2 @@ stopPropagation: function stopPropagation() {

});
var expected = 1;

@@ -205,9 +176,7 @@ expect(spy).toHaveBeenCalledTimes(expected);

var spy = jest.fn();
var _blur2;
var focus;
var Component = (0, _SpotlightContainerDecorator["default"])(function (_ref4) {
var onBlurCapture = _ref4.onBlurCapture,
onFocusCapture = _ref4.onFocusCapture;
onFocusCapture = _ref4.onFocusCapture;
_blur2 = onBlurCapture;

@@ -220,4 +189,5 @@ focus = onFocusCapture;

spotlightDisabled: true
})); // building out the api called on the event object + target
}));
// building out the api called on the event object + target
focus({

@@ -224,0 +194,0 @@ stopPropagation: function stopPropagation() {

69

SpotlightContainerDecorator/tests/useSpotlightContainer-specs.js
"use strict";
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _useSpotlightContainer = _interopRequireDefault(require("../useSpotlightContainer"));
var _container = require("../../src/container");
var _spotlight = _interopRequireDefault(require("../../src/spotlight"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["containerConfig", "preserveId", "spotlightDisabled", "spotlightId", "spotlightMuted", "spotlightRestrict"];
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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 _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; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function containerExists(id) {
return (0, _container.getContainerConfig)(id) != null;
}
var testId = 'test-useSpotlightContainer';
describe('useSpotlightContainer', function () {
// TODO: Test lifecycle (e.g unload, preserveId)
function Component(props) {
var containerConfig = props.containerConfig,
preserveId = props.preserveId,
spotlightDisabled = props.spotlightDisabled,
spotlightId = props.spotlightId,
spotlightMuted = props.spotlightMuted,
spotlightRestrict = props.spotlightRestrict,
rest = _objectWithoutProperties(props, _excluded);
preserveId = props.preserveId,
spotlightDisabled = props.spotlightDisabled,
spotlightId = props.spotlightId,
spotlightMuted = props.spotlightMuted,
spotlightRestrict = props.spotlightRestrict,
rest = _objectWithoutProperties(props, _excluded);
var spotlightContainer = (0, _useSpotlightContainer["default"])({

@@ -55,5 +41,5 @@ id: spotlightId,

return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), spotlightContainer.attributes));
} // remove all containers after each test
}
// remove all containers after each test
afterEach(_spotlight["default"].clear);

@@ -65,9 +51,6 @@ test('should support omitting the config object', function () {

};
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
"data-testid": testId
}));
var component = _react.screen.getByTestId(testId);
var expectedAttribute = 'data-spotlight-container';

@@ -82,5 +65,3 @@ var expectedValue = 'true';

}));
var component = _react.screen.getByTestId(testId);
var expectedAttribute = 'data-spotlight-container';

@@ -94,5 +75,3 @@ var expectedValue = 'true';

}));
var component = _react.screen.getByTestId(testId);
var expectedAttribute = 'data-spotlight-id';

@@ -104,14 +83,10 @@ var expectedValue = expect.stringMatching(/container-\d+/);

var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
"data-testid": testId
})),
rerender = _render.rerender;
"data-testid": testId
})),
rerender = _render.rerender;
var expected = _react.screen.getByTestId(testId).getAttribute('data-spotlight-id');
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
"data-testid": testId
}));
var actual = _react.screen.getByTestId(testId).getAttribute('data-spotlight-id');
expect(actual).toBe(expected);

@@ -125,5 +100,3 @@ });

}));
var component = _react.screen.getByTestId(testId);
var expectedAttribute = 'data-spotlight-id';

@@ -136,5 +109,3 @@ expect(component).toHaveAttribute(expectedAttribute, id);

}));
var component = _react.screen.getByTestId(testId);
var expectedAttribute = 'data-spotlight-container-disabled';

@@ -148,5 +119,3 @@ expect(component).not.toHaveAttribute(expectedAttribute);

}));
var component = _react.screen.getByTestId(testId);
var expectedAttribute = 'data-spotlight-container-disabled';

@@ -160,5 +129,3 @@ var expectedValue = 'true';

}));
var component = _react.screen.getByTestId(testId);
var expectedAttribute = 'data-spotlight-container-muted';

@@ -172,5 +139,3 @@ expect(component).not.toHaveAttribute(expectedAttribute);

}));
var component = _react.screen.getByTestId(testId);
var expectedAttribute = 'data-spotlight-container-muted';

@@ -212,9 +177,7 @@ var expectedValue = 'true';

var id = 'my-container';
var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
spotlightId: id,
spotlightRestrict: "self-only"
})),
rerender = _render2.rerender;
spotlightId: id,
spotlightRestrict: "self-only"
})),
rerender = _render2.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {

@@ -221,0 +184,0 @@ spotlightId: id,

19

SpotlightContainerDecorator/useSpotlightContainer.js

@@ -8,17 +8,9 @@ "use strict";

exports.useSpotlightContainer = useSpotlightContainer;
var _useClass = _interopRequireDefault(require("@enact/core/useClass"));
var _react = require("react");
var _SpotlightContainer = _interopRequireDefault(require("./SpotlightContainer"));
var _excluded = ["disabled", "id", "muted", "restrict"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
/**

@@ -105,9 +97,7 @@ * Configuration for `useSpotlightContainer`

var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var disabled = config.disabled,
id = config.id,
muted = config.muted,
restrict = config.restrict,
rest = _objectWithoutProperties(config, _excluded);
id = config.id,
muted = config.muted,
restrict = config.restrict,
rest = _objectWithoutProperties(config, _excluded);
var spotlightContainer = (0, _useClass["default"])(_SpotlightContainer["default"], rest);

@@ -133,4 +123,3 @@ spotlightContainer.setProps({

}
var _default = useSpotlightContainer;
exports["default"] = _default;

62

SpotlightRootDecorator/SpotlightRootDecorator.js

@@ -7,47 +7,24 @@ "use strict";

exports.setInputType = exports.getInputType = exports["default"] = exports.activateInputType = exports.SpotlightRootDecorator = void 0;
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
var _keymap = require("@enact/core/keymap");
var _react = require("react");
var _spotlight = _interopRequireDefault(require("../src/spotlight"));
var _Spottable = require("../Spottable");
var _container = require("../src/container");
require("../styles/debug.less");
var _jsxRuntime = require("react/jsx-runtime");
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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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); 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var input = {

@@ -62,9 +39,6 @@ activated: false,

};
var activateInputType = function activateInputType(activated) {
input.activated = activated;
};
exports.activateInputType = activateInputType;
var getInputType = function getInputType() {

@@ -75,5 +49,3 @@ return Object.keys(input.types).find(function (type) {

};
exports.getInputType = getInputType;
var setInputType = function setInputType(inputType) {

@@ -88,2 +60,3 @@ if (Object.prototype.hasOwnProperty.call(input.types, inputType) && !input.types[inputType]) {

};
/**

@@ -95,4 +68,2 @@ * Default configuration for SpotlightRootDecorator

*/
exports.setInputType = setInputType;

@@ -110,2 +81,3 @@ var defaultConfig = {

};
/**

@@ -129,19 +101,12 @@ * Constructs a higher-order component that initializes and enables Spotlight 5-way navigation

*/
var SpotlightRootDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
var _class;
var noAutoFocus = config.noAutoFocus;
return _class = /*#__PURE__*/function (_Component) {
_inherits(_class, _Component);
var _super = _createSuper(_class);
function _class(props) {
var _this;
_classCallCheck(this, _class);
_this = _super.call(this, props);
_this.applyInputType = function () {

@@ -155,7 +120,5 @@ if (_assertThisInitialized(_this) && _this.containerNode) {

};
_this.handleFocusInBeforeMount = function () {
_this.hasFocusedIn = true;
};
_this.handleFocusIn = function () {

@@ -166,6 +129,4 @@ if (!input.applied) {

};
_this.handleKeyDown = function (ev) {
var keyCode = ev.keyCode;
if ((0, _keymap.is)('enter', keyCode) && _this.containerNode.classList.contains('spotlight-input-touch')) {

@@ -175,3 +136,2 @@ // Prevent onclick event trigger by enter key

}
setTimeout(function () {

@@ -181,25 +141,18 @@ if (!input.activated) {

}
_this.applyInputType();
}, 0);
};
_this.handlePointerMove = function (ev) {
if (ev.pointerType === 'mouse') {
setInputType('mouse');
_this.applyInputType();
}
};
_this.handlePointerOver = function (ev) {
if (ev.pointerType === 'touch') {
setInputType('touch');
_this.applyInputType();
}
};
_this.containerNode = null;
if (typeof window === 'object') {

@@ -210,8 +163,7 @@ _spotlight["default"].initialize({

});
_spotlight["default"].set(_container.rootContainerId, {
overflow: true
}); // Sometimes the focusin event is fired before componentDidMount.
});
// Sometimes the focusin event is fired before componentDidMount.
document.addEventListener('focusin', _this.handleFocusInBeforeMount, {

@@ -221,6 +173,4 @@ capture: true

}
return _this;
}
_createClass(_class, [{

@@ -232,3 +182,2 @@ key: "componentDidMount",

}
if (typeof document === 'object') {

@@ -252,3 +201,2 @@ this.containerNode = document.querySelector('#root');

}
if (this.hasFocusedIn) {

@@ -263,3 +211,2 @@ this.hasFocusedIn = false;

_spotlight["default"].terminate();
if (typeof document === 'object') {

@@ -286,3 +233,2 @@ document.removeEventListener('focusin', this.handleFocusIn, {

}]);
return _class;

@@ -289,0 +235,0 @@ }(_react.Component), _class.displayName = 'SpotlightRootDecorator', _class;

109

Spottable/Spottable.js

@@ -19,71 +19,40 @@ "use strict";

});
var _handle = _interopRequireWildcard(require("@enact/core/handle"));
var _useHandlers = _interopRequireDefault(require("@enact/core/useHandlers"));
var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes2 = _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"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _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); 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 _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; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var forwardMouseDown = (0, _handle.forward)('onMouseDown'),
forwardMouseUp = (0, _handle.forward)('onMouseUp'),
forwardClick = (0, _handle.forward)('onClick'),
forwardBlur = (0, _handle.forward)('onBlur'),
forwardFocus = (0, _handle.forward)('onFocus'),
forwardMouseEnter = (0, _handle.forward)('onMouseEnter'),
forwardMouseLeave = (0, _handle.forward)('onMouseLeave'),
forwardKeyDown = (0, _handle.forward)('onKeyDown'),
forwardKeyUp = (0, _handle.forward)('onKeyUp');
forwardMouseUp = (0, _handle.forward)('onMouseUp'),
forwardClick = (0, _handle.forward)('onClick'),
forwardBlur = (0, _handle.forward)('onBlur'),
forwardFocus = (0, _handle.forward)('onFocus'),
forwardMouseEnter = (0, _handle.forward)('onMouseEnter'),
forwardMouseLeave = (0, _handle.forward)('onMouseLeave'),
forwardKeyDown = (0, _handle.forward)('onKeyDown'),
forwardKeyUp = (0, _handle.forward)('onKeyUp');
var callContext = function callContext(name) {

@@ -94,3 +63,2 @@ return function (ev, props, context) {

};
var spotHandlers = {

@@ -108,2 +76,3 @@ onKeyDown: (0, _handle["default"])(forwardKeyDown, callContext('onKeyDown'), forwardMouseDown),

};
/**

@@ -115,3 +84,2 @@ * Default configuration for Spottable

*/
var defaultConfig = {

@@ -129,2 +97,3 @@ /**

};
/**

@@ -152,21 +121,18 @@ * Constructs a Spotlight 5-way navigation-enabled higher-order component.

*/
var Spottable = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
var emulateMouse = config.emulateMouse;
function SpottableBase(props) {
var className = props.className,
disabled = props.disabled,
handleForceUpdate = props.handleForceUpdate,
onSpotlightDisappear = props.onSpotlightDisappear,
onSpotlightDown = props.onSpotlightDown,
onSpotlightLeft = props.onSpotlightLeft,
onSpotlightRight = props.onSpotlightRight,
onSpotlightUp = props.onSpotlightUp,
selectionKeys = props.selectionKeys,
spotlightDisabled = props.spotlightDisabled,
spotlightId = props.spotlightId,
spotRef = props.spotRef,
rest = _objectWithoutProperties(props, _excluded);
disabled = props.disabled,
handleForceUpdate = props.handleForceUpdate,
onSpotlightDisappear = props.onSpotlightDisappear,
onSpotlightDown = props.onSpotlightDown,
onSpotlightLeft = props.onSpotlightLeft,
onSpotlightRight = props.onSpotlightRight,
onSpotlightUp = props.onSpotlightUp,
selectionKeys = props.selectionKeys,
spotlightDisabled = props.spotlightDisabled,
spotlightId = props.spotlightId,
spotRef = props.spotRef,
rest = _objectWithoutProperties(props, _excluded);
var spot = (0, _useSpottable.useSpottable)({

@@ -188,7 +154,5 @@ disabled: disabled,

var tabIndex = rest.tabIndex;
if (tabIndex == null) {
tabIndex = -1;
}
rest.tabIndex = tabIndex;

@@ -202,6 +166,3 @@ var handlers = (0, _useHandlers["default"])(spotHandlers, rest, spot);

}
SpottableBase.propTypes =
/** @lends spotlight/Spottable.Spottable.prototype */
{
SpottableBase.propTypes = /** @lends spotlight/Spottable.Spottable.prototype */{
/**

@@ -215,3 +176,2 @@ * Whether or not the component is in a disabled state.

disabled: _propTypes2["default"].bool,
/**

@@ -224,3 +184,2 @@ * The handler to force update the component.

handleForceUpdate: _propTypes2["default"].func,
/**

@@ -234,3 +193,2 @@ * The handler to run when the component is removed while retaining focus.

onSpotlightDisappear: _propTypes2["default"].func,
/**

@@ -244,3 +202,2 @@ * The handler to run when the 5-way down key is pressed.

onSpotlightDown: _propTypes2["default"].func,
/**

@@ -254,3 +211,2 @@ * The handler to run when the 5-way left key is pressed.

onSpotlightLeft: _propTypes2["default"].func,
/**

@@ -264,3 +220,2 @@ * The handler to run when the 5-way right key is pressed.

onSpotlightRight: _propTypes2["default"].func,
/**

@@ -274,3 +229,2 @@ * The handler to run when the 5-way up key is pressed.

onSpotlightUp: _propTypes2["default"].func,
/**

@@ -286,3 +240,2 @@ * An array of numbers representing keyCodes that should trigger mouse event

selectionKeys: _propTypes2["default"].arrayOf(_propTypes2["default"].number),
/**

@@ -296,3 +249,2 @@ * When `true`, the component cannot be navigated using spotlight.

spotlightDisabled: _propTypes2["default"].bool,
/**

@@ -305,3 +257,2 @@ * Used to identify this component within the Spotlight system

spotlightId: _propTypes2["default"].string,
/*

@@ -314,3 +265,2 @@ * Called with a reference to [component]{@link spotlight/Spottable.Spottable#component}

spotRef: _propTypes["default"].ref,
/**

@@ -324,27 +274,20 @@ * The tabIndex of the component. This value will default to -1 if left

tabIndex: _propTypes2["default"].number
}; // eslint-disable-next-line no-shadow
};
// eslint-disable-next-line no-shadow
var Spottable = /*#__PURE__*/function (_Component) {
_inherits(Spottable, _Component);
var _super = _createSuper(Spottable);
function Spottable() {
var _this;
_classCallCheck(this, Spottable);
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;
}
_createClass(Spottable, [{

@@ -371,6 +314,4 @@ key: "componentDidMount",

}]);
return Spottable;
}(_react.Component);
return Spottable;

@@ -377,0 +318,0 @@ });

103

Spottable/SpottableCore.js

@@ -7,18 +7,11 @@ "use strict";

exports.spottableClass = exports["default"] = exports.SpottableCore = void 0;
var _handle = require("@enact/core/handle");
var _keymap = require("@enact/core/keymap");
var _container = require("../src/container");
var _spotlight = require("../src/spotlight");
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); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
var REMOTE_OK_KEY = 16777221;
var REMOTE_OK_KEY = 16777221;
/**

@@ -30,6 +23,4 @@ * The class name for spottable components. In general, you do not need to directly access this class

*/
var spottableClass = 'spottable';
exports.spottableClass = spottableClass;
var isKeyboardAccessible = function isKeyboardAccessible(node) {

@@ -41,29 +32,26 @@ if (!node) return false;

};
var isSpottable = function isSpottable(props) {
return !props.spotlightDisabled;
}; // Last instance of spottable to be focused
};
// Last instance of spottable to be focused
var lastSelectTarget = null;
var lastSelectTarget = null; // Should we prevent select being passed through
// Should we prevent select being passed through
var selectCancelled = false;
var SpottableCore = /*#__PURE__*/function () {
function SpottableCore(_ref) {
var _this = this;
var emulateMouse = _ref.emulateMouse;
_classCallCheck(this, SpottableCore);
this.didUpdate = function () {
_this.isFocused = _this.node && _this.node === _spotlight.Spotlight.getCurrent(); // if the component is focused and became disabled
_this.isFocused = _this.node && _this.node === _spotlight.Spotlight.getCurrent();
// if the component is focused and became disabled
if (_this.isFocused && _this.props.disabled && lastSelectTarget === _this && !selectCancelled) {
selectCancelled = true;
(0, _handle.forwardCustom)('onSelectionCancel')(null, _this.props);
} // if the component became enabled, notify spotlight to enable restoring "lost" focus
}
// if the component became enabled, notify spotlight to enable restoring "lost" focus
if (isSpottable(_this.props) && _this.context.prevSpotlightDisabled && !_spotlight.Spotlight.isPaused()) {

@@ -73,5 +61,3 @@ if (_spotlight.Spotlight.getPointerMode()) {

_spotlight.Spotlight.setPointerMode(false);
_spotlight.Spotlight.focus(_this.node);
_spotlight.Spotlight.setPointerMode(true);

@@ -81,5 +67,3 @@ }

var containers = (0, _container.getContainersForNode)(_this.node);
var containerId = _spotlight.Spotlight.getActiveContainer();
if (containers.indexOf(containerId) >= 0) {

@@ -91,10 +75,8 @@ _spotlight.Spotlight.focus(containerId);

};
this.forwardSpotlightEvents = function (ev, _ref2) {
var onSpotlightDown = _ref2.onSpotlightDown,
onSpotlightLeft = _ref2.onSpotlightLeft,
onSpotlightRight = _ref2.onSpotlightRight,
onSpotlightUp = _ref2.onSpotlightUp;
onSpotlightLeft = _ref2.onSpotlightLeft,
onSpotlightRight = _ref2.onSpotlightRight,
onSpotlightUp = _ref2.onSpotlightUp;
var keyCode = ev.keyCode;
if (onSpotlightDown && (0, _keymap.is)('down', keyCode)) {

@@ -109,6 +91,4 @@ onSpotlightDown(ev);

}
return true;
};
this.forwardAndResetLastSelectTarget = function (ev, props) {

@@ -120,8 +100,8 @@ var keyCode = ev.keyCode;

});
var notPrevented = !ev.defaultPrevented; // bail early for non-selection keyup to avoid clearing lastSelectTarget prematurely
var notPrevented = !ev.defaultPrevented;
// bail early for non-selection keyup to avoid clearing lastSelectTarget prematurely
if (!key && (!(0, _keymap.is)('enter', keyCode) || !(0, _spotlight.getDirection)(keyCode))) {
return notPrevented;
}
var allow = lastSelectTarget === _this;

@@ -132,3 +112,2 @@ selectCancelled = false;

};
this.shouldEmulateMouse = function (ev, props) {

@@ -138,17 +117,18 @@ if (!_this.config.emulateMouse) {

}
var currentTarget = ev.currentTarget,
repeat = ev.repeat,
type = ev.type,
which = ev.which;
repeat = ev.repeat,
type = ev.type,
which = ev.which;
var selectionKeys = props.selectionKeys;
var keyboardAccessible = isKeyboardAccessible(currentTarget);
var keyCode = selectionKeys.find(function (value) {
return (// emulate mouse events for any remote okay button event
which === REMOTE_OK_KEY || // or a non-keypress selection event or any selection event on a non-keyboard accessible
return (
// emulate mouse events for any remote okay button event
which === REMOTE_OK_KEY ||
// or a non-keypress selection event or any selection event on a non-keyboard accessible
// control
which === value && (type !== 'keypress' || !keyboardAccessible)
);
});
if ((0, _spotlight.getDirection)(keyCode)) {

@@ -160,14 +140,12 @@ (0, _handle.preventDefault)(ev);

}
return keyCode && !repeat;
};
this.isActionable = function (ev, props) {
return isSpottable(props);
};
this.handleSelect = function (_ref3, props) {
var which = _ref3.which;
var selectionKeys = props.selectionKeys; // Only apply accelerator if handling a selection key
var selectionKeys = props.selectionKeys;
// Only apply accelerator if handling a selection key
if (selectionKeys.find(function (value) {

@@ -179,17 +157,15 @@ return which === value;

}
lastSelectTarget = _this;
}
return true;
};
this.handle = _handle.handle.bind(this);
this.handleKeyDown = this.handle(function (ev) {
return !ev.defaultPrevented;
}, this.forwardSpotlightEvents, this.isActionable, this.handleSelect, this.shouldEmulateMouse // `forwardMouseDown` is usually called out of the useSpottable if the `this.shouldEmulateMouse` returns true.
}, this.forwardSpotlightEvents, this.isActionable, this.handleSelect, this.shouldEmulateMouse
// `forwardMouseDown` is usually called out of the useSpottable if the `this.shouldEmulateMouse` returns true.
);
this.handleKeyUp = this.handle(this.forwardAndResetLastSelectTarget, this.isActionable, this.shouldEmulateMouse // `forwardMouseUp` and `forwardClick` are usually called out of the useSpottable if the `this.shouldEmulateMouse` returns true.
this.handleKeyUp = this.handle(this.forwardAndResetLastSelectTarget, this.isActionable, this.shouldEmulateMouse
// `forwardMouseUp` and `forwardClick` are usually called out of the useSpottable if the `this.shouldEmulateMouse` returns true.
);
this.handleFocus = function (ev) {

@@ -202,7 +178,5 @@ if (_this.props.spotlightDisabled) {

}
if (ev.currentTarget === ev.target) {
_this.isFocused = true;
}
if (_spotlight.Spotlight.isMuted(ev.target)) {

@@ -212,21 +186,16 @@ ev.stopPropagation();

}
return true;
};
this.handleBlur = function (ev) {
if (_this.shouldPreventBlur) return false;
if (ev.currentTarget === ev.target) {
_this.isFocused = false;
if (_this.isFocusedWhenDisabled) {
_this.isFocusedWhenDisabled = false; // We only need to trigger a rerender if a focused item becomes disabled and still needs its focus.
_this.isFocusedWhenDisabled = false;
// We only need to trigger a rerender if a focused item becomes disabled and still needs its focus.
// Once it blurs we need to rerender to remove the spottable class so it will not spot again.
// The reason we don't use state is for performance reasons to avoid updates.
_this.props.handleForceUpdate();
}
}
if (_spotlight.Spotlight.isMuted(ev.target)) {

@@ -236,14 +205,10 @@ ev.stopPropagation();

}
return true;
};
this.handleEnter = function () {
_this.isHovered = true;
};
this.handleLeave = function () {
_this.isHovered = false;
};
this.config = {

@@ -257,8 +222,7 @@ emulateMouse: emulateMouse

this.isHovered = false;
this.spottableClass = null; // Used to indicate that we want to stop propagation on blur events that occur as a
this.spottableClass = null;
// 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;
}
_createClass(SpottableCore, [{

@@ -284,3 +248,2 @@ key: "setPropsAndContext",

}
if (lastSelectTarget === this) {

@@ -291,8 +254,6 @@ lastSelectTarget = null;

}]);
return SpottableCore;
}();
exports.SpottableCore = SpottableCore;
var _default = SpottableCore;
exports["default"] = _default;

39

Spottable/tests/Spottable-specs.js
"use strict";
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _Spottable = _interopRequireDefault(require("../Spottable"));
var _jsxRuntime = require("react/jsx-runtime");
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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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; }
var id = 'test-spottable';

@@ -26,5 +18,3 @@ describe('Spottable', function () {

}));
var div = _react.screen.getByTestId(id);
var expectedClass = 'spottable';

@@ -39,5 +29,3 @@ expect(div).toHaveClass(expectedClass);

}));
var div = _react.screen.getByTestId(id);
var expectedClass = 'spottable';

@@ -52,5 +40,3 @@ expect(div).toHaveClass(expectedClass);

}));
var div = _react.screen.getByTestId(id);
var expectedClass = 'spottable';

@@ -62,11 +48,8 @@ expect(div).not.toHaveClass(expectedClass);

var Component = (0, _Spottable["default"])('div');
var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
"data-testid": id,
onSpotlightDisappear: spy
})),
unmount = _render.unmount;
"data-testid": id,
onSpotlightDisappear: spy
})),
unmount = _render.unmount;
var div = _react.screen.getByTestId(id);
div.focus();

@@ -86,6 +69,4 @@ unmount();

var Component = (0, _Spottable["default"])(spy);
var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {})),
rerender = _render2.rerender;
rerender = _render2.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {

@@ -102,8 +83,6 @@ "data-id": "123"

var Component = (0, _Spottable["default"])(spy);
var _render3 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
selectionKeys: [1, 2, 3]
})),
rerender = _render3.rerender;
selectionKeys: [1, 2, 3]
})),
rerender = _render3.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {

@@ -123,5 +102,3 @@ selectionKeys: [2, 1, 3]

}));
var div = _react.screen.getByTestId(id);
div.focus();

@@ -128,0 +105,0 @@ var expected = 2;

132

Spottable/tests/useSpot-specs.js
"use strict";
var _handle = _interopRequireWildcard(require("@enact/core/handle"));
var _useHandlers = _interopRequireDefault(require("@enact/core/useHandlers"));
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _classnames = _interopRequireDefault(require("classnames"));
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"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _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); 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 _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; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var forwardMouseUp = (0, _handle.forward)('onMouseUp'),
forwardMouseDown = (0, _handle.forward)('onMouseDown'),
forwardKeyDown = (0, _handle.forward)('onKeyDown'),
forwardKeyUp = (0, _handle.forward)('onKeyUp'),
id = 'test-useSpot';
forwardMouseDown = (0, _handle.forward)('onMouseDown'),
forwardKeyDown = (0, _handle.forward)('onKeyDown'),
forwardKeyUp = (0, _handle.forward)('onKeyUp'),
id = 'test-useSpot';
var makeKeyEvent = function makeKeyEvent(keyCode) {

@@ -73,7 +43,5 @@ return {

};
var REMOTE_OK_KEY = 16777221;
var compRef = null;
var getCurrent = _spotlight["default"].getCurrent;
var callContext = function callContext(name) {

@@ -84,3 +52,2 @@ return function (ev, props, context) {

};
var spotHandlers = {

@@ -97,17 +64,16 @@ onKeyDown: (0, _handle["default"])(forwardKeyDown, callContext('onKeyDown'), forwardMouseDown),

var className = props.className,
component = props.component,
componentRef = props.componentRef,
disabled = props.disabled,
emulateMouse = props.emulateMouse,
onSelectionCancel = props.onSelectionCancel,
onSpotlightDisappear = props.onSpotlightDisappear,
onSpotlightDown = props.onSpotlightDown,
onSpotlightLeft = props.onSpotlightLeft,
onSpotlightRight = props.onSpotlightRight,
onSpotlightUp = props.onSpotlightUp,
selectionKeys = props.selectionKeys,
spotlightDisabled = props.spotlightDisabled,
spotlightId = props.spotlightId,
rest = _objectWithoutProperties(props, _excluded);
component = props.component,
componentRef = props.componentRef,
disabled = props.disabled,
emulateMouse = props.emulateMouse,
onSelectionCancel = props.onSelectionCancel,
onSpotlightDisappear = props.onSpotlightDisappear,
onSpotlightDown = props.onSpotlightDown,
onSpotlightLeft = props.onSpotlightLeft,
onSpotlightRight = props.onSpotlightRight,
onSpotlightUp = props.onSpotlightUp,
selectionKeys = props.selectionKeys,
spotlightDisabled = props.spotlightDisabled,
spotlightId = props.spotlightId,
rest = _objectWithoutProperties(props, _excluded);
var spot = (0, _useSpottable["default"])({

@@ -136,14 +102,9 @@ disabled: disabled,

}
var SpottableComponent = /*#__PURE__*/function (_Component) {
_inherits(SpottableComponent, _Component);
var _super = _createSuper(SpottableComponent);
function SpottableComponent() {
_classCallCheck(this, SpottableComponent);
return _super.apply(this, arguments);
}
_createClass(SpottableComponent, [{

@@ -168,6 +129,4 @@ key: "componentDidMount",

}]);
return SpottableComponent;
}(_react2.Component);
beforeEach(function () {

@@ -188,5 +147,3 @@ // Spotlight.getCurrent() did not work in unit tests. It always returns `undefined`.

}));
var div = _react.screen.getByTestId(id);
var expected = 'spottable';

@@ -200,5 +157,3 @@ expect(div).toHaveClass(expected);

}));
var div = _react.screen.getByTestId(id);
var expected = 'spottable';

@@ -212,5 +167,3 @@ expect(div).toHaveClass(expected);

}));
var div = _react.screen.getByTestId(id);
var expected = 'spottable';

@@ -226,7 +179,4 @@ expect(div).not.toHaveClass(expected);

}));
var div = _react.screen.getByTestId(id);
_react.fireEvent.keyDown(div, makeKeyEvent(38));
var expected = 1;

@@ -241,7 +191,4 @@ expect(spy).toHaveBeenCalledTimes(expected);

}));
var div = _react.screen.getByTestId(id);
_react.fireEvent.keyDown(div, makeKeyEvent(40));
var expected = 1;

@@ -256,7 +203,4 @@ expect(spy).toHaveBeenCalledTimes(expected);

}));
var div = _react.screen.getByTestId(id);
_react.fireEvent.keyDown(div, makeKeyEvent(37));
var expected = 1;

@@ -271,7 +215,4 @@ expect(spy).toHaveBeenCalledTimes(expected);

}));
var div = _react.screen.getByTestId(id);
_react.fireEvent.keyDown(div, makeKeyEvent(39));
var expected = 1;

@@ -288,7 +229,4 @@ expect(spy).toHaveBeenCalledTimes(expected);

}));
var div = _react.screen.getByTestId(id);
_react.fireEvent.keyDown(div, makeKeyEvent(REMOTE_OK_KEY));
var expected = 1;

@@ -305,9 +243,5 @@ expect(spy).toHaveBeenCalledTimes(expected);

}));
var div = _react.screen.getByTestId(id);
_react.fireEvent.keyDown(div, makeKeyEvent(REMOTE_OK_KEY));
_react.fireEvent.keyUp(div, makeKeyEvent(REMOTE_OK_KEY));
var expected = 1;

@@ -318,7 +252,5 @@ expect(spy).toHaveBeenCalledTimes(expected);

var spy = jest.fn();
function onKeyUp(ev) {
ev.preventDefault();
}
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(SpottableComponent, {

@@ -331,9 +263,5 @@ "data-testid": id,

}));
var div = _react.screen.getByTestId(id);
_react.fireEvent.keyDown(div, makeKeyEvent(REMOTE_OK_KEY));
_react.fireEvent.keyUp(div, makeKeyEvent(REMOTE_OK_KEY));
expect(spy).not.toHaveBeenCalled();

@@ -347,9 +275,7 @@ });

});
var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(SpottableComponent, {
component: spy,
"data-testid": id
})),
rerender = _render.rerender;
component: spy,
"data-testid": id
})),
rerender = _render.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(SpottableComponent, {

@@ -367,10 +293,8 @@ component: spy,

});
var _render2 = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(SpottableComponent, {
component: spy,
"data-testid": id,
selectionKeys: [1, 2, 3]
})),
rerender = _render2.rerender;
component: spy,
"data-testid": id,
selectionKeys: [1, 2, 3]
})),
rerender = _render2.rerender;
rerender( /*#__PURE__*/(0, _jsxRuntime.jsx)(SpottableComponent, {

@@ -392,5 +316,3 @@ component: spy,

}));
var div = _react.screen.getByTestId(id);
div.focus();

@@ -397,0 +319,0 @@ var expected = 1;

28

Spottable/useSpottable.js

@@ -14,25 +14,15 @@ "use strict";

exports.useSpottable = void 0;
var _useClass = _interopRequireDefault(require("@enact/core/useClass"));
var _react = require("react");
var _SpottableCore = require("./SpottableCore");
var _excluded = ["spotRef", "emulateMouse", "selectionKeys", "spotlightDisabled"];
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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 _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; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var ENTER_KEY = 13;
var REMOTE_OK_KEY = 16777221;
/**

@@ -88,9 +78,8 @@ * Configuration for `useSpottable`

var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
spotRef = _ref.spotRef,
emulateMouse = _ref.emulateMouse,
_ref$selectionKeys = _ref.selectionKeys,
selectionKeys = _ref$selectionKeys === void 0 ? [ENTER_KEY, REMOTE_OK_KEY] : _ref$selectionKeys,
spotlightDisabled = _ref.spotlightDisabled,
props = _objectWithoutProperties(_ref, _excluded);
spotRef = _ref.spotRef,
emulateMouse = _ref.emulateMouse,
_ref$selectionKeys = _ref.selectionKeys,
selectionKeys = _ref$selectionKeys === void 0 ? [ENTER_KEY, REMOTE_OK_KEY] : _ref$selectionKeys,
spotlightDisabled = _ref.spotlightDisabled,
props = _objectWithoutProperties(_ref, _excluded);
var hook = (0, _useClass["default"])(_SpottableCore.SpottableCore, {

@@ -108,7 +97,5 @@ emulateMouse: emulateMouse

var attributes = {};
if (props.spotlightId) {
attributes['data-spotlight-id'] = props.spotlightId;
}
hook.setPropsAndContext(_objectSpread({

@@ -138,5 +125,4 @@ selectionKeys: selectionKeys,

};
exports.useSpottable = useSpottable;
var _default = useSpottable;
exports["default"] = _default;

313

src/container.js

@@ -32,37 +32,19 @@ "use strict";

exports.unmountContainer = unmountContainer;
var _and = _interopRequireDefault(require("ramda/src/and"));
var _concat = _interopRequireDefault(require("ramda/src/concat"));
var _snapshot = require("@enact/core/snapshot");
var _util = require("@enact/core/util");
var _intersection = _interopRequireDefault(require("ramda/src/intersection"));
var _last = _interopRequireDefault(require("ramda/src/last"));
var _utils = require("./utils");
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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
var containerAttribute = 'data-spotlight-id';

@@ -82,7 +64,10 @@ exports.containerAttribute = containerAttribute;

'down': 'up'
}; // Incrementer for container IDs
};
// Incrementer for container IDs
var _ids = 0;
var _defaultContainerId = '';
var _lastContainerId = ''; // Note: an <extSelector> can be one of following types:
var _lastContainerId = '';
// Note: an <extSelector> can be one of following types:
// - a valid selector string for "querySelectorAll"

@@ -93,3 +78,2 @@ // - a NodeList or an array containing DOM elements

// - a string "@" to indicate the default container
var GlobalConfig = {

@@ -115,3 +99,3 @@ // set to false for unmounted containers to omit them from searches

var container = _ref.container,
key = _ref.key;
key = _ref.key;
return container ? key : all[key];

@@ -143,2 +127,3 @@ },

};
/**

@@ -155,13 +140,11 @@ * Calculates nodes within `node` that match `includeSelector` and do not match `excludeSelector`

*/
var querySelector = function querySelector(node, includeSelector, excludeSelector) {
var include = new Set(node.querySelectorAll(includeSelector));
var exclude = node.querySelectorAll(excludeSelector);
for (var i = 0; i < exclude.length; i++) {
include["delete"](exclude[i]);
}
return Array.from(include);
};
/**

@@ -176,7 +159,6 @@ * Determines if `node` is a spotlight container

*/
var isContainerNode = function isContainerNode(node) {
return node && node.dataset && 'spotlightContainer' in node.dataset;
};
/**

@@ -195,7 +177,4 @@ * Walks up the node hierarchy calling `fn` on each node that is a container

*/
var mapContainers = function mapContainers(node, fn) {
var result = [];
while (node && node !== document) {

@@ -205,8 +184,7 @@ if (isContainerNode(node)) {

}
node = node.parentNode;
}
return result;
};
/**

@@ -221,7 +199,6 @@ * Returns the container config for `containerId`

*/
var getContainerConfig = function getContainerConfig(id) {
return containerConfigs.get(id);
};
/**

@@ -236,6 +213,3 @@ * Determines if node or a container id represents a spotlight container

*/
exports.getContainerConfig = getContainerConfig;
var isContainer = function isContainer(nodeOrId) {

@@ -245,5 +219,5 @@ if (typeof nodeOrId === 'string') {

}
return isContainerNode(nodeOrId);
};
/**

@@ -258,6 +232,3 @@ * Determines if any of the containers at or above `node` are disabled and, if so, returns `false`.

*/
exports.isContainer = isContainer;
var isContainerEnabled = function isContainerEnabled(node) {

@@ -268,2 +239,3 @@ return mapContainers(node, function (container) {

};
/**

@@ -278,7 +250,6 @@ * Returns the container ID for `node`

*/
var getContainerId = function getContainerId(node) {
return node.dataset[containerKey];
};
/**

@@ -293,6 +264,3 @@ * Generates a CSS selector string for a current container if `node` is a container

*/
exports.getContainerId = getContainerId;
var getContainerSelector = function getContainerSelector(node) {

@@ -302,5 +270,5 @@ if (isContainerNode(node)) {

}
return '';
};
/**

@@ -315,4 +283,2 @@ * Generates a CSS selector string for containers within `node` if it is a container

*/
var getSubContainerSelector = function getSubContainerSelector(node) {

@@ -322,5 +288,5 @@ if (isContainerNode(node)) {

}
return containerSelector;
};
/**

@@ -335,4 +301,2 @@ * Returns the node for a container

*/
var getContainerNode = function getContainerNode(containerId) {

@@ -344,5 +308,5 @@ if (!containerId) {

}
return document.querySelector("[".concat(containerAttribute, "=\"").concat(containerId, "\"]"));
};
/**

@@ -359,14 +323,9 @@ * Calls the `navigableFilter` function for the container if defined.

*/
exports.getContainerNode = getContainerNode;
var navigableFilter = function navigableFilter(node, containerId) {
var nodeStyle = node && (0, _snapshot.isWindowReady)() && window.getComputedStyle(node);
var config = getContainerConfig(containerId);
if (!nodeStyle || nodeStyle.display === 'none' || nodeStyle.visibility === 'hidden') {
return false;
}
if (config && typeof config.navigableFilter === 'function') {

@@ -377,5 +336,5 @@ if (config.navigableFilter(node, containerId) === false) {

}
return true;
};
/**

@@ -390,8 +349,5 @@ * Determines nodes that are owned by `node` based on `aria-owns`.

*/
var getOwnedNodes = function getOwnedNodes(node, selector) {
// if node is document, it will not have getAttribute and therefore can't have aria-owns
var owns = node && node.getAttribute && node.getAttribute('aria-owns');
if (owns) {

@@ -405,5 +361,5 @@ var ids = owns.split(' ');

}
return [];
};
/**

@@ -419,19 +375,15 @@ * Determines all spottable elements and containers that are directly contained by the container

*/
var getSpottableDescendants = function getSpottableDescendants(containerId) {
var node = getContainerNode(containerId); // if it's falsy or is a disabled container, return an empty set
var node = getContainerNode(containerId);
// if it's falsy or is a disabled container, return an empty set
if (!node || isContainerNode(node) && !isContainerEnabled(node)) {
return [];
}
var _ref2 = getContainerConfig(containerId) || {},
selector = _ref2.selector,
selectorDisabled = _ref2.selectorDisabled;
selector = _ref2.selector,
selectorDisabled = _ref2.selectorDisabled;
if (!selector || selectorDisabled) {
return [];
}
var spottableSelector = selector;

@@ -445,2 +397,3 @@ var subContainerSelector = getSubContainerSelector(node);

};
/**

@@ -457,6 +410,3 @@ * Recursively get spottable descendants by including elements within sub-containers that do not

*/
exports.getSpottableDescendants = getSpottableDescendants;
var getDeepSpottableDescendants = function getDeepSpottableDescendants(containerId, excludedContainers) {

@@ -467,3 +417,2 @@ return getSpottableDescendants(containerId).map(function (n) {

var config = getContainerConfig(id);
if (excludedContainers && excludedContainers.indexOf(id) >= 0) {

@@ -475,6 +424,6 @@ return [];

}
return [n];
}).reduce(_concat["default"], []);
};
/**

@@ -488,6 +437,3 @@ * Determines if a container allows 5-way key hold to be preserved or not.

*/
exports.getDeepSpottableDescendants = getDeepSpottableDescendants;
var isContainer5WayHoldable = function isContainer5WayHoldable(containerId) {

@@ -497,2 +443,3 @@ var config = getContainerConfig(containerId);

};
/**

@@ -508,6 +455,3 @@ * Returns an array of ids for containers that wrap the element, in order of outer-to-inner, with

*/
exports.isContainer5WayHoldable = isContainer5WayHoldable;
function getContainersForNode(node) {

@@ -518,2 +462,3 @@ var containers = mapContainers(node, getContainerId);

}
/**

@@ -530,7 +475,6 @@ * Returns an array of ids for containers that wrap the element, in order of outer-to-inner, with

*/
function getNavigableContainersForNode(node) {
var containerIds = getContainersForNode(node); // find first self-only container id
var containerIds = getContainersForNode(node);
// find first self-only container id
var selfOnlyIndex = containerIds.map(getContainerConfig).filter(function (config) {

@@ -542,12 +486,12 @@ return config != null;

}
return index;
}, -1); // if we found one (and it's not the root), slice those off and return
}, -1);
// if we found one (and it's not the root), slice those off and return
if (selfOnlyIndex > 0) {
return containerIds.slice(selfOnlyIndex);
}
return containerIds;
}
/**

@@ -560,11 +504,7 @@ * Generates a new unique identifier for a container

*/
function generateId() {
var id;
/* eslint no-constant-condition: ["error", { "checkLoops": false }] */
while (true) {
id = containerPrefix + String(++_ids);
if (!isContainer(id)) {

@@ -574,5 +514,5 @@ break;

}
return id;
}
/**

@@ -589,4 +529,2 @@ * Merges two container configurations while only allowing keys from `updated` which are defined in

*/
var mergeConfig = function mergeConfig(current, updated) {

@@ -600,3 +538,2 @@ if (!updated) return current;

}
cfg[key] = updated[key];

@@ -607,2 +544,3 @@ }

};
/**

@@ -621,7 +559,4 @@ * Adds or updates a container. When a container id is not specified, it will be generated.

*/
var configureContainer = function configureContainer() {
var containerId, config;
if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'object') {

@@ -632,3 +567,2 @@ config = arguments.length <= 0 ? undefined : arguments[0];

containerId = arguments.length <= 0 ? undefined : arguments[0];
if (typeof (arguments.length <= 1 ? undefined : arguments[1]) === 'object') {

@@ -638,7 +572,5 @@ config = arguments.length <= 1 ? undefined : arguments[1];

}
if (!containerId) {
containerId = generateId();
}
config = mergeConfig(containerConfigs.get(containerId) || _objectSpread({}, GlobalConfig), config);

@@ -648,2 +580,3 @@ containerConfigs.set(containerId, config);

};
/**

@@ -662,6 +595,3 @@ * Adds a container and marks it active. When a container id is not specified, it will be generated.

*/
exports.configureContainer = configureContainer;
var addContainer = function addContainer() {

@@ -673,2 +603,3 @@ var containerId = configureContainer.apply(void 0, arguments);

};
/**

@@ -683,9 +614,7 @@ * Removes a container

*/
exports.addContainer = addContainer;
var removeContainer = function removeContainer(containerId) {
containerConfigs["delete"](containerId);
};
/**

@@ -698,9 +627,7 @@ * Removes all containers

*/
exports.removeContainer = removeContainer;
var removeAllContainers = function removeAllContainers() {
containerConfigs.clear();
};
/**

@@ -715,9 +642,7 @@ * Configures the `GlobalConfig` for containers

*/
exports.removeAllContainers = removeAllContainers;
var configureDefaults = function configureDefaults(config) {
GlobalConfig = mergeConfig(GlobalConfig, config);
};
/**

@@ -734,26 +659,20 @@ * Determines if `node` is a navigable element within the container identified by `containerId`.

*/
exports.configureDefaults = configureDefaults;
var isNavigable = function isNavigable(node, containerId, verify) {
if (!node || // jsdom reports all nodes as having no size so we must skip this condition in our tests
if (!node ||
// jsdom reports all nodes as having no size so we must skip this condition in our tests
process.env.NODE_ENV !== 'test' && node.offsetWidth <= 0 && node.offsetHeight <= 0) {
return false;
}
var containerNode = getContainerNode(containerId);
if (containerNode !== document && containerNode.dataset[disabledKey] === 'true') {
return false;
}
var config = getContainerConfig(containerId);
if (verify && config && config.selector && !isContainer(node) && !(0, _utils.matchSelector)(config.selector, node)) {
return false;
}
return navigableFilter(node, containerId);
};
/**

@@ -766,12 +685,9 @@ * Returns the IDs of all containers

*/
exports.isNavigable = isNavigable;
var getAllContainerIds = function getAllContainerIds() {
var ids = [];
var keys = containerConfigs.keys(); // PhantomJS-friendly iterator->array conversion
var keys = containerConfigs.keys();
// PhantomJS-friendly iterator->array conversion
var id;
while ((id = keys.next()) && !id.done) {

@@ -782,5 +698,5 @@ if (isActiveContainer(id.value)) {

}
return ids;
};
/**

@@ -796,20 +712,15 @@ * Returns the default focus element for a container

*/
exports.getAllContainerIds = getAllContainerIds;
function getContainerDefaultElement(containerId, preferredEnterTo) {
var config = getContainerConfig(containerId);
var defaultElementSelector = config && config.defaultElement;
if (!defaultElementSelector) {
return null;
}
defaultElementSelector = (0, _util.coerceArray)(defaultElementSelector);
defaultElementSelector = (0, _util.coerceArray)(defaultElementSelector); // If a preferred enterTo has been provided, we will favor it by making it first in search array
// If a preferred enterTo has been provided, we will favor it by making it first in search array
if (preferredEnterTo && typeof preferredEnterTo === 'string' && preferredEnterTo !== 'default-element') {
defaultElementSelector.unshift(preferredEnterTo);
}
var spottables = getDeepSpottableDescendants(containerId);

@@ -820,3 +731,2 @@ return defaultElementSelector.reduce(function (result, selector) {

}
if (typeof selector === 'string') {

@@ -826,9 +736,10 @@ return spottables.filter(function (elem) {

})[0];
} // FIXME: There is some prior implicit support for `defaultElement` to be an element rather
}
// FIXME: There is some prior implicit support for `defaultElement` to be an element rather
// than a selector. This continues that support but should eventually be removed.
return selector;
}, null);
}
/**

@@ -843,21 +754,17 @@ * Gets the element last focused within the container.

*/
function getContainerLastFocusedElement(containerId) {
var config = getContainerConfig(containerId);
if (!config || !config.lastFocusedElement) {
return null;
} // lastFocusedElement may be a container ID so try to convert it to a node to test navigability
}
// lastFocusedElement may be a container ID so try to convert it to a node to test navigability
var lastFocusedElement = config.lastFocusedElement;
var node = lastFocusedElement;
if (typeof node === 'string') {
node = getContainerNode(lastFocusedElement);
}
return isNavigable(node, containerId, true) ? lastFocusedElement : null;
}
/**

@@ -873,7 +780,4 @@ * Sets the element last focused within the container

*/
function setContainerLastFocusedElement(node, containerIds) {
var lastFocusedElement = node;
for (var i = containerIds.length - 1; i > -1; i--) {

@@ -883,7 +787,7 @@ var id = containerIds[i];

lastFocusedElement: lastFocusedElement
}); // If any container in the stack is controlling entering focus, use its container id as the
});
// If any container in the stack is controlling entering focus, use its container id as the
// lastFocusedElement instead of the node
var config = getContainerConfig(id);
if (config.enterTo) {

@@ -894,2 +798,3 @@ lastFocusedElement = id;

}
/**

@@ -908,4 +813,2 @@ * Returns all navigable nodes (spottable nodes or containers) visible from outside the container.

*/
function getContainerNavigableElements(containerId, preferredEnterTo) {

@@ -915,23 +818,24 @@ if (!isContainer(containerId)) {

}
var config = getContainerConfig(containerId);
var enterTo = config.enterTo,
overflow = config.overflow;
overflow = config.overflow;
var enterLast = preferredEnterTo === 'last-focused' || enterTo === 'last-focused' && !preferredEnterTo;
var next; // if the container has a preferred entry point, try to find it first
var next;
// if the container has a preferred entry point, try to find it first
if (enterLast) {
next = getContainerLastFocusedElement(containerId);
} // try default element if last focused can't be focused
}
// try default element if last focused can't be focused
if (!next) {
next = getContainerDefaultElement(containerId, preferredEnterTo);
}
if (!next) {
var spottables = overflow ? // overflow requires deep recursion to handle selecting the children of unrestricted
var spottables = overflow ?
// overflow requires deep recursion to handle selecting the children of unrestricted
// containers or restricted containers larger than the container
getDeepSpottableDescendants(containerId) : getSpottableDescendants(containerId); // if there isn't a preferred entry on an overflow container, filter the visible elements
getDeepSpottableDescendants(containerId) : getSpottableDescendants(containerId);
// if there isn't a preferred entry on an overflow container, filter the visible elements
if (overflow) {

@@ -941,10 +845,7 @@ var containerRect = (0, _utils.getContainerRect)(containerId);

var elementRect = (0, _utils.getRect)(element);
if (isContainer(element)) {
return (0, _utils.intersects)(containerRect, elementRect);
}
return (0, _utils.contains)(containerRect, (0, _utils.getRect)(element));
});
if (next && preferredEnterTo === 'topmost') {

@@ -955,5 +856,5 @@ next.sort(function (a, b) {

}
} // otherwise, return all spottables within the container
}
// otherwise, return all spottables within the container
if (!next) {

@@ -963,5 +864,5 @@ next = spottables;

}
return next ? (0, _util.coerceArray)(next) : [];
}
/**

@@ -978,10 +879,8 @@ * Determines the preferred focus target, traversing any sub-containers as necessary, for the given

*/
function getContainerFocusTarget(containerId, preferredEnterTo) {
// deferring restoration until it's requested to allow containers to prepare first
restoreLastFocusedElement(containerId);
var next = getContainerNavigableElements(containerId, preferredEnterTo); // If multiple candidates returned, we need to find the first viable target since some may
var next = getContainerNavigableElements(containerId, preferredEnterTo);
// If multiple candidates returned, we need to find the first viable target since some may
// be empty containers which should be skipped.
return next.reduce(function (result, element) {

@@ -994,10 +893,7 @@ if (result) {

}
return element;
}, null) || null;
}
function getContainerPreviousTarget(containerId, direction, destination) {
var config = getContainerConfig(containerId);
if (config && config.rememberSource && config.previous && config.previous.reverse === direction && config.previous.destination === destination) {

@@ -1007,6 +903,4 @@ return config.previous.target;

}
function setContainerPreviousTarget(containerId, direction, destination, target) {
var config = getContainerConfig(containerId);
if (config && config.rememberSource) {

@@ -1022,2 +916,3 @@ configureContainer(containerId, {

}
/**

@@ -1033,14 +928,11 @@ * Saves the last focused element into `lastFocusedKey` using a container-defined serialization

*/
function persistLastFocusedElement(containerId) {
var cfg = getContainerConfig(containerId);
if (cfg) {
var lastFocusedElement = cfg.lastFocusedElement;
if (lastFocusedElement) {
var all = getDeepSpottableDescendants(containerId);
var lastFocusedKey = cfg.lastFocusedPersist(lastFocusedElement, all); // store lastFocusedKey and release node reference to lastFocusedElement
var lastFocusedKey = cfg.lastFocusedPersist(lastFocusedElement, all);
// store lastFocusedKey and release node reference to lastFocusedElement
cfg.lastFocusedKey = lastFocusedKey;

@@ -1051,2 +943,3 @@ cfg.lastFocusedElement = null;

}
/**

@@ -1062,11 +955,9 @@ * Restores the last focused element from `lastFocusedKey` using a container-defined deserialization

*/
function restoreLastFocusedElement(containerId) {
var cfg = getContainerConfig(containerId);
if (cfg && cfg.lastFocusedKey) {
var all = getDeepSpottableDescendants(containerId);
var lastFocusedElement = cfg.lastFocusedRestore(cfg.lastFocusedKey, all); // restore lastFocusedElement and release lastFocusedKey
var lastFocusedElement = cfg.lastFocusedRestore(cfg.lastFocusedKey, all);
// restore lastFocusedElement and release lastFocusedKey
cfg.lastFocusedKey = null;

@@ -1076,10 +967,7 @@ cfg.lastFocusedElement = lastFocusedElement;

}
function unmountContainer(containerId) {
var config = getContainerConfig(containerId);
if (config) {
config.active = false;
persistLastFocusedElement(containerId);
if (typeof config.defaultElement !== 'string') {

@@ -1090,3 +978,2 @@ config.defaultElement = null;

}
function isActiveContainer(containerId) {

@@ -1096,2 +983,3 @@ var config = getContainerConfig(containerId);

}
/**

@@ -1108,4 +996,2 @@ * Determines if the provided container has a configured restriction.

*/
function isRestrictedContainer(containerId) {

@@ -1116,2 +1002,3 @@ var restrict = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'self-only';

}
/**

@@ -1126,4 +1013,2 @@ * Determines if `innerContainerId` is inside `outerContainerId`.

*/
function containsContainer(outerContainerId, innerContainerId) {

@@ -1134,2 +1019,3 @@ var outer = getContainerNode(outerContainerId);

}
/**

@@ -1142,9 +1028,8 @@ * Determines if `containerId` may become the active container.

*/
function mayActivateContainer(containerId) {
var currentContainerId = getLastContainer();
function mayActivateContainer(containerId) {
var currentContainerId = getLastContainer(); // If the current container or its outer containers are restricted to 'self-only' and
// If the current container or its outer containers are restricted to 'self-only' and
// if the next container to be activated is not inside the restrict container,
// the next container should not be activated.
var currentContainerNode = getContainerNode(currentContainerId);

@@ -1156,7 +1041,5 @@ var restrictContainer = getContainersForNode(currentContainerNode).reduceRight(function (result, outerContainerId) {

}
function getDefaultContainer() {
return isActiveContainer(_defaultContainerId) ? _defaultContainerId : '';
}
function setDefaultContainer(containerId) {

@@ -1171,10 +1054,9 @@ if (!containerId) {

}
function getLastContainer() {
return isActiveContainer(_lastContainerId) ? _lastContainerId : '';
}
function setLastContainer(containerId) {
_lastContainerId = containerId || '';
}
/**

@@ -1188,4 +1070,2 @@ * Updates the last container based on the current focus and target focus.

*/
function setLastContainerFromTarget(current, target) {

@@ -1198,3 +1078,2 @@ var currentContainers = getNavigableContainersForNode(current);

var sharedContainer = (0, _last["default"])((0, _intersection["default"])(currentContainers, targetContainers));
if (sharedContainer || !currentContainerConfig || currentContainerConfig.restrict !== 'self-only') {

@@ -1210,10 +1089,12 @@ // If the target shares a container with the current container stack or the current

}
function isWithinOverflowContainer(target) {
var containerIds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getContainersForNode(target);
return containerIds // ignore the root container id which is set to overflow by the root decorator
return containerIds
// ignore the root container id which is set to overflow by the root decorator
.filter(function (id) {
return id !== rootContainerId;
}) // get the config for each container
.map(getContainerConfig) // and check if any are set to overflow
})
// get the config for each container
.map(getContainerConfig)
// and check if any are set to overflow
.some(function (config) {

@@ -1223,2 +1104,3 @@ return config && config.overflow;

}
/**

@@ -1234,4 +1116,2 @@ * Notifies any affected containers that focus has left one of their children for another container

*/
function notifyLeaveContainer(direction, current, currentContainerIds, next, nextContainerIds) {

@@ -1241,3 +1121,2 @@ currentContainerIds.forEach(function (containerId) {

var config = getContainerConfig(containerId);
if (config && config.onLeaveContainer) {

@@ -1254,2 +1133,3 @@ config.onLeaveContainer({

}
/**

@@ -1263,8 +1143,5 @@ * Notifies any containers that focus attempted to move but failed to find a target

*/
function notifyLeaveContainerFail(direction, current, currentContainerIds) {
currentContainerIds.forEach(function (containerId) {
var config = getContainerConfig(containerId);
if (config && config.onLeaveContainerFail) {

@@ -1279,2 +1156,3 @@ config.onLeaveContainerFail({

}
/**

@@ -1290,4 +1168,2 @@ * Notifies any affected containers that one of their children has received focus.

*/
function notifyEnterContainer(direction, previous, previousContainerIds, current, currentContainerIds) {

@@ -1297,3 +1173,2 @@ currentContainerIds.forEach(function (containerId) {

var config = getContainerConfig(containerId);
if (config && config.onEnterContainer) {

@@ -1300,0 +1175,0 @@ config.onEnterContainer({

79

src/navigate.js

@@ -10,13 +10,10 @@ "use strict";

var straightMinDistance = 0;
var calcGroupId = function calcGroupId(_ref) {
var x = _ref.x,
y = _ref.y;
y = _ref.y;
return y * 3 + x;
};
var calcNextGridPosition = function calcNextGridPosition(current, next) {
var center = current.center;
var x, y;
if (center.x < next.left) {

@@ -29,3 +26,2 @@ x = 0;

}
if (center.y < next.top) {

@@ -38,3 +34,2 @@ y = 0;

}
return {

@@ -45,6 +40,4 @@ x: x,

};
var calcNextExtendedGridPosition = function calcNextExtendedGridPosition(current, next) {
var x, y;
if (current.right <= next.left) {

@@ -57,3 +50,2 @@ x = 0;

}
if (current.bottom <= next.top) {

@@ -66,3 +58,2 @@ y = 0;

}
return {

@@ -73,9 +64,6 @@ x: x,

};
function prioritize(priorities, targetEdge) {
var destGroup = [];
for (var index = 0; index < priorities.length; index++) {
var destPriority = priorities[index];
if (destPriority.group.length) {

@@ -91,3 +79,2 @@ (function () {

var delta = calcDistance(a) - calcDistance(b);
if (delta) {

@@ -97,11 +84,8 @@ return delta;

}
return 0;
});
target = destPriority.group[0];
for (var i = 0; i < destDifference.length; i++) {
distance += destDifference[i](target);
}
destGroup.push({

@@ -114,7 +98,5 @@ distance: Math.pow(destPriority.multiplier * (distance || destPriority.minDistance) / targetEdge, 2) + targetEdge,

}
if (!destGroup.length) {
return null;
}
destGroup.sort(function (a, b) {

@@ -125,25 +107,5 @@ return a.distance - b.distance;

}
function partition(rects, targetRect, straightOverlapThreshold, getGroupId) {
// a matrix of elements where the center of the element in relation to targetRect is:
var groups = [[
/* [0] => above/left */
], [
/* [1] => above/within */
], [
/* [2] => above/right */
], [
/* [3] => within/left */
], [
/* [4] => within */
], [
/* [5] => within/right */
], [
/* [6] => below/left */
], [
/* [7] => below and within */
], [
/* [8] => below/right */
]];
var groups = [[/* [0] => above/left */], [/* [1] => above/within */], [/* [2] => above/right */], [/* [3] => within/left */], [/* [4] => within */], [/* [5] => within/right */], [/* [6] => below/left */], [/* [7] => below and within */], [/* [8] => below/right */]];
for (var i = 0; i < rects.length; i++) {

@@ -153,3 +115,2 @@ var rect = rects[i];

groups[groupId].push(rect);
if ([0, 2, 6, 8].indexOf(groupId) !== -1) {

@@ -163,3 +124,2 @@ if (rect.left <= targetRect.right - targetRect.width * straightOverlapThreshold) {

}
if (rect.right >= targetRect.left + targetRect.width * straightOverlapThreshold) {

@@ -172,3 +132,2 @@ if (groupId === 0) {

}
if (rect.top <= targetRect.bottom - targetRect.height * straightOverlapThreshold) {

@@ -181,3 +140,2 @@ if (groupId === 6) {

}
if (rect.bottom >= targetRect.top + targetRect.height * straightOverlapThreshold) {

@@ -192,6 +150,4 @@ if (groupId === 0) {

}
return groups;
}
function generateDistancefunction(targetRect) {

@@ -201,3 +157,2 @@ return {

var d;
if (rect.center.x < targetRect.center.x) {

@@ -208,3 +163,2 @@ d = targetRect.center.x - rect.right;

}
return d < 0 ? 0 : d;

@@ -214,3 +168,2 @@ },

var d;
if (rect.center.y < targetRect.center.y) {

@@ -221,3 +174,2 @@ d = targetRect.center.y - rect.bottom;

}
return d < 0 ? 0 : d;

@@ -227,3 +179,2 @@ },

var d;
if (rect.center.y < targetRect.center.y) {

@@ -234,3 +185,2 @@ d = targetRect.bottom - rect.top;

}
return d < 0 ? 0 : d;

@@ -240,3 +190,2 @@ },

var d;
if (rect.center.x < targetRect.center.x) {

@@ -247,3 +196,2 @@ d = targetRect.left - rect.right;

}
return d < 0 ? 0 : d;

@@ -253,3 +201,2 @@ },

var d;
if (rect.center.x < targetRect.center.x) {

@@ -260,3 +207,2 @@ d = targetRect.right - rect.left;

}
return d < 0 ? 0 : d;

@@ -266,3 +212,2 @@ },

var d;
if (rect.center.y < targetRect.center.y) {

@@ -273,3 +218,2 @@ d = targetRect.top - rect.bottom;

}
return d < 0 ? 0 : d;

@@ -291,15 +235,12 @@ },

}
function navigate(targetRect, direction, rects, config) {
var partitionRect = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : targetRect;
if (!targetRect || !direction || !rects || !rects.length || !config) {
return null;
}
var distanceFunction = generateDistancefunction(targetRect);
var obliqueMultiplier = config.obliqueMultiplier,
straightMultiplier = config.straightMultiplier,
straightOnly = config.straightOnly,
straightOverlapThreshold = config.straightOverlapThreshold;
straightMultiplier = config.straightMultiplier,
straightOnly = config.straightOnly,
straightOverlapThreshold = config.straightOverlapThreshold;
var groups = partition(rects, partitionRect, straightOverlapThreshold, function (rect, destRect) {

@@ -312,3 +253,2 @@ return calcGroupId(direction === 'up' || direction === 'down' ? calcNextExtendedGridPosition(rect, destRect) : calcNextGridPosition(rect, destRect));

var priorities, targetEdge;
switch (direction) {

@@ -343,3 +283,2 @@ case 'left':

break;
case 'right':

@@ -373,3 +312,2 @@ targetEdge = direction;

break;
case 'up':

@@ -403,3 +341,2 @@ targetEdge = 'top';

break;
case 'down':

@@ -433,21 +370,15 @@ targetEdge = 'bottom';

break;
default:
return null;
}
if (straightOnly) {
priorities.splice(2, 2);
}
var destGroup = prioritize(priorities, targetRect[targetEdge]);
if (!destGroup) {
return null;
}
return destGroup[0].target.element;
}
var _default = navigate;
exports["default"] = _default;

47

src/pointer.js

@@ -7,7 +7,4 @@ "use strict";

exports.updatePointerPosition = exports.setPointerMode = exports.notifyPointerMove = exports.notifyKeyDown = exports.hasPointerMoved = exports.getPointerMode = exports.getLastPointerPosition = void 0;
var _keymap = require("@enact/core/keymap");
var _util = require("@enact/core/util");
/**

@@ -28,2 +25,3 @@ * Exports methods and members for working with pointer events in spotlight

var _pointerMode = true;
/**

@@ -36,6 +34,6 @@ * Sets the current pointer mode

*/
var setPointerMode = function setPointerMode(pointerMode) {
_pointerMode = pointerMode;
};
/**

@@ -48,14 +46,12 @@ * Gets the current pointer mode

*/
exports.setPointerMode = setPointerMode;
var getPointerMode = function getPointerMode() {
return _pointerMode;
}; // Cached pointer position
};
// Cached pointer position
exports.getPointerMode = getPointerMode;
var _pointerX = null;
var _pointerY = null;
/**

@@ -71,6 +67,6 @@ * Returns whether or not the current pointer position matches the provided coordinates

*/
var hasPointerMoved = function hasPointerMoved(x, y) {
return x !== _pointerX || y !== _pointerY;
};
/**

@@ -87,6 +83,3 @@ * Updates the cached pointer position, updating the current pointer mode when the position has

*/
exports.hasPointerMoved = hasPointerMoved;
var updatePointerPosition = function updatePointerPosition(x, y) {

@@ -100,5 +93,5 @@ // Chrome emits mousemove on scroll, but client coordinates do not change.

}
return false;
};
/**

@@ -111,6 +104,3 @@ * Returns the last known position of the pointer

*/
exports.updatePointerPosition = updatePointerPosition;
var getLastPointerPosition = function getLastPointerPosition() {

@@ -121,12 +111,11 @@ return {

};
}; // 30ms (_pointerHiddenToKeyTimeout) is semi-arbitrary, to account for the time it takes for the
};
// 30ms (_pointerHiddenToKeyTimeout) is semi-arbitrary, to account for the time it takes for the
// following directional key event to fire, and to prevent momentary spotting of the last
// focused item - needs to be a value large enough to account for the potentially-trailing
// event, but not too large that another unrelated event can be fired inside the window
exports.getLastPointerPosition = getLastPointerPosition;
var hidePointerJob = new _util.Job(function (callback) {
setPointerMode(false);
if (callback) {

@@ -136,2 +125,3 @@ callback();

}, 30);
/**

@@ -148,6 +138,4 @@ * Notifies spotlight of a change in the pointer position

*/
var notifyPointerMove = function notifyPointerMove(current, target, x, y) {
var priorPointerMode = getPointerMode();
if (updatePointerPosition(x, y)) {

@@ -157,7 +145,8 @@ // if we're entering pointer mode and the target element isn't within the currently

return !priorPointerMode || !current || !current.contains(target);
} // the pointer hasn't actually moved (surprise!)
}
// the pointer hasn't actually moved (surprise!)
return false;
};
/**

@@ -175,9 +164,7 @@ * Notifies the pointer module of key events. If the pointer should be hidden, a timer is set and

*/
exports.notifyPointerMove = notifyPointerMove;
var notifyKeyDown = function notifyKeyDown(keyCode, callback) {
var palmSystem = window.PalmSystem; // for hide/show pointer events, handle them and return true
var palmSystem = window.PalmSystem;
// for hide/show pointer events, handle them and return true
if ((0, _keymap.is)('pointerHide', keyCode)) {

@@ -192,6 +179,4 @@ hidePointerJob.start(callback);

}
return false;
};
exports.notifyKeyDown = notifyKeyDown;

213

src/spotlight.js

@@ -7,27 +7,14 @@ "use strict";

exports.getDirection = exports["default"] = exports.Spotlight = void 0;
var _keymap = require("@enact/core/keymap");
var _snapshot = require("@enact/core/snapshot");
var _platform = _interopRequireDefault(require("@enact/core/platform"));
var _last = _interopRequireDefault(require("ramda/src/last"));
var _Accelerator = _interopRequireDefault(require("../Accelerator"));
var _Spottable = require("../Spottable");
var _Pause = require("../Pause");
var _utils = require("./utils");
var _container = require("./container");
var _pointer = require("./pointer");
var _target = require("./target");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/*

@@ -52,2 +39,3 @@ * A javascript-based implementation of Spatial Navigation.

*/
var isDown = (0, _keymap.is)('down');

@@ -58,2 +46,3 @@ var isEnter = (0, _keymap.is)('enter');

var isUp = (0, _keymap.is)('up');
/**

@@ -68,9 +57,8 @@ * Translates keyCodes into 5-way direction descriptions (e.g. `'down'`)

*/
var getDirection = function getDirection(keyCode) {
return isDown(keyCode) && 'down' || isLeft(keyCode) && 'left' || isRight(keyCode) && 'right' || isUp(keyCode) && 'up';
};
exports.getDirection = getDirection;
var SpotlightAccelerator = new _Accelerator["default"]();
/**

@@ -96,11 +84,11 @@ * Provides 5-way navigation and focus support

*/
var Spotlight = function () {
'use strict';
/*
/* private vars
*/
var _initialized = false;
var _duringFocusChange = false;
/*

@@ -112,4 +100,4 @@ * Whether a 5-way directional key is being held.

*/
var _5WayKeyHold = false;
var _5WayKeyHold = false;
/*

@@ -121,4 +109,4 @@ * Whether to set focus during the next window focus event

*/
var _spotOnWindowFocus = false;
var _spotOnWindowFocus = false;
/*

@@ -131,4 +119,4 @@ * `true` when a pointer move event occurs during a keypress. Used to short circuit key down

*/
var _pointerMoveDuringKeyPress = false;
var _pointerMoveDuringKeyPress = false;
/*

@@ -143,21 +131,17 @@ * protected methods

}
function shouldPreventNavigation() {
return (0, _Pause.isPaused)() || (0, _container.getAllContainerIds)().length === 0;
}
function _getCurrent() {
if (!(0, _snapshot.isWindowReady)()) return;
var activeElement = document.activeElement;
if (activeElement && activeElement !== document.body) {
return activeElement;
}
} // An extension point for updating pointer mode based on the current platform.
}
// An extension point for updating pointer mode based on the current platform.
// Currently only webOS
function setPlatformPointerMode() {
var palmSystem = window.PalmSystem;
if (palmSystem && palmSystem.cursor) {

@@ -167,23 +151,18 @@ (0, _pointer.setPointerMode)(palmSystem.cursor.visibility);

}
function focusElement(elem, containerIds, fromPointer) {
var _window$PalmSystem$cu;
if (!elem) {
return false;
}
if ((0, _pointer.getPointerMode)() && !fromPointer) {
if ((0, _pointer.getPointerMode)() && !fromPointer && typeof window !== 'undefined' && (!window.PalmSystem || (_window$PalmSystem$cu = window.PalmSystem.cursor) !== null && _window$PalmSystem$cu !== void 0 && _window$PalmSystem$cu.visibility)) {
(0, _container.setContainerLastFocusedElement)(elem, containerIds);
return false;
}
var currentFocusedElement = _getCurrent();
if (elem === currentFocusedElement) {
return true;
}
var focusOptions = (0, _container.isWithinOverflowContainer)(elem, containerIds) ? {
preventScroll: true
} : null;
var silentFocus = function silentFocus() {

@@ -193,3 +172,2 @@ elem.focus(focusOptions);

};
if (_duringFocusChange) {

@@ -199,5 +177,3 @@ silentFocus();

}
_duringFocusChange = true;
if ((0, _Pause.isPaused)()) {

@@ -208,3 +184,2 @@ silentFocus();

}
elem.focus(focusOptions);

@@ -215,3 +190,2 @@ _duringFocusChange = false;

}
function focusChanged(elem, containerIds) {

@@ -221,5 +195,3 @@ if (!containerIds || !containerIds.length) {

}
var containerId = (0, _last["default"])(containerIds);
if (containerId) {

@@ -229,3 +201,2 @@ (0, _container.setContainerLastFocusedElement)(elem, containerIds);

}
if (process.env.NODE_ENV !== "production") {

@@ -235,27 +206,22 @@ assignFocusPreview(elem);

}
function restoreFocus() {
var lastContainerId = (0, _container.getLastContainer)();
var next;
if (lastContainerId) {
var position = (0, _pointer.getLastPointerPosition)(); // walk up the chain of containers from the last to attempt to find a target
var position = (0, _pointer.getLastPointerPosition)();
next = (0, _container.getContainersForNode)((0, _container.getContainerNode)(lastContainerId)).reverse(); // only prepend last focused if it exists so that Spotlight.focus() doesn't receive
// walk up the chain of containers from the last to attempt to find a target
next = (0, _container.getContainersForNode)((0, _container.getContainerNode)(lastContainerId)).reverse();
// only prepend last focused if it exists so that Spotlight.focus() doesn't receive
// a falsy target
var lastFocusedElement = (0, _container.getContainerLastFocusedElement)(lastContainerId);
while ((0, _container.isContainer)(lastFocusedElement)) {
var _getContainerConfig = (0, _container.getContainerConfig)(lastFocusedElement);
lastFocusedElement = _getContainerConfig.lastFocusedElement;
}
var lastContainerNode = (0, _container.getContainerNode)(lastContainerId);
if (!lastFocusedElement || lastContainerNode.getBoundingClientRect && lastFocusedElement.getBoundingClientRect && !(0, _utils.contains)(lastContainerNode.getBoundingClientRect(), lastFocusedElement.getBoundingClientRect())) {
lastFocusedElement = (0, _container.getContainerConfig)(lastContainerId).overflow && (0, _target.getNearestTargetFromPosition)(position, lastContainerId);
}
if (lastFocusedElement) {

@@ -266,20 +232,20 @@ next.unshift(lastFocusedElement);

next = [_container.rootContainerId];
} // attempt to find a target starting with the last focused element in the last
}
// attempt to find a target starting with the last focused element in the last
// container, followed by the last container, and finally the root container
return next.reduce(function (focused, target) {
return focused || Spotlight.focus(target);
}, false);
} // The below should be gated on non-production environment only.
}
// The below should be gated on non-production environment only.
function assignFocusPreview(elem) {
var directions = ['up', 'right', 'down', 'left'],
nextClassBase = _Spottable.spottableClass + '-next-'; // Remove all previous targets
nextClassBase = _Spottable.spottableClass + '-next-';
// Remove all previous targets
directions.forEach(function (dir) {
var nextClass = nextClassBase + dir,
prevElems = (0, _utils.parseSelector)('.' + nextClass);
prevElems = (0, _utils.parseSelector)('.' + nextClass);
if (prevElems && prevElems.length !== 0) {

@@ -290,7 +256,7 @@ prevElems.forEach(function (prevElem) {

}
}); // Find all next targets and identify them
});
// Find all next targets and identify them
directions.forEach(function (dir) {
var nextElem = (0, _target.getTargetByDirectionFromElement)(dir, elem);
if (nextElem) {

@@ -301,7 +267,5 @@ nextElem.classList.add(nextClassBase + dir);

}
function spotNextFromPoint(direction, position) {
var containerId = Spotlight.getActiveContainer();
var next = (0, _target.getTargetByDirectionFromPosition)(direction, position, containerId);
if (next) {

@@ -311,18 +275,15 @@ (0, _container.setContainerPreviousTarget)(containerId, direction, next, (0, _container.getContainerLastFocusedElement)(containerId));

}
return false;
}
function spotNext(direction, currentFocusedElement, currentContainerIds) {
var next = (0, _target.getTargetByDirectionFromElement)(direction, currentFocusedElement);
if (next) {
var currentContainerId = (0, _last["default"])(currentContainerIds);
var nextContainerIds = (0, _container.getContainersForNode)(next); // prevent focus if 5-way is being held and the next element isn't wrapped by
var nextContainerIds = (0, _container.getContainersForNode)(next);
// prevent focus if 5-way is being held and the next element isn't wrapped by
// the current element's immediate container
if (_5WayKeyHold && nextContainerIds.indexOf(currentContainerId) < 0 && !(0, _container.isContainer5WayHoldable)(currentContainerId)) {
return false;
}
(0, _container.notifyLeaveContainer)(direction, currentFocusedElement, currentContainerIds, next, nextContainerIds);

@@ -334,24 +295,17 @@ (0, _container.setContainerPreviousTarget)(currentContainerId, direction, next, currentFocusedElement);

}
(0, _container.notifyLeaveContainerFail)(direction, currentFocusedElement, currentContainerIds);
return false;
}
function onAcceleratedKeyDown(evt) {
var direction = getDirection(evt.keyCode);
if (!direction) return;
var currentFocusedElement = _getCurrent();
var currentContainerIds = (0, _container.getContainersForNode)(currentFocusedElement);
spotNext(direction, currentFocusedElement, currentContainerIds);
}
function onBlur() {
var current = _getCurrent();
if (current) {
current.blur();
}
Spotlight.setPointerMode(false);

@@ -361,3 +315,2 @@ _spotOnWindowFocus = true;

}
function handleWebOSMouseEvent(ev) {

@@ -368,6 +321,4 @@ if (!(0, _Pause.isPaused)() && ev && ev.detail && ev.detail.type === 'Leave') {

}
function handleKeyboardStateChangeEvent(_ref) {
var visibility = _ref.visibility;
if (!visibility) {

@@ -377,3 +328,2 @@ setPlatformPointerMode();

}
function onFocus() {

@@ -384,14 +334,12 @@ // Normally, there isn't focus here unless the window has been blurred above. On webOS, the

if (_spotOnWindowFocus) {
setPlatformPointerMode(); // If the window was previously blurred while in pointer mode, the last active containerId may
setPlatformPointerMode();
// If the window was previously blurred while in pointer mode, the last active containerId may
// not have yet set focus to its spottable elements. For this reason we can't rely on setting focus
// to the last focused element of the last active containerId, so we use rootContainerId instead
var lastFocusedElement = (0, _container.getContainerLastFocusedElement)(_container.rootContainerId);
while ((0, _container.isContainer)(lastFocusedElement)) {
var _getContainerConfig2 = (0, _container.getContainerConfig)(lastFocusedElement);
lastFocusedElement = _getContainerConfig2.lastFocusedElement;
}
if (!Spotlight.focus(lastFocusedElement)) {

@@ -402,11 +350,8 @@ // If the last focused element was previously also disabled (or no longer exists), we

}
_spotOnWindowFocus = false;
}
}
function onKeyUp(evt) {
_pointerMoveDuringKeyPress = false;
var keyCode = evt.keyCode;
if (getDirection(keyCode) || isEnter(keyCode)) {

@@ -417,3 +362,2 @@ SpotlightAccelerator.reset();

}
function handlePointerHide() {

@@ -424,3 +368,2 @@ if (!_getCurrent()) {

}
function onKeyDown(evt) {

@@ -431,11 +374,8 @@ if (shouldPreventNavigation()) {

}
var keyCode = evt.keyCode;
var direction = getDirection(keyCode);
var pointerHandled = (0, _pointer.notifyKeyDown)(keyCode, handlePointerHide);
if (pointerHandled || !(direction || isEnter(keyCode))) {
return;
}
if (!(0, _Pause.isPaused)() && !_pointerMoveDuringKeyPress) {

@@ -447,6 +387,4 @@ if (_getCurrent()) {

}
_5WayKeyHold = true;
}
if (direction) {

@@ -456,8 +394,6 @@ preventDefault(evt);

}
function onMouseMove(_ref2) {
var target = _ref2.target,
clientX = _ref2.clientX,
clientY = _ref2.clientY;
clientX = _ref2.clientX,
clientY = _ref2.clientY;
if (shouldPreventNavigation()) {

@@ -467,7 +403,4 @@ (0, _pointer.notifyPointerMove)(null, target, clientX, clientY);

}
var current = _getCurrent();
var update = (0, _pointer.notifyPointerMove)(current, target, clientX, clientY);
if (update) {

@@ -477,5 +410,5 @@ if (_5WayKeyHold) {

}
var next = (0, _target.getNavigableTarget)(target);
var next = (0, _target.getNavigableTarget)(target); // TODO: Consider encapsulating this work within focusElement
// TODO: Consider encapsulating this work within focusElement
if (next !== current) {

@@ -492,7 +425,5 @@ if (next) {

}
function onMouseOver(evt) {
if (shouldPreventNavigation()) return;
var target = evt.target;
if ((0, _pointer.getPointerMode)() && (0, _pointer.hasPointerMoved)(evt.clientX, evt.clientY)) {

@@ -505,10 +436,7 @@ var next = (0, _target.getNavigableTarget)(target); // account for child controls

}
preventDefault(evt);
}
}
function onTouchEnd(evt) {
var current = _getCurrent();
if (current && !current.contains(evt.target)) {

@@ -518,12 +446,8 @@ current.blur();

}
/*
* public methods
*/
var exports =
/** @lends spotlight.Spotlight */
{
var exports = /** @lends spotlight.Spotlight */{
// eslint-disable-line no-shadow
/**

@@ -545,7 +469,5 @@ * Initializes Spotlight. This is generally handled by

window.addEventListener('mousemove', onMouseMove);
if (_platform["default"].touch) {
window.addEventListener('touchend', onTouchEnd);
}
if (_platform["default"].webos) {

@@ -555,7 +477,6 @@ window.top.document.addEventListener('webOSMouse', handleWebOSMouseEvent);

}
(0, _container.setLastContainer)(_container.rootContainerId);
(0, _container.configureDefaults)(containerDefaults);
(0, _container.configureContainer)(_container.rootContainerId); // by default, pointer mode is off but the platform's current state will override that
(0, _container.configureContainer)(_container.rootContainerId);
// by default, pointer mode is off but the platform's current state will override that
(0, _pointer.setPointerMode)(false);

@@ -566,3 +487,2 @@ setPlatformPointerMode();

},
/**

@@ -580,7 +500,5 @@ * Terminates Spotlight. This is generally handled by {@link spotlight.SpotlightRootDecorator}.

window.removeEventListener('mousemove', onMouseMove);
if (_platform["default"].touch) {
window.removeEventListener('touchend', onTouchEnd);
}
if (_platform["default"].webos) {

@@ -590,7 +508,5 @@ window.top.document.removeEventListener('webOSMouse', handleWebOSMouseEvent);

}
Spotlight.clear();
_initialized = false;
},
/**

@@ -609,3 +525,2 @@ * Resets spotlight container information

// set(<containerId>, <config>);
/**

@@ -624,3 +539,2 @@ * Sets the config for spotlight or the specified containerID

// add(<containerId>, <config>);
/**

@@ -642,6 +556,4 @@ * Adds the config for a new container. The container ID may be passed in the configuration

}
(0, _container.unmountContainer)(containerId);
},
/**

@@ -658,16 +570,11 @@ * Removes a container from Spotlight

}
if ((0, _container.getContainerConfig)(containerId)) {
(0, _container.removeContainer)(containerId);
if ((0, _container.getLastContainer)() === containerId) {
Spotlight.setActiveContainer(null);
}
return true;
}
return false;
},
/**

@@ -687,6 +594,4 @@ * Disables the selector rules of the specified container

}
return false;
},
/**

@@ -706,6 +611,4 @@ * Enables the selector rules of the specified container

}
return false;
},
/**

@@ -719,3 +622,2 @@ * Pauses Spotlight

pause: _Pause.pause,
/**

@@ -732,3 +634,2 @@ * Resumes Spotlight

// focus(<extSelector>)
/**

@@ -758,3 +659,2 @@ * Focuses the specified component ID, container ID, element selector, or the default

var currentContainerNode = null;
if (!elem) {

@@ -777,13 +677,9 @@ target = (0, _target.getTargetByContainer)();

}
var nextContainerIds = (0, _container.getContainersForNode)(target);
var nextContainerId = (0, _last["default"])(nextContainerIds);
if ((0, _container.isNavigable)(target, nextContainerId, true)) {
var focused = focusElement(target, nextContainerIds);
if (!focused && wasContainerId) {
(0, _container.setLastContainer)(elem);
}
return focused;

@@ -795,6 +691,4 @@ } else if (wasContainerId) {

}
if (containerOption.toOuterContainer && currentContainerNode) {
var outerContainer = (0, _container.getContainersForNode)(currentContainerNode.parentElement).pop();
if (outerContainer) {

@@ -804,3 +698,2 @@ return this.focus(outerContainer, containerOption);

}
return false;

@@ -810,3 +703,2 @@ },

// move(<direction>, <selector>)
/**

@@ -824,22 +716,15 @@ * Moves focus to the next spottable control in the direction specified. Optionally, a source

direction = direction.toLowerCase();
if (direction !== 'up' && direction !== 'down' && direction !== 'left' && direction !== 'right') {
return false;
}
var elem = selector ? (0, _utils.parseSelector)(selector)[0] : _getCurrent();
if (!elem) {
return false;
}
var containerIds = (0, _container.getContainersForNode)(elem);
if (!containerIds.length) {
return false;
}
return spotNext(direction, elem, containerIds);
},
/**

@@ -855,3 +740,2 @@ * Sets or clears the default container that will receive focus.

setDefaultContainer: _container.setDefaultContainer,
/**

@@ -866,3 +750,2 @@ * Gets the currently active container.

},
/**

@@ -883,3 +766,2 @@ * Sets the currently active container.

},
/**

@@ -893,3 +775,2 @@ * Gets the current pointer mode

getPointerMode: _pointer.getPointerMode,
/**

@@ -904,3 +785,2 @@ * Sets the current pointer mode

setPointerMode: _pointer.setPointerMode,
/**

@@ -917,6 +797,4 @@ * Gets the muted mode value of a spottable element.

}
return (0, _utils.matchSelector)('[data-spotlight-container-muted="true"] .' + _Spottable.spottableClass, elem);
},
/**

@@ -930,3 +808,2 @@ * Determines whether Spotlight is currently paused.

isPaused: _Pause.isPaused,
/**

@@ -943,6 +820,4 @@ * Determines whether an element is spottable.

}
return (0, _target.isFocusable)(elem);
},
/**

@@ -957,3 +832,2 @@ * Returns the currently spotted control.

},
/**

@@ -970,6 +844,4 @@ * Returns a list of spottable elements wrapped by the supplied container.

}
return (0, _container.getSpottableDescendants)(containerId);
},
/**

@@ -986,5 +858,4 @@ * Focuses the next spottable control from the position specified in the direction specified.

}();
exports.Spotlight = Spotlight;
var _default = Spotlight;
exports["default"] = _default;

200

src/target.js

@@ -13,57 +13,35 @@ "use strict";

exports.isFocusable = isFocusable;
var _clamp = _interopRequireDefault(require("ramda/src/clamp"));
var _last = _interopRequireDefault(require("ramda/src/last"));
var _container = require("./container");
var _navigate = _interopRequireDefault(require("./navigate"));
var _utils = require("./utils");
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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function isFocusable(elem) {
var containers = (0, _container.getContainersForNode)(elem);
var verifySelector = true;
for (var i = containers.length - 1; i >= 0; i--) {
var containerId = containers[i];
if (!(0, _container.isNavigable)(elem, containerId, verifySelector)) {
return false;
} // only verify selector for the first (immediate ancestor) container
}
// only verify selector for the first (immediate ancestor) container
verifySelector = false;
}
return true;
}
function getContainersToSearch(containerId) {
var range = [];
var addRange = function addRange(id) {
var config = (0, _container.getContainerConfig)(id);
if (id && range.indexOf(id) < 0 && config && !config.selectorDisabled) {

@@ -73,3 +51,2 @@ range.push(id);

};
if (containerId) {

@@ -80,9 +57,6 @@ addRange(containerId);

addRange((0, _container.getLastContainer)());
_toConsumableArray((0, _container.getAllContainerIds)()).map(addRange);
}
return range;
}
function getTargetByContainer(containerId, enterTo) {

@@ -93,6 +67,4 @@ return getContainersToSearch(containerId).reduce(function (next, id) {

}
function getTargetBySelector(selector) {
if (!selector) return null;
if (selector.charAt(0) === '@') {

@@ -102,5 +74,3 @@ var containerId = selector.length === 1 ? null : selector.substr(1);

}
var next = (0, _utils.parseSelector)(selector)[0];
if (next) {

@@ -110,5 +80,3 @@ if ((0, _container.isContainer)(next)) {

}
var nextContainerIds = (0, _container.getContainersForNode)(next);
if ((0, _container.isNavigable)(next, (0, _last["default"])(nextContainerIds), true)) {

@@ -118,6 +86,4 @@ return next;

}
return null;
}
function isRestrictedContainer(containerId) {

@@ -127,9 +93,8 @@ var config = (0, _container.getContainerConfig)(containerId);

}
function filterRects(elementRects, boundingRect) {
if (!boundingRect) {
return elementRects;
} // remove elements that are outside of boundingRect, if specified
}
// remove elements that are outside of boundingRect, if specified
return elementRects.filter(function (rect) {

@@ -147,5 +112,6 @@ if ((0, _container.isContainer)(rect.element)) {

var leftUpdate = rect.left < boundingRect.left;
var rightUpdate = rect.right > boundingRect.right; // if the element's rect is larger than the bounding rect, clamp it to the bounding rect and
var rightUpdate = rect.right > boundingRect.right;
// if the element's rect is larger than the bounding rect, clamp it to the bounding rect and
// recalculate the center based on the new bounds.
if (topUpdate || bottomUpdate || leftUpdate || rightUpdate) {

@@ -155,3 +121,2 @@ var updated = _objectSpread(_objectSpread({}, rect), {}, {

});
if (topUpdate) updated.top = boundingRect.top;

@@ -161,3 +126,2 @@ if (bottomUpdate) updated.bottom = boundingRect.bottom;

if (rightUpdate) updated.right = boundingRect.right;
if (leftUpdate || rightUpdate) {

@@ -167,3 +131,2 @@ var centerX = updated.left + (updated.right - updated.left) / 2;

}
if (topUpdate || bottomUpdate) {

@@ -173,10 +136,7 @@ var centerY = updated.top + (updated.bottom - updated.top) / 2;

}
return updated;
}
return rect;
});
}
function getContainerContainingRect(elementRects, elementRect) {

@@ -186,13 +146,12 @@ // find candidates that are containers and *visually* contain element

return (0, _container.isContainer)(rect.element) && (0, _utils.contains)(rect, elementRect);
}); // if the next element is a container AND the current element is *visually* contained within
});
// if the next element is a container AND the current element is *visually* contained within
// one of the candidate element, we need to ignore container `enterTo` preferences and
// retrieve its spottable descendants and try to navigate to them.
if (overlapping.length) {
return overlapping[0].element.dataset.spotlightId;
}
return false;
}
function getOverflowContainerRect(containerId) {

@@ -204,3 +163,2 @@ // if the target container has overflowing content, update the boundingRect to match its

var nextConfig = (0, _container.getContainerConfig)(containerId);
if (nextConfig && nextConfig.overflow) {

@@ -210,3 +168,2 @@ return (0, _utils.getContainerRect)(containerId);

}
function getTargetInContainerByDirectionFromPosition(direction, containerId, positionRect, elementContainerIds, boundingRect) {

@@ -216,10 +173,9 @@ var elements = (0, _container.getDeepSpottableDescendants)(containerId);

var next = null;
var _loop = function _loop() {
var overlappingContainerId = getContainerContainingRect(elementRects, positionRect);
var _loop = function _loop() {
var overlappingContainerId = getContainerContainingRect(elementRects, positionRect); // if the pointer is within a container that is a candidate element, we need to ignore container
// if the pointer is within a container that is a candidate element, we need to ignore container
// `enterTo` preferences and retrieve its spottable descendants and try to navigate to them.
if (overlappingContainerId) {
next = getTargetInContainerByDirectionFromPosition(direction, overlappingContainerId, positionRect, elementContainerIds, boundingRect);
if (!next) {

@@ -231,17 +187,18 @@ // filter out the container and try again

return "continue";
} // found a target so break out and return
}
// found a target so break out and return
return "break";
} // try to navigate from position to one of the candidates in containerId
}
// try to navigate from position to one of the candidates in containerId
next = (0, _navigate["default"])(positionRect, direction, elementRects, (0, _container.getContainerConfig)(containerId));
next = (0, _navigate["default"])(positionRect, direction, elementRects, (0, _container.getContainerConfig)(containerId)); // if we match a container, recurse into it
// if we match a container, recurse into it
if (next && (0, _container.isContainer)(next)) {
var nextContainerId = next.dataset.spotlightId; // need to cache this reference so we can filter it out later if necessary
var nextContainerId = next.dataset.spotlightId;
// need to cache this reference so we can filter it out later if necessary
var lastNavigated = next;
next = getTargetInContainerByDirectionFromPosition(direction, nextContainerId, positionRect, elementContainerIds, getOverflowContainerRect(nextContainerId) || boundingRect);
if (!next) {

@@ -254,27 +211,25 @@ // filter out the container and try again

}
} // If we've met every condition and haven't explicitly retried the search via `continue`,
}
// If we've met every condition and haven't explicitly retried the search via `continue`,
// break out and return
return "break";
};
while (elementRects.length > 0) {
var _ret = _loop();
if (_ret === "continue") continue;
if (_ret === "break") break;
}
return next;
}
function getTargetInContainerByDirectionFromElement(direction, containerId, element, elementRect, elementContainerIds, boundingRect) {
var elements = (0, _container.getDeepSpottableDescendants)(containerId); // shortcut for previous target from element if it were saved
var elements = (0, _container.getDeepSpottableDescendants)(containerId);
// shortcut for previous target from element if it were saved
var previous = (0, _container.getContainerPreviousTarget)(containerId, direction, element);
if (previous && elements.indexOf(previous) !== -1) {
return previous;
} // `spotlightOverflow` is a private, and likely temporary, API to allow a component within an
}
// `spotlightOverflow` is a private, and likely temporary, API to allow a component within an
// spotlight container with `overflow: true` to be treated as if it were outside of the

@@ -286,19 +241,15 @@ // container. The result is that the candidates, `elements` are filtered by the bounds of the

// escape the Scrollable from paging controls rather than focusing contents that are out of view
if (element.dataset.spotlightOverflow === 'ignore') {
boundingRect = getOverflowContainerRect(containerId) || boundingRect;
}
var elementRects = filterRects((0, _utils.getRects)(elements), boundingRect);
var next = null;
var _loop2 = function _loop2() {
var overlappingContainerId = getContainerContainingRect(elementRects, elementRect);
var _loop2 = function _loop2() {
var overlappingContainerId = getContainerContainingRect(elementRects, elementRect); // if the next element is a container AND the current element is *visually* contained within
// if the next element is a container AND the current element is *visually* contained within
// one of the candidate elements, we need to ignore container `enterTo` preferences and
// retrieve its spottable descendants and try to navigate to them.
if (overlappingContainerId) {
next = getTargetInContainerByDirectionFromElement(direction, overlappingContainerId, element, elementRect, elementContainerIds, boundingRect);
if (!next) {

@@ -310,10 +261,10 @@ // filter out the container and try again

return "continue";
} // found a target so break out and return
}
// found a target so break out and return
return "break";
}
return "break";
} // If one of the downstream containers is configured for partition, we use that
// If one of the downstream containers is configured for partition, we use that
// container's bounds as the partition rect for navigation.
var partitionContainer = elementContainerIds.slice(elementContainerIds.indexOf(containerId) + 1).find(function (id) {

@@ -324,15 +275,17 @@ var cfg = (0, _container.getContainerConfig)(id);

var partitionRect = elementRect;
if (partitionContainer) {
partitionRect = (0, _utils.getContainerRect)(partitionContainer);
} // try to navigate from element to one of the candidates in containerId
}
// try to navigate from element to one of the candidates in containerId
next = (0, _navigate["default"])(elementRect, direction, elementRects, (0, _container.getContainerConfig)(containerId), partitionRect);
next = (0, _navigate["default"])(elementRect, direction, elementRects, (0, _container.getContainerConfig)(containerId), partitionRect); // if we match a container,
// if we match a container,
if (next && (0, _container.isContainer)(next)) {
var nextContainerId = next.dataset.spotlightId; // need to cache this reference so we can filter it out later if necessary
var nextContainerId = next.dataset.spotlightId;
var lastNavigated = next; // and it is restricted, return its target
// need to cache this reference so we can filter it out later if necessary
var lastNavigated = next;
// and it is restricted, return its target
if (isRestrictedContainer(nextContainerId)) {

@@ -344,3 +297,2 @@ next = getTargetByContainer(nextContainerId);

}
if (!next) {

@@ -352,35 +304,29 @@ elementRects = elementRects.filter(function (rect) {

}
} // If we've met every condition and haven't explicitly retried the search via `continue`,
}
// If we've met every condition and haven't explicitly retried the search via `continue`,
// break out and return
return "break";
};
while (elementRects.length > 0) {
var _ret2 = _loop2();
if (_ret2 === "continue") continue;
if (_ret2 === "break") break;
}
return next;
}
function getTargetByDirectionFromElement(direction, element) {
var extSelector = element.getAttribute('data-spot-' + direction);
if (typeof extSelector === 'string') {
return getTargetBySelector(extSelector);
}
var elementRect = (0, _utils.getRect)(element);
var next = (0, _container.getNavigableContainersForNode)(element).reduceRight(function (result, containerId, index, elementContainerIds) {
result = result || getTargetInContainerByDirectionFromElement(direction, containerId, element, elementRect, elementContainerIds);
if (!result) {
result = getLeaveForTarget(containerId, direction);
if (!result) {
result = getLeaveForTarget(containerId, direction); // To support a `leaveFor` configuration with navigation disallowed in the current
// To support a `leaveFor` configuration with navigation disallowed in the current
// `direction`, we return the current element to prevent further searches for a
// target in this reduction.
if (result === false) {

@@ -390,10 +336,9 @@ result = element;

}
return result;
}, null);
return result;
}, null); // if the reduce above returns the original element, it means it hit a `leaveFor` config that
// if the reduce above returns the original element, it means it hit a `leaveFor` config that
// prevents navigation so we enforce that here by returning null.
return next !== element ? next : null;
}
function getTargetByDirectionFromPosition(direction, position, containerId) {

@@ -405,2 +350,3 @@ var pointerRect = (0, _utils.getPointRect)(position);

}
/**

@@ -417,10 +363,6 @@ * Returns the target identified by the selector configured for the container identified by

*/
function getLeaveForTarget(containerId, direction) {
var config = (0, _container.getContainerConfig)(containerId);
if (config) {
var target = config.restrict !== 'self-only' && config.leaveFor && config.leaveFor[direction];
if (typeof target === 'string') {

@@ -430,8 +372,5 @@ if (target === '') {

}
return getTargetBySelector(target);
}
var nextContainerIds = (0, _container.getContainersForNode)(target);
if ((0, _container.isNavigable)(target, (0, _last["default"])(nextContainerIds))) {

@@ -441,10 +380,7 @@ return target;

}
return null;
}
function getNavigableTarget(target) {
if (target === document) return null;
var parent;
while (target && ((0, _container.isContainer)(target) || !isFocusable(target))) {

@@ -457,11 +393,9 @@ parent = target.parentNode;

}
var getOffsetDistanceToTargetFromPosition = function getOffsetDistanceToTargetFromPosition(distance, direction, _ref, _ref2) {
var x = _ref.x,
y = _ref.y;
y = _ref.y;
var left = _ref2.left,
right = _ref2.right,
top = _ref2.top,
bottom = _ref2.bottom;
right = _ref2.right,
top = _ref2.top,
bottom = _ref2.bottom;
if (direction === 'left' || direction === 'right') {

@@ -478,11 +412,8 @@ if (y > bottom) {

}
return distance;
};
var getDistanceToTargetFromPosition = function getDistanceToTargetFromPosition(direction, position, elementRect) {
var x = position.x,
y = position.y;
y = position.y;
var distance;
if (direction === 'left') {

@@ -497,10 +428,7 @@ distance = x - elementRect.right;

}
return getOffsetDistanceToTargetFromPosition((0, _clamp["default"])(0, Math.abs(distance), distance), direction, position, elementRect);
};
var getNearestTargetsInContainerFromPosition = function getNearestTargetsInContainerFromPosition(position, containerId) {
return ['up', 'left', 'right', 'down'].reduce(function (result, direction) {
var target = getTargetByDirectionFromPosition(direction, position, containerId);
if (target) {

@@ -512,17 +440,13 @@ result.push({

}
return result;
}, []);
};
var getNearestTargetInContainerFromPosition = function getNearestTargetInContainerFromPosition(position, containerId) {
var targets = getNearestTargetsInContainerFromPosition(position, containerId);
if (!targets.length) {
return;
}
targets.forEach(function (item) {
var direction = item.direction,
target = item.target;
target = item.target;
item.distance = getDistanceToTargetFromPosition(direction, position, (0, _utils.getRect)(target));

@@ -535,7 +459,5 @@ });

};
var getNearestTargetFromPosition = function getNearestTargetFromPosition(position, containerId) {
return getNavigableTarget(document.elementFromPoint(position.x, position.y)) || getNearestTargetInContainerFromPosition(position, containerId);
};
exports.getNearestTargetFromPosition = getNearestTargetFromPosition;

16

src/tests/container-specs.js
"use strict";
var _container17 = require("../container");
var _utils = require("./utils");
var _node, _container, _container2, _container3, _container4, _container5, _container6, _container7, _container8, _container9, _container10, _container11, _container12, _container13, _container15, _container16;
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; }
var nonSpottable = function nonSpottable() {

@@ -16,3 +12,2 @@ return (0, _utils.node)({

};
var scenarios = {

@@ -69,3 +64,2 @@ onlySpottables: (0, _utils.someSpottables)(5),

};
var setupContainers = function setupContainers() {

@@ -78,3 +72,2 @@ (0, _container17.configureDefaults)({

};
var teardownContainers = function teardownContainers() {

@@ -84,3 +77,2 @@ // clean up any containers we create for safe tests

};
describe('container', function () {

@@ -160,4 +152,5 @@ describe('#getSpottableDescendants', function () {

test('should include owned nodes', (0, _utils.testScenario)(scenarios.owned, function () {
(0, _container17.configureContainer)('container'); // owned nodes follow internal nodes
(0, _container17.configureContainer)('container');
// owned nodes follow internal nodes
var expected = ['s2', 's1'];

@@ -277,5 +270,6 @@ var actual = (0, _container17.getSpottableDescendants)('container').map(function (n) {

expect(actual).toBe(expected);
})); // FIXME: This is testing a previously supported feature (setting a node as defaultElement)
}));
// FIXME: This is testing a previously supported feature (setting a node as defaultElement)
// which was never documented and should be removed in a future release.
test('should return the default spottable element when enterTo is "default-element" and defaultElement contains an array of selectors wiht a node reference', (0, _utils.testScenario)(scenarios.containerWithDefaultAndLastFocused, function (root) {

@@ -282,0 +276,0 @@ (0, _container17.configureContainer)('container', {

12

src/tests/navigate-specs.js
"use strict";
var _navigate = _interopRequireDefault(require("../navigate"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
// loose copy from utils/getRect to fabricate a rect for navigation

@@ -38,3 +30,2 @@ function getRect(top, left, height, width, elem) {

}
describe('navigate', function () {

@@ -79,3 +70,4 @@ test('should return the element above when direction="up"', function () {

var targetRect = getRect(105, 100, 10, 10);
var rects = [[100, 110, 10, 10, 'right'], [100, 90, 10, 10, 'left'], [90, 90, 30, 30, 'under'], // completely contains the targetRect
var rects = [[100, 110, 10, 10, 'right'], [100, 90, 10, 10, 'left'], [90, 90, 30, 30, 'under'],
// completely contains the targetRect
[110, 100, 10, 10, 'below']].map(function (args) {

@@ -82,0 +74,0 @@ return getRect.apply(void 0, _toConsumableArray(args));

4

src/tests/pointer-specs.js
"use strict";
var _keymap = require("@enact/core/keymap");
var _pointer = require("../pointer");
var reset = function reset() {

@@ -11,3 +9,2 @@ (0, _pointer.updatePointerPosition)(null, null);

};
describe('pointer', function () {

@@ -26,2 +23,3 @@ afterEach(reset);

// notified when the job completes before continuing.
var keyMap = {

@@ -28,0 +26,0 @@ pointerHide: 999,

66

src/tests/spotlight-specs.js
"use strict";
var _container4 = require("../container");
var _spotlight = _interopRequireDefault(require("../spotlight"));
var _utils = require("./utils");
var _container, _container2, _container3;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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; }
var nonSpottable = function nonSpottable() {

@@ -20,3 +14,2 @@ return (0, _utils.node)({

};
var scenarios = {

@@ -31,6 +24,4 @@ complexTree: (0, _utils.join)((0, _utils.spottable)({

};
var setupContainers = function setupContainers() {
_spotlight["default"].setPointerMode(false);
(0, _container4.configureDefaults)({

@@ -42,3 +33,2 @@ selector: '.spottable'

};
var teardownContainers = function teardownContainers() {

@@ -48,3 +38,2 @@ // clean up any containers we create for safe tests

};
var mockFocus = function mockFocus(n) {

@@ -61,3 +50,2 @@ var fn = jest.fn().mockImplementation(function () {

};
describe('Spotlight', function () {

@@ -69,5 +57,3 @@ describe('#focus', function () {

var fn = mockFocus(root.querySelector('[data-spotlight-id="s1"]'));
_spotlight["default"].focus('s1');
expect(fn).toBeCalled();

@@ -78,5 +64,3 @@ }));

var fn = mockFocus(root.querySelector('[data-spotlight-id="first-container"] > .spottable'));
_spotlight["default"].focus('first-container');
expect(fn).toBeCalled();

@@ -87,5 +71,3 @@ }));

var fn = mockFocus(n);
_spotlight["default"].focus(n);
expect(fn).toBeCalled();

@@ -97,5 +79,3 @@ }));

var fn = mockFocus(n.querySelector('.spottable'));
_spotlight["default"].focus(n);
expect(fn).toBeCalled();

@@ -106,5 +86,3 @@ }));

var fn = mockFocus(n);
_spotlight["default"].focus('[data-spotlight-id="s1"]');
expect(fn).toBeCalled();

@@ -116,8 +94,48 @@ }));

var fn = mockFocus(n.querySelector('.spottable'));
_spotlight["default"].focus('[data-spotlight-id="first-container"]');
expect(fn).toBeCalled();
}));
});
describe('#move', function () {
beforeEach(setupContainers);
afterEach(teardownContainers);
test('should return false when the direction is not one of \'left\', \'right\', \'up\' or \'down\'', (0, _utils.testScenario)(scenarios.complexTree, function () {
var actual = _spotlight["default"].move('leeeft');
expect(actual).toBe(false);
}));
});
describe('#initialize', function () {
beforeEach(function () {
jest.spyOn(window, 'addEventListener').mockImplementationOnce(function () {});
});
afterEach(function () {
window.addEventListener.mockRestore();
});
test('should register event listener of several event types', function () {
_spotlight["default"].initialize();
expect(window.addEventListener).toBeCalledWith('blur', expect.any(Function));
expect(window.addEventListener).toBeCalledWith('focus', expect.any(Function));
expect(window.addEventListener).toBeCalledWith('keydown', expect.any(Function));
expect(window.addEventListener).toBeCalledWith('keyup', expect.any(Function));
expect(window.addEventListener).toBeCalledWith('mouseover', expect.any(Function));
expect(window.addEventListener).toBeCalledWith('mousemove', expect.any(Function));
});
});
describe('#terminate', function () {
beforeEach(function () {
jest.spyOn(window, 'removeEventListener').mockImplementationOnce(function () {});
});
afterEach(function () {
window.removeEventListener.mockRestore();
});
test('should remove event listener of several event types', function () {
_spotlight["default"].terminate();
expect(window.removeEventListener).toBeCalledWith('blur', expect.any(Function));
expect(window.removeEventListener).toBeCalledWith('focus', expect.any(Function));
expect(window.removeEventListener).toBeCalledWith('keydown', expect.any(Function));
expect(window.removeEventListener).toBeCalledWith('keyup', expect.any(Function));
expect(window.removeEventListener).toBeCalledWith('mouseover', expect.any(Function));
expect(window.removeEventListener).toBeCalledWith('mousemove', expect.any(Function));
});
});
});

70

src/tests/target-specs.js
"use strict";
var _container12 = require("../container");
var _target = require("../target");
var _utils = require("./utils");
var _container2, _container3, _container4, _container5, _container6, _container7, _container8, _container9, _container10, _container11;
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; }
var nonSpottable = function nonSpottable() {

@@ -18,7 +13,5 @@ return (0, _utils.node)({

};
var position = function position(top, left) {
return "position: absolute; top: ".concat(top, "px; left: ").concat(left, "px; height: 10px; width: 10px;");
};
var positionedSpottable = function positionedSpottable(id, top, left) {

@@ -30,9 +23,6 @@ return (0, _utils.spottable)({

};
var grid = function grid() {
var _container;
return (0, _utils.container)((_container = {}, _defineProperty(_container, _container12.containerAttribute, 'grid'), _defineProperty(_container, "style", 'position: relative; height: 30px; width: 30px;'), _defineProperty(_container, "children", (0, _utils.join)(positionedSpottable('top-left', 0, 0), positionedSpottable('top-center', 0, 10), positionedSpottable('top-right', 0, 20), positionedSpottable('middle-left', 10, 0), positionedSpottable('middle-center', 10, 10), positionedSpottable('middle-right', 10, 20), positionedSpottable('bottom-left', 20, 0), positionedSpottable('bottom-center', 20, 10), positionedSpottable('bottom-right', 20, 20))), _container));
};
var scenarios = {

@@ -93,7 +83,5 @@ complexTree: (0, _utils.join)((0, _utils.spottable)(nonSpottable()), (0, _utils.container)((_container4 = {}, _defineProperty(_container4, _container12.containerAttribute, 'first-container'), _defineProperty(_container4, "children", (0, _utils.join)((0, _utils.someSpottables)(2), (0, _utils.container)((_container3 = {}, _defineProperty(_container3, _container12.containerAttribute, 'second-container'), _defineProperty(_container3, "children", (0, _utils.join)((0, _utils.someSpottables)(3), (0, _utils.container)((_container2 = {}, _defineProperty(_container2, _container12.containerAttribute, 'third-container'), _defineProperty(_container2, 'data-spotlight-container-disabled', true), _defineProperty(_container2, "children", (0, _utils.join)((0, _utils.someSpottables)(4), (0, _utils.node)({

};
var safeTarget = function safeTarget(n, fn) {
return n ? fn(n) : 'NOT FOUND';
};
var setupContainers = function setupContainers() {

@@ -105,3 +93,2 @@ (0, _container12.configureDefaults)({

};
var teardownContainers = function teardownContainers() {

@@ -111,9 +98,9 @@ // clean up any containers we create for safe tests

(0, _container12.setDefaultContainer)();
}; // NOTE: Skipping most tests because JSDOM does not support measurments
};
// NOTE: Skipping most tests because JSDOM does not support measurments
describe('target', function () {
beforeEach(setupContainers);
afterEach(teardownContainers);
describe.skip('#getNavigableTarget', function () {
describe('#getNavigableTarget', function () {
test('should find spottable parent', (0, _utils.testScenario)(scenarios.complexTree, function (root) {

@@ -265,4 +252,5 @@ var other = root.querySelector('.other');

test('should return null for an empty selectors', (0, _utils.testScenario)(scenarios.nonSpottableInContainer, function () {
var expected = null; // eslint-disable-next-line no-undefined
var expected = null;
// eslint-disable-next-line no-undefined
expect((0, _target.getTargetBySelector)(undefined)).toBe(expected);

@@ -503,7 +491,5 @@ expect((0, _target.getTargetBySelector)(null)).toBe(expected);

var overlap = root.querySelector('#over-middle-center');
var _overlap$getBoundingC = overlap.getBoundingClientRect(),
x = _overlap$getBoundingC.left,
y = _overlap$getBoundingC.top;
x = _overlap$getBoundingC.left,
y = _overlap$getBoundingC.top;
expect(safeTarget((0, _target.getTargetByDirectionFromPosition)('down', {

@@ -521,7 +507,5 @@ x: x,

var element = root.querySelector('#outside-overflow');
var _element$getBoundingC = element.getBoundingClientRect(),
x = _element$getBoundingC.left,
y = _element$getBoundingC.top;
x = _element$getBoundingC.left,
y = _element$getBoundingC.top;
expect(safeTarget((0, _target.getTargetByDirectionFromPosition)('down', {

@@ -542,7 +526,5 @@ x: x,

var element = root.querySelector('#outside-overflow');
var _element$getBoundingC2 = element.getBoundingClientRect(),
x = _element$getBoundingC2.left,
y = _element$getBoundingC2.top;
x = _element$getBoundingC2.left,
y = _element$getBoundingC2.top;
expect(safeTarget((0, _target.getTargetByDirectionFromPosition)('down', {

@@ -560,9 +542,7 @@ x: x,

var element = root.querySelector('#overflow-within');
var _element$getBoundingC3 = element.getBoundingClientRect(),
left = _element$getBoundingC3.left,
width = _element$getBoundingC3.width,
top = _element$getBoundingC3.top,
height = _element$getBoundingC3.height;
left = _element$getBoundingC3.left,
width = _element$getBoundingC3.width,
top = _element$getBoundingC3.top,
height = _element$getBoundingC3.height;
var x = left + width / 2;

@@ -586,9 +566,7 @@ var y = top + height / 2;

var element = root.querySelector('#above');
var _element$getBoundingC4 = element.getBoundingClientRect(),
left = _element$getBoundingC4.left,
width = _element$getBoundingC4.width,
top = _element$getBoundingC4.top,
height = _element$getBoundingC4.height;
left = _element$getBoundingC4.left,
width = _element$getBoundingC4.width,
top = _element$getBoundingC4.top,
height = _element$getBoundingC4.height;
var x = left + width / 2;

@@ -607,9 +585,7 @@ var y = top + height - 1; // just inside the bottom of 'above'

var element = root.querySelector('#above');
var _element$getBoundingC5 = element.getBoundingClientRect(),
left = _element$getBoundingC5.left,
width = _element$getBoundingC5.width,
top = _element$getBoundingC5.top,
height = _element$getBoundingC5.height;
left = _element$getBoundingC5.left,
width = _element$getBoundingC5.width,
top = _element$getBoundingC5.top,
height = _element$getBoundingC5.height;
var x = left + width / 2;

@@ -616,0 +592,0 @@ var y = top + height + 1; // just inside the empty container

29

src/tests/utils.js

@@ -7,19 +7,10 @@ "use strict";

exports.testScenario = exports.spottable = exports.someSpottablesAndContainers = exports.someSpottables = exports.someNodes = exports.someContainers = exports.node = exports.join = exports.generateContainerId = exports.container = void 0;
var _ramda = _interopRequireDefault(require("ramda"));
var _container = require("../container");
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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
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; }
var join = _ramda["default"].unapply(_ramda["default"].join('\n'));
exports.join = join;
var testScenario = function testScenario(scenario, callback) {

@@ -31,3 +22,2 @@ return function () {

var root = document.getElementById(rootId);
try {

@@ -37,3 +27,2 @@ callback(root);

console.log(html); // eslint-disable-line no-console
throw e;

@@ -43,12 +32,8 @@ }

};
exports.testScenario = testScenario;
var _id = 1;
var generateContainerId = function generateContainerId() {
return "".concat(_container.containerAttribute, "=").concat(_id++);
};
exports.generateContainerId = generateContainerId;
var coerceProps = function coerceProps(v) {

@@ -63,3 +48,2 @@ if (typeof v === 'object') {

};
var node = function node(props) {

@@ -79,5 +63,3 @@ var children = '';

};
exports.node = node;
var spottable = function spottable(props) {

@@ -88,16 +70,11 @@ return node(_objectSpread({

};
exports.spottable = spottable;
var container = function container(props) {
var _objectSpread2;
return node(_objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, _container.containerAttribute, _id++), _defineProperty(_objectSpread2, 'data-spotlight-container', true), _objectSpread2), coerceProps(props)));
}; // eslint-disable-next-line react-hooks/rules-of-hooks
};
// eslint-disable-next-line react-hooks/rules-of-hooks
exports.container = container;
var someNodes = _ramda["default"].useWith(_ramda["default"].compose(_ramda["default"].join('\n'), _ramda["default"].map), [_ramda["default"].identity, _ramda["default"].range(0)]);
exports.someNodes = someNodes;

@@ -108,5 +85,3 @@ var someSpottables = someNodes(spottable);

exports.someContainers = someContainers;
var someSpottablesAndContainers = _ramda["default"].converge(_ramda["default"].concat, [someSpottables, someContainers]);
exports.someSpottablesAndContainers = someSpottablesAndContainers;

53

src/utils.js

@@ -13,11 +13,6 @@ "use strict";

exports.parseSelector = parseSelector;
var _curry = _interopRequireDefault(require("ramda/src/curry"));
var _warning = _interopRequireDefault(require("warning"));
var _container = require("./container");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var elementMatchesSelector = function elementMatchesSelector(selector) {

@@ -27,7 +22,5 @@ var matchedNodes = (this.parentNode || this.document).querySelectorAll(selector);

};
if (typeof window === 'object') {
elementMatchesSelector = window.Element.prototype.matches || window.Element.prototype.matchesSelector || window.Element.prototype.mozMatchesSelector || window.Element.prototype.webkitMatchesSelector || window.Element.prototype.msMatchesSelector || window.Element.prototype.oMatchesSelector || elementMatchesSelector;
}
var matchSelector = (0, _curry["default"])(function (selector, elem) {

@@ -41,10 +34,7 @@ if (typeof selector === 'string') {

}
return false;
});
exports.matchSelector = matchSelector;
function parseSelector(selector) {
var result = [];
try {

@@ -61,16 +51,13 @@ if (typeof selector === 'string') {

}
return result;
}
var testIntersection = function testIntersection(type, containerRect, elementRect) {
var L = containerRect.left,
R = containerRect.right,
T = containerRect.top,
B = containerRect.bottom;
R = containerRect.right,
T = containerRect.top,
B = containerRect.bottom;
var l = elementRect.left,
r = elementRect.right,
t = elementRect.top,
b = elementRect.bottom;
r = elementRect.right,
t = elementRect.top,
b = elementRect.bottom;
if (type === 'intersects') {

@@ -80,7 +67,11 @@ // Test intersection by eliminating the area of the element that is outside of the container

} else if (type === 'contains') {
var epsilon = 1; // Test whether all bounds are within the container
var epsilon = 1;
return r > L - epsilon && r < R + epsilon && // right
l > L - epsilon && l < R + epsilon && // left
t > T - epsilon && t < B + epsilon && // top
// Test whether all bounds are within the container
return r > L - epsilon && r < R + epsilon &&
// right
l > L - epsilon && l < R + epsilon &&
// left
t > T - epsilon && t < B + epsilon &&
// top
b > T - epsilon && b < B + epsilon // bottom

@@ -92,3 +83,2 @@ ;

};
var intersects = (0, _curry["default"])(function (containerRect, elementRect) {

@@ -102,3 +92,2 @@ return testIntersection('intersects', containerRect, elementRect);

exports.contains = contains;
function getRect(elem) {

@@ -123,6 +112,5 @@ var cr = elem.getBoundingClientRect();

}
function getPointRect(position) {
var x = position.x,
y = position.y;
y = position.y;
return {

@@ -145,3 +133,2 @@ left: x,

}
function getRects(candidates) {

@@ -151,10 +138,8 @@ if (candidates && candidates.length > 0) {

}
return [];
}
function getViewportRect() {
var _window = window,
width = _window.innerWidth,
height = _window.innerHeight;
width = _window.innerWidth,
height = _window.innerHeight;
var x = width / 2;

@@ -179,15 +164,11 @@ var y = height / 2;

}
function getContainerRect(containerId) {
var containerNode = (0, _container.getContainerNode)(containerId);
if (!containerNode) {
return null;
}
if (containerNode === document) {
return getViewportRect();
}
return getRect(containerNode);
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc