@canonical/react-components 0.37.4 → 0.37.5

package/README.md

@@ -1,13 +1,13 @@
-# React components for Vanilla Framework.
+# React components for Vanilla Framework
 
 This is a collection of components designed to be the way to consume [Vanilla Framework](http://vanillaframework.io) when using React.
 
 ## How to use the components
 
-See the [component docs](https://canonical-web-and-design.github.io/react-components/) for usage instructions.
+See the [component docs](https://canonical.github.io/react-components/) for usage instructions.
 
-![CI](https://github.com/canonical-web-and-design/react-components/workflows/CI/badge.svg?branch=main)
-![Cypress chrome headless](https://github.com/canonical-web-and-design/react-components/workflows/Cypress%20chrome%20headless/badge.svg)
+![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main)
+![Cypress chrome headless](https://github.com/canonical/react-components/workflows/Cypress%20chrome%20headless/badge.svg)
 
 ## Requirements
 
@@ -29,16 +29,16 @@ npm install @canonical/react-components
 
 ## Issues
 
-Please file any issues at [GitHub](https://github.com/canonical-web-and-design/react-components/issues).
+Please file any issues at [GitHub](https://github.com/canonical/react-components/issues).
 
 ## Contributing
 
 You might want to:
 
-- [View the source](https://github.com/canonical-web-and-design/react-components) on GitHub.
-- Read about [developing components](https://github.com/canonical-web-and-design/react-components/blob/main/HACKING.md).
-- Find out how to [publish to NPM](https://github.com/canonical-web-and-design/react-components/blob/main/PUBLISH-NPM-PACKAGE.md).
-- Know how to [publish the docs](https://github.com/canonical-web-and-design/react-components/blob/main/PUBLISHING-DOCS.md) to GitHub Pages.
+- [View the source](https://github.com/canonical/react-components) on GitHub.
+- Read about [developing components](https://github.com/canonical/react-components/blob/main/HACKING.md).
+- Find out how to [publish to NPM](https://github.com/canonical/react-components/blob/main/PUBLISH-NPM-PACKAGE.md).
+- Know how to [publish the docs](https://github.com/canonical/react-components/blob/main/PUBLISHING-DOCS.md) to GitHub Pages.
 
 ## Developing locally using this repository
 
@@ -47,7 +47,7 @@ You may wish to link this library directly to your projects while developing loc
 You can do this by cloning this repo to your local workspace;
 
 ```shell
-git clone https://github.com/canonical-web-and-design/react-components
+git clone https://github.com/canonical/react-components
 ```
 
 If you then drop into that folder and run;

package/dist/components/Accordion/Accordion.d.ts

@@ -1,5 +1,5 @@
 import { HTMLProps } from "react";
-import type { AccordionHeadings, AccordionSectionProps } from "../AccordionSection";
+import type { AccordionHeadings, AccordionSectionProps } from "./AccordionSection";
 import type { ClassName, PropsWithSpread } from "../../types";
 export declare type Section = AccordionSectionProps & {
     /**

package/dist/components/Accordion/Accordion.js

@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _AccordionSection = _interopRequireDefault(require("../AccordionSection"));
+var _AccordionSection = _interopRequireDefault(require("./AccordionSection"));
 
 var _excluded = ["key"],
     _excluded2 = ["className", "expanded", "externallyControlled", "onExpandedChange", "sections", "titleElement"];

package/dist/components/{AccordionSection → Accordion/AccordionSection}/AccordionSection.d.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { Headings } from "../../types";
+import type { Headings } from "../../../types";
 export declare type AccordionHeadings = Exclude<Headings, "h1">;
 export declare type Props = {
     /**

package/dist/components/{AccordionSection → Accordion/AccordionSection}/AccordionSection.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _useId = require("../../hooks/useId");
+var _useId = require("../../../hooks/useId");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/dist/components/{CheckableInput → CheckboxInput/CheckableInput}/CheckableInput.d.ts

@@ -1,6 +1,6 @@
 import { HTMLProps } from "react";
 import type { ReactNode } from "react";
-import type { PropsWithSpread } from "../../types";
+import type { PropsWithSpread } from "../../../types";
 export declare type Props = PropsWithSpread<{
     /**
      * The type of the input element.

package/dist/components/{CheckableInput → CheckboxInput/CheckableInput}/CheckableInput.js

@@ -11,7 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _useId = require("../../hooks/useId");
+var _useId = require("../../../hooks/useId");
 
 var _excluded = ["inputType", "label", "labelClassName", "indeterminate"];
 

package/dist/components/CheckboxInput/CheckboxInput.d.ts

@@ -1,4 +1,4 @@
-import type { Props as CheckableInputProps } from "../CheckableInput/CheckableInput";
+import type { CheckableInputProps } from "./CheckableInput";
 export declare type Props = Omit<CheckableInputProps, "inputType">;
 declare const CheckboxInput: ({ label, indeterminate, ...checkboxProps }: Props) => JSX.Element;
 export default CheckboxInput;

package/dist/components/CheckboxInput/CheckboxInput.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _CheckableInput = _interopRequireDefault(require("../CheckableInput"));
+var _CheckableInput = _interopRequireDefault(require("./CheckableInput"));
 
 var _excluded = ["label", "indeterminate"];
 

package/dist/components/Loader/Loader.js

@@ -18,7 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 var Loader = function Loader(props) {
   if (_utils.IS_DEV) {
-    console.warn("The Loader component has been renamed to Spinner and will be removed in a future release. https://canonical-web-and-design.github.io/react-components/?path=/story/spinner--default-story");
+    console.warn("The Loader component has been renamed to Spinner and will be removed in a future release. https://canonical.github.io/react-components/?path=/story/spinner--default-story");
   }
 
   return /*#__PURE__*/_react.default.createElement(_Spinner.default, props);

package/dist/components/Modal/Modal.js

@@ -61,7 +61,7 @@ var Modal = function Modal(_ref) {
     }
   };
 
-  var keyListenersMap = new Map([[27, close], [9, handleTabKey]]);
+  var keyListenersMap = new Map([["Escape", close], ["Tab", handleTabKey]]);
   (0, _react.useEffect)(function () {
     modalRef.current.focus();
   }, [modalRef]);
@@ -73,7 +73,7 @@ var Modal = function Modal(_ref) {
   }, []);
   (0, _react.useEffect)(function () {
     var keyDown = function keyDown(e) {
-      var listener = keyListenersMap.get(e.keyCode);
+      var listener = keyListenersMap.get(e.code);
       return listener && listener(e);
     };
 

package/dist/components/Notification/Notification.js

@@ -76,7 +76,7 @@ var Notification = function Notification(_ref) {
   }, [onDismiss, timeout]);
 
   if (_utils.IS_DEV && (close || status || type)) {
-    console.warn("The Notification component is using deprecated props. Refer to the deprecated list for details: https://canonical-web-and-design.github.io/react-components/?path=/docs/notification--information#deprecated");
+    console.warn("The Notification component is using deprecated props. Refer to the deprecated list for details: https://canonical.github.io/react-components/?path=/docs/notification--information#deprecated");
   }
 
   return /*#__PURE__*/_react.default.createElement("div", _extends({

package/dist/components/Pagination/Pagination.js

@@ -7,9 +7,9 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _PaginationButton = _interopRequireDefault(require("../PaginationButton"));
+var _PaginationButton = _interopRequireDefault(require("./PaginationButton"));
 
-var _PaginationItem = _interopRequireDefault(require("../PaginationItem"));
+var _PaginationItem = _interopRequireDefault(require("./PaginationItem"));
 
 var _excluded = ["itemsPerPage", "totalItems", "paginate", "currentPage", "scrollToTop", "truncateThreshold"];
 

package/dist/components/RadioInput/RadioInput.d.ts

@@ -1,4 +1,4 @@
-import type { Props as CheckableInputProps } from "../CheckableInput/CheckableInput";
+import type { CheckableInputProps } from "../CheckboxInput/CheckableInput";
 export declare type Props = Omit<CheckableInputProps, "inputType">;
 declare const RadioInput: ({ label, ...radioProps }: Props) => JSX.Element;
 export default RadioInput;

package/dist/components/RadioInput/RadioInput.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _CheckableInput = _interopRequireDefault(require("../CheckableInput"));
+var _CheckableInput = _interopRequireDefault(require("../CheckboxInput/CheckableInput"));
 
 var _excluded = ["label"];
 

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { default as Accordion } from "./components/Accordion";
 export { default as ActionButton } from "./components/ActionButton";
 export { default as ArticlePagination } from "./components/ArticlePagination";
+export { default as Badge } from "./components/Badge";
 export { default as Button, ButtonAppearance } from "./components/Button";
 export { default as Card } from "./components/Card";
 export { default as CheckboxInput } from "./components/CheckboxInput";
@@ -43,12 +44,11 @@ export { default as Tabs } from "./components/Tabs";
 export { default as Textarea } from "./components/Textarea";
 export { default as Tooltip } from "./components/Tooltip";
 export type { AccordionProps } from "./components/Accordion";
-export type { AccordionHeadings, AccordionSectionProps, } from "./components/AccordionSection";
 export type { ActionButtonProps } from "./components/ActionButton";
 export type { ArticlePaginationProps } from "./components/ArticlePagination";
+export type { BadgeProps } from "./components/Badge";
 export type { ButtonProps } from "./components/Button";
 export type { CardProps } from "./components/Card";
-export type { CheckableInputProps } from "./components/CheckableInput";
 export type { CheckboxInputProps } from "./components/CheckboxInput";
 export type { ChipProps } from "./components/Chip";
 export type { CodeProps } from "./components/Code";
@@ -85,7 +85,7 @@ export type { TableRowProps } from "./components/TableRow";
 export type { TabsProps } from "./components/Tabs";
 export type { TextareaProps } from "./components/Textarea";
 export type { TooltipProps } from "./components/Tooltip";
-export { useClickOutside, useId, useListener, useOnEscapePressed, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
+export { useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
 export type { WindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";
 export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";

package/dist/index.js

@@ -23,6 +23,12 @@ Object.defineProperty(exports, "ArticlePagination", {
     return _ArticlePagination.default;
   }
 });
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function get() {
+    return _Badge.default;
+  }
+});
 Object.defineProperty(exports, "Button", {
   enumerable: true,
   get: function get() {
@@ -341,6 +347,12 @@ Object.defineProperty(exports, "useOnEscapePressed", {
     return _hooks.useOnEscapePressed;
   }
 });
+Object.defineProperty(exports, "usePagination", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.usePagination;
+  }
+});
 Object.defineProperty(exports, "usePrevious", {
   enumerable: true,
   get: function get() {
@@ -366,6 +378,8 @@ var _ActionButton = _interopRequireDefault(require("./components/ActionButton"))
 
 var _ArticlePagination = _interopRequireDefault(require("./components/ArticlePagination"));
 
+var _Badge = _interopRequireDefault(require("./components/Badge"));
+
 var _Button = _interopRequireWildcard(require("./components/Button"));
 
 var _Card = _interopRequireDefault(require("./components/Card"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.37.4",
+  "version": "0.37.5",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -15,89 +15,92 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git@github.com:canonical-web-and-design/react-components.git"
+    "url": "git@github.com:canonical/react-components.git"
   },
   "bugs": {
-    "url": "https://github.com/canonical-web-and-design/react-components/issues"
+    "url": "https://github.com/canonical/react-components/issues"
   },
-  "homepage": "/react-components/",
+  "homepage": "https://canonical.github.io/react-components",
   "devDependencies": {
-    "@babel/cli": "7.17.10",
-    "@babel/eslint-parser": "7.18.2",
-    "@babel/preset-typescript": "7.17.12",
-    "@percy/cli": "1.2.1",
-    "@percy/storybook": "4.2.1",
-    "@storybook/addon-a11y": "6.4.22",
-    "@storybook/addon-controls": "6.4.22",
+    "@babel/cli": "7.18.9",
+    "@babel/eslint-parser": "7.18.9",
+    "@babel/preset-typescript": "7.18.6",
+    "@percy/cli": "1.7.2",
+    "@percy/storybook": "4.3.1",
+    "@storybook/addon-a11y": "6.5.10",
+    "@storybook/addon-controls": "6.5.10",
     "@storybook/addon-docs": "6.4.22",
-    "@storybook/addons": "6.4.22",
-    "@storybook/react": "6.4.22",
-    "@storybook/theming": "6.4.22",
-    "@testing-library/cypress": "8.0.2",
-    "@testing-library/dom": "8.14.0",
+    "@storybook/addons": "6.5.10",
+    "@storybook/builder-webpack5": "6.5.10",
+    "@storybook/manager-webpack5": "6.5.10",
+    "@storybook/react": "6.5.10",
+    "@storybook/theming": "6.5.10",
+    "@testing-library/cypress": "8.0.3",
+    "@testing-library/dom": "8.16.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "7.0.2",
-    "@testing-library/user-event": "13.5.0",
-    "@typescript-eslint/eslint-plugin": "5.29.0",
-    "@typescript-eslint/parser": "5.29.0",
+    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/user-event": "14.3.0",
+    "@typescript-eslint/eslint-plugin": "5.32.0",
+    "@typescript-eslint/parser": "5.32.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "babel-jest": "27.5.1",
     "babel-loader": "8.2.5",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-typescript-to-proptypes": "2.0.0",
-    "concurrently": "7.2.1",
-    "css-loader": "5.2.7",
+    "concurrently": "7.3.0",
+    "css-loader": "6.7.1",
     "cypress": "9.7.0",
     "deepmerge": "4.2.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
-    "eslint": "8.16.0",
+    "eslint": "8.21.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.30.0",
-    "eslint-plugin-react-hooks": "4.5.0",
-    "eslint-plugin-testing-library": "5.5.1",
+    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-react": "7.30.1",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-testing-library": "5.6.0",
     "jest": "27.5.1",
     "npm-package-json-lint": "5.4.2",
-    "prettier": "2.6.2",
+    "prettier": "2.7.1",
     "react": "17.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "17.0.2",
-    "sass": "1.52.2",
-    "sass-loader": "10.2.1",
-    "style-loader": "2.0.0",
-    "stylelint": "14.8.5",
+    "sass": "1.54.0",
+    "sass-loader": "10.3.1",
+    "style-loader": "3.3.1",
+    "stylelint": "14.9.1",
     "stylelint-config-prettier": "9.0.3",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "2.0.0",
     "ts-jest": "27.1.5",
-    "tsc-alias": "1.6.8",
-    "typescript": "4.7.2",
+    "tsc-alias": "1.7.0",
+    "typescript": "4.7.4",
     "vanilla-framework": "3.6.1",
-    "wait-on": "5.3.0"
+    "wait-on": "5.3.0",
+    "webpack": "5.74.0"
   },
   "dependencies": {
     "@types/jest": "27.5.2",
-    "@types/node": "16.11.38",
-    "@types/react": "17.0.45",
+    "@types/node": "16.11.47",
+    "@types/react": "17.0.48",
     "@types/react-dom": "17.0.17",
     "@types/react-table": "7.7.12",
     "classnames": "2.3.1",
     "nanoid": "3.3.4",
     "prop-types": "15.8.1",
     "react-table": "7.8.0",
-    "react-useportal": "1.0.16"
+    "react-useportal": "1.0.17"
   },
   "resolutions": {
-    "@types/react": "17.0.45",
+    "@types/react": "17.0.48",
     "@types/react-dom": "17.0.17",
     "postcss": "^8.3.11"
   },