@vygruppen/spor-react 12.12.1 → 12.13.1

package/package.json

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

package/src/input/CountryCodeSelect.tsx

@@ -58,7 +58,7 @@ export const CountryCodeSelect = forwardRef<
       sideRadiusVariant={"rightSideSquare"}
     >
       {callingCodes.items.map((code) => (
-        <SelectItem as={"option"} key={code.label} item={code}>
+        <SelectItem key={code.label} item={code}>
           {code.label}
         </SelectItem>
       ))}

package/src/input/NumericStepper.tsx

@@ -35,8 +35,6 @@ export type NumericStepperProps = FieldBaseProps &
     withInput?: boolean;
     /** The amount to increase/decrease when pressing +/- */
     stepSize?: number;
-    /** Whether to show the number input when value is zero  */
-    showZero?: boolean;
     /** Name added to the aria-label of subtract and add buttons. */
     ariaLabelContext?: { singular: string; plural: string };
   } & Omit<BoxProps, "onChange">;
@@ -80,7 +78,6 @@ export const NumericStepper = React.forwardRef<
     disabled,
     withInput = true,
     stepSize = 1,
-    showZero = false,
     ariaLabelContext = { singular: "", plural: "" },
     ...rest
   } = props;
@@ -118,8 +115,7 @@ export const NumericStepper = React.forwardRef<
             focusOnAddButton();
           }
         }}
-        visibility={value <= minValue ? "hidden" : "visible"}
-        disabled={disabled}
+        disabled={disabled || value <= minValue}
         id={value <= minValue ? undefined : idProp}
       />
       {withInput ? (
@@ -129,10 +125,9 @@ export const NumericStepper = React.forwardRef<
           name={nameProp}
           value={value}
           disabled={disabled}
-          id={!showZero && value === 0 ? undefined : idProp}
+          id={value === 0 ? undefined : idProp}
           css={styles.input}
           width={`${Math.max(value.toString().length + 1, 3)}ch`}
-          visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-live="assertive"
           aria-label={
             ariaLabelContext.plural === ""
@@ -145,17 +140,13 @@ export const NumericStepper = React.forwardRef<
               return;
             }
             onChange(Math.max(Math.min(numericInput, maxValue), minValue));
-            if (
-              !showZero &&
-              Math.max(Math.min(numericInput, maxValue), minValue) === 0
-            ) {
+            if (Math.max(Math.min(numericInput, maxValue), minValue) === 0) {
               focusOnAddButton();
             }
           }}
         />
       ) : (
         <Text
-          visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-live="assertive"
           paddingX="0.95rem"
           aria-label={
@@ -179,8 +170,7 @@ export const NumericStepper = React.forwardRef<
           ),
         )}
         onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
-        visibility={value >= maxValue ? "hidden" : "visible"}
-        disabled={disabled}
+        disabled={disabled || value >= maxValue}
         id={value >= maxValue ? undefined : idProp}
       />
     </Field>

package/src/input/Popover.tsx

@@ -7,6 +7,7 @@ import {
   Overlay,
   usePopover,
 } from "react-aria";
+import ReactDOM from "react-dom";
 import { OverlayTriggerState } from "react-stately";
 
 type PopoverProps = {
@@ -54,7 +55,7 @@ type PopoverProps = {
 /**
  * Internal popover component.
  *
- * 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.
+ * Used to render accessible popover content, only used in ComboBox.
  */
 export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   (
@@ -95,6 +96,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         {...popoverProps}
         ref={popoverRef}
         minWidth={triggerRef.current?.clientWidth ?? "auto"}
+        position="absolute"
+        zIndex={1400}
       >
         <DismissButton onDismiss={state.close} />
         {children}
@@ -103,6 +106,10 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     );
 
     if (isNonModal) {
+      // Render in a portal to ensure it does not take up semantic space
+      if (globalThis.window !== undefined && typeof document !== "undefined") {
+        return ReactDOM.createPortal(popoverBox, document.body);
+      }
       return popoverBox;
     }
     return (

package/src/theme/recipes/button.ts

@@ -77,6 +77,7 @@ export const buttonRecipe = defineRecipe({
       },
       floating: {
         color: "floating.text",
+        background: "floating.surface",
         border: "sm",
         borderColor: "floating.outline",
         boxShadow: