4.5.3 release

.travis.yml

@@ -2,15 +2,19 @@ dist: focal
 language: node_js
 node_js:
     - lts/*
-    - "18"
+    - node
 sudo: false
 before_install:
     - sudo apt-get update
     - sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
 install:
     - npm config set prefer-offline false
-    - npm install -g enactjs/cli#develop
     - npm install -g codecov
+    - git clone --branch=develop --depth 1 https://github.com/enactjs/cli ../cli
+    - pushd ../cli
+    - npm install
+    - npm link
+    - popd
     - git clone --branch=develop --depth 1 https://github.com/enactjs/enact ../enact
     - pushd ../enact
     - npm install

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 The following is a curated list of changes in the Enact moonstone module, newest changes on the top.
 
+## [4.5.3] - 2023-05-10
+
+### Added
+
+- `moonstone/UiGridListImageItem` component, transferred from `moonstone/internal/GridListImageItem`
+- `moonstone/UiIconButton` component, transferred from `ui/IconButton`
+- `moonstone/UiRadioDecorator` component, transferred from `ui/RadioDecorator`
+- `moonstone/UiScroller.ScrollerBase` component, transferred from `ui/Scroller.ScrollerBase`
+- `moonstone/UiSlotItem` component, transferred from `ui/SlotItem`
+- `moonstone/UiToggleItem` component, transferred from `ui/ToggleItem`
+- `moonstone/UiVirtualList.VirtualListBase` component, transferred from `ui/VirtualList.VirtualListBase`
+
 ## [4.5.2] - 2022-12-14
 
 No significant changes.

DatePicker/DatePicker.js

@@ -127,7 +127,7 @@ const dateTimeConfig = {
  * @memberof moonstone/DatePicker
  * @extends moonstone/DatePicker.DatePickerBase
  * @mixes ui/Toggleable.Toggleable
- * @mixes ui/RadioDecorator.RadioDecorator
+ * @mixes moonstone/UiRadioDecorator.RadioDecorator
  * @mixes ui/Changeable.Changeable
  * @omit day
  * @omit maxDays

ExpandableItem/Expandable.js

@@ -1,8 +1,9 @@
 import Cancelable from '@enact/ui/Cancelable';
 import hoc from '@enact/core/hoc';
-import RadioDecorator from '@enact/ui/RadioDecorator';
 import Toggleable from '@enact/ui/Toggleable';
 
+import RadioDecorator from '../UiRadioDecorator';
+
 import ExpandableSpotlightDecorator from './ExpandableSpotlightDecorator';
 
 // TODO: This module may not doc correctly but we'll need to wait until our doc parsing script is
@@ -65,7 +66,7 @@ const defaultConfig = {
  * @class Expandable
  * @memberof moonstone/ExpandableItem
  * @mixes ui/Toggleable.Toggleable
- * @mixes ui/RadioDecorator.RadioDecorator
+ * @mixes moonstone/UiRadioDecorator.RadioDecorator
  * @mixes ui/Cancelable.Cancelable
  * @hoc
  * @public

GridListImageItem/GridListImageItem.js

@@ -20,10 +20,10 @@ import PropTypes from 'prop-types';
 import compose from 'ramda/src/compose';
 
 import Icon from '../Icon';
-import GridListImageItemCore from '../internal/GridListImageItem';
 import {ImageBase as Image} from '../Image';
 import {Marquee, MarqueeController} from '../Marquee';
 import Skinnable from '../Skinnable';
+import GridListImageItemCore from '../UiGridListImageItem';
 
 import componentCss from './GridListImageItem.module.less';
 
@@ -42,6 +42,7 @@ const
  *
  * @class GridListImageItemBase
  * @memberof moonstone/GridListImageItem
+ * @extends moonstone/UiGridListImageItem.GridListImageItem
  * @ui
  * @public
  */

IconButton/IconButton.js

@@ -13,7 +13,6 @@
  */
 
 import kind from '@enact/core/kind';
-import {IconButtonBase as UiIconButtonBase, IconButtonDecorator as UiIconButtonDecorator} from '@enact/ui/IconButton';
 import Pure from '@enact/ui/internal/Pure';
 import Spottable from '@enact/spotlight/Spottable';
 import PropTypes from 'prop-types';
@@ -23,6 +22,7 @@ import {ButtonBase} from '../Button';
 import Icon from '../Icon';
 import Skinnable from '../Skinnable';
 import TooltipDecorator from '../TooltipDecorator';
