@canonical/react-components 1.5.0 → 1.7.0

package/dist/esm/components/Strip/Strip.stories.js

@@ -0,0 +1,123 @@
+import React from "react";
+import Col from "../Col";
+import Row from "../Row";
+import Strip from "./Strip";
+var meta = {
+  component: Strip,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+export default meta;
+export var LightStrip = {
+  name: "Light strip",
+  args: {
+    type: "light",
+    children: /*#__PURE__*/React.createElement("p", null, "This is a light row")
+  }
+};
+export var DarkStrip = {
+  render: () => /*#__PURE__*/React.createElement(Strip, {
+    type: "dark"
+  }, /*#__PURE__*/React.createElement("p", null, "This is a dark row")),
+  name: "Dark strip"
+};
+export var AccentStrip = {
+  render: () => /*#__PURE__*/React.createElement(Strip, {
+    type: "accent",
+    element: "section",
+    includeCol: false
+  }, /*#__PURE__*/React.createElement(Col, {
+    size: 8
+  }, /*#__PURE__*/React.createElement("h1", null, "Still running Ubuntu 14.04 LTS?"), /*#__PURE__*/React.createElement("p", null, "Learn how to maintain ongoing security compliance for your Ubuntu 14.04 LTS systems.")), /*#__PURE__*/React.createElement(Col, {
+    size: 4
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "https://assets.ubuntu.com/v1/2217d1c8-Security.svg",
+    alt: "Placeholder"
+  }))),
+  name: "Accent strip"
+};
+export var ImageStrip = {
+  render: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strip, {
+    background: "https://assets.ubuntu.com/sites/ubuntu/latest/u/img/backgrounds/image-background-paper.png",
+    includeCol: false,
+    element: "section",
+    light: true,
+    rowClassName: "u-vertically-center",
+    type: "image"
+  }, /*#__PURE__*/React.createElement(Col, {
+    size: 8
+  }, /*#__PURE__*/React.createElement("h1", null, "Get started with big software, fast"), /*#__PURE__*/React.createElement("p", null, "conjure-up lets you summon up a big-software stack as a \u201Cspell\u201D \u2014 a model of the stack, combined with extra know-how to get you from an installed stack to a fully usable one. Start using your big software instead of learning how to deploy it.")), /*#__PURE__*/React.createElement(Col, {
+    size: 4,
+    className: "u-hide--small u-align--center"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "https://assets.ubuntu.com/v1/1abb8716-conjure-up-illustration.svg",
+    alt: "Placeholder"
+  }))), /*#__PURE__*/React.createElement(Strip, {
+    background: "https://assets.ubuntu.com/v1/9b68976e-Aubergine_suru_background_2.png",
+    dark: true,
+    includeCol: false,
+    element: "section",
+    type: "image"
+  }, /*#__PURE__*/React.createElement(Row, {
+    className: "u-vertically-center"
+  }, /*#__PURE__*/React.createElement(Col, {
+    size: 8
+  }, /*#__PURE__*/React.createElement("h1", null, "We are Canonical"), /*#__PURE__*/React.createElement("p", null, "It is our mission to make open source software available to people everywhere. We believe the best way to fuel innovation is to give the innovators the technology they need.")), /*#__PURE__*/React.createElement(Col, {
+    size: 4,
+    className: "u-hide--small u-align--center"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "https://assets.ubuntu.com/v1/9c74eb2d-logo-canonical-white.svg",
+    alt: "Placeholder"
+  }))))),
+  name: "Image strip"
+};
+export var BorderedStrip = {
+  render: () => /*#__PURE__*/React.createElement(Strip, {
+    bordered: true,
+    colSize: 8,
+    element: "section"
+  }, /*#__PURE__*/React.createElement("h2", null, "The node lifecycle"), /*#__PURE__*/React.createElement("p", null, "Each machine (\u201Cnode\u201D) managed by MAAS goes through a lifecycle \u2014 from its enlistment or onboarding to MAAS, through commissioning when we inventory and can setup firmware or other hardware-specific elements, then allocation to a user and deployment, and finally they are released back to the pool or retired altogether.")),
+  name: "Bordered strip"
+};
+export var DeepStrip = {
+  render: () => /*#__PURE__*/React.createElement(Strip, {
+    deep: true,
+    includeCol: false,
+    element: "section",
+    type: "light",
+    rowClassName: "u-vertically-center"
+  }, /*#__PURE__*/React.createElement(Col, {
+    size: 8
+  }, /*#__PURE__*/React.createElement("h2", null, "The fastest way to go from development to production in IoT"), /*#__PURE__*/React.createElement("p", null, "Learn about how Ubuntu Core and snaps can help you build your connected devices.")), /*#__PURE__*/React.createElement(Col, {
+    size: 4,
+    className: "u-hide--small u-align--center"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "https://assets.ubuntu.com/v1/808a4e5b-iot.png?h=300",
+    alt: "Placeholder"
+  }))),
+  name: "Deep strip"
+};
+export var ShallowStrip = {
+  render: () => /*#__PURE__*/React.createElement(Strip, {
+    shallow: true,
+    includeCol: false,
+    element: "section",
+    type: "light",
+    rowClassName: "u-vertically-center"
+  }, /*#__PURE__*/React.createElement(Col, {
+    size: 8
+  }, /*#__PURE__*/React.createElement("h2", null, "The fastest way to go from development to production in IoT"), /*#__PURE__*/React.createElement("p", null, "Learn about how Ubuntu Core and snaps can help you build your connected devices.")), /*#__PURE__*/React.createElement(Col, {
+    size: 4,
+    className: "u-hide--small u-align--center"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: "https://assets.ubuntu.com/v1/808a4e5b-iot.png?h=300",
+    alt: "Placeholder"
+  }))),
+  name: "Shallow strip"
+};

