@qwickapps/react-framework 1.4.9 → 1.5.1

package/src/components/forms/FormSelect.tsx

@@ -0,0 +1,140 @@
+/**
+ * FormSelect - Themed form select component wrapping MUI Select
+ *
+ * Features:
+ * - Uses QwickApps CSS theme variables for consistent styling
+ * - Simplified select-only interface (use FormField for mixed inputs)
+ * - Support for placeholder, size variants, and helper text
+ * - Integrated with MUI FormControl and Select
+ * - Base props support for grid behavior and styling
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import React from 'react';
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  FormHelperText,
+} from '@mui/material';
+import { useBaseProps, WithBaseProps, QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+
+export interface FormSelectOption {
+  value: string | number;
+  label: string;
+}
+
+interface FormSelectBaseProps {
+  label?: string;
+  value: string | number;
+  onChange: (value: string | number) => void;
+  options: FormSelectOption[];
+  helperText?: string;
+  required?: boolean;
+  disabled?: boolean;
+  fullWidth?: boolean;
+  size?: 'small' | 'medium';
+  placeholder?: string;
+}
+
+export interface FormSelectProps extends WithBaseProps<FormSelectBaseProps> {}
+
+export const FormSelect = React.forwardRef<HTMLDivElement, FormSelectProps>((props, ref) => {
+  const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
+
+  const {
+    label,
+    value,
+    onChange,
+    options,
+    helperText,
+    required = false,
+    disabled = false,
+    fullWidth = true,
+    size = 'small',
+    placeholder,
+  } = restProps as FormSelectBaseProps;
+
+  const handleChange = (e: unknown) => {
+    onChange(e.target.value);
+  };
+
+  const selectStyles = {
+    p: 1,
+    pl: 1.6,
+    ...(label ? { mt: 1, color: 'var(--theme-text-primary)' } : {}),
+    backgroundColor: 'var(--theme-surface-variant)',
+    borderColor: 'var(--theme-surface)',
+    color: 'var(--theme-text-primary)',
+    borderRadius: 1,
+    ...styleProps.sx,
+  };
+
+  const labelStyles = {
+    left: -12,
+    fontWeight: 600,
+    color: 'var(--theme-text-primary)',
+  };
+
+  const helperTextStyles = {
+    color: 'var(--theme-secondary)',
+  };
+
+  return (
+    <FormControl
+      ref={ref}
+      fullWidth={fullWidth}
+      size={size}
+      {...htmlProps}
+      {...styleProps}
+      // Store grid props as data attributes for ColumnLayout to pick up
+      {...(gridProps && {
+        'data-grid-span': gridProps.span,
+        'data-grid-xs': gridProps.xs,
+        'data-grid-sm': gridProps.sm,
+        'data-grid-md': gridProps.md,
+        'data-grid-lg': gridProps.lg,
+        'data-grid-xl': gridProps.xl,
+      })}
+    >
+      {label && (
+        <InputLabel sx={labelStyles} shrink>
+          {label}
+        </InputLabel>
+      )}
+
+      <Select
+        value={value}
+        onChange={handleChange}
+        disabled={disabled}
+        required={required}
+        displayEmpty={!!placeholder}
+        sx={selectStyles}
+      >
+        {placeholder && (
+          <MenuItem value="" disabled>
+            {placeholder}
+          </MenuItem>
+        )}
+        {options.map((opt) => (
+          <MenuItem key={opt.value} value={opt.value}>
+            {opt.label}
+          </MenuItem>
+        ))}
+      </Select>
+
+      {helperText && (
+        <FormHelperText sx={helperTextStyles}>{helperText}</FormHelperText>
+      )}
+    </FormControl>
+  );
+});
+
+FormSelect.displayName = 'FormSelect';
+
+// Mark as QwickApp component
+(FormSelect as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
+
+export default FormSelect;

package/src/components/forms/index.ts

@@ -1,7 +1,19 @@
 /**
  * Enhanced form components with QwickApps base props support
- * 
+ *
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 export { default as FormBlock } from './FormBlock';
 export type { FormBlockProps } from './FormBlock';
+
+export { default as FormField } from './FormField';
+export type { FormFieldProps, FormFieldOption } from './FormField';
+
+export { default as FormSelect } from './FormSelect';
+export type { FormSelectProps, FormSelectOption } from './FormSelect';
+
+export { default as FormCheckbox } from './FormCheckbox';
+export type { FormCheckboxProps } from './FormCheckbox';
+
+export { default as Captcha } from './Captcha';
+export type { CaptchaProps, CaptchaProvider } from './Captcha';

package/src/components/index.ts

@@ -18,12 +18,15 @@ import '../schemas/transformers/registry';
 export * from './base';
 export * from './blocks';
 export * from './buttons';
+export * from './dialogs';
 export * from './forms';
 export * from './input';
 export * from './layout';
 export * from './pages';
-export * from './Scaffold';
-export * from './ResponsiveMenu';
+export { default as Scaffold } from './Scaffold';
+export type { ScaffoldProps, AppBarProps } from './Scaffold';
+export { default as ResponsiveMenu } from './ResponsiveMenu';
+export type { ResponsiveMenuProps } from './ResponsiveMenu';
 export * from './QwickApp';
 export * from './AccessibilityChecker';
 export * from './ErrorBoundary';
@@ -34,6 +37,9 @@ export * from './Breadcrumbs';
 export { default as Logo } from './Logo';
 export type { LogoProps } from './Logo';
 
+export { default as ProductLogo } from './ProductLogo';
+export type { ProductLogoProps } from './ProductLogo';
+
 export { default as QwickAppsLogo } from './QwickAppsLogo';
 export type { QwickAppsLogoProps } from './QwickAppsLogo';
 
@@ -48,3 +54,8 @@ export type { HtmlProps } from './Html';
 
 export { default as Markdown } from './Markdown';
 export type { MarkdownProps } from './Markdown';
+
+// Shared utilities for serialization
+export { createSerializableView } from './shared/createSerializableView';
+export type { SerializableComponent } from './shared/createSerializableView';
+export type { ViewProps } from './shared/viewProps';

package/src/components/input/ChoiceInputField.tsx

@@ -16,12 +16,11 @@ import {
   Alert,
   Box,
   Button,
-  Paper,
   Typography
 } from '@mui/material';
 import { Add as AddIcon } from '@mui/icons-material';
 import HtmlInputField from './HtmlInputField';
-import ChoiceInputFieldModel from '../../schemas/ChoiceInputFieldSchema';
+// import ChoiceInputFieldModel from '../../schemas/ChoiceInputFieldSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 

package/src/components/input/HtmlInputField.tsx

@@ -22,8 +22,7 @@ import {
   Collapse,
   Alert,
   ButtonGroup,
-  Divider,
-} from '@mui/material';
+  } from '@mui/material';
 import {
   FormatBold as BoldIcon,
   FormatItalic as ItalicIcon,
@@ -35,7 +34,7 @@ import {
 } from '@mui/icons-material';
 import SafeSpan from '../SafeSpan';
 import sanitizeHtml from 'sanitize-html';
-import HtmlInputFieldModel from '../../schemas/HtmlInputFieldSchema';
+// import HtmlInputFieldModel from '../../schemas/HtmlInputFieldSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 

package/src/components/input/SelectInputField.tsx

@@ -20,7 +20,7 @@ import {
   Select,
   SelectChangeEvent,
 } from '@mui/material';
-import SelectInputFieldModel, { SelectOption } from '../../schemas/SelectInputFieldSchema';
+import { SelectOption } from '../../schemas/SelectInputFieldSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 
@@ -63,10 +63,36 @@ function SelectInputFieldView({
   };
 
   // Filter out ViewProps that conflict with FormControl
-  const { margin, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, 
-          width, height, minWidth, maxWidth, minHeight, maxHeight, sx, style, 
-          span, xs, sm, md, lg, xl, background, backgroundImage, backgroundGradient, textAlign,
-          className, ...filteredProps } = restProps;
+  const {
+    margin: _margin,
+    padding: _padding,
+    paddingX: _paddingX,
+    paddingY: _paddingY,
+    paddingTop: _paddingTop,
+    paddingRight: _paddingRight,
+    paddingBottom: _paddingBottom,
+    paddingLeft: _paddingLeft,
+    width: _width,
+    height: _height,
+    minWidth: _minWidth,
+    maxWidth: _maxWidth,
+    minHeight: _minHeight,
+    maxHeight: _maxHeight,
+    sx,
+    style,
+    span: _span,
+    xs: _xs,
+    sm: _sm,
+    md: _md,
+    lg: _lg,
+    xl: _xl,
+    background: _background,
+    backgroundImage: _backgroundImage,
+    backgroundGradient: _backgroundGradient,
+    textAlign: _textAlign,
+    className,
+    ...filteredProps
+  } = restProps;
 
   const labelId = label ? `select-label-${label.toLowerCase().replace(/\s+/g, '-')}` : undefined;
 

package/src/components/input/SwitchInputField.tsx

@@ -18,7 +18,6 @@ import {
   FormHelperText,
   Switch,
 } from '@mui/material';
-import SwitchInputFieldModel from '../../schemas/SwitchInputFieldSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 
@@ -52,9 +51,9 @@ function SwitchInputFieldView({
   };
 
   // Filter out ViewProps that conflict with FormControl
-  const { margin, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, 
-          width, height, minWidth, maxWidth, minHeight, maxHeight, sx, style, 
-          span, xs, sm, md, lg, xl, background, backgroundImage, backgroundGradient, textAlign,
+  const { margin: _margin, padding: _padding, paddingX: _paddingX, paddingY: _paddingY, paddingTop: _paddingTop, paddingRight: _paddingRight, paddingBottom: _paddingBottom, paddingLeft: _paddingLeft,
+          width: _width, height: _height, minWidth: _minWidth, maxWidth: _maxWidth, minHeight: _minHeight, maxHeight: _maxHeight, sx, style,
+          span: _span, xs: _xs, sm: _sm, md: _md, lg: _lg, xl: _xl, background: _background, backgroundImage: _backgroundImage, backgroundGradient: _backgroundGradient, textAlign: _textAlign,
           className, ...filteredProps } = restProps;
 
   return (

package/src/components/input/TextField.tsx

@@ -21,7 +21,7 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>((props
   const { gridProps, styleProps, htmlProps, restProps } = useBaseProps(props);
 
   // Extract commonly used props we may inspect
-  const { placeholder, value, defaultValue, slotProps, InputLabelProps, InputProps, variant = 'outlined', ...other } = restProps as any;
+  const { placeholder, value, defaultValue, slotProps, InputLabelProps, InputProps, variant = 'outlined', ...other } = restProps as MuiTextFieldProps;
 
   // Determine whether label should shrink automatically when a placeholder is shown.
   // MUI does not shrink the label for outlined variant with just a placeholder (and empty value) by default.
@@ -55,7 +55,7 @@ export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>((props
   }
 
   // Mark as QwickApp component
-  (TextField as any)[QWICKAPP_COMPONENT] = true;
+  (TextField as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
   return (
     <MuiTextField

package/src/components/input/TextInputField.tsx

@@ -11,9 +11,9 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { ReactElement } from 'react';
+import React from 'react';
 import { TextField, TextFieldProps } from '@mui/material';
-import TextInputFieldModel from '../../schemas/TextInputFieldSchema';
+// import TextInputFieldModel from '../../schemas/TextInputFieldSchema';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 
@@ -59,10 +59,36 @@ function TextInputFieldView({
   };
 
   // Filter out ViewProps that conflict with TextField
-  const { margin, padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, 
-          width, height, minWidth, maxWidth, minHeight, maxHeight, sx, style, 
-          span, xs, sm, md, lg, xl, background, backgroundImage, backgroundGradient, textAlign,
-          className, ...filteredProps } = restProps;
+  const {
+    margin: _margin,
+    padding: _padding,
+    paddingX: _paddingX,
+    paddingY: _paddingY,
+    paddingTop: _paddingTop,
+    paddingRight: _paddingRight,
+    paddingBottom: _paddingBottom,
+    paddingLeft: _paddingLeft,
+    width: _width,
+    height: _height,
+    minWidth: _minWidth,
+    maxWidth: _maxWidth,
+    minHeight: _minHeight,
+    maxHeight: _maxHeight,
+    sx,
+    style,
+    span: _span,
+    xs: _xs,
+    sm: _sm,
+    md: _md,
+    lg: _lg,
+    xl: _xl,
+    background: _background,
+    backgroundImage: _backgroundImage,
+    backgroundGradient: _backgroundGradient,
+    textAlign: _textAlign,
+    className,
+    ...filteredProps
+  } = restProps;
 
   return (
     <TextField

package/src/components/layout/CollapsibleLayout/CollapsibleLayout.tsx

@@ -26,13 +26,10 @@ import {
   SxProps,
   Theme,
 } from '@mui/material';
-import { 
+import {
   ExpandMore as ExpandMoreIcon,
   ExpandLess as ExpandLessIcon,
-  Visibility as VisibilityIcon,
-  VisibilityOff as VisibilityOffIcon,
 } from '@mui/icons-material';
-import { WithDataBinding } from '@qwickapps/schema';
 import { QWICKAPP_COMPONENT, useBaseProps, useDataBinding } from '../../../hooks';
 import CollapsibleLayoutModel from '../../../schemas/CollapsibleLayoutSchema';
 import {
@@ -170,13 +167,13 @@ function CollapsibleLayoutView({
   const { styleProps, htmlProps, restProps: otherProps } = useBaseProps(restProps);
   
   // Mark as QwickApp component
-  (CollapsibleLayoutView as any)[QWICKAPP_COMPONENT] = true;
+  (CollapsibleLayoutView as Record<string, unknown>)[QWICKAPP_COMPONENT] = true;
 
   // Determine controlled vs uncontrolled usage
   const controlled = collapsedProp !== undefined;
   
   // State management
-  const { collapsed, toggle, setCollapsed } = useCollapsibleState(
+  const { collapsed, toggle } = useCollapsibleState(
     controlled,
     collapsedProp,
     defaultCollapsed,
@@ -500,18 +497,21 @@ function CollapsibleLayoutView({
 function CollapsibleLayout(props: CollapsibleLayoutProps) {
   const { dataSource, bindingOptions, ...restProps } = props;
 
+  // Always call hooks unconditionally
+  const bindingResult = useDataBinding<CollapsibleLayoutModel>(
+    dataSource || '',
+    restProps as Partial<CollapsibleLayoutModel>,
+    CollapsibleLayoutModel.getSchema(),
+    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
+  );
+
   // If no dataSource, use traditional props
   if (!dataSource) {
     return <CollapsibleLayoutView {...restProps} />;
   }
 
-  // Use data binding
-  const { dataSource: _source, loading, error, cached, ...collapsibleProps } = useDataBinding<CollapsibleLayoutModel>(
-    dataSource,
-    restProps as Partial<CollapsibleLayoutModel>,
-    CollapsibleLayoutModel.getSchema(),
-    { cache: true, cacheTTL: 300000, strict: false, ...bindingOptions }
-  );
+  // Use data binding result
+  const { loading, error, ...collapsibleProps } = bindingResult;
 
   // Show loading state
   if (loading) {

package/src/components/layout/GridCell.tsx

@@ -34,19 +34,20 @@ export interface GridCellProps extends ViewProps {
  * This component receives fully processed props from createSerializableView
  * and renders the grid cell using Material-UI Box with all styling applied.
  */
