@coopdigital/react 1.32.0 → 1.32.2

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -4,14 +4,17 @@ import { jsx } from "react/jsx-runtime";
 // src/components/LoadingSpinner/LoadingSpinner.tsx
 const LoadingSpinner = ({ className, ref, stroke = "currentColor", strokeWidth = "1px", ...props }) => {
 	const componentProps = {
-		className: clsx("coop-loading-spinner", className),
+		className: clsx(className),
 		stroke,
 		strokeWidth,
 		...props
 	};
-	return /* @__PURE__ */ jsx(LoadingIcon, {
-		...componentProps,
-		ref
+	return /* @__PURE__ */ jsx("span", {
+		className: "coop-loading-spinner",
+		children: /* @__PURE__ */ jsx(LoadingIcon, {
+			...componentProps,
+			ref
+		})
 	});
 };
 export { LoadingSpinner, LoadingSpinner as default };

package/dist/components/Popover/Popover.js

@@ -1,4 +1,3 @@
-import { bgClassToColor, hasUserBg } from "../../utils/classes.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -22,17 +21,13 @@ const PopoverContent = ({ align = "center", alignOffset = 0, asChild = false, av
 		alignOffset,
 		asChild,
 		avoidCollisions,
-		className: clsx("coop-popover", !hasUserBg(className) && "bg-tint-grey", className),
+		className: clsx("coop-popover", className),
 		collisionPadding,
 		side,
 		sideOffset,
 		style,
 		...props
 	};
-	componentProps.style = {
-		...style,
-		"--popover-bg": `var(--color-${bgClassToColor(componentProps.className)})`
-	};
 	return /* @__PURE__ */ jsxs(RadixPopover.Content, {
 		ref,
 		...componentProps,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.32.0",
+  "version": "1.32.2",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -117,7 +117,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.23.0",
+    "@coopdigital/styles": "^1.23.2",
     "@radix-ui/react-popover": "^1.3.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
@@ -126,5 +126,5 @@
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.2"
   },
-  "gitHead": "c826b0325c655154524a6627eb705bce9f84abae"
+  "gitHead": "cc124979d05d9b0bbeeade64e7a9b45adfa13ddb"
 }

package/src/components/Expandable/Expandable.tsx

@@ -44,10 +44,6 @@ const Expandable = ({ children, className, ref, ...props }: ExpandableProps): JS
     ...props,
   }
 
-  // componentProps.style = {
-  //   "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
-  // }
-
   return (
     <details {...componentProps} ref={ref}>
       {slots.ExpandableSummary}

package/src/components/LoadingSpinner/LoadingSpinner.tsx

@@ -19,13 +19,18 @@ export const LoadingSpinner = ({
   ...props
 }: LoadingSpinnerProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-loading-spinner", className),
+    className: clsx(className),
     stroke,
     strokeWidth,
     ...props,
   }
 
-  return <LoadingIcon {...componentProps} ref={ref} />
+  // The wrapper rotates, not the SVG: a rotating SVG makes Chromium flash other transitions on the page
+  return (
+    <span className="coop-loading-spinner">
+      <LoadingIcon {...componentProps} ref={ref} />
+    </span>
+  )
 }
 
 export default LoadingSpinner

package/src/components/Popover/Popover.tsx

@@ -11,7 +11,6 @@ import * as RadixPopover from "@radix-ui/react-popover"
 import clsx from "clsx"
 
 import { useSlots } from "@/hooks/useSlots"
-import { bgClassToColor, hasUserBg } from "@/utils"
 
 export interface PopoverProps extends RadixPopoverProps {
   /** Content inside the component.
@@ -109,7 +108,7 @@ const PopoverContent = ({
     alignOffset,
     asChild,
     avoidCollisions,
-    className: clsx("coop-popover", !hasUserBg(className) && "bg-tint-grey", className),
+    className: clsx("coop-popover", className),
     collisionPadding,
     side,
     sideOffset,
@@ -117,11 +116,6 @@ const PopoverContent = ({
     ...props,
   }
 
-  componentProps.style = {
-    ...style,
-    "--popover-bg": `var(--color-${bgClassToColor(componentProps.className)})`,
-  }
-
   return (
     <RadixPopover.Content ref={ref} {...componentProps}>
       {children}