@agilant/toga-blox 1.0.318-beta.2 → 1.0.318-beta.20

package/dist/api/apiFunctions.js

@@ -1,4 +1,4 @@
-import { assembleOptions } from "../reactQuery/queryHelpers";
+import { assembleOptions } from "../reactQuery/queryHelpers.js";
 let instance = null;
 export const setAxiosInstance = (axiosInstance) => {
     instance = axiosInstance;

package/dist/api/auth.js

@@ -1,5 +1,5 @@
 import axios from "axios";
-import { apiGet, apiPost } from "./apiFunctions";
+import { apiGet, apiPost } from "./apiFunctions.js";
 export const performLogout = () => {
     localStorage.removeItem("accessToken");
     localStorage.removeItem("user");

package/dist/api/axiosInstance.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { v4 as uuidv4 } from "uuid";
-import { performLogout, fetchPublicToken, refreshAccessToken } from "./auth";
+import { performLogout, fetchPublicToken, refreshAccessToken } from "./auth.js";
 export const createAxiosInstance = ({ baseURL, onLogout, }) => {
     const instance = axios.create({
         baseURL,

package/dist/api/checkSsoAuth.js

@@ -1,5 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
-import { apiGet } from "./apiFunctions";
+import { apiGet } from "./apiFunctions.js";
 const useCheckSsoAuth = () => useMutation({
     mutationFn: async ({ protocol, hostname, environment, }) => {
         const domainName = `${protocol}//${hostname}`;

package/dist/api/genericApi.js

@@ -1,5 +1,5 @@
-import { apiGet, apiPost, apiPut, apiDelete } from "./apiFunctions";
-import { toCamelCase } from "../reactQuery/queryHelpers";
+import { apiGet, apiPost, apiPut, apiDelete } from "./apiFunctions.js";
+import { toCamelCase } from "../reactQuery/queryHelpers.js";
 import * as Sentry from "@sentry/react";
 //Generic component to get all the data from Api based on slug and fields requested for
 export async function getData(slug, fields) {

package/dist/api/handleSamlAuth.d.ts

@@ -1,4 +1,4 @@
-import { Options } from "./types";
+import { Options } from "./types.js";
 declare const useHandleSamlAuth: () => import("@tanstack/react-query").UseMutationResult<any, Error, {
     samlEncoded: string;
     extraParams?: Record<string, any>;

package/dist/api/handleSamlAuth.js

@@ -1,5 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
-import { apiPost } from "../api/apiFunctions";
+import { apiPost } from "../api/apiFunctions.js";
 function decodeBase64ToUtf8(b64) {
     // Browser path
     if (typeof globalThis.atob === "function") {

package/dist/api/index.d.ts

@@ -1,8 +1,8 @@
-export * from "./types";
-export * from "./axiosInstance";
-export * from "./apiFunctions";
-export { getDataTableData } from "./tableData/getDataTableData";
-export { getDataTableMeta } from "./tableData/getDataTableMeta";
-export { getColumnFieldFilterOptions } from "./tableData/getColumnFieldFilterOptions";
-export { apiGet, apiPost, apiPut, apiDelete } from "./apiFunctions";
-export { performLogout, fetchPublicToken, validateEmailDomain, submitLoginPassword, handleClientAuthentication, AuthResponse, } from "./auth";
+export * from "./types.js";
+export * from "./axiosInstance.js";
+export * from "./apiFunctions.js";
+export { getDataTableData } from "./tableData/getDataTableData.js";
+export { getDataTableMeta } from "./tableData/getDataTableMeta.js";
+export { getColumnFieldFilterOptions } from "./tableData/getColumnFieldFilterOptions.js";
+export { apiGet, apiPost, apiPut, apiDelete } from "./apiFunctions.js";
+export { performLogout, fetchPublicToken, validateEmailDomain, submitLoginPassword, handleClientAuthentication, AuthResponse, } from "./auth.js";

package/dist/api/index.js

@@ -1,8 +1,8 @@
-export * from "./types";
-export * from "./axiosInstance";
-export * from "./apiFunctions";
-export { getDataTableData } from "./tableData/getDataTableData";
-export { getDataTableMeta } from "./tableData/getDataTableMeta";
-export { getColumnFieldFilterOptions } from "./tableData/getColumnFieldFilterOptions";
-export { apiGet, apiPost, apiPut, apiDelete } from "./apiFunctions";
-export { performLogout, fetchPublicToken, validateEmailDomain, submitLoginPassword, handleClientAuthentication, } from "./auth";
+export * from "./types.js";
+export * from "./axiosInstance.js";
+export * from "./apiFunctions.js";
+export { getDataTableData } from "./tableData/getDataTableData.js";
+export { getDataTableMeta } from "./tableData/getDataTableMeta.js";
+export { getColumnFieldFilterOptions } from "./tableData/getColumnFieldFilterOptions.js";
+export { apiGet, apiPost, apiPut, apiDelete } from "./apiFunctions.js";
+export { performLogout, fetchPublicToken, validateEmailDomain, submitLoginPassword, handleClientAuthentication, } from "./auth.js";

package/dist/api/tableData/getColumnFieldFilterOptions.d.ts

@@ -1,2 +1,2 @@
-import type { DataTableMetaFormatted } from "../types";
+import type { DataTableMetaFormatted } from "../types.js";
 export declare const getColumnFieldFilterOptions: (recordRoute: string, options?: {}, params?: {}) => Promise<DataTableMetaFormatted>;

package/dist/api/tableData/getColumnFieldFilterOptions.js

@@ -1,4 +1,4 @@
-import { apiGet } from "../apiFunctions";
+import { apiGet } from "../apiFunctions.js";
 export const getColumnFieldFilterOptions = async (recordRoute, options = {}, params = {}) => {
     const response = (await apiGet(`/${recordRoute}`, options, params));
     if (!response.isSuccess) {

package/dist/api/tableData/getDataTableData.d.ts

@@ -1,4 +1,4 @@
-import type { DataTableMetaProp } from "../types";
+import type { DataTableMetaProp } from "../types.js";
 export declare const getDataTableData: (tableViewMeta: DataTableMetaProp, additionalData?: {
     page?: number;
     hasInfiniteScroll?: boolean;

package/dist/api/tableData/getDataTableData.js

@@ -1,7 +1,7 @@
 // src/api/tableData.ts (toga-blox)
 // Generic TOGa API functions shared across all consuming apps
 // Supply-specific logic lives in the consuming app via additionalData/extraWhereConditions
-import { apiGet } from "../apiFunctions";
+import { apiGet } from "../apiFunctions.js";
 export const getDataTableData = async (tableViewMeta, additionalData = {}, extraFields = [], searchParams, options) => {
     // console.group(`[getDataTableData] slug: ${dataTableMeta?.slug}`);
     // console.log("dataTableMeta:", dataTableMeta);
@@ -67,19 +67,12 @@ export const getDataTableData = async (tableViewMeta, additionalData = {}, extra
         uuid: "uuid",
     };
     for (const field of tableViewFields) {
-        if (extraFields.length === 0) {
-            apiOptions.fields.push(field.tableViewField);
-        }
         lookupTableViewFieldsBySlug[field.slug] = field.tableViewField;
         if (field.hyperlinkField) {
-            if (extraFields.length === 0)
-                apiOptions.fields.push(field.hyperlinkField);
             lookupTableViewFieldsBySlug[`${field.slug}_hyperlink`] =
                 field.hyperlinkField;
         }
         if (field.imageUrlField) {
-            if (extraFields.length === 0)
-                apiOptions.fields.push(field.imageUrlField);
             lookupTableViewFieldsBySlug[`${field.slug}_imageUrl`] =
                 field.imageUrlField;
         }
@@ -88,10 +81,20 @@ export const getDataTableData = async (tableViewMeta, additionalData = {}, extra
     if (tableViewMeta.joins?.length) {
         apiOptions.join = [];
         apiOptions.ojoin = [];
+        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}@${j.alias}`]: { [j.onA]: [j.onB] },
+                [tableKey]: {
+                    [stripBackticks(j.onA)]: [stripBackticks(j.onB)],
+                },
             });
         }
         if (apiOptions.join.length === 0)
@@ -484,8 +487,6 @@ export const getDataTableData = async (tableViewMeta, additionalData = {}, extra
         console.groupEnd();
         return;
     }
-    console.log("[getDataTableData] Success. Records count:", parentResponse?.data?.length ?? "unknown");
-    console.groupEnd();
     return parentResponse;
 };
 // ── Page meta ─────────────────────────────────────────────────────

package/dist/api/tableData/getDataTableMeta.d.ts

@@ -1,4 +1,4 @@
-import type { DataTableMetaFormatted } from "../types";
+import type { DataTableMetaFormatted } from "../types.js";
 export declare const getDataTableMeta: (slug: string, options?: {
     onError?: (message: string, extra?: any) => void;
 }) => Promise<DataTableMetaFormatted>;

package/dist/api/tableData/getDataTableMeta.js

@@ -1,4 +1,4 @@
-import { apiGet } from "../apiFunctions";
+import { apiGet } from "../apiFunctions.js";
 // ── Meta ──────────────────────────────────────────────────────────
 export const getDataTableMeta = async (slug, options) => {
     const response = (await apiGet("/table-views/meta", {}, { slug }));

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,276 @@
+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(" ");
+function AdvancedSelect(props) {
+    const { errorMessage, isFieldDirty, isFieldError, mode = "single", label, placeholder = "Search...", disabled = false, data, getOptionValue, getOptionLabel, renderOption, 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),
+        item,
+    })), [sourceData, getOptionValue, getOptionLabel]);
+    const options = useMemo(() => {
+        if (findSpecificValue)
+            return allOptions;
+        const q = input.trim().toLowerCase();
+        if (!q)
+            return allOptions;
+        return allOptions.filter((o) => o.label.toLowerCase().includes(q));
+    }, [allOptions, input, findSpecificValue]);
+    // 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]);
+    // 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);
+            setInput(option.label);
+            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 displayedInput = isMulti
+        ? input
+        : open
+            ? input
+            : singleSelectedLabel || input;
+    const chips = isMulti && props.value?.length
+        ? props.value.map((it) => ({
+            value: getOptionValue(it),
+            label: getOptionLabel(it),
+        }))
+        : [];
+    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: [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))), _jsx("input", { ref: inputRef, id: valueKey, type: "text", className: cx(classes.input, mode === "multi" && classes.multiInput), value: 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: _jsx("span", { className: classes.optionCheck, children: isSelected
+                                                    ? getFontAwesomeIcon("check", "regular")
+                                                    : "" }) })), _jsx("span", { children: option.label })] }) }, option.value));
+                        }) })) }) })), errorMessage && (_jsx(BaseErrorMessage, { errorMessage: errorMessage }))] }));
+}
+export default AdvancedSelect;