@sesionario/blocks 1.20.0 → 1.21.0

package/README.md

@@ -6,6 +6,81 @@ This package is the Sesionario-specific successor to `@algenium/blocks`. It ship
 
 Shared feedback patterns include `ConfirmDestructiveDialog` (confirm before delete/mute and similar irreversible actions).
 
+### Read-first editable sections (`EditableSection`, `DataList`, `FieldMessage`)
+
+Settings and profile data should be readable by default, then turn into a real `<form>` when the person chooses Edit. The primitives are chrome-free — no Card, border, or title — so you place actions in your own layout (`CardAction`, page header, dialog, or a bare section).
+
+```tsx
+import {
+	EditableSection,
+	DataList,
+	DataListItem,
+	FieldMessage,
+} from "@sesionario/blocks";
+
+<EditableSection
+	labelledBy="fiscal-title"
+	isDirty={dirty}
+	onDiscard={() => reset()}
+	onSave={async () => {
+		/* throw on validation/API failure so edit mode stays open */
+		await save();
+	}}
+	labels={{
+		edit: t("edit"),
+		save: t("save"),
+		saving: t("saving"),
+		cancel: t("cancel"),
+		saved: t("saved"),
+	}}
+	readView={() => (
+		<DataList>
+			<DataListItem label="RFC">{rfc}</DataListItem>
+		</DataList>
+	)}
+	editView={() => (
+		<div className="flex flex-col gap-1.5">
+			<label htmlFor="rfc">RFC</label>
+			<input id="rfc" value={rfc} onChange={...} aria-invalid={!!error} aria-describedby="rfc-err" />
+			<FieldMessage id="rfc-err">{error}</FieldMessage>
+		</div>
+	)}
+>
+	{({ actions, content, status }) => (
+		<Card>
+			<CardHeader>
+				<CardTitle id="fiscal-title">Datos fiscales</CardTitle>
+				<CardAction>{actions}</CardAction>
+			</CardHeader>
+			<CardContent>
+				{content}
+				{status}
+			</CardContent>
+		</Card>
+	)}
+</EditableSection>
+```
+
+Headless alternative: `useEditableSection` for card-less surfaces (dialogs, table rows, page headers).
+
+Optional progressive-enhancement CSS for a smoother height change (Chromium 129+; no-op elsewhere). Honor reduced motion:
+
+```css
+@supports (interpolate-size: allow-keywords) {
+	.sesionario-editable-section-content {
+		interpolate-size: allow-keywords;
+		transition: min-height 200ms ease;
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.sesionario-editable-section-content {
+		transition: none;
+	}
+}
+```
+
+Pass `stableHeight` for small (1–2 field) sections if you want later toggles to keep a cached `min-height`.
+
 ## Install
 
 ```bash

package/dist/index.cjs

@@ -456,6 +456,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] = React7.useState("reading");
+  const [status, setStatus] = React7.useState(null);
+  const [confirmOpen, setConfirmOpen] = React7.useState(false);
+  const [minHeightPx, setMinHeightPx] = React7.useState(void 0);
+  const contentRef = React7.useRef(null);
+  const editButtonRef = React7.useRef(null);
+  const measuredHeightRef = React7.useRef(0);
+  const shouldFocusEditRef = React7.useRef(false);
+  const shouldFocusFirstFieldRef = React7.useRef(false);
+  const editButtonId = React7.useId();
+  const contentFormId = React7.useId();
+  const isEditing = mode === "editing" || mode === "saving";
+  const isSaving = mode === "saving";
+  React7.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 = React7.useCallback(() => {
+    setConfirmOpen(false);
+    shouldFocusEditRef.current = true;
+    setMode("reading");
+    onDiscard?.();
+  }, [onDiscard]);
+  const startEdit = React7.useCallback(() => {
+    setStatus(null);
+    shouldFocusFirstFieldRef.current = true;
+    setMode("editing");
+  }, []);
+  const requestCancel = React7.useCallback(() => {
+    if (isSaving) return;
+    if (isDirty) {
+      setConfirmOpen(true);
+      return;
+    }
+    exitToReading();
+  }, [exitToReading, isDirty, isSaving]);
+  const handleSubmit = React7.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 = React7.useCallback(
+    (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      requestCancel();
+    },
+    [requestCancel]
+  );
+  React7.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__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", ...editButtonProps, children: resolvedLabels.edit }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "sm", ...cancelButtonProps, children: resolvedLabels.cancel }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        size: "sm",
+        type: "submit",
+        form: contentFormId,
+        disabled: saveButtonProps.disabled,
+        children: isSaving ? resolvedLabels.saving : resolvedLabels.save
+      }
+    )
+  ] });
+  const actions = /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "editable-section-actions", className: actionsClassName, children: actionButtons });
+  const content = isEditing ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: contentRef,
+      "data-slot": "editable-section-content",
+      className: "sesionario-editable-section-content",
+      style: contentStyle,
+      children: readView()
+    }
+  );
+  const statusNode = /* @__PURE__ */ jsxRuntime.jsx("span", { ...statusProps, "data-slot": "editable-section-status", children: status });
+  const dialog = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      children({
+        actions,
+        content,
+        status: statusNode,
+        mode,
+        isSaving,
+        isEditing
+      }),
+      dialog
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "editable-section", className: cn("space-y-4", className), children: [
+    actions,
+    content,
+    statusNode,
+    dialog
+  ] });
+}
+function DataList({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "data-list-item",
+      className: cn("flex flex-col gap-1.5", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "dt",
+          {
+            className: cn(
+              "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+              labelClassName
+            ),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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,
@@ -8340,8 +8682,12 @@ exports.BubbleGroup = BubbleGroup;
 exports.BubbleReactions = BubbleReactions;
 exports.ChatMessageList = ChatMessageList;
 exports.ConfirmDestructiveDialog = ConfirmDestructiveDialog;
+exports.DEFAULT_EDITABLE_SECTION_LABELS = DEFAULT_EDITABLE_SECTION_LABELS;
+exports.DataList = DataList;
+exports.DataListItem = DataListItem;
 exports.DropdownMenuItem = DropdownMenuItem;
 exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.EditableSection = EditableSection;
 exports.EmojiInput = EmojiInput;
 exports.EmojiPicker = EmojiPicker;
 exports.EmojiPickerPopover = EmojiPickerPopover;
@@ -8356,6 +8702,7 @@ exports.EmptyTitle = EmptyTitle;
 exports.ErrorState = ErrorState;
 exports.ExpandableText = ExpandableText;
 exports.FeedVideoPlayer = FeedVideoPlayer;
+exports.FieldMessage = FieldMessage;
 exports.ImageLightbox = ImageLightbox;
 exports.LanguageContext = LanguageContext;
 exports.LanguageSwitcher = LanguageSwitcher;
@@ -8414,6 +8761,7 @@ exports.paymentTypeFromStripeBrand = paymentTypeFromStripeBrand;
 exports.shouldRetryLiveEdge404 = shouldRetryLiveEdge404;
 exports.useDebouncedValue = useDebouncedValue;
 exports.useDebouncedValueStrict = useDebouncedValueStrict;
+exports.useEditableSection = useEditableSection;
 exports.useFeedExclusivePlayback = useFeedExclusivePlayback;
 exports.useHlsPlayback = useHlsPlayback;
 exports.useLanguageContext = useLanguageContext;