@bsuite/ui 1.2.2 → 1.3.1

package/dist/data-unavailable.js

@@ -93,7 +93,7 @@ export function DataUnavailable({ state, title, description, reason, onRetry, re
     const showRetry = Boolean(onRetry) && state !== 'forbidden';
     return (_jsxs("div", { "data-slot": "data-unavailable", "data-state": state, role: preset.role, "aria-live": preset.live, "aria-busy": state === 'loading' || undefined, className: cn(
         // Dashed + hatched: deliberately unlike every populated surface.
-        'relative isolate flex flex-col items-center justify-center overflow-hidden', 'rounded-lg border border-dashed text-center', size === 'compact' ? 'min-h-32 gap-2 p-4' : 'min-h-48 gap-3 p-8', TONE_SURFACE[preset.tone], className), ...props, children: [_jsx(Hatch, {}), _jsxs("div", { className: "relative flex flex-col items-center gap-3", children: [_jsx(StateIcon, { icon: preset.icon }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-base font-semibold text-foreground", children: title ?? preset.title }), _jsx("p", { className: "mx-auto max-w-prose text-sm text-muted-foreground", children: description ?? preset.description })] }), reason ? (_jsxs("div", { className: "mx-auto w-full max-w-prose", children: [_jsx("p", { className: "mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Reason" }), _jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap break-words rounded-md border border-border bg-card/80 px-3 py-2 text-left font-mono text-xs text-muted-foreground", children: reason })] })) : null, showRetry || action ? (_jsxs("div", { className: "mt-1 flex flex-wrap items-center justify-center gap-2", children: [showRetry ? (_jsx("button", { type: "button", onClick: onRetry, className: cn('inline-flex items-center rounded-md border border-border bg-card px-3 py-1.5', 'text-sm font-medium text-foreground', 'hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'), children: retryLabel })) : null, action] })) : null] })] }));
+        'relative isolate flex flex-col items-center justify-center overflow-hidden', 'rounded-lg border border-dashed text-center', size === 'compact' ? 'min-h-32 gap-2 p-4' : 'min-h-48 gap-3 p-8', TONE_SURFACE[preset.tone], className), ...props, children: [_jsx(Hatch, {}), _jsxs("div", { className: "relative flex flex-col items-center gap-3", children: [_jsx(StateIcon, { icon: preset.icon }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-base font-semibold text-foreground", children: title ?? preset.title }), _jsx("p", { className: "mx-auto max-w-prose text-sm text-muted-foreground", children: description ?? preset.description })] }), reason ? (_jsxs("div", { className: "mx-auto w-full max-w-prose", children: [_jsx("p", { className: "mb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Reason" }), _jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap break-words rounded-md border border-border bg-card/80 px-3 py-2 text-left font-mono text-xs text-muted-foreground", children: reason })] })) : null, showRetry || action ? (_jsxs("div", { className: "mt-1 flex flex-wrap items-center justify-center gap-2", children: [showRetry ? (_jsx("button", { type: "button", onClick: onRetry, className: cn('inline-flex items-center rounded-md border border-border-interactive bg-card px-3 py-1.5', 'text-sm font-medium text-foreground', 'hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'), children: retryLabel })) : null, action] })) : null] })] }));
 }
 /**
  * Postgres/PostgREST codes that mean "refused", not "broken".

package/dist/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,44 @@
+/**
+ * useOnClickOutside
+ *
+ * Dismisses an open dropdown/menu/popover when the user clicks (or taps)
+ * outside of its container, or presses Escape.
+ *
+ * Why not a full-screen backdrop `<div>`? A `fixed inset-0` backdrop only
+ * reliably covers the whole viewport when none of its ancestors establish a
+ * new containing block for fixed-position descendants. `backdrop-filter`,
+ * `filter`, `transform`, and `will-change: transform` on an ancestor all do
+ * exactly that — and BSuite's glass-panel header chrome
+ * (`backdropFilter: blur(...)`) is one of them. A backdrop nested inside such
+ * an ancestor silently shrinks to that ancestor's box instead of the full
+ * page, so clicks on the rest of the page never reach it and the menu never
+ * closes. This is what broke click-outside dismissal for crm7's header
+ * tenant switchers (operator report, 2026-07-17) — see crm7's
+ * `TenantSwitcher.tsx` / `UserTenantSwitcher.tsx` / `CRM7Header.tsx`, the
+ * hook this one is promoted from.
+ *
+ * A `document`-level pointerdown listener sidesteps the problem entirely:
+ * JS event listeners are not affected by CSS stacking contexts or
+ * containing-block quirks, so this works regardless of what ancestors do.
+ *
+ * This is the canonical, shared version — promoted here so every consumer
+ * app (and every `@bsuite/*` package that depends on `@bsuite/ui`) gets one
+ * implementation instead of a fresh hand-rolled copy per app. crm7 carries
+ * its own pre-existing copy at `src/hooks/useClickOutside.ts`; that one is
+ * already correct and untouched by this promotion — a future consolidation
+ * onto this shared copy is a reasonable low-risk follow-up, not a bug fix.
+ *
+ * Usage:
+ *   const containerRef = useRef<HTMLDivElement>(null);
+ *   useOnClickOutside(containerRef, () => setIsOpen(false), isOpen);
+ *
+ *   return (
+ *     <div ref={containerRef} className="relative">
+ *       <button onClick={() => setIsOpen((o) => !o)}>...</button>
+ *       {isOpen && <div className="absolute ...">...menu...</div>}
+ *     </div>
+ *   );
+ */
+import { type RefObject } from 'react';
+export declare function useOnClickOutside<T extends HTMLElement>(ref: RefObject<T | null>, handler: () => void, enabled?: boolean): void;
+//# sourceMappingURL=useOnClickOutside.d.ts.map

