@optiaxiom/react 3.0.0-next.4 → 3.0.1

package/dist/esm/packages/react/src/file-upload/useContainerSize.js

@@ -1,23 +1,17 @@
-import { useState, useEffect } from 'react';
-
+import { useEffect, useState } from "react";
+//#region src/file-upload/useContainerSize.ts
 const useContainerSize = (ref) => {
-  const [size, setSize] = useState();
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-    const observer = new ResizeObserver((entries) => {
-      if (!ref.current) {
-        return;
-      }
-      for (const entry of entries) {
-        setSize(entry.borderBoxSize[0].blockSize);
-      }
-    });
-    observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, [ref]);
-  return size;
+	const [size, setSize] = useState();
+	useEffect(() => {
+		if (!ref.current) return;
+		const observer = new ResizeObserver((entries) => {
+			if (!ref.current) return;
+			for (const entry of entries) setSize(entry.borderBoxSize[0].blockSize);
+		});
+		observer.observe(ref.current);
+		return () => observer.disconnect();
+	}, [ref]);
+	return size;
 };
-
+//#endregion
 export { useContainerSize };

package/dist/esm/packages/react/src/file-upload/useDraggingOverBody.js

@@ -1,42 +1,30 @@
-import { useState, useRef, useEffect } from 'react';
-import { useFileUploadContext } from './FileUploadContext.js';
-
+import { useFileUploadContext } from "./FileUploadContext.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/file-upload/useDraggingOverBody.ts
 const useDraggingOverBody = () => {
-  const { disabled, rootRef } = useFileUploadContext(
-    "@optiaxiom/react/FileUploadDropzone"
-  );
-  const [isDragging, setIsDragging] = useState(false);
-  const dragRef = useRef({
-    source: null,
-    timer: 0
-  });
-  useEffect(() => {
-    if (disabled) {
-      return;
-    }
-    const over = (event) => {
-      if (!dragRef.current.source) {
-        dragRef.current.source = event.dataTransfer?.items ? Array.from(event.dataTransfer.items).some(
-          (item) => item.kind === "file"
-        ) ? "file" : Array.from(event.dataTransfer.items).some(
-          (item) => item.type === "opal-chat-dnd-data" || item.type === "opal-host-dnd-data"
-        ) ? event.target instanceof Node ? event.target : null : null : "file";
-      }
-      setIsDragging(
-        dragRef.current.source !== null && (dragRef.current.source === "file" || !rootRef.current?.contains(dragRef.current.source))
-      );
-      window.clearTimeout(dragRef.current.timer);
-      dragRef.current.timer = window.setTimeout(() => {
-        dragRef.current.source = null;
-        setIsDragging(false);
-      }, 100);
-    };
-    document.body.addEventListener("dragover", over);
-    return () => {
-      document.body.removeEventListener("dragover", over);
-    };
-  }, [disabled, rootRef]);
-  return isDragging;
+	const { disabled, rootRef } = useFileUploadContext("@optiaxiom/react/FileUploadDropzone");
+	const [isDragging, setIsDragging] = useState(false);
+	const dragRef = useRef({
+		source: null,
+		timer: 0
+	});
+	useEffect(() => {
+		if (disabled) return;
+		const over = (event) => {
+			if (!dragRef.current.source) dragRef.current.source = event.dataTransfer?.items ? Array.from(event.dataTransfer.items).some((item) => item.kind === "file") ? "file" : Array.from(event.dataTransfer.items).some((item) => item.type === "opal-chat-dnd-data" || item.type === "opal-host-dnd-data") ? event.target instanceof Node ? event.target : null : null : "file";
+			setIsDragging(dragRef.current.source !== null && (dragRef.current.source === "file" || !rootRef.current?.contains(dragRef.current.source)));
+			window.clearTimeout(dragRef.current.timer);
+			dragRef.current.timer = window.setTimeout(() => {
+				dragRef.current.source = null;
+				setIsDragging(false);
+			}, 100);
+		};
+		document.body.addEventListener("dragover", over);
+		return () => {
+			document.body.removeEventListener("dragover", over);
+		};
+	}, [disabled, rootRef]);
+	return isDragging;
 };
-
+//#endregion
 export { useDraggingOverBody };

package/dist/esm/packages/react/src/file-upload/useFileUploadDragging.js

