@contentful/f36-datetime 5.0.0 → 5.1.1

package/dist/esm/index.js

@@ -4,7 +4,8 @@ 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);
+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).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=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +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"]}
+{"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,EAAQ,CACd,IAAK,MACHC,EAAW,cACX,MACF,IAAK,UACHA,EAAW,cACX,MACF,IAAK,OACHA,EAAW,SACX,MACF,IAAK,kBACHA,EAAW,kCACX,MACF,QACEA,EAAW,8BACf,CAEA,OAAOL,EAAMG,CAAI,EAAE,OAAOE,CAAQ,CACpC,CAgBO,SAASC,EACdH,EACAC,EAAqB,OACb,CACR,IAAIC,EAEJ,OAAQD,EAAQ,CACd,IAAK,MACHC,EAAW,aACX,MACF,IAAK,UACHA,EAAW,QACX,MACF,IAAK,OACHA,EAAW,eACX,MACF,QACEA,EAAW,4BACf,CAEA,OAAOL,EAAMG,CAAI,EAAE,OAAOE,CAAQ,CACpC,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).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.d.mts

@@ -0,0 +1,99 @@
+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.
+ * By default, it will return a string with Forma 36’s "full" format (e.g. Tue, 17 Aug 2021 at 3:45 PM)
+ *
+ * @param {DateType} date - the date to be formatted
+ * @param {DateFormat} format - the desired format ("full", "day", "weekday", or "time")
+ * @returns a formatted date
+ *
+ * @example
+ * formatDateAndTime('2021-08-17T15:45:00') // returns "Tue, 17 Aug 2021 at 3:45 PM"
+ *
+ * @example
+ * formatDateAndTime('2021-08-17T15:45:00', 'day') // returns "17 Aug 2021"
+ */
+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
+ *
+ * @param {DateType} date - the date to be formatted
+ * @param {DateFormat} format - the desired format ("full", "day", "weekday", or "time")
+ * @returns a formatted date
+ *
+ * @example
+ * formatMachineReadableDateTime(date) // returns 2019-08-13T10:00:00.000Z
+ *
+ * @example
+ * formatMachineReadableDateTime(date, 'day') // returns 2019-08-13
+ */
+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.
+ *
+ * @param {DateType} date - the date to be formatted
+ * @param {DateFormat} baseDate - the date that should be used as a reference (default is "today")
+ * @returns a relative date
+ *
+ * @example
+ * // Considering today as 18.08.2021
+ * formatRelativeDateTime('2021-08-17T15:45:00') // returns "a day ago"
+ *
+ * @example
+ * formatRelativeDateTime('2021-08-17T15:45:00', '2021-08-16') // returns "in a day"
+ */
+declare function formatRelativeDateTime(date: DateType, baseDate?: DateType): string;
+
+export { DateTime, DateTimeProps, RelativeDateTime, RelativeDateTimeProps, formatDateAndTime, formatMachineReadableDateTime, formatRelativeDateTime };

package/dist/index.js

@@ -1,26 +1,25 @@
 '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 }; }
+function _interopDefault (e) { return e && e.__esModule ? 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 h__default = /*#__PURE__*/_interopDefault(h);
+var o__default = /*#__PURE__*/_interopDefault(o);
+var S__default = /*#__PURE__*/_interopDefault(S);
+var A__default = /*#__PURE__*/_interopDefault(A);
+var L__default = /*#__PURE__*/_interopDefault(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);
+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).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=out.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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"]}
+{"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,EAAQ,CACd,IAAK,MACHC,EAAW,cACX,MACF,IAAK,UACHA,EAAW,cACX,MACF,IAAK,OACHA,EAAW,SACX,MACF,IAAK,kBACHA,EAAW,kCACX,MACF,QACEA,EAAW,8BACf,CAEA,OAAOL,EAAMG,CAAI,EAAE,OAAOE,CAAQ,CACpC,CAgBO,SAASC,EACdH,EACAC,EAAqB,OACb,CACR,IAAIC,EAEJ,OAAQD,EAAQ,CACd,IAAK,MACHC,EAAW,aACX,MACF,IAAK,UACHA,EAAW,QACX,MACF,IAAK,OACHA,EAAW,eACX,MACF,QACEA,EAAW,4BACf,CAEA,OAAOL,EAAMG,CAAI,EAAE,OAAOE,CAAQ,CACpC,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).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,18 +1,19 @@
 {
   "name": "@contentful/f36-datetime",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "description": "Forma 36: DateTime component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-core": "^5.0.0",
-    "@contentful/f36-tokens": "^4.0.1",
+    "@contentful/f36-core": "^5.1.1",
+    "@contentful/f36-tokens": "^5.1.0",
     "dayjs": "^1.11.5",
     "emotion": "^10.0.17"
   },
   "peerDependencies": {
-    "react": ">=16.8"
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
   },
   "license": "MIT",
   "files": [
@@ -26,9 +27,10 @@
   "browserslist": "extends @contentful/browserslist-config",
   "repository": {
     "type": "git",
-    "url": "https://github.com/contentful/forma-36"
+    "url": "git+https://github.com/contentful/forma-36.git"
   },
   "publishConfig": {
+    "registry": "https://npm.pkg.github.com/",
     "access": "public"
   }
 }