package/dist/hooks/useOnClickOutside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnClickOutside.d.ts","sourceRoot":"","sources":["../../src/hooks/useOnClickOutside.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EACrD,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EACxB,OAAO,EAAE,MAAM,IAAI,EACnB,OAAO,GAAE,OAAc,GACtB,IAAI,CAiCN"}

package/dist/hooks/useOnClickOutside.js

@@ -0,0 +1,75 @@
+/**
+ * useOnClickOutside
+ *
+ * Dismisses an open dropdown/menu/popover when the user clicks (or taps)
+ * outside of its container, or presses Escape.
+ *
+ * Why not a full-screen backdrop `<div>`? A `fixed inset-0` backdrop only
+ * reliably covers the whole viewport when none of its ancestors establish a
+ * new containing block for fixed-position descendants. `backdrop-filter`,
+ * `filter`, `transform`, and `will-change: transform` on an ancestor all do
+ * exactly that — and BSuite's glass-panel header chrome
+ * (`backdropFilter: blur(...)`) is one of them. A backdrop nested inside such
+ * an ancestor silently shrinks to that ancestor's box instead of the full
+ * page, so clicks on the rest of the page never reach it and the menu never
+ * closes. This is what broke click-outside dismissal for crm7's header
+ * tenant switchers (operator report, 2026-07-17) — see crm7's
+ * `TenantSwitcher.tsx` / `UserTenantSwitcher.tsx` / `CRM7Header.tsx`, the
+ * hook this one is promoted from.
+ *
+ * A `document`-level pointerdown listener sidesteps the problem entirely:
+ * JS event listeners are not affected by CSS stacking contexts or
+ * containing-block quirks, so this works regardless of what ancestors do.
+ *
+ * This is the canonical, shared version — promoted here so every consumer
+ * app (and every `@bsuite/*` package that depends on `@bsuite/ui`) gets one
+ * implementation instead of a fresh hand-rolled copy per app. crm7 carries
+ * its own pre-existing copy at `src/hooks/useClickOutside.ts`; that one is
+ * already correct and untouched by this promotion — a future consolidation
+ * onto this shared copy is a reasonable low-risk follow-up, not a bug fix.
+ *
+ * Usage:
+ *   const containerRef = useRef<HTMLDivElement>(null);
+ *   useOnClickOutside(containerRef, () => setIsOpen(false), isOpen);
+ *
+ *   return (
+ *     <div ref={containerRef} className="relative">
+ *       <button onClick={() => setIsOpen((o) => !o)}>...</button>
+ *       {isOpen && <div className="absolute ...">...menu...</div>}
+ *     </div>
+ *   );
+ */
+import { useEffect } from 'react';
+export function useOnClickOutside(ref, handler, enabled = true) {
+    useEffect(() => {
+        // Only attach listeners while the menu is actually open — avoids
+        // unnecessary global listeners on every page.
+        if (!enabled)
+            return;
+        const handlePointerDown = (event) => {
+            const container = ref.current;
+            if (!container)
+                return;
+            if (event.target instanceof Node && container.contains(event.target)) {
+                // Click landed inside the container (trigger button or menu body) —
+                // let the component's own click handlers deal with it.
+                return;
+            }
+            handler();
+        };
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape')
+                handler();
+        };
+        // `pointerdown` fires before `click`, so the menu is already closed by
+        // the time a click on an element behind it fires — clicking "through"
+        // to another control outside the menu both closes the menu AND performs
+        // that control's own action, matching standard menu/popover UX.
+        document.addEventListener('pointerdown', handlePointerDown);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', handlePointerDown);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [ref, handler, enabled]);
+}

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { LoadingSpinner, type LoadingSpinnerProps } from './loading-spinner.js';
 export { StatusBadge, type StatusBadgeProps, type StatusBadgeTone } from './status-badge.js';
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from './command.js';
 export { Popover, PopoverTrigger, PopoverContent } from './popover.js';
+export { useOnClickOutside } from './hooks/useOnClickOutside.js';
 export { EntitySelector, type EntitySelectorProps, type EntitySelectorQuery, type EntitySelectorLogger, type EntitySelectorSupabaseClient, } from './entity-selector.js';
 export { BrandingCard, ColorEditorSheet, OklchColorPicker, type BrandingCardProps, type ColorEditorSheetProps, type OklchColorPickerProps, } from './branding/index.js';
 export { sanitizeCustomCss } from './branding/sanitizeCustomCss.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAA;AAC/B,OAAO,EACL,IAAI,EACJ,cAAc,EACd,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,OAAO,GACb,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5E,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,aAAa,GACnB,MAAM,aAAa,CAAA;AACpB,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,GACxB,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,SAAS,GACf,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC5E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC/E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC5F,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,eAAe,GAChB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AACtE,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,4BAA4B,GAClC,MAAM,sBAAsB,CAAA;AAG7B,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAA;AAC/B,OAAO,EACL,IAAI,EACJ,cAAc,EACd,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,OAAO,GACb,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5E,OAAO,EACL,MAAM,EACN,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,aAAa,GACnB,MAAM,aAAa,CAAA;AACpB,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,GACxB,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AACnE,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,KAAK,oBAAoB,EACzB,KAAK,oBAAoB,EACzB,KAAK,SAAS,GACf,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAC5E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAC/E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC5F,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,eAAe,GAChB,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAA;AAChE,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,EACzB,KAAK,4BAA4B,GAClC,MAAM,sBAAsB,CAAA;AAG7B,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,gBAAgB,EAChB,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,GAC3B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA"}

package/dist/index.js

@@ -13,6 +13,7 @@ export { LoadingSpinner } from './loading-spinner.js';
 export { StatusBadge } from './status-badge.js';
 export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from './command.js';
 export { Popover, PopoverTrigger, PopoverContent } from './popover.js';
+export { useOnClickOutside } from './hooks/useOnClickOutside.js';
 export { EntitySelector, } from './entity-selector.js';
 // Branding components (v0.3.0+)
 export { BrandingCard, ColorEditorSheet, OklchColorPicker, } from './branding/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/ui",
-  "version": "1.2.2",
+  "version": "1.3.1",
   "type": "module",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -79,6 +79,10 @@
       "import": "./dist/entity-selector.js",
       "types": "./dist/entity-selector.d.ts"
     },
