@powerportalspro/react-fluent 5.0.0 → 5.1.0

package/dist/index.js

@@ -2,7 +2,7 @@ import { makeStyles, mergeClasses, Input, tokens, Toolbar, ToolbarButton, Toolba
 import { MaskMode, useMaskedTextField, useT, usePowerPortalsPro, useRecordContext, useColumnMetadata, useLocale, MainContext, useTableMetadata, useWarnAboutUnsavedChanges, useMainContext, useViewsForTable, useViewMetadata, QueryStatus, useGridData, RecordContext, DialogServiceProvider, useUrlCultureStrategy, useDefaultLocale, useSupportedLocales, setAspNetCultureCookie, buildLocalePath, useAuth, AuthStatus, useOverlayServiceState, OverlayServiceProvider, useOverlayForTarget, useLocalization, useLocalizationLoaded, useValidationContext, useDialogService, useRunWithOverlay, useRecordContextOptional, useOrganizationSettings, useUnsavedChangesGuard, useColumnValidationErrors } from '@powerportalspro/react';
 import { forwardRef, useRef, useImperativeHandle, useState, useEffect, useCallback, createContext, useMemo, useId, useLayoutEffect, useContext, useTransition, Children, isValidElement } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { ArrowRotateCounterclockwise20Regular, ArrowRotateClockwise20Regular, FlipHorizontal20Regular, FlipVertical20Regular, ZoomIn20Regular, ZoomOut20Regular, ArrowReset20Regular, ChevronDown16Regular, Grid20Regular, Crop20Regular, FullScreenMinimize20Regular, FullScreenMaximize20Regular, ArrowDownload20Regular, Prohibited20Regular, Checkmark20Filled, ArrowDownload24Regular, ArrowClockwise24Regular, ChevronUp12Regular, ChevronDown12Regular, DocumentArrowLeft24Regular, ChevronDown20Regular, ChevronRight20Regular, Folder20Regular, Document20Regular, ErrorCircle20Regular, Eye20Regular, Dismiss20Regular, Edit20Regular, Add16Regular, Edit16Regular, LinkAdd16Regular, LinkDismiss16Regular, Delete16Regular, Settings20Regular, Search20Regular, ArrowClockwise20Regular, ArrowSortDown16Regular, ArrowSortUp16Regular, Dismiss24Regular, LinkAdd20Regular, QuestionCircle24Regular, Info24Regular, DismissCircle24Regular, Warning24Regular, CheckmarkCircle24Regular, ArrowExit20Regular, PersonEdit20Regular, ArrowSwap20Regular, SignOut20Regular, MoreVerticalRegular, ArrowSyncRegular, ArrowDownloadRegular, Save24Regular, Delete24Regular, Add20Regular, Delete20Regular, LinkDismiss20Regular, ArrowUpload32Regular, ArrowUpload24Regular, ArrowSync24Regular, DrawerArrowDownload24Regular, Money20Regular, ErrorCircle12Filled, MoreHorizontal20Regular, ChevronDoubleLeft20Regular, ChevronLeft20Regular, ChevronDoubleRight20Regular, Info12Regular, Checkmark16Regular, Dismiss16Regular, DocumentText20Regular, FolderZip20Regular, MusicNote220Regular, Video20Regular, Image20Regular, SlideText20Regular, DocumentTable20Regular, DocumentPdf20Regular } from '@fluentui/react-icons';
+import { ArrowRotateCounterclockwise20Regular, ArrowRotateClockwise20Regular, FlipHorizontal20Regular, FlipVertical20Regular, ZoomIn20Regular, ZoomOut20Regular, ArrowReset20Regular, ChevronDown16Regular, Grid20Regular, Crop20Regular, FullScreenMinimize20Regular, FullScreenMaximize20Regular, ArrowDownload20Regular, Prohibited20Regular, Checkmark20Filled, ArrowDownload24Regular, ArrowClockwise24Regular, ChevronUp12Regular, ChevronDown12Regular, DocumentArrowLeft24Regular, ChevronDown20Regular, ChevronRight20Regular, Folder20Regular, Document20Regular, ErrorCircle20Regular, Eye20Regular, Dismiss20Regular, Edit20Regular, Add16Regular, Edit16Regular, LinkAdd16Regular, LinkDismiss16Regular, Delete16Regular, Settings20Regular, Search20Regular, ArrowClockwise20Regular, ArrowSortDown16Regular, ArrowSortUp16Regular, Dismiss24Regular, LinkAdd20Regular, QuestionCircle24Regular, Info24Regular, DismissCircle24Regular, Warning24Regular, CheckmarkCircle24Regular, ArrowExit20Regular, PersonEdit20Regular, ArrowSwap20Regular, SignOut20Regular, MoreVerticalRegular, ArrowSyncRegular, ArrowDownloadRegular, Save24Regular, Delete24Regular, Add20Regular, Delete20Regular, LinkDismiss20Regular, ArrowUpload32Regular, ArrowUpload24Regular, ArrowSync24Regular, DrawerArrowDownload24Regular, Money20Regular, ErrorCircle12Filled, DocumentText20Regular, FolderZip20Regular, MusicNote220Regular, Video20Regular, Image20Regular, SlideText20Regular, DocumentTable20Regular, DocumentPdf20Regular, MoreHorizontal20Regular, ChevronDoubleLeft20Regular, ChevronLeft20Regular, ChevronDoubleRight20Regular, Info12Regular, Checkmark16Regular, Dismiss16Regular } from '@fluentui/react-icons';
 import { RequiredLevel, DateTimeBehavior, getRecordReferenceId, RelationshipFilterMode, SwitchIdentityResult, TableSecurityPermission } from '@powerportalspro/core';
 import { DatePicker } from '@fluentui/react-datepicker-compat';
 import { TimePicker } from '@fluentui/react-timepicker-compat';
@@ -2468,6 +2468,7 @@ var ImageViewer = forwardRef(function ImageViewer2({
   const selectionRef = useRef(selection);
   selectionRef.current = selection;
   const prevTransformRef = useRef({ angle, zoom, pan, flipH, flipV });
+  const resizingRef = useRef(false);
   const dragRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
   const zoomRef = useRef(zoom);
@@ -2497,6 +2498,7 @@ var ImageViewer = forwardRef(function ImageViewer2({
     const cur = { angle, zoom, pan, flipH, flipV };
     const transformChanged = prev.angle !== cur.angle || prev.zoom !== cur.zoom || prev.pan.x !== cur.pan.x || prev.pan.y !== cur.pan.y || prev.flipH !== cur.flipH || prev.flipV !== cur.flipV;
     if (transformChanged) {
+      resizingRef.current = false;
       const sel = selectionRef.current;
       const imgEl = imgRef.current;
       if (sel && imgEl) {
@@ -2527,6 +2529,51 @@ var ImageViewer = forwardRef(function ImageViewer2({
     }
     prevTransformRef.current = cur;
   }, [angle, zoom, pan, flipH, flipV]);
+  useEffect(() => {
+    if (!toolbar) return;
+    const container = imageContainerRef.current;
+    if (!container) return;
+    let prevMetrics = imgRef.current ? readImageLayoutMetrics(imgRef.current) : null;
+    const observer = new ResizeObserver(() => {
+      const imgEl = imgRef.current;
+      if (!imgEl) return;
+      const newMetrics = readImageLayoutMetrics(imgEl);
+      if (!newMetrics) return;
+      const sel = selectionRef.current;
+      const layoutChanged = !prevMetrics || prevMetrics.layoutW !== newMetrics.layoutW || prevMetrics.layoutH !== newMetrics.layoutH || prevMetrics.offsetLeft !== newMetrics.offsetLeft || prevMetrics.offsetTop !== newMetrics.offsetTop;
+      if (sel && prevMetrics && layoutChanged) {
+        const natural = containerRectToImageNatural(
+          sel,
+          imgEl,
+          angleRef.current,
+          zoomRef.current,
+          panRef.current,
+          flipHRef.current,
+          flipVRef.current,
+          prevMetrics
+        );
+        if (natural) {
+          const reprojected = imageNaturalRectToContainer(
+            natural,
+            imgEl,
+            angleRef.current,
+            zoomRef.current,
+            panRef.current,
+            flipHRef.current,
+            flipVRef.current,
+            newMetrics
+          );
+          if (reprojected) {
+            resizingRef.current = true;
+            setSelection(reprojected);
+          }
+        }
+      }
+      prevMetrics = newMetrics;
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [toolbar]);
   const onDirtyChangedRef = useRef(onDirtyChanged);
   onDirtyChangedRef.current = onDirtyChanged;
   useEffect(() => {
@@ -3280,7 +3327,7 @@ var ImageViewer = forwardRef(function ImageViewer2({
                     // pointermove (which is what changes the selection during
                     // a drag) calls setSelection — that triggers a re-render
                     // which reads the current dragRef value.
-                    transition: dragRef.current ? "none" : "left 120ms ease-out, top 120ms ease-out, width 120ms ease-out, height 120ms ease-out"
+                    transition: dragRef.current || resizingRef.current ? "none" : "left 120ms ease-out, top 120ms ease-out, width 120ms ease-out, height 120ms ease-out"
                   },
                   children: [
                     showThirds && /* @__PURE__ */ jsxs("div", { className: styles.thirdsGuide, "aria-hidden": "true", children: [
@@ -3441,6 +3488,21 @@ function useImageSrc(source) {
     return source.value ? `data:${resolveMimeType(source)};base64,${source.value}` : null;
   return bytesUrlRef.current;
 }
+function readImageLayoutMetrics(imageEl) {
+  const layoutW = imageEl.offsetWidth;
+  const layoutH = imageEl.offsetHeight;
+  const naturalW = imageEl.naturalWidth;
+  const naturalH = imageEl.naturalHeight;
+  if (layoutW === 0 || layoutH === 0 || naturalW === 0 || naturalH === 0) return null;
+  return {
+    layoutW,
+    layoutH,
+    offsetLeft: imageEl.offsetLeft,
+    offsetTop: imageEl.offsetTop,
+    naturalW,
+    naturalH
+  };
+}
 function getDisplayedImageBounds(imageEl, angle, zoom, pan, flipH, flipV) {
   const layoutW = imageEl.offsetWidth;
   const layoutH = imageEl.offsetHeight;
@@ -3483,15 +3545,13 @@ function getDisplayedImageBounds(imageEl, angle, zoom, pan, flipH, flipV) {
   }
   return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
 }
-function containerRectToImageNatural(rect, imageEl, angle, zoom, pan, flipH, flipV) {
-  const layoutW = imageEl.offsetWidth;
-  const layoutH = imageEl.offsetHeight;
-  const naturalW = imageEl.naturalWidth;
-  const naturalH = imageEl.naturalHeight;
-  if (layoutW === 0 || layoutH === 0 || naturalW === 0 || naturalH === 0) return null;
+function containerRectToImageNatural(rect, imageEl, angle, zoom, pan, flipH, flipV, metricsOverride) {
+  const m = metricsOverride ?? readImageLayoutMetrics(imageEl);
+  if (!m) return null;
+  const { layoutW, layoutH, naturalW, naturalH } = m;
   const containScale = Math.min(layoutW / naturalW, layoutH / naturalH);
-  const imgCenterX = imageEl.offsetLeft + layoutW / 2;
-  const imgCenterY = imageEl.offsetTop + layoutH / 2;
+  const imgCenterX = m.offsetLeft + layoutW / 2;
+  const imgCenterY = m.offsetTop + layoutH / 2;
   const sx = zoom * (flipH ? -1 : 1);
   const sy = zoom * (flipV ? -1 : 1);
   if (sx === 0 || sy === 0) return null;
@@ -3524,15 +3584,13 @@ function containerRectToImageNatural(rect, imageEl, angle, zoom, pan, flipH, fli
   }
   return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
 }
-function imageNaturalRectToContainer(rect, imageEl, angle, zoom, pan, flipH, flipV) {
-  const layoutW = imageEl.offsetWidth;
-  const layoutH = imageEl.offsetHeight;
-  const naturalW = imageEl.naturalWidth;
-  const naturalH = imageEl.naturalHeight;
-  if (layoutW === 0 || layoutH === 0 || naturalW === 0 || naturalH === 0) return null;
+function imageNaturalRectToContainer(rect, imageEl, angle, zoom, pan, flipH, flipV, metricsOverride) {
+  const m = metricsOverride ?? readImageLayoutMetrics(imageEl);
+  if (!m) return null;
+  const { layoutW, layoutH, naturalW, naturalH } = m;
   const containScale = Math.min(layoutW / naturalW, layoutH / naturalH);
-  const imgCenterX = imageEl.offsetLeft + layoutW / 2;
-  const imgCenterY = imageEl.offsetTop + layoutH / 2;
+  const imgCenterX = m.offsetLeft + layoutW / 2;
+  const imgCenterY = m.offsetTop + layoutH / 2;
   const sx = zoom * (flipH ? -1 : 1);
   const sy = zoom * (flipV ? -1 : 1);
   const rad = angle * Math.PI / 180;
@@ -4410,6 +4468,69 @@ function ZipViewer({
     }
   );
 }
+function ZipEntryIcon({ fileName, className }) {
+  switch (getFileExtension(fileName)) {
+    case "pdf":
+      return /* @__PURE__ */ jsx(DocumentPdf20Regular, { className });
+    case "xls":
+    case "xlsx":
+    case "csv":
+    case "ods":
+      return /* @__PURE__ */ jsx(DocumentTable20Regular, { className });
+    case "ppt":
+    case "pptx":
+    case "odp":
+      return /* @__PURE__ */ jsx(SlideText20Regular, { className });
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "bmp":
+    case "webp":
+    case "svg":
+    case "ico":
+    case "tif":
+    case "tiff":
+      return /* @__PURE__ */ jsx(Image20Regular, { className });
+    case "mp4":
+    case "mov":
+    case "avi":
+    case "mkv":
+    case "webm":
+    case "m4v":
+      return /* @__PURE__ */ jsx(Video20Regular, { className });
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "flac":
+    case "m4a":
+    case "aac":
+      return /* @__PURE__ */ jsx(MusicNote220Regular, { className });
+    case "zip":
+    case "7z":
+    case "rar":
+    case "tar":
+    case "gz":
+      return /* @__PURE__ */ jsx(FolderZip20Regular, { className });
+    case "txt":
+    case "md":
+    case "markdown":
+    case "log":
+    case "json":
+    case "xml":
+    case "yaml":
+    case "yml":
+    case "html":
+    case "htm":
+    case "js":
+    case "ts":
+    case "cs":
+    case "css":
+      return /* @__PURE__ */ jsx(DocumentText20Regular, { className });
+    default:
+      return /* @__PURE__ */ jsx(Document20Regular, { className });
+  }
+}
 function ZipTreeNode({ node, depth, expanded, selected, onToggle, onSelect }) {
   const styles = useFileViewerStyles();
   const isExpanded = expanded.has(node.fullPath);
@@ -4468,7 +4589,7 @@ function ZipTreeNode({ node, depth, expanded, selected, onToggle, onSelect }) {
       style: indent,
       children: [
         /* @__PURE__ */ jsx("span", { className: styles.zipChevronSpacer }),
-        /* @__PURE__ */ jsx(Document20Regular, { className: styles.zipIcon }),
+        /* @__PURE__ */ jsx(ZipEntryIcon, { fileName: node.name, className: styles.zipIcon }),
         /* @__PURE__ */ jsx("span", { className: styles.zipName, children: node.name })
       ]
     }
@@ -5113,11 +5234,13 @@ var useFileViewerStyles = makeStyles({
       outlineOffset: "-1px"
     }
   },
+  // Selection style ported from the Blazor zip viewer: a subtle accent tint over
+  // the row (text stays its normal color), intensifying slightly on hover so the
+  // neutral row-hover doesn't wash out the selection.
   zipRowSelected: {
-    backgroundColor: tokens.colorBrandBackground2,
-    color: tokens.colorBrandForeground2,
+    backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 12%, transparent)`,
     ":hover": {
-      backgroundColor: tokens.colorBrandBackground2Hover
+      backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 18%, transparent)`
     }
   },
   zipChevron: {
@@ -11656,15 +11779,11 @@ function ManyToManyLookupEdit({
     return relatedPrimaryName;
   }, [resolvedColumns, relatedPrimaryName]);
   const lastSeededRecordIdRef = useRef(void 0);
-  const lastSeededViewIdRef = useRef(void 0);
   useEffect(() => {
     if (initialLoad.status !== QueryStatus.Success || !initialLoad.data) return;
     if (!primaryNameColumn || !parentRecord) return;
-    if (lastSeededRecordIdRef.current === parentRefId && lastSeededViewIdRef.current === selectedViewId) {
-      return;
-    }
+    if (lastSeededRecordIdRef.current === parentRefId) return;
     lastSeededRecordIdRef.current = parentRefId;
-    lastSeededViewIdRef.current = selectedViewId;
     const seeded = initialLoad.data.tableRecords.map((r) => ({
       id: r.id,
       displayName: resolveDisplayName(r, primaryNameColumn) ?? "",
@@ -11673,7 +11792,7 @@ function ManyToManyLookupEdit({
     setInitialSelection(seeded);
     setPendingAdds([]);
     setPendingRemoveIds([]);
-  }, [initialLoad.status, initialLoad.data, parentRecord, primaryNameColumn, selectedViewId]);
+  }, [initialLoad.status, initialLoad.data, parentRecord, primaryNameColumn, parentRefId]);
   const [query, setQuery] = useState("");
   const [debouncedQuery, setDebouncedQuery] = useState("");
   const [searchResults, setSearchResults] = useState([]);
@@ -11785,7 +11904,6 @@ function ManyToManyLookupEdit({
         setPendingAdds([]);
         setPendingRemoveIds([]);
         lastSeededRecordIdRef.current = void 0;
-        lastSeededViewIdRef.current = void 0;
       },
       // Cancel/Discard: just drop the pending adds/removes; the
       // seed-guard refs stay so the initial selection (already loaded