@bifrostui/react 2.0.0-alpha.22 → 2.0.0-alpha.24

package/dist/DatePicker/DatePicker.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './DatePicker.types';
-declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps<"div", Omit<import("../Picker").PickerProps<"div", import("..").DrawerProps>, "value" | "defaultValue" | "onChange" | "onClose" | "onConfirm">>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps<"div", Omit<import("../Picker").PickerProps<"div", import("..").DrawerProps>, "defaultValue" | "onChange" | "value" | "onClose" | "onConfirm">>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

package/dist/Dialog/Dialog.types.d.ts

@@ -33,11 +33,11 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'content'> {
     /**
      * 透传给内部Button组件的属性
      */
-    okButtonProps?: Partial<ButtonProps>;
+    okButtonProps?: Partial<ButtonProps> & Record<`data-${string}`, string>;
     /**
      * 透传给内部Button组件的属性
      */
-    cancelButtonProps?: Partial<ButtonProps>;
+    cancelButtonProps?: Partial<ButtonProps> & Record<`data-${string}`, string>;
     /**
      * 确认按钮文本内容
      */

package/dist/Dialog/FunctionalDialog.js

@@ -92,7 +92,7 @@ const formatProps = (props) => {
 const DialogGenerator = (options) => {
   const dialogFragment = import_utils.isMini ? document.createElement("div") : document.createDocumentFragment();
   const rootElement = (0, import_utils.getRootContainer)(options == null ? void 0 : options.container);
-  rootElement.appendChild(dialogFragment);
+  rootElement == null ? void 0 : rootElement.appendChild(dialogFragment);
   const DialogWrapper = () => {
     const _a = options, { onOk, onCancel } = _a, rest = __objRest(_a, ["onOk", "onCancel"]);
     const close = (0, import_react.useCallback)(() => {

package/dist/Dialog/index.css

@@ -43,10 +43,12 @@ xhs-page {
 }
 .bui-dialog-actions {
   display: flex;
-  gap: var(--bui-spacing-lg);
   align-items: center;
   justify-content: center;
 }
+.bui-dialog-actions > * + * {
+  margin-left: var(--bui-spacing-lg);
+}
 .bui-dialog-input {
   margin-bottom: 18px;
 }

package/dist/Modal/Modal.js

@@ -75,6 +75,8 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
     container,
     disablePortal = false,
     disableScrollLock = false,
+    disableAutoFocus = false,
+    disableRestoreFocus = false,
     hideBackdrop = false,
     onClose,
     keepMounted = false
@@ -86,6 +88,8 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "container",
     "disablePortal",
     "disableScrollLock",
+    "disableAutoFocus",
+    "disableRestoreFocus",
     "hideBackdrop",
     "onClose",
     "keepMounted"
@@ -100,7 +104,9 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
   } = (0, import_useModal.useModal)(__spreadProps(__spreadValues({}, props), {
     container,
     disableScrollLock,
-    children: React.isValidElement(children) ? children : void 0,
+    disableAutoFocus,
+    disableRestoreFocus,
+    children,
     open,
     onClose,
     rootRef: ref

package/dist/Modal/Modal.miniapp.d.ts

@@ -10,7 +10,9 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     disableScrollLock?: boolean;
     disablePortal?: boolean;
     keepMounted?: boolean;
+    disableAutoFocus?: boolean;
+    disableRestoreFocus?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted" | "disableAutoFocus" | "disableRestoreFocus">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/Modal/Modal.types.d.ts

@@ -39,6 +39,19 @@ export type ModalProps<D extends React.ElementType = 'div', P = {}> = OverridePr
          * 是否保持挂载状态
          */
         keepMounted?: boolean;
+        /**
+         * 是否禁用自动焦点管理
+         * 仅web端生效
+         * @default false
+         *
+         */
+        disableAutoFocus?: boolean;
+        /**
+         * 是否禁用在关闭时恢复焦点到触发元素
+         * 仅web端生效
+         * @default false
+         */
+        disableRestoreFocus?: boolean;
     };
     defaultComponent: D;
 }, D>;

package/dist/Modal/useModal.d.ts

@@ -2,11 +2,14 @@ import React from 'react';
 export interface UseModalParameters {
     container?: Element | (() => Element | null) | null;
     disableScrollLock?: boolean;
+    disableAutoFocus?: boolean;
+    disableRestoreFocus?: boolean;
     onClose?: (event: React.SyntheticEvent<Element, Event>, detail?: {
         from: 'backdropClick' | 'escapeKeyDown';
     }) => void;
     open: boolean;
     rootRef?: React.Ref<Element>;
+    children?: React.ReactElement;
     [key: string]: any;
 }
 export interface UseModalReturnValue {

package/dist/Modal/useModal.js

@@ -53,6 +53,8 @@ function useModal(parameters) {
   const {
     container,
     disableScrollLock = false,
+    disableAutoFocus = false,
+    disableRestoreFocus = false,
     onClose,
     open,
     rootRef,
@@ -67,6 +69,7 @@ function useModal(parameters) {
   const handleRef = (0, import_utils.useForkRef)(modalRef, rootRef);
   const [exited, setExited] = (0, import_react.useState)(!open);
   const hasTransition = getHasTransition(children);
+  const lastFocusedElement = (0, import_react.useRef)(null);
   let ariaHiddenProp = true;
   if (parameters["aria-hidden"] === "false" || parameters["aria-hidden"] === false) {
     ariaHiddenProp = false;
@@ -120,6 +123,38 @@ function useModal(parameters) {
       handleClose();
     }
   }, [open, handleClose, hasTransition, handleOpen]);
+  (0, import_react.useEffect)(() => {
+    if (open && modalRef.current) {
+      const doc = modalRef.current.ownerDocument || document;
+      if (!lastFocusedElement.current) {
+        lastFocusedElement.current = doc.activeElement;
+      }
+      if (!disableAutoFocus) {
+        if (!modalRef.current.contains(doc.activeElement)) {
+          if (!modalRef.current.hasAttribute("tabIndex")) {
+            modalRef.current.setAttribute("tabIndex", "-1");
+          }
+          const autoFocusElement = modalRef.current.querySelector(
+            '[autofocus], [tabindex="-1"]'
+          );
+          if (autoFocusElement) {
+            autoFocusElement.focus();
+          } else {
+            modalRef.current.focus();
+          }
+        }
+      }
+      return () => {
+        if (!disableRestoreFocus && lastFocusedElement.current) {
+          if (lastFocusedElement.current && typeof lastFocusedElement.current.focus === "function") {
+            lastFocusedElement.current.focus();
+          }
+          lastFocusedElement.current = null;
+        }
+      };
+    }
+    return void 0;
+  }, [open, disableAutoFocus, disableRestoreFocus, children]);
   const createHandleBackdropClick = (backdropHandlers = {}) => (event) => {
     var _a;
     (_a = backdropHandlers.onClick) == null ? void 0 : _a.call(backdropHandlers, event);

package/dist/Toast/FunctionalToast.js

@@ -87,7 +87,7 @@ const Toast = (props) => {
   const _a = options, { container } = _a, restOptions = __objRest(_a, ["container"]);
   const rootWrapper = document.createElement("div");
   const rootElement = (0, import_utils.getRootContainer)(container);
-  rootElement.appendChild(rootWrapper);
+  rootElement == null ? void 0 : rootElement.appendChild(rootWrapper);
   const ToastComponent = () => {
     const _a2 = restOptions, { duration, multiple, onClose, onExited } = _a2, others = __objRest(_a2, ["duration", "multiple", "onClose", "onExited"]);
     const [open, setOpen] = (0, import_react.useState)(true);
@@ -164,7 +164,6 @@ const UseToastComponent = (props) => {
   ]);
   const options = __spreadValues(__spreadValues({}, defaultProps), formatProps(restProps));
   const _b = options, { duration, multiple, onClose, container } = _b, others = __objRest(_b, ["duration", "multiple", "onClose", "container"]);
-  const rootElement = (0, import_utils.getRootContainer)(container);
   const timerRef = (0, import_react.useRef)(null);
   const close = () => {
     onSetOpenFalse == null ? void 0 : onSetOpenFalse();
@@ -192,7 +191,7 @@ const UseToastComponent = (props) => {
     onEnd == null ? void 0 : onEnd();
     onExited == null ? void 0 : onExited();
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container: rootElement }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { container }, /* @__PURE__ */ import_react.default.createElement(
     import_Toast.default,
     __spreadProps(__spreadValues({}, others), {
       open,

package/es/Dialog/Dialog.types.d.ts

@@ -33,11 +33,11 @@ export interface DialogProps extends Omit<ModalProps, 'title' | 'content'> {
     /**
      * 透传给内部Button组件的属性
      */
-    okButtonProps?: Partial<ButtonProps>;
+    okButtonProps?: Partial<ButtonProps> & Record<`data-${string}`, string>;
     /**
      * 透传给内部Button组件的属性
      */
-    cancelButtonProps?: Partial<ButtonProps>;
+    cancelButtonProps?: Partial<ButtonProps> & Record<`data-${string}`, string>;
     /**
      * 确认按钮文本内容
      */

package/es/Dialog/FunctionalDialog.js

@@ -62,7 +62,7 @@ const formatProps = (props) => {
 const DialogGenerator = (options) => {
   const dialogFragment = isMini ? document.createElement("div") : document.createDocumentFragment();
   const rootElement = getRootContainer(options == null ? void 0 : options.container);
-  rootElement.appendChild(dialogFragment);
+  rootElement == null ? void 0 : rootElement.appendChild(dialogFragment);
   const DialogWrapper = () => {
     const _a = options, { onOk, onCancel } = _a, rest = __objRest(_a, ["onOk", "onCancel"]);
     const close = useCallback(() => {

package/es/Dialog/index.css

@@ -43,10 +43,12 @@ xhs-page {
 }
 .bui-dialog-actions {
   display: flex;
-  gap: var(--bui-spacing-lg);
   align-items: center;
   justify-content: center;
 }
+.bui-dialog-actions > * + * {
+  margin-left: var(--bui-spacing-lg);
+}
 .bui-dialog-input {
   margin-bottom: 18px;
 }

package/es/Modal/Modal.js

@@ -45,6 +45,8 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
     container,
     disablePortal = false,
     disableScrollLock = false,
+    disableAutoFocus = false,
+    disableRestoreFocus = false,
     hideBackdrop = false,
     onClose,
     keepMounted = false
@@ -56,6 +58,8 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "container",
     "disablePortal",
     "disableScrollLock",
+    "disableAutoFocus",
+    "disableRestoreFocus",
     "hideBackdrop",
     "onClose",
     "keepMounted"
@@ -70,7 +74,9 @@ const Modal = /* @__PURE__ */ React.forwardRef((props, ref) => {
   } = useModal(__spreadProps(__spreadValues({}, props), {
     container,
     disableScrollLock,
-    children: React.isValidElement(children) ? children : void 0,
+    disableAutoFocus,
+    disableRestoreFocus,
+    children,
     open,
     onClose,
     rootRef: ref

package/es/Modal/Modal.miniapp.d.ts

@@ -10,7 +10,9 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     disableScrollLock?: boolean;
     disablePortal?: boolean;
     keepMounted?: boolean;
+    disableAutoFocus?: boolean;
+    disableRestoreFocus?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "open" | "container" | keyof import("@bifrostui/types").ICommonProps | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted" | "disableAutoFocus" | "disableRestoreFocus">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/es/Modal/Modal.types.d.ts

@@ -39,6 +39,19 @@ export type ModalProps<D extends React.ElementType = 'div', P = {}> = OverridePr
          * 是否保持挂载状态
          */
         keepMounted?: boolean;
+        /**
+         * 是否禁用自动焦点管理
+         * 仅web端生效
+         * @default false
+         *
+         */
+        disableAutoFocus?: boolean;
+        /**
+         * 是否禁用在关闭时恢复焦点到触发元素
+         * 仅web端生效
+         * @default false
+         */
+        disableRestoreFocus?: boolean;
     };
     defaultComponent: D;
 }, D>;

package/es/Modal/useModal.d.ts

@@ -2,11 +2,14 @@ import React from 'react';
 export interface UseModalParameters {
     container?: Element | (() => Element | null) | null;
     disableScrollLock?: boolean;
+    disableAutoFocus?: boolean;
+    disableRestoreFocus?: boolean;
     onClose?: (event: React.SyntheticEvent<Element, Event>, detail?: {
         from: 'backdropClick' | 'escapeKeyDown';
     }) => void;
     open: boolean;
     rootRef?: React.Ref<Element>;
+    children?: React.ReactElement;
     [key: string]: any;
 }
 export interface UseModalReturnValue {

package/es/Modal/useModal.js

@@ -33,6 +33,8 @@ function useModal(parameters) {
   const {
     container,
     disableScrollLock = false,
+    disableAutoFocus = false,
+    disableRestoreFocus = false,
     onClose,
     open,
     rootRef,
@@ -47,6 +49,7 @@ function useModal(parameters) {
   const handleRef = useForkRef(modalRef, rootRef);
   const [exited, setExited] = useState(!open);
   const hasTransition = getHasTransition(children);
+  const lastFocusedElement = useRef(null);
   let ariaHiddenProp = true;
   if (parameters["aria-hidden"] === "false" || parameters["aria-hidden"] === false) {
     ariaHiddenProp = false;
@@ -100,6 +103,38 @@ function useModal(parameters) {
       handleClose();
     }
   }, [open, handleClose, hasTransition, handleOpen]);
+  useEffect(() => {
+    if (open && modalRef.current) {
+      const doc = modalRef.current.ownerDocument || document;
+      if (!lastFocusedElement.current) {
+        lastFocusedElement.current = doc.activeElement;
+      }
+      if (!disableAutoFocus) {
+        if (!modalRef.current.contains(doc.activeElement)) {
+          if (!modalRef.current.hasAttribute("tabIndex")) {
+            modalRef.current.setAttribute("tabIndex", "-1");
+          }
+          const autoFocusElement = modalRef.current.querySelector(
+            '[autofocus], [tabindex="-1"]'
+          );
+          if (autoFocusElement) {
+            autoFocusElement.focus();
+          } else {
+            modalRef.current.focus();
+          }
+        }
+      }
+      return () => {
+        if (!disableRestoreFocus && lastFocusedElement.current) {
+          if (lastFocusedElement.current && typeof lastFocusedElement.current.focus === "function") {
+            lastFocusedElement.current.focus();
+          }
+          lastFocusedElement.current = null;
+        }
+      };
+    }
+    return void 0;
+  }, [open, disableAutoFocus, disableRestoreFocus, children]);
   const createHandleBackdropClick = (backdropHandlers = {}) => (event) => {
     var _a;
     (_a = backdropHandlers.onClick) == null ? void 0 : _a.call(backdropHandlers, event);

package/es/Toast/FunctionalToast.js

@@ -62,7 +62,7 @@ const Toast = (props) => {
   const _a = options, { container } = _a, restOptions = __objRest(_a, ["container"]);
   const rootWrapper = document.createElement("div");
   const rootElement = getRootContainer(container);
-  rootElement.appendChild(rootWrapper);
+  rootElement == null ? void 0 : rootElement.appendChild(rootWrapper);
   const ToastComponent = () => {
     const _a2 = restOptions, { duration, multiple, onClose, onExited } = _a2, others = __objRest(_a2, ["duration", "multiple", "onClose", "onExited"]);
     const [open, setOpen] = useState(true);
@@ -139,7 +139,6 @@ const UseToastComponent = (props) => {
   ]);
   const options = __spreadValues(__spreadValues({}, defaultProps), formatProps(restProps));
   const _b = options, { duration, multiple, onClose, container } = _b, others = __objRest(_b, ["duration", "multiple", "onClose", "container"]);
-  const rootElement = getRootContainer(container);
   const timerRef = useRef(null);
   const close = () => {
     onSetOpenFalse == null ? void 0 : onSetOpenFalse();
@@ -167,7 +166,7 @@ const UseToastComponent = (props) => {
     onEnd == null ? void 0 : onEnd();
     onExited == null ? void 0 : onExited();
   };
-  return /* @__PURE__ */ React.createElement(Portal, { container: rootElement }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Portal, { container }, /* @__PURE__ */ React.createElement(
     ToastView,
     __spreadProps(__spreadValues({}, others), {
       open,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "2.0.0-alpha.22",
+  "version": "2.0.0-alpha.24",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -43,10 +43,10 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/icons": "2.0.0-alpha.22",
-    "@bifrostui/styles": "2.0.0-alpha.22",
-    "@bifrostui/utils": "2.0.0-alpha.22",
-    "@bifrostui/types": "2.0.0-alpha.22"
+    "@bifrostui/icons": "2.0.0-alpha.24",
+    "@bifrostui/styles": "2.0.0-alpha.24",
+    "@bifrostui/utils": "2.0.0-alpha.24",
+    "@bifrostui/types": "2.0.0-alpha.24"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",