@xyo-network/react-shared 2.38.0-rc.6 → 2.38.0-rc.7

package/dist/esm/components/Ellipsize.d.ts

@@ -3,10 +3,13 @@ import { WithChildren } from '@xylabs/react-shared';
 import React, { ElementType } from 'react';
 interface TypographyWithComponentProps<Comp extends ElementType = ElementType> extends TypographyProps {
     component?: Comp;
+    ellipsisPosition?: 'start' | 'end';
 }
 export interface EllipsizeBoxProps extends BoxProps {
     typographyProps?: TypographyWithComponentProps;
+    ellipsisPosition?: 'start' | 'end';
 }
+export declare const EllipsizeBoxInner: React.FC<WithChildren<EllipsizeBoxProps>>;
 export declare const EllipsizeBox: React.FC<WithChildren<EllipsizeBoxProps>>;
 export {};
 //# sourceMappingURL=Ellipsize.d.ts.map

package/dist/esm/components/Ellipsize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ellipsize.d.ts","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAsB,eAAe,EAAE,MAAM,eAAe,CAAA;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAyB,MAAM,OAAO,CAAA;AAiEjE,UAAU,4BAA4B,CAAC,IAAI,SAAS,WAAW,GAAG,WAAW,CAAE,SAAQ,eAAe;IACpG,SAAS,CAAC,EAAE,IAAI,CAAA;CACjB;AAED,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,eAAe,CAAC,EAAE,4BAA4B,CAAA;CAC/C;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAalE,CAAA"}
+{"version":3,"file":"Ellipsize.d.ts","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAsB,eAAe,EAAE,MAAM,eAAe,CAAA;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,KAAK,EAAE,EAAE,WAAW,EAAqC,MAAM,OAAO,CAAA;AA0E7E,UAAU,4BAA4B,CAAC,IAAI,SAAS,WAAW,GAAG,WAAW,CAAE,SAAQ,eAAe;IACpG,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACnC;AAED,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;IACjD,eAAe,CAAC,EAAE,4BAA4B,CAAA;IAC9C,gBAAgB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;CACnC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAevE,CAAA;AAGD,eAAO,MAAM,YAAY,2CAAoB,CAAA"}

package/dist/esm/components/Ellipsize.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, styled, Typography } from '@mui/material';
-import { useCallback, useState } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 /**
  * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
  */
