@cypress-design/react-tooltip 0.3.3 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cypress-design/react-tooltip
 
+## 0.4.0
+
+### Minor Changes
+
+- [#151](https://github.com/cypress-io/cypress-design/pull/151) [`8b0e735`](https://github.com/cypress-io/cypress-design/commit/8b0e7356eb64a6b3583d3486dda8ecbb11c34cca) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: use clases compatible with both windi and tailwind
+
+## 0.3.4
+
+### Patch Changes
+
+- [#141](https://github.com/cypress-io/cypress-design/pull/141) [`3dd9145`](https://github.com/cypress-io/cypress-design/commit/3dd9145cfe74a9a24a13bbd5d15edb95391aa4d0) Thanks [@elevatebart](https://github.com/elevatebart)! - avoid ssr mismatches by not rendering the portal when disabled
+
 ## 0.3.3
 
 ### Patch Changes

package/Tooltip.rootstory.tsx

@@ -27,7 +27,7 @@ export default ({
     <Tooltip
       className="bg-red-200 p-4 w-1/2"
       popper={
-        <div className="h-200px flex items-center justify-center">Popov</div>
+        <div className="h-[200px] flex items-center justify-center">Popov</div>
       }
       color={color}
       placement="top"

package/Tooltip.tsx

@@ -171,63 +171,65 @@ export const Tooltip: React.FC<
       >
         {children}
       </div>
-      <FloatingPortal>
-        {open && !disabled && (
-          <div
-            {...getFloatingProps({
-              ref: floating,
-              style: {
-                position: strategy,
-                top: y ?? '',
-                left: x ?? '',
-                ...(interactive ? { padding: '16px' } : {}),
-              },
-            })}
-          >
+      {disabled ? null : (
+        <FloatingPortal>
+          {open && (
             <div
-              className={clsx('rounded shadow border', [
-                colors.background,
-                colors.block,
-                (!x || !y) && 'invisible',
-              ])}
+              {...getFloatingProps({
+                ref: floating,
+                style: {
+                  position: strategy,
+                  top: y ?? '',
+                  left: x ?? '',
+                  ...(interactive ? { padding: '16px' } : {}),
+                },
+              })}
             >
-              <svg
-                ref={arrowRef}
-                viewBox="0 0 48 24"
-                width="24"
-                height="12"
-                className={clsx('absolute z-10', colors.svg)}
-                style={{
-                  transform: `rotate(${arrowRotate}deg)`,
-                  filter:
-                    placementSide === 'bottom' || color === 'dark'
-                      ? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
-                      : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))',
-                  [arrowXRule]: `${arrowX ?? (interactive ? 0 : -16)}px`,
-                  [arrowYRule]: `${
-                    arrowY ? arrowY + 6 : interactive ? 6 : -10
-                  }px`,
-                }}
-                fill="none"
-              >
-                <rect x="0" y="0" width="48" height="4" strokeWidth="0" />
-                <path
-                  d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
-                  strokeWidth="2"
-                />
-              </svg>
               <div
-                className={clsx(
-                  'rounded text-16px leading-24px min-w-160px text-center p-8px relative z-20',
-                  colors.background
-                )}
+                className={clsx('rounded shadow border', [
+                  colors.background,
+                  colors.block,
+                  (!x || !y) && 'invisible',
+                ])}
               >
-                {popper}
+                <svg
+                  ref={arrowRef}
+                  viewBox="0 0 48 24"
+                  width="24"
+                  height="12"
+                  className={clsx('absolute z-10', colors.svg)}
+                  style={{
+                    transform: `rotate(${arrowRotate}deg)`,
+                    filter:
+                      placementSide === 'bottom' || color === 'dark'
+                        ? 'drop-shadow(0 1px 1px rgba(225, 227, 237, .3))'
+                        : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))',
+                    [arrowXRule]: `${arrowX ?? (interactive ? 0 : -16)}px`,
+                    [arrowYRule]: `${
+                      arrowY ? arrowY + 6 : interactive ? 6 : -10
+                    }px`,
+                  }}
+                  fill="none"
+                >
+                  <rect x="0" y="0" width="48" height="4" strokeWidth="0" />
+                  <path
+                    d="M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3"
+                    strokeWidth="2"
+                  />
+                </svg>
+                <div
+                  className={clsx(
+                    'rounded text-[16px] leading-[24px] min-w-[160px] text-center p-[8px] relative z-20',
+                    colors.background
+                  )}
+                >
+                  {popper}
+                </div>
               </div>
             </div>
-          </div>
-        )}
-      </FloatingPortal>
+          )}
+        </FloatingPortal>
+      )}
     </>
   )
 }

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,CA+K/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,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"}

package/dist/index.es.mjs

@@ -30393,7 +30393,7 @@ var Tooltip = function (_a) {
     var colors = getColors();
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({}, getReferenceProps(), { ref: reference, className: className }, rest), children),
-        React.createElement(FloatingPortal, null, open && !disabled && (React.createElement("div", __assign({}, getFloatingProps({
+        disabled ? null : (React.createElement(FloatingPortal, null, open && (React.createElement("div", __assign({}, getFloatingProps({
             ref: floating,
             style: __assign({ position: strategy, top: y !== null && y !== void 0 ? y : '', left: x !== null && x !== void 0 ? x : '' }, (interactive ? { padding: '16px' } : {}))
         })),
@@ -30413,10 +30413,10 @@ var Tooltip = function (_a) {
                         _b), fill: "none" },
                     React.createElement("rect", { x: "0", y: "0", width: "48", height: "4", strokeWidth: "0" }),
                     React.createElement("path", { d: "M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3", strokeWidth: "2" })),
-                React.createElement("div", { className: clsx('rounded text-16px leading-24px min-w-160px text-center p-8px relative z-20', colors.background) }, popper)))))));
+                React.createElement("div", { className: clsx('rounded text-[16px] leading-[24px] min-w-[160px] text-center p-[8px] relative z-20', colors.background) }, popper))))))));
 };
 
 export { Tooltip as default };
 
-/* <windicss-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"> */
+/* <windicss-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"> */
 //# sourceMappingURL=index.es.mjs.map