@enact/limestone 1.9.3 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. package/.github/workflows/ci-reusable.yml +2 -2
  2. package/Alert/Alert.d.ts +9 -0
  3. package/Alert/Alert.js +35 -4
  4. package/Alert/Alert.module.css +12 -1
  5. package/Alert/tests/Alert-specs.js +91 -0
  6. package/Button/tests/Button-specs.js +26 -0
  7. package/CHANGELOG.md +34 -0
  8. package/Card/Card.d.ts +4 -4
  9. package/Card/Card.js +7 -8
  10. package/Card/tests/Card-specs.js +39 -5
  11. package/CheckboxItem/CheckboxItem.js +6 -4
  12. package/Chips/Chip.js +12 -6
  13. package/Chips/Chips.js +12 -6
  14. package/Chips/tests/Chip-specs.js +25 -5
  15. package/Chips/tests/Chips-specs.js +12 -2
  16. package/ColorPicker/ColorPicker.js +27 -25
  17. package/ContextualPopupDecorator/ContextualPopupDecorator.js +32 -22
  18. package/DayPicker/DaySelectorDecorator.js +12 -7
  19. package/Dropdown/Dropdown.module.css +4 -0
  20. package/Dropdown/DropdownList.js +74 -53
  21. package/FlexiblePopupPanels/useNavButtonFocus.js +7 -10
  22. package/Heading/Heading.d.ts +1 -1
  23. package/Heading/Heading.js +2 -2
  24. package/Icon/Icon.d.ts +1 -0
  25. package/Icon/Icon.js +1 -0
  26. package/Icon/IconList.js +2 -0
  27. package/IconItem/IconItem.module.css +3 -3
  28. package/IconItem/tests/IconItem-specs.js +30 -1
  29. package/Image/Image.js +6 -4
  30. package/Input/Input.js +12 -1
  31. package/Input/InputField.js +75 -24
  32. package/Input/InputField.module.css +262 -45
  33. package/Input/InputFieldDecoratorIcon.js +1 -0
  34. package/Input/InputFieldSpotlightDecorator.js +53 -8
  35. package/Input/index.d.ts +105 -93
  36. package/Input/tests/Input-specs.js +26 -0
  37. package/Input/tests/InputField-specs.js +149 -3
  38. package/Input/tests/InputPopup-specs.js +1 -1
  39. package/KeyGuide/KeyGuide.js +29 -27
  40. package/MediaOverlay/tests/MediaOverlay-specs.js +29 -0
  41. package/MediaPlayer/tests/util-specs.js +4 -1
  42. package/PageViews/PageViews.js +134 -69
  43. package/PageViews/PageViews.module.css +3 -0
  44. package/PageViews/PageViewsRouter.js +91 -42
  45. package/PageViews/tests/PageViews-specs.js +87 -0
  46. package/Panels/Header.js +6 -4
  47. package/Popup/Popup.js +5 -4
  48. package/PopupTabLayout/PopupTabLayout.js +11 -9
  49. package/RadioItem/RadioItem.js +7 -5
  50. package/Scroller/EditableWrapper.js +17 -14
  51. package/Scroller/Scroller.js +11 -10
  52. package/Scroller/useThemeScroller.js +3 -3
  53. package/Slider/Slider.d.ts +4 -0
  54. package/Slider/Slider.js +40 -16
  55. package/Slider/Slider.module.css +150 -0
  56. package/Slider/SliderBehaviorDecorator.js +16 -14
  57. package/Slider/tests/Slider-specs.js +51 -0
  58. package/Slider/utils.js +23 -7
  59. package/Spinner/Spinner.js +10 -8
  60. package/TabLayout/RefocusDecorator.js +14 -12
  61. package/TabLayout/tests/TabGroup-specs.js +1 -1
  62. package/ThemeDecorator/AccessibilityDecorator.js +12 -11
  63. package/ThemeDecorator/I18nFontDecorator.js +6 -4
  64. package/ThemeDecorator/ThemeDecorator.d.ts +7 -0
  65. package/ThemeDecorator/ThemeDecorator.js +24 -9
  66. package/TimePicker/TimePickerBase.js +5 -3
  67. package/TooltipDecorator/TooltipDecorator.js +12 -7
  68. package/TooltipDecorator/tests/useTooltip-specs.js +5 -2
  69. package/VideoPlayer/VideoPlayer.js +25 -24
  70. package/VirtualList/VirtualList.js +20 -18
  71. package/VirtualList/useSpotlight.js +1 -1
  72. package/fonts/Limestone_Icons.ttf +0 -0
  73. package/internal/AsyncRenderChildren/AsyncRenderChildren.js +9 -5
  74. package/internal/AsyncRenderChildren/tests/AsyncRenderChildren-specs.js +4 -1
  75. package/internal/DateTime/DateTimeDecorator.js +5 -4
  76. package/internal/Panels/PanelsRouter.js +35 -29
  77. package/internal/Panels/useAutoFocus.js +10 -6
  78. package/internal/Panels/useFocusOnTransition.js +4 -3
  79. package/internal/Picker/Picker.js +7 -5
  80. package/internal/Picker/SpottablePicker.js +15 -13
  81. package/internal/SharedStateDecorator/SharedStateDecorator.js +6 -4
  82. package/package.json +14 -11
  83. package/styles/colors.less +1 -0
  84. package/styles/variables.less +1 -1
  85. package/useScroll/HoverToScroll.js +15 -12
  86. package/useScroll/Scrollbar.js +14 -10
  87. package/useScroll/ScrollbarPlaceholder.js +3 -5
  88. package/useScroll/ScrollbarTrack.js +7 -5
  89. package/useScroll/useEvent.js +7 -2
  90. package/useScroll/useScroll.js +10 -2
