@aws-amplify/ui-react-core - npm Package Compare versions

Comparing version 0.0.0-next-cd4635a-20240925020324 to 0.0.0-next-cd508ee-20250129203431

dist/elements.js

@@ -7,6 +7,83 @@ 'use strict';
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
+function isComponent(component) {
+    return typeof component === 'function';
+}
+function isForwardRefExoticComponent(component) {
+    return (typeof component === 'object' &&
+        typeof component.$$typeof ===
+            'symbol' &&
+        ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description));
+}
+
+/**
+ * @internal @unstable
+ */
+const ControlsContext = React__default["default"].createContext(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;
+ *  }
+ * ```
+ */
+function ControlsProvider({ controls, ...props }) {
+    return React__default["default"].createElement(ControlsContext.Provider, { ...props, value: controls });
+}
+/**
+ * @internal @unstable
+ *
+ * @note reference `ControlsProvider` for example usage
+ */
+function withControls(Default, name) {
+    const Component = (props) => {
+        const Override = React__default["default"].useContext(ControlsContext)?.[name];
+        if (isComponent(Override)) {
+            return React__default["default"].createElement(Override, { ...props });
+        }
+        return React__default["default"].createElement(Default, { ...props });
+    };
+    Component.displayName = name;
+    return Component;
+}
+
 const ElementsContext = React__default["default"].createContext(undefined);
@@ -18,3 +95,4 @@ /**
  * to its `children`. `ElementsContext` lookup is handled directly
- * by `BaseElement`components returned by `defineBaseElement`.
+ * by `BaseElement`components returned by `defineBaseElement` and
+ * `defineBaseElementWithRef`.
  *
@@ -28,3 +106,3 @@ * @example
  * // `BaseElement`, renders custom or default element defintion
- * const ViewElement = defineBaseElement({
+ * const ViewElement = defineBaseElementWithRef({
  *   displayName: "View",
@@ -84,2 +162,31 @@ *   type: "div",
     const { displayName, type } = input;
+    const Element = ({ variant, ...props }) => {
+        const Element = React__default["default"].useContext(ElementsContext)?.[displayName];
+        if (Element) {
+            // only pass `variant` to provided `Element` values
+            return React__default["default"].createElement(Element, { ...props, variant });
+        }
+        return React__default["default"].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
+ */
+function defineBaseElementWithRef(input) {
+    const { displayName, type } = input;
     const Element = React__default["default"].forwardRef(({ variant, ...props }, ref) => {
@@ -112,3 +219,3 @@ const Element = React__default["default"].useContext(ElementsContext)?.[displayName];
  * // create `InputElement` base with `type` generic and extended `props` key
- * export const InputElement = defineBaseElement<"input", InputElementPropKey>({
+ * export const InputElement = defineBaseElementWithRef<"input", InputElementPropKey>({
  *   type: "input",
@@ -138,4 +245,10 @@ *   displayName: "Input",
 
+exports.ControlsContext = ControlsContext;
+exports.ControlsProvider = ControlsProvider;
 exports.ElementsProvider = ElementsProvider;
 exports.defineBaseElement = defineBaseElement;
+exports.defineBaseElementWithRef = defineBaseElementWithRef;
+exports.isComponent = isComponent;
+exports.isForwardRefExoticComponent = isForwardRefExoticComponent;
 exports.withBaseElementProps = withBaseElementProps;
+exports.withControls = withControls;

dist/index.js

@@ -12,4 +12,2 @@ 'use strict';
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
 function _interopNamespace(e) {
@@ -33,3 +31,2 @@ if (e && e.__esModule) return e;
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
@@ -42,3 +39,3 @@
  */
-const AuthenticatorContext = React__default["default"].createContext(null);
+const AuthenticatorContext = React__namespace["default"].createContext(null);
 
@@ -53,5 +50,5 @@ const createHubHandler = (options) => (data, service) => {
     // if a user was to sign in using `Auth.signIn` directly rather than using `Authenticator`
-    const [authStatus, setAuthStatus] = React__default["default"].useState('configuring');
+    const [authStatus, setAuthStatus] = React__namespace["default"].useState('configuring');
     // only run on first render
-    React__default["default"].useEffect(() => {
+    React__namespace["default"].useEffect(() => {
         auth.getCurrentUser()
@@ -86,3 +83,3 @@ .then(() => {
     }, [activeService]);
-    return (React__default["default"].createElement(AuthenticatorContext.Provider, { value: value }, children));
+    return (React__namespace["default"].createElement(AuthenticatorContext.Provider, { value: value }, children));
 }
@@ -193,3 +190,3 @@
 function useAuthenticator(selector) {
-    const context = React__default["default"].useContext(AuthenticatorContext);
+    const context = React__namespace["default"].useContext(AuthenticatorContext);
     if (!context) {
@@ -252,3 +249,3 @@ throw new Error(USE_AUTHENTICATOR_ERROR);
     // `register` and `setValue` maintain stable references
-    const { registerField, setFormValue } = React__default["default"].useMemo(() => {
+    const { registerField, setFormValue } = React__namespace["default"].useMemo(() => {
         return {
@@ -259,3 +256,3 @@ registerField: ({ name, ...options }) => register(name, options),
     }, [register, setValue]);
-    const onSubmit = React__default["default"].useCallback((event) => {
+    const onSubmit = React__namespace["default"].useCallback((event) => {
         const handler = _onSubmit ? handleSubmit(_onSubmit) : ui.noop;
@@ -293,3 +290,3 @@ handler(event);
 const DEFAULT_MODE = 'onTouched';
-const FormProvider = React__default["default"].forwardRef(function FormProvider({ children, defaultValues, mode = DEFAULT_MODE }, ref) {
+const FormProvider = React__namespace["default"].forwardRef(function FormProvider({ children, defaultValues, mode = DEFAULT_MODE }, ref) {
     const formProviderProps = reactHookForm.useForm({
@@ -300,4 +297,4 @@ defaultValues,
     const { getValues, reset } = formProviderProps;
-    React__default["default"].useImperativeHandle(ref, () => ({ getValues, reset: () => reset(defaultValues) }), [defaultValues, getValues, reset]);
-    return (React__default["default"].createElement(reactHookForm.FormProvider, { ...formProviderProps }, children));
+    React__namespace["default"].useImperativeHandle(ref, () => ({ getValues, reset: () => reset(defaultValues) }), [defaultValues, getValues, reset]);
+    return (React__namespace["default"].createElement(reactHookForm.FormProvider, { ...formProviderProps }, children));
 });
@@ -310,5 +307,5 @@
 function withFormProvider(Child) {
-    return React__default["default"].forwardRef(function Form({ defaultValues, mode, ...props }, ref) {
-        return (React__default["default"].createElement(FormProvider, { defaultValues: defaultValues, mode: mode, ref: ref },
-            React__default["default"].createElement(Child, { ...props })));
+    return React__namespace["default"].forwardRef(function Form({ defaultValues, mode, ...props }, ref) {
+        return (React__namespace["default"].createElement(FormProvider, { defaultValues: defaultValues, mode: mode, ref: ref },
+            React__namespace["default"].createElement(Child, { ...props })));
     });
@@ -563,4 +560,4 @@ }
     const { route, initializeMachine } = useAuthenticator(routeSelector);
-    const hasInitialized = React__default["default"].useRef(false);
-    React__default["default"].useEffect(() => {
+    const hasInitialized = React__namespace["default"].useRef(false);
+    React__namespace["default"].useEffect(() => {
         if (!hasInitialized.current && route === 'setup') {
@@ -581,12 +578,15 @@ initializeMachine(data);
 };
-function useDataState(action, initialData) {
-    const [dataState, setDataState] = React__default["default"].useState(() => ({
+function useDataState(action, initialData, options) {
+    const [dataState, setDataState] = React__namespace["default"].useState(() => ({
         ...INITIAL_STATE,
         data: initialData,
     }));
-    const prevData = React__default["default"].useRef(initialData);
-    const handleAction = React__default["default"].useCallback((...input) => {
+    const prevData = React__namespace["default"].useRef(initialData);
+    const { onSuccess, onError } = options ?? {};
+    const handleAction = React__namespace["default"].useCallback((input) => {
         setDataState(({ data }) => ({ ...LOADING_STATE, data }));
-        resolveMaybeAsync(action(prevData.current, ...input))
+        resolveMaybeAsync(action(prevData.current, input))
             .then((data) => {
+            if (ui.isFunction(onSuccess))
+                onSuccess(data);
             prevData.current = data;
@@ -596,5 +596,7 @@ setDataState({ ...INITIAL_STATE, data });
             .catch(({ message }) => {
+            if (ui.isFunction(onError))
+                onError(message);
             setDataState(({ data }) => ({ ...ERROR_STATE, data, message }));
         });
-    }, [action]);
+    }, [action, onError, onSuccess]);
     return [dataState, handleAction];
@@ -653,3 +655,3 @@ }
 function usePreviousValue(value) {
-    const previous = React.useRef();
+    const previous = React.useRef(undefined);
     // update ref post render
@@ -697,8 +699,8 @@ React.useEffect(() => {
 function useTimeout({ callback, delay, }) {
-    const storedCallback = React__default["default"].useRef(callback);
-    React__default["default"].useLayoutEffect(() => {
+    const storedCallback = React__namespace["default"].useRef(callback);
+    React__namespace["default"].useLayoutEffect(() => {
         storedCallback.current = callback;
     }, [callback]);
-    React__default["default"].useEffect(() => {
-        if (!ui.isTypedFunction(storedCallback.current) || !delay) {
+    React__namespace["default"].useEffect(() => {
+        if (!ui.isFunction(storedCallback.current) || !delay) {
             return;
@@ -715,2 +717,168 @@ }
 
+function filterAllowedFiles(files, acceptedFileTypes) {
+    // Allow any files if acceptedFileTypes is undefined, empty array, or contains '*'
+    if (!acceptedFileTypes ||
+        acceptedFileTypes.length === 0 ||
+        acceptedFileTypes.includes('*')) {
+        return { acceptedFiles: files, rejectedFiles: [] };
+    }
+    const acceptedFiles = [];
+    const rejectedFiles = [];
+    function filterFile(file) {
+        const { type = '', name = '' } = file;
+        const mimeType = type.toLowerCase();
+        const baseMimeType = mimeType.split('/')[0];
+        return acceptedFileTypes.some((type) => {
+            const validType = type.trim().toLowerCase();
+            // if the accepted file type is a file extension
+            // it will start with '.', check against the file name
+            if (validType.charAt(0) === '.') {
+                return name.toLowerCase().endsWith(validType);
+            }
+            // This is something like a image/* mime type
+            if (validType.endsWith('/*')) {
+                return baseMimeType === validType.split('/')[0];
+            }
+            return mimeType === validType;
+        });
+    }
+    files.forEach((file) => {
+        (filterFile(file) ? acceptedFiles : rejectedFiles).push(file);
+    });
+    return { acceptedFiles, rejectedFiles };
+}
+
+// Helper function to convert FileSystemFileEntry to File
+const getFileFromEntry = (fileEntry) => {
+    return new Promise((resolve) => {
+        fileEntry.file(resolve);
+    });
+};
+// Helper function to read all entries in a directory
+const readAllDirectoryEntries = async (dirReader) => {
+    const entries = [];
+    let readBatch = [];
+    do {
+        readBatch = await new Promise((resolve, reject) => {
+            try {
+                dirReader.readEntries(resolve, reject);
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+        entries.push(...readBatch);
+    } while (readBatch.length > 0);
+    return entries;
+};
+// Helper function to process files and folder contents
+async function processDroppedItems(dataTransferItems) {
+    const files = [];
+    const processFileSystemEntry = async (entry) => {
+        if (entry.isFile) {
+            const file = await getFileFromEntry(entry);
+            // drag and dropped files do not have a webkitRelativePath property,
+            // but they do have a fullPath property which has the same information
+            // https://github.com/ant-design/ant-design/issues/16426
+            if (entry.fullPath && !file.webkitRelativePath) {
+                Object.defineProperties(file, {
+                    webkitRelativePath: {
+                        writable: true,
+                    },
+                });
+                // intentionally overwriting webkitRelativePath
+                // @ts-expect-error
+                file.webkitRelativePath = entry.fullPath.replace(/^\//, '');
+                Object.defineProperties(file, {
+                    webkitRelativePath: {
+                        writable: false,
+                    },
+                });
+            }
+            files.push(file);
+        }
+        else if (entry.isDirectory) {
+            const dirReader = entry.createReader();
+            const dirEntries = await readAllDirectoryEntries(dirReader);
+            await Promise.all(dirEntries.map(processFileSystemEntry));
+        }
+    };
+    // Filter out and process files from the data transfer items
+    await Promise.all(dataTransferItems
+        .reduce((acc, item) => {
+        const entry = item.webkitGetAsEntry();
+        return item.kind === 'file' && entry ? [...acc, entry] : acc;
+    }, [])
+        .map(processFileSystemEntry));
+    return files;
+}
+
+function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragOver: _onDragOver, onDragStart: _onDragStart, onDrop: _onDrop, acceptedFileTypes = [], }) {
+    const [dragState, setDragState] = React.useState('inactive');
+    const onDragStart = (event) => {
+        event.dataTransfer.clearData();
+        if (ui.isFunction(_onDragStart)) {
+            _onDragStart(event);
+        }
+    };
+    const onDragEnter = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (ui.isFunction(_onDragEnter)) {
+            _onDragEnter(event);
+        }
+    };
+    const onDragLeave = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setDragState('inactive');
+        if (ui.isFunction(_onDragLeave)) {
+            _onDragLeave(event);
+        }
+    };
+    const onDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'copy';
+        if (ui.isFunction(_onDragOver)) {
+            _onDragOver(event);
+        }
+        const files = Array.from(event.dataTransfer.items).map(({ kind, type }) => ({
+            kind,
+            type,
+        }));
+        const { rejectedFiles } = filterAllowedFiles(files, acceptedFileTypes);
+        setDragState(rejectedFiles.length > 0 ? 'reject' : 'accept');
+    };
+    const onDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setDragState('inactive');
+        const { files, items } = event.dataTransfer;
+        if (ui.isFunction(_onDrop)) {
+            _onDrop(event);
+        }
+        const completeDrop = (files) => {
+            const { acceptedFiles, rejectedFiles } = filterAllowedFiles(files, acceptedFileTypes);
+            if (ui.isFunction(onDropComplete)) {
+                onDropComplete({ acceptedFiles, rejectedFiles });
+            }
+        };
+        if (!items) {
+            completeDrop(Array.from(files));
+        }
+        else {
+            processDroppedItems(Array.from(items)).then(completeDrop);
+        }
+    };
+    return {
+        onDragStart,
+        onDragEnter,
+        onDragLeave,
+        onDragOver,
+        onDrop,
+        dragState,
+    };
+}
+
 const INVALID_OPTIONS_MESSAGE = 'an `errorMessage` or a `defaultValue` must be provided in `options`';
@@ -768,6 +936,9 @@ /**
     }
-    const Context = React__default["default"].createContext(defaultValue);
+    const contextDisplayName = `${contextName}Context`;
+    const providerDisplayName = `${contextName}Provider`;
+    const Context = React__namespace["default"].createContext(defaultValue);
+    Context.displayName = contextDisplayName;
     function Provider(props) {
         const { children, ...context } = props;
-        const value = React__default["default"].useMemo(() => context, 
+        const value = React__namespace["default"].useMemo(() => context, 
         // Unpack `context` for the dep array; using `[context]` results in
@@ -777,8 +948,8 @@ // evaluation on every render
         Object.values(context));
-        return React__default["default"].createElement(Context.Provider, { value: value }, children);
+        return React__namespace["default"].createElement(Context.Provider, { value: value }, children);
     }
-    Provider.displayName = `${contextName}Provider`;
+    Provider.displayName = providerDisplayName;
     return {
         [`use${contextName}`]: function (params) {
-            const context = React__default["default"].useContext(Context);
+            const context = React__namespace["default"].useContext(Context);
             if (ui.isUndefined(context)) {
@@ -789,4 +960,4 @@ throw new Error(params?.errorMessage ?? errorMessage);
         },
-        [`${contextName}Provider`]: Provider,
-        [`${contextName}Context`]: Context,
+        [providerDisplayName]: Provider,
+        [contextDisplayName]: Context,
     };
@@ -806,2 +977,3 @@ }
 exports.useDeprecationWarning = useDeprecationWarning;
+exports.useDropZone = useDropZone;
 exports.useField = useField;
@@ -808,0 +980,0 @@ exports.useForm = useForm;

dist/types/Authenticator/context/AuthenticatorProvider.d.ts

@@ -1,4 +0,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export default function AuthenticatorProvider({ children, }: {
     children: ReactNode;
-}): JSX.Element;
+}): React.JSX.Element;

dist/types/components/FormCore/withFormProvider.d.ts

 import React from 'react';
-import { AnyComponent, MergeProps } from '../../types';
+import { AnyComponent } from '../../types';
 import { FormHandle, FormProviderProps } from './types';
@@ -8,2 +8,2 @@ /**
  */
-export default function withFormProvider<ChildComp extends AnyComponent, ChildProps extends React.ComponentPropsWithRef<ChildComp>, Props extends MergeProps<FormProviderProps, ChildProps>>(Child: ChildComp): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<FormHandle>>;
+export default function withFormProvider<ChildComp extends AnyComponent, ChildProps extends React.ComponentPropsWithRef<ChildComp>, Props extends ChildProps & FormProviderProps>(Child: ChildComp): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<FormHandle>>;

dist/types/components/RenderNothing/RenderNothing.d.ts

@@ -1,5 +0,4 @@
-/// <reference types="react" />
 /**
  * Utility component for rendering nothing.
  */
-export default function RenderNothing<Props>(_: Props): JSX.Element | null;
+export default function RenderNothing<Props>(_: Props): React.JSX.Element | null;

dist/types/elements/defineBaseElement.d.ts

@@ -1,2 +0,2 @@
-import { BaseElement, BaseElementProps, ElementDisplayName, ElementRefType, ReactElementProps, ReactElementType } from './types';
+import { BaseElement, BaseElementProps, BaseElementWithRef, BaseElementWithRefProps, ElementDisplayName, ElementRefType, ReactElementProps, ReactElementType } from './types';
 /**
@@ -31,2 +31,19 @@ * @internal @unstable
  */
-export default function defineBaseElement<T extends ReactElementType, K extends keyof U = never, V = string, U extends ReactElementProps<T> = ReactElementProps<T>, P extends BaseElementProps<K, V, U> = BaseElementProps<K, V, U>>(input: DefineBaseElementInput<T>): BaseElement<P, ElementRefType<P>>;
+export declare function defineBaseElement<T extends ReactElementType, K extends keyof U = never, V = string, U extends ReactElementProps<T> = ReactElementProps<T>, P extends BaseElementProps<K, V, U> = BaseElementProps<K, V, U>>(input: DefineBaseElementInput<T>): BaseElement<P>;
+/**
+ * @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 declare function defineBaseElementWithRef<T extends ReactElementType, K extends keyof U = never, V = string, U extends ReactElementProps<T> = ReactElementProps<T>, P extends BaseElementWithRefProps<K, V, U> = BaseElementWithRefProps<K, V, U>>(input: DefineBaseElementInput<T>): BaseElementWithRef<P, ElementRefType<P>>;

dist/types/elements/ElementsContext.d.ts

@@ -14,3 +14,4 @@ import React from 'react';
  * to its `children`. `ElementsContext` lookup is handled directly
- * by `BaseElement`components returned by `defineBaseElement`.
+ * by `BaseElement`components returned by `defineBaseElement` and
+ * `defineBaseElementWithRef`.
  *
@@ -24,3 +25,3 @@ * @example
  * // `BaseElement`, renders custom or default element defintion
- * const ViewElement = defineBaseElement({
+ * const ViewElement = defineBaseElementWithRef({
  *   displayName: "View",
@@ -27,0 +28,0 @@ *   type: "div",

dist/types/elements/index.d.ts

@@ -1,3 +0,6 @@
-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';

dist/types/elements/types.d.ts

@@ -15,7 +15,17 @@ import React from 'react';
  */
-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}`;
 /**
@@ -26,3 +36,3 @@ * @internal @unstable
  */
