@canonical/react-components 0.37.8 → 0.38.0

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

@@ -52,10 +52,14 @@ export declare type Props = PropsWithSpread<{
      * Whether to focus on the input on initial render.
      */
     takeFocus?: boolean;
+    /**
+     * Delay takeFocus in milliseconds i.e. to let animations finish
+     */
+    takeFocusDelay?: number;
     /**
      * Optional class(es) to pass to the wrapping Field component
      */
     wrapperClassName?: string;
 }, InputHTMLAttributes<HTMLInputElement>>;
-declare const Input: ({ caution, className, error, help, helpClassName, 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, takeFocusDelay, 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", "helpClassName", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "type", "wrapperClassName"];
+var _excluded = ["caution", "className", "error", "help", "helpClassName", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "takeFocusDelay", "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); }
 
@@ -52,6 +52,7 @@ var Input = function Input(_ref) {
       stacked = _ref.stacked,
       success = _ref.success,
       takeFocus = _ref.takeFocus,
+      takeFocusDelay = _ref.takeFocusDelay,
       type = _ref.type,
       wrapperClassName = _ref.wrapperClassName,
       inputProps = _objectWithoutProperties(_ref, _excluded);
@@ -73,7 +74,13 @@ var Input = function Input(_ref) {
 
   (0, _react.useEffect)(function () {
     if (takeFocus) {
-      inputRef.current.focus();
+      if (takeFocusDelay) {
+        setTimeout(function () {
+          return inputRef.current.focus();
+        }, takeFocusDelay);
+      } else {
+        inputRef.current.focus();
+      }
     }
   }, [takeFocus]);
   var input;

package/dist/components/Modal/Modal.js

@@ -61,7 +61,12 @@ var Modal = function Modal(_ref) {
     }
   };
 
-  var keyListenersMap = new Map([["Escape", close], ["Tab", handleTabKey]]);
+  var handleEscKey = function handleEscKey(e) {
+    e.nativeEvent.stopImmediatePropagation();
+    close();
+  };
+
+  var keyListenersMap = new Map([["Escape", handleEscKey], ["Tab", handleTabKey]]);
   (0, _react.useEffect)(function () {
     modalRef.current.focus();
   }, [modalRef]);
@@ -69,7 +74,13 @@ var Modal = function Modal(_ref) {
     var _focusableModalElemen;
 
     focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
-    (_focusableModalElemen = focusableModalElements.current[0]) === null || _focusableModalElemen === void 0 ? void 0 : _focusableModalElemen.focus();
+    var focusIndex = 0; // when the close button is rendered, focus on the 2nd content element and not the close btn.
+
+    if (close && focusableModalElements.current.length > 1) {
+      focusIndex = 1;
+    }
+
+    (_focusableModalElemen = focusableModalElements.current[focusIndex]) === null || _focusableModalElemen === void 0 ? void 0 : _focusableModalElemen.focus();
   }, []);
   (0, _react.useEffect)(function () {
     var keyDown = function keyDown(e) {

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.8",
+  "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.8.2",
+    "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.8.2"
+    "vanilla-framework": "3.11.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",