@ainias42/react-bootstrap-mobile 0.2.16 → 1.0.1

package/src/Components/Layout/Grid/Grid.tsx

@@ -4,15 +4,16 @@ import { Block } from '../Block';
 import classNames from 'classnames';
 import styles from './grid.scss';
 import { ForwardedRef, useMemo } from 'react';
-import { withForwardRef } from "../../../helper/withForwardRef";
+import { withMemo } from "../../../helper/withMemo";
 
 export type GridProps = RbmComponentProps<{
     columns?: number;
     rows?: number;
     useContainerWidth?: boolean;
+    ref?:ForwardedRef<HTMLDivElement>
 }>;
 
-function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = false, className, __allowChildren }: GridProps, ref?:ForwardedRef<HTMLDivElement>) {
+export const Grid = withMemo(function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = false,ref,  className, __allowChildren }: GridProps) {
     // Variables
     const appliedStyle = useMemo(
         () => ({
@@ -47,8 +48,4 @@ function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = fal
             {children}
         </Block>
     );
-}
-
-// Need RowMemo for autocompletion of phpstorm
-const GridMemo = withForwardRef(Grid, styles);
-export { GridMemo as Grid };
+}, styles);

package/src/Components/Layout/Grow.tsx

@@ -2,15 +2,16 @@ import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 import styles from './layout.scss';
 import classNames from 'classnames';
-import { withForwardRef } from "../../helper/withForwardRef";
 import { ForwardedRef } from "react";
+import { withMemo } from "../../helper/withMemo";
 
 export type GrowProps = RbmComponentProps<{
     center?: boolean;
     weight?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    ref?: ForwardedRef<HTMLDivElement>
 }>;
 
