feat: loosen up the zod validations and return null instead of throwing

2024-06-07 10:36:23 +02:00
parent 5c50ac060d
commit aca9221ea6
89 changed files with 1117 additions and 821 deletions
@@ -11,6 +11,8 @@ import {
  SelectValue,
 } from "react-aria-components"

+import Body from "../../Text/Body"
+import Footnote from "../../Text/Footnote"
 import SelectChevron from "../SelectChevron"

 import styles from "./select.module.css"
@@ -48,38 +50,44 @@ export default function Select({
        placeholder={placeholder}
        selectedKey={value as Key}
      >
-        <Button className={styles.input}>
-          <div className={styles.inputContentWrapper}>
-            <Label className={styles.label}>{label}</Label>
-            <SelectValue />
-          </div>
-          <SelectChevron />
-        </Button>
-        <Popover
-          className={styles.popover}
-          placement="bottom"
-          shouldFlip={false}
-          /**
-           * react-aria uses portals to render Popover in body
-           * unless otherwise specified. We need it to be contained
-           * by this component to both access css variables assigned
-           * on the container as well as to not overflow it at any time.
-           */
-          UNSTABLE_portalContainer={rootDiv ?? undefined}
-        >
-          <ListBox className={styles.listBox}>
-            {items.map((item) => (
-              <ListBoxItem
-                aria-label={String(item)}
-                className={styles.listBoxItem}
-                id={item.value}
-                key={item.label}
-              >
-                {item.label}
-              </ListBoxItem>
-            ))}
-          </ListBox>
-        </Popover>
+        <Body asChild fontOnly>
+          <Button className={styles.input}>
+            <div className={styles.inputContentWrapper}>
+              <Footnote asChild fontOnly>
+                <Label className={styles.label}>{label}</Label>
+              </Footnote>
+              <SelectValue />
+            </div>
+            <SelectChevron />
+          </Button>
+        </Body>
+        <Body asChild fontOnly>
+          <Popover
+            className={styles.popover}
+            placement="bottom"
+            shouldFlip={false}
+            /**
+             * react-aria uses portals to render Popover in body
+             * unless otherwise specified. We need it to be contained
+             * by this component to both access css variables assigned
+             * on the container as well as to not overflow it at any time.
+             */
+            UNSTABLE_portalContainer={rootDiv ?? undefined}
+          >
+            <ListBox className={styles.listBox}>
+              {items.map((item) => (
+                <ListBoxItem
+                  aria-label={String(item)}
+                  className={styles.listBoxItem}
+                  id={item.value}
+                  key={item.label}
+                >
+                  {item.label}
+                </ListBoxItem>
+              ))}
+            </ListBox>
+          </Popover>
+        </Body>
      </ReactAriaSelect>
    </div>
  )