@sustaina/shared-ui 1.4.0 → 1.4.1

package/dist/index.mjs

@@ -1,6 +1,6 @@
 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 { 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';
@@ -1453,7 +1453,6 @@ function TooltipContent({
 }
 function SortableRow({
   availableColumns,
-  currentColumns,
   control,
   name,
   value,
@@ -1469,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]") })
+        ] });
+      }
     }
   ) });
 }
@@ -1704,8 +1701,7 @@ var GridSettingsModal = ({
             control,
             name: `columns.0.id`,
             isDragging,
-            availableColumns,
-            currentColumns: fields
+            availableColumns
           },
           fields[0]?.fieldId
         ),
@@ -1724,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
                 ))
@@ -2620,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) => {
@@ -2960,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];
   };
 }
 
@@ -3281,7 +3276,7 @@ var match = {
     defaultMatchWidth: "wide",
     parsePatterns: parseQuarterPatterns,
     defaultParseWidth: "any",
-    valueCallback: (index2) => index2 + 1
+    valueCallback: (index) => index + 1
   }),
   month: buildMatchFn({
     matchPatterns: matchMonthPatterns,