@@ -32,16 +32,25 @@ const EllipsizeInnerWrap = styled(Box, {
 }));
 const EllipsizeContentWrap = styled(Typography, {
     name: ComponentName,
+    shouldForwardProp: (prop) => prop !== 'ellipsisPosition',
     slot: 'contentWrap',
-})(() => ({
-    fontFamily: 'monospace',
-    left: 0,
-    overflow: 'hidden',
-    position: 'absolute',
-    right: 0,
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-}));
+})(({ ellipsisPosition }) => {
+    return {
+        fontFamily: 'monospace',
+        left: 0,
+        overflow: 'hidden',
+        position: 'absolute',
+        right: 0,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        ...(ellipsisPosition === 'end'
+            ? {
+                direction: 'rtl',
+                textAlign: 'left',
+            }
+            : {}),
+    };
+});
 const useClientHeight = () => {
     const [contentWrapHeight, setContentWrapHeight] = useState();
     const contentWrapRef = useCallback((node) => {
@@ -51,9 +60,11 @@ const useClientHeight = () => {
     }, []);
     return { contentWrapHeight, contentWrapRef };
 };
-export const EllipsizeBox = ({ children, typographyProps, ...props }) => {
+export const EllipsizeBoxInner = forwardRef(({ children, ellipsisPosition = 'end', typographyProps, ...props }, ref) => {
     // Allow syncing of :before pseudo element height with contentWrapHeight
     const { contentWrapRef, contentWrapHeight } = useClientHeight();
-    return (_jsx(EllipsizeRoot, { beforeLineHeight: contentWrapHeight, ...props, children: _jsx(EllipsizeInnerWrap, { children: _jsx(EllipsizeContentWrap, { ref: contentWrapRef, component: 'span', ...typographyProps, children: children }) }) }));
-};
+    return (_jsx(EllipsizeRoot, { beforeLineHeight: contentWrapHeight, ref: ref, ...props, children: _jsx(EllipsizeInnerWrap, { children: _jsx(EllipsizeContentWrap, { ref: contentWrapRef, component: 'span', ellipsisPosition: ellipsisPosition, ...typographyProps, children: children }) }) }));
+});
+EllipsizeBoxInner.displayName = 'EllipsizeBox';
+export const EllipsizeBox = EllipsizeBoxInner;
 //# sourceMappingURL=Ellipsize.js.map

package/dist/esm/components/Ellipsize.js.map

@@ -1 +1 @@
-{"version":3,"file":"Ellipsize.js","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAY,MAAM,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAA;AAElF,OAAc,EAAe,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEjE;;GAEG;AAEH,MAAM,aAAa,GAAG,WAAW,CAAA;AAMjC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,EAAE;IAChC,IAAI,EAAE,aAAa;IACnB,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,kBAAkB;IACxD,IAAI,EAAE,MAAM;CACb,CAAC,CAAqB,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC;IAChD,GAAG,EAAE;QACH,oGAAoG;QACpG,uGAAuG;QACvG,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,OAAO;YAChB,uGAAuG;YACvG,KAAK,EAAE,MAAM;YACb,UAAU,EAAE,QAAQ;YACpB,0DAA0D;YAC1D,GAAG,CAAC,gBAAgB,IAAI,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC;SAC1D;KACF;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,EAAE;IACrC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,WAAW;CAClB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,EAAE;IAC9C,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,aAAa;CACpB,CAAC,CAA+B,GAAG,EAAE,CAAC,CAAC;IACtC,UAAU,EAAE,WAAW;IACvB,IAAI,EAAE,CAAC;IACP,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,CAAC;IACR,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,EAAU,CAAA;IAEpE,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,IAAiB,EAAE,EAAE;QACvD,IAAI,IAAI,KAAK,IAAI,EAAE;YACjB,oBAAoB,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,CAAA;SAC/C;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA;AAC9C,CAAC,CAAA;AAWD,MAAM,CAAC,MAAM,YAAY,GAA8C,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjH,wEAAwE;IACxE,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,eAAe,EAAE,CAAA;IAE/D,OAAO,CACL,KAAC,aAAa,IAAC,gBAAgB,EAAE,iBAAiB,KAAM,KAAK,YAC3D,KAAC,kBAAkB,cACjB,KAAC,oBAAoB,IAAC,GAAG,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,KAAM,eAAe,YAC9E,QAAQ,GACY,GACJ,GACP,CACjB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Ellipsize.js","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":"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"}

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

@@ -10,6 +10,6 @@ const EllipsisTableCellRoot = styled(TableCell, {
     width,
 }));
 export const EllipsisTableCell = ({ children, href, to, value, ...props }) => {
-    return (_jsx(EllipsisTableCellRoot, { ...props, children: _jsx(EllipsizeBox, { children: children ? (children) : href || to ? (_jsx(LinkEx, { to: to, href: href, target: href ? '_blank' : undefined, children: value })) : (value) }) }));
+    return (_jsx(EllipsisTableCellRoot, { ...props, children: _jsx(EllipsizeBox, { children: children ? (children) : href || to ? (_jsx(LinkEx, { title: value, to: to, href: href, target: href ? '_blank' : undefined, children: value })) : (value) }) }));
 };
 //# sourceMappingURL=EllipsisTableCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAkB,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAI3C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAE3C,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE;IAC9C,IAAI,EAAE,mBAAmB;IACzB,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,OAAO;IAC7C,IAAI,EAAE,MAAM;CACb,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1B,KAAK;CACN,CAAC,CAAC,CAAA;AAeH,MAAM,CAAC,MAAM,iBAAiB,GAAmD,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3H,OAAO,CACL,KAAC,qBAAqB,OAAK,KAAK,YAC9B,KAAC,YAAY,cACV,QAAQ,CAAC,CAAC,CAAC,CACV,QAAQ,CACT,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAC5D,KAAK,GACC,CACV,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACY,GACO,CACzB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"EllipsisTableCell.js","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAkB,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAI3C,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAE3C,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE;IAC9C,IAAI,EAAE,mBAAmB;IACzB,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,OAAO;IAC7C,IAAI,EAAE,MAAM;CACb,CAAC,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC1B,KAAK;CACN,CAAC,CAAC,CAAA;AAeH,MAAM,CAAC,MAAM,iBAAiB,GAAmD,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC3H,OAAO,CACL,KAAC,qBAAqB,OAAK,KAAK,YAC9B,KAAC,YAAY,cACV,QAAQ,CAAC,CAAC,CAAC,CACV,QAAQ,CACT,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAC1E,KAAK,GACC,CACV,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACY,GACO,CACzB,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -69,6 +69,6 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.38.0-rc.6",
