@aws-amplify/ui-react 6.1.11 → 6.1.13

package/dist/esm/primitives/Rating/RatingIcon.mjs

@@ -4,7 +4,7 @@ import { View } from '../View/View.mjs';
 
 const RatingIcon = ({ icon, fill, className, }) => {
     return (React.createElement(View, { as: "span", className: ComponentClassName.RatingItem, "aria-hidden": "true" },
-        React.createElement(View, { as: "span", className: classNames(className), color: fill }, icon)));
+        React.createElement(View, { as: "span", className: classNames(ComponentClassName.RatingIcon, className), color: fill }, icon)));
 };
 RatingIcon.displayName = 'RatingIcon';
 

package/dist/esm/primitives/SearchField/SearchField.mjs

@@ -27,7 +27,7 @@ const SearchFieldPrimitive = ({ autoComplete = 'off', className, isDisabled, cle
     const SearchButton = hasSearchButton ? (React.createElement(SearchFieldButton, { isDisabled: isDisabled, onClick: onClick, ref: searchButtonRef, size: size })) : undefined;
     const SearchIcon = hasSearchIcon ? (React.createElement(FieldGroupIcon, null,
         React.createElement(IconSearch, null))) : undefined;
-    return (React.createElement(TextField, { autoComplete: autoComplete, className: classNames(ComponentClassName.SearchField, className), labelHidden: labelHidden, innerStartComponent: SearchIcon, innerEndComponent: React.createElement(FieldClearButton, { ariaLabel: clearButtonLabel, excludeFromTabOrder: true, isVisible: !isDisabled && strHasLength(composedValue), onClick: onClearHandler, size: size, variation: "link" }), isDisabled: isDisabled, name: name, onChange: handleOnChange, onKeyDown: onKeyDown, outerEndComponent: SearchButton, ref: composedRefs, size: size, value: composedValue, ...rest }));
+    return (React.createElement(TextField, { autoComplete: autoComplete, className: classNames(ComponentClassName.SearchField, className), labelHidden: labelHidden, innerStartComponent: SearchIcon, innerEndComponent: React.createElement(FieldClearButton, { ariaLabel: clearButtonLabel, isVisible: !isDisabled && strHasLength(composedValue), onClick: onClearHandler, size: size, variation: "link" }), isDisabled: isDisabled, name: name, onChange: handleOnChange, onKeyDown: onKeyDown, outerEndComponent: SearchButton, ref: composedRefs, size: size, value: composedValue, ...rest }));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/searchfield)

package/dist/esm/primitives/Select/Select.mjs

@@ -23,7 +23,7 @@ const SelectPrimitive = ({ autoComplete, className, size, variation, value, defa
                 : defaultValue, isDisabled: isFieldsetDisabled ? isFieldsetDisabled : isDisabled, multiple: isMultiple, size: selectSize, required: isRequired, className: componentClasses, ref: ref, ...rest },
             placeholder && React.createElement("option", { value: "" }, placeholder),
             children),
-        isExpanded ? null : (React.createElement(Flex, { className: classNames(ComponentClassName.SelectIcon, classNameModifier(ComponentClassName.SelectIcon, size)), color: iconColor }, icon ?? icons?.expand ?? React.createElement(IconExpandMore, null)))));
+        isExpanded ? null : (React.createElement(Flex, { className: classNames(ComponentClassName.SelectIcon, classNameModifier(ComponentClassName.SelectIcon, size)), color: iconColor, "aria-hidden": "true" }, icon ?? icons?.expand ?? React.createElement(IconExpandMore, null)))));
 };
 const Select = primitiveWithForwardRef(SelectPrimitive);
 Select.displayName = 'Select';

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '6.1.11';
+const VERSION = '6.1.13';
 
 export { VERSION };

package/dist/index.js

