armtek-uikit-react 1.0.259 → 1.0.262

package/ui/BackDrop/BackDropBase.js

@@ -13,6 +13,7 @@ const BackDropBase = exports.BackDropBase = (0, _helpers.fixedForwardRef)((props
     className,
     onClick
   } = props;
+  const isAutoWidth = width === 'auto';
   const handleClick = e => {
     e.stopPropagation();
     if (onClick) onClick(e);
@@ -25,10 +26,12 @@ const BackDropBase = exports.BackDropBase = (0, _helpers.fixedForwardRef)((props
         className: 'arm-backdrop__overlay',
         onClick: handleClick
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: 'arm-backdrop__inner',
-        style: {
+        className: (0, _clsx.default)('arm-backdrop__inner', {
+          'arm-backdrop__inner_auto': isAutoWidth
+        }),
+        style: !isAutoWidth ? {
           maxWidth: width + 'px'
-        },
+        } : undefined,
         children: children
       })]
     })

package/ui/Form/DateField/DateField.js

@@ -31,6 +31,10 @@ const dateToText = (d, format) => {
   if (typeof d === 'string') d = new Date(d);
   return d.toLocaleString('ru-RU', getDateFormat(format));
 };
+
+/*
+TODO: Не отрабатывает ...register из react-hook-form при предзаполненном поле
+ */
 const DateField = exports.DateField = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   let {
     onChange,

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/Form/FormControls/FormControls.js

@@ -18,7 +18,7 @@ const FormControls = props => {
     ...divProps
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    className: _const.FORM_CONTROLS_CLASSNAME,
+    className: (0, _clsx.default)(_const.FORM_CONTROLS_CLASSNAME),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ...divProps,
       className: (0, _clsx.default)(className, 'arm-form-controls__stack'),

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

@@ -1 +1,2 @@
 export declare const FORM_CONTROLS_CLASSNAME = "arm-form-controls";
+export declare const FORM_CONTROLS_SKIP_REPLACE_CLASSNAME = "_skip_replace";

package/ui/Form/FormControls/const.js

@@ -1,5 +1,6 @@
 "use strict";
 
 exports.__esModule = true;
-exports.FORM_CONTROLS_CLASSNAME = void 0;
-const FORM_CONTROLS_CLASSNAME = exports.FORM_CONTROLS_CLASSNAME = 'arm-form-controls';
+exports.FORM_CONTROLS_SKIP_REPLACE_CLASSNAME = exports.FORM_CONTROLS_CLASSNAME = void 0;
+const FORM_CONTROLS_CLASSNAME = exports.FORM_CONTROLS_CLASSNAME = 'arm-form-controls';
+const FORM_CONTROLS_SKIP_REPLACE_CLASSNAME = exports.FORM_CONTROLS_SKIP_REPLACE_CLASSNAME = '_skip_replace';

package/ui/Form/Period/Period.d.ts

@@ -6,6 +6,17 @@ export type PeriodChangeEvent = (Event & {
         name: string;
     };
 });
+export type PeriodProps = {
+    onChange?: (e: PeriodChangeEvent) => void;
+    value?: [Date | null, Date | null];
+    defaultValue?: [Date | null, Date | null];
+    disableSameDate?: boolean;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    showMonthDropdown?: boolean;
+    showYearDropdown?: boolean;
+    datePickerProps?: DatePickerProps;
+} & Omit<TextFieldProps, 'value' | 'onChange' | 'defaultValue'>;
 export declare function getPeriodDisplay(date1: Date | null | undefined, date2: Date | null | undefined): string;
 declare const Period: import("react").ForwardRefExoticComponent<{
     onChange?: (e: PeriodChangeEvent) => void;

package/ui/Form/Period/Period.js

@@ -114,9 +114,22 @@ const Period = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
         }
       }
     }
-    if (startDateValid && endDateValid) {
+    if (startDateValid && endDateValid && startDateValid.getTime() <= endDateValid.getTime()) {
       handleSelect([startDateValid, endDateValid]);
-    } else {
+    }
+    // else
+    // {
+    // 	handleSelect([null, null])
+    // }
+  };
+  const handleBlur = e => {
+    setActive(false);
+    const value = e.target.value;
+    const valueParts = value.split(DELIMITER);
+    const startDateValid = valueParts[0] ? validateDate(valueParts[0], minDate, maxDate) : null;
+    const endDateValid = valueParts[1] ? validateDate(valueParts[1], minDate, maxDate) : null;
+    if (!startDateValid || !endDateValid || startDateValid && endDateValid && endDateValid.getTime() < startDateValid.getTime()) {
+      setTextValue('');
       handleSelect([null, null]);
     }
   };
@@ -147,9 +160,8 @@ const Period = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
         placeholder: 'дд.мм.гггг - дд.мм.гггг',
         ...restProps,
         disabled: disabled,
-        id: 'period',
         value: textValue,
-        onBlur: () => setActive(false),
+        onBlur: handleBlur,
         onChange: handleChange,
         onFocus: () => setActive(false),
         autoComplete: 'off',

package/ui/Form/Select/Select.js

