@cypress-design/react-tooltip 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @cypress-design/react-tooltip
 
+## 0.2.0
+
+### Minor Changes
+
+- [#53](https://github.com/cypress-io/cypress-design/pull/53) [`a9a616b`](https://github.com/cypress-io/cypress-design/commit/a9a616bc4684252fcd71e4a82d2141bdfbea32bc) Thanks [@elevatebart](https://github.com/elevatebart)! - - add a default font color when light and dark mode are used
+  - add disabled prop to tooltip
+
+* [#51](https://github.com/cypress-io/cypress-design/pull/51) [`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e) Thanks [@elevatebart](https://github.com/elevatebart)! - in the build asset, add a comment containing all used windicss classes in the component
+
 ## 0.1.0
 
 ### Minor Changes

package/Tooltip.rootstory.tsx

@@ -5,10 +5,12 @@ import Tooltip from './Tooltip'
 export default ({
   color = 'light',
   placement,
+  disabled,
   tabIndex,
 }: {
   color?: 'light' | 'dark'
   placement?: Placement
+  disabled?: boolean
   tabIndex?: number
 } = {}) => (
   <div className="center flex flex-col items-center gap-20">
@@ -18,6 +20,7 @@ export default ({
       color={color}
       placement={placement}
       tabIndex={tabIndex}
+      disabled={disabled}
     >
       <div>Hover Me (dynamic: {placement?.toString()})</div>
     </Tooltip>
@@ -29,6 +32,7 @@ export default ({
           key={placement}
           color={color}
           tabIndex={tabIndex}
+          disabled={disabled}
           popper={
             <div className="bg-jade-200 text-gray-800 p-4">
               Popover ({placement})

package/Tooltip.tsx

@@ -32,6 +32,11 @@ export interface TooltipProps {
    * The content of the tooltip.
    */
   popper?: React.ReactNode
+  /**
+   * Disable the tooltip.
+   * This hides the popper and makes the tooltip inactive.
+   */
+  disabled?: boolean
 }
 
 const ROTATE_MAP = {
@@ -43,7 +48,15 @@ const ROTATE_MAP = {
 
 export const Tooltip: React.FC<
   TooltipProps & React.HTMLProps<HTMLDivElement>
-> = ({ placement, color = 'light', className, children, popper, ...rest }) => {
+> = ({
+  placement,
+  color = 'light',
+  className,
+  children,
+  popper,
+  disabled,
+  ...rest
+}) => {
   const arrowRef = React.useRef(null)
   const [open, setOpen] = React.useState(false)
 
@@ -80,13 +93,18 @@ export const Tooltip: React.FC<
   const { getReferenceProps, getFloatingProps } = useInteractions([
     useHover(context, {
       handleClose: safePolygon(),
+      enabled: !disabled,
+    }),
+    useFocus(context, {
+      enabled: !disabled,
     }),
-    useFocus(context),
     useRole(context, { role: 'tooltip' }),
     useDismiss(context),
   ])
 
-  const placementSide = calculatedPlacement.split('-')[0]
+  const placementSide = calculatedPlacement.split(
+    '-'
+  )[0] as keyof typeof ROTATE_MAP
   const arrowRotate = ROTATE_MAP[placementSide]
 
   let arrowXRule = 'left',
@@ -114,7 +132,7 @@ export const Tooltip: React.FC<
         {children}
       </div>
       <FloatingPortal>
-        {open && (
+        {open && !disabled && (
           <div
             {...getFloatingProps({
               ref: floating,

package/dist/Tooltip.d.ts

@@ -16,6 +16,11 @@ export interface TooltipProps {
      * The content of the tooltip.
      */
     popper?: React.ReactNode;
+    /**
+     * Disable the tooltip.
+     * This hides the popper and makes the tooltip inactive.
+     */
+    disabled?: boolean;
 }
 export declare const Tooltip: React.FC<TooltipProps & React.HTMLProps<HTMLDivElement>>;
 export default 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;CACzB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAiI/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;CACnB;AASD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAC5B,YAAY,GAAG,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CA8I/C,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/index.es.js

@@ -30316,7 +30316,7 @@ var ROTATE_MAP = {
 };
 var Tooltip = function (_a) {
     var _b;
-    var placement = _a.placement, _c = _a.color, color = _c === void 0 ? 'light' : _c, className = _a.className, children = _a.children, popper = _a.popper, rest = __rest(_a, ["placement", "color", "className", "children", "popper"]);
+    var placement = _a.placement, _c = _a.color, color = _c === void 0 ? 'light' : _c, className = _a.className, children = _a.children, popper = _a.popper, disabled = _a.disabled, rest = __rest(_a, ["placement", "color", "className", "children", "popper", "disabled"]);
     var arrowRef = React.useRef(null);
     var _d = React.useState(false), open = _d[0], setOpen = _d[1];
     var container = React.useState(function () {
@@ -30339,9 +30339,12 @@ var Tooltip = function (_a) {
     }), 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;
     var _h = useInteractions([
         useHover(context, {
-            handleClose: safePolygon()
+            handleClose: safePolygon(),
+            enabled: !disabled
+        }),
+        useFocus(context, {
+            enabled: !disabled
         }),
-        useFocus(context),
         useRole(context, { role: 'tooltip' }),
         useDismiss(context),
     ]), getReferenceProps = _h.getReferenceProps, getFloatingProps = _h.getFloatingProps;
@@ -30362,7 +30365,7 @@ var Tooltip = function (_a) {
     }
     return (React.createElement(React.Fragment, null,
         React.createElement("div", __assign({}, getReferenceProps(), { ref: reference, className: className }, rest), children),
-        React.createElement(FloatingPortal, null, open && (React.createElement("div", __assign({}, getFloatingProps({
+        React.createElement(FloatingPortal, null, open && !disabled && (React.createElement("div", __assign({}, getFloatingProps({
             ref: floating,
             style: {
                 position: strategy,
@@ -30395,4 +30398,6 @@ var Tooltip = function (_a) {
 };
 
 export { Tooltip as default };
+/* <windicss-keep class="container absolute stroke-gray-800 fill-gray-900 stroke-gray-100 fill-white rounded shadow border p-8px text-16px leading-24px min-w-160px text-center bg-gray-900 shadow-gray-800 border-gray-800 bg-white shadow-gray-100 border-gray-100 invisible"> */
+
 //# sourceMappingURL=index.es.js.map