@sustaina/shared-ui 1.3.0 → 1.4.1

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import * as React3 from 'react';
-import React3__default, { createContext, isValidElement, useState, useEffect, useId, useContext, useRef, useCallback, useMemo, createElement } from 'react';
-import { Controller, useFormContext, useForm, useFieldArray, FormProvider, get, set, appendErrors, useFormState } from 'react-hook-form';
+import * as React4 from 'react';
+import React4__default, { createContext, isValidElement, useState, useEffect, useId, useContext, useRef, useCallback, useMemo, createElement } from 'react';
+import { Controller, useFormContext, useForm, useFieldArray, FormProvider, useWatch, get, set, appendErrors, useFormState } from 'react-hook-form';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx3, { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -980,6 +980,38 @@ var DataTable = ({
   );
 };
 var DataTable_default = DataTable;
+var usePreventPageLeaveStore = create((set) => ({
+  isPreventing: false,
+  setPreventing: (value) => set({ isPreventing: value })
+}));
+var usePreventPageLeaveStore_default = usePreventPageLeaveStore;
+
+// src/components/prevent-page-leave/PreventPageLeave.tsx
+var PreventPageLeave = ({ children }) => {
+  const { isPreventing } = usePreventPageLeaveStore();
+  useEffect(() => {
+    if (!isPreventing || typeof window === "undefined") {
+      return;
+    }
+    function beforeUnload(event) {
+      event.preventDefault();
+      event.returnValue = true;
+    }
+    window.addEventListener("beforeunload", beforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", beforeUnload);
+    };
+  }, [isPreventing]);
+  return children;
+};
+var PreventPageLeave_default = PreventPageLeave;
+var usePreventPageLeave = ({ isPrevening }) => {
+  const setPreventing = usePreventPageLeaveStore_default((state) => state.setPreventing);
+  useEffect(() => {
+    setPreventing(isPrevening);
+  }, [isPrevening, setPreventing]);
+};
+var usePreventPageLeave_default = usePreventPageLeave;
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-pointer",
   {
@@ -1103,15 +1135,15 @@ var t2 = function(o3, t3, s2) {
   };
 };
 var Form = FormProvider;
-var FormFieldContext2 = React3.createContext({});
+var FormFieldContext2 = React4.createContext({});
 var FormField2 = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext2.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField2 = () => {
-  const fieldContext = React3.useContext(FormFieldContext2);
-  const itemContext = React3.useContext(FormItemContext2);
+  const fieldContext = React4.useContext(FormFieldContext2);
+  const itemContext = React4.useContext(FormItemContext2);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -1128,9 +1160,9 @@ var useFormField2 = () => {
     ...fieldState
   };
 };
-var FormItemContext2 = React3.createContext({});
+var FormItemContext2 = React4.createContext({});
 function FormItem2({ className, ...props }) {
-  const id = React3.useId();
+  const id = React4.useId();
   return /* @__PURE__ */ jsx(FormItemContext2.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) });
 }
 function FormControl({ ...props }) {
@@ -1421,7 +1453,6 @@ function TooltipContent({
 }
 function SortableRow({
   availableColumns,
-  currentColumns,
   control,
   name,
   value,
@@ -1437,88 +1468,86 @@ function SortableRow({
     transition
   };
   const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
-  const options = availableColumns.map((col) => ({
-    id: col.id,
-    label: capitalize(col.id)
-  }));
+  const currentFormColumns = useWatch({ control, name: "columns" });
   return /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, className: "flex items-center rounded-md bg-white", children: /* @__PURE__ */ jsx(
     FormField2,
     {
       control,
       name,
-      render: ({ field }) => /* @__PURE__ */ jsxs(FormItem2, { className: "flex-1", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(
-            GripVertical,
-            {
-              ...attributes,
-              ...listeners,
-              className: cn(
-                "h-5 w-5 text-[#B9B9B9] focus:outline-none cursor-grab",
-                name == "columns.0.id" && "opacity-0 pointer-events-none"
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            Select,
-            {
-              value: field.value,
-              onValueChange: field.onChange,
-              disabled: name == "columns.0.id",
-              children: [
-                /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
-                  SelectTrigger,
-                  {
-                    className: cn(
-                      "w-full border-[#DDDDDD] data-[disabled]:opacity-100 aria-invalid:border-[#BB0B0E]",
-                      name == "columns.0.id" ? "text-[#8B8B8B] bg-[#EAEAEA] cursor-not-allowed" : ""
-                    ),
-                    children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose column..." })
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(SelectContent, { children: options.filter(
-                  (i2) => i2.id === field.value || !currentColumns?.some((c, idx) => c.id === i2.id && idx !== index)
-                ).sort(
-                  (a, b) => a.id === field.value ? -1 : b.id === field.value ? 1 : 0
-                ).map((opt) => /* @__PURE__ */ jsx(
-                  SelectItem,
-                  {
-                    value: opt.id,
-                    className: cn(
-                      "focus:bg-[#e8edea]",
-                      opt.id === field.value ? "font-bold bg-[#dae5de] focus:bg-[#dae5de]" : ""
-                    ),
-                    children: opt.label
-                  },
-                  opt.id
-                )) })
-              ]
-            }
-          ),
-          name == "columns.0.id" ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Info, { className: "h-5 w-5", stroke: "white", fill: "#8B8B8B" }) }),
+      render: ({ field }) => {
+        const options = availableColumns.filter((col) => col.id === field.value || !currentFormColumns?.some((c) => c.id === col.id)).map((col) => ({ id: col.id, label: capitalize(col.id) }));
+        return /* @__PURE__ */ jsxs(FormItem2, { className: "flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(
-              TooltipContent,
+              GripVertical,
               {
-                align: "start",
-                alignOffset: 10,
-                className: "bg-[#8B8B8B] rounded-none",
-                arrowClassName: "!hidden",
-                children: /* @__PURE__ */ jsx("p", { children: "Column cannot be removed." })
+                ...attributes,
+                ...listeners,
+                className: cn(
+                  "h-5 w-5 text-[#B9B9B9] focus:outline-none cursor-grab",
+                  name == "columns.0.id" && "opacity-0 pointer-events-none"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: field.value,
+                onValueChange: field.onChange,
+                disabled: name == "columns.0.id",
+                children: [
+                  /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
+                    SelectTrigger,
+                    {
+                      className: cn(
+                        "w-full border-[#DDDDDD] data-[disabled]:opacity-100 aria-invalid:border-[#BB0B0E]",
+                        name == "columns.0.id" ? "text-[#8B8B8B] bg-[#EAEAEA] cursor-not-allowed" : ""
+                      ),
+                      children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose column..." })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: options.sort(
+                    (a, b) => a.id === field.value ? -1 : b.id === field.value ? 1 : 0
+                  ).map((opt) => /* @__PURE__ */ jsx(
+                    SelectItem,
+                    {
+                      value: opt.id,
+                      className: cn(
+                        "focus:bg-[#e8edea]",
+                        opt.id === field.value ? "font-bold bg-[#dae5de] focus:bg-[#dae5de]" : ""
+                      ),
+                      children: opt.label
+                    },
+                    opt.id
+                  )) })
+                ]
+              }
+            ),
+            name == "columns.0.id" ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Info, { className: "h-5 w-5", stroke: "white", fill: "#8B8B8B" }) }),
+              /* @__PURE__ */ jsx(
+                TooltipContent,
+                {
+                  align: "start",
+                  alignOffset: 10,
+                  className: "bg-[#8B8B8B] rounded-none",
+                  arrowClassName: "!hidden",
+                  children: /* @__PURE__ */ jsx("p", { children: "Column cannot be removed." })
+                }
+              )
+            ] }) }) : /* @__PURE__ */ jsx(
+              CircleMinus,
+              {
+                onClick: onRemove,
+                className: "h-5 w-5 cursor-pointer",
+                stroke: "white",
+                fill: "#C32A2C"
               }
             )
-          ] }) }) : /* @__PURE__ */ jsx(
-            CircleMinus,
-            {
-              onClick: onRemove,
-              className: "h-5 w-5 cursor-pointer",
-              stroke: "white",
-              fill: "#C32A2C"
-            }
-          )
-        ] }),
-        !isDragging && /* @__PURE__ */ jsx(FormMessage, { className: cn("pl-6 text-[#BB0B0E]") })
-      ] })
+          ] }),
+          !isDragging && /* @__PURE__ */ jsx(FormMessage, { className: cn("pl-6 text-[#BB0B0E]") })
+        ] });
+      }
     }
   ) });
 }
