@sustaina/shared-ui 1.6.0 → 1.6.2

package/dist/index.mjs

@@ -16,6 +16,7 @@ import { CSS } from '@dnd-kit/utilities';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { restrictToParentElement, restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { z } from 'zod';
 import { createPortal } from 'react-dom';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -130,6 +131,15 @@ function isDefined(value) {
 function isEmptyObject(value) {
   return !!value && Object.keys(value).length === 0 && value.constructor === Object;
 }
+function debounce(fn, delay = 150) {
+  let timeout = null;
+  return (...args) => {
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+}
 
 // src/utils/filters.ts
 function stripNullishObject(value) {
@@ -356,6 +366,36 @@ var useScreenSize = (breakpoints) => {
   return { isMobile, isTablet, isDesktop };
 };
 var useScreenSize_default = useScreenSize;
+var useTruncated = ({
+  elementRef,
+  onChange,
+  resizeDetectDelay = 150
+}) => {
+  const [isTruncated, setIsTruncated] = useState(false);
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const checkTruncate = debounce(() => {
+      const truncated = element.scrollWidth > element.clientWidth;
+      setIsTruncated((prev) => {
+        if (prev !== truncated) {
+          onChange?.(truncated);
+        }
+        return truncated;
+      });
+    }, resizeDetectDelay);
+    checkTruncate();
+    const observer = new ResizeObserver(checkTruncate);
+    observer.observe(element);
+    window.addEventListener("resize", checkTruncate);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", checkTruncate);
+    };
+  }, [elementRef, onChange, resizeDetectDelay]);
+  return isTruncated;
+};
+var useTruncated_default = useTruncated;
 var HeaderCell = ({ rootClassName, labelClassName, context, label, sorterProps }) => {
   const { ref, hovering } = useHover_default();
   const showSorter = sorterProps?.show ?? context.column.getCanSort();
@@ -829,15 +869,33 @@ var DataTable = ({
   }, [centerVisibleLeafColumns, leftVisibleLeftColumns, rightVisibleLeafColumns]);
   const fetchMoreOnScrollReached = useCallback(
     (containerRefElement) => {
-      if (!scrollFetch?.enabled) {
+      if (!scrollFetch?.enabled || !containerRefElement || scrollFetch?.isFetchingMore || !scrollFetch?.hasMore || !scrollFetch?.fetchMore) {
         return;
       }
-      if (containerRefElement) {
-        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
-        const threshold = 1.5;
-        if (scrollHeight - scrollTop - clientHeight < clientHeight * threshold && !scrollFetch?.isFetchingMore && scrollFetch?.hasMore && scrollFetch?.fetchMore) {
-          scrollFetch.fetchMore();
-        }
+      const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+      const scrollableHeight = scrollHeight - clientHeight;
+      const distanceToBottom = scrollHeight - clientHeight - scrollTop;
+      const ratioToBottom = scrollableHeight > 0 ? scrollTop / scrollableHeight : 1;
+      const info = {
+        scrollTop,
+        scrollHeight,
+        clientHeight,
+        scrollableHeight,
+        distanceToBottom,
+        ratioToBottom,
+        isTopReached: scrollTop === 0,
+        isBottomReached: distanceToBottom <= 0
+      };
+      let shouldTrigger = false;
+      if (typeof scrollFetch.scrollThreshold === "number") {
+        shouldTrigger = info.ratioToBottom >= scrollFetch.scrollThreshold;
+      } else if (typeof scrollFetch.scrollThreshold === "function") {
+        shouldTrigger = scrollFetch.scrollThreshold(info);
+      } else {
+        shouldTrigger = info.ratioToBottom >= 0.7;
+      }
+      if (shouldTrigger) {
+        scrollFetch.fetchMore();
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1374,6 +1432,7 @@ function SelectContent({
 function SelectItem({
   className,
   children,
+  hideCheckIcon,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(
@@ -1386,6 +1445,7 @@ function SelectItem({
       ),
       ...props,
       children: [
+        !hideCheckIcon && //
         /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
         /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
       ]
@@ -1525,6 +1585,7 @@ function SortableRow({
                     SelectItem,
                     {
                       value: opt.id,
+                      hideCheckIcon: true,
                       className: cn(
                         "focus:bg-[#e8edea]",
                         opt.id === field.value ? "font-bold bg-[#dae5de] focus:bg-[#dae5de]" : ""
@@ -1718,11 +1779,12 @@ var GridSettingsModal = ({
           },
           fields[0]?.fieldId
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsx(
           DndContext,
           {
             sensors,
             collisionDetection: closestCenter,
+            modifiers: [restrictToParentElement, restrictToVerticalAxis],
             onDragStart: () => setIsDragging(true),
             onDragEnd: (event) => {
               setIsDragging(false);
@@ -1748,7 +1810,7 @@ var GridSettingsModal = ({
               }
             )
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx("div", { className: "px-6", children: /* @__PURE__ */ jsxs(
           Button2,
           {
@@ -5072,6 +5134,6 @@ function variantClass(variant) {
   }
 }
 
-export { AdvanceSearch_default as AdvanceSearch, Button, DataTable_default as DataTable, DialogAlert, FormErrorMessage, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, navbar_default as Navbar, NumberInput, PreventPageLeave_default as PreventPageLeave, TextInput, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, getColumnIdFromTable, isDefined, isEmptyObject, renderContentSlot, selectValueToBoolean, stripNullishObject, useFormField, useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize };
+export { AdvanceSearch_default as AdvanceSearch, Button, DataTable_default as DataTable, DialogAlert, FormErrorMessage, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, navbar_default as Navbar, NumberInput, PreventPageLeave_default as PreventPageLeave, TextInput, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, debounce, getColumnIdFromTable, isDefined, isEmptyObject, renderContentSlot, selectValueToBoolean, stripNullishObject, useFormField, useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, usePreventPageLeave_default as usePreventPageLeave, usePreventPageLeaveStore_default as usePreventPageLeaveStore, useScreenSize_default as useScreenSize, useTruncated_default as useTruncated };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map