@canonical/react-components 1.2.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/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.2.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": {