@sustaina/shared-ui 1.33.2 → 1.35.0

package/dist/index.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var AccordionPrimitive = require('@radix-ui/react-accordion');
 var clsx2 = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
 var React26 = require('react');
 var lucideReact = require('lucide-react');
 var reactDom = require('react-dom');
@@ -82,8 +82,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
+var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var React26__namespace = /*#__PURE__*/_interopNamespace(React26);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
@@ -777,6 +777,120 @@ var SuiWarningIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
   }
 );
 var warning_default = SuiWarningIcon;
+var TrashIcon = ({
+  size = 16,
+  color = "currentColor",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    viewBox: "0 0 17 15",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    fill: "none",
+    className,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_336_302483)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M3.49371 2.12043C3.38318 1.44249 3.66212 0.708651 4.43068 0.529533C4.94459 0.409578 7.77168 0.42749 8.38456 0.492081C9.25207 0.583811 9.64966 1.36813 9.5125 2.12097C10.3748 2.22627 11.9484 1.85067 12.6087 2.44664C13.1053 2.89498 13.1452 3.75638 12.64 4.21232C12.2707 4.54558 12.1422 4.28179 12.0664 4.92282C11.7412 7.68938 11.6509 10.4907 11.3494 13.2605C11.2452 13.9135 10.7718 14.3401 10.0646 14.3895C7.73175 14.5534 5.1836 14.2619 2.8276 14.3873C2.09203 14.2587 1.75116 13.8364 1.64178 13.1655L0.878435 4.54558C0.710025 4.38221 0.481427 4.33281 0.310702 4.15532C-0.221151 3.60006 -0.0434807 2.66593 0.639999 2.29358C0.702502 2.25938 0.998811 2.12043 1.03411 2.12043H3.49371ZM4.30394 2.12043H8.70228C8.71964 1.8333 8.70691 1.36813 8.32321 1.30951C7.19122 1.38116 5.90586 1.20367 4.79238 1.30246C4.28831 1.34696 4.29815 1.71931 4.30394 2.12043ZM12.0415 3.0589C12.0172 3.03068 11.8812 2.9574 11.8419 2.94926L1.26329 2.93243C0.749379 2.95794 0.749379 3.72598 1.26329 3.75149H11.7429C12.1029 3.75312 12.2429 3.29338 12.0415 3.0589ZM11.2487 4.56295H1.75753L2.51508 13.1612C2.5608 13.4597 2.68754 13.5498 2.9989 13.5759C5.22817 13.762 7.7468 13.4293 10.0073 13.5759L10.3823 13.4391L11.2487 4.56295Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M4.22952 5.50209C4.41761 5.72137 4.34006 6.27067 4.36263 6.54477C4.51599 8.36961 4.73649 10.3719 4.77121 12.1892C4.78568 12.9404 3.98125 12.8953 3.90254 12.4047C3.84698 10.417 3.54836 8.42443 3.49164 6.43947C3.48586 6.23159 3.45576 5.67469 3.54894 5.52542C3.66411 5.34088 4.08426 5.33274 4.22952 5.50263V5.50209Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M9.43711 5.50146C9.55575 5.63933 9.52045 6.22879 9.51466 6.43776C9.45852 8.42272 9.15932 10.4153 9.10376 12.4029C9.02447 12.8936 8.21946 12.9381 8.23509 12.1875C8.27213 10.3681 8.48973 8.37007 8.64367 6.54306C8.67492 6.17234 8.50941 5.28598 9.18941 5.37771C9.24497 5.38531 9.40412 5.46238 9.43711 5.50092V5.50146Z",
+            fill: color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M6.83313 5.50252C6.90547 5.58611 6.90142 5.68218 6.91068 5.78314C7.10224 7.89891 6.76253 10.266 6.90837 12.4083C6.88985 12.8822 6.11551 12.8806 6.09814 12.4083L6.15312 5.52478C6.31575 5.34783 6.6734 5.31689 6.83313 5.50252Z",
+            fill: color
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_3678_200811", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "17", height: "15", fill: "white", transform: "translate(0.728516 0.726562)" }) }) })
+    ]
+  }
+);
+var trash_default = TrashIcon;
+var AuditFooter = ({
+  createdAt,
+  createdBy,
+  updatedAt,
+  updatedBy,
+  onDelete,
+  canDelete = true,
+  emptyValue = "-",
+  labels,
+  classNames,
+  formatters,
+  deleteAriaLabel = "Delete",
+  deleteIcon
+}) => {
+  const resolvedLabels = {
+    createdOn: "Created on :",
+    createdAtTime: "at Time :",
+    createdBy: "by :",
+    updatedOn: "Last Update :",
+    updatedAtTime: "at Time :",
+    updatedBy: "by :",
+    ...labels
+  };
+  const dateFormatter = formatters?.date ?? ((value) => formatISODate(value, "DD/MM/YYYY"));
+  const timeFormatter = formatters?.time ?? ((value) => formatISODate(value, "H:i"));
+  const userFormatter = formatters?.user ?? ((value) => value ?? emptyValue);
+  const resolvedDeleteIcon = deleteIcon ?? /* @__PURE__ */ jsxRuntime.jsx(trash_default, { className: "w-5 h-5" });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full h-14 mt-12 justify-between items-end px-3", classNames?.root), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-[auto_1fr_auto_1fr] gap-x-3 gap-y-1 text-[10px]",
+          classNames?.grid
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.createdOn }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: classNames?.value, children: createdAt ? dateFormatter(createdAt) : emptyValue }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.createdAtTime }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: classNames?.value, children: createdAt ? timeFormatter(createdAt) : emptyValue }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.createdBy }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("col-span-3", classNames?.value), children: userFormatter(createdBy) }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.updatedOn }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: classNames?.value, children: updatedAt ? dateFormatter(updatedAt) : emptyValue }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.updatedAtTime }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: classNames?.value, children: updatedAt ? timeFormatter(updatedAt) : emptyValue }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-bold italic text-[#3B4256]", classNames?.label), children: resolvedLabels.updatedBy }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("col-span-3", classNames?.value), children: userFormatter(updatedBy) })
+        ]
+      }
+    ),
+    onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: canDelete ? cn("w-5 h-5 cursor-pointer text-red-500", classNames?.deleteButton) : cn("w-5 h-5 text-gray-300 cursor-not-allowed", classNames?.deleteButtonDisabled),
+        onClick: canDelete ? onDelete : void 0,
+        "aria-label": deleteAriaLabel,
+        role: "button",
+        children: resolvedDeleteIcon
+      }
+    )
+  ] });
+};
 function Accordion({ ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
 }
@@ -4257,18 +4371,25 @@ var useControllableState = ({
   defaultValue,
   value
 }) => {
-  const [internalValue, setInternalValue] = React26__namespace.useState(value ?? defaultValue);
+  const isControlled = typeof value !== "undefined";
+  const [internalValue, setInternalValue] = React26__namespace.useState(() => {
+    return isControlled ? value : defaultValue;
+  });
   React26__namespace.useEffect(() => {
-    if (value !== internalValue) {
-      setInternalValue(value);
-    }
-  }, [value]);
-  const updateState = React26__namespace.useCallback((nextValue) => {
-    setInternalValue(nextValue);
-  }, []);
+    if (!isControlled) return;
+    setInternalValue(value);
+  }, [isControlled, value]);
+  const setValue = React26__namespace.useCallback(
+    (nextValue) => {
+      if (isControlled) return;
+      setInternalValue(nextValue);
+    },
+    [isControlled]
+  );
   return {
-    value: internalValue,
-    updateState
+    value: isControlled ? value : internalValue,
+    setValue,
+    isControlled
   };
 };
 var useControllableState_default = useControllableState;