package/dist/esm/components/Strip/Strip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Strip/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Strip";
+export type { Props as StripProps } from "./Strip";

package/dist/esm/components/Strip/index.js

@@ -0,0 +1 @@
+export { default } from "./Strip";

package/dist/esm/components/SummaryButton/SummaryButton.d.ts

@@ -0,0 +1,29 @@
+import type { MouseEventHandler } from "react";
+import type { ClassName } from "../../types";
+export type Props = {
+    /**
+     * Optional class(es) to pass to the wrapping element.
+     */
+    className?: ClassName;
+    /**
+     * Whether the summary button is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * The label of the summary button.
+     */
+    label: string;
+    /**
+     * Function to handle clicking the summary button.
+     */
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * The summary content.
+     */
+    summary?: string;
+};
+/**
+ * `SummaryButton` is a component to render a short summary with an action button. It's initial use case is a summary of table contents with action to load more items.
+ */
+declare const SummaryButton: ({ className, isLoading, summary, label, onClick, }: Props) => JSX.Element;
+export default SummaryButton;

package/dist/esm/components/SummaryButton/SummaryButton.js

@@ -0,0 +1,28 @@
+import React from "react";
+import classNames from "classnames";
+import ActionButton from "../ActionButton";
+/**
+ * `SummaryButton` is a component to render a short summary with an action button. It's initial use case is a summary of table contents with action to load more items.
+ */
+var SummaryButton = _ref => {
+  var {
+    className,
+    isLoading,
+    summary,
+    label,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement("small", {
+    className: className
+  }, summary && /*#__PURE__*/React.createElement("span", {
+    className: "u-text--muted"
+  }, summary), onClick && /*#__PURE__*/React.createElement(ActionButton, {
+    className: classNames("is-small", "is-dense", {
+      "is-inline": summary
+    }),
+    onClick: onClick,
+    loading: isLoading,
+    disabled: isLoading
+  }, label));
+};
+export default SummaryButton;

package/dist/esm/components/SummaryButton/SummaryButton.stories.d.ts

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react";
+import SummaryButton from "./SummaryButton";
+declare const meta: Meta<typeof SummaryButton>;
+export default meta;
+type Story = StoryObj<typeof SummaryButton>;
+export declare const Default: Story;
+/**
+ * Summary text is optional.
+ */
+export declare const ActionOnly: Story;
+/**
+ * Action is optional as well. When `onClick` prop is not provided component will render just the summary text.
+ */
+export declare const SummaryOnly: Story;
+/**
+ * When data is loaded asynchronusly `isLoading` prop should be set to `true` to shows a spinner animation in place of the action button.
+ */
+export declare const Loading: Story;

package/dist/esm/components/SummaryButton/SummaryButton.stories.js

@@ -0,0 +1,52 @@
+import React from "react";
+import SummaryButton from "./SummaryButton";
+var doNothing = () => {};
+var meta = {
+  component: SummaryButton,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  render: () => /*#__PURE__*/React.createElement(SummaryButton, {
+    summary: "Showing 15 out of 100 items.",
+    label: "Show more",
+    onClick: doNothing
+  }),
+  name: "Default"
+};
+
+/**
+ * Summary text is optional.
+ */
+export var ActionOnly = {
+  render: () => /*#__PURE__*/React.createElement(SummaryButton, {
+    label: "Show more items",
+    onClick: doNothing
+  }),
+  name: "Action only"
+};
+
+/**
+ * Action is optional as well. When `onClick` prop is not provided component will render just the summary text.
+ */
+export var SummaryOnly = {
+  render: () => /*#__PURE__*/React.createElement(SummaryButton, {
+    summary: "Showing 100 out of 100 items.",
+    label: "Show more items",
+    onClick: doNothing
+  }),
+  name: "Summary only"
+};
+
+/**
+ * When data is loaded asynchronusly `isLoading` prop should be set to `true` to shows a spinner animation in place of the action button.
+ */
+export var Loading = {
+  render: () => /*#__PURE__*/React.createElement(SummaryButton, {
+    summary: "Showing 15 out of 100 items.",
+    label: "Show more",
+    isLoading: true,
+    onClick: doNothing
+  }),
+  name: "Loading"
+};

package/dist/esm/components/SummaryButton/SummaryButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SummaryButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./SummaryButton";
+export type { Props as SummaryButtonProps } from "./SummaryButton";

package/dist/esm/components/SummaryButton/index.js

@@ -0,0 +1 @@
+export { default } from "./SummaryButton";

package/dist/esm/components/Switch/Switch.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLProps, ReactNode } from "react";
+import type { PropsWithSpread } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * The label name for the switch
+     */
+    label: ReactNode;
+    /**
+     * Whether the switch is disabled or not
+     */
+    disabled?: boolean;
+}, HTMLProps<HTMLInputElement>>;
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
+ */
+export declare const Switch: ({ label, disabled, ...inputProps }: Props) => JSX.Element;
+export default Switch;

