npm - @backstage/ui - Versions diffs - 0.15.1-next.0 → 0.16.0 - Mend

@backstage/ui 0.15.1-next.0 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

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

@@ -110,68 +110,71 @@ function Table({
   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;
+  const wrapScrollContainer = (elem) => /* @__PURE__ */ jsx("div", { className: classes.scrollContainer, children: elem });
   return /* @__PURE__ */ jsxs("div", { className: classes.root, style, children: [
     /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", id: liveRegionId, children: liveRegionLabel }),
     wrapResizable(
-      wrapVirtualized(
-        /* @__PURE__ */ jsxs(
-          TableRoot,
-          {
-            ...isInitialLoading ? {} : {
-              selectionMode,
-              selectionBehavior,
-              selectedKeys,
-              onSelectionChange
-            },
-            sortDescriptor: sort?.descriptor ?? void 0,
-            onSortChange: sort?.onSortChange,
-            disabledKeys: disabledRows,
-            stale: isStale,
-            isPending: 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)
+      wrapScrollContainer(
+        wrapVirtualized(
+          /* @__PURE__ */ jsxs(
+            TableRoot,
+            {
+              ...isInitialLoading ? {} : {
+                selectionMode,
+                selectionBehavior,
+                selectedKeys,
+                onSelectionChange
+              },
+              sortDescriptor: sort?.descriptor ?? void 0,
+              onSortChange: sort?.onSortChange,
+              disabledKeys: disabledRows,
+              stale: isStale,
+              isPending: 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)
+                        }
+                      );
+                    }
                   }
-                }
-              )
-            ]
-          }
+                )
+              ]
+            }
+          )
         )
       )
     ),

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

	@@ -1 +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 {\n type Key,\n ResizableTableContainer,\n Virtualizer,\n} from 'react-aria-components';\nimport { TableLayout } from 'react-stately';\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/\n A full-featured data table with built-in pagination, sorting, row selection, loading and error states, and optional virtualization.\n * Pair with `useTable` to manage data fetching and state, or pass `data`, `columnConfig`, and `pagination` directly for manual control.\n \n @public\n */\nexport function Table<T extends TableItem>({\n columnConfig,\n data,\n isPending = false,\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 pending = isPending \|\| loading;\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 = pending && !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 isPending={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 showPaginationLabel={pagination.showPaginationLabel}\n />\n )}\n </div>\n );\n}\n"],"names":[],"mappings":"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"}
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 {\n type Key,\n ResizableTableContainer,\n Virtualizer,\n} from 'react-aria-components';\nimport { TableLayout } from 'react-stately';\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/\n A full-featured data table with built-in pagination, sorting, row selection, loading and error states, and optional virtualization.\n * Pair with `useTable` to manage data fetching and state, or pass `data`, `columnConfig`, and `pagination` directly for manual control.\n \n @public\n */\nexport function Table<T extends TableItem>({\n columnConfig,\n data,\n isPending = false,\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 pending = isPending \|\| loading;\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 = pending && !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 const wrapScrollContainer = (elem: React.ReactNode) => (\n <div className={classes.scrollContainer}>{elem}</div>\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 wrapScrollContainer(\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 isPending={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\n ? () => <Flex p=\"3\">{emptyState}</Flex>\n : 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 )}\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 showPaginationLabel={pagination.showPaginationLabel}\n />\n )}\n </div>\n );\n}\n"],"names":[],"mappings":"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"}

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

@@ -12,7 +12,8 @@ const TableWrapperDefinition = defineComponent()({
   styles,
   classNames: {
     root: "bui-TableWrapper",
-    resizableContainer: "bui-TableResizableContainer"
+    resizableContainer: "bui-TableResizableContainer",
+    scrollContainer: "bui-TableScrollContainer"
   },
   propDefs: {
     className: {}

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

	@@ -1 +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/* @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 isPending: { 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":";;;;;;;;;;AA8BO,MAAM,sBAAA,GAAyB,iBAEnC,CAAE;AAAA,EACH,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,kBAAA,EAAoB;AAAA,~~GACtB~~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"}
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/* @internal /\nexport const TableWrapperDefinition = defineComponent<{\n className?: string;\n}>()({\n styles,\n classNames: {\n root: 'bui-TableWrapper',\n resizableContainer: 'bui-TableResizableContainer',\n scrollContainer: 'bui-TableScrollContainer',\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 isPending: { 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":";;;;;;;;;;AA8BO,MAAM,sBAAA,GAAyB,iBAEnC,CAAE;AAAA,EACH,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,kBAAA,EAAoB,6BAAA;AAAA,IACpB,eAAA,EAAiB;AAAA,GACnB;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;AAMM,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,EAAK;AAAA,IAC7B,SAAA,EAAW,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IACjC,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA;AAAK;AAEnC,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,SAAA,EAAW,IAAA;AAAA,EACX,EAAA,EAAI,UAAA;AAAA,EACJ,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,EAAC;AAAA,IACP,SAAS;AAAC;AAEd,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,SAAA,EAAW,oBAAA;AAAA,IACX,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;;;;"}

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

@@ -6,9 +6,12 @@ import '../Text/Text.module.css.esm.js';
 import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
 import '../ButtonIcon/ButtonIcon.module.css.esm.js';
 import { Select } from '../Select/Select.esm.js';
+import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
+import 'react-aria-components';
+import '../Avatar/Avatar.esm.js';
+import '../Avatar/Avatar.module.css.esm.js';
 import '../Select/Select.module.css.esm.js';
 import { TablePaginationDefinition } from './definition.esm.js';
-import { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';
 import { useMemo } from 'react';
 function getOptionValue(option) {

package/dist/components/TablePagination/TablePagination.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.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 { Text } from '../Text';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Select } from '../Select';\nimport type { TablePaginationProps, PageSizeOption } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TablePaginationDefinition } from './definition';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\nimport { useMemo } from 'react';\n\nfunction getOptionValue(option: number \| PageSizeOption): number {\n return typeof option === 'number' ? option : option.value;\n}\n\nfunction isNumberArray(\n options: number[] \| PageSizeOption[],\n): options is number[] {\n return options.length > 0 && typeof options[0] === 'number';\n}\n\nfunction normalizePageSizeOptions(\n options: number[] \| PageSizeOption[],\n): PageSizeOption[] {\n if (isNumberArray(options)) {\n return options.map(value => ({\n label: `Show ${value} results`,\n value,\n }));\n }\n return options;\n}\n\n/\n Pagination controls for Table components with page navigation and size selection.\n \n @public\n */\nexport function TablePagination(props: TablePaginationProps) {\n const { ownProps } = useDefinition(TablePaginationDefinition, props);\n const {\n classes,\n pageSize,\n pageSizeOptions,\n offset,\n totalCount,\n hasNextPage,\n hasPreviousPage,\n onNextPage,\n onPreviousPage,\n onPageSizeChange,\n showPageSizeOptions,\n getLabel,\n showPaginationLabel,\n } = ownProps;\n\n const labelId = useId();\n const normalizedOptions = useMemo(\n () => normalizePageSizeOptions(pageSizeOptions),\n [pageSizeOptions],\n );\n\n const effectivePageSize = useMemo(() => {\n const isValid = pageSizeOptions.some(\n opt => getOptionValue(opt) === pageSize,\n );\n if (isValid) {\n return pageSize;\n }\n const firstValue = getOptionValue(pageSizeOptions[0]);\n console.warn(\n `TablePagination: pageSize ${pageSize} is not in pageSizeOptions, using ${firstValue} instead`,\n );\n return firstValue;\n }, [pageSize, pageSizeOptions]);\n\n const hasItems = totalCount !== undefined && totalCount !== 0;\n\n const showLabel = hasItems && showPaginationLabel !== false;\n\n let label = `${totalCount} items`;\n if (getLabel) {\n label = getLabel({ pageSize: effectivePageSize, offset, totalCount });\n } else if (offset !== undefined) {\n const fromCount = offset + 1;\n const toCount = Math.min(offset + effectivePageSize, totalCount ?? 0);\n label = `${fromCount} - ${toCount} of ${totalCount}`;\n }\n\n return (\n <div className={classes.root}>\n <div className={classes.left}>\n {showPageSizeOptions && (\n <Select\n name=\"pageSize\"\n size=\"small\"\n aria-label=\"Select table page size\"\n options={normalizedOptions.map(opt => ({\n label: opt.label,\n value: String(opt.value),\n }))}\n defaultValue={effectivePageSize.toString()}\n onChange={value => {\n const newPageSize = Number(value);\n onPageSizeChange?.(newPageSize);\n }}\n className={classes.select}\n />\n )}\n </div>\n <div className={classes.right}>\n {showLabel && (\n <Text as=\"p\" variant=\"body-medium\" id={labelId}>\n {label}\n </Text>\n )}\n <ButtonIcon\n variant=\"secondary\"\n size=\"small\"\n onClick={onPreviousPage}\n isDisabled={!hasPreviousPage}\n icon={<RiArrowLeftSLine />}\n aria-label=\"Previous table page\"\n aria-describedby={showLabel ? labelId : undefined}\n />\n <ButtonIcon\n variant=\"secondary\"\n size=\"small\"\n onClick={onNextPage}\n isDisabled={!hasNextPage}\n icon={<RiArrowRightSLine />}\n aria-label=\"Next table page\"\n aria-describedby={showLabel ? labelId : undefined}\n />\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":"~~;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.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 { Text } from '../Text';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Select } from '../Select';\nimport type { TablePaginationProps, PageSizeOption } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TablePaginationDefinition } from './definition';\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react';\nimport { useMemo } from 'react';\n\nfunction getOptionValue(option: number \| PageSizeOption): number {\n return typeof option === 'number' ? option : option.value;\n}\n\nfunction isNumberArray(\n options: number[] \| PageSizeOption[],\n): options is number[] {\n return options.length > 0 && typeof options[0] === 'number';\n}\n\nfunction normalizePageSizeOptions(\n options: number[] \| PageSizeOption[],\n): PageSizeOption[] {\n if (isNumberArray(options)) {\n return options.map(value => ({\n label: `Show ${value} results`,\n value,\n }));\n }\n return options;\n}\n\n/\n Pagination controls for Table components with page navigation and size selection.\n \n @public\n */\nexport function TablePagination(props: TablePaginationProps) {\n const { ownProps } = useDefinition(TablePaginationDefinition, props);\n const {\n classes,\n pageSize,\n pageSizeOptions,\n offset,\n totalCount,\n hasNextPage,\n hasPreviousPage,\n onNextPage,\n onPreviousPage,\n onPageSizeChange,\n showPageSizeOptions,\n getLabel,\n showPaginationLabel,\n } = ownProps;\n\n const labelId = useId();\n const normalizedOptions = useMemo(\n () => normalizePageSizeOptions(pageSizeOptions),\n [pageSizeOptions],\n );\n\n const effectivePageSize = useMemo(() => {\n const isValid = pageSizeOptions.some(\n opt => getOptionValue(opt) === pageSize,\n );\n if (isValid) {\n return pageSize;\n }\n const firstValue = getOptionValue(pageSizeOptions[0]);\n console.warn(\n `TablePagination: pageSize ${pageSize} is not in pageSizeOptions, using ${firstValue} instead`,\n );\n return firstValue;\n }, [pageSize, pageSizeOptions]);\n\n const hasItems = totalCount !== undefined && totalCount !== 0;\n\n const showLabel = hasItems && showPaginationLabel !== false;\n\n let label = `${totalCount} items`;\n if (getLabel) {\n label = getLabel({ pageSize: effectivePageSize, offset, totalCount });\n } else if (offset !== undefined) {\n const fromCount = offset + 1;\n const toCount = Math.min(offset + effectivePageSize, totalCount ?? 0);\n label = `${fromCount} - ${toCount} of ${totalCount}`;\n }\n\n return (\n <div className={classes.root}>\n <div className={classes.left}>\n {showPageSizeOptions && (\n <Select\n name=\"pageSize\"\n size=\"small\"\n aria-label=\"Select table page size\"\n options={normalizedOptions.map(opt => ({\n label: opt.label,\n value: String(opt.value),\n }))}\n defaultValue={effectivePageSize.toString()}\n onChange={value => {\n const newPageSize = Number(value);\n onPageSizeChange?.(newPageSize);\n }}\n className={classes.select}\n />\n )}\n </div>\n <div className={classes.right}>\n {showLabel && (\n <Text as=\"p\" variant=\"body-medium\" id={labelId}>\n {label}\n </Text>\n )}\n <ButtonIcon\n variant=\"secondary\"\n size=\"small\"\n onClick={onPreviousPage}\n isDisabled={!hasPreviousPage}\n icon={<RiArrowLeftSLine />}\n aria-label=\"Previous table page\"\n aria-describedby={showLabel ? labelId : undefined}\n />\n <ButtonIcon\n variant=\"secondary\"\n size=\"small\"\n onClick={onNextPage}\n isDisabled={!hasNextPage}\n icon={<RiArrowRightSLine />}\n aria-label=\"Next table page\"\n aria-describedby={showLabel ? labelId : undefined}\n />\n </div>\n </div>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Tabs/TabsIndicators.esm.js CHANGED Viewed

@@ -9,133 +9,180 @@ const TabsIndicators = (props) => {
   const { classes, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = ownProps;
   const state = useContext(TabListStateContext);
   const prevSelectedKey = useRef(null);
-  const updateCSSVariables = useCallback(() => {
-    if (state == null) return;
-    if (!tabsRef.current) return;
-    const tabsRect = tabsRef.current.getBoundingClientRect();
-    if (state?.selectedKey != null && state.selectedKey !== "") {
-      const activeTab = tabRefs.current.get(state.selectedKey.toString());
-      if (activeTab) {
-        const activeRect = activeTab.getBoundingClientRect();
-        const relativeLeft = activeRect.left - tabsRect.left;
-        const relativeTop = activeRect.top - tabsRect.top;
-        const isFirstActiveTab = prevSelectedKey.current === null;
-        if (isFirstActiveTab) {
+  const updateCSSVariables = useCallback(
+    (animate = true) => {
+      if (state == null) return;
+      if (!tabsRef.current) return;
+      const tabsRect = tabsRef.current.getBoundingClientRect();
+      if (state?.selectedKey != null && state.selectedKey !== "") {
+        const activeTab = tabRefs.current.get(state.selectedKey.toString());
+        if (activeTab) {
+          const activeRect = activeTab.getBoundingClientRect();
+          const relativeLeft = activeRect.left - tabsRect.left;
+          const relativeTop = activeRect.top - tabsRect.top;
+          const isFirstActiveTab = prevSelectedKey.current === null;
+          if (isFirstActiveTab || !animate) {
+            tabsRef.current.style.setProperty(
+              "--active-transition-duration",
+              "0s"
+            );
+            if (animate) {
+              requestAnimationFrame(() => {
+                if (tabsRef.current) {
+                  tabsRef.current.style.setProperty(
+                    "--active-transition-duration",
+                    "0.25s"
+                  );
+                }
+              });
+            }
+          } else {
+            tabsRef.current.style.setProperty(
+              "--active-transition-duration",
+              "0.25s"
+            );
+          }
+          prevSelectedKey.current = state.selectedKey.toString();
           tabsRef.current.style.setProperty(
-            "--active-transition-duration",
-            "0s"
+            "--active-tab-left",
+            `${relativeLeft}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--active-tab-right",
+            `${relativeLeft + activeRect.width}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--active-tab-top",
+            `${relativeTop}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--active-tab-bottom",
+            `${relativeTop + activeRect.height}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--active-tab-width",
+            `${activeRect.width}px`
           );
-          requestAnimationFrame(() => {
-            if (tabsRef.current) {
-              tabsRef.current.style.setProperty(
-                "--active-transition-duration",
-                "0.25s"
-              );
-            }
-          });
-        } else {
           tabsRef.current.style.setProperty(
-            "--active-transition-duration",
-            "0.25s"
+            "--active-tab-height",
+            `${activeRect.height}px`
           );
+          tabsRef.current.style.setProperty("--active-tab-opacity", "1");
         }
-        prevSelectedKey.current = state.selectedKey.toString();
-        tabsRef.current.style.setProperty(
-          "--active-tab-left",
-          `${relativeLeft}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--active-tab-right",
-          `${relativeLeft + activeRect.width}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--active-tab-top",
-          `${relativeTop}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--active-tab-bottom",
-          `${relativeTop + activeRect.height}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--active-tab-width",
-          `${activeRect.width}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--active-tab-height",
-          `${activeRect.height}px`
-        );
-        tabsRef.current.style.setProperty("--active-tab-opacity", "1");
+      } else {
+        tabsRef.current.style.setProperty("--active-tab-opacity", "0");
+        prevSelectedKey.current = null;
       }
-    } else {
-      tabsRef.current.style.setProperty("--active-tab-opacity", "0");
-      prevSelectedKey.current = null;
-    }
-    if (hoveredKey) {
-      const hoveredTab = tabRefs.current.get(hoveredKey);
-      if (hoveredTab) {
-        const hoveredRect = hoveredTab.getBoundingClientRect();
-        const relativeLeft = hoveredRect.left - tabsRect.left;
-        const relativeTop = hoveredRect.top - tabsRect.top;
-        tabsRef.current.style.setProperty(
-          "--hovered-tab-left",
-          `${relativeLeft}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--hovered-tab-right",
-          `${relativeLeft + hoveredRect.width}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--hovered-tab-top",
-          `${relativeTop}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--hovered-tab-bottom",
-          `${relativeTop + hoveredRect.height}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--hovered-tab-width",
-          `${hoveredRect.width}px`
-        );
-        tabsRef.current.style.setProperty(
-          "--hovered-tab-height",
-          `${hoveredRect.height}px`
-        );
-        const isNewHoverSession = prevHoveredKey.current === null;
-        if (isNewHoverSession) {
+      if (hoveredKey) {
+        const hoveredTab = tabRefs.current.get(hoveredKey);
+        if (hoveredTab) {
+          const hoveredRect = hoveredTab.getBoundingClientRect();
+          const relativeLeft = hoveredRect.left - tabsRect.left;
+          const relativeTop = hoveredRect.top - tabsRect.top;
           tabsRef.current.style.setProperty(
-            "--hovered-transition-duration",
-            "0s"
+            "--hovered-tab-left",
+            `${relativeLeft}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--hovered-tab-right",
+            `${relativeLeft + hoveredRect.width}px`
           );
-          requestAnimationFrame(() => {
-            if (tabsRef.current) {
-              tabsRef.current.style.setProperty(
-                "--hovered-transition-duration",
-                "0.2s"
-              );
-            }
-          });
-        } else {
           tabsRef.current.style.setProperty(
-            "--hovered-transition-duration",
-            "0.2s"
+            "--hovered-tab-top",
+            `${relativeTop}px`
           );
+          tabsRef.current.style.setProperty(
+            "--hovered-tab-bottom",
+            `${relativeTop + hoveredRect.height}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--hovered-tab-width",
+            `${hoveredRect.width}px`
+          );
+          tabsRef.current.style.setProperty(
+            "--hovered-tab-height",
+            `${hoveredRect.height}px`
+          );
+          const isNewHoverSession = prevHoveredKey.current === null;
+          if (isNewHoverSession || !animate) {
+            tabsRef.current.style.setProperty(
+              "--hovered-transition-duration",
+              "0s"
+            );
+            if (animate) {
+              requestAnimationFrame(() => {
+                if (tabsRef.current) {
+                  tabsRef.current.style.setProperty(
+                    "--hovered-transition-duration",
+                    "0.2s"
+                  );
+                }
+              });
+            }
+          } else {
+            tabsRef.current.style.setProperty(
+              "--hovered-transition-duration",
+              "0.2s"
+            );
+          }
+          prevHoveredKey.current = hoveredKey;
+          tabsRef.current.style.setProperty("--hovered-tab-opacity", "1");
         }
-        prevHoveredKey.current = hoveredKey;
-        tabsRef.current.style.setProperty("--hovered-tab-opacity", "1");
+      } else {
+        tabsRef.current.style.setProperty("--hovered-tab-opacity", "0");
+        prevHoveredKey.current = null;
       }
-    } else {
-      tabsRef.current.style.setProperty("--hovered-tab-opacity", "0");
-      prevHoveredKey.current = null;
-    }
-  }, [state?.selectedKey, hoveredKey, tabRefs.current]);
+    },
+    [state?.selectedKey, hoveredKey, tabRefs.current]
+  );
   useEffect(() => {
     updateCSSVariables();
   }, [updateCSSVariables, tabRefs.current.size]);
   useEffect(() => {
-    const handleResize = () => updateCSSVariables();
+    const handleResize = () => updateCSSVariables(false);
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [updateCSSVariables]);
+  useEffect(() => {
+    if (typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    let frame = null;
+    const scheduleUpdate = () => {
+      if (frame !== null) {
+        return;
+      }
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        updateCSSVariables(false);
+      });
+    };
+    const resizeObserver = new ResizeObserver(scheduleUpdate);
+    const observeTabs = () => {
+      resizeObserver.disconnect();
+      for (const tab of tabRefs.current.values()) {
+        resizeObserver.observe(tab);
+      }
+    };
+    observeTabs();
+    const mutationObserver = new MutationObserver(() => {
+      observeTabs();
+      scheduleUpdate();
+    });
+    if (tabsRef.current) {
+      mutationObserver.observe(tabsRef.current, {
+        childList: true,
+        subtree: true
+      });
+    }
+    return () => {
+      if (frame !== null) {
+        cancelAnimationFrame(frame);
+      }
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [updateCSSVariables, tabRefs, tabsRef]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: classes.root }),
     /* @__PURE__ */ jsx("div", { className: classes.hovered })