@canonical/react-components 0.37.9 → 0.38.0

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

@@ -19,6 +19,10 @@ export declare type Props<D extends Record<string, unknown>> = PropsWithSpread<{
      * Optional extra row to display underneath the main table content.
      */
     footer?: ReactNode;
+    /**
+     * Optional argument to make the tables be sortable and use the `useSortBy` plugin.
+     */
+    sortable?: Boolean;
     /**
      * This function is used to resolve any props needed for a particular column's header cell.
      */
@@ -33,5 +37,5 @@ export declare type Props<D extends Record<string, unknown>> = PropsWithSpread<{
     getCellProps?: (cell: Cell<D>) => Partial<TableCellProps & HTMLProps<HTMLTableCellElement>>;
     getRowId?: UseTableOptions<D>["getRowId"];
 }, HTMLProps<HTMLTableElement>>;
-declare function ModularTable({ data, columns, emptyMsg, footer, getHeaderProps, getRowProps, getCellProps, getRowId, ...props }: Props<Record<string, unknown>>): JSX.Element;
+declare function ModularTable({ data, columns, emptyMsg, footer, sortable, getHeaderProps, getRowProps, getCellProps, getRowId, ...props }: Props<Record<string, unknown>>): JSX.Element;
 export default ModularTable;

package/dist/components/ModularTable/ModularTable.js

@@ -19,7 +19,7 @@ var _TableCell = _interopRequireDefault(require("../TableCell"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-var _excluded = ["data", "columns", "emptyMsg", "footer", "getHeaderProps", "getRowProps", "getCellProps", "getRowId"];
+var _excluded = ["data", "columns", "emptyMsg", "footer", "sortable", "getHeaderProps", "getRowProps", "getCellProps", "getRowId"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -40,6 +40,7 @@ function ModularTable(_ref) {
       columns = _ref.columns,
       emptyMsg = _ref.emptyMsg,
       footer = _ref.footer,
+      sortable = _ref.sortable,
       getHeaderProps = _ref.getHeaderProps,
       getRowProps = _ref.getRowProps,
       getCellProps = _ref.getCellProps,
@@ -50,7 +51,7 @@ function ModularTable(_ref) {
     columns: columns,
     data: data,
     getRowId: getRowId || undefined
-  }),
+  }, sortable ? _reactTable.useSortBy : undefined),
       getTableProps = _useTable.getTableProps,
       getTableBodyProps = _useTable.getTableBodyProps,
       headerGroups = _useTable.headerGroups,
@@ -60,11 +61,14 @@ function ModularTable(_ref) {
   var showEmpty = !!emptyMsg && (!rows || rows.length === 0);
   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, column.getHeaderProps([{
+      return /*#__PURE__*/_react.default.createElement(_TableHeader.default, _extends({
+        sort: column.isSorted ? column.isSortedDesc ? "descending" : "ascending" : "none"
+      }, column.getHeaderProps([{
         className: column.className
       }, {
         className: column.getCellIcon ? "p-table__cell--icon-placeholder" : ""
-      }, _objectSpread({}, getHeaderProps === null || getHeaderProps === void 0 ? void 0 : getHeaderProps(column))]), column.render("Header"));
+      }, _objectSpread({}, getHeaderProps === null || getHeaderProps === void 0 ? void 0 : getHeaderProps(column)), // Only call this if we want it to be sortable too.
+      sortable ? column.getSortByToggleProps() : {}])), column.render("Header"));
     }));
   })), /*#__PURE__*/_react.default.createElement("tbody", getTableBodyProps(), rows.map(function (row) {
     // This function is responsible for lazily preparing a row for rendering.

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

@@ -25,6 +25,10 @@ export declare type Props = PropsWithSpread<{
      * The number of pages at which to truncate the pagination items.
      */
     truncateThreshold?: number;
+    /**
+     * Whether or not the pagination is ceneterd on the page.
+     */
+    centered?: boolean;
 }, HTMLProps<HTMLElement>>;
-declare const Pagination: ({ itemsPerPage, totalItems, paginate, currentPage, scrollToTop, truncateThreshold, ...navProps }: Props) => JSX.Element;
+declare const Pagination: ({ itemsPerPage, totalItems, paginate, currentPage, scrollToTop, truncateThreshold, centered, ...navProps }: Props) => JSX.Element;
 export default Pagination;

package/dist/components/Pagination/Pagination.js

@@ -5,16 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+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"];
+var _excluded = ["itemsPerPage", "totalItems", "paginate", "currentPage", "scrollToTop", "truncateThreshold", "centered"];
 
 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; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -121,6 +125,7 @@ var Pagination = function Pagination(_ref) {
       scrollToTop = _ref.scrollToTop,
       _ref$truncateThreshol = _ref.truncateThreshold,
       truncateThreshold = _ref$truncateThreshol === void 0 ? 10 : _ref$truncateThreshol,
+      centered = _ref.centered,
       navProps = _objectWithoutProperties(_ref, _excluded);
 
   // return early if no pagination is required
@@ -139,8 +144,13 @@ var Pagination = function Pagination(_ref) {
     scrollToTop && scrollTop();
   };
 
-  return /*#__PURE__*/_react.default.createElement("nav", navProps, /*#__PURE__*/_react.default.createElement("ul", {
-    className: "p-pagination"
+  return /*#__PURE__*/_react.default.createElement("nav", _extends({
+    className: "p-pagination",
+    "aria-label": "Pagination"
+  }, navProps), /*#__PURE__*/_react.default.createElement("ol", {
+    className: (0, _classnames.default)("p-pagination__items", {
+      "u-align--center": centered
+    })
   }, /*#__PURE__*/_react.default.createElement(_PaginationButton.default, {
     key: "back",
     direction: "back",

package/dist/components/Slider/Slider.js

@@ -53,9 +53,11 @@ var Slider = function Slider(_ref) {
   var style = {};
 
   if ((_navigator = navigator) !== null && _navigator !== void 0 && (_navigator$userAgent = _navigator.userAgent) !== null && _navigator$userAgent !== void 0 && _navigator$userAgent.includes("AppleWebKit")) {
+    var _inputProps$value;
+
     // Range inputs on Webkit browsers don't have a built-in "filled" portion,
     // so instead it is handled here as a background.
-    var val = inputProps.value || inputProps.defaultValue;
+    var val = (_inputProps$value = inputProps.value) !== null && _inputProps$value !== void 0 ? _inputProps$value : inputProps.defaultValue;
     var filledPercentage = "".concat((Number(val) - min) / (max - min) * 100, "%");
     style = {
       background: "linear-gradient(\n        to right,\n        ".concat(FILLED_COLOR, " 0%,\n        ").concat(FILLED_COLOR, " ").concat(filledPercentage, ",\n        ").concat(EMPTY_COLOR, " ").concat(filledPercentage, ",\n        ").concat(EMPTY_COLOR, " 100%\n      )")

package/dist/types/react-table-config.d.js

@@ -1,3 +1,5 @@
 "use strict";
 
-require("react-table");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.37.9",
+  "version": "0.38.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.7.0",
     "typescript": "4.7.4",
-    "vanilla-framework": "3.10.0",
+    "vanilla-framework": "3.11.0",
     "wait-on": "5.3.0",
     "webpack": "5.74.0"
   },
@@ -103,7 +103,7 @@
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
-    "vanilla-framework": "3.10.0"
+    "vanilla-framework": "3.11.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",