@teamturing/react-kit 2.45.3 → 2.46.0

package/esm/core/Breadcrumbs/BreadcrumbsItem.js

@@ -29,9 +29,6 @@ const BreadcrumbsItem = ({
   return isOverflow ? /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
     text: text,
     direction: 'bottom-center',
-    sx: {
-      display: 'inline-flex'
-    },
     children: baseBreadCrumbsItem
   }) : baseBreadCrumbsItem;
 };

package/esm/core/OverlayPopper/index.js

@@ -1,4 +1,4 @@
-import { useFloating } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
+import { useFloating } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
 import { isFunction } from '../../packages/utils/esm/isFunction.js';
 import { Children, cloneElement } from 'react';
 import { useTheme } from 'styled-components';
@@ -8,7 +8,7 @@ import useFocusZone from '../../hook/useFocusZone.js';
 import useToggleState from '../../hook/useToggleState.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
 import { autoUpdate } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
-import { offset, flip, shift } from '../../node_modules/@floating-ui/core/dist/floating-ui.core.js';
+import { offset, flip, shift } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
 
 const OverlayPopper = ({
   children: propChildren,

package/esm/core/Tooltip/BaseTooltip.js

@@ -0,0 +1,125 @@
+import { useMergeRefs, FloatingPortal, FloatingArrow } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
+import { forwardRef, isValidElement, cloneElement } from 'react';
+import styled, { keyframes, useTheme } from 'styled-components';
+import { sx } from '../../utils/styled-system/index.js';
+import { useTooltip } from './useTooltip.js';
+import { TooltipContext, useTooltipContext } from './useTooltipContext.js';
+import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+
+function BaseTooltip({
+  children,
+  ...options
+}) {
+  const tooltip = useTooltip(options);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(TooltipContext.Provider, {
+    value: tooltip,
+    children: children
+  });
+}
+const BaseTooltipTrigger = /*#__PURE__*/forwardRef(function TooltipTrigger({
+  children,
+  ...props
+}, propRef) {
+  const context = useTooltipContext();
+  const childrenRef = children.ref;
+  const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+  if ( /*#__PURE__*/isValidElement(children)) {
+    return /*#__PURE__*/cloneElement(children, context.getReferenceProps({
+      ref,
+      ...props,
+      ...children.props,
+      'data-state': context.open ? 'open' : 'closed'
+    }));
+  }
+  return /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+    ref: ref,
+    "data-state": context.open ? 'open' : 'closed',
+    ...context.getReferenceProps(props),
+    children: children
+  });
+});
+const BaseTooltipContent = /*#__PURE__*/forwardRef(function TooltipContent({
+  style,
+  ...props
+}, propRef) {
+  const theme = useTheme();
+  const context = useTooltipContext();
+  const ref = useMergeRefs([context.refs.setFloating, propRef]);
+  if (!context.open) return null;
+  return /*#__PURE__*/jsxRuntimeExports.jsx(FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntimeExports.jsxs(StyledBaseTooltipContent, {
+      ref: ref,
+      style: {
+        ...context.floatingStyles,
+        ...style
+      },
+      ...context.getFloatingProps(props),
+      children: [props.children, /*#__PURE__*/jsxRuntimeExports.jsx(FloatingArrow, {
+        ref: context.arrowRef,
+        context: context,
+        width: 10,
+        height: 6,
+        fill: theme.colors['bg/neutral/bolder'],
+        stroke: theme.colors['bg/neutral/bolder']
+      })]
+    })
+  });
+});
+const tooltipAppear = keyframes`
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+`;
+const StyledBaseTooltipContent = styled.div`
+  z-index: 99999;
+  background-color: ${({
+  theme
+}) => theme.colors['bg/neutral/bolder']};
+  border-radius: ${({
+  theme
+}) => forcePixelValue(theme.radii.xs)};
+  padding: ${({
+  theme
+}) => `${forcePixelValue(theme.space[2])} ${forcePixelValue(theme.space[3])}`};
+  font-size: ${({
+  theme
+}) => forcePixelValue(theme.fontSizes.xxs)};
+  font-weight: ${({
+  theme
+}) => theme.fontWeights.medium};
+  line-height: ${({
+  theme
+}) => theme.lineHeights[2]};
+  -webkit-font-smoothing: subpixel-antialiased;
+  color: ${({
+  theme
+}) => theme.colors['text/inverse']};
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: break-word;
+  white-space: pre;
+  pointer-events: none;
+
+  width: max-content;
+  max-width: ${forcePixelValue(240)};
+  word-wrap: break-word;
+  white-space: pre-line;
+  border-collapse: separate;
+
+  animation-name: ${tooltipAppear};
+  animation-duration: 100ms;
+  animation-fill-mode: forwards;
+  animation-timing-function: ease-in;
+
+  ${sx}
+`;
+
+export { BaseTooltip, BaseTooltipContent, BaseTooltipTrigger };

package/esm/core/Tooltip/index.js

