aws-amplify · dbanksdesign · Aug 31, 2023 · Aug 31, 2023 · Sep 6, 2023 · Sep 6, 2023
@@ -0,0 +1,24 @@
+---
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+---
+
+added new `isMultiple` and `selectSize` props for the `SelectField` component
+
+Example:
+
+```
+  <SelectField
+    label="Fruit"
+    descriptiveText="What's your favorite fruit?"
+    selectSize={3}
+    isMultiple={true}
+  >
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="orange">Orange</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="kiwi">Kiwi</option>
+    <option value="tangerine">Tangerine</option>
+  </SelectField>
+```
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-liveness": patch
+---
+
+chore(liveness): remove predictions super class
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-liveness": patch
+---
+
+fix(liveness): add missing liveness dependencies
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(ui-react): update ButtonGroup to respect child props and allow optional children
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(ui-react): use guaranteed value for BreadCrumbs key
@@ -1,6 +1,7 @@
 allow-licenses:
   - '0BSD'
   - 'Apache-2.0'
+  - 'BlueOak-1.0.0'
   - 'BSL-1.0'
   - 'BSD-1-Clause'
   - 'BSD-2-Clause-FreeBSD'

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Runs `npm` or `yarn` install with retries
+# Takes 2 parameters: the package manager and the dependencies to be installed
+# Usage:  install_with_retries npm "$DEPENDENCIES" or  install_with_retries yarn "$DEPENDENCIES"
+install_with_retries() {
+    local retries=3
+    local attempt=1
+    while [ $attempt -le $retries ]; do
+        echo "Attempt $attempt/$retries"
+        echo "$1 install $2"
+        "$1" install $2
+        if [ $? -eq 0 ]; then
+            echo "$1 install successful."
+            break
+        fi
+        attempt=$((attempt + 1))
+        if [ $attempt -le $retries ]; then
+            echo "$1 install failed. Retrying in 5 seconds..."
+            sleep 5
+        else
+            echo "$1 install failed after $retries attempts."
+            exit 1
+        fi
+    done
+}
@@ -10,6 +10,9 @@ FRAMEWORK_VERSION="latest"
 PKG_MANAGER="npm"
 PKG_MANAGER_VERSION="latest"
 
+# Import install function
+source "./scripts/install-with-retries.sh"
+
 # Options
 # e.g.
 # $ ./mega-app-install.sh --build-tool react --build-tool-version latest --language typescript --name react-latest-cra-latest-node-18-ts --framework cra --framework-version latest --pkg-manager npm --pkg-manager-version latest
@@ -122,8 +125,7 @@ else
     if [[ "$BUILD_TOOL" == 'cra' && "$LANGUAGE" == 'ts' ]]; then
         # If not testing the latest React, we need to download its types.
         # CRA is the only framework that we test React 16.
-        echo "npm install $DEP_TYPES"
-        npm install $DEP_TYPES
+        install_with_retries npm "$DEP_TYPES"
     fi
 
     if [[ "$BUILD_TOOL" == 'next' && "$BUILD_TOOL_VERSION" == '11' ]]; then
@@ -141,8 +143,7 @@ else
             npx expo install --fix # fix the dependencies that are incompatible with the installed expo versio
         fi
     else
-        echo "npm install $DEPENDENCIES"
-        npm install $DEPENDENCIES
+        install_with_retries npm "$DEPENDENCIES"
     fi
 fi
 

@@ -21,7 +21,7 @@ Note: to set up local environment
 cp ./docs/.env.example ./docs/.env
 ```
 
-Then set values to the variables.
+Then set values to the variables in the `./docs/.env` file. The values don't matter for local testing. They only matter if you are actually trying to make the Search work.
 
 Note, if you're not using `nvm`, you'll need to set the environment variable: `export NODE_OPTIONS=--openssl-legacy-provider`
 

@@ -4506,6 +4506,38 @@ exports[`CSS Variables Table 1`] = `
         \\"variable\\": \\"--amplify-components-searchfield-color\\",
         \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\"
     },
