@spaceinvoices/react-ui 0.4.11 → 0.4.31

package/cli/dist/index.js

@@ -933,7 +933,7 @@ async function list(options = {}) {
 
 // cli/src/index.ts
 var program = new Command();
-program.name("spaceinvoices-ui").description("CLI for adding Space Invoices React UI components to your project").version("0.4.11");
+program.name("spaceinvoices-ui").description("CLI for adding Space Invoices React UI components to your project").version("0.4.31");
 program.option("--local <path>", "Use local registry from specified path (for development)");
 program.command("init").description("Initialize Space Invoices UI in your project").option("-y, --yes", "Skip prompts and use defaults").option("-f, --force", "Overwrite existing configuration").option("--cwd <path>", "Working directory (defaults to current directory)").action(async (options) => {
   const globalOpts = program.opts();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spaceinvoices/react-ui",
   "type": "module",
-  "version": "0.4.11",
+  "version": "0.4.31",
   "private": false,
   "license": "MIT",
   "description": "Space Invoices UI components - copy-paste distribution with CLI support",
@@ -48,7 +48,7 @@
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@spaceinvoices/js-sdk": "^2.0.0",
+    "@spaceinvoices/js-sdk": "^2.3.2",
     "@tanstack/react-query": "^5.72.1",
     "@tanstack/react-query-devtools": "^5.72.1",
     "bun-plugin-tailwind": "^0.0.14",
@@ -81,6 +81,7 @@
     "@happy-dom/global-registrator": "^20.8.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/bun": "latest",
     "@types/prompts": "^2.4.9",
     "@types/react": "^19.1.0",

package/registry.json

@@ -30,8 +30,7 @@
     "hooks": {
       "name": "Resource Hooks",
       "files": ["hooks/create-resource-hooks.ts", "hooks/use-resource-mutation.ts"],
-      "dependencies": ["providers/sdk-provider"],
-      "description": "Factory for creating CRUD hooks with optimistic updates"
+      "description": "Factory for creating CRUD hooks from explicit modular SDK methods"
     },
     "string-helpers": {
       "name": "String Helpers",
@@ -40,16 +39,16 @@
     }
   },
   "providers": {
-    "sdk-provider": {
-      "name": "SDK Provider",
-      "files": ["providers/sdk-provider.tsx", "lib/auth.ts", "lib/browser-cookies.ts"],
-      "description": "Initializes and provides SDK context"
+    "space-invoices-provider": {
+      "name": "Space Invoices Provider",
+      "files": ["providers/space-invoices-provider.tsx"],
+      "description": "Recommended runtime provider for modular SDK setup"
     },
     "entities-provider": {
       "name": "Entities Provider",
       "files": ["providers/entities-provider.tsx", "providers/entities-context.tsx"],
-      "dependencies": ["sdk-provider"],
-      "description": "Multi-tenant entity management"
+      "dependencies": ["space-invoices-provider"],
+      "description": "Optional multi-tenant entity management"
     }
   },
   "components": {
@@ -223,7 +222,7 @@
         "components/taxes/taxes.hooks.ts"
       ],
       "dependencies": ["form/form-input", "ui/form"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation", "hooks"],
       "schemas": ["createTaxSchema"]
     },
@@ -241,7 +240,7 @@
         "components/taxes/taxes.hooks.ts"
       ],
       "dependencies": ["table/data-table", "ui/dropdown-menu", "ui/button"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation", "hooks"]
     },
     "items/create-item-form": {
@@ -255,7 +254,7 @@
         "components/items/items.hooks.ts"
       ],
       "dependencies": ["form/form-input", "ui/form"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation", "hooks"],
       "schemas": ["createItemSchema"]
     },
@@ -273,7 +272,7 @@
         "components/items/items.hooks.ts"
       ],
       "dependencies": ["table/data-table", "ui/dropdown-menu", "ui/button"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation", "hooks"]
     },
     "payments/create-payment-form": {
@@ -287,7 +286,7 @@
         "components/payments/payments.hooks.ts"
       ],
       "dependencies": ["form/form-input", "ui/form", "ui/select"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation", "hooks"],
       "schemas": ["createPaymentSchema"]
     },
@@ -302,7 +301,7 @@
         "components/customers/customers.hooks.ts"
       ],
       "dependencies": ["form/form-input", "ui/form"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation", "hooks"],
       "schemas": ["createCustomerSchema"]
     },
