@caratlogic/design-system 0.1.20 → 0.1.21

package/dist/index.esm.js

@@ -21178,9 +21178,9 @@ function useSelectedComboboxOption(value, options) {
     }, [normalizedValue, options]);
 }
 
-function CustomCombobox({ options, placeholder = 'Select option...', value, onChange, className, }) {
+function CustomCombobox({ options, placeholder = 'Select option...', value, onChange, className, emptyMessage = 'No option found.', }) {
     const selectedItem = useSelectedComboboxOption(value, options);
-    return (jsx(SearchableSelect, { selectedItem: selectedItem, onChange: (opt) => onChange(opt.label), getOptionKey: (o) => o.value, getOptionLabel: (o) => o.label, options: options, searchPlaceholder: placeholder, emptyMessage: "No option found.", className: className }));
+    return (jsx(SearchableSelect, { selectedItem: selectedItem, onChange: (opt) => onChange(opt.label), getOptionKey: (o) => o.value, getOptionLabel: (o) => o.label, options: options, searchPlaceholder: placeholder, emptyMessage: emptyMessage, className: className }));
 }
 
 function useExpandableRows() {
@@ -21579,7 +21579,7 @@ function EditableCellContent({ col, row, value, isEditing, width, onEditValueCha
     return jsx(Fragment$2, { children: clipToWidth(stringValue, width) });
 }
 
-function DataEditableTable({ data, columns, onRowClick, enableSelection = false, columnStyles = {}, onEditChange, onSaveRow, sortBy, setSortBy, sortOrder, setSortOrder, saving, selectedRows = [], onSelectionChange, isArchiveView = false, selectionInArchiveView = false, permissionKey = '', columnWidths, onColumnResize, pagination, fetchBusinessContacts, showGrid = true, }) {
+function DataEditableTable({ data, columns, onRowClick, enableSelection = false, columnStyles = {}, onEditChange, onSaveRow, sortBy, setSortBy, sortOrder, setSortOrder, saving, selectedRows = [], onSelectionChange, isArchiveView = false, selectionInArchiveView = false, permissionKey = '', columnWidths, onColumnResize, pagination, fetchBusinessContacts, showGrid = true, emptyState, }) {
     const showSelectionColumn = enableSelection && (!isArchiveView || selectionInArchiveView);
     const vBorder = showGrid ? 'border-r' : '';
     const { localWidths, draggingKey, tableRef, handleResizeMouseDown } = useColumnResize({
@@ -21603,77 +21603,73 @@ function DataEditableTable({ data, columns, onRowClick, enableSelection = false,
             setSortOrder('asc');
         }
     };
-    return (jsxs("div", { className: "w-full h-full rounded-lg border border-border bg-card flex flex-col overflow-hidden", children: [jsx("div", { className: "overflow-auto flex-1", children: jsxs("table", { ref: tableRef, className: "min-w-[70vh] w-full text-xs text-center border-separate", style: { borderSpacing: 0 }, children: [jsx("thead", { className: "sticky top-0 z-20 !bg-table-header border-b border-border text-secondary-foreground text-sm", children: jsxs("tr", { className: "h-[40px]", children: [!isArchiveView && (jsx("th", { className: cn('px-3 py-1.5 text-left font-semibold w-8 first:!pl-6 border-b border-solid !border-border', vBorder) })), showSelectionColumn && (jsx("th", { className: cn('px-3 py-1.5 text-center font-semibold first:!pl-6 border-b border-solid !border-border', vBorder), children: jsx(Checkbox, { checked: allSelected
-                                                ? true
-                                                : someSelected
-                                                    ? 'indeterminate'
-                                                    : false, onCheckedChange: toggleSelectAll }) })), columns.map((col) => {
-                                        const w = localWidths[col.key];
-                                        const isDragging = draggingKey === col.key;
-                                        const isPinnedRight = col.key === 'actions';
-                                        const thStyle = w || isDragging
-                                            ? {
-                                                width: `var(--col-w-${col.key})`,
-                                                minWidth: `var(--col-w-${col.key})`,
-                                                maxWidth: `var(--col-w-${col.key})`,
-                                            }
-                                            : isPinnedRight
-                                                ? { width: '72px', minWidth: '72px', maxWidth: '72px' }
-                                                : undefined;
-                                        return (jsxs("th", { className: cn('px-4 py-1.5 relative first:!pl-6 text-left whitespace-nowrap font-semibold text-sm border-b border-solid !border-border', vBorder, isArchiveView && !isPinnedRight && 'pl-1', col.sortable && '!cursor-pointer hover:bg-muted/60', isDragging && 'bg-primary/10', isPinnedRight && pinnedHeaderClass()), style: thStyle, onClick: () => handleColumnClick(col.key, col.sortable), children: [jsxs("div", { className: cn('gap-2', w && 'overflow-hidden', col.sortable && 'flex items-center !cursor-pointer', isPinnedRight && 'flex items-center justify-center'), children: [w && typeof col.header === 'string' ? (jsx("span", { className: "truncate", title: col.header, children: col.header })) : (col.header), col.sortable && (jsx(SortIcon, { active: sortBy === col.key, order: sortOrder }))] }), jsx("div", { className: cn('absolute right-0 top-0 h-full w-1.5 z-20 cursor-col-resize select-none transition-colors hover:bg-primary/40', isDragging && 'bg-primary/40'), onMouseDown: (e) => handleResizeMouseDown(e, col.key), onClick: (e) => e.stopPropagation() })] }, col.key.toString()));
-                                    })] }) }), jsx("tbody", { children: data.length === 0 ? (jsx("tr", { className: "h-12", children: jsx("td", { colSpan: columns.length +
-                                        (!isArchiveView ? 1 : 0) +
-                                        (showSelectionColumn ? 1 : 0), className: "text-center p-6 text-muted-foreground", children: "No data available" }) })) : (data.map((row, rowIndex) => {
-                                const isEditing = editingRow === row.id && editingRow !== null;
-                                const isSaving = savingRow === row.id;
-                                const isSelected = selectedSet.has(row.id);
-                                const bgClass = isEditing
-                                    ? 'bg-warning/10 hover:bg-warning/10'
-                                    : isSelected
-                                        ? 'bg-primary/10 hover:bg-primary/10'
-                                        : rowIndex % 2 === 0
-                                            ? 'bg-card hover:bg-secondary'
-                                            : 'bg-background hover:bg-secondary';
-                                return (jsxs("tr", { className: cn('group/row h-[46px] transition-colors text-sm text-table-cell', bgClass, onRowClick && 'cursor-pointer'), onClick: () => onRowClick?.(row), children: [isArchiveView ? null : (jsx("td", { className: cn('px-3 py-1.5 text-center first:!pl-6 border-b border-solid !border-border', vBorder), children: jsx(Protected, { module: permissionKey, minLevel: PERMISSIONS.WRITE, children: jsx("button", { onClick: (e) => {
-                                                        e.stopPropagation();
-                                                        handleEditIconClick(row.id, row);
-                                                    }, disabled: isSaving, className: cn('p-1 rounded hover:bg-primary/20 transition-colors !cursor-pointer', isEditing
-                                                        ? 'text-success'
-                                                        : 'text-muted-foreground'), children: isSaving ? (jsx(LoaderCircle, { size: 16, className: "animate-spin text-primary" })) : isEditing ? (jsx(Check, { size: 16 })) : (jsx(Pencil, { size: 16 })) }) }) })), showSelectionColumn && (jsx("td", { className: cn('px-3 py-1.5 first:!pl-6 border-b border-solid !border-border', vBorder), onClick: (e) => e.stopPropagation(), children: jsx(Checkbox, { checked: isSelected, onCheckedChange: () => toggleRow(row.id) }) })), columns.map((col) => {
-                                            const value = isEditing
-                                                ? editValues[col.key]
-                                                : row[col.key];
+    return (jsxs("div", { className: "w-full h-full rounded-lg border border-border bg-card flex flex-col overflow-hidden", children: [jsxs("div", { className: "overflow-auto flex-1", children: [jsxs("table", { ref: tableRef, className: "min-w-[70vh] w-full text-xs text-center border-separate", style: { borderSpacing: 0 }, children: [jsx("thead", { className: "sticky top-0 z-20 !bg-table-header border-b border-border text-secondary-foreground text-sm", children: jsxs("tr", { className: "h-[40px]", children: [!isArchiveView && (jsx("th", { className: cn('px-3 py-1.5 text-left font-semibold w-8 first:!pl-6 border-b border-solid !border-border', vBorder) })), showSelectionColumn && (jsx("th", { className: cn('px-3 py-1.5 text-center font-semibold first:!pl-6 border-b border-solid !border-border', vBorder), children: jsx(Checkbox, { checked: allSelected
+                                                    ? true
+                                                    : someSelected
+                                                        ? 'indeterminate'
+                                                        : false, onCheckedChange: toggleSelectAll }) })), columns.map((col) => {
                                             const w = localWidths[col.key];
+                                            const isDragging = draggingKey === col.key;
                                             const isPinnedRight = col.key === 'actions';
-                                            const tdStyle = w || draggingKey === col.key
+                                            const thStyle = w || isDragging
                                                 ? {
                                                     width: `var(--col-w-${col.key})`,
                                                     minWidth: `var(--col-w-${col.key})`,
                                                     maxWidth: `var(--col-w-${col.key})`,
                                                 }
                                                 : isPinnedRight
+                                                    ? { width: '72px', minWidth: '72px', maxWidth: '72px' }
+                                                    : undefined;
+                                            return (jsxs("th", { className: cn('px-4 py-1.5 relative first:!pl-6 text-left whitespace-nowrap font-semibold text-sm border-b border-solid !border-border', vBorder, isArchiveView && !isPinnedRight && 'pl-1', col.sortable && '!cursor-pointer hover:bg-muted/60', isDragging && 'bg-primary/10', isPinnedRight && pinnedHeaderClass()), style: thStyle, onClick: () => handleColumnClick(col.key, col.sortable), children: [jsxs("div", { className: cn('gap-2', w && 'overflow-hidden', col.sortable && 'flex items-center !cursor-pointer', isPinnedRight && 'flex items-center justify-center'), children: [w && typeof col.header === 'string' ? (jsx("span", { className: "truncate", title: col.header, children: col.header })) : (col.header), col.sortable && (jsx(SortIcon, { active: sortBy === col.key, order: sortOrder }))] }), jsx("div", { className: cn('absolute right-0 top-0 h-full w-1.5 z-20 cursor-col-resize select-none transition-colors hover:bg-primary/40', isDragging && 'bg-primary/40'), onMouseDown: (e) => handleResizeMouseDown(e, col.key), onClick: (e) => e.stopPropagation() })] }, col.key.toString()));
+                                        })] }) }), jsx("tbody", { children: data.map((row, rowIndex) => {
+                                    const isEditing = editingRow === row.id && editingRow !== null;
+                                    const isSaving = savingRow === row.id;
+                                    const isSelected = selectedSet.has(row.id);
+                                    const bgClass = isEditing
+                                        ? 'bg-warning/10 hover:bg-warning/10'
+                                        : isSelected
+                                            ? 'bg-primary/10 hover:bg-primary/10'
+                                            : rowIndex % 2 === 0
+                                                ? 'bg-card hover:bg-secondary'
+                                                : 'bg-background hover:bg-secondary';
+                                    return (jsxs("tr", { className: cn('group/row h-[46px] transition-colors text-sm text-table-cell', bgClass, onRowClick && 'cursor-pointer'), onClick: () => onRowClick?.(row), children: [isArchiveView ? null : (jsx("td", { className: cn('px-3 py-1.5 text-center first:!pl-6 border-b border-solid !border-border', vBorder), children: jsx(Protected, { module: permissionKey, minLevel: PERMISSIONS.WRITE, children: jsx("button", { onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            handleEditIconClick(row.id, row);
+                                                        }, disabled: isSaving, className: cn('p-1 rounded hover:bg-primary/20 transition-colors !cursor-pointer', isEditing ? 'text-success' : 'text-muted-foreground'), children: isSaving ? (jsx(LoaderCircle, { size: 16, className: "animate-spin text-primary" })) : isEditing ? (jsx(Check, { size: 16 })) : (jsx(Pencil, { size: 16 })) }) }) })), showSelectionColumn && (jsx("td", { className: cn('px-3 py-1.5 first:!pl-6 border-b border-solid !border-border', vBorder), onClick: (e) => e.stopPropagation(), children: jsx(Checkbox, { checked: isSelected, onCheckedChange: () => toggleRow(row.id) }) })), columns.map((col) => {
+                                                const value = isEditing
+                                                    ? editValues[col.key]
+                                                    : row[col.key];
+                                                const w = localWidths[col.key];
+                                                const isPinnedRight = col.key === 'actions';
+                                                const tdStyle = w || draggingKey === col.key
                                                     ? {
-                                                        width: '72px',
-                                                        minWidth: '72px',
-                                                        maxWidth: '72px',
+                                                        width: `var(--col-w-${col.key})`,
+                                                        minWidth: `var(--col-w-${col.key})`,
+                                                        maxWidth: `var(--col-w-${col.key})`,
                                                     }
-                                                    : undefined;
-                                            // Pinned cells need an OPAQUE bg matching the row state so the
-                                            // scrolling content underneath doesn't bleed through — no alpha tints.
-                                            const pinnedBg = isPinnedRight
-                                                ? isEditing
-                                                    ? 'bg-[#FEFCE8] dark:bg-[#422006]'
-                                                    : isSelected
-                                                        ? 'bg-[#EFF6FF] dark:bg-[#172554]'
-                                                        : 'bg-card group-hover/row:bg-table-header'
-                                                : '';
-                                            return (jsx("td", { className: cn('px-4 py-1.5 first:!pl-6 border-b border-border whitespace-nowrap text-table-cell border-solid !border-border', vBorder, isPinnedRight || col.align === 'center'
-                                                    ? 'text-center'
-                                                    : typeof value === 'number'
-                                                        ? 'text-right'
-                                                        : 'text-left', isArchiveView && !isPinnedRight && 'pl-2', columnStyles?.[col.key.toString()] || '', draggingKey === col.key && 'bg-primary/5', isPinnedRight && pinnedCellClass(pinnedBg)), style: tdStyle, children: jsx(EditableCellContent, { col: col, row: row, value: value, isEditing: isEditing, width: w, onEditValueChange: handleEditValueChange, fetchBusinessContacts: fetchBusinessContacts }) }, col.key.toString()));
-                                        })] }, row.id));
-                            })) })] }) }), pagination] }));
+                                                    : isPinnedRight
+                                                        ? {
+                                                            width: '72px',
+                                                            minWidth: '72px',
+                                                            maxWidth: '72px',
+                                                        }
+                                                        : undefined;
+                                                // Pinned cells need an OPAQUE bg matching the row state so the
+                                                // scrolling content underneath doesn't bleed through — no alpha tints.
+                                                const pinnedBg = isPinnedRight
+                                                    ? isEditing
+                                                        ? 'bg-[#FEFCE8] dark:bg-[#422006]'
+                                                        : isSelected
+                                                            ? 'bg-[#EFF6FF] dark:bg-[#172554]'
+                                                            : 'bg-card group-hover/row:bg-table-header'
+                                                    : '';
+                                                return (jsx("td", { className: cn('px-4 py-1.5 first:!pl-6 border-b border-border whitespace-nowrap text-table-cell border-solid !border-border', vBorder, isPinnedRight || col.align === 'center'
+                                                        ? 'text-center'
+                                                        : typeof value === 'number'
+                                                            ? 'text-right'
+                                                            : 'text-left', isArchiveView && !isPinnedRight && 'pl-2', columnStyles?.[col.key.toString()] || '', draggingKey === col.key && 'bg-primary/5', isPinnedRight && pinnedCellClass(pinnedBg)), style: tdStyle, children: jsx(EditableCellContent, { col: col, row: row, value: value, isEditing: isEditing, width: w, onEditValueChange: handleEditValueChange, fetchBusinessContacts: fetchBusinessContacts }) }, col.key.toString()));
+                                            })] }, row.id));
+                                }) })] }), data.length === 0 && (jsx("div", { className: "sticky left-0 flex w-full items-center justify-center p-6 text-sm text-muted-foreground", children: emptyState ?? 'No data available' }))] }), pagination] }));
 }
 
 /**
@@ -37147,7 +37143,7 @@ function SelectTrigger({ className, size = 'default', children, ...props }) {
     return (jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("border-input-border cursor-pointer data-[placeholder]:!text-[var(--placeholder)] data-[placeholder]:!text-sm [&_[data-placeholder]]:!text-[var(--placeholder)] [&_[data-placeholder]]:!text-sm [&_span[data-placeholder]]:!text-[var(--placeholder)] [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap shadow-[0_1px_2px_0_rgba(0,0,0,0.05)] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:bg-muted/50 disabled:text-label data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, jsx(SelectPrimitive.Icon, { asChild: true, children: jsx(ChevronDown, { className: "size-4 text-gray-600" }) })] }));
 }
 function SelectContent({ className, children, position = 'popper', searchable = true, // default: all selects are searchable
-searchPlaceholder = 'Search...', ...props }) {
+searchPlaceholder = 'Search...', emptyMessage = 'No options available', ...props }) {
     // Use the shared search context provided by Select root
     const searchCtx = useSelectSearchContext();
     const searchTerm = searchCtx?.searchTerm ?? '';
@@ -37159,7 +37155,9 @@ searchPlaceholder = 'Search...', ...props }) {
     return (jsx(SelectPrimitive.Portal, { children: jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn('bg-card cursor-pointer text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border shadow-[0_10px_15px_-3px_rgba(0,0,0,0.10),0_4px_6px_-4px_rgba(0,0,0,0.10)]', position === 'popper' &&
                 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [searchable && (jsx("div", { className: "p-2 pb-1", children: jsxs("div", { className: "flex h-9 w-full items-center gap-2 rounded-lg bg-secondary px-3", children: [jsx(Search, { className: "h-4 w-4 shrink-0 text-[#737373]", "aria-hidden": "true" }), jsx("input", { type: "search", className: "min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-placeholder", placeholder: searchPlaceholder, value: searchTerm, onChange: (e) => setSearchTerm?.(e.target.value), 
                                 // prevent keys from interfering with Radix keyboard nav
-                                onKeyDown: (e) => e.stopPropagation() })] }) })), jsx(SelectScrollUpButton, {}), jsx(SelectPrimitive.Viewport, { className: cn('p-1 max-h-[12.5rem] overflow-y-auto', position === 'popper' &&
+                                onKeyDown: (e) => e.stopPropagation() })] }) })), jsx(SelectScrollUpButton, {}), jsx(SelectPrimitive.Viewport, { "data-slot": "select-viewport", style: {
+                        '--select-empty-message': JSON.stringify(searchTerm ? 'No matching options' : emptyMessage),
+                    }, className: cn('p-1 max-h-[12.5rem] overflow-y-auto', 'empty:after:block empty:after:px-2 empty:after:py-4 empty:after:text-center empty:after:text-sm empty:after:text-muted-foreground empty:after:content-(--select-empty-message)', position === 'popper' &&
                         'w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'), children: children }), jsx(SelectScrollDownButton, {})] }) }));
 }
 // 👇 Add searchValue + withCheckbox props here