@availity/mui-button 1.1.4 → 2.0.0

package/CHANGELOG.md

@@ -2,6 +2,29 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.0.0](https://github.com/Availity/element/compare/@availity/mui-button@1.1.5...@availity/mui-button@2.0.0) (2025-11-17)
+
+### Dependency Updates
+
+* `mui-layout` updated to version `1.1.5`
+* `mui-icon` updated to version `1.1.5`
+
+### ⚠ BREAKING CHANGES
+
+* @mui/material upgraded to v7
+* @mui/x-* upgraded to v8
+* react upgraded to v19
+
+### Features
+
+* upgrade material and react dependencies ([51602a4](https://github.com/Availity/element/commit/51602a48c5304db6f61e2c7e772c9a3a4aa3f65c))
+
+## [1.1.5](https://github.com/Availity/element/compare/@availity/mui-button@1.1.4...@availity/mui-button@1.1.5) (2025-10-30)
+
+### Dependency Updates
+
+* `mui-layout` updated to version `1.1.4`
+* `mui-icon` updated to version `1.1.4`
 ## [1.1.4](https://github.com/Availity/element/compare/@availity/mui-button@1.1.3...@availity/mui-button@1.1.4) (2025-04-30)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -3,7 +3,6 @@ import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ButtonGroupProps as ButtonGroupProps$1 } from '@mui/material/ButtonGroup';
 import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
-import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab/LoadingButton';
 
 declare module '@mui/material/Button' {
     interface ButtonPropsColorOverrides {
@@ -17,7 +16,7 @@ type ButtonProps = {
     /** The size of the component.
      * @default large */
     size?: 'small' | 'medium' | 'large';
-} & Omit<ButtonProps$1, 'color' | 'component' | 'variant' | 'disableElevation' | 'disableFocusRipple' | 'disableTouchRipple' | 'centerRipple' | 'disableRipple' | 'focusRipple' | 'size' | 'TouchRippleProps' | 'touchRippleRef'>;
+} & Omit<ButtonProps$1, 'color' | 'component' | 'variant' | 'disableElevation' | 'disableFocusRipple' | 'disableTouchRipple' | 'centerRipple' | 'disableRipple' | 'focusRipple' | 'loading' | 'loadingIndicator' | 'loadingPosition' | 'size' | 'TouchRippleProps' | 'touchRippleRef'>;
 declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 declare module '@mui/material/ButtonGroup' {
@@ -47,13 +46,7 @@ type IconButtonProps = {
 } & Omit<IconButtonProps$1, 'aria-label' | 'color' | 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'disableFocusRipple' | 'TouchRippleProps' | 'touchRippleRef'>;
 declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
-type LoadingButtonProps = {
-    children: React.ReactNode;
-    /**
-     * The color of the component.
-     */
-    color?: 'primary' | 'secondary' | 'error';
-} & Omit<LoadingButtonProps$1, 'color' | 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'disableFocusRipple' | 'TouchRippleProps' | 'touchRippleRef' | 'loadingIndicator' | 'loadingPosition'>;
+type LoadingButtonProps = ButtonProps & Pick<ButtonProps$1, 'loading'>;
 declare const LoadingButton: react.ForwardRefExoticComponent<Omit<LoadingButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, type IconButtonProps, LoadingButton, type LoadingButtonProps };

package/dist/index.d.ts

@@ -3,7 +3,6 @@ import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ButtonGroupProps as ButtonGroupProps$1 } from '@mui/material/ButtonGroup';
 import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
-import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab/LoadingButton';
 
 declare module '@mui/material/Button' {
     interface ButtonPropsColorOverrides {
@@ -17,7 +16,7 @@ type ButtonProps = {
     /** The size of the component.
      * @default large */
     size?: 'small' | 'medium' | 'large';
-} & Omit<ButtonProps$1, 'color' | 'component' | 'variant' | 'disableElevation' | 'disableFocusRipple' | 'disableTouchRipple' | 'centerRipple' | 'disableRipple' | 'focusRipple' | 'size' | 'TouchRippleProps' | 'touchRippleRef'>;
+} & Omit<ButtonProps$1, 'color' | 'component' | 'variant' | 'disableElevation' | 'disableFocusRipple' | 'disableTouchRipple' | 'centerRipple' | 'disableRipple' | 'focusRipple' | 'loading' | 'loadingIndicator' | 'loadingPosition' | 'size' | 'TouchRippleProps' | 'touchRippleRef'>;
 declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 declare module '@mui/material/ButtonGroup' {
@@ -47,13 +46,7 @@ type IconButtonProps = {
 } & Omit<IconButtonProps$1, 'aria-label' | 'color' | 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'disableFocusRipple' | 'TouchRippleProps' | 'touchRippleRef'>;
 declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
-type LoadingButtonProps = {
-    children: React.ReactNode;
-    /**
-     * The color of the component.
-     */
-    color?: 'primary' | 'secondary' | 'error';
-} & Omit<LoadingButtonProps$1, 'color' | 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'disableFocusRipple' | 'TouchRippleProps' | 'touchRippleRef' | 'loadingIndicator' | 'loadingPosition'>;
+type LoadingButtonProps = ButtonProps & Pick<ButtonProps$1, 'loading'>;
 declare const LoadingButton: react.ForwardRefExoticComponent<Omit<LoadingButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, type IconButtonProps, LoadingButton, type LoadingButtonProps };

package/dist/index.js

@@ -108,17 +108,17 @@ var IconButton = (0, import_react2.forwardRef)((props, ref) => {
 
 // src/lib/LoadingButton.tsx
 var import_react3 = require("react");
-var import_LoadingButton = __toESM(require("@mui/lab/LoadingButton"));
+var import_Button2 = __toESM(require("@mui/material/Button"));
 var import_CircularProgress = __toESM(require("@mui/material/CircularProgress"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var LoadingIndicator = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_CircularProgress.default, { color: "inherit", size: 16, "aria-label": "loading" });
 var LoadingButton = (0, import_react3.forwardRef)((props, ref) => {
-  const _a = props, { children, loading } = _a, rest = __objRest(_a, ["children", "loading"]);
+  const _a = props, { children, loading = false } = _a, rest = __objRest(_a, ["children", "loading"]);
   const loadingPosition = rest.startIcon ? "start" : "end";
   const nonLoadingStyling = rest.startIcon || rest.endIcon || loading ? {} : { padding: "0 .7rem" };
   const endIcon = rest.startIcon ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: loading ? { padding: "0 .7rem" } : {} });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_LoadingButton.default,
+    import_Button2.default,
     __spreadProps(__spreadValues({
       endIcon,
       loadingPosition,

package/dist/index.mjs

@@ -72,17 +72,17 @@ var IconButton = forwardRef2((props, ref) => {
 
 // src/lib/LoadingButton.tsx
 import { forwardRef as forwardRef3 } from "react";
-import MUILoadingButton from "@mui/lab/LoadingButton";
+import MUIButton2 from "@mui/material/Button";
 import CircularProgress from "@mui/material/CircularProgress";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var LoadingIndicator = /* @__PURE__ */ jsx4(CircularProgress, { color: "inherit", size: 16, "aria-label": "loading" });
 var LoadingButton = forwardRef3((props, ref) => {
-  const _a = props, { children, loading } = _a, rest = __objRest(_a, ["children", "loading"]);
+  const _a = props, { children, loading = false } = _a, rest = __objRest(_a, ["children", "loading"]);
   const loadingPosition = rest.startIcon ? "start" : "end";
   const nonLoadingStyling = rest.startIcon || rest.endIcon || loading ? {} : { padding: "0 .7rem" };
   const endIcon = rest.startIcon ? void 0 : /* @__PURE__ */ jsx4("span", { style: loading ? { padding: "0 .7rem" } : {} });
   return /* @__PURE__ */ jsx4(
-    MUILoadingButton,
+    MUIButton2,
     __spreadProps(__spreadValues({
       endIcon,
       loadingPosition,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-button",
-  "version": "1.1.4",
+  "version": "2.0.0",
   "description": "Availity MUI Button Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,21 +40,19 @@
     "publish": "yarn npm publish --tolerate-republish --access public",
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
-  "dependencies": {
-    "@mui/lab": "6.0.0-beta.12"
-  },
   "devDependencies": {
-    "@mui/material": "^6.4.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "@mui/material": "^7.3.4",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "tsup": "^8.4.0",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@mui/material": "^6.4.5",
-    "react": ">=16.3.0"
+    "@mui/material": "^7.0.0",
+    "react": ">=17.0.0"
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "sideEffects": false
 }

package/src/lib/Button.tsx

@@ -25,6 +25,9 @@ export type ButtonProps = {
   | 'centerRipple'
   | 'disableRipple'
   | 'focusRipple'
+  | 'loading'
+  | 'loadingIndicator'
+  | 'loadingPosition'
   | 'size'
   | 'TouchRippleProps'
   | 'touchRippleRef'

package/src/lib/LoadingButton.tsx

@@ -1,38 +1,21 @@
 import { forwardRef } from 'react';
-import MUILoadingButton, { LoadingButtonProps as MuiLoadingButtonProps } from '@mui/lab/LoadingButton';
+import MUIButton, { ButtonProps as MuiButtonProps } from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
+import { ButtonProps } from './Button';
 
-export type LoadingButtonProps = {
-  children: React.ReactNode;
-  /**
-   * The color of the component.
-   */
-  color?: 'primary' | 'secondary' | 'error';
-} & Omit<
-  MuiLoadingButtonProps,
-  | 'color'
-  | 'centerRipple'
-  | 'disableRipple'
-  | 'disableTouchRipple'
-  | 'focusRipple'
-  | 'disableFocusRipple'
-  | 'TouchRippleProps'
-  | 'touchRippleRef'
-  | 'loadingIndicator'
-  | 'loadingPosition'
->;
+export type LoadingButtonProps = ButtonProps & Pick<MuiButtonProps, 'loading'>
 
 const LoadingIndicator = <CircularProgress color="inherit" size={16} aria-label="loading" />;
 
 export const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>((props, ref) => {
-  const { children, loading, ...rest } = props;
+  const { children, loading = false, ...rest } = props;
   //changing default loading button behavior to add end loading icon instead of replacing contents completely with icon
   const loadingPosition = rest.startIcon ? 'start' : 'end';
   const nonLoadingStyling = rest.startIcon || rest.endIcon || loading ? {} : { padding: '0 .7rem' };
   const endIcon = rest.startIcon ? undefined : <span style={loading ? { padding: '0 .7rem' } : {}}></span>;
 
   return (
-    <MUILoadingButton
+    <MUIButton
       endIcon={endIcon}
       loadingPosition={loadingPosition}
       loading={loading}
@@ -42,6 +25,6 @@ export const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>((
       ref={ref}
     >
       <span style={nonLoadingStyling}>{children}</span>
-    </MUILoadingButton>
+    </MUIButton>
   );
 });