@seeqdev/qomponents 0.0.138 → 0.0.140

package/dist/index.js

@@ -121,7 +121,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
  *  - include tooltips and/or icons
  */
 const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, iconPosition = 'left', iconPrefix = undefined, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
-    const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 focus-visible:tw-outline-none disabled:tw-pointer-events-none';
+    const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-md focus:tw-ring-0 focus-visible:tw-outline-none disabled:tw-pointer-events-none';
     const baseClassesByVariant = {
         'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
         'theme': 'disabled:tw-opacity-50 tw-border-solid tw-border',
@@ -4562,18 +4562,18 @@ function getSvgIconPath(icon) {
 const borderStyles$4 = [
     'tw-border-solid',
     'tw-border',
-    'tw-rounded-sm',
+    'tw-rounded-[10px]',
     'tw-border-sq-disabled-gray',
     'dark:tw-border-gray-500',
 ].join(' ');
 const triggerBorderStyles = [
     'tw-border-solid',
     'tw-border',
-    'tw-rounded-sm',
+    'tw-rounded-[10px]',
     'tw-border-transparent',
     'hover:tw-border-solid',
     'hover:tw-border',
-    'hover:tw-rounded-sm',
+    'hover:tw-rounded-[10px]',
     'hover:tw-border-sq-darkish-gray',
     'active:tw-border-sq-color-dark',
     'dark:hover:tw-border-sq-color-dark-dark',
@@ -4584,7 +4584,7 @@ const activeBorderStyles = [
     'active',
     'tw-border-solid',
     'tw-border',
-    'tw-rounded-sm',
+    'tw-rounded-[10px]',
     'tw-border-sq-color-dark',
     'active:tw-border-sq-color-dark',
     'dark:hover:tw-border-sq-color-dark-dark',
@@ -4695,12 +4695,12 @@ const TextField = React.forwardRef((props, ref) => {
             internalRef.current.value = `${value}`;
         }
     }, [value]);
-    let borderRadius = 'tw-rounded-sm';
+    let borderRadius = 'tw-rounded-md';
     if (inputGroup === 'left') {
-        borderRadius = 'tw-rounded-l-sm tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
+        borderRadius = 'tw-rounded-l-md tw-border-r-0 focus:tw-border-r' + ' active:tw-border-r';
     }
     else if (inputGroup === 'right') {
-        borderRadius = 'tw-rounded-r-sm tw-border-l-0 focus:tw-border-l active:tw-border-l';
+        borderRadius = 'tw-rounded-r-md tw-border-l-0 focus:tw-border-l active:tw-border-l';
     }
     const appliedClasses = `${baseClasses$6} ${sizeClasses[size]} ${extraClassNames} ${lightTheme$3} ${darkTheme$3} ${borderRadius} ${showError ? errorClasses$4 : borderColorClasses$4} `;
     const inputProp = setValidInputDimension(inputWidth, inputHeight)
@@ -4741,7 +4741,7 @@ const Checkbox = (props) => {
                 : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
 };
 
-const baseClasses$4 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-sm tw-w-full' +
+const baseClasses$4 = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3 tw-rounded-md tw-w-full' +
     ' disabled:tw-pointer-events-none disabled:tw-bg-sq-light-gray  disabled:dark:tw-bg-sq-dark-disabled-gray' +
     ' disabled:tw-cursor-not-allowed tw-p-1 tw-border-solid tw-border tw-text-sm';
 const darkTheme$2 = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text ' +
@@ -11593,7 +11593,7 @@ var colors$1 = {
   neutral80: 'hsl(0, 0%, 20%)',
   neutral90: 'hsl(0, 0%, 10%)'
 };
-var borderRadius$1 = 4;
+var borderRadius = 4;
 // Used to calculate consistent margin/padding on elements
 var baseUnit = 4;
 // The minimum height of the control
@@ -11606,7 +11606,7 @@ var spacing = {
   menuGutter: menuGutter
 };
 var defaultTheme = {
-  borderRadius: borderRadius$1,
+  borderRadius: borderRadius,
   colors: colors$1,
   spacing: spacing
 };
@@ -13470,13 +13470,13 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
         filterOption: filterOption ? filterOption : filterConfig ? createFilter(filterConfig) : undefined,
         classNames: {
             control: ({ menuIsOpen }) => {
-                let border = menuIsOpen ? 'tw-rounded-t-sm' : 'tw-rounded-sm';
+                let border = menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
                 // if it's on the left side of the input group make sure the right side is straight and not curved
                 if (inputGroup === 'left') {
-                    border = menuIsOpen ? 'tw-rounded-tl-sm' : 'tw-rounded-l-sm';
+                    border = menuIsOpen ? 'tw-rounded-tl-md' : 'tw-rounded-l-md';
                 }
                 else if (inputGroup === 'right') {
-                    border = menuIsOpen ? 'tw-rounded-tr-sm' : 'tw-rounded-r-sm';
+                    border = menuIsOpen ? 'tw-rounded-tr-md' : 'tw-rounded-r-md';
                 }
                 const appliedClasses = `${borderStyles$3} ${border}  ${showError ? errorClasses$2 : borderColorClasses$2} ${small ? 'reactSelectMinHeightSmall' : 'reactSelectMinHeight'} `;
                 return `${appliedClasses} ${baseClasses$3} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
@@ -14336,12 +14336,12 @@ const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames,
         onTabSelect && onTabSelect(tabId);
     };
     return (React.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, { className: `tw-flex tw-flex-col tw-min-w-[300px] tw-max-w-full tw-flex-grow focus-visible:tw-outline-none ${extraClassNames || ''}`, defaultValue: defaultActiveTab, "data-testid": testId, id: id, value: activeTab, onValueChange: handleTabSelect },
-        React.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, { className: `tw-flex tw-flex-row tw-flex-wrap tw-z-[1001]` }, tabs.map(({ id, icon, label, tabExtraClassNames, testId: tabsTestId, disabled }, index) => (React.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-h-[45px] focus-visible:tw-outline-none tw-min-w-[100px] tw-px-4 tw-border-solid dark:tw-border-gray-700 tw-flex tw-flex-1 tw-justify-center tw-items-center tw-border-r-[2px] last:tw-border-r-0 ${stretchTabs ? '' : 'tw-max-w-max tw-min-w-fit'} ${tabExtraClassNames || ''} ${activeTab === id
+        React.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, { className: `tw-flex tw-flex-row tw-flex-wrap tw-z-[1001]` }, tabs.map(({ id, icon, label, tabExtraClassNames, testId: tabsTestId, disabled }, index) => (React.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-h-[25px] focus-visible:tw-outline-none tw-min-w-[100px] tw-px-4 tw-border-solid dark:tw-border-gray-700 tw-flex tw-flex-1 tw-justify-center tw-items-center tw-border-r-[2px] last:tw-border-r-0 ${stretchTabs ? '' : 'tw-max-w-max tw-min-w-fit'} ${tabExtraClassNames || ''} ${activeTab === id
                 ? 'tw-border-b-sq-color-dark dark:tw-border-b-sq-color-dark tw-border-b-[3px]'
                 : 'hover:tw-bg-sq-light-gray tw-border-b-[1px] hover:dark:tw-bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, key: `${label}-${id}-${index}`, value: id },
-            React.createElement("span", null,
-                icon && React.createElement(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw-text-[15px] tw-mr-[7px]" }),
-                React.createElement("span", { className: `tw-text-[14px] tw-font-medium ${activeTab === id
+            React.createElement("span", { className: "tw-flex tw-items-center tw-overflow-hidden tw-pb-[3px]" },
+                icon && React.createElement(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw-text-[15px] tw-mr-[7px] tw-flex-shrink-0" }),
+                React.createElement("span", { className: `tw-text-[14px] tw-font-medium tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis ${activeTab === id
                         ? 'dark:tw-text-sq-dark-text tw-text-gray-500'
                         : 'dark:tw-text-sq-color-dark-dark tw-text-sq-color-dark'}` }, label)))))),
         tabs.map((tab, index) => (React.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: `tw-bg-sq-white dark:tw-bg-sq-dark-background tw-overflow-y-auto -tw-mt-[1px] tw-border-t-[1px] dark:tw-border-gray-700 tw-z-[500] tw-flex tw-flex-col tw-flex-grow focus-visible:tw-outline-none ${tab.tabContentExtraClassNames || ''}`, key: `${tab.label}_${index}_content`, value: tab.id }, tab.content)))));
