@vygruppen/spor-react 12.7.1 → 12.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.7.1",
+  "version": "12.8.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -67,8 +67,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "1.1.1",
-    "@vygruppen/tsconfig": "0.1.1"
+    "@vygruppen/tsconfig": "0.1.1",
+    "@vygruppen/eslint-config": "1.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

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

@@ -68,7 +68,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/select.ts

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