@intility/bifrost-react/dist/components/FormatDate/FormatDate.js

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import Tooltip from "../Tooltip/Tooltip.js";
import useDateTimeFormatter from "../../hooks/useDateTimeFormatter.js";
import { jsx as _jsx } from "react/jsx-runtime";
const tooltipTimeOptions = {
  hour: "2-digit",
  minute: "2-digit",
  timeZoneName: "short"
};
const tooltipDateOptions = {
  day: "2-digit",
  month: "long",
  year: "numeric"
};
const fullToolTipOptions = {
  ...tooltipDateOptions,
  ...tooltipTimeOptions
};

/**
 * Format date and/or time based on current Bifrost locale. Includes a
 * tooltip to avoid day vs month and timezone confusion.
 *
 * @see https://bifrost.intility.com/react/formatDate
 *
 * @example
 * <FormatDate date={new Date()} /> // 27/08/2025
 * <FormatDate show="time" date={new Date()} /> // 15:17
 * <FormatDate show="datetime" date={new Date()} /> // 27/08/2025 15:17
 */
const FormatDate = t0 => {
  const $ = _c(21);
  const {
    date,
    show: t1,
    options,
    locale,
    fullTooltip: t2,
    noTooltip: t3
  } = t0;
  const show = t1 === undefined ? "date" : t1;
  const fullTooltip = t2 === undefined ? false : t2;
  const noTooltip = t3 === undefined ? false : t3;
  const dateTimeFormatter = useDateTimeFormatter();
  let t4;
  if ($[0] !== date || $[1] !== dateTimeFormatter || $[2] !== locale || $[3] !== options || $[4] !== show) {
    t4 = dateTimeFormatter({
      date,
      show,
      locale,
      options
    });
    $[0] = date;
    $[1] = dateTimeFormatter;
    $[2] = locale;
    $[3] = options;
    $[4] = show;
    $[5] = t4;
  } else {
    t4 = $[5];
  }
  const displayString = t4;
  if (noTooltip) {
    let t5;
    if ($[6] !== displayString) {
      t5 = /*#__PURE__*/_jsx("span", {
        suppressHydrationWarning: true,
        children: displayString
      });
      $[6] = displayString;
      $[7] = t5;
    } else {
      t5 = $[7];
    }
    return t5;
  }
  let tooltipOptions;
  if (fullTooltip || show === "datetime") {
    tooltipOptions = fullToolTipOptions;
  } else {
    if (show === "time") {
      tooltipOptions = tooltipTimeOptions;
    } else {
      tooltipOptions = tooltipDateOptions;
    }
  }
  let t5;
  if ($[8] !== date || $[9] !== dateTimeFormatter || $[10] !== locale || $[11] !== show || $[12] !== tooltipOptions) {
    t5 = dateTimeFormatter({
      date,
      show,
      locale,
      options: tooltipOptions
    });
    $[8] = date;
    $[9] = dateTimeFormatter;
    $[10] = locale;
    $[11] = show;
    $[12] = tooltipOptions;
    $[13] = t5;
  } else {
    t5 = $[13];
  }
  const tooltipString = t5;
  let t6;
  if ($[14] !== tooltipString) {
    t6 = /*#__PURE__*/_jsx("span", {
      suppressHydrationWarning: true,
      children: tooltipString
    });
    $[14] = tooltipString;
    $[15] = t6;
  } else {
    t6 = $[15];
  }
  let t7;
  if ($[16] !== displayString) {
    t7 = /*#__PURE__*/_jsx("span", {
      suppressHydrationWarning: true,
      children: displayString
    });
    $[16] = displayString;
    $[17] = t7;
  } else {
    t7 = $[17];
  }
  let t8;
  if ($[18] !== t6 || $[19] !== t7) {
    t8 = /*#__PURE__*/_jsx(Tooltip, {
      content: t6,
      children: t7
    });
    $[18] = t6;
    $[19] = t7;
    $[20] = t8;
  } else {
    t8 = $[20];
  }
  return t8;
};
export default FormatDate;