@@ -553,7 +553,7 @@ const SearchFieldPrimitive = ({ autoComplete = 'off', className, isDisabled, cle
     const SearchButton = hasSearchButton ? (React__namespace.createElement(SearchFieldButton, { isDisabled: isDisabled, onClick: onClick, ref: searchButtonRef, size: size })) : undefined;
     const SearchIcon = hasSearchIcon ? (React__namespace.createElement(Field.FieldGroupIcon, null,
         React__namespace.createElement(Field.IconSearch, null))) : undefined;
-    return (React__namespace.createElement(TextField, { autoComplete: autoComplete, className: ui.classNames(ui.ComponentClassName.SearchField, className), labelHidden: labelHidden, innerStartComponent: SearchIcon, innerEndComponent: React__namespace.createElement(Field.FieldClearButton, { ariaLabel: clearButtonLabel, excludeFromTabOrder: true, isVisible: !isDisabled && Field.strHasLength(composedValue), onClick: onClearHandler, size: size, variation: "link" }), isDisabled: isDisabled, name: name, onChange: handleOnChange, onKeyDown: onKeyDown, outerEndComponent: SearchButton, ref: composedRefs, size: size, value: composedValue, ...rest }));
+    return (React__namespace.createElement(TextField, { autoComplete: autoComplete, className: ui.classNames(ui.ComponentClassName.SearchField, className), labelHidden: labelHidden, innerStartComponent: SearchIcon, innerEndComponent: React__namespace.createElement(Field.FieldClearButton, { ariaLabel: clearButtonLabel, isVisible: !isDisabled && Field.strHasLength(composedValue), onClick: onClearHandler, size: size, variation: "link" }), isDisabled: isDisabled, name: name, onChange: handleOnChange, onKeyDown: onKeyDown, outerEndComponent: SearchButton, ref: composedRefs, size: size, value: composedValue, ...rest }));
 };
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/components/searchfield)
@@ -1501,7 +1501,7 @@ const SelectPrimitive = ({ autoComplete, className, size, variation, value, defa
                 : defaultValue, isDisabled: isFieldsetDisabled ? isFieldsetDisabled : isDisabled, multiple: isMultiple, size: selectSize, required: isRequired, className: componentClasses, ref: ref, ...rest },
             placeholder && React__namespace.createElement("option", { value: "" }, placeholder),
             children),
-        isExpanded ? null : (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.SelectIcon, ui.classNameModifier(ui.ComponentClassName.SelectIcon, size)), color: iconColor }, icon ?? icons?.expand ?? React__namespace.createElement(Field.IconExpandMore, null)))));
+        isExpanded ? null : (React__namespace.createElement(Field.Flex, { className: ui.classNames(ui.ComponentClassName.SelectIcon, ui.classNameModifier(ui.ComponentClassName.SelectIcon, size)), color: iconColor, "aria-hidden": "true" }, icon ?? icons?.expand ?? React__namespace.createElement(Field.IconExpandMore, null)))));
 };
 const Select = Field.primitiveWithForwardRef(SelectPrimitive);
 Select.displayName = 'Select';
@@ -1656,7 +1656,7 @@ const isIconMixed = (currentIconIndex, ratingValue) => {
 
 const RatingIcon = ({ icon, fill, className, }) => {
     return (React__namespace.createElement(Field.View, { as: "span", className: ui.ComponentClassName.RatingItem, "aria-hidden": "true" },
-        React__namespace.createElement(Field.View, { as: "span", className: ui.classNames(className), color: fill }, icon)));
+        React__namespace.createElement(Field.View, { as: "span", className: ui.classNames(ui.ComponentClassName.RatingIcon, className), color: fill }, icon)));
 };
 RatingIcon.displayName = 'RatingIcon';
 