-export const Grow = withForwardRef(function Grow({ className, children, center = false, style, weight = 1 }: GrowProps, ref?: ForwardedRef<HTMLDivElement>) {
+export const Grow = withMemo(function Grow({ className, children, center = false, style, weight = 1, ref }: GrowProps ) {
     // Variables
 
     // States

package/src/Components/Layout/Inline.tsx

@@ -1,19 +1,18 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 import classNames from 'classnames';
-
 import styles from './layout.scss';
 import { ViewWithoutListeners, ViewWithoutListenersProps } from './ViewWithoutListeners';
-import { withForwardRef } from '../../helper/withForwardRef';
-import { ComponentRef, ForwardedRef } from 'react';
+import { withMemo } from "../../helper/withMemo";
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
 
-export type InlineProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
+export type InlineProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
     ViewWithoutListenersProps<AsType>
 >;
 
-function Inline<AsType extends keyof JSX.IntrinsicElements = 'span'>(
+export const Inline = withMemo(function Inline<AsType extends keyof JSX.IntrinsicElements = 'span'>(
     { children, as = 'span' as AsType, className, ...props }: InlineProps<AsType>,
-    ref?: ForwardedRef<ComponentRef<AsType>>
 ) {
     // Variables
 
@@ -36,13 +35,8 @@ function Inline<AsType extends keyof JSX.IntrinsicElements = 'span'>(
             className={classNames(styles.inline, className)}
             as={as as AsType}
             {...(props as ViewWithoutListenersProps<AsType>)}
-            ref={ref}
         >
             {children}
         </ViewWithoutListeners>
     );
-}
-
-// Need InlineMemo for autocompletion of phpstorm
-const InlineMemo = withForwardRef(Inline, styles);
-export { InlineMemo as Inline };
+}, styles);

package/src/Components/Layout/InlineBlock.tsx

@@ -1,22 +1,21 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 import classNames from 'classnames';
-
 import styles from './layout.scss';
 import { ViewWithoutListeners, ViewWithoutListenersProps } from './ViewWithoutListeners';
-import { ComponentRef, ForwardedRef } from 'react';
-import { withForwardRef } from '../../helper/withForwardRef';
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
+import { withMemo } from "../../helper/withMemo";
 
-export type InlineBlockProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
+export type InlineBlockProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
     ViewWithoutListenersProps<AsType> & {
     id?: string
     title?: string
 }
 >;
 
-function InlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>(
+export const InlineBlock = withMemo(function InlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>(
     { children, as = 'span' as AsType, className, ...props }: InlineBlockProps<AsType>,
-    ref?: ForwardedRef<ComponentRef<AsType>>
 ) {
     // Variables
 
@@ -39,13 +38,8 @@ function InlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>(
             {...(props as ViewWithoutListenersProps<AsType>)}
             className={classNames(styles.inlineBlock, className)}
             as={as as AsType}
-            ref={ref}
         >
             {children}
         </ViewWithoutListeners>
     );
-}
-
-// Need InlineMemo for autocompletion of phpstorm
-const InlineBlockMemo = withForwardRef(InlineBlock, styles);
-export { InlineBlockMemo as InlineBlock };
+}, styles);

package/src/Components/Layout/View.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 import { ComponentRef, ForwardedRef, PropsWithChildren } from 'react';
 import { Override } from '../../TypeHelpers';
-import { withForwardRef } from "../../helper/withForwardRef";
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
+import { withMemo } from "../../helper/withMemo";
 
-export type ViewProps<AsType extends keyof JSX.IntrinsicElements> = PropsWithChildren<
-    Override<React.ComponentPropsWithoutRef<AsType>, { as?: AsType; children?: React.ReactNode }>
+export type ViewProps<AsType extends keyof IntrinsicElements> = PropsWithChildren<
+    Override<React.ComponentPropsWithoutRef<AsType>, { as?: AsType; children?: React.ReactNode, ref?: ForwardedRef<ComponentRef<AsType>> }>
 >;
 
-export const View = withForwardRef(function View<AsType extends keyof JSX.IntrinsicElements>(
-    {children, as, ...otherProps}: ViewProps<AsType>,
-    ref?: ForwardedRef<ComponentRef<AsType>>
+export const View = withMemo(function View<AsType extends keyof JSX.IntrinsicElements>(
+    {children, as,ref, ...otherProps}: ViewProps<AsType>
 ) {
     // Variables
 

package/src/Components/Layout/ViewWithoutListeners.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { ComponentRef, DOMAttributes, ForwardedRef } from 'react';
+import { DOMAttributes, ForwardedRef } from 'react';
 import { View, ViewProps } from './View';
-import { withForwardRef } from "../../helper/withForwardRef";
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
+import { withMemo } from "../../helper/withMemo";
 
-export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements> = Omit<
+export type ViewWithoutListenersProps<AsType extends keyof IntrinsicElements> = Omit<
     ViewProps<AsType>,
     keyof DOMAttributes<AsType>
 > & { children?: React.ReactNode, dangerouslySetInnerHTML?: {
@@ -12,9 +14,8 @@ export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements
         __html: string | TrustedHTML;
     } | undefined;   };
 
-export const ViewWithoutListeners = withForwardRef(function ViewWithoutListeners<AsType extends keyof JSX.IntrinsicElements>(
-    { children, ...props }: ViewWithoutListenersProps<AsType>,
-    ref?: ForwardedRef<ComponentRef<AsType>>
+export const ViewWithoutListeners = withMemo(function ViewWithoutListeners<AsType extends keyof JSX.IntrinsicElements>(
+    { children,ref, ...props }: ViewWithoutListenersProps<AsType>,
 ) {
     // Variables
 
@@ -32,7 +33,7 @@ export const ViewWithoutListeners = withForwardRef(function ViewWithoutListeners
 
     // Render Functions
     return (
-        <View {...props} ref={ref}>
+        <View {...props} ref={ref as ForwardedRef<SVGElement|HTMLElement>}>
             {children}
         </View>
     );

package/src/Components/List/List.tsx

@@ -5,7 +5,7 @@ import styles from './list.scss';
 import { FixedSizeList, FixedSizeListProps, ListChildComponentProps } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { SizeCalculator, SizeCalculatorProps } from '../SizeCalculator/SizeCalculator';
-import { withForwardRef } from "../../helper/withForwardRef";
+import { withMemo } from "../../helper/withMemo";
 
 export type ListProps<ItemType> = RbmComponentProps<{
     renderItem: (item: ItemType, style: CSSProperties, index: number) => ReactElement;
@@ -15,9 +15,10 @@ export type ListProps<ItemType> = RbmComponentProps<{
     keyExtractor?: (item: ItemType, index: number) => string;
     onItemsRendered?: FixedSizeListProps<ItemType>['onItemsRendered'];
     autoSizeClassName?: string;
+    ref?: ForwardedRef<FixedSizeList<ItemType>>
 }>;
 
-export const List = withForwardRef(function List<ItemType>({
+export const List = withMemo(function List<ItemType>({
     items,
     renderItem,
     itemHeight: initialItemHeight = 0,
@@ -25,7 +26,8 @@ export const List = withForwardRef(function List<ItemType>({
     style,
     onItemsRendered,
     autoSizeClassName,
-}: ListProps<ItemType>, ref: ForwardedRef<FixedSizeList<ItemType>>) {
+    ref,
+}: ListProps<ItemType>) {
     // Variables
 
     // States

package/src/Components/RbmComponentProps.ts

@@ -1,5 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { Recursive } from '../TypeHelpers';
+import { JSX } from "react/jsx-runtime";
 
 export type RbmChildWithoutString = Recursive<JSX.Element | undefined | null | RbmChildWithoutString[]> | false;
 export type WithNoStringProps =

package/src/Components/SpoilerList/Spoiler/Spoiler.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { withMemo } from '../../../helper/withMemo';
 import { RbmComponentProps } from '../../RbmComponentProps';
-import { MouseEvent, ReactChild, useCallback, useEffect, useRef, useState } from 'react';
+import { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { Flex } from '../../Layout/Flex';
 import { Grow } from '../../Layout/Grow';
 import { Text, TEXT_SIZE } from '../../Text/Text';
@@ -15,7 +15,7 @@ import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 
 export type SpoilerProps<OnClickData> = RbmComponentProps<
     {
-        title: ReactChild;
+        title: ReactNode;
         initialOpen?: boolean;
         open?: boolean;
         onlyTitleToggles?: boolean;

package/src/Components/Text/Text.tsx

@@ -6,6 +6,8 @@ import { WrongChildError } from '../../WrongChildError';
 import withStyles from 'isomorphic-style-loader/withStyles';
 import { Inline, InlineProps } from '../Layout/Inline';
 import { ViewProps } from '../Layout/View';
+import { JSX } from "react/jsx-runtime";
+import IntrinsicElements = JSX.IntrinsicElements;
 
 export const TEXT_PRIO = {
     primary: styles.primary,
@@ -23,7 +25,7 @@ export const TEXT_SIZE = {
     xxLarge: styles.xxlarge,
 };
 
-export type TextProps<AsType extends keyof JSX.IntrinsicElements> = {
+export type TextProps<AsType extends keyof IntrinsicElements> = {
     block?: boolean;
     prio?: ValueOf<typeof TEXT_PRIO>;
     size?: ValueOf<typeof TEXT_SIZE>;

package/webpack.config.js

@@ -3,7 +3,8 @@ const webpack = require('webpack');
 // const PrettierPlugin = require('prettier-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const getPackageJson = require('./scripts/getPackageJson');
-const CssLayeringPlugin = require('css-layering-webpack-plugin');
+const {CSSLayeringPlugin} = require('css-layering-webpack-plugin');
+
 
 const { version, name, license, repository, author } = getPackageJson(
     'version',
@@ -80,7 +81,7 @@ module.exports = (env) => {
             //     filename: 'css/index.css',
             // }),
             new webpack.BannerPlugin(banner),
-            new CssLayeringPlugin({
+            new CSSLayeringPlugin({
                 layers: [
                     { path: "**/src/**/*.scss", name: "rbm" },
                 ],

package/dist/src/helper/withForwardRef.d.ts

@@ -1,7 +0,0 @@
-import { ForwardRefRenderFunction, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
-import { RESTRICT_CHILDREN } from './withRestrictedChildren';
-export interface RefComponent<PropTypes, ForwardedRefType> {
-    (props: PropsWithoutRef<PropTypes> & RefAttributes<ForwardedRefType>): ReactElement | null;
-    displayName?: string | undefined;
-}
-export declare function withForwardRef<PropTypes, ForwardedRefType>(component: ForwardRefRenderFunction<ForwardedRefType, PropTypes>, styles?: any, defaultAllowChildren?: typeof RESTRICT_CHILDREN['allowChildren']): RefComponent<PropTypes, ForwardedRefType>;

package/src/helper/withForwardRef.ts

@@ -1,28 +0,0 @@
-import React, { ForwardedRef, ForwardRefRenderFunction, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
-import withStyles from 'isomorphic-style-loader/withStyles';
-import { RESTRICT_CHILDREN, withRestrictedChildren } from './withRestrictedChildren';
-import { memoComparator } from './memoComparator';
-
-export interface RefComponent<PropTypes, ForwardedRefType> {
-    (props: PropsWithoutRef<PropTypes> & RefAttributes<ForwardedRefType>): ReactElement | null;
-
-    displayName?: string | undefined;
-}
-
-export function withForwardRef<PropTypes, ForwardedRefType>(
-    component: ForwardRefRenderFunction<ForwardedRefType, PropTypes>,
-    styles?: any,
-    defaultAllowChildren?: typeof RESTRICT_CHILDREN['allowChildren']
-) {
-    const forwarded = React.forwardRef(component);
-    forwarded.displayName = component.displayName ?? component.name;
-    const forwardedComp = React.forwardRef(withRestrictedChildren(forwarded, defaultAllowChildren));
-    const c: (props: PropTypes, ref: ForwardedRef<ForwardedRefType>) => ReactElement = styles
-        ? withStyles(styles)(forwardedComp)
-        : forwardedComp;
-
-    const memoizedComponent = React.memo(c, memoComparator) as RefComponent<PropTypes, ForwardedRefType>;
-    memoizedComponent.displayName = `Memoized-Forwarded(${component.displayName || component.name})`;
-
-    return memoizedComponent;
-}