@aws-amplify/ui-react-core 3.0.30 → 3.1.1

package/dist/types/elements/types.d.ts

@@ -12,17 +12,27 @@ import React from 'react';
  * are always optional at the interface level, allowing for additional `props`
  * to be added to existing `BaseElement` interfaces as needed.
  */
-export type BaseElement<T = {}, K = {}> = React.ForwardRefExoticComponent<React.PropsWithoutRef<T> & React.RefAttributes<K>>;
+export type BaseElement<T = {}> = (props: T) => React.JSX.Element;
+/**
+ * @internal @unstable
+ *
+ * see @type {BaseElement}
+ *
+ * `BaseElement` with a `ref` corresponding to the `element` type
+ */
+export type BaseElementWithRef<T = {}, K = {}> = React.ForwardRefExoticComponent<React.PropsWithoutRef<T> & React.RefAttributes<K>>;
 type ListElementSubType = 'Ordered' | 'Unordered';
-type ListElementDisplayName = 'List' | `${ListElementSubType}List`;
-type TableElementSubType = 'Body' | 'Data' | 'Row' | 'Head' | 'Header';
+type ListElementDisplayName = `${ListElementSubType}List`;
+type TableElementSubType = 'Body' | 'DataCell' | 'Row' | 'Head' | 'Header';
 type TableElementDisplayName = 'Table' | `Table${TableElementSubType}`;
+type DescriptionElementSubType = 'Details' | 'List' | 'Term';
+type DescriptionElementDisplayName = `Description${DescriptionElementSubType}`;
 /**
  * @internal @unstable
  *
  * allowed values of `displayName` of `BaseElement` and `ElemebtsContext` keys
  */
-export type ElementDisplayName = 'Button' | 'Divider' | 'Heading' | 'Icon' | 'Image' | 'Input' | 'Label' | 'ListItem' | 'Nav' | 'ProgressBar' | 'Span' | 'Text' | 'TextArea' | 'Title' | 'View' | ListElementDisplayName | TableElementDisplayName;
+export type ElementDisplayName = 'Button' | 'Heading' | 'Icon' | 'Image' | 'Input' | 'Label' | 'ListItem' | 'Nav' | 'ProgressBar' | 'Span' | 'Text' | 'TextArea' | 'Title' | 'View' | DescriptionElementDisplayName | ListElementDisplayName | TableElementDisplayName;
 /**
  * @internal @unstable
  */
@@ -36,7 +46,7 @@ export type ReactElementType = keyof React.JSX.IntrinsicElements;
 /**
  * @internal @unstable
  */
-export type ReactElementProps<T extends ReactElementType> = React.JSX.IntrinsicElements[T];
+export type ReactElementProps<T extends ReactElementType> = React.ComponentProps<T>;
 /**
  * @internal @unstable
  *
@@ -46,8 +56,80 @@ type ElementPropKey<T> = T | 'children' | 'className' | 'style';
 /**
  * @internal @unstable
  */