@@ -2383,7 +2383,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.1.11';
+const VERSION = '6.1.13';
 
 const logger$2 = ui.getLogger('AccountSettings');
 const getIsDisabled = (formValues, validationError) => {

package/dist/styles/rating.css

@@ -1,5 +1,5 @@
 .amplify-rating {
-  display: inline-flex;
+  display: flex;
   position: relative;
   text-align: left;
   font-size: var(--amplify-components-rating-default-size);

package/dist/styles/rating.layer.css

@@ -1,6 +1,6 @@
 @layer amplify.components {
 .amplify-rating {
-  display: inline-flex;
+  display: flex;
   position: relative;
   text-align: left;
   font-size: var(--amplify-components-rating-default-size);

package/dist/styles.css

@@ -4682,7 +4682,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-rating {
-  display: inline-flex;
+  display: flex;
   position: relative;
   text-align: left;
   font-size: var(--amplify-components-rating-default-size);

package/dist/styles.layer.css

@@ -4683,7 +4683,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-rating {
-  display: inline-flex;
+  display: flex;
   position: relative;
   text-align: left;
   font-size: var(--amplify-components-rating-default-size);

package/dist/types/context/elements/ElementsContext.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { ElementDisplayName } from './types';
+export interface Elements extends Partial<Record<ElementDisplayName, React.ComponentType>> {
+}
+/**
+ * `ElementsProvider` and its coresponding `useElement` hook provide
+ * access to the values of the nearest ancestral `ElementsContext`
+ * value.
+ *
+ * In most use cases, there is no need to directly invoke `useElement`;
+ * `ElementsContext` lookup is handled directly by `BaseElement`
+ * components returned by `defineBaseElement`.
+ *
+ * @example
+ *
+ * Add `ElementsContext` aware `BaseElement` components to a
+ * Connected Component
+ *
+ * ```tsx
+ * // `BaseElement`, renders custom or default element defintion
+ * const ViewElement = defineBaseElement({
+ *   displayName: "View",
+ *   type: "div",
+ * });
+ *
+ * // `BaseElement` components to be provided through `ElementsContext`
+ * interface ConnectedComponentElements {
+ *   View: typeof ViewElement;
+ * }
+ *
+ * function createConnectedComponent<T extends ConnectedComponentElements>(
+ *   elements?: T
+ * ) {
+ *   const Provider = ({ children }: { children?: React.ReactNode }) => (
+ *     <ElementsProvider elements={elements}>
+ *       <Children />
+ *     </ElementsProvider>
+ *   );
+ *
+ *   function ConnectedComponent() {
+ *     return (
+ *       <Provider>
+ *         <ConnectedComponentContent />
+ *       </Provider>
+ *     );
+ *   }
+ *
+ *   ConnectedComponent.Provider = Provider;
+ *
+ *   return ConnectedComponent;
+ * }
+ * ```
+ */
+export declare function ElementsProvider<T extends Elements>({ elements, ...props }: {
+    children?: React.ReactNode;
+    elements?: T;
+}): React.JSX.Element;
+export declare const useElement: <T extends keyof Elements>(name: T) => Elements[T] | undefined;

package/dist/types/context/elements/defineBaseElement.d.ts

@@ -0,0 +1,26 @@
+import { BaseElement, BaseElementProps, ElementDisplayName, ElementRefType, ReactElementProps, ReactElementType } from './types';
+export interface DefineBaseElementInput<T> {
+    /**
+     * `BaseElement` display name in React dev tools and stack traces
+     */
+    displayName: ElementDisplayName;
+    /**
+     * base HTML `element` type
+     */
+    type: T;
+}
+/**
+ * Defines a `ElementsContext` aware `BaseElement` UI component of the
+ * provided `type` with an assigned `displayName`.
+ *
+ * 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 {BaseElement} `ElementsContext` aware UI component
+ */
+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>>;

package/dist/types/context/elements/index.d.ts

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

package/dist/types/context/elements/types.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+/**
+ * Base type definition of `BaseElement` components available through
+ * `ElementsContext`. The definitions define a contract between a
+ * Connected Component and the `elements` that can be provided as
+ * overrides.
+ *
+ * `BaseElement` interfaces surface a minimal set of HTML semantic `props`
+ * required to achieve the base functionality of consumers. `props`
+ * 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<React.PropsWithoutRef<T> & React.RefAttributes<K>>;
+/**
+ * allowed values of `displayName` of `BaseElement` and `ElemebtsContext` keys
+ */
+export type ElementDisplayName = 'Button' | 'View' | 'Icon' | 'Input' | 'Span';
+export type ElementRefType<T> = T extends {
+    ref?: React.LegacyRef<infer K> | React.Ref<infer K> | React.ForwardedRef<infer K>;
+} ? K : never;
+export type ReactElementType = keyof React.JSX.IntrinsicElements;
+export type ReactElementProps<T extends ReactElementType> = React.JSX.IntrinsicElements[T];
+/**
+ * key of `props` always available on `BaseElement` definitions
+ */
+type ElementPropKey<T> = T | 'children' | 'className' | 'style';
+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>> & {
+    testId?: string;
+    variant?: V;
+};
+export {};

package/dist/types/context/elements/withBaseElementProps.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { BaseElement, ElementRefType } from './types';
+/**
+ * Extend target `BaseElement` with `defaultProps`. `defaultProps`
+ * are overidden by `props` provided to returned `BaseElement`.
+ *
+ * @example
+ *
+ * Extend `InputElement` with default `className` and `type`
+ * ```tsx
+ *
+ * // define extended `props` on `BaseElement` interface
+ * type InputElementPropKey = 'onChange' | 'type';
+ *
+ * // create `InputElement` base with `type` generic and extended `props` key
+ * export const InputElement = defineBaseElement<"input", InputElementPropKey>({
+ *   type: "input",
+ *   displayName: "Input",
+ * });
+ *
+ * // extend base `InputElement` with default input `type` of `checkbox`
+ * const CheckboxElement = withBaseElementProps(Input, {
+ *   className: 'submit-toggle__checkbox',
+ *   type: 'checkbox',
+ * });
+ * ```
+ *
+ * @param Target `BaseElement` to extend
+ * @param defaultProps `defaultProps` to apply to `Target`, accepts object or callback
+ * @returns extended `BaseElement` with `defaultProps`
+ */
+export default function withBaseElementProps<T, K extends T | (() => T)>(Target: React.ForwardRefExoticComponent<T>, defaultProps: K): BaseElement<T, ElementRefType<T>>;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.1.11";
+export declare const VERSION = "6.1.13";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "6.1.11",
+  "version": "6.1.13",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -49,8 +49,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "6.0.16",
-    "@aws-amplify/ui-react-core": "3.0.16",
+    "@aws-amplify/ui": "6.0.17",
+    "@aws-amplify/ui-react-core": "3.0.17",
     "@radix-ui/react-direction": "1.0.0",
     "@radix-ui/react-dropdown-menu": "1.0.0",
     "@radix-ui/react-slider": "1.0.0",