@seeqdev/qomponents 0.0.66 → 0.0.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -15023,7 +15023,7 @@ const disabledClasses$1 = ['tw-opacity-50', 'tw-cursor-not-allowed'].join(' ');
15023
15023
  const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassNames, extraPopoverClassNames, containerTestId, onInteractOutside, onPointerDownOutside, disabled = false, align = 'end', alignOffset = -35, placement = 'bottom', placementOffset = 2, isHoverEnabled = false, hoverOpenDelay = 300, onOpenChange, isOpen, isCloseOnContentClick = false, setFocusOnTriggerOnClose = true, ...tooltipProps }) => {
15024
15024
  const tooltipData = getQTipData(tooltipProps);
15025
15025
  let timeout;
15026
- const [isHoveredOpen, setIsHoveredOpen] = React__namespace.useState();
15026
+ const [isHoveredOpen, setIsHoveredOpen] = React__namespace.useState(false);
15027
15027
  const onHoverStart = () => {
15028
15028
  if (isHoverEnabled) {
15029
15029
  timeout = setTimeout(() => {
@@ -15041,16 +15041,19 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
15041
15041
  }
15042
15042
  };
15043
15043
  React__namespace.useEffect(() => () => timeout && clearTimeout(timeout), []);
15044
- return (React__namespace.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { open: isOpen || isHoveredOpen, defaultOpen: false, onOpenChange: onOpenChange },
15045
- React__namespace.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none`, disabled: disabled },
15046
- React__namespace.createElement("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center tw-justify-center focus-visible:tw-outline-none tw-outline-none ${disabled ? disabledClasses$1 : ''} ${extraTriggerClassNames || ''}` }, trigger)),
15047
- React__namespace.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none" },
15048
- React__namespace.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1000] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
15044
+ const renderPopover = (popoverOpenState) => {
15045
+ return (React__namespace.createElement($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { open: popoverOpenState, defaultOpen: false, onOpenChange: onOpenChange },
15046
+ React__namespace.createElement($cb5cc270b50c6fcd$export$41fb9f06171c75f4, { id: id, className: `tw-border-none`, disabled: disabled },
15047
+ React__namespace.createElement("div", { ...tooltipData, onMouseOver: onHoverStart, onMouseOut: onHoverEnd, className: `tw-bg-transparent tw-flex tw-flex-col tw-items-center tw-justify-center focus-visible:tw-outline-none tw-outline-none ${disabled ? disabledClasses$1 : ''} ${extraTriggerClassNames || ''}` }, trigger)),
15048
+ React__namespace.createElement($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw-outline-none tw-outline-none" },
15049
+ React__namespace.createElement("div", { "data-testid": containerTestId, className: `${bgStyles$1} ${borderStyles$1} tw-relative tw-z-[1000] tw-min-w-6 focus-visible:tw-outline-none tw-outline-none data-[state=open]:tw-animate-in data-[state=closed]:tw-animate-out
15049
15050
  data-[side=top]:tw-animate-slideDownAndFade data-[side=right]:tw-animate-slideLeftAndFade data-[side=bottom]:tw-animate-slideUpAndFade data-[side=left]:tw-animate-slideRightAndFade tw-text-sq-text-color
15050
15051
  ${extraPopoverClassNames || ''}` },
15051
- hasArrow && (React__namespace.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
15052
- React__namespace.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }))),
15053
- children))));
15052
+ hasArrow && (React__namespace.createElement($cb5cc270b50c6fcd$export$21b07c8f274aebd5, { asChild: true },
15053
+ React__namespace.createElement("div", { className: " tw-fill-transparent tw-bg-white tw-w-[15px] tw-h-[15px] tw-mt-[-7px] tw-rotate-45 dark:tw-bg-sq-dark-background tw-border-b tw-border-r tw-border-sq-disabled-gray dark:tw-border-gray-500" }))),
15054
+ children))));
15055
+ };
15056
+ return isHoverEnabled ? renderPopover(isHoveredOpen) : renderPopover(isOpen);
15054
15057
  };
15055
15058
 
15056
15059
  const $6cc32821e9371a1c$var$SELECTION_KEYS = [