@aws-amplify/ui-react 6.1.13 → 6.1.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -32,8 +32,8 @@ function ConfirmSignUp({ className, variation, }) {
32
32
  React__default.createElement(Text, { className: "amplify-authenticator__subtitle" }, getDeliveryMessageText(codeDeliveryDetails)),
33
33
  React__default.createElement(FormFields, null),
34
34
  React__default.createElement(RemoteErrorMessage, null),
35
- React__default.createElement(Button, { variation: "primary", isDisabled: isPending, type: "submit", loadingText: getConfirmingText(), isLoading: isPending, fontWeight: "normal" }, getConfirmText()),
36
- React__default.createElement(Button, { onClick: resendCode, type: "button", fontWeight: "normal" }, getResendCodeText())),
35
+ React__default.createElement(Button, { variation: "primary", isDisabled: isPending, type: "submit", loadingText: getConfirmingText(), isLoading: isPending }, getConfirmText()),
36
+ React__default.createElement(Button, { onClick: resendCode, type: "button" }, getResendCodeText())),
37
37
  React__default.createElement(Footer, null)))));
38
38
  }
39
39
  const DefaultHeader = () => {
@@ -46,7 +46,7 @@ const FederatedSignInButton = (props) => {
46
46
  else if (icon === 'apple') {
47
47
  iconComponent = React__default.createElement(AppleIcon, null);
48
48
  }
49
- return (React__default.createElement(Button, { onClick: handleClick, className: "federated-sign-in-button", fontWeight: "normal", gap: "1rem" },
49
+ return (React__default.createElement(Button, { onClick: handleClick, className: "federated-sign-in-button", gap: "1rem" },
50
50
  iconComponent,
51
51
  React__default.createElement(Text, { as: "span" }, text)));
52
52
  };
@@ -26,8 +26,8 @@ const ForceNewPassword = ({ className, variation, }) => {
26
26
  React__default.createElement(Header, null),
27
27
  React__default.createElement(FormFields, null),
28
28
  React__default.createElement(RemoteErrorMessage, null),
29
- React__default.createElement(Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getChangingText(), fontWeight: "normal" }, getChangePasswordText()),
30
- React__default.createElement(Button, { onClick: toSignIn, type: "button", fontWeight: "normal", variation: "link", size: "small" }, getBackToSignInText()),
29
+ React__default.createElement(Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getChangingText() }, getChangePasswordText()),
30
+ React__default.createElement(Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText()),
31
31
  React__default.createElement(Footer, null)))));
32
32
  };
33
33
  ForceNewPassword.FormFields = function FormFields$1() {
@@ -28,15 +28,15 @@ function SignIn() {
28
28
  React__default.createElement("legend", null, getSignInText())),
29
29
  React__default.createElement(FormFields, null)),
30
30
  React__default.createElement(RemoteErrorMessage, null),
31
- React__default.createElement(Button, { isDisabled: isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getSigningInText() }, getSignInText()))),
32
- React__default.createElement(Footer, null)));
31
+ React__default.createElement(Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getSigningInText() }, getSignInText()),
32
+ React__default.createElement(Footer, null)))));
33
33
  }
34
34
  const DefaultFooter = () => {
35
35
  const { toForgotPassword } = useAuthenticator((context) => [
36
36
  context.toForgotPassword,
37
37
  ]);
38
38
  return (React__default.createElement(View, { "data-amplify-footer": "" },
39
- React__default.createElement(Button, { fontWeight: "normal", onClick: toForgotPassword, size: "small", variation: "link" }, getForgotPasswordText())));
39
+ React__default.createElement(Button, { onClick: toForgotPassword, size: "small", variation: "link" }, getForgotPasswordText())));
40
40
  };
41
41
  SignIn.Footer = DefaultFooter;
42
42
  SignIn.Header = function Header() {
@@ -28,8 +28,8 @@ function SignUp() {
28
28
  React__default.createElement(Flex, { direction: "column" },
29
29
  React__default.createElement(FormFields, null),
30
30
  React__default.createElement(RemoteErrorMessage, null)),
31
- React__default.createElement(Button, { isDisabled: hasValidationErrors || isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getCreatingAccountText() }, getCreateAccountText()))),
32
- React__default.createElement(Footer, null)));
31
+ React__default.createElement(Button, { isDisabled: hasValidationErrors || isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getCreatingAccountText() }, getCreateAccountText()),
32
+ React__default.createElement(Footer, null)))));
33
33
  }
