@moda/om 21.6.10 → 21.6.12

package/dist/index.esm.js

@@ -9991,6 +9991,13 @@ var ChevronUp12 = function ChevronUp12(_a) {
 };
 ChevronUp12.displayName = 'ChevronUp12';
 
+var FormControlContext = /*#__PURE__*/createContext({
+  displaysError: false
+});
+var useFormControlContext = function useFormControlContext() {
+  return useContext(FormControlContext);
+};
+
 var dist$1 = {};
 
 var mapCursorToMax = {};
@@ -10824,6 +10831,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
@@ -10943,7 +10952,7 @@ var Select = function Select(_ref) {
         type: 'CLOSE'
       });
     }
-  })), typeof error === 'string' && /*#__PURE__*/React__default.createElement("div", {
+  })), typeof error === 'string' && !errorDisplayedByParent && /*#__PURE__*/React__default.createElement("div", {
     role: "status",
     "aria-live": "polite",
     "aria-atomic": "true",
@@ -11150,7 +11159,14 @@ var Field = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     label = _ref.label,
     placeholder = _ref.placeholder,
     rest = _objectWithoutProperties(_ref, _excluded$h);
-  return /*#__PURE__*/React__default.createElement("label", {
+  var fieldContextValue = useMemo(function () {
+    return {
+      displaysError: Boolean(error)
+    };
+  }, [error]);
+  return /*#__PURE__*/React__default.createElement(FormControlContext.Provider, {
+    value: fieldContextValue
+  }, /*#__PURE__*/React__default.createElement("label", {
     className: classNames('Field', className)
   }, label && /*#__PURE__*/React__default.createElement("span", {
     className: "Field__label"
@@ -11173,7 +11189,7 @@ var Field = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className: "Field__icon"
   }, /*#__PURE__*/React__default.createElement(Warning16, null)))), error && /*#__PURE__*/React__default.createElement("span", {
     className: "Field__error"
-  }, error));
+  }, error)));
 });
 Field.displayName = 'Field';
 
