@backstage/ui 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -1,22 +1,130 @@
 # @backstage/ui
 
-## 0.9.1
+## 0.10.0
+
+### Minor Changes
+
+- 16543fa: **Breaking change** The `Cell` component has been refactored to be a generic wrapper component that accepts `children` for custom cell content. The text-specific functionality (previously part of `Cell`) has been moved to a new `CellText` component.
+
+  ### Migration Guide
+
+  If you were using `Cell` with text-specific props (`title`, `description`, `leadingIcon`, `href`), you need to update your code to use `CellText` instead:
+
+  **Before:**
+
+  ```tsx
+  <Cell
+    title="My Title"
+    description="My description"
+    leadingIcon={<Icon />}
+    href="/path"
+  />
+  ```
+
+  **After:**
+
+  ```tsx
+  <CellText
+    title="My Title"
+    description="My description"
+    leadingIcon={<Icon />}
+    href="/path"
+  />
+  ```
+
+  For custom cell content, use the new generic `Cell` component:
+
+  ```tsx
+  <Cell>{/* Your custom content */}</Cell>
+  ```
+
+### Patch Changes
+
+- 50b7927: Fixed Checkbox indicator showing checkmark color when unchecked.
+
+  Affected components: Checkbox
+
+- 5bacf55: Fixed `ButtonIcon` incorrectly applying `className` to inner elements instead of only the root element.
+
+  Affected components: ButtonIcon
+
+- b3ad928: Fixed Table Row component to correctly handle cases where no `href` is provided, preventing unnecessary router provider wrapping and fixing the cursor incorrectly showing as a pointer despite the element not being a link.
+
+  Affected components: Row
+
+- a20d317: Added row selection support with visual state styling for hover, selected, and pressed states. Fixed checkbox rendering to only show for multi-select toggle mode.
+
+  Affected components: Table, TableHeader, Row, Column
+
+- fe7c751: Fixed `useTable` hook to prioritize `providedRowCount` over data length for accurate row count in server-side pagination scenarios.
+- c145031: Fixed Table column sorting indicator to show up arrow when no sort is active, correctly indicating that clicking will sort ascending.
+
+  Affected components: Column
+
+## 0.10.0-next.1
+
+### Minor Changes
+
+- 16543fa: **Breaking change** The `Cell` component has been refactored to be a generic wrapper component that accepts `children` for custom cell content. The text-specific functionality (previously part of `Cell`) has been moved to a new `CellText` component.
+
+  ### Migration Guide
+
+  If you were using `Cell` with text-specific props (`title`, `description`, `leadingIcon`, `href`), you need to update your code to use `CellText` instead:
+
+  **Before:**
+
+  ```tsx
+  <Cell
+    title="My Title"
+    description="My description"
+    leadingIcon={<Icon />}
+    href="/path"
+  />
+  ```
+
+  **After:**
+
+  ```tsx
+  <CellText
+    title="My Title"
+    description="My description"
+    leadingIcon={<Icon />}
+    href="/path"
+  />
+  ```
+
+  For custom cell content, use the new generic `Cell` component:
+
+  ```tsx
+  <Cell>{/* Your custom content */}</Cell>
+  ```
 
 ### Patch Changes
 
-- 4514097: Fixed Checkbox indicator showing checkmark color when unchecked.
+- 50b7927: Fixed Checkbox indicator showing checkmark color when unchecked.
 
   Affected components: Checkbox
 
-- 3fc4aeb: Fixed `ButtonIcon` incorrectly applying `className` to inner elements instead of only the root element.
+- 5bacf55: Fixed `ButtonIcon` incorrectly applying `className` to inner elements instead of only the root element.
 
   Affected components: ButtonIcon
 
-- d43f3ce: Fixed Table Row component to correctly handle cases where no `href` is provided, preventing unnecessary router provider wrapping and fixing the cursor incorrectly showing as a pointer despite the element not being a link.
+- a20d317: Added row selection support with visual state styling for hover, selected, and pressed states. Fixed checkbox rendering to only show for multi-select toggle mode.
+
+  Affected components: Table, TableHeader, Row, Column
+
+## 0.9.1-next.0
+
+### Patch Changes
+
+- b3ad928: Fixed Table Row component to correctly handle cases where no `href` is provided, preventing unnecessary router provider wrapping and fixing the cursor incorrectly showing as a pointer despite the element not being a link.
 
   Affected components: Row
 
-- 2e92b5a: Fixed `useTable` hook to prioritize `providedRowCount` over data length for accurate row count in server-side pagination scenarios.
+- fe7c751: Fixed `useTable` hook to prioritize `providedRowCount` over data length for accurate row count in server-side pagination scenarios.
+- c145031: Fixed Table column sorting indicator to show up arrow when no sort is active, correctly indicating that clicking will sort ascending.
+
+  Affected components: Column
 
 ## 0.9.0
 

package/dist/components/Link/Link.esm.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Link as Link$1, RouterProvider } from 'react-aria-components';
+import { forwardRef, useRef } from 'react';
+import { useLink } from 'react-aria';
+import { RouterProvider } from 'react-aria-components';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { LinkDefinition } from './definition.esm.js';
@@ -19,22 +20,47 @@ const Link = forwardRef((props, ref) => {
       ...props
     }
   );
-  const { className, href, ...restProps } = cleanedProps;
+  const {
+    className,
+    href,
+    title,
+    children,
+    onPress,
+    variant,
+    weight,
+    color,
+    truncate,
+    slot,
+    ...restProps
+  } = cleanedProps;
   const isExternal = isExternalLink(href);
-  const component = /* @__PURE__ */ jsx(
-    Link$1,
+  const internalRef = useRef(null);
+  const linkRef = ref || internalRef;
+  const { linkProps } = useLink(
     {
-      ref,
-      className: clsx(classNames.root, styles[classNames.root], className),
       href,
-      ...dataAttributes,
+      onPress,
       ...restProps
+    },
+    linkRef
+  );
+  const anchorElement = /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...linkProps,
+      ...dataAttributes,
+      ...restProps,
+      ref: linkRef,
+      href,
+      title,
+      className: clsx(classNames.root, styles[classNames.root], className),
+      children
     }
   );
   if (isExternal) {
-    return component;
+    return anchorElement;
   }
