armtek-uikit-react 1.0.256 → 1.0.258

package/ui/Form/FormControls/FormControls.d.ts

@@ -1,8 +1,8 @@
 import { ButtonProps } from '../../../ui/Button';
 import { ComponentPropsWithoutRef, MouseEvent } from 'react';
 type OwnProps = {
-    onSubmit?: (e: MouseEvent<HTMLButtonElement>) => void;
-    onCancel?: (e: MouseEvent<HTMLButtonElement>) => void;
+    onSubmit?: (e?: MouseEvent<HTMLButtonElement>) => void;
+    onCancel?: (e?: MouseEvent<HTMLButtonElement>) => void;
     submitProps?: Omit<ButtonProps<'button'>, 'children'> & {
         text: string;
     };

package/ui/Modal/BaseModal.d.ts

@@ -1,8 +1,17 @@
 import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
 import { FormControlsProps } from '../../ui/Form/FormControls';
+export type ModalClasses = Partial<{
+    root: string;
+    header: string;
+    title: string;
+    close: string;
+    body: string;
+    footer: string;
+    formControls: string;
+}>;
 export type BaseModalProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & Partial<Omit<FormControlsProps, 'title'>> & {
-    onClose?: (e?: MouseEvent<any>) => void;
-    classes?: Record<string, string>;
+    onClose?: (e?: MouseEvent<any> | KeyboardEvent) => void;
+    classes?: ModalClasses;
     title?: ReactNode;
 };
 export declare const BaseModal: (props: BaseModalProps) => import("react/jsx-runtime").JSX.Element;

package/ui/Modal/BaseModal.js

@@ -3,6 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.BaseModal = void 0;
+var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _FormControls = _interopRequireDefault(require("../Form/FormControls"));
 var _ButtonIcon = _interopRequireDefault(require("../ButtonIcon"));
@@ -22,20 +23,27 @@ const BaseModal = props => {
     ...divProps
   } = props;
   const showControls = !!onSubmit || !!onCancel;
+  const titleId = (0, _react.useId)();
+  const hasTitle = !!title;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ...divProps,
-      className: (0, _clsx.default)(className, 'arm-modal', classes == null ? void 0 : classes['Arm-Modal']),
+      role: 'dialog',
+      "aria-modal": true,
+      "aria-labelledby": hasTitle ? titleId : undefined,
+      tabIndex: -1,
+      className: (0, _clsx.default)(className, 'arm-modal', classes == null ? void 0 : classes.root),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: 'arm-modal__inner',
         children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _clsx.default)('arm-modal__header', classes == null ? void 0 : classes['Arm-Modal__header']),
+          className: (0, _clsx.default)('arm-modal__header', classes == null ? void 0 : classes.header),
           children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: (0, _clsx.default)('arm-modal__title', classes == null ? void 0 : classes['Arm-Modal__title']),
+            id: titleId,
+            className: (0, _clsx.default)('arm-modal__title', classes == null ? void 0 : classes.title),
             children: [title, onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonIcon.default, {
               variant: 'transparent',
               onClick: onClose,
-              className: (0, _clsx.default)('arm-modal__close', classes == null ? void 0 : classes['Arm-Modal__close']),
+              className: (0, _clsx.default)('arm-modal__close', classes == null ? void 0 : classes.close),
               color: 'neutral',
               size: 'medium',
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -44,15 +52,25 @@ const BaseModal = props => {
               })
             })]
           })
+        }), !title && onClose && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonIcon.default, {
+          variant: 'transparent',
+          onClick: onClose,
+          className: (0, _clsx.default)('arm-modal__close', 'arm-modal__close_noHeader', classes == null ? void 0 : classes.close),
+          color: 'neutral',
+          size: 'medium',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: 'material_icon',
+            children: "close"
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _clsx.default)(_const.MODAL_BODY_CLASSNAME, classes == null ? void 0 : classes['Arm-Modal__body']),
+          className: (0, _clsx.default)(_const.MODAL_BODY_CLASSNAME, classes == null ? void 0 : classes.body),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             children: children
           })
         }), showControls && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _clsx.default)(_const.MODAL_FOOTER_CLASSNAME, classes == null ? void 0 : classes['Arm-Modal__footer']),
