@react-fabric/date 1.0.0-beta.61 → 1.0.0-beta.62

package/dist/cjs/display/DateDuration.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
@@ -39,11 +40,25 @@ var DateDuration = function DateDuration(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation("date"),
     t = _useTranslation.t;
-  var interval = react.useMemo(function () {
-    return dateFns.intervalToDuration({
+  var _useState = react.useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    interval = _useState2[0],
+    setDateInterval = _useState2[1];
+  react.useEffect(function () {
+    setDateInterval(dateFns.intervalToDuration({
       start: new Date(date),
       end: new Date()
-    });
+    }));
+    // update interval every minute
+    var tmr = setInterval(function () {
+      setDateInterval(dateFns.intervalToDuration({
+        start: new Date(date),
+        end: new Date()
+      }));
+    }, 60 * 1000);
+    return function () {
+      return clearInterval(tmr);
+    };
   }, [date]);
   var label = react.useMemo(function () {
     var before = dateFns.isBefore(dateUtil.DateUtil.parseDate(date), new Date());

package/dist/cjs/i18n/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var core = require('@react-fabric/core');
-var ar = require('./ar.json.js');
-var en = require('./en.json.js');
+var date$1 = require('./ar/date.json.js');
+var date = require('./en/date.json.js');
 
 /*
  * React Fabric
@@ -28,6 +28,6 @@ var en = require('./en.json.js');
  */
 
 core.addTranslationBundle("date", {
-  en: en.default,
-  ar: ar.default
+  en: date.default,
+  ar: date$1.default
 });

package/dist/esm/display/DateDuration.js

@@ -1,12 +1,13 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Tooltip, Dropdown } from '@react-fabric/core';
 import { Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { intervalToDuration, isBefore } from 'date-fns';
-import { useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DateUtil } from '../utils/dateUtil.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -39,11 +40,25 @@ var DateDuration = function DateDuration(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = useTranslation("date"),
     t = _useTranslation.t;
-  var interval = useMemo(function () {
-    return intervalToDuration({
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    interval = _useState2[0],
+    setDateInterval = _useState2[1];
+  useEffect(function () {
+    setDateInterval(intervalToDuration({
       start: new Date(date),
       end: new Date()
-    });
+    }));
+    // update interval every minute
+    var tmr = setInterval(function () {
+      setDateInterval(intervalToDuration({
+        start: new Date(date),
+        end: new Date()
+      }));
+    }, 60 * 1000);
+    return function () {
+      return clearInterval(tmr);
+    };
   }, [date]);
   var label = useMemo(function () {
     var before = isBefore(DateUtil.parseDate(date), new Date());

package/dist/esm/i18n/index.js

@@ -1,8 +1,8 @@
 'use client';
 
 import { addTranslationBundle } from '@react-fabric/core';
-import ar from './ar.json.js';
-import en from './en.json.js';
+import ar from './ar/date.json.js';
+import en from './en/date.json.js';
 
 /*
  * React Fabric

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/date",
-  "version": "1.0.0-beta.61",
+  "version": "1.0.0-beta.62",
   "description": "RUF: Date package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.61",
-    "@react-fabric/utilities": "^1.0.0-beta.61",
+    "@react-fabric/core": "^1.0.0-beta.62",
+    "@react-fabric/utilities": "^1.0.0-beta.62",
     "classnames": "~2.5.1",
     "date-fns": "~4.1.0",
     "resize-observer-polyfill": "~1.5.1"
@@ -51,5 +51,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a0b0c571bf9c189fa3355bbc3b896ecc4b9d6a04"
+  "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
 }

package/src/display/DateDuration.tsx

@@ -32,7 +32,7 @@ import {
 import { Format } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { intervalToDuration, isBefore } from "date-fns";
-import { useMemo, type ElementType } from "react";
+import { useEffect, useMemo, useState, type ElementType } from "react";
 import { useTranslation } from "react-i18next";
 import { type DateLike } from "../types";
 import { DateUtil } from "../utils/dateUtil";
@@ -76,9 +76,21 @@ export const DateDuration = ({
   ...props
 }: Props) => {
   const { t } = useTranslation("date");
+  const [interval, setDateInterval] = useState<
+    ReturnType<typeof intervalToDuration>
+  >({});
 
-  const interval = useMemo(() => {
-    return intervalToDuration({ start: new Date(date), end: new Date() });
+  useEffect(() => {
+    setDateInterval(
+      intervalToDuration({ start: new Date(date), end: new Date() }),
+    );
+    // update interval every minute
+    const tmr = setInterval(() => {
+      setDateInterval(
+        intervalToDuration({ start: new Date(date), end: new Date() }),
+      );
+    }, 60 * 1000);
+    return () => clearInterval(tmr);
   }, [date]);
 
   const label = useMemo(() => {

package/src/i18n/index.ts

@@ -22,7 +22,7 @@
  */
 
 import { addTranslationBundle } from "@react-fabric/core";
-import ar from "./ar.json";
-import en from "./en.json";
+import ar from "./ar/date.json";
+import en from "./en/date.json";
 
 addTranslationBundle("date", { en, ar });