@televet/kibble-ui 5.0.28-rb.0 → 5.0.28

package/dist/chunks/withTruncation-pzYbtqYw.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"withTruncation-pzYbtqYw.js","sources":["../../src/hocs/withTruncation.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Tooltip, TooltipProps } from 'components/Tooltip';\n\nexport interface WithTruncationProps {\n  /** If true, the text will be truncated. */\n  truncated?: boolean;\n  /** The number of lines to truncate the text to. */\n  noOfLines?: number;\n  /** Props to customize the tooltip. See `Tooltip` for more information. */\n  tooltipProps?: Omit<TooltipProps, 'disabled'>;\n  /** The children to be displayed inside the truncated text. */\n  children?: ReactNode | string;\n  /** Data test id for the truncated text.\n   * @default kibble-truncated-text\n   */\n  'data-testid'?: string;\n}\n\n/**\n * Helper function to extract text content from ReactNode\n */\nconst getTextFromChildren = (children: ReactNode | string): string => {\n  if (typeof children === 'string') {\n    return children;\n  }\n  if (typeof children === 'number' || typeof children === 'boolean') {\n    return String(children);\n  }\n  if (React.isValidElement(children)) {\n    const element = children as React.ReactElement<{ children?: ReactNode }>;\n    if (element.props.children) {\n      return getTextFromChildren(element.props.children);\n    }\n  }\n  if (Array.isArray(children)) {\n    return children.map(getTextFromChildren).join(' ');\n  }\n  return '';\n};\n\nexport const withTruncation = <P extends WithTruncationProps>(Component: React.ComponentType<P>): React.FC<P> => {\n  function WithTruncation({\n    truncated = false,\n    noOfLines = 1,\n    children,\n    tooltipProps,\n    ['data-testid']: dataTestId = 'kibble-truncated-text',\n    ...rest\n  }: WithTruncationProps): React.JSX.Element {\n    const [isTextOverFlowing, setIsTextOverFlowing] = useState<boolean>(false);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const textElementRef = useRef<HTMLElement | null>(null);\n    const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n    const checkOverflow = useCallback(() => {\n      if (!containerRef.current) return;\n\n      // Get the actual text element (first child)\n      const textElement = containerRef.current.children[0] as HTMLElement;\n      if (!textElement) return;\n\n      textElementRef.current = textElement;\n\n      // Check if text is overflowing\n      const isOverflowing = textElement.scrollHeight > textElement.clientHeight;\n      setIsTextOverFlowing(isOverflowing);\n    }, []);\n\n    useEffect(() => {\n      if (!truncated) return;\n\n      let timeoutId: number;\n\n      const debouncedCheck = (): void => {\n        window.clearTimeout(timeoutId);\n        timeoutId = window.setTimeout(checkOverflow, 100);\n      };\n\n      // Initial check with a slight delay to ensure rendering is complete\n      const initialCheckTimeout = window.setTimeout(checkOverflow, 50);\n\n      // Observe the container for resize events\n      if (containerRef.current) {\n        resizeObserverRef.current = new ResizeObserver(() => {\n          debouncedCheck();\n        });\n        resizeObserverRef.current.observe(containerRef.current);\n      }\n\n      return (): void => {\n        window.clearTimeout(timeoutId);\n        window.clearTimeout(initialCheckTimeout);\n        if (resizeObserverRef.current) {\n          resizeObserverRef.current.disconnect();\n        }\n      };\n    }, [truncated, checkOverflow, children, noOfLines]);\n\n    const tooltipLabel = useMemo(\n      () => tooltipProps?.label || getTextFromChildren(children),\n      [children, tooltipProps?.label],\n    );\n\n    if (!truncated) {\n      return (\n        <Component {...(rest as P)} data-testid={dataTestId}>\n          {children}\n        </Component>\n      );\n    }\n\n    return (\n      <Tooltip\n        {...tooltipProps}\n        label={tooltipLabel}\n        disabled={!isTextOverFlowing}\n        data-testid={`${dataTestId}-tooltip`}\n      >\n        <Box\n          ref={containerRef}\n          width=\"100%\"\n          minWidth={0}\n          overflow=\"hidden\"\n          flex=\"1 1 auto\"\n          className=\"TruncatedText__Wrapper\"\n          data-testid={`${dataTestId}-wrapper`}\n        >\n          <Component\n            className=\"TruncatedText__TextContent\"\n            data-testid={`${dataTestId}-content`}\n            css={{\n              display: '-webkit-box',\n              WebkitBoxOrient: 'vertical',\n              WebkitLineClamp: noOfLines,\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n            {...(rest as P)}\n          >\n            {children}\n          </Component>\n        </Box>\n      </Tooltip>\n    );\n  }\n\n  WithTruncation.displayName = `withTruncation(${Component.displayName || Component.name})`;\n  return WithTruncation;\n};\n"],"names":["getTextFromChildren","children","React","element","withTruncation","Component","WithTruncation","truncated","noOfLines","tooltipProps","dataTestId","rest","isTextOverFlowing","setIsTextOverFlowing","useState","containerRef","useRef","textElementRef","resizeObserverRef","checkOverflow","useCallback","textElement","isOverflowing","useEffect","timeoutId","debouncedCheck","initialCheckTimeout","tooltipLabel","useMemo","jsx","Tooltip","Box"],"mappings":"qMAsBMA,EAAuBC,GAAyC,CAChE,GAAA,OAAOA,GAAa,SACf,OAAAA,EAET,GAAI,OAAOA,GAAa,UAAY,OAAOA,GAAa,UACtD,OAAO,OAAOA,CAAQ,EAEpB,GAAAC,EAAA,QAAM,eAAeD,CAAQ,EAAG,CAClC,MAAME,EAAUF,EACZ,GAAAE,EAAQ,MAAM,SACT,OAAAH,EAAoBG,EAAQ,MAAM,QAAQ,CACnD,CAEE,OAAA,MAAM,QAAQF,CAAQ,EACjBA,EAAS,IAAID,CAAmB,EAAE,KAAK,GAAG,EAE5C,EACT,EAEaI,EAAiDC,GAAmD,CAC/G,SAASC,EAAe,CACtB,UAAAC,EAAY,GACZ,UAAAC,EAAY,EACZ,SAAAP,EACA,aAAAQ,EACA,CAAC,aAAa,EAAGC,EAAa,wBAC9B,GAAGC,CAAA,EACsC,CACzC,KAAM,CAACC,EAAmBC,CAAoB,EAAIC,EAAAA,SAAkB,EAAK,EACnEC,EAAeC,SAAuB,IAAI,EAC1CC,EAAiBD,SAA2B,IAAI,EAChDE,EAAoBF,SAA8B,IAAI,EAEtDG,EAAgBC,EAAAA,YAAY,IAAM,CAClC,GAAA,CAACL,EAAa,QAAS,OAG3B,MAAMM,EAAcN,EAAa,QAAQ,SAAS,CAAC,EACnD,GAAI,CAACM,EAAa,OAElBJ,EAAe,QAAUI,EAGnB,MAAAC,EAAgBD,EAAY,aAAeA,EAAY,aAC7DR,EAAqBS,CAAa,CACpC,EAAG,EAAE,EAELC,EAAAA,UAAU,IAAM,CACd,GAAI,CAAChB,EAAW,OAEZ,IAAAiB,EAEJ,MAAMC,EAAiB,IAAY,CACjC,OAAO,aAAaD,CAAS,EACjBA,EAAA,OAAO,WAAWL,EAAe,GAAG,CAClD,EAGMO,EAAsB,OAAO,WAAWP,EAAe,EAAE,EAG/D,OAAIJ,EAAa,UACGG,EAAA,QAAU,IAAI,eAAe,IAAM,CACpCO,EAAA,CAAA,CAChB,EACiBP,EAAA,QAAQ,QAAQH,EAAa,OAAO,GAGjD,IAAY,CACjB,OAAO,aAAaS,CAAS,EAC7B,OAAO,aAAaE,CAAmB,EACnCR,EAAkB,SACpBA,EAAkB,QAAQ,WAAW,CAEzC,GACC,CAACX,EAAWY,EAAelB,EAAUO,CAAS,CAAC,EAElD,MAAMmB,EAAeC,EAAA,QACnB,IAAMnB,GAAc,OAAST,EAAoBC,CAAQ,EACzD,CAACA,EAAUQ,GAAc,KAAK,CAChC,EAEA,OAAKF,EASHsB,EAAA,kBAAA,IAACC,EAAA,QAAA,CACE,GAAGrB,EACJ,MAAOkB,EACP,SAAU,CAACf,EACX,cAAa,GAAGF,CAAU,WAE1B,SAAAmB,EAAA,kBAAA,IAACE,EAAA,IAAA,CACC,IAAKhB,EACL,MAAM,OACN,SAAU,EACV,SAAS,SACT,KAAK,WACL,UAAU,yBACV,cAAa,GAAGL,CAAU,WAE1B,SAAAmB,EAAA,kBAAA,IAACxB,EAAA,CACC,UAAU,6BACV,cAAa,GAAGK,CAAU,WAC1B,IAAK,CACH,QAAS,cACT,gBAAiB,WACjB,gBAAiBF,EACjB,SAAU,SACV,aAAc,UAChB,EACC,GAAIG,EAEJ,SAAAV,CAAA,CAAA,CACH,CAAA,CACF,CACF,0BArCGI,EAAW,CAAA,GAAIM,EAAY,cAAaD,EACtC,SAAAT,EACH,CAmCF,CAIJ,OAAAK,EAAe,YAAc,kBAAkBD,EAAU,aAAeA,EAAU,IAAI,IAC/EC,CACT"}