@@ -35,14 +35,15 @@ var accessibilityDecoratorDefaultProps = {
35
35
  */
36
36
  var AccessibilityDecorator = exports.AccessibilityDecorator = (0, _hoc["default"])(function (config, Wrapped) {
37
37
  // eslint-disable-next-line no-shadow
38
- var AccessibilityDecorator = function AccessibilityDecorator(props) {
39
- var _setDefaultProps = (0, _util.setDefaultProps)(props, accessibilityDecoratorDefaultProps),
40
- className = _setDefaultProps.className,
41
- focusRing = _setDefaultProps.focusRing,
42
- highContrast = _setDefaultProps.highContrast,
43
- skinVariants = _setDefaultProps.skinVariants,
44
- textSize = _setDefaultProps.textSize,
45
- rest = _objectWithoutProperties(_setDefaultProps, _excluded);
38
+ var _AccessibilityDecorator = function AccessibilityDecorator(props) {
39
+ var accessibilityDecoratorProps = (0, _util.setDefaultProps)(props, accessibilityDecoratorDefaultProps);
40
+ (0, _util.checkPropTypes)(_AccessibilityDecorator, accessibilityDecoratorProps);
41
+ var className = accessibilityDecoratorProps.className,
42
+ focusRing = accessibilityDecoratorProps.focusRing,
43
+ highContrast = accessibilityDecoratorProps.highContrast,
44
+ skinVariants = accessibilityDecoratorProps.skinVariants,
45
+ textSize = accessibilityDecoratorProps.textSize,
46
+ rest = _objectWithoutProperties(accessibilityDecoratorProps, _excluded);
46
47
  var accessibilityClassName = highContrast ? "enact-a11y-high-contrast enact-text-".concat(textSize) : "enact-text-".concat(textSize);
47
48
  accessibilityClassName = focusRing ? "enact-a11y-focus-ring ".concat(accessibilityClassName) : "".concat(accessibilityClassName);
48
49
  var combinedClassName = className ? "".concat(className, " ").concat(accessibilityClassName) : accessibilityClassName;
@@ -75,8 +76,8 @@ var AccessibilityDecorator = exports.AccessibilityDecorator = (0, _hoc["default"
75
76
  }, rest))
76
77
  });
77
78
  };
78
- AccessibilityDecorator.displayName = 'AccessibilityDecorator';
79
- AccessibilityDecorator.propTypes = {
79
+ _AccessibilityDecorator.displayName = 'AccessibilityDecorator';
80
+ _AccessibilityDecorator.propTypes = {
80
81
  /** @lends limestone/ThemeDecorator.AccessibilityDecorator.prototype */
81
82
  /**
82
83
  * Enables additional features to help users visually differentiate components.
@@ -146,6 +147,6 @@ var AccessibilityDecorator = exports.AccessibilityDecorator = (0, _hoc["default"
146
147
  */
147
148
  textSize: _propTypes["default"].oneOf(['normal', 'large'])
148
149
  };
149
- return AccessibilityDecorator;
150
+ return _AccessibilityDecorator;
150
151
  });
151
152
  var _default = exports["default"] = AccessibilityDecorator;
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports["default"] = exports.I18nFontDecorator = void 0;
7
7
  var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
8
+ var _util = require("@enact/core/util");
8
9
  var _i18n = _interopRequireDefault(require("@enact/i18n"));
9
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
11
  var _react = require("react");
@@ -17,17 +18,18 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
17
18
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
18
19
  function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
19
20
  var I18nFontDecorator = exports.I18nFontDecorator = (0, _hoc["default"])(function (config, Wrapped) {
20
- var I18nDecorator = function I18nDecorator(props) {
21
+ var _I18nDecorator = function I18nDecorator(props) {
22
+ (0, _util.checkPropTypes)(_I18nDecorator, props);
21
23
  var ilibLocale = _i18n["default"].getLocale();
22
24
  (0, _react.useEffect)(function () {
23
25
  (0, _fontGenerator.fontOverrideGenerator)(props.locale || ilibLocale);
24
26
  }, [ilibLocale, props.locale]);
25
27
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, props));
26
28
  };
27
- I18nDecorator.displayName = 'I18nFontDecorator';
28
- I18nDecorator.propTypes = {
29
+ _I18nDecorator.displayName = 'I18nFontDecorator';
30
+ _I18nDecorator.propTypes = {
29
31
  locale: _propTypes["default"].string
30
32
  };
31
- return I18nDecorator;
33
+ return _I18nDecorator;
32
34
  });
