@enact/limestone 1.3.0

package/ThemeDecorator/fontGenerator.js

@@ -0,0 +1,76 @@
+"use strict";
+
+/*
+ * This module loads Limestone's locale specific fonts.
+ *
+ * _This is not intended to be directly included by external developers._ The purpose of this is to
+ * override the existing "Limestone" font family with a new typeface, conditionally when the system
+ * locale matches the corresponding locale for the font (defined in this component's code).
+ *
+ */
+var _require = require('@enact/ui/internal/localized-fonts'),
+  addLocalizedFont = _require.addLocalizedFont,
+  generateFontRules = _require.generateFontRules,
+  generateFontOverrideRules = _require.generateFontOverrideRules;
+var fontName = 'Limestone';
+
+// Locale Configuration Block
+//
+// "Shape" of the object below is as follows: [square brackets indicate optional elements]
+// fonts = {
+// 	locale|language|region: {
+// 		regular: 'font name',
+// 		[bold: 'font name',]
+// 		[light: 'font name',]
+// 		[unicodeRange: 'U+600-6FF,U+FE70-FEFE']
+// 	},
+// 	'ur': {
+// 		regular: 'LG Smart UI Urdu',
+// 		unicodeRange:
+// 			'U+600-6FF,' +
+// 			'U+FE70-FEFE,' +
+// 			'U+FB50-FDFF'
+// 	}
+// };
+var fonts = {
+  'bn': {
+    regular: 'LG Smart UI Bengali'
+  },
+  'gu': {
+    regular: 'LG Smart UI Gujarati'
+  },
+  'hi': {
+    regular: 'LG Smart UI Devanagari'
+  },
+  'ja': {
+    regular: 'LG Smart UI JP'
+  },
+  'kn': {
+    regular: 'LG Smart UI Kannada'
+  },
+  'pa': {
+    regular: 'LG Smart UI Gurmukhi'
+  },
+  'ta': {
+    regular: 'LG Smart UI Tamil'
+  },
+  'te': {
+    regular: 'LG Smart UI Telugu'
+  },
+  'ur': {
+    regular: ['LG Smart UI Urdu', 'LGSmartUIUrdu'] // This needs 2 references because the "full name" differs from the "family name". To target this font file directly in all OSs we must also include the "postscript name" in addition to the "full name".
+  },
+  'zh-Hans': {
+    regular: 'LG Smart UI SC'
+  }
+};
+
+// Duplications and alternate locale names
+fonts['as'] = fonts['bn'];
+fonts['mr'] = fonts['hi'];
+fonts['en-JP'] = fonts['ja'];
+addLocalizedFont(fontName, fonts);
+module.exports = generateFontRules;
+module.exports.fontGenerator = generateFontRules;
+module.exports.fontOverrideGenerator = generateFontOverrideRules;
+module.exports.generateFontRules = generateFontRules;

package/ThemeDecorator/package.json

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

package/ThemeDecorator/screenTypes.json

@@ -0,0 +1,10 @@
+[
+	{"name": "hd",      "pxPerRem": 16, "width": 1280, "height": 720,  "aspectRatioName": "hdtv"},
+	{"name": "uw-hd",   "pxPerRem": 16, "width": 1920, "height": 804,  "aspectRatioName": "cinema"},
+	{"name": "fhd",     "pxPerRem": 24, "width": 1920, "height": 1080, "aspectRatioName": "hdtv"},
+	{"name": "uw-uxga", "pxPerRem": 24, "width": 2560, "height": 1080, "aspectRatioName": "cinema"},
+	{"name": "qhd",     "pxPerRem": 32, "width": 2560, "height": 1440, "aspectRatioName": "hdtv"},
+	{"name": "wqhd",    "pxPerRem": 32, "width": 3440, "height": 1440, "aspectRatioName": "cinema"},
+	{"name": "uhd",     "pxPerRem": 48, "width": 3840, "height": 2160, "aspectRatioName": "hdtv", "base": true},
+	{"name": "uhd2",    "pxPerRem": 96, "width": 7680, "height": 4320, "aspectRatioName": "hdtv"}
+]