-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;
 /**
@@ -41,3 +51,3 @@ * @internal @unstable
  */
-export type ReactElementProps<T extends ReactElementType> = React.JSX.IntrinsicElements[T];
+export type ReactElementProps<T extends ReactElementType> = React.ComponentProps<T>;
 /**
@@ -52,6 +62,78 @@ * @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 {};

dist/types/elements/withBaseElementProps.d.ts

 import React from 'react';
-import { BaseElement, ElementRefType } from './types';
+import { BaseElementWithRef, ElementRefType } from './types';
 /**
@@ -18,3 +18,3 @@ * @internal @unstable
  * // create `InputElement` base with `type` generic and extended `props` key
- * export const InputElement = defineBaseElement<"input", InputElementPropKey>({
+ * export const InputElement = defineBaseElementWithRef<"input", InputElementPropKey>({
  *   type: "input",
@@ -35,2 +35,2 @@ *   displayName: "Input",
  */
-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>>;

dist/types/hooks/index.d.ts

@@ -1,2 +0,2 @@
-export { default as useDataState, DataState } from './useDataState';
+export { default as useDataState, AsyncDataAction, DataAction, DataState, } from './useDataState';
 export { default as useDeprecationWarning, UseDeprecationWarning, } from './useDeprecationWarning';
