@canonical/react-components 0.47.2 → 0.47.4

package/README.md

@@ -1,13 +1,10 @@
 # React components for Vanilla Framework
+![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)
 
 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
+ **[Storybook](https://canonical.github.io/react-components/)** contains component docs with usage instructions.
 
-See the [component docs](https://canonical.github.io/react-components/) for usage instructions.
-
-![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
 

package/dist/components/NotificationProvider/NotificationProvider.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.NotificationProvider = exports.NotificationConsumer = void 0;
 exports.useNotify = useNotify;
 var _react = _interopRequireWildcard(require("react"));
-var _reactRouterDom = require("react-router-dom");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _messageBuilder = require("./messageBuilder");
 var _Notification = _interopRequireWildcard(require("../Notification/Notification"));
@@ -24,7 +23,9 @@ const NotifyContext = /*#__PURE__*/(0, _react.createContext)({
 });
 const NotificationProvider = _ref => {
   let {
-    children
+    children,
+    state,
+    pathname
   } = _ref;
   const [notification, setNotification] = (0, _react.useState)(null);
   const clear = () => notification !== null && setNotification(null);
@@ -34,6 +35,14 @@ const NotificationProvider = _ref => {
     }
     return value;
   };
+  (0, _react.useEffect)(() => {
+    if (state !== null && state !== void 0 && state.queuedNotification) {
+      setDeduplicated(state.queuedNotification);
+      window.history.replaceState({}, "");
+    } else {
+      clear();
+    }
+  }, [state, pathname]);
   const helper = {
     notification,
     clear,
@@ -49,20 +58,7 @@ const NotificationProvider = _ref => {
 };
 exports.NotificationProvider = NotificationProvider;
 function useNotify() {
-  const ctx = (0, _react.useContext)(NotifyContext);
-  const {
-    state,
-    pathname
-  } = (0, _reactRouterDom.useLocation)();
-  (0, _react.useEffect)(() => {
-    if (state !== null && state !== void 0 && state.queuedNotification) {
-      ctx.setDeduplicated(state.queuedNotification);
-      window.history.replaceState({}, "");
-    } else {
-      ctx.clear();
-    }
-  }, [state, pathname]);
-  return ctx;
+  return (0, _react.useContext)(NotifyContext);
 }
 const NotificationConsumer = () => {
   const notify = useNotify();

package/dist/components/NotificationProvider/types.d.ts

@@ -2,6 +2,10 @@ import { ReactNode } from "react";
 import { ValueOf } from "../../types";
 import { NotificationSeverity } from "../Notification";
 export interface NotifyProviderProps {
+    state?: {
+        queuedNotification: NotificationType | null;
+    };
+    pathname?: string;
     children: ReactNode;
 }
 export interface NotificationAction {

package/dist/components/PasswordToggle/PasswordToggle.js

@@ -41,6 +41,8 @@ const PasswordToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const validationId = (0, _hooks.useId)();
   const helpId = (0, _hooks.useId)();
   const hasError = !!error;
+  const defaultPasswordToggleId = (0, _hooks.useId)();
+  const passwordToggleId = id || defaultPasswordToggleId;
   const togglePassword = () => {
     if (isPassword) {
       setIsPassword(false);
@@ -60,7 +62,7 @@ const PasswordToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "p-form-password-toggle"
   }, /*#__PURE__*/_react.default.createElement(_Label.default, {
-    forId: id,
+    forId: passwordToggleId,
     required: required
   }, label), /*#__PURE__*/_react.default.createElement(_Button.default, {
     appearance: "base",
@@ -79,7 +81,7 @@ const PasswordToggle = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     "aria-errormessage": hasError ? validationId : null,
     "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
-    id: id,
+    id: passwordToggleId,
     readOnly: readOnly,
     ref: ref,
     type: isPassword ? "password" : "text"

package/dist/components/Select/Select.js

@@ -47,6 +47,8 @@ const Select = _ref2 => {
   } = _ref2;
   const selectRef = (0, _react.useRef)(null);
   const validationId = (0, _hooks.useId)();
+  const defaultSelectId = (0, _hooks.useId)();
+  const selectId = id || defaultSelectId;
   const helpId = (0, _hooks.useId)();
   const hasError = !!error;
   (0, _react.useEffect)(() => {
@@ -58,7 +60,7 @@ const Select = _ref2 => {
     caution: caution,
     className: wrapperClassName,
     error: error,
-    forId: id,
+    forId: selectId,
     help: help,
     helpId: helpId,
     isSelect: true,
@@ -73,7 +75,7 @@ const Select = _ref2 => {
     "aria-errormessage": hasError ? validationId : null,
     "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
-    id: id,
+    id: selectId,
     onChange: evt => onChange && onChange(evt),
     ref: selectRef
   }, selectProps), generateOptions(options)));

package/dist/components/Slider/Slider.js

@@ -30,6 +30,8 @@ const Slider = _ref => {
   } = _ref;
   const validationId = (0, _hooks.useId)();
   const helpId = (0, _hooks.useId)();
+  const defaultSliderId = (0, _hooks.useId)();
+  const sliderId = id || defaultSliderId;
   const hasError = !!error;
   let style = {};
   if ((_navigator = navigator) !== null && _navigator !== void 0 && (_navigator = _navigator.userAgent) !== null && _navigator !== void 0 && _navigator.includes("AppleWebKit")) {
@@ -46,6 +48,7 @@ const Slider = _ref => {
     caution: caution,
     error: error,
     help: help,
+    forId: sliderId,
     helpId: helpId,
     label: label,
     required: required,
@@ -57,7 +60,7 @@ const Slider = _ref => {
     "aria-errormessage": hasError ? validationId : null,
     "aria-invalid": hasError,
     disabled: disabled,
-    id: id,
+    id: sliderId,
     max: max,
     min: min,
     onChange: onChange,

package/dist/components/TablePagination/TablePagination.scss

@@ -1,4 +1,4 @@
-@import "~vanilla-framework/scss/settings";
+@import "vanilla-framework/scss/settings";
 
 .pagination {
   align-items: baseline;

package/dist/components/Textarea/Textarea.js

@@ -40,6 +40,8 @@ const Textarea = _ref => {
   const helpId = (0, _hooks.useId)();
   const hasError = !!error;
   const [innerValue, setInnervalue] = (0, _react.useState)(props.defaultValue);
+  const defaultTextAreaId = (0, _hooks.useId)();
+  const textAreaId = id || defaultTextAreaId;
   (0, _react.useEffect)(() => {
     if (takeFocus) {
       textareaRef.current.focus();
@@ -59,7 +61,7 @@ const Textarea = _ref => {
     caution: caution,
     className: wrapperClassName,
     error: error,
-    forId: id,
+    forId: textAreaId,
     help: help,
     helpId: helpId,
     label: label,
@@ -73,7 +75,7 @@ const Textarea = _ref => {
     "aria-errormessage": hasError ? validationId : null,
     "aria-invalid": hasError,
     className: (0, _classnames.default)("p-form-validation__input", className),
-    id: id,
+    id: textAreaId,
     onKeyUp: evt => {
       onKeyUp && onKeyUp(evt);
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.47.2",
+  "version": "0.47.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -27,6 +27,8 @@
     "@babel/preset-typescript": "7.23.3",
     "@percy/cli": "1.27.6",
     "@percy/storybook": "4.3.7",
+    "@semantic-release/changelog": "6.0.3",
+    "@semantic-release/git": "10.0.1",
     "@storybook/addon-a11y": "7.6.7",
     "@storybook/addon-essentials": "7.6.7",
     "@storybook/addon-interactions": "7.6.7",
@@ -41,7 +43,6 @@
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
-    "@types/react-router-dom": "5.3.3",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "babel-jest": "27.5.1",
@@ -72,6 +73,7 @@
     "react-dom": "18.2.0",
     "sass": "1.69.7",
     "sass-loader": "10.5.1",
+    "semantic-release": "23.0.0",
     "storybook": "7.6.7",
     "style-loader": "3.3.3",
     "stylelint": "15.11.0",
@@ -95,7 +97,6 @@
     "classnames": "2.5.1",
     "nanoid": "3.3.7",
     "prop-types": "15.8.1",
-    "react-router-dom": "6.21.1",
     "react-table": "7.8.0",
     "react-useportal": "1.0.19"
   },
@@ -129,7 +130,6 @@
     "lint-package-json": "npmPkgJsonLint .",
     "lint": "yarn lint-package-json && yarn lint-js && yarn lint-style",
     "percy": "yarn build-docs && percy storybook ./docs",
-    "prepublishOnly": "yarn clean && yarn install && yarn build",
     "serve": "yarn docs",
     "start": "yarn docs",
     "test": "jest",
@@ -137,7 +137,9 @@
     "unlink-packages": "yarn unlink && cd node_modules/react && yarn unlink && cd ../react-dom && yarn unlink",
     "cypress:test": "wait-on http://localhost:${PORT:-9009} && cypress run --env port=${PORT:-9009}",
     "cypress:run": "cypress run --env port=${PORT:-9009}",
-    "cypress:open": "cypress open --env port=${PORT:-9009}"
+    "cypress:open": "cypress open --env port=${PORT:-9009}",
+    "semantic-release": "semantic-release",
+    "semantic-release-dry-run": "semantic-release --dry-run --no-ci"
   },
   "eslintConfig": {
     "extends": "react-app"