+    {
+        \\"variable\\": \\"--amplify-components-select-background-color\\",
+        \\"value\\": \\"var(--amplify-colors-background-primary)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-color\\",
+        \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-disabled-background-color\\",
+        \\"value\\": \\"var(--amplify-colors-background-disabled)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-disabled-color\\",
+        \\"value\\": \\"var(--amplify-colors-font-disabled)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-expanded-option-padding-block\\",
+        \\"value\\": \\"var(--amplify-space-xs)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-expanded-option-padding-inline\\",
+        \\"value\\": \\"var(--amplify-space-small)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-expanded-padding-block\\",
+        \\"value\\": \\"var(--amplify-space-xs)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-expanded-padding-inline\\",
+        \\"value\\": \\"var(--amplify-space-small)\\"
+    },
     {
         \\"variable\\": \\"--amplify-components-select-icon-wrapper-align-items\\",
         \\"value\\": \\"center\\"
@@ -4552,12 +4584,16 @@ exports[`CSS Variables Table 1`] = `
     },
     {
         \\"variable\\": \\"--amplify-components-select-option-background-color\\",
-        \\"value\\": \\"var(--amplify-colors-background-primary)\\"
+        \\"value\\": \\"transparent\\"
     },
     {
         \\"variable\\": \\"--amplify-components-select-option-color\\",
         \\"value\\": \\"var(--amplify-colors-font-primary)\\"
     },
+    {
+        \\"variable\\": \\"--amplify-components-select-option-disabled-background-color\\",
+        \\"value\\": \\"transparent\\"
+    },
     {
         \\"variable\\": \\"--amplify-components-select-option-disabled-color\\",
         \\"value\\": \\"var(--amplify-colors-font-disabled)\\"

@@ -9742,6 +9742,20 @@ exports[`Props Table 1`] = `
                         \\"category\\": \\"BaseSelectProps\\",
                         \\"isOptional\\": true
                     },
