@contentful/f36-datetime 4.15.1 → 4.18.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change Log
 
+## 4.18.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-core@4.18.0
+
+## 4.17.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-core@4.17.0
+
+## 4.16.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-core@4.16.0
+
 ## 4.15.1
 
 ### Patch Changes

package/dist/{types.d.ts → index.d.ts}

@@ -1,7 +1,52 @@
-import React from "react";
-import { CommonProps, PropsWithHTMLElement } from "@contentful/f36-core";
-type DateType = Date | string | number;
-type DateFormat = 'fullWithSeconds' | 'full' | 'time' | 'day' | 'weekday';
+import React from 'react';
+import { PropsWithHTMLElement, CommonProps } from '@contentful/f36-core';
+
+declare type DateType = Date | string | number;
+declare type DateFormat = 'fullWithSeconds' | 'full' | 'time' | 'day' | 'weekday';
+
+interface DateTimeOwnProps extends CommonProps {
+    /**
+     * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number
+     */
+    date: DateType;
+    /**
+     * The format in which the date will be presented
+     *
+     * @default full
+     **/
+    format?: DateFormat;
+}
+declare type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;
+/**
+ * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag
+ */
+declare const DateTime: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.TimeHTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.TimeHTMLAttributes<HTMLElement>>, never>, keyof DateTimeOwnProps> & DateTimeOwnProps & React.RefAttributes<HTMLTimeElement>>;
+
+interface RelativeDateTimeInternalProps extends CommonProps {
+    /**
+     * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number
+     */
+    date: DateType;
+    /**
+     * If a value is passed to baseDate, then the component will compare both dates and return the time between them.
+     * If no value is passed then the date will be compared to "now"
+     *
+     * @default "Now"
+     */
+    baseDate?: DateType;
+    /**
+     * Sets the date to be relative only if it is in the current week
+     * @default false
+     */
+    isRelativeToCurrentWeek?: boolean;
+}
+declare type RelativeDateTimeProps = PropsWithHTMLElement<RelativeDateTimeInternalProps, 'time'>;
+/**
+ * The RelativeDateTime will show a `date` relative to "now" or to the `baseDate`
+ * (e.g. in a day, in one month, one month ago, etc).
+ */
+declare const RelativeDateTime: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.TimeHTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.TimeHTMLAttributes<HTMLElement>>, never>, keyof RelativeDateTimeInternalProps> & RelativeDateTimeInternalProps & React.RefAttributes<HTMLTimeElement>>;
+
 /**
  * A funtion that will return a formatted date string. The format will dependend on the option
  * passed in the second argument.
@@ -17,7 +62,7 @@ type DateFormat = 'fullWithSeconds' | 'full' | 'time' | 'day' | 'weekday';
  * @example
  * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns "17 Aug 2021"
  */
-export function formatDateAndTime(date: DateType, format?: DateFormat): string;
+declare function formatDateAndTime(date: DateType, format?: DateFormat): string;
 /**
  * A funtion that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag
  * By default, it will return a string with "YYYY-MM-DDTHH:mm:ss.SSS[Z]" format
@@ -32,7 +77,8 @@ export function formatDateAndTime(date: DateType, format?: DateFormat): string;
  * @example
  * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13
  */
-export function formatMachineReadableDateTime(date: DateType, format?: DateFormat): string;
+declare function formatMachineReadableDateTime(date: DateType, format?: DateFormat): string;
+
 /**
  * A function that will return a string with how far a given date is in the past or future,
  * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.
@@ -48,47 +94,6 @@ export function formatMachineReadableDateTime(date: DateType, format?: DateForma
  * @example
  * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns "in a day"
  */
-export function formatRelativeDateTime(date: DateType, baseDate?: DateType): string;
-interface DateTimeOwnProps extends CommonProps {
-    /**
-     * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number
-     */
-    date: DateType;
-    /**
-     * The format in which the date will be presented
-     *
-     * @default full
-     **/
-    format?: DateFormat;
-}
-export type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;
-/**
- * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag
- */
-export const DateTime: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.TimeHTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.TimeHTMLAttributes<HTMLElement>>, never>, keyof DateTimeOwnProps> & DateTimeOwnProps & React.RefAttributes<HTMLTimeElement>>;
-interface RelativeDateTimeInternalProps extends CommonProps {
-    /**
-     * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number
-     */
-    date: DateType;
-    /**
-     * If a value is passed to baseDate, then the component will compare both dates and return the time between them.
-     * If no value is passed then the date will be compared to "now"
-     *
-     * @default "Now"
-     */
-    baseDate?: DateType;
-    /**
-     * Sets the date to be relative only if it is in the current week
-     * @default false
-     */
-    isRelativeToCurrentWeek?: boolean;
-}
-export type RelativeDateTimeProps = PropsWithHTMLElement<RelativeDateTimeInternalProps, 'time'>;
-/**
- * The RelativeDateTime will show a `date` relative to "now" or to the `baseDate`
- * (e.g. in a day, in one month, one month ago, etc).
- */
-export const RelativeDateTime: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.TimeHTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof React.TimeHTMLAttributes<HTMLElement>>, never>, keyof RelativeDateTimeInternalProps> & RelativeDateTimeInternalProps & React.RefAttributes<HTMLTimeElement>>;
+declare function formatRelativeDateTime(date: DateType, baseDate?: DateType): string;
 
-//# sourceMappingURL=types.d.ts.map
+export { DateTime, DateTimeProps, RelativeDateTime, RelativeDateTimeProps, formatDateAndTime, formatMachineReadableDateTime, formatRelativeDateTime };

