@channel.io/bezier-react 3.3.1 → 3.4.0

package/dist/esm/components/Tabs/Tabs.mjs

@@ -1,16 +1,17 @@
-import { forwardRef, useMemo } from 'react';
+import { forwardRef, useMemo, useRef } from 'react';
 import { OpenInNewIcon } from '@channel.io/bezier-icons';
 import { Root as Root2, TabsList, TabsTrigger, Content } from '../../node_modules/@radix-ui/react-tabs/dist/index.mjs';
-import { Root as Root4, Button as Button$1, Link } from '../../node_modules/@radix-ui/react-toolbar/dist/index.mjs';
+import { Root as Root4, Button, Link } from '../../node_modules/@radix-ui/react-toolbar/dist/index.mjs';
 import classNames from '../../_virtual/index.mjs';
+import useElementTruncated from '../../hooks/useElementTruncated.mjs';
 import { createContext } from '../../utils/react.mjs';
 import { isNil } from '../../utils/type.mjs';
 import styles from './Tabs.module.scss.mjs';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button } from '../Button/Button.mjs';
 import { BaseButton } from '../BaseButton/BaseButton.mjs';
 import { Text } from '../Text/Text.mjs';
 import { Icon } from '../Icon/Icon.mjs';
+import { Tooltip } from '../Tooltip/Tooltip.mjs';
 
 const Tabs = /*#__PURE__*/forwardRef(function Tabs({
   className,
@@ -77,6 +78,51 @@ function getButtonSizeBy(size) {
     s: 's'
   }[size];
 }
+function getTypography(size) {
+  return {
+    s: '13',
+    m: '14',
+    l: '15'
+  }[size];
+}
+const TabItemButton = /*#__PURE__*/forwardRef(function TabItemButton({
+  className,
+  disabled,
+  value,
+  children,
+  maxWidth,
+  style,
+  ...rest
+}, forwardedRef) {
+  const contentRef = useRef(null);
+  const isTruncated = useElementTruncated(contentRef);
+  const {
+    size
+  } = useTabListContext();
+  return /*#__PURE__*/jsx(Tooltip, {
+    content: children,
+    disabled: !isTruncated,
+    offset: 6,
+    children: /*#__PURE__*/jsx(BaseButton, {
+      className: classNames(styles.TabItemButton, styles[`size-${getButtonSizeBy(size)}`], className),
+      disabled: disabled,
+      ref: forwardedRef,
+      style: {
+        maxWidth,
+        ...style
+      },
+      ...rest,
+      children: /*#__PURE__*/jsx(Text, {
+        ref: contentRef,
+        className: styles.TabItemButtonText,
+        typo: getTypography(size),
+        bold: true,
+        truncated: true,
+        children: children
+      })
+    })
+  });
+});
 
 /**
  * `TabItem` is a button that activates its associated content.
@@ -86,11 +132,10 @@ const TabItem = /*#__PURE__*/forwardRef(function TabItem({
   disabled,
   value,
   children,
+  maxWidth,
+  style,
   ...rest
 }, forwardedRef) {
-  const {
-    size
-  } = useTabListContext();
   if (typeof children !== 'string') {
     return null;
   }
@@ -98,15 +143,15 @@ const TabItem = /*#__PURE__*/forwardRef(function TabItem({
     disabled: disabled,
     value: value,
     asChild: true,
-    children: /*#__PURE__*/jsx(Button, {
-      className: classNames(styles.TabItem, className),
-      disabled: disabled,
-      text: children,
-      size: getButtonSizeBy(size),
-      colorVariant: "monochrome-light",
-      styleVariant: "tertiary",
+    children: /*#__PURE__*/jsx(TabItemButton, {
       ref: forwardedRef,
-      ...rest
+      className: className,
+      disabled: disabled,
+      value: value,
+      maxWidth: maxWidth,
+      style: style,
+      ...rest,
+      children: children
     })
   });
 });
@@ -176,7 +221,7 @@ const TabAction = /*#__PURE__*/forwardRef(function TabAction({
     size
   } = useTabListContext();
   const className = classNames(styles.TabAction, styles[`size-${size}`], classNameProp);
-  return isNil(href) ? /*#__PURE__*/jsx(Button$1, {
+  return isNil(href) ? /*#__PURE__*/jsx(Button, {
     asChild: true,
     className: className,
     onClick: onClick,

package/dist/esm/components/Tabs/Tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.mjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client'\n\nimport { type JSX, forwardRef, useMemo } from 'react'\nimport * as React from 'react'\n\nimport { OpenInNewIcon } from '@channel.io/bezier-icons'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar'\nimport classNames from 'classnames'\n\nimport { createContext } from '~/src/utils/react'\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Button } from '~/src/components/Button'\nimport { Icon } from '~/src/components/Icon'\nimport {\n  type TabActionElement,\n  type TabActionProps,\n  type TabActionsProps,\n  type TabContentProps,\n  type TabItemProps,\n  type TabItemsProps,\n  type TabListContextValue,\n  type TabListProps,\n  type TabSize,\n  type TabsProps,\n} from '~/src/components/Tabs/Tabs.types'\nimport { Text } from '~/src/components/Text'\n\nimport styles from './Tabs.module.scss'\n\n/**\n * `Tabs` is a set of layered section of content.\n *\n * `Tabs` is a context of the Tab-related components and gives accessibility properties to Tab-related components.\n * @example\n *\n * ```tsx\n * <Tabs>\n *  <TabList>\n *    <TabItems>\n *      <TabItem />\n *    <TabItems />\n *    <TabActions>\n *      <TabAction />\n *    </TabActions>\n *  </TabList>\n *  <TabContent />\n * </Tabs>\n * ```\n */\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { className, activationMode = 'automatic', dir, children, ...rest },\n  forwardedRef\n) {\n  return (\n    <TabsPrimitive.Root\n      className={classNames(styles.Tabs, className)}\n      activationMode={activationMode}\n      ref={forwardedRef}\n      dir={dir as 'ltr' | 'rtl'}\n      {...rest}\n    >\n      {children}\n    </TabsPrimitive.Root>\n  )\n})\n\nconst [TabListContextProvider, useTabListContext] =\n  createContext<TabListContextValue>({\n    size: 'm',\n  })\n\n/**\n * `TabList` gives size context to its children and decides the layout of `TabItems` and `TabActions`.\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList({ className, children, size = 'm', ...rest }, forwardedRef) {\n    const heightContextValue = useMemo(\n      () => ({\n        size,\n      }),\n      [size]\n    )\n\n    return (\n      <TabListContextProvider value={heightContextValue}>\n        <div\n          className={classNames(\n            styles.TabList,\n            styles[`size-${size}`],\n            className\n          )}\n          ref={forwardedRef}\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabListContextProvider>\n    )\n  }\n)\n\n/**\n * `TabItems` is a flex container which has `TabItem` flex items.\n */\nexport const TabItems = forwardRef<HTMLDivElement, TabItemsProps>(\n  function TabItems({ className, children, ...rest }, forwardedRef) {\n    return (\n      <TabsPrimitive.TabsList\n        className={classNames(styles.TabItems, className)}\n        ref={forwardedRef}\n        {...rest}\n      >\n        {children}\n      </TabsPrimitive.TabsList>\n    )\n  }\n)\n\nfunction getButtonSizeBy(size: TabSize) {\n  return (\n    {\n      l: 'l',\n      m: 'm',\n      s: 's',\n    } as const\n  )[size]\n}\n\n/**\n * `TabItem` is a button that activates its associated content.\n */\nexport const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(\n  function TabItem(\n    { className, disabled, value, children, ...rest },\n    forwardedRef\n  ) {\n    const { size } = useTabListContext()\n\n    if (typeof children !== 'string') {\n      return null\n    }\n\n    return (\n      <TabsPrimitive.TabsTrigger\n        disabled={disabled}\n        value={value}\n        asChild\n      >\n        <Button\n          className={classNames(styles.TabItem, className)}\n          disabled={disabled}\n          text={children}\n          size={getButtonSizeBy(size)}\n          colorVariant=\"monochrome-light\"\n          styleVariant=\"tertiary\"\n          ref={forwardedRef}\n          {...rest}\n        />\n      </TabsPrimitive.TabsTrigger>\n    )\n  }\n)\n\n/**\n * `TabContent` has content associated with `TabItem`.\n */\nexport const TabContent = forwardRef<HTMLDivElement, TabContentProps>(\n  function TabContent({ children, value, ...rest }, forwardedRef) {\n    return (\n      <TabsPrimitive.Content\n        value={value}\n        ref={forwardedRef}\n        {...rest}\n      >\n        {children}\n      </TabsPrimitive.Content>\n    )\n  }\n)\n\n/**\n * `TabActions` is a flex container which has `TabAction` flex items.\n *  It also gives accessibility properties to its children.\n */\nexport const TabActions = forwardRef<HTMLDivElement, TabActionsProps>(\n  function TabActions({ className, dir, children, ...rest }, forwardedRef) {\n    return (\n      <ToolbarPrimitive.Root\n        className={classNames(styles.TabActions, className)}\n        aria-label=\"More actions\"\n        ref={forwardedRef}\n        dir={dir as 'ltr' | 'rtl'}\n        {...rest}\n      >\n        {children}\n      </ToolbarPrimitive.Root>\n    )\n  }\n)\n\nfunction getTypoBy(size: TabSize) {\n  return (\n    {\n      l: '14',\n      m: '14',\n      s: '13',\n    } as const\n  )[size]\n}\n\nfunction getIconSizeBy(size: TabSize) {\n  return (\n    {\n      l: 's',\n      m: 'xs',\n      s: 'xs',\n    } as const\n  )[size]\n}\n\n/**\n * `TabAction` is a button for more action to open a new link or navigate to a different url.\n * If it has `href` props, it should act as a link.\n */\nexport const TabAction = forwardRef<\n  TabActionElement<string | undefined>,\n  TabActionProps<string | undefined>\n>(function TabAction(\n  { className: classNameProp, href, children, onClick, ...rest },\n  forwardedRef\n) {\n  const { size } = useTabListContext()\n  const className = classNames(\n    styles.TabAction,\n    styles[`size-${size}`],\n    classNameProp\n  )\n\n  return isNil(href) ? (\n    <ToolbarPrimitive.Button\n      asChild\n      className={className}\n      onClick={onClick}\n      ref={forwardedRef}\n      {...rest}\n    >\n      <BaseButton>\n        <Text\n          bold\n          typo={getTypoBy(size)}\n        >\n          {children}\n        </Text>\n      </BaseButton>\n    </ToolbarPrimitive.Button>\n  ) : (\n    <ToolbarPrimitive.Link\n      className={className}\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      // @ts-expect-error\n      ref={forwardedRef}\n      {...rest}\n    >\n      <Text\n        bold\n        typo={getTypoBy(size)}\n      >\n        {children}\n      </Text>\n      <Icon\n        source={OpenInNewIcon}\n        size={getIconSizeBy(size)}\n        marginLeft={5}\n      />\n    </ToolbarPrimitive.Link>\n  )\n}) as <Link extends string | undefined>(\n  props: TabActionProps<Link> & {\n    ref?: React.ForwardedRef<TabActionElement<Link>>\n  }\n) => JSX.Element\n"],"names":["Tabs","forwardRef","className","activationMode","dir","children","rest","forwardedRef","_jsx","TabsPrimitive","classNames","styles","ref","TabListContextProvider","useTabListContext","createContext","size","TabList","heightContextValue","useMemo","value","TabItems","getButtonSizeBy","l","m","s","TabItem","disabled","asChild","Button","text","colorVariant","styleVariant","TabContent","TabActions","ToolbarPrimitive","getTypoBy","getIconSizeBy","TabAction","classNameProp","href","onClick","isNil","BaseButton","Text","bold","typo","_jsxs","target","rel","Icon","source","OpenInNewIcon","marginLeft"],"mappings":"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"}
+{"version":3,"file":"Tabs.mjs","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client'\n\nimport { type JSX, forwardRef, useMemo, useRef } from 'react'\nimport * as React from 'react'\n\nimport { OpenInNewIcon } from '@channel.io/bezier-icons'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar'\nimport classNames from 'classnames'\n\nimport useElementTruncated from '~/src/hooks/useElementTruncated'\nimport { createContext } from '~/src/utils/react'\nimport { isNil } from '~/src/utils/type'\n\nimport { BaseButton } from '~/src/components/BaseButton'\nimport { Icon } from '~/src/components/Icon'\nimport {\n  type TabActionElement,\n  type TabActionProps,\n  type TabActionsProps,\n  type TabContentProps,\n  type TabItemProps,\n  type TabItemsProps,\n  type TabListContextValue,\n  type TabListProps,\n  type TabSize,\n  type TabsProps,\n} from '~/src/components/Tabs/Tabs.types'\nimport { Text } from '~/src/components/Text'\nimport { Tooltip } from '~/src/components/Tooltip'\n\nimport styles from './Tabs.module.scss'\n\n/**\n * `Tabs` is a set of layered section of content.\n *\n * `Tabs` is a context of the Tab-related components and gives accessibility properties to Tab-related components.\n * @example\n *\n * ```tsx\n * <Tabs>\n *  <TabList>\n *    <TabItems>\n *      <TabItem />\n *    <TabItems />\n *    <TabActions>\n *      <TabAction />\n *    </TabActions>\n *  </TabList>\n *  <TabContent />\n * </Tabs>\n * ```\n */\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { className, activationMode = 'automatic', dir, children, ...rest },\n  forwardedRef\n) {\n  return (\n    <TabsPrimitive.Root\n      className={classNames(styles.Tabs, className)}\n      activationMode={activationMode}\n      ref={forwardedRef}\n      dir={dir as 'ltr' | 'rtl'}\n      {...rest}\n    >\n      {children}\n    </TabsPrimitive.Root>\n  )\n})\n\nconst [TabListContextProvider, useTabListContext] =\n  createContext<TabListContextValue>({\n    size: 'm',\n  })\n\n/**\n * `TabList` gives size context to its children and decides the layout of `TabItems` and `TabActions`.\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList({ className, children, size = 'm', ...rest }, forwardedRef) {\n    const heightContextValue = useMemo(\n      () => ({\n        size,\n      }),\n      [size]\n    )\n\n    return (\n      <TabListContextProvider value={heightContextValue}>\n        <div\n          className={classNames(\n            styles.TabList,\n            styles[`size-${size}`],\n            className\n          )}\n          ref={forwardedRef}\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabListContextProvider>\n    )\n  }\n)\n\n/**\n * `TabItems` is a flex container which has `TabItem` flex items.\n */\nexport const TabItems = forwardRef<HTMLDivElement, TabItemsProps>(\n  function TabItems({ className, children, ...rest }, forwardedRef) {\n    return (\n      <TabsPrimitive.TabsList\n        className={classNames(styles.TabItems, className)}\n        ref={forwardedRef}\n        {...rest}\n      >\n        {children}\n      </TabsPrimitive.TabsList>\n    )\n  }\n)\n\nfunction getButtonSizeBy(size: TabSize) {\n  return (\n    {\n      l: 'l',\n      m: 'm',\n      s: 's',\n    } as const\n  )[size]\n}\n\nfunction getTypography(size: TabSize) {\n  return (\n    {\n      s: '13',\n      m: '14',\n      l: '15',\n    } as const\n  )[size]\n}\n\nconst TabItemButton = forwardRef<HTMLButtonElement, TabItemProps>(\n  function TabItemButton(\n    { className, disabled, value, children, maxWidth, style, ...rest },\n    forwardedRef\n  ) {\n    const contentRef = useRef<HTMLElement>(null)\n    const isTruncated = useElementTruncated(contentRef)\n\n    const { size } = useTabListContext()\n\n    return (\n      <Tooltip\n        content={children}\n        disabled={!isTruncated}\n        offset={6}\n      >\n        <BaseButton\n          className={classNames(\n            styles.TabItemButton,\n            styles[`size-${getButtonSizeBy(size)}`],\n            className\n          )}\n          disabled={disabled}\n          ref={forwardedRef}\n          style={{ maxWidth, ...style }}\n          {...rest}\n        >\n          <Text\n            ref={contentRef}\n            className={styles.TabItemButtonText}\n            typo={getTypography(size)}\n            bold\n            truncated\n          >\n            {children}\n          </Text>\n        </BaseButton>\n      </Tooltip>\n    )\n  }\n)\n\n/**\n * `TabItem` is a button that activates its associated content.\n */\nexport const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(\n  function TabItem(\n    { className, disabled, value, children, maxWidth, style, ...rest },\n    forwardedRef\n  ) {\n    if (typeof children !== 'string') {\n      return null\n    }\n\n    return (\n      <TabsPrimitive.TabsTrigger\n        disabled={disabled}\n        value={value}\n        asChild\n      >\n        <TabItemButton\n          ref={forwardedRef}\n          className={className}\n          disabled={disabled}\n          value={value}\n          maxWidth={maxWidth}\n          style={style}\n          {...rest}\n        >\n          {children}\n        </TabItemButton>\n      </TabsPrimitive.TabsTrigger>\n    )\n  }\n)\n\n/**\n * `TabContent` has content associated with `TabItem`.\n */\nexport const TabContent = forwardRef<HTMLDivElement, TabContentProps>(\n  function TabContent({ children, value, ...rest }, forwardedRef) {\n    return (\n      <TabsPrimitive.Content\n        value={value}\n        ref={forwardedRef}\n        {...rest}\n      >\n        {children}\n      </TabsPrimitive.Content>\n    )\n  }\n)\n\n/**\n * `TabActions` is a flex container which has `TabAction` flex items.\n *  It also gives accessibility properties to its children.\n */\nexport const TabActions = forwardRef<HTMLDivElement, TabActionsProps>(\n  function TabActions({ className, dir, children, ...rest }, forwardedRef) {\n    return (\n      <ToolbarPrimitive.Root\n        className={classNames(styles.TabActions, className)}\n        aria-label=\"More actions\"\n        ref={forwardedRef}\n        dir={dir as 'ltr' | 'rtl'}\n        {...rest}\n      >\n        {children}\n      </ToolbarPrimitive.Root>\n    )\n  }\n)\n\nfunction getTypoBy(size: TabSize) {\n  return (\n    {\n      l: '14',\n      m: '14',\n      s: '13',\n    } as const\n  )[size]\n}\n\nfunction getIconSizeBy(size: TabSize) {\n  return (\n    {\n      l: 's',\n      m: 'xs',\n      s: 'xs',\n    } as const\n  )[size]\n}\n\n/**\n * `TabAction` is a button for more action to open a new link or navigate to a different url.\n * If it has `href` props, it should act as a link.\n */\nexport const TabAction = forwardRef<\n  TabActionElement<string | undefined>,\n  TabActionProps<string | undefined>\n>(function TabAction(\n  { className: classNameProp, href, children, onClick, ...rest },\n  forwardedRef\n) {\n  const { size } = useTabListContext()\n  const className = classNames(\n    styles.TabAction,\n    styles[`size-${size}`],\n    classNameProp\n  )\n\n  return isNil(href) ? (\n    <ToolbarPrimitive.Button\n      asChild\n      className={className}\n      onClick={onClick}\n      ref={forwardedRef}\n      {...rest}\n    >\n      <BaseButton>\n        <Text\n          bold\n          typo={getTypoBy(size)}\n        >\n          {children}\n        </Text>\n      </BaseButton>\n    </ToolbarPrimitive.Button>\n  ) : (\n    <ToolbarPrimitive.Link\n      className={className}\n      href={href}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      // @ts-expect-error\n      ref={forwardedRef}\n      {...rest}\n    >\n      <Text\n        bold\n        typo={getTypoBy(size)}\n      >\n        {children}\n      </Text>\n      <Icon\n        source={OpenInNewIcon}\n        size={getIconSizeBy(size)}\n        marginLeft={5}\n      />\n    </ToolbarPrimitive.Link>\n  )\n}) as <Link extends string | undefined>(\n  props: TabActionProps<Link> & {\n    ref?: React.ForwardedRef<TabActionElement<Link>>\n  }\n) => JSX.Element\n"],"names":["Tabs","forwardRef","className","activationMode","dir","children","rest","forwardedRef","_jsx","TabsPrimitive","classNames","styles","ref","TabListContextProvider","useTabListContext","createContext","size","TabList","heightContextValue","useMemo","value","TabItems","getButtonSizeBy","l","m","s","getTypography","TabItemButton","disabled","maxWidth","style","contentRef","useRef","isTruncated","useElementTruncated","Tooltip","content","offset","BaseButton","Text","TabItemButtonText","typo","bold","truncated","TabItem","asChild","TabContent","TabActions","ToolbarPrimitive","getTypoBy","getIconSizeBy","TabAction","classNameProp","href","onClick","isNil","_jsxs","target","rel","Icon","source","OpenInNewIcon","marginLeft"],"mappings":"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"}

package/dist/esm/components/Tabs/Tabs.module.scss.mjs

@@ -1,4 +1,4 @@
-var styles = {"Tabs":"b-gYzTx","TabList":"b-hDolH","size-l":"b-IDyyx","size-m":"b-qRYAa","size-s":"b-PA-KE","TabItems":"b-QelIi","TabItem":"b-C7hNR","TabActions":"b-qFq9I","TabAction":"b-0-A80"};
+var styles = {"Tabs":"b-gYzTx","TabList":"b-hDolH","size-l":"b-IDyyx","size-m":"b-qRYAa","size-s":"b-PA-KE","TabItems":"b-QelIi","TabItemButton":"b-buuPU","TabItemButtonText":"b-m0XCv","TabItemButtonContent":"b-zMLCa","active":"b-75jv0","TabActions":"b-qFq9I","TabAction":"b-0-A80"};
 
 export { styles as default };
 //# sourceMappingURL=Tabs.module.scss.mjs.map

package/dist/esm/hooks/useElementTruncated.mjs

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+const useElementTruncated = ref => {
+  const [isTruncated, setTruncated] = useState(false);
+  useEffect(function initResizeObserver() {
+    if (ref.current) {
+      const resizeObserver = new ResizeObserver(entries => {
+        const firstEntry = entries[0];
+        if (firstEntry.target) {
+          setTruncated(firstEntry.target.scrollWidth > firstEntry.target.clientWidth || firstEntry.target.scrollHeight > firstEntry.target.clientHeight);
+        }
+      });
+      resizeObserver.observe(ref.current);
+      return function cleanup() {
+        return resizeObserver.disconnect();
+      };
+    }
+    return undefined;
+  }, [ref]);
+  return isTruncated;
+};
+
+export { useElementTruncated as default };
+//# sourceMappingURL=useElementTruncated.mjs.map

package/dist/esm/hooks/useElementTruncated.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementTruncated.mjs","sources":["../../../src/hooks/useElementTruncated.ts"],"sourcesContent":["import type { RefObject } from 'react'\nimport { useEffect, useState } from 'react'\n\nconst useElementTruncated = <Element extends HTMLElement>(\n  ref: RefObject<Element | null>\n): boolean => {\n  const [isTruncated, setTruncated] = useState(false)\n\n  useEffect(\n    function initResizeObserver() {\n      if (ref.current) {\n        const resizeObserver = new ResizeObserver((entries) => {\n          const firstEntry = entries[0]\n          if (firstEntry.target) {\n            setTruncated(\n              firstEntry.target.scrollWidth > firstEntry.target.clientWidth ||\n                firstEntry.target.scrollHeight > firstEntry.target.clientHeight\n            )\n          }\n        })\n        resizeObserver.observe(ref.current)\n\n        return function cleanup() {\n          return resizeObserver.disconnect()\n        }\n      }\n\n      return undefined\n    },\n    [ref]\n  )\n\n  return isTruncated\n}\n\nexport default useElementTruncated\n"],"names":["useElementTruncated","ref","isTruncated","setTruncated","useState","useEffect","initResizeObserver","current","resizeObserver","ResizeObserver","entries","firstEntry","target","scrollWidth","clientWidth","scrollHeight","clientHeight","observe","cleanup","disconnect","undefined"],"mappings":";;AAGMA,MAAAA,mBAAmB,GACvBC,GAA8B,IAClB;EACZ,MAAM,CAACC,WAAW,EAAEC,YAAY,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;AAEnDC,EAAAA,SAAS,CACP,SAASC,kBAAkBA,GAAG;IAC5B,IAAIL,GAAG,CAACM,OAAO,EAAE;AACf,MAAA,MAAMC,cAAc,GAAG,IAAIC,cAAc,CAAEC,OAAO,IAAK;AACrD,QAAA,MAAMC,UAAU,GAAGD,OAAO,CAAC,CAAC,CAAC;QAC7B,IAAIC,UAAU,CAACC,MAAM,EAAE;UACrBT,YAAY,CACVQ,UAAU,CAACC,MAAM,CAACC,WAAW,GAAGF,UAAU,CAACC,MAAM,CAACE,WAAW,IAC3DH,UAAU,CAACC,MAAM,CAACG,YAAY,GAAGJ,UAAU,CAACC,MAAM,CAACI,YACvD,CAAC;AACH;AACF,OAAC,CAAC;AACFR,MAAAA,cAAc,CAACS,OAAO,CAAChB,GAAG,CAACM,OAAO,CAAC;MAEnC,OAAO,SAASW,OAAOA,GAAG;AACxB,QAAA,OAAOV,cAAc,CAACW,UAAU,EAAE;OACnC;AACH;AAEA,IAAA,OAAOC,SAAS;AAClB,GAAC,EACD,CAACnB,GAAG,CACN,CAAC;AAED,EAAA,OAAOC,WAAW;AACpB;;;;"}