@powerportalspro/react-fluent 5.0.0 → 5.1.0

package/dist/index.cjs

@@ -2483,6 +2483,7 @@ var ImageViewer = react.forwardRef(function ImageViewer2({
   const selectionRef = react.useRef(selection);
   selectionRef.current = selection;
   const prevTransformRef = react.useRef({ angle, zoom, pan, flipH, flipV });
+  const resizingRef = react.useRef(false);
   const dragRef = react.useRef(null);
   const [isDragging, setIsDragging] = react.useState(false);
   const zoomRef = react.useRef(zoom);
@@ -2512,6 +2513,7 @@ var ImageViewer = react.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) {
@@ -2542,6 +2544,51 @@ var ImageViewer = react.forwardRef(function ImageViewer2({
     }
     prevTransformRef.current = cur;
   }, [angle, zoom, pan, flipH, flipV]);
+  react.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 = react.useRef(onDirtyChanged);
   onDirtyChangedRef.current = onDirtyChanged;
   react.useEffect(() => {
@@ -3295,7 +3342,7 @@ var ImageViewer = react.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__ */ jsxRuntime.jsxs("div", { className: styles.thirdsGuide, "aria-hidden": "true", children: [
@@ -3456,6 +3503,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;
@@ -3498,15 +3560,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;
@@ -3539,15 +3599,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;
@@ -4425,6 +4483,69 @@ function ZipViewer({
     }
   );
 }
+function ZipEntryIcon({ fileName, className }) {
+  switch (getFileExtension(fileName)) {
+    case "pdf":
+      return /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DocumentPdf20Regular, { className });
+    case "xls":
+    case "xlsx":
+    case "csv":
+    case "ods":
+      return /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DocumentTable20Regular, { className });
+    case "ppt":
+    case "pptx":
+    case "odp":
+      return /* @__PURE__ */ jsxRuntime.jsx(reactIcons.SlideText20Regular, { className });
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "bmp":
+    case "webp":
+    case "svg":
+    case "ico":
+    case "tif":
+    case "tiff":
+      return /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Image20Regular, { className });
+    case "mp4":
+    case "mov":
+    case "avi":
+    case "mkv":
+    case "webm":
+    case "m4v":
+      return /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Video20Regular, { className });
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "flac":
+    case "m4a":
+    case "aac":
+      return /* @__PURE__ */ jsxRuntime.jsx(reactIcons.MusicNote220Regular, { className });
+    case "zip":
+    case "7z":
+    case "rar":
+    case "tar":
+    case "gz":
+      return /* @__PURE__ */ jsxRuntime.jsx(reactIcons.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__ */ jsxRuntime.jsx(reactIcons.DocumentText20Regular, { className });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Document20Regular, { className });
+  }
+}
 function ZipTreeNode({ node, depth, expanded, selected, onToggle, onSelect }) {
   const styles = useFileViewerStyles();
   const isExpanded = expanded.has(node.fullPath);
@@ -4483,7 +4604,7 @@ function ZipTreeNode({ node, depth, expanded, selected, onToggle, onSelect }) {
       style: indent,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.zipChevronSpacer }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Document20Regular, { className: styles.zipIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx(ZipEntryIcon, { fileName: node.name, className: styles.zipIcon }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.zipName, children: node.name })
       ]
     }
@@ -5128,11 +5249,13 @@ var useFileViewerStyles = reactComponents.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: reactComponents.tokens.colorBrandBackground2,
-    color: reactComponents.tokens.colorBrandForeground2,
+    backgroundColor: `color-mix(in srgb, ${reactComponents.tokens.colorBrandBackground} 12%, transparent)`,
     ":hover": {
-      backgroundColor: reactComponents.tokens.colorBrandBackground2Hover
+      backgroundColor: `color-mix(in srgb, ${reactComponents.tokens.colorBrandBackground} 18%, transparent)`
     }
   },
   zipChevron: {
@@ -11671,15 +11794,11 @@ function ManyToManyLookupEdit({
     return relatedPrimaryName;
   }, [resolvedColumns, relatedPrimaryName]);
   const lastSeededRecordIdRef = react.useRef(void 0);
-  const lastSeededViewIdRef = react.useRef(void 0);
   react.useEffect(() => {
     if (initialLoad.status !== react$1.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) ?? "",
@@ -11688,7 +11807,7 @@ function ManyToManyLookupEdit({
     setInitialSelection(seeded);
     setPendingAdds([]);
     setPendingRemoveIds([]);
-  }, [initialLoad.status, initialLoad.data, parentRecord, primaryNameColumn, selectedViewId]);
+  }, [initialLoad.status, initialLoad.data, parentRecord, primaryNameColumn, parentRefId]);
   const [query, setQuery] = react.useState("");
   const [debouncedQuery, setDebouncedQuery] = react.useState("");
   const [searchResults, setSearchResults] = react.useState([]);
@@ -11800,7 +11919,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