npm - genesys-spark - Versions diffs - 4.0.0-beta.58 → 4.0.0-beta.60 - Mend

genesys-spark 4.0.0-beta.58 → 4.0.0-beta.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.js CHANGED Viewed

@@ -152,7 +152,96 @@ function checkAndLoadFonts(fonts) {
     })).then(function () { }); // flatten the promise array
 }
-var ASSET_PREFIX = '/spark-components/build-assets/4.0.0-beta.58-90/genesys-webcomponents/';
+/**
+ * Provides an [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
+ * object for formatting dates and times. Unlike the native version, `locale` is
+ * an optional argument. If not provided, the function will try to determine the
+ * locale from the DOM, where it should be set for a11y reasons.
+ * @param locale optional locale to use for formatting
+ * @param options options to pass to the Intl.DateTimeFormat constructor
+ * @returns a new DateTimeFormat
+ */
+function dateTimeFormat(localeOrOptions, options) {
+    var locale = undefined;
+    if (typeof localeOrOptions === 'string') {
+        locale = localeOrOptions;
+    }
+    else {
+        options = localeOrOptions;
+    }
+    if (locale != undefined) {
+        return new Intl.DateTimeFormat(locale, options);
+    }
+    else {
+        var userLocale = determineDisplayLocale();
+        return new Intl.DateTimeFormat(userLocale, options);
+    }
+}
+/**
+ * Provides an [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat)
+ * object for formatting dates and times. Unlike the native version, `locale` is
+ * an optional argument. If not provided, the function will try to determine the
+ * locale from the DOM, where it should be set for a11y reasons.
+ * @param locale optional locale to use for formatting
+ * @param options options to pass to the Intl.RelativeTimeFormat constructor
+ * @returns a new RelativeTimeFormat
+ */
+function relativeTimeFormat(localeOrOptions, options) {
+    var locale = undefined;
+    if (typeof localeOrOptions === 'string') {
+        locale = localeOrOptions;
+    }
+    else {
+        options = localeOrOptions;
+    }
+    if (locale != undefined) {
+        return new Intl.RelativeTimeFormat(locale, options);
+    }
+    else {
+        var userLocale = determineDisplayLocale();
+        return new Intl.RelativeTimeFormat(userLocale, options);
+    }
+}
+/**
+ * Makes a best effort to return the locale that should be used for a given element
+ * by checking language tags on ancestors. If no element is provided, it will
+ * start with the document's <body> tag. If no locale can be found, it will use
+ * the browser's locale preference. It will also try to add a region to regionless
+ * locales when there is a partial match with the browser's locale.
+ * @returns a locale string (e.g. 'en-US', 'en', 'de-DE', etc)
+ */
+function determineDisplayLocale(element) {
+    var _a;
+    if (element === void 0) { element = document.body; }
+    var domLocale = (_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang;
+    if (!domLocale || browserHasRegionData(domLocale)) {
+        // If we can't find a locale in the DOM, or we find a locale without a region that matches the
+        // users's browser locale, use the browser locale.
+        return navigator.language;
+    }
+    else {
+        return domLocale;
+    }
+}
+/**
+ * Returns true if the provided locale only has a language, but the user's
+ * browser settings have the same language with a locale.
+ * @param localeString The locale to check
+ * @returns true if the region can be guessed from the browser settings.
+ */
+function browserHasRegionData(localeString) {
+    return (localeString.length == 2 &&
+        navigator.language.startsWith("".concat(localeString, "-")));
+}
+var intl = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    dateTimeFormat: dateTimeFormat,
+    determineDisplayLocale: determineDisplayLocale,
+    relativeTimeFormat: relativeTimeFormat
+});
+var ASSET_PREFIX = '/spark-components/build-assets/4.0.0-beta.60-92/genesys-webcomponents/';
 var SCRIPT_PATH = 'genesys-webcomponents.esm.js';
 var STYLE_PATH = 'genesys-webcomponents.css';
 var assetsOrigin = getAssetsOrigin();
@@ -179,7 +268,5 @@ function registerSparkComponents() {
         checkAndLoadFonts(FONTS)
     ]).then();
 }
-// TODO: Build out utility functions where components aren't the right solution
-// export function formatDate(...)
-export { registerSparkComponents };
+export { intl as Intl, registerSparkComponents };

package/dist/src/index.d.ts CHANGED Viewed

@@ -8,3 +8,4 @@
  * unexpected failures.
  */
 export declare function registerSparkComponents(): Promise<void>;
+export * as Intl from './intl';

