@backstage/ui 0.14.3 → 0.15.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"usePageCache.esm.js","sources":["../../../../src/components/Table/hooks/usePageCache.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, useRef, useEffect } from 'react';\n\nconst FIRST_PAGE_CURSOR = Symbol('firstPage');\n\ntype CursorType = string | number;\n\ntype InternalCursor<TCursor extends CursorType> =\n  | TCursor\n  | typeof FIRST_PAGE_CURSOR;\n\ninterface PageEntry<T, TCursor extends CursorType> {\n  data: T[] | undefined;\n  nextCursor: InternalCursor<TCursor> | undefined;\n  prevCursor: InternalCursor<TCursor> | undefined;\n}\n\ninterface GetDataResult<T, TCursor extends CursorType> {\n  data: T[];\n  nextCursor?: TCursor;\n  prevCursor?: TCursor;\n  totalCount?: number;\n}\n\n/** @internal */\nexport interface UsePageCacheOptions<T, TCursor extends CursorType = string> {\n  getData: (params: {\n    cursor: TCursor | undefined;\n    signal: AbortSignal;\n  }) => Promise<GetDataResult<T, TCursor>>;\n  initialCurrentCursor?: TCursor;\n}\n\n/** @internal */\nexport interface UsePageCacheResult<T, TCursor extends CursorType = string> {\n  loading: boolean;\n  error: Error | undefined;\n  data: T[] | undefined;\n  totalCount: number | undefined;\n  currentCursor: TCursor | undefined;\n  hasPreviousPage: boolean;\n  onPreviousPage: () => void;\n  hasNextPage: boolean;\n  onNextPage: () => void;\n  reload: (options?: { keepCurrentCursor?: boolean }) => void;\n}\n\ntype Direction = 'mount' | 'reset' | 'refresh' | 'next' | 'prev';\n\nclass PageCacheStore<T, TCursor extends CursorType> {\n  private cache = new Map<InternalCursor<TCursor>, PageEntry<T, TCursor>>();\n\n  get(cursor: InternalCursor<TCursor>): PageEntry<T, TCursor> | undefined {\n    return this.cache.get(cursor);\n  }\n\n  getOrCreate(cursor: InternalCursor<TCursor>): PageEntry<T, TCursor> {\n    const existing = this.cache.get(cursor);\n    if (existing) {\n      return existing;\n    }\n    const entry: PageEntry<T, TCursor> = {\n      data: undefined,\n      nextCursor: undefined,\n      prevCursor: undefined,\n    };\n    this.cache.set(cursor, entry);\n    return entry;\n  }\n\n  clear() {\n    this.cache.clear();\n  }\n\n  getTargetCursor(\n    direction: Direction,\n    currentCursor: InternalCursor<TCursor>,\n    initialCurrentCursor: TCursor | undefined,\n  ): InternalCursor<TCursor> | undefined {\n    if (direction === 'mount') {\n      return toInternalCursor(initialCurrentCursor);\n    }\n    if (direction === 'reset') {\n      return FIRST_PAGE_CURSOR;\n    }\n    if (direction === 'refresh') {\n      return currentCursor;\n    }\n    const currentEntry = this.cache.get(currentCursor);\n\n    if (!currentEntry) {\n      return;\n    }\n\n    return direction === 'next'\n      ? currentEntry.nextCursor\n      : currentEntry.prevCursor;\n  }\n\n  linkEntryToSource(\n    entry: PageEntry<T, TCursor>,\n    direction: Direction,\n    currentCursor: InternalCursor<TCursor>,\n  ) {\n    if (direction === 'next') {\n      entry.prevCursor = currentCursor;\n    } else if (direction === 'prev') {\n      entry.nextCursor = currentCursor;\n    }\n  }\n}\n\nfunction toInternalCursor<TCursor extends CursorType>(\n  cursor: TCursor | undefined,\n): InternalCursor<TCursor> {\n  return cursor === undefined ? FIRST_PAGE_CURSOR : cursor;\n}\n\nfunction toExternalCursor<TCursor extends CursorType>(\n  cursor: InternalCursor<TCursor>,\n): TCursor | undefined {\n  return cursor === FIRST_PAGE_CURSOR ? undefined : cursor;\n}\n\n/** @internal */\nexport function usePageCache<T, TCursor extends CursorType = string>(\n  options: UsePageCacheOptions<T, TCursor>,\n): UsePageCacheResult<T, TCursor> {\n  const { getData, initialCurrentCursor } = options;\n\n  const [currentCursor, setCurrentCursor] = useState<InternalCursor<TCursor>>(\n    () => toInternalCursor(initialCurrentCursor),\n  );\n\n  const cacheStore = useRef(new PageCacheStore<T, TCursor>()).current;\n\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<Error | undefined>(undefined);\n  const [totalCount, setTotalCount] = useState<number | undefined>(undefined);\n\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const currentPage = cacheStore.get(currentCursor);\n  const data = currentPage?.data;\n  const hasNextPage = currentPage?.nextCursor !== undefined;\n  const hasPreviousPage = currentPage?.prevCursor !== undefined;\n\n  const goToPage = useCallback(\n    async (direction: Direction) => {\n      const targetCursor = cacheStore.getTargetCursor(\n        direction,\n        currentCursor,\n        initialCurrentCursor,\n      );\n\n      if (!targetCursor) {\n        return;\n      }\n\n      const existingEntry = cacheStore.get(targetCursor);\n      if (existingEntry?.data !== undefined) {\n        setCurrentCursor(targetCursor);\n        return;\n      }\n\n      const entry = cacheStore.getOrCreate(targetCursor);\n      cacheStore.linkEntryToSource(entry, direction, currentCursor);\n      setCurrentCursor(targetCursor);\n\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n\n      const abortController = new AbortController();\n      abortControllerRef.current = abortController;\n\n      setLoading(true);\n      setError(undefined);\n\n      try {\n        const result = await getData({\n          cursor: toExternalCursor(targetCursor),\n          signal: abortController.signal,\n        });\n\n        if (abortController.signal.aborted) {\n          return;\n        }\n\n        entry.data = result.data;\n\n        if (entry.nextCursor === undefined && result.nextCursor !== undefined) {\n          entry.nextCursor = result.nextCursor;\n        }\n        if (entry.prevCursor === undefined && result.prevCursor !== undefined) {\n          entry.prevCursor = result.prevCursor;\n        }\n\n        if (result.totalCount !== undefined) {\n          setTotalCount(result.totalCount);\n        }\n\n        setLoading(false);\n      } catch (err) {\n        if (abortController.signal.aborted) {\n          return;\n        }\n\n        setError(err instanceof Error ? err : new Error(String(err)));\n        setLoading(false);\n      }\n    },\n    [getData, initialCurrentCursor, currentCursor, cacheStore],\n  );\n\n  useEffect(() => {\n    goToPage('mount');\n\n    return () => {\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n    };\n  }, []);\n\n  const onNextPage = useCallback(() => {\n    if (loading) return;\n    const page = cacheStore.get(currentCursor);\n    if (!page?.nextCursor) return;\n    goToPage('next');\n  }, [loading, currentCursor, goToPage, cacheStore]);\n\n  const onPreviousPage = useCallback(() => {\n    if (loading) return;\n    const page = cacheStore.get(currentCursor);\n    if (!page?.prevCursor) return;\n    goToPage('prev');\n  }, [loading, currentCursor, goToPage, cacheStore]);\n\n  const reload = useCallback(\n    (reloadOptions?: { keepCurrentCursor?: boolean }) => {\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n\n      cacheStore.clear();\n\n      goToPage(reloadOptions?.keepCurrentCursor ? 'refresh' : 'reset');\n    },\n    [goToPage, cacheStore],\n  );\n\n  return {\n    loading,\n    error,\n    data,\n    totalCount,\n    currentCursor: toExternalCursor(currentCursor),\n    hasPreviousPage,\n    onPreviousPage,\n    hasNextPage,\n    onNextPage,\n    reload,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"usePageCache.esm.js","sources":["../../../../src/components/Table/hooks/usePageCache.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, useRef, useEffect } from 'react';\n\nconst FIRST_PAGE_CURSOR = Symbol('firstPage');\n\ntype CursorType = string | number;\n\ntype InternalCursor<TCursor extends CursorType> =\n  | TCursor\n  | typeof FIRST_PAGE_CURSOR;\n\ninterface PageEntry<T, TCursor extends CursorType> {\n  data: T[] | undefined;\n  nextCursor: InternalCursor<TCursor> | undefined;\n  prevCursor: InternalCursor<TCursor> | undefined;\n}\n\ninterface GetDataResult<T, TCursor extends CursorType> {\n  data: T[];\n  nextCursor?: TCursor;\n  prevCursor?: TCursor;\n  totalCount?: number;\n}\n\n/** @internal */\nexport interface UsePageCacheOptions<T, TCursor extends CursorType = string> {\n  getData: (params: {\n    cursor: TCursor | undefined;\n    signal: AbortSignal;\n  }) => Promise<GetDataResult<T, TCursor>>;\n  initialCurrentCursor?: TCursor;\n}\n\n/** @internal */\nexport interface UsePageCacheResult<T, TCursor extends CursorType = string> {\n  isPending: boolean;\n  error: Error | undefined;\n  data: T[] | undefined;\n  totalCount: number | undefined;\n  currentCursor: TCursor | undefined;\n  hasPreviousPage: boolean;\n  onPreviousPage: () => void;\n  hasNextPage: boolean;\n  onNextPage: () => void;\n  reload: (options?: { keepCurrentCursor?: boolean }) => void;\n}\n\ntype Direction = 'mount' | 'reset' | 'refresh' | 'next' | 'prev';\n\nclass PageCacheStore<T, TCursor extends CursorType> {\n  private cache = new Map<InternalCursor<TCursor>, PageEntry<T, TCursor>>();\n\n  get(cursor: InternalCursor<TCursor>): PageEntry<T, TCursor> | undefined {\n    return this.cache.get(cursor);\n  }\n\n  getOrCreate(cursor: InternalCursor<TCursor>): PageEntry<T, TCursor> {\n    const existing = this.cache.get(cursor);\n    if (existing) {\n      return existing;\n    }\n    const entry: PageEntry<T, TCursor> = {\n      data: undefined,\n      nextCursor: undefined,\n      prevCursor: undefined,\n    };\n    this.cache.set(cursor, entry);\n    return entry;\n  }\n\n  clear() {\n    this.cache.clear();\n  }\n\n  getTargetCursor(\n    direction: Direction,\n    currentCursor: InternalCursor<TCursor>,\n    initialCurrentCursor: TCursor | undefined,\n  ): InternalCursor<TCursor> | undefined {\n    if (direction === 'mount') {\n      return toInternalCursor(initialCurrentCursor);\n    }\n    if (direction === 'reset') {\n      return FIRST_PAGE_CURSOR;\n    }\n    if (direction === 'refresh') {\n      return currentCursor;\n    }\n    const currentEntry = this.cache.get(currentCursor);\n\n    if (!currentEntry) {\n      return;\n    }\n\n    return direction === 'next'\n      ? currentEntry.nextCursor\n      : currentEntry.prevCursor;\n  }\n\n  linkEntryToSource(\n    entry: PageEntry<T, TCursor>,\n    direction: Direction,\n    currentCursor: InternalCursor<TCursor>,\n  ) {\n    if (direction === 'next') {\n      entry.prevCursor = currentCursor;\n    } else if (direction === 'prev') {\n      entry.nextCursor = currentCursor;\n    }\n  }\n}\n\nfunction toInternalCursor<TCursor extends CursorType>(\n  cursor: TCursor | undefined,\n): InternalCursor<TCursor> {\n  return cursor === undefined ? FIRST_PAGE_CURSOR : cursor;\n}\n\nfunction toExternalCursor<TCursor extends CursorType>(\n  cursor: InternalCursor<TCursor>,\n): TCursor | undefined {\n  return cursor === FIRST_PAGE_CURSOR ? undefined : cursor;\n}\n\n/** @internal */\nexport function usePageCache<T, TCursor extends CursorType = string>(\n  options: UsePageCacheOptions<T, TCursor>,\n): UsePageCacheResult<T, TCursor> {\n  const { getData, initialCurrentCursor } = options;\n\n  const [currentCursor, setCurrentCursor] = useState<InternalCursor<TCursor>>(\n    () => toInternalCursor(initialCurrentCursor),\n  );\n\n  const cacheStore = useRef(new PageCacheStore<T, TCursor>()).current;\n\n  const [isPending, setIsPending] = useState(true);\n  const [error, setError] = useState<Error | undefined>(undefined);\n  const [totalCount, setTotalCount] = useState<number | undefined>(undefined);\n\n  const abortControllerRef = useRef<AbortController | null>(null);\n\n  const currentPage = cacheStore.get(currentCursor);\n  const data = currentPage?.data;\n  const hasNextPage = currentPage?.nextCursor !== undefined;\n  const hasPreviousPage = currentPage?.prevCursor !== undefined;\n\n  const goToPage = useCallback(\n    async (direction: Direction) => {\n      const targetCursor = cacheStore.getTargetCursor(\n        direction,\n        currentCursor,\n        initialCurrentCursor,\n      );\n\n      if (!targetCursor) {\n        return;\n      }\n\n      const existingEntry = cacheStore.get(targetCursor);\n      if (existingEntry?.data !== undefined) {\n        setCurrentCursor(targetCursor);\n        return;\n      }\n\n      const entry = cacheStore.getOrCreate(targetCursor);\n      cacheStore.linkEntryToSource(entry, direction, currentCursor);\n      setCurrentCursor(targetCursor);\n\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n\n      const abortController = new AbortController();\n      abortControllerRef.current = abortController;\n\n      setIsPending(true);\n      setError(undefined);\n\n      try {\n        const result = await getData({\n          cursor: toExternalCursor(targetCursor),\n          signal: abortController.signal,\n        });\n\n        if (abortController.signal.aborted) {\n          return;\n        }\n\n        entry.data = result.data;\n\n        if (entry.nextCursor === undefined && result.nextCursor !== undefined) {\n          entry.nextCursor = result.nextCursor;\n        }\n        if (entry.prevCursor === undefined && result.prevCursor !== undefined) {\n          entry.prevCursor = result.prevCursor;\n        }\n\n        if (result.totalCount !== undefined) {\n          setTotalCount(result.totalCount);\n        }\n\n        setIsPending(false);\n      } catch (err) {\n        if (abortController.signal.aborted) {\n          return;\n        }\n\n        setError(err instanceof Error ? err : new Error(String(err)));\n        setIsPending(false);\n      }\n    },\n    [getData, initialCurrentCursor, currentCursor, cacheStore],\n  );\n\n  useEffect(() => {\n    goToPage('mount');\n\n    return () => {\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n    };\n  }, []);\n\n  const onNextPage = useCallback(() => {\n    if (isPending) return;\n    const page = cacheStore.get(currentCursor);\n    if (!page?.nextCursor) return;\n    goToPage('next');\n  }, [isPending, currentCursor, goToPage, cacheStore]);\n\n  const onPreviousPage = useCallback(() => {\n    if (isPending) return;\n    const page = cacheStore.get(currentCursor);\n    if (!page?.prevCursor) return;\n    goToPage('prev');\n  }, [isPending, currentCursor, goToPage, cacheStore]);\n\n  const reload = useCallback(\n    (reloadOptions?: { keepCurrentCursor?: boolean }) => {\n      if (abortControllerRef.current) {\n        abortControllerRef.current.abort();\n      }\n\n      cacheStore.clear();\n\n      goToPage(reloadOptions?.keepCurrentCursor ? 'refresh' : 'reset');\n    },\n    [goToPage, cacheStore],\n  );\n\n  return {\n    isPending,\n    error,\n    data,\n    totalCount,\n    currentCursor: toExternalCursor(currentCursor),\n    hasPreviousPage,\n    onPreviousPage,\n    hasNextPage,\n    onNextPage,\n    reload,\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -19,7 +19,7 @@ function useTableProps(paginationResult, sortState, paginationOptions = {}) {
     previousDataRef.current = paginationResult.data;
   }
   const displayData = paginationResult.data ?? previousDataRef.current;
-  const isStale = paginationResult.loading && displayData !== void 0;
+  const isStale = paginationResult.isPending && displayData !== void 0;
   const pagination = useMemo(() => {
     if (paginationOptions.type === "none") {
       return { type: "none" };
@@ -69,7 +69,8 @@ function useTableProps(paginationResult, sortState, paginationOptions = {}) {
   return useMemo(
     () => ({
       data: displayData,
-      loading: paginationResult.loading,
+      isPending: paginationResult.isPending,
+      loading: paginationResult.isPending,
       isStale,
       error: paginationResult.error,
       pagination,
@@ -77,7 +78,7 @@ function useTableProps(paginationResult, sortState, paginationOptions = {}) {
     }),
     [
       displayData,
-      paginationResult.loading,
+      paginationResult.isPending,
       isStale,
       paginationResult.error,
       pagination,

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

@@ -1 +1 @@
-{"version":3,"file":"useTable.esm.js","sources":["../../../../src/components/Table/hooks/useTable.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 */\nimport { useMemo, useRef } from 'react';\nimport type { SortState, TableItem, TableProps } from '../types';\nimport type {\n  PaginationResult,\n  UseTableCompleteOptions,\n  UseTableCursorOptions,\n  UseTableOffsetOptions,\n  UseTableOptions,\n  UseTableResult,\n} from './types';\nimport { useQueryState } from './useQueryState';\nimport { useCompletePagination } from './useCompletePagination';\nimport { useCursorPagination } from './useCursorPagination';\nimport { useOffsetPagination } from './useOffsetPagination';\n\nfunction useTableProps<T extends TableItem>(\n  paginationResult: PaginationResult<T>,\n  sortState: SortState,\n  paginationOptions: UseTableCompleteOptions<T>['paginationOptions'] = {},\n): Omit<\n  TableProps<T>,\n  'columnConfig' | 'rowConfig' | 'selection' | 'emptyState'\n> {\n  const {\n    showPageSizeOptions = true,\n    pageSizeOptions,\n    onPageSizeChange: onPageSizeChangeCallback,\n    onNextPage: onNextPageCallback,\n    onPreviousPage: onPreviousPageCallback,\n    getLabel,\n    showPaginationLabel,\n  } = paginationOptions;\n\n  const previousDataRef = useRef(paginationResult.data);\n  if (paginationResult.data) {\n    previousDataRef.current = paginationResult.data;\n  }\n\n  const displayData = paginationResult.data ?? previousDataRef.current;\n  const isStale = paginationResult.loading && displayData !== undefined;\n\n  const pagination = useMemo(() => {\n    if (paginationOptions.type === 'none') {\n      return { type: 'none' as const };\n    }\n    return {\n      type: 'page' as const,\n      pageSize: paginationResult.pageSize,\n      pageSizeOptions,\n      offset: paginationResult.offset,\n      totalCount: paginationResult.totalCount,\n      hasNextPage: paginationResult.hasNextPage,\n      hasPreviousPage: paginationResult.hasPreviousPage,\n      onNextPage: () => {\n        paginationResult.onNextPage();\n        onNextPageCallback?.();\n      },\n      onPreviousPage: () => {\n        paginationResult.onPreviousPage();\n        onPreviousPageCallback?.();\n      },\n      onPageSizeChange: (size: number) => {\n        paginationResult.onPageSizeChange(size);\n        onPageSizeChangeCallback?.(size);\n      },\n      showPageSizeOptions,\n      getLabel,\n      showPaginationLabel,\n    };\n  }, [\n    paginationOptions.type,\n    paginationResult.pageSize,\n    pageSizeOptions,\n    paginationResult.offset,\n    paginationResult.totalCount,\n    paginationResult.hasNextPage,\n    paginationResult.hasPreviousPage,\n    paginationResult.onNextPage,\n    paginationResult.onPreviousPage,\n    paginationResult.onPageSizeChange,\n    onNextPageCallback,\n    onPreviousPageCallback,\n    onPageSizeChangeCallback,\n    showPageSizeOptions,\n    getLabel,\n    showPaginationLabel,\n  ]);\n\n  return useMemo(\n    () => ({\n      data: displayData,\n      loading: paginationResult.loading,\n      isStale,\n      error: paginationResult.error,\n      pagination,\n      sort: sortState,\n    }),\n    [\n      displayData,\n      paginationResult.loading,\n      isStale,\n      paginationResult.error,\n      pagination,\n      sortState,\n    ],\n  );\n}\n\n/**\n * A hook that manages table data fetching, pagination, sorting, search, and filtering.\n * Supports three modes: `complete` for client-side data, `offset` for server-side offset pagination, and `cursor` for server-side cursor pagination.\n *\n * @public\n */\nexport function useTable<T extends TableItem, TFilter = unknown>(\n  options: UseTableCompleteOptions<T, TFilter>,\n): UseTableResult<T, TFilter>;\n/** @public */\nexport function useTable<T extends TableItem, TFilter = unknown>(\n  options: UseTableOffsetOptions<T, TFilter>,\n): UseTableResult<T, TFilter>;\n/** @public */\nexport function useTable<T extends TableItem, TFilter = unknown>(\n  options: UseTableCursorOptions<T, TFilter>,\n): UseTableResult<T, TFilter>;\nexport function useTable<T extends TableItem, TFilter = unknown>(\n  options: UseTableOptions<T, TFilter>,\n): UseTableResult<T, TFilter> {\n  const query = useQueryState<TFilter>(options);\n\n  const initialModeRef = useRef(options.mode);\n  if (initialModeRef.current !== options.mode) {\n    throw new Error(\n      `useTable mode cannot change from '${initialModeRef.current}' to '${options.mode}'. ` +\n        `The mode must remain stable for the lifetime of the component.`,\n    );\n  }\n\n  let pagination: PaginationResult<T> & { reload: () => void };\n\n  if (options.mode === 'complete') {\n    pagination = useCompletePagination(options, query);\n  } else if (options.mode === 'offset') {\n    pagination = useOffsetPagination(options, query);\n  } else if (options.mode === 'cursor') {\n    pagination = useCursorPagination(options, query);\n  } else {\n    throw new Error('Invalid mode');\n  }\n\n  const sortState: SortState = useMemo(\n    () => ({ descriptor: query.sort, onSortChange: query.setSort }),\n    [query.sort, query.setSort],\n  );\n\n  const tableProps = useTableProps(\n    pagination,\n    sortState,\n    options.paginationOptions ?? {},\n  );\n\n  return {\n    tableProps,\n    reload: pagination.reload,\n    filter: { value: query.filter, onChange: query.setFilter },\n    search: { value: query.search, onChange: query.setSearch },\n  };\n}\n"],"names":[],"mappings":";;;;;;AA8BA,SAAS,aAAA,CACP,gBAAA,EACA,SAAA,EACA,iBAAA,GAAqE,EAAC,EAItE;AACA,EAAA,MAAM;AAAA,IACJ,mBAAA,GAAsB,IAAA;AAAA,IACtB,eAAA;AAAA,IACA,gBAAA,EAAkB,wBAAA;AAAA,IAClB,UAAA,EAAY,kBAAA;AAAA,IACZ,cAAA,EAAgB,sBAAA;AAAA,IAChB,QAAA;AAAA,IACA;AAAA,GACF,GAAI,iBAAA;AAEJ,EAAA,MAAM,eAAA,GAAkB,MAAA,CAAO,gBAAA,CAAiB,IAAI,CAAA;AACpD,EAAA,IAAI,iBAAiB,IAAA,EAAM;AACzB,IAAA,eAAA,CAAgB,UAAU,gBAAA,CAAiB,IAAA;AAAA,EAC7C;AAEA,EAAA,MAAM,WAAA,GAAc,gBAAA,CAAiB,IAAA,IAAQ,eAAA,CAAgB,OAAA;AAC7D,EAAA,MAAM,OAAA,GAAU,gBAAA,CAAiB,OAAA,IAAW,WAAA,KAAgB,MAAA;AAE5D,EAAA,MAAM,UAAA,GAAa,QAAQ,MAAM;AAC/B,IAAA,IAAI,iBAAA,CAAkB,SAAS,MAAA,EAAQ;AACrC,MAAA,OAAO,EAAE,MAAM,MAAA,EAAgB;AAAA,IACjC;AACA,IAAA,OAAO;AAAA,MACL,IAAA,EAAM,MAAA;AAAA,MACN,UAAU,gBAAA,CAAiB,QAAA;AAAA,MAC3B,eAAA;AAAA,MACA,QAAQ,gBAAA,CAAiB,MAAA;AAAA,MACzB,YAAY,gBAAA,CAAiB,UAAA;AAAA,MAC7B,aAAa,gBAAA,CAAiB,WAAA;AAAA,MAC9B,iBAAiB,gBAAA,CAAiB,eAAA;AAAA,MAClC,YAAY,MAAM;AAChB,QAAA,gBAAA,CAAiB,UAAA,EAAW;AAC5B,QAAA,kBAAA,IAAqB;AAAA,MACvB,CAAA;AAAA,MACA,gBAAgB,MAAM;AACpB,QAAA,gBAAA,CAAiB,cAAA,EAAe;AAChC,QAAA,sBAAA,IAAyB;AAAA,MAC3B,CAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,IAAA,KAAiB;AAClC,QAAA,gBAAA,CAAiB,iBAAiB,IAAI,CAAA;AACtC,QAAA,wBAAA,GAA2B,IAAI,CAAA;AAAA,MACjC,CAAA;AAAA,MACA,mBAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACF;AAAA,EACF,CAAA,EAAG;AAAA,IACD,iBAAA,CAAkB,IAAA;AAAA,IAClB,gBAAA,CAAiB,QAAA;AAAA,IACjB,eAAA;AAAA,IACA,gBAAA,CAAiB,MAAA;AAAA,IACjB,gBAAA,CAAiB,UAAA;AAAA,IACjB,gBAAA,CAAiB,WAAA;AAAA,IACjB,gBAAA,CAAiB,eAAA;AAAA,IACjB,gBAAA,CAAiB,UAAA;AAAA,IACjB,gBAAA,CAAiB,cAAA;AAAA,IACjB,gBAAA,CAAiB,gBAAA;AAAA,IACjB,kBAAA;AAAA,IACA,sBAAA;AAAA,IACA,wBAAA;AAAA,IACA,mBAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,OAAO,OAAA;AAAA,IACL,OAAO;AAAA,MACL,IAAA,EAAM,WAAA;AAAA,MACN,SAAS,gBAAA,CAAiB,OAAA;AAAA,MAC1B,OAAA;AAAA,MACA,OAAO,gBAAA,CAAiB,KAAA;AAAA,MACxB,UAAA;AAAA,MACA,IAAA,EAAM;AAAA,KACR,CAAA;AAAA,IACA;AAAA,MACE,WAAA;AAAA,MACA,gBAAA,CAAiB,OAAA;AAAA,MACjB,OAAA;AAAA,MACA,gBAAA,CAAiB,KAAA;AAAA,MACjB,UAAA;AAAA,MACA;AAAA;AACF,GACF;AACF;AAmBO,SAAS,SACd,OAAA,EAC4B;AAC5B,EAAA,MAAM,KAAA,GAAQ,cAAuB,OAAO,CAAA;AAE5C,EAAA,MAAM,cAAA,GAAiB,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAA;AAC1C,EAAA,IAAI,cAAA,CAAe,OAAA,KAAY,OAAA,CAAQ,IAAA,EAAM;AAC3C,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,kCAAA,EAAqC,cAAA,CAAe,OAAO,CAAA,MAAA,EAAS,QAAQ,IAAI,CAAA,iEAAA;AAAA,KAElF;AAAA,EACF;AAEA,EAAA,IAAI,UAAA;AAEJ,EAAA,IAAI,OAAA,CAAQ,SAAS,UAAA,EAAY;AAC/B,IAAA,UAAA,GAAa,qBAAA,CAAsB,SAAS,KAAK,CAAA;AAAA,EACnD,CAAA,MAAA,IAAW,OAAA,CAAQ,IAAA,KAAS,QAAA,EAAU;AACpC,IAAA,UAAA,GAAa,mBAAA,CAAoB,SAAS,KAAK,CAAA;AAAA,EACjD,CAAA,MAAA,IAAW,OAAA,CAAQ,IAAA,KAAS,QAAA,EAAU;AACpC,IAAA,UAAA,GAAa,mBAAA,CAAoB,SAAS,KAAK,CAAA;AAAA,EACjD,CAAA,MAAO;AACL,IAAA,MAAM,IAAI,MAAM,cAAc,CAAA;AAAA,EAChC;AAEA,EAAA,MAAM,SAAA,GAAuB,OAAA;AAAA,IAC3B,OAAO,EAAE,UAAA,EAAY,MAAM,IAAA,EAAM,YAAA,EAAc,MAAM,OAAA,EAAQ,CAAA;AAAA,IAC7D,CAAC,KAAA,CAAM,IAAA,EAAM,KAAA,CAAM,OAAO;AAAA,GAC5B;AAEA,EAAA,MAAM,UAAA,GAAa,aAAA;AAAA,IACjB,UAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA,CAAQ,qBAAqB;AAAC,GAChC;AAEA,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,QAAQ,UAAA,CAAW,MAAA;AAAA,IACnB,QAAQ,EAAE,KAAA,EAAO,MAAM,MAAA,EAAQ,QAAA,EAAU,MAAM,SAAA,EAAU;AAAA,IACzD,QAAQ,EAAE,KAAA,EAAO,MAAM,MAAA,EAAQ,QAAA,EAAU,MAAM,SAAA;AAAU,GAC3D;AACF;;;;"}
+{"version":3,"file":"useTable.esm.js","sources":["../../../../src/components/Table/hooks/useTable.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 */\nimport { useMemo, useRef } from 'react';\nimport type { SortState, TableItem, TableProps } from '../types';\nimport type {\n  PaginationResult,\n  UseTableCompleteOptions,\n  UseTableCursorOptions,\n  UseTableOffsetOptions,\n  UseTableOptions,\n  UseTableResult,\n} from './types';\nimport { useQueryState } from './useQueryState';\nimport { useCompletePagination } from './useCompletePagination';\nimport { useCursorPagination } from './useCursorPagination';\nimport { useOffsetPagination } from './useOffsetPagination';\n\nfunction useTableProps<T extends TableItem>(\n  paginationResult: PaginationResult<T>,\n  sortState: SortState,\n  paginationOptions: UseTableCompleteOptions<T>['paginationOptions'] = {},\n): Omit<\n  TableProps<T>,\n  'columnConfig' | 'rowConfig' | 'selection' | 'emptyState'\n> {\n  const {\n    showPageSizeOptions = true,\n    pageSizeOptions,\n    onPageSizeChange: onPageSizeChangeCallback,\n    onNextPage: onNextPageCallback,\n    onPreviousPage: onPreviousPageCallback,\n    getLabel,\n    showPaginationLabel,\n  } = paginationOptions;\n\n  const previousDataRef = useRef(paginationResult.data);\n  if (paginationResult.data) {\n    previousDataRef.current = paginationResult.data;\n  }\n\n  const displayData = paginationResult.data ?? previousDataRef.current;\n  const isStale = paginationResult.isPending && displayData !== undefined;\n\n  const pagination = useMemo(() => {\n    if (paginationOptions.type === 'none') {\n      return { type: 'none' as const };\n    }\n    return {\n      type: 'page' as const,\n      pageSize: paginationResult.pageSize,\n      pageSizeOptions,\n      offset: paginationResult.offset,\n      totalCount: paginationResult.totalCount,\n      hasNextPage: paginationResult.hasNextPage,\n      hasPreviousPage: paginationResult.hasPreviousPage,\n      onNextPage: () => {\n        paginationResult.onNextPage();\n        onNextPageCallback?.();\n      },\n      onPreviousPage: () => {\n        paginationResult.onPreviousPage();\n        onPreviousPageCallback?.();\n      },\n      onPageSizeChange: (size: number) => {\n        paginationResult.onPageSizeChange(size);\n        onPageSizeChangeCallback?.(size);\n      },\n      showPageSizeOptions,\n      getLabel,\n      showPaginationLabel,\n    };\n  }, [\n    paginationOptions.type,\n    paginationResult.pageSize,\n    pageSizeOptions,\n    paginationResult.offset,\n    paginationResult.totalCount,\n    paginationResult.hasNextPage,\n    paginationResult.hasPreviousPage,\n    paginationResult.onNextPage,\n    paginationResult.onPreviousPage,\n    paginationResult.onPageSizeChange,\n    onNextPageCallback,\n    onPreviousPageCallback,\n    onPageSizeChangeCallback,\n    showPageSizeOptions,\n    getLabel,\n    showPaginationLabel,\n  ]);\n\n  return useMemo(\n    () => ({\n      data: displayData,\n      isPending: paginationResult.isPending,\n      loading: paginationResult.isPending,\n      isStale,\n      error: paginationResult.error,\n      pagination,\n      sort: sortState,\n    }),\n    [\n      displayData,\n      paginationResult.isPending,\n      isStale,\n      paginationResult.error,\n      pagination,\n      sortState,\n    ],\n  );\n}\n\n/**\n * A hook that manages table data fetching, pagination, sorting, search, and filtering.\n * Supports three modes: `complete` for client-side data, `offset` for server-side offset pagination, and `cursor` for server-side cursor pagination.\n *\n * @public\n */\nexport function useTable<T extends TableItem, TFilter = unknown>(\n  options: UseTableCompleteOptions<T, TFilter>,\n): UseTableResult<T, TFilter>;\n/** @public */\nexport function useTable<T extends TableItem, TFilter = unknown>(\n  options: UseTableOffsetOptions<T, TFilter>,\n): UseTableResult<T, TFilter>;\n/** @public */\nexport function useTable<T extends TableItem, TFilter = unknown>(\n  options: UseTableCursorOptions<T, TFilter>,\n): UseTableResult<T, TFilter>;\nexport function useTable<T extends TableItem, TFilter = unknown>(\n  options: UseTableOptions<T, TFilter>,\n): UseTableResult<T, TFilter> {\n  const query = useQueryState<TFilter>(options);\n\n  const initialModeRef = useRef(options.mode);\n  if (initialModeRef.current !== options.mode) {\n    throw new Error(\n      `useTable mode cannot change from '${initialModeRef.current}' to '${options.mode}'. ` +\n        `The mode must remain stable for the lifetime of the component.`,\n    );\n  }\n\n  let pagination: PaginationResult<T> & { reload: () => void };\n\n  if (options.mode === 'complete') {\n    pagination = useCompletePagination(options, query);\n  } else if (options.mode === 'offset') {\n    pagination = useOffsetPagination(options, query);\n  } else if (options.mode === 'cursor') {\n    pagination = useCursorPagination(options, query);\n  } else {\n    throw new Error('Invalid mode');\n  }\n\n  const sortState: SortState = useMemo(\n    () => ({ descriptor: query.sort, onSortChange: query.setSort }),\n    [query.sort, query.setSort],\n  );\n\n  const tableProps = useTableProps(\n    pagination,\n    sortState,\n    options.paginationOptions ?? {},\n  );\n\n  return {\n    tableProps,\n    reload: pagination.reload,\n    filter: { value: query.filter, onChange: query.setFilter },\n    search: { value: query.search, onChange: query.setSearch },\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -10,6 +10,7 @@ const TabsIndicators = (props) => {
   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 !== "") {

package/dist/components/Tabs/TabsIndicators.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsIndicators.esm.js","sources":["../../../src/components/Tabs/TabsIndicators.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { TabListStateContext } from 'react-aria-components';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TabsIndicatorsDefinition } from './definition';\nimport { useContext, useEffect, useCallback, useRef } from 'react';\nimport type { TabsIndicatorsProps } from './types';\n\n/**\n * A component that renders the indicators for the toolbar.\n *\n * @internal\n */\nexport const TabsIndicators = (props: TabsIndicatorsProps) => {\n  const { ownProps } = useDefinition(TabsIndicatorsDefinition, props);\n  const { classes, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = ownProps;\n  const state = useContext(TabListStateContext);\n  const prevSelectedKey = useRef<string | null>(null);\n\n  const updateCSSVariables = useCallback(() => {\n    if (!tabsRef.current) return;\n\n    const tabsRect = tabsRef.current.getBoundingClientRect();\n\n    // Set active tab variables\n    if (state?.selectedKey != null && state.selectedKey !== '') {\n      const activeTab = tabRefs.current.get(state.selectedKey.toString());\n\n      if (activeTab) {\n        const activeRect = activeTab.getBoundingClientRect();\n        const relativeLeft = activeRect.left - tabsRect.left;\n        const relativeTop = activeRect.top - tabsRect.top;\n\n        // Control transition timing based on whether this is the first time setting active tab\n        const isFirstActiveTab = prevSelectedKey.current === null;\n\n        if (isFirstActiveTab) {\n          // First time setting active tab: no transitions for position\n          tabsRef.current.style.setProperty(\n            '--active-transition-duration',\n            '0s',\n          );\n          // Enable transitions on next frame for future tab switches\n          requestAnimationFrame(() => {\n            if (tabsRef.current) {\n              tabsRef.current.style.setProperty(\n                '--active-transition-duration',\n                '0.25s',\n              );\n            }\n          });\n        } else {\n          // Switching between tabs: full transitions\n          tabsRef.current.style.setProperty(\n            '--active-transition-duration',\n            '0.25s',\n          );\n        }\n\n        // Update previous selected key for next time\n        prevSelectedKey.current = state.selectedKey.toString();\n\n        tabsRef.current.style.setProperty(\n          '--active-tab-left',\n          `${relativeLeft}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-right',\n          `${relativeLeft + activeRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-top',\n          `${relativeTop}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-bottom',\n          `${relativeTop + activeRect.height}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-width',\n          `${activeRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-height',\n          `${activeRect.height}px`,\n        );\n        tabsRef.current.style.setProperty('--active-tab-opacity', '1');\n      }\n    } else {\n      tabsRef.current.style.setProperty('--active-tab-opacity', '0');\n      prevSelectedKey.current = null;\n    }\n\n    // Set hovered tab variables\n    if (hoveredKey) {\n      const hoveredTab = tabRefs.current.get(hoveredKey);\n      if (hoveredTab) {\n        const hoveredRect = hoveredTab.getBoundingClientRect();\n        const relativeLeft = hoveredRect.left - tabsRect.left;\n        const relativeTop = hoveredRect.top - tabsRect.top;\n\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-left',\n          `${relativeLeft}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-right',\n          `${relativeLeft + hoveredRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-top',\n          `${relativeTop}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-bottom',\n          `${relativeTop + hoveredRect.height}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-width',\n          `${hoveredRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-height',\n          `${hoveredRect.height}px`,\n        );\n        // Control transition timing based on whether this is a new hover session\n        const isNewHoverSession = prevHoveredKey.current === null;\n\n        if (isNewHoverSession) {\n          // Starting new hover session: no transitions for position\n          tabsRef.current.style.setProperty(\n            '--hovered-transition-duration',\n            '0s',\n          );\n          // Enable transitions on next frame for future tab switches\n          requestAnimationFrame(() => {\n            if (tabsRef.current) {\n              tabsRef.current.style.setProperty(\n                '--hovered-transition-duration',\n                '0.2s',\n              );\n            }\n          });\n        } else {\n          // Moving between tabs in same session: full transitions\n          tabsRef.current.style.setProperty(\n            '--hovered-transition-duration',\n            '0.2s',\n          );\n        }\n\n        // Update previous hover key for next time\n        prevHoveredKey.current = hoveredKey;\n\n        tabsRef.current.style.setProperty('--hovered-tab-opacity', '1');\n      }\n    } else {\n      // When not hovering, hide with opacity and reset for next hover session\n      tabsRef.current.style.setProperty('--hovered-tab-opacity', '0');\n\n      // Reset previous hover key so next hover is treated as new session\n      prevHoveredKey.current = null;\n    }\n  }, [state?.selectedKey, hoveredKey, tabRefs.current]);\n\n  useEffect(() => {\n    updateCSSVariables();\n  }, [updateCSSVariables, tabRefs.current.size]);\n\n  useEffect(() => {\n    const handleResize = () => updateCSSVariables();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [updateCSSVariables]);\n\n  return (\n    <>\n      <div className={classes.root} />\n      <div className={classes.hovered} />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TabsIndicators.esm.js","sources":["../../../src/components/Tabs/TabsIndicators.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { TabListStateContext } from 'react-aria-components';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TabsIndicatorsDefinition } from './definition';\nimport { useContext, useEffect, useCallback, useRef } from 'react';\nimport type { TabsIndicatorsProps } from './types';\n\n/**\n * A component that renders the indicators for the toolbar.\n *\n * @internal\n */\nexport const TabsIndicators = (props: TabsIndicatorsProps) => {\n  const { ownProps } = useDefinition(TabsIndicatorsDefinition, props);\n  const { classes, tabRefs, tabsRef, hoveredKey, prevHoveredKey } = ownProps;\n  const state = useContext(TabListStateContext);\n  const prevSelectedKey = useRef<string | null>(null);\n\n  const updateCSSVariables = useCallback(() => {\n    // When rendered inside CollectionBuilder's hidden tree (for collection\n    // building), there is no TabListStateContext provider, so state is null.\n    // Bail out to avoid overwriting CSS variables on the shared tabsRef DOM\n    // element that the real instance also writes to.\n    if (state == null) return;\n\n    if (!tabsRef.current) return;\n\n    const tabsRect = tabsRef.current.getBoundingClientRect();\n\n    // Set active tab variables\n    if (state?.selectedKey != null && state.selectedKey !== '') {\n      const activeTab = tabRefs.current.get(state.selectedKey.toString());\n\n      if (activeTab) {\n        const activeRect = activeTab.getBoundingClientRect();\n        const relativeLeft = activeRect.left - tabsRect.left;\n        const relativeTop = activeRect.top - tabsRect.top;\n\n        // Control transition timing based on whether this is the first time setting active tab\n        const isFirstActiveTab = prevSelectedKey.current === null;\n\n        if (isFirstActiveTab) {\n          // First time setting active tab: no transitions for position\n          tabsRef.current.style.setProperty(\n            '--active-transition-duration',\n            '0s',\n          );\n          // Enable transitions on next frame for future tab switches\n          requestAnimationFrame(() => {\n            if (tabsRef.current) {\n              tabsRef.current.style.setProperty(\n                '--active-transition-duration',\n                '0.25s',\n              );\n            }\n          });\n        } else {\n          // Switching between tabs: full transitions\n          tabsRef.current.style.setProperty(\n            '--active-transition-duration',\n            '0.25s',\n          );\n        }\n\n        // Update previous selected key for next time\n        prevSelectedKey.current = state.selectedKey.toString();\n\n        tabsRef.current.style.setProperty(\n          '--active-tab-left',\n          `${relativeLeft}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-right',\n          `${relativeLeft + activeRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-top',\n          `${relativeTop}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-bottom',\n          `${relativeTop + activeRect.height}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-width',\n          `${activeRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--active-tab-height',\n          `${activeRect.height}px`,\n        );\n        tabsRef.current.style.setProperty('--active-tab-opacity', '1');\n      }\n    } else {\n      tabsRef.current.style.setProperty('--active-tab-opacity', '0');\n      prevSelectedKey.current = null;\n    }\n\n    // Set hovered tab variables\n    if (hoveredKey) {\n      const hoveredTab = tabRefs.current.get(hoveredKey);\n      if (hoveredTab) {\n        const hoveredRect = hoveredTab.getBoundingClientRect();\n        const relativeLeft = hoveredRect.left - tabsRect.left;\n        const relativeTop = hoveredRect.top - tabsRect.top;\n\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-left',\n          `${relativeLeft}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-right',\n          `${relativeLeft + hoveredRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-top',\n          `${relativeTop}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-bottom',\n          `${relativeTop + hoveredRect.height}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-width',\n          `${hoveredRect.width}px`,\n        );\n        tabsRef.current.style.setProperty(\n          '--hovered-tab-height',\n          `${hoveredRect.height}px`,\n        );\n        // Control transition timing based on whether this is a new hover session\n        const isNewHoverSession = prevHoveredKey.current === null;\n\n        if (isNewHoverSession) {\n          // Starting new hover session: no transitions for position\n          tabsRef.current.style.setProperty(\n            '--hovered-transition-duration',\n            '0s',\n          );\n          // Enable transitions on next frame for future tab switches\n          requestAnimationFrame(() => {\n            if (tabsRef.current) {\n              tabsRef.current.style.setProperty(\n                '--hovered-transition-duration',\n                '0.2s',\n              );\n            }\n          });\n        } else {\n          // Moving between tabs in same session: full transitions\n          tabsRef.current.style.setProperty(\n            '--hovered-transition-duration',\n            '0.2s',\n          );\n        }\n\n        // Update previous hover key for next time\n        prevHoveredKey.current = hoveredKey;\n\n        tabsRef.current.style.setProperty('--hovered-tab-opacity', '1');\n      }\n    } else {\n      // When not hovering, hide with opacity and reset for next hover session\n      tabsRef.current.style.setProperty('--hovered-tab-opacity', '0');\n\n      // Reset previous hover key so next hover is treated as new session\n      prevHoveredKey.current = null;\n    }\n  }, [state?.selectedKey, hoveredKey, tabRefs.current]);\n\n  useEffect(() => {\n    updateCSSVariables();\n  }, [updateCSSVariables, tabRefs.current.size]);\n\n  useEffect(() => {\n    const handleResize = () => updateCSSVariables();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [updateCSSVariables]);\n\n  return (\n    <>\n      <div className={classes.root} />\n      <div className={classes.hovered} />\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/css/styles.css

@@ -9356,6 +9356,18 @@ Add the correct display in Chrome and Safari.
     flex-direction: column-reverse;
   }
 
+  .bui-grow {
+    flex-grow: var(--grow);
+  }
+
+  .bui-shrink {
+    flex-shrink: var(--shrink);
+  }
+
+  .bui-basis {
+    flex-basis: var(--basis);
+  }
+
   /* Breakpoint xs */
   @media (min-width: 640px) {
     .xs\:bui-align-start {
@@ -9405,6 +9417,18 @@ Add the correct display in Chrome and Safari.
     .xs\:bui-fd-column-reverse {
       flex-direction: column-reverse;
     }
+
+    .xs\:bui-grow {
+      flex-grow: var(--grow-xs);
+    }
+
+    .xs\:bui-shrink {
+      flex-shrink: var(--shrink-xs);
+    }
+
+    .xs\:bui-basis {
+      flex-basis: var(--basis-xs);
+    }
   }
 
   /* Breakpoint sm */
@@ -9456,6 +9480,18 @@ Add the correct display in Chrome and Safari.
     .sm\:bui-fd-column-reverse {
       flex-direction: column-reverse;
     }
+
+    .sm\:bui-grow {
+      flex-grow: var(--grow-sm);
+    }
+
+    .sm\:bui-shrink {
+      flex-shrink: var(--shrink-sm);
+    }
+
+    .sm\:bui-basis {
+      flex-basis: var(--basis-sm);
+    }
   }
 
   /* Breakpoint md */
@@ -9507,6 +9543,18 @@ Add the correct display in Chrome and Safari.
     .md\:bui-fd-column-reverse {
       flex-direction: column-reverse;
     }
+
+    .md\:bui-grow {
+      flex-grow: var(--grow-md);
+    }
+
+    .md\:bui-shrink {
+      flex-shrink: var(--shrink-md);
+    }
+
+    .md\:bui-basis {
+      flex-basis: var(--basis-md);
+    }
   }
 
   /* Breakpoint lg */
@@ -9558,6 +9606,18 @@ Add the correct display in Chrome and Safari.
     .lg\:bui-fd-column-reverse {
       flex-direction: column-reverse;
     }
+
+    .lg\:bui-grow {
+      flex-grow: var(--grow-lg);
+    }
+
+    .lg\:bui-shrink {
+      flex-shrink: var(--shrink-lg);
+    }
+
+    .lg\:bui-basis {
+      flex-basis: var(--basis-lg);
+    }
   }
 
   /* Breakpoint xl */
@@ -9609,5 +9669,17 @@ Add the correct display in Chrome and Safari.
     .xl\:bui-fd-column-reverse {
       flex-direction: column-reverse;
     }
+
+    .xl\:bui-grow {
+      flex-grow: var(--grow-xl);
+    }
+
+    .xl\:bui-shrink {
+      flex-shrink: var(--shrink-xl);
+    }
+
+    .xl\:bui-basis {
+      flex-basis: var(--basis-xl);
+    }
   }
 }

package/dist/hooks/useDefinition/helpers.esm.js

@@ -50,11 +50,12 @@ function resolveDefinitionProps(definition, props, breakpoint) {
 function processUtilityProps(props, utilityPropKeys) {
   const utilityClassList = [];
   const generatedStyle = {};
-  const handleUtilityValue = (key, val, prefix = "") => {
+  const handleUtilityValue = (key, inputVal, prefix = "") => {
     const utilityConfig = utilityClassMap[key];
     if (!utilityConfig) {
       return;
     }
+    const val = "transform" in utilityConfig ? utilityConfig.transform(inputVal) : inputVal;
     const values = utilityConfig.values;
     if (values.length > 0 && values.includes(val)) {
       const className = prefix ? `${prefix}${utilityConfig.class}-${val}` : `${utilityConfig.class}-${val}`;

package/dist/hooks/useDefinition/helpers.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.esm.js","sources":["../../../src/hooks/useDefinition/helpers.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 { breakpoints } from '../useBreakpoint';\nimport { utilityClassMap } from '../../utils/utilityClassMap';\nimport type { ComponentConfig, UnwrapResponsive, UtilityStyle } from './types';\n\nconst namedBreakpoints = breakpoints.filter(b => b.id !== 'initial');\n\nfunction isResponsiveObject(value: unknown): value is Record<string, unknown> {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    namedBreakpoints.some(b => b.id in value)\n  );\n}\n\nexport function resolveResponsiveValue<T>(\n  value: T,\n  breakpoint: string,\n): UnwrapResponsive<T> {\n  if (!isResponsiveObject(value)) {\n    return value as UnwrapResponsive<T>;\n  }\n\n  const index = breakpoints.findIndex(b => b.id === breakpoint);\n\n  // Look for value at current breakpoint or smaller\n  for (let i = index; i >= 0; i--) {\n    const key = breakpoints[i].id;\n    if (key in value && value[key] !== undefined) {\n      return value[key] as UnwrapResponsive<T>;\n    }\n  }\n\n  // If no value found, check from smallest breakpoint up\n  for (let i = 0; i < breakpoints.length; i++) {\n    const key = breakpoints[i].id;\n    if (key in value && value[key] !== undefined) {\n      return value[key] as UnwrapResponsive<T>;\n    }\n  }\n\n  return value as UnwrapResponsive<T>;\n}\n\nexport function resolveDefinitionProps<D extends ComponentConfig<any, any>>(\n  definition: D,\n  props: Record<string, any>,\n  breakpoint: string,\n): {\n  ownPropsResolved: Record<string, any>;\n  restProps: Record<string, any>;\n} {\n  const ownPropKeys = new Set(Object.keys(definition.propDefs));\n  const utilityPropKeys = new Set(definition.utilityProps ?? []);\n\n  const ownPropsRaw: Record<string, any> = {};\n  const restProps: Record<string, any> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (ownPropKeys.has(key)) {\n      ownPropsRaw[key] = value;\n    } else if (!(utilityPropKeys as Set<string>).has(key)) {\n      restProps[key] = value;\n    }\n  }\n\n  const ownPropsResolved: Record<string, any> = {};\n\n  for (const [key, config] of Object.entries(definition.propDefs)) {\n    const rawValue = ownPropsRaw[key];\n    const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);\n    const finalValue = resolvedValue ?? (config as any).default;\n    if (finalValue !== undefined) {\n      ownPropsResolved[key] = finalValue;\n    }\n  }\n\n  return { ownPropsResolved, restProps };\n}\n\nexport function processUtilityProps<Keys extends string>(\n  props: Record<string, any>,\n  utilityPropKeys: readonly Keys[],\n): { utilityClasses: string; utilityStyle: UtilityStyle<Keys> } {\n  const utilityClassList: string[] = [];\n  const generatedStyle: Record<string, unknown> = {};\n\n  const handleUtilityValue = (\n    key: string,\n    val: unknown,\n    prefix: string = '',\n  ) => {\n    // Get utility class configuration for this key\n    const utilityConfig = utilityClassMap[key as keyof typeof utilityClassMap];\n\n    if (!utilityConfig) {\n      // Skip if no config found for this key\n      return;\n    }\n\n    // Check if value is in the list of valid values for this utility\n    const values = utilityConfig.values as readonly (string | number)[];\n    if (values.length > 0 && values.includes(val as string | number)) {\n      // Generate utility class with value suffix and optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}-${val}`\n        : `${utilityConfig.class}-${val}`;\n      utilityClassList.push(className);\n    } else if ('cssVar' in utilityConfig && utilityConfig.cssVar) {\n      // Custom value - add CSS custom property AND utility class name\n      // Only if cssVar is defined (properties with fixed values don't have cssVar)\n      const cssVar = utilityConfig.cssVar;\n      const cssVarKey = prefix ? `${cssVar}-${prefix.slice(0, -1)}` : cssVar;\n      // CSS custom properties need to be set on the style object\n      generatedStyle[cssVarKey] = val;\n\n      // Add utility class name (without value suffix) with optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}`\n        : utilityConfig.class;\n      utilityClassList.push(className);\n    }\n    // If no cssVar and value is not in valid values, skip (invalid value for fixed-value property)\n  };\n\n  for (const key of utilityPropKeys) {\n    const value = props[key];\n    if (value === undefined || value === null) {\n      continue;\n    }\n\n    // Check if value is a responsive object\n    if (typeof value === 'object' && value !== null) {\n      const breakpointValues = value as { [key: string]: unknown };\n      // Handle responsive object values\n      for (const bp in breakpointValues) {\n        const prefix = bp === 'initial' ? '' : `${bp}:`;\n        handleUtilityValue(key, breakpointValues[bp], prefix);\n      }\n    } else {\n      // Handle simple value\n      handleUtilityValue(key, value);\n    }\n  }\n\n  return {\n    utilityClasses: utilityClassList.join(' '),\n    utilityStyle: generatedStyle as UtilityStyle<Keys>,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"helpers.esm.js","sources":["../../../src/hooks/useDefinition/helpers.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 { breakpoints } from '../useBreakpoint';\nimport { utilityClassMap } from '../../utils/utilityClassMap';\nimport type { ComponentConfig, UnwrapResponsive, UtilityStyle } from './types';\n\nconst namedBreakpoints = breakpoints.filter(b => b.id !== 'initial');\n\nfunction isResponsiveObject(value: unknown): value is Record<string, unknown> {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    namedBreakpoints.some(b => b.id in value)\n  );\n}\n\nexport function resolveResponsiveValue<T>(\n  value: T,\n  breakpoint: string,\n): UnwrapResponsive<T> {\n  if (!isResponsiveObject(value)) {\n    return value as UnwrapResponsive<T>;\n  }\n\n  const index = breakpoints.findIndex(b => b.id === breakpoint);\n\n  // Look for value at current breakpoint or smaller\n  for (let i = index; i >= 0; i--) {\n    const key = breakpoints[i].id;\n    if (key in value && value[key] !== undefined) {\n      return value[key] as UnwrapResponsive<T>;\n    }\n  }\n\n  // If no value found, check from smallest breakpoint up\n  for (let i = 0; i < breakpoints.length; i++) {\n    const key = breakpoints[i].id;\n    if (key in value && value[key] !== undefined) {\n      return value[key] as UnwrapResponsive<T>;\n    }\n  }\n\n  return value as UnwrapResponsive<T>;\n}\n\nexport function resolveDefinitionProps<D extends ComponentConfig<any, any>>(\n  definition: D,\n  props: Record<string, any>,\n  breakpoint: string,\n): {\n  ownPropsResolved: Record<string, any>;\n  restProps: Record<string, any>;\n} {\n  const ownPropKeys = new Set(Object.keys(definition.propDefs));\n  const utilityPropKeys = new Set(definition.utilityProps ?? []);\n\n  const ownPropsRaw: Record<string, any> = {};\n  const restProps: Record<string, any> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (ownPropKeys.has(key)) {\n      ownPropsRaw[key] = value;\n    } else if (!(utilityPropKeys as Set<string>).has(key)) {\n      restProps[key] = value;\n    }\n  }\n\n  const ownPropsResolved: Record<string, any> = {};\n\n  for (const [key, config] of Object.entries(definition.propDefs)) {\n    const rawValue = ownPropsRaw[key];\n    const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);\n    const finalValue = resolvedValue ?? (config as any).default;\n    if (finalValue !== undefined) {\n      ownPropsResolved[key] = finalValue;\n    }\n  }\n\n  return { ownPropsResolved, restProps };\n}\n\nexport function processUtilityProps<Keys extends string>(\n  props: Record<string, any>,\n  utilityPropKeys: readonly Keys[],\n): { utilityClasses: string; utilityStyle: UtilityStyle<Keys> } {\n  const utilityClassList: string[] = [];\n  const generatedStyle: Record<string, unknown> = {};\n\n  const handleUtilityValue = (\n    key: string,\n    inputVal: unknown,\n    prefix: string = '',\n  ) => {\n    // Get utility class configuration for this key\n    const utilityConfig = utilityClassMap[key as keyof typeof utilityClassMap];\n\n    if (!utilityConfig) {\n      // Skip if no config found for this key\n      return;\n    }\n\n    const val =\n      'transform' in utilityConfig\n        ? utilityConfig.transform(inputVal)\n        : inputVal;\n\n    // Check if value is in the list of valid values for this utility\n    const values = utilityConfig.values as readonly (string | number)[];\n    if (values.length > 0 && values.includes(val as string | number)) {\n      // Generate utility class with value suffix and optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}-${val}`\n        : `${utilityConfig.class}-${val}`;\n      utilityClassList.push(className);\n    } else if ('cssVar' in utilityConfig && utilityConfig.cssVar) {\n      // Custom value - add CSS custom property AND utility class name\n      // Only if cssVar is defined (properties with fixed values don't have cssVar)\n      const cssVar = utilityConfig.cssVar;\n      const cssVarKey = prefix ? `${cssVar}-${prefix.slice(0, -1)}` : cssVar;\n      // CSS custom properties need to be set on the style object\n      generatedStyle[cssVarKey] = val;\n\n      // Add utility class name (without value suffix) with optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}`\n        : utilityConfig.class;\n      utilityClassList.push(className);\n    }\n    // If no cssVar and value is not in valid values, skip (invalid value for fixed-value property)\n  };\n\n  for (const key of utilityPropKeys) {\n    const value = props[key];\n    if (value === undefined || value === null) {\n      continue;\n    }\n\n    // Check if value is a responsive object\n    if (typeof value === 'object' && value !== null) {\n      const breakpointValues = value as { [key: string]: unknown };\n      // Handle responsive object values\n      for (const bp in breakpointValues) {\n        const prefix = bp === 'initial' ? '' : `${bp}:`;\n        handleUtilityValue(key, breakpointValues[bp], prefix);\n      }\n    } else {\n      // Handle simple value\n      handleUtilityValue(key, value);\n    }\n  }\n\n  return {\n    utilityClasses: utilityClassList.join(' '),\n    utilityStyle: generatedStyle as UtilityStyle<Keys>,\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/hooks/useDefinition/useDefinition.esm.js

@@ -4,7 +4,7 @@ import { useBreakpoint } from '../useBreakpoint.esm.js';
 import { useBgProvider, useBgConsumer, BgProvider } from '../useBg.esm.js';
 import { resolveDefinitionProps, processUtilityProps } from './helpers.esm.js';
 import { useAnalytics, noopTracker } from '../../analytics/useAnalytics.esm.js';
-import { useInRouterContext, useHref } from 'react-router-dom';
+import { useInRouterContext, useResolvedPath, createPath } from 'react-router-dom';
 import { isExternalLink } from '../../utils/linkUtils.esm.js';
 
 function useDefinition(definition, props, options) {
@@ -13,14 +13,9 @@ function useDefinition(definition, props, options) {
   const hasRouter = useInRouterContext();
   if (hasRouter) {
     const rawHref = props.href;
-    const basename = useHref("/").replace(/\/+$/, "") || "/";
-    const absoluteHref = useHref(rawHref ?? "");
+    const resolved = useResolvedPath(rawHref ?? "");
     if (rawHref !== void 0 && !isExternalLink(rawHref)) {
-      let stripped = absoluteHref;
-      if (basename !== "/" && (absoluteHref === basename || absoluteHref.startsWith(`${basename}/`))) {
-        stripped = absoluteHref === basename ? "/" : absoluteHref.slice(basename.length);
-      }
-      hrefResolvedProps = { ...props, href: stripped };
+      hrefResolvedProps = { ...props, href: createPath(resolved) };
     }
   }
   const { ownPropsResolved, restProps } = resolveDefinitionProps(
@@ -57,8 +52,8 @@ function useDefinition(definition, props, options) {
     const tracker = useAnalytics();
     analytics = ownPropsResolved.noTrack ? noopTracker : tracker;
   }
-  const utilityTarget = options?.utilityTarget ?? "root";
-  const classNameTarget = options?.classNameTarget ?? "root";
+  const utilityTarget = options?.utilityTarget !== void 0 ? options.utilityTarget : "root";
+  const classNameTarget = options?.classNameTarget !== void 0 ? options.classNameTarget : "root";
   const classes = {};
   for (const [name, cssKey] of Object.entries(definition.classNames)) {
     classes[name] = clsx(

package/dist/hooks/useDefinition/useDefinition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDefinition.esm.js","sources":["../../../src/hooks/useDefinition/useDefinition.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 { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useBreakpoint } from '../useBreakpoint';\nimport { useBgProvider, useBgConsumer, BgProvider } from '../useBg';\nimport { resolveDefinitionProps, processUtilityProps } from './helpers';\nimport { useAnalytics } from '../../analytics/useAnalytics';\nimport { noopTracker } from '../../analytics/useAnalytics';\nimport { useHref, useInRouterContext } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/linkUtils';\nimport type {\n  ComponentConfig,\n  UseDefinitionOptions,\n  UseDefinitionResult,\n  UtilityKeys,\n} from './types';\n\nexport function useDefinition<\n  D extends ComponentConfig<any, any>,\n  P extends Record<string, any>,\n>(\n  definition: D,\n  props: P,\n  options?: UseDefinitionOptions<D>,\n): UseDefinitionResult<D, P> {\n  const { breakpoint } = useBreakpoint();\n\n  // Pre-resolve href at component render time (where route context is\n  // correct), so that click-navigation has a correct absolute path\n  // regardless of where useNavigate is called. `useHref` returns the\n  // path with basename prepended; strip it so the output is the\n  // canonical pre-basename form that react-router's downstream useHref\n  // and navigate both expect as input (avoids double-prefixing).\n  // External URLs bypass resolution.\n  let hrefResolvedProps = props;\n  const hasRouter = useInRouterContext();\n  if (hasRouter) {\n    const rawHref = (props as any).href;\n    // useHref('/') returns the router's basename. Strip trailing slashes\n    // so the prefix check works regardless of how the consumer configured\n    // their <Router basename>.\n    const basename = useHref('/').replace(/\\/+$/, '') || '/';\n    const absoluteHref = useHref(rawHref ?? '');\n    if (rawHref !== undefined && !isExternalLink(rawHref)) {\n      let stripped = absoluteHref;\n      if (\n        basename !== '/' &&\n        (absoluteHref === basename || absoluteHref.startsWith(`${basename}/`))\n      ) {\n        stripped =\n          absoluteHref === basename ? '/' : absoluteHref.slice(basename.length);\n      }\n      hrefResolvedProps = { ...props, href: stripped } as P;\n    }\n  }\n\n  // Resolve all props centrally — applies responsive values and defaults\n  const { ownPropsResolved, restProps } = resolveDefinitionProps(\n    definition,\n    hrefResolvedProps,\n    breakpoint,\n  );\n\n  const dataAttributes: Record<string, string | undefined> = {};\n\n  for (const [key, config] of Object.entries(definition.propDefs)) {\n    const finalValue = ownPropsResolved[key];\n\n    if (finalValue !== undefined) {\n      // Skip data-bg for bg prop when the provider path handles it\n      if (key === 'bg' && definition.bg === 'provider') continue;\n\n      if ((config as any).dataAttribute) {\n        // eslint-disable-next-line no-restricted-syntax\n        dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);\n      }\n    }\n  }\n\n  // Provider: resolve bg and provide context for children\n  const providerBg = useBgProvider(\n    definition.bg === 'provider' ? ownPropsResolved.bg : undefined,\n  );\n\n  // Consumer: read parent context bg\n  const consumerBg = useBgConsumer();\n\n  // Provider: set data-bg from the resolved provider bg\n  if (definition.bg === 'provider' && providerBg.bg !== undefined) {\n    dataAttributes['data-bg'] = String(providerBg.bg);\n  }\n\n  // Consumer: set data-on-bg from the parent context\n  if (definition.bg === 'consumer' && consumerBg.bg !== undefined) {\n    dataAttributes['data-on-bg'] = String(consumerBg.bg);\n  }\n\n  const { utilityClasses, utilityStyle } = processUtilityProps<UtilityKeys<D>>(\n    props,\n    (definition.utilityProps ?? []) as readonly UtilityKeys<D>[],\n  );\n\n  // Analytics: conditionally call useAnalytics based on definition flag\n  let analytics = noopTracker;\n  if (definition.analytics) {\n    const tracker = useAnalytics();\n    analytics = ownPropsResolved.noTrack ? noopTracker : tracker;\n  }\n\n  const utilityTarget = options?.utilityTarget ?? 'root';\n  const classNameTarget = options?.classNameTarget ?? 'root';\n\n  const classes: Record<string, string> = {};\n\n  for (const [name, cssKey] of Object.entries(definition.classNames)) {\n    classes[name] = clsx(\n      cssKey as string,\n      definition.styles[cssKey as keyof typeof definition.styles],\n      utilityTarget === name && utilityClasses,\n      classNameTarget === name && ownPropsResolved.className,\n    );\n  }\n\n  let children: ReactNode | undefined;\n  let childrenWithBgProvider: ReactNode | undefined;\n\n  if (definition.bg === 'provider') {\n    childrenWithBgProvider = providerBg.bg ? (\n      <BgProvider bg={providerBg.bg}>{props.children}</BgProvider>\n    ) : (\n      props.children\n    );\n  } else {\n    children = props.children;\n  }\n\n  return {\n    ownProps: {\n      classes,\n      ...ownPropsResolved,\n      ...(definition.bg === 'provider'\n        ? { childrenWithBgProvider }\n        : { children }),\n    },\n    restProps,\n    dataAttributes,\n    utilityStyle,\n    ...(definition.analytics ? { analytics } : {}),\n  } as unknown as UseDefinitionResult<D, P>;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDefinition.esm.js","sources":["../../../src/hooks/useDefinition/useDefinition.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 { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useBreakpoint } from '../useBreakpoint';\nimport { useBgProvider, useBgConsumer, BgProvider } from '../useBg';\nimport { resolveDefinitionProps, processUtilityProps } from './helpers';\nimport { useAnalytics } from '../../analytics/useAnalytics';\nimport { noopTracker } from '../../analytics/useAnalytics';\nimport {\n  useResolvedPath,\n  useInRouterContext,\n  createPath,\n} from 'react-router-dom';\nimport { isExternalLink } from '../../utils/linkUtils';\nimport type {\n  ComponentConfig,\n  UseDefinitionOptions,\n  UseDefinitionResult,\n  UtilityKeys,\n} from './types';\n\nexport function useDefinition<\n  D extends ComponentConfig<any, any>,\n  P extends Record<string, any>,\n>(\n  definition: D,\n  props: P,\n  options?: UseDefinitionOptions<D>,\n): UseDefinitionResult<D, P> {\n  const { breakpoint } = useBreakpoint();\n\n  let hrefResolvedProps = props;\n  const hasRouter = useInRouterContext();\n  if (hasRouter) {\n    const rawHref = (props as any).href;\n    const resolved = useResolvedPath(rawHref ?? '');\n    if (rawHref !== undefined && !isExternalLink(rawHref)) {\n      hrefResolvedProps = { ...props, href: createPath(resolved) } as P;\n    }\n  }\n\n  // Resolve all props centrally — applies responsive values and defaults\n  const { ownPropsResolved, restProps } = resolveDefinitionProps(\n    definition,\n    hrefResolvedProps,\n    breakpoint,\n  );\n\n  const dataAttributes: Record<string, string | undefined> = {};\n\n  for (const [key, config] of Object.entries(definition.propDefs)) {\n    const finalValue = ownPropsResolved[key];\n\n    if (finalValue !== undefined) {\n      // Skip data-bg for bg prop when the provider path handles it\n      if (key === 'bg' && definition.bg === 'provider') continue;\n\n      if ((config as any).dataAttribute) {\n        // eslint-disable-next-line no-restricted-syntax\n        dataAttributes[`data-${key.toLowerCase()}`] = String(finalValue);\n      }\n    }\n  }\n\n  // Provider: resolve bg and provide context for children\n  const providerBg = useBgProvider(\n    definition.bg === 'provider' ? ownPropsResolved.bg : undefined,\n  );\n\n  // Consumer: read parent context bg\n  const consumerBg = useBgConsumer();\n\n  // Provider: set data-bg from the resolved provider bg\n  if (definition.bg === 'provider' && providerBg.bg !== undefined) {\n    dataAttributes['data-bg'] = String(providerBg.bg);\n  }\n\n  // Consumer: set data-on-bg from the parent context\n  if (definition.bg === 'consumer' && consumerBg.bg !== undefined) {\n    dataAttributes['data-on-bg'] = String(consumerBg.bg);\n  }\n\n  const { utilityClasses, utilityStyle } = processUtilityProps<UtilityKeys<D>>(\n    props,\n    (definition.utilityProps ?? []) as readonly UtilityKeys<D>[],\n  );\n\n  // Analytics: conditionally call useAnalytics based on definition flag\n  let analytics = noopTracker;\n  if (definition.analytics) {\n    const tracker = useAnalytics();\n    analytics = ownPropsResolved.noTrack ? noopTracker : tracker;\n  }\n\n  const utilityTarget =\n    options?.utilityTarget !== undefined ? options.utilityTarget : 'root';\n  const classNameTarget =\n    options?.classNameTarget !== undefined ? options.classNameTarget : 'root';\n\n  const classes: Record<string, string> = {};\n\n  for (const [name, cssKey] of Object.entries(definition.classNames)) {\n    classes[name] = clsx(\n      cssKey as string,\n      definition.styles[cssKey as keyof typeof definition.styles],\n      utilityTarget === name && utilityClasses,\n      classNameTarget === name && ownPropsResolved.className,\n    );\n  }\n\n  let children: ReactNode | undefined;\n  let childrenWithBgProvider: ReactNode | undefined;\n\n  if (definition.bg === 'provider') {\n    childrenWithBgProvider = providerBg.bg ? (\n      <BgProvider bg={providerBg.bg}>{props.children}</BgProvider>\n    ) : (\n      props.children\n    );\n  } else {\n    children = props.children;\n  }\n\n  return {\n    ownProps: {\n      classes,\n      ...ownPropsResolved,\n      ...(definition.bg === 'provider'\n        ? { childrenWithBgProvider }\n        : { children }),\n    },\n    restProps,\n    dataAttributes,\n    utilityStyle,\n    ...(definition.analytics ? { analytics } : {}),\n  } as unknown as UseDefinitionResult<D, P>;\n}\n"],"names":[],"mappings":"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"}