@enact/limestone 1.3.0

package/ColorPicker/tests/ColorPicker-specs.js

@@ -0,0 +1,225 @@
+"use strict";
+
+var _FloatingLayer = require("@enact/ui/FloatingLayer");
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _ColorPicker = _interopRequireDefault(require("../ColorPicker"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+var FloatingLayerController = (0, _FloatingLayer.FloatingLayerDecorator)('div');
+var changeSliderValueByKey = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(function* (element, steps, decrease) {
+    var keyCode = decrease ? 37 : 39;
+    yield _react.fireEvent.mouseOver(element);
+    for (var i = 0; i < steps; i++) {
+      yield _react.fireEvent.keyDown(element, {
+        keyCode: keyCode
+      });
+    }
+  });
+  return function changeSliderValueByKey(_x, _x2, _x3) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var sliderValues = function sliderValues(elements) {
+  var values = [];
+  elements.forEach(function (element) {
+    values.push(element.getAttribute('aria-valuetext'));
+  });
+  return values;
+};
+describe('ColorPicker', function () {
+  afterEach(function () {
+    jest.clearAllMocks();
+  });
+  test('should open and close ColorPicker popup', /*#__PURE__*/_asyncToGenerator(function* () {
+    var closeButtonText = '󯿵';
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {})
+    }));
+    var colorPickerButton = _react.screen.getByRole('button');
+    yield user.click(colorPickerButton);
+    var closeButton = _react.screen.queryByText(closeButtonText);
+    expect(closeButton).not.toBeNull();
+    yield user.click(closeButton);
+    expect(_react.screen.queryByText(closeButtonText)).toBeNull();
+  }));
+  test('should not open ColorPicker popup if disabled is set to true', /*#__PURE__*/_asyncToGenerator(function* () {
+    var closeButtonText = '󯿵';
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
+        disabled: true
+      })
+    }));
+    var colorPickerButton = _react.screen.getByRole('button');
+    yield user.click(colorPickerButton);
+    var closeButton = _react.screen.queryByText(closeButtonText);
+    expect(closeButton).toBeNull();
+  }));
+  test('should have the text set', /*#__PURE__*/_asyncToGenerator(function* () {
+    var text = 'Color Picker';
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
+        text: text
+      })
+    }));
+    var colorPickerText = _react.screen.queryByText(text);
+    expect(colorPickerText).not.toBeNull();
+    yield user.click(colorPickerText);
+    var popupText = _react.screen.queryAllByText(text)[1];
+    expect(popupText).not.toBeUndefined();
+  }));
+  test('should have the color set', /*#__PURE__*/_asyncToGenerator(function* () {
+    var color = '#00FF00';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
+        color: color
+      })
+    }));
+    var expected = "background-image: ".concat(color);
+    var colorPickerButton = _react.screen.getByRole('button');
+    expect(colorPickerButton).toHaveStyle(expected);
+  }));
+  test('should have the presetColors', /*#__PURE__*/_asyncToGenerator(function* () {
+    var presetColors = ['#FF0000', '#00FF00', '#0000FF'];
+    var presetColorsRGB = ['rgb(255, 0, 0)', 'rgb(0, 255, 0)', 'rgb(0, 0, 255)'];
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
+        presetColors: presetColors
+      })
+    }));
+    var colorPickerButton = _react.screen.getByRole('button');
+    yield user.click(colorPickerButton);
+    var buttons = _react.screen.getAllByRole('button');
+    var buttonsWithSpecificStyle = buttons.filter(function (element) {
+      var compoundStyle = window.getComputedStyle(element);
+      return presetColorsRGB.find(function (color) {
+        return color === compoundStyle.getPropertyValue('background-color');
+      });
+    });
+    expect(buttonsWithSpecificStyle.length).toEqual(presetColors.length);
+  }));
+  test('should emit an colorHandler event when select color from presetColors', /*#__PURE__*/_asyncToGenerator(function* () {
+    var color = '#FFFFFF';
+    var colorHandler = jest.fn();
+    var presetColors = ['#FF0000'];
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
+        color: color,
+        colorHandler: colorHandler,
+        presetColors: presetColors
+      })
+    }));
+    var colorPickerButton = _react.screen.getByRole('button');
+    yield user.click(colorPickerButton);
+    var button = _react.screen.getAllByRole('button')[2];
+    Object.defineProperty(button, 'offsetParent', {
+      value: {
+        id: presetColors[0]
+      }
+    });
+    yield user.click(button);
+    expect(colorHandler).toHaveBeenCalled();
+  }));
+  test('should change color when hue, saturation and lightness sliders values changed', /*#__PURE__*/_asyncToGenerator(function* () {
+    var color = '#00FF00';
+    var colorHandler = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPicker["default"], {
+        color: color,
+        colorHandler: colorHandler
+      })
+    }));
+    var colorPickerButton = _react.screen.getByRole('button');
+    yield user.click(colorPickerButton);
+    var sliders = _react.screen.getAllByRole('slider');
+    var _sliderValues = sliderValues(sliders),
+      _sliderValues2 = _slicedToArray(_sliderValues, 3),
+      hue = _sliderValues2[0],
+      saturation = _sliderValues2[1],
+      lightness = _sliderValues2[2];
+    yield changeSliderValueByKey(sliders[0], 30);
+    _react.fireEvent.blur(sliders[0]);
+    yield changeSliderValueByKey(sliders[1], 30, true);
+    _react.fireEvent.blur(sliders[1]);
+    yield changeSliderValueByKey(sliders[2], 30, true);
+    _react.fireEvent.blur(sliders[2]);
+    var _sliderValues3 = sliderValues(sliders),
+      _sliderValues4 = _slicedToArray(_sliderValues3, 3),
+      changedHue = _sliderValues4[0],
+      changedSaturation = _sliderValues4[1],
+      changedLightness = _sliderValues4[2];
+    expect(hue).not.toEqual(changedHue);
+    expect(saturation).not.toEqual(changedSaturation);
+    expect(lightness).not.toEqual(changedLightness);
+  }));
+
+  // Utility functions
+  test('should return hsl from hex color if length is 4', function () {
+    var hexBlueColor = '#00F';
+    var hexGreenColor = '#0F0';
+    var hexPinkColor = '#F9A';
+    var hexRedColor = '#F00';
+    var hslBlueColor = (0, _utils.hexToHSL)(hexBlueColor);
+    var hslGreenColor = (0, _utils.hexToHSL)(hexGreenColor);
+    var hslPinkColor = (0, _utils.hexToHSL)(hexPinkColor);
+    var hslRedColor = (0, _utils.hexToHSL)(hexRedColor);
+    var expectedBlue = {
+      h: 240,
+      s: 100,
+      l: 50
+    };
+    var expectedGreen = {
+      h: 120,
+      s: 100,
+      l: 50
+    };
+    var expectedPink = {
+      h: 350,
+      s: 100,
+      l: 80
+    };
+    var expectedRed = {
+      h: 0,
+      s: 100,
+      l: 50
+    };
+    expect(hslBlueColor).toEqual(expectedBlue);
+    expect(hslGreenColor).toEqual(expectedGreen);
+    expect(hslPinkColor).toEqual(expectedPink);
+    expect(hslRedColor).toEqual(expectedRed);
+  });
+  test('should return hex from hsl color', function () {
+    var hslAquaColor = (0, _utils.HSLToHex)(180, 100, 50);
+    var hslBlueColor = (0, _utils.HSLToHex)(240, 100, 50);
+    var hslFuchsiaColor = (0, _utils.HSLToHex)(300, 100, 50);
+    var hslRedColor = (0, _utils.HSLToHex)(0, 100, 50);
+    var hslYellowColor = (0, _utils.HSLToHex)(60, 100, 50);
+    var hexAquaColor = '#00ffff';
+    var hexBlueColor = '#0000ff';
+    var hexFuchsiaColor = '#ff00ff';
+    var hexRedColor = '#ff0000';
+    var hexYellowColor = '#ffff00';
+    expect(hslAquaColor).toEqual(hexAquaColor);
+    expect(hslBlueColor).toEqual(hexBlueColor);
+    expect(hslFuchsiaColor).toEqual(hexFuchsiaColor);
+    expect(hslRedColor).toEqual(hexRedColor);
+    expect(hslYellowColor).toEqual(hexYellowColor);
+  });
+});

