@vespercms/admin 0.1.0-next.0 → 0.1.0-next.1

package/src/widgets/basic.tsx

@@ -8,6 +8,7 @@ import {
 import { MultiCombobox, RadioGroup, Select, Switch, cx } from '@vespercms/ui';
 import { useState } from 'react';
 import type { WidgetProps } from '../types.ts';
+import { useBlankWhenEmpty } from './blank-date.ts';
 
 /*
  * The simple built-in widgets (spec §6.3.2). Each follows the custom widget
@@ -148,11 +149,14 @@ export function DateWidget({
   invalid,
   disabled,
 }: WidgetProps<Date | string>) {
+  const text = dateText(value);
+  const blank = useBlankWhenEmpty(text);
   return (
     <input
       id={id}
       type="date"
-      value={dateText(value)}
+      value={text}
+      {...blank}
       onChange={(event) => {
         const text = event.target.value;
         if (text === '')

package/src/widgets/blank-date.ts

@@ -0,0 +1,32 @@
+import { useState, type FocusEvent, type KeyboardEvent } from 'react';
+
+/*
+ * Safari draws today's date and time, greyed, in an empty date field, and
+ * editors took it for a time already chosen: "Comes down" looked set when it
+ * wasn't (WebKit bug 233215). An empty field is drawn blank until it's
+ * clicked or typed in, and blank again when it's left with nothing in it (studio.css
+ * hides `::-webkit-datetime-edit` under `data-blank`). Chrome's
+ * "mm/dd/yyyy" goes with it; the label says what goes there, and Firefox,
+ * which draws neither, is unchanged.
+ */
+
+/** Keys that pass through or leave a field without starting to fill it in. */
+const PASSING = new Set(['Tab', 'Shift', 'Escape', 'Enter', 'Meta', 'Control', 'Alt']);
+
+/** Props for a `date` or `datetime-local` input whose value is `value`. */
+export function useBlankWhenEmpty(value: string) {
+  const [engaged, setEngaged] = useState(false);
+  return {
+    'data-blank': value === '' && !engaged ? '' : undefined,
+    onPointerDown: () => {
+      setEngaged(true);
+    },
+    onKeyDown: (event: KeyboardEvent) => {
+      if (!PASSING.has(event.key)) setEngaged(true);
+    },
+    // A date typed partway has no value yet, but its parts must stay in sight.
+    onBlur: (event: FocusEvent<HTMLInputElement>) => {
+      if (!event.currentTarget.validity.badInput) setEngaged(false);
+    },
+  };
+}

package/src/widgets/special.tsx

@@ -14,6 +14,7 @@ import { useEditor } from '../editor/context.tsx';
 import { ChoosePageButton } from '../editor/PagePicker.tsx';
 import type { WidgetProps } from '../types.ts';
 import { inputClass } from './basic.tsx';
+import { useBlankWhenEmpty } from './blank-date.ts';
 
 /*
  * The built-in widgets with behaviour of their own (spec §6.3.2). Every one
@@ -253,12 +254,15 @@ export function DateTimeWidget({
     value instanceof Date ? value : typeof value === 'string' && value ? new Date(value) : null;
   const valid = instant !== null && !Number.isNaN(instant.getTime());
   const name = zoneName(zone, valid ? instant : new Date());
+  const wall = valid ? wallTime(instant, zone) : '';
+  const blank = useBlankWhenEmpty(wall);
   return (
     <>
       <input
         id={id}
         type="datetime-local"
-        value={valid ? wallTime(instant, zone) : ''}
+        value={wall}
+        {...blank}
         onChange={(event) => {
           if (event.target.value === '') {
             onChange(undefined);