@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

package/dist/Modal/Modal.js

@@ -59,25 +59,25 @@ __export(Modal_exports, {
   default: () => Modal_default
 });
 module.exports = __toCommonJS(Modal_exports);
-var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_Backdrop = __toESM(require("../Backdrop"));
 var import_Portal = __toESM(require("../Portal"));
+var import_useModal = require("./useModal");
 var import_index = require("./index.css");
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     className,
-    open,
+    open = false,
     BackdropProps,
     children,
     container,
-    disablePortal,
-    disableScrollLock,
-    hideBackdrop,
+    disablePortal = false,
+    disableScrollLock = false,
+    hideBackdrop = false,
     onClose,
-    keepMounted
+    keepMounted = false
   } = _a, others = __objRest(_a, [
     "className",
     "open",
@@ -90,50 +90,50 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     "onClose",
     "keepMounted"
   ]);
-  const modalRef = import_react.default.useRef(null);
-  const handleRef = (0, import_utils.useForkRef)(modalRef, ref);
-  const [backdropExited, setBackDropExited] = (0, import_react.useState)(hideBackdrop || !open);
-  const mounted = open || !backdropExited || keepMounted;
-  const handleBackdropClick = (event) => {
-    if (import_utils.isMini && event.target.id !== event.currentTarget.id) {
-      return;
-    }
-    if (!import_utils.isMini && event.target !== event.currentTarget) {
-      return;
+  const {
+    getRootProps,
+    getBackdropProps,
+    getTransitionProps,
+    portalRef,
+    exited,
+    hasTransition
+  } = (0, import_useModal.useModal)(__spreadProps(__spreadValues({}, props), {
+    container,
+    disableScrollLock,
+    children: import_react.default.isValidElement(children) ? children : void 0,
+    open,
+    onClose,
+    rootRef: ref
+  }));
+  if (!keepMounted && !open && (!hasTransition || exited)) {
+    return null;
+  }
+  const rootProps = getRootProps(__spreadProps(__spreadValues({}, others), {
+    className: (0, import_clsx.default)(
+      prefixCls,
+      {
+        [`${prefixCls}-hidden`]: !open && exited
+      },
+      className
+    )
+  }));
+  const backdropProps = getBackdropProps(__spreadProps(__spreadValues({}, BackdropProps), {
+    className: (0, import_clsx.default)(`${prefixCls}-backdrop`, BackdropProps == null ? void 0 : BackdropProps.className)
+  }));
+  const transitionProps = hasTransition ? getTransitionProps() : {};
+  const renderChildren = () => {
+    if (!children) {
+      return null;
     }
-    if (onClose) {
-      onClose(event, { from: "backdrop" });
+    if (import_react.default.isValidElement(children)) {
+      const childProps = children.props || {};
+      return import_react.default.cloneElement(children, __spreadValues(__spreadValues({
+        tabIndex: -1
+      }, childProps), transitionProps));
     }
+    return children;
   };
-  (0, import_react.useEffect)(() => {
-    let cleanup;
-    if (!import_utils.isMini && !disableScrollLock)
-      setTimeout(() => {
-        try {
-          if (open && modalRef.current) {
-            cleanup = (0, import_utils.blockTouch)(modalRef.current);
-          }
-        } catch (e) {
-        }
-      }, 0);
-    return () => {
-      cleanup == null ? void 0 : cleanup();
-    };
-  }, [open, disableScrollLock]);
-  if (!mounted) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container, disablePortal }, /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ className: (0, import_clsx.default)(prefixCls, className), ref: handleRef }, others), !hideBackdrop ? /* @__PURE__ */ import_react.default.createElement(
-    import_Backdrop.default,
-    __spreadProps(__spreadValues({
-      open,
-      onClick: handleBackdropClick,
-      onEnter: () => setBackDropExited(false),
-      onExited: () => setBackDropExited(true)
-    }, BackdropProps), {
-      className: (0, import_clsx.default)(`${prefixCls}-backdrop`, BackdropProps == null ? void 0 : BackdropProps.className)
-    })
-  ) : null, (open || keepMounted) && children));
+  return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container, disablePortal, ref: portalRef }, /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({}, rootProps), !hideBackdrop && /* @__PURE__ */ import_react.default.createElement(import_Backdrop.default, __spreadValues({}, backdropProps)), renderChildren()));
 });
 Modal.displayName = "BuiModal";
 var Modal_default = Modal;

