@aws-amplify/ui-react 6.8.0 → 6.9.0

package/dist/esm/components/ThemeProvider/ThemeProvider.mjs

@@ -1,12 +1,9 @@
 import * as React from 'react';
-import * as RadixDirection from '@radix-ui/react-direction';
-import { sanitizeNamespaceImport, createTheme } from '@aws-amplify/ui';
+import { DirectionProvider } from '@radix-ui/react-direction';
+import { createTheme } from '@aws-amplify/ui';
 import { ThemeContext } from './ThemeContext.mjs';
 import { ThemeStyle } from './ThemeStyle.mjs';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { DirectionProvider } = sanitizeNamespaceImport(RadixDirection);
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/theming)
  */

package/dist/esm/primitives/Menu/Menu.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { sanitizeNamespaceImport, classNames, ComponentClassName } from '@aws-amplify/ui';
-import * as Dropdown from '@radix-ui/react-dropdown-menu';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '@radix-ui/react-dropdown-menu';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup.mjs';
 import '../Icon/Icon.mjs';
 import '../Icon/context/IconsContext.mjs';
@@ -10,9 +10,6 @@ import { IconMenu } from '../Icon/icons/IconMenu.mjs';
 import { MenuButton } from './MenuButton.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } = sanitizeNamespaceImport(Dropdown);
 const MENU_TRIGGER_TEST_ID = 'amplify-menu-trigger-test-id';
 const MENU_ITEMS_GROUP_TEST_ID = 'amplify-menu-items-group-test-id';
 const MenuPrimitive = ({ menuAlign = 'start', children, className, isOpen, size, trigger, triggerClassName, ariaLabel, onOpenChange, isDisabled, ...rest }, ref) => {

package/dist/esm/primitives/Menu/MenuItem.mjs

@@ -1,12 +1,9 @@
 import * as React from 'react';
-import { sanitizeNamespaceImport, classNames, ComponentClassName } from '@aws-amplify/ui';
-import * as Dropdown from '@radix-ui/react-dropdown-menu';
+import { classNames, ComponentClassName } from '@aws-amplify/ui';
+import { DropdownMenuItem } from '@radix-ui/react-dropdown-menu';
 import { MenuButton } from './MenuButton.mjs';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef.mjs';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { DropdownMenuItem } = sanitizeNamespaceImport(Dropdown);
 const MENU_ITEM_TEST_ID = 'amplify-menu-item-test-id';
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)

package/dist/esm/primitives/SliderField/SliderField.mjs