@@ -8,1 +8,2 @@ export { default as useGetUrl } from './useGetUrl';
 export { default as useTimeout } from './useTimeout';
+export { default as useDropZone, UseDropZoneParams } from './useDropZone';

dist/types/hooks/useDataState.d.ts

@@ -7,2 +7,7 @@ export interface DataState<T> {
 }
-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];

dist/types/index.d.ts

 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, } 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';

dist/types/types/types.d.ts

@@ -1,3 +0,2 @@
-/// <reference types="react" />
 export type AnyComponent = React.ComponentType<any>;
 export type MergeProps<C, P> = C & Omit<P, keyof C>;

dist/types/utils/createContextUtilities.d.ts

@@ -19,3 +19,3 @@ import React from 'react';
 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;
 };
@@ -22,0 +22,0 @@ /**

elements/package.json

 {
   "name": "@aws-amplify/ui-react-core/elements",
   "main": "../dist/elements.js",
-  "module": "../dist/esm/elements/elements.mjs",
+  "module": "../dist/esm/elements.mjs",
   "types": "../dist/types/elements/index.d.ts"
 }

package.json

 {
   "name": "@aws-amplify/ui-react-core",
-  "version": "0.0.0-next-cd4635a-20240925020324",
+  "version": "0.0.0-next-cd508ee-20250129203431",
   "main": "dist/index.js",
@@ -14,3 +14,3 @@ "module": "dist/esm/index.mjs",
     "./elements": {
-      "import": "./dist/esm/elements/elements.mjs",
+      "import": "./dist/esm/elements.mjs",
       "require": "./dist/elements.js",
@@ -37,3 +37,3 @@ "react-native": "./src/elements/index.ts",
     "dev": "yarn build --watch",
-    "lint": "yarn typecheck && eslint src",
+    "lint": "yarn typecheck && eslint .",
     "prebuild": "rimraf dist",
@@ -45,16 +45,13 @@ "test": "jest",
   "dependencies": {
-    "@aws-amplify/ui": "0.0.0-next-cd4635a-20240925020324",
+    "@aws-amplify/ui": "0.0.0-next-cd508ee-20250129203431",
     "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
-    "react-hook-form": "^7.43.5",
+    "react-hook-form": "^7.53.2",
     "xstate": "^4.33.6"
   },
-  "devDependencies": {
-    "@aws-amplify/core": "^6.4.0"
-  },
   "peerDependencies": {
-    "aws-amplify": "^6.6.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0"
+    "aws-amplify": "^6.9.0",
+    "react": "^16.14 || ^17 || ^18 || ^19"
   },
   "sideEffects": false
 }

src/components/FormCore/useControlledField.ts

@@ -9,3 +9,3 @@ import { useController } from 'react-hook-form';
 } from './types';
-import { isTypedFunction } from '@aws-amplify/ui';
+import { isFunction } from '@aws-amplify/ui';
 
@@ -48,3 +48,3 @@ export const DEFAULT_ERROR_MESSAGE =
   const handleBlur = (event: Parameters<OnBlur>[0]) => {
-    if (isTypedFunction(_onBlur)) {
+    if (isFunction(_onBlur)) {
       _onBlur(event);
@@ -57,3 +57,3 @@ }
   const handleChangeText = (event: string) => {
-    if (isTypedFunction(_onChangeText)) {
+    if (isFunction(_onChangeText)) {
       _onChangeText(event);
@@ -60,0 +60,0 @@ }

src/elements/index.ts

@@ -1,3 +0,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';

src/elements/types.ts

@@ -16,3 +16,15 @@ import React from 'react';
  */
