Merge pull request #191 from cosmology-tech/fix/comboboxes-anchor

Fix/comboboxes anchor
cosmology-tech · Jun 20, 2024 · 9958e03 · 9958e03
2 parents 8759faa + d2bfc4e
commit 9958e03
Show file tree

Hide file tree

Showing 6 changed files with 15,473 additions and 22,575 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -58,9 +58,9 @@
     "@floating-ui/react": "^0.26.4",
     "@floating-ui/react-dom": "^2.0.8",
     "@formkit/auto-animate": "^0.8.1",
-    "@react-aria/listbox": "^3.11.5",
-    "@react-aria/overlays": "^3.20.0",
-    "@react-aria/utils": "^3.21.1",
+    "@react-aria/listbox": "^3.12.1",
+    "@react-aria/overlays": "^3.22.1",
+    "@react-aria/utils": "^3.24.1",
     "@vanilla-extract/css": "^1.14.1",
     "@vanilla-extract/dynamic": "^2.1.0",
     "@vanilla-extract/recipes": "^0.5.1",
@@ -72,7 +72,7 @@
     "immer": "^10.0.4",
     "lodash": "^4.17.21",
     "rainbow-sprinkles": "^0.17.1",
-    "react-aria": "^3.29.1",
+    "react-aria": "^3.33.1",
     "react-stately": "^3.27.1",
     "zustand": "^4.5.2"
   },

diff --git a/packages/react/scaffolds/combobox/combobox.tsx b/packages/react/scaffolds/combobox/combobox.tsx
@@ -13,7 +13,6 @@ import Icon from "@/ui/icon";
 import Box from "@/ui/box";
 import useTheme from "@/ui/hooks/use-theme";
 import type { BoxProps } from "@/ui/box/box.types";
-import { unstyledButton } from "@/ui/button/button.css";
 import { inputSizes } from "@/ui/text-field/text-field.css";
 import { ComboboxContext } from "./combobox.context";
 import { ListBox } from "./list-box";
@@ -36,7 +35,7 @@ export default function Combobox<T extends object>(props: ComboboxProps<T>) {
     size = "sm",
     defaultIsOpen = false,
     openOnFocus = false,
-    styleProps,
+    styleProps = {},
     inputAddonStart,
     inputAddonEnd,
     ...comboboxProps
@@ -138,6 +137,7 @@ export default function Combobox<T extends object>(props: ComboboxProps<T>) {
         )}
 
         <Box
+          boxRef={containerRef}
           position="relative"
           display="flex"
           borderRadius="$md"
@@ -147,7 +147,6 @@ export default function Combobox<T extends object>(props: ComboboxProps<T>) {
           borderStyle="solid"
           borderColor={state.isFocused ? "$inputBorderFocus" : "$inputBorder"}
           className={clx(styles.comboboxInput[theme])}
-          ref={containerRef}
           attributes={{
             "data-focused": isFocused,
           }}
@@ -168,7 +167,7 @@ export default function Combobox<T extends object>(props: ComboboxProps<T>) {
           <Box
             as="input"
             attributes={inputProps}
-            ref={inputRef}
+            boxRef={inputRef}
             outline="none"
             paddingX="$5"
             paddingY="$2"

diff --git a/packages/react/scaffolds/combobox/popover.tsx b/packages/react/scaffolds/combobox/popover.tsx
@@ -13,11 +13,19 @@ interface PopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
 
 export function Popover(props: PopoverProps) {
   const ref = React.useRef<HTMLDivElement>(null);
-  const { popoverRef = ref, state, children, className, isNonModal } = props;
+  const {
+    popoverRef = ref,
+    triggerRef,
+    state,
+    children,
+    className,
+    isNonModal,
+  } = props;
 
   const { popoverProps, underlayProps } = usePopover(
     {
       ...props,
+      triggerRef,
       popoverRef,
     },
     state,
@@ -31,13 +39,8 @@ export function Popover(props: PopoverProps) {
 
       <Box
         attributes={popoverProps}
-        ref={popoverRef}
+        boxRef={popoverRef}
         boxShadow="$lg"
-        borderWidth="1px"
-        borderStyle="solid"
-        borderColor="$divider"
-        borderRadius="$lg"
-        marginTop="$4"
         className={className}
       >
         {!isNonModal && <DismissButton onDismiss={state.close} />}

diff --git a/packages/react/stories/noble/NobleBaseComponents.stories.tsx b/packages/react/stories/noble/NobleBaseComponents.stories.tsx
@@ -275,6 +275,18 @@ export const Primary: Story = {
           <Box display="flex" gap="$4" flexDirection="column" maxWidth="466px">
             <Text>NobleInput</Text>
 
+            <NobleInput
+              id="source-token-amount"
+              size="sm"
+              label="Select amount"
+              placeholder="Enter amount"
+              value={inputValue}
+              onChange={(e) => {
+                console.log("Change: ", e.target.value);
+                setInputValue(e.target.value);
+              }}
+            />
+
             <NobleInput
               id="token-amount"
               size="md"
@@ -376,6 +388,7 @@ export const Primary: Story = {
               inputContainerProps={{
                 // Space for the button
                 paddingRight: "150px",
+                // borderColor: "transparent",
               }}
               endAddon={
                 <Box position="absolute" right="$4" top="$4">