@@ -1,42 +1,30 @@
-import { useRef } from 'react';
-import { useFileUploadContext } from './FileUploadContext.js';
-
+import { useFileUploadContext } from "./FileUploadContext.js";
+import { useRef } from "react";
+//#region src/file-upload/useFileUploadDragging.ts
 const useFileUploadDragging = ({ onDragEnter, onDragLeave, onDrop, ...props } = {}, onDraggingChange) => {
-  const { disabled } = useFileUploadContext(
-    "@optiaxiom/react/FileUploadDropzone"
-  );
-  const targetsRef = useRef([]);
-  return {
-    ...props,
-    onDragEnter: (event) => {
-      onDragEnter?.(event);
-      if (disabled) {
-        return;
-      }
-      targetsRef.current = [...targetsRef.current, event.target];
-      onDraggingChange(true);
-    },
-    onDragLeave: (event) => {
-      onDragLeave?.(event);
-      if (disabled) {
-        return;
-      }
-      targetsRef.current = targetsRef.current.filter(
-        (element) => element !== event.target
-      );
-      if (targetsRef.current.length === 0) {
-        onDraggingChange(false);
-      }
-    },
-    onDrop: (event) => {
-      onDrop?.(event);
-      if (disabled) {
-        return;
-      }
-      targetsRef.current = [];
-      onDraggingChange(false);
-    }
-  };
+	const { disabled } = useFileUploadContext("@optiaxiom/react/FileUploadDropzone");
+	const targetsRef = useRef([]);
+	return {
+		...props,
+		onDragEnter: (event) => {
+			onDragEnter?.(event);
+			if (disabled) return;
+			targetsRef.current = [...targetsRef.current, event.target];
+			onDraggingChange(true);
+		},
+		onDragLeave: (event) => {
+			onDragLeave?.(event);
+			if (disabled) return;
+			targetsRef.current = targetsRef.current.filter((element) => element !== event.target);
+			if (targetsRef.current.length === 0) onDraggingChange(false);
+		},
+		onDrop: (event) => {
+			onDrop?.(event);
+			if (disabled) return;
+			targetsRef.current = [];
+			onDraggingChange(false);
+		}
+	};
 };
-
+//#endregion
 export { useFileUploadDragging };

package/dist/esm/packages/react/src/file-upload/useFileUploadDrop.js

