@adecore/ui 0.31.11 → 0.32.0

package/dist/format/datetime.js

@@ -2,7 +2,7 @@ import { formatAgo } from './duration.js';
 import { dateFormatter, wordFormatter } from './locale.js';
 /* The parts that are a word rather than a number, and so come from the language and not the region. */
 const WORD_PARTS = new Set(['month', 'weekday', 'dayPeriod', 'era']);
-const toDate = (at) => (typeof at === 'number' ? new Date(at) : at);
+const toDate = at => typeof at === 'number' ? new Date(at) : at;
 /*
  * A date written the way the region writes one, with its words in the language the interface is in.
  * Both formatters get the same options and the same instant, so every part the region asks for has
@@ -11,62 +11,112 @@ const toDate = (at) => (typeof at === 'number' ? new Date(at) : at);
  * region does not say AM.
  */
 export const formatDateTime = (at, options) => {
-    const date = toDate(at);
-    const parts = dateFormatter(options).formatToParts(date);
-    if (!parts.some((part) => WORD_PARTS.has(part.type))) {
-        return parts.map((part) => part.value).join('');
-    }
-    const words = wordFormatter(options).formatToParts(date);
-    return parts.map((part) => (WORD_PARTS.has(part.type) ? (words.find((word) => word.type === part.type)?.value ?? part.value) : part.value)).join('');
+  const date = toDate(at);
+  const parts = dateFormatter(options).formatToParts(date);
+  if (!parts.some(part => WORD_PARTS.has(part.type))) {
+    return parts.map(part => part.value).join('');
+  }
+  const words = wordFormatter(options).formatToParts(date);
+  return parts.map(part => WORD_PARTS.has(part.type) ? words.find(word => word.type === part.type)?.value ?? part.value : part.value).join('');
+};
+const CLOCK = {
+  hour: '2-digit',
+  minute: '2-digit'
+};
+const WEEKDAY_CLOCK = {
+  weekday: 'short',
+  hour: '2-digit',
+  minute: '2-digit'
+};
+const HOUR = {
+  hour: 'numeric'
+};
+const DAY = {
+  month: 'short',
+  day: 'numeric'
+};
+const DAY_WITH_YEAR = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric'
+};
+const WEEKDAY_DAY = {
+  weekday: 'short',
+  month: 'short',
+  day: 'numeric'
+};
+const DAY_CLOCK = {
+  month: 'short',
+  day: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit'
+};
+const DAY_CLOCK_WITH_YEAR = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit'
+};
+const NUMERIC_DATE = {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric'
 };
-const CLOCK = { hour: '2-digit', minute: '2-digit' };
-const WEEKDAY_CLOCK = { weekday: 'short', hour: '2-digit', minute: '2-digit' };
-const HOUR = { hour: 'numeric' };
-const DAY = { month: 'short', day: 'numeric' };
-const DAY_WITH_YEAR = { month: 'short', day: 'numeric', year: 'numeric' };
-const WEEKDAY_DAY = { weekday: 'short', month: 'short', day: 'numeric' };
-const DAY_CLOCK = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
-const DAY_CLOCK_WITH_YEAR = { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' };
-const NUMERIC_DATE = { year: 'numeric', month: 'numeric', day: 'numeric' };
 /*
  * `08:05`, or `08:05 AM` in a region that counts to twelve. The clock functions below take the `timeZone`
  * to write in, such as `UTC` for a moment whose parts are given and mean the same wall clock anywhere.
  */
-export const formatClock = (at, timeZone) => formatDateTime(at, timeZone === undefined ? CLOCK : { ...CLOCK, timeZone });
+export const formatClock = (at, timeZone) => formatDateTime(at, timeZone === undefined ? CLOCK : {
+  ...CLOCK,
+  timeZone
+});
 /* A time far enough off that its day is part of the answer: `Sat 08:05`. */
-export const formatWeekdayClock = (at) => formatDateTime(at, WEEKDAY_CLOCK);
+export const formatWeekdayClock = at => formatDateTime(at, WEEKDAY_CLOCK);
 /* An hour of the day on its own, for the foot of a chart: `08`, or `8 AM` where that is the clock. */
-export const formatHour = (at) => formatDateTime(at, HOUR);
+export const formatHour = at => formatDateTime(at, HOUR);
 /* `19 Sep`, the short date a row falls back to once "days ago" stops meaning anything. */
-export const formatDay = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY : { ...DAY, timeZone });
+export const formatDay = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY : {
+  ...DAY,
+  timeZone
+});
 /* The same date with the year, for anything older than the one we are in. */
-export const formatDayWithYear = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY_WITH_YEAR : { ...DAY_WITH_YEAR, timeZone });
+export const formatDayWithYear = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY_WITH_YEAR : {
+  ...DAY_WITH_YEAR,
+  timeZone
+});
 /* `Sat 19 Sep`. */
-export const formatWeekdayDay = (at) => formatDateTime(at, WEEKDAY_DAY);
+export const formatWeekdayDay = at => formatDateTime(at, WEEKDAY_DAY);
 /* `19 Sep, 08:05`: a moment that is not today, to the minute. */
-export const formatDayClock = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY_CLOCK : { ...DAY_CLOCK, timeZone });
+export const formatDayClock = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY_CLOCK : {
+  ...DAY_CLOCK,
+  timeZone
+});
 /* `19 Sep 2026, 08:05`: the same moment with the year, for one that is not in the year we are in. */
-export const formatDayClockWithYear = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY_CLOCK_WITH_YEAR : { ...DAY_CLOCK_WITH_YEAR, timeZone });
+export const formatDayClockWithYear = (at, timeZone) => formatDateTime(at, timeZone === undefined ? DAY_CLOCK_WITH_YEAR : {
+  ...DAY_CLOCK_WITH_YEAR,
+  timeZone
+});
 /* All numbers, as a form would print it: `19-9-2026` here, `9/19/2026` in the United States. */
-export const formatNumericDate = (at) => formatDateTime(at, NUMERIC_DATE);
+export const formatNumericDate = at => formatDateTime(at, NUMERIC_DATE);
 /* Whether two instants fall on the same day of the same year, in the zone of whoever is reading. */
 export const isSameDay = (a, b) => {
-    const left = toDate(a);
-    const right = toDate(b);
-    return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+  const left = toDate(a);
+  const right = toDate(b);
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
 };
-export const formatMoment = (at, now = Date.now()) => (isSameDay(at, now) ? formatClock(at) : formatDayClock(at));
+export const formatMoment = (at, now = Date.now()) => isSameDay(at, now) ? formatClock(at) : formatDayClock(at);
 const WEEK = 7 * 24 * 60 * 60 * 1000;
 /*
  * How old a row is, for its right edge: `3d ago` for the first week, then the day, with the year once
  * it is not this one. An `at` ahead of `now`, from a clock that runs ahead, reads as now.
  */
 export const formatAge = (at, now = Date.now()) => {
-    const date = toDate(at);
-    const today = toDate(now);
-    const past = today.getTime() - date.getTime();
-    if (past < WEEK) {
-        return formatAgo(past);
-    }
-    return date.getFullYear() === today.getFullYear() ? formatDay(date) : formatDayWithYear(date);
-};
+  const date = toDate(at);
+  const today = toDate(now);
+  const past = today.getTime() - date.getTime();
+  if (past < WEEK) {
+    return formatAgo(past);
+  }
+  return date.getFullYear() === today.getFullYear() ? formatDay(date) : formatDayWithYear(date);
+};

package/dist/format/duration.js

@@ -9,68 +9,74 @@ const DAY = 24 * HOUR;
  * abbreviations, the way the rest of the interface is written; only the number bends to the region,
  * which is what `1,5 h` against `1.5 h` is about.
  */
-export const formatDuration = (ms) => {
-    const seconds = Math.max(0, Math.round(ms / SECOND));
-    if (seconds < 60) {
-        return `${formatNumber(seconds)} s`;
-    }
-    const minutes = Math.round(seconds / 60);
-    if (minutes < 60) {
-        return `${formatNumber(minutes)} min`;
-    }
-    return `${formatDecimal(minutes / 60)} h`;
+export const formatDuration = ms => {
+  const seconds = Math.max(0, Math.round(ms / SECOND));
+  if (seconds < 60) {
+    return `${formatNumber(seconds)} s`;
+  }
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) {
+    return `${formatNumber(minutes)} min`;
+  }
+  return `${formatDecimal(minutes / 60)} h`;
 };
 /* How long a window still has, tight enough for the end of a bar: `4d 3h`, `12h 8m`, `9m`. */
