@enact/limestone 1.3.0

package/TimePicker/tests/TimePicker-specs.js

@@ -0,0 +1,248 @@
+"use strict";
+
+var _ilib = _interopRequireDefault(require("ilib"));
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _TimePicker = _interopRequireWildcard(require("../TimePicker"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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); }); }; } // Note: Tests pass 'locale' because there's no I18nDecorator to provide a value via context and
+// otherwise, nothing renders in the label.
+describe('TimePicker', function () {
+  // Suite-wide setup
+
+  test('should emit an onChange event when changing the hour', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      onChange: handleChange,
+      value: new Date(2000, 6, 15, 3, 30),
+      locale: "en-US"
+    }));
+    var hourPicker = _react.screen.getAllByText('▲')[0];
+    yield user.click(hourPicker);
+    var expected = 1;
+    var expectedType = {
+      type: 'onChange',
+      value: new Date(2000, 6, 15, 4, 30)
+    };
+    var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
+    expect(handleChange).toHaveBeenCalledTimes(expected);
+    expect(actual).toMatchObject(expectedType);
+  }));
+  test('should emit an onChange event when changing the minute', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      onChange: handleChange,
+      value: new Date(2000, 6, 15, 3, 30),
+      locale: "en-US"
+    }));
+    var minutePicker = _react.screen.getAllByText('▲')[1];
+    yield user.click(minutePicker);
+    var expected = 1;
+    var expectedType = {
+      type: 'onChange',
+      value: new Date(2000, 6, 15, 3, 31)
+    };
+    var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
+    expect(handleChange).toHaveBeenCalledTimes(expected);
+    expect(actual).toMatchObject(expectedType);
+  }));
+  test('should emit an onChange event when changing the meridiem', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      onChange: handleChange,
+      value: new Date(2000, 6, 15, 3, 30),
+      locale: "en-US"
+    }));
+    var meridiemPicker = _react.screen.getAllByText('▲')[2];
+    yield user.click(meridiemPicker);
+    var expected = 1;
+    var expectedType = {
+      type: 'onChange',
+      value: new Date(2000, 6, 15, 15, 30)
+    };
+    var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
+    expect(handleChange).toHaveBeenCalledTimes(expected);
+    expect(actual).toMatchObject(expectedType);
+  }));
+  test('should fire onComplete event with type when enter key pressed from the last picker', function () {
+    var handleComplete = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      onComplete: handleComplete,
+      value: new Date(2000, 6, 15, 3, 30),
+      locale: "en-US"
+    }));
+    var meridiemPicker = _react.screen.getByLabelText('AM change a value with up down button');
+    (0, _react.act)(function () {
+      return meridiemPicker.focus();
+    });
+    _react.fireEvent.keyDown(meridiemPicker, {
+      which: 13,
+      keyCode: 13,
+      code: 13
+    });
+    var expected = {
+      type: 'onComplete',
+      value: new Date(2000, 6, 15, 3, 30)
+    };
+    var actual = handleComplete.mock.calls.length && handleComplete.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should accept a JavaScript Date for its value prop', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      value: new Date(2000, 0, 1, 12, 30),
+      locale: "en-US"
+    }));
+    var minutePicker = _react.screen.getByText('30');
+    var expected = 'item';
+    expect(minutePicker).toHaveClass(expected);
+  });
+  test('should set \'hourAriaLabel\' to hour picker', function () {
+    var label = 'custom hour aria-label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      hourAriaLabel: label,
+      value: new Date(2000, 0, 1, 12, 30)
+    }));
+    var hourPicker = _react.screen.getByLabelText(label);
+    var expected = 'hourPicker';
+    expect(hourPicker).toBeInTheDocument();
+    expect(hourPicker).toHaveClass(expected);
+  });
+  test('should set \'meridiemAriaLabel\' to meridiem picker', function () {
+    var label = 'custom meridiem aria-label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      meridiemAriaLabel: label,
+      value: new Date(2000, 0, 1, 12, 30)
+    }));
+    var meridiemPicker = _react.screen.getByLabelText(label);
+    var expected = 'meridiemPicker';
+    expect(meridiemPicker).toBeInTheDocument();
+    expect(meridiemPicker).toHaveClass(expected);
+  });
+  test('should set \'minuteAriaLabel\' to minute picker', function () {
+    var label = 'custom minute aria-label';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      minuteAriaLabel: label,
+      value: new Date(2000, 0, 1, 12, 30)
+    }));
+    var minutePicker = _react.screen.getByLabelText(label);
+    var expected = 'minutePicker';
+    expect(minutePicker).toBeInTheDocument();
+    expect(minutePicker).toHaveClass(expected);
+  });
+  test('should set \'data-webos-voice-disabled\' to hour picker when voice control is disabled', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      value: new Date(2000, 0, 1, 12, 30),
+      "data-webos-voice-disabled": true
+    }));
+    var hourPicker = _react.screen.getByLabelText('12 hour change a value with up down button');
+    var expected = 'data-webos-voice-disabled';
+    expect(hourPicker).toHaveAttribute(expected);
+  });
+  test('should set \'data-webos-voice-disabled\' to meridiem picker when voice control is disabled', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      value: new Date(2000, 0, 1, 12, 30),
+      "data-webos-voice-disabled": true
+    }));
+    var merdiemPicker = _react.screen.getByLabelText('AM change a value with up down button');
+    var expected = 'data-webos-voice-disabled';
+    expect(merdiemPicker).toHaveAttribute(expected);
+  });
+  test('should set \'data-webos-voice-disabled\' to minute picker when voice control is disabled', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      value: new Date(2000, 0, 1, 12, 30),
+      "data-webos-voice-disabled": true
+    }));
+    var minutePicker = _react.screen.getByLabelText('0 minute change a value with up down button');
+    // The minute is 0 because it does not change based on props, this needs to be fixed in timePicker
+
+    var expected = 'data-webos-voice-disabled';
+    expect(minutePicker).toHaveAttribute(expected);
+  });
+  test('should format a date the same as the label', function () {
+    var time = new Date(2000, 0, 1, 12, 30);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      value: time,
+      locale: "en-US"
+    }));
+    var header = _react.screen.getByText((0, _TimePicker.timeToLocaleString)(time), {
+      collapseWhitespace: false
+    }).parentElement.parentElement;
+    var expected = 'heading';
+    expect(header).toHaveClass(expected);
+  });
+  test('should format a date the same as the label in another locale', function () {
+    _ilib["default"].setLocale('ar-SA');
+    var time = new Date(2000, 0, 1, 12, 30);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      value: time,
+      locale: "ar-SA"
+    }));
+    var header = _react.screen.getByText((0, _TimePicker.timeToLocaleString)(time), {
+      collapseWhitespace: false
+    }).parentElement.parentElement;
+    var expected = 'heading';
+    expect(header).toHaveClass(expected);
+  });
+  test('should not display Heading', function () {
+    _ilib["default"].setLocale('en-US');
+    var time = new Date(2000, 0, 1, 12, 30);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      value: time,
+      locale: "en-US",
+      noLabel: true
+    }));
+    var header = _react.screen.queryByText((0, _TimePicker.timeToLocaleString)(time), {
+      collapseWhitespace: false
+    });
+    expect(header).toBeNull();
+  });
+  test('should change the meridiem to reflect the hour change', function () {
+    var time = new Date(2000, 0, 1, 12, 30);
+    var secondTime = new Date(2000, 0, 1, 11, 30);
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+        locale: "en-US",
+        value: time
+      })),
+      rerender = _render.rerender;
+    var firstTimeDisplayed = _react.screen.queryByText('12:30 PM');
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      locale: "en-US",
+      value: secondTime
+    }));
+    var secondTimeDisplayed = _react.screen.queryByText('11:30 AM');
+    expect(firstTimeDisplayed).not.toBeNull();
+    expect(secondTimeDisplayed).not.toBeNull();
+  });
+  test('check that the date is displayed correctly for cases of more than 2 meridiems', function () {
+    _ilib["default"].setLocale('am-ET');
+    var time = new Date(2000, 0, 1, 12, 30);
+    var secondTime = new Date(2000, 0, 1, 11, 30);
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+        locale: "am-ET",
+        value: time
+      })),
+      rerender = _render2.rerender;
+    var firstTimeDisplayed = _react.screen.queryByText('6:30 ከሰዓት');
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker["default"], {
+      locale: "am-ET",
+      value: secondTime
+    }));
+    var secondTimeDisplayed = _react.screen.queryByText('5:30 ጥዋት');
+    expect(firstTimeDisplayed).not.toBeNull();
+    expect(secondTimeDisplayed).not.toBeNull();
+  });
+  describe('#timeToLocaleString', function () {
+    test('method should return \'null\' for an \'undefined\' time', function () {
+      var time = (0, _TimePicker.timeToLocaleString)(undefined); // eslint-disable-line no-undefined
+
+      expect(time).toBeNull();
+    });
+  });
+});

