Enact 4.5.0 Released

We’re pleased to announce the release of Enact 4.5.0. Since the release of Enact 4.0, which was mainly shipped on webOS TVs in 2022, we have been continuously improving and adding features according to user feedback and developer requirements. The highlights of the release are as follows.

• Bumped up to the lasted React 18
• Upgraded support for node LTS and related npm
• Unit tests were migrated to @testing-library/react
• Added support for Sass and Tailwind CSS
• Added support for seamless user input between touch, pointer, and 5-way remote control.
• Updated Sandstone UI components (detailed in Changelog below)

The Sandstone Scroller editable items added

As you might expect from the version number, Enact 4.5 doesn’t break existing code. However, if you want to use the cool features of React 18 like Automatic Batching, Suspense, etc., you need to use the new React DOM Client API introduced in React 18.

Migration Guide

We provide an Enact migration guide. This guide spells out the changes needed to bring apps up-to-date with the latest Enact and how to use the new features of React 18 in the Enact.

You can start with updating Enact CLI to version 5.0.0 or newer as follows:

npm install -g @enact/cli

Documentation and Samples

Complete documentation for this release is available on the Enact site.

The Sandstone sampler showcases each component and its available props to allow developers to explore the available options more easily. The sampler includes samples for all components including those added in this release.

Enact team will continue to iterate on this Enact 4.5.0 while also planning ahead for what will be in Enact 5. Please feel free to ask our community for any questions, tips, advice, or assistance.

Enact is fully open and your contribution is always welcomed. If you are interested in making Enact better, please read the contribution guide and make PR!

Changelog

CLI

• Update the webpack to 5.x, eslint to 8.x, jest to 27.x, react, react-dom to 18.x
• Drop the support of enzyme. Please do not hesitate to replace enzyme with @testing-library/react when you make your unit tests.
• Add Sass and Tailwind CSS support

Sandstone

• All unit tests are migrated to @testing-library/react.
• All components are updated to use forwardCustom and added type when forwarding custom events.
• DatePicker and TimePicker are changed to not show a pressing effect on touch input.
• Detailed property containing inputType is added in onClose event payload to FixedPopupPanels, FlexiblePopupPanels, Popup, PopupTabLayout.
• Add the public class name icon to Icon.
• Add the new icon wallpaper to Icon.
• Add the prop noSubtitle to Panels.Header and WizardPanels for hiding subtitle area.
• Panels.Header and RadioItem are changed to use onClick instead of onTap for touch support.
• Add the prop changedBy to Picker and RangePicker for providing a way to control left and right keys in horizontal joined Picker.
• Add the prop editable to Scroller for enabling editing items in the Scroller.
• Scroller thumb is now read out ‘press ok button to read text’ additionally when focusableScrollbar prop is byEnter and read out ‘leftmost’, ‘rightmost’, ‘topmost’, or ‘downmost’ when reaching the end of the scroll.
• Scroller and VirtualList are changed to show overscroll effect when flicking by default.
• Add the props data-webos-voice-focused, data-webos-voice-disabled, and data-webos-voice-group-label to Scroller and VirtualList.
• TabLayout is changed to eliminate the horizontal maximum number of tabs.
• Add the props backButtonAriaLabel, onWillFastForward, onWillJumpBackward, onWillJumpForward, onWillPause, onWillPlay, onWillRewind, and onBack to VideoPlayer.

UI

• All components are updated to use forwardCustom and added type when forwarding custom events.
• The locale type for forceDirection prop is added to MarqueeDecorator for not overriding the direction depending on contents.
• The className config of MarqueeDecorator is deprecated and has been replaced by css. Use css instead to customize the marquee styles.
• Scroller and VirtualList remove the props data-webos-voice-focused, data-webos-voice-disabled, and data-webos-voice-group-label.

Spotlight

• Changes to not focus on an invisible element.
• Add an optional containerOption.toOuterContainer parameter to focus function to search target recursively to outer container.