@progressiveui/react 1.22.0

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import Tooltip from "./Tooltip";
+import markdown from "./README.mdx";
+import { Menu } from "@progressiveui/icons-react";
+
+export default {
+  title: "Components/UI Elements/Tooltip",
+  component: Tooltip,
+  parameters: {
+    status: "released",
+    mdx: markdown,
+  },
+};
+
+export const TooltipDefault: Story = {
+  render: (args) => <Tooltip {...args}>Hover here to show tooltip</Tooltip>,
+  args: {
+    content: "Label text",
+    children: "This is a helper text",
+  },
+};
+
+export const Dark = (args) => (
+  <Tooltip
+    // options
+    {...args}
+    trigger="click"
+  >
+    <span>Click here to show tooltip</span>
+  </Tooltip>
+);
+
+Dark.args = {
+  content: "Label text",
+  children: "This is a helper text",
+  dark: true,
+};
+
+Dark.story = {
+  parameters: {
+    docs: {
+      storyDescription: `Use the \`dark\` style as an alternative for small tooltips`,
+    },
+  },
+};
+
+export const WithIcon = (args) => (
+  <Tooltip
+    {...args}
+    trigger="click"
+    placement={"bottom"}
+    createRefWrapper={true}
+    content="Label Text"
+  >
+    <Menu description="options" />
+  </Tooltip>
+);
+
+WithIcon.story = {
+  parameters: {
+    docs: {
+      storyDescription: `By using the \`createRefWrapper\` prop a html element around the trigger will be added. This is useful for components without \`forwardRef\` support.`,
+    },
+  },
+};
+
+WithIcon.args = {
+  content: "Label text",
+  children: "This is a helper text",
+};
+
+const withiconsourcecode = `
+import { Tooltip  } from "@progressiveui/react";
+import { iconOverflowMenu } from '@progressiveui/icons';
+
+<Tooltip
+  trigger="click"
+  placement={'bottom'}
+  createRefWrapper={true}
+  content="Label Text">
+  <Icon
+    description="options"
+    icon={iconOverflowMenu}
+    width="17px"
+    height="17px"
+  />
+</Tooltip>
+`;
+
+WithIcon.story = {
+  parameters: {
+    docs: {
+      storyDescription: `By using the \`createRefWrapper\` prop a html element around the trigger will be added. This is useful for components without \`forwardRef\` support.`,
+      source: {
+        code: withiconsourcecode,
+      },
+    },
+  },
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,235 @@
+import * as React from "react";
+import ReactDOM from "react-dom";
+import classNames from "classnames";
+import { usePopperTooltip } from "react-popper-tooltip";
+import { Placement } from "../../utils";
+
+import useSettings from "../../hooks/useSettings";
+
+export interface TooltipProps {
+  /**
+   * React nodes that trigger the tooltip on interaction.
+   */
+  children: React.ReactNode;
+
+  /**
+   * Content of the tooltip. Can be a React node or a function returning a React node.
+   * The function receives an object with functions to set visibility and handle visibility change.
+   */
+  content?:
+    | React.ReactNode
+    | ((options: {
+        setVisibility: React.Dispatch<React.SetStateAction<boolean>>;
+        visibilityChange: (state: boolean) => void;
+      }) => React.ReactNode);
+
+  /**
+   * @deprecated If true, applies a dark theme to the tooltip.
+   */
+  dark?: boolean;
+
+  /**
+   * If true, removes padding from the tooltip.
+   */
+  noPadding?: boolean;
+
+  /**
+   * Position of the tooltip relative to the child element. Uses the Placement type from utils.
+   */
+  placement?: Placement;
+
+  /**
+   * Trigger action for the tooltip - can be "hover" or "click".
+   */
+  trigger?: "hover" | "click";
+
+  /**
+   * Popper.js modifiers for advanced tooltip positioning.
+   */
+  modifiers?: [];
+
+  /**
+   * If true, renders the tooltip in a React portal.
+   */
+  usePortal?: boolean;
+
+  /**
+   * If true, wraps the child element with a span to attach a ref for the tooltip.
+   */
+  createRefWrapper?: boolean;
+
+  /**
+   * If true, the tooltip is interactive (hoverable/clickable).
+   */
+  interactive?: boolean;
+
+  /**
+   * Delay in milliseconds before hiding the tooltip.
+   */
+  delayHide?: number;
+
+  /**
+   * Additional custom class names for styling the tooltip.
+   */
+  className?: string;
+
+  /**
+   * If true, closes the tooltip when clicking outside of it.
+   */
+  closeOnOutsideClick?: boolean;
+
+  /**
+   * Close the tooltip when the trigger element is hidden.
+   */
+  closeOnTriggerHidden?: boolean;
+
+  /**
+   * If the tooltip should be visible by default.
+   */
+  defaultVisible?: boolean;
+
+  /**
+   * Delay in milliseconds before showing the tooltip.
+   */
+  delayShow?: number;
+
+  /**
+   * If true, the tooltip follows the cursor.
+   */
+  followCursor?: boolean;
+
+  /**
+   * Options for observing DOM changes through a MutationObserver.
+   */
+  mutationObserverOptions?: MutationObserverInit | null;
+
+  /**
+   * Offset of the tooltip from the trigger element, specified as a tuple [x, y].
+   */
+  offset?: [number, number];
+
+  /**
+   * Callback function when the visibility state of the tooltip changes.
+   */
+  onVisibleChange?: (state: boolean) => void;
+}
+
+export const tooltipStyle = {
+  duration: 100,
+  animation: "fade",
+  theme: "light",
+  arrow: true,
+};
+
+export const tooltipStyleDark = {
+  duration: 100,
+  animation: "fade",
+  theme: "dark",
+  arrow: true,
+};
+
+/** Tooltips display additional information upon click, hover, or focus. The information should be contextual, useful, and nonessential. */
+const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
+  className,
+  dark,
+  noPadding,
+  children,
+  content,
+  trigger = "hover",
+  // modifiers = [],
+  placement = "top",
+  createRefWrapper,
+  closeOnOutsideClick,
+  closeOnTriggerHidden,
+  defaultVisible,
+  delayHide,
+  delayShow,
+  followCursor,
+  interactive,
+  mutationObserverOptions,
+  offset,
+  onVisibleChange,
+  usePortal,
+  // ...others
+}) => {
+  const { prefix } = useSettings();
+  const [visibility, setVisibility] = React.useState(false);
+  const classes = classNames(className, {
+    [`${prefix}--tooltip`]: true,
+    [`${prefix}--tooltip--disable-padding`]: noPadding,
+    [`${prefix}--tooltip--visible`]: visibility,
+    [`${prefix}--tooltip--${trigger}`]: trigger,
+    [`${prefix}--tooltip--dark`]: dark,
+  });
+
+  const {
+    getArrowProps,
+    getTooltipProps,
+    setTooltipRef,
+    setTriggerRef,
+    visible,
+  } = usePopperTooltip({
+    closeOnOutsideClick,
+    closeOnTriggerHidden,
+    defaultVisible,
+    delayHide,
+    delayShow,
+    followCursor,
+    interactive,
+    mutationObserverOptions,
+    offset,
+    onVisibleChange,
+    placement,
+    trigger,
+  });
+
+  const elementClassNames = classNames(
+    /*children?.props?.className, */ {
+      [`${prefix}--tooltip--trigger`]: true,
+    }
+  );
+
+  const wrapperClassNames = classNames(className, {
+    [`${prefix}--tooltip--trigger`]: true,
+  });
+
+  const triggerElement =
+    !createRefWrapper && typeof children !== "string" ? (
+      React.cloneElement(children as React.ReactElement<any>, {
+        ref: setTriggerRef,
+        className: elementClassNames,
+      })
+    ) : (
+      <span ref={setTriggerRef} className={wrapperClassNames}>
+        {children}
+      </span>
+    );
+
+  const visibilityChange = (e) => {
+    setVisibility(e);
+    if (onVisibleChange) onVisibleChange(e);
+  };
+
+  const tooltip = (
+    <div ref={setTooltipRef} {...getTooltipProps({ className: classes })}>
+      {typeof content === "function"
+        ? content({ setVisibility, visibilityChange })
+        : content}
+      <div {...getArrowProps({ className: `${prefix}--tooltip__arrow` })} />
+    </div>
+  );
+
+  return (
+    <>
+      {triggerElement}
+      {visible && usePortal && <TooltipPortal>{tooltip}</TooltipPortal>}
+      {visible && !usePortal && tooltip}
+    </>
+  );
+};
+
+export default Tooltip;
+
+function TooltipPortal({ children }) {
+  return ReactDOM.createPortal(children, document.body);
+}

