@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 from '@enact/spotlight/SpotlightRootDecorator'
import Spottable from '@enact/spotlight/Spottable'

const MySpottableComponent = Spottable('div');

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

export default MySpotlightApp;

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-2021 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

[4.0.0] - 2021-03-26

Removed

• ui/A11yDecorator
• ui/Button, ui/Icon, ui/IconButton, and ui/LabeledIcon default size values

Added

• ui/BodyText, ui/Button, ui/Group, ui/Heading, ui/Icon, ui/IconButton, ui/Image, ui/ImageItem, ui/LabeledIcon, ui/Layout, ui/ProgressBar, ui/Repeater, ui/Slider, ui/SlotItem, ui/Spinner, ui/ToggleIcon, ui/ToggleItem, and ui/ViewManager support for forwarding refs to the respective root component

Changed

• sampler look and feel by updating to Storybook 6
• ui/Touchable event onHold and onHoldPulse to onHoldStart and onHold respectively to match with the naming convention

Fixed

• ui/FloatingLayerDecorator to render floating node properly
• `ui/Touchable' to handle touch related events only for valid targets