Update copyright years in README.md file

.travis.yml

@@ -1,7 +1,8 @@
 dist: jammy
 language: node_js
 node_js:
-    - "21"
+    - lts/*
+    - node
 sudo: false
 before_install:
     - curl -fsSL https://www.mongodb.org/static/pgp/server-4.4.asc | sudo gpg -o /usr/share/keyrings/mongodb-server-4.4.gpg --dearmor
@@ -18,12 +19,14 @@ install:
     - popd
     - git clone --branch=develop --depth 1 https://github.com/enactjs/enact ../enact
     - pushd ../enact
+    - npm uninstall @enact/ui-test-utils --prefix packages/i18n
     - npm install
     - npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock install
     - npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock link
     - npm run interlink
     - popd
     - rm -fr node_modules/@enact
+    - npm uninstall @enact/ui-test-utils
     - npm install
     - enact link
 script:

ArcPicker/ArcPicker.js

@@ -60,7 +60,7 @@ const ArcPickerBase = kind({
 		backgroundColor: PropTypes.string,
 
 		/**
-		 * Whether or not the component is in a disabled state.
+		 * Whether the component is in a disabled state.
 		 *
 		 * @type {Boolean}
 		 * @public
@@ -88,7 +88,7 @@ const ArcPickerBase = kind({
 		foregroundColor: PropTypes.string,
 
 		/**
-		 * Whether or not the component is focused.
+		 * Whether the component is focused.
 		 *
 		 * @type {Boolean}
 		 * @private

ArcPicker/ArcPickerBehaviorDecorator.js

@@ -34,7 +34,7 @@ const ArcPickerBehaviorDecorator = hoc((config, Wrapped) => {
 			children: PropTypes.array.isRequired,
 
 			/**
-			 * Whether or not the component is in a disabled state.
+			 * Whether the component is in a disabled state.
 			 *
 			 * @type {Boolean}
 			 * @public

ArcSlider/ArcSlider.js

@@ -72,7 +72,7 @@ const ArcSliderBase = kind({
 		componentRef: EnactPropTypes.ref,
 
 		/**
-		 * Whether or not the component is in a disabled state.
+		 * Whether the component is in a disabled state.
 		 *
 		 * @type {Boolean}
 		 * @public
@@ -100,7 +100,7 @@ const ArcSliderBase = kind({
 		foregroundColor: PropTypes.string,
 
 		/**
-		 * Whether or not the component is focused.
+		 * Whether the component is focused.
 		 *
 		 * @type {Boolean}
 		 * @private

ArcSlider/ArcSliderBehaviorDecorator.js

@@ -32,7 +32,7 @@ const ArcSliderBehaviorDecorator = hoc((config, Wrapped) => {
 
 		static propTypes = /** @lends agate/ArcSlider.ArcSliderBehaviorDecorator.prototype */ {
 			/**
-			 * Whether or not the component is in a disabled state.
+			 * Whether the component is in a disabled state.
 			 *
 			 * @type {Boolean}
 			 * @public

BodyText/BodyText.js

@@ -142,7 +142,7 @@ const BodyTextDecorator = compose(
 /**
  * A simple text block component, ready to use in Agate applications.
  *
- * `BodyText` may be used to display a block of text and is sized and spaced appropriately for a
+ * `BodyText` may be used to display a block of text and is sized and spaced appropriately for an
  * Agate application.
  *
  * Usage:

BodyText/tests/BodyText-specs.js

@@ -27,7 +27,7 @@ describe('BodyText Specs', () => {
 		expect(actual).toBe(expected);
 	});
 
-	test('should support single-line marqueeing content when `noWrap` is true', () => {
+	test('should support single-line marquee content when `noWrap` is true', () => {
 		render(<BodyText noWrap>Hello!</BodyText>);
 		const bodyText = screen.getByText('Hello!').parentElement;
 

Button/Button.module.less

@@ -469,7 +469,7 @@
 			text-align: center;
 		}
 
-		// Flex grow the marquee text only if there is text or the button has minWidth applied. this is to prevent the descentration of the icon in case of iconOnly.
+		// Flex grow the marquee text only if there is text or the button has minWidth applied. this is to prevent the decentration of the icon in case of iconOnly.
 		&:not(.iconOnly), &.minWidth {
 			.marquee {
 				flex-grow: 1;

ColorPicker/ColorPicker.js

@@ -37,7 +37,7 @@ import componentCss from './ColorPicker.module.less';
 
 const ContainerDiv = SpotlightContainerDecorator({enterTo: 'last-focused'}, 'div');
 
-// helper function to convert color hex strings or kewords to hue, saturation, and lightness values
+// helper function to convert color hex strings or keywords to hue, saturation, and lightness values
 const convertToHSL = (value) => convert[value.charAt(0) === '#' ? 'hex' : 'keyword'].hsl(value);
 
 /**

ContextualPopupDecorator/ContextualPopupDecorator.js

@@ -302,7 +302,7 @@ const Decorator = hoc(defaultConfig, (config, Wrapped) => {
 				snapshot.shouldSpotActivator = (
 					// isn't set
 					!current ||
-					// is on the activator and we want to re-spot it so a11y read out can occur
+					// is on the activator, and we want to re-spot it so a11y read out can occur
 					current === prevState.activator ||
 					// is within the popup
 					this.containerNode.contains(current)

DatePicker/DatePicker.js

@@ -179,7 +179,7 @@ const DatePicker = DatePickerDecorator(
  * @function
  * @memberof agate/DatePicker
  * @param {Date} date `Date` to convert
- * @returns {String?} Converted date or `null` if `date` is invalid
+ * @returns {String|null} Converted date or `null` if `date` is invalid
  */
 const dateToLocaleString = (date) => {
 	if (!date) {

DropManager/DropManager.js

@@ -343,7 +343,7 @@ const DropManager = hoc(defaultConfig, (configHoc, Wrapped) => {
 			if (configHoc.arrangingProp) rest[configHoc.arrangingProp] = this.state.dragging;
 
 			if (arrangeable) {
-				// Add all of the necessary events, but only if we're in edit mode
+				// Add all the necessary events, but only if we're in edit mode
 				rest.onDragStart = this.handleDragStart;
 				rest.onDragEnter = this.handleDragEnter;
 				rest.onDragLeave = this.handleDragLeave;

Dropdown/Dropdown.js

@@ -361,7 +361,7 @@ const DropdownBase = kind({
 
 		const popupProps = {'aria-live': null, children, direction: `${adjustedDirection} center`, disabled, onSelect, open, selected, skin, skinVariants: skin === 'silicon' ? {'night': false} : {}, width, role: null};
 
-		// `ui/Group`/`ui/Repeater` will throw an error if empty so we disable the Dropdown and
+		// `ui/Group`/`ui/Repeater` will throw an error if empty, so we disable the Dropdown and
 		// prevent Dropdown to open if there are no children.
 		const openDropdown = hasChildren && !disabled && open;
 

Dropdown/DropdownList.js

@@ -141,7 +141,7 @@ const DropdownListBase = kind({
 	},
 
 	computed: {
-		className: ({direction, skin, width, styler}) => styler.append(direction.substr(0, direction.indexOf(' ')), width, {dropdownListWithCustomizedScroller: skin === 'silicon'}),
+		className: ({direction, skin, width, styler}) => styler.append(direction.substring(0, direction.indexOf(' ')), width, {dropdownListWithCustomizedScroller: skin === 'silicon'}),
 		dataSize: ({children}) => children ? children.length : 0,
 		// Note: Retaining this in case we need to support different item sizes for large text mode:
 		itemSize: ({skin}) => (skin === 'gallium') ? ri.scale(90) : ri.scale(60)

FanSpeedControl/FanSpeedControl.js

@@ -58,7 +58,7 @@ const FanSpeedControlBase = kind({
 		min: PropTypes.number.isRequired,
 
 		/**
-		 * Whether or not the component is in a disabled state.
+		 * Whether the component is in a disabled state.
 		 *
 		 * @type {Boolean}
 		 * @public

ImageItem/ImageItem.js

@@ -42,7 +42,7 @@ const ImageItemBase = kind({
 	propTypes: /** @lends agate/ImageItem.ImageItemBase.prototype */ {
 		/**
 		 * Sets the position for caption.
-		 * This props is only valid when `orientation` is `vertical`.
+		 * This prop is only valid when `orientation` is `vertical`.
 		 *
 		 * @type {('below'|'overlay')}
 		 * @default 'below'
@@ -174,7 +174,7 @@ const ImageItemDecorator = compose(
 );
 
 /**
- * An Agate styled ImageItem with built-in support for marqueed text, and Spotlight focus.
+ * An Agate styled ImageItem with built-in support for marquee text, and Spotlight focus.
  *
  * @class ImageItem
  * @memberof agate/ImageItem

Input/Input.module.less

@@ -160,7 +160,7 @@
 
 		// Spotlight Colors
 
-		// an Input that isn't spottable is behaviorly disabled but not visually
+		// an Input that isn't spottable is behaviorally disabled but not visually
 		&:not(:global(.spottable)) .input {
 			pointer-events: none;
 		}

Input/tests/Input-specs.js

@@ -162,7 +162,7 @@ describe('Input Specs', () => {
 		const inputText = screen.getByLabelText('Input field').children[0];
 
 		await user.type(inputText, value);
-		// bluring input onSpotlightRight for code coverage purposes
+		// blurring input onSpotlightRight for code coverage purposes
 		pressRightKey(inputText);
 		pressRightKey(inputText);
 		pressRightKey(inputText);
@@ -201,7 +201,7 @@ describe('Input Specs', () => {
 		const inputText = screen.getByLabelText('Input field').children[0];
 
 		await user.type(inputText, value);
-		// bluring input onSpotlightLeft for code coverage purposes
+		// blurring input onSpotlightLeft for code coverage purposes
 		pressLeftKey(inputText);
 
 		expect(handleBeforeChange).toHaveBeenCalled();

Item/Item.module.less

@@ -231,7 +231,7 @@
 				min-width: @agate-item-indicator-height; // `min-width` is used to ensure that the indicator has a correct width with default item
 				background-color: @agate-item-indicator-bg-color;
 				border-radius: @agate-item-indicator-border-radius;
-				align-self: '@agate-item-indicator-align-self';
+				align-self: @agate-item-indicator-align-self;
 				position: absolute;
 				.position-start-end(@agate-item-selected-padding, initial);
 			}

LabeledIconButton/LabeledIconButton.module.less

@@ -370,12 +370,12 @@
 		};
 
 		.disabled({
-			.vendor-opacity(@agate-disabled-opacity);
+			opacity: @agate-disabled-opacity;
 			cursor: default;
 
 			// Disabled children of disabled components
 			.disabled({
-				.vendor-opacity(1);
+				opacity: 1;
 			}, parent);
 
 			.opaque {

Marquee/Marquee.js

@@ -1,5 +1,5 @@
 /**
- * Provides components for displaying and controlling marqueed text.
+ * Provides components for displaying and controlling marquee text.
  *
  * @example
  * <Marquee marqueeOn="render">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Marquee>

MediaPlayer/MediaPlayer.js

@@ -482,7 +482,7 @@ const MediaPlayerBehaviorDecorator = hoc((config, Wrapped) => {
 				// More props from `ev` may be added here as needed, but a full copy via `...ev`
 				// overloads Storybook's Action Logger and likely has other perf fallout.
 				type: ev.type,
-				// Specific state variables are included in the outgoing calback payload, not all of them
+				// Specific state variables are included in the outgoing callback payload, not all of them
 				...this.getMediaState()
 			};
 		};
@@ -548,7 +548,7 @@ const MediaPlayerBehaviorDecorator = hoc((config, Wrapped) => {
 				playPromise.then(() => {
 					// Automatic playback started!
 				}).catch(() => {
-					// Auto-play was prevented
+					// Autoplay was prevented
 				});
 			}
 		};

MediaPlayer/Times.js

@@ -20,7 +20,7 @@ const Times = kind({
 		/**
 		 * An instance of a Duration Formatter from i18n.
 		 *
-		 * Must has a `format()` method that returns a string.
+		 * Must have a `format()` method that returns a string.
 		 *
 		 * @type {Object}
 		 * @required

MediaPlayer/util.js

@@ -38,7 +38,7 @@ const secondsToPeriod = (seconds) => {
  *
  * @param  {Number|String} seconds A duration of time represented in seconds
  * @param {DurationFmt} durfmt An instance of a {@link i18n/ilib/lib/DurationFmt.DurationFmt} object
- *                             from iLib confugured to display time used by the {@Link VideoPlayer}
+ *                             from iLib configured to display time used by the {@Link VideoPlayer}
  *                             component.
  * @param  {Object} config Additional configuration object that includes `includeHour`.
  *

Panels/ApplicationCloseButton.js

@@ -6,7 +6,7 @@ import Button from '../Button';
 
 /**
  * An {@link agate/ApplicationCloseButton.ApplicationCloseButton} with `closex` icon. It is used in
- * {@link agate/Panels.Panels} positioned at the top right corner.
+ * {@link agate/Panels.Panels} positioned in the top right corner.
  * `onApplicationClose` callback function should be specified to close your app. The recommended
  * action to take with the event is `window.close()`, but you may also want to also do operations
  * like save user work or close database connections.

Panels/Arrangers.js

@@ -6,7 +6,7 @@ import {breadcrumbWidth} from './Breadcrumb';
 const quadInOut = 'cubic-bezier(0.455, 0.030, 0.515, 0.955)';
 const animationOptions = {easing: quadInOut};
 
-// Actvity Arranger
+// Activity Arranger
 
 /*
  * Appends a transform that accounts for a single breadcrumb
@@ -59,7 +59,8 @@ const PanelsArranger = {
 /**
  * Positions a breadcrumb based on its `data-index` and the current index, `to`
  *
- * @param  {Object} config  Arrangement configuration object
+ * @param  {Node} node  Node for breadcrumb
+ * @param  {Number} index  Index for breadcrumb
  * @returns {undefined}
  * @method
  * @private

Panels/Breadcrumb.js

@@ -8,12 +8,12 @@ import $L from '../internal/$L';
 import css from './Panels.module.less';
 
 // Since we expose `onSelect` to handle breadcrumb selection, we need that handler to be set on a
-// component that proxies mouse events for key events so we create a spottable div that will
+// component that proxies mouse events for key events, so we create a spottable div that will
 // get the right classes as well as handle events correctly.
 const SpottableDiv = Spottable('div');
 
 /**
- * The width of a breadcrumb which may be used to allocate space for it in a panels layout.
+ * The width of a breadcrumb which may be used to allocate space for it in a panels' layout.
  *
  * @type {Number}
  * @default 105;

Panels/BreadcrumbPanels.js

@@ -25,7 +25,7 @@ const BreadcrumbPanelsDecorator = compose(
  *
  * **Note** BreadcrumbPanels requires that the `data-index` property that all panels variations add to
  * its children be applied to the root DOM node of each child in order to manage layout correctly.
- * It is recommended that you spread any extra props on the root node but you may also handle this
+ * It is recommended that you spread any extra props on the root node, but you may also handle this
  * property explicitly if necessary.
  *
  * @class BreadcrumbPanels

Panels/Breadcrumbs.js

@@ -5,8 +5,9 @@ import Breadcrumb from './Breadcrumb';
 /**
  * Generates an array of at most `max` breadcrumbs
  *
+ * @param {String} id         Id for breadcrumbs
  * @param {Number} index      Index of active breadcrumb
- * @param {Number} max        Maximum number of breadcrumbs to dispaly
+ * @param {Number} max        Maximum number of breadcrumbs to display
  * @param {Function} onSelect Handler for selecting a breadcrumb
  * @returns {React.element[]} Array of breadcrumbs
  * @private

Panels/Controls.js

@@ -47,7 +47,7 @@ const ControlsBase = kind({
 		]),
 
 		/**
-		 * Indicates the close button will not be rendered on the top right corner.
+		 * Indicates the close button will not be rendered in the top right corner.
 		 *
 		 * @type {Boolean}
 		 * @public

Panels/Panels.js

@@ -48,7 +48,7 @@ const PanelsBase = kind({
 		arranger: shape,
 
 		/**
-		 * An object whose keys will used as props for each child
+		 * An object whose keys will be used as props for each child
 		 */
 		childProps: PropTypes.object,
 
@@ -139,7 +139,7 @@ const PanelsBase = kind({
 		noAnimation: PropTypes.bool,
 
 		/**
-		 * Indicates the close button will not be rendered on the top right corner.
+		 * Indicates the close button will not be rendered in the top right corner.
 		 *
 		 * @type {Boolean}
 		 * @default false

Panels/TabbedPanels.js

@@ -108,7 +108,7 @@ const TabbedPanelsBase = kind({
 		noAnimation: PropTypes.bool,
 
 		/**
-		 * Indicates the close button will not be rendered on the top right corner.
+		 * Indicates the close button will not be rendered in the top right corner.
 		 *
 		 * @type {Boolean}
 		 * @default false