@aws-amplify/ui-react 6.5.5 → 6.7.0

package/dist/{Field-CIQvkMkM.js → Field-DbA9eYRa.js}

@@ -910,6 +910,111 @@ const AlertIcon = ({ variation, ariaHidden, ariaLabel, role, }) => {
 };
 AlertIcon.displayName = 'AlertIcon';
 
+// Source: https://github.com/radix-ui/primitives/blob/7ae63b6cce6ea53ea5d65b6d411894c004b38f47/packages/react/use-layout-effect/src/useLayoutEffect.tsx
+/**
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */
+const useLayoutEffect = globalThis?.document ? React__namespace.useLayoutEffect : () => { };
+
+// Adapted from https://github.com/radix-ui/primitives/blob/main/packages/react/id/src/id.tsx#L8
+// Prefixed autogenerated id created by useStableId
+const AUTO_GENERATED_ID_PREFIX = 'amplify-id';
+// Create a local version of React.useId which will reference React.useId for React 18
+// and fallback to noop for React 17 and below
+// Note: We use `toString()` to prevent bundlers from trying to `import { useId } from 'react';`
+// since it doesn't exist in React 17 and below (prevents https://github.com/aws-amplify/amplify-ui/issues/1154)
+const useReactId = 
+// disable eslint below to allow usage of casting React to `any`, which ensures that TS
+// does not get confused about the existence of `useId` in React 17 and below
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+React__namespace['useId'.toString()] || (() => undefined);
+let count = 0;
+/**
+ * Create a uuid to use with amplify fields unless
+ * an id is provided
+ * @param id user specified id
+ * @returns string
+ */
+const useStableId = (id) => {
+    const [stableId, setStableId] = React__namespace.useState(useReactId());
+    // React versions older than 18 will have client-side ids only
+    useLayoutEffect(() => {
+        if (!id) {
+            setStableId((reactId) => reactId ?? String(count++));
+        }
+    }, [id]);
+    return id ?? (stableId ? `${AUTO_GENERATED_ID_PREFIX}-${stableId}` : '');
+};
+
+// `FileSelect` input `type` must always be set to `file`
+const INPUT_TYPE = 'file';
+const TEST_ID = 'amplify-file-select';
+const DEFAULT_PROPS = {
+    style: { display: 'none' },
+    type: 'file',
+    'data-testid': TEST_ID,
+};
+/**
+ * @internal @unstable
+ */
+const FileSelect = React__namespace["default"].forwardRef(function FileSelect({ multiple = true, type = 'FILE', testId = 'amplify-file-select', ...props }, ref) {
+    return (React__namespace["default"].createElement("input", { ...DEFAULT_PROPS, ...props, ...(type === 'FOLDER' ? { webkitdirectory: '' } : undefined), "data-testid": testId, multiple: multiple, ref: ref, type: INPUT_TYPE }));
+});
+/**
+ * @internal @unstable
+ *
+ * @usage
+ * ```tsx
+ *  function MyUploadButton() {
+ *    const [files, setFiles] = React.useState<File[]>([]);
+ *    const [fileSelect, handleFileSelect] = useFileSelect(setFiles);
+ *    return (
+ *      <>
+ *        {fileSelect}
+ *        <Button
+ *          onClick={() => {
+ *            handleFileSelect('file');
+ *          }}
+ *        />
+ *      </>
+ *    );
+ *  }
+ * ```
+ */
+const useFileSelect = (onSelect) => {
+    const [inputProps, setInputProps] = React__namespace["default"].useState(undefined);
+    const id = useStableId();
+    const ref = React__namespace["default"].useRef(null);
+    React__namespace["default"].useEffect(() => {
+        if (inputProps) {
+            ref.current?.click();
+        }
+    }, [id, inputProps]);
+    const handleFileSelect = React__namespace["default"].useCallback((type, options) => {
+        if (id !== ref.current?.id)
+            return;
+        setInputProps({ type, ...options });
+    }, [id]);
+    const fileSelect = (React__namespace["default"].createElement(FileSelect, { ...inputProps, id: id, onChange: (event) => {
+            if (ui.isFunction(inputProps?.onChange))
+                inputProps?.onChange(event);
+            if (ui.isFunction(onSelect) && !!event.target.files?.length) {
+                onSelect?.([...event.target.files]);
+            }
+            // Reset the input value to allow re-selecting the same file
+            if (ref.current) {
+                ref.current.value = '';
+            }
+            // clean up
+            setInputProps(undefined);
+        }, ref: ref }));
+    return [fileSelect, handleFileSelect];
+};
+
 const FieldGroupIconPrimitive = ({ className, children, isVisible = true, excludeFromTabOrder = false, ...rest }, ref) => {
     return isVisible ? (React__namespace.createElement(View, { className: ui.classNames(ui.ComponentClassName.FieldGroupIcon, className), ref: ref, tabIndex: excludeFromTabOrder ? -1 : undefined, ...rest }, children)) : null;
 };
