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

package/es/Modal/Modal.miniapp.js

@@ -29,12 +29,12 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { useForkRef } from "@bifrostui/utils";
 import clsx from "clsx";
-import React, { useState } from "react";
+import React from "react";
 import { View } from "@tarojs/components";
 import Backdrop from "../Backdrop";
 import Portal from "../Portal";
+import { useModal } from "./useModal";
 import "./index.css";
 const prefixCls = "bui-modal";
 const Modal = /* @__PURE__ */ React.forwardRef(
@@ -49,6 +49,7 @@ const Modal = /* @__PURE__ */ React.forwardRef(
       disableScrollLock = false,
       hideBackdrop = false,
       onClose,
+      onClick,
       keepMounted
     } = _a, others = __objRest(_a, [
       "className",
@@ -60,45 +61,60 @@ const Modal = /* @__PURE__ */ React.forwardRef(
       "disableScrollLock",
       "hideBackdrop",
       "onClose",
+      "onClick",
       "keepMounted"
     ]);
-    const modalRef = React.useRef(null);
-    const handleRef = useForkRef(modalRef, ref);
-    const [backdropExited, setBackDropExited] = 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
+    } = useModal(__spreadProps(__spreadValues({}, props), {
+      disableScrollLock,
+      children: React.isValidElement(children) ? children : void 0,
+      open,
+      onClose,
+      rootRef: ref
+    }));
+    if (!keepMounted && !open && (!hasTransition || exited)) {
+      return null;
+    }
+    const rootProps = getRootProps(__spreadProps(__spreadValues({}, others), {
+      className: clsx(
+        prefixCls,
+        {
+          [`${prefixCls}-hidden`]: !open && exited
+        },
+        className
+      )
+    }));
+    const backdropProps = getBackdropProps(__spreadProps(__spreadValues({}, BackdropProps), {
+      className: clsx(`${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 (React.isValidElement(children)) {
+        return React.cloneElement(children, __spreadValues(__spreadProps(__spreadValues({}, transitionProps), {
+          tabIndex: -1
+        }), children.props));
       }
+      return children;
     };
-    if (!mounted) {
-      return null;
-    }
     return /* @__PURE__ */ React.createElement(Portal, { container, disablePortal }, /* @__PURE__ */ React.createElement(
       View,
-      __spreadValues({
-        className: clsx(prefixCls, className),
-        ref: handleRef,
+      __spreadProps(__spreadValues({
         catchMove: !disableScrollLock
-      }, others),
-      !hideBackdrop ? /* @__PURE__ */ React.createElement(
-        Backdrop,
-        __spreadProps(__spreadValues({
-          open,
-          onClick: handleBackdropClick,
-          onEnter: () => setBackDropExited(false),
-          onExited: () => setBackDropExited(true)
-        }, BackdropProps), {
-          className: clsx(
-            `${prefixCls}-backdrop`,
-            BackdropProps == null ? void 0 : BackdropProps.className
-          )
-        })
-      ) : null,
-      (open || keepMounted) && children
+      }, rootProps), {
+        onClick: (event) => {
+          onClick == null ? void 0 : onClick(event);
+        }
+      }),
+      !hideBackdrop && /* @__PURE__ */ React.createElement(Backdrop, __spreadValues({}, backdropProps)),
+      renderChildren()
     ));
   }
 );

package/es/Modal/ModalManager.js

@@ -0,0 +1,214 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+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();
+export {
+  ModalManager,
+  ariaHidden,
+  modalManager
+};

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

@@ -0,0 +1,18 @@
+import React from "react";
+import Modal from "../../Modal";
+const basicModalDemo = () => {
+  return /* @__PURE__ */ React.createElement(Modal, { open: true, disablePortal: true }, "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 Modal \u7EC4\u4EF6\u793A\u4F8B");
+};
+const keepMountedDemo = () => {
+  return /* @__PURE__ */ React.createElement(Modal, { disablePortal: true, keepMounted: true }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      style: { padding: "20px", background: "white", borderRadius: "8px" }
+    },
+    "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 keepMounted Modal \u7EC4\u4EF6\u793A\u4F8B"
+  ));
+};
+export {
+  basicModalDemo,
+  keepMountedDemo
+};

package/es/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/es/Modal/index.js

@@ -1,7 +1,12 @@
 import { default as default2 } from "./Modal";
 import { default as default3 } from "./Modal";
 export * from "./Modal.types";
+import { ModalManager, modalManager } from "./ModalManager";
+import { useModal } from "./useModal";
 export {
   default3 as Modal,
-  default2 as default
+  ModalManager,
+  default2 as default,
+  modalManager,
+  useModal
 };

package/es/Modal/useModal.js

@@ -0,0 +1,169 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useForkRef, useEventCallback } from "@bifrostui/utils";
+import { ariaHidden, modalManager } from "./ModalManager";
+function getContainer(container) {
+  if (typeof container === "function") {
+    return container();
+  }
+  return container || null;
+}
+function getHasTransition(children) {
+  return Object.prototype.hasOwnProperty.call((children == null ? void 0 : children.props) || {}, "in");
+}
+function useModal(parameters) {
+  const {
+    container,
+    disableScrollLock = false,
+    onClose,
+    open,
+    rootRef,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    children
+  } = parameters;
+  const modal = useRef({
+    modalRef: null,
+    mount: null
+  });
+  const modalRef = useRef(null);
+  const mountNodeRef = useRef(null);
+  const handleRef = useForkRef(modalRef, rootRef);
+  const [exited, setExited] = useState(!open);
+  const hasTransition = getHasTransition(children);
+  let ariaHiddenProp = true;
+  if (parameters["aria-hidden"] === "false" || parameters["aria-hidden"] === false) {
+    ariaHiddenProp = false;
+  }
+  const getModal = () => {
+    if (modalRef.current && mountNodeRef.current) {
+      modal.current.modalRef = modalRef.current;
+      modal.current.mount = mountNodeRef.current;
+    }
+    return modal.current;
+  };
+  const isTopModal = () => modalManager.isTopModal(getModal());
+  const handleMounted = () => {
+    modalManager.mount(getModal(), {
+      disableScrollLock
+    });
+  };
+  const handleOpen = useEventCallback(() => {
+    const resolvedContainer = getContainer(container) || document.body;
+    modalManager.add(getModal(), resolvedContainer);
+    if (modalRef.current) {
+      handleMounted();
+    }
+  });
+  const handlePortalRef = useEventCallback((node) => {
+    mountNodeRef.current = node;
+    if (!node) {
+      return;
+    }
+    if (open && isTopModal()) {
+      handleMounted();
+    } else if (modalRef.current) {
+      ariaHidden(modalRef.current, ariaHiddenProp);
+    }
+  });
+  const handleClose = useCallback(() => {
+    modalManager.remove(getModal(), ariaHiddenProp);
+  }, [ariaHiddenProp]);
+  useEffect(() => {
+    return () => {
+      handleClose();
+    };
+  }, [handleClose]);
+  useEffect(() => {
+    if (open) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
+  }, [open, handleClose, hasTransition, handleOpen]);
+  const createHandleBackdropClick = (
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (backdropHandlers = {}) => (event) => {
+      var _a;
+      (_a = backdropHandlers.onClick) == null ? void 0 : _a.call(backdropHandlers, event);
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+      if (onClose) {
+        onClose(event, { from: "backdropClick" });
+      }
+    }
+  );
+  const getRootProps = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (rootHandlers) => {
+      return __spreadProps(__spreadValues({
+        role: "presentation"
+      }, rootHandlers), {
+        ref: handleRef
+      });
+    },
+    [handleRef]
+  );
+  const getBackdropProps = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (backdropHandlers = {}) => {
+      const propsEventHandlers = {
+        onClick: createHandleBackdropClick(backdropHandlers)
+      };
+      const cleanedHandlers = __spreadValues({}, backdropHandlers);
+      delete cleanedHandlers.onClick;
+      return __spreadProps(__spreadValues(__spreadValues({
+        "aria-hidden": true
+      }, cleanedHandlers), propsEventHandlers), {
+        open
+      });
+    },
+    [createHandleBackdropClick, open]
+  );
+  const getTransitionProps = useCallback(() => {
+    const handleEnter = () => {
+      var _a, _b;
+      setExited(false);
+      (_b = (_a = children == null ? void 0 : children.props) == null ? void 0 : _a.onEnter) == null ? void 0 : _b.call(_a);
+    };
+    const handleExited = () => {
+      var _a, _b;
+      setExited(true);
+      (_b = (_a = children == null ? void 0 : children.props) == null ? void 0 : _a.onExited) == null ? void 0 : _b.call(_a);
+    };
+    return {
+      onEnter: handleEnter,
+      onExited: handleExited
+    };
+  }, [children]);
+  return {
+    getRootProps,
+    getBackdropProps,
+    getTransitionProps,
+    rootRef: handleRef,
+    portalRef: handlePortalRef,
+    exited,
+    hasTransition
+  };
+}
+export {
+  useModal
+};

package/es/NavBar/index.css

@@ -6,7 +6,7 @@ xhs-page {
   --bui-navbar-padding: 0 8px;
   --bui-navbar-title-padding: 0 8px;
   --bui-navbar-icon-font-size: 24px;
-  --bui-navbar-background-color: var(--bui-color-white);
+  --bui-navbar-bg-color: var(--bui-color-white);
   --bui-navbar-border-bottom: none;
   --bui-navbar-z-index: auto;
   --bui-navbar-title-max-width: 60%;
@@ -20,7 +20,7 @@ xhs-page {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: var(--bui-navbar-background-color);
+  background-color: var(--bui-navbar-bg-color);
   border-bottom: var(--bui-navbar-border-bottom);
   user-select: none;
   z-index: var(--bui-navbar-z-index);

package/es/Picker/Picker.css

@@ -46,6 +46,10 @@ xhs-page {
   line-height: var(--bui-picker-confirm-line-height);
   color: var(--bui-color-primary);
 }
+.bui-picker-confirm-disabled {
+  color: var(--bui-color-fg-default);
+  opacity: var(--bui-picker-confirm-disabled-opacity);
+}
 .bui-picker-container {
   width: 100%;
   height: var(--bui-picker-panel-height);