+                    \\"isMultiple\\": {
+                        \\"name\\": \\"isMultiple\\",
+                        \\"type\\": \\"boolean | undefined\\",
+                        \\"description\\": \\"A Boolean attribute indicating that multiple options can be selected at once\\",
+                        \\"category\\": \\"BaseSelectProps\\",
+                        \\"isOptional\\": true
+                    },
+                    \\"selectSize\\": {
+                        \\"name\\": \\"selectSize\\",
+                        \\"type\\": \\"number | undefined\\",
+                        \\"description\\": \\"Sets the number of visible options in a drop-down list\\",
+                        \\"category\\": \\"BaseSelectProps\\",
+                        \\"isOptional\\": true
+                    },
                     \\"isRequired\\": {
                         \\"name\\": \\"isRequired\\",
                         \\"type\\": \\"boolean | undefined\\",

@@ -22,8 +22,8 @@ export default function BreadcrumbsStyleExample() {
       borderRadius="medium"
       padding="medium"
     >
-      {breadcrumbs.map(({ href, text, isCurrent }) => (
-        <Breadcrumbs.Item key={href}>
+      {breadcrumbs.map(({ href, text, isCurrent }, idx) => (
+        <Breadcrumbs.Item key={`${href}${idx}`}>
           <Breadcrumbs.Link
             fontWeight="bold"
             textDecoration="underline"

@@ -1,8 +1,8 @@
-import { Input, Label } from '@aws-amplify/ui-react';
+import { Input, Label, Flex } from '@aws-amplify/ui-react';
 
 export const DefaultInputExample = () => (
-  <>
+  <Flex direction="column" gap="small">
     <Label htmlFor="first_name">First Name:</Label>
     <Input id="first_name" name="first_name" />
-  </>
+  </Flex>
 );
@@ -3,8 +3,10 @@ import { Button, Flex, Input, Label } from '@aws-amplify/ui-react';
 export const DefaultRequiredInputExample = () => {
   return (
     <Flex as="form" direction="column" width="20rem">
-      <Label htmlFor="email">Email</Label>
-      <Input id="email" type="email" isRequired />
+      <Flex direction="column" gap="small">
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" isRequired />
+      </Flex>
       <Button type="submit">Submit</Button>
     </Flex>
   );

@@ -1,7 +1,7 @@
-import { Input, Label } from '@aws-amplify/ui-react';
+import { Input, Label, Flex } from '@aws-amplify/ui-react';
 
 export const InputEventHandlersExample = () => (
-  <>
+  <Flex direction="column" gap="small">
     <Label htmlFor="events">Event handlers</Label>
     <Input
       id="events"
@@ -12,5 +12,5 @@ export const InputEventHandlersExample = () => (
       onPaste={(e) => console.info('onPaste fired:', e.currentTarget.value)}
       onCut={(e) => console.info('onCut fired:', e.currentTarget.value)}
     />
-  </>
+  </Flex>
 );
@@ -3,12 +3,20 @@ import { Flex, Input, Label } from '@aws-amplify/ui-react';
 export const InputSizeExample = () => {
   return (
     <Flex direction="column">
-      <Label htmlFor="small">Small</Label>
-      <Input id="small" size="small" width="50%" />
-      <Label htmlFor="default">Default</Label>
-      <Input id="default" width="75%" />
-      <Label htmlFor="large">Large</Label>
-      <Input id="large" size="large" width="100%" />
+      <Flex direction="column" gap="small">
+        <Label htmlFor="small">Small</Label>
+        <Input id="small" size="small" width="50%" />
+      </Flex>
+
+      <Flex direction="column" gap="small">
+        <Label htmlFor="default">Default</Label>
+        <Input id="default" width="75%" />
+      </Flex>
+
+      <Flex direction="column" gap="small">
+        <Label htmlFor="large">Large</Label>
+        <Input id="large" size="large" width="100%" />
+      </Flex>
     </Flex>
   );
 };
@@ -2,11 +2,15 @@ import { Flex, Input, Label } from '@aws-amplify/ui-react';
 
 export const InputStatesExample = () => {
   return (
-    <Flex direction="column" gap="1rem">
-      <Label htmlFor="disabled">Disabled</Label>
-      <Input id="disabled" defaultValue="Disabled" isDisabled />
-      <Label htmlFor="readonly">Readonly</Label>
-      <Input id="readonly" defaultValue="You can't edit me!" isReadOnly />
+    <Flex direction="column">
+      <Flex direction="column" gap="small">
+        <Label htmlFor="disabled">Disabled</Label>
+        <Input id="disabled" defaultValue="Disabled" isDisabled />
+      </Flex>
+      <Flex direction="column" gap="small">
+        <Label htmlFor="readonly">Readonly</Label>
+        <Input id="readonly" defaultValue="You can't edit me!" isReadOnly />
+      </Flex>
     </Flex>
   );
 };
@@ -1,30 +1,35 @@
-import { Text, Input, Label, useTheme } from '@aws-amplify/ui-react';
+import { Text, Input, Label, useTheme, Flex } from '@aws-amplify/ui-react';
 
 export const InputStylePropsExample = () => {
   const { tokens } = useTheme();
   return (
-    <>
-      <Label htmlFor="name">
-        <Text
+    <Flex direction="column">
+      <Flex direction="column" gap="small">
+        <Label htmlFor="name">
+          <Text
+            fontWeight={tokens.fontWeights.bold}
+            fontSize={tokens.fontSizes.xl}
+          >
+            Name:
+          </Text>
+        </Label>
+        <Input
+          id="name"
           fontWeight={tokens.fontWeights.bold}
           fontSize={tokens.fontSizes.xl}
-        >
-          Name:
-        </Text>
-      </Label>
-      <Input
-        id="name"
-        fontWeight={tokens.fontWeights.bold}
-        fontSize={tokens.fontSizes.xl}
-        padding="xl"
-        border={`1px solid ${tokens.colors.brand.primary[60]}`}
-      />
-      <Label htmlFor="special">Special Field</Label>
-      <Input
-        id="special"
-        backgroundColor="brand.primary.10"
-        border={`1px solid ${tokens.colors.brand.primary[60]}`}
-      />
-    </>
+          padding="xl"
+          border={`1px solid ${tokens.colors.brand.primary[60]}`}
+        />
+      </Flex>
+
+      <Flex direction="column" gap="small">
+        <Label htmlFor="special">Special Field</Label>
+        <Input
+          id="special"
+          backgroundColor="brand.primary.10"
+          border={`1px solid ${tokens.colors.brand.primary[60]}`}
+        />
+      </Flex>
+    </Flex>
   );
 };
@@ -1,4 +1,10 @@
-import { Input, Label, ThemeProvider, Theme } from '@aws-amplify/ui-react';
+import {
+  Flex,
+  Input,
+  Label,
+  ThemeProvider,
+  Theme,
+} from '@aws-amplify/ui-react';
 
 const theme: Theme = {
   name: 'input-theme',
@@ -16,7 +22,9 @@ const theme: Theme = {
 
 export const InputThemeExample = () => (
   <ThemeProvider theme={theme} colorMode="light">
-    <Label htmlFor="name">Name</Label>
-    <Input id="name" />
+    <Flex direction="column" gap="small">
+      <Label htmlFor="name">Name</Label>
+      <Input id="name" />
+    </Flex>
   </ThemeProvider>
 );