@olenbetong/synergi-react 1.0.5 → 1.0.6

package/es/Checkbox/index.js

@@ -8,6 +8,7 @@ function Mark(props) {
 export const Checkbox = forwardRef(function Checkbox({ className, disabled = false, id, onChange = () => null, title, value, ...other }, ref) {
     const inputId = useId() + (id ?? "");
     const input = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Ref object
     useEffect(() => {
         if (typeof ref === "function") {
             ref(input.current);

package/es/DateNavigator/index.js

@@ -26,7 +26,7 @@ export function DateNavigator({ date: dateProp, onChange }) {
     const dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
     let dateValue = new Date(dateUtc);
     let text = formatter.format(dateValue);
-    let altText;
+    let altText = "";
     if (todayUtc === dateUtc) {
         altText = getLocalizedString("Today");
     }

package/es/PageBanner/index.js

@@ -8,7 +8,8 @@ export function PageBanner({ as, className, children, ...other }) {
 }
 export const BannerImage = React.forwardRef(function BannerImage(props, ref) {
     const { className, ...other } = props;
-    return _jsx("img", { ref: ref, className: clsx("ObPageBanner-bannerImage", className), ...other });
+    // biome-ignore lint/a11y/useAltText: should be provided by the user
+    return _jsx("img", { ref: ref, className: clsx("ObPageBanner-bannerImage", className), alt: "", ...other });
 });
 export function TabList({ as, className, children, sticky, ...other }) {
     const Component = as ? as : "nav";

package/es/Portal/index.js

@@ -9,24 +9,22 @@ export function Portal({ children, root, type = "div" }) {
     const forceUpdate = useForceUpdate();
     const mountNode = useRef(null);
     const portalNode = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: because reasons
     useEffect(() => {
         const ownerDocument = mountNode.current?.ownerDocument;
-        let portalElem = portalNode.current;
-        if (ownerDocument && portalElem) {
+        if (ownerDocument && !portalNode.current) {
             let parent = root ? ownerDocument.querySelector(root) || ownerDocument.body : ownerDocument.body;
             const node = ownerDocument.createElement(type);
-            portalElem = node;
+            portalNode.current = node;
             parent.appendChild(node);
             forceUpdate();
             return () => {
                 parent.removeChild(node);
             };
         }
-    }, []);
+    }, [root, type]);
     if (!portalNode.current) {
         return _jsx("div", { ref: mountNode });
     }
-    else {
-        return createPortal(children, portalNode.current);
-    }
+    return createPortal(children, portalNode.current);
 }

package/es/Sidebar/index.js

@@ -23,6 +23,7 @@ export function Sidebar(props) {
         element?.addEventListener("transitionend", toggleHiddenContent);
         return () => element?.removeEventListener("transitionend", toggleHiddenContent);
     }, [open]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: TODO
     useEffect(() => {
         function handleCloseSidebar(evt) {
             if (evt.key === "Escape") {

package/es/Spinner/index.d.ts

@@ -1,5 +1,5 @@
 import "./index.css";
-import React from "react";
+import type React from "react";
 export type SpinnerProps = React.HTMLProps<HTMLDivElement> & {
     fullPage?: boolean;
 };

package/es/SplitContainer/index.d.ts

@@ -1,5 +1,5 @@
 import "./index.css";
-import React from "react";
+import type React from "react";
 export type SplitContainerProps = {
     className?: string;
     panelClassName?: string;

package/es/SplitContainer/index.js

@@ -36,7 +36,7 @@ settingsStore.keys().then((keys) => Promise.allSettled(keys
     }
 }))));
 const Divider = forwardRef(function Divider(props, ref) {
-    return (_jsx("div", { tabIndex: 0, className: clsx("ObSplitContainer-divider", props.className), ref: ref, children: _jsx("span", { children: "\u2022\u2022\u2022" }) }));
+    return (_jsx("div", { className: clsx("ObSplitContainer-divider", props.className), ref: ref, children: _jsx("span", { children: "\u2022\u2022\u2022" }) }));
 });
 function SplitRoot({ className, direction, ...props }) {
     return _jsx("div", { className: clsx(className, "ObSplitContainer-root", direction), ...props });
@@ -79,6 +79,7 @@ export function SplitContainer({ className, children, direction = "vertical", fi
         }
     }, [id, layoutVersion]);
     let childrenArray = Children.toArray(children);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
     useEffect(() => {
         let divider = dividerRef.current;
         if (divider) {

package/es/ValueToggle/index.js

@@ -4,7 +4,7 @@ import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 let valueToggleId = 0;
 function ValueToggleInner({ className, onChange, defaultValue, options, value, ...other }, ref) {
     const wrapperRef = useRef(null);
-    const [toggleName] = useState("obet-value-toggle-" + String(++valueToggleId));
+    const [toggleName] = useState(`obet-value-toggle-${String(++valueToggleId)}`);
     const isControlled = value !== undefined;
     useImperativeHandle(ref, () => {
         const e = wrapperRef.current?.querySelector("input");

package/es/useTranslation/index.js

@@ -12,7 +12,7 @@ async function translateText(text, target, apiKey) {
     let result = await fetch(url, options);
     let json = await result.json();
     let { data } = json;
-    if (data && data.translations) {
+    if (data?.translations) {
         let [translation] = data.translations;
         return {
             from: translation.detectedSourceLanguage,
@@ -27,6 +27,7 @@ export function useTranslation(text, targetLanguage, apiKey) {
     let [from, setSourceLang] = useState(null);
     let [isTranslating, setIsTranslating] = useState(false);
     let textRef = useRef(text);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: this is a way of resetting the state so we don't show outdated translations when the text changes
     useEffect(() => {
         textRef.current = text;
         return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olenbetong/synergi-react",
-	"version": "1.0.5",
+	"version": "1.0.6",
 	"description": "Standalone React component for SynergiWeb and Partner Portal",
 	"type": "module",
 	"types": "./es/index.d.ts",
@@ -68,7 +68,7 @@
 	},
 	"sideEffects": false,
 	"dependencies": {
-		"@olenbetong/appframe-core": "2.11.6",
+		"@olenbetong/appframe-core": "2.11.7",
 		"clsx": "^2.1.1",
 		"localforage": "^1.10.0",
 		"mitt": "^3.0.0"
@@ -87,5 +87,5 @@
 	"devDependencies": {
 		"replace-in-files": "^3.0.0"
 	},
-	"gitHead": "48ecf3f030bc4cab59c3a7eb06506b9a6c208ba7"
+	"gitHead": "bc10814d960b65e6959fb8506259e4d369f094ab"
 }

package/src/Checkbox/index.tsx

@@ -1,7 +1,7 @@
 import "./index.scss";
 
 import clsx from "clsx";
-import { HTMLAttributes, forwardRef, useEffect, useId, useRef } from "react";
+import { type HTMLAttributes, forwardRef, useEffect, useId, useRef } from "react";
 
 function Mark(props: HTMLAttributes<SVGElement>) {
 	return (
@@ -26,6 +26,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Che
 	const inputId = useId() + (id ?? "");
 	const input = useRef<HTMLInputElement>(null);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: Ref object
 	useEffect(() => {
 		if (typeof ref === "function") {
 			ref(input.current);

package/src/DateNavigator/index.tsx

@@ -60,7 +60,7 @@ export function DateNavigator({ date: dateProp, onChange }: { date?: Date; onCha
 	let dateValue = new Date(dateUtc);
 
 	let text = formatter.format(dateValue);
-	let altText;
+	let altText = "";
 
 	if (todayUtc === dateUtc) {
 		altText = getLocalizedString("Today");

package/src/PageBanner/index.tsx

@@ -26,7 +26,8 @@ export const BannerImage = React.forwardRef<HTMLImageElement, BannerImageProps>(
 	ref,
 ) {
 	const { className, ...other } = props;
-	return <img ref={ref} className={clsx("ObPageBanner-bannerImage", className)} {...other} />;
+	// biome-ignore lint/a11y/useAltText: should be provided by the user
+	return <img ref={ref} className={clsx("ObPageBanner-bannerImage", className)} alt="" {...other} />;
 });
 
 export type TabListProps = Pick<React.HTMLProps<HTMLDivElement>, "id" | "className" | "children"> & {

package/src/Portal/index.tsx

@@ -10,15 +10,16 @@ function useForceUpdate() {
 export function Portal({ children, root, type = "div" }) {
 	const forceUpdate = useForceUpdate();
 	const mountNode = useRef<HTMLDivElement>(null);
-	const portalNode = useRef<HTMLElement>(null);
+	const portalNode = useRef<HTMLElement | null>(null);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: because reasons
 	useEffect(() => {
 		const ownerDocument = mountNode.current?.ownerDocument;
-		let portalElem = portalNode.current;
-		if (ownerDocument && portalElem) {
+		if (ownerDocument && !portalNode.current) {
 			let parent = root ? ownerDocument.querySelector(root) || ownerDocument.body : ownerDocument.body;
+
 			const node = ownerDocument.createElement(type);
-			portalElem = node;
+			portalNode.current = node;
 			parent.appendChild(node);
 			forceUpdate();
 
@@ -26,11 +27,11 @@ export function Portal({ children, root, type = "div" }) {
 				parent.removeChild(node);
 			};
 		}
-	}, []);
+	}, [root, type]);
 
 	if (!portalNode.current) {
 		return <div ref={mountNode} />;
-	} else {
-		return createPortal(children, portalNode.current);
 	}
+
+	return createPortal(children, portalNode.current);
 }

package/src/Sidebar/index.tsx

@@ -49,6 +49,7 @@ export function Sidebar(props: SidebarProps) {
 		return () => element?.removeEventListener("transitionend", toggleHiddenContent);
 	}, [open]);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO
 	useEffect(() => {
 		function handleCloseSidebar(evt) {
 			if (evt.key === "Escape") {

package/src/Spinner/index.tsx

@@ -1,7 +1,7 @@
 import "./index.scss";
 
 import clsx from "clsx";
-import React from "react";
+import type React from "react";
 
 export type SpinnerProps = React.HTMLProps<HTMLDivElement> & {
 	fullPage?: boolean;

package/src/SplitContainer/index.tsx

@@ -2,7 +2,8 @@ import "./index.scss";
 
 import clsx from "clsx";
 import localforage from "localforage";
-import React, { Children, forwardRef, useEffect, useRef, useState } from "react";
+import type React from "react";
+import { Children, forwardRef, useEffect, useRef, useState } from "react";
 
 const article = globalThis.af?.article?.id ?? globalThis.window?.location.pathname.substring(1).split("/")[0];
 const settingsStore = localforage.createInstance({
@@ -63,7 +64,7 @@ type DividerProps = {
 
 const Divider = forwardRef<HTMLDivElement, DividerProps>(function Divider(props: DividerProps, ref) {
 	return (
-		<div tabIndex={0} className={clsx("ObSplitContainer-divider", props.className)} ref={ref}>
+		<div className={clsx("ObSplitContainer-divider", props.className)} ref={ref}>
 			<span>•••</span>
 		</div>
 	);
@@ -174,6 +175,7 @@ export function SplitContainer({
 
 	let childrenArray = Children.toArray(children);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		let divider = dividerRef.current;
 		if (divider) {
@@ -229,8 +231,8 @@ export function SplitContainer({
 			}
 
 			function handleKeyDown(event: KeyboardEvent) {
-				let reduce: boolean = true;
-				let shouldHandle: boolean = false;
+				let reduce = true;
+				let shouldHandle = false;
 				if (!event.altKey && !event.ctrlKey && !event.metaKey) {
 					if (direction === "horizontal" && ["ArrowLeft", "ArrowRight"].includes(event.key)) {
 						shouldHandle = true;

package/src/ValueToggle/index.tsx

@@ -23,7 +23,7 @@ function ValueToggleInner(
 	}>,
 ) {
 	const wrapperRef = useRef<HTMLDivElement>(null);
-	const [toggleName] = useState("obet-value-toggle-" + String(++valueToggleId));
+	const [toggleName] = useState(`obet-value-toggle-${String(++valueToggleId)}`);
 	const isControlled = value !== undefined;
 
 	useImperativeHandle(ref, () => {

package/src/useTranslation/index.ts

@@ -16,7 +16,7 @@ async function translateText(text: string, target: string, apiKey: string) {
 	let json = await result.json();
 	let { data } = json;
 
-	if (data && data.translations) {
+	if (data?.translations) {
 		let [translation] = data.translations;
 
 		return {
@@ -35,6 +35,7 @@ export function useTranslation(text: string, targetLanguage: string, apiKey: str
 	let [isTranslating, setIsTranslating] = useState(false);
 	let textRef = useRef(text);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: this is a way of resetting the state so we don't show outdated translations when the text changes
 	useEffect(() => {
 		textRef.current = text;
 		return () => {