+    "./use-on-click-outside": {
+      "import": "./dist/hooks/useOnClickOutside.js",
+      "types": "./dist/hooks/useOnClickOutside.d.ts"
+    },
     "./assets/d2c-default-logo.svg": "./src/assets/d2c-default-logo.svg"
   },
   "scripts": {
@@ -89,12 +93,12 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.1.16",
-    "@radix-ui/react-popover": "^1.1.16",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-popover": "^1.1.23",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "lucide-react": "^1.17.0",
-    "react-error-boundary": "^6.1.2",
+    "lucide-react": "^1.37.0",
+    "react-error-boundary": "^6.1.4",
     "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {
@@ -113,22 +117,22 @@
   },
   "devDependencies": {
     "@bsuite/theme": "workspace:^",
-    "@storybook/react-vite": "^10.5.8",
-    "@supabase/postgrest-js": "^2.108.1",
-    "@tailwindcss/vite": "^4.3.0",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
-    "jsdom": "^29.1.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "storybook": "^10.5.8",
-    "tailwindcss": "^4.3.0",
-    "typescript": "~6.0.3",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.8"
+    "@storybook/react-vite": "^10.5.10",
+    "@supabase/postgrest-js": "^2.112.4",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.6",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "@vitejs/plugin-react": "^6.1.1",
+    "jsdom": "^30.0.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "storybook": "^10.5.10",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11"
   }
 }