react-native-onyx 2.0.40 → 2.0.42

package/dist/OnyxUtils.d.ts

@@ -1,6 +1,6 @@
 import type { ValueOf } from 'type-fest';
-import type { DeepRecord, Mapping, CollectionKey, CollectionKeyBase, NullableKeyValueMapping, OnyxKey, OnyxValue, OnyxCollection, WithOnyxConnectOptions, OnyxEntry, KeyValueMapping } from './types';
 import type Onyx from './Onyx';
+import type { CollectionKey, CollectionKeyBase, DeepRecord, KeyValueMapping, Mapping, NullableKeyValueMapping, OnyxCollection, OnyxEntry, OnyxKey, OnyxValue, WithOnyxConnectOptions } from './types';
 declare const METHOD: {
     readonly SET: "set";
     readonly MERGE: "merge";

package/dist/OnyxUtils.js

@@ -30,14 +30,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /* eslint-disable no-continue */
 const fast_equals_1 = require("fast-equals");
 const clone_1 = __importDefault(require("lodash/clone"));
+const DevTools_1 = __importDefault(require("./DevTools"));
 const Logger = __importStar(require("./Logger"));
 const OnyxCache_1 = __importDefault(require("./OnyxCache"));
-const Str = __importStar(require("./Str"));
 const PerformanceUtils = __importStar(require("./PerformanceUtils"));
+const Str = __importStar(require("./Str"));
+const batch_1 = __importDefault(require("./batch"));
 const storage_1 = __importDefault(require("./storage"));
 const utils_1 = __importDefault(require("./utils"));
-const batch_1 = __importDefault(require("./batch"));
-const DevTools_1 = __importDefault(require("./DevTools"));
 // Method constants
 const METHOD = {
     SET: 'set',

package/dist/index.d.ts

@@ -1,9 +1,10 @@
+import type { ConnectOptions, OnyxUpdate } from './Onyx';
 import Onyx from './Onyx';
-import type { OnyxUpdate, ConnectOptions } from './Onyx';
-import type { CustomTypeOptions, OnyxCollection, OnyxEntry, NullishDeep, KeyValueMapping, OnyxKey, Selector, WithOnyxInstanceState, OnyxValue } from './types';
-import type { UseOnyxResult, FetchStatus, ResultMetadata } from './useOnyx';
+import type { CustomTypeOptions, KeyValueMapping, NullishDeep, OnyxCollection, OnyxEntry, OnyxKey, OnyxValue, Selector } from './types';
+import type { FetchStatus, ResultMetadata, UseOnyxResult } from './useOnyx';
 import useOnyx from './useOnyx';
 import withOnyx from './withOnyx';
+import type { WithOnyxState } from './withOnyx/types';
 export default Onyx;
-export { withOnyx, useOnyx };
-export type { CustomTypeOptions, OnyxCollection, OnyxEntry, OnyxUpdate, ConnectOptions, NullishDeep, KeyValueMapping, OnyxKey, Selector, WithOnyxInstanceState, UseOnyxResult, OnyxValue, FetchStatus, ResultMetadata, };
+export { useOnyx, withOnyx };
+export type { ConnectOptions, CustomTypeOptions, FetchStatus, KeyValueMapping, NullishDeep, OnyxCollection, OnyxEntry, OnyxKey, OnyxUpdate, OnyxValue, ResultMetadata, Selector, UseOnyxResult, WithOnyxState, };

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOnyx = exports.withOnyx = void 0;
+exports.withOnyx = exports.useOnyx = void 0;
 const Onyx_1 = __importDefault(require("./Onyx"));
 const useOnyx_1 = __importDefault(require("./useOnyx"));
 exports.useOnyx = useOnyx_1.default;

package/dist/types.d.ts

@@ -1,7 +1,7 @@
-import type { Component } from 'react';
 import type { Merge } from 'type-fest';
 import type { BuiltIns } from 'type-fest/source/internal';
 import type OnyxUtils from './OnyxUtils';
+import type { WithOnyxInstance, WithOnyxState } from './withOnyx/types';
 /**
  * Utility type that excludes `null` from the type `TValue`.
  */
@@ -132,7 +132,7 @@ type NullableKeyValueMapping = {
  * The type `TKey` extends `OnyxKey` and it is the key used to access a value in `KeyValueMapping`.
  * `TReturnType` is the type of the returned value from the selector function.
  */
-type Selector<TKey extends OnyxKey, TOnyxProps, TReturnType> = (value: OnyxEntry<KeyValueMapping[TKey]>, state: WithOnyxInstanceState<TOnyxProps>) => TReturnType;
+type Selector<TKey extends OnyxKey, TOnyxProps, TReturnType> = (value: OnyxEntry<KeyValueMapping[TKey]>, state?: WithOnyxState<TOnyxProps>) => TReturnType;
 /**
  * Represents a single Onyx entry, that can be either `TOnyxValue` or `null` / `undefined` if it doesn't exist.
  *
@@ -220,12 +220,6 @@ type NullishDeep<T> = T extends NonTransformableTypes ? T : T extends object ? N
 type NullishObjectDeep<ObjectType extends object> = {
     [KeyType in keyof ObjectType]?: NullishDeep<ObjectType[KeyType]> | null;
 };
-/**
- * Represents withOnyx's internal state, containing the Onyx props and a `loading` flag.
- */
-type WithOnyxInstanceState<TOnyxProps> = (TOnyxProps & {
-    loading: boolean;
-}) | undefined;
 /**
  * Represents a mapping between Onyx collection keys and their respective values.
  *
@@ -238,10 +232,6 @@ type WithOnyxInstanceState<TOnyxProps> = (TOnyxProps & {
 type Collection<TKey extends CollectionKeyBase, TMap, TValue> = {
     [MapK in keyof TMap]: MapK extends `${TKey}${string}` ? MapK extends `${TKey}` ? never : TValue : never;
 };
-type WithOnyxInstance = Component<unknown, WithOnyxInstanceState<NullableKeyValueMapping>> & {
-    setStateProxy: (cb: (state: Record<string, OnyxCollection<KeyValueMapping[OnyxKey]>>) => OnyxValue<OnyxKey>) => void;
-    setWithOnyxState: (statePropertyName: OnyxKey, value: OnyxValue<OnyxKey>) => void;
-};
 /** Represents the base options used in `Onyx.connect()` method. */
 type BaseConnectOptions = {
     initWithStoredValues?: boolean;
@@ -342,4 +332,5 @@ type InitOptions = {
     /** Enables debugging setState() calls to connected components */
     debugSetState?: boolean;
 };
-export type { BaseConnectOptions, Collection, CollectionConnectCallback, CollectionConnectOptions, CollectionKey, CollectionKeyBase, ConnectOptions, CustomTypeOptions, DeepRecord, DefaultConnectCallback, DefaultConnectOptions, ExtractOnyxCollectionValue, InitOptions, Key, KeyValueMapping, Mapping, NonNull, NonUndefined, NullableKeyValueMapping, NullishDeep, OnyxCollection, OnyxEntry, OnyxKey, OnyxUpdate, OnyxValue, Selector, WithOnyxConnectOptions, WithOnyxInstance, WithOnyxInstanceState, };
+type GenericFunction = (...args: any[]) => any;
+export type { BaseConnectOptions, Collection, CollectionConnectCallback, CollectionConnectOptions, CollectionKey, CollectionKeyBase, ConnectOptions, CustomTypeOptions, DeepRecord, DefaultConnectCallback, DefaultConnectOptions, ExtractOnyxCollectionValue, GenericFunction, InitOptions, Key, KeyValueMapping, Mapping, NonNull, NonUndefined, NullableKeyValueMapping, NullishDeep, OnyxCollection, OnyxEntry, OnyxKey, OnyxUpdate, OnyxValue, Selector, WithOnyxConnectOptions, };

package/dist/useOnyx.d.ts

@@ -4,7 +4,7 @@ import type { CollectionKeyBase, KeyValueMapping, NonNull, OnyxCollection, OnyxE
  * Represents a Onyx value that can be either a single entry or a collection of entries, depending on the `TKey` provided.
  * It's a variation of `OnyxValue` type that is read-only and excludes the `null` type.
  */
-type UseOnyxValue<TKey extends OnyxKey> = string extends TKey ? unknown : TKey extends CollectionKeyBase ? Readonly<NonNull<OnyxCollection<KeyValueMapping[TKey]>>> : Readonly<NonNull<OnyxEntry<KeyValueMapping[TKey]>>>;
+type UseOnyxValue<TKey extends OnyxKey> = string extends TKey ? unknown : TKey extends CollectionKeyBase ? NonNull<OnyxCollection<KeyValueMapping[TKey]>> : NonNull<OnyxEntry<KeyValueMapping[TKey]>>;
 type BaseUseOnyxOptions = {
     /**
      * Determines if this key in this subscription is safe to be evicted.
@@ -35,7 +35,7 @@ type UseOnyxSelectorOption<TKey extends OnyxKey, TReturnValue> = {
     selector?: Selector<TKey, unknown, TReturnValue>;
 };
 type FetchStatus = 'loading' | 'loaded';
-type CachedValue<TKey extends OnyxKey, TValue> = IsEqual<TValue, UseOnyxValue<TKey>> extends true ? TValue : TKey extends CollectionKeyBase ? Readonly<NonNullable<OnyxCollection<TValue>>> : Readonly<TValue>;
+type CachedValue<TKey extends OnyxKey, TValue> = IsEqual<TValue, UseOnyxValue<TKey>> extends true ? TValue : TKey extends CollectionKeyBase ? NonNullable<OnyxCollection<TValue>> : TValue;
 type ResultMetadata = {
     status: FetchStatus;
 };

package/dist/utils.d.ts

@@ -21,11 +21,29 @@ declare function checkCompatibilityWithExistingValue(value: unknown, existingVal
     existingValueType?: string;
     newValueType?: string;
 };
+/**
+ * Picks entries from an object based on a condition.
+ *
+ * @param obj - The object to pick entries from.
+ * @param condition - The condition to determine which entries to pick.
+ * @returns The object containing only the picked entries.
+ */
+declare function pick<TValue>(obj: Record<string, TValue>, condition: string | string[] | ((entry: [string, TValue]) => boolean)): Record<string, TValue>;
+/**
+ * Omits entries from an object based on a condition.
+ *
+ * @param obj - The object to omit entries from.
+ * @param condition - The condition to determine which entries to omit.
+ * @returns The object containing only the remaining entries after omission.
+ */
+declare function omit<TValue>(obj: Record<string, TValue>, condition: string | string[] | ((entry: [string, TValue]) => boolean)): Record<string, TValue>;
 declare const _default: {
     isEmptyObject: typeof isEmptyObject;
     fastMerge: typeof fastMerge;
     formatActionName: typeof formatActionName;
     removeNestedNullValues: typeof removeNestedNullValues;
     checkCompatibilityWithExistingValue: typeof checkCompatibilityWithExistingValue;
+    pick: typeof pick;
+    omit: typeof omit;
 };
 export default _default;

package/dist/utils.js

@@ -118,4 +118,53 @@ function checkCompatibilityWithExistingValue(value, existingValue) {
         isCompatible: true,
     };
 }
-exports.default = { isEmptyObject, fastMerge, formatActionName, removeNestedNullValues, checkCompatibilityWithExistingValue };
+/**
+ * Filters an object based on a condition and an inclusion flag.
+ *
+ * @param obj - The object to filter.
+ * @param condition - The condition to apply.
+ * @param include - If true, include entries that match the condition; otherwise, exclude them.
+ * @returns The filtered object.
+ */
+function filterObject(obj, condition, include) {
+    const result = {};
+    const entries = Object.entries(obj);
+    for (let i = 0; i < entries.length; i++) {
+        const [key, value] = entries[i];
+        let shouldInclude;
+        if (Array.isArray(condition)) {
+            shouldInclude = condition.includes(key);
+        }
+        else if (typeof condition === 'string') {
+            shouldInclude = key === condition;
+        }
+        else {
+            shouldInclude = condition(entries[i]);
+        }
+        if (include ? shouldInclude : !shouldInclude) {
+            result[key] = value;
+        }
+    }
+    return result;
+}
+/**
+ * Picks entries from an object based on a condition.
+ *
+ * @param obj - The object to pick entries from.
+ * @param condition - The condition to determine which entries to pick.
+ * @returns The object containing only the picked entries.
+ */
+function pick(obj, condition) {
+    return filterObject(obj, condition, true);
+}
+/**
+ * Omits entries from an object based on a condition.
+ *
+ * @param obj - The object to omit entries from.
+ * @param condition - The condition to determine which entries to omit.
+ * @returns The object containing only the remaining entries after omission.
+ */
+function omit(obj, condition) {
+    return filterObject(obj, condition, false);
+}
+exports.default = { isEmptyObject, fastMerge, formatActionName, removeNestedNullValues, checkCompatibilityWithExistingValue, pick, omit };

package/dist/withOnyx/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * This is a higher order component that provides the ability to map a state property directly to
+ * something in Onyx (a key/value store). That way, as soon as data in Onyx changes, the state will be set and the view
+ * will automatically change to reflect the new data.
+ */
+import React from 'react';
+import type { MapOnyxToState } from './types';
+/**
+ * @deprecated Use `useOnyx` instead of `withOnyx` whenever possible.
+ *
+ * This is a higher order component that provides the ability to map a state property directly to
+ * something in Onyx (a key/value store). That way, as soon as data in Onyx changes, the state will be set and the view
+ * will automatically change to reflect the new data.
+ */
+export default function <TComponentProps, TOnyxProps>(mapOnyxToState: MapOnyxToState<TComponentProps, TOnyxProps>, shouldDelayUpdates?: boolean): (component: React.ComponentType<TComponentProps>) => React.ComponentType<Omit<TComponentProps, keyof TOnyxProps>>;

package/dist/{withOnyx.js → withOnyx/index.js}

@@ -31,21 +31,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * something in Onyx (a key/value store). That way, as soon as data in Onyx changes, the state will be set and the view
  * will automatically change to reflect the new data.
  */
-const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
-const underscore_1 = __importDefault(require("underscore"));
-const Onyx_1 = __importDefault(require("./Onyx"));
-const Str = __importStar(require("./Str"));
-const utils_1 = __importDefault(require("./utils"));
-const OnyxUtils_1 = __importDefault(require("./OnyxUtils"));
+const Onyx_1 = __importDefault(require("../Onyx"));
+const OnyxUtils_1 = __importDefault(require("../OnyxUtils"));
+const Str = __importStar(require("../Str"));
+const utils_1 = __importDefault(require("../utils"));
 // This is a list of keys that can exist on a `mapping`, but are not directly related to loading data from Onyx. When the keys of a mapping are looped over to check
 // if a key has changed, it's a good idea to skip looking at these properties since they would have unexpected results.
 const mappingPropertiesToIgnoreChangesTo = ['initialValue', 'allowStaleData'];
 /**
  * Returns the display name of a component
- *
- * @param {object} component
- * @returns {string}
  */
 function getDisplayName(component) {
     return component.displayName || component.name || 'Component';
@@ -53,17 +48,28 @@ function getDisplayName(component) {
 /**
  * Removes all the keys from state that are unrelated to the onyx data being mapped to the component.
  *
- * @param {Object} state of the component
- * @param {Object} onyxToStateMapping the object holding all of the mapping configuration for the component
- * @returns {Object}
+ * @param state of the component
+ * @param onyxToStateMapping the object holding all of the mapping configuration for the component
+ */
+function getOnyxDataFromState(state, onyxToStateMapping) {
+    return utils_1.default.pick(state, Object.keys(onyxToStateMapping));
+}
+/**
+ * Utility function to return the properly typed entries of the `withOnyx` mapping object.
+ */
+function mapOnyxToStateEntries(mapOnyxToState) {
+    return Object.entries(mapOnyxToState);
+}
+/**
+ * @deprecated Use `useOnyx` instead of `withOnyx` whenever possible.
+ *
+ * This is a higher order component that provides the ability to map a state property directly to
+ * something in Onyx (a key/value store). That way, as soon as data in Onyx changes, the state will be set and the view
+ * will automatically change to reflect the new data.
  */
-const getOnyxDataFromState = (state, onyxToStateMapping) => underscore_1.default.pick(state, underscore_1.default.keys(onyxToStateMapping));
 function default_1(mapOnyxToState, shouldDelayUpdates = false) {
     // A list of keys that must be present in tempState before we can render the WrappedComponent
-    const requiredKeysForInit = underscore_1.default.chain(mapOnyxToState)
-        .omit((config) => config.initWithStoredValues === false)
-        .keys()
-        .value();
+    const requiredKeysForInit = Object.keys(utils_1.default.omit(mapOnyxToState, ([, options]) => options.initWithStoredValues === false));
     return (WrappedComponent) => {
         const displayName = getDisplayName(WrappedComponent);
         class withOnyx extends react_1.default.Component {
@@ -76,7 +82,7 @@ function default_1(mapOnyxToState, shouldDelayUpdates = false) {
                 // This stores all the Onyx connection IDs to be used when the component unmounts so everything can be
                 // disconnected. It is a key value store with the format {[mapping.key]: connectionID}.
                 this.activeConnectionIDs = {};
-                const cachedState = underscore_1.default.reduce(mapOnyxToState, (resultObj, mapping, propertyName) => {
+                const cachedState = mapOnyxToStateEntries(mapOnyxToState).reduce((resultObj, [propName, mapping]) => {
                     const key = Str.result(mapping.key, props);
                     let value = OnyxUtils_1.default.tryGetCachedValue(key, mapping);
                     if (!value && mapping.initialValue) {
@@ -95,12 +101,12 @@ function default_1(mapOnyxToState, shouldDelayUpdates = false) {
                      */
                     if (mapping.initWithStoredValues !== false && ((value !== undefined && !OnyxUtils_1.default.hasPendingMergeForKey(key)) || mapping.allowStaleData)) {
                         // eslint-disable-next-line no-param-reassign
-                        resultObj[propertyName] = value;
+                        resultObj[propName] = value;
                     }
                     return resultObj;
                 }, {});
                 // If we have all the data we need, then we can render the component immediately
-                cachedState.loading = underscore_1.default.size(cachedState) < requiredKeysForInit.length;
+                cachedState.loading = Object.keys(cachedState).length < requiredKeysForInit.length;
                 // Object holding the temporary initial state for the component while we load the various Onyx keys
                 this.tempState = cachedState;
                 this.state = cachedState;
@@ -108,12 +114,12 @@ function default_1(mapOnyxToState, shouldDelayUpdates = false) {
             componentDidMount() {
                 const onyxDataFromState = getOnyxDataFromState(this.state, mapOnyxToState);
                 // Subscribe each of the state properties to the proper Onyx key
-                underscore_1.default.each(mapOnyxToState, (mapping, propertyName) => {
-                    if (underscore_1.default.includes(mappingPropertiesToIgnoreChangesTo, propertyName)) {
+                mapOnyxToStateEntries(mapOnyxToState).forEach(([propName, mapping]) => {
+                    if (mappingPropertiesToIgnoreChangesTo.includes(propName)) {
                         return;
                     }
                     const key = Str.result(mapping.key, Object.assign(Object.assign({}, this.props), onyxDataFromState));
-                    this.connectMappingToOnyx(mapping, propertyName, key);
+                    this.connectMappingToOnyx(mapping, propName, key);
                 });
                 this.checkEvictableKeys();
             }
@@ -124,9 +130,9 @@ function default_1(mapOnyxToState, shouldDelayUpdates = false) {
                 const isFirstTimeUpdatingAfterLoading = prevState.loading && !this.state.loading;
                 const onyxDataFromState = getOnyxDataFromState(this.state, mapOnyxToState);
                 const prevOnyxDataFromState = getOnyxDataFromState(prevState, mapOnyxToState);
-                underscore_1.default.each(mapOnyxToState, (mapping, propName) => {
+                mapOnyxToStateEntries(mapOnyxToState).forEach(([propName, mapping]) => {
                     // Some properties can be ignored because they aren't related to onyx keys and they will never change
-                    if (underscore_1.default.includes(mappingPropertiesToIgnoreChangesTo, propName)) {
+                    if (mappingPropertiesToIgnoreChangesTo.includes(propName)) {
                         return;
                     }
                     // The previous key comes from either:
@@ -148,7 +154,7 @@ function default_1(mapOnyxToState, shouldDelayUpdates = false) {
             }
             componentWillUnmount() {
                 // Disconnect everything from Onyx
-                underscore_1.default.each(mapOnyxToState, (mapping) => {
+                mapOnyxToStateEntries(mapOnyxToState).forEach(([, mapping]) => {
                     const key = Str.result(mapping.key, Object.assign(Object.assign({}, this.props), getOnyxDataFromState(this.state, mapOnyxToState)));
                     Onyx_1.default.disconnect(this.activeConnectionIDs[key], key);
                 });
@@ -175,9 +181,6 @@ function default_1(mapOnyxToState, shouldDelayUpdates = false) {
              * We however need to workaround this issue in the HOC. The addition of initialValue makes things even more complex,
              * since you cannot be really sure if the component has been updated before or after the initial hydration. Therefore if
              * initialValue is there, we just check if the update is different than that and then try to handle it as best as we can.
-             *
-             * @param {String} statePropertyName
-             * @param {*} val
              */
             setWithOnyxState(statePropertyName, val) {
                 const prevValue = this.state[statePropertyName];
@@ -198,7 +201,7 @@ function default_1(mapOnyxToState, shouldDelayUpdates = false) {
                 }
                 this.tempState[statePropertyName] = val;
                 // If some key does not have a value yet, do not update the state yet
-                const tempStateIsMissingKey = underscore_1.default.some(requiredKeysForInit, (key) => underscore_1.default.isUndefined(this.tempState[key]));
+                const tempStateIsMissingKey = requiredKeysForInit.some((key) => { var _a; return ((_a = this.tempState) === null || _a === void 0 ? void 0 : _a[key]) === undefined; });
                 if (tempStateIsMissingKey) {
                     return;
                 }
@@ -206,25 +209,26 @@ function default_1(mapOnyxToState, shouldDelayUpdates = false) {
                 delete this.tempState;
                 // Full of hacky workarounds to prevent the race condition described above.
                 this.setState((prevState) => {
-                    const finalState = underscore_1.default.reduce(stateUpdate, (result, value, key) => {
+                    const finalState = Object.keys(stateUpdate).reduce((result, _key) => {
+                        const key = _key;
                         if (key === 'loading') {
                             return result;
                         }
                         const initialValue = mapOnyxToState[key].initialValue;
                         // If initialValue is there and the state contains something different it means
                         // an update has already been received and we can discard the value we are trying to hydrate
-                        if (!underscore_1.default.isUndefined(initialValue) && !underscore_1.default.isUndefined(prevState[key]) && prevState[key] !== initialValue) {
+                        if (initialValue !== undefined && prevState[key] !== undefined && prevState[key] !== initialValue) {
                             // eslint-disable-next-line no-param-reassign
                             result[key] = prevState[key];
                             // if value is already there (without initial value) then we can discard the value we are trying to hydrate
                         }
-                        else if (!underscore_1.default.isUndefined(prevState[key])) {
+                        else if (prevState[key] !== undefined) {
                             // eslint-disable-next-line no-param-reassign
                             result[key] = prevState[key];
                         }
                         else {
                             // eslint-disable-next-line no-param-reassign
-                            result[key] = value;
+                            result[key] = stateUpdate[key];
                         }
                         return result;
                     }, {});
@@ -241,11 +245,11 @@ function default_1(mapOnyxToState, shouldDelayUpdates = false) {
                 // We will add this key to our list of recently accessed keys
                 // if the canEvict function returns true. This is necessary criteria
                 // we MUST use to specify if a key can be removed or not.
-                underscore_1.default.each(mapOnyxToState, (mapping) => {
-                    if (underscore_1.default.isUndefined(mapping.canEvict)) {
+                mapOnyxToStateEntries(mapOnyxToState).forEach(([, mapping]) => {
+                    if (mapping.canEvict === undefined) {
                         return;
                     }
-                    const canEvict = Str.result(mapping.canEvict, this.props);
+                    const canEvict = !!Str.result(mapping.canEvict, this.props);
                     const key = Str.result(mapping.key, this.props);
                     if (!OnyxUtils_1.default.isSafeEvictionKey(key)) {
                         throw new Error(`canEvict can't be used on key '${key}'. This key must explicitly be flagged as safe for removal by adding it to Onyx.init({safeEvictionKeys: []}).`);
@@ -261,22 +265,21 @@ function default_1(mapOnyxToState, shouldDelayUpdates = false) {
             /**
              * Takes a single mapping and binds the state of the component to the store
              *
-             * @param {object} mapping
-             * @param {string|function} mapping.key key to connect to. can be a string or a
+             * @param mapping.key key to connect to. can be a string or a
              * function that takes this.props as an argument and returns a string
-             * @param {string} statePropertyName the name of the state property that Onyx will add the data to
-             * @param {boolean} [mapping.initWithStoredValues] If set to false, then no data will be prefilled into the
+             * @param statePropertyName the name of the state property that Onyx will add the data to
+             * @param [mapping.initWithStoredValues] If set to false, then no data will be prefilled into the
              *  component
-             * @param {string} key to connect to Onyx with
+             * @param key to connect to Onyx with
              */
             connectMappingToOnyx(mapping, statePropertyName, key) {
+                const onyxMapping = mapOnyxToState[statePropertyName];
                 // Remember what the previous key was so that key changes can be detected when data is being loaded from Onyx. This will allow
                 // dependent keys to finish loading their data.
                 // eslint-disable-next-line no-param-reassign
-                mapOnyxToState[statePropertyName].previousKey = key;
+                onyxMapping.previousKey = key;
                 // eslint-disable-next-line rulesdir/prefer-onyx-connect-in-libs
-                this.activeConnectionIDs[key] = Onyx_1.default.connect(Object.assign(Object.assign({}, mapping), { key,
-                    statePropertyName, withOnyxInstance: this, displayName }));
+                this.activeConnectionIDs[key] = Onyx_1.default.connect(Object.assign(Object.assign({}, mapping), { key, statePropertyName: statePropertyName, withOnyxInstance: this, displayName }));
             }
             flushPendingSetStates() {
                 if (!this.shouldDelayUpdates) {
@@ -290,29 +293,18 @@ function default_1(mapOnyxToState, shouldDelayUpdates = false) {
             }
             render() {
                 // Remove any null values so that React replaces them with default props
-                const propsToPass = underscore_1.default.omit(this.props, underscore_1.default.isNull);
+                const propsToPass = utils_1.default.omit(this.props, ([, propValue]) => propValue === null);
                 if (this.state.loading) {
                     return null;
                 }
                 // Remove any internal state properties used by withOnyx
                 // that should not be passed to a wrapped component
-                let stateToPass = underscore_1.default.omit(this.state, 'loading');
-                stateToPass = underscore_1.default.omit(stateToPass, underscore_1.default.isNull);
+                const stateToPass = utils_1.default.omit(this.state, ([stateKey, stateValue]) => stateKey === 'loading' || stateValue === null);
                 const stateToPassWithoutNestedNulls = utils_1.default.removeNestedNullValues(stateToPass);
                 // Spreading props and state is necessary in an HOC where the data cannot be predicted
                 return (react_1.default.createElement(WrappedComponent, Object.assign({ markReadyForHydration: this.flushPendingSetStates }, propsToPass, stateToPassWithoutNestedNulls, { ref: this.props.forwardedRef })));
             }
         }
-        withOnyx.propTypes = {
-            forwardedRef: prop_types_1.default.oneOfType([
-                prop_types_1.default.func,
-                // eslint-disable-next-line react/forbid-prop-types
-                prop_types_1.default.shape({ current: prop_types_1.default.object }),
-            ]),
-        };
-        withOnyx.defaultProps = {
-            forwardedRef: undefined,
-        };
         withOnyx.displayName = `withOnyx(${displayName})`;
         return react_1.default.forwardRef((props, ref) => {
             const Component = withOnyx;

package/dist/{withOnyx.d.ts → withOnyx/types.d.ts}

@@ -1,6 +1,6 @@
-import {IsEqual} from 'type-fest';
-import {CollectionKeyBase, ExtractOnyxCollectionValue, KeyValueMapping, OnyxCollection, OnyxEntry, OnyxKey, Selector} from './types';
-
+import type { ForwardedRef } from 'react';
+import type { IsEqual } from 'type-fest';
+import type { CollectionKeyBase, ExtractOnyxCollectionValue, KeyValueMapping, NullableKeyValueMapping, OnyxCollection, OnyxEntry, OnyxKey, OnyxValue, Selector } from '../types';
 /**
  * Represents the base mapping options between an Onyx key and the component's prop.
  */
@@ -9,15 +9,18 @@ type BaseMapping<TComponentProps, TOnyxProps> = {
     initWithStoredValues?: boolean;
     allowStaleData?: boolean;
 };
-
+/**
+ * Represents the base mapping options when an Onyx collection key is supplied.
+ */
 type CollectionBaseMapping<TOnyxKey extends CollectionKeyBase> = {
     initialValue?: OnyxCollection<KeyValueMapping[TOnyxKey]>;
 };
-
+/**
+ * Represents the base mapping options when an Onyx non-collection key is supplied.
+ */
 type EntryBaseMapping<TOnyxKey extends OnyxKey> = {
     initialValue?: OnyxEntry<KeyValueMapping[TOnyxKey]>;
 };
-
 /**
  * Represents the string / function `key` mapping option between an Onyx key and the component's prop.
  *
@@ -40,12 +43,9 @@ type EntryBaseMapping<TOnyxKey extends OnyxKey> = {
  * },
  * ```
  */
-type BaseMappingKey<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends OnyxKey, TOnyxValue> = IsEqual<TOnyxValue, TOnyxProps[TOnyxProp]> extends true
-    ? {
-          key: TOnyxKey | ((props: Omit<TComponentProps, keyof TOnyxProps> & Partial<TOnyxProps>) => TOnyxKey);
-      }
-    : never;
-
+type BaseMappingKey<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends OnyxKey, TOnyxValue> = IsEqual<TOnyxValue, TOnyxProps[TOnyxProp]> extends true ? {
+    key: TOnyxKey | ((props: Omit<TComponentProps, keyof TOnyxProps> & Partial<TOnyxProps>) => TOnyxKey);
+} : never;
 /**
  * Represents the string `key` and `selector` mapping options between an Onyx key and the component's prop.
  *
@@ -65,7 +65,6 @@ type BaseMappingStringKeyAndSelector<TComponentProps, TOnyxProps, TReturnType, T
     key: TOnyxKey;
     selector: Selector<TOnyxKey, TOnyxProps, TReturnType>;
 };
-
 /**
  * Represents the function `key` and `selector` mapping options between an Onyx key and the component's prop.
  *
@@ -85,29 +84,21 @@ type BaseMappingFunctionKeyAndSelector<TComponentProps, TOnyxProps, TReturnType,
     key: (props: Omit<TComponentProps, keyof TOnyxProps> & Partial<TOnyxProps>) => TOnyxKey;
     selector: Selector<TOnyxKey, TOnyxProps, TReturnType>;
 };
-
 /**
  * Represents the mapping options between an Onyx key and the component's prop with all its possibilities.
  */
-type Mapping<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends OnyxKey> = BaseMapping<TComponentProps, TOnyxProps> &
-    EntryBaseMapping<TOnyxKey> &
-    (
-        | BaseMappingKey<TComponentProps, TOnyxProps, TOnyxProp, TOnyxKey, OnyxEntry<KeyValueMapping[TOnyxKey]>>
-        | BaseMappingStringKeyAndSelector<TComponentProps, TOnyxProps, TOnyxProps[TOnyxProp], TOnyxKey>
-        | BaseMappingFunctionKeyAndSelector<TComponentProps, TOnyxProps, TOnyxProps[TOnyxProp], TOnyxKey>
-    );
-
+type Mapping<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends OnyxKey> = BaseMapping<TComponentProps, TOnyxProps> & EntryBaseMapping<TOnyxKey> & (BaseMappingKey<TComponentProps, TOnyxProps, TOnyxProp, TOnyxKey, OnyxEntry<KeyValueMapping[TOnyxKey]>> | BaseMappingStringKeyAndSelector<TComponentProps, TOnyxProps, TOnyxProps[TOnyxProp], TOnyxKey> | BaseMappingFunctionKeyAndSelector<TComponentProps, TOnyxProps, TOnyxProps[TOnyxProp], TOnyxKey>);
+/**
+ * Represents a superset of `Mapping` type with internal properties included.
+ */
+type WithOnyxMapping<TComponentProps, TOnyxProps> = Mapping<TComponentProps, TOnyxProps, keyof TOnyxProps, OnyxKey> & {
+    connectionID: number;
+    previousKey?: OnyxKey;
+};
 /**
  * Represents the mapping options between an Onyx collection key without suffix and the component's prop with all its possibilities.
  */
-type CollectionMapping<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends CollectionKeyBase> = BaseMapping<TComponentProps, TOnyxProps> &
-    CollectionBaseMapping<TOnyxKey> &
-    (
-        | BaseMappingKey<TComponentProps, TOnyxProps, TOnyxProp, TOnyxKey, OnyxCollection<KeyValueMapping[TOnyxKey]>>
-        | BaseMappingStringKeyAndSelector<TComponentProps, TOnyxProps, ExtractOnyxCollectionValue<TOnyxProps[TOnyxProp]>, TOnyxKey>
-        | BaseMappingFunctionKeyAndSelector<TComponentProps, TOnyxProps, ExtractOnyxCollectionValue<TOnyxProps[TOnyxProp]>, TOnyxKey>
-    );
-
+type CollectionMapping<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps, TOnyxKey extends CollectionKeyBase> = BaseMapping<TComponentProps, TOnyxProps> & CollectionBaseMapping<TOnyxKey> & (BaseMappingKey<TComponentProps, TOnyxProps, TOnyxProp, TOnyxKey, OnyxCollection<KeyValueMapping[TOnyxKey]>> | BaseMappingStringKeyAndSelector<TComponentProps, TOnyxProps, ExtractOnyxCollectionValue<TOnyxProps[TOnyxProp]>, TOnyxKey> | BaseMappingFunctionKeyAndSelector<TComponentProps, TOnyxProps, ExtractOnyxCollectionValue<TOnyxProps[TOnyxProp]>, TOnyxKey>);
 /**
  * Represents an union type of all the possible Onyx key mappings.
  * Each `OnyxPropMapping` will be associated with its respective Onyx key, ensuring different type-safety for each object.
@@ -115,7 +106,6 @@ type CollectionMapping<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOny
 type OnyxPropMapping<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps> = {
     [TOnyxKey in OnyxKey]: Mapping<TComponentProps, TOnyxProps, TOnyxProp, TOnyxKey>;
 }[OnyxKey];
-
 /**
  * Represents an union type of all the possible Onyx collection keys without suffix mappings.
  * Each `OnyxPropCollectionMapping` will be associated with its respective Onyx key, ensuring different type-safety for each object.
@@ -123,19 +113,29 @@ type OnyxPropMapping<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxP
 type OnyxPropCollectionMapping<TComponentProps, TOnyxProps, TOnyxProp extends keyof TOnyxProps> = {
     [TOnyxKey in CollectionKeyBase]: CollectionMapping<TComponentProps, TOnyxProps, TOnyxProp, TOnyxKey>;
 }[CollectionKeyBase];
-
 /**
- * @deprecated Use `useOnyx` instead of `withOnyx` whenever possible.
- *
- * This is a higher order component that provides the ability to map a state property directly to
- * something in Onyx (a key/value store). That way, as soon as data in Onyx changes, the state will be set and the view
- * will automatically change to reflect the new data.
+ * Represents an Onyx mapping object that connects Onyx keys to component's props.
+ */
+type MapOnyxToState<TComponentProps, TOnyxProps> = {
+    [TOnyxProp in keyof TOnyxProps]: OnyxPropMapping<TComponentProps, TOnyxProps, TOnyxProp> | OnyxPropCollectionMapping<TComponentProps, TOnyxProps, TOnyxProp>;
+};
+/**
+ * Represents the `withOnyx` internal component props.
+ */
+type WithOnyxProps<TComponentProps, TOnyxProps> = Omit<TComponentProps, keyof TOnyxProps> & {
+    forwardedRef?: ForwardedRef<unknown>;
+};
+/**
+ * Represents the `withOnyx` internal component state.
  */
-declare function withOnyx<TComponentProps, TOnyxProps>(
-    mapping: {
-        [TOnyxProp in keyof TOnyxProps]: OnyxPropMapping<TComponentProps, TOnyxProps, TOnyxProp> | OnyxPropCollectionMapping<TComponentProps, TOnyxProps, TOnyxProp>;
-    },
-    shouldDelayUpdates?: boolean,
-): (component: React.ComponentType<TComponentProps>) => React.ComponentType<Omit<TComponentProps, keyof TOnyxProps>>;
-
-export default withOnyx;
+type WithOnyxState<TOnyxProps> = TOnyxProps & {
+    loading: boolean;
+};
+/**
+ * Represents the `withOnyx` internal component instance.
+ */
+type WithOnyxInstance = React.Component<unknown, WithOnyxState<NullableKeyValueMapping>> & {
+    setStateProxy: (modifier: Record<string, OnyxCollection<KeyValueMapping[OnyxKey]>> | ((state: Record<string, OnyxCollection<KeyValueMapping[OnyxKey]>>) => OnyxValue<OnyxKey>)) => void;
+    setWithOnyxState: (statePropertyName: OnyxKey, value: OnyxValue<OnyxKey>) => void;
+};
+export type { WithOnyxMapping, MapOnyxToState, WithOnyxProps, WithOnyxInstance, WithOnyxState };

package/dist/withOnyx/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-onyx",
-  "version": "2.0.40",
+  "version": "2.0.42",
   "author": "Expensify, Inc.",
   "homepage": "https://expensify.com",
   "description": "State management for React Native",
@@ -31,7 +31,7 @@
     "lint": "eslint .",
     "typecheck": "tsc --noEmit",
     "test": "jest",
-    "build": "tsc -p tsconfig.build.json && cp ./lib/*.d.ts ./dist",
+    "build": "tsc -p tsconfig.build.json",
     "build:watch": "nodemon --watch lib --ext js,json,ts,tsx --exec \"npm run build && npm pack\"",
     "prebuild:docs": "npm run build",
     "build:docs": "ts-node buildDocs.ts",