@helpwave/hightide 0.0.17 → 0.0.19

package/dist/components/user-input/ToggleableInput.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/user-input/ToggleableInput.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts"],"sourcesContent":["import { useState } from 'react'\nimport type { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'\nimport { Pencil } from 'lucide-react'\nimport clsx from 'clsx'\nimport { useSaveDelay } from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\n\ntype InputProps = {\n  /**\n   * used for the label's `for` attribute\n   */\n  id: string,\n  value: string,\n  /**\n   * @default 'text'\n   */\n  type?: HTMLInputTypeAttribute,\n  /**\n   * Callback for when the input's value changes\n   * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n   * That could be enforced through a union type but that seems a bit overkill\n   * @default noop\n   */\n  onChange?: (text: string) => void,\n  labelClassName?: string,\n  initialState?: 'editing' | 'display',\n  size?: number,\n  disclaimer?: string,\n  onEditCompleted?: (text: string) => void,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'value' | 'label' | 'type' | 'onChange' | 'crossOrigin'>\n\n/**\n * A Text input component for inputting text. It changes appearance upon entering the edit mode and switches\n * back to display mode on loss of focus or on enter\n *\n * The State is managed by the parent\n */\nexport const ToggleableInput = ({\n  id,\n  type = 'text',\n  value,\n  onChange = noop,\n  labelClassName = '',\n  initialState = 'display',\n  size = 20,\n  disclaimer,\n  onBlur,\n  onEditCompleted = noop,\n  ...restProps\n}: InputProps) => {\n  const [isEditing, setIsEditing] = useState(initialState !== 'display')\n  const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000)\n\n  const onEditCompletedWrapper = (text: string) => {\n    onEditCompleted(text)\n    clearUpdateTimer()\n  }\n\n  return (\n    <div>\n      <div\n        className=\"row items-center w-full gap-x-2 overflow-hidden\"\n        onClick={() => !isEditing ? setIsEditing(!isEditing) : undefined}\n      >\n        <div className={clsx('row overflow-hidden', { 'flex-1': isEditing })}>\n          {isEditing ? (\n            <input\n              autoFocus\n              {...restProps}\n              value={value}\n              type={type}\n              id={id}\n              onChange={event => {\n                const value = event.target.value\n                restartTimer(() => {\n                  onEditCompletedWrapper(value)\n                })\n                onChange(value)\n              }}\n              onBlur={(event) => {\n                if (onBlur) {\n                  onBlur(event)\n                }\n                onEditCompletedWrapper(value)\n                setIsEditing(false)\n              }}\n              onKeyDown={event => {\n                if (event.key === 'Enter') {\n                  setIsEditing(false)\n                  onEditCompletedWrapper(value)\n                }\n              }}\n              className={clsx(labelClassName, `w-full border-none rounded-none focus:ring-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {\n                underline: isEditing\n              })}\n              onFocus={event => event.target.select()}\n            />\n          ) : (\n            <span\n              className={clsx(labelClassName, 'max-w-xs break-words overflow-hidden')}\n            >\n        {value}\n        </span>\n          )}\n        </div>\n        <Pencil className={clsx(`min-w-[${size}px] cursor-pointer`, { 'text-transparent': isEditing })} size={size} />\n      </div>\n      {(isEditing && disclaimer) && (\n        <label className=\"text-negative\">\n          {disclaimer}\n        </label>\n      )}\n    </div>\n  )\n}\n","import { useEffect, useState } from 'react'\n\nexport function useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n  const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n  const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n\n  const restartTimer = (onSave: () => void) => {\n    clearTimeout(updateTimer)\n    setUpdateTimer(setTimeout(() => {\n      onSave()\n      setNotificationStatus(true)\n      // Show Saved Notification for fade animation duration\n      clearTimeout(notificationTimer)\n      setNotificationTimer(setTimeout(() => {\n        setNotificationStatus(false)\n        clearTimeout(notificationTimer)\n      }, delay))\n      clearTimeout(updateTimer)\n    }, delay))\n  }\n\n  const clearUpdateTimer = (hasSaved = true) => {\n    clearTimeout(updateTimer)\n    if (hasSaved) {\n      setNotificationStatus(true)\n      clearTimeout(notificationTimer)\n      setNotificationTimer(setTimeout(() => {\n        setNotificationStatus(false)\n        clearTimeout(notificationTimer)\n      }, delay))\n    } else {\n      setNotificationStatus(false)\n    }\n  }\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(updateTimer)\n      clearTimeout(notificationTimer)\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { restartTimer, clearUpdateTimer }\n}","export const noop = () => undefined\n"],"mappings":"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","names":["useState","useState","value"]}
+{"version":3,"sources":["../../../src/components/user-input/ToggleableInput.tsx","../../../src/hooks/useSaveDelay.ts","../../../src/util/noop.ts"],"sourcesContent":["import type { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport { Pencil } from 'lucide-react'\nimport clsx from 'clsx'\nimport { useSaveDelay } from '../../hooks/useSaveDelay'\nimport { noop } from '../../util/noop'\n\ntype InputProps = {\n    /**\n     * The value\n     */\n    value: string,\n    /**\n     * @default 'text'\n     */\n    type?: HTMLInputTypeAttribute,\n    /**\n     * Callback for when the input's value changes\n     * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled\n     * That could be enforced through a union type but that seems a bit overkill\n     * @default noop\n     */\n    onChangeText?: (text: string) => void,\n    onEditCompleted?: (text: string) => void,\n    labelClassName?: string,\n    initialState?: 'editing' | 'display',\n    size?: number,\n    disclaimer?: string,\n} & Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'label' | 'type' | 'crossOrigin'>\n\n/**\n * A Text input component for inputting text. It changes appearance upon entering the edit mode and switches\n * back to display mode on loss of focus or on enter\n *\n * The State is managed by the parent\n */\nexport const ToggleableInput = ({\n                                    type = 'text',\n                                    value,\n                                    onChange = noop,\n                                    onChangeText = noop,\n                                    onEditCompleted = noop,\n                                    labelClassName = '',\n                                    initialState = 'display',\n                                    size = 20,\n                                    disclaimer,\n                                    onBlur,\n                                    ...restProps\n                                }: InputProps) => {\n    const [isEditing, setIsEditing] = useState(initialState !== 'display')\n    const { restartTimer, clearUpdateTimer } = useSaveDelay(() => undefined, 3000)\n    const ref = useRef<HTMLInputElement>(null)\n\n    const onEditCompletedWrapper = (text: string) => {\n        onEditCompleted(text)\n        clearUpdateTimer()\n    }\n\n    useEffect(() => {\n        if (isEditing) {\n            ref.current?.focus()\n        }\n    }, [isEditing])\n\n    return (\n        <div>\n            <div\n                className=\"row items-center w-full gap-x-2 overflow-hidden\"\n                onClick={() => !isEditing ? setIsEditing(!isEditing) : undefined}\n            >\n                <div className={clsx('row overflow-hidden', { 'flex-1': isEditing })}>\n                    {isEditing ? (\n                        <input\n                            ref={ref}\n                            {...restProps}\n                            value={value}\n                            type={type}\n                            onChange={event => {\n                                const value = event.target.value\n                                restartTimer(() => {\n                                    onEditCompletedWrapper(value)\n                                })\n                                onChangeText(value)\n                                onChange(event)\n                            }}\n                            onBlur={(event) => {\n                                if (onBlur) {\n                                    onBlur(event)\n                                }\n                                onEditCompletedWrapper(value)\n                                setIsEditing(false)\n                            }}\n                            onKeyDown={event => {\n                                if (event.key === 'Enter') {\n                                    setIsEditing(false)\n                                    onEditCompletedWrapper(value)\n                                }\n                            }}\n                            className={clsx(labelClassName, `w-full border-none rounded-none ring-0 outline-0 shadow-transparent decoration-primary p-0 underline-offset-4`, {\n                                underline: isEditing\n                            })}\n                            onFocus={event => event.target.select()}\n                        />\n                    ) : (\n                        <span\n                            className={clsx(labelClassName, 'max-w-xs break-words overflow-hidden')}\n                        >\n                            {value}\n                        </span>\n                    )}\n                </div>\n                <Pencil\n                    className={clsx(`cursor-pointer`, { 'text-transparent': isEditing })}\n                    size={size}\n                    style={{ minWidth: `${size}px` }}\n                />\n            </div>\n            {(isEditing && disclaimer) && (\n                <label className=\"text-negative\">\n                    {disclaimer}\n                </label>\n            )}\n        </div>\n    )\n}\n\nexport const ToggleableInputUncontrolled = ({\n                                                value: initialValue,\n                                                onChangeText = noop,\n                                                ...restProps\n                                            }: InputProps) => {\n    const [value, setValue] = useState(initialValue)\n\n    useEffect(() => {\n        setValue(initialValue)\n    }, [initialValue])\n\n    return (\n        <ToggleableInput\n            value={value}\n            onChangeText={text => {\n                setValue(text)\n                onChangeText(text)\n            }}\n            {...restProps}\n        />\n    )\n}\n","import { useEffect, useState } from 'react'\n\nexport function useSaveDelay(setNotificationStatus: (isShowing: boolean) => void, delay: number) {\n  const [updateTimer, setUpdateTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n  const [notificationTimer, setNotificationTimer] = useState<NodeJS.Timeout | undefined>(undefined)\n\n  const restartTimer = (onSave: () => void) => {\n    clearTimeout(updateTimer)\n    setUpdateTimer(setTimeout(() => {\n      onSave()\n      setNotificationStatus(true)\n      // Show Saved Notification for fade animation duration\n      clearTimeout(notificationTimer)\n      setNotificationTimer(setTimeout(() => {\n        setNotificationStatus(false)\n        clearTimeout(notificationTimer)\n      }, delay))\n      clearTimeout(updateTimer)\n    }, delay))\n  }\n\n  const clearUpdateTimer = (hasSaved = true) => {\n    clearTimeout(updateTimer)\n    if (hasSaved) {\n      setNotificationStatus(true)\n      clearTimeout(notificationTimer)\n      setNotificationTimer(setTimeout(() => {\n        setNotificationStatus(false)\n        clearTimeout(notificationTimer)\n      }, delay))\n    } else {\n      setNotificationStatus(false)\n    }\n  }\n\n  useEffect(() => {\n    return () => {\n      clearTimeout(updateTimer)\n      clearTimeout(notificationTimer)\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return { restartTimer, clearUpdateTimer }\n}","export const noop = () => undefined\n"],"mappings":"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","names":["useEffect","useState","useState","useEffect","value"]}

