atlas-react-kit 1.2.4 → 1.2.5

package/dist/combobox.js

@@ -6,6 +6,7 @@ import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { formControlTriggerClassName } from "./internal/form-control.js";
 import { handleListboxKey } from "./internal/listbox-navigation.js";
+import { clamp } from "./internal/math.js";
 import { Listbox, ListboxEmptyStatus, listboxInputAria, PickerOption, } from "./internal/listbox-option.js";
 import { createSearchIndex, filterSearchIndex, foldSearchText, normalizeSearchQuery, } from "./internal/search.js";
 import { emptyValueText } from "./internal/styles.js";
@@ -53,7 +54,7 @@ function resolveCreateValue(query, existingValues, normalize) {
 export function Combobox({ options, value, onValueChange, placeholder = "Select", searchPlaceholder = "Search", emptyText, disabled, id, className, listClassName, contentClassName, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, creatable = false, normalizeCreateValue = defaultNormalizeCreateValue, createLabel = defaultCreateLabel, ...props }) {
     const [open, setOpen] = React.useState(false);
     const [query, setQuery] = React.useState("");
-    const [highlight, setHighlight] = React.useState(0);
+    const [highlightIndex, setHighlight] = React.useState(0);
     const listId = React.useId();
     const generatedId = React.useId();
     const triggerId = id ?? generatedId;
@@ -84,6 +85,7 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             : null;
     }, [creatable, query, existingValues, normalizeCreateValue, createLabel]);
     const list = createOption ? [...filtered, createOption] : filtered;
