@sustaina/shared-ui 1.14.0 → 1.16.0

package/dist/index.js

@@ -214,6 +214,45 @@ function stripNullishObject(value) {
     return {};
   }
 }
+
+// src/utils/date.ts
+var pad = (num) => String(num).padStart(2, "0");
+function formatISODate(isoDate, format5 = "d/m/Y H:i") {
+  const date = new Date(isoDate);
+  if (isNaN(date.getTime())) {
+    return "Invalid Date";
+  }
+  const parts = {
+    d: pad(date.getDate()),
+    m: pad(date.getMonth() + 1),
+    Y: String(date.getFullYear()),
+    H: pad(date.getHours()),
+    i: pad(date.getMinutes()),
+    s: pad(date.getSeconds())
+  };
+  const tokenMap = {
+    // Day
+    d: "d",
+    DD: "d",
+    // Month
+    m: "m",
+    MM: "m",
+    // Year
+    Y: "Y",
+    // 'Y' and 'YYYY' will both map to the 4-digit year
+    YYYY: "Y",
+    // Hour
+    H: "H",
+    // Minute
+    i: "i",
+    // Second
+    s: "s"
+  };
+  return format5.replace(/YYYY|Y|MM|m|DD|d|H|i|s/g, (match) => {
+    const partKey = tokenMap[match];
+    return partKey ? parts[partKey] : match;
+  });
+}
 function cn(...args) {
   return tailwindMerge.twMerge(clsx2.clsx(args));
 }
@@ -848,7 +887,7 @@ function SelectTrigger({
       "data-slot": "select-trigger",
       "data-size": size,
       className: cn(
-        "border-input data-[placeholder]:text-gray-00 [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[state=open]:border-ring data-[state=open]:[&_svg]:text-foreground",
+        "border-input data-placeholder:text-gray-00 [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[state=open]:border-ring data-[state=open]:[&_svg]:text-foreground",
         className
       ),
       ...props,
@@ -870,7 +909,7 @@ function SelectContent({
     {
       "data-slot": "select-content",
       className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -883,7 +922,7 @@ function SelectContent({
           {
             className: cn(
               "m-1",
-              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
             ),
             children
           }
@@ -913,7 +952,7 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn(
-        "hover:bg-[#EAF5EE] hover:text-[#379A2A] [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 ",
+        "hover:bg-[#EAF5EE] hover:text-[#379A2A] [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 ",
         className
       ),
       ...props,
@@ -1806,7 +1845,7 @@ var DatePicker2 = ({
   value,
   onChange,
   onValueChange,
-  placeholder: placeholder3 = "DD/MM/YYYY",
+  placeholder: placeholder2 = "DD/MM/YYYY",
   allowClear = true,
   displayFormatter,
   valueFormatter,
@@ -1835,7 +1874,7 @@ var DatePicker2 = ({
     const parsed = parser(value);
     return parsed && dateFns.isValid(parsed) ? parsed : void 0;
   }, [parser, value]);
-  const buttonLabel = parsedValue ? labelFormatter(parsedValue) : placeholder3;
+  const buttonLabel = parsedValue ? labelFormatter(parsedValue) : placeholder2;
   const buttonAriaLabel = ariaLabel ?? (parsedValue ? `Change date, current selection ${labelFormatter(parsedValue)}` : "Open date picker");
   const shouldShowClear = allowClear && !disabled && !!parsedValue;
   const handleClose = React4__namespace.default.useCallback(() => setOpen(false), []);
@@ -1909,8 +1948,15 @@ var DatePicker2 = ({
     )
   ] }) });
 };
-var placeholder = "DD/MM/YYYY";
-var ConditionDateInput = ({ row, control, onClear }) => {
+
+// src/components/advanceSearch/components/constants/index.ts
+var fallbackShortDateFormat = "DD/MM/YYYY";
+var ConditionDateInput = ({
+  row,
+  control,
+  onClear,
+  shortDateFormat = fallbackShortDateFormat
+}) => {
   const isBetween = row.operator === "between";
   const buildAriaLabel = (isEnd) => {
     if (isEnd) return "Select end date";
@@ -1942,10 +1988,11 @@ var ConditionDateInput = ({ row, control, onClear }) => {
               ...field,
               value: field.value || void 0,
               onValueChange: handleValueChange,
-              placeholder,
+              placeholder: shortDateFormat,
               ariaLabel: buildAriaLabel(options?.isEnd),
               clearAriaLabel: buildClearLabel(options?.isEnd),
               invalid: Boolean(fieldState.error),
+              displayFormatter: (d) => formatISODate(d, shortDateFormat),
               wrapperClassName: "min-w-0"
             }
           ) }),
@@ -2229,7 +2276,7 @@ var MonthPicker2 = ({
   value,
   onChange,
   onValueChange,
-  placeholder: placeholder3 = "MM/YYYY",
+  placeholder: placeholder2 = "MM/YYYY",
   allowClear = true,
   displayFormatter,
   valueFormatter,
@@ -2261,7 +2308,7 @@ var MonthPicker2 = ({
     }
     return void 0;
   }, [parser, value]);
-  const buttonLabel = parsedValue ? labelFormatter(parsedValue) : placeholder3;
+  const buttonLabel = parsedValue ? labelFormatter(parsedValue) : placeholder2;
   const buttonAriaLabel = ariaLabel ?? (parsedValue ? `Change month, current selection ${labelFormatter(parsedValue)}` : "Open month picker");
   const shouldShowClear = allowClear && !disabled && !!parsedValue;
   const handleClose = React4__namespace.default.useCallback(() => setOpen(false), []);
@@ -2336,7 +2383,7 @@ var MonthPicker2 = ({
     )
   ] }) });
 };