@@ -15850,7 +15850,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
                     }))))));
 };
 
-const baseClasses$2 = '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' +
+const baseClasses$2 = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-[15px] 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';
@@ -15943,7 +15943,7 @@ const InsertSeeqContent = (item) => {
 const borderStyles = [
     'tw-border-solid',
     'tw-border',
-    'tw-rounded-sm',
+    'tw-rounded-md',
     'tw-border-sq-disabled-gray',
     'dark:tw-border-gray-500',
 ].join(' ');
@@ -15983,7 +15983,7 @@ const SeeqActionDropdown = ({ seeqActionDropdownItems, trigger, id, extraClassNa
                 })))));
 };
 
-const baseClasses$1 = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap';
+const baseClasses$1 = 'tw-flex tw-outline-none tw-rounded-md tw-w-full tw-relative tw-flex-wrap';
 const errorClasses = 'tw-border-sq-danger-color';
 const borderColorClasses = [
     'tw-border-sq-disabled-gray',
@@ -15993,7 +15993,7 @@ const borderColorClasses = [
     'focus:tw-border-sq-color-dark',
     'active:tw-border-sq-color-dark',
 ].join(' ');
-const borderRadius = 'tw-rounded-sm tw-rounded-r-none';
+const fieldBorderRadius = 'tw-rounded-l-md 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';
@@ -16004,10 +16004,13 @@ 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$1} ${extraClassNames}`;
-    const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${borderRadius} ${showError ? errorClasses : borderColorClasses} `;
+    const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
     return (React.createElement("div", { id: `input-group-${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", ...item.buttonProps })) : (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)))));
+        append.filter(Boolean).map((item, index, array) => {
+            const isLast = index === array.length - 1;
+            return 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 ${isLast ? 'tw-rounded-r-md' : ''}`, ...item.buttonProps })) : (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 ${isLast ? 'tw-rounded-r-md' : ''}` }, item?.element));
+        })));
 });
 
 // src/index.ts
@@ -22159,12 +22162,32 @@ function validateWCAG2Parms(parms) {
 
 const baseLabelClasses = 'tw-left-1 tw-text-xs tw-text-sq-text-color dark:tw-text-sq-dark-text tw-items-center tw-h-[18px]';
 const ProgressIndicator = (props) => {
-    const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, ...tooltipProps } = props;
+    const { value, color = undefined, testId, label, extraClasses = '', labelClasses = '', valuesLength, max, index, totalValue, ...tooltipProps } = props;
     const tooltipData = getQTipData(tooltipProps);
     const previousWidth = React.useRef(0);
     const indicatorElementRef = React.useRef(null);
     const [textColorClass, setTextColorClass] = React.useState('');
     const [animatedWidth, setAnimatedWidth] = React.useState(previousWidth.current);
+    // Determine which corners to round based on position and total value
+    let roundedCorners = '';
+    if (totalValue >= max) {
+        // If progress is 100%, round both ends
+        if (index === 0 && valuesLength === 1) {
+            roundedCorners = 'tw-rounded-[15px]';
+        }
+        else if (index === 0) {
+            roundedCorners = 'tw-rounded-l-[15px]';
+        }
+        else if (index === valuesLength - 1) {
+            roundedCorners = 'tw-rounded-r-[15px]';
+        }
+    }
+    else {
+        // Otherwise, only round the leftmost indicator
+        if (index === 0) {
+            roundedCorners = 'tw-rounded-l-[15px]';
+        }
+    }
     React.useEffect(() => {
         const timeout = setTimeout(() => {
             const newWidth = (Number(value) / Number(max)) * 100;
@@ -22188,7 +22211,7 @@ const ProgressIndicator = (props) => {
             computeTextClass(indicatorElementRef.current);
         }
     }, [!!indicatorElementRef.current]);
-    return (React.createElement(Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-w-full tw-h-[18px] tw-duration-[660ms] tw-flex  tw-justify-center tw-items-center tw-overflow-hidden ${bgClass} ${extraClasses}`, ...tooltipData, "data-qtip-text": tooltipProps.tooltip ? tooltipProps.tooltip : `${value}%`, "data-testid": `progress-bar-indicator-${testId ? testId : value}`, key: `${index}-${value}`, ref: indicatorElementRef, style: {
+    return (React.createElement(Indicator, { className: `tw-ease-[cubic-bezier(0.65, 0, 0.35, 1)] tw-w-full tw-h-[18px] tw-duration-[660ms] tw-flex tw-justify-center tw-items-center tw-overflow-hidden ${roundedCorners} ${bgClass} ${extraClasses}`, ...tooltipData, "data-qtip-text": tooltipProps.tooltip ? tooltipProps.tooltip : `${value}%`, "data-testid": `progress-bar-indicator-${testId ? testId : value}`, key: `${index}-${value}`, ref: indicatorElementRef, style: {
             // Background color will default to the theme color if undefined
             backgroundColor: bgColor,
             animation: 'width 660ms forwards',
@@ -22197,12 +22220,12 @@ const ProgressIndicator = (props) => {
 };
 const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
     const totalValue = values.reduce((acc, { value }) => acc + value, 0);
-    return (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 tw-flex tw-flex-1 ${containerExtraClasses}`, max: max, value: totalValue }, totalValue > 0 ? (values.map((props, i) => {
-        return React.createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, key: i });
+    return (React.createElement(Root, { className: `tw-relative tw-h-[18px] tw-w-full tw-overflow-hidden tw-rounded-[15px] tw-bg-sq-dark-gray dark:tw-bg-sq-dark-disabled-gray tw-flex tw-flex-1 ${containerExtraClasses}`, max: max, value: totalValue }, totalValue > 0 ? (values.map((props, i) => {
+        return React.createElement(ProgressIndicator, { ...props, max: max, valuesLength: values.length, index: i, totalValue: totalValue, key: i });
     })) : (React.createElement("div", { className: `${baseLabelClasses} tw-mx-auto tw-overflow-hidden` }, zeroValueLabel))));
 };
 
-const baseClasses = 'tw-flex tw-outline-none tw-rounded-sm tw-w-full tw-relative tw-flex-wrap';
+const baseClasses = 'tw-flex tw-outline-none tw-w-full tw-relative tw-flex-wrap';
 const activeClassesByVariantLightTheme = {
     'outline': '!tw-bg-sq-disabled-gray tw-border-sq-color-dark',
     'theme': 'tw-bg-sq-color-highlight',
@@ -22226,7 +22249,7 @@ const ButtonGroup = (props) => {
     const { id, extraClassNames, testId, onChange, buttons = [], ...tooltipProps } = props;
     const tooltipData = getQTipData(tooltipProps);
     const appliedClasses = `${baseClasses} ${extraClassNames}`;
-    return (React.createElement("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData }, buttons.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, ...item.buttonProps, extraClassNames: `tw-ml-[-1px] focus:tw-z-40 tw-outline-none focus:tw-border tw-rounded-r-none tw-rounded-l-none last:tw-rounded-r-sm first:tw-rounded-l-sm ${item.buttonProps?.isActive
+    return (React.createElement("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData }, buttons.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React.createElement(Button, { key: index, ...item.buttonProps, extraClassNames: `tw-ml-[-1px] focus:tw-z-40 tw-outline-none focus:tw-border tw-rounded-none first:tw-rounded-l-md last:tw-rounded-r-md ${item.buttonProps?.isActive
             ? `${activeClassesByVariantLightTheme[item?.buttonProps?.variant ?? 'outline']} ${activeClassesByVariantDarkTheme[item?.buttonProps?.variant ?? 'outline']} `
             : ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) })) : (React.createElement("div", { key: index, className: ` tw-flex tw-items-center tw-justify-center tw-rounded-none tw-ml-[-1px] active:tw-z-30 ${item?.extraClassNames || ''}` }, item?.element)))));
 };