react-native-molecules 0.5.0-beta.23 → 0.5.0-beta.24

package/components/Select/utils.ts

@@ -39,6 +39,13 @@ const triggerDefaultStyles = StyleSheet.create(theme => ({
             },
         },
     },
+    triggerIcon: {
+        marginLeft: theme.spacings['2'],
+        color: theme.colors.onSurfaceVariant,
+    },
+}));
+
+const outlineDefaultStyles = StyleSheet.create(theme => ({
     outline: {
         position: 'absolute',
         top: 0,
@@ -85,10 +92,6 @@ const triggerDefaultStyles = StyleSheet.create(theme => ({
             },
         },
     },
-    triggerIcon: {
-        marginLeft: theme.spacings['2'],
-        color: theme.colors.onSurfaceVariant,
-    },
 }));
 
 export const defaultStyles = StyleSheet.create(theme => ({
@@ -115,5 +118,9 @@ export const triggerStyles = getRegisteredComponentStylesWithFallback(
     'Select_Trigger',
     triggerDefaultStyles,
 );
+export const selectOutlineStyles = getRegisteredComponentStylesWithFallback(
+    'SelectOutline',
+    outlineDefaultStyles,
+);
 
 export const styles = getRegisteredComponentStylesWithFallback('Select', defaultStyles);

package/components/Switch/Switch.ios.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { forwardRef, memo } from 'react';
 import {
     Switch as NativeSwitch,
@@ -6,7 +7,6 @@ import {
     type ViewStyle,
 } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import type { IconType } from '../Icon';
 
 export type Props = SwitchProps & {

package/components/Switch/Switch.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue, useLatest } from '@react-native-molecules/utils/hooks';
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
     Animated,
@@ -9,7 +10,7 @@ import {
     type ViewStyle,
 } from 'react-native';
 
-import { useActionState, useControlledValue, useLatest } from '../../hooks';
+import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Icon, type IconType } from '../Icon';
 import { switchStyles, useSwitchColors } from './utils';

package/components/Tabs/Tabs.tsx

@@ -1,3 +1,5 @@
+import { noop } from '@react-native-molecules/utils/helpers/lodash';
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import {
     cloneElement,
     type ComponentType,
@@ -22,9 +24,7 @@ import {
 } from 'react-native';
 
 import { typedMemo } from '../../hocs';
-import { useControlledValue } from '../../hooks';
 import { extractSubcomponents } from '../../utils/extractSubcomponents';
-import { noop } from '../../utils/lodash';
 import type { TabItemProps } from './TabItem';
 import { tabsStyles } from './utils';
 

package/components/TextInput/TextInput.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue, useLatest } from '@react-native-molecules/utils/hooks';
 import React, {
     memo,
     type PropsWithoutRef,
@@ -31,9 +32,7 @@ import {
     View,
 } from 'react-native';
 
-import { useActionState } from '../../hooks/useActionState';
-import useControlledValue from '../../hooks/useControlledValue';
-import useLatest from '../../hooks/useLatest';
+import { useActionState } from '../../hooks';
 import { createSyntheticEvent, resolveStateVariant } from '../../utils';
 import { extractSubcomponents } from '../../utils/extractSubcomponents';
 import { HelperText } from '../HelperText';
@@ -645,6 +644,7 @@ export const TextInputLeft = memo(
                 style={[textInputLeftStyles.leftElement, style]}
                 onLayout={handleLayout}
                 accessibilityRole="none"
+                tabIndex={-1}
                 {...rest}>
                 {children}
             </Pressable>
@@ -683,6 +683,7 @@ export const TextInputRight = memo(
                 onPress={onPress}
                 style={[textInputRightStyles.rightElement, style]}
                 accessibilityRole="none"
+                tabIndex={-1}
                 {...rest}>
                 {children}
             </Pressable>

package/components/TimePicker/AnalogClock.tsx

@@ -1,3 +1,4 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import {
     type GestureResponderEvent,
@@ -7,7 +8,6 @@ import {
     type ViewProps,
 } from 'react-native';
 
-import { useLatest } from '../../hooks';
 import AnalogClockHours from './AnalogClockHours';
 import AnalogClockMinutes from './AnalogClockMinutes';
 import AnimatedClockSwitcher from './AnimatedClockSwitcher';

package/components/TimePicker/TimeInputs.tsx

@@ -1,10 +1,10 @@
 // @typescript-eslint/no-unused-vars
 // WORK IN PROGRESS
 
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { TextInput as TextInputNative, useWindowDimensions, View } from 'react-native';
 
-import { useLatest } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Text } from '../Text';
 import AmPmSwitcher from './AmPmSwitcher';

package/components/TimePicker/TimePicker.tsx

@@ -1,8 +1,8 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { type StyleProp, View, type ViewStyle } from 'react-native';
 
 import { getRegisteredComponentWithFallback } from '../../core';
-import { useControlledValue } from '../../hooks';
 import { format, parse } from '../../utils/date-fns';
 import { useOptionalDatePickerContext } from '../DatePicker/context';
 import AnalogClock from './AnalogClock';

package/components/TimePicker/TimePickerModal.tsx

@@ -1,9 +1,9 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import type { ReactNode } from 'react';
 import { memo, useMemo } from 'react';
 import { KeyboardAvoidingView, Platform, View } from 'react-native';
 
 import { getRegisteredComponentWithFallback } from '../../core';
-import { useControlledValue } from '../../hooks';
 import { DatePickerActions, DatePickerProvider } from '../DatePicker';
 import type {
     DatePickerContextType,

package/components/Tooltip/Tooltip.tsx

@@ -1,3 +1,4 @@
+import { useToggle } from '@react-native-molecules/utils/hooks';
 import {
     createContext,
     memo,
@@ -9,7 +10,6 @@ import {
     useRef,
 } from 'react';
 
-import { useToggle } from '../../hooks';
 import { extractSubcomponents } from '../../utils/extractSubcomponents';
 
 export type Props = {

package/components/TouchableRipple/TouchableRipple.tsx

@@ -1,3 +1,4 @@
+import { noop } from '@react-native-molecules/utils/helpers/lodash';
 import { forwardRef, memo, type ReactNode, useCallback, useRef } from 'react';
 import {
     type GestureResponderEvent,
@@ -10,7 +11,6 @@ import {
 import { StyleSheet } from 'react-native-unistyles';
 
 import { useTheme } from '../../hooks/useTheme';
-import { noop } from '../../utils/lodash';
 import { Slot } from '../Slot';
 import { rippleColorFromBackground } from './rippleFromForegroundColor';
 import { touchableRippleStyles } from './utils';

package/hocs/index.tsx

@@ -1,5 +1,5 @@
-export { default as typedMemo } from './typedMemo';
 export {
     useCurrentIndexStore,
     default as withKeyboardAccessibility,
 } from './withKeyboardAccessibility';
+export { typedMemo } from '@react-native-molecules/utils/hocs';

package/hocs/withKeyboardAccessibility.tsx

@@ -1,3 +1,5 @@
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import {
     type ComponentType,
     forwardRef,
@@ -15,9 +17,6 @@ import type { FlatList } from 'react-native';
 import type { SectionList } from 'react-native';
 import { Platform } from 'react-native';
 
-import { createFastContext } from '../fast-context';
-import useLatest from '../hooks/useLatest';
-
 export type Store = {
     currentIndex: number | null;
 };

package/hooks/index.tsx

@@ -4,7 +4,6 @@ export * from './useActionState';
 export * from './useActive';
 export { default as useColorMode } from './useColorMode';
 export { useContrastColor } from './useContrastColor';
-export { default as useControlledValue } from './useControlledValue';
 export * from './useFocus';
 export {
     type NumberMaskConfig,
@@ -13,10 +12,7 @@ export {
 } from './useHandleNumberFormat';
 export * from './useHover';
 export * from './useKeyboardDismissable';
-export { default as useLatest } from './useLatest';
-export { useMediaQuery } from './useMediaQuery';
-export { useMergedRefs } from './useMergedRefs';
-export { default as usePrevious } from './usePrevious';
+export * from './useMediaQuery';
 export * from './useQueryFilter';
 export * from './useTheme';
-export { default as useToggle } from './useToggle';
+export * from '@react-native-molecules/utils/hooks';

package/hooks/useContrastColor.ts

@@ -1,8 +1,7 @@
+import { resolveContrastColor } from '@react-native-molecules/utils/helpers/resolveContrastColor';
 import { useMemo } from 'react';
 import { useUnistyles } from 'react-native-unistyles';
 
-import { resolveContrastColor } from '../utils/color';
-
 export const useContrastColor = (bgColor: string, lightColor?: string, darkColor?: string) => {
     const isDarkMode = useUnistyles().theme.dark;
 

package/hooks/useFilePicker.tsx

@@ -1,3 +1,4 @@
+import { isNil, omitBy } from '@react-native-molecules/utils/helpers/lodash';
 import { useCallback } from 'react';
 
 import {
@@ -5,7 +6,6 @@ import {
     type DocumentPickerOptions,
     type DocumentResult,
 } from '../utils/DocumentPicker';
-import { isNil, omitBy } from '../utils/lodash';
 
 export const useFilePicker = (options: DocumentPickerOptions) => {
     const openFilePicker = useCallback(

package/hooks/useHandleNumberFormat.tsx

@@ -1,9 +1,9 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
+import { usePrevious } from '@react-native-molecules/utils/hooks';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
 
 import { formatNumberWithMask, normalizeToNumberString } from '../utils';
-import { isNil } from '../utils/lodash';
-import usePrevious from './usePrevious';
 
 export type NumberMaskConfig = {
     prefix?: string;

package/hooks/useMediaQuery.tsx

@@ -1,8 +1,7 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
 import { useMemo } from 'react';
 import { useWindowDimensions } from 'react-native';
 
-import { isNil } from '../utils/lodash';
-
 type Query = {
     maxWidth?: number;
     minWidth?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-native-molecules",
-    "version": "0.5.0-beta.23",
+    "version": "0.5.0-beta.24",
     "author": "Thet Aung <thetaung.dev@gmail.com>",
     "license": "MIT",
     "main": "index.ts",
@@ -49,6 +49,7 @@
         "perf": "npx reassure"
     },
     "dependencies": {
+        "@react-native-molecules/utils": "workspace:^",
         "@gorhom/portal": "^1.0.14",
         "@radix-ui/react-compose-refs": "^1.1.2",
         "@react-native-vector-icons/feather": "^12.4.0",
@@ -90,30 +91,5 @@
         "test-cases/node_modules",
         "dist",
         "cache"
-    ],
-    "react-native-builder-bob": {
-        "source": "src",
-        "output": "lib",
-        "targets": [
-            [
-                "commonjs",
-                {
-                    "configFile": true
-                }
-            ],
-            [
-                "module",
-                {
-                    "configFile": true
-                }
-            ],
-            [
-                "typescript",
-                {
-                    "project": "tsconfig.build.json",
-                    "rootDir": "src"
-                }
-            ]
-        ]
-    }
+    ]
 }

package/shortcuts-manager/ShortcutsManager/ShortcutsManager.tsx

@@ -1,6 +1,6 @@
+import { keyBy } from '@react-native-molecules/utils/helpers/lodash';
 import { memo, useContext, useEffect, useMemo, useRef } from 'react';
 
-import { keyBy } from '../../utils/lodash';
 import EventsManager from '../EventsManager';
 import type { Shortcut } from '../types';
 import {

package/shortcuts-manager/ShortcutsManager/utils.tsx

@@ -1,6 +1,6 @@
+import { createFastContext } from '@react-native-molecules/utils/fast-context';
 import type { ReactNode } from 'react';
 
-import { createFastContext } from '../../fast-context';
 import type { Scope, Shortcut } from '../types';
 
 export type ShortcutsManagerContextType = {

package/shortcuts-manager/useSetScopes/useSetScopes.tsx

@@ -1,6 +1,6 @@
+import { keyBy } from '@react-native-molecules/utils/helpers/lodash';
 import { useCallback } from 'react';
 
-import { keyBy } from '../../utils/lodash';
 import { useShortcutsManagerStoreRef } from '../ShortcutsManager/utils';
 import type { Scope } from '../types';
 

package/shortcuts-manager/useShortcut/useShortcut.tsx

@@ -1,6 +1,6 @@
+import { useLatest } from '@react-native-molecules/utils/hooks';
 import { useCallback, useEffect } from 'react';
 
-import useLatest from '../../hooks/useLatest';
 import { useShortcutsManagerStoreRef } from '../ShortcutsManager';
 import type { ShortcutEventDetail } from '../types';
 import { calculateShortcutEventName } from '../utils';

package/utils/extractTextStyles.ts

@@ -1,7 +1,6 @@
+import { memoize } from '@react-native-molecules/utils/helpers/lodash';
 import type { TextStyle } from 'react-native';
 
-import { memoize } from './lodash';
-
 const textStyleProps = [
     'color',
     'fontFamily',

package/utils/formatNumberWithMask/formatNumberWithMask.ts

@@ -1,5 +1,6 @@
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
+
 import { createNumberMask, type CreateNumberMaskProps } from '../createNumberMask';
-import { isNil } from '../lodash';
 import { formatWithMask } from './formatWithMask';
 
 export type FormatNumberWithMaskProps = CreateNumberMaskProps & {

package/utils/index.ts

@@ -1,7 +1,5 @@
 export { addEventListener, addListener } from './addEventListener';
 export { BackgroundContext } from './backgroundContext';
-export { default as color, resolveContrastColor } from './color';
-export * from './compare';
 export { default as composeEventHandlers } from './composeEventHandlers';
 export { createNumberMask, type CreateNumberMaskProps } from './createNumberMask';
 export * from './createSyntheticEvent';
@@ -16,5 +14,4 @@ export {
     normalizeToNumberString,
     type NormalizeToNumberStringProps,
 } from './normalizeToNumberString';
-export { Repository } from './repository';
 export * from './resolveStateVariant';

package/utils/normalizeToNumberString/normalizeToNumberString.ts

@@ -1,4 +1,4 @@
-import { isNil } from '../lodash';
+import { isNil } from '@react-native-molecules/utils/helpers/lodash';
 
 export type NormalizeToNumberStringProps = {
     text: string;

package/context-bridge/index.tsx

@@ -1,87 +0,0 @@
-import type { ComponentType, Context as ContextType, PropsWithChildren } from 'react';
-import { Fragment, useContext, useId, useMemo, useRef, useState } from 'react';
-
-import typedMemo from '../hocs/typedMemo';
-import { Repository } from '../utils/repository';
-
-// https://github.com/pmndrs/its-fine/blob/main/src/index.tsx
-// In development, React will warn about using contexts between renderers.
-// Hide the warning because its-fine fixes this issue
-// https://github.com/facebook/react/pull/12779
-function wrapContext<T>(context: React.Context<T>): React.Context<T> {
-    try {
-        return Object.defineProperties(context, {
-            _currentRenderer: {
-                get() {
-                    return null;
-                },
-                set() {},
-            },
-            _currentRenderer2: {
-                get() {
-                    return null;
-                },
-                set() {},
-            },
-        });
-    } catch (_) {
-        return context;
-    }
-}
-
-export const createContextBridge = <T extends object>(
-    bridgeName: string,
-    Wrapper: ComponentType<T>,
-    contexts: ContextType<any>[] = [],
-) => {
-    const respository = new Repository<ContextType<any>[]>({
-        name: bridgeName,
-        onRegister: (arg, name, registry) => {
-            return [registry[name] ?? [], arg].flat();
-        },
-    });
-
-    return {
-        registerContextToBridge: (updatedContexts: ContextType<any> | ContextType<any>[]) => {
-            respository.register(
-                'contexts',
-                ([] as ContextType<any>[])
-                    .concat(updatedContexts)
-                    .map(context => wrapContext(context)),
-            );
-        },
-        BridgedComponent: typedMemo((props: PropsWithChildren<T> & { name?: string }) => {
-            const { name, ...rest } = props;
-            const contextValuesRef = useRef<any[]>([]);
-
-            const id = useId();
-
-            const [allContexts] = useState(() =>
-                Array.from(new Set([...contexts, ...Object.values(respository.getAll()).flat()])),
-            );
-
-            for (const i in allContexts) {
-                // eslint-disable-next-line react-hooks/rules-of-hooks
-                contextValuesRef.current[i] = useContext(allContexts[i]);
-            }
-
-            const content = useMemo(() => {
-                return allContexts.reduce((acc, Context, currentIndex) => {
-                    return (
-                        <Context.Provider value={contextValuesRef.current[currentIndex]}>
-                            {acc}
-                        </Context.Provider>
-                    );
-                }, <>{props.children}</>);
-                // eslint-disable-next-line react-hooks/exhaustive-deps
-            }, [...contextValuesRef.current, allContexts, props.children]);
-
-            const _key = name ? name + id : id;
-            return (
-                <Wrapper name={name} {...(rest as T)}>
-                    <Fragment key={_key}>{content}</Fragment>
-                </Wrapper>
-            );
-        }),
-    };
-};