@canonical/react-components 0.34.1 → 0.36.0

package/dist/components/Field/Field.d.ts

@@ -28,6 +28,10 @@ export declare type Props = {
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: ReactNode;
     /**
      * An id to give to the help element.
      */
@@ -69,5 +73,5 @@ export declare type Props = {
      */
     validationId?: string;
 };
-declare const Field: ({ caution, children, className, error, forId, help, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, success, validationId, }: Props) => JSX.Element;
+declare const Field: ({ caution, children, className, error, forId, help, helpClassName, helpId, isSelect, isTickElement, label, labelClassName, labelFirst, required, stacked, success, validationId, }: Props) => JSX.Element;
 export default Field;

package/dist/components/Field/Field.js

@@ -18,9 +18,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var generateHelpText = function generateHelpText(_ref) {
   var help = _ref.help,
       helpId = _ref.helpId,
+      helpClassName = _ref.helpClassName,
       isTickElement = _ref.isTickElement;
   return help ? /*#__PURE__*/_react.default.createElement("p", {
-    className: (0, _classnames.default)("p-form-help-text", {
+    className: (0, _classnames.default)("p-form-help-text", helpClassName, {
       "is-tick-element": isTickElement
     }),
     id: helpId
@@ -65,6 +66,7 @@ var generateContent = function generateContent(_ref2) {
       labelFirst = _ref2.labelFirst,
       labelNode = _ref2.labelNode,
       help = _ref2.help,
+      helpClassName = _ref2.helpClassName,
       error = _ref2.error,
       caution = _ref2.caution,
       success = _ref2.success,
@@ -78,6 +80,7 @@ var generateContent = function generateContent(_ref2) {
   }, children) : children, !labelFirst && labelNode, generateHelpText({
     helpId: helpId,
     help: help,
+    helpClassName: helpClassName,
     isTickElement: isTickElement
   }), generateError(error, caution, success, validationId));
 };
@@ -89,6 +92,7 @@ var Field = function Field(_ref3) {
       error = _ref3.error,
       forId = _ref3.forId,
       help = _ref3.help,
+      helpClassName = _ref3.helpClassName,
       helpId = _ref3.helpId,
       isSelect = _ref3.isSelect,
       isTickElement = _ref3.isTickElement,
@@ -108,6 +112,7 @@ var Field = function Field(_ref3) {
     labelFirst: labelFirst,
     labelNode: labelNode,
     help: help,
+    helpClassName: helpClassName,
     error: error,
     caution: caution,
     success: success,

package/dist/components/Input/Input.d.ts

@@ -20,6 +20,10 @@ export declare type Props = PropsWithSpread<{
      * Help text to show below the field.
      */
     help?: ReactNode;
+    /**
+     * Optional class(es) to pass to the help text element.
+     */
+    helpClassName?: ReactNode;
     /**
      * The id of the input.
      */
@@ -53,5 +57,5 @@ export declare type Props = PropsWithSpread<{
      */
     wrapperClassName?: string;
 }, InputHTMLAttributes<HTMLInputElement>>;
-declare const Input: ({ caution, className, error, help, id, label, labelClassName, required, stacked, success, takeFocus, type, wrapperClassName, ...inputProps }: Props) => JSX.Element;
+declare const Input: ({ caution, className, error, help, helpClassName, id, label, labelClassName, required, stacked, success, takeFocus, type, wrapperClassName, ...inputProps }: Props) => JSX.Element;
 export default Input;

package/dist/components/Input/Input.js

@@ -19,7 +19,7 @@ var _RadioInput = _interopRequireDefault(require("../RadioInput"));
 
 var _hooks = require("../../hooks");
 
-var _excluded = ["caution", "className", "error", "help", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "type", "wrapperClassName"];
+var _excluded = ["caution", "className", "error", "help", "helpClassName", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "type", "wrapperClassName"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -44,6 +44,7 @@ var Input = function Input(_ref) {
       className = _ref.className,
       error = _ref.error,
       help = _ref.help,
+      helpClassName = _ref.helpClassName,
       id = _ref.id,
       label = _ref.label,
       labelClassName = _ref.labelClassName,
@@ -101,6 +102,7 @@ var Input = function Input(_ref) {
     error: error,
     forId: id,
     help: help,
+    helpClassName: helpClassName,
     helpId: helpId,
     isTickElement: type === "checkbox" || type === "radio",
     label: fieldLabel,

package/dist/components/MainTable/MainTable.js

@@ -19,6 +19,8 @@ var _TableHeader = _interopRequireDefault(require("../TableHeader"));
 
 var _TableCell = _interopRequireDefault(require("../TableCell"));
 
+var _hooks = require("../../hooks");
+
 var _excluded = ["content", "sortKey"],
     _excluded2 = ["columns", "expanded", "expandedContent", "key", "sortData"],
     _excluded3 = ["content"],
@@ -102,10 +104,59 @@ var generateHeaders = function generateHeaders(currentSortKey, currentSortDirect
   })));
 };
 
-var generateRows = function generateRows(currentSortDirection, currentSortKey, emptyStateMsg, expanding, responsive, headers, paginate, rows, currentPage, setCurrentPage, sortable, sortFunction) {
-  // If the table has no rows, return empty state message
-  if (Object.entries(rows).length === 0 && emptyStateMsg) {
-    return /*#__PURE__*/_react.default.createElement("caption", null, emptyStateMsg);
+var generateRows = function generateRows(_ref2) {
+  var rows = _ref2.rows,
+      headers = _ref2.headers,
+      responsive = _ref2.responsive,
+      expanding = _ref2.expanding;
+  return rows.map(function (_ref3, index) {
+    var columns = _ref3.columns,
+        expanded = _ref3.expanded,
+        expandedContent = _ref3.expandedContent,
+        key = _ref3.key,
+        sortData = _ref3.sortData,
+        rowProps = _objectWithoutProperties(_ref3, _excluded2);
+
+    var cellItems = columns === null || columns === void 0 ? void 0 : columns.map(function (_ref4, index) {
+      var content = _ref4.content,
+          cellProps = _objectWithoutProperties(_ref4, _excluded3);
+
+      var headerContent = headers && headers[index]["content"];
+      var headerReplacement = headers && headers[index]["heading"];
+
+      if (responsive) {
+        cellProps["data-heading"] = typeof headerContent === "string" ? headerContent : headerReplacement;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_TableCell.default, _extends({
+        key: index
+      }, cellProps), content);
+    }); // if key was not provided as a prop, use row's index instead
+
+    if (key === null || typeof key === "undefined") {
+      key = index;
+    } // The expanding cell is alway created to match the correct number of
+    // table cells in rows that do have expanding content.
+
+
+    return /*#__PURE__*/_react.default.createElement(_TableRow.default, _extends({
+      key: key
+    }, rowProps), cellItems, expanding && /*#__PURE__*/_react.default.createElement(_TableCell.default, {
+      expanding: true,
+      hidden: !expanded
+    }, expandedContent));
+  });
+};
+
+var sortRows = function sortRows(_ref5) {
+  var currentSortDirection = _ref5.currentSortDirection,
+      currentSortKey = _ref5.currentSortKey,
+      rows = _ref5.rows,
+      sortable = _ref5.sortable,
+      sortFunction = _ref5.sortFunction;
+
+  if (!rows) {
+    return [];
   } // Clone the rows so we can restore the original order.
 
 
@@ -133,74 +184,23 @@ var generateRows = function generateRows(currentSortDirection, currentSortKey, e
     });
   }
 
-  var slicedRows = sortedRows;
-
-  if (paginate) {
-    var startIndex = (currentPage - 1) * paginate;
-
-    if (startIndex > rows.length) {
-      // If the rows have changed e.g. when filtering and the user is on a page
-      // that no longer exists then send them to the start.
-      setCurrentPage(1);
-    }
-
-    slicedRows = sortedRows.slice(startIndex, startIndex + paginate);
-  }
-
-  var rowItems = slicedRows.map(function (_ref2, index) {
-    var columns = _ref2.columns,
-        expanded = _ref2.expanded,
-        expandedContent = _ref2.expandedContent,
-        key = _ref2.key,
-        sortData = _ref2.sortData,
-        rowProps = _objectWithoutProperties(_ref2, _excluded2);
-
-    var cellItems = columns.map(function (_ref3, index) {
-      var content = _ref3.content,
-          cellProps = _objectWithoutProperties(_ref3, _excluded3);
-
-      var headerContent = headers && headers[index]["content"];
-      var headerReplacement = headers && headers[index]["heading"];
-
-      if (responsive) {
-        cellProps["data-heading"] = typeof headerContent === "string" ? headerContent : headerReplacement;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_TableCell.default, _extends({
-        key: index
-      }, cellProps), content);
-    }); // if key was not provided as a prop, use row's index instead
-
-    if (key === null || typeof key === "undefined") {
-      key = index;
-    } // The expanding cell is alway created to match the correct number of
-    // table cells in rows that do have expanding content.
-
-
-    return /*#__PURE__*/_react.default.createElement(_TableRow.default, _extends({
-      key: key
-    }, rowProps), cellItems, expanding && /*#__PURE__*/_react.default.createElement(_TableCell.default, {
-      expanding: true,
-      hidden: !expanded
-    }, expandedContent));
-  });
-  return /*#__PURE__*/_react.default.createElement("tbody", null, rowItems);
+  return sortedRows;
 };
 
-var MainTable = function MainTable(_ref4) {
-  var defaultSort = _ref4.defaultSort,
-      defaultSortDirection = _ref4.defaultSortDirection,
-      _ref4$emptyStateMsg = _ref4.emptyStateMsg,
-      emptyStateMsg = _ref4$emptyStateMsg === void 0 ? "" : _ref4$emptyStateMsg,
-      expanding = _ref4.expanding,
-      headers = _ref4.headers,
-      onUpdateSort = _ref4.onUpdateSort,
-      paginate = _ref4.paginate,
-      rows = _ref4.rows,
-      responsive = _ref4.responsive,
-      sortable = _ref4.sortable,
-      sortFunction = _ref4.sortFunction,
-      props = _objectWithoutProperties(_ref4, _excluded4);
+var MainTable = function MainTable(_ref6) {
+  var defaultSort = _ref6.defaultSort,
+      defaultSortDirection = _ref6.defaultSortDirection,
+      _ref6$emptyStateMsg = _ref6.emptyStateMsg,
+      emptyStateMsg = _ref6$emptyStateMsg === void 0 ? "" : _ref6$emptyStateMsg,
+      expanding = _ref6.expanding,
+      headers = _ref6.headers,
+      onUpdateSort = _ref6.onUpdateSort,
+      paginate = _ref6.paginate,
+      rows = _ref6.rows,
+      responsive = _ref6.responsive,
+      sortable = _ref6.sortable,
+      sortFunction = _ref6.sortFunction,
+      props = _objectWithoutProperties(_ref6, _excluded4);
 
   var _useState = (0, _react.useState)(defaultSort),
       _useState2 = _slicedToArray(_useState, 2),
@@ -210,12 +210,7 @@ var MainTable = function MainTable(_ref4) {
   var _useState3 = (0, _react.useState)(defaultSortDirection),
       _useState4 = _slicedToArray(_useState3, 2),
       currentSortDirection = _useState4[0],
-      setSortDirection = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(1),
-      _useState6 = _slicedToArray(_useState5, 2),
-      currentPage = _useState6[0],
-      setCurrentPage = _useState6[1]; // Update the current sort state if the prop changes.
+      setSortDirection = _useState4[1]; // Update the current sort state if the prop changes.
 
 
   (0, _react.useEffect)(function () {
@@ -231,10 +226,34 @@ var MainTable = function MainTable(_ref4) {
     onUpdateSort && onUpdateSort(newSort);
   };
 
+  var sortedRows = (0, _react.useMemo)(function () {
+    return sortRows({
+      currentSortDirection: currentSortDirection,
+      currentSortKey: currentSortKey,
+      rows: rows,
+      sortable: sortable,
+      sortFunction: sortFunction
+    });
+  }, [currentSortDirection, currentSortKey, rows, sortable, sortFunction]);
+
+  var _usePagination = (0, _hooks.usePagination)(sortedRows, {
+    itemsPerPage: paginate,
+    autoResetPage: true
+  }),
+      finalRows = _usePagination.pageData,
+      currentPage = _usePagination.currentPage,
+      setCurrentPage = _usePagination.paginate;
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Table.default, _extends({
     expanding: expanding,
     responsive: responsive
-  }, props), !!headers && generateHeaders(currentSortKey, currentSortDirection, expanding, headers, sortable, updateSort, setSortDirection), !!rows && generateRows(currentSortDirection, currentSortKey, emptyStateMsg, expanding, responsive, headers, paginate, rows, currentPage, setCurrentPage, sortable, sortFunction)), paginate && rows && rows.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, {
+  }, props), !!headers && generateHeaders(currentSortKey, currentSortDirection, expanding, headers, sortable, updateSort, setSortDirection), // If the table has no rows, return empty state message
+  Object.entries(finalRows).length === 0 && emptyStateMsg ? /*#__PURE__*/_react.default.createElement("caption", null, emptyStateMsg) : /*#__PURE__*/_react.default.createElement("tbody", null, generateRows({
+    rows: finalRows,
+    headers: headers,
+    responsive: responsive,
+    expanding: expanding
+  }))), paginate && rows && rows.length > 0 && /*#__PURE__*/_react.default.createElement(_Pagination.default, {
     currentPage: currentPage,
     itemsPerPage: paginate,
     paginate: setCurrentPage,

package/dist/components/Tooltip/Tooltip.js

@@ -223,18 +223,47 @@ var Tooltip = function Tooltip(_ref) {
   (0, _hooks.useListener)(wrapperRef.current, mouseHandler, "mousemove", true, followMouse && isOpen); // Handle adjusting the position of the tooltip so that it remains on screen.
 
   (0, _hooks.useWindowFitment)(messageRef.current, wrapperRef.current, onUpdateWindowFitment, 20, isOpen, autoAdjust && followMouse);
+  var handleKeyPress = (0, _react.useCallback)(function (event) {
+    if (event.key === "Escape") {
+      closePortal();
+    }
+  }, [closePortal]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener("keypress", handleKeyPress);
+    return function () {
+      window.removeEventListener("keypress", handleKeyPress);
+    };
+  }, [handleKeyPress]);
 
   var handleBlur = function handleBlur(e) {
-    var _messageRef$current;
+    var _wrapperRef$current, _messageRef$current;
+
+    // do not close if the focus is within the tooltip wrapper
+    if (wrapperRef !== null && wrapperRef !== void 0 && (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(document.activeElement)) {
+      return;
+    }
 
     if (e.relatedTarget ? !((_messageRef$current = messageRef.current) !== null && _messageRef$current !== void 0 && _messageRef$current.contains(e.relatedTarget)) : e.target !== messageRef.current) {
       closePortal();
     }
   };
 
+  var handleClick = function handleClick(e) {
+    var _messageRef$current2;
+
+    // ignore clicks within the tooltip message
+    if ((_messageRef$current2 = messageRef.current) !== null && _messageRef$current2 !== void 0 && _messageRef$current2.contains(e.target)) {
+      return;
+    }
+
+    e.target.focus();
+    openPortal();
+  };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message ? /*#__PURE__*/_react.default.createElement("span", {
     className: className,
     onBlur: handleBlur,
+    onClick: handleClick,
     onFocus: openPortal,
     onMouseOut: handleBlur,
     onMouseOver: openPortal

package/dist/hooks/index.d.ts

@@ -3,4 +3,5 @@ export { useListener } from "./useListener";
 export { usePrevious } from "./usePrevious";
 export { useThrottle } from "./useThrottle";
 export { useId } from "./useId";
+export { usePagination } from "./usePagination";
 export type { WindowFitment } from "./useWindowFitment";

package/dist/hooks/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "useListener", {
     return _useListener.useListener;
   }
 });
+Object.defineProperty(exports, "usePagination", {
+  enumerable: true,
+  get: function get() {
+    return _usePagination.usePagination;
+  }
+});
 Object.defineProperty(exports, "usePrevious", {
   enumerable: true,
   get: function get() {
@@ -42,4 +48,6 @@ var _usePrevious = require("./usePrevious");
 
 var _useThrottle = require("./useThrottle");
 
-var _useId = require("./useId");
+var _useId = require("./useId");
+
+var _usePagination = require("./usePagination");

package/dist/hooks/usePagination.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A hook that handles pagination.
+ * @param data - The data array to paginate.
+ * @param {Object} options
+ * @param {number} [options.itemsPerPage] - Number of items per page. Returns all items if no value has been provided.
+ * @param {number} [options.initialPage=1] - Initial page number. Defaults to 1.
+ * @param {boolean} [options.autoResetPage=false] - Whether to reset the page number to 1 when the data changes.
+ */
+export declare function usePagination<D, I = number | null>(data: Array<D>, options?: {
+    itemsPerPage: I;
+    initialPage?: number;
+    autoResetPage?: boolean;
+}): {
+    pageData: Array<D>;
+    currentPage: number;
+    paginate: (pageNumber: number) => void;
+    itemsPerPage: I;
+    totalItems: number;
+};

package/dist/hooks/usePagination.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePagination = usePagination;
+
+var _react = require("react");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * A hook that handles pagination.
+ * @param data - The data array to paginate.
+ * @param {Object} options
+ * @param {number} [options.itemsPerPage] - Number of items per page. Returns all items if no value has been provided.
+ * @param {number} [options.initialPage=1] - Initial page number. Defaults to 1.
+ * @param {boolean} [options.autoResetPage=false] - Whether to reset the page number to 1 when the data changes.
+ */
+function usePagination(data, options) {
+  var _data$length;
+
+  var defaultOptions = {
+    initialPage: 1,
+    autoResetPage: false
+  };
+
+  var _Object$assign = Object.assign(defaultOptions, options),
+      itemsPerPage = _Object$assign.itemsPerPage,
+      initialPage = _Object$assign.initialPage,
+      autoResetPage = _Object$assign.autoResetPage;
+
+  var totalItems = (_data$length = data === null || data === void 0 ? void 0 : data.length) !== null && _data$length !== void 0 ? _data$length : 0;
+  var initialPageIndex = initialPage > 0 ? initialPage - 1 : 0;
+
+  var _useState = (0, _react.useState)(initialPageIndex),
+      _useState2 = _slicedToArray(_useState, 2),
+      pageIndex = _useState2[0],
+      setPageIndex = _useState2[1];
+
+  var startIndex = typeof itemsPerPage === "number" ? pageIndex * itemsPerPage : 0;
+
+  var paginate = function paginate(pageNumber) {
+    return setPageIndex(pageNumber - 1);
+  };
+
+  (0, _react.useEffect)(function () {
+    if (typeof itemsPerPage === "number" && startIndex >= totalItems) {
+      !autoResetPage && Math.floor(totalItems / itemsPerPage) > 0 ? // go to the last available page if the current page is out of bounds
+      setPageIndex(Math.floor(totalItems / itemsPerPage) - 1) : // go to the initial page if autoResetPage is true
+      setPageIndex(0);
+    }
+  }, [pageIndex, startIndex, setPageIndex, totalItems, itemsPerPage, autoResetPage]);
+  var pageData = (0, _react.useMemo)(function () {
+    return typeof itemsPerPage === "number" ? data === null || data === void 0 ? void 0 : data.slice(startIndex, startIndex + itemsPerPage) : data;
+  }, [startIndex, data, itemsPerPage]);
+  return {
+    pageData: pageData,
+    currentPage: pageIndex + 1,
+    paginate: paginate,
+    itemsPerPage: itemsPerPage,
+    totalItems: totalItems
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.34.1",
+  "version": "0.36.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -81,7 +81,7 @@
     "ts-jest": "27.1.4",
     "tsc-alias": "1.6.5",
     "typescript": "4.6.3",
-    "vanilla-framework": "3.1.1",
+    "vanilla-framework": "3.3.0",
     "wait-on": "5.3.0"
   },
   "dependencies": {
@@ -102,7 +102,7 @@
   "peerDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "vanilla-framework": "3.1.1"
+    "vanilla-framework": "3.3.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",
@@ -125,8 +125,8 @@
     "test-cypress": "concurrently 'yarn run docs' 'yarn run cypress:test' -k -s first",
     "unlink-packages": "yarn unlink && cd node_modules/react && yarn unlink && cd ../react-dom && yarn unlink",
     "cypress:test": "wait-on http://localhost:${PORT:-9009} && cypress run --env port=${PORT:-9009}",
-    "cypress:run": "cypress run",
-    "cypress:open": "cypress open"
+    "cypress:run": "cypress run --env port=${PORT:-9009}",
+    "cypress:open": "cypress open --env port=${PORT:-9009}"
   },
   "eslintConfig": {
     "extends": "react-app"