@seeqdev/qomponents 0.0.190 → 0.0.191

package/README.md

@@ -47,16 +47,10 @@ To make sure all styles are properly applied be sure to include the qomponents c
 
 ```css
 @import '@seeqdev/qomponents/dist/styles.css';
-
-@font-face {
-  font-family: 'fontCustom';
-  src: url('@seeqdev/qomponents/dist/FontCustom.woff2') format('woff2'), url('@seeqdev/qomponents/dist/FontCustom.woff')
-      format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
 ```
 
+**Note:** The styles.css file already includes the icon font definitions, so you don't need to manually add `@font-face` declarations.
+
 <b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
 available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use this
 property to provide only width, margins and padding. This will ensure for a smooth upgrade experience when

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx as jsx$1, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useLayoutEffect, useState, useRef, useEffect, useCallback, forwardRef, useContext, useMemo, createContext, Component, Fragment as Fragment$1, useId as useId$1, useInsertionEffect as useInsertionEffect$2, Children, isValidElement, createElement } from 'react';
+import React__default, { useLayoutEffect, useState, useCallback, useRef, useEffect, forwardRef, useContext, useMemo, createContext, Component, Fragment as Fragment$1, useId as useId$1, useInsertionEffect as useInsertionEffect$2, Children, isValidElement, createElement } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { createPortal } from 'react-dom';
 
@@ -3843,7 +3843,7 @@ var removedBarSizeVariable = '--removed-body-scroll-bar-size';
  * assignRef(refObject, "refValue");
  * assignRef(refFn, "refValue");
  */
-function assignRef(ref, value) {
+function assignRef$1(ref, value) {
     if (typeof ref === 'function') {
         ref(value);
     }
@@ -3910,7 +3910,7 @@ var currentValues = new WeakMap();
  */
 function useMergeRefs(refs, defaultValue) {
     var callbackRef = useCallbackRef(null, function (newValue) {
-        return refs.forEach(function (ref) { return assignRef(ref, newValue); });
+        return refs.forEach(function (ref) { return assignRef$1(ref, newValue); });
     });
     // handle refs changes - added or removed
     useIsomorphicLayoutEffect$1(function () {
@@ -3921,12 +3921,12 @@ function useMergeRefs(refs, defaultValue) {
             var current_1 = callbackRef.current;
             prevRefs_1.forEach(function (ref) {
                 if (!nextRefs_1.has(ref)) {
-                    assignRef(ref, null);
+                    assignRef$1(ref, null);
                 }
             });
             nextRefs_1.forEach(function (ref) {
                 if (!prevRefs_1.has(ref)) {
-                    assignRef(ref, current_1);
+                    assignRef$1(ref, current_1);
                 }
             });
         }
@@ -4888,6 +4888,41 @@ const setValidInputDimension = (width, height) => {
     return inputStyle;
 };
 
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (typeof ref === "object" && ref !== null && "current" in ref) {
+    ref.current = value;
+  }
+}
+function mergeRefs(...refs) {
+  const cleanupMap = /* @__PURE__ */ new Map();
+  return (node) => {
+    refs.forEach((ref) => {
+      const cleanup = assignRef(ref, node);
+      if (cleanup) {
+        cleanupMap.set(ref, cleanup);
+      }
+    });
+    if (cleanupMap.size > 0) {
+      return () => {
+        refs.forEach((ref) => {
+          const cleanup = cleanupMap.get(ref);
+          if (cleanup && typeof cleanup === "function") {
+            cleanup();
+          } else {
+            assignRef(ref, null);
+          }
+        });
+        cleanupMap.clear();
+      };
+    }
+  };
+}
+function useMergedRef(...refs) {
+  return useCallback(mergeRefs(...refs), refs);
+}
+
 const errorClasses$4 = 'tw:border-sq-danger';
 const borderColorClasses$4 = [
     'tw:border-sq-disabled-gray',
@@ -4913,13 +4948,9 @@ const sizeClasses = {
 const TextField = React__default.forwardRef((props, ref) => {
     const { readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, id, name, size = 'sm', value, placeholder, extraClassNames, testId, type = 'text', inputGroup, step, showError, errorText, min, max, maxLength, minLength, required = false, autoComplete = 'off', inputWidth = undefined, inputHeight = undefined, autoFocus = false, ...tooltipProps } = props;
     const internalRef = useRef(null);
+    const mergedRef = useMergedRef(ref, internalRef);
     const [cursor, setCursor] = useState(null);
     const tooltipData = getQTipData(tooltipProps);
-    const setAllRefs = (receivedRef) => {
-        if (ref)
-            ref.current = receivedRef;
-        internalRef.current = receivedRef;
-    };
     useEffect(() => {
         if (autoFocus) {
             setTimeout(() => {
@@ -4965,7 +4996,7 @@ const TextField = React__default.forwardRef((props, ref) => {
         inputLenghtProp.maxLength = maxLength;
     if (minLength)
         inputLenghtProp.minLength = minLength;
-    return (jsxs(Fragment, { children: [jsx$1("input", { ref: setAllRefs, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsx$1("div", { className: "tw:text-sq-danger tw:text-xs tw:mt-1", children: errorText })] }));
+    return (jsxs(Fragment, { children: [jsx$1("input", { ref: mergedRef, "data-testid": testId, name: name, id: id, type: type, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, autoComplete: autoComplete, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, step: step, required: required, min: min, max: max, ...inputLenghtProp, ...inputProp, ...tooltipData }), errorText && showError && jsx$1("div", { className: "tw:text-sq-danger tw:text-xs tw:mt-1", children: errorText })] }));
 });
 
 const alignment = 'tw:flex';
@@ -5010,6 +5041,7 @@ const borderColorClasses$3 = [
 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}`;
     const textareaRef = useRef(null);
+    const mergedRef = useMergedRef(ref, textareaRef);
     // Handle selection change events
     useEffect(() => {
         if (!onSelectionChange || !textareaRef.current) {
@@ -5030,15 +5062,7 @@ const TextArea = React__default.forwardRef(({ readonly = false, disabled = false
             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 }));
+    return (jsx$1("textarea", { ref: mergedRef, "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 }));
 });
 
 /**
@@ -29406,5 +29430,5 @@ const svgIconTypes = [...iconTypes, 'default'];
 
 const toolbarButtonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
 
-export { Accordion, Alert, Button, ButtonGroup, ButtonWithDropdown, ButtonWithPopover, Carousel, Checkbox, Collapse, DEFAULT_TOOL_TIP_DELAY, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectCompoents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
+export { Accordion, Alert, Button, ButtonGroup, ButtonWithDropdown, ButtonWithPopover, Carousel, Checkbox, Collapse, DEFAULT_TOOL_TIP_DELAY, Icon, InputGroup, Modal, ProgressBar, QTip, SeeqActionDropdown, Select, components as SelectComponents, Slider, Tabs, TextArea, TextField, ToolbarButton, Tooltip, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
 //# sourceMappingURL=index.esm.js.map