@helpwave/hightide 0.1.18 → 0.1.19

package/dist/components/table/TableFilterButton.js

@@ -34,6 +34,7 @@ __export(TableFilterButton_exports, {
 module.exports = __toCommonJS(TableFilterButton_exports);
 
 // src/components/user-action/Button.tsx
+var import_react = require("react");
 var import_clsx = __toESM(require("clsx"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var ButtonColorUtil = {
@@ -59,7 +60,7 @@ var ButtonUtil = {
   paddingMapping,
   iconPaddingMapping
 };
-var SolidButton = ({
+var SolidButton = (0, import_react.forwardRef)(function SolidButton2({
   children,
   disabled = false,
   color = "primary",
@@ -69,7 +70,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",
@@ -91,8 +92,9 @@ var SolidButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      ref,
+      onClick,
+      disabled,
       className: (0, import_clsx.default)(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
@@ -127,13 +129,12 @@ var SolidButton = ({
       ]
     }
   );
-};
+});
 var IconButton = ({
   children,
   disabled = false,
   color = "primary",
   size = "medium",
-  onClick,
   className,
   ...restProps
 }) => {
@@ -150,8 +151,7 @@ var IconButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      disabled,
       className: (0, import_clsx.default)(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled && color !== "transparent",
@@ -169,17 +169,17 @@ var IconButton = ({
 };
 
 // src/components/user-action/Input.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_clsx3 = __toESM(require("clsx"));
 
 // src/hooks/useDelay.ts
-var import_react = require("react");
+var import_react2 = require("react");
 var defaultOptions = {
   delay: 3e3,
   disabled: false
 };
 function useDelay(options) {
-  const [timer, setTimer] = (0, import_react.useState)(void 0);
+  const [timer, setTimer] = (0, import_react2.useState)(void 0);
   const { delay, disabled } = {
     ...defaultOptions,
     ...options
@@ -198,12 +198,12 @@ function useDelay(options) {
       setTimer(void 0);
     }, delay));
   };
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     return () => {
       clearTimeout(timer);
     };
   }, [timer]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (disabled) {
       clearTimeout(timer);
       setTimer(void 0);
@@ -234,9 +234,9 @@ var Label = ({
 };
 
 // src/hooks/useFocusManagement.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 function useFocusManagement() {
-  const getFocusableElements = (0, import_react2.useCallback)(() => {
+  const getFocusableElements = (0, import_react3.useCallback)(() => {
     return Array.from(
       document.querySelectorAll(
         'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
@@ -245,7 +245,7 @@ function useFocusManagement() {
       (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
     );
   }, []);
-  const getNextFocusElement = (0, import_react2.useCallback)(() => {
+  const getNextFocusElement = (0, import_react3.useCallback)(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -257,11 +257,11 @@ function useFocusManagement() {
     }
     return nextElement;
   }, [getFocusableElements]);
-  const focusNext = (0, import_react2.useCallback)(() => {
+  const focusNext = (0, import_react3.useCallback)(() => {
     const nextElement = getNextFocusElement();
     nextElement?.focus();
   }, [getNextFocusElement]);
-  const getPreviousFocusElement = (0, import_react2.useCallback)(() => {
+  const getPreviousFocusElement = (0, import_react3.useCallback)(() => {
     const elements = getFocusableElements();
     if (elements.length === 0) {
       return void 0;
@@ -277,7 +277,7 @@ function useFocusManagement() {
     }
     return previousElement;
   }, [getFocusableElements]);
-  const focusPrevious = (0, import_react2.useCallback)(() => {
+  const focusPrevious = (0, import_react3.useCallback)(() => {
     const previousElement = getPreviousFocusElement();
     if (previousElement) previousElement.focus();
   }, [getPreviousFocusElement]);
@@ -291,10 +291,10 @@ function useFocusManagement() {
 }
 
 // src/hooks/useFocusOnceVisible.ts
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = import_react3.default.useState(false);
-  (0, import_react3.useEffect)(() => {
+  const [hasUsedFocus, setHasUsedFocus] = import_react4.default.useState(false);
+  (0, import_react4.useEffect)(() => {
     if (disable || hasUsedFocus) {
       return;
     }
@@ -330,7 +330,7 @@ var defaultEditCompleteOptions = {
   afterDelay: true,
   delay: 2500
 };
-var Input = (0, import_react4.forwardRef)(function Input2({
+var Input = (0, import_react5.forwardRef)(function Input2({
   id,
   type = "text",
   value,
@@ -353,10 +353,10 @@ var Input = (0, import_react4.forwardRef)(function Input2({
     restartTimer,
     clearTimer
   } = useDelay({ delay, disabled: !afterDelay });
-  const innerRef = (0, import_react4.useRef)(null);
+  const innerRef = (0, import_react5.useRef)(null);
   const { focusNext } = useFocusManagement();
   useFocusOnceVisible(innerRef, !autoFocus);
-  (0, import_react4.useImperativeHandle)(forwardedRef, () => innerRef.current);
+  (0, import_react5.useImperativeHandle)(forwardedRef, () => innerRef.current);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -405,7 +405,7 @@ var Input = (0, import_react4.forwardRef)(function Input2({
     )
   ] });
 });
-var FormInput = (0, import_react4.forwardRef)(function FormInput2({
+var FormInput = (0, import_react5.forwardRef)(function FormInput2({
   id,
   labelText,
   errorText,
@@ -444,13 +444,13 @@ var FormInput = (0, import_react4.forwardRef)(function FormInput2({
 var import_lucide_react = require("lucide-react");
 
 // src/components/user-action/Menu.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_clsx4 = __toESM(require("clsx"));
 
 // src/hooks/useOutsideClick.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var useOutsideClick = (refs, handler) => {
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -468,15 +468,15 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/hooks/useHoverState.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = (0, import_react6.useState)(false);
-  const [timer, setTimer] = (0, import_react6.useState)();
+  const [isHovered, setIsHovered] = (0, import_react7.useState)(false);
+  const [timer, setTimer] = (0, import_react7.useState)();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -492,14 +492,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -522,56 +522,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
+var import_react_dom = require("react-dom");
 var import_jsx_runtime4 = require("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 triggerRef = (0, import_react7.useRef)(null);
-  const menuRef = (0, import_react7.useRef)(null);
+  const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
+  const triggerRef = (0, import_react8.useRef)(null);
+  const menuRef = (0, import_react8.useRef)(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const bag = { isOpen, close: () => setIsOpen(false) };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      className: "relative",
-      ...handlers,
-      children: [
-        trigger(() => setIsOpen(!isOpen), triggerRef),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "div",
+  const [isHidden, setIsHidden] = (0, import_react8.useState)(true);
+  const bag = {
+    isOpen,
+    close: () => setIsOpen(false),
+    toggleOpen: () => setIsOpen((prevState) => !prevState),
+    disabled
+  };
+  const menuPosition = usePopoverPosition(
+    triggerRef.current?.getBoundingClientRect(),
+    { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
+  );
+  (0, import_react8.useEffect)(() => {
+    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]);
+  (0, import_react8.useEffect)(() => {
+    if (isOpen) {
+      setIsHidden(false);
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    trigger(bag, triggerRef),
+    (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        ref: menuRef,
+        onClick: (e) => e.stopPropagation(),
+        className: (0, import_clsx4.default)(
+          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg z-10",
           {
-            ref: menuRef,
-            onClick: (e) => e.stopPropagation(),
-            className: (0, import_clsx4.default)(
-              "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
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/hooks/useLocalStorage.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/localization/util.ts
 var languages = ["en", "de"];
@@ -588,11 +685,11 @@ var LanguageUtil = {
 
 // src/localization/LanguageProvider.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var LanguageContext = (0, import_react9.createContext)({
+var LanguageContext = (0, import_react10.createContext)({
   language: LanguageUtil.DEFAULT_LANGUAGE,
   setLanguage: (v) => v
 });
-var useLanguage = () => (0, import_react9.useContext)(LanguageContext);
+var useLanguage = () => (0, import_react10.useContext)(LanguageContext);
 
 // src/localization/useTranslation.ts
 var TranslationPluralCount = {
@@ -657,6 +754,7 @@ var useTranslation = (translations, overwriteTranslation = {}) => {
 // src/localization/defaults/form.ts
 var formTranslation = {
   en: {
+    add: "Add",
     all: "All",
     apply: "Apply",
     back: "Back",
@@ -669,6 +767,7 @@ var formTranslation = {
     confirm: "Confirm",
     copy: "Copy",
     copied: "Copied",
+    create: "Create",
     decline: "Decline",
     delete: "Delete",
     discard: "Discard",
@@ -711,6 +810,7 @@ var formTranslation = {
     yes: "Yes"
   },
   de: {
+    add: "Hinzuf\xFCgen",
     all: "Alle",
     apply: "Anwenden",
     back: "Zur\xFCck",
@@ -723,6 +823,7 @@ var formTranslation = {
     confirm: "Best\xE4tigen",
     copy: "Kopieren",
     copied: "Kopiert",
+    create: "Erstellen",
     decline: "Ablehnen",
     delete: "L\xF6schen",
     discard: "Verwerfen",
@@ -767,7 +868,7 @@ var formTranslation = {
 };
 
 // src/components/table/TableFilterButton.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var defaultTableFilterTranslation = {
   en: {
@@ -793,16 +894,16 @@ var TableFilterButton = ({
 }) => {
   const translation = useTranslation([formTranslation, defaultTableFilterTranslation]);
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react10.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react11.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Menu,
     {
-      trigger: (onClick, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { color: "neutral", size: "tiny", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.FilterIcon, {}) }),
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.FilterIcon, {}) }),
         hasFilter && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
@@ -811,7 +912,7 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "col gap-y-1 p-2 items-start font-normal text-menu-text", children: [
+      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { className: "textstyle-title-sm", children: translation("filter") }),
         filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Input,
@@ -823,7 +924,7 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "row gap-x-2 items-center", children: [
+        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-row-2 items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Input,
             {
@@ -880,7 +981,7 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "row justify-end w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
           hasFilter && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SolidButton, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();