@flytedan/flytebot-design-system 0.45.0 → 0.46.0

package/dist/index.cjs

@@ -207,6 +207,7 @@ __export(index_exports, {
   installFlytedeskFavicon: () => installFlytedeskFavicon,
   isImage: () => isImage,
   isSystemMessage: () => isSystemMessage,
+  isWithinLayerTree: () => isWithinLayerTree,
   jobBucket: () => jobBucket,
   languageLabel: () => languageLabel,
   loadPrefs: () => loadPrefs,
@@ -342,11 +343,21 @@ var import_react_dom = require("react-dom");
 // src/kits/layerStack.tsx
 var React2 = __toESM(require("react"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable]:not([contenteditable="false"])';
 var LayerContext = React2.createContext(null);
 var openLayers = /* @__PURE__ */ new Set();
 var lastOrder = 0;
 var pendingEscape = null;
+var lastClosed = null;
+function isOpener(el) {
+  return !!el && el !== document.body && el.isConnected;
+}
+function inheritedOpener() {
+  let l = lastClosed;
+  lastClosed = null;
+  for (; l; l = l.parent) if (isOpener(l.opener)) return l.opener;
+  return null;
+}
 function rank(layer) {
   const path = [];
   for (let l = layer; l; l = l.parent) if (l.order > 0) path.push(l.order);
@@ -432,11 +443,13 @@ function open(layer) {
   }
   openLayers.add(layer);
   layer.order = ++lastOrder;
+  lastClosed = null;
   if (layer.options.trap && !contains(scopeOf(layer), document.activeElement)) focusInto(layer);
 }
 function close(layer) {
   openLayers.delete(layer);
   layer.order = 0;
+  lastClosed = layer;
   if (openLayers.size === 0) {
     document.removeEventListener("keydown", onKeydownCapture, true);
     document.removeEventListener("keydown", onKeydown);
@@ -454,7 +467,7 @@ function returnFocus(layer) {
       focusInto(l);
       return;
     }
-    if (l.opener && l.opener.isConnected) {
+    if (isOpener(l.opener)) {
       l.opener.focus({ preventScroll: true });
       return;
     }
@@ -465,7 +478,9 @@ function useStackedLayer(options) {
   const [layer] = React2.useState(() => ({ parent, options, order: 0, opener: null }));
   const { active } = options;
   React2.useInsertionEffect(() => {
-    if (active) layer.opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    if (!active) return;
+    const current2 = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    layer.opener = isOpener(current2) ? current2 : inheritedOpener();
   }, [active, layer]);
   React2.useLayoutEffect(() => {
     layer.options = options;
@@ -484,6 +499,9 @@ function useStackedLayer(options) {
 function StackedLayerProvider({ layer, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LayerContext.Provider, { value: layer, children });
 }
+function isWithinLayerTree(layer, node) {
+  return contains(scopeOf(layer), node);
+}
 
 // src/components/actions/Popover.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -680,15 +698,14 @@ function Popover({
     const away = (e) => {
       if (!closeOnOutside) return;
       const target = e.target;
-      if (ref.current && ref.current.contains(target)) return;
+      if (isWithinLayerTree(layer, target)) return;
       const trigger = (triggerRef || anchorRef).current;
       if (trigger && trigger.contains(target)) return;
-      if (e.target.closest && e.target.closest(".fd-pop")) return;
       onClose && onClose();
     };
     document.addEventListener("pointerdown", away, true);
     return () => document.removeEventListener("pointerdown", away, true);
-  }, [open2, closeOnOutside, onClose, anchorRef, triggerRef]);
+  }, [open2, closeOnOutside, onClose, anchorRef, triggerRef, layer]);
   if (!open2 || !pos) return null;
   return portal(
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayerProvider, { zIndex, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(StackedLayerProvider, { layer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -14250,6 +14267,7 @@ function useDocumentTitle(routeTitle, appName) {
   installFlytedeskFavicon,
   isImage,
   isSystemMessage,
+  isWithinLayerTree,
   jobBucket,
   languageLabel,
   loadPrefs,