2.5.3 release

Author: JayCanuck

CHANGELOG.md

@@ -2,6 +2,25 @@
 
 The following is a curated list of changes in the Enact project, newest changes on the top.
 
+## [2.5.3] - 2019-06-06
+
+### Fixed
+
+- `moonstone/ContextualPopupDecorator` imperative methods to be correctly bound to the instance
+- `moonstone/ExpandableInput` to retain focus when touching within the input field on touch platforms
+- `moonstone/ExpandableList` to not error if `selected` is passed as an array to a non-multi-select list
+- `moonstone/Input` refocusing on touch on iOS
+- `moonstone/Scroller` to allow changing spotlight focus to opposite scroll button when switching to 5way mode
+- `moonstone/Scroller`, `moonstone/VirtualList.VirtualGridList`, and `moonstone/VirtualList.VirtualList` to change spotlight focus due to touch events
+- `moonstone/Slider` to not scroll the viewport when dragging on touch platforms
+- `moonstone/VideoPlayer` to correctly handle touch events while moving slider knobs
+- `moonstone/VirtualList` and `moonstone/Scroller` to animate with 5-way navigation by default
+- `spotlight` to unspot the current element when tapping on non-spottable target on touch platforms
+- `ui/Scroller`, `ui/VirtualList`, and `ui/VirtualGridList` to size properly
+- `ui/Scroller`, `ui/VirtualList`, and `ui/VirtualGridList` to scroll correctly on iOS and Safari
+- `ui/Touchable` to not misfire a hold pulse when a drag re-enters a touch target and `cancelOnMove` is set
+- `ui/ViewManager` to correctly handle transitioning quickly between two children
+
 ## [2.5.2] - 2019-04-23
 
 ### Fixed

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "2.8.0",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "command": {
     "bootstrap": {
       "npmClientArgs": [

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "enact",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "Monorepo for all Enact front end libraries.",
   "private": true,
   "scripts": {

package.json

@@ -2,6 +2,10 @@
 
 The following is a curated list of changes in the Enact core module, newest changes on the top.
 
+## [2.5.3] - 2019-06-06
+
+No significant changes.
+
 ## [2.5.2] - 2019-04-23
 
 No significant changes.

packages/core/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@enact/core",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "Enact is an open source JavaScript framework containing everything you need to create a fast, scalable mobile or web application.",
   "main": "index.js",
   "scripts": {

packages/core/package.json

@@ -2,6 +2,10 @@
 
 The following is a curated list of changes in the Enact i18n module, newest changes on the top.
 
+## [2.5.3] - 2019-06-06
+
+No significant changes.
+
 ## [2.5.2] - 2019-04-23
 
 No significant changes.

packages/i18n/CHANGELOG.md

@@ -1,7 +1,7 @@
 {
   "name": "@enact/i18n",
   "main": "./src/index.js",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "Internationalization support for Enact using iLib",
   "scripts": {
     "clean": "enact clean",
@@ -41,7 +41,7 @@
     ]
   },
   "dependencies": {
-    "@enact/core": "^2.5.2",
+    "@enact/core": "^2.5.3",
     "prop-types": "15.6.2",
     "ramda": "^0.24.1",
     "react": "^16.7.0",

packages/i18n/package.json

@@ -2,6 +2,20 @@
 
 The following is a curated list of changes in the Enact moonstone module, newest changes on the top.
 
+## [2.5.3] - 2019-06-06
+
+### Fixed
+
+- `moonstone/ContextualPopupDecorator` imperative methods to be correctly bound to the instance
+- `moonstone/ExpandableInput` to retain focus when touching within the input field on touch platforms
+- `moonstone/ExpandableList` to not error if `selected` is passed as an array to a non-multi-select list
+- `moonstone/Input` refocusing on touch on iOS
+- `moonstone/Scroller` to allow changing spotlight focus to opposite scroll button when switching to 5way mode
+- `moonstone/Scroller`, `moonstone/VirtualList.VirtualGridList`, and `moonstone/VirtualList.VirtualList` to change spotlight focus due to touch events
+- `moonstone/Slider` to not scroll the viewport when dragging on touch platforms
+- `moonstone/VideoPlayer` to correctly handle touch events while moving slider knobs
+- `moonstone/VirtualList` and `moonstone/Scroller` to animate with 5-way navigation by default
+
 ## [2.5.2] - 2019-04-23
 
 ### Fixed

packages/moonstone/CHANGELOG.md

@@ -37,6 +37,7 @@ const digits = (num) => {
 
 /**
  * A picker component that lets the user select a number in between `min` and `max` numbers.
+ *
  * This component is not spottable. Developers are encouraged to use
  * {@link moonstone/EditableIntegerPicker.EditableIntegerPicker}.
  *
@@ -52,6 +53,9 @@ const EditableIntegerPickerBase = kind({
 		/**
 		 * The maximum value selectable by the picker (inclusive).
 		 *
+		 * The range between `min` and `max` should be evenly divisible by
+		 * [step]{@link moonstone/EditableIntegerPicker.EditableIntegerPickerBase.step}.
+		 *
 		 * @type {Number}
 		 * @required
 		 * @public
@@ -61,15 +65,19 @@ const EditableIntegerPickerBase = kind({
 		/**
 		 * The minimum value selectable by the picker (inclusive).
 		 *
+		 * The range between `min` and `max` should be evenly divisible by
+		 * [step]{@link moonstone/EditableIntegerPicker.EditableIntegerPickerBase.step}.
+		 *
 		 * @type {Number}
 		 * @required
 		 * @public
 		 */
 		min: PropTypes.number.isRequired,
 
 		/**
-		 * Overrides the `aria-valuetext` for the picker. By default, `aria-valuetext` is set
-		 * to the current selected child value.
+		 * The value for the picker for accessibility read out.
+		 *
+		 * By default, `aria-valuetext` is set to the current selected child value.
 		 *
 		 * @type {String}
 		 * @memberof moonstone/EditableIntegerPicker.EditableIntegerPickerBase.prototype
@@ -78,50 +86,54 @@ const EditableIntegerPickerBase = kind({
 		'aria-valuetext': PropTypes.string,
 
 		/**
-		 * Assign a custom icon for the decrementer. All strings supported by [Icon]{@link moonstone/Icon.Icon} are
-		 * supported. Without a custom icon, the default is used.
+		 * The icon for the decrementer.
+		 *
+		 * All strings supported by [Icon]{@link moonstone/Icon.Icon} are supported. Without a
+		 * custom icon, the default is used.
 		 *
 		 * @type {String}
 		 * @public
 		 */
 		decrementIcon: PropTypes.string,
 
 		/**
-		 * Disables the picker and prevents events from firing.
-		 * [events]{@link /docs/developer-guide/glossary/#event}.
+		 * Disables the picker and prevents [events]{@link /docs/developer-guide/glossary/#event}
+		 * from firing.
 		 *
 		 * @type {Boolean}
 		 * @public
 		 */
 		disabled: PropTypes.bool,
 
 		/**
-		 * When `true`, an input will be displayed instead of the picker components.
+		 * Displays the input field instead of the picker components.
 		 *
 		 * @type {Boolean}
 		 * @public
 		 */
 		editMode: PropTypes.bool,
 
 		/**
-		 * Assign a custom icon for the incrementer. All strings supported by [Icon]{@link moonstone/Icon.Icon} are
-		 * supported. Without a custom icon, the default is used.
+		 * The icon for the incrementer.
+		 *
+		 * All strings supported by [Icon]{@link moonstone/Icon.Icon} are supported. Without a
+		 * custom icon, the default is used.
 		 *
 		 * @type {String}
 		 * @public
 		 */
 		incrementIcon: PropTypes.string,
 
 		/**
-		 * The method to run when the input mounts, giving a reference to the DOM.
+		 * Called when the input mounts witha reference to the DOM node.
 		 *
 		 * @type {Function}
 		 * @private
 		 */
 		inputRef: PropTypes.func,
 
 		/**
-		 * Called when there is a blur in the input.
+		 * Called when there the input is blurred.
 		 *
 		 * @type {Function}
 		 * @public
@@ -140,35 +152,40 @@ const EditableIntegerPickerBase = kind({
 		onPickerItemClick: PropTypes.func,
 
 		/**
-		 * Sets the orientation of the picker, whether the buttons are above and below or on the
-		 * sides of the value. Must be either `'horizontal'` or `'vertical'`.
+		 * The orientation of the picker.
 		 *
-		 * @type {String}
+		 * @type {('horizontal'|'vertical')}
 		 * @default 'horizontal'
 		 * @public
 		 */
 		orientation: PropTypes.oneOf(['horizontal', 'vertical']),
 
 		/**
-		 * When `true`, pads the display value with zeros up to the number of digits of the value of
-		 * `min` or max`, whichever is greater.
+		 * Pads the display value with zeros.
+		 *
+		 * The number of zeros used is the number of digits of the value of
+		 * [min]{@link moonstone/EditableIntegerPicker.EditableIntegerPickerBase.min} or
+		 * [max]{@link moonstone/EditableIntegerPicker.EditableIntegerPickerBase.max}, whichever is
+		 * greater.
 		 *
 		 * @type {Boolean}
 		 * @public
 		 */
 		padded: PropTypes.bool,
 
 		/**
-		 * The method to run when the picker mounts, giving a reference to the DOM.
+		 * Called when the picker mounts with a reference to the picker DOM node.
 		 *
 		 * @type {Function}
 		 * @private
 		 */
 		pickerRef: PropTypes.func,
 
 		/**
-		 * Allow the picker to only increment or decrement by a given value. A step of `2` would
-		 * cause a picker to increment from 10 to 12 to 14, etc.
+		 * Allow the picker to only increment or decrement by a given value.
+		 *
+		 * For example, a step of `2` would cause a picker to increment from 10 to 12 to 14, etc.
+		 * It must evenly divide into the range designated by `min` and `max`.
 		 *
 		 * @type {Number}
 		 * @default 1
@@ -186,7 +203,7 @@ const EditableIntegerPickerBase = kind({
 		unit: PropTypes.string,
 
 		/**
-		 * The current value of the Picker to be displayed.
+		 * The current value of the Picker.
 		 *
 		 * @type {Number}
 		 * @default 0
@@ -195,15 +212,17 @@ const EditableIntegerPickerBase = kind({
 		value: PropTypes.number,
 
 		/**
-		 * Choose a specific size for your picker. `'small'`, `'medium'`, `'large'`, or set to `null` to
-		 * assume auto-sizing. `'small'` is good for numeric pickers, `'medium'` for single or short
-		 * word pickers, `'large'` for maximum-sized pickers.
+		 * The size of the picker.
+		 *
+		 * `'small'`, `'medium'`, `'large'`, or set to `null` to assume auto-sizing. `'small'` is
+		 * good for numeric pickers, `'medium'` for single or short word pickers, `'large'` for
+		 * maximum-sized pickers.
 		 *
-		 * You may also supply a number. This number will determine the minumum size of the Picker.
+		 * You may also supply a number which will determine the minumum size of the Picker.
 		 * Setting a number to less than the number of characters in your longest value may produce
 		 * unexpected results.
 		 *
-		 * @type {String|Number}
+		 * @type {('small'|'medium'|'large')|Number}
 		 * @default 'medium'
 		 * @public
 		 */
@@ -213,8 +232,7 @@ const EditableIntegerPickerBase = kind({
 		]),
 
 		/**
-		 * Should the picker stop incrementing when the picker reaches the last element? Set `wrap`
-		 * to true to allow the picker to continue from the opposite end of the list of options.
+		 * Allows the picker to increment from the max to min value and vice versa.
 		 *
 		 * @type {Boolean}
 		 * @public
@@ -304,9 +322,10 @@ const EditableIntegerPickerBase = kind({
 /**
  * A component that lets the user select a number from a range of numbers.
  *
- * By default, `EditableIntegerPicker` maintains the state of its `value` property. Supply the `defaultValue`
- * property to control its initial value. If you wish to directly control updates to the component,
- * supply a value to `value` at creation time and update it in response to `onChange` events.
+ * By default, `EditableIntegerPicker` maintains the state of its `value` property. Supply the
+ * `defaultValue` property to control its initial value. If you wish to directly control updates to
+ * the component, supply a value to `value` at creation time and update it in response to `onChange`
+ * events.
  *
  * @class EditableIntegerPicker
  * @memberof moonstone/EditableIntegerPicker

packages/moonstone/EditableIntegerPicker/EditableIntegerPicker.js

@@ -25,6 +25,7 @@ import last from 'ramda/src/last';
 import React from 'react';
 
 import LabeledItem from '../LabeledItem';
+import {extractVoiceProps} from '../internal/util';
 
 import Expandable from './Expandable';
 import ExpandableTransitionContainer from './ExpandableTransitionContainer';
@@ -357,10 +358,6 @@ const ExpandableItemBase = kind({
 
 	render: ({
 		children,
-		'data-webos-voice-disabled': voiceDisabled,
-		'data-webos-voice-group-label': voiceGroupLabel,
-		'data-webos-voice-intent': voiceIntent,
-		'data-webos-voice-label': voiceLabel,
 		disabled,
 		handleKeyDown,
 		handleLabelKeyDown,
@@ -390,6 +387,7 @@ const ExpandableItemBase = kind({
 		delete rest.showLabel;
 
 		const ariaProps = extractAriaProps(rest);
+		const voiceProps = extractVoiceProps(rest);
 
 		return (
 			<ContainerDiv
@@ -401,13 +399,10 @@ const ExpandableItemBase = kind({
 			>
 				<LabeledItem
 					{...ariaProps}
+					{...voiceProps}
 					css={css}
 					className={labeledItemClassName}
 					data-expandable-label
-					data-webos-voice-disabled={voiceDisabled}
-					data-webos-voice-group-label={voiceGroupLabel}
-					data-webos-voice-intent={voiceIntent}
-					data-webos-voice-label={voiceLabel}
 					disabled={disabled}
 					label={label}
 					onTap={handleOpen}

packages/moonstone/ExpandableItem/ExpandableItem.js

@@ -313,13 +313,13 @@ const ExpandableListBase = kind({
 			if (label) {
 				return label;
 			} else if (children.length && (selected || selected === 0)) {
-				const isArray = Array.isArray(selected);
-				if (select === 'multiple' && isArray) {
+				const firstSelected = Array.isArray(selected) ? selected[0] : selected;
+				if (select === 'multiple' && Array.isArray(selected)) {
 					return selected.map(i => typeof children[i] === 'object' ? children[i].children : children[i]).filter(str => !!str).join(', ');
-				} else if (typeof children[selected] === 'object') {
-					return children[selected].children;
+				} else if (typeof children[firstSelected] === 'object') {
+					return children[firstSelected].children;
 				} else {
-					return children[isArray ? selected[0] : selected];
+					return children[firstSelected];
 				}
 			}
 		},