@availity/mui-spaces 0.4.0 → 0.5.1

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.5.1](https://github.com/Availity/element/compare/@availity/mui-spaces@0.5.0...@availity/mui-spaces@0.5.1) (2024-11-20)
+
+### Dependency Updates
+
+* `mui-list` updated to version `0.5.0`
+## [0.5.0](https://github.com/Availity/element/compare/@availity/mui-spaces@0.4.0...@availity/mui-spaces@0.5.0) (2024-11-06)
+
+
+### Features
+
+* **mui-spaces:** allow custom Loaders in SpacesImage ([7a585c9](https://github.com/Availity/element/commit/7a585c9aeb1255abf56b87692f8c134820a20e60))
+
 ## [0.4.0](https://github.com/Availity/element/compare/@availity/mui-spaces@0.3.25...@availity/mui-spaces@0.4.0) (2024-10-31)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -240,6 +240,9 @@ type BaseSpacesImageProps = {
     imageType?: 'url' | 'images.logo' | 'images.tile' | 'images.billboard' | 'images.promotional' | 'images.promotionalHover';
     fallback?: string;
     id?: string;
+    Loader?: ({ id }: {
+        id: string;
+    }) => JSX.Element;
 };
 type SpacesImageSpaceId = {
     spaceId: string;
@@ -250,6 +253,6 @@ type SpacesImagePayerId = {
     payerId: string;
 } & BaseSpacesImageProps;
 type SpacesImageProps = SpacesImageSpaceId | SpacesImagePayerId;
-declare const SpacesImage: ({ spaceId, payerId, imageType, fallback, ...props }: SpacesImageProps) => react_jsx_runtime.JSX.Element | null;
+declare const SpacesImage: ({ spaceId, payerId, imageType, fallback, Loader, ...props }: SpacesImageProps) => react_jsx_runtime.JSX.Element | null;
 
 export { INITIAL_STATE, type Space, Spaces, SpacesAgreement, type SpacesAgreementProps, SpacesContext, SpacesDisclaimer, type SpacesDisclaimerProps, SpacesGhostText, type SpacesGhostTextProps, SpacesImage, type SpacesImageProps, SpacesLink, useSpaces, useSpacesContext };

package/dist/index.d.ts

@@ -240,6 +240,9 @@ type BaseSpacesImageProps = {
     imageType?: 'url' | 'images.logo' | 'images.tile' | 'images.billboard' | 'images.promotional' | 'images.promotionalHover';
     fallback?: string;
     id?: string;
+    Loader?: ({ id }: {
+        id: string;
+    }) => JSX.Element;
 };
 type SpacesImageSpaceId = {
     spaceId: string;
@@ -250,6 +253,6 @@ type SpacesImagePayerId = {
     payerId: string;
 } & BaseSpacesImageProps;
 type SpacesImageProps = SpacesImageSpaceId | SpacesImagePayerId;
-declare const SpacesImage: ({ spaceId, payerId, imageType, fallback, ...props }: SpacesImageProps) => react_jsx_runtime.JSX.Element | null;
+declare const SpacesImage: ({ spaceId, payerId, imageType, fallback, Loader, ...props }: SpacesImageProps) => react_jsx_runtime.JSX.Element | null;
 
 export { INITIAL_STATE, type Space, Spaces, SpacesAgreement, type SpacesAgreementProps, SpacesContext, SpacesDisclaimer, type SpacesDisclaimerProps, SpacesGhostText, type SpacesGhostTextProps, SpacesImage, type SpacesImageProps, SpacesLink, useSpaces, useSpacesContext };

package/dist/index.js

@@ -386,7 +386,19 @@ var import_mui_progress2 = require("@availity/mui-progress");
 var import_react_image = require("react-image");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var SpacesImage = (_a) => {
-  var _b = _a, { spaceId, payerId, imageType = "url", fallback } = _b, props = __objRest(_b, ["spaceId", "payerId", "imageType", "fallback"]);
+  var _b = _a, {
+    spaceId,
+    payerId,
+    imageType = "url",
+    fallback,
+    Loader = import_mui_progress2.CircularProgress
+  } = _b, props = __objRest(_b, [
+    "spaceId",
+    "payerId",
+    "imageType",
+    "fallback",
+    "Loader"
+  ]);
   var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   let spaces;
   if (spaceId) {
@@ -406,7 +418,7 @@ var SpacesImage = (_a) => {
   };
   let url = imageMap[imageType];
   if (!url && loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_progress2.CircularProgress, { id: `app-${id}-loading` });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loader, { id: `app-${id}-loading` });
   }
   if (!url && !loading && fallback) {
     url = fallback;
@@ -419,7 +431,7 @@ var SpacesImage = (_a) => {
       id: props.id || `app-img-${id}`,
       src: url,
       alt: `Space ${imageType}`,
-      loader: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_mui_progress2.CircularProgress, { id: `app-img-${id}-loading` })
+      loader: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Loader, { id: `app-img-${id}-loading` })
     }, props)
   );
 };

