@xyo-network/react-shared 2.64.0 → 2.64.2

package/dist/browser/components/TableCell/EllipsisTableCell.js

@@ -1,31 +1,120 @@
-import { jsx } from "react/jsx-runtime";
-import { styled, TableCell } from "@mui/material";
+// src/components/TableCell/EllipsisTableCell.tsx
+import { styled as styled2, TableCell } from "@mui/material";
 import { LinkEx } from "@xylabs/react-link";
-import { forwardRef, useMemo } from "react";
-import { EllipsizeBox } from "../Ellipsize";
-const EllipsisTableCellRoot = styled(TableCell, {
+import { forwardRef as forwardRef2, useMemo } from "react";
+
+// src/components/Ellipsize.tsx
+import { Box, styled, Typography } from "@mui/material";
+import { forwardRef, useCallback, useState } from "react";
+
+// src/hooks/useShareForwardRef.ts
+import { useEffect, useRef } from "react";
+var useShareForwardedRef = (forwardedRef, refresh = 0) => {
+  const innerRef = useRef(null);
+  useEffect(() => {
+    if (!forwardedRef) {
+      return;
+    }
+    if (typeof forwardedRef === "function") {
+      forwardedRef(innerRef.current);
+      return;
+    } else {
+      forwardedRef.current = innerRef.current;
+    }
+  }, [forwardedRef, refresh]);
+  return innerRef;
+};
+
+// src/components/Ellipsize.tsx
+import { jsx } from "react/jsx-runtime";
+var ComponentName = "Ellipsize";
+var EllipsizeRoot = styled(Box, {
+  name: ComponentName,
+  shouldForwardProp: (prop) => prop !== "beforeLineHeight",
+  slot: "Root"
+})(({ beforeLineHeight }) => ({
+  "&": {
+    // because the cell content ends up absolutely positioned, the cell doesn't know the content height.
+    // the pseudo element with a hidden character establishes the proper height of the content and hides it
+    ":before": {
+      content: "'nbsp;'",
+      display: "block",
+      // take the pseudo element out of the `display: block` flow so it won't push against our actual content
+      float: "left",
+      visibility: "hidden",
+      // since we are `display: block`, lineHeight is the height
+      ...beforeLineHeight && { lineHeight: beforeLineHeight }
+    }
+  }
+}));
+var EllipsizeInnerWrap = styled(Box, {
+  name: ComponentName,
+  slot: "innerWrap"
+})(() => ({
+  position: "relative"
+}));
+var EllipsizeContentWrap = styled(Typography, {
+  name: ComponentName,
+  shouldForwardProp: (prop) => prop !== "ellipsisPosition",
+  slot: "contentWrap"
+})(({ theme, ellipsisPosition, fontFamily }) => {
+  return theme.unstable_sx({
+    fontFamily: fontFamily ?? "monospace",
+    left: 0,
+    overflow: "hidden",
+    position: "absolute",
+    right: 0,
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    ...ellipsisPosition === "start" ? {
+      direction: "rtl",
+      textAlign: "left"
+    } : {}
+  });
+});
+var useClientHeight = () => {
+  const [contentWrapHeight, setContentWrapHeight] = useState();
+  const contentWrapRef = useCallback((node) => {
+    if (node !== null) {
+      setContentWrapHeight(node.clientHeight + "px");
+    }
+  }, []);
+  return { contentWrapHeight, contentWrapRef };
+};
+var EllipsizeBox = forwardRef(
+  ({ children, ellipsisPosition = "start", disableSharedRef, typographyProps, ...props }, ref) => {
+    const { contentWrapRef, contentWrapHeight } = useClientHeight();
+    const sharedRef = useShareForwardedRef(ref);
+    return /* @__PURE__ */ jsx(EllipsizeRoot, { beforeLineHeight: !!sharedRef && !disableSharedRef ? contentWrapHeight : void 0, ...props, ref, children: /* @__PURE__ */ jsx(EllipsizeInnerWrap, { children: /* @__PURE__ */ jsx(EllipsizeContentWrap, { ref: contentWrapRef, component: "span", ellipsisPosition, variant: "body2", ...typographyProps, children }) }) });
+  }
+);
+EllipsizeBox.displayName = "EllipsizeBox";
+
+// src/components/TableCell/EllipsisTableCell.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var EllipsisTableCellRoot = styled2(TableCell, {
   name: "EllipsisTableCell",
   shouldForwardProp: (prop) => prop !== "width",
   slot: "Root"
 })(({ width = "100%" }) => ({
   width
 }));
