@xyo-network/react-shared 2.37.1 → 2.37.3

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material';
+import { WithChildren } from '@xylabs/react-shared';
+export declare const Ellipsize: React.FC<WithChildren<BoxProps>>;
+//# sourceMappingURL=Ellipsize.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Ellipsize.d.ts","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAO,QAAQ,EAAU,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AA6CnD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAQtD,CAAA"}

package/dist/esm/components/Ellipsize.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, styled } from '@mui/material';
+/**
+ * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
+ */
+const ComponentName = 'Ellipsize';
+const EllipsizeRoot = styled(Box, {
+    name: ComponentName,
+    slot: 'Root',
+})(() => ({
+    '&': {
+        // 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',
+        },
+    },
+}));
+const EllipsizeInnerWrap = styled(Box, {
+    name: ComponentName,
+    slot: 'innerWrap',
+})(() => ({
+    position: 'relative',
+}));
+const EllipsizeContentWrap = styled('span', {
+    name: ComponentName,
+    slot: 'contentWrap',
+})(() => ({
+    fontFamily: 'monospace',
+    left: 0,
+    overflow: 'hidden',
+    position: 'absolute',
+    right: 0,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+}));
+export const Ellipsize = ({ children, ...props }) => {
+    return (_jsx(EllipsizeRoot, { ...props, children: _jsx(EllipsizeInnerWrap, { children: _jsx(EllipsizeContentWrap, { children: children }) }) }));
+};
+//# sourceMappingURL=Ellipsize.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Ellipsize.js","sourceRoot":"","sources":["../../../src/components/Ellipsize.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAY,MAAM,EAAE,MAAM,eAAe,CAAA;AAGrD;;GAEG;AAEH,MAAM,aAAa,GAAG,WAAW,CAAA;AAEjC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,EAAE;IAChC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,MAAM;CACb,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,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;SACrB;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,MAAM,EAAE;IAC1C,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,aAAa;CACpB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,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,CAAC,MAAM,SAAS,GAAqC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACpF,OAAO,CACL,KAAC,aAAa,OAAK,KAAK,YACtB,KAAC,kBAAkB,cACjB,KAAC,oBAAoB,cAAE,QAAQ,GAAwB,GACpC,GACP,CACjB,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/components/TableCell/EllipsisTableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EllipsisTableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,cAAc,EAAE,MAAM,eAAe,CAAA;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AA8CrC,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAkB5E,CAAA"}
+{"version":3,"file":"EllipsisTableCell.d.ts","sourceRoot":"","sources":["../../../../src/components/TableCell/EllipsisTableCell.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,cAAc,EAAE,MAAM,eAAe,CAAA;AAEjE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAYrC,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,sBAAsB,CAAC,CAgB5E,CAAA"}

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

@@ -1,46 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { styled, TableCell } from '@mui/material';
 import { LinkEx } from '@xylabs/react-link';
-/**
- * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
- */
-const ComponentName = 'EllipsisTableCell';
+import { Ellipsize } from '../Ellipsize';
 const EllipsisTableCellRoot = styled(TableCell, {
-    name: ComponentName,
+    name: 'EllipsisTableCell',
     shouldForwardProp: (prop) => prop !== 'width',
     slot: 'Root',
 })(({ width = '100%' }) => ({
-    '&': {
-        // 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',
-        },
-        width,
-    },
-}));
-const EllipsisTableCellInnerWrap = styled('div', {
-    name: ComponentName,
-    slot: 'innerWrap',
-})(() => ({
-    position: 'relative',
-}));
-const EllipsisTableCellContentWrap = styled('span', {
-    name: ComponentName,
-    slot: 'contentWrap',
-})(() => ({
-    left: 0,
-    overflow: 'hidden',
-    position: 'absolute',
-    right: 0,
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+    width,
 }));
 export const EllipsisTableCell = ({ children, href, to, value, ...props }) => {
-    return (_jsx(EllipsisTableCellRoot, { ...props, children: _jsx(EllipsisTableCellInnerWrap, { children: _jsx(EllipsisTableCellContentWrap, { children: children ? (children) : href || to ? (_jsx(LinkEx, { to: to, href: href, target: href ? '_blank' : undefined, children: value })) : (value) }) }) }));
+    return (_jsx(EllipsisTableCellRoot, { ...props, children: _jsx(Ellipsize, { children: children ? (children) : href || to ? (_jsx(LinkEx, { 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;;GAEG;AAEH,MAAM,aAAa,GAAG,mBAAmB,CAAA;AAEzC,MAAM,qBAAqB,GAAG,MAAM,CAAC,SAAS,EAAE;IAC9C,IAAI,EAAE,aAAa;IACnB,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,OAAO;IAC7C,IAAI,EAAE,MAAM;CACb,CAAC,CAAyB,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAClD,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;SACrB;QACD,KAAK;KACN;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,0BAA0B,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/C,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,WAAW;CAClB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC,CAAA;AAEH,MAAM,4BAA4B,GAAG,MAAM,CAAC,MAAM,EAAE;IAClD,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,aAAa;CACpB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IACR,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,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,0BAA0B,cACzB,KAAC,4BAA4B,cAC1B,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,GAC4B,GACJ,GACP,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,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,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,SAAS,cACP,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,GACS,GACU,CACzB,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -11,11 +11,11 @@
   },
   "dependencies": {
     "@xylabs/pixel": "^1.4.5",
-    "@xylabs/react-appbar": "^2.15.0",
-    "@xylabs/react-button": "^2.15.0",
-    "@xylabs/react-flexbox": "^2.15.0",
-    "@xylabs/react-link": "^2.15.0",
-    "@xylabs/react-shared": "^2.15.0",
+    "@xylabs/react-appbar": "^2.15.1",
+    "@xylabs/react-button": "^2.15.1",
+    "@xylabs/react-flexbox": "^2.15.1",
+    "@xylabs/react-link": "^2.15.1",
+    "@xylabs/react-shared": "^2.15.1",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {
@@ -69,5 +69,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.37.1"
+  "version": "2.37.3"
 }

package/src/components/Ellipsize.tsx

@@ -0,0 +1,55 @@
+import { Box, BoxProps, styled } from '@mui/material'
+import { WithChildren } from '@xylabs/react-shared'
+
+/**
+ * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
+ */
+
+const ComponentName = 'Ellipsize'
+
+const EllipsizeRoot = styled(Box, {
+  name: ComponentName,
+  slot: 'Root',
+})(() => ({
+  '&': {
+    // 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',
+    },
+  },
+}))
+
+const EllipsizeInnerWrap = styled(Box, {
+  name: ComponentName,
+  slot: 'innerWrap',
+})(() => ({
+  position: 'relative',
+}))
+
+const EllipsizeContentWrap = styled('span', {
+  name: ComponentName,
+  slot: 'contentWrap',
+})(() => ({
+  fontFamily: 'monospace',
+  left: 0,
+  overflow: 'hidden',
+  position: 'absolute',
+  right: 0,
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+}))
+
+export const Ellipsize: React.FC<WithChildren<BoxProps>> = ({ children, ...props }) => {
+  return (
+    <EllipsizeRoot {...props}>
+      <EllipsizeInnerWrap>
+        <EllipsizeContentWrap>{children}</EllipsizeContentWrap>
+      </EllipsizeInnerWrap>
+    </EllipsizeRoot>
+  )
+}

package/src/components/TableCell/EllipsisTableCell.tsx

@@ -3,48 +3,14 @@ import { LinkEx } from '@xylabs/react-link'
 import { WithChildren } from '@xylabs/react-shared'
 import { To } from 'react-router-dom'
 
-/**
- * Heavily inspired by - https://stackoverflow.com/a/30362531/2803259
- */
-
-const ComponentName = 'EllipsisTableCell'
+import { Ellipsize } from '../Ellipsize'
 
 const EllipsisTableCellRoot = styled(TableCell, {
-  name: ComponentName,
+  name: 'EllipsisTableCell',
   shouldForwardProp: (prop) => prop !== 'width',
   slot: 'Root',
-})<EllipsisTableCellProps>(({ width = '100%' }) => ({
-  '&': {
-    // 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',
-    },
-    width,
-  },
-}))
-
-const EllipsisTableCellInnerWrap = styled('div', {
-  name: ComponentName,
-  slot: 'innerWrap',
-})(() => ({
-  position: 'relative',
-}))
-
-const EllipsisTableCellContentWrap = styled('span', {
-  name: ComponentName,
-  slot: 'contentWrap',
-})(() => ({
-  left: 0,
-  overflow: 'hidden',
-  position: 'absolute',
-  right: 0,
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
+})(({ width = '100%' }) => ({
+  width,
 }))
 
 export interface EllipsisTableCellProps extends TableCellProps {
@@ -63,19 +29,17 @@ export interface EllipsisTableCellProps extends TableCellProps {
 export const EllipsisTableCell: React.FC<WithChildren<EllipsisTableCellProps>> = ({ children, href, to, value, ...props }) => {
   return (
     <EllipsisTableCellRoot {...props}>
-      <EllipsisTableCellInnerWrap>
-        <EllipsisTableCellContentWrap>
-          {children ? (
-            children
-          ) : href || to ? (
-            <LinkEx to={to} href={href} target={href ? '_blank' : undefined}>
-              {value}
-            </LinkEx>
-          ) : (
-            value
-          )}
-        </EllipsisTableCellContentWrap>
-      </EllipsisTableCellInnerWrap>
+      <Ellipsize>
+        {children ? (
+          children
+        ) : href || to ? (
+          <LinkEx to={to} href={href} target={href ? '_blank' : undefined}>
+            {value}
+          </LinkEx>
+        ) : (
+          value
+        )}
+      </Ellipsize>
     </EllipsisTableCellRoot>
   )
 }