@pega/cosmos-react-core 4.0.0-dev.2.0 → 4.0.0-dev.21.0

package/lib/components/DateTime/utils.js

@@ -8,66 +8,180 @@ const unitsInMs = {
     minute: 60 * 1000,
     second: 1000
 };
+const timeShort = {
+    hour: 'numeric',
+    minute: 'numeric'
+};
+const timeShort12 = {
+    ...timeShort,
+    hour12: true
+};
+const timeShort24 = {
+    ...timeShort,
+    hour12: false
+};
+const timeLong = {
+    ...timeShort,
+    second: 'numeric'
+};
+const timeLong12 = {
+    ...timeShort12,
+    second: 'numeric'
+};
+const timeLong24 = {
+    ...timeShort24,
+    second: 'numeric'
+};
+const formatMapping = {
+    date: {
+        short: { year: 'numeric', month: 'short', day: 'numeric' },
+        long: { year: 'numeric', month: 'long', day: 'numeric' },
+        numeric: { year: 'numeric', month: 'numeric', day: 'numeric' }
+    },
+    datetime: {
+        short: { year: 'numeric', month: 'short', day: 'numeric', ...timeShort },
+        long: { year: 'numeric', month: 'long', day: 'numeric', ...timeLong },
+        numeric: { year: 'numeric', month: 'numeric', day: 'numeric', ...timeShort }
+    },
+    datetime12: {
+        short: { year: 'numeric', month: 'short', day: 'numeric', ...timeShort12 },
+        long: { year: 'numeric', month: 'long', day: 'numeric', ...timeLong12 },
+        numeric: { year: 'numeric', month: 'numeric', day: 'numeric', ...timeShort12 }
+    },
+    datetime24: {
+        short: { year: 'numeric', month: 'short', day: 'numeric', ...timeShort24 },
+        long: { year: 'numeric', month: 'long', day: 'numeric', ...timeLong24 },
+        numeric: { year: 'numeric', month: 'numeric', day: 'numeric', ...timeShort24 }
+    },
+    time: {
+        short: timeShort,
+        long: timeLong,
+        numeric: timeShort
+    },
+    time12: {
+        short: timeShort12,
+        long: timeLong12,
+        numeric: timeShort12
+    },
+    time24: {
+        short: timeShort24,
+        long: timeLong24,
+        numeric: timeShort24
+    },
+    month: {
+        short: { month: 'short' },
+        long: { month: 'long' },
+        numeric: { month: 'numeric' }
+    },
+    monthyear: {
+        short: { year: 'numeric', month: 'short' },
+        long: { year: 'numeric', month: 'long' },
+        numeric: { year: 'numeric', month: 'numeric' }
+    },
+    week: {
+        short: { month: 'short', day: 'numeric' },
+        long: { month: 'long', day: 'numeric' },
+        numeric: { month: 'numeric', day: 'numeric' }
+    },
+    year: {
+        short: { year: 'numeric' },
+        long: { year: 'numeric' },
+        numeric: { year: '2-digit' }
+    },
+    relative: {
+        short: { style: 'long', numeric: 'auto' },
+        long: { style: 'long', numeric: 'auto' },
+        numeric: { style: 'short', numeric: 'auto' }
+    }
+};
+const dateTimeFormatCache = {};
+const relativeTimeFormatCache = {};
+const displayNamesCache = {};
 export function formatDateTime(value, { t, locale, format, variant, clockFormat, timeZone }) {
-    const timeShort = {
-        hour: 'numeric',
-        minute: 'numeric',
-        hour12: clockFormat ? clockFormat === 12 : undefined
-    };
-    const timeLong = {
-        ...timeShort,
-        second: 'numeric'
-    };
-    const formatMapping = {
-        date: {
-            short: { year: 'numeric', month: 'short', day: 'numeric' },
-            long: { year: 'numeric', month: 'long', day: 'numeric' },
-            numeric: { year: 'numeric', month: 'numeric', day: 'numeric' }
-        },
-        datetime: {
-            short: { year: 'numeric', month: 'short', day: 'numeric', ...timeShort },
-            long: { year: 'numeric', month: 'long', day: 'numeric', ...timeLong },
-            numeric: { year: 'numeric', month: 'numeric', day: 'numeric', ...timeShort }
-        },
-        time: {
-            short: timeShort,
-            long: timeLong,
-            numeric: timeShort
-        },
-        month: {
-            short: { month: 'short' },
-            long: { month: 'long' },
-            numeric: { month: 'numeric' }
-        },
-        year: {
-            short: { year: 'numeric' },
-            long: { year: 'numeric' },
-            numeric: { year: '2-digit' }
-        },
-        monthyear: {
-            short: { year: 'numeric', month: 'short' },
-            long: { year: 'numeric', month: 'long' },
-            numeric: { year: 'numeric', month: 'numeric' }
-        },
-        week: {
-            short: { month: 'short', day: 'numeric' },
-            long: { month: 'long', day: 'numeric' },
-            numeric: { month: 'numeric', day: 'numeric' }
-        },
-        relative: {
-            short: { style: 'long', numeric: 'auto' },
-            long: { style: 'long', numeric: 'auto' },
-            numeric: { style: 'short', numeric: 'auto' }
+    const getFormattedDate = (date, dateVariant, overrideTimeZone) => {
+        const resolvedVariant = dateVariant === 'time' || dateVariant === 'datetime'
+            ? `${dateVariant}${clockFormat ?? ''}`
+            : dateVariant;
+        const resolvedTimeZone = overrideTimeZone ?? timeZone;
+        const resolvedOptions = formatMapping[resolvedVariant][format];
+        dateTimeFormatCache[locale] ??= {};
+        dateTimeFormatCache[locale][`${resolvedTimeZone}`] ??= new Map();
+        const map = dateTimeFormatCache[locale][`${resolvedTimeZone}`];
+        if (!map.has(resolvedOptions)) {
+            map.set(resolvedOptions, new Intl.DateTimeFormat(locale, {
+                ...resolvedOptions,
+                timeZone: resolvedTimeZone
+            }));
         }
-    };
-    const getFormattedDate = (date, dateVariant) => {
-        return new Intl.DateTimeFormat(locale, {
-            ...formatMapping[dateVariant][format],
-            timeZone
-        }).format(date);
+        return map.get(resolvedOptions).format(date);
     };
     const relativeTimeFormatter = (relativeValue, unit) => {
-        return new Intl.RelativeTimeFormat(locale, formatMapping.relative[format]).format(relativeValue, unit);
+        const resolvedOptions = formatMapping.relative[format];
+        relativeTimeFormatCache[locale] ??= new Map();
+        const map = relativeTimeFormatCache[locale];
+        if (!map.has(resolvedOptions)) {
+            map.set(resolvedOptions, new Intl.RelativeTimeFormat(locale, resolvedOptions));
+        }
+        return map.get(resolvedOptions).format(relativeValue, unit);
+    };
+    const getUnitsElapsed = (date, unit) => {
+        let amount;
+        const now = new Date();
+        switch (unit) {
+            case 'year':
+                amount = date.getUTCFullYear() - now.getUTCFullYear();
+                break;
+            case 'month':
+                if (date.getUTCFullYear() === now.getUTCFullYear()) {
+                    amount = date.getUTCMonth() - now.getUTCMonth();
+                }
+                else if (date < now) {
+                    amount = (11 - date.getUTCMonth() + now.getUTCMonth() + 1) * -1;
+                }
+                else {
+                    amount = 11 - now.getUTCMonth() + date.getUTCMonth() + 1;
+                }
+                break;
+            case 'day':
+                if (date.getUTCMonth() === now.getUTCMonth()) {
+                    amount = date.getUTCDate() - now.getUTCDate();
+                }
+                else if (date < now) {
+                    const maximalDayOfMonth = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)).getUTCDate();
+                    amount = (maximalDayOfMonth - date.getUTCDate() + now.getUTCDate()) * -1;
+                }
+                else {
+                    const maximalDayOfMonth = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 0)).getUTCDate();
+                    amount = maximalDayOfMonth - now.getUTCDate() + date.getUTCDate() + 1;
+                }
+                break;
+            case 'hour':
+                if (date.getUTCDate() === now.getUTCDate()) {
+                    amount = date.getUTCHours() - now.getUTCHours();
+                }
+                else if (date < now) {
+                    amount = (23 - date.getUTCHours() + now.getUTCHours() + 1) * -1;
+                }
+                else {
+                    amount = 23 - now.getUTCHours() + date.getUTCHours() + 1;
+                }
+                break;
+            case 'minute':
+                if (date.getUTCHours() === now.getUTCHours()) {
+                    amount = date.getUTCMinutes() - now.getUTCMinutes();
+                }
+                else if (date < now) {
+                    amount = (59 - date.getUTCMinutes() + now.getUTCMinutes() + 1) * -1;
+                }
+                else {
+                    amount = 59 - now.getUTCMinutes() + date.getUTCMinutes() + 1;
+                }
+                break;
+            default:
+                amount = 0;
+                break;
+        }
+        return amount;
     };
     const getRelativeTime = (date) => {
         let elapsed = date.getTime() - Date.now();
@@ -76,20 +190,24 @@ export function formatDateTime(value, { t, locale, format, variant, clockFormat,
             elapsed = 0;
         const unit = (Object.keys(unitsInMs).find(u => Math.abs(elapsed) >= unitsInMs[u]) ||
             'second');
-        return relativeTimeFormatter(Math.round(elapsed / unitsInMs[unit]), unit);
+        const amount = getUnitsElapsed(date, unit);
+        return relativeTimeFormatter(amount, unit);
     };
     const getFormattedWeek = (date) => {
-        const displayNames = new Intl.DisplayNames(locale, {
+        displayNamesCache[locale] ??= new Intl.DisplayNames(locale, {
             style: 'long',
             type: 'dateTimeField'
         });
-        const startDate = getFormattedDate(getStartOfWeek(date), 'week');
-        const endDate = getFormattedDate(getEndOfWeek(date), 'week');
-        return `${cap(displayNames.of('weekOfYear'))} ${getWeek(date)}, ${getWeekYear(date)} (${startDate} - ${endDate})`;
+        const displayNames = displayNamesCache[locale];
+        const adjustedUTCDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
+        const startDate = getFormattedDate(getStartOfWeek(adjustedUTCDate), 'week', 'UTC');
+        const endDate = getFormattedDate(getEndOfWeek(adjustedUTCDate), 'week', 'UTC');
+        return `${cap(displayNames.of('weekOfYear'))} ${getWeek(adjustedUTCDate)}, ${getWeekYear(adjustedUTCDate)} (${startDate} - ${endDate})`;
     };
     const getFormattedQuarterYear = (date) => {
         const formattedYear = getFormattedDate(date, 'year');
-        const quarterNumber = getQuarter(date);
+        const adjustedUTCDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
+        const quarterNumber = getQuarter(adjustedUTCDate);
         return `${t(`date_quarter_q${quarterNumber}`, [formattedYear])}`;
     };
     switch (variant) {
@@ -107,16 +225,19 @@ const dayInMs = 24 * 60 * 60 * 1000;
 const hourInMs = 60 * 60 * 1000;
 const minuteInMs = 60 * 1000;
 const secondInMs = 1000;
-export function formatDuration(valueInMs, { locale, significantUnits }) {
-    const numberFormatterSeconds = new Intl.NumberFormat(locale, {
-        style: 'unit',
-        unit: 'second',
-        unitDisplay: 'narrow'
-    });
+const numberFormatCache = {};
+export function formatDuration(valueInMs, { locale, significantUnits, unitDisplay = 'narrow' }) {
+    numberFormatCache[locale] ??= {};
     const sign = valueInMs < 0 ? '-' : '';
     const absMs = Math.abs(valueInMs);
     if (absMs < secondInMs) {
-        return numberFormatterSeconds.format(0);
+        numberFormatCache[locale].seconds ??= {};
+        numberFormatCache[locale].seconds.narrow ??= new Intl.NumberFormat(locale, {
+            style: 'unit',
+            unit: 'second',
+            unitDisplay: 'narrow'
+        });
+        return numberFormatCache[locale].seconds.narrow.format(0);
     }
     const durationParts = [
         { unit: 'day', value: Math.floor(absMs / dayInMs) },
@@ -126,12 +247,15 @@ export function formatDuration(valueInMs, { locale, significantUnits }) {
     ];
     const result = [];
     for (let i = 0; result.length < significantUnits && i < durationParts.length; i += 1) {
-        if (durationParts[i].value > 0) {
-            result.push(new Intl.NumberFormat(locale, {
+        const { value, unit } = durationParts[i];
+        if (value > 0) {
+            numberFormatCache[locale][unit] ??= {};
+            numberFormatCache[locale][unit][unitDisplay] ??= new Intl.NumberFormat(locale, {
                 style: 'unit',
-                unit: durationParts[i].unit,
-                unitDisplay: 'narrow'
-            }).format(durationParts[i].value));
+                unit,
+                unitDisplay
+            });
+            result.push(numberFormatCache[locale][unit][unitDisplay].format(value));
         }
     }
     return `${sign}${result.join(' ')}`;

package/lib/components/DateTime/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/DateTime/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { TranslationFunction, TranslationPack } from '../../i18n';\nimport { cap } from '../../utils';\n\nimport { AbsoluteVariant, DateTimeFormat, DateTimeVariant } from './DateTime.types';\nimport {\n  ClockFormat,\n  getEndOfWeek,\n  getQuarter,\n  getStartOfWeek,\n  getWeek,\n  getWeekYear\n} from './Input/utils';\n\nconst unitsInMs = {\n  year: 24 * 60 * 60 * 1000 * 365,\n  month: (24 * 60 * 60 * 1000 * 365) / 12,\n  day: 24 * 60 * 60 * 1000,\n  hour: 60 * 60 * 1000,\n  minute: 60 * 1000,\n  second: 1000\n} as const;\n\ntype TimeUnit = keyof typeof unitsInMs;\n\ninterface TimeShort {\n  hour: 'numeric';\n  minute: 'numeric';\n  hour12: boolean | undefined;\n}\ninterface TimeLong extends TimeShort {\n  second: 'numeric';\n}\n\ninterface DateTimeFormatOptions {\n  t: TranslationFunction<TranslationPack>;\n  locale: string;\n  format: DateTimeFormat;\n  variant: DateTimeVariant;\n  timeZone?: string;\n  clockFormat?: ClockFormat;\n}\n\nexport function formatDateTime(\n  value: Date,\n  { t, locale, format, variant, clockFormat, timeZone }: DateTimeFormatOptions\n) {\n  const timeShort: TimeShort = {\n    hour: 'numeric',\n    minute: 'numeric',\n    hour12: clockFormat ? clockFormat === 12 : undefined\n  };\n\n  const timeLong: TimeLong = {\n    ...timeShort,\n    second: 'numeric'\n  };\n\n  const formatMapping = {\n    date: {\n      short: { year: 'numeric', month: 'short', day: 'numeric' } as const,\n      long: { year: 'numeric', month: 'long', day: 'numeric' } as const,\n      numeric: { year: 'numeric', month: 'numeric', day: 'numeric' } as const\n    },\n    datetime: {\n      short: { year: 'numeric', month: 'short', day: 'numeric', ...timeShort } as const,\n      long: { year: 'numeric', month: 'long', day: 'numeric', ...timeLong } as const,\n      numeric: { year: 'numeric', month: 'numeric', day: 'numeric', ...timeShort } as const\n    },\n    time: {\n      short: timeShort,\n      long: timeLong,\n      numeric: timeShort\n    },\n    month: {\n      short: { month: 'short' } as const,\n      long: { month: 'long' } as const,\n      numeric: { month: 'numeric' } as const\n    },\n    year: {\n      short: { year: 'numeric' } as const,\n      long: { year: 'numeric' } as const,\n      numeric: { year: '2-digit' } as const\n    },\n    monthyear: {\n      short: { year: 'numeric', month: 'short' } as const,\n      long: { year: 'numeric', month: 'long' } as const,\n      numeric: { year: 'numeric', month: 'numeric' } as const\n    },\n    week: {\n      short: { month: 'short', day: 'numeric' } as const,\n      long: { month: 'long', day: 'numeric' } as const,\n      numeric: { month: 'numeric', day: 'numeric' } as const\n    },\n    relative: {\n      short: { style: 'long', numeric: 'auto' } as const,\n      long: { style: 'long', numeric: 'auto' } as const,\n      numeric: { style: 'short', numeric: 'auto' } as const\n    }\n  };\n\n  const getFormattedDate = (date: Date, dateVariant: Exclude<AbsoluteVariant, 'quarteryear'>) => {\n    return new Intl.DateTimeFormat(locale, {\n      ...formatMapping[dateVariant][format],\n      timeZone\n    }).format(date);\n  };\n\n  const relativeTimeFormatter = (relativeValue: number, unit: TimeUnit) => {\n    return new Intl.RelativeTimeFormat(locale, formatMapping.relative[format]).format(\n      relativeValue,\n      unit\n    );\n  };\n\n  const getRelativeTime = (date: Date) => {\n    let elapsed = date.getTime() - Date.now();\n    // Deliberately reduce precision to 1 minute\n    if (Math.abs(elapsed) < 60000) elapsed = 0;\n    const unit = (Object.keys(unitsInMs).find(u => Math.abs(elapsed) >= unitsInMs[u as TimeUnit]) ||\n      'second') as TimeUnit;\n    return relativeTimeFormatter(Math.round(elapsed / unitsInMs[unit]), unit);\n  };\n\n  const getFormattedWeek = (date: Date) => {\n    const displayNames = new Intl.DisplayNames(locale, {\n      style: 'long',\n      type: 'dateTimeField'\n    }) as Intl.DateTimeDisplayNames;\n    const startDate = getFormattedDate(getStartOfWeek(date), 'week');\n    const endDate = getFormattedDate(getEndOfWeek(date), 'week');\n    return `${cap(displayNames.of('weekOfYear'))} ${getWeek(date)}, ${getWeekYear(\n      date\n    )} (${startDate} - ${endDate})`;\n  };\n\n  const getFormattedQuarterYear = (date: Date) => {\n    const formattedYear = getFormattedDate(date, 'year');\n    const quarterNumber = getQuarter(date);\n    return `${t(`date_quarter_q${quarterNumber}`, [formattedYear])}`;\n  };\n\n  switch (variant) {\n    case 'relative':\n      return getRelativeTime(value);\n    case 'week':\n      return getFormattedWeek(value);\n    case 'quarteryear':\n      return getFormattedQuarterYear(value);\n    default:\n      return getFormattedDate(value, variant);\n  }\n}\n\nconst dayInMs = 24 * 60 * 60 * 1000;\nconst hourInMs = 60 * 60 * 1000;\nconst minuteInMs = 60 * 1000;\nconst secondInMs = 1000;\n\ninterface DurationFormatOptions {\n  locale: string;\n  significantUnits: 4 | 3 | 2 | 1;\n}\n\nexport function formatDuration(\n  valueInMs: number,\n  { locale, significantUnits }: DurationFormatOptions\n) {\n  const numberFormatterSeconds = new Intl.NumberFormat(locale, {\n    style: 'unit',\n    unit: 'second',\n    unitDisplay: 'narrow'\n  });\n  const sign = valueInMs < 0 ? '-' : '';\n  const absMs = Math.abs(valueInMs);\n  if (absMs < secondInMs) {\n    return numberFormatterSeconds.format(0);\n  }\n\n  const durationParts = [\n    { unit: 'day', value: Math.floor(absMs / dayInMs) },\n    { unit: 'hour', value: Math.floor((absMs % dayInMs) / hourInMs) },\n    { unit: 'minute', value: Math.floor((absMs % hourInMs) / minuteInMs) },\n    { unit: 'second', value: Math.floor((absMs % minuteInMs) / secondInMs) }\n  ];\n\n  const result = [];\n  for (let i = 0; result.length < significantUnits && i < durationParts.length; i += 1) {\n    if (durationParts[i].value > 0) {\n      result.push(\n        new Intl.NumberFormat(locale, {\n          style: 'unit',\n          unit: durationParts[i].unit,\n          unitDisplay: 'narrow'\n        }).format(durationParts[i].value)\n      );\n    }\n  }\n  return `${sign}${result.join(' ')}`;\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/DateTime/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { TranslationFunction, TranslationPack } from '../../i18n';\nimport { ExcludeStrict } from '../../types';\nimport { cap } from '../../utils';\n\nimport { AbsoluteVariant, DateTimeFormat, DateTimeVariant } from './DateTime.types';\nimport {\n  ClockFormat,\n  getEndOfWeek,\n  getQuarter,\n  getStartOfWeek,\n  getWeek,\n  getWeekYear\n} from './Input/utils';\n\nconst unitsInMs = {\n  year: 24 * 60 * 60 * 1000 * 365,\n  month: (24 * 60 * 60 * 1000 * 365) / 12,\n  day: 24 * 60 * 60 * 1000,\n  hour: 60 * 60 * 1000,\n  minute: 60 * 1000,\n  second: 1000\n} satisfies Partial<Record<Intl.RelativeTimeFormatUnit, number>>;\n\ntype TimeUnit = keyof typeof unitsInMs;\n\ntype DateTimeFormatOptions = {\n  locale: string;\n  format: DateTimeFormat;\n  timeZone?: string;\n  clockFormat?: ClockFormat;\n} & (\n  | {\n      variant: ExcludeStrict<DateTimeVariant, 'quarteryear'>;\n      t?: TranslationFunction<TranslationPack>;\n    }\n  | { variant: 'quarteryear'; t: TranslationFunction<TranslationPack> }\n);\n\ntype TimeOptions = Pick<Intl.DateTimeFormatOptions, 'hour' | 'minute' | 'second' | 'hour12'>;\n\nconst timeShort = {\n  hour: 'numeric',\n  minute: 'numeric'\n} satisfies TimeOptions;\n\nconst timeShort12 = {\n  ...timeShort,\n  hour12: true\n} satisfies TimeOptions;\n\nconst timeShort24 = {\n  ...timeShort,\n  hour12: false\n} satisfies TimeOptions;\n\nconst timeLong = {\n  ...timeShort,\n  second: 'numeric'\n} satisfies TimeOptions;\n\nconst timeLong12 = {\n  ...timeShort12,\n  second: 'numeric'\n} satisfies TimeOptions;\n\nconst timeLong24 = {\n  ...timeShort24,\n  second: 'numeric'\n} satisfies TimeOptions;\n\ntype AddClockFormatToTimeKeys<Key extends DateTimeVariant> = Key extends `${string}time`\n  ? `${Key}${'' | 12 | 24}`\n  : Key;\n\nconst formatMapping = {\n  date: {\n    short: { year: 'numeric', month: 'short', day: 'numeric' },\n    long: { year: 'numeric', month: 'long', day: 'numeric' },\n    numeric: { year: 'numeric', month: 'numeric', day: 'numeric' }\n  },\n  datetime: {\n    short: { year: 'numeric', month: 'short', day: 'numeric', ...timeShort },\n    long: { year: 'numeric', month: 'long', day: 'numeric', ...timeLong },\n    numeric: { year: 'numeric', month: 'numeric', day: 'numeric', ...timeShort }\n  },\n  datetime12: {\n    short: { year: 'numeric', month: 'short', day: 'numeric', ...timeShort12 },\n    long: { year: 'numeric', month: 'long', day: 'numeric', ...timeLong12 },\n    numeric: { year: 'numeric', month: 'numeric', day: 'numeric', ...timeShort12 }\n  },\n  datetime24: {\n    short: { year: 'numeric', month: 'short', day: 'numeric', ...timeShort24 },\n    long: { year: 'numeric', month: 'long', day: 'numeric', ...timeLong24 },\n    numeric: { year: 'numeric', month: 'numeric', day: 'numeric', ...timeShort24 }\n  },\n  time: {\n    short: timeShort,\n    long: timeLong,\n    numeric: timeShort\n  },\n  time12: {\n    short: timeShort12,\n    long: timeLong12,\n    numeric: timeShort12\n  },\n  time24: {\n    short: timeShort24,\n    long: timeLong24,\n    numeric: timeShort24\n  },\n  month: {\n    short: { month: 'short' },\n    long: { month: 'long' },\n    numeric: { month: 'numeric' }\n  },\n  monthyear: {\n    short: { year: 'numeric', month: 'short' },\n    long: { year: 'numeric', month: 'long' },\n    numeric: { year: 'numeric', month: 'numeric' }\n  },\n  week: {\n    short: { month: 'short', day: 'numeric' },\n    long: { month: 'long', day: 'numeric' },\n    numeric: { month: 'numeric', day: 'numeric' }\n  },\n  year: {\n    short: { year: 'numeric' },\n    long: { year: 'numeric' },\n    numeric: { year: '2-digit' }\n  },\n  relative: {\n    short: { style: 'long', numeric: 'auto' },\n    long: { style: 'long', numeric: 'auto' },\n    numeric: { style: 'short', numeric: 'auto' }\n  }\n} satisfies Record<\n  AddClockFormatToTimeKeys<ExcludeStrict<AbsoluteVariant, 'quarteryear'>>,\n  Record<DateTimeFormat, Intl.DateTimeFormatOptions>\n> &\n  Record<'relative', Record<DateTimeFormat, Intl.RelativeTimeFormatOptions>>;\n\nconst dateTimeFormatCache: Record<\n  // locale\n  string,\n  Record<\n    // timeZone\n    string,\n    Map<Intl.DateTimeFormatOptions, Intl.DateTimeFormat>\n  >\n> = {};\n\nconst relativeTimeFormatCache: Record<\n  // locale\n  string,\n  Map<Intl.RelativeTimeFormatOptions, Intl.RelativeTimeFormat>\n> = {};\n\nconst displayNamesCache: Record<\n  // locale\n  string,\n  Intl.DateTimeDisplayNames\n> = {};\n\nexport function formatDateTime(\n  value: Date,\n  { t, locale, format, variant, clockFormat, timeZone }: DateTimeFormatOptions\n) {\n  const getFormattedDate = (\n    date: Date,\n    dateVariant: ExcludeStrict<AbsoluteVariant, 'quarteryear'>,\n    overrideTimeZone?: string\n  ) => {\n    const resolvedVariant: AddClockFormatToTimeKeys<typeof dateVariant> =\n      dateVariant === 'time' || dateVariant === 'datetime'\n        ? `${dateVariant}${clockFormat ?? ''}`\n        : dateVariant;\n    const resolvedTimeZone = overrideTimeZone ?? timeZone;\n    const resolvedOptions = formatMapping[resolvedVariant][format];\n\n    dateTimeFormatCache[locale] ??= {};\n    dateTimeFormatCache[locale][`${resolvedTimeZone}`] ??= new Map();\n\n    const map = dateTimeFormatCache[locale][`${resolvedTimeZone}`];\n\n    if (!map.has(resolvedOptions)) {\n      map.set(\n        resolvedOptions,\n        new Intl.DateTimeFormat(locale, {\n          ...resolvedOptions,\n          timeZone: resolvedTimeZone\n        })\n      );\n    }\n\n    return map.get(resolvedOptions)!.format(date);\n  };\n\n  const relativeTimeFormatter = (relativeValue: number, unit: TimeUnit) => {\n    const resolvedOptions = formatMapping.relative[format];\n\n    relativeTimeFormatCache[locale] ??= new Map();\n    const map = relativeTimeFormatCache[locale];\n\n    if (!map.has(resolvedOptions)) {\n      map.set(resolvedOptions, new Intl.RelativeTimeFormat(locale, resolvedOptions));\n    }\n\n    return map.get(resolvedOptions)!.format(relativeValue, unit);\n  };\n\n  const getUnitsElapsed = (date: Date, unit: TimeUnit): number => {\n    let amount: number;\n    const now = new Date();\n\n    switch (unit) {\n      case 'year':\n        amount = date.getUTCFullYear() - now.getUTCFullYear();\n        break;\n      case 'month':\n        if (date.getUTCFullYear() === now.getUTCFullYear()) {\n          amount = date.getUTCMonth() - now.getUTCMonth();\n        } else if (date < now) {\n          amount = (11 - date.getUTCMonth() + now.getUTCMonth() + 1) * -1;\n        } else {\n          amount = 11 - now.getUTCMonth() + date.getUTCMonth() + 1;\n        }\n        break;\n      case 'day':\n        if (date.getUTCMonth() === now.getUTCMonth()) {\n          amount = date.getUTCDate() - now.getUTCDate();\n        } else if (date < now) {\n          const maximalDayOfMonth = new Date(\n            Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + 1, 0)\n          ).getUTCDate();\n          amount = (maximalDayOfMonth - date.getUTCDate() + now.getUTCDate()) * -1;\n        } else {\n          const maximalDayOfMonth = new Date(\n            Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 0)\n          ).getUTCDate();\n          amount = maximalDayOfMonth - now.getUTCDate() + date.getUTCDate() + 1;\n        }\n        break;\n      case 'hour':\n        if (date.getUTCDate() === now.getUTCDate()) {\n          amount = date.getUTCHours() - now.getUTCHours();\n        } else if (date < now) {\n          amount = (23 - date.getUTCHours() + now.getUTCHours() + 1) * -1;\n        } else {\n          amount = 23 - now.getUTCHours() + date.getUTCHours() + 1;\n        }\n        break;\n      case 'minute':\n        if (date.getUTCHours() === now.getUTCHours()) {\n          amount = date.getUTCMinutes() - now.getUTCMinutes();\n        } else if (date < now) {\n          amount = (59 - date.getUTCMinutes() + now.getUTCMinutes() + 1) * -1;\n        } else {\n          amount = 59 - now.getUTCMinutes() + date.getUTCMinutes() + 1;\n        }\n        break;\n      default:\n        amount = 0;\n        break;\n    }\n    return amount;\n  };\n\n  const getRelativeTime = (date: Date) => {\n    let elapsed = date.getTime() - Date.now();\n    // Deliberately reduce precision to 1 minute\n    if (Math.abs(elapsed) < 60000) elapsed = 0;\n    const unit = (Object.keys(unitsInMs).find(u => Math.abs(elapsed) >= unitsInMs[u as TimeUnit]) ||\n      'second') as TimeUnit;\n    const amount = getUnitsElapsed(date, unit);\n\n    return relativeTimeFormatter(amount, unit);\n  };\n\n  const getFormattedWeek = (date: Date) => {\n    displayNamesCache[locale] ??= new Intl.DisplayNames(locale, {\n      style: 'long',\n      type: 'dateTimeField'\n    }) as Intl.DateTimeDisplayNames;\n\n    const displayNames = displayNamesCache[locale];\n    const adjustedUTCDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);\n    const startDate = getFormattedDate(getStartOfWeek(adjustedUTCDate), 'week', 'UTC');\n    const endDate = getFormattedDate(getEndOfWeek(adjustedUTCDate), 'week', 'UTC');\n    return `${cap(displayNames.of('weekOfYear'))} ${getWeek(adjustedUTCDate)}, ${getWeekYear(\n      adjustedUTCDate\n    )} (${startDate} - ${endDate})`;\n  };\n\n  const getFormattedQuarterYear = (date: Date) => {\n    const formattedYear = getFormattedDate(date, 'year');\n    const adjustedUTCDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);\n    const quarterNumber = getQuarter(adjustedUTCDate);\n    return `${t!(`date_quarter_q${quarterNumber}`, [formattedYear])}`;\n  };\n\n  switch (variant) {\n    case 'relative':\n      return getRelativeTime(value);\n    case 'week':\n      return getFormattedWeek(value);\n    case 'quarteryear':\n      return getFormattedQuarterYear(value);\n    default:\n      return getFormattedDate(value, variant);\n  }\n}\n\nconst dayInMs = 24 * 60 * 60 * 1000;\nconst hourInMs = 60 * 60 * 1000;\nconst minuteInMs = 60 * 1000;\nconst secondInMs = 1000;\n\ninterface DurationFormatOptions {\n  locale: string;\n  significantUnits: 4 | 3 | 2 | 1;\n  unitDisplay?: Intl.NumberFormatOptions['unitDisplay'];\n}\n\nconst numberFormatCache: Record<\n  // locale\n  string,\n  Record<\n    // unit\n    string,\n    Record<\n      // unitDisplay\n      string,\n      Intl.NumberFormat\n    >\n  >\n> = {};\n\nexport function formatDuration(\n  valueInMs: number,\n  { locale, significantUnits, unitDisplay = 'narrow' }: DurationFormatOptions\n) {\n  numberFormatCache[locale] ??= {};\n\n  const sign = valueInMs < 0 ? '-' : '';\n  const absMs = Math.abs(valueInMs);\n  if (absMs < secondInMs) {\n    numberFormatCache[locale].seconds ??= {};\n\n    numberFormatCache[locale].seconds.narrow ??= new Intl.NumberFormat(locale, {\n      style: 'unit',\n      unit: 'second',\n      unitDisplay: 'narrow'\n    });\n\n    return numberFormatCache[locale].seconds.narrow.format(0);\n  }\n\n  const durationParts = [\n    { unit: 'day', value: Math.floor(absMs / dayInMs) },\n    { unit: 'hour', value: Math.floor((absMs % dayInMs) / hourInMs) },\n    { unit: 'minute', value: Math.floor((absMs % hourInMs) / minuteInMs) },\n    { unit: 'second', value: Math.floor((absMs % minuteInMs) / secondInMs) }\n  ];\n\n  const result = [];\n  for (let i = 0; result.length < significantUnits && i < durationParts.length; i += 1) {\n    const { value, unit } = durationParts[i];\n\n    if (value > 0) {\n      numberFormatCache[locale][unit] ??= {};\n      numberFormatCache[locale][unit][unitDisplay] ??= new Intl.NumberFormat(locale, {\n        style: 'unit',\n        unit,\n        unitDisplay\n      });\n\n      result.push(numberFormatCache[locale][unit][unitDisplay].format(value));\n    }\n  }\n  return `${sign}${result.join(' ')}`;\n}\n"]}

package/lib/components/Dialog/Dialog.d.ts

@@ -1,32 +1,5 @@
-import { FunctionComponent, Ref, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
-import { BaseProps, ForwardProps } from '../../types';
-import { PopoverProps } from '../Popover';
-export interface DialogProps extends BaseProps {
-    target: HTMLElement | null;
-    placement?: PopoverProps['placement'];
-    children: PopoverProps['children'];
-    heading: string;
-    headingHidden?: boolean;
-    onSubmit?: (arg: {
-        close: () => void;
-    }) => void;
-    onClose?: () => void;
-    onOpen?: () => void;
-    loading?: boolean;
-    ref?: Ref<HTMLDivElement>;
-}
-export declare const StyledDialog: import("styled-components").StyledComponent<"dialog", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDialogTitle: import("styled-components").StyledComponent<FunctionComponent<import("../Text").TextProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const useDialog: () => {
-    target: HTMLElement | null;
-    loading: boolean;
-    setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    events: {
-        onMouseDown: (e: ReactMouseEvent) => void;
-        onKeyDown: (e: ReactKeyboardEvent) => void;
-    };
-    setTargetWithEvent: (e: ReactMouseEvent | ReactKeyboardEvent) => void;
-};
-declare const Dialog: FunctionComponent<DialogProps & ForwardProps>;
+import { FC, HTMLAttributes } from 'react';
+import { DialogProps } from './Dialog.types';
+declare const Dialog: FC<DialogProps & HTMLAttributes<HTMLDivElement>>;
 export default Dialog;
 //# sourceMappingURL=Dialog.d.ts.map

package/lib/components/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAEjB,GAAG,EAKH,UAAU,IAAI,eAAe,EAC7B,aAAa,IAAI,kBAAkB,EACpC,MAAM,OAAO,CAAC;AAcf,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKtD,OAAgB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAKnD,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,QAAQ,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,4GAgBxB,CAAC;AAIF,eAAO,MAAM,iBAAiB,iKAsB7B,CAAC;AAIF,eAAO,MAAM,SAAS;;;;;yBAeC,eAAe;uBAGjB,kBAAkB;;4BAdN,eAAe,GAAG,kBAAkB;CAsBpE,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAgKzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAqC5D,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Dialog/Dialog.js

@@ -1,150 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { useConsolidatedRef, useElement, useEscape, useFocusTrap, useI18n, useOuterEvent, usePrevious, useUID } from '../../hooks';
-import { defaultThemeProp } from '../../theme';
-import { getFocusables } from '../../utils';
-import Button from '../Button';
-import { CardContent, CardFooter, CardHeader } from '../Card';
-import Icon from '../Icon';
-import Popover from '../Popover';
-import Progress from '../Progress';
-import Text from '../Text';
-import VisuallyHiddenText from '../VisuallyHiddenText';
-export const StyledDialog = styled.dialog(({ theme: { base: { 'content-width': contentWidth, palette: { 'foreground-color': foregroundColor } } } }) => {
-    return css `
-      border: none;
-      min-width: ${contentWidth.sm};
-      max-width: ${contentWidth.lg};
-      color: ${foregroundColor};
-    `;
-});
-StyledDialog.defaultProps = defaultThemeProp;
-export const StyledDialogTitle = styled(Text)(({ theme: { base: { shadow, 'border-radius': borderRadius } } }) => {
-    return css `
-      position: relative;
-      ::after {
-        content: '';
-        border-radius: ${borderRadius};
-        position: absolute;
-        inset: -0.25rem;
-      }
-      :focus-visible {
-        outline: none;
-        ::after {
-          box-shadow: ${shadow.focus}, inset ${shadow['focus-solid']};
-        }
-      }
-    `;
-});
-StyledDialogTitle.defaultProps = defaultThemeProp;
-export const useDialog = () => {
-    const [target, setTarget] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const setTargetWithEvent = (e) => {
-        if (e.target instanceof HTMLElement) {
-            setTarget(e.target);
-        }
-    };
-    return {
-        target,
-        loading,
-        setLoading,
-        events: {
-            onMouseDown: (e) => {
-                setTargetWithEvent(e);
-            },
-            onKeyDown: (e) => {
-                if (e.key === 'Enter') {
-                    setTargetWithEvent(e);
-                }
-            }
-        },
-        setTargetWithEvent
-    };
-};
-const Dialog = forwardRef(({ target, placement, heading, headingHidden = false, onSubmit, onClose, onOpen, loading, children, ...restProps }, ref) => {
-    const t = useI18n();
-    const headingId = useUID();
-    const [popoverEl, setPopoverEl] = useElement();
-    const popoverRef = useConsolidatedRef(ref, setPopoverEl);
-    const headingRef = useRef(null);
-    const [currentTarget, setCurrentTarget] = useState(() => target);
-    const [show, setShow] = useState(false);
-    const skipChangeShow = useRef(false);
-    const prevTarget = usePrevious(target);
-    useEscape(() => {
-        if (show) {
-            setShow(false);
-        }
-    }, undefined, [show, setShow]);
-    useOuterEvent('mousedown', [target, popoverEl], () => {
-        if (target && popoverEl && show) {
-            setShow(false);
-            onClose?.();
-        }
-    });
-    useFocusTrap(popoverRef);
-    useEffect(() => {
-        if (!show) {
-            currentTarget?.focus();
-        }
-    }, [show]);
-    useEffect(() => {
-        if (show && popoverEl) {
-            if (headingRef.current) {
-                headingRef.current.focus();
-            }
-            else {
-                const focusables = getFocusables(popoverRef);
-                focusables[0]?.focus();
-            }
-        }
-    }, [show, popoverEl]);
-    useLayoutEffect(() => {
-        const onTargetClick = (e) => {
-            setCurrentTarget(prev => (e.target ? e.target : prev));
-            if (!skipChangeShow.current) {
-                setShow(prev => !prev);
-            }
-            else {
-                skipChangeShow.current = false;
-            }
-        };
-        if (target instanceof HTMLElement) {
-            target.addEventListener('click', onTargetClick);
-        }
-        return () => {
-            if (target instanceof HTMLElement) {
-                target.removeEventListener('click', onTargetClick);
-            }
-        };
-    }, [target]);
-    useEffect(() => {
-        if (show) {
-            onOpen?.();
-        }
-        else {
-            onClose?.();
-        }
-    }, [show]);
-    useEffect(() => {
-        /* If our target is changing and the popover is already open we will want
-        to skip the next change. The next show change would come from a click on the new button,
-        the popover should stay open. */
-        if (target !== prevTarget && show) {
-            skipChangeShow.current = true;
-        }
-    }, [target, show]);
-    const onTitleKeyDown = (e) => {
-        const focusables = getFocusables(popoverRef);
-        if (e.shiftKey && e.key === 'Tab') {
-            e.preventDefault();
-            focusables[focusables.length - 1].focus();
-        }
-    };
-    const progress = loading ? _jsx(Progress, { placement: 'local' }) : null;
-    return (_jsxs(Popover, { ...restProps, as: StyledDialog, ref: popoverRef, target: currentTarget, placement: placement, show: show, open: show, "aria-labelledby": headingId, children: [_jsx(CardHeader, { actions: !onSubmit ? (_jsx(Button, { icon: true, variant: 'simple', onClick: () => setShow(false), "aria-label": t('close'), children: _jsx(Icon, { name: 'times' }) })) : undefined, children: headingHidden ? (_jsx(VisuallyHiddenText, { id: headingId, children: heading })) : (_jsx(StyledDialogTitle, { variant: 'h2', tabIndex: -1, ref: headingRef, onKeyDown: onTitleKeyDown, id: headingId, children: heading })) }), _jsxs(CardContent, { children: [children, progress] }), onSubmit && (_jsxs(CardFooter, { justify: 'between', children: [_jsx(Button, { variant: 'secondary', onClick: () => setShow(false), children: t('cancel') }), _jsx(Button, { variant: 'primary', onClick: () => onSubmit({ close: () => setShow(false) }), disabled: loading, children: t('submit') })] }))] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useConsolidatedRef } from '../../hooks';
+import { StyledDialog } from './Dialog.styles';
+const Dialog = forwardRef(({ arrow = true, target, labelledbyId, ariaLabel, portal, strategy, placement, children, progress, ...restProps }, ref) => {
+    const dialogRef = useConsolidatedRef(ref);
+    return (_jsx(StyledDialog, { ...restProps, role: 'dialog', arrow: arrow, "aria-modal": 'false', "aria-labelledby": labelledbyId, "aria-label": ariaLabel, "aria-busy": progress ? 'true' : 'false', ref: dialogRef, target: target, portal: portal, strategy: strategy, placement: placement, children: children }));
 });
 export default Dialog;
 //# sourceMappingURL=Dialog.js.map

package/lib/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAIV,SAAS,EACT,eAAe,EACf,MAAM,EACN,QAAQ,EAGT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,kBAAkB,EAClB,UAAU,EACV,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACb,WAAW,EACX,MAAM,EACP,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC9D,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAyB,MAAM,YAAY,CAAC;AACnD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAevD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CACvC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,eAAe,EAAE,YAAY,EAC7B,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EACjD,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;mBAEK,YAAY,CAAC,EAAE;mBACf,YAAY,CAAC,EAAE;eACnB,eAAe;KACzB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,YAAY,EAAE,EAChD,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;yBAIW,YAAY;;;;;;;wBAOb,MAAM,CAAC,KAAK,WAAW,MAAM,CAAC,aAAa,CAAC;;;KAG/D,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC/D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,kBAAkB,GAAG,CAAC,CAAuC,EAAE,EAAE;QACrE,IAAI,CAAC,CAAC,MAAM,YAAY,WAAW,EAAE;YACnC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,OAAO;QACL,MAAM;QACN,OAAO;QACP,UAAU;QACV,MAAM,EAAE;YACN,WAAW,EAAE,CAAC,CAAkB,EAAE,EAAE;gBAClC,kBAAkB,CAAC,CAAC,CAAC,CAAC;YACxB,CAAC;YACD,SAAS,EAAE,CAAC,CAAqB,EAAE,EAAE;gBACnC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;oBACrB,kBAAkB,CAAC,CAAC,CAAC,CAAC;iBACvB;YACH,CAAC;SACF;QACD,kBAAkB;KACnB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAkD,UAAU,CACtE,CACE,EACE,MAAM,EACN,SAAS,EACT,OAAO,EACP,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,EACP,QAAQ,EACR,GAAG,SAAS,EACiB,EAC/B,GAAuB,EACvB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,SAAS,GAAG,MAAM,EAAE,CAAC;IAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAkB,CAAC;IAC/D,MAAM,UAAU,GAAG,kBAAkB,CAAC,GAAG,EAAE,YAAY,CAAC,CAAC;IACzD,MAAM,UAAU,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC;IACjE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IACvC,SAAS,CACP,GAAG,EAAE;QACH,IAAI,IAAI,EAAE;YACR,OAAO,CAAC,KAAK,CAAC,CAAC;SAChB;IACH,CAAC,EACD,SAAS,EACT,CAAC,IAAI,EAAE,OAAO,CAAC,CAChB,CAAC;IACF,aAAa,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE;QACnD,IAAI,MAAM,IAAI,SAAS,IAAI,IAAI,EAAE;YAC/B,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,OAAO,EAAE,EAAE,CAAC;SACb;IACH,CAAC,CAAC,CAAC;IACH,YAAY,CAAC,UAAU,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,EAAE;YACT,aAAa,EAAE,KAAK,EAAE,CAAC;SACxB;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,IAAI,SAAS,EAAE;YACrB,IAAI,UAAU,CAAC,OAAO,EAAE;gBACtB,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;aAC5B;iBAAM;gBACL,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;gBAC7C,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;aACxB;SACF;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAEtB,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACtC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC,MAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;YACxE,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;gBAC3B,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;aACxB;iBAAM;gBACL,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;aAChC;QACH,CAAC,CAAC;QACF,IAAI,MAAM,YAAY,WAAW,EAAE;YACjC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;SACjD;QACD,OAAO,GAAG,EAAE;YACV,IAAI,MAAM,YAAY,WAAW,EAAE;gBACjC,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;aACpD;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,EAAE;YACR,MAAM,EAAE,EAAE,CAAC;SACZ;aAAM;YACL,OAAO,EAAE,EAAE,CAAC;SACb;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,SAAS,CAAC,GAAG,EAAE;QACb;;wCAEgC;QAChC,IAAI,MAAM,KAAK,UAAU,IAAI,IAAI,EAAE;YACjC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IAEnB,MAAM,cAAc,GAAG,CAAC,CAAqB,EAAE,EAAE;QAC/C,MAAM,UAAU,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC;QAC7C,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE;YACjC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;SAC3C;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjE,OAAO,CACL,MAAC,OAAO,OACF,SAAS,EACb,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,UAAU,EACf,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,qBACO,SAAS,aAE1B,KAAC,UAAU,IACT,OAAO,EACL,CAAC,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,gBAAc,CAAC,CAAC,OAAO,CAAC,YACjF,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,CACV,CAAC,CAAC,CAAC,SAAS,YAGd,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,kBAAkB,IAAC,EAAE,EAAE,SAAS,YAAG,OAAO,GAAsB,CAClE,CAAC,CAAC,CAAC,CACF,KAAC,iBAAiB,IAChB,OAAO,EAAC,IAAI,EACZ,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,cAAc,EACzB,EAAE,EAAE,SAAS,YAEZ,OAAO,GACU,CACrB,GACU,EACb,MAAC,WAAW,eACT,QAAQ,EACR,QAAQ,IACG,EACb,QAAQ,IAAI,CACX,MAAC,UAAU,IAAC,OAAO,EAAC,SAAS,aAC3B,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,YACtD,CAAC,CAAC,QAAQ,CAAC,GACL,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EACxD,QAAQ,EAAE,OAAO,YAEhB,CAAC,CAAC,QAAQ,CAAC,GACL,IACE,CACd,IACO,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  MouseEvent as ReactMouseEvent,\n  KeyboardEvent as ReactKeyboardEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useConsolidatedRef,\n  useElement,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent,\n  usePrevious,\n  useUID\n} from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport { BaseProps, ForwardProps } from '../../types';\nimport { getFocusables } from '../../utils';\nimport Button from '../Button';\nimport { CardContent, CardFooter, CardHeader } from '../Card';\nimport Icon from '../Icon';\nimport Popover, { PopoverProps } from '../Popover';\nimport Progress from '../Progress';\nimport Text from '../Text';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\n\nexport interface DialogProps extends BaseProps {\n  target: HTMLElement | null;\n  placement?: PopoverProps['placement'];\n  children: PopoverProps['children'];\n  heading: string;\n  headingHidden?: boolean;\n  onSubmit?: (arg: { close: () => void }) => void;\n  onClose?: () => void;\n  onOpen?: () => void;\n  loading?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledDialog = styled.dialog(\n  ({\n    theme: {\n      base: {\n        'content-width': contentWidth,\n        palette: { 'foreground-color': foregroundColor }\n      }\n    }\n  }) => {\n    return css`\n      border: none;\n      min-width: ${contentWidth.sm};\n      max-width: ${contentWidth.lg};\n      color: ${foregroundColor};\n    `;\n  }\n);\n\nStyledDialog.defaultProps = defaultThemeProp;\n\nexport const StyledDialogTitle = styled(Text)(\n  ({\n    theme: {\n      base: { shadow, 'border-radius': borderRadius }\n    }\n  }) => {\n    return css`\n      position: relative;\n      ::after {\n        content: '';\n        border-radius: ${borderRadius};\n        position: absolute;\n        inset: -0.25rem;\n      }\n      :focus-visible {\n        outline: none;\n        ::after {\n          box-shadow: ${shadow.focus}, inset ${shadow['focus-solid']};\n        }\n      }\n    `;\n  }\n);\n\nStyledDialogTitle.defaultProps = defaultThemeProp;\n\nexport const useDialog = () => {\n  const [target, setTarget] = useState<HTMLElement | null>(null);\n  const [loading, setLoading] = useState(false);\n\n  const setTargetWithEvent = (e: ReactMouseEvent | ReactKeyboardEvent) => {\n    if (e.target instanceof HTMLElement) {\n      setTarget(e.target);\n    }\n  };\n\n  return {\n    target,\n    loading,\n    setLoading,\n    events: {\n      onMouseDown: (e: ReactMouseEvent) => {\n        setTargetWithEvent(e);\n      },\n      onKeyDown: (e: ReactKeyboardEvent) => {\n        if (e.key === 'Enter') {\n          setTargetWithEvent(e);\n        }\n      }\n    },\n    setTargetWithEvent\n  };\n};\n\nconst Dialog: FunctionComponent<DialogProps & ForwardProps> = forwardRef(\n  (\n    {\n      target,\n      placement,\n      heading,\n      headingHidden = false,\n      onSubmit,\n      onClose,\n      onOpen,\n      loading,\n      children,\n      ...restProps\n    }: PropsWithoutRef<DialogProps>,\n    ref: DialogProps['ref']\n  ) => {\n    const t = useI18n();\n    const headingId = useUID();\n    const [popoverEl, setPopoverEl] = useElement<HTMLDivElement>();\n    const popoverRef = useConsolidatedRef(ref, setPopoverEl);\n    const headingRef = useRef<HTMLSpanElement>(null);\n    const [currentTarget, setCurrentTarget] = useState(() => target);\n    const [show, setShow] = useState(false);\n    const skipChangeShow = useRef(false);\n    const prevTarget = usePrevious(target);\n    useEscape(\n      () => {\n        if (show) {\n          setShow(false);\n        }\n      },\n      undefined,\n      [show, setShow]\n    );\n    useOuterEvent('mousedown', [target, popoverEl], () => {\n      if (target && popoverEl && show) {\n        setShow(false);\n        onClose?.();\n      }\n    });\n    useFocusTrap(popoverRef);\n\n    useEffect(() => {\n      if (!show) {\n        currentTarget?.focus();\n      }\n    }, [show]);\n\n    useEffect(() => {\n      if (show && popoverEl) {\n        if (headingRef.current) {\n          headingRef.current.focus();\n        } else {\n          const focusables = getFocusables(popoverRef);\n          focusables[0]?.focus();\n        }\n      }\n    }, [show, popoverEl]);\n\n    useLayoutEffect(() => {\n      const onTargetClick = (e: MouseEvent) => {\n        setCurrentTarget(prev => (e.target ? (e.target as HTMLElement) : prev));\n        if (!skipChangeShow.current) {\n          setShow(prev => !prev);\n        } else {\n          skipChangeShow.current = false;\n        }\n      };\n      if (target instanceof HTMLElement) {\n        target.addEventListener('click', onTargetClick);\n      }\n      return () => {\n        if (target instanceof HTMLElement) {\n          target.removeEventListener('click', onTargetClick);\n        }\n      };\n    }, [target]);\n\n    useEffect(() => {\n      if (show) {\n        onOpen?.();\n      } else {\n        onClose?.();\n      }\n    }, [show]);\n\n    useEffect(() => {\n      /* If our target is changing and the popover is already open we will want\n      to skip the next change. The next show change would come from a click on the new button,\n      the popover should stay open. */\n      if (target !== prevTarget && show) {\n        skipChangeShow.current = true;\n      }\n    }, [target, show]);\n\n    const onTitleKeyDown = (e: ReactKeyboardEvent) => {\n      const focusables = getFocusables(popoverRef);\n      if (e.shiftKey && e.key === 'Tab') {\n        e.preventDefault();\n        focusables[focusables.length - 1].focus();\n      }\n    };\n\n    const progress = loading ? <Progress placement='local' /> : null;\n\n    return (\n      <Popover\n        {...restProps}\n        as={StyledDialog}\n        ref={popoverRef}\n        target={currentTarget}\n        placement={placement}\n        show={show}\n        open={show}\n        aria-labelledby={headingId}\n      >\n        <CardHeader\n          actions={\n            !onSubmit ? (\n              <Button icon variant='simple' onClick={() => setShow(false)} aria-label={t('close')}>\n                <Icon name='times' />\n              </Button>\n            ) : undefined\n          }\n        >\n          {headingHidden ? (\n            <VisuallyHiddenText id={headingId}>{heading}</VisuallyHiddenText>\n          ) : (\n            <StyledDialogTitle\n              variant='h2'\n              tabIndex={-1}\n              ref={headingRef}\n              onKeyDown={onTitleKeyDown}\n              id={headingId}\n            >\n              {heading}\n            </StyledDialogTitle>\n          )}\n        </CardHeader>\n        <CardContent>\n          {children}\n          {progress}\n        </CardContent>\n        {onSubmit && (\n          <CardFooter justify='between'>\n            <Button variant='secondary' onClick={() => setShow(false)}>\n              {t('cancel')}\n            </Button>\n            <Button\n              variant='primary'\n              onClick={() => onSubmit({ close: () => setShow(false) })}\n              disabled={loading}\n            >\n              {t('submit')}\n            </Button>\n          </CardFooter>\n        )}\n      </Popover>\n    );\n  }\n);\n\nexport default Dialog;\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAuC,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C,MAAM,MAAM,GAAqD,UAAU,CACzE,CACE,EACE,KAAK,GAAG,IAAI,EACZ,MAAM,EACN,YAAY,EACZ,SAAS,EACT,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACiB,EAC/B,GAAuB,EACvB,EAAE;IACF,MAAM,SAAS,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE1C,OAAO,CACL,KAAC,YAAY,OACP,SAAS,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,gBACD,OAAO,qBACD,YAAY,gBACjB,SAAS,eACV,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EACtC,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,YAEnB,QAAQ,GACI,CAChB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { forwardRef, PropsWithoutRef, FC, HTMLAttributes } from 'react';\n\nimport { useConsolidatedRef } from '../../hooks';\n\nimport { StyledDialog } from './Dialog.styles';\nimport { DialogProps } from './Dialog.types';\n\nconst Dialog: FC<DialogProps & HTMLAttributes<HTMLDivElement>> = forwardRef(\n  (\n    {\n      arrow = true,\n      target,\n      labelledbyId,\n      ariaLabel,\n      portal,\n      strategy,\n      placement,\n      children,\n      progress,\n      ...restProps\n    }: PropsWithoutRef<DialogProps>,\n    ref: DialogProps['ref']\n  ) => {\n    const dialogRef = useConsolidatedRef(ref);\n\n    return (\n      <StyledDialog\n        {...restProps}\n        role='dialog'\n        arrow={arrow}\n        aria-modal='false'\n        aria-labelledby={labelledbyId}\n        aria-label={ariaLabel}\n        aria-busy={progress ? 'true' : 'false'}\n        ref={dialogRef}\n        target={target}\n        portal={portal}\n        strategy={strategy}\n        placement={placement}\n      >\n        {children}\n      </StyledDialog>\n    );\n  }\n);\n\nexport default Dialog;\n"]}

package/lib/components/Dialog/Dialog.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledChildrenWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDialogHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDialogContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDialogFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDialog: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("../Popover").PopoverProps<Modifiers> & import("../..").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Dialog.styles.d.ts.map