@backstage/ui 0.7.0-next.2 → 0.7.0-next.3

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

@@ -0,0 +1,38 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useTableOptions, Row as Row$1, RouterProvider, Cell, Checkbox, Collection } from 'react-aria-components';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+import { useNavigate, useHref } from 'react-router-dom';
+import { isExternalLink } from '../../../utils/isExternalLink.esm.js';
+
+function Row({
+  id,
+  columns,
+  children,
+  href,
+  ...otherProps
+}) {
+  const { classNames } = useStyles("Table");
+  const navigate = useNavigate();
+  const isExternal = isExternalLink(href);
+  let { selectionBehavior } = useTableOptions();
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    selectionBehavior === "toggle" && /* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx(Checkbox, { slot: "selection" }) }),
+    /* @__PURE__ */ jsx(Collection, { items: columns, children })
+  ] });
+  if (isExternal) {
+    return /* @__PURE__ */ jsx(Row$1, { id, className: classNames.row, ...otherProps, children: content });
+  }
+  return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx(
+    Row$1,
+    {
+      id,
+      className: classNames.row,
+      "data-react-aria-pressable": "true",
+      ...otherProps,
+      children: content
+    }
+  ) });
+}
+
+export { Row };
+//# sourceMappingURL=Row.esm.js.map

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

