@moda/om 21.6.11 → 21.7.0

package/dist/index.cjs.js

@@ -12351,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;
@@ -12377,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) {
@@ -12394,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);
@@ -12412,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 () {
@@ -12455,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", {
@@ -12468,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
@@ -12549,13 +12597,15 @@ var SelectableButton = function SelectableButton(_ref) {
   }, rest), /*#__PURE__*/React.createElement("span", null, children));
 };
 
-var _excluded$5 = ["className", "title", "visible", "children", "onClose"];
+var _excluded$5 = ["className", "title", "visible", "children", "onClose", "autoFocus"];
 var SlidingPane = function SlidingPane(_ref) {
   var className = _ref.className,
     title = _ref.title,
     visible = _ref.visible,
     children = _ref.children,
     onClose = _ref.onClose,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
     rest = _objectWithoutProperties(_ref, _excluded$5);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classNames('SlidingPane__overlay', {
@@ -12564,6 +12614,7 @@ var SlidingPane = function SlidingPane(_ref) {
     onClick: onClose
   }), /*#__PURE__*/React.createElement(FocusOn, {
     enabled: visible,
+    autoFocus: autoFocus,
     onClickOutside: onClose,
     onEscapeKey: onClose
   }, /*#__PURE__*/React.createElement("div", _extends$1({