@bifrostui/react 1.5.3 → 2.0.0-alpha.1

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

@@ -0,0 +1,15 @@
+.bui-modal {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  z-index: var(--bui-z-index-modal);
+  font-family: var(--bui-font-family);
+}
+.bui-modal-hidden {
+  visibility: hidden;
+}
+.bui-modal-backdrop {
+  z-index: -1;
+}

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/NavBar.js

@@ -30,7 +30,7 @@ import React from "react";
 import clsx from "clsx";
 import { useForkRef, useSize } from "@bifrostui/utils";
 import { ArrowBackwardLargeIcon } from "@bifrostui/icons";
-import "./NavBar.css";
+import "./index.css";
 const prefixCls = "bui-navbar";
 const NavBar = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
@@ -103,7 +103,6 @@ const NavBar = /* @__PURE__ */ React.forwardRef((props, ref) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, renderNavBar(), renderPlaceholder());
 });
 NavBar.displayName = "BuiNavBar";
-NavBar.defaultProps = {};
 var NavBar_default = NavBar;
 export {
   NavBar_default as default

package/es/NavBar/index.css

@@ -0,0 +1,65 @@
+:root,
+page,
+xhs-page {
+  --bui-navbar-width: 100%;
+  --bui-navbar-height: 45px;
+  --bui-navbar-padding: 0 8px;
+  --bui-navbar-title-padding: 0 8px;
+  --bui-navbar-icon-font-size: 24px;
+  --bui-navbar-bg-color: var(--bui-color-white);
+  --bui-navbar-border-bottom: none;
+  --bui-navbar-z-index: auto;
+  --bui-navbar-title-max-width: 60%;
+}
+.bui-navbar {
+  position: relative;
+  width: var(--bui-navbar-width);
+  height: var(--bui-navbar-height);
+  box-sizing: border-box;
+  padding: var(--bui-navbar-padding);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--bui-navbar-bg-color);
+  border-bottom: var(--bui-navbar-border-bottom);
+  user-select: none;
+  z-index: var(--bui-navbar-z-index);
+  font-family: var(--bui-font-family);
+}
+.bui-navbar-fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.bui-navbar-title {
+  max-width: var(--bui-navbar-title-max-width);
+  padding: var(--bui-navbar-title-padding);
+  font-size: var(--bui-title-size-2);
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bui-navbar-left,
+.bui-navbar-right {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-size: var(--bui-title-size-3);
+}
+.bui-navbar-left {
+  justify-content: flex-start;
+  text-align: left;
+}
+.bui-navbar-right {
+  justify-content: flex-end;
+  text-align: right;
+  align-self: stretch;
+}
+.bui-navbar-icon {
+  font-size: var(--bui-navbar-icon-font-size);
+}
+.bui-navbar-placeholder {
+  width: 100%;
+}

package/es/Picker/Picker.css

@@ -1,32 +1,36 @@
+:root,
+page,
+xhs-page {
+  --bui-picker-header-height: 50px;
+  --bui-picker-header-padding: 0 var(--bui-spacing-lg);
+  --bui-picker-cancel-height: 100%;
+  --bui-picker-cancel-line-height: 50px;
+  --bui-picker-confirm-height: 100%;
+  --bui-picker-confirm-line-height: 50px;
+  --bui-picker-panel-height: 260px;
+  --bui-picker-indicator-top: 108px;
+  --bui-picker-option-height: 36px;
+  --bui-picker-option-font-size: var(--bui-title-size-4);
+}
 .bui-picker {
-  --header-height: var(--bui-picker-header-height, 50px);
-  --header-padding: var(--bui-picker-header-padding, 0 var(--bui-spacing-lg));
-  --cancel-height: var(--bui-picker-cancel-height, 100%);
-  --cancel-line-height: var(--bui-picker-cancel-line-height, 50px);
-  --confirm-height: var(--bui-picker-confirm-height, 100%);
-  --confirm-line-height: var(--bui-picker-confirm-line-height, 50px);
-  --panel-container-height: var(--bui-picker-panel-height, 260px);
-  --indicator-top: var(--bui-picker-indicator-top, 108px);
-  --option-height: var(--bui-picker-option-height, 36px);
-  --bui-picker-confirm-disabled-opacity: 0.38;
   font-family: var(--bui-font-family);
 }
 .bui-picker .bui-drawer-content {
   border-radius: var(--bui-shape-radius-drawer) var(--bui-shape-radius-drawer) 0 0;
 }
 .bui-picker-header {
-  height: var(--header-height);
+  height: var(--bui-picker-header-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--header-padding);
+  padding: var(--bui-picker-header-padding);
 }
 .bui-picker-cancel {
   cursor: pointer;
-  height: var(--cancel-height);
+  height: var(--bui-picker-cancel-height);
   font-size: var(--bui-title-size-4);
   text-align: center;
-  line-height: var(--cancel-line-height);
+  line-height: var(--bui-picker-cancel-line-height);
   color: var(--bui-color-fg-default);
 }
 .bui-picker-title {
@@ -36,10 +40,10 @@
 }
 .bui-picker-confirm {
   cursor: pointer;
-  height: var(--confirm-height);
+  height: var(--bui-picker-confirm-height);
   font-size: var(--bui-title-size-4);
   text-align: center;
-  line-height: var(--confirm-line-height);
+  line-height: var(--bui-picker-confirm-line-height);
   color: var(--bui-color-primary);
 }
 .bui-picker-confirm-disabled {
@@ -48,7 +52,7 @@
 }
 .bui-picker-container {
   width: 100%;
-  height: var(--panel-container-height);
+  height: var(--bui-picker-panel-height);
   display: flex;
   overflow: hidden;
 }

package/es/Picker/Picker.js

@@ -29,12 +29,12 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import clsx from "clsx";
 import React, { useEffect, useRef, useState, useCallback } from "react";
+import clsx from "clsx";
 import Drawer from "../Drawer";
-import PickerPanel from "./PickerPanel";
 import { useLocaleText } from "../locales";
 import { formatOptions, pickerPanelType, safeData } from "./utils";
+import PickerPanel from "./PickerPanel";
 import "./Picker.css";
 const prefixCls = "bui-picker";
 const checkDisabled = (values, columns) => values.find(
@@ -204,35 +204,67 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
       ref,
       open,
       className: clsx(prefixCls, className),
-      onClose: handleClose
+      onClose: handleClose,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": title || "Picker"
     }, others),
     /* @__PURE__ */ React.createElement(
       "div",
       __spreadProps(__spreadValues({}, contentProps), {
         className: clsx(`${prefixCls}-content`, contentProps == null ? void 0 : contentProps.className)
       }),
-      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header` }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-cancel`, onClick: cancel }, propCancelText || cancelText), title && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title` }, title), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: clsx(`${prefixCls}-confirm`, {
-            [`${prefixCls}-confirm-disabled`]: disabled
-          }),
-          onClick: confirm
+          className: `${prefixCls}-header`,
+          role: "toolbar",
+          "aria-label": "Toolbar"
         },
-        propConfirmText || confirmText
-      )),
-      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-container` }, columns.map((column, index) => /* @__PURE__ */ React.createElement(
-        PickerPanel,
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `${prefixCls}-cancel`,
+            onClick: cancel,
+            "aria-label": "Cancel"
+          },
+          propCancelText || cancelText
+        ),
+        title && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title`, role: "heading", "aria-level": 2 }, title),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: clsx(`${prefixCls}-confirm`, {
+              [`${prefixCls}-confirm-disabled`]: disabled
+            }),
+            onClick: confirm,
+            type: "button",
+            "aria-label": "Confirm",
+            tabIndex: disabled ? -1 : 0
+          },
+          propConfirmText || confirmText
+        )
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
         {
-          ref: setRefs(index),
-          key: index,
-          options: column,
-          columnIndex: index,
-          value: internalValue == null ? void 0 : internalValue[index],
-          onSelect: handleSelect,
-          pickerStyle: others == null ? void 0 : others.style
-        }
-      )))
+          className: `${prefixCls}-container`,
+          role: "listbox",
+          "aria-label": "Options"
+        },
+        columns.map((column, index) => /* @__PURE__ */ React.createElement(
+          PickerPanel,
+          {
+            ref: setRefs(index),
+            key: index,
+            options: column,
+            columnIndex: index,
+            value: internalValue == null ? void 0 : internalValue[index],
+            onSelect: handleSelect,
+            open
+          }
+        ))
+      )
     )
   );
 });