@@ -1,5 +1,5 @@
-import { sanitizeNamespaceImport, isFunction, classNames, ComponentClassName, classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
-import * as RadixSlider from '@radix-ui/react-slider';
+import { isFunction, classNames, ComponentClassName, classNameModifier, classNameModifierByFlag } from '@aws-amplify/ui';
+import { Root, Track, Range, Thumb } from '@radix-ui/react-slider';
 import * as React from 'react';
 import '../Field/FieldClearButton.mjs';
 import { FieldDescription } from '../Field/FieldDescription.mjs';
@@ -17,9 +17,6 @@ import { createSpaceSeparatedIds } from '../utils/createSpaceSeparatedIds.mjs';
 import { DESCRIPTION_SUFFIX, ERROR_SUFFIX } from '../../helpers/constants.mjs';
 import { getUniqueComponentId } from '../utils/getUniqueComponentId.mjs';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { Range, Root, Thumb, Track } = sanitizeNamespaceImport(RadixSlider);
 const SLIDER_LABEL_TEST_ID = 'slider-label';
 const SLIDER_ROOT_TEST_ID = 'slider-root';
 const SLIDER_TRACK_TEST_ID = 'slider-track';

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '6.8.0';
+const VERSION = '6.9.0';
 
 export { VERSION };

package/dist/index.js

@@ -9,11 +9,11 @@ var ui = require('@aws-amplify/ui');
 var Field = require('./Field-DbA9eYRa.js');
 require('aws-amplify/storage');
 var debounce = require('lodash/debounce.js');
-var Dropdown = require('@radix-ui/react-dropdown-menu');
-var RadixSlider = require('@radix-ui/react-slider');
+var reactDropdownMenu = require('@radix-ui/react-dropdown-menu');
+var reactSlider = require('@radix-ui/react-slider');
 var QRCode = require('qrcode');
 var utils = require('aws-amplify/utils');
-var RadixDirection = require('@radix-ui/react-direction');
+var reactDirection = require('@radix-ui/react-direction');
 var ThemeStyle = require('./ThemeStyle-DA2-Clfz.js');
 require('@aws-amplify/core');
 require('aws-amplify/auth');
@@ -41,10 +41,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var isEqual__default = /*#__PURE__*/_interopDefault(isEqual);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
-var Dropdown__namespace = /*#__PURE__*/_interopNamespace(Dropdown);
-var RadixSlider__namespace = /*#__PURE__*/_interopNamespace(RadixSlider);
 var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
-var RadixDirection__namespace = /*#__PURE__*/_interopNamespace(RadixDirection);
 
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/theming/responsive#usebreakpointvalue)
@@ -1350,16 +1347,13 @@ const MenuButtonPrimitive = ({ ariaLabel, className, children, isDisabled = fals
 const MenuButton = Field.primitiveWithForwardRef(MenuButtonPrimitive);
 MenuButton.displayName = 'MenuButton';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } = ui.sanitizeNamespaceImport(Dropdown__namespace);
 const MENU_TRIGGER_TEST_ID = 'amplify-menu-trigger-test-id';
 const MENU_ITEMS_GROUP_TEST_ID = 'amplify-menu-items-group-test-id';
 const MenuPrimitive = ({ menuAlign = 'start', children, className, isOpen, size, trigger, triggerClassName, ariaLabel, onOpenChange, isDisabled, ...rest }, ref) => {
     const icons = Field.useIcons('menu');
-    return (React__namespace.createElement(DropdownMenu, { onOpenChange: onOpenChange, open: isOpen },
-        React__namespace.createElement(DropdownMenuTrigger, { disabled: isDisabled, asChild: true }, trigger ?? (React__namespace.createElement(MenuButton, { ariaLabel: ariaLabel, size: size, testId: MENU_TRIGGER_TEST_ID, className: ui.classNames(ui.ComponentClassName.MenuTrigger, triggerClassName) }, icons?.menu ?? React__namespace.createElement(Field.IconMenu, null)))),
-        React__namespace.createElement(DropdownMenuContent, { align: menuAlign, className: ui.ComponentClassName.MenuWrapper },
+    return (React__namespace.createElement(reactDropdownMenu.DropdownMenu, { onOpenChange: onOpenChange, open: isOpen },
+        React__namespace.createElement(reactDropdownMenu.DropdownMenuTrigger, { disabled: isDisabled, asChild: true }, trigger ?? (React__namespace.createElement(MenuButton, { ariaLabel: ariaLabel, size: size, testId: MENU_TRIGGER_TEST_ID, className: ui.classNames(ui.ComponentClassName.MenuTrigger, triggerClassName) }, icons?.menu ?? React__namespace.createElement(Field.IconMenu, null)))),
+        React__namespace.createElement(reactDropdownMenu.DropdownMenuContent, { align: menuAlign, className: ui.ComponentClassName.MenuWrapper },
             React__namespace.createElement(ButtonGroup, { className: ui.classNames(ui.ComponentClassName.MenuContent, className), ref: ref, isDisabled: isDisabled, size: size, testId: MENU_ITEMS_GROUP_TEST_ID, ...rest }, children))));
 };
 /**
@@ -1368,15 +1362,12 @@ const MenuPrimitive = ({ menuAlign = 'start', children, className, isOpen, size,
 const Menu = Field.primitiveWithForwardRef(MenuPrimitive);
 Menu.displayName = 'Menu';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { DropdownMenuItem } = ui.sanitizeNamespaceImport(Dropdown__namespace);
 const MENU_ITEM_TEST_ID = 'amplify-menu-item-test-id';
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/menu)
  */
 const MenuItemPrimitive = ({ children, className, ...rest }, ref) => {
-    return (React__namespace.createElement(DropdownMenuItem, { asChild: true, ref: ref },
+    return (React__namespace.createElement(reactDropdownMenu.DropdownMenuItem, { asChild: true, ref: ref },
         React__namespace.createElement(MenuButton, { className: ui.classNames(ui.ComponentClassName.MenuItem, className), testId: MENU_ITEM_TEST_ID, ...rest, variation: "menu" // ensures `menu` variation is not overwritten
          }, children)));
 };
@@ -1727,9 +1718,6 @@ const RatingPrimitive = ({ className, emptyColor, emptyIcon, fillColor, icon, ma
 const Rating = Field.primitiveWithForwardRef(RatingPrimitive);
 Rating.displayName = 'Rating';
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { Range, Root, Thumb, Track } = ui.sanitizeNamespaceImport(RadixSlider__namespace);
 const SLIDER_LABEL_TEST_ID = 'slider-label';
 const SLIDER_ROOT_TEST_ID = 'slider-root';
 const SLIDER_TRACK_TEST_ID = 'slider-track';
@@ -1777,13 +1765,13 @@ const SliderFieldPrimitive = ({ ariaValuetext, className, defaultValue = 0, desc
             !isValueHidden ? renderedValue : null),
         React__namespace.createElement(Field.FieldDescription, { id: descriptionId, labelHidden: labelHidden, descriptiveText: descriptiveText }),
         React__namespace.createElement(FieldGroup, { className: ui.ComponentClassName.SliderFieldGroup, id: fieldId, orientation: orientation, outerStartComponent: outerStartComponent, outerEndComponent: outerEndComponent },
-            React__namespace.createElement(Root, { className: rootComponentClasses, "data-testid": SLIDER_ROOT_TEST_ID, disabled: disabled, defaultValue: defaultValues, onValueChange: onValueChange, orientation: orientation, ref: ref, value: values, ...rest },
-                React__namespace.createElement(Track, { className: componentClasses, "data-testid": SLIDER_TRACK_TEST_ID, style: {
+            React__namespace.createElement(reactSlider.Root, { className: rootComponentClasses, "data-testid": SLIDER_ROOT_TEST_ID, disabled: disabled, defaultValue: defaultValues, onValueChange: onValueChange, orientation: orientation, ref: ref, value: values, ...rest },
+                React__namespace.createElement(reactSlider.Track, { className: componentClasses, "data-testid": SLIDER_TRACK_TEST_ID, style: {
                         backgroundColor: String(emptyTrackColor),
                         [`${isVertical ? 'width' : 'height'}`]: trackSize,
                     } },
-                    React__namespace.createElement(Range, { className: ui.classNames(ui.ComponentClassName.SliderFieldRange, ui.classNameModifier(ui.ComponentClassName.SliderFieldRange, orientation), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldRange, 'disabled', disabled)), "data-testid": SLIDER_RANGE_TEST_ID, style: { backgroundColor: String(filledTrackColor) } })),
-                React__namespace.createElement(Thumb, { "aria-describedby": ariaDescribedBy, "aria-labelledby": stableId, "aria-valuetext": ariaValuetext, className: ui.classNames(ui.ComponentClassName.SliderFieldThumb, ui.classNameModifier(ui.ComponentClassName.SliderFieldThumb, size), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldThumb, 'disabled', disabled)), style: { backgroundColor: String(thumbColor) } }))),
+                    React__namespace.createElement(reactSlider.Range, { className: ui.classNames(ui.ComponentClassName.SliderFieldRange, ui.classNameModifier(ui.ComponentClassName.SliderFieldRange, orientation), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldRange, 'disabled', disabled)), "data-testid": SLIDER_RANGE_TEST_ID, style: { backgroundColor: String(filledTrackColor) } })),
+                React__namespace.createElement(reactSlider.Thumb, { "aria-describedby": ariaDescribedBy, "aria-labelledby": stableId, "aria-valuetext": ariaValuetext, className: ui.classNames(ui.ComponentClassName.SliderFieldThumb, ui.classNameModifier(ui.ComponentClassName.SliderFieldThumb, size), ui.classNameModifierByFlag(ui.ComponentClassName.SliderFieldThumb, 'disabled', disabled)), style: { backgroundColor: String(thumbColor) } }))),
         React__namespace.createElement(Field.FieldErrorMessage, { id: errorId, hasError: hasError, errorMessage: errorMessage })));
 };
 /**
@@ -2483,7 +2471,7 @@ const defaultDeleteUserDisplayText = {
     warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
 };
 
-const VERSION = '6.8.0';
+const VERSION = '6.9.0';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {
@@ -3456,16 +3444,13 @@ function withAuthenticator(Component, options = {}) {
     };
 }
 
-// Radix packages don't support ESM in Node, in some scenarios(e.g. SSR)
-// We have to use namespace import and sanitize it to ensure the interoperablity between ESM and CJS
-const { DirectionProvider } = ui.sanitizeNamespaceImport(RadixDirection__namespace);
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/theming)
  */
 function ThemeProvider({ children, colorMode, direction = 'ltr', nonce, theme, }) {
     const value = React__namespace.useMemo(() => ({ theme: ui.createTheme(theme), colorMode }), [theme, colorMode]);
     return (React__namespace.createElement(Field.ThemeContext.Provider, { value: value },
-        React__namespace.createElement(DirectionProvider, { dir: direction },
+        React__namespace.createElement(reactDirection.DirectionProvider, { dir: direction },
             React__namespace.createElement("div", { "data-amplify-theme": value.theme.name, "data-amplify-color-mode": colorMode, dir: direction }, children),
             theme ? React__namespace.createElement(ThemeStyle.ThemeStyle, { theme: value.theme, nonce: nonce }) : null)));
 }

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

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { MergeProps } from '@aws-amplify/ui-react-core';
 import { AriaProps, BaseComponentProps } from './base';
 import { BaseStyleProps } from './style';
+/**
+ * @deprecated will be removed in a future major version
+ */
 export type IsAny<Type> = (Type extends never ? true : false) extends false ? false : true;
+/**
+ * @deprecated will be removed in a future major version
+ */
 export type ElementType = React.ElementType;
 type AsProp<Element extends ElementType> = {
     /**
@@ -11,8 +17,14 @@ type AsProp<Element extends ElementType> = {
      */
     as?: Element;
 };
+/**
+ * @deprecated will be removed in a future major version
+ */
 export type PrimitivePropsWithAs<Props extends BaseViewProps, Element extends ElementType> = Omit<Props, 'as'> & AsProp<Element>;
 type PrimitivePropsWithRef<Props extends BaseViewProps, Element extends ElementType> = Omit<Props, 'ref'> & React.RefAttributes<React.ComponentRef<Element>>;
+/**
+ * @deprecated will be removed in a future major version
+ */
 export type PrimitivePropsWithHTMLAttributes<Props extends BaseViewProps, Element extends ElementType> = 
 /**
  * Doing an IsAny<Element> conditional check here makes sure typescript infers the type of `Element`.
@@ -21,40 +33,20 @@ export type PrimitivePropsWithHTMLAttributes<Props extends BaseViewProps, Elemen
  * e.g. In an event handler, onChange((event) => { console.log(event)}), event will be implicitly inferred as any without the check
  */
 IsAny<Element> extends false ? MergeProps<PrimitivePropsWithRef<Props, Element>, React.ComponentPropsWithoutRef<Element>> : any;
+/**
+ * @deprecated will be removed in a future major version
+ */
 export type PrimitiveProps<Props extends BaseViewProps, Element extends ElementType> = PrimitivePropsWithHTMLAttributes<PrimitivePropsWithAs<Props, Element>, Element>;
 /**
- * @see {React.ForwardRefRenderFunction}
- * Modifies return type of `React.ForwardRefRenderFunction`
- * to allow usage in React 16
+ * @deprecated will be removed in a future major version
  */
-interface JSElementForwardRefRenderFunction<T, P = {}> {
-    (props: P, ref: React.ForwardedRef<T>): React.JSX.Element | null;
-    displayName?: string | undefined;
-    /**
-     * defaultProps are not supported on render functions
-     */
-    defaultProps?: never | undefined;
-    /**
-     * propTypes are not supported on render functions
-     */
-    propTypes?: never | undefined;
-}
-export interface Primitive<Props extends BaseViewProps, Element extends ElementType> extends JSElementForwardRefRenderFunction<React.ComponentRef<Element>, Props> {
+export interface Primitive<Props extends BaseViewProps, Element extends ElementType> extends React.ForwardRefRenderFunction<React.ComponentRef<Element>, Props> {
 }
 /**
- * @see {React.ForwardRefExoticComponent}
- * Modifies return type of `React.ForwardRefExoticComponent`
- * to allow usage in React 16
+ * @deprecated will be removed in a future major version
  */
-interface JSXElementForwardRefExoticComponent<P = {}> {
-    (props: P): React.ReactElement | null;
-    defaultProps?: Partial<P> | undefined;
-    displayName?: string | undefined;
-    propTypes?: any;
-    readonly $$typeof: symbol;
-}
-export interface ForwardRefPrimitive<Props extends BaseViewProps, DefaultElement extends ElementType> extends JSXElementForwardRefExoticComponent<PrimitiveProps<Props, DefaultElement>> {
-    <Element extends ElementType = DefaultElement>(props: PrimitiveProps<Props, Element>): React.ReactElement<Props, Element> | null;
+export interface ForwardRefPrimitive<Props extends BaseViewProps, DefaultElement extends ElementType> extends React.ForwardRefExoticComponent<PrimitiveProps<Props, DefaultElement>> {
+    <Element extends ElementType = DefaultElement>(props: PrimitiveProps<Props, Element>): ReturnType<React.ForwardRefExoticComponent<PrimitiveProps<Props, DefaultElement>>>;
 }
 /** @deprecated For internal use only */
 export interface BaseViewProps extends BaseComponentProps, BaseStyleProps, AriaProps {

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.8.0";
+export declare const VERSION = "6.9.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.8.0",
+  "version": "6.9.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -55,11 +55,11 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.7.2",
-    "@aws-amplify/ui-react-core": "3.2.0",
-    "@radix-ui/react-direction": "1.0.0",
-    "@radix-ui/react-dropdown-menu": "1.0.0",
-    "@radix-ui/react-slider": "1.0.0",
+    "@aws-amplify/ui": "6.8.0",
+    "@aws-amplify/ui-react-core": "3.3.0",
+    "@radix-ui/react-direction": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-slider": "^1.2.2",
     "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
     "qrcode": "1.5.0",