@aws-amplify/ui-react-core 3.0.25 → 3.0.26

package/dist/elements.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-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);
 
 const ElementsContext = React__default["default"].createContext(undefined);
 /**

package/dist/esm/elements.mjs

@@ -0,0 +1,3 @@
+export { default as defineBaseElement } from './elements/defineBaseElement.mjs';
+export { default as withBaseElementProps } from './elements/withBaseElementProps.mjs';
+export { ElementsProvider } from './elements/ElementsContext.mjs';

package/dist/esm/hooks/useDropZone.mjs

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { isFunction } from '@aws-amplify/ui';
+import { filterAllowedFiles } from '../utils/filterAllowedFiles.mjs';
+
+function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragOver: _onDragOver, onDragStart: _onDragStart, onDrop: _onDrop, acceptedFileTypes = [], }) {
+    const [dragState, setDragState] = useState('inactive');
+    const onDragStart = (event) => {
+        event.dataTransfer.clearData();
+        if (isFunction(_onDragStart)) {
+            _onDragStart(event);
+        }
+    };
+    const onDragEnter = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (isFunction(_onDragEnter)) {
+            _onDragEnter(event);
+        }
+    };
+    const onDragLeave = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setDragState('inactive');
+        if (isFunction(_onDragLeave)) {
+            _onDragLeave(event);
+        }
+    };
+    const onDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        event.dataTransfer.dropEffect = 'copy';
+        if (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 = Array.from(event.dataTransfer.files);
+        const { acceptedFiles, rejectedFiles } = filterAllowedFiles(files, acceptedFileTypes);
+        if (isFunction(_onDrop)) {
+            _onDrop(event);
+        }
+        if (isFunction(onDropComplete)) {
+            onDropComplete({ acceptedFiles, rejectedFiles });
+        }
+    };
+    return {
+        onDragStart,
+        onDragEnter,
+        onDragLeave,
+        onDragOver,
+        onDrop,
+        dragState,
+    };
+}
+
+export { useDropZone as default };

package/dist/esm/hooks/useTimeout.mjs

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { isTypedFunction } from '@aws-amplify/ui';
+import { isFunction } from '@aws-amplify/ui';
 
 function useTimeout({ callback, delay, }) {
     const storedCallback = React__default.useRef(callback);
@@ -7,7 +7,7 @@ function useTimeout({ callback, delay, }) {
         storedCallback.current = callback;
     }, [callback]);
     React__default.useEffect(() => {
-        if (!isTypedFunction(storedCallback.current) || !delay) {
+        if (!isFunction(storedCallback.current) || !delay) {
             return;
         }
         const timeoutId = setTimeout(() => {

package/dist/esm/index.mjs

@@ -16,4 +16,5 @@ export { default as useHasValueUpdated } from './hooks/useHasValueUpdated.mjs';
 export { default as usePreviousValue } from './hooks/usePreviousValue.mjs';
 export { default as useSetUserAgent } from './hooks/useSetUserAgent.mjs';
 export { default as useTimeout } from './hooks/useTimeout.mjs';
+export { default as useDropZone } from './hooks/useDropZone.mjs';
 export { default as createContextUtilities } from './utils/createContextUtilities.mjs';

package/dist/esm/utils/filterAllowedFiles.mjs

@@ -0,0 +1,34 @@
+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 };
+}
+
+export { filterAllowedFiles };

package/dist/index.js

@@ -9,8 +9,6 @@ var ui = require('@aws-amplify/ui');
 var reactHookForm = require('react-hook-form');
 var storage = require('aws-amplify/storage');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -29,7 +27,6 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 /**
@@ -37,7 +34,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
  *
  * https://xstate.js.org/docs/recipes/react.html#context-provider
  */