@@ -0,0 +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 { useNavigate } from 'react-router-dom';\nimport { useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../../utils/isExternalLink';\n\n/** @public */\nexport function Row<T extends object>({\n  id,\n  columns,\n  children,\n  href,\n  ...otherProps\n}: RowProps<T>) {\n  const { classNames } = useStyles('Table');\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 id={id} className={classNames.row} {...otherProps}>\n        {content}\n      </ReactAriaRow>\n    );\n  }\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <ReactAriaRow\n        id={id}\n        className={classNames.row}\n        data-react-aria-pressable=\"true\"\n        {...otherProps}\n      >\n        {content}\n      </ReactAriaRow>\n    </RouterProvider>\n  );\n}\n"],"names":["ReactAriaRow"],"mappings":";;;;;;AA+BO,SAAS,GAAsB,CAAA;AAAA,EACpC,EAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAgB,EAAA;AACd,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AACxC,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAI,IAAA,EAAE,iBAAkB,EAAA,GAAI,eAAgB,EAAA;AAE5C,EAAA,MAAM,0BAED,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,iBAAA,KAAsB,4BACpB,GAAA,CAAA,IAAA,EAAA,EACC,8BAAC,QAAS,EAAA,EAAA,IAAA,EAAK,aAAY,CAC7B,EAAA,CAAA;AAAA,oBAED,GAAA,CAAA,UAAA,EAAA,EAAW,KAAO,EAAA,OAAA,EAAU,QAAS,EAAA;AAAA,GACxC,EAAA,CAAA;AAGF,EAAA,IAAI,UAAY,EAAA;AACd,IACE,uBAAA,GAAA,CAACA,SAAa,EAAQ,EAAA,SAAA,EAAW,WAAW,GAAM,EAAA,GAAG,YAClD,QACH,EAAA,OAAA,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAoB,OAClC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,WAAW,UAAW,CAAA,GAAA;AAAA,MACtB,2BAA0B,EAAA,MAAA;AAAA,MACzB,GAAG,UAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+import { Table as Table$1 } from 'react-aria-components';
+
+const Table = (props) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx(
+    Table$1,
+    {
+      className: classNames.table,
+      "aria-label": "Data table",
+      ...props
+    }
+  );
+};
+
+export { Table };
+//# sourceMappingURL=Table.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.esm.js","sources":["../../../../src/components/Table/components/Table.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useStyles } from '../../../hooks/useStyles';\nimport {\n  Table as ReactAriaTable,\n  type TableProps,\n} from 'react-aria-components';\n\n/** @public */\nexport const Table = (props: TableProps) => {\n  const { classNames } = useStyles('Table');\n\n  return (\n    <ReactAriaTable\n      className={classNames.table}\n      aria-label=\"Data table\"\n      {...props}\n    />\n  );\n};\n"],"names":["ReactAriaTable"],"mappings":";;;;AAuBa,MAAA,KAAA,GAAQ,CAAC,KAAsB,KAAA;AAC1C,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,EACE,uBAAA,GAAA;AAAA,IAACA,OAAA;AAAA,IAAA;AAAA,MACC,WAAW,UAAW,CAAA,KAAA;AAAA,MACtB,YAAW,EAAA,YAAA;AAAA,MACV,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { TableBody as TableBody$1 } from 'react-aria-components';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+
+const TableBody = (props) => {
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsx(TableBody$1, { className: classNames.body, ...props });
+};
+
+export { TableBody };
+//# sourceMappingURL=TableBody.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.esm.js","sources":["../../../../src/components/Table/components/TableBody.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  TableBody as ReactAriaTableBody,\n  type TableBodyProps,\n} from 'react-aria-components';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nexport const TableBody = <T extends object>(props: TableBodyProps<T>) => {\n  const { classNames } = useStyles('Table');\n\n  return <ReactAriaTableBody className={classNames.body} {...props} />;\n};\n"],"names":["ReactAriaTableBody"],"mappings":";;;;AAuBa,MAAA,SAAA,GAAY,CAAmB,KAA6B,KAAA;AACvE,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,EAAA,2BAAQA,WAAmB,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,IAAA,EAAO,GAAG,KAAO,EAAA,CAAA;AACpE;;;;"}

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

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useTableOptions, TableHeader as TableHeader$1, Checkbox, Collection } from 'react-aria-components';
+import { Column } from './Column.esm.js';
+import { useStyles } from '../../../hooks/useStyles.esm.js';
+
+const TableHeader = ({
+  columns,
+  children
+}) => {
+  let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();
+  const { classNames } = useStyles("Table");
+  return /* @__PURE__ */ jsxs(TableHeader$1, { className: classNames.header, children: [
+    allowsDragging && /* @__PURE__ */ jsx(Column, {}),
+    selectionBehavior === "toggle" && /* @__PURE__ */ jsx(Column, { children: selectionMode === "multiple" && /* @__PURE__ */ jsx(Checkbox, { slot: "selection" }) }),
+    /* @__PURE__ */ jsx(Collection, { items: columns, children })
+  ] });
+};
+
+export { TableHeader };
+//# sourceMappingURL=TableHeader.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.esm.js","sources":["../../../../src/components/Table/components/TableHeader.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  TableHeader as ReactAriaTableHeader,\n  type TableHeaderProps,\n  Checkbox,\n} from 'react-aria-components';\nimport { Collection, useTableOptions } from 'react-aria-components';\nimport { Column } from './Column';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nexport const TableHeader = <T extends object>({\n  columns,\n  children,\n}: TableHeaderProps<T>) => {\n  let { selectionBehavior, selectionMode, allowsDragging } = useTableOptions();\n\n  const { classNames } = useStyles('Table');\n\n  return (\n    <ReactAriaTableHeader className={classNames.header}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <Column />}\n      {selectionBehavior === 'toggle' && (\n        <Column>\n          {selectionMode === 'multiple' && <Checkbox slot=\"selection\" />}\n        </Column>\n      )}\n      <Collection items={columns}>{children}</Collection>\n    </ReactAriaTableHeader>\n  );\n};\n"],"names":["ReactAriaTableHeader"],"mappings":";;;;;AA0BO,MAAM,cAAc,CAAmB;AAAA,EAC5C,OAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAA,IAAI,EAAE,iBAAA,EAAmB,aAAe,EAAA,cAAA,KAAmB,eAAgB,EAAA;AAE3E,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,EAAA,uBACG,IAAA,CAAAA,aAAA,EAAA,EAAqB,SAAW,EAAA,UAAA,CAAW,MAEzC,EAAA,QAAA,EAAA;AAAA,IAAA,cAAA,wBAAmB,MAAO,EAAA,EAAA,CAAA;AAAA,IAC1B,iBAAA,KAAsB,QACrB,oBAAA,GAAA,CAAC,MACE,EAAA,EAAA,QAAA,EAAA,aAAA,KAAkB,8BAAe,GAAA,CAAA,QAAA,EAAA,EAAS,IAAK,EAAA,WAAA,EAAY,CAC9D,EAAA,CAAA;AAAA,oBAED,GAAA,CAAA,UAAA,EAAA,EAAW,KAAO,EAAA,OAAA,EAAU,QAAS,EAAA;AAAA,GACxC,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,116 @@
+import { useState, useMemo, useCallback } from 'react';
+
+function useTable(config = {}) {
+  const { data, pagination: paginationConfig = {} } = config;
+  const {
+    rowCount: providedRowCount,
+    offset: controlledOffset,
+    pageSize: controlledPageSize,
+    onOffsetChange,
+    onPageSizeChange,
+    defaultPageSize = 10,
+    defaultOffset = 0,
+    onNextPage,
+    onPreviousPage,
+    showPageSizeOptions = true
+  } = paginationConfig;
+  const isControlled = controlledOffset !== void 0 || controlledPageSize !== void 0;
+  const rowCount = data?.length ?? providedRowCount ?? 0;
+  const [internalOffset, setInternalOffset] = useState(defaultOffset);
+  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+  const currentOffset = controlledOffset ?? internalOffset;
+  const currentPageSize = controlledPageSize ?? internalPageSize;
+  const currentData = useMemo(() => {
+    if (!data) return void 0;
+    return data.slice(currentOffset, currentOffset + currentPageSize);
+  }, [data, currentOffset, currentPageSize]);
+  const setOffset = useCallback(
+    (newOffset) => {
+      if (isControlled) {
+        onOffsetChange?.(newOffset);
+      } else {
+        setInternalOffset(newOffset);
+      }
+    },
+    [isControlled, onOffsetChange]
+  );
+  const setPageSize = useCallback(
+    (newPageSize) => {
+      const newOffset = 0;
+      if (isControlled) {
+        onPageSizeChange?.(newPageSize);
+        onOffsetChange?.(newOffset);
+      } else {
+        setInternalPageSize(newPageSize);
+        setInternalOffset(newOffset);
+      }
+    },
+    [isControlled, onPageSizeChange, onOffsetChange]
+  );
+  const nextPage = useCallback(() => {
+    const nextOffset = currentOffset + currentPageSize;
+    if (nextOffset < rowCount) {
+      onNextPage?.();
+      setOffset(nextOffset);
+    }
+  }, [currentOffset, currentPageSize, rowCount, onNextPage, setOffset]);
+  const previousPage = useCallback(() => {
+    if (currentOffset > 0) {
+      onPreviousPage?.();
+      const prevOffset = Math.max(0, currentOffset - currentPageSize);
+      setOffset(prevOffset);
+    }
+  }, [currentOffset, currentPageSize, onPreviousPage, setOffset]);
+  const paginationProps = useMemo(
+    () => ({
+      offset: currentOffset,
+      pageSize: currentPageSize,
+      rowCount,
+      setOffset,
+      setPageSize,
+      onNextPage,
+      onPreviousPage,
+      showPageSizeOptions
+    }),
+    [
+      currentOffset,
+      currentPageSize,
+      rowCount,
+      setOffset,
+      setPageSize,
+      onNextPage,
+      onPreviousPage,
+      showPageSizeOptions
+    ]
+  );
+  const pagination = useMemo(
+    () => ({
+      paginationProps,
+      offset: currentOffset,
+      pageSize: currentPageSize,
+      data: currentData,
+      nextPage,
+      previousPage,
+      setOffset,
+      setPageSize
+    }),
+    [
+      paginationProps,
+      currentOffset,
+      currentPageSize,
+      currentData,
+      nextPage,
+      previousPage,
+      setOffset,
+      setPageSize
+    ]
+  );
+  return {
+    data: currentData,
+    paginationProps,
+    pagination
+  };
+}
+
+export { useTable };
+//# sourceMappingURL=useTable.esm.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,130 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '../Icon/context.esm.js';
+import '../Box/Box.esm.js';
+import '../Grid/Grid.esm.js';
+import '../Flex/Flex.esm.js';
+import '../Container/Container.esm.js';
+import '../Avatar/Avatar.esm.js';
+import '../Button/Button.esm.js';
+import '../Card/Card.esm.js';
+import '../Collapsible/Collapsible.esm.js';
+import '../FieldLabel/FieldLabel.esm.js';
+import '../Header/HeaderToolbar.esm.js';
+import '../Tabs/Tabs.esm.js';
+import 'react';
+import '../HeaderPage/HeaderPage.esm.js';
+import '@remixicon/react';
+import { Icon } from '../Icon/Icon.esm.js';
+import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
+import '../ButtonLink/ButtonLink.esm.js';
+import '../Checkbox/Checkbox.esm.js';
+import '../RadioGroup/RadioGroup.esm.js';
+import 'react-aria-components';
+import 'react-router-dom';
+import '../Table/components/Cell.esm.js';
+import { Text } from '../Text/Text.esm.js';
+import '../Link/Link.esm.js';
+import '@base-ui-components/react/avatar';
+import '../TextField/TextField.esm.js';
+import '../Tooltip/Tooltip.esm.js';
+import '../Menu/Menu.esm.js';
+import '../ScrollArea/ScrollArea.esm.js';
+import '../SearchField/SearchField.esm.js';
+import { Select } from '../Select/Select.esm.js';
+import '../Switch/Switch.esm.js';
+
+function TablePagination(props) {
+  const {
+    className,
+    offset,
+    pageSize,
+    rowCount,
+    onNextPage,
+    onPreviousPage,
+    onPageSizeChange,
+    setOffset,
+    setPageSize,
+    showPageSizeOptions = true,
+    ...rest
+  } = props;
+  const currentOffset = offset ?? 0;
+  const currentPageSize = pageSize ?? 10;
+  const fromCount = currentOffset + 1;
+  const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);
+  const nextPage = () => {
+    const totalRows = rowCount ?? 0;
+    const nextOffset = currentOffset + currentPageSize;
+    if (nextOffset < totalRows) {
+      onNextPage?.();
+      setOffset?.(nextOffset);
+    }
+  };
+  const previousPage = () => {
+    if (currentOffset > 0) {
+      onPreviousPage?.();
+      const prevOffset = Math.max(0, currentOffset - currentPageSize);
+      setOffset?.(prevOffset);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: clsx("bui-DataTablePagination", className), ...rest, children: [
+    /* @__PURE__ */ jsx("div", { className: "bui-DataTablePagination--left", children: showPageSizeOptions && /* @__PURE__ */ jsx(
+      Select,
+      {
+        name: "pageSize",
+        size: "small",
+        placeholder: "Show 10 results",
+        options: [
+          { label: "Show 5 results", value: "5" },
+          { label: "Show 10 results", value: "10" },
+          { label: "Show 20 results", value: "20" },
+          { label: "Show 30 results", value: "30" },
+          { label: "Show 40 results", value: "40" },
+          { label: "Show 50 results", value: "50" }
+        ],
+        selectedKey: pageSize?.toString(),
+        onSelectionChange: (value) => {
+          const newPageSize = Number(value);
+          setPageSize?.(newPageSize);
+          onPageSizeChange?.(newPageSize);
+        },
+        className: "bui-DataTablePagination--select"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "bui-DataTablePagination--right", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "p",
+          variant: "body-medium",
+          children: `${fromCount} - ${toCount} of ${rowCount}`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          variant: "secondary",
+          size: "small",
+          onClick: previousPage,
+          isDisabled: currentOffset === 0,
+          icon: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" }),
+          "aria-label": "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          variant: "secondary",
+          size: "small",
+          onClick: nextPage,
+          isDisabled: rowCount !== void 0 && currentOffset + currentPageSize >= rowCount,
+          icon: /* @__PURE__ */ jsx(Icon, { name: "chevron-right" }),
+          "aria-label": "Next"
+        }
+      )
+    ] })
+  ] });
+}
+
+export { TablePagination };
+//# sourceMappingURL=TablePagination.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.esm.js","sources":["../../../src/components/TablePagination/TablePagination.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { Text, ButtonIcon, Select, Icon } from '../..';\nimport type { TablePaginationProps } from './types';\n\n/**\n * Pagination controls for Table components with page navigation and size selection.\n *\n * @public\n */\nexport function TablePagination(props: TablePaginationProps) {\n  const {\n    className,\n    offset,\n    pageSize,\n    rowCount,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    setOffset,\n    setPageSize,\n    showPageSizeOptions = true,\n    ...rest\n  } = props;\n\n  const currentOffset = offset ?? 0;\n  const currentPageSize = pageSize ?? 10;\n\n  const fromCount = currentOffset + 1;\n  const toCount = Math.min(currentOffset + currentPageSize, rowCount ?? 0);\n\n  const nextPage = () => {\n    const totalRows = rowCount ?? 0;\n    const nextOffset = currentOffset + currentPageSize;\n\n    // Check if there are more items to navigate to\n    if (nextOffset < totalRows) {\n      onNextPage?.(); // Analytics tracking\n      setOffset?.(nextOffset); // Navigate to next page\n    }\n  };\n\n  const previousPage = () => {\n    // Check if we can go to previous page\n    if (currentOffset > 0) {\n      onPreviousPage?.(); // Analytics tracking\n      const prevOffset = Math.max(0, currentOffset - currentPageSize);\n      setOffset?.(prevOffset); // Navigate to previous page\n    }\n  };\n\n  return (\n    <div className={clsx('bui-DataTablePagination', className)} {...rest}>\n      <div className=\"bui-DataTablePagination--left\">\n        {showPageSizeOptions && (\n          <Select\n            name=\"pageSize\"\n            size=\"small\"\n            placeholder=\"Show 10 results\"\n            options={[\n              { label: 'Show 5 results', value: '5' },\n              { label: 'Show 10 results', value: '10' },\n              { label: 'Show 20 results', value: '20' },\n              { label: 'Show 30 results', value: '30' },\n              { label: 'Show 40 results', value: '40' },\n              { label: 'Show 50 results', value: '50' },\n            ]}\n            selectedKey={pageSize?.toString()}\n            onSelectionChange={value => {\n              const newPageSize = Number(value);\n              setPageSize?.(newPageSize);\n              onPageSizeChange?.(newPageSize);\n            }}\n            className=\"bui-DataTablePagination--select\"\n          />\n        )}\n      </div>\n      <div className=\"bui-DataTablePagination--right\">\n        <Text\n          as=\"p\"\n          variant=\"body-medium\"\n        >{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={previousPage}\n          isDisabled={currentOffset === 0}\n          icon={<Icon name=\"chevron-left\" />}\n          aria-label=\"Previous\"\n        />\n        <ButtonIcon\n          variant=\"secondary\"\n          size=\"small\"\n          onClick={nextPage}\n          isDisabled={\n            rowCount !== undefined &&\n            currentOffset + currentPageSize >= rowCount\n          }\n          icon={<Icon name=\"chevron-right\" />}\n          aria-label=\"Next\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}