@tipp/ui 2.2.7 → 2.2.9

package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-option.js

@@ -1,40 +1,37 @@
 import {
   review_question_satisfaction_option_default
-} from "../../../../../chunk-FTEN4BBE.js";
-import "../../../../../chunk-FBXX5W2A.js";
-import "../../../../../chunk-K5DDPZ2B.js";
+} from "../../../../../chunk-HO4N54UR.js";
+import "../../../../../chunk-3VHYJFLA.js";
+import "../../../../../chunk-JF7JAMOQ.js";
 import "../../../../../chunk-HBF6IIVZ.js";
-import "../../../../../chunk-2OMSNCRH.js";
-import "../../../../../chunk-74DX4CU7.js";
 import "../../../../../chunk-OYM4XCHQ.js";
 import "../../../../../chunk-YJ7ZFOYL.js";
 import "../../../../../chunk-5ZITU5L7.js";
 import "../../../../../chunk-5XYPLDI5.js";
 import "../../../../../chunk-6NPTJBFE.js";
 import "../../../../../chunk-EEKOTWBE.js";
-import "../../../../../chunk-FPD73OHW.js";
 import "../../../../../chunk-MUPK4L3U.js";
 import "../../../../../chunk-MUNMDHRF.js";
 import "../../../../../chunk-TVDKGMBI.js";
 import "../../../../../chunk-X2GMDZ7M.js";
 import "../../../../../chunk-5H3YPCZK.js";
 import "../../../../../chunk-FR2GDOU2.js";
-import "../../../../../chunk-DHZVOXFM.js";
+import "../../../../../chunk-74DX4CU7.js";
 import "../../../../../chunk-WV2HN6H4.js";
-import "../../../../../chunk-5MCLOY67.js";
+import "../../../../../chunk-AQEJ47YX.js";
 import "../../../../../chunk-5AVBYDPB.js";
 import "../../../../../chunk-365QMK4D.js";
 import "../../../../../chunk-YO3BQW6S.js";
 import "../../../../../chunk-6IVCARWS.js";
 import "../../../../../chunk-6DJOIRMF.js";
+import "../../../../../chunk-FPD73OHW.js";
 import "../../../../../chunk-EGEQY3KT.js";
 import "../../../../../chunk-O3T3TM3V.js";
 import "../../../../../chunk-XQOL7UBI.js";
 import "../../../../../chunk-TULWX7D6.js";
-import "../../../../../chunk-Q37G2GS6.js";
+import "../../../../../chunk-DHZVOXFM.js";
 import "../../../../../chunk-VTJZMOSP.js";
-import "../../../../../chunk-DIE6CIJQ.js";
-import "../../../../../chunk-BESTU2AY.js";
+import "../../../../../chunk-OC5IPHZQ.js";
 import "../../../../../chunk-RHHS5DZL.js";
 import "../../../../../chunk-645GPOW2.js";
 import "../../../../../chunk-HYITAA4J.js";
@@ -46,7 +43,6 @@ import "../../../../../chunk-Y4U24VXI.js";
 import "../../../../../chunk-3NUQAVE6.js";
 import "../../../../../chunk-2DZ2Y3JI.js";
 import "../../../../../chunk-VRJR534I.js";
-import "../../../../../chunk-ZD7MNMED.js";
 import "../../../../../chunk-B6XJN6EC.js";
 import "../../../../../chunk-RP2RGCAW.js";
 import "../../../../../chunk-MIMJ7LON.js";
@@ -54,35 +50,39 @@ import "../../../../../chunk-W7X7KSJP.js";
 import "../../../../../chunk-VYCYVN3L.js";
 import "../../../../../chunk-OHMOP5PV.js";
 import "../../../../../chunk-NFDQJVFA.js";
-import "../../../../../chunk-EAXUQEO5.js";
-import "../../../../../chunk-FU5BNFCO.js";
+import "../../../../../chunk-Q37G2GS6.js";
+import "../../../../../chunk-6SYFG6YY.js";
 import "../../../../../chunk-K36TPMKL.js";
 import "../../../../../chunk-U3BQT7ZO.js";
 import "../../../../../chunk-YGL6SWKN.js";
 import "../../../../../chunk-4Y5BEXVN.js";
 import "../../../../../chunk-QRI6ARS6.js";
 import "../../../../../chunk-25HMMI7R.js";
-import "../../../../../chunk-PMJIFLDT.js";
-import "../../../../../chunk-LDBWASUA.js";
 import "../../../../../chunk-TSXRCXC6.js";
 import "../../../../../chunk-LQY4RKWI.js";
+import "../../../../../chunk-ZD7MNMED.js";
 import "../../../../../chunk-V5XKNSCK.js";
 import "../../../../../chunk-WJ34ZHTU.js";
+import "../../../../../chunk-ZQE7SP6P.js";
+import "../../../../../chunk-R6ARPREO.js";
 import "../../../../../chunk-2O45FRFQ.js";
+import "../../../../../chunk-J2I3R3OV.js";
+import "../../../../../chunk-QO6KO6MN.js";
 import "../../../../../chunk-5KNRHIIF.js";
 import "../../../../../chunk-6JRAI4G5.js";
 import "../../../../../chunk-776WBOKL.js";
 import "../../../../../chunk-2FJ4LW7E.js";
-import "../../../../../chunk-ZQE7SP6P.js";
-import "../../../../../chunk-R6ARPREO.js";
 import "../../../../../chunk-YSYJCYHY.js";
 import "../../../../../chunk-5OM2H6RI.js";
 import "../../../../../chunk-ZUYCXCPW.js";
 import "../../../../../chunk-YVFNJE4E.js";