package/src/components/Tooltip/_mixins.scss

@@ -0,0 +1,107 @@
+@mixin backdrop-transform-enter($placement) {
+  $scale: 1;
+  @if ($placement == 'top') {
+    transform: scale($scale) translate(-50%, -55%);
+  } @else if ($placement == 'bottom') {
+    transform: scale($scale) translate(-50%, -45%);
+  } @else if ($placement == 'left') {
+    transform: scale($scale) translate(-50%, -50%);
+  } @else if ($placement == 'right') {
+    transform: scale($scale) translate(-50%, -50%);
+  }
+}
+
+@mixin backdrop-transform-leave($placement) {
+  $scale: 0.2;
+  @if ($placement == 'top') {
+    transform: scale($scale) translate(-50%, -45%);
+  } @else if ($placement == 'bottom') {
+    transform: scale($scale) translate(-50%, 0);
+  } @else if ($placement == 'left') {
+    transform: scale($scale) translate(-75%, -50%);
+  } @else if ($placement == 'right') {
+    transform: scale($scale) translate(-25%, -50%);
+  }
+}
+
+@mixin arrow($placement, $width, $color) {
+  @if ($placement == 'top') {
+    border-width: $width $width 0;
+    border-top-color: $color;
+  } @else if ($placement == 'bottom') {
+    border-width: 0 $width $width;
+    border-bottom-color: $color;
+  } @else if ($placement == 'left') {
+    border-width: $width 0 $width $width;
+    border-left-color: $color;
+  } @else if ($placement == 'right') {
+    border-width: $width $width $width 0;
+    border-right-color: $color;
+  }
+}
+
+@mixin arrow-position($placement, $width, $is-svg-arrow) {
+  @if ($placement == 'top' and not $is-svg-arrow) {
+    bottom: -$width;
+  } @else if ($placement == 'bottom') {
+    top: -$width;
+  }
+
+  @if ($is-svg-arrow) {
+    @if ($placement == 'left') {
+      right: -$width * 2 + 2px;
+    } @else if ($placement == 'right') {
+      left: -$width * 2 + 2px;
+    } @else if ($placement == 'top') {
+      bottom: -$width + 0.5px;
+    }
+  } @else {
+    @if ($placement == 'left') {
+      right: -$width;
+    } @else if ($placement == 'right') {
+      left: -$width;
+    }
+  }
+}
+
+@mixin arrow-margin($placement) {
+  @if ($placement == 'top' or $placement == 'bottom') {
+    margin: 0 3px;
+  } @else {
+    margin: 3px 0;
+  }
+}
+
+@mixin svg-arrow-transform($placement) {
+  @if ($placement == 'top') {
+    transform: rotate(180deg);
+  } @else if ($placement == 'left') {
+    transform: rotate(90deg);
+  } @else if ($placement == 'right') {
+    transform: rotate(-90deg);
+  }
+}
+
+@mixin arrow-transform-origin($placement, $size) {
+  @if ($placement == 'top') {
+    transform-origin: 50% 0%;
+  } @else if ($placement == 'bottom') {
+    transform-origin: 50% $size;
+  } @else if ($placement == 'left') {
+    transform-origin: 0% 50%;
+  } @else if ($placement == 'right') {
+    transform-origin: $size 50%;
+  }
+}
+
+@mixin svg-arrow-transform-origin($placement, $size) {
+  @if ($placement == 'top') {
+    transform-origin: 50% 0%;
+  } @else if ($placement == 'bottom') {
+    transform-origin: 50% $size;
+  } @else if ($placement == 'left') {
+    transform-origin: 33.33333333% 50%;
+  } @else if ($placement == 'right') {
+    transform-origin: 66.66666666% 50%;
+  }
+}