-const EllipsisTableCellWithRef = forwardRef(
+var EllipsisTableCellWithRef = forwardRef2(
   ({ children, href, link = false, to, value, ...props }, ref) => {
     const data = useMemo(() => {
       if (children) {
         return children;
       }
       if (href || link || to) {
-        return /* @__PURE__ */ jsx(LinkEx, { title: value, to, href, target: href ? "_blank" : void 0, children: value });
+        return /* @__PURE__ */ jsx2(LinkEx, { title: value, to, href, target: href ? "_blank" : void 0, children: value });
       }
       return value;
     }, [children, href, link, to, value]);
-    return /* @__PURE__ */ jsx(EllipsisTableCellRoot, { ref, ...props, children: /* @__PURE__ */ jsx(EllipsizeBox, { sx: { cursor: link || to || href ? "pointer" : "inherit" }, children: data }) });
+    return /* @__PURE__ */ jsx2(EllipsisTableCellRoot, { ref, ...props, children: /* @__PURE__ */ jsx2(EllipsizeBox, { sx: { cursor: link || to || href ? "pointer" : "inherit" }, children: data }) });
   }
 );
 EllipsisTableCellWithRef.displayName = "EllipsisTableCell";
-const EllipsisTableCell = EllipsisTableCellWithRef;
+var EllipsisTableCell = EllipsisTableCellWithRef;
 export {
   EllipsisTableCell,
   EllipsisTableCellWithRef

package/dist/browser/components/TableCell/EllipsisTableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"sourcesContent":["import { styled, TableCell, TableCellProps } from '@mui/material'\nimport { LinkEx } from '@xylabs/react-link'\nimport type { WithChildren } from '@xylabs/react-shared'\nimport { forwardRef, useMemo } from 'react'\nimport { To } from 'react-router-dom'\n\nimport { EllipsizeBox } from '../Ellipsize'\n\nconst EllipsisTableCellRoot = styled(TableCell, {\n  name: 'EllipsisTableCell',\n  shouldForwardProp: (prop) => prop !== 'width',\n  slot: 'Root',\n})(({ width = '100%' }) => ({\n  width,\n}))\n\nexport interface EllipsisTableCellProps extends TableCellProps {\n  href?: string\n  link?: boolean\n  to?: To\n  value?: string\n  /**\n   * Width of the table cell.\n   *\n   * Note: When using percentages, this value can be different than what you expect\n   * if used on a cell that is not the first cell in the first row.\n   */\n  width?: string | number\n}\n\nexport const EllipsisTableCellWithRef: React.FC<WithChildren<EllipsisTableCellProps>> = forwardRef(\n  ({ children, href, link = false, to, value, ...props }, ref) => {\n    const data = useMemo(() => {\n      if (children) {\n        return children\n      }\n      if (href || link || to) {\n        return (\n          <LinkEx title={value} to={to} href={href} target={href ? '_blank' : undefined}>\n            {value}\n          </LinkEx>\n        )\n      }\n      return value\n    }, [children, href, link, to, value])\n    return (\n      <EllipsisTableCellRoot ref={ref} {...props}>\n        <EllipsizeBox sx={{ cursor: link || to || href ? 'pointer' : 'inherit' }}>{data}</EllipsizeBox>\n      </EllipsisTableCellRoot>\n    )\n  },\n)\n\nEllipsisTableCellWithRef.displayName = 'EllipsisTableCell'\nexport const EllipsisTableCell = EllipsisTableCellWithRef\n"],"mappings":"AAsCU;AAtCV,SAAS,QAAQ,iBAAiC;AAClD,SAAS,cAAc;AAEvB,SAAS,YAAY,eAAe;AAGpC,SAAS,oBAAoB;AAE7B,MAAM,wBAAwB,OAAO,WAAW;AAAA,EAC9C,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,SAAS;AAAA,EACtC,MAAM;AACR,CAAC,EAAE,CAAC,EAAE,QAAQ,OAAO,OAAO;AAAA,EAC1B;AACF,EAAE;AAgBK,MAAM,2BAA2E;AAAA,EACtF,CAAC,EAAE,UAAU,MAAM,OAAO,OAAO,IAAI,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC9D,UAAM,OAAO,QAAQ,MAAM;AACzB,UAAI,UAAU;AACZ,eAAO;AAAA,MACT;AACA,UAAI,QAAQ,QAAQ,IAAI;AACtB,eACE,oBAAC,UAAO,OAAO,OAAO,IAAQ,MAAY,QAAQ,OAAO,WAAW,QACjE,iBACH;AAAA,MAEJ;AACA,aAAO;AAAA,IACT,GAAG,CAAC,UAAU,MAAM,MAAM,IAAI,KAAK,CAAC;AACpC,WACE,oBAAC,yBAAsB,KAAW,GAAG,OACnC,8BAAC,gBAAa,IAAI,EAAE,QAAQ,QAAQ,MAAM,OAAO,YAAY,UAAU,GAAI,gBAAK,GAClF;AAAA,EAEJ;AACF;AAEA,yBAAyB,cAAc;AAChC,MAAM,oBAAoB;","names":[]}
+{"version":3,"sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx","../../../../src/components/Ellipsize.tsx","../../../../src/hooks/useShareForwardRef.ts"],"sourcesContent":["import { styled, TableCell, TableCellProps } from '@mui/material'\nimport { LinkEx } from '@xylabs/react-link'\nimport type { WithChildren } from '@xylabs/react-shared'\nimport { forwardRef, useMemo } from 'react'\nimport { To } from 'react-router-dom'\n\nimport { EllipsizeBox } from '../Ellipsize'\n\nconst EllipsisTableCellRoot = styled(TableCell, {\n  name: 'EllipsisTableCell',\n  shouldForwardProp: (prop) => prop !== 'width',\n  slot: 'Root',\n})(({ width = '100%' }) => ({\n  width,\n}))\n\nexport interface EllipsisTableCellProps extends TableCellProps {\n  href?: string\n  link?: boolean\n  to?: To\n  value?: string\n  /**\n   * Width of the table cell.\n   *\n   * Note: When using percentages, this value can be different than what you expect\n   * if used on a cell that is not the first cell in the first row.\n   */\n  width?: string | number\n}\n\nexport const EllipsisTableCellWithRef: React.FC<WithChildren<EllipsisTableCellProps>> = forwardRef(\n  ({ children, href, link = false, to, value, ...props }, ref) => {\n    const data = useMemo(() => {\n      if (children) {\n        return children\n      }\n      if (href || link || to) {\n        return (\n          <LinkEx title={value} to={to} href={href} target={href ? '_blank' : undefined}>\n            {value}\n          </LinkEx>\n        )\n      }\n      return value\n    }, [children, href, link, to, value])\n    return (\n      <EllipsisTableCellRoot ref={ref} {...props}>\n        <EllipsizeBox sx={{ cursor: link || to || href ? 'pointer' : 'inherit' }}>{data}</EllipsizeBox>\n      </EllipsisTableCellRoot>\n    )\n  },\n)\n\nEllipsisTableCellWithRef.displayName = 'EllipsisTableCell'\nexport const EllipsisTableCell = EllipsisTableCellWithRef\n","import { Box, BoxProps, styled, Typography, TypographyProps, TypographyTypeMap } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { forwardRef, useCallback, useState } from 'react'\n\nimport { useShareForwardedRef } from '../hooks'\n\n/**\n * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259\n */\n\nconst ComponentName = 'Ellipsize'\n\nexport interface EllipsizeRootProps extends BoxProps {\n  beforeLineHeight?: string | number\n}\n\nconst EllipsizeRoot = styled(Box, {\n  name: ComponentName,\n  shouldForwardProp: (prop) => prop !== 'beforeLineHeight',\n  slot: 'Root',\n})<EllipsizeRootProps>(({ beforeLineHeight }) => ({\n  '&': {\n    // because the cell content ends up absolutely positioned, the cell doesn't know the content height.\n    // the pseudo element with a hidden character establishes the proper height of the content and hides it\n    ':before': {\n      content: \"'nbsp;'\",\n      display: 'block',\n      // take the pseudo element out of the `display: block` flow so it won't push against our actual content\n      float: 'left',\n      visibility: 'hidden',\n      // since we are `display: block`, lineHeight is the height\n      ...(beforeLineHeight && { lineHeight: beforeLineHeight }),\n    },\n  },\n}))\n\nconst EllipsizeInnerWrap = styled(Box, {\n  name: ComponentName,\n  slot: 'innerWrap',\n})(() => ({\n  position: 'relative',\n}))\n\nconst EllipsizeContentWrap = styled(Typography, {\n  name: ComponentName,\n  shouldForwardProp: (prop) => prop !== 'ellipsisPosition',\n  slot: 'contentWrap',\n})<TypographyWithComponentProps>(({ theme, ellipsisPosition, fontFamily }) => {\n  return theme.unstable_sx({\n    fontFamily: fontFamily ?? 'monospace',\n    left: 0,\n    overflow: 'hidden',\n    position: 'absolute',\n    right: 0,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    ...(ellipsisPosition === 'start'\n      ? {\n          direction: 'rtl',\n          textAlign: 'left',\n        }\n      : {}),\n  })\n})\n\nconst useClientHeight = () => {\n  const [contentWrapHeight, setContentWrapHeight] = useState<string>()\n\n  const contentWrapRef = useCallback((node: HTMLElement) => {\n    if (node !== null) {\n      setContentWrapHeight(node.clientHeight + 'px')\n    }\n  }, [])\n\n  return { contentWrapHeight, contentWrapRef }\n}\n\n// See - https://mui.com/material-ui/guides/composition/#with-typescript\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type TypographyWithComponentProps<D extends React.ElementType = TypographyTypeMap['defaultComponent'], P = {}> = TypographyProps<D, P> & {\n  ellipsisPosition?: 'start' | 'end'\n}\n\nexport interface EllipsizeBoxProps extends BoxProps {\n  disableSharedRef?: boolean\n  ellipsisPosition?: 'start' | 'end'\n  typographyProps?: TypographyWithComponentProps\n}\n\nexport const EllipsizeBox = forwardRef<HTMLDivElement, WithChildren<EllipsizeBoxProps>>(\n  ({ children, ellipsisPosition = 'start', disableSharedRef, typographyProps, ...props }, ref) => {\n    // Allow syncing of :before pseudo element height with contentWrapHeight\n    const { contentWrapRef, contentWrapHeight } = useClientHeight()\n    const sharedRef = useShareForwardedRef(ref)\n\n    return (\n      <EllipsizeRoot beforeLineHeight={!!sharedRef && !disableSharedRef ? contentWrapHeight : undefined} {...props} ref={ref}>\n        <EllipsizeInnerWrap>\n          <EllipsizeContentWrap ref={contentWrapRef} component={'span'} ellipsisPosition={ellipsisPosition} variant=\"body2\" {...typographyProps}>\n            {children}\n          </EllipsizeContentWrap>\n        </EllipsizeInnerWrap>\n      </EllipsizeRoot>\n    )\n  },\n)\nEllipsizeBox.displayName = 'EllipsizeBox'\n","import { ForwardedRef, useEffect, useRef } from 'react'\n\nexport const useShareForwardedRef = <T>(forwardedRef: ForwardedRef<T>, refresh = 0) => {\n  // final ref that will share value with forward ref. this is the one to be attached to components\n  const innerRef = useRef<T>(null)\n\n  useEffect(() => {\n    if (!forwardedRef) {\n      return\n    }\n    if (typeof forwardedRef === 'function') {\n      forwardedRef(innerRef.current)\n      return\n    } else {\n      forwardedRef.current = innerRef.current\n    }\n  }, [forwardedRef, refresh])\n\n  return innerRef\n}\n"],"mappings":"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","names":["styled","forwardRef","jsx","styled","forwardRef"]}