@@ -59,12 +59,19 @@ function Select(props, ref) {
     return inputRef.current;
   }, []);
   const handleOpen = () => {
+    if (open !== undefined) return;
     if (!inputProps.disabled) {
       setActive(true);
       // if( e.target instanceof HTMLDivElement )
       // 	setAnchorEl(e.currentTarget)
     }
   };
+  function handleClose() {
+    if (onClose) onClose();else {
+      if (open !== undefined) return;
+      setActive(false);
+    }
+  }
   const handleSelect = (e, option) => {
     if (e.target.classList.contains(_const.CHECKBOX_LABEL_CLASSNAME)) {
       e.stopPropagation();
@@ -90,7 +97,7 @@ function Select(props, ref) {
     if (search && !multiple) {
       setQ(options.find(item => getOptionValue(item) === newValueS).text);
     }
-    if (!multiple) setActive(false);
+    if (!multiple) handleClose();
   };
   const handleSearch = e => {
     setQ(e.target.value);
@@ -148,9 +155,6 @@ function Select(props, ref) {
   if (!!search) options = options.filter(item => item.text.toLowerCase().includes(q.toLowerCase()));
   let valueArr = realValue ? Array.isArray(realValue) ? realValue : [realValue] : [];
   let selectedOptions = options.filter(item => valueArr.includes(getOptionValue(item)));
-  function handleClose() {
-    if (onClose) onClose();else setActive(false);
-  }
   let displayClear = clear && (multiple ? realValue && realValue.length > 0 : !!realValue);
   let selectEndAdornment = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Adornment.default, {

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;
@@ -19,9 +30,10 @@ function replaceControlsIfExists(container, props) {
   if (!body) return;
   const controls = body.querySelectorAll(`.${_const.FORM_CONTROLS_CLASSNAME}`);
   if (controls.length !== 1) return;
+  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);
@@ -34,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);
   }, []);
@@ -53,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: {
@@ -70,6 +93,7 @@ const Modal = props => {
       unmountOnExit: true,
       ...transitionProps,
       onEntering: handleEntered,
+      onEntered: handleEnteredDone,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BackDrop.default, {
         width: width,
         ref: nodeRef,

package/ui/Popper/Popper.d.ts

@@ -1,4 +1,4 @@
 import { PopperBaseProps } from './PopperBase';
 export type PopperProps = {} & PopperBaseProps;
-export declare const Popper: (props: PopperProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Popper: (props: PopperBaseProps & import("react").RefAttributes<HTMLDivElement>) => JSX.Element;
 export default Popper;

package/ui/Popper/Popper.js

@@ -4,17 +4,18 @@ exports.__esModule = true;
 exports.default = exports.Popper = void 0;
 var _reactDom = require("react-dom");
 var _PopperBase = require("./PopperBase");
+var _helpers = require("../../lib/helpers");
 var _jsxRuntime = require("react/jsx-runtime");
 //TODO TESTS
 
-const Popper = props => {
+const Popper = exports.Popper = (0, _helpers.fixedForwardRef)((props, ref) => {
   if (!props.open) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_PopperBase.PopperBase, {
+      ref: ref,
       ...props,
       children: props.children
     }), document.body)
   });
-};
-exports.Popper = Popper;
+});
 var _default = exports.default = Popper;

package/ui/Popper/PopperBase.d.ts

@@ -10,5 +10,5 @@ export type PopperBaseProps = {
     className?: string;
     placement?: 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
 };
-export declare const PopperBase: (props: PopperBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopperBase: (props: PopperBaseProps & import("react").RefAttributes<HTMLDivElement>) => JSX.Element;
 export default PopperBase;

package/ui/Popper/PopperBase.js

@@ -7,17 +7,19 @@ exports.default = exports.PopperBase = void 0;
 var _react = require("react");
 var _core = require("@popperjs/core");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _helpers = require("../../lib/helpers");
 var _jsxRuntime = require("react/jsx-runtime");
-const PopperBase = props => {
+const PopperBase = exports.PopperBase = (0, _helpers.fixedForwardRef)((props, ref) => {
   const {
     anchorEl,
     children,
-    placement,
+    placement = 'top',
     className,
     anchorPosition,
     open
   } = props;
   const tooltipRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => tooltipRef.current, []);
   (0, _react.useEffect)(() => {
     let modifiers = [{
       name: 'offset',
@@ -54,6 +56,5 @@ const PopperBase = props => {
       children: children
     })
   });
-};
-exports.PopperBase = PopperBase;
+});
 var _default = exports.default = PopperBase;

package/ui/Table/Table.js

@@ -20,6 +20,9 @@ function TableInit(props, ref) {
     getRow,
     ...tableProps
   } = props;
+  const handleRowClick = row => {
+    return onClick ? e => onClick(row, e) : undefined;
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableBase.TableBase, {
       ...tableProps,
@@ -42,7 +45,7 @@ function TableInit(props, ref) {
             children: getRow(row, index)
           }, index) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableRow.TableRow, {
             className: rowClass,
-            onClick: e => onClick ? onClick(row, e) : null,
+            onClick: handleRowClick(row),
             children: structure.map((item, itemIndex) => {
               let cellClass = !!(classes != null && classes.tableCell) ? typeof classes.tableCell === 'string' ? classes.tableCell : classes.tableCell(row, item.code) : '';
               return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableCell.TableCell, {