@k2b/ui 0.22.0 → 0.24.0

package/dist/ssr/content/calendar-shared.js

@@ -0,0 +1,261 @@
+import { ssrElement as _$ssrElement } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+var _tmpl$ = ["<span class=\"k2b-calendar-event__time\">", "</span>"],
+  _tmpl$2 = "<span class=\"k2b-calendar-event__marker\" aria-hidden=\"true\"></span>",
+  _tmpl$3 = ["<span class=\"k2b-calendar-event__title\">", "", "</span>"],
+  _tmpl$4 = ["<span class=\"k2b-calendar-event__remaining\">", "</span>"],
+  _tmpl$5 = ["<span class=\"k2b-calendar-event__meta\">", "", "</span>"],
+  _tmpl$6 = ["<span class=\"k2b-calendar-event__meta\">", "</span>"],
+  _tmpl$7 = ["<span class=\"k2b-calendar-event__description\">", "</span>"],
+  _tmpl$8 = ["<span class=\"k2b-calendar-event__hint\" data-edge=\"start\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$9 = ["<span class=\"k2b-calendar-event__hint\" data-edge=\"end\" aria-hidden=\"true\">", "</span>"];
+import { dates as calendar } from "@k2b/stdlib";
+import { createMemo, Show } from "solid-js";
+import { useCalendarMessages } from "./calendar-messages";
+
+/** One piece of an event in one day, with the times of the whole event. */
+
+/** A keyboard stop of the week grid. */
+
+/** What the built-in views read from the props: they only ever link to built-in views. */
+
+export const ownerDateConfig = owner => ({
+  ...owner.dateConfig,
+  timeZone: owner.timeZone ?? owner.dateConfig?.timeZone,
+  firstDayOfWeek: owner.firstDayOfWeek ?? owner.dateConfig?.firstDayOfWeek ?? owner.dateConfig?.weekStartsOn ?? 1
+});
+const dateOnlyPattern = /^\d{4}-\d{2}-\d{2}$/;
+export const parseDate = (value, context) => {
+  if (value instanceof Date) return new Date(value);
+  if (dateOnlyPattern.test(value)) return calendar.parseCalendarDate(value, context);
+  const normalized = value.includes("T") ? value : value.replace(" ", "T");
+  const parsed = new Date(normalized);
+  if (!Number.isNaN(parsed.getTime())) return parsed;
+  const [year, month = "1", day = "1"] = value.split("-");
+  return new Date(Number(year), Number(month) - 1, Number(day), 12);
+};
+export const validDate = value => !Number.isNaN(value.getTime());
+export const formatTime = (date, context) => calendar.formatTime(date, context);
+export const eventHref = (props, event) => props.getEventHref?.(event) ?? event.href;
+
+/** Places a calendar popover below its anchor when there is room and above it otherwise, inside the viewport. */
+export const placeCalendarPopover = (anchor, popover) => {
+  const margin = 8;
+  const gap = 4;
+  const rect = anchor instanceof Element ? anchor.getBoundingClientRect() : anchor;
+  const width = Math.min(popover.offsetWidth || 288, window.innerWidth - margin * 2);
+  const height = popover.offsetHeight;
+  const left = Math.max(margin, Math.min(rect.left, window.innerWidth - width - margin));
+  const roomBelow = window.innerHeight - rect.bottom - gap - margin;
+  const above = height > roomBelow && rect.top - gap - margin > roomBelow;
+  const top = above ? Math.max(margin, rect.top - height - gap) : Math.min(rect.bottom + gap, window.innerHeight - height - margin);
+  popover.style.left = `${left}px`;
+  popover.style.top = `${Math.max(margin, top)}px`;
+};
+
+/** Follows a calendar link the way the calendar's own links do: through the host's navigation when it has one. */
+export const followCalendarHref = (owner, href) => {
+  if (owner.onNavigateHref) owner.onNavigateHref(href);else window.location.assign(href);
+};
+export const EventChip = props => {
+  const messages = useCalendarMessages();
+  const dateConfig = createMemo(() => ownerDateConfig(props.owner));
+  const color = () => props.event.color ?? "blue";
+  const selected = () => Boolean(props.owner.selectedEventId) && props.owner.selectedEventId === props.event.id;
+  const style = () => props.event.colorHex ? {
+    "--k2b-calendar-accent": props.event.colorHex
+  } : undefined;
+  const isInteractive = () => Boolean(props.owner.onEventActivate);
+  const durationHours = () => (props.event.endDate.getTime() - props.event.startDate.getTime()) / 3_600_000;
+  const short = () => Boolean(props.fill && !props.event.allDay && durationHours() < 0.75);
+  const showTime = () => props.timeLabel ? !props.event.allDay : !props.event.allDay && !props.compact && durationHours() >= 0.75;
+  const showLocation = () => Boolean(props.event.location && (props.showLocation ?? (!props.compact && !props.timeLabel && durationHours() >= 1.25)));
+  const showDescription = () => Boolean(props.event.description?.trim() && props.fill && !props.timeLabel && !props.event.allDay && !props.compact && durationHours() >= 1.5);
+  const timeLabel = () => props.timeLabel ?? `${formatTime(props.event.startDate, dateConfig())} - ${formatTime(props.event.endDate, dateConfig())}`;
+  const ariaLabel = () => {
+    const label = props.label ? props.label : props.event.allDay ? props.event.title : props.event.endDate.getTime() <= props.event.startDate.getTime() ?
+    // A deadline is a moment, not a span: it names one time.
+    `${props.event.title}, ${formatTime(props.event.startDate, dateConfig())}` : messages().calendarEventTime({
+      title: props.event.title,
+      start: formatTime(props.event.startDate, dateConfig()),
+      end: formatTime(props.event.endDate, dateConfig())
+    });
+    return [label, props.remaining, props.event.accessibleDetail].filter(Boolean).join(", ");
+  };
+  const renderedEvent = () => props.owner.renderEvent?.(props.event, {
+    compact: props.compact ?? false,
+    fill: props.fill ?? false,
+    start: props.event.startDate,
+    end: props.event.endDate,
+    allDay: props.event.allDay ?? false,
+    durationHours: durationHours(),
+    timeLabel: timeLabel(),
+    leadingTime: props.leadingTime,
+    remaining: props.remaining,
+    checkbox: props.checkbox ?? false,
+    timeline: props.timeline ?? false
+  });
+  const defaultContent = [_$createComponent(Show, {
+    get when() {
+      return props.leadingTime;
+    },
+    get children() {
+      return _$ssr(_tmpl$, _$escape(props.leadingTime));
+    }
+  }), _$ssr(_tmpl$3, _$escape(_$createComponent(Show, {
+    get when() {
+      return _$memo(() => props.event.display === "marker")() && !props.checkbox;
+    },
+    get children() {
+      return _$ssr(_tmpl$2);
+    }
+  })), _$escape(props.event.title)), _$createComponent(Show, {
+    get when() {
+      return showTime() || props.remaining;
+    },
+    get children() {
+      return _$ssr(_tmpl$5, _$escape(_$createComponent(Show, {
+        get when() {
+          return showTime();
+        },
+        get children() {
+          return timeLabel();
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return props.remaining;
+        },
+        get children() {
+          return _$ssr(_tmpl$4, showTime() ? ` · ${_$escape(props.remaining)}` : _$escape(props.remaining));
+        }
+      })));
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return showLocation();
+    },
+    get children() {
+      return _$ssr(_tmpl$6, _$escape(props.event.location));
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return showDescription();
+    },
+    get children() {
+      return _$ssr(_tmpl$7, _$escape(props.event.description));
+    }
+  })];
+  const content = () => [_$createComponent(Show, {
+    get when() {
+      return props.hintStart;
+    },
+    get children() {
+      return _$ssr(_tmpl$8, _$escape(props.hintStart));
+    }
+  }), renderedEvent() ?? defaultContent, _$createComponent(Show, {
+    get when() {
+      return props.hintEnd;
+    },
+    get children() {
+      return _$ssr(_tmpl$9, _$escape(props.hintEnd));
+    }
+  }), props.trailing];
+  const isActionable = () => isInteractive() || Boolean(props.onMovePointerDown);
+  let suppressClickUntil = 0;
+  const onClick = event => {
+    if (performance.now() < suppressClickUntil) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (!props.owner.onEventActivate || props.owner.eventActivation === "double") return;
+    event.preventDefault();
+    event.stopPropagation();
+    props.owner.onEventActivate(props.event);
+  };
+  const onDoubleClick = event => {
+    if (!props.owner.onEventActivate || props.owner.eventActivation !== "double") return;
+    event.preventDefault();
+    event.stopPropagation();
+    props.owner.onEventActivate(props.event);
+  };
+  /** Space on an entry with a box checks it; Enter still opens the entry. */
+  const onCheckKeyDown = event => {
+    if (event.key !== " " || !props.onCheck || event.altKey || event.ctrlKey || event.metaKey) return false;
+    event.preventDefault();
+    props.onCheck();
+    return true;
+  };
+  const onButtonKeyDown = event => {
+    if (onCheckKeyDown(event) || !isInteractive() || event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    props.owner.onEventActivate?.(props.event);
+  };
+  const onPointerDown = event => {
+    if (event.pointerType === "touch") return;
+    if (props.onMovePointerDown) event.stopPropagation();
+    props.onMovePointerDown?.(event, () => {
+      suppressClickUntil = performance.now() + 400;
+    });
+  };
+  const attributes = () => ({
+    class: "k2b-calendar-event",
+    "data-calendar-event": "",
+    "data-color": props.event.colorHex ? undefined : color(),
+    "data-selected": selected() ? "true" : undefined,
+    "data-compact": props.compact ? "true" : undefined,
+    "data-fill": props.fill ? "true" : undefined,
+    "data-short": short() ? "true" : undefined,
+    "data-moving": props.moving ? "true" : undefined,
+    "data-continues-before": props.continuesBefore ? "true" : undefined,
+    "data-continues-after": props.continuesAfter ? "true" : undefined,
+    "data-bar": props.bar ? "true" : undefined,
+    "data-display": props.event.display,
+    "data-stop": props.stop?.id,
+    "data-col": props.stop?.column,
+    "data-minute": props.stop?.minute,
+    style: style(),
+    "aria-label": ariaLabel()
+  });
+  return props.href ? _$ssrElement("a", _$mergeProps(attributes, {
+    get href() {
+      return props.href;
+    },
+    get ["data-interactive"]() {
+      return isInteractive() ? "true" : undefined;
+    },
+    get ["data-space-item-id"]() {
+      return props.event.dataSpaceItemId;
+    },
+    get tabIndex() {
+      return props.tabIndex;
+    },
+    get draggable() {
+      return props.onMovePointerDown ? false : undefined;
+    }
+  }), _$escape(content()), false) : isActionable() ? _$ssrElement("button", _$mergeProps(attributes, {
+    type: "button",
+    "data-interactive": "true",
+    get tabIndex() {
+      return props.tabIndex;
+    }
+  }), _$escape(content()), false) : _$ssrElement("div", _$mergeProps(attributes, {
+    role: "group",
+    get tabIndex() {
+      return props.tabIndex;
+    }
+  }), _$escape(content()), false);
+};
+let measureContext;
+/** The width of a text in a font, from a canvas, so a bar can tell whether its title leaves room for a date hint. */
+export const textWidth = (text, font) => {
+  measureContext ??= typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
+  if (!measureContext) return Number.POSITIVE_INFINITY;
+  measureContext.font = font;
+  return measureContext.measureText(text).width;
+};
+//# sourceMappingURL=calendar-shared.js.map

package/dist/ssr/content/calendar-shared.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["content/calendar-shared.tsx"],"sourcesContent":["import { dates as calendar, type DateContext } from \"@k2b/stdlib\";\nimport type { JSX } from \"solid-js\";\nimport { createMemo, Show } from \"solid-js\";\nimport type { CalendarEvent, CalendarProps } from \"./Calendar\";\nimport { useCalendarMessages } from \"./calendar-messages\";\n\n/** One piece of an event in one day, with the times of the whole event. */\nexport type NormalizedEvent = CalendarEvent & {\n  startDate: Date;\n  endDate: Date;\n  dayKey: string;\n  sourceStartDate: Date;\n  sourceEndDate: Date;\n};\n\n/** A keyboard stop of the week grid. */\nexport type CalendarStop = { id: string; column: number; minute: number };\n\n/** What the built-in views read from the props: they only ever link to built-in views. */\nexport type CalendarOwner = Omit<CalendarProps, \"view\" | \"customViews\" | \"children\">;\n\nexport const ownerDateConfig = (owner: CalendarOwner): DateContext => ({\n  ...owner.dateConfig,\n  timeZone: owner.timeZone ?? owner.dateConfig?.timeZone,\n  firstDayOfWeek: owner.firstDayOfWeek ?? owner.dateConfig?.firstDayOfWeek ?? owner.dateConfig?.weekStartsOn ?? 1,\n});\n\nconst dateOnlyPattern = /^\\d{4}-\\d{2}-\\d{2}$/;\n\nexport const parseDate = (value: Date | string, context?: DateContext): Date => {\n  if (value instanceof Date) return new Date(value);\n  if (dateOnlyPattern.test(value)) return calendar.parseCalendarDate(value, context);\n  const normalized = value.includes(\"T\") ? value : value.replace(\" \", \"T\");\n  const parsed = new Date(normalized);\n  if (!Number.isNaN(parsed.getTime())) return parsed;\n  const [year, month = \"1\", day = \"1\"] = value.split(\"-\");\n  return new Date(Number(year), Number(month) - 1, Number(day), 12);\n};\n\nexport const validDate = (value: Date): boolean => !Number.isNaN(value.getTime());\n\nexport const formatTime = (date: Date, context?: DateContext): string => calendar.formatTime(date, context);\n\nexport const eventHref = (props: CalendarOwner, event: CalendarEvent): string | undefined => props.getEventHref?.(event) ?? event.href;\n\n/** Places a calendar popover below its anchor when there is room and above it otherwise, inside the viewport. */\nexport const placeCalendarPopover = (anchor: Element | DOMRect, popover: HTMLElement): void => {\n  const margin = 8;\n  const gap = 4;\n  const rect = anchor instanceof Element ? anchor.getBoundingClientRect() : anchor;\n  const width = Math.min(popover.offsetWidth || 288, window.innerWidth - margin * 2);\n  const height = popover.offsetHeight;\n  const left = Math.max(margin, Math.min(rect.left, window.innerWidth - width - margin));\n  const roomBelow = window.innerHeight - rect.bottom - gap - margin;\n  const above = height > roomBelow && rect.top - gap - margin > roomBelow;\n  const top = above ? Math.max(margin, rect.top - height - gap) : Math.min(rect.bottom + gap, window.innerHeight - height - margin);\n  popover.style.left = `${left}px`;\n  popover.style.top = `${Math.max(margin, top)}px`;\n};\n\n/** Follows a calendar link the way the calendar's own links do: through the host's navigation when it has one. */\nexport const followCalendarHref = (owner: CalendarOwner, href: string): void => {\n  if (owner.onNavigateHref) owner.onNavigateHref(href);\n  else window.location.assign(href);\n};\n\nexport const EventChip = (props: {\n  event: NormalizedEvent;\n  owner: CalendarOwner;\n  href?: string;\n  compact?: boolean;\n  fill?: boolean;\n  moving?: boolean;\n  /** Replaces the title and time at the start of the accessible name, for example with the dates a long event spans. */\n  label?: string;\n  /** A bar of a long event that goes on before or after the week row it sits in. */\n  continuesBefore?: boolean;\n  continuesAfter?: boolean;\n  /** Month view: an all-day or multi-day entry drawn as a bar. */\n  bar?: boolean;\n  /** Short dates at the torn ends of a bar, where it continues in another week row. */\n  hintStart?: string;\n  hintEnd?: string;\n  /** Month view: the start time before the title. */\n  leadingTime?: string;\n  /** Day and week views: what is left of a running event, such as \"27 min left\". */\n  remaining?: string;\n  /** Day and week views: the calendar draws the event's checkbox beside the chip. */\n  checkbox?: boolean;\n  /** Day and week views with `dayHours`: the chip is a band, a deadline, or an all-day entry of a timeline. */\n  timeline?: boolean;\n  /** Text after the content, such as the time of a deadline. */\n  trailing?: JSX.Element;\n  /** Day and week views: the time as they write it, such as \"10:30–11:15\", shown whatever the length. */\n  timeLabel?: string;\n  /** Day view: a band tall enough shows its place below the time. */\n  showLocation?: boolean;\n  /** Week view: the grid's one tab stop decides which chip takes Tab. */\n  tabIndex?: number;\n  /** A keyboard stop of the week grid: its id, its day column, and its minute for moving between columns. */\n  stop?: CalendarStop;\n  /** Day and week views: Space on the chip checks the box the calendar draws beside it, as on the box itself. */\n  onCheck?: () => void;\n  onMovePointerDown?: (event: PointerEvent, onActivate: () => void) => void;\n}): JSX.Element => {\n  const messages = useCalendarMessages();\n  const dateConfig = createMemo(() => ownerDateConfig(props.owner));\n  const color = () => props.event.color ?? \"blue\";\n  const selected = () => Boolean(props.owner.selectedEventId) && props.owner.selectedEventId === props.event.id;\n  const style = () => (props.event.colorHex ? { \"--k2b-calendar-accent\": props.event.colorHex } : undefined);\n  const isInteractive = () => Boolean(props.owner.onEventActivate);\n  const durationHours = () => (props.event.endDate.getTime() - props.event.startDate.getTime()) / 3_600_000;\n  const short = () => Boolean(props.fill && !props.event.allDay && durationHours() < 0.75);\n  const showTime = () => (props.timeLabel ? !props.event.allDay : !props.event.allDay && !props.compact && durationHours() >= 0.75);\n  const showLocation = () =>\n    Boolean(props.event.location && (props.showLocation ?? (!props.compact && !props.timeLabel && durationHours() >= 1.25)));\n  const showDescription = () =>\n    Boolean(\n      props.event.description?.trim() && props.fill && !props.timeLabel && !props.event.allDay && !props.compact && durationHours() >= 1.5,\n    );\n  const timeLabel = () =>\n    props.timeLabel ?? `${formatTime(props.event.startDate, dateConfig())} - ${formatTime(props.event.endDate, dateConfig())}`;\n  const ariaLabel = () => {\n    const label = props.label\n      ? props.label\n      : props.event.allDay\n        ? props.event.title\n        : props.event.endDate.getTime() <= props.event.startDate.getTime()\n          ? // A deadline is a moment, not a span: it names one time.\n            `${props.event.title}, ${formatTime(props.event.startDate, dateConfig())}`\n          : messages().calendarEventTime({\n              title: props.event.title,\n              start: formatTime(props.event.startDate, dateConfig()),\n              end: formatTime(props.event.endDate, dateConfig()),\n            });\n    return [label, props.remaining, props.event.accessibleDetail].filter(Boolean).join(\", \");\n  };\n  const renderedEvent = () =>\n    props.owner.renderEvent?.(props.event, {\n      compact: props.compact ?? false,\n      fill: props.fill ?? false,\n      start: props.event.startDate,\n      end: props.event.endDate,\n      allDay: props.event.allDay ?? false,\n      durationHours: durationHours(),\n      timeLabel: timeLabel(),\n      leadingTime: props.leadingTime,\n      remaining: props.remaining,\n      checkbox: props.checkbox ?? false,\n      timeline: props.timeline ?? false,\n    });\n  const defaultContent = (\n    <>\n      <Show when={props.leadingTime}>\n        <span class=\"k2b-calendar-event__time\">{props.leadingTime}</span>\n      </Show>\n      <span class=\"k2b-calendar-event__title\">\n        <Show when={props.event.display === \"marker\" && !props.checkbox}>\n          <span class=\"k2b-calendar-event__marker\" aria-hidden=\"true\" />\n        </Show>\n        {props.event.title}\n      </span>\n      <Show when={showTime() || props.remaining}>\n        <span class=\"k2b-calendar-event__meta\">\n          <Show when={showTime()}>{timeLabel()}</Show>\n          <Show when={props.remaining}>\n            <span class=\"k2b-calendar-event__remaining\">{showTime() ? ` · ${props.remaining}` : props.remaining}</span>\n          </Show>\n        </span>\n      </Show>\n      <Show when={showLocation()}>\n        <span class=\"k2b-calendar-event__meta\">{props.event.location}</span>\n      </Show>\n      <Show when={showDescription()}>\n        <span class=\"k2b-calendar-event__description\">{props.event.description}</span>\n      </Show>\n    </>\n  );\n  const content = () => (\n    <>\n      <Show when={props.hintStart}>\n        <span class=\"k2b-calendar-event__hint\" data-edge=\"start\" aria-hidden=\"true\">\n          {props.hintStart}\n        </span>\n      </Show>\n      {renderedEvent() ?? defaultContent}\n      <Show when={props.hintEnd}>\n        <span class=\"k2b-calendar-event__hint\" data-edge=\"end\" aria-hidden=\"true\">\n          {props.hintEnd}\n        </span>\n      </Show>\n      {props.trailing}\n    </>\n  );\n  const isActionable = () => isInteractive() || Boolean(props.onMovePointerDown);\n  let suppressClickUntil = 0;\n  const onClick = (event: MouseEvent) => {\n    if (performance.now() < suppressClickUntil) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    if (!props.owner.onEventActivate || props.owner.eventActivation === \"double\") return;\n    event.preventDefault();\n    event.stopPropagation();\n    props.owner.onEventActivate(props.event);\n  };\n  const onDoubleClick = (event: MouseEvent) => {\n    if (!props.owner.onEventActivate || props.owner.eventActivation !== \"double\") return;\n    event.preventDefault();\n    event.stopPropagation();\n    props.owner.onEventActivate(props.event);\n  };\n  /** Space on an entry with a box checks it; Enter still opens the entry. */\n  const onCheckKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== \" \" || !props.onCheck || event.altKey || event.ctrlKey || event.metaKey) return false;\n    event.preventDefault();\n    props.onCheck();\n    return true;\n  };\n  const onButtonKeyDown = (event: KeyboardEvent) => {\n    if (onCheckKeyDown(event) || !isInteractive() || (event.key !== \"Enter\" && event.key !== \" \")) return;\n    event.preventDefault();\n    props.owner.onEventActivate?.(props.event);\n  };\n  const onPointerDown = (event: PointerEvent) => {\n    if (event.pointerType === \"touch\") return;\n    if (props.onMovePointerDown) event.stopPropagation();\n    props.onMovePointerDown?.(event, () => {\n      suppressClickUntil = performance.now() + 400;\n    });\n  };\n  const attributes = () => ({\n    class: \"k2b-calendar-event\",\n    \"data-calendar-event\": \"\",\n    \"data-color\": props.event.colorHex ? undefined : color(),\n    \"data-selected\": selected() ? \"true\" : undefined,\n    \"data-compact\": props.compact ? \"true\" : undefined,\n    \"data-fill\": props.fill ? \"true\" : undefined,\n    \"data-short\": short() ? \"true\" : undefined,\n    \"data-moving\": props.moving ? \"true\" : undefined,\n    \"data-continues-before\": props.continuesBefore ? \"true\" : undefined,\n    \"data-continues-after\": props.continuesAfter ? \"true\" : undefined,\n    \"data-bar\": props.bar ? \"true\" : undefined,\n    \"data-display\": props.event.display,\n    \"data-stop\": props.stop?.id,\n    \"data-col\": props.stop?.column,\n    \"data-minute\": props.stop?.minute,\n    style: style(),\n    \"aria-label\": ariaLabel(),\n  });\n\n  return props.href ? (\n    <a\n      {...attributes()}\n      href={props.href}\n      data-interactive={isInteractive() ? \"true\" : undefined}\n      data-space-item-id={props.event.dataSpaceItemId}\n      tabIndex={props.tabIndex}\n      draggable={props.onMovePointerDown ? false : undefined}\n      onClick={onClick}\n      onDblClick={onDoubleClick}\n      onDragStart={props.onMovePointerDown ? (event) => event.preventDefault() : undefined}\n      onPointerDown={onPointerDown}\n      onKeyDown={onCheckKeyDown}\n    >\n      {content()}\n    </a>\n  ) : isActionable() ? (\n    <button\n      {...attributes()}\n      type=\"button\"\n      data-interactive=\"true\"\n      tabIndex={props.tabIndex}\n      onClick={onClick}\n      onDblClick={onDoubleClick}\n      onPointerDown={onPointerDown}\n      onKeyDown={onButtonKeyDown}\n    >\n      {content()}\n    </button>\n  ) : (\n    <div {...attributes()} role=\"group\" tabIndex={props.tabIndex} onKeyDown={onCheckKeyDown}>\n      {content()}\n    </div>\n  );\n};\n\nlet measureContext: CanvasRenderingContext2D | null | undefined;\n/** The width of a text in a font, from a canvas, so a bar can tell whether its title leaves room for a date hint. */\nexport const textWidth = (text: string, font: string): number => {\n  measureContext ??= typeof document === \"undefined\" ? null : document.createElement(\"canvas\").getContext(\"2d\");\n  if (!measureContext) return Number.POSITIVE_INFINITY;\n  measureContext.font = font;\n  return measureContext.measureText(text).width;\n};\n"],"mappings":"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","ignoreList":[]}