@sustaina/shared-ui 1.9.3 → 1.9.5

package/dist/index.mjs

@@ -3,9 +3,9 @@ import clsx2, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React6 from 'react';
-import React6__default, { forwardRef, useRef, useMemo, useCallback, isValidElement, useState, useEffect, createElement } from 'react';
+import React6__default, { forwardRef, useRef, useMemo, useCallback, useEffect, createElement, isValidElement, useState } from 'react';
 import { format, isValid, parseISO, isAfter, compareAsc, parse } from 'date-fns';
-import { CircleX, CircleHelp, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List as List$1, ListOrdered, Quote, CodeSquare, Link, Link2Off, Image, AlignLeft, AlignCenter, AlignRight, XIcon, ChevronRight, CheckIcon, Triangle, CalendarIcon, X, Search, ChevronUp, ChevronDown, Plus, ChevronLeft, CircleUserRound, Bug, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
+import { CircleX, CircleHelp, Undo, Redo, Bold, Italic, Underline, Strikethrough, Code, Pilcrow, Heading1, Heading2, Heading3, List as List$1, ListOrdered, Quote, CodeSquare, Link, Link2Off, Image, AlignLeft, AlignCenter, AlignRight, Bug, XIcon, ChevronRight, CheckIcon, Triangle, CalendarIcon, X, Search, ChevronUp, ChevronDown, Plus, ChevronLeft, CircleUserRound, GripVertical, Info, CircleMinus, Minus } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { useForm, FormProvider, Controller, useFormContext, useFormState, useFieldArray, useWatch } from 'react-hook-form';
@@ -14,7 +14,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { reSplitAlphaNumeric, useReactTable, getCoreRowModel, getGroupedRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, flexRender } from '@tanstack/react-table';
+import { useReactTable, getCoreRowModel, getGroupedRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, flexRender, reSplitAlphaNumeric } from '@tanstack/react-table';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
@@ -3678,7 +3678,7 @@ var StatusContentSlot = ({
     content
   ] });
 };
