@multiplatform.one/forms 7.70.0 → 7.72.0

package/src/shared/touchWebPicker.tsx

@@ -1,158 +0,0 @@
-import { formatCalendarDate, parseCalendarDate } from "@multiplatform.one/theme";
-import { type CSSProperties, useSyncExternalStore } from "react";
-import { isWeb } from "tamagui";
-
-/**
- * LC-266 on touch web (FZ-8114): a coarse primary pointer gets the browser's
- * own picker (`input type=date|time|datetime-local`), laid transparently over
- * the MPO box. iOS Safari opens its picker only for a real tap on the input,
- * so the input has to be what the finger hits.
- */
-
-export type TouchWebPickerKind = "date" | "time" | "datetime-local";
-
-const coarsePointerQuery = "(pointer: coarse)";
-
-function coarsePointerList(): MediaQueryList | null {
-  if (!isWeb || typeof window === "undefined" || typeof window.matchMedia !== "function") {
-    return null;
-  }
-  return window.matchMedia(coarsePointerQuery);
-}
-
-function subscribeCoarsePointer(onChange: () => void): () => void {
-  const list = coarsePointerList();
-  if (!list) return () => {};
-  if (typeof list.addEventListener === "function") {
-    list.addEventListener("change", onChange);
-    return () => list.removeEventListener("change", onChange);
-  }
-  list.addListener?.(onChange);
-  return () => list.removeListener?.(onChange);
-}
-
-function readCoarsePointer(): boolean {
-  return coarsePointerList()?.matches ?? false;
-}
-
-/**
- * Primary pointer only: a touch laptop driven by its trackpad reports `fine`
- * and keeps the keyboard field. SSR and hydration read `false`.
- */
-export function useCoarsePointer(): boolean {
-  return useSyncExternalStore(subscribeCoarsePointer, readCoarsePointer, () => false);
-}
-
-export function toDateInputValue(value: Date | null | undefined): string {
-  return value ? formatCalendarDate(value, "date") : "";
-}
-
-export function toDatetimeLocalValue(value: Date | null | undefined, showSeconds: boolean): string {
-  if (!value) return "";
-  const wire = formatCalendarDate(value, "datetime").replace(" ", "T");
-  return showSeconds ? wire : wire.slice(0, 16);
-}
-
-/**
- * The browser's string is timezone-naive, so it is read onto LOCAL parts:
- * the same Date the MPO calendar builds for that day or wall clock.
- */
-export function fromNativeDateValue(value: string): Date | null {
-  return parseCalendarDate(value);
-}
-
-const nativeTimePattern = /^([01]\d|2[0-3]):([0-5]\d)(?::([0-5]\d)(?:\.\d+)?)?$/;
-
-/** Browsers drop `:00` seconds or add milliseconds; both normalise to TimePicker's string. */
-export function fromTimeInputValue(value: string, showSeconds: boolean): string {
-  const match = value
-    .trim()
-    .replace(/^(\d):/, "0$1:")
-    .match(nativeTimePattern);
-  if (!match) return "";
-  const base = `${match[1]}:${match[2]}`;
-  return showSeconds ? `${base}:${match[3] ?? "00"}` : base;
-}
-
-export function toTimeInputValue(value: string | null | undefined, showSeconds: boolean): string {
-  return fromTimeInputValue(value ?? "", showSeconds);
-}
-
-const overlayStyle: CSSProperties = {
-  position: "absolute",
-  top: 0,
-  left: 0,
-  width: "100%",
-  height: "100%",
-  margin: 0,
-  padding: 0,
-  border: 0,
-  opacity: 0,
-  // iOS Safari zooms the page into a focused input under 16px.
-  fontSize: 16,
-  cursor: "pointer",
-  zIndex: 1,
-  WebkitAppearance: "none",
-  appearance: "none",
-};
-
-export interface TouchWebPickerInputProps {
-  kind: TouchWebPickerKind;
-  value: string;
-  onValue: (value: string) => void;
-  onBlur?: () => void;
-  id?: string;
-  min?: string;
-  max?: string;
-  showSeconds?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  invalid?: boolean;
-  "aria-label"?: string;
-  "aria-describedby"?: string;
-}
-
-/** FieldLayout's label targets `id`, so the input carries the field's name. */
-export function TouchWebPickerInput({
-  kind,
-  value,
-  onValue,
-  onBlur,
-  id,
-  min,
-  max,
-  showSeconds,
-  disabled,
-  required,
-  invalid,
-  "aria-label": ariaLabel,
-  "aria-describedby": ariaDescribedBy,
-}: TouchWebPickerInputProps) {
-  return (
-    <input
-      type={kind}
-      id={id}
-      value={value}
-      min={min || undefined}
-      max={max || undefined}
-      step={showSeconds ? 1 : undefined}
-      disabled={disabled}
-      required={required}
-      aria-label={ariaLabel}
-      aria-describedby={ariaDescribedBy}
-      aria-invalid={invalid || undefined}
-      data-testid="touch-web-picker"
-      style={overlayStyle}
-      onChange={(event) => onValue(event.currentTarget.value)}
-      onBlur={onBlur}
-      onClick={(event) => {
-        // Chrome with a touch screen in desktop mode draws editable segments
-        // and opens nothing for a tap; showPicker opens the dialog. It throws
-        // when the picker is already up, which is harmless.
-        try {
-          (event.currentTarget as HTMLInputElement & { showPicker?: () => void }).showPicker?.();
-        } catch {}
-      }}
-    />
-  );
-}

