@canonical/react-components 0.47.2 → 0.47.3

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.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -41,7 +41,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",
@@ -95,7 +94,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"
   },