@bsuite/ui 1.2.2 → 1.3.0

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.0",
   "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": {