34
34
  SignUp.Header = function Header() {
35
35
  // @ts-ignore
@@ -13,9 +13,9 @@ import { RouteContainer } from '../RouteContainer/RouteContainer.mjs';
13
13
 
14
14
  const { getSkipText, getVerifyText, getVerifyContactText, getAccountRecoveryInfoText, } = authenticatorTextUtil;
15
15
  const generateRadioGroup = (attributes) => {
16
- return Object.entries(attributes).map(([key, value]) => {
16
+ return Object.entries(attributes).map(([key, value], index) => {
17
17
  const verificationType = defaultFormFieldOptions[key].label;
18
- return (React__default.createElement(Radio, { name: "unverifiedAttr", value: key, key: key },
18
+ return (React__default.createElement(Radio, { name: "unverifiedAttr", value: key, key: key, defaultChecked: index === 0 },
19
19
  translate(verificationType),
20
20
  ":",
21
21
  ' ',
@@ -11,8 +11,8 @@ const ConfirmSignInFooter = () => {
11
11
  context.toSignIn,
12
12
  ]);
13
13
  return (React__default.createElement(Flex, { direction: "column" },
14
- React__default.createElement(Button, { isDisabled: isPending, type: "submit", variation: "primary", fontWeight: "normal", isLoading: isPending, loadingText: getConfirmingText() }, getConfirmText()),
15
- React__default.createElement(Button, { onClick: toSignIn, type: "button", variation: "link", fontWeight: "normal", size: "small" }, getBackToSignInText())));
14
+ React__default.createElement(Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getConfirmingText() }, getConfirmText()),
15
+ React__default.createElement(Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText())));
16
16
  };
17
17
 
18
18
  export { ConfirmSignInFooter };
@@ -28,8 +28,9 @@ const TwoButtonSubmitFooter = (props) => {
28
28
  "\u2026")) : (React__default.createElement(React__default.Fragment, null, getSubmitText()));
29
29
  const submitText = submitButtonText ?? defaultSubmitText;
30
30
  return (React__default.createElement(Flex, { direction: "column" },
31
- React__default.createElement(Button, { fontWeight: "normal", variation: "primary", isDisabled: isPending, type: "submit" }, submitText),
32
- React__default.createElement(Button, { onClick: onClick, type: "button", variation: "link", fontWeight: "normal", size: "small" }, cancelButtonText)));
31
+ React__default.createElement(Button, { variation: "primary", isDisabled: isPending, type: "submit" }, submitText),
32
+ React__default.createElement(Flex, { direction: "column", alignItems: "center" },
33
+ React__default.createElement(Button, { onClick: onClick, type: "button", variation: "link", size: "small" }, cancelButtonText))));
33
34
  };
34
35
 
35
36
  export { TwoButtonSubmitFooter };
@@ -1,3 +1,3 @@
1
- const VERSION = '6.1.13';
1
+ const VERSION = '6.1.14';
2
2
 
3
3
  export { VERSION };
package/dist/index.js CHANGED
@@ -2383,7 +2383,7 @@ const defaultDeleteUserDisplayText = {
2383
2383
  warningText: 'Deleting your account is not reversible. You will lose access to your account and all data associated with it.',
2384
2384
  };
2385
2385
 
2386
- const VERSION = '6.1.13';
2386
+ const VERSION = '6.1.14';
2387
2387
 
2388
2388
  const logger$2 = ui.getLogger('AccountSettings');
2389
2389
  const getIsDisabled = (formValues, validationError) => {
@@ -2744,8 +2744,8 @@ function ConfirmSignUp({ className, variation, }) {
2744
2744
  React__default["default"].createElement(Field.Text, { className: "amplify-authenticator__subtitle" }, getDeliveryMessageText(codeDeliveryDetails)),
2745
2745
  React__default["default"].createElement(FormFields, null),
2746
2746
  React__default["default"].createElement(RemoteErrorMessage, null),
2747
- React__default["default"].createElement(Field.Button, { variation: "primary", isDisabled: isPending, type: "submit", loadingText: getConfirmingText$1(), isLoading: isPending, fontWeight: "normal" }, getConfirmText$1()),
2748
- React__default["default"].createElement(Field.Button, { onClick: resendCode, type: "button", fontWeight: "normal" }, getResendCodeText$1())),
2747
+ React__default["default"].createElement(Field.Button, { variation: "primary", isDisabled: isPending, type: "submit", loadingText: getConfirmingText$1(), isLoading: isPending }, getConfirmText$1()),
2748
+ React__default["default"].createElement(Field.Button, { onClick: resendCode, type: "button" }, getResendCodeText$1())),
2749
2749
  React__default["default"].createElement(Footer, null)))));
2750
2750
  }
