@seeqdev/qomponents 0.0.163 → 0.0.165

package/dist/index.js

@@ -100,7 +100,7 @@ const colorClassesThemeDark = {
  *  - access to Seeq custom icons by providing the desired icon
  *  - leverage "type" to style your icon
  */
-const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, color, testId, customId, number, ...tooltipProps }) => {
+const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, size, color, testId, customId, number, ...tooltipProps }) => {
     if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
         const errorMessage = color === undefined || color === ''
             ? 'Icon with type="color" must have prop color specified.'
@@ -110,7 +110,8 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
     const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
     const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
     const style = type === 'color' && color ? { color } : {};
-    const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
+    const sizeClass = size ? `fa-${size}` : small ? 'fa-sm' : large ? 'fa-lg' : '';
+    const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass} 
   ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
     const tooltipData = getQTipData(tooltipProps);
     return (jsxRuntime.jsx("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
@@ -4944,10 +4945,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.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 (jsxRuntime.jsx("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 = React.useRef(null);
+    // Handle selection change events
+    React.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 (jsxRuntime.jsx("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