@@ -1075,6 +1180,7 @@ exports.FieldErrorMessage = FieldErrorMessage;
 exports.FieldGroupIcon = FieldGroupIcon;
 exports.FieldGroupIconButton = FieldGroupIconButton;
 exports.FieldsetContext = FieldsetContext;
+exports.FileSelect = FileSelect;
 exports.Flex = Flex;
 exports.Icon = Icon;
 exports.IconAdd = IconAdd;
@@ -1111,6 +1217,8 @@ exports.useBreakpoint = useBreakpoint;
 exports.useColorMode = useColorMode;
 exports.useDeprecationWarning = useDeprecationWarning;
 exports.useFieldset = useFieldset;
+exports.useFileSelect = useFileSelect;
 exports.useIcons = useIcons;
+exports.useStableId = useStableId;
 exports.useStyles = useStyles;
 exports.useTheme = useTheme;

package/dist/{ThemeStyle-CgfvQJ7V.js → ThemeStyle-DA2-Clfz.js}

@@ -22,10 +22,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-/**
- * @experimental
- * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
- */
 const Style = ({ cssText, ...rest }) => {
     /*
       Only inject theme CSS variables if given a theme.
@@ -81,10 +77,6 @@ const Style = ({ cssText, ...rest }) => {
 };
 Style.displayName = 'Style';
 
-/**
- * @experimental
- * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
- */
 const ThemeStyle = ({ theme, ...rest }) => {
     if (!theme)
         return null;

package/dist/esm/PrimitiveCatalog.mjs

@@ -2235,6 +2235,334 @@ const PrimitiveCatalog = {
             }
         }
     },
