@enact/limestone 1.9.3 → 1.10.0

package/Slider/Slider.d.ts

@@ -24,6 +24,10 @@ input keys.
    * Sets the knob to selected state and allows it to move via 5-way controls.
    */
   active?: boolean;
+  /**
+   * Indicates if this component will be used as a colorPicker.
+   */
+  colorPicker?: boolean;
   /**
  * Customizes the component by mapping the supplied collection of CSS class names to the
 corresponding internal elements and states of this component.

package/Slider/Slider.js

@@ -36,7 +36,7 @@ var _SliderBehaviorDecorator = _interopRequireDefault(require("./SliderBehaviorD
 var _utils = require("./utils");
 var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["active", "className", "css", "disabled", "focused", "keyFrequency", "max", "min", "pressed", "showAnchor", "showMinMax"];
+var _excluded = ["active", "className", "colorPicker", "css", "disabled", "focused", "keyFrequency", "max", "min", "pressed", "showAnchor", "showMinMax"];
 /**
  * Provides Limestone-themed slider components and behaviors.
  *
@@ -66,6 +66,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 var sliderDefaultProps = {
   activateOnSelect: false,
   active: false,
+  colorPicker: false,
   disabled: false,
   keyFrequency: [1],
   max: 100,
@@ -86,10 +87,12 @@ var sliderDefaultProps = {
  * @ui
  * @public
  */
-var SliderBase = exports.SliderBase = function SliderBase(props) {
+var _SliderBase = exports.SliderBase = function SliderBase(props) {
   var sliderProps = (0, _util.setDefaultProps)(props, sliderDefaultProps);
+  (0, _util.checkPropTypes)(_SliderBase, sliderProps);
   var active = sliderProps.active,
     className = sliderProps.className,
+    colorPicker = sliderProps.colorPicker,
     css = sliderProps.css,
     disabled = sliderProps.disabled,
     focused = sliderProps.focused,
@@ -114,12 +117,13 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
     valueName: 'max'
   })(sliderProps);
   var tooltip = sliderProps.tooltip === true ? _ProgressBar2.ProgressBarTooltip : sliderProps.tooltip;
+  var context = (0, _react.useMemo)(function () {
+    return {
+      lastWheelTimeStamp: 0
+    };
+  }, []);
   var spotlightAccelerator = (0, _react.useRef)();
   var ref = (0, _react.useRef)();
-  var _useRef = (0, _react.useRef)({
-      lastWheelTimeStamp: 0
-    }),
-    context = _useRef.current;
   var handlers = (0, _useHandlers["default"])({
     onBlur: (0, _handle.handle)((0, _handle.forward)('onBlur'), (0, _handle.forProp)('active', true), (0, _handle.forward)('onActivate')),
     onKeyDown: (0, _handle.handle)((0, _handle.forProp)('disabled', false), (0, _handle.forwardWithPrevent)('onKeyDown'), (0, _anyPass["default"])([_utils.handleIncrement, _utils.handleDecrement])),
@@ -135,7 +139,7 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
     customCss: css,
     publicClassNames: true
   });
-  var componentClassName = (0, _classnames2["default"])(_SliderModule["default"].slider, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, mergedCss.active, active), mergedCss.hasMinMax, showMinMax), mergedCss.pressed, pressed), mergedCss.showAnchor, showAnchor), css && css.slider);
+  var componentClassName = (0, _classnames2["default"])(_SliderModule["default"].slider, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, mergedCss.active, active), mergedCss.colorPicker, colorPicker), mergedCss.hasMinMax, showMinMax), mergedCss.pressed, pressed), mergedCss.showAnchor, showAnchor), css && css.slider);
   (0, _react.useEffect)(function () {
     spotlightAccelerator.current = new _Accelerator["default"](keyFrequency);
   }, [keyFrequency]);
@@ -161,18 +165,30 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
   delete rest.step;
   delete rest.tooltip;
   delete rest.wheelInterval;
