@sesionario/blocks 1.11.0 → 1.12.0

package/dist/index.d.cts

@@ -378,14 +378,16 @@ interface EmojiPickerPopoverProps extends EmojiPickerProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     /** Keep the popover open after choosing an emoji (e.g. to add several).
-     * Default `false`. */
+     * Default `true` so multi-emoji insertion is one-click-away. Pass `false`
+     * to close on every selection. */
     keepOpenOnSelect?: boolean;
 }
 /**
  * Convenience wrapper: a `Smile` icon button that opens {@link EmojiPicker} in
  * a popover. Prefer {@link EmojiTextarea} / {@link EmojiInput} for in-field
  * adornment; use this when you need a standalone trigger. Uncontrolled by
- * default; pass `open`/`onOpenChange` to control it.
+ * default; pass `open`/`onOpenChange` to control it. Stays open across
+ * selections by default; closes on pointer-down outside or Escape.
  */
 declare function EmojiPickerPopover({ onSelect, triggerLabel, triggerClassName, disabled, side, align, open, onOpenChange, keepOpenOnSelect, locale, ...pickerProps }: EmojiPickerPopoverProps): React.JSX.Element;
 
@@ -935,20 +937,35 @@ type MessageComposerProps = Omit<React.ComponentProps<"textarea">, "children" |
     sendLabel: string;
     /**
      * Extra condition that disables send (e.g. connection closed).
-     * Empty/whitespace drafts are always blocked.
+     * Empty/whitespace drafts are blocked unless {@link allowEmptySubmit}.
      */
     sendDisabled?: boolean;
-    /** Called when the form submits a non-empty trimmed draft. */
+    /**
+     * When true, the submit button stays enabled with an empty draft
+     * (e.g. attachment-only feed posts). Default `false`.
+     */
+    allowEmptySubmit?: boolean;
+    /** Called when the form submits (and draft/guards allow it). */
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     /** Extra classes for the submit button. */
     sendButtonClassName?: string;
     /** Submit button size. Default `"sm"`. */
     sendButtonSize?: React.ComponentProps<typeof Button>["size"];
+    /**
+     * When true (default), Enter submits and Shift+Enter inserts a newline.
+     * Set false for long-form composers (Enter = newline; submit via button).
+     */
+    submitOnEnter?: boolean;
+    /** Icon/tool buttons rendered next to the emoji trigger (left cluster). */
+    tools?: React.ReactNode;
+    /** Attachment previews rendered between the textarea and the toolbar. */
+    attachments?: React.ReactNode;
 };
 /**
  * Unified chat composer: bordered form with textarea, emoji picker, and send
- * button. Enter submits; Shift+Enter inserts a newline. IME composition Enter
- * is ignored.
+ * button. Enter submits by default; Shift+Enter inserts a newline. IME
+ * composition Enter is ignored. Pass `tools` / `attachments` to extend the
+ * toolbar and preview strip (e.g. feed post media controls).
  */
 declare const MessageComposer: React.ForwardRefExoticComponent<Omit<MessageComposerProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 

package/dist/index.d.ts

@@ -378,14 +378,16 @@ interface EmojiPickerPopoverProps extends EmojiPickerProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     /** Keep the popover open after choosing an emoji (e.g. to add several).
-     * Default `false`. */
+     * Default `true` so multi-emoji insertion is one-click-away. Pass `false`
+     * to close on every selection. */
     keepOpenOnSelect?: boolean;
 }
 /**
  * Convenience wrapper: a `Smile` icon button that opens {@link EmojiPicker} in
  * a popover. Prefer {@link EmojiTextarea} / {@link EmojiInput} for in-field
  * adornment; use this when you need a standalone trigger. Uncontrolled by
- * default; pass `open`/`onOpenChange` to control it.
+ * default; pass `open`/`onOpenChange` to control it. Stays open across
+ * selections by default; closes on pointer-down outside or Escape.
  */
 declare function EmojiPickerPopover({ onSelect, triggerLabel, triggerClassName, disabled, side, align, open, onOpenChange, keepOpenOnSelect, locale, ...pickerProps }: EmojiPickerPopoverProps): React.JSX.Element;
 