@@ -1,135 +1,83 @@
-import { toaster } from '@optiaxiom/globals';
-import '../auth-provider/AuthProvider.js';
-import { useAuthContext } from '../auth-provider/useAuthContext.js';
-import { useFileUploadContext } from './FileUploadContext.js';
-
-const useFileUploadDrop = ({
-  onDragOver,
-  onDrop,
-  ...props
-} = {}) => {
-  const { accept, disabled, onFilesDrop } = useFileUploadContext(
-    "@optiaxiom/react/useFileUploadDrop"
-  );
-  const auth = useAuthContext();
-  return {
-    ...props,
-    onDragOver: (event) => {
-      onDragOver?.(event);
-      if (disabled) {
-        return;
-      }
-      event.preventDefault();
-    },
-    onDrop: async (event) => {
-      onDrop?.(event);
-      if (disabled) {
-        return;
-      }
-      event.preventDefault();
-      onFilesDrop?.(
-        event.dataTransfer.items ? (await Promise.all(
-          Array.from(event.dataTransfer.items).map(async (item) => {
-            if (item.kind === "file") {
-              const file = item.getAsFile();
-              const valid = file && isValidFile(file, accept);
-              if (!valid) {
-                toaster.create(invalidFileTypeMessage(file), {
-                  intent: "danger"
-                });
-              }
-              return valid ? file : null;
-            } else if (item.type === "opal-chat-dnd-data" || item.type === "opal-host-dnd-data") {
-              if (!auth) {
-                throw new Error(
-                  "Could not find authentication credentials. Did you forget to wrap your component with `<AuthProvider>` from `@optiaxiom/react`?"
-                );
-              }
-              try {
-                const data = JSON.parse(
-                  event.dataTransfer.getData(item.type)
-                );
-                const resource = {
-                  name: data.name || "",
-                  type: data.mime_type || "",
-                  url: data.link
-                };
-                return isValidFile(resource, accept) ? getRemoteFile(resource, auth, true) : null;
-              } catch {
-              }
-            }
-            return null;
-          })
-        )).filter((file) => !!file) : Array.from(event.dataTransfer.files).filter((file) => {
-          const valid = isValidFile(file, accept);
-          if (!valid) {
-            toaster.create(invalidFileTypeMessage(file), {
-              intent: "danger"
-            });
-          }
-          return valid;
-        })
-      );
-    }
-  };
+import { useAuthContext } from "../auth-provider/useAuthContext.js";
+import { useFileUploadContext } from "./FileUploadContext.js";
+import { toaster } from "@optiaxiom/globals";
+//#region src/file-upload/useFileUploadDrop.ts
+const useFileUploadDrop = ({ onDragOver, onDrop, ...props } = {}) => {
+	const { accept, disabled, onFilesDrop } = useFileUploadContext("@optiaxiom/react/useFileUploadDrop");
+	const auth = useAuthContext();
+	return {
+		...props,
+		onDragOver: (event) => {
+			onDragOver?.(event);
+			if (disabled) return;
+			event.preventDefault();
+		},
+		onDrop: async (event) => {
+			onDrop?.(event);
+			if (disabled) return;
+			event.preventDefault();
+			onFilesDrop?.(event.dataTransfer.items ? (await Promise.all(Array.from(event.dataTransfer.items).map(async (item) => {
+				if (item.kind === "file") {
+					const file = item.getAsFile();
+					const valid = file && isValidFile(file, accept);
+					if (!valid) toaster.create(invalidFileTypeMessage(file), { intent: "danger" });
+					return valid ? file : null;
+				} else if (item.type === "opal-chat-dnd-data" || item.type === "opal-host-dnd-data") {
+					if (!auth) throw new Error("Could not find authentication credentials. Did you forget to wrap your component with `<AuthProvider>` from `@optiaxiom/react`?");
+					try {
+						const data = JSON.parse(event.dataTransfer.getData(item.type));
+						const resource = {
+							name: data.name || "",
+							type: data.mime_type || "",
+							url: data.link
+						};
+						return isValidFile(resource, accept) ? getRemoteFile(resource, auth, true) : null;
+					} catch {}
+				}
+				return null;
+			}))).filter((file) => !!file) : Array.from(event.dataTransfer.files).filter((file) => {
+				const valid = isValidFile(file, accept);
+				if (!valid) toaster.create(invalidFileTypeMessage(file), { intent: "danger" });
+				return valid;
+			}));
+		}
+	};
 };
 async function getRemoteFile(resource, auth, retry = false) {
-  const url = new URL(resource.url);
-  if (!url.searchParams.has("instance_id")) {
-    url.searchParams.set("instance_id", auth.instance || "");
-  }
-  const response = await fetch(url.toString(), {
-    headers: {
-      Authorization: `Bearer ${auth.token}`,
-      "X-Instance-Id": auth.instance,
-      "X-Product-Sku": "Axiom"
-    }
-  });
-  if (response.status === 401 && retry) {
-    return getRemoteFile(resource, {
-      ...auth,
-      token: await auth.refresh()
-    });
-  } else if (!response.ok) {
-    throw new Error("Could not download file from Opal.", {
-      cause: new Error(
-        `Got status ${response.status} attempting to download ${resource.url}`
-      )
-    });
-  } else {
-    return new File([await response.arrayBuffer()], resource.name, {
-      type: response.headers.get("Content-Type") || "application/octet-stream"
-    });
-  }
+	const url = new URL(resource.url);
+	if (!url.searchParams.has("instance_id")) url.searchParams.set("instance_id", auth.instance || "");
+	const response = await fetch(url.toString(), { headers: {
+		Authorization: `Bearer ${auth.token}`,
+		"X-Instance-Id": auth.instance,
+		"X-Product-Sku": "Axiom"
+	} });
+	if (response.status === 401 && retry) return getRemoteFile(resource, {
+		...auth,
+		token: await auth.refresh()
+	});
+	else if (!response.ok) throw new Error("Could not download file from Opal.", { cause: /* @__PURE__ */ new Error(`Got status ${response.status} attempting to download ${resource.url}`) });
+	else return new File([await response.arrayBuffer()], resource.name, { type: response.headers.get("Content-Type") || "application/octet-stream" });
 }
 function invalidFileTypeMessage(file) {
-  const ext = file?.name.includes(".") ? `.${file.name.split(".").pop()}` : void 0;
-  const label = ext || file?.type || "Unknown";
-  return `${label} is not an accepted file type`;
+	return `${(file?.name.includes(".") ? `.${file.name.split(".").pop()}` : void 0) || file?.type || "Unknown"} is not an accepted file type`;
 }
+/**
+* Copied and modified from https://github.com/dropzone/dropzone
+*/
 function isValidFile(file, accept) {
-  if (!file) {
-    return false;
-  }
-  if (!accept) {
-    return true;
-  }
-  const acceptedFiles = accept.split(",");
-  if (acceptedFiles.length === 0) {
-    return true;
-  }
-  const fileName = "name" in file ? file.name : "";
-  const mimeType = (file.type || "").toLowerCase();
-  const baseMimeType = mimeType.replace(/\/.*$/, "");
-  return acceptedFiles.some((type) => {
-    const validType = type.trim().toLowerCase();
-    if (validType.charAt(0) === ".") {
-      return fileName.toLowerCase().endsWith(validType);
-    } else if (validType.endsWith("/*")) {
-      return baseMimeType === validType.replace(/\/.*$/, "");
-    }
-    return mimeType === validType;
-  });
+	if (!file) return false;
+	if (!accept) return true;
+	const acceptedFiles = accept.split(",");
+	if (acceptedFiles.length === 0) return true;
+	const fileName = "name" in file ? file.name : "";
+	const mimeType = (file.type || "").toLowerCase();
+	const baseMimeType = mimeType.replace(/\/.*$/, "");
+	return acceptedFiles.some((type) => {
+		const validType = type.trim().toLowerCase();
+		if (validType.charAt(0) === ".") return fileName.toLowerCase().endsWith(validType);
+		else if (validType.endsWith("/*")) return baseMimeType === validType.replace(/\/.*$/, "");
+		return mimeType === validType;
+	});
 }
-
+//#endregion
 export { useFileUploadDrop };

package/dist/esm/packages/react/src/file-upload/useFileUploadTrigger.js

@@ -1,13 +1,11 @@
-import { useCallback } from 'react';
-import { useFileUploadContext } from './FileUploadContext.js';
-
+import { useFileUploadContext } from "./FileUploadContext.js";
+import { useCallback } from "react";
+//#region src/file-upload/useFileUploadTrigger.ts
 const useFileUploadTrigger = () => {
-  const { inputRef } = useFileUploadContext(
-    "@optiaxiom/react/useFileUploadOpen"
-  );
-  return useCallback(() => {
-    inputRef.current?.click();
-  }, [inputRef]);
+	const { inputRef } = useFileUploadContext("@optiaxiom/react/useFileUploadOpen");
+	return useCallback(() => {
+		inputRef.current?.click();
+	}, [inputRef]);
 };
-
+//#endregion
 export { useFileUploadTrigger };

package/dist/esm/packages/react/src/file-upload/useStickyPosition.js

@@ -1,44 +1,39 @@
-import { useEffect } from 'react';
-import { useFileUploadContext } from './FileUploadContext.js';
-
+import { useFileUploadContext } from "./FileUploadContext.js";
+import { useEffect } from "react";
+//#region src/file-upload/useStickyPosition.ts
 const useStickyPosition = (ref, visible) => {
-  const { rootRef } = useFileUploadContext(
-    "@optiaxiom/react/useStickyPosition"
-  );
-  useEffect(() => {
-    if (!visible || !rootRef.current) {
-      return;
-    }
-    const observer = new IntersectionObserver((entries) => {
-      if (!rootRef.current || !ref.current) {
-        return;
-      }
-      const entry = entries[0];
-      if (!entry.isIntersecting) {
-        return;
-      }
-      const { height, top } = entries[0].intersectionRect;
-      const rootRect = rootRef.current.getBoundingClientRect();
-      ref.current.style.maxHeight = `${Math.max(108, height)}px`;
-      ref.current.style.top = `${top - rootRect.top}px`;
-    });
-    observer.observe(rootRef.current);
-    let timer = 0;
-    const listener = () => {
-      window.clearTimeout(timer);
-      timer = window.setTimeout(() => {
-        if (rootRef.current) {
-          observer.unobserve(rootRef.current);
-          observer.observe(rootRef.current);
-        }
-      }, 300);
-    };
-    window.addEventListener("scroll", listener, true);
-    return () => {
-      window.removeEventListener("scroll", listener, true);
-      observer.disconnect();
-    };
-  }, [visible, rootRef, ref]);
+	const { rootRef } = useFileUploadContext("@optiaxiom/react/useStickyPosition");
+	useEffect(() => {
+		if (!visible || !rootRef.current) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (!rootRef.current || !ref.current) return;
+			if (!entries[0].isIntersecting) return;
+			const { height, top } = entries[0].intersectionRect;
+			const rootRect = rootRef.current.getBoundingClientRect();
+			ref.current.style.maxHeight = `${Math.max(108, height)}px`;
+			ref.current.style.top = `${top - rootRect.top}px`;
+		});
+		observer.observe(rootRef.current);
+		let timer = 0;
+		const listener = () => {
+			window.clearTimeout(timer);
+			timer = window.setTimeout(() => {
+				if (rootRef.current) {
+					observer.unobserve(rootRef.current);
+					observer.observe(rootRef.current);
+				}
+			}, 300);
+		};
+		window.addEventListener("scroll", listener, true);
+		return () => {
+			window.removeEventListener("scroll", listener, true);
+			observer.disconnect();
+		};
+	}, [
+		visible,
+		rootRef,
+		ref
+	]);
 };
