@vygruppen/spor-react 2.3.3 → 2.4.0

package/src/input/Popover.tsx

@@ -1,5 +1,5 @@
 import { Box } from "@chakra-ui/react";
-import React, { useRef } from "react";
+import React, { forwardRef, useRef } from "react";
 import {
   AriaPopoverProps,
   DismissButton,
@@ -33,38 +33,45 @@ type PopoverProps = {
  *
  * Used to render accessible popover content, like a  dropdown menu or a card select. Should not be used directly, but as a part of Spor components.
  */
-export const Popover = ({
-  children,
-  state,
-  triggerRef,
-  offset = 0,
-  crossOffset = 0,
-  placement = "bottom",
-}: PopoverProps) => {
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const { popoverProps, underlayProps } = usePopover(
+export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
+  (
     {
+      children,
+      state,
       triggerRef,
-      popoverRef,
-      offset,
-      crossOffset,
-      placement,
+      offset = 0,
+      crossOffset = 0,
+      placement = "bottom",
     },
-    state
-  );
+    ref
+  ) => {
+    const internalRef = useRef<HTMLDivElement>(null);
+    const popoverRef = ref ?? (internalRef as any);
 
-  return (
-    <Overlay>
-      <Box {...underlayProps} position="fixed" inset="0" />
-      <Box
-        {...popoverProps}
-        ref={popoverRef}
-        minWidth={triggerRef.current?.clientWidth ?? "auto"}
-      >
-        <DismissButton onDismiss={state.close} />
-        {children}
-        <DismissButton onDismiss={state.close} />
-      </Box>
-    </Overlay>
-  );
-};
+    const { popoverProps, underlayProps } = usePopover(
+      {
+        triggerRef,
+        popoverRef,
+        offset,
+        crossOffset,
+        placement,
+      },
+      state
+    );
+
+    return (
+      <Overlay>
+        <Box {...underlayProps} position="fixed" inset="0" />
+        <Box
+          {...popoverProps}
+          ref={popoverRef}
+          minWidth={triggerRef.current?.clientWidth ?? "auto"}
+        >
+          <DismissButton onDismiss={state.close} />
+          {children}
+          <DismissButton onDismiss={state.close} />
+        </Box>
+      </Overlay>
+    );
+  }
+);

package/src/input/index.tsx

@@ -1,11 +1,12 @@
 export { FormHelperText, InputGroup } from "@chakra-ui/react";
 export type { InputGroupProps } from "@chakra-ui/react";
 export * from "./AttachedInputs";
+export * from "./Autosuggest";
 export * from "./CardSelect";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./ChoiceChip";
-export * from "./NumericStepper";
+export * from "./Combobox";
 export * from "./FormControl";
 export * from "./FormErrorMessage";
 export * from "./FormLabel";
@@ -14,6 +15,7 @@ export * from "./Input";
 export * from "./InputElement";
 export * from "./ListBox";
 export * from "./NativeSelect";
+export * from "./NumericStepper";
 export * from "./PasswordInput";
 export * from "./PhoneNumberInput";
 export * from "./Radio";

package/src/loader/DarkSpinner.tsx

@@ -1,6 +1,6 @@
-import { Box, BoxProps, Center } from "@chakra-ui/react";
 import { spinnerDarkData } from "@vygruppen/spor-loader";
 import React from "react";
+import { Box, BoxProps, Center } from "..";
 import { ClientOnly } from "./ClientOnly";
 import Lottie from "./Lottie";
 
@@ -34,7 +34,7 @@ export const DarkSpinner = ({
         </ClientOnly>
       </Box>
       {children && (
-        <Box mt={3} fontWeight="bold">
+        <Box marginTop={3} fontWeight="bold">
           {children}
         </Box>
       )}

package/src/theme/components/listbox.ts

@@ -31,19 +31,19 @@ const config = helpers.defineMultiStyleConfig({
       },
       _focus: {
         outline: "none",
-        background: mode("mint", "darkTeal")(props),
+        backgroundColor: mode("mint", "darkTeal")(props),
       },
       _selected: {
-        background: mode("pine", "pine")(props),
+        backgroundColor: mode("pine", "pine")(props),
         color: mode("white", "white")(props),
       },
     },
     label: {},
     description: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: "dimGrey",
+      color: mode("dimGrey", "silver")(props),
       "[aria-selected='true'] &": {
-        color: "lightGrey",
+        color: mode("lightGrey", "platinum")(props),
       },
     },
   }),