package/ColorPicker/utils.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hexToHSL = exports.HSLToHex = void 0;
+/**
+ * Checks for valid hex color, otherwise returns the black color.
+ *
+ * @param {String} hex	Hex color
+ * @returns {String} Valid hex color
+ * @private
+ */
+var checkHex = function checkHex(hex) {
+  if (/^#[0-9A-F]{3,6}$/i.test(hex)) return hex;
+  return '#000000';
+};
+
+/**
+ * Converts hex color to hue, saturation, and lightness values.
+ *
+ * @param {String} hexColor
+ * @returns {{s: number, h: number, l: number}}	HSL values
+ * @private
+ */
+var hexToHSL = exports.hexToHSL = function hexToHSL(hexColor) {
+  var hex = checkHex(hexColor);
+  // Convert hex to RGB first
+  var r = 0,
+    g = 0,
+    b = 0;
+  if (hex.length === 4) {
+    r = parseInt(hex[1] + hex[1], 16);
+    g = parseInt(hex[2] + hex[2], 16);
+    b = parseInt(hex[3] + hex[3], 16);
+  } else if (hex.length === 7) {
+    r = parseInt(hex.slice(1, 3), 16);
+    g = parseInt(hex.slice(3, 5), 16);
+    b = parseInt(hex.slice(5), 16);
+  }
+
+  // Then convert RGB to HSL
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  var cmin = Math.min(r, g, b),
+    cmax = Math.max(r, g, b),
+    delta = cmax - cmin,
+    h,
+    s,
+    l;
+  if (delta === 0) {
+    h = 0;
+  } else if (cmax === r) {
+    h = (g - b) / delta % 6;
+  } else if (cmax === g) {
+    h = (b - r) / delta + 2;
+  } else {
+    h = (r - g) / delta + 4;
+  }
+  h = Math.round(h * 60);
+  if (h < 0) {
+    h += 360;
+  }
+  l = (cmax + cmin) / 2;
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+  return {
+    h: Math.round(h),
+    s: Math.round(s),
+    l: Math.round(l)
+  };
+};
+
+/**
+ *  Converts hue, saturation, and lightness values to hex color.
+ *
+ * @param {Number} h	Hue value
+ * @param {Number} s	Saturation value
+ * @param {Number} l	Lightness value
+ * @returns {string}	6-digit hex color
+ * @private
+ */
+var HSLToHex = exports.HSLToHex = function HSLToHex(h, s, l) {
+  s /= 100;
+  l /= 100;
+  var c = (1 - Math.abs(2 * l - 1)) * s,
+    x = c * (1 - Math.abs(h / 60 % 2 - 1)),
+    m = l - c / 2,
+    r = 0,
+    g = 0,
+    b = 0;
+  if (0 <= h && h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (60 <= h && h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (120 <= h && h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (180 <= h && h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (240 <= h && h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (300 <= h && h < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  // Having obtained RGB, convert channels to hex
+  r = Math.round((r + m) * 255).toString(16);
+  g = Math.round((g + m) * 255).toString(16);
+  b = Math.round((b + m) * 255).toString(16);
+
+  // Prepend 0s, if necessary
+  if (r.length === 1) {
+    r = "0" + r;
+  }
+  if (g.length === 1) {
+    g = "0" + g;
+  }
+  if (b.length === 1) {
+    b = "0" + b;
+  }
+  return "#" + r + g + b;
+};

package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts

@@ -0,0 +1,106 @@
+// Type definitions for limestone/ContextualMenuDecorator
+
+import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { ContextualPopupDecoratorProps as limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps } from "limestone/ContextualPopupDecorator";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface ContextualMenuDecoratorConfig extends Object {
+  /**
+   * Disables passing the  `skin`  prop to the wrapped component.
+   */
+  noSkin?: boolean;
+  /**
+ * The prop in which to pass the value of  `open`  state of ContextualMenuDecorator to the
+wrapped component.
+ */
+  openProp?: string;
+}
+export interface ContextualMenuDecoratorProps
+  extends Merge<
+    Merge<ui_Toggleable_ToggleableProps, limestone_Skinnable_SkinnableProps>,
+    limestone_ContextualPopupDecorator_ContextualPopupDecoratorProps
+  > {
+  /**
+   * Direction of popup with respect to the wrapped component.
+   */
+  direction?:
+    | "above"
+    | "above center"
+    | "above left"
+    | "above right"
+    | "below"
+    | "below center"
+    | "below left"
+    | "below right"
+    | "left middle"
+    | "left top"
+    | "left bottom"
+    | "right middle"
+    | "right top"
+    | "right bottom";
+  /**
+ * The items to be displayed in the  `ContextualMenuDecorator`  when  `open` .
+ * 
+ * Takes either an array of strings or an array of objects. When strings, the values will be
+used in the generated components as the readable text. When objects, the properties will
+be passed onto an  `Item`  component and  `children`  as well as a unique  `key`  property are
+required.
+ */
+  menuItems?:
+    | string[]
+    | {
+        key: number | string;
+        children: string | React.ComponentType;
+        [propName: string]: any;
+      }[];
+  /**
+   * Offset from the activator to apply to the position of the popup.
+   */
+  offset?: "none" | "overlap" | "small" | "large";
+  /**
+ * Called when the user has attempted to close the popup.
+ * 
+ * This may occur either when the close button is clicked or when spotlight focus
+moves outside the boundary of the popup. Setting  `spotlightRestrict`  to  `'self-only'` 
+will prevent Spotlight focus from leaving the popup.
+ */
+  onClose?: Function;
+  /**
+   * Called when the popup is opened.
+   */
+  onOpen?: Function;
+  /**
+ * CSS class name to pass to the
+  .
+ * 
+ * This is commonly used to set width and height of the popup.
+ */
+  popupClassName?: string;
+  /**
+   * An object containing properties to be passed to popup component.
+   */
+  popupProps?: object;
+  /**
+ * Restricts or prioritizes spotlight navigation.
+ * 
+ * Allowed values are:
+ * *  `'none'`  - Spotlight can move freely within and beyond the popup
+ * *  `'self-first'`  - Spotlight should prefer components within the popup over
+components beyond the popup, or
+ * *  `'self-only'`  - Spotlight can only be set within the popup
+ */
+  spotlightRestrict?: "none" | "self-first" | "self-only";
+}
+export function ContextualMenuDecorator<P>(
+  config: ContextualMenuDecoratorConfig,
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & ContextualMenuDecoratorProps>;
+
+export function ContextualMenuDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & ContextualMenuDecoratorProps>;
+
+export default ContextualMenuDecorator;