package/dist/Modal/Modal.miniapp.js

@@ -59,12 +59,12 @@ __export(Modal_miniapp_exports, {
   default: () => Modal_miniapp_default
 });
 module.exports = __toCommonJS(Modal_miniapp_exports);
-var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_components = require("@tarojs/components");
 var import_Backdrop = __toESM(require("../Backdrop"));
 var import_Portal = __toESM(require("../Portal"));
+var import_useModal = require("./useModal");
 var import_index = require("./index.css");
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ import_react.default.forwardRef(
@@ -79,6 +79,7 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef(
       disableScrollLock = false,
       hideBackdrop = false,
       onClose,
+      onClick,
       keepMounted
     } = _a, others = __objRest(_a, [
       "className",
@@ -90,45 +91,60 @@ const Modal = /* @__PURE__ */ import_react.default.forwardRef(
       "disableScrollLock",
       "hideBackdrop",
       "onClose",
+      "onClick",
       "keepMounted"
     ]);
-    const modalRef = import_react.default.useRef(null);
-    const handleRef = (0, import_utils.useForkRef)(modalRef, ref);
-    const [backdropExited, setBackDropExited] = (0, import_react.useState)(hideBackdrop || !open);
-    const mounted = open || !backdropExited || keepMounted;
-    const handleBackdropClick = (event) => {
-      if (event.target.id !== event.currentTarget.id) {
-        return;
+    const {
+      getRootProps,
+      getBackdropProps,
+      getTransitionProps,
+      exited,
+      hasTransition
+    } = (0, import_useModal.useModal)(__spreadProps(__spreadValues({}, props), {
+      disableScrollLock,
+      children: import_react.default.isValidElement(children) ? children : void 0,
+      open,
+      onClose,
+      rootRef: ref
+    }));
+    if (!keepMounted && !open && (!hasTransition || exited)) {
+      return null;
+    }
+    const rootProps = getRootProps(__spreadProps(__spreadValues({}, others), {
+      className: (0, import_clsx.default)(
+        prefixCls,
+        {
+          [`${prefixCls}-hidden`]: !open && exited
+        },
+        className
+      )
+    }));
+    const backdropProps = getBackdropProps(__spreadProps(__spreadValues({}, BackdropProps), {
+      className: (0, import_clsx.default)(`${prefixCls}-backdrop`, BackdropProps == null ? void 0 : BackdropProps.className)
+    }));
+    const transitionProps = hasTransition ? getTransitionProps() : {};
+    const renderChildren = () => {
+      if (!children) {
+        return null;
       }
-      if (onClose) {
-        onClose(event, { from: "backdrop" });
+      if (import_react.default.isValidElement(children)) {
+        return import_react.default.cloneElement(children, __spreadValues(__spreadProps(__spreadValues({}, transitionProps), {
+          tabIndex: -1
+        }), children.props));
       }
+      return children;
     };
-    if (!mounted) {
-      return null;
-    }
     return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container, disablePortal }, /* @__PURE__ */ import_react.default.createElement(
       import_components.View,
-      __spreadValues({
-        className: (0, import_clsx.default)(prefixCls, className),
-        ref: handleRef,
+      __spreadProps(__spreadValues({
         catchMove: !disableScrollLock
-      }, others),
-      !hideBackdrop ? /* @__PURE__ */ import_react.default.createElement(
-        import_Backdrop.default,
-        __spreadProps(__spreadValues({
-          open,
-          onClick: handleBackdropClick,
-          onEnter: () => setBackDropExited(false),
-          onExited: () => setBackDropExited(true)
-        }, BackdropProps), {
-          className: (0, import_clsx.default)(
-            `${prefixCls}-backdrop`,
-            BackdropProps == null ? void 0 : BackdropProps.className
-          )
-        })
-      ) : null,
-      (open || keepMounted) && children
+      }, rootProps), {
+        onClick: (event) => {
+          onClick == null ? void 0 : onClick(event);
+        }
+      }),
+      !hideBackdrop && /* @__PURE__ */ import_react.default.createElement(import_Backdrop.default, __spreadValues({}, backdropProps)),
+      renderChildren()
     ));
   }
 );

package/dist/Modal/ModalManager.js

@@ -0,0 +1,238 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var ModalManager_exports = {};
+__export(ModalManager_exports, {
+  ModalManager: () => ModalManager,
+  ariaHidden: () => ariaHidden,
+  modalManager: () => modalManager
+});
+module.exports = __toCommonJS(ModalManager_exports);
+function isOverflowing(container) {
+  if (document.body === container) {
+    return window.innerWidth > document.documentElement.clientWidth;
+  }
+  return container.scrollHeight > container.clientHeight;
+}
+function ariaHidden(element, show) {
+  if (show) {
+    element.setAttribute("aria-hidden", "true");
+  } else {
+    element.removeAttribute("aria-hidden");
+  }
+}
+function getPaddingRight(element) {
+  return parseInt(window.getComputedStyle(element).paddingRight, 10) || 0;
+}
+function isAriaHiddenForbiddenOnElement(element) {
+  const forbiddenTagNames = [
+    "TEMPLATE",
+    "SCRIPT",
+    "STYLE",
+    "LINK",
+    "MAP",
+    "META",
+    "NOSCRIPT",
+    "PICTURE",
+    "COL",
+    "COLGROUP",
+    "PARAM",
+    "SLOT",
+    "SOURCE",
+    "TRACK"
+  ];
+  const isForbiddenTagName = forbiddenTagNames.includes(element.tagName);
+  const isInputHidden = element.tagName === "INPUT" && element.getAttribute("type") === "hidden";
+  return isForbiddenTagName || isInputHidden;
+}
+function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, hide) {
+  const blacklist = [mountElement, currentElement, ...elementsToExclude];
+  [].forEach.call(container.children, (element) => {
+    const isNotExcludedElement = !blacklist.includes(element);
+    const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
+    if (isNotExcludedElement && isNotForbiddenElement) {
+      ariaHidden(element, hide);
+    }
+  });
+}
+function findIndexOf(items, callback) {
+  let idx = -1;
+  items.some((item, index) => {
+    if (callback(item)) {
+      idx = index;
+      return true;
+    }
+    return false;
+  });
+  return idx;
+}
+function handleContainer(containerInfo) {
+  const restoreStyle = [];
+  const container = containerInfo.container;
+  const { disableScrollLock } = containerInfo;
+  if (!disableScrollLock) {
+    if (isOverflowing(container)) {
+      const scrollbarSize = window.innerWidth - document.documentElement.clientWidth;
+      restoreStyle.push({
+        property: "padding-right",
+        el: container,
+        value: container.style.paddingRight
+      });
+      container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
+    }
+    restoreStyle.push(
+      {
+        property: "overflow",
+        el: container,
+        value: container.style.overflow
+      },
+      {
+        property: "overflow-x",
+        el: container,
+        value: container.style.overflowX
+      },
+      {
+        property: "overflow-y",
+        el: container,
+        value: container.style.overflowY
+      }
+    );
+    container.style.overflow = "hidden";
+  }
+  const restore = () => {
+    restoreStyle.forEach(({ property, el, value }) => {
+      if (value) {
+        el.style.setProperty(property, value);
+      } else {
+        el.style.removeProperty(property);
+      }
+    });
+  };
+  return restore;
+}
+function getHiddenSiblings(container) {
+  const hiddenSiblings = [];
+  [].forEach.call(container.children, (element) => {
+    if (element.getAttribute("aria-hidden") === "true") {
+      hiddenSiblings.push(element);
+    }
+  });
+  return hiddenSiblings;
+}
+class ModalManager {
+  constructor() {
+    __publicField(this, "modals", []);
+    __publicField(this, "containers", []);
+  }
+  add(modal, container) {
+    let modalIndex = this.modals.indexOf(modal);
+    if (modalIndex !== -1) {
+      return modalIndex;
+    }
+    modalIndex = this.modals.length;
+    this.modals.push(modal);
+    if (modal.modalRef) {
+      ariaHidden(modal.modalRef, false);
+    }
+    const hiddenSiblings = getHiddenSiblings(container);
+    ariaHiddenSiblings(
+      container,
+      modal.mount,
+      modal.modalRef,
+      hiddenSiblings,
+      true
+    );
+    const containerIndex = findIndexOf(
+      this.containers,
+      (item) => item.container === container
+    );
+    if (containerIndex !== -1) {
+      this.containers[containerIndex].modals.push(modal);
+      return modalIndex;
+    }
+    this.containers.push({
+      modals: [modal],
+      container,
+      restore: null,
+      hiddenSiblings
+    });
+    return modalIndex;
+  }
+  mount(modal, props) {
+    const containerIndex = findIndexOf(
+      this.containers,
+      (item) => item.modals.includes(modal)
+    );
+    const containerInfo = this.containers[containerIndex];
+    if (!containerInfo.restore) {
+      containerInfo.restore = handleContainer({
+        container: document.body,
+        disableScrollLock: props.disableScrollLock
+      });
+    }
+  }
+  remove(modal, ariaHiddenState = true) {
+    const modalIndex = this.modals.indexOf(modal);
+    if (modalIndex === -1) {
+      return modalIndex;
+    }
+    const containerIndex = findIndexOf(
+      this.containers,
+      (item) => item.modals.indexOf(modal) !== -1
+    );
+    const containerInfo = this.containers[containerIndex];
+    containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
+    this.modals.splice(modalIndex, 1);
+    if (containerInfo.modals.length === 0) {
+      if (containerInfo.restore) {
+        containerInfo.restore();
+      }
+      if (modal.modalRef) {
+        ariaHidden(modal.modalRef, ariaHiddenState);
+      }
+      ariaHiddenSiblings(
+        containerInfo.container,
+        modal.mount,
+        modal.modalRef,
+        containerInfo.hiddenSiblings,
+        false
+      );
+      this.containers.splice(containerIndex, 1);
+    } else {
+      const nextTop = containerInfo.modals[containerInfo.modals.length - 1];
+      if (nextTop.modalRef) {
+        ariaHidden(nextTop.modalRef, false);
+      }
+    }
+    return modalIndex;
+  }
+  isTopModal(modal) {
+    return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
+  }
+}
+const modalManager = new ModalManager();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModalManager,
+  ariaHidden,
+  modalManager
+});

