@ainias42/react-bootstrap-mobile 0.1.10 → 0.1.13

package/dist/src/Components/TopBar/TopBar.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ComponentType } from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 import { IconSource } from '../Icon/Icon';
@@ -20,6 +21,6 @@ export type TopBarProps = RbmComponentProps<{
     transparent?: boolean;
     drawBehind?: boolean;
 }>;
-declare function TopBar({ title, rightButtons, leftButtons, hiddenButtons, className, transparent, drawBehind, ...rbmProps }: TopBarProps): JSX.Element;
+declare function TopBar({ title, rightButtons, leftButtons, hiddenButtons, className, transparent, drawBehind, ...rbmProps }: TopBarProps): React.JSX.Element;
 declare const TopBarMemo: typeof TopBar;
 export { TopBarMemo as TopBar };

package/dist/src/Components/TopBar/TopBarButton.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 export type TopBarButtonProps = RbmComponentProps<{
     disabled?: boolean;
     onClick?: () => void;
 }>;
-declare function TopBarButton({ disabled, onClick, className, children, ...rbmProps }: TopBarButtonProps): JSX.Element;
+declare function TopBarButton({ disabled, onClick, className, children, ...rbmProps }: TopBarButtonProps): React.JSX.Element;
 declare const TopBarButtonMemo: typeof TopBarButton;
 export { TopBarButtonMemo as TopBarButton };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.1.10",
+  "version": "0.1.13",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/Ainias/Bootstrap-React-Mobile#readme",
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",

package/src/Components/FormElements/CheckBox/checkbox.scss

