@canonical/react-components 1.1.0 → 1.2.1

package/README.md

@@ -41,13 +41,13 @@ You might want to:
 
 You may wish to link this library directly to your projects while developing locally.
 
-You can do this by cloning this repo to your local workspace;
+You can do this by cloning this repo to your local workspace:
 
 ```shell
 git clone https://github.com/canonical/react-components
 ```
 
-If you then drop into that folder and run;
+If you then drop into that folder and run:
 
 ```shell
 yarn run link-packages
@@ -55,7 +55,7 @@ yarn run link-packages
 
 ...this will add this project, `react` and `react-dom` to a local yarn registry.
 
-Switching back to the project you are developing, run;
+Switching back to the project you are developing, run:
 
 ```shell
 yarn install
@@ -66,7 +66,7 @@ yarn link @canonical/react-components
 
 ...to pull the linked deps from the local registry. If you now run `yarn build-watch` in your `react-components` folder, your project should pick up any changes on refresh or hot module reload.
 
-**Note:** When you're finished working locally - don't forget to go back and unlink;
+**Note:** When you're finished working locally - don't forget to go back and unlink:
 
 ```
 cd react-components

package/dist/components/ContextualMenu/ContextualMenu.d.ts

@@ -1,17 +1,13 @@
 import React from "react";
-import type { HTMLProps } from "react";
+import type { HTMLProps, ReactNode } from "react";
 import type { ButtonProps } from "../Button";
 import type { ContextualMenuDropdownProps } from "./ContextualMenuDropdown";
 import type { MenuLink, Position } from "./ContextualMenuDropdown";
-import { ClassName, PropsWithSpread, SubComponentProps } from "../../types";
+import { ClassName, ExclusiveProps, PropsWithSpread, SubComponentProps } from "../../types";
 export declare enum Label {
     Toggle = "Toggle menu"
 }
-/**
- * The props for the ContextualMenu component.
- * @template L - The type of the link props.
- */
-export type Props<L> = PropsWithSpread<{
+export type BaseProps<L> = PropsWithSpread<{
     /**
      * Whether the menu should adjust its horizontal position to fit on the screen.
      */
@@ -44,10 +40,6 @@ export type Props<L> = PropsWithSpread<{
      * Additional props to pass to the dropdown.
      */
     dropdownProps?: SubComponentProps<ContextualMenuDropdownProps>;
-    /**
-     * Whether the toggle should display a chevron icon.
-     */
-    hasToggleIcon?: boolean;
     /**
      * A list of links to display in the menu (if the children prop is not supplied.)
      */
@@ -68,6 +60,20 @@ export type Props<L> = PropsWithSpread<{
      * Whether the dropdown should scroll if it is too long to fit on the screen.
      */
     scrollOverflow?: boolean;
+    /**
+     * Whether the menu should be visible.
+     */
+    visible?: boolean;
+}, HTMLProps<HTMLSpanElement>>;
+/**
+ * The props for the ContextualMenu component.
+ * @template L - The type of the link props.
+ */
+export type Props<L> = BaseProps<L> & ExclusiveProps<{
+    /**
+     * Whether the toggle should display a chevron icon.
+     */
+    hasToggleIcon?: boolean;
     /**
      * The appearance of the toggle button.
      */
@@ -92,15 +98,13 @@ export type Props<L> = PropsWithSpread<{
      * Additional props to pass to the toggle button.
      */
     toggleProps?: SubComponentProps<ButtonProps>;
-    /**
-     * Whether the menu should be visible.
-     */
-    visible?: boolean;
-}, HTMLProps<HTMLSpanElement>>;
+}, {
+    toggle: ReactNode;
+}>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Contextual menu](https://docs.vanillaframework.io/patterns//contextual-menu/).
  *
  * A contextual menu can be used in conjunction with any page element to provide a contextual menu.
  */
-declare const ContextualMenu: <L>({ autoAdjust, children, className, closeOnEsc, closeOnOutsideClick, constrainPanelWidth, dropdownClassName, dropdownProps, hasToggleIcon, links, onToggleMenu, position, positionNode, scrollOverflow, toggleAppearance, toggleClassName, toggleDisabled, toggleLabel, toggleLabelFirst, toggleProps, visible, ...wrapperProps }: Props<L>) => JSX.Element;
+declare const ContextualMenu: <L>({ autoAdjust, children, className, closeOnEsc, closeOnOutsideClick, constrainPanelWidth, dropdownClassName, dropdownProps, hasToggleIcon, links, onToggleMenu, position, positionNode, scrollOverflow, toggle, toggleAppearance, toggleClassName, toggleDisabled, toggleLabel, toggleLabelFirst, toggleProps, visible, ...wrapperProps }: Props<L>) => JSX.Element;
 export default ContextualMenu;

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -69,6 +69,7 @@ const ContextualMenu = _ref => {
     position = "right",
     positionNode,
     scrollOverflow,
+    toggle,
     toggleAppearance,
     toggleClassName,
     toggleDisabled,
@@ -82,7 +83,6 @@ const ContextualMenu = _ref => {
   const wrapper = (0, _react.useRef)(null);
   const [positionCoords, setPositionCoords] = (0, _react.useState)();
   const [adjustedPosition, setAdjustedPosition] = (0, _react.useState)(position);
-  const hasToggle = hasToggleIcon || toggleLabel;
   (0, _react.useEffect)(() => {
     setAdjustedPosition(position);
   }, [position, autoAdjust]);
@@ -106,14 +106,15 @@ const ContextualMenu = _ref => {
     isOpen: visible,
     onOpen: () => {
       // Call the toggle callback, if supplied.
-      onToggleMenu && onToggleMenu(true);
+      onToggleMenu === null || onToggleMenu === void 0 || onToggleMenu(true);
       // When the menu opens then update the coordinates of the parent.
       updatePositionCoords();
     },
     onClose: () => {
       // Call the toggle callback, if supplied.
-      onToggleMenu && onToggleMenu(false);
-    }
+      onToggleMenu === null || onToggleMenu === void 0 || onToggleMenu(false);
+    },
+    programmaticallyOpen: true
   });
   const previousVisible = (0, _hooks.usePrevious)(visible);
   const labelNode = toggleLabel && typeof toggleLabel === "string" ? /*#__PURE__*/_react.default.createElement("span", null, toggleLabel) : /*#__PURE__*/_react.default.isValidElement(toggleLabel) ? toggleLabel : null;
@@ -166,32 +167,38 @@ const ContextualMenu = _ref => {
   }, [positionNode, updatePositionCoords]);
   (0, _hooks.useListener)(window, onResize, "resize", true, isOpen);
   (0, _hooks.useListener)(window, onScroll, "scroll", false, isOpen, true);
+  let toggleNode = null;
+  if (toggle) {
+    toggleNode = toggle;
+  } else if (hasToggleIcon || toggleLabel) {
+    toggleNode = /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+      appearance: toggleAppearance,
+      "aria-controls": id,
+      "aria-expanded": isOpen ? "true" : "false",
+      "aria-label": toggleLabel ? null : Label.Toggle,
+      "aria-pressed": isOpen ? "true" : "false",
+      "aria-haspopup": "true",
+      className: (0, _classnames.default)("p-contextual-menu__toggle", toggleClassName),
+      disabled: toggleDisabled,
+      hasIcon: hasToggleIcon,
+      onClick: evt => {
+        if (!isOpen) {
+          openPortal(evt);
+        } else {
+          closePortal(evt);
+        }
+      },
+      type: "button"
+    }, toggleProps), toggleLabelFirst ? labelNode : null, hasToggleIcon ? /*#__PURE__*/_react.default.createElement("i", {
+      className: (0, _classnames.default)("p-icon--chevron-down p-contextual-menu__indicator", {
+        "is-light": ["negative", "positive"].includes(toggleAppearance)
+      })
+    }) : null, toggleLabelFirst ? null : labelNode);
+  }
   return /*#__PURE__*/_react.default.createElement("span", _extends({
     className: contextualMenuClassName,
     ref: wrapperRef
-  }, wrapperProps), hasToggle ? /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    appearance: toggleAppearance,
-    "aria-controls": id,
-    "aria-expanded": isOpen ? "true" : "false",
-    "aria-label": toggleLabel ? null : Label.Toggle,
-    "aria-pressed": isOpen ? "true" : "false",
-    "aria-haspopup": "true",
-    className: (0, _classnames.default)("p-contextual-menu__toggle", toggleClassName),
-    disabled: toggleDisabled,
-    hasIcon: hasToggleIcon,
-    onClick: evt => {
-      if (!isOpen) {
-        openPortal(evt);
-      } else {
-        closePortal(evt);
-      }
-    },
-    type: "button"
-  }, toggleProps), toggleLabelFirst ? labelNode : null, hasToggleIcon ? /*#__PURE__*/_react.default.createElement("i", {
-    className: (0, _classnames.default)("p-icon--chevron-down p-contextual-menu__indicator", {
-      "is-light": ["negative", "positive"].includes(toggleAppearance)
-    })
-  }) : null, toggleLabelFirst ? null : labelNode) : null, isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(_ContextualMenuDropdown.default, _extends({
+  }, wrapperProps), toggleNode, isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(_ContextualMenuDropdown.default, _extends({
     adjustedPosition: adjustedPosition,
     autoAdjust: autoAdjust,
     handleClose: closePortal,

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -40,7 +40,6 @@ type MultiSelectDropdownProps = {
     footer?: ReactNode;
     groupFn?: GroupFn;
     sortFn?: SortFn;
-    shouldPinSelectedItems?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 declare const sortAlphabetically: (a: MultiSelectItem, b: MultiSelectItem) => number;
 declare const getGroupedItems: (items: MultiSelectItem[]) => {

package/dist/components/MultiSelect/MultiSelect.js

@@ -155,8 +155,7 @@ MultiSelectDropdown.propTypes = {
   onSelectItem: _propTypes.default.func,
   footer: _propTypes.default.node,
   groupFn: _propTypes.default.func,
-  sortFn: _propTypes.default.any,
-  shouldPinSelectedItems: _propTypes.default.bool
+  sortFn: _propTypes.default.any
 };
 const MultiSelect = _ref4 => {
   let {
@@ -176,21 +175,9 @@ const MultiSelect = _ref4 => {
     showDropdownFooter = true,
     variant = "search"
   } = _ref4;
-  const wrapperRef = (0, _index.useClickOutside)(() => {
-    setIsDropdownOpen(false);
-    setFilter("");
-  });
-  (0, _index.useOnEscapePressed)(() => {
-    setIsDropdownOpen(false);
-    setFilter("");
-  });
+  const buttonRef = (0, _react.useRef)();
   const [isDropdownOpen, setIsDropdownOpen] = (0, _react.useState)(false);
   const [filter, setFilter] = (0, _react.useState)("");
-  (0, _react.useEffect)(() => {
-    if (!isDropdownOpen) {
-      setFilter("");
-    }
-  }, [isDropdownOpen]);
   const [internalSelectedItems, setInternalSelectedItems] = (0, _react.useState)([]);
   const selectedItems = externalSelectedItems || internalSelectedItems;
   const updateItems = newItems => {
@@ -219,43 +206,69 @@ const MultiSelect = _ref4 => {
       type: "button"
     }, "Clear"));
   }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: wrapperRef
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "multi-select"
-  }, variant === "search" ? /*#__PURE__*/_react.default.createElement(_index.SearchBox, {
-    externallyControlled: true,
-    "aria-controls": dropdownId,
-    "aria-expanded": isDropdownOpen,
-    id: inputId,
-    role: "combobox",
-    "aria-label": label || placeholder || "Search",
-    disabled: disabled,
-    autoComplete: "off",
-    onChange: value => {
-      setFilter(value);
-      // reopen if dropdown has been closed via ESC
-      setIsDropdownOpen(true);
+  return /*#__PURE__*/_react.default.createElement(_index.ContextualMenu, {
+    className: "multi-select",
+    onToggleMenu: isOpen => {
+      if (!isOpen) {
+        setFilter("");
+      }
+      // Handle syncing the state when toggling the menu from within the
+      // contextual menu component e.g. when clicking outside.
+      if (isOpen !== isDropdownOpen) {
+        setIsDropdownOpen(isOpen);
+      }
     },
-    onFocus: () => setIsDropdownOpen(true),
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search",
-    required: required,
-    type: "text",
-    value: filter,
-    className: "multi-select__input"
-  }) : /*#__PURE__*/_react.default.createElement("button", {
-    role: "combobox",
-    type: "button",
-    "aria-label": label || placeholder || "Select items",
-    "aria-controls": dropdownId,
-    "aria-expanded": isDropdownOpen,
-    className: "multi-select__select-button",
-    onClick: () => {
-      setIsDropdownOpen(isOpen => !isOpen);
-    }
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "multi-select__condensed-text"
-  }, listSelected && selectedItems.length > 0 ? selectedItemsLabel : placeholder !== null && placeholder !== void 0 ? placeholder : "Select items")), /*#__PURE__*/_react.default.createElement(MultiSelectDropdown, {
+    position: "left",
+    constrainPanelWidth: true,
+    toggle: variant === "search" ? /*#__PURE__*/_react.default.createElement(_index.SearchBox, {
+      externallyControlled: true,
+      "aria-controls": dropdownId,
+      "aria-expanded": isDropdownOpen,
+      id: inputId,
+      role: "combobox",
+      "aria-label": label || placeholder || "Search",
+      disabled: disabled,
+      autoComplete: "off",
+      onChange: value => {
+        setFilter(value);
+        // reopen if dropdown has been closed via ESC
+        setIsDropdownOpen(true);
+      },
+      onFocus: () => setIsDropdownOpen(true),
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search",
+      required: required,
+      type: "text",
+      value: filter,
+      className: "multi-select__input"
+    }) : /*#__PURE__*/_react.default.createElement("button", {
+      role: "combobox",
+      type: "button",
+      "aria-label": label || placeholder || "Select items",
+      "aria-controls": dropdownId,
+      "aria-expanded": isDropdownOpen,
+      className: "multi-select__select-button",
+      onClick: () => {
+        setIsDropdownOpen(!isDropdownOpen);
+      },
+      onMouseDown: event => {
+        // If the dropdown is open when this button is clicked the
+        // click-outside event will fire which will close the dropdown, but
+        // then the button click event will fire which will immediately
+        // reopen the dropdown.
+        // To prevent this we can stop the propagation to the click event
+        // while `isDropdownOpen` is still set to `true` (by the time we
+        // get to the `onClick` event `isDropdownOpen` will already be `false`,
+        // hence having to do this on mouse down).
+        if (isDropdownOpen) {
+          event.stopPropagation();
+        }
+      },
+      ref: buttonRef
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "multi-select__condensed-text"
+    }, listSelected && selectedItems.length > 0 ? selectedItemsLabel : placeholder !== null && placeholder !== void 0 ? placeholder : "Select items")),
+    visible: isDropdownOpen
+  }, /*#__PURE__*/_react.default.createElement(MultiSelectDropdown, {
     id: dropdownId,
     isOpen: isDropdownOpen,
     items: filter.length > 0 ? items.filter(item => item.label.toLowerCase().includes(filter.toLowerCase())) : items,
@@ -266,7 +279,7 @@ const MultiSelect = _ref4 => {
     onSelectItem: onSelectItem,
     onDeselectItem: onDeselectItem,
     footer: footer
-  })));
+  }));
 };
 exports.MultiSelect = MultiSelect;
 MultiSelect.propTypes = {

package/dist/components/MultiSelect/MultiSelect.scss

@@ -10,7 +10,9 @@ $dropdown-max-height: 20rem;
   // XXX: This is a workaround for https://github.com/canonical/vanilla-framework/issues/5030
   @include vf-b-forms;
 
+  margin-bottom: $input-margin-bottom;
   position: relative;
+  width: 100%;
 }
 
 .multi-select .p-form-validation__message {
@@ -26,6 +28,7 @@ $dropdown-max-height: 20rem;
 
 .multi-select__input {
   cursor: pointer;
+  margin-bottom: 0;
   position: relative;
 
   &.items-selected {
@@ -40,19 +43,6 @@ $dropdown-max-height: 20rem;
   }
 }
 
-.multi-select__dropdown {
-  background-color: $colors--theme--background-default;
-  box-shadow: $box-shadow;
-  color: $colors--theme--text-default;
-  left: 0;
-  max-height: $dropdown-max-height;
-  overflow: auto;
-  padding-top: $spv--small;
-  position: absolute;
-  right: 0;
-  top: calc(100% - #{$input-margin-bottom});
-}
-
 .multi-select__dropdown--side-by-side {
   display: flex;
   flex-wrap: wrap;
@@ -132,6 +122,10 @@ $dropdown-max-height: 20rem;
   position: relative;
   z-index: 0;
 
+  .multi-select & {
+    margin-bottom: 0;
+  }
+
   &::after {
     content: "";
     margin-left: $sph--large;

package/dist/components/SearchBox/SearchBox.d.ts

@@ -28,7 +28,7 @@ export type Props = PropsWithSpread<{
     /**
      * A function that is called when the user clicks the search icon or presses enter
      */
-    onSearch?: () => void;
+    onSearch?: (inputValue: string) => void;
     /**
      * A function that is called when the user clicks the reset icon
      */
@@ -37,6 +37,10 @@ export type Props = PropsWithSpread<{
      * A search input placeholder message.
      */
     placeholder?: string;
+    /**
+     * Whether the search input should lose focus when searching.
+     */
+    shouldBlurOnSearch?: boolean;
     /**
      * Whether the search input should receive focus after pressing the reset button
      */

package/dist/components/SearchBox/SearchBox.js

@@ -31,6 +31,7 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
     onSearch,
     onClear,
     placeholder = "Search",
+    shouldBlurOnSearch = true,
     shouldRefocusAfterReset,
     value,
     ...props
@@ -45,11 +46,13 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
     }
   };
   const triggerSearch = () => {
-    onSearch && onSearch();
+    onSearch === null || onSearch === void 0 || onSearch(externallyControlled ? value : internalRef.current.value);
   };
   const onKeyDown = e => {
     if (e.key === "Enter" && internalRef.current.checkValidity()) {
-      internalRef.current.blur();
+      if (shouldBlurOnSearch) {
+        internalRef.current.blur();
+      }
       triggerSearch();
     }
   };

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.d.ts

@@ -9,5 +9,5 @@ export type Props<L = LinkDefaultElement> = Omit<SideNavigationBaseProps<L>, "co
      */
     component?: SideNavigationBaseProps<L>["component"];
 };
-declare const SideNavigationLink: <L = LinkDefaultElement>({ component, ...props }: Props<L>) => React.JSX.Element;
+declare const SideNavigationLink: React.ForwardRefExoticComponent<Omit<Props<LinkDefaultElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export default SideNavigationLink;

package/dist/components/SideNavigation/SideNavigationLink/SideNavigationLink.js

@@ -4,14 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _SideNavigationBase = _interopRequireDefault(require("../SideNavigationBase"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const SideNavigationLink = _ref => {
+const SideNavigationLink = /*#__PURE__*/(0, _react.forwardRef)(_ref => {
   let {
     component,
+    ref,
     ...props
   } = _ref;
   let className = null;
@@ -23,5 +26,5 @@ const SideNavigationLink = _ref => {
     className: (0, _classnames.default)("p-side-navigation__link", className),
     component: component !== null && component !== void 0 ? component : "a"
   }, props));
-};
+});
 var _default = exports.default = SideNavigationLink;

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

@@ -4,7 +4,7 @@ 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
-     * reuiqred by the child table component
+     * required by the child table component
      */
     data: unknown[];
     /**

package/dist/components/TablePagination/TablePagination.js

@@ -94,7 +94,7 @@ const TablePagination = props => {
   };
   const clonedChildren = (0, _utils.renderChildren)(children, dataForwardProp, controlData);
   const controls = /*#__PURE__*/_react.default.createElement(_TablePaginationControls.default, _extends({}, divProps, {
-    data: controlData,
+    visibleCount: controlData.length,
     className: className,
     itemName: itemName,
     description: description,

package/dist/components/TablePagination/TablePagination.scss

@@ -18,7 +18,7 @@
   }
 
   .back {
-    margin: 0 $spv--large;
+    margin: 0 0 0 $spv--large;
 
     .p-icon--chevron-down {
       rotate: 90deg;
@@ -34,7 +34,7 @@
   }
 
   .pagination-input {
-    margin-right: $spv--small;
+    margin: 0 $spv--small 0 $spv--large;
     min-width: 0;
     width: 3rem;
   }

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

@@ -8,3 +8,7 @@ export declare const CustomPageLimit: Story;
 export declare const CustomDisplayTitle: Story;
 export declare const RenderAbove: Story;
 export declare const RenderBelow: Story;
+/** The table pagination controls can be used without wrapping MainTable by
+ * using the `TablePaginationControls` component.
+ */
+export declare const ControlsOnly: Story;

package/dist/components/TablePagination/TablePagination.stories.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.RenderBelow = exports.RenderAbove = exports.Default = exports.CustomPageLimit = exports.CustomDisplayTitle = void 0;
+exports.default = exports.RenderBelow = exports.RenderAbove = exports.Default = exports.CustomPageLimit = exports.CustomDisplayTitle = exports.ControlsOnly = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _TablePagination = _interopRequireDefault(require("./TablePagination"));
 var _MainTable = _interopRequireDefault(require("../MainTable"));
+var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const meta = {
   component: _TablePagination.default,
@@ -299,4 +300,31 @@ const RenderBelow = exports.RenderBelow = {
     }));
   },
   name: "RenderBelow"
+};
+
+/** The table pagination controls can be used without wrapping MainTable by
+ * using the `TablePaginationControls` component.
+ */
+const ControlsOnly = exports.ControlsOnly = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement(_TablePaginationControls.default, {
+      currentPage: 1,
+      itemName: "row",
+      nextButtonProps: {
+        disabled: false
+      },
+      onInputPageChange: console.log,
+      onNextPage: console.log,
+      onPageSizeChange: console.log,
+      onPreviousPage: console.log,
+      pageLimits: [10, 25, 50],
+      pageSize: 20,
+      previousButtonProps: {
+        disabled: false
+      },
+      showPageInput: true,
+      totalItems: 100,
+      visibleCount: 10
+    });
+  }
 };

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

@@ -1,6 +1,24 @@
+import { ButtonProps } from "../../Button";
 import { HTMLAttributes } from "react";
 import { BasePaginationProps, ExternalControlProps, InternalControlProps } from "../TablePagination";
+export declare enum Label {
+    NEXT_PAGE = "Next page",
+    PREVIOUS_PAGE = "Previous page",
+    PAGE_NUMBER = "Page number"
+}
 export type AllProps = BasePaginationProps & InternalControlProps & ExternalControlProps;
-export type Props = Omit<AllProps, "externallyControlled" | "dataForwardProp" | "position"> & HTMLAttributes<HTMLDivElement>;
-declare const TablePaginationControls: ({ data, className, itemName, description, pageLimits, totalItems, currentPage, pageSize, onPageChange, onPageSizeChange, ...divProps }: Props) => JSX.Element;
+export type Props = Omit<AllProps, "currentPage" | "data" | "dataForwardProp" | "externallyControlled" | "onPageChange" | "position" | "totalItems"> & {
+    currentPage?: AllProps["currentPage"];
+    displayDescription?: boolean;
+    onInputPageChange?: (page: number) => void;
+    nextButtonProps?: Partial<ButtonProps>;
+    onNextPage?: (page: number) => void;
+    onPageChange?: AllProps["onPageChange"];
+    onPreviousPage?: (page: number) => void;
+    previousButtonProps?: Partial<ButtonProps>;
+    totalItems?: AllProps["totalItems"];
+    visibleCount?: number;
+    showPageInput?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+declare const TablePaginationControls: ({ className, currentPage, description, displayDescription, onInputPageChange, itemName, nextButtonProps, onNextPage, onPageChange, onPageSizeChange, onPreviousPage, pageLimits, pageSize, previousButtonProps, showPageInput, totalItems, visibleCount, ...divProps }: Props) => JSX.Element;
 export default TablePaginationControls;

package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Label = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Button = _interopRequireDefault(require("../../Button"));
 var _Icon = _interopRequireDefault(require("../../Icon"));
 var _Input = _interopRequireDefault(require("../../Input"));
@@ -13,42 +14,58 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+let Label = exports.Label = /*#__PURE__*/function (Label) {
+  Label["NEXT_PAGE"] = "Next page";
+  Label["PREVIOUS_PAGE"] = "Previous page";
+  Label["PAGE_NUMBER"] = "Page number";
+  return Label;
+}({});
 const TablePaginationControls = _ref => {
   let {
-    data,
     className,
-    itemName,
-    description,
-    pageLimits,
-    totalItems,
     currentPage,
-    pageSize,
+    description,
+    displayDescription = true,
+    onInputPageChange,
+    itemName,
+    nextButtonProps,
+    onNextPage,
     onPageChange,
     onPageSizeChange,
+    onPreviousPage,
+    pageLimits,
+    pageSize,
+    previousButtonProps,
+    showPageInput = true,
+    totalItems,
+    visibleCount,
     ...divProps
   } = _ref;
   const isSmallScreen = (0, _utils.useFigureSmallScreen)();
-  const totalPages = Math.ceil(totalItems / pageSize);
+  const totalPages = totalItems ? Math.ceil(totalItems / pageSize) : null;
   const descriptionDisplay = (0, _utils.getDescription)({
     description,
-    data,
+    visibleCount,
     isSmallScreen,
     totalItems,
     itemName
   });
   const handleDecrementPage = currentPage => {
     if (currentPage > 1) {
-      onPageChange(currentPage - 1);
+      onPageChange === null || onPageChange === void 0 || onPageChange(currentPage - 1);
     }
+    onPreviousPage === null || onPreviousPage === void 0 || onPreviousPage(typeof currentPage === "number" ? currentPage - 1 : null);
   };
   const handleIncrementPage = (currentPage, totalPages) => {
     if (currentPage < totalPages) {
-      onPageChange(currentPage + 1);
+      onPageChange === null || onPageChange === void 0 || onPageChange(currentPage + 1);
     }
+    onNextPage === null || onNextPage === void 0 || onNextPage(typeof currentPage === "number" ? currentPage + 1 : null);
   };
   const handleInputPageChange = e => {
     const newPage = Math.min(totalPages, Math.max(1, parseInt(e.target.value)));
-    onPageChange(newPage);
+    onPageChange === null || onPageChange === void 0 || onPageChange(newPage);
+    onInputPageChange === null || onInputPageChange === void 0 || onInputPageChange(Number(e.target.value));
   };
   const handlePageSizeChange = e => {
     onPageSizeChange(parseInt(e.target.value));
@@ -60,31 +77,31 @@ const TablePaginationControls = _ref => {
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "description",
     id: "pagination-description"
-  }, descriptionDisplay), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    "aria-label": "Previous page",
+  }, displayDescription ? descriptionDisplay : null), /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+    "aria-label": Label.PREVIOUS_PAGE,
     className: "back",
     appearance: "base",
     hasIcon: true,
     disabled: currentPage === 1,
     onClick: () => handleDecrementPage(currentPage)
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, previousButtonProps), previousButtonProps !== null && previousButtonProps !== void 0 && previousButtonProps.children ? previousButtonProps.children : /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "chevron-down"
-  })), /*#__PURE__*/_react.default.createElement(_Input.default, {
+  })), showPageInput ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
     id: "paginationPageInput",
-    label: "Page number",
+    label: Label.PAGE_NUMBER,
     labelClassName: "u-off-screen",
     className: "u-no-margin--bottom pagination-input",
     onChange: handleInputPageChange,
     value: currentPage,
     type: "number"
-  }), " ", "of\xA0", totalPages, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    "aria-label": "Next page",
+  }), " ") : null, typeof totalPages === "number" ? "of ".concat(totalPages) : null, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+    "aria-label": Label.NEXT_PAGE,
     className: "next",
     appearance: "base",
     hasIcon: true,
     disabled: currentPage === totalPages,
     onClick: () => handleIncrementPage(currentPage, totalPages)
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, nextButtonProps), /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "chevron-down"
   })), /*#__PURE__*/_react.default.createElement(_Select.default, {
     className: "u-no-margin--bottom",
@@ -96,4 +113,12 @@ const TablePaginationControls = _ref => {
     value: pageSize
   }));
 };
+TablePaginationControls.propTypes = {
+  displayDescription: _propTypes.default.bool,
+  onInputPageChange: _propTypes.default.func,
+  onNextPage: _propTypes.default.func,
+  onPreviousPage: _propTypes.default.func,
+  visibleCount: _propTypes.default.number,
+  showPageInput: _propTypes.default.bool
+};
 var _default = exports.default = TablePaginationControls;

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

@@ -17,11 +17,11 @@ export declare const generatePagingOptions: (pageLimits: number[]) => {
     value: number;
     label: string;
 }[];
-export declare const getDescription: ({ description, data, isSmallScreen, totalItems, itemName, }: {
+export declare const getDescription: ({ description, isSmallScreen, totalItems, itemName, visibleCount, }: {
     description: ReactNode;
-    data: unknown[];
     isSmallScreen: boolean;
     totalItems: number;
     itemName: string;
+    visibleCount: number;
 }) => string | number | true | ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>;
 export declare const useFigureSmallScreen: () => boolean;

package/dist/components/TablePagination/utils.js

@@ -44,15 +44,14 @@ exports.generatePagingOptions = generatePagingOptions;
 const getDescription = _ref => {
   let {
     description,
-    data,
     isSmallScreen,
     totalItems,
-    itemName
+    itemName,
+    visibleCount
   } = _ref;
   if (description) {
     return description;
   }
-  const visibleCount = data.length;
   if (isSmallScreen) {
     return "".concat(visibleCount, " out of ").concat(totalItems);
   }

package/dist/index.d.ts

@@ -63,6 +63,7 @@ export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
+export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";
 export type { ArticlePaginationProps } from "./components/ArticlePagination";

package/dist/index.js

@@ -79,6 +79,7 @@ var _exportNames = {
   Textarea: true,
   Tooltip: true,
   TablePagination: true,
+  TablePaginationControls: true,
   useOnClickOutside: true,
   useClickOutside: true,
   useId: true,
@@ -488,6 +489,12 @@ Object.defineProperty(exports, "TablePagination", {
     return _TablePagination.default;
   }
 });
+Object.defineProperty(exports, "TablePaginationControls", {
+  enumerable: true,
+  get: function () {
+    return _TablePaginationControls.default;
+  }
+});
 Object.defineProperty(exports, "TableRow", {
   enumerable: true,
   get: function () {
@@ -690,6 +697,7 @@ var _Tabs = _interopRequireDefault(require("./components/Tabs"));
 var _Textarea = _interopRequireDefault(require("./components/Textarea"));
 var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
 var _TablePagination = _interopRequireDefault(require("./components/TablePagination"));
+var _TablePaginationControls = _interopRequireDefault(require("./components/TablePagination/TablePaginationControls"));
 var _hooks = require("./hooks");
 var _utils = require("./utils");
 var _enums = require("./enums");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -89,9 +89,9 @@
     "ts-jest": "29.1.2",
     "tsc-alias": "1.8.8",
     "typescript": "5.4.5",
-    "vanilla-framework": "4.11.0",
+    "vanilla-framework": "4.15.0",
     "wait-on": "7.2.0",
-    "webpack": "5.91.0"
+    "webpack": "5.94.0"
   },
   "dependencies": {
     "@types/jest": "29.5.12",
@@ -113,11 +113,11 @@
     "jackspeak": "2.1.1"
   },
   "peerDependencies": {
-    "@types/react": "^17.0.2 || ^18.0.0",
-    "@types/react-dom": "^17.0.2 || ^18.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "formik": "^2.4.5",
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "vanilla-framework": "^3.15.1 || ^4.0.0"
   },
   "scripts": {