@sustaina/shared-ui 1.2.0 → 1.4.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import * as React3 from 'react';
-import React3__default, { createContext, isValidElement, useState, useEffect, useId, useContext, useRef, useCallback, useMemo, createElement } from 'react';
+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, get, set, appendErrors, useFormState } from 'react-hook-form';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx3, { clsx } from 'clsx';
@@ -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 }) {
@@ -1476,7 +1508,9 @@ function SortableRow({
                     children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose column..." })
                   }
                 ) }),
-                /* @__PURE__ */ jsx(SelectContent, { children: options.filter((i2) => i2.id === field.value || !currentColumns?.some((c) => c.id === i2.id)).sort(
+                /* @__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,
@@ -1690,16 +1724,16 @@ var GridSettingsModal = ({
               {
                 items: fields?.slice(1).map((c) => c?.fieldId),
                 strategy: verticalListSortingStrategy,
-                children: fields?.slice(1).map((col, index) => /* @__PURE__ */ jsx(
+                children: fields?.slice(1).map((col, index2) => /* @__PURE__ */ jsx(
                   SortableRow,
                   {
                     value: col?.fieldId,
                     control,
-                    name: `columns.${index + 1}.id`,
+                    name: `columns.${index2 + 1}.id`,
                     isDragging,
                     availableColumns,
                     currentColumns: fields,
-                    onRemove: () => remove(index + 1)
+                    onRemove: () => remove(index2 + 1)
                   },
                   col?.fieldId
                 ))
@@ -1768,7 +1802,7 @@ var InfoIcon = (props) => {
     }
   );
 };
-var InfoIcon_default = React3__default.memo(InfoIcon);
+var InfoIcon_default = React4__default.memo(InfoIcon);
 function TooltipProvider2({
   delayDuration = 0,
   ...props
@@ -1832,10 +1866,12 @@ var Navbar = ({
   subButtonDisable = false,
   onMainButtonClick,
   onSubButtonClick,
+  separatorDisable = false,
   searchButton
 }) => {
   const { isMobile, isTablet, isDesktop } = useScreenSize_default();
   const Icon3 = CircleHelp;
+  const shouldShowSeparator = !separatorDisable && isValidElement(searchButton);
   return /* @__PURE__ */ jsxs(
     "nav",
     {
@@ -1931,14 +1967,14 @@ var Navbar = ({
               children: subButtonText
             }
           ),
-          isValidElement(searchButton) ? /* @__PURE__ */ jsx("div", { role: "separator", className: "ml-1 w-[1px] h-10 bg-white" }) : "",
+          shouldShowSeparator && /* @__PURE__ */ jsx("div", { role: "separator", className: "ml-1 w-[1px] h-10 bg-white" }),
           isValidElement(searchButton) ? searchButton : ""
         ] })
       ]
     }
   );
 };
-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(
@@ -2473,13 +2509,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;
@@ -2488,7 +2524,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;
@@ -2497,7 +2533,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;
@@ -2584,8 +2620,8 @@ var TagsInput = ({ value = [], onChange, onClear, error }) => {
     onChange([...value, trimmed]);
     setInputValue("");
   };
-  const removeTag = (index) => {
-    const newTags = value.filter((_, i2) => i2 !== index);
+  const removeTag = (index2) => {
+    const newTags = value.filter((_, i2) => i2 !== index2);
     onChange(newTags);
   };
   const handleKeyDown = (e2) => {
@@ -2924,8 +2960,8 @@ function buildLocalizeFn(args) {
       const width = options?.width ? String(options.width) : args.defaultWidth;
       valuesArray = args.values[width] || args.values[defaultWidth];
     }
-    const index = args.argumentCallback ? args.argumentCallback(value) : value;
-    return valuesArray[index];
+    const index2 = args.argumentCallback ? args.argumentCallback(value) : value;
+    return valuesArray[index2];
   };
 }
 
@@ -3245,7 +3281,7 @@ var match = {
     defaultMatchWidth: "wide",
     parsePatterns: parseQuarterPatterns,
     defaultParseWidth: "any",
-    valueCallback: (index) => index + 1
+    valueCallback: (index2) => index2 + 1
   }),
   month: buildMatchFn({
     matchPatterns: matchMonthPatterns,
@@ -4380,15 +4416,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);
@@ -4405,9 +4441,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 }) {
@@ -4439,7 +4475,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]);
     }
@@ -4450,8 +4486,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 {
@@ -4687,7 +4723,8 @@ var AdvanceSearch = ({
   portalId,
   iconColor = "#ffffff",
   limitRows = 4,
-  onSearch
+  onSearch,
+  onClear
 }) => {
   const fieldsData = useMemo(() => fields || [], [fields]);
   const {
@@ -4730,6 +4767,8 @@ var AdvanceSearch = ({
             return { [r2.fieldName]: { startsWith: val1 } };
           case "endsWith":
             return { [r2.fieldName]: { endsWith: val1 } };
+          case "equals":
+            return { [r2.fieldName]: { equals: val1 } };
           case "notEquals":
             return { [r2.fieldName]: { not: val1 } };
           case "gt":
@@ -4756,8 +4795,12 @@ var AdvanceSearch = ({
             return { [r2.fieldName]: { hasEvery: String(val1).split(",") } };
           case "containsOnly":
             return { [r2.fieldName]: { equals: String(val1).split(",") } };
-          default:
-            return { [r2.fieldName]: val1 };
+          case "on":
+            return { [r2.fieldName]: { on: val1 } };
+          case "after":
+            return { [r2.fieldName]: { after: val1 } };
+          case "before":
+            return { [r2.fieldName]: { before: val1 } };
         }
       }).filter(Boolean)
     };
@@ -4813,7 +4856,7 @@ var AdvanceSearch = ({
               onClick: () => {
                 clearAllRow();
                 Object.keys(getValues()).forEach((k) => resetField(k));
-                onSubmit();
+                if (onClear) onClear();
               },
               children: "Clear Search"
             }
@@ -5003,6 +5046,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