Merge branch 'develop' into poc/WRR-287

docs/contributing/documentation.md

@@ -208,8 +208,8 @@ Enact docs should strive to have a common voice.  They should be concise, inform
 Tips:
 
 * Use the active voice when writing docs.
-* Descriptions should focus on what the componet or property provides.
-* Only document the `true` state for boolean propertues unless the `false` state's operation is unclear.
+* Descriptions should focus on what the component or property provides.
+* Only document the `true` state for boolean properties unless the `false` state's operation is unclear.
 * Property descriptions use the present tense and complete either 'This property ...' or 'This property configures ...'
 * Callbacks use the future perfect tense and complete the sentence 'This callback will be ...'
 * Imperative methods (rarely used) use the present tense and completes the sentence 'Call this method to ...'

docs/redux/redux-intro.md

@@ -230,7 +230,7 @@ Back in the days, we had [connect()](https://github.com/reduxjs/react-redux/blob
 
 Also, we use [useDispatch()](https://github.com/reduxjs/react-redux/blob/master/docs/api/hooks.md#usedispatch) hook to dispatch actions. It gives you the store's `dispatch` method as its result so that you can call it with some `action` to dispatch.
 
-Our components need access to the Redux store so they can subscribe to it. This can be cumbersome as your number of components grows and you have to manually pass store around. `react-redux` incorporates [context](https://react.dev/learn/passing-data-deeply-with-context) in React and provides a [`<Provider />`](https://github.com/reduxjs/react-redux/blob/master/docs/api/Provider.md) component to make store available to all components without passings stores around by hand. You only need to use it once at the `render()` of root component.
+Our components need access to the Redux store so they can subscribe to it. This can be cumbersome as your number of components grows and you have to manually pass store around. `react-redux` incorporates [context](https://react.dev/learn/passing-data-deeply-with-context) in React and provides a [`<Provider />`](https://github.com/reduxjs/react-redux/blob/master/docs/api/Provider.md) component to make store available to all components without passing stores around by hand. You only need to use it once at the `render()` of root component.
 
 #### Example
 

packages/core/handle/handle.js

@@ -616,7 +616,7 @@ const log = handle.log = curry((message, ev, ...args) => {
 /**
  * Invokes a method by name on the component to which {@link core/handle.handle} is bound.
  *
- * If the methods exists on the object, it is called with the event, props, and context and its
+ * If the methods exist on the object, it is called with the event, props, and context and its
  * return value is returned.
  *
  * If the method does not exist or handle isn't bound to an instance, it returns `false`.

packages/core/kind/kind.js

@@ -50,7 +50,7 @@ const NoContext = createContext(null);
  * @property {Object.<string, string>} css The CSS of the component
  * @property {String} [className] The className of the component
  * @property {Boolean|String|String[]} [publicClassNames] Specifies which class names are overridable.
- * If this value is `true`, all of the class names of the component CSS will become public.
+ * If this value is `true`, all the class names of the component CSS will become public.
  */
 
 /**

packages/core/usePublicClassNames/usePublicClassNames.js

@@ -8,7 +8,7 @@ import {mergeClassNameMaps} from '../util';
  * @param   {Object.<string, string>}    [customCss]        The supplied collection of CSS class names to the
  *                                                          corresponding internal elements and states of the component
  * @param   {Boolean|String|String[]}    [publicClassNames] The keys of public class names of the component
- *                                                          If this value is `true`, all of the keys from the component
+ *                                                          If this value is `true`, all the keys from the component
  *                                                          CSS will become public class names.
  * @returns {Object}                                        A merged CSS
  * @private

packages/core/util/util.js

@@ -270,8 +270,8 @@ const mapAndFilterChildren = (children, callback, filter) => {
  * Sets props that are missing or `undefined` to default values
  *
  * @function
- * @param {Obejct}        props           Props object
- * @param {Obejct}        defaultProps    Default value object
+ * @param {Object}        props           Props object
+ * @param {Object}        defaultProps    Default value object
  *
  * @returns {Object}                      Props with default values
  * @memberof core/util
@@ -294,8 +294,8 @@ const setDefaultProps = (props, defaultProps = {}) => {
  * Performs shallow comparison for given objects.
  *
  * @function
- * @param {Obejct}        a    An object to compare.
- * @param {Obejct}        b    An object to compare.
+ * @param {Object}        a    An object to compare.
+ * @param {Object}        b    An object to compare.
  *
  * @returns {Boolean}          `true` if the values of all keys are strictly equal.
  * @memberof core/util

packages/i18n/Text/Text.js

@@ -84,7 +84,7 @@ const defaultConfig = {
  * when appropriate.
  *
  * If translations are not available yet and all props do not include a default value,
- * `TextDecorator` will render nothing. Once translations are avaiable, the component will update
+ * `TextDecorator` will render nothing. Once translations are available, the component will update
  * with the translated strings.
  *
  * ```
@@ -175,7 +175,7 @@ const TextDecorator = hoc(defaultConfig, (config, Wrapped) => {
 					}
 					createResBundle({locale, sync: false, onLoad: resolve});
 				}),
-				// ResBundle.getString will try to synchronously fetch the plurals resouce so need
+				// ResBundle.getString will try to synchronously fetch the plurals resource so need
 				// to proactively fetch it to avoid the sync XHR
 				new Promise(resolve => IString.loadPlurals(false, null, null, resolve))
 			]).then(([resBundle]) => {
@@ -251,7 +251,7 @@ const TextDecorator = hoc(defaultConfig, (config, Wrapped) => {
  * Translates its child string value in the current locale.
  *
  * If translations are not available yet, `Text` will render nothing. Once translations are
- * avaiable, the component will update with the translated string.
+ * available, the component will update with the translated string.
  *
  * ```
  * <Text>Go</Text>

packages/i18n/docs/ilib.md

@@ -80,7 +80,7 @@ locale-specific files will typically include values for "title", "keywords", and
 "description".  The other properties will keep the values inherited from the
 app's top-level `appinfo.json`.
 
-`$L()` is a convience method for `ResBundle`, it is described in the main section of the `i18n` docs [here](../index.md)
+`$L()` is a convenience method for `ResBundle`, it is described in the main section of the `i18n` docs [here](../index.md)
 
 ## Using iLib for formatting
 

packages/i18n/src/zoneinfo.js

@@ -308,7 +308,7 @@ ZoneInfoFile.prototype.usesDST = function (date) {
  * Return the raw offset from UTC that this zone uses at the given time.
  *
  * @param {Date} date the Gregorian date to test
- * @returns {number} offset from from UTC in number of minutes. Negative
+ * @returns {number} offset from UTC in number of minutes. Negative
  * numbers are west of Greenwich, positive are east of Greenwich
  */
 ZoneInfoFile.prototype.getRawOffset = function (date) {

packages/spotlight/SpotlightContainerDecorator/useSpotlightContainer.js

@@ -57,10 +57,10 @@ import SpotlightContainer from './SpotlightContainer';
  *
  * @typedef {Object} useSpotlightContainerInterface
  * @memberof spotlight/SpotlightContainerDecorator
- * @property {Function} onBlurCapture    Callback to notify hook when an node was blurred within the
+ * @property {Function} onBlurCapture    Callback to notify hook when a node was blurred within the
  *                                       container. Must be called during the capture phase of the
  *                                       event flow.
- * @property {Function} onFocusCapture   Callback to notify hook when an node was focused within the
+ * @property {Function} onFocusCapture   Callback to notify hook when a node was focused within the
  *                                       container. Must be called during the capture phase of the
  *                                       event flow.
  * @property {String}   attributes       An object of DOM attributes of representing the current

packages/spotlight/src/tests/container-specs.js

@@ -532,7 +532,7 @@ describe('container', () => {
 		// FIXME: This is testing a previously supported feature (setting a node as defaultElement)
 		// which was never documented and should be removed in a future release.
 		test(
-			'should return the default spottable element when enterTo is "default-element" and defaultElement contains an array of selectors wiht a node reference',
+			'should return the default spottable element when enterTo is "default-element" and defaultElement contains an array of selectors with a node reference',
 			testScenario(
 				scenarios.containerWithDefaultAndLastFocused,
 				(root) => {
@@ -1160,7 +1160,7 @@ describe('container', () => {
 		beforeEach(setupContainers);
 		afterEach(teardownContainers);
 
-		test('should not include inacive containers', testScenario(
+		test('should not include inactive containers', testScenario(
 			scenarios.onlyContainers,
 			(root) => {
 				const {containerId} = root.querySelector('[data-spotlight-id]').dataset;

packages/spotlight/src/tests/pointer-specs.js

@@ -113,7 +113,7 @@ describe('pointer', () => {
 			expect(actual).toBe(expected);
 		});
 
-		test('should enable pointer mode if the pointer positionchanges', () => {
+		test('should enable pointer mode if the pointer position changes', () => {
 			setPointerMode(false);
 			notifyPointerMove(null, null, 5, 5);
 

packages/spotlight/src/utils.js

@@ -210,7 +210,7 @@ function isStandardFocusable (element) {
 		// If the element is actually disabled, it is not focusable
 		return false;
 	} else if (element.tagName === 'A' && element.getAttribute('href') !== null) {
-		// Anchor element that has an href attribute is focusable
+		// Anchor element that has a href attribute is focusable
 		return true;
 	} else if (element.tagName === 'INPUT' && element.type !== 'hidden') {
 		// Input element whose type attribute is not hidden is focusable

packages/ui/BodyText/BodyText.module.less

@@ -2,8 +2,8 @@
 
 .bodyText {
 	text-align: left;
-	margin-block-start: 1em;  // Mimmic the browser's default rules for P tag (in case the component changed)
-	margin-block-end: 1em;    // Mimmic the browser's default rules for P tag (in case the component changed)
+	margin-block-start: 1em;  // Mimic the browser's default rules for P tag (in case the component changed)
+	margin-block-end: 1em;    // Mimic the browser's default rules for P tag (in case the component changed)
 
 	&.centered {
 		text-align: center;

packages/ui/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 The following is a curated list of changes in the Enact ui module, newest changes on the top.
 
+## [unreleased]
+
+### Fixed
+
+- `ui/VirtualList` to re-render when the each size of variable sized items changed
+
 ## [5.0.0-alpha.2] - 2024-10-08
 
 ### Added

packages/ui/Cancelable/Cancelable.js

@@ -50,7 +50,7 @@ const defaultConfig = {
 	 * innermost instance (in terms of the component hierarchy) have the first opportunity to handle
 	 * the event before its container components.
 	 *
-	 * @type {String}
+	 * @type {Boolean}
 	 * @default false
 	 * @memberof ui/Cancelable.Cancelable.defaultConfig
 	 */
@@ -96,7 +96,7 @@ add('cancel', 27);
  *     // to handle the event (e.g. invoking an event handler from `props`).
  *
  *     // Stop upstream instances of Cancelable from handling the event
- *     ev.stopPropagaion();
+ *     ev.stopPropagation();
  *   }},
  *   MyComponent
  * );

packages/ui/Cancelable/cancelHandler.js

@@ -26,7 +26,7 @@ const cancelHandlers = [
 const forCancel = function (ev) {
 	let ok = false;
 	cancelHandlers.forEach(fn => {
-		// if any handler returns true, we don't need to call any more
+		// if any handler returns true, we don't need to call anymore
 		ok = ok || fn(ev);
 	});
 

packages/ui/FloatingLayer/FloatingLayer.js

@@ -128,7 +128,7 @@ class FloatingLayerBase extends Component {
 	}
 
 	componentDidMount () {
-		// Must register first in order to obtain the floating layer node reference before tryinging
+		// Must register first in order to obtain the floating layer node reference before trying
 		// to render into it
 		if (this.context && typeof this.context === 'function') {
 			this.controller = this.context(this.handleNotify.bind(this));

packages/ui/FloatingLayer/tests/FloatingLayer-specs.js

@@ -69,7 +69,7 @@ describe('FloatingLayer Specs', () => {
 		expect(actual).toMatchObject(expectedType);
 	});
 
-	test('should fire onDimiss event with type and detail info when FloatingLayer is closed', () => {
+	test('should fire onDismiss event with type and detail info when FloatingLayer is closed', () => {
 		const handleDismiss = jest.fn();
 
 		render(

packages/ui/Heading/Heading.js

@@ -81,7 +81,7 @@ const HeadingBase = kind({
 		 * * `'title'` and `'subtitle'` are generally considered to be used only once on a given screen.
 		 * * `'large'`, `'medium'`, `'small'`, and `'tiny'` are typically used as section headings
 		 * for content on a screen, starting with `'large'` for the first tier of information
-		 * followed by `'medium'` for the next, and so fourth.
+		 * followed by `'medium'` for the next, and so forth.
 		 *
 		 * If the `spacing` prop is not set (defaulting to "auto"), these values automatically set
 		 * the spacing to the correlated names.

packages/ui/Layout/Cell.js

@@ -118,7 +118,7 @@ const CellBase = kind({
 		 * the maximum size, shrinking as necessary, to fit the content.
 		 *
 		 * When used in conjunction with {@link ui/Layout.CellBase.grow|grow}, the size will be the
-		 * minimunm size, growing as necessary, to fit the container.
+		 * minimum size, growing as necessary, to fit the container.
 		 *
 		 * E.g.
 		 * * `size="400px"` -> cell will be 400px, regardless of the dimensions of your content
@@ -167,7 +167,7 @@ const CellBase = kind({
 				...style,
 				alignSelf: toFlexAlign(align),
 				flexBasis: (shrink ? null : size),
-				// Setting 100% below in the presence of `shrink`` and absense of `size` prevents overflow
+				// Setting 100% below in the presence of `shrink`` and absence of `size` prevents overflow
 				'--cell-size': cellSize
 			};
 		}

packages/ui/Layout/Layout.js

@@ -2,7 +2,7 @@
  * A convenient tool for laying-out content using `Layout`, `Cell`, `Row`, and `Column`.
  *
  * Layout is a powerful and versatile tool used for arranging content on the screen. On a conceptual
- * level, it mixes the best parts of HTML tables wtih the best parts of HTML framesets, both of
+ * level, it mixes the best parts of HTML tables with the best parts of HTML framesets, both of
  * which were largely abandoned for their drawbacks, ignoring their strengths. A `Layout` is simply
  * a container for `Cell`, the only "legal" child. Conversely, `Cell` may only be used in a
  * `Layout`. Cells in a Layout can either be positioned next to each other (horizontally) or
@@ -11,7 +11,7 @@
  *
  * The `Row` and `Column` layout presets describe the direction of layout for their children. This
  * can sometimes cause confusion. A `Row` of children naturally forms a _layout_ whose children can
- * have the _appearance_ of columns. To keep things clear, think about the layout rather than the
+ * have the _appearance_ of columns. To keep things clear, think about the layout rather than
  * what the children themselves represent.
  *
  * `Layout` is an implementation of flex-box, but with built-in rails, properties, and features to

packages/ui/Marquee/MarqueeDecorator.js

@@ -630,7 +630,7 @@ const MarqueeDecorator = hoc(defaultConfig, (config, Wrapped) => {
 		 * Calculates if the marquee should animate
 		 *
 		 * @param	{Number}	distance	Amount of overflow in pixels
-		 * @returns	{Boolean}				`true` if it should animated
+		 * @returns	{Boolean}				`true` if it should animate
 		 */
 		shouldAnimate (distance) {
 			return distance > 0;

packages/ui/Repeater/Repeater.js

@@ -68,7 +68,7 @@ const RepeaterBase = kind({
 		childProp: PropTypes.string,
 
 		/**
-		 * Component type to wrap around all of the repeated elements.
+		 * Component type to wrap around all the repeated elements.
 		 *
 		 * This can be a string describing a DOM node or React component (e.g. `'div'` or `Layout`).
 		 *

packages/ui/Routable/Router.js

@@ -56,7 +56,7 @@ const RouterBase = class extends ReactComponent {
 		 * Routes defined as an object rather than via JSX.
 		 *
 		 * If specified, `routes` will take
-		 * precendence over a JSX definition.
+		 * precedence over a JSX definition.
 		 *
 		 * ```JavaScript
 		 * const routes = {

packages/ui/Skinnable/Skinnable.js

@@ -102,7 +102,7 @@ const defaultConfig = {
  *
  * Example:
  * ```
- * const MyApp = ({skinName, ...rest) => (<div {...props}>{skinName}</div>);
+ * const MyApp = ({skinName, ...rest}) => (<div {...props}>{skinName}</div>);
  * ...
  * App = Skinnable({
  * 	prop: 'skinName',

packages/ui/Skinnable/util.js

@@ -58,7 +58,7 @@ function determineVariants (defaultVariants, allowedVariants, authorVariants, pa
 	authorVariants = objectify(authorVariants);
 	parentVariants = objectify(parentVariants);
 
-	// Merge all of the variants objects, preferring values in objects from left to right.
+	// Merge all the variants objects, preferring values in objects from left to right.
 	const mergedObj = [defaultVariants, parentVariants, authorVariants].reduce(
 		(obj, a) => {
 			if (a) {

packages/ui/Slider/Knob.js

@@ -43,7 +43,7 @@ const Knob = kind({
 		 * * `orientation` - The value of the `orientation` prop from the slider
 		 * * `proportion` - The value of the `proportion` prop from the knob
 		 *
-		 * This prop accepts either a Component (e.g. `MyTooltip`} which will be instantiated with
+		 * This prop accepts either a Component (e.g. `MyTooltip`) which will be instantiated with
 		 * the above props or a component instance (e.g. `<MyTooltip customProp="value" />`) which
 		 * will have its props merged with the above props.
 		 *

packages/ui/Slider/Slider.js

@@ -47,7 +47,7 @@ const SliderBase = kind({
 		 * * progress           - The `value` as a proportion between `min` and `max`
 		 * * progressAnchor     - The value of `progressAnchor`
 		 *
-		 * This prop accepts either a Component (e.g. `MyProgress`} which will be instantiated with
+		 * This prop accepts either a Component (e.g. `MyProgress`) which will be instantiated with
 		 * the above props or a component instance (e.g. `<MyProgress customProp="value" />`) which
 		 * will have its props merged with the above props.
 		 *
@@ -118,7 +118,7 @@ const SliderBase = kind({
 		 * * `tooltipComponent` - The value of `tooltipComponent`
 		 * * `value`            - The value of `value`
 		 *
-		 * This prop accepts either a Component (e.g. `MyKnob`} which will be instantiated with
+		 * This prop accepts either a Component (e.g. `MyKnob`) which will be instantiated with
 		 * the above props or a component instance (e.g. `<MyKnob customProp="value" />`) which
 		 * will have its props merged with the above props.
 		 *
@@ -219,7 +219,7 @@ const SliderBase = kind({
 		 * * `orientation` - The value of the `orientation` prop from the slider
 		 * * `proportion`  - The `value` as a proportion between `min` and `max`
 		 *
-		 * This prop accepts either a Component (e.g. `MyTooltip`} which will be instantiated with
+		 * This prop accepts either a Component (e.g. `MyTooltip`) which will be instantiated with
 		 * the above props or a component instance (e.g. `<MyTooltip customProp="value" />`) which
 		 * will have its props merged with the above props.
 		 *

packages/ui/Slottable/useSlots.js

@@ -105,8 +105,8 @@ function distribute ({children, ...slots}) {
 /**
  * Distributes `children` into the configured `slots`.
  *
- * `useSlots` iterates over all of the `children` in `props` and distributes any children based on
- * the followig rules:
+ * `useSlots` iterates over all the `children` in `props` and distributes any children based on
+ * the following rules:
  *
  * * If the child has a `slot` property matching a valid slot, or
  * * If the component for the child has the `defaultSlot` static member matching a valid slot, or

packages/ui/Touchable/ClickAllow.js

@@ -2,7 +2,7 @@ import {platform} from '@enact/core/platform';
 
 // It's possible that emitting `onTap` will cause a DOM change before the mousedown fires resulting
 // in multiple tap/click events for the same user action. To avoid this, we store the last touchend
-// target and timestamp to compare against the next mouse down. If the timestamp is different (e.g
+// target and timestamp to compare against the next mouse down. If the timestamp is different (e.g.
 // we're on a hybrid device that emitted a touch event but the next was a mouse event) or the target
 // is the same (or no previous target was set if no touch events have been emitted), we allow the
 // mousedown *across Touchable instances*.