33
35
  var _default = exports["default"] = I18nFontDecorator;
@@ -77,6 +77,13 @@ export interface ThemeDecoratorConfig extends Object {
77
77
  * Disables use of full screen.
78
78
  */
79
79
  disableFullscreen?: boolean;
80
+ /**
81
+ * A CSS class name to apply globally to every spottable component when it receives spotlight focus.
82
+ *
83
+ * This is the declarative equivalent of calling `setFocusEffectClass` imperatively. It acts as
84
+ an app-wide default.
85
+ */
86
+ focusEffectClass?: string;
80
87
  /**
81
88
  * Enables a floating layer for popup components.
82
89
  *
@@ -13,6 +13,7 @@ Object.defineProperty(exports, "getLastInputType", {
13
13
  var _dispatcher = require("@enact/core/dispatcher");
14
14
  var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
15
15
  var _keymap = require("@enact/core/keymap");
16
+ var _util = require("@enact/core/util");
16
17
  var _I18nDecorator = _interopRequireDefault(require("@enact/i18n/I18nDecorator"));
17
18
  var _SpotlightRootDecorator = _interopRequireWildcard(require("@enact/spotlight/SpotlightRootDecorator"));
18
19
  var _FloatingLayer = require("@enact/ui/FloatingLayer");
@@ -69,6 +70,17 @@ var defaultConfig = /** @lends limestone/ThemeDecorator.ThemeDecorator.defaultCo
69
70
  * @public
70
71
  */
71
72
  disableFullscreen: false,
73
+ /**
74
+ * A CSS class name to apply globally to every spottable component when it receives spotlight focus.
75
+ *
76
+ * This is the declarative equivalent of calling `setFocusEffectClass` imperatively. It acts as
77
+ * an app-wide default.
78
+ *
79
+ * @type {String}
80
+ * @default null
81
+ * @public
82
+ */
83
+ focusEffectClass: null,
72
84
  /**
73
85
  * Enables a floating layer for popup components.
74
86
  *
@@ -178,15 +190,16 @@ var defaultConfig = /** @lends limestone/ThemeDecorator.ThemeDecorator.defaultCo
178
190
  */
179
191
  var ThemeDecorator = exports.ThemeDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
180
192
  var accessible = config.accessible,
181
- ri = config.ri,
182
- i18n = config.i18n,
183
- spotlight = config.spotlight,
193
+ disableFullscreen = config.disableFullscreen,
184
194
  _float = config["float"],
195
+ focusEffectClass = config.focusEffectClass,
196
+ i18n = config.i18n,
185
197
  noAutoFocus = config.noAutoFocus,
186
198
  overlay = config.overlay,
199
+ ri = config.ri,
200
+ rootId = config.rootId,
187
201
  skin = config.skin,
188
- disableFullscreen = config.disableFullscreen,
189
- rootId = config.rootId;
202
+ spotlight = config.spotlight;
190
203
 
191
204
  // Apply classes depending on screen type (overlay / fullscreen)
192
205
  var bgClassName = (0, _classnames["default"])(_defineProperty({
@@ -211,6 +224,7 @@ var ThemeDecorator = exports.ThemeDecorator = (0, _hoc["default"])(defaultConfig
211
224
  }), (0, _I18nFontDecorator["default"])(App));
212
225
  }
213
226
  if (spotlight) App = (0, _SpotlightRootDecorator["default"])({
227
+ focusEffectClass: focusEffectClass,
214
228
  noAutoFocus: noAutoFocus,
215
229
  rootId: rootId
216
230
  }, App);
@@ -260,7 +274,8 @@ var ThemeDecorator = exports.ThemeDecorator = (0, _hoc["default"])(defaultConfig
260
274
 
261
275
  // set the DOM node ID of the React DOM tree root
262
276
  (0, _dispatcher.setDefaultTargetById)(rootId);
263
- var Decorator = function Decorator(props) {
277
+ var _Decorator = function Decorator(props) {
278
+ (0, _util.checkPropTypes)(_Decorator, props);
264
279
  var skinProp = props.skin,
265
280
  rest = _objectWithoutProperties(props, _excluded);
266
281
  var skinName = skinProp || 'neutral';
@@ -292,8 +307,8 @@ var ThemeDecorator = exports.ThemeDecorator = (0, _hoc["default"])(defaultConfig
292
307
  className: className
293
308
  }));
294
309
  };
295
- Decorator.displayName = 'ThemeDecorator';
296
- Decorator.propTypes = /** @lends limestone/ThemeDecorator.prototype */{
310
+ _Decorator.displayName = 'ThemeDecorator';
311
+ _Decorator.propTypes = /** @lends limestone/ThemeDecorator.prototype */{
297
312
  /**
298
313
  * Assign a skin.
299
314
  *
@@ -302,6 +317,6 @@ var ThemeDecorator = exports.ThemeDecorator = (0, _hoc["default"])(defaultConfig
302
317
  */
303
318
  skin: _propTypes["default"].string
304
319
  };
305
- return Decorator;
320
+ return _Decorator;
306
321
  });