+          className: (0, _clsx.default)(_const.MODAL_FOOTER_CLASSNAME, classes == null ? void 0 : classes.footer),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormControls.default, {
-            className: (0, _clsx.default)(classes == null ? void 0 : classes['Arm-FormControls'], 'arm-modal__controls'),
+            className: (0, _clsx.default)(classes == null ? void 0 : classes.formControls, 'arm-modal__controls'),
             onSubmit: onSubmit,
             onCancel: onCancel,
             submitProps: submitProps,

package/ui/Modal/Modal.d.ts

@@ -2,7 +2,7 @@ import { BaseModalProps } from './BaseModal';
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 export type ModalProps = BaseModalProps & {
     open?: boolean;
-    width?: number;
+    width?: number | 'auto';
     transitionProps?: Partial<CSSTransitionProps<HTMLElement>>;
 };
 declare const Modal: (props: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/ui/Modal/Modal.js

@@ -10,8 +10,19 @@ var _BackDrop = _interopRequireDefault(require("../BackDrop"));
 var _reactTransitionGroup = require("react-transition-group");
 var _const = require("../Form/FormControls/const");
 var _const2 = require("./const");
+var _useEventCallback = _interopRequireDefault(require("../../lib/hooks/useEventCallback"));
 var _jsxRuntime = require("react/jsx-runtime");
 const BACKDROP_CLASSNAME = 'arm-modal__backdrop';
+function isTopmostModal(backdropContainer) {
+  let nextElement = backdropContainer.nextElementSibling;
+  while (nextElement) {
+    if (nextElement.classList.contains(BACKDROP_CLASSNAME)) {
+      return false;
+    }
+    nextElement = nextElement.nextElementSibling;
+  }
+  return true;
+}
 function replaceControlsIfExists(container, props) {
   var _props$classes, _props$classes2;
   if (!container) return;
@@ -22,7 +33,7 @@ function replaceControlsIfExists(container, props) {
   if (controls[0].querySelector(`.${_const.FORM_CONTROLS_SKIP_REPLACE_CLASSNAME}`)) return;
   const footer = document.createElement("div");
   footer.classList.add(_const2.MODAL_FOOTER_CLASSNAME);
-  if ((_props$classes = props.classes) != null && _props$classes['Arm-Modal__footer']) footer.classList.add((_props$classes2 = props.classes) == null ? void 0 : _props$classes2['Arm-Modal__footer']);
+  if ((_props$classes = props.classes) != null && _props$classes.footer) footer.classList.add((_props$classes2 = props.classes) == null ? void 0 : _props$classes2.footer);
   controls[0].remove();
   footer.appendChild(controls[0]);
   body.after(footer);
@@ -35,18 +46,25 @@ const Modal = props => {
     ...modalProps
   } = props;
   const nodeRef = (0, _react.useRef)(null);
+  const handleClose = (0, _useEventCallback.default)(event => {
+    modalProps.onClose == null || modalProps.onClose(event);
+  });
+  const focusModal = (0, _useEventCallback.default)(() => {
+    var _nodeRef$current;
+    const modalElement = (_nodeRef$current = nodeRef.current) == null ? void 0 : _nodeRef$current.querySelector('[data-testid="base-modal"]');
+    modalElement == null || modalElement.focus();
+  });
   (0, _react.useEffect)(() => {
     function subscribeToEsc(e) {
       if (e.key !== 'Escape' || !nodeRef.current) return;
-      const nextElement = nodeRef.current.nextElementSibling;
-      if (nextElement && nextElement.classList.contains(BACKDROP_CLASSNAME)) return;
-      modalProps.onClose == null || modalProps.onClose(e);
+      if (!isTopmostModal(nodeRef.current)) return;
+      handleClose(e);
     }
     document.addEventListener('keyup', subscribeToEsc);
     return () => {
       document.removeEventListener('keyup', subscribeToEsc);
     };
-  }, []);
+  }, [handleClose]);
   (0, _react.useEffect)(() => {
     replaceControlsIfExists(nodeRef.current, modalProps);
   }, []);
@@ -54,6 +72,10 @@ const Modal = props => {
     replaceControlsIfExists(nodeRef.current, modalProps);
     transitionProps == null || transitionProps.onEntering == null || transitionProps.onEntering(isAppearing);
   };
+  const handleEnteredDone = isAppearing => {
+    focusModal();
+    transitionProps == null || transitionProps.onEntered == null || transitionProps.onEntered(isAppearing);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
       classNames: {
@@ -71,6 +93,7 @@ const Modal = props => {
       unmountOnExit: true,
       ...transitionProps,
       onEntering: handleEntered,
+      onEntered: handleEnteredDone,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BackDrop.default, {
         width: width,
         ref: nodeRef,