@aws-amplify/ui-react 2.15.2 → 2.15.5

package/dist/primitives.json

@@ -7483,6 +7483,10 @@
       "variation": {
         "type": "string"
       },
+      "level": {
+        "type": "number",
+        "priority": true
+      },
       "isTruncated": {
         "type": "boolean"
       }

package/dist/styles.css

@@ -4,7 +4,7 @@
 
 /**
  * Do not edit directly
- * Generated on Mon, 11 Apr 2022 18:40:17 GMT
+ * Generated on Thu, 21 Apr 2022 22:58:20 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -249,7 +249,6 @@
   --amplify-components-menu-item-min-height: 2.5rem;
   --amplify-components-menu-min-width: 14rem;
   --amplify-components-menu-max-width: 30rem;
-  --amplify-components-menu-gap: 0;
   --amplify-components-menu-flex-direction: column;
   --amplify-components-menu-border-style: solid;
   --amplify-components-loader-linear-animation-duration: 1s;
@@ -271,7 +270,6 @@
   --amplify-components-fieldmessages-description-font-style: italic;
   --amplify-components-fieldgroup-outer-align-items: center;
   --amplify-components-fieldgroup-vertical-align-items: center;
-  --amplify-components-fieldgroup-gap: 0;
   --amplify-components-fieldcontrol-disabled-cursor: not-allowed;
   --amplify-components-fieldcontrol-quiet-border-radius: 0;
   --amplify-components-fieldcontrol-quiet-border-block-start: none;
@@ -290,7 +288,6 @@
   --amplify-components-expander-width: 100%;
   --amplify-components-expander-display: block;
   --amplify-components-divider-border-style: solid;
-  --amplify-components-countrycodeselect-height: 100%;
   --amplify-components-checkboxfield-justify-content: center;
   --amplify-components-checkboxfield-flex-direction: column;
   --amplify-components-checkboxfield-align-content: center;
@@ -327,12 +324,10 @@
   --amplify-components-button-link-active-border-color: transparent;
   --amplify-components-button-link-focus-border-color: transparent;
   --amplify-components-button-link-hover-border-color: transparent;
-  --amplify-components-button-link-background-color: transparent;
   --amplify-components-button-link-border-color: transparent;
-  --amplify-components-button-link-border-width: 0;
+  --amplify-components-button-link-background-color: transparent;
   --amplify-components-button-menu-justify-content: start;
   --amplify-components-button-menu-background-color: transparent;
-  --amplify-components-button-menu-border-width: 0;
   --amplify-components-button-primary-active-border-color: transparent;
   --amplify-components-button-primary-focus-border-color: transparent;
   --amplify-components-button-primary-hover-border-color: transparent;
@@ -492,6 +487,7 @@
   --amplify-components-menu-large-width: var(--amplify-font-sizes-xxxl);
   --amplify-components-menu-small-height: var(--amplify-font-sizes-medium);
   --amplify-components-menu-small-width: var(--amplify-font-sizes-medium);
+  --amplify-components-menu-gap: var(--amplify-space-zero);
   --amplify-components-menu-border-width: var(--amplify-border-widths-small);
   --amplify-components-menu-border-radius: var(--amplify-radii-medium);
   --amplify-components-menu-background-color: var(--amplify-colors-white);
@@ -530,6 +526,7 @@
   --amplify-components-flex-gap: var(--amplify-space-medium);
   --amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
   --amplify-components-fieldmessages-error-font-size: var(--amplify-font-sizes-small);
+  --amplify-components-fieldgroup-gap: var(--amplify-space-zero);
   --amplify-components-fieldcontrol-disabled-border-color: var(--amplify-colors-transparent);
   --amplify-components-fieldcontrol-quiet-border-block-end: var(--amplify-border-widths-small) solid var(--amplify-colors-border-primary);
   --amplify-components-fieldcontrol-large-padding-inline-end: var(--amplify-space-medium);
@@ -584,6 +581,7 @@
   --amplify-components-divider-label-font-size: var(--amplify-font-sizes-small);
   --amplify-components-divider-label-padding-inline: var(--amplify-space-medium);
   --amplify-components-divider-border-width: var(--amplify-border-widths-medium);
+  --amplify-components-countrycodeselect-height: var(--amplify-space-relative-full);
   --amplify-components-copy-tool-tip-font-size: var(--amplify-font-sizes-xxs);
   --amplify-components-copy-tool-tip-color: var(--amplify-colors-teal-100);
   --amplify-components-copy-tool-tip-bottom: var(--amplify-space-large);
@@ -606,6 +604,8 @@
   --amplify-components-card-padding: var(--amplify-space-medium);
   --amplify-components-card-border-radius: var(--amplify-radii-xs);
   --amplify-components-button-loader-wrapper-gap: var(--amplify-space-xs);
+  --amplify-components-button-link-border-width: var(--amplify-space-zero);
+  --amplify-components-button-menu-border-width: var(--amplify-space-zero);
   --amplify-components-button-primary-border-width: var(--amplify-border-widths-small);
   --amplify-components-button-border-style: var(--amplify-components-fieldcontrol-border-style);
   --amplify-components-button-font-weight: 700;
@@ -673,7 +673,6 @@
   --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-tertiary);
   --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
-  --amplify-components-switchfield-focused-shadow: var(--amplify-shadows-small);
   --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-thumb-border-color: var(--amplify-colors-border-primary);
   --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small);
@@ -701,7 +700,7 @@
   --amplify-components-fieldmessages-error-color: var(--amplify-colors-font-error);
   --amplify-components-fieldcontrol-error-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-error-border-color: var(--amplify-colors-border-error);
-  --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px var(--amplify-colors-border-error);
+  --amplify-components-fieldcontrol-quiet-error-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-quiet-error-border-block-end-color: var(--amplify-colors-border-error);
   --amplify-components-fieldcontrol-large-font-size: var(--amplify-components-field-large-font-size);
   --amplify-components-fieldcontrol-small-font-size: var(--amplify-components-field-small-font-size);
@@ -801,6 +800,7 @@
   --amplify-components-tabs-item-active-color: var(--amplify-colors-font-interactive);
   --amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
   --amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
+  --amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 3px var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
   --amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
@@ -820,7 +820,7 @@
   --amplify-components-fieldcontrol-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-fieldcontrol-focus-box-shadow: 0px 0px 0px 1px var(--amplify-colors-border-focus);
   --amplify-components-fieldcontrol-focus-border-color: var(--amplify-colors-border-focus);
-  --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px var(--amplify-colors-border-focus);
+  --amplify-components-fieldcontrol-quiet-focus-box-shadow: 0px 1px 0px var(--amplify-colors-border-focus);
   --amplify-components-fieldcontrol-quiet-focus-border-block-end-color: var(--amplify-colors-border-focus);
   --amplify-components-expander-item-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
   --amplify-components-checkbox-label-disabled-color: var(--amplify-colors-font-disabled);
@@ -1624,6 +1624,7 @@ h6.amplify-heading {
 /* Center by default */
 
 [data-amplify-authenticator][data-variation=modal] {
+  overflow-y: auto;
   display: grid;
   width: var(--amplify-components-authenticator-modal-width);
   height: var(--amplify-components-authenticator-modal-height);

package/dist/types/components/Authenticator/Router/index.d.ts

@@ -1,13 +1,15 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { CognitoUserAmplify } from '@aws-amplify/ui';
 import { useAuthenticator } from '../hooks/useAuthenticator';
+declare type AuthenticatorChildren = React.ReactNode | (({ signOut, user, }: {
+    signOut?: ReturnType<typeof useAuthenticator>['signOut'];
+    user?: CognitoUserAmplify;
+}) => React.ReactNode);
 export declare type RouterProps = {
     className?: string;
-    children?: ({ signOut, user, }: {
-        signOut: ReturnType<typeof useAuthenticator>['signOut'];
-        user: CognitoUserAmplify;
-    }) => JSX.Element;
+    children?: AuthenticatorChildren;
     variation?: 'default' | 'modal';
     hideSignUp?: boolean;
 };
 export declare function Router({ children, className, variation, hideSignUp, }: RouterProps): JSX.Element;
+export {};

package/dist/types/components/Authenticator/SignIn/SignIn.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare function SignIn(): JSX.Element;
 export declare namespace SignIn {
-    var Header: () => JSX.Element;
     var Footer: () => JSX.Element;
+    var Header: () => JSX.Element;
 }

package/dist/types/components/Authenticator/hooks/useCustomComponents/defaultComponents.d.ts

@@ -1,45 +1,20 @@
 /// <reference types="react" />
-export declare const defaultComponents: {
-    Header: () => JSX.Element;
-    SignIn: {
-        Header: () => JSX.Element;
-        Footer: () => JSX.Element;
-    };
-    SignUp: {
-        Header: () => JSX.Element;
-        FormFields: () => JSX.Element;
-        Footer: () => JSX.Element;
-    };
-    ConfirmSignUp: {
-        Header: () => JSX.Element;
-        Footer: () => JSX.Element;
-    };
-    SetupTOTP: {
-        Header: () => JSX.Element;
-        Footer: () => JSX.Element;
-    };
-    ConfirmResetPassword: {
-        Header: () => JSX.Element;
-        Footer: () => JSX.Element;
-    };
-    ConfirmSignIn: {
-        Header: () => JSX.Element;
-        Footer: () => JSX.Element;
-    };
-    VerifyUser: {
-        Header: () => JSX.Element;
-        Footer: () => JSX.Element;
-    };
-    ConfirmVerifyUser: {
-        Header: () => JSX.Element;
-        Footer: () => JSX.Element;
-    };
-    ForceNewPassword: {
-        FormFields: () => JSX.Element;
-    };
-    ResetPassword: {
-        Header: () => JSX.Element;
-        Footer: () => JSX.Element;
-    };
-    Footer: () => JSX.Element;
-};
+interface Components {
+    Footer?: () => JSX.Element;
+    FormFields?: () => JSX.Element;
+    Header?: () => JSX.Element;
+}
+export interface DefaultComponents extends Omit<Components, 'FormFields'> {
+    ConfirmSignIn?: Omit<Components, 'FormFields'>;
+    ConfirmSignUp?: Omit<Components, 'FormFields'>;
+    ConfirmResetPassword?: Omit<Components, 'FormFields'>;
+    ConfirmVerifyUser?: Omit<Components, 'FormFields'>;
+    ForceNewPassword?: Pick<Components, 'FormFields'>;
+    ResetPassword?: Omit<Components, 'FormFields'>;
+    SetupTOTP?: Omit<Components, 'FormFields'>;
+    SignIn?: Omit<Components, 'FormFields'>;
+    SignUp?: Components;
+    VerifyUser?: Omit<Components, 'FormFields'>;
+}
+export declare const defaultComponents: DefaultComponents;
+export {};

package/dist/types/components/Authenticator/hooks/useCustomComponents/index.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { PartialDeep } from 'src/types';
-import { defaultComponents } from './defaultComponents';
+import { DefaultComponents } from './defaultComponents';
 export interface ComponentsProviderProps {
-    components?: PartialDeep<typeof defaultComponents>;
+    components?: DefaultComponents;
 }
 export declare const CustomComponentsContext: React.Context<ComponentsProviderProps>;
 export declare const useCustomComponents: () => ComponentsProviderProps;

package/dist/types/components/Authenticator/withAuthenticator.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { AuthenticatorProps } from './Authenticator';
 export declare type WithAuthenticatorOptions = Omit<AuthenticatorProps, 'children'>;
-export declare function withAuthenticator(Component: any, options?: WithAuthenticatorOptions): (props: any) => JSX.Element;
+export declare function withAuthenticator<Props>(Component: (props?: Props) => JSX.Element, options?: WithAuthenticatorOptions): (props: Props) => JSX.Element;

package/dist/types/components/Geo/Geocoder/index.d.ts

@@ -18,7 +18,7 @@
  *   return <Geocoder />;
  * }
  */