+import {IconButtonBase as UiIconButtonBase, IconButtonDecorator as UiIconButtonDecorator} from '../UiIconButton';
 
 import componentCss from './IconButton.module.less';
 
@@ -32,7 +32,7 @@ import componentCss from './IconButton.module.less';
  * @class IconButtonBase
  * @memberof moonstone/IconButton
  * @extends moonstone/Button.ButtonBase
- * @extends ui/IconButton.IconButtonBase
+ * @extends moonstone/UiIconButton.IconButtonBase
  * @omit buttonComponent
  * @omit iconComponent
  * @ui
@@ -116,7 +116,7 @@ const IconButtonBase = kind({
  * @hoc
  * @memberof moonstone/IconButton
  * @mixes moonstone/TooltipDecorator.TooltipDecorator
- * @mixes ui/IconButton.IconButtonDecorator
+ * @mixes moonstone/UiIconButton.IconButtonDecorator
  * @mixes spotlight/Spottable.Spottable
  * @mixes moonstone/Skinnable.Skinnable
  * @public

LabeledIconButton/LabeledIconButton.js

@@ -18,14 +18,14 @@
 
 import kind from '@enact/core/kind';
 import Spottable from '@enact/spotlight/Spottable';
-import {IconButtonDecorator as UiIconButtonDecorator} from '@enact/ui/IconButton';
 import {LabeledIconBase as UiLabeledIconBase, LabeledIconDecorator as UiLabeledIconDecorator} from '@enact/ui/LabeledIcon';
 import Pure from '@enact/ui/internal/Pure';
 import PropTypes from 'prop-types';
 import compose from 'ramda/src/compose';
 
 import {IconButtonBase} from '../IconButton';
 import Skinnable from '../Skinnable';
+import {IconButtonDecorator as UiIconButtonDecorator} from '../UiIconButton';
 
 import componentCss from './LabeledIconButton.module.less';
 

Scrollable/ScrollThumb.js

@@ -1,15 +1,16 @@
-import {ScrollThumb as UiScrollThumb} from '@enact/ui/Scrollable/Scrollbar';
 import PropTypes from 'prop-types';
 import {Component} from 'react';
 
+import {ScrollThumb as UiScrollThumb} from '../UiScrollable/UiScrollbar';
+
 const nop = () => {};
 
 /**
  * A Moonstone-styled scroll thumb with moonstone behavior
  *
  * @class ScrollThumb
  * @memberof moonstone/Scrollable
- * @extends ui/Scrollable/ScrollThumb
+ * @extends moonstone/UiScrollable/ScrollThumb
  * @ui
  * @private
  */

Scrollable/Scrollable.js

@@ -12,7 +12,6 @@ import platform from '@enact/core/platform';
 import {onWindowReady} from '@enact/core/snapshot';
 import {clamp, Job} from '@enact/core/util';
 import {I18nContextDecorator} from '@enact/i18n/I18nDecorator';
-import {constants, ScrollableBase as UiScrollableBase} from '@enact/ui/Scrollable';
 import Spotlight, {getDirection} from '@enact/spotlight';
 import {spottableClass} from '@enact/spotlight/Spottable';
 import {getTargetByDirectionFromElement, getTargetByDirectionFromPosition} from '@enact/spotlight/src/target';
@@ -23,6 +22,7 @@ import {createRef, Component} from 'react';
 
 import $L from '../internal/$L';
 import {SharedState} from '../internal/SharedStateDecorator';
+import {constants, ScrollableBase as UiScrollableBase} from '../UiScrollable';
 
 import Scrollbar from './Scrollbar';
 import Skinnable from '../Skinnable';
@@ -135,7 +135,7 @@ const getTargetInViewByDirectionFromPosition = (direction, position, container)
  *
  * @class ScrollableBase
  * @memberof moonstone/Scrollable
- * @extends ui/Scrollable.ScrollableBase
+ * @extends moonstone/UiScrollable.ScrollableBase
  * @ui
  * @public
  */

Scrollable/ScrollableNative.js

@@ -4,7 +4,6 @@ import platform from '@enact/core/platform';
 import {onWindowReady} from '@enact/core/snapshot';
 import {clamp, Job} from '@enact/core/util';
 import {I18nContextDecorator} from '@enact/i18n/I18nDecorator';
-import {constants, ScrollableBaseNative as UiScrollableBaseNative} from '@enact/ui/Scrollable/ScrollableNative';
 import Spotlight, {getDirection} from '@enact/spotlight';
 import {spottableClass} from '@enact/spotlight/Spottable';
 import {getTargetByDirectionFromElement, getTargetByDirectionFromPosition} from '@enact/spotlight/src/target';
@@ -15,6 +14,7 @@ import {createRef, Component} from 'react';
 
 import $L from '../internal/$L';
 import {SharedState} from '../internal/SharedStateDecorator';
+import {constants, ScrollableBaseNative as UiScrollableBaseNative} from '../UiScrollable/UiScrollableNative';
 
 import Scrollbar from './Scrollbar';
 import Skinnable from '../Skinnable';
@@ -116,7 +116,7 @@ const getTargetInViewByDirectionFromPosition = (direction, position, container)
  *
  * @class ScrollableBaseNative
  * @memberof moonstone/ScrollableNative
- * @extends ui/Scrollable.ScrollableBaseNative
+ * @extends moonstone/UiScrollable.ScrollableBaseNative
  * @ui
  * @private
  */

Scrollable/Scrollbar.js

@@ -1,11 +1,12 @@
 import ApiDecorator from '@enact/core/internal/ApiDecorator';
-import {ScrollbarBase as UiScrollbarBase} from '@enact/ui/Scrollable/Scrollbar';
 import PropTypes from 'prop-types';
 import {createRef, Component} from 'react';
 
+import Skinnable from '../Skinnable';
+import {ScrollbarBase as UiScrollbarBase} from '../UiScrollable/UiScrollbar';
+
 import ScrollButtons from './ScrollButtons';
 import ScrollThumb from './ScrollThumb';
-import Skinnable from '../Skinnable';
 
 import componentCss from './Scrollbar.module.less';
 
@@ -14,7 +15,7 @@ import componentCss from './Scrollbar.module.less';
  *
  * @class ScrollbarBase
  * @memberof moonstone/Scrollable
- * @extends ui/ScrollbarBase
+ * @extends moonstone/UiScrollbarBase
  * @ui
  * @private
  */
@@ -54,7 +55,7 @@ class ScrollbarBase extends Component {
 
 		/**
 		 * `true` if rtl, `false` if ltr.
-		 * Normally, {@link ui/Scrollable.Scrollable|Scrollable} should set this value.
+		 * Normally, {@link moonstone/UiScrollable.Scrollable|Scrollable} should set this value.
 		 *
 		 * @type {Boolean}
 		 * @private

Scroller/Scroller.js

@@ -19,12 +19,12 @@
 import {Spotlight} from '@enact/spotlight';
 import {getRect} from '@enact/spotlight/src/utils';
 import ri from '@enact/ui/resolution';
-import {ScrollerBase as UiScrollerBase} from '@enact/ui/Scroller';
 import PropTypes from 'prop-types';
 import {Component} from 'react';
 
 import Scrollable from '../Scrollable';
 import ScrollableNative from '../Scrollable/ScrollableNative';
+import {ScrollerBase as UiScrollerBase} from '../UiScroller/UiScrollerBase';
 
 const dataContainerDisabledAttribute = 'data-spotlight-container-disabled';
 
@@ -36,7 +36,7 @@ const dataContainerDisabledAttribute = 'data-spotlight-container-disabled';
  *
  * @class ScrollerBase
  * @memberof moonstone/Scroller
- * @extends ui/Scroller.ScrollerBase
+ * @extends moonstone/UiScroller.ScrollerBase
  * @ui
  * @public
  */

SlotItem/SlotItem.js

@@ -23,7 +23,6 @@
 import kind from '@enact/core/kind';
 import Spottable from '@enact/spotlight/Spottable';
 import Pure from '@enact/ui/internal/Pure';
-import {SlotItemBase as UiSlotItemBase, SlotItemDecorator as UiSlotItemDecorator} from '@enact/ui/SlotItem';
 import {ItemDecorator as UiItemDecorator} from '@enact/ui/Item';
 import Toggleable from '@enact/ui/Toggleable';
 import PropTypes from 'prop-types';
@@ -32,6 +31,7 @@ import compose from 'ramda/src/compose';
 import {ItemBase} from '../Item';
 import {MarqueeDecorator} from '../Marquee';
 import Skinnable from '../Skinnable';
+import {SlotItemBase as UiSlotItemBase, SlotItemDecorator as UiSlotItemDecorator} from '../UiSlotItem';
 
 import componentCss from './SlotItem.module.less';
 
@@ -40,7 +40,7 @@ import componentCss from './SlotItem.module.less';
  *
  * @class SlotItemBase
  * @memberof moonstone/SlotItem
- * @extends ui/SlotItem.SlotItemBase
+ * @extends moonstone/UiSlotItem.SlotItemBase
  * @omit component
  * @mixes moonstone/Item.ItemBase
  * @ui
@@ -85,7 +85,7 @@ const SlotItemBase = kind({
  *
  * @class SlotItemDecorator
  * @memberof moonstone/SlotItem
- * @mixes ui/SlotItem.SlotItemDecorator
+ * @mixes moonstone/UiSlotItem.SlotItemDecorator
  * @mixes ui/Toggleable.Toggleable
  * @mixes spotlight/Spottable.Spottable
  * @mixes moonstone/Marquee.MarqueeDecorator

TimePicker/TimePicker.js

@@ -214,7 +214,7 @@ const dateTimeConfig = {
  * @class TimePicker
  * @memberof moonstone/TimePicker
  * @mixes ui/Toggleable.Toggleable
- * @mixes ui/RadioDecorator.RadioDecorator
+ * @mixes moonstone/UiRadioDecorator.RadioDecorator
  * @mixes ui/Changeable.Changeable
  * @ui
  * @public

TimePicker/tests/TimePicker-specs.js

@@ -272,7 +272,7 @@ describe('TimePicker', () => {
 	test('should format the time label to locale `en-US`', () => {
 		const date = new Date(2000, 0, 1, 12, 30);
 		render(<TimePicker locale="en-US" open title="Date" value={date} />);
-		const header = screen.getByText(timeToLocaleString(date)).parentElement.parentElement;
+		const header = screen.getByText(timeToLocaleString(date), {collapseWhitespace: false}).parentElement.parentElement;
 
 		const expected = 'label';
 
@@ -283,7 +283,7 @@ describe('TimePicker', () => {
 		ilib.setLocale('ar-SA');
 		const date = new Date(2000, 0, 1, 12, 30);
 		render(<TimePicker locale="ar-SA" open title="Date" value={date} />);
-		const header = screen.getByText(timeToLocaleString(date)).parentElement.parentElement;
+		const header = screen.getByText(timeToLocaleString(date), {collapseWhitespace: false}).parentElement.parentElement;
 
 		const expected = 'label';
 

ToggleItem/ToggleItem.js

@@ -26,14 +26,14 @@ import ForwardRef from '@enact/ui/ForwardRef';
 import Pure from '@enact/ui/internal/Pure';
 import PropTypes from 'prop-types';
 import Toggleable from '@enact/ui/Toggleable';
-import {ToggleItemBase as UiToggleItem} from '@enact/ui/ToggleItem';
 import Touchable from '@enact/ui/Touchable';
 import Spottable from '@enact/spotlight/Spottable';
 import compose from 'ramda/src/compose';
 
 import {MarqueeDecorator} from '../Marquee';
 import Skinnable from '../Skinnable';
 import {SlotItemBase} from '../SlotItem';
+import {ToggleItemBase as UiToggleItem} from '../UiToggleItem';
 
 import componentCss from './ToggleItem.module.less';
 
@@ -135,7 +135,7 @@ const defaultConfig = {
  *
  * @class ToggleItemDecorator
  * @memberof moonstone/ToggleItem
- * @mixes ui/ToggleItem.ToggleItemDecorator
+ * @mixes moonstone/UiToggleItem.ToggleItemDecorator
  * @mixes spotlight/Spottable.Spottable
  * @mixes moonstone/Marquee.MarqueeDecorator
  * @mixes moonstone/Skinnable.Skinnable

TooltipDecorator/Tooltip.module.less

@@ -6,7 +6,7 @@
 
 .tail (@edge, @point) {
 	background-image:
-		linear-gradient(to @edge, @moon-tooltip-border-color @moon-tooltip-border-width/2, transparent @moon-tooltip-border-width), // Edge line
+		linear-gradient(to @edge, @moon-tooltip-border-color (@moon-tooltip-border-width/2), transparent @moon-tooltip-border-width), // Edge line
 		linear-gradient(to @point @edge, @moon-tooltip-bg-color 50%, @moon-tooltip-border-color ~"calc(50% + 0.5px)", @moon-tooltip-border-color ~"calc(50% + 1px)", transparent ~"calc(50% + 1px)"); // Diagonal line + fill
 }
 .centerTail (@edge, @point) {