@pagamio/frontend-commons-lib 0.8.351 → 0.8.352

package/lib/components/ui/PagamioSearchableCombobox.d.ts

@@ -1,5 +1,19 @@
 import * as React from 'react';
 import type { UsePagamioComboboxReturn } from '../../shared/hooks/usePagamioCombobox';
+/**
+ * Optional in-popover action — replaces the old "+ Create New X" sentinel
+ * option pattern that some `<Select>` callers used to inline a "create a
+ * new item" affordance. Rendered as a button row pinned to the top of the
+ * popover, above the options list. Clicking it closes the popover and
+ * fires `onClick` (typically opening a quick-create modal). The handler
+ * is responsible for the side effect; the combobox does NOT update its
+ * `value` automatically.
+ */
+export interface SearchableComboboxActionButton {
+    /** Label shown on the action button (e.g. "+ New category"). */
+    label: React.ReactNode;
+    onClick: () => void;
+}
 export interface PagamioSearchableComboboxProps<T extends {
     id: string;
 }> {
@@ -8,6 +22,12 @@ export interface PagamioSearchableComboboxProps<T extends {
     /** Controlled selected id, or null when nothing is selected. */
     value: string | null;
     onChange: (id: string | null) => void;
+    /**
+     * Optional action button rendered at the top of the popover. Used to
+     * surface a "+ Create new …" affordance inside the picker itself,
+     * matching where the old static-select sentinel option lived.
+     */
+    actionButton?: SearchableComboboxActionButton;
     /**
      * Optional pre-resolved selected option. When set, the trigger shows its
      * label without needing to fetch via `restoreIds`. If both this and the
@@ -39,4 +59,4 @@ export interface PagamioSearchableComboboxProps<T extends {
 }
 export declare function PagamioSearchableCombobox<T extends {
     id: string;
-}>({ combobox, value, onChange, selectedOption, placeholder, searchPlaceholder, emptyMessage, cappedMessage, loadingMessage, disabled, required, name, getLabel, renderOption, renderSelected, className, triggerClassName, contentClassName, }: PagamioSearchableComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
+}>({ combobox, value, onChange, actionButton, selectedOption, placeholder, searchPlaceholder, emptyMessage, cappedMessage, loadingMessage, disabled, required, name, getLabel, renderOption, renderSelected, className, triggerClassName, contentClassName, }: PagamioSearchableComboboxProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/components/ui/PagamioSearchableCombobox.js

@@ -19,7 +19,7 @@ function defaultGetLabel(option) {
     const o = option;
     return o.name ?? option.id;
 }
-export function PagamioSearchableCombobox({ combobox, value, onChange, selectedOption, placeholder = 'Select…', searchPlaceholder = 'Search...', emptyMessage = 'No options found', cappedMessage = 'Showing top results — refine your search.', loadingMessage = 'Loading…', disabled, required, name, getLabel = defaultGetLabel, renderOption, renderSelected, className, triggerClassName, contentClassName, }) {
+export function PagamioSearchableCombobox({ combobox, value, onChange, actionButton, selectedOption, placeholder = 'Select…', searchPlaceholder = 'Search...', emptyMessage = 'No options found', cappedMessage = 'Showing top results — refine your search.', loadingMessage = 'Loading…', disabled, required, name, getLabel = defaultGetLabel, renderOption, renderSelected, className, triggerClassName, contentClassName, }) {
     const [open, setOpen] = React.useState(false);
     const inputRef = React.useRef(null);
     // Focus the search input when the popover opens — matches the Select's
@@ -52,11 +52,18 @@ export function PagamioSearchableCombobox({ combobox, value, onChange, selectedO
                                         : placeholder }), _jsx(ChevronDownIcon, { className: "ml-2 h-4 w-4 opacity-50 shrink-0" })] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 4, 
                         // Mirrors SelectContent: same shadow + animation classes, popover
                         // background, popover-foreground text. Width matches trigger.
-                        className: cn('p-0 w-[var(--radix-popover-trigger-width)] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md', contentClassName), children: [_jsx("div", { className: "p-2 border-b border-border", children: _jsx("input", { ref: inputRef, type: "text", placeholder: searchPlaceholder, value: combobox.search, onChange: (e) => combobox.setSearch(e.target.value), onKeyDown: (e) => e.stopPropagation(), className: "w-full px-2 py-1 text-sm border border-input rounded bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring" }) }), _jsx("div", { className: "p-1 max-h-[200px] overflow-y-auto", children: combobox.isLoading && combobox.options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: loadingMessage })) : combobox.error ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-destructive", children: combobox.error.message || 'Failed to load options.' })) : combobox.options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: emptyMessage })) : (_jsxs(_Fragment, { children: [combobox.options.map((option) => {
-                                            const isSelected = option.id === value;
-                                            return (_jsx("button", { type: "button", role: "option", "aria-selected": isSelected, onClick: () => handleSelect(option.id), className: cn(
-                                                // Mirrors SelectItem styling: padding, hover via
-                                                // focus:bg-muted, selected via bg-accent.
-                                                'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none text-left', 'hover:bg-muted focus:bg-muted focus:text-foreground', isSelected && 'bg-accent text-foreground'), children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "line-clamp-1", children: getLabel(option) }), isSelected ? (_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(CheckIcon, { className: "h-4 w-4" }) })) : null] })) }, option.id));
-                                        }), combobox.isCapped ? (_jsx("div", { className: "mt-1 border-t px-2 py-1.5 text-xs text-muted-foreground", children: cappedMessage })) : null] })) })] })] }), name ? _jsx("input", { type: "hidden", name: name, value: value ?? '' }) : null] }));
+                        className: cn('p-0 w-[var(--radix-popover-trigger-width)] min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md', contentClassName), children: [_jsx("div", { className: "p-2 border-b border-border", children: _jsx("input", { ref: inputRef, type: "text", placeholder: searchPlaceholder, value: combobox.search, onChange: (e) => combobox.setSearch(e.target.value), onKeyDown: (e) => e.stopPropagation(), className: "w-full px-2 py-1 text-sm border border-input rounded bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring" }) }), _jsxs("div", { className: "p-1 max-h-[200px] overflow-y-auto", children: [actionButton ? (_jsx("button", { type: "button", onClick: () => {
+                                            setOpen(false);
+                                            actionButton.onClick();
+                                        }, className: cn(
+                                        // Same row geometry as an option row so the picker reads
+                                        // as one consistent list. Primary-coloured label keeps it
+                                        // visually distinct from real options.
+                                        'relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none text-left font-medium text-primary', 'hover:bg-muted focus:bg-muted'), children: actionButton.label }, "__action__")) : null, combobox.isLoading && combobox.options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: loadingMessage })) : combobox.error ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-destructive", children: combobox.error.message || 'Failed to load options.' })) : combobox.options.length === 0 ? (_jsx("div", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: emptyMessage })) : (_jsxs(_Fragment, { children: [combobox.options.map((option) => {
+                                                const isSelected = option.id === value;
+                                                return (_jsx("button", { type: "button", role: "option", "aria-selected": isSelected, onClick: () => handleSelect(option.id), className: cn(
+                                                    // Mirrors SelectItem styling: padding, hover via
+                                                    // focus:bg-muted, selected via bg-accent.
+                                                    'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none text-left', 'hover:bg-muted focus:bg-muted focus:text-foreground', isSelected && 'bg-accent text-foreground'), children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "line-clamp-1", children: getLabel(option) }), isSelected ? (_jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(CheckIcon, { className: "h-4 w-4" }) })) : null] })) }, option.id));
+                                            }), combobox.isCapped ? (_jsx("div", { className: "mt-1 border-t px-2 py-1.5 text-xs text-muted-foreground", children: cappedMessage })) : null] }))] })] })] }), name ? _jsx("input", { type: "hidden", name: name, value: value ?? '' }) : null] }));
 }

package/lib/components/ui/TableDownload.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Dropdown, DropdownItem } from 'flowbite-react';
 import { jsPDF } from 'jspdf';
-import { autoTable } from 'jspdf-autotable';
+import autoTable from 'jspdf-autotable';
 import { FiDownload } from 'react-icons/fi';
 import * as XLSX from 'xlsx';
 const TableDownload = ({ columns, data }) => {

package/lib/form-engine/components/inputs/searchable-combobox/SearchableComboboxInput.js

@@ -34,7 +34,7 @@ const SearchableComboboxInput = forwardRef(({ field, value, onChange }, ref) =>
         debounceMs: source.debounceMs,
         restoreIds,
     });
-    return (_jsxs("div", { ref: ref, children: [field.label && (_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground mb-1", children: field.label })), _jsx(PagamioSearchableCombobox, { combobox: combobox, value: value ?? null, onChange: (id) => onChange?.(id), placeholder: field.placeholder, disabled: field.disabled, required: field.validation?.required ? true : undefined, name: field.name, getLabel: source.getLabel })] }));
+    return (_jsxs("div", { ref: ref, children: [field.label && (_jsx("label", { htmlFor: field.name, className: "block text-sm font-medium text-foreground mb-1", children: field.label })), _jsx(PagamioSearchableCombobox, { combobox: combobox, value: value ?? null, onChange: (id) => onChange?.(id), actionButton: field.actionButton, placeholder: field.placeholder, disabled: field.disabled, required: field.validation?.required ? true : undefined, name: field.name, getLabel: source.getLabel })] }));
 });
 SearchableComboboxInput.displayName = 'SearchableComboboxInput';
 export default SearchableComboboxInput;

package/lib/form-engine/types/index.d.ts

@@ -215,6 +215,17 @@ export interface Field {
      * Tells the form engine how to fetch lookup results.
      */
     source?: ComboboxSourceSpec;
+    /**
+     * Optional in-picker action for `searchable-combobox`. Renders as the
+     * first row of the popover (above the options) — the same place a
+     * "+ Create new …" sentinel option used to live in the old static
+     * `<Select>`. Clicking it closes the popover and fires `onClick`; the
+     * handler owns the side effect (e.g. opens a quick-create modal).
+     */
+    actionButton?: {
+        label: string;
+        onClick: () => void;
+    };
 }
 export interface DependentFieldUpdate {
     field: string;

package/lib/pagamio-table/data-table/TableDownload.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dropdown, DropdownItem } from 'flowbite-react';
 import { jsPDF } from 'jspdf';
-import { autoTable } from 'jspdf-autotable';
+import autoTable from 'jspdf-autotable';
 import { FiDownload } from 'react-icons/fi';
 import * as XLSX from 'xlsx';
 const TableDownload = ({ columns, data }) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.351",
+  "version": "0.8.352",
   "publishConfig": {
     "access": "public",
     "provenance": false