-export declare const Geocoder: ({ position, ...props }: GeocoderProps) => JSX.Element;
+export declare const Geocoder: (props: GeocoderProps) => JSX.Element;
 export declare type GeocoderProps = {
     /**
      * A bounding box given as an array in the format `[minX, minY, maxX, maxY]`.

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

@@ -3,8 +3,8 @@ export interface UseComposeRefsCallbackProps<RefType> {
     externalRef: React.ForwardedRef<RefType>;
     internalRef: React.MutableRefObject<RefType>;
 }
-export declare type UseComposeRefsCallbackReturn<RefType> = (node: RefType) => void;
+export declare type UseComposeRefsCallback<RefType> = (node: RefType) => void;
 /**
  *  Creates ref callback to compose together external and internal refs
  */
-export declare const useComposeRefsCallback: <RefType>({ externalRef, internalRef, }: UseComposeRefsCallbackProps<RefType>) => UseComposeRefsCallbackReturn<RefType>;
+export declare function useComposeRefsCallback<RefType>({ externalRef, internalRef, }: UseComposeRefsCallbackProps<RefType>): UseComposeRefsCallback<RefType>;

package/dist/types/primitives/SearchField/useSearchField.d.ts

@@ -5,5 +5,5 @@ export declare const useSearchField: ({ onSubmit, onClear, externalRef, }: UseSe
     onKeyDown: (event: any) => void;
     onInput: (event: any) => void;
     onClick: () => void;
-    composedRefs: import("../../hooks/useComposeRefsCallback").UseComposeRefsCallbackReturn<HTMLInputElement>;
+    composedRefs: import("../../hooks/useComposeRefsCallback").UseComposeRefsCallback<HTMLInputElement>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react",
-  "version": "2.15.2",
+  "version": "2.15.5",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "exports": {
@@ -44,21 +44,20 @@
     "build": "yarn run build:ts && yarn run build:catalog",
     "build:ts": "rollup --config",
     "build:catalog": "ts-node scripts/generatePrimitivesCatalog.ts",
-    "dev": "rollup --config --watch",
-    "eslint:primitives": "eslint ./src/primitives --ext .js,.ts,.tsx",
+    "dev": "tsup --watch",
+    "dev:build": "tsup",
     "update:icons": "node scripts/updateIcons.js",
     "build:icons": "yarn run clean:icons && node scripts/generateIcons.js",
     "clean": "rimraf dist node_modules",
     "clean:icons": "rimraf ./src/primitives/Icon/icons",
-    "primitives:new": "hygen primitives new",
-    "lint": "tsc --noEmit && yarn eslint:primitives",
+    "lint": "tsc --noEmit && yarn eslint ./src --ext .js,.ts,.tsx",
     "test": "yarn test:unit",
     "test:watch": "yarn test:unit:watch",
     "test:unit": "jest",
     "test:unit:watch": "jest --watch"
   },
   "dependencies": {
-    "@aws-amplify/ui": "3.6.2",
+    "@aws-amplify/ui": "3.6.5",
     "@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",
@@ -69,8 +68,8 @@
     "deepmerge": "4.2.2",
     "lodash": "4.17.21",
     "mapbox-gl": "npm:empty-npm-package@1.0.0",
-    "maplibre-gl-js-amplify": "1.2.3",
-    "maplibre-gl": "1.15.2",
+    "maplibre-gl": "1.15.3",
+    "maplibre-gl-js-amplify": "1.5.0",
     "qrcode": "1.5.0",
     "react-generate-context": "1.0.1",
     "react-map-gl": "7.0.10"
@@ -100,7 +99,6 @@
     "degit": "^2.8.4",
     "eslint": "^8.4.1",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "hygen": "^6.1.0",
     "jest": "^27.0.4",
     "jest-matchmedia-mock": "^1.1.0",
     "react-router-dom": "^6.2.1",
@@ -110,8 +108,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "ts-jest": "^27.0.3",
     "ts-morph": "^12.0.0",
-    "ts-node": "^10.2.1",
-    "typescript": "^4.3.2"
+    "ts-node": "^10.2.1"
   },
   "sideEffects": [
     "dist/**/*.css"

package/dist/types/types/PartialDeep.d.ts

@@ -1,59 +0,0 @@
-import { Primitive } from './Primitive';
-/**
-Create a type from another type with all keys and nested keys set to optional.
-
-Use-cases:
-- Merging a default settings/config object with another object, the second object would be a deep partial of the default object.
-- Mocking and testing complex entities, where populating an entire object with its keys would be redundant in terms of the mock or test.
-
-@example
-```
-import {PartialDeep} from 'type-fest';
-
-const settings: Settings = {
-    textEditor: {
-        fontSize: 14;
-        fontColor: '#000000';
-        fontWeight: 400;
-    }
-    autocomplete: false;
-    autosave: true;
-};
-
-const applySavedSettings = (savedSettings: PartialDeep<Settings>) => {
-    return {...settings, ...savedSettings};
-}
-
-settings = applySavedSettings({textEditor: {fontWeight: 500}});
-```
-
-@category Utilities
-*/
-export declare type PartialDeep<T> = T extends Primitive ? Partial<T> : T extends Map<infer KeyType, infer ValueType> ? PartialMapDeep<KeyType, ValueType> : T extends Set<infer ItemType> ? PartialSetDeep<ItemType> : T extends ReadonlyMap<infer KeyType, infer ValueType> ? PartialReadonlyMapDeep<KeyType, ValueType> : T extends ReadonlySet<infer ItemType> ? PartialReadonlySetDeep<ItemType> : T extends (...args: any[]) => unknown ? T | undefined : T extends object ? T extends Array<infer ItemType> ? ItemType[] extends T ? Array<PartialDeep<ItemType | undefined>> : PartialObjectDeep<T> : PartialObjectDeep<T> : unknown;
-/**
-Same as `PartialDeep`, but accepts only `Map`s and as inputs. Internal helper for `PartialDeep`.
-*/
-interface PartialMapDeep<KeyType, ValueType> extends Map<PartialDeep<KeyType>, PartialDeep<ValueType>> {
-}
-/**
-Same as `PartialDeep`, but accepts only `Set`s as inputs. Internal helper for `PartialDeep`.
-*/
-interface PartialSetDeep<T> extends Set<PartialDeep<T>> {
-}
-/**
-Same as `PartialDeep`, but accepts only `ReadonlyMap`s as inputs. Internal helper for `PartialDeep`.
-*/
-interface PartialReadonlyMapDeep<KeyType, ValueType> extends ReadonlyMap<PartialDeep<KeyType>, PartialDeep<ValueType>> {
-}
-/**
-Same as `PartialDeep`, but accepts only `ReadonlySet`s as inputs. Internal helper for `PartialDeep`.
-*/
-interface PartialReadonlySetDeep<T> extends ReadonlySet<PartialDeep<T>> {
-}
-/**
-Same as `PartialDeep`, but accepts only `object`s as inputs. Internal helper for `PartialDeep`.
-*/
-declare type PartialObjectDeep<ObjectType extends object> = {
-    [KeyType in keyof ObjectType]?: PartialDeep<ObjectType[KeyType]>;
-};
-export {};

package/dist/types/types/Primitive.d.ts

@@ -1,5 +0,0 @@
-/**
-Matches any [primitive value](https://developer.mozilla.org/en-US/docs/Glossary/Primitive).
-@category Basic
-*/
-export declare type Primitive = null | undefined | string | number | boolean | symbol | bigint;

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

@@ -1 +0,0 @@
-export * from './PartialDeep';