-
+//#endregion
 export { useStickyPosition };

package/dist/esm/packages/react/src/filtered-slot/FilteredSlot.js

@@ -1,17 +1,16 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { createSlot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
-
-const Slot$8 = createSlot("@optiaxiom/react/FilteredSlot");
-const FilteredSlot = forwardRef(
-  ({ exclude, ...props }, ref) => {
-    if (exclude) {
-      delete props[exclude];
-    }
-    return /* @__PURE__ */ jsx(Slot$8, { ref, ...props });
-  }
-);
+import { forwardRef } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+//#region src/filtered-slot/FilteredSlot.tsx
+const Slot = createSlot("@optiaxiom/react/FilteredSlot");
+const FilteredSlot = forwardRef(({ exclude, ...props }, ref) => {
+	if (exclude) delete props[exclude];
+	return /* @__PURE__ */ jsx(Slot, {
+		ref,
+		...props
+	});
+});
 FilteredSlot.displayName = "@optiaxiom/react/FilteredSlot";
-
+//#endregion
 export { FilteredSlot };

package/dist/esm/packages/react/src/flex/Flex.js

@@ -1,40 +1,39 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { mapResponsiveValue } from '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-
+import { mapResponsiveValue } from "../sprinkles/sprinkles.js";
+import { Box } from "../box/Box.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/flex/Flex.tsx
 const mapDirectionToAlign = {
-  column: "stretch",
-  "column-reverse": "stretch",
-  row: "center",
-  "row-reverse": "center"
+	column: "stretch",
+	"column-reverse": "stretch",
+	row: "center",
+	"row-reverse": "center"
 };
-const Flex = forwardRef(
-  ({
-    alignItems,
-    display = "flex",
-    flexDirection = "column",
-    gap = "16",
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        alignItems: alignItems ?? mapResponsiveValue(
-          flexDirection,
-          (value) => mapDirectionToAlign[value]
-        ),
-        display,
-        flexDirection,
-        gap,
-        ref,
-        ...props
-      }
-    );
-  }
-);
+/**
+* Stack items vertically or horizontally in a flex container.
+*
+* @deprecated since 1.8.0 - use {@link Group} instead.
+*
+* To migrate existing Flex code: `npx @optiaxiom/codemod flex-to-group src/`
+*
+* ⚠️ Flex defaults to flexDirection='column' (NOT 'row' like standard CSS)
+* and gap='16'. Group uses standard CSS defaults (flexDirection='row', no
+* default gap).
+*
+* @category layout
+* @extends Box
+*/
+const Flex = forwardRef(({ alignItems, display = "flex", flexDirection = "column", gap = "16", ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Box, {
+		alignItems: alignItems ?? mapResponsiveValue(flexDirection, (value) => mapDirectionToAlign[value]),
+		display,
+		flexDirection,
+		gap,
+		ref,
+		...props
+	});
+});
 Flex.displayName = "@optiaxiom/react/Flex";
-
+//#endregion
 export { Flex };