@discuss-ds/ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @discuss-ds/ui
 
+## 0.3.0
+
+### Minor Changes
+
+- [#9](https://github.com/TamyresLucas/Discuss-UI-Storybook/pull/9) [`db43142`](https://github.com/TamyresLucas/Discuss-UI-Storybook/commit/db4314275efe9be5428b446ea3f170b1ab5d3829) Thanks [@TamyresLucas](https://github.com/TamyresLucas)! - `InlineEdit` gets a second style for question text and clearer rules for long text. A short single-line label keeps the pencil and hugs its text; `multiline` (longer text) now hides the pencil and fills the full width. New `variant="question"`: full width, no pencil, square corners, and a bottom border on hover and focus. New `selected` keeps that bottom border while the owning question is selected. In the question variant Enter saves and Shift+Enter adds a line break. New `onDraftChange` reports the text on every keystroke.
+  
+  `QuestionHeader` (and so `QuestionEditorCard`) editor mode now edits the title with the question-variant `InlineEdit`: click the title to edit, Enter or blur saves, and the underline stays while the card is `active`. `onTitleChange` now fires when an edit is saved instead of on every keystroke; the character counter still updates live.
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -1531,6 +1531,9 @@ var InlineEdit = React24.forwardRef(
     maxLength,
     disabled,
     onEditingChange,
+    onDraftChange,
+    variant = "default",
+    selected,
     "aria-label": ariaLabel,
     ...props
   }, ref) => {
@@ -1566,26 +1569,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__ */ (0, import_jsx_runtime25.jsx)("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__ */ (0, import_jsx_runtime25.jsx)("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);
         }
@@ -1602,13 +1611,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__ */ (0, import_jsx_runtime25.jsx)("span", { className: cn("min-w-0 truncate", multiline && "whitespace-pre-wrap", !value && "text-muted-foreground"), children: value || placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: cn("min-w-0", multiline ? "whitespace-pre-wrap" : "truncate", fill && "flex-1", !value && "text-muted-foreground"), children: value || placeholder }),
+          !fill && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             import_react11.PencilSimple,
             {
               size: 16,
@@ -2635,10 +2647,12 @@ var import_jsx_runtime41 = require("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__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: cn("group/header flex w-full flex-col gap-2", className), ...props, children: [
         /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
@@ -2658,18 +2672,26 @@ var QuestionHeader = React40.forwardRef(
           actions && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("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__ */ (0, import_jsx_runtime41.jsx)(
-          "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__ */ (0, import_jsx_runtime41.jsxs)("p", { className: "text-ui-caption text-secondary-muted-foreground", children: [
-          text.length,
+          count,
           "/",
           maxLength,
           " characters"