@backstage/ui 0.13.0-next.1 → 0.13.0

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

@@ -4,31 +4,56 @@ import { Checkbox } from '../../Checkbox/Checkbox.esm.js';
 import { useDefinition } from '../../../hooks/useDefinition/useDefinition.esm.js';
 import '../../Checkbox/Checkbox.module.css.esm.js';
 import { RowDefinition } from '../definition.esm.js';
-import { isExternalLink } from '../../../utils/isExternalLink.esm.js';
-import { InternalLinkProvider } from '../../InternalLinkProvider/InternalLinkProvider.esm.js';
+import { isExternalLink } from '../../../utils/linkUtils.esm.js';
 import clsx from 'clsx';
 import { Flex } from '../../Flex/Flex.esm.js';
 import '../../Flex/Flex.module.css.esm.js';
 
 function Row(props) {
-  const { ownProps, restProps } = useDefinition(RowDefinition, props);
+  const { ownProps, restProps, dataAttributes, analytics } = useDefinition(
+    RowDefinition,
+    props
+  );
   const { classes, columns, children, href } = ownProps;
-  const hasInternalHref = !!href && !isExternalLink(href);
+  const isExternal = isExternalLink(href);
+  const hasInternalHref = !!href && !isExternal;
+  const hasExternalHref = !!href && isExternal;
+  const hasInteraction = !!restProps.onAction || !!href;
+  const effectiveTarget = hasExternalHref ? "_blank" : restProps.target;
+  const effectiveRel = effectiveTarget === "_blank" ? [
+    .../* @__PURE__ */ new Set([
+      "noopener",
+      "noreferrer",
+      ...restProps.rel?.split(/\s+/).filter(Boolean) ?? []
+    ])
+  ].join(" ") : restProps.rel;
+  const handlePress = hasInteraction ? () => {
+    restProps.onAction?.();
+    if (href) {
+      analytics.captureEvent("click", href, {
+        attributes: { to: String(href) }
+      });
+    }
+  } : void 0;
   let { selectionBehavior, selectionMode } = useTableOptions();
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    selectionBehavior === "toggle" && selectionMode === "multiple" && /* @__PURE__ */ jsx(Cell, { className: clsx(classes.cell, classes.cellSelection), children: /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection", children: /* @__PURE__ */ jsx(Fragment, {}) }) }) }),
+    selectionBehavior === "toggle" && selectionMode === "multiple" && /* @__PURE__ */ jsx(Cell, { className: clsx(classes.cell, classes.cellSelection), children: /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection", "aria-label": "Select row" }) }) }),
     /* @__PURE__ */ jsx(Collection, { items: columns, children })
   ] });
-  return /* @__PURE__ */ jsx(InternalLinkProvider, { href, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     Row$1,
     {
       href,
-      className: classes.root,
-      "data-react-aria-pressable": hasInternalHref ? "true" : void 0,
       ...restProps,
+      ...dataAttributes,
+      target: effectiveTarget,
+      rel: effectiveRel,
+      className: clsx(classes.root, restProps.className),
+      "data-react-aria-pressable": hasInternalHref ? "true" : void 0,
+      onAction: handlePress,
       children: content
     }
-  ) });
+  );
 }
 
 export { Row };

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  useTableOptions,\n  Cell as ReactAriaCell,\n  Collection,\n} from 'react-aria-components';\nimport { Checkbox } from '../../Checkbox';\nimport { useDefinition } from '../../../hooks/useDefinition';\nimport { RowDefinition } from '../definition';\nimport type { RowProps } from '../types';\nimport { isExternalLink } from '../../../utils/isExternalLink';\nimport { InternalLinkProvider } from '../../InternalLinkProvider';\nimport clsx from 'clsx';\nimport { Flex } from '../../Flex';\n\n/** @public */\nexport function Row<T extends object>(props: RowProps<T>) {\n  const { ownProps, restProps } = useDefinition(RowDefinition, props);\n  const { classes, columns, children, href } = ownProps;\n  const hasInternalHref = !!href && !isExternalLink(href);\n\n  let { selectionBehavior, selectionMode } = useTableOptions();\n\n  const content = (\n    <>\n      {selectionBehavior === 'toggle' && selectionMode === 'multiple' && (\n        <ReactAriaCell className={clsx(classes.cell, classes.cellSelection)}>\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  return (\n    <InternalLinkProvider href={href}>\n      <ReactAriaRow\n        href={href}\n        className={classes.root}\n        data-react-aria-pressable={hasInternalHref ? 'true' : undefined}\n        {...restProps}\n      >\n        {content}\n      </ReactAriaRow>\n    </InternalLinkProvider>\n  );\n}\n"],"names":["ReactAriaCell","ReactAriaRow"],"mappings":";;;;;;;;;;;;AAgCO,SAAS,IAAsB,KAAA,EAAoB;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,eAAe,KAAK,CAAA;AAClE,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,QAAA,EAAU,MAAK,GAAI,QAAA;AAC7C,EAAA,MAAM,kBAAkB,CAAC,CAAC,IAAA,IAAQ,CAAC,eAAe,IAAI,CAAA;AAEtD,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,aAAA,KAAkB,UAAA,oBACnD,GAAA,CAACA,IAAA,EAAA,EAAc,WAAW,IAAA,CAAK,OAAA,CAAQ,IAAA,EAAM,OAAA,CAAQ,aAAa,CAAA,EAChE,8BAAC,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,CAAA,EACF,CAAA;AAAA,oBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACxC,CAAA;AAGF,EAAA,uBACE,GAAA,CAAC,wBAAqB,IAAA,EACpB,QAAA,kBAAA,GAAA;AAAA,IAACC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,2BAAA,EAA2B,kBAAkB,MAAA,GAAS,MAAA;AAAA,MACrD,GAAG,SAAA;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  useTableOptions,\n  Cell as ReactAriaCell,\n  Collection,\n} from 'react-aria-components';\nimport { Checkbox } from '../../Checkbox';\nimport { useDefinition } from '../../../hooks/useDefinition';\nimport { RowDefinition } from '../definition';\nimport type { RowProps } from '../types';\nimport { isExternalLink } from '../../../utils/linkUtils';\nimport clsx from 'clsx';\nimport { Flex } from '../../Flex';\n\n/** @public */\nexport function Row<T extends object>(props: RowProps<T>) {\n  const { ownProps, restProps, dataAttributes, analytics } = useDefinition(\n    RowDefinition,\n    props,\n  );\n  const { classes, columns, children, href } = ownProps;\n  const isExternal = isExternalLink(href);\n  const hasInternalHref = !!href && !isExternal;\n  const hasExternalHref = !!href && isExternal;\n  const hasInteraction = !!restProps.onAction || !!href;\n\n  // Derive the effective target, defaulting to _blank for external links.\n  const effectiveTarget = hasExternalHref ? '_blank' : restProps.target;\n  // Always include noopener noreferrer when target=_blank, merging any\n  // consumer-provided rel tokens to avoid reverse-tabnabbing risk.\n  const effectiveRel =\n    effectiveTarget === '_blank'\n      ? [\n          ...new Set([\n            'noopener',\n            'noreferrer',\n            ...(restProps.rel?.split(/\\s+/).filter(Boolean) ?? []),\n          ]),\n        ].join(' ')\n      : restProps.rel;\n\n  const handlePress = hasInteraction\n    ? () => {\n        restProps.onAction?.();\n        if (href) {\n          analytics.captureEvent('click', href, {\n            attributes: { to: String(href) },\n          });\n        }\n      }\n    : undefined;\n\n  let { selectionBehavior, selectionMode } = useTableOptions();\n\n  const content = (\n    <>\n      {selectionBehavior === 'toggle' && selectionMode === 'multiple' && (\n        <ReactAriaCell className={clsx(classes.cell, classes.cellSelection)}>\n          <Flex justify=\"center\" align=\"center\">\n            <Checkbox slot=\"selection\" aria-label=\"Select row\" />\n          </Flex>\n        </ReactAriaCell>\n      )}\n      <Collection items={columns}>{children}</Collection>\n    </>\n  );\n\n  return (\n    <ReactAriaRow\n      href={href}\n      {...restProps}\n      {...dataAttributes}\n      target={effectiveTarget}\n      rel={effectiveRel}\n      className={clsx(classes.root, restProps.className)}\n      data-react-aria-pressable={hasInternalHref ? 'true' : undefined}\n      onAction={handlePress}\n    >\n      {content}\n    </ReactAriaRow>\n  );\n}\n"],"names":["ReactAriaCell","ReactAriaRow"],"mappings":";;;;;;;;;;;AA+BO,SAAS,IAAsB,KAAA,EAAoB;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,WAAU,GAAI,aAAA;AAAA,IACzD,aAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,QAAA,EAAU,MAAK,GAAI,QAAA;AAC7C,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AACtC,EAAA,MAAM,eAAA,GAAkB,CAAC,CAAC,IAAA,IAAQ,CAAC,UAAA;AACnC,EAAA,MAAM,eAAA,GAAkB,CAAC,CAAC,IAAA,IAAQ,UAAA;AAClC,EAAA,MAAM,iBAAiB,CAAC,CAAC,SAAA,CAAU,QAAA,IAAY,CAAC,CAAC,IAAA;AAGjD,EAAA,MAAM,eAAA,GAAkB,eAAA,GAAkB,QAAA,GAAW,SAAA,CAAU,MAAA;AAG/D,EAAA,MAAM,YAAA,GACJ,oBAAoB,QAAA,GAChB;AAAA,IACE,uBAAO,GAAA,CAAI;AAAA,MACT,UAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAI,UAAU,GAAA,EAAK,KAAA,CAAM,KAAK,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,IAAK;AAAC,KACrD;AAAA,GACH,CAAE,IAAA,CAAK,GAAG,CAAA,GACV,SAAA,CAAU,GAAA;AAEhB,EAAA,MAAM,WAAA,GAAc,iBAChB,MAAM;AACJ,IAAA,SAAA,CAAU,QAAA,IAAW;AACrB,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,SAAA,CAAU,YAAA,CAAa,SAAS,IAAA,EAAM;AAAA,QACpC,UAAA,EAAY,EAAE,EAAA,EAAI,MAAA,CAAO,IAAI,CAAA;AAAE,OAChC,CAAA;AAAA,IACH;AAAA,EACF,CAAA,GACA,MAAA;AAEJ,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,aAAA,KAAkB,UAAA,oBACnD,GAAA,CAACA,IAAA,EAAA,EAAc,WAAW,IAAA,CAAK,OAAA,CAAQ,IAAA,EAAM,OAAA,CAAQ,aAAa,CAAA,EAChE,8BAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,QAAA,EAAS,KAAA,EAAM,QAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,WAAA,EAAY,YAAA,EAAW,YAAA,EAAa,CAAA,EACrD,CAAA,EACF,CAAA;AAAA,oBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACxC,CAAA;AAGF,EAAA,uBACE,GAAA;AAAA,IAACC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACH,GAAG,cAAA;AAAA,MACJ,MAAA,EAAQ,eAAA;AAAA,MACR,GAAA,EAAK,YAAA;AAAA,MACL,SAAA,EAAW,IAAA,CAAK,OAAA,CAAQ,IAAA,EAAM,UAAU,SAAS,CAAA;AAAA,MACjD,2BAAA,EAA2B,kBAAkB,MAAA,GAAS,MAAA;AAAA,MACtD,QAAA,EAAU,WAAA;AAAA,MAET,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

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

@@ -1,22 +1,22 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useId } from 'react-aria';
-import { ResizableTableContainer } from 'react-aria-components';
+import { ResizableTableContainer, Virtualizer } from 'react-aria-components';
+import { TableLayout } from '@react-stately/layout';
+import { useDefinition } from '../../../hooks/useDefinition/useDefinition.esm.js';
+import { TableWrapperDefinition } from '../definition.esm.js';
 import { TableRoot } from './TableRoot.esm.js';
 import { TableHeader } from './TableHeader.esm.js';
 import { TableBody } from './TableBody.esm.js';
 import { Row } from './Row.esm.js';
 import { Column } from './Column.esm.js';
 import { TablePagination } from '../../TablePagination/TablePagination.esm.js';
-import 'clsx';
-import '../../../hooks/useBreakpoint.esm.js';
-import '../../../hooks/useBg.esm.js';
-import '../../../hooks/useDefinition/helpers.esm.js';
 import '../../TablePagination/TablePagination.module.css.esm.js';
 import { useMemo } from 'react';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.esm.js';
 import '../../VisuallyHidden/VisuallyHidden.module.css.esm.js';
 import { Flex } from '../../Flex/Flex.esm.js';
 import '../../Flex/Flex.module.css.esm.js';
+import { TableBodySkeleton } from './TableBodySkeleton.esm.js';
 
 function isRowRenderFn(rowConfig) {
   return typeof rowConfig === "function";
@@ -38,7 +38,10 @@ function useDisabledRows({
     }, /* @__PURE__ */ new Set());
   }, [data, rowConfig]);
 }
