@streamoid/ui 0.6.52 → 0.6.54

package/dist/index.d.mts

@@ -911,7 +911,14 @@ interface ScSidebarWorkspaceTriggerProps {
     className?: string;
     style?: CSSProperties;
 }
-declare function ScSidebarWorkspaceTrigger({ workspaceName, workspaceImage, expanded, open, onClick, className, style, }: ScSidebarWorkspaceTriggerProps): JSX.Element;
+/**
+ * FORWARDS ITS REF, for the same reason `ScSidebarAppIdentity` does: the
+ * workspace popover's caret points HERE, and without a ref every host wraps
+ * this in a div to get one. Those wrappers are load-bearing in ways the host
+ * has to remember — see the app identity, where one shipped crammed against
+ * the footer's left edge.
+ */
+declare const ScSidebarWorkspaceTrigger: React$1.ForwardRefExoticComponent<ScSidebarWorkspaceTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 interface ScSidebarSearchTriggerProps {
     expanded: boolean;
     label?: string;
@@ -930,7 +937,16 @@ interface ScSidebarAppIdentityProps {
     label?: string;
     className?: string;
 }
-declare function ScSidebarAppIdentity({ expanded, product, collapsedLabel, collapsedMark, label, className, }: ScSidebarAppIdentityProps): JSX.Element;
+/**
+ * FORWARDS ITS REF, so a host can anchor a popover to it directly.
+ *
+ * Without one, a host that needs to point a caret here has to wrap this in a
+ * div — and a bare div inside the footer's row-flex is an ITEM sized to its
+ * content, so the `width: 100%` + `space-between` below resolve against the
+ * wrapper instead of the row and the wordmark and app-grid icon end up crammed
+ * together. That shipped in CXO. The wrapper was never the point; the ref was.
+ */
+declare const ScSidebarAppIdentity: React$1.ForwardRefExoticComponent<ScSidebarAppIdentityProps & React$1.RefAttributes<HTMLSpanElement>>;
 interface ScWorkspaceAccountMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     workspaceName: string;
     workspaceRole?: string;
@@ -1187,10 +1203,18 @@ interface IScSidebarPopoverProps {
     role?: string;
     ariaLabel?: string;
     testId?: string;
+    /** Render the dismiss catcher. On by default.
+     *
+     *  Pass `false` when the host already has its own outside-click handling and
+     *  that handling is ANCHOR-AWARE. A catcher covers the trigger too, so a
+     *  press on the trigger closes the panel and the trailing click then reopens
+     *  it — the flicker Tactix's switcher was written to avoid. Escape still
+     *  works either way. */
+    backdrop?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-declare function ScSidebarPopover({ anchorRef, alignRef, width, onClose, children, role, ariaLabel, testId, className, style, }: IScSidebarPopoverProps): React$1.ReactPortal | null;
+declare function ScSidebarPopover({ anchorRef, alignRef, width, onClose, children, role, ariaLabel, testId, backdrop, className, style, }: IScSidebarPopoverProps): React$1.ReactPortal | null;
 
 interface AppSidebarMenuItem {
     id: string;

package/dist/index.d.ts

@@ -911,7 +911,14 @@ interface ScSidebarWorkspaceTriggerProps {
     className?: string;
     style?: CSSProperties;
 }
-declare function ScSidebarWorkspaceTrigger({ workspaceName, workspaceImage, expanded, open, onClick, className, style, }: ScSidebarWorkspaceTriggerProps): JSX.Element;
+/**
+ * FORWARDS ITS REF, for the same reason `ScSidebarAppIdentity` does: the
+ * workspace popover's caret points HERE, and without a ref every host wraps
+ * this in a div to get one. Those wrappers are load-bearing in ways the host
+ * has to remember — see the app identity, where one shipped crammed against
+ * the footer's left edge.
+ */
+declare const ScSidebarWorkspaceTrigger: React$1.ForwardRefExoticComponent<ScSidebarWorkspaceTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
 interface ScSidebarSearchTriggerProps {
     expanded: boolean;
     label?: string;
@@ -930,7 +937,16 @@ interface ScSidebarAppIdentityProps {
     label?: string;
     className?: string;
 }
-declare function ScSidebarAppIdentity({ expanded, product, collapsedLabel, collapsedMark, label, className, }: ScSidebarAppIdentityProps): JSX.Element;
+/**
+ * FORWARDS ITS REF, so a host can anchor a popover to it directly.
+ *
+ * Without one, a host that needs to point a caret here has to wrap this in a
+ * div — and a bare div inside the footer's row-flex is an ITEM sized to its
+ * content, so the `width: 100%` + `space-between` below resolve against the
+ * wrapper instead of the row and the wordmark and app-grid icon end up crammed
+ * together. That shipped in CXO. The wrapper was never the point; the ref was.
+ */
+declare const ScSidebarAppIdentity: React$1.ForwardRefExoticComponent<ScSidebarAppIdentityProps & React$1.RefAttributes<HTMLSpanElement>>;
 interface ScWorkspaceAccountMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
     workspaceName: string;
     workspaceRole?: string;
@@ -1187,10 +1203,18 @@ interface IScSidebarPopoverProps {
     role?: string;
     ariaLabel?: string;
     testId?: string;
+    /** Render the dismiss catcher. On by default.
+     *
+     *  Pass `false` when the host already has its own outside-click handling and
+     *  that handling is ANCHOR-AWARE. A catcher covers the trigger too, so a
+     *  press on the trigger closes the panel and the trailing click then reopens
+     *  it — the flicker Tactix's switcher was written to avoid. Escape still
+     *  works either way. */
+    backdrop?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-declare function ScSidebarPopover({ anchorRef, alignRef, width, onClose, children, role, ariaLabel, testId, className, style, }: IScSidebarPopoverProps): React$1.ReactPortal | null;
+declare function ScSidebarPopover({ anchorRef, alignRef, width, onClose, children, role, ariaLabel, testId, backdrop, className, style, }: IScSidebarPopoverProps): React$1.ReactPortal | null;
 
 interface AppSidebarMenuItem {
     id: string;

package/dist/index.js

@@ -5626,6 +5626,7 @@ function StreamoidSidebar({
 }
 
 // src/SC-SidebarShell/ScSidebarShell.tsx
+var import_react16 = require("react");
 var import_icons37 = require("@streamoid/icons");
 
 // src/SC-SidebarShell/ScSidebarShell.module.css
@@ -5667,7 +5668,7 @@ var ScSidebarShell_default = {
 
 // src/SC-SidebarShell/ScSidebarShell.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-function ScSidebarWorkspaceTrigger({
+var ScSidebarWorkspaceTrigger = (0, import_react16.forwardRef)(function ScSidebarWorkspaceTrigger2({
   workspaceName,
   workspaceImage,
   expanded,
@@ -5675,11 +5676,12 @@ function ScSidebarWorkspaceTrigger({
   onClick,
   className,
   style
-}) {
+}, ref) {
   const initial = (workspaceName || "W").charAt(0).toUpperCase();
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     "button",
     {
+      ref,
       type: "button",
       "aria-label": `Open ${workspaceName} workspace menu`,
       "aria-expanded": open,
@@ -5711,7 +5713,7 @@ function ScSidebarWorkspaceTrigger({
       ]
     }
   );
-}
+});
 function ScSidebarSearchTrigger({
   expanded,
   label = "Search or Ask CXO",
@@ -5754,18 +5756,19 @@ var COMPACT_APP_LABELS = {
   catalogix: "Ca",
   photogenix: "Ph"
 };
-function ScSidebarAppIdentity({
+var ScSidebarAppIdentity = (0, import_react16.forwardRef)(function ScSidebarAppIdentity2({
   expanded,
   product = "streamoid",
   collapsedLabel,
   collapsedMark,
   label,
   className
-}) {
+}, ref) {
   const appLabel = label ?? (product === "streamoid" ? "Streamoid" : product);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "span",
     {
+      ref,
       "aria-label": `Switch Apps. Current app: ${appLabel}`,
       title: "Switch Apps",
       className: `${ScSidebarShell_default.appIdentity} ${expanded ? ScSidebarShell_default.appIdentityExpanded : ScSidebarShell_default.appIdentityCollapsed}${className ? ` ${className}` : ""}`,
@@ -5781,7 +5784,7 @@ function ScSidebarAppIdentity({
       ] }) : collapsedMark ?? (product === "streamoid" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ScStreamoidMascot, { size: 40 }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { "aria-hidden": true, className: ScSidebarShell_default.collapsedProductMark, children: collapsedLabel ?? COMPACT_APP_LABELS[product] }))
     }
   );
-}
+});
 function MenuActionRow({
   icon,
   label,
@@ -5973,7 +5976,7 @@ function ScWorkspaceAccountMenu({
 }
 
 // src/SC-SidebarShell/useStreamoidShellPreferences.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var THEME_COOKIE = "streamoid_theme";
 var SIDEBAR_COOKIE = "streamoid_sidebar";
 var THEME_STORAGE_KEY = "streamoid.shell.theme";
@@ -6055,7 +6058,7 @@ function readExpanded(options) {
 }
 function useStreamoidThemePreference(options = {}) {
   const legacyKeySignature = (options.legacyStorageKeys ?? []).join("\0");
-  const stableOptions = (0, import_react16.useMemo)(
+  const stableOptions = (0, import_react17.useMemo)(
     () => ({
       defaultMode: options.defaultMode,
       legacyStorageKeys: legacyKeySignature ? legacyKeySignature.split("\0") : [],
@@ -6063,31 +6066,31 @@ function useStreamoidThemePreference(options = {}) {
     }),
     [options.defaultMode, options.applyToDocument, legacyKeySignature]
   );
-  const [preference, setPreferenceState] = (0, import_react16.useState)(
+  const [preference, setPreferenceState] = (0, import_react17.useState)(
     () => readTheme(stableOptions)
   );
-  const [systemDark, setSystemDark] = (0, import_react16.useState)(
+  const [systemDark, setSystemDark] = (0, import_react17.useState)(
     () => canUseDom() && window.matchMedia("(prefers-color-scheme: dark)").matches
   );
-  const setPreference = (0, import_react16.useCallback)((mode) => {
+  const setPreference = (0, import_react17.useCallback)((mode) => {
     setPreferenceState(mode);
     writeStorage(THEME_STORAGE_KEY, mode);
     stableOptions.legacyStorageKeys.forEach((key) => writeStorage(key, mode));
     writeCookie(THEME_COOKIE, mode);
   }, [stableOptions]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     writeStorage(THEME_STORAGE_KEY, preference);
     stableOptions.legacyStorageKeys.forEach((key) => writeStorage(key, preference));
     writeCookie(THEME_COOKIE, preference);
   }, [preference, stableOptions]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!canUseDom()) return;
     const media = window.matchMedia("(prefers-color-scheme: dark)");
     const onChange = (event) => setSystemDark(event.matches);
     media.addEventListener("change", onChange);
     return () => media.removeEventListener("change", onChange);
   }, []);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!canUseDom()) return;
     const sync = () => setPreferenceState(readTheme(stableOptions));
     const onStorage = (event) => {
@@ -6103,7 +6106,7 @@ function useStreamoidThemePreference(options = {}) {
     };
   }, [stableOptions]);
   const resolved = preference === "system" ? systemDark ? "dark" : "light" : preference;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!canUseDom() || !stableOptions.applyToDocument) return;
     const root = document.documentElement;
     root.setAttribute("data-theme", resolved === "light" ? "Light" : "Dark");
@@ -6113,15 +6116,15 @@ function useStreamoidThemePreference(options = {}) {
 }
 function useStreamoidSidebarPreference(options = {}) {
   const legacyKeySignature = (options.legacyCollapsedKeys ?? []).join("\0");
-  const stableOptions = (0, import_react16.useMemo)(
+  const stableOptions = (0, import_react17.useMemo)(
     () => ({
       defaultExpanded: options.defaultExpanded,
       legacyCollapsedKeys: legacyKeySignature ? legacyKeySignature.split("\0") : []
     }),
     [options.defaultExpanded, legacyKeySignature]
   );
-  const [expanded, setExpandedState] = (0, import_react16.useState)(() => readExpanded(stableOptions));
-  const setExpanded = (0, import_react16.useCallback)((nextExpanded) => {
+  const [expanded, setExpandedState] = (0, import_react17.useState)(() => readExpanded(stableOptions));
+  const setExpanded = (0, import_react17.useCallback)((nextExpanded) => {
     setExpandedState(nextExpanded);
     const serialized = nextExpanded ? "expanded" : "collapsed";
     writeStorage(SIDEBAR_STORAGE_KEY, serialized);
@@ -6130,7 +6133,7 @@ function useStreamoidSidebarPreference(options = {}) {
     );
     writeCookie(SIDEBAR_COOKIE, serialized);
   }, [stableOptions]);
-  const toggle = (0, import_react16.useCallback)(() => {
+  const toggle = (0, import_react17.useCallback)(() => {
     setExpandedState((current) => {
       const next = !current;
       const serialized = next ? "expanded" : "collapsed";
@@ -6142,7 +6145,7 @@ function useStreamoidSidebarPreference(options = {}) {
       return next;
     });
   }, [stableOptions]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const serialized = expanded ? "expanded" : "collapsed";
     writeStorage(SIDEBAR_STORAGE_KEY, serialized);
     stableOptions.legacyCollapsedKeys.forEach(
@@ -6150,7 +6153,7 @@ function useStreamoidSidebarPreference(options = {}) {
     );
     writeCookie(SIDEBAR_COOKIE, serialized);
   }, [expanded, stableOptions]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!canUseDom()) return;
     const sync = () => setExpandedState(readExpanded(stableOptions));
     const onStorage = (event) => {
@@ -6169,7 +6172,7 @@ function useStreamoidSidebarPreference(options = {}) {
 }
 
 // src/SC-SidebarShell/useStreamoidAnchoredPopoverPosition.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 var ARROW_EDGE_INSET = 18;
 function resolveAnchoredPopoverArrow({
   anchor,
@@ -6224,7 +6227,7 @@ function useStreamoidAnchoredPopover(anchorRef, panelRef, {
   inset = DEFAULT_INSET,
   alignRef
 }) {
-  const [state, setState] = (0, import_react17.useState)({
+  const [state, setState] = (0, import_react18.useState)({
     style: {
       position: "fixed",
       left: 0,
@@ -6236,7 +6239,7 @@ function useStreamoidAnchoredPopover(anchorRef, panelRef, {
     },
     arrow: null
   });
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     const anchor = anchorRef.current;
     if (!anchor || typeof window === "undefined") return;
     const measure = () => {
@@ -6287,7 +6290,7 @@ function useStreamoidAnchoredPopover(anchorRef, panelRef, {
   return state;
 }
 function useStreamoidAnchoredPopoverPosition(anchorRef, panelRef, { width, gap = DEFAULT_GAP, inset = DEFAULT_INSET }) {
-  const [position, setPosition] = (0, import_react17.useState)({
+  const [position, setPosition] = (0, import_react18.useState)({
     position: "fixed",
     left: 0,
     top: 0,
@@ -6296,7 +6299,7 @@ function useStreamoidAnchoredPopoverPosition(anchorRef, panelRef, { width, gap =
     maxHeight: `calc(100dvh - ${inset * 2}px)`,
     visibility: "hidden"
   });
-  (0, import_react17.useLayoutEffect)(() => {
+  (0, import_react18.useLayoutEffect)(() => {
     const anchor = anchorRef.current;
     if (!anchor || typeof window === "undefined") return;
     const measure = () => {
@@ -6340,7 +6343,7 @@ function useStreamoidAnchoredPopoverPosition(anchorRef, panelRef, { width, gap =
 }
 
 // src/SC-SidebarShell/useStreamoidSidebarPopoverPosition.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 var VIEWPORT_INSET = 16;
 function useStreamoidSidebarPopoverPosition(sidebarRef, {
   placement,
@@ -6348,7 +6351,7 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
   gap = 8,
   inset = 0
 }) {
-  const [position, setPosition] = (0, import_react18.useState)({
+  const [position, setPosition] = (0, import_react19.useState)({
     position: "fixed",
     left: 0,
     top: 0,
@@ -6357,7 +6360,7 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
     maxHeight: `calc(100dvh - ${VIEWPORT_INSET * 2}px)`,
     visibility: "hidden"
   });
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useLayoutEffect)(() => {
     const sidebar = sidebarRef.current;
     if (!sidebar || typeof window === "undefined") return;
     const findCard = () => (sidebar.matches("[data-streamoid-sidebar-card]") ? sidebar : sidebar.querySelector(
@@ -6418,7 +6421,7 @@ function useStreamoidSidebarPopoverPosition(sidebarRef, {
 }
 
 // src/SC-SidebarShell/ScSidebarPopover.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var SURFACE = "var(--sc-sidebar-popover-surface, var(--alias-surface-base, #101010))";
@@ -6433,16 +6436,17 @@ function ScSidebarPopover({
   role = "menu",
   ariaLabel,
   testId,
+  backdrop = true,
   className,
   style
 }) {
-  const panelRef = (0, import_react19.useRef)(null);
+  const panelRef = (0, import_react20.useRef)(null);
   const { style: position, arrow } = useStreamoidAnchoredPopover(
     anchorRef,
     panelRef,
     { width, alignRef }
   );
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
     };
@@ -6450,47 +6454,50 @@ function ScSidebarPopover({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [onClose]);
   if (typeof document === "undefined") return null;
+  const panel = /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    "div",
+    {
+      ref: panelRef,
+      onMouseDown: (event) => event.stopPropagation(),
+      role,
+      "aria-label": ariaLabel,
+      "data-testid": testId,
+      className,
+      style: {
+        ...position,
+        backgroundColor: SURFACE,
+        border: `1px solid ${BORDER}`,
+        borderRadius: RADIUS,
+        boxShadow: "var(--sc-sidebar-popover-shadow, 0 12px 32px rgba(0, 0, 0, 0.24))",
+        zIndex: 50,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ScPopoverArrow, { arrow, background: SURFACE, borderColor: BORDER }),
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: { borderRadius: RADIUS, overflow: "hidden" }, children })
+      ]
+    }
+  );
   return (0, import_react_dom.createPortal)(
-    /* The backdrop is what makes a click anywhere else dismiss this, without
-       a document-level listener that fires before the opening click has
-       finished and closes the popover as it opens. */
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-      "div",
-      {
-        style: { position: "fixed", inset: 0, zIndex: 40 },
-        onMouseDown: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
-          "div",
-          {
-            ref: panelRef,
-            onMouseDown: (event) => event.stopPropagation(),
-            role,
-            "aria-label": ariaLabel,
-            "data-testid": testId,
-            className,
-            style: {
-              ...position,
-              backgroundColor: SURFACE,
-              border: `1px solid ${BORDER}`,
-              borderRadius: RADIUS,
-              boxShadow: "var(--sc-sidebar-popover-shadow, 0 12px 32px rgba(0, 0, 0, 0.24))",
-              zIndex: 50,
-              ...style
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ScPopoverArrow, { arrow, background: SURFACE, borderColor: BORDER }),
-              /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: { borderRadius: RADIUS, overflow: "hidden" }, children })
-            ]
-          }
-        )
-      }
-    ),
+    backdrop ? (
+      /* The catcher is what makes a click anywhere else dismiss this, without
+         a document-level listener that fires before the opening click has
+         finished and closes the popover as it opens. */
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        "div",
+        {
+          style: { position: "fixed", inset: 0, zIndex: 40 },
+          onMouseDown: onClose,
+          children: panel
+        }
+      )
+    ) : panel,
     document.body
   );
 }
 
 // src/SC-Artifax-Sidebar/ScArtifaxSidebar.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // src/SC-Artifax-Sidebar/ScArtifaxSidebar.module.css
 var ScArtifaxSidebar_default = {
@@ -6606,8 +6613,8 @@ function SidebarHeader({
   );
 }
 function useScrolled() {
-  const [scrolled, setScrolled] = (0, import_react20.useState)(false);
-  const onScroll = (0, import_react20.useCallback)((event) => {
+  const [scrolled, setScrolled] = (0, import_react21.useState)(false);
+  const onScroll = (0, import_react21.useCallback)((event) => {
     const next = event.currentTarget.scrollTop > 0;
     setScrolled((prev) => prev === next ? prev : next);
   }, []);
@@ -6648,7 +6655,7 @@ var ScAppSidebar = ({
   };
   const isControlled = !!openSections;
   const { scrolled, onScroll } = useScrolled();
-  const [internalOpen, setInternalOpen] = (0, import_react20.useState)(
+  const [internalOpen, setInternalOpen] = (0, import_react21.useState)(
     () => {
       const init = {};
       sections.forEach((s) => {
@@ -6658,7 +6665,7 @@ var ScAppSidebar = ({
     }
   );
   const isSectionOpen = (id) => isControlled ? !!openSections?.[id] : !!internalOpen[id];
-  const handleSectionToggle = (0, import_react20.useCallback)(
+  const handleSectionToggle = (0, import_react21.useCallback)(
     (id) => {
       const next = !isSectionOpen(id);
       if (isControlled) {
@@ -6892,7 +6899,7 @@ var ScAppSidebar = ({
 var ScArtifaxSidebar = ScAppSidebar;
 
 // src/SC-Catalogix-Sidebar/ScCatalogixSidebar.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/SC-Sidebar Switch menu/ScSidebarSwitchMenu.module.css
 var ScSidebarSwitchMenu_default = {
@@ -7534,7 +7541,7 @@ var ScCatalogixSidebar = ({
   className,
   style
 }) => {
-  const [appListOpen, setAppListOpen] = (0, import_react21.useState)(false);
+  const [appListOpen, setAppListOpen] = (0, import_react22.useState)(false);
   const handleSwitch = () => {
     setAppListOpen((prev) => !prev);
     onLogoClick?.();
@@ -7777,7 +7784,7 @@ var ScSlider = ({
 };
 
 // src/SC-WorkspaceSwitcher/streamoid-workspace-switcher.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_icons42 = require("@streamoid/icons");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var PRIMARY_ICON = "var(--alias-text---icons-primary)";
@@ -7968,12 +7975,12 @@ function StreamoidWorkspaceSwitcher({
   onSwitchWorkspace,
   config
 }) {
-  const modalRef = (0, import_react22.useRef)(null);
+  const modalRef = (0, import_react23.useRef)(null);
   const title = config?.title || "Switch workspace";
   const loadingText = config?.loadingText || "Loading workspaces\u2026";
   const currentWorkspaceText = config?.currentWorkspaceText || "Current workspace";
   const switchWorkspaceText = config?.switchWorkspaceText || "Switch workspace";
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!open) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") onClose();
@@ -9384,7 +9391,7 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_icons62 = require("@streamoid/icons");
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
@@ -9425,7 +9432,7 @@ function ScWorkspaceSwitchCard({
   onSettings,
   onLeave
 }) {
-  const [internalHover, setInternalHover] = (0, import_react23.useState)(false);
+  const [internalHover, setInternalHover] = (0, import_react24.useState)(false);
   const isHover = hover !== void 0 ? hover : internalHover;
   const isCurrent = type === "currentWS";
   const isOther = type === "otherWS";
@@ -9553,7 +9560,7 @@ function ScWorkspaceSwitchCard({
 var NscWorkspaceSwitch = ScWorkspaceSwitchCard;
 
 // src/SC-Modal/ScModal.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_react_dom2 = require("react-dom");
 
 // src/SC-Modal/ScModal.module.css
@@ -9575,7 +9582,7 @@ var ScModal = ({
   closeOnBackdrop = true,
   closeOnEsc = true
 }) => {
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose?.();
@@ -9608,7 +9615,7 @@ var ScModal = ({
 };
 
 // src/SC-Drawer/ScDrawer.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_dom3 = require("react-dom");
 
 // src/SC-Drawer/ScDrawer.module.css
@@ -9636,8 +9643,8 @@ var ScDrawer = ({
   backdrop = false,
   zIndex
 }) => {
-  const panelRef = (0, import_react25.useRef)(null);
-  (0, import_react25.useEffect)(() => {
+  const panelRef = (0, import_react26.useRef)(null);
+  (0, import_react26.useEffect)(() => {
     if (!open) return;
     const onKey = (e) => {
       if (closeOnEsc && e.key === "Escape") onClose?.();
@@ -9735,7 +9742,7 @@ var ScTabs = ({
 };
 
 // src/SC-Counter/ScCounter.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_icons63 = require("@streamoid/icons");
 
 // src/SC-Counter/ScCounter.module.css
@@ -9757,7 +9764,7 @@ var ScCounter = ({
   className,
   style
 }) => {
-  const [showInput, setShowInput] = (0, import_react26.useState)(false);
+  const [showInput, setShowInput] = (0, import_react27.useState)(false);
   const set = (n) => {
     let v = n;
     if (min !== void 0) v = Math.max(min, v);
@@ -10846,7 +10853,7 @@ var ScSelectionList = ({
 };
 
 // src/SC-textArea/ScTextArea.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/SC-textArea/ScTextArea.module.css
 var ScTextArea_default = {
@@ -10876,7 +10883,7 @@ var ScTextArea = ({
   style,
   ...props
 }) => {
-  const [focused, setFocused] = (0, import_react27.useState)(false);
+  const [focused, setFocused] = (0, import_react28.useState)(false);
   const derivedState = state ?? (props.disabled ? "disabled" : focused ? "active" : (props.value !== void 0 ? String(props.value).length > 0 : false) ? "filled" : "default");
   const stateClass = ScTextArea_default["state-" + derivedState];
   const labelGroupClass = ScTextArea_default["label-group-" + (labelGroup || "none")];
@@ -10918,7 +10925,7 @@ var ScTextArea = ({
 };
 
 // src/SC-select/ScSelect.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/SC-select/ScSelect.module.css
 var ScSelect_default = {
@@ -10955,9 +10962,9 @@ var ScSelect = (props) => {
     disabled = false,
     className
   } = props;
-  const [open, setOpen] = (0, import_react28.useState)(false);
-  const rootRef = (0, import_react28.useRef)(null);
-  (0, import_react28.useEffect)(() => {
+  const [open, setOpen] = (0, import_react29.useState)(false);
+  const rootRef = (0, import_react29.useRef)(null);
+  (0, import_react29.useEffect)(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) {
@@ -11048,7 +11055,7 @@ var ScSelect = (props) => {
 };
 
 // src/SC-fileField/ScFileField.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/SC-fileField/ScFileField.module.css
 var ScFileField_default = {
@@ -11086,7 +11093,7 @@ var ScFileField = (props) => {
     label,
     className
   } = props;
-  const inputRef = (0, import_react29.useRef)(null);
+  const inputRef = (0, import_react30.useRef)(null);
   const hasFile = Boolean(fileName);
   const isUploading = Boolean(uploading);
   const clampedProgress = Math.max(0, Math.min(100, progress));
@@ -11205,7 +11212,7 @@ var ScFileField = (props) => {
 };
 
 // src/SC-mediaApproval/ScMediaApproval.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/SC-mediaApproval/ScMediaApproval.module.css
 var ScMediaApproval_default = {
@@ -11252,9 +11259,9 @@ var ScMediaApproval = (props) => {
     className
   } = props;
   const total = mediaUrls.length;
-  const [index, setIndex] = (0, import_react30.useState)(activeIndex ?? 0);
-  const [mediaLoading, setMediaLoading] = (0, import_react30.useState)(false);
-  (0, import_react30.useEffect)(() => {
+  const [index, setIndex] = (0, import_react31.useState)(activeIndex ?? 0);
+  const [mediaLoading, setMediaLoading] = (0, import_react31.useState)(false);
+  (0, import_react31.useEffect)(() => {
     if (typeof activeIndex === "number") {
       setIndex(activeIndex);
     }
@@ -11389,7 +11396,7 @@ var ScMediaApproval = (props) => {
 };
 
 // src/SC-mediaSelect/ScMediaSelect.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // src/SC-mediaSelect/ScMediaSelect.module.css
 var ScMediaSelect_default = {
@@ -11445,7 +11452,7 @@ var ScMediaSelect = (props) => {
   } = props;
   const total = items.length;
   const resolvedMax = typeof max === "number" ? max : total;
-  const selectedSet = (0, import_react31.useMemo)(() => new Set(selected), [selected]);
+  const selectedSet = (0, import_react32.useMemo)(() => new Set(selected), [selected]);
   const selectedCount = selectedSet.size;
   let countLabel = selectedCount + " of " + total + " selected";
   if (min > 0) countLabel += " (min " + min + ")";
@@ -11514,7 +11521,7 @@ var ScMediaSelect = (props) => {
 };
 
 // src/SC-todoList/ScTodoList.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 
 // src/SC-todoList/ScTodoList.module.css
 var ScTodoList_default = {
@@ -11547,9 +11554,9 @@ var ScTodoList = ({
   addPlaceholder = "Add an item",
   className
 }) => {
-  const [editingId, setEditingId] = (0, import_react32.useState)(null);
-  const [editValue, setEditValue] = (0, import_react32.useState)("");
-  const [newValue, setNewValue] = (0, import_react32.useState)("");
+  const [editingId, setEditingId] = (0, import_react33.useState)(null);
+  const [editValue, setEditValue] = (0, import_react33.useState)("");
+  const [newValue, setNewValue] = (0, import_react33.useState)("");
   const total = items.length;
   const completed = items.filter((i) => i.status === "completed").length;
   const startEditing = (item) => {
@@ -12403,7 +12410,7 @@ var ScWorkspaceSwitchMobileV2 = ({
 };
 
 // src/SC-imageField/ScImageField.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 
 // src/SC-imageField/ScImageField.module.css
 var ScImageField_default = {
@@ -12430,7 +12437,7 @@ var ScImageField = ({
   onRemove,
   className
 }) => {
-  const inputRef = (0, import_react33.useRef)(null);
+  const inputRef = (0, import_react34.useRef)(null);
   const hasImage = !!imagePreview;
   function handleClick() {
     if (!hasImage) {
@@ -12666,7 +12673,7 @@ var ScPlanDetailsCardMobile = ({
 };
 
 // src/SC-ProfilePopup/ScProfilePopup.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/SC-ProfilePopup/ScProfilePopup.module.css
 var ScProfilePopup_default = {
@@ -12700,7 +12707,7 @@ var activateOnKey = (handler) => (event) => {
     handler();
   }
 };
-var ScProfilePopup = (0, import_react34.forwardRef)(
+var ScProfilePopup = (0, import_react35.forwardRef)(
   ({
     name = "Chris Hemsworth",
     email = "chris@kepler.com",

package/dist/index.mjs

@@ -5433,6 +5433,7 @@ function StreamoidSidebar({
 }
 
 // src/SC-SidebarShell/ScSidebarShell.tsx
+import { forwardRef as forwardRef2 } from "react";
 import {
   SiconBilling as SiconBilling4,
   SiconDark as SiconDark2,
@@ -5483,7 +5484,7 @@ var ScSidebarShell_default = {
 
 // src/SC-SidebarShell/ScSidebarShell.tsx
 import { Fragment as Fragment16, jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
-function ScSidebarWorkspaceTrigger({
+var ScSidebarWorkspaceTrigger = forwardRef2(function ScSidebarWorkspaceTrigger2({
   workspaceName,
   workspaceImage,
   expanded,
@@ -5491,11 +5492,12 @@ function ScSidebarWorkspaceTrigger({
   onClick,
   className,
   style
-}) {
+}, ref) {
   const initial = (workspaceName || "W").charAt(0).toUpperCase();
   return /* @__PURE__ */ jsxs42(
     "button",
     {
+      ref,
       type: "button",
       "aria-label": `Open ${workspaceName} workspace menu`,
       "aria-expanded": open,
@@ -5527,7 +5529,7 @@ function ScSidebarWorkspaceTrigger({
       ]
     }
   );
-}
+});
 function ScSidebarSearchTrigger({
   expanded,
   label = "Search or Ask CXO",
@@ -5570,18 +5572,19 @@ var COMPACT_APP_LABELS = {
   catalogix: "Ca",
   photogenix: "Ph"
 };
-function ScSidebarAppIdentity({
+var ScSidebarAppIdentity = forwardRef2(function ScSidebarAppIdentity2({
   expanded,
   product = "streamoid",
   collapsedLabel,
   collapsedMark,
   label,
   className
-}) {
+}, ref) {
   const appLabel = label ?? (product === "streamoid" ? "Streamoid" : product);
   return /* @__PURE__ */ jsx53(
     "span",
     {
+      ref,
       "aria-label": `Switch Apps. Current app: ${appLabel}`,
       title: "Switch Apps",
       className: `${ScSidebarShell_default.appIdentity} ${expanded ? ScSidebarShell_default.appIdentityExpanded : ScSidebarShell_default.appIdentityCollapsed}${className ? ` ${className}` : ""}`,
@@ -5597,7 +5600,7 @@ function ScSidebarAppIdentity({
       ] }) : collapsedMark ?? (product === "streamoid" ? /* @__PURE__ */ jsx53(ScStreamoidMascot, { size: 40 }) : /* @__PURE__ */ jsx53("span", { "aria-hidden": true, className: ScSidebarShell_default.collapsedProductMark, children: collapsedLabel ?? COMPACT_APP_LABELS[product] }))
     }
   );
-}
+});
 function MenuActionRow({
   icon,
   label,
@@ -6258,6 +6261,7 @@ function ScSidebarPopover({
   role = "menu",
   ariaLabel,
   testId,
+  backdrop = true,
   className,
   style
 }) {
@@ -6275,41 +6279,44 @@ function ScSidebarPopover({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [onClose]);
   if (typeof document === "undefined") return null;
+  const panel = /* @__PURE__ */ jsxs43(
+    "div",
+    {
+      ref: panelRef,
+      onMouseDown: (event) => event.stopPropagation(),
+      role,
+      "aria-label": ariaLabel,
+      "data-testid": testId,
+      className,
+      style: {
+        ...position,
+        backgroundColor: SURFACE,
+        border: `1px solid ${BORDER}`,
+        borderRadius: RADIUS,
+        boxShadow: "var(--sc-sidebar-popover-shadow, 0 12px 32px rgba(0, 0, 0, 0.24))",
+        zIndex: 50,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx54(ScPopoverArrow, { arrow, background: SURFACE, borderColor: BORDER }),
+        /* @__PURE__ */ jsx54("div", { style: { borderRadius: RADIUS, overflow: "hidden" }, children })
+      ]
+    }
+  );
   return createPortal(
-    /* The backdrop is what makes a click anywhere else dismiss this, without
-       a document-level listener that fires before the opening click has
-       finished and closes the popover as it opens. */
-    /* @__PURE__ */ jsx54(
-      "div",
-      {
-        style: { position: "fixed", inset: 0, zIndex: 40 },
-        onMouseDown: onClose,
-        children: /* @__PURE__ */ jsxs43(
-          "div",
-          {
-            ref: panelRef,
-            onMouseDown: (event) => event.stopPropagation(),
-            role,
-            "aria-label": ariaLabel,
-            "data-testid": testId,
-            className,
-            style: {
-              ...position,
-              backgroundColor: SURFACE,
-              border: `1px solid ${BORDER}`,
-              borderRadius: RADIUS,
-              boxShadow: "var(--sc-sidebar-popover-shadow, 0 12px 32px rgba(0, 0, 0, 0.24))",
-              zIndex: 50,
-              ...style
-            },
-            children: [
-              /* @__PURE__ */ jsx54(ScPopoverArrow, { arrow, background: SURFACE, borderColor: BORDER }),
-              /* @__PURE__ */ jsx54("div", { style: { borderRadius: RADIUS, overflow: "hidden" }, children })
-            ]
-          }
-        )
-      }
-    ),
+    backdrop ? (
+      /* The catcher is what makes a click anywhere else dismiss this, without
+         a document-level listener that fires before the opening click has
+         finished and closes the popover as it opens. */
+      /* @__PURE__ */ jsx54(
+        "div",
+        {
+          style: { position: "fixed", inset: 0, zIndex: 40 },
+          onMouseDown: onClose,
+          children: panel
+        }
+      )
+    ) : panel,
     document.body
   );
 }
@@ -12516,7 +12523,7 @@ var ScPlanDetailsCardMobile = ({
 };
 
 // src/SC-ProfilePopup/ScProfilePopup.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef3 } from "react";
 
 // src/SC-ProfilePopup/ScProfilePopup.module.css
 var ScProfilePopup_default = {
@@ -12561,7 +12568,7 @@ var activateOnKey = (handler) => (event) => {
     handler();
   }
 };
-var ScProfilePopup = forwardRef2(
+var ScProfilePopup = forwardRef3(
   ({
     name = "Chris Hemsworth",
     email = "chris@kepler.com",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/ui",
-  "version": "0.6.52",
+  "version": "0.6.54",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",