@enact/spotlight

@enact/spotlight

An extensible library for 5-way navigation and focus control.

An extensible utility that enables users to navigate applications using a keyboard or television remote control. Responding to input from the UP, DOWN, LEFT, RIGHT, and RETURN keys, Spotlight provides a navigation experience that compares favorably to that of a computer-with-mouse.

Usage

import kind from '@enact/core/kind';
import {SpotlightRootDecorator, Spottable} from '@enact/spotlight';

const MySpottableComponent = Spottable('div');

const MyApp = kind({
    name: 'MyApp',
    render: () => (<MySpottableComponent>Hello, Enact!</MySpottableComponent>)
});
const MySpotlightApp = SpotlightRootDecorator(MyApp);

See the docs for more information.

Additional Information

When using @enact/moonstone, the SpotlightRootDecorator is applied automatically by MoonstoneDecorator.

Acknowledgments

Spotlight is based on a fork of JavaScript SpatialNavigation (c) 2016 Luke Chang, under the terms of the Mozilla Public License.

Copyright and License Information

Unless otherwise specified, all content, including all source code files and documentation files in this repository are:

Copyright (c) 2012-2018 LG Electronics

Unless otherwise specified or set forth in the NOTICE file, all content, including all source code files and documentation files in this repository are: Licensed under the Apache License, Version 2.0 (the "License"); you may not use this content except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Changelog

[2.2.8] - 2018-12-06

Fixed

• moonstone/ExpandableInput to focus labeled item on close
• moonstone/ExpandableItem to disable its spotlight container when the component is disabled
• moonstone/Scroller to correctly handle scrolling focused elements and containers into view
• spotlight to focus correctly within an overflow container in which the first element is another container without spottable children
• ui/Marquee to display an ellipsis when changing to text that no longer fits within its bounds
• ui/VirtualList, ui/VirtualGridList, and ui/Scroller to debounce onScrollStop events for non-animated scrolls