package/dist/browser/components/TableCell/EllipsisTableCellDeprecated.js

@@ -1,12 +1,113 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/TableCell/EllipsisTableCellDeprecated.tsx
 import { TableCell, useTheme } from "@mui/material";
 import { LinkEx } from "@xylabs/react-link";
 import { useEffect, useRef, useState } from "react";
-import { getActualPaddingX } from "../../lib";
-import { findParent } from "./findParent";
-import { getRemainingRowWidth } from "./getRemainingRowWidth";
-import { getSmallestParentWidth } from "./getSmallestParentWidth";
-const EllipsisTableCellDeprecated = ({ children, value, to, forCell, href, ...props }) => {
+
+// src/lib/getActualPaddingX.ts
+var parseMeausureString = (measure, absolute) => {
+  if (measure !== void 0 && measure !== null && measure.length > 0) {
+    if (measure.endsWith("px")) {
+      return parseFloat(measure.substring(0, measure.length - 2));
+    } else if (measure.endsWith("%")) {
+      if (absolute !== void 0) {
+        return parseFloat(measure.substring(0, measure.length - 1)) / 100 * absolute;
+      }
+      throw Error("Error Parsing Measure [missing absolute]");
+    } else if (measure.endsWith("vw")) {
+      return parseFloat(measure.substring(0, measure.length - 2)) / 100 * window.innerWidth;
+    } else if (measure.endsWith("vh")) {
+      return parseFloat(measure.substring(0, measure.length - 2)) / 100 * window.innerHeight;
+    }
+    throw Error(`Error Parsing Measure [${measure}]`);
+  }
+};
+var parsePadding = (padding) => {
+  const parts = padding.split(" ");
+  switch (parts.length) {
+    case 4: {
+      return {
+        bottom: parts[2],
+        left: parts[3],
+        right: parts[1],
+        top: parts[0]
+      };
+    }
+    case 3: {
+      return {
+        bottom: parts[2],
+        right: parts[1],
+        top: parts[0]
+      };
+    }
+    case 2: {
+      return {
+        bottom: parts[0],
+        left: parts[1],
+        right: parts[1],
+        top: parts[0]
+      };
+    }
+    case 1: {
+      return {
+        bottom: parts[0],
+        left: parts[0],
+        right: parts[0],
+        top: parts[0]
+      };
+    }
+  }
+};
+var getActualPaddingX = (element) => {
+  const padding = parsePadding(window.getComputedStyle(element, null).getPropertyValue("padding"));
+  const paddingLeft = parseMeausureString(window.getComputedStyle(element, null).getPropertyValue("padding-left") ?? padding?.left, element.clientWidth) ?? 0;
+  const paddingRight = parseMeausureString(window.getComputedStyle(element, null).getPropertyValue("padding-right") ?? padding?.right, element.clientWidth) ?? 0;
+  return paddingLeft + paddingRight;
+};
+
+// src/components/TableCell/findParent.ts
+var findParent = (tagName, element = null) => {
+  let currentElement = element;
+  while (currentElement) {
+    if (currentElement.tagName.toLowerCase() === tagName.toLowerCase()) {
+      return currentElement;
+    } else {
+      currentElement = currentElement.parentElement;
+    }
+  }
+};
+
+// src/components/TableCell/getRemainingRowWidth.ts
+var getRemainingRowWidth = (row, forCell = 0) => {
+  let width = 0;
+  for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
+    const item = row?.children.item(i);
+    if (item) {
+      if (i !== forCell) {
+        width += item?.clientWidth ?? 0;
+      }
+    }
+  }
+  return width;
+};
+
+// src/components/TableCell/getSmallestParentWidth.ts
+var getSmallestParentWidth = (element, maxDepth = 4) => {
+  let currentElement = element?.parentElement;
+  let width = currentElement?.clientWidth ?? screen.width;
+  let maxDepthCounter = maxDepth;
+  while (currentElement && maxDepthCounter > 0) {
+    if (width > currentElement.clientWidth) {
+      width = currentElement.clientWidth;
+    }
+    currentElement = currentElement.parentElement;
+    maxDepthCounter--;
+  }
+  return width;
+};
+
+// src/components/TableCell/EllipsisTableCellDeprecated.tsx
+import { jsx } from "react/jsx-runtime";
+var EllipsisTableCellDeprecated = ({ children, value, to, forCell, href, ...props }) => {
   const [calcCellWidth, setCalcCellWidth] = useState(0);
   const hashDivRef = useRef(null);
   const theme = useTheme();

package/dist/browser/components/TableCell/EllipsisTableCellDeprecated.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TableCell/EllipsisTableCellDeprecated.tsx"],"sourcesContent":["import { TableCell, TableCellProps, useTheme } from '@mui/material'\nimport { LinkEx } from '@xylabs/react-link'\nimport { useEffect, useRef, useState } from 'react'\nimport { To } from 'react-router-dom'\n\nimport { getActualPaddingX } from '../../lib'\nimport { findParent } from './findParent'\nimport { getRemainingRowWidth } from './getRemainingRowWidth'\nimport { getSmallestParentWidth } from './getSmallestParentWidth'\n\nexport interface EllipsisTableCellProps extends TableCellProps {\n  forCell?: number //cell index for ellipsized table cell\n  href?: string | undefined\n  to?: To | undefined\n  value?: string\n}\n\n/** @deprecated - use new EllipsisTableCell */\nexport const EllipsisTableCellDeprecated: React.FC<EllipsisTableCellProps> = ({ children, value, to, forCell, href, ...props }) => {\n  const [calcCellWidth, setCalcCellWidth] = useState<number>(0)\n  const hashDivRef = useRef<HTMLDivElement>(null)\n  const theme = useTheme()\n\n  useEffect(() => {\n    const currentElement = hashDivRef.current?.parentElement\n    const cell = findParent('td', currentElement)\n    const row = findParent('tr', currentElement)\n\n    const checkWidth = (cell: HTMLElement) => {\n      const smallestParentWidth = getSmallestParentWidth(cell)\n      if (smallestParentWidth && row) {\n        const remainingWidth = getRemainingRowWidth(row, forCell)\n        const actualPaddingX = getActualPaddingX(cell)\n        const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX\n        cell.style.width = `${remainderWidth}`\n        setCalcCellWidth(remainderWidth)\n      }\n    }\n\n    const onResize = () => {\n      if (cell) {\n        checkWidth(cell)\n      }\n    }\n\n    if (cell) {\n      checkWidth(cell)\n      window.addEventListener('resize', onResize)\n      row?.addEventListener('resize', onResize)\n    }\n    return () => {\n      window.removeEventListener('resize', onResize)\n      row?.removeEventListener('resize', onResize)\n    }\n  }, [forCell, hashDivRef])\n\n  return (\n    <TableCell {...props}>\n      <div ref={hashDivRef}>\n        {children ? (\n          <span\n            style={{\n              display: 'block',\n              maxWidth: calcCellWidth,\n              minWidth: theme.spacing(10),\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              whiteSpace: 'nowrap',\n            }}\n          >\n            {children}\n          </span>\n        ) : href || to ? (\n          <LinkEx\n            style={{\n              display: 'block',\n              maxWidth: calcCellWidth,\n              minWidth: theme.spacing(10),\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              whiteSpace: 'nowrap',\n            }}\n            to={to}\n            href={href}\n            target={href ? '_blank' : undefined}\n          >\n            {value}\n          </LinkEx>\n        ) : (\n          <span\n            style={{\n              display: 'block',\n              maxWidth: calcCellWidth,\n              minWidth: theme.spacing(10),\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              whiteSpace: 'nowrap',\n            }}\n          >\n            {value}\n          </span>\n        )}\n      </div>\n    </TableCell>\n  )\n}\n"],"mappings":"AA4DU;AA5DV,SAAS,WAA2B,gBAAgB;AACpD,SAAS,cAAc;AACvB,SAAS,WAAW,QAAQ,gBAAgB;AAG5C,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AAUhC,MAAM,8BAAgE,CAAC,EAAE,UAAU,OAAO,IAAI,SAAS,MAAM,GAAG,MAAM,MAAM;AACjI,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAiB,CAAC;AAC5D,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,QAAQ,SAAS;AAEvB,YAAU,MAAM;AACd,UAAM,iBAAiB,WAAW,SAAS;AAC3C,UAAM,OAAO,WAAW,MAAM,cAAc;AAC5C,UAAM,MAAM,WAAW,MAAM,cAAc;AAE3C,UAAM,aAAa,CAACA,UAAsB;AACxC,YAAM,sBAAsB,uBAAuBA,KAAI;AACvD,UAAI,uBAAuB,KAAK;AAC9B,cAAM,iBAAiB,qBAAqB,KAAK,OAAO;AACxD,cAAM,iBAAiB,kBAAkBA,KAAI;AAC7C,cAAM,iBAAiB,sBAAsB,iBAAiB;AAC9D,QAAAA,MAAK,MAAM,QAAQ,GAAG,cAAc;AACpC,yBAAiB,cAAc;AAAA,MACjC;AAAA,IACF;AAEA,UAAM,WAAW,MAAM;AACrB,UAAI,MAAM;AACR,mBAAW,IAAI;AAAA,MACjB;AAAA,IACF;AAEA,QAAI,MAAM;AACR,iBAAW,IAAI;AACf,aAAO,iBAAiB,UAAU,QAAQ;AAC1C,WAAK,iBAAiB,UAAU,QAAQ;AAAA,IAC1C;AACA,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,QAAQ;AAC7C,WAAK,oBAAoB,UAAU,QAAQ;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,SAAS,UAAU,CAAC;AAExB,SACE,oBAAC,aAAW,GAAG,OACb,8BAAC,SAAI,KAAK,YACP,qBACC;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,MAAM,QAAQ,EAAE;AAAA,QAC1B,UAAU;AAAA,QACV,cAAc;AAAA,QACd,YAAY;AAAA,MACd;AAAA,MAEC;AAAA;AAAA,EACH,IACE,QAAQ,KACV;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,MAAM,QAAQ,EAAE;AAAA,QAC1B,UAAU;AAAA,QACV,cAAc;AAAA,QACd,YAAY;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,OAAO,WAAW;AAAA,MAEzB;AAAA;AAAA,EACH,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,MAAM,QAAQ,EAAE;AAAA,QAC1B,UAAU;AAAA,QACV,cAAc;AAAA,QACd,YAAY;AAAA,MACd;AAAA,MAEC;AAAA;AAAA,EACH,GAEJ,GACF;AAEJ;","names":["cell"]}
+{"version":3,"sources":["../../../../src/components/TableCell/EllipsisTableCellDeprecated.tsx","../../../../src/lib/getActualPaddingX.ts","../../../../src/components/TableCell/findParent.ts","../../../../src/components/TableCell/getRemainingRowWidth.ts","../../../../src/components/TableCell/getSmallestParentWidth.ts"],"sourcesContent":["import { TableCell, TableCellProps, useTheme } from '@mui/material'\nimport { LinkEx } from '@xylabs/react-link'\nimport { useEffect, useRef, useState } from 'react'\nimport { To } from 'react-router-dom'\n\nimport { getActualPaddingX } from '../../lib'\nimport { findParent } from './findParent'\nimport { getRemainingRowWidth } from './getRemainingRowWidth'\nimport { getSmallestParentWidth } from './getSmallestParentWidth'\n\nexport interface EllipsisTableCellProps extends TableCellProps {\n  forCell?: number //cell index for ellipsized table cell\n  href?: string | undefined\n  to?: To | undefined\n  value?: string\n}\n\n/** @deprecated - use new EllipsisTableCell */\nexport const EllipsisTableCellDeprecated: React.FC<EllipsisTableCellProps> = ({ children, value, to, forCell, href, ...props }) => {\n  const [calcCellWidth, setCalcCellWidth] = useState<number>(0)\n  const hashDivRef = useRef<HTMLDivElement>(null)\n  const theme = useTheme()\n\n  useEffect(() => {\n    const currentElement = hashDivRef.current?.parentElement\n    const cell = findParent('td', currentElement)\n    const row = findParent('tr', currentElement)\n\n    const checkWidth = (cell: HTMLElement) => {\n      const smallestParentWidth = getSmallestParentWidth(cell)\n      if (smallestParentWidth && row) {\n        const remainingWidth = getRemainingRowWidth(row, forCell)\n        const actualPaddingX = getActualPaddingX(cell)\n        const remainderWidth = smallestParentWidth - remainingWidth - actualPaddingX\n        cell.style.width = `${remainderWidth}`\n        setCalcCellWidth(remainderWidth)\n      }\n    }\n\n    const onResize = () => {\n      if (cell) {\n        checkWidth(cell)\n      }\n    }\n\n    if (cell) {\n      checkWidth(cell)\n      window.addEventListener('resize', onResize)\n      row?.addEventListener('resize', onResize)\n    }\n    return () => {\n      window.removeEventListener('resize', onResize)\n      row?.removeEventListener('resize', onResize)\n    }\n  }, [forCell, hashDivRef])\n\n  return (\n    <TableCell {...props}>\n      <div ref={hashDivRef}>\n        {children ? (\n          <span\n            style={{\n              display: 'block',\n              maxWidth: calcCellWidth,\n              minWidth: theme.spacing(10),\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              whiteSpace: 'nowrap',\n            }}\n          >\n            {children}\n          </span>\n        ) : href || to ? (\n          <LinkEx\n            style={{\n              display: 'block',\n              maxWidth: calcCellWidth,\n              minWidth: theme.spacing(10),\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              whiteSpace: 'nowrap',\n            }}\n            to={to}\n            href={href}\n            target={href ? '_blank' : undefined}\n          >\n            {value}\n          </LinkEx>\n        ) : (\n          <span\n            style={{\n              display: 'block',\n              maxWidth: calcCellWidth,\n              minWidth: theme.spacing(10),\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              whiteSpace: 'nowrap',\n            }}\n          >\n            {value}\n          </span>\n        )}\n      </div>\n    </TableCell>\n  )\n}\n","export const parseMeausureString = (measure?: string, absolute?: number) => {\n  if (measure !== undefined && measure !== null && measure.length > 0) {\n    if (measure.endsWith('px')) {\n      return parseFloat(measure.substring(0, measure.length - 2))\n    } else if (measure.endsWith('%')) {\n      if (absolute !== undefined) {\n        return (parseFloat(measure.substring(0, measure.length - 1)) / 100) * absolute\n      }\n      throw Error('Error Parsing Measure [missing absolute]')\n    } else if (measure.endsWith('vw')) {\n      return (parseFloat(measure.substring(0, measure.length - 2)) / 100) * window.innerWidth\n    } else if (measure.endsWith('vh')) {\n      return (parseFloat(measure.substring(0, measure.length - 2)) / 100) * window.innerHeight\n    }\n    throw Error(`Error Parsing Measure [${measure}]`)\n  }\n}\n\nexport const parsePadding = (padding: string) => {\n  const parts = padding.split(' ')\n  switch (parts.length) {\n    case 4: {\n      return {\n        bottom: parts[2],\n        left: parts[3],\n        right: parts[1],\n        top: parts[0],\n      }\n    }\n    case 3: {\n      return {\n        bottom: parts[2],\n        right: parts[1],\n        top: parts[0],\n      }\n    }\n    case 2: {\n      return {\n        bottom: parts[0],\n        left: parts[1],\n        right: parts[1],\n        top: parts[0],\n      }\n    }\n    case 1: {\n      return {\n        bottom: parts[0],\n        left: parts[0],\n        right: parts[0],\n        top: parts[0],\n      }\n    }\n  }\n}\n\nexport const getActualPaddingX = (element: HTMLElement) => {\n  const padding = parsePadding(window.getComputedStyle(element, null).getPropertyValue('padding'))\n  const paddingLeft =\n    parseMeausureString(window.getComputedStyle(element, null).getPropertyValue('padding-left') ?? padding?.left, element.clientWidth) ?? 0\n  const paddingRight =\n    parseMeausureString(window.getComputedStyle(element, null).getPropertyValue('padding-right') ?? padding?.right, element.clientWidth) ?? 0\n  return paddingLeft + paddingRight\n}\n","export const findParent = (tagName: string, element: HTMLElement | null = null) => {\n  let currentElement = element\n  while (currentElement) {\n    if (currentElement.tagName.toLowerCase() === tagName.toLowerCase()) {\n      return currentElement\n    } else {\n      currentElement = currentElement.parentElement\n    }\n  }\n}\n","/** @description This is the width of all the cells (except the one passed) in the row combined and the spacing of the main cell */\nexport const getRemainingRowWidth = (row: HTMLElement, forCell = 0) => {\n  let width = 0\n  for (let i = 0; i < (row?.childElementCount ?? 0); i++) {\n    const item = row?.children.item(i)\n    if (item) {\n      if (i !== forCell) {\n        width += item?.clientWidth ?? 0\n      }\n    }\n  }\n\n  return width\n}\n","export const getSmallestParentWidth = (element: HTMLElement, maxDepth = 4) => {\n  let currentElement: HTMLElement | null = element?.parentElement\n  let width = currentElement?.clientWidth ?? screen.width\n  let maxDepthCounter = maxDepth\n  while (currentElement && maxDepthCounter > 0) {\n    if (width > currentElement.clientWidth) {\n      width = currentElement.clientWidth\n    }\n    currentElement = currentElement.parentElement\n    maxDepthCounter--\n  }\n  return width\n}\n"],"mappings":"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","names":["cell"]}

package/dist/browser/components/TableCell/HashTableCell.js

@@ -1,16 +1,136 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/TableCell/HashTableCell.tsx
 import { useEvent } from "@xyo-network/react-event";
-import { useRef } from "react";
-import { EllipsisTableCell } from "./EllipsisTableCell";
-const HashTableCell = ({ value, archive, dataType, network, exploreDomain, ...props }) => {
-  const ref = useRef(null);
+import { useRef as useRef2 } from "react";
+
+// src/components/TableCell/EllipsisTableCell.tsx
+import { styled as styled2, TableCell } from "@mui/material";
+import { LinkEx } from "@xylabs/react-link";
+import { forwardRef as forwardRef2, useMemo } from "react";
+
+// src/components/Ellipsize.tsx
+import { Box, styled, Typography } from "@mui/material";
+import { forwardRef, useCallback, useState } from "react";
+
+// src/hooks/useShareForwardRef.ts
+import { useEffect, useRef } from "react";
+var useShareForwardedRef = (forwardedRef, refresh = 0) => {
+  const innerRef = useRef(null);
+  useEffect(() => {
+    if (!forwardedRef) {
+      return;
+    }
+    if (typeof forwardedRef === "function") {
+      forwardedRef(innerRef.current);
+      return;
+    } else {
+      forwardedRef.current = innerRef.current;
+    }
+  }, [forwardedRef, refresh]);
+  return innerRef;
+};
+
+// src/components/Ellipsize.tsx
+import { jsx } from "react/jsx-runtime";
+var ComponentName = "Ellipsize";
+var EllipsizeRoot = styled(Box, {
+  name: ComponentName,
+  shouldForwardProp: (prop) => prop !== "beforeLineHeight",
+  slot: "Root"
+})(({ beforeLineHeight }) => ({
+  "&": {
+    // because the cell content ends up absolutely positioned, the cell doesn't know the content height.
+    // the pseudo element with a hidden character establishes the proper height of the content and hides it
+    ":before": {
+      content: "'nbsp;'",
+      display: "block",
+      // take the pseudo element out of the `display: block` flow so it won't push against our actual content
+      float: "left",
+      visibility: "hidden",
+      // since we are `display: block`, lineHeight is the height
+      ...beforeLineHeight && { lineHeight: beforeLineHeight }
+    }
+  }
+}));
+var EllipsizeInnerWrap = styled(Box, {
+  name: ComponentName,
+  slot: "innerWrap"
+})(() => ({
+  position: "relative"
+}));
+var EllipsizeContentWrap = styled(Typography, {
+  name: ComponentName,
+  shouldForwardProp: (prop) => prop !== "ellipsisPosition",
+  slot: "contentWrap"
+})(({ theme, ellipsisPosition, fontFamily }) => {
+  return theme.unstable_sx({
+    fontFamily: fontFamily ?? "monospace",
+    left: 0,
+    overflow: "hidden",
+    position: "absolute",
+    right: 0,
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    ...ellipsisPosition === "start" ? {
+      direction: "rtl",
+      textAlign: "left"
+    } : {}
+  });
+});
+var useClientHeight = () => {
+  const [contentWrapHeight, setContentWrapHeight] = useState();
+  const contentWrapRef = useCallback((node) => {
+    if (node !== null) {
+      setContentWrapHeight(node.clientHeight + "px");
+    }
+  }, []);
+  return { contentWrapHeight, contentWrapRef };
+};
+var EllipsizeBox = forwardRef(
+  ({ children, ellipsisPosition = "start", disableSharedRef, typographyProps, ...props }, ref) => {
+    const { contentWrapRef, contentWrapHeight } = useClientHeight();
+    const sharedRef = useShareForwardedRef(ref);
+    return /* @__PURE__ */ jsx(EllipsizeRoot, { beforeLineHeight: !!sharedRef && !disableSharedRef ? contentWrapHeight : void 0, ...props, ref, children: /* @__PURE__ */ jsx(EllipsizeInnerWrap, { children: /* @__PURE__ */ jsx(EllipsizeContentWrap, { ref: contentWrapRef, component: "span", ellipsisPosition, variant: "body2", ...typographyProps, children }) }) });
+  }
+);
+EllipsizeBox.displayName = "EllipsizeBox";
+
+// src/components/TableCell/EllipsisTableCell.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var EllipsisTableCellRoot = styled2(TableCell, {
+  name: "EllipsisTableCell",
+  shouldForwardProp: (prop) => prop !== "width",
+  slot: "Root"
+})(({ width = "100%" }) => ({
+  width
+}));
+var EllipsisTableCellWithRef = forwardRef2(
+  ({ children, href, link = false, to, value, ...props }, ref) => {
+    const data = useMemo(() => {
+      if (children) {
+        return children;
+      }
+      if (href || link || to) {
+        return /* @__PURE__ */ jsx2(LinkEx, { title: value, to, href, target: href ? "_blank" : void 0, children: value });
+      }
+      return value;
+    }, [children, href, link, to, value]);
+    return /* @__PURE__ */ jsx2(EllipsisTableCellRoot, { ref, ...props, children: /* @__PURE__ */ jsx2(EllipsizeBox, { sx: { cursor: link || to || href ? "pointer" : "inherit" }, children: data }) });
+  }
+);
+EllipsisTableCellWithRef.displayName = "EllipsisTableCell";
+var EllipsisTableCell = EllipsisTableCellWithRef;
+
+// src/components/TableCell/HashTableCell.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var HashTableCell = ({ value, archive, dataType, network, exploreDomain, ...props }) => {
+  const ref = useRef2(null);
   const [tableCellRef, dispatch] = useEvent(void 0, ref);
   const hashPath = `/${dataType}/hash/${value}?network=${network ?? "main"}`;
   const explorePath = archive ? `/archive/${archive}${hashPath}` : hashPath;
   const handleCellClick = () => {
     dispatch?.("hash", "click", value);
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     EllipsisTableCell,
     {
       onClick: handleCellClick,

package/dist/browser/components/TableCell/HashTableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TableCell/HashTableCell.tsx"],"sourcesContent":["import { useEvent } from '@xyo-network/react-event'\nimport { useRef } from 'react'\n\nimport { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell'\n\nexport interface HashTableCellProps extends EllipsisTableCellProps {\n  archive?: string\n  dataType?: 'block' | 'payload'\n  exploreDomain?: string\n  network?: string\n}\n\nexport const HashTableCell: React.FC<HashTableCellProps> = ({ value, archive, dataType, network, exploreDomain, ...props }) => {\n  const ref = useRef<HTMLTableCellElement | null>(null)\n  const [tableCellRef, dispatch] = useEvent<HTMLTableCellElement>(undefined, ref)\n  const hashPath = `/${dataType}/hash/${value}?network=${network ?? 'main'}`\n  const explorePath = archive ? `/archive/${archive}${hashPath}` : hashPath\n\n  const handleCellClick = () => {\n    dispatch?.('hash', 'click', value)\n  }\n\n  return (\n    <EllipsisTableCell\n      onClick={handleCellClick}\n      ref={tableCellRef}\n      value={value}\n      href={exploreDomain ? `${exploreDomain}${explorePath}}` : undefined}\n      to={exploreDomain ? undefined : explorePath}\n      {...props}\n    />\n  )\n}\n"],"mappings":"AAuBI;AAvBJ,SAAS,gBAAgB;AACzB,SAAS,cAAc;AAEvB,SAAS,yBAAiD;AASnD,MAAM,gBAA8C,CAAC,EAAE,OAAO,SAAS,UAAU,SAAS,eAAe,GAAG,MAAM,MAAM;AAC7H,QAAM,MAAM,OAAoC,IAAI;AACpD,QAAM,CAAC,cAAc,QAAQ,IAAI,SAA+B,QAAW,GAAG;AAC9E,QAAM,WAAW,IAAI,QAAQ,SAAS,KAAK,YAAY,WAAW,MAAM;AACxE,QAAM,cAAc,UAAU,YAAY,OAAO,GAAG,QAAQ,KAAK;AAEjE,QAAM,kBAAkB,MAAM;AAC5B,eAAW,QAAQ,SAAS,KAAK;AAAA,EACnC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,KAAK;AAAA,MACL;AAAA,MACA,MAAM,gBAAgB,GAAG,aAAa,GAAG,WAAW,MAAM;AAAA,MAC1D,IAAI,gBAAgB,SAAY;AAAA,MAC/B,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/TableCell/HashTableCell.tsx","../../../../src/components/TableCell/EllipsisTableCell.tsx","../../../../src/components/Ellipsize.tsx","../../../../src/hooks/useShareForwardRef.ts"],"sourcesContent":["import { useEvent } from '@xyo-network/react-event'\nimport { useRef } from 'react'\n\nimport { EllipsisTableCell, EllipsisTableCellProps } from './EllipsisTableCell'\n\nexport interface HashTableCellProps extends EllipsisTableCellProps {\n  archive?: string\n  dataType?: 'block' | 'payload'\n  exploreDomain?: string\n  network?: string\n}\n\nexport const HashTableCell: React.FC<HashTableCellProps> = ({ value, archive, dataType, network, exploreDomain, ...props }) => {\n  const ref = useRef<HTMLTableCellElement | null>(null)\n  const [tableCellRef, dispatch] = useEvent<HTMLTableCellElement>(undefined, ref)\n  const hashPath = `/${dataType}/hash/${value}?network=${network ?? 'main'}`\n  const explorePath = archive ? `/archive/${archive}${hashPath}` : hashPath\n\n  const handleCellClick = () => {\n    dispatch?.('hash', 'click', value)\n  }\n\n  return (\n    <EllipsisTableCell\n      onClick={handleCellClick}\n      ref={tableCellRef}\n      value={value}\n      href={exploreDomain ? `${exploreDomain}${explorePath}}` : undefined}\n      to={exploreDomain ? undefined : explorePath}\n      {...props}\n    />\n  )\n}\n","import { styled, TableCell, TableCellProps } from '@mui/material'\nimport { LinkEx } from '@xylabs/react-link'\nimport type { WithChildren } from '@xylabs/react-shared'\nimport { forwardRef, useMemo } from 'react'\nimport { To } from 'react-router-dom'\n\nimport { EllipsizeBox } from '../Ellipsize'\n\nconst EllipsisTableCellRoot = styled(TableCell, {\n  name: 'EllipsisTableCell',\n  shouldForwardProp: (prop) => prop !== 'width',\n  slot: 'Root',\n})(({ width = '100%' }) => ({\n  width,\n}))\n\nexport interface EllipsisTableCellProps extends TableCellProps {\n  href?: string\n  link?: boolean\n  to?: To\n  value?: string\n  /**\n   * Width of the table cell.\n   *\n   * Note: When using percentages, this value can be different than what you expect\n   * if used on a cell that is not the first cell in the first row.\n   */\n  width?: string | number\n}\n\nexport const EllipsisTableCellWithRef: React.FC<WithChildren<EllipsisTableCellProps>> = forwardRef(\n  ({ children, href, link = false, to, value, ...props }, ref) => {\n    const data = useMemo(() => {\n      if (children) {\n        return children\n      }\n      if (href || link || to) {\n        return (\n          <LinkEx title={value} to={to} href={href} target={href ? '_blank' : undefined}>\n            {value}\n          </LinkEx>\n        )\n      }\n      return value\n    }, [children, href, link, to, value])\n    return (\n      <EllipsisTableCellRoot ref={ref} {...props}>\n        <EllipsizeBox sx={{ cursor: link || to || href ? 'pointer' : 'inherit' }}>{data}</EllipsizeBox>\n      </EllipsisTableCellRoot>\n    )\n  },\n)\n\nEllipsisTableCellWithRef.displayName = 'EllipsisTableCell'\nexport const EllipsisTableCell = EllipsisTableCellWithRef\n","import { Box, BoxProps, styled, Typography, TypographyProps, TypographyTypeMap } from '@mui/material'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { forwardRef, useCallback, useState } from 'react'\n\nimport { useShareForwardedRef } from '../hooks'\n\n/**\n * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259\n */\n\nconst ComponentName = 'Ellipsize'\n\nexport interface EllipsizeRootProps extends BoxProps {\n  beforeLineHeight?: string | number\n}\n\nconst EllipsizeRoot = styled(Box, {\n  name: ComponentName,\n  shouldForwardProp: (prop) => prop !== 'beforeLineHeight',\n  slot: 'Root',\n})<EllipsizeRootProps>(({ beforeLineHeight }) => ({\n  '&': {\n    // because the cell content ends up absolutely positioned, the cell doesn't know the content height.\n    // the pseudo element with a hidden character establishes the proper height of the content and hides it\n    ':before': {\n      content: \"'nbsp;'\",\n      display: 'block',\n      // take the pseudo element out of the `display: block` flow so it won't push against our actual content\n      float: 'left',\n      visibility: 'hidden',\n      // since we are `display: block`, lineHeight is the height\n      ...(beforeLineHeight && { lineHeight: beforeLineHeight }),\n    },\n  },\n}))\n\nconst EllipsizeInnerWrap = styled(Box, {\n  name: ComponentName,\n  slot: 'innerWrap',\n})(() => ({\n  position: 'relative',\n}))\n\nconst EllipsizeContentWrap = styled(Typography, {\n  name: ComponentName,\n  shouldForwardProp: (prop) => prop !== 'ellipsisPosition',\n  slot: 'contentWrap',\n})<TypographyWithComponentProps>(({ theme, ellipsisPosition, fontFamily }) => {\n  return theme.unstable_sx({\n    fontFamily: fontFamily ?? 'monospace',\n    left: 0,\n    overflow: 'hidden',\n    position: 'absolute',\n    right: 0,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    ...(ellipsisPosition === 'start'\n      ? {\n          direction: 'rtl',\n          textAlign: 'left',\n        }\n      : {}),\n  })\n})\n\nconst useClientHeight = () => {\n  const [contentWrapHeight, setContentWrapHeight] = useState<string>()\n\n  const contentWrapRef = useCallback((node: HTMLElement) => {\n    if (node !== null) {\n      setContentWrapHeight(node.clientHeight + 'px')\n    }\n  }, [])\n\n  return { contentWrapHeight, contentWrapRef }\n}\n\n// See - https://mui.com/material-ui/guides/composition/#with-typescript\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type TypographyWithComponentProps<D extends React.ElementType = TypographyTypeMap['defaultComponent'], P = {}> = TypographyProps<D, P> & {\n  ellipsisPosition?: 'start' | 'end'\n}\n\nexport interface EllipsizeBoxProps extends BoxProps {\n  disableSharedRef?: boolean\n  ellipsisPosition?: 'start' | 'end'\n  typographyProps?: TypographyWithComponentProps\n}\n\nexport const EllipsizeBox = forwardRef<HTMLDivElement, WithChildren<EllipsizeBoxProps>>(\n  ({ children, ellipsisPosition = 'start', disableSharedRef, typographyProps, ...props }, ref) => {\n    // Allow syncing of :before pseudo element height with contentWrapHeight\n    const { contentWrapRef, contentWrapHeight } = useClientHeight()\n    const sharedRef = useShareForwardedRef(ref)\n\n    return (\n      <EllipsizeRoot beforeLineHeight={!!sharedRef && !disableSharedRef ? contentWrapHeight : undefined} {...props} ref={ref}>\n        <EllipsizeInnerWrap>\n          <EllipsizeContentWrap ref={contentWrapRef} component={'span'} ellipsisPosition={ellipsisPosition} variant=\"body2\" {...typographyProps}>\n            {children}\n          </EllipsizeContentWrap>\n        </EllipsizeInnerWrap>\n      </EllipsizeRoot>\n    )\n  },\n)\nEllipsizeBox.displayName = 'EllipsizeBox'\n","import { ForwardedRef, useEffect, useRef } from 'react'\n\nexport const useShareForwardedRef = <T>(forwardedRef: ForwardedRef<T>, refresh = 0) => {\n  // final ref that will share value with forward ref. this is the one to be attached to components\n  const innerRef = useRef<T>(null)\n\n  useEffect(() => {\n    if (!forwardedRef) {\n      return\n    }\n    if (typeof forwardedRef === 'function') {\n      forwardedRef(innerRef.current)\n      return\n    } else {\n      forwardedRef.current = innerRef.current\n    }\n  }, [forwardedRef, refresh])\n\n  return innerRef\n}\n"],"mappings":"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","names":["useRef","styled","forwardRef","jsx","styled","forwardRef","jsx","useRef"]}

package/dist/browser/components/TableCell/findParent.js

@@ -1,4 +1,5 @@
-const findParent = (tagName, element = null) => {
+// src/components/TableCell/findParent.ts
+var findParent = (tagName, element = null) => {
   let currentElement = element;
   while (currentElement) {
     if (currentElement.tagName.toLowerCase() === tagName.toLowerCase()) {

package/dist/browser/components/TableCell/findParent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TableCell/findParent.ts"],"sourcesContent":["export const findParent = (tagName: string, element: HTMLElement | null = null) => {\n  let currentElement = element\n  while (currentElement) {\n    if (currentElement.tagName.toLowerCase() === tagName.toLowerCase()) {\n      return currentElement\n    } else {\n      currentElement = currentElement.parentElement\n    }\n  }\n}\n"],"mappings":"AAAO,MAAM,aAAa,CAAC,SAAiB,UAA8B,SAAS;AACjF,MAAI,iBAAiB;AACrB,SAAO,gBAAgB;AACrB,QAAI,eAAe,QAAQ,YAAY,MAAM,QAAQ,YAAY,GAAG;AAClE,aAAO;AAAA,IACT,OAAO;AACL,uBAAiB,eAAe;AAAA,IAClC;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/TableCell/findParent.ts"],"sourcesContent":["export const findParent = (tagName: string, element: HTMLElement | null = null) => {\n  let currentElement = element\n  while (currentElement) {\n    if (currentElement.tagName.toLowerCase() === tagName.toLowerCase()) {\n      return currentElement\n    } else {\n      currentElement = currentElement.parentElement\n    }\n  }\n}\n"],"mappings":";AAAO,IAAM,aAAa,CAAC,SAAiB,UAA8B,SAAS;AACjF,MAAI,iBAAiB;AACrB,SAAO,gBAAgB;AACrB,QAAI,eAAe,QAAQ,YAAY,MAAM,QAAQ,YAAY,GAAG;AAClE,aAAO;AAAA,IACT,OAAO;AACL,uBAAiB,eAAe;AAAA,IAClC;AAAA,EACF;AACF;","names":[]}

package/dist/browser/components/TableCell/getRemainingRowWidth.js

@@ -1,4 +1,5 @@
-const getRemainingRowWidth = (row, forCell = 0) => {
+// src/components/TableCell/getRemainingRowWidth.ts
+var getRemainingRowWidth = (row, forCell = 0) => {
   let width = 0;
   for (let i = 0; i < (row?.childElementCount ?? 0); i++) {
     const item = row?.children.item(i);

package/dist/browser/components/TableCell/getRemainingRowWidth.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TableCell/getRemainingRowWidth.ts"],"sourcesContent":["/** @description This is the width of all the cells (except the one passed) in the row combined and the spacing of the main cell */\nexport const getRemainingRowWidth = (row: HTMLElement, forCell = 0) => {\n  let width = 0\n  for (let i = 0; i < (row?.childElementCount ?? 0); i++) {\n    const item = row?.children.item(i)\n    if (item) {\n      if (i !== forCell) {\n        width += item?.clientWidth ?? 0\n      }\n    }\n  }\n\n  return width\n}\n"],"mappings":"AACO,MAAM,uBAAuB,CAAC,KAAkB,UAAU,MAAM;AACrE,MAAI,QAAQ;AACZ,WAAS,IAAI,GAAG,KAAK,KAAK,qBAAqB,IAAI,KAAK;AACtD,UAAM,OAAO,KAAK,SAAS,KAAK,CAAC;AACjC,QAAI,MAAM;AACR,UAAI,MAAM,SAAS;AACjB,iBAAS,MAAM,eAAe;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/components/TableCell/getRemainingRowWidth.ts"],"sourcesContent":["/** @description This is the width of all the cells (except the one passed) in the row combined and the spacing of the main cell */\nexport const getRemainingRowWidth = (row: HTMLElement, forCell = 0) => {\n  let width = 0\n  for (let i = 0; i < (row?.childElementCount ?? 0); i++) {\n    const item = row?.children.item(i)\n    if (item) {\n      if (i !== forCell) {\n        width += item?.clientWidth ?? 0\n      }\n    }\n  }\n\n  return width\n}\n"],"mappings":";AACO,IAAM,uBAAuB,CAAC,KAAkB,UAAU,MAAM;AACrE,MAAI,QAAQ;AACZ,WAAS,IAAI,GAAG,KAAK,KAAK,qBAAqB,IAAI,KAAK;AACtD,UAAM,OAAO,KAAK,SAAS,KAAK,CAAC;AACjC,QAAI,MAAM;AACR,UAAI,MAAM,SAAS;AACjB,iBAAS,MAAM,eAAe;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;","names":[]}

package/dist/browser/components/TableCell/getSmallestParentWidth.js

@@ -1,4 +1,5 @@
-const getSmallestParentWidth = (element, maxDepth = 4) => {
+// src/components/TableCell/getSmallestParentWidth.ts
+var getSmallestParentWidth = (element, maxDepth = 4) => {
   let currentElement = element?.parentElement;
   let width = currentElement?.clientWidth ?? screen.width;
   let maxDepthCounter = maxDepth;

package/dist/browser/components/TableCell/getSmallestParentWidth.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TableCell/getSmallestParentWidth.ts"],"sourcesContent":["export const getSmallestParentWidth = (element: HTMLElement, maxDepth = 4) => {\n  let currentElement: HTMLElement | null = element?.parentElement\n  let width = currentElement?.clientWidth ?? screen.width\n  let maxDepthCounter = maxDepth\n  while (currentElement && maxDepthCounter > 0) {\n    if (width > currentElement.clientWidth) {\n      width = currentElement.clientWidth\n    }\n    currentElement = currentElement.parentElement\n    maxDepthCounter--\n  }\n  return width\n}\n"],"mappings":"AAAO,MAAM,yBAAyB,CAAC,SAAsB,WAAW,MAAM;AAC5E,MAAI,iBAAqC,SAAS;AAClD,MAAI,QAAQ,gBAAgB,eAAe,OAAO;AAClD,MAAI,kBAAkB;AACtB,SAAO,kBAAkB,kBAAkB,GAAG;AAC5C,QAAI,QAAQ,eAAe,aAAa;AACtC,cAAQ,eAAe;AAAA,IACzB;AACA,qBAAiB,eAAe;AAChC;AAAA,EACF;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/components/TableCell/getSmallestParentWidth.ts"],"sourcesContent":["export const getSmallestParentWidth = (element: HTMLElement, maxDepth = 4) => {\n  let currentElement: HTMLElement | null = element?.parentElement\n  let width = currentElement?.clientWidth ?? screen.width\n  let maxDepthCounter = maxDepth\n  while (currentElement && maxDepthCounter > 0) {\n    if (width > currentElement.clientWidth) {\n      width = currentElement.clientWidth\n    }\n    currentElement = currentElement.parentElement\n    maxDepthCounter--\n  }\n  return width\n}\n"],"mappings":";AAAO,IAAM,yBAAyB,CAAC,SAAsB,WAAW,MAAM;AAC5E,MAAI,iBAAqC,SAAS;AAClD,MAAI,QAAQ,gBAAgB,eAAe,OAAO;AAClD,MAAI,kBAAkB;AACtB,SAAO,kBAAkB,kBAAkB,GAAG;AAC5C,QAAI,QAAQ,eAAe,aAAa;AACtC,cAAQ,eAAe;AAAA,IACzB;AACA,qBAAiB,eAAe;AAChC;AAAA,EACF;AACA,SAAO;AACT;","names":[]}