@purpurds/table 8.19.0 → 8.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/table",
-  "version": "8.19.0",
+  "version": "8.20.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/table.cjs.js",
   "types": "./dist/table.d.ts",
@@ -21,22 +21,22 @@
     "@dnd-kit/utilities": "~3.2.2",
     "@tanstack/react-table": "~8.21.2",
     "classnames": "~2.5.1",
-    "@purpurds/badge": "8.19.0",
-    "@purpurds/cta-link": "8.19.0",
-    "@purpurds/checkbox": "8.19.0",
-    "@purpurds/button": "8.19.0",
-    "@purpurds/drawer": "8.19.0",
-    "@purpurds/paragraph": "8.19.0",
-    "@purpurds/heading": "8.19.0",
-    "@purpurds/link": "8.19.0",
-    "@purpurds/icon": "8.19.0",
-    "@purpurds/select": "8.19.0",
-    "@purpurds/skeleton": "8.19.0",
-    "@purpurds/text-field": "8.19.0",
-    "@purpurds/toggle": "8.19.0",
-    "@purpurds/tokens": "8.19.0",
-    "@purpurds/tooltip": "8.19.0",
-    "@purpurds/visually-hidden": "8.19.0"
+    "@purpurds/badge": "8.20.1",
+    "@purpurds/button": "8.20.1",
+    "@purpurds/cta-link": "8.20.1",
+    "@purpurds/drawer": "8.20.1",
+    "@purpurds/checkbox": "8.20.1",
+    "@purpurds/heading": "8.20.1",
+    "@purpurds/icon": "8.20.1",
+    "@purpurds/link": "8.20.1",
+    "@purpurds/paragraph": "8.20.1",
+    "@purpurds/select": "8.20.1",
+    "@purpurds/text-field": "8.20.1",
+    "@purpurds/toggle": "8.20.1",
+    "@purpurds/skeleton": "8.20.1",
+    "@purpurds/tokens": "8.20.1",
+    "@purpurds/tooltip": "8.20.1",
+    "@purpurds/visually-hidden": "8.20.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
@@ -45,7 +45,7 @@
     "@testing-library/jest-dom": "~6.9.1",
     "@testing-library/react": "~16.3.0",
     "@testing-library/user-event": "~14.5.1",
-    "@types/node": "22.17",
+    "@types/node": "24.10.9",
     "@types/react-dom": "^19.2.3",
     "@types/react": "^19.2.6",
     "eslint": "9.39.2",
@@ -60,13 +60,13 @@
     "vitest-axe": "~0.1.0",
     "vitest-canvas-mock": "~0.3.3",
     "vitest": "^4.0.10",
-    "@purpurds/autocomplete": "8.19.0",
+    "@purpurds/autocomplete": "8.20.1",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/grid": "8.19.0",
-    "@purpurds/illustrative-icon": "8.19.0",
-    "@purpurds/label": "8.19.0",
-    "@purpurds/listbox": "8.19.0",
-    "@purpurds/pagination": "8.19.0"
+    "@purpurds/illustrative-icon": "8.20.1",
+    "@purpurds/label": "8.20.1",
+    "@purpurds/grid": "8.20.1",
+    "@purpurds/listbox": "8.20.1",
+    "@purpurds/pagination": "8.20.1"
   },
   "scripts": {
     "build:dev": "vite",

package/src/empty-table.tsx

@@ -66,14 +66,22 @@ export const EmptyTable = ({
             `${rootClassName}__empty-section`,
             `${rootClassName}__empty-section--${variant}`,
           ])}
-          style={visibleWidth ? { width: `${visibleWidth}px` } : undefined}
+          style={
+            visibleWidth
+              ? { width: `calc(${visibleWidth}px - 2 * var(--purpur-border-width-xs))` }
+              : undefined
+          }
         >
-          {icon && <div className={cx(`${rootClassName}__empty-section__icon`)}>{icon}</div>}
-          <div className={cx(`${rootClassName}__empty-section__texts`)}>
-            <Heading data-testid="purpur-table-empty-table-title" variant="title-100" tag={tag}>
-              {title}
-            </Heading>
-            <Paragraph data-testid="purpur-table-empty-table-description">{description}</Paragraph>
+          <div className={cx([`${rootClassName}__empty-section__inner`])}>
+            {icon && <div className={cx(`${rootClassName}__empty-section__icon`)}>{icon}</div>}
+            <div className={cx(`${rootClassName}__empty-section__texts`)}>
+              <Heading data-testid="purpur-table-empty-table-title" variant="title-100" tag={tag}>
+                {title}
+              </Heading>
+              <Paragraph data-testid="purpur-table-empty-table-description">
+                {description}
+              </Paragraph>
+            </div>
           </div>
         </div>
       </TableRowCell>

package/src/table.module.scss

@@ -319,6 +319,8 @@ $indicatorWidth: 3px;
 
   &__empty-table {
     padding: 0;
+    text-align: center;
+    white-space: normal;
 
     .purpur-table__empty-section {
       border-bottom-left-radius: var(--table-border-radius);
@@ -495,17 +497,20 @@ $indicatorWidth: 3px;
 }
 
 .purpur-table__empty-section {
-  display: flex;
-  padding: var(--purpur-spacing-250) var(--purpur-spacing-400) var(--purpur-spacing-400)
-    var(--purpur-spacing-400);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: var(--purpur-spacing-150);
-  align-self: stretch;
   position: sticky;
   left: 0;
 
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    gap: var(--purpur-spacing-150);
+    padding: var(--purpur-spacing-250) var(--purpur-spacing-400) var(--purpur-spacing-400)
+      var(--purpur-spacing-400);
+  }
+
   &__icon {
     width: var(--purpur-spacing-1600);
     height: var(--purpur-spacing-1600);
@@ -528,11 +533,6 @@ $indicatorWidth: 3px;
   &--secondary {
     background: var(--purpur-color-background-primary);
   }
-
-  @media (min-width: $purpur-breakpoint-md) {
-    padding: var(--purpur-spacing-250) var(--purpur-spacing-0) var(--purpur-spacing-400)
-      var(--purpur-spacing-0);
-  }
 }
 
 .purpur-table__drag-overlay {