@seeqdev/qomponents 0.0.63 → 0.0.64

package/dist/Tooltip/qTip.utilities.d.ts

@@ -0,0 +1,3 @@
+import { QTipDataAttributes } from './QTip.types';
+import { TooltipComponentProps } from './Tooltip.types';
+export declare const getQTipData: ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId, tooltipDelay, }: TooltipComponentProps) => QTipDataAttributes | undefined;

package/dist/Tooltip/qTip.utilities.js

@@ -0,0 +1,11 @@
+import { DEFAULT_TOOL_TIP_DELAY } from './Tooltip.types';
+export const getQTipData = ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId, tooltipDelay = DEFAULT_TOOL_TIP_DELAY, }) => tooltip
+    ? {
+        'data-qtip-text': tooltip,
+        'data-qtip-placement': tooltipPlacement,
+        'data-qtip-is-html': isHtmlTooltip,
+        'data-qtip-testid': tooltipTestId,
+        'data-qtip-delay': tooltipDelay,
+    }
+    : undefined;
+//# sourceMappingURL=qTip.utilities.js.map

package/dist/Tooltip/qTip.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qTip.utilities.js","sourceRoot":"","sources":["../../src/Tooltip/qTip.utilities.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAyB,MAAM,iBAAiB,CAAC;AAEhF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,aAAa,EACb,YAAY,GAAG,sBAAsB,GACf,EAAkC,EAAE,CAC1D,OAAO;IACL,CAAC,CAAC;QACE,gBAAgB,EAAE,OAAO;QACzB,qBAAqB,EAAE,gBAAgB;QACvC,mBAAmB,EAAE,aAAa;QAClC,kBAAkB,EAAE,aAAa;QACjC,iBAAiB,EAAE,YAAY;KAChC;IACH,CAAC,CAAC,SAAS,CAAC"}

package/dist/index.esm.js

@@ -33,6 +33,16 @@ const browserIsFirefox = browserId && browserName === 'Firefox';
 
 const DEFAULT_TOOL_TIP_DELAY = 500;
 
+const getQTipData = ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId, tooltipDelay = DEFAULT_TOOL_TIP_DELAY, }) => tooltip
+    ? {
+        'data-qtip-text': tooltip,
+        'data-qtip-placement': tooltipPlacement,
+        'data-qtip-is-html': isHtmlTooltip,
+        'data-qtip-testid': tooltipTestId,
+        'data-qtip-delay': tooltipDelay,
+    }
+    : undefined;
+
 const colorClassesThemeLight = {
     'theme': 'tw-text-sq-color-dark',
     'white': 'tw-text-white',
@@ -68,7 +78,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 = DEFAULT_TOOL_TIP_DELAY, }) => {
+const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, 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.'
@@ -80,15 +90,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
     const style = type === 'color' && color ? { color } : {};
     const appliedClassNames = `${iconPrefixString} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
   ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
-    const tooltipData = tooltip
-        ? {
-            'data-qtip-text': tooltip,
-            'data-qtip-placement': tooltipPlacement,
-            'data-qtip-is-html': isHtmlTooltip,
-            'data-qtip-testid': tooltipTestId,
-            'data-qtip-delay': tooltipDelay,
-        }
-        : undefined;
+    const tooltipData = getQTipData(tooltipProps);
     return (React__default.createElement("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
 };
 
@@ -4689,10 +4691,11 @@ const radioClasses = `tw-form-radio ${baseClasses$2}`;
  * Checkbox and Radio Box Component.
  */
 const Checkbox = (props) => {
-    const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, } = props;
+    const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, ...tooltipProps } = props;
     const assignedId = id ?? 'checkbox_' + Math.random();
+    const tooltipData = getQTipData(tooltipProps);
     return (React__default.createElement("span", { className: `${alignment} ${extraClassNames}` },
-        React__default.createElement("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown }),
+        React__default.createElement("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw-cursor-not-allowed' : 'tw-cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown, ...tooltipData }),
         React__default.createElement("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
                 ? 'tw-cursor-not-allowed dark:tw-text-sq-fairly-dark-gray tw-text-sq-fairly-dark-gray'
                 : 'tw-cursor-pointer tw-text-sq-text-color dark:tw-text-sq-dark-text'}` }, label)));
@@ -15000,17 +15003,8 @@ const borderStyles$1 = [
     'dark:tw-border-gray-700',
 ].join(' ');
 const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const ButtonWithPopover = ({ children, trigger, tooltipText, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', alignOffset = -5, placement = 'bottom', placementOffset = 2, onOpenChange, isOpen, isHtmlTooltip = false, isCloseOnContentClick = false, setFocusOnTriggerOnClose = true, }) => {
-    let tooltipData = undefined;
-    if (tooltipText) {
-        tooltipData = {
-            'data-qtip-text': tooltipText,
-            'data-qtip-placement': tooltipPlacement,
-            'data-qtip-is-html': isHtmlTooltip,
-            'data-qtip-testid': tooltipTestId,
-            'data-qtip-delay': tooltipDelay ?? DEFAULT_TOOL_TIP_DELAY,
-        };
-    }
+const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, disabled = false, align = 'end', alignOffset = -5, placement = 'bottom', placementOffset = 2, onOpenChange, isOpen, isCloseOnContentClick = false, setFocusOnTriggerOnClose = true, ...tooltipProps }) => {
+    const tooltipData = getQTipData(tooltipProps);
     return (React.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { open: isOpen, defaultOpen: false, onOpenChange: onOpenChange },
         React.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none`, disabled: disabled },
             React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center tw-justify-center ${disabled ? disabledClasses$1 : ''} ${extraTriggerClassNames || ''}` }, trigger)),
@@ -15734,17 +15728,8 @@ const borderStyles = [
 ].join(' ');
 const bgStyles = ['tw-bg-sq-white', 'dark:tw-bg-sq-dark-background'].join(' ');
 const disabledClasses = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
-const ButtonWithDropdown = ({ dropdownItems, triggerIcon, tooltipText, id, extraClassNames, containerTestId, tooltipTestId, tooltipDelay, tooltipPlacement, disabled = false, align = 'end', placement = 'bottom', placementOffset = 2, alignOffset = -5, hasArrow = false, onOpenChange, isHtmlTooltip = false, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, }) => {
-    let tooltipData = undefined;
-    if (tooltipText) {
-        tooltipData = {
-            'data-qtip-text': tooltipText,
-            'data-qtip-placement': tooltipPlacement,
-            'data-qtip-is-html': isHtmlTooltip,
-            'data-qtip-testid': tooltipTestId,
-            'data-qtip-delay': tooltipDelay ?? DEFAULT_TOOL_TIP_DELAY,
-        };
-    }
+const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames, containerTestId, disabled = false, align = 'end', placement = 'bottom', placementOffset = 2, alignOffset = -5, hasArrow = false, onOpenChange, isOpen, setFocusOnTriggerOnClose = true, keepFocusInsideDropdown = true, ...tooltipProps }) => {
+    const tooltipData = getQTipData(tooltipProps);
     return (React.createElement($d08ef79370b62062$export$be92b6f5f03c0fe9, { defaultOpen: false, open: isOpen, onOpenChange: onOpenChange, modal: keepFocusInsideDropdown },
         React.createElement($d08ef79370b62062$export$41fb9f06171c75f4, { id: id, className: `tw-border-none focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none`, disabled: disabled },
             React.createElement("div", { ...tooltipData, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center focus-visible:tw-outline-none focus:tw-outline-none focus-within:tw-outline-none ${disabled ? disabledClasses : ''} ${extraClassNames || ''}` }, triggerIcon)),