package/dist/index.mjs

@@ -344,7 +344,19 @@ import { CircularProgress as CircularProgress2 } from "@availity/mui-progress";
 import { Img } from "react-image";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var SpacesImage = (_a) => {
-  var _b = _a, { spaceId, payerId, imageType = "url", fallback } = _b, props = __objRest(_b, ["spaceId", "payerId", "imageType", "fallback"]);
+  var _b = _a, {
+    spaceId,
+    payerId,
+    imageType = "url",
+    fallback,
+    Loader = CircularProgress2
+  } = _b, props = __objRest(_b, [
+    "spaceId",
+    "payerId",
+    "imageType",
+    "fallback",
+    "Loader"
+  ]);
   var _a2, _b2, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   let spaces;
   if (spaceId) {
@@ -364,7 +376,7 @@ var SpacesImage = (_a) => {
   };
   let url = imageMap[imageType];
   if (!url && loading) {
-    return /* @__PURE__ */ jsx2(CircularProgress2, { id: `app-${id}-loading` });
+    return /* @__PURE__ */ jsx2(Loader, { id: `app-${id}-loading` });
   }
   if (!url && !loading && fallback) {
     url = fallback;
@@ -377,7 +389,7 @@ var SpacesImage = (_a) => {
       id: props.id || `app-img-${id}`,
       src: url,
       alt: `Space ${imageType}`,
-      loader: /* @__PURE__ */ jsx2(CircularProgress2, { id: `app-img-${id}-loading` })
+      loader: /* @__PURE__ */ jsx2(Loader, { id: `app-img-${id}-loading` })
     }, props)
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-spaces",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Availity MUI Spaces Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,7 +40,7 @@
     "@availity/mui-favorites": "^0.2.0",
     "@availity/mui-icon": "^0.11.0",
     "@availity/mui-layout": "^0.2.0",
-    "@availity/mui-list": "^0.2.0",
+    "@availity/mui-list": "^0.2.1",
     "@availity/mui-modal": "^0.1.8",
     "@availity/mui-paper": "^0.1.9",
     "@availity/mui-progress": "^0.4.0",
@@ -60,7 +60,7 @@
     "@availity/mui-favorites": "^0.2.0",
     "@availity/mui-icon": "^0.11.0",
     "@availity/mui-layout": "^0.2.0",
-    "@availity/mui-list": "^0.2.0",
+    "@availity/mui-list": "^0.2.1",
     "@availity/mui-modal": "^0.1.8",
     "@availity/mui-progress": "^0.4.0",
     "@availity/mui-typography": "^0.2.1",

package/src/lib/SpacesImage.tsx

@@ -12,6 +12,7 @@ type BaseSpacesImageProps = {
     | 'images.promotionalHover';
   fallback?: string;
   id?: string;
+  Loader?: ({ id }: { id: string }) => JSX.Element;
 };
 
 type SpacesImageSpaceId = {
@@ -26,7 +27,14 @@ type SpacesImagePayerId = {
 
 export type SpacesImageProps = SpacesImageSpaceId | SpacesImagePayerId;
 
-export const SpacesImage = ({ spaceId, payerId, imageType = 'url', fallback, ...props }: SpacesImageProps) => {
+export const SpacesImage = ({
+  spaceId,
+  payerId,
+  imageType = 'url',
+  fallback,
+  Loader = CircularProgress,
+  ...props
+}: SpacesImageProps) => {
   let spaces;
 
   if (spaceId) {
@@ -51,7 +59,7 @@ export const SpacesImage = ({ spaceId, payerId, imageType = 'url', fallback, ...
   let url = imageMap[imageType];
 
   if (!url && loading) {
-    return <CircularProgress id={`app-${id}-loading`} />;
+    return <Loader id={`app-${id}-loading`} />;
   }
 
   if (!url && !loading && fallback) {
@@ -65,7 +73,7 @@ export const SpacesImage = ({ spaceId, payerId, imageType = 'url', fallback, ...
       id={props.id || `app-img-${id}`}
       src={url}
       alt={`Space ${imageType}`}
-      loader={<CircularProgress id={`app-img-${id}-loading`} />}
+      loader={<Loader id={`app-img-${id}-loading`} />}
       {...props}
     />
   );