@contentful/f36-datetime 4.48.0 → 4.48.1

package/dist/esm/index.js

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

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).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=out.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@contentful/f36-datetime",
-  "version": "4.48.0",
+  "version": "4.48.1",
   "description": "Forma 36: DateTime component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-core": "^4.48.0",
+    "@contentful/f36-core": "^4.48.1",
     "@contentful/f36-tokens": "^4.0.2",
     "dayjs": "^1.11.5",
     "emotion": "^10.0.17"