@@ -1,287 +1,29 @@
-import { forcePixelValue } from '../../packages/utils/esm/forcePixelValue.js';
-import { forwardRef } from 'react';
-import styled, { keyframes } from 'styled-components';
-import '../../node_modules/styled-system/dist/index.esm.js';
-import { sx } from '../../utils/styled-system/index.js';
+import { BaseTooltip, BaseTooltipTrigger, BaseTooltipContent } from './BaseTooltip.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
-import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
 
 const Tooltip = ({
   children,
   direction = 'top-center',
-  text,
-  disabled,
-  className: propClassName,
-  sx
-}, ref) => {
-  const className = [propClassName, `tooltip-direction-${direction}`].join(' ');
-  return /*#__PURE__*/jsxRuntimeExports.jsx(BaseTooltip, {
-    ref: ref,
-    role: 'tooltip',
-    "aria-label": text,
-    disabled: disabled,
-    className: className,
-    sx: sx,
-    children: children
+  text
+}) => {
+  const directionToPlacement = {
+    'top-center': 'top',
+    'top-right': 'top-start',
+    'right': 'right',
+    'bottom-right': 'bottom-start',
+    'bottom-center': 'bottom',
+    'bottom-left': 'bottom-end',
+    'left': 'left',
+    'top-left': 'top-end'
+  }[direction];
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(BaseTooltip, {
+    placement: directionToPlacement,
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx(BaseTooltipTrigger, {
+      children: children
+    }), /*#__PURE__*/jsxRuntimeExports.jsx(BaseTooltipContent, {
+      children: text
+    })]
   });
 };
-const tooltipAppear = keyframes`
-  from {
-    opacity: 0;
-  }
 
-  to {
-    opacity: 1;
-  }
-`;
-const BaseTooltip = styled.span`
-  display: inline-block;
-  position: relative;
-
-  &::before {
-    position: absolute;
-    z-index: 1000001;
-    display: none;
-    width: 0px;
-    height: 0px;
-    color: ${({
-  theme
-}) => theme.colors['bg/neutral/bolder']};
-    pointer-events: none;
-    content: '';
-    border: 6px solid transparent;
-    opacity: 0;
-  }
-
-  &::after {
-    position: absolute;
-    z-index: 1000000;
-    display: none;
-    padding: ${({
-  theme
-}) => `${forcePixelValue(theme.space[2])} ${forcePixelValue(theme.space[3])}`};
-    font-size: ${({
-  theme
-}) => forcePixelValue(theme.fontSizes.xxs)};
-    font-weight: ${({
-  theme
-}) => theme.fontWeights.medium};
-    line-height: ${({
-  theme
-}) => theme.lineHeights[2]};
-    -webkit-font-smoothing: subpixel-antialiased;
-    color: ${({
-  theme
-}) => theme.colors['text/inverse']};
-    text-align: center;
-    text-decoration: none;
-    text-shadow: none;
-    text-transform: none;
-    letter-spacing: normal;
-    word-wrap: break-word;
-    white-space: pre;
-    pointer-events: none;
-    content: attr(aria-label);
-    background: ${({
-  theme
-}) => theme.colors['bg/neutral/bolder']};
-    border-radius: ${({
-  theme
-}) => forcePixelValue(theme.radii.xs)};
-    box-shadow: ${({
-  theme
-}) => theme.shadows['shadow/overlay']};
-    opacity: 0;
-  }
-
-  &:hover,
-  &:active,
-  &:focus {
-    &::before,
-    &::after {
-      display: table-cell;
-      text-decoration: none;
-      animation-name: ${tooltipAppear};
-      animation-duration: 100ms;
-      animation-fill-mode: forwards;
-      animation-timing-function: ease-in;
-      animation-delay: 300ms;
-    }
-  }
-
-  &.tooltip-direction-bottom-center,
-  &.tooltip-direction-bottom-right,
-  &.tooltip-direction-bottom-left {
-    &::after {
-      top: 100%;
-      right: 50%;
-      margin-top: ${({
-  theme
-}) => forcePixelValue(theme.space[2])};
-    }
-
-    &::before {
-      top: auto;
-      right: 50%;
-      bottom: ${({
-  theme
-}) => forcePixelValue(theme.space[-2] + theme.space['-0.25'])};
-      margin-right: -6px;
-      border-bottom-color: ${({
-  theme
-}) => theme.colors['bg/neutral/bolder']};
-    }
-  }
-
-  &.tooltip-direction-bottom-right {
-    &::after {
-      right: auto;
-      left: 50%;
-      margin-left: -${({
-  theme
-}) => forcePixelValue(theme.space[4])};
-    }
-  }
-
-  &.tooltip-direction-bottom-left::after {
-    margin-right: -${({
-  theme
-}) => forcePixelValue(theme.space[4])};
-  }
-
-  // Tooltips above the object
-  &.tooltip-direction-top-center,
-  &.tooltip-direction-top-right,
-  &.tooltip-direction-top-left {
-    &::after {
-      right: 50%;
-      bottom: 100%;
-      margin-bottom: ${({
-  theme
-}) => forcePixelValue(theme.space[2])};
-    }
-
-    &::before {
-      top: ${({
-  theme
-}) => forcePixelValue(theme.space[-2] + theme.space['-0.25'])};
-      right: 50%;
-      bottom: auto;
-      margin-right: -6px;
-      border-top-color: ${({
-  theme
-}) => theme.colors['bg/neutral/bolder']};
-    }
-  }
-
-  &.tooltip-direction-top-right {
-    &::after {
-      right: auto;
-      left: 50%;
-      margin-left: -${({
-  theme
-}) => forcePixelValue(theme.space[4])};
-    }
-  }
-
-  &.tooltip-direction-top-left::after {
-    margin-right: -${({
-  theme
-}) => forcePixelValue(theme.space[4])};
-  }
-
-  &.tooltip-direction-top-center::after,
-  &.tooltip-direction-bottom-center::after {
-    transform: translateX(50%);
-  }
-
-  &.tooltip-direction-left {
-    &::after {
-      right: 100%;
-      bottom: 50%;
-      margin-right: ${({
-  theme
-}) => forcePixelValue(theme.space[2])};
-      transform: translateY(50%);
-    }
-
-    &::before {
-      top: 50%;
-      bottom: 50%;
-      left: ${({
-  theme
-}) => forcePixelValue(theme.space[-2] + theme.space['-0.25'])};
-      margin-top: -6px;
-      border-left-color: ${({
-  theme
-}) => theme.colors['bg/neutral/bolder']};
-    }
-  }
-
-  &.tooltip-direction-right {
-    &::after {
-      bottom: 50%;
-      left: 100%;
-      margin-left: ${({
-  theme
-}) => forcePixelValue(theme.space[2])};
-      transform: translateY(50%);
-    }
-
-    &::before {
-      top: 50%;
-      right: ${({
-  theme
-}) => forcePixelValue(theme.space[-2] + theme.space['-0.25'])};
-      bottom: 50%;
-      margin-top: -6px;
-      border-right-color: ${({
-  theme
-}) => theme.colors['bg/neutral/bolder']};
-    }
-  }
-
-  &::after {
-    width: max-content;
-    max-width: 240px;
-    word-wrap: break-word;
-    white-space: pre-line;
-    border-collapse: separate;
-  }
-
-  &.tooltip-direction-bottom-center::after,
-  &.tooltip-direction-top-center::after {
-    right: auto;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &.tooltip-direction-left::after,
-  &.tooltip-direction-right::after {
-    right: 100%;
-  }
-
-  ${sx}
-  ${variant({
-  prop: 'disabled',
-  variants: {
-    true: {
-      '&:hover , &:active, &:focus': {
-        '&::before, &::after': {
-          display: 'none'
-        }
-      }
-    },
-    false: {
-      '&:hover , &:active, &:focus': {
-        '&::before, &::after': {
-          display: 'table-cell'
-        }
-      }
-    }
-  }
-})}
-`;
-var Tooltip$1 = /*#__PURE__*/forwardRef(Tooltip);
-
-export { Tooltip$1 as default };
+export { Tooltip as default };

