@petrarca/sonnet-ui 0.6.0 → 0.8.0

package/README.md

@@ -1,25 +1,29 @@
 # @petrarca/sonnet-ui
 
-UI primitives and data components for the Petrarca Sonnet component library.
+The component layer of the Petrarca Sonnet component library. It ships three
+kinds of thing: a stylesheet of design tokens, a Tailwind preset that maps
+those tokens onto utility classes, and React components.
 
-## What's included
+## What it provides
 
-**UI primitives** — Tailwind + Radix UI components: Button, Badge, Card,
-Dialog, Tabs, Input, Textarea, Checkbox, Label, Tooltip, Spinner, Avatar,
-Separator, Stepper, ResizeHandle (draggable divider for resizable panes), and
-more.
+**Primitives.** Buttons, badges, cards, dialogs, sheets, popovers, dropdowns,
+tabs, selects, tooltips, steppers, scroll areas, resize handles and the rest of
+the building blocks, most of them wrapping Radix.
 
-**Data components** — Higher-level data-driven UI:
-- **EntityTable** — Schema-driven table with pagination, row actions, custom cell renderers
-- **EntitySelect** — Async searchable select with typeahead, backed by a fetcher API
-- **EntityTree** — Hierarchical tree browser with search and edit support
-- **TreeView** — Generic accessible tree with keyboard navigation and row selection
-- **SearchInput** — Faceted search input with chip-based filters (simple, searchFields, faceted modes)
-- **JsonEditor** — CodeMirror JSON editor with validation (subpath: `@petrarca/sonnet-ui/json-editor`)
+**Data components.** `EntityTable` renders a collection from a schema with
+pagination, row actions and pluggable cell renderers. `SearchInput` produces a
+`FilterExpr` in simple, multi-field or faceted mode. `EntitySelect` is an async
+typeahead over an injected fetcher, `EntityTree` and `TreeView` cover
+hierarchies, and `PropertyList` covers read-only display.
 
-**Design tokens** — Shipped as `styles.css` and `tailwind-preset.js`.
+**Date and time inputs.** Locale-aware date, time and datetime controls with a
+calendar, built on the parsing and formatting layer in `sonnet-core`.
 
----
+**A JSON editor.** CodeMirror with validation and JSON-Pointer-constrained
+editable regions, on its own subpath so the dependency is opt-in.
+
+**Design tokens.** `styles.css` and `tailwind-preset.js`, the two files every
+other `@petrarca/sonnet-*` package renders through.
 
 ## Install
 
@@ -27,44 +31,30 @@ more.
 pnpm add @petrarca/sonnet-ui @petrarca/sonnet-core
 ```
 
-Peer dependencies: `react >=19`, `react-dom >=19`, `tailwindcss >=3`,
-`tailwindcss-animate`, `@tailwindcss/typography`.
-
----
-
-## Setup
-
-### CSS
+| Peer | Range | Needed for |
+|---|---|---|
+| `react`, `react-dom` | `>=19` | Everything |
+| `tailwindcss` | `>=3` | The preset and every component class |
+| `tailwindcss-animate` | `>=1` | Enter and exit animations on overlays |
+| `@tailwindcss/typography` | `>=0.5` | Add the plugin to your Tailwind config |
+| `@uiw/react-codemirror` | `>=4` | The `./json-editor` subpath only |
+| `@codemirror/state`, `@codemirror/view`, `@codemirror/lang-json` | `>=6` | The `./json-editor` subpath only |
 
-Import `styles.css` in your app's global CSS. It provides design tokens
-(light + dark), base resets, heading utilities, and typography classes.
+You do not declare any `@radix-ui/*` package yourself. Radix is a regular
+dependency and arrives transitively
+([ADR-0002](../../docs/adr/0002-radix-is-a-dependency-not-a-peer.md)).
 
-```css
-/* index.css */
-@import "@petrarca/sonnet-ui/styles.css";
-
-/* Shell layout — add below the import (app-level, not provided by the library) */
-html, body, #root { height: 100%; }
-#root { display: flex; flex-direction: column; overflow: hidden; }
-body { min-height: 100vh; overflow: hidden; }
-```
+## Usage
 
-Override any token after the import for white-labeling:
+Import the stylesheet and the preset, then use the components.
 
 ```css