-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>
@@ -22,7 +34,10 @@ >;
 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}`;
+
 /**
@@ -35,3 +50,2 @@ * @internal @unstable
   | 'Button'
-  | 'Divider'
   | 'Heading' // h1, h2, etc
@@ -50,2 +64,3 @@ | 'Icon'
   | 'View'
+  | DescriptionElementDisplayName
   | ListElementDisplayName
@@ -75,3 +90,3 @@ | TableElementDisplayName;
 export type ReactElementProps<T extends ReactElementType> =
-  React.JSX.IntrinsicElements[T];
+  React.ComponentProps<T>;
 
@@ -93,3 +108,96 @@ /**
 > = 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>;

src/hooks/index.ts

@@ -1,2 +0,7 @@
-export { default as useDataState, DataState } from './useDataState';
+export {
+  default as useDataState,
+  AsyncDataAction,
+  DataAction,
+  DataState,
+} from './useDataState';
 
@@ -12,1 +17,2 @@ export {
 export { default as useTimeout } from './useTimeout';
+export { default as useDropZone, UseDropZoneParams } from './useDropZone';

src/hooks/useDataState.ts

@@ -0,1 +1,2 @@
+import { isFunction } from '@aws-amplify/ui';
 import React from 'react';
@@ -10,2 +11,9 @@
 
+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>;
+
 // default state
@@ -24,5 +32,9 @@ const INITIAL_STATE = { hasError: false, isLoading: false, message: undefined };
 export default function useDataState<T, K>(
-  action: (prevData: T, ...input: K[]) => T | Promise<T>,
-  initialData: T
-): [state: DataState<T>, handleAction: (...input: K[]) => void] {
+  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] {
   const [dataState, setDataState] = React.useState<DataState<T>>(() => ({
@@ -35,8 +47,12 @@ ...INITIAL_STATE,
 
-  const handleAction: (...input: K[]) => void = React.useCallback(
-    (...input) => {
+  const { onSuccess, onError } = options ?? {};
+
+  const handleAction: (input: K) => void = React.useCallback(
+    (input) => {
       setDataState(({ data }) => ({ ...LOADING_STATE, data }));
 
-      resolveMaybeAsync(action(prevData.current, ...input))
+      resolveMaybeAsync(action(prevData.current, input))
         .then((data: T) => {
+          if (isFunction(onSuccess)) onSuccess(data);
+
           prevData.current = data;
@@ -46,6 +62,8 @@ setDataState({ ...INITIAL_STATE, data });
         .catch(({ message }: Error) => {
+          if (isFunction(onError)) onError(message);
+
           setDataState(({ data }) => ({ ...ERROR_STATE, data, message }));
         });
     },
-    [action]
+    [action, onError, onSuccess]
   );
@@ -52,0 +70,0 @@

src/hooks/usePreviousValue.ts

@@ -6,3 +6,3 @@ import { useEffect, useRef } from 'react';
 ): Value | undefined {
-  const previous = useRef<Value>();
+  const previous = useRef<Value | undefined>(undefined);
 
@@ -9,0 +9,0 @@ // update ref post render

src/hooks/useTimeout.ts

 import React from 'react';
-import { isTypedFunction } from '@aws-amplify/ui';
+import { isFunction } from '@aws-amplify/ui';
 
@@ -18,3 +18,3 @@ export default function useTimeout({
   React.useEffect(() => {
-    if (!isTypedFunction(storedCallback.current) || !delay) {
+    if (!isFunction(storedCallback.current) || !delay) {
       return;
@@ -21,0 +21,0 @@ }

src/index.ts

@@ -38,2 +38,4 @@ // features
 export {
+  AsyncDataAction,
+  DataAction,
   useDeprecationWarning,
@@ -48,2 +50,4 @@ UseDeprecationWarning,
   DataState,
+  useDropZone,
+  UseDropZoneParams,
 } from './hooks';
@@ -50,0 +54,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

239362

increased by22.43%

Dev dependency count

0

decreased by-100%

Number of package files

148

increased by11.28%

Lines of code

6273

increased by25.76%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@aws-amplify/ui@0.0.0-next-cd508ee-20250129203431(transitive)

• + Addedreact@19.0.0(transitive)

• - Removed@aws-amplify/ui@0.0.0-next-cd4635a-20240925020324(transitive)

• Updated@aws-amplify/ui@0.0.0-next-cd508ee-20250129203431

• Updatedreact-hook-form@^7.53.2