@cloudscape-design/components-themeable 3.0.1240 → 3.0.1241
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.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/form-field/test-classes/styles.scss +9 -0
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/template/file-upload/internal.js +2 -2
- package/lib/internal/template/file-upload/internal.js.map +1 -1
- package/lib/internal/template/form-field/interfaces.d.ts +6 -0
- package/lib/internal/template/form-field/interfaces.d.ts.map +1 -1
- package/lib/internal/template/form-field/interfaces.js.map +1 -1
- package/lib/internal/template/form-field/internal.d.ts +2 -2
- package/lib/internal/template/form-field/internal.d.ts.map +1 -1
- package/lib/internal/template/form-field/internal.js +22 -6
- package/lib/internal/template/form-field/internal.js.map +1 -1
- package/lib/internal/template/form-field/test-classes/styles.css.js +7 -0
- package/lib/internal/template/form-field/test-classes/styles.scoped.css +8 -0
- package/lib/internal/template/form-field/test-classes/styles.selectors.js +8 -0
- package/lib/internal/template/form-field/util.d.ts +3 -2
- package/lib/internal/template/form-field/util.d.ts.map +1 -1
- package/lib/internal/template/form-field/util.js +4 -3
- package/lib/internal/template/form-field/util.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/components/chart-popover/index.d.ts +2 -0
- package/lib/internal/template/internal/components/chart-popover/index.d.ts.map +1 -1
- package/lib/internal/template/internal/components/chart-popover/index.js +2 -2
- package/lib/internal/template/internal/components/chart-popover/index.js.map +1 -1
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/plugins/widget/interfaces.d.ts +84 -0
- package/lib/internal/template/internal/plugins/widget/interfaces.d.ts.map +1 -1
- package/lib/internal/template/internal/plugins/widget/interfaces.js.map +1 -1
- package/lib/internal/template/popover/container.d.ts +3 -1
- package/lib/internal/template/popover/container.d.ts.map +1 -1
- package/lib/internal/template/popover/container.js +2 -1
- package/lib/internal/template/popover/container.js.map +1 -1
- package/lib/internal/template/popover/use-popover-position.d.ts +2 -1
- package/lib/internal/template/popover/use-popover-position.d.ts.map +1 -1
- package/lib/internal/template/popover/use-popover-position.js +11 -5
- package/lib/internal/template/popover/use-popover-position.js.map +1 -1
- package/lib/internal/template/popover/utils/positions.d.ts +1 -0
- package/lib/internal/template/popover/utils/positions.d.ts.map +1 -1
- package/lib/internal/template/popover/utils/positions.js +21 -0
- package/lib/internal/template/popover/utils/positions.js.map +1 -1
- package/lib/internal/template/test-utils/dom/form-field/index.d.ts +1 -0
- package/lib/internal/template/test-utils/dom/form-field/index.js +5 -1
- package/lib/internal/template/test-utils/dom/form-field/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/form-field/index.d.ts +1 -0
- package/lib/internal/template/test-utils/selectors/form-field/index.js +5 -1
- package/lib/internal/template/test-utils/selectors/form-field/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ import InternalFileDropzone from '../file-dropzone/internal';
|
|
|
9
9
|
import { useFilesDragging } from '../file-dropzone/use-files-dragging';
|
|
10
10
|
import InternalFileInput from '../file-input/internal';
|
|
11
11
|
import InternalFileTokenGroup from '../file-token-group/internal';
|
|
12
|
-
import {
|
|
12
|
+
import { ConstraintTextRegion, FormFieldError, FormFieldWarning } from '../form-field/internal';
|
|
13
13
|
import { useInternalI18n } from '../i18n/context';
|
|
14
14
|
import { getBaseProps } from '../internal/base-component';
|
|
15
15
|
import { fireNonCancelableEvent } from '../internal/events';
|
|
@@ -70,7 +70,7 @@ function InternalFileUpload({ accept, ariaRequired, multiple = false, onChange,
|
|
|
70
70
|
(constraintText || errorText || warningText) && (React.createElement("div", { className: styles.hints },
|
|
71
71
|
errorText && (React.createElement(FormFieldError, { id: errorId, errorIconAriaLabel: i18n('i18nStrings.errorIconAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel) }, errorText)),
|
|
72
72
|
showWarning && (React.createElement(FormFieldWarning, { id: warningId, warningIconAriaLabel: i18n('i18nStrings.warningIconAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.warningIconAriaLabel) }, warningText)),
|
|
73
|
-
constraintText && (React.createElement(
|
|
73
|
+
constraintText && (React.createElement(ConstraintTextRegion, { id: constraintTextId, hasValidationText: !!errorText || !!warningText }, constraintText))))),
|
|
74
74
|
value.length > 0 ? (React.createElement(InternalFileTokenGroup, { limit: tokenLimit, alignment: fileTokenAlignment, items: value.map((file, fileIndex) => ({
|
|
75
75
|
file,
|
|
76
76
|
errorText: fileErrors === null || fileErrors === void 0 ? void 0 : fileErrors[fileIndex],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { ForwardedRef, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport InternalFileDropzone from '../file-dropzone/internal';\nimport { useFilesDragging } from '../file-dropzone/use-files-dragging';\nimport InternalFileInput from '../file-input/internal';\nimport InternalFileTokenGroup from '../file-token-group/internal';\nimport { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useListFocusController } from '../internal/hooks/use-list-focus-controller';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { FileUploadProps } from './interfaces';\n\nimport fileInputStyles from '../file-input/styles.css.js';\nimport tokenListStyles from '../internal/components/token-list/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalFileUploadProps = FileUploadProps & InternalBaseComponentProps;\n\nexport default React.forwardRef(InternalFileUpload);\n\nfunction InternalFileUpload(\n {\n accept,\n ariaRequired,\n multiple = false,\n onChange,\n value,\n tokenLimit,\n showFileSize,\n showFileLastModified,\n showFileThumbnail,\n i18nStrings,\n __internalRootRef,\n constraintText,\n errorText,\n warningText,\n fileErrors,\n fileWarnings,\n fileTokenAlignment = 'vertical',\n ...restProps\n }: InternalFileUploadProps,\n externalRef: ForwardedRef<ButtonProps.Ref>\n) {\n const [nextFocusIndex, setNextFocusIndex] = useState<null | number>(null);\n const tokenListRef = useListFocusController({\n nextFocusIndex,\n onFocusMoved: target => {\n target.focus();\n setNextFocusIndex(null);\n },\n listItemSelector: `.${tokenListStyles['list-item']}`,\n showMoreSelector: `.${tokenListStyles.toggle}`,\n fallbackSelector: `.${fileInputStyles['file-input']}`,\n });\n\n const i18n = useInternalI18n('file-upload');\n const baseProps = getBaseProps(restProps);\n const metadata = { showFileSize, showFileLastModified, showFileThumbnail };\n\n const errorId = useUniqueId('error-');\n const warningId = useUniqueId('warning-');\n const constraintTextId = useUniqueId('constraint-text-');\n\n const fileInputRef = useRef<ButtonProps.Ref>(null);\n const ref = useMergeRefs(fileInputRef, externalRef);\n\n checkControlled('FileUpload', 'value', value, 'onChange', onChange);\n\n if (!multiple && value.length > 1) {\n warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');\n }\n\n const handleFilesChange = (newFiles: File[]) => {\n const newValue = multiple ? [...value, ...newFiles] : newFiles[0] ? newFiles.slice(0, 1) : [...value];\n fireNonCancelableEvent(onChange, { value: newValue });\n };\n\n const onFileRemove = (removeFileIndex: number) => {\n const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);\n fireNonCancelableEvent(onChange, { value: newValue });\n setNextFocusIndex(removeFileIndex);\n };\n\n const { areFilesDragging } = useFilesDragging();\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const formFieldContext = useFormFieldContext(restProps);\n const ariaDescribedBy = joinStrings(\n restProps.ariaDescribedby ?? formFieldContext.ariaDescribedby,\n errorText ? errorId : undefined,\n showWarning ? warningId : undefined,\n constraintText ? constraintTextId : undefined\n );\n\n const hasError = Boolean(errorText || fileErrors?.filter(Boolean).length);\n const invalid = restProps.invalid || formFieldContext.invalid || hasError;\n\n return (\n <InternalSpaceBetween\n {...baseProps}\n size=\"xs\"\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n ref={tokenListRef}\n >\n <InternalBox>\n {areFilesDragging ? (\n <InternalFileDropzone onChange={event => handleFilesChange(event.detail.value)}>\n {i18n('i18nStrings.dropzoneText', i18nStrings?.dropzoneText?.(multiple), format =>\n format({ multiple: `${multiple}` })\n )}\n </InternalFileDropzone>\n ) : (\n <InternalFileInput\n ref={ref}\n accept={accept}\n ariaRequired={ariaRequired}\n multiple={multiple}\n onChange={event => handleFilesChange(event.detail.value)}\n value={value}\n ariaLabelledby={restProps.ariaLabelledby}\n controlId={restProps.controlId}\n ariaDescribedby={ariaDescribedBy}\n invalid={invalid}\n >\n {i18n('i18nStrings.uploadButtonText', i18nStrings?.uploadButtonText?.(multiple), format =>\n format({ multiple: `${multiple}` })\n )}\n </InternalFileInput>\n )}\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError\n id={errorId}\n errorIconAriaLabel={i18n('i18nStrings.errorIconAriaLabel', i18nStrings?.errorIconAriaLabel)}\n >\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning\n id={warningId}\n warningIconAriaLabel={i18n('i18nStrings.warningIconAriaLabel', i18nStrings?.warningIconAriaLabel)}\n >\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={constraintTextId} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </InternalBox>\n\n {value.length > 0 ? (\n <InternalFileTokenGroup\n limit={tokenLimit}\n alignment={fileTokenAlignment}\n items={value.map((file, fileIndex) => ({\n file,\n errorText: fileErrors?.[fileIndex],\n warningText: fileWarnings?.[fileIndex],\n }))}\n showFileLastModified={metadata.showFileLastModified}\n showFileSize={metadata.showFileSize}\n showFileThumbnail={metadata.showFileThumbnail}\n i18nStrings={{\n removeFileAriaLabel: i18n(\n 'i18nStrings.removeFileAriaLabel',\n i18nStrings?.removeFileAriaLabel,\n format => (fileIndex: number, fileName: string) => format({ fileIndex: fileIndex + 1, fileName })\n ),\n limitShowFewer: i18n('i18nStrings.limitShowFewer', i18nStrings?.limitShowFewer),\n limitShowMore: i18n('i18nStrings.limitShowMore', i18nStrings?.limitShowMore),\n formatFileSize: i18nStrings?.formatFileSize,\n formatFileLastModified: i18nStrings?.formatFileLastModified,\n errorIconAriaLabel: i18n('i18nStrings.errorIconAriaLabel', i18nStrings?.errorIconAriaLabel),\n warningIconAriaLabel: i18n('i18nStrings.warningIconAriaLabel', i18nStrings?.warningIconAriaLabel),\n }}\n onDismiss={event => onFileRemove(event.detail.fileIndex)}\n />\n ) : null}\n </InternalSpaceBetween>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { ForwardedRef, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport InternalFileDropzone from '../file-dropzone/internal';\nimport { useFilesDragging } from '../file-dropzone/use-files-dragging';\nimport InternalFileInput from '../file-input/internal';\nimport InternalFileTokenGroup from '../file-token-group/internal';\nimport { ConstraintTextRegion, FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useListFocusController } from '../internal/hooks/use-list-focus-controller';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { FileUploadProps } from './interfaces';\n\nimport fileInputStyles from '../file-input/styles.css.js';\nimport tokenListStyles from '../internal/components/token-list/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalFileUploadProps = FileUploadProps & InternalBaseComponentProps;\n\nexport default React.forwardRef(InternalFileUpload);\n\nfunction InternalFileUpload(\n {\n accept,\n ariaRequired,\n multiple = false,\n onChange,\n value,\n tokenLimit,\n showFileSize,\n showFileLastModified,\n showFileThumbnail,\n i18nStrings,\n __internalRootRef,\n constraintText,\n errorText,\n warningText,\n fileErrors,\n fileWarnings,\n fileTokenAlignment = 'vertical',\n ...restProps\n }: InternalFileUploadProps,\n externalRef: ForwardedRef<ButtonProps.Ref>\n) {\n const [nextFocusIndex, setNextFocusIndex] = useState<null | number>(null);\n const tokenListRef = useListFocusController({\n nextFocusIndex,\n onFocusMoved: target => {\n target.focus();\n setNextFocusIndex(null);\n },\n listItemSelector: `.${tokenListStyles['list-item']}`,\n showMoreSelector: `.${tokenListStyles.toggle}`,\n fallbackSelector: `.${fileInputStyles['file-input']}`,\n });\n\n const i18n = useInternalI18n('file-upload');\n const baseProps = getBaseProps(restProps);\n const metadata = { showFileSize, showFileLastModified, showFileThumbnail };\n\n const errorId = useUniqueId('error-');\n const warningId = useUniqueId('warning-');\n const constraintTextId = useUniqueId('constraint-text-');\n\n const fileInputRef = useRef<ButtonProps.Ref>(null);\n const ref = useMergeRefs(fileInputRef, externalRef);\n\n checkControlled('FileUpload', 'value', value, 'onChange', onChange);\n\n if (!multiple && value.length > 1) {\n warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');\n }\n\n const handleFilesChange = (newFiles: File[]) => {\n const newValue = multiple ? [...value, ...newFiles] : newFiles[0] ? newFiles.slice(0, 1) : [...value];\n fireNonCancelableEvent(onChange, { value: newValue });\n };\n\n const onFileRemove = (removeFileIndex: number) => {\n const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);\n fireNonCancelableEvent(onChange, { value: newValue });\n setNextFocusIndex(removeFileIndex);\n };\n\n const { areFilesDragging } = useFilesDragging();\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const formFieldContext = useFormFieldContext(restProps);\n const ariaDescribedBy = joinStrings(\n restProps.ariaDescribedby ?? formFieldContext.ariaDescribedby,\n errorText ? errorId : undefined,\n showWarning ? warningId : undefined,\n constraintText ? constraintTextId : undefined\n );\n\n const hasError = Boolean(errorText || fileErrors?.filter(Boolean).length);\n const invalid = restProps.invalid || formFieldContext.invalid || hasError;\n\n return (\n <InternalSpaceBetween\n {...baseProps}\n size=\"xs\"\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n ref={tokenListRef}\n >\n <InternalBox>\n {areFilesDragging ? (\n <InternalFileDropzone onChange={event => handleFilesChange(event.detail.value)}>\n {i18n('i18nStrings.dropzoneText', i18nStrings?.dropzoneText?.(multiple), format =>\n format({ multiple: `${multiple}` })\n )}\n </InternalFileDropzone>\n ) : (\n <InternalFileInput\n ref={ref}\n accept={accept}\n ariaRequired={ariaRequired}\n multiple={multiple}\n onChange={event => handleFilesChange(event.detail.value)}\n value={value}\n ariaLabelledby={restProps.ariaLabelledby}\n controlId={restProps.controlId}\n ariaDescribedby={ariaDescribedBy}\n invalid={invalid}\n >\n {i18n('i18nStrings.uploadButtonText', i18nStrings?.uploadButtonText?.(multiple), format =>\n format({ multiple: `${multiple}` })\n )}\n </InternalFileInput>\n )}\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError\n id={errorId}\n errorIconAriaLabel={i18n('i18nStrings.errorIconAriaLabel', i18nStrings?.errorIconAriaLabel)}\n >\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning\n id={warningId}\n warningIconAriaLabel={i18n('i18nStrings.warningIconAriaLabel', i18nStrings?.warningIconAriaLabel)}\n >\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintTextRegion id={constraintTextId} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintTextRegion>\n )}\n </div>\n )}\n </InternalBox>\n\n {value.length > 0 ? (\n <InternalFileTokenGroup\n limit={tokenLimit}\n alignment={fileTokenAlignment}\n items={value.map((file, fileIndex) => ({\n file,\n errorText: fileErrors?.[fileIndex],\n warningText: fileWarnings?.[fileIndex],\n }))}\n showFileLastModified={metadata.showFileLastModified}\n showFileSize={metadata.showFileSize}\n showFileThumbnail={metadata.showFileThumbnail}\n i18nStrings={{\n removeFileAriaLabel: i18n(\n 'i18nStrings.removeFileAriaLabel',\n i18nStrings?.removeFileAriaLabel,\n format => (fileIndex: number, fileName: string) => format({ fileIndex: fileIndex + 1, fileName })\n ),\n limitShowFewer: i18n('i18nStrings.limitShowFewer', i18nStrings?.limitShowFewer),\n limitShowMore: i18n('i18nStrings.limitShowMore', i18nStrings?.limitShowMore),\n formatFileSize: i18nStrings?.formatFileSize,\n formatFileLastModified: i18nStrings?.formatFileLastModified,\n errorIconAriaLabel: i18n('i18nStrings.errorIconAriaLabel', i18nStrings?.errorIconAriaLabel),\n warningIconAriaLabel: i18n('i18nStrings.warningIconAriaLabel', i18nStrings?.warningIconAriaLabel),\n }}\n onDismiss={event => onFileRemove(event.detail.fileIndex)}\n />\n ) : null}\n </InternalSpaceBetween>\n );\n}\n"]}
|
|
@@ -55,6 +55,12 @@ export interface FormFieldProps extends BaseComponentProps {
|
|
|
55
55
|
* additional information about valid formats, etc.
|
|
56
56
|
*/
|
|
57
57
|
constraintText?: React.ReactNode;
|
|
58
|
+
/**
|
|
59
|
+
* Character count constraint displayed adjacent to the constraintText. Use
|
|
60
|
+
* this to provide an updated character count on each keypress that is debounced
|
|
61
|
+
* for screen reader users.
|
|
62
|
+
*/
|
|
63
|
+
characterCountText?: string;
|
|
58
64
|
/**
|
|
59
65
|
* Text that displays as a validation error message. If this is set to a
|
|
60
66
|
* non-empty string, it will render the form field as invalid.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IAEzC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC;CACtD;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAE5B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC/B;CACF;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,EAAE,0BAA0B;IACxF;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;IACxC,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB"}
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IAEzC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC;CACtD;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAE5B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC/B;CACF;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,EAAE,0BAA0B;IACxF;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;IACxC,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { CSSProperties } from 'react';\n\nimport { AnalyticsMetadata, ErrorContext } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface FormFieldProps extends BaseComponentProps {\n /**\n * The ID of the primary form control. You can use this to set the\n * `for` attribute of a label for accessibility.\n *\n * If you don't set this property, the control group automatically sets\n * the label to the ID of an inner form control (for example, an [input](/components/input) component).\n * This only works well if you're using a single control in the form field.\n */\n controlId?: string;\n\n /**\n * Determines whether the primary control should expand to 12 columns.\n *\n * By default (or when this property is set to `false`), the primary control\n * occupies 9 columns. The secondary control uses the remaining 3 columns.\n * On smaller viewports, both components occupy 12 columns and stack on top of each other.\n *\n * If this property is set to `true`, the primary control uses the full\n * 12 columns. The secondary control (if present) also uses 12 columns, and the two\n * controls stack on top of each other.\n */\n stretch?: boolean;\n\n /**\n * The main label for the form field.\n */\n label?: React.ReactNode;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n * @i18n\n */\n i18nStrings?: FormFieldProps.I18nStrings;\n\n /**\n * Use to display an 'Info' link next to the label.\n */\n info?: React.ReactNode;\n\n /**\n * The primary form control (for example, input, textarea, etc.).\n * @displayname control\n */\n children?: React.ReactNode;\n\n /**\n * A secondary control. You can use this for custom actions and content.\n */\n secondaryControl?: React.ReactNode;\n\n /**\n * Detailed information about the form field that's displayed below the label.\n */\n description?: React.ReactNode;\n\n /**\n * Constraint text that's displayed below the control. Use this to provide\n * additional information about valid formats, etc.\n */\n constraintText?: React.ReactNode;\n\n /**\n * Text that displays as a validation error message. If this is set to a\n * non-empty string, it will render the form field as invalid.\n */\n errorText?: React.ReactNode;\n\n /**\n * Text that displays as a validation warning message. If this is set to a\n * non-empty string, it will render the form field in a warning state.\n */\n warningText?: React.ReactNode;\n\n /**\n * Specifies additional analytics-related metadata.\n * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n * * `errorContext` - Identifies the error category and sub-category.\n * @analytics\n */\n analyticsMetadata?: FormFieldProps.AnalyticsMetadata;\n}\n\nexport namespace FormFieldProps {\n export interface AnalyticsMetadata {\n instanceIdentifier?: string;\n errorContext?: ErrorContext;\n }\n\n export interface I18nStrings {\n /**\n * Provides a text alternative for the error icon in the error message.\n */\n errorIconAriaLabel?: string;\n\n /**\n * Provides a text alternative for the warning icon in the warning message.\n */\n warningIconAriaLabel?: string;\n }\n}\n\nexport interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps {\n /**\n * Visually hide the label.\n */\n __hideLabel?: boolean;\n\n /**\n * Disable the gutter applied by default.\n */\n __disableGutters?: boolean;\n __analyticsMetadata?: AnalyticsMetadata;\n __style?: CSSProperties;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { CSSProperties } from 'react';\n\nimport { AnalyticsMetadata, ErrorContext } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface FormFieldProps extends BaseComponentProps {\n /**\n * The ID of the primary form control. You can use this to set the\n * `for` attribute of a label for accessibility.\n *\n * If you don't set this property, the control group automatically sets\n * the label to the ID of an inner form control (for example, an [input](/components/input) component).\n * This only works well if you're using a single control in the form field.\n */\n controlId?: string;\n\n /**\n * Determines whether the primary control should expand to 12 columns.\n *\n * By default (or when this property is set to `false`), the primary control\n * occupies 9 columns. The secondary control uses the remaining 3 columns.\n * On smaller viewports, both components occupy 12 columns and stack on top of each other.\n *\n * If this property is set to `true`, the primary control uses the full\n * 12 columns. The secondary control (if present) also uses 12 columns, and the two\n * controls stack on top of each other.\n */\n stretch?: boolean;\n\n /**\n * The main label for the form field.\n */\n label?: React.ReactNode;\n\n /**\n * An object containing all the necessary localized strings required by the component.\n * @i18n\n */\n i18nStrings?: FormFieldProps.I18nStrings;\n\n /**\n * Use to display an 'Info' link next to the label.\n */\n info?: React.ReactNode;\n\n /**\n * The primary form control (for example, input, textarea, etc.).\n * @displayname control\n */\n children?: React.ReactNode;\n\n /**\n * A secondary control. You can use this for custom actions and content.\n */\n secondaryControl?: React.ReactNode;\n\n /**\n * Detailed information about the form field that's displayed below the label.\n */\n description?: React.ReactNode;\n\n /**\n * Constraint text that's displayed below the control. Use this to provide\n * additional information about valid formats, etc.\n */\n constraintText?: React.ReactNode;\n\n /**\n * Character count constraint displayed adjacent to the constraintText. Use\n * this to provide an updated character count on each keypress that is debounced\n * for screen reader users.\n */\n characterCountText?: string;\n\n /**\n * Text that displays as a validation error message. If this is set to a\n * non-empty string, it will render the form field as invalid.\n */\n errorText?: React.ReactNode;\n\n /**\n * Text that displays as a validation warning message. If this is set to a\n * non-empty string, it will render the form field in a warning state.\n */\n warningText?: React.ReactNode;\n\n /**\n * Specifies additional analytics-related metadata.\n * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n * * `errorContext` - Identifies the error category and sub-category.\n * @analytics\n */\n analyticsMetadata?: FormFieldProps.AnalyticsMetadata;\n}\n\nexport namespace FormFieldProps {\n export interface AnalyticsMetadata {\n instanceIdentifier?: string;\n errorContext?: ErrorContext;\n }\n\n export interface I18nStrings {\n /**\n * Provides a text alternative for the error icon in the error message.\n */\n errorIconAriaLabel?: string;\n\n /**\n * Provides a text alternative for the warning icon in the warning message.\n */\n warningIconAriaLabel?: string;\n }\n}\n\nexport interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps {\n /**\n * Visually hide the label.\n */\n __hideLabel?: boolean;\n\n /**\n * Disable the gutter applied by default.\n */\n __disableGutters?: boolean;\n __analyticsMetadata?: AnalyticsMetadata;\n __style?: CSSProperties;\n}\n"]}
|
|
@@ -12,11 +12,11 @@ interface FormFieldWarningProps {
|
|
|
12
12
|
}
|
|
13
13
|
export declare function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps): JSX.Element;
|
|
14
14
|
export declare function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFieldWarningProps): JSX.Element;
|
|
15
|
-
export declare function
|
|
15
|
+
export declare function ConstraintTextRegion({ id, hasValidationText, children, }: {
|
|
16
16
|
id?: string;
|
|
17
17
|
hasValidationText: boolean;
|
|
18
18
|
children: React.ReactNode;
|
|
19
19
|
}): JSX.Element;
|
|
20
|
-
export default function InternalFormField({ controlId, stretch, label, info, i18nStrings, children, secondaryControl, description, constraintText, errorText, warningText, __hideLabel, __internalRootRef, __disableGutters, __analyticsMetadata, __style, ...rest }: InternalFormFieldProps): JSX.Element;
|
|
20
|
+
export default function InternalFormField({ controlId, stretch, label, info, i18nStrings, children, secondaryControl, description, constraintText, characterCountText, errorText, warningText, __hideLabel, __internalRootRef, __disableGutters, __analyticsMetadata, __style, ...rest }: InternalFormFieldProps): JSX.Element;
|
|
21
21
|
export {};
|
|
22
22
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAyB3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAOtD,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,UAAU,qBAAqB;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAID,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,mBAAmB,eAqBvF;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,oBAAoB,EAAE,EAAE,qBAAqB,eAqB7F;AAED,wBAAgB,oBAAoB,CAAC,EACnC,EAAE,EACF,iBAAiB,EACjB,QAAQ,GACT,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAMA;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,SAAS,EACT,OAAe,EACf,KAAK,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,gBAAwB,EACxB,mBAA+B,EAC/B,OAAY,EACZ,GAAG,IAAI,EACR,EAAE,sBAAsB,eAyLxB"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import React, { useEffect, useRef } from 'react';
|
|
3
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
|
|
6
6
|
import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
@@ -11,6 +11,7 @@ import { FunnelMetrics } from '../internal/analytics';
|
|
|
11
11
|
import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
|
|
12
12
|
import { DATA_ATTR_FIELD_ERROR, DATA_ATTR_FIELD_LABEL, getFieldSlotSeletor, getSubStepAllSelector, getTextFromSelector, } from '../internal/analytics/selectors';
|
|
13
13
|
import { getBaseProps } from '../internal/base-component';
|
|
14
|
+
import ScreenreaderOnly from '../internal/components/screenreader-only';
|
|
14
15
|
import { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';
|
|
15
16
|
import { InfoLinkLabelContext } from '../internal/context/info-link-label-context';
|
|
16
17
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
@@ -19,6 +20,8 @@ import InternalLiveRegion from '../live-region/internal';
|
|
|
19
20
|
import { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';
|
|
20
21
|
import analyticsSelectors from './analytics-metadata/styles.css.js';
|
|
21
22
|
import styles from './styles.css.js';
|
|
23
|
+
import testStyles from './test-classes/styles.css.js';
|
|
24
|
+
const CHARACTER_COUNT_DEBOUNCE_MS = 1000;
|
|
22
25
|
export function FormFieldError({ id, children, errorIconAriaLabel }) {
|
|
23
26
|
const i18n = useInternalI18n('form-field');
|
|
24
27
|
const contentRef = useRef(null);
|
|
@@ -43,10 +46,10 @@ export function FormFieldWarning({ id, children, warningIconAriaLabel }) {
|
|
|
43
46
|
React.createElement("span", { className: styles.warning__message, ref: contentRef }, children)),
|
|
44
47
|
React.createElement(InternalLiveRegion, { assertive: true, tagName: "span", sources: [i18nWarningIconAriaLabel, contentRef] })));
|
|
45
48
|
}
|
|
46
|
-
export function
|
|
49
|
+
export function ConstraintTextRegion({ id, hasValidationText, children, }) {
|
|
47
50
|
return (React.createElement("div", { id: id, className: clsx(styles.constraint, hasValidationText && styles['constraint-has-validation-text']) }, children));
|
|
48
51
|
}
|
|
49
|
-
export default function InternalFormField({ controlId, stretch = false, label, info, i18nStrings, children, secondaryControl, description, constraintText, errorText, warningText, __hideLabel, __internalRootRef, __disableGutters = false, __analyticsMetadata = undefined, __style = {}, ...rest }) {
|
|
52
|
+
export default function InternalFormField({ controlId, stretch = false, label, info, i18nStrings, children, secondaryControl, description, constraintText, characterCountText, errorText, warningText, __hideLabel, __internalRootRef, __disableGutters = false, __analyticsMetadata = undefined, __style = {}, ...rest }) {
|
|
50
53
|
const rootRef = useRef();
|
|
51
54
|
const ref = useMergeRefs(rootRef, __internalRootRef);
|
|
52
55
|
const baseProps = getBaseProps(rest);
|
|
@@ -61,7 +64,7 @@ export default function InternalFormField({ controlId, stretch = false, label, i
|
|
|
61
64
|
if (warningText && errorText) {
|
|
62
65
|
warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');
|
|
63
66
|
}
|
|
64
|
-
const slotIds = getSlotIds(formFieldId, label, description, constraintText, errorText, showWarning ? warningText : undefined);
|
|
67
|
+
const slotIds = getSlotIds(formFieldId, label, description, constraintText, characterCountText, errorText, showWarning ? warningText : undefined);
|
|
65
68
|
const ariaDescribedBy = getAriaDescribedBy(slotIds);
|
|
66
69
|
const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);
|
|
67
70
|
const { ariaLabelledby: parentAriaLabelledby, ariaDescribedby: parentAriaDescribedby, invalid: parentInvalid, warning: parentWarning, } = useFormFieldContext({});
|
|
@@ -75,6 +78,14 @@ export default function InternalFormField({ controlId, stretch = false, label, i
|
|
|
75
78
|
[DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,
|
|
76
79
|
[DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,
|
|
77
80
|
};
|
|
81
|
+
const debounceTimeoutRef = useRef();
|
|
82
|
+
const [debouncedCharacterCountText, setDebouncedCharacterCountText] = useState(characterCountText);
|
|
83
|
+
useEffect(() => {
|
|
84
|
+
debounceTimeoutRef.current = setTimeout(() => {
|
|
85
|
+
setDebouncedCharacterCountText(characterCountText);
|
|
86
|
+
}, CHARACTER_COUNT_DEBOUNCE_MS);
|
|
87
|
+
return () => clearTimeout(debounceTimeoutRef.current);
|
|
88
|
+
}, [characterCountText]);
|
|
78
89
|
useEffect(() => {
|
|
79
90
|
var _a, _b, _c;
|
|
80
91
|
if (funnelInteractionId && errorText && funnelState.current !== 'complete') {
|
|
@@ -122,9 +133,14 @@ export default function InternalFormField({ controlId, stretch = false, label, i
|
|
|
122
133
|
} }, children && React.createElement("div", { className: styles.control }, children)),
|
|
123
134
|
secondaryControl && (React.createElement(FormFieldContext.Provider, { value: contextValuesWithoutControlId },
|
|
124
135
|
React.createElement("div", { className: styles['secondary-control'] }, secondaryControl))))),
|
|
125
|
-
(constraintText || errorText || warningText) && (React.createElement("div", { className: styles.hints },
|
|
136
|
+
(constraintText || characterCountText || errorText || warningText) && (React.createElement("div", { className: styles.hints },
|
|
126
137
|
errorText && (React.createElement(FormFieldError, { id: slotIds.error, errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, errorText)),
|
|
127
138
|
showWarning && (React.createElement(FormFieldWarning, { id: slotIds.warning, warningIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.warningIconAriaLabel }, warningText)),
|
|
128
|
-
constraintText && (React.createElement(
|
|
139
|
+
(constraintText || characterCountText) && (React.createElement(ConstraintTextRegion, { hasValidationText: !!errorText || !!warningText },
|
|
140
|
+
constraintText && (React.createElement("span", { id: slotIds.constraint, className: testStyles.constraint }, constraintText)),
|
|
141
|
+
characterCountText && (React.createElement(React.Fragment, null,
|
|
142
|
+
!!constraintText && ' ',
|
|
143
|
+
React.createElement("span", { className: testStyles['character-count'], "aria-hidden": true }, characterCountText),
|
|
144
|
+
React.createElement(ScreenreaderOnly, { id: slotIds.characterCount }, debouncedCharacterCountText)))))))));
|
|
129
145
|
}
|
|
130
146
|
//# sourceMappingURL=internal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalGrid from '../grid/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport InternalIcon from '../icon/internal';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getSubStepAllSelector,\n getTextFromSelector,\n} from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalLiveRegion from '../live-region/internal';\nimport { InternalFormFieldProps } from './interfaces';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\ninterface FormFieldWarningProps {\n id?: string;\n children?: React.ReactNode;\n warningIconAriaLabel?: string;\n}\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement | null>(null);\n const i18nErrorIconAriaLabel = i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div className={styles['error-icon-scale-wrapper']}>\n <InternalIcon name=\"status-negative\" size=\"small\" ariaLabel={i18nErrorIconAriaLabel} />\n </div>\n </div>\n <span className={styles.error__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <InternalLiveRegion assertive={true} tagName=\"span\" sources={[i18nErrorIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFieldWarningProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement | null>(null);\n const i18nWarningIconAriaLabel = i18n('i18nStrings.warningIconAriaLabel', warningIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.warning}>\n <div className={styles['warning-icon-shake-wrapper']}>\n <div className={styles['warning-icon-scale-wrapper']}>\n <InternalIcon name=\"status-warning\" size=\"small\" ariaLabel={i18nWarningIconAriaLabel} />\n </div>\n </div>\n <span className={styles.warning__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <InternalLiveRegion assertive={true} tagName=\"span\" sources={[i18nWarningIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function ConstraintText({\n id,\n hasValidationText,\n children,\n}: {\n id?: string;\n hasValidationText: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasValidationText && styles['constraint-has-validation-text'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n errorText,\n warningText,\n __hideLabel,\n __internalRootRef,\n __disableGutters = false,\n __analyticsMetadata = undefined,\n __style = {},\n ...rest\n}: InternalFormFieldProps) {\n const rootRef = useRef<HTMLElement>();\n const ref = useMergeRefs(rootRef, __internalRootRef);\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId || instanceUniqueId;\n const formFieldId = controlId || generatedControlId;\n\n const { funnelIdentifier, funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepIdentifier, stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepIdentifier, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const slotIds = getSlotIds(\n formFieldId,\n label,\n description,\n constraintText,\n errorText,\n showWarning ? warningText : undefined\n );\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n warning: parentWarning,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n invalid: !!errorText || !!parentInvalid,\n warning: (!!warningText && !errorText) || (!!parentWarning && !parentInvalid),\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n useEffect(() => {\n if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n const stepName = getTextFromSelector(stepNameSelector);\n const subStepName = getTextFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n const errorIsVisible = (rootRef.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n if (errorIsVisible) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n funnelIdentifier,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n subStepIdentifier,\n stepNumber,\n stepName,\n stepNameSelector,\n stepIdentifier,\n fieldErrorSelector: `${getFieldSlotSeletor(slotIds.error)} .${styles.error__message}`,\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n fieldIdentifier: __analyticsMetadata?.instanceIdentifier,\n errorContext: __analyticsMetadata?.errorContext,\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n style={__style}\n ref={ref}\n {...analyticsAttributes}\n {...copyAnalyticsMetadataAttribute(rest)}\n >\n <div className={clsx(styles['label-wrapper'], __hideLabel && styles['visually-hidden'])}>\n {label && (\n <label\n className={clsx(styles.label, analyticsSelectors.label)}\n id={slotIds.label}\n htmlFor={generatedControlId}\n >\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={slotIds.warning} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {constraintText && (\n <ConstraintText id={slotIds.constraint} hasValidationText={!!errorText || !!warningText}>\n {constraintText}\n </ConstraintText>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/form-field/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalGrid from '../grid/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport InternalIcon from '../icon/internal';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FIELD_ERROR,\n DATA_ATTR_FIELD_LABEL,\n getFieldSlotSeletor,\n getSubStepAllSelector,\n getTextFromSelector,\n} from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { FormFieldContext, useFormFieldContext } from '../internal/context/form-field-context';\nimport { InfoLinkLabelContext } from '../internal/context/info-link-label-context';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalLiveRegion from '../live-region/internal';\nimport { InternalFormFieldProps } from './interfaces';\nimport { getAriaDescribedBy, getGridDefinition, getSlotIds } from './util';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\ninterface FormFieldErrorProps {\n id?: string;\n children?: React.ReactNode;\n errorIconAriaLabel?: string;\n}\n\ninterface FormFieldWarningProps {\n id?: string;\n children?: React.ReactNode;\n warningIconAriaLabel?: string;\n}\n\nconst CHARACTER_COUNT_DEBOUNCE_MS = 1000;\n\nexport function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldErrorProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement | null>(null);\n const i18nErrorIconAriaLabel = i18n('i18nStrings.errorIconAriaLabel', errorIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.error}>\n <div className={styles['error-icon-shake-wrapper']}>\n <div className={styles['error-icon-scale-wrapper']}>\n <InternalIcon name=\"status-negative\" size=\"small\" ariaLabel={i18nErrorIconAriaLabel} />\n </div>\n </div>\n <span className={styles.error__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <InternalLiveRegion assertive={true} tagName=\"span\" sources={[i18nErrorIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFieldWarningProps) {\n const i18n = useInternalI18n('form-field');\n const contentRef = useRef<HTMLDivElement | null>(null);\n const i18nWarningIconAriaLabel = i18n('i18nStrings.warningIconAriaLabel', warningIconAriaLabel);\n\n return (\n <>\n <div id={id} className={styles.warning}>\n <div className={styles['warning-icon-shake-wrapper']}>\n <div className={styles['warning-icon-scale-wrapper']}>\n <InternalIcon name=\"status-warning\" size=\"small\" ariaLabel={i18nWarningIconAriaLabel} />\n </div>\n </div>\n <span className={styles.warning__message} ref={contentRef}>\n {children}\n </span>\n </div>\n\n <InternalLiveRegion assertive={true} tagName=\"span\" sources={[i18nWarningIconAriaLabel, contentRef]} />\n </>\n );\n}\n\nexport function ConstraintTextRegion({\n id,\n hasValidationText,\n children,\n}: {\n id?: string;\n hasValidationText: boolean;\n children: React.ReactNode;\n}) {\n return (\n <div id={id} className={clsx(styles.constraint, hasValidationText && styles['constraint-has-validation-text'])}>\n {children}\n </div>\n );\n}\n\nexport default function InternalFormField({\n controlId,\n stretch = false,\n label,\n info,\n i18nStrings,\n children,\n secondaryControl,\n description,\n constraintText,\n characterCountText,\n errorText,\n warningText,\n __hideLabel,\n __internalRootRef,\n __disableGutters = false,\n __analyticsMetadata = undefined,\n __style = {},\n ...rest\n}: InternalFormFieldProps) {\n const rootRef = useRef<HTMLElement>();\n const ref = useMergeRefs(rootRef, __internalRootRef);\n const baseProps = getBaseProps(rest);\n const isRefresh = useVisualRefresh();\n\n const instanceUniqueId = useUniqueId('formField');\n const generatedControlId = controlId || instanceUniqueId;\n const formFieldId = controlId || generatedControlId;\n\n const { funnelIdentifier, funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n const { stepIdentifier, stepNumber, stepNameSelector } = useFunnelStep();\n const { subStepIdentifier, subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n const showWarning = warningText && !errorText;\n\n if (warningText && errorText) {\n warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n }\n\n const slotIds = getSlotIds(\n formFieldId,\n label,\n description,\n constraintText,\n characterCountText,\n errorText,\n showWarning ? warningText : undefined\n );\n\n const ariaDescribedBy = getAriaDescribedBy(slotIds);\n\n const gridDefinition = getGridDefinition(stretch, !!secondaryControl, isRefresh);\n\n const {\n ariaLabelledby: parentAriaLabelledby,\n ariaDescribedby: parentAriaDescribedby,\n invalid: parentInvalid,\n warning: parentWarning,\n } = useFormFieldContext({});\n\n const contextValuesWithoutControlId = {\n ariaLabelledby: joinStrings(parentAriaLabelledby, slotIds.label) || undefined,\n ariaDescribedby: joinStrings(parentAriaDescribedby, ariaDescribedBy) || undefined,\n invalid: !!errorText || !!parentInvalid,\n warning: (!!warningText && !errorText) || (!!parentWarning && !parentInvalid),\n };\n\n const analyticsAttributes = {\n [DATA_ATTR_FIELD_LABEL]: slotIds.label ? getFieldSlotSeletor(slotIds.label) : undefined,\n [DATA_ATTR_FIELD_ERROR]: slotIds.error ? getFieldSlotSeletor(slotIds.error) : undefined,\n };\n\n const debounceTimeoutRef = useRef<number | undefined>();\n const [debouncedCharacterCountText, setDebouncedCharacterCountText] = useState(characterCountText);\n\n useEffect(() => {\n debounceTimeoutRef.current = setTimeout(() => {\n setDebouncedCharacterCountText(characterCountText);\n }, CHARACTER_COUNT_DEBOUNCE_MS);\n return () => clearTimeout(debounceTimeoutRef.current);\n }, [characterCountText]);\n\n useEffect(() => {\n if (funnelInteractionId && errorText && funnelState.current !== 'complete') {\n const stepName = getTextFromSelector(stepNameSelector);\n const subStepName = getTextFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n const errorIsVisible = (rootRef.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n if (errorIsVisible) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n funnelIdentifier,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n subStepIdentifier,\n stepNumber,\n stepName,\n stepNameSelector,\n stepIdentifier,\n fieldErrorSelector: `${getFieldSlotSeletor(slotIds.error)} .${styles.error__message}`,\n fieldLabelSelector: getFieldSlotSeletor(slotIds.label),\n subStepAllSelector: getSubStepAllSelector(),\n fieldIdentifier: __analyticsMetadata?.instanceIdentifier,\n errorContext: __analyticsMetadata?.errorContext,\n });\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, errorText, submissionAttempt, errorCount]);\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n style={__style}\n ref={ref}\n {...analyticsAttributes}\n {...copyAnalyticsMetadataAttribute(rest)}\n >\n <div className={clsx(styles['label-wrapper'], __hideLabel && styles['visually-hidden'])}>\n {label && (\n <label\n className={clsx(styles.label, analyticsSelectors.label)}\n id={slotIds.label}\n htmlFor={generatedControlId}\n >\n {label}\n </label>\n )}\n <InfoLinkLabelContext.Provider value={slotIds.label}>\n {!__hideLabel && info && <span className={styles.info}>{info}</span>}\n </InfoLinkLabelContext.Provider>\n </div>\n\n {description && (\n <div className={styles.description} id={slotIds.description}>\n {description}\n </div>\n )}\n\n <div className={clsx(styles.controls, __hideLabel && styles['label-hidden'])}>\n <InternalGrid gridDefinition={gridDefinition} disableGutters={__disableGutters}>\n <FormFieldContext.Provider\n value={{\n controlId: generatedControlId,\n ...contextValuesWithoutControlId,\n }}\n >\n {children && <div className={styles.control}>{children}</div>}\n </FormFieldContext.Provider>\n\n {secondaryControl && (\n <FormFieldContext.Provider value={contextValuesWithoutControlId}>\n <div className={styles['secondary-control']}>{secondaryControl}</div>\n </FormFieldContext.Provider>\n )}\n </InternalGrid>\n </div>\n\n {(constraintText || characterCountText || errorText || warningText) && (\n <div className={styles.hints}>\n {errorText && (\n <FormFieldError id={slotIds.error} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={slotIds.warning} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {(constraintText || characterCountText) && (\n <ConstraintTextRegion hasValidationText={!!errorText || !!warningText}>\n {constraintText && (\n <span id={slotIds.constraint} className={testStyles.constraint}>\n {constraintText}\n </span>\n )}\n {characterCountText && (\n <>\n {!!constraintText && ' '}\n <span className={testStyles['character-count']} aria-hidden={true}>\n {characterCountText}\n </span>\n <ScreenreaderOnly id={slotIds.characterCount}>{debouncedCharacterCountText}</ScreenreaderOnly>\n </>\n )}\n </ConstraintTextRegion>\n )}\n </div>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -3,11 +3,12 @@ interface FormFieldIds {
|
|
|
3
3
|
label?: string;
|
|
4
4
|
description?: string;
|
|
5
5
|
constraint?: string;
|
|
6
|
+
characterCount?: string;
|
|
6
7
|
error?: string;
|
|
7
8
|
warning?: string;
|
|
8
9
|
}
|
|
9
|
-
export declare function getSlotIds(formFieldId: string, label?: React.ReactNode, description?: React.ReactNode, constraintText?: React.ReactNode, errorText?: React.ReactNode, warningText?: React.ReactNode): FormFieldIds;
|
|
10
|
-
export declare function getAriaDescribedBy({ error, warning, description, constraint }: FormFieldIds): string | undefined;
|
|
10
|
+
export declare function getSlotIds(formFieldId: string, label?: React.ReactNode, description?: React.ReactNode, constraintText?: React.ReactNode, characterCount?: string, errorText?: React.ReactNode, warningText?: React.ReactNode): FormFieldIds;
|
|
11
|
+
export declare function getAriaDescribedBy({ error, warning, description, constraint, characterCount }: FormFieldIds): string | undefined;
|
|
11
12
|
export declare function getGridDefinition(stretch: boolean, secondaryControlPresent: boolean, isRefresh: boolean): {
|
|
12
13
|
colspan: GridProps.BreakpointMapping | number;
|
|
13
14
|
}[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAUD,wBAAgB,UAAU,CACxB,WAAW,EAAE,MAAM,EACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,EACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAC7B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,EAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,EAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAUD,wBAAgB,UAAU,CACxB,WAAW,EAAE,MAAM,EACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,EACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAC7B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,EAChC,cAAc,CAAC,EAAE,MAAM,EACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,EAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,gBAY9B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,EAAE,YAAY,sBAI3G;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO;aACxE,SAAS,CAAC,iBAAiB,GAAG,MAAM;IAenE"}
|
|
@@ -4,18 +4,19 @@ function makeSlotId(prop, formFieldId, propName) {
|
|
|
4
4
|
}
|
|
5
5
|
return `${formFieldId}-${propName}`;
|
|
6
6
|
}
|
|
7
|
-
export function getSlotIds(formFieldId, label, description, constraintText, errorText, warningText) {
|
|
7
|
+
export function getSlotIds(formFieldId, label, description, constraintText, characterCount, errorText, warningText) {
|
|
8
8
|
const ids = {
|
|
9
9
|
label: makeSlotId(label, formFieldId, 'label'),
|
|
10
10
|
description: makeSlotId(description, formFieldId, 'description'),
|
|
11
11
|
constraint: makeSlotId(constraintText, formFieldId, 'constraint'),
|
|
12
|
+
characterCount: makeSlotId(characterCount, formFieldId, 'character-count'),
|
|
12
13
|
error: makeSlotId(errorText, formFieldId, 'error'),
|
|
13
14
|
warning: makeSlotId(warningText, formFieldId, 'warning'),
|
|
14
15
|
};
|
|
15
16
|
return ids;
|
|
16
17
|
}
|
|
17
|
-
export function getAriaDescribedBy({ error, warning, description, constraint }) {
|
|
18
|
-
const describedByAttributes = [error, warning, description, constraint].filter(e => !!e);
|
|
18
|
+
export function getAriaDescribedBy({ error, warning, description, constraint, characterCount }) {
|
|
19
|
+
const describedByAttributes = [error, warning, description, constraint, characterCount].filter(e => !!e);
|
|
19
20
|
const describedBy = describedByAttributes.length ? describedByAttributes.join(' ') : undefined;
|
|
20
21
|
return describedBy;
|
|
21
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":"AAaA,SAAS,UAAU,CAAC,IAAqB,EAAE,WAAmB,EAAE,QAAgB;IAC9E,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO,GAAG,WAAW,IAAI,QAAQ,EAAE,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,UAAU,CACxB,WAAmB,EACnB,KAAuB,EACvB,WAA6B,EAC7B,cAAgC,EAChC,cAAuB,EACvB,SAA2B,EAC3B,WAA6B;IAE7B,MAAM,GAAG,GAAiB;QACxB,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,CAAC;QAC9C,WAAW,EAAE,UAAU,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC;QAChE,UAAU,EAAE,UAAU,CAAC,cAAc,EAAE,WAAW,EAAE,YAAY,CAAC;QACjE,cAAc,EAAE,UAAU,CAAC,cAAc,EAAE,WAAW,EAAE,iBAAiB,CAAC;QAC1E,KAAK,EAAE,UAAU,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,CAAC;QAClD,OAAO,EAAE,UAAU,CAAC,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC;KACzD,CAAC;IAEF,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAgB;IAC1G,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACzG,MAAM,WAAW,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/F,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,OAAgB,EAAE,uBAAgC,EAAE,SAAkB;IACtG,IAAI,OAAiE,CAAC;IAEtE,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/C,CAAC;SAAM,IAAI,SAAS,EAAE,CAAC;QACrB,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACvF,CAAC;SAAM,CAAC;QACN,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACvF,CAAC;IAED,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC7B,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { GridProps } from '../grid/interfaces';\n\ninterface FormFieldIds {\n label?: string;\n description?: string;\n constraint?: string;\n characterCount?: string;\n error?: string;\n warning?: string;\n}\n\nfunction makeSlotId(prop: React.ReactNode, formFieldId: string, propName: string): string | undefined {\n if (!prop) {\n return undefined;\n }\n\n return `${formFieldId}-${propName}`;\n}\n\nexport function getSlotIds(\n formFieldId: string,\n label?: React.ReactNode,\n description?: React.ReactNode,\n constraintText?: React.ReactNode,\n characterCount?: string,\n errorText?: React.ReactNode,\n warningText?: React.ReactNode\n) {\n const ids: FormFieldIds = {\n label: makeSlotId(label, formFieldId, 'label'),\n description: makeSlotId(description, formFieldId, 'description'),\n constraint: makeSlotId(constraintText, formFieldId, 'constraint'),\n characterCount: makeSlotId(characterCount, formFieldId, 'character-count'),\n error: makeSlotId(errorText, formFieldId, 'error'),\n warning: makeSlotId(warningText, formFieldId, 'warning'),\n };\n\n return ids;\n}\n\nexport function getAriaDescribedBy({ error, warning, description, constraint, characterCount }: FormFieldIds) {\n const describedByAttributes = [error, warning, description, constraint, characterCount].filter(e => !!e);\n const describedBy = describedByAttributes.length ? describedByAttributes.join(' ') : undefined;\n return describedBy;\n}\n\nexport function getGridDefinition(stretch: boolean, secondaryControlPresent: boolean, isRefresh: boolean) {\n let columns: Array<{ colspan: GridProps.BreakpointMapping | number }>;\n\n if (stretch) {\n columns = [{ colspan: 12 }, { colspan: 12 }];\n } else if (isRefresh) {\n columns = [{ colspan: { default: 12, xs: 8 } }, { colspan: { default: 12, xs: 4 } }];\n } else {\n columns = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\n }\n\n if (!secondaryControlPresent) {\n return [columns[0]];\n }\n\n return columns;\n}\n"]}
|
|
@@ -17,6 +17,8 @@ export interface ChartPopoverProps extends PopoverProps {
|
|
|
17
17
|
*/
|
|
18
18
|
trackKey?: string | number;
|
|
19
19
|
minVisibleBlockSize?: number;
|
|
20
|
+
/** Optional element to clamp the popover trigger position within its bounds */
|
|
21
|
+
triggerClampRef?: React.RefObject<HTMLElement>;
|
|
20
22
|
/** Optional container element that prevents any clicks in there from dismissing the popover */
|
|
21
23
|
container: Element | null;
|
|
22
24
|
/** Event that is fired when the popover is dismissed */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-popover/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAQjD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAO3D,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,WAAW,GAAG,UAAU,CAAC;IACjD;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,+FAA+F;IAC/F,SAAS,EAAE,OAAO,GAAG,IAAI,CAAC;IAE1B,wDAAwD;IACxD,SAAS,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEjD,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEjD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE3C,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;;AAED,wBAA8C"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-popover/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAQjD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAO3D,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,WAAW,GAAG,UAAU,CAAC;IACjD;;;;;;;;MAQE;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,+EAA+E;IAC/E,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE/C,+FAA+F;IAC/F,SAAS,EAAE,OAAO,GAAG,IAAI,CAAC;IAE1B,wDAAwD;IACxD,SAAS,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEjD,0EAA0E;IAC1E,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAEjD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAE3C,sBAAsB;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,qBAAqB;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;;AAED,wBAA8C"}
|
|
@@ -11,7 +11,7 @@ import popoverStyles from '../../../popover/styles.css.js';
|
|
|
11
11
|
import styles from './styles.css.js';
|
|
12
12
|
import testClasses from './test-classes/styles.css.js';
|
|
13
13
|
export default React.forwardRef(ChartPopover);
|
|
14
|
-
function ChartPopover({ position = 'right', size = 'medium', fixedWidth = false, dismissButton = false, dismissAriaLabel, children, footer, title, trackRef, getTrack, trackKey, onDismiss, container, minVisibleBlockSize, onMouseEnter, onMouseLeave, onBlur, ...restProps }, ref) {
|
|
14
|
+
function ChartPopover({ position = 'right', size = 'medium', fixedWidth = false, dismissButton = false, dismissAriaLabel, children, footer, title, trackRef, getTrack, trackKey, onDismiss, container, triggerClampRef, minVisibleBlockSize, onMouseEnter, onMouseLeave, onBlur, ...restProps }, ref) {
|
|
15
15
|
const baseProps = getBaseProps(restProps);
|
|
16
16
|
const popoverObjectRef = useRef(null);
|
|
17
17
|
const popoverRef = useMergeRefs(popoverObjectRef, ref);
|
|
@@ -42,7 +42,7 @@ function ChartPopover({ position = 'right', size = 'medium', fixedWidth = false,
|
|
|
42
42
|
// The tabIndex makes it so that clicking inside popover assigns this element as blur target.
|
|
43
43
|
// That is necessary in charts to ensure the blur target is within the chart and no cleanup is needed.
|
|
44
44
|
tabIndex: -1 },
|
|
45
|
-
React.createElement(PopoverContainer, { size: size, fixedWidth: fixedWidth, position: position, trackRef: trackRef, getTrack: getTrack, trackKey: trackKey, minVisibleBlockSize: minVisibleBlockSize, arrow: position => (React.createElement("div", { className: clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`]) },
|
|
45
|
+
React.createElement(PopoverContainer, { size: size, fixedWidth: fixedWidth, position: position, trackRef: trackRef, getTrack: getTrack, trackKey: trackKey, triggerClampRef: triggerClampRef, minVisibleBlockSize: minVisibleBlockSize, arrow: position => (React.createElement("div", { className: clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`]) },
|
|
46
46
|
React.createElement("div", { className: popoverStyles['arrow-outer'] }),
|
|
47
47
|
React.createElement("div", { className: popoverStyles['arrow-inner'] }))), keepPosition: true, allowVerticalOverflow: true, allowScrollToFit: isPinned, hoverArea: true },
|
|
48
48
|
React.createElement(PopoverBody, { dismissButton: dismissButton, dismissAriaLabel: dismissAriaLabel, header: React.createElement("span", { className: testClasses.header }, title), onDismiss: () => onDismiss(), overflowVisible: "content", className: styles['popover-body'], variant: "chart" },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-popover/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAE7E,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,OAAO,aAAa,MAAM,gCAAgC,CAAC;AAC3D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-popover/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport PopoverBody from '../../../popover/body';\nimport PopoverContainer from '../../../popover/container';\nimport { PopoverProps } from '../../../popover/interfaces';\nimport { getBaseProps } from '../../base-component';\n\nimport popoverStyles from '../../../popover/styles.css.js';\nimport styles from './styles.css.js';\nimport testClasses from './test-classes/styles.css.js';\n\nexport interface ChartPopoverProps extends PopoverProps {\n /** Title of the popover */\n title?: React.ReactNode;\n\n /** References the element the container is positioned against. */\n trackRef?: React.RefObject<HTMLElement | SVGElement>;\n getTrack?: () => null | HTMLElement | SVGElement;\n /**\n Used to update the container position in case track or track position changes:\n\n const trackRef = useRef<Element>(null)\n return (<>\n <Track style={getPosition(selectedItemId)} ref={trackRef} />\n <PopoverContainer trackRef={trackRef} trackKey={selectedItemId} .../>\n </>)\n */\n trackKey?: string | number;\n minVisibleBlockSize?: number;\n\n /** Optional element to clamp the popover trigger position within its bounds */\n triggerClampRef?: React.RefObject<HTMLElement>;\n\n /** Optional container element that prevents any clicks in there from dismissing the popover */\n container: Element | null;\n\n /** Event that is fired when the popover is dismissed */\n onDismiss: (outsideClick?: boolean) => void;\n\n /** Fired when the pointer enters the hoverable area around the popover */\n onMouseEnter?: (event: React.MouseEvent) => void;\n\n /** Fired when the pointer leaves the hoverable area around the popover */\n onMouseLeave?: (event: React.MouseEvent) => void;\n\n onBlur?: (event: React.FocusEvent) => void;\n\n /** Popover content */\n children?: React.ReactNode;\n\n /** Popover footer */\n footer?: React.ReactNode;\n}\n\nexport default React.forwardRef(ChartPopover);\n\nfunction ChartPopover(\n {\n position = 'right',\n size = 'medium',\n fixedWidth = false,\n dismissButton = false,\n dismissAriaLabel,\n\n children,\n footer,\n\n title,\n trackRef,\n getTrack,\n trackKey,\n onDismiss,\n container,\n triggerClampRef,\n minVisibleBlockSize,\n\n onMouseEnter,\n onMouseLeave,\n onBlur,\n\n ...restProps\n }: ChartPopoverProps,\n ref: React.Ref<HTMLElement>\n) {\n const baseProps = getBaseProps(restProps);\n const popoverObjectRef = useRef<HTMLDivElement | null>(null);\n const popoverRef = useMergeRefs(popoverObjectRef, ref);\n\n const clickFrameId = useRef<number | null>(null);\n const onMouseDown = () => {\n // Indicate there was a click inside popover recently.\n clickFrameId.current = requestAnimationFrame(() => (clickFrameId.current = null));\n };\n\n useEffect(() => {\n if (popoverObjectRef.current) {\n const document = popoverObjectRef.current.ownerDocument;\n const onDocumentClick = (event: MouseEvent) => {\n // Dismiss popover unless there was a click inside within the last animation frame.\n // Ignore clicks inside the chart as those are handled separately.\n if (clickFrameId.current === null && !nodeContains(container, event.target as Element)) {\n onDismiss(true);\n }\n };\n\n document.addEventListener('mousedown', onDocumentClick);\n\n return () => {\n document.removeEventListener('mousedown', onDocumentClick);\n };\n }\n }, [container, onDismiss]);\n\n // In chart popovers, dismiss button is present when they are pinned, so both values are equivalent.\n const isPinned = dismissButton;\n\n return (\n <div\n {...baseProps}\n role={!dismissButton ? 'tooltip' : undefined}\n className={clsx(popoverStyles.root, styles.root, baseProps.className)}\n ref={popoverRef}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n onMouseDown={onMouseDown}\n onBlur={onBlur}\n // The tabIndex makes it so that clicking inside popover assigns this element as blur target.\n // That is necessary in charts to ensure the blur target is within the chart and no cleanup is needed.\n tabIndex={-1}\n >\n <PopoverContainer\n size={size}\n fixedWidth={fixedWidth}\n position={position}\n trackRef={trackRef}\n getTrack={getTrack}\n trackKey={trackKey}\n triggerClampRef={triggerClampRef}\n minVisibleBlockSize={minVisibleBlockSize}\n arrow={position => (\n <div className={clsx(popoverStyles.arrow, popoverStyles[`arrow-position-${position}`])}>\n <div className={popoverStyles['arrow-outer']} />\n <div className={popoverStyles['arrow-inner']} />\n </div>\n )}\n keepPosition={true}\n allowVerticalOverflow={true}\n allowScrollToFit={isPinned}\n hoverArea={true}\n >\n <PopoverBody\n dismissButton={dismissButton}\n dismissAriaLabel={dismissAriaLabel}\n header={<span className={testClasses.header}>{title}</span>}\n onDismiss={() => onDismiss()}\n overflowVisible=\"content\"\n className={styles['popover-body']}\n variant=\"chart\"\n >\n <div className={testClasses.body}>{children}</div>\n {footer && <div className={clsx(testClasses.footer, styles.footer)}>{footer}</div>}\n </PopoverBody>\n </PopoverContainer>\n </div>\n );\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export var PACKAGE_SOURCE = "components";
|
|
2
|
-
export var PACKAGE_VERSION = "3.0.0 (
|
|
3
|
-
export var GIT_SHA = "
|
|
2
|
+
export var PACKAGE_VERSION = "3.0.0 (a3d7548f)";
|
|
3
|
+
export var GIT_SHA = "a3d7548f";
|
|
4
4
|
export var THEME = "open-source-visual-refresh";
|
|
5
5
|
export var SYSTEM = "core";
|
|
6
6
|
export var ALWAYS_VISUAL_REFRESH = true;
|