@@ -320,7 +319,7 @@
         "components/customers/customers.hooks.ts"
       ],
       "dependencies": ["table/data-table", "ui/dropdown-menu", "ui/button"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation", "hooks"]
     },
     "customers/customer-combobox": {
@@ -328,7 +327,7 @@
       "category": "feature",
       "files": ["components/customers/customer-combobox.tsx", "components/customers/customers.hooks.ts"],
       "dependencies": ["ui/popover", "ui/command", "ui/button"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["hooks"]
     },
     "entities/create-entity-form": {
@@ -336,7 +335,7 @@
       "category": "feature",
       "files": ["components/entities/create-entity-form.tsx", "components/entities/entities.hooks.ts"],
       "dependencies": ["form/form-input", "ui/form", "ui/select"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation", "hooks"],
       "schemas": ["createEntitySchema"]
     },
@@ -363,7 +362,7 @@
         "ui/popover",
         "customers/customer-combobox"
       ],
-      "providers": ["sdk-provider", "entities-provider"],
+      "providers": ["space-invoices-provider", "entities-provider"],
       "utils": ["translation", "hooks"],
       "schemas": ["createInvoiceSchema"]
     },
@@ -378,7 +377,7 @@
         "components/invoices/invoices.hooks.ts"
       ],
       "dependencies": ["table/data-table", "ui/dropdown-menu", "ui/button", "ui/badge"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation", "hooks"]
     },
     "estimates/create-estimate-form": {
@@ -386,7 +385,7 @@
       "category": "feature",
       "files": ["components/estimates/create/create-estimate-form.tsx", "components/estimates/estimates.hooks.ts"],
       "dependencies": ["form/form-input", "ui/form", "ui/card", "customers/customer-combobox"],
-      "providers": ["sdk-provider", "entities-provider"],
+      "providers": ["space-invoices-provider", "entities-provider"],
       "utils": ["translation", "hooks"],
       "schemas": ["createEstimateSchema"]
     },
@@ -401,7 +400,7 @@
         "components/estimates/estimates.hooks.ts"
       ],
       "dependencies": ["table/data-table", "ui/dropdown-menu", "ui/button", "ui/badge"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation", "hooks"]
     },
     "credit-notes/create-credit-note-form": {
@@ -412,7 +411,7 @@
         "components/credit-notes/credit-notes.hooks.ts"
       ],
       "dependencies": ["form/form-input", "ui/form", "ui/card", "customers/customer-combobox"],
-      "providers": ["sdk-provider", "entities-provider"],
+      "providers": ["space-invoices-provider", "entities-provider"],
       "utils": ["translation", "hooks"],
       "schemas": ["createCreditNoteSchema"]
     },
@@ -427,7 +426,7 @@
         "components/credit-notes/credit-notes.hooks.ts"
       ],
       "dependencies": ["table/data-table", "ui/dropdown-menu", "ui/button", "ui/badge"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation", "hooks"]
     },
     "dashboard/chart-empty-state": {
@@ -464,7 +463,7 @@
         "components/dashboard/revenue-trend-chart/index.ts"
       ],
       "dependencies": ["ui/card", "ui/chart", "dashboard/chart-empty-state", "dashboard/loading-card"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation"]
     },
     "dashboard/invoice-status-chart": {
@@ -477,7 +476,7 @@
         "components/dashboard/invoice-status-chart/index.ts"
       ],
       "dependencies": ["ui/card", "ui/chart", "dashboard/chart-empty-state", "dashboard/loading-card"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation"]
     },
     "dashboard/payment-trend-chart": {
@@ -490,7 +489,7 @@
         "components/dashboard/payment-trend-chart/index.ts"
       ],
       "dependencies": ["ui/card", "ui/chart", "dashboard/chart-empty-state", "dashboard/loading-card"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation"]
     },
     "dashboard/payment-methods-chart": {
@@ -503,7 +502,7 @@
         "components/dashboard/payment-methods-chart/index.ts"
       ],
       "dependencies": ["ui/card", "ui/chart", "dashboard/chart-empty-state", "dashboard/loading-card"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation"]
     },
     "dashboard/top-customers-chart": {
@@ -516,7 +515,7 @@
         "components/dashboard/top-customers-chart/index.ts"
       ],
       "dependencies": ["ui/card", "ui/chart", "dashboard/chart-empty-state", "dashboard/loading-card"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation"]
     },
     "dashboard/collection-rate-card": {
@@ -529,7 +528,7 @@
         "components/dashboard/collection-rate-card/index.ts"
       ],
       "dependencies": ["ui/card", "dashboard/loading-card"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation"]
     },
     "recurring-invoices/create-recurring-invoice-form": {
@@ -540,7 +539,7 @@
         "components/recurring-invoices/recurring-invoices.hooks.ts"
       ],
       "dependencies": ["form/form-input", "ui/form", "ui/card", "customers/customer-combobox"],