-export type BaseElementProps<T extends keyof K, V = string, K extends Record<ElementPropKey<keyof K>, any> = Record<string, any>> = React.AriaAttributes & React.RefAttributes<ElementRefType<K>> & Pick<K, ElementPropKey<T>> & {
+export type BaseElementProps<T extends keyof K, V = string, K extends Record<ElementPropKey<keyof K>, any> = Record<string, any>> = React.AriaAttributes & React.Attributes & Pick<K, ElementPropKey<T>> & {
     testId?: string;
     variant?: V;
 };
+/**
+ * @internal @unstable
+ */
+export type BaseElementWithRefProps<T extends keyof K, V = string, K extends Record<ElementPropKey<keyof K>, any> = Record<string, any>> = BaseElementProps<T, V, K> & React.RefAttributes<ElementRefType<K>>;
+/**
+ * @internal @unstable
+ */
+export type ElementWithAndWithoutRef<T extends ReactElementType, K extends React.ComponentType<React.ComponentProps<T>> = React.ComponentType<React.ComponentProps<T>>> = K extends React.ComponentType<infer U> ? React.ForwardRefExoticComponent<U> : never;
+/**
+ * @internal @unstable
+ *
+ * Merge `BaseElement` defintions with `elements` types provided by
+ * consumers, for use with top level connected component function
+ * signatures.
+ *
+ * Example:
+ *
+ * ```tsx
+ *  export function createStorageBrowser<
+ *    T extends Partial<StorageBrowserElements>,
+ *  >({ elements }: CreateStorageBrowserInput<T> = {}): {
+ *    StorageBrowser: StorageBrowser<MergeElements<StorageBrowserElements, T>>
+ *  } {
+ *    // ...do create stuff
+ *  };
+ * ```
+ */
+export type MergeBaseElements<T, K extends Partial<T>> = {
+    [U in keyof T]: K[U] extends T[U] ? K[U] : T[U];
+};
+/**
+ * @internal @unstable
+ *
+ * Extend the defintion of a `BaseElement` with additional `props`.
+ *
+ * Use cases are restricted to scenarios where additional `props`
+ * are required for a `ControlElement` interface, for example:
+ *
+ * @example
+ * ```tsx
+ *  const FieldInput = defineBaseElementWithRef({
+ *    type: 'input',
+ *    displayName: 'Input'
+ *  });
+ *
+ *  type InputWithSearchCallback =
+ *    ExtendBaseElement<
+ *      typeof FieldInput,
+ *      { onSearch?: (event: { value: string }) => void }
+ *    >
+ *
+ *  const SearchInput = React.forwardRef((
+ *    { onSearch, ...props }
+ *    ref
+ *    ) => {
+ *      // ...do something with onSearch
+ *
+ *      return <FieldInput {...props} ref={ref} />;
+ *  });
+ * ```
+ *
+ * Caveats:
+ * - additional `props` should not be passed directly to
+ * `BaseElement` components, the outputted interface should be
+ * applied to a wrapping element that handles the additional `props`
+ *
+ * - additional `props` that share a key with existing `props`
+ * are omitted from the outputted interface to adhere to `BaseElement`
+ * type contracts
+ *
+ */
+export type ExtendBaseElement<T extends React.ComponentType, K = {}, U extends React.ComponentPropsWithRef<T> = React.ComponentPropsWithRef<T>> = BaseElementWithRef<U & Omit<K, keyof U>, U>;
 export {};

package/dist/types/elements/utils.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function isComponent<T>(component?: React.ComponentType<T> | React.ForwardRefExoticComponent<T>): component is React.ComponentType<T>;
+export declare function isForwardRefExoticComponent<T>(component: React.ComponentType<T> | React.ForwardRefExoticComponent<T>): component is React.ForwardRefExoticComponent<T>;

package/dist/types/elements/withBaseElementProps.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseElement, ElementRefType } from './types';
+import { BaseElementWithRef, ElementRefType } from './types';
 /**
  * @internal @unstable
  *
@@ -15,7 +15,7 @@ import { BaseElement, ElementRefType } from './types';
  * type InputElementPropKey = 'onChange' | 'type';
  *
  * // create `InputElement` base with `type` generic and extended `props` key
- * export const InputElement = defineBaseElement<"input", InputElementPropKey>({
+ * export const InputElement = defineBaseElementWithRef<"input", InputElementPropKey>({
  *   type: "input",
  *   displayName: "Input",
  * });
@@ -31,4 +31,4 @@ import { BaseElement, ElementRefType } from './types';
  * @param defaultProps `defaultProps` to apply to `Target`, accepts object or callback
  * @returns extended `BaseElement` with `defaultProps`
  */
-export default function withBaseElementProps<T, K extends T | ((input: T) => T)>(Target: React.ForwardRefExoticComponent<T>, defaultProps: K): BaseElement<T, ElementRefType<T>>;
+export default function withBaseElementProps<T, K extends T | ((input: T) => T)>(Target: React.ForwardRefExoticComponent<T>, defaultProps: K): BaseElementWithRef<T, ElementRefType<T>>;

package/dist/types/hooks/index.d.ts

@@ -1,4 +1,4 @@
-export { default as useDataState, DataState } from './useDataState';
+export { default as useDataState, AsyncDataAction, DataAction, DataState, } from './useDataState';
 export { default as useDeprecationWarning, UseDeprecationWarning, } from './useDeprecationWarning';
 export { default as useGetUrl } from './useGetUrl';
 export { default as useHasValueUpdated } from './useHasValueUpdated';

package/dist/types/hooks/useDataState.d.ts

@@ -4,4 +4,9 @@ export interface DataState<T> {
     isLoading: boolean;
     message: string | undefined;
 }
