@strapi/content-manager 0.0.0-next.fc9d26d995624dc886b29f563e1de655d47e6609 → 0.0.0-next.ffc36acb308febe288f1a31b62cbbb75b286585c

package/dist/admin/components/LeftMenu.mjs

@@ -0,0 +1,155 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useQueryParams, SubNav } from '@strapi/admin/strapi-admin';
+import { useFilter, useCollator, Divider, Flex, TextInput } from '@strapi/design-system';
+import { Search, Cross } from '@strapi/icons';
+import { stringify, parse } from 'qs';
+import { useIntl } from 'react-intl';
+import { useContentTypeSchema } from '../hooks/useContentTypeSchema.mjs';
+import { useTypedSelector } from '../modules/hooks.mjs';
+import { getTranslation } from '../utils/translations.mjs';
+
+const LeftMenu = ()=>{
+    const [search, setSearch] = React.useState('');
+    const [{ query }] = useQueryParams();
+    const { formatMessage, locale } = useIntl();
+    const collectionTypeLinks = useTypedSelector((state)=>state['content-manager'].app.collectionTypeLinks);
+    const singleTypeLinks = useTypedSelector((state)=>state['content-manager'].app.singleTypeLinks);
+    const { schemas } = useContentTypeSchema();
+    const { startsWith } = useFilter(locale, {
+        sensitivity: 'base'
+    });
+    const formatter = useCollator(locale, {
+        sensitivity: 'base'
+    });
+    const menu = React.useMemo(()=>[
+            {
+                id: 'collectionTypes',
+                title: formatMessage({
+                    id: getTranslation('components.LeftMenu.collection-types'),
+                    defaultMessage: 'Collection Types'
+                }),
+                searchable: true,
+                links: collectionTypeLinks
+            },
+            {
+                id: 'singleTypes',
+                title: formatMessage({
+                    id: getTranslation('components.LeftMenu.single-types'),
+                    defaultMessage: 'Single Types'
+                }),
+                searchable: true,
+                links: singleTypeLinks
+            }
+        ].map((section)=>({
+                ...section,
+                links: section.links/**
+           * Filter by the search value
+           */ .filter((link)=>startsWith(link.title, search))/**
+           * Sort correctly using the language
+           */ .sort((a, b)=>formatter.compare(a.title, b.title))/**
+           * Apply the formated strings to the links from react-intl
+           */ .map((link)=>{
+                    return {
+                        ...link,
+                        title: formatMessage({
+                            id: link.title,
+                            defaultMessage: link.title
+                        })
+                    };
+                })
+            })), [
+        collectionTypeLinks,
+        search,
+        singleTypeLinks,
+        startsWith,
+        formatMessage,
+        formatter
+    ]);
+    const handleClear = ()=>{
+        setSearch('');
+    };
+    const handleChangeSearch = ({ target: { value } })=>{
+        setSearch(value);
+    };
+    const label = formatMessage({
+        id: getTranslation('header.name'),
+        defaultMessage: 'Content Manager'
+    });
+    const getPluginsParamsForLink = (link)=>{
+        const schema = schemas.find((schema)=>schema.uid === link.uid);
+        const isI18nEnabled = Boolean(schema?.pluginOptions?.i18n?.localized);
+        // The search params have the i18n plugin
+        if (query.plugins && 'i18n' in query.plugins) {
+            // Prepare removal of i18n from the plugins search params
+            const { i18n, ...restPlugins } = query.plugins;
+            // i18n is not enabled, remove it from the plugins search params
+            if (!isI18nEnabled) {
+                return restPlugins;
+            }
+            // i18n is enabled, put the plugins search params back together
+            return {
+                i18n,
+                ...restPlugins
+            };
+        }
+        return query.plugins;
+    };
+    return /*#__PURE__*/ jsxs(SubNav.Main, {
+        "aria-label": label,
+        children: [
+            /*#__PURE__*/ jsx(SubNav.Header, {
+                label: label
+            }),
+            /*#__PURE__*/ jsx(Divider, {
+                background: "neutral150"
+            }),
+            /*#__PURE__*/ jsx(Flex, {
+                padding: 5,
+                gap: 3,
+                direction: 'column',
+                alignItems: 'stretch',
+                children: /*#__PURE__*/ jsx(TextInput, {
+                    startAction: /*#__PURE__*/ jsx(Search, {
+                        fill: "neutral500"
+                    }),
+                    value: search,
+                    onChange: handleChangeSearch,
+                    "aria-label": "Search",
+                    placeholder: formatMessage({
+                        id: 'content-manager.components.LeftMenu.Search.label',
+                        defaultMessage: 'Search for a content type'
+                    }),
+                    endAction: /*#__PURE__*/ jsx(Cross, {
+                        onClick: handleClear,
+                        fill: "neutral500",
+                        cursor: "pointer"
+                    }),
+                    size: "S"
+                })
+            }),
+            /*#__PURE__*/ jsx(SubNav.Sections, {
+                children: menu.map((section)=>{
+                    return /*#__PURE__*/ jsx(SubNav.Section, {
+                        label: section.title,
+                        children: section.links.map((link)=>{
+                            return /*#__PURE__*/ jsx(SubNav.Link, {
+                                to: {
+                                    pathname: link.to,
+                                    search: stringify({
+                                        ...parse(link.search ?? ''),
+                                        plugins: getPluginsParamsForLink(link)
+                                    })
+                                },
+                                label: link.title
+                            }, link.uid);
+                        })
+                    }, section.id);
+                })
+            })
+        ]
+    });
+};
+
+export { LeftMenu };
+//# sourceMappingURL=LeftMenu.mjs.map