-export const formatCountdown = (ms) => {
-    const left = Math.max(0, ms);
-    if (left >= DAY) {
-        return `${formatNumber(Math.floor(left / DAY))}d ${formatNumber(Math.round((left % DAY) / HOUR))}h`;
-    }
-    if (left >= HOUR) {
-        return `${formatNumber(Math.floor(left / HOUR))}h ${formatNumber(Math.round((left % HOUR) / MINUTE))}m`;
-    }
-    return `${formatNumber(Math.max(1, Math.round(left / MINUTE)))}m`;
+export const formatCountdown = ms => {
+  const left = Math.max(0, ms);
+  if (left >= DAY) {
+    return `${formatNumber(Math.floor(left / DAY))}d ${formatNumber(Math.round(left % DAY / HOUR))}h`;
+  }
+  if (left >= HOUR) {
+    return `${formatNumber(Math.floor(left / HOUR))}h ${formatNumber(Math.round(left % HOUR / MINUTE))}m`;
+  }
+  return `${formatNumber(Math.max(1, Math.round(left / MINUTE)))}m`;
 };
 /*
  * How long something has been running, to two units and no space to spare: `12s`, `2m 5s`, `3h 20m`.
  * A call that took a fraction of a second still took some, so anything above zero reads as at least
  * `1s`; only a clock that runs ahead of the start comes out as `0s`.
  */
-export const formatElapsedShort = (ms) => {
-    const seconds = ms <= 0 ? 0 : Math.max(1, Math.round(ms / SECOND));
-    if (seconds < 60) {
-        return `${formatNumber(seconds)}s`;
-    }
-    if (seconds < 3600) {
-        const rest = seconds % 60;
-        const minutes = Math.floor(seconds / 60);
-        return rest === 0 ? `${formatNumber(minutes)}m` : `${formatNumber(minutes)}m ${formatNumber(rest)}s`;
-    }
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    return minutes === 0 ? `${formatNumber(hours)}h` : `${formatNumber(hours)}h ${formatNumber(minutes)}m`;
+export const formatElapsedShort = ms => {
+  const seconds = ms <= 0 ? 0 : Math.max(1, Math.round(ms / SECOND));
+  if (seconds < 60) {
+    return `${formatNumber(seconds)}s`;
+  }
+  if (seconds < 3600) {
+    const rest = seconds % 60;
+    const minutes = Math.floor(seconds / 60);
+    return rest === 0 ? `${formatNumber(minutes)}m` : `${formatNumber(minutes)}m ${formatNumber(rest)}s`;
+  }
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  return minutes === 0 ? `${formatNumber(hours)}h` : `${formatNumber(hours)}h ${formatNumber(minutes)}m`;
 };
 /* A stopwatch that is watched while it runs: `00:14`, and `1:02:03` once it passes an hour. */
-export const formatClockDuration = (ms) => {
-    const seconds = Math.max(0, Math.floor(ms / SECOND));
-    const pad = (value) => String(value).padStart(2, '0');
-    const clock = `${pad(Math.floor((seconds % 3600) / 60))}:${pad(seconds % 60)}`;
-    const hours = Math.floor(seconds / 3600);
-    return hours > 0 ? `${formatNumber(hours)}:${clock}` : clock;
+export const formatClockDuration = ms => {
+  const seconds = Math.max(0, Math.floor(ms / SECOND));
+  const pad = value => String(value).padStart(2, '0');
+  const clock = `${pad(Math.floor(seconds % 3600 / 60))}:${pad(seconds % 60)}`;
+  const hours = Math.floor(seconds / 3600);
+  return hours > 0 ? `${formatNumber(hours)}:${clock}` : clock;
 };
-const AGO = { style: 'narrow', numeric: 'always' };
-const NOW = { style: 'narrow', numeric: 'auto' };
-/* How long ago something was, short enough for the right edge of a row: `3m ago`, `3 min. geleden`. */
-export const formatAgo = (ms) => {
-    const past = Math.max(0, ms);
-    if (past < MINUTE) {
-        return relativeFormatter(NOW).format(0, 'second');
-    }
-    if (past < HOUR) {
-        return relativeFormatter(AGO).format(-Math.floor(past / MINUTE), 'minute');
-    }
-    if (past < DAY) {
-        return relativeFormatter(AGO).format(-Math.floor(past / HOUR), 'hour');
-    }
-    return relativeFormatter(AGO).format(-Math.floor(past / DAY), 'day');
+const AGO = {
+  style: 'narrow',
+  numeric: 'always'
+};
+const NOW = {
+  style: 'narrow',
+  numeric: 'auto'
 };
+/* How long ago something was, short enough for the right edge of a row: `3m ago`, `3 min. geleden`. */
+export const formatAgo = ms => {
+  const past = Math.max(0, ms);
+  if (past < MINUTE) {
+    return relativeFormatter(NOW).format(0, 'second');
+  }
+  if (past < HOUR) {
+    return relativeFormatter(AGO).format(-Math.floor(past / MINUTE), 'minute');
+  }
+  if (past < DAY) {
+    return relativeFormatter(AGO).format(-Math.floor(past / HOUR), 'hour');
+  }
+  return relativeFormatter(AGO).format(-Math.floor(past / DAY), 'day');
+};

package/dist/format/index.js

@@ -4,4 +4,4 @@ export { formatAgo, formatClockDuration, formatCountdown, formatDuration, format
 export { formatLocale, labelCollator, setFormatSource, systemLocale, useFormatLocale } from './locale.js';
 export { formatBytes, formatDecimal, formatMoney, formatNumber, formatNumeral, formatPercent, formatRounded, formatTokens, formatUsdSignificant } from './number.js';
 export { FORMAT_LANGUAGE, FORMAT_REGIONS, FORMAT_REGION_CHOICES, FORMAT_SYSTEM, formatRegionFrom, regionName } from './regions.js';
-export { localTimeZone } from './time-zone.js';
+export { localTimeZone } from './time-zone.js';

package/dist/format/locale.js

@@ -1,14 +1,21 @@
 import { useSyncExternalStore } from 'react';
 import { FORMAT_LANGUAGE, FORMAT_SYSTEM } from './regions.js';
-let source = { language: () => 'en', region: () => FORMAT_LANGUAGE, subscribe: () => () => { } };
+let source = {
+  language: () => 'en',
+  region: () => FORMAT_LANGUAGE,
+  subscribe: () => () => {}
+};
 /* Answers the source it replaced, so a test can put that one back. */
-export const setFormatSource = (next) => {
-    const previous = source;
-    source = next;
-    return previous;
+export const setFormatSource = next => {
+  const previous = source;
+  source = next;
+  return previous;
 };
 /* Where a language comes from when nothing else says: the country most of its speakers are in. */
-const LANGUAGE_REGIONS = { en: 'en-US', nl: 'nl-NL' };
+const LANGUAGE_REGIONS = {
+  en: 'en-US',
+  nl: 'nl-NL'
+};
 /* The one locale to fall back on, so a format never depends on which machine ran the test. */
 export const FALLBACK_LOCALE = 'en-US';
 /* A month and a weekday are words, so they come from the language the interface is in, while the
@@ -17,16 +24,15 @@ export const FALLBACK_LOCALE = 'en-US';
 export const wordLocale = () => source.language();
 /* A tag `Intl` will take, or nothing. macOS hands out locales with overrides attached, and a
    formatter built on one it does not know throws where a number was meant to go. */
-const usable = (tag) => {
-    if (tag === undefined || tag === '') {
-        return null;
-    }
-    try {
-        return Intl.DateTimeFormat.supportedLocalesOf([tag]).length > 0 ? tag : null;
-    }
-    catch {
-        return null;
-    }
+const usable = tag => {
+  if (tag === undefined || tag === '') {
+    return null;
+  }
+  try {
+    return Intl.DateTimeFormat.supportedLocalesOf([tag]).length > 0 ? tag : null;
+  } catch {
+    return null;
+  }
 };
 /*
  * What the operating system was set to read numbers and dates in. In a desktop shell Chromium's own
@@ -35,14 +41,14 @@ const usable = (tag) => {
  * (`systemLocale`). A browser has no such thing, so there the language is the best there is.
  */
 export const systemLocale = () => {
-    const fromShell = usable(source.systemLocale?.());
-    if (fromShell !== null) {
-        return fromShell;
-    }
-    if (typeof navigator === 'undefined') {
-        return FALLBACK_LOCALE;
-    }
-    return usable(navigator.languages?.[0] ?? navigator.language) ?? FALLBACK_LOCALE;
+  const fromShell = usable(source.systemLocale?.());
+  if (fromShell !== null) {
+    return fromShell;
+  }
+  if (typeof navigator === 'undefined') {
+    return FALLBACK_LOCALE;
+  }
+  return usable(navigator.languages?.[0] ?? navigator.language) ?? FALLBACK_LOCALE;
 };
 /*
  * The region a language brings with it. The system's own when it already speaks that language, so
@@ -50,48 +56,53 @@ export const systemLocale = () => {
  * in when it does not.
  */
 const regionOfLanguage = () => {
-    const language = source.language();
-    const system = systemLocale();
-    return system.toLowerCase().startsWith(language) ? system : (LANGUAGE_REGIONS[language] ?? language);
+  const language = source.language();
+  const system = systemLocale();
+  return system.toLowerCase().startsWith(language) ? system : LANGUAGE_REGIONS[language] ?? language;
 };
-const resolve = (region) => {
-    if (region === FORMAT_LANGUAGE) {
-        return regionOfLanguage();
-    }
-    return region === FORMAT_SYSTEM ? systemLocale() : region;
+const resolve = region => {
+  if (region === FORMAT_LANGUAGE) {
+    return regionOfLanguage();
+  }
+  return region === FORMAT_SYSTEM ? systemLocale() : region;
 };
 /* The locale every formatter in this folder is built on. Read outside React as well, so it is a
    plain function over the source rather than a hook. */
 export const formatLocale = () => resolve(source.region());
-const subscribe = (onChange) => source.subscribe(onChange);
+const subscribe = onChange => source.subscribe(onChange);
 /* What a component calls to draw again once the region changes. The value is the locale, which a
    caller may use or ignore; subscribing is the point. */
-export const useFormatLocale = () => useSyncExternalStore(subscribe, formatLocale, formatLocale);
+export const useFormatLocale = () => {
+  return useSyncExternalStore(subscribe, formatLocale, formatLocale);
+};
 /*
  * A formatter per options object, keyed on the object itself, so a module-level spec builds its
  * formatter once and a list of a thousand rows constructs nothing. A region change throws the entry
  * away, since the locale is part of what was cached.
  */
 const cacheFor = (store, options, locale, build) => {
-    const hit = store.get(options);
-    if (hit !== undefined && hit.locale === locale) {
-        return hit.formatter;
-    }
-    const formatter = build(locale, options);
-    store.set(options, { locale, formatter });
-    return formatter;
+  const hit = store.get(options);
+  if (hit !== undefined && hit.locale === locale) {
+    return hit.formatter;
+  }
+  const formatter = build(locale, options);
+  store.set(options, {
+    locale,
+    formatter
+  });
+  return formatter;
 };
 const numbers = new WeakMap();
 const dates = new WeakMap();
 const words = new WeakMap();
 const relatives = new WeakMap();
-export const numberFormatter = (options) => cacheFor(numbers, options, formatLocale(), (locale, spec) => new Intl.NumberFormat(locale, spec));
-export const dateFormatter = (options) => cacheFor(dates, options, formatLocale(), (locale, spec) => new Intl.DateTimeFormat(locale, spec));
+export const numberFormatter = options => cacheFor(numbers, options, formatLocale(), (locale, spec) => new Intl.NumberFormat(locale, spec));
+export const dateFormatter = options => cacheFor(dates, options, formatLocale(), (locale, spec) => new Intl.DateTimeFormat(locale, spec));
 /* The same date, written in the language the words come from. Never shown whole: only its month,
    weekday, era and day period are lifted out of it. */
-export const wordFormatter = (options) => cacheFor(words, options, wordLocale(), (locale, spec) => new Intl.DateTimeFormat(locale, spec));
+export const wordFormatter = options => cacheFor(words, options, wordLocale(), (locale, spec) => new Intl.DateTimeFormat(locale, spec));
 /* `3 min. geleden` is words as much as a number, so the language writes it, the way it writes a month. */
-export const relativeFormatter = (options) => cacheFor(relatives, options, wordLocale(), (locale, spec) => new Intl.RelativeTimeFormat(locale, spec));
+export const relativeFormatter = options => cacheFor(relatives, options, wordLocale(), (locale, spec) => new Intl.RelativeTimeFormat(locale, spec));
 const collators = new Map();
 /*
  * How two labels a person reads are put in order. Labels are words, so the language writes them and
@@ -99,14 +110,17 @@ const collators = new Map();
  * Keyed on the locale rather than on an options object, since there are no options to key on.
  */
 export const labelCollator = () => {
-    const locale = wordLocale();
-    const held = collators.get(locale);
-    if (held !== undefined) {
-        return held;
-    }
-    const collator = new Intl.Collator(locale, { sensitivity: 'base', numeric: true });
-    collators.set(locale, collator);
-    return collator;
+  const locale = wordLocale();
+  const held = collators.get(locale);
+  if (held !== undefined) {
+    return held;
+  }
+  const collator = new Intl.Collator(locale, {
+    sensitivity: 'base',
+    numeric: true
+  });
+  collators.set(locale, collator);
+  return collator;
 };
 let nameCollators = null;
 /*
@@ -114,6 +128,12 @@ let nameCollators = null;
  * case only to break a tie. It is what `localeCompare` did, which built a collator on every call.
  */
 export const nameOrder = (left, right) => {
-    nameCollators ??= { loose: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }), exact: new Intl.Collator() };
-    return nameCollators.loose.compare(left, right) || nameCollators.exact.compare(left, right);
-};
+  nameCollators ??= {
+    loose: new Intl.Collator(undefined, {
+      numeric: true,
+      sensitivity: 'base'
+    }),
+    exact: new Intl.Collator()
+  };
+  return nameCollators.loose.compare(left, right) || nameCollators.exact.compare(left, right);
+};