@enact/limestone 1.9.3 → 1.10.1

package/internal/Panels/PanelsRouter.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.PanelsRouter = exports.PanelsContext = void 0;
-var _react = require("react");
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _useChainRefs = _interopRequireDefault(require("@enact/core/useChainRefs"));
+var _util = require("@enact/core/util");
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
 var _useAutoFocus = _interopRequireDefault(require("./useAutoFocus"));
 var _useFocusOnTransition2 = _interopRequireDefault(require("./useFocusOnTransition"));
 var _useToggleRole2 = _interopRequireDefault(require("./useToggleRole"));
@@ -36,18 +37,20 @@ var PanelsContext = exports.PanelsContext = /*#__PURE__*/(0, _react.createContex
 function useReverseTransition() {
   var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
   var rtl = arguments.length > 1 ? arguments[1] : undefined;
-  var prevIndex = (0, _react.useRef)(index);
-  var reverse = (0, _react.useRef)(rtl);
+  var prevIndex = (0, _util.usePrevious)(index);
+
   // If the index was changed, the panel transition occurs on the next cycle by `Panel`
-  var prev = {
-    reverseTransition: reverse.current,
-    prevIndex: prevIndex.current
-  };
-  if (prevIndex.current !== index) {
-    reverse.current = rtl ? index > prevIndex.current : index < prevIndex.current;
-    prevIndex.current = index;
+  if (prevIndex !== index) {
+    var reverse = rtl ? index > prevIndex : index < prevIndex;
+    return {
+      reverseTransition: reverse,
+      prevIndex: index
+    };
   }
-  return prev;
+  return {
+    reverseTransition: rtl,
+    prevIndex: index
+  };
 }
 var defaultConfig = {
   type: 'wizard'
@@ -66,22 +69,25 @@ var defaultConfig = {
  * @private
  */
 var PanelsRouter = exports.PanelsRouter = (0, _hoc["default"])(defaultConfig, function (config, Wrapped) {
-  var PanelsProvider = function PanelsProvider(_ref) {
-    var _ref$autoFocus = _ref.autoFocus,
-      autoFocus = _ref$autoFocus === void 0 ? 'default-element' : _ref$autoFocus,
-      children = _ref.children,
-      componentRef = _ref.componentRef,
-      spotlightId = _ref['data-spotlight-id'],
-      _ref$index = _ref.index,
-      index = _ref$index === void 0 ? 0 : _ref$index,
-      onTransition = _ref.onTransition,
-      onWillTransition = _ref.onWillTransition,
-      rtl = _ref.rtl,
-      _ref$subtitle = _ref.subtitle,
-      subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? '' : _ref$title,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  var _PanelsProvider = function PanelsProvider(props) {
+    var panelsProviderProps = (0, _util.setDefaultProps)(props, {
+      autoFocus: 'default-element',
+      index: 0,
+      subtitle: '',
+      title: ''
+    });
+    (0, _util.checkPropTypes)(_PanelsProvider, panelsProviderProps);
+    var autoFocus = panelsProviderProps.autoFocus,
+      children = panelsProviderProps.children,
+      componentRef = panelsProviderProps.componentRef,
+      spotlightId = panelsProviderProps['data-spotlight-id'],
+      index = panelsProviderProps.index,
+      onTransition = panelsProviderProps.onTransition,
+      onWillTransition = panelsProviderProps.onWillTransition,
+      rtl = panelsProviderProps.rtl,
+      subtitle = panelsProviderProps.subtitle,
+      title = panelsProviderProps.title,
+      rest = _objectWithoutProperties(panelsProviderProps, _excluded);
     var _useState = (0, _react.useState)(null),
       _useState2 = _slicedToArray(_useState, 2),
       panel = _useState2[0],
@@ -140,7 +146,7 @@ var PanelsRouter = exports.PanelsRouter = (0, _hoc["default"])(defaultConfig, fu
       }))]
     });
   };
-  PanelsProvider.propTypes = /** @lends limestone/internal/Panels.PanelsRouter.prototype */{
+  _PanelsProvider.propTypes = /** @lends limestone/internal/Panels.PanelsRouter.prototype */{
     /**
      * Sets the strategy used to automatically focus an element within the Panels upon render.
      * When set to 'none', focus is not set only on the first render.
@@ -229,6 +235,6 @@ var PanelsRouter = exports.PanelsRouter = (0, _hoc["default"])(defaultConfig, fu
     */
     title: _propTypes2["default"].string
   };
-  return PanelsProvider;
+  return _PanelsProvider;
 });
 var _default = exports["default"] = PanelsRouter;

package/internal/Panels/useAutoFocus.js

@@ -8,6 +8,7 @@ exports.useAutoFocus = useAutoFocus;
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _useChainRefs = _interopRequireDefault(require("@enact/core/useChainRefs"));
+var _util = require("@enact/core/util");
 var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
@@ -69,12 +70,15 @@ function useAutoFocus(_ref) {
 }
 var AutoFocusDecorator = exports.AutoFocusDecorator = (0, _hoc["default"])(function (config, Wrapped) {
   // eslint-disable-next-line no-shadow
-  function AutoFocusDecorator(_ref2) {
-    var _ref2$autoFocus = _ref2.autoFocus,
-      autoFocus = _ref2$autoFocus === void 0 ? 'last-focused' : _ref2$autoFocus,
-      componentRef = _ref2.componentRef,
-      hideChildren = _ref2.hideChildren,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+  function AutoFocusDecorator(props) {
+    var autoFocusDecoratorProps = (0, _util.setDefaultProps)(props, {
+      autoFocus: 'last-focused'
+    });
+    (0, _util.checkPropTypes)(AutoFocusDecorator, autoFocusDecoratorProps);
+    var autoFocus = autoFocusDecoratorProps.autoFocus,
+      componentRef = autoFocusDecoratorProps.componentRef,
+      hideChildren = autoFocusDecoratorProps.hideChildren,
+      rest = _objectWithoutProperties(autoFocusDecoratorProps, _excluded);
     var hook = useAutoFocus({
       autoFocus: autoFocus,
       hideChildren: hideChildren

package/internal/Panels/useFocusOnTransition.js

@@ -33,10 +33,11 @@ var transitionHandlers = {
   })
 };
 function useFocusOnTransition(config) {
-  var _useRef = (0, _react.useRef)({
+  var current = (0, _react.useMemo)(function () {
+    return {
       timerId: null
-    }),
-    current = _useRef.current;
+    };
+  }, []);
   var handlers = (0, _useHandlers["default"])(transitionHandlers, config, {
     current: current
   });

package/internal/Picker/Picker.js

@@ -63,14 +63,15 @@ var isEnter = (0, _keymap.is)('enter');
 var isLeft = (0, _keymap.is)('left');
 var isRight = (0, _keymap.is)('right');
 var isUp = (0, _keymap.is)('up');
-var DivComponent = function DivComponent(_ref) {
-  var ref = _ref.ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var _DivComponent = function DivComponent(props) {
+  (0, _util.checkPropTypes)(_DivComponent, props);
+  var ref = props.ref,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
     ref: ref
   }, rest));
 };
-DivComponent.propTypes = {
+_DivComponent.propTypes = {
   /**
    * Called with the reference to the current node.
    *
@@ -79,7 +80,7 @@ DivComponent.propTypes = {
    */
   ref: _propTypes["default"].ref
 };
-var Div = (0, _Touchable["default"])(DivComponent);
+var Div = (0, _Touchable["default"])(_DivComponent);
 var SpottableDiv = (0, _Touchable["default"])((0, _ForwardRef["default"])({
   prop: 'containerRef'
 }, _SpottablePicker["default"]));
@@ -118,6 +119,7 @@ var allowedClassNames = ['picker', 'valueWrapper', 'joined', 'horizontal', 'vert
  * @private
  */
 var _PickerBase = function PickerBase(props) {
+  (0, _util.checkPropTypes)(_PickerBase, props);
   // Set to `true` onFocus and `false` onBlur to prevent setting aria-valuetext (which
   // will notify the user) when the component does not have focus
   var _useState = (0, _react.useState)(false),

package/internal/Picker/Picker.module.css

@@ -212,6 +212,28 @@
 .picker.large .valueWrapper {
   width: 9.75rem;
 }
+.picker:global(.largeText) .valueWrapper {
+  font-size: var(--primitive-font-size-66);
+  height: 1.75rem;
+  line-height: 1.75rem;
+}
+.picker:global(.largeText).joined .valueWrapper {
+  line-height: 1.75rem;
+}
+.picker:global(.largeText).joined.horizontal:not(.arrow) .valueWrapper {
+  font-size: var(--primitive-font-size-80);
+  height: 2.29167rem;
+  line-height: 2.29167rem;
+}
+.picker:global(.largeText).joined.horizontal:not(.arrow) .indicatorContainer .indicator {
+  width: calc(0.5rem * 1.2);
+  height: calc(0.5rem * 1.2);
+}
+.picker:global(.largeText).joined.vertical .valueWrapper {
+  font-size: var(--primitive-font-size-80);
+  height: 2.29167rem;
+  line-height: 2.29167rem;
+}
 .picker:global(.neutral) {
   color: var(--semantic-color-on-background-main);
 }

package/internal/Picker/SpottablePicker.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.SpottablePicker = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _util = require("@enact/core/util");
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
@@ -19,17 +20,18 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-var DivComponent = function DivComponent(_ref) {
-  var innerRef = _ref.innerRef,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var _DivComponent = function DivComponent(props) {
+  (0, _util.checkPropTypes)(_DivComponent, props);
+  var innerRef = props.innerRef,
+    rest = _objectWithoutProperties(props, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
     ref: innerRef
   }));
 };
-DivComponent.propTypes = {
+_DivComponent.propTypes = {
   innerRef: _propTypes["default"].ref
 };
-var Div = (0, _Spottable["default"])(DivComponent);
+var Div = (0, _Spottable["default"])(_DivComponent);
 var SpottablePicker = exports.SpottablePicker = (0, _kind["default"])({
   name: 'SpottablePicker',
   propTypes: {
@@ -39,18 +41,18 @@ var SpottablePicker = exports.SpottablePicker = (0, _kind["default"])({
     pickerOrientation: _propTypes2["default"].string
   },
   computed: {
-    selectionKeys: function selectionKeys(_ref2) {
-      var changedBy = _ref2.changedBy,
-        disabled = _ref2.disabled,
-        pickerOrientation = _ref2.pickerOrientation;
+    selectionKeys: function selectionKeys(_ref) {
+      var changedBy = _ref.changedBy,
+        disabled = _ref.disabled,
+        pickerOrientation = _ref.pickerOrientation;
       if (disabled || pickerOrientation === 'horizontal' && changedBy === 'enter') return;
       return pickerOrientation === 'horizontal' ? [37, 39] : [38, 40];
     }
   },
-  render: function render(_ref3) {
-    var containerRef = _ref3.containerRef,
-      selectionKeys = _ref3.selectionKeys,
-      rest = _objectWithoutProperties(_ref3, _excluded2);
+  render: function render(_ref2) {
+    var containerRef = _ref2.containerRef,
+      selectionKeys = _ref2.selectionKeys,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
     delete rest.changedBy;
     delete rest.pickerOrientation;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Div, _objectSpread(_objectSpread({

package/internal/SharedStateDecorator/SharedStateDecorator.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.SharedStateDecorator = exports.SharedState = void 0;
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
+var _util = require("@enact/core/util");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -60,7 +61,8 @@ var SharedStateDecorator = exports.SharedStateDecorator = (0, _hoc["default"])(d
     updateOnMount = config.updateOnMount;
 
   // eslint-disable-next-line no-shadow
-  var SharedStateDecorator = function SharedStateDecorator(props) {
+  var _SharedStateDecorator = function SharedStateDecorator(props) {
+    (0, _util.checkPropTypes)(_SharedStateDecorator, props);
     var context = (0, _react.useContext)(SharedState);
     var data = (0, _react.useRef)({});
     var _useState = (0, _react.useState)(false),
@@ -128,8 +130,8 @@ var SharedStateDecorator = exports.SharedStateDecorator = (0, _hoc["default"])(d
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, wrappedComponentProps))
     });
   };
-  SharedStateDecorator.displayName = 'SharedStateDecorator';
-  SharedStateDecorator.propTypes = {
+  _SharedStateDecorator.displayName = 'SharedStateDecorator';
+  _SharedStateDecorator.propTypes = {
     /**
      * Prevents the component from setting or restoring any framework shared state.
      *
@@ -139,6 +141,6 @@ var SharedStateDecorator = exports.SharedStateDecorator = (0, _hoc["default"])(d
      */
     noSharedState: _propTypes["default"].bool
   };
-  return SharedStateDecorator;
+  return _SharedStateDecorator;
 });
 var _default = exports["default"] = SharedStateDecorator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enact/limestone",
-  "version": "1.9.3",
+  "version": "1.10.1",
   "description": "Large-screen/TV support library for Enact, containing a variety of UI components.",
   "repository": {
     "type": "git",
@@ -39,20 +39,20 @@
     "screenTypes": "ThemeDecorator/screenTypes.json"
   },
   "dependencies": {
-    "@enact/core": "^5.4.3",
-    "@enact/i18n": "^5.4.3",
-    "@enact/spotlight": "^5.4.3",
-    "@enact/ui": "^5.4.3",
-    "@enact/webos": "^5.4.3",
-    "@enovaui/core-tokens": "^0.14.0",
-    "@enovaui/webos-tokens": "^0.14.0",
+    "@enact/core": "^5.5.1",
+    "@enact/i18n": "^5.5.1",
+    "@enact/spotlight": "^5.5.1",
+    "@enact/ui": "^5.5.1",
+    "@enact/webos": "^5.5.1",
+    "@enovaui/core-tokens": "^2.0.0",
+    "@enovaui/webos-tokens": "^2.0.0",
     "classnames": "^2.5.1",
-    "ilib": "^14.21.3",
+    "ilib": "^14.22.0",
     "invariant": "^2.2.4",
     "prop-types": "^15.8.1",
     "ramda": "^0.32.0",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "warning": "^4.0.3"
   },
   "peerDependencies": {
@@ -60,7 +60,10 @@
   },
   "overrides": {
     "autolinker": "^4.0.0",
-    "vue-template-compiler": "@vue/compiler-sfc@3.4.31"
+    "vue-template-compiler": "@vue/compiler-sfc@3.4.31",
+    "prop-types": {
+      "react-is": "^19.2.3"
+    }
   },
   "devDependencies": {
     "@enact/docs-utils": "^0.4.17",

package/styles/colors.less

@@ -374,6 +374,7 @@
 @lime-slider-track-active-color: var(--semantic-color-surface-accent);
 @lime-slider-track-active-focused-color: var(--semantic-color-surface-accent);
 @lime-slider-handle-color: var(--semantic-color-surface-default-handle);
+@lime-slider-handle-colorPicker-focused-color: var(--semantic-color-surface-white);
 @lime-slider-handle-border-color: transparent;
 @lime-slider-handle-focused-border-color: @lime-slider-handle-border-color;
 @lime-slider-handle-focused-color: var(--semantic-color-surface-default-focused);