@seeqdev/qomponents 0.0.140 → 0.0.142

package/dist/ToolbarButton/ToolbarButton.types.d.ts

@@ -30,6 +30,7 @@ export interface ToolbarButtonProps {
     tooltipTestId?: string;
     /** options for the tooltip */
     tooltipOptions?: Omit<TooltipProps, 'text'>;
+    /** sets button to disabled */
     disabled?: boolean;
     /** function called when the toolbar is clicked on, i.e. for tracking (does not open the popover) */
     onClick?: (e: MouseEvent) => void;

package/dist/index.esm.js

@@ -4539,35 +4539,29 @@ function getSvgIconPath(icon) {
     return isSvgIcon(icon) ? icon.substring(SVG_PATH.length) : '';
 }
 
-const borderStyles$4 = [
+const popoverBorderStyles = [
     'tw-border-solid',
     'tw-border',
     'tw-rounded-[10px]',
     'tw-border-sq-disabled-gray',
     'dark:tw-border-gray-500',
 ].join(' ');
-const triggerBorderStyles = [
-    'tw-border-solid',
-    'tw-border',
-    'tw-rounded-[10px]',
-    'tw-border-transparent',
-    'hover:tw-border-solid',
-    'hover:tw-border',
-    'hover:tw-rounded-[10px]',
-    'hover:tw-border-sq-darkish-gray',
-    'active:tw-border-sq-color-dark',
-    'dark:hover:tw-border-sq-color-dark-dark',
-    'dark:focus:tw-border-sq-color-dark-dark',
-    'dark:active:tw-border-sq-color-dark-dark',
+const triggerBackgroundStyles = [
+    'tw-bg-transparent',
+    'hover:tw-bg-sq-light-gray',
+    'active:tw-bg-sq-light-gray',
+    'dark:tw-bg-transparent',
+    'dark:hover:tw-bg-sq-field-disabled-gray',
+    'dark:active:tw-bg-sq-field-disabled-gray',
 ].join(' ');
-const activeBorderStyles = [
+const activeBackgroundStyles = [
     'active',
-    'tw-border-solid',
-    'tw-border',
-    'tw-rounded-[10px]',
-    'tw-border-sq-color-dark',
-    'active:tw-border-sq-color-dark',
-    'dark:hover:tw-border-sq-color-dark-dark',
+    'tw-bg-sq-dark-gray',
+    'hover:tw-bg-sq-dark-gray',
+    'active:tw-bg-sq-dark-gray',
+    'dark:tw-bg-sq-field-disabled-gray',
+    'dark:hover:tw-border-sq-field-disabled-gray',
+    'dark:active:tw-bg-sq-field-disabled-gray',
 ].join(' ');
 const bgStyles$3 = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
 const disabledClasses$4 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
@@ -4589,10 +4583,10 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
         }
     };
     return (React.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { defaultOpen: false, onOpenChange: onOpenChange },
-        React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
+        React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none tw-mx-[1.5px] first:tw-ml-0 last:tw-mr-0 ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
                 onClick && onClick(e);
             } },
-            React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-items-center ${isSmall ? 'tw-py-[1px] tw-px-[5px]' : 'tw-px-2 tw-py-[5px]'} ${disabled ? disabledClasses$4 : isActive ? activeBorderStyles : triggerBorderStyles} ${extraClassNames || ''}` },
+            React.createElement("div", { ...tooltipData, className: `tw-flex tw-flex-col tw-items-center tw-rounded-[10px] ${isSmall ? 'tw-py-[1px] tw-px-1' : 'tw-px-2 tw-py-[5px]'} ${disabled ? disabledClasses$4 : isActive ? activeBackgroundStyles : triggerBackgroundStyles} ${extraClassNames || ''}` },
                 React.createElement("span", { className: "tw-nowrap" },
                     isPrimaryAnSvg ? (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw-text-sq-text-color dark:tw-text-sq-dark-text ${primaryIconExtraClassNames || ''}`, viewBox: primaryIconViewbox, height: `${iconHeight}px`, width: `${iconWidth}px`, fill: "currentColor", "data-testid": testId },
                         React.createElement("path", { d: getSvgIconPath(icon) }))) : (React.createElement(Icon, { icon: icon, testId: "firstIcon", type: "text", large: !isSmall && !label && !secondIcon && !forceSmallIcon, extraClassNames: `tw-text-sq-text-color dark:tw-text-sq-dark-text` })),
@@ -4603,7 +4597,7 @@ const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIco
             React.createElement("div", { className: bgStyles$3 +
                     ' tw-relative tw-z-[1000] tw-min-w-6 tw-p-[0.5rem] focus-visible:tw-outline-none tw-outline-none data-[state=open]:animate-in data-[state=closed]:animate-out' +
                     ' data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' +
-                    borderStyles$4 },
+                    popoverBorderStyles },
                 hasArrow && (React.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
                     React.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }))),
                 popoverContent))) : undefined));
