@helpwave/hightide 0.1.15 → 0.1.17

package/dist/index.js

@@ -2858,6 +2858,7 @@ __export(index_exports, {
   Circle: () => Circle,
   ConfirmDialog: () => ConfirmDialog,
   ConfirmModal: () => ConfirmModal,
+  CopyToClipboardWrapper: () => CopyToClipboardWrapper,
   DatePicker: () => DatePicker,
   DatePickerUncontrolled: () => DatePickerUncontrolled,
   DateProperty: () => DateProperty,
@@ -2995,7 +2996,8 @@ __export(index_exports, {
   useTheme: () => useTheme,
   useTranslation: () => useTranslation,
   validateEmail: () => validateEmail,
-  weekDayList: () => weekDayList
+  weekDayList: () => weekDayList,
+  writeToClipboard: () => writeToClipboard
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -4625,8 +4627,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",
@@ -4654,6 +4660,7 @@ var formTranslation = {
     required: "Required",
     reset: "Reset",
     save: "Save",
+    saved: "Saved",
     search: "Search",
     select: "Select",
     selectOption: "Select an option",
@@ -4674,8 +4681,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",
@@ -4703,6 +4714,7 @@ var formTranslation = {
     required: "Erforderlich",
     reset: "Zur\xFCcksetzen",
     save: "Speichern",
+    saved: "Gespeichert",
     search: "Suche",
     select: "Select",
     selectOption: "Option ausw\xE4hlen",
@@ -6153,6 +6165,10 @@ function useDelay(options) {
     ...defaultOptions,
     ...options
   };
+  const clearTimer = () => {
+    clearTimeout(timer);
+    setTimer(void 0);
+  };
   const restartTimer = (onDelayFinish) => {
     if (disabled) {
       return;
@@ -6160,11 +6176,9 @@ function useDelay(options) {
     clearTimeout(timer);
     setTimer(setTimeout(() => {
       onDelayFinish();
+      setTimer(void 0);
     }, delay));
   };
-  const clearTimer = () => {
-    clearTimeout(timer);
-  };
   (0, import_react12.useEffect)(() => {
     return () => {
       clearTimeout(timer);
@@ -6173,9 +6187,11 @@ function useDelay(options) {
   (0, import_react12.useEffect)(() => {
     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
@@ -8653,6 +8669,7 @@ var TableWithSelection = ({
   state,
   fillerRow,
   rowSelection,
+  disableClickRowClickSelection = false,
   selectionRowId = "selection",
   onRowClick = noop,
   meta,
@@ -8710,21 +8727,124 @@ var TableWithSelection = ({
         ...state
       },
       onRowClick: (row, table) => {
-        row.toggleSelected();
+        if (!disableClickRowClickSelection) {
+          row.toggleSelected();
+        }
         onRowClick(row, table);
       },
       meta: {
-        bodyRowClassName: "cursor-pointer",
-        ...meta
+        ...meta,
+        bodyRowClassName: (0, import_clsx45.default)(
+          { "cursor-pointer": !disableClickRowClickSelection },
+          meta?.bodyRowClassName
+        )
       },
       ...props
     }
   );
 };
 
-// src/components/user-action/DateAndTimePicker.tsx
-var import_clsx46 = __toESM(require("clsx"));
+// src/components/user-action/CopyToClipboardWrapper.tsx
+var import_react30 = require("react");
+var import_clsx46 = require("clsx");
+
+// src/util/writeToClipboard.ts
+var writeToClipboard = (text) => {
+  return navigator.clipboard.writeText(text);
+};
+
+// src/components/user-action/CopyToClipboardWrapper.tsx
+var import_lucide_react23 = require("lucide-react");
 var import_jsx_runtime60 = require("react/jsx-runtime");
+var CopyToClipboardWrapper = ({
+  children,
+  textToCopy,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  zIndex = 10
+}) => {
+  const translation = useTranslation([formTranslation]);
+  const [isShowingIndication, setIsShowingIndication] = (0, import_react30.useState)(false);
+  const [isShowingConfirmation, setIsShowingConfirmation] = (0, import_react30.useState)(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__ */ (0, import_jsx_runtime60.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx46.clsx)("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__ */ (0, import_jsx_runtime60.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx46.clsx)(
+              `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__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "row gap-x-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react23.CheckIcon, { size: 16, className: "text-positive" }),
+                translation("copied")
+              ] }),
+              isShowingIndication && /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "row gap-x-1 text-description", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_lucide_react23.Copy, { size: 16 }),
+                translation("clickToCopy")
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                "div",
+                {
+                  className: (0, import_clsx46.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  style: { ...triangleStyle[position], zIndex: zIndex + 1 }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/user-action/DateAndTimePicker.tsx
+var import_clsx47 = __toESM(require("clsx"));
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var DateTimePicker = ({
   overwriteTranslation,
   value = /* @__PURE__ */ new Date(),
@@ -8743,7 +8863,7 @@ var DateTimePicker = ({
   let dateDisplay;
   let timeDisplay;
   if (useDate) {
-    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    dateDisplay = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       DatePicker,
       {
         ...datePickerProps,
@@ -8757,25 +8877,25 @@ var DateTimePicker = ({
     );
   }
   if (useTime) {
-    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    timeDisplay = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       TimePicker,
       {
         ...timePickerProps,
-        className: (0, import_clsx46.default)("h-full", { "justify-between w-full": mode === "time" }),
+        className: (0, import_clsx47.default)("h-full", { "justify-between w-full": mode === "time" }),
         maxHeight: 250,
         time: value,
         onChange
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "col w-fit", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "row gap-x-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "col w-fit", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "row gap-x-4", children: [
       dateDisplay,
       timeDisplay
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "row justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "row gap-x-2 mt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "row justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "row gap-x-2 mt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation("clear") }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         SolidButton,
         {
           size: "medium",
@@ -8788,9 +8908,9 @@ var DateTimePicker = ({
 };
 
 // src/components/user-action/ScrollPicker.tsx
-var import_react30 = require("react");
-var import_clsx47 = __toESM(require("clsx"));
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_react31 = require("react");
+var import_clsx48 = __toESM(require("clsx"));
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var up = 1;
 var down = -1;
 var ScrollPicker = ({
@@ -8809,7 +8929,7 @@ var ScrollPicker = ({
     transition,
     items,
     lastTimeStamp
-  }, setAnimation] = (0, import_react30.useState)({
+  }, setAnimation] = (0, import_react31.useState)({
     targetIndex: selectedIndex,
     currentIndex: disabled ? selectedIndex : 0,
     velocity: 0,
@@ -8825,7 +8945,7 @@ var ScrollPicker = ({
   const itemHeight = 40;
   const distance = 8;
   const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1);
-  const getDirection = (0, import_react30.useCallback)((targetIndex, currentIndex2, transition2, length) => {
+  const getDirection = (0, import_react31.useCallback)((targetIndex, currentIndex2, transition2, length) => {
     if (targetIndex === currentIndex2) {
       return transition2 > 0 ? up : down;
     }
@@ -8835,7 +8955,7 @@ var ScrollPicker = ({
     }
     return distanceForward >= length / 2 ? down : up;
   }, []);
-  const animate = (0, import_react30.useCallback)((timestamp, startTime) => {
+  const animate = (0, import_react31.useCallback)((timestamp, startTime) => {
     setAnimation((prevState) => {
       const {
         targetIndex,
@@ -8908,7 +9028,7 @@ var ScrollPicker = ({
       };
     });
   }, [disabled, getDirection, onChange]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp));
   });
   const opacity = (transition2, index, itemsCount) => {
@@ -8929,7 +9049,7 @@ var ScrollPicker = ({
     }
     return clamp(1 - opacityValue / max);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "div",
     {
       className: "relative overflow-hidden",
@@ -8939,15 +9059,15 @@ var ScrollPicker = ({
           setAnimation(({ velocity, ...animationData }) => ({ ...animationData, velocity: velocity + event.deltaY }));
         }
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           "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__ */ (0, import_jsx_runtime61.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           "div",
           {
             className: "col select-none",
@@ -8955,10 +9075,10 @@ var ScrollPicker = ({
               transform: `translateY(${-transition * (distance + itemHeight)}px)`,
               columnGap: `${distance}px`
             },
-            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            children: shownItems.map(({ name, index }, arrayIndex) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
               "div",
               {
-                className: (0, import_clsx47.default)(
+                className: (0, import_clsx48.default)(
                   `col items-center justify-center rounded-md`,
                   {
                     "text-primary font-bold": currentIndex === index,
@@ -8985,10 +9105,10 @@ var ScrollPicker = ({
 };
 
 // src/components/user-action/ToggleableInput.tsx
-var import_react31 = require("react");
-var import_lucide_react23 = require("lucide-react");
-var import_clsx48 = __toESM(require("clsx"));
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_react32 = require("react");
+var import_lucide_react24 = require("lucide-react");
+var import_clsx49 = __toESM(require("clsx"));
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var ToggleableInput = ({
   type = "text",
   value,
@@ -9003,26 +9123,26 @@ var ToggleableInput = ({
   saveDelayOptions,
   ...restProps
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react31.useState)(initialState !== "display");
+  const [isEditing, setIsEditing] = (0, import_react32.useState)(initialState !== "display");
   const { restartTimer, clearTimer } = useDelay(saveDelayOptions);
-  const ref = (0, import_react31.useRef)(null);
+  const ref = (0, import_react32.useRef)(null);
   const onEditCompletedWrapper = (text) => {
     onEditCompleted(text);
     clearTimer();
   };
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (isEditing) {
       ref.current?.focus();
     }
   }, [isEditing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       "div",
       {
-        className: (0, import_clsx48.default)("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
+        className: (0, import_clsx49.default)("row items-center w-full gap-x-2 overflow-hidden", { "cursor-pointer": !isEditing }),
         onClick: () => !isEditing ? setIsEditing(!isEditing) : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: (0, import_clsx48.default)("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: (0, import_clsx49.default)("row overflow-hidden", { "flex-1": isEditing }), children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             "input",
             {
               ref,
@@ -9050,16 +9170,16 @@ var ToggleableInput = ({
                   onEditCompletedWrapper(value);
                 }
               },
-              className: (0, import_clsx48.default)(`w-full border-none rounded-none ring-0 outline-0 text-inherit bg-inherit shadow-transparent decoration-primary p-0 underline-offset-4`, {
+              className: (0, import_clsx49.default)(`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__ */ (0, import_jsx_runtime62.jsx)("span", { className: (0, import_clsx48.default)("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-            import_lucide_react23.Pencil,
+          ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: (0, import_clsx49.default)("max-w-xs break-words overflow-hidden", labelClassName), children: value }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            import_lucide_react24.Pencil,
             {
-              className: (0, import_clsx48.default)(`cursor-pointer`, { "text-transparent": isEditing }),
+              className: (0, import_clsx49.default)(`cursor-pointer`, { "text-transparent": isEditing }),
               size,
               style: { minWidth: `${size}px` }
             }
@@ -9067,7 +9187,7 @@ var ToggleableInput = ({
         ]
       }
     ),
-    isEditing && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("label", { className: "text-negative", children: disclaimer })
+    isEditing && disclaimer && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("label", { className: "text-negative", children: disclaimer })
   ] });
 };
 var ToggleableInputUncontrolled = ({
@@ -9075,11 +9195,11 @@ var ToggleableInputUncontrolled = ({
   onChangeText = noop,
   ...restProps
 }) => {
-  const [value, setValue] = (0, import_react31.useState)(initialValue);
-  (0, import_react31.useEffect)(() => {
+  const [value, setValue] = (0, import_react32.useState)(initialValue);
+  (0, import_react32.useEffect)(() => {
     setValue(initialValue);
   }, [initialValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     ToggleableInput,
     {
       value,
@@ -9093,9 +9213,9 @@ var ToggleableInputUncontrolled = ({
 };
 
 // src/hooks/useRerender.ts
-var import_react32 = require("react");
+var import_react33 = require("react");
 var useRerender = () => {
-  return (0, import_react32.useReducer)(() => ({}), {})[1];
+  return (0, import_react33.useReducer)(() => ({}), {})[1];
 };
 
 // src/util/builder.ts
@@ -9161,6 +9281,7 @@ function resolveSetState(action, prev) {
   Circle,
   ConfirmDialog,
   ConfirmModal,
+  CopyToClipboardWrapper,
   DatePicker,
   DatePickerUncontrolled,
   DateProperty,
@@ -9298,6 +9419,7 @@ function resolveSetState(action, prev) {
   useTheme,
   useTranslation,
   validateEmail,
-  weekDayList
+  weekDayList,
+  writeToClipboard
 });
 //# sourceMappingURL=index.js.map