-  return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: component });
+  return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: anchorElement });
 });
 Link.displayName = "Link";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Link as AriaLink, RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { LinkDefinition } from './definition';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport styles from './Link.module.css';\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const navigate = useNavigate();\n  const { classNames, dataAttributes, cleanedProps } = useStyles(\n    LinkDefinition,\n    {\n      variant: 'body',\n      weight: 'regular',\n      color: 'primary',\n      ...props,\n    },\n  );\n\n  const { className, href, ...restProps } = cleanedProps;\n\n  const isExternal = isExternalLink(href);\n\n  const component = (\n    <AriaLink\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      href={href}\n      {...dataAttributes}\n      {...restProps}\n    />\n  );\n\n  // If it's an external link, render AriaLink without RouterProvider\n  if (isExternal) {\n    return component;\n  }\n\n  // For internal links, use RouterProvider\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      {component}\n    </RouterProvider>\n  );\n});\n\nLink.displayName = 'Link';\n"],"names":["AriaLink"],"mappings":";;;;;;;;;;AA2BO,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,IACnD,cAAA;AAAA,IACA;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA;AACL,GACF;AAEA,EAAA,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,WAAU,GAAI,YAAA;AAE1C,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,MAAM,SAAA,mBACJ,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MACnE,IAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAIF,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,SAAA;AAAA,EACT;AAGA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,SAAA,EACH,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useRef } from 'react';\nimport { useLink } from 'react-aria';\nimport { RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { LinkDefinition } from './definition';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport styles from './Link.module.css';\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const navigate = useNavigate();\n  const { classNames, dataAttributes, cleanedProps } = useStyles(\n    LinkDefinition,\n    {\n      variant: 'body',\n      weight: 'regular',\n      color: 'primary',\n      ...props,\n    },\n  );\n\n  const {\n    className,\n    href,\n    title,\n    children,\n    onPress,\n    variant,\n    weight,\n    color,\n    truncate,\n    slot,\n    ...restProps\n  } = cleanedProps;\n\n  const isExternal = isExternalLink(href);\n  const internalRef = useRef<HTMLAnchorElement>(null);\n  const linkRef = (ref || internalRef) as React.RefObject<HTMLAnchorElement>;\n\n  // Use useLink hook to get link props\n  const { linkProps } = useLink(\n    {\n      href,\n      onPress,\n      ...restProps,\n    },\n    linkRef,\n  );\n\n  const anchorElement = (\n    <a\n      {...linkProps}\n      {...dataAttributes}\n      {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      ref={linkRef}\n      href={href}\n      title={title}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n    >\n      {children}\n    </a>\n  );\n\n  // If it's an external link, render without RouterProvider\n  if (isExternal) {\n    return anchorElement;\n  }\n\n  // For internal links, use RouterProvider\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      {anchorElement}\n    </RouterProvider>\n  );\n});\n\nLink.displayName = 'Link';\n"],"names":[],"mappings":";;;;;;;;;;;AA4BO,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,IACnD,cAAA;AAAA,IACA;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA;AACL,GACF;AAEA,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AAEJ,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AACtC,EAAA,MAAM,WAAA,GAAc,OAA0B,IAAI,CAAA;AAClD,EAAA,MAAM,UAAW,GAAA,IAAO,WAAA;AAGxB,EAAA,MAAM,EAAE,WAAU,GAAI,OAAA;AAAA,IACpB;AAAA,MACE,IAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,aAAA,mBACJ,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,GAAG,cAAA;AAAA,MACH,GAAI,SAAA;AAAA,MACL,GAAA,EAAK,OAAA;AAAA,MACL,IAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAElE;AAAA;AAAA,GACH;AAIF,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,aAAA;AAAA,EACT;AAGA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,aAAA,EACH,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

package/dist/components/Table/Table.module.css.esm.js

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Table-module_bui-Table__BkcBL {\n    width: 100%;\n    caption-side: bottom;\n    border-collapse: collapse;\n  }\n\n  .Table-module_bui-TableHeader__3Lh_9 {\n    border-bottom: 1px solid var(--bui-border);\n    transition: color 0.2s ease-in-out;\n  }\n\n  .Table-module_bui-TableHead__y-Yzm {\n    text-align: left;\n    padding: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n    color: var(--bui-fg-primary);\n\n    &:hover {\n      .Table-module_bui-TableHeadSortButton__Slxp- {\n        opacity: 1;\n      }\n    }\n  }\n\n  .Table-module_bui-TableHeadContent__1Buiu {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-1);\n  }\n\n  .Table-module_bui-TableHeadSortButton__Slxp- {\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bui-space-1);\n    opacity: 0;\n    transition: opacity 0.1s ease-in-out;\n    color: var(--bui-fg-secondary);\n\n    & svg {\n      transition: transform 0.1s ease-in-out;\n    }\n\n    &[data-sort-order='asc'] svg {\n      opacity: 1;\n      transform: rotate(0);\n    }\n\n    &[data-sort-order='desc'] svg {\n      opacity: 1;\n      transform: rotate(180deg);\n    }\n  }\n\n  .Table-module_bui-TableBody__2hcz_ {\n    color: var(--bui-fg-primary);\n  }\n\n  .Table-module_bui-TableRow__3S2EQ {\n    border-bottom: 1px solid var(--bui-border);\n    transition: color 0.2s ease-in-out;\n\n    &[data-react-aria-pressable='true'] {\n      cursor: pointer;\n    }\n  }\n\n  .Table-module_bui-TableBody__2hcz_ .Table-module_bui-TableRow__3S2EQ:hover {\n    background-color: var(--bui-gray-2);\n  }\n\n  .Table-module_bui-TableCell__1C-Gr {\n    padding: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n  }\n\n  .Table-module_bui-TableCell__1C-Gr {\n    padding: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n  }\n\n  .Table-module_bui-TableCellContentWrapper__2zDK3 {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .Table-module_bui-TableCellIcon__118Vd,\n  .Table-module_bui-TableCellIcon__118Vd svg {\n    display: inline-flex;\n    align-items: center;\n    color: var(--bui-fg-primary);\n  }\n\n  .Table-module_bui-TableCellContent__35knW {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-0_5);\n  }\n\n  .Table-module_bui-TableCellProfile__34xxd {\n    display: flex;\n    flex-direction: row;\n    gap: var(--bui-space-2);\n    align-items: center;\n  }\n}\n";
-var styles = {"bui-Table":"Table-module_bui-Table__BkcBL","bui-TableHeader":"Table-module_bui-TableHeader__3Lh_9","bui-TableHead":"Table-module_bui-TableHead__y-Yzm","bui-TableHeadSortButton":"Table-module_bui-TableHeadSortButton__Slxp-","bui-TableHeadContent":"Table-module_bui-TableHeadContent__1Buiu","bui-TableBody":"Table-module_bui-TableBody__2hcz_","bui-TableRow":"Table-module_bui-TableRow__3S2EQ","bui-TableCell":"Table-module_bui-TableCell__1C-Gr","bui-TableCellContentWrapper":"Table-module_bui-TableCellContentWrapper__2zDK3","bui-TableCellIcon":"Table-module_bui-TableCellIcon__118Vd","bui-TableCellContent":"Table-module_bui-TableCellContent__35knW","bui-TableCellProfile":"Table-module_bui-TableCellProfile__34xxd"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Table-module_bui-Table__BkcBL {\n    width: 100%;\n    caption-side: bottom;\n    border-collapse: collapse;\n    table-layout: fixed;\n  }\n\n  .Table-module_bui-TableHeader__3Lh_9 {\n    border-bottom: 1px solid var(--bui-border);\n    transition: color 0.2s ease-in-out;\n  }\n\n  .Table-module_bui-TableHead__y-Yzm {\n    text-align: left;\n    padding: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n    color: var(--bui-fg-primary);\n\n    &:hover {\n      .Table-module_bui-TableHeadSortButton__Slxp- {\n        opacity: 1;\n      }\n    }\n  }\n\n  .Table-module_bui-TableHeadSelection__2H6Yp {\n    width: 40px;\n  }\n\n  .Table-module_bui-TableHeadContent__1Buiu {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-1);\n  }\n\n  .Table-module_bui-TableHeadSortButton__Slxp- {\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n    gap: var(--bui-space-1);\n    opacity: 0;\n    transition: opacity 0.1s ease-in-out;\n    color: var(--bui-fg-secondary);\n\n    & svg {\n      transition: transform 0.1s ease-in-out;\n    }\n\n    &[data-sort-order='asc'] svg {\n      opacity: 1;\n      transform: rotate(0);\n    }\n\n    &[data-sort-order='desc'] svg {\n      opacity: 1;\n      transform: rotate(180deg);\n    }\n  }\n\n  .Table-module_bui-TableBody__2hcz_ {\n    color: var(--bui-fg-primary);\n  }\n\n  .Table-module_bui-TableRow__3S2EQ {\n    border-bottom: 1px solid var(--bui-border);\n    transition: color 0.2s ease-in-out;\n\n    &:hover {\n      background-color: var(--bui-bg-tint-hover);\n    }\n\n    &[data-selected] {\n      background-color: var(--bui-bg-tint-pressed);\n    }\n\n    &[data-pressed] {\n      background-color: var(--bui-bg-tint-pressed);\n    }\n\n    &[data-disabled] {\n      background-color: var(--bui-bg-tint-disabled);\n    }\n\n    &[data-react-aria-pressable='true'] {\n      cursor: pointer;\n    }\n  }\n\n  .Table-module_bui-TableCell__1C-Gr {\n    padding: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    min-width: 0;\n    overflow: hidden;\n  }\n\n  .Table-module_bui-TableCellSelection__3g6Iz {\n    width: 40px;\n  }\n\n  .Table-module_bui-TableCellContentWrapper__2zDK3 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    min-width: 0;\n    width: 100%;\n    max-width: 100%;\n  }\n\n  .Table-module_bui-TableCellIcon__118Vd,\n  .Table-module_bui-TableCellIcon__118Vd svg {\n    display: inline-flex;\n    align-items: center;\n    color: var(--bui-fg-primary);\n  }\n\n  .Table-module_bui-TableCellContent__35knW {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-0_5);\n    min-width: 0;\n    flex: 1;\n    overflow: hidden;\n    max-width: 100%;\n  }\n\n  .Table-module_bui-TableCellContent__35knW > * {\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .Table-module_bui-TableCellProfile__34xxd {\n    display: flex;\n    flex-direction: row;\n    gap: var(--bui-space-2);\n    align-items: center;\n  }\n}\n";
+var styles = {"bui-Table":"Table-module_bui-Table__BkcBL","bui-TableHeader":"Table-module_bui-TableHeader__3Lh_9","bui-TableHead":"Table-module_bui-TableHead__y-Yzm","bui-TableHeadSortButton":"Table-module_bui-TableHeadSortButton__Slxp-","bui-TableHeadSelection":"Table-module_bui-TableHeadSelection__2H6Yp","bui-TableHeadContent":"Table-module_bui-TableHeadContent__1Buiu","bui-TableBody":"Table-module_bui-TableBody__2hcz_","bui-TableRow":"Table-module_bui-TableRow__3S2EQ","bui-TableCell":"Table-module_bui-TableCell__1C-Gr","bui-TableCellSelection":"Table-module_bui-TableCellSelection__3g6Iz","bui-TableCellContentWrapper":"Table-module_bui-TableCellContentWrapper__2zDK3","bui-TableCellIcon":"Table-module_bui-TableCellIcon__118Vd","bui-TableCellContent":"Table-module_bui-TableCellContent__35knW","bui-TableCellProfile":"Table-module_bui-TableCellProfile__34xxd"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Table/components/Cell.esm.js

@@ -1,7 +1,5 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { Text } from '../../Text/Text.esm.js';
-import { Link } from '../../Link/Link.esm.js';
 import { Cell as Cell$1 } from 'react-aria-components';
 import { useStyles } from '../../../hooks/useStyles.esm.js';
 import { TableDefinition } from '../definition.esm.js';
@@ -12,43 +10,13 @@ const Cell = (props) => {
     color: "primary",
     ...props
   });
