Implement useId and make id prop optional again

Author: phamduylong

packages/skeleton-react/src/lib/components/Navigation/Navigation.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useId } from 'react';
 import { NavContextState, NavRailProps, NavBarProps, NavTileProps } from './types.js';
 
 // Contexts ---
@@ -187,6 +187,11 @@ export const NavTile: React.FC<NavTileProps> = ({
 	// Get Context
 	const ctx = useContext<NavContextState>(NavContext);
 
+	const generatedId = useId();
+	if(!id) {
+		id = generatedId;
+	}
+
 	// Local
 	const TileElement = href ? 'a' : 'button';
 	const role = href ? undefined : 'button';

packages/skeleton-react/src/lib/components/Navigation/types.ts

@@ -97,7 +97,7 @@ export interface NavRailProps extends NavCommonProps {
 
 export interface NavTileProps {
 	/** Provide a unique ID. */
-	id: string;
+	id?: string;
 	/** Provide an href link; turns Tiles into an anchor */
 	href?: string;
 	/** Set the href target attribute. */

packages/skeleton-svelte/src/lib/components/Navigation/NavTile.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import { useId } from '$lib/internal/use-id.js';
 	import { getNavigationContext } from './context.js';
 	import type { NavTileProps } from './types.js';
 
 	let {
-		id,
+		id = useId(),
 		href,
 		target,
 		label,

packages/skeleton-svelte/src/lib/components/Navigation/types.ts

@@ -99,7 +99,7 @@ export interface NavRailProps extends NavCommonProps {
 
 export interface NavTileProps {
 	/** Provide a unique ID. */
-	id: string;
+	id?: string;
 	/** Provide an href link; turns Tiles into an anchor */
 	href?: string;
 	/** Set the href target attribute. */

packages/skeleton-svelte/src/lib/components/Toast/types.ts

@@ -30,7 +30,7 @@ export interface Toast {
 // Context ---
 
 // https://zagjs.com/components/react/toast#programmatic-control
-/** Provides accesss to the Toast Context API. */
+/** Provides access to the Toast Context API. */
 export interface ToastContext {
 	/** Used to create display a new Toast instance. */
 	create: (toast: Toast) => void;