@seeqdev/qomponents 0.0.112 → 0.0.114

package/dist/index.js

@@ -15849,7 +15849,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, c
                     }))))));
 };
 
-const baseClasses$1 = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-sm tw-w-full' +
+const baseClasses$1 = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-sm tw-w-full tw-relative' +
     ' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col tw-justify-center tw-items-center';
 const darkTheme$1 = 'dark:tw-bg-sq-colored-hover-dark dark:tw-text-sq-dark-text';
 const lightTheme$1 = 'tw-text-sq-text-color tw-bg-sq-colored-hover';
@@ -15858,24 +15858,26 @@ const borderColorClasses$1 = 'tw-border-sq-color-dark';
 /**
  * Alert.
  */
-const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId, id, extraClassNames, }) => {
+const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
     const appliedTheme = {
         theme: `${lightTheme$1} ${darkTheme$1}`,
         danger: 'tw-text-sq-text-color tw-bg-sq-danger-color',
         warning: 'tw-bg-sq-bg-warning-color tw-text-sq-text-color',
+        gray: 'tw-bg-sq-light-gray tw-text-sq-text-color dark:tw-bg-sq-dark-disabled-gray dark:tw-text-sq-dark-text',
     };
     const appliedBorderTheme = {
         theme: borderColorClasses$1,
         danger: errorClasses$1,
         warning: 'tw-border-none',
+        gray: 'tw-border-sq-darkish-gray',
     };
     const appliedClasses = `${baseClasses$1} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
     if (!show) {
         return React.createElement("div", null);
     }
     return (React.createElement("div", { "data-testid": testId, id: id, className: appliedClasses },
-        dismissible && (React.createElement(Icon, { icon: "fc-delete", type: variant.match(/danger|warning/) ? 'color' : 'theme', color: variant.match(/danger|warning/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[11px] tw-cursor-pointer ${variant.match(/danger|warning/) ? 'tw-text-sq-text-color dark:tw-text-sq-text-color' : ''}`, testId: `${testId}-close-btn`, onClick: onClose })),
-        children));
+        children,
+        dismissible && (React.createElement(Icon, { icon: "fc-delete", type: variant.match(/danger|warning/) ? 'color' : 'theme', color: variant.match(/danger|warning/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[11px] tw-cursor-pointer tw-absolute tw-right-[10px] tw-top-[10px] ${variant.match(/danger|warning|gray/) ? 'tw-text-sq-text-color dark:tw-text-sq-text-color' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))));
 };
 
 const SeeqActionDropdownItem = (item) => {
@@ -15952,21 +15954,22 @@ const borderColorClasses = [
     'focus:tw-border-sq-color-dark',
     'active:tw-border-sq-color-dark',
 ].join(' ');
-let borderRadius = 'tw-rounded-sm tw-rounded-r-none';
+const borderRadius = 'tw-rounded-sm tw-rounded-r-none';
 const fieldClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3' + 'tw-p-1 tw-border-solid tw-border';
 const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
 const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
 /**
  * InputGroup.
  */
-const InputGroup = ({ readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, name, value, placeholder, append = [], extraClassNames = '', id, testId, showError, required, autoComplete, autoFocus, disabled, type, step, min, max, field, ...tooltipProps }) => {
+const InputGroup = React.forwardRef((props, ref) => {
+    const { readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, name, value, placeholder, append = [], extraClassNames = '', id, testId, showError, required, autoComplete, autoFocus, disabled, type, step, min, max, field, maxLength, minLength, ...tooltipProps } = props;
     const tooltipData = getQTipData(tooltipProps);
     const appliedClasses = `${baseClasses} ${extraClassNames}`;
     const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
-    return (React.createElement("div", { id: id, "data-testid": testId, className: appliedClasses },
-        field ? (React.createElement("div", { className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}` }, field)) : (React.createElement(TextField, { readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, 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.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 })) : (React.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)))));
-};
+    return (React.createElement("div", { id: id, className: appliedClasses },
+        field ? (React.createElement("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}` }, field)) : (React.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.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.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
 function clamp(value, [min, max]) {
@@ -17182,14 +17185,14 @@ Defaulting to \`null\`.`;
 var Root = Progress;
 var Indicator = ProgressIndicator;
 
-const ProgressBar = ({ value, max = 100, label, extraClasses }) => {
+const ProgressBar = ({ value, max = 100, label, extraClasses, testId }) => {
     const tooltipData = getQTipData({ tooltip: label });
     const [progress, setProgress] = React.useState(0);
     React.useEffect(() => {
         const timer = setTimeout(() => setProgress(value), 500);
         return () => clearTimeout(timer);
     }, []);
-    return (React.createElement("span", { ...tooltipData },
+    return (React.createElement("span", { "data-testid": testId, ...tooltipData },
         React.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.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}%)` } }))));
 };