Merge pull request #79 from linked-planet/dev

Dev

Author: marcus-wishes

library/src/components/Flag.tsx

@@ -221,9 +221,7 @@ export function Flag({
 			data-testid={testId}
 		>
 			{icon && (
-				<div>
-					<p className="flex items-center justify-center">{icon}</p>
-				</div>
+				<div className="flex items-start justify-center">{icon}</div>
 			)}
 			<div>
 				<div className="mb-2 font-bold">{title}</div>

library/src/components/form/DynamicForm.tsx

@@ -10,6 +10,7 @@ import {
 } from "react-hook-form"
 import { twMerge } from "tailwind-merge"
 import { Button, ButtonGroup } from "../Button"
+import {useEffect} from "react";
 
 export interface FormProps<T extends FieldValues> {
 	control: Control<T>
@@ -73,6 +74,10 @@ export function DynamicForm<T extends FieldValues>({
 		defaultValues: obj,
 	})
 
+	useEffect(() => {
+		reset(obj)
+	}, [obj, reset])
+
 	const onReset = (e: React.FormEvent) => {
 		e.preventDefault()
 		reset()

library/src/components/inputs/Select.tsx

@@ -700,7 +700,7 @@ function SelectInForm<
 	let valueUsed = value
 
 	// controlled
-	if (value) {
+	if (value !== undefined) {
 		if (!isMulti && isOptionType(value) && value.value !== field.value) {
 			field.onChange(value.value)
 		}
@@ -723,7 +723,7 @@ function SelectInForm<
 	//
 
 	// uncontrolled
-	if (!value) {
+	if (value === undefined) {
 		if (!isMulti && options) {
 			for (const opt of options) {
 				if (isOptionType(opt) && opt.value === field.value) {
@@ -739,9 +739,9 @@ function SelectInForm<
 					}
 				}
 			}
-			/*if (!valueUsed) {
-				valueUsed = field.value
-			}*/
+			if (field.value === null) {
+				valueUsed = null
+			}
 		} else if (isMulti && options) {
 			const multiValueUsed = []
 			if (field.value) {

library/src/layouting/AppLayout.tsx

@@ -29,6 +29,7 @@ export function initTopNavigationHeight() {
 	}
 	const topNavHeight = topNav[0].clientHeight
 	if (topNavHeight) {
+		console.info("UIKitTs - Top navigation height set to:", topNavHeight)
 		document.documentElement.style.setProperty(
 			topNavigationHeightVar,
 			`${topNavHeight}px`,
@@ -40,6 +41,7 @@ export function initTopNavigationHeight() {
 		const header = headers.item(i)
 		if (header?.getAttribute("role") === "banner") {
 			const bannerHeight = header.clientHeight || 0
+			console.info("UIKitTs - Banner height set to:", bannerHeight)
 			document.documentElement.style.setProperty(
 				bannerHeightVar,
 				`${bannerHeight}px`,
@@ -54,7 +56,7 @@ export function initTopNavigationHeight() {
 
 	if (!uikts_layouting_heightCB) {
 		window.addEventListener("resize", initTopNavigationHeight)
-		console.info("Added resize event listener for App layouting")
+		console.info("UIKitTs - Added resize event listener for App layouting")
 		uikts_layouting_heightCB = true
 	}
 }
@@ -68,11 +70,13 @@ function Container({
 	className,
 	style,
 	testId,
+	useBanner = false,
 }: {
 	children: React.ReactNode
 	className?: string
 	style?: React.CSSProperties
 	testId?: string
+	useBanner?: boolean
 }) {
 	return (
 		<div
@@ -83,15 +87,24 @@ function Container({
 			data-layout-container="true"
 			data-testid={testId}
 			style={{
-				gridTemplateAreas: `
+				gridTemplateAreas: useBanner
+					? `
 					"left-panel banner right-panel"
 					"left-panel top-navigation right-panel"
 					"left-panel content right-panel"
+				`
+					: `
+					"left-panel top-navigation right-panel"
+					"left-panel content right-panel"
 				`,
 				gridTemplateColumns: `var(${leftPanelWidthVar}, 0px) minmax(0, 1fr) var(${rightPanelWidthVar}, 0px)`,
-				gridTemplateRows: `var(${topNavigationHeightVar}, min-content) 1fr`,
+				gridTemplateRows: useBanner
+					? `var(${bannerHeightVar}, 0) var(${topNavigationHeightVar}, min-content) 1fr`
+					: `var(${topNavigationHeightVar}, min-content) 1fr`,
 				outline: "none",
-				height: `calc(100dvh - var(${bannerHeightVar}, 0px))`,
+				height: useBanner
+					? "100dvh"
+					: `calc(100dvh - var(${bannerHeightVar}, 0px))`,
 				...style,
 			}}
 		>