Merge pull request #131 from linked-planet/dev

Dev

Author: marcus-wishes

library/src/components/Modal.tsx

@@ -33,6 +33,8 @@ type ModalDialogProps = {
 	triggerTestId?: string
 	/** The accessible description for the dialog, is visually hidden but announced by screen readers */
 	accessibleDialogDescription: string
+	role?: RDialog.DialogContentProps["role"]
+	tabIndex?: RDialog.DialogContentProps["tabIndex"]
 }
 
 const blanketStyles =
@@ -55,7 +57,9 @@ function Container({
 	triggerId,
 	testId,
 	triggerTestId,
+	role = "dialog",
 	accessibleDialogDescription,
+	tabIndex = 0,
 }: ModalDialogProps) {
 	const content = useMemo(
 		() => (
@@ -94,6 +98,8 @@ function Container({
 					onWheel={(e) => {
 						e.stopPropagation() // this is necessary or scrolling will not work in the select dropdown menu in the modal
 					}}
+					role={role}
+					tabIndex={tabIndex}
 				>
 					<VisuallyHidden>
 						<RDialog.DialogDescription>
@@ -115,6 +121,8 @@ function Container({
 			testId,
 			useModal,
 			accessibleDialogDescription,
+			role,
+			tabIndex,
 		],
 	)
 

library/src/components/SlideOpen.tsx

@@ -1,23 +1,32 @@
 import type { CSSProperties, RefObject } from "react"
 import { twMerge } from "tailwind-merge"
 
+type SlideOpenProps = /*ComponentPropsWithRef<"div"> &*/ {
+	open: boolean
+	containerClassName?: string
+	containerStyle?: CSSProperties
+	contentClassName?: string
+	contentStyle?: CSSProperties
+	tabIndex?: number
+	ariaLabel?: string
+	ariaExpanded?: boolean
+	children: React.ReactNode
+	ref?: RefObject<HTMLDivElement>
+}
+
 export function SlideOpen({
 	children,
 	containerClassName,
 	containerStyle,
 	contentStyle,
 	contentClassName,
 	open,
+	ariaLabel,
+	ariaExpanded,
+	tabIndex,
 	ref,
-}: {
-	children: React.ReactNode
-	containerClassName?: string
-	containerStyle?: CSSProperties
-	contentClassName?: string
-	contentStyle?: CSSProperties
-	open: boolean
-	ref?: RefObject<HTMLDivElement>
-}) {
+	...props
+}: SlideOpenProps) {
 	return (
 		<div
 			className={twMerge(
@@ -27,6 +36,10 @@ export function SlideOpen({
 			style={containerStyle}
 			data-open={open}
 			ref={ref}
+			aria-label={ariaLabel}
+			aria-expanded={ariaExpanded ?? open}
+			tabIndex={tabIndex}
+			{...props}
 		>
 			<div
 				className={twMerge(

library/src/components/sidenavigation/SideNavigation.tsx

@@ -47,7 +47,7 @@ function Container({
 	return (
 		<nav
 			className={twMerge(
-				"bg-surface text-text-subtle relative flex size-full flex-col overflow-hidden truncate py-4",
+				"bg-surface text-text-subtle relative flex size-full flex-col overflow-hidden truncate",
 				className,
 			)}
 			role={role}
@@ -66,12 +66,10 @@ function Content({
 	children,
 	className,
 	style,
-	storeIdent = "side-nav-store",
 }: {
 	children: React.ReactNode
 	className?: string
 	style?: React.CSSProperties
-	storeIdent?: string
 }) {
 	const ref = useRef<HTMLDivElement>(null)
 
@@ -455,6 +453,7 @@ type _NestingItemProps = {
 	style?: React.CSSProperties
 	title: string // title is used to identify the item and as a key
 	sideNavStoreIdent?: string
+	id: string
 }
 
 function NestingItem({
@@ -464,6 +463,7 @@ function NestingItem({
 	sideNavStoreIdent = "default",
 	title,
 	_isOpen,
+	id,
 }: _NestingItemProps & { _isOpen?: boolean }) {
 	const {
 		getCurrentPathElement,
@@ -488,7 +488,7 @@ function NestingItem({
 	return (
 		<ButtonItem
 			onClick={() => {
-				pushPathElement(title)
+				pushPathElement(id)
 				setTransitioning(true)
 				window.setTimeout(() => setTransitioning(null), animTime * 1000)
 			}}
@@ -498,6 +498,7 @@ function NestingItem({
 					className="rounded-full p-1 box-border bg-neutral-full size-5.5 text-text-inverse"
 				/>
 			}
+			id={id}
 		>
 			{title}
 		</ButtonItem>
@@ -510,24 +511,26 @@ type _NestableNavigationContentProps = {
 	className?: string
 	style?: React.CSSProperties
 	sideNavStoreIdent?: string
+	onAnimationStart?: () => void
+	onAnimationComplete?: () => void
 }
 
 function searchChild(
 	children: React.ReactNode,
-	currentOpenedTitle: string | undefined,
+	currentOpenedId: string | undefined,
 ) {
 	let renderChild: React.ReactElement<_NestingItemProps> | null = null
 	React.Children.forEach(children, (child) => {
 		if (renderChild) return
 		if (
 			React.isValidElement<_NestingItemProps>(child) &&
-			child.props.title === currentOpenedTitle
+			child.props.id === currentOpenedId
 		) {
 			renderChild = child
 			return
 		}
 		if (React.isValidElement(child)) {
-			const ret = searchChild(child.props.children, currentOpenedTitle)
+			const ret = searchChild(child.props.children, currentOpenedId)
 			if (ret) renderChild = ret
 		}
 	})
@@ -542,14 +545,16 @@ function NestableNavigationContent({
 	sideNavStoreIdent = "default",
 	className,
 	style,
+	onAnimationStart,
+	onAnimationComplete,
 }: _NestableNavigationContentProps) {
-	const { popPathElement, getCurrentPathElement, setTransitioning } =
+	const { popPathElement, getCurrentPathElement, setTransitioning, path } =
 		useSideNavigationStore(sideNavStoreIdent)
 
-	const currentOpenedTitle = getCurrentPathElement()
+	const currentOpenedId = getCurrentPathElement()
 
-	const renderChild = currentOpenedTitle
-		? searchChild(children, currentOpenedTitle)
+	const renderChild = currentOpenedId
+		? searchChild(children, currentOpenedId)
 		: null
 
 	const [isBack, setIsBack] = useState(false)
@@ -561,7 +566,7 @@ function NestableNavigationContent({
 		>
 			<AnimatePresence initial={false} mode="popLayout">
 				{/* root level elements */}
-				{!renderChild && (
+				{!currentOpenedId && (
 					<motion.div
 						key="outside"
 						//layout
@@ -574,13 +579,19 @@ function NestableNavigationContent({
 							duration: animTime,
 							ease: "easeInOut",
 						}}
+						onAnimationStart={() => {
+							onAnimationStart?.()
+						}}
+						onAnimationComplete={() => {
+							onAnimationComplete?.()
+						}}
 					>
 						{children}
 					</motion.div>
 				)}
 			</AnimatePresence>
 			<AnimatePresence initial={false} mode="popLayout">
-				{renderChild && (
+				{currentOpenedId && (
 					<motion.div
 						key="go-back-btn"
 						initial={{ x: "100%" }}
@@ -615,12 +626,14 @@ function NestableNavigationContent({
 			<AnimatePresence
 				initial={false}
 				mode="popLayout"
-				onExitComplete={() => setIsBack(false)}
+				onExitComplete={() => {
+					setIsBack(false)
+				}}
 			>
 				{/* followed by the lower level elements */}
-				{renderChild && (
+				{renderChild != null && (
 					<motion.div
-						key={`inside-${currentOpenedTitle}`}
+						key={`inside-${currentOpenedId}`}
 						initial={{
 							x: isBack ? "-100%" : "100%",
 						}}
@@ -635,7 +648,13 @@ function NestableNavigationContent({
 							ease: "easeInOut",
 							//delay: animTime * 0.5,
 						}}
-						className="border-b-border-separator border-t-border-separator box-border flex size-full border-b-2 border-t-2 border-solid py-2"
+						className="border-b-border-separator border-t-border-separator box-border flex size-full border-b-2 border-t-2 border-solid"
+						onAnimationStart={() => {
+							onAnimationStart?.()
+						}}
+						onAnimationComplete={() => {
+							onAnimationComplete?.()
+						}}
 					>
 						{React.cloneElement(renderChild, { _isOpen: true })}
 					</motion.div>

library/src/components/sidenavigation/SideNavigationStore.tsx

@@ -10,22 +10,20 @@ const store = proxy<Record<string, SideNavigationStore>>({})
 
 export function useSideNavigationStore(sideNavStoreIdent: string) {
 	if (!store[sideNavStoreIdent]) {
-		store[sideNavStoreIdent] = {
+		store[sideNavStoreIdent] = proxy<SideNavigationStore>({
 			path: [],
 			transitioning: null,
-		}
+		})
 	}
 
 	const path = useSnapshot(store[sideNavStoreIdent])
-	console.info(
-		"SideNavigationStore -",
-		sideNavStoreIdent,
-		path.path.map((e) => e),
-	)
-
 	const setPath = useCallback(
 		(path: string[]) =>
-			store[sideNavStoreIdent].path.splice(0, path.length, ...path),
+			store[sideNavStoreIdent].path.splice(
+				0,
+				Number.POSITIVE_INFINITY,
+				...path,
+			),
 		[sideNavStoreIdent],
 	)