-var placeholder2 = "MM/YYYY";
+var placeholder = "MM/YYYY";
 var ConditionMonthInput = ({ row, control, onClear }) => {
   const isBetween = row.operator === "between";
   const buildAriaLabel = (isEnd) => {
@@ -2370,7 +2417,7 @@ var ConditionMonthInput = ({ row, control, onClear }) => {
               ...field,
               value,
               onValueChange: handleValueChange,
-              placeholder: placeholder2,
+              placeholder,
               ariaLabel: buildAriaLabel(options?.isEnd),
               clearAriaLabel: buildClearLabel(options?.isEnd),
               displayFormatter: (month) => dateFns.format(month, "MM/yyyy"),
@@ -2482,7 +2529,7 @@ var LookupSelect = ({
   onChange,
   onClear,
   error,
-  placeholder: placeholder3,
+  placeholder: placeholder2,
   maxTags = 10,
   fetchSuggestions,
   suggestionDebounce = 250,
@@ -2656,7 +2703,7 @@ var LookupSelect = ({
       window.removeEventListener("scroll", handleReposition, true);
     };
   }, [dropdownPortalElement, isDropdownOpen, updateDropdownPosition]);
-  const resolvedPlaceholder = placeholder3 ?? "Select";
+  const resolvedPlaceholder = placeholder2 ?? "Select";
   const showDropdown = isDropdownOpen && !fetchError;
   const dropdownContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-sm text-inherit", children: loadingMessage }) : suggestions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center px-3 py-4 text-sm text-inherit text-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(not_found_default, { className: "w-full max-w-[80px] h-auto" }),
@@ -2849,7 +2896,13 @@ var ConditionJSONInput = ({
     }
   }
 );
-var ConditionValue = ({ row, fields, onClearValue, dropdownPortalId }) => {
+var ConditionValue = ({
+  row,
+  fields,
+  onClearValue,
+  dropdownPortalId,
+  shortDateFormat
+}) => {
   const { control } = reactHookForm.useFormContext();
   const fieldSchema = fields.find((f) => f.name === row.fieldName);
   const fieldType = fieldSchema?.type ?? "text";
@@ -2858,7 +2911,15 @@ var ConditionValue = ({ row, fields, onClearValue, dropdownPortalId }) => {
       return /* @__PURE__ */ jsxRuntime.jsx(ConditionNumberInput, { row, control, onClear: onClearValue });
     case "date":
     case "datetime":
-      return /* @__PURE__ */ jsxRuntime.jsx(ConditionDateInput, { row, control, onClear: onClearValue });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ConditionDateInput,
+        {
+          row,
+          control,
+          onClear: onClearValue,
+          shortDateFormat
+        }
+      );
     case "datemonth":
       return /* @__PURE__ */ jsxRuntime.jsx(ConditionMonthInput, { row, control, onClear: onClearValue });
     case "dropdown":
@@ -2937,7 +2998,8 @@ var AdvanceSearchRow = ({
   onRemove,
   onClearValue,
   disableAdd,
-  dropdownPortalId
+  dropdownPortalId,
+  shortDateFormat
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 rounded-lg bg-white md:grid-cols-[minmax(150px,0.85fr)_minmax(140px,0.75fr)_minmax(260px,1fr)_auto] md:items-start", children: [
     /* @__PURE__ */ jsxRuntime.jsx(FieldSelect, { row, fieldOptions, onChangeField }),
@@ -2956,7 +3018,8 @@ var AdvanceSearchRow = ({
         row,
         fields,
         onClearValue,
-        dropdownPortalId
+        dropdownPortalId,
+        shortDateFormat
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full", children: /* @__PURE__ */ jsxRuntime.jsx(AddRemoveButtons, { isFirst, onAdd, onRemove, disableAdd }) })
@@ -3378,7 +3441,8 @@ var AdvanceSearch = ({
   iconColor = "#ffffff",
   limitRows = 4,
   onSearch,
-  onClear
+  onClear,
+  shortDateFormat
 }) => {
   const fieldsData = React4.useMemo(() => {
     if (fields.length === 0) throw new Error("fields cannot be an empty array");
@@ -3508,6 +3572,7 @@ var AdvanceSearch = ({
           AdvanceSearchRow,
           {
             row,
+            shortDateFormat,
             isFirst: idx === 0,
             fields: fieldsData,
             fieldOptions,
@@ -5710,6 +5775,233 @@ var useGridSettingsStore = zustand.create(
   })
 );
 var useGridSettingsStore_default = useGridSettingsStore;
+function LoadingOverlay({
+  className,
+  fullscreen = true,
+  spinnerClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "loading-overlay",
+      className: cn(
+        fullscreen ? "fixed z-100" : "absolute z-10",
+        "inset-0 flex items-center justify-center transition-opacity duration-300",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: cn("size-50", spinnerClassName) })
+    }
+  );
+}
+var DEVICE_SIZES = [320, 420, 640, 768, 1024, 1280, 1536, 1920];
+var IMAGE_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
+var defaultLoader = ({ src }) => src;
+function toNumber(value) {
+  if (typeof value === "number") {
+    return Number.isFinite(value) ? value : void 0;
+  }
+  if (typeof value === "string") {
+    const parsed = parseInt(value, 10);
+    return Number.isFinite(parsed) ? parsed : void 0;
+  }
+  return void 0;
+}
+function formatDimension(value) {
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+}
+function matchClosestSize(target) {
+  for (const size of IMAGE_SIZES) {
+    if (size >= target) {
+      return size;
+    }
+  }
+  return DEVICE_SIZES[DEVICE_SIZES.length - 1];
+}
+function getCandidateWidths({
+  width,
+  sizes,
+  fill
+}) {
+  if (fill || sizes) {
+    return DEVICE_SIZES;
+  }
+  if (typeof width === "number" && width > 0) {
+    const targets = /* @__PURE__ */ new Set([width, width * 2]);
+    return Array.from(targets).map((target) => matchClosestSize(target)).sort((a, b) => a - b);
+  }
+  return DEVICE_SIZES;
+}
+var Image2 = React4__namespace.forwardRef(function Image3({
+  src,
+  alt,
+  width,
+  height,
+  fill = false,
+  sizes,
+  quality = 75,
+  priority = false,
+  placeholder: placeholder2 = "empty",
+  blurDataURL,
+  loader = defaultLoader,
+  unoptimized = false,
+  wrapperClassName,
+  className,
+  objectFit,
+  objectPosition,
+  onLoadingComplete,
+  style,
+  ...imgProps
+}, ref) {
+  const {
+    loading: loadingProp,
+    fetchPriority: fetchPriorityProp,
+    decoding: decodingProp,
+    onLoad: onLoadProp,
+    ...restImgProps
+  } = imgProps;
+  const widthNumber = toNumber(width);
+  const heightNumber = toNumber(height);
+  React4__namespace.useEffect(() => {
+    if (!fill && (!widthNumber || !heightNumber)) {
+      console.warn(
+        "[Image] When `fill` is false you should provide both `width` and `height` to prevent layout shifts."
+      );
+    }
+  }, [fill, heightNumber, widthNumber]);
+  const candidateWidths = React4__namespace.useMemo(
+    () => getCandidateWidths({ width: widthNumber, sizes, fill }),
+    [fill, sizes, widthNumber]
+  );
+  const largestWidth = candidateWidths[candidateWidths.length - 1] ?? widthNumber ?? DEVICE_SIZES[DEVICE_SIZES.length - 1];
+  const computedSrc = React4__namespace.useMemo(() => {
+    if (unoptimized) {
+      return src;
+    }
+    return loader({ src, width: largestWidth, quality });
+  }, [largestWidth, loader, quality, src, unoptimized]);
+  const computedSrcSet = React4__namespace.useMemo(() => {
+    if (unoptimized) {
+      return void 0;
+    }
+    return candidateWidths.map((currentWidth) => `${loader({ src, width: currentWidth, quality })} ${currentWidth}w`).join(", ");
+  }, [candidateWidths, loader, quality, src, unoptimized]);
+  const sizesValue = sizes ?? (fill ? "100vw" : widthNumber ? `${widthNumber}px` : void 0);
+  const [isLoaded, setIsLoaded] = React4__namespace.useState(false);
+  const internalRef = React4__namespace.useRef(null);
+  const setRefs = React4__namespace.useCallback(
+    (node) => {
+      internalRef.current = node;
+      if (!ref) {
+        return;
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  React4__namespace.useEffect(() => {
+    const image = internalRef.current;
+    if (!image) {
+      return;
+    }
+    if (image.complete && image.naturalWidth > 0) {
+      setIsLoaded(true);
+      onLoadingComplete?.(image);
+    } else {
+      setIsLoaded(false);
+    }
+  }, [onLoadingComplete, src]);
+  const handleLoad = React4__namespace.useCallback(
+    (event) => {
+      setIsLoaded(true);
+      onLoadProp?.(event);
+      onLoadingComplete?.(event.currentTarget);
+    },
+    [onLoadProp, onLoadingComplete]
+  );
+  const loading = priority ? "eager" : loadingProp ?? "lazy";
+  const fetchPriority = priority ? "high" : fetchPriorityProp;
+  const decoding = decodingProp ?? "async";
+  const resolvedObjectFit = objectFit ?? (fill ? "cover" : void 0);
+  const wrapperStyle = React4__namespace.useMemo(
+    () => ({
+      position: "relative",
+      display: fill ? "block" : "inline-block",
+      overflow: "hidden",
+      width: fill ? "100%" : formatDimension(width) ?? void 0,
+      height: fill ? "100%" : formatDimension(height) ?? void 0
+    }),
+    [fill, height, width]
+  );
+  const imageStyle = React4__namespace.useMemo(
+    () => ({
+      width: fill ? "100%" : formatDimension(width) ?? void 0,
+      height: fill ? "100%" : formatDimension(height) ?? void 0,
+      position: fill ? "absolute" : void 0,
+      inset: fill ? 0 : void 0,
+      objectFit: resolvedObjectFit,
+      objectPosition,
+      ...style
+    }),
+    [fill, height, objectPosition, resolvedObjectFit, style, width]
+  );
+  const shouldShowLoadingOverlay = placeholder2 === "blur";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      "data-slot": "image",
+      className: cn("relative overflow-hidden", fill ? "block" : "inline-block", wrapperClassName),
+      style: wrapperStyle,
+      children: [
+        shouldShowLoadingOverlay && /* @__PURE__ */ jsxRuntime.jsx(
+          LoadingOverlay,
+          {
+            "aria-hidden": true,
+            fullscreen: false,
+            spinnerClassName: "size-6",
+            className: cn(
+              // "bg-white/75!",
+              isLoaded ? "opacity-0 pointer-events-none" : "opacity-100"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            ref: setRefs,
+            className: cn(
+              "block transition-opacity duration-300",
+              fill && "absolute inset-0 size-full",
+              shouldShowLoadingOverlay && !isLoaded ? "opacity-0" : "opacity-100",
+              className
+            ),
+            src: computedSrc,
+            srcSet: computedSrcSet,
+            sizes: sizesValue,
+            width: fill ? void 0 : widthNumber,
+            height: fill ? void 0 : heightNumber,
+            alt,
+            loading,
+            fetchPriority,
+            decoding,
+            onLoad: handleLoad,
+            style: imageStyle,
+            ...restImgProps
+          }
+        )
+      ]
+    }
+  );
+});
+Image2.displayName = "Image";
 var ListTable = ({ onTableReady, children }) => {
   React4__namespace.useEffect(() => {
     if (onTableReady) {
@@ -6331,8 +6623,8 @@ function parseSerializedEditorState(raw) {
     return void 0;
   }
 }
-function Placeholder({ placeholder: placeholder3 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: theme.placeholder, children: placeholder3 });
+function Placeholder({ placeholder: placeholder2 }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: theme.placeholder, children: placeholder2 });
 }
 var initialToolbarState = {
   isBold: false,
@@ -7233,7 +7525,7 @@ var RichText = React4.forwardRef(function RichText2({
   defaultValue,
   onChange,
   onHtmlChange,
-  placeholder: placeholder3,
+  placeholder: placeholder2,
   readOnly,
   disabled,
   editorClassName,
@@ -7321,7 +7613,7 @@ var RichText = React4.forwardRef(function RichText2({
                   )
                 }
               ),
-              placeholder: /* @__PURE__ */ jsxRuntime.jsx(Placeholder, { placeholder: placeholder3 || "" }),
+              placeholder: /* @__PURE__ */ jsxRuntime.jsx(Placeholder, { placeholder: placeholder2 || "" }),
               ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
             }
           ),
@@ -8456,6 +8748,7 @@ exports.FormLabel = FormLabel;
 exports.FormMessage = FormMessage;
 exports.GridSettingsModal = GridSettingsModal_default;
 exports.HeaderCell = HeaderCell_default;
+exports.Image = Image2;
 exports.Input = Input;
 exports.Label = Label2;
 exports.List = List_default;
@@ -8543,6 +8836,7 @@ exports.buttonVariants = buttonVariants;
 exports.cn = cn;
 exports.compareAlphanumeric = compareAlphanumeric;
 exports.debounce = debounce;
+exports.formatISODate = formatISODate;
 exports.getDialogAlertControls = getDialogAlertControls;
 exports.getDialogTemplates = getDialogTemplates;
 exports.inputVariants = inputVariants;