307
322
  var _default = exports["default"] = ThemeDecorator;
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports["default"] = exports.TimePickerBase = void 0;
7
7
  var _kind = _interopRequireDefault(require("@enact/core/kind"));
8
+ var _util = require("@enact/core/util");
8
9
  var _react = require("react");
9
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
11
  var _$L = _interopRequireDefault(require("../internal/$L"));
@@ -40,7 +41,8 @@ var hours12 = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '1
40
41
  * @ui
41
42
  * @private
42
43
  */
43
- var HourPicker = function HourPicker(props) {
44
+ var _HourPicker = function HourPicker(props) {
45
+ (0, _util.checkPropTypes)(_HourPicker, props);
44
46
  var hasMeridiem = props.hasMeridiem,
45
47
  value = props.value,
46
48
  rest = _objectWithoutProperties(props, _excluded);
@@ -63,7 +65,7 @@ var HourPicker = function HourPicker(props) {
63
65
  children: hours
64
66
  }));
65
67
  };
66
- HourPicker.propTypes = {
68
+ _HourPicker.propTypes = {
67
69
  hasMeridiem: _propTypes["default"].bool,
68
70
  value: _propTypes["default"].number
69
71
  };
@@ -314,7 +316,7 @@ var TimePickerBase = exports.TimePickerBase = (0, _kind["default"])({
314
316
  case 'h':
315
317
  case 'k':
316
318
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
317
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HourPicker, {
319
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HourPicker, {
318
320
  accessibilityHint: hourAccessibilityHint,
319
321
  "aria-label": hourAriaLabel,
320
322
  className: _TimePickerModule["default"].hourPicker,
@@ -23,6 +23,7 @@ Object.defineProperty(exports, "useTooltip", {
23
23
  }
24
24
  });
25
25
  var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
26
+ var _util = require("@enact/core/util");
26
27
  var _I18nDecorator = require("@enact/i18n/I18nDecorator");
27
28
  var _propTypes = _interopRequireDefault(require("prop-types"));
28
29
  var _Tooltip = require("./Tooltip");
@@ -93,24 +94,28 @@ var defaultConfig = {
93
94
  var TooltipDecorator = exports.TooltipDecorator = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
94
95
  var screenEdgeKeepout = config.screenEdgeKeepout,
95
96
  tooltipDestinationProp = config.tooltipDestinationProp;
96
- var Decorator = function Decorator(props) {
97
+ var _Decorator = function Decorator(props) {
98
+ (0, _util.checkPropTypes)(_Decorator, props);
97
99
  var _useTooltip = (0, _useTooltip2.useTooltip)(_objectSpread({
98
100
  screenEdgeKeepout: screenEdgeKeepout
99
101
  }, props)),
100
102
  tooltip = _useTooltip.tooltip,
101
103
  handlers = _useTooltip.handlers,
102
104
  restProps = _useTooltip.restProps;
105
+ var tooltipRestProps = Object.assign({}, restProps);
103
106
  if (tooltip) {
104
107
  if (tooltipDestinationProp === 'children') {
105
- restProps.children = [props.children, tooltip];
108
+ Object.assign(tooltipRestProps, {
109
+ children: [props.children, tooltip]
110
+ });
106
111
  } else {
107
- restProps[tooltipDestinationProp] = tooltip;
112
+ Object.assign(tooltipRestProps, _defineProperty({}, tooltipDestinationProp, tooltip));
108
113
  }
109
114
  }
110
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, restProps), handlers));
115
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread(_objectSpread({}, tooltipRestProps), handlers));
111
116
  };
112
- Decorator.displayName = 'TooltipDecorator';
113
- Decorator.propTypes = /** @lends limestone/TooltipDecorator.TooltipDecorator.prototype */{
117
+ _Decorator.displayName = 'TooltipDecorator';
118
+ _Decorator.propTypes = /** @lends limestone/TooltipDecorator.TooltipDecorator.prototype */{
114
119
  /**
115
120
  * Disables the component but does not affect tooltip operation.
116
121
  *
@@ -255,6 +260,6 @@ var TooltipDecorator = exports.TooltipDecorator = (0, _hoc["default"])(defaultCo
255
260
  };
256
261
  return (0, _I18nDecorator.I18nContextDecorator)({
257
262
  rtlProp: 'rtl'
258
- }, Decorator);
263
+ }, _Decorator);
259
264
  });
260
265
  var _default = exports["default"] = TooltipDecorator;
@@ -30,10 +30,13 @@ describe('useTooltip', function () {
30
30
  tooltip = _useTooltip.tooltip,
31
31
  handlers = _useTooltip.handlers,
32
32
  restProps = _useTooltip.restProps;
33
+ var tooltipRestProps = Object.assign({}, restProps);
33
34
  if (tooltip) {
34
- restProps.children = [children, tooltip];
35
+ Object.assign(tooltipRestProps, {
36
+ children: [children, tooltip]
37
+ });
35
38
  }
36
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread({}, restProps), handlers));
39
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], _objectSpread(_objectSpread({}, tooltipRestProps), handlers));
37
40
  };
38
41
  describe('Tooltip', function () {
39
42
  beforeEach(function () {
@@ -108,14 +108,15 @@ var calcNumberValueOfPlaybackRate = function calcNumberValueOfPlaybackRate(rate)
108
108
  var pbArray = String(rate).split('/');
109
109
  return pbArray.length > 1 ? parseInt(pbArray[0]) / parseInt(pbArray[1]) : parseFloat(rate);
110
110
  };
111
- var RootComponent = function RootComponent(_ref4) {
112
- var playerRef = _ref4.playerRef,
113
- rest = _objectWithoutProperties(_ref4, _excluded);
111
+ var _RootComponent = function RootComponent(props) {
112
+ (0, _util.checkPropTypes)(_RootComponent, props);
113
+ var playerRef = props.playerRef,
114
+ rest = _objectWithoutProperties(props, _excluded);
114
115
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
115
116
  ref: playerRef
116
117
  }, rest));
117
118
  };
118
- RootComponent.propTypes = {
119
+ _RootComponent.propTypes = {
119
120
  /*
120
121
  * Called with the reference to the mediaControls node.
121
122
  *
@@ -128,7 +129,7 @@ var SpottableDiv = (0, _Touchable["default"])((0, _Spottable.Spottable)('div'));
128
129
  var RootContainer = (0, _SpotlightContainerDecorator.SpotlightContainerDecorator)({
129
130
  enterTo: 'default-element',
130
131
  defaultElement: [".".concat(_VideoPlayerModule["default"].controlsHandleAbove), ".".concat(_VideoPlayerModule["default"].controlsFrame)]
131
- }, RootComponent);
132
+ }, _RootComponent);
132
133
  var ControlsContainer = (0, _SpotlightContainerDecorator.SpotlightContainerDecorator)({
133
134
  enterTo: 'default-element',
134
135
  straightOnly: true
@@ -300,8 +301,8 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
300
301
  }
301
302
  _this.startDelayedFeedbackHide();
302
303
  _this.startDelayedTitleHide();
303
- _this.setState(function (_ref5) {
304
- var announce = _ref5.announce;
304
+ _this.setState(function (_ref4) {
305
+ var announce = _ref4.announce;
305
306
  if (announce === AnnounceState.READY) {
306
307
  // if we haven't read the title yet, do so this time
307
308
  announce = AnnounceState.TITLE;
@@ -360,9 +361,9 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
360
361
  _this.doAutoClose = function () {
361
362
  _this.stopDelayedFeedbackHide();
362
363
  _this.stopDelayedTitleHide();
363
- _this.setState(function (_ref6) {
364
- var mediaSliderVisible = _ref6.mediaSliderVisible,
365
- miniFeedbackVisible = _ref6.miniFeedbackVisible;
364
+ _this.setState(function (_ref5) {
365
+ var mediaSliderVisible = _ref5.mediaSliderVisible,
366
+ miniFeedbackVisible = _ref5.miniFeedbackVisible;
366
367
  return {
367
368
  feedbackVisible: false,
368
369
  mediaControlsVisible: false,
@@ -403,10 +404,10 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
403
404
  } else {
404
405
  var shouldShowSlider = _this.pulsedPlaybackState !== null || calcNumberValueOfPlaybackRate(_this.playbackRate) !== 1;
405
406
  if (_this.showMiniFeedback && (!_this.state.miniFeedbackVisible || _this.state.mediaSliderVisible !== shouldShowSlider)) {
406
- _this.setState(function (_ref7) {
407
- var loading = _ref7.loading,
408
- duration = _ref7.duration,
409
- error = _ref7.error;
407
+ _this.setState(function (_ref6) {
408
+ var loading = _ref6.loading,
409
+ duration = _ref6.duration,
410
+ error = _ref6.error;
410
411
  return {
411
412
  mediaSliderVisible: shouldShowSlider && !_this.props.noMediaSliderFeedback,
412
413
  miniFeedbackVisible: !(loading || !duration || error)
@@ -490,8 +491,8 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
490
491
  _this.handleFastForward = _this.handle(forwardWillFastForward, _this.shouldShowMiniFeedback, function () {
491
492
  return _this.fastForward();
492
493
  }, forwardFastForward);
493
- _this.handleJump = function (_ref8) {
494
- var keyCode = _ref8.keyCode;
494
+ _this.handleJump = function (_ref7) {
495
+ var keyCode = _ref7.keyCode;
495
496
  if (_this.props.seekDisabled) {
496
497
  (0, _handle.forwardCustom)('onSeekFailed')(null, _this.props);
497
498
  } else {
@@ -515,8 +516,8 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
515
516
  });
516
517
  }
517
518
  };
518
- _this.handleControlsHandleAboveKeyDown = function (_ref9) {
519
- var keyCode = _ref9.keyCode;
519
+ _this.handleControlsHandleAboveKeyDown = function (_ref8) {
520
+ var keyCode = _ref8.keyCode;
520
521
  if (isEnter(keyCode)) {
521
522
  _this.jumpKeyPressed = 0;
522
523
  } else if (isLeft(keyCode)) {
@@ -525,8 +526,8 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
525
526
  _this.jumpKeyPressed = 1;
526
527
  }
527
528
  };
528
- _this.handleControlsHandleAboveKeyUp = function (_ref0) {
529
- var keyCode = _ref0.keyCode;
529
+ _this.handleControlsHandleAboveKeyUp = function (_ref9) {
530
+ var keyCode = _ref9.keyCode;
530
531
  if (isEnter(keyCode) || isLeft(keyCode) || isRight(keyCode)) {
531
532
  _this.jumpKeyPressed = null;
532
533
  }
@@ -997,8 +998,8 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
997
998
  _this.onVideoClick = function () {
998
999
  _this.toggleControls();
999
1000
  };
1000
- _this.onSliderChange = function (_ref1) {
1001
- var value = _ref1.value;
1001
+ _this.onSliderChange = function (_ref0) {
1002
+ var value = _ref0.value;
1002
1003
  var time = value * _this.state.duration;
1003
1004
  if (_this.preventTimeChange(time)) return;
1004
1005
  _this.seek(time);
@@ -1102,8 +1103,8 @@ var VideoPlayerBase = exports.VideoPlayerBase = (_Class = /*#__PURE__*/function
1102
1103
  _this.stopDelayedTitleHide();
1103
1104
  }
1104
1105
  _this.playerRef.current.style.setProperty('--liftDistance', "".concat(liftDistance, "px"));
1105
- _this.setState(function (_ref10) {
1106
- var announce = _ref10.announce;
1106
+ _this.setState(function (_ref1) {
1107
+ var announce = _ref1.announce;
1107
1108
  return {
1108
1109
  infoVisible: showMoreComponents,
1109
1110
  titleVisible: true,
@@ -9,7 +9,7 @@ var _I18nDecorator = require("@enact/i18n/I18nDecorator");
9
9
  var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
10
10
  var _SpotlightContainerDecorator = _interopRequireDefault(require("@enact/spotlight/SpotlightContainerDecorator"));
11
11
  var _Resizable = require("@enact/ui/Resizable");
12
- var _VirtualList = require("@enact/ui/VirtualList");
12
+ var _VirtualList2 = require("@enact/ui/VirtualList");
13
13
  var _classnames = _interopRequireDefault(require("classnames"));
14
14
  var _propTypes = _interopRequireDefault(require("prop-types"));
15
15
  var _validators = require("../internal/validators");
@@ -75,8 +75,9 @@ var virtualListDefaultProps = {
75
75
  * @ui
76
76
  * @public
77
77
  */
78
- var VirtualList = exports.VirtualList = function VirtualList(props) {
78
+ var _VirtualList = exports.VirtualList = function VirtualList(props) {
79
79
  var virtualListProps = (0, _util.setDefaultProps)(props, virtualListDefaultProps);
80
+ (0, _util.checkPropTypes)(_VirtualList, virtualListProps);
80
81
  if (typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION) {
81
82
  virtualListProps.overscrollEffectOn = {
82
83
  arrowKey: false,
@@ -125,14 +126,14 @@ var VirtualList = exports.VirtualList = function VirtualList(props) {
125
126
  }));
126
127
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizable.ResizeContext, _objectSpread(_objectSpread({}, resizeContextProps), {}, {
127
128
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ScrollContentWrapper, _objectSpread(_objectSpread(_objectSpread({}, themeScrollContainerProps), scrollContentWrapperRest), {}, {
128
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList.VirtualListBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
129
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList2.VirtualListBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
129
130
  ref: scrollContentHandle
130
131
  })), isVerticalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, verticalScrollbarProps)) : null, isHorizontalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, horizontalScrollbarProps)) : null, hoverToScroll ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverToScroll["default"], _objectSpread({}, hoverToScrollProps)) : null]
131
132
  }))
132
133
  }));