package/src/components/Tooltip/_tooltip.legacy.scss

@@ -0,0 +1,58 @@
+@import './_mixins.scss';
+@import './_vars.scss';
+@import './animations/fade.scss';
+@import './themes/light.scss';
+@import './themes/light-border.scss';
+
+.#{$namespace-prefix}-iOS {
+  cursor: pointer !important;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.#{$namespace-prefix}-popper {
+  pointer-events: none;
+  max-width: calc(100vw - 10px);
+  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition-property: transform;
+}
+
+.#{$namespace-prefix}-tooltip {
+  position: relative;
+  color: white;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1.4;
+  background-color: #333;
+  cursor: pointer;
+  transition-property: visibility, opacity, transform;
+  outline: 0;
+
+  @each $placement in $placements {
+    &[data-placement^='#{$placement}'] {
+      > .#{$namespace-prefix}-arrow {
+        @include arrow($placement, $arrow-size + 1, #333);
+        @include arrow-margin($placement);
+        @include arrow-transform-origin($placement, $arrow-size);
+        @include arrow-position($placement, $arrow-size, false);
+      }
+    }
+  }
+
+  &[data-interactive][data-state='visible'] {
+    pointer-events: auto;
+  }
+
+  &[data-inertia][data-state='visible'] {
+    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+  }
+}
+
+.#{$namespace-prefix}-arrow {
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.#{$namespace-prefix}-content {
+  padding: 5px 9px;
+}