@@ -39,6 +39,7 @@
 
     @include design($material) {
       width: 18px;
+      min-width: 18px;
       height: 18px;
       margin: 2px;
 
@@ -51,6 +52,7 @@
     }
     @include design($flat) {
       width: 22px;
+      min-width: 22px;
       height: 22px;
 
       &::before {

package/src/Components/FormElements/Input/PasswordInput/passwordInput.scss

@@ -4,4 +4,5 @@
 
 .showButton {
   padding-left: 0.4rem;
+  min-width: calc(16px + 0.4rem);
 }

package/src/Components/FormElements/Input/input.scss

@@ -25,6 +25,11 @@
       background-position: center bottom;
       padding-bottom: 2px;
 
+      &:read-only, &:read-only:focus {
+        background-image: none;
+        border-bottom: 1px solid transparent;
+      }
+
       &:focus {
         background-image: linear-gradient(var(--flavor-focus), var(--flavor-focus)),
         linear-gradient(to top, transparent 1px, #afafaf 1px);

package/src/Components/FormElements/SearchSelectInput/SearchSelectInput.tsx

@@ -122,13 +122,19 @@ export const SearchSelectInput = withMemo(function SearchSelectInput<OnChangeDat
     // Other
 
     // Render Functions
-    const renderOption = (value: string) => (
-        <Clickable onClick={toggleOption} onClickData={value} key={indexedOptions[value].key}>
-            <InlineBlock className={styles.tag}>
-                <Text size={TEXT_SIZE.xSmall}>{indexedOptions[value].label}</Text>
-            </InlineBlock>
-        </Clickable>
-    );
+    const renderOption = (value: string) => {
+        if (!indexedOptions[value]) {
+            return null;
+        }
+
+        return (
+            <Clickable onClick={toggleOption} onClickData={value} key={indexedOptions[value].key}>
+                <InlineBlock className={styles.tag}>
+                    <Text size={TEXT_SIZE.xSmall}>{indexedOptions[value].label}</Text>
+                </InlineBlock>
+            </Clickable>
+        );
+    };
     const renderSelectableOption = (opt: SelectOption, index: number) => (
         <Clickable onClick={toggleOption} onClickData={opt.value} key={opt.key}>
             <Block className={classNames(styles.selectableOption, { [styles.active]: index === selectedIndex })}>

package/src/Components/FormElements/Textarea/Textarea.tsx

@@ -23,7 +23,7 @@ function Textarea<OnChangeData>({
     label,
     className,
     style,
-    onKeyPress,
+    onKeyUp,
     onChangeText,
     onEnter,
     ...otherProps
@@ -48,14 +48,14 @@ function Textarea<OnChangeData>({
 
     const realOnKeyPress = useCallback(
         (e: KeyboardEvent<HTMLTextAreaElement>) => {
-            if (onKeyPress) {
-                onKeyPress(e);
+            if (onKeyUp) {
+                onKeyUp(e);
             }
             if (onEnter && e.key === 'Enter' && !e.defaultPrevented) {
                 onEnter((e.target as HTMLTextAreaElement).value);
             }
         },
-        [onEnter, onKeyPress]
+        [onEnter, onKeyUp]
     );
 
     // Effects
@@ -67,7 +67,7 @@ function Textarea<OnChangeData>({
     return (
         <label className={classNames(styles.container, className)} style={style}>
             {label ? <span className={styles.label}>{label}</span> : null}
-            <textarea {...otherProps} onKeyPress={realOnKeyPress} className={styles.textarea} onChange={onChange} />
+            <textarea {...otherProps} onKeyUp={realOnKeyPress} className={styles.textarea} onChange={onChange} />
         </label>
     );
 }

package/src/Components/FullScreen/FullScreen.tsx

@@ -1,18 +1,11 @@
 import * as React from 'react';
-import {
-    ComponentPropsWithoutRef,
-    ComponentRef,
-    PropsWithChildren,
-    useCallback,
-    useEffect,
-    useMemo,
-    useRef,
-} from 'react';
+import { ComponentPropsWithoutRef, ComponentRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Override } from '../../TypeHelpers';
 import { withMemo } from '../../helper/withMemo';
 import { useWindow } from '../../WindowContext/WindowContext';
+import { RbmComponentProps } from '../RbmComponentProps';
 
-export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = PropsWithChildren<
+export type FullScreenProps<AsType extends keyof JSX.IntrinsicElements> = RbmComponentProps<
     Override<
         ComponentPropsWithoutRef<AsType>,
         { as?: AsType; fullscreenKey?: string; onEnterFullscreen?: () => void; onLeaveFullscreen?: () => void }
@@ -81,6 +74,8 @@ function FullScreen<AsTag extends keyof JSX.IntrinsicElements = 'span'>({
     // Render Functions
     const element = as ?? 'span';
     const props = useMemo(() => ({ ...otherProps, ref: containerRef }), [otherProps]);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     return React.createElement(element, props, children);
 }
 

package/src/Components/Hooks/useOnMount.ts

@@ -1,12 +1,30 @@
 import { useEffect, useRef } from 'react';
 
-export function useOnMount(cb: () => void | Promise<void>) {
+export function useOnMount(cb: () => void | Promise<void> | (() => any)) {
     const called = useRef(false);
+    const unmountTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+    const unmountFunc = useRef<() => any | undefined>();
     useEffect(() => {
+        clearTimeout(unmountTimeout.current);
+        unmountTimeout.current = undefined;
+
         if (!called.current) {
             called.current = true;
-            cb();
+            const returnVal = cb();
+            if (typeof returnVal === 'function') {
+                unmountFunc.current = returnVal;
+            }
         }
+
+        return () => {
+            if (unmountTimeout.current) {
+                return;
+            }
+            unmountTimeout.current = setTimeout(() => {
+                unmountTimeout.current = undefined;
+                unmountFunc.current?.();
+            }, 60);
+        };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 }

package/src/Components/Icon/Icon.tsx

@@ -4,8 +4,9 @@ import { RbmComponentProps } from '../RbmComponentProps';
 import { Override } from '../../TypeHelpers';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { withMemo } from '../../helper/withMemo';
+import { IconDefinition } from '@fortawesome/free-regular-svg-icons';
 
-export type IconSource = IconProp | string;
+export type IconSource = IconProp | string | IconDefinition;
 
 export type IconProps = RbmComponentProps<
     Override<

package/src/Components/List/List.tsx

@@ -46,7 +46,7 @@ export const List = withMemo(function List<ItemType>({
 
     return (
         <AutoSizer>
-            {({ height, width }) => {
+            {({ height, width }: { height?: number; width?: number }) => {
                 return (
                     <>
                         {initialItemHeight === 0 && items.length > 0 && (

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

@@ -11,7 +11,7 @@ import { Clickable } from '../../Clickable/Clickable';
 import styles from './spoiler.scss';
 import classNames from 'classnames';
 import { OptionalListener, useListener } from '../../Hooks/useListener';
-import { Icon } from '../../Icon/Icon';
+import { Icon, IconSource } from '../../Icon/Icon';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
@@ -21,8 +21,8 @@ export type SpoilerProps<OnClickData> = RbmComponentProps<
         initialOpen?: boolean;
         open?: boolean;
         noClosingAnimation?: boolean;
-        openIcon?: IconProp | null;
-        closeIcon?: IconProp | null;
+        openIcon?: IconSource | null;
+        closeIcon?: IconSource | null;
     } & OptionalListener<'onClick', OnClickData>
 >;