@eifi1/ui-kit 0.34.0 → 0.36.0

package/src/notifications/push-devices-setting.tsx

@@ -0,0 +1,306 @@
+import { useEffect, useRef, useState } from "react";
+import type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from "react";
+import { MonitorSmartphone } from "lucide-react";
+
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
+import { DEFAULT_COMMON_LABELS } from "../i18n/shared-labels";
+import { cn } from "../lib/cn";
+import { formatDate } from "../lib/format";
+import { Button } from "../components/button";
+import { Card } from "../components/card";
+import { Chip } from "../components/chip";
+import { Skeleton } from "../components/skeleton";
+import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
+import { CARD_DESCRIPTION_CLASS } from "../settings/settings-card-classes";
+import { SettingsCardTitle } from "../settings/settings-heading";
+import { settle, useMounted } from "../account/account-parts";
+import { describeFailure, FailureLine, useNotificationsLabels } from "./notification-parts";
+import type { NotificationsLabels } from "./notifications-labels";
+import type { PushDeviceItem } from "./notification-types";
+import { notifyPushSubscriptionChanged } from "./use-push-device";
+
+/**
+ * A name for a stored user agent: "Chrome · Android", "Firefox · Windows" (keksdose
+ * `push-devices-card.tsx:19-45`). Best effort: an agent it does not recognise comes back
+ * as it is, cut at 60 characters so a token soup cannot blow up the row; `null` for none.
+ * The order matters — Edge and Opera say "Chrome" too, and Chrome says "Safari".
+ */
+export function describeUserAgent(ua: string | null): string | null {
+  if (!ua) return null;
+  const browser = /edg(?:e|a|ios)?\//i.test(ua)
+    ? "Edge"
+    : /opr\/|opera/i.test(ua)
+      ? "Opera"
+      : /firefox|fxios/i.test(ua)
+        ? "Firefox"
+        : /chrome|crios/i.test(ua)
+          ? "Chrome"
+          : /safari/i.test(ua)
+            ? "Safari"
+            : null;
+  const os = /windows/i.test(ua)
+    ? "Windows"
+    : /android/i.test(ua)
+      ? "Android"
+      : /iphone|ipad|ipod/i.test(ua)
+        ? "iOS"
+        : /mac os x|macintosh/i.test(ua)
+          ? "macOS"
+          : /linux/i.test(ua)
+            ? "Linux"
+            : null;
+  if (!browser && !os) return ua.length > 60 ? `${ua.slice(0, 60)}…` : ua;
+  return [browser, os].filter(Boolean).join(" · ");
+}
+
+export interface PushDevicesSettingProps<Id extends string | number = string>
+  extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** `GET /notifications/devices`, oldest first; `undefined` while the first load runs. */
+  devices: readonly PushDeviceItem<Id>[] | undefined;
+  loading?: boolean;
+  /** This browser's endpoint (`usePushDevice().currentEndpoint`): its row says "This
+   *  device", and removing it also unsubscribes the browser. */
+  currentEndpoint?: string | null;
+  /** `DELETE /notifications/devices/{id}`. Asked first; refresh `devices` once it
+   *  resolves. */
+  onRemove: (id: Id) => Promise<unknown> | void;
+  /** The dates' text. Default: the provider's locale, medium date. */
+  formatDate?: (date: Date) => string;
+  /** Overrides the provider's locale for the default format. */
+  locale?: string;
+  /** The app's own words for a failed removal, or `undefined` for the kit's `failed`. */
+  describeError?: (error: unknown) => ReactNode | undefined;
+  labels?: LabelOverride<NotificationsLabels>;
+}
+
+/** Tear down this browser's subscription after its server row went: otherwise the
+ *  browser still holds one, and the push card would say "on" for a device nothing can
+ *  reach. Best effort — the row is already gone. */
+async function unsubscribeThisBrowser(): Promise<void> {
+  try {
+    const registration = await navigator.serviceWorker?.getRegistration();
+    const subscription = await registration?.pushManager.getSubscription();
+    await subscription?.unsubscribe();
+  } catch {
+    /* the server row is gone either way */
+  }
+  notifyPushSubscriptionChanged();
+}
+
+/**
+ * Every device that gets push for the account (docs/notifications-harmonization.md §3.5,
+ * §4.2) — keksdose's devices card: the browser and system read from the stored user
+ * agent, "This device" on this browser's row, when it was added and last delivered to,
+ * the failures in a row in the warning tone, and "Remove".
+ *
+ * **Remove asks first, in the row**, as `PasskeysSetting` does: the card must work in an
+ * app without a `ConfirmProvider`, and the question belongs beside the device it names.
+ * Focus moves to Cancel. **Removing this device** also unsubscribes the browser and fires
+ * `PUSH_SUBSCRIPTION_CHANGED` (keksdose `push-devices-card.tsx:83-97`), so the push card
+ * stops saying "on".
+ *
+ * Under a write lock Remove is a `commit` control exempt from billing.
+ */
+export function PushDevicesSetting<Id extends string | number = string>({
+  devices,
+  loading,
+  currentEndpoint,
+  onRemove,
+  formatDate: formatDateProp,
+  locale: localeProp,
+  describeError,
+  labels: labelsProp,
+  className,
+  ...rest
+}: PushDevicesSettingProps<Id>) {
+  const labels = useNotificationsLabels(labelsProp);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const locale = useKitLocale(localeProp);
+  const [asking, setAsking] = useState<Id | null>(null);
+  const [busyId, setBusyId] = useState<Id | null>(null);
+  const [failure, setFailure] = useState<ReactNode>(null);
+  const mounted = useMounted();
+
+  const dateText = (iso: string): string => {
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime())) return iso;
+    return formatDateProp ? formatDateProp(date) : formatDate(date, "medium", { locale });
+  };
+
+  const remove = (device: PushDeviceItem<Id>) => {
+    if (busyId !== null) return;
+    setBusyId(device.id);
+    setFailure(null);
+    const isThis = Boolean(currentEndpoint) && device.endpoint === currentEndpoint;
+    settle(() => onRemove(device.id))
+      .then(async () => {
+        if (isThis) await unsubscribeThisBrowser();
+        if (!mounted.current) return;
+        setBusyId(null);
+        setAsking(null);
+      })
+      .catch((error: unknown) => {
+        if (!mounted.current) return;
+        setBusyId(null);
+        setFailure(describeFailure(describeError?.(error), labels.failed));
+      });
+  };
+
+  let body: ReactNode;
+  if (loading || devices === undefined) {
+    body = <Skeleton lines={2} label={labels.devicesLoading} />;
+  } else if (devices.length === 0) {
+    body = <p className={CARD_DESCRIPTION_CLASS}>{labels.devicesEmpty}</p>;
+  } else {
+    body = (
+      <ul aria-label={labels.devicesTitle} className="divide-y divide-subtle">
+        {devices.map((device) => (
+          <DeviceRow
+            key={device.id}
+            device={device}
+            name={describeUserAgent(device.user_agent) ?? labels.unknownDevice}
+            current={Boolean(currentEndpoint) && device.endpoint === currentEndpoint}
+            added={dateText(device.created_at)}
+            lastDelivery={device.last_success_at ? dateText(device.last_success_at) : null}
+            asking={asking === device.id}
+            busy={busyId === device.id}
+            blocked={busyId !== null && busyId !== device.id}
+            onAsk={() => setAsking(device.id)}
+            onCancel={() => setAsking(null)}
+            onConfirm={() => remove(device)}
+            labels={labels}
+            cancelLabel={common.cancel}
+          />
+        ))}
+      </ul>
+    );
+  }
+
+  return (
+    <Card {...rest} className={cn("p-4 space-y-3", className)}>
+      <div>
+        <SettingsCardTitle>{labels.devicesTitle}</SettingsCardTitle>
+        <div className={CARD_DESCRIPTION_CLASS}>{labels.devicesDescription}</div>
+      </div>
+      {body}
+      <FailureLine>{failure}</FailureLine>
+    </Card>
+  );
+}
+
+function DeviceRow<Id extends string | number>({
+  device,
+  name,
+  current,
+  added,
+  lastDelivery,
+  asking,
+  busy,
+  blocked,
+  onAsk,
+  onCancel,
+  onConfirm,
+  labels,
+  cancelLabel,
+}: {
+  device: PushDeviceItem<Id>;
+  name: string;
+  current: boolean;
+  added: string;
+  lastDelivery: string | null;
+  asking: boolean;
+  busy: boolean;
+  blocked: boolean;
+  onAsk: () => void;
+  onCancel: () => void;
+  onConfirm: () => void;
+  labels: NotificationsLabels;
+  cancelLabel: string;
+}) {
+  const cancelRef = useRef<HTMLButtonElement>(null);
+  const removeRef = useRef<HTMLButtonElement>(null);
+  // Which way the confirm closed: back to Remove, so focus does not fall to <body>.
+  const [returning, setReturning] = useState(false);
+  useEffect(() => {
+    if (asking) cancelRef.current?.focus();
+    else if (returning) removeRef.current?.focus();
+  }, [asking, returning]);
+
+  const leave = () => {
+    setReturning(true);
+    onCancel();
+  };
+  const escapeLeaves = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      leave();
+    }
+  };
+
+  const row = { "data-push-device-id": String(device.id), "data-current": current || undefined };
+
+  if (asking) {
+    return (
+      <li {...row} className="space-y-2 py-2">
+        <p role="alert" className="text-sm">
+          {labels.removePrompt}
+        </p>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            type="button"
+            size="sm"
+            variant="danger"
+            commit={COMMIT_EXCEPT_BILLING}
+            pending={busy}
+            aria-label={labels.removeItem(name)}
+            onClick={onConfirm}
+            onKeyDown={escapeLeaves}
+          >
+            {labels.remove}
+          </Button>
+          <Button ref={cancelRef} type="button" size="sm" variant="ghost" onClick={leave} onKeyDown={escapeLeaves}>
+            {cancelLabel}
+          </Button>
+        </div>
+      </li>
+    );
+  }
+
+  return (
+    <li {...row} className="flex items-center gap-3 py-2">
+      <MonitorSmartphone aria-hidden className="size-4 shrink-0 text-muted" />
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+          <span className="min-w-0 break-words text-sm font-medium">{name}</span>
+          {current && (
+            <Chip size="sm" tone="brand">
+              {labels.thisDevice}
+            </Chip>
+          )}
+        </div>
+        <div className={CARD_DESCRIPTION_CLASS}>
+          {labels.added(added)}
+          {" · "}
+          {lastDelivery ? labels.lastDelivery(lastDelivery) : labels.noDelivery}
+        </div>
+        {device.failure_count > 0 && <div className="text-xs text-warning">{labels.failures(device.failure_count)}</div>}
+      </div>
+      <Button
+        ref={removeRef}
+        type="button"
+        size="sm"
+        variant="ghost"
+        commit={COMMIT_EXCEPT_BILLING}
+        disabled={blocked}
+        aria-label={labels.removeItem(name)}
+        onClick={() => {
+          setReturning(false);
+          onAsk();
+        }}
+      >
+        {labels.remove}
+      </Button>
+    </li>
+  );
+}