package/ThemeDecorator/tests/ThemeDecorator-specs.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require("../"));
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+describe('ThemeDecorator', function () {
+  var AppRoot = function AppRoot(props) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({
+      "data-app": true
+    }, props));
+  };
+  var a11yConfig = {
+    "float": false,
+    ri18n: false,
+    ri: false,
+    spotlight: false
+  };
+  var A11yApp = (0, _["default"])(a11yConfig, AppRoot);
+  test('should add base classes to wrapped component', function () {
+    var config = {
+      ri: false,
+      i18n: false,
+      spotlight: false,
+      "float": false,
+      overlay: false
+    };
+    var App = (0, _["default"])(config, AppRoot);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+      "data-testid": "app"
+    }));
+    _spotlight["default"].terminate();
+    var appRoot = _react.screen.getByTestId('app');
+    expect(appRoot).toHaveClass('neutral');
+    expect(appRoot).toHaveClass('bg');
+  });
+  test('should add author classes to wrapped component', function () {
+    var config = {
+      ri: false,
+      i18n: false,
+      spotlight: false,
+      "float": false,
+      overlay: false
+    };
+    var App = (0, _["default"])(config, AppRoot);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+      className: "author-class",
+      "data-testid": "app"
+    }));
+    _spotlight["default"].terminate();
+    var appRoot = _react.screen.getByTestId('app');
+    expect(appRoot).toHaveClass('author-class');
+  });
+  test('should not add skin classname to wrapped component when float is enabled', function () {
+    var config = {
+      ri: false,
+      i18n: false,
+      spotlight: false,
+      "float": true,
+      overlay: false
+    };
+    var App = (0, _["default"])(config, AppRoot);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+      "data-testid": "app"
+    }));
+    _spotlight["default"].terminate();
+    var appRoot = _react.screen.getByTestId('app');
+    expect(appRoot).not.toHaveClass('neutral');
+  });
+  test('should not add .bg class to wrapped component when overlay is enabled', function () {
+    var config = {
+      ri: false,
+      i18n: false,
+      spotlight: false,
+      "float": false,
+      overlay: true
+    };
+    var App = (0, _["default"])(config, AppRoot);
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+      "data-testid": "app"
+    }));
+    _spotlight["default"].terminate();
+    var appRoot = _react.screen.getByTestId('app');
+    expect(appRoot).not.toHaveClass('bg');
+  });
+  describe('AccessibilityDecorator', function () {
+    test('should add the highContrast class if passing the highContrast prop of true', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(A11yApp, {
+        "data-testid": "app",
+        highContrast: true
+      }));
+      var appRoot = _react.screen.getByTestId('app');
+      expect(appRoot).toHaveClass('highContrast');
+    });
+    test('should add the largeText class if passing the textSize prop of `large`', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(A11yApp, {
+        "data-testid": "app",
+        textSize: "large"
+      }));
+      var appRoot = _react.screen.getByTestId('app');
+      expect(appRoot).toHaveClass('largeText');
+    });
+    test('should update the skinVariants based on the skinVariants prop', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(A11yApp, {
+        "data-testid": "app",
+        skinVariants: ['grayscale']
+      }));
+      var appRoot = _react.screen.getByTestId('app');
+      expect(appRoot).toHaveClass('grayscale');
+    });
+    test('should add the largeText class when the type of the skinVariants prop is a string', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(A11yApp, {
+        "data-testid": "app",
+        textSize: "large",
+        skinVariants: "grayscale"
+      }));
+      var appRoot = _react.screen.getByTestId('app');
+      expect(appRoot).toHaveClass('largeText');
+      expect(appRoot).toHaveClass('grayscale');
+    });
+    test('should add largeText class when the type of the skinVariants prop is an array', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(A11yApp, {
+        "data-testid": "app",
+        textSize: "large",
+        skinVariants: ['grayscale']
+      }));
+      var appRoot = _react.screen.getByTestId('app');
+      expect(appRoot).toHaveClass('largeText');
+      expect(appRoot).toHaveClass('grayscale');
+    });
+    test('should add largeText class when the type of the skinVariants prop is an object', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(A11yApp, {
+        "data-testid": "app",
+        textSize: "large",
+        skinVariants: {
+          grayscale: true
+        }
+      }));
+      var appRoot = _react.screen.getByTestId('app');
+      expect(appRoot).toHaveClass('largeText');
+      expect(appRoot).toHaveClass('grayscale');
+    });
+  });
+});

