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

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.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * 自定义 Modal 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicModalDemo: () => React.JSX.Element;
+export declare const keepMountedDemo: () => React.JSX.Element;

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.d.ts

@@ -1,3 +1,6 @@
 export { default } from './Modal';
 export { default as Modal } from './Modal';
 export * from './Modal.types';
+export { ModalManager, modalManager } from './ModalManager';
+export { useModal } from './useModal';
+export type { UseModalParameters, UseModalReturnValue } from './useModal';

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.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface UseModalParameters {
+    container?: Element | (() => Element | null) | null;
+    disableScrollLock?: boolean;
+    onClose?: (event: React.SyntheticEvent<Element, Event>, detail?: {
+        from: 'backdropClick' | 'escapeKeyDown';
+    }) => void;
+    open: boolean;
+    rootRef?: React.Ref<Element>;
+    [key: string]: any;
+}
+export interface UseModalReturnValue {
+    getRootProps: (otherHandlers?: Record<string, any>) => Record<string, unknown>;
+    getBackdropProps: (otherHandlers?: Record<string, any>) => Record<string, unknown>;
+    getTransitionProps: () => {
+        onEnter: () => void;
+        onExited: () => void;
+    };
+    rootRef: React.RefCallback<Element>;
+    portalRef: React.RefCallback<HTMLElement>;
+    exited: boolean;
+    hasTransition: boolean;
+}
+export declare function useModal(parameters: UseModalParameters): UseModalReturnValue;

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);

package/es/Picker/Picker.js

@@ -29,14 +29,20 @@ 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(
+  (value, index) => {
+    var _a, _b;
+    return (_b = (_a = columns == null ? void 0 : columns[index]) == null ? void 0 : _a.find((column) => (column == null ? void 0 : column.value) === value)) == null ? void 0 : _b.disabled;
+  }
+);
 const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -44,6 +50,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
     title,
     options = [],
     value,
+    confirmText: propConfirmText,
+    cancelText: propCancelText,
     contentProps,
     onConfirm,
     onOptionChange,
@@ -55,6 +63,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "title",
     "options",
     "value",
+    "confirmText",
+    "cancelText",
     "contentProps",
     "onConfirm",
     "onOptionChange",
@@ -66,6 +76,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const [columns, setColumns] = useState([]);
   const [internalValue, setInternalValue] = useState([]);
   const { cancel: cancelText, confirm: confirmText } = useLocaleText("picker");
+  const disabled = checkDisabled(internalValue, columns);
   useEffect(() => {
     if (!open)
       return;
@@ -88,7 +99,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
   }, [value, options]);
   const confirm = (e) => {
     const isMoving = rollerRefs.current.some((roller) => roller == null ? void 0 : roller.isMoving);
-    if (isMoving)
+    if (isMoving || disabled)
       return;
     const { safeValue } = safeData({
       value: internalValue,
@@ -147,7 +158,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
         onOptionChange == null ? void 0 : onOptionChange(e, {
           value: conbineValues,
           options: formatted,
-          currentOption: columnOption
+          currentOption: columnOption,
+          columnIndex
         });
       } else {
         const result = [...internalValue];
@@ -156,7 +168,8 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
         onOptionChange == null ? void 0 : onOptionChange(e, {
           value: result,
           options,
-          currentOption: columnOption
+          currentOption: columnOption,
+          columnIndex
         });
       }
     }
@@ -191,26 +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 }, cancelText), title && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title` }, title), /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-confirm`, onClick: confirm }, confirmText)),
-      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-container` }, columns.map((column, index) => /* @__PURE__ */ React.createElement(
-        PickerPanel,
+      /* @__PURE__ */ React.createElement(
+        "div",
         {
-          ref: setRefs(index),
-          key: index,
-          options: column,
-          columnIndex: index,
-          defaultValue: internalValue == null ? void 0 : internalValue[index],
-          onSelect: handleSelect,
-          open
-        }
-      )))
+          className: `${prefixCls}-header`,
+          role: "toolbar",
+          "aria-label": "Toolbar"
+        },
+        /* @__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",
+        {
+          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
+          }
+        ))
+      )
     )
   );
 });