package/dist/admin/components/LeftMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftMenu.mjs","sources":["../../../admin/src/components/LeftMenu.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, SubNav } from '@strapi/admin/strapi-admin';\nimport { Divider, Flex, TextInput, useCollator, useFilter } from '@strapi/design-system';\nimport { Cross, Search } from '@strapi/icons';\nimport { parse, stringify } from 'qs';\nimport { useIntl } from 'react-intl';\n\nimport { useContentTypeSchema } from '../hooks/useContentTypeSchema';\nimport { useTypedSelector } from '../modules/hooks';\nimport { getTranslation } from '../utils/translations';\n\nimport type { ContentManagerLink } from '../hooks/useContentManagerInitData';\n\nconst LeftMenu = () => {\n  const [search, setSearch] = React.useState('');\n  const [{ query }] = useQueryParams<{ plugins?: object }>();\n  const { formatMessage, locale } = useIntl();\n\n  const collectionTypeLinks = useTypedSelector(\n    (state) => state['content-manager'].app.collectionTypeLinks\n  );\n\n  const singleTypeLinks = useTypedSelector((state) => state['content-manager'].app.singleTypeLinks);\n  const { schemas } = useContentTypeSchema();\n\n  const { startsWith } = useFilter(locale, {\n    sensitivity: 'base',\n  });\n\n  const formatter = useCollator(locale, {\n    sensitivity: 'base',\n  });\n\n  const menu = React.useMemo(\n    () =>\n      [\n        {\n          id: 'collectionTypes',\n          title: formatMessage({\n            id: getTranslation('components.LeftMenu.collection-types'),\n            defaultMessage: 'Collection Types',\n          }),\n          searchable: true,\n          links: collectionTypeLinks,\n        },\n        {\n          id: 'singleTypes',\n          title: formatMessage({\n            id: getTranslation('components.LeftMenu.single-types'),\n            defaultMessage: 'Single Types',\n          }),\n          searchable: true,\n          links: singleTypeLinks,\n        },\n      ].map((section) => ({\n        ...section,\n        links: section.links\n          /**\n           * Filter by the search value\n           */\n          .filter((link) => startsWith(link.title, search))\n          /**\n           * Sort correctly using the language\n           */\n          .sort((a, b) => formatter.compare(a.title, b.title))\n          /**\n           * Apply the formated strings to the links from react-intl\n           */\n          .map((link) => {\n            return {\n              ...link,\n              title: formatMessage({ id: link.title, defaultMessage: link.title }),\n            };\n          }),\n      })),\n    [collectionTypeLinks, search, singleTypeLinks, startsWith, formatMessage, formatter]\n  );\n\n  const handleClear = () => {\n    setSearch('');\n  };\n\n  const handleChangeSearch = ({ target: { value } }: { target: { value: string } }) => {\n    setSearch(value);\n  };\n\n  const label = formatMessage({\n    id: getTranslation('header.name'),\n    defaultMessage: 'Content Manager',\n  });\n\n  const getPluginsParamsForLink = (link: ContentManagerLink) => {\n    const schema = schemas.find((schema) => schema.uid === link.uid);\n    const isI18nEnabled = Boolean((schema?.pluginOptions?.i18n as any)?.localized);\n\n    // The search params have the i18n plugin\n    if (query.plugins && 'i18n' in query.plugins) {\n      // Prepare removal of i18n from the plugins search params\n      const { i18n, ...restPlugins } = query.plugins;\n\n      // i18n is not enabled, remove it from the plugins search params\n      if (!isI18nEnabled) {\n        return restPlugins;\n      }\n\n      // i18n is enabled, put the plugins search params back together\n      return { i18n, ...restPlugins };\n    }\n\n    return query.plugins;\n  };\n\n  return (\n    <SubNav.Main aria-label={label}>\n      <SubNav.Header label={label} />\n      <Divider background=\"neutral150\" />\n      <Flex padding={5} gap={3} direction={'column'} alignItems={'stretch'}>\n        <TextInput\n          startAction={<Search fill=\"neutral500\" />}\n          value={search}\n          onChange={handleChangeSearch}\n          aria-label=\"Search\"\n          placeholder={formatMessage({\n            id: 'content-manager.components.LeftMenu.Search.label',\n            defaultMessage: 'Search for a content type',\n          })}\n          endAction={<Cross onClick={handleClear} fill=\"neutral500\" cursor=\"pointer\" />}\n          size=\"S\"\n        />\n      </Flex>\n      <SubNav.Sections>\n        {menu.map((section) => {\n          return (\n            <SubNav.Section key={section.id} label={section.title}>\n              {section.links.map((link) => {\n                return (\n                  <SubNav.Link\n                    key={link.uid}\n                    to={{\n                      pathname: link.to,\n                      search: stringify({\n                        ...parse(link.search ?? ''),\n                        plugins: getPluginsParamsForLink(link),\n                      }),\n                    }}\n                    label={link.title}\n                  />\n                );\n              })}\n            </SubNav.Section>\n          );\n        })}\n      </SubNav.Sections>\n    </SubNav.Main>\n  );\n};\n\nexport { LeftMenu };\n"],"names":["LeftMenu","search","setSearch","React","useState","query","useQueryParams","formatMessage","locale","useIntl","collectionTypeLinks","useTypedSelector","state","app","singleTypeLinks","schemas","useContentTypeSchema","startsWith","useFilter","sensitivity","formatter","useCollator","menu","useMemo","id","title","getTranslation","defaultMessage","searchable","links","map","section","filter","link","sort","a","b","compare","handleClear","handleChangeSearch","target","value","label","getPluginsParamsForLink","schema","find","uid","isI18nEnabled","Boolean","pluginOptions","i18n","localized","plugins","restPlugins","_jsxs","SubNav","Main","aria-label","_jsx","Header","Divider","background","Flex","padding","gap","direction","alignItems","TextInput","startAction","Search","fill","onChange","placeholder","endAction","Cross","onClick","cursor","size","Sections","Section","Link","to","pathname","stringify","parse"],"mappings":"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"}

package/dist/admin/components/RelativeTime.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var dateFns = require('date-fns');
+var reactIntl = require('react-intl');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const intervals = [
+    'years',
+    'months',
+    'days',
+    'hours',
+    'minutes',
+    'seconds'
+];
+/**
+ * Displays the relative time between a given timestamp and the current time.
+ * You can display a custom message for given time intervals by passing an array of custom intervals.
+ *
+ * @example
+ * ```jsx
+ * <caption>Display "last hour" if the timestamp is less than an hour ago</caption>
+ * <RelativeTime
+ *  timestamp={new Date('2021-01-01')}
+ *  customIntervals={[
+ *   { unit: 'hours', threshold: 1, text: 'last hour' },
+ *  ]}
+ * ```
+ */ const RelativeTime = /*#__PURE__*/ React__namespace.forwardRef(({ timestamp, customIntervals = [], ...restProps }, forwardedRef)=>{
+    const { formatRelativeTime, formatDate, formatTime } = reactIntl.useIntl();
+    /**
+     * TODO: make this auto-update, like a clock.
+     */ const interval = dateFns.intervalToDuration({
+        start: timestamp,
+        end: Date.now()
+    });
+    const unit = intervals.find((intervalUnit)=>{
+        return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);
+    }) ?? 'seconds';
+    const relativeTime = dateFns.isPast(timestamp) ? -interval[unit] : interval[unit];
+    // Display custom text if interval is less than the threshold
+    const customInterval = customIntervals.find((custom)=>interval[custom.unit] < custom.threshold);
+    const displayText = customInterval ? customInterval.text : formatRelativeTime(relativeTime, unit, {
+        numeric: 'auto'
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx("time", {
+        ref: forwardedRef,
+        dateTime: timestamp.toISOString(),
+        role: "time",
+        title: `${formatDate(timestamp)} ${formatTime(timestamp)}`,
+        ...restProps,
+        children: displayText
+    });
+});
+
+exports.RelativeTime = RelativeTime;
+//# sourceMappingURL=RelativeTime.js.map

package/dist/admin/components/RelativeTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.js","sources":["../../../admin/src/components/RelativeTime.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Duration, intervalToDuration, isPast } from 'date-fns';\nimport { useIntl } from 'react-intl';\n\nconst intervals: Array<keyof Duration> = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];\n\ninterface CustomInterval {\n  unit: keyof Duration;\n  text: string;\n  threshold: number;\n}\n\ninterface RelativeTimeProps extends React.ComponentPropsWithoutRef<'time'> {\n  timestamp: Date;\n  customIntervals?: CustomInterval[];\n}\n\n/**\n * Displays the relative time between a given timestamp and the current time.\n * You can display a custom message for given time intervals by passing an array of custom intervals.\n *\n * @example\n * ```jsx\n * <caption>Display \"last hour\" if the timestamp is less than an hour ago</caption>\n * <RelativeTime\n *  timestamp={new Date('2021-01-01')}\n *  customIntervals={[\n *   { unit: 'hours', threshold: 1, text: 'last hour' },\n *  ]}\n * ```\n */\nconst RelativeTime = React.forwardRef<HTMLTimeElement, RelativeTimeProps>(\n  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {\n    const { formatRelativeTime, formatDate, formatTime } = useIntl();\n\n    /**\n     * TODO: make this auto-update, like a clock.\n     */\n    const interval = intervalToDuration({\n      start: timestamp,\n      end: Date.now(),\n      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.\n    }) as Required<Duration>;\n\n    const unit =\n      intervals.find((intervalUnit) => {\n        return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);\n      }) ?? 'seconds';\n\n    const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];\n\n    // Display custom text if interval is less than the threshold\n    const customInterval = customIntervals.find(\n      (custom) => interval[custom.unit] < custom.threshold\n    );\n\n    const displayText = customInterval\n      ? customInterval.text\n      : formatRelativeTime(relativeTime, unit, { numeric: 'auto' });\n\n    return (\n      <time\n        ref={forwardedRef}\n        dateTime={timestamp.toISOString()}\n        role=\"time\"\n        title={`${formatDate(timestamp)} ${formatTime(timestamp)}`}\n        {...restProps}\n      >\n        {displayText}\n      </time>\n    );\n  }\n);\n\nexport { RelativeTime };\nexport type { CustomInterval, RelativeTimeProps };\n"],"names":["intervals","RelativeTime","React","forwardRef","timestamp","customIntervals","restProps","forwardedRef","formatRelativeTime","formatDate","formatTime","useIntl","interval","intervalToDuration","start","end","Date","now","unit","find","intervalUnit","Object","keys","includes","relativeTime","isPast","customInterval","custom","threshold","displayText","text","numeric","_jsx","time","ref","dateTime","toISOString","role","title"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,SAAmC,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,MAAA;AAAQ,IAAA,OAAA;AAAS,IAAA,SAAA;AAAW,IAAA;AAAU,CAAA;AAanG;;;;;;;;;;;;;AAaC,IACKC,MAAAA,YAAAA,iBAAeC,gBAAMC,CAAAA,UAAU,CACnC,CAAC,EAAEC,SAAS,EAAEC,eAAkB,GAAA,EAAE,EAAE,GAAGC,WAAW,EAAEC,YAAAA,GAAAA;AAClD,IAAA,MAAM,EAAEC,kBAAkB,EAAEC,UAAU,EAAEC,UAAU,EAAE,GAAGC,iBAAAA,EAAAA;AAEvD;;QAGA,MAAMC,WAAWC,0BAAmB,CAAA;QAClCC,KAAOV,EAAAA,SAAAA;AACPW,QAAAA,GAAAA,EAAKC,KAAKC,GAAG;AAEf,KAAA,CAAA;AAEA,IAAA,MAAMC,IACJlB,GAAAA,SAAAA,CAAUmB,IAAI,CAAC,CAACC,YAAAA,GAAAA;QACd,OAAOR,QAAQ,CAACQ,YAAAA,CAAa,GAAG,CAAA,IAAKC,OAAOC,IAAI,CAACV,QAAUW,CAAAA,CAAAA,QAAQ,CAACH,YAAAA,CAAAA;KAChE,CAAA,IAAA,SAAA;IAER,MAAMI,YAAAA,GAAeC,cAAOrB,CAAAA,SAAAA,CAAAA,GAAa,CAACQ,QAAQ,CAACM,IAAK,CAAA,GAAGN,QAAQ,CAACM,IAAK,CAAA;;AAGzE,IAAA,MAAMQ,cAAiBrB,GAAAA,eAAAA,CAAgBc,IAAI,CACzC,CAACQ,MAAAA,GAAWf,QAAQ,CAACe,MAAOT,CAAAA,IAAI,CAAC,GAAGS,OAAOC,SAAS,CAAA;AAGtD,IAAA,MAAMC,cAAcH,cAChBA,GAAAA,cAAAA,CAAeI,IAAI,GACnBtB,kBAAAA,CAAmBgB,cAAcN,IAAM,EAAA;QAAEa,OAAS,EAAA;AAAO,KAAA,CAAA;AAE7D,IAAA,qBACEC,cAACC,CAAAA,MAAAA,EAAAA;QACCC,GAAK3B,EAAAA,YAAAA;AACL4B,QAAAA,QAAAA,EAAU/B,UAAUgC,WAAW,EAAA;QAC/BC,IAAK,EAAA,MAAA;QACLC,KAAO,EAAA,CAAC,EAAE7B,UAAWL,CAAAA,SAAAA,CAAAA,CAAW,CAAC,EAAEM,UAAAA,CAAWN,WAAW,CAAC;AACzD,QAAA,GAAGE,SAAS;AAEZuB,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;;;;"}

package/dist/admin/components/RelativeTime.mjs

@@ -0,0 +1,55 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { intervalToDuration, isPast } from 'date-fns';
+import { useIntl } from 'react-intl';
+
+const intervals = [
+    'years',
+    'months',
+    'days',
+    'hours',
+    'minutes',
+    'seconds'
+];
+/**
+ * Displays the relative time between a given timestamp and the current time.
+ * You can display a custom message for given time intervals by passing an array of custom intervals.
+ *
+ * @example
+ * ```jsx
+ * <caption>Display "last hour" if the timestamp is less than an hour ago</caption>
+ * <RelativeTime
+ *  timestamp={new Date('2021-01-01')}
+ *  customIntervals={[
+ *   { unit: 'hours', threshold: 1, text: 'last hour' },
+ *  ]}
+ * ```
+ */ const RelativeTime = /*#__PURE__*/ React.forwardRef(({ timestamp, customIntervals = [], ...restProps }, forwardedRef)=>{
+    const { formatRelativeTime, formatDate, formatTime } = useIntl();
+    /**
+     * TODO: make this auto-update, like a clock.
+     */ const interval = intervalToDuration({
+        start: timestamp,
+        end: Date.now()
+    });
+    const unit = intervals.find((intervalUnit)=>{
+        return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);
+    }) ?? 'seconds';
+    const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];
+    // Display custom text if interval is less than the threshold
+    const customInterval = customIntervals.find((custom)=>interval[custom.unit] < custom.threshold);
+    const displayText = customInterval ? customInterval.text : formatRelativeTime(relativeTime, unit, {
+        numeric: 'auto'
+    });
+    return /*#__PURE__*/ jsx("time", {
+        ref: forwardedRef,
+        dateTime: timestamp.toISOString(),
+        role: "time",
+        title: `${formatDate(timestamp)} ${formatTime(timestamp)}`,
+        ...restProps,
+        children: displayText
+    });
+});
+
+export { RelativeTime };
+//# sourceMappingURL=RelativeTime.mjs.map