package/dist/esm/components/Switch/Switch.js

@@ -0,0 +1,28 @@
+var _excluded = ["label", "disabled"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+/**
+ * This is a [React](https://reactjs.org/) component for the Vanilla [Switch](https://vanillaframework.io/docs/patterns/switch) component.
+ */
+export var Switch = _ref => {
+  var {
+      label,
+      disabled = false
+    } = _ref,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("label", {
+    className: "p-switch"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    type: "checkbox",
+    className: "p-switch__input",
+    role: "switch",
+    disabled: disabled
+  }, inputProps)), /*#__PURE__*/React.createElement("span", {
+    className: "p-switch__slider"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "p-switch__label"
+  }, label));
+};
+export default Switch;

package/dist/esm/components/Switch/Switch.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Switch from "./Switch";
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof Switch>;
+export declare const Default: Story;
+export declare const Disabled: Story;

package/dist/esm/components/Switch/Switch.stories.js

@@ -0,0 +1,19 @@
+import Switch from "./Switch";
+var meta = {
+  component: Switch,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  name: "Default",
+  args: {
+    label: "Switch"
+  }
+};
+export var Disabled = {
+  name: "Disabled",
+  args: {
+    disabled: true,
+    label: "Disabled switch"
+  }
+};

package/dist/esm/components/Switch/Switch.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Switch";
+export type { Props as SwitchProps } from "./Switch";