package/dist/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var h = require('react');
+var o = require('dayjs');
+var S = require('dayjs/plugin/utc.js');
+var A = require('dayjs/plugin/relativeTime.js');
+var L = require('dayjs/plugin/calendar.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var h__default = /*#__PURE__*/_interopDefaultLegacy(h);
+var o__default = /*#__PURE__*/_interopDefaultLegacy(o);
+var S__default = /*#__PURE__*/_interopDefaultLegacy(S);
+var A__default = /*#__PURE__*/_interopDefaultLegacy(A);
+var L__default = /*#__PURE__*/_interopDefaultLegacy(L);
+
+var W=Object.defineProperty,b=Object.defineProperties;var H=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var Y=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var P=(e,a,t)=>a in e?W(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,f=(e,a)=>{for(var t in a||(a={}))Y.call(a,t)&&P(e,t,a[t]);if(p)for(var t of p(a))v.call(a,t)&&P(e,t,a[t]);return e},D=(e,a)=>b(e,H(a));var s=(e,a)=>{var t={};for(var r in e)Y.call(e,r)&&a.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&p)for(var r of p(e))a.indexOf(r)<0&&v.call(e,r)&&(t[r]=e[r]);return t};o__default["default"].extend(S__default["default"]);function T(e,a="full"){let t;switch(a){case"day":t="DD MMM YYYY";break;case"weekday":t="ddd, DD MMM";break;case"time":t="h:mm A";break;case"fullWithSeconds":t="ddd, DD MMM YYYY [at] h:mm:ss A";break;default:t="ddd, DD MMM YYYY [at] h:mm A";}return o__default["default"](e).format(t)}function m(e,a="full"){let t;switch(a){case"day":t="YYYY-MM-DD";break;case"weekday":t="MM-DD";break;case"time":t="HH:mm:ss.SSS";break;default:t="YYYY-MM-DDTHH:mm:ss.SSS[Z]";}return o__default["default"](e).utc().format(t)}o__default["default"].extend(S__default["default"]);o__default["default"].extend(A__default["default"]);o__default["default"].extend(L__default["default"]);function i(e,a=new Date){return o__default["default"](e).from(a)}function x(e,a=new Date){return o__default["default"](e).isSame(a,"day")?i(e,a):o__default["default"](e).calendar(a,{sameElse:"DD MMM YYYY"})}var F=(R,d)=>{var c=R,{date:e,format:a="full",testId:t="cf-ui-date-time"}=c,r=s(c,["date","format","testId"]);let n=m(e);return h__default["default"].createElement("time",D(f({dateTime:n,"data-test-id":t},r),{ref:d}),T(e,a))},j=h__default["default"].forwardRef(F);o__default["default"].extend(S__default["default"]);o__default["default"].extend(A__default["default"]);o__default["default"].extend(L__default["default"]);var Z=(c,R)=>{var n=c,{date:e,baseDate:a,isRelativeToCurrentWeek:t=!1,testId:r="cf-ui-relative-date-time"}=n,d=s(n,["date","baseDate","isRelativeToCurrentWeek","testId"]);let g=new Date,y=a!=null?a:g,w=o__default["default"](e),E=m(e),u;return t&&!w.isSame(y,"day")?u=x(e,y):u=i(e,y),h__default["default"].createElement("time",D(f({dateTime:E,"data-test-id":r},d),{ref:R}),u)},q=h__default["default"].forwardRef(Z);
+
+exports.DateTime = j;
+exports.RelativeDateTime = q;
+exports.formatDateAndTime = T;
+exports.formatMachineReadableDateTime = m;
+exports.formatRelativeDateTime = i;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DateTime/DateTime.tsx","../src/utils/formatDateTimeUtils.ts","../src/utils/relativeDateTimeUtils.ts","../src/RelativeDateTime/RelativeDateTime.tsx"],"names":["React","dayjs","utcPlugin","formatDateAndTime","date","format","template","formatMachineReadableDateTime","relativeTime","calendarPlugin","formatRelativeDateTime","baseDate","formatRelativeToCurrentWeekDateTime","_DateTime","_a","ref","_b","testId","otherProps","__objRest","machineReadableDate","__spreadProps","__spreadValues","DateTime","_RelativeDateTime","isRelativeToCurrentWeek","now","referenceDate","dayjsDate","relativeDate","RelativeDateTime"],"mappings":"+kBAAA,OAAOA,MAAW,QCAlB,OAAOC,MAAW,QAClB,OAAOC,MAAe,sBACtBD,EAAM,OAAOC,CAAS,EAmBf,SAASC,EACdC,EACAC,EAAqB,OACb,CACR,IAAIC,EAEJ,OAAQD,OACD,MACHC,EAAW,cACX,UACG,UACHA,EAAW,cACX,UACG,OACHA,EAAW,SACX,UACG,kBACHA,EAAW,kCACX,cAEAA,EAAW,+BAGf,OAAOL,EAAMG,CAAI,EAAE,OAAOE,CAAQ,CACpC,CAgBO,SAASC,EACdH,EACAC,EAAqB,OACb,CACR,IAAIC,EAEJ,OAAQD,OACD,MACHC,EAAW,aACX,UACG,UACHA,EAAW,QACX,UACG,OACHA,EAAW,eACX,cAEAA,EAAW,6BAGf,OAAOL,EAAMG,CAAI,EAAE,IAAI,EAAE,OAAOE,CAAQ,CAC1C,CClFA,OAAOL,MAAW,QAClB,OAAOC,MAAe,sBACtB,OAAOM,MAAkB,+BACzB,OAAOC,MAAoB,2BAC3BR,EAAM,OAAOC,CAAS,EACtBD,EAAM,OAAOO,CAAY,EACzBP,EAAM,OAAOQ,CAAc,EAmBpB,SAASC,EACdN,EACAO,EAAqB,IAAI,KACzB,CACA,OAAOV,EAAMG,CAAI,EAAE,KAAKO,CAAQ,CAClC,CAmBO,SAASC,EACdR,EACAO,EAAqB,IAAI,KACzB,CAGA,OAFgBV,EAAMG,CAAI,EAAE,OAAOO,EAAU,KAAK,EAW3CD,EAAuBN,EAAMO,CAAQ,EANnCV,EAAMG,CAAI,EAAE,SAASO,EAAU,CACpC,SAAU,aACZ,CAAC,CAKL,CFxCA,IAAME,EAAY,CAChBC,EAMAC,IACG,CAPH,IAAAC,EAAAF,EACE,MAAAV,EACA,OAAAC,EAAS,OACT,OAAAY,EAAS,iBA7Bb,EA0BED,EAIKE,EAAAC,EAJLH,EAIK,CAHH,OACA,SACA,WAKF,IAAMI,EAAsBb,EAA8BH,CAAI,EAE9D,OACEJ,EAAA,cAAC,OAAAqB,EAAAC,EAAA,CACC,SAAUF,EACV,eAAcH,GACVC,GAHL,CAIC,IAAKH,IAEJZ,EAAkBC,EAAMC,CAAM,CACjC,CAEJ,EAKakB,EAAWvB,EAAM,WAAWa,CAAS,EGnDlD,OAAOb,MAAW,QAOlB,OAAOC,MAAW,QAClB,OAAOC,MAAe,sBACtB,OAAOM,MAAkB,+BACzB,OAAOC,MAAoB,2BAC3BR,EAAM,OAAOC,CAAS,EACtBD,EAAM,OAAOO,CAAY,EACzBP,EAAM,OAAOQ,CAAc,EAiC3B,IAAMe,EAAoB,CACxBV,EAOAC,IACG,CARH,IAAAC,EAAAF,EACE,MAAAV,EACA,SAAAO,EACA,wBAAAc,EAA0B,GAC1B,OAAAR,EAAS,0BAnDb,EA+CED,EAKKE,EAAAC,EALLH,EAKK,CAJH,OACA,WACA,0BACA,WAKF,IAAMU,EAAM,IAAI,KACVC,EAAgBhB,GAAA,KAAAA,EAAYe,EAC5BE,EAAY3B,EAAMG,CAAI,EACtBgB,EAAsBb,EAA8BH,CAAI,EAE1DyB,EAEJ,OAAIJ,GAA2B,CAACG,EAAU,OAAOD,EAAe,KAAK,EAOnEE,EAAejB,EAAoCR,EAAMuB,CAAa,EAGtEE,EAAenB,EAAuBN,EAAMuB,CAAa,EAIzD3B,EAAA,cAAC,OAAAqB,EAAAC,EAAA,CACC,SAAUF,EACV,eAAcH,GACVC,GAHL,CAIC,IAAKH,IAEJc,CACH,CAEJ,EAMaC,EAAmB9B,EAAM,WAAWwB,CAAiB","sourcesContent":["import React from 'react';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { DateType, DateFormat } from '../types';\nimport { formatDateAndTime, formatMachineReadableDateTime } from '../utils';\n\ninterface DateTimeOwnProps extends CommonProps {\n  /**\n   * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n   */\n  date: DateType;\n  /**\n   * The format in which the date will be presented\n   *\n   * @default full\n   **/\n  format?: DateFormat;\n}\n\nexport type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;\n\nconst _DateTime = (\n  {\n    date,\n    format = 'full',\n    testId = 'cf-ui-date-time',\n    ...otherProps\n  }: ExpandProps<DateTimeProps>,\n  ref: React.Ref<HTMLTimeElement>,\n) => {\n  const machineReadableDate = formatMachineReadableDateTime(date);\n\n  return (\n    <time\n      dateTime={machineReadableDate}\n      data-test-id={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {formatDateAndTime(date, format)}\n    </time>\n  );\n};\n\n/**\n * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag\n */\nexport const DateTime = React.forwardRef(_DateTime);\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc.js';\ndayjs.extend(utcPlugin);\n\nimport type { DateType, DateFormat } from '../types';\n\n/**\n * A funtion that will return a formatted date string. The format will dependend on the option\n * passed in the second argument.\n * By default, it will return a string with Forma 36’s \"full\" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00') // returns \"Tue, 17 Aug 2021 at 3:45 PM\"\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns \"17 Aug 2021\"\n */\nexport function formatDateAndTime(\n  date: DateType,\n  format: DateFormat = 'full',\n): string {\n  let template: string;\n\n  switch (format) {\n    case 'day':\n      template = 'DD MMM YYYY'; // 17 Aug 2021\n      break;\n    case 'weekday':\n      template = 'ddd, DD MMM'; // Tue, 17 Aug\n      break;\n    case 'time':\n      template = 'h:mm A'; // 3:45 PM\n      break;\n    case 'fullWithSeconds':\n      template = 'ddd, DD MMM YYYY [at] h:mm:ss A'; // Tue, 17 Aug 2021 at 3:45:67 PM\n      break;\n    default:\n      template = 'ddd, DD MMM YYYY [at] h:mm A'; // Tue, 17 Aug 2021 at 3:45 PM\n  }\n\n  return dayjs(date).format(template);\n}\n\n/**\n * A funtion that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag\n * By default, it will return a string with \"YYYY-MM-DDTHH:mm:ss.SSS[Z]\" format\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z\n *\n * @example\n * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13\n */\nexport function formatMachineReadableDateTime(\n  date: DateType,\n  format: DateFormat = 'full',\n): string {\n  let template: string;\n\n  switch (format) {\n    case 'day':\n      template = 'YYYY-MM-DD'; // 2019-08-24\n      break;\n    case 'weekday':\n      template = 'MM-DD'; // 08-24\n      break;\n    case 'time':\n      template = 'HH:mm:ss.SSS'; // 15:44:07.000\n      break;\n    default:\n      template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]'; // 2019-08-24T15:44:07.000Z\n  }\n\n  return dayjs(date).utc().format(template);\n}\n\n/**\n * @example\n * > formatDate(date)\n * 13 Aug 2019\n */\nexport const formatDate = (date: DateType): string => {\n  return formatDateAndTime(date, 'day');\n};\n\n/**\n * @example\n * > formatTime(date)\n * 8:00 AM\n */\nexport const formatTime = (date: DateType): string => {\n  return formatDateAndTime(date, 'time');\n};\n\n/**\n * @example\n * > formatWeekdayDate(date)\n * Mon, 12 Aug\n */\nexport const formatWeekdayDate = (date: DateType): string => {\n  return formatDateAndTime(date, 'weekday');\n};\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc.js';\nimport relativeTime from 'dayjs/plugin/relativeTime.js';\nimport calendarPlugin from 'dayjs/plugin/calendar.js';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\n\n/**\n * A function that will return a string with how far a given date is in the past or future,\n * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeDateTime('2021-08-17T15:45:00') // returns \"a day ago\"\n *\n * @example\n * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"in a day\"\n */\nexport function formatRelativeDateTime(\n  date: DateType,\n  baseDate: DateType = new Date(),\n) {\n  return dayjs(date).from(baseDate);\n}\n\n/**\n * A function that formats a date relative to Today or to the `baseDate` if passed.\n * If the date is not today, it will return a string with \"Yesterday ...\", \"Tomorrow ...\", etc\n * If the date is not in the current week, it return a string with \"DD MMM YYYY\" format\n * If the date is today, it will return a string with \"... ago\" or \"in ...\"\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns \"Yesterday at 3:45 PM\"\n *\n * @example\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"Tomorrow at 3:45 PM\"\n */\nexport function formatRelativeToCurrentWeekDateTime(\n  date: DateType,\n  baseDate: DateType = new Date(),\n) {\n  const isToday = dayjs(date).isSame(baseDate, 'day');\n\n  if (!isToday) {\n    // if the date is not today, we display it with \"Yesterday\", \"Tomorrow\", etc.\n    // and if the date is not in the current week then it will display \"17 Aug 2021\"\n    return dayjs(date).calendar(baseDate, {\n      sameElse: 'DD MMM YYYY',\n    });\n  }\n\n  // returns \"... ago\"\n  return formatRelativeDateTime(date, baseDate);\n}\n","import React from 'react';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\n\nimport dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc.js';\nimport relativeTime from 'dayjs/plugin/relativeTime.js';\nimport calendarPlugin from 'dayjs/plugin/calendar.js';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\nimport {\n  formatMachineReadableDateTime,\n  formatRelativeDateTime,\n  formatRelativeToCurrentWeekDateTime,\n} from '../utils';\n\ninterface RelativeDateTimeInternalProps extends CommonProps {\n  /**\n   * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n   */\n  date: DateType;\n  /**\n   * If a value is passed to baseDate, then the component will compare both dates and return the time between them.\n   * If no value is passed then the date will be compared to \"now\"\n   *\n   * @default \"Now\"\n   */\n  baseDate?: DateType;\n  /**\n   * Sets the date to be relative only if it is in the current week\n   * @default false\n   */\n  isRelativeToCurrentWeek?: boolean;\n}\n\nexport type RelativeDateTimeProps = PropsWithHTMLElement<\n  RelativeDateTimeInternalProps,\n  'time'\n>;\n\nconst _RelativeDateTime = (\n  {\n    date,\n    baseDate,\n    isRelativeToCurrentWeek = false,\n    testId = 'cf-ui-relative-date-time',\n    ...otherProps\n  }: ExpandProps<RelativeDateTimeProps>,\n  ref: React.Ref<HTMLTimeElement>,\n) => {\n  const now = new Date();\n  const referenceDate = baseDate ?? now;\n  const dayjsDate = dayjs(date);\n  const machineReadableDate = formatMachineReadableDateTime(date);\n\n  let relativeDate: string;\n\n  if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) {\n    /**\n     * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc\n     * or, if the date is not in the current week, it displays \"17 Aug 2021\"\n     *\n     * check formatRelativeToCurrentWeekDateTime for more details\n     */\n    relativeDate = formatRelativeToCurrentWeekDateTime(date, referenceDate);\n  } else {\n    // otherwise we display it with \"... ago\" or \"in ...\" notation\n    relativeDate = formatRelativeDateTime(date, referenceDate);\n  }\n\n  return (\n    <time\n      dateTime={machineReadableDate}\n      data-test-id={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {relativeDate}\n    </time>\n  );\n};\n\n/**\n * The RelativeDateTime will show a `date` relative to \"now\" or to the `baseDate`\n * (e.g. in a day, in one month, one month ago, etc).\n */\nexport const RelativeDateTime = React.forwardRef(_RelativeDateTime);\n"]}

package/dist/index.mjs

@@ -0,0 +1,10 @@
+import h from 'react';
+import o from 'dayjs';
+import S from 'dayjs/plugin/utc.js';
+import A from 'dayjs/plugin/relativeTime.js';
+import L from 'dayjs/plugin/calendar.js';
+
+var W=Object.defineProperty,b=Object.defineProperties;var H=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var Y=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var P=(e,a,t)=>a in e?W(e,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[a]=t,f=(e,a)=>{for(var t in a||(a={}))Y.call(a,t)&&P(e,t,a[t]);if(p)for(var t of p(a))v.call(a,t)&&P(e,t,a[t]);return e},D=(e,a)=>b(e,H(a));var s=(e,a)=>{var t={};for(var r in e)Y.call(e,r)&&a.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&p)for(var r of p(e))a.indexOf(r)<0&&v.call(e,r)&&(t[r]=e[r]);return t};o.extend(S);function T(e,a="full"){let t;switch(a){case"day":t="DD MMM YYYY";break;case"weekday":t="ddd, DD MMM";break;case"time":t="h:mm A";break;case"fullWithSeconds":t="ddd, DD MMM YYYY [at] h:mm:ss A";break;default:t="ddd, DD MMM YYYY [at] h:mm A";}return o(e).format(t)}function m(e,a="full"){let t;switch(a){case"day":t="YYYY-MM-DD";break;case"weekday":t="MM-DD";break;case"time":t="HH:mm:ss.SSS";break;default:t="YYYY-MM-DDTHH:mm:ss.SSS[Z]";}return o(e).utc().format(t)}o.extend(S);o.extend(A);o.extend(L);function i(e,a=new Date){return o(e).from(a)}function x(e,a=new Date){return o(e).isSame(a,"day")?i(e,a):o(e).calendar(a,{sameElse:"DD MMM YYYY"})}var F=(R,d)=>{var c=R,{date:e,format:a="full",testId:t="cf-ui-date-time"}=c,r=s(c,["date","format","testId"]);let n=m(e);return h.createElement("time",D(f({dateTime:n,"data-test-id":t},r),{ref:d}),T(e,a))},j=h.forwardRef(F);o.extend(S);o.extend(A);o.extend(L);var Z=(c,R)=>{var n=c,{date:e,baseDate:a,isRelativeToCurrentWeek:t=!1,testId:r="cf-ui-relative-date-time"}=n,d=s(n,["date","baseDate","isRelativeToCurrentWeek","testId"]);let g=new Date,y=a!=null?a:g,w=o(e),E=m(e),u;return t&&!w.isSame(y,"day")?u=x(e,y):u=i(e,y),h.createElement("time",D(f({dateTime:E,"data-test-id":r},d),{ref:R}),u)},q=h.forwardRef(Z);
+
+export { j as DateTime, q as RelativeDateTime, T as formatDateAndTime, m as formatMachineReadableDateTime, i as formatRelativeDateTime };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DateTime/DateTime.tsx","../src/utils/formatDateTimeUtils.ts","../src/utils/relativeDateTimeUtils.ts","../src/RelativeDateTime/RelativeDateTime.tsx"],"names":["React","dayjs","utcPlugin","formatDateAndTime","date","format","template","formatMachineReadableDateTime","relativeTime","calendarPlugin","formatRelativeDateTime","baseDate","formatRelativeToCurrentWeekDateTime","_DateTime","_a","ref","_b","testId","otherProps","__objRest","machineReadableDate","__spreadProps","__spreadValues","DateTime","_RelativeDateTime","isRelativeToCurrentWeek","now","referenceDate","dayjsDate","relativeDate","RelativeDateTime"],"mappings":"+kBAAA,OAAOA,MAAW,QCAlB,OAAOC,MAAW,QAClB,OAAOC,MAAe,sBACtBD,EAAM,OAAOC,CAAS,EAmBf,SAASC,EACdC,EACAC,EAAqB,OACb,CACR,IAAIC,EAEJ,OAAQD,OACD,MACHC,EAAW,cACX,UACG,UACHA,EAAW,cACX,UACG,OACHA,EAAW,SACX,UACG,kBACHA,EAAW,kCACX,cAEAA,EAAW,+BAGf,OAAOL,EAAMG,CAAI,EAAE,OAAOE,CAAQ,CACpC,CAgBO,SAASC,EACdH,EACAC,EAAqB,OACb,CACR,IAAIC,EAEJ,OAAQD,OACD,MACHC,EAAW,aACX,UACG,UACHA,EAAW,QACX,UACG,OACHA,EAAW,eACX,cAEAA,EAAW,6BAGf,OAAOL,EAAMG,CAAI,EAAE,IAAI,EAAE,OAAOE,CAAQ,CAC1C,CClFA,OAAOL,MAAW,QAClB,OAAOC,MAAe,sBACtB,OAAOM,MAAkB,+BACzB,OAAOC,MAAoB,2BAC3BR,EAAM,OAAOC,CAAS,EACtBD,EAAM,OAAOO,CAAY,EACzBP,EAAM,OAAOQ,CAAc,EAmBpB,SAASC,EACdN,EACAO,EAAqB,IAAI,KACzB,CACA,OAAOV,EAAMG,CAAI,EAAE,KAAKO,CAAQ,CAClC,CAmBO,SAASC,EACdR,EACAO,EAAqB,IAAI,KACzB,CAGA,OAFgBV,EAAMG,CAAI,EAAE,OAAOO,EAAU,KAAK,EAW3CD,EAAuBN,EAAMO,CAAQ,EANnCV,EAAMG,CAAI,EAAE,SAASO,EAAU,CACpC,SAAU,aACZ,CAAC,CAKL,CFxCA,IAAME,EAAY,CAChBC,EAMAC,IACG,CAPH,IAAAC,EAAAF,EACE,MAAAV,EACA,OAAAC,EAAS,OACT,OAAAY,EAAS,iBA7Bb,EA0BED,EAIKE,EAAAC,EAJLH,EAIK,CAHH,OACA,SACA,WAKF,IAAMI,EAAsBb,EAA8BH,CAAI,EAE9D,OACEJ,EAAA,cAAC,OAAAqB,EAAAC,EAAA,CACC,SAAUF,EACV,eAAcH,GACVC,GAHL,CAIC,IAAKH,IAEJZ,EAAkBC,EAAMC,CAAM,CACjC,CAEJ,EAKakB,EAAWvB,EAAM,WAAWa,CAAS,EGnDlD,OAAOb,MAAW,QAOlB,OAAOC,MAAW,QAClB,OAAOC,MAAe,sBACtB,OAAOM,MAAkB,+BACzB,OAAOC,MAAoB,2BAC3BR,EAAM,OAAOC,CAAS,EACtBD,EAAM,OAAOO,CAAY,EACzBP,EAAM,OAAOQ,CAAc,EAiC3B,IAAMe,EAAoB,CACxBV,EAOAC,IACG,CARH,IAAAC,EAAAF,EACE,MAAAV,EACA,SAAAO,EACA,wBAAAc,EAA0B,GAC1B,OAAAR,EAAS,0BAnDb,EA+CED,EAKKE,EAAAC,EALLH,EAKK,CAJH,OACA,WACA,0BACA,WAKF,IAAMU,EAAM,IAAI,KACVC,EAAgBhB,GAAA,KAAAA,EAAYe,EAC5BE,EAAY3B,EAAMG,CAAI,EACtBgB,EAAsBb,EAA8BH,CAAI,EAE1DyB,EAEJ,OAAIJ,GAA2B,CAACG,EAAU,OAAOD,EAAe,KAAK,EAOnEE,EAAejB,EAAoCR,EAAMuB,CAAa,EAGtEE,EAAenB,EAAuBN,EAAMuB,CAAa,EAIzD3B,EAAA,cAAC,OAAAqB,EAAAC,EAAA,CACC,SAAUF,EACV,eAAcH,GACVC,GAHL,CAIC,IAAKH,IAEJc,CACH,CAEJ,EAMaC,EAAmB9B,EAAM,WAAWwB,CAAiB","sourcesContent":["import React from 'react';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { DateType, DateFormat } from '../types';\nimport { formatDateAndTime, formatMachineReadableDateTime } from '../utils';\n\ninterface DateTimeOwnProps extends CommonProps {\n  /**\n   * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n   */\n  date: DateType;\n  /**\n   * The format in which the date will be presented\n   *\n   * @default full\n   **/\n  format?: DateFormat;\n}\n\nexport type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;\n\nconst _DateTime = (\n  {\n    date,\n    format = 'full',\n    testId = 'cf-ui-date-time',\n    ...otherProps\n  }: ExpandProps<DateTimeProps>,\n  ref: React.Ref<HTMLTimeElement>,\n) => {\n  const machineReadableDate = formatMachineReadableDateTime(date);\n\n  return (\n    <time\n      dateTime={machineReadableDate}\n      data-test-id={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {formatDateAndTime(date, format)}\n    </time>\n  );\n};\n\n/**\n * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag\n */\nexport const DateTime = React.forwardRef(_DateTime);\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc.js';\ndayjs.extend(utcPlugin);\n\nimport type { DateType, DateFormat } from '../types';\n\n/**\n * A funtion that will return a formatted date string. The format will dependend on the option\n * passed in the second argument.\n * By default, it will return a string with Forma 36’s \"full\" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00') // returns \"Tue, 17 Aug 2021 at 3:45 PM\"\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns \"17 Aug 2021\"\n */\nexport function formatDateAndTime(\n  date: DateType,\n  format: DateFormat = 'full',\n): string {\n  let template: string;\n\n  switch (format) {\n    case 'day':\n      template = 'DD MMM YYYY'; // 17 Aug 2021\n      break;\n    case 'weekday':\n      template = 'ddd, DD MMM'; // Tue, 17 Aug\n      break;\n    case 'time':\n      template = 'h:mm A'; // 3:45 PM\n      break;\n    case 'fullWithSeconds':\n      template = 'ddd, DD MMM YYYY [at] h:mm:ss A'; // Tue, 17 Aug 2021 at 3:45:67 PM\n      break;\n    default:\n      template = 'ddd, DD MMM YYYY [at] h:mm A'; // Tue, 17 Aug 2021 at 3:45 PM\n  }\n\n  return dayjs(date).format(template);\n}\n\n/**\n * A funtion that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag\n * By default, it will return a string with \"YYYY-MM-DDTHH:mm:ss.SSS[Z]\" format\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z\n *\n * @example\n * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13\n */\nexport function formatMachineReadableDateTime(\n  date: DateType,\n  format: DateFormat = 'full',\n): string {\n  let template: string;\n\n  switch (format) {\n    case 'day':\n      template = 'YYYY-MM-DD'; // 2019-08-24\n      break;\n    case 'weekday':\n      template = 'MM-DD'; // 08-24\n      break;\n    case 'time':\n      template = 'HH:mm:ss.SSS'; // 15:44:07.000\n      break;\n    default:\n      template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]'; // 2019-08-24T15:44:07.000Z\n  }\n\n  return dayjs(date).utc().format(template);\n}\n\n/**\n * @example\n * > formatDate(date)\n * 13 Aug 2019\n */\nexport const formatDate = (date: DateType): string => {\n  return formatDateAndTime(date, 'day');\n};\n\n/**\n * @example\n * > formatTime(date)\n * 8:00 AM\n */\nexport const formatTime = (date: DateType): string => {\n  return formatDateAndTime(date, 'time');\n};\n\n/**\n * @example\n * > formatWeekdayDate(date)\n * Mon, 12 Aug\n */\nexport const formatWeekdayDate = (date: DateType): string => {\n  return formatDateAndTime(date, 'weekday');\n};\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc.js';\nimport relativeTime from 'dayjs/plugin/relativeTime.js';\nimport calendarPlugin from 'dayjs/plugin/calendar.js';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\n\n/**\n * A function that will return a string with how far a given date is in the past or future,\n * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeDateTime('2021-08-17T15:45:00') // returns \"a day ago\"\n *\n * @example\n * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"in a day\"\n */\nexport function formatRelativeDateTime(\n  date: DateType,\n  baseDate: DateType = new Date(),\n) {\n  return dayjs(date).from(baseDate);\n}\n\n/**\n * A function that formats a date relative to Today or to the `baseDate` if passed.\n * If the date is not today, it will return a string with \"Yesterday ...\", \"Tomorrow ...\", etc\n * If the date is not in the current week, it return a string with \"DD MMM YYYY\" format\n * If the date is today, it will return a string with \"... ago\" or \"in ...\"\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns \"Yesterday at 3:45 PM\"\n *\n * @example\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"Tomorrow at 3:45 PM\"\n */\nexport function formatRelativeToCurrentWeekDateTime(\n  date: DateType,\n  baseDate: DateType = new Date(),\n) {\n  const isToday = dayjs(date).isSame(baseDate, 'day');\n\n  if (!isToday) {\n    // if the date is not today, we display it with \"Yesterday\", \"Tomorrow\", etc.\n    // and if the date is not in the current week then it will display \"17 Aug 2021\"\n    return dayjs(date).calendar(baseDate, {\n      sameElse: 'DD MMM YYYY',\n    });\n  }\n\n  // returns \"... ago\"\n  return formatRelativeDateTime(date, baseDate);\n}\n","import React from 'react';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\n\nimport dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc.js';\nimport relativeTime from 'dayjs/plugin/relativeTime.js';\nimport calendarPlugin from 'dayjs/plugin/calendar.js';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\nimport {\n  formatMachineReadableDateTime,\n  formatRelativeDateTime,\n  formatRelativeToCurrentWeekDateTime,\n} from '../utils';\n\ninterface RelativeDateTimeInternalProps extends CommonProps {\n  /**\n   * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n   */\n  date: DateType;\n  /**\n   * If a value is passed to baseDate, then the component will compare both dates and return the time between them.\n   * If no value is passed then the date will be compared to \"now\"\n   *\n   * @default \"Now\"\n   */\n  baseDate?: DateType;\n  /**\n   * Sets the date to be relative only if it is in the current week\n   * @default false\n   */\n  isRelativeToCurrentWeek?: boolean;\n}\n\nexport type RelativeDateTimeProps = PropsWithHTMLElement<\n  RelativeDateTimeInternalProps,\n  'time'\n>;\n\nconst _RelativeDateTime = (\n  {\n    date,\n    baseDate,\n    isRelativeToCurrentWeek = false,\n    testId = 'cf-ui-relative-date-time',\n    ...otherProps\n  }: ExpandProps<RelativeDateTimeProps>,\n  ref: React.Ref<HTMLTimeElement>,\n) => {\n  const now = new Date();\n  const referenceDate = baseDate ?? now;\n  const dayjsDate = dayjs(date);\n  const machineReadableDate = formatMachineReadableDateTime(date);\n\n  let relativeDate: string;\n\n  if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) {\n    /**\n     * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc\n     * or, if the date is not in the current week, it displays \"17 Aug 2021\"\n     *\n     * check formatRelativeToCurrentWeekDateTime for more details\n     */\n    relativeDate = formatRelativeToCurrentWeekDateTime(date, referenceDate);\n  } else {\n    // otherwise we display it with \"... ago\" or \"in ...\" notation\n    relativeDate = formatRelativeDateTime(date, referenceDate);\n  }\n\n  return (\n    <time\n      dateTime={machineReadableDate}\n      data-test-id={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {relativeDate}\n    </time>\n  );\n};\n\n/**\n * The RelativeDateTime will show a `date` relative to \"now\" or to the `baseDate`\n * (e.g. in a day, in one month, one month ago, etc).\n */\nexport const RelativeDateTime = React.forwardRef(_RelativeDateTime);\n"]}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@contentful/f36-datetime",
-  "version": "4.15.1",
+  "version": "4.18.0",
   "description": "Forma 36: DateTime component",
   "scripts": {
-    "build": "parcel build"
+    "build": "tsup"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "^4.15.1",
+    "@contentful/f36-core": "^4.18.0",
     "@contentful/f36-tokens": "^4.0.1",
     "dayjs": "^1.10.6",
     "emotion": "^10.0.17"
@@ -19,9 +19,9 @@
   "files": [
     "dist"
   ],
-  "main": "dist/main.js",
-  "module": "dist/module.js",
-  "types": "dist/types.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "sideEffects": false,
   "browserslist": "extends @contentful/browserslist-config",

package/dist/main.js

@@ -1,141 +0,0 @@
-var $iSxHR$react = require("react");
-var $iSxHR$dayjs = require("dayjs");
-var $iSxHR$dayjspluginutc = require("dayjs/plugin/utc");
-var $iSxHR$dayjspluginrelativeTime = require("dayjs/plugin/relativeTime");
-var $iSxHR$dayjsplugincalendar = require("dayjs/plugin/calendar");
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-$parcel$export(module.exports, "DateTime", () => $8c9ef2783da7ec5f$export$82f9ebd9adeba146);
-$parcel$export(module.exports, "RelativeDateTime", () => $de66f20f0f273947$export$6de14fd95adb1c8a);
-$parcel$export(module.exports, "formatDateAndTime", () => $fe3d2807f48471b7$export$de4eb09f10f9c95e);
-$parcel$export(module.exports, "formatMachineReadableDateTime", () => $fe3d2807f48471b7$export$5fb913e47d486079);
-$parcel$export(module.exports, "formatRelativeDateTime", () => $4e7e5146bc048e19$export$68534c3ecebfa124);
-
-
-
-(0, ($parcel$interopDefault($iSxHR$dayjs))).extend((0, ($parcel$interopDefault($iSxHR$dayjspluginutc))));
-function $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, format = "full") {
-    let template;
-    switch(format){
-        case "day":
-            template = "DD MMM YYYY"; // 17 Aug 2021
-            break;
-        case "weekday":
-            template = "ddd, DD MMM"; // Tue, 17 Aug
-            break;
-        case "time":
-            template = "h:mm A"; // 3:45 PM
-            break;
-        case "fullWithSeconds":
-            template = "ddd, DD MMM YYYY [at] h:mm:ss A"; // Tue, 17 Aug 2021 at 3:45:67 PM
-            break;
-        default:
-            template = "ddd, DD MMM YYYY [at] h:mm A";
-    }
-    return (0, ($parcel$interopDefault($iSxHR$dayjs)))(date).format(template);
-}
-function $fe3d2807f48471b7$export$5fb913e47d486079(date, format = "full") {
-    let template;
-    switch(format){
-        case "day":
-            template = "YYYY-MM-DD"; // 2019-08-24
-            break;
-        case "weekday":
-            template = "MM-DD"; // 08-24
-            break;
-        case "time":
-            template = "HH:mm:ss.SSS"; // 15:44:07.000
-            break;
-        default:
-            template = "YYYY-MM-DDTHH:mm:ss.SSS[Z]";
-    }
-    return (0, ($parcel$interopDefault($iSxHR$dayjs)))(date).utc().format(template);
-}
-const $fe3d2807f48471b7$export$3ae94a2503e890a1 = (date)=>{
-    return $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, "day");
-};
-const $fe3d2807f48471b7$export$3203edd9e5edd663 = (date)=>{
-    return $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, "time");
-};
-const $fe3d2807f48471b7$export$b89623867a65b725 = (date)=>{
-    return $fe3d2807f48471b7$export$de4eb09f10f9c95e(date, "weekday");
-};
-
-
-
-
-
-(0, ($parcel$interopDefault($iSxHR$dayjs))).extend((0, ($parcel$interopDefault($iSxHR$dayjspluginutc))));
-(0, ($parcel$interopDefault($iSxHR$dayjs))).extend((0, ($parcel$interopDefault($iSxHR$dayjspluginrelativeTime))));
-(0, ($parcel$interopDefault($iSxHR$dayjs))).extend((0, ($parcel$interopDefault($iSxHR$dayjsplugincalendar))));
-function $4e7e5146bc048e19$export$68534c3ecebfa124(date, baseDate = new Date()) {
-    return (0, ($parcel$interopDefault($iSxHR$dayjs)))(date).from(baseDate);
-}
-function $4e7e5146bc048e19$export$aa1a2def90bfd930(date, baseDate = new Date()) {
-    const isToday = (0, ($parcel$interopDefault($iSxHR$dayjs)))(date).isSame(baseDate, "day");
-    if (!isToday) // if the date is not today, we display it with "Yesterday", "Tomorrow", etc.
-    // and if the date is not in the current week then it will display "17 Aug 2021"
-    return (0, ($parcel$interopDefault($iSxHR$dayjs)))(date).calendar(baseDate, {
-        sameElse: "DD MMM YYYY"
-    });
-     // returns "... ago"
-    return $4e7e5146bc048e19$export$68534c3ecebfa124(date, baseDate);
-}
-
-
-
-const $8c9ef2783da7ec5f$var$_DateTime = ({ date: date , format: format = "full" , testId: testId = "cf-ui-date-time" , ...otherProps }, ref)=>{
-    const machineReadableDate = (0, $fe3d2807f48471b7$export$5fb913e47d486079)(date);
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($iSxHR$react))).createElement("time", {
-        dateTime: machineReadableDate,
-        "data-test-id": testId,
-        ...otherProps,
-        ref: ref
-    }, (0, $fe3d2807f48471b7$export$de4eb09f10f9c95e)(date, format));
-};
-const $8c9ef2783da7ec5f$export$82f9ebd9adeba146 = /*#__PURE__*/ (0, ($parcel$interopDefault($iSxHR$react))).forwardRef($8c9ef2783da7ec5f$var$_DateTime);
-
-
-
-
-
-
-
-
-(0, ($parcel$interopDefault($iSxHR$dayjs))).extend((0, ($parcel$interopDefault($iSxHR$dayjspluginutc))));
-(0, ($parcel$interopDefault($iSxHR$dayjs))).extend((0, ($parcel$interopDefault($iSxHR$dayjspluginrelativeTime))));
-(0, ($parcel$interopDefault($iSxHR$dayjs))).extend((0, ($parcel$interopDefault($iSxHR$dayjsplugincalendar))));
-const $de66f20f0f273947$var$_RelativeDateTime = ({ date: date , baseDate: baseDate , isRelativeToCurrentWeek: isRelativeToCurrentWeek = false , testId: testId = "cf-ui-relative-date-time" , ...otherProps }, ref)=>{
-    const now = new Date();
-    const referenceDate = baseDate !== null && baseDate !== void 0 ? baseDate : now;
-    const dayjsDate = (0, ($parcel$interopDefault($iSxHR$dayjs)))(date);
-    const machineReadableDate = (0, $fe3d2807f48471b7$export$5fb913e47d486079)(date);
-    let relativeDate;
-    if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, "day")) /**
-     * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc
-     * or, if the date is not in the current week, it displays "17 Aug 2021"
-     *
-     * check formatRelativeToCurrentWeekDateTime for more details
-     */ relativeDate = (0, $4e7e5146bc048e19$export$aa1a2def90bfd930)(date, referenceDate);
-    else // otherwise we display it with "... ago" or "in ..." notation
-    relativeDate = (0, $4e7e5146bc048e19$export$68534c3ecebfa124)(date, referenceDate);
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($iSxHR$react))).createElement("time", {
-        dateTime: machineReadableDate,
-        "data-test-id": testId,
-        ...otherProps,
-        ref: ref
-    }, relativeDate);
-};
-const $de66f20f0f273947$export$6de14fd95adb1c8a = /*#__PURE__*/ (0, ($parcel$interopDefault($iSxHR$react))).forwardRef($de66f20f0f273947$var$_RelativeDateTime);
-
-
-
-
-
-//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/components/datetime/src/index.ts","packages/components/datetime/src/DateTime/DateTime.tsx","packages/components/datetime/src/utils/index.ts","packages/components/datetime/src/utils/formatDateTimeUtils.ts","packages/components/datetime/src/utils/relativeDateTimeUtils.ts","packages/components/datetime/src/RelativeDateTime/RelativeDateTime.tsx"],"sourcesContent":["export { DateTime } from './DateTime/DateTime';\nexport type { DateTimeProps } from './DateTime/DateTime';\nexport { RelativeDateTime } from './RelativeDateTime/RelativeDateTime';\nexport type { RelativeDateTimeProps } from './RelativeDateTime/RelativeDateTime';\nexport {\n  formatDateAndTime,\n  formatMachineReadableDateTime,\n  formatRelativeDateTime,\n} from './utils';\n","import React from 'react';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { DateType, DateFormat } from '../types';\nimport { formatDateAndTime, formatMachineReadableDateTime } from '../utils';\n\ninterface DateTimeOwnProps extends CommonProps {\n  /**\n   * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n   */\n  date: DateType;\n  /**\n   * The format in which the date will be presented\n   *\n   * @default full\n   **/\n  format?: DateFormat;\n}\n\nexport type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;\n\nconst _DateTime = (\n  {\n    date,\n    format = 'full',\n    testId = 'cf-ui-date-time',\n    ...otherProps\n  }: ExpandProps<DateTimeProps>,\n  ref: React.Ref<HTMLTimeElement>,\n) => {\n  const machineReadableDate = formatMachineReadableDateTime(date);\n\n  return (\n    <time\n      dateTime={machineReadableDate}\n      data-test-id={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {formatDateAndTime(date, format)}\n    </time>\n  );\n};\n\n/**\n * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag\n */\nexport const DateTime = React.forwardRef(_DateTime);\n","export {\n  formatDateAndTime,\n  formatMachineReadableDateTime,\n  formatDate,\n  formatTime,\n  formatWeekdayDate,\n} from './formatDateTimeUtils';\n\nexport {\n  formatRelativeDateTime,\n  formatRelativeToCurrentWeekDateTime,\n} from './relativeDateTimeUtils';\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\ndayjs.extend(utcPlugin);\n\nimport type { DateType, DateFormat } from '../types';\n\n/**\n * A funtion that will return a formatted date string. The format will dependend on the option\n * passed in the second argument.\n * By default, it will return a string with Forma 36’s \"full\" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00') // returns \"Tue, 17 Aug 2021 at 3:45 PM\"\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns \"17 Aug 2021\"\n */\nexport function formatDateAndTime(\n  date: DateType,\n  format: DateFormat = 'full',\n): string {\n  let template: string;\n\n  switch (format) {\n    case 'day':\n      template = 'DD MMM YYYY'; // 17 Aug 2021\n      break;\n    case 'weekday':\n      template = 'ddd, DD MMM'; // Tue, 17 Aug\n      break;\n    case 'time':\n      template = 'h:mm A'; // 3:45 PM\n      break;\n    case 'fullWithSeconds':\n      template = 'ddd, DD MMM YYYY [at] h:mm:ss A'; // Tue, 17 Aug 2021 at 3:45:67 PM\n      break;\n    default:\n      template = 'ddd, DD MMM YYYY [at] h:mm A'; // Tue, 17 Aug 2021 at 3:45 PM\n  }\n\n  return dayjs(date).format(template);\n}\n\n/**\n * A funtion that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag\n * By default, it will return a string with \"YYYY-MM-DDTHH:mm:ss.SSS[Z]\" format\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z\n *\n * @example\n * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13\n */\nexport function formatMachineReadableDateTime(\n  date: DateType,\n  format: DateFormat = 'full',\n): string {\n  let template: string;\n\n  switch (format) {\n    case 'day':\n      template = 'YYYY-MM-DD'; // 2019-08-24\n      break;\n    case 'weekday':\n      template = 'MM-DD'; // 08-24\n      break;\n    case 'time':\n      template = 'HH:mm:ss.SSS'; // 15:44:07.000\n      break;\n    default:\n      template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]'; // 2019-08-24T15:44:07.000Z\n  }\n\n  return dayjs(date).utc().format(template);\n}\n\n/**\n * @example\n * > formatDate(date)\n * 13 Aug 2019\n */\nexport const formatDate = (date: DateType): string => {\n  return formatDateAndTime(date, 'day');\n};\n\n/**\n * @example\n * > formatTime(date)\n * 8:00 AM\n */\nexport const formatTime = (date: DateType): string => {\n  return formatDateAndTime(date, 'time');\n};\n\n/**\n * @example\n * > formatWeekdayDate(date)\n * Mon, 12 Aug\n */\nexport const formatWeekdayDate = (date: DateType): string => {\n  return formatDateAndTime(date, 'weekday');\n};\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\n\n/**\n * A function that will return a string with how far a given date is in the past or future,\n * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeDateTime('2021-08-17T15:45:00') // returns \"a day ago\"\n *\n * @example\n * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"in a day\"\n */\nexport function formatRelativeDateTime(\n  date: DateType,\n  baseDate: DateType = new Date(),\n) {\n  return dayjs(date).from(baseDate);\n}\n\n/**\n * A function that formats a date relative to Today or to the `baseDate` if passed.\n * If the date is not today, it will return a string with \"Yesterday ...\", \"Tomorrow ...\", etc\n * If the date is not in the current week, it return a string with \"DD MMM YYYY\" format\n * If the date is today, it will return a string with \"... ago\" or \"in ...\"\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns \"Yesterday at 3:45 PM\"\n *\n * @example\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"Tomorrow at 3:45 PM\"\n */\nexport function formatRelativeToCurrentWeekDateTime(\n  date: DateType,\n  baseDate: DateType = new Date(),\n) {\n  const isToday = dayjs(date).isSame(baseDate, 'day');\n\n  if (!isToday) {\n    // if the date is not today, we display it with \"Yesterday\", \"Tomorrow\", etc.\n    // and if the date is not in the current week then it will display \"17 Aug 2021\"\n    return dayjs(date).calendar(baseDate, {\n      sameElse: 'DD MMM YYYY',\n    });\n  }\n\n  // returns \"... ago\"\n  return formatRelativeDateTime(date, baseDate);\n}\n","import React from 'react';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\n\nimport dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\nimport {\n  formatMachineReadableDateTime,\n  formatRelativeDateTime,\n  formatRelativeToCurrentWeekDateTime,\n} from '../utils';\n\ninterface RelativeDateTimeInternalProps extends CommonProps {\n  /**\n   * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n   */\n  date: DateType;\n  /**\n   * If a value is passed to baseDate, then the component will compare both dates and return the time between them.\n   * If no value is passed then the date will be compared to \"now\"\n   *\n   * @default \"Now\"\n   */\n  baseDate?: DateType;\n  /**\n   * Sets the date to be relative only if it is in the current week\n   * @default false\n   */\n  isRelativeToCurrentWeek?: boolean;\n}\n\nexport type RelativeDateTimeProps = PropsWithHTMLElement<\n  RelativeDateTimeInternalProps,\n  'time'\n>;\n\nconst _RelativeDateTime = (\n  {\n    date,\n    baseDate,\n    isRelativeToCurrentWeek = false,\n    testId = 'cf-ui-relative-date-time',\n    ...otherProps\n  }: ExpandProps<RelativeDateTimeProps>,\n  ref: React.Ref<HTMLTimeElement>,\n) => {\n  const now = new Date();\n  const referenceDate = baseDate ?? now;\n  const dayjsDate = dayjs(date);\n  const machineReadableDate = formatMachineReadableDateTime(date);\n\n  let relativeDate: string;\n\n  if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) {\n    /**\n     * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc\n     * or, if the date is not in the current week, it displays \"17 Aug 2021\"\n     *\n     * check formatRelativeToCurrentWeekDateTime for more details\n     */\n    relativeDate = formatRelativeToCurrentWeekDateTime(date, referenceDate);\n  } else {\n    // otherwise we display it with \"... ago\" or \"in ...\" notation\n    relativeDate = formatRelativeDateTime(date, referenceDate);\n  }\n\n  return (\n    <time\n      dateTime={machineReadableDate}\n      data-test-id={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {relativeDate}\n    </time>\n  );\n};\n\n/**\n * The RelativeDateTime will show a `date` relative to \"now\" or to the `baseDate`\n * (e.g. in a day, in one month, one month ago, etc).\n */\nexport const RelativeDateTime = React.forwardRef(_RelativeDateTime);\n"],"names":["DateTime","DateTimeProps","RelativeDateTime","RelativeDateTimeProps","formatDateAndTime","formatMachineReadableDateTime","formatRelativeDateTime","React","CommonProps","PropsWithHTMLElement","ExpandProps","DateType","DateFormat","DateTimeOwnProps","date","format","_DateTime","testId","otherProps","ref","Ref","HTMLTimeElement","machineReadableDate","forwardRef","formatDate","formatTime","formatWeekdayDate","formatRelativeToCurrentWeekDateTime","dayjs","utcPlugin","extend","template","utc","relativeTime","calendarPlugin","baseDate","Date","from","isToday","isSame","calendar","sameElse","RelativeDateTimeInternalProps","isRelativeToCurrentWeek","_RelativeDateTime","now","referenceDate","dayjsDate","relativeDate"],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,130 +0,0 @@
-import $fUYts$react from "react";
-import $fUYts$dayjs from "dayjs";
-import $fUYts$dayjspluginutc from "dayjs/plugin/utc";
-import $fUYts$dayjspluginrelativeTime from "dayjs/plugin/relativeTime";
-import $fUYts$dayjsplugincalendar from "dayjs/plugin/calendar";
-
-
-
-
-(0, $fUYts$dayjs).extend((0, $fUYts$dayjspluginutc));
-function $ee655ad1301c8997$export$de4eb09f10f9c95e(date, format = "full") {
-    let template;
-    switch(format){
-        case "day":
-            template = "DD MMM YYYY"; // 17 Aug 2021
-            break;
-        case "weekday":
-            template = "ddd, DD MMM"; // Tue, 17 Aug
-            break;
-        case "time":
-            template = "h:mm A"; // 3:45 PM
-            break;
-        case "fullWithSeconds":
-            template = "ddd, DD MMM YYYY [at] h:mm:ss A"; // Tue, 17 Aug 2021 at 3:45:67 PM
-            break;
-        default:
-            template = "ddd, DD MMM YYYY [at] h:mm A";
-    }
-    return (0, $fUYts$dayjs)(date).format(template);
-}
-function $ee655ad1301c8997$export$5fb913e47d486079(date, format = "full") {
-    let template;
-    switch(format){
-        case "day":
-            template = "YYYY-MM-DD"; // 2019-08-24
-            break;
-        case "weekday":
-            template = "MM-DD"; // 08-24
-            break;
-        case "time":
-            template = "HH:mm:ss.SSS"; // 15:44:07.000
-            break;
-        default:
-            template = "YYYY-MM-DDTHH:mm:ss.SSS[Z]";
-    }
-    return (0, $fUYts$dayjs)(date).utc().format(template);
-}
-const $ee655ad1301c8997$export$3ae94a2503e890a1 = (date)=>{
-    return $ee655ad1301c8997$export$de4eb09f10f9c95e(date, "day");
-};
-const $ee655ad1301c8997$export$3203edd9e5edd663 = (date)=>{
-    return $ee655ad1301c8997$export$de4eb09f10f9c95e(date, "time");
-};
-const $ee655ad1301c8997$export$b89623867a65b725 = (date)=>{
-    return $ee655ad1301c8997$export$de4eb09f10f9c95e(date, "weekday");
-};
-
-
-
-
-
-(0, $fUYts$dayjs).extend((0, $fUYts$dayjspluginutc));
-(0, $fUYts$dayjs).extend((0, $fUYts$dayjspluginrelativeTime));
-(0, $fUYts$dayjs).extend((0, $fUYts$dayjsplugincalendar));
-function $162585a33f185f78$export$68534c3ecebfa124(date, baseDate = new Date()) {
-    return (0, $fUYts$dayjs)(date).from(baseDate);
-}
-function $162585a33f185f78$export$aa1a2def90bfd930(date, baseDate = new Date()) {
-    const isToday = (0, $fUYts$dayjs)(date).isSame(baseDate, "day");
-    if (!isToday) // if the date is not today, we display it with "Yesterday", "Tomorrow", etc.
-    // and if the date is not in the current week then it will display "17 Aug 2021"
-    return (0, $fUYts$dayjs)(date).calendar(baseDate, {
-        sameElse: "DD MMM YYYY"
-    });
-     // returns "... ago"
-    return $162585a33f185f78$export$68534c3ecebfa124(date, baseDate);
-}
-
-
-
-const $02aa7794cdab25f9$var$_DateTime = ({ date: date , format: format = "full" , testId: testId = "cf-ui-date-time" , ...otherProps }, ref)=>{
-    const machineReadableDate = (0, $ee655ad1301c8997$export$5fb913e47d486079)(date);
-    return /*#__PURE__*/ (0, $fUYts$react).createElement("time", {
-        dateTime: machineReadableDate,
-        "data-test-id": testId,
-        ...otherProps,
-        ref: ref
-    }, (0, $ee655ad1301c8997$export$de4eb09f10f9c95e)(date, format));
-};
-const $02aa7794cdab25f9$export$82f9ebd9adeba146 = /*#__PURE__*/ (0, $fUYts$react).forwardRef($02aa7794cdab25f9$var$_DateTime);
-
-
-
-
-
-
-
-
-(0, $fUYts$dayjs).extend((0, $fUYts$dayjspluginutc));
-(0, $fUYts$dayjs).extend((0, $fUYts$dayjspluginrelativeTime));
-(0, $fUYts$dayjs).extend((0, $fUYts$dayjsplugincalendar));
-const $f5a0093d268a4b59$var$_RelativeDateTime = ({ date: date , baseDate: baseDate , isRelativeToCurrentWeek: isRelativeToCurrentWeek = false , testId: testId = "cf-ui-relative-date-time" , ...otherProps }, ref)=>{
-    const now = new Date();
-    const referenceDate = baseDate !== null && baseDate !== void 0 ? baseDate : now;
-    const dayjsDate = (0, $fUYts$dayjs)(date);
-    const machineReadableDate = (0, $ee655ad1301c8997$export$5fb913e47d486079)(date);
-    let relativeDate;
-    if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, "day")) /**
-     * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc
-     * or, if the date is not in the current week, it displays "17 Aug 2021"
-     *
-     * check formatRelativeToCurrentWeekDateTime for more details
-     */ relativeDate = (0, $162585a33f185f78$export$aa1a2def90bfd930)(date, referenceDate);
-    else // otherwise we display it with "... ago" or "in ..." notation
-    relativeDate = (0, $162585a33f185f78$export$68534c3ecebfa124)(date, referenceDate);
-    return /*#__PURE__*/ (0, $fUYts$react).createElement("time", {
-        dateTime: machineReadableDate,
-        "data-test-id": testId,
-        ...otherProps,
-        ref: ref
-    }, relativeDate);
-};
-const $f5a0093d268a4b59$export$6de14fd95adb1c8a = /*#__PURE__*/ (0, $fUYts$react).forwardRef($f5a0093d268a4b59$var$_RelativeDateTime);
-
-
-
-
-
-export {$02aa7794cdab25f9$export$82f9ebd9adeba146 as DateTime, $f5a0093d268a4b59$export$6de14fd95adb1c8a as RelativeDateTime, $ee655ad1301c8997$export$de4eb09f10f9c95e as formatDateAndTime, $ee655ad1301c8997$export$5fb913e47d486079 as formatMachineReadableDateTime, $162585a33f185f78$export$68534c3ecebfa124 as formatRelativeDateTime};
-//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/components/datetime/src/index.ts","packages/components/datetime/src/DateTime/DateTime.tsx","packages/components/datetime/src/utils/index.ts","packages/components/datetime/src/utils/formatDateTimeUtils.ts","packages/components/datetime/src/utils/relativeDateTimeUtils.ts","packages/components/datetime/src/RelativeDateTime/RelativeDateTime.tsx"],"sourcesContent":["export { DateTime } from './DateTime/DateTime';\nexport type { DateTimeProps } from './DateTime/DateTime';\nexport { RelativeDateTime } from './RelativeDateTime/RelativeDateTime';\nexport type { RelativeDateTimeProps } from './RelativeDateTime/RelativeDateTime';\nexport {\n  formatDateAndTime,\n  formatMachineReadableDateTime,\n  formatRelativeDateTime,\n} from './utils';\n","import React from 'react';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\n\nimport type { DateType, DateFormat } from '../types';\nimport { formatDateAndTime, formatMachineReadableDateTime } from '../utils';\n\ninterface DateTimeOwnProps extends CommonProps {\n  /**\n   * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n   */\n  date: DateType;\n  /**\n   * The format in which the date will be presented\n   *\n   * @default full\n   **/\n  format?: DateFormat;\n}\n\nexport type DateTimeProps = PropsWithHTMLElement<DateTimeOwnProps, 'time'>;\n\nconst _DateTime = (\n  {\n    date,\n    format = 'full',\n    testId = 'cf-ui-date-time',\n    ...otherProps\n  }: ExpandProps<DateTimeProps>,\n  ref: React.Ref<HTMLTimeElement>,\n) => {\n  const machineReadableDate = formatMachineReadableDateTime(date);\n\n  return (\n    <time\n      dateTime={machineReadableDate}\n      data-test-id={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {formatDateAndTime(date, format)}\n    </time>\n  );\n};\n\n/**\n * The DateTime component will format a date to a human friendly format and wrap it in a `<time>` tag\n */\nexport const DateTime = React.forwardRef(_DateTime);\n","export {\n  formatDateAndTime,\n  formatMachineReadableDateTime,\n  formatDate,\n  formatTime,\n  formatWeekdayDate,\n} from './formatDateTimeUtils';\n\nexport {\n  formatRelativeDateTime,\n  formatRelativeToCurrentWeekDateTime,\n} from './relativeDateTimeUtils';\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\ndayjs.extend(utcPlugin);\n\nimport type { DateType, DateFormat } from '../types';\n\n/**\n * A funtion that will return a formatted date string. The format will dependend on the option\n * passed in the second argument.\n * By default, it will return a string with Forma 36’s \"full\" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00') // returns \"Tue, 17 Aug 2021 at 3:45 PM\"\n *\n * @example\n * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns \"17 Aug 2021\"\n */\nexport function formatDateAndTime(\n  date: DateType,\n  format: DateFormat = 'full',\n): string {\n  let template: string;\n\n  switch (format) {\n    case 'day':\n      template = 'DD MMM YYYY'; // 17 Aug 2021\n      break;\n    case 'weekday':\n      template = 'ddd, DD MMM'; // Tue, 17 Aug\n      break;\n    case 'time':\n      template = 'h:mm A'; // 3:45 PM\n      break;\n    case 'fullWithSeconds':\n      template = 'ddd, DD MMM YYYY [at] h:mm:ss A'; // Tue, 17 Aug 2021 at 3:45:67 PM\n      break;\n    default:\n      template = 'ddd, DD MMM YYYY [at] h:mm A'; // Tue, 17 Aug 2021 at 3:45 PM\n  }\n\n  return dayjs(date).format(template);\n}\n\n/**\n * A funtion that will return a machine-readable date string that should be passed to the `datetime` attribute of a `<time>` tag\n * By default, it will return a string with \"YYYY-MM-DDTHH:mm:ss.SSS[Z]\" format\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} format - the desired format (\"full\", \"day\", \"weekday\", or \"time\")\n * @returns a formatted date\n *\n * @example\n * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z\n *\n * @example\n * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13\n */\nexport function formatMachineReadableDateTime(\n  date: DateType,\n  format: DateFormat = 'full',\n): string {\n  let template: string;\n\n  switch (format) {\n    case 'day':\n      template = 'YYYY-MM-DD'; // 2019-08-24\n      break;\n    case 'weekday':\n      template = 'MM-DD'; // 08-24\n      break;\n    case 'time':\n      template = 'HH:mm:ss.SSS'; // 15:44:07.000\n      break;\n    default:\n      template = 'YYYY-MM-DDTHH:mm:ss.SSS[Z]'; // 2019-08-24T15:44:07.000Z\n  }\n\n  return dayjs(date).utc().format(template);\n}\n\n/**\n * @example\n * > formatDate(date)\n * 13 Aug 2019\n */\nexport const formatDate = (date: DateType): string => {\n  return formatDateAndTime(date, 'day');\n};\n\n/**\n * @example\n * > formatTime(date)\n * 8:00 AM\n */\nexport const formatTime = (date: DateType): string => {\n  return formatDateAndTime(date, 'time');\n};\n\n/**\n * @example\n * > formatWeekdayDate(date)\n * Mon, 12 Aug\n */\nexport const formatWeekdayDate = (date: DateType): string => {\n  return formatDateAndTime(date, 'weekday');\n};\n","import dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\n\n/**\n * A function that will return a string with how far a given date is in the past or future,\n * using a baseDate as reference. If the baseDate is not passed, the function will use today as reference.\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeDateTime('2021-08-17T15:45:00') // returns \"a day ago\"\n *\n * @example\n * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"in a day\"\n */\nexport function formatRelativeDateTime(\n  date: DateType,\n  baseDate: DateType = new Date(),\n) {\n  return dayjs(date).from(baseDate);\n}\n\n/**\n * A function that formats a date relative to Today or to the `baseDate` if passed.\n * If the date is not today, it will return a string with \"Yesterday ...\", \"Tomorrow ...\", etc\n * If the date is not in the current week, it return a string with \"DD MMM YYYY\" format\n * If the date is today, it will return a string with \"... ago\" or \"in ...\"\n *\n * @param {DateType} date - the date to be formatted\n * @param {DateFormat} baseDate - the date that should be used as a reference (default is \"today\")\n * @returns a relative date\n *\n * @example\n * // Considering today as 18.08.2021\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00') // returns \"Yesterday at 3:45 PM\"\n *\n * @example\n * formatRelativeToCurrentWeekDateTime('2021-08-17T15:45:00', '2021-08-16') // returns \"Tomorrow at 3:45 PM\"\n */\nexport function formatRelativeToCurrentWeekDateTime(\n  date: DateType,\n  baseDate: DateType = new Date(),\n) {\n  const isToday = dayjs(date).isSame(baseDate, 'day');\n\n  if (!isToday) {\n    // if the date is not today, we display it with \"Yesterday\", \"Tomorrow\", etc.\n    // and if the date is not in the current week then it will display \"17 Aug 2021\"\n    return dayjs(date).calendar(baseDate, {\n      sameElse: 'DD MMM YYYY',\n    });\n  }\n\n  // returns \"... ago\"\n  return formatRelativeDateTime(date, baseDate);\n}\n","import React from 'react';\nimport type {\n  CommonProps,\n  PropsWithHTMLElement,\n  ExpandProps,\n} from '@contentful/f36-core';\n\nimport dayjs from 'dayjs';\nimport utcPlugin from 'dayjs/plugin/utc';\nimport relativeTime from 'dayjs/plugin/relativeTime';\nimport calendarPlugin from 'dayjs/plugin/calendar';\ndayjs.extend(utcPlugin);\ndayjs.extend(relativeTime);\ndayjs.extend(calendarPlugin);\n\nimport type { DateType } from '../types';\nimport {\n  formatMachineReadableDateTime,\n  formatRelativeDateTime,\n  formatRelativeToCurrentWeekDateTime,\n} from '../utils';\n\ninterface RelativeDateTimeInternalProps extends CommonProps {\n  /**\n   * The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number\n   */\n  date: DateType;\n  /**\n   * If a value is passed to baseDate, then the component will compare both dates and return the time between them.\n   * If no value is passed then the date will be compared to \"now\"\n   *\n   * @default \"Now\"\n   */\n  baseDate?: DateType;\n  /**\n   * Sets the date to be relative only if it is in the current week\n   * @default false\n   */\n  isRelativeToCurrentWeek?: boolean;\n}\n\nexport type RelativeDateTimeProps = PropsWithHTMLElement<\n  RelativeDateTimeInternalProps,\n  'time'\n>;\n\nconst _RelativeDateTime = (\n  {\n    date,\n    baseDate,\n    isRelativeToCurrentWeek = false,\n    testId = 'cf-ui-relative-date-time',\n    ...otherProps\n  }: ExpandProps<RelativeDateTimeProps>,\n  ref: React.Ref<HTMLTimeElement>,\n) => {\n  const now = new Date();\n  const referenceDate = baseDate ?? now;\n  const dayjsDate = dayjs(date);\n  const machineReadableDate = formatMachineReadableDateTime(date);\n\n  let relativeDate: string;\n\n  if (isRelativeToCurrentWeek && !dayjsDate.isSame(referenceDate, 'day')) {\n    /**\n     * if isRelativeToCurrentWeek is true and the date is not today, we display the date with Yesterday, Tomorrow, etc\n     * or, if the date is not in the current week, it displays \"17 Aug 2021\"\n     *\n     * check formatRelativeToCurrentWeekDateTime for more details\n     */\n    relativeDate = formatRelativeToCurrentWeekDateTime(date, referenceDate);\n  } else {\n    // otherwise we display it with \"... ago\" or \"in ...\" notation\n    relativeDate = formatRelativeDateTime(date, referenceDate);\n  }\n\n  return (\n    <time\n      dateTime={machineReadableDate}\n      data-test-id={testId}\n      {...otherProps}\n      ref={ref}\n    >\n      {relativeDate}\n    </time>\n  );\n};\n\n/**\n * The RelativeDateTime will show a `date` relative to \"now\" or to the `baseDate`\n * (e.g. in a day, in one month, one month ago, etc).\n */\nexport const RelativeDateTime = React.forwardRef(_RelativeDateTime);\n"],"names":["DateTime","DateTimeProps","RelativeDateTime","RelativeDateTimeProps","formatDateAndTime","formatMachineReadableDateTime","formatRelativeDateTime","React","CommonProps","PropsWithHTMLElement","ExpandProps","DateType","DateFormat","DateTimeOwnProps","date","format","_DateTime","testId","otherProps","ref","Ref","HTMLTimeElement","machineReadableDate","forwardRef","formatDate","formatTime","formatWeekdayDate","formatRelativeToCurrentWeekDateTime","dayjs","utcPlugin","extend","template","utc","relativeTime","calendarPlugin","baseDate","Date","from","isToday","isSame","calendar","sameElse","RelativeDateTimeInternalProps","isRelativeToCurrentWeek","_RelativeDateTime","now","referenceDate","dayjsDate","relativeDate"],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"mappings":";;AAAA,gBAAuB,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9C,kBACI,iBAAiB,GACjB,MAAM,GACN,MAAM,GACN,KAAK,GACL,SAAS,CAAC;ACDd;;;;;;;;;;;;;;GAcG;AACH,kCACE,IAAI,EAAE,QAAQ,EACd,MAAM,GAAE,UAAmB,GAC1B,MAAM,CAqBR;AAED;;;;;;;;;;;;;GAaG;AACH,8CACE,IAAI,EAAE,QAAQ,EACd,MAAM,GAAE,UAAmB,GAC1B,MAAM,CAkBR;ACxED;;;;;;;;;;;;;;GAcG;AACH,uCACE,IAAI,EAAE,QAAQ,EACd,QAAQ,GAAE,QAAqB,UAGhC;AEpBD,0BAA2B,SAAQ,WAAW;IAC5C;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;QAII;IACJ,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,4BAA4B,qBAAqB,gBAAgB,EAAE,MAAM,CAAC,CAAC;AAyB3E;;GAEG;AACH,OAAO,MAAM,sRAAsC,CAAC;AC7BpD,uCAAwC,SAAQ,WAAW;IACzD;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,oCAAoC,qBAClC,6BAA6B,EAC7B,MAAM,CACP,CAAC;AA4CF;;;GAGG;AACH,OAAO,MAAM,wTAAsD,CAAC","sources":["packages/components/datetime/src/src/types.ts","packages/components/datetime/src/src/utils/formatDateTimeUtils.ts","packages/components/datetime/src/src/utils/relativeDateTimeUtils.ts","packages/components/datetime/src/src/utils/index.ts","packages/components/datetime/src/src/DateTime/DateTime.tsx","packages/components/datetime/src/src/RelativeDateTime/RelativeDateTime.tsx","packages/components/datetime/src/src/index.ts","packages/components/datetime/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"export { DateTime } from './DateTime/DateTime';\nexport type { DateTimeProps } from './DateTime/DateTime';\nexport { RelativeDateTime } from './RelativeDateTime/RelativeDateTime';\nexport type { RelativeDateTimeProps } from './RelativeDateTime/RelativeDateTime';\nexport {\n  formatDateAndTime,\n  formatMachineReadableDateTime,\n  formatRelativeDateTime,\n} from './utils';\n"],"names":[],"version":3,"file":"types.d.ts.map"}