@helpwave/hightide 0.1.14 → 0.1.16

package/dist/index.mjs

@@ -4464,8 +4464,12 @@ var formTranslation = {
     cancel: "Cancel",
     change: "Change",
     clear: "Clear",
+    click: "Click",
+    clickToCopy: "Click to Copy",
     close: "Close",
     confirm: "Confirm",
+    copy: "Copy",
+    copied: "Copied",
     decline: "Decline",
     delete: "Delete",
     discard: "Discard",
@@ -4493,6 +4497,7 @@ var formTranslation = {
     required: "Required",
     reset: "Reset",
     save: "Save",
+    saved: "Saved",
     search: "Search",
     select: "Select",
     selectOption: "Select an option",
@@ -4513,8 +4518,12 @@ var formTranslation = {
     cancel: "Abbrechen",
     change: "\xC4ndern",
     clear: "L\xF6schen",
+    click: "Klicken",
+    clickToCopy: "Zum kopieren klicken",
     close: "Schlie\xDFen",
     confirm: "Best\xE4tigen",
+    copy: "Kopieren",
+    copied: "Kopiert",
     decline: "Ablehnen",
     delete: "L\xF6schen",
     discard: "Verwerfen",
@@ -4542,6 +4551,7 @@ var formTranslation = {
     required: "Erforderlich",
     reset: "Zur\xFCcksetzen",
     save: "Speichern",
+    saved: "Gespeichert",
     search: "Suche",
     select: "Select",
     selectOption: "Option ausw\xE4hlen",
@@ -5992,6 +6002,10 @@ function useDelay(options) {
     ...defaultOptions,
     ...options
   };
+  const clearTimer = () => {
+    clearTimeout(timer);
+    setTimer(void 0);
+  };
   const restartTimer = (onDelayFinish) => {
     if (disabled) {
       return;
@@ -5999,11 +6013,9 @@ function useDelay(options) {
     clearTimeout(timer);
     setTimer(setTimeout(() => {
       onDelayFinish();
+      setTimer(void 0);
     }, delay));
   };
-  const clearTimer = () => {
-    clearTimeout(timer);
-  };
   useEffect12(() => {
     return () => {
       clearTimeout(timer);
@@ -6012,9 +6024,11 @@ function useDelay(options) {
   useEffect12(() => {
     if (disabled) {
       clearTimeout(timer);
+      setTimer(void 0);
     }
   }, [disabled, timer]);
-  return { restartTimer, clearTimer };
+  console.log(timer);
+  return { restartTimer, clearTimer, hasActiveTimer: !!timer };
 }
 
 // src/components/user-action/Label.tsx
@@ -8499,6 +8513,7 @@ var TableWithSelection = ({
   state,
   fillerRow,
   rowSelection,
+  disableClickRowClickSelection = false,
   selectionRowId = "selection",
   onRowClick = noop,
   meta,
@@ -8556,21 +8571,124 @@ var TableWithSelection = ({
         ...state
       },
       onRowClick: (row, table) => {
-        row.toggleSelected();
+        if (!disableClickRowClickSelection) {
+          row.toggleSelected();
+        }
         onRowClick(row, table);
       },
       meta: {
-        bodyRowClassName: "cursor-pointer",
-        ...meta
+        ...meta,
+        bodyRowClassName: clsx45(
+          { "cursor-pointer": !disableClickRowClickSelection },
+          meta.bodyRowClassName
+        )
       },
       ...props
     }
   );
 };
 
-// src/components/user-action/DateAndTimePicker.tsx
-import clsx46 from "clsx";
+// src/components/user-action/CopyToClipboardWrapper.tsx
+import { useState as useState25 } from "react";
+import { clsx as clsx46 } from "clsx";
+
+// src/util/writeToClipboard.ts
+var writeToClipboard = (text) => {
+  return navigator.clipboard.writeText(text);
+};
+
+// src/components/user-action/CopyToClipboardWrapper.tsx
+import { CheckIcon, Copy } from "lucide-react";
 import { jsx as jsx60, jsxs as jsxs38 } from "react/jsx-runtime";
+var CopyToClipboardWrapper = ({
+  children,
+  textToCopy,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  zIndex = 10
+}) => {
+  const translation = useTranslation([formTranslation]);
+  const [isShowingIndication, setIsShowingIndication] = useState25(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = useState25(false);
+  const positionClasses = {
+    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
+    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
+    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
+    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
+  };
+  const triangleSize = 6;
+  const triangleClasses = {
+    top: `top-full left-1/2 -translate-x-1/2 border-t-tooltip-background border-l-transparent border-r-transparent`,
+    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,
+    left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,
+    right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background border-t-transparent border-b-transparent`
+  };
+  const triangleStyle = {
+    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
+    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
+    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
+    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
+  };
+  return /* @__PURE__ */ jsxs38(
+    "div",
+    {
+      className: clsx46("relative inline-block cursor-copy", containerClassName),
+      onMouseEnter: () => {
+        setIsShowingIndication(true);
+      },
+      onMouseLeave: () => {
+        setIsShowingIndication(false);
+        setIsShowingConfirmation(false);
+      },
+      onClick: () => {
+        writeToClipboard(textToCopy).catch(console.error);
+        setIsShowingIndication(false);
+        setIsShowingConfirmation(true);
+      },
+      children: [
+        children,
+        /* @__PURE__ */ jsxs38(
+          "div",
+          {
+            className: clsx46(
+              `absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
+           shadow-around-md bg-tooltip-background cursor-default pointer-events-none`,
+              "transition-opacity duration-200",
+              positionClasses[position],
+              tooltipClassName
+            ),
+            style: {
+              zIndex,
+              opacity: isShowingIndication || isShowingConfirmation ? 1 : 0
+            },
+            children: [
+              isShowingConfirmation && /* @__PURE__ */ jsxs38("div", { className: "row gap-x-1", children: [
+                /* @__PURE__ */ jsx60(CheckIcon, { size: 16, className: "text-positive" }),
+                translation("copied")
+              ] }),
+              isShowingIndication && /* @__PURE__ */ jsxs38("div", { className: "row gap-x-1 text-description", children: [
+                /* @__PURE__ */ jsx60(Copy, { size: 16 }),
+                translation("clickToCopy")
+              ] }),
+              /* @__PURE__ */ jsx60(
+                "div",
+                {
+                  className: clsx46(`absolute w-0 h-0`, triangleClasses[position]),
+                  style: { ...triangleStyle[position], zIndex: zIndex + 1 }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/user-action/DateAndTimePicker.tsx
+import clsx47 from "clsx";
+import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
 var DateTimePicker = ({
   overwriteTranslation,
   value = /* @__PURE__ */ new Date(),
@@ -8589,7 +8707,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ jsx60(
+    dateDisplay = /* @__PURE__ */ jsx61(
       DatePicker,
       {
         ...datePickerProps,
@@ -8603,25 +8721,25 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ jsx60(
+    timeDisplay = /* @__PURE__ */ jsx61(
       TimePicker,
       {
         ...timePickerProps,
-        className: clsx46("h-full", { "justify-between w-full": mode === "time" }),
+        className: clsx47("h-full", { "justify-between w-full": mode === "time" }),
         maxHeight: 250,
         time: value,
         onChange
       }
     );
   }
-  return /* @__PURE__ */ jsxs38("div", { className: "col w-fit", children: [
-    /* @__PURE__ */ jsxs38("div", { className: "row gap-x-4", children: [
+  return /* @__PURE__ */ jsxs39("div", { className: "col w-fit", children: [
+    /* @__PURE__ */ jsxs39("div", { className: "row gap-x-4", children: [
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ jsx60("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs38("div", { className: "row gap-x-2 mt-1", children: [
-      /* @__PURE__ */ jsx60(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ jsx60(
+    /* @__PURE__ */ jsx61("div", { className: "row justify-end", children: /* @__PURE__ */ jsxs39("div", { className: "row gap-x-2 mt-1", children: [
+      /* @__PURE__ */ jsx61(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ jsx61(
         SolidButton,
         {
           size: "medium",
@@ -8634,9 +8752,9 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-import { useCallback as useCallback6, useEffect as useEffect26, useState as useState25 } from "react";
-import clsx47 from "clsx";
-import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect26, useState as useState26 } from "react";
+import clsx48 from "clsx";
+import { jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -8655,7 +8773,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = useState25({
+  }, setAnimation] = useState26({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -8775,7 +8893,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(
     "div",
     {
       className: "relative overflow-hidden",
@@ -8785,15 +8903,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + event.deltaY }));
         }
       },
-      children: /* @__PURE__ */ jsxs39("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ jsx61(
+      children: /* @__PURE__ */ jsxs40("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ jsx62(
           "div",
           {
             className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/30 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),
-        /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx62(
           "div",
           {
             className: "col select-none",
@@ -8801,10 +8919,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx61(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ jsx62(
               "div",
               {
-                className: clsx47(
+                className: clsx48(
                   `col items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -8831,10 +8949,10 @@ var ScrollPicker = ({
 };
 
 // src/components/user-action/ToggleableInput.tsx
-import { useEffect as useEffect27, useRef as useRef10, useState as useState26 } from "react";
+import { useEffect as useEffect27, useRef as useRef10, useState as useState27 } from "react";
 import { Pencil } from "lucide-react";
-import clsx48 from "clsx";
-import { jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
+import clsx49 from "clsx";
+import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
 var ToggleableInput = ({
   type = "text",
   value,
@@ -8849,7 +8967,7 @@ var ToggleableInput = ({
   saveDelayOptions,
   ...restProps
 }) => {
-  const [isEditing, setIsEditing] = useState26(initialState !== "display");
+  const [isEditing, setIsEditing] = useState27(initialState !== "display");
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
   const ref = useRef10(null);
   const onEditCompletedWrapper = (text) => {
@@ -8861,14 +8979,14 @@ var ToggleableInput = ({
       ref.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ jsxs40("div", { children: [
-    /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41("div", { children: [
+    /* @__PURE__ */ jsxs41(
       "div",
       {
-        className: clsx48("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
+        className: clsx49("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
         onClick: () => !isEditing ? setIsEditing(!isEditing) : void 0,
         children: [
-          /* @__PURE__ */ jsx62("div", { className: clsx48("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ jsx62(
+          /* @__PURE__ */ jsx63("div", { className: clsx49("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ jsx63(
             "input",
             {
               ref,
@@ -8896,16 +9014,16 @@ var ToggleableInput = ({
                   onEditCompletedWrapper(value);
                 }
               },
-              className: clsx48(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
+              className: clsx49(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
                 underline: isEditing
               }, labelClassName),
               onFocus: (event) => event.target.select()
             }
-          ) : /* @__PURE__ */ jsx62("span", { className: clsx48("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
-          /* @__PURE__ */ jsx62(
+          ) : /* @__PURE__ */ jsx63("span", { className: clsx49("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
+          /* @__PURE__ */ jsx63(
             Pencil,
             {
-              className: clsx48(`cursor-pointer`, { "text-transparent": isEditing }),
+              className: clsx49(`cursor-pointer`, { "text-transparent": isEditing }),
               size,
               style: { minWidth: `${size}px` }
             }
@@ -8913,7 +9031,7 @@ var ToggleableInput = ({
         ]
       }
     ),
-    isEditing && disclaimer && /* @__PURE__ */ jsx62("label", { className: "text-negative", children: disclaimer })
+    isEditing && disclaimer && /* @__PURE__ */ jsx63("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var ToggleableInputUncontrolled = ({
@@ -8921,11 +9039,11 @@ var ToggleableInputUncontrolled = ({
   onChangeText = noop,
   ...restProps
 }) => {
-  const [value, setValue] = useState26(initialValue);
+  const [value, setValue] = useState27(initialValue);
   useEffect27(() => {
     setValue(initialValue);
   }, [initialValue]);
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     ToggleableInput,
     {
       value,
@@ -9006,6 +9124,7 @@ export {
   Circle,
   ConfirmDialog,
   ConfirmModal,
+  CopyToClipboardWrapper,
   DatePicker,
   DatePickerUncontrolled,
   DateProperty,
@@ -9143,6 +9262,7 @@ export {
   useTheme,
   useTranslation,
   validateEmail,
-  weekDayList
+  weekDayList,
+  writeToClipboard
 };
 //# sourceMappingURL=index.mjs.map