package/TooltipDecorator/Tooltip.js

@@ -0,0 +1,252 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TooltipBase = exports.Tooltip = void 0;
+exports.defaultArrowAnchor = defaultArrowAnchor;
+exports.defaultDirection = defaultDirection;
+var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _TooltipLabel = _interopRequireDefault(require("./TooltipLabel"));
+var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["arrowAnchor", "children", "css", "tooltipRef", "width", "labelOffset", "marquee"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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; }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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); } // Set the default Arrow Anchor value based on the type of tooltip
+function defaultArrowAnchor(type) {
+  return type === 'transparent' ? 'center' : 'right';
+}
+
+// Set the default Direction of tooltip based on the type of tooltip
+function defaultDirection(type) {
+  return type === 'transparent' ? 'below' : 'above';
+}
+
+/**
+ * A stateless tooltip component with Limestone styling applied.
+ *
+ * @class TooltipBase
+ * @memberof limestone/TooltipDecorator
+ * @ui
+ * @public
+ */
+var TooltipBase = exports.TooltipBase = (0, _kind["default"])({
+  name: 'Tooltip',
+  propTypes: /** @lends limestone/TooltipDecorator.TooltipBase.prototype */{
+    /**
+     * The node to be displayed as the main content of the tooltip.
+     *
+     * @type {Node}
+     * @required
+     */
+    children: _propTypes2["default"].node.isRequired,
+    /**
+     * Position of tooltip arrow in relation to the activator.
+     *
+     * Note that `'left'`, `'center'`, `'right'` are applicable when direction is in vertical
+     * orientation (i.e. `'above'`, `'below'`), and `'top'`, `'middle'`, and `'bottom'` are
+     * applicable when direction is in horizontal orientation (i.e. `'left'`, `'right'`)
+     *
+     * For `type="balloon"`, the default is `"right"`
+     * For `type="transparent"`, the default is `"center"` (The arrow will not be visible)
+     *
+     * @type {('left'|'center'|'right'|'top'|'middle'|'bottom')}
+     * @public
+     */
+    arrowAnchor: _propTypes2["default"].oneOf(['left', 'center', 'right', 'top', 'middle', 'bottom']),
+    /**
+     * Customizes the component by mapping the supplied collection of CSS class names to the
+     * corresponding internal elements and states of this component.
+     *
+     * The following classes are supported:
+     *
+     * * `tooltip` - The root component class
+     * * `tooltipLabel` - Applied the label node
+     *
+     * @type {Object}
+     * @public
+     */
+    css: _propTypes2["default"].object,
+    /**
+     * Direction of label in relation to the activator.
+     *
+     * For `type="balloon"`, the default is `"above"`
+     * For `type="transparent"`, the default is `"below"`
+     *
+     * @type {('above'|'below'|'left'|'right')}
+     * @public
+     */
+    direction: _propTypes2["default"].oneOf(['above', 'below', 'left', 'right']),
+    /**
+     * A value representing the amount to offset the label portion of the tooltip.
+     *
+     * In a "center" aligned tooltip, the label may be desirable to offset to one side or the
+     * other. This prop accepts a value between -0.5 and 0.5 (representing 50% to the left or
+     * right). This defaults to 0 offset (centered). It also automatically caps the value so it
+     * never positions the tooltip label past the anchored arrow. If the tooltip label or arrow
+     * has non-rectangular geometry (rounded corners, a wide tail, etc.), you'll need to manually
+     * account for that in your provided offset value.
+     *
+     * @type {Number}
+     * @default 0
+     * @public
+     */
+    labelOffset: _propTypes2["default"].number,
+    /**
+     * Allows the tooltip to marquee.
+     *
+     * Specifying a {@link limestone/TooltipDecorator.TooltipBase.width|width} restricts
+     * the marquee to that size.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    marquee: _propTypes2["default"].bool,
+    /**
+     * Style object for tooltip position.
+     *
+     * @type {Object}
+     * @public
+     */
+    position: _propTypes2["default"].shape({
+      bottom: _propTypes2["default"].number,
+      left: _propTypes2["default"].number,
+      right: _propTypes2["default"].number,
+      top: _propTypes2["default"].number
+    }),
+    /**
+     * Anchors the tooltip relative to its container.
+     *
+     * Reconfigures the component to anchor itself to the designated edge of its container.
+     * When this is not specified, the implication is that the component is "absolutely"
+     * positioned, relative to the viewport, rather than its parent layer.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    relative: _propTypes2["default"].bool,
+    /**
+     * Called when the tooltip mounts/unmounts, giving a reference to the DOM.
+     *
+     * @type {Object|Function}
+     * @public
+     */
+    tooltipRef: _propTypes["default"].ref,
+    /**
+     * Type of tooltip.
+     *
+     * | *Value* | *Tooltip Appearance* |
+     * |---|---|
+     * | `'balloon'` | Tooltip with a border, background and arrow to the activator |
+     * | `'transparent'` | Text only without any of the decorations above |
+     *
+     * @type {('balloon'|'transparent')}
+     * @default 'balloon'
+     * @public
+     */
+    type: _propTypes2["default"].oneOf(['balloon', 'transparent']),
+    /**
+     * The width of tooltip content.
+     *
+     * Value expects a number of pixels, which will be automatically scaled to the appropriate
+     * size given the current screen resolution, or a string value containing a measurement and
+     * a valid CSS unit included.
+     * If the content goes over the given width, it will automatically wrap, or marquee if
+     * `marquee` is enabled.
+     *
+     * When `null`, content will auto-size and not wrap. If `marquee` is also enabled,
+     * marqueeing will begin when the width is greater than the default (theme specified) width.
+     *
+     * @type {Number|String}
+     * @public
+     */
+    width: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string])
+  },
+  defaultProps: {
+    type: 'balloon',
+    labelOffset: 0
+  },
+  styles: {
+    css: _TooltipModule["default"],
+    className: 'tooltip',
+    publicClassNames: ['tooltip', 'tooltipLabel']
+  },
+  computed: {
+    labelOffset: function labelOffset(_ref) {
+      var _labelOffset = _ref.labelOffset;
+      if (_labelOffset) {
+        var cappedPosition = Math.max(-0.5, Math.min(0.5, _labelOffset));
+        return {
+          transform: "translateX(".concat(cappedPosition * 100, "%)")
+        };
+      }
+    },
+    className: function className(_ref2) {
+      var direction = _ref2.direction,
+        arrowAnchor = _ref2.arrowAnchor,
+        relative = _ref2.relative,
+        type = _ref2.type,
+        styler = _ref2.styler;
+      return styler.append(direction || defaultDirection(type), "".concat(arrowAnchor || defaultArrowAnchor(type), "Arrow"), {
+        relative: relative,
+        absolute: !relative
+      }, type);
+    },
+    style: function style(_ref3) {
+      var position = _ref3.position,
+        _style = _ref3.style;
+      return _objectSpread(_objectSpread({}, _style), position);
+    }
+  },
+  render: function render(_ref4) {
+    var arrowAnchor = _ref4.arrowAnchor,
+      children = _ref4.children,
+      css = _ref4.css,
+      tooltipRef = _ref4.tooltipRef,
+      width = _ref4.width,
+      labelOffset = _ref4.labelOffset,
+      marquee = _ref4.marquee,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+    delete rest.labelOffset;
+    delete rest.direction;
+    delete rest.position;
+    delete rest.relative;
+    delete rest.type;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: css.tooltipAnchor,
+        ref: tooltipRef,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: css.tooltipArrow
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipLabel["default"], {
+          className: css.tooltipLabel,
+          marquee: marquee,
+          centered: arrowAnchor === 'center',
+          width: width,
+          style: labelOffset,
+          children: children
+        })]
+      })
+    }));
+  }
+});
+
+/**
+ * A tooltip component with Limestone styling applied.
+ *
+ * @class Tooltip
+ * @memberof limestone/TooltipDecorator
+ * @ui
+ * @public
+ */
+var Tooltip = exports.Tooltip = (0, _Skinnable["default"])(TooltipBase);
+var _default = exports["default"] = Tooltip;