@sesionario/blocks 1.20.0 → 1.21.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React7 from 'react';
-import { createContext, useContext, useState, useRef, useEffect, useLayoutEffect, useCallback, useMemo, useId } from 'react';
+import { createContext, useContext, useState, useRef, useId, useEffect, useCallback, useLayoutEffect, useMemo } from 'react';
 import { ChevronsUpDown, CheckIcon, Smile, SearchIcon, Search, Clock, Flag, Hash, Lightbulb, Trophy, Plane, Apple, Leaf, Hand, Loader2, AlertTriangle, Inbox, X, ChevronLeft, ChevronRight, Monitor, Sun, Moon, Building2, Check, Plus, Languages, BadgeCheck, Settings, User, Activity, LogOut, LogIn, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, Pencil, Play, AlertCircle, VolumeX, Pause, Volume1, Volume2, PictureInPicture2, Minimize, Maximize, ArrowDownIcon, MessageCircleDashedIcon, MessageCircle, ChevronUp, ChevronDown, XIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -425,6 +425,348 @@ function ConfirmDestructiveDialog({
     ] })
   ] }) });
 }
+
+// src/components/editable/types.ts
+var DEFAULT_EDITABLE_SECTION_LABELS = {
+  edit: "Editar",
+  save: "Guardar",
+  saving: "Guardando\u2026",
+  cancel: "Cancelar",
+  saved: "Guardado",
+  discardTitle: "\xBFDescartar cambios?",
+  discardDescription: "Si sales ahora, se perder\xE1n los cambios que no hayas guardado.",
+  discardConfirm: "Descartar",
+  discardCancel: "Seguir editando"
+};
+
+// src/components/editable/useEditableSection.ts
+function focusFirstField(container) {
+  if (!container) return;
+  const target = container.querySelector(
+    "[data-autofocus], input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable='true']"
+  );
+  target?.focus();
+}
+function useEditableSection({
+  onSave,
+  onDiscard,
+  isDirty = false,
+  labelledBy,
+  title,
+  labels,
+  stableHeight = false
+}) {
+  const resolvedLabels = {
+    ...DEFAULT_EDITABLE_SECTION_LABELS,
+    ...labels
+  };
+  const [mode, setMode] = useState("reading");
+  const [status, setStatus] = useState(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [minHeightPx, setMinHeightPx] = useState(void 0);
+  const contentRef = useRef(null);
+  const editButtonRef = useRef(null);
+  const measuredHeightRef = useRef(0);
+  const shouldFocusEditRef = useRef(false);
+  const shouldFocusFirstFieldRef = useRef(false);
+  const editButtonId = useId();
+  const contentFormId = useId();
+  const isEditing = mode === "editing" || mode === "saving";
+  const isSaving = mode === "saving";
+  useEffect(() => {
+    if (mode === "reading" && shouldFocusEditRef.current) {
+      shouldFocusEditRef.current = false;
+      editButtonRef.current?.focus();
+      return;
+    }
+    if (mode === "editing" && shouldFocusFirstFieldRef.current) {
+      shouldFocusFirstFieldRef.current = false;
+      const invalid = contentRef.current?.querySelector(
+        "[aria-invalid='true']"
+      );
+      if (invalid) {
+        invalid.focus();
+        return;
+      }
+      focusFirstField(contentRef.current);
+    }
+  }, [mode]);
+  const exitToReading = useCallback(() => {
+    setConfirmOpen(false);
+    shouldFocusEditRef.current = true;
+    setMode("reading");
+    onDiscard?.();
+  }, [onDiscard]);
+  const startEdit = useCallback(() => {
+    setStatus(null);
+    shouldFocusFirstFieldRef.current = true;
+    setMode("editing");
+  }, []);
+  const requestCancel = useCallback(() => {
+    if (isSaving) return;
+    if (isDirty) {
+      setConfirmOpen(true);
+      return;
+    }
+    exitToReading();
+  }, [exitToReading, isDirty, isSaving]);
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      if (isSaving) return;
+      void (async () => {
+        setMode("saving");
+        setStatus(null);
+        try {
+          await onSave();
+          setStatus(resolvedLabels.saved);
+          shouldFocusEditRef.current = true;
+          setMode("reading");
+        } catch {
+          shouldFocusFirstFieldRef.current = true;
+          setMode("editing");
+        }
+      })();
+    },
+    [isSaving, onSave, resolvedLabels.saved]
+  );
+  const handleFormKeyDown = useCallback(
+    (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      requestCancel();
+    },
+    [requestCancel]
+  );
+  useEffect(() => {
+    if (!stableHeight || !isEditing) return;
+    const el = contentRef.current;
+    if (!el) return;
+    const measure = () => {
+      const height = el.getBoundingClientRect().height;
+      if (height > measuredHeightRef.current) {
+        measuredHeightRef.current = height;
+        setMinHeightPx(height);
+      }
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [isEditing, stableHeight]);
+  const editButtonNameProps = labelledBy != null ? { "aria-labelledby": `${labelledBy} ${editButtonId}` } : title != null && title.length > 0 ? { "aria-label": `${resolvedLabels.edit} ${title}` } : { "aria-label": resolvedLabels.edit };
+  return {
+    mode,
+    isEditing,
+    isSaving,
+    startEdit,
+    requestCancel,
+    formProps: {
+      onSubmit: handleSubmit,
+      onKeyDown: handleFormKeyDown,
+      noValidate: true
+    },
+    contentRef,
+    editButtonRef,
+    contentFormId,
+    editButtonProps: {
+      type: "button",
+      id: editButtonId,
+      onClick: startEdit,
+      ref: editButtonRef,
+      ...editButtonNameProps
+    },
+    saveButtonProps: {
+      type: "submit",
+      disabled: isSaving
+    },
+    cancelButtonProps: {
+      type: "button",
+      onClick: requestCancel,
+      disabled: isSaving
+    },
+    status,
+    statusProps: {
+      role: "status",
+      "aria-live": "polite",
+      className: "sr-only"
+    },
+    confirmDiscard: {
+      open: confirmOpen,
+      onOpenChange: setConfirmOpen,
+      title: resolvedLabels.discardTitle,
+      description: resolvedLabels.discardDescription,
+      confirmLabel: resolvedLabels.discardConfirm,
+      cancelLabel: resolvedLabels.discardCancel,
+      onConfirm: exitToReading
+    },
+    resolvedLabels,
+    contentStyle: stableHeight && minHeightPx != null ? { minHeight: minHeightPx } : void 0,
+    actionsClassName: "flex min-h-9 min-w-[11rem] flex-wrap items-center justify-end gap-2"
+  };
+}
+function EditableSection({
+  readView,
+  editView,
+  children,
+  className,
+  ...options
+}) {
+  const section = useEditableSection(options);
+  const {
+    isEditing,
+    isSaving,
+    formProps,
+    contentRef,
+    contentFormId,
+    editButtonProps,
+    saveButtonProps,
+    cancelButtonProps,
+    status,
+    statusProps,
+    confirmDiscard,
+    resolvedLabels,
+    contentStyle,
+    actionsClassName,
+    mode
+  } = section;
+  const actionButtons = !isEditing ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", ...editButtonProps, children: resolvedLabels.edit }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", ...cancelButtonProps, children: resolvedLabels.cancel }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        type: "submit",
+        form: contentFormId,
+        disabled: saveButtonProps.disabled,
+        children: isSaving ? resolvedLabels.saving : resolvedLabels.save
+      }
+    )
+  ] });
+  const actions = /* @__PURE__ */ jsx("div", { "data-slot": "editable-section-actions", className: actionsClassName, children: actionButtons });
+  const content = isEditing ? /* @__PURE__ */ jsx(
+    "form",
+    {
+      id: contentFormId,
+      ref: contentRef,
+      "data-slot": "editable-section-content",
+      className: cn("sesionario-editable-section-content space-y-4"),
+      style: contentStyle,
+      ...formProps,
+      children: editView()
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: contentRef,
+      "data-slot": "editable-section-content",
+      className: "sesionario-editable-section-content",
+      style: contentStyle,
+      children: readView()
+    }
+  );
+  const statusNode = /* @__PURE__ */ jsx("span", { ...statusProps, "data-slot": "editable-section-status", children: status });
+  const dialog = /* @__PURE__ */ jsx(
+    ConfirmDestructiveDialog,
+    {
+      open: confirmDiscard.open,
+      onOpenChange: confirmDiscard.onOpenChange,
+      title: confirmDiscard.title,
+      description: confirmDiscard.description,
+      confirmLabel: confirmDiscard.confirmLabel,
+      cancelLabel: confirmDiscard.cancelLabel,
+      onConfirm: confirmDiscard.onConfirm
+    }
+  );
+  if (children) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      children({
+        actions,
+        content,
+        status: statusNode,
+        mode,
+        isSaving,
+        isEditing
+      }),
+      dialog
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editable-section", className: cn("space-y-4", className), children: [
+    actions,
+    content,
+    statusNode,
+    dialog
+  ] });
+}
+function DataList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "data-slot": "data-list",
+      className: cn("grid gap-4 sm:grid-cols-2", className),
+      ...props
+    }
+  );
+}
+function DataListItem({
+  label,
+  children,
+  empty = "\u2014",
+  className,
+  labelClassName,
+  valueClassName
+}) {
+  const isEmpty = children == null || children === false || typeof children === "string" && children.trim().length === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "data-list-item",
+      className: cn("flex flex-col gap-1.5", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "dt",
+          {
+            className: cn(
+              "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+              labelClassName
+            ),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            className: cn(
+              "text-sm wrap-break-word",
+              isEmpty && "text-muted-foreground",
+              valueClassName
+            ),
+            children: isEmpty ? empty : children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldMessage({
+  id,
+  children,
+  className,
+  ...props
+}) {
+  const hasMessage = children != null && children !== false && !(typeof children === "string" && children.trim().length === 0);
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      id,
+      role: hasMessage ? "alert" : void 0,
+      "data-slot": "field-message",
+      className: cn("min-h-5 text-xs text-destructive", className),
+      ...props,
+      children: hasMessage ? children : "\xA0"
+    }
+  );
+}
 var COLLAPSED_MAX_HEIGHT_REM = 11;
 function ExpandableText({
   children,
@@ -8289,6 +8631,6 @@ function useRealtimeChannel({
   }, [enabled, reconnectDelayMs]);
 }
 
-export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, DropdownMenuItem, DropdownMenuSeparator, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, FeedVideoPlayer, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT, PaymentIcon, PhoneInput, PlatformAccountMenu, PlatformNavbar, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, formatPaymentCardBrand, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, normalizePaymentCardBrand, paymentIconBrandFromStripe, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, DEFAULT_EDITABLE_SECTION_LABELS, DataList, DataListItem, DropdownMenuItem, DropdownMenuSeparator, EditableSection, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, FeedVideoPlayer, FieldMessage, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT, PaymentIcon, PhoneInput, PlatformAccountMenu, PlatformNavbar, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, formatPaymentCardBrand, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, normalizePaymentCardBrand, paymentIconBrandFromStripe, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useEditableSection, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map