@availity/mui-progress 0.5.0 → 1.0.0-alpha.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.0.0-alpha.0](https://github.com/Availity/element/compare/@availity/mui-progress@0.5.1...@availity/mui-progress@1.0.0-alpha.0) (2025-02-24)
+
+
+### ⚠ BREAKING CHANGES
+
+* upgraded to @mui/material v6
+* **element:** upgraded to @mui/material v6
+
+### Features
+
+* **element:** upgrade to @mui/material v6 ([cb958bb](https://github.com/Availity/element/commit/cb958bba99a4f1ee6dab323f0ff54b69e6fd3493))
+* upgrade @mui/material ([571453a](https://github.com/Availity/element/commit/571453a34b21c344594ab4c03bc497d19aba942b))
+* upgrade to MUI v6 ([7febd6f](https://github.com/Availity/element/commit/7febd6fd4fd58e87e1c97a832cea3b4595a35d58))
+
+## [0.5.1](https://github.com/Availity/element/compare/@availity/mui-progress@0.5.0...@availity/mui-progress@0.5.1) (2025-02-19)
+
+
+### Bug Fixes
+
+* **mui-progress:** allow hiding of percentge ([168da9b](https://github.com/Availity/element/commit/168da9bfa7af44089cea27317e0d6ad9a057db3d))
+
 ## [0.5.0](https://github.com/Availity/element/compare/@availity/mui-progress@0.4.5...@availity/mui-progress@0.5.0) (2025-02-04)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -28,7 +28,9 @@ type StatusIconProps = {
 };
 declare const CircularProgress: ({ loadingCaption, error, success, size, ...props }: CircularProgressProps) => JSX.Element;
 
-type LinearProgressProps = Omit<LinearProgressProps$1, 'color'>;
-declare const LinearProgress: ({ variant, value, sx, ...props }: LinearProgressProps) => react_jsx_runtime.JSX.Element;
+type LinearProgressProps = Omit<LinearProgressProps$1, 'color'> & {
+    hidePercentage?: boolean;
+};
+declare const LinearProgress: ({ variant, value, sx, hidePercentage, ...props }: LinearProgressProps) => react_jsx_runtime.JSX.Element;
 
 export { CircularProgress, type CircularProgressProps, LinearProgress, type LinearProgressProps, type StatusIconProps };

package/dist/index.d.ts

@@ -28,7 +28,9 @@ type StatusIconProps = {
 };
 declare const CircularProgress: ({ loadingCaption, error, success, size, ...props }: CircularProgressProps) => JSX.Element;
 
-type LinearProgressProps = Omit<LinearProgressProps$1, 'color'>;
-declare const LinearProgress: ({ variant, value, sx, ...props }: LinearProgressProps) => react_jsx_runtime.JSX.Element;
+type LinearProgressProps = Omit<LinearProgressProps$1, 'color'> & {
+    hidePercentage?: boolean;
+};
+declare const LinearProgress: ({ variant, value, sx, hidePercentage, ...props }: LinearProgressProps) => react_jsx_runtime.JSX.Element;
 
 export { CircularProgress, type CircularProgressProps, LinearProgress, type LinearProgressProps, type StatusIconProps };

package/dist/index.js

@@ -57,12 +57,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   CircularProgress: () => CircularProgress,
   LinearProgress: () => LinearProgress
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/lib/CircularProgress.tsx
 var import_react = require("react");
@@ -109,7 +109,7 @@ var CircularProgress = (_a) => {
       setStatus("loading");
     }
   }, [error, success]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Stack.default, { width: "fit-content", alignItems: "center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Stack.default, { sx: { width: "fit-content", alignItems: "center" }, children: [
     status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_CircularProgress.default,
       __spreadProps(__spreadValues({
@@ -119,7 +119,7 @@ var CircularProgress = (_a) => {
         variant: "indeterminate"
       })
     ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusIcon, { status, size }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_typography.Typography, { marginTop: "8px", variant: "caption", children: loadingCaption || error || success ? getCaptionText(status) : null })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_typography.Typography, { sx: { marginTop: "8px" }, variant: "caption", children: loadingCaption || error || success ? getCaptionText(status) : null })
   ] });
 };
 
@@ -139,7 +139,7 @@ var import_Container = __toESM(require("@mui/material/Container"));
 var import_jsx_runtime3 = require("react/jsx-runtime");
 
 // ../layout/src/lib/Grid.tsx
-var import_Unstable_Grid2 = __toESM(require("@mui/material/Unstable_Grid2"));
+var import_Grid2 = __toESM(require("@mui/material/Grid2"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 
 // ../layout/src/lib/Stack.tsx
@@ -155,11 +155,11 @@ var import_mui_typography2 = require("@availity/mui-typography");
 var import_LinearProgress = __toESM(require("@mui/material/LinearProgress"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var LinearProgress = (_a) => {
-  var _b = _a, { variant = "determinate", value = 0, sx } = _b, props = __objRest(_b, ["variant", "value", "sx"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Stack2, { direction: "row", alignItems: "center", children: [
+  var _b = _a, { variant = "determinate", value = 0, sx, hidePercentage = false } = _b, props = __objRest(_b, ["variant", "value", "sx", "hidePercentage"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Stack2, { direction: "row", sx: { alignItems: "center" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { sx: { width: "100%", mr: 0.5 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_LinearProgress.default, __spreadProps(__spreadValues({ variant }, props), { value, color: "success", sx: __spreadValues({ width: "100%" }, sx) })) }),
     value === 100 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_mui_icon2.SuccessCircleIcon, { color: "success", "data-icon": "complete" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_mui_typography2.Typography, { variant: "body2", sx: { color: "text.secondary", ml: 1 }, children: `${Math.round(value)}%` })
+    !hidePercentage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_mui_typography2.Typography, { variant: "body2", sx: { color: "text.secondary", ml: 1 }, children: `${Math.round(value)}%` })
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -77,7 +77,7 @@ var CircularProgress = (_a) => {
       setStatus("loading");
     }
   }, [error, success]);
-  return /* @__PURE__ */ jsxs(Stack, { width: "fit-content", alignItems: "center", children: [
+  return /* @__PURE__ */ jsxs(Stack, { sx: { width: "fit-content", alignItems: "center" }, children: [
     status === "loading" ? /* @__PURE__ */ jsx(
       MuiCircularProgress,
       __spreadProps(__spreadValues({
@@ -87,7 +87,7 @@ var CircularProgress = (_a) => {
         variant: "indeterminate"
       })
     ) : /* @__PURE__ */ jsx(StatusIcon, { status, size }),
-    /* @__PURE__ */ jsx(Typography, { marginTop: "8px", variant: "caption", children: loadingCaption || error || success ? getCaptionText(status) : null })
+    /* @__PURE__ */ jsx(Typography, { sx: { marginTop: "8px" }, variant: "caption", children: loadingCaption || error || success ? getCaptionText(status) : null })
   ] });
 };
 
@@ -107,7 +107,7 @@ import MuiContainer from "@mui/material/Container";
 import { jsx as jsx3 } from "react/jsx-runtime";
 
 // ../layout/src/lib/Grid.tsx
-import MuiGrid2 from "@mui/material/Unstable_Grid2";
+import MuiGrid2 from "@mui/material/Grid2";
 import { jsx as jsx4 } from "react/jsx-runtime";
 
 // ../layout/src/lib/Stack.tsx
@@ -123,11 +123,11 @@ import { Typography as Typography2 } from "@availity/mui-typography";
 import MuiLinearProgress from "@mui/material/LinearProgress";
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var LinearProgress = (_a) => {
-  var _b = _a, { variant = "determinate", value = 0, sx } = _b, props = __objRest(_b, ["variant", "value", "sx"]);
-  return /* @__PURE__ */ jsxs2(Stack2, { direction: "row", alignItems: "center", children: [
+  var _b = _a, { variant = "determinate", value = 0, sx, hidePercentage = false } = _b, props = __objRest(_b, ["variant", "value", "sx", "hidePercentage"]);
+  return /* @__PURE__ */ jsxs2(Stack2, { direction: "row", sx: { alignItems: "center" }, children: [
     /* @__PURE__ */ jsx6(Box, { sx: { width: "100%", mr: 0.5 }, children: /* @__PURE__ */ jsx6(MuiLinearProgress, __spreadProps(__spreadValues({ variant }, props), { value, color: "success", sx: __spreadValues({ width: "100%" }, sx) })) }),
     value === 100 && /* @__PURE__ */ jsx6(SuccessCircleIcon2, { color: "success", "data-icon": "complete" }),
-    /* @__PURE__ */ jsx6(Typography2, { variant: "body2", sx: { color: "text.secondary", ml: 1 }, children: `${Math.round(value)}%` })
+    !hidePercentage && /* @__PURE__ */ jsx6(Typography2, { variant: "body2", sx: { color: "text.secondary", ml: 1 }, children: `${Math.round(value)}%` })
   ] });
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-progress",
-  "version": "0.5.0",
+  "version": "1.0.0-alpha.0",
   "description": "Availity MUI Progress Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,21 +40,21 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "devDependencies": {
-    "@mui/material": "^5.15.15",
+    "@mui/material": "^6.4.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "^8.0.2",
+    "tsup": "^8.3.6",
     "typescript": "^5.4.5"
   },
   "peerDependencies": {
-    "@mui/material": "^5.11.9",
+    "@mui/material": "^6.4.5",
     "react": ">=16.3.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@availity/mui-icon": "^0.14.0",
-    "@availity/mui-typography": "^0.3.0"
+    "@availity/mui-icon": "^1.0.0-alpha.0",
+    "@availity/mui-typography": "^1.0.0-alpha.0"
   }
 }

package/src/lib/CircularProgress.tsx

@@ -52,7 +52,7 @@ const getCaptionText = (status: string) =>
     loading: 'Loading',
     error: 'Loading error',
     success: 'Loading successful',
-  }[status] || '');
+  })[status] || '';
 
 export const CircularProgress = ({
   loadingCaption = true,
@@ -74,7 +74,7 @@ export const CircularProgress = ({
   }, [error, success]);
 
   return (
-    <Stack width="fit-content" alignItems="center">
+    <Stack sx={{ width: 'fit-content', alignItems: 'center' }}>
       {status === 'loading' ? (
         <MuiCircularProgress
           aria-label="Loading"
@@ -85,7 +85,7 @@ export const CircularProgress = ({
       ) : (
         <StatusIcon status={status} size={size} />
       )}
-      <Typography marginTop="8px" variant="caption">
+      <Typography sx={{ marginTop: '8px' }} variant="caption">
         {loadingCaption || error || success ? getCaptionText(status) : null}
       </Typography>
     </Stack>

package/src/lib/LinearProgress.test.tsx

@@ -25,4 +25,9 @@ describe('LinearProgress', () => {
     expect(screen.getByText('100%')).toBeDefined();
     expect(svgEl.classList.toString()).toContain('MuiSvgIcon-root');
   });
+
+  test('should not show value as percentage for indeterminate', () => {
+    render(<LinearProgress hidePercentage value={50} />);
+    expect(screen.queryByText('50%')).toBeNull();
+  });
 });

package/src/lib/LinearProgress.tsx

@@ -3,16 +3,18 @@ import { Box, Stack } from '@availity/mui-layout';
 import { Typography } from '@availity/mui-typography';
 import MuiLinearProgress, { LinearProgressProps as MuiLinearProgressProps } from '@mui/material/LinearProgress';
 
-export type LinearProgressProps = Omit<MuiLinearProgressProps, 'color'>;
+export type LinearProgressProps = Omit<MuiLinearProgressProps, 'color'> & { hidePercentage?: boolean };
 
-export const LinearProgress = ({ variant = 'determinate', value = 0, sx, ...props }: LinearProgressProps) => {
+export const LinearProgress = ({ variant = 'determinate', value = 0, sx, hidePercentage = false, ...props }: LinearProgressProps) => {
   return (
-    <Stack direction="row" alignItems="center">
+    <Stack direction="row" sx={{ alignItems: 'center' }}>
       <Box sx={{ width: '100%', mr: 0.5 }}>
         <MuiLinearProgress variant={variant} {...props} value={value} color="success" sx={{ width: '100%', ...sx }} />
       </Box>
       {value === 100 && <SuccessCircleIcon color="success" data-icon="complete" />}
-      <Typography variant="body2" sx={{ color: 'text.secondary', ml: 1 }}>{`${Math.round(value)}%`}</Typography>
+      {!hidePercentage && (
+        <Typography variant="body2" sx={{ color: 'text.secondary', ml: 1 }}>{`${Math.round(value)}%`}</Typography>
+      )}
     </Stack>
   );
 };