@enact/limestone 1.3.0

package/TimePicker/TimePicker.module.css

@@ -0,0 +1,61 @@
+.timePicker .timeSeparator {
+  vertical-align: inherit;
+  display: inline-block;
+  margin: 0 var(--primitive-spacing-6);
+  font-weight: var(--primitive-font-weight-semibold);
+}
+.timePicker .pickers {
+  display: flex;
+  align-items: center;
+}
+:global(.enact-locale-right-to-left) .timePicker .pickers .hourPicker {
+  order: 3;
+  margin-inline-start: 0.5rem;
+}
+:global(.enact-locale-right-to-left) .timePicker .pickers .timeSeparator {
+  order: 2;
+}
+:global(.enact-locale-right-to-left) .timePicker .pickers .minutePicker {
+  order: 1;
+  margin-inline-start: 0;
+}
+:global(.enact-locale-right-to-left) .timePicker .pickers .meridiemPicker {
+  order: 4;
+}
+.timePicker:global(.neutral) .timeSeparator[disabled] {
+  opacity: 1;
+  opacity: 0.3;
+}
+:global(.enact-a11y-high-contrast) .timePicker:global(.neutral):global(.highContrast) .timeSeparator[disabled] {
+  opacity: 1;
+  opacity: 0.3;
+}
+.timePicker:global(.light) .timeSeparator[disabled] {
+  opacity: 1;
+  opacity: 0.3;
+}
+.timePicker:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.timePicker:global(.game) .timeSeparator[disabled] {
+  opacity: 1;
+  opacity: 0.3;
+}
+:global(.green) .timePicker:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .timePicker:global(.game) .timeSeparator[disabled] {
+  opacity: 1;
+  opacity: 0.3;
+}
+:global(.orange) .timePicker:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .timePicker:global(.game) .timeSeparator[disabled] {
+  opacity: 1;
+  opacity: 0.3;
+}

package/TimePicker/TimePickerBase.js