@@ -1672,8 +1701,7 @@ var GridSettingsModal = ({
             control,
             name: `columns.0.id`,
             isDragging,
-            availableColumns,
-            currentColumns: fields
+            availableColumns
           },
           fields[0]?.fieldId
         ),
@@ -1692,16 +1720,15 @@ var GridSettingsModal = ({
               {
                 items: fields?.slice(1).map((c) => c?.fieldId),
                 strategy: verticalListSortingStrategy,
-                children: fields?.slice(1).map((col, index2) => /* @__PURE__ */ jsx(
+                children: fields?.slice(1).map((col, index) => /* @__PURE__ */ jsx(
                   SortableRow,
                   {
                     value: col?.fieldId,
                     control,
-                    name: `columns.${index2 + 1}.id`,
+                    name: `columns.${index + 1}.id`,
                     isDragging,
                     availableColumns,
-                    currentColumns: fields,
-                    onRemove: () => remove(index2 + 1)
+                    onRemove: () => remove(index + 1)
                   },
                   col?.fieldId
                 ))
@@ -1770,7 +1797,7 @@ var InfoIcon = (props) => {
     }
   );
 };
-var InfoIcon_default = React3__default.memo(InfoIcon);
+var InfoIcon_default = React4__default.memo(InfoIcon);
 function TooltipProvider2({
   delayDuration = 0,
   ...props
@@ -1942,7 +1969,7 @@ var Navbar = ({
     }
   );
 };
-var navbar_default = React3__default.memo(Navbar);
+var navbar_default = React4__default.memo(Navbar);
 var ExpandCollapse = ({ title, children, portalId }) => {
   const [isOpen, setIsOpen] = useState(false);
   const Panel = /* @__PURE__ */ jsx(
@@ -2477,13 +2504,13 @@ function DatePicker({
   className,
   ...props
 }) {
-  const today = React3.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
-  const [displayed, setDisplayed] = React3.useState(
+  const today = React4.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [displayed, setDisplayed] = React4.useState(
     selectedDate ? new Date(selectedDate) : /* @__PURE__ */ new Date()
   );
   minDate = clampToDay(minDate);
   maxDate = clampToDay(maxDate);
-  const disabledSet = React3.useMemo(() => {
+  const disabledSet = React4.useMemo(() => {
     const s2 = /* @__PURE__ */ new Set();
     disabledDates?.forEach((d) => s2.add(startOfDay(d).toISOString()));
     return s2;
@@ -2492,7 +2519,7 @@ function DatePicker({
   const displayMonth = displayed.getMonth();
   const monthLabel = callbacks?.monthLabel?.(displayYear, displayMonth) ?? new Intl.DateTimeFormat(void 0, { month: "short" }).format(displayed);
   const yearLabel = callbacks?.yearLabel?.(displayYear) ?? String(displayYear);
-  const weekdays = React3.useMemo(() => {
+  const weekdays = React4.useMemo(() => {
     const labels = [];
     for (let i2 = 0; i2 < 7; i2++) {
       const idx = i2;
@@ -2501,7 +2528,7 @@ function DatePicker({
     }
     return labels;
   }, [callbacks]);
-  const grid = React3.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
+  const grid = React4.useMemo(() => buildCalendarGrid(displayed, true), [displayed]);
   const isDateDisabled = (date) => {
     const d = startOfDay(date);
     if (minDate && d < minDate) return true;
@@ -2588,8 +2615,8 @@ var TagsInput = ({ value = [], onChange, onClear, error }) => {
     onChange([...value, trimmed]);
     setInputValue("");
   };
-  const removeTag = (index2) => {
-    const newTags = value.filter((_, i2) => i2 !== index2);
+  const removeTag = (index) => {
+    const newTags = value.filter((_, i2) => i2 !== index);
     onChange(newTags);
   };
   const handleKeyDown = (e2) => {
@@ -2928,8 +2955,8 @@ function buildLocalizeFn(args) {
       const width = options?.width ? String(options.width) : args.defaultWidth;
       valuesArray = args.values[width] || args.values[defaultWidth];
     }
-    const index2 = args.argumentCallback ? args.argumentCallback(value) : value;
-    return valuesArray[index2];
+    const index = args.argumentCallback ? args.argumentCallback(value) : value;
+    return valuesArray[index];
   };
 }
 
@@ -3249,7 +3276,7 @@ var match = {
     defaultMatchWidth: "wide",
     parsePatterns: parseQuarterPatterns,
     defaultParseWidth: "any",
-    valueCallback: (index2) => index2 + 1
+    valueCallback: (index) => index + 1
   }),
   month: buildMatchFn({
     matchPatterns: matchMonthPatterns,
@@ -4384,15 +4411,15 @@ function Label4({ className, ...props }) {
   );
 }
 var Form2 = FormProvider;
-var FormFieldContext3 = React3.createContext({});
+var FormFieldContext3 = React4.createContext({});
 var FormField3 = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx(FormFieldContext3.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField3 = () => {
-  const fieldContext = React3.useContext(FormFieldContext3);
-  const itemContext = React3.useContext(FormItemContext3);
+  const fieldContext = React4.useContext(FormFieldContext3);
+  const itemContext = React4.useContext(FormItemContext3);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -4409,9 +4436,9 @@ var useFormField3 = () => {
     ...fieldState
   };
 };
-var FormItemContext3 = React3.createContext({});
+var FormItemContext3 = React4.createContext({});
 function FormItem3({ className, ...props }) {
-  const id = React3.useId();
+  const id = React4.useId();
   return /* @__PURE__ */ jsx(FormItemContext3.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { "data-slot": "form-item", className: cn2("grid gap-2", className), ...props }) });
 }
 function FormControl2({ ...props }) {
@@ -4443,7 +4470,7 @@ var AdvanceSearchRow = ({
   const { control } = form;
   const fieldSchema = fields.find((f) => f.name === row.fieldName);
   const fieldType = fieldSchema?.type ?? "text";
-  React3__default.useEffect(() => {
+  React4__default.useEffect(() => {
     if (operators && operators.length > 0 && !operators.includes(row.operator)) {
       onChangeOperator(operators[0]);
     }
@@ -4454,8 +4481,8 @@ var AdvanceSearchRow = ({
   const isLookup = fieldType === "lookup";
   const isNumber = fieldType === "number";
   const isDate2 = fieldType === "date" || fieldType === "datetime";
-  const [openDateValue1, setOpenDateValue1] = React3__default.useState(false);
-  const [openDateValue2, setOpenDateValue2] = React3__default.useState(false);
+  const [openDateValue1, setOpenDateValue1] = React4__default.useState(false);
+  const [openDateValue2, setOpenDateValue2] = React4__default.useState(false);
   const toDateFromISO = (v) => {
     if (!v) return void 0;
     try {
@@ -5014,6 +5041,6 @@ function ConfirmDialog({ dialogData, setDialog, onClose }) {
   ] }) });
 }
 
-export { AdvanceSearch_default as AdvanceSearch, Button, DataTable_default as DataTable, ConfirmDialog as Dialog, FormErrorMessage, FormField, FormFieldContext, FormItem, FormItemContext, FormLabel, GridSettingsModal_default as GridSettingsModal, HeaderCell_default as HeaderCell, navbar_default as Navbar, NumberInput, TextInput, booleanToSelectValue, buttonVariants, cn, compareAlphanumeric, getColumnIdFromTable, renderContentSlot, selectValueToBoolean, useFormField, useGridSettingsStore, useHover_default as useHover, useIntersectionObserver_default as useIntersectionObserver, useMediaQuery_default as useMediaQuery, useScreenSize_default as useScreenSize };
+export { AdvanceSearch_default as AdvanceSearch, Button, DataTable_default as DataTable, ConfirmDialog as Dialog, 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, renderContentSlot, selectValueToBoolean, 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 };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map