package/src/components/Tooltip/_tooltip.scss

@@ -0,0 +1,112 @@
+/*
+@import './_mixins.scss';
+@import './_vars.scss';
+@import './animations/fade.scss';
+@import './themes/light.scss';
+@import './themes/light-border.scss';
+
+@include exports('tooltip') {
+  .#{$prefix}--tooltip {
+    cursor: pointer !important;
+    -webkit-tap-highlight-color: transparent;
+    background: var(--ui-01);
+    padding: $spacing-xs;
+    &.#{$prefix}--tooltip--disable-padding {
+      padding: 0;
+    }
+    &.#{$prefix}--tooltip--click {
+      cursor: pointer;
+    }
+    &--trigger {
+      cursor: pointer;
+    }
+  //   opacity: 0;
+  // display: none;
+    //transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+    //transition-property: transform;
+    cursor: pointer;
+    max-width: 300px;
+    border-radius: 7px;
+    @include line-height('body');
+    @include layer('pop-out');
+    z-index: 1000;
+    @include typescale('zeta');
+    &[data-popper-placement*='bottom'] {
+      .#{$prefix}--tooltip__arrow {
+        top: 0;
+        left: 0;
+        margin-top: -4px;
+      //   &::before {
+      //   border-width: 0 1.5em 1em 1.5em;
+      //   border-color: transparent transparent #232323 transparent;
+      // }
+      }
+    }
+    &[data-popper-placement*='top'] {
+      .#{$prefix}--tooltip__arrow {
+        bottom: 0;
+        left: 0;
+        margin-bottom: -4px;
+        // &::before {
+        // border-width: 1em 1.5em 0 1.5em;
+        // border-color: #232323 transparent transparent transparent;
+        // }
+      }
+    }
+    &[data-popper-placement*='right'] {
+      .#{$prefix}--tooltip__arrow {
+        left: 0;
+        margin-left: -4px;
+      //   &::before {
+      //   border-width: 1.5em 1em 1.5em 0;
+      //   border-color: transparent #232323 transparent transparent;
+      // }
+      }
+    }
+    &[data-popper-placement*='left'] {
+      .#{$prefix}--tooltip__arrow {
+        right: 0;
+        margin-right: -4px;
+      //   &::before {
+      //   border-width: 1.5em 0 1.5em 1em;
+      //   border-color: transparent transparent transparent#232323;
+      // }
+      }
+    }
+  }
+
+  .#{$prefix}--tooltip--dark {
+    color: var(--inverse-01);
+    background: var(--ui-06);
+    .#{$prefix}--tooltip__arrow {
+      &:before {
+        background: var(--ui-06);
+      }
+    }
+  }
+
+  .#{$prefix}--tooltip--visible {
+    opacity: 1;
+    display: block;
+  }
+
+  .#{$prefix}--tooltip__arrow {
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    z-index: -1;
+    &:before {
+      content: '';
+      transform: rotate(45deg);
+      background: var(--ui-01);
+      top: 0px;
+      left: 0px;
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      z-index: -1;
+    }
+  }
+}
+
+*/