-function useLiveRegionLabel(pagination, isStale, hasData) {
+function useLiveRegionLabel(pagination, isStale, isLoading, hasData) {
+  if (isLoading) {
+    return "Loading table data.";
+  }
   if (!hasData || pagination.type === "none") {
     return "";
   }
@@ -68,8 +71,12 @@ function Table({
   selection,
   emptyState,
   className,
-  style
+  style,
+  virtualized
 }) {
+  const {
+    ownProps: { classes }
+  } = useDefinition(TableWrapperDefinition, { className });
   const liveRegionId = useId();
   const visibleColumns = useMemo(
     () => columnConfig.filter((col) => !col.isHidden),
@@ -82,11 +89,9 @@ function Table({
     behavior: selectionBehavior,
     onSelectionChange
   } = selection || {};
-  if (loading && !data) {
-    return /* @__PURE__ */ jsx("div", { className, style, children: "Loading..." });
-  }
+  const isInitialLoading = loading && !data;
   if (error) {
-    return /* @__PURE__ */ jsxs("div", { className, style, children: [
+    return /* @__PURE__ */ jsxs("div", { className: classes.root, style, children: [
       "Error: ",
       error.message
     ] });
@@ -94,70 +99,78 @@ function Table({
   const liveRegionLabel = useLiveRegionLabel(
     pagination,
     isStale,
+    isInitialLoading,
     data !== void 0
   );
   const manualColumnSizing = columnConfig.some(
     (col) => col.width != null || col.minWidth != null || col.maxWidth != null || col.defaultWidth != null
   );
-  const wrapResizable = manualColumnSizing ? (elem) => /* @__PURE__ */ jsx(ResizableTableContainer, { children: elem }) : (elem) => /* @__PURE__ */ jsx(Fragment, { children: elem });
-  return /* @__PURE__ */ jsxs("div", { className, style, children: [
+  const wrapResizable = manualColumnSizing ? (elem) => /* @__PURE__ */ jsx(ResizableTableContainer, { className: classes.resizableContainer, children: elem }) : (elem) => /* @__PURE__ */ jsx(Fragment, { children: elem });
+  const layoutOptions = typeof virtualized === "object" ? virtualized : void 0;
+  const wrapVirtualized = (elem) => virtualized ? /* @__PURE__ */ jsx(Virtualizer, { layout: TableLayout, layoutOptions, children: elem }) : elem;
+  return /* @__PURE__ */ jsxs("div", { className: classes.root, style, children: [
     /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", id: liveRegionId, children: liveRegionLabel }),
     wrapResizable(
-      /* @__PURE__ */ jsxs(
-        TableRoot,
-        {
-          selectionMode,
-          selectionBehavior,
-          selectedKeys,
-          onSelectionChange,
-          sortDescriptor: sort?.descriptor ?? void 0,
-          onSortChange: sort?.onSortChange,
-          disabledKeys: disabledRows,
-          stale: isStale,
-          "aria-describedby": liveRegionId,
-          children: [
-            /* @__PURE__ */ jsx(TableHeader, { columns: visibleColumns, children: (column) => column.header ? column.header() : /* @__PURE__ */ jsx(
-              Column,
-              {
-                id: column.id,
-                isRowHeader: column.isRowHeader,
-                allowsSorting: column.isSortable,
-                width: column.width,
-                defaultWidth: column.defaultWidth,
-                minWidth: column.minWidth,
-                maxWidth: column.maxWidth,
-                children: column.label
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              TableBody,
-              {
-                items: data,
-                dependencies: [visibleColumns],
-                renderEmptyState: emptyState ? () => /* @__PURE__ */ jsx(Flex, { p: "3", children: emptyState }) : void 0,
-                children: (item) => {
-                  const itemIndex = data?.indexOf(item) ?? -1;
-                  if (isRowRenderFn(rowConfig)) {
-                    return rowConfig({
-                      item,
-                      index: itemIndex
-                    });
-                  }
-                  return /* @__PURE__ */ jsx(
-                    Row,
-                    {
-                      id: String(item.id),
-                      columns: visibleColumns,
-                      href: rowConfig?.getHref?.(item),
-                      onAction: rowConfig?.onClick ? () => rowConfig?.onClick?.(item) : void 0,
-                      children: (column) => column.cell(item)
+      wrapVirtualized(
+        /* @__PURE__ */ jsxs(
+          TableRoot,
+          {
+            ...isInitialLoading ? {} : {
+              selectionMode,
+              selectionBehavior,
+              selectedKeys,
+              onSelectionChange
+            },
+            sortDescriptor: sort?.descriptor ?? void 0,
+            onSortChange: sort?.onSortChange,
+            disabledKeys: disabledRows,
+            stale: isStale,
+            loading: isInitialLoading,
+            "aria-describedby": liveRegionId,
+            children: [
+              /* @__PURE__ */ jsx(TableHeader, { columns: visibleColumns, children: (column) => column.header ? column.header() : /* @__PURE__ */ jsx(
+                Column,
+                {
+                  id: column.id,
+                  isRowHeader: column.isRowHeader,
+                  allowsSorting: column.isSortable,
+                  width: column.width,
+                  defaultWidth: column.defaultWidth,
+                  minWidth: column.minWidth,
+                  maxWidth: column.maxWidth,
+                  children: column.label
+                }
+              ) }),
+              isInitialLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { columns: visibleColumns }) : /* @__PURE__ */ jsx(
+                TableBody,
+                {
+                  items: data,
+                  dependencies: [visibleColumns],
+                  renderEmptyState: emptyState ? () => /* @__PURE__ */ jsx(Flex, { p: "3", children: emptyState }) : void 0,
+                  children: (item) => {
+                    const itemIndex = data?.indexOf(item) ?? -1;
+                    if (isRowRenderFn(rowConfig)) {
+                      return rowConfig({
+                        item,
+                        index: itemIndex
+                      });
                     }
-                  );
+                    return /* @__PURE__ */ jsx(
+                      Row,
+                      {
+                        id: String(item.id),
+                        columns: visibleColumns,
+                        href: rowConfig?.getHref?.(item),
+                        onAction: rowConfig?.onClick ? () => rowConfig?.onClick?.(item) : void 0,
+                        children: (column) => column.cell(item)
+                      }
+                    );
+                  }
                 }
-              }
-            )
-          ]
-        }
+              )
+            ]
+          }
+        )
       )
     ),
     pagination.type === "page" && /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"Table.esm.js","sources":["../../../../src/components/Table/components/Table.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 { useId } from 'react-aria';\nimport { type Key, ResizableTableContainer } from 'react-aria-components';\nimport { TableRoot } from './TableRoot';\nimport { TableHeader } from './TableHeader';\nimport { TableBody } from './TableBody';\nimport { Row } from './Row';\nimport { Column } from './Column';\nimport { TablePagination } from '../../TablePagination';\nimport type {\n  TableProps,\n  TableItem,\n  RowConfig,\n  RowRenderFn,\n  TablePaginationType,\n} from '../types';\nimport { useMemo } from 'react';\nimport { VisuallyHidden } from '../../VisuallyHidden';\nimport { Flex } from '../../Flex';\n\nfunction isRowRenderFn<T extends TableItem>(\n  rowConfig: RowConfig<T> | RowRenderFn<T> | undefined,\n): rowConfig is RowRenderFn<T> {\n  return typeof rowConfig === 'function';\n}\n\nfunction useDisabledRows<T extends TableItem>({\n  data,\n  rowConfig,\n}: Pick<TableProps<T>, 'data' | 'rowConfig'>): Set<Key> | undefined {\n  return useMemo(() => {\n    if (!data || typeof rowConfig === 'function' || !rowConfig?.getIsDisabled) {\n      return;\n    }\n\n    return data.reduce<Set<Key>>((set, item) => {\n      const isDisabled = rowConfig.getIsDisabled?.(item);\n      if (isDisabled) {\n        set.add(String(item.id));\n      }\n      return set;\n    }, new Set<Key>());\n  }, [data, rowConfig]);\n}\n\nfunction useLiveRegionLabel(\n  pagination: TablePaginationType,\n  isStale: boolean,\n  hasData: boolean,\n): string {\n  if (!hasData || pagination.type === 'none') {\n    return '';\n  }\n\n  const { pageSize, offset, totalCount, getLabel } = pagination;\n\n  if (isStale) {\n    return 'Loading table data.';\n  }\n\n  let liveRegionLabel = 'Table page loaded. ';\n\n  if (getLabel) {\n    liveRegionLabel += getLabel({ pageSize, offset, totalCount });\n  } else if (offset !== undefined) {\n    const fromCount = offset + 1;\n    const toCount = Math.min(offset + pageSize, totalCount ?? 0);\n    liveRegionLabel += `Showing ${fromCount} to ${toCount} of ${totalCount}`;\n  }\n  return liveRegionLabel;\n}\n\n/** @public */\nexport function Table<T extends TableItem>({\n  columnConfig,\n  data,\n  loading = false,\n  isStale = false,\n  error,\n  pagination,\n  sort,\n  rowConfig,\n  selection,\n  emptyState,\n  className,\n  style,\n}: TableProps<T>) {\n  const liveRegionId = useId();\n\n  const visibleColumns = useMemo(\n    () => columnConfig.filter(col => !col.isHidden),\n    [columnConfig],\n  );\n  const disabledRows = useDisabledRows({ data, rowConfig });\n\n  const {\n    mode: selectionMode,\n    selected: selectedKeys,\n    behavior: selectionBehavior,\n    onSelectionChange,\n  } = selection || {};\n\n  if (loading && !data) {\n    return (\n      <div className={className} style={style}>\n        Loading...\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className={className} style={style}>\n        Error: {error.message}\n      </div>\n    );\n  }\n\n  const liveRegionLabel = useLiveRegionLabel(\n    pagination,\n    isStale,\n    data !== undefined,\n  );\n\n  const manualColumnSizing = columnConfig.some(\n    col =>\n      col.width != null ||\n      col.minWidth != null ||\n      col.maxWidth != null ||\n      col.defaultWidth != null,\n  );\n\n  const wrapResizable = manualColumnSizing\n    ? (elem: React.ReactNode) => (\n        <ResizableTableContainer>{elem}</ResizableTableContainer>\n      )\n    : (elem: React.ReactNode) => <>{elem}</>;\n\n  return (\n    <div className={className} style={style}>\n      <VisuallyHidden aria-live=\"polite\" id={liveRegionId}>\n        {liveRegionLabel}\n      </VisuallyHidden>\n      {wrapResizable(\n        <TableRoot\n          selectionMode={selectionMode}\n          selectionBehavior={selectionBehavior}\n          selectedKeys={selectedKeys}\n          onSelectionChange={onSelectionChange}\n          sortDescriptor={sort?.descriptor ?? undefined}\n          onSortChange={sort?.onSortChange}\n          disabledKeys={disabledRows}\n          stale={isStale}\n          aria-describedby={liveRegionId}\n        >\n          <TableHeader columns={visibleColumns}>\n            {column =>\n              column.header ? (\n                column.header()\n              ) : (\n                <Column\n                  id={column.id}\n                  isRowHeader={column.isRowHeader}\n                  allowsSorting={column.isSortable}\n                  width={column.width}\n                  defaultWidth={column.defaultWidth}\n                  minWidth={column.minWidth}\n                  maxWidth={column.maxWidth}\n                >\n                  {column.label}\n                </Column>\n              )\n            }\n          </TableHeader>\n          <TableBody\n            items={data}\n            dependencies={[visibleColumns]}\n            renderEmptyState={\n              emptyState ? () => <Flex p=\"3\">{emptyState}</Flex> : undefined\n            }\n          >\n            {item => {\n              const itemIndex = data?.indexOf(item) ?? -1;\n\n              if (isRowRenderFn(rowConfig)) {\n                return rowConfig({\n                  item,\n                  index: itemIndex,\n                });\n              }\n\n              return (\n                <Row\n                  id={String(item.id)}\n                  columns={visibleColumns}\n                  href={rowConfig?.getHref?.(item)}\n                  onAction={\n                    rowConfig?.onClick\n                      ? () => rowConfig?.onClick?.(item)\n                      : undefined\n                  }\n                >\n                  {column => column.cell(item)}\n                </Row>\n              );\n            }}\n          </TableBody>\n        </TableRoot>,\n      )}\n      {pagination.type === 'page' && (\n        <TablePagination\n          pageSize={pagination.pageSize}\n          pageSizeOptions={pagination.pageSizeOptions}\n          offset={pagination.offset}\n          totalCount={pagination.totalCount}\n          hasNextPage={pagination.hasNextPage}\n          hasPreviousPage={pagination.hasPreviousPage}\n          onNextPage={pagination.onNextPage}\n          onPreviousPage={pagination.onPreviousPage}\n          onPageSizeChange={pagination.onPageSizeChange}\n          showPageSizeOptions={pagination.showPageSizeOptions}\n          getLabel={pagination.getLabel}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.esm.js","sources":["../../../../src/components/Table/components/Table.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 { useId } from 'react-aria';\nimport {\n  type Key,\n  ResizableTableContainer,\n  Virtualizer,\n} from 'react-aria-components';\nimport { TableLayout } from '@react-stately/layout';\nimport { useDefinition } from '../../../hooks/useDefinition';\nimport { TableWrapperDefinition } from '../definition';\nimport { TableRoot } from './TableRoot';\nimport { TableHeader } from './TableHeader';\nimport { TableBody } from './TableBody';\nimport { Row } from './Row';\nimport { Column } from './Column';\nimport { TablePagination } from '../../TablePagination';\nimport type {\n  TableProps,\n  TableItem,\n  RowConfig,\n  RowRenderFn,\n  TablePaginationType,\n} from '../types';\nimport { useMemo } from 'react';\nimport { VisuallyHidden } from '../../VisuallyHidden';\nimport { Flex } from '../../Flex';\nimport { TableBodySkeleton } from './TableBodySkeleton';\n\nfunction isRowRenderFn<T extends TableItem>(\n  rowConfig: RowConfig<T> | RowRenderFn<T> | undefined,\n): rowConfig is RowRenderFn<T> {\n  return typeof rowConfig === 'function';\n}\n\nfunction useDisabledRows<T extends TableItem>({\n  data,\n  rowConfig,\n}: Pick<TableProps<T>, 'data' | 'rowConfig'>): Set<Key> | undefined {\n  return useMemo(() => {\n    if (!data || typeof rowConfig === 'function' || !rowConfig?.getIsDisabled) {\n      return;\n    }\n\n    return data.reduce<Set<Key>>((set, item) => {\n      const isDisabled = rowConfig.getIsDisabled?.(item);\n      if (isDisabled) {\n        set.add(String(item.id));\n      }\n      return set;\n    }, new Set<Key>());\n  }, [data, rowConfig]);\n}\n\nfunction useLiveRegionLabel(\n  pagination: TablePaginationType,\n  isStale: boolean,\n  isLoading: boolean,\n  hasData: boolean,\n): string {\n  if (isLoading) {\n    return 'Loading table data.';\n  }\n\n  if (!hasData || pagination.type === 'none') {\n    return '';\n  }\n\n  const { pageSize, offset, totalCount, getLabel } = pagination;\n\n  if (isStale) {\n    return 'Loading table data.';\n  }\n\n  let liveRegionLabel = 'Table page loaded. ';\n\n  if (getLabel) {\n    liveRegionLabel += getLabel({ pageSize, offset, totalCount });\n  } else if (offset !== undefined) {\n    const fromCount = offset + 1;\n    const toCount = Math.min(offset + pageSize, totalCount ?? 0);\n    liveRegionLabel += `Showing ${fromCount} to ${toCount} of ${totalCount}`;\n  }\n  return liveRegionLabel;\n}\n\n/** @public */\nexport function Table<T extends TableItem>({\n  columnConfig,\n  data,\n  loading = false,\n  isStale = false,\n  error,\n  pagination,\n  sort,\n  rowConfig,\n  selection,\n  emptyState,\n  className,\n  style,\n  virtualized,\n}: TableProps<T>) {\n  const {\n    ownProps: { classes },\n  } = useDefinition(TableWrapperDefinition, { className });\n  const liveRegionId = useId();\n\n  const visibleColumns = useMemo(\n    () => columnConfig.filter(col => !col.isHidden),\n    [columnConfig],\n  );\n  const disabledRows = useDisabledRows({ data, rowConfig });\n\n  const {\n    mode: selectionMode,\n    selected: selectedKeys,\n    behavior: selectionBehavior,\n    onSelectionChange,\n  } = selection || {};\n\n  const isInitialLoading = loading && !data;\n\n  if (error) {\n    return (\n      <div className={classes.root} style={style}>\n        Error: {error.message}\n      </div>\n    );\n  }\n\n  const liveRegionLabel = useLiveRegionLabel(\n    pagination,\n    isStale,\n    isInitialLoading,\n    data !== undefined,\n  );\n\n  const manualColumnSizing = columnConfig.some(\n    col =>\n      col.width != null ||\n      col.minWidth != null ||\n      col.maxWidth != null ||\n      col.defaultWidth != null,\n  );\n\n  const wrapResizable = manualColumnSizing\n    ? (elem: React.ReactNode) => (\n        <ResizableTableContainer className={classes.resizableContainer}>\n          {elem}\n        </ResizableTableContainer>\n      )\n    : (elem: React.ReactNode) => <>{elem}</>;\n\n  const layoutOptions =\n    typeof virtualized === 'object' ? virtualized : undefined;\n\n  const wrapVirtualized = (elem: React.ReactNode) =>\n    virtualized ? (\n      <Virtualizer layout={TableLayout} layoutOptions={layoutOptions}>\n        {elem}\n      </Virtualizer>\n    ) : (\n      elem\n    );\n\n  return (\n    <div className={classes.root} style={style}>\n      <VisuallyHidden aria-live=\"polite\" id={liveRegionId}>\n        {liveRegionLabel}\n      </VisuallyHidden>\n      {wrapResizable(\n        wrapVirtualized(\n          <TableRoot\n            {...(isInitialLoading\n              ? {}\n              : {\n                  selectionMode,\n                  selectionBehavior,\n                  selectedKeys,\n                  onSelectionChange,\n                })}\n            sortDescriptor={sort?.descriptor ?? undefined}\n            onSortChange={sort?.onSortChange}\n            disabledKeys={disabledRows}\n            stale={isStale}\n            loading={isInitialLoading}\n            aria-describedby={liveRegionId}\n          >\n            <TableHeader columns={visibleColumns}>\n              {column =>\n                column.header ? (\n                  column.header()\n                ) : (\n                  <Column\n                    id={column.id}\n                    isRowHeader={column.isRowHeader}\n                    allowsSorting={column.isSortable}\n                    width={column.width}\n                    defaultWidth={column.defaultWidth}\n                    minWidth={column.minWidth}\n                    maxWidth={column.maxWidth}\n                  >\n                    {column.label}\n                  </Column>\n                )\n              }\n            </TableHeader>\n            {isInitialLoading ? (\n              <TableBodySkeleton columns={visibleColumns} />\n            ) : (\n              <TableBody\n                items={data}\n                dependencies={[visibleColumns]}\n                renderEmptyState={\n                  emptyState ? () => <Flex p=\"3\">{emptyState}</Flex> : undefined\n                }\n              >\n                {item => {\n                  const itemIndex = data?.indexOf(item) ?? -1;\n\n                  if (isRowRenderFn(rowConfig)) {\n                    return rowConfig({\n                      item,\n                      index: itemIndex,\n                    });\n                  }\n\n                  return (\n                    <Row\n                      id={String(item.id)}\n                      columns={visibleColumns}\n                      href={rowConfig?.getHref?.(item)}\n                      onAction={\n                        rowConfig?.onClick\n                          ? () => rowConfig?.onClick?.(item)\n                          : undefined\n                      }\n                    >\n                      {column => column.cell(item)}\n                    </Row>\n                  );\n                }}\n              </TableBody>\n            )}\n          </TableRoot>,\n        ),\n      )}\n      {pagination.type === 'page' && (\n        <TablePagination\n          pageSize={pagination.pageSize}\n          pageSizeOptions={pagination.pageSizeOptions}\n          offset={pagination.offset}\n          totalCount={pagination.totalCount}\n          hasNextPage={pagination.hasNextPage}\n          hasPreviousPage={pagination.hasPreviousPage}\n          onNextPage={pagination.onNextPage}\n          onPreviousPage={pagination.onPreviousPage}\n          onPageSizeChange={pagination.onPageSizeChange}\n          showPageSizeOptions={pagination.showPageSizeOptions}\n          getLabel={pagination.getLabel}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { TableBody } from './TableBody.esm.js';
+import { Row } from './Row.esm.js';
+import { Cell } from './Cell.esm.js';
+import { Skeleton } from '../../Skeleton/Skeleton.esm.js';
+import 'clsx';
+import '../../../hooks/useBreakpoint.esm.js';
+import '../../../hooks/useBg.esm.js';
+import '../../../hooks/useDefinition/helpers.esm.js';
+import '../../../analytics/useAnalytics.esm.js';
+import '../../Skeleton/Skeleton.module.css.esm.js';
+
+const SKELETON_ROW_COUNT = 5;
+const SKELETON_WIDTHS = ["75%", "50%", "60%", "45%", "70%"];
+const skeletonItems = Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => ({
+  id: `skeleton-${i}`
+}));
+function TableBodySkeleton({
+  columns
+}) {
+  return /* @__PURE__ */ jsx(TableBody, { items: skeletonItems, dependencies: [columns], children: (item) => {
+    const rowIndex = Number(item.id.split("-")[1]);
+    return /* @__PURE__ */ jsx(Row, { id: item.id, columns, children: (column) => /* @__PURE__ */ jsx(Cell, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        width: SKELETON_WIDTHS[(rowIndex + columns.indexOf(column)) % SKELETON_WIDTHS.length]
+      }
+    ) }, column.id) });
+  } });
+}
+
+export { TableBodySkeleton };
+//# sourceMappingURL=TableBodySkeleton.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableBodySkeleton.esm.js","sources":["../../../../src/components/Table/components/TableBodySkeleton.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 { TableBody } from './TableBody';\nimport { Row } from './Row';\nimport { Cell } from './Cell';\nimport { Skeleton } from '../../Skeleton';\nimport type { ColumnConfig, TableItem } from '../types';\n\nconst SKELETON_ROW_COUNT = 5;\nconst SKELETON_WIDTHS = ['75%', '50%', '60%', '45%', '70%'];\n\nconst skeletonItems = Array.from({ length: SKELETON_ROW_COUNT }, (_, i) => ({\n  id: `skeleton-${i}`,\n}));\n\n/** @internal */\nexport function TableBodySkeleton<T extends TableItem>({\n  columns,\n}: {\n  columns: readonly ColumnConfig<T>[];\n}) {\n  return (\n    <TableBody items={skeletonItems} dependencies={[columns]}>\n      {item => {\n        const rowIndex = Number(item.id.split('-')[1]);\n        return (\n          <Row id={item.id} columns={columns}>\n            {column => (\n              <Cell key={column.id} aria-hidden=\"true\">\n                <Skeleton\n                  width={\n                    SKELETON_WIDTHS[\n                      (rowIndex + columns.indexOf(column)) %\n                        SKELETON_WIDTHS.length\n                    ]\n                  }\n                />\n              </Cell>\n            )}\n          </Row>\n        );\n      }}\n    </TableBody>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAsBA,MAAM,kBAAA,GAAqB,CAAA;AAC3B,MAAM,kBAAkB,CAAC,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,OAAO,KAAK,CAAA;AAE1D,MAAM,aAAA,GAAgB,MAAM,IAAA,CAAK,EAAE,QAAQ,kBAAA,EAAmB,EAAG,CAAC,CAAA,EAAG,CAAA,MAAO;AAAA,EAC1E,EAAA,EAAI,YAAY,CAAC,CAAA;AACnB,CAAA,CAAE,CAAA;AAGK,SAAS,iBAAA,CAAuC;AAAA,EACrD;AACF,CAAA,EAEG;AACD,EAAA,uBACE,GAAA,CAAC,aAAU,KAAA,EAAO,aAAA,EAAe,cAAc,CAAC,OAAO,GACpD,QAAA,EAAA,CAAA,IAAA,KAAQ;AACP,IAAA,MAAM,QAAA,GAAW,OAAO,IAAA,CAAK,EAAA,CAAG,MAAM,GAAG,CAAA,CAAE,CAAC,CAAC,CAAA;AAC7C,IAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAI,IAAA,CAAK,EAAA,EAAI,SACf,QAAA,EAAA,CAAA,MAAA,qBACC,GAAA,CAAC,IAAA,EAAA,EAAqB,aAAA,EAAY,MAAA,EAChC,QAAA,kBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAA,EACE,iBACG,QAAA,GAAW,OAAA,CAAQ,QAAQ,MAAM,CAAA,IAChC,gBAAgB,MACpB;AAAA;AAAA,KAEJ,EAAA,EARS,MAAA,CAAO,EASlB,CAAA,EAEJ,CAAA;AAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTableOptions, TableHeader as TableHeader$1, Collection } from 'react-aria-components';
 import { Checkbox } from '../../Checkbox/Checkbox.esm.js';
 import { useDefinition } from '../../../hooks/useDefinition/useDefinition.esm.js';
@@ -20,7 +20,7 @@ const TableHeader = (props) => {
         minWidth: 40,
         maxWidth: 40,
         className: classes.headSelection,
-        children: /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection", children: /* @__PURE__ */ jsx(Fragment, {}) }) })
+        children: /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", "aria-label": "Row selection", children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection", "aria-label": "Select all" }) })
       }
     ),
     /* @__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  Collection,\n  useTableOptions,\n} from 'react-aria-components';\nimport { Checkbox } from '../../Checkbox';\nimport { Column } from './Column';\nimport { useDefinition } from '../../../hooks/useDefinition';\nimport { TableHeaderDefinition } from '../definition';\nimport type { TableHeaderProps } from '../types';\nimport { Flex } from '../../Flex';\n\n/** @public */\nexport const TableHeader = <T extends object>(props: TableHeaderProps<T>) => {\n  let { selectionBehavior, selectionMode } = useTableOptions();\n\n  const { ownProps, restProps } = useDefinition(TableHeaderDefinition, props);\n  const { classes, columns, children } = ownProps;\n\n  return (\n    <ReactAriaTableHeader className={classes.root} {...restProps}>\n      {selectionBehavior === 'toggle' && selectionMode === 'multiple' && (\n        <Column\n          width={40}\n          minWidth={40}\n          maxWidth={40}\n          className={classes.headSelection}\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":";;;;;;;;;;AA6BO,MAAM,WAAA,GAAc,CAAmB,KAAA,KAA+B;AAC3E,EAAA,IAAI,EAAE,iBAAA,EAAmB,aAAA,EAAc,GAAI,eAAA,EAAgB;AAE3D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,uBAAuB,KAAK,CAAA;AAC1E,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAEvC,EAAA,4BACGA,aAAA,EAAA,EAAqB,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAO,GAAG,SAAA,EAChD,QAAA,EAAA;AAAA,IAAA,iBAAA,KAAsB,QAAA,IAAY,kBAAkB,UAAA,oBACnD,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAA;AAAA,QACP,QAAA,EAAU,EAAA;AAAA,QACV,QAAA,EAAU,EAAA;AAAA,QACV,WAAW,OAAA,CAAQ,aAAA;AAAA,QAEnB,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;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  Collection,\n  useTableOptions,\n} from 'react-aria-components';\nimport { Checkbox } from '../../Checkbox';\nimport { Column } from './Column';\nimport { useDefinition } from '../../../hooks/useDefinition';\nimport { TableHeaderDefinition } from '../definition';\nimport type { TableHeaderProps } from '../types';\nimport { Flex } from '../../Flex';\n\n/** @public */\nexport const TableHeader = <T extends object>(props: TableHeaderProps<T>) => {\n  let { selectionBehavior, selectionMode } = useTableOptions();\n\n  const { ownProps, restProps } = useDefinition(TableHeaderDefinition, props);\n  const { classes, columns, children } = ownProps;\n\n  return (\n    <ReactAriaTableHeader className={classes.root} {...restProps}>\n      {selectionBehavior === 'toggle' && selectionMode === 'multiple' && (\n        <Column\n          width={40}\n          minWidth={40}\n          maxWidth={40}\n          className={classes.headSelection}\n        >\n          <Flex justify=\"center\" align=\"center\" aria-label=\"Row selection\">\n            <Checkbox slot=\"selection\" aria-label=\"Select all\" />\n          </Flex>\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,EAAc,GAAI,eAAA,EAAgB;AAE3D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,uBAAuB,KAAK,CAAA;AAC1E,EAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAEvC,EAAA,4BACGA,aAAA,EAAA,EAAqB,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAO,GAAG,SAAA,EAChD,QAAA,EAAA;AAAA,IAAA,iBAAA,KAAsB,QAAA,IAAY,kBAAkB,UAAA,oBACnD,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,EAAA;AAAA,QACP,QAAA,EAAU,EAAA;AAAA,QACV,QAAA,EAAU,EAAA;AAAA,QACV,WAAW,OAAA,CAAQ,aAAA;AAAA,QAEnB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,QAAA,EAAS,OAAM,QAAA,EAAS,YAAA,EAAW,eAAA,EAC/C,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAA,EAAK,WAAA,EAAY,YAAA,EAAW,cAAa,CAAA,EACrD;AAAA;AAAA,KACF;AAAA,oBAEF,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,OAAA,EAAU,QAAA,EAAS;AAAA,GAAA,EACxC,CAAA;AAEJ;;;;"}

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

@@ -13,7 +13,7 @@ const TableRoot = (props) => {
     {
       className: ownProps.classes.root,
       "aria-label": "Data table",
-      "aria-busy": ownProps.stale,
+      "aria-busy": ownProps.stale || ownProps.loading,
       ...dataAttributes,
       ...restProps
     }

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

@@ -1 +1 @@
-{"version":3,"file":"TableRoot.esm.js","sources":["../../../../src/components/Table/components/TableRoot.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 { useDefinition } from '../../../hooks/useDefinition';\nimport { TableDefinition } from '../definition';\nimport { Table as ReactAriaTable } from 'react-aria-components';\nimport { TableRootProps } from '../types';\n\n/** @public */\nexport const TableRoot = (props: TableRootProps) => {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    TableDefinition,\n    props,\n  );\n\n  return (\n    <ReactAriaTable\n      className={ownProps.classes.root}\n      aria-label=\"Data table\"\n      aria-busy={ownProps.stale}\n      {...dataAttributes}\n      {...restProps}\n    />\n  );\n};\n"],"names":["ReactAriaTable"],"mappings":";;;;;AAsBO,MAAM,SAAA,GAAY,CAAC,KAAA,KAA0B;AAClD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,eAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,SAAS,OAAA,CAAQ,IAAA;AAAA,MAC5B,YAAA,EAAW,YAAA;AAAA,MACX,aAAW,QAAA,CAAS,KAAA;AAAA,MACnB,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"TableRoot.esm.js","sources":["../../../../src/components/Table/components/TableRoot.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 { useDefinition } from '../../../hooks/useDefinition';\nimport { TableDefinition } from '../definition';\nimport { Table as ReactAriaTable } from 'react-aria-components';\nimport { TableRootProps } from '../types';\n\n/** @public */\nexport const TableRoot = (props: TableRootProps) => {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    TableDefinition,\n    props,\n  );\n\n  return (\n    <ReactAriaTable\n      className={ownProps.classes.root}\n      aria-label=\"Data table\"\n      aria-busy={ownProps.stale || ownProps.loading}\n      {...dataAttributes}\n      {...restProps}\n    />\n  );\n};\n"],"names":["ReactAriaTable"],"mappings":";;;;;AAsBO,MAAM,SAAA,GAAY,CAAC,KAAA,KAA0B;AAClD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,eAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,SAAS,OAAA,CAAQ,IAAA;AAAA,MAC5B,YAAA,EAAW,YAAA;AAAA,MACX,WAAA,EAAW,QAAA,CAAS,KAAA,IAAS,QAAA,CAAS,OAAA;AAAA,MACrC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

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

@@ -3,16 +3,28 @@ import 'clsx';
 import '../../hooks/useBreakpoint.esm.js';
 import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
+import '../../analytics/useAnalytics.esm.js';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './Table.module.css.esm.js';
 
+const TableWrapperDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-TableWrapper",
+    resizableContainer: "bui-TableResizableContainer"
+  },
+  propDefs: {
+    className: {}
+  }
+});
 const TableDefinition = defineComponent()({
   styles,
   classNames: {
     root: "bui-Table"
   },
   propDefs: {
-    stale: { dataAttribute: true }
+    stale: { dataAttribute: true },
+    loading: { dataAttribute: true }
   }
 });
 const TableHeaderDefinition = defineComponent()({
@@ -35,6 +47,8 @@ const TableBodyDefinition = defineComponent()({
 });
 const RowDefinition = defineComponent()({
   styles,
+  analytics: true,
+  bg: "consumer",
   classNames: {
     root: "bui-TableRow",
     cell: "bui-TableCell",
@@ -43,7 +57,8 @@ const RowDefinition = defineComponent()({
   propDefs: {
     columns: {},
     children: {},
-    href: {}
+    href: {},
+    noTrack: {}
   }
 });
 const ColumnDefinition = defineComponent()({
@@ -51,6 +66,7 @@ const ColumnDefinition = defineComponent()({
   classNames: {
     root: "bui-TableHead",
     headContent: "bui-TableHeadContent",
+    headLabel: "bui-TableHeadLabel",
     headSortButton: "bui-TableHeadSortButton"
   },
   propDefs: {
@@ -101,5 +117,5 @@ const CellProfileDefinition = defineComponent()({
   }
 });
 
-export { CellDefinition, CellProfileDefinition, CellTextDefinition, ColumnDefinition, RowDefinition, TableBodyDefinition, TableDefinition, TableHeaderDefinition };
+export { CellDefinition, CellProfileDefinition, CellTextDefinition, ColumnDefinition, RowDefinition, TableBodyDefinition, TableDefinition, TableHeaderDefinition, TableWrapperDefinition };
 //# sourceMappingURL=definition.esm.js.map

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 { defineComponent } from '../../hooks/useDefinition';\nimport type {\n  TableRootOwnProps,\n  TableHeaderOwnProps,\n  TableBodyOwnProps,\n  RowOwnProps,\n  ColumnOwnProps,\n  CellOwnProps,\n  CellTextOwnProps,\n  CellProfileOwnProps,\n} from './types';\nimport styles from './Table.module.css';\n\n/**\n * Component definition for Table\n * @public\n */\nexport const TableDefinition = defineComponent<TableRootOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Table',\n  },\n  propDefs: {\n    stale: { dataAttribute: true },\n  },\n});\n\n/**\n * Component definition for TableHeader\n * @internal\n */\nexport const TableHeaderDefinition = defineComponent<TableHeaderOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableHeader',\n    headSelection: 'bui-TableHeadSelection',\n  },\n  propDefs: {\n    columns: {},\n    children: {},\n  },\n});\n\n/**\n * Component definition for TableBody\n * @internal\n */\nexport const TableBodyDefinition = defineComponent<TableBodyOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableBody',\n  },\n  propDefs: {},\n});\n\n/**\n * Component definition for Row\n * @internal\n */\nexport const RowDefinition = defineComponent<RowOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableRow',\n    cell: 'bui-TableCell',\n    cellSelection: 'bui-TableCellSelection',\n  },\n  propDefs: {\n    columns: {},\n    children: {},\n    href: {},\n  },\n});\n\n/**\n * Component definition for Column\n * @internal\n */\nexport const ColumnDefinition = defineComponent<ColumnOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableHead',\n    headContent: 'bui-TableHeadContent',\n    headSortButton: 'bui-TableHeadSortButton',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for Cell\n * @internal\n */\nexport const CellDefinition = defineComponent<CellOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableCell',\n  },\n  propDefs: {\n    className: {},\n  },\n});\n\n/**\n * Component definition for CellText\n * @internal\n */\nexport const CellTextDefinition = defineComponent<CellTextOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableCell',\n    cellContentWrapper: 'bui-TableCellContentWrapper',\n    cellContent: 'bui-TableCellContent',\n    cellIcon: 'bui-TableCellIcon',\n  },\n  propDefs: {\n    title: {},\n    description: {},\n    color: { default: 'primary' },\n    leadingIcon: {},\n    href: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for CellProfile\n * @internal\n */\nexport const CellProfileDefinition = defineComponent<CellProfileOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableCell',\n    cellContentWrapper: 'bui-TableCellContentWrapper',\n    cellContent: 'bui-TableCellContent',\n  },\n  propDefs: {\n    src: {},\n    name: {},\n    href: {},\n    description: {},\n    color: { default: 'primary' },\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAiCO,MAAM,eAAA,GAAkB,iBAAmC,CAAE;AAAA,EAClE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAA,EAAO,EAAE,aAAA,EAAe,IAAA;AAAK;AAEjC,CAAC;AAMM,MAAM,qBAAA,GAAwB,iBAAqC,CAAE;AAAA,EAC1E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,iBAAA;AAAA,IACN,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,QAAA,EAAU;AAAA,IACR,SAAS,EAAC;AAAA,IACV,UAAU;AAAC;AAEf,CAAC;AAMM,MAAM,mBAAA,GAAsB,iBAAmC,CAAE;AAAA,EACtE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,UAAU;AACZ,CAAC;AAMM,MAAM,aAAA,GAAgB,iBAA6B,CAAE;AAAA,EAC1D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,cAAA;AAAA,IACN,IAAA,EAAM,eAAA;AAAA,IACN,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,QAAA,EAAU;AAAA,IACR,SAAS,EAAC;AAAA,IACV,UAAU,EAAC;AAAA,IACX,MAAM;AAAC;AAEX,CAAC;AAMM,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAAA;AAAA,IACN,WAAA,EAAa,sBAAA;AAAA,IACb,cAAA,EAAgB;AAAA,GAClB;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,cAAA,GAAiB,iBAA8B,CAAE;AAAA,EAC5D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,kBAAA,GAAqB,iBAAkC,CAAE;AAAA,EACpE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAAA;AAAA,IACN,kBAAA,EAAoB,6BAAA;AAAA,IACpB,WAAA,EAAa,sBAAA;AAAA,IACb,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAO,EAAC;AAAA,IACR,aAAa,EAAC;AAAA,IACd,KAAA,EAAO,EAAE,OAAA,EAAS,SAAA,EAAU;AAAA,IAC5B,aAAa,EAAC;AAAA,IACd,MAAM,EAAC;AAAA,IACP,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,qBAAA,GAAwB,iBAAqC,CAAE;AAAA,EAC1E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAAA;AAAA,IACN,kBAAA,EAAoB,6BAAA;AAAA,IACpB,WAAA,EAAa;AAAA,GACf;AAAA,EACA,QAAA,EAAU;AAAA,IACR,KAAK,EAAC;AAAA,IACN,MAAM,EAAC;AAAA,IACP,MAAM,EAAC;AAAA,IACP,aAAa,EAAC;AAAA,IACd,KAAA,EAAO,EAAE,OAAA,EAAS,SAAA,EAAU;AAAA,IAC5B,WAAW;AAAC;AAEhB,CAAC;;;;"}
+{"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 { defineComponent } from '../../hooks/useDefinition';\nimport type {\n  TableRootOwnProps,\n  TableHeaderOwnProps,\n  TableBodyOwnProps,\n  RowOwnProps,\n  ColumnOwnProps,\n  CellOwnProps,\n  CellTextOwnProps,\n  CellProfileOwnProps,\n} from './types';\nimport styles from './Table.module.css';\n\n/** @internal */\nexport const TableWrapperDefinition = defineComponent<{\n  className?: string;\n}>()({\n  styles,\n  classNames: {\n    root: 'bui-TableWrapper',\n    resizableContainer: 'bui-TableResizableContainer',\n  },\n  propDefs: {\n    className: {},\n  },\n});\n\n/**\n * Component definition for Table\n * @public\n */\nexport const TableDefinition = defineComponent<TableRootOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Table',\n  },\n  propDefs: {\n    stale: { dataAttribute: true },\n    loading: { dataAttribute: true },\n  },\n});\n\n/**\n * Component definition for TableHeader\n * @internal\n */\nexport const TableHeaderDefinition = defineComponent<TableHeaderOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableHeader',\n    headSelection: 'bui-TableHeadSelection',\n  },\n  propDefs: {\n    columns: {},\n    children: {},\n  },\n});\n\n/**\n * Component definition for TableBody\n * @internal\n */\nexport const TableBodyDefinition = defineComponent<TableBodyOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableBody',\n  },\n  propDefs: {},\n});\n\n/**\n * Component definition for Row\n * @internal\n */\nexport const RowDefinition = defineComponent<RowOwnProps>()({\n  styles,\n  analytics: true,\n  bg: 'consumer',\n  classNames: {\n    root: 'bui-TableRow',\n    cell: 'bui-TableCell',\n    cellSelection: 'bui-TableCellSelection',\n  },\n  propDefs: {\n    columns: {},\n    children: {},\n    href: {},\n    noTrack: {},\n  },\n});\n\n/**\n * Component definition for Column\n * @internal\n */\nexport const ColumnDefinition = defineComponent<ColumnOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableHead',\n    headContent: 'bui-TableHeadContent',\n    headLabel: 'bui-TableHeadLabel',\n    headSortButton: 'bui-TableHeadSortButton',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for Cell\n * @internal\n */\nexport const CellDefinition = defineComponent<CellOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableCell',\n  },\n  propDefs: {\n    className: {},\n  },\n});\n\n/**\n * Component definition for CellText\n * @internal\n */\nexport const CellTextDefinition = defineComponent<CellTextOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableCell',\n    cellContentWrapper: 'bui-TableCellContentWrapper',\n    cellContent: 'bui-TableCellContent',\n    cellIcon: 'bui-TableCellIcon',\n  },\n  propDefs: {\n    title: {},\n    description: {},\n    color: { default: 'primary' },\n    leadingIcon: {},\n    href: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for CellProfile\n * @internal\n */\nexport const CellProfileDefinition = defineComponent<CellProfileOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-TableCell',\n    cellContentWrapper: 'bui-TableCellContentWrapper',\n    cellContent: 'bui-TableCellContent',\n  },\n  propDefs: {\n    src: {},\n    name: {},\n    href: {},\n    description: {},\n    color: { default: 'primary' },\n    className: {},\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/components/Table/hooks/useCompletePagination.esm.js

@@ -11,11 +11,12 @@ function useCompletePagination(options, query) {
     filterFn,
     searchFn
   } = options;
+  const hasGetData = "getData" in options;
   const { initialOffset = 0 } = paginationOptions;
   const defaultPageSize = getEffectivePageSize(paginationOptions);
   const getData = useStableCallback(getDataProp);
   const { sort, filter, search } = query;
-  const [items, setItems] = useState([]);
+  const [items, setItems] = useState(void 0);
   const [isLoading, setIsLoading] = useState(!data);
   const [error, setError] = useState(void 0);
   const [loadCount, setLoadCount] = useState(0);
@@ -23,6 +24,10 @@ function useCompletePagination(options, query) {
   const [pageSize, setPageSize] = useState(defaultPageSize);
   useEffect(() => {
     if (data) {
+      setIsLoading(false);
+      return;
+    }
+    if (!hasGetData) {
       return;
     }
     let cancelled = false;
@@ -31,9 +36,9 @@ function useCompletePagination(options, query) {
     (async () => {
       try {
         const result = getData();
-        const data2 = result instanceof Promise ? await result : result;
+        const resolvedData = result instanceof Promise ? await result : result;
         if (!cancelled) {
-          setItems(data2);
+          setItems(resolvedData);
           setIsLoading(false);
         }
       } catch (err) {
@@ -46,7 +51,7 @@ function useCompletePagination(options, query) {
     return () => {
       cancelled = true;
     };
-  }, [data, getData, loadCount]);
+  }, [data, getData, hasGetData, loadCount]);
   const prevQueryRef = useRef(query);
   useEffect(() => {
     if (prevQueryRef.current !== query) {
@@ -56,6 +61,9 @@ function useCompletePagination(options, query) {
   }, [query]);
   const resolvedItems = useMemo(() => data ?? items, [data, items]);
   const processedData = useMemo(() => {
+    if (!resolvedItems) {
+      return void 0;
+    }
     let result = [...resolvedItems];
     if (filter !== void 0 && filterFn) {
       result = filterFn(result, filter);
@@ -68,9 +76,9 @@ function useCompletePagination(options, query) {
     }
     return result;
   }, [resolvedItems, sort, filter, search, filterFn, searchFn, sortFn]);
-  const totalCount = processedData.length;
+  const totalCount = processedData?.length ?? 0;
   const paginatedData = useMemo(
-    () => processedData.slice(offset, offset + pageSize),
+    () => processedData?.slice(offset, offset + pageSize),
     [processedData, offset, pageSize]
   );
   const hasNextPage = offset + pageSize < totalCount;