@cypress-design/react-tooltip 0.6.1 → 0.6.3

package/.turbo/turbo-build.log

@@ -2,5 +2,5 @@ $ yarn build:module && yarn build:types
 $ rollup -c ./rollup.config.mjs
 
 ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
-created ./dist/index.umd.js, ./dist/index.es.mjs in 39.2s
+created ./dist/index.umd.js, ./dist/index.es.mjs in 30.4s
 $ tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cypress-design/react-tooltip
 
+## 0.6.3
+
+### Patch Changes
+
+- [#259](https://github.com/cypress-io/cypress-design/pull/259) [`fdd8839`](https://github.com/cypress-io/cypress-design/commit/fdd883952476a852973adc671dadc817883251ec) Thanks [@elevatebart](https://github.com/elevatebart)! - when tooltip overflows, shift it back
+
+## 0.6.2
+
+### Patch Changes
+
+- [#245](https://github.com/cypress-io/cypress-design/pull/245) [`d52d023`](https://github.com/cypress-io/cypress-design/commit/d52d02301bb851d514661a8c258d0c4ae5baf171) Thanks [@elevatebart](https://github.com/elevatebart)! - use tailwind to rollup classes in the final package
+
 ## 0.6.1
 
 ### Patch Changes

package/Tooltip.tsx

@@ -5,6 +5,7 @@ import {
   offset,
   flip,
   arrow,
+  shift,
   autoUpdate,
   useFloating,
   useInteractions,
@@ -26,7 +27,6 @@ export interface TooltipProps {
    */
   color?: 'light' | 'dark'
   className?: string
-  tabIndex?: number | string
   children?: React.ReactNode
   /**
    * The content of the tooltip.
@@ -105,6 +105,7 @@ export const Tooltip: React.FC<
         : flip(),
       offset(interactive ? 0 : 16),
       arrow({ element: arrowRef, padding: 24 }),
+      shift({ padding: 16 }),
     ],
     whileElementsMounted: autoUpdate,
   })

package/TooltipReact.cy.tsx

@@ -2,13 +2,100 @@
 
 import * as React from 'react'
 import { mount } from 'cypress/react18'
-import TooltipStory from './Tooltip.rootstory'
+import { Placement } from '@floating-ui/react-dom-interactions'
 import assertions from '../assertions'
+import Tooltip from './Tooltip'
+
+const TooltipStoryMulti = ({
+  color = 'light',
+  placement,
+  disabled,
+  tabindex = 1,
+}: {
+  color?: 'light' | 'dark'
+  placement?: Placement
+  disabled?: boolean
+  tabindex?: number
+} = {}) => (
+  <div className="flex flex-col items-center center gap-20">
+    <Tooltip
+      className="w-1/2 p-4 bg-red-200"
+      popper={<div className="p-4 text-gray-800 bg-jade-200">PopovDyn</div>}
+      color={color}
+      placement={placement}
+      tabIndex={tabindex}
+      disabled={disabled}
+    >
+      <div>Hover Me (dynamic: {placement?.toString()})</div>
+    </Tooltip>
+    <Tooltip
+      className="w-1/2 p-4 bg-red-200"
+      popper={
+        <div className="h-[200px] flex items-center justify-center">Popov</div>
+      }
+      color={color}
+      placement="top"
+      forcePlacement
+    >
+      <div>Force Placement to the top</div>
+    </Tooltip>
+    <Tooltip
+      className="w-1/2 p-4 bg-red-200"
+      popper={<div>PopovInt</div>}
+      color={color}
+      placement={placement}
+      interactive
+    >
+      <div>Interactive {placement?.toString()}</div>
+    </Tooltip>
+    {(['top', 'right', 'bottom', 'left', 'top-start'] as const).map(
+      (placement) => (
+        <Tooltip
+          className="w-1/2 p-4 bg-indigo-200"
+          placement={placement}
+          key={placement}
+          color={color}
+          tabIndex={tabindex}
+          disabled={disabled}
+          popper={
+            <div className="p-4 text-gray-800 bg-jade-200">
+              Popover ({placement})
+            </div>
+          }
+        >
+          <div>Hover Me ({placement})</div>
+        </Tooltip>
+      )
+    )}
+  </div>
+)
 
 describe('Tooltip', { viewportHeight: 800, viewportWidth: 800 }, () => {
-  function mountStory(options: Parameters<typeof TooltipStory>[0] = {}) {
-    mount(<TooltipStory {...options} tabIndex={1} />)
+  function mountStory(
+    options: { single?: boolean } & Parameters<typeof TooltipStoryMulti>[0] = {}
+  ) {
+    const { single, tabindex = 1, ...rest } = options
+    if (single) {
+      mount(
+        <Tooltip
+          {...rest}
+          tabIndex={tabindex}
+          popper={
+            <div className="w-[300px]">
+              popit: Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Quisquam, voluptatum.
+            </div>
+          }
+          className="m-4 p-4 bg-red-300 w-[150px]"
+        >
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+          voluptatum.
+        </Tooltip>
+      )
+    } else {
+      mount(<TooltipStoryMulti {...rest} tabindex={tabindex} />)
+    }
   }
 
-  assertions(mountStory)
+  assertions(mountStory, 'react')
 })

package/dist/Tooltip.d.ts

@@ -10,7 +10,6 @@ export interface TooltipProps {
      */
     color?: 'light' | 'dark';
     className?: string;
-    tabIndex?: number | string;
     children?: React.ReactNode;
     /**
      * The content of the tooltip.

package/dist/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"./","sources":["Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAaV,MAAM,qCAAqC,CAAA;AAE5C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAiL/C,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"./","sources":["Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAcV,MAAM,qCAAqC,CAAA;AAE5C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAkL/C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/index.es.mjs

@@ -16,6 +16,8 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
+/* global Reflect, Promise */
+
 
 var __assign = function() {
     __assign = Object.assign || function __assign(t) {
@@ -628,6 +630,88 @@ const offset = function (value) {
   };
 };
 
+function getCrossAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+
+/**
+ * Shifts the floating element in order to keep it in view when it will overflow
+ * a clipping boundary.
+ * @see https://floating-ui.com/docs/shift
+ */
+const shift = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  return {
+    name: 'shift',
+    options,
+
+    async fn(middlewareArguments) {
+      const {
+        x,
+        y,
+        placement
+      } = middlewareArguments;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = false,
+        limiter = {
+          fn: _ref => {
+            let {
+              x,
+              y
+            } = _ref;
+            return {
+              x,
+              y
+            };
+          }
+        },
+        ...detectOverflowOptions
+      } = options;
+      const coords = {
+        x,
+        y
+      };
+      const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
+      const mainAxis = getMainAxisFromPlacement(getSide(placement));
+      const crossAxis = getCrossAxis(mainAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+
+      if (checkMainAxis) {
+        const minSide = mainAxis === 'y' ? 'top' : 'left';
+        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
+        const min = mainAxisCoord + overflow[minSide];
+        const max = mainAxisCoord - overflow[maxSide];
+        mainAxisCoord = within(min, mainAxisCoord, max);
+      }
+
+      if (checkCrossAxis) {
+        const minSide = crossAxis === 'y' ? 'top' : 'left';
+        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
+        const min = crossAxisCoord + overflow[minSide];
+        const max = crossAxisCoord - overflow[maxSide];
+        crossAxisCoord = within(min, crossAxisCoord, max);
+      }
+
+      const limitedCoords = limiter.fn({ ...middlewareArguments,
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      });
+      return { ...limitedCoords,
+        data: {
+          x: limitedCoords.x - x,
+          y: limitedCoords.y - y
+        }
+      };
+    }
+
+  };
+};
+
 function isWindow(value) {
   return value && value.document && value.location && value.alert && value.setInterval;
 }
@@ -33460,6 +33544,7 @@ var Tooltip = function (_a) {
                 : flip(),
             offset(interactive ? 0 : 16),
             arrow({ element: arrowRef, padding: 24 }),
+            shift({ padding: 16 }),
         ],
         whileElementsMounted: autoUpdate,
     }), x = _e.x, y = _e.y, reference = _e.reference, floating = _e.floating, strategy = _e.strategy, calculatedPlacement = _e.placement, context = _e.context, _f = _e.middlewareData.arrow, _g = _f === void 0 ? {} : _f, arrowX = _g.x, arrowY = _g.y;
@@ -33536,4 +33621,4 @@ var Tooltip = function (_a) {
 export { Tooltip as default };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="container stroke-none fill-white text-gray-900 shadow-gray-100 border-transparent bg-white fill-gray-900 text-white shadow-gray-800 bg-gray-900 rounded shadow border invisible absolute z-10 text-[16px] leading-[24px] min-w-[160px] text-center p-[8px] relative z-20"> */
+/* <wind-keep class="container stroke-none fill-white block text-gray-900 shadow-gray-100 border-transparent bg-white fill-gray-900 text-white shadow-gray-800 bg-gray-900 rounded shadow border invisible absolute z-10 transform filter text-[16px] leading-[24px] min-w-[160px] text-center p-[8px] relative z-20 drop-shadow"> */