-      "providers": ["sdk-provider", "entities-provider"],
+      "providers": ["space-invoices-provider", "entities-provider"],
       "utils": ["translation", "hooks"],
       "schemas": ["createRecurringInvoiceSchema"]
     },
@@ -553,7 +552,7 @@
         "components/recurring-invoices/recurring-invoices.hooks.ts"
       ],
       "dependencies": ["table/data-table", "ui/dropdown-menu", "ui/button", "ui/badge"],
-      "providers": ["sdk-provider"],
+      "providers": ["space-invoices-provider"],
       "utils": ["translation", "hooks"]
     }
   }

package/src/common/autocomplete.tsx

@@ -7,6 +7,8 @@ import { cn } from "@/ui/lib/utils";
 export type AutocompleteOption = {
   value: string;
   label: string | React.ReactNode;
+  testId?: string;
+  dataDemo?: string;
 };
 
 type AutocompleteProps = {
@@ -26,7 +28,9 @@ type AutocompleteProps = {
   searchValue?: string;
   displayValue?: string;
   inputTestId?: string;
+  inputDataDemo?: string;
   inputRef?: React.Ref<HTMLInputElement>;
+  ariaInvalid?: boolean;
 };
 
 export function Autocomplete({
@@ -46,20 +50,43 @@ export function Autocomplete({
   searchValue: externalSearchValue,
   displayValue,
   inputTestId,
+  inputDataDemo,
   inputRef: externalInputRef,
+  ariaInvalid = false,
 }: AutocompleteProps) {
   const [open, setOpen] = React.useState(false);
   const [internalSearchValue, setInternalSearchValue] = React.useState("");
   const inputRef = React.useRef<HTMLInputElement>(null);
   const suppressAutoOpenRef = React.useRef(false);
   const blurCloseRef = React.useRef(false);
-  const focusOpenRef = React.useRef(false);
   const selectedValueRef = React.useRef<string | null>(null);
 
   const searchValue = externalSearchValue ?? internalSearchValue;
   // Show displayValue when not typing, otherwise show what user is typing
   const inputValue = searchValue || displayValue;
 
+  const finalizePendingInput = () => {
+    const typedValue = searchValue?.trim();
+    const shouldCommitTypedValue =
+      !!typedValue &&
+      typedValue !== displayValue &&
+      selectedValueRef.current == null &&
+      commitUnselectedOnBlur &&
+      !!onCommitUnselectedInput;
+
+    if (shouldCommitTypedValue) {
+      onCommitUnselectedInput(typedValue);
+      selectedValueRef.current = "__implicit_commit__";
+      return;
+    }
+
+    if (selectedValueRef.current == null) {
+      const restoredValue = committedDisplayValue ?? displayValue ?? "";
+      setInternalSearchValue("");
+      onSearch?.(restoredValue);
+    }
+  };
+
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     suppressAutoOpenRef.current = false;
@@ -101,11 +128,7 @@ export function Autocomplete({
     if (suppressAutoOpenRef.current) return;
     // Only open popover on focus if there's no displayValue (no customer selected)
     if (!displayValue && options.length > 0) {
-      focusOpenRef.current = true;
       setOpen(true);
-      requestAnimationFrame(() => {
-        focusOpenRef.current = false;
-      });
     }
   };
 
@@ -116,21 +139,7 @@ export function Autocomplete({
       return;
     }
 
-    const typedValue = searchValue?.trim();
-    const shouldCommitTypedValue =
-      !!typedValue &&
-      typedValue !== displayValue &&
-      selectedValueRef.current == null &&
-      commitUnselectedOnBlur &&
-      !!onCommitUnselectedInput;
-
-    if (shouldCommitTypedValue) {
-      onCommitUnselectedInput(typedValue);
-    } else if (selectedValueRef.current == null) {
-      const restoredValue = committedDisplayValue ?? displayValue ?? "";
-      setInternalSearchValue("");
-      onSearch?.(restoredValue);
-    }
+    finalizePendingInput();
 
     blurCloseRef.current = true;
     suppressAutoOpenRef.current = false;
@@ -149,14 +158,16 @@ export function Autocomplete({
     }
   };
 
-  // Handle popover open/close - prevent closing when input is focused
-  const handleOpenChange = (newOpen: boolean) => {
-    if (!newOpen && focusOpenRef.current) {
+  // Ignore synthetic "outside press" close events that originate from the anchor input itself.
+  const handleOpenChange = (newOpen: boolean, eventDetails?: { reason?: string; event?: Event }) => {
+    if (!newOpen && eventDetails?.reason === "outside-press" && eventDetails.event?.target === inputRef.current) {
       return;
     }
-    if (!newOpen && document.activeElement === inputRef.current && !blurCloseRef.current) {
-      return;
+
+    if (!newOpen && eventDetails?.reason === "outside-press" && eventDetails.event?.target !== inputRef.current) {
+      finalizePendingInput();
     }
+
     setOpen(newOpen);
   };
 
@@ -181,11 +192,20 @@ export function Autocomplete({
         disabled={disabled}
         autoComplete="off"
         data-testid={inputTestId}
+        data-demo={inputDataDemo}
+        aria-invalid={ariaInvalid || undefined}
       />
       <Popover.Portal>
-        <Popover.Positioner anchor={inputRef} align="start" sideOffset={4} className="isolate z-50">
+        <Popover.Positioner
+          anchor={inputRef}
+          align="start"
+          sideOffset={4}
+          positionMethod="fixed"
+          className="isolate z-50"
+        >
           <Popover.Popup
             initialFocus={false}
+            finalFocus={false}
             className="flex flex-col rounded-md bg-popover p-0 text-popover-foreground shadow-md outline-hidden ring-1 ring-foreground/10"
             style={{ width: inputRef.current?.offsetWidth }}
           >
@@ -199,6 +219,8 @@ export function Autocomplete({
                       value={option.value}
                       onSelect={() => handleSelect(option.value)}
                       className={cn(value === option.value && "font-bold")}
+                      data-testid={option.testId}
+                      data-demo={option.dataDemo}
                     >
                       {option.label}
                     </CommandItem>

package/src/components/activities/locales/bg.ts

@@ -0,0 +1,21 @@
+export default {
+  Activity: "Activity",
+  created: "created",
+  updated: "updated",
+  deleted: "deleted",
+  voided: "voided",
+  sent: "sent",
+  exported: "exported",
+  synced: "synced",
+  fiscalized: "fiscalized",
+  user: "user",
+  system: "system",
+  cron: "cron",
+  webhook: "webhook",
+  "No activities": "No activities",
+  "No activities yet for this resource": "No activities yet for this resource",
+  "just now": "just now",
+  "minutes ago": "minutes ago",
+  "hours ago": "hours ago",
+  "days ago": "days ago",
+} as const;

package/src/components/activities/locales/cs.ts

@@ -0,0 +1,21 @@
+export default {
+  Activity: "Activity",
+  created: "created",
+  updated: "updated",
+  deleted: "deleted",
+  voided: "voided",
+  sent: "sent",
+  exported: "exported",
+  synced: "synced",
+  fiscalized: "fiscalized",
+  user: "user",
+  system: "system",
+  cron: "cron",
+  webhook: "webhook",
+  "No activities": "No activities",
+  "No activities yet for this resource": "No activities yet for this resource",
+  "just now": "just now",
+  "minutes ago": "minutes ago",
+  "hours ago": "hours ago",
+  "days ago": "days ago",
+} as const;

package/src/components/activities/locales/en.ts

@@ -0,0 +1,21 @@
+export default {
+  Activity: "Activity",
+  created: "created",
+  updated: "updated",
+  deleted: "deleted",
+  voided: "voided",
+  sent: "sent",
+  exported: "exported",
+  synced: "synced",
+  fiscalized: "fiscalized",
+  user: "user",
+  system: "system",
+  cron: "cron",
+  webhook: "webhook",
+  "No activities": "No activities",
+  "No activities yet for this resource": "No activities yet for this resource",
+  "just now": "just now",
+  "minutes ago": "minutes ago",
+  "hours ago": "hours ago",
+  "days ago": "days ago",
+} as const;

package/src/components/activities/locales/et.ts

@@ -0,0 +1,21 @@
+export default {
+  Activity: "Activity",
+  created: "created",
+  updated: "updated",
+  deleted: "deleted",
+  voided: "voided",
+  sent: "sent",
+  exported: "exported",
+  synced: "synced",
+  fiscalized: "fiscalized",
+  user: "user",
+  system: "system",
+  cron: "cron",
+  webhook: "webhook",
+  "No activities": "No activities",
+  "No activities yet for this resource": "No activities yet for this resource",
+  "just now": "just now",
+  "minutes ago": "minutes ago",
+  "hours ago": "hours ago",
+  "days ago": "days ago",
+} as const;

package/src/components/activities/locales/fi.ts

@@ -0,0 +1,21 @@
+export default {
+  Activity: "Activity",
+  created: "created",
+  updated: "updated",
+  deleted: "deleted",
+  voided: "voided",
+  sent: "sent",
+  exported: "exported",
+  synced: "synced",
+  fiscalized: "fiscalized",
+  user: "user",
+  system: "system",
+  cron: "cron",
+  webhook: "webhook",
+  "No activities": "No activities",
+  "No activities yet for this resource": "No activities yet for this resource",
+  "just now": "just now",
+  "minutes ago": "minutes ago",
+  "hours ago": "hours ago",
+  "days ago": "days ago",
+} as const;

package/src/components/activities/locales/is.ts

@@ -0,0 +1,21 @@
+export default {
+  Activity: "Activity",
+  created: "created",
+  updated: "updated",
+  deleted: "deleted",
+  voided: "voided",
+  sent: "sent",
+  exported: "exported",
+  synced: "synced",
+  fiscalized: "fiscalized",
+  user: "user",
+  system: "system",
+  cron: "cron",
+  webhook: "webhook",
+  "No activities": "No activities",
+  "No activities yet for this resource": "No activities yet for this resource",
+  "just now": "just now",
+  "minutes ago": "minutes ago",
+  "hours ago": "hours ago",
+  "days ago": "days ago",
+} as const;

package/src/components/activities/locales/nb.ts

@@ -0,0 +1,21 @@
+export default {
+  Activity: "Activity",
+  created: "created",
+  updated: "updated",
+  deleted: "deleted",
+  voided: "voided",
+  sent: "sent",
+  exported: "exported",
+  synced: "synced",
+  fiscalized: "fiscalized",
+  user: "user",
+  system: "system",
+  cron: "cron",
+  webhook: "webhook",
+  "No activities": "No activities",
+  "No activities yet for this resource": "No activities yet for this resource",
+  "just now": "just now",
+  "minutes ago": "minutes ago",
+  "hours ago": "hours ago",
+  "days ago": "days ago",
+} as const;

package/src/components/activities/locales/sk.ts

@@ -0,0 +1,21 @@
+export default {
+  Activity: "Activity",
+  created: "created",
+  updated: "updated",
+  deleted: "deleted",
+  voided: "voided",
+  sent: "sent",
+  exported: "exported",
+  synced: "synced",
+  fiscalized: "fiscalized",
+  user: "user",
+  system: "system",
+  cron: "cron",
+  webhook: "webhook",
+  "No activities": "No activities",
+  "No activities yet for this resource": "No activities yet for this resource",
+  "just now": "just now",
+  "minutes ago": "minutes ago",
+  "hours ago": "hours ago",
+  "days ago": "days ago",
+} as const;

package/src/components/activities/locales/sv.ts

@@ -0,0 +1,21 @@
+export default {
+  Activity: "Activity",
+  created: "created",
+  updated: "updated",
+  deleted: "deleted",
+  voided: "voided",
+  sent: "sent",
+  exported: "exported",
+  synced: "synced",
+  fiscalized: "fiscalized",
+  user: "user",
+  system: "system",
+  cron: "cron",
+  webhook: "webhook",
+  "No activities": "No activities",
+  "No activities yet for this resource": "No activities yet for this resource",
+  "just now": "just now",
+  "minutes ago": "minutes ago",
+  "hours ago": "hours ago",
+  "days ago": "days ago",
+} as const;