R: use React.PropsWithChildren

rsconcept/frontend/src/app/GlobalProviders.tsx

@@ -23,7 +23,7 @@ const logError = (error: Error, info: { componentStack?: string | null | undefin
 };
 
 // prettier-ignore
-function GlobalProviders({ children }: { children: React.ReactNode }) {
+function GlobalProviders({ children }: React.PropsWithChildren) {
   return (
   <ErrorBoundary
     FallbackComponent={ErrorFallback}

rsconcept/frontend/src/components/Icons.tsx

@@ -156,7 +156,6 @@ interface IconSVGProps {
   size?: string;
   className?: string;
   props?: React.SVGProps<SVGSVGElement>;
-  children: React.ReactNode;
 }
 
 export interface IconProps {
@@ -164,7 +163,7 @@ export interface IconProps {
   className?: string;
 }
 
-function MetaIconSVG({ viewBox, size = '1.5rem', className, props, children }: IconSVGProps) {
+function MetaIconSVG({ viewBox, size = '1.5rem', className, props, children }: React.PropsWithChildren<IconSVGProps>) {
   return (
     <svg
       width={size}

rsconcept/frontend/src/components/ui/Dropdown.tsx

@@ -14,15 +14,19 @@ interface DropdownProps extends CProps.Styling {
 
   /** Indicates whether the dropdown is open. */
   isOpen: boolean;
-
-  /** Children to render inside the component. */
-  children: React.ReactNode;
 }
 
 /**
  *  Dropdown animated component that displays a list of children with optional positioning and visibility control.
  */
-function Dropdown({ isOpen, stretchLeft, stretchTop, className, children, ...restProps }: DropdownProps) {
+function Dropdown({
+  isOpen,
+  stretchLeft,
+  stretchTop,
+  className,
+  children,
+  ...restProps
+}: React.PropsWithChildren<DropdownProps>) {
   return (
     <div className='relative'>
       <motion.div

rsconcept/frontend/src/components/ui/Modal.tsx

@@ -27,8 +27,6 @@ export interface ModalProps extends CProps.Styling {
   beforeSubmit?: () => boolean;
   onSubmit?: () => void;
   onCancel?: () => void;
-
-  children: React.ReactNode;
 }
 
 function Modal({
@@ -45,7 +43,7 @@ function Modal({
   overflowVisible,
   submitText = 'Продолжить',
   ...restProps
-}: ModalProps) {
+}: React.PropsWithChildren<ModalProps>) {
   const ref = useRef(null);
   useEscapeKey(hideWindow);
 

rsconcept/frontend/src/components/ui/Overlay.tsx

@@ -4,12 +4,17 @@ import { CProps } from '../props';
 
 interface OverlayProps extends CProps.Styling {
   id?: string;
-  children: React.ReactNode;
   position?: string;
   layer?: string;
 }
 
-function Overlay({ children, className, position = 'top-0 right-0', layer = 'z-pop', ...restProps }: OverlayProps) {
+function Overlay({
+  children,
+  className,
+  position = 'top-0 right-0',
+  layer = 'z-pop',
+  ...restProps
+}: React.PropsWithChildren<OverlayProps>) {
   return (
     <div className='relative'>
       <div className={clsx('absolute', className, position, layer)} {...restProps}>

rsconcept/frontend/src/components/wrap/DataLoader.tsx

@@ -11,11 +11,17 @@ interface DataLoaderProps extends CProps.AnimatedDiv {
   isLoading?: boolean;
   error?: ErrorData;
   hasNoData?: boolean;
-
-  children: React.ReactNode;
 }
 
-function DataLoader({ id, isLoading, hasNoData, error, className, children, ...restProps }: DataLoaderProps) {
+function DataLoader({
+  id,
+  isLoading,
+  hasNoData,
+  error,
+  className,
+  children,
+  ...restProps
+}: React.PropsWithChildren<DataLoaderProps>) {
   return (
     <AnimatePresence mode='wait'>
       {!isLoading && !error && !hasNoData ? (

rsconcept/frontend/src/components/wrap/RequireAuth.tsx

@@ -8,11 +8,7 @@ import Loader from '../ui/Loader';
 import TextURL from '../ui/TextURL';
 import AnimateFade from './AnimateFade';
 
-interface RequireAuthProps {
-  children: React.ReactNode;
-}
-
-function RequireAuth({ children }: RequireAuthProps) {
+function RequireAuth({ children }: React.PropsWithChildren) {
   const { user, loading } = useAuth();
 
   return (

rsconcept/frontend/src/context/AccessModeContext.tsx

@@ -19,12 +19,7 @@ export const useAccessMode = () => {
   return context;
 };
 
-interface AccessModeStateProps {
-  children: React.ReactNode;
-}
-
-export const AccessModeState = ({ children }: AccessModeStateProps) => {
+export const AccessModeState = ({ children }: React.PropsWithChildren) => {
   const [accessLevel, setAccessLevel] = useState<UserLevel>(UserLevel.READER);
-
   return <AccessContext.Provider value={{ accessLevel, setAccessLevel }}>{children}</AccessContext.Provider>;
 };

rsconcept/frontend/src/context/AuthContext.tsx

@@ -52,11 +52,7 @@ export const useAuth = () => {
   return context;
 };
 
-interface AuthStateProps {
-  children: React.ReactNode;
-}
-
-export const AuthState = ({ children }: AuthStateProps) => {
+export const AuthState = ({ children }: React.PropsWithChildren) => {
   const { users } = useUsers();
   const [user, setUser] = useState<ICurrentUser | undefined>(undefined);
   const [loading, setLoading] = useState(true);

rsconcept/frontend/src/context/ConceptOptionsContext.tsx

@@ -52,11 +52,7 @@ export const useConceptOptions = () => {
   return context;
 };
 
-interface OptionsStateProps {
-  children: React.ReactNode;
-}
-
-export const OptionsState = ({ children }: OptionsStateProps) => {
+export const OptionsState = ({ children }: React.PropsWithChildren) => {
   const [darkMode, setDarkMode] = useLocalStorage(storage.themeDark, false);
   const [adminMode, setAdminMode] = useLocalStorage(storage.optionsAdmin, false);
   const [showHelp, setShowHelp] = useLocalStorage(storage.optionsHelp, true);

rsconcept/frontend/src/context/GlobalOssContext.tsx

@@ -32,11 +32,7 @@ export const useGlobalOss = (): IGlobalOssContext => {
   return context;
 };
 
-interface GlobalOssStateProps {
-  children: React.ReactNode;
-}
-
-export const GlobalOssState = ({ children }: GlobalOssStateProps) => {
+export const GlobalOssState = ({ children }: React.PropsWithChildren) => {
   const library = useLibrary();
   const [isValid, setIsValid] = useState(false);
   const [ossID, setIdInternal] = useState<string | undefined>(undefined);

rsconcept/frontend/src/context/LibraryContext.tsx

@@ -61,11 +61,7 @@ export const useLibrary = (): ILibraryContext => {
   return context;
 };
 
-interface LibraryStateProps {
-  children: React.ReactNode;
-}
-
-export const LibraryState = ({ children }: LibraryStateProps) => {
+export const LibraryState = ({ children }: React.PropsWithChildren) => {
   const { user, loading: userLoading } = useAuth();
   const { adminMode } = useConceptOptions();
 

rsconcept/frontend/src/context/NavigationContext.tsx

@@ -27,11 +27,7 @@ export const useConceptNavigation = () => {
   return context;
 };
 
-interface NavigationStateProps {
-  children: React.ReactNode;
-}
-
-export const NavigationState = ({ children }: NavigationStateProps) => {
+export const NavigationState = ({ children }: React.PropsWithChildren) => {
   const router = useNavigate();
   const { pathname } = useLocation();
 

rsconcept/frontend/src/context/OssContext.tsx

@@ -78,10 +78,9 @@ export const useOSS = () => {
 
 interface OssStateProps {
   itemID: string;
-  children: React.ReactNode;
 }
 
-export const OssState = ({ itemID, children }: OssStateProps) => {
+export const OssState = ({ itemID, children }: React.PropsWithChildren<OssStateProps>) => {
   const library = useLibrary();
   const oss = useGlobalOss();
   const model = oss.schema;

rsconcept/frontend/src/context/RSFormContext.tsx

@@ -107,10 +107,9 @@ export const useRSForm = () => {
 interface RSFormStateProps {
   itemID: string;
   versionID?: string;
-  children: React.ReactNode;
 }
 
-export const RSFormState = ({ itemID, versionID, children }: RSFormStateProps) => {
+export const RSFormState = ({ itemID, versionID, children }: React.PropsWithChildren<RSFormStateProps>) => {
   const library = useLibrary();
   const oss = useGlobalOss();
   const { user } = useAuth();

rsconcept/frontend/src/context/UserProfileContext.tsx

@@ -30,11 +30,7 @@ export const useUserProfile = () => {
   return context;
 };
 
-interface UserProfileStateProps {
-  children: React.ReactNode;
-}
-
-export const UserProfileState = ({ children }: UserProfileStateProps) => {
+export const UserProfileState = ({ children }: React.PropsWithChildren) => {
   const { users } = useUsers();
   const [user, setUser] = useState<IUserProfile | undefined>(undefined);
   const [loading, setLoading] = useState(true);

rsconcept/frontend/src/context/UsersContext.tsx

@@ -21,11 +21,7 @@ export const useUsers = (): IUsersContext => {
   return context;
 };
 
-interface UsersStateProps {
-  children: React.ReactNode;
-}
-
-export const UsersState = ({ children }: UsersStateProps) => {
+export const UsersState = ({ children }: React.PropsWithChildren) => {
   const [users, setUsers] = useState<IUserInfo[]>([]);
 
   function getUserLabel(userID: number | null) {

rsconcept/frontend/src/pages/OssPage/OssEditContext.tsx

@@ -86,13 +86,11 @@ export const useOssEdit = () => {
 };
 
 interface OssEditStateProps {
-  // isModified: boolean;
   selected: OperationID[];
   setSelected: React.Dispatch<React.SetStateAction<OperationID[]>>;
-  children: React.ReactNode;
 }
 
-export const OssEditState = ({ selected, setSelected, children }: OssEditStateProps) => {
+export const OssEditState = ({ selected, setSelected, children }: React.PropsWithChildren<OssEditStateProps>) => {
   const router = useConceptNavigation();
   const { user } = useAuth();
   const { adminMode } = useConceptOptions();

rsconcept/frontend/src/pages/RSFormPage/RSEditContext.tsx

@@ -126,7 +126,6 @@ interface RSEditStateProps {
 
   onCreateCst?: (newCst: IConstituentaMeta) => void;
   onDeleteCst?: (newActive?: ConstituentaID) => void;
-  children: React.ReactNode;
 }
 
 export const RSEditState = ({
@@ -137,7 +136,7 @@ export const RSEditState = ({
   onCreateCst,
   onDeleteCst,
   children
-}: RSEditStateProps) => {
+}: React.PropsWithChildren<RSEditStateProps>) => {
   const router = useConceptNavigation();
   const { user } = useAuth();
   const { adminMode } = useConceptOptions();