@backstage/ui 0.9.0 → 0.9.1-next.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @backstage/ui
 
+## 0.9.1-next.0
+
+### Patch Changes
+
+- b3ad928: Fixed Table Row component to correctly handle cases where no `href` is provided, preventing unnecessary router provider wrapping and fixing the cursor incorrectly showing as a pointer despite the element not being a link.
+
+  Affected components: Row
+
+- fe7c751: Fixed `useTable` hook to prioritize `providedRowCount` over data length for accurate row count in server-side pagination scenarios.
+- c145031: Fixed Table column sorting indicator to show up arrow when no sort is active, correctly indicating that clicking will sort ascending.
+
+  Affected components: Column
+
 ## 0.9.0
 
 ### Minor Changes

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

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

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

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

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

@@ -17,7 +17,7 @@ function Row(props) {
     selectionBehavior === "toggle" && /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection" }) }),
     /* @__PURE__ */ jsx(Collection, { items: columns, children })
   ] });
-  if (isExternal) {
+  if (!href || isExternal) {
     return /* @__PURE__ */ jsx(
       Row$1,
       {

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

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

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

@@ -15,7 +15,7 @@ function useTable(config = {}) {
     showPageSizeOptions = true
   } = paginationConfig;
   const isControlled = controlledOffset !== void 0 || controlledPageSize !== void 0;
-  const rowCount = data?.length ?? providedRowCount ?? 0;
+  const rowCount = providedRowCount ?? data?.length ?? 0;
   const [internalOffset, setInternalOffset] = useState(defaultOffset);
   const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
   const currentOffset = controlledOffset ?? internalOffset;

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 */\n\nimport { useState, useMemo, useCallback } from 'react';\nimport type { TablePaginationProps } from '../../TablePagination/types';\nimport type {\n  UseTableConfig,\n  UseTableResult,\n  UseTablePagination,\n} from './types';\n\n/**\n * Hook for managing table state including pagination and future features like sorting.\n * Supports both controlled and uncontrolled modes using offset/pageSize pattern (Backstage style).\n *\n * @public\n */\nexport function useTable<T = any>(\n  config: UseTableConfig<T> = {},\n): UseTableResult<T> {\n  const { data, pagination: paginationConfig = {} } = config;\n\n  const {\n    rowCount: providedRowCount,\n    offset: controlledOffset,\n    pageSize: controlledPageSize,\n    onOffsetChange,\n    onPageSizeChange,\n    defaultPageSize = 10,\n    defaultOffset = 0,\n    onNextPage,\n    onPreviousPage,\n    showPageSizeOptions = true,\n  } = paginationConfig;\n\n  // Determine if we're in controlled mode\n  const isControlled =\n    controlledOffset !== undefined || controlledPageSize !== undefined;\n\n  // Calculate row count from data or use provided value\n  const rowCount = data?.length ?? providedRowCount ?? 0;\n\n  // Internal state for uncontrolled mode\n  const [internalOffset, setInternalOffset] = useState(defaultOffset);\n  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);\n\n  // Calculate current values\n  const currentOffset = controlledOffset ?? internalOffset;\n  const currentPageSize = controlledPageSize ?? internalPageSize;\n\n  // Calculate sliced data if data array is provided\n  const currentData = useMemo(() => {\n    if (!data) return undefined;\n    return data.slice(currentOffset, currentOffset + currentPageSize);\n  }, [data, currentOffset, currentPageSize]);\n\n  // Update functions\n  const setOffset = useCallback(\n    (newOffset: number) => {\n      if (isControlled) {\n        onOffsetChange?.(newOffset);\n      } else {\n        setInternalOffset(newOffset);\n      }\n    },\n    [isControlled, onOffsetChange],\n  );\n\n  const setPageSize = useCallback(\n    (newPageSize: number) => {\n      // When changing page size, reset to first page to avoid showing empty results\n      const newOffset = 0;\n\n      if (isControlled) {\n        onPageSizeChange?.(newPageSize);\n        onOffsetChange?.(newOffset);\n      } else {\n        setInternalPageSize(newPageSize);\n        setInternalOffset(newOffset);\n      }\n    },\n    [isControlled, onPageSizeChange, onOffsetChange],\n  );\n\n  const nextPage = useCallback(() => {\n    const nextOffset = currentOffset + currentPageSize;\n    if (nextOffset < rowCount) {\n      onNextPage?.();\n      setOffset(nextOffset);\n    }\n  }, [currentOffset, currentPageSize, rowCount, onNextPage, setOffset]);\n\n  const previousPage = useCallback(() => {\n    if (currentOffset > 0) {\n      onPreviousPage?.();\n      const prevOffset = Math.max(0, currentOffset - currentPageSize);\n      setOffset(prevOffset);\n    }\n  }, [currentOffset, currentPageSize, onPreviousPage, setOffset]);\n\n  // Pagination props for TablePagination component\n  const paginationProps: TablePaginationProps = useMemo(\n    () => ({\n      offset: currentOffset,\n      pageSize: currentPageSize,\n      rowCount,\n      setOffset,\n      setPageSize,\n      onNextPage,\n      onPreviousPage,\n      showPageSizeOptions,\n    }),\n    [\n      currentOffset,\n      currentPageSize,\n      rowCount,\n      setOffset,\n      setPageSize,\n      onNextPage,\n      onPreviousPage,\n      showPageSizeOptions,\n    ],\n  );\n\n  const pagination: UseTablePagination<T> = useMemo(\n    () => ({\n      paginationProps,\n      offset: currentOffset,\n      pageSize: currentPageSize,\n      data: currentData,\n      nextPage,\n      previousPage,\n      setOffset,\n      setPageSize,\n    }),\n    [\n      paginationProps,\n      currentOffset,\n      currentPageSize,\n      currentData,\n      nextPage,\n      previousPage,\n      setOffset,\n      setPageSize,\n    ],\n  );\n\n  return {\n    data: currentData,\n    paginationProps,\n    pagination,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"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 */\n\nimport { useState, useMemo, useCallback } from 'react';\nimport type { TablePaginationProps } from '../../TablePagination/types';\nimport type {\n  UseTableConfig,\n  UseTableResult,\n  UseTablePagination,\n} from './types';\n\n/**\n * Hook for managing table state including pagination and future features like sorting.\n * Supports both controlled and uncontrolled modes using offset/pageSize pattern (Backstage style).\n *\n * @public\n */\nexport function useTable<T = any>(\n  config: UseTableConfig<T> = {},\n): UseTableResult<T> {\n  const { data, pagination: paginationConfig = {} } = config;\n\n  const {\n    rowCount: providedRowCount,\n    offset: controlledOffset,\n    pageSize: controlledPageSize,\n    onOffsetChange,\n    onPageSizeChange,\n    defaultPageSize = 10,\n    defaultOffset = 0,\n    onNextPage,\n    onPreviousPage,\n    showPageSizeOptions = true,\n  } = paginationConfig;\n\n  // Determine if we're in controlled mode\n  const isControlled =\n    controlledOffset !== undefined || controlledPageSize !== undefined;\n\n  // Use providedRowCount if passed, otherwise fallback to data length\n  const rowCount = providedRowCount ?? data?.length ?? 0;\n\n  // Internal state for uncontrolled mode\n  const [internalOffset, setInternalOffset] = useState(defaultOffset);\n  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);\n\n  // Calculate current values\n  const currentOffset = controlledOffset ?? internalOffset;\n  const currentPageSize = controlledPageSize ?? internalPageSize;\n\n  // Calculate sliced data if data array is provided\n  const currentData = useMemo(() => {\n    if (!data) return undefined;\n    return data.slice(currentOffset, currentOffset + currentPageSize);\n  }, [data, currentOffset, currentPageSize]);\n\n  // Update functions\n  const setOffset = useCallback(\n    (newOffset: number) => {\n      if (isControlled) {\n        onOffsetChange?.(newOffset);\n      } else {\n        setInternalOffset(newOffset);\n      }\n    },\n    [isControlled, onOffsetChange],\n  );\n\n  const setPageSize = useCallback(\n    (newPageSize: number) => {\n      // When changing page size, reset to first page to avoid showing empty results\n      const newOffset = 0;\n\n      if (isControlled) {\n        onPageSizeChange?.(newPageSize);\n        onOffsetChange?.(newOffset);\n      } else {\n        setInternalPageSize(newPageSize);\n        setInternalOffset(newOffset);\n      }\n    },\n    [isControlled, onPageSizeChange, onOffsetChange],\n  );\n\n  const nextPage = useCallback(() => {\n    const nextOffset = currentOffset + currentPageSize;\n    if (nextOffset < rowCount) {\n      onNextPage?.();\n      setOffset(nextOffset);\n    }\n  }, [currentOffset, currentPageSize, rowCount, onNextPage, setOffset]);\n\n  const previousPage = useCallback(() => {\n    if (currentOffset > 0) {\n      onPreviousPage?.();\n      const prevOffset = Math.max(0, currentOffset - currentPageSize);\n      setOffset(prevOffset);\n    }\n  }, [currentOffset, currentPageSize, onPreviousPage, setOffset]);\n\n  // Pagination props for TablePagination component\n  const paginationProps: TablePaginationProps = useMemo(\n    () => ({\n      offset: currentOffset,\n      pageSize: currentPageSize,\n      rowCount,\n      setOffset,\n      setPageSize,\n      onNextPage,\n      onPreviousPage,\n      showPageSizeOptions,\n    }),\n    [\n      currentOffset,\n      currentPageSize,\n      rowCount,\n      setOffset,\n      setPageSize,\n      onNextPage,\n      onPreviousPage,\n      showPageSizeOptions,\n    ],\n  );\n\n  const pagination: UseTablePagination<T> = useMemo(\n    () => ({\n      paginationProps,\n      offset: currentOffset,\n      pageSize: currentPageSize,\n      data: currentData,\n      nextPage,\n      previousPage,\n      setOffset,\n      setPageSize,\n    }),\n    [\n      paginationProps,\n      currentOffset,\n      currentPageSize,\n      currentData,\n      nextPage,\n      previousPage,\n      setOffset,\n      setPageSize,\n    ],\n  );\n\n  return {\n    data: currentData,\n    paginationProps,\n    pagination,\n  };\n}\n"],"names":[],"mappings":"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"}

package/package.json

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