@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

package/dist/esm/src/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.mjs

@@ -1,50 +1,78 @@
-import { __assign } from 'tslib';
-import React from 'react';
-import { FocusScope } from '@react-aria/focus';
-import { useOverlay, DismissButton } from '@react-aria/overlays';
+import { __rest, __assign } from 'tslib';
+import React, { useState, useEffect } from 'react';
+import { useFloating, autoUpdate, size, offset, autoPlacement } from '@floating-ui/react-dom';
+import classnames from 'classnames';
+import { FocusOn } from 'react-focus-on';
 import { useMenuTriggerContext } from '../../context/MenuTriggerProvider/MenuTriggerProvider.mjs';
 import '../../context/SelectionProvider/SelectionProvider.mjs';
 import styles from './MenuPopup.module.scss.mjs';
 const MenuPopup = /*#__PURE__*/function () {
   const MenuPopup = function (_a) {
-    var isLoading = _a.isLoading,
+    var children = _a.children,
+      floatingOptions = _a.floatingOptions,
+      classNameOverride = _a.classNameOverride,
+      isLoading = _a.isLoading,
       loadingSkeleton = _a.loadingSkeleton,
-      children = _a.children;
-    var menuTriggerState = useMenuTriggerContext().menuTriggerState;
-    var onClose = function () {
-      return menuTriggerState.close();
+      restProps = __rest(_a, ["children", "floatingOptions", "classNameOverride", "isLoading", "loadingSkeleton"]);
+    var _b = useState(null),
+      floatingElement = _b[0],
+      setFloatingElement = _b[1];
+    var _c = useMenuTriggerContext(),
+      menuTriggerState = _c.menuTriggerState,
+      buttonRef = _c.buttonRef;
+    var referenceElement = buttonRef.current;
+    var _d = useFloating(__assign({
+        placement: 'bottom-start',
+        elements: {
+          reference: referenceElement,
+          floating: floatingElement
+        },
+        strategy: 'absolute',
+        middleware: [size({
+          apply: function (_a) {
+            var availableWidth = _a.availableWidth,
+              elements = _a.elements;
+            Object.assign(elements.floating.style, {
+              maxHeight: "".concat(Math.max(320, 550), "px"),
+              maxWidth: "".concat(availableWidth, "px")
+            });
+          }
+        }), offset(6), autoPlacement({
+          allowedPlacements: ['bottom-start', 'bottom', 'top-start', 'top']
+        })],
+        whileElementsMounted: autoUpdate
+      }, floatingOptions)),
+      floatingStyles = _d.floatingStyles,
+      update = _d.update;
+    var handleReturnFocus = function () {
+      requestAnimationFrame(function () {
+        var _a;
+        (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      });
     };
-    // Handle events that should cause the menu to close,
-    // e.g. blur, clicking outside, or pressing the escape key.
-    var overlayRef = /*#__PURE__*/React.createRef();
-    var overlayProps = useOverlay({
-      onClose: onClose,
-      isOpen: menuTriggerState.isOpen,
-      isDismissable: true
-    }, overlayRef).overlayProps;
-    // Wrap in <FocusScope> so that focus is restored back to the trigger when the menu is closed
-    // and auto focus on the first focusable item after loading. (disable eslint no-autofocus error for it)
-    // In addition, add hidden <DismissButton> components at the start and end of the list
-    // to allow screen reader users to dismiss the popup easily.
-    return menuTriggerState.isOpen ? (/*#__PURE__*/React.createElement("div", __assign({}, overlayProps, {
-      ref: overlayRef,
-      className: styles.menuPopup
-    }), isLoading && loadingSkeleton ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DismissButton, {
-      onDismiss: onClose
-    }), loadingSkeleton, /*#__PURE__*/React.createElement(DismissButton, {
-      onDismiss: onClose
-    }))) : (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/no-autofocus
-    React.createElement(FocusScope, {
-      contain: true,
-      autoFocus: true,
-      restoreFocus: true
-    }, /*#__PURE__*/React.createElement(DismissButton, {
-      onDismiss: onClose
-    }), children, /*#__PURE__*/React.createElement(DismissButton, {
-      onDismiss: onClose
-    }))))) : (/*#__PURE__*/React.createElement(React.Fragment, null));
+    useEffect(function () {
+      var _a;
+      if (floatingElement && referenceElement) {
+        (_a = floatingElement.showPopover) === null || _a === void 0 ? void 0 : _a.call(floatingElement);
+        update();
+      }
+    }, [floatingElement, referenceElement, update]);
+    return menuTriggerState.isOpen ? (/*#__PURE__*/React.createElement(FocusOn, {
+      enabled: menuTriggerState.isOpen,
+      scrollLock: false,
+      returnFocus: false,
+      onClickOutside: menuTriggerState.close,
+      onEscapeKey: menuTriggerState.close,
+      onDeactivation: handleReturnFocus
+    }, /*#__PURE__*/React.createElement("div", __assign({
+      ref: setFloatingElement,
+      style: floatingStyles,
+      className: classnames(styles.menuPopup, classNameOverride),
+      role: "dialog",
+      "aria-modal": "true",
+      // @ts-expect-error: popover is valid in supported browsers
+      popover: "manual"
+    }, restProps), isLoading && loadingSkeleton ? loadingSkeleton : children))) : (/*#__PURE__*/React.createElement(React.Fragment, null));
   };
   MenuPopup.displayName = 'FilterMultiSelect.MenuPopup';
   return MenuPopup;

package/dist/esm/src/RichTextEditor/utils/schema/marks.mjs

@@ -37,17 +37,16 @@ var getMarks = function () {
       parseDOM: [{
         tag: 'a[href]',
         getAttrs: function (dom) {
-          var anchor = dom;
           return {
-            href: getAttributeWithDefault(anchor, 'href'),
-            target: getAttributeWithDefault(anchor, 'target'),
-            rel: getAttributeWithDefault(anchor, 'rel'),
+            href: getAttributeWithDefault(dom, 'href'),
+            target: getAttributeWithDefault(dom, 'target'),
+            rel: getAttributeWithDefault(dom, 'rel'),
             _metadata: null
           };
         }
       }],
-      toDOM: function (mark) {
-        var _a = mark.attrs,
+      toDOM: function (node) {
+        var _a = node.attrs,
           href = _a.href,
           target = _a.target,
           rel = _a.rel;