-import "../../../../../chunk-J2I3R3OV.js";
-import "../../../../../chunk-QO6KO6MN.js";
+import "../../../../../chunk-2OMSNCRH.js";
+import "../../../../../chunk-BESTU2AY.js";
+import "../../../../../chunk-PMJIFLDT.js";
+import "../../../../../chunk-LDBWASUA.js";
 import "../../../../../chunk-PT57HCAI.js";
 import "../../../../../chunk-J242TTFH.js";
+import "../../../../../chunk-EAXUQEO5.js";
 import "../../../../../chunk-CRTRMMJ7.js";
 export {
   review_question_satisfaction_option_default as default

package/dist/molecules/curriculumV2/CurriculumContents/CurriculumReviewSteps/ReviewQuestion/review-question-satisfaction-text.cjs

@@ -1348,66 +1348,117 @@ var Control2 = (0, import_react22.forwardRef)(
 Control2.displayName = "FORM_Control";
 
 // src/atoms/auto-sizing-input.tsx
+var import_themes51 = require("@radix-ui/themes");
 var import_react23 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
+var useTextWidth = (text, font) => {
+  const [textWidth, setTextWidth] = (0, import_react23.useState)(0);
+  (0, import_react23.useEffect)(() => {
+    if (!text) {
+      setTextWidth(0);
+      return;
+    }
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (!context) {
+      setTextWidth(0);
+      return;
+    }
+    context.font = font;
+    const width = Math.ceil(context.measureText(text).width);
+    setTextWidth(width);
+  }, [text, font]);
+  return textWidth;
+};
+var getFontString = (element) => {
+  if (!element) return "14px sans-serif";
+  if (typeof window === "undefined") return "14px sans-serif";
+  const computedStyle = window.getComputedStyle(element);
+  const fontSize = computedStyle.fontSize || "14px";
+  const fontFamily = computedStyle.fontFamily || "sans-serif";
+  const fontWeight = computedStyle.fontWeight || "normal";
+  const fontStyle = computedStyle.fontStyle || "normal";
+  return `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
+};
 var AutoSizingInput = (0, import_react23.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { value: _value, onChangeValue, onChange } = _b, rest = __objRest(_b, ["value", "onChangeValue", "onChange"]);
-    const [value, setValue] = (0, import_react23.useState)(_value);
-    const [width, setWidth] = (0, import_react23.useState)(0);
-    const span = (0, import_react23.useRef)(null);
+    var _b = _a, {
+      value: externalValue,
+      onChangeValue,
+      onChange,
+      maxWidth,
+      minWidth
+    } = _b, rest = __objRest(_b, [
+      "value",
+      "onChangeValue",
+      "onChange",
+      "maxWidth",
+      "minWidth"
+    ]);
+    const isControlled = externalValue !== void 0;
+    const [internalValue, setInternalValue] = (0, import_react23.useState)(externalValue || "");
+    const value = isControlled ? externalValue : internalValue;
     const defaultRef = (0, import_react23.useRef)(null);
     const inputRef = ref || defaultRef;
+    const [fontString, setFontString] = (0, import_react23.useState)("14px sans-serif");
+    const displayValue = (0, import_react23.useMemo)(
+      () => value || rest.placeholder || "",
+      [value, rest.placeholder]
+    );
+    const textWidth = useTextWidth(displayValue, fontString);
+    const dynamicWidth = (0, import_react23.useMemo)(
+      () => `${Math.max(textWidth + 16, 24)}px`,
+      [textWidth]
+    );
     (0, import_react23.useEffect)(() => {
-      span.current && setWidth(span.current.offsetWidth);
-    }, [value]);
-    const changeHandler = (0, import_react23.useCallback)(
+      if (!("current" in inputRef) || !inputRef.current) return;
+      const element = inputRef.current;
+      const updateFont = () => {
+        const font = getFontString(element);
+        setFontString(font);
+      };
+      updateFont();
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (mutation.type === "attributes" && (mutation.attributeName === "style" || mutation.attributeName === "class")) {
+            updateFont();
+          }
+        });
+      });
+      observer.observe(element, {
+        attributes: true,
+        attributeFilter: ["style", "class"]
+      });
+      return () => {
+        observer.disconnect();
+      };
+    }, [inputRef]);
+    const handleChange = (0, import_react23.useCallback)(
       (evt) => {
+        const newValue = evt.target.value;
         onChange == null ? void 0 : onChange(evt);
-        setValue(evt.target.value);
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onChangeValue == null ? void 0 : onChangeValue(newValue);
       },
-      [onChange]
+      [onChange, onChangeValue, isControlled]
     );
-    (0, import_react23.useEffect)(() => {
-      setValue(_value || "");
-    }, [_value]);
-    (0, import_react23.useEffect)(() => {
-      onChangeValue == null ? void 0 : onChangeValue(value || "");
-    }, [value, onChangeValue]);
     const onClick = (0, import_react23.useCallback)(() => {
       var _a2;
       if ("current" in inputRef) {
         (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
       }
     }, [inputRef]);
-    const onKeyDown = (0, import_react23.useCallback)(
-      (evt) => {
-        if (evt.key === "Enter") {
-          onClick();
-        }
-      },
-      [onClick]
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
-      "div",
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_themes51.Box,
       {
         className: "auto-sizing-input wrapper",
+        maxWidth,
+        minWidth,
         onClick,
-        onKeyDown,
-        role: "button",
-        style: { width: `${width + 24}px` },
-        tabIndex: 0,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": "true", ref: span, style: rest.style, children: value || rest.placeholder || "" }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            "input",
-            __spreadValues({
-              onChange: changeHandler,
-              ref: inputRef,
-              value
-            }, rest)
-          )
-        ]
+        style: { width: dynamicWidth },
+        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", __spreadValues({ onChange: handleChange, ref: inputRef, value }, rest))
       }
     );
   }