+  var sliderMax = colorPicker ? 360 : max;
+  var sliderMin = colorPicker ? 0 : min;
+  var sliderStep = colorPicker ? 1 : step;
+  var styleObject = {
+    '--semantic-color-surface-default-handle': "hsla(".concat(rest.value ? rest.value : 0, ", 100%, 50%, 1)"),
+    '--semantic-color-surface-default-focused': "hsla(".concat(rest.value ? rest.value : 0, ", 100%, 50%, 1)")
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], _objectSpread(_objectSpread(_objectSpread({}, rest), handlers), {}, {
     "aria-disabled": disabled,
+    colorPicker: colorPicker,
     className: componentClassName,
     css: mergedCss,
     disabled: disabled,
-    max: max,
-    min: min,
+    max: sliderMax,
+    min: sliderMin,
     progressBarComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBar["default"], {
-      css: mergedCss
+      css: mergedCss,
+      style: {
+        backgroundImage: colorPicker && (0, _utils.hueGradient)(rest.orientation)
+      }
     }),
     ref: ref,
-    step: step,
+    step: sliderStep,
+    style: colorPicker && styleObject,
     tooltipComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComponentOverride["default"], {
       component: tooltip,
       css: mergedCss,
@@ -181,15 +197,15 @@ var SliderBase = exports.SliderBase = function SliderBase(props) {
     minMaxComponent: showMinMax ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: mergedCss.minMax,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: min
+        children: sliderMin
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        children: max
+        children: sliderMax
       })]
     }) : null
   }));
 };
