@agilant/toga-blox 1.0.318-beta.9 → 1.0.319-beta.76

package/dist/api/tableData/getDataTableData.js

@@ -3,14 +3,6 @@
 // Supply-specific logic lives in the consuming app via additionalData/extraWhereConditions
 import { apiGet } from "../apiFunctions.js";
 export const getDataTableData = async (tableViewMeta, additionalData = {}, extraFields = [], searchParams, options) => {
-    // console.group(`[getDataTableData] slug: ${dataTableMeta?.slug}`);
-    // console.log("dataTableMeta:", dataTableMeta);
-    // console.log("additionalData:", additionalData);
-    // console.log("extraFields:", extraFields);
-    // console.log(
-    // 	"searchParams:",
-    // 	Object.fromEntries((searchParams ?? new URLSearchParams()).entries()),
-    // );
     if (!tableViewMeta) {
         console.error("[getDataTableData] Missing table metadata");
         console.groupEnd();
@@ -22,7 +14,6 @@ export const getDataTableData = async (tableViewMeta, additionalData = {}, extra
         console.groupEnd();
         throw new Error(`tableViewMeta.fields is not iterable for slug: ${tableViewMeta.slug}`);
     }
-    // console.log("tableViewFields:", tableViewFields);
     const parentTableSlug = tableViewMeta.slug;
     const queryParams = Object.fromEntries(searchParams);
     const isInfinite = Boolean(additionalData.hasInfiniteScroll);
@@ -84,8 +75,17 @@ export const getDataTableData = async (tableViewMeta, additionalData = {}, extra
         const stripBackticks = (s) => s.replace(/`/g, "");
         for (const j of tableViewMeta.joins) {
             const key = j.type === "OUTER" ? "ojoin" : "join";
+            // When a join aliases its table (e.g. joining `Addresses` a second
+            // time as `Addresses_C`), emit the `table@alias` form so the API
+            // declares the alias. Without this, two joins on the same physical
+            // table collide → MySQL 1066 "Not unique table/alias".
+            const tableKey = j.alias && j.alias !== j.table
+                ? `${j.table}@${j.alias}`
+                : j.table;
             apiOptions[key].push({
-                [j.table]: { [stripBackticks(j.onA)]: [stripBackticks(j.onB)] },
+                [tableKey]: {
+                    [stripBackticks(j.onA)]: [stripBackticks(j.onB)],
+                },
             });
         }
         if (apiOptions.join.length === 0)
@@ -457,11 +457,6 @@ export const getDataTableData = async (tableViewMeta, additionalData = {}, extra
         apiOptions.where.and.push(...additionalData.extraWhereConditions);
     }
     // ── Fetch ─────────────────────────────────────────────────────
-    // console.log(
-    // 	"[getDataTableData] Final apiOptions:",
-    // 	JSON.stringify(apiOptions, null, 2),
-    // );
-    // console.log("[getDataTableData] Fetching route:", dataTableMeta.route);
     let parentResponse;
     try {
         parentResponse = (await apiGet(tableViewMeta.route, apiOptions));
@@ -471,15 +466,12 @@ export const getDataTableData = async (tableViewMeta, additionalData = {}, extra
         console.groupEnd();
         throw err;
     }
-    // console.log("[getDataTableData] Raw response:", parentResponse);
     if (!parentResponse.isSuccess) {
         console.error("[getDataTableData] Response not successful:", parentResponse);
         options?.onError?.("parentResponse", parentResponse);
         console.groupEnd();
         return;
     }
-    console.log("[getDataTableData] Success. Records count:", parentResponse?.data?.length ?? "unknown");
-    console.groupEnd();
     return parentResponse;
 };
 // ── Page meta ─────────────────────────────────────────────────────

package/dist/components/AdvancedSelect/AdvancedSelect.d.ts

@@ -0,0 +1,3 @@
+import type { AdvancedSelectProps } from "./AdvancedSelect.types.js";
+declare function AdvancedSelect<T>(props: AdvancedSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export default AdvancedSelect;

package/dist/components/AdvancedSelect/AdvancedSelect.js

@@ -0,0 +1,294 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import classes from "./AdvancedSelect.module.css";
+import { getFontAwesomeIcon } from "../../utils/index.js";
+import BaseErrorMessage from "../BaseInput/components/BaseErrorMessage.js";
+const cx = (...parts) => parts.filter(Boolean).join(" ");
+const getAvatarInitials = (name) => name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part.charAt(0).toUpperCase())
+    .join("");
+function OptionAvatar({ name, className, }) {
+    const initials = getAvatarInitials(name); // Styling (including background color) is fully CSS-driven via the // `--advancedSelect-avatar-*` custom properties and the `avatarClassName` // prop. See AdvancedSelect.module.css for the available variables.
+    return (_jsx("span", { className: cx(classes.avatar, className), "aria-hidden": "true", children: initials }));
+}
+function AdvancedSelect(props) {
+    const { errorMessage, isFieldDirty, isFieldError, mode = "single", label, placeholder = "Search...", disabled = false, data, getOptionValue, getOptionLabel, getOptionSecondaryLabel, renderOption, showAvatar = false, getOptionAvatarText, avatarClassName, hasMorePages = false, isFetchingMore = false, fetchMoreData, findSpecificValue, searchDebounceMs = 350, searchMinChars = 3, noOptionsMessage = "No options", loadingMessage = "Loading...", rowHeight = 36, maxVisibleRows = 8, overscan = 6, className, menuClassName, onClearInput, onOpen, onClose, valueKey, } = props;
+    const isMulti = mode === "multi";
+    const [open, setOpen] = useState(false);
+    const [input, setInput] = useState("");
+    const [searchResults, setSearchResults] = useState(null);
+    const [searching, setSearching] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const wrapperRef = useRef(null);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const debounceRef = useRef(null);
+    const abortRef = useRef(null); // Build options from current data source. // - With async search (findSpecificValue): use server results once length >= min chars. // - Without async search: filter `data` client-side by input text.
+    const sourceData = searchResults ?? data;
+    const allOptions = useMemo(() => (sourceData ?? []).map((item) => ({
+        value: getOptionValue(item),
+        label: getOptionLabel(item),
+        secondaryLabel: getOptionSecondaryLabel?.(item),
+        item,
+    })), [sourceData, getOptionValue, getOptionLabel, getOptionSecondaryLabel]); // Selected values as Set for fast lookup
+    const selectedValueSet = useMemo(() => {
+        const set = new Set();
+        if (isMulti) {
+            (props.value ?? []).forEach((it) => set.add(getOptionValue(it)));
+        }
+        else if (props.value) {
+            set.add(getOptionValue(props.value));
+        }
+        return set;
+    }, [isMulti, props.value, getOptionValue]);
+    const options = useMemo(() => {
+        const q = input.trim().toLowerCase();
+        const filtered = findSpecificValue || !q
+            ? allOptions
+            : allOptions.filter((o) => o.label.toLowerCase().includes(q)); // Float selected option(s) to the top while preserving the relative // order of everything else (stable sort).
+        if (selectedValueSet.size === 0)
+            return filtered;
+        const selected = filtered.filter((o) => selectedValueSet.has(o.value));
+        const rest = filtered.filter((o) => !selectedValueSet.has(o.value));
+        return [...selected, ...rest];
+    }, [allOptions, input, findSpecificValue, selectedValueSet]); // Debounced server-side search
+    useEffect(() => {
+        if (!findSpecificValue)
+            return;
+        if (input.length < searchMinChars) {
+            setSearchResults(null);
+            setSearching(false);
+            return;
+        }
+        setSearching(true);
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        if (abortRef.current)
+            abortRef.current.abort();
+        const controller = new AbortController();
+        abortRef.current = controller;
+        debounceRef.current = setTimeout(async () => {
+            try {
+                const results = await findSpecificValue(input);
+                if (!controller.signal.aborted)
+                    setSearchResults(results ?? []);
+            }
+            catch (err) {
+                if (!controller.signal.aborted)
+                    setSearchResults([]);
+            }
+            finally {
+                if (!controller.signal.aborted)
+                    setSearching(false);
+            }
+        }, searchDebounceMs);
+        return () => {
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+            controller.abort();
+        };
+    }, [input, findSpecificValue, searchDebounceMs, searchMinChars]); // Outside click → close
+    useEffect(() => {
+        if (!open)
+            return;
+        const handler = (e) => {
+            if (!wrapperRef.current?.contains(e.target)) {
+                closeMenu();
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler); // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    const openMenu = useCallback(() => {
+        if (disabled || open)
+            return;
+        setOpen(true);
+        onOpen?.();
+    }, [disabled, open, onOpen]);
+    const closeMenu = useCallback(() => {
+        setOpen(false);
+        setActiveIndex(0);
+        onClose?.();
+    }, [onClose]); // Virtualizer
+    const showLoaderRow = hasMorePages && !searchResults;
+    const totalRows = options.length + (showLoaderRow ? 1 : 0);
+    const rowVirtualizer = useVirtualizer({
+        count: totalRows,
+        getScrollElement: () => listRef.current,
+        estimateSize: () => rowHeight,
+        overscan,
+    }); // Infinite scroll trigger
+    useEffect(() => {
+        if (!open || !fetchMoreData || !hasMorePages || isFetchingMore)
+            return;
+        if (searchResults)
+            return; // don't auto-fetch while searching
+        const items = rowVirtualizer.getVirtualItems();
+        const last = items[items.length - 1];
+        if (last && last.index >= options.length - 1) {
+            void fetchMoreData();
+        }
+    }, [
+        open,
+        rowVirtualizer.getVirtualItems(),
+        fetchMoreData,
+        hasMorePages,
+        isFetchingMore,
+        searchResults,
+        options.length,
+    ]);
+    const clearAll = useCallback(() => {
+        setInput("");
+        setSearchResults(null);
+        if (isMulti) {
+            props.onSelect([], valueKey);
+        }
+        else {
+            props.onSelect(null, valueKey);
+        }
+        onClearInput?.();
+    }, [isMulti, props.onSelect, valueKey, onClearInput]);
+    const handleSelect = useCallback((option) => {
+        if (isMulti) {
+            const current = props.value ?? [];
+            const already = selectedValueSet.has(option.value);
+            const next = already
+                ? current.filter((it) => getOptionValue(it) !== option.value)
+                : [...current, option.item];
+            props.onSelect(next, valueKey);
+            setInput("");
+            inputRef.current?.focus();
+        }
+        else {
+            props.onSelect(option.item, valueKey); // Clear the search text (not set it to the label) so reopening // the menu shows the full options list instead of filtering it // down to the selected label. The selected label is still shown // in the closed input via `singleSelectedLabel`.
+            setInput("");
+            closeMenu();
+        }
+    }, [
+        isMulti,
+        props.value,
+        props.onSelect,
+        selectedValueSet,
+        getOptionValue,
+        valueKey,
+        closeMenu,
+    ]);
+    const removeChip = useCallback((itemValue) => {
+        if (!isMulti)
+            return;
+        const current = props.value ?? [];
+        const next = current.filter((it) => getOptionValue(it) !== itemValue);
+        props.onSelect(next, valueKey);
+    }, [isMulti, props.value, props.onSelect, getOptionValue, valueKey]);
+    const onKeyDown = (e) => {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            openMenu();
+            setActiveIndex((i) => Math.min(i + 1, options.length - 1));
+        }
+        else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setActiveIndex((i) => Math.max(i - 1, 0));
+        }
+        else if (e.key === "Enter") {
+            if (open && options[activeIndex]) {
+                e.preventDefault();
+                handleSelect(options[activeIndex]);
+            }
+        }
+        else if (e.key === "Escape") {
+            closeMenu();
+        }
+        else if (e.key === "Backspace" &&
+            isMulti &&
+            input === "" &&
+            props.value?.length) {
+            const list = props.value;
+            removeChip(getOptionValue(list[list.length - 1]));
+        }
+    }; // Display value for single mode when not focused/typing
+    const singleSelectedLabel = !isMulti && props.value ? getOptionLabel(props.value) : "";
+    const singleSelectedSecondaryLabel = !isMulti && props.value
+        ? getOptionSecondaryLabel?.(props.value) ?? ""
+        : "";
+    // When a single value has a secondary label and the menu is closed, show a
+    // styled label+secondary node instead of the plain native input text.
+    const showStyledSingleValue = !isMulti && !!props.value && !open && !!singleSelectedSecondaryLabel;
+    const displayedInput = isMulti
+        ? input
+        : open
+            ? input
+            : singleSelectedLabel || input;
+    const chips = isMulti && props.value?.length
+        ? props.value.map((it) => ({
+            value: getOptionValue(it),
+            label: getOptionLabel(it),
+            avatarText: getOptionAvatarText?.(it) ?? getOptionLabel(it),
+        }))
+        : []; // Avatar shown alongside the selected option in single mode, while the // selected label (not an active search) is displayed in the input.
+    const showSingleAvatar = !isMulti &&
+        showAvatar &&
+        !!props.value &&
+        !open &&
+        !!singleSelectedLabel;
+    const singleAvatarText = showSingleAvatar
+        ? getOptionAvatarText?.(props.value) ?? singleSelectedLabel
+        : "";
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    const hasAnyValue = isMulti
+        ? chips.length > 0 || input.length > 0
+        : !!props.value || input.length > 0;
+    return (_jsxs("div", { ref: wrapperRef, className: cx(classes.wrapper, className, mode === "multi" && classes.multi), children: [label && _jsx("label", { className: classes.label, children: label }), _jsxs("div", { className: cx(classes.control, disabled && classes.disabled, isFieldError
+                    ? classes.error
+                    : isFieldDirty && classes.dirty), onClick: () => {
+                    if (!disabled) {
+                        openMenu();
+                        inputRef.current?.focus();
+                    }
+                }, children: [_jsxs("div", { className: classes.chipsAndInput, children: [chips.map((c) => (_jsxs("span", { className: classes.chip, children: [showAvatar && (_jsx("div", { className: "pr-0.5", children: _jsx(OptionAvatar, { name: singleAvatarText, className: avatarClassName }) })), c.label, _jsx("button", { type: "button", className: classes.chipRemove, onClick: (e) => {
+                                            e.stopPropagation();
+                                            removeChip(c.value);
+                                        }, "aria-label": `Remove ${c.label}`, children: getFontAwesomeIcon("xmark", "regular") })] }, c.value))), showSingleAvatar && (_jsx("div", { className: "pr-0.5", children: _jsx(OptionAvatar, { name: singleAvatarText, className: avatarClassName }) })), showStyledSingleValue && (_jsxs("span", { className: classes.singleValue, children: [_jsx("span", { className: classes.optionPrimary, children: singleSelectedLabel }), _jsx("span", { className: classes.optionSecondary, children: singleSelectedSecondaryLabel })] })), _jsx("input", { ref: inputRef, id: valueKey, type: "text", className: cx(classes.input, mode === "multi" && classes.multiInput, showStyledSingleValue && classes.inputCollapsed), value: showStyledSingleValue ? "" : displayedInput, placeholder: chips.length === 0 ? placeholder : "", disabled: disabled, autoComplete: "off", onChange: (e) => {
+                                    setInput(e.target.value);
+                                    openMenu();
+                                }, onFocus: openMenu, onKeyDown: onKeyDown })] }), _jsxs("div", { className: classes.indicators, children: [hasAnyValue && (_jsx("button", { type: "button", className: classes.indicatorBtn, disabled: disabled, onClick: (e) => {
+                                    e.stopPropagation();
+                                    clearAll();
+                                }, "aria-label": "Clear", children: _jsx("span", { className: classes.clearSingleInput, children: getFontAwesomeIcon("xmark", "regular") }) })), _jsx("button", { type: "button", className: classes.indicatorBtn, disabled: disabled, onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (open)
+                                        closeMenu();
+                                    else {
+                                        openMenu();
+                                        inputRef.current?.focus();
+                                    }
+                                }, "aria-label": "Toggle menu", children: getFontAwesomeIcon("chevronDown", "regular") })] })] }), open && (_jsx("div", { className: cx(classes.menu, menuClassName), children: _jsx("div", { ref: listRef, className: classes.menuList, style: {
+                        maxHeight: `${rowHeight * maxVisibleRows}px`,
+                    }, children: searching ? (_jsx("div", { className: classes.statusRow, children: loadingMessage })) : options.length === 0 ? (_jsx("div", { className: classes.statusRow, children: noOptionsMessage })) : (_jsx("div", { className: classes.virtualRows, style: {
+                            height: `${rowVirtualizer.getTotalSize()}px`,
+                        }, children: virtualItems.map((vRow) => {
+                            const isLoaderRow = showLoaderRow &&
+                                vRow.index === options.length;
+                            const style = {
+                                position: "absolute",
+                                top: 0,
+                                left: 0,
+                                width: "100%",
+                                transform: `translateY(${vRow.start}px)`,
+                                height: `${vRow.size}px`,
+                            };
+                            if (isLoaderRow) {
+                                return (_jsx("div", { style: style, className: classes.shimmerRow }, "loader"));
+                            }
+                            const option = options[vRow.index];
+                            const isSelected = selectedValueSet.has(option.value);
+                            const isActive = vRow.index === activeIndex;
+                            return (_jsx("div", { style: style, className: cx(classes.option, isSelected && classes.selected, isActive && classes.active), onMouseEnter: () => setActiveIndex(vRow.index), onMouseDown: (e) => e.preventDefault(), onClick: () => handleSelect(option), children: _jsxs("label", { className: classes.optionLabel, children: [mode === "multi" ? (_jsxs(_Fragment, { children: [_jsx("input", { type: "checkbox", checked: isSelected, onChange: () => handleSelect(option) }), _jsx("span", { className: classes.checkIcon, children: getFontAwesomeIcon("check", "regular") })] })) : (_jsx(_Fragment, { children: isSelected && (_jsx("span", { className: classes.optionCheck, children: getFontAwesomeIcon("check", "regular") })) })), showAvatar && (_jsx("div", { className: "pr-0.5", children: _jsx(OptionAvatar, { name: getOptionAvatarText?.(option.item) ??
+                                                    option.label, className: avatarClassName }) })), option.secondaryLabel ? (_jsxs("span", { className: classes.optionText, children: [_jsx("span", { className: classes.optionPrimary, children: option.label }), _jsx("span", { className: classes.optionSecondary, children: option.secondaryLabel })] })) : (_jsx("span", { children: option.label }))] }) }, option.value));
+                        }) })) }) })), errorMessage && _jsx(BaseErrorMessage, { errorMessage: errorMessage })] }));
+}
+export default AdvancedSelect;