@helpwave/hightide 0.1.18 → 0.1.19

package/dist/components/table/Table.js

@@ -34,7 +34,7 @@ __export(Table_exports, {
   TableWithSelection: () => TableWithSelection
 });
 module.exports = __toCommonJS(Table_exports);
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/layout-and-navigation/Pagination.tsx
 var import_lucide_react = require("lucide-react");
@@ -130,6 +130,7 @@ var useTranslation = (translations, overwriteTranslation = {}) => {
 // src/localization/defaults/form.ts
 var formTranslation = {
   en: {
+    add: "Add",
     all: "All",
     apply: "Apply",
     back: "Back",
@@ -142,6 +143,7 @@ var formTranslation = {
     confirm: "Confirm",
     copy: "Copy",
     copied: "Copied",
+    create: "Create",
     decline: "Decline",
     delete: "Delete",
     discard: "Discard",
@@ -184,6 +186,7 @@ var formTranslation = {
     yes: "Yes"
   },
   de: {
+    add: "Hinzuf\xFCgen",
     all: "Alle",
     apply: "Anwenden",
     back: "Zur\xFCck",
@@ -196,6 +199,7 @@ var formTranslation = {
     confirm: "Best\xE4tigen",
     copy: "Kopieren",
     copied: "Kopiert",
+    create: "Erstellen",
     decline: "Ablehnen",
     delete: "L\xF6schen",
     discard: "Verwerfen",
@@ -517,9 +521,10 @@ var clamp = (value, min = 0, max = 1) => {
 };
 
 // src/components/layout-and-navigation/Pagination.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/components/user-action/Button.tsx
+var import_react7 = require("react");
 var import_clsx3 = __toESM(require("clsx"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ButtonColorUtil = {
@@ -545,7 +550,7 @@ var ButtonUtil = {
   paddingMapping,
   iconPaddingMapping
 };
-var SolidButton = ({
+var SolidButton = (0, import_react7.forwardRef)(function SolidButton2({
   children,
   disabled = false,
   color = "primary",
@@ -555,7 +560,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",
@@ -577,8 +582,9 @@ var SolidButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      ref,
+      onClick,
+      disabled,
       className: (0, import_clsx3.default)(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
@@ -613,13 +619,12 @@ var SolidButton = ({
       ]
     }
   );
-};
+});
 var IconButton = ({
   children,
   disabled = false,
   color = "primary",
   size = "medium",
-  onClick,
   className,
   ...restProps
 }) => {
@@ -636,8 +641,7 @@ var IconButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
-      onClick: disabled ? void 0 : onClick,
-      disabled: disabled || onClick === void 0,
+      disabled,
       className: (0, import_clsx3.default)(
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled && color !== "transparent",
@@ -665,11 +669,11 @@ var Pagination = ({
   style
 }) => {
   const translation = useTranslation([formTranslation], overwriteTranslation);
-  const [value, setValue] = (0, import_react7.useState)((pageIndex + 1).toString());
+  const [value, setValue] = (0, import_react8.useState)((pageIndex + 1).toString());
   const noPages = pageCount === 0;
   const onFirstPage = pageIndex === 0 && !noPages;
   const onLastPage = pageIndex === pageCount - 1;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (noPages) {
       setValue("0");
     } else {
@@ -679,10 +683,10 @@ var Pagination = ({
   const changePage = (page) => {
     onPageChanged(page);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx4.default)("row gap-x-1", className), style, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx4.default)("flex-row-1", className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconButton, { color: "transparent", onClick: () => changePage(0), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.ChevronFirst, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconButton, { color: "transparent", onClick: () => changePage(pageIndex - 1), disabled: onFirstPage || noPages, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.ChevronLeft, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "row min-w-56 gap-x-2 items-center justify-center mx-2 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-row-2 min-w-56 items-center justify-center mx-2 text-center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         Input,
         {
@@ -712,7 +716,7 @@ var Pagination = ({
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "span",
         {
-          className: "row flex-1 items-center justify-center select-none h-10 bg-surface text-on-surface rounded-md font-bold",
+          className: "flex-row-2 flex-1 items-center justify-center select-none h-10 bg-surface text-on-surface rounded-md font-bold",
           children: pageCount
         }
       )
@@ -762,18 +766,18 @@ var range = (endOrRange, options) => {
 var import_react_custom_scrollbars_2 = require("react-custom-scrollbars-2");
 
 // src/components/user-action/Checkbox.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_lucide_react2 = require("lucide-react");
 var import_clsx5 = __toESM(require("clsx"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var checkboxSizeMapping = {
-  small: "size-4",
+  small: "size-5",
   medium: "size-6",
   large: "size-8"
 };
 var checkboxIconSizeMapping = {
-  small: "size-3",
+  small: "size-4",
   medium: "size-5",
   large: "size-7"
 };
@@ -802,7 +806,7 @@ var Checkbox = ({
     const newValue = checked === "indeterminate" ? false : !checked;
     propagateChange(newValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx5.default)("row justify-center items-center", containerClassName), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx5.default)("group flex-row-2 items-center cursor-pointer", containerClassName), onClick: changeValue, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       CheckboxPrimitive.Root,
       {
@@ -812,10 +816,9 @@ var Checkbox = ({
         id,
         className: (0, import_clsx5.default)(usedSizeClass, `items-center border-2 rounded outline-none `, {
           "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
-          "focus:border-primary": !disabled,
+          "focus:border-primary group-hover:border-primary ": !disabled,
           "bg-surface": !disabled && !checked,
-          "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate",
-          "hover:border-primary focus:hover:border-primary": !disabled && !checked
+          "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate"
         }, className),
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(CheckboxPrimitive.Indicator, { children: [
           checked === true && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Check, { className: innerIconSize }),
@@ -823,15 +826,7 @@ var Checkbox = ({
         ] })
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      Label,
-      {
-        ...label,
-        className: (0, import_clsx5.default)("cursor-pointer", label.className),
-        htmlFor: id,
-        onClick: changeValue
-      }
-    )
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { ...label, className: (0, import_clsx5.default)(label.className), htmlFor: id })
   ] });
 };
 
@@ -839,13 +834,13 @@ var Checkbox = ({
 var import_lucide_react3 = require("lucide-react");
 
 // src/components/user-action/Menu.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_clsx6 = __toESM(require("clsx"));
 
 // src/hooks/useOutsideClick.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var useOutsideClick = (refs, handler) => {
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const listener = (event) => {
       if (event.target === null) return;
       if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
@@ -863,15 +858,15 @@ var useOutsideClick = (refs, handler) => {
 };
 
 // src/hooks/useHoverState.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 var defaultUseHoverStateProps = {
   closingDelay: 200,
   isDisabled: false
 };
 var useHoverState = (props = void 0) => {
   const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = (0, import_react10.useState)(false);
-  const [timer, setTimer] = (0, import_react10.useState)();
+  const [isHovered, setIsHovered] = (0, import_react11.useState)(false);
+  const [timer, setTimer] = (0, import_react11.useState)();
   const onMouseEnter = () => {
     if (isDisabled) {
       return;
@@ -887,14 +882,14 @@ var useHoverState = (props = void 0) => {
       setIsHovered(false);
     }, closingDelay));
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (timer) {
       return () => {
         clearTimeout(timer);
       };
     }
   });
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (timer) {
       clearTimeout(timer);
     }
@@ -917,53 +912,150 @@ 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_runtime7 = 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_react11.useRef)(null);
-  const menuRef = (0, import_react11.useRef)(null);
+  const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
+  const triggerRef = (0, import_react12.useRef)(null);
+  const menuRef = (0, import_react12.useRef)(null);
   useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const bag = { isOpen, close: () => setIsOpen(false) };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    "div",
-    {
-      className: "relative",
-      ...handlers,
-      children: [
-        trigger(() => setIsOpen(!isOpen), triggerRef),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "div",
+  const [isHidden, setIsHidden] = (0, import_react12.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_react12.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_react12.useEffect)(() => {
+    if (isOpen) {
+      setIsHidden(false);
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    trigger(bag, triggerRef),
+    (0, import_react_dom.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        ref: menuRef,
+        onClick: (e) => e.stopPropagation(),
+        className: (0, import_clsx6.default)(
+          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg z-10",
           {
-            ref: menuRef,
-            onClick: (e) => e.stopPropagation(),
-            className: (0, import_clsx6.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/components/table/TableFilterButton.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var defaultTableFilterTranslation = {
   en: {
@@ -989,16 +1081,16 @@ var TableFilterButton = ({
 }) => {
   const translation = useTranslation([formTranslation, defaultTableFilterTranslation]);
   const columnFilterValue = column.getFilterValue();
-  const [filterValue, setFilterValue] = (0, import_react12.useState)(columnFilterValue);
+  const [filterValue, setFilterValue] = (0, import_react13.useState)(columnFilterValue);
   const hasFilter = !!filterValue;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     setFilterValue(columnFilterValue);
   }, [columnFilterValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Menu,
     {
-      trigger: (onClick, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconButton, { color: "neutral", size: "tiny", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.FilterIcon, {}) }),
+      trigger: ({ toggleOpen }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconButton, { color: "neutral", size: "tiny", onClick: toggleOpen, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.FilterIcon, {}) }),
         hasFilter && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "div",
           {
@@ -1007,7 +1099,7 @@ var TableFilterButton = ({
           }
         )
       ] }),
-      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "col gap-y-1 p-2 items-start font-normal text-menu-text", children: [
+      children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-col-1 p-2 items-start font-normal text-menu-text", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { className: "textstyle-title-sm", children: translation("filter") }),
         filterType === "text" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Input,
@@ -1019,7 +1111,7 @@ var TableFilterButton = ({
             className: "h-10"
           }
         ),
-        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "row gap-x-2 items-center", children: [
+        filterType === "range" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-row-2 items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             Input,
             {
@@ -1076,7 +1168,7 @@ var TableFilterButton = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "row justify-end w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-row-2 justify-end w-full", children: [
           hasFilter && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SolidButton, { color: "negative", size: "small", onClick: () => {
             column.setFilterValue(void 0);
             close();
@@ -1146,9 +1238,9 @@ var TableFilters = {
 };
 
 // src/hooks/useResizeCallbackWrapper.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 var useResizeCallbackWrapper = (callback) => {
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     window.addEventListener("resize", callback);
     return () => {
       window.removeEventListener("resize", callback);
@@ -1180,22 +1272,22 @@ var Table = ({
   columns,
   ...tableOptions
 }) => {
-  const ref = (0, import_react14.useRef)(null);
-  const tableRef = (0, import_react14.useRef)(null);
-  const [columnSizing, setColumnSizing] = (0, import_react14.useState)(columns.reduce((previousValue, currentValue) => {
+  const ref = (0, import_react15.useRef)(null);
+  const tableRef = (0, import_react15.useRef)(null);
+  const [columnSizing, setColumnSizing] = (0, import_react15.useState)(columns.reduce((previousValue, currentValue) => {
     return {
       ...previousValue,
       [currentValue.id]: currentValue.minSize ?? defaultColumn.minSize
     };
   }, {}));
-  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react14.useState)();
-  const [pagination, setPagination] = (0, import_react14.useState)({
+  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react15.useState)();
+  const [pagination, setPagination] = (0, import_react15.useState)({
     pageSize: 10,
     pageIndex: 0,
     ...initialState?.pagination
   });
-  const [columnFilters, setColumnFilters] = (0, import_react14.useState)(initialState?.columnFilters);
-  const computedColumnMinWidths = (0, import_react14.useMemo)(() => {
+  const [columnFilters, setColumnFilters] = (0, import_react15.useState)(initialState?.columnFilters);
+  const computedColumnMinWidths = (0, import_react15.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -1204,7 +1296,7 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const computedColumnMaxWidths = (0, import_react14.useMemo)(() => {
+  const computedColumnMaxWidths = (0, import_react15.useMemo)(() => {
     return columns.reduce((previousValue, column) => {
       return {
         ...previousValue,
@@ -1212,12 +1304,12 @@ var Table = ({
       };
     }, {});
   }, [columns, defaultColumn]);
-  const tableMinWidth = (0, import_react14.useMemo)(() => {
+  const tableMinWidth = (0, import_react15.useMemo)(() => {
     return columns.reduce((sum, column) => {
       return sum + computedColumnMinWidths[column.id];
     }, 0);
   }, [columns, computedColumnMinWidths]);
-  const updateColumnSizes = (0, import_react14.useMemo)(() => {
+  const updateColumnSizes = (0, import_react15.useMemo)(() => {
     return (previous) => {
       const updateSizing = {
         ...columnSizing,
@@ -1334,18 +1426,18 @@ var Table = ({
     columnResizeMode: "onChange",
     ...tableOptions
   });
-  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react14.useState)(false);
-  (0, import_react14.useEffect)(() => {
+  const [hasInitializedSizing, setHasInitializedSizing] = (0, import_react15.useState)(false);
+  (0, import_react15.useEffect)(() => {
     if (!hasInitializedSizing && ref.current) {
       setHasInitializedSizing(true);
       table.setColumnSizing(updateColumnSizes(columnSizing));
     }
   }, [columnSizing, hasInitializedSizing]);
-  useResizeCallbackWrapper((0, import_react14.useCallback)(() => {
+  useResizeCallbackWrapper((0, import_react15.useCallback)(() => {
     table.setColumnSizing(updateColumnSizes);
   }, [updateColumnSizes]));
   const pageCount = table.getPageCount();
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const totalPages = pageCount;
     if (totalPages === 0) {
       if (pagination.pageIndex !== 0) {
@@ -1361,103 +1453,111 @@ var Table = ({
       }));
     }
   }, [data, pageCount, pagination.pageSize, pagination.pageIndex]);
-  const columnSizeVars = (0, import_react14.useMemo)(() => {
+  const columnSizeVars = (0, import_react15.useMemo)(() => {
     const headers = table.getFlatHeaders();
     const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
-      colSizes[`--header-${header.id}-size`] = header.getSize();
-      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+      colSizes[`--header-${header.id}-size`] = Math.floor(header.getSize());
+      colSizes[`--col-${header.column.id}-size`] = Math.floor(header.column.getSize());
     }
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className: (0, import_clsx10.default)("col gap-y-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_custom_scrollbars_2.Scrollbars, { autoHeight: true, autoHeightMax: tableRef.current?.offsetHeight, autoHide: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-      "table",
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref, className: (0, import_clsx10.default)("flex-col-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_react_custom_scrollbars_2.Scrollbars,
       {
-        ref: tableRef,
-        className: (0, import_clsx10.default)(tableClassName),
-        style: {
-          ...columnSizeVars,
-          width: Math.max(table.getTotalSize(), ref.current?.offsetWidth ?? table.getTotalSize())
-        },
-        children: [
-          table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-            "col",
-            {
-              style: {
-                width: `calc(var(--header-${header?.id}-size) * 1px)`,
-                minWidth: header.column.columnDef.minSize,
-                maxWidth: header.column.columnDef.maxSize
-              }
+        autoHeight: true,
+        autoHeightMax: tableRef.current?.offsetHeight + 2,
+        autoHide: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "table",
+          {
+            ref: tableRef,
+            className: (0, import_clsx10.default)(tableClassName),
+            style: {
+              ...columnSizeVars,
+              width: Math.floor(Math.max(table.getTotalSize() - columns.length, ref.current?.offsetWidth ?? table.getTotalSize()))
             },
-            header.id
-          )) }, headerGroup.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-              "th",
-              {
-                colSpan: header.colSpan,
-                className: (0, import_clsx10.default)("relative group", header.column.columnDef.meta?.className),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "row w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "row gap-x-1 items-center", children: [
-                    header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                      TableSortButton,
-                      {
-                        sortDirection: header.column.getIsSorted(),
-                        onClick: () => header.column.toggleSorting()
-                      }
-                    ),
-                    header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                      TableFilterButton,
-                      {
-                        column: header.column,
-                        filterType: header.column.columnDef.meta.filterType
-                      }
-                    ) : null,
-                    (0, import_react_table.flexRender)(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )
-                  ] }) }),
-                  header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                    "div",
-                    {
-                      onMouseDown: header.getResizeHandler(),
-                      onTouchStart: header.getResizeHandler(),
-                      onDoubleClick: () => {
-                        header.column.resetSize();
-                      },
-                      className: "table-resize-indicator w-2 rounded bg-primary cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 transition-opacity",
-                      style: {
-                        opacity: !columnSizingInfo?.columnSizingStart ? void 0 : columnSizingInfo?.columnSizingStart?.findIndex(([id, _]) => id === header.column.id) !== -1 ? 1 : columnSizingInfo?.columnSizingStart?.length !== 0 ? 0 : void 0
-                      }
-                    }
-                  )
-                ]
-              },
-              header.id
-            );
-          }) }, headerGroup.id)) }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tbody", { children: [
-            table.getRowModel().rows.map((row) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { children: (0, import_react_table.flexRender)(
-                  cell.column.columnDef.cell,
-                  cell.getContext()
-                ) }, cell.id);
-              }) }, row.id);
-            }),
-            range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: columns.map((column) => {
-                return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FillerRowElement, {}) }, column.id);
-              }) }, "filler-row-" + index);
-            })
-          ] })
-        ]
+            children: [
+              table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("colgroup", { children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "col",
+                {
+                  style: {
+                    width: `calc(var(--header-${header?.id}-size) * 1px)`,
+                    minWidth: header.column.columnDef.minSize,
+                    maxWidth: header.column.columnDef.maxSize
+                  }
+                },
+                header.id
+              )) }, headerGroup.id)),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: table.options.meta?.headerRowClassName, children: headerGroup.headers.map((header) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  "th",
+                  {
+                    colSpan: header.colSpan,
+                    className: (0, import_clsx10.default)("relative group", header.column.columnDef.meta?.className),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-row-2 w-full", children: header.isPlaceholder ? null : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                        header.column.getCanSort() && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          TableSortButton,
+                          {
+                            sortDirection: header.column.getIsSorted(),
+                            onClick: () => header.column.toggleSorting()
+                          }
+                        ),
+                        header.column.getCanFilter() && header.column.columnDef.meta?.filterType ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          TableFilterButton,
+                          {
+                            column: header.column,
+                            filterType: header.column.columnDef.meta.filterType
+                          }
+                        ) : null,
+                        (0, import_react_table.flexRender)(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )
+                      ] }) }),
+                      header.column.getCanResize() && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "div",
+                        {
+                          onMouseDown: header.getResizeHandler(),
+                          onTouchStart: header.getResizeHandler(),
+                          onDoubleClick: () => {
+                            header.column.resetSize();
+                          },
+                          className: "table-resize-indicator w-2 rounded bg-primary cursor-col-resize select-none touch-none opacity-0 group-hover:opacity-100 transition-opacity",
+                          style: {
+                            opacity: !columnSizingInfo?.columnSizingStart ? void 0 : columnSizingInfo?.columnSizingStart?.findIndex(([id, _]) => id === header.column.id) !== -1 ? 1 : columnSizingInfo?.columnSizingStart?.length !== 0 ? 0 : void 0
+                          }
+                        }
+                      )
+                    ]
+                  },
+                  header.id
+                );
+              }) }, headerGroup.id)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tbody", { children: [
+                table.getRowModel().rows.map((row) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { onClick: () => onRowClick(row, table), className: table.options.meta?.bodyRowClassName, children: row.getVisibleCells().map((cell) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { children: (0, import_react_table.flexRender)(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    ) }, cell.id);
+                  }) }, row.id);
+                }),
+                range(table.getState().pagination.pageSize - table.getRowModel().rows.length, { allowEmptyRange: true }).map((row, index) => {
+                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: columns.map((column) => {
+                    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { children: fillerRow ? fillerRow(column.id, table) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FillerRowElement, {}) }, column.id);
+                  }) }, "filler-row-" + index);
+                })
+              ] })
+            ]
+          }
+        )
       }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "row justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "flex-row-2 justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Pagination,
       {
         pageIndex: table.getState().pagination.pageIndex,
@@ -1468,8 +1568,8 @@ var Table = ({
   ] });
 };
 var TableUncontrolled = ({ data, ...props }) => {
-  const [usedDate, setUsedData] = (0, import_react14.useState)(data);
-  (0, import_react14.useEffect)(() => {
+  const [usedDate, setUsedData] = (0, import_react15.useState)(data);
+  (0, import_react15.useEffect)(() => {
     setUsedData(data);
   }, [data]);
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -1491,7 +1591,7 @@ var TableWithSelection = ({
   meta,
   ...props
 }) => {
-  const columnsWithSelection = (0, import_react14.useMemo)(() => {
+  const columnsWithSelection = (0, import_react15.useMemo)(() => {
     return [
       {
         id: selectionRowId,