@seeqdev/qomponents 0.0.166 → 0.0.168

package/dist/index.esm.js

@@ -4925,10 +4925,39 @@ const borderColorClasses$3 = [
 /**
  * TextArea.
  */
-const TextArea = ({ readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, rows = 3, cols = undefined, value, placeholder, showError, extraClassNames, testId, autoFocus = false, }) => {
+const TextArea = React__default.forwardRef(({ readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, onSelectionChange, id, name, rows = 3, cols = undefined, value, placeholder, showError, extraClassNames, testId, autoFocus = false, }, ref) => {
     const appliedClasses = `${baseClasses$4} ${extraClassNames} ${lightTheme$2} ${darkTheme$2} ${showError ? errorClasses$3 : borderColorClasses$3}`;
-    return (jsx$1("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autoFocus }));
-};
+    const textareaRef = useRef(null);
+    // Handle selection change events
+    useEffect(() => {
+        if (!onSelectionChange || !textareaRef.current) {
+            return;
+        }
+        const textarea = textareaRef.current;
+        const handleSelectionChange = (e) => {
+            onSelectionChange(e);
+        };
+        // Add event listeners for selection changes
+        textarea.addEventListener('selectionchange', handleSelectionChange);
+        // Also listen for mouse and keyboard events that change selection
+        textarea.addEventListener('mouseup', handleSelectionChange);
+        textarea.addEventListener('keyup', handleSelectionChange);
+        return () => {
+            textarea.removeEventListener('selectionchange', handleSelectionChange);
+            textarea.removeEventListener('mouseup', handleSelectionChange);
+            textarea.removeEventListener('keyup', handleSelectionChange);
+        };
+    }, [onSelectionChange]);
+    return (jsx$1("textarea", { ref: (element) => {
+            textareaRef.current = element;
+            if (typeof ref === 'function') {
+                ref(element);
+            }
+            else if (ref) {
+                ref.current = element;
+            }
+        }, "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autoFocus }));
+});
 
 /**
  * @deprecated
@@ -16639,7 +16668,7 @@ const InputGroup = React__default.forwardRef((props, ref) => {
     const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
     const elementsToAppend = append.filter(Boolean);
     return (jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (jsx$1("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}`, children: field })) : (jsx$1(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' ? (jsx$1(Button, { extraClassNames: `${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} focus:tw-z-40 focus:tw-border tw-rounded-none last:tw-rounded-r-md`, ...item.buttonProps }, index)) : (jsx$1("div", { className: `${borderColorClasses} ${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} 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`, children: item?.element }, index));
+                return item?.variant === 'button' ? (jsx$1(Button, { extraClassNames: `${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} focus:tw-z-40 focus:tw-border tw-rounded-none last:tw-rounded-r-md`, ...item.buttonProps }, index)) : (jsx$1("div", { className: `${borderColorClasses} ${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} tw-flex tw-items-center tw-justify-center tw-rounded-none last:tw-rounded-r-md active:tw-z-30 active:tw-border tw-border`, children: item?.element }, index));
             })] }));
 });