package/dist/src/intl.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+/**
+ * Provides an [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
+ * object for formatting dates and times. Unlike the native version, `locale` is
+ * an optional argument. If not provided, the function will try to determine the
+ * locale from the DOM, where it should be set for a11y reasons.
+ * @param locale optional locale to use for formatting
+ * @param options options to pass to the Intl.DateTimeFormat constructor
+ * @returns a new DateTimeFormat
+ */
+export declare function dateTimeFormat(localeOrOptions: string | Intl.DateTimeFormatOptions, options?: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
+/**
+ * Provides an [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat)
+ * object for formatting dates and times. Unlike the native version, `locale` is
+ * an optional argument. If not provided, the function will try to determine the
+ * locale from the DOM, where it should be set for a11y reasons.
+ * @param locale optional locale to use for formatting
+ * @param options options to pass to the Intl.RelativeTimeFormat constructor
+ * @returns a new RelativeTimeFormat
+ */
+export declare function relativeTimeFormat(localeOrOptions: string | Intl.RelativeTimeFormatOptions, options?: Intl.RelativeTimeFormatOptions): Intl.RelativeTimeFormat;
+/**
+ * Makes a best effort to return the locale that should be used for a given element
+ * by checking language tags on ancestors. If no element is provided, it will
+ * start with the document's <body> tag. If no locale can be found, it will use
+ * the browser's locale preference. It will also try to add a region to regionless
+ * locales when there is a partial match with the browser's locale.
+ * @returns a locale string (e.g. 'en-US', 'en', 'de-DE', etc)
+ */
+export declare function determineDisplayLocale(element?: HTMLElement): string;

package/dist/test/intl.spec.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "genesys-spark",
-  "version": "4.0.0-beta.58",
+  "version": "4.0.0-beta.60",
   "description": "",
   "license": "ISC",
   "author": "",

package/src/index.ts CHANGED Viewed

@@ -35,5 +35,5 @@ export function registerSparkComponents(): Promise<void> {
   ]).then();
 }
-// TODO: Build out utility functions where components aren't the right solution
-// export function formatDate(...)
+// Re-export of utility modules
+export * as Intl from './intl';

package/src/intl.ts ADDED Viewed

@@ -0,0 +1,88 @@
+/**
+ * Provides an [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
+ * object for formatting dates and times. Unlike the native version, `locale` is
+ * an optional argument. If not provided, the function will try to determine the
+ * locale from the DOM, where it should be set for a11y reasons.
+ * @param locale optional locale to use for formatting
+ * @param options options to pass to the Intl.DateTimeFormat constructor
+ * @returns a new DateTimeFormat
+ */
+export function dateTimeFormat(
+  localeOrOptions: string | Intl.DateTimeFormatOptions,
+  options?: Intl.DateTimeFormatOptions
+): Intl.DateTimeFormat {
+  let locale = undefined;
+  if (typeof localeOrOptions === 'string') {
+    locale = localeOrOptions;
+  } else {
+    options = localeOrOptions;
+  }
+  if (locale != undefined) {
+    return new Intl.DateTimeFormat(locale, options);
+  } else {
+    const userLocale = determineDisplayLocale();
+    return new Intl.DateTimeFormat(userLocale, options);
+  }
+}
+/**
+ * Provides an [Intl.RelativeTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat)
+ * object for formatting dates and times. Unlike the native version, `locale` is
+ * an optional argument. If not provided, the function will try to determine the
+ * locale from the DOM, where it should be set for a11y reasons.
+ * @param locale optional locale to use for formatting
+ * @param options options to pass to the Intl.RelativeTimeFormat constructor
+ * @returns a new RelativeTimeFormat
+ */
+export function relativeTimeFormat(
+  localeOrOptions: string | Intl.RelativeTimeFormatOptions,
+  options?: Intl.RelativeTimeFormatOptions
+): Intl.RelativeTimeFormat {
+  let locale = undefined;
+  if (typeof localeOrOptions === 'string') {
+    locale = localeOrOptions;
+  } else {
+    options = localeOrOptions;
+  }
+  if (locale != undefined) {
+    return new Intl.RelativeTimeFormat(locale, options);
+  } else {
+    const userLocale = determineDisplayLocale();
+    return new Intl.RelativeTimeFormat(userLocale, options);
+  }
+}
+/**
+ * Makes a best effort to return the locale that should be used for a given element
+ * by checking language tags on ancestors. If no element is provided, it will
+ * start with the document's <body> tag. If no locale can be found, it will use
+ * the browser's locale preference. It will also try to add a region to regionless
+ * locales when there is a partial match with the browser's locale.
+ * @returns a locale string (e.g. 'en-US', 'en', 'de-DE', etc)
+ */
+export function determineDisplayLocale(
+  element: HTMLElement = document.body
+): string {
+  const domLocale = element.closest<HTMLElement>('[lang]')?.lang;
+  if (!domLocale || browserHasRegionData(domLocale)) {
+    // If we can't find a locale in the DOM, or we find a locale without a region that matches the
+    // users's browser locale, use the browser locale.
+    return navigator.language;
+  } else {
+    return domLocale;
+  }
+}
+/**
+ * Returns true if the provided locale only has a language, but the user's
+ * browser settings have the same language with a locale.
+ * @param localeString The locale to check
+ * @returns true if the region can be guessed from the browser settings.
+ */
+function browserHasRegionData(localeString: string): boolean {
+  return (
+    localeString.length == 2 &&
+    navigator.language.startsWith(`${localeString}-`)
+  );
+}