@@ -0,0 +1,396 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TimePickerBase = void 0;
+var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _react = require("react");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _$L = _interopRequireDefault(require("../internal/$L"));
+var _DateComponentPicker = require("../internal/DateComponentPicker");
+var _DateTime = _interopRequireDefault(require("../internal/DateTime"));
+var _TimePickerModule = _interopRequireDefault(require("./TimePicker.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["hasMeridiem", "value"],
+  _excluded2 = ["data-webos-voice-disabled", "disabled", "hasMeridiem", "hour", "hourAriaLabel", "meridiem", "meridiemAriaLabel", "meridiemLabel", "meridiemPickerWidth", "meridiems", "minute", "minuteAriaLabel", "noLabel", "onChangeHour", "onChangeMeridiem", "onChangeMinute", "onSpotlightDisappear", "onSpotlightLeft", "onSpotlightRight", "order", "rtl", "spotlightDisabled"]; // values to use in hour picker for 24 and 12 hour locales
+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; }
+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); }
+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 _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 hours24 = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
+var hours12 = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];
+
+/**
+ * {@link limestone/TimePicker/TimePickerBase.HourPicker} is a utility component to prevent the
+ * animation of the picker when the display text doesn't change for 12-hour locales.
+ *
+ * @class HourPicker
+ * @memberof limestone/TimePicker/TimePickerBase
+ * @ui
+ * @private
+ */
+var HourPicker = function HourPicker(props) {
+  var hasMeridiem = props.hasMeridiem,
+    value = props.value,
+    rest = _objectWithoutProperties(props, _excluded);
+  var hours = hasMeridiem ? hours12 : hours24;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    noAnimation = _useState2[0],
+    setNoAnimation = _useState2[1];
+  var _useState3 = (0, _react.useState)(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prevValue = _useState4[0],
+    setPrevValue = _useState4[1];
+  if (prevValue !== value) {
+    setNoAnimation(hours[prevValue] === hours[value]);
+    setPrevValue(value);
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateComponentPicker.DateComponentPicker, _objectSpread(_objectSpread({}, rest), {}, {
+    noAnimation: noAnimation,
+    value: value,
+    children: hours
+  }));
+};
+HourPicker.propTypes = {
+  hasMeridiem: _propTypes["default"].bool,
+  value: _propTypes["default"].number
+};
+
+/**
+* {@link limestone/TimePicker.TimePickerBase} is the stateless functional time picker
+* component. Should not be used directly but may be composed within another component as it is
+* within {@link limestone/TimePicker.TimePicker}.
+*
+* @class TimePickerBase
+* @memberof limestone/TimePicker
+* @ui
+* @public
+*/
+var TimePickerBase = exports.TimePickerBase = (0, _kind["default"])({
+  name: 'TimePickerBase',
+  propTypes: /** @lends limestone/TimePicker.TimePickerBase.prototype */{
+    /**
+     * The `hour` component of the time.
+     *
+     * @type {Number}
+     * @required
+     * @public
+     */
+    hour: _propTypes["default"].number.isRequired,
+    /**
+     * The `meridiem` component of the time.
+     *
+     * @type {Number}
+     * @required
+     * @public
+     */
+    meridiem: _propTypes["default"].number.isRequired,
+    /**
+     * The `minute` component of the time.
+     *
+     * @type {Number}
+     * @required
+     * @public
+     */
+    minute: _propTypes["default"].number.isRequired,
+    /**
+     * The order in which the component pickers are displayed.
+     *
+     * Should be an array of 2 or 3 strings containing one of `'h'`, `'k'`, `'m'`, and `'a'`.
+     *
+     * @type {String[]}
+     * @required
+     * @public
+     */
+    order: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(['h', 'k', 'm', 'a'])).isRequired,
+    /**
+     * Disables voice control.
+     *
+     * @type {Boolean}
+     * @memberof limestone/TimePicker.TimePickerBase.prototype
+     * @public
+     */
+    'data-webos-voice-disabled': _propTypes["default"].bool,
+    /**
+     * Disables the `TimePicker`.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    disabled: _propTypes["default"].bool,
+    /**
+     * The "aria-label" for the hour picker
+     *
+     * If not specified, the "aria-label" for the hour picker will be
+     * a combination of the current value and 'hour change a value with up down button'.
+     *
+     * @type {String}
+     * @public
+     */
+    hourAriaLabel: _propTypes["default"].string,
+    /**
+     * The primary text of `TimePicker`.
+     *
+     * @type {String}
+     * @public
+     */
+    label: _propTypes["default"].string,
+    /**
+     * The "aria-label" for the meridiem picker.
+     *
+     * If not specified, the "aria-label" for the meridiem picker will be
+     * a combination of the current value and 'change a value with up down button'.
+     *
+     * @type {String}
+     * @public
+     */
+    meridiemAriaLabel: _propTypes["default"].string,
+    /**
+     * The hint string read when focusing the meridiem picker.
+     *
+     * @type {String}
+     * @public
+     */
+    meridiemLabel: _propTypes["default"].string,
+    /**
+     * Array of meridiem labels to display.
+     *
+     * @type {String[]}
+     * @required
+     * @public
+     */
+    meridiems: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    /**
+     * The "aria-label" for the minute picker.
+     *
+     * If not specified, the "aria-label" for the minute picker will be
+     * a combination of the current value and 'minute change a value with up down button'.
+     *
+     * @type {String}
+     * @public
+     */
+    minuteAriaLabel: _propTypes["default"].string,
+    /**
+     * Hides the label that displays the time.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noLabel: _propTypes["default"].bool,
+    /**
+     * Called on changes in the `hour` component of the time.
+     *
+     * @type {Function}
+     * @public
+     */
+    onChangeHour: _propTypes["default"].func,
+    /**
+     * Called on changes in the `meridiem` component of the time.
+     *
+     * @type {Function}
+     * @public
+     */
+    onChangeMeridiem: _propTypes["default"].func,
+    /**
+     * Called on changes in the `minute` component of the time.
+     *
+     * @type {Function}
+     * @public
+     */
+    onChangeMinute: _propTypes["default"].func,
+    /**
+     * Called when the component is removed while retaining focus.
+     *
+     * @type {Function}
+     * @param {Object} event
+     * @public
+     */
+    onSpotlightDisappear: _propTypes["default"].func,
+    /**
+     * Called when the focus leaves the picker when the 5-way left key is pressed.
+     *
+     * @type {Function}
+     * @param {Object} event
+     * @public
+     */
+    onSpotlightLeft: _propTypes["default"].func,
+    /**
+     * Called when the focus leaves the picker when the 5-way right key is pressed.
+     *
+     * @type {Function}
+     * @param {Object} event
+     * @public
+     */
+    onSpotlightRight: _propTypes["default"].func,
+    /**
+     * Set content to RTL.
+     *
+     * @type {Boolean}
+     * @private
+     */
+    rtl: _propTypes["default"].bool,
+    /**
+     * Disables spotlight navigation into the component.
+     *
+     * @type {Boolean}
+     * @default false
+     * @public
+     */
+    spotlightDisabled: _propTypes["default"].bool
+  },
+  defaultProps: {
+    disabled: false,
+    spotlightDisabled: false
+  },
+  styles: {
+    css: _TimePickerModule["default"],
+    className: 'timePicker'
+  },
+  computed: {
+    hasMeridiem: function hasMeridiem(_ref) {
+      var order = _ref.order;
+      return order.indexOf('a') >= 0;
+    },
+    meridiemPickerWidth: function meridiemPickerWidth(_ref2) {
+      var meridiem = _ref2.meridiem,
+        meridiems = _ref2.meridiems;
+      return (meridiems === null || meridiems === void 0 ? void 0 : meridiems[meridiem].length) * 2;
+    }
+  },
+  render: function render(_ref3) {
+    var voiceDisabled = _ref3['data-webos-voice-disabled'],
+      disabled = _ref3.disabled,
+      hasMeridiem = _ref3.hasMeridiem,
+      hour = _ref3.hour,
+      hourAriaLabel = _ref3.hourAriaLabel,
+      meridiem = _ref3.meridiem,
+      meridiemAriaLabel = _ref3.meridiemAriaLabel,
+      meridiemLabel = _ref3.meridiemLabel,
+      meridiemPickerWidth = _ref3.meridiemPickerWidth,
+      meridiems = _ref3.meridiems,
+      minute = _ref3.minute,
+      minuteAriaLabel = _ref3.minuteAriaLabel,
+      noLabel = _ref3.noLabel,
+      onChangeHour = _ref3.onChangeHour,
+      onChangeMeridiem = _ref3.onChangeMeridiem,
+      onChangeMinute = _ref3.onChangeMinute,
+      onSpotlightDisappear = _ref3.onSpotlightDisappear,
+      onSpotlightLeft = _ref3.onSpotlightLeft,
+      onSpotlightRight = _ref3.onSpotlightRight,
+      order = _ref3.order,
+      rtl = _ref3.rtl,
+      spotlightDisabled = _ref3.spotlightDisabled,
+      rest = _objectWithoutProperties(_ref3, _excluded2);
+    var hourAccessibilityHint = (0, _$L["default"])('hour'),
+      minuteAccessibilityHint = (0, _$L["default"])('minute');
+    if (noLabel) {
+      delete rest.label;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTime["default"], _objectSpread(_objectSpread({}, rest), {}, {
+      css: _TimePickerModule["default"],
+      children: order.map(function (picker, index) {
+        // although we create a component array based on the provided
+        // order, we ultimately force order in CSS for RTL
+        var isFirst = index === 0;
+        var isLast = index === order.length - 1;
+        // meridiem will always be the left-most control in RTL, regardless of the provided order
+        var isLeft = rtl && (hasMeridiem ? picker === 'a' : picker === 'h') || isFirst && !rtl;
+        // minute will always be the right-most control in RTL, regardless of the provided order
+        var isRight = rtl && picker === 'm' || isLast && !rtl;
+        var isLastElement = rtl ? isLeft : isLast;
+        switch (picker) {
+          case 'h':
+          case 'k':
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HourPicker, {
+                accessibilityHint: hourAccessibilityHint,
+                "aria-label": hourAriaLabel,
+                className: _TimePickerModule["default"].hourPicker,
+                "data-last-element": isLastElement,
+                "data-webos-voice-disabled": voiceDisabled,
+                "data-webos-voice-group-label": hourAccessibilityHint,
+                disabled: disabled,
+                hasMeridiem: hasMeridiem,
+                onChange: onChangeHour,
+                onSpotlightDisappear: onSpotlightDisappear,
+                onSpotlightLeft: isLeft ? onSpotlightLeft : null,
+                onSpotlightRight: isRight ? onSpotlightRight : null,
+                spotlightDisabled: spotlightDisabled,
+                value: hour,
+                width: 4,
+                wrap: true
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: _TimePickerModule["default"].timeSeparator,
+                disabled: disabled,
+                children: ":"
+              })]
+            }, "hour-picker");
+          case 'm':
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateComponentPicker.DateComponentRangePicker, {
+              accessibilityHint: minuteAccessibilityHint,
+              "aria-label": minuteAriaLabel,
+              className: _TimePickerModule["default"].minutePicker,
+              "data-last-element": isLastElement,
+              "data-webos-voice-disabled": voiceDisabled,
+              "data-webos-voice-group-label": minuteAccessibilityHint,
+              disabled: disabled,
+              max: 59,
+              min: 0,
+              onChange: onChangeMinute,
+              onSpotlightDisappear: onSpotlightDisappear,
+              onSpotlightLeft: isLeft ? onSpotlightLeft : null,
+              onSpotlightRight: isRight ? onSpotlightRight : null,
+              padded: true,
+              spotlightDisabled: spotlightDisabled,
+              value: minute,
+              width: 4,
+              wrap: true
+            }, "minute-picker");
+          case 'a':
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateComponentPicker.DateComponentPicker, {
+              "aria-label": meridiemAriaLabel,
+              "aria-valuetext": meridiems ? meridiems[meridiem] : null,
+              className: _TimePickerModule["default"].meridiemPicker,
+              "data-last-element": isLastElement,
+              "data-webos-voice-disabled": voiceDisabled,
+              "data-webos-voice-group-label": meridiemLabel,
+              disabled: disabled,
+              onChange: onChangeMeridiem,
+              onSpotlightDisappear: onSpotlightDisappear,
+              onSpotlightLeft: isLeft ? onSpotlightLeft : null,
+              onSpotlightRight: isRight ? onSpotlightRight : null,
+              reverse: true,
+              spotlightDisabled: spotlightDisabled,
+              value: meridiem,
+              width: meridiemPickerWidth,
+              wrap: true,
+              children: meridiems
+            }, "meridiem-picker");
+        }
+        return null;
+      })
+    }));
+  }
+});
+
+/**
+ * Called when `Enter` key down on the last picker
+ *
+ * @name onComplete
+ * @memberof limestone/TimePicker.TimePickerBase.prototype
+ * @type {Function}
+ * @public
+ */
+var _default = exports["default"] = TimePickerBase;

package/TimePicker/package.json

@@ -0,0 +1,3 @@
+{
+	"main": "TimePicker.js"
+}