package/esm/core/Tooltip/useTooltip.js

@@ -0,0 +1,56 @@
+import { useFloating, useHover, useFocus, useDismiss, useRole, useInteractions } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { useState, useRef, useMemo } from 'react';
+import { useTheme } from 'styled-components';
+import { autoUpdate } from '../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
+import { offset, flip, shift, arrow } from '../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
+
+function useTooltip({
+  initialOpen = false,
+  placement = 'top',
+  open: controlledOpen,
+  onOpenChange: setControlledOpen
+} = {}) {
+  const theme = useTheme();
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+  const arrowRef = useRef(null);
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(theme.space[2]), flip({
+      crossAxis: placement.includes('-'),
+      fallbackAxisSideDirection: 'start',
+      padding: theme.space[2]
+    }), shift({
+      padding: theme.space[2]
+    }), arrow({
+      element: arrowRef
+    })]
+  });
+  const context = data.context;
+  const hover = useHover(context, {
+    move: false,
+    restMs: 300,
+    enabled: controlledOpen == null
+  });
+  const focus = useFocus(context, {
+    enabled: controlledOpen == null
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context, {
+    role: 'tooltip'
+  });
+  const interactions = useInteractions([hover, focus, dismiss, role]);
+  return useMemo(() => ({
+    open,
+    setOpen,
+    ...interactions,
+    ...data,
+    arrowRef
+  }), [open, setOpen, interactions, data, arrowRef]);
+}
+
+export { useTooltip };

package/esm/core/Tooltip/useTooltipContext.js

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+const TooltipContext = /*#__PURE__*/createContext(null);
+const useTooltipContext = () => {
+  const context = useContext(TooltipContext);
+  if (context == null) {
+    throw new Error('Tooltip components must be wrapped in <Tooltip />');
+  }
+  return context;
+};
+
+export { TooltipContext, useTooltipContext };