@helpwave/hightide 0.1.18 → 0.1.20

package/dist/components/table/TableFilterButton.mjs

@@ -1,4 +1,5 @@
 // src/components/user-action/Button.tsx
+import { forwardRef } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ButtonColorUtil = {
@@ -24,7 +25,7 @@ var ButtonUtil = {
   paddingMapping,
   iconPaddingMapping
 };
-var SolidButton = ({
+var SolidButton = forwardRef(function SolidButton2({
   children,
   disabled = false,
   color = "primary",
@@ -34,7 +35,7 @@ var SolidButton = ({
   onClick,
   className,
   ...restProps
-}) => {
+}, ref) {
   const colorClasses = {
     primary: "bg-button-solid-primary-background text-button-solid-primary-text",
     secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
@@ -56,8 +57,9 @@ var SolidButton = ({
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      ref,
+      onClick,
+      disabled,
       className: clsx(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
@@ -92,13 +94,12 @@ var SolidButton = ({
       ]
     }
   );
-};
+});
 var IconButton = ({
   children,
   disabled = false,
   color = "primary",
   size = "medium",
-  onClick,
   className,
   ...restProps
 }) => {
@@ -115,8 +116,7 @@ var IconButton = ({
   return /* @__PURE__ */ jsx(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      disabled,
       className: clsx(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled && color !== "transparent",
@@ -134,7 +134,7 @@ var IconButton = ({
 };
 
 // src/components/user-action/Input.tsx
-import { forwardRef, useEffect as useEffect3, useImperativeHandle, useRef, useState as useState2 } from "react";
+import { forwardRef as forwardRef2, useEffect as useEffect3, useImperativeHandle, useRef, useState as useState2 } from "react";
 import clsx3 from "clsx";
 
 // src/hooks/useDelay.ts
@@ -295,7 +295,7 @@ var defaultEditCompleteOptions = {
   afterDelay: true,
   delay: 2500
 };
-var Input = forwardRef(function Input2({
+var Input = forwardRef2(function Input2({
   id,
   type = "text",
   value,
@@ -370,7 +370,7 @@ var Input = forwardRef(function Input2({
     )
   ] });
 });
-var FormInput = forwardRef(function FormInput2({
+var FormInput = forwardRef2(function FormInput2({
   id,
   labelText,
   errorText,
@@ -409,7 +409,11 @@ var FormInput = forwardRef(function FormInput2({
 import { FilterIcon } from "lucide-react";
 
 // src/components/user-action/Menu.tsx
-import { useRef as useRef2 } from "react";
+import {
+  useEffect as useEffect6,
+  useRef as useRef2,
+  useState as useState4
+} from "react";
 import clsx4 from "clsx";
 
 // src/hooks/useOutsideClick.ts
@@ -487,56 +491,153 @@ var BagFunctionUtil = {
   resolve
 };
 
+// src/hooks/usePopoverPosition.ts
+var defaultPopoverPositionOptions = {
+  edgePadding: 16,
+  outerGap: 4,
+  horizontalAlignment: "leftInside",
+  verticalAlignment: "bottomOutside",
+  disabled: false
+};
+var usePopoverPosition = (trigger, options) => {
+  const {
+    edgePadding,
+    outerGap,
+    verticalAlignment,
+    horizontalAlignment,
+    disabled
+  } = { ...defaultPopoverPositionOptions, ...options };
+  if (disabled || !trigger) {
+    return {};
+  }
+  const left = {
+    leftOutside: trigger.left - outerGap,
+    leftInside: trigger.left,
+    rightOutside: trigger.right + outerGap,
+    rightInside: trigger.right,
+    center: trigger.left + trigger.width / 2
+  }[horizontalAlignment];
+  const top = {
+    topOutside: trigger.top - outerGap,
+    topInside: trigger.top,
+    bottomOutside: trigger.bottom + outerGap,
+    bottomInside: trigger.bottom,
+    center: trigger.top + trigger.height / 2
+  }[verticalAlignment];
+  const translateX = {
+    leftOutside: "-100%",
+    leftInside: void 0,
+    rightOutside: void 0,
+    rightInside: "-100%",
+    center: "-50%"
+  }[horizontalAlignment];
+  const translateY = {
+    topOutside: "-100%",
+    topInside: void 0,
+    bottomOutside: void 0,
+    bottomInside: "-100%",
+    center: "-50%"
+  }[verticalAlignment];
+  return {
+    left: Math.max(left, edgePadding),
+    top: Math.max(top, edgePadding),
+    translate: [translateX ?? "0", translateY ?? "0"].join(" ")
+  };
+};
+
 // src/components/user-action/Menu.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function getScrollableParents(element) {
+  const scrollables = [];
+  let parent = element.parentElement;
+  while (parent) {
+    scrollables.push(parent);
+    parent = parent.parentElement;
+  }
+  return scrollables;
+}
 var Menu = ({
   trigger,
   children,
-  alignment = "tl",
+  alignmentHorizontal = "leftInside",
+  alignmentVertical = "bottomOutside",
   showOnHover = false,
+  disabled = false,
   menuClassName = ""
 }) => {
-  const { isHovered: isOpen, setIsHovered: setIsOpen, handlers } = useHoverState({ isDisabled: !showOnHover });
+  const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
   const triggerRef = useRef2(null);
   const menuRef = useRef2(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const bag = { isOpen, close: () => setIsOpen(false) };
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className: "relative",
-      ...handlers,
-      children: [
-        trigger(() => setIsOpen(!isOpen), triggerRef),
-        /* @__PURE__ */ jsx4(
-          "div",
+  const [isHidden, setIsHidden] = useState4(true);
+  const bag = {
+    isOpen,
+    close: () => setIsOpen(false),
+    toggleOpen: () => setIsOpen((prevState) => !prevState),
+    disabled
+  };
+  const menuPosition = usePopoverPosition(
+    triggerRef.current?.getBoundingClientRect(),
+    { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
+  );
+  useEffect6(() => {
+    if (!isOpen) return;
+    const triggerEl = triggerRef.current;
+    if (!triggerEl) return;
+    const scrollableParents = getScrollableParents(triggerEl);
+    const close = () => setIsOpen(false);
+    scrollableParents.forEach((parent) => {
+      parent.addEventListener("scroll", close);
+    });
+    window.addEventListener("resize", close);
+    return () => {
+      scrollableParents.forEach((parent) => {
+        parent.removeEventListener("scroll", close);
+      });
+      window.removeEventListener("resize", close);
+    };
+  }, [isOpen, setIsOpen]);
+  useEffect6(() => {
+    if (isOpen) {
+      setIsHidden(false);
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    trigger(bag, triggerRef),
+    createPortal(/* @__PURE__ */ jsx4(
+      "div",
+      {
+        ref: menuRef,
+        onClick: (e) => e.stopPropagation(),
+        className: clsx4(
+          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg z-10",
           {
-            ref: menuRef,
-            onClick: (e) => e.stopPropagation(),
-            className: clsx4(
-              "absolute top-full mt-1 min-w-40 rounded-lg bg-menu-background text-menu-text shadow-around-lg z-10",
-              {
-                "top-0": alignment[0] === "t",
-                "bottom-0": alignment[0] === "b",
-                "left-0": alignment[1] === "l",
-                "right-0": alignment[1] === "r",
-                "hidden": !isOpen
-              },
-              menuClassName
-            ),
-            children: BagFunctionUtil.resolve(children, bag)
+            "animate-pop-in": isOpen,
+            "animate-pop-out": !isOpen,
+            "hidden": isHidden
+          },
+          menuClassName
+        ),
+        onAnimationEnd: () => {
+          if (!isOpen) {
+            setIsHidden(true);
           }
-        )
-      ]
-    }
-  );
+        },
+        style: {
+          ...menuPosition
+        },
+        children: BagFunctionUtil.resolve(children, bag)
+      }
+    ), document.body)
+  ] });
 };
 
 // src/localization/LanguageProvider.tsx
-import { createContext, useContext, useEffect as useEffect7, useState as useState5 } from "react";
+import { createContext, useContext, useEffect as useEffect8, useState as useState6 } from "react";
 
 // src/hooks/useLocalStorage.ts
-import { useCallback as useCallback2, useEffect as useEffect6, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect7, useState as useState5 } from "react";
 
 // src/localization/util.ts
 var languages = ["en", "de"];
@@ -622,6 +723,7 @@ var useTranslation = (translations, overwriteTranslation = {}) => {
 // src/localization/defaults/form.ts
 var formTranslation = {
   en: {
+    add: "Add",
     all: "All",
     apply: "Apply",
     back: "Back",
@@ -634,6 +736,7 @@ var formTranslation = {
     confirm: "Confirm",
     copy: "Copy",
     copied: "Copied",
+    create: "Create",
     decline: "Decline",
     delete: "Delete",
     discard: "Discard",
@@ -676,6 +779,7 @@ var formTranslation = {
     yes: "Yes"
   },
   de: {
+    add: "Hinzuf\xFCgen",
     all: "Alle",
     apply: "Anwenden",
     back: "Zur\xFCck",
@@ -688,6 +792,7 @@ var formTranslation = {
     confirm: "Best\xE4tigen",
     copy: "Kopieren",
     copied: "Kopiert",
+    create: "Erstellen",
     decline: "Ablehnen",
     delete: "L\xF6schen",
     discard: "Verwerfen",
@@ -732,8 +837,8 @@ var formTranslation = {
 };
 
 // src/components/table/TableFilterButton.tsx
-import { useEffect as useEffect8, useState as useState6 } from "react";
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useState as useState7 } from "react";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var defaultTableFilterTranslation = {
   en: {
     filter: "Filter",
@@ -758,16 +863,16 @@ var TableFilterButton = ({
 }) => {
   const translation = useTranslation([formTranslation, defaultTableFilterTranslation]);
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = useState6(columnFilterValue);
+  const [filterValue, setFilterValue] = useState7(columnFilterValue);
   const hasFilter = !!filterValue;
-  useEffect8(() => {
+  useEffect9(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   return /* @__PURE__ */ jsx6(
     Menu,
     {
-      trigger: (onClick, ref) => /* @__PURE__ */ jsxs4("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ jsx6(IconButton, { color: "neutral", size: "tiny", onClick, children: /* @__PURE__ */ jsx6(FilterIcon, {}) }),
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ jsxs4("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ jsx6(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ jsx6(FilterIcon, {}) }),
         hasFilter && /* @__PURE__ */ jsx6(
           "div",
           {
@@ -776,7 +881,7 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ jsxs4("div", { className: "col gap-y-1 p-2 items-start font-normal text-menu-text", children: [
+      children: ({ close }) => /* @__PURE__ */ jsxs4("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
         /* @__PURE__ */ jsx6("h4", { className: "textstyle-title-sm", children: translation("filter") }),
         filterType === "text" && /* @__PURE__ */ jsx6(
           Input,
@@ -788,7 +893,7 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ jsxs4("div", { className: "row gap-x-2 items-center", children: [
+        filterType === "range" && /* @__PURE__ */ jsxs4("div", { className: "flex-row-2 items-center", children: [
           /* @__PURE__ */ jsx6(
             Input,
             {
@@ -817,7 +922,7 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        filterType === "dateRange" && /* @__PURE__ */ jsxs4(Fragment, { children: [
+        filterType === "dateRange" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
           /* @__PURE__ */ jsx6(
             Input,
             {
@@ -845,7 +950,7 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "row justify-end w-full", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex-row-2 justify-end w-full", children: [
           hasFilter && /* @__PURE__ */ jsx6(SolidButton, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();