@x-plat/design-system 0.5.3 → 0.5.5

package/dist/components/Accordion/index.css

@@ -1,6 +1,7 @@
 /* src/components/Accordion/accordion.scss */
 .lib-xplat-accordion {
   contain: content;
+  width: 100%;
   border: 1px solid var(--semantic-border-default);
   border-radius: var(--spacing-radius-md);
   overflow: hidden;

package/dist/components/Calendar/index.css

@@ -2,6 +2,7 @@
 .lib-xplat-calendar {
   contain: content;
   width: 100%;
+  height: 100%;
   min-width: 200px;
   user-select: none;
   container-type: inline-size;

package/dist/components/Card/index.css

@@ -6,7 +6,7 @@
   flex-direction: column;
   flex: 1;
   min-width: 0;
-  height: fit-content;
+  height: 100%;
   border-radius: var(--spacing-radius-xl);
   border: 1px solid var(--semantic-border-strong);
   background-color: var(--semantic-surface-neutral-default);

package/dist/components/Chart/index.css

@@ -2,6 +2,7 @@
 .lib-xplat-chart {
   contain: content;
   width: 100%;
+  height: 100%;
   position: relative;
 }
 .lib-xplat-chart .chart-svg {

package/dist/components/Dropdown/index.css

@@ -2,6 +2,7 @@
 .lib-xplat-dropdown {
   position: relative;
   display: inline-flex;
+  width: 100%;
 }
 .lib-xplat-dropdown .dropdown-trigger {
   cursor: pointer;

package/dist/components/EmptyState/index.css

@@ -1,6 +1,7 @@
 /* src/components/EmptyState/emptystate.scss */
 .lib-xplat-empty-state {
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;

package/dist/components/FileUpload/index.css

@@ -2,6 +2,7 @@
 .lib-xplat-file-upload {
   contain: content;
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;

package/dist/components/Select/index.css

@@ -2,6 +2,7 @@
 
 /* src/components/Select/select.scss */
 .lib-xplat-select {
+  width: 100%;
   position: relative;
 }
 .lib-xplat-select.is-open {

package/dist/components/Swiper/index.css

@@ -2,6 +2,7 @@
 .lib-xplat-swiper {
   contain: content;
   width: 100%;
+  height: 100%;
   position: relative;
 }
 .lib-xplat-swiper__viewport {

package/dist/components/Table/index.cjs

@@ -130,6 +130,8 @@ var TableCell = import_react4.default.memo((props) => {
     children,
     align = "center",
     isSticky = false,
+    width,
+    nowrap = false,
     onClick
   } = props;
   const { registerStickyCell, stickyCells } = useTableRowContext();
@@ -173,9 +175,13 @@ var TableCell = import_react4.default.memo((props) => {
         isSticky && "table-sticky",
         isLastSticky && stickyShadow && "right-shadow",
         onClick && "clickable",
-        enableHover && "cell-hover"
+        enableHover && "cell-hover",
+        nowrap && "nowrap"
       ),
-      style: isSticky ? { left } : void 0,
+      style: {
+        ...isSticky ? { left } : null,
+        ...width != null ? { width: typeof width === "number" ? `${width}px` : width } : null
+      },
       onClick,
       children
     }

package/dist/components/Table/index.css

@@ -2,6 +2,7 @@
 .lib-xplat-table-wrapper {
   contain: content;
   width: 100%;
+  height: 100%;
   position: relative;
 }
 .lib-xplat-table-wrapper > .lib-xplat-table {
@@ -75,6 +76,20 @@
   min-width: 80px;
   padding: var(--spacing-space-2);
   vertical-align: middle;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > td.nowrap,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > th.nowrap,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > td.nowrap,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > th.nowrap {
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > th,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > td,
+.lib-xplat-table-wrapper > .lib-xplat-table > tbody > tr > th {
   transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table > thead > tr > td.clickable,

package/dist/components/Table/index.d.cts

@@ -25,6 +25,8 @@ interface TableCellProps {
     children: React.ReactNode;
     align?: "start" | "center" | "end";
     isSticky?: boolean;
+    width?: string | number;
+    nowrap?: boolean;
     onClick?: (e: React.MouseEvent<HTMLTableCellElement>) => void;
 }
 declare const TableCell: React.NamedExoticComponent<TableCellProps>;

package/dist/components/Table/index.d.ts

@@ -25,6 +25,8 @@ interface TableCellProps {
     children: React.ReactNode;
     align?: "start" | "center" | "end";
     isSticky?: boolean;
+    width?: string | number;
+    nowrap?: boolean;
     onClick?: (e: React.MouseEvent<HTMLTableCellElement>) => void;
 }
 declare const TableCell: React.NamedExoticComponent<TableCellProps>;

package/dist/components/Table/index.js

@@ -90,6 +90,8 @@ var TableCell = React4.memo((props) => {
     children,
     align = "center",
     isSticky = false,
+    width,
+    nowrap = false,
     onClick
   } = props;
   const { registerStickyCell, stickyCells } = useTableRowContext();
@@ -133,9 +135,13 @@ var TableCell = React4.memo((props) => {
         isSticky && "table-sticky",
         isLastSticky && stickyShadow && "right-shadow",
         onClick && "clickable",
-        enableHover && "cell-hover"
+        enableHover && "cell-hover",
+        nowrap && "nowrap"
       ),
-      style: isSticky ? { left } : void 0,
+      style: {
+        ...isSticky ? { left } : null,
+        ...width != null ? { width: typeof width === "number" ? `${width}px` : width } : null
+      },
       onClick,
       children
     }