@seeqdev/qomponents 0.0.114 → 0.0.116

package/dist/ProgressBar/ProgressBar.types.d.ts

@@ -1,12 +1,29 @@
-export interface ProgressBarProps {
-    /** The progress value, between 0 and 100. */
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+/**
+ * The ProgressBar component displays a visual representation of a progress value.
+ */
+interface ProgressIndicatorProps extends TooltipComponentProps {
+    /** Additional classes to apply to the progress indicator. */
+    extraClasses?: string;
+    /** The test id for the progress indicator. */
+    testId?: string;
+    /** The value of the progress indicator, between 0 and max. */
     value: number;
-    /** The label to display above the progress bar. */
-    label: string;
+    /** The color of the progress indicator.  e.g. #ffffff */
+    color?: string;
+    /** The label to display on the progress indicator. */
+    label?: string;
+    /** Additional classes to apply to the label. */
+    labelClasses?: string;
+}
+export interface ProgressBarProps {
+    /** The indicator values */
+    values: ProgressIndicatorProps[];
     /** The maximum value of the progress bar. */
     max?: number;
-    /** Additional classes to apply to the progress bar. */
-    extraClasses?: string;
+    /** Additional classes to apply to the progress bar container. */
+    containerExtraClasses?: string;
     /** The test id for the progress bar. */
     testId?: string;
 }
+export {};

package/dist/index.esm.js

@@ -15948,7 +15948,7 @@ const InputGroup = React__default.forwardRef((props, ref) => {
     const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
     return (React__default.createElement("div", { id: id, className: appliedClasses },
         field ? (React__default.createElement("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}` }, field)) : (React__default.createElement(TextField, { testId: testId, readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, ref: ref, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, maxLength: maxLength, minLength: minLength, extraClassNames: `tw-flex tw-flex-1 tw-w-full tw-rounded-r-none focus:tw-z-30 ${extraClassNames}`, ...tooltipData })),
-        append.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React__default.createElement(Button, { key: index, extraClassNames: "tw-ml-[-1px] focus:tw-z-40 focus:tw-border tw-rounded-l-none tw-rounded-r-none last:tw-rounded-r-sm", onClick: item.buttonProps.onClick, variant: item.buttonProps.variant, icon: item.buttonProps.icon, iconColor: item.buttonProps.iconColor, testId: item.buttonProps.testId, disabled: item.buttonProps.disabled, label: item.buttonProps.label, iconStyle: item.buttonProps.iconStyle, tooltip: item.buttonProps.tooltip, tooltipOptions: item.buttonProps.tooltipOptions, tooltipTestId: item.buttonProps.tooltipTestId, isHtmlTooltip: item.buttonProps.isHtmlTooltip, type: item.buttonProps.type, iconPosition: item.buttonProps.iconPosition })) : (React__default.createElement("div", { key: index, className: `${borderColorClasses} tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 active:tw-border tw-border last:tw-rounded-r-sm` }, item?.element)))));
+        append.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React__default.createElement(Button, { key: index, extraClassNames: "tw-ml-[-1px] focus:tw-z-40 focus:tw-border tw-rounded-l-none tw-rounded-r-none last:tw-rounded-r-sm", ...item.buttonProps })) : (React__default.createElement("div", { key: index, className: `${borderColorClasses} tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 active:tw-border tw-border last:tw-rounded-r-sm` }, item?.element)))));
 });
 
 // packages/core/number/src/number.ts
@@ -17165,16 +17165,15 @@ Defaulting to \`null\`.`;
 var Root = Progress;
 var Indicator = ProgressIndicator;
 
-const ProgressBar = ({ value, max = 100, label, extraClasses, testId }) => {
-    const tooltipData = getQTipData({ tooltip: label });
-    const [progress, setProgress] = React__default.useState(0);
-    React__default.useEffect(() => {
-        const timer = setTimeout(() => setProgress(value), 500);
-        return () => clearTimeout(timer);
-    }, []);
-    return (React__default.createElement("span", { "data-testid": testId, ...tooltipData },
-        React__default.createElement(Root, { className: "tw-relative tw-h-[18px] tw-w-full tw-overflow-hidden tw-rounded-[2.5px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray", max: max, value: value },
-            React__default.createElement(Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-h-full tw-bg-sq-color-dark tw-transition-transform tw-duration-[660ms] ${extraClasses}`, style: { transform: `translateX(-${100 - progress}%)` } }))));
+const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', }) => {
+    return (React__default.createElement(Root, { className: `tw-relative tw-h-[18px] tw-w-full tw-overflow-hidden tw-rounded-[2.5px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray tw-flex tw-flex-1 ${containerExtraClasses}`, max: max, value: values.reduce((acc, { value }) => acc + value, 0) }, values.map(({ value, color = undefined, testId, label, extraClasses = '', labelClasses = '', ...tooltipProps }, i) => {
+        const tooltipData = getQTipData(tooltipProps);
+        return (React__default.createElement(Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-w-full tw-h-full tw-duration-[660ms] tw-flex tw-bg-sq-color-dark ${extraClasses}`, ...tooltipData, "data-qtip-text": tooltipProps.tooltip ? tooltipProps.tooltip : `${value}%`, "data-testid": `progress-bar-indicator-${testId ? testId : value}`, key: `${i}-${value}`, style: {
+                // Background color will default to the theme color if undefined
+                backgroundColor: values.length === 1 ? undefined : color,
+                width: `${(Number(value) / Number(max)) * 100}%`,
+            } }, label ? (React__default.createElement("span", { className: `tw-left-1 tw-text-xs tw-text-sq-text-color dark:tw-text-sq-dark-text tw-items-center ${labelClasses}` }, label)) : undefined));
+    })));
 };
 
 export { Accordion, Alert, Button, ButtonWithDropdown, ButtonWithPopover, Checkbox, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip };