@visns-studio/visns-components 6.4.2 → 6.4.4

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.4.2",
+    "version": "6.4.4",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/DataGrid.jsx

@@ -39,6 +39,7 @@ import NumberFilter from '@visns-studio/visns-datagrid-enterprise/NumberFilter';
 import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
 import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
+import NativeDateFilterEditor from './columns/NativeDateFilterEditor';
 import { toast } from 'react-toastify';
 import fetchUtil from '../utils/fetchUtil';
 import { confirmDialog } from './utils/ConfirmDialog';
@@ -3725,7 +3726,21 @@ const DataGrid = forwardRef(
                         if (column.filter && column.filter.type) {
                             switch (column.filter.type) {
                                 case 'date':
-                                    filterEditor = DateFilter;
+                                    // Native `<input type="date">` by default
+                                    // — the popup calendar is clipped inside a
+                                    // scrolling grid and its day cells are far
+                                    // below a comfortable tap target. A column
+                                    // can opt back into it with
+                                    // `filter: { datePicker: 'popup' }`, the
+                                    // same escape hatch Field uses. Both
+                                    // editors emit the identical value
+                                    // (`dateFormat`-formatted string, `''`
+                                    // when cleared), so the posted `where[]`
+                                    // entry is unchanged either way.
+                                    filterEditor =
+                                        column.filter.datePicker === 'popup'
+                                            ? DateFilter
+                                            : NativeDateFilterEditor;
                                     filterEditorProps = (props, { index }) => {
                                         return {
                                             dateFormat: 'DD-MM-YYYY',

package/src/components/Field.jsx

@@ -42,6 +42,10 @@ import VisnsAutocomplete from './Autocomplete';
 import VisnsDropZone from './DropZone';
 import MultiCheckbox from './MultiCheckbox';
 import DatePickerPortal from './utils/DatePickerPortal';
+import {
+    fromNativeInputValue,
+    toNativeInputValue,
+} from './utils/nativeDateInput';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -3093,12 +3097,80 @@ function Field({
         }
     };
 
+    /**
+     * The touch/narrow-viewport rendering of a `date` / `datetime` field: the
+     * platform's own picker instead of react-datepicker's popup calendar.
+     *
+     * It is a drop-in for the DatePicker above — same error class, same
+     * `onChangeDate(value, id)` call, same value shape in form state (a JS
+     * `Date`, or `null` once cleared). The conversions live in
+     * utils/nativeDateInput.js.
+     *
+     * The library's own clear affordance is kept (react-datepicker renders one
+     * via `isClearable`, and iOS offers no way to empty a date input once it
+     * has a value), so the browser's calendar glyph is hidden while it shows —
+     * two clear/open icons side by side would be one too many. Tapping the
+     * field still opens the native picker on every touch platform.
+     *
+     * @param {boolean} withTime `datetime-local` rather than `date`
+     */
+    const renderNativeDateInput = (withTime) => {
+        const value = toNativeInputValue(inputValue, withTime);
+
+        return (
+            <div className={styles.nativeDateWrap}>
+                <input
+                    type={withTime ? 'datetime-local' : 'date'}
+                    className={`${styles.nativeDateInput} ${
+                        value ? styles.nativeDateFilled : ''
+                    } ${inputClass[settings.id] || ''}`}
+                    value={value}
+                    onChange={(e) =>
+                        onChangeDate(
+                            fromNativeInputValue(
+                                e.target.value,
+                                inputValue,
+                                withTime
+                            ),
+                            settings.id
+                        )
+                    }
+                    autoComplete="off"
+                />
+                {/* Always mounted: inserting this node while the input is
+                    focused makes mobile browsers dismiss the just-opened
+                    native picker (the DOM mutated around the focused
+                    control). Visibility is CSS-only. */}
+                <button
+                    type="button"
+                    aria-label="Clear date"
+                    aria-hidden={value ? undefined : 'true'}
+                    tabIndex={value ? 0 : -1}
+                    className={`${styles.nativeDateClear} ${
+                        value ? '' : styles.nativeDateClearHidden
+                    }`}
+                    onClick={() => onChangeDate(null, settings.id)}
+                >
+                    <X size={16} />
+                </button>
+            </div>
+        );
+    };
+
     const renderAdditionalContainer = () => {
         switch (settings.type) {
             case 'date':
             case 'datetime':
+                // Native on every viewport — the popup calendar clips inside
+                // modals and duplicates what browsers now do well themselves.
+                // A field can opt back into the react-datepicker popup with
+                // `datePicker: 'popup'` in its config.
+                if (settings.datePicker !== 'popup') {
+                    return renderNativeDateInput(settings.type === 'datetime');
+                }
+
                 return (
-                    <DatePickerPortal 
+                    <DatePickerPortal
                         containerRef={containerRef}
                         centerScreen={settings.centerScreen}
                         modalContext={settings.modalContext}

package/src/components/columns/NativeDateFilterEditor.jsx

@@ -0,0 +1,434 @@
+import {
+    forwardRef,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import moment from 'moment';
+import { X } from 'lucide-react';
+import { toNativeInputValue } from '../utils/nativeDateInput';
+
+/**
+ * Native (`<input type="date">`) replacement for the datagrid's popup
+ * calendar column filter.
+ *
+ * The grid ships `DateFilter` from `@visns-studio/visns-datagrid-*`, which
+ * renders an Inovua `DateInput` — a text box plus its own floating calendar.
+ * That popup is the last remaining non-native date picker in the app: it is
+ * clipped inside scrolling grids, its day cells are far below a comfortable
+ * tap target, and it duplicates something every browser now does well. This
+ * editor renders the platform control instead, on every viewport.
+ *
+ * ---------------------------------------------------------------------------
+ * The filter-editor contract (community-edition
+ * Layout/ColumnLayout/Cell/renderFilter/index.tsx -> `GenericFilter.render`):
+ *
+ *   filterValue   { name, operator, type, value, ... } — never mutate it
+ *   onChange      called with a WHOLE filterValue object, `value` replaced
+ *   emptyValue    the filter type's "no filter" value (`''` for `date`)
+ *   filterDelay   ms to debounce before calling onChange (grid default 250)
+ *   render        REQUIRED wrapper — the editor must return `render(node)`,
+ *                 which supplies the filter-row chrome and settings icon
+ *   cellProps     the column's props (may carry `dateFormat`)
+ *   filterEditorProps  object, or `(props, { value, index }) => object`
+ *   ref           receives the editor instance; the grid calls `setValue()`
+ *                 on it (e.g. DataGrid's dependent-filter reset) and reads
+ *                 `getInputRef()`
+ *   theme / rtl / readOnly / disabled / style / i18n / cell / renderInPortal
+ *
+ * ---------------------------------------------------------------------------
+ * Value shape — byte-identical to `DateFilter`.
+ *
+ * `DateInput` emits `dateMoment.format(dateFormat)` and `''` for a cleared
+ * value (packages/Calendar/src/DateInput/index.tsx `format()`), so with the
+ * `dateFormat: 'DD-MM-YYYY'` that DataGrid configures, the grid — and
+ * therefore the `where[]` entry posted to the server — has always carried a
+ * string like `'02-12-2025'`, and `''` once cleared. This editor formats with
+ * the same resolved `dateFormat` and clears to the same `emptyValue`, so no
+ * server-side filtering changes.
+ */
+
+// Moment tokens that mean "this format carries a time of day". Escaped
+// literals (`[at]`) are stripped first so they cannot produce a false match.
+const TIME_TOKENS = /[HhmsSAa]/;
+
+const formatHasTime = (format) =>
+    typeof format === 'string' &&
+    TIME_TOKENS.test(format.replace(/\[[^\]]*\]/g, ''));
+
+/**
+ * Resolve the display format the same way `DateFilter` does: an explicit
+ * `cellProps.dateFormat` wins, otherwise `filterEditorProps` — which DataGrid
+ * passes as a function — is consulted.
+ *
+ * @returns {string} '' when nothing is configured, which is what
+ *                   `DateInput.format()` falls back on (moment then uses its
+ *                   own ISO default).
+ */
+const resolveDateFormat = (props, value, index) => {
+    const { cellProps } = props;
+
+    if (cellProps && cellProps.dateFormat !== undefined) {
+        return cellProps.dateFormat;
+    }
+
+    return resolveEditorProps(props, value, index).dateFormat || '';
+};
+
+/**
+ * `filterEditorProps` may be an object or, as DataGrid passes it for date
+ * filters, a `(props, { value, index }) => object` factory. DateFilter also
+ * falls back to the copy carried on `filterValue`, so this does too.
+ */
+function resolveEditorProps(props, value, index) {
+    let { filterEditorProps } = props;
+
+    if (filterEditorProps === undefined) {
+        filterEditorProps = props.filterValue && props.filterValue.filterEditorProps;
+    }
+
+    if (typeof filterEditorProps === 'function') {
+        return filterEditorProps(props, { value, index }) || {};
+    }
+
+    return filterEditorProps || {};
+}
+
+/**
+ * A stored filter value (formatted with `dateFormat`) -> the string the
+ * native input wants ('YYYY-MM-DD' / 'YYYY-MM-DDTHH:mm').
+ */
+const toInputValue = (value, dateFormat, withTime) => {
+    if (value === null || value === undefined || value === '') {
+        return '';
+    }
+
+    // Strict against the configured format first — '02-12-2025' parsed
+    // loosely would be read as an ISO-ish string and come back wrong.
+    let parsed = dateFormat ? moment(value, dateFormat, true) : null;
+
+    if (!parsed || !parsed.isValid()) {
+        parsed = moment(value);
+    }
+
+    if (!parsed.isValid()) {
+        return '';
+    }
+
+    return toNativeInputValue(parsed, withTime);
+};
+
+/**
+ * The native input's raw string -> the value the grid and the server expect.
+ * Cleared / partially-typed input yields `emptyValue`, which `loadData` in
+ * DataGrid.jsx drops from the posted `where[]` so the grid shows every row.
+ */
+const fromInputValue = (raw, dateFormat, withTime, emptyValue) => {
+    if (!raw) {
+        return emptyValue;
+    }
+
+    // `datetime-local` normally yields 'YYYY-MM-DDTHH:mm', but a non-default
+    // `step` makes browsers append seconds — accept both.
+    const parsed = withTime
+        ? moment(raw, ['YYYY-MM-DD[T]HH:mm', 'YYYY-MM-DD[T]HH:mm:ss'], true)
+        : moment(raw, 'YYYY-MM-DD', true);
+
+    if (!parsed.isValid()) {
+        return emptyValue;
+    }
+
+    // `format()` with no argument is moment's ISO default — exactly what
+    // `DateInput.format()` produces when no dateFormat is configured.
+    return dateFormat ? parsed.format(dateFormat) : parsed.format();
+};
+
+const isRangeOperator = (operator) =>
+    operator === 'inrange' || operator === 'notinrange';
+
+const WRAPPER_CLASS =
+    'InovuaReactDataGrid__column-header__filter ' +
+    'InovuaReactDataGrid__column-header__filter--date ' +
+    'visns-native-date-filter';
+
+/**
+ * One `<input type="date">` (or `datetime-local`) dressed as a grid filter,
+ * with the clear affordance the popup calendar used to provide — Chrome's
+ * date input has no clear button of its own.
+ */
+const NativeDateInput = ({
+    inputValue,
+    withTime,
+    disabled,
+    readOnly,
+    placeholder,
+    style,
+    onValueChange,
+    inputRef,
+    ...rest
+}) => (
+    <span
+        className={`${WRAPPER_CLASS}${
+            inputValue ? '' : ' visns-native-date-filter--empty'
+        }${disabled ? ' visns-native-date-filter--disabled' : ''}`}
+        style={{ minWidth: 0, ...style }}
+    >
+        <input
+            {...rest}
+            ref={inputRef}
+            type={withTime ? 'datetime-local' : 'date'}
+            className="visns-native-date-filter__input"
+            value={inputValue}
+            disabled={disabled}
+            readOnly={readOnly}
+            // `<input type="date">` has no placeholder of its own — the
+            // browser always shows its locale mask — so the configured
+            // "Select Date" text becomes the accessible name instead.
+            aria-label={placeholder || undefined}
+            title={placeholder || undefined}
+            autoComplete="off"
+            onChange={(event) => onValueChange(event.target.value)}
+        />
+        {inputValue && !disabled && !readOnly ? (
+            <button
+                type="button"
+                aria-label="Clear filter"
+                className="visns-native-date-filter__clear"
+                onClick={() => onValueChange('')}
+            >
+                <X size={14} />
+            </button>
+        ) : null}
+    </span>
+);
+
+const NativeDateFilterEditor = forwardRef((props, ref) => {
+    const {
+        filterValue,
+        onChange,
+        filterDelay,
+        emptyValue,
+        readOnly,
+        disabled,
+        style,
+        render,
+    } = props;
+
+    // `''` is the `date` filter type's emptyValue (community-edition
+    // filterTypes.ts) — fall back to it so a grid without the prop still
+    // clears to what DateFilter emitted.
+    const noValue = emptyValue === undefined ? '' : emptyValue;
+
+    const range = isRangeOperator(filterValue && filterValue.operator);
+
+    const [value, setValue] = useState(() =>
+        filterValue ? filterValue.value || (range ? {} : '') : ''
+    );
+
+    const inputRef = useRef(null);
+    const timerRef = useRef(null);
+    const propValueRef = useRef(filterValue && filterValue.value);
+
+    // Keep the emitter fresh for the debounce timer without re-arming it.
+    const emitRef = useRef(null);
+    emitRef.current = (nextValue) => {
+        if (onChange) {
+            onChange({ ...filterValue, value: nextValue });
+        }
+    };
+
+    /**
+     * The popup calendar only ever emitted on an explicit pick, so it never
+     * needed `filterDelay`. A native input emits on every segment edit — Chrome
+     * reports 0002-12-02, 0020-12-02, 0202-12-02 while a year is typed — so the
+     * delay the grid already provides is honoured here, exactly as StringFilter
+     * does. The posted value is unchanged; only the moment of the request moves.
+     */
+    const emit = useCallback(
+        (nextValue) => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+
+            if (filterDelay && filterDelay >= 1) {
+                timerRef.current = setTimeout(() => {
+                    timerRef.current = null;
+                    emitRef.current(nextValue);
+                }, filterDelay);
+                return;
+            }
+
+            emitRef.current(nextValue);
+        },
+        [filterDelay]
+    );
+
+    useEffect(
+        () => () => {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        },
+        []
+    );
+
+    // Mirrors DateFilter.componentDidUpdate: adopt the incoming value only
+    // when the grid itself changed it (a reset, a saved view, a dependent
+    // filter clear), not on every render.
+    const incoming = filterValue ? filterValue.value : undefined;
+
+    useEffect(() => {
+        if (incoming !== propValueRef.current) {
+            propValueRef.current = incoming;
+            setValue(incoming || (range ? {} : ''));
+        }
+    }, [incoming, range]);
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            // GenericFilter -> cellInstance.setFilterValue() reaches the
+            // editor through this; like StringFilter/DateFilter it updates
+            // the displayed value without re-emitting.
+            setValue: (next) => {
+                propValueRef.current = next;
+                setValue(next || (range ? {} : ''));
+            },
+            getInputRef: () => inputRef.current,
+        }),
+        [range]
+    );
+
+    const startFormat = useMemo(
+        () =>
+            resolveDateFormat(
+                props,
+                range ? value && value.start : value,
+                0
+            ),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [props.cellProps, props.filterEditorProps, value, range]
+    );
+
+    const endFormat = useMemo(
+        () => (range ? resolveDateFormat(props, value && value.end, 1) : ''),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [props.cellProps, props.filterEditorProps, value, range]
+    );
+
+    const startEditorProps = resolveEditorProps(
+        props,
+        range ? value && value.start : value,
+        0
+    );
+    const endEditorProps = range
+        ? resolveEditorProps(props, value && value.end, 1)
+        : {};
+
+    // datetime-local only when the configured format actually carries a time
+    // — DataGrid's date filters use 'DD-MM-YYYY', which does not, so they stay
+    // date-only and keep emitting a date-only string.
+    const startWithTime = formatHasTime(startFormat);
+    const endWithTime = formatHasTime(endFormat);
+
+    const handleChange = useCallback(
+        (raw, key, dateFormat, withTime) => {
+            const next = fromInputValue(raw, dateFormat, withTime, noValue);
+
+            if (!key) {
+                if (next === value) {
+                    return;
+                }
+
+                setValue(next);
+                propValueRef.current = next;
+                emit(next);
+                return;
+            }
+
+            const base = value && typeof value === 'object' ? { ...value } : {};
+
+            if (base[key] === next) {
+                return;
+            }
+
+            base[key] = next;
+            setValue(base);
+            propValueRef.current = base;
+            emit(base);
+        },
+        [emit, noValue, value]
+    );
+
+    if (!filterValue) {
+        return render ? render(null) : null;
+    }
+
+    if (range) {
+        const startValue = value && typeof value === 'object' ? value.start : '';
+        const endValue = value && typeof value === 'object' ? value.end : '';
+
+        const node = (
+            <div
+                className="visns-native-date-filter__range"
+                style={{ display: 'flex', minWidth: 0 }}
+            >
+                <NativeDateInput
+                    inputValue={toInputValue(
+                        startValue,
+                        startFormat,
+                        startWithTime
+                    )}
+                    withTime={startWithTime}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    placeholder={startEditorProps.placeholder}
+                    style={style}
+                    inputRef={inputRef}
+                    onValueChange={(raw) =>
+                        handleChange(raw, 'start', startFormat, startWithTime)
+                    }
+                />
+                <div className="InovuaReactDataGrid__column-header__filter__binary_operator_separator" />
+                <NativeDateInput
+                    inputValue={toInputValue(endValue, endFormat, endWithTime)}
+                    withTime={endWithTime}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    placeholder={endEditorProps.placeholder}
+                    style={style}
+                    onValueChange={(raw) =>
+                        handleChange(raw, 'end', endFormat, endWithTime)
+                    }
+                />
+            </div>
+        );
+
+        return render ? render(node) : node;
+    }
+
+    const node = (
+        <NativeDateInput
+            inputValue={toInputValue(value, startFormat, startWithTime)}
+            withTime={startWithTime}
+            disabled={disabled}
+            readOnly={readOnly}
+            placeholder={startEditorProps.placeholder}
+            style={style}
+            inputRef={inputRef}
+            onValueChange={(raw) =>
+                handleChange(raw, null, startFormat, startWithTime)
+            }
+        />
+    );
+
+    return render ? render(node) : node;
+});
+
+NativeDateFilterEditor.displayName = 'NativeDateFilterEditor';
+
+export default NativeDateFilterEditor;

package/src/components/styles/Field.module.scss

@@ -1799,3 +1799,93 @@ input[type='file']:hover {
         min-height: 3lh;
     }
 }
+
+/* =========================================================================
+   Native date input (touch / narrow viewports)
+
+   `date` and `datetime` fields swap react-datepicker's popup calendar for
+   the platform picker on phones — see utils/nativeDateInput.js. The box
+   itself is already styled by the global
+   `input[type]:not(...)` rule that every other text field uses, so only the
+   things that rule does not cover live here: the iOS appearance reset, a
+   44px-class tap height, and the clear button that stands in for
+   react-datepicker's `isClearable` cross.
+   ========================================================================= */
+
+.nativeDateWrap {
+    position: relative;
+    width: 100%;
+}
+
+/* `[type]` only to clear the global input rule's specificity — the padding,
+   border, radius and colour all still come from there. */
+input.nativeDateInput[type] {
+    -webkit-appearance: none;
+    appearance: none;
+    display: block;
+    width: 100%;
+    /* iOS sizes date inputs to their content and centres nothing; a floor
+       keeps the field the same height as its text-input neighbours and
+       comfortably tappable. */
+    min-height: 2.9rem;
+    font-family: inherit;
+}
+
+/* Only once there is a value — and therefore a clear button — does the box
+   need to reserve room on the right, and only then would the browser's own
+   calendar glyph sit under ours. */
+input.nativeDateFilled[type] {
+    padding-right: 2.75rem;
+
+    /* Phones: tapping the field itself opens the OS sheet, so the browser's
+       calendar glyph is redundant next to our clear button. */
+    @media (pointer: coarse) {
+        &::-webkit-calendar-picker-indicator {
+            -webkit-appearance: none;
+            display: none;
+        }
+    }
+
+    /* Desktop: the indicator IS how the picker opens — keep it visible and
+       reserve room for the clear button to sit beside it. */
+    @media (pointer: fine) {
+        padding-right: 4.4rem;
+    }
+}
+
+.nativeDateClear {
+    position: absolute;
+    top: 50%;
+    right: 0.4rem;
+    transform: translateY(-50%);
+
+    /* Sit left of the browser's calendar indicator on desktop. */
+    @media (pointer: fine) {
+        right: 2.3rem;
+    }
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    /* Same token and weight as the datepicker's close icon */
+    color: rgba(var(--primary-rgb, 31, 42, 55), 0.45);
+
+    &:hover,
+    &:focus {
+        color: rgba(var(--primary-rgb, 31, 42, 55), 1);
+        outline: none;
+    }
+}
+
+/* Present in the DOM but inert while the field is empty — see the note in
+   Field.jsx's native date markup. */
+.nativeDateClearHidden {
+    visibility: hidden;
+    pointer-events: none;
+}

package/src/components/styles/global-datagrid.css

@@ -510,3 +510,144 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
 .InovuaReactDataGrid__group-toolbar {
     display: none !important;
 }
+
+/* =========================================================================
+   Native date column filters — see columns/NativeDateFilterEditor.jsx
+
+   The editor replaces Inovua's popup-calendar DateFilter with the platform's
+   own picker. Everything here exists to make an `<input type="date">` sit in
+   the filter row at exactly the size and weight of its text / dropdown
+   neighbours, whose look comes from the toolkit's own
+   `.inovua-react-toolkit-text-input--theme-default-light` rule (32px tall,
+   1px #cdcecd border, 14px #555e68 text).
+
+   Height itself is not set here: the wrapper carries the grid's own
+   `.InovuaReactDataGrid__column-header__filter` class, which the datagrid
+   theme already pins to min/max-height 32px alongside every other filter.
+
+   Note: `global.css` excludes `.visns-native-date-filter__input` from the
+   app-wide `input[type]` rule, whose 1rem padding would otherwise burst the
+   32px filter row.
+   ========================================================================= */
+.visns-native-date-filter {
+    position: relative;
+    display: flex;
+    /* stretch, not center: the input has to fill the 32px the theme pins the
+       filter to, or the clickable area is smaller than the box it draws. */
+    align-items: stretch;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    border: 1px solid #cdcecd;
+    border-radius: 1px;
+    background: #fff;
+    color: #555e68;
+    font-size: 14px;
+    transition: border 0.2s, box-shadow 0.2s;
+}
+
+.visns-native-date-filter:hover {
+    border-color: #7986cb;
+}
+
+.visns-native-date-filter:focus-within {
+    border-color: #7986cb;
+    box-shadow: 0 0 0 2px rgba(121, 134, 203, 0.4);
+}
+
+.visns-native-date-filter--disabled {
+    opacity: 0.5;
+}
+
+.visns-native-date-filter--disabled:hover {
+    border-color: #cdcecd;
+}
+
+.visns-native-date-filter__input {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: auto;
+    margin: 0;
+    padding: 0 2px 0 8px;
+    border: none;
+    outline: none;
+    background: none;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+/* An empty native date input renders its locale mask (dd/mm/yyyy) at full
+   contrast, which reads as a value; mute it to the same placeholder weight
+   the toolkit's text filters use. (`:invalid` cannot express this — an empty
+   optional date input is valid — so the editor sets the modifier itself.) */
+.visns-native-date-filter--empty .visns-native-date-filter__input {
+    color: rgba(85, 94, 104, 0.7);
+}
+
+/* The calendar glyph IS how the picker opens on desktop — keep it, just
+   shrink it into the 32px row. */
+.visns-native-date-filter__input::-webkit-calendar-picker-indicator {
+    margin: 0;
+    padding: 0 2px;
+    opacity: 0.55;
+    cursor: pointer;
+}
+
+.visns-native-date-filter__input::-webkit-calendar-picker-indicator:hover {
+    opacity: 1;
+}
+
+/* Browser-supplied clear / spin affordances are replaced by our own button,
+   which is consistent across engines. */
+.visns-native-date-filter__input::-webkit-clear-button,
+.visns-native-date-filter__input::-webkit-inner-spin-button {
+    display: none;
+    -webkit-appearance: none;
+}
+
+.visns-native-date-filter__input::-moz-calendar-picker-indicator {
+    opacity: 0.55;
+    cursor: pointer;
+}
+
+.visns-native-date-filter__clear {
+    flex: none;
+    align-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin: 0 4px 0 0;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: #99a1aa;
+    cursor: pointer;
+    outline: none;
+}
+
+.visns-native-date-filter__clear:hover,
+.visns-native-date-filter__clear:focus {
+    color: #555e68;
+}
+
+/* inrange / notinrange: two of the same input either side of the theme's
+   own separator. */
+.visns-native-date-filter__range {
+    flex: 1;
+    min-width: 0;
+    align-items: center;
+}
+
+.visns-native-date-filter__range .visns-native-date-filter {
+    flex: 1 1 0;
+}

package/src/components/styles/global.css

@@ -245,7 +245,9 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         .inovua-react-toolkit-text-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):not(
         .variable-inserter-search-input
-    ):not(.react-datepicker__month-select):not(.react-datepicker__year-select) {
+    ):not(.react-datepicker__month-select):not(
+        .react-datepicker__year-select
+    ):not(.visns-native-date-filter__input) {
     background: white;
     border-radius: var(--br);
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);

package/src/components/utils/nativeDateInput.js

@@ -0,0 +1,172 @@
+import { useEffect, useState } from 'react';
+import moment from 'moment';
+
+/**
+ * Native date input support for touch / narrow devices.
+ *
+ * react-datepicker's popup calendar is a poor fit for a phone: inside a modal
+ * it is clipped by the dialog, the month/year dropdowns get cut off and every
+ * day cell is a sub-40px tap target. On those devices the platform's own date
+ * picker is both bigger and familiar, so `date` / `datetime` fields render an
+ * `<input type="date">` / `<input type="datetime-local">` instead.
+ *
+ * The value contract is unchanged: whatever the react-datepicker path hands to
+ * `Form.handleChangeDate` (a JS `Date`, or `null` when cleared) is exactly what
+ * the native path hands it too — see `fromNativeInputValue`.
+ */
+
+// Phones and small tablets in portrait. Anything wider keeps the desktop
+// calendar even if the browser reports a coarse pointer (e.g. a touchscreen
+// laptop is still a mouse-and-keyboard experience for a form).
+export const NATIVE_DATE_MAX_WIDTH = 760;
+
+/**
+ * @returns {boolean} true when the platform date picker should be preferred.
+ *                    SSR-safe: false when there is no `window`.
+ */
+export const prefersNativeDateInput = () => {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+
+    const coarsePointer =
+        typeof window.matchMedia === 'function' &&
+        window.matchMedia('(pointer: coarse)').matches;
+
+    return coarsePointer || window.innerWidth <= NATIVE_DATE_MAX_WIDTH;
+};
+
+/**
+ * Hook form of `prefersNativeDateInput`, re-evaluated on resize / orientation
+ * change and on pointer-capability changes (docking a tablet to a mouse).
+ *
+ * @returns {boolean}
+ */
+export const useNativeDateInput = () => {
+    const [isNative, setIsNative] = useState(prefersNativeDateInput);
+
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+
+        const update = () => setIsNative(prefersNativeDateInput());
+
+        window.addEventListener('resize', update);
+
+        const query =
+            typeof window.matchMedia === 'function'
+                ? window.matchMedia('(pointer: coarse)')
+                : null;
+
+        // Safari < 14 only has the deprecated add/removeListener pair
+        if (query) {
+            if (typeof query.addEventListener === 'function') {
+                query.addEventListener('change', update);
+            } else if (typeof query.addListener === 'function') {
+                query.addListener(update);
+            }
+        }
+
+        return () => {
+            window.removeEventListener('resize', update);
+
+            if (query) {
+                if (typeof query.removeEventListener === 'function') {
+                    query.removeEventListener('change', update);
+                } else if (typeof query.removeListener === 'function') {
+                    query.removeListener(update);
+                }
+            }
+        };
+    }, []);
+
+    return isNative;
+};
+
+/**
+ * Form state (a `Date`, or a date-ish string on a form that was hydrated from
+ * the API before Form.fetchData normalised it) -> the string an
+ * `<input type="date">` / `<input type="datetime-local">` expects.
+ *
+ * @param {Date|string|null|undefined} value
+ * @param {boolean} withTime  true for `datetime-local`
+ * @returns {string} '' when there is nothing valid to show
+ */
+export const toNativeInputValue = (value, withTime = false) => {
+    if (
+        value === null ||
+        value === undefined ||
+        value === '' ||
+        value === 'null'
+    ) {
+        return '';
+    }
+
+    const parsed = moment(value);
+
+    if (!parsed.isValid()) {
+        return '';
+    }
+
+    return parsed.format(
+        withTime ? 'YYYY-MM-DD[T]HH:mm' : 'YYYY-MM-DD'
+    );
+};
+
+/**
+ * The native input's raw string -> the value `onChangeDate` already receives
+ * from react-datepicker.
+ *
+ * Two behaviours are copied deliberately from react-datepicker so the two
+ * paths cannot drift:
+ *
+ *  - clearing yields `null` (react-datepicker's clear button calls
+ *    `onChange(null)`), which Form's required-field check reads as empty;
+ *  - picking a new day on a date-only field keeps the previously selected
+ *    time of day (react-datepicker's `setSelected` does the same `setTime`
+ *    on hour/minute/second), so editing the date of a timestamp column does
+ *    not silently reset it to midnight. Milliseconds are dropped, again as
+ *    react-datepicker does.
+ *
+ * @param {string} raw            the input element's value
+ * @param {Date|string|null} previous  the current form value for the field
+ * @param {boolean} withTime      true for `datetime-local`
+ * @returns {Date|null}
+ */
+export const fromNativeInputValue = (raw, previous, withTime = false) => {
+    if (!raw) {
+        return null;
+    }
+
+    // `datetime-local` normally yields 'YYYY-MM-DDTHH:mm', but a non-default
+    // `step` makes browsers append seconds — accept both.
+    const parsed = withTime
+        ? moment(
+              raw,
+              ['YYYY-MM-DD[T]HH:mm', 'YYYY-MM-DD[T]HH:mm:ss'],
+              true
+          )
+        : moment(raw, 'YYYY-MM-DD', true);
+
+    if (!parsed.isValid()) {
+        return null;
+    }
+
+    if (!withTime) {
+        const prior = previous ? moment(previous) : null;
+
+        if (prior && prior.isValid()) {
+            parsed.set({
+                hour: prior.hour(),
+                minute: prior.minute(),
+                second: prior.second(),
+                millisecond: 0,
+            });
+        }
+    }
+
+    return parsed.toDate();
+};
+
+export default useNativeDateInput;

package/src/index.js

@@ -38,6 +38,7 @@ import AudioPlayer from './components/controls/AudioPlayer';
 import GalleryModal from './components/modals/GalleryModal';
 import ImageModal from './components/ImageModal';
 import DatePickerPortal from './components/utils/DatePickerPortal';
+import NativeDateFilterEditor from './components/columns/NativeDateFilterEditor';
 import ImportWizardModal from './components/ImportWizardModal';
 export * from './components/columns/ColumnRenderers.jsx';
 
@@ -147,6 +148,7 @@ export {
     MergeEntity,
     MultiSelect,
     MultiCheckbox,
+    NativeDateFilterEditor,
     Navigation,
     Notification,
     NotificationList,