TruncatedText refactor using library

package.json

@@ -120,6 +120,7 @@
     "react-day-picker": "^8.8.0",
     "react-icons": "^4.10.1",
     "react-resizable-panels": "^1.0.9",
+    "react-resize-detector": "^10.0.1",
     "recharts": "^2.7.3",
     "styled-components": "^6.1.1",
     "tailwind-merge": "^1.13.2",

src/components/combobox/combobox.stories.tsx

@@ -127,6 +127,15 @@ export const Demo2: Story = {
   ),
 };
 
-export const Demo3: Story = {
+export const MultipleComboboxes: Story = {
+  render: (_) => (
+    <div className='~grid ~grid-flow-col ~grid-cols-2 ~gap-2'>
+      <Combobox placeholder='Select framework...' values={frameworks} />
+      <Combobox placeholder='Select framework...' values={frameworks} />
+    </div>
+  ),
+};
+
+export const LongListDemo: Story = {
   render: (_) => <Combobox values={longList} />,
 };

src/components/select/select-variants.ts

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const selectVariants = cva([
-  'tw-reset ~flex ~h-9 ~w-full ~items-center ~justify-between ~rounded-md ~border ~border-border ~bg-background ~px-3 ~py-2 ~shadow-sm',
+  'tw-reset ~flex ~h-9 ~w-full ~items-center ~justify-between ~rounded-md ~border ~border-border ~bg-transparent ~px-3 ~py-2 ~shadow-sm',
   '~ring-offset-background',
   'data-[placeholder]:~text-input',
   'focus:~outline-none focus:~ring-1 focus:~ring-ring',

src/components/truncated-text/truncated-text.tsx

@@ -1,38 +1,24 @@
-import { useRef, useEffect, useCallback } from 'react';
+import { useRef, useCallback } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
 
 type Props = {
   children?: React.ReactNode;
   onTruncation?: (isTruncated: boolean) => void;
 };
 
-/** Text which truncates when it overflows its container, & knows when it is being truncated. */
 const TruncatedText = ({ children, onTruncation }: Props) => {
-  const text_ref = useRef<HTMLDivElement>(null);
-
-  // Using useCallback to memoize the function
-  const checkTruncation = useCallback(() => {
-    if (text_ref.current && onTruncation) {
-      onTruncation(text_ref.current.offsetWidth < text_ref.current.scrollWidth);
+  const targetRef = useRef<HTMLDivElement>(null);
+  const onResize = useCallback(() => {
+    if (targetRef.current && onTruncation) {
+      const { scrollWidth, offsetWidth } = targetRef.current;
+      onTruncation(offsetWidth < scrollWidth);
     }
-  }, [onTruncation]);
-
-  useEffect(() => {
-    checkTruncation();
-  }, [children, checkTruncation]); // Added checkTruncation to the dependency array
-
-  useEffect(() => {
-    const resizeObserver = new ResizeObserver(checkTruncation);
-
-    const currentTextRef = text_ref.current;
-    if (currentTextRef) resizeObserver.observe(currentTextRef);
+  }, [onTruncation, targetRef]);
 
-    return () => {
-      if (currentTextRef) resizeObserver.unobserve(currentTextRef);
-    };
-  }, [checkTruncation]); // checkTruncation is now a stable function
+  useResizeDetector({ onResize, targetRef });
 
   return (
-    <div className='~truncate' ref={text_ref}>
+    <div className='~truncate ~bg-gray-200' ref={targetRef}>
       {children}
     </div>
   );