@crossed/ui/lib/module/overlay/Tooltip.js

A universal & performant styling library for React Native, Next.js & React

import { Fragment, jsx } from "react/jsx-runtime";
import {
  forwardRef,
  memo,
  useEffect,
  useRef
} from "react";
import { Adapt } from "../other/Adapt";
import { Text } from "../typography/Text";
import { Sheet } from "./Sheet/index";
import { composeRefs, createScope, withStaticProperties } from "@crossed/core";
import {
  composeStyles,
  createStyles,
  inlineStyle,
  isWeb
} from "@crossed/styled";
import { Floating, useFloatingContext } from "./Floating";
import { autoUpdate, offset, useFloating } from "@floating-ui/react";
import { flip } from "@floating-ui/dom";
import { FadeIn, FadeOut } from "react-native-reanimated";
import { useMedia } from "../useMedia";
import { Box } from "../layout";
const useFloatinCompat = isWeb ? (placement) => useFloating({
  placement,
  middleware: [flip({ crossAxis: true }), offset(10)],
  whileElementsMounted: autoUpdate
}) : () => ({
  refs: {},
  floatingStyles: {}
});
const stylesDyn = createStyles(() => ({ dyn: (e) => e }));
const [FloatingUiProvider, useFloatingUi] = createScope(
  {}
);
const Root = memo(
  ({ children, placement, triggerStrategy, ...props }) => {
    const { refs, floatingStyles } = useFloatinCompat(placement);
    const { md } = useMedia();
    return /* @__PURE__ */ jsx(
      Floating,
      {
        triggerStrategy: !md && triggerStrategy === "onPointerEnter" ? "onPress" : triggerStrategy,
        removeScroll: false,
        ...props,
        children: /* @__PURE__ */ jsx(FloatingUiProvider, { refs, floatingStyles, children })
      }
    );
  }
);
Root.displayName = "Tooltip.Root";
const Trigger = memo(
  forwardRef((props, ref) => {
    const { refs } = useFloatingUi();
    return /* @__PURE__ */ jsx(
      Floating.Trigger,
      {
        ...props,
        ref: composeRefs(ref, refs.setReference)
      }
    );
  })
);
Trigger.displayName = "Tooltip.Trigger";
const Content = memo(
  forwardRef(({ children, style }, ref) => {
    return /* @__PURE__ */ jsx(Fragment, { children: isWeb ? /* @__PURE__ */ jsx(Adapt, { fallback: /* @__PURE__ */ jsx(ContentNative, { children, style }), children: /* @__PURE__ */ jsx(ContentWeb, { ref, children, style }) }) : /* @__PURE__ */ jsx(ContentNative, { children, style }) });
  })
);
Content.displayName = "Tooltip.Content";
const tooltipStyles = inlineStyle(({ colors, space }) => ({
  base: {
    backgroundColor: colors.text.primary,
    borderRadius: 16,
    paddingVertical: space.xs,
    paddingHorizontal: space.sm,
    maxWidth: 276
  },
  web: { base: { width: "max-content" } }
}));
const ContentWeb = memo(
  forwardRef(({ children, style }, ref) => {
    const { refs, floatingStyles } = useFloatingUi();
    return /* @__PURE__ */ jsx(Floating.Portal, { children: /* @__PURE__ */ jsx(
      Floating.Content,
      {
        entering: FadeIn,
        exiting: FadeOut,
        style: inlineStyle(() => ({
          base: { position: "absolute" }
        })),
        children: /* @__PURE__ */ jsx(
          Box,
          {
            ref: composeRefs(ref, refs.setFloating),
            style: composeStyles(
              tooltipStyles,
              stylesDyn.dyn(floatingStyles),
              style
            ),
            children
          }
        )
      }
    ) });
  })
);
ContentWeb.displayName = "Tooltip.ContentWeb";
const ContentNative = ({
  children
}) => {
  const { open, onClose } = useFloatingContext();
  const refSheet = useRef(null);
  useEffect(() => {
    var _a, _b;
    if (open) {
      (_a = refSheet.current) == null ? void 0 : _a.show();
    } else {
      (_b = refSheet.current) == null ? void 0 : _b.hide();
    }
  }, [open]);
  return /* @__PURE__ */ jsx(Sheet, { ref: refSheet, children: /* @__PURE__ */ jsx(Sheet.Content, { onClose, children: /* @__PURE__ */ jsx(Sheet.Padded, { children }) }) });
};
ContentNative.displayName = "Tooltip.ContentNative";
const TooltipText = (props) => {
  return /* @__PURE__ */ jsx(
    Text,
    {
      ...props,
      style: composeStyles(
        inlineStyle(({ colors }) => ({
          media: { md: { color: colors.text.invert } }
        })),
        props.style
      )
    }
  );
};
TooltipText.displayName = "Tooltip.Text";
const Tooltip = withStaticProperties(Root, {
  Trigger,
  Content,
  Text: TooltipText
});
export {
  Content,
  Root,
  Tooltip,
  Trigger
};
//# sourceMappingURL=Tooltip.js.map