2751
2751
  const DefaultHeader = () => {
@@ -2776,8 +2776,8 @@ const ForceNewPassword = ({ className, variation, }) => {
2776
2776
  React__default["default"].createElement(Header, null),
2777
2777
  React__default["default"].createElement(FormFields, null),
2778
2778
  React__default["default"].createElement(RemoteErrorMessage, null),
2779
- React__default["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getChangingText(), fontWeight: "normal" }, getChangePasswordText()),
2780
- React__default["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", fontWeight: "normal", variation: "link", size: "small" }, getBackToSignInText$2()),
2779
+ React__default["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getChangingText() }, getChangePasswordText()),
2780
+ React__default["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText$2()),
2781
2781
  React__default["default"].createElement(Footer, null)))));
2782
2782
  };
2783
2783
  ForceNewPassword.FormFields = function FormFields$1() {
@@ -2797,8 +2797,8 @@ const ConfirmSignInFooter = () => {
2797
2797
  context.toSignIn,
2798
2798
  ]);
2799
2799
  return (React__default["default"].createElement(Field.Flex, { direction: "column" },
2800
- React__default["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", fontWeight: "normal", isLoading: isPending, loadingText: getConfirmingText() }, getConfirmText()),
2801
- React__default["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", variation: "link", fontWeight: "normal", size: "small" }, getBackToSignInText$1())));
2800
+ React__default["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getConfirmingText() }, getConfirmText()),
2801
+ React__default["default"].createElement(Field.Button, { onClick: toSignIn, type: "button", variation: "link", size: "small" }, getBackToSignInText$1())));
2802
2802
  };
2803
2803
 
2804
2804
  const logger = new utils.ConsoleLogger('SetupTotp-logger');
@@ -2886,8 +2886,9 @@ const TwoButtonSubmitFooter = (props) => {
2886
2886
  "\u2026")) : (React__default["default"].createElement(React__default["default"].Fragment, null, getSubmitText()));
2887
2887
  const submitText = submitButtonText ?? defaultSubmitText;
2888
2888
  return (React__default["default"].createElement(Field.Flex, { direction: "column" },
2889
- React__default["default"].createElement(Field.Button, { fontWeight: "normal", variation: "primary", isDisabled: isPending, type: "submit" }, submitText),
2890
- React__default["default"].createElement(Field.Button, { onClick: onClick, type: "button", variation: "link", fontWeight: "normal", size: "small" }, cancelButtonText)));
2889
+ React__default["default"].createElement(Field.Button, { variation: "primary", isDisabled: isPending, type: "submit" }, submitText),
2890
+ React__default["default"].createElement(Field.Flex, { direction: "column", alignItems: "center" },
2891
+ React__default["default"].createElement(Field.Button, { onClick: onClick, type: "button", variation: "link", size: "small" }, cancelButtonText))));
2891
2892
  };
2892
2893
 
2893
2894
  const AppleIcon = () => {
@@ -2929,7 +2930,7 @@ const FederatedSignInButton = (props) => {
2929
2930
  else if (icon === 'apple') {
2930
2931
  iconComponent = React__default["default"].createElement(AppleIcon, null);
2931
2932
  }
2932
- return (React__default["default"].createElement(Field.Button, { onClick: handleClick, className: "federated-sign-in-button", fontWeight: "normal", gap: "1rem" },
2933
+ return (React__default["default"].createElement(Field.Button, { onClick: handleClick, className: "federated-sign-in-button", gap: "1rem" },
2933
2934
  iconComponent,
2934
2935
  React__default["default"].createElement(Field.Text, { as: "span" }, text)));
2935
2936
  };
@@ -2977,15 +2978,15 @@ function SignIn() {
2977
2978
  React__default["default"].createElement("legend", null, getSignInText())),
2978
2979
  React__default["default"].createElement(FormFields, null)),
2979
2980
  React__default["default"].createElement(RemoteErrorMessage, null),
2980
- React__default["default"].createElement(Field.Button, { isDisabled: isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getSigningInText() }, getSignInText()))),
2981
- React__default["default"].createElement(Footer, null)));
2981
+ React__default["default"].createElement(Field.Button, { isDisabled: isPending, type: "submit", variation: "primary", isLoading: isPending, loadingText: getSigningInText() }, getSignInText()),
2982
+ React__default["default"].createElement(Footer, null)))));
2982
2983
  }