package/dist/admin/components/RelativeTime.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.mjs","sources":["../../../admin/src/components/RelativeTime.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Duration, intervalToDuration, isPast } from 'date-fns';\nimport { useIntl } from 'react-intl';\n\nconst intervals: Array<keyof Duration> = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];\n\ninterface CustomInterval {\n  unit: keyof Duration;\n  text: string;\n  threshold: number;\n}\n\ninterface RelativeTimeProps extends React.ComponentPropsWithoutRef<'time'> {\n  timestamp: Date;\n  customIntervals?: CustomInterval[];\n}\n\n/**\n * Displays the relative time between a given timestamp and the current time.\n * You can display a custom message for given time intervals by passing an array of custom intervals.\n *\n * @example\n * ```jsx\n * <caption>Display \"last hour\" if the timestamp is less than an hour ago</caption>\n * <RelativeTime\n *  timestamp={new Date('2021-01-01')}\n *  customIntervals={[\n *   { unit: 'hours', threshold: 1, text: 'last hour' },\n *  ]}\n * ```\n */\nconst RelativeTime = React.forwardRef<HTMLTimeElement, RelativeTimeProps>(\n  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {\n    const { formatRelativeTime, formatDate, formatTime } = useIntl();\n\n    /**\n     * TODO: make this auto-update, like a clock.\n     */\n    const interval = intervalToDuration({\n      start: timestamp,\n      end: Date.now(),\n      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.\n    }) as Required<Duration>;\n\n    const unit =\n      intervals.find((intervalUnit) => {\n        return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);\n      }) ?? 'seconds';\n\n    const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];\n\n    // Display custom text if interval is less than the threshold\n    const customInterval = customIntervals.find(\n      (custom) => interval[custom.unit] < custom.threshold\n    );\n\n    const displayText = customInterval\n      ? customInterval.text\n      : formatRelativeTime(relativeTime, unit, { numeric: 'auto' });\n\n    return (\n      <time\n        ref={forwardedRef}\n        dateTime={timestamp.toISOString()}\n        role=\"time\"\n        title={`${formatDate(timestamp)} ${formatTime(timestamp)}`}\n        {...restProps}\n      >\n        {displayText}\n      </time>\n    );\n  }\n);\n\nexport { RelativeTime };\nexport type { CustomInterval, RelativeTimeProps };\n"],"names":["intervals","RelativeTime","React","forwardRef","timestamp","customIntervals","restProps","forwardedRef","formatRelativeTime","formatDate","formatTime","useIntl","interval","intervalToDuration","start","end","Date","now","unit","find","intervalUnit","Object","keys","includes","relativeTime","isPast","customInterval","custom","threshold","displayText","text","numeric","_jsx","time","ref","dateTime","toISOString","role","title"],"mappings":";;;;;AAKA,MAAMA,SAAmC,GAAA;AAAC,IAAA,OAAA;AAAS,IAAA,QAAA;AAAU,IAAA,MAAA;AAAQ,IAAA,OAAA;AAAS,IAAA,SAAA;AAAW,IAAA;AAAU,CAAA;AAanG;;;;;;;;;;;;;AAaC,IACKC,MAAAA,YAAAA,iBAAeC,KAAMC,CAAAA,UAAU,CACnC,CAAC,EAAEC,SAAS,EAAEC,eAAkB,GAAA,EAAE,EAAE,GAAGC,WAAW,EAAEC,YAAAA,GAAAA;AAClD,IAAA,MAAM,EAAEC,kBAAkB,EAAEC,UAAU,EAAEC,UAAU,EAAE,GAAGC,OAAAA,EAAAA;AAEvD;;QAGA,MAAMC,WAAWC,kBAAmB,CAAA;QAClCC,KAAOV,EAAAA,SAAAA;AACPW,QAAAA,GAAAA,EAAKC,KAAKC,GAAG;AAEf,KAAA,CAAA;AAEA,IAAA,MAAMC,IACJlB,GAAAA,SAAAA,CAAUmB,IAAI,CAAC,CAACC,YAAAA,GAAAA;QACd,OAAOR,QAAQ,CAACQ,YAAAA,CAAa,GAAG,CAAA,IAAKC,OAAOC,IAAI,CAACV,QAAUW,CAAAA,CAAAA,QAAQ,CAACH,YAAAA,CAAAA;KAChE,CAAA,IAAA,SAAA;IAER,MAAMI,YAAAA,GAAeC,MAAOrB,CAAAA,SAAAA,CAAAA,GAAa,CAACQ,QAAQ,CAACM,IAAK,CAAA,GAAGN,QAAQ,CAACM,IAAK,CAAA;;AAGzE,IAAA,MAAMQ,cAAiBrB,GAAAA,eAAAA,CAAgBc,IAAI,CACzC,CAACQ,MAAAA,GAAWf,QAAQ,CAACe,MAAOT,CAAAA,IAAI,CAAC,GAAGS,OAAOC,SAAS,CAAA;AAGtD,IAAA,MAAMC,cAAcH,cAChBA,GAAAA,cAAAA,CAAeI,IAAI,GACnBtB,kBAAAA,CAAmBgB,cAAcN,IAAM,EAAA;QAAEa,OAAS,EAAA;AAAO,KAAA,CAAA;AAE7D,IAAA,qBACEC,GAACC,CAAAA,MAAAA,EAAAA;QACCC,GAAK3B,EAAAA,YAAAA;AACL4B,QAAAA,QAAAA,EAAU/B,UAAUgC,WAAW,EAAA;QAC/BC,IAAK,EAAA,MAAA;QACLC,KAAO,EAAA,CAAC,EAAE7B,UAAWL,CAAAA,SAAAA,CAAAA,CAAW,CAAC,EAAEM,UAAAA,CAAWN,WAAW,CAAC;AACzD,QAAA,GAAGE,SAAS;AAEZuB,QAAAA,QAAAA,EAAAA;;AAGP,CAAA;;;;"}