package/dist/css/globals.css

@@ -1538,6 +1538,10 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-0 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1562,6 +1566,10 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-0 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 0px;
+  }
   .outline-primary {
     outline-color: var(--color-primary);
   }

package/dist/index.d.mts

@@ -61,7 +61,7 @@ export { ScrollPicker, ScrollPickerProps } from './components/user-input/ScrollP
 export { SearchableSelect, SearchableSelectProps } from './components/user-input/SearchableSelect.mjs';
 export { Select, SelectOption, SelectProps } from './components/user-input/Select.mjs';
 export { Textarea, TextareaProps } from './components/user-input/Textarea.mjs';
-export { ToggleableInput } from './components/user-input/ToggleableInput.mjs';
+export { ToggleableInput, ToggleableInputUncontrolled } from './components/user-input/ToggleableInput.mjs';
 export { useHoverState } from './hooks/useHoverState.mjs';
 export { DEFAULT_LANGUAGE, LanguageContext, LanguageContextValue, Languages, ProvideLanguage, languages, languagesLocalNames, useLanguage, useLocale } from './hooks/useLanguage.mjs';
 export { useLocalStorage } from './hooks/useLocalStorage.mjs';

package/dist/index.d.ts

@@ -61,7 +61,7 @@ export { ScrollPicker, ScrollPickerProps } from './components/user-input/ScrollP
 export { SearchableSelect, SearchableSelectProps } from './components/user-input/SearchableSelect.js';
 export { Select, SelectOption, SelectProps } from './components/user-input/Select.js';
 export { Textarea, TextareaProps } from './components/user-input/Textarea.js';