-export default function useDataState<T, K>(action: (prevData: T, ...input: K[]) => T | Promise<T>, initialData: T): [state: DataState<T>, handleAction: (...input: K[]) => void];
+export type DataAction<T = any, K = any> = (prevData: T, input: K) => T;
+export type AsyncDataAction<T = any, K = any> = (prevData: T, input: K) => Promise<T>;
+export default function useDataState<T, K>(action: DataAction<T, K> | AsyncDataAction<T, K>, initialData: T, options?: {
+    onSuccess?: (data: T) => void;
+    onError?: (message: string) => void;
+}): [state: DataState<T>, handleAction: (input: K) => void];

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export { AuthenticatorComponentDefaults, AuthenticatorComponentDefaultProps, AuthenticatorComponentOverrides, AuthenticatorFooterComponent, AuthenticatorFormFieldsComponent, AuthenticatorHeaderComponent, AuthenticatorLegacyField, AuthenticatorMachineContext, AuthenticatorProvider, AuthenticatorRouteComponentKey, AuthenticatorRouteComponentName, isAuthenticatorComponentRouteKey, resolveAuthenticatorComponents, useAuthenticator, useAuthenticatorRoute, UseAuthenticator, useAuthenticatorInitMachine, UseAuthenticatorRoute, } from './Authenticator';
 export { FormProvider, FormProviderProps, RenderNothing, FormValues, FormHandle, useField, useForm, UseForm, Validate, Validator, withFormProvider, } from './components';
-export { useDeprecationWarning, UseDeprecationWarning, useGetUrl, useHasValueUpdated, usePreviousValue, useSetUserAgent, useTimeout, useDataState, DataState, useDropZone, UseDropZoneParams, } from './hooks';
+export { AsyncDataAction, DataAction, useDeprecationWarning, UseDeprecationWarning, useGetUrl, useHasValueUpdated, usePreviousValue, useSetUserAgent, useTimeout, useDataState, DataState, useDropZone, UseDropZoneParams, } from './hooks';
 export { MergeProps } from './types';
 export { createContextUtilities } from './utils';

package/dist/types/utils/createContextUtilities.d.ts

@@ -16,7 +16,7 @@ type HookParams = {
 };
 type UtilityKey<ContextName extends string> = `${ContextName}Provider` | `use${ContextName}` | `${ContextName}Context`;
 type CreateContextUtilitiesReturn<ContextType, ContextName extends string> = {
-    [Key in UtilityKey<ContextName>]: Key extends `${string}Provider` ? React.ComponentType<React.PropsWithChildren<ContextType>> : Key extends `use${string}` ? (params?: HookParams) => ContextType : Key extends `${string}Context` ? React.Context<ContextType | undefined> : never;
+    [Key in UtilityKey<ContextName>]: Key extends `${string}Provider` ? React.ComponentType<React.PropsWithChildren<ContextType>> : Key extends `use${string}` ? (params?: HookParams) => ContextType : Key extends `${string}Context` ? React.Context<ContextType> : never;
 };
 /**
  * Uses `ContextType`/`Name` generics and `options` to create:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-core",
-  "version": "3.0.30",
+  "version": "3.1.1",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "react-native": "src/index.ts",
@@ -40,14 +40,14 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.6.6",
+    "@aws-amplify/ui": "6.7.1",
     "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
     "react-hook-form": "^7.43.5",
     "xstate": "^4.33.6"
   },
   "peerDependencies": {
-    "aws-amplify": "^6.6.5",
+    "aws-amplify": "^6.9.0",
     "react": "^16.14.0 || ^17.0 || ^18.0"
   },
   "sideEffects": false

package/src/elements/ControlsContext.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { isComponent } from './utils';
+
+/**
+ * @internal @unstable
+ */
+export interface Controls
+  extends Partial<Record<string, React.ComponentType>> {}
+
+/**
+ * @internal @unstable
+ */
+export const ControlsContext = React.createContext<Controls | undefined>(
+  undefined
+);
+
+/**
+ * @internal @unstable
+ *
+ * `ControlsProvider` provides the values contained in `ControlsContext`
+ * to consumers. `ControlsContext` lookup is handled directly
+ * by `Control` components returned by `withControls`.
+ *
+ * @example
+ *
+ * Add `ControlsContext` aware `Controls` components to a Connected
+ * Component:
+ *
+ * ```tsx
+ *  const DataList = withControls(function DataList<T>(data: T[]) {
+ *    return <ScrollView>data.map(ListItem)</ScrollView>;
+ *  }, 'DataList');
+ *
+ *  const DataListControl = () => {
+ *    const data = useData();
+ *    return <DataList data={data} />;
+ *  }
+ *
+ *  interface ComponentControls {
+ *    DataList: typeof DataListControl;
+ *  }
+ *
+ *  function Component<T extends ComponentControls>(
+ *    controls?: T
+ *  ) {
+ *    function ConnectedComponent({
+ *      children,
+ *    }: { children?: React.ReactNode }) {
+ *      return (
+ *        <ControlsProvider controls={controls}>
+ *          {children}
+ *        </ControlsProvider>
+ *      );
+ *    }
+ *
+ *    return ConnectedComponent;
+ *  }
+ * ```
+ */
+export function ControlsProvider<T extends Controls>({
+  controls,
+  ...props
+}: {
+  children?: React.ReactNode;
+  controls?: T;
+}): React.JSX.Element {
+  return <ControlsContext.Provider {...props} value={controls} />;
+}
+
+/**
+ * @internal @unstable
+ *
+ * @note reference `ControlsProvider` for example usage
+ */
+export function withControls<
+  T extends React.ComponentType<any>,
+  K extends keyof Controls,
+>(Default: T, name: K): (props: React.ComponentProps<T>) => React.JSX.Element {
+  const Component = (props: React.ComponentProps<T>) => {
+    const Override = React.useContext(ControlsContext)?.[name];
+    if (isComponent(Override)) {
+      return <Override {...props} />;
+    }
+    return <Default {...props} />;
+  };
+
+  Component.displayName = name;
+  return Component;
+}