133
134
  };
134
- VirtualList.displayName = 'VirtualList';
135
- VirtualList.propTypes = /** @lends limestone/VirtualList.VirtualList.prototype */{
135
+ _VirtualList.displayName = 'VirtualList';
136
+ _VirtualList.propTypes = /** @lends limestone/VirtualList.VirtualList.prototype */{
136
137
  /**
137
138
  * Size of an item for the VirtualList; valid value is a number generally.
138
139
  * For different item size, value is an object that has `minSize`
@@ -149,7 +150,7 @@ VirtualList.propTypes = /** @lends limestone/VirtualList.VirtualList.prototype *
149
150
  * @required
150
151
  * @public
151
152
  */
152
- itemSize: _propTypes["default"].oneOfType([_propTypes["default"].number, _VirtualList.itemSizesShape]).isRequired,
153
+ itemSize: _propTypes["default"].oneOfType([_propTypes["default"].number, _VirtualList2.itemSizesShape]).isRequired,
153
154
  /**
154
155
  * A callback function that receives a reference to the `scrollTo` feature.
155
156
  *
@@ -493,14 +494,14 @@ VirtualList.propTypes = /** @lends limestone/VirtualList.VirtualList.prototype *
493
494
  */
494
495
  wrap: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(['noAnimation'])])
