@availity/mui-progress 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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

@@ -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"]);
+  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", 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

@@ -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"]);
+  var _b = _a, { variant = "determinate", value = 0, sx, hidePercentage = false } = _b, props = __objRest(_b, ["variant", "value", "sx", "hidePercentage"]);
   return /* @__PURE__ */ jsxs2(Stack2, { direction: "row", 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": "0.5.1",
   "description": "Availity MUI Progress Component - part of the @availity/element design system",
   "keywords": [
     "react",

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">
       <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>
   );
 };