+    const highlight = clamp(highlightIndex, 0, Math.max(0, list.length - 1));
     const onOpenChange = (next) => {
         setOpen(next);
         if (!next) {

package/dist/error-boundary.d.ts

@@ -10,9 +10,7 @@ type ErrorFallbackProps = {
     className?: string;
 };
 /**
- * Presentational recovery UI used by `ErrorBoundary`: a large `EmptyPanel`
- * with the message and recovery buttons. Exported so the markup can be
- * tested without throwing during render.
+ * Recovery UI used by `ErrorBoundary`: a large `EmptyPanel` with recovery buttons.
  */
 export declare function ErrorFallback({ message, onRetry, onReload, className, }: ErrorFallbackProps): import("react").JSX.Element;
 type ErrorBoundaryProps = {
@@ -24,15 +22,14 @@ type ErrorBoundaryProps = {
     onError?: (error: Error, info: ErrorInfo) => void;
 };
 type ErrorBoundaryState = {
-    error: Error | null;
+    hasError: boolean;
 };
 /**
  * Generic React error boundary with retry (reset) and full-page reload.
- * Not tied to any data library.
  */
 export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
     state: ErrorBoundaryState;
-    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    static getDerivedStateFromError(): ErrorBoundaryState;
     componentDidCatch(error: Error, info: ErrorInfo): void;
     retry: () => void;
     reload: () => void;

package/dist/error-boundary.js

@@ -5,9 +5,7 @@ import { Button } from "./button.js";
 import { EmptyPanel } from "./empty-panel.js";
 import { cn } from "./utils.js";
 /**
- * Presentational recovery UI used by `ErrorBoundary`: a large `EmptyPanel`
- * with the message and recovery buttons. Exported so the markup can be
- * tested without throwing during render.
+ * Recovery UI used by `ErrorBoundary`: a large `EmptyPanel` with recovery buttons.
  */
 export function ErrorFallback({ message = "Something went wrong.", onRetry, onReload, className, }) {
     return (_jsxs(EmptyPanel, { role: "alert", "data-slot": "error-boundary", size: "lg", 
@@ -16,24 +14,23 @@ export function ErrorFallback({ message = "Something went wrong.", onRetry, onRe
 }
 /**
  * Generic React error boundary with retry (reset) and full-page reload.
- * Not tied to any data library.
  */
 export class ErrorBoundary extends Component {
-    state = { error: null };
-    static getDerivedStateFromError(error) {
-        return { error };
+    state = { hasError: false };
+    static getDerivedStateFromError() {
+        return { hasError: true };
     }
     componentDidCatch(error, info) {
         this.props.onError?.(error, info);
     }
     retry = () => {
-        this.setState({ error: null });
+        this.setState({ hasError: false });
     };
     reload = () => {
         window.location.reload();
     };
     render() {
-        if (!this.state.error)
+        if (!this.state.hasError)
             return this.props.children;
         return (_jsx(ErrorFallback, { message: this.props.message, onRetry: this.retry, onReload: this.reload }));
     }

package/dist/kanban.js

@@ -7,7 +7,7 @@ import { CheckCircle2, ChevronLeft, ChevronRight, GripVertical, Trash2, } from "
 import { Button } from "./button.js";
 import { KANBAN_COMPLETE_ID, KANBAN_DELETE_ID, buildKanbanGroups, kanbanOverflowEdges, kanbanScrollBy, resolveKanbanDrop, } from "./internal/kanban-layout.js";
 import { configureCardSortablePlugins, configureKanbanPlugins, } from "./internal/kanban-plugins.js";
-import { focusRingWithin } from "./internal/styles.js";
+import { focusRing } from "./internal/styles.js";
 import { revealInline } from "./internal/use-horizontal-overflow.js";
 import { Skeleton } from "./skeleton.js";
 import { cn } from "./utils.js";
@@ -134,6 +134,7 @@ function KanbanColumnView({ column, count, emptyLabel, loading, className, child
 }
 const cardChrome = cn("flex border border-border bg-card text-card-foreground");
 const handleChrome = cn("flex shrink-0 items-center self-stretch border-r border-border", "bg-muted/30 px-1.5 text-muted-foreground");
+const stopFocus = cn(focusRing, "relative focus-visible:z-10");
 function stopClick(event) {
     event.stopPropagation();
 }
@@ -150,9 +151,7 @@ function KanbanCardViewImpl({ item, index, column, onCardClick, className, rende
     });
     return (_jsxs("div", { ref: ref, "data-slot": "kanban-card", "data-dragging": isDragging || undefined, className: cn(cardChrome, "shadow-sm transition-[box-shadow,opacity,border-color]", 
         // The overlay moves; the source keeps its slot.
-        "data-dragging:pointer-events-none data-dragging:invisible", 
-        // One ring on the card for the grip and the body alike.
-        focusRingWithin, onCardClick && "hover:border-foreground/15", className), children: [_jsx("button", { type: "button", ref: handleRef, "data-slot": "kanban-card-handle", "aria-label": "Drag to move", onClick: stopClick, className: cn(handleChrome, "cursor-grab outline-none hover:bg-muted/50 active:cursor-grabbing"), children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }), onCardClick ? (_jsx("button", { type: "button", "data-slot": "kanban-card-body", onClick: () => onCardClick(item), className: "min-w-0 flex-1 cursor-pointer p-3 text-left outline-none hover:bg-muted/20", children: children })) : (_jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1 p-3", children: children }))] }));
+        "data-dragging:pointer-events-none data-dragging:invisible", onCardClick && "hover:border-foreground/15", className), children: [_jsx("button", { type: "button", ref: handleRef, "data-slot": "kanban-card-handle", "aria-label": "Drag to move", onClick: stopClick, className: cn(handleChrome, stopFocus, "cursor-grab hover:bg-muted/50 active:cursor-grabbing"), children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }), onCardClick ? (_jsx("button", { type: "button", "data-slot": "kanban-card-body", onClick: () => onCardClick(item), className: cn("min-w-0 flex-1 cursor-pointer p-3 text-left hover:bg-muted/20", stopFocus), children: children })) : (_jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1 p-3", children: children }))] }));
 }
 /**
  * Memoized so a board update re-renders only the cards whose item, index or

package/dist/markdown.js

@@ -35,7 +35,7 @@ const markdownComponents = {
     h3: ({ children }) => (_jsx("h3", { className: headingClass("text-base"), children: children })),
     p: ({ children }) => _jsx("p", { className: "text-sm leading-relaxed", children: children }),
     ul: ({ children }) => (_jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm", children: children })),
-    ol: ({ children }) => (_jsx("ol", { className: "list-decimal space-y-1 pl-5 text-sm", children: children })),
+    ol: ({ children, start }) => (_jsx("ol", { start: start, className: "list-decimal space-y-1 pl-5 text-sm", children: children })),
     li: ({ children }) => _jsx("li", { className: "leading-relaxed", children: children }),
     blockquote: ({ children }) => (_jsx("blockquote", { className: "border-l-2 border-input pl-3 text-sm text-muted-foreground", children: children })),
     a: ({ href, children }) => href ? (_jsx("a", { href: href, className: "text-selected-foreground underline underline-offset-2", ...(href.startsWith("http")

package/dist/search-picker.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
 import { handleListboxKey } from "./internal/listbox-navigation.js";
+import { clamp } from "./internal/math.js";
 import { Listbox, ListboxEmptyStatus, listboxInputAria, PickerOption, } from "./internal/listbox-option.js";
 import { createSearchIndex, filterSearchIndex, foldSearchText, normalizeSearchQuery, } from "./internal/search.js";
 import { cn, onInputChange } from "./utils.js";
@@ -42,10 +43,9 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
         return index >= 0 ? index : 0;
     }, [filtered, getValue, value]);
     const rows = React.useMemo(() => filtered.map((item) => ({ item, value: getValue(item) })), [filtered, getValue]);
-    const [highlight, setHighlight] = React.useState(selectedIndex);
-    // Reset the highlight while rendering, not in an effect, when the query or
-    // the selected row changes: an effect commits every keystroke twice, once
-    // with the stale highlight and again with the reset.
+    const [highlightIndex, setHighlight] = React.useState(selectedIndex);
+    const highlight = clamp(highlightIndex, 0, Math.max(0, filtered.length - 1));
+    // Reset during render so a query or selection change commits only once.
     const [highlightFor, setHighlightFor] = React.useState({
         query,
         selectedIndex,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",