@@ -935,20 +937,35 @@ type MessageComposerProps = Omit<React.ComponentProps<"textarea">, "children" |
     sendLabel: string;
     /**
      * Extra condition that disables send (e.g. connection closed).
-     * Empty/whitespace drafts are always blocked.
+     * Empty/whitespace drafts are blocked unless {@link allowEmptySubmit}.
      */
     sendDisabled?: boolean;
-    /** Called when the form submits a non-empty trimmed draft. */
+    /**
+     * When true, the submit button stays enabled with an empty draft
+     * (e.g. attachment-only feed posts). Default `false`.
+     */
+    allowEmptySubmit?: boolean;
+    /** Called when the form submits (and draft/guards allow it). */
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     /** Extra classes for the submit button. */
     sendButtonClassName?: string;
     /** Submit button size. Default `"sm"`. */
     sendButtonSize?: React.ComponentProps<typeof Button>["size"];
+    /**
+     * When true (default), Enter submits and Shift+Enter inserts a newline.
+     * Set false for long-form composers (Enter = newline; submit via button).
+     */
+    submitOnEnter?: boolean;
+    /** Icon/tool buttons rendered next to the emoji trigger (left cluster). */
+    tools?: React.ReactNode;
+    /** Attachment previews rendered between the textarea and the toolbar. */
+    attachments?: React.ReactNode;
 };
 /**
  * Unified chat composer: bordered form with textarea, emoji picker, and send
- * button. Enter submits; Shift+Enter inserts a newline. IME composition Enter
- * is ignored.
+ * button. Enter submits by default; Shift+Enter inserts a newline. IME
+ * composition Enter is ignored. Pass `tools` / `attachments` to extend the
+ * toolbar and preview strip (e.g. feed post media controls).
  */
 declare const MessageComposer: React.ForwardRefExoticComponent<Omit<MessageComposerProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 

package/dist/index.js