package/src/components/Tooltip/_vars.scss

@@ -0,0 +1,6 @@
+$namespace-prefix: 'tippy' !default;
+$placements: 'top', 'bottom', 'left', 'right';
+$origins: bottom, top, right, left;
+$backdrop-origins: 0% 25%, 0% -50%, 50% 0%, -50% 0%;
+$backdrop-border-radii: 40% 40% 0 0, 0 0 30% 30%, 50% 0 0 50%, 0 50% 50% 0;
+$arrow-size: 7px;

package/src/components/Tooltip/animations/fade.scss

@@ -0,0 +1,10 @@
+@import '../_mixins.scss';
+@import '../_vars.scss';
+
+.#{$namespace-prefix}-tooltip {
+  &[data-animation='fade'] {
+    &[data-state='hidden'] {
+      opacity: 0;
+    }
+  }
+}

package/src/components/Tooltip/backdrop.scss

@@ -0,0 +1,66 @@
+@import './_mixins.scss';
+@import './_vars.scss';
+
+.#{$namespace-prefix}-tooltip {
+  @each $placement in $placements {
+    &[data-placement^='#{$placement}'] {
+      > .#{$namespace-prefix}-backdrop {
+        transform-origin: nth(
+          $backdrop-origins,
+          index($placements, $placement)
+        );
+        border-radius: nth(
+          $backdrop-border-radii,
+          index($placements, $placement)
+        );
+
+        &[data-state='visible'] {
+          @include backdrop-transform-enter($placement);
+        }
+
+        &[data-state='hidden'] {
+          @include backdrop-transform-leave($placement);
+        }
+      }
+    }
+  }
+}
+
+.#{$namespace-prefix}-tooltip {
+  &[data-animatefill] {
+    // Declared with !important so that custom themes don't need to specify
+    // this property.
+    background-color: transparent !important;
+  }
+}
+
+.#{$namespace-prefix}-backdrop {
+  position: absolute;
+  background-color: #333;
+  border-radius: 50%;
+  width: calc(110% + 32px);
+  left: 50%;
+  top: 50%;
+  z-index: -1;
+  transition: all cubic-bezier(0.46, 0.1, 0.52, 0.98);
+  backface-visibility: hidden;
+
+  &[data-state='hidden'] {
+    opacity: 0;
+  }
+
+  &::after {
+    content: '';
+    float: left;
+    padding-top: 100%;
+  }
+}
+
+.#{$namespace-prefix}-backdrop + .#{$namespace-prefix}-content {
+  transition-property: opacity;
+  will-change: opacity;
+
+  &[data-state='hidden'] {
+    opacity: 0;
+  }
+}

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,2 @@
+export { tooltipStyle, tooltipStyleDark } from './Tooltip';
+export { default } from './Tooltip';