+/* src/index.css */
 @import "@petrarca/sonnet-ui/styles.css";
-
-:root {
-  --primary: 210 80% 40%;  /* custom brand color */
-}
 ```
 
-### Tailwind
-
-Use the preset in `tailwind.config.js`. It maps all design tokens to Tailwind
-utility classes (`bg-primary`, `text-muted-foreground`, `border-border`, etc.):
-
 ```js
+// tailwind.config.js
 module.exports = {
   presets: [require("@petrarca/sonnet-ui/tailwind-preset")],
   content: [
@@ -75,30 +65,39 @@ module.exports = {
 };
 ```
 
----
-
-## Design tokens
-
-All tokens are CSS custom properties (HSL triplets). Key semantic tokens:
+```tsx
+import { Badge, Button, Card, CardContent } from "@petrarca/sonnet-ui";
+
+export function WidgetCard() {
+  return (
+    <Card>
+      <CardContent className="flex items-center gap-2">
+        <Badge badgeColor="green">active</Badge>
+        <Button size="sm">Create</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
 
-| Token | Role |
-|---|---|
-| `--background` / `--foreground` | Page surface / primary text |
-| `--card` / `--card-foreground` | Card surface / text |
-| `--primary` / `--primary-foreground` | Brand action color |
-| `--destructive` | Error / danger |
-| `--muted` / `--muted-foreground` | Quiet surface / secondary text |
-| `--tertiary-foreground` | Tertiary text (timestamps, helpers) |
-| `--faint-foreground` | Ghost text (annotations, disabled) |
-| `--border` / `--border-subtle` / `--border-strong` | 3-tier border system |
-| `--state-hover` / `--state-selected` | Interaction state backgrounds |
-| `--ring` | Focus ring |
-| `--radius` | Base border radius |
+The second content glob and the app-level layout CSS are the two steps most
+often missed. [Getting started](docs/usage/getting-started.md) covers both, and
+the token reference is in [theming](docs/usage/theming.md).
 
-See `DESIGN.md` at the repo root for the full token reference.
+## Documentation
 
----
+- [Usage guides](docs/usage/index.md) -- setup, theming,
+  [primitives](docs/usage/primitives.md),
+  [EntityTable](docs/usage/entity-table.md),
+  [SearchInput](docs/usage/search-input.md),
+  [trees and selects](docs/usage/trees-and-selects.md),
+  [date and time inputs](docs/usage/date-and-time-inputs.md) and the
+  [JSON editor](docs/usage/json-editor.md).
+- [Design docs](docs/design/index.md) -- the token architecture and the
+  reasoning behind the data components.
+- [Workspace documentation](../../docs/README.md) -- the design language, the
+  design system and the architecture decision records.
 
 ## License
 
-See [LICENSE.md](../../LICENSE.md).
+Apache 2.0. See [LICENSE.md](../../LICENSE.md).

package/dist/index.d.ts

@@ -707,8 +707,19 @@ type TableUiSchema = Record<string, UISchema & {
         label?: string;
     };
 }> & {
+    /**
+     * Table-level options. Reserved for sorting and a sticky header; **neither is
+     * implemented yet**, so setting these has no effect today. Kept declared
+     * because both are intended features -- see the design doc.
+     *
+     * Note this key is unrelated to the `x-ui-globalOptions` of a form UISchema,
+     * which carries `UISchemaOptions` and does work. The two share a name and
+     * nothing else.
+     */
     "x-ui-globalOptions"?: {
+        /** Planned. Sorting is not wired up in EntityTable yet; this has no effect. */
         sortable?: boolean;
+        /** Planned. No sticky positioning is applied yet; this has no effect. */
         stickyHeader?: boolean;
     };
 };
@@ -877,6 +888,16 @@ interface EntityTableProps<TRow extends RowData> {
     showChevron?: boolean;
     selectionMode?: boolean;
     onSelectionChange?: (selectedRows: TRow[]) => void;
+    /**
+     * Stable identity for a row, used to key the selection.
+     *
+     * Without it the selection is keyed by row position, so it means "the rows
+     * currently in these slots" and cannot survive paging or refiltering -- the
+     * table clears it whenever `data` changes to keep that safe. Supply this and
+     * the selection is keyed by identity instead: it survives a page change, and
+     * a bulk action can span pages.
+     */
+    getRowId?: (row: TRow) => string;
     pagination?: PaginationState;
     onPaginationChange?: OnChangeFn<PaginationState>;
     rowActions?: RowAction<TRow>[];
@@ -1225,6 +1246,9 @@ type SearchWidget = React.ComponentType<SearchWidgetProps>;
 /** Registry mapping widget names to their implementations. */
 type SearchWidgetRegistry = Record<string, SearchWidget>;
 
+/** Default search widget registry. Consumers extend this via the widgets prop. */
+declare const DEFAULT_SEARCH_WIDGETS: SearchWidgetRegistry;
+
 /**
  * SearchInput -- controlled search and filter input with chip display.
  *
@@ -1329,4 +1353,4 @@ type Props = {
  */
 declare function ClipboardMenu({ onAddItem }: Props): react_jsx_runtime.JSX.Element;
 
-export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, CELL_RENDERERS, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CellRenderer, type CellRendererProps, Checkbox, ClipboardButton, ClipboardItemComponent as ClipboardItem, ClipboardMenu, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DateInput, type DateInputProps, DateTimeInput, type DateTimeInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntitySelect, type EntitySelectProps, EntityTable, type EntityTableProps, EntityTree, type EntityTreeHandle, type EntityTreeProps, IconButton, type IconButtonProps, Input, InputError, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Popover, PopoverContent, PopoverTrigger, PropertyList, type PropertyListLayout, type PropertyListProps, PropertyValue, type PropertyValueProps, ResizeHandle, type ResizeHandleProps, type ResolvedColumn, type RowAction, ScrollArea, ScrollBar, SearchInput, type SearchMode, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetTitle, SheetTrigger, SimpleGroup, SimpleStack, SimpleTooltip, Skeleton, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, type StepperProps, StepperSeparator, StepperTitle, StepperTrigger, type TableUiSchema, Tabs, TabsContent, TabsList, TabsSeparator, TabsTrigger, Textarea, TimeInput, type TimeInputProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewHandle, type TreeViewProps, badgeVariants, buttonVariants, createRenderer, useStore as useStepper };
+export { Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, CELL_RENDERERS, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CellRenderer, type CellRendererProps, Checkbox, ClipboardButton, ClipboardItemComponent as ClipboardItem, ClipboardMenu, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DEFAULT_SEARCH_WIDGETS, DateInput, type DateInputProps, DateTimeInput, type DateTimeInputProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntitySelect, type EntitySelectProps, EntityTable, type EntityTableProps, EntityTree, type EntityTreeHandle, type EntityTreeProps, IconButton, type IconButtonProps, Input, InputError, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Popover, PopoverContent, PopoverTrigger, PropertyList, type PropertyListLayout, type PropertyListProps, PropertyValue, type PropertyValueProps, ResizeHandle, type ResizeHandleProps, type ResolvedColumn, type RowAction, ScrollArea, ScrollBar, SearchInput, type SearchInputProps, type SearchMode, type SearchWidget, type SearchWidgetProps, type SearchWidgetRegistry, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetTitle, SheetTrigger, SimpleGroup, SimpleStack, SimpleTooltip, Skeleton, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, type StepperProps, StepperSeparator, StepperTitle, StepperTrigger, type TableUiSchema, Tabs, TabsContent, TabsList, TabsSeparator, TabsTrigger, Textarea, TimeInput, type TimeInputProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewHandle, type TreeViewProps, badgeVariants, buttonVariants, createRenderer, useStore as useStepper };

package/dist/index.js

@@ -693,7 +693,10 @@ var Input = React11.forwardRef(
       {
         type,
         className: cn12(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          // Focus: a quiet 1px halo plus a tinted border. Chrome matches
+          // :focus-visible on text fields even for mouse clicks, so a heavy
+          // ring would fire on every click into a field.
+          "flex h-10 w-full rounded-md border border-input bg-background transition-[color,box-shadow] px-3 py-2 text-base file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         ),
         ref,
@@ -1263,7 +1266,7 @@ var SelectTrigger = React17.forwardRef(({ className, children, ...props }, ref)
   {
     ref,
     className: cn18(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background transition-[color,box-shadow] px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -1376,7 +1379,8 @@ var Textarea = React18.forwardRef(({ className, ...props }, ref) => {
     "textarea",
     {
       className: cn19(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        // Focus treatment matches Input -- see the note there.
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background transition-[color,box-shadow] px-3 py-2 text-base placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       ),
       ref,
@@ -3272,7 +3276,10 @@ function buildColumnDefs(resolved, localRenderers) {
       )
     };
     if (col.width !== void 0) colDef.size = col.width;
-    if (col.minWidth !== void 0) colDef.minSize = col.minWidth;
+    if (col.minWidth !== void 0) {
+      colDef.minSize = col.minWidth;
+      colDef.meta = { ...colDef.meta, minWidth: col.minWidth };
+    }
     return colDef;
   });
 }
@@ -3307,12 +3314,13 @@ function buildTableOptions(opts) {
     state: opts.tableState
   };
   const selectionOpts = opts.selectionMode ? { enableRowSelection: true, onRowSelectionChange: opts.setRowSelection } : {};
+  const rowIdOpts = opts.getRowId ? { getRowId: (row) => opts.getRowId(row) } : {};
   const paginationOpts = opts.isPaginated ? {
     manualPagination: true,
     rowCount: opts.data?.meta.total ?? 0,
     onPaginationChange: opts.onPaginationChange
   } : {};
-  return { ...base, ...selectionOpts, ...paginationOpts };
+  return { ...base, ...selectionOpts, ...paginationOpts, ...rowIdOpts };
 }
 function useEntityTableState(props, selectionMode) {
   const {
@@ -3322,7 +3330,8 @@ function useEntityTableState(props, selectionMode) {
     data,
     pagination,
     onPaginationChange,
-    onSelectionChange
+    onSelectionChange,
+    getRowId
   } = props;
   const isPaginated = !!(pagination && onPaginationChange);
   const dataRows = useMemo5(() => data?.data ?? [], [data]);
@@ -3337,9 +3346,11 @@ function useEntityTableState(props, selectionMode) {
     }
   }, [total, isPaginated, pageIndex, pageSize, onPaginationChange]);
   const [rowSelection, setRowSelection] = useState5({});
+  const keyedById = !!getRowId;
   useEffect6(() => {
+    if (keyedById) return;
     setRowSelection({});
-  }, [data]);
+  }, [data, keyedById]);
   const [activeRowIndex, setActiveRowIndex] = useState5(-1);
   const containerRef = useRef4(null);
   const dataColumns = useMemo5(() => {
@@ -3358,9 +3369,10 @@ function useEntityTableState(props, selectionMode) {
   onSelectionChangeRef.current = onSelectionChange;
   useEffect6(() => {
     if (!selectionMode || !onSelectionChangeRef.current) return;
-    const selected = Object.keys(rowSelection).filter((k) => rowSelection[k]).map(Number).map((i) => dataRows[i]).filter((r) => r !== void 0);
+    const keys = Object.keys(rowSelection).filter((k) => rowSelection[k]);
+    const selected = getRowId ? dataRows.filter((row) => keys.includes(getRowId(row))) : keys.map(Number).map((i) => dataRows[i]).filter((r) => r !== void 0);
     onSelectionChangeRef.current(selected);
-  }, [rowSelection, selectionMode, dataRows]);
+  }, [rowSelection, selectionMode, dataRows, getRowId]);
   const tableState = useMemo5(
     () => ({
       ...isPaginated ? { pagination } : {},
@@ -3376,7 +3388,8 @@ function useEntityTableState(props, selectionMode) {
     setRowSelection,
     isPaginated,
     data,
-    onPaginationChange
+    onPaginationChange,
+    getRowId
   });
   const table = useReactTable(tableOptions);
   useEffect6(() => {
@@ -3454,6 +3467,15 @@ function useTableKeyboard(table, activeRowIndex, setActiveRowIndex, selectionMod
     [activeRowIndex, onRowClick, selectionMode, table, setActiveRowIndex]
   );
 }
+function headerWidthStyle(columnDef) {
+  const size = columnDef.size;
+  const minWidth = columnDef.meta?.minWidth;
+  if (size === void 0 && minWidth === void 0) return void 0;
+  return {
+    ...size !== void 0 && { width: size },
+    ...minWidth !== void 0 && { minWidth }
+  };
+}
 function handleEnterKey(e, tableRows, selectionMode, activeRowIndex, onRowClick) {
   e.preventDefault();
   if (selectionMode || activeRowIndex < 0 || !onRowClick) return;
@@ -3465,6 +3487,9 @@ function handleSpaceKey(e, tableRows, selectionMode, activeRowIndex) {
   e.preventDefault();
   tableRows[activeRowIndex]?.toggleSelected();
 }
+function isKeyboardOperable(selectionMode, onRowClick) {
+  return selectionMode || !!onRowClick;
+}
 function resolveTrailingCols(rowActions, onRowClick, selectionMode, showChevron) {
   const hasRowActions = !!(rowActions && rowActions.length > 0);
   const hasChevron = !!(onRowClick && showChevron && !selectionMode && !hasRowActions);
@@ -3726,21 +3751,22 @@ function EntityTable(props) {
     showChevron
   );
   const colCount = columns.length + (hasTrailingCol ? 1 : 0);
+  const isInteractive = isKeyboardOperable(selectionMode, onRowClick);
   return /* @__PURE__ */ jsxs13("div", { children: [
     /* @__PURE__ */ jsx34(
       "div",
       {
-        ref: selectionMode ? containerRef : void 0,
-        tabIndex: selectionMode ? 0 : void 0,
-        onKeyDown: selectionMode ? handleKeyDown : void 0,
-        className: cn32("rounded-lg border", selectionMode && "outline-none"),
+        ref: isInteractive ? containerRef : void 0,
+        tabIndex: isInteractive ? 0 : void 0,
+        onKeyDown: isInteractive ? handleKeyDown : void 0,
+        className: cn32("rounded-lg border", isInteractive && "outline-none"),
         children: /* @__PURE__ */ jsxs13("table", { className: "w-full text-sm", children: [
           /* @__PURE__ */ jsx34("thead", { children: /* @__PURE__ */ jsxs13("tr", { className: "border-b bg-muted/40", children: [
             table.getFlatHeaders().map((header) => /* @__PURE__ */ jsx34(
               "th",
               {
-                className: "text-left text-xs font-medium text-muted-foreground px-4 py-2.5",
-                style: header.column.columnDef.size !== void 0 ? { width: header.column.columnDef.size } : void 0,
+                className: "text-left text-xs font-medium text-foreground px-4 py-2.5",
+                style: headerWidthStyle(header.column.columnDef),
                 children: header.isPlaceholder ? null : flexRender(
                   header.column.columnDef.header,
                   header.getContext()
@@ -3753,7 +3779,7 @@ function EntityTable(props) {
               {
                 "aria-label": "Actions",
                 scope: "col",
-                className: "w-24 text-right text-xs font-medium text-muted-foreground px-4 py-2.5"
+                className: "w-24 text-right text-xs font-medium text-foreground px-4 py-2.5"
               }
             ),
             hasChevron && /* @__PURE__ */ jsx34("th", { "aria-label": "Open", scope: "col", className: "w-10" })
@@ -5170,6 +5196,8 @@ function useSearchInput({
       } else if (!pendingFacetRef.current) {
         if (allRequiredSatisfied(draftTermsRef.current)) {
           submitDraft(draftTermsRef.current);
+        } else {
+          return true;
         }
       }
     } else if (inputValueRef.current.trim().length >= minCharsRef.current) {
@@ -5177,6 +5205,7 @@ function useSearchInput({
         buildSimpleExpr(inputValueRef.current, searchFieldsRef.current)
       );
     }
+    return false;
   }, [addChip, submitDraft, allRequiredSatisfied]);
   const handleRemoveTerm = useCallback5((index) => {
     const next = draftTermsRef.current.filter((_, i) => i !== index);
@@ -5787,7 +5816,13 @@ function SearchInput(props) {
             showSearchButton,
             mode,
             onClear: handleClear,
-            onCommit: handleCommit
+            onCommit: () => {
+              if (handleCommit()) {
+                setPickerNavigated(false);
+                setPickerOpen(true);
+                inputRef.current?.focus();
+              }
+            }
           }
         )
       ]
@@ -6068,6 +6103,7 @@ export {
   CommandList,
   CommandSeparator,
   CommandShortcut,
+  DEFAULT_SEARCH_WIDGETS,
   DateInput,
   DateTimeInput,
   Dialog,