@visns-studio/visns-components 6.4.3 → 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.3",
+    "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

@@ -45,7 +45,6 @@ import DatePickerPortal from './utils/DatePickerPortal';
 import {
     fromNativeInputValue,
     toNativeInputValue,
-    useNativeDateInput,
 } from './utils/nativeDateInput';
 
 import 'react-toggle/style.css';
@@ -171,15 +170,6 @@ function Field({
     const [emailSuggestions, setEmailSuggestions] = useState([]);
     const [showEmailSuggestions, setShowEmailSuggestions] = useState(false);
 
-    /**
-     * On touch / narrow devices `date` and `datetime` fields swap
-     * react-datepicker's popup calendar for the platform's own picker — the
-     * popup is clipped by modals on a phone and its day cells are far below a
-     * comfortable tap target. Desktop rendering is untouched.
-     * See utils/nativeDateInput.js for the (identical) value contract.
-     */
-    const nativeDateInput = useNativeDateInput();
-
     /**
      * `colour` field popup picker: dismiss the popover when the user clicks
      * anywhere outside it or presses Escape. Picking a colour inside the
@@ -3147,16 +3137,22 @@ function Field({
                     }
                     autoComplete="off"
                 />
-                {value && (
-                    <button
-                        type="button"
-                        aria-label="Clear date"
-                        className={styles.nativeDateClear}
-                        onClick={() => onChangeDate(null, settings.id)}
-                    >
-                        <X size={16} />
-                    </button>
-                )}
+                {/* 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>
         );
     };
@@ -3165,7 +3161,11 @@ function Field({
         switch (settings.type) {
             case 'date':
             case 'datetime':
-                if (nativeDateInput) {
+                // 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');
                 }
 

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

@@ -1837,9 +1837,19 @@ input.nativeDateInput[type] {
 input.nativeDateFilled[type] {
     padding-right: 2.75rem;
 
-    &::-webkit-calendar-picker-indicator {
-        -webkit-appearance: none;
-        display: none;
+    /* 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;
     }
 }
 
@@ -1848,6 +1858,11 @@ input.nativeDateFilled[type] {
     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;
@@ -1867,3 +1882,10 @@ input.nativeDateFilled[type] {
         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/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,