@sia.soul/sia-react-ui 0.1.5 → 0.1.6

package/dist/core.css

@@ -3251,15 +3251,22 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.sia-table__cell--ellipsis > .sia-table__cell-content > .sia-space {
+.sia-table__cell--ellipsis > .sia-table__cell-content :is(.sia-space, .sia-flex, [data-table-inline-layout]) {
   display: inline-flex;
   width: max-content;
   flex-wrap: nowrap !important;
-  flex-direction: row;
+  flex-direction: row !important;
   vertical-align: middle;
 }
-.sia-table__cell--ellipsis > .sia-table__cell-content > .sia-space > * {
+.sia-table__cell--ellipsis > .sia-table__cell-content :is(.sia-space, .sia-flex, [data-table-inline-layout]) > * {
   flex-shrink: 0;
+  width: auto;
+  flex-direction: row;
+}
+.sia-table__cell--ellipsis > .sia-table__cell-content[data-custom-content] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 .sia-table__cell--ellipsis > .sia-table__cell-content[data-content-overflow=true]::after {
   position: absolute;

package/dist/index.cjs

@@ -9869,14 +9869,32 @@ function TableCellContent({ children, ellipsis, title }) {
   (0, import_react42.useLayoutEffect)(() => {
     const element = ref.current;
     if (!element || !ellipsis || !customContent) return;
-    const update = () => setOverflowing(element.scrollWidth > element.clientWidth + 1);
+    const layouts = [];
+    const normalizeLayouts = (parent) => {
+      for (const child of parent.children) {
+        if (!(child instanceof HTMLElement)) continue;
+        const component = [...child.classList].some((name) => name.startsWith("sia-") && !name.startsWith("sia-space") && name !== "sia-flex");
+        if (component || child.matches("button, input, textarea, select, [contenteditable]")) continue;
+        const display = getComputedStyle(child).display;
+        if (["flex", "inline-flex", "grid", "inline-grid"].includes(display)) {
+          child.setAttribute("data-table-inline-layout", "");
+          layouts.push(child);
+        }
+        normalizeLayouts(child);
+      }
+    };
+    normalizeLayouts(element);
+    const update = () => setOverflowing(element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1);
     update();
     const observer = new ResizeObserver(update);
     observer.observe(element);
     for (const child of element.children) observer.observe(child);
-    return () => observer.disconnect();
+    return () => {
+      observer.disconnect();
+      layouts.forEach((layout) => layout.removeAttribute("data-table-inline-layout"));
+    };
   }, [children, ellipsis, customContent]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ref, className: "sia-table__cell-content", title, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { ref, className: "sia-table__cell-content", title, "data-custom-content": customContent || void 0, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children });
 }
 
 // src/components/Table/Table.tsx

package/dist/index.css

@@ -3251,15 +3251,22 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.sia-table__cell--ellipsis > .sia-table__cell-content > .sia-space {
+.sia-table__cell--ellipsis > .sia-table__cell-content :is(.sia-space, .sia-flex, [data-table-inline-layout]) {
   display: inline-flex;
   width: max-content;
   flex-wrap: nowrap !important;
-  flex-direction: row;
+  flex-direction: row !important;
   vertical-align: middle;
 }
-.sia-table__cell--ellipsis > .sia-table__cell-content > .sia-space > * {
+.sia-table__cell--ellipsis > .sia-table__cell-content :is(.sia-space, .sia-flex, [data-table-inline-layout]) > * {
   flex-shrink: 0;
+  width: auto;
+  flex-direction: row;
+}
+.sia-table__cell--ellipsis > .sia-table__cell-content[data-custom-content] {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 .sia-table__cell--ellipsis > .sia-table__cell-content[data-content-overflow=true]::after {
   position: absolute;

package/dist/index.js

@@ -4470,14 +4470,32 @@ function TableCellContent({ children, ellipsis, title }) {
   useLayoutEffect(() => {
     const element = ref.current;
     if (!element || !ellipsis || !customContent) return;
-    const update = () => setOverflowing(element.scrollWidth > element.clientWidth + 1);
+    const layouts = [];
+    const normalizeLayouts = (parent) => {
+      for (const child of parent.children) {
+        if (!(child instanceof HTMLElement)) continue;
+        const component = [...child.classList].some((name) => name.startsWith("sia-") && !name.startsWith("sia-space") && name !== "sia-flex");
+        if (component || child.matches("button, input, textarea, select, [contenteditable]")) continue;
+        const display = getComputedStyle(child).display;
+        if (["flex", "inline-flex", "grid", "inline-grid"].includes(display)) {
+          child.setAttribute("data-table-inline-layout", "");
+          layouts.push(child);
+        }
+        normalizeLayouts(child);
+      }
+    };
+    normalizeLayouts(element);
+    const update = () => setOverflowing(element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1);
     update();
     const observer = new ResizeObserver(update);
     observer.observe(element);
     for (const child of element.children) observer.observe(child);
-    return () => observer.disconnect();
+    return () => {
+      observer.disconnect();
+      layouts.forEach((layout) => layout.removeAttribute("data-table-inline-layout"));
+    };
   }, [children, ellipsis, customContent]);
-  return /* @__PURE__ */ jsx19("div", { ref, className: "sia-table__cell-content", title, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children });
+  return /* @__PURE__ */ jsx19("div", { ref, className: "sia-table__cell-content", title, "data-custom-content": customContent || void 0, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children });
 }
 
 // src/components/Table/Table.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",