@backstage/ui 0.12.0-next.1 → 0.12.0

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_bui-Table__6940366133 {\n    width: 100%;\n    caption-side: bottom;\n    border-collapse: collapse;\n    table-layout: fixed;\n    transition: opacity 0.2s ease-in-out;\n\n    &[data-stale='true'] {\n      opacity: 0.6;\n    }\n  }\n\n  .Table_bui-TableHeader__6940366133 {\n    border-bottom: 1px solid var(--bui-border);\n    transition: color 0.2s ease-in-out;\n  }\n\n  .Table_bui-TableHead__6940366133 {\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\n  .Table_bui-TableHeadSelection__6940366133 {\n    width: 40px;\n  }\n\n  .Table_bui-TableHeadContent__6940366133 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-1);\n  }\n\n  .Table_bui-TableHeadSortButton__6940366133 {\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    .Table_bui-TableHead__6940366133:hover &,\n    [data-sort-direction='ascending'] &,\n    [data-sort-direction='descending'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      transition: transform 0.1s ease-in-out;\n    }\n    [data-sort-direction='descending'] & svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  .Table_bui-TableBody__6940366133 {\n    color: var(--bui-fg-primary);\n  }\n\n  .Table_bui-TableRow__6940366133 {\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_bui-TableCell__6940366133 {\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_bui-TableCellSelection__6940366133 {\n    width: 40px;\n  }\n\n  .Table_bui-TableCellContentWrapper__6940366133 {\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_bui-TableCellIcon__6940366133,\n  .Table_bui-TableCellIcon__6940366133 svg {\n    display: inline-flex;\n    align-items: center;\n    color: var(--bui-fg-primary);\n  }\n\n  .Table_bui-TableCellContent__6940366133 {\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_bui-TableCellContent__6940366133 > * {\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .Table_bui-TableCellProfile__6940366133 {\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_bui-Table__6940366133","bui-TableHeader":"Table_bui-TableHeader__6940366133","bui-TableHead":"Table_bui-TableHead__6940366133","bui-TableHeadSelection":"Table_bui-TableHeadSelection__6940366133","bui-TableHeadContent":"Table_bui-TableHeadContent__6940366133","bui-TableHeadSortButton":"Table_bui-TableHeadSortButton__6940366133","bui-TableBody":"Table_bui-TableBody__6940366133","bui-TableRow":"Table_bui-TableRow__6940366133","bui-TableCell":"Table_bui-TableCell__6940366133","bui-TableCellSelection":"Table_bui-TableCellSelection__6940366133","bui-TableCellContentWrapper":"Table_bui-TableCellContentWrapper__6940366133","bui-TableCellIcon":"Table_bui-TableCellIcon__6940366133","bui-TableCellContent":"Table_bui-TableCellContent__6940366133","bui-TableCellProfile":"Table_bui-TableCellProfile__6940366133"};
+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_bui-Table__7b93b44f2c {\n    width: 100%;\n    caption-side: bottom;\n    border-collapse: collapse;\n    table-layout: fixed;\n    transition: opacity 0.2s ease-in-out;\n\n    &[data-stale='true'] {\n      opacity: 0.6;\n    }\n  }\n\n  .Table_bui-TableHeader__7b93b44f2c {\n    border-bottom: 1px solid var(--bui-border-2);\n    transition: color 0.2s ease-in-out;\n  }\n\n  .Table_bui-TableHead__7b93b44f2c {\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\n  .Table_bui-TableHeadSelection__7b93b44f2c {\n    width: 40px;\n  }\n\n  .Table_bui-TableHeadContent__7b93b44f2c {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-1);\n  }\n\n  .Table_bui-TableHeadSortButton__7b93b44f2c {\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    .Table_bui-TableHead__7b93b44f2c:hover &,\n    [data-sort-direction='ascending'] &,\n    [data-sort-direction='descending'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      transition: transform 0.1s ease-in-out;\n    }\n    [data-sort-direction='descending'] & svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  .Table_bui-TableBody__7b93b44f2c {\n    color: var(--bui-fg-primary);\n  }\n\n  .Table_bui-TableRow__7b93b44f2c {\n    border-bottom: 1px solid var(--bui-border-2);\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_bui-TableCell__7b93b44f2c {\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_bui-TableCellSelection__7b93b44f2c {\n    width: 40px;\n  }\n\n  .Table_bui-TableCellContentWrapper__7b93b44f2c {\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_bui-TableCellIcon__7b93b44f2c,\n  .Table_bui-TableCellIcon__7b93b44f2c svg {\n    display: inline-flex;\n    align-items: center;\n    color: var(--bui-fg-primary);\n  }\n\n  .Table_bui-TableCellContent__7b93b44f2c {\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_bui-TableCellContent__7b93b44f2c > * {\n    min-width: 0;\n    max-width: 100%;\n  }\n\n  .Table_bui-TableCellProfile__7b93b44f2c {\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_bui-Table__7b93b44f2c","bui-TableHeader":"Table_bui-TableHeader__7b93b44f2c","bui-TableHead":"Table_bui-TableHead__7b93b44f2c","bui-TableHeadSelection":"Table_bui-TableHeadSelection__7b93b44f2c","bui-TableHeadContent":"Table_bui-TableHeadContent__7b93b44f2c","bui-TableHeadSortButton":"Table_bui-TableHeadSortButton__7b93b44f2c","bui-TableBody":"Table_bui-TableBody__7b93b44f2c","bui-TableRow":"Table_bui-TableRow__7b93b44f2c","bui-TableCell":"Table_bui-TableCell__7b93b44f2c","bui-TableCellSelection":"Table_bui-TableCellSelection__7b93b44f2c","bui-TableCellContentWrapper":"Table_bui-TableCellContentWrapper__7b93b44f2c","bui-TableCellIcon":"Table_bui-TableCellIcon__7b93b44f2c","bui-TableCellContent":"Table_bui-TableCellContent__7b93b44f2c","bui-TableCellProfile":"Table_bui-TableCellProfile__7b93b44f2c"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useId } from 'react-aria';
 import { ResizableTableContainer } from 'react-aria-components';
 import { TableRoot } from './TableRoot.esm.js';
@@ -89,63 +89,70 @@ function Table({
     isStale,
     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: [
     /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", id: liveRegionId, children: liveRegionLabel }),
-    /* @__PURE__ */ jsx(ResizableTableContainer, { children: /* @__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,
-              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)
+    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)
+                    }
+                  );
+                }
               }
-            }
-          )
-        ]
-      }
-    ) }),
+            )
+          ]
+        }
+      )
+    ),
     pagination.type === "page" && /* @__PURE__ */ jsx(
       TablePagination,
       {

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  return (\n    <div className={className} style={style}>\n      <VisuallyHidden aria-live=\"polite\" id={liveRegionId}>\n        {liveRegionLabel}\n      </VisuallyHidden>\n\n      <ResizableTableContainer>\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            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      </ResizableTableContainer>\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 { 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":";;;;;;;;;;;;;AAmCA,SAAS,cACP,SAAA,EAC6B;AAC7B,EAAA,OAAO,OAAO,SAAA,KAAc,UAAA;AAC9B;AAEA,SAAS,eAAA,CAAqC;AAAA,EAC5C,IAAA;AAAA,EACA;AACF,CAAA,EAAoE;AAClE,EAAA,OAAO,QAAQ,MAAM;AACnB,IAAA,IAAI,CAAC,IAAA,IAAQ,OAAO,cAAc,UAAA,IAAc,CAAC,WAAW,aAAA,EAAe;AACzE,MAAA;AAAA,IACF;AAEA,IAAA,OAAO,IAAA,CAAK,MAAA,CAAiB,CAAC,GAAA,EAAK,IAAA,KAAS;AAC1C,MAAA,MAAM,UAAA,GAAa,SAAA,CAAU,aAAA,GAAgB,IAAI,CAAA;AACjD,MAAA,IAAI,UAAA,EAAY;AACd,QAAA,GAAA,CAAI,GAAA,CAAI,MAAA,CAAO,IAAA,CAAK,EAAE,CAAC,CAAA;AAAA,MACzB;AACA,MAAA,OAAO,GAAA;AAAA,IACT,CAAA,kBAAG,IAAI,GAAA,EAAU,CAAA;AAAA,EACnB,CAAA,EAAG,CAAC,IAAA,EAAM,SAAS,CAAC,CAAA;AACtB;AAEA,SAAS,kBAAA,CACP,UAAA,EACA,OAAA,EACA,OAAA,EACQ;AACR,EAAA,IAAI,CAAC,OAAA,IAAW,UAAA,CAAW,IAAA,KAAS,MAAA,EAAQ;AAC1C,IAAA,OAAO,EAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,UAAA,EAAY,UAAS,GAAI,UAAA;AAEnD,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAO,qBAAA;AAAA,EACT;AAEA,EAAA,IAAI,eAAA,GAAkB,qBAAA;AAEtB,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,eAAA,IAAmB,QAAA,CAAS,EAAE,QAAA,EAAU,MAAA,EAAQ,YAAY,CAAA;AAAA,EAC9D,CAAA,MAAA,IAAW,WAAW,MAAA,EAAW;AAC/B,IAAA,MAAM,YAAY,MAAA,GAAS,CAAA;AAC3B,IAAA,MAAM,UAAU,IAAA,CAAK,GAAA,CAAI,MAAA,GAAS,QAAA,EAAU,cAAc,CAAC,CAAA;AAC3D,IAAA,eAAA,IAAmB,CAAA,QAAA,EAAW,SAAS,CAAA,IAAA,EAAO,OAAO,OAAO,UAAU,CAAA,CAAA;AAAA,EACxE;AACA,EAAA,OAAO,eAAA;AACT;AAGO,SAAS,KAAA,CAA2B;AAAA,EACzC,YAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,OAAA,GAAU,KAAA;AAAA,EACV,KAAA;AAAA,EACA,UAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAkB;AAChB,EAAA,MAAM,eAAe,KAAA,EAAM;AAE3B,EAAA,MAAM,cAAA,GAAiB,OAAA;AAAA,IACrB,MAAM,YAAA,CAAa,MAAA,CAAO,CAAA,GAAA,KAAO,CAAC,IAAI,QAAQ,CAAA;AAAA,IAC9C,CAAC,YAAY;AAAA,GACf;AACA,EAAA,MAAM,YAAA,GAAe,eAAA,CAAgB,EAAE,IAAA,EAAM,WAAW,CAAA;AAExD,EAAA,MAAM;AAAA,IACJ,IAAA,EAAM,aAAA;AAAA,IACN,QAAA,EAAU,YAAA;AAAA,IACV,QAAA,EAAU,iBAAA;AAAA,IACV;AAAA,GACF,GAAI,aAAa,EAAC;AAElB,EAAA,IAAI,OAAA,IAAW,CAAC,IAAA,EAAM;AACpB,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAsB,KAAA,EAAc,QAAA,EAAA,YAAA,EAEzC,CAAA;AAAA,EAEJ;AAEA,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAsB,KAAA,EAAc,QAAA,EAAA;AAAA,MAAA,SAAA;AAAA,MAC/B,KAAA,CAAM;AAAA,KAAA,EAChB,CAAA;AAAA,EAEJ;AAEA,EAAA,MAAM,eAAA,GAAkB,kBAAA;AAAA,IACtB,UAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA,KAAS;AAAA,GACX;AAEA,EAAA,MAAM,qBAAqB,YAAA,CAAa,IAAA;AAAA,IACtC,CAAA,GAAA,KACE,GAAA,CAAI,KAAA,IAAS,IAAA,IACb,GAAA,CAAI,QAAA,IAAY,IAAA,IAChB,GAAA,CAAI,QAAA,IAAY,IAAA,IAChB,GAAA,CAAI,YAAA,IAAgB;AAAA,GACxB;AAEA,EAAA,MAAM,aAAA,GAAgB,kBAAA,GAClB,CAAC,IAAA,qBACC,GAAA,CAAC,uBAAA,EAAA,EAAyB,QAAA,EAAA,IAAA,EAAK,CAAA,GAEjC,CAAC,IAAA,qBAA0B,GAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,IAAA,EAAK,CAAA;AAEvC,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAsB,KAAA,EACzB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,WAAA,EAAU,QAAA,EAAS,EAAA,EAAI,cACpC,QAAA,EAAA,eAAA,EACH,CAAA;AAAA,IACC,aAAA;AAAA,sBACC,IAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,aAAA;AAAA,UACA,iBAAA;AAAA,UACA,YAAA;AAAA,UACA,iBAAA;AAAA,UACA,cAAA,EAAgB,MAAM,UAAA,IAAc,MAAA;AAAA,UACpC,cAAc,IAAA,EAAM,YAAA;AAAA,UACpB,YAAA,EAAc,YAAA;AAAA,UACd,KAAA,EAAO,OAAA;AAAA,UACP,kBAAA,EAAkB,YAAA;AAAA,UAElB,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,WAAA,EAAA,EAAY,SAAS,cAAA,EACnB,QAAA,EAAA,CAAA,MAAA,KACC,OAAO,MAAA,GACL,MAAA,CAAO,QAAO,mBAEd,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,IAAI,MAAA,CAAO,EAAA;AAAA,gBACX,aAAa,MAAA,CAAO,WAAA;AAAA,gBACpB,eAAe,MAAA,CAAO,UAAA;AAAA,gBACtB,OAAO,MAAA,CAAO,KAAA;AAAA,gBACd,cAAc,MAAA,CAAO,YAAA;AAAA,gBACrB,UAAU,MAAA,CAAO,QAAA;AAAA,gBACjB,UAAU,MAAA,CAAO,QAAA;AAAA,gBAEhB,QAAA,EAAA,MAAA,CAAO;AAAA;AAAA,aACV,EAGN,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,KAAA,EAAO,IAAA;AAAA,gBACP,YAAA,EAAc,CAAC,cAAc,CAAA;AAAA,gBAC7B,gBAAA,EACE,aAAa,sBAAM,GAAA,CAAC,QAAK,CAAA,EAAE,GAAA,EAAK,sBAAW,CAAA,GAAU,MAAA;AAAA,gBAGtD,QAAA,EAAA,CAAA,IAAA,KAAQ;AACP,kBAAA,MAAM,SAAA,GAAY,IAAA,EAAM,OAAA,CAAQ,IAAI,CAAA,IAAK,EAAA;AAEzC,kBAAA,IAAI,aAAA,CAAc,SAAS,CAAA,EAAG;AAC5B,oBAAA,OAAO,SAAA,CAAU;AAAA,sBACf,IAAA;AAAA,sBACA,KAAA,EAAO;AAAA,qBACR,CAAA;AAAA,kBACH;AAEA,kBAAA,uBACE,GAAA;AAAA,oBAAC,GAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAI,MAAA,CAAO,IAAA,CAAK,EAAE,CAAA;AAAA,sBAClB,OAAA,EAAS,cAAA;AAAA,sBACT,IAAA,EAAM,SAAA,EAAW,OAAA,GAAU,IAAI,CAAA;AAAA,sBAC/B,UACE,SAAA,EAAW,OAAA,GACP,MAAM,SAAA,EAAW,OAAA,GAAU,IAAI,CAAA,GAC/B,MAAA;AAAA,sBAGL,QAAA,EAAA,CAAA,MAAA,KAAU,MAAA,CAAO,IAAA,CAAK,IAAI;AAAA;AAAA,mBAC7B;AAAA,gBAEJ;AAAA;AAAA;AACF;AAAA;AAAA;AACF,KACF;AAAA,IACC,UAAA,CAAW,SAAS,MAAA,oBACnB,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,UAAU,UAAA,CAAW,QAAA;AAAA,QACrB,iBAAiB,UAAA,CAAW,eAAA;AAAA,QAC5B,QAAQ,UAAA,CAAW,MAAA;AAAA,QACnB,YAAY,UAAA,CAAW,UAAA;AAAA,QACvB,aAAa,UAAA,CAAW,WAAA;AAAA,QACxB,iBAAiB,UAAA,CAAW,eAAA;AAAA,QAC5B,YAAY,UAAA,CAAW,UAAA;AAAA,QACvB,gBAAgB,UAAA,CAAW,cAAA;AAAA,QAC3B,kBAAkB,UAAA,CAAW,gBAAA;AAAA,QAC7B,qBAAqB,UAAA,CAAW,mBAAA;AAAA,QAChC,UAAU,UAAA,CAAW;AAAA;AAAA;AACvB,GAAA,EAEJ,CAAA;AAEJ;;;;"}

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

@@ -4,7 +4,8 @@ import { getEffectivePageSize } from './getEffectivePageSize.esm.js';
 
 function useCompletePagination(options, query) {
   const {
-    getData: getDataProp,
+    data,
+    getData: getDataProp = () => [],
     paginationOptions = {},
     sortFn,
     filterFn,
@@ -15,21 +16,24 @@ function useCompletePagination(options, query) {
   const getData = useStableCallback(getDataProp);
   const { sort, filter, search } = query;
   const [items, setItems] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(!data);
   const [error, setError] = useState(void 0);
   const [loadCount, setLoadCount] = useState(0);
   const [offset, setOffset] = useState(initialOffset);
   const [pageSize, setPageSize] = useState(defaultPageSize);
   useEffect(() => {
+    if (data) {
+      return;
+    }
     let cancelled = false;
     setIsLoading(true);
     setError(void 0);
     (async () => {
       try {
         const result = getData();
-        const data = result instanceof Promise ? await result : result;
+        const data2 = result instanceof Promise ? await result : result;
         if (!cancelled) {
-          setItems(data);
+          setItems(data2);
           setIsLoading(false);
         }
       } catch (err) {
@@ -42,7 +46,7 @@ function useCompletePagination(options, query) {
     return () => {
       cancelled = true;
     };
-  }, [getData, loadCount]);
+  }, [data, getData, loadCount]);
   const prevQueryRef = useRef(query);
   useEffect(() => {
     if (prevQueryRef.current !== query) {
@@ -50,8 +54,9 @@ function useCompletePagination(options, query) {
       setOffset(0);
     }
   }, [query]);
+  const resolvedItems = useMemo(() => data ?? items, [data, items]);
   const processedData = useMemo(() => {
-    let result = [...items];
+    let result = [...resolvedItems];
     if (filter !== void 0 && filterFn) {
       result = filterFn(result, filter);
     }
@@ -62,7 +67,7 @@ function useCompletePagination(options, query) {
       result = sortFn(result, sort);
     }
     return result;
-  }, [items, sort, filter, search, filterFn, searchFn, sortFn]);
+  }, [resolvedItems, sort, filter, search, filterFn, searchFn, sortFn]);
   const totalCount = processedData.length;
   const paginatedData = useMemo(
     () => processedData.slice(offset, offset + pageSize),

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

@@ -1 +1 @@
-{"version":3,"file":"useCompletePagination.esm.js","sources":["../../../../src/components/Table/hooks/useCompletePagination.ts"],"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 { useState, useCallback, useMemo, useEffect, useRef } from 'react';\nimport type { TableItem } from '../types';\nimport type {\n  PaginationResult,\n  QueryState,\n  UseTableCompleteOptions,\n} from './types';\nimport { useStableCallback } from './useStableCallback';\nimport { getEffectivePageSize } from './getEffectivePageSize';\n\n/** @internal */\nexport function useCompletePagination<T extends TableItem, TFilter>(\n  options: UseTableCompleteOptions<T, TFilter>,\n  query: QueryState<TFilter>,\n): PaginationResult<T> & { reload: () => void } {\n  const {\n    getData: getDataProp,\n    paginationOptions = {},\n    sortFn,\n    filterFn,\n    searchFn,\n  } = options;\n  const { initialOffset = 0 } = paginationOptions;\n  const defaultPageSize = getEffectivePageSize(paginationOptions);\n\n  const getData = useStableCallback(getDataProp);\n  const { sort, filter, search } = query;\n\n  const [items, setItems] = useState<T[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | undefined>(undefined);\n  const [loadCount, setLoadCount] = useState(0);\n\n  const [offset, setOffset] = useState(initialOffset);\n  const [pageSize, setPageSize] = useState(defaultPageSize);\n\n  // Load data on mount and when loadCount changes (reload trigger)\n  useEffect(() => {\n    let cancelled = false;\n    setIsLoading(true);\n    setError(undefined);\n\n    (async () => {\n      try {\n        const result = getData();\n        const data = result instanceof Promise ? await result : result;\n        if (!cancelled) {\n          setItems(data);\n          setIsLoading(false);\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(err instanceof Error ? err : new Error(String(err)));\n          setIsLoading(false);\n        }\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [getData, loadCount]);\n\n  // Reset offset when query changes (query object is memoized)\n  const prevQueryRef = useRef(query);\n  useEffect(() => {\n    if (prevQueryRef.current !== query) {\n      prevQueryRef.current = query;\n      setOffset(0);\n    }\n  }, [query]);\n\n  // Process data client-side (filter, search, sort)\n  const processedData = useMemo(() => {\n    let result = [...items];\n    if (filter !== undefined && filterFn) {\n      result = filterFn(result, filter);\n    }\n    if (search && searchFn) {\n      result = searchFn(result, search);\n    }\n    if (sort && sortFn) {\n      result = sortFn(result, sort);\n    }\n    return result;\n  }, [items, sort, filter, search, filterFn, searchFn, sortFn]);\n\n  const totalCount = processedData.length;\n\n  // Paginate the processed data\n  const paginatedData = useMemo(\n    () => processedData.slice(offset, offset + pageSize),\n    [processedData, offset, pageSize],\n  );\n\n  const hasNextPage = offset + pageSize < totalCount;\n  const hasPreviousPage = offset > 0;\n\n  const onNextPage = useCallback(() => {\n    if (offset + pageSize < totalCount) {\n      setOffset(offset + pageSize);\n    }\n  }, [offset, pageSize, totalCount]);\n\n  const onPreviousPage = useCallback(() => {\n    if (offset > 0) {\n      setOffset(Math.max(0, offset - pageSize));\n    }\n  }, [offset, pageSize]);\n\n  const onPageSizeChange = useCallback((newSize: number) => {\n    setPageSize(newSize);\n    setOffset(0);\n  }, []);\n\n  const reload = useCallback(() => {\n    setOffset(0);\n    setLoadCount(c => c + 1);\n  }, []);\n\n  return {\n    data: paginatedData,\n    loading: isLoading,\n    error,\n    totalCount,\n    offset,\n    pageSize,\n    hasNextPage,\n    hasPreviousPage,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    reload,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCompletePagination.esm.js","sources":["../../../../src/components/Table/hooks/useCompletePagination.ts"],"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 { useState, useCallback, useMemo, useEffect, useRef } from 'react';\nimport type { TableItem } from '../types';\nimport type {\n  PaginationResult,\n  QueryState,\n  UseTableCompleteOptions,\n} from './types';\nimport { useStableCallback } from './useStableCallback';\nimport { getEffectivePageSize } from './getEffectivePageSize';\n\n/** @internal */\nexport function useCompletePagination<T extends TableItem, TFilter>(\n  options: UseTableCompleteOptions<T, TFilter>,\n  query: QueryState<TFilter>,\n): PaginationResult<T> & { reload: () => void } {\n  const {\n    data,\n    getData: getDataProp = () => [],\n    paginationOptions = {},\n    sortFn,\n    filterFn,\n    searchFn,\n  } = options;\n  const { initialOffset = 0 } = paginationOptions;\n  const defaultPageSize = getEffectivePageSize(paginationOptions);\n\n  const getData = useStableCallback(getDataProp);\n  const { sort, filter, search } = query;\n\n  const [items, setItems] = useState<T[]>([]);\n  const [isLoading, setIsLoading] = useState(!data);\n  const [error, setError] = useState<Error | undefined>(undefined);\n  const [loadCount, setLoadCount] = useState(0);\n\n  const [offset, setOffset] = useState(initialOffset);\n  const [pageSize, setPageSize] = useState(defaultPageSize);\n\n  // Load data on mount and when loadCount changes (reload trigger)\n  useEffect(() => {\n    if (data) {\n      return;\n    }\n\n    let cancelled = false;\n    setIsLoading(true);\n    setError(undefined);\n\n    (async () => {\n      try {\n        const result = getData();\n        const data = result instanceof Promise ? await result : result;\n        if (!cancelled) {\n          setItems(data);\n          setIsLoading(false);\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(err instanceof Error ? err : new Error(String(err)));\n          setIsLoading(false);\n        }\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [data, getData, loadCount]);\n\n  // Reset offset when query changes (query object is memoized)\n  const prevQueryRef = useRef(query);\n  useEffect(() => {\n    if (prevQueryRef.current !== query) {\n      prevQueryRef.current = query;\n      setOffset(0);\n    }\n  }, [query]);\n\n  const resolvedItems = useMemo(() => data ?? items, [data, items]);\n\n  // Process data client-side (filter, search, sort)\n  const processedData = useMemo(() => {\n    let result = [...resolvedItems];\n    if (filter !== undefined && filterFn) {\n      result = filterFn(result, filter);\n    }\n    if (search && searchFn) {\n      result = searchFn(result, search);\n    }\n    if (sort && sortFn) {\n      result = sortFn(result, sort);\n    }\n    return result;\n  }, [resolvedItems, sort, filter, search, filterFn, searchFn, sortFn]);\n\n  const totalCount = processedData.length;\n\n  // Paginate the processed data\n  const paginatedData = useMemo(\n    () => processedData.slice(offset, offset + pageSize),\n    [processedData, offset, pageSize],\n  );\n\n  const hasNextPage = offset + pageSize < totalCount;\n  const hasPreviousPage = offset > 0;\n\n  const onNextPage = useCallback(() => {\n    if (offset + pageSize < totalCount) {\n      setOffset(offset + pageSize);\n    }\n  }, [offset, pageSize, totalCount]);\n\n  const onPreviousPage = useCallback(() => {\n    if (offset > 0) {\n      setOffset(Math.max(0, offset - pageSize));\n    }\n  }, [offset, pageSize]);\n\n  const onPageSizeChange = useCallback((newSize: number) => {\n    setPageSize(newSize);\n    setOffset(0);\n  }, []);\n\n  const reload = useCallback(() => {\n    setOffset(0);\n    setLoadCount(c => c + 1);\n  }, []);\n\n  return {\n    data: paginatedData,\n    loading: isLoading,\n    error,\n    totalCount,\n    offset,\n    pageSize,\n    hasNextPage,\n    hasPreviousPage,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    reload,\n  };\n}\n"],"names":["data"],"mappings":"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"}

package/dist/components/TablePagination/TablePagination.esm.js

@@ -4,7 +4,7 @@ import { useId } from 'react-aria';
 import { Text } from '../Text/Text.esm.js';
 import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
 import { useMemo } from 'react';
-import '../../hooks/useSurface.esm.js';
+import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import '../ButtonIcon/ButtonIcon.module.css.esm.js';
 import { Select } from '../Select/Select.esm.js';

package/dist/components/Tabs/Tabs.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  .Tabs_bui-Tabs__6200292476 {\n    /* Initialize CSS variables */\n    --active-tab-left: 0px;\n    --active-tab-right: 0px;\n    --active-tab-top: 0px;\n    --active-tab-bottom: 0px;\n    --active-tab-width: 0px;\n    --active-tab-height: 0px;\n    --active-transition-duration: 0s;\n\n    --hovered-tab-left: 0px;\n    --hovered-tab-right: 0px;\n    --hovered-tab-top: 0px;\n    --hovered-tab-bottom: 0px;\n    --hovered-tab-width: 0px;\n    --hovered-tab-height: 0px;\n    --hovered-tab-opacity: 0;\n    --hovered-transition-duration: 0s;\n  }\n\n  .Tabs_bui-TabList__6200292476 {\n    display: flex;\n    flex-direction: row;\n  }\n\n  .Tabs_bui-TabListWrapper__6200292476 {\n    position: relative;\n  }\n\n  .Tabs_bui-Tab__6200292476 {\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-secondary);\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    position: relative;\n    z-index: 2;\n    padding-inline: var(--bui-space-2);\n\n    &[data-selected='true'] {\n      color: var(--bui-fg-primary);\n    }\n  }\n\n  .Tabs_bui-TabActive__6200292476 {\n    content: '';\n    position: absolute;\n    left: calc(var(--active-tab-left) + var(--bui-space-2));\n    bottom: -1px;\n    width: calc(var(--active-tab-width) - var(--bui-space-4));\n    height: 1px;\n    background-color: var(--bui-fg-primary);\n    border-radius: 4px;\n    transition: left var(--active-transition-duration) ease-out,\n      opacity 0.15s ease-out, width var(--active-transition-duration) ease-out;\n    opacity: 1;\n  }\n\n  .Tabs_bui-TabHovered__6200292476 {\n    content: '';\n    position: absolute;\n    left: var(--hovered-tab-left);\n    top: calc(var(--hovered-tab-top) + 4px);\n    width: var(--hovered-tab-width);\n    height: calc(var(--hovered-tab-height) - 8px);\n    background-color: var(--bui-gray-2);\n    border-radius: 4px;\n    opacity: var(--hovered-tab-opacity);\n    transition: left var(--hovered-transition-duration) ease-out,\n      top var(--hovered-transition-duration) ease-out,\n      width var(--hovered-transition-duration) ease-out,\n      height var(--hovered-transition-duration) ease-out, opacity 0.15s ease-out;\n  }\n\n  .Tabs_bui-TabPanel__6200292476 {\n    padding-inline: var(--bui-space-2);\n    padding-top: var(--bui-space-4);\n  }\n}\n";
-var styles = {"bui-Tabs":"Tabs_bui-Tabs__6200292476","bui-TabList":"Tabs_bui-TabList__6200292476","bui-TabListWrapper":"Tabs_bui-TabListWrapper__6200292476","bui-Tab":"Tabs_bui-Tab__6200292476","bui-TabActive":"Tabs_bui-TabActive__6200292476","bui-TabHovered":"Tabs_bui-TabHovered__6200292476","bui-TabPanel":"Tabs_bui-TabPanel__6200292476"};
+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  .Tabs_bui-Tabs__b8746a49c6 {\n    /* Initialize CSS variables */\n    --active-tab-left: 0px;\n    --active-tab-right: 0px;\n    --active-tab-top: 0px;\n    --active-tab-bottom: 0px;\n    --active-tab-width: 0px;\n    --active-tab-height: 0px;\n    --active-transition-duration: 0s;\n\n    --hovered-tab-left: 0px;\n    --hovered-tab-right: 0px;\n    --hovered-tab-top: 0px;\n    --hovered-tab-bottom: 0px;\n    --hovered-tab-width: 0px;\n    --hovered-tab-height: 0px;\n    --hovered-tab-opacity: 0;\n    --hovered-transition-duration: 0s;\n  }\n\n  .Tabs_bui-TabList__b8746a49c6 {\n    display: flex;\n    flex-direction: row;\n  }\n\n  .Tabs_bui-TabListWrapper__b8746a49c6 {\n    position: relative;\n  }\n\n  .Tabs_bui-Tab__b8746a49c6 {\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-secondary);\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    position: relative;\n    z-index: 2;\n    padding-inline: var(--bui-space-2);\n\n    &[data-selected='true'] {\n      color: var(--bui-fg-primary);\n    }\n  }\n\n  .Tabs_bui-TabActive__b8746a49c6 {\n    content: '';\n    position: absolute;\n    left: calc(var(--active-tab-left) + var(--bui-space-2));\n    bottom: -1px;\n    width: calc(var(--active-tab-width) - var(--bui-space-4));\n    height: 1px;\n    background-color: var(--bui-fg-primary);\n    border-radius: 4px;\n    transition: left var(--active-transition-duration) ease-out,\n      opacity 0.15s ease-out, width var(--active-transition-duration) ease-out;\n    opacity: 1;\n  }\n\n  .Tabs_bui-TabHovered__b8746a49c6 {\n    content: '';\n    position: absolute;\n    left: var(--hovered-tab-left);\n    top: calc(var(--hovered-tab-top) + 4px);\n    width: var(--hovered-tab-width);\n    height: calc(var(--hovered-tab-height) - 8px);\n    background-color: var(--bui-bg-neutral-2);\n    border-radius: 4px;\n    opacity: var(--hovered-tab-opacity);\n    transition: left var(--hovered-transition-duration) ease-out,\n      top var(--hovered-transition-duration) ease-out,\n      width var(--hovered-transition-duration) ease-out,\n      height var(--hovered-transition-duration) ease-out, opacity 0.15s ease-out;\n  }\n\n  .Tabs_bui-TabPanel__b8746a49c6 {\n    padding-inline: var(--bui-space-2);\n    padding-top: var(--bui-space-4);\n  }\n}\n";
+var styles = {"bui-Tabs":"Tabs_bui-Tabs__b8746a49c6","bui-TabList":"Tabs_bui-TabList__b8746a49c6","bui-TabListWrapper":"Tabs_bui-TabListWrapper__b8746a49c6","bui-Tab":"Tabs_bui-Tab__b8746a49c6","bui-TabActive":"Tabs_bui-TabActive__b8746a49c6","bui-TabHovered":"Tabs_bui-TabHovered__b8746a49c6","bui-TabPanel":"Tabs_bui-TabPanel__b8746a49c6"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/TagGroup/TagGroup.esm.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { TagGroup as TagGroup$1, TagList, Tag as Tag$1, Button } from 'react-aria-components';
+import { Tag as Tag$1, Button, TagGroup as TagGroup$1, TagList } from 'react-aria-components';
+import { forwardRef } from 'react';
 import { RiCloseCircleLine } from '@remixicon/react';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
@@ -28,46 +29,49 @@ const TagGroup = (props) => {
     }
   ) });
 };
-const Tag = (props) => {
-  const { classNames, cleanedProps } = useStyles(TagGroupDefinition, {
-    size: "small",
-    ...props
-  });
-  const { children, className, icon, size, href, ...rest } = cleanedProps;
-  const textValue = typeof children === "string" ? children : void 0;
-  useRoutingRegistrationEffect(href);
-  return /* @__PURE__ */ jsx(
-    Tag$1,
-    {
-      textValue,
-      className: clsx(classNames.tag, styles[classNames.tag], className),
-      "data-size": size,
-      href,
-      ...rest,
-      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(classNames.tagIcon, styles[classNames.tagIcon]),
-            children: icon
-          }
-        ),
-        children,
-        allowsRemoving && /* @__PURE__ */ jsx(
-          Button,
-          {
-            className: clsx(
-              classNames.tagRemoveButton,
-              styles[classNames.tagRemoveButton]
-            ),
-            slot: "remove",
-            children: /* @__PURE__ */ jsx(RiCloseCircleLine, { size: 16 })
-          }
-        )
-      ] })
-    }
-  );
-};
+const Tag = forwardRef(
+  (props, ref) => {
+    const { classNames, cleanedProps } = useStyles(TagGroupDefinition, {
+      size: "small",
+      ...props
+    });
+    const { children, className, icon, size, href, ...rest } = cleanedProps;
+    const textValue = typeof children === "string" ? children : void 0;
+    useRoutingRegistrationEffect(href);
+    return /* @__PURE__ */ jsx(
+      Tag$1,
+      {
+        ref,
+        textValue,
+        className: clsx(classNames.tag, styles[classNames.tag], className),
+        "data-size": size,
+        href,
+        ...rest,
+        children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(classNames.tagIcon, styles[classNames.tagIcon]),
+              children: icon
+            }
+          ),
+          children,
+          allowsRemoving && /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: clsx(
+                classNames.tagRemoveButton,
+                styles[classNames.tagRemoveButton]
+              ),
+              slot: "remove",
+              children: /* @__PURE__ */ jsx(RiCloseCircleLine, { size: 16 })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
 
 export { Tag, TagGroup };
 //# sourceMappingURL=TagGroup.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.esm.js","sources":["../../../src/components/TagGroup/TagGroup.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 type { TagProps, TagGroupProps } from './types';\nimport {\n  TagGroup as ReactAriaTagGroup,\n  TagList as ReactAriaTagList,\n  Tag as ReactAriaTag,\n  Button as ReactAriaButton,\n} from 'react-aria-components';\nimport type { ReactNode } from 'react';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { TagGroupDefinition } from './definition';\nimport { createRoutingRegistration } from '../InternalLinkProvider';\nimport styles from './TagGroup.module.css';\n\nconst { RoutingProvider, useRoutingRegistrationEffect } =\n  createRoutingRegistration();\n\n/**\n * A component that renders a list of tags.\n *\n * @public\n */\nexport const TagGroup = <T extends object>(props: TagGroupProps<T>) => {\n  const { classNames, cleanedProps } = useStyles(TagGroupDefinition, props);\n  const { items, children, renderEmptyState, ...rest } = cleanedProps;\n\n  return (\n    <RoutingProvider>\n      <ReactAriaTagGroup\n        className={clsx(classNames.group, styles[classNames.group])}\n        {...rest}\n      >\n        <ReactAriaTagList\n          className={clsx(classNames.list, styles[classNames.list])}\n          items={items}\n          renderEmptyState={renderEmptyState}\n        >\n          {children}\n        </ReactAriaTagList>\n      </ReactAriaTagGroup>\n    </RoutingProvider>\n  );\n};\n\n/**\n * A component that renders a tag.\n *\n * @public\n */\nexport const Tag = (props: TagProps) => {\n  const { classNames, cleanedProps } = useStyles(TagGroupDefinition, {\n    size: 'small',\n    ...props,\n  });\n  const { children, className, icon, size, href, ...rest } = cleanedProps;\n  const textValue = typeof children === 'string' ? children : undefined;\n\n  useRoutingRegistrationEffect(href);\n\n  return (\n    <ReactAriaTag\n      textValue={textValue}\n      className={clsx(classNames.tag, styles[classNames.tag], className)}\n      data-size={size}\n      href={href}\n      {...rest}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {icon && (\n            <span\n              className={clsx(classNames.tagIcon, styles[classNames.tagIcon])}\n            >\n              {icon}\n            </span>\n          )}\n          {children as ReactNode}\n          {allowsRemoving && (\n            <ReactAriaButton\n              className={clsx(\n                classNames.tagRemoveButton,\n                styles[classNames.tagRemoveButton],\n              )}\n              slot=\"remove\"\n            >\n              <RiCloseCircleLine size={16} />\n            </ReactAriaButton>\n          )}\n        </>\n      )}\n    </ReactAriaTag>\n  );\n};\n"],"names":["ReactAriaTagGroup","ReactAriaTagList","ReactAriaTag","ReactAriaButton"],"mappings":";;;;;;;;;AA+BA,MAAM,EAAE,eAAA,EAAiB,4BAAA,EAA6B,GACpD,yBAAA,EAA0B;AAOrB,MAAM,QAAA,GAAW,CAAmB,KAAA,KAA4B;AACrE,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,oBAAoB,KAAK,CAAA;AACxE,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,gBAAA,EAAkB,GAAG,MAAK,GAAI,YAAA;AAEvD,EAAA,2BACG,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAACA,UAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,MACzD,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAACC,OAAA;AAAA,QAAA;AAAA,UACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,UACxD,KAAA;AAAA,UACA,gBAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF,EACF,CAAA;AAEJ;AAOO,MAAM,GAAA,GAAM,CAAC,KAAA,KAAoB;AACtC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,kBAAA,EAAoB;AAAA,IACjE,IAAA,EAAM,OAAA;AAAA,IACN,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,IAAA,EAAM,MAAM,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AAC3D,EAAA,MAAM,SAAA,GAAY,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAE5D,EAAA,4BAAA,CAA6B,IAAI,CAAA;AAEjC,EAAA,uBACE,GAAA;AAAA,IAACC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,GAAA,EAAK,OAAO,UAAA,CAAW,GAAG,GAAG,SAAS,CAAA;AAAA,MACjE,WAAA,EAAW,IAAA;AAAA,MACX,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,CAAC,EAAE,cAAA,EAAe,qBACjB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,IAAA,oBACC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,YAE7D,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAED,QAAA;AAAA,QACA,cAAA,oBACC,GAAA;AAAA,UAACC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,eAAA;AAAA,cACX,MAAA,CAAO,WAAW,eAAe;AAAA,aACnC;AAAA,YACA,IAAA,EAAK,QAAA;AAAA,YAEL,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AAC/B,OAAA,EAEJ;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"TagGroup.esm.js","sources":["../../../src/components/TagGroup/TagGroup.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 type { TagProps, TagGroupProps } from './types';\nimport {\n  TagGroup as ReactAriaTagGroup,\n  TagList as ReactAriaTagList,\n  Tag as ReactAriaTag,\n  Button as ReactAriaButton,\n} from 'react-aria-components';\nimport { forwardRef, type PropsWithRef, type ReactNode, type Ref } from 'react';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { TagGroupDefinition } from './definition';\nimport { createRoutingRegistration } from '../InternalLinkProvider';\nimport styles from './TagGroup.module.css';\n\nconst { RoutingProvider, useRoutingRegistrationEffect } =\n  createRoutingRegistration();\n\n/**\n * A component that renders a list of tags.\n *\n * @public\n */\nexport const TagGroup = <T extends object>(props: TagGroupProps<T>) => {\n  const { classNames, cleanedProps } = useStyles(TagGroupDefinition, props);\n  const { items, children, renderEmptyState, ...rest } = cleanedProps;\n\n  return (\n    <RoutingProvider>\n      <ReactAriaTagGroup\n        className={clsx(classNames.group, styles[classNames.group])}\n        {...rest}\n      >\n        <ReactAriaTagList\n          className={clsx(classNames.list, styles[classNames.list])}\n          items={items}\n          renderEmptyState={renderEmptyState}\n        >\n          {children}\n        </ReactAriaTagList>\n      </ReactAriaTagGroup>\n    </RoutingProvider>\n  );\n};\n\n/**\n * A component that renders a tag.\n *\n * @public\n */\nexport const Tag = forwardRef(\n  (props: PropsWithRef<TagProps>, ref: Ref<HTMLDivElement>) => {\n    const { classNames, cleanedProps } = useStyles(TagGroupDefinition, {\n      size: 'small',\n      ...props,\n    });\n    const { children, className, icon, size, href, ...rest } = cleanedProps;\n    const textValue = typeof children === 'string' ? children : undefined;\n\n    useRoutingRegistrationEffect(href);\n\n    return (\n      <ReactAriaTag\n        ref={ref}\n        textValue={textValue}\n        className={clsx(classNames.tag, styles[classNames.tag], className)}\n        data-size={size}\n        href={href}\n        {...rest}\n      >\n        {({ allowsRemoving }) => (\n          <>\n            {icon && (\n              <span\n                className={clsx(classNames.tagIcon, styles[classNames.tagIcon])}\n              >\n                {icon}\n              </span>\n            )}\n            {children as ReactNode}\n            {allowsRemoving && (\n              <ReactAriaButton\n                className={clsx(\n                  classNames.tagRemoveButton,\n                  styles[classNames.tagRemoveButton],\n                )}\n                slot=\"remove\"\n              >\n                <RiCloseCircleLine size={16} />\n              </ReactAriaButton>\n            )}\n          </>\n        )}\n      </ReactAriaTag>\n    );\n  },\n);\n"],"names":["ReactAriaTagGroup","ReactAriaTagList","ReactAriaTag","ReactAriaButton"],"mappings":";;;;;;;;;;AA+BA,MAAM,EAAE,eAAA,EAAiB,4BAAA,EAA6B,GACpD,yBAAA,EAA0B;AAOrB,MAAM,QAAA,GAAW,CAAmB,KAAA,KAA4B;AACrE,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,oBAAoB,KAAK,CAAA;AACxE,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,gBAAA,EAAkB,GAAG,MAAK,GAAI,YAAA;AAEvD,EAAA,2BACG,eAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,IAACA,UAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,MACzD,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAACC,OAAA;AAAA,QAAA;AAAA,UACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,UACxD,KAAA;AAAA,UACA,gBAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF,EACF,CAAA;AAEJ;AAOO,MAAM,GAAA,GAAM,UAAA;AAAA,EACjB,CAAC,OAA+B,GAAA,KAA6B;AAC3D,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,kBAAA,EAAoB;AAAA,MACjE,IAAA,EAAM,OAAA;AAAA,MACN,GAAG;AAAA,KACJ,CAAA;AACD,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,IAAA,EAAM,MAAM,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AAC3D,IAAA,MAAM,SAAA,GAAY,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAE5D,IAAA,4BAAA,CAA6B,IAAI,CAAA;AAEjC,IAAA,uBACE,GAAA;AAAA,MAACC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA,EAAW,KAAK,UAAA,CAAW,GAAA,EAAK,OAAO,UAAA,CAAW,GAAG,GAAG,SAAS,CAAA;AAAA,QACjE,WAAA,EAAW,IAAA;AAAA,QACX,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,cAAA,EAAe,qBACjB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,IAAA,oBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAE7D,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAED,QAAA;AAAA,UACA,cAAA,oBACC,GAAA;AAAA,YAACC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,eAAA;AAAA,gBACX,MAAA,CAAO,WAAW,eAAe;AAAA,eACnC;AAAA,cACA,IAAA,EAAK,QAAA;AAAA,cAEL,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AAC/B,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}

package/dist/components/TagGroup/TagGroup.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  .TagGroup_bui-TagList__d4eb8d9a34 {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--bui-space-2);\n  }\n\n  .TagGroup_bui-Tag__d4eb8d9a34 {\n    color: var(--bui-fg-primary);\n    background-color: var(--bui-gray-2);\n    border-radius: var(--bui-radius-2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: var(--bui-font-weight-regular);\n    gap: var(--bui-space-1);\n    transition-property: background-color, box-shadow, color;\n    transition-duration: 0.2s;\n    transition-timing-function: ease-in-out;\n    box-sizing: border-box;\n  }\n\n  .TagGroup_bui-Tag__d4eb8d9a34[data-size='small'] {\n    height: 26px;\n    padding: 0 var(--bui-space-2);\n    font-size: var(--bui-font-size-1);\n  }\n\n  .TagGroup_bui-Tag__d4eb8d9a34[data-size='medium'] {\n    height: 32px;\n    padding: 0 var(--bui-space-2);\n    font-size: var(--bui-font-size-2);\n  }\n\n  .TagGroup_bui-Tag__d4eb8d9a34[data-hovered] {\n    background-color: var(--bui-gray-3);\n    cursor: pointer;\n  }\n\n  .TagGroup_bui-Tag__d4eb8d9a34[data-focus-visible] {\n    outline: 2px solid var(--bui-ring);\n    outline-offset: 1px;\n  }\n\n  .TagGroup_bui-Tag__d4eb8d9a34[data-selected] {\n    box-shadow: inset 0 0 0 1px var(--bui-gray-8);\n  }\n\n  .TagGroup_bui-Tag__d4eb8d9a34[data-disabled] {\n    color: var(--bui-fg-disabled);\n    cursor: not-allowed;\n  }\n\n  .TagGroup_bui-TagRemoveButton__d4eb8d9a34 {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    color: var(--bui-fg-primary);\n    padding: 0;\n    margin: 0;\n    width: 1rem;\n    height: 1rem;\n  }\n\n  .TagGroup_bui-TagIcon__d4eb8d9a34 {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: color 0.2s ease-in-out;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
-var styles = {"bui-TagList":"TagGroup_bui-TagList__d4eb8d9a34","bui-Tag":"TagGroup_bui-Tag__d4eb8d9a34","bui-TagRemoveButton":"TagGroup_bui-TagRemoveButton__d4eb8d9a34","bui-TagIcon":"TagGroup_bui-TagIcon__d4eb8d9a34"};
+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  .TagGroup_bui-TagList__c75b387844 {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--bui-space-2);\n  }\n\n  .TagGroup_bui-Tag__c75b387844 {\n    color: var(--bui-fg-primary);\n    background-color: var(--bui-bg-neutral-2);\n    border-radius: var(--bui-radius-2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: var(--bui-font-weight-regular);\n    gap: var(--bui-space-1);\n    transition-property: background-color, box-shadow, color;\n    transition-duration: 0.2s;\n    transition-timing-function: ease-in-out;\n    box-sizing: border-box;\n  }\n\n  .TagGroup_bui-Tag__c75b387844[data-size='small'] {\n    height: 26px;\n    padding: 0 var(--bui-space-2);\n    font-size: var(--bui-font-size-1);\n  }\n\n  .TagGroup_bui-Tag__c75b387844[data-size='medium'] {\n    height: 32px;\n    padding: 0 var(--bui-space-2);\n    font-size: var(--bui-font-size-2);\n  }\n\n  .TagGroup_bui-Tag__c75b387844[data-hovered] {\n    background-color: var(--bui-bg-neutral-3);\n    cursor: pointer;\n  }\n\n  .TagGroup_bui-Tag__c75b387844[data-focus-visible] {\n    outline: 2px solid var(--bui-ring);\n    outline-offset: 1px;\n  }\n\n  .TagGroup_bui-Tag__c75b387844[data-selected] {\n    box-shadow: inset 0 0 0 1px var(--bui-fg-secondary);\n  }\n\n  .TagGroup_bui-Tag__c75b387844[data-disabled] {\n    color: var(--bui-fg-disabled);\n    cursor: not-allowed;\n  }\n\n  .TagGroup_bui-TagRemoveButton__c75b387844 {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    color: var(--bui-fg-primary);\n    padding: 0;\n    margin: 0;\n    width: 1rem;\n    height: 1rem;\n  }\n\n  .TagGroup_bui-TagIcon__c75b387844 {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: color 0.2s ease-in-out;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
+var styles = {"bui-TagList":"TagGroup_bui-TagList__c75b387844","bui-Tag":"TagGroup_bui-Tag__c75b387844","bui-TagRemoveButton":"TagGroup_bui-TagRemoveButton__c75b387844","bui-TagIcon":"TagGroup_bui-TagIcon__c75b387844"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/TextField/TextField.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  .TextField_bui-TextField__ff62eb028a {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  .TextField_bui-InputWrapper__ff62eb028a {\n    position: relative;\n\n    &[data-size='small'] .TextField_bui-Input__ff62eb028a {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] .TextField_bui-Input__ff62eb028a {\n      height: 2.5rem;\n    }\n\n    &[data-size='small'] .TextField_bui-Input__ff62eb028a[data-icon] {\n      padding-left: var(--bui-space-8);\n    }\n\n    &[data-size='medium'] .TextField_bui-Input__ff62eb028a[data-icon] {\n      padding-left: var(--bui-space-9);\n    }\n  }\n\n  .TextField_bui-InputIcon__ff62eb028a {\n    position: absolute;\n    left: var(--bui-space-3);\n    top: 50%;\n    transform: translateY(-50%);\n    margin-right: var(--bui-space-1);\n    color: var(--bui-fg-primary);\n    flex-shrink: 0;\n    pointer-events: none;\n    /* To animate the icon when the input is collapsed */\n    transition: left 0.2s ease-in-out;\n\n    &[data-size='small'],\n    &[data-size='small'] svg {\n      width: 1rem;\n      height: 1rem;\n    }\n\n    &[data-size='medium'],\n    &[data-size='medium'] svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .TextField_bui-Input__ff62eb028a {\n    display: flex;\n    align-items: center;\n    padding: 0 var(--bui-space-3);\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n    width: 100%;\n    height: 100%;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-focused] {\n      outline-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &[data-hovered] {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-focused] {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n      border: 1px solid var(--bui-border-disabled);\n    }\n  }\n}\n";
-var styles = {"bui-TextField":"TextField_bui-TextField__ff62eb028a","bui-InputWrapper":"TextField_bui-InputWrapper__ff62eb028a","bui-Input":"TextField_bui-Input__ff62eb028a","bui-InputIcon":"TextField_bui-InputIcon__ff62eb028a"};
+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  .TextField_bui-TextField__69bcafe176 {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  .TextField_bui-InputWrapper__69bcafe176 {\n    position: relative;\n\n    &[data-size='small'] .TextField_bui-Input__69bcafe176 {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] .TextField_bui-Input__69bcafe176 {\n      height: 2.5rem;\n    }\n\n    &[data-size='small'] .TextField_bui-Input__69bcafe176[data-icon] {\n      padding-left: var(--bui-space-8);\n    }\n\n    &[data-size='medium'] .TextField_bui-Input__69bcafe176[data-icon] {\n      padding-left: var(--bui-space-9);\n    }\n  }\n\n  .TextField_bui-InputIcon__69bcafe176 {\n    position: absolute;\n    left: var(--bui-space-3);\n    top: 50%;\n    transform: translateY(-50%);\n    margin-right: var(--bui-space-1);\n    color: var(--bui-fg-primary);\n    flex-shrink: 0;\n    pointer-events: none;\n    /* To animate the icon when the input is collapsed */\n    transition: left 0.2s ease-in-out;\n\n    &[data-size='small'],\n    &[data-size='small'] svg {\n      width: 1rem;\n      height: 1rem;\n    }\n\n    &[data-size='medium'],\n    &[data-size='medium'] svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .TextField_bui-Input__69bcafe176 {\n    display: flex;\n    align-items: center;\n    padding: 0 var(--bui-space-3);\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border-2);\n    background-color: var(--bui-bg-neutral-1);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n    width: 100%;\n    height: 100%;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n}\n";
+var styles = {"bui-TextField":"TextField_bui-TextField__69bcafe176","bui-InputWrapper":"TextField_bui-InputWrapper__69bcafe176","bui-Input":"TextField_bui-Input__69bcafe176","bui-InputIcon":"TextField_bui-InputIcon__69bcafe176"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/ToggleButton/ToggleButton.esm.js

@@ -5,7 +5,6 @@ import { ToggleButton as ToggleButton$1 } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { ToggleButtonDefinition } from './definition.esm.js';
 import styles from './ToggleButton.module.css.esm.js';
-import { useSurface } from '../../hooks/useSurface.esm.js';
 
 const ToggleButton = forwardRef(
   (props, ref) => {
@@ -16,15 +15,13 @@ const ToggleButton = forwardRef(
         ...props
       }
     );
-    const { children, className, iconStart, iconEnd, onSurface, ...rest } = cleanedProps;
-    const { surface } = useSurface({ onSurface });
+    const { children, className, iconStart, iconEnd, ...rest } = cleanedProps;
     return /* @__PURE__ */ jsx(
       ToggleButton$1,
       {
         className: clsx(classNames.root, styles[classNames.root], className),
         ref,
         ...dataAttributes,
-        ...typeof surface === "string" ? { "data-on-surface": surface } : {},
         ...rest,
         children: (renderProps) => {
           const renderedChildren = typeof children === "function" ? children(renderProps) : children;

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.esm.js","sources":["../../../src/components/ToggleButton/ToggleButton.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { ToggleButton as AriaToggleButton } from 'react-aria-components';\nimport type { ToggleButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ToggleButtonDefinition } from './definition';\nimport styles from './ToggleButton.module.css';\nimport { useSurface } from '../../hooks/useSurface';\n\n/** @public */\nexport const ToggleButton = forwardRef(\n  (props: ToggleButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const { classNames, dataAttributes, cleanedProps } = useStyles(\n      ToggleButtonDefinition,\n      {\n        size: 'small',\n        ...props,\n      },\n    );\n\n    const { children, className, iconStart, iconEnd, onSurface, ...rest } =\n      cleanedProps;\n\n    const { surface } = useSurface({ onSurface });\n\n    return (\n      <AriaToggleButton\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        ref={ref}\n        {...dataAttributes}\n        {...(typeof surface === 'string' ? { 'data-on-surface': surface } : {})}\n        {...rest}\n      >\n        {renderProps => {\n          // If children is a function, call it with render props; otherwise use children as-is\n          const renderedChildren =\n            typeof children === 'function' ? children(renderProps) : children;\n\n          return (\n            <span\n              className={clsx(classNames.content, styles[classNames.content])}\n              data-slot=\"content\"\n            >\n              {iconStart}\n              {renderedChildren}\n              {iconEnd}\n            </span>\n          );\n        }}\n      </AriaToggleButton>\n    );\n  },\n);\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["AriaToggleButton"],"mappings":";;;;;;;;;AA0BO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAA,KAAgC;AACzD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,sBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,SAAA,EAAW,GAAG,MAAK,GAClE,YAAA;AAEF,IAAA,MAAM,EAAE,OAAA,EAAQ,GAAI,UAAA,CAAW,EAAE,WAAW,CAAA;AAE5C,IAAA,uBACE,GAAA;AAAA,MAACA,cAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAI,OAAO,OAAA,KAAY,QAAA,GAAW,EAAE,iBAAA,EAAmB,OAAA,KAAY,EAAC;AAAA,QACpE,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAA,WAAA,KAAe;AAEd,UAAA,MAAM,mBACJ,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,WAAW,CAAA,GAAI,QAAA;AAE3D,UAAA,uBACE,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAC9D,WAAA,EAAU,SAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA,SAAA;AAAA,gBACA,gBAAA;AAAA,gBACA;AAAA;AAAA;AAAA,WACH;AAAA,QAEJ;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}
+{"version":3,"file":"ToggleButton.esm.js","sources":["../../../src/components/ToggleButton/ToggleButton.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { ToggleButton as AriaToggleButton } from 'react-aria-components';\nimport type { ToggleButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ToggleButtonDefinition } from './definition';\nimport styles from './ToggleButton.module.css';\n\n/** @public */\nexport const ToggleButton = forwardRef(\n  (props: ToggleButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const { classNames, dataAttributes, cleanedProps } = useStyles(\n      ToggleButtonDefinition,\n      {\n        size: 'small',\n        ...props,\n      },\n    );\n\n    const { children, className, iconStart, iconEnd, ...rest } = cleanedProps;\n\n    return (\n      <AriaToggleButton\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {renderProps => {\n          // If children is a function, call it with render props; otherwise use children as-is\n          const renderedChildren =\n            typeof children === 'function' ? children(renderProps) : children;\n\n          return (\n            <span\n              className={clsx(classNames.content, styles[classNames.content])}\n              data-slot=\"content\"\n            >\n              {iconStart}\n              {renderedChildren}\n              {iconEnd}\n            </span>\n          );\n        }}\n      </AriaToggleButton>\n    );\n  },\n);\n\nToggleButton.displayName = 'ToggleButton';\n"],"names":["AriaToggleButton"],"mappings":";;;;;;;;AAyBO,MAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CAAC,OAA0B,GAAA,KAAgC;AACzD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,sBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,WAAW,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAE7D,IAAA,uBACE,GAAA;AAAA,MAACA,cAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAA,WAAA,KAAe;AAEd,UAAA,MAAM,mBACJ,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,WAAW,CAAA,GAAI,QAAA;AAE3D,UAAA,uBACE,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAC9D,WAAA,EAAU,SAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA,SAAA;AAAA,gBACA,gBAAA;AAAA,gBACA;AAAA;AAAA;AAAA,WACH;AAAA,QAEJ;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}