@bigbinary/neetoui 5.1.3 → 5.1.5

package/index.d.ts

@@ -119,6 +119,7 @@ export interface AlertProps {
   message?: React.ReactNode;
   submitButtonLabel?: string;
   cancelButtonLabel?: string;
+  initialFocusElement?: "cancel" | "submit";
 }
 
 export type AvatarProps = {
@@ -324,7 +325,7 @@ export type SelectProps = {
   id?: string;
   loadOptions?: boolean;
   labelProps?: LabelProps;
-  optionRemapping?: { label?: string, value?: string }
+  optionRemapping?: { label?: string; value?: string };
   [key: string]: any;
 };
 

package/index.js

@@ -10208,7 +10208,7 @@ var UniqueArray = /*#__PURE__*/function () {
 var renderFocusOnFocusableElements = function renderFocusOnFocusableElements(ref) {
   var _ref$current, _ref$current2;
   var shouldFocusFirstFocusableElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var focusableElements = '[href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+  var focusableElements = 'button,[href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
   var firstFocusableElement = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelectorAll(focusableElements)[0];
   var focusableContent = ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.querySelectorAll(focusableElements);
   var lastFocusableElement = focusableContent[(focusableContent === null || focusableContent === void 0 ? void 0 : focusableContent.length) - 1];
@@ -17326,6 +17326,10 @@ var SIZES$6 = {
   medium: "medium",
   large: "large"
 };
+var FOCUSABLE_ELEMENTS = {
+  submit: "submit",
+  cancel: "cancel"
+};
 var Alert = function Alert(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? SIZES$6.medium : _ref$size,
@@ -17354,8 +17358,14 @@ var Alert = function Alert(_ref) {
     _ref$submitButtonLabe = _ref.submitButtonLabel,
     submitButtonLabel = _ref$submitButtonLabe === void 0 ? "Continue" : _ref$submitButtonLabe,
     _ref$cancelButtonLabe = _ref.cancelButtonLabel,
-    cancelButtonLabel = _ref$cancelButtonLabe === void 0 ? "Cancel" : _ref$cancelButtonLabe;
-  return /*#__PURE__*/React__default.createElement(Modal, {
+    cancelButtonLabel = _ref$cancelButtonLabe === void 0 ? "Cancel" : _ref$cancelButtonLabe,
+    initialFocusRef = _ref.initialFocusRef,
+    initialFocusElement = _ref.initialFocusElement;
+  var submitButtonRef = useRef(null);
+  var cancelButtonRef = useRef(null);
+  var hasCustomFocusableElement = !!initialFocusRef || initialFocusElement;
+  var initialFocusElementRef = initialFocusElement === FOCUSABLE_ELEMENTS.submit ? submitButtonRef : cancelButtonRef;
+  return /*#__PURE__*/React__default.createElement(Modal, _extends$4({
     backdropClassName: backdropClassName,
     className: className,
     closeButton: closeButton,
@@ -17364,7 +17374,9 @@ var Alert = function Alert(_ref) {
     isOpen: isOpen,
     size: size,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(Modal.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
+  }, hasCustomFocusableElement && {
+    initialFocusRef: initialFocusRef || initialFocusElementRef
+  }), /*#__PURE__*/React__default.createElement(Modal.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
     "data-cy": "alert-title",
     style: "h2"
   }, title)), /*#__PURE__*/React__default.createElement(Modal.Body, null, /*#__PURE__*/React__default.createElement(Typography, {
@@ -17378,11 +17390,13 @@ var Alert = function Alert(_ref) {
     disabled: !isOpen,
     label: submitButtonLabel,
     loading: isSubmitting,
+    ref: submitButtonRef,
     style: "danger",
     onClick: onSubmit
   }), /*#__PURE__*/React__default.createElement(Button, {
     "data-cy": "alert-cancel-button",
     label: cancelButtonLabel,
+    ref: cancelButtonRef,
     style: "text",
     onClick: onClose
   })));