@caratlogic/design-system 0.1.49 → 0.1.51

package/dist/index.esm.js

@@ -26488,6 +26488,21 @@ function pinnedHeaderClass() {
 function pinnedCellClass(pinnedBg) {
     return cn('sticky right-0 z-10', PINNED_BEFORE, PINNED_SHADOW, pinnedBg);
 }
+const ROW_TONE = {
+    warning: 'bg-badge-amber-bg/40 hover:bg-badge-amber-bg/60',
+    info: 'bg-badge-blue-bg/40 hover:bg-badge-blue-bg/60',
+};
+// The pinned cell must stay opaque, so the tint is an overlay painted under its content.
+const PINNED_TONE = {
+    warning: 'after:bg-badge-amber-bg/40',
+    info: 'after:bg-badge-blue-bg/40',
+};
+function rowToneClass(tone) {
+    return ROW_TONE[tone];
+}
+function pinnedToneClass(tone) {
+    return cn('after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:content-[""]', PINNED_TONE[tone]);
+}
 const PINNED_RIGHT_WIDTH = '72px';
 /** Width for a header/body/filter cell: the resized width var while resized or dragging, a fixed width for the pinned actions column. */
 function getColumnWidthStyle(key, isSized, isPinnedRight) {
@@ -27102,7 +27117,7 @@ function DocumentDetailSkeleton({ aside = 'payment', sections = 3, label = 'Load
     return (jsxs("div", { role: "status", "aria-busy": "true", "aria-label": label, className: "space-y-4", children: [jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [jsxs("div", { className: "flex items-center gap-3", children: [jsx(SquareSkeleton, { height: 14, width: 80, rounded: "full" }), jsx("span", { className: "h-5 w-px bg-border" }), jsx(SquareSkeleton, { height: 28, width: 200, rounded: "md" }), jsx(SquareSkeleton, { height: 22, width: 72, rounded: "full" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(SquareSkeleton, { height: 36, width: 112, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 80, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 128, rounded: "lg" }), jsx(SquareSkeleton, { height: 36, width: 36, rounded: "lg" })] })] }), jsxs("section", { "aria-hidden": "true", className: "grid grid-cols-1 overflow-hidden rounded-2xl border border-border bg-card md:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]", children: [jsxs("div", { className: "flex flex-col justify-center space-y-3 px-5 py-4 sm:px-7 sm:py-4", children: [jsx(SquareSkeleton, { height: 12, width: 96, rounded: "full" }), jsx(SquareSkeleton, { height: 40, width: 220, rounded: "md" }), aside !== 'none' && (jsxs("div", { className: "w-full max-w-xl space-y-2 pt-1", children: [jsx(SquareSkeleton, { height: 8, className: "w-full", rounded: "full" }), jsxs("div", { className: "flex justify-between", children: [jsx(SquareSkeleton, { height: 11, width: 88, rounded: "full" }), jsx(SquareSkeleton, { height: 11, width: 40, rounded: "full" })] })] }))] }), jsx("div", { className: "border-t border-border bg-muted/40 px-5 py-2 md:border-l md:border-t-0", children: [0, 1, 2, 3].map((i) => (jsxs("div", { className: "flex min-h-10 items-center gap-3 border-b border-border py-1.5 last:border-b-0", children: [jsx(SquareSkeleton, { height: 24, width: 24, rounded: "md" }), jsx(SquareSkeleton, { height: 12, width: 72, rounded: "full" }), jsx(SquareSkeleton, { height: 12, width: 88, rounded: "full", className: "ml-auto" })] }, i))) })] }), Array.from({ length: sections }).map((_, s) => (jsxs("section", { "aria-hidden": "true", className: "overflow-hidden rounded-2xl border border-border bg-card", children: [jsxs("div", { className: "flex items-center gap-2.5 border-b border-border px-4 py-3", children: [jsx(SquareSkeleton, { height: 28, width: 28, rounded: "lg" }), jsx(SquareSkeleton, { height: 15, width: 128, rounded: "full" })] }), jsx("div", { className: "space-y-3 p-4", children: Array.from({ length: s === 1 ? 4 : 2 }).map((__, row) => (jsx(SquareSkeleton, { height: s === 1 ? 36 : 14, className: row % 2 ? 'w-3/4' : 'w-full', rounded: "md" }, row))) })] }, s))), jsx("span", { className: "sr-only", children: label })] }));
 }
 
-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, striped = true, emptyState, loading = false, loadingRows = 10, filterRowLeading, onColumnReorder, }) {
+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, striped = true, emptyState, loading = false, loadingRows = 10, filterRowLeading, onColumnReorder, getRowTone, }) {
     const showSelectionColumn = enableSelection && (!isArchiveView || selectionInArchiveView);
     const vBorder = showGrid ? 'border-r' : '';
     const { localWidths, draggingKey, tableRef, handleResizeMouseDown } = useColumnResize({
@@ -27158,13 +27173,16 @@ function DataEditableTable({ data, columns, onRowClick, enableSelection = false,
                                     const isEditing = editingRow === row.id && editingRow !== null;
                                     const isSaving = savingRow === row.id;
                                     const isSelected = selectedSet.has(row.id);
+                                    const tone = isEditing || isSelected ? undefined : getRowTone?.(row);
                                     const bgClass = isEditing
                                         ? 'bg-warning/10 hover:bg-warning/10'
                                         : isSelected
                                             ? 'bg-primary/10 hover:bg-primary/10'
-                                            : !striped || rowIndex % 2 === 0
-                                                ? 'bg-card hover:bg-secondary'
-                                                : 'bg-background hover:bg-secondary';
+                                            : tone
+                                                ? rowToneClass(tone)
+                                                : !striped || 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);
@@ -27182,7 +27200,7 @@ function DataEditableTable({ data, columns, onRowClick, enableSelection = false,
                                                         ? 'bg-[#FEFCE8] dark:bg-[#422006]'
                                                         : isSelected
                                                             ? 'bg-[#EFF6FF] dark:bg-[#172554]'
-                                                            : 'bg-card group-hover/row:bg-table-header'
+                                                            : cn('bg-card group-hover/row:bg-table-header', tone && pinnedToneClass(tone))
                                                     : '';
                                                 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'
@@ -42838,14 +42856,22 @@ searchPlaceholder = 'Search...', emptyMessage = 'No options available', ...props
     const searchCtx = useSelectSearchContext();
     const searchTerm = searchCtx?.searchTerm ?? '';
     const setSearchTerm = searchCtx?.setSearchTerm;
+    const searchInputRef = React.useRef(null);
     // Clear search when the content unmounts (safety)
     React.useEffect(() => {
         return () => setSearchTerm?.('');
     }, [setSearchTerm]);
     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), 
+                '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", { ref: searchInputRef, 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, { "data-slot": "select-viewport", style: {
+                                onKeyDown: (e) => e.stopPropagation(), 
+                                // When the search hides the selected item, Radix moves focus to
+                                // the list itself; keep it in the search box so typing goes on.
+                                onBlur: (e) => {
+                                    if (e.relatedTarget?.getAttribute('role') === 'listbox') {
+                                        searchInputRef.current?.focus();
+                                    }
+                                } })] }) })), 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, {})] }) }));