package/src/notifications/quiet-hours-setting.tsx

@@ -0,0 +1,185 @@
+import { useId, useState } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type { LabelOverride } from "../i18n/kit-labels";
+import { cn } from "../lib/cn";
+import { Button } from "../components/button";
+import { Card } from "../components/card";
+import { TimeInput } from "../components/time-input";
+import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
+import { CARD_DESCRIPTION_CLASS } from "../settings/settings-card-classes";
+import { SettingsCardTitle } from "../settings/settings-heading";
+import { settle, useMounted } from "../account/account-parts";
+import { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from "./notification-parts";
+import type { NotificationsLabels } from "./notifications-labels";
+import type { NotificationSettingsPatch } from "./notification-types";
+import { deviceTimeZone, TimeZoneSelect, zoneName } from "./time-zone-select";
+
+/** The zone the server applies while the account has none (§2.6): every app's. */
+const DEFAULT_FALLBACK_ZONE = "Europe/Zurich";
+
+export interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
+  /** The `GET`'s `quiet_hours_start`, `"HH:MM"`, or `null`. */
+  start: string | null;
+  /** The `GET`'s `quiet_hours_end`. */
+  end: string | null;
+  /** The `GET`'s `timezone`, an IANA name, or `null` (the app's zone applies). */
+  timezone: string | null;
+  /**
+   * Save one change — `PATCH /notifications/settings`: a time (`null` when cleared), with
+   * the device's zone the first time one is entered while `timezone` is `null`; or
+   * `{timezone}`. The field shows the new value while the call runs and goes back if it
+   * rejects.
+   */
+  onChange: (patch: NotificationSettingsPatch) => Promise<unknown> | void;
+  /** The zone shown, and the one the server applies, while `timezone` is `null`.
+   *  Default `"Europe/Zurich"`, every app's (decision 6). */
+  fallbackZone?: string;
+  /** The app keeps an inbox, and the description says a held push still reaches it. */
+  inbox?: boolean;
+  disabled?: boolean;
+  /** The app's own words for a failed save, or `undefined` for the kit's `failed`. */
+  describeError?: (error: unknown) => ReactNode | undefined;
+  labels?: LabelOverride<NotificationsLabels>;
+}
+
+type QuietField = "quiet_hours_start" | "quiet_hours_end" | "timezone";
+
+/**
+ * Quiet hours (docs/notifications-harmonization.md §2.4, §2.6, §4.2): a window of local
+ * times in the account's zone, which may cross midnight, when no push of a machine-sent
+ * type is sent. A held push is dropped, not delayed; the inbox row and the mail go as
+ * usual. keksdose's block, as a card of its own.
+ *
+ * - **Two times**, each saved as it is entered; a cleared time sends `null`. While only
+ *   one is set the card says so: the window fails open until both are.
+ * - **The zone** shows while a time is set. The first time entered while the account has
+ *   none sends this device's zone with it, so "22:00" means the person's 22:00
+ *   (keksdose `notifications-card.tsx:288-292`). With none stored, the card shows
+ *   `fallbackZone` — the zone the server then applies — never the device's (keksdose's
+ *   card showed the device's zone while its server applied UTC).
+ * - **"This device is in …"** with "Use it" when the device's zone is not the one in
+ *   effect. Never written on its own: a zone is written by a person's pick (§2.6).
+ *
+ * Under a write lock the fields are `commit` controls exempt from billing.
+ */
+export function QuietHoursSetting({
+  start,
+  end,
+  timezone,
+  onChange,
+  fallbackZone = DEFAULT_FALLBACK_ZONE,
+  inbox = false,
+  disabled = false,
+  describeError,
+  labels: labelsProp,
+  className,
+  ...rest
+}: QuietHoursSettingProps) {
+  const labels = useNotificationsLabels(labelsProp);
+  const overlay = useWriteOverlay<string | null>(`${start}|${end}|${timezone}`);
+  const [failure, setFailure] = useState<ReactNode>(null);
+  const mounted = useMounted();
+  const id = useId();
+
+  const shown = (field: QuietField, server: string | null) =>
+    overlay.has(field) ? (overlay.get(field) ?? null) : server;
+  const startShown = shown("quiet_hours_start", start);
+  const endShown = shown("quiet_hours_end", end);
+  const zoneShown = shown("timezone", timezone);
+  const effectiveZone = zoneShown ?? fallbackZone;
+  const device = deviceTimeZone();
+
+  const save = (patch: NotificationSettingsPatch) => {
+    const fields = Object.keys(patch) as QuietField[];
+    setFailure(null);
+    for (const field of fields) overlay.set(field, patch[field] ?? null);
+    settle(() => onChange(patch)).then(
+      () => {
+        if (mounted.current) for (const field of fields) overlay.settle(field, true);
+      },
+      (error: unknown) => {
+        if (!mounted.current) return;
+        for (const field of fields) overlay.settle(field, false);
+        setFailure(describeFailure(describeError?.(error), labels.failed));
+      },
+    );
+  };
+
+  const saveTime = (field: "quiet_hours_start" | "quiet_hours_end", value: string) => {
+    const next = value || null;
+    if (next === shown(field, field === "quiet_hours_start" ? start : end)) return;
+    const patch: NotificationSettingsPatch = { [field]: next };
+    if (next && zoneShown === null) patch.timezone = device;
+    save(patch);
+  };
+
+  const anySet = Boolean(startShown || endShown);
+  const halfSet = Boolean(startShown) !== Boolean(endShown);
+
+  return (
+    <Card {...rest} className={cn("p-4 space-y-3", className)}>
+      <div>
+        <SettingsCardTitle>{labels.quietTitle}</SettingsCardTitle>
+        <div className={CARD_DESCRIPTION_CLASS}>{labels.quietDescription(inbox)}</div>
+      </div>
+      <div className="flex flex-wrap items-end gap-3">
+        <TimeInput
+          id={`${id}-start`}
+          label={labels.quietFrom}
+          value={startShown ?? ""}
+          disabled={disabled}
+          commit={COMMIT_EXCEPT_BILLING}
+          onValueChange={(value) => saveTime("quiet_hours_start", value)}
+          className="w-36"
+        />
+        <TimeInput
+          id={`${id}-end`}
+          label={labels.quietUntil}
+          value={endShown ?? ""}
+          disabled={disabled}
+          commit={COMMIT_EXCEPT_BILLING}
+          onValueChange={(value) => saveTime("quiet_hours_end", value)}
+          className="w-36"
+        />
+      </div>
+      {halfSet && (
+        <p className="text-xs text-warning" data-quiet-incomplete="">
+          {labels.quietIncomplete}
+        </p>
+      )}
+      {anySet && (
+        <div className="space-y-2">
+          <TimeZoneSelect
+            id={`${id}-zone`}
+            value={effectiveZone}
+            disabled={disabled}
+            commit={COMMIT_EXCEPT_BILLING}
+            onChange={(zone) => save({ timezone: zone })}
+            className="max-w-72"
+            labels={labelsProp}
+          />
+          {device !== effectiveZone && (
+            <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+              <span id={`${id}-device`} className={CARD_DESCRIPTION_CLASS}>
+                {labels.deviceZone(zoneName(device, labels.regions))}
+              </span>
+              <Button
+                type="button"
+                size="sm"
+                variant="link"
+                disabled={disabled}
+                commit={COMMIT_EXCEPT_BILLING}
+                aria-describedby={`${id}-device`}
+                onClick={() => save({ timezone: device })}
+              >
+                {labels.useDeviceZone}
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+      <FailureLine>{failure}</FailureLine>
+    </Card>
+  );
+}

package/src/notifications/time-zone-select.tsx

@@ -0,0 +1,126 @@
+import { useMemo } from "react";
+import type { ReactNode } from "react";
+
+import type { LabelOverride } from "../i18n/kit-labels";
+import type { ComboOption } from "../components/combobox-core";
+import { InlineEntityCombobox } from "../components/inline-entity-combobox";
+import type { CommitScope } from "../components/write-lock";
+import { useNotificationsLabels } from "./notification-parts";
+import type { NotificationRegionLabels, NotificationsLabels } from "./notifications-labels";
+
+/**
+ * This device's IANA zone ("Europe/Zurich"), or `"UTC"` where the runtime names none —
+ * the zone quiet hours are entered in the first time (§2.6), and the one the card offers
+ * when it differs from the account's.
+ */
+export function deviceTimeZone(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch {
+    return "UTC";
+  }
+}
+
+/** Every zone the runtime lists; `[]` where `Intl.supportedValuesOf` is missing. */
+function runtimeZones(): string[] {
+  const intl = Intl as typeof Intl & { supportedValuesOf?: (key: "timeZone") => string[] };
+  return typeof intl.supportedValuesOf === "function" ? intl.supportedValuesOf("timeZone") : [];
+}
+
+/** "Argentina/Buenos_Aires" → "Argentina / Buenos Aires": the zone's city, as a row. */
+function cityOf(rest: string): string {
+  return rest.replace(/_/g, " ").replace(/\//g, " / ");
+}
+
+/**
+ * The zone picker's rows (keksdose `notifications-card.tsx:131-146`): every zone `Intl`
+ * lists, as its city ("Argentina / Buenos Aires") under its region, the region named by
+ * `regionLabel` — which answers `undefined` for a region it does not know, and the region
+ * keeps its IANA name. A zone with no region ("UTC") comes first, ahead of every heading,
+ * rather than trailing the last group as if it were Pacific. `current` is kept even when
+ * the runtime does not list it (an old alias such as "Europe/Kiev"): a picker without its
+ * own value would show an empty field.
+ */
+export function timeZoneOptions(
+  current: string,
+  regionLabel: (region: string) => string | undefined,
+): ComboOption<string>[] {
+  const zones = runtimeZones();
+  const all = !current || zones.includes(current) ? zones : [...zones, current].sort();
+  const rows = all.map((zone): ComboOption<string> => {
+    const slash = zone.indexOf("/");
+    if (slash < 0) return { value: zone, label: zone };
+    const region = zone.slice(0, slash);
+    return { value: zone, label: cityOf(zone.slice(slash + 1)), group: regionLabel(region) ?? region };
+  });
+  return [...rows.filter((row) => !row.group), ...rows.filter((row) => row.group)];
+}
+
+/** The region's name in `regions`, or `undefined` for one the labels do not know.
+ *  @internal Not part of the barrel. */
+export function regionName(regions: NotificationRegionLabels, region: string): string | undefined {
+  return Object.prototype.hasOwnProperty.call(regions, region)
+    ? regions[region as keyof NotificationRegionLabels]
+    : undefined;
+}
+
+/** A zone as the picker shows it, for a sentence: "Europe / Zurich", the region in the
+ *  kit's words. @internal Not part of the barrel. */
+export function zoneName(zone: string, regions: NotificationRegionLabels): string {
+  const slash = zone.indexOf("/");
+  if (slash < 0) return zone;
+  const region = zone.slice(0, slash);
+  return `${regionName(regions, region) ?? region} / ${cityOf(zone.slice(slash + 1))}`;
+}
+
+export interface TimeZoneSelectProps {
+  /** The IANA zone. Not clearable: a zone can be changed, never emptied. */
+  value: string;
+  /** The zone picked. Never called for the value it already has. */
+  onChange: (zone: string) => void;
+  /** Default `labels.timeZone`. */
+  label?: ReactNode;
+  disabled?: boolean;
+  /** The input's id. */
+  id?: string;
+  className?: string;
+  /** The picker SAVES on change (quiet hours do): locked under a write lock in scope. */
+  commit?: CommitScope;
+  labels?: LabelOverride<NotificationsLabels>;
+}
+
+/**
+ * An IANA time zone, searchable (docs/notifications-harmonization.md §4.2, keksdose's
+ * quiet-hours picker): type "Zur" for Europe/Zurich, and on a phone the kit's sheet with
+ * a search box instead of a 400-row wheel. Rows are the city under its region, the region
+ * in the kit's words (`labels.regions`); a zone with no region first; a stored zone the
+ * runtime does not list is kept. On the kit's {@link InlineEntityCombobox}.
+ */
+export function TimeZoneSelect({
+  value,
+  onChange,
+  label,
+  disabled,
+  id,
+  className,
+  commit,
+  labels: labelsProp,
+}: TimeZoneSelectProps) {
+  const labels = useNotificationsLabels(labelsProp);
+  const { regions } = labels;
+  const options = useMemo(() => timeZoneOptions(value, (region) => regionName(regions, region)), [value, regions]);
+  return (
+    <InlineEntityCombobox<string>
+      id={id}
+      label={label ?? labels.timeZone}
+      value={value}
+      options={options}
+      disabled={disabled}
+      commit={commit}
+      onChange={(zone) => {
+        if (zone && zone !== value) onChange(zone);
+      }}
+      className={className}
+    />
+  );
+}