@cypress-design/react-tooltip 0.0.1 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @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
+
+- [#44](https://github.com/cypress-io/cypress-design/pull/44) [`2fdaf6b`](https://github.com/cypress-io/cypress-design/commit/2fdaf6be6f81a2a851761258347ed213577c5b26) Thanks [@elevatebart](https://github.com/elevatebart)! - Add missing descriptions of props in button, tooltip, checkbox
+
+## 0.0.2
+
+### Patch Changes
+
+- [#39](https://github.com/cypress-io/cypress-design/pull/39) [`1b383f3`](https://github.com/cypress-io/cypress-design/commit/1b383f3d149948bf2cc062d3baa17d5ce032f07e) Thanks [@elevatebart](https://github.com/elevatebart)! - fix file path of sourcemaps
+
 ## 0.0.1
 
 ### Patch 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

@@ -17,12 +17,26 @@ import {
 } from '@floating-ui/react-dom-interactions'
 
 export interface TooltipProps {
+  /**
+   * Where the tooltip should be placed relative to the target.
+   */
   placement?: Placement
+  /**
+   * background color of the tooltip.
+   */
   color?: 'light' | 'dark'
   className?: string
   tabIndex?: number | string
   children?: React.ReactNode
+  /**
+   * 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 = {
@@ -34,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)
 
@@ -71,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',
@@ -105,7 +132,7 @@ export const Tooltip: React.FC<
         {children}
       </div>
       <FloatingPortal>
-        {open && (
+        {open && !disabled && (
           <div
             {...getFloatingProps({
               ref: floating,

package/dist/Tooltip.d.ts

@@ -1,12 +1,26 @@
 import * as React from 'react';
 import { Placement } from '@floating-ui/react-dom-interactions';
 export interface TooltipProps {
+    /**
+     * Where the tooltip should be placed relative to the target.
+     */
     placement?: Placement;
+    /**
+     * background color of the tooltip.
+     */
     color?: 'light' | 'dark';
     className?: string;
     tabIndex?: number | string;
     children?: React.ReactNode;
+    /**
+     * 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,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,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,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"}