-function GridCellView({ children, gridProps, ...props }: GridCellProps & { gridProps?: any }) {
+function GridCellView({ children, gridProps, ...props }: GridCellProps & { gridProps?: unknown }) {
+  const typedGridProps = gridProps as { span?: number; xs?: number; sm?: number; md?: number; lg?: number; xl?: number } | undefined;
   return (
     <Box
       {...props}
       // Store grid props as data attributes for GridLayout to pick up
-      {...(gridProps && {
-        'data-grid-span': gridProps.span,
-        'data-grid-xs': gridProps.xs,
-        'data-grid-sm': gridProps.sm,
-        'data-grid-md': gridProps.md,
-        'data-grid-lg': gridProps.lg,
-        'data-grid-xl': gridProps.xl,
-      })}
+      {...(typedGridProps ? {
+        'data-grid-span': typedGridProps.span,
+        'data-grid-xs': typedGridProps.xs,
+        'data-grid-sm': typedGridProps.sm,
+        'data-grid-md': typedGridProps.md,
+        'data-grid-lg': typedGridProps.lg,
+        'data-grid-xl': typedGridProps.xl,
+      } : {})}
     >
       {children}
     </Box>

package/src/components/layout/GridCellWrapper.tsx

@@ -58,7 +58,7 @@ const GridCellWrapper: React.FC<GridCellWrapperProps> = ({
   const responsiveSizing = fullWidth 
     ? { size: 12 }
     : (() => {
-        const sizeConfig: any = {};
+        const sizeConfig: unknown = {};
         if (xs !== undefined) sizeConfig.xs = xs;
         if (sm !== undefined) sizeConfig.sm = sm;
         if (md !== undefined) sizeConfig.md = md;

package/src/components/layout/GridLayout.tsx

@@ -16,10 +16,9 @@
  */
 
 import React from 'react';
-import { Grid, SxProps, Theme } from '@mui/material';
-import { SpacingValue, resolveSpacing } from '../../utils/spacing';
-import { DimensionValue, resolveDimension } from '../../utils/dimensions';
-import { QWICKAPP_COMPONENT } from '../../hooks/useBaseProps';
+import { Grid } from '@mui/material';
+import { resolveSpacing } from '../../utils/spacing';
+import { resolveDimension } from '../../utils/dimensions';
 import { createSerializableView, SerializableComponent } from '../shared/createSerializableView';
 import { ViewProps } from '../shared/viewProps';
 
@@ -66,9 +65,9 @@ function GridLayoutView({
   maxWidth,
   gridProps,
   ...props
-}: GridLayoutProps & { gridProps?: any }) {
+}: GridLayoutProps & { gridProps?: unknown }) {
   
-  const resolvedSpacing = resolveSpacing(spacing, 'gap');
+  const resolvedSpacing = resolveSpacing(spacing);
   
   // Process children to handle grid props
   const processChildren = () => {
@@ -80,73 +79,71 @@ function GridLayoutView({
       }
 
       // Extract grid props from data attributes or props
-      let gridProps: any = {};
-      
-      // Check if it's a QwickApp component
-      const isQwickApp = (child.type as any)?.[QWICKAPP_COMPONENT];
-      
+      let childGridProps: Record<string, unknown> = {};
+
       // Extract grid props from both data attributes (QwickApp) and direct props (regular)
-      const props = child.props as any;
-      const span = props['data-grid-span'] || props.span;
-      const xs = props['data-grid-xs'] || props.xs;
-      const sm = props['data-grid-sm'] || props.sm;
-      const md = props['data-grid-md'] || props.md;
-      const lg = props['data-grid-lg'] || props.lg;
-      const xl = props['data-grid-xl'] || props.xl;
-      
+      const childProps = child.props as Record<string, unknown>;
+      const span = childProps['data-grid-span'] || childProps.span;
+      const xs = childProps['data-grid-xs'] || childProps.xs;
+      const sm = childProps['data-grid-sm'] || childProps.sm;
+      const md = childProps['data-grid-md'] || childProps.md;
+      const lg = childProps['data-grid-lg'] || childProps.lg;
+      const xl = childProps['data-grid-xl'] || childProps.xl;
+
       if (span || xs || sm || md || lg || xl) {
         // Use span if available, otherwise use breakpoint values
         if (span) {
-          gridProps = {
+          childGridProps = {
             size: span,
           };
         } else {
           // Build responsive size object for MUI v6
-          const sizeConfig: any = {};
+          const sizeConfig: Record<string, unknown> = {};
           if (xs) sizeConfig.xs = xs;
           if (sm) sizeConfig.sm = sm;
           if (md) sizeConfig.md = md;
           if (lg) sizeConfig.lg = lg;
           if (xl) sizeConfig.xl = xl;
-          
-          gridProps = {
+
+          childGridProps = {
             size: sizeConfig,
           };
         }
       }
 
       // If columns prop is set and no grid props, auto-distribute responsively
-      if (columns && Object.keys(gridProps).length === 0) {
+      if (columns && Object.keys(childGridProps).length === 0) {
         // Make responsive: single column on mobile, fewer columns on tablet, full columns on desktop
-        gridProps = {
+        childGridProps = {
           size: {
             xs: 12, // Single column on mobile
             sm: columns >= 3 ? 6 : 12 / Math.min(columns, 2), // 2 columns max on small screens
-            md: 12 / Math.min(columns, 3), // 3 columns max on medium screens  
+            md: 12 / Math.min(columns, 3), // 3 columns max on medium screens
             lg: 12 / columns, // Full columns on large screens
           },
         };
       }
 
       // If has grid props, wrap in Grid
-      if (Object.keys(gridProps).length > 0) {
+      if (Object.keys(childGridProps).length > 0) {
         // Clean grid data attributes from child to avoid duplication
-        const cleanedProps = { ...child.props };
+        const cleanedProps = { ...(child.props as Record<string, unknown>) };
         delete cleanedProps['data-grid-span'];
         delete cleanedProps['data-grid-xs'];
         delete cleanedProps['data-grid-sm'];
         delete cleanedProps['data-grid-md'];
         delete cleanedProps['data-grid-lg'];
         delete cleanedProps['data-grid-xl'];
-        
+
         return (
-          <Grid key={child.key || index} {...gridProps}>
+          <Grid key={child.key || index} {...childGridProps}>
             {React.cloneElement(child, cleanedProps)}
           </Grid>
         );
       }
 
-      return child;
+      // Return child wrapped in Fragment with key
+      return <React.Fragment key={child.key || index}>{child}</React.Fragment>;
     });
   };
 
@@ -155,7 +152,7 @@ function GridLayoutView({
       container
       spacing={resolvedSpacing}
       {...props}
-      {...(gridProps && { 'data-grid': JSON.stringify(gridProps) })}
+      {...(gridProps ? { 'data-grid': JSON.stringify(gridProps) } : {})}
       sx={{
         width: '100%', // Ensure full width by default in MUI v6
         height: resolveDimension(height, 'height'),

package/src/components/pages/FormPage.tsx

@@ -86,7 +86,6 @@ export const FormPage: React.FC<FormPageProps> = ({
   maxWidth = 'sm',
   background = 'default',
   backgroundImage,
-  sx = {},
 }) => {
   return (
     <FormBlock

package/src/components/pages/Page.tsx

@@ -223,7 +223,7 @@ export const PageView: React.FC<PageViewProps> = ({
     if (!isPrintMode) return;
     const styleId = 'qwickapps-print-page-setup';
     const cfg = printConfig;
-    const size = (cfg as any).pageSize || 'auto';
+    const size = (cfg as unknown as { pageSize?: string }).pageSize || 'auto';
     const bg = cfg.printBackground || 'transparent';
     const bgFirst = cfg.printBackgroundFirstPage || bg;
 
@@ -366,7 +366,7 @@ export const PageView: React.FC<PageViewProps> = ({
 /* -------------------------------------------------------------------------- */
 /* Page Class                                                                 */
 /* -------------------------------------------------------------------------- */
-export class Page<P extends PageProps = PageProps, S = {}> extends React.Component<P, S> {
+export class Page<P extends PageProps = PageProps, S = Record<string, never>> extends React.Component<P, S> {
   protected getPageProps(): Partial<PageProps> { return {}; }
   protected renderView(): React.ReactNode { return this.props.children; }
   protected renderPrintView(): React.ReactNode { return this.renderView(); }