495
496
  };
496
- exports.VirtualList = VirtualList = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
497
+ exports.VirtualList = _VirtualList = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
497
498
  overflow: true,
498
499
  preserveId: true,
499
500
  restrict: 'self-first'
500
501
  }, (0, _I18nDecorator.I18nContextDecorator)({
501
502
  rtlProp: 'rtl'
502
- }, VirtualList)));
503
- VirtualList.defaultPropValues = virtualListDefaultProps;
503
+ }, _VirtualList)));
504
+ _VirtualList.defaultPropValues = virtualListDefaultProps;
504
505
  var virtualGridListDefaultProps = {
505
506
  'data-spotlight-container-disabled': false,
506
507
  cbScrollTo: nop,
@@ -536,8 +537,9 @@ var virtualGridListDefaultProps = {
536
537
  * @ui
537
538
  * @public
538
539
  */
539
- var VirtualGridList = exports.VirtualGridList = function VirtualGridList(props) {
540
+ var _VirtualGridList = exports.VirtualGridList = function VirtualGridList(props) {
540
541
  var virtualGridListProps = (0, _util.setDefaultProps)(props, virtualGridListDefaultProps);
542
+ (0, _util.checkPropTypes)(_VirtualGridList, virtualGridListProps);
541
543
  if (typeof ENACT_PACK_NO_ANIMATION !== 'undefined' && ENACT_PACK_NO_ANIMATION) {
542
544
  virtualGridListProps.overscrollEffectOn = {
543
545
  arrowKey: false,
@@ -572,14 +574,14 @@ var VirtualGridList = exports.VirtualGridList = function VirtualGridList(props)
572
574
  }));
573
575
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizable.ResizeContext, _objectSpread(_objectSpread({}, resizeContextProps), {}, {
574
576
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ScrollContentWrapper, _objectSpread(_objectSpread(_objectSpread({}, scrollContainerProps), scrollContentWrapperRest), {}, {
575
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList.VirtualListBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
577
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VirtualList2.VirtualListBasic, _objectSpread(_objectSpread({}, themeScrollContentProps), {}, {
576
578
  ref: scrollContentHandle
577
579
  })), isVerticalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, verticalScrollbarProps)) : null, isHorizontalScrollbarVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Scrollbar["default"], _objectSpread({}, horizontalScrollbarProps)) : null, hoverToScroll ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverToScroll["default"], _objectSpread({}, hoverToScrollProps)) : null]
578
580
  }))
