@seeqdev/qomponents 0.0.29 → 0.0.31

package/dist/index.js

@@ -50,6 +50,8 @@ const browserName = browserId && browserId.split(' ', 2)[0];
 browserId && parseInt(browserId.split(' ', 2)[1], 10);
 const browserIsFirefox = browserId && browserName === 'Firefox';
 
+const DEFAULT_TOOL_TIP_DELAY = 1000;
+
 const colorClassesThemeLight = {
     'theme': 'tw-text-sq-color-dark',
     'white': 'tw-text-white',
@@ -85,7 +87,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, tooltip, tooltipPlacement, number, isHtmlTooltip = false, tooltipTestId, tooltipDelay = 0, }) => {
+const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, color, testId, customId, tooltip, tooltipPlacement, number, isHtmlTooltip = false, tooltipTestId, tooltipDelay = DEFAULT_TOOL_TIP_DELAY, }) => {
     if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
         const errorMessage = color === undefined || color === ''
             ? 'Icon with type="color" must have prop color specified.'
@@ -255,9 +257,10 @@ const TextField = React.forwardRef((props, ref) => {
 const alignment = 'tw-flex';
 const labelClasses = 'tw-ml-1.5 tw-text-sm tw--mt-0.5';
 const baseClasses$2 = 'tw-border-1 tw-h-3.5 tw-w-3.5 focus:tw-ring-0 focus:tw-ring-offset-0 tw-outline-none focus:tw-outline-none' +
-    '  dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:checked:tw-bg-sq-dark-text' +
-    '  checked:tw-text-sq-text-color' +
-    ' disabled:tw-text-sq-fairly-dark-gray';
+    '  dark:tw-bg-sq-dark-background dark:tw-border-sq-dark-text dark:hover:tw-bg-sq-dark-background' +
+    ' checked:tw-text-white checked:tw-border-sq-text-color checked:hover:tw-border-sq-color-dark' +
+    ' checked:active:tw-border-sq-color-dark checked:focus:tw-border-sq-color-dark disabled:tw-border-sq-disabled-gray' +
+    ' dark:disabled:tw-border-sq-fairly-dark-gray dark:checked:focus:tw-bg-sq-dark-background';
 const checkboxClasses = `tw-form-checkbox tw-rounded ${baseClasses$2}`;
 const radioClasses = `tw-form-radio ${baseClasses$2}`;
 /**
@@ -294,8 +297,6 @@ const TextArea = ({ readonly = false, onChange, onKeyUp, id, name, rows = 3, col
     return (React.createElement("textarea", { "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: readonly, onChange: onChange, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autofocus }));
 };
 
-const DEFAULT_TOOL_TIP_DELAY = 1000;
-
 /**
  * @deprecated
  * Note: Tooltip has been replaced by QTip - a singleton JS tooltip that behaves well even with overflow settings :)
@@ -3121,7 +3122,8 @@ const HTMLTip = ({ text }) => {
  *    'data-qtip-placement': one of TooltipPosition (top, bottom, right, or left)
  *    'data-qtip-is-html': set this to true if you provided a text that contains HTML,
  *    'data-qtip-delay': this can be used to delay the showing of the tooltip. this should be a number representing
- *    the # of milliseconds you want to delay the tooltip for.
+ *    the # of milliseconds you want to delay the tooltip for. If no delay is provided the DEFAULT_TOOL_TIP_DELAY is
+ *    applied!
  *    'data-qtip-testid': use this attribute to provide a value for a data-testid of your tooltip; this is useful
  *    for tests
  *
@@ -3176,7 +3178,7 @@ const QTip = () => {
             tooltipTarget.current = e.target?.parentElement;
         }
         if (text) {
-            const delay = parseInt(dataset?.qtipDelay ?? '0');
+            const delay = parseInt(dataset?.qtipDelay ?? DEFAULT_TOOL_TIP_DELAY + '');
             ttTimeout.current = setTimeout(() => makeTooltip(text, dataset?.qtipPlacement, dataset?.qtipIsHtml === 'true', dataset?.qtipTestid, delay), delay);
         }
     };