2983
2984
  const DefaultFooter = () => {
2984
2985
  const { toForgotPassword } = uiReactCore.useAuthenticator((context) => [
2985
2986
  context.toForgotPassword,
2986
2987
  ]);
2987
2988
  return (React__default["default"].createElement(Field.View, { "data-amplify-footer": "" },
2988
- React__default["default"].createElement(Field.Button, { fontWeight: "normal", onClick: toForgotPassword, size: "small", variation: "link" }, getForgotPasswordText())));
2989
+ React__default["default"].createElement(Field.Button, { onClick: toForgotPassword, size: "small", variation: "link" }, getForgotPasswordText())));
2989
2990
  };
2990
2991
  SignIn.Footer = DefaultFooter;
2991
2992
  SignIn.Header = function Header() {
@@ -3011,8 +3012,8 @@ function SignUp() {
3011
3012
  React__default["default"].createElement(Field.Flex, { direction: "column" },
3012
3013
  React__default["default"].createElement(FormFields, null),
3013
3014
  React__default["default"].createElement(RemoteErrorMessage, null)),
3014
- React__default["default"].createElement(Field.Button, { isDisabled: hasValidationErrors || isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getCreatingAccountText() }, getCreateAccountText()))),
3015
- React__default["default"].createElement(Footer, null)));
3015
+ React__default["default"].createElement(Field.Button, { isDisabled: hasValidationErrors || isPending, isFullWidth: true, type: "submit", variation: "primary", isLoading: isPending, loadingText: getCreatingAccountText() }, getCreateAccountText()),
3016
+ React__default["default"].createElement(Footer, null)))));
3016
3017
  }
