@wix/patterns 1.414.0 → 1.415.0

package/src/components/EditableTable/cellTypes/datetime/Edit.tsx

@@ -0,0 +1,425 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  CellDateInput,
+  CellTimeInput,
+  type CellDateInputImperativeHandle,
+  dateToTime,
+  timeToDate,
+  useTranslations,
+  type Time,
+} from '@wix/patterns-fields';
+import type { TimeInputImperativeActions } from '@wix/design-system';
+import type { CellEditProps } from '../../types';
+import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
+import { mergeDate, mergeTime } from './mergeDateTime';
+import {
+  datePlaceholder,
+  formatDatePart,
+  formatTimePart,
+  timePlaceholder,
+} from './formatters';
+import { isValidDate, setNativeInputValue } from './helpers';
+import { useSubCellClickTracker } from './subCellContext';
+import { classes } from './Edit.st.css.js';
+
+/**
+ * DateTimeEdit — 2-in-1 sub-cell editor.
+ *
+ * Single `Date | null` value rendered as two halves (date | time) with a
+ * vertical divider. Each half has its own focus + edit lifecycle, but only
+ * one sub-cell is in edit mode at a time. Commits merge the half-value back
+ * into the full `Date` before calling onChange (so the other half is
+ * preserved).
+ *
+ * The EditableTable framework has no sub-cell concept — `focusedCell` /
+ * `editingCell` are `{rowKey, columnId}` only. So sub-cell focus, intra-cell
+ * Tab interception, and date-popover focused-day capture all live here.
+ */
+
+type SubEdit = 'date' | 'time';
+
+export const DateTimeEdit: React.FC<CellEditProps<Date | null>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  inputRef,
+  editTrigger,
+}) => {
+  const { t } = useTranslations();
+
+  // Initial sub-cell. The View records the clicked half via
+  // `onMouseDownCapture` (capture phase, before the framework's onClick
+  // stopPropagation) into the wrapper-provided tracker; consume it once.
+  const tracker = useSubCellClickTracker();
+  const [subEdit, setSubEdit] = useState<SubEdit>(() => {
+    if (editTrigger === 'click' || editTrigger === 'doubleClick') {
+      return tracker.consume() ?? 'date';
+    }
+    return 'date';
+  });
+
+  const dateWrapperRef = useRef<HTMLDivElement | null>(null);
+  const timeWrapperRef = useRef<HTMLDivElement | null>(null);
+  const datePickerRef = useRef<CellDateInputImperativeHandle | null>(null);
+  const timeInputRef = useRef<TimeInputImperativeActions | null>(null);
+  // Direct refs to the underlying <input> in each half. Populated by
+  // CellDateInput / CellTimeInput via their object-ref `inputRef` prop.
+  // Used for focus, programmatic typed-key forwarding, and the "is the
+  // date input focused?" check — instead of querySelector'ing into WDS
+  // internals.
+  const dateInputElRef = useRef<HTMLInputElement | null | undefined>(null);
+  const timeInputElRef = useRef<HTMLInputElement | null | undefined>(null);
+
+  const isInsideCell = useCallback((target: EventTarget | null): boolean => {
+    if (!(target instanceof Node)) {
+      return false;
+    }
+    return Boolean(
+      dateWrapperRef.current?.contains(target) ||
+        timeWrapperRef.current?.contains(target),
+    );
+  }, []);
+
+  // Latest date from the date input (typed or picked), NOT yet committed to
+  // editingValue. WDS DateInput's `componentDidUpdate` reformats the input
+  // text on every props.value change, so calling onChange while the user is
+  // still in the date half would overwrite mid-typing input. We stash here
+  // and flush on focusout / intra-cell Tab / Escape.
+  const typedDateRef = useRef<Date | null>(null);
+
+  const onChangeRef = useRef(onChange);
+  const onCommitRef = useRef(onCommit);
+  const valueRef = useRef(value);
+  const subEditRef = useRef(subEdit);
+  onChangeRef.current = onChange;
+  onCommitRef.current = onCommit;
+  valueRef.current = value;
+  subEditRef.current = subEdit;
+
+  // Type-to-edit trigger is consumed exactly once on mount. Without this
+  // guard, both type-forwarding effects below would re-inject the typed
+  // character every time `subEdit` changes (Tab between halves), because
+  // `editTrigger` stays stable for the lifetime of the edit session.
+  const typeTriggerConsumedRef = useRef(false);
+
+  const commitTypedDate = useCallback(() => {
+    if (typedDateRef.current) {
+      onChangeRef.current(typedDateRef.current);
+      typedDateRef.current = null;
+    }
+  }, []);
+
+  const closeCalendar = useCallback(
+    () => datePickerRef.current?.closeCalendar(),
+    [],
+  );
+  useCloseOnAncestorScroll(dateWrapperRef, closeCalendar, subEdit === 'date');
+
+  const closeTimeDropdown = useCallback(() => timeInputRef.current?.blur(), []);
+  useCloseOnAncestorScroll(
+    timeWrapperRef,
+    closeTimeDropdown,
+    subEdit === 'time',
+  );
+
+  // Flush typed-but-not-committed date when focus leaves the date half. The
+  // gesture paths (calendar day pick, Tab/Enter on focused day, intra-cell
+  // Tab, Enter on input) flush via their own handlers; this covers external
+  // exits — clicking another cell, the toolbar, or anything else outside
+  // the date wrapper. Without it the framework's commitEdit (triggered by
+  // the focus shift to another cell) would read the stale editingValue and
+  // silently discard the user's typing.
+  useEffect(() => {
+    if (subEdit !== 'date') {
+      return;
+    }
+    const wrapper = dateWrapperRef.current;
+    if (!wrapper) {
+      return;
+    }
+    const onFocusOut = (e: FocusEvent) => {
+      const next = e.relatedTarget as Node | null;
+      if (next && wrapper.contains(next)) {
+        return;
+      }
+      commitTypedDate();
+    };
+    wrapper.addEventListener('focusout', onFocusOut);
+    return () => {
+      wrapper.removeEventListener('focusout', onFocusOut);
+    };
+  }, [subEdit, commitTypedDate]);
+
+  // Focus active sub-input on mount / sub-cell switch. Deferred via rAF so
+  // any in-flight click chain finishes before WDS dropdown options mount —
+  // otherwise a stray mousedown can land on a freshly-rendered option and
+  // silently commit a value the user never picked.
+  useEffect(() => {
+    if (subEdit === 'time') {
+      const raf = requestAnimationFrame(() => {
+        const input = timeInputElRef.current;
+        if (input) {
+          input.focus();
+          input.click(); // auto-open WDS TimeInput dropdown
+        }
+      });
+      return () => cancelAnimationFrame(raf);
+    }
+    const raf = requestAnimationFrame(() => {
+      datePickerRef.current?.focus();
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [subEdit]);
+
+  // Type-to-edit: forward the typed character into the initial sub-cell's
+  // input. Runs once via typeTriggerConsumedRef — re-running on sub-cell
+  // switches would re-inject the digit every time the user Tabs between the
+  // date and time halves (editTrigger stays stable for the whole session).
+  useEffect(() => {
+    if (typeTriggerConsumedRef.current) {
+      return;
+    }
+    if (
+      !editTrigger ||
+      typeof editTrigger !== 'object' ||
+      editTrigger.kind !== 'type'
+    ) {
+      return;
+    }
+    typeTriggerConsumedRef.current = true;
+    const key = editTrigger.key;
+    if (key.length !== 1) {
+      return;
+    }
+    const raf = requestAnimationFrame(() => {
+      if (subEditRef.current === 'date') {
+        datePickerRef.current?.openCalendar();
+        const dpInput = dateInputElRef.current;
+        if (dpInput) {
+          setNativeInputValue(dpInput, key);
+        }
+        return;
+      }
+      const input = timeInputElRef.current;
+      if (input) {
+        setNativeInputValue(input, key);
+      }
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [editTrigger]);
+
+  // Wire inputRef to whichever sub-input is currently active.
+  useEffect(() => {
+    if (!inputRef) {
+      return;
+    }
+    inputRef.current =
+      (subEdit === 'time' ? timeInputElRef.current : dateInputElRef.current) ??
+      undefined;
+  }, [subEdit, inputRef]);
+
+  // Intra-cell Tab (date → time, Shift+Tab time → date). Document-capture
+  // so we run BEFORE the table's useKeyboardNavigation Tab handler — the
+  // framework only sees the Tab that should actually exit the cell.
+  useEffect(() => {
+    const onKeyDownCapture = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') {
+        return;
+      }
+      if (!isInsideCell(e.target)) {
+        return;
+      }
+
+      if (!e.shiftKey && subEditRef.current === 'date') {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        commitTypedDate();
+        setSubEdit('time');
+        return;
+      }
+      if (e.shiftKey && subEditRef.current === 'time') {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        setSubEdit('date');
+        return;
+      }
+    };
+    document.addEventListener('keydown', onKeyDownCapture, true);
+    return () => {
+      document.removeEventListener('keydown', onKeyDownCapture, true);
+    };
+  }, [commitTypedDate, isInsideCell]);
+
+  // Click on the inactive sub-cell switches sub-edit. pointerdown capture
+  // only: calling preventDefault on a primary pointer's pointerdown
+  // suppresses the synthesized mousedown / click that would otherwise let
+  // WDS DropdownBase.onSelect commit whichever option happens to sit under
+  // the click coords. Pair with the rAF defer on dropdown open above.
+  useEffect(() => {
+    const onPointerDown = (e: PointerEvent) => {
+      if (!isInsideCell(e.target)) {
+        return;
+      }
+      const target = e.target as HTMLElement | null;
+      const sub = (
+        target?.closest('[data-sub-cell]') as HTMLElement | null
+      )?.getAttribute('data-sub-cell');
+      if (sub !== 'date' && sub !== 'time') {
+        return;
+      }
+      if (sub === subEditRef.current) {
+        return;
+      }
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      setSubEdit(sub as SubEdit);
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown, true);
+    };
+  }, [isInsideCell]);
+
+  const handleDateChange = useCallback((newDate: Date) => {
+    // Stash, don't commit — WDS DateInput reformats input text on every
+    // props.value change, clobbering mid-typing input. The focusout effect
+    // (and intra-cell Tab) flushes this to editingValue at the right moment.
+    typedDateRef.current = mergeDate(valueRef.current, newDate);
+  }, []);
+
+  const handleTimeChange = useCallback(
+    (time: Time | null) => {
+      if (!time) {
+        // Per spec: no clear on the time half. CellTimeInput's clear button
+        // is suppressed (no onClear prop). If WDS somehow emits null, no-op.
+        return;
+      }
+      const asDate = timeToDate(time);
+      const merged = mergeTime(valueRef.current, asDate);
+      onChange(merged);
+      onCommit();
+    },
+    [onChange, onCommit],
+  );
+
+  // Clears the entire DateTime value. Wired to the date half's clear (X)
+  // button — the single "remove this DateTime" affordance. Time half has no
+  // clear button: there is no "date set, time null" state.
+  const handleDateClear = useCallback(() => {
+    // Drop any stashed typed date so the focusout flush doesn't restore it
+    // after we commit null.
+    typedDateRef.current = null;
+    onChange(null);
+    onCommit();
+  }, [onChange, onCommit]);
+
+  const handleEscape = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        // Cancellation drops any typed-but-stashed date. Without this, a
+        // delayed focusout (browsers fire blur asynchronously when the
+        // focused element is removed) could re-introduce the typed value
+        // after the user already pressed Escape.
+        typedDateRef.current = null;
+        onCancel();
+      }
+    },
+    [onCancel],
+  );
+
+  const validDate = isValidDate(value) ? value : null;
+
+  const timeAsString: Time | null = validDate ? dateToTime(validDate) : null;
+
+  const placeholderTokens = {
+    day: t('CMS.cellDateTime.placeholder.day'),
+    month: t('CMS.cellDateTime.placeholder.month'),
+    year: t('CMS.cellDateTime.placeholder.year'),
+    hour: t('CMS.cellDateTime.placeholder.hour'),
+    minute: t('CMS.cellDateTime.placeholder.minute'),
+  };
+  const datePh = datePlaceholder(placeholderTokens);
+  const timePh = timePlaceholder(placeholderTokens);
+
+  // Event-suppression layers in this component, by owner:
+  //   1. halfHandlers.onClick / onMouseDown (React, below)
+  //      → swallow the framework's "click inside cell during edit" handling
+  //        so clicks on either half don't re-trigger an edit start.
+  //   2. halfHandlers.onKeyDown = handleEscape (React, below)
+  //      → cancels the edit before the framework's Escape behavior runs.
+  //   3. document keydown capture for intra-cell Tab (useEffect above)
+  //      → date↔time half switch runs BEFORE the framework's Tab handler
+  //        would move focus to the next column.
+  //   4. document pointerdown capture for sub-cell switch (useEffect above)
+  //      → click on the inactive half switches subEdit without committing,
+  //        and preventDefault suppresses the synthesized mousedown/click
+  //        that would otherwise let WDS DropdownBase.onSelect commit a
+  //        random option under the cursor.
+  const halfHandlers = {
+    onKeyDown: handleEscape,
+    onClick: (e: React.MouseEvent) => e.stopPropagation(),
+    onMouseDown: (e: React.MouseEvent) => e.stopPropagation(),
+  };
+
+  return (
+    <>
+      <div
+        ref={dateWrapperRef}
+        data-sub-cell="date"
+        className={classes.dateHalf}
+        {...halfHandlers}
+      >
+        {subEdit === 'date' ? (
+          <CellDateInput
+            ref={datePickerRef}
+            inputRef={dateInputElRef}
+            value={validDate}
+            onChange={handleDateChange}
+            onClear={handleDateClear}
+            placeholder={datePh}
+            ariaLabel={t('CMS.cellDateTime.ariaLabel.date')}
+            hidePrefix
+            dataHook="datetime-date-edit"
+          />
+        ) : validDate ? (
+          <span className={classes.passiveText}>
+            {formatDatePart(validDate)}
+          </span>
+        ) : (
+          <span className={classes.placeholderText}>{datePh}</span>
+        )}
+      </div>
+
+      <span aria-hidden className={classes.divider} />
+
+      <div
+        ref={timeWrapperRef}
+        data-sub-cell="time"
+        className={classes.timeHalf}
+        aria-label={t('CMS.cellDateTime.ariaLabel.time')}
+        {...halfHandlers}
+      >
+        {subEdit === 'time' ? (
+          <CellTimeInput
+            ref={timeInputRef}
+            inputRef={timeInputElRef}
+            value={timeAsString}
+            onChange={handleTimeChange}
+            placeholder={timePh}
+            clearable={false}
+            dataHook="datetime-time-edit"
+          />
+        ) : validDate ? (
+          <span className={classes.passiveText}>
+            {formatTimePart(validDate)}
+          </span>
+        ) : (
+          <span className={classes.placeholderText}>{timePh}</span>
+        )}
+      </div>
+    </>
+  );
+};

