react-native-molecules 0.5.0-beta.2 → 0.5.0-beta.4

package/README.md

@@ -4,7 +4,7 @@ React Native Molecules
 
 <h3 align="center">
   Material 3-powered primitives for React Native + Web.<br/>
-  <a href="https://github.com/webbeetechnologies/react-native-molecules/tree/main/docs">Explore the docs</a>
+  <a href="https://molecules.taylordb.ai">Explore the docs</a>
 </h3>
 
 ---

package/components/Button/Button.tsx

@@ -12,11 +12,11 @@ import { type StyleProp, type TextStyle, View, type ViewProps, type ViewStyle }
 import { useActionState } from '../../hooks';
 import type { MD3Elevation } from '../../types/theme';
 import { resolveStateVariant } from '../../utils';
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { ActivityIndicator } from '../ActivityIndicator';
 import { Icon, type IconType } from '../Icon';
 import { StateLayer } from '../StateLayer';
 import { Surface, type SurfaceProps } from '../Surface';
-import { extractProperties } from '../Surface/utils';
 import { Text } from '../Text';
 import { TouchableRipple } from '../TouchableRipple';
 import type { ButtonSize, ButtonVariant } from './types';
@@ -209,7 +209,7 @@ const Button = (
             defaultStyles;
 
         // for mobile
-        const { borderRadius } = extractProperties(
+        const { borderRadius } = extractPropertiesFromStyles(
             [defaultStyles.root, styleProp],
             ['borderRadius'],
         );

package/components/ElementGroup/ElementGroup.tsx

@@ -1,6 +1,7 @@
 import { Children, cloneElement, forwardRef, memo, type ReactElement, useMemo } from 'react';
 import { View, type ViewProps, type ViewStyle } from 'react-native';
 
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { isNil } from '../../utils/lodash';
 import { elementGroupStyles } from './utils';
 
@@ -44,24 +45,25 @@ export const ElementGroup = (
             borderTopRightRadius,
             borderBottomLeftRadius,
             borderBottomRightRadius,
-            ...restStyle
-        } = elementGroupStyles.root as any;
-        const {
-            borderTopLeftRadius: _borderTopLeftRadius,
-            borderTopRightRadius: _borderTopRightRadius,
-            borderBottomLeftRadius: _borderBottomLeftRadius,
-            borderBottomRightRadius: _borderBottomRightRadius,
-            ..._restStyle
-        } = style ?? {};
+        } = extractPropertiesFromStyles(
+            [elementGroupStyles.root, style],
+            [
+                'borderRadius',
+                'borderTopLeftRadius',
+                'borderTopRightRadius',
+                'borderBottomLeftRadius',
+                'borderBottomRightRadius',
+            ],
+        );
 
         return {
-            containerStyle: [restStyle, _restStyle],
+            containerStyle: [elementGroupStyles.root, style],
             borderRadius: borderRadiusProp || _borderRadius,
             borderRadiuses: {
-                borderTopLeftRadius: borderTopLeftRadius || _borderTopLeftRadius,
-                borderTopRightRadius: borderTopRightRadius || _borderTopRightRadius,
-                borderBottomLeftRadius: borderBottomLeftRadius || _borderBottomLeftRadius,
-                borderBottomRightRadius: borderBottomRightRadius || _borderBottomRightRadius,
+                borderTopLeftRadius: borderTopLeftRadius,
+                borderTopRightRadius: borderTopRightRadius,
+                borderBottomLeftRadius: borderBottomLeftRadius,
+                borderBottomRightRadius: borderBottomRightRadius,
             },
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps

package/components/Surface/Surface.android.tsx

@@ -4,8 +4,9 @@ import { useUnistyles } from 'react-native-unistyles';
 
 import { inputRange } from '../../styles/shadow';
 import type { MD3Elevation } from '../../types/theme';
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { BackgroundContextWrapper } from './BackgroundContextWrapper';
-import { defaultStyles, extractProperties, getElevationAndroid } from './utils';
+import { defaultStyles, getElevationAndroid } from './utils';
 
 export type Props = ViewProps & {
     /**
@@ -43,7 +44,7 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, re
                     elevation: getElevationAndroid(elevation, inputRange, elevationLevel),
                 },
             ] as StyleProp<ViewStyle>,
-            surfaceBackground: extractProperties(
+            surfaceBackground: extractPropertiesFromStyles(
                 [defaultStyles.root as ViewStyle, style],
                 ['backgroundColor'],
             ).backgroundColor,

package/components/Surface/Surface.ios.tsx

@@ -3,8 +3,9 @@ import { Animated, type StyleProp, View, type ViewStyle } from 'react-native';
 import { useUnistyles } from 'react-native-unistyles';
 
 import type { MD3Elevation } from '../../types/theme';
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
 import { BackgroundContextWrapper } from './BackgroundContextWrapper';
-import { defaultStyles, extractProperties, getStyleForShadowLayer } from './utils';
+import { defaultStyles, getStyleForShadowLayer } from './utils';
 
 export type Props = ComponentPropsWithRef<typeof View> & {
     /**
@@ -78,14 +79,15 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, re
     })();
 
     const { surfaceBackground, sharedStyle, layer0Style, layer1Style } = useMemo(() => {
-        const { position, alignSelf, top, left, right, bottom, borderRadius } = extractProperties(
-            [defaultStyles.root as ViewStyle, style],
-            ['position', 'alignSelf', 'top', 'left', 'right', 'bottom', 'borderRadius'],
-        );
+        const { position, alignSelf, top, left, right, bottom, borderRadius } =
+            extractPropertiesFromStyles(
+                [defaultStyles.root as ViewStyle, style],
+                ['position', 'alignSelf', 'top', 'left', 'right', 'bottom', 'borderRadius'],
+            );
         const absoluteStyle = { position, alignSelf, top, right, bottom, left };
 
         return {
-            surfaceBackground: extractProperties(
+            surfaceBackground: extractPropertiesFromStyles(
                 [defaultStyles.root as ViewStyle, style],
                 ['backgroundColor'],
             ).backgroundColor,

package/components/Surface/utils.ts

@@ -15,30 +15,6 @@ export const defaultStyles = getRegisteredComponentStylesWithFallback(
     defaultStylesDefault,
 );
 
-// TODO - abstract this
-export function extractProperties(
-    _objectsArray: Record<string, any>,
-    propertiesToExtract: string[],
-) {
-    const extracted: Record<string, any> = {};
-
-    const objectsArray = _objectsArray.flat();
-
-    for (let i = objectsArray.length - 1; i >= 0; i--) {
-        const obj = objectsArray[i];
-
-        for (const prop of propertiesToExtract) {
-            if (!obj) continue;
-            if (prop in obj) {
-                // @ts-ignore
-                extracted[prop] = obj[prop];
-            }
-        }
-    }
-
-    return extracted;
-}
-
 const _shadowColor = '#000';
 
 const iOSShadowOutputRanges = [

package/components/TextInput/TextInput.tsx

@@ -3,7 +3,7 @@ import React, {
     memo,
     type PropsWithoutRef,
     type ReactNode,
-    type RefObject,
+    type Ref,
     useCallback,
     useContext,
     useEffect,
@@ -50,7 +50,7 @@ type Element = ReactNode | ((props: ElementProps) => ReactNode);
 
 export type Props = Omit<TextInputProps, 'ref'> &
     WithElements<Element> & {
-        ref?: RefObject<TextInputHandles | null>;
+        ref?: Ref<NativeTextInput | null>;
         /**
          * Variant of the TextInput.
          * - `flat` - flat input with an underline.

package/components/Tooltip/TooltipTrigger.tsx

@@ -30,27 +30,36 @@ const TooltipTrigger = memo(({ children }: { children: ReactElement }) => {
         () => triggerRef?.current,
     );
 
-    const onPress = useCallback(() => {
-        // @ts-ignore
-        children?.props?.onPress?.();
-    }, [children?.props]);
+    const onPress = useCallback(
+        (e: unknown) => {
+            // @ts-ignore
+            children?.props?.onPress?.(e);
+        },
+        [children?.props],
+    );
 
-    const onLongPress = useCallback(() => {
-        // @ts-ignore
-        children?.props?.onLongPress?.();
+    const onLongPress = useCallback(
+        (e: unknown) => {
+            // @ts-ignore
+            children?.props?.onLongPress?.(e);
 
-        if (isWeb) return;
-        onOpen();
-    }, [children?.props, isWeb, onOpen]);
+            if (isWeb) return;
+            onOpen();
+        },
+        [children?.props, isWeb, onOpen],
+    );
 
-    const onPressOut = useCallback(() => {
-        // @ts-ignore
+    const onPressOut = useCallback(
+        (e: unknown) => {
+            // @ts-ignore
 
-        children?.props?.onPressOut?.();
+            children?.props?.onPressOut?.(e);
 
-        if (isWeb) return;
-        onClose();
-    }, [children?.props, isWeb, onClose]);
+            if (isWeb) return;
+            onClose();
+        },
+        [children?.props, isWeb, onClose],
+    );
 
     const onHoverIn = useCallback(() => {
         // @ts-ignore

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.2",
+    "version": "0.5.0-beta.4",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",
@@ -47,10 +47,6 @@
         "color": "^4.2.3",
         "date-fns": "^4.1.0",
         "eventemitter2": "^6.4.9",
-        "lodash.get": "^4.4.2",
-        "lodash.keyby": "^4.6.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.omitby": "^4.6.0",
         "use-sync-external-store": "^1.2.0"
     },
     "peerDependencies": {
@@ -64,11 +60,6 @@
         "@react-native-documents/picker": "^10.1.2",
         "@types/color": "^3.0.3",
         "@types/jest": "^29.1.2",
-        "@types/lodash": "^4.17.13",
-        "@types/lodash.get": "^4.4.7",
-        "@types/lodash.keyby": "^4.6.7",
-        "@types/lodash.memoize": "^4.1.7",
-        "@types/lodash.omitby": "^4.6.7",
         "@types/react": "~19.1.10",
         "@types/use-sync-external-store": "^1.5.0",
         "react": "19.1.0",

package/shortcuts-manager/ShortcutsManager/ShortcutsManager.tsx

@@ -10,9 +10,12 @@ import {
     type ShortcutsManagerProps,
 } from './utils';
 
+const defaultScopes: ShortcutsManagerProps['scopes'] = [];
+const defaultShortcuts: Shortcut[] = [];
+
 const _ShortcutsManager = ({ shortcuts, scopes, children }: ShortcutsManagerProps) => {
-    const shortcutsRef = useRef<Shortcut[]>(shortcuts || []);
-    const scopesRef = useRef(scopes);
+    const shortcutsRef = useRef<Shortcut[]>(shortcuts || defaultShortcuts);
+    const scopesRef = useRef(scopes || defaultScopes);
     const parentContextRef = useContext(ShortcutsManagerContext);
 
     const contextValue = useMemo(() => {

package/utils/extractPropertiesFromStyles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+// TODO - abstract this
+export function extractPropertiesFromStyles(
+    _objectsArray: Record<string, any>,
+    propertiesToExtract: string[],
+) {
+    const extracted: Record<string, any> = {};
+
+    const objectsArray = StyleSheet.flatten(_objectsArray);
+
+    for (let i = objectsArray.length - 1; i >= 0; i--) {
+        const obj = objectsArray[i];
+
+        for (const prop of propertiesToExtract) {
+            if (!obj) continue;
+            if (prop in obj) {
+                // @ts-ignore
+                extracted[prop] = obj[prop];
+            }
+        }
+    }
+
+    return extracted;
+}

package/utils/lodash.ts

@@ -1,8 +1,80 @@
-import memoize from 'lodash.memoize';
-export { default as get } from 'lodash.get';
-export { default as keyBy } from 'lodash.keyby';
-export { default as memoize } from 'lodash.memoize';
-export { default as omitBy } from 'lodash.omitby';
+type MemoizeCache<K = any, V = any> = {
+    has(key: K): boolean;
+    get(key: K): V | undefined;
+    set(key: K, value: V): unknown;
+};
+
+type MemoizeFn = {
+    <T extends (...args: any[]) => any>(
+        func: T,
+        resolver?: (...args: Parameters<T>) => any,
+    ): MemoizedFunction<T>;
+    Cache: { new (): MemoizeCache<any, any> };
+};
+
+export interface MemoizedFunction<T extends (...args: any[]) => any> {
+    (...args: Parameters<T>): ReturnType<T>;
+    cache: MemoizeCache<any, ReturnType<T>>;
+}
+
+export const memoize: MemoizeFn = ((
+    func: (...args: any[]) => any,
+    resolver?: (...args: any[]) => any,
+) => {
+    if (typeof func !== 'function') {
+        throw new TypeError('Expected a function');
+    }
+    const memoized = function (this: unknown, ...args: any[]) {
+        const key = resolver ? resolver.apply(this, args) : args[0];
+        const { cache } = memoized as MemoizedFunction<typeof func>;
+        if (cache.has(key)) {
+            return cache.get(key);
+        }
+        const result = func.apply(this, args);
+        cache.set(key, result);
+        return result;
+    } as MemoizedFunction<typeof func>;
+
+    (memoized as MemoizedFunction<typeof func>).cache = new memoize.Cache();
+    return memoized;
+}) as MemoizeFn;
+
+memoize.Cache = Map;
+
+type Iteratee<T> = ((item: T) => string | number | symbol) | keyof T;
+
+export const keyBy = <T extends Record<string, any>>(
+    collection: T[],
+    iteratee: Iteratee<T>,
+): Record<string, T> => {
+    const result: Record<string, T> = {};
+    if (!Array.isArray(collection)) return result;
+
+    const getter = typeof iteratee === 'function' ? iteratee : (item: T) => item[iteratee];
+    for (const item of collection) {
+        const key = getter(item);
+        if (key != null) {
+            result[String(key)] = item;
+        }
+    }
+    return result;
+};
+
+type Predicate = (value: any, key: string) => boolean;
+
+export const omitBy = <T extends Record<string, any>>(
+    object: T,
+    predicate: Predicate,
+): Partial<T> => {
+    if (object == null) return {};
+    const result: Partial<T> = {};
+    for (const [key, value] of Object.entries(object)) {
+        if (!predicate(value, key)) {
+            result[key as keyof T] = value;
+        }
+    }
+    return result;
+};
 
 export const isNil = (value: unknown): value is null | undefined => value == null;
 export const noop = () => {};