package/test/intl.spec.ts ADDED Viewed

@@ -0,0 +1,104 @@
+import {
+  determineDisplayLocale,
+  dateTimeFormat,
+  relativeTimeFormat
+} from '../src/intl';
+describe('The intl module', () => {
+  beforeEach(() => {
+    // Reset the Dom
+    document.documentElement.innerHTML = '<head></head><body></body>';
+    // Remove language attribute from <html>
+    document.documentElement.removeAttribute('lang');
+    // Reset/set navigator.language to a known value
+    Object.defineProperty(window.navigator, 'language', {
+      value: 'yy-YY',
+      configurable: true
+    });
+  });
+  describe('When determining what locale to use', () => {
+    test('It will determine the display locale from <body> if no locale is provided', () => {
+      document.body.setAttribute('lang', 'xx-XX');
+      expect(determineDisplayLocale()).toBe('xx-XX');
+    });
+    test('It will determine the display locale from <html> if no locale is provided', () => {
+      document.documentElement.setAttribute('lang', 'xx-XX');
+      expect(determineDisplayLocale()).toBe('xx-XX');
+    });
+    test('Given an element with a language attribute, it will determine the locale from that tag', () => {
+      const target = document.createElement('div');
+      target.setAttribute('lang', 'xx-XX');
+      expect(determineDisplayLocale(target)).toBe('xx-XX');
+    });
+    test("Given an element without a language attribute, it will check the element's ancestors for a language attribute", () => {
+      const localeOwner = document.createElement('div');
+      localeOwner.setAttribute('lang', 'xx-XX');
+      localeOwner.innerHTML =
+        '<div><div><span class="target"></span></div></div>';
+      const target =
+        localeOwner.querySelector<HTMLElement>('.target') || undefined;
+      expect(target).not.toBeUndefined();
+      expect(determineDisplayLocale(target)).toBe('xx-XX');
+    });
+    test("If no language tag is found, uses the browser's language", () => {
+      expect(determineDisplayLocale()).toBe('yy-YY');
+    });
+    test('If given a partial match to the browser language, it will pull the region from the browser', () => {
+      document.body.setAttribute('lang', 'yy');
+      expect(determineDisplayLocale()).toBe('yy-YY');
+    });
+  });
+  describe('When creating a DateTimeFormat', () => {
+    const formatOptions: Intl.DateTimeFormatOptions = {};
+    beforeEach(() => {
+      jest.resetAllMocks();
+      jest.spyOn(Intl, 'DateTimeFormat');
+    });
+    it('Calls through to the browser implementation', () => {
+      dateTimeFormat('xx-XX', formatOptions);
+      expect(Intl.DateTimeFormat).toHaveBeenCalledWith('xx-XX', formatOptions);
+    });
+    it('The locale is optional and will defer to `determineDisplayLocale`', () => {
+      document.body.setAttribute('lang', 'xx-XX');
+      dateTimeFormat(formatOptions);
+      expect(Intl.DateTimeFormat).toHaveBeenCalledWith('xx-XX', formatOptions);
+    });
+    it('Maintains optional format options', () => {
+      dateTimeFormat('en-US');
+      expect(Intl.DateTimeFormat).toHaveBeenCalledWith('en-US', undefined);
+    });
+  });
+  describe('When creating a RelativeTimeFormat', () => {
+    const formatOptions: Intl.RelativeTimeFormatOptions = {};
+    beforeEach(() => {
+      jest.resetAllMocks();
+      // This has to be different than the DateTimeFormat mock - probably because of some ES6 class
+      // thing that I can't be bothered to figure out.
+      Object.defineProperty(Intl, 'RelativeTimeFormat', {
+        value: jest.fn()
+      });
+    });
+    it('Calls through to the browser implementation', () => {
+      relativeTimeFormat('xx-XX', formatOptions);
+      expect(Intl.RelativeTimeFormat).toHaveBeenCalledWith(
+        'xx-XX',
+        formatOptions
+      );
+    });
+    it('The locale is optional and will defer to `determineDisplayLocale`', () => {
+      document.body.setAttribute('lang', 'xx-XX');
+      relativeTimeFormat(formatOptions);
+      expect(Intl.RelativeTimeFormat).toHaveBeenCalledWith(
+        'xx-XX',
+        formatOptions
+      );
+    });
+    it('Maintains optional format options', () => {
+      relativeTimeFormat('en-US');
+      expect(Intl.RelativeTimeFormat).toHaveBeenCalledWith('en-US', undefined);
+    });
+  });
+});

package/tsconfig.json CHANGED Viewed

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "noEmitOnError": true,
     "outDir": "dist",
-    "declaration": true
+    "declaration": true,
+    "lib": ["ESNext.Intl", "DOM"]
   },
   "include": ["src", "test"]
 }