@canonical/react-components 0.43.0 → 0.45.0

package/dist/components/ModularTable/ModularTable.d.ts

@@ -44,6 +44,10 @@ export type Props<D extends Record<string, unknown>> = PropsWithSpread<{
      * The direction of the initial sort.
      */
     initialSortDirection?: "ascending" | "descending";
+    /**
+     * Whether the sort by needs to be reset after each data change.
+     */
+    autoResetSortBy?: boolean;
 }, HTMLProps<HTMLTableElement>>;
-declare function ModularTable<D extends Record<string, unknown>>({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, initialSortColumn, initialSortDirection, ...props }: Props<D>): JSX.Element;
+declare function ModularTable<D extends Record<string, unknown>>({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, initialSortColumn, initialSortDirection, autoResetSortBy, ...props }: Props<D>): JSX.Element;
 export default ModularTable;

package/dist/components/ModularTable/ModularTable.js

@@ -11,7 +11,7 @@ var _TableRow = _interopRequireDefault(require("../TableRow"));
 var _TableHeader = _interopRequireDefault(require("../TableHeader"));
 var _TableCell = _interopRequireDefault(require("../TableCell"));
 var _Icon = _interopRequireDefault(require("../Icon"));
-var _excluded = ["data", "columns", "emptyMsg", "footer", "sortable", "getHeaderProps", "getRowProps", "getCellProps", "getRowId", "initialSortColumn", "initialSortDirection"];
+var _excluded = ["data", "columns", "emptyMsg", "footer", "sortable", "getHeaderProps", "getRowProps", "getCellProps", "getRowId", "initialSortColumn", "initialSortDirection", "autoResetSortBy"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -65,6 +65,8 @@ function ModularTable(_ref) {
     getRowId = _ref.getRowId,
     initialSortColumn = _ref.initialSortColumn,
     initialSortDirection = _ref.initialSortDirection,
+    _ref$autoResetSortBy = _ref.autoResetSortBy,
+    autoResetSortBy = _ref$autoResetSortBy === void 0 ? false : _ref$autoResetSortBy,
     props = _objectWithoutProperties(_ref, _excluded);
   var sortBy = (0, _react.useMemo)(function () {
     return initialSortColumn ? [{
@@ -78,7 +80,8 @@ function ModularTable(_ref) {
       getRowId: getRowId || undefined,
       initialState: {
         sortBy: sortBy
-      }
+      },
+      autoResetSortBy: autoResetSortBy
     }, sortable ? _reactTable.useSortBy : undefined),
     getTableProps = _useTable.getTableProps,
     getTableBodyProps = _useTable.getTableBodyProps,
@@ -86,17 +89,33 @@ function ModularTable(_ref) {
     rows = _useTable.rows,
     prepareRow = _useTable.prepareRow;
   var showEmpty = !!emptyMsg && (!rows || rows.length === 0);
+
+  // Function returns whether table can be sorted by a specific column.
+  // Returns true if sorting is enabled for the column and there is text
+  // or JSX provided for the header, otherwise returns false.
+  var isColumnSortable = function isColumnSortable(column) {
+    return column.canSort && ( /*#__PURE__*/(0, _react.isValidElement)(column.Header) || (typeof column.Header === "string" || typeof column.Header === "number") && !!String(column.Header).trim());
+  };
+  var getColumnSortDirection = function getColumnSortDirection(column) {
+    if (!isColumnSortable(column)) {
+      return undefined;
+    }
+    if (!column.isSorted) {
+      return "none";
+    }
+    return column.isSortedDesc ? "descending" : "ascending";
+  };
   return /*#__PURE__*/_react.default.createElement(_Table.default, _extends({}, getTableProps(), props), /*#__PURE__*/_react.default.createElement("thead", null, headerGroups.map(function (headerGroup) {
     return /*#__PURE__*/_react.default.createElement(_TableRow.default, headerGroup.getHeaderGroupProps(), headerGroup.headers.map(function (column) {
       return /*#__PURE__*/_react.default.createElement(_TableHeader.default, _extends({
-        sort: column.isSorted ? column.isSortedDesc ? "descending" : "ascending" : "none"
+        sort: getColumnSortDirection(column)
       }, column.getHeaderProps([{
         className: column.className
       }, {
         className: column.getCellIcon ? "p-table__cell--icon-placeholder" : ""
       }, _objectSpread({}, getHeaderProps === null || getHeaderProps === void 0 ? void 0 : getHeaderProps(column)),
       // Only call this if we want it to be sortable too.
-      sortable ? column.getSortByToggleProps({
+      sortable && isColumnSortable(column) ? column.getSortByToggleProps({
         title: undefined
       }) : {}])), column.render("Header"));
     }));

package/dist/components/Pagination/Pagination.d.ts

@@ -1,34 +1,90 @@
 import type { HTMLProps } from "react";
 import type { PropsWithSpread } from "../../types";
-export type Props = PropsWithSpread<{
+type BaseProps = {
     /**
-     * The current page being viewed.
+     * Whether to scroll to the top of the list on page change.
+     */
+    scrollToTop?: boolean;
+    /**
+     * The number of pages at which to truncate the pagination items.
+     */
+    truncateThreshold?: number;
+    /**
+     * Whether the pagination is ceneterd on the page.
+     */
+    centered?: boolean;
+    /**
+     * Whether to show the labels for forward and back buttons.
+     */
+    showLabels?: boolean;
+    /**
+     * Whether forward button is disabled.
+     */
+    forwardDisabled?: boolean;
+    /**
+     * Whether back button is disabled.
+     */
+    backDisabled?: boolean;
+    /**
+     * Custom label for forward button.
+     */
+    forwardLabel?: string;
+    /**
+     * Custom label for back button.
+     */
+    backLabel?: string;
+};
+type NumberedPagination = BaseProps & {
+    /**
+     * The current page being viewed.<br>
+     * **Required for Numbered Pagination.**
      */
     currentPage: number;
     /**
-     * The number of items to show per page.
+     * The number of items to show per page.<br>
+     * **Required for numbered pagination.**
      */
     itemsPerPage: number;
     /**
-     * Function to handle paginating the items.
+     * Function to handle paginating the items.<br>
+     * **Required for numbered pagination.**
      */
     paginate: (page: number) => void;
     /**
-     * The total number of items.
+     * The total number of items.<br>
+     * **Required for numbered pagination.**
      */
     totalItems: number;
     /**
-     * Whether to scroll to the top of the list on page change.
+     * Whether to hide the pagination items.
      */
-    scrollToTop?: boolean;
+    hideNumbers?: boolean;
     /**
-     * The number of pages at which to truncate the pagination items.
+     * Function to handle page transition to a higher-numbered page for
+     * numbered pagination and to next page for buttons-only pagination.<br>
+     * _Called with page parameter for numbered pagination and_
+     * _with no parameter for buttons-only pagination._<br>
+     * **Required for buttons-only pagination.**
      */
-    truncateThreshold?: number;
+    onForward?: (page: number) => void;
     /**
-     * Whether or not the pagination is ceneterd on the page.
+     * Function to handle page transition to a lower-numbered page for
+     * numbered pagination and to next page for buttons-only pagination.<br>
+     * _Called with page parameter for numbered pagination and_
+     * _with no parameter for buttons-only pagination._<br>
+     * **Required for buttons-only pagination.**
      */
-    centered?: boolean;
-}, HTMLProps<HTMLElement>>;
-declare const Pagination: ({ itemsPerPage, totalItems, paginate, currentPage, scrollToTop, truncateThreshold, centered, ...navProps }: Props) => JSX.Element;
+    onBack?: (page: number) => void;
+};
+type ButtonsOnlyPagination = BaseProps & {
+    itemsPerPage?: never;
+    totalItems?: never;
+    currentPage?: never;
+    paginate?: never;
+    hideNumbers?: never;
+    onForward: () => void;
+    onBack: () => void;
+};
+export type Props = PropsWithSpread<NumberedPagination | ButtonsOnlyPagination, HTMLProps<HTMLElement>>;
+declare const Pagination: ({ itemsPerPage, totalItems, paginate, currentPage, scrollToTop, truncateThreshold, centered, showLabels, hideNumbers, onForward, onBack, forwardDisabled, backDisabled, forwardLabel, backLabel, ...navProps }: Props) => JSX.Element;
 export default Pagination;

package/dist/components/Pagination/Pagination.js

@@ -8,7 +8,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
 var _PaginationButton = _interopRequireDefault(require("./PaginationButton"));
 var _PaginationItem = _interopRequireDefault(require("./PaginationItem"));
-var _excluded = ["itemsPerPage", "totalItems", "paginate", "currentPage", "scrollToTop", "truncateThreshold", "centered"];
+var _excluded = ["itemsPerPage", "totalItems", "paginate", "currentPage", "scrollToTop", "truncateThreshold", "centered", "showLabels", "hideNumbers", "onForward", "onBack", "forwardDisabled", "backDisabled", "forwardLabel", "backLabel"];
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -93,6 +93,16 @@ var PaginationItemSeparator = function PaginationItemSeparator() {
     className: "p-pagination__item p-pagination__item--truncation"
   }, "\u2026");
 };
+
+// Props that are used in both types of paginations.
+
+// Used when number of items per page, number of total items,
+// current page and paginate function is defined. Pagination
+// is handled by paginate function and optional onForward and
+// onBack functions.
+// Used when number of items per page, number of total items,
+// current page and paginate function are undefined.
+// Pagination is handled by onForward and onBack function.
 var Pagination = function Pagination(_ref) {
   var itemsPerPage = _ref.itemsPerPage,
     totalItems = _ref.totalItems,
@@ -102,17 +112,43 @@ var Pagination = function Pagination(_ref) {
     _ref$truncateThreshol = _ref.truncateThreshold,
     truncateThreshold = _ref$truncateThreshol === void 0 ? 10 : _ref$truncateThreshol,
     centered = _ref.centered,
+    showLabels = _ref.showLabels,
+    hideNumbers = _ref.hideNumbers,
+    onForward = _ref.onForward,
+    onBack = _ref.onBack,
+    forwardDisabled = _ref.forwardDisabled,
+    backDisabled = _ref.backDisabled,
+    forwardLabel = _ref.forwardLabel,
+    backLabel = _ref.backLabel,
     navProps = _objectWithoutProperties(_ref, _excluded);
-  // return early if no pagination is required
-  if (totalItems <= itemsPerPage) {
-    return null;
-  }
+  var isNumberedPagination = !!itemsPerPage && !!totalItems && !!currentPage && !!paginate;
   var pageNumbers = [];
-  for (var i = 1; i <= Math.ceil(totalItems / itemsPerPage); i++) {
-    pageNumbers.push(i);
+  if (isNumberedPagination) {
+    // return early if no pagination is required
+    if (totalItems <= itemsPerPage) {
+      return null;
+    }
+    for (var i = 1; i <= Math.ceil(totalItems / itemsPerPage); i++) {
+      pageNumbers.push(i);
+    }
   }
-  var changePage = function changePage(page) {
+  var changeNumberedPage = function changeNumberedPage(page) {
     paginate(page);
+    if (page > currentPage) {
+      onForward === null || onForward === void 0 ? void 0 : onForward(page);
+    }
+    if (page < currentPage) {
+      onBack === null || onBack === void 0 ? void 0 : onBack(page);
+    }
+    scrollToTop && scrollTop();
+  };
+  var changeButtonsOnlyPage = function changeButtonsOnlyPage(direction) {
+    if (direction === "forward") {
+      onForward === null || onForward === void 0 ? void 0 : onForward(undefined);
+    }
+    if (direction === "back") {
+      onBack === null || onBack === void 0 ? void 0 : onBack(undefined);
+    }
     scrollToTop && scrollTop();
   };
   return /*#__PURE__*/_react.default.createElement("nav", _extends({
@@ -125,17 +161,21 @@ var Pagination = function Pagination(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_PaginationButton.default, {
     key: "back",
     direction: "back",
-    disabled: currentPage === 1,
+    disabled: backDisabled || currentPage === 1,
     onClick: function onClick() {
-      return changePage(currentPage - 1);
-    }
-  }), generatePaginationItems(pageNumbers, currentPage, truncateThreshold, changePage), /*#__PURE__*/_react.default.createElement(_PaginationButton.default, {
+      return isNumberedPagination ? changeNumberedPage(currentPage - 1) : changeButtonsOnlyPage("back");
+    },
+    showLabel: showLabels,
+    label: backLabel
+  }), isNumberedPagination && !hideNumbers ? generatePaginationItems(pageNumbers, currentPage, truncateThreshold, changeNumberedPage) : null, /*#__PURE__*/_react.default.createElement(_PaginationButton.default, {
     key: "forward",
     direction: "forward",
-    disabled: currentPage === pageNumbers.length,
+    disabled: forwardDisabled || currentPage === pageNumbers.length,
     onClick: function onClick() {
-      return changePage(currentPage + 1);
-    }
+      return isNumberedPagination ? changeNumberedPage(currentPage + 1) : changeButtonsOnlyPage("forward");
+    },
+    showLabel: showLabels,
+    label: forwardLabel
   })));
 };
 var _default = Pagination;

package/dist/components/Pagination/PaginationButton/PaginationButton.d.ts

@@ -17,6 +17,14 @@ export type Props = {
      * Function to handle clicking the pagination button.
      */
     onClick: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Whether to show the label for button.
+     */
+    showLabel?: boolean;
+    /**
+     * Custom label for button.
+     */
+    label?: string;
 };
-declare const PaginationButton: ({ direction, onClick, disabled, }: Props) => JSX.Element;
+declare const PaginationButton: ({ direction, onClick, disabled, showLabel, label, }: Props) => JSX.Element;
 export default PaginationButton;

package/dist/components/Pagination/PaginationButton/PaginationButton.js

@@ -17,8 +17,10 @@ var PaginationButton = function PaginationButton(_ref) {
   var direction = _ref.direction,
     onClick = _ref.onClick,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var label = direction === "back" ? Label.Previous : Label.Next;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    showLabel = _ref.showLabel,
+    label = _ref.label;
+  var buttonLabel = label || (direction === "back" ? Label.Previous : Label.Next);
   return /*#__PURE__*/_react.default.createElement("li", {
     className: "p-pagination__item"
   }, /*#__PURE__*/_react.default.createElement("button", {
@@ -29,9 +31,9 @@ var PaginationButton = function PaginationButton(_ref) {
     disabled: disabled,
     onClick: onClick,
     type: "button"
-  }, /*#__PURE__*/_react.default.createElement("i", {
+  }, direction === "forward" && showLabel && /*#__PURE__*/_react.default.createElement("span", null, buttonLabel), /*#__PURE__*/_react.default.createElement("i", {
     className: "p-icon--chevron-down"
-  }, label)));
+  }, buttonLabel), direction === "back" && showLabel && /*#__PURE__*/_react.default.createElement("span", null, buttonLabel)));
 };
 var _default = PaginationButton;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.43.0",
+  "version": "0.45.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -79,7 +79,7 @@
     "ts-jest": "27.1.5",
     "tsc-alias": "1.8.6",
     "typescript": "4.9.5",
-    "vanilla-framework": "3.15.1",
+    "vanilla-framework": "4.0.0",
     "wait-on": "5.3.0",
     "webpack": "5.88.0"
   },
@@ -106,7 +106,7 @@
     "@types/react-dom": "^17.0.2 || ^18.0.0",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
-    "vanilla-framework": "3.15.1"
+    "vanilla-framework": "^3.15.1 || ^4.0.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",