package/src/elements/ElementsContext.tsx

@@ -16,7 +16,8 @@ export const ElementsContext = React.createContext<Elements | undefined>(
  *
  * `ElementsProvider` provides the values contained in `ElementsContext`
  * to its `children`. `ElementsContext` lookup is handled directly
- * by `BaseElement`components returned by `defineBaseElement`.
+ * by `BaseElement`components returned by `defineBaseElement` and
+ * `defineBaseElementWithRef`.
  *
  * @example
  *
@@ -25,7 +26,7 @@ export const ElementsContext = React.createContext<Elements | undefined>(
  *
  * ```tsx
  * // `BaseElement`, renders custom or default element defintion
- * const ViewElement = defineBaseElement({
+ * const ViewElement = defineBaseElementWithRef({
  *   displayName: "View",
  *   type: "div",
  * });

package/src/elements/defineBaseElement.tsx

@@ -3,6 +3,8 @@ import { ElementsContext } from './ElementsContext';
 import {
   BaseElement,
   BaseElementProps,
+  BaseElementWithRef,
+  BaseElementWithRefProps,
   ElementDisplayName,
   ElementRefType,
   ReactElementProps,
@@ -40,7 +42,7 @@ export interface DefineBaseElementInput<T> {
  * @param {DefineBaseElementInput} input `BaseElement` parameters
  * @returns {BaseElement} `ElementsContext` aware UI component
  */
-export default function defineBaseElement<
+export function defineBaseElement<
   // element type
   T extends ReactElementType,
   // string union of base element props to include
@@ -51,7 +53,53 @@ export default function defineBaseElement<
   U extends ReactElementProps<T> = ReactElementProps<T>,
   // control element props
   P extends BaseElementProps<K, V, U> = BaseElementProps<K, V, U>,
->(input: DefineBaseElementInput<T>): BaseElement<P, ElementRefType<P>> {
+>(input: DefineBaseElementInput<T>): BaseElement<P> {
+  const { displayName, type } = input;
+
+  const Element = ({ variant, ...props }: Omit<P, 'ref'>) => {
+    const Element = React.useContext(ElementsContext)?.[displayName];
+
+    if (Element) {
+      // only pass `variant` to provided `Element` values
+      return <Element {...{ ...props, variant }} />;
+    }
+
+    return React.createElement(type, props);
+  };
+
+  Element.displayName = displayName;
+
+  return Element;
+}
+
+/**
+ * @internal @unstable
+ *
+ * Defines a `ElementsContext` aware `BaseElement` UI component of the
+ * provided `type` with an assigned `displayName` and element `ref`.
+ *
+ * If `BaseElement` is used as a child of an `ElementsProvider`, returns the
+ * `BaseElement` value of the provided `displayName` of `ElementsContext`.
+ *
+ * When used outside of a  parent `ElementsProvider` or no `BaseElement`
+ * of `displayName` is found in the `ElementsContext`, returns a stateless,
+ * unstyled HTML element of the provided `type`.
+ *
+ * @param {DefineBaseElementInput} input `BaseElement` parameters
+ * @returns {BaseElementWithRefProps} `ElementsContext` aware UI component
+ */
+export function defineBaseElementWithRef<
+  // element type
+  T extends ReactElementType,
+  // string union of base element props to include
+  K extends keyof U = never,
+  // variant string union
+  V = string,
+  // available props of base element type
+  U extends ReactElementProps<T> = ReactElementProps<T>,
+  // control element props
+  P extends BaseElementWithRefProps<K, V, U> = BaseElementWithRefProps<K, V, U>,
+>(input: DefineBaseElementInput<T>): BaseElementWithRef<P, ElementRefType<P>> {
   const { displayName, type } = input;
 
   const Element = React.forwardRef<ElementRefType<P>, P>(

package/src/elements/index.ts

@@ -1,3 +1,9 @@
-export { default as defineBaseElement } from './defineBaseElement';
+export * from './ControlsContext';
+export {
+  defineBaseElement,
+  defineBaseElementWithRef,
+} from './defineBaseElement';
 export { default as withBaseElementProps } from './withBaseElementProps';
 export { ElementsProvider } from './ElementsContext';
+export { isComponent, isForwardRefExoticComponent } from './utils';
+export * from './types';

package/src/elements/types.ts

@@ -13,16 +13,31 @@ import React from 'react';
  * are always optional at the interface level, allowing for additional `props`
  * to be added to existing `BaseElement` interfaces as needed.
  */
-export type BaseElement<T = {}, K = {}> = React.ForwardRefExoticComponent<
+export type BaseElement<T = {}> = (props: T) => React.JSX.Element;
+
+/**
+ * @internal @unstable
+ *
+ * see @type {BaseElement}
+ *
+ * `BaseElement` with a `ref` corresponding to the `element` type
+ */
+export type BaseElementWithRef<
+  T = {},
+  K = {},
+> = React.ForwardRefExoticComponent<
   React.PropsWithoutRef<T> & React.RefAttributes<K>
 >;
 
 type ListElementSubType = 'Ordered' | 'Unordered';
-type ListElementDisplayName = 'List' | `${ListElementSubType}List`;
+type ListElementDisplayName = `${ListElementSubType}List`;
 
-type TableElementSubType = 'Body' | 'Data' | 'Row' | 'Head' | 'Header';
+type TableElementSubType = 'Body' | 'DataCell' | 'Row' | 'Head' | 'Header';
 type TableElementDisplayName = 'Table' | `Table${TableElementSubType}`;
 
+type DescriptionElementSubType = 'Details' | 'List' | 'Term';
+type DescriptionElementDisplayName = `Description${DescriptionElementSubType}`;
+
 /**
  * @internal @unstable
  *
@@ -30,7 +45,6 @@ type TableElementDisplayName = 'Table' | `Table${TableElementSubType}`;
  */
 export type ElementDisplayName =
   | 'Button'
-  | 'Divider'
   | 'Heading' // h1, h2, etc
   | 'Icon'
   | 'Image'
@@ -44,6 +58,7 @@ export type ElementDisplayName =
   | 'TextArea'
   | 'Title'
   | 'View'
+  | DescriptionElementDisplayName
   | ListElementDisplayName
   | TableElementDisplayName;
 
@@ -68,7 +83,7 @@ export type ReactElementType = keyof React.JSX.IntrinsicElements;
  * @internal @unstable
  */
 export type ReactElementProps<T extends ReactElementType> =
-  React.JSX.IntrinsicElements[T];
+  React.ComponentProps<T>;
 
 /**
  * @internal @unstable
@@ -85,5 +100,98 @@ export type BaseElementProps<
   V = string,
   K extends Record<ElementPropKey<keyof K>, any> = Record<string, any>,
 > = React.AriaAttributes &
-  React.RefAttributes<ElementRefType<K>> &
+  React.Attributes &
   Pick<K, ElementPropKey<T>> & { testId?: string; variant?: V };
+
+/**
+ * @internal @unstable
+ */
+export type BaseElementWithRefProps<
+  T extends keyof K,
+  V = string,
+  K extends Record<ElementPropKey<keyof K>, any> = Record<string, any>,
+> = BaseElementProps<T, V, K> & React.RefAttributes<ElementRefType<K>>;
+
+/**
+ * @internal @unstable
+ */
+export type ElementWithAndWithoutRef<
+  T extends ReactElementType,
+  K extends React.ComponentType<React.ComponentProps<T>> = React.ComponentType<
+    React.ComponentProps<T>
+  >,
+> = K extends React.ComponentType<infer U>
+  ? React.ForwardRefExoticComponent<U>
+  : never;
+
+/**
+ * @internal @unstable
+ *
+ * Merge `BaseElement` defintions with `elements` types provided by
+ * consumers, for use with top level connected component function
+ * signatures.
+ *
+ * Example:
+ *
+ * ```tsx
+ *  export function createStorageBrowser<
+ *    T extends Partial<StorageBrowserElements>,
+ *  >({ elements }: CreateStorageBrowserInput<T> = {}): {
+ *    StorageBrowser: StorageBrowser<MergeElements<StorageBrowserElements, T>>
+ *  } {
+ *    // ...do create stuff
+ *  };
+ * ```
+ */
+export type MergeBaseElements<T, K extends Partial<T>> = {
+  [U in keyof T]: K[U] extends T[U] ? K[U] : T[U];
+};
+
+/**
+ * @internal @unstable
+ *
+ * Extend the defintion of a `BaseElement` with additional `props`.
+ *
+ * Use cases are restricted to scenarios where additional `props`
+ * are required for a `ControlElement` interface, for example:
+ *
+ * @example
+ * ```tsx
+ *  const FieldInput = defineBaseElementWithRef({
+ *    type: 'input',
+ *    displayName: 'Input'
+ *  });
+ *
+ *  type InputWithSearchCallback =
+ *    ExtendBaseElement<
+ *      typeof FieldInput,
+ *      { onSearch?: (event: { value: string }) => void }
+ *    >
+ *
+ *  const SearchInput = React.forwardRef((
+ *    { onSearch, ...props }
+ *    ref
+ *    ) => {
+ *      // ...do something with onSearch
+ *
+ *      return <FieldInput {...props} ref={ref} />;
+ *  });
+ * ```
+ *
+ * Caveats:
+ * - additional `props` should not be passed directly to
+ * `BaseElement` components, the outputted interface should be
+ * applied to a wrapping element that handles the additional `props`
+ *
+ * - additional `props` that share a key with existing `props`
+ * are omitted from the outputted interface to adhere to `BaseElement`
+ * type contracts
+ *
+ */
+export type ExtendBaseElement<
+  // `BaseElement` to extend
+  T extends React.ComponentType,
+  // additional `props`
+  K = {},
+  U extends React.ComponentPropsWithRef<T> = React.ComponentPropsWithRef<T>,
+> = BaseElementWithRef<U & Omit<K, keyof U>, U>;

package/src/elements/utils.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export function isComponent<T>(
+  component?: React.ComponentType<T> | React.ForwardRefExoticComponent<T>
+): component is React.ComponentType<T> {
+  return typeof component === 'function';
+}
+
+export function isForwardRefExoticComponent<T>(
+  component: React.ComponentType<T> | React.ForwardRefExoticComponent<T>
+): component is React.ForwardRefExoticComponent<T> {
+  return (
+    typeof component === 'object' &&
+    typeof (component as React.ForwardRefExoticComponent<T>).$$typeof ===
+      'symbol' &&
+    ['react.memo', 'react.forward_ref'].includes(
+      (component as React.ForwardRefExoticComponent<T>).$$typeof.description!
+    )
+  );
+}

package/src/elements/withBaseElementProps.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseElement, ElementRefType } from './types';
+import { BaseElementWithRef, ElementRefType } from './types';
 
 /**
  * @internal @unstable
@@ -16,7 +16,7 @@ import { BaseElement, ElementRefType } from './types';
  * type InputElementPropKey = 'onChange' | 'type';
  *
  * // create `InputElement` base with `type` generic and extended `props` key
- * export const InputElement = defineBaseElement<"input", InputElementPropKey>({
+ * export const InputElement = defineBaseElementWithRef<"input", InputElementPropKey>({
  *   type: "input",
  *   displayName: "Input",
  * });
@@ -38,7 +38,7 @@ export default function withBaseElementProps<
 >(
   Target: React.ForwardRefExoticComponent<T>,
   defaultProps: K
-): BaseElement<T, ElementRefType<T>> {
+): BaseElementWithRef<T, ElementRefType<T>> {
   const Component = React.forwardRef<ElementRefType<T>, T>((props, ref) => (
     <Target
       {...{

package/src/hooks/index.ts

@@ -1,4 +1,9 @@
-export { default as useDataState, DataState } from './useDataState';
+export {
+  default as useDataState,
+  AsyncDataAction,
+  DataAction,
+  DataState,
+} from './useDataState';
 
 export {
   default as useDeprecationWarning,