@visns-studio/visns-components 6.4.1 → 6.4.3

package/package.json

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

package/src/components/DataGrid.jsx

@@ -3645,7 +3645,13 @@ const DataGrid = forwardRef(
                             defaultFlex: 1,
                             sortable: sortable,
                             link: column.link ?? {},
-                            minWidth: column.minWidth ?? undefined,
+                            // Floor every column: the datagrid's flex solver
+                            // hands the last unclamped columns the leftover
+                            // width VERBATIM, which goes negative once the
+                            // clamped columns exceed the container (narrow
+                            // screens) — columns then render a few px wide
+                            // with no horizontal scrollbar ever appearing.
+                            minWidth: column.minWidth ?? 80,
                             maxWidth: column.maxWidth ?? undefined,
                             textAlign: column.textAlign ?? undefined,
                             textVerticalAlign:

package/src/components/Field.jsx

@@ -42,6 +42,11 @@ import VisnsAutocomplete from './Autocomplete';
 import VisnsDropZone from './DropZone';
 import MultiCheckbox from './MultiCheckbox';
 import DatePickerPortal from './utils/DatePickerPortal';
+import {
+    fromNativeInputValue,
+    toNativeInputValue,
+    useNativeDateInput,
+} from './utils/nativeDateInput';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -166,6 +171,15 @@ 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
@@ -3093,12 +3107,70 @@ 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"
+                />
+                {value && (
+                    <button
+                        type="button"
+                        aria-label="Clear date"
+                        className={styles.nativeDateClear}
+                        onClick={() => onChangeDate(null, settings.id)}
+                    >
+                        <X size={16} />
+                    </button>
+                )}
+            </div>
+        );
+    };
+
     const renderAdditionalContainer = () => {
         switch (settings.type) {
             case 'date':
             case 'datetime':
+                if (nativeDateInput) {
+                    return renderNativeDateInput(settings.type === 'datetime');
+                }
+
                 return (
-                    <DatePickerPortal 
+                    <DatePickerPortal
                         containerRef={containerRef}
                         centerScreen={settings.centerScreen}
                         modalContext={settings.modalContext}

package/src/components/Navigation.jsx

@@ -734,6 +734,14 @@ function Navigation({
                     </nav>
                 </div>
             </aside>
+            {isOpen ? (
+                <button
+                    type="button"
+                    className={styles['drawer-backdrop']}
+                    aria-label="Close menu"
+                    onClick={() => setOpen(false)}
+                />
+            ) : null}
             <main className={styles.content}>
                 <div className={styles['content-header']}>
                     {navConfig.search?.enable === true && (

package/src/components/TableFilter.jsx

@@ -13,6 +13,7 @@ function TableFilter({
     const [visibleChildren, setVisibleChildren] = useState({});
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const isFirstRender = useRef(true);
+    const listRef = useRef(null);
 
     // Initialize visible children for all parent categories and set checkbox function availability
     useEffect(() => {
@@ -500,6 +501,10 @@ function TableFilter({
         setMobileMenuOpen(false);
     };
 
+    // `data-active` below marks the selected top-level item. It is what the
+    // mobile tab strip scrolls into view on mount; `filterTable` destructures
+    // only the dataset keys it names, so the extra attribute is inert to the
+    // click handling and to every existing consumer.
     const renderContent = (d) => {
         // Determine if this is a parent category
         const isParent = d.isParent === true;
@@ -519,6 +524,7 @@ function TableFilter({
                         data-filtertype="parent"
                         data-url={d.url || ''}
                         data-value={d.hasOwnProperty('value') ? d.value : ''}
+                        data-active={d.show === true ? 'true' : undefined}
                         onClick={filterTable}
                     >
                         {d.label}
@@ -534,6 +540,7 @@ function TableFilter({
                         data-filtertype="parent"
                         data-url={d.url || ''}
                         data-value={d.hasOwnProperty('value') ? d.value : ''}
+                        data-active={d.show === true ? 'true' : undefined}
                         onClick={filterTable}
                         className={parentClass}
                     >
@@ -616,21 +623,68 @@ function TableFilter({
 
     const activeLabel = activeFilter ? activeFilter.label : 'Select Option';
 
+    // A rail whose items are a flat list of tabs renders on narrow viewports as
+    // a single-row strip that pans with a thumb, instead of collapsing behind a
+    // hamburger of its own — the app shell already owns one, and the collapse
+    // cost two taps per switch. A rail with expandable parents keeps the
+    // collapse: a nested submenu has no single row to pan.
+    //
+    // Nothing here runs above the strip's breakpoint (759px, below): the class
+    // is only styled inside that media query, and `.mobileToggle` is
+    // `display: none` at every width above it, so leaving it out of the tree
+    // for a flat rail is invisible on desktop and tablet.
+    const isFlatStrip = !(filters || []).some(
+        (filter) =>
+            filter &&
+            filter.isParent === true &&
+            Array.isArray(filter.children) &&
+            filter.children.length > 0
+    );
+
+    const activeId = activeFilter ? activeFilter.id : null;
+
+    // Bring the selected tab into view when the strip is wider than its box.
+    // Guarded on overflow so this never scrolls anything at widths where the
+    // rail is a plain vertical list.
+    useEffect(() => {
+        if (!isFlatStrip) return;
+
+        const list = listRef.current;
+
+        if (!list || typeof list.querySelector !== 'function') return;
+        if (list.scrollWidth <= list.clientWidth) return;
+
+        const active = list.querySelector('[data-active="true"]');
+
+        if (active && typeof active.scrollIntoView === 'function') {
+            active.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        }
+    }, [isFlatStrip, activeId]);
+
     return (
-        <div className={styles.tableFilterContainer}>
-            <div className={styles.mobileToggle} onClick={toggleMobileMenu}>
-                <span className={styles.activeFilterLabel}>{activeLabel}</span>
-                <span
-                    className={`${styles.mobileMenuIcon} ${
-                        mobileMenuOpen ? styles.open : ''
-                    }`}
-                >
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </span>
-            </div>
+        <div
+            className={`${styles.tableFilterContainer} ${
+                isFlatStrip ? styles.flatFilter : ''
+            }`}
+        >
+            {!isFlatStrip && (
+                <div className={styles.mobileToggle} onClick={toggleMobileMenu}>
+                    <span className={styles.activeFilterLabel}>
+                        {activeLabel}
+                    </span>
+                    <span
+                        className={`${styles.mobileMenuIcon} ${
+                            mobileMenuOpen ? styles.open : ''
+                        }`}
+                    >
+                        <span></span>
+                        <span></span>
+                        <span></span>
+                    </span>
+                </div>
+            )}
             <ul
+                ref={listRef}
                 className={`${styles.tableFilter} ${
                     mobileMenuOpen ? styles.mobileOpen : ''
                 }`}

package/src/components/columns/ColumnRenderers.jsx

@@ -282,8 +282,10 @@ export const renderDateColumn = ({
         name: column.id,
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
-        defaultWidth: 120, // Set default width for date columns
-        minWidth: 120, // Set minimum width for date columns
+        // Config-first: these sit after the commonProps spread, so a literal
+        // here silently discards an explicit column.minWidth from the app.
+        defaultWidth: column.defaultWidth ?? 120,
+        minWidth: column.minWidth ?? 120,
         render: ({ data }) => {
             if (
                 data &&
@@ -343,8 +345,9 @@ export const renderDateTimeColumn = ({
         name: column.id,
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
-        defaultWidth: 160, // Set default width for datetime columns
-        minWidth: 160, // Set minimum width for datetime columns
+        // Config-first — see renderDateColumn.
+        defaultWidth: column.defaultWidth ?? 160,
+        minWidth: column.minWidth ?? 160,
         render: ({ data }) => {
             if (
                 data &&
@@ -2530,8 +2533,9 @@ export const renderDateRangeColumn = ({
         name: `${column.id[0]}.${column.id[1]}.`,
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
-        defaultWidth: 200, // Set default width for daterange columns
-        minWidth: 200, // Set minimum width for daterange columns
+        // Config-first — see renderDateColumn.
+        defaultWidth: column.defaultWidth ?? 200,
+        minWidth: column.minWidth ?? 200,
         render: ({ data }) => {
             let value = '';
 

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

@@ -1799,3 +1799,71 @@ 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;
+
+    &::-webkit-calendar-picker-indicator {
+        -webkit-appearance: none;
+        display: none;
+    }
+}
+
+.nativeDateClear {
+    position: absolute;
+    top: 50%;
+    right: 0.4rem;
+    transform: translateY(-50%);
+    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;
+    }
+}

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

@@ -952,6 +952,12 @@
     }
 }
 
+/* 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 {
+    display: none;
+}
+
 @media (max-width: 1024px) {
     .hwrap {
         grid-template-columns: auto 1fr auto;
@@ -970,7 +976,10 @@
     }
 
     .aside--cms {
-        width: 100%;
+        /* A panel, not a full-screen sheet: the page stays visible behind
+           the backdrop, which gives tap-outside-to-close and stops a short
+           nav list reading as a vast empty void. */
+        width: min(84vw, 320px);
         /* The content header is sticky at z-index 995, so the drawer sits
            below it: start the drawer under the 50px header instead of
            letting the header paint over the drawer's top row. This also
@@ -981,12 +990,45 @@
         transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
         will-change: transform;
         z-index: 600;
+        box-shadow: 24px 0 48px rgba(0, 0, 0, 0.35);
 
         /* The header already anchors the screen; the drawer's own logo
            plate would render as a second 50px brand row. */
         .logo {
             display: none;
         }
+
+        /* Phone-sized touch targets: the desktop rail's compact rows are
+           finger-hostile at arm's length on site. */
+        .app-nav .nav-item {
+            padding: 0.2rem 0.65rem;
+
+            a {
+                padding: 0.85rem 1rem;
+                font-size: 1rem;
+                line-height: 1.3;
+            }
+
+            svg {
+                width: 20px;
+                height: 20px;
+            }
+        }
+    }
+
+    .drawer-backdrop {
+        display: block;
+        position: fixed;
+        top: 50px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.45);
+        border: none;
+        margin: 0;
+        padding: 0;
+        appearance: none;
+        z-index: 599;
     }
 
     .aside--cms--open {

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

@@ -298,4 +298,104 @@
     .collapsibleMenu {
         border-left: none;
     }
+
+    /* ---------------------------------------------------------------------
+       Flat rails: a one-row tab strip instead of the hamburger.
+
+       `.flatFilter` is set by TableFilter on any rail whose items have no
+       expandable children, and exists only inside this media query — above
+       759px the class matches nothing and the rail is byte-for-byte the
+       vertical list it has always been.
+
+       The strip pans horizontally with a thumb and marks the selection with a
+       3px accent edge rather than the full brand fill: on a phone the fill was
+       a solid band the width of the screen, which read as a header rather than
+       as one tab out of several.
+
+       These selectors are deliberately longer than the ones they override —
+       `.subactive` and `.activetab button` carry `!important`, so only a more
+       specific `!important` can take the fill back off. --------------------- */
+
+    .flatFilter .tableFilter,
+    .flatFilter .tableFilter.mobileOpen {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        gap: var(--spacing-xs, 0.25rem);
+        max-height: none;
+        overflow-x: auto;
+        overflow-y: hidden;
+        /* Momentum panning on iOS. */
+        -webkit-overflow-scrolling: touch;
+        /* The scrollbar is noise on a two-tab strip; the overflowing tab is
+           the affordance. */
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+        /* The dropdown drew itself a card. A strip sits on the panel it is
+           already inside. */
+        padding: 0;
+        border: none;
+        border-radius: 0;
+        margin-bottom: 0;
+        /* No baseline rule under the row: every surface this rail sits on
+           (`.grid__subnav` in Profile, GenericIndex and GenericDetail) already
+           draws its own border a few pixels below, and a second hairline
+           alongside it read as a mistake. The 3px edge under the selected tab
+           is the whole marker. */
+        box-shadow: none;
+    }
+
+    .flatFilter .tableFilter::-webkit-scrollbar {
+        display: none;
+    }
+
+    .flatFilter .tableFilter > li {
+        flex: 0 0 auto;
+        margin: 0;
+        border-bottom: none;
+    }
+
+    /* Inactive tabs are muted labels, not tinted blocks. `white-space: nowrap`
+       is what keeps the row one row: without it a two-word tab wraps and the
+       strip grows a second line instead of overflowing. */
+    .flatFilter .tableFilter > li > .link,
+    .flatFilter .tableFilter > li > .parentLink,
+    .flatFilter .tableFilter > li > button {
+        display: block;
+        white-space: nowrap;
+        padding: 0.75rem var(--spacing-md, 1rem);
+        border: none;
+        border-bottom: 3px solid transparent;
+        border-radius: 0;
+        background: none !important;
+        color: var(--paragraph-color, #6b7280) !important;
+        font-size: var(--font-size-sm, 0.8125rem);
+        font-weight: var(--font-weight-medium, 500);
+        cursor: pointer;
+    }
+
+    /* The selected tab. `--primary-color` first because it is what the rail
+       already fills the active item with everywhere else; `--accent-color`
+       covers apps that only declare that one, and the literal keeps the edge
+       visible in an app that declares neither. */
+    .flatFilter .tableFilter > li > .subactive,
+    .flatFilter .tableFilter > li.activetab > button {
+        background: none !important;
+        color: var(--heading-color, #111) !important;
+        font-weight: var(--font-weight-semibold, 600);
+        border-bottom-color: var(
+            --primary-color,
+            var(--accent-color, #0076c0)
+        );
+    }
+
+    /* Touch devices keep :hover stuck on the last tap, which on the old rule
+       tinted whichever tab was tapped last and made it compete with the
+       selected one. */
+    .flatFilter .tableFilter > li > .link:hover,
+    .flatFilter .tableFilter > li > .parentLink:hover,
+    .flatFilter .tableFilter > li > button:hover {
+        background: none !important;
+        color: var(--heading-color, #111) !important;
+    }
 }

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;