@ainias42/react-bootstrap-mobile 0.1.11 → 0.1.13

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.11",
+  "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/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/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>
 >;