@@ -12315,7 +12331,7 @@ var PasswordInput = /*#__PURE__*/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;
@@ -12341,6 +12357,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 = useState(function () {
       if (open && smoothTransitioning) {
@@ -12358,6 +12385,7 @@ var Popover = function Popover(_ref) {
     mode = _useState2[0],
     setMode = _useState2[1];
   var timeout = useRef(null);
+  var contentRef = useRef(null);
   var handleOpen = useCallback(function () {
     if (smoothTransitioning) setMode(Mode.Opening);
     if (!smoothTransitioning) setMode(Mode.Open);
@@ -12376,6 +12404,27 @@ var Popover = function Popover(_ref) {
     if (open) return;
     timeout.current = setTimeout(handleClose, POPOVER_MOUSEOUT_DELAY_MS);
   }, [handleClose, open]);
+  var handleKeyDown = useCallback(function (event) {
+    if (closeOnEscape && event.key === 'Escape') {
+      onClose === null || onClose === void 0 || onClose();
+      handleClose();
+      event.preventDefault();
+    }
+  }, [closeOnEscape, onClose, handleClose]);
+  var handleFocus = useCallback(function () {
+    if (openOnFocus && open === undefined) {
+      if (timeout.current) clearTimeout(timeout.current);
+      handleOpen();
+    }
+  }, [openOnFocus, open, handleOpen]);
+  var handleBlur = 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]);
   useEffect(function () {
     if (mode !== Mode.Closing) return;
     var closingTimeout = setTimeout(function () {
@@ -12419,10 +12468,18 @@ var Popover = function Popover(_ref) {
     }
   }, [handleClose, handleOpen, open]);
   var isOpen = mode === Mode.AutoOpen || mode === Mode.Opening || mode === Mode.Open || mode === Mode.Closing;
+  useEffect(function () {
+    if (autoFocus && isOpen && contentRef.current) {
+      contentRef.current.focus();
+    }
+  }, [autoFocus, isOpen]);
   return /*#__PURE__*/React__default.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__default.createElement("span", {
     className: "Popover__trigger"
   }, isOpen && /*#__PURE__*/React__default.createElement("div", {
@@ -12432,10 +12489,17 @@ var Popover = function Popover(_ref) {
     })
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "Popover__caret",
+    "aria-hidden": "true",
     style: {
       zIndex: zIndex != null ? zIndex + 1 : undefined
     }
   }), /*#__PURE__*/React__default.createElement("div", {
+    ref: contentRef,
+    id: popoverId,
+    role: role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    tabIndex: autoFocus ? -1 : undefined,
     className: "Popover__content",
     style: {
       zIndex: zIndex
@@ -12727,4 +12791,4 @@ var Utilities = {
   States: States
 };
 
-export { ArcWindow, AspectRatioBox, Badge, Bradley, Brancusi, Breadcrumb, Breadcrumbs, Breakpoint, BreakpointContext, BreakpointProvider, Button, Checkbox, Circle, Clickable, ColorSwatch, ConfirmProvider, Constrain, ControlLink, CreditCardNumberInput, DEFAULT_PRODUCT_ASPECT_HEIGHT, DEFAULT_PRODUCT_ASPECT_RATIO, DEFAULT_PRODUCT_ASPECT_WIDTH, DefinitionList, Dialog, Diamond, Divider, ExceedConstrain, Expandable, Field, FocusOn, Field as Input, Keyhole, Label, LineAboveDivider, Loading, LoadingBalls, LoadingItems1, LoadingItems2, LoadingItems3, LoadingItems4, LoadingItems5, LoadingItemsLavenderBlue1, LoadingItemsLavenderBlue2, LoadingItemsLavenderBlue3, LoadingItemsLavenderBlue4, LoadingItemsLavenderBlue5, LoadingShapes, LoadingShapesLavenderBlue, LoadingShapesPinkGreen, Mirror, Modal, ModalOverlay, MultiSelect, NoLineDivider, Oval, Overlay, POPOVER_MOUSEOUT_DELAY_MS, Paginator, PasswordInput, Popover, PromoBanner, RadioButton, SKU_COLORS, SearchInput, Select, SelectableButton, SlidingPane, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, Text, TextInput, Textarea, Toast, Triangle, TwoLineDivider, UNMOUNT_DELAY_MS, Utilities, VerticalDivider, Window, discriminate, tokens, useBreakpoint, useClickOutside, useConfirm, useKeyboardListNavigation, useUpdateEffect };
+export { ArcWindow, AspectRatioBox, Badge, Bradley, Brancusi, Breadcrumb, Breadcrumbs, Breakpoint, BreakpointContext, BreakpointProvider, Button, Checkbox, Circle, Clickable, ColorSwatch, ConfirmProvider, Constrain, ControlLink, CreditCardNumberInput, DEFAULT_PRODUCT_ASPECT_HEIGHT, DEFAULT_PRODUCT_ASPECT_RATIO, DEFAULT_PRODUCT_ASPECT_WIDTH, DefinitionList, Dialog, Diamond, Divider, ExceedConstrain, Expandable, Field, FocusOn, FormControlContext, Field as Input, Keyhole, Label, LineAboveDivider, Loading, LoadingBalls, LoadingItems1, LoadingItems2, LoadingItems3, LoadingItems4, LoadingItems5, LoadingItemsLavenderBlue1, LoadingItemsLavenderBlue2, LoadingItemsLavenderBlue3, LoadingItemsLavenderBlue4, LoadingItemsLavenderBlue5, LoadingShapes, LoadingShapesLavenderBlue, LoadingShapesPinkGreen, Mirror, Modal, ModalOverlay, MultiSelect, NoLineDivider, Oval, Overlay, POPOVER_MOUSEOUT_DELAY_MS, Paginator, PasswordInput, Popover, PromoBanner, RadioButton, SKU_COLORS, SearchInput, Select, SelectableButton, SlidingPane, Stack, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, Text, TextInput, Textarea, Toast, Triangle, TwoLineDivider, UNMOUNT_DELAY_MS, Utilities, VerticalDivider, Window, discriminate, tokens, useBreakpoint, useClickOutside, useConfirm, useFormControlContext, useKeyboardListNavigation, useUpdateEffect };