@tipp/ui 1.6.26 → 1.6.27

package/src/atoms/ellipsis-tooltip.tsx

@@ -1,12 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from './tooltip';
+import { Tooltip } from './tooltip';
 import { Typo, type TypoProps } from './typo';
-import { Button } from './button';
 
 export type EllipsisTooltipProps = TypoProps & {
   lineClamp?: number;
@@ -42,37 +36,24 @@ export function EllipsisTooltip(
   }, [children]);
 
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button>?</Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>툴팁 내용</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <Tooltip content={children} style={{ display: tooltipDisplay }}>
+      <Typo
+        {...rest}
+        ref={ref}
+        style={{
+          width: '100%',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          WebkitLineClamp: lineClamp,
+
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          wordBreak: 'break-word',
+          ...style,
+        }}
+      >
+        {children}
+      </Typo>
+    </Tooltip>
   );
-
-  // return (
-  //   // <Tooltip content={children} style={{ display: tooltipDisplay }}>
-  //   //   <Typo
-  //   //     {...rest}
-  //   //     ref={ref}
-  //   //     style={{
-  //   //       width: '100%',
-  //   //       textOverflow: 'ellipsis',
-  //   //       overflow: 'hidden',
-  //   //       WebkitLineClamp: lineClamp,
-
-  //   //       display: '-webkit-box',
-  //   //       WebkitBoxOrient: 'vertical',
-  //   //       wordBreak: 'break-word',
-  //   //       ...style,
-  //   //     }}
-  //   //   >
-  //   //     {children}
-  //   //   </Typo>
-  //   // </Tooltip>
-  // );
 }

package/src/atoms/scroll-area.tsx

@@ -1,11 +1,4 @@
-import {
-  ScrollArea as ScrollAreaBase,
-  type ScrollAreaProps,
-} from '@radix-ui/themes';
-
 /**
  * @deprecated 생성 dom 구조를 제어하기가 어려워 일단 Box 컴포넌트 사용 권장
  */
-const ScrollArea = ScrollAreaBase;
-
-export { ScrollArea, type ScrollAreaProps };
+export { ScrollArea, type ScrollAreaProps } from '@radix-ui/themes';

package/src/atoms/tooltip.tsx

@@ -1,72 +1 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import type {
-  TooltipContentProps,
-  TooltipProps,
-  TooltipTriggerProps,
-  TooltipProviderProps,
-} from '@radix-ui/react-tooltip';
-import {
-  TooltipProvider as OriginalTooltipProvider,
-  Tooltip as OriginalTooltip,
-  TooltipTrigger as OriginalTooltipTrigger,
-  TooltipContent as OriginalTooltipContent,
-} from '@radix-ui/react-tooltip';
-import type {
-  PopoverContentProps,
-  PopoverProps,
-  PopoverTriggerProps,
-} from '@radix-ui/react-popover';
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-} from '@radix-ui/react-popover';
-
-const TouchContext = createContext<boolean | undefined>(undefined);
-const useTouch = (): boolean | undefined => useContext(TouchContext);
-
-export function TooltipProvider({
-  children,
-  ...props
-}: TooltipProviderProps): JSX.Element {
-  const [isTouch, setIsTouch] = useState<boolean | undefined>(undefined);
-  useEffect(() => {
-    setIsTouch(window.matchMedia('(pointer: coarse)').matches);
-  }, []);
-  return (
-    <TouchContext.Provider value={isTouch}>
-      <OriginalTooltipProvider {...props}>{children}</OriginalTooltipProvider>
-    </TouchContext.Provider>
-  );
-}
-
-export function Tooltip(props: TooltipProps & PopoverProps): JSX.Element {
-  const isTouch = useTouch();
-  return (
-    <TooltipProvider>
-      {isTouch ? <Popover {...props} /> : <OriginalTooltip {...props} />}
-    </TooltipProvider>
-  );
-}
-
-export function TooltipTrigger(
-  props: TooltipTriggerProps & PopoverTriggerProps
-): JSX.Element {
-  const isTouch = useTouch();
-  return isTouch ? (
-    <PopoverTrigger {...props} />
-  ) : (
-    <OriginalTooltipTrigger {...props} />
-  );
-}
-
-export function TooltipContent(
-  props: TooltipContentProps & PopoverContentProps
-): JSX.Element {
-  const isTouch = useTouch();
-  return isTouch ? (
-    <PopoverContent {...props} />
-  ) : (
-    <OriginalTooltipContent {...props} />
-  );
-}
+export { Tooltip, type TooltipProps } from '@radix-ui/themes';