@visns-studio/visns-components 6.17.1 → 6.20.0

package/src/components/DropZone.jsx

@@ -52,7 +52,10 @@ const getFileIcon = (extension) => {
     return File;
 };
 
-function VisnsDropZone({ fetchData, files, settings, url, urlKey, deleteUrl, entityData = {}, routeParams = {}, dataKey }) {
+// `settings` is optional in every documented usage but had no default, and
+// the URL resolver reads `settings.url` unguarded - so a consumer that passes
+// only `url` crashed on mount rather than using the url it passed.
+function VisnsDropZone({ fetchData, files, settings = {}, url, urlKey, deleteUrl, entityData = {}, routeParams = {}, dataKey }) {
     console.log('DropZone: Component initialized with props:', {
         hasFetchData: typeof fetchData === 'function',
         files,

package/src/components/Form.jsx

@@ -156,6 +156,13 @@ function Form({
     fetchTable,
     mapbox,
     modalOpen,
+    /**
+     * `{ url, key }` for the detail page of a record created by this form,
+     * derived by <DataGrid> from the columns' own `link` config. Only
+     * consulted when `formSettings.openOnCreate` is set, and only as a
+     * fallback: an explicit `openOnCreate: { url, key }` wins.
+     */
+    openOnCreateLink,
     paramValue,
     style,
     type,
@@ -163,8 +170,65 @@ function Form({
     userProfile,
     bulkEditMode = false,
     bulkEditGroupData = null,
+    /**
+     * Hands the parent this form's guarded close.
+     *
+     * The dialog shell owns the backdrop and the Escape key, but only the form
+     * knows whether anything has been typed. Rather than lift the dirty flag
+     * up (and re-render the form on every keystroke), the form publishes the
+     * one function that knows what to do.
+     */
+    registerClose,
 }) {
     const navigate = useNavigate();
+
+    /**
+     * Has the user typed anything since this form opened?
+     *
+     * A ref, not state: nothing renders differently because the form is dirty,
+     * and making it state would re-render the whole form on the first
+     * keystroke in every field.
+     *
+     * It exists for one reason — closing a half-filled form by clicking the
+     * backdrop, or pressing Escape, silently discarded the work. That is the
+     * single most common way a person loses data in a CRM, and it is entirely
+     * preventable.
+     */
+    const dirtyRef = useRef(false);
+
+    const markDirty = useCallback(() => {
+        dirtyRef.current = true;
+    }, []);
+
+    /**
+     * Close, asking first if there is anything to lose.
+     *
+     * `window.confirm` deliberately: it is synchronous, it cannot be missed,
+     * and it works identically from the backdrop, the Escape key and the
+     * Cancel button. A prettier in-app dialog would be a second modal stacked
+     * on the first, which is its own problem.
+     */
+    const guardedClose = useCallback(() => {
+        if (
+            dirtyRef.current &&
+            typeof window !== 'undefined' &&
+            !window.confirm(
+                'You have unsaved changes. Close this form and discard them?'
+            )
+        ) {
+            return;
+        }
+
+        dirtyRef.current = false;
+        closeModal?.();
+    }, [closeModal]);
+
+    useEffect(() => {
+        registerClose?.(guardedClose);
+
+        return () => registerClose?.(null);
+    }, [registerClose, guardedClose]);
+
     const [fetchTrigger, setFetchTrigger] = useState(false);
     const [formData, setFormData] = useState({});
     const [inputClass, setInputClass] = useState({});
@@ -230,6 +294,8 @@ function Form({
     };
 
     const handleChange = (e) => {
+        markDirty();
+
         const id = e.target.dataset.jsonkey || e.target.dataset.name;
         const value = e.target.value;
         const parent = e.target.dataset.parent ? e.target.dataset.parent : '';
@@ -950,13 +1016,41 @@ function Form({
                 : address
             : text;
         const address2 = '';
-        const suburb = context[1]?.text || '';
-        const postcode = context[0]?.text || '';
 
-        const [state, country] =
-            context.length === 5
-                ? [context[3]?.text, context[4]?.text]
-                : [context[2]?.text, context[3]?.text];
+        /*
+         * Mapbox's `context` is a list, not a record: its entries vary with
+         * the kind of place. A POI carries one more than a street address, an
+         * address with no suburb one fewer. Reading it by position therefore
+         * filed the state under "suburb" (and vice versa) on anything but the
+         * shape the indices were written against. Each entry does carry a
+         * typed `id` — `postcode.123`, `region.456` — so match on that.
+         */
+        const contexts = Array.isArray(context) ? context : [];
+        const contextOf = (...types) => {
+            for (const type of types) {
+                const found = contexts.find(
+                    (entry) =>
+                        typeof entry?.id === 'string' &&
+                        entry.id.split('.')[0] === type
+                );
+
+                if (found) {
+                    return found;
+                }
+            }
+
+            return undefined;
+        };
+
+        const postcode = contextOf('postcode')?.text || '';
+        // `locality` is the suburb; `place` is the city it sits in. Australian
+        // addresses carry both, and the suburb is the one on the envelope.
+        const suburb = contextOf('locality', 'place')?.text || '';
+        const region = contextOf('region');
+        const state = region?.text || '';
+        // ISO 3166-2, e.g. "AU-SA" — the last segment is the state's initials.
+        const stateInitials = region?.short_code?.split('-').pop() || '';
+        const country = contextOf('country')?.text || '';
 
         // Determine the prefix based on the id parameter
         let prefix = '';
@@ -970,6 +1064,11 @@ function Form({
 
         // Create the formDataUpdate object with the appropriate field names
         const formDataUpdate = {
+            // The field that was typed into always gets the street line, even
+            // if it is not named `<prefix>address1` and the prefix guess above
+            // came out empty — otherwise the box the user is looking at is the
+            // one field the pick does not fill.
+            [id]: address1,
             [`${prefix}address1`]: address1,
             [`${prefix}address2`]: address2,
             [`${prefix}suburb`]: suburb,
@@ -978,6 +1077,47 @@ function Form({
             [`${prefix}country`]: country,
         };
 
+        /*
+         * A form that stores the state as a foreign key (`state_id`, an
+         * ajax dropdown) cannot use the name — and being required, it left
+         * the form unsaveable after a pick, which is how "the address
+         * autocomplete doesn't work" looked from the outside. The options
+         * live inside that <Field>, so resolve the id from the same endpoint
+         * it reads, matching on the state's name or its initials.
+         */
+        const stateIdField = formSettings.fields?.find(
+            (item) => item.id === `${prefix}state_id`
+        );
+
+        if (stateIdField?.url && (state || stateInitials)) {
+            const normalise = (value) =>
+                String(value ?? '')
+                    .trim()
+                    .toLowerCase();
+
+            CustomFetch(stateIdField.url, 'POST', {}, (result) => {
+                const options = Array.isArray(result?.data) ? result.data : [];
+                const match =
+                    options.find(
+                        (option) => normalise(option.label) === normalise(state)
+                    ) ||
+                    (stateInitials
+                        ? options.find(
+                              (option) =>
+                                  normalise(option.label) ===
+                                  normalise(stateInitials)
+                          )
+                        : undefined);
+
+                if (match) {
+                    setFormData((prevState) => ({
+                        ...prevState,
+                        [stateIdField.id]: match.id,
+                    }));
+                }
+            });
+        }
+
         // If same_address is true and we're updating the primary address,
         // also update the postal address fields
         if (formData.same_address === true && id === 'address1') {
@@ -2316,6 +2456,71 @@ function Form({
                                 );
                             }
 
+                            /**
+                             * Open a just-created record instead of dropping
+                             * the user back on the list.
+                             *
+                             * Creating a customer from the index used to leave
+                             * you looking at a refreshed table, with the record
+                             * you just filled in somewhere on page four — so
+                             * the next thing anyone did was search for it. A
+                             * view opts in with `form.openOnCreate`; without
+                             * the flag nothing here runs and the old behaviour
+                             * stands.
+                             *
+                             * Creates only: an update already has you on the
+                             * record, and navigating out of it would be a
+                             * regression rather than a shortcut.
+                             */
+                            if (formType === 'create' && formSettings.openOnCreate) {
+                                const openOnCreate =
+                                    formSettings.openOnCreate === true
+                                        ? {}
+                                        : formSettings.openOnCreate;
+
+                                const detailUrl =
+                                    openOnCreate.url || openOnCreateLink?.url;
+                                const idKey =
+                                    openOnCreate.key ||
+                                    openOnCreateLink?.key ||
+                                    formSettings.primaryKey ||
+                                    'id';
+
+                                // The endpoints disagree on shape: some return
+                                // the saved record under `data`, some return
+                                // the id at the top level. Take the first that
+                                // actually carries one.
+                                const record = res.data.data;
+                                const newId =
+                                    (record && typeof record === 'object'
+                                        ? record[idKey] ?? record.id
+                                        : record) ??
+                                    res.data[idKey] ??
+                                    res.data.id;
+
+                                if (
+                                    detailUrl &&
+                                    newId != null &&
+                                    newId !== '' &&
+                                    typeof newId !== 'object'
+                                ) {
+                                    // The column links carry their own trailing
+                                    // slash (`"/customers/"`); an explicit url
+                                    // may not. Normalise rather than trust it.
+                                    navigate(
+                                        `${detailUrl.replace(
+                                            /\/+$/,
+                                            ''
+                                        )}/${newId}`
+                                    );
+                                } else if (detailUrl) {
+                                    console.warn(
+                                        'openOnCreate: the create response carried no record id, staying on the list.',
+                                        res.data
+                                    );
+                                }
+                            }
+
                             if (formSettings.redirect && res.data.data?.id) {
                                 navigate(
                                     `${formSettings.redirect}${res.data.data.id}`
@@ -3901,6 +4106,17 @@ function Form({
                                             <div
                                                 className={`${styles.formItem} ${styles.fwItem} ${styles.buttonContainer}`}
                                             >
+                                                <button
+                                                    className={styles.btnSecondary}
+                                                    onClick={(e) => {
+                                                        e.preventDefault();
+                                                        guardedClose();
+                                                    }}
+                                                    type="button"
+                                                    data-type="cancel"
+                                                >
+                                                    Cancel
+                                                </button>
                                                 <button
                                                     className={styles.btn}
                                                     onClick={handleSubmit}
@@ -3965,6 +4181,17 @@ function Form({
                                                 <div
                                                     className={`${styles.formItem} ${styles.fwItem} ${styles.buttonContainer}`}
                                                 >
+                                                    <button
+                                                        className={styles.btnSecondary}
+                                                        onClick={(e) => {
+                                                            e.preventDefault();
+                                                            guardedClose();
+                                                        }}
+                                                        type="button"
+                                                        data-type="cancel"
+                                                    >
+                                                        Cancel
+                                                    </button>
                                                     <button
                                                         className={styles.btn}
                                                         onClick={handleSubmit}

package/src/components/MultiSelect.jsx

@@ -350,12 +350,12 @@ function MultiSelect({
                             ? style.multi_select_height
                             : isTouchDevice()
                             ? '44px'
-                            : '50px', // Apple's recommended minimum touch target size
+                            : 'var(--field-height, 51px)', // Apple's recommended minimum touch target size
                     height: 'auto', // Allow height to grow with content
                 }),
                 valueContainer: (base) => ({
                     ...base,
-                    padding: '2px 8px',
+                    padding: '0 1rem',
                     display: 'flex',
                     alignItems: 'flex-start',
                     flexWrap: 'wrap',

package/src/components/Navigation.jsx

@@ -30,7 +30,7 @@ import CustomFetch from './Fetch';
 import Notification from './Notification';
 import SwitchAccount from './SwitchAccount';
 import BusinessCardOcr from './BusinessCardOcr';
-import { isNavActive } from './navActive';
+import { isNavActive, bestMatchingUrl, cleanUrl } from './navActive';
 import styles from './styles/Navigation.module.scss';
 
 // Opt-in icons for the sidebar (simple/cms) layouts: a nav entry names one
@@ -348,8 +348,9 @@ function Navigation({
     const renderSetting = (n) => {
         const iconComponents = SETTING_ICONS;
 
-        // Check if the setting's URL matches the current page
-        const isActive = n.url && n.url === `/${currentPage}`;
+        // Same rule as renderRailSetting: an item stays current on the pages
+        // beneath it, so the cog remains lit across /settings/*.
+        const isActive = n.url && isNavActive(n.url, [], currentPage);
 
         // Add active class if the setting is active
         const activeClass = isActive ? styles.active : '';
@@ -456,7 +457,13 @@ function Navigation({
      * stylesheet to place. See Notification.module.scss / SwitchAccount.
      */
     const renderRailSetting = (n) => {
-        const isActive = n.url && n.url === `/${currentPage}`;
+        // `isNavActive`, not an exact string match. The cog points at
+        // `/settings`, and the settings hub deep-links its panels as
+        // `/settings/integrations`, `/settings/vault` and so on — an equality
+        // test lights the cog on the hub's index and then drops it the moment
+        // you open a section, which is exactly when you most want to know
+        // where you are.
+        const isActive = n.url && isNavActive(n.url, [], currentPage);
         const activeClass = isActive ? styles.active : '';
         const label = actionLabel(n);
         // A CSS string, quoted and escaped, for `content`.
@@ -598,7 +605,11 @@ function Navigation({
                                         <Link
                                             to={child.url}
                                             className={
-                                                isNavActive(child.url, [], currentPage)
+                                                cleanUrl(child.url) ===
+                                                bestMatchingUrl(
+                                                    n.children.map((one) => one.url),
+                                                    currentPage
+                                                )
                                                     ? styles.active
                                                     : ''
                                             }
@@ -636,27 +647,36 @@ function Navigation({
         );
     };
 
+    /**
+     * Every permission this user holds, however they hold it.
+     *
+     * A UNION, and that is the whole point. This used to return direct
+     * permissions if there were ANY, and only fall back to role permissions
+     * otherwise — so granting one permission directly to a user who held
+     * nineteen through a role left them with exactly one, and every gated item
+     * in the navigation disappeared. Spatie treats the two as additive and so
+     * must this.
+     *
+     * It also read `roles[0]` alone, which silently dropped the permissions of
+     * every role after the first.
+     */
     const getUserPermissions = () => {
-        // First check if userProfile has direct permissions
-        if (
-            userProfile.permissions &&
-            Array.isArray(userProfile.permissions) &&
-            userProfile.permissions.length > 0
-        ) {
-            return userProfile.permissions.map((permission) => permission.name);
-        }
-
-        // Fall back to role-based permissions if direct permissions don't exist
-        if (
-            userProfile.roles &&
-            userProfile.roles.length > 0 &&
-            userProfile.roles[0].permissions.length > 0
-        ) {
-            return userProfile.roles[0].permissions.map(
-                (permission) => permission.name
-            );
-        }
-        return [];
+        const names = (list) =>
+            Array.isArray(list)
+                ? list
+                      .map((entry) =>
+                          typeof entry === 'string' ? entry : entry?.name
+                      )
+                      .filter(Boolean)
+                : [];
+
+        const direct = names(userProfile?.permissions);
+
+        const viaRoles = Array.isArray(userProfile?.roles)
+            ? userProfile.roles.flatMap((role) => names(role?.permissions))
+            : [];
+
+        return [...new Set([...direct, ...viaRoles])];
     };
 
     /**

package/src/components/TableFilter.jsx

@@ -1,6 +1,25 @@
 import React, { useState, useEffect, useRef } from 'react';
 import styles from './styles/TableFilter.module.scss';
 
+/**
+ * Is this rail a flat list of tabs, or a two-level menu?
+ *
+ * A flat rail is one row of labels, so it can be laid out as a horizontal tab
+ * strip; a rail with expandable parents has a submenu under each item and has
+ * no single row to pan. Exported because GenericDetail has to answer the same
+ * question one level up — it decides whether the tabs sit ABOVE the content
+ * panel or beside it, and that has to agree with what this component actually
+ * renders, or a nested rail ends up in a strip-shaped container.
+ */
+export const isFlatFilterList = (filters) =>
+    !(filters || []).some(
+        (filter) =>
+            filter &&
+            filter.isParent === true &&
+            Array.isArray(filter.children) &&
+            filter.children.length > 0
+    );
+
 function TableFilter({
     filters,
     setFilters,
@@ -14,9 +33,14 @@ function TableFilter({
     // treatment narrow viewports already get for a flat rail (see the
     // `.flatFilter` block in the stylesheet), promoted to an opt-in.
     //
-    // A vertical rail spends a fifth of the page on navigation, which pays for
-    // itself at seven tabs and does not at two. Pages say which they are; the
-    // default is unchanged.
+    // A vertical rail spends a fifth of the page on navigation. Detail pages
+    // now ask for the strip unconditionally (see GenericDetail); index pages
+    // and Profile still get the rail, so the default here is unchanged.
+    //
+    // In this variant the strip also carries real tab semantics — tablist /
+    // tab / aria-selected, one tab stop for the whole strip, and arrow keys to
+    // move between tabs — because a horizontal row of labels with one marked
+    // is what a screen reader and a keyboard both expect a tablist to be.
     variant,
 }) {
     const [visibleChildren, setVisibleChildren] = useState({});
@@ -525,6 +549,22 @@ function TableFilter({
         const childClass = (child) =>
             `${styles.childLink} ${styles[child.class] || ''}`;
 
+        const isSelected = d.show === true;
+
+        // Tab semantics only in the underline strip, where the markup really is
+        // a tablist: one tab stop for the row, arrow keys between tabs (see
+        // `handleStripKeyDown`), `aria-selected` on the chosen one. Elsewhere
+        // the rail is a list of links and `aria-current` is the honest word for
+        // "this is the one you are on" — announcing a half-implemented tablist
+        // to a screen reader is worse than announcing nothing.
+        const a11y = isUnderline
+            ? {
+                  role: 'tab',
+                  'aria-selected': isSelected ? 'true' : 'false',
+                  tabIndex: isSelected ? 0 : -1,
+              }
+            : { 'aria-current': isSelected ? 'page' : undefined };
+
         if (type === 'simple') {
             return (
                 <li className={styles[d.class]}>
@@ -533,8 +573,9 @@ function TableFilter({
                         data-filtertype="parent"
                         data-url={d.url || ''}
                         data-value={d.hasOwnProperty('value') ? d.value : ''}
-                        data-active={d.show === true ? 'true' : undefined}
+                        data-active={isSelected ? 'true' : undefined}
                         onClick={filterTable}
+                        {...a11y}
                     >
                         {d.label}
                     </button>
@@ -549,9 +590,10 @@ function TableFilter({
                         data-filtertype="parent"
                         data-url={d.url || ''}
                         data-value={d.hasOwnProperty('value') ? d.value : ''}
-                        data-active={d.show === true ? 'true' : undefined}
+                        data-active={isSelected ? 'true' : undefined}
                         onClick={filterTable}
                         className={parentClass}
+                        {...a11y}
                     >
                         {d.label}
                         {isParent && d.children && d.children.length > 0 && (
@@ -642,13 +684,7 @@ function TableFilter({
     // 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 isFlatStrip = isFlatFilterList(filters);
 
     const activeId = activeFilter ? activeFilter.id : null;
 
@@ -674,6 +710,127 @@ function TableFilter({
     // expandable parents has no single row to lay out.
     const isUnderline = variant === 'underline' && isFlatStrip;
 
+    /**
+     * Which edges of the strip have tabs hidden past them: 'none' | 'start' |
+     * 'end' | 'both'.
+     *
+     * The strip hides its scrollbar (see `@mixin tab-strip`), which is right —
+     * a scrollbar under a two-tab row is noise — but it leaves a strip that is
+     * three tabs wider than its box looking exactly like a strip that fits.
+     * The stylesheet reads this off `data-overflow` and fades the affected
+     * edge, so the cut-off tab says out loud that it is cut off.
+     */
+    const [stripOverflow, setStripOverflow] = useState('none');
+
+    useEffect(() => {
+        if (!isFlatStrip) return undefined;
+
+        const list = listRef.current;
+
+        if (!list || typeof list.addEventListener !== 'function') {
+            return undefined;
+        }
+
+        const measure = () => {
+            const max = list.scrollWidth - list.clientWidth;
+
+            // A sub-pixel difference is a rounding artefact, not a hidden tab.
+            if (!(max > 1)) {
+                setStripOverflow('none');
+                return;
+            }
+
+            const atStart = list.scrollLeft <= 1;
+            const atEnd = list.scrollLeft >= max - 1;
+
+            setStripOverflow(
+                atStart && atEnd
+                    ? 'none'
+                    : atStart
+                    ? 'end'
+                    : atEnd
+                    ? 'start'
+                    : 'both'
+            );
+        };
+
+        measure();
+
+        list.addEventListener('scroll', measure, { passive: true });
+
+        if (typeof window !== 'undefined' && window.addEventListener) {
+            window.addEventListener('resize', measure);
+        }
+
+        return () => {
+            list.removeEventListener('scroll', measure);
+
+            if (typeof window !== 'undefined' && window.removeEventListener) {
+                window.removeEventListener('resize', measure);
+            }
+        };
+        // `filters` because adding or removing a tab changes whether the row
+        // overflows; `activeId` because selecting a tab scrolls it into view.
+    }, [isFlatStrip, filters, activeId]);
+
+    /**
+     * Arrow-key movement between tabs.
+     *
+     * A tablist is one tab stop, not one per tab — `renderContent` gives the
+     * selected tab `tabIndex=0` and the rest `-1` — so without this the strip
+     * would be reachable by keyboard and impossible to move around in. Home
+     * and End jump to the ends. Activation follows focus, which is the
+     * expected behaviour for a tablist whose panels are already loaded.
+     */
+    const handleStripKeyDown = (e) => {
+        if (!isUnderline) return;
+
+        const step =
+            e.key === 'ArrowRight'
+                ? 1
+                : e.key === 'ArrowLeft'
+                ? -1
+                : e.key === 'Home'
+                ? 'first'
+                : e.key === 'End'
+                ? 'last'
+                : null;
+
+        if (step === null) return;
+
+        const list = listRef.current;
+
+        if (!list || typeof list.querySelectorAll !== 'function') return;
+
+        const items = Array.from(
+            list.querySelectorAll(':scope > li > [data-filtertype]')
+        );
+
+        if (items.length === 0) return;
+
+        const current = items.indexOf(e.target);
+
+        if (current === -1) return;
+
+        e.preventDefault();
+
+        const next =
+            step === 'first'
+                ? 0
+                : step === 'last'
+                ? items.length - 1
+                : (current + step + items.length) % items.length;
+
+        const target = items[next];
+
+        if (!target) return;
+
+        if (typeof target.focus === 'function') target.focus();
+        // Goes through the same `filterTable` path a mouse click does, rather
+        // than a second copy of the selection logic.
+        if (typeof target.click === 'function') target.click();
+    };
+
     return (
         <div
             className={`${styles.tableFilterContainer} ${
@@ -701,6 +858,9 @@ function TableFilter({
                 className={`${styles.tableFilter} ${
                     mobileMenuOpen ? styles.mobileOpen : ''
                 }`}
+                role={isUnderline ? 'tablist' : undefined}
+                data-overflow={isFlatStrip ? stripOverflow : undefined}
+                onKeyDown={isUnderline ? handleStripKeyDown : undefined}
             >
                 {filters.map((item, key) => (
                     <React.Fragment key={'table-filter-' + key}>