@canonical/react-components 0.50.0 → 0.50.2

package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.js

@@ -8,11 +8,9 @@ var _Button = _interopRequireDefault(require("../../Button"));
 var _Icon = _interopRequireDefault(require("../../Icon"));
 var _Input = _interopRequireDefault(require("../../Input"));
 var _Select = _interopRequireDefault(require("../../Select"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
-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 _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); }
 const TablePaginationControls = _ref => {
@@ -29,10 +27,7 @@ const TablePaginationControls = _ref => {
     onPageSizeChange,
     ...divProps
   } = _ref;
-  const descriptionRef = (0, _react.useRef)(null);
-  const isSmallScreen = (0, _utils.useFigureSmallScreen)({
-    descriptionRef
-  });
+  const isSmallScreen = (0, _utils.useFigureSmallScreen)();
   const totalPages = Math.ceil(totalItems / pageSize);
   const descriptionDisplay = (0, _utils.getDescription)({
     description,
@@ -64,7 +59,7 @@ const TablePaginationControls = _ref => {
     role: "navigation"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "description",
-    ref: descriptionRef
+    id: "pagination-description"
   }, descriptionDisplay), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": "Previous page",
     className: "back",
@@ -92,7 +87,7 @@ const TablePaginationControls = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "chevron-down"
   })), /*#__PURE__*/_react.default.createElement(_Select.default, {
-    className: "items-per-page",
+    className: "u-no-margin--bottom",
     label: "Items per page",
     labelClassName: "u-off-screen",
     id: "itemsPerPage",

package/dist/components/TablePagination/utils.d.ts

@@ -1,9 +1,9 @@
-import { ReactElement, ReactNode, RefObject } from "react";
+import { ReactElement, ReactNode } from "react";
 /**
  * Determine if we are working with a small screen.
  * 'small screen' in this case is relative to the width of the description div
  */
-export declare const figureSmallScreen: (descriptionRef: RefObject<HTMLDivElement>) => boolean;
+export declare const figureSmallScreen: () => boolean;
 /**
  * Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
  * for those child components.
@@ -24,6 +24,4 @@ export declare const getDescription: ({ description, data, isSmallScreen, totalI
     totalItems: number;
     itemName: string;
 }) => string | number | true | ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>;
-export declare const useFigureSmallScreen: (args: {
-    descriptionRef: RefObject<HTMLDivElement>;
-}) => boolean;
+export declare const useFigureSmallScreen: () => boolean;

package/dist/components/TablePagination/utils.js

@@ -9,8 +9,8 @@ var _react = require("react");
  * Determine if we are working with a small screen.
  * 'small screen' in this case is relative to the width of the description div
  */
-const figureSmallScreen = descriptionRef => {
-  const descriptionElement = descriptionRef.current;
+const figureSmallScreen = () => {
+  const descriptionElement = document.getElementById("pagination-description");
   if (!descriptionElement) {
     return true;
   }
@@ -62,20 +62,17 @@ const getDescription = _ref => {
   return "Showing ".concat(visibleCount, " out of ").concat(totalItems, " ").concat(itemName).concat(totalItems !== 1 ? "s" : "");
 };
 exports.getDescription = getDescription;
-const useFigureSmallScreen = args => {
-  const {
-    descriptionRef
-  } = args;
+const useFigureSmallScreen = () => {
   const [isSmallScreen, setSmallScreen] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     const handleResize = () => {
-      setSmallScreen(figureSmallScreen(descriptionRef));
+      setSmallScreen(figureSmallScreen());
     };
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [isSmallScreen, descriptionRef]);
+  }, []);
   return isSmallScreen;
 };
 exports.useFigureSmallScreen = useFigureSmallScreen;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.50.0",
+  "version": "0.50.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",