+    "Checkbox": {
+        "properties": {
+            "label": {
+                "type": "string"
+            },
+            "labelHidden": {
+                "type": "boolean"
+            },
+            "name": {
+                "type": "string"
+            },
+            "value": {
+                "type": "string"
+            },
+            "labelPosition": {
+                "type": "string"
+            },
+            "isIndeterminate": {
+                "type": "boolean"
+            },
+            "isDisabled": {
+                "type": "boolean"
+            },
+            "id": {
+                "type": "string"
+            },
+            "children": {
+                "type": "string"
+            },
+            "className": {
+                "type": "string"
+            },
+            "testId": {
+                "type": "string"
+            },
+            "inert": {
+                "type": "boolean"
+            },
+            "alignSelf": {
+                "type": "string"
+            },
+            "backgroundColor": {
+                "type": "string"
+            },
+            "backgroundImage": {
+                "type": "string"
+            },
+            "border": {
+                "type": "string"
+            },
+            "borderColor": {
+                "type": "string"
+            },
+            "borderWidth": {
+                "type": "string"
+            },
+            "borderStyle": {
+                "type": "string"
+            },
+            "borderRadius": {
+                "type": "string"
+            },
+            "bottom": {
+                "type": "string"
+            },
+            "boxShadow": {
+                "type": "string"
+            },
+            "color": {
+                "type": "string"
+            },
+            "display": {
+                "type": "string"
+            },
+            "fontFamily": {
+                "type": "string"
+            },
+            "fontSize": {
+                "type": "string"
+            },
+            "fontStyle": {
+                "type": "string"
+            },
+            "fontWeight": {
+                "type": "string"
+            },
+            "height": {
+                "type": "string"
+            },
+            "left": {
+                "type": "string"
+            },
+            "letterSpacing": {
+                "type": "string"
+            },
+            "lineHeight": {
+                "type": "string"
+            },
+            "margin": {
+                "type": "string"
+            },
+            "marginBlock": {
+                "type": "string"
+            },
+            "marginBlockEnd": {
+                "type": "string"
+            },
+            "marginBlockStart": {
+                "type": "string"
+            },
+            "marginBottom": {
+                "type": "string"
+            },
+            "marginInline": {
+                "type": "string"
+            },
+            "marginInlineEnd": {
+                "type": "string"
+            },
+            "marginInlineStart": {
+                "type": "string"
+            },
+            "marginLeft": {
+                "type": "string"
+            },
+            "marginRight": {
+                "type": "string"
+            },
+            "marginTop": {
+                "type": "string"
+            },
+            "maxHeight": {
+                "type": "string"
+            },
+            "maxWidth": {
+                "type": "string"
+            },
+            "minHeight": {
+                "type": "string"
+            },
+            "minWidth": {
+                "type": "string"
+            },
+            "opacity": {
+                "type": "string"
+            },
+            "overflow": {
+                "type": "string"
+            },
+            "padding": {
+                "type": "string"
+            },
+            "paddingBlock": {
+                "type": "string"
+            },
+            "paddingBlockEnd": {
+                "type": "string"
+            },
+            "paddingBlockStart": {
+                "type": "string"
+            },
+            "paddingBottom": {
+                "type": "string"
+            },
+            "paddingInline": {
+                "type": "string"
+            },
+            "paddingInlineEnd": {
+                "type": "string"
+            },
+            "paddingInlineStart": {
+                "type": "string"
+            },
+            "paddingLeft": {
+                "type": "string"
+            },
+            "paddingRight": {
+                "type": "string"
+            },
+            "paddingTop": {
+                "type": "string"
+            },
+            "position": {
+                "type": "string"
+            },
+            "right": {
+                "type": "string"
+            },
+            "textAlign": {
+                "type": "string"
+            },
+            "textDecoration": {
+                "type": "string"
+            },
+            "textTransform": {
+                "type": "string"
+            },
+            "top": {
+                "type": "string"
+            },
+            "transform": {
+                "type": "string"
+            },
+            "transformOrigin": {
+                "type": "string"
+            },
+            "width": {
+                "type": "string"
+            },
+            "whiteSpace": {
+                "type": "string"
+            },
+            "flex": {
+                "type": "string"
+            },
+            "order": {
+                "type": "string"
+            },
+            "grow": {
+                "type": "string"
+            },
+            "shrink": {
+                "type": "string"
+            },
+            "basis": {
+                "type": "string"
+            },
+            "area": {
+                "type": "string"
+            },
+            "column": {
+                "type": "string"
+            },
+            "columnEnd": {
+                "type": "string"
+            },
+            "columnSpan": {
+                "type": "string"
+            },
+            "columnStart": {
+                "type": "string"
+            },
+            "row": {
+                "type": "string"
+            },
+            "rowEnd": {
+                "type": "string"
+            },
+            "rowSpan": {
+                "type": "string"
+            },
+            "rowStart": {
+                "type": "string"
+            },
+            "ariaLabel": {
+                "type": "string"
+            },
+            "ariaValuetext": {
+                "type": "string"
+            },
+            "role": {
+                "type": "string"
+            },
+            "direction": {
+                "type": "string"
+            },
+            "wrap": {
+                "type": "string"
+            },
+            "alignItems": {
+                "type": "string"
+            },
+            "alignContent": {
+                "type": "string"
+            },
+            "justifyContent": {
+                "type": "string"
+            },
+            "gap": {
+                "type": "string"
+            },
+            "columnGap": {
+                "type": "string"
+            },
+            "rowGap": {
+                "type": "string"
+            },
+            "autoComplete": {
+                "type": "string"
+            },
+            "checked": {
+                "type": "boolean"
+            },
+            "defaultChecked": {
+                "type": "boolean"
+            },
+            "defaultValue": {
+                "type": "string"
+            },
+            "hasError": {
+                "type": "boolean"
+            },
+            "enterKeyHint": {
+                "type": "string"
+            },
+            "inputMode": {
+                "type": "string"
+            },
+            "isReadOnly": {
+                "type": "boolean"
+            },
+            "isRequired": {
+                "type": "boolean"
+            },
+            "placeholder": {
+                "type": "string"
+            },
+            "size": {
+                "type": "string"
+            },
+            "type": {
+                "type": "string"
+            },
+            "variation": {
+                "type": "string"
+            }
+        }
+    },
     "CheckboxField": {
         "properties": {
             "label": {

package/dist/esm/components/AccountSettings/ChangePassword/ChangePassword.mjs

@@ -8,6 +8,7 @@ import '../../ThemeProvider/ThemeContext.mjs';
 import '../../../primitives/Alert/AlertIcon.mjs';
 import { View } from '../../../primitives/View/View.mjs';
 import '../../../primitives/Icon/context/IconsContext.mjs';
+import '../../FileSelect/FileSelect.mjs';
 import '../../../primitives/Field/FieldClearButton.mjs';
 import '../../../primitives/Field/FieldDescription.mjs';
 import '../../../primitives/Field/FieldErrorMessage.mjs';
@@ -20,6 +21,7 @@ import '../../../primitives/Breadcrumbs/Breadcrumbs.mjs';
 import '../../../primitives/Button/Button.mjs';
 import '../../../primitives/ButtonGroup/ButtonGroup.mjs';
 import '../../../primitives/Card/Card.mjs';
+import '../../../primitives/Checkbox/Checkbox.mjs';
 import '../../../primitives/CheckboxField/CheckboxField.mjs';
 import '../../../primitives/Collection/Collection.mjs';
 import '../../../primitives/Divider/Divider.mjs';

package/dist/esm/components/AccountSettings/ChangePassword/defaults.mjs

@@ -7,6 +7,7 @@ import '../../../primitives/Breadcrumbs/Breadcrumbs.mjs';
 import { Button } from '../../../primitives/Button/Button.mjs';
 import '../../../primitives/ButtonGroup/ButtonGroup.mjs';
 import '../../../primitives/Card/Card.mjs';
+import '../../../primitives/Checkbox/Checkbox.mjs';
 import '../../../primitives/CheckboxField/CheckboxField.mjs';
 import '../../../primitives/Collection/Collection.mjs';
 import '../../../primitives/Divider/Divider.mjs';

package/dist/esm/components/AccountSettings/DeleteUser/DeleteUser.mjs

@@ -7,6 +7,7 @@ import '../../ThemeProvider/ThemeContext.mjs';
 import '../../../primitives/Alert/AlertIcon.mjs';
 import '../../../primitives/View/View.mjs';
 import '../../../primitives/Icon/context/IconsContext.mjs';
+import '../../FileSelect/FileSelect.mjs';
 import '../../../primitives/Field/FieldClearButton.mjs';
 import '../../../primitives/Field/FieldDescription.mjs';
 import '../../../primitives/Field/FieldErrorMessage.mjs';
@@ -19,6 +20,7 @@ import '../../../primitives/Breadcrumbs/Breadcrumbs.mjs';
 import '../../../primitives/Button/Button.mjs';
 import '../../../primitives/ButtonGroup/ButtonGroup.mjs';
 import '../../../primitives/Card/Card.mjs';
+import '../../../primitives/Checkbox/Checkbox.mjs';
 import '../../../primitives/CheckboxField/CheckboxField.mjs';
 import '../../../primitives/Collection/Collection.mjs';
 import '../../../primitives/Divider/Divider.mjs';

package/dist/esm/components/AccountSettings/DeleteUser/defaults.mjs

@@ -7,6 +7,7 @@ import '../../../primitives/Breadcrumbs/Breadcrumbs.mjs';
 import { Button } from '../../../primitives/Button/Button.mjs';
 import '../../../primitives/ButtonGroup/ButtonGroup.mjs';
 import { Card } from '../../../primitives/Card/Card.mjs';
+import '../../../primitives/Checkbox/Checkbox.mjs';
 import '../../../primitives/CheckboxField/CheckboxField.mjs';
 import '../../../primitives/Collection/Collection.mjs';
 import '../../../primitives/Divider/Divider.mjs';

package/dist/esm/components/AccountSettings/shared/Defaults.mjs

@@ -7,6 +7,7 @@ import '../../../primitives/Breadcrumbs/Breadcrumbs.mjs';
 import '../../../primitives/Button/Button.mjs';
 import '../../../primitives/ButtonGroup/ButtonGroup.mjs';
 import '../../../primitives/Card/Card.mjs';
+import '../../../primitives/Checkbox/Checkbox.mjs';
 import '../../../primitives/CheckboxField/CheckboxField.mjs';
 import '../../../primitives/Collection/Collection.mjs';
 import '../../../primitives/Divider/Divider.mjs';

package/dist/esm/components/FileSelect/FileSelect.mjs

@@ -0,0 +1,70 @@
+import React__default from 'react';
+import { isFunction } from '@aws-amplify/ui';
+import { useStableId } from '../../primitives/utils/useStableId.mjs';
+
+// `FileSelect` input `type` must always be set to `file`
+const INPUT_TYPE = 'file';
+const TEST_ID = 'amplify-file-select';
+const DEFAULT_PROPS = {
+    style: { display: 'none' },
+    type: 'file',
+    'data-testid': TEST_ID,
+};
+/**
+ * @internal @unstable
+ */
+const FileSelect = React__default.forwardRef(function FileSelect({ multiple = true, type = 'FILE', testId = 'amplify-file-select', ...props }, ref) {
+    return (React__default.createElement("input", { ...DEFAULT_PROPS, ...props, ...(type === 'FOLDER' ? { webkitdirectory: '' } : undefined), "data-testid": testId, multiple: multiple, ref: ref, type: INPUT_TYPE }));
+});
+/**
+ * @internal @unstable
+ *
+ * @usage
+ * ```tsx
+ *  function MyUploadButton() {
+ *    const [files, setFiles] = React.useState<File[]>([]);
+ *    const [fileSelect, handleFileSelect] = useFileSelect(setFiles);
+ *    return (
+ *      <>
+ *        {fileSelect}
+ *        <Button
+ *          onClick={() => {
+ *            handleFileSelect('file');
+ *          }}
+ *        />
+ *      </>
+ *    );
+ *  }
+ * ```
+ */
+const useFileSelect = (onSelect) => {
+    const [inputProps, setInputProps] = React__default.useState(undefined);
+    const id = useStableId();
+    const ref = React__default.useRef(null);
+    React__default.useEffect(() => {
+        if (inputProps) {
+            ref.current?.click();
+        }
+    }, [id, inputProps]);
+    const handleFileSelect = React__default.useCallback((type, options) => {
+        if (id !== ref.current?.id)
+            return;
+        setInputProps({ type, ...options });
+    }, [id]);
+    const fileSelect = (React__default.createElement(FileSelect, { ...inputProps, id: id, onChange: (event) => {
+            if (isFunction(inputProps?.onChange))
+                inputProps?.onChange(event);
+            if (isFunction(onSelect) && !!event.target.files?.length) {
+                onSelect?.([...event.target.files]);
+            }
+            // Reset the input value to allow re-selecting the same file
+            if (ref.current) {
+                ref.current.value = '';
+            }
+            // clean up
+            setInputProps(undefined);
+        }, ref: ref }));
+    return [fileSelect, handleFileSelect];
+};
+
+export { DEFAULT_PROPS, FileSelect, useFileSelect };

package/dist/esm/components/ThemeProvider/ComponentStyle.mjs

@@ -2,10 +2,6 @@ import * as React from 'react';
 import { createComponentCSS } from '@aws-amplify/ui';
 import { Style } from './Style.mjs';
 
-/**
- * @experimental
- * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
- */
 const ComponentStyle = ({ theme, componentThemes = [], ...rest }) => {
     if (!theme || !componentThemes.length) {
         return null;

package/dist/esm/components/ThemeProvider/GlobalStyle.mjs

@@ -2,10 +2,6 @@ import * as React from 'react';
 import { createGlobalCSS } from '@aws-amplify/ui';
 import { Style } from './Style.mjs';
 
-/**
- * @experimental
- * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
- */
 const GlobalStyle = ({ styles, ...rest }) => {
     if (!styles) {
         return null;

package/dist/esm/components/ThemeProvider/Style.mjs

@@ -1,9 +1,5 @@
 import * as React from 'react';
 
-/**
- * @experimental
- * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
- */
 const Style = ({ cssText, ...rest }) => {
     /*
       Only inject theme CSS variables if given a theme.

package/dist/esm/components/ThemeProvider/ThemeStyle.mjs

@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { Style } from './Style.mjs';
 
-/**
- * @experimental
- * [📖 Docs](https://ui.docs.amplify.aws/react/components/theme)
- */
 const ThemeStyle = ({ theme, ...rest }) => {
     if (!theme)
         return null;

package/dist/esm/index.mjs

@@ -19,6 +19,7 @@ export { Breadcrumbs } from './primitives/Breadcrumbs/Breadcrumbs.mjs';
 export { Button } from './primitives/Button/Button.mjs';
 export { ButtonGroup } from './primitives/ButtonGroup/ButtonGroup.mjs';
 export { Card } from './primitives/Card/Card.mjs';
+export { Checkbox } from './primitives/Checkbox/Checkbox.mjs';
 export { CheckboxField } from './primitives/CheckboxField/CheckboxField.mjs';
 export { Collection } from './primitives/Collection/Collection.mjs';
 export { Divider } from './primitives/Divider/Divider.mjs';