-  const { className, title, description, color, leadingIcon, href, ...rest } = cleanedProps;
+  const { className, children, ...rest } = cleanedProps;
   return /* @__PURE__ */ jsx(
     Cell$1,
     {
       className: clsx(classNames.cell, styles[classNames.cell], className),
       ...rest,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: clsx(
-            classNames.cellContentWrapper,
-            styles[classNames.cellContentWrapper]
-          ),
-          children: [
-            leadingIcon && /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: clsx(classNames.cellIcon, styles[classNames.cellIcon]),
-                children: leadingIcon
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: clsx(
-                  classNames.cellContent,
-                  styles[classNames.cellContent]
-                ),
-                children: [
-                  href ? /* @__PURE__ */ jsx(Link, { href, variant: "body-medium", color, children: title }) : /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-medium", color, children: title }),
-                  description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
-                ]
-              }
-            )
-          ]
-        }
-      )
+      children
     }
   );
 };

package/dist/components/Table/components/Cell.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.esm.js","sources":["../../../../src/components/Table/components/Cell.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { Text } from '../../Text';\nimport { Link } from '../../Link';\nimport { Cell as ReactAriaCell } from 'react-aria-components';\nimport type { CellProps } from '../types';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\n\n/** @public */\nconst Cell = (props: CellProps) => {\n  const { classNames, cleanedProps } = useStyles(TableDefinition, {\n    color: 'primary' as const,\n    ...props,\n  });\n  const { className, title, description, color, leadingIcon, href, ...rest } =\n    cleanedProps;\n\n  return (\n    <ReactAriaCell\n      className={clsx(classNames.cell, styles[classNames.cell], className)}\n      {...rest}\n    >\n      <div\n        className={clsx(\n          classNames.cellContentWrapper,\n          styles[classNames.cellContentWrapper],\n        )}\n      >\n        {leadingIcon && (\n          <div\n            className={clsx(classNames.cellIcon, styles[classNames.cellIcon])}\n          >\n            {leadingIcon}\n          </div>\n        )}\n        <div\n          className={clsx(\n            classNames.cellContent,\n            styles[classNames.cellContent],\n          )}\n        >\n          {href ? (\n            <Link href={href} variant=\"body-medium\" color={color}>\n              {title}\n            </Link>\n          ) : (\n            <Text as=\"p\" variant=\"body-medium\" color={color}>\n              {title}\n            </Text>\n          )}\n          {description && (\n            <Text variant=\"body-medium\" color=\"secondary\">\n              {description}\n            </Text>\n          )}\n        </div>\n      </div>\n    </ReactAriaCell>\n  );\n};\n\nCell.displayName = 'Cell';\n\nexport { Cell };\n"],"names":["ReactAriaCell"],"mappings":";;;;;;;;;AA0BA,MAAM,IAAA,GAAO,CAAC,KAAA,KAAqB;AACjC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,eAAA,EAAiB;AAAA,IAC9D,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,WAAW,KAAA,EAAO,WAAA,EAAa,OAAO,WAAA,EAAa,IAAA,EAAM,GAAG,IAAA,EAAK,GACvE,YAAA;AAEF,EAAA,uBACE,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,kBAAA;AAAA,YACX,MAAA,CAAO,WAAW,kBAAkB;AAAA,WACtC;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,WAAA,oBACC,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,WAAW,IAAA,CAAK,UAAA,CAAW,UAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,gBAE/D,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,4BAEF,IAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,WAAA;AAAA,kBACX,MAAA,CAAO,WAAW,WAAW;AAAA,iBAC/B;AAAA,gBAEC,QAAA,EAAA;AAAA,kBAAA,IAAA,mBACC,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAY,OAAA,EAAQ,eAAc,KAAA,EACrC,QAAA,EAAA,KAAA,EACH,CAAA,mBAEA,GAAA,CAAC,QAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,aAAA,EAAc,OAChC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,kBAED,+BACC,GAAA,CAAC,IAAA,EAAA,EAAK,SAAQ,aAAA,EAAc,KAAA,EAAM,aAC/B,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA;AAEJ;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"version":3,"file":"Cell.esm.js","sources":["../../../../src/components/Table/components/Cell.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { Cell as ReactAriaCell } from 'react-aria-components';\nimport type { CellProps } from '../types';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\n\n/** @public */\nconst Cell = (props: CellProps) => {\n  const { classNames, cleanedProps } = useStyles(TableDefinition, {\n    color: 'primary' as const,\n    ...props,\n  });\n  const { className, children, ...rest } = cleanedProps;\n\n  return (\n    <ReactAriaCell\n      className={clsx(classNames.cell, styles[classNames.cell], className)}\n      {...rest}\n    >\n      {children}\n    </ReactAriaCell>\n  );\n};\n\nCell.displayName = 'Cell';\n\nexport { Cell };\n"],"names":["ReactAriaCell"],"mappings":";;;;;;;AAwBA,MAAM,IAAA,GAAO,CAAC,KAAA,KAAqB;AACjC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,eAAA,EAAiB;AAAA,IAC9D,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,EAAA,uBACE,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

package/dist/components/Table/components/CellText.esm.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Text } from '../../Text/Text.esm.js';
+import { Link } from '../../Link/Link.esm.js';
+import { Cell } from 'react-aria-components';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+import { TableDefinition } from '../definition.esm.js';
+import styles from '../Table.module.css.esm.js';
+
+const CellText = (props) => {
+  const { classNames, cleanedProps } = useStyles(TableDefinition, {
+    color: "primary",
+    ...props
+  });
+  const { className, title, description, color, leadingIcon, href, ...rest } = cleanedProps;
+  return /* @__PURE__ */ jsx(
+    Cell,
+    {
+      className: clsx(classNames.cell, styles[classNames.cell], className),
+      ...rest,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(
+            classNames.cellContentWrapper,
+            styles[classNames.cellContentWrapper]
+          ),
+          children: [
+            leadingIcon && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(classNames.cellIcon, styles[classNames.cellIcon]),
+                children: leadingIcon
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: clsx(
+                  classNames.cellContent,
+                  styles[classNames.cellContent]
+                ),
+                children: [
+                  href ? /* @__PURE__ */ jsx(
+                    Link,
+                    {
+                      href,
+                      variant: "body-medium",
+                      color,
+                      truncate: true,
+                      title,
+                      children: title
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      as: "p",
+                      variant: "body-medium",
+                      color,
+                      truncate: true,
+                      title,
+                      children: title
+                    }
+                  ),
+                  description && /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      variant: "body-medium",
+                      color: "secondary",
+                      truncate: true,
+                      title: description,
+                      children: description
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+CellText.displayName = "CellText";
+
+export { CellText };
+//# sourceMappingURL=CellText.esm.js.map

package/dist/components/Table/components/CellText.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CellText.esm.js","sources":["../../../../src/components/Table/components/CellText.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { Text } from '../../Text';\nimport { Link } from '../../Link';\nimport { Cell as ReactAriaCell } from 'react-aria-components';\nimport type { CellTextProps } from '../types';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\n\n/** @public */\nconst CellText = (props: CellTextProps) => {\n  const { classNames, cleanedProps } = useStyles(TableDefinition, {\n    color: 'primary' as const,\n    ...props,\n  });\n  const { className, title, description, color, leadingIcon, href, ...rest } =\n    cleanedProps;\n\n  return (\n    <ReactAriaCell\n      className={clsx(classNames.cell, styles[classNames.cell], className)}\n      {...rest}\n    >\n      <div\n        className={clsx(\n          classNames.cellContentWrapper,\n          styles[classNames.cellContentWrapper],\n        )}\n      >\n        {leadingIcon && (\n          <div\n            className={clsx(classNames.cellIcon, styles[classNames.cellIcon])}\n          >\n            {leadingIcon}\n          </div>\n        )}\n        <div\n          className={clsx(\n            classNames.cellContent,\n            styles[classNames.cellContent],\n          )}\n        >\n          {href ? (\n            <Link\n              href={href}\n              variant=\"body-medium\"\n              color={color}\n              truncate\n              title={title}\n            >\n              {title}\n            </Link>\n          ) : (\n            <Text\n              as=\"p\"\n              variant=\"body-medium\"\n              color={color}\n              truncate\n              title={title}\n            >\n              {title}\n            </Text>\n          )}\n          {description && (\n            <Text\n              variant=\"body-medium\"\n              color=\"secondary\"\n              truncate\n              title={description}\n            >\n              {description}\n            </Text>\n          )}\n        </div>\n      </div>\n    </ReactAriaCell>\n  );\n};\n\nCellText.displayName = 'CellText';\n\nexport { CellText };\n"],"names":["ReactAriaCell"],"mappings":";;;;;;;;;AA0BA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AACzC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,eAAA,EAAiB;AAAA,IAC9D,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,WAAW,KAAA,EAAO,WAAA,EAAa,OAAO,WAAA,EAAa,IAAA,EAAM,GAAG,IAAA,EAAK,GACvE,YAAA;AAEF,EAAA,uBACE,GAAA;AAAA,IAACA,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,kBAAA;AAAA,YACX,MAAA,CAAO,WAAW,kBAAkB;AAAA,WACtC;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,WAAA,oBACC,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,WAAW,IAAA,CAAK,UAAA,CAAW,UAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,gBAE/D,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,4BAEF,IAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,WAAA;AAAA,kBACX,MAAA,CAAO,WAAW,WAAW;AAAA,iBAC/B;AAAA,gBAEC,QAAA,EAAA;AAAA,kBAAA,IAAA,mBACC,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,IAAA;AAAA,sBACA,OAAA,EAAQ,aAAA;AAAA,sBACR,KAAA;AAAA,sBACA,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA;AAAA,sBAEC,QAAA,EAAA;AAAA;AAAA,mBACH,mBAEA,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAG,GAAA;AAAA,sBACH,OAAA,EAAQ,aAAA;AAAA,sBACR,KAAA;AAAA,sBACA,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA;AAAA,sBAEC,QAAA,EAAA;AAAA;AAAA,mBACH;AAAA,kBAED,WAAA,oBACC,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,OAAA,EAAQ,aAAA;AAAA,sBACR,KAAA,EAAM,WAAA;AAAA,sBACN,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA,EAAO,WAAA;AAAA,sBAEN,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA;AAEJ;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;;;;"}

package/dist/components/Table/components/Column.esm.js

@@ -4,15 +4,15 @@ import { useStyles } from '../../../hooks/useStyles.esm.js';
 import { TableDefinition } from '../definition.esm.js';
 import styles from '../Table.module.css.esm.js';
 import clsx from 'clsx';
-import { RiArrowUpLine, RiArrowDownLine } from '@remixicon/react';
+import { RiArrowDownLine, RiArrowUpLine } from '@remixicon/react';
 
 const Column = (props) => {
   const { classNames, cleanedProps } = useStyles(TableDefinition, props);
-  const { children, ...rest } = cleanedProps;
+  const { className, children, ...rest } = cleanedProps;
   return /* @__PURE__ */ jsx(
     Column$1,
     {
-      className: clsx(classNames.head, styles[classNames.head]),
+      className: clsx(classNames.head, styles[classNames.head], className),
       ...rest,
       children: ({ allowsSorting, sortDirection }) => /* @__PURE__ */ jsxs(
         "div",
@@ -31,7 +31,7 @@ const Column = (props) => {
                   classNames.headSortButton,
                   styles[classNames.headSortButton]
                 ),
-                children: sortDirection === "ascending" ? /* @__PURE__ */ jsx(RiArrowUpLine, { size: 16 }) : /* @__PURE__ */ jsx(RiArrowDownLine, { size: 16 })
+                children: sortDirection === "descending" ? /* @__PURE__ */ jsx(RiArrowDownLine, { size: 16 }) : /* @__PURE__ */ jsx(RiArrowUpLine, { size: 16 })
               }
             )
           ]

package/dist/components/Table/components/Column.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Column.esm.js","sources":["../../../../src/components/Table/components/Column.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Column as ReactAriaColumn } from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\nimport { ColumnProps } from '../types';\nimport { RiArrowUpLine, RiArrowDownLine } from '@remixicon/react';\n\n/** @public */\nexport const Column = (props: ColumnProps) => {\n  const { classNames, cleanedProps } = useStyles(TableDefinition, props);\n  const { children, ...rest } = cleanedProps;\n\n  return (\n    <ReactAriaColumn\n      className={clsx(classNames.head, styles[classNames.head])}\n      {...rest}\n    >\n      {({ allowsSorting, sortDirection }) => (\n        <div\n          className={clsx(\n            classNames.headContent,\n            styles[classNames.headContent],\n          )}\n        >\n          {children}\n          {allowsSorting && (\n            <span\n              aria-hidden=\"true\"\n              className={clsx(\n                classNames.headSortButton,\n                styles[classNames.headSortButton],\n              )}\n            >\n              {sortDirection === 'ascending' ? (\n                <RiArrowUpLine size={16} />\n              ) : (\n                <RiArrowDownLine size={16} />\n              )}\n            </span>\n          )}\n        </div>\n      )}\n    </ReactAriaColumn>\n  );\n};\n"],"names":["ReactAriaColumn"],"mappings":";;;;;;;;AAyBO,MAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,iBAAiB,KAAK,CAAA;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,IAAA,EAAK,GAAI,YAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,MACvD,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,CAAC,EAAE,aAAA,EAAe,aAAA,EAAc,qBAC/B,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,WAAA;AAAA,YACX,MAAA,CAAO,WAAW,WAAW;AAAA,WAC/B;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,YACA,aAAA,oBACC,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,aAAA,EAAY,MAAA;AAAA,gBACZ,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,cAAA;AAAA,kBACX,MAAA,CAAO,WAAW,cAAc;AAAA,iBAClC;AAAA,gBAEC,QAAA,EAAA,aAAA,KAAkB,WAAA,mBACjB,GAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAM,IAAI,CAAA,mBAEzB,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AAE/B;AAAA;AAAA;AAEJ;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"Column.esm.js","sources":["../../../../src/components/Table/components/Column.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Column as ReactAriaColumn } from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\nimport { ColumnProps } from '../types';\nimport { RiArrowUpLine, RiArrowDownLine } from '@remixicon/react';\n\n/** @public */\nexport const Column = (props: ColumnProps) => {\n  const { classNames, cleanedProps } = useStyles(TableDefinition, props);\n  const { className, children, ...rest } = cleanedProps;\n\n  return (\n    <ReactAriaColumn\n      className={clsx(classNames.head, styles[classNames.head], className)}\n      {...rest}\n    >\n      {({ allowsSorting, sortDirection }) => (\n        <div\n          className={clsx(\n            classNames.headContent,\n            styles[classNames.headContent],\n          )}\n        >\n          {children}\n          {allowsSorting && (\n            <span\n              aria-hidden=\"true\"\n              className={clsx(\n                classNames.headSortButton,\n                styles[classNames.headSortButton],\n              )}\n            >\n              {sortDirection === 'descending' ? (\n                <RiArrowDownLine size={16} />\n              ) : (\n                <RiArrowUpLine size={16} />\n              )}\n            </span>\n          )}\n        </div>\n      )}\n    </ReactAriaColumn>\n  );\n};\n"],"names":["ReactAriaColumn"],"mappings":";;;;;;;;AAyBO,MAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,iBAAiB,KAAK,CAAA;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,CAAC,EAAE,aAAA,EAAe,aAAA,EAAc,qBAC/B,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,WAAA;AAAA,YACX,MAAA,CAAO,WAAW,WAAW;AAAA,WAC/B;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,QAAA;AAAA,YACA,aAAA,oBACC,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,aAAA,EAAY,MAAA;AAAA,gBACZ,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,cAAA;AAAA,kBACX,MAAA,CAAO,WAAW,cAAc;AAAA,iBAClC;AAAA,gBAEC,QAAA,EAAA,aAAA,KAAkB,YAAA,mBACjB,GAAA,CAAC,eAAA,EAAA,EAAgB,IAAA,EAAM,IAAI,CAAA,mBAE3B,GAAA,CAAC,aAAA,EAAA,EAAc,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AAE7B;AAAA;AAAA;AAEJ;AAAA,GAEJ;AAEJ;;;;"}

package/dist/components/Table/components/Row.esm.js

@@ -1,20 +1,31 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useTableOptions, Row as Row$1, RouterProvider, Cell, Checkbox, Collection } from 'react-aria-components';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useTableOptions, Cell, Collection, Row as Row$1, RouterProvider } from 'react-aria-components';
+import { Checkbox } from '../../Checkbox/Checkbox.esm.js';
 import { useStyles } from '../../../hooks/useStyles.esm.js';
 import { TableDefinition } from '../definition.esm.js';
 import { useNavigate, useHref } from 'react-router-dom';
 import { isExternalLink } from '../../../utils/isExternalLink.esm.js';
 import styles from '../Table.module.css.esm.js';
 import clsx from 'clsx';
+import { Flex } from '../../Flex/Flex.esm.js';
 
 function Row(props) {
   const { classNames, cleanedProps } = useStyles(TableDefinition, props);
   const { id, columns, children, href, ...rest } = cleanedProps;
   const navigate = useNavigate();
   const isExternal = isExternalLink(href);
-  let { selectionBehavior } = useTableOptions();
+  let { selectionBehavior, selectionMode } = useTableOptions();
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    selectionBehavior === "toggle" && /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection" }) }),
+    selectionBehavior === "toggle" && selectionMode === "multiple" && /* @__PURE__ */ jsx(
+      Cell,
+      {
+        className: clsx(
+          classNames.cellSelection,
+          styles[classNames.cellSelection]
+        ),
+        children: /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection", children: /* @__PURE__ */ jsx(Fragment, {}) }) })
+      }
+    ),
     /* @__PURE__ */ jsx(Collection, { items: columns, children })
   ] });
   if (!href || isExternal) {

package/dist/components/Table/components/Row.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.esm.js","sources":["../../../../src/components/Table/components/Row.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Row as ReactAriaRow,\n  RowProps,\n  useTableOptions,\n  Cell,\n  Collection,\n  Checkbox,\n  RouterProvider,\n} from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport { useNavigate } from 'react-router-dom';\nimport { useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../../utils/isExternalLink';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport function Row<T extends object>(props: RowProps<T>) {\n  const { classNames, cleanedProps } = useStyles(TableDefinition, props);\n  const { id, columns, children, href, ...rest } = cleanedProps;\n  const navigate = useNavigate();\n  const isExternal = isExternalLink(href);\n\n  let { selectionBehavior } = useTableOptions();\n\n  const content = (\n    <>\n      {selectionBehavior === 'toggle' && (\n        <Cell>\n          <Checkbox slot=\"selection\" />\n        </Cell>\n      )}\n      <Collection items={columns}>{children}</Collection>\n    </>\n  );\n\n  if (!href || isExternal) {\n    return (\n      <ReactAriaRow\n        id={id}\n        href={href}\n        className={clsx(classNames.row, styles[classNames.row])}\n        {...rest}\n      >\n        {content}\n      </ReactAriaRow>\n    );\n  }\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <ReactAriaRow\n        id={id}\n        href={href}\n        className={clsx(classNames.row, styles[classNames.row])}\n        data-react-aria-pressable=\"true\"\n        {...rest}\n      >\n        {content}\n      </ReactAriaRow>\n    </RouterProvider>\n  );\n}\n"],"names":["ReactAriaRow"],"mappings":";;;;;;;;;AAkCO,SAAS,IAAsB,KAAA,EAAoB;AACxD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,iBAAiB,KAAK,CAAA;AACrE,EAAA,MAAM,EAAE,EAAA,EAAI,OAAA,EAAS,UAAU,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AACjD,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,IAAI,EAAE,iBAAA,EAAkB,GAAI,eAAA,EAAgB;AAE5C,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,iBAAA,KAAsB,4BACrB,GAAA,CAAC,IAAA,EAAA,EACC,8BAAC,QAAA,EAAA,EAAS,IAAA,EAAK,aAAY,CAAA,EAC7B,CAAA;AAAA,oBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACxC,CAAA;AAGF,EAAA,IAAI,CAAC,QAAQ,UAAA,EAAY;AACvB,IAAA,uBACE,GAAA;AAAA,MAACA,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,IAAA;AAAA,QACA,WAAW,IAAA,CAAK,UAAA,CAAW,KAAK,MAAA,CAAO,UAAA,CAAW,GAAG,CAAC,CAAA;AAAA,QACrD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAW,IAAA,CAAK,UAAA,CAAW,KAAK,MAAA,CAAO,UAAA,CAAW,GAAG,CAAC,CAAA;AAAA,MACtD,2BAAA,EAA0B,MAAA;AAAA,MACzB,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Row.esm.js","sources":["../../../../src/components/Table/components/Row.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  Row as ReactAriaRow,\n  RowProps,\n  useTableOptions,\n  Cell as ReactAriaCell,\n  Collection,\n  RouterProvider,\n} from 'react-aria-components';\nimport { Checkbox } from '../../Checkbox';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport { useNavigate } from 'react-router-dom';\nimport { useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../../utils/isExternalLink';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\nimport { Flex } from '../../Flex';\n\n/** @public */\nexport function Row<T extends object>(props: RowProps<T>) {\n  const { classNames, cleanedProps } = useStyles(TableDefinition, props);\n  const { id, columns, children, href, ...rest } = cleanedProps;\n  const navigate = useNavigate();\n  const isExternal = isExternalLink(href);\n\n  let { selectionBehavior, selectionMode } = useTableOptions();\n\n  const content = (\n    <>\n      {selectionBehavior === 'toggle' && selectionMode === 'multiple' && (\n        <ReactAriaCell\n          className={clsx(\n            classNames.cellSelection,\n            styles[classNames.cellSelection],\n          )}\n        >\n          <Flex justify=\"center\" align=\"center\">\n            <Checkbox slot=\"selection\">\n              <></>\n            </Checkbox>\n          </Flex>\n        </ReactAriaCell>\n      )}\n      <Collection items={columns}>{children}</Collection>\n    </>\n  );\n\n  if (!href || isExternal) {\n    return (\n      <ReactAriaRow\n        id={id}\n        href={href}\n        className={clsx(classNames.row, styles[classNames.row])}\n        {...rest}\n      >\n        {content}\n      </ReactAriaRow>\n    );\n  }\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <ReactAriaRow\n        id={id}\n        href={href}\n        className={clsx(classNames.row, styles[classNames.row])}\n        data-react-aria-pressable=\"true\"\n        {...rest}\n      >\n        {content}\n      </ReactAriaRow>\n    </RouterProvider>\n  );\n}\n"],"names":["ReactAriaCell","ReactAriaRow"],"mappings":";;;;;;;;;;;AAmCO,SAAS,IAAsB,KAAA,EAAoB;AACxD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,iBAAiB,KAAK,CAAA;AACrE,EAAA,MAAM,EAAE,EAAA,EAAI,OAAA,EAAS,UAAU,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AACjD,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,IAAI,EAAE,iBAAA,EAAmB,aAAA,EAAc,GAAI,eAAA,EAAgB;AAE3D,EAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,iBAAA,KAAsB,QAAA,IAAY,kBAAkB,UAAA,oBACnD,GAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,aAAA;AAAA,UACX,MAAA,CAAO,WAAW,aAAa;AAAA,SACjC;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,QAAA,EAAS,KAAA,EAAM,QAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,WAAA,EACb,QAAA,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAE,CAAA,EACJ,CAAA,EACF;AAAA;AAAA,KACF;AAAA,oBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACxC,CAAA;AAGF,EAAA,IAAI,CAAC,QAAQ,UAAA,EAAY;AACvB,IAAA,uBACE,GAAA;AAAA,MAACC,KAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,IAAA;AAAA,QACA,WAAW,IAAA,CAAK,UAAA,CAAW,KAAK,MAAA,CAAO,UAAA,CAAW,GAAG,CAAC,CAAA;AAAA,QACrD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAW,IAAA,CAAK,UAAA,CAAW,KAAK,MAAA,CAAO,UAAA,CAAW,GAAG,CAAC,CAAA;AAAA,MACtD,2BAAA,EAA0B,MAAA;AAAA,MACzB,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;;;;"}

package/dist/components/Table/components/TableHeader.esm.js

@@ -1,13 +1,15 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useTableOptions, TableHeader as TableHeader$1, Checkbox, Collection } from 'react-aria-components';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useTableOptions, TableHeader as TableHeader$1, Collection } from 'react-aria-components';
+import { Checkbox } from '../../Checkbox/Checkbox.esm.js';
 import { Column } from './Column.esm.js';
 import { useStyles } from '../../../hooks/useStyles.esm.js';
 import { TableDefinition } from '../definition.esm.js';
 import styles from '../Table.module.css.esm.js';
 import clsx from 'clsx';
+import { Flex } from '../../Flex/Flex.esm.js';
 
 const TableHeader = (props) => {
-  let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
+  let { selectionBehavior, selectionMode } = useTableOptions();
   const { classNames, cleanedProps } = useStyles(TableDefinition, props);
   const { columns, children, ...rest } = cleanedProps;
   return /* @__PURE__ */ jsxs(
@@ -16,8 +18,19 @@ const TableHeader = (props) => {
       className: clsx(classNames.header, styles[classNames.header]),
       ...rest,
       children: [
-        allowsDragging && /* @__PURE__ */ jsx(Column, {}),
-        selectionBehavior === "toggle" && /* @__PURE__ */ jsx(Column, { children: selectionMode === "multiple" && /* @__PURE__ */ jsx(Checkbox, { slot: "selection" }) }),
+        selectionBehavior === "toggle" && selectionMode === "multiple" && /* @__PURE__ */ jsx(
+          Column,
+          {
+            width: 40,
+            minWidth: 40,
+            maxWidth: 40,
+            className: clsx(
+              classNames.headSelection,
+              styles[classNames.headSelection]
+            ),
+            children: /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection", children: /* @__PURE__ */ jsx(Fragment, {}) }) })
+          }
+        ),
         /* @__PURE__ */ jsx(Collection, { items: columns, children })
       ]
     }

package/dist/components/Table/components/TableHeader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.esm.js","sources":["../../../../src/components/Table/components/TableHeader.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  TableHeader as ReactAriaTableHeader,\n  type TableHeaderProps,\n  Checkbox,\n} from 'react-aria-components';\nimport { Collection, useTableOptions } from 'react-aria-components';\nimport { Column } from './Column';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const TableHeader = <T extends object>(props: TableHeaderProps<T>) => {\n  let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();\n\n  const { classNames, cleanedProps } = useStyles(TableDefinition, props);\n  const { columns, children, ...rest } = cleanedProps;\n\n  return (\n    <ReactAriaTableHeader\n      className={clsx(classNames.header, styles[classNames.header])}\n      {...rest}\n    >\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <Column />}\n      {selectionBehavior === 'toggle' && (\n        <Column>\n          {selectionMode === 'multiple' && <Checkbox slot=\"selection\" />}\n        </Column>\n      )}\n      <Collection items={columns}>{children}</Collection>\n    </ReactAriaTableHeader>\n  );\n};\n"],"names":["ReactAriaTableHeader"],"mappings":";;;;;;;;AA6BO,MAAM,WAAA,GAAc,CAAmB,KAAA,KAA+B;AAC3E,EAAA,IAAI,EAAE,iBAAA,EAAmB,aAAA,EAAe,cAAA,KAAmB,eAAA,EAAgB;AAE3E,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,iBAAiB,KAAK,CAAA;AACrE,EAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEvC,EAAA,uBACE,IAAA;AAAA,IAACA,aAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,QAAQ,MAAA,CAAO,UAAA,CAAW,MAAM,CAAC,CAAA;AAAA,MAC3D,GAAG,IAAA;AAAA,MAGH,QAAA,EAAA;AAAA,QAAA,cAAA,wBAAmB,MAAA,EAAA,EAAO,CAAA;AAAA,QAC1B,iBAAA,KAAsB,QAAA,oBACrB,GAAA,CAAC,MAAA,EAAA,EACE,QAAA,EAAA,aAAA,KAAkB,8BAAc,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,WAAA,EAAY,CAAA,EAC9D,CAAA;AAAA,wBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA;AAAA;AAAA,GACxC;AAEJ;;;;"}
+{"version":3,"file":"TableHeader.esm.js","sources":["../../../../src/components/Table/components/TableHeader.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  TableHeader as ReactAriaTableHeader,\n  type TableHeaderProps,\n  Collection,\n  useTableOptions,\n} from 'react-aria-components';\nimport { Checkbox } from '../../Checkbox';\nimport { Column } from './Column';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\nimport clsx from 'clsx';\nimport { Flex } from '../../Flex';\n\n/** @public */\nexport const TableHeader = <T extends object>(props: TableHeaderProps<T>) => {\n  let { selectionBehavior, selectionMode } = useTableOptions();\n\n  const { classNames, cleanedProps } = useStyles(TableDefinition, props);\n  const { columns, children, ...rest } = cleanedProps;\n\n  return (\n    <ReactAriaTableHeader\n      className={clsx(classNames.header, styles[classNames.header])}\n      {...rest}\n    >\n      {selectionBehavior === 'toggle' && selectionMode === 'multiple' && (\n        <Column\n          width={40}\n          minWidth={40}\n          maxWidth={40}\n          className={clsx(\n            classNames.headSelection,\n            styles[classNames.headSelection],\n          )}\n        >\n          <Flex justify=\"center\" align=\"center\">\n            <Checkbox slot=\"selection\">\n              <></>\n            </Checkbox>\n          </Flex>\n        </Column>\n      )}\n      <Collection items={columns}>{children}</Collection>\n    </ReactAriaTableHeader>\n  );\n};\n"],"names":["ReactAriaTableHeader"],"mappings":";;;;;;;;;;AA+BO,MAAM,WAAA,GAAc,CAAmB,KAAA,KAA+B;AAC3E,EAAA,IAAI,EAAE,iBAAA,EAAmB,aAAA,EAAc,GAAI,eAAA,EAAgB;AAE3D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,iBAAiB,KAAK,CAAA;AACrE,EAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEvC,EAAA,uBACE,IAAA;AAAA,IAACA,aAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,QAAQ,MAAA,CAAO,UAAA,CAAW,MAAM,CAAC,CAAA;AAAA,MAC3D,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,iBAAA,KAAsB,QAAA,IAAY,kBAAkB,UAAA,oBACnD,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,EAAA;AAAA,YACP,QAAA,EAAU,EAAA;AAAA,YACV,QAAA,EAAU,EAAA;AAAA,YACV,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,aAAA;AAAA,cACX,MAAA,CAAO,WAAW,aAAa;AAAA,aACjC;AAAA,YAEA,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,QAAA,EAAS,KAAA,EAAM,QAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,WAAA,EACb,QAAA,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAE,CAAA,EACJ,CAAA,EACF;AAAA;AAAA,SACF;AAAA,wBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA;AAAA;AAAA,GACxC;AAEJ;;;;"}

package/dist/components/Table/definition.esm.js

@@ -16,7 +16,9 @@ const TableDefinition = {
     cellProfileAvatarImage: "bui-TableCellProfileAvatarImage",
     cellProfileAvatarFallback: "bui-TableCellProfileAvatarFallback",
     cellProfileName: "bui-TableCellProfileName",
-    cellProfileLink: "bui-TableCellProfileLink"
+    cellProfileLink: "bui-TableCellProfileLink",
+    headSelection: "bui-TableHeadSelection",
+    cellSelection: "bui-TableCellSelection"
   }
 };
 

package/dist/components/Table/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Table/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Table\n * @public\n */\nexport const TableDefinition = {\n  classNames: {\n    table: 'bui-Table',\n    header: 'bui-TableHeader',\n    body: 'bui-TableBody',\n    row: 'bui-TableRow',\n    head: 'bui-TableHead',\n    headContent: 'bui-TableHeadContent',\n    headSortButton: 'bui-TableHeadSortButton',\n    caption: 'bui-TableCaption',\n    cell: 'bui-TableCell',\n    cellContentWrapper: 'bui-TableCellContentWrapper',\n    cellContent: 'bui-TableCellContent',\n    cellIcon: 'bui-TableCellIcon',\n    cellProfileAvatar: 'bui-TableCellProfileAvatar',\n    cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n    cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n    cellProfileName: 'bui-TableCellProfileName',\n    cellProfileLink: 'bui-TableCellProfileLink',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,eAAA,GAAkB;AAAA,EAC7B,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,WAAA;AAAA,IACP,MAAA,EAAQ,iBAAA;AAAA,IACR,IAAA,EAAM,eAAA;AAAA,IACN,GAAA,EAAK,cAAA;AAAA,IACL,IAAA,EAAM,eAAA;AAAA,IACN,WAAA,EAAa,sBAAA;AAAA,IACb,cAAA,EAAgB,yBAAA;AAAA,IAChB,OAAA,EAAS,kBAAA;AAAA,IACT,IAAA,EAAM,eAAA;AAAA,IACN,kBAAA,EAAoB,6BAAA;AAAA,IACpB,WAAA,EAAa,sBAAA;AAAA,IACb,QAAA,EAAU,mBAAA;AAAA,IACV,iBAAA,EAAmB,4BAAA;AAAA,IACnB,sBAAA,EAAwB,iCAAA;AAAA,IACxB,yBAAA,EAA2B,oCAAA;AAAA,IAC3B,eAAA,EAAiB,0BAAA;AAAA,IACjB,eAAA,EAAiB;AAAA;AAErB;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Table/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Table\n * @public\n */\nexport const TableDefinition = {\n  classNames: {\n    table: 'bui-Table',\n    header: 'bui-TableHeader',\n    body: 'bui-TableBody',\n    row: 'bui-TableRow',\n    head: 'bui-TableHead',\n    headContent: 'bui-TableHeadContent',\n    headSortButton: 'bui-TableHeadSortButton',\n    caption: 'bui-TableCaption',\n    cell: 'bui-TableCell',\n    cellContentWrapper: 'bui-TableCellContentWrapper',\n    cellContent: 'bui-TableCellContent',\n    cellIcon: 'bui-TableCellIcon',\n    cellProfileAvatar: 'bui-TableCellProfileAvatar',\n    cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n    cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n    cellProfileName: 'bui-TableCellProfileName',\n    cellProfileLink: 'bui-TableCellProfileLink',\n    headSelection: 'bui-TableHeadSelection',\n    cellSelection: 'bui-TableCellSelection',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,eAAA,GAAkB;AAAA,EAC7B,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,WAAA;AAAA,IACP,MAAA,EAAQ,iBAAA;AAAA,IACR,IAAA,EAAM,eAAA;AAAA,IACN,GAAA,EAAK,cAAA;AAAA,IACL,IAAA,EAAM,eAAA;AAAA,IACN,WAAA,EAAa,sBAAA;AAAA,IACb,cAAA,EAAgB,yBAAA;AAAA,IAChB,OAAA,EAAS,kBAAA;AAAA,IACT,IAAA,EAAM,eAAA;AAAA,IACN,kBAAA,EAAoB,6BAAA;AAAA,IACpB,WAAA,EAAa,sBAAA;AAAA,IACb,QAAA,EAAU,mBAAA;AAAA,IACV,iBAAA,EAAmB,4BAAA;AAAA,IACnB,sBAAA,EAAwB,iCAAA;AAAA,IACxB,yBAAA,EAA2B,oCAAA;AAAA,IAC3B,eAAA,EAAiB,0BAAA;AAAA,IACjB,eAAA,EAAiB,0BAAA;AAAA,IACjB,aAAA,EAAe,wBAAA;AAAA,IACf,aAAA,EAAe;AAAA;AAEnB;;;;"}

package/dist/index.d.ts

@@ -824,6 +824,9 @@ declare const TableBody: <T extends object>(props: TableBodyProps<T>) => react_j
 
 /** @public */
 interface CellProps extends CellProps$1 {
+}
+/** @public */
+interface CellTextProps extends CellProps$1 {
     title: string;
     description?: string;
     color?: TextColors;
@@ -855,6 +858,12 @@ declare const Cell: {
     displayName: string;
 };
 
+/** @public */
+declare const CellText: {
+    (props: CellTextProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 /** @public */
 declare const CellProfile: (props: CellProfileProps) => react_jsx_runtime.JSX.Element;
 
@@ -961,6 +970,8 @@ declare const TableDefinition: {
         readonly cellProfileAvatarFallback: "bui-TableCellProfileAvatarFallback";
         readonly cellProfileName: "bui-TableCellProfileName";
         readonly cellProfileLink: "bui-TableCellProfileLink";
+        readonly headSelection: "bui-TableHeadSelection";
+        readonly cellSelection: "bui-TableCellSelection";
     };
 };
 
@@ -1286,6 +1297,8 @@ interface LinkProps extends LinkProps$1 {
     weight?: TextWeights | Partial<Record<Breakpoint, TextWeights>>;
     color?: TextColors | TextColorStatus | Partial<Record<Breakpoint, TextColors | TextColorStatus>>;
     truncate?: boolean;
+    title?: string;
+    children?: ReactNode;
 }
 
 /** @public */
@@ -1453,4 +1466,5 @@ declare const useBreakpoint: () => {
     down: (key: Breakpoint) => boolean;
 };
 
-export { Accordion, AccordionDefinition, AccordionGroup, type AccordionGroupProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AlignItems, Avatar, AvatarDefinition, type AvatarProps, type Border, type BorderRadius, Box, BoxDefinition, type BoxProps, type Breakpoint, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, type ButtonIconProps, ButtonLink, ButtonLinkDefinition, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardDefinition, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, CheckboxDefinition, type CheckboxProps, type ClassNamesMap, Column, type ColumnProps, type Columns, type ComponentDefinition, Container, ContainerDefinition, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogDefinition, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, FieldLabelDefinition, type FieldLabelProps, Flex, FlexDefinition, type FlexDirection, type FlexProps, type FlexWrap, Grid, GridDefinition, GridItemDefinition, type GridItemProps, type GridProps, Header, HeaderDefinition, HeaderPage, type HeaderPageBreadcrumb, HeaderPageDefinition, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, LinkDefinition, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuDefinition, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, type Option, Radio, RadioGroup, RadioGroupDefinition, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, SearchFieldDefinition, type SearchFieldProps, Select, SelectDefinition, type SelectProps, Skeleton, SkeletonDefinition, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, SwitchDefinition, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, type TablePaginationProps, Tabs, TabsDefinition, type TabsProps, Tag, TagGroup, TagGroupDefinition, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextDefinition, TextField, TextFieldDefinition, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, TooltipDefinition, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, VisuallyHidden, VisuallyHiddenDefinition, type VisuallyHiddenProps, useBreakpoint, useTable };
+export { Accordion, AccordionDefinition, AccordionGroup, AccordionPanel, AccordionTrigger, Avatar, AvatarDefinition, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardDefinition, CardFooter, CardHeader, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogDefinition, DialogFooter, DialogHeader, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, Radio, RadioGroup, RadioGroupDefinition, Row, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, useBreakpoint, useTable };
+export type { AccordionGroupProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlignItems, AvatarProps, Border, BorderRadius, BoxProps, Breakpoint, ButtonIconProps, ButtonLinkProps, ButtonProps, CardBodyProps, CardFooterProps, CardHeaderProps, CardProps, CellProfileProps, CellProps, CellTextProps, CheckboxProps, ClassNamesMap, ColumnProps, Columns, ComponentDefinition, ContainerProps, DataAttributeValues, DataAttributesMap, DialogBodyProps, DialogHeaderProps, DialogProps, DialogTriggerProps, Display, FieldLabelProps, FlexDirection, FlexProps, FlexWrap, GridItemProps, GridProps, HeaderPageBreadcrumb, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkProps, MenuAutocompleteListBoxProps, MenuAutocompleteProps, MenuItemProps, MenuListBoxItemProps, MenuListBoxProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, Option, RadioGroupProps, RadioProps, Responsive, SearchFieldProps, SelectProps, SkeletonProps, Space, SpaceProps, SubmenuTriggerProps, SwitchProps, TabListProps, TabMatchStrategy, TabPanelProps, TabProps, TablePaginationProps, TabsProps, TagGroupProps, TagProps, TextColorStatus, TextColors, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, TooltipProps, UseTableConfig, UseTablePagination, UseTablePaginationConfig, UseTableResult, UtilityProps, VisuallyHiddenProps };

package/dist/index.esm.js

@@ -36,6 +36,7 @@ export { TableBody } from './components/Table/components/TableBody.esm.js';
 export { Column } from './components/Table/components/Column.esm.js';
 export { Row } from './components/Table/components/Row.esm.js';
 export { Cell } from './components/Table/components/Cell.esm.js';
+export { CellText } from './components/Table/components/CellText.esm.js';
 export { CellProfile } from './components/Table/components/CellProfile.esm.js';
 export { useTable } from './components/Table/hooks/useTable.esm.js';
 export { TableDefinition } from './components/Table/definition.esm.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/ui",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "backstage": {
     "role": "web-library"
   },
@@ -46,7 +46,7 @@
     "react-aria-components": "^1.13.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.34.5",
+    "@backstage/cli": "^0.35.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "chalk": "^5.4.1",