@aws-amplify/ui-react 6.5.0 → 6.5.2

package/dist/internal.js

@@ -2,16 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Field = require('./Field-4b189104.js');
+var Field = require('./Field-CIQvkMkM.js');
 var React = require('react');
 var Storage = require('aws-amplify/storage');
 var ui = require('@aws-amplify/ui');
 var uiReactCore = require('@aws-amplify/ui-react-core');
 require('@aws-amplify/core');
 require('aws-amplify/auth');
-require('./primitiveWithForwardRef-7e929242.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -32,7 +29,6 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Storage__namespace = /*#__PURE__*/_interopNamespace(Storage);
 
 const useStorageURL = ({ key, options, fallbackURL, onStorageGetError, }) => {
@@ -87,7 +83,7 @@ const useThemeBreakpoint = () => {
 const FilterChildren = ({ allowedFilters, children = null, targetFilter, }) => {
     const showContent = Array.isArray(allowedFilters) &&
         allowedFilters.some((filter) => filter === targetFilter);
-    return showContent ? React__default["default"].createElement(React__default["default"].Fragment, null, children) : null;
+    return showContent ? React__namespace["default"].createElement(React__namespace["default"].Fragment, null, children) : null;
 };
 
 /**
@@ -16706,8 +16702,11 @@ exports.IconWarning = Field.IconWarning;
 exports.useAuth = Field.useAuth;
 exports.useColorMode = Field.useColorMode;
 exports.useDeprecationWarning = Field.useDeprecationWarning;
-exports.useDropZone = Field.useDropZone;
 exports.useIcons = Field.useIcons;
+Object.defineProperty(exports, "useDropZone", {
+    enumerable: true,
+    get: function () { return uiReactCore.useDropZone; }
+});
 exports.FilterChildren = FilterChildren;
 exports.IconAssistant = IconAssistant;
 exports.IconAttach = IconAttach;

package/dist/server.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ThemeStyle = require('./ThemeStyle-1fee4302.js');
+var ThemeStyle = require('./ThemeStyle-CgfvQJ7V.js');
 var React = require('react');
 var ui = require('@aws-amplify/ui');
-var primitiveWithForwardRef = require('./primitiveWithForwardRef-7e929242.js');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -27,7 +26,11 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const ComponentStylePrimitive = ({ theme, componentThemes = [], ...rest }, ref) => {
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+const ComponentStyle = ({ theme, componentThemes = [], ...rest }) => {
     if (!theme || !componentThemes.length) {
         return null;
     }
@@ -35,34 +38,43 @@ const ComponentStylePrimitive = ({ theme, componentThemes = [], ...rest }, ref)
         theme,
         components: componentThemes,
     });
-    return React__namespace.createElement(ThemeStyle.Style, { ...rest, ref: ref, cssText: cssText });
+    return React__namespace.createElement(ThemeStyle.Style, { ...rest, cssText: cssText });
 };
+ComponentStyle.displayName = 'ComponentStyle';
+
 /**
  * @experimental
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
  */
-const ComponentStyle = primitiveWithForwardRef.primitiveWithForwardRef(ComponentStylePrimitive);
-ComponentStyle.displayName = 'ComponentStyle';
+const GlobalStyle = ({ styles, ...rest }) => {
+    if (!styles) {
+        return null;
+    }
+    const cssText = ui.createGlobalCSS(styles);
+    return React__namespace.createElement(ThemeStyle.Style, { ...rest, cssText: cssText });
+};
+GlobalStyle.displayName = 'GlobalStyle';
 
 exports.ThemeStyle = ThemeStyle.ThemeStyle;
-Object.defineProperty(exports, 'createComponentClasses', {
+Object.defineProperty(exports, "createComponentClasses", {
     enumerable: true,
     get: function () { return ui.createComponentClasses; }
 });
-Object.defineProperty(exports, 'createTheme', {
+Object.defineProperty(exports, "createTheme", {
     enumerable: true,
     get: function () { return ui.createTheme; }
 });
-Object.defineProperty(exports, 'defaultDarkModeOverride', {
+Object.defineProperty(exports, "defaultDarkModeOverride", {
     enumerable: true,
     get: function () { return ui.defaultDarkModeOverride; }
 });
-Object.defineProperty(exports, 'defaultTheme', {
+Object.defineProperty(exports, "defaultTheme", {
     enumerable: true,
     get: function () { return ui.defaultTheme; }
 });
-Object.defineProperty(exports, 'defineComponentTheme', {
+Object.defineProperty(exports, "defineComponentTheme", {
     enumerable: true,
     get: function () { return ui.defineComponentTheme; }
 });
 exports.ComponentStyle = ComponentStyle;
+exports.GlobalStyle = GlobalStyle;

package/dist/types/components/ThemeProvider/ComponentStyle.d.ts

@@ -1,7 +1,7 @@
+import * as React from 'react';
 import { WebTheme } from '@aws-amplify/ui';
-import { BaseComponentProps, ElementType, ForwardRefPrimitive, PrimitiveProps } from '../../primitives/types';
 import { BaseComponentTheme } from '@aws-amplify/ui';
-interface BaseComponentStyleProps extends BaseComponentProps {
+interface ComponentStyleProps extends React.ComponentProps<'style'> {
     /**
      * Provide a server generated nonce which matches your CSP `style-src` rule.
      * This will be attached to the generated <style> tag.
@@ -11,10 +11,12 @@ interface BaseComponentStyleProps extends BaseComponentProps {
     theme: Pick<WebTheme, 'name' | 'breakpoints' | 'tokens'>;
     componentThemes: BaseComponentTheme[];
 }
-export type ComponentStyleProps<Element extends ElementType = 'style'> = PrimitiveProps<BaseComponentStyleProps, Element>;
 /**
  * @experimental
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
  */
-export declare const ComponentStyle: ForwardRefPrimitive<BaseComponentStyleProps, 'style'>;
+export declare const ComponentStyle: {
+    ({ theme, componentThemes, ...rest }: ComponentStyleProps): JSX.Element | null;
+    displayName: string;
+};
 export {};

package/dist/types/components/ThemeProvider/GlobalStyle.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { createGlobalCSS } from '@aws-amplify/ui';
+interface GlobalStyleProps extends React.ComponentProps<'style'> {
+    /**
+     * Provide a server generated nonce which matches your CSP `style-src` rule.
+     * This will be attached to the generated <style> tag.
+     * @see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
+     */
+    nonce?: string;
+    styles: Parameters<typeof createGlobalCSS>[0];
+}
+/**
+ * @experimental
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
+ */
+export declare const GlobalStyle: {
+    ({ styles, ...rest }: GlobalStyleProps): JSX.Element | null;
+    displayName: string;
+};
+export {};

package/dist/types/components/ThemeProvider/Style.d.ts

@@ -1,11 +1,13 @@
-import { BaseComponentProps, ElementType, ForwardRefPrimitive, PrimitiveProps } from '../../primitives/types';
-interface BaseStyleProps extends BaseComponentProps {
+import * as React from 'react';
+interface StyleProps extends React.ComponentProps<'style'> {
     cssText?: string;
 }
-export type StyleProps<Element extends ElementType = 'style'> = PrimitiveProps<BaseStyleProps, Element>;
 /**
  * @experimental
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
  */
-export declare const Style: ForwardRefPrimitive<BaseStyleProps, 'style'>;
+export declare const Style: {
+    ({ cssText, ...rest }: StyleProps): JSX.Element | null;
+    displayName: string;
+};
 export {};

package/dist/types/components/ThemeProvider/ThemeStyle.d.ts

@@ -1,6 +1,6 @@
+import * as React from 'react';
 import { WebTheme } from '@aws-amplify/ui';
-import { BaseComponentProps, ElementType, ForwardRefPrimitive, PrimitiveProps } from '../../primitives/types';
-interface BaseStyleThemeProps extends BaseComponentProps {
+interface ThemeStyleProps extends React.ComponentProps<'style'> {
     /**
      * Provide a server generated nonce which matches your CSP `style-src` rule.
      * This will be attached to the generated <style> tag.
@@ -9,10 +9,12 @@ interface BaseStyleThemeProps extends BaseComponentProps {
     nonce?: string;
     theme?: WebTheme;
 }
-export type ThemeStyleProps<Element extends ElementType = 'style'> = PrimitiveProps<BaseStyleThemeProps, Element>;
 /**
  * @experimental
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
  */
-export declare const ThemeStyle: ForwardRefPrimitive<BaseStyleThemeProps, 'style'>;
+export declare const ThemeStyle: {
+    ({ theme, ...rest }: ThemeStyleProps): JSX.Element | null;
+    displayName: string;
+};
 export {};

package/dist/types/internal.d.ts

@@ -3,9 +3,9 @@ export * from './hooks/useStorageURL';
 export * from './hooks/useThemeBreakpoint';
 export { useDeprecationWarning } from './hooks/useDeprecationWarning';
 export { useColorMode } from './hooks/useTheme';
+export { useDropZone } from '@aws-amplify/ui-react-core';
 export * from './components/FilterChildren';
 export { AlertIcon } from './primitives/Alert/AlertIcon';
 export * from './primitives/Icon/internal';
-export { useDropZone } from './primitives/DropZone/useDropZone';
 export { Field } from './primitives/Field';
 export { PrimitiveCatalog } from './PrimitiveCatalog';

package/dist/types/primitives/DropZone/DropZoneProvider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DragState } from './types';
+type DragState = 'accept' | 'reject' | 'inactive';
 declare const DropZoneContext: React.Context<DragState>;
 declare const DropZoneProvider: ({ value, children, }: {
     value: DragState;

package/dist/types/primitives/DropZone/types.d.ts

@@ -1,18 +1,7 @@
 import * as React from 'react';
 import { ElementType, PrimitiveProps, BaseViewProps } from '../types';
-interface DropProps {
-    acceptedFiles: File[];
-    rejectedFiles: File[];
-}
-export interface UseDropZoneProps extends Partial<DragEvents> {
-    onDropComplete?: (props: DropProps) => 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[];
-}
-export interface BaseDropZoneProps extends BaseViewProps, UseDropZoneProps {
+import { UseDropZoneParams } from '@aws-amplify/ui-react-core';
+export interface BaseDropZoneProps extends BaseViewProps, UseDropZoneParams {
 }
 export type DropZoneProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseDropZoneProps, Element>;
 interface DragEvents {
@@ -22,10 +11,6 @@ interface DragEvents {
     onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
     onDrop: (event: React.DragEvent<HTMLDivElement>) => void;
 }
-export type DragState = 'accept' | 'reject' | 'inactive';
-export interface UseDropZoneReturn extends DragEvents {
-    dragState: DragState;
-}
 export interface BaseDropZoneContainerProps extends BaseViewProps, DragEvents {
 }
 export type DropZoneContainerProps<Element extends ElementType = 'div'> = PrimitiveProps<BaseDropZoneContainerProps, Element>;

package/dist/types/primitives/shared/responsive/utils.d.ts

@@ -1,6 +1,6 @@
 import { Breakpoint, Breakpoints, ValueBreakpoints } from '../../types/responsive';
 export declare const getValueAtCurrentBreakpoint: <Value = string | number>({ breakpoint, breakpoints, values, }: {
-    values: Partial<Record<"small" | "large" | "medium" | "xl" | "xxl" | "base", Value>> | Value[];
+    values: Partial<Record<"base" | "small" | "large" | "medium" | "xl" | "xxl", Value>> | Value[];
     breakpoint: Breakpoint;
     breakpoints: Breakpoints;
 }) => string | number | Value | null;

package/dist/types/server.d.ts

@@ -1,3 +1,4 @@
 export { ThemeStyle } from './components/ThemeProvider/ThemeStyle';
 export { ComponentStyle } from './components/ThemeProvider/ComponentStyle';
+export { GlobalStyle } from './components/ThemeProvider/GlobalStyle';
 export { createTheme, defineComponentTheme, createComponentClasses, defaultTheme, defaultDarkModeOverride, } from '@aws-amplify/ui';

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.5.0";
+export declare const VERSION = "6.5.2";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.5.0",
+  "version": "6.5.2",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -47,7 +47,7 @@
     "check:esm": "node --input-type=module --eval 'import \"@aws-amplify/ui-react\"'",
     "clean": "rimraf dist node_modules",
     "dev": "yarn build:rollup --watch",
-    "lint": "yarn typecheck && eslint src --ext .js,.ts,.tsx",
+    "lint": "yarn typecheck && eslint .",
     "prebuild": "rimraf dist",
     "size": "yarn size-limit",
     "test": "jest",
@@ -55,8 +55,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.6.0",
-    "@aws-amplify/ui-react-core": "3.0.24",
+    "@aws-amplify/ui": "6.6.2",
+    "@aws-amplify/ui-react-core": "3.0.26",
     "@radix-ui/react-direction": "1.0.0",
     "@radix-ui/react-dropdown-menu": "1.0.0",
     "@radix-ui/react-slider": "1.0.0",
@@ -66,7 +66,8 @@
     "tslib": "^2.5.2"
   },
   "peerDependencies": {
-    "aws-amplify": "^6.3.2",
+    "@aws-amplify/core": "*",
+    "aws-amplify": "^6.6.0",
     "react": "^16.14.0 || ^17.0 || ^18.0",
     "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },

package/dist/esm/primitives/DropZone/filterAllowedFiles.mjs

@@ -1,34 +0,0 @@
-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/esm/primitives/DropZone/useDropZone.mjs

@@ -1,65 +0,0 @@
-import { useState } from 'react';
-import { isFunction } from '@aws-amplify/ui';
-import { filterAllowedFiles } from './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 };

package/dist/primitiveWithForwardRef-7e929242.js

@@ -1,36 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function _interopNamespace(e) {
-	if (e && e.__esModule) return e;
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n["default"] = e;
-	return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-/**
- * Updates the return type for primitives wrapped in `React.forwardRef` to
- * `React.ReactElement`. In React 18 the return type of `React.ExoticComponent`
- * was changed from `React.ReactElement` to `React.ReactNode`, which breaks
- * clients using React 16 and 17.
- *
- * @param primitive UI Primitive to be wrapped with `React.forwardRef`
- * @returns ForwaredRef wrapped UI Primitive
- */
-const primitiveWithForwardRef = (primitive) => React__namespace.forwardRef(primitive);
-
-exports.primitiveWithForwardRef = primitiveWithForwardRef;

package/dist/types/primitives/Card/__test__/Card.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/primitives/DropZone/filterAllowedFiles.d.ts

@@ -1,10 +0,0 @@
-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/dist/types/primitives/DropZone/useDropZone.d.ts

@@ -1,2 +0,0 @@
-import { UseDropZoneProps, UseDropZoneReturn } from './types';
-export declare function useDropZone({ onDropComplete, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragOver: _onDragOver, onDragStart: _onDragStart, onDrop: _onDrop, acceptedFileTypes, }: UseDropZoneProps): UseDropZoneReturn;