package/src/components/EditableTable/cellTypes/datetime/Edit.uni.driver.ts

@@ -0,0 +1,19 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function DateTimeEditUniDriver(base: UniDriver, _body: UniDriver) {
+  const dateHalf = () => base.$('[data-sub-cell="date"]');
+  const timeHalf = () => base.$('[data-sub-cell="time"]');
+
+  return {
+    ...baseUniDriverFactory(base),
+    getDateInputValue: () => dateHalf().$('input').attr('value'),
+    getTimeInputValue: () => timeHalf().$('input').attr('value'),
+    clickDateHalf: () => dateHalf().click(),
+    clickTimeHalf: () => timeHalf().click(),
+    dateHalfHasInput: () => dateHalf().$('input').exists(),
+    timeHalfHasInput: () => timeHalf().$('input').exists(),
+    hasTimeClearButton: () =>
+      timeHalf().$('[data-hook="cell-time-input-clear"]').exists(),
+  };
+}

package/src/components/EditableTable/cellTypes/datetime/View.st.css

@@ -0,0 +1,36 @@
+@property st-global(--wds-color-text-placeholder);
+@property st-global(--wds-color-border-standard);
+
+.leaf {
+  min-width: 0;
+  padding: 9px 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  line-height: 18px;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
+.datePart {
+  -st-extends: leaf;
+  flex: 60 1 0;
+}
+
+.timePart {
+  -st-extends: leaf;
+  flex: 40 1 0;
+}
+
+.placeholder {
+  -st-extends: leaf;
+  color: var(--wds-color-text-placeholder, #868aa5);
+}
+
+.divider {
+  width: 1px;
+  height: 16px;
+  background: var(--wds-color-border-standard, #dfe5eb);
+  flex-shrink: 0;
+}

package/src/components/EditableTable/cellTypes/datetime/View.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "View3728138641";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"View3728138641__root","leaf":"View3728138641__leaf","datePart":"View3728138641__datePart View3728138641__leaf","timePart":"View3728138641__timePart View3728138641__leaf","placeholder":"View3728138641__placeholder View3728138641__leaf","divider":"View3728138641__divider"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {"wds-color-text-placeholder":"--wds-color-text-placeholder","wds-color-border-standard":"--wds-color-border-standard"}; 
+
+
+
+

package/src/components/EditableTable/cellTypes/datetime/View.tsx

@@ -0,0 +1,47 @@
+import React, { useCallback } from 'react';
+import { useTranslations } from '@wix/patterns-fields';
+import type { CellViewProps } from '../../types';
+import { formatDatePart, formatTimePart } from './formatters';
+import { isValidDate } from './helpers';
+import { useSubCellClickTracker, type SubCell } from './subCellContext';
+import { classes } from './View.st.css.js';
+
+export const DateTimeView: React.FC<CellViewProps<Date | null>> = ({
+  value,
+}) => {
+  const { t } = useTranslations();
+  const tracker = useSubCellClickTracker();
+
+  const recordClick = useCallback(
+    (sub: SubCell) => () => tracker.record(sub),
+    [tracker],
+  );
+
+  if (!isValidDate(value)) {
+    return (
+      <span className={classes.placeholder}>
+        {t('CMS.cellDateTime.placeholder')}
+      </span>
+    );
+  }
+
+  return (
+    <>
+      <span
+        data-sub-cell="date"
+        className={classes.datePart}
+        onMouseDownCapture={recordClick('date')}
+      >
+        {formatDatePart(value)}
+      </span>
+      <span aria-hidden className={classes.divider} />
+      <span
+        data-sub-cell="time"
+        className={classes.timePart}
+        onMouseDownCapture={recordClick('time')}
+      >
+        {formatTimePart(value)}
+      </span>
+    </>
+  );
+};

package/src/components/EditableTable/cellTypes/datetime/View.uni.driver.ts

@@ -0,0 +1,16 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../../../unidriver';
+
+export function DateTimeViewUniDriver(base: UniDriver, _body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    getFormattedDate: () => base.$('[data-sub-cell="date"]').text(),
+    getFormattedTime: () => base.$('[data-sub-cell="time"]').text(),
+    getPlaceholder: () => base.text(),
+    hasDivider: () =>
+      base
+        .$$('[aria-hidden]')
+        .count()
+        .then((n) => n > 0),
+  };
+}

package/src/components/EditableTable/cellTypes/datetime/formatters.ts

@@ -0,0 +1,60 @@
+import { isValidDate } from './helpers';
+
+const dateFormatter = new Intl.DateTimeFormat(undefined, {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+});
+
+const timeFormatter = new Intl.DateTimeFormat(undefined, {
+  hour: 'numeric',
+  minute: '2-digit',
+});
+
+export const formatDatePart = (value: Date | null): string =>
+  isValidDate(value) ? dateFormatter.format(value) : '';
+
+export const formatTimePart = (value: Date | null): string =>
+  isValidDate(value) ? timeFormatter.format(value) : '';
+
+const DATE_PLACEHOLDER_SAMPLE = new Date(2026, 0, 31);
+const TIME_PLACEHOLDER_SAMPLE = new Date(2026, 0, 1, 13, 30);
+
+/** Looked up via the consumer's `t()` so each token is translatable. */
+export interface PlaceholderTokens {
+  day: string;
+  month: string;
+  year: string;
+  hour: string;
+  minute: string;
+}
+
+/**
+ * Derives an input placeholder from the current locale's date format by
+ * replacing each part with its translated stand-in (DD, MM, YYYY). E.g.
+ * `MM/DD/YYYY` in en-US, `DD.MM.YYYY` in de-DE, `YYYY/MM/DD` in ja-JP.
+ */
+export const datePlaceholder = (tokens: PlaceholderTokens): string =>
+  dateFormatter
+    .formatToParts(DATE_PLACEHOLDER_SAMPLE)
+    .map((part) => {
+      if (part.type === 'day') return tokens.day;
+      if (part.type === 'month') return tokens.month;
+      if (part.type === 'year') return tokens.year;
+      return part.value;
+    })
+    .join('');
+
+/**
+ * Derives a time input placeholder from the current locale's time format.
+ * E.g. `HH:MM AM` in en-US (12-hour) or `HH:MM` in de-DE (24-hour).
+ */
+export const timePlaceholder = (tokens: PlaceholderTokens): string =>
+  timeFormatter
+    .formatToParts(TIME_PLACEHOLDER_SAMPLE)
+    .map((part) => {
+      if (part.type === 'hour') return tokens.hour;
+      if (part.type === 'minute') return tokens.minute;
+      return part.value;
+    })
+    .join('');

package/src/components/EditableTable/cellTypes/datetime/helpers.ts

@@ -0,0 +1,33 @@
+export const isValidDate = (d: unknown): d is Date =>
+  d instanceof Date && !isNaN(d.getTime());
+
+export const toValidDate = (
+  value: Date | string | null | undefined,
+): Date | null => {
+  if (value == null) {
+    return null;
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  return isValidDate(date) ? date : null;
+};
+
+/**
+ * Bypass React's synthetic event system to set a controlled <input>'s value
+ * AND fire an `input` event that React's listener picks up. Used for the
+ * type-to-edit gesture: forward the keystroke that triggered edit into the
+ * underlying WDS input without re-implementing its parsing.
+ */
+export const setNativeInputValue = (
+  el: HTMLInputElement,
+  value: string,
+): void => {
+  const setter = Object.getOwnPropertyDescriptor(
+    HTMLInputElement.prototype,
+    'value',
+  )?.set;
+  if (!setter) {
+    return;
+  }
+  setter.call(el, value);
+  el.dispatchEvent(new Event('input', { bubbles: true }));
+};