package/dist/esm/components/Switch/index.js

@@ -0,0 +1 @@
+export { default } from "./Switch";

package/dist/esm/components/Table/Table.d.ts

@@ -0,0 +1,22 @@
+import { HTMLProps, ReactNode } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * The content of the table.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to pass to the wrapping table element.
+     */
+    className?: ClassName;
+    /**
+     * Whether the table can expand hidden cells.
+     */
+    expanding?: boolean;
+    /**
+     * Whether the table should show card styling on smaller screens.
+     */
+    responsive?: boolean;
+}, HTMLProps<HTMLTableElement>>;
+declare const Table: ({ children, className, expanding, responsive, ...props }: Props) => JSX.Element;
+export default Table;

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

@@ -0,0 +1,23 @@
+var _excluded = ["children", "className", "expanding", "responsive"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+var Table = _ref => {
+  var {
+      children,
+      className,
+      expanding = false,
+      responsive = false
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("table", _extends({
+    role: "grid",
+    className: classNames(className, {
+      "p-table--mobile-card": responsive,
+      "p-table--expanding": expanding
+    })
+  }, props), children);
+};
+export default Table;

package/dist/esm/components/Table/Table.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Table";
+export type { Props as TableProps } from "./Table";

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

@@ -0,0 +1 @@
+export { default } from "./Table";

package/dist/esm/components/TableCell/TableCell.d.ts

@@ -0,0 +1,26 @@
+import { HTMLProps, ReactNode } from "react";
+import type { ClassName, PropsWithSpread } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * The content of the table cell.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to pass to the wrapping td element.
+     */
+    className?: ClassName;
+    /**
+     * Whether the cell is an expanded cell.
+     */
+    expanding?: boolean;
+    /**
+     * Whether content of the cell should be able to overflow, e.g. a dropdown.
+     */
+    hasOverflow?: boolean;
+    /**
+     * Whether the cell is currently hidden.
+     */
+    hidden?: boolean;
+}, HTMLProps<HTMLTableCellElement>>;
+declare const TableCell: ({ children, className, hasOverflow, expanding, hidden, role, ...props }: Props) => JSX.Element;
+export default TableCell;

package/dist/esm/components/TableCell/TableCell.js

@@ -0,0 +1,26 @@
+var _excluded = ["children", "className", "hasOverflow", "expanding", "hidden", "role"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import classNames from "classnames";
+import React from "react";
+var TableCell = _ref => {
+  var {
+      children,
+      className,
+      hasOverflow = false,
+      expanding = false,
+      hidden = false,
+      role = "gridcell"
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("td", _extends({
+    role: role,
+    "aria-hidden": hidden,
+    className: classNames(className, {
+      "p-table__expanding-panel": expanding,
+      "has-overflow": hasOverflow
+    })
+  }, props), children);
+};
+export default TableCell;

package/dist/esm/components/TableCell/TableCell.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/TableCell/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TableCell";
+export type { Props as TableCellProps } from "./TableCell";

package/dist/esm/components/TableCell/index.js

@@ -0,0 +1 @@
+export { default } from "./TableCell";

package/dist/esm/components/TableHeader/TableHeader.d.ts

@@ -0,0 +1,14 @@
+import { HTMLProps, ReactNode } from "react";
+import { PropsWithSpread, SortDirection } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * The content of the table header.
+     */
+    children?: ReactNode;
+    /**
+     * The direction of sorting, if applicable.
+     */
+    sort?: SortDirection;
+}, HTMLProps<HTMLTableHeaderCellElement>>;
+declare const TableHeader: ({ children, sort, ...props }: Props) => JSX.Element;
+export default TableHeader;

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

@@ -0,0 +1,17 @@
+var _excluded = ["children", "sort"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+import React from "react";
+var TableHeader = _ref => {
+  var {
+      children,
+      sort
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("th", _extends({
+    role: "columnheader",
+    "aria-sort": sort
+  }, props), children);
+};
+export default TableHeader;

package/dist/esm/components/TableHeader/TableHeader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/TableHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./TableHeader";
+export type { Props as TableHeaderProps } from "./TableHeader";

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

@@ -0,0 +1 @@
+export { default } from "./TableHeader";

package/dist/esm/components/TablePagination/TablePagination.d.ts

@@ -0,0 +1,98 @@
+import React, { HTMLAttributes, PropsWithChildren, ReactNode } from "react";
+import "./TablePagination.scss";
+export type BasePaginationProps = {
+    /**
+     * list of data elements to be paginated. This component is un-opinionated about
+     * the structure of the data but it should be identical to the data structure
+     * required by the child table component
+     */
+    data: unknown[];
+    /**
+     * prop name of the child table component that receives paginated data.
+     * default value is set to `rows`, which is the data prop for the `MainTable` component
+     */
+    dataForwardProp?: string;
+    /**
+     * the name of the item associated to each row within the table.
+     */
+    itemName?: string;
+    /**
+     * custom styling for the pagination container
+     */
+    className?: string;
+    /**
+     * custom description to be displayed by the pagination
+     */
+    description?: ReactNode;
+    /**
+     * custom per page limits express as an array of numbers.
+     */
+    pageLimits?: number[];
+    /**
+     * place the pagination component above or below the table?
+     */
+    position?: "above" | "below";
+};
+export type ExternalControlProps = BasePaginationProps & {
+    /**
+     * Whether the component will be controlled via external state.
+     */
+    externallyControlled?: true;
+    /**
+     * the total number of items available within the data. This prop is only relevant
+     * and will be required if `externallyControlled` is set to `true`.
+     */
+    totalItems: number;
+    /**
+     * the current page that's showing. This prop is only relevant and will be required
+     * if `externallyControlled` is set to `true`.
+     */
+    currentPage: number;
+    /**
+     * size per page. This prop is only relevant and will be required if
+     * `externallyControlled` is set to `true`.
+     */
+    pageSize: number;
+    /**
+     * callback indicating a page change event to the parent component.
+     * This prop is only relevant and will be required if `externallyControlled` is set
+     * to `true`.
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * callback indicating a page size change event to the parent component.
+     * This prop is only relevant and will be required if `externallyControlled` is set
+     * to `true`.
+     */
+    onPageSizeChange: (pageSize: number) => void;
+};
+export type InternalControlProps = BasePaginationProps & {
+    /**
+     * Whether the component will be controlled via external state.
+     */
+    externallyControlled?: false;
+};
+export type Props = PropsWithChildren<ExternalControlProps | InternalControlProps> & HTMLAttributes<HTMLDivElement>;
+/**
+This is an HOC [React](https://reactjs.org/) component for applying pagination to direct children components. This component is un-opinionated about
+the structure of the input data and can be used with any child component that displays a list of data. However, the styling and behaviour of this component were designed
+to work nicely with the `MainTable` component. To use this component, simply wrap a child component with it and provide the data that you want
+to paginate to the `data` prop. This component will then pass the paged data to all <b>direct</b> child components via a child prop specified by `dataForwardProp`.
+The component may be externally controlled, see following sections for detailed explanation.
+
+#### Externally controlled pagination
+
+For externally controlled mode, you will be responsible for the pagination logic and therefore the component will be purely presentational.
+The pagination behaviour is controlled outside of this component. Note the data injection to child components is essentially a passthrough in this case.
+To enable externally controlled mode for this component, set the `externallyControlled` prop to `true`. From there, it is your responsibility
+to ensure that the following props `totalItems`, `currentPage`, `pageSize`, `onPageChange` and `onPageSizeChange` are set properly.
+You can refer to the props table below on how to set these props.
+
+#### Un-controlled pagination
+
+In this mode, the component assumes that the input data is not paginated. The component will implement the pagination logic and apply it to the input data
+then inject the paged data into direct child components. This is the default mode of operations for the component where `externallyControlled` prop is set
+to `false`.
+ */
+declare const TablePagination: (props: Props) => React.JSX.Element;
+export default TablePagination;