-const AuthenticatorContext = React__default["default"].createContext(null);
+const AuthenticatorContext = React__namespace["default"].createContext(null);
 
 const createHubHandler = (options) => (data, service) => {
     ui.defaultAuthHubHandler(data, service, options);
@@ -47,9 +44,9 @@ function AuthenticatorProvider({ children, }) {
     // state machine as the machine only updates on `Authenticator` initiated events, which
     // leads to scenarios where the state machine `authStatus` gets "stuck". For exmample,
     // 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()
             .then(() => {
             setAuthStatus('authenticated');
@@ -79,7 +76,7 @@ function AuthenticatorProvider({ children, }) {
         const unsubscribe = ui.listenToAuthHub(activeService, createHubHandler({ onSignIn, onSignOut }));
         return unsubscribe;
     }, [activeService]);
-    return (React__default["default"].createElement(AuthenticatorContext.Provider, { value: value }, children));
+    return (React__namespace["default"].createElement(AuthenticatorContext.Provider, { value: value }, children));
 }
 
 const USE_AUTHENTICATOR_ERROR = '`useAuthenticator` must be used inside an `Authenticator.Provider`.';
@@ -185,7 +182,7 @@ const getMachineFields = (route, state, unverifiedUserAttributes) => {
  * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator/headless#useauthenticator-hook)
  */
 function useAuthenticator(selector) {
-    const context = React__default["default"].useContext(AuthenticatorContext);
+    const context = React__namespace["default"].useContext(AuthenticatorContext);
     if (!context) {
         throw new Error(USE_AUTHENTICATOR_ERROR);
     }
@@ -243,13 +240,13 @@ function useForm(options = {}) {
     };
     // memoize `registerField` and `setFormValue` together,
     // `register` and `setValue` maintain stable references
-    const { registerField, setFormValue } = React__default["default"].useMemo(() => {
+    const { registerField, setFormValue } = React__namespace["default"].useMemo(() => {
         return {
             registerField: ({ name, ...options }) => register(name, options),
             setFormValue: ({ name, value, ...options }) => setValue(name, value, options),
         };
     }, [register, setValue]);
-    const onSubmit = React__default["default"].useCallback((event) => {
+    const onSubmit = React__namespace["default"].useCallback((event) => {
         const handler = _onSubmit ? handleSubmit(_onSubmit) : ui.noop;
         handler(event);
     }, [_onSubmit, handleSubmit]);
@@ -282,14 +279,14 @@ function useField(params) {
 }
 
 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({
         defaultValues,
         mode,
     });
     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));
 });
 
 /**
@@ -297,9 +294,9 @@ const FormProvider = React__default["default"].forwardRef(function FormProvider(
  * @returns Composed `Form` component exposing `FormContext` values to descendents
  */
 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 })));
     });
 }
 
