@olenbetong/synergi-react 1.0.4 → 1.0.6

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.scss

@@ -1,4 +1,4 @@
-@import "../styles/variables";
+@use "../styles/variables";
 
 .ObValueToggle-root {
 	display: flex;

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/index.scss

@@ -1,9 +1,9 @@
-@import "./Checkbox/index.scss";
-@import "./ColorCard/index.scss";
-@import "./DateNavigator/index.scss";
-@import "./LinkedCardList/index.scss";
-@import "./PageBanner/index.scss";
-@import "./ProgressBar/index.scss";
-@import "./Sidebar/index.scss";
-@import "./SplitContainer/index.scss";
-@import "./ValueToggle/index.scss";
+@use "Checkbox/index.scss";
+@use "ColorCard/index.scss" as index2;
+@use "DateNavigator/index.scss" as index3;
+@use "LinkedCardList/index.scss" as index4;
+@use "PageBanner/index.scss" as index5;
+@use "ProgressBar/index.scss" as index6;
+@use "Sidebar/index.scss" as index7;
+@use "SplitContainer/index.scss" as index8;
+@use "ValueToggle/index.scss" as index9;

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 () => {