@visns-studio/visns-components 6.4.3 → 6.5.0

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/Navigation.module.scss

@@ -870,6 +870,140 @@
     }
 }
 
+/* ----------------------------------------------------------------------------
+   Sidebar-owned account actions — opt-in
+   ----------------------------------------------------------------------------
+   `navConfig.actionsPlacement: 'sidebar'` moves the notification bell, the
+   profile link, the logout button and anything else a project mounts as a
+   "setting" out of the 50px content header and pins them to the bottom of the
+   rail, which was empty space. The page then gets the full height of the
+   glass. Nothing below applies unless the consumer publishes that key.
+   ------------------------------------------------------------------------- */
+.aside--cms--rail {
+    /* Three bands: the logo plate, the nav list that takes what's left and
+       scrolls, and the actions pinned under it. */
+    display: flex;
+    flex-direction: column;
+
+    /* The rail clips itself so a long nav list can't spill; the panels that
+       open from the action rows — the notification list, the account
+       switcher — would be cut off by that. The nav list keeps its own
+       scroll container, so nothing else depended on this. */
+    overflow: visible;
+
+    .awrap {
+        /* `min-height: 0` or the nav list refuses to shrink below its
+           content and pushes the actions off the bottom of the rail. */
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+
+        .navwrap {
+            flex: 1 1 auto;
+            min-height: 0;
+            /* The fixed `calc(100vh - 50px)` assumed the rail's only other
+               band was the logo plate. The column measures it now. */
+            max-height: none;
+        }
+    }
+}
+
+.rail-actions {
+    flex: 0 0 auto;
+    position: relative;
+    /* Above the content header's sticky 995 so a panel opening from a row
+       is never painted underneath it. */
+    z-index: 996;
+    /* Reads as a footer to the list rather than one more entry in it. */
+    border-top: 1px solid rgba(var(--tertiary-color-rgb), 0.14);
+    padding: var(--padding) 0;
+
+    > ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        > li {
+            /* Same gutter as `.app-nav .nav-item`, so the rows line up with
+               the navigation above them to the pixel. */
+            width: 100%;
+            padding: 0.15rem 0.45rem;
+            box-sizing: border-box;
+            /* The positioning context for the panels a mounted component
+               opens — they anchor to the nearest positioned ancestor. */
+            position: relative;
+        }
+
+        // A row wears the rail's own language: the nav item's padding,
+        // radius and hover tint. Depth-limited on purpose — the panels these
+        // components open live deeper inside the same `li` and must keep
+        // their own styling.
+        > li > a,
+        > li > button,
+        > li > div > a,
+        > li > div > button {
+            width: 100%;
+            display: flex;
+            flex-wrap: nowrap;
+            align-items: center;
+            gap: 0.55rem;
+            box-sizing: border-box;
+            padding: 0.5rem 1rem;
+            margin: 0;
+            line-height: 1.25;
+            text-align: left;
+            text-decoration: none;
+            color: var(--tertiary-color);
+            background: var(--nav-bg);
+            border: none;
+            outline: none;
+            border-radius: var(--br);
+            font: inherit;
+            cursor: pointer;
+            appearance: none;
+            transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+            svg {
+                flex: 0 0 auto;
+                color: var(--secondary-color);
+            }
+        }
+
+        > li > a:hover,
+        > li > button:hover,
+        > li > div > a:hover,
+        > li > div > button:hover,
+        > li > a.active {
+            background: rgba(var(--tertiary-color-rgb), 0.05);
+            color: var(--secondary-color);
+        }
+
+        // Components mounted here wrap their trigger in a div of their own
+        // (`.notificationContainer`, the switcher's wrapper). Left as an
+        // inline-ish block it would collapse the row.
+        > li > div {
+            width: 100%;
+            position: relative;
+        }
+
+        // A mounted component draws its own trigger and takes no label from
+        // us, so the row publishes one as `--nav-action-label` and the
+        // trigger wears it. Empty by default, so a component that already
+        // labels itself is untouched. (The notification bell sets its own
+        // fallback text — see Notification.module.scss.)
+        > li > div > a::after {
+            content: var(--nav-action-label, '');
+            flex: 1 1 auto;
+            min-width: 0;
+            text-align: left;
+        }
+    }
+}
+
 .content {
     margin-left: var(--sidebar-width);
     flex-grow: 1;
@@ -952,6 +1086,21 @@
     }
 }
 
+/* With the actions in the rail and no search field configured, the only
+   thing left in the header is the drawer's hamburger — which exists below
+   1024px and nowhere else. The bar stays in the markup so the drawer keeps
+   the 50px anchor it offsets itself by, and desktop simply drops it. */
+.content .content-header--mobile {
+    display: none;
+}
+
+/* Nothing sits above the page any more, so the main container is the
+   viewport. Without this it is only as tall as its content and the page
+   background stops short on a short screen. */
+.content--full {
+    min-height: 100vh;
+}
+
 /* Rendered only while the mobile drawer is open; the phone block below
    displays it. Desktop never opens the drawer, but the guard costs nothing. */
 .drawer-backdrop {
@@ -1016,6 +1165,41 @@
         }
     }
 
+    /* The account actions sit at the foot of the drawer, above the home
+       indicator, at the same touch size as the nav rows above them. */
+    .rail-actions {
+        padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom, 0px));
+
+        > ul > li {
+            padding: 0.2rem 0.65rem;
+        }
+
+        // Depth-limited: the panels these rows open live deeper in the same
+        // `li` and size their own icons.
+        > ul > li > a,
+        > ul > li > button,
+        > ul > li > div > a,
+        > ul > li > div > button {
+            padding: 0.85rem 1rem;
+            font-size: 1rem;
+            line-height: 1.3;
+
+            > svg {
+                width: 20px;
+                height: 20px;
+            }
+        }
+    }
+
+    .content .content-header--mobile {
+        display: flex;
+    }
+
+    .content--full {
+        /* The 50px bar is still there below this width. */
+        min-height: calc(100vh - 50px);
+    }
+
     .drawer-backdrop {
         display: block;
         position: fixed;