@visns-studio/visns-components 6.6.3 → 6.15.0

package/src/components/generic/reportSemanticSteps/SemanticFieldsStep.jsx

@@ -66,10 +66,10 @@ export const buildFieldSources = (model, entityId, addedRelations) => {
  * only offered where the contract allows them.
  */
 const SemanticFieldsStep = ({
-    model,
-    entityId,
-    addedRelations,
-    selections,
+    model = null,
+    entityId = '',
+    addedRelations = [],
+    selections = [],
     onToggleField,
     onChangeAggregate,
     onRemoveSelection,
@@ -327,11 +327,4 @@ SemanticFieldsStep.propTypes = {
     onMoveSelection: PropTypes.func.isRequired,
 };
 
-SemanticFieldsStep.defaultProps = {
-    model: null,
-    entityId: '',
-    addedRelations: [],
-    selections: [],
-};
-
 export default SemanticFieldsStep;

package/src/components/generic/reportSemanticSteps/SemanticFiltersStep.jsx

@@ -26,8 +26,8 @@ export const buildFilterFieldOptions = (model, entityId, addedRelations) =>
     }));
 
 const SemanticFilterCondition = ({
-    model,
-    entityId,
+    model = null,
+    entityId = '',
     condition,
     fieldGroups,
     onChange,
@@ -231,17 +231,12 @@ SemanticFilterCondition.propTypes = {
     onRemove: PropTypes.func.isRequired,
 };
 
-SemanticFilterCondition.defaultProps = {
-    model: null,
-    entityId: '',
-};
-
 const SemanticFilterGroup = ({
-    model,
-    entityId,
+    model = null,
+    entityId = '',
     group,
     fieldGroups,
-    depth,
+    depth = 0,
     onChangeNode,
     onRemoveNode,
     onAddCondition,
@@ -355,12 +350,6 @@ SemanticFilterGroup.propTypes = {
     onAddGroup: PropTypes.func.isRequired,
 };
 
-SemanticFilterGroup.defaultProps = {
-    model: null,
-    entityId: '',
-    depth: 0,
-};
-
 /**
  * Step 4 in semantic mode: build the filter tree.
  *
@@ -369,11 +358,11 @@ SemanticFilterGroup.defaultProps = {
  * become runtime parameters, whose labels can be edited below the tree.
  */
 const SemanticFiltersStep = ({
-    model,
-    entityId,
-    addedRelations,
+    model = null,
+    entityId = '',
+    addedRelations = [],
     filterTree,
-    parameters,
+    parameters = [],
     onChangeNode,
     onRemoveNode,
     onAddCondition,
@@ -473,11 +462,4 @@ SemanticFiltersStep.propTypes = {
     onChangeParameter: PropTypes.func.isRequired,
 };
 
-SemanticFiltersStep.defaultProps = {
-    model: null,
-    entityId: '',
-    addedRelations: [],
-    parameters: [],
-};
-
 export default SemanticFiltersStep;

package/src/components/generic/reportSemanticSteps/SemanticGroupingStep.jsx

@@ -12,11 +12,11 @@ import styles from '../../styles/ReportSemantic.module.scss';
  * excluded for the same reason: they are the summary, not the grouping key.
  */
 const SemanticGroupingStep = ({
-    model,
-    entityId,
-    selections,
-    groupBy,
-    sort,
+    model = null,
+    entityId = '',
+    selections = [],
+    groupBy = [],
+    sort = [],
     onToggleGroupBy,
     onAddSort,
     onChangeSort,
@@ -191,12 +191,4 @@ SemanticGroupingStep.propTypes = {
     onRemoveSort: PropTypes.func.isRequired,
 };
 
-SemanticGroupingStep.defaultProps = {
-    model: null,
-    entityId: '',
-    selections: [],
-    groupBy: [],
-    sort: [],
-};
-
 export default SemanticGroupingStep;

package/src/components/generic/reportSemanticSteps/SemanticParameterPrompt.jsx

@@ -44,11 +44,11 @@ const slotType = (parameterType) => {
  * scalar.
  */
 const SemanticParameterPrompt = ({
-    model,
-    entityId,
-    filterTree,
-    parameters,
-    values,
+    model = null,
+    entityId = '',
+    filterTree = null,
+    parameters = [],
+    values = {},
     onChange,
 }) => {
     if (!parameters || parameters.length === 0) return null;
@@ -146,12 +146,4 @@ SemanticParameterPrompt.propTypes = {
     onChange: PropTypes.func.isRequired,
 };
 
-SemanticParameterPrompt.defaultProps = {
-    model: null,
-    entityId: '',
-    filterTree: null,
-    parameters: [],
-    values: {},
-};
-
 export default SemanticParameterPrompt;

package/src/components/generic/reportSemanticSteps/SemanticPreviewStep.jsx

@@ -69,26 +69,26 @@ const buildGroups = (rows, columns, groupKey) => {
  * review the results before saving or exporting.
  */
 const SemanticPreviewStep = ({
-    model,
-    entityId,
-    selections,
-    filterTree,
-    parameters,
-    parameterValues,
-    groupBy,
-    rows,
-    total,
-    page,
-    pageSize,
-    isLoading,
-    error,
+    model = null,
+    entityId = '',
+    selections = [],
+    filterTree = null,
+    parameters = [],
+    parameterValues = {},
+    groupBy = [],
+    rows = [],
+    total = 0,
+    page = 1,
+    pageSize = 25,
+    isLoading = false,
+    error = '',
     onChangeParameterValue,
     onRun,
     onChangePage,
     onChangePageSize,
     onExport,
     onSave,
-    canSave,
+    canSave = false,
 }) => {
     const columns = useMemo(
         () => buildPreviewColumns(model, entityId, selections),
@@ -332,21 +332,4 @@ SemanticPreviewStep.propTypes = {
     canSave: PropTypes.bool,
 };
 
-SemanticPreviewStep.defaultProps = {
-    model: null,
-    entityId: '',
-    selections: [],
-    filterTree: null,
-    parameters: [],
-    parameterValues: {},
-    groupBy: [],
-    rows: [],
-    total: 0,
-    page: 1,
-    pageSize: 25,
-    isLoading: false,
-    error: '',
-    canSave: false,
-};
-
 export default SemanticPreviewStep;

package/src/components/generic/reportSemanticSteps/SemanticRelationsStep.jsx

@@ -48,9 +48,9 @@ export const availableRelationPaths = (model, entityId, addedPaths) => {
  * whether they want it.
  */
 const SemanticRelationsStep = ({
-    model,
-    entityId,
-    addedRelations,
+    model = null,
+    entityId = '',
+    addedRelations = [],
     onToggle,
 }) => {
     const options = availableRelationPaths(model, entityId, addedRelations);
@@ -145,10 +145,4 @@ SemanticRelationsStep.propTypes = {
     onToggle: PropTypes.func.isRequired,
 };
 
-SemanticRelationsStep.defaultProps = {
-    model: null,
-    entityId: '',
-    addedRelations: [],
-};
-
 export default SemanticRelationsStep;

package/src/components/generic/reportSemanticSteps/SemanticValueInput.jsx

@@ -12,7 +12,7 @@ const NUMERIC_TYPES = ['number', 'money', 'percent'];
  * boolean -> yes/no select, money/number/percent -> numeric input,
  * everything else -> text.
  */
-const SemanticValueInput = ({ type, field, value, onChange, ariaLabel }) => {
+const SemanticValueInput = ({ type = 'text', field = null, value = '', onChange, ariaLabel = 'Value' }) => {
     const commonProps = {
         className: styles.input,
         'aria-label': ariaLabel,
@@ -77,19 +77,12 @@ SemanticValueInput.propTypes = {
     ariaLabel: PropTypes.string,
 };
 
-SemanticValueInput.defaultProps = {
-    type: 'text',
-    field: null,
-    value: '',
-    ariaLabel: 'Value',
-};
-
 /**
  * Multi-value editor for the `in` / `not_in` operators. Enum fields get a
  * checkbox list of declared values; everything else gets a comma-separated
  * text box, which is the least surprising control for a free-text list.
  */
-export const SemanticValueListInput = ({ type, field, values, onChange }) => {
+export const SemanticValueListInput = ({ type = 'text', field = null, values = [], onChange }) => {
     const selected = Array.isArray(values) ? values : [];
 
     if (type === 'enum') {
@@ -144,10 +137,4 @@ SemanticValueListInput.propTypes = {
     onChange: PropTypes.func.isRequired,
 };
 
-SemanticValueListInput.defaultProps = {
-    type: 'text',
-    field: null,
-    values: [],
-};
-
 export default SemanticValueInput;

package/src/components/navActive.js

@@ -0,0 +1,60 @@
+/**
+ * Which top-level nav item is the current page.
+ *
+ * Pulled out of Navigation's `updateNavItems` effect because it was two
+ * different answers depending on how many segments the URL happened to have,
+ * and neither of them was right:
+ *
+ *   - Below three segments it asked `currentUrl.includes(navUrl)`, which is a
+ *     substring test on a path. `/tasks` matched `/tasks-archive`, and every
+ *     item whose url is a substring of another item's lit up together.
+ *   - It only looked at an item's CHILDREN in the three-or-more-segment
+ *     branch. So standing on `/reports` — one segment — the Admin item, whose
+ *     own url is `/settings` and which owns `/reports` as a child, tested
+ *     `'/reports'.includes('/settings')` and came back inactive. The bar had
+ *     no current page at all on most of the pages it links to.
+ *
+ * One rule instead, at every depth: a path matches when it IS the item's path
+ * or sits under it as a whole segment, and an item is active when it matches
+ * itself or any of its children.
+ */
+
+export const cleanUrl = (url) => {
+    if (!url) {
+        return '';
+    }
+    return url.startsWith('/') ? url : `/${url}`;
+};
+
+/**
+ * Segment-prefix match: `/tasks` covers `/tasks` and `/tasks/12`, and does
+ * NOT cover `/tasks-archive`. `/` is excluded deliberately — as a prefix it
+ * covers the entire application, so the dashboard is matched exactly instead.
+ */
+const covers = (base, current) =>
+    !!base &&
+    base !== '/' &&
+    (current === base || current.startsWith(`${base}/`));
+
+/**
+ * @param {string} navUrl      the item's own url ('' for a pure parent).
+ * @param {string[]} childUrls the urls of its dropdown children, if any.
+ * @param {string} currentUrl  the path being viewed.
+ */
+export function isNavActive(navUrl, childUrls, currentUrl) {
+    const current = cleanUrl(currentUrl) || '/';
+    const base = cleanUrl(navUrl);
+
+    // The dashboard, which is reachable under both of its names.
+    if (base === '/') {
+        return current === '/' || current === '/dashboard';
+    }
+
+    if (covers(base, current)) {
+        return true;
+    }
+
+    return (childUrls || []).some((child) => covers(cleanUrl(child), current));
+}
+
+export default isNavActive;

package/src/components/notify/desktopNotifications.js

@@ -0,0 +1,256 @@
+/**
+ * Desktop alerts — the browser's own Notification API, nothing more.
+ *
+ * No service worker and no push subscription: this raises an OS-level toast
+ * only while a tab of the app is open, which is exactly the scope that was
+ * asked for. Staff who have closed the CRM get nothing, and that is the
+ * honest behaviour — promising more would need a push service, a VAPID key
+ * pair and a server that survives the tab being gone.
+ *
+ * Three gates, and all three must open before anything appears:
+ *
+ *   supported    the API exists (it does not on iOS Safari outside a
+ *                home-screen app, and not in an insecure context);
+ *   permission   the user granted it, which only a click can ask for;
+ *   enabled      the user has not switched it off in the bell's dropdown.
+ *
+ * The fourth is subtler and matters more day to day: if the tab is already
+ * visible AND focused, nothing is raised. The in-app UI — the bell badge, the
+ * messages popover — is already showing the same thing, and an OS toast on
+ * top of it is noise. `force: true` overrides that for the rare caller that
+ * genuinely wants both.
+ *
+ * Everything here is a plain function over globals so it can be tested with a
+ * fake `Notification`, `document` and `localStorage` (tests/notify.test.mjs)
+ * — the same arrangement as the sms and vault helpers.
+ */
+
+/** Where the user's on/off choice lives. Shared by the bell and the SMS badge. */
+export const STORAGE_KEY = 'visns.desktopAlerts';
+
+/** How long a toast lingers before it closes itself. */
+export const AUTO_CLOSE_MS = 8000;
+
+const ON = 'on';
+const OFF = 'off';
+
+/** The Notification constructor, or null. Read late — tests swap it in. */
+const constructorRef = () => {
+    const ctor = globalThis?.Notification;
+
+    return typeof ctor === 'function' ? ctor : null;
+};
+
+const doc = () => (typeof globalThis?.document === 'undefined' ? null : globalThis.document);
+
+const storage = () => {
+    try {
+        return globalThis?.localStorage ?? null;
+    } catch {
+        // Reading localStorage throws outright in some privacy modes.
+        return null;
+    }
+};
+
+/** Is the browser capable of this at all? */
+export const isSupported = () => constructorRef() !== null;
+
+/**
+ * 'granted' | 'denied' | 'default'.
+ *
+ * A browser that cannot do this is reported as 'denied' rather than some
+ * fourth value: every caller wants to know "can I show one?", and a fourth
+ * state only invites a missing branch. `isSupported()` distinguishes the two
+ * when the UI needs to explain itself.
+ */
+export const getPermission = () => {
+    const ctor = constructorRef();
+
+    if (!ctor) return 'denied';
+
+    const permission = ctor.permission;
+
+    return permission === 'granted' || permission === 'denied' ? permission : 'default';
+};
+
+/**
+ * Ask. Must be called from a user gesture or browsers ignore it.
+ *
+ * Resolves rather than rejects, and copes with the old callback signature
+ * Safari shipped for years.
+ *
+ * @returns {Promise<'granted'|'denied'|'default'>}
+ */
+export const requestPermission = () => {
+    const ctor = constructorRef();
+
+    if (!ctor) return Promise.resolve('denied');
+    if (ctor.permission === 'granted' || ctor.permission === 'denied') {
+        return Promise.resolve(ctor.permission);
+    }
+
+    return new Promise((resolve) => {
+        try {
+            const result = ctor.requestPermission((legacy) => resolve(legacy || 'default'));
+
+            if (result && typeof result.then === 'function') {
+                result.then((value) => resolve(value || 'default')).catch(() => resolve('denied'));
+            }
+        } catch {
+            resolve('denied');
+        }
+    });
+};
+
+/**
+ * The user's switch.
+ *
+ * Untouched means "on once permission is granted": someone who has just been
+ * through the browser's permission prompt has said yes twice already, and
+ * making them find a second toggle afterwards would be a trap.
+ */
+export const isEnabled = () => {
+    const stored = (() => {
+        try {
+            return storage()?.getItem(STORAGE_KEY) ?? null;
+        } catch {
+            return null;
+        }
+    })();
+
+    if (stored === ON) return true;
+    if (stored === OFF) return false;
+
+    return getPermission() === 'granted';
+};
+
+/** Persist the switch. Silent if storage is unavailable — it is a preference. */
+export const setEnabled = (enabled) => {
+    try {
+        storage()?.setItem(STORAGE_KEY, enabled ? ON : OFF);
+    } catch {
+        /* private mode, quota, a locked-down iframe — none worth a toast */
+    }
+
+    return !!enabled;
+};
+
+/** Is the user already looking at us? */
+const tabHasTheUser = () => {
+    const d = doc();
+
+    if (!d) return false;
+
+    const visible = d.visibilityState === 'visible';
+    const focused = typeof d.hasFocus === 'function' ? d.hasFocus() : false;
+
+    return visible && focused;
+};
+
+/**
+ * Raise one desktop alert.
+ *
+ * @param {object}   options
+ * @param {string}   options.title      The bold line. Required.
+ * @param {string}   [options.body]     One or two lines under it.
+ * @param {string}   [options.tag]      Replaces an earlier toast with the same
+ *                                      tag instead of stacking — pass a stable
+ *                                      per-subject id ('sms-14', 'notification-…').
+ * @param {string}   [options.icon]     Icon URL.
+ * @param {string}   [options.url]      Where a click should land.
+ * @param {Function} [options.onClick]  Overrides `url` entirely.
+ * @param {Function} [options.navigate] React Router's navigate, when there is one.
+ * @param {boolean}  [options.force]    Show even if the tab is focused.
+ *
+ * @returns {Notification|null} The toast, or null if any gate was closed.
+ */
+export const notify = ({
+    title,
+    body,
+    tag,
+    icon,
+    url,
+    onClick,
+    navigate,
+    force = false,
+} = {}) => {
+    const ctor = constructorRef();
+
+    if (!ctor || !title) return null;
+    if (getPermission() !== 'granted') return null;
+    if (!isEnabled()) return null;
+    if (!force && tabHasTheUser()) return null;
+
+    let toast;
+
+    try {
+        // Throws, rather than returning null, in an insecure context and in a
+        // few embedded webviews.
+        toast = new ctor(title, {
+            body,
+            tag,
+            icon,
+            // The tag already collapses duplicates; renotify would re-buzz for
+            // each one, which is how a busy inbox becomes a reason to turn the
+            // whole feature off.
+            renotify: false,
+        });
+    } catch {
+        return null;
+    }
+
+    toast.onclick = () => {
+        try {
+            globalThis?.focus?.();
+        } catch {
+            /* a background tab is not always allowed to raise itself */
+        }
+
+        try {
+            toast.close();
+        } catch {
+            /* already gone */
+        }
+
+        if (typeof onClick === 'function') {
+            onClick();
+
+            return;
+        }
+
+        if (!url) return;
+
+        if (typeof navigate === 'function') {
+            navigate(url);
+        } else {
+            globalThis?.location?.assign?.(url);
+        }
+    };
+
+    // Chrome on Windows keeps a toast in the tray until it is dismissed; eight
+    // seconds is long enough to read and short enough not to pile up.
+    try {
+        globalThis?.setTimeout?.(() => {
+            try {
+                toast.close();
+            } catch {
+                /* already gone */
+            }
+        }, AUTO_CLOSE_MS);
+    } catch {
+        /* no timer host: the toast simply stays until dismissed */
+    }
+
+    return toast;
+};
+
+export default {
+    AUTO_CLOSE_MS,
+    STORAGE_KEY,
+    getPermission,
+    isEnabled,
+    isSupported,
+    notify,
+    requestPermission,
+    setEnabled,
+};

package/src/components/sketch/SketchField.jsx

@@ -380,10 +380,20 @@ class SketchField extends PureComponent {
         return (
             <div
                 className={className}
-                ref={(c) => (this._container = c)}
+                // Block bodies, not expression bodies. React 19 treats a
+                // callback ref's return value as a cleanup function, so
+                // `ref={c => (this._x = c)}` — which returns the assigned
+                // element — hands React a non-function to call on unmount.
+                ref={(c) => {
+                    this._container = c;
+                }}
                 style={canvasDivStyle}
             >
-                <canvas ref={(c) => (this._canvas = c)}>
+                <canvas
+                    ref={(c) => {
+                        this._canvas = c;
+                    }}
+                >
                     Sorry, Canvas HTML5 element is not supported by your
                     browser.
                 </canvas>