@public-ui/sample-react 4.3.0-rc.7 → 4.3.0-rc.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "4.3.0-rc.7",
+  "version": "4.3.0-rc.8",
   "description": "This app contains samples for the KoliBri/Public UI",
   "type": "module",
   "license": "EUPL-1.2",
@@ -13,31 +13,32 @@
     "@stencil/core": "4.38.3",
     "@types/node": "26.1.2",
     "@types/papaparse": "5.5.2",
-    "@types/react": "19.2.17",
-    "@types/react-dom": "19.2.3",
-    "adopted-style-sheets": "1.1.9-rc.25",
     "papaparse": "5.5.4",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
     "react-hook-form": "7.83.0",
     "react-number-format": "5.4.5",
-    "react-router": "8.3.0",
-    "react-router-dom": "7.18.2",
     "tslib": "2.8.1",
     "typescript": "5.9.3",
     "world_countries_lists": "3.3.0",
     "zod": "4.4.3",
-    "@public-ui/components": "4.3.0-rc.7",
-    "@public-ui/react-hook-form-adapter": "4.3.0-rc.7",
-    "@public-ui/react-v19": "4.3.0-rc.7"
+    "@public-ui/react-hook-form-adapter": "4.3.0-rc.8",
+    "@public-ui/react-v19": "4.3.0-rc.8"
   },
   "devDependencies": {
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.4",
+    "adopted-style-sheets": "1.1.9-rc.25",
     "eslint": "9.39.5",
     "knip": "6.29.0",
     "prettier": "3.9.6",
     "prettier-plugin-organize-imports": "4.3.0",
     "stylelint": "17.14.1"
   },
+  "peerDependencies": {
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-router": "8.3.0",
+    "@public-ui/components": "4.3.0-rc.8"
+  },
   "files": [
     "assets",
     "src",

package/src/App.tsx

@@ -1,7 +1,6 @@
 import type { FC } from 'react';
 import React, { useEffect, useMemo, useState } from 'react';
-import { useLocation } from 'react-router';
-import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation, useSearchParams } from 'react-router';
 
 import PackageJson from '@public-ui/components/package.json';
 

package/src/components/Navigation.tsx

@@ -1,7 +1,7 @@
 import { KolInputText, KolTree, KolTreeItem } from '@public-ui/react-v19';
 import * as React from 'react';
 import { useState } from 'react';
-import { useHref, useMatch, useResolvedPath } from 'react-router-dom';
+import { useHref, useMatch, useResolvedPath } from 'react-router';
 import type { Route, Routes } from '../shares/types';
 
 type NavigationProps = {

package/src/components/SampleColumns.tsx

@@ -1,5 +1,5 @@
 import React, { type PropsWithChildren } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 export function SampleColumns({ children }: PropsWithChildren) {
 	const [searchParams] = useSearchParams();

package/src/components/button/expert-slot.tsx

@@ -1,6 +1,6 @@
 import { KolButton, KolHeading, KolIcon } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React, { useRef } from 'react';
+import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
 import { SampleDescription } from '../SampleDescription';
 
@@ -10,7 +10,6 @@ const KolTooltip = 'kol-tooltip-wc' as unknown as React.FC<{ _label: string }>;
 
 export const ButtonExpertSlot: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
-	const iconButtonRef = useRef<HTMLElement>(null);
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
@@ -38,7 +37,7 @@ export const ButtonExpertSlot: FC = () => {
 						<KolButton _icons="kolicon-alert-warning" _label="" _variant="danger" _on={dummyEventHandler}>
 							<span slot="expert">Delete with custom text</span>
 						</KolButton>
-						<KolButton ref={iconButtonRef as React.Ref<never>} _label="" _variant="danger" _on={dummyEventHandler}>
+						<KolButton _label="" _variant="danger" _on={dummyEventHandler}>
 							<KolIcon _icons="kolicon-alert-warning" _label="Delete with custom text" slot="expert" />
 						</KolButton>
 						<KolTooltip _label="Delete with custom text" />

package/src/components/button/variants.tsx

@@ -1,7 +1,7 @@
 import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { useToasterService } from '../../hooks/useToasterService';
 import { fetchVariantData } from '../../shares/fetchVariantData';
 import { getCustomThemes } from '../../shares/store';

package/src/components/drawer/basic.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import type { AlignPropType } from '@public-ui/components';
 import { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';

package/src/components/drawer/controlled.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import type { AlignPropType } from '@public-ui/components';
 import { KolButton, KolDrawer } from '@public-ui/react-v19';

package/src/components/icon/font.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import { KolButton, KolIcon, KolInputText } from '@public-ui/react-v19';
 

package/src/components/link/link-react-router.tsx

@@ -1,7 +1,7 @@
 import { KolLink } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkReactRouter: FC = () => {

package/src/components/link/variant.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import { KolLink } from '@public-ui/react-v19';
 import { fetchVariantData } from '../../shares/fetchVariantData';

package/src/components/link-button/basic.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { KolLinkButton } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { useToasterService } from '../../hooks/useToasterService';
 import { fetchVariantData } from '../../shares/fetchVariantData';
 import { getCustomThemes } from '../../shares/store';

package/src/components/toast/basic.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import type { AlertTypePropType } from '@public-ui/components';
 import { ToasterService } from '@public-ui/components';

package/src/components/toast/configurator.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 
 import type { AlertTypePropType } from '@public-ui/components';
 import { ToasterService } from '@public-ui/components';

package/src/scenarios/focus-elements.tsx

@@ -33,7 +33,7 @@ import {
 } from '@public-ui/react-v19';
 import type { FC, ForwardRefRenderFunction } from 'react';
 import React, { forwardRef, useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router';
 import { SampleDescription } from '../components/SampleDescription';
 
 const getFocusElements = () => {