@@ -549,8 +546,8 @@ function useAuthenticatorRoute({ components, }) {
 const routeSelector = ({ route }) => [route];
 function useAuthenticatorInitMachine(data) {
     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') {
             initializeMachine(data);
             hasInitialized.current = true;
@@ -567,12 +564,12 @@ const resolveMaybeAsync = async (value) => {
     return awaited;
 };
 function useDataState(action, initialData) {
-    const [dataState, setDataState] = React__default["default"].useState(() => ({
+    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 handleAction = React__namespace["default"].useCallback((...input) => {
         setDataState(({ data }) => ({ ...LOADING_STATE, data }));
         resolveMaybeAsync(action(prevData.current, ...input))
             .then((data) => {
@@ -679,12 +676,12 @@ function useSetUserAgent({ componentName, packageName, version, }) {
 }
 
 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;
         }
         const timeoutId = setTimeout(() => {
@@ -696,6 +693,99 @@ function useTimeout({ callback, delay, }) {
     }, [delay]);
 }
 
+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 };
+}
+
+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 = Array.from(event.dataTransfer.files);
+        const { acceptedFiles, rejectedFiles } = filterAllowedFiles(files, acceptedFileTypes);
+        if (ui.isFunction(_onDrop)) {
+            _onDrop(event);
+        }
+        if (ui.isFunction(onDropComplete)) {
+            onDropComplete({ acceptedFiles, rejectedFiles });
+        }
+    };
+    return {
+        onDragStart,
+        onDragEnter,
+        onDragLeave,
+        onDragOver,
+        onDrop,
+        dragState,
+    };
+}
+
 const INVALID_OPTIONS_MESSAGE = 'an `errorMessage` or a `defaultValue` must be provided in `options`';
 /**
  * Uses `ContextType`/`Name` generics and `options` to create:
@@ -748,20 +838,20 @@ function createContextUtilities(options) {
     if (ui.isUndefined(defaultValue) && !ui.isString(errorMessage)) {
         throw new Error(INVALID_OPTIONS_MESSAGE);
     }
-    const Context = React__default["default"].createContext(defaultValue);
+    const Context = React__namespace["default"].createContext(defaultValue);
     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
         // evaluation on every render
         // eslint-disable-next-line react-hooks/exhaustive-deps
         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`;
     return {
         [`use${contextName}`]: function (params) {
-            const context = React__default["default"].useContext(Context);
+            const context = React__namespace["default"].useContext(Context);
             if (ui.isUndefined(context)) {
                 throw new Error(params?.errorMessage ?? errorMessage);
             }
@@ -783,6 +873,7 @@ exports.useAuthenticatorInitMachine = useAuthenticatorInitMachine;
 exports.useAuthenticatorRoute = useAuthenticatorRoute;
 exports.useDataState = useDataState;
 exports.useDeprecationWarning = useDeprecationWarning;
+exports.useDropZone = useDropZone;
 exports.useField = useField;
 exports.useForm = useForm;
 exports.useGetUrl = useGetUrl;

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

@@ -5,3 +5,4 @@ export { default as useHasValueUpdated } from './useHasValueUpdated';
 export { default as usePreviousValue } from './usePreviousValue';
 export { default as useSetUserAgent } from './useSetUserAgent';
 export { default as useTimeout } from './useTimeout';
+export { default as useDropZone, UseDropZoneParams } from './useDropZone';

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+interface DragEvents {
+    onDragStart: (event: React.DragEvent<HTMLDivElement>) => void;
+    onDragEnter: (event: React.DragEvent<HTMLDivElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
+    onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
+}
+export interface UseDropZoneParams extends Partial<DragEvents> {
+    onDropComplete?: (props: {
+        acceptedFiles: File[];
+        rejectedFiles: File[];
+    }) => void;
+    /**
+     * List of accepted File types, values of `['*']` or undefined allow any files
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+     */
+    acceptedFileTypes?: string[];
+}
+type DragState = 'accept' | 'reject' | 'inactive';
+interface UseDropZoneReturn extends DragEvents {
+    dragState: DragState;
+}
+export default function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragOver: _onDragOver, onDragStart: _onDragStart, onDrop: _onDrop, acceptedFileTypes, }: UseDropZoneParams): UseDropZoneReturn;
+export {};

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, } from './hooks';
+export { 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/filterAllowedFiles.d.ts

@@ -0,0 +1,10 @@
+type DragFile = {
+    kind: string;
+    type: string;
+    name?: string;
+} | File;
+export declare function filterAllowedFiles<FileType extends DragFile = DragFile>(files: FileType[], acceptedFileTypes: string[]): {
+    acceptedFiles: FileType[];
+    rejectedFiles: FileType[];
+};
+export {};

package/elements/package.json

@@ -1,6 +1,6 @@
 {
   "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-core",
-  "version": "3.0.25",
+  "version": "3.0.26",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "react-native": "src/index.ts",
@@ -11,7 +11,7 @@
       "types": "./dist/types/index.d.ts"
     },
     "./elements": {
-      "import": "./dist/esm/elements/elements.mjs",
+      "import": "./dist/esm/elements.mjs",
       "require": "./dist/elements.js",
       "react-native": "./src/elements/index.ts",
       "types": "./dist/types/elements/index.d.ts"
@@ -33,22 +33,19 @@
     "build": "rollup --config",
     "check:esm": "node --input-type=module --eval 'import \"@aws-amplify/ui-react-core\"'",
     "dev": "yarn build --watch",
-    "lint": "yarn typecheck && eslint src",
+    "lint": "yarn typecheck && eslint .",
     "prebuild": "rimraf dist",
     "test": "jest",
     "test:watch": "yarn test --watch",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.6.1",
+    "@aws-amplify/ui": "6.6.2",
     "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
     "react-hook-form": "^7.43.5",
     "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"

package/src/components/FormCore/useControlledField.ts

@@ -6,7 +6,7 @@ import {
   UseControlledField,
   UseControlledFieldParams,
 } from './types';
-import { isTypedFunction } from '@aws-amplify/ui';
+import { isFunction } from '@aws-amplify/ui';
 
 export const DEFAULT_ERROR_MESSAGE =
   '`useControlledField` must be used within a `FormProvider`';
@@ -44,7 +44,7 @@ export default function useControlledField<OnBlur extends FocusHandler>({
   const hasError = !!errorMessage;
 
   const handleBlur = (event: Parameters<OnBlur>[0]) => {
-    if (isTypedFunction(_onBlur)) {
+    if (isFunction(_onBlur)) {
       _onBlur(event);
     }
     // `useController.onBlur` does not receive params
@@ -52,7 +52,7 @@ export default function useControlledField<OnBlur extends FocusHandler>({
   };
 
   const handleChangeText = (event: string) => {
-    if (isTypedFunction(_onChangeText)) {
+    if (isFunction(_onChangeText)) {
       _onChangeText(event);
     }
     onChangeText(event);

package/src/hooks/index.ts

@@ -9,3 +9,4 @@ export { default as useHasValueUpdated } from './useHasValueUpdated';
 export { default as usePreviousValue } from './usePreviousValue';
 export { default as useSetUserAgent } from './useSetUserAgent';
 export { default as useTimeout } from './useTimeout';
+export { default as useDropZone, UseDropZoneParams } from './useDropZone';

package/src/hooks/useDropZone.ts

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { isFunction } from '@aws-amplify/ui';
+import { filterAllowedFiles } from '../utils/filterAllowedFiles';
+
+interface DragEvents {
+  onDragStart: (event: React.DragEvent<HTMLDivElement>) => void;
+  onDragEnter: (event: React.DragEvent<HTMLDivElement>) => void;
+  onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
+  onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
+  onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
+}
+
+export interface UseDropZoneParams extends Partial<DragEvents> {
+  onDropComplete?: (props: {
+    acceptedFiles: File[];
+    rejectedFiles: File[];
+  }) => void;
+  /**
+   * List of accepted File types, values of `['*']` or undefined allow any files
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+   */
+  acceptedFileTypes?: string[];
+}
+
+type DragState = 'accept' | 'reject' | 'inactive';
+
+interface UseDropZoneReturn extends DragEvents {
+  dragState: DragState;
+}
+
+export default function useDropZone({
+  onDropComplete,
+  onDragEnter: _onDragEnter,
+  onDragLeave: _onDragLeave,
+  onDragOver: _onDragOver,
+  onDragStart: _onDragStart,
+  onDrop: _onDrop,
+  acceptedFileTypes = [],
+}: UseDropZoneParams): UseDropZoneReturn {
+  const [dragState, setDragState] = useState<DragState>('inactive');
+
+  const onDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.clearData();
+    if (isFunction(_onDragStart)) {
+      _onDragStart(event);
+    }
+  };
+
+  const onDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isFunction(_onDragEnter)) {
+      _onDragEnter(event);
+    }
+  };
+
+  const onDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragState('inactive');
+    if (isFunction(_onDragLeave)) {
+      _onDragLeave(event);
+    }
+  };
+
+  const onDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.dataTransfer.dropEffect = 'copy';
+    if (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: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragState('inactive');
+    const files = Array.from(event.dataTransfer.files);
+    const { acceptedFiles, rejectedFiles } = filterAllowedFiles<File>(
+      files,
+      acceptedFileTypes
+    );
+
+    if (isFunction(_onDrop)) {
+      _onDrop(event);
+    }
+    if (isFunction(onDropComplete)) {
+      onDropComplete({ acceptedFiles, rejectedFiles });
+    }
+  };
+
+  return {
+    onDragStart,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+    dragState,
+  };
+}

package/src/hooks/useTimeout.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { isTypedFunction } from '@aws-amplify/ui';
+import { isFunction } from '@aws-amplify/ui';
 
 export default function useTimeout({
   callback,
@@ -15,7 +15,7 @@ export default function useTimeout({
   }, [callback]);
 
   React.useEffect(() => {
-    if (!isTypedFunction(storedCallback.current) || !delay) {
+    if (!isFunction(storedCallback.current) || !delay) {
       return;
     }
 

package/src/index.ts

@@ -44,6 +44,8 @@ export {
   useTimeout,
   useDataState,
   DataState,
+  useDropZone,
+  UseDropZoneParams,
 } from './hooks';
 
 export { MergeProps } from './types';

package/src/utils/filterAllowedFiles.ts

@@ -0,0 +1,50 @@
+// Drag event file shape is different than the drop event fileshape
+type DragFile =
+  | {
+      kind: string;
+      type: string;
+      name?: string;
+    }
+  | File;
+
+export function filterAllowedFiles<FileType extends DragFile = DragFile>(
+  files: FileType[],
+  acceptedFileTypes: string[]
+): { acceptedFiles: FileType[]; rejectedFiles: FileType[] } {
+  // Allow any files if acceptedFileTypes is undefined, empty array, or contains '*'
+  if (
+    !acceptedFileTypes ||
+    acceptedFileTypes.length === 0 ||
+    acceptedFileTypes.includes('*')
+  ) {
+    return { acceptedFiles: files, rejectedFiles: [] };
+  }
+  const acceptedFiles: FileType[] = [];
+  const rejectedFiles: FileType[] = [];
+
+  function filterFile(file: DragFile) {
+    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 };
+}

package/dist/esm/elements/elements.mjs

@@ -1,3 +0,0 @@
-export { default as defineBaseElement } from './defineBaseElement.mjs';
-export { default as withBaseElementProps } from './withBaseElementProps.mjs';
-export { ElementsProvider } from './ElementsContext.mjs';