@@ -2957,8 +2957,8 @@ function EmojiPicker({
           {
             ref: scrollRef,
             onKeyDown: handleGridKeyDown,
-            className: "h-64 overflow-x-hidden overflow-y-auto p-2",
-            children: normalizedQuery ? searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-8 text-center text-sm", children: strings.noResults }) : /* @__PURE__ */ jsx(
+            className: "h-64 overflow-x-hidden overflow-y-auto px-2 pb-2",
+            children: normalizedQuery ? searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-8 text-center text-sm", children: strings.noResults }) : /* @__PURE__ */ jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsx(
               EmojiGrid,
               {
                 emojis: searchResults,
@@ -2967,7 +2967,7 @@ function EmojiPicker({
                 skinTone,
                 onSelect: handleSelect
               }
-            ) : sections.map((section) => {
+            ) }) : sections.map((section) => {
               const startIndex = flatOffset;
               flatOffset += section.emojis.length;
               return /* @__PURE__ */ jsxs(
@@ -2978,7 +2978,7 @@ function EmojiPicker({
                   },
                   className: "mb-2",
                   children: [
-                    /* @__PURE__ */ jsx("h3", { className: "text-muted-foreground bg-popover sticky top-0 z-[1] px-1 py-1 text-xs font-medium", children: section.title }),
+                    /* @__PURE__ */ jsx("h3", { className: "text-muted-foreground bg-popover sticky top-0 z-[1] -mx-2 px-3 pt-2 pb-1 text-xs font-medium", children: section.title }),
                     /* @__PURE__ */ jsx(
                       "div",
                       {
@@ -3099,7 +3099,7 @@ function EmojiPickerPopover({
   align = "end",
   open,
   onOpenChange,
-  keepOpenOnSelect = false,
+  keepOpenOnSelect = true,
   locale = "en",
   ...pickerProps
 }) {
@@ -3133,7 +3133,16 @@ function EmojiPickerPopover({
         children: /* @__PURE__ */ jsx(Smile, { className: "size-5" })
       }
     ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { side, align, className: "w-auto p-0", children: /* @__PURE__ */ jsx(EmojiPicker, { onSelect: handleSelect, locale, ...pickerProps }) })
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        side,
+        align,
+        className: "w-auto p-0",
+        onFocusOutside: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsx(EmojiPicker, { onSelect: handleSelect, locale, ...pickerProps })
+      }
+    )
   ] });
 }
 
@@ -6136,8 +6145,12 @@ var MessageComposer = React7.forwardRef(function MessageComposer2({
   onKeyDown,
   sendLabel,
   sendDisabled = false,
+  allowEmptySubmit = false,
   sendButtonClassName,
   sendButtonSize = "sm",
+  submitOnEnter = true,
+  tools,
+  attachments,
   triggerLabel,
   keepOpenOnSelect,
   open,
@@ -6156,7 +6169,7 @@ var MessageComposer = React7.forwardRef(function MessageComposer2({
   const handleEmojiSelect = useEmojiInsert(fieldRef, value, onChange);
   const pickerDisabled = Boolean(disabled || readOnly);
   const draft = value !== void 0 && value !== null ? String(value) : "";
-  const canSubmit = Boolean(draft.trim()) && !sendDisabled && !disabled && !readOnly;
+  const canSubmit = (allowEmptySubmit || Boolean(draft.trim())) && !sendDisabled && !disabled && !readOnly;
   const handleSubmit = React7.useCallback(
     (event) => {
       event.preventDefault();
@@ -6169,13 +6182,14 @@ var MessageComposer = React7.forwardRef(function MessageComposer2({
     (event) => {
       onKeyDown?.(event);
       if (event.defaultPrevented) return;
+      if (!submitOnEnter) return;
       if (event.key !== "Enter" || event.shiftKey) return;
       if (event.nativeEvent.isComposing || event.keyCode === 229) return;
       event.preventDefault();
       if (!canSubmit) return;
       formRef.current?.requestSubmit();
     },
-    [canSubmit, onKeyDown]
+    [canSubmit, onKeyDown, submitOnEnter]
   );
   return /* @__PURE__ */ jsxs(
     "form",
@@ -6202,28 +6216,32 @@ var MessageComposer = React7.forwardRef(function MessageComposer2({
             ...props
           }
         ),
+        attachments ? /* @__PURE__ */ jsx("div", { className: "border-t px-2 py-2", children: attachments }) : null,
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-1.5 pb-1.5", children: [
-          /* @__PURE__ */ jsx(
-            EmojiPickerPopover,
-            {
-              locale,
-              onSelect: handleEmojiSelect,
-              disabled: pickerDisabled,
-              triggerLabel,
-              keepOpenOnSelect,
-              open,
-              onOpenChange,
-              side,
-              align,
-              labels,
-              recentLimit,
-              storageKey,
-              triggerClassName: cn(
-                "size-7 text-muted-foreground",
-                emojiTriggerClassName
-              )
-            }
-          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-0.5", children: [
+            /* @__PURE__ */ jsx(
+              EmojiPickerPopover,
+              {
+                locale,
+                onSelect: handleEmojiSelect,
+                disabled: pickerDisabled,
+                triggerLabel,
+                keepOpenOnSelect,
+                open,
+                onOpenChange,
+                side,
+                align,
+                labels,
+                recentLimit,
+                storageKey,
+                triggerClassName: cn(
+                  "size-7 text-muted-foreground",
+                  emojiTriggerClassName
+                )
+              }
+            ),
+            tools
+          ] }),
           /* @__PURE__ */ jsx(
             Button,
             {