@vygruppen/spor-react 12.7.1 → 12.8.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.7.1",
+  "version": "12.8.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/input/CheckboxGroup.tsx

@@ -1,21 +1,10 @@
-import {
-  CheckboxGroup as ChakraCheckboxGroup,
-  CheckboxGroupProps as ChakraCheckboxGroupProps,
-  Stack,
-} from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import { CheckboxGroup as ChakraCheckboxGroup, Stack } from "@chakra-ui/react";
+import React from "react";
 
-export type CheckboxGroupProps = Exclude<
-  ChakraCheckboxGroupProps,
-  "colorPalette" | "size" | "variant"
+export type CheckboxGroupProps = React.ComponentProps<
+  typeof ChakraCheckboxGroup
 > & {
-  /* Defaults to row */
-  direction?: "row" | "column";
-  children: React.ReactNode;
-  /* Defaults to 1 */
-  gap?: number | string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any; //Find a way to not use type any
+  direction: "row" | "column"; // Defaults to row
 };
 /**
  * Used to group several checkboxes together. You can pass the default value, as well as whether or not they're all disabled
@@ -36,19 +25,19 @@ export type CheckboxGroupProps = Exclude<
  *   <Checkbox>Business</Checkbox>
  *   <Checkbox>First Class</Checkbox>
  * </CheckboxGroup>
+ * ```
  */
 
-export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
-  (props, ref) => {
-    const { direction = "row", children, gap = 1, ...rest } = props;
+export const CheckboxGroup = (props: CheckboxGroupProps) => {
+  // Forwardref caues issue with prop types not working. Forwardref is unessessary here, as ChakraCheckbox already has a ref prop and is deprecated in react 19.
+  const { direction = "row", children, gap = 1, ...rest } = props;
 
-    return (
-      <ChakraCheckboxGroup ref={ref} {...rest}>
-        <Stack direction={direction} gap={gap}>
-          {children}
-        </Stack>
-      </ChakraCheckboxGroup>
-    );
-  },
-);
+  return (
+    <ChakraCheckboxGroup {...rest}>
+      <Stack direction={direction} gap={gap}>
+        {children}
+      </Stack>
+    </ChakraCheckboxGroup>
+  );
+};
 CheckboxGroup.displayName = "CheckboxGroup";

package/src/input/Combobox.tsx

@@ -56,10 +56,10 @@ export const Combobox = (props: ComboboxProps<object>) => {
     loading,
     leftIcon,
     rightIcon,
-    borderBottomLeftRadius = "sm",
-    borderBottomRightRadius = "sm",
-    borderTopLeftRadius = "sm",
-    borderTopRightRadius = "sm",
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
     marginBottom,
     marginTop,
     marginX,
@@ -171,6 +171,7 @@ export const Combobox = (props: ComboboxProps<object>) => {
           )
         }
         placeholder=""
+        data-attachable
       />
       <span aria-hidden="true" data-trigger="multiselect"></span>
       {state.isOpen && !loading && (

package/src/input/CountryCodeSelect.tsx

@@ -55,7 +55,7 @@ export const CountryCodeSelect = forwardRef<
       collection={callingCodes}
       lazyMount
       aria-label={t(texts.countryCode)}
-      variant={"rightSideSquare"}
+      sideRadiusVariant={"rightSideSquare"}
     >
       {callingCodes.items.map((code) => (
         <SelectItem as={"option"} key={code.label} item={code}>

package/src/input/Field.tsx

@@ -28,7 +28,10 @@ export type FieldBaseProps = {
   floatingLabel?: boolean;
 };
 
-export type FieldProps = Omit<ChakraField.RootProps, "label" | "onChange"> &
+export type FieldProps = Omit<
+  ChakraField.RootProps,
+  "label" | "onChange" | "onBlur" | "onFocus" | "onClick" | "children"
+> &
   React.PropsWithChildren<FieldVariantProps> &
   FieldBaseProps;
 
@@ -68,7 +71,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
     const styles = recipe();
 
     return (
-      <Stack gap="2" ref={ref} {...rest}>
+      <Stack gap="2" ref={ref} width="100%" {...rest}>
         <ChakraField.Root
           disabled={disabled}
           invalid={invalid}

package/src/input/Select.tsx

@@ -30,8 +30,9 @@ export type SelectProps = ChakraSelectRootProps &
 /**
  * A Select component.
  *
- * This component is useful to choose an item from a dropdown list of items. The list has four different variants, core, floating, rightSideSquare, leftSideSquare.
- * The last two variants are useful in attachecdInput for example in the PhoneNumberInput and CountryCodeSelect components.
+ * This component is useful to choose an item from a dropdown list of items. The list has two different variants, core, floating and floating.
+ * It also has a sideRadiusVariant that can be used to make the sides square, rightSideSquare, leftSideSquare.
+ * The sideRadiusVariant is useful in attachecdInput for example in the PhoneNumberInput and CountryCodeSelect components.
  *
  * @example
  * ```tsx

package/src/theme/slot-recipes/field.ts

@@ -31,7 +31,7 @@ export const fieldSlotRecipe = defineSlotRecipe({
       textStyle: "xs",
       width: "fit-content",
       position: "absolute",
-      bottom: -5,
+      top: "100%", // position below parent
       left: 3,
       zIndex: "dropdown",
       maxWidth: "50ch",

package/src/theme/slot-recipes/select.ts

@@ -227,6 +227,8 @@ export const selectSlotRecipe = defineSlotRecipe({
           outlineColor: "floating.outline",
         },
       },
+    },
+    sideRadiusVariant: {
       rightSideSquare: {
         control: {
           outline: "1px solid",