@cloudscape-design/components 3.0.988 → 3.0.989
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/file-input/analytics-metadata/interfaces.d.ts +11 -0
- package/file-input/analytics-metadata/interfaces.d.ts.map +1 -0
- package/file-input/analytics-metadata/interfaces.js +4 -0
- package/file-input/analytics-metadata/interfaces.js.map +1 -0
- package/file-input/index.d.ts.map +1 -1
- package/file-input/index.js +1 -1
- package/file-input/index.js.map +1 -1
- package/file-input/internal.d.ts +1 -0
- package/file-input/internal.d.ts.map +1 -1
- package/file-input/internal.js +12 -2
- package/file-input/internal.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface GeneratedAnalyticsMetadataFileInputClick {
|
|
2
|
+
action: 'click';
|
|
3
|
+
detail: {
|
|
4
|
+
label: string;
|
|
5
|
+
};
|
|
6
|
+
}
|
|
7
|
+
export interface GeneratedAnalyticsMetadataFileInputComponent {
|
|
8
|
+
name: 'awsui.FileInput';
|
|
9
|
+
label: string;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/file-input/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,wCAAwC;IACvD,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,4CAA4C;IAC3D,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/file-input/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface GeneratedAnalyticsMetadataFileInputClick {\n action: 'click';\n detail: {\n label: string;\n };\n}\n\nexport interface GeneratedAnalyticsMetadataFileInputComponent {\n name: 'awsui.FileInput';\n label: string;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/file-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/file-input/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAmBd,CAAC;AAGF,eAAe,SAAS,CAAC"}
|
package/file-input/index.js
CHANGED
|
@@ -13,7 +13,7 @@ const FileInput = React.forwardRef((_a, ref) => {
|
|
|
13
13
|
variant,
|
|
14
14
|
},
|
|
15
15
|
});
|
|
16
|
-
return React.createElement(InternalFileInput, Object.assign({ multiple: multiple, variant: variant }, props, baseComponentProps, { ref: ref }));
|
|
16
|
+
return (React.createElement(InternalFileInput, Object.assign({ multiple: multiple, variant: variant }, props, baseComponentProps, { ref: ref, __injectAnalyticsComponentMetadata: true })));
|
|
17
17
|
});
|
|
18
18
|
applyDisplayName(FileInput, 'FileInput');
|
|
19
19
|
export default FileInput;
|
package/file-input/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/file-input/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAI3C,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAChC,CAAC,EAA+C,EAAE,GAAkC,EAAE,EAAE;QAAvF,EAAE,QAAQ,EAAE,OAAO,OAA4B,EAAvB,KAAK,cAA7B,uBAA+B,CAAF;IAC5B,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,EAAE;QACvD,KAAK,EAAE;YACL,QAAQ;YACR,OAAO;SACR;KACF,CAAC,CAAC;IACH,OAAO,oBAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/file-input/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAI3C,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAChC,CAAC,EAA+C,EAAE,GAAkC,EAAE,EAAE;QAAvF,EAAE,QAAQ,EAAE,OAAO,OAA4B,EAAvB,KAAK,cAA7B,uBAA+B,CAAF;IAC5B,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,EAAE;QACvD,KAAK,EAAE;YACL,QAAQ;YACR,OAAO;SACR;KACF,CAAC,CAAC;IACH,OAAO,CACL,oBAAC,iBAAiB,kBAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,IACZ,KAAK,EACL,kBAAkB,IACtB,GAAG,EAAE,GAAG,EACR,kCAAkC,EAAE,IAAI,IACxC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AACzC,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FileInputProps } from './interfaces';\nimport InternalFileInput from './internal';\n\nexport { FileInputProps };\n\nconst FileInput = React.forwardRef(\n ({ multiple, variant, ...props }: FileInputProps, ref: React.Ref<FileInputProps.Ref>) => {\n const baseComponentProps = useBaseComponent('FileInput', {\n props: {\n multiple,\n variant,\n },\n });\n return (\n <InternalFileInput\n multiple={multiple}\n variant={variant}\n {...props}\n {...baseComponentProps}\n ref={ref}\n __injectAnalyticsComponentMetadata={true}\n />\n );\n }\n);\n\napplyDisplayName(FileInput, 'FileInput');\nexport default FileInput;\n"]}
|
package/file-input/internal.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import { FileInputProps } from './interfaces';
|
|
|
4
4
|
interface InternalFileInputProps {
|
|
5
5
|
__inputClassName?: string;
|
|
6
6
|
__inputNativeAttributes?: React.InputHTMLAttributes<HTMLInputElement> | Record<`data-${string}`, string>;
|
|
7
|
+
__injectAnalyticsComponentMetadata?: boolean;
|
|
7
8
|
}
|
|
8
9
|
declare const InternalFileInput: React.ForwardRefExoticComponent<FileInputProps & InternalBaseComponentProps<any> & InternalFileInputProps & React.RefAttributes<FileInputProps.Ref>>;
|
|
9
10
|
export default InternalFileInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-input/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwD,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-input/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwD,MAAM,OAAO,CAAC;AAiB7E,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAI3F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,QAAQ,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;IACzG,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C;AAED,QAAA,MAAM,iBAAiB,sJAuItB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
package/file-input/internal.js
CHANGED
|
@@ -4,6 +4,7 @@ import { __rest } from "tslib";
|
|
|
4
4
|
import React, { useEffect, useRef, useState } from 'react';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';
|
|
7
|
+
import { getAnalyticsMetadataAttribute, } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
7
8
|
import InternalButton from '../button/internal';
|
|
8
9
|
import { useFormFieldContext } from '../contexts/form-field';
|
|
9
10
|
import { getBaseProps } from '../internal/base-component/index.js';
|
|
@@ -17,7 +18,7 @@ import { joinStrings } from '../internal/utils/strings';
|
|
|
17
18
|
import styles from './styles.css.js';
|
|
18
19
|
const InternalFileInput = React.forwardRef((_a, ref) => {
|
|
19
20
|
var _b;
|
|
20
|
-
var { accept, ariaRequired, ariaLabel, multiple = false, value, onChange, variant = 'button', children, __internalRootRef = null, __inputClassName, __inputNativeAttributes } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "ariaLabel", "multiple", "value", "onChange", "variant", "children", "__internalRootRef", "__inputClassName", "__inputNativeAttributes"]);
|
|
21
|
+
var { accept, ariaRequired, ariaLabel, multiple = false, value, onChange, variant = 'button', children, __internalRootRef = null, __inputClassName, __inputNativeAttributes, __injectAnalyticsComponentMetadata } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "ariaLabel", "multiple", "value", "onChange", "variant", "children", "__internalRootRef", "__inputClassName", "__inputNativeAttributes", "__injectAnalyticsComponentMetadata"]);
|
|
21
22
|
const baseProps = getBaseProps(restProps);
|
|
22
23
|
const uploadInputRef = useRef(null);
|
|
23
24
|
const containerRef = useRef(null);
|
|
@@ -64,7 +65,16 @@ const InternalFileInput = React.forwardRef((_a, ref) => {
|
|
|
64
65
|
}
|
|
65
66
|
}, [value]);
|
|
66
67
|
const { tabIndex } = useSingleTabStopNavigation(uploadInputRef);
|
|
67
|
-
|
|
68
|
+
const analyticsLabel = variant === 'button' && children ? 'button' : 'input';
|
|
69
|
+
const componentAnalyticsMetadata = {
|
|
70
|
+
name: 'awsui.FileInput',
|
|
71
|
+
label: analyticsLabel,
|
|
72
|
+
};
|
|
73
|
+
const analyticsMetadata = { detail: { label: analyticsLabel } };
|
|
74
|
+
if (__injectAnalyticsComponentMetadata) {
|
|
75
|
+
analyticsMetadata.component = componentAnalyticsMetadata;
|
|
76
|
+
}
|
|
77
|
+
return (React.createElement("div", Object.assign({}, baseProps, { ref: mergedRef, className: clsx(baseProps.className, styles.root) }, getAnalyticsMetadataAttribute(analyticsMetadata)),
|
|
68
78
|
React.createElement("input", Object.assign({ id: controlId, ref: uploadInputRef, type: "file", hidden: false, multiple: multiple, accept: accept, onChange: onUploadInputChange, onFocus: onUploadInputFocus, onBlur: onUploadInputBlur, className: clsx(styles['file-input'], styles.hidden, __inputClassName), tabIndex: tabIndex }, nativeAttributes)),
|
|
69
79
|
React.createElement(InternalButton, { iconName: "upload", variant: variant === 'icon' ? 'icon' : undefined, formAction: "none", onClick: onUploadButtonClick, className: clsx(styles['file-input-button'], {
|
|
70
80
|
[styles['force-focus-outline-button']]: isFocused && variant === 'button',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-input/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, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalButton from '../button/internal';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { getBaseProps } from '../internal/base-component/index.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport { FileInputProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalFileInputProps {\n __inputClassName?: string;\n __inputNativeAttributes?: React.InputHTMLAttributes<HTMLInputElement> | Record<`data-${string}`, string>;\n}\n\nconst InternalFileInput = React.forwardRef(\n (\n {\n accept,\n ariaRequired,\n ariaLabel,\n multiple = false,\n value,\n onChange,\n variant = 'button',\n children,\n __internalRootRef = null,\n __inputClassName,\n __inputNativeAttributes,\n ...restProps\n }: FileInputProps & InternalBaseComponentProps & InternalFileInputProps,\n ref: Ref<FileInputProps.Ref>\n ) => {\n const baseProps = getBaseProps(restProps);\n const uploadInputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRefs(__internalRootRef, containerRef);\n\n const uploadButtonLabelId = useUniqueId('upload-button-label');\n const formFieldContext = useFormFieldContext(restProps);\n const selfControlId = useUniqueId('upload-input');\n const controlId = formFieldContext.controlId ?? selfControlId;\n\n useForwardFocus(ref, uploadInputRef);\n\n const [isFocused, setIsFocused] = useState(false);\n const onUploadButtonClick = () => uploadInputRef.current?.click();\n const onUploadInputFocus = () => {\n setIsFocused(true);\n containerRef.current?.scrollIntoView?.();\n };\n const onUploadInputBlur = () => setIsFocused(false);\n\n const onUploadInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n fireNonCancelableEvent(onChange, { value: target.files ? Array.from(target.files) : [] });\n };\n\n checkControlled('FileInput', 'value', value, 'onChange', onChange);\n\n const nativeAttributes: React.HTMLAttributes<HTMLInputElement> = {\n 'aria-label': ariaLabel || children,\n 'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId),\n 'aria-describedby': formFieldContext.ariaDescribedby,\n ...__inputNativeAttributes,\n };\n if (formFieldContext.invalid) {\n nativeAttributes['aria-invalid'] = true;\n }\n if (ariaRequired) {\n nativeAttributes['aria-required'] = true;\n }\n\n if (variant === 'icon' && !ariaLabel) {\n warnOnce('FileInput', 'Aria label is required with icon variant.');\n }\n\n // Synchronizing component's value with the native file input state.\n useEffect(() => {\n /* istanbul ignore next: The DataTransfer is not available in jsdom. */\n if (window.DataTransfer) {\n const dataTransfer = new DataTransfer();\n for (const file of value) {\n dataTransfer.items.add(file);\n }\n uploadInputRef.current!.files = dataTransfer.files;\n }\n if (uploadInputRef.current) {\n uploadInputRef.current.value = ''; // reset value to allow calling onChange when the same file is uploaded again\n }\n }, [value]);\n\n const { tabIndex } = useSingleTabStopNavigation(uploadInputRef);\n\n return (\n <div {...baseProps} ref={mergedRef} className={clsx(baseProps.className, styles.root)}>\n {/* This is the actual interactive and accessible file-upload element. */}\n {/* It is visually hidden to achieve the desired UX design. */}\n <input\n id={controlId}\n ref={uploadInputRef}\n type=\"file\"\n hidden={false}\n multiple={multiple}\n accept={accept}\n onChange={onUploadInputChange}\n onFocus={onUploadInputFocus}\n onBlur={onUploadInputBlur}\n className={clsx(styles['file-input'], styles.hidden, __inputClassName)}\n tabIndex={tabIndex}\n {...nativeAttributes}\n />\n\n {/* The button is decorative. It dispatches clicks to the file input and is ARIA-hidden. */}\n {/* When the input is focused the focus outline is forced on the button. */}\n <InternalButton\n iconName=\"upload\"\n variant={variant === 'icon' ? 'icon' : undefined}\n formAction=\"none\"\n onClick={onUploadButtonClick}\n className={clsx(styles['file-input-button'], {\n [styles['force-focus-outline-button']]: isFocused && variant === 'button',\n [styles['force-focus-outline-icon']]: isFocused && variant === 'icon',\n })}\n __nativeAttributes={{ tabIndex: -1, 'aria-hidden': true }}\n >\n {variant === 'button' && children}\n </InternalButton>\n\n {/* The file input needs to be labelled with provided content. Can't use the button because it is ARIA-hidden. */}\n <ScreenreaderOnly id={uploadButtonLabelId}>{ariaLabel || children}</ScreenreaderOnly>\n </div>\n );\n }\n);\n\nexport default InternalFileInput;\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-input/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,EAAE,EAAoB,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AACvF,OAAO,EAEL,6BAA6B,GAC9B,MAAM,kEAAkE,CAAC;AAE1E,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAC;AACnE,OAAO,gBAAgB,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAAE,0BAA0B,EAAE,MAAM,wDAAwD,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAIxD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EAcuE,EACvE,GAA4B,EAC5B,EAAE;;QAhBF,EACE,MAAM,EACN,YAAY,EACZ,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,OAAO,GAAG,QAAQ,EAClB,QAAQ,EACR,iBAAiB,GAAG,IAAI,EACxB,gBAAgB,EAChB,uBAAuB,EACvB,kCAAkC,OAEmC,EADlE,SAAS,cAbd,yMAcC,CADa;IAId,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,cAAc,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACrD,MAAM,SAAS,GAAG,YAAY,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC;IAEhE,MAAM,mBAAmB,GAAG,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAC/D,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,WAAW,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,MAAA,gBAAgB,CAAC,SAAS,mCAAI,aAAa,CAAC;IAE9D,eAAe,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC;IAErC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,mBAAmB,GAAG,GAAG,EAAE,WAAC,OAAA,MAAA,cAAc,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,CAAC;IAClE,MAAM,kBAAkB,GAAG,GAAG,EAAE;;QAC9B,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,MAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,cAAc,kDAAI,CAAC;IAC3C,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,mBAAmB,GAAG,CAAC,EAAE,MAAM,EAAiC,EAAE,EAAE;QACxE,sBAAsB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC5F,CAAC,CAAC;IAEF,eAAe,CAAC,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;IAEnE,MAAM,gBAAgB,mBACpB,YAAY,EAAE,SAAS,IAAI,QAAQ,EACnC,iBAAiB,EAAE,WAAW,CAAC,gBAAgB,CAAC,cAAc,EAAE,mBAAmB,CAAC,EACpF,kBAAkB,EAAE,gBAAgB,CAAC,eAAe,IACjD,uBAAuB,CAC3B,CAAC;IACF,IAAI,gBAAgB,CAAC,OAAO,EAAE;QAC5B,gBAAgB,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;KACzC;IACD,IAAI,YAAY,EAAE;QAChB,gBAAgB,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC;KAC1C;IAED,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,SAAS,EAAE;QACpC,QAAQ,CAAC,WAAW,EAAE,2CAA2C,CAAC,CAAC;KACpE;IAED,oEAAoE;IACpE,SAAS,CAAC,GAAG,EAAE;QACb,uEAAuE;QACvE,IAAI,MAAM,CAAC,YAAY,EAAE;YACvB,MAAM,YAAY,GAAG,IAAI,YAAY,EAAE,CAAC;YACxC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;gBACxB,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;aAC9B;YACD,cAAc,CAAC,OAAQ,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC;SACpD;QACD,IAAI,cAAc,CAAC,OAAO,EAAE;YAC1B,cAAc,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC,6EAA6E;SACjH;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,cAAc,CAAC,CAAC;IAEhE,MAAM,cAAc,GAAG,OAAO,KAAK,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7E,MAAM,0BAA0B,GAAiD;QAC/E,IAAI,EAAE,iBAAiB;QACvB,KAAK,EAAE,cAAc;KACtB,CAAC;IAEF,MAAM,iBAAiB,GAAuC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EAAE,CAAC;IACpG,IAAI,kCAAkC,EAAE;QACtC,iBAAiB,CAAC,SAAS,GAAG,0BAA0B,CAAC;KAC1D;IAED,OAAO,CACL,6CACM,SAAS,IACb,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,IAC7C,6BAA6B,CAAC,iBAAiB,CAAC;QAIpD,6CACE,EAAE,EAAE,SAAS,EACb,GAAG,EAAE,cAAc,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,KAAK,EACb,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,mBAAmB,EAC7B,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,iBAAiB,EACzB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,EACtE,QAAQ,EAAE,QAAQ,IACd,gBAAgB,EACpB;QAIF,oBAAC,cAAc,IACb,QAAQ,EAAC,QAAQ,EACjB,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAChD,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE;gBAC3C,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,EAAE,SAAS,IAAI,OAAO,KAAK,QAAQ;gBACzE,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,SAAS,IAAI,OAAO,KAAK,MAAM;aACtE,CAAC,EACF,kBAAkB,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,IAExD,OAAO,KAAK,QAAQ,IAAI,QAAQ,CAClB;QAGjB,oBAAC,gBAAgB,IAAC,EAAE,EAAE,mBAAmB,IAAG,SAAS,IAAI,QAAQ,CAAoB,CACjF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalButton from '../button/internal';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { getBaseProps } from '../internal/base-component/index.js';\nimport ScreenreaderOnly from '../internal/components/screenreader-only';\nimport { useSingleTabStopNavigation } from '../internal/context/single-tab-stop-navigation-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component/index.js';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport { GeneratedAnalyticsMetadataFileInputComponent } from './analytics-metadata/interfaces';\nimport { FileInputProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalFileInputProps {\n __inputClassName?: string;\n __inputNativeAttributes?: React.InputHTMLAttributes<HTMLInputElement> | Record<`data-${string}`, string>;\n __injectAnalyticsComponentMetadata?: boolean;\n}\n\nconst InternalFileInput = React.forwardRef(\n (\n {\n accept,\n ariaRequired,\n ariaLabel,\n multiple = false,\n value,\n onChange,\n variant = 'button',\n children,\n __internalRootRef = null,\n __inputClassName,\n __inputNativeAttributes,\n __injectAnalyticsComponentMetadata,\n ...restProps\n }: FileInputProps & InternalBaseComponentProps & InternalFileInputProps,\n ref: Ref<FileInputProps.Ref>\n ) => {\n const baseProps = getBaseProps(restProps);\n const uploadInputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLButtonElement>(null);\n const mergedRef = useMergeRefs(__internalRootRef, containerRef);\n\n const uploadButtonLabelId = useUniqueId('upload-button-label');\n const formFieldContext = useFormFieldContext(restProps);\n const selfControlId = useUniqueId('upload-input');\n const controlId = formFieldContext.controlId ?? selfControlId;\n\n useForwardFocus(ref, uploadInputRef);\n\n const [isFocused, setIsFocused] = useState(false);\n const onUploadButtonClick = () => uploadInputRef.current?.click();\n const onUploadInputFocus = () => {\n setIsFocused(true);\n containerRef.current?.scrollIntoView?.();\n };\n const onUploadInputBlur = () => setIsFocused(false);\n\n const onUploadInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n fireNonCancelableEvent(onChange, { value: target.files ? Array.from(target.files) : [] });\n };\n\n checkControlled('FileInput', 'value', value, 'onChange', onChange);\n\n const nativeAttributes: React.HTMLAttributes<HTMLInputElement> = {\n 'aria-label': ariaLabel || children,\n 'aria-labelledby': joinStrings(formFieldContext.ariaLabelledby, uploadButtonLabelId),\n 'aria-describedby': formFieldContext.ariaDescribedby,\n ...__inputNativeAttributes,\n };\n if (formFieldContext.invalid) {\n nativeAttributes['aria-invalid'] = true;\n }\n if (ariaRequired) {\n nativeAttributes['aria-required'] = true;\n }\n\n if (variant === 'icon' && !ariaLabel) {\n warnOnce('FileInput', 'Aria label is required with icon variant.');\n }\n\n // Synchronizing component's value with the native file input state.\n useEffect(() => {\n /* istanbul ignore next: The DataTransfer is not available in jsdom. */\n if (window.DataTransfer) {\n const dataTransfer = new DataTransfer();\n for (const file of value) {\n dataTransfer.items.add(file);\n }\n uploadInputRef.current!.files = dataTransfer.files;\n }\n if (uploadInputRef.current) {\n uploadInputRef.current.value = ''; // reset value to allow calling onChange when the same file is uploaded again\n }\n }, [value]);\n\n const { tabIndex } = useSingleTabStopNavigation(uploadInputRef);\n\n const analyticsLabel = variant === 'button' && children ? 'button' : 'input';\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataFileInputComponent = {\n name: 'awsui.FileInput',\n label: analyticsLabel,\n };\n\n const analyticsMetadata: GeneratedAnalyticsMetadataFragment = { detail: { label: analyticsLabel } };\n if (__injectAnalyticsComponentMetadata) {\n analyticsMetadata.component = componentAnalyticsMetadata;\n }\n\n return (\n <div\n {...baseProps}\n ref={mergedRef}\n className={clsx(baseProps.className, styles.root)}\n {...getAnalyticsMetadataAttribute(analyticsMetadata)}\n >\n {/* This is the actual interactive and accessible file-upload element. */}\n {/* It is visually hidden to achieve the desired UX design. */}\n <input\n id={controlId}\n ref={uploadInputRef}\n type=\"file\"\n hidden={false}\n multiple={multiple}\n accept={accept}\n onChange={onUploadInputChange}\n onFocus={onUploadInputFocus}\n onBlur={onUploadInputBlur}\n className={clsx(styles['file-input'], styles.hidden, __inputClassName)}\n tabIndex={tabIndex}\n {...nativeAttributes}\n />\n\n {/* The button is decorative. It dispatches clicks to the file input and is ARIA-hidden. */}\n {/* When the input is focused the focus outline is forced on the button. */}\n <InternalButton\n iconName=\"upload\"\n variant={variant === 'icon' ? 'icon' : undefined}\n formAction=\"none\"\n onClick={onUploadButtonClick}\n className={clsx(styles['file-input-button'], {\n [styles['force-focus-outline-button']]: isFocused && variant === 'button',\n [styles['force-focus-outline-icon']]: isFocused && variant === 'icon',\n })}\n __nativeAttributes={{ tabIndex: -1, 'aria-hidden': true }}\n >\n {variant === 'button' && children}\n </InternalButton>\n\n {/* The file input needs to be labelled with provided content. Can't use the button because it is ARIA-hidden. */}\n <ScreenreaderOnly id={uploadButtonLabelId}>{ariaLabel || children}</ScreenreaderOnly>\n </div>\n );\n }\n);\n\nexport default InternalFileInput;\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED
package/package.json
CHANGED