@@ -5428,6 +5549,11 @@ var defaultResource = {
           description: "Unsaved changes. Do you want to leave this page?",
           confirm_text: "Leave"
         },
+        "confirm.reset_form": {
+          title: "Confirmation",
+          description: "Unsaved changes. If you continue, all changes will be lost.",
+          confirm_text: "Reset"
+        },
         "confirm.remove": {
           title: "Confirmation",
           description: "Are you sure you want to remove this item?",
@@ -5493,9 +5619,13 @@ function DialogAlert({
     onOpenChange(false);
   }, [onCancel, onOpenChange]);
   const handleConfirm = React26.useCallback(() => {
-    onConfirm?.();
+    let func = onConfirm;
+    if (variant === "success" && showCancel === false) {
+      func = onConfirm ?? onCancel;
+    }
+    func?.();
     onOpenChange(false);
-  }, [onConfirm, onOpenChange]);
+  }, [onCancel, onConfirm, onOpenChange, showCancel, variant]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog2, { open, onOpenChange: persistent ? () => {
   } : onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent2, { className: "max-w-md", showCloseButton: !persistent, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader2, { children: [
@@ -5663,6 +5793,12 @@ var DIALOG_ALERT_TEMPLATES = {
     description: "confirm.leave_page.description",
     confirmText: "confirm.leave_page.confirm_text"
   },
+  "confirm.reset_form": {
+    variant: "confirm",
+    title: "confirm.reset_form.title",
+    description: "confirm.reset_form.description",
+    confirmText: "confirm.reset_form.confirm_text"
+  },
   "confirm.remove": {
     variant: "confirm",
     title: "confirm.remove.title",
@@ -10384,10 +10520,7 @@ var Truncated = ({
       rows: lineClampLines ?? 1,
       expanded: false,
       miscDeps: [truncationClass],
-      onEllipsis: (s) => {
-        console.log("\u{1F680} ~ Truncated ~ s:", s);
-        setIsTruncated(s);
-      },
+      onEllipsis: setIsTruncated,
       children: () => normalizedChildren
     }
   ) });
@@ -10417,10 +10550,10 @@ var Truncated = ({
           {
             side: tooltipSide,
             className: cn(
-              "text-white bg-[#8B8B8B] max-w-xs sm:max-w-md wrap-break-word shadow-lg",
+              "text-white bg-sus-secondary-gray-10 max-w-xs sm:max-w-md wrap-break-word shadow-lg",
               tooltipContentClassName
             ),
-            arrowClassName: cn("bg-[#8B8B8B] fill-[#8B8B8B]", tooltipArrowClassName),
+            arrowClassName: cn("bg-sus-secondary-gray-10 fill-sus-secondary-gray-10", tooltipArrowClassName),
             ...tooltipContentRest,
             children: tooltipContent
           }
@@ -11123,40 +11256,71 @@ var ComboboxInner = ({
   notFoundContent,
   searchPlaceholder,
   showSearch,
+  open,
+  showValueWhenNoMatch,
+  onOpenChange,
+  onClear,
   ...props
 }, ref) => {
   const { getLabelField, getValueField } = useFieldNames_default({ fieldNames });
-  const [open, setOpen] = React26__namespace.useState(false);
-  const { value: selectedValue, updateState: setSelectedValue } = useControllableState_default({
+  const { value: openPopover, setValue: setOpenPopover } = useControllableState_default({
+    defaultValue: false,
+    value: open
+  });
+  const { value: selectedValue, setValue: setSelectedValue } = useControllableState_default({
     defaultValue,
     value
   });
-  const renderValue = React26__namespace.useMemo(() => {
-    if (!selectedValue) return placeholder2;
-    const selectedOptionFound = options?.find((option) => {
+  const currentSelectedOption = React26__namespace.useMemo(() => {
+    return options?.find((option) => {
       const optionValue = getValueField(option);
       return optionValue === selectedValue;
     });
-    return selectedOptionFound ? getLabelField(selectedOptionFound) : null;
-  }, [getLabelField, getValueField, options, placeholder2, selectedValue]);
+  }, [getValueField, options, selectedValue]);
+  const renderValue = React26__namespace.useMemo(() => {
+    if (!selectedValue) return placeholder2;
+    if (currentSelectedOption) {
+      return getLabelField(currentSelectedOption);
+    }
+    if (showValueWhenNoMatch) {
+      return selectedValue;
+    }
+    return null;
+  }, [currentSelectedOption, getLabelField, placeholder2, selectedValue, showValueWhenNoMatch]);
   const handleSelect = React26__namespace.useCallback(
     (selected, option) => {
       setSelectedValue(selected);
-      setOpen(false);
+      setOpenPopover(false);
       if (typeof onSelect === "function") {
         onSelect(selected, option);
       }
+      if (typeof onOpenChange === "function") {
+        onOpenChange(false);
+      }
     },
-    [onSelect, setSelectedValue]
+    [onOpenChange, onSelect, setOpenPopover, setSelectedValue]
+  );
+  const handleOpenPopover = React26__namespace.useCallback(
+    (isOpen) => {
+      if (disabled) return;
+      setOpenPopover(isOpen);
+      if (typeof onOpenChange === "function") {
+        onOpenChange(isOpen);
+      }
+    },
+    [disabled, onOpenChange, setOpenPopover]
   );
   const handleClear = React26__namespace.useCallback(
     (event) => {
       event.stopPropagation();
       setSelectedValue(void 0);
+      if (typeof onClear === "function") {
+        onClear(selectedValue, currentSelectedOption);
+      }
     },
-    [setSelectedValue]
+    [currentSelectedOption, onClear, selectedValue, setSelectedValue]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: (next) => !disabled && setOpen(next), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: openPopover, onOpenChange: handleOpenPopover, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -11164,7 +11328,7 @@ var ComboboxInner = ({
         name,
         type: "button",
         role: "combobox",
-        "aria-expanded": open,
+        "aria-expanded": openPopover,
         className: cn(
           "flex items-center justify-between gap-2 rounded-md border bg-white px-3 h-9 text-sm whitespace-nowrap shadow-xs outline-none border-input",
           "disabled:cursor-not-allowed disabled:opacity-50",
@@ -11174,7 +11338,7 @@ var ComboboxInner = ({
           "transition-all",
           className
         ),
-        "data-state": open ? "open" : "closed",
+        "data-state": openPopover ? "open" : "closed",
         disabled,
         onFocus,
         onBlur,
@@ -11237,6 +11401,65 @@ var ComboboxInner = ({
 };
 var Combobox = React26__namespace.forwardRef(ComboboxInner);
 var Combobox_default = Combobox;
+var TruncatedMouseEnterDiv = ({
+  value,
+  className,
+  tooltipProps,
+  tooltipContentProps,
+  arrowClassName
+}) => {
+  const textRef = React26.useRef(null);
+  const [isTruncated, setIsTruncated] = React26.useState(false);
+  const checkTruncation = () => {
+    if (textRef.current) {
+      const { scrollWidth, clientWidth } = textRef.current;
+      setIsTruncated(scrollWidth > clientWidth);
+    }
+  };
+  const {
+    className: tooltipContentClassName,
+    side: tooltipContentSide,
+    sideOffset: tooltipContentSideOffset,
+    ...tooltipContentRest
+  } = tooltipContentProps ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip2, { open: isTruncated, ...tooltipProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: textRef,
+        onMouseEnter: checkTruncation,
+        onMouseLeave: () => setIsTruncated(false),
+        className: cn("truncate", className),
+        children: value
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      TooltipContent2,
+      {
+        side: tooltipContentSide ?? "bottom",
+        className: cn(
+          "text-white bg-sus-secondary-gray-10 max-w-xs sm:max-w-md wrap-break-word shadow-lg",
+          tooltipContentClassName
+        ),
+        sideOffset: tooltipContentSideOffset ?? 10,
+        ...tooltipContentRest,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TooltipArrow,
+            {
+              className: cn(
+                "bg-sus-secondary-gray-10 fill-sus-secondary-gray-10 z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]",
+                arrowClassName
+              )
+            }
+          ),
+          value
+        ]
+      }
+    )
+  ] });
+};
+var truncatedMouseEnterDiv_default = TruncatedMouseEnterDiv;
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -11245,6 +11468,7 @@ exports.AccordionTrigger = AccordionTrigger;
 exports.ActionMenu = ActionMenu;
 exports.AdvanceSearch = AdvanceSearch_default;
 exports.ArrowIcon = arrow_default;
+exports.AuditFooter = AuditFooter;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.Collapsible = Collapsible;
@@ -11374,7 +11598,9 @@ exports.TooltipArrow = TooltipArrow;
 exports.TooltipContent = TooltipContent2;
 exports.TooltipProvider = TooltipProvider2;
 exports.TooltipTrigger = TooltipTrigger2;
+exports.TrashIcon = trash_default;
 exports.Truncated = truncated_default;
+exports.TruncatedMouseEnterDiv = truncatedMouseEnterDiv_default;
 exports.UI = ui_exports;
 exports.VirtualizedCommand = VirtualizedCommand_default;
 exports.booleanToSelectValue = booleanToSelectValue;