579
581
  }));
580
582
  };
581
- VirtualGridList.displayName = 'VirtualGridList';
582
- VirtualGridList.propTypes = /** @lends limestone/VirtualList.VirtualGridList.prototype */{
583
+ _VirtualGridList.displayName = 'VirtualGridList';
584
+ _VirtualGridList.propTypes = /** @lends limestone/VirtualList.VirtualGridList.prototype */{
583
585
  /**
584
586
  * Size of an item for the VirtualGridList; valid value is an object that has `minWidth`
585
587
  * and `minHeight` as properties.
@@ -598,7 +600,7 @@ VirtualGridList.propTypes = /** @lends limestone/VirtualList.VirtualGridList.pro
598
600
  * @required
599
601
  * @public
600
602
  */
601
- itemSize: _VirtualList.gridListItemSizeShape.isRequired,
603
+ itemSize: _VirtualList2.gridListItemSizeShape.isRequired,
602
604
  /**
603
605
  * A callback function that receives a reference to the `scrollTo` feature.
604
606
  *
@@ -945,12 +947,12 @@ VirtualGridList.propTypes = /** @lends limestone/VirtualList.VirtualGridList.pro
945
947
  */
946
948
  wrap: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].oneOf(['noAnimation'])])
947
949
  };
948
- exports.VirtualGridList = VirtualGridList = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
950
+ exports.VirtualGridList = _VirtualGridList = (0, _Skinnable["default"])((0, _SpotlightContainerDecorator["default"])({
949
951
  overflow: true,
950
952
  preserveId: true,
951
953
  restrict: 'self-first'
952
954
  }, (0, _I18nDecorator.I18nContextDecorator)({
953
955
  rtlProp: 'rtl'
954
- }, VirtualGridList)));
955
- VirtualGridList.defaultPropValues = virtualGridListDefaultProps;
956
- var _default = exports["default"] = VirtualList;
956
+ }, _VirtualGridList)));
957
+ _VirtualGridList.defaultPropValues = virtualGridListDefaultProps;
958
+ var _default = exports["default"] = _VirtualList;
@@ -113,7 +113,7 @@ var useSpotlightRestore = exports.useSpotlightRestore = function useSpotlightRes
113
113
  mutableRef.current.restoreLastFocused = false;
