@aws-amplify/ui-react 3.5.9 → 3.5.11

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Tue, 18 Oct 2022 22:43:02 GMT
+ * Generated on Tue, 01 Nov 2022 23:04:11 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);
@@ -677,6 +677,7 @@
   --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary);
   --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-switchfield-track-error-background-color: var(--amplify-colors-background-error);
   --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-80);
   --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary);
   --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
@@ -957,12 +958,14 @@
   --amplify-components-collection-search-button-active-color: var(--amplify-components-searchfield-button-active-color);
 }
 
-html {
+html,
+[data-amplify-theme] {
   font-family: var(--amplify-fonts-default-static);
 }
 
 @supports (font-variation-settings: normal) {
-  html {
+  html,
+[data-amplify-theme] {
     font-family: var(--amplify-fonts-default-variable);
   }
 }
@@ -1651,21 +1654,16 @@ strong.amplify-text {
 }
 .amplify-loader circle:last-of-type {
   transform-origin: center center;
-  -webkit-animation-name: amplify-loader-circular;
-          animation-name: amplify-loader-circular;
-  -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
-  -webkit-animation-duration: var(--amplify-components-loader-animation-duration);
-          animation-duration: var(--amplify-components-loader-animation-duration);
+  animation-name: amplify-loader-circular;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-duration: var(--amplify-components-loader-animation-duration);
   stroke: var(--amplify-components-loader-stroke-filled);
   stroke-linecap: var(--amplify-components-loader-stroke-linecap);
 }
 @media (prefers-reduced-motion) {
   .amplify-loader circle:last-of-type {
-    -webkit-animation: none;
-            animation: none;
+    animation: none;
     stroke-dasharray: 100% 200%;
     stroke-dashoffset: 50%;
   }
@@ -1673,19 +1671,14 @@ strong.amplify-text {
 .amplify-loader line:last-of-type {
   stroke: var(--amplify-components-loader-linear-stroke-filled);
   stroke-dasharray: 50% 200%;
-  -webkit-animation-name: amplify-loader-linear;
-          animation-name: amplify-loader-linear;
-  -webkit-animation-duration: var(--amplify-components-loader-linear-animation-duration);
-          animation-duration: var(--amplify-components-loader-linear-animation-duration);
-  -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
+  animation-name: amplify-loader-linear;
+  animation-duration: var(--amplify-components-loader-linear-animation-duration);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
 }
 @media (prefers-reduced-motion) {
   .amplify-loader line:last-of-type {
-    -webkit-animation: none;
-            animation: none;
+    animation: none;
     stroke-dashoffset: -50%;
   }
 }
@@ -1720,13 +1713,11 @@ strong.amplify-text {
   font-size: var(--amplify-internal-loader-linear-font-size);
 }
 .amplify-loader--determinate circle:last-of-type {
-  -webkit-animation: none;
-          animation: none;
+  animation: none;
   transform: rotate(-90deg);
 }
 .amplify-loader--determinate line:last-of-type {
-  -webkit-animation: none;
-          animation: none;
+  animation: none;
   stroke-dashoffset: 0%;
   stroke-dasharray: none;
 }
@@ -1735,20 +1726,6 @@ strong.amplify-text {
   stroke: none;
 }
 
-@-webkit-keyframes amplify-loader-circular {
-  0% {
-    stroke-dasharray: 100% 200%;
-    transform: rotate(120deg);
-  }
-  50% {
-    stroke-dasharray: 20% 400%;
-  }
-  100% {
-    stroke-dasharray: 100% 200%;
-    transform: rotate(480deg);
-  }
-}
-
 @keyframes amplify-loader-circular {
   0% {
     stroke-dasharray: 100% 200%;
@@ -1762,14 +1739,6 @@ strong.amplify-text {
     transform: rotate(480deg);
   }
 }
-@-webkit-keyframes amplify-loader-linear {
-  0% {
-    stroke-dashoffset: 200%;
-  }
-  100% {
-    stroke-dashoffset: -50%;
-  }
-}
 @keyframes amplify-loader-linear {
   0% {
     stroke-dashoffset: 200%;
@@ -1779,14 +1748,10 @@ strong.amplify-text {
   }
 }
 .amplify-placeholder {
-  -webkit-animation-direction: alternate;
-          animation-direction: alternate;
-  -webkit-animation-duration: var(--amplify-components-placeholder-transition-duration);
-          animation-duration: var(--amplify-components-placeholder-transition-duration);
-  -webkit-animation-iteration-count: infinite;
-          animation-iteration-count: infinite;
-  -webkit-animation-name: amplify-placeholder-loading;
-          animation-name: amplify-placeholder-loading;
+  animation-direction: alternate;
+  animation-duration: var(--amplify-components-placeholder-transition-duration);
+  animation-iteration-count: infinite;
+  animation-name: amplify-placeholder-loading;
   border-radius: var(--amplify-components-placeholder-border-radius);
   height: var(--amplify-components-placeholder-default-height);
   width: 100%;
@@ -1799,15 +1764,6 @@ strong.amplify-text {
   height: var(--amplify-components-placeholder-large-height);
 }
 
-@-webkit-keyframes amplify-placeholder-loading {
-  0% {
-    background-color: var(--amplify-components-placeholder-start-color);
-  }
-  100% {
-    background-color: var(--amplify-components-placeholder-end-color);
-  }
-}
-
 @keyframes amplify-placeholder-loading {
   0% {
     background-color: var(--amplify-components-placeholder-start-color);
@@ -1818,8 +1774,7 @@ strong.amplify-text {
 }
 @media (prefers-reduced-motion: reduce) {
   .amplify-placeholder {
-    -webkit-animation: none;
-            animation: none;
+    animation: none;
     background-color: var(--amplify-components-placeholder-end-color);
   }
 }
@@ -2276,20 +2231,14 @@ strong.amplify-text {
           padding-inline-end: var(--amplify-components-expander-content-padding-inline-end);
 }
 .amplify-expander__content[data-state=open] {
-  -webkit-animation-name: amplify-expander-slide-down;
-          animation-name: amplify-expander-slide-down;
-  -webkit-animation-duration: var(--amplify-components-expander-content-open-animation-duration);
-          animation-duration: var(--amplify-components-expander-content-open-animation-duration);
-  -webkit-animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
-          animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
+  animation-name: amplify-expander-slide-down;
+  animation-duration: var(--amplify-components-expander-content-open-animation-duration);
+  animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
 }
 .amplify-expander__content[data-state=closed] {
-  -webkit-animation-name: amplify-expander-slide-up;
-          animation-name: amplify-expander-slide-up;
-  -webkit-animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
-          animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
-  -webkit-animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
-          animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
+  animation-name: amplify-expander-slide-up;
+  animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
+  animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
 }
 
 .amplify-expander__content__text {
@@ -2310,15 +2259,6 @@ strong.amplify-text {
   transform: rotate(180deg);
 }
 
-@-webkit-keyframes amplify-expander-slide-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: auto;
-  }
-}
-
 @keyframes amplify-expander-slide-down {
   from {
     height: 0;
@@ -2327,14 +2267,6 @@ strong.amplify-text {
     height: auto;
   }
 }
-@-webkit-keyframes amplify-expander-slide-up {
-  from {
-    height: auto;
-  }
-  to {
-    height: 0;
-  }
-}
 @keyframes amplify-expander-slide-up {
   from {
     height: auto;
@@ -2384,6 +2316,7 @@ strong.amplify-text {
 
 .amplify-field-group {
   gap: var(--amplify-components-fieldgroup-gap);
+  align-self: stretch;
 }
 .amplify-field-group--horizontal {
   flex-direction: row;
@@ -2433,7 +2366,6 @@ strong.amplify-text {
   width: 100%;
 }
 .amplify-field-group__field-wrapper--vertical {
-  width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
 }
@@ -2876,6 +2808,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   display: var(--amplify-components-select-wrapper-display);
   position: var(--amplify-components-select-wrapper-position);
   cursor: var(--amplify-components-select-wrapper-cursor);
+  align-self: stretch;
 }
 
 .amplify-select__icon-wrapper {
@@ -3286,6 +3219,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-switch-track--focused {
   box-shadow: var(--amplify-components-switchfield-focused-shadow);
 }
+.amplify-switch-track--error {
+  background-color: var(--amplify-components-switchfield-track-error-background-color);
+}
 
 .amplify-switch-thumb {
   background-color: var(--amplify-components-switchfield-thumb-background-color);

package/dist/types/hooks/actions/shared/types.d.ts

@@ -1,4 +1,4 @@
-import { PersistentModel, PersistentModelConstructor, ModelInit, Schema } from '@aws-amplify/datastore';
+import { PersistentModel, PersistentModelConstructor, ModelInit, PersistentModelMetaData, Schema } from '@aws-amplify/datastore';
 /**
  * Converts a Model's field values to types supported by
  * Amplify UI field components. This is required
@@ -8,7 +8,7 @@ import { PersistentModel, PersistentModelConstructor, ModelInit, Schema } from '
 declare type ModelFields<Type> = {
     [Property in keyof Type]: string | number | boolean;
 };
-export declare type DataStoreActionFields<Model> = ModelInit<Model> | ModelFields<ModelInit<Model>>;
+export declare type DataStoreActionFields<Model> = ModelInit<Model, PersistentModelMetaData<Model>> | ModelFields<ModelInit<Model, PersistentModelMetaData<Model>>>;
 export interface UseDataStoreActionOptions<Model extends PersistentModel> {
     model: PersistentModelConstructor<Model>;
     /**
@@ -23,5 +23,5 @@ export interface UseDataStoreActionOptions<Model extends PersistentModel> {
      */
     schema?: Schema;
 }
-export declare function isAlreadyTyped<Model>(fields: DataStoreActionFields<Model>, schema: Schema): fields is ModelInit<Model>;
+export declare function isAlreadyTyped<Model>(fields: DataStoreActionFields<Model>, schema: Schema): fields is ModelInit<Model, PersistentModelMetaData<Model>>;
 export {};

package/dist/types/hooks/actions/shared/useTypeCastFields.d.ts

@@ -1,17 +1,15 @@
-import { ModelInit, Schema } from '@aws-amplify/datastore';
+import { ModelInit, PersistentModelMetaData, Schema } from '@aws-amplify/datastore';
 import { DataStoreActionFields } from './types';
 interface UseTypeCastFieldsProps<Model> {
     fields: DataStoreActionFields<Model>;
     modelName: string;
     schema: Schema;
 }
-declare type UseTypeCastFieldsReturn<Model> = ModelInit<Model> | undefined;
+declare type UseTypeCastFieldsReturn<Model> = ModelInit<Model, PersistentModelMetaData<Model>> | undefined;
 /**
  * Optimistically casts field string values to types required by
  * datastore based on the schema type
  * @see: See https://docs.aws.amazon.com/appsync/latest/devguide/scalars.html
  */
-export declare const useTypeCastFields: <Model>({ fields, modelName, schema, }: UseTypeCastFieldsProps<Model>) => ModelInit<Model, {
-    readOnlyFields: "createdAt" | "updatedAt";
-}>;
+export declare const useTypeCastFields: <Model>({ fields, modelName, schema, }: UseTypeCastFieldsProps<Model>) => ModelInit<Model, PersistentModelMetaData<Model>>;
 export {};

package/dist/types/hooks/actions/useDataStoreCreateAction.d.ts

@@ -6,6 +6,4 @@ export interface UseDataStoreCreateActionOptions<Model extends PersistentModel>
  * Action to Create DataStore item
  * @internal
  */
-export declare const useDataStoreCreateAction: <Model extends Readonly<{
-    id: string;
-} & Record<string, any>>>({ model, fields, schema, }: UseDataStoreCreateActionOptions<Model>) => (() => Promise<void>);
+export declare const useDataStoreCreateAction: <Model extends Readonly<Record<string, any>>>({ model, fields: initialFields, schema, }: UseDataStoreCreateActionOptions<Model>) => (() => Promise<void>);

package/dist/types/hooks/actions/useDataStoreDeleteAction.d.ts

@@ -1,12 +1,10 @@
-import { PersistentModel, PersistentModelConstructor } from '@aws-amplify/datastore';
+import { PersistentModel, PersistentModelConstructor, PersistentModelMetaData, IdentifierFieldOrIdentifierObject } from '@aws-amplify/datastore';
 export interface UseDataStoreDeleteActionOptions<Model extends PersistentModel> {
     model: PersistentModelConstructor<Model>;
-    id: string;
+    id: IdentifierFieldOrIdentifierObject<Model, PersistentModelMetaData<Model>>;
 }
 /**
  * Action to Delete DataStore item
  * @internal
  */
-export declare const useDataStoreDeleteAction: <Model extends Readonly<{
-    id: string;
-} & Record<string, any>>>({ model, id, }: UseDataStoreDeleteActionOptions<Model>) => (() => Promise<void>);
+export declare const useDataStoreDeleteAction: <Model extends Readonly<Record<string, any>>>({ model, id, }: UseDataStoreDeleteActionOptions<Model>) => (() => Promise<void>);

package/dist/types/hooks/actions/useDataStoreUpdateAction.d.ts

@@ -1,12 +1,10 @@
-import { PersistentModel } from '@aws-amplify/datastore';
+import { IdentifierFieldOrIdentifierObject, PersistentModel, PersistentModelMetaData } from '@aws-amplify/datastore';
 import { UseDataStoreActionOptions } from './shared/types';
 export interface UseDataStoreUpdateActionOptions<Model extends PersistentModel> extends UseDataStoreActionOptions<Model> {
-    id: string;
+    id: IdentifierFieldOrIdentifierObject<Model, PersistentModelMetaData<Model>>;
 }
 /**
  * Action to Update DataStore item
  * @internal
  */
-export declare const useDataStoreUpdateAction: <Model extends Readonly<{
-    id: string;
-} & Record<string, any>>>({ fields, id, model, schema, }: UseDataStoreUpdateActionOptions<Model>) => (() => Promise<void>);
+export declare const useDataStoreUpdateAction: <Model extends Readonly<Record<string, any>>>({ fields: initialFields, id, model, schema, }: UseDataStoreUpdateActionOptions<Model>) => (() => Promise<void>);

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

@@ -4,16 +4,12 @@ import { DataStoreBindingProps, DataStoreCollectionProps, DataStoreCollectionRes
  * Perform a collection query against a DataStore model
  * @internal
  */
-export declare const useDataStoreCollection: <M extends Readonly<{
-    id: string;
-} & Record<string, any>>>({ model, criteria, pagination, }: DataStoreCollectionProps<M>) => DataStoreCollectionResult<M>;
+export declare const useDataStoreCollection: <M extends Readonly<Record<string, any>>>({ model, criteria, pagination, }: DataStoreCollectionProps<M>) => DataStoreCollectionResult<M>;
 /**
  * Perform a single record query against a DataStore model
  * @internal
  */
-export declare const useDataStoreItem: <M extends Readonly<{
-    id: string;
-} & Record<string, any>>>({ model, id, }: DataStoreItemProps<M>) => DataStoreItemResult<M>;
+export declare const useDataStoreItem: <M extends Readonly<Record<string, any>>>({ model, id, }: DataStoreItemProps<M>) => DataStoreItemResult<M>;
 /**
  * Perform a query against a DataStore model
  * @internal

package/dist/types/primitives/StepperField/useStepper.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StepperFieldProps } from '../types/stepperField';
-export declare const useStepper: ({ defaultValue, value, step, max, min, isDisabled, isReadOnly, onDecrease, onIncrease, onStepChange, }: StepperFieldProps) => {
+export declare const useStepper: ({ defaultValue, value: controlledValue, step, max, min, isDisabled, isReadOnly, onDecrease, onIncrease, onStepChange, }: StepperFieldProps) => {
     step: number;
     value: number;
     inputValue: string | number;

package/dist/types/primitives/shared/datastore.d.ts

@@ -4,6 +4,4 @@ import { DataStorePredicateObject } from '../types/datastore';
  * Creates a DataStore compatible predicate function from an object representation
  * @internal
  */
-export declare const createDataStorePredicate: <Model extends Readonly<{
-    id: string;
-} & Record<string, any>>>(predicateObject: DataStorePredicateObject) => ProducerModelPredicate<Model>;
+export declare const createDataStorePredicate: <Model extends Readonly<Record<string, any>>>(predicateObject: DataStorePredicateObject) => ProducerModelPredicate<Model>;

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

@@ -1,122 +1,6 @@
+import { ComponentClassName } from '@aws-amplify/ui';
 declare type ComponentNameKey = 'Alert' | 'Badge' | 'Button' | 'Button' | 'Card' | 'Checkbox' | 'CheckboxField' | 'Collection' | 'PhoneNumberField' | 'Divider' | 'Expander' | 'Flex' | 'Grid' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'Loader' | 'Menu' | 'Pagination' | 'PasswordField' | 'PhoneNumberField' | 'Placeholder' | 'Radio' | 'RadioGroupField' | 'Rating' | 'ScrollView' | 'SearchField' | 'Select' | 'SliderField' | 'SelectField' | 'StepperField' | 'SwitchField' | 'Table' | 'Tabs' | 'Text' | 'TextAreaField' | 'TextField' | 'ToggleButton' | 'ToggleButtonGroup' | 'VisuallyHidden';
 declare type ComponentClassNameKey = 'Alert' | 'AlertIcon' | 'AlertHeading' | 'AlertBody' | 'AlertDismiss' | 'Badge' | 'Button' | 'ButtonGroup' | 'ButtonLoaderWrapper' | 'Card' | 'Checkbox' | 'CheckboxButton' | 'CheckboxIcon' | 'CheckboxInput' | 'CheckboxLabel' | 'CheckboxField' | 'Collection' | 'CollectionItems' | 'CollectionSearch' | 'CollectionPagination' | 'CountryCodeSelect' | 'DialCodeSelect' | 'Divider' | 'DividerLabel' | 'Expander' | 'ExpanderContent' | 'ExpanderContentText' | 'ExpanderHeader' | 'ExpanderIcon' | 'ExpanderItem' | 'ExpanderTrigger' | 'Field' | 'FieldDescription' | 'FieldErrorMessage' | 'FieldGroup' | 'FieldGroupControl' | 'FieldGroupOuterEnd' | 'FieldGroupOuterStart' | 'FieldGroupInnerEnd' | 'FieldGroupInnerStart' | 'FieldGroupIcon' | 'FieldGroupIconButton' | 'FieldGroupHasInnerEnd' | 'FieldGroupHasInnerStart' | 'FieldShowPassword' | 'FieldGroupFieldWrapper' | 'Flex' | 'Grid' | 'Heading' | 'Icon' | 'Image' | 'Input' | 'Label' | 'Link' | 'Loader' | 'LoaderDeterminate' | 'LoaderPercentageText' | 'MenuContent' | 'MenuItem' | 'MenuTrigger' | 'Pagination' | 'PaginationItemButton' | 'PaginationItemCurrent' | 'PaginationItemEllipsis' | 'PasswordField' | 'PhoneNumberField' | 'Placeholder' | 'Radio' | 'RadioButton' | 'RadioInput' | 'RadioLabel' | 'RadioGroupField' | 'RadioGroup' | 'Rating' | 'ScrollView' | 'SearchField' | 'SearchFieldClear' | 'SearchFieldSearch' | 'Select' | 'SelectField' | 'SelectWrapper' | 'SelectIconWrapper' | 'SliderField' | 'SliderFieldGroup' | 'SliderFieldLabel' | 'SliderFieldRange' | 'SliderFieldRoot' | 'SliderFieldThumb' | 'SliderFieldTrack' | 'StepperField' | 'StepperFieldButtonDecrease' | 'StepperFieldButtonIncrease' | 'StepperFieldInput' | 'SwitchField' | 'SwitchLabel' | 'SwitchThumb' | 'SwitchTrack' | 'SwitchWrapper' | 'Table' | 'TableCaption' | 'TableBody' | 'TableTd' | 'TableTh' | 'TableFoot' | 'TableHead' | 'TableRow' | 'Tabs' | 'TabItems' | 'Text' | 'Textarea' | 'TextAreaField' | 'TextField' | 'ToggleButton' | 'ToggleButtonGroup' | 'VisuallyHidden';
-export declare enum ComponentClassName {
-    Alert = "amplify-alert",
-    AlertIcon = "amplify-alert__icon",
-    AlertHeading = "amplify-alert__heading",
-    AlertBody = "amplify-alert__body",
-    AlertDismiss = "amplify-alert__dismiss",
-    Badge = "amplify-badge",
-    Button = "amplify-button",
-    ButtonGroup = "amplify-buttongroup",
-    ButtonLoaderWrapper = "amplify-button__loader-wrapper",
-    Card = "amplify-card",
-    Checkbox = "amplify-checkbox",
-    CheckboxButton = "amplify-checkbox__button",
-    CheckboxIcon = "amplify-checkbox__icon",
-    CheckboxInput = "amplify-checkbox__input",
-    CheckboxLabel = "amplify-checkbox__label",
-    CheckboxField = "amplify-checkboxfield",
-    Collection = "amplify-collection",
-    CollectionItems = "amplify-collection-items",
-    CollectionSearch = "amplify-collection-search",
-    CollectionPagination = "amplify-collection-pagination",
-    CountryCodeSelect = "amplify-countrycodeselect",
-    DialCodeSelect = "amplify-dialcodeselect",
-    Divider = "amplify-divider",
-    DividerLabel = "amplify-divider--label",
-    Expander = "amplify-expander",
-    ExpanderContent = "amplify-expander__content",
-    ExpanderContentText = "amplify-expander__content__text",
-    ExpanderHeader = "amplify-expander__header",
-    ExpanderIcon = "amplify-expander__icon",
-    ExpanderItem = "amplify-expander__item",
-    ExpanderTrigger = "amplify-expander__trigger",
-    Field = "amplify-field",
-    FieldDescription = "amplify-field__description",
-    FieldErrorMessage = "amplify-field__error-message",
-    FieldGroup = "amplify-field-group",
-    FieldGroupControl = "amplify-field-group__control",
-    FieldGroupOuterEnd = "amplify-field-group__outer-end",
-    FieldGroupOuterStart = "amplify-field-group__outer-start",
-    FieldGroupInnerEnd = "amplify-field-group__inner-end",
-    FieldGroupInnerStart = "amplify-field-group__inner-start",
-    FieldGroupIcon = "amplify-field-group__icon",
-    FieldGroupIconButton = "amplify-field-group__icon-button",
-    FieldGroupHasInnerEnd = "amplify-field-group--has-inner-end",
-    FieldGroupHasInnerStart = "amplify-field-group--has-inner-start",
-    FieldShowPassword = "amplify-field__show-password",
-    FieldGroupFieldWrapper = "amplify-field-group__field-wrapper",
-    Flex = "amplify-flex",
-    Grid = "amplify-grid",
-    Heading = "amplify-heading",
-    Icon = "amplify-icon",
-    Image = "amplify-image",
-    Input = "amplify-input",
-    Label = "amplify-label",
-    Link = "amplify-link",
-    Loader = "amplify-loader",
-    LoaderDeterminate = "amplify-loader--determinate",
-    LoaderPercentageText = "amplify-loader__percentage-text",
-    MenuContent = "amplify-menu-content",
-    MenuItem = "amplify-menu-content__item",
-    MenuTrigger = "amplify-menu-trigger",
-    Pagination = "amplify-pagination",
-    PaginationItemButton = "amplify-pagination__item-button",
-    PaginationItemCurrent = "amplify-pagination__item-current",
-    PaginationItemEllipsis = "amplify-pagination__item-ellipsis",
-    PasswordField = "amplify-passwordfield",
-    PhoneNumberField = "amplify-phonenumberfield",
-    Placeholder = "amplify-placeholder",
-    Radio = "amplify-radio",
-    RadioButton = "amplify-radio__button",
-    RadioInput = "amplify-radio__input",
-    RadioLabel = "amplify-radio__label",
-    RadioGroupField = "amplify-radiogroupfield",
-    RadioGroup = "amplify-radiogroup",
-    Rating = "amplify-rating",
-    ScrollView = "amplify-scrollview",
-    SearchField = "amplify-searchfield",
-    SearchFieldClear = "amplify-searchfield__clear",
-    SearchFieldSearch = "amplify-searchfield__search",
-    Select = "amplify-select",
-    SelectField = "amplify-selectfield",
-    SelectWrapper = "amplify-select__wrapper",
-    SelectIconWrapper = "amplify-select__icon-wrapper",
-    SliderField = "amplify-sliderfield",
-    SliderFieldGroup = "amplify-sliderfield__group",
-    SliderFieldLabel = "amplify-sliderfield__label",
-    SliderFieldRange = "amplify-sliderfield__range",
-    SliderFieldRoot = "amplify-sliderfield__root",
-    SliderFieldThumb = "amplify-sliderfield__thumb",
-    SliderFieldTrack = "amplify-sliderfield__track",
-    StepperField = "amplify-stepperfield",
-    StepperFieldButtonDecrease = "amplify-stepperfield__button--decrease",
-    StepperFieldButtonIncrease = "amplify-stepperfield__button--increase",
-    StepperFieldInput = "amplify-stepperfield__input",
-    SwitchField = "amplify-switchfield",
-    SwitchLabel = "amplify-switch-label",
-    SwitchThumb = "amplify-switch-thumb",
-    SwitchTrack = "amplify-switch-track",
-    SwitchWrapper = "amplify-switch__wrapper",
-    Table = "amplify-table",
-    TableCaption = "amplify-table__caption",
-    TableBody = "amplify-table__body",
-    TableTd = "amplify-table__td",
-    TableTh = "amplify-table__th",
-    TableFoot = "amplify-table__foot",
-    TableHead = "amplify-table__head",
-    TableRow = "amplify-table__row",
-    Tabs = "amplify-tabs",
-    TabItems = "amplify-tabs-item",
-    Text = "amplify-text",
-    Textarea = "amplify-textarea",
-    TextAreaField = "amplify-textareafield",
-    TextField = "amplify-textfield",
-    ToggleButton = "amplify-togglebutton",
-    ToggleButtonGroup = "amplify-togglebuttongroup",
-    VisuallyHidden = "amplify-visually-hidden"
-}
 interface ComponentClassNameMetadata {
     className: ComponentClassName;
     components?: ComponentNameKey[];

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

@@ -1,5 +1,5 @@
+import { ComponentClassName } from '@aws-amplify/ui';
 import { ThemeStylePropKey } from '../types/theme';
-import { ComponentClassName } from './types';
 export declare const strHasLength: (str: unknown) => str is string;
 export declare const isFunction: (fn: unknown) => fn is Function;
 export declare const isEmptyString: (value: unknown) => boolean;

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

@@ -1,7 +1,7 @@
-import { PersistentModel, PersistentModelConstructor, ProducerModelPredicate, ProducerPaginationInput } from '@aws-amplify/datastore';
+import { IdentifierFieldOrIdentifierObject, PersistentModel, PersistentModelConstructor, PersistentModelMetaData, ProducerModelPredicate, ProducerPaginationInput } from '@aws-amplify/datastore';
 export declare type DataStoreItemProps<Model extends PersistentModel> = {
     model: PersistentModelConstructor<Model>;
-    id: string;
+    id: IdentifierFieldOrIdentifierObject<Model, PersistentModelMetaData<Model>>;
 };
 export declare type DataStoreCollectionProps<Model extends PersistentModel> = {
     model: PersistentModelConstructor<Model>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "3.5.9",
+  "version": "3.5.11",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -55,8 +55,8 @@
     "size": "yarn run size-limit"
   },
   "dependencies": {
-    "@aws-amplify/ui": "4.0.0",
-    "@aws-amplify/ui-react-core": "1.0.3",
+    "@aws-amplify/ui": "4.0.1",
+    "@aws-amplify/ui-react-core": "1.0.4",
     "@aws-amplify/ui-react-v1": "npm:@aws-amplify/ui-react@1.2.9",
     "@radix-ui/react-accordion": "0.1.6",
     "@radix-ui/react-dropdown-menu": "0.1.6",
@@ -67,7 +67,7 @@
     "lodash": "4.17.21",
     "mapbox-gl": "1.13.1",
     "maplibre-gl": "2.1.9",
-    "maplibre-gl-js-amplify": "2.0.4",
+    "maplibre-gl-js-amplify": "2.1.0",
     "qrcode": "1.5.0",
     "react-generate-context": "1.0.1",
     "react-map-gl": "7.0.15",