@moda/om 21.6.10 → 21.6.12

package/dist/index.cjs.js

@@ -10011,6 +10011,13 @@ var ChevronUp12 = function ChevronUp12(_a) {
 };
 ChevronUp12.displayName = 'ChevronUp12';
 
+var FormControlContext = /*#__PURE__*/React.createContext({
+  displaysError: false
+});
+var useFormControlContext = function useFormControlContext() {
+  return React.useContext(FormControlContext);
+};
+
 var dist$1 = {};
 
 var mapCursorToMax = {};
@@ -10844,6 +10851,8 @@ var Select = function Select(_ref) {
     _ref$smallMobileText = _ref.smallMobileText,
     smallMobileText = _ref$smallMobileText === void 0 ? false : _ref$smallMobileText,
     rest = _objectWithoutProperties(_ref, _excluded$j);
+  var _useFormControlContex = useFormControlContext(),
+    errorDisplayedByParent = _useFormControlContex.displaysError;
   var _useSelect = useSelect({
       value: value,
       defaultValue: defaultValue
@@ -10963,7 +10972,7 @@ var Select = function Select(_ref) {
         type: 'CLOSE'
       });
     }
-  })), typeof error === 'string' && /*#__PURE__*/React.createElement("div", {
+  })), typeof error === 'string' && !errorDisplayedByParent && /*#__PURE__*/React.createElement("div", {
     role: "status",
     "aria-live": "polite",
     "aria-atomic": "true",
@@ -11170,7 +11179,14 @@ var Field = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     label = _ref.label,
     placeholder = _ref.placeholder,
     rest = _objectWithoutProperties(_ref, _excluded$h);
-  return /*#__PURE__*/React.createElement("label", {
+  var fieldContextValue = React.useMemo(function () {
+    return {
+      displaysError: Boolean(error)
+    };
+  }, [error]);
+  return /*#__PURE__*/React.createElement(FormControlContext.Provider, {
+    value: fieldContextValue
+  }, /*#__PURE__*/React.createElement("label", {
     className: classNames('Field', className)
   }, label && /*#__PURE__*/React.createElement("span", {
     className: "Field__label"
@@ -11193,7 +11209,7 @@ var Field = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "Field__icon"
   }, /*#__PURE__*/React.createElement(Warning16, null)))), error && /*#__PURE__*/React.createElement("span", {
     className: "Field__error"
-  }, error));
+  }, error)));
 });
 Field.displayName = 'Field';
 
@@ -12335,7 +12351,7 @@ var PasswordInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 PasswordInput.displayName = 'PasswordInput';
 
-var _excluded$9 = ["className", "children", "content", "open", "anchor", "zIndex", "autoPreview", "smoothTransitioning"];
+var _excluded$9 = ["className", "children", "content", "open", "anchor", "zIndex", "autoPreview", "smoothTransitioning", "role", "aria-label", "aria-labelledby", "popoverId", "openOnFocus", "closeOnEscape", "onClose", "autoFocus"];
 var POPOVER_MOUSEOUT_DELAY_MS = 200;
 var THREE_QUARTER_SECOND_DELAY = 750;
 var ONE_SECOND_DELAY = 1000;
