@visns-studio/visns-components 6.4.3 → 6.5.0

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.5.0",
     "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/Navigation.jsx

@@ -50,6 +50,32 @@ const NAV_ICONS = {
     users: Users,
 };
 
+// The icons an account action can wear, named by a settings entry's `icon`
+// key. Module scope because two surfaces read it now: the header's action
+// chips and — when a project opts in — the sidebar's pinned action rows.
+const SETTING_ICONS = {
+    bug: Bug,
+    calendar: Calendar,
+    draft: FileText,
+    image: Image,
+    peopleGroup: Users,
+    person: User,
+    phone: Phone,
+    shield: Shield,
+    signOut: LogOut,
+    settings: Settings,
+    search: Search,
+    userSearch: UserSearch,
+    clipboardCheck: ClipboardCheck,
+};
+
+// A rail row carries a visible label. In the header these actions were icon
+// chips with a tooltip, so a settings entry is allowed to have no label of
+// its own — the bell in particular usually doesn't.
+const RAIL_ACTION_LABELS = {
+    notifications: 'Notifications',
+};
+
 const SearchComponent = ({
     navigate,
     search,
@@ -270,21 +296,7 @@ function Navigation({
     };
 
     const renderSetting = (n) => {
-        const iconComponents = {
-            bug: Bug,
-            calendar: Calendar,
-            draft: FileText,
-            image: Image,
-            peopleGroup: Users,
-            person: User,
-            phone: Phone,
-            shield: Shield,
-            signOut: LogOut,
-            settings: Settings,
-            search: Search,
-            userSearch: UserSearch,
-            clipboardCheck: ClipboardCheck,
-        };
+        const iconComponents = SETTING_ICONS;
 
         // Check if the setting's URL matches the current page
         const isActive = n.url && n.url === `/${currentPage}`;
@@ -356,6 +368,93 @@ function Navigation({
         }
     };
 
+    /**
+     * The same account actions, drawn as rows for the sidebar rail.
+     *
+     * Opt-in only — see `actionsInSidebar` below. Every action keeps the
+     * behaviour it had in the header: the same logout handler, the same
+     * links, the same mounted components (notifications, account switcher),
+     * so nothing here re-implements a chip. What changes is the shape: a
+     * full-width row wearing the rail's own language, icon then label, since
+     * a 36px chip in a 216px column reads as a stray button.
+     *
+     * Components mounted here draw their own trigger and can't be handed a
+     * label, so the row publishes one as `--nav-action-label` for their
+     * stylesheet to place. See Notification.module.scss / SwitchAccount.
+     */
+    const renderRailSetting = (n) => {
+        const isActive = n.url && n.url === `/${currentPage}`;
+        const activeClass = isActive ? styles.active : '';
+        const label = n.label || RAIL_ACTION_LABELS[n.id] || '';
+        // A CSS string, quoted and escaped, for `content`.
+        const labelVar = { '--nav-action-label': JSON.stringify(label) };
+        const IconComponent = SETTING_ICONS[n.icon];
+
+        if (n.id === 'notifications') {
+            return (
+                <li style={labelVar}>
+                    <Notification setSystemAuth={setSystemAuth} />
+                </li>
+            );
+        } else if (n.id === 'businessCardOcr') {
+            return (
+                <li>
+                    <button
+                        onClick={() => setShowBusinessCardOcr(true)}
+                        className={activeClass}
+                        type="button"
+                    >
+                        <CreditCard size={19} strokeWidth={2} />
+                        <span>{label}</span>
+                    </button>
+                </li>
+            );
+        } else if (n.id === 'switchAccount') {
+            return (
+                <li style={labelVar}>
+                    <SwitchAccount
+                        setSystemAuth={setSystemAuth}
+                        setting={n}
+                        userProfile={userProfile}
+                    />
+                </li>
+            );
+        } else if (n.id === 'logout') {
+            return (
+                <li>
+                    <button
+                        onClick={handleLogout}
+                        className={activeClass}
+                        type="button"
+                    >
+                        {IconComponent && (
+                            <IconComponent size={19} strokeWidth={2} />
+                        )}
+                        <span>{label}</span>
+                    </button>
+                </li>
+            );
+        }
+
+        return (
+            <li>
+                <Link
+                    to={n.url}
+                    className={`${activeClass}`}
+                    target={n.target ? n.target : '_self'}
+                    // The rail is the mobile drawer below 1024px; navigating
+                    // from it has to close the drawer, as the nav list does.
+                    onClick={() => setOpen(false)}
+                >
+                    {IconComponent && (
+                        <IconComponent size={19} strokeWidth={2} />
+                    )}
+                    <span>{label}</span>
+                </Link>
+            </li>
+        );
+    };
+
     const [, setActiveDropdown] = useState(null); // We only need the setter
     const navWrapRef = useRef(null);
 
@@ -704,14 +803,60 @@ function Navigation({
         };
     }, [debugIcons]);
 
+    /**
+     * `navConfig.actionsPlacement === 'sidebar'` moves the account actions
+     * out of the 50px content header and pins them to the bottom of the
+     * rail, which is otherwise empty space, so the page gets the whole
+     * height of the glass. Every project that publishes nothing — or
+     * 'header' — renders exactly what it rendered before.
+     */
+    const actionsInSidebar =
+        (layout === 'simple' || layout === 'cms') &&
+        navConfig.actionsPlacement === 'sidebar';
+    const searchEnabled = navConfig.search?.enable === true;
+    /**
+     * With the actions gone the header holds a search field the project may
+     * not have enabled and a hamburger that only exists below 1024px. In
+     * that case it stays in the markup — the drawer is anchored under it and
+     * offsets itself by its 50px — but desktop drops it, and the main
+     * container starts at the top of the viewport.
+     */
+    const headerIsMobileOnly = actionsInSidebar && !searchEnabled;
+
+    // Built only when a project asks for it, so the default path does no
+    // work it then throws away.
+    const railActions = !actionsInSidebar ? null : (
+        <div
+            className={styles['rail-actions']}
+            /* Read by the stylesheets of the components mounted in here —
+               the notification panel and the account switcher list both
+               anchor to a header chip by default, which from a rail at the
+               left edge would open off-screen. */
+            data-nav-actions="sidebar"
+            ref={actionItemsRef}
+        >
+            <ul>
+                {navData.settings.map((setting, settingKey) =>
+                    setting.hidden !== true && setting.permission === true ? (
+                        <React.Fragment key={`rail-setting-${settingKey}`}>
+                            {renderRailSetting(setting)}
+                        </React.Fragment>
+                    ) : null
+                )}
+            </ul>
+        </div>
+    );
+
     return layout === 'simple' || layout === 'cms' ? (
         <div className={styles.cwrap}>
             <aside
-                className={
-                    isOpen
-                        ? `${styles['aside--cms']} ${styles['aside--cms--open']}`
-                        : `${styles['aside--cms']}`
-                }
+                className={[
+                    styles['aside--cms'],
+                    isOpen ? styles['aside--cms--open'] : '',
+                    actionsInSidebar ? styles['aside--cms--rail'] : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ')}
             >
                 <div className={styles.logo}>
                     <Link to="/">
@@ -733,6 +878,7 @@ function Navigation({
                         </ul>
                     </nav>
                 </div>
+                {railActions}
             </aside>
             {isOpen ? (
                 <button
@@ -742,8 +888,20 @@ function Navigation({
                     onClick={() => setOpen(false)}
                 />
             ) : null}
-            <main className={styles.content}>
-                <div className={styles['content-header']}>
+            <main
+                className={
+                    headerIsMobileOnly
+                        ? `${styles.content} ${styles['content--full']}`
+                        : styles.content
+                }
+            >
+                <div
+                    className={
+                        headerIsMobileOnly
+                            ? `${styles['content-header']} ${styles['content-header--mobile']}`
+                            : styles['content-header']
+                    }
+                >
                     {navConfig.search?.enable === true && (
                         <SearchComponent
                             navigate={navigate}
@@ -774,25 +932,27 @@ function Navigation({
                             <span></span>
                         </button>
                     </div>
-                    <div
-                        className={`${styles['hactions-alternate']} ${
-                            debugIcons ? styles['debug-icons'] : ''
-                        }`}
-                        ref={actionItemsRef}
-                    >
-                        <ul>
-                            {navData.settings.map((setting, settingKey) =>
-                                setting.hidden !== true &&
-                                setting.permission === true ? (
-                                    <React.Fragment
-                                        key={`setting-${settingKey}`}
-                                    >
-                                        {renderSetting(setting)}
-                                    </React.Fragment>
-                                ) : null
-                            )}
-                        </ul>
-                    </div>
+                    {actionsInSidebar ? null : (
+                        <div
+                            className={`${styles['hactions-alternate']} ${
+                                debugIcons ? styles['debug-icons'] : ''
+                            }`}
+                            ref={actionItemsRef}
+                        >
+                            <ul>
+                                {navData.settings.map((setting, settingKey) =>
+                                    setting.hidden !== true &&
+                                    setting.permission === true ? (
+                                        <React.Fragment
+                                            key={`setting-${settingKey}`}
+                                        >
+                                            {renderSetting(setting)}
+                                        </React.Fragment>
+                                    ) : null
+                                )}
+                            </ul>
+                        </div>
+                    )}
                 </div>
                 {children}
             </main>