114
114
 
115
115
  // try to focus the last focused item
116
- spottable.current.isScrolledByJump = true;
116
+ spottable.current.isScrolledByJump = true; // eslint-disable-line react-hooks/immutability
117
117
  var foundLastFocused = focusByIndex(mutableRef.current.preservedIndex, mutableRef.current.lastSpotlightDirection);
118
118
  spottable.current.isScrolledByJump = false;
119
119
 
Binary file
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.AsyncRenderChildren = AsyncRenderChildren;
7
7
  exports["default"] = void 0;
8
+ var _util = require("@enact/core/util");
8
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
10
  var _react = require("react");
10
11
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -27,11 +28,14 @@ var delayToRenderChildren = 600;
27
28
  * @ui
28
29
  * @private
29
30
  */
30
- function AsyncRenderChildren(_ref) {
31
- var children = _ref.children,
32
- _ref$fallback = _ref.fallback,
33
- fallback = _ref$fallback === void 0 ? '' : _ref$fallback,
34
- index = _ref.index;
31
+ function AsyncRenderChildren(props) {
32
+ var asyncRenderChildrenProps = (0, _util.setDefaultProps)(props, {
33
+ fallback: ''
34
+ });
35
+ (0, _util.checkPropTypes)(AsyncRenderChildren, asyncRenderChildrenProps);
36
+ var children = asyncRenderChildrenProps.children,
37
+ fallback = asyncRenderChildrenProps.fallback,
38
+ index = asyncRenderChildrenProps.index;
35
39
  var _useState = (0, _react.useState)(index),
36
40
  _useState2 = _slicedToArray(_useState, 2),
37
41
  prevIndex = _useState2[0],
@@ -2,6 +2,7 @@
2
2
 
3
3
  require("@testing-library/jest-dom");
4
4
  var _react = require("@testing-library/react");
5
+ var _react2 = require("react");
5
6
  var _AsyncRenderChildren = _interopRequireDefault(require("../AsyncRenderChildren"));
6
7
  var _jsxRuntime = require("react/jsx-runtime");
7
8
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -12,7 +13,9 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
12
13
  function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
13
14
  var data = {};
14
15
  var Component = function Component(props) {
15
- data = props;
16
+ (0, _react2.useEffect)(function () {
17
+ data = props;
18
+ }, [props]);
16
19
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AsyncRenderChildren["default"], _objectSpread({}, props));
17
20
  };
18
21
  describe('AsyncRenderChildren', function () {
@@ -71,7 +71,8 @@ var DateTimeDecorator = exports.DateTimeDecorator = (0, _hoc["default"])(functio
71
71
  });
72
72
 
73
73
  // eslint-disable-next-line no-shadow
74
- var DateTimeDecorator = function DateTimeDecorator(props) {
74
+ var _DateTimeDecorator = function DateTimeDecorator(props) {
75
+ (0, _util.checkPropTypes)(_DateTimeDecorator, props);
75
76
  var newValue = toTime(props.value);
76
77
  var _useState = (0, _react.useState)(null),
77
78
  _useState2 = _slicedToArray(_useState, 2),
@@ -214,8 +215,8 @@ var DateTimeDecorator = exports.DateTimeDecorator = (0, _hoc["default"])(functio
214
215
  value: finalValue
215
216
  }));
216
217
  };
217
- DateTimeDecorator.displayName = 'DateTimeDecorator';
218
- DateTimeDecorator.propTypes = /** @lends limestone/internal/DateTimeDecorator.DateTimeDecorator.prototype */{
218
+ _DateTimeDecorator.displayName = 'DateTimeDecorator';
219
+ _DateTimeDecorator.propTypes = /** @lends limestone/internal/DateTimeDecorator.DateTimeDecorator.prototype */{
219
220
  /**
220
221
  * The current locale as a
221
222
  * {@link https://tools.ietf.org/html/rfc5646|BCP 47 language tag}.
@@ -263,6 +264,6 @@ var DateTimeDecorator = exports.DateTimeDecorator = (0, _hoc["default"])(functio
263
264
  return (0, _I18nDecorator.I18nContextDecorator)({
264
265
  rtlProp: 'rtl',
265
266
  localeProp: 'locale'
266
- }, (0, _Changeable["default"])(DateTimeDecorator));
267
+ }, (0, _Changeable["default"])(_DateTimeDecorator));
267
268
  });
268
269
  var _default = exports["default"] = DateTimeDecorator;