@seeqdev/qomponents 0.0.193 → 0.0.194

package/dist/index.js

@@ -14177,8 +14177,7 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
             },
             placeholder: () => placeholderStyles,
             container: ({ selectProps }) => {
-                const containerBorderStyles = selectProps?.menuIsOpen ? 'tw:rounded-t-md' : 'tw:rounded-md';
-                return `${textStyles} ${extraClassNames} ${containerBorderStyles} tw:pointer-events-auto!`;
+                return `${textStyles} ${extraClassNames} tw:pointer-events-auto!`;
             },
             input: () => textStyles + ' specSelectInput',
             menuList: () => menuListStyles,
@@ -16807,20 +16806,30 @@ const borderColorClasses = [
     'tw:focus:border-sq-theme-dark',
     'tw:active:border-sq-theme-dark',
 ].join(' ');
-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 fieldClasses = 'tw:leading-normal tw:outline-none tw:py-1 tw:px-3 tw:p-1 tw:border-solid tw:border';
 const darkTheme = 'tw:dark:bg-sq-dark-background tw:dark:text-sq-dark-text tw:disabled:dark:text-sq-disabled-gray';
 const lightTheme = 'tw:text-sq-text-color tw:disabled:text-sq-darkish-gray';
 /**
  * InputGroup.
  */
 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 { 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, inputGroup, ...tooltipProps } = props;
     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 (jsxRuntime.jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsxRuntime.jsx("div", { "data-testid": testId, className: `tw:flex tw:flex-1 tw:cursor-pointer tw:active:z-50 ${fieldAppliedClasses}`, children: field })) : (jsxRuntime.jsx(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:focus:z-30 tw:rounded-r-none tw:last:rounded-r-md ${extraClassNames}`, ...tooltipData })), elementsToAppend.map((item, index) => {
+    const effectiveInputGroup = inputGroup ?? (elementsToAppend.length > 0 ? 'left' : undefined);
+    const fieldBorderRadius = effectiveInputGroup === 'left'
+        ? 'tw:rounded-l-md tw:rounded-r-none'
+        : effectiveInputGroup === 'right'
+            ? 'tw:rounded-r-md tw:rounded-l-none'
+            : 'tw:rounded-md';
+    const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
+    // Only pass inputGroup to React components (not DOM elements like div, span, etc.)
+    const isReactComponent = React.isValidElement(field) && typeof field.type !== 'string';
+    const fieldWithInputGroup = isReactComponent
+        ? React.cloneElement(field, { inputGroup: effectiveInputGroup })
+        : field;
+    return (jsxRuntime.jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsxRuntime.jsx("div", { "data-testid": testId, className: `tw:flex tw:flex-1 tw:cursor-pointer tw:active:z-50 ${fieldAppliedClasses}`, children: fieldWithInputGroup })) : (jsxRuntime.jsx(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, inputGroup: effectiveInputGroup, extraClassNames: `tw:flex tw:flex-1 tw:w-full tw:focus:z-30 ${extraClassNames}`, ...tooltipData })), elementsToAppend.map((item, index) => {
                 return item?.variant === 'button' ? (jsxRuntime.jsx(Button, { extraClassNames: `$
                 index ? 'tw:-ml-px' : 'tw:ml-0'
               } tw:focus:z-40 tw:focus:border tw:rounded-none tw:last:rounded-r-md`, ...item.buttonProps }, index)) : (jsxRuntime.jsx("div", { className: `${borderColorClasses} ${index ? 'tw:-ml-px' : 'tw:ml-0'} tw:flex tw:items-center tw:justify-center tw:rounded-none tw:last:rounded-r-md tw:active:z-30 tw:active:border tw:border`, children: item?.element }, index));