@@ -12361,6 +12377,17 @@ var Popover = function Popover(_ref) {
     autoPreview = _ref$autoPreview === void 0 ? false : _ref$autoPreview,
     _ref$smoothTransition = _ref.smoothTransitioning,
     smoothTransitioning = _ref$smoothTransition === void 0 ? false : _ref$smoothTransition,
+    role = _ref.role,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
+    popoverId = _ref.popoverId,
+    _ref$openOnFocus = _ref.openOnFocus,
+    openOnFocus = _ref$openOnFocus === void 0 ? false : _ref$openOnFocus,
+    _ref$closeOnEscape = _ref.closeOnEscape,
+    closeOnEscape = _ref$closeOnEscape === void 0 ? true : _ref$closeOnEscape,
+    onClose = _ref.onClose,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
     rest = _objectWithoutProperties(_ref, _excluded$9);
   var _useState = React.useState(function () {
       if (open && smoothTransitioning) {
@@ -12378,6 +12405,7 @@ var Popover = function Popover(_ref) {
     mode = _useState2[0],
     setMode = _useState2[1];
   var timeout = React.useRef(null);
+  var contentRef = React.useRef(null);
   var handleOpen = React.useCallback(function () {
     if (smoothTransitioning) setMode(Mode.Opening);
     if (!smoothTransitioning) setMode(Mode.Open);
@@ -12396,6 +12424,27 @@ var Popover = function Popover(_ref) {
     if (open) return;
     timeout.current = setTimeout(handleClose, POPOVER_MOUSEOUT_DELAY_MS);
   }, [handleClose, open]);
+  var handleKeyDown = React.useCallback(function (event) {
+    if (closeOnEscape && event.key === 'Escape') {
+      onClose === null || onClose === void 0 || onClose();
+      handleClose();
+      event.preventDefault();
+    }
+  }, [closeOnEscape, onClose, handleClose]);
+  var handleFocus = React.useCallback(function () {
+    if (openOnFocus && open === undefined) {
+      if (timeout.current) clearTimeout(timeout.current);
+      handleOpen();
+    }
+  }, [openOnFocus, open, handleOpen]);
+  var handleBlur = React.useCallback(function (event) {
+    if (openOnFocus && open === undefined) {
+      // Only close if focus moved outside the popover entirely
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        timeout.current = setTimeout(handleClose, POPOVER_MOUSEOUT_DELAY_MS);
+      }
+    }
+  }, [openOnFocus, open, handleClose]);
   React.useEffect(function () {
     if (mode !== Mode.Closing) return;
     var closingTimeout = setTimeout(function () {
@@ -12439,10 +12488,18 @@ var Popover = function Popover(_ref) {
     }
   }, [handleClose, handleOpen, open]);
   var isOpen = mode === Mode.AutoOpen || mode === Mode.Opening || mode === Mode.Open || mode === Mode.Closing;
+  React.useEffect(function () {
+    if (autoFocus && isOpen && contentRef.current) {
+      contentRef.current.focus();
+    }
+  }, [autoFocus, isOpen]);
   return /*#__PURE__*/React.createElement("div", _extends$1({
     className: classNames("Popover Popover--anchor-".concat(anchor), className),
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
+    onMouseLeave: handleMouseLeave,
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus,
+    onBlur: handleBlur
   }, rest), /*#__PURE__*/React.createElement("span", {
     className: "Popover__trigger"
   }, isOpen && /*#__PURE__*/React.createElement("div", {
@@ -12452,10 +12509,17 @@ var Popover = function Popover(_ref) {
     })
   }, /*#__PURE__*/React.createElement("div", {
     className: "Popover__caret",
+    "aria-hidden": "true",
     style: {
       zIndex: zIndex != null ? zIndex + 1 : undefined
     }
   }), /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    id: popoverId,
+    role: role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    tabIndex: autoFocus ? -1 : undefined,
     className: "Popover__content",
     style: {
       zIndex: zIndex
@@ -12777,6 +12841,7 @@ exports.ExceedConstrain = ExceedConstrain;
 exports.Expandable = Expandable;
 exports.Field = Field;
 exports.FocusOn = FocusOn;
+exports.FormControlContext = FormControlContext;
 exports.Input = Field;
 exports.Keyhole = Keyhole;
 exports.Label = Label;
@@ -12836,5 +12901,6 @@ exports.tokens = tokens;
 exports.useBreakpoint = useBreakpoint;
 exports.useClickOutside = useClickOutside;
 exports.useConfirm = useConfirm;
+exports.useFormControlContext = useFormControlContext;
 exports.useKeyboardListNavigation = useKeyboardListNavigation;
 exports.useUpdateEffect = useUpdateEffect;