@helpwave/hightide 0.0.16 → 0.0.18

package/dist/index.js

@@ -120,6 +120,7 @@ __export(index_exports, {
   TimeDisplay: () => TimeDisplay,
   TimePicker: () => TimePicker,
   ToggleableInput: () => ToggleableInput,
+  ToggleableInputUncontrolled: () => ToggleableInputUncontrolled,
   Tooltip: () => Tooltip,
   UncontrolledCheckbox: () => UncontrolledCheckbox,
   UncontrolledInput: () => UncontrolledInput,
@@ -167,8 +168,10 @@ __export(index_exports, {
   updatePagination: () => updatePagination,
   useHoverState: () => useHoverState,
   useLanguage: () => useLanguage,
+  useLocalStorage: () => useLocalStorage,
   useLocale: () => useLocale,
   useOutsideClick: () => useOutsideClick,
+  useSaveDelay: () => useSaveDelay,
   useTheme: () => useTheme,
   useTranslation: () => useTranslation,
   validateEmail: () => validateEmail,
@@ -657,7 +660,6 @@ var useLocalStorage = (key, initValue) => {
   }, []);
   return [storedValue, setValue];
 };
-var useLocalStorage_default = useLocalStorage;
 
 // src/hooks/useLanguage.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -679,7 +681,7 @@ var useLocale = (overWriteLanguage) => {
 };
 var ProvideLanguage = ({ initialLanguage, children }) => {
   const [language, setLanguage] = (0, import_react2.useState)(initialLanguage ?? DEFAULT_LANGUAGE);
-  const [storedLanguage, setStoredLanguage] = useLocalStorage_default("language", initialLanguage ?? DEFAULT_LANGUAGE);
+  const [storedLanguage, setStoredLanguage] = useLocalStorage("language", initialLanguage ?? DEFAULT_LANGUAGE);
   (0, import_react2.useEffect)(() => {
     if (language !== initialLanguage && initialLanguage) {
       console.warn("LanguageProvider initial state changed: Prefer using useLanguages's setLanguage instead");
@@ -1768,7 +1770,6 @@ function useSaveDelay(setNotificationStatus, delay) {
   }, []);
   return { restartTimer, clearUpdateTimer };
 }
-var useSaveDelay_default = useSaveDelay;
 
 // src/components/user-input/Label.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -1805,7 +1806,7 @@ var ControlledInput = ({
   const {
     restartTimer,
     clearUpdateTimer
-  } = useSaveDelay_default(() => void 0, 3e3);
+  } = useSaveDelay(() => void 0, 3e3);
   const ref = (0, import_react9.useRef)(null);
   (0, import_react9.useEffect)(() => {
     if (restProps.autoFocus) {
@@ -5014,7 +5015,7 @@ var Textarea = ({
   ...props
 }) => {
   const [hasFocus, setHasFocus] = (0, import_react27.useState)(false);
-  const { restartTimer, clearUpdateTimer } = useSaveDelay_default(() => void 0, 3e3);
+  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => void 0, 3e3);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
     clearUpdateTimer();
@@ -5422,24 +5423,30 @@ var import_lucide_react25 = require("lucide-react");
 var import_clsx45 = __toESM(require("clsx"));
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var ToggleableInput = ({
-  id,
   type = "text",
   value,
   onChange = noop,
+  onChangeText = noop,
+  onEditCompleted = noop,
   labelClassName = "",
   initialState = "display",
   size = 20,
   disclaimer,
   onBlur,
-  onEditCompleted = noop,
   ...restProps
 }) => {
   const [isEditing, setIsEditing] = (0, import_react29.useState)(initialState !== "display");
-  const { restartTimer, clearUpdateTimer } = useSaveDelay_default(() => void 0, 3e3);
+  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => void 0, 3e3);
+  const ref = (0, import_react29.useRef)(null);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
     clearUpdateTimer();
   };
+  (0, import_react29.useEffect)(() => {
+    if (isEditing) {
+      ref.current?.focus();
+    }
+  }, [isEditing]);
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       "div",
@@ -5450,17 +5457,17 @@ var ToggleableInput = ({
           /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: (0, import_clsx45.default)("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             "input",
             {
-              autoFocus: true,
+              ref,
               ...restProps,
               value,
               type,
-              id,
               onChange: (event) => {
                 const value2 = event.target.value;
                 restartTimer(() => {
                   onEditCompletedWrapper(value2);
                 });
-                onChange(value2);
+                onChangeText(value2);
+                onChange(event);
               },
               onBlur: (event) => {
                 if (onBlur) {
@@ -5475,7 +5482,7 @@ var ToggleableInput = ({
                   onEditCompletedWrapper(value);
                 }
               },
-              className: (0, import_clsx45.default)(labelClassName, `w-full border-none rounded-none focus:ring-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {
+              className: (0, import_clsx45.default)(labelClassName, `w-full border-none rounded-none ring-0 outline-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {
                 underline: isEditing
               }),
               onFocus: (event) => event.target.select()
@@ -5487,13 +5494,41 @@ var ToggleableInput = ({
               children: value
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react25.Pencil, { className: (0, import_clsx45.default)(`min-w-[${size}px] cursor-pointer`, { "text-transparent": isEditing }), size })
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            import_lucide_react25.Pencil,
+            {
+              className: (0, import_clsx45.default)(`cursor-pointer`, { "text-transparent": isEditing }),
+              size,
+              style: { minWidth: `${size}px` }
+            }
+          )
         ]
       }
     ),
     isEditing && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("label", { className: "text-negative", children: disclaimer })
   ] });
 };
+var ToggleableInputUncontrolled = ({
+  value: initialValue,
+  onChangeText = noop,
+  ...restProps
+}) => {
+  const [value, setValue] = (0, import_react29.useState)(initialValue);
+  (0, import_react29.useEffect)(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    ToggleableInput,
+    {
+      value,
+      onChangeText: (text) => {
+        setValue(text);
+        onChangeText(text);
+      },
+      ...restProps
+    }
+  );
+};
 
 // src/hooks/useTheme.tsx
 var import_react30 = require("react");
@@ -5659,6 +5694,7 @@ var filterNews = (localizedNews, requiredKeys) => {
   TimeDisplay,
   TimePicker,
   ToggleableInput,
+  ToggleableInputUncontrolled,
   Tooltip,
   UncontrolledCheckbox,
   UncontrolledInput,
@@ -5706,8 +5742,10 @@ var filterNews = (localizedNews, requiredKeys) => {
   updatePagination,
   useHoverState,
   useLanguage,
+  useLocalStorage,
   useLocale,
   useOutsideClick,
+  useSaveDelay,
   useTheme,
   useTranslation,
   validateEmail,