mui-image-alter 3.5.0 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -6,7 +6,7 @@
6
6
  </p>
7
7
  <div align="center">
8
8
 
9
- ![GitHub License](https://img.shields.io/github/license/mddanish00/mui-image-alter?style=flat-square) [![npm](https://img.shields.io/npm/v/mui-image-alter?style=flat-square)](https://www.npmjs.com/package/mui-image-alter) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/mui-image-alter%40latest?style=flat-square) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/mddanish00/mui-image-alter/test.yml?style=flat-square) ![Coverage from badge.yml](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/mddanish00/83c2a74197bb80b661019a2747e71daa/raw/mui-image-alter_coverage__main.json) [![Buy Me A Coffee](https://img.shields.io/badge/mddanish00-black?style=flat-square&logo=buymeacoffee&logoColor=black&label=Buy%20Me%20A%20Coffee&labelColor=%23FFDD00)](https://www.buymeacoffee.com/mddanish00) [![Ko-fi](https://img.shields.io/badge/mddanish00-%2372A4F2?style=flat-square&logo=kofi&label=Ko-fi&labelColor=%23F4EFE7)](https://ko-fi.com/mddanish00)
9
+ ![GitHub License](https://img.shields.io/github/license/mddanish00/mui-image-alter?style=flat-square) [![npm](https://img.shields.io/npm/v/mui-image-alter?style=flat-square)](https://www.npmjs.com/package/mui-image-alter) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/mui-image-alter%40latest?style=flat-square) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/mddanish00/mui-image-alter/test.yml?style=flat-square) ![Coverage from badge.yml](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/mddanish00/83c2a74197bb80b661019a2747e71daa/raw/mui-image-alter_coverage__main.json) [![Buy Me A Coffee](https://img.shields.io/badge/mddanish00-black?style=flat-square&logo=buymeacoffee&logoColor=black&label=Buy%20Me%20A%20Coffee&labelColor=%23FFDD00)](https://www.buymeacoffee.com/mddanish00) [![Ko-fi](https://img.shields.io/badge/mddanish00-%2372A4F2?style=flat-square&logo=kofi&label=Ko-fi&labelColor=%23F4EFE7)](https://ko-fi.com/mddanish00)
10
10
 
11
11
  </div>
12
12
  <p align="center">
@@ -37,7 +37,7 @@ If you are satisfied with the original project, you probably not need this. This
37
37
  To put it simply, you only needed this if:
38
38
 
39
39
  - You want to change the component root element, `img` with another component like `Image` from `next/image`.
40
- - You want to use `styled` function from `styled-components` or `emotion` or `MUI` on `Image` component but noticed some styles are not working properly.[^1]
40
+ - You want to use `styled` function from `styled-components` or `emotion` or `MUI` on `Image` component but noticed some styles are not working properly.[^1]
41
41
 
42
42
  [^1]: This happens on the original project because the styles were set using style props. To correct this for the original project, you need to use style or wrapperStyle or iconWrapperStyle that provided to overwrite the default style.
43
43
 
@@ -53,7 +53,7 @@ To put it simply, you only needed this if:
53
53
  - Rewritten fully in Typescript with types built-in based on MUI component types.
54
54
  - Add support to MUI's component prop; That means you can substitute the component root element with `Image` from `next/image` if you want. Components supported are `img`, `img`-derived HTML element and component with `src` prop.
55
55
  - Properly export esm and cjs build via package.json exports.
56
- - (NEW) Support for MUI v6 added.
56
+ - (NEW) Support for MUI v6, v7, v9 added.
57
57
 
58
58
  - Development Changes
59
59
  - Use Vite instead of nwb for development and building the library for fast and better developer experience for me!
@@ -80,7 +80,7 @@ To put it simply, you only needed this if:
80
80
 
81
81
  Install the `mui-image-alter` peer dependencies first. (Can skip if you have already done it.)
82
82
 
83
- If you haven't yet install MUI, please follow the [official guide](https://mui.com/material-ui/getting-started/installation/). Only MUI v5 or v6 are supported.
83
+ If you haven't yet install MUI, please follow the [official guide](https://mui.com/material-ui/getting-started/installation/). Only MUI v5 or v6 are supported.
84
84
 
85
85
  Now, you can install the `mui-image-alter`.
86
86
 
@@ -117,12 +117,12 @@ import { Image } from 'mui-image-alter';
117
117
 
118
118
  // then
119
119
 
120
- <Image src="my-image.png" />
120
+ <Image src="my-image.png" />;
121
121
  ```
122
122
 
123
123
  ### 3. Profit 💰
124
124
 
125
- _Note: Profits not guaranteed and Material UI v5 or v6 is a peer dependency. If you need to support legacy versions of Material UI, use [`material-ui-image`](https://github.com/TeamWertarbyte/material-ui-image) instead. See the [comparison chart](#comparison-with-similar-components) below for more._
125
+ _Note: Profits not guaranteed and Material UI v5, v6, v7 or v9 is a peer dependency. If you need to support legacy versions of Material UI, use [`material-ui-image`](https://github.com/TeamWertarbyte/material-ui-image) instead. See the [comparison chart](#comparison-with-similar-components) below for more._
126
126
 
127
127
  ## Usage Examples
128
128
 
@@ -264,13 +264,13 @@ Like and subscribe below for more. ⏬
264
264
  | -------------------- | ---------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
265
265
  | alt | string | "" | Alternate text for the image, which is displayed if the image fails to load or is not available. This text is also used by screen readers to provide a textual representation of the image for users who are visually impaired. |
266
266
  | bgColor | string | "inherit" | Background color of the image when it first loads. This can be used to create a smooth transition between the loading state and the fully-loaded image. |
267
- | className | string | "" | Class name to be applied to the root element of the Image component. |
267
+ | className | string | "" | Class name to be applied to the root element of the Image component. |
268
268
  | distance | string / number | 100 | Distance (in any valid CSS length units) that the image should shift when it finishes loading. This prop is only used if the shift prop is set. Accept valid CSS [`length`](https://developer.mozilla.org/en-US/docs/Web/CSS/length#units) value. |
269
269
  | duration | number | 3000 | Duration of the transition (in milliseconds) when the image finishes loading. This prop is used to set the transition-duration CSS property on the image. Accept valid CSS [`transition-duration`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration) in milliseconds. |
270
270
  | easing | string | cubic-bezier(0.7, 0, 0.6, 1) | Easing function for the transition when the image finishes loading. This prop is used to set the transition-timing-function CSS property on the image. Accept valid CSS [`transition-timing-function`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) value. |
271
271
  | errorIcon | boolean / node | true | Whether or not to display an error icon when the image fails to load. If set to true, the default error icon will be displayed. If set to false, no error icon will be displayed. If set to a JSX element, the specified element will be displayed as the error icon. |
272
272
  | fit | string | "contain" | How the image should be resized to fit within its container. Accept valid CSS [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#syntax) value. |
273
- | iconWrapperClassName | string | "" | Class name to be applied to the `div` element that wraps the error or loading icon. This can be used to apply custom styles to the icon using CSS. |
273
+ | iconWrapperClassName | string | "" | Class name to be applied to the `div` element that wraps the error or loading icon. This can be used to apply custom styles to the icon using CSS. |
274
274
  | iconWrapperStyle | object | { } | Inline styles to be applied to the `div` element that wraps the error or loading icon. |
275
275
  | position | string | "relative" | Positioning of the image within its container. Accept valid CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) value. |
276
276
  | shift | boolean / string | false | Direction in which the image should shift when it finishes loading. Possible values are "left", "right", "top", "bottom", null, or false. If set to null or false, no shift animation will be applied. |
@@ -278,7 +278,7 @@ Like and subscribe below for more. ⏬
278
278
  | showLoading | boolean / node | false | Whether or not to display a loading indicator while the image is loading. If set to true, the default loading indicator will be displayed. If set to false, no loading indicator will be displayed. If set to a JSX element, the specified element will be displayed as the loading indicator. |
279
279
  | **_src_** \* | string | | Source of the image to be displayed. This value should be a valid URL or file path to the image. |
280
280
  | style | object | | Inline styles to be applied to the root element of the Image component. |
281
- | wrapperClassName | string | "" | Class name to be applied to the root `div` element that wraps the Image component. |
281
+ | wrapperClassName | string | "" | Class name to be applied to the root `div` element that wraps the Image component. |
282
282
  | wrapperStyle | object | | Inline styles to be applied to the root `div` element that wraps the Image component. |
283
283
  | sx | object | | Allows the user to style the Image component using the theme and style props provided by the MUI library. Used in the same way as the sx prop in other MUI components. Check out [MUI official documentation](https://mui.com/system/getting-started/the-sx-prop/) of the `sx` prop. |
284
284
  | component | string / node | | Allows the user to specify a custom element to use as the root element for the Image component. Used in the same way as the component prop in other MUI components. Should only be used with elements that are derived from the `img` element. |
@@ -311,17 +311,17 @@ All the description on this table are generated using ChatGPT and edited by me.
311
311
 
312
312
  ## Comparison with similar components
313
313
 
314
- | Feature | `mui-image` | `mui-image-alter` | `material-ui-image` |
315
- | ----------------------------- | :------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: |
314
+ | Feature | `mui-image` | `mui-image-alter` | `material-ui-image` |
315
+ | ----------------------------- | :------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: |
316
316
  | Size (minzipped) | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/mui-image?color=%2343a047&label=%20&style=flat-square) | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/mui-image-alter?color=%23b71c1c&label=%20&style=flat-square) | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/material-ui-image?color=%23b71c1c&label=%20&style=flat-square) |
317
- | Supports MUI v5/v6 | ✅ | | ❌ |
318
- | Supports MUI component prop | ❌ | | ❌ |
319
- | Built-in Typescript types | ❌ | | ❌ |
320
- | Fade-in | ✅ | | ✅ |
321
- | Progressive level adjustments | ✅ | | ❌ |
322
- | Suggested duration | ✅ | | ✅ |
323
- | Optional shift animation | ✅ | | ❌ |
324
- | Supports legacy MUI versions | ❌ | | ✅ |
317
+ | Supports MUI v5 and above | ✅ | | ❌ |
318
+ | Supports MUI component prop | ❌ | | ❌ |
319
+ | Built-in Typescript types | ❌ | | ❌ |
320
+ | Fade-in | ✅ | | ✅ |
321
+ | Progressive level adjustments | ✅ | | ❌ |
322
+ | Suggested duration | ✅ | | ✅ |
323
+ | Optional shift animation | ✅ | | ❌ |
324
+ | Supports legacy MUI versions | ❌ | | ✅ |
325
325
 
326
326
  ## Like this project?
327
327
 
package/dist/index.cjs CHANGED
@@ -1 +1 @@
1
- "use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);let l=require(`@mui/material/styles`),u=require(`@mui/material/SvgIcon`);u=s(u);let d=require(`@mui/material/CircularProgress`);d=s(d);let f=require(`clsx`);f=s(f);let p=require(`react/jsx-runtime`);var m=({observeRef:e})=>{let[t,n]=c.useState(),[r,i]=c.useState(),a=c.useRef(void 0);return c.useEffect(()=>{a.current=new ResizeObserver(e=>{n(e[0].contentRect.height),i(e[0].contentRect.width)})},[]),c.useEffect(()=>(e&&e.current&&a.current&&a.current.observe(e.current),()=>{e&&e.current&&a.current&&a.current.unobserve(e.current)}),[e]),{ref:e,height:t,width:r}},h=e=>(0,p.jsx)(u.default,{...e,children:(0,p.jsx)(`path`,{d:`M21 5v6.59l-2.29-2.3c-.39-.39-1.03-.39-1.42 0L14 12.59 10.71 9.3a.9959.9959 0 0 0-1.41 0L6 12.59 3 9.58V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l2.29 2.29c.39.39 1.02.39 1.41 0l3.3-3.3 3.29 3.29c.39.39 1.02.39 1.41 0l3.3-3.28z`})}),g=c.forwardRef(({src:e,alt:t=``,position:n=`relative`,fit:r=`cover`,style:i,className:a=``,showLoading:o=!1,errorIcon:s=!0,shift:l=!1,distance:u=100,shiftDuration:g=void 0,bgColor:_=`inherit`,wrapperStyle:x,iconWrapperStyle:S,wrapperClassName:C=``,iconWrapperClassName:w=``,duration:T=3e3,easing:E=`cubic-bezier(0.7, 0, 0.6, 1)`,onLoad:D,onError:O,sx:k,component:A=`img`,...j},M)=>{let[N,P]=c.useState(!1),[F,I]=c.useState(!1),{ref:L,width:R,height:z}=m({observeRef:M}),B=j.height?j.height:`100%`,V=j.width?j.width:`100%`,H=c.useCallback(()=>{P(!0),I(!1),D&&D()},[D]),U=c.useCallback(()=>{I(!0),P(!1),O&&O()},[O]),W=l!==void 0&&l!==!1&&l!==null?{[l]:N?0:u}:{},G=typeof s!=`boolean`&&s||(0,p.jsx)(h,{sx:{fontSize:56,color:`#bdbdbd`}}),K=typeof o!=`boolean`&&o||(0,p.jsx)(d.default,{size:56,thickness:6});return(0,p.jsxs)(y,{className:(0,f.default)(`MuiImageAlter-wrapper`,C),sx:k,style:x,bgColor:_,rootHeight:z||B,rootWidth:R||V,children:[(0,p.jsx)(v,{ref:L,as:A,src:e,alt:t,style:i,className:(0,f.default)(`MuiImageAlter-img`,a),onLoad:H,onError:U,position:n,fit:r,shift:l,shiftDuration:g,shiftStyles:W,duration:T,easing:E,loaded:N,...j}),(!!o||!!s)&&(0,p.jsxs)(b,{className:(0,f.default)(`MuiImageAlter-iconWrapper`,w),style:S,loaded:N,children:[!!s&&F&&G,!!o&&!F&&!N&&K]})]})}),_=(e,t)=>!t.includes(e),v=c.memo((0,l.styled)(`img`,{shouldForwardProp:e=>_(e.toString(),[`position`,`fit`,`shift`,`shiftDuration`,`shiftStyles`,`duration`,`easing`,`loaded`,`sx`,`as`])})(e=>({"@keyframes materialize":{"0%":{filter:`saturate(20%) contrast(50%) brightness(120%)`},"75%":{filter:`saturate(60%) contrast(100%) brightness(100%)`},"100%":{filter:`saturate(100%) contrast(100%) brightness(100%)`}},position:e.position,objectFit:e.fit,transitionProperty:`${e.shift?`${e.shift}, `:``}opacity`,transitionDuration:`${e.shift?`${e.shiftDuration||e.duration*.3}ms, `:``}${e.duration/2}ms`,transitionTimingFunction:e.easing,opacity:e.loaded?1:0,animation:e.loaded?`materialize ${e.duration}ms 1 ${e.easing}`:``,...!!e.shift&&e.shiftStyles}))),y=c.memo((0,l.styled)(`div`,{shouldForwardProp:e=>_(e.toString(),[`bgColor`,`sx`,`rootHeight`,`rootWidth`])})(e=>({display:`flex`,justifyContent:`center`,alignItems:`center`,backgroundColor:e.bgColor,height:`${e.rootHeight}px`,width:`${e.rootWidth}px`}))),b=c.memo((0,l.styled)(`div`,{shouldForwardProp:e=>e!==`loaded`})(e=>({width:`100%`,marginLeft:`-100%`,display:`flex`,justifyContent:`center`,alignItems:`center`,opacity:e.loaded?0:1})));exports.Image=g;
1
+ "use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c,1);let l=require(`@mui/material/styles`),u=require(`@mui/material/SvgIcon`);u=s(u,1);let d=require(`@mui/material/CircularProgress`);d=s(d,1);let f=require(`clsx`);f=s(f,1);let p=require(`react/jsx-runtime`);var m=({observeRef:e})=>{let[t,n]=c.useState(),[r,i]=c.useState(),a=c.useRef(void 0);return c.useEffect(()=>{a.current=new ResizeObserver(e=>{n(e[0].contentRect.height),i(e[0].contentRect.width)})},[]),c.useEffect(()=>(e&&e.current&&a.current&&a.current.observe(e.current),()=>{e&&e.current&&a.current&&a.current.unobserve(e.current)}),[e]),{ref:e,height:t,width:r}},h=e=>(0,p.jsx)(u.default,{...e,children:(0,p.jsx)(`path`,{d:`M21 5v6.59l-2.29-2.3c-.39-.39-1.03-.39-1.42 0L14 12.59 10.71 9.3a.9959.9959 0 0 0-1.41 0L6 12.59 3 9.58V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l2.29 2.29c.39.39 1.02.39 1.41 0l3.3-3.3 3.29 3.29c.39.39 1.02.39 1.41 0l3.3-3.28z`})}),g=c.forwardRef(({src:e,alt:t=``,position:n=`relative`,fit:r=`cover`,style:i,className:a=``,showLoading:o=!1,errorIcon:s=!0,shift:l=!1,distance:u=100,shiftDuration:g=void 0,bgColor:_=`inherit`,wrapperStyle:x,iconWrapperStyle:S,wrapperClassName:C=``,iconWrapperClassName:w=``,duration:T=3e3,easing:E=`cubic-bezier(0.7, 0, 0.6, 1)`,onLoad:D,onError:O,sx:k,component:A=`img`,...j},M)=>{let[N,P]=c.useState(!1),[F,I]=c.useState(!1),{ref:L,width:R,height:z}=m({observeRef:M}),B=j.height?j.height:`100%`,V=j.width?j.width:`100%`,H=c.useCallback(()=>{P(!0),I(!1),D&&D()},[D]),U=c.useCallback(()=>{I(!0),P(!1),O&&O()},[O]),W=l!==void 0&&l!==!1&&l!==null?{[l]:N?0:u}:{},G=typeof s!=`boolean`&&s||(0,p.jsx)(h,{sx:{fontSize:56,color:`#bdbdbd`}}),K=typeof o!=`boolean`&&o||(0,p.jsx)(d.default,{size:56,thickness:6});return(0,p.jsxs)(y,{className:(0,f.default)(`MuiImageAlter-wrapper`,C),sx:k,style:x,bgColor:_,rootHeight:z||B,rootWidth:R||V,children:[(0,p.jsx)(v,{ref:L,as:A,src:e,alt:t,style:i,className:(0,f.default)(`MuiImageAlter-img`,a),onLoad:H,onError:U,position:n,fit:r,shift:l,shiftDuration:g,shiftStyles:W,duration:T,easing:E,loaded:N,...j}),(!!o||!!s)&&(0,p.jsxs)(b,{className:(0,f.default)(`MuiImageAlter-iconWrapper`,w),style:S,loaded:N,children:[!!s&&F&&G,!!o&&!F&&!N&&K]})]})}),_=(e,t)=>!t.includes(e),v=c.memo((0,l.styled)(`img`,{shouldForwardProp:e=>_(e.toString(),[`position`,`fit`,`shift`,`shiftDuration`,`shiftStyles`,`duration`,`easing`,`loaded`,`sx`,`as`])})(e=>({"@keyframes materialize":{"0%":{filter:`saturate(20%) contrast(50%) brightness(120%)`},"75%":{filter:`saturate(60%) contrast(100%) brightness(100%)`},"100%":{filter:`saturate(100%) contrast(100%) brightness(100%)`}},position:e.position,objectFit:e.fit,transitionProperty:`${e.shift?`${e.shift}, `:``}opacity`,transitionDuration:`${e.shift?`${e.shiftDuration||e.duration*.3}ms, `:``}${e.duration/2}ms`,transitionTimingFunction:e.easing,opacity:+!!e.loaded,animation:e.loaded?`materialize ${e.duration}ms 1 ${e.easing}`:``,...!!e.shift&&e.shiftStyles}))),y=c.memo((0,l.styled)(`div`,{shouldForwardProp:e=>_(e.toString(),[`bgColor`,`sx`,`rootHeight`,`rootWidth`])})(e=>({display:`flex`,justifyContent:`center`,alignItems:`center`,backgroundColor:e.bgColor,height:`${e.rootHeight}px`,width:`${e.rootWidth}px`}))),b=c.memo((0,l.styled)(`div`,{shouldForwardProp:e=>e!==`loaded`})(e=>({width:`100%`,marginLeft:`-100%`,display:`flex`,justifyContent:`center`,alignItems:`center`,opacity:+!e.loaded})));exports.Image=g;
package/dist/index.js CHANGED
@@ -88,7 +88,7 @@ var s = ({ observeRef: t }) => {
88
88
  transitionProperty: `${e.shift ? `${e.shift}, ` : ""}opacity`,
89
89
  transitionDuration: `${e.shift ? `${e.shiftDuration || e.duration * .3}ms, ` : ""}${e.duration / 2}ms`,
90
90
  transitionTimingFunction: e.easing,
91
- opacity: e.loaded ? 1 : 0,
91
+ opacity: +!!e.loaded,
92
92
  animation: e.loaded ? `materialize ${e.duration}ms 1 ${e.easing}` : "",
93
93
  ...!!e.shift && e.shiftStyles
94
94
  }))), f = e.memo(t("div", { shouldForwardProp: (e) => u(e.toString(), [
@@ -109,7 +109,7 @@ var s = ({ observeRef: t }) => {
109
109
  display: "flex",
110
110
  justifyContent: "center",
111
111
  alignItems: "center",
112
- opacity: e.loaded ? 0 : 1
112
+ opacity: +!e.loaded
113
113
  })));
114
114
  //#endregion
115
115
  export { l as Image };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mui-image-alter",
3
- "version": "3.5.0",
3
+ "version": "3.6.0",
4
4
  "description": "Fork of mui-image. Display images as per the Material guidelines using Material-UI v5 and above. With component prop support.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -38,7 +38,7 @@
38
38
  "clsx": "^2.1.1"
39
39
  },
40
40
  "peerDependencies": {
41
- "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0 ",
41
+ "@mui/material": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^9.0.0 ",
42
42
  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
43
43
  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
44
44
  },
@@ -47,27 +47,27 @@
47
47
  "@emotion/styled": "^11.14.1",
48
48
  "@fontsource/fira-code": "^5.2.7",
49
49
  "@juggle/resize-observer": "^3.4.0",
50
- "@microsoft/api-extractor": "^7.57.7",
51
- "@mui/material": "^7.3.9",
52
- "@size-limit/preset-small-lib": "^12.0.1",
50
+ "@microsoft/api-extractor": "^7.58.2",
51
+ "@mui/material": "^9.0.0",
52
+ "@size-limit/preset-small-lib": "^12.1.0",
53
53
  "@testing-library/jest-dom": "^6.9.1",
54
54
  "@testing-library/react": "^16.3.2",
55
- "@types/node": "^24.12.0",
55
+ "@types/node": "^24.12.2",
56
56
  "@types/react": "^19.2.14",
57
57
  "@types/react-dom": "^19.2.3",
58
58
  "@vitejs/plugin-react": "^6.0.1",
59
- "@vitest/coverage-v8": "^4.1.0",
60
- "jsdom": "^29.0.0",
61
- "prettier": "^3.8.1",
62
- "react": "^19.2.4",
63
- "react-dom": "^19.2.4",
59
+ "@vitest/coverage-v8": "^4.1.4",
60
+ "jsdom": "^29.0.2",
61
+ "prettier": "^3.8.2",
62
+ "react": "^19.2.5",
63
+ "react-dom": "^19.2.5",
64
64
  "rimraf": "^6.1.3",
65
- "size-limit": "^12.0.1",
65
+ "size-limit": "^12.1.0",
66
66
  "typeit-react": "^2.7.8",
67
- "typescript": "^5.9.3",
67
+ "typescript": "^6.0.2",
68
68
  "unplugin-dts": "^1.0.0-beta.6",
69
- "vite": "^8.0.1",
70
- "vitest": "^4.1.0"
69
+ "vite": "^8.0.8",
70
+ "vitest": "^4.1.4"
71
71
  },
72
72
  "size-limit": [
73
73
  {