-var StatusContentSlot_default = StatusContentSlot;
+var StatusContentSlot_default = React6__default.memo(StatusContentSlot);
 var stateOptions = [
   "columnFilters",
   "globalFilter",
@@ -3895,6 +3895,7 @@ var DataTable = ({
   rowSelection,
   rowExpansion,
   scrollFetch,
+  activeStatusContent,
   statusContent,
   rowIdKey,
   childrenKey,
@@ -4010,6 +4011,31 @@ var DataTable = ({
     );
     return { isSomeColumnsFilterable: isSomeColumnsFilterable2, filterableColumns: mergedColumns };
   }, [centerVisibleLeafColumns, leftVisibleLeftColumns, rightVisibleLeafColumns]);
+  const autoStatusKey = useMemo(() => {
+    if (isInitialLoading) return "initialLoading";
+    if (isTableEmpty) return "emptyData";
+    if (isTableEmptyAfterFiltering) return "emptyFilteredData";
+    if (scrollFetch?.enabled && !isFiltering && !isInitialLoading) {
+      if (scrollFetch.isFetchingMore) return "fetchingMore";
+      if (scrollFetch.hasMore === false && !scrollFetch.isFetchingMore) return "noMoreData";
+    }
+    return null;
+  }, [
+    isInitialLoading,
+    isFiltering,
+    isTableEmpty,
+    isTableEmptyAfterFiltering,
+    scrollFetch?.enabled,
+    scrollFetch?.hasMore,
+    scrollFetch?.isFetchingMore
+  ]);
+  const activeStatusContentComputed = useMemo(() => {
+    if (!activeStatusContent) return autoStatusKey;
+    if (typeof activeStatusContent === "function") {
+      return activeStatusContent({ defaultComputedValue: autoStatusKey });
+    }
+    return activeStatusContent;
+  }, [activeStatusContent, autoStatusKey]);
   const fetchMoreOnScrollReached = useCallback(
     (containerRefElement) => {
       if (!scrollFetch?.enabled || !containerRefElement || scrollFetch?.isFetchingMore || !scrollFetch?.hasMore || !scrollFetch?.fetchMore) {
@@ -4058,7 +4084,7 @@ var DataTable = ({
       ),
       onScroll: (e) => fetchMoreOnScrollReached(e.currentTarget),
       children: [
-        isInitialLoading ? /* @__PURE__ */ jsx(
+        activeStatusContentComputed === "initialLoading" ? /* @__PURE__ */ jsx(
           StatusContentSlot_default,
           {
             content: statusContent?.initialLoading?.content ?? "Loading...",
@@ -4069,7 +4095,7 @@ var DataTable = ({
             },
             defaultIcon: /* @__PURE__ */ jsx(Spinner, { size: 48 })
           }
-        ) : isTableEmpty ? /* @__PURE__ */ jsx(
+        ) : activeStatusContentComputed === "emptyData" ? /* @__PURE__ */ jsx(
           StatusContentSlot_default,
           {
             content: statusContent?.emptyData?.content ?? "There's nothing here yet.",
@@ -4218,7 +4244,7 @@ var DataTable = ({
               );
             }) })
           ] }),
-          isTableEmptyAfterFiltering && /* @__PURE__ */ jsx(
+          activeStatusContentComputed === "emptyFilteredData" && /* @__PURE__ */ jsx(
             StatusContentSlot_default,
             {
               content: statusContent?.emptyFilteredData?.content ?? "No records found. Please try a different search.",
@@ -4230,7 +4256,7 @@ var DataTable = ({
               defaultIcon: /* @__PURE__ */ jsx(empty_data_default, { className: "text-[128px]" })
             }
           ),
-          scrollFetch?.enabled && !isFiltering && !isInitialLoading && scrollFetch?.isFetchingMore && /* @__PURE__ */ jsx(
+          activeStatusContentComputed === "fetchingMore" && /* @__PURE__ */ jsx(
             StatusContentSlot_default,
             {
               content: statusContent?.fetchingMore?.content ?? "Loading more...",
@@ -4240,7 +4266,7 @@ var DataTable = ({
               }
             }
           ),
-          scrollFetch?.enabled && !isFiltering && !isInitialLoading && !scrollFetch?.hasMore && !scrollFetch?.isFetchingMore && /* @__PURE__ */ jsx(
+          activeStatusContentComputed === "noMoreData" && /* @__PURE__ */ jsx(
             StatusContentSlot_default,
             {
               content: statusContent?.noMoreData?.content,
@@ -4257,7 +4283,7 @@ var DataTable = ({
     }
   );
 };
-var DataTable_default = DataTable;
+var DataTable_default = React6__default.memo(DataTable);
 function Dialog(props) {
   return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
@@ -4773,7 +4799,7 @@ var GridSettingsModal = ({
     }
   }
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-xl border-0 p-0 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col -mx-6 -mt-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -4808,7 +4834,7 @@ var GridSettingsModal = ({
       )
     ] }),
     /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "mt-6 flex flex-col justify-between", children: [
-      /* @__PURE__ */ jsx("div", { className: "px-16 my-10", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 max-h-60 overflow-y-auto pr-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "px-16 my-10", children: /* @__PURE__ */ jsxs("div", { className: "space-y-3 max-h-60 pr-4", children: [
         /* @__PURE__ */ jsx(
           SortableRow,
           {
@@ -4866,7 +4892,7 @@ var GridSettingsModal = ({
           }
         ) })
       ] }) }),
-      /* @__PURE__ */ jsx(DialogFooter, { className: "-mx-6 mt-6 px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between w-full py-4 border-t-1 border-[#B9B9B9]", children: [
+      /* @__PURE__ */ jsx(DialogFooter, { className: "-mx-6 mt-6 px-6", children: /* @__PURE__ */ jsxs("div", { className: "flex px-4 justify-between w-full", children: [
         /* @__PURE__ */ jsx(
           Button,
           {