package/TimePicker/TimePicker.d.ts

@@ -0,0 +1,147 @@
+// Type definitions for limestone/TimePicker
+
+import { ChangeableProps as ui_Changeable_ChangeableProps } from "@enact/ui/Changeable";
+import * as React from "react";
+
+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 TimePickerBaseProps {
+  /**
+   * The  `hour`  component of the time.
+   */
+  hour: number;
+  /**
+   * The  `meridiem`  component of the time.
+   */
+  meridiem: number;
+  /**
+   * The  `minute`  component of the time.
+   */
+  minute: number;
+  /**
+   * 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'` .
+   */
+  order: string[];
+  /**
+   * Disables voice control.
+   */
+  "data-webos-voice-disabled"?: boolean;
+  /**
+   * Disables the  `TimePicker` .
+   */
+  disabled?: boolean;
+  /**
+ * 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'.
+ */
+  hourAriaLabel?: string;
+  /**
+   * The primary text of  `TimePicker` .
+   */
+  label?: 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'.
+ */
+  meridiemAriaLabel?: string;
+  /**
+   * The hint string read when focusing the meridiem picker.
+   */
+  meridiemLabel?: string;
+  /**
+   * Array of meridiem labels to display.
+   */
+  meridiems: 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'.
+ */
+  minuteAriaLabel?: string;
+  /**
+   * Hides the label that displays the time.
+   */
+  noLabel?: boolean;
+  /**
+   * Called on changes in the  `hour`  component of the time.
+   */
+  onChangeHour?: Function;
+  /**
+   * Called on changes in the  `meridiem`  component of the time.
+   */
+  onChangeMeridiem?: Function;
+  /**
+   * Called on changes in the  `minute`  component of the time.
+   */
+  onChangeMinute?: Function;
+  /**
+   * Called when the component is removed while retaining focus.
+   */
+  onSpotlightDisappear?: Function;
+  /**
+   * Called when the focus leaves the picker when the 5-way left key is pressed.
+   */
+  onSpotlightLeft?: Function;
+  /**
+   * Called when the focus leaves the picker when the 5-way right key is pressed.
+   */
+  onSpotlightRight?: Function;
+  /**
+   * Disables spotlight navigation into the component.
+   */
+  spotlightDisabled?: boolean;
+  /**
+   * Called when  `Enter`  key down on the last picker
+   */
+  onComplete?: Function;
+}
+/**
+ *   is the stateless functional time picker
+component. Should not be used directly but may be composed within another component as it is
+within   .
+ */
+
+export class TimePickerBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, TimePickerBaseProps>
+> {}
+
+export interface TimePickerProps extends ui_Changeable_ChangeableProps {
+  /**
+   * Default value
+   */
+  defaultValue?: number;
+  /**
+   * The selected date.
+   */
+  value?: Date;
+}
+/**
+ * A component that allows displaying or selecting time.
+ * 
+ * Set the    property to a standard JavaScript
+   object to initialize the picker.
+ * 
+ * By default,  `TimePicker`  maintains the state of its  `value`  property. Supply the
+ `defaultValue`  property to control its initial value. If you wish to directly control updates
+to the component, supply a value to  `value`  at creation time and update it in response to
+ `onChange`  events.
+ */
+
+export class TimePicker extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, TimePickerProps>
+> {}
+
+/**
+ * Converts a standard  `Date`  object into a locale-specific string.
+ */
+export function timeToLocaleString(time: Date): string | any;
+
+export default TimePicker;

package/TimePicker/TimePicker.js