package/dist/Modal/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,52 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  basicModalDemo: () => basicModalDemo,
+  keepMountedDemo: () => keepMountedDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Modal = __toESM(require("../../Modal"));
+const basicModalDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Modal.default, { open: true, disablePortal: true }, "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 Modal \u7EC4\u4EF6\u793A\u4F8B");
+};
+const keepMountedDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Modal.default, { disablePortal: true, keepMounted: true }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: { padding: "20px", background: "white", borderRadius: "8px" }
+    },
+    "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 keepMounted Modal \u7EC4\u4EF6\u793A\u4F8B"
+  ));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  basicModalDemo,
+  keepMountedDemo
+});

package/dist/Modal/index.css

@@ -7,7 +7,7 @@
   z-index: var(--bui-z-index-modal);
   font-family: var(--bui-font-family);
 }
-.bui-modal-exited {
+.bui-modal-hidden {
   visibility: hidden;
 }
 .bui-modal-backdrop {

package/dist/Modal/index.js

@@ -29,14 +29,22 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var Modal_exports = {};
 __export(Modal_exports, {
   Modal: () => import_Modal2.default,
-  default: () => import_Modal.default
+  ModalManager: () => import_ModalManager.ModalManager,
+  default: () => import_Modal.default,
+  modalManager: () => import_ModalManager.modalManager,
+  useModal: () => import_useModal.useModal
 });
 module.exports = __toCommonJS(Modal_exports);
 var import_Modal = __toESM(require("./Modal"));
 var import_Modal2 = __toESM(require("./Modal"));
 __reExport(Modal_exports, require("./Modal.types"), module.exports);
+var import_ModalManager = require("./ModalManager");
+var import_useModal = require("./useModal");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Modal,
+  ModalManager,
+  modalManager,
+  useModal,
   ...require("./Modal.types")
 });