@seeqdev/qomponents 0.0.158 → 0.0.159

package/dist/index.esm.js

@@ -1312,7 +1312,7 @@ const arrow$4 = options => ({
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip$3 = function (options) {
+const flip$4 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -1598,7 +1598,7 @@ const offset$2 = function (options) {
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift$2 = function (options) {
+const shift$3 = function (options) {
   if (options === void 0) {
     options = {};
   }
@@ -2652,7 +2652,7 @@ const offset$1 = offset$2;
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift$1 = shift$2;
+const shift$2 = shift$3;
 
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
@@ -2660,7 +2660,7 @@ const shift$1 = shift$2;
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip$2 = flip$3;
+const flip$3 = flip$4;
 
 /**
  * Provides data that allows you to change the size of the floating element —
@@ -2999,8 +2999,8 @@ const offset = (options, deps) => ({
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift = (options, deps) => ({
-  ...shift$1(options),
+const shift$1 = (options, deps) => ({
+  ...shift$2(options),
   options: [options, deps]
 });
 
@@ -3018,8 +3018,8 @@ const limitShift = (options, deps) => ({
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip$1 = (options, deps) => ({
-  ...flip$2(options),
+const flip$2 = (options, deps) => ({
+  ...flip$3(options),
   options: [options, deps]
 });
 
@@ -3186,13 +3186,13 @@ var PopperContent = React.forwardRef(
       },
       middleware: [
         offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
-        avoidCollisions && shift({
+        avoidCollisions && shift$1({
           mainAxis: true,
           crossAxis: false,
           limiter: sticky === "partial" ? limitShift() : void 0,
           ...detectOverflowOptions
         }),
-        avoidCollisions && flip$1({ ...detectOverflowOptions }),
+        avoidCollisions && flip$2({ ...detectOverflowOptions }),
         size({
           ...detectOverflowOptions,
           apply: ({ elements, rects, availableWidth, availableHeight }) => {
@@ -6880,6 +6880,21 @@ function autoUpdate(reference, floating, update, options) {
   };
 }
 
+/**
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift = shift$3;
+
+/**
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
+ * @see https://floating-ui.com/docs/flip
+ */
+const flip$1 = flip$4;
+
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
@@ -7401,8 +7416,8 @@ const QTip = () => {
                 if (tooltipRef.current && tooltipTarget.current) {
                     computePosition(tooltipTarget.current, tooltipRef.current, {
                         placement: position,
-                        middleware: [offset$2(10), arrow({ element: tooltipArrowRef.current })],
-                    }).then(({ x, y, middlewareData }) => {
+                        middleware: [offset$2(10), flip$1(), shift({ padding: 8 }), arrow({ element: tooltipArrowRef.current })],
+                    }).then(({ x, y, middlewareData, placement: finalPlacement }) => {
                         Object.assign(tooltipRef.current?.style, {
                             left: `${x}px`,
                             top: `${y}px`,
@@ -7412,7 +7427,7 @@ const QTip = () => {
                             const arrowWidth = tooltipArrowRef.current?.offsetHeight / 2;
                             const tooltipHeight = tooltipRef.current?.offsetHeight;
                             const tooltipWidth = tooltipRef.current?.offsetWidth;
-                            const style = getArrowStyle(position, x || y, arrowWidth, tooltipHeight, tooltipWidth);
+                            const style = getArrowStyle(finalPlacement, x || y, arrowWidth, tooltipHeight, tooltipWidth);
                             Object.assign(tooltipArrowRef.current.style, style);
                         }
                         setShow(true);
@@ -7426,7 +7441,7 @@ const QTip = () => {
                 : positionTooltip();
         }
     };
-    return (jsx$1(Fragment, { children: jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw-absolute tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white tw-z-[9999] fade-in ' +
+    return (jsx$1(Fragment, { children: jsxs("div", { onMouseEnter: () => setOverTooltip(true), onMouseLeave: () => setOverTooltip(false), "data-testid": tooltipTestId, ref: tooltipRef, className: 'tw-absolute tw-rounded tw-bg-black tw-max-w-96 tw-p-2 tw-text-xs tw-text-white tw-z-[9999] fade-in ' +
                 (show ? 'tw-visible' : 'tw-invisible tw-pointer-events-none'), children: [html ? jsx$1(HTMLTip, { text: tooltipText }) : tooltipText, jsx$1("div", { className: "tw-absolute tw-w-[10px] tw-h-[10px] tw-rotate-45 tw-bg-black", ref: tooltipArrowRef })] }) }));
 };