@aws-amplify/ui-react-core 3.0.29 → 3.1.0

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,

package/src/hooks/useDataState.ts

@@ -1,3 +1,4 @@
+import { isFunction } from '@aws-amplify/ui';
 import React from 'react';
 
 export interface DataState<T> {
@@ -7,6 +8,13 @@ export interface DataState<T> {
   message: string | undefined;
 }
 
+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
 const INITIAL_STATE = { hasError: false, isLoading: false, message: undefined };
 const LOADING_STATE = { hasError: false, isLoading: true, message: undefined };
@@ -20,9 +28,13 @@ const resolveMaybeAsync = async <T>(
 };
 
 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>>(() => ({
     ...INITIAL_STATE,
     data: initialData,
@@ -30,20 +42,26 @@ export default function useDataState<T, K>(
 
   const prevData = React.useRef(initialData);
 
-  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;
           setDataState({ ...INITIAL_STATE, data });
         })
         .catch(({ message }: Error) => {
+          if (isFunction(onError)) onError(message);
+
           setDataState(({ data }) => ({ ...ERROR_STATE, data, message }));
         });
     },
-    [action]
+    [action, onError, onSuccess]
   );
 
   return [dataState, handleAction];

package/src/hooks/useDropZone.ts

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { isFunction } from '@aws-amplify/ui';
 import { filterAllowedFiles } from '../utils/filterAllowedFiles';
+import { processDroppedItems } from '../utils/processDroppedItems';
 
 interface DragEvents {
   onDragStart: (event: React.DragEvent<HTMLDivElement>) => void;
@@ -85,17 +86,27 @@ export default function useDropZone({
     event.preventDefault();
     event.stopPropagation();
     setDragState('inactive');
-    const files = Array.from(event.dataTransfer.files);
-    const { acceptedFiles, rejectedFiles } = filterAllowedFiles<File>(
-      files,
-      acceptedFileTypes
-    );
+
+    const { files, items } = event.dataTransfer;
 
     if (isFunction(_onDrop)) {
       _onDrop(event);
     }
-    if (isFunction(onDropComplete)) {
-      onDropComplete({ acceptedFiles, rejectedFiles });
+
+    const completeDrop = (files: File[]) => {
+      const { acceptedFiles, rejectedFiles } = filterAllowedFiles<File>(
+        files,
+        acceptedFileTypes
+      );
+      if (isFunction(onDropComplete)) {
+        onDropComplete({ acceptedFiles, rejectedFiles });
+      }
+    };
+
+    if (!items) {
+      completeDrop(Array.from(files));
+    } else {
+      processDroppedItems(Array.from(items)).then(completeDrop);
     }
   };
 

package/src/index.ts

@@ -35,6 +35,8 @@ export {
 } from './components';
 
 export {
+  AsyncDataAction,
+  DataAction,
   useDeprecationWarning,
   UseDeprecationWarning,
   useGetUrl,

package/src/utils/createContextUtilities.tsx

@@ -36,7 +36,7 @@ type CreateContextUtilitiesReturn<ContextType, ContextName extends string> = {
     : Key extends `use${string}`
     ? (params?: HookParams) => ContextType
     : Key extends `${string}Context`
-    ? React.Context<ContextType | undefined>
+    ? React.Context<ContextType>
     : never;
 };
 
@@ -89,7 +89,7 @@ type CreateContextUtilitiesReturn<ContextType, ContextName extends string> = {
 export default function createContextUtilities<
   ContextType,
   ContextName extends string = string,
-  Message extends string | undefined = string | undefined
+  Message extends string | undefined = string | undefined,
 >(
   options: ContextOptions<ContextType, ContextName, Message>
 ): CreateContextUtilitiesReturn<ContextType, ContextName> {
@@ -99,7 +99,11 @@ export default function createContextUtilities<
     throw new Error(INVALID_OPTIONS_MESSAGE);
   }
 
+  const contextDisplayName = `${contextName}Context`;
+  const providerDisplayName = `${contextName}Provider`;
+
   const Context = React.createContext<ContextType | undefined>(defaultValue);
+  Context.displayName = contextDisplayName;
 
   function Provider(props: React.PropsWithChildren<ContextType>) {
     const { children, ...context } = props;
@@ -113,8 +117,7 @@ export default function createContextUtilities<
     return <Context.Provider value={value}>{children}</Context.Provider>;
   }
 
-  Provider.displayName = `${contextName}Provider`;
-
+  Provider.displayName = providerDisplayName;
   return {
     [`use${contextName}`]: function (params?: HookParams) {
       const context = React.useContext(Context);
@@ -125,7 +128,7 @@ export default function createContextUtilities<
 
       return context;
     },
-    [`${contextName}Provider`]: Provider,
-    [`${contextName}Context`]: Context,
+    [providerDisplayName]: Provider,
+    [contextDisplayName]: Context,
   } as CreateContextUtilitiesReturn<ContextType, ContextName>;
 }

package/src/utils/processDroppedItems.ts

@@ -0,0 +1,79 @@
+// Helper function to convert FileSystemFileEntry to File
+const getFileFromEntry = (fileEntry: FileSystemFileEntry): Promise<File> => {
+  return new Promise((resolve) => {
+    fileEntry.file(resolve);
+  });
+};
+
+// Helper function to read all entries in a directory
+const readAllDirectoryEntries = async (
+  dirReader: FileSystemDirectoryReader
+): Promise<FileSystemEntry[]> => {
+  const entries: FileSystemEntry[] = [];
+
+  let readBatch: FileSystemEntry[] = [];
+  do {
+    readBatch = await new Promise<FileSystemEntry[]>((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
+export async function processDroppedItems(
+  dataTransferItems: DataTransferItem[]
+): Promise<File[]> {
+  const files: File[] = [];
+
+  const processFileSystemEntry = async (
+    entry: FileSystemEntry
+  ): Promise<void> => {
+    if (entry.isFile) {
+      const file = await getFileFromEntry(entry as FileSystemFileEntry);
+      // 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 as FileSystemDirectoryEntry).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<FileSystemEntry[]>((acc, item) => {
+        const entry = item.webkitGetAsEntry();
+        return item.kind === 'file' && entry ? [...acc, entry] : acc;
+      }, [])
+      .map(processFileSystemEntry)
+  );
+
+  return files;
+}