package/types/shared/touchWebPicker.d.ts

@@ -1,40 +0,0 @@
-/**
- * LC-266 on touch web (FZ-8114): a coarse primary pointer gets the browser's
- * own picker (`input type=date|time|datetime-local`), laid transparently over
- * the MPO box. iOS Safari opens its picker only for a real tap on the input,
- * so the input has to be what the finger hits.
- */
-export type TouchWebPickerKind = "date" | "time" | "datetime-local";
-/**
- * Primary pointer only: a touch laptop driven by its trackpad reports `fine`
- * and keeps the keyboard field. SSR and hydration read `false`.
- */
-export declare function useCoarsePointer(): boolean;
-export declare function toDateInputValue(value: Date | null | undefined): string;
-export declare function toDatetimeLocalValue(value: Date | null | undefined, showSeconds: boolean): string;
-/**
- * The browser's string is timezone-naive, so it is read onto LOCAL parts:
- * the same Date the MPO calendar builds for that day or wall clock.
- */
-export declare function fromNativeDateValue(value: string): Date | null;
-/** Browsers drop `:00` seconds or add milliseconds; both normalise to TimePicker's string. */
-export declare function fromTimeInputValue(value: string, showSeconds: boolean): string;
-export declare function toTimeInputValue(value: string | null | undefined, showSeconds: boolean): string;
-export interface TouchWebPickerInputProps {
-    kind: TouchWebPickerKind;
-    value: string;
-    onValue: (value: string) => void;
-    onBlur?: () => void;
-    id?: string;
-    min?: string;
-    max?: string;
-    showSeconds?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    invalid?: boolean;
-    "aria-label"?: string;
-    "aria-describedby"?: string;
-}
-/** FieldLayout's label targets `id`, so the input carries the field's name. */
-export declare function TouchWebPickerInput({ kind, value, onValue, onBlur, id, min, max, showSeconds, disabled, required, invalid, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: TouchWebPickerInputProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=touchWebPicker.d.ts.map

package/types/shared/touchWebPicker.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"touchWebPicker.d.ts","sourceRoot":"","sources":["../../src/shared/touchWebPicker.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,CAAC;AA0BpE;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAE1C;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAEvE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,CAIjG;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAE9D;AAID,8FAA8F;AAC9F,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,CAQ9E;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,WAAW,EAAE,OAAO,GAAG,MAAM,CAE/F;AAoBD,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,kBAAkB,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,EAAE,EACF,GAAG,EACH,GAAG,EACH,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,YAAY,EAAE,SAAS,EACvB,kBAAkB,EAAE,eAAe,GACpC,EAAE,wBAAwB,2CA4B1B"}