-SliderBase.displayName = 'Slider';
-SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
+_SliderBase.displayName = 'Slider';
+_SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
   /**
    * Activates the component when selected so that it may be manipulated via the directional
    * input keys.
@@ -205,6 +221,14 @@ SliderBase.propTypes = /** @lends limestone/Slider.SliderBase.prototype */{
    * @public
    */
   active: _propTypes["default"].bool,
+  /**
+   * Indicates if this component will be used as a colorPicker.
+   *
+   * @type {Boolean}
+   * @default false
+   * @public
+   */
+  colorPicker: _propTypes["default"].bool,
   /**
    * Customizes the component by mapping the supplied collection of CSS class names to the
    * corresponding internal elements and states of this component.
@@ -457,7 +481,7 @@ var SliderDecorator = exports.SliderDecorator = (0, _compose["default"])(_Pure["
  * @public
  */
 
-var Slider = exports.Slider = SliderDecorator(SliderBase);
+var Slider = exports.Slider = SliderDecorator(_SliderBase);
 Slider.defaultPropValues = sliderDefaultProps;
 
 /**

package/Slider/Slider.module.css

@@ -341,6 +341,31 @@ Motion Mixins
 :global(.spotlight-input-touch) .slider:global(.neutral).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+.slider:global(.neutral).colorPicker .bar,
+.slider:global(.neutral).colorPicker .fill,
+.slider:global(.neutral).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.neutral).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) .slider:global(.neutral).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) .slider:global(.neutral).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) .slider:global(.neutral).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) .slider:global(.neutral).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) .slider:global(.neutral).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.neutral).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.neutral).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) .slider:global(.neutral).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) .slider:global(.neutral).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) .slider:global(.neutral).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) .slider:global(.neutral).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 .slider:global(.neutral).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
@@ -486,6 +511,31 @@ Motion Mixins
 :global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+:global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker .bar,
+:global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker .fill,
+:global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 :global(.enact-a11y-high-contrast) .slider:global(.neutral):global(.highContrast).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
@@ -631,6 +681,31 @@ Motion Mixins
 :global(.spotlight-input-touch) .slider:global(.light).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+.slider:global(.light).colorPicker .bar,
+.slider:global(.light).colorPicker .fill,
+.slider:global(.light).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.light).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) .slider:global(.light).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) .slider:global(.light).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) .slider:global(.light).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) .slider:global(.light).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) .slider:global(.light).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.light).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.light).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) .slider:global(.light).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) .slider:global(.light).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) .slider:global(.light).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) .slider:global(.light).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 .slider:global(.light).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
@@ -781,6 +856,31 @@ Motion Mixins
 :global(.spotlight-input-touch) .slider:global(.game).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+.slider:global(.game).colorPicker .bar,
+.slider:global(.game).colorPicker .fill,
+.slider:global(.game).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) .slider:global(.game).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) .slider:global(.game).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) .slider:global(.game).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) .slider:global(.game).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) .slider:global(.game).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) .slider:global(.game).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 .slider:global(.game).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
@@ -930,6 +1030,31 @@ Motion Mixins
 :global(.spotlight-input-touch) :global(.green) .slider:global(.game).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+:global(.green) .slider:global(.game).colorPicker .bar,
+:global(.green) .slider:global(.game).colorPicker .fill,
+:global(.green) .slider:global(.game).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) :global(.green) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) :global(.green) .slider:global(.game).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 :global(.green) .slider:global(.game).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }
@@ -1079,6 +1204,31 @@ Motion Mixins
 :global(.spotlight-input-touch) :global(.orange) .slider:global(.game).noFill:global(.spottable):active.pressed .fill {
   background-color: transparent;
 }
+:global(.orange) .slider:global(.game).colorPicker .bar,
+:global(.orange) .slider:global(.game).colorPicker .fill,
+:global(.orange) .slider:global(.game).colorPicker .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .bar,
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .fill,
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .load,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-key) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before,
+:global(.spotlight-input-mouse) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):focus .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):active .bar,
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):active .fill,
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):active .load {
+  background-color: transparent;
+}
+:global(.spotlight-input-touch) :global(.orange) .slider:global(.game).colorPicker:global(.spottable):active .knob::before {
+  border-color: var(--semantic-color-surface-white);
+}
 :global(.orange) .slider:global(.game).showAnchor .progressBar::after {
   background-color: color(from var(--semantic-color-surface-default-track) srgb r g b / 0.7);
 }

package/Slider/SliderBehaviorDecorator.js

@@ -56,8 +56,9 @@ var SliderBehaviorDecorator = exports.SliderBehaviorDecorator = (0, _hoc["defaul
   var emitSpotlightEvents = config.emitSpotlightEvents;
 
   // eslint-disable-next-line no-shadow
-  var SliderBehaviorDecorator = function SliderBehaviorDecorator(props) {
+  var _SliderBehaviorDecorator = function SliderBehaviorDecorator(props) {
     var sliderBehaviorProps = (0, _util.setDefaultProps)(props, sliderBehaviorDefaultProps);
+    (0, _util.checkPropTypes)(_SliderBehaviorDecorator, sliderBehaviorProps);
     var paused = (0, _react.useMemo)(function () {
       return new _Pause["default"]();
     }, []);
@@ -81,12 +82,10 @@ var SliderBehaviorDecorator = exports.SliderBehaviorDecorator = (0, _hoc["defaul
       _useState0 = _slicedToArray(_useState9, 2),
       prevValue = _useState0[0],
       setPrevValue = _useState0[1];
-    (0, _react.useEffect)(function () {
-      if (sliderBehaviorProps.value !== prevValue) {
-        setUseHintText(false);
-        setPrevValue(sliderBehaviorProps.value);
-      }
-    }, [prevValue, sliderBehaviorProps.value]);
+    if (sliderBehaviorProps.value && sliderBehaviorProps.value !== prevValue) {
+      setUseHintText(false);
+      setPrevValue(sliderBehaviorProps.value);
+    }
     (0, _react.useEffect)(function () {
       return function () {
         paused.resume();
@@ -95,19 +94,22 @@ var SliderBehaviorDecorator = exports.SliderBehaviorDecorator = (0, _hoc["defaul
 
     var getValueText = (0, _react.useCallback)(function () {
       var ariaValueText = sliderBehaviorProps['aria-valuetext'],
+        colorPicker = sliderBehaviorProps.colorPicker,
         max = sliderBehaviorProps.max,
         min = sliderBehaviorProps.min,
         orientation = sliderBehaviorProps.orientation,
         _sliderBehaviorProps$ = sliderBehaviorProps.value,
         value = _sliderBehaviorProps$ === void 0 ? min : _sliderBehaviorProps$;
+      var sliderMax = colorPicker ? 360 : max;
+      var sliderMin = colorPicker ? 0 : min;
       var valueText = ariaValueText != null ? ariaValueText : value;
       var verticalHint = "".concat(new _IString["default"]((0, _$L["default"])('From {startValue} to {lastValue}')).format({
-        startValue: min,
-        lastValue: max
+        startValue: sliderMin,
+        lastValue: sliderMax
       }), " ").concat(valueText, " ").concat((0, _$L["default"])('change a value with up down button'));
       var horizontalHint = "".concat(new _IString["default"]((0, _$L["default"])('From {startValue} to {lastValue}')).format({
-        startValue: min,
-        lastValue: max
+        startValue: sliderMin,
+        lastValue: sliderMax
       }), " ").concat(valueText, " ").concat((0, _$L["default"])('change a value with left right button'));
       if (useHintText) {
         return orientation === 'horizontal' ? horizontalHint : verticalHint;
@@ -170,8 +172,8 @@ var SliderBehaviorDecorator = exports.SliderBehaviorDecorator = (0, _hoc["defaul
       onFocus: handleFocus
     }));
   };
-  SliderBehaviorDecorator.displayName = 'SliderBehaviorDecorator';
-  SliderBehaviorDecorator.propTypes = {
+  _SliderBehaviorDecorator.displayName = 'SliderBehaviorDecorator';
+  _SliderBehaviorDecorator.propTypes = {
     activateOnSelect: _propTypes["default"].bool,
     'aria-valuetext': _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     max: _propTypes["default"].number,
@@ -179,6 +181,6 @@ var SliderBehaviorDecorator = exports.SliderBehaviorDecorator = (0, _hoc["defaul
     orientation: _propTypes["default"].string,
     value: _propTypes["default"].number
   };
-  return SliderBehaviorDecorator;
+  return _SliderBehaviorDecorator;
 });
 var _default = exports["default"] = SliderBehaviorDecorator;

package/Slider/tests/Slider-specs.js

@@ -111,6 +111,32 @@ describe('Slider', function () {
     var expectedValue = '11';
     expect(slider).toHaveAttribute(expectedAttribute, expectedValue);
   });
+  test('should be pressed when selected', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {}));
+    var slider = _react.screen.getByRole('slider');
+
+    // Select by key
+    _react.fireEvent.keyDown(slider, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(slider).toHaveClass('pressed');
+    _react.fireEvent.keyUp(slider, {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      which: 13
+    });
+    expect(slider).not.toHaveClass('pressed');
+
+    // Select by pointer
+    _react.fireEvent.mouseDown(slider);
+    expect(slider).toHaveClass('pressed');
+    _react.fireEvent.mouseUp(slider);
+    expect(slider).not.toHaveClass('pressed');
+  });
   test('should activate the slider on enter keyup', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
       activateOnSelect: true
@@ -571,4 +597,29 @@ describe('Slider', function () {
     var tooltip = _react.screen.queryByText('0');
     expect(tooltip).toBeNull();
   });
+  test('should apply `colorPicker`', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
+      colorPicker: true
+    }));
+    var slider = _react.screen.getByRole('slider');
+    var expected = 'colorPicker';
+    expect(slider).toHaveClass(expected);
+  });
+  test('should fire `onChange` with `onChange` type when value changed for `colorPicker`', function () {
+    var handleChange = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Slider["default"], {
+      activateOnSelect: true,
+      colorPicker: true,
+      defaultValue: 50,
+      onChange: handleChange
+    }));
+    var slider = _react.screen.getByRole('slider');
+    activate(slider);
+    leftKeyDown(slider);
+    var expected = {
+      type: 'onChange'
+    };
+    var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
 });

package/Slider/utils.js

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.handleIncrementByWheel = exports.handleIncrement = exports.handleDecrementByWheel = exports.handleDecrement = exports.forwardSpotlightEvents = exports.emitChange = void 0;
+exports.hueGradient = exports.handleIncrementByWheel = exports.handleIncrement = exports.handleDecrementByWheel = exports.handleDecrement = exports.forwardSpotlightEvents = exports.emitChange = void 0;
 var _handle = require("@enact/core/handle");
 var _keymap = require("@enact/core/keymap");
 var _util = require("@enact/core/util");
 var _utils = require("@enact/ui/Slider/utils");
+var hueGradient = exports.hueGradient = function hueGradient(orientation) {
+  return "linear-gradient(".concat(orientation === 'horizontal' ? 'to right' : 'to top', ", \n\thsla(0, 100%, 50%, 1),\n\thsla(10, 100%, 50%, 1),\n\thsla(20, 100%, 50%, 1),\n\thsla(30, 100%, 50%, 1),\n\thsla(40, 100%, 50%, 1),\n\thsla(50, 100%, 50%, 1),\n\thsla(60, 100%, 50%, 1),\n\thsla(70, 100%, 50%, 1),\n\thsla(80, 100%, 50%, 1),\n\thsla(90, 100%, 50%, 1),\n\thsla(100, 100%, 50%, 1),\n\thsla(110, 100%, 50%, 1),\n\thsla(120, 100%, 50%, 1),\n\thsla(130, 100%, 50%, 1),\n\thsla(140, 100%, 50%, 1),\n\thsla(150, 100%, 50%, 1),\n\thsla(160, 100%, 50%, 1),\n\thsla(170, 100%, 50%, 1),\n\thsla(180, 100%, 50%, 1),\n\thsla(190, 100%, 50%, 1),\n\thsla(200, 100%, 50%, 1),\n\thsla(210, 100%, 50%, 1),\n\thsla(220, 100%, 50%, 1),\n\thsla(230, 100%, 50%, 1),\n\thsla(240, 100%, 50%, 1),\n\thsla(250, 100%, 50%, 1),\n\thsla(260, 100%, 50%, 1),\n\thsla(270, 100%, 50%, 1),\n\thsla(280, 100%, 50%, 1),\n\thsla(290, 100%, 50%, 1),\n\thsla(300, 100%, 50%, 1),\n\thsla(310, 100%, 50%, 1),\n\thsla(320, 100%, 50%, 1),\n\thsla(330, 100%, 50%, 1),\n\thsla(340, 100%, 50%, 1),\n\thsla(350, 100%, 50%, 1),\n\thsla(360, 100%, 50%, 1))");
+};
 var nop = function nop() {};
 var handleAcceleratedKeyDown = function handleAcceleratedKeyDown(ev, prop, _ref) {
   var spotlightAccelerator = _ref.current;
@@ -73,17 +76,30 @@ var checkInterval = function checkInterval(ev, _ref0, context) {
 };
 var emitChange = exports.emitChange = function emitChange(direction) {
   return (0, _handle.forwardCustom)('onChange', function (ev, _ref1) {
-    var knobStep = _ref1.knobStep,
+    var colorPicker = _ref1.colorPicker,
+      knobStep = _ref1.knobStep,
       max = _ref1.max,
       min = _ref1.min,
       step = _ref1.step,
       _ref1$value = _ref1.value,
       value = _ref1$value === void 0 ? min : _ref1$value;
-    var newValue = (0, _util.clamp)(min, max, value + calcStep(knobStep, step) * direction);
-    return {
-      value: newValue,
-      proportion: (0, _utils.calcProportion)(min, max, newValue)
-    };
+    if (colorPicker) {
+      var newValue = (0, _util.clamp)(0, 360, value + calcStep(knobStep, step) * direction);
+      return {
+        value: newValue,
+        proportion: (0, _utils.calcProportion)(min, max, newValue),
+        color: {
+          hex: (0, _utils.hslToHex)(value),
+          hsl: "hsla(".concat(value, ", 100%, 50%, 1)")
+        }
+      };
+    } else {
+      var _newValue = (0, _util.clamp)(min, max, value + calcStep(knobStep, step) * direction);
+      return {
+        value: _newValue,
+        proportion: (0, _utils.calcProportion)(min, max, _newValue)
+      };
+    }
   });
 };
 var isActive = function isActive(ev, props) {

package/Spinner/Spinner.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.SpinnerDecorator = exports.SpinnerBase = exports.Spinner = void 0;
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
 var _hoc = _interopRequireDefault(require("@enact/core/hoc"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _util = require("@enact/core/util");
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+var _Pause = _interopRequireDefault(require("@enact/spotlight/Pause"));
 var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _Spinner = _interopRequireDefault(require("@enact/ui/Spinner"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _compose = _interopRequireDefault(require("ramda/src/compose"));
 var _react = require("react");
-var _Pause = _interopRequireDefault(require("@enact/spotlight/Pause"));
-var _Spinner = _interopRequireDefault(require("@enact/ui/Spinner"));
-var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _$L = _interopRequireDefault(require("../internal/$L"));
 var _Marquee = _interopRequireDefault(require("../Marquee"));
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
@@ -191,7 +192,8 @@ var SpinnerBase = exports.SpinnerBase = (0, _kind["default"])({
  * @private
  */
 var SpinnerSpotlightDecorator = (0, _hoc["default"])(function (config, Wrapped) {
-  var SpinnerSpotlight = function SpinnerSpotlight(props) {
+  var _SpinnerSpotlight = function SpinnerSpotlight(props) {
+    (0, _util.checkPropTypes)(_SpinnerSpotlight, props);
     var paused = (0, _react.useMemo)(function () {
       return new _Pause["default"]('Spinner');
     }, []);
@@ -213,8 +215,8 @@ var SpinnerSpotlightDecorator = (0, _hoc["default"])(function (config, Wrapped)
     }, [blockClickOn, paused]);
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapped, _objectSpread({}, props));
   };
-  SpinnerSpotlight.displayName = 'SpinnerSpotlightDecorator';
-  SpinnerSpotlight.propTypes = /** @lends limestone/Spinner.Spinner.prototype */{
+  _SpinnerSpotlight.displayName = 'SpinnerSpotlightDecorator';
+  _SpinnerSpotlight.propTypes = /** @lends limestone/Spinner.Spinner.prototype */{
     /**
      * Determines how far the click-blocking should extend.
      *
@@ -227,7 +229,7 @@ var SpinnerSpotlightDecorator = (0, _hoc["default"])(function (config, Wrapped)
      */
     blockClickOn: _propTypes["default"].oneOf(['screen', 'container', null])
   };
-  return SpinnerSpotlight;
+  return _SpinnerSpotlight;
 });
 
 /**

package/TabLayout/RefocusDecorator.js

@@ -5,13 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getNavigableFilter = exports["default"] = exports.RefocusDecorator = void 0;
 exports.getTabsSpotlightId = getTabsSpotlightId;
+var _util = require("@enact/core/util");
 var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
 var _IdProvider = require("@enact/ui/internal/IdProvider");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _TabGroupModule = _interopRequireDefault(require("./TabGroup.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["blockCollapseOnPortrait", "blockExpandOnLandscape", "collapsed", "index", "onCollapse", "onExpand", "onTabAnimationEnd", "orientation", "spotlightId"];
+var _excluded = ["blockCollapseOnPortrait", "blockExpandOnLandscape", "collapsed", "index", "onCollapse", "onExpand", "onTabAnimationEnd", "orientation"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -60,17 +61,18 @@ function useScreenOrientation() {
 }
 var RefocusDecorator = exports.RefocusDecorator = function RefocusDecorator(Wrapped) {
   // eslint-disable-next-line no-shadow
-  function RefocusDecorator(_ref) {
-    var blockCollapseOnPortrait = _ref.blockCollapseOnPortrait,
-      blockExpandOnLandscape = _ref.blockExpandOnLandscape,
-      collapsed = _ref.collapsed,
-      index = _ref.index,
-      onCollapse = _ref.onCollapse,
-      onExpand = _ref.onExpand,
-      onTabAnimationEnd = _ref.onTabAnimationEnd,
-      orientation = _ref.orientation,
-      spotlightId = _ref.spotlightId,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  function RefocusDecorator(props) {
+    (0, _util.checkPropTypes)(RefocusDecorator, props);
+    var blockCollapseOnPortrait = props.blockCollapseOnPortrait,
+      blockExpandOnLandscape = props.blockExpandOnLandscape,
+      collapsed = props.collapsed,
+      index = props.index,
+      onCollapse = props.onCollapse,
+      onExpand = props.onExpand,
+      onTabAnimationEnd = props.onTabAnimationEnd,
+      orientation = props.orientation,
+      rest = _objectWithoutProperties(props, _excluded);
+    var spotlightId = props.spotlightId;
     var _useId = (0, _IdProvider.useId)({
         prefix: 'lime-tablayout-'
       }),

package/TabLayout/tests/TabGroup-specs.js

@@ -181,7 +181,7 @@ describe('TabGroup specs', function () {
     expect(handleFocusTab).toHaveBeenCalled();
   });
   test('should set the size for all tabs in horizontal orientation', function () {
-    var size = 456;
+    var size = 'small';
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TabGroup["default"], {
       orientation: "horizontal",
       size: size,