@canonical/react-components 0.37.8 → 0.37.9

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.37.8",
+  "version": "0.37.9",
   "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.10.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.10.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",