@@ -13396,6 +13390,7 @@ const multiValueStyles = [
  *
  */
 const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no matching options', isSearchable = true, creatable = false, isMulti = false, isClearable = false, closeMenuOnSelect = true, id, inputId, menuPortalTarget, getOptionLabel, getSelectedValueLabel, getOptionValue, onChange, menuIsOpen, menuPlacement = 'auto', extraClassNames, inputGroup, filterConfig, filterOption, small = false, isDisabled = false, showError = false, isLoading = false, formatGroupLabel, onRemove, defaultValue, onMenuOpen, onMenuClose, components, onMenuInputFocus, onInputChange, inputValue, }) => {
+    const [isSelectOptionsOpen, setIsSelectOptionsOpen] = React__default.useState(false);
     const getOptionOrSelectedLabel = (option, { context }) => {
         const getSelectedOptionLabel = getSelectedValueLabel ? getSelectedValueLabel : getOptionLabel;
         if (getOptionLabel || getSelectedValueLabel) {
@@ -13451,6 +13446,7 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
         classNames: {
             control: ({ menuIsOpen }) => {
                 let border = menuIsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
+                setIsSelectOptionsOpen(menuIsOpen);
                 // 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-md' : 'tw-rounded-l-md';
@@ -13462,7 +13458,10 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
                 return `${appliedClasses} ${baseClasses$3} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw-pl-2 tw-pr-1' : 'tw-pl-2.5 tw-pr-1.5'}`;
             },
             placeholder: () => placeholderStyles,
-            container: () => `${textStyles} ${containerStyles} ${extraClassNames}`,
+            container: () => {
+                const containerBorderStyles = isSelectOptionsOpen ? 'tw-rounded-t-md' : 'tw-rounded-md';
+                return `${textStyles} ${containerStyles} ${extraClassNames} ${containerBorderStyles}`;
+            },
             input: () => textStyles + ' specSelectInput',
             menuList: () => menuListStyles,
             menu: () => menuStyles,
@@ -15985,11 +15984,11 @@ const InputGroup = React__default.forwardRef((props, ref) => {
     const tooltipData = getQTipData(tooltipProps);
     const appliedClasses = `${baseClasses$1} ${extraClassNames}`;
     const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
+    const elementsToAppend = append.filter(Boolean);
     return (React__default.createElement("div", { id: `input-group-${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, array) => {
-            const isLast = index === array.length - 1;
-            return 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 ${isLast ? 'tw-rounded-r-md' : ''}`, ...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 ${isLast ? 'tw-rounded-r-md' : ''}` }, item?.element));
+        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 focus:tw-z-30 tw-rounded-r-none last:tw-rounded-r-md ${extraClassNames}`, ...tooltipData })),
+        elementsToAppend.map((item, index) => {
+            return item?.variant === 'button' ? (React__default.createElement(Button, { key: index, extraClassNames: `tw-ml-[-1px] focus:tw-z-40 focus:tw-border tw-rounded-none last:tw-rounded-r-md`, ...item.buttonProps })) : (React__default.createElement("div", { key: index, className: `${borderColorClasses} tw-flex tw-items-center tw-justify-center tw-rounded-none last:tw-rounded-r-md tw-ml-[-1px] active:tw-z-30 active:tw-border tw-border` }, item?.element));
         })));
 });
 
@@ -22191,12 +22190,12 @@ const ProgressIndicator = (props) => {
             computeTextClass(indicatorElementRef.current);
         }
     }, [!!indicatorElementRef.current]);
-    return (React__default.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: {
+    return (React__default.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 ${valuesLength === 1 ? '' : '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',
             width: `${animatedWidth}%`,
-        } }, label ? React__default.createElement("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass}` }, label) : undefined));
+        } }, label ? (React__default.createElement("span", { className: `${baseLabelClasses} ${labelClasses} ${textColorClass} ${valuesLength === 1 ? 'tw-absolute tw-z-50' : ''}` }, label)) : undefined));
 };
 const ProgressBar = ({ values = [], max = 100, containerExtraClasses = '', zeroValueLabel = 'No progress yet', }) => {
     const totalValue = values.reduce((acc, { value }) => acc + value, 0);
@@ -22229,9 +22228,11 @@ const ButtonGroup = (props) => {
     const { id, extraClassNames, testId, onChange, buttons = [], ...tooltipProps } = props;
     const tooltipData = getQTipData(tooltipProps);
     const appliedClasses = `${baseClasses} ${extraClassNames}`;
-    return (React__default.createElement("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData }, buttons.filter(Boolean).map((item, index) => item?.variant === 'button' ? (React__default.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
+    return (React__default.createElement("div", { id: id ? `button-group-${id}` : undefined, "data-testid": testId, className: appliedClasses, ...tooltipData }, buttons
+        .filter(Boolean)
+        .map((item, index) => item?.variant === 'button' ? (React__default.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__default.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)))));
+            : ''} ${item.buttonProps.extraClassNames}`, onClick: () => onChange && onChange(item?.buttonProps?.value) })) : (item?.element))));
 };
 
 /**