@@ -0,0 +1,255 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TimePicker = void 0;
+Object.defineProperty(exports, "TimePickerBase", {
+  enumerable: true,
+  get: function get() {
+    return _TimePickerBase["default"];
+  }
+});
+exports.timeToLocaleString = exports["default"] = void 0;
+var _Pure = _interopRequireDefault(require("@enact/ui/internal/Pure"));
+var _DateFactory = _interopRequireDefault(require("ilib/lib/DateFactory"));
+var _DateFmt = _interopRequireDefault(require("ilib/lib/DateFmt"));
+var _LocaleInfo = _interopRequireDefault(require("ilib/lib/LocaleInfo"));
+var _DateTime = require("../internal/DateTime");
+var _Skinnable = _interopRequireDefault(require("../Skinnable"));
+var _TimePickerBase = _interopRequireDefault(require("./TimePickerBase"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * Provides a Limestone-themed time selection component.
+ *
+ * @example
+ * <TimePicker value={new Date()} />
+ *
+ * @module limestone/TimePicker
+ * @exports TimePicker
+ * @exports TimePickerBase
+ * @exports timeToLocaleString
+ */
+
+/*
+ * Converts a string representation of time into minutes
+ *
+ * @param	{String}	time	Time in the format `HH:mm`
+ *
+ * @returns	{Number}			Time in minute
+ * @private
+ */
+var toMinutes = function toMinutes(time) {
+  var colon = time.indexOf(':');
+  var hour = parseInt(time.substring(0, colon));
+  var minute = parseInt(time.substring(colon + 1));
+  return hour * 60 + minute;
+};
+
+/*
+ * Converts the `start` and `end` string representations (e.g. '12:00') into a numerical
+ * representation.
+ *
+ * @param	{Object}	options			Time options
+ * @param	{String}	options.start	Start time of meridiem
+ * @param	{String}	options.end		End time of meridiem
+ *
+ * @returns	{Object}					Contains start and end time in minutes
+ * @private
+ */
+var calcMeridiemRange = function calcMeridiemRange(_ref) {
+  var start = _ref.start,
+    end = _ref.end;
+  return {
+    start: toMinutes(start),
+    end: toMinutes(end)
+  };
+};
+
+/*
+ * Finds the index of the meridiem which contains `time`
+ *
+ * @param	{Number}	time		Time in minutes
+ * @param	{Object[]}	meridiems	Array of meridiems with `start` and `end` members in minutes
+ *
+ * @returns {Number}				Index of `time` in `meridiems`
+ * @private
+ */
+var indexOfMeridiem = function indexOfMeridiem(time, meridiems) {
+  var minutes = time.getHours() * 60 + time.getMinutes();
+  for (var i = 0; i < meridiems.length; i++) {
+    var m = meridiems[i];
+    if (minutes >= m.start && minutes <= m.end) {
+      return i;
+    }
+  }
+  return -1;
+};
+var getLabelFormatter = function getLabelFormatter() {
+  return new _DateFmt["default"]({
+    type: 'time',
+    useNative: false,
+    timezone: 'local',
+    length: 'full',
+    date: 'dmwy'
+  });
+};
+var dateTimeConfig = {
+  customProps: function customProps(i18n, value, _ref2) {
+    var meridiemLabel = _ref2.meridiemLabel;
+    var values = {
+      // i18n props
+      meridiems: i18n.meridiemLabels,
+      meridiemLabel: meridiemLabel,
+      // date components
+      hour: 12,
+      minute: 0,
+      meridiem: 0
+    };
+    if (i18n.meridiemEnabled && meridiemLabel == null) {
+      if (values.meridiems.length > 2) {
+        values.meridiemLabel = "".concat(values.meridiems[0], " / ").concat(values.meridiems[1], " ...");
+      } else {
+        values.meridiemLabel = values.meridiems.join(' / ');
+      }
+    }
+    if (value) {
+      if (i18n.meridiemEnabled) {
+        values.meridiem = indexOfMeridiem(value, i18n.meridiemRanges);
+      }
+      values.hour = value.getHours();
+      values.minute = value.getMinutes();
+    }
+    return values;
+  },
+  defaultOrder: ['h', 'm', 'a'],
+  handlers: {
+    onChangeHour: function onChangeHour(ev, value) {
+      var currentTime = (0, _DateFactory["default"])(value).getTimeExtended();
+      var currentHour = value.hour;
+      value.hour = ev.value;
+
+      // In the case of navigating onto the skipped hour of DST, ilib will return the same
+      // value so we skip that hour and update the value again.
+      var newTime = (0, _DateFactory["default"])(value).getTimeExtended();
+      if (newTime === currentTime) {
+        value.hour = ev.value * 2 - currentHour;
+      }
+      return value;
+    },
+    onChangeMinute: function onChangeMinute(ev, value) {
+      value.minute = ev.value;
+      return value;
+    },
+    onChangeMeridiem: function onChangeMeridiem(ev, value, i18n) {
+      var meridiemRanges = i18n.meridiemRanges;
+      var meridiem = meridiemRanges[ev.value];
+      if (meridiemRanges.length === 2) {
+        // In the common case of 2 meridiems, we'll offset hours by 12 so that picker stays
+        // the same.
+        value.hour = (value.getHours() + 12) % 24;
+      } else {
+        // In the rarer case of > 2 meridiems (e.g. am-ET), try to set hours only first
+        var hours = Math.floor(meridiem.start / 60);
+        value.hour = hours;
+
+        // but check if it is still out of bounds and update the minutes as well
+        var minutes = hours * 60 + value.getMinutes();
+        if (minutes > meridiem.end) {
+          value.minute = meridiem.end % 60;
+        } else if (minutes < meridiem.start) {
+          value.minute = meridiem.start % 60;
+        }
+      }
+      return value;
+    }
+  },
+  i18n: function i18n() {
+    // Filters used to extract the order of pickers from the ilib template
+    var includeMeridiem = /([khma])(?!\1)/ig;
+    var excludeMeridiem = /([khm])(?!\1)/ig;
+
+    // Meridiem localization
+    var merFormatter = new _DateFmt["default"]({
+      template: 'a',
+      useNative: false,
+      timezone: 'local'
+    });
+    var meridiems = merFormatter.getMeridiemsRange();
+    var meridiemRanges = meridiems.map(calcMeridiemRange);
+    var meridiemLabels = meridiems.map(function (obj) {
+      return obj.name;
+    });
+
+    // Picker ordering
+    var li = new _LocaleInfo["default"]();
+    var clockPref = li.getClock();
+    var meridiemEnabled = clockPref === '12';
+    var filter = meridiemEnabled ? includeMeridiem : excludeMeridiem;
+    var order = getLabelFormatter().getTemplate().replace(/'.*?'/g, '').match(filter).map(function (s) {
+      return s[0].toLowerCase();
+    });
+    return {
+      formatter: getLabelFormatter(),
+      meridiemEnabled: meridiemEnabled,
+      meridiemLabels: meridiemLabels,
+      meridiemRanges: meridiemRanges,
+      order: order
+    };
+  }
+};
+
+/**
+ * A component that allows displaying or selecting time.
+ *
+ * Set the {@link limestone/TimePicker.TimePicker.value|value} property to a standard JavaScript
+ *  {@link /docs/developer-guide/glossary/#date|Date} object to initialize the picker.
+ *
+ * By default, `TimePicker` maintains the state of its `value` property. Supply the
+ * `defaultValue` property to control its initial value. If you wish to directly control updates
+ * to the component, supply a value to `value` at creation time and update it in response to
+ * `onChange` events.
+ *
+ * @class TimePicker
+ * @memberof limestone/TimePicker
+ * @mixes ui/Changeable.Changeable
+ * @ui
+ * @public
+ */
+
+/**
+ * Default value
+ *
+ * @name defaultValue
+ * @memberof limestone/TimePicker.TimePicker.prototype
+ * @type {Number}
+ * @public
+ */
+
+var TimePicker = exports.TimePicker = (0, _Pure["default"])((0, _Skinnable["default"])((0, _DateTime.DateTimeDecorator)(dateTimeConfig, _TimePickerBase["default"])));
+
+/**
+ * The selected date.
+ *
+ * @name value
+ * @memberof limestone/TimePicker.TimePicker
+ * @instance
+ * @type {Date}
+ * @public
+ */
+
+/**
+ * Converts a standard `Date` object into a locale-specific string.
+ *
+ * @function
+ * @memberof limestone/TimePicker
+ * @param {Date} time `Date` to convert
+ * @returns {String|null} Converted date or `null` if `date` is invalid
+ */
+var timeToLocaleString = exports.timeToLocaleString = function timeToLocaleString(time) {
+  if (!time) {
+    return null;
+  }
+  return getLabelFormatter().format(time);
+};
+var _default = exports["default"] = TimePicker;