-export { ToggleableInput } from './components/user-input/ToggleableInput.js';
+export { ToggleableInput, ToggleableInputUncontrolled } from './components/user-input/ToggleableInput.js';
 export { useHoverState } from './hooks/useHoverState.js';
 export { DEFAULT_LANGUAGE, LanguageContext, LanguageContextValue, Languages, ProvideLanguage, languages, languagesLocalNames, useLanguage, useLocale } from './hooks/useLanguage.js';
 export { useLocalStorage } from './hooks/useLocalStorage.js';

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,
@@ -4057,14 +4058,16 @@ var ModalHeader = ({
   descriptionText = ""
 }) => {
   const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation);
+  const hasTitleRow = !!title || !!titleText || !!onCloseClick;
+  const titleRow = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "row justify-between items-start gap-x-8", children: [
+    title ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: (0, import_clsx32.default)("textstyle-title-lg", {
+      "mb-1": description || descriptionText
+    }), children: titleText }),
+    !!onCloseClick && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Tooltip, { tooltip: translation.close, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { className: "row bg-gray-200 hover:bg-gray-300 rounded-md p-1", onClick: onCloseClick, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react14.X, {}) }) })
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "row justify-between items-start gap-x-8", children: [
-      title ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: (0, import_clsx32.default)("textstyle-title-lg", {
-        "mb-1": description || descriptionText
-      }), children: titleText }),
-      !!onCloseClick && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Tooltip, { tooltip: translation.close, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { className: "row bg-gray-200 hover:bg-gray-300 rounded-md p-1", onClick: onCloseClick, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react14.X, {}) }) })
-    ] }),
-    description ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "textstyle-description", children: descriptionText })
+    hasTitleRow && titleRow,
+    description ?? (descriptionText && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "textstyle-description", children: descriptionText }))
   ] });
 };
 var modalRootName = "modal-root";
@@ -5422,24 +5425,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(() => 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 +5459,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 +5484,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 +5496,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 +5696,7 @@ var filterNews = (localizedNews, requiredKeys) => {
   TimeDisplay,
   TimePicker,
   ToggleableInput,
+  ToggleableInputUncontrolled,
   Tooltip,
   UncontrolledCheckbox,
   UncontrolledInput,