@select-org/select-post-builder 1.1.33 → 1.1.34

package/dist/post-builder.cjs.js

@@ -33689,10 +33689,20 @@ const PostBuilderEditorInstance = ({
   placement
 }) => {
   const [isDragging, setIsDragging] = React.useState(false);
+  const [hasGroupSelected, setHasGroupSelected] = React.useState(true);
   const { trackPublish } = useAnalyticsTracking();
   const { clearContent } = usePersistence(placement);
   useHostAnalyticsBridge();
   useEditorTracking({ editor, editorType: editorTab });
+  React.useEffect(() => {
+    const checkGroupSelection = () => {
+      const { groupId, selectedGroupId } = store.getState();
+      setHasGroupSelected(!!(groupId || selectedGroupId));
+    };
+    checkGroupSelection();
+    const unsubscribe = store.subscribe(checkGroupSelection);
+    return () => unsubscribe();
+  }, [store]);
   const handleDragOver = (e2) => {
     e2.preventDefault();
     setIsDragging(true);
@@ -33705,6 +33715,12 @@ const PostBuilderEditorInstance = ({
     e2.preventDefault();
     setIsDragging(false);
   };
+  const handleOpenGroupSelector = () => {
+    const selectorTrigger = document.querySelector('[aria-label="Select group"]');
+    if (selectorTrigger) {
+      selectorTrigger.click();
+    }
+  };
   const handleSubmit = (sendCrossMention) => {
     if (!editor) return;
     const html2 = editor?.getHTML();
@@ -33752,11 +33768,21 @@ const PostBuilderEditorInstance = ({
     "div",
     {
       className: cn(
-        "post-builder-editor bg-background border rounded-md overflow-hidden max-h-full grow flex flex-col overflow-y-auto transition-all duration-300 ease-in-out",
+        "post-builder-editor bg-background border rounded-md overflow-hidden max-h-full grow flex flex-col overflow-y-auto transition-all duration-300 ease-in-out relative",
         placement === EditorPlacement.Comment ? "min-h-32" : "min-h-60",
         className
       ),
       children: [
+        !hasGroupSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-50 absolute inset-0 bg-foreground/30 backdrop-blur-xs flex items-center justify-center rounded-md pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "lg",
+            onClick: handleOpenGroupSelector,
+            className: "pointer-events-auto cursor-pointer hover:animate-none animate-pulse",
+            children: "Please select a group first"
+          }
+        ) }),
         placement !== EditorPlacement.Comment && /* @__PURE__ */ jsxRuntime.jsx(EditorTypeTabs, { editorTab, onSwitchEditorTab: onSwitchEditor }),
         /* @__PURE__ */ jsxRuntime.jsx(
           Toolbar,

package/dist/post-builder.css

@@ -147,6 +147,7 @@
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
     --animate-bounce: bounce 1s infinite;
+    --blur-xs: 4px;
     --blur-sm: 8px;
     --blur-2xl: 40px;
     --default-transition-duration: .15s;
@@ -454,6 +455,10 @@ body {
     container: field-group / inline-size;
   }
 
+[data-theme="select-post-builder"] .pointer-events-auto {
+    pointer-events: auto;
+  }
+
 [data-theme="select-post-builder"] .pointer-events-none {
     pointer-events: none;
   }
@@ -2298,10 +2303,16 @@ body {
     background-color: var(--destructive);
   }
 
-[data-theme="select-post-builder"] .bg-foreground {
+[data-theme="select-post-builder"] .bg-foreground, [data-theme="select-post-builder"] .bg-foreground\/30 {
     background-color: var(--foreground);
   }
 
+@supports (color: color-mix(in lab, red, red)) {
+    [data-theme="select-post-builder"] .bg-foreground\/30 {
+      background-color: color-mix(in oklab, var(--foreground) 30%, transparent);
+    }
+  }
+
 [data-theme="select-post-builder"] .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
@@ -2950,6 +2961,11 @@ body {
     backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   }
 
+[data-theme="select-post-builder"] .backdrop-blur-xs {
+    --tw-backdrop-blur: blur(var(--blur-xs));
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
 [data-theme="select-post-builder"] .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3258,6 +3274,10 @@ body {
       scale: 1.02;
     }
 
+    [data-theme="select-post-builder"] .hover\:animate-none:hover {
+      animation: none;
+    }
+
     [data-theme="select-post-builder"] .hover\:border-accent:hover {
       border-color: var(--accent);
     }

package/dist/post-builder.js

@@ -33659,10 +33659,20 @@ const PostBuilderEditorInstance = ({
   placement
 }) => {
   const [isDragging, setIsDragging] = useState(false);
+  const [hasGroupSelected, setHasGroupSelected] = useState(true);
   const { trackPublish } = useAnalyticsTracking();
   const { clearContent } = usePersistence(placement);
   useHostAnalyticsBridge();
   useEditorTracking({ editor, editorType: editorTab });
+  useEffect(() => {
+    const checkGroupSelection = () => {
+      const { groupId, selectedGroupId } = store.getState();
+      setHasGroupSelected(!!(groupId || selectedGroupId));
+    };
+    checkGroupSelection();
+    const unsubscribe = store.subscribe(checkGroupSelection);
+    return () => unsubscribe();
+  }, [store]);
   const handleDragOver = (e2) => {
     e2.preventDefault();
     setIsDragging(true);
@@ -33675,6 +33685,12 @@ const PostBuilderEditorInstance = ({
     e2.preventDefault();
     setIsDragging(false);
   };
+  const handleOpenGroupSelector = () => {
+    const selectorTrigger = document.querySelector('[aria-label="Select group"]');
+    if (selectorTrigger) {
+      selectorTrigger.click();
+    }
+  };
   const handleSubmit = (sendCrossMention) => {
     if (!editor) return;
     const html2 = editor?.getHTML();
@@ -33722,11 +33738,21 @@ const PostBuilderEditorInstance = ({
     "div",
     {
       className: cn(
-        "post-builder-editor bg-background border rounded-md overflow-hidden max-h-full grow flex flex-col overflow-y-auto transition-all duration-300 ease-in-out",
+        "post-builder-editor bg-background border rounded-md overflow-hidden max-h-full grow flex flex-col overflow-y-auto transition-all duration-300 ease-in-out relative",
         placement === EditorPlacement.Comment ? "min-h-32" : "min-h-60",
         className
       ),
       children: [
+        !hasGroupSelected && /* @__PURE__ */ jsx("div", { className: "z-50 absolute inset-0 bg-foreground/30 backdrop-blur-xs flex items-center justify-center rounded-md pointer-events-none", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "lg",
+            onClick: handleOpenGroupSelector,
+            className: "pointer-events-auto cursor-pointer hover:animate-none animate-pulse",
+            children: "Please select a group first"
+          }
+        ) }),
         placement !== EditorPlacement.Comment && /* @__PURE__ */ jsx(EditorTypeTabs, { editorTab, onSwitchEditorTab: onSwitchEditor }),
         /* @__PURE__ */ jsx(
           Toolbar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@select-org/select-post-builder",
-  "version": "1.1.33",
+  "version": "1.1.34",
   "description": "A reusable, extensible Post Builder widget for the Select platform and beyond.",
   "main": "./dist/post-builder.cjs.js",
   "module": "./dist/post-builder.js",