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

package/dist/cjs/components/DateHeader.js

@@ -86,7 +86,7 @@ var DateHeader = function DateHeader(props) {
     "data-page": page,
     children: [startPage !== undefined && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
       icon: {
-        icon: core.CoreIcons.chevronsLeft,
+        icon: "icon-[mdi--chevron-double-left]",
         rtlFlip: true
       },
       size: "sm",
@@ -99,7 +99,7 @@ var DateHeader = function DateHeader(props) {
       }
     }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
       icon: {
-        icon: core.CoreIcons.chevronLeft,
+        icon: "icon-[mdi--chevron-left]",
         rtlFlip: true
       },
       size: "sm",
@@ -119,7 +119,7 @@ var DateHeader = function DateHeader(props) {
       children: headLabel
     }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
       icon: {
-        icon: core.CoreIcons.chevronRight,
+        icon: "icon-[mdi--chevron-right]",
         rtlFlip: true
       },
       size: "sm",
@@ -132,7 +132,7 @@ var DateHeader = function DateHeader(props) {
       }
     }), endPage !== undefined && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
       icon: {
-        icon: core.CoreIcons.chevronsRight,
+        icon: "icon-[mdi--chevron-double-right]",
         rtlFlip: true
       },
       size: "sm",

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/components/DateHeader.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Button, CoreIcons } from '@react-fabric/core';
+import { Button } from '@react-fabric/core';
 import classNames from 'classnames';
 import { addDays, isBefore, isAfter } from 'date-fns';
 import i18next from 'i18next';
@@ -86,7 +86,7 @@ var DateHeader = function DateHeader(props) {
     "data-page": page,
     children: [startPage !== undefined && /*#__PURE__*/jsx(Button, {
       icon: {
-        icon: CoreIcons.chevronsLeft,
+        icon: "icon-[mdi--chevron-double-left]",
         rtlFlip: true
       },
       size: "sm",
@@ -99,7 +99,7 @@ var DateHeader = function DateHeader(props) {
       }
     }), /*#__PURE__*/jsx(Button, {
       icon: {
-        icon: CoreIcons.chevronLeft,
+        icon: "icon-[mdi--chevron-left]",
         rtlFlip: true
       },
       size: "sm",
@@ -119,7 +119,7 @@ var DateHeader = function DateHeader(props) {
       children: headLabel
     }), /*#__PURE__*/jsx(Button, {
       icon: {
-        icon: CoreIcons.chevronRight,
+        icon: "icon-[mdi--chevron-right]",
         rtlFlip: true
       },
       size: "sm",
@@ -132,7 +132,7 @@ var DateHeader = function DateHeader(props) {
       }
     }), endPage !== undefined && /*#__PURE__*/jsx(Button, {
       icon: {
-        icon: CoreIcons.chevronsRight,
+        icon: "icon-[mdi--chevron-double-right]",
         rtlFlip: true
       },
       size: "sm",

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.60",
+  "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.60",
-    "@react-fabric/utilities": "^1.0.0-beta.60",
+    "@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": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
+  "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
 }

package/src/components/DateHeader.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, CoreIcons } from "@react-fabric/core";
+import { Button } from "@react-fabric/core";
 import classNames from "classnames";
 import { addDays, isAfter, isBefore } from "date-fns";
 import i18next from "i18next";
@@ -166,7 +166,7 @@ export const DateHeader = (props: Props) => {
     <div className="flex flex-nowrap items-center area-head" data-page={page}>
       {startPage !== undefined && (
         <Button
-          icon={{ icon: CoreIcons.chevronsLeft, rtlFlip: true }}
+          icon={{ icon: "icon-[mdi--chevron-double-left]", rtlFlip: true }}
           size="sm"
           variant="link"
           aria-label="start"
@@ -176,7 +176,7 @@ export const DateHeader = (props: Props) => {
         />
       )}
       <Button
-        icon={{ icon: CoreIcons.chevronLeft, rtlFlip: true }}
+        icon={{ icon: "icon-[mdi--chevron-left]", rtlFlip: true }}
         size="sm"
         variant="link"
         aria-label="prev"
@@ -195,7 +195,7 @@ export const DateHeader = (props: Props) => {
         {headLabel}
       </div>
       <Button
-        icon={{ icon: CoreIcons.chevronRight, rtlFlip: true }}
+        icon={{ icon: "icon-[mdi--chevron-right]", rtlFlip: true }}
         size="sm"
         variant="link"
         aria-label="next"
@@ -205,7 +205,7 @@ export const DateHeader = (props: Props) => {
       />
       {endPage !== undefined && (
         <Button
-          icon={{ icon: CoreIcons.chevronsRight, rtlFlip: true }}
+          icon={{ icon: "icon-[mdi--chevron-double-right]", rtlFlip: true }}
           size="sm"
           variant="link"
           aria-label="end"

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 });