+  "version": "2.38.0-rc.7",
   "stableVersion": "2.37.29"
 }

package/src/components/Ellipsize.tsx

@@ -1,6 +1,6 @@
 import { Box, BoxProps, styled, Typography, TypographyProps } from '@mui/material'
 import { WithChildren } from '@xylabs/react-shared'
-import React, { ElementType, useCallback, useState } from 'react'
+import React, { ElementType, forwardRef, useCallback, useState } from 'react'
 
 /**
  * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
@@ -41,16 +41,25 @@ const EllipsizeInnerWrap = styled(Box, {
 
 const EllipsizeContentWrap = styled(Typography, {
   name: ComponentName,
+  shouldForwardProp: (prop) => prop !== 'ellipsisPosition',
   slot: 'contentWrap',
-})<TypographyWithComponentProps>(() => ({
-  fontFamily: 'monospace',
-  left: 0,
-  overflow: 'hidden',
-  position: 'absolute',
-  right: 0,
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-}))
+})<TypographyWithComponentProps>(({ ellipsisPosition }) => {
+  return {
+    fontFamily: 'monospace',
+    left: 0,
+    overflow: 'hidden',
+    position: 'absolute',
+    right: 0,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    ...(ellipsisPosition === 'end'
+      ? {
+          direction: 'rtl',
+          textAlign: 'left',
+        }
+      : {}),
+  }
+})
 
 const useClientHeight = () => {
   const [contentWrapHeight, setContentWrapHeight] = useState<string>()
@@ -67,23 +76,30 @@ const useClientHeight = () => {
 // See - https://mui.com/material-ui/guides/composition/#with-typescript
 interface TypographyWithComponentProps<Comp extends ElementType = ElementType> extends TypographyProps {
   component?: Comp
+  ellipsisPosition?: 'start' | 'end'
 }
 
 export interface EllipsizeBoxProps extends BoxProps {
   typographyProps?: TypographyWithComponentProps
+  ellipsisPosition?: 'start' | 'end'
 }
 
-export const EllipsizeBox: React.FC<WithChildren<EllipsizeBoxProps>> = ({ children, typographyProps, ...props }) => {
-  // Allow syncing of :before pseudo element height with contentWrapHeight
-  const { contentWrapRef, contentWrapHeight } = useClientHeight()
+export const EllipsizeBoxInner: React.FC<WithChildren<EllipsizeBoxProps>> = forwardRef(
+  ({ children, ellipsisPosition = 'end', typographyProps, ...props }, ref) => {
+    // Allow syncing of :before pseudo element height with contentWrapHeight
+    const { contentWrapRef, contentWrapHeight } = useClientHeight()
 
-  return (
-    <EllipsizeRoot beforeLineHeight={contentWrapHeight} {...props}>
-      <EllipsizeInnerWrap>
-        <EllipsizeContentWrap ref={contentWrapRef} component={'span'} {...typographyProps}>
-          {children}
-        </EllipsizeContentWrap>
-      </EllipsizeInnerWrap>
-    </EllipsizeRoot>
-  )
-}
+    return (
+      <EllipsizeRoot beforeLineHeight={contentWrapHeight} ref={ref} {...props}>
+        <EllipsizeInnerWrap>
+          <EllipsizeContentWrap ref={contentWrapRef} component={'span'} ellipsisPosition={ellipsisPosition} {...typographyProps}>
+            {children}
+          </EllipsizeContentWrap>
+        </EllipsizeInnerWrap>
+      </EllipsizeRoot>
+    )
+  },
+)
+
+EllipsizeBoxInner.displayName = 'EllipsizeBox'
+export const EllipsizeBox = EllipsizeBoxInner

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -33,7 +33,7 @@ export const EllipsisTableCell: React.FC<WithChildren<EllipsisTableCellProps>> =
         {children ? (
           children
         ) : href || to ? (
-          <LinkEx to={to} href={href} target={href ? '_blank' : undefined}>
+          <LinkEx title={value} to={to} href={href} target={href ? '_blank' : undefined}>
             {value}
           </LinkEx>
         ) : (