3017
3018
  SignUp.Header = function Header() {
3018
3019
  // @ts-ignore
@@ -3069,9 +3070,9 @@ ConfirmVerifyUser.Footer = function Footer() {
3069
3070
 
3070
3071
  const { getSkipText, getVerifyText, getVerifyContactText, getAccountRecoveryInfoText, } = ui.authenticatorTextUtil;
3071
3072
  const generateRadioGroup = (attributes) => {
3072
- return Object.entries(attributes).map(([key, value]) => {
3073
+ return Object.entries(attributes).map(([key, value], index) => {
3073
3074
  const verificationType = ui.defaultFormFieldOptions[key].label;
3074
- return (React__default["default"].createElement(Radio, { name: "unverifiedAttr", value: key, key: key },
3075
+ return (React__default["default"].createElement(Radio, { name: "unverifiedAttr", value: key, key: key, defaultChecked: index === 0 },
3075
3076
  ui.translate(verificationType),
3076
3077
  ":",
3077
3078
  ' ',
@@ -1 +1 @@
1
- export declare const VERSION = "6.1.13";
1
+ export declare const VERSION = "6.1.14";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui-react",
3
- "version": "6.1.13",
3
+ "version": "6.1.14",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -1,58 +0,0 @@
1
- import React from 'react';
2
- import { ElementDisplayName } from './types';
3
- export interface Elements extends Partial<Record<ElementDisplayName, React.ComponentType>> {
4
- }
5
- /**
6
- * `ElementsProvider` and its coresponding `useElement` hook provide
7
- * access to the values of the nearest ancestral `ElementsContext`
8
- * value.
9
- *
10
- * In most use cases, there is no need to directly invoke `useElement`;
11
- * `ElementsContext` lookup is handled directly by `BaseElement`
12
- * components returned by `defineBaseElement`.
13
- *
14
- * @example
15
- *
16
- * Add `ElementsContext` aware `BaseElement` components to a
17
- * Connected Component
18
- *
19
- * ```tsx
20
- * // `BaseElement`, renders custom or default element defintion
21
- * const ViewElement = defineBaseElement({
22
- * displayName: "View",
23
- * type: "div",
24
- * });
25
- *
26
- * // `BaseElement` components to be provided through `ElementsContext`
27
- * interface ConnectedComponentElements {
28
- * View: typeof ViewElement;
29
- * }
30
- *
31
- * function createConnectedComponent<T extends ConnectedComponentElements>(
32
- * elements?: T
33
- * ) {
34
- * const Provider = ({ children }: { children?: React.ReactNode }) => (
35
- * <ElementsProvider elements={elements}>
36
- * <Children />
37
- * </ElementsProvider>
38
- * );
39
- *
40
- * function ConnectedComponent() {
41
- * return (
42
- * <Provider>
43
- * <ConnectedComponentContent />
44
- * </Provider>
45
- * );
46
- * }
47
- *
48
- * ConnectedComponent.Provider = Provider;
49
- *
50
- * return ConnectedComponent;
51
- * }
52
- * ```
53
- */
54
- export declare function ElementsProvider<T extends Elements>({ elements, ...props }: {
55
- children?: React.ReactNode;
56
- elements?: T;
57
- }): React.JSX.Element;
58
- export declare const useElement: <T extends keyof Elements>(name: T) => Elements[T] | undefined;
@@ -1,26 +0,0 @@
1
- import { BaseElement, BaseElementProps, ElementDisplayName, ElementRefType, ReactElementProps, ReactElementType } from './types';
2
- export interface DefineBaseElementInput<T> {
3
- /**
4
- * `BaseElement` display name in React dev tools and stack traces
5
- */
6
- displayName: ElementDisplayName;
7
- /**
8
- * base HTML `element` type
9
- */
10
- type: T;
11
- }
12
- /**
13
- * Defines a `ElementsContext` aware `BaseElement` UI component of the
14
- * provided `type` with an assigned `displayName`.
15
- *
16
- * If `BaseElement` is used as a child of an `ElementsProvider`, returns the
17
- * `BaseElement` value of the provided `displayName` of `ElementsContext`.
18
- *
19
- * When used outside of a parent `ElementsProvider` or no `BaseElement`
20
- * of `displayName` is found in the `ElementsContext`, returns a stateless,
21
- * unstyled HTML element of the provided `type`.
22
- *
23
- * @param {DefineBaseElementInput} input `BaseElement` parameters
24
- * @returns {BaseElement} `ElementsContext` aware UI component
25
- */
26
- 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>>;
@@ -1,3 +0,0 @@
1
- export { default as defineBaseElement } from './defineBaseElement';
2
- export { default as withBaseElementProps } from './withBaseElementProps';
3
- export { ElementsProvider } from './ElementsContext';
@@ -1,31 +0,0 @@
1
- import React from 'react';
2
- /**
3
- * Base type definition of `BaseElement` components available through
4
- * `ElementsContext`. The definitions define a contract between a
5
- * Connected Component and the `elements` that can be provided as
6
- * overrides.
7
- *
8
- * `BaseElement` interfaces surface a minimal set of HTML semantic `props`
9
- * required to achieve the base functionality of consumers. `props`
10
- * are always optional at the interface level, allowing for additional `props`
11
- * to be added to existing `BaseElement` interfaces as needed.
12
- */
13
- export type BaseElement<T = {}, K = {}> = React.ForwardRefExoticComponent<React.PropsWithoutRef<T> & React.RefAttributes<K>>;
14
- /**
15
- * allowed values of `displayName` of `BaseElement` and `ElemebtsContext` keys
16
- */
17
- export type ElementDisplayName = 'Button' | 'View' | 'Icon' | 'Input' | 'Span';
18
- export type ElementRefType<T> = T extends {
19
- ref?: React.LegacyRef<infer K> | React.Ref<infer K> | React.ForwardedRef<infer K>;
20
- } ? K : never;
21
- export type ReactElementType = keyof React.JSX.IntrinsicElements;
22
- export type ReactElementProps<T extends ReactElementType> = React.JSX.IntrinsicElements[T];
23
- /**
24
- * key of `props` always available on `BaseElement` definitions
25
- */
26
- type ElementPropKey<T> = T | 'children' | 'className' | 'style';
27
- 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>> & {
28
- testId?: string;
29
- variant?: V;
30
- };
31
- export {};
@@ -1,32 +0,0 @@
1
- import React from 'react';
2
- import { BaseElement, ElementRefType } from './types';
3
- /**
4
- * Extend target `BaseElement` with `defaultProps`. `defaultProps`
5
- * are overidden by `props` provided to returned `BaseElement`.
6
- *
7
- * @example
8
- *
9
- * Extend `InputElement` with default `className` and `type`
10
- * ```tsx
11
- *
12
- * // define extended `props` on `BaseElement` interface
13
- * type InputElementPropKey = 'onChange' | 'type';
14
- *
15
- * // create `InputElement` base with `type` generic and extended `props` key
16
- * export const InputElement = defineBaseElement<"input", InputElementPropKey>({
17
- * type: "input",
18
- * displayName: "Input",
19
- * });
20
- *
21
- * // extend base `InputElement` with default input `type` of `checkbox`
22
- * const CheckboxElement = withBaseElementProps(Input, {
23
- * className: 'submit-toggle__checkbox',
24
- * type: 'checkbox',
25
- * });
26
- * ```
27
- *
28
- * @param Target `BaseElement` to extend
29
- * @param defaultProps `defaultProps` to apply to `Target`, accepts object or callback
30
- * @returns extended `BaseElement` with `defaultProps`
31
- */
32
- export default function withBaseElementProps<T, K extends T | (() => T)>(Target: React.ForwardRefExoticComponent<T>, defaultProps: K): BaseElement<T, ElementRefType<T>>;