@discuss-ds/ui 0.2.0 → 0.3.0

package/dist/index.d.cts

@@ -338,6 +338,17 @@ interface InlineEditProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
     disabled?: boolean;
     /** Called when editing starts or ends. */
     onEditingChange?: (editing: boolean) => void;
+    /** Called on every keystroke while editing (and with the saved value when editing ends), e.g. for a live character counter. */
+    onDraftChange?: (value: string) => void;
+    /**
+     * `default` is a rounded field. A short single-line label shows the pencil and hugs its text; `multiline` (longer
+     * text) hides the pencil and fills the width. `question` is for question text: it fills the width with no pencil,
+     * has square corners and shows a bottom border on hover, focus and while `selected`. Enter saves; Shift+Enter adds a
+     * line break when `multiline`.
+     */
+    variant?: 'default' | 'question';
+    /** `question` variant: keeps the bottom border while the owning question is selected. */
+    selected?: boolean;
     /** Classes for the displayed/edited text, e.g. a heading text style. The field itself keeps the same box. */
     textClassName?: string;
 }

package/dist/index.d.ts

@@ -338,6 +338,17 @@ interface InlineEditProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
     disabled?: boolean;
     /** Called when editing starts or ends. */
     onEditingChange?: (editing: boolean) => void;
+    /** Called on every keystroke while editing (and with the saved value when editing ends), e.g. for a live character counter. */
+    onDraftChange?: (value: string) => void;
+    /**
+     * `default` is a rounded field. A short single-line label shows the pencil and hugs its text; `multiline` (longer
+     * text) hides the pencil and fills the width. `question` is for question text: it fills the width with no pencil,
+     * has square corners and shows a bottom border on hover, focus and while `selected`. Enter saves; Shift+Enter adds a
+     * line break when `multiline`.
+     */
+    variant?: 'default' | 'question';
+    /** `question` variant: keeps the bottom border while the owning question is selected. */
+    selected?: boolean;
     /** Classes for the displayed/edited text, e.g. a heading text style. The field itself keeps the same box. */
     textClassName?: string;
 }

package/dist/index.js

@@ -1378,6 +1378,9 @@ var InlineEdit = React24.forwardRef(
     maxLength,
     disabled,
     onEditingChange,
+    onDraftChange,
+    variant = "default",
+    selected,
     "aria-label": ariaLabel,
     ...props
   }, ref) => {
@@ -1413,26 +1416,32 @@ var InlineEdit = React24.forwardRef(
       }
       setEditing(false);
       onEditingChange?.(false);
+      onDraftChange?.(commit ? draft : value);
     };
     const textClasses = cn("text-ui-input-value text-surface-foreground", textClassName);
-    return /* @__PURE__ */ jsx25("div", { ref, className: cn("inline-flex min-w-0 max-w-full", className), ...props, children: editing ? React24.createElement(multiline ? "textarea" : "input", {
+    const question = variant === "question";
+    const fill = multiline || question;
+    return /* @__PURE__ */ jsx25("div", { ref, className: cn(fill ? "flex w-full min-w-0" : "inline-flex min-w-0 max-w-full", className), ...props, children: editing ? React24.createElement(multiline ? "textarea" : "input", {
       ref: fieldRef,
       value: draft,
       maxLength,
       "aria-label": ariaLabel,
       ...multiline ? { rows: 1 } : { type: "text" },
       className: cn(
-        "w-full rounded-md px-3 py-1 outline-none focus-visible:border-input-accent",
+        "w-full px-3 py-1 outline-none",
         multiline && "field-sizing-content resize-none",
-        fieldSurfaceClasses("default"),
+        question ? "rounded-none border-0 border-b-2 border-input-accent bg-transparent" : cn("rounded-md focus-visible:border-input-accent", fieldSurfaceClasses("default")),
         textClasses
       ),
-      onChange: (event) => setDraft(event.target.value),
+      onChange: (event) => {
+        setDraft(event.target.value);
+        onDraftChange?.(event.target.value);
+      },
       onKeyDown: (event) => {
         if (event.key === "Escape") {
           cancelled.current = true;
           finish(false, true);
-        } else if (event.key === "Enter" && (!multiline || event.metaKey || event.ctrlKey)) {
+        } else if (event.key === "Enter" && (!multiline || event.metaKey || event.ctrlKey || question && !event.shiftKey)) {
           event.preventDefault();
           finish(true, true);
         }
@@ -1449,13 +1458,16 @@ var InlineEdit = React24.forwardRef(
         "aria-label": `${ariaLabel}: ${value || placeholder}. Edit`,
         onClick: start,
         className: cn(
-          "group inline-flex min-w-0 max-w-full items-center gap-2 rounded-md border border-transparent px-3 py-1 text-left outline-none",
+          "group inline-flex min-w-0 max-w-full items-center gap-2 px-3 py-1 text-left outline-none",
+          fill && "w-full",
+          question ? cn("rounded-none border-b-2", selected ? "border-input-accent" : "border-transparent") : "rounded-md border border-transparent",
           "enabled:hover:bg-secondary enabled:focus-visible:border-input-accent disabled:cursor-not-allowed disabled:opacity-50",
+          question && "enabled:hover:border-input-accent",
           textClasses
         ),
         children: [
-          /* @__PURE__ */ jsx25("span", { className: cn("min-w-0 truncate", multiline && "whitespace-pre-wrap", !value && "text-muted-foreground"), children: value || placeholder }),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx25("span", { className: cn("min-w-0", multiline ? "whitespace-pre-wrap" : "truncate", fill && "flex-1", !value && "text-muted-foreground"), children: value || placeholder }),
+          !fill && /* @__PURE__ */ jsx25(
             PencilSimple,
             {
               size: 16,
@@ -2489,10 +2501,12 @@ import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
 var eyebrow = "text-ui-caption uppercase text-secondary-muted-foreground";
 var QuestionHeader = React40.forwardRef(
   ({ className, number, title, required, error, onDismissError, editor, onTitleChange, actions, maxLength = 2e3, active, showCounter = true, ...props }, ref) => {
+    const [draft, setDraft] = React40.useState(null);
     const label = String(number).padStart(2, "0");
     const showError = error !== void 0 && error !== false;
     if (editor) {
       const text = typeof title === "string" ? title : "";
+      const count = (draft ?? text).length;
       return /* @__PURE__ */ jsxs28("div", { ref, className: cn("group/header flex w-full flex-col gap-2", className), ...props, children: [
         /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs28(
@@ -2512,18 +2526,26 @@ var QuestionHeader = React40.forwardRef(
           actions && /* @__PURE__ */ jsx41("div", { className: "flex items-center gap-2 opacity-0 transition-opacity group-focus-within/header:opacity-100 group-hover/header:opacity-100", children: actions })
         ] }),
         /* @__PURE__ */ jsx41(
-          "textarea",
+          InlineEdit,
           {
-            rows: 1,
+            variant: "question",
+            multiline: true,
+            selected: active,
+            className: "-mx-3 w-auto",
             "aria-label": "Question title",
+            placeholder: "Click to write the question text",
             value: text,
             maxLength,
-            onChange: (event) => onTitleChange?.(event.target.value),
-            className: "field-sizing-content w-full resize-none bg-transparent text-heading-h4 text-surface-foreground outline-none"
+            onValueChange: onTitleChange,
+            onDraftChange: setDraft,
+            onEditingChange: (editing) => {
+              if (!editing) setDraft(null);
+            },
+            textClassName: "text-heading-h4"
           }
         ),
         showCounter && /* @__PURE__ */ jsxs28("p", { className: "text-ui-caption text-secondary-muted-foreground", children: [
-          text.length,
+          count,
           "/",
           maxLength,
           " characters"