react-native-system-ui 0.0.7 → 1.0.1

package/dist/es/components/dialog/Dialog.js

@@ -1,11 +1,13 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { ActivityIndicator, Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, Animated, Easing, Pressable, StyleSheet, View } from 'react-native';
 import { useLocale } from '../config-provider/useLocale';
 import { nativeDriverEnabled } from '../../platform';
+import { useReducedMotion } from '../../hooks/animation';
 import { createHairlineView } from '../../utils/hairline';
 import { isPromiseLike } from '../../utils/promise';
 import { isNumber, isValidNode } from '../../utils/validate';
+import { renderTextOrNode } from '../../utils';
 import { Close } from 'react-native-system-icon';
 import Button from '../button';
 import Popup from '../popup';
@@ -20,8 +22,8 @@ const ActionButton = props => {
     disabled,
     onPress
   } = props;
-  const textColor = color ?? tokens.colors.confirm;
-  const dividerStyle = dividerPosition === 'none' ? null : [styles.actionButtonDivider, {
+  const txtColor = color ?? tokens.colors.confirm;
+  const divStyle = dividerPosition === 'none' ? null : [S.btnDiv, {
     width: 0
   }, createHairlineView({
     position: dividerPosition,
@@ -35,26 +37,25 @@ const ActionButton = props => {
     disabled: disabled || loading,
     style: ({
       pressed
-    }) => [styles.actionButton, {
+    }) => [S.btn, {
       height: tokens.sizes.actionHeight,
       opacity: pressed && !disabled && !loading ? 0.8 : 1
     }],
     onPress: disabled || loading ? undefined : onPress
-  }, dividerStyle && /*#__PURE__*/React.createElement(View, {
-    style: dividerStyle,
+  }, divStyle && /*#__PURE__*/React.createElement(View, {
+    style: divStyle,
     pointerEvents: "none"
   }), loading ? /*#__PURE__*/React.createElement(ActivityIndicator, {
     size: "small",
-    color: textColor
-  }) : /*#__PURE__*/React.isValidElement(text) ? text : /*#__PURE__*/React.createElement(Text, {
-    style: {
-      color: textColor,
-      fontSize: tokens.typography.actionSize,
-      fontWeight: tokens.typography.actionWeight
-    }
-  }, text ?? ''));
+    color: txtColor
+  }) : renderTextOrNode(text ?? '', {
+    color: txtColor,
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: tokens.typography.actionSize,
+    fontWeight: tokens.typography.actionWeight
+  }));
 };
-export const Dialog = props => {
+const DialogImpl = props => {
   const locale = useLocale();
   const {
     visible,
@@ -97,65 +98,94 @@ export const Dialog = props => {
     ...rest
   } = props;
   const tokens = useDialogTokens(tokensOverride);
-  const hasTitle = isValidNode(title);
-  const hasMessage = isValidNode(message);
-  const hasChildren = isValidNode(children);
-  const hasContent = hasMessage || hasChildren;
-  const hasFooterActions = showCancelButton || showConfirmButton;
-  const isRoundTheme = theme === 'round-button';
-  const cancelLoading = cancelProps?.loading;
-  const confirmLoading = confirmProps?.loading;
-  const cancelText = cancelButtonText ?? locale.cancel;
-  const confirmText = confirmButtonText ?? locale.confirm;
-  const actionSeqRef = useRef(0);
-  const runBeforeClose = action => {
-    if (!beforeClose) return true;
+  const reducedMotion = useReducedMotion();
+  const hTitle = isValidNode(title);
+  const hMsg = isValidNode(message);
+  const hChildren = isValidNode(children);
+  const hContent = hMsg || hChildren;
+  const hFooterActions = showCancelButton || showConfirmButton;
+  const isRound = theme === 'round-button';
+  const cancelLoad = cancelProps?.loading;
+  const confirmLoad = confirmProps?.loading;
+  const cancelTxt = cancelButtonText ?? locale.cancel;
+  const confirmTxt = confirmButtonText ?? locale.confirm;
+  const seqRef = useRef(0);
+  const beforeCloseRef = useRef(beforeClose);
+  beforeCloseRef.current = beforeClose;
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const onCancelRef = useRef(onCancel);
+  onCancelRef.current = onCancel;
+  const onConfirmRef = useRef(onConfirm);
+  onConfirmRef.current = onConfirm;
+  const onClickCloseIconRef = useRef(onClickCloseIcon);
+  onClickCloseIconRef.current = onClickCloseIcon;
+  const cancelLoadRef = useRef(cancelLoad);
+  cancelLoadRef.current = cancelLoad;
+  const confirmLoadRef = useRef(confirmLoad);
+  confirmLoadRef.current = confirmLoad;
+  const run = useCallback((action, handler) => {
+    seqRef.current += 1;
+    const seq = seqRef.current;
+    const bc = beforeCloseRef.current;
+    if (!bc) {
+      handler?.();
+      return;
+    }
+    ;
+    let result;
     try {
-      return beforeClose(action);
+      result = bc(action);
     } catch {
-      return true;
+      handler?.();
+      return;
     }
-  };
-  const runAction = (action, handler) => {
-    actionSeqRef.current += 1;
-    const seq = actionSeqRef.current;
-    const result = runBeforeClose(action);
+    ;
     if (result === false) return;
     if (isPromiseLike(result)) {
       void result.then(resolved => {
         if (resolved === false) return;
-        if (actionSeqRef.current !== seq) return;
+        if (seqRef.current !== seq) return;
         handler?.();
       }).catch(() => {
-        if (actionSeqRef.current !== seq) return;
+        if (seqRef.current !== seq) return;
         handler?.();
       });
       return;
     }
+    ;
     handler?.();
-  };
+  }, []);
   const handleCloseIcon = useCallback(() => {
-    onClickCloseIcon?.();
-    runAction('close', onClose);
-  }, [onClickCloseIcon, onClose]);
+    onClickCloseIconRef.current?.();
+    run('close', () => onCloseRef.current?.());
+  }, [run]);
   const handleCancel = useCallback(() => {
-    if (cancelLoading) return;
-    runAction('cancel', onCancel);
-  }, [cancelLoading, onCancel]);
+    if (cancelLoadRef.current) return;
+    run('cancel', () => onCancelRef.current?.());
+  }, [run]);
   const handleConfirm = useCallback(() => {
-    if (confirmLoading) return;
-    runAction('confirm', onConfirm);
-  }, [confirmLoading, onConfirm]);
+    if (confirmLoadRef.current) return;
+    run('confirm', () => onConfirmRef.current?.());
+  }, [run]);
   const scaleAnim = useRef(new Animated.Value(0.7)).current;
+  const scaleRef = useRef(null);
   useEffect(() => {
+    scaleRef.current?.stop();
     scaleAnim.setValue(visible ? 0.7 : 1);
-    Animated.timing(scaleAnim, {
+    const anim = Animated.timing(scaleAnim, {
       toValue: visible ? 1 : 0.9,
-      duration: 300,
+      duration: reducedMotion ? 0 : 300,
       easing: visible ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
-      useNativeDriver: nativeDriverEnabled
-    }).start();
-  }, [scaleAnim, visible]);
+      useNativeDriver: nativeDriverEnabled,
+      isInteraction: false
+    });
+    scaleRef.current = anim;
+    anim.start();
+  }, [scaleAnim, visible, reducedMotion]);
+  useEffect(() => () => {
+    scaleRef.current?.stop();
+  }, []);
   const widthStyle = useMemo(() => width ? isNumber(width) ? {
     width
   } : {
@@ -164,109 +194,120 @@ export const Dialog = props => {
     width: '90%',
     maxWidth: tokens.sizes.maxWidth
   }, [tokens.sizes.maxWidth, width]);
-  const titleWrapperStyle = useMemo(() => hasTitle ? [styles.titleWrapper, {
-    paddingTop: hasContent ? tokens.spacing.titlePaddingTop : tokens.spacing.titleIsolatedPadding,
-    paddingBottom: hasContent ? 0 : tokens.spacing.titleIsolatedPadding,
-    paddingHorizontal: hasContent ? tokens.spacing.paddingHorizontal : 0,
-    marginBottom: hasContent ? tokens.spacing.titleGap : 0
-  }] : null, [hasContent, hasTitle, tokens.spacing.paddingHorizontal, tokens.spacing.titleGap, tokens.spacing.titleIsolatedPadding, tokens.spacing.titlePaddingTop]);
-  const titleTextStyle = useMemo(() => hasTitle ? [styles.title, {
+  const titleWrapStyle = useMemo(() => hTitle ? [S.titleWrap, {
+    paddingTop: hContent ? tokens.spacing.titlePaddingTop : tokens.spacing.titleIsolatedPadding,
+    paddingBottom: hContent ? 0 : tokens.spacing.titleIsolatedPadding,
+    paddingHorizontal: hContent ? tokens.spacing.paddingHorizontal : 0,
+    marginBottom: hContent ? tokens.spacing.titleGap : 0
+  }] : null, [hContent, hTitle, tokens.spacing.paddingHorizontal, tokens.spacing.titleGap, tokens.spacing.titleIsolatedPadding, tokens.spacing.titlePaddingTop]);
+  const titleTxtStyle = useMemo(() => hTitle ? [S.title, {
     color: tokens.colors.title,
+    fontFamily: tokens.typography.fontFamily,
     fontSize: tokens.typography.titleSize,
     lineHeight: tokens.typography.titleLineHeight,
     fontWeight: tokens.typography.titleWeight
-  }, titleStyle] : null, [hasTitle, titleStyle, tokens.colors.title, tokens.typography.titleLineHeight, tokens.typography.titleSize, tokens.typography.titleWeight]);
-  const messageTextStyle = useMemo(() => [styles.message, {
-    color: isRoundTheme ? tokens.colors.title : tokens.colors.message,
+  }, titleStyle] : null, [hTitle, titleStyle, tokens.colors.title, tokens.typography.fontFamily, tokens.typography.titleLineHeight, tokens.typography.titleSize, tokens.typography.titleWeight]);
+  const msgTxtStyle = useMemo(() => [S.msg, {
+    color: isRound ? tokens.colors.title : tokens.colors.message,
+    fontFamily: tokens.typography.fontFamily,
     fontSize: tokens.typography.messageSize,
     lineHeight: tokens.typography.messageLineHeight,
     textAlign: messageAlign
-  }, messageStyle], [isRoundTheme, messageAlign, messageStyle, tokens.colors.message, tokens.colors.title, tokens.typography.messageLineHeight, tokens.typography.messageSize]);
-  const messageContentStyle = useMemo(() => !hasChildren ? {
+  }, messageStyle], [isRound, messageAlign, messageStyle, tokens.colors.message, tokens.colors.title, tokens.typography.fontFamily, tokens.typography.messageLineHeight, tokens.typography.messageSize]);
+  const msgContentStyle = useMemo(() => !hChildren ? {
     alignItems: messageAlign === 'center' ? 'center' : messageAlign === 'left' ? 'flex-start' : 'flex-end'
-  } : null, [hasChildren, messageAlign]);
-  const messageWrapperStyle = useMemo(() => [styles.messageWrapper, {
-    paddingTop: hasTitle ? tokens.spacing.messagePaddingTop : tokens.spacing.messagePadding,
-    paddingBottom: isRoundTheme ? tokens.spacing.roundFooterPadding : tokens.spacing.messagePadding,
+  } : null, [hChildren, messageAlign]);
+  const msgWrapStyle = useMemo(() => [S.msgWrap, {
+    paddingTop: hTitle ? tokens.spacing.messagePaddingTop : tokens.spacing.messagePadding,
+    paddingBottom: isRound ? tokens.spacing.roundFooterPadding : tokens.spacing.messagePadding,
     paddingHorizontal: tokens.spacing.messagePaddingHorizontal
-  }], [hasTitle, isRoundTheme, tokens.spacing.messagePadding, tokens.spacing.messagePaddingHorizontal, tokens.spacing.messagePaddingTop, tokens.spacing.roundFooterPadding]);
-  const footerBorderTopStyle = useMemo(() => [styles.footerBorderTop, createHairlineView({
+  }], [hTitle, isRound, tokens.spacing.messagePadding, tokens.spacing.messagePaddingHorizontal, tokens.spacing.messagePaddingTop, tokens.spacing.roundFooterPadding]);
+  const footerBorderStyle = useMemo(() => [S.footerBorder, createHairlineView({
     position: 'top',
     color: tokens.colors.divider,
     left: 0,
     right: 0,
     top: 0
   })], [tokens.colors.divider]);
-  const mergedCloseOnOverlayPress = closeOnOverlayPress || closeOnClickOverlay;
-  const animatedStyle = useMemo(() => ({
+  const mergeOverlay = closeOnOverlayPress || closeOnClickOverlay;
+  const animStyle = useMemo(() => ({
     transform: [{
       scale: scaleAnim
     }]
   }), [scaleAnim]);
-  const roundFooterStyle = useMemo(() => [styles.roundFooter, {
+  const roundFooterStyle = useMemo(() => [S.roundFooter, {
     paddingTop: tokens.spacing.messagePaddingTop,
     paddingHorizontal: tokens.spacing.messagePaddingHorizontal,
     paddingBottom: tokens.spacing.roundFooterPadding
   }], [tokens.spacing.messagePaddingHorizontal, tokens.spacing.messagePaddingTop, tokens.spacing.roundFooterPadding]);
-  const roundFooterNode = useMemo(() => hasFooterActions ? /*#__PURE__*/React.createElement(View, {
+  const popupBc = useCallback(() => {
+    const bc = beforeCloseRef.current;
+    if (!bc) return true;
+    try {
+      return bc('close');
+    } catch {
+      return true;
+    }
+  }, []);
+  const roundFooterNode = useMemo(() => hFooterActions && /*#__PURE__*/React.createElement(View, {
     style: roundFooterStyle
-  }, showCancelButton ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.roundButtonWrapper, showConfirmButton && {
+  }, showCancelButton && /*#__PURE__*/React.createElement(View, {
+    style: [S.roundBtnWrap, showConfirmButton && {
       marginRight: tokens.spacing.roundFooterGap
     }]
   }, /*#__PURE__*/React.createElement(Button, {
     block: true,
     round: true,
     type: "warning",
-    text: cancelText,
+    text: cancelTxt,
     color: cancelButtonColor,
-    loading: cancelLoading,
+    loading: cancelLoad,
     disabled: cancelProps?.disabled,
     onPress: handleCancel,
     style: {
       minHeight: tokens.sizes.roundButtonHeight
     }
-  })) : null, showConfirmButton ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.roundButtonWrapper, showCancelButton && {
+  })), showConfirmButton && /*#__PURE__*/React.createElement(View, {
+    style: [S.roundBtnWrap, showCancelButton && {
       marginLeft: tokens.spacing.roundFooterGap
     }]
   }, /*#__PURE__*/React.createElement(Button, {
     block: true,
     round: true,
     type: "danger",
-    text: confirmText,
+    text: confirmTxt,
     color: confirmButtonColor,
-    loading: confirmLoading,
+    loading: confirmLoad,
     disabled: confirmProps?.disabled,
     onPress: handleConfirm,
     style: {
       minHeight: tokens.sizes.roundButtonHeight
     }
-  })) : null) : null, [cancelButtonColor, cancelLoading, cancelProps?.disabled, cancelText, confirmButtonColor, confirmLoading, confirmProps?.disabled, confirmText, handleCancel, handleConfirm, hasFooterActions, roundFooterStyle, showCancelButton, showConfirmButton, tokens.sizes.roundButtonHeight, tokens.spacing.roundFooterGap]);
-  const defaultFooterNode = useMemo(() => hasFooterActions ? /*#__PURE__*/React.createElement(View, {
-    style: styles.footer
+  }))), [cancelButtonColor, cancelLoad, cancelProps?.disabled, cancelTxt, confirmButtonColor, confirmLoad, confirmProps?.disabled, confirmTxt, handleCancel, handleConfirm, hFooterActions, roundFooterStyle, showCancelButton, showConfirmButton, tokens.sizes.roundButtonHeight, tokens.spacing.roundFooterGap]);
+  const defaultFooterNode = useMemo(() => hFooterActions && /*#__PURE__*/React.createElement(View, {
+    style: S.footer
   }, /*#__PURE__*/React.createElement(View, {
-    style: footerBorderTopStyle,
+    style: footerBorderStyle,
     pointerEvents: "none"
-  }), showCancelButton ? /*#__PURE__*/React.createElement(ActionButton, {
+  }), showCancelButton && /*#__PURE__*/React.createElement(ActionButton, {
     tokens: tokens,
-    text: cancelText,
+    text: cancelTxt,
     color: cancelButtonColor ?? tokens.colors.cancel,
     dividerPosition: "none",
-    loading: cancelLoading,
+    loading: cancelLoad,
     disabled: cancelProps?.disabled,
     onPress: handleCancel
-  }) : null, showConfirmButton ? /*#__PURE__*/React.createElement(ActionButton, {
+  }), showConfirmButton && /*#__PURE__*/React.createElement(ActionButton, {
     tokens: tokens,
-    text: confirmText,
+    text: confirmTxt,
     color: confirmButtonColor ?? tokens.colors.confirm,
     dividerPosition: showCancelButton ? 'left' : 'none',
-    loading: confirmLoading,
+    loading: confirmLoad,
     disabled: confirmProps?.disabled,
     onPress: handleConfirm
-  }) : null) : null, [cancelButtonColor, cancelLoading, cancelProps?.disabled, cancelText, confirmButtonColor, confirmLoading, confirmProps?.disabled, confirmText, footerBorderTopStyle, handleCancel, handleConfirm, hasFooterActions, showCancelButton, showConfirmButton, tokens]);
-  const footerNode = useMemo(() => footer ?? (isRoundTheme ? roundFooterNode : defaultFooterNode), [defaultFooterNode, footer, isRoundTheme, roundFooterNode]);
-  const popupStyleMemo = useMemo(() => [{
+  })), [cancelButtonColor, cancelLoad, cancelProps?.disabled, cancelTxt, confirmButtonColor, confirmLoad, confirmProps?.disabled, confirmTxt, footerBorderStyle, handleCancel, handleConfirm, hFooterActions, showCancelButton, showConfirmButton, tokens]);
+  const footerNode = useMemo(() => footer ?? (isRound ? roundFooterNode : defaultFooterNode), [defaultFooterNode, footer, isRound, roundFooterNode]);
+  const popupStyle = useMemo(() => [{
     backgroundColor: tokens.colors.background,
     borderRadius: tokens.sizes.borderRadius,
     padding: 0
@@ -280,15 +321,17 @@ export const Dialog = props => {
     overlayTestID: overlayTestID,
     closeOnBackPress: closeOnBackPress,
     closeOnPopstate: closeOnPopstate,
-    closeOnClickOverlay: mergedCloseOnOverlayPress,
+    closeOnClickOverlay: mergeOverlay,
     onClickOverlay: onClickOverlay,
-    beforeClose: () => runBeforeClose('close'),
+    beforeClose: popupBc,
     onClose: onClose,
     onClosed: onClosed,
-    contentAnimationStyle: animatedStyle,
-    style: popupStyleMemo
-  }, rest), closeable ? /*#__PURE__*/React.createElement(Pressable, {
-    style: [styles.closeIcon, {
+    contentAnimationStyle: animStyle,
+    style: popupStyle,
+    accessibilityRole: 'alertdialog',
+    accessibilityLabel: typeof title === 'string' ? title : undefined
+  }, rest), closeable && /*#__PURE__*/React.createElement(Pressable, {
+    style: [S.closeIcon, {
       top: tokens.spacing.paddingTop / 2,
       right: tokens.spacing.paddingHorizontal / 2,
       padding: tokens.spacing.closeIconPadding
@@ -304,20 +347,16 @@ export const Dialog = props => {
     size: tokens.sizes.closeSize,
     fill: tokens.colors.closeIcon,
     color: tokens.colors.closeIcon
-  })) : null, hasTitle ? /*#__PURE__*/React.createElement(View, {
-    style: titleWrapperStyle
-  }, /*#__PURE__*/React.isValidElement(title) ? title : /*#__PURE__*/React.createElement(Text, {
-    style: titleTextStyle
-  }, title)) : null, hasContent ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.content, messageContentStyle, contentStyle]
-  }, hasChildren ? children : /*#__PURE__*/React.createElement(View, {
-    style: messageWrapperStyle
-  }, /*#__PURE__*/React.isValidElement(message) ? message : /*#__PURE__*/React.createElement(Text, {
-    style: messageTextStyle
-  }, message))) : null, footerNode);
+  })), hTitle && /*#__PURE__*/React.createElement(View, {
+    style: titleWrapStyle
+  }, renderTextOrNode(title, titleTxtStyle)), hContent && /*#__PURE__*/React.createElement(View, {
+    style: [S.content, msgContentStyle, contentStyle]
+  }, hChildren ? children : /*#__PURE__*/React.createElement(View, {
+    style: msgWrapStyle
+  }, renderTextOrNode(message, msgTxtStyle))), footerNode);
 };
-const styles = StyleSheet.create({
-  titleWrapper: {
+const S = StyleSheet.create({
+  titleWrap: {
     alignItems: 'center'
   },
   title: {
@@ -326,37 +365,37 @@ const styles = StyleSheet.create({
   content: {
     width: '100%'
   },
-  message: {
+  msg: {
     textAlign: 'center'
   },
   footer: {
     flexDirection: 'row',
     position: 'relative'
   },
-  footerBorderTop: {
+  footerBorder: {
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     height: 0
   },
-  actionButton: {
+  btn: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center'
   },
-  actionButtonDivider: {
+  btnDiv: {
     position: 'absolute',
     pointerEvents: 'none'
   },
-  messageWrapper: {
+  msgWrap: {
     width: '100%'
   },
   roundFooter: {
     width: '100%',
     flexDirection: 'row'
   },
-  roundButtonWrapper: {
+  roundBtnWrap: {
     flex: 1
   },
   closeIcon: {
@@ -364,5 +403,5 @@ const styles = StyleSheet.create({
     zIndex: 1
   }
 });
-Dialog.displayName = 'Dialog';
+export const Dialog = /*#__PURE__*/React.memo(DialogImpl);
 export default Dialog;

package/dist/es/components/dialog/imperative.js

@@ -40,18 +40,15 @@ const requestClose = key => {
     Portal.remove(key);
     return;
   }
+  ;
   if (entry.close) {
     entry.close();
     return;
   }
+  ;
   Portal.remove(key);
   unregisterEntry(key);
 };
-const getRegistryItems = () => Array.from(dialogRegistry.values()).map(item => ({
-  key: item.key,
-  options: item.options,
-  meta: item.meta
-}));
 const DialogPortalInstance = ({
   options,
   meta,
@@ -65,47 +62,29 @@ const DialogPortalInstance = ({
     if (!portalKeyRef.current) return;
     attachCloser(portalKeyRef.current, close);
     return () => {
-      const entry = dialogRegistry.get(portalKeyRef.current ?? -1);
-      if (entry && entry.close === close) {
-        entry.close = undefined;
-      }
+      const e = dialogRegistry.get(portalKeyRef.current ?? -1);
+      if (e && e.close === close) e.close = undefined;
     };
   }, [close, portalKeyRef]);
-  useEffect(() => {
-    return () => {
-      if (portalKeyRef.current) {
-        unregisterEntry(portalKeyRef.current);
-      }
-    };
+  useEffect(() => () => {
+    if (portalKeyRef.current) unregisterEntry(portalKeyRef.current);
   }, [portalKeyRef]);
   const handleCancel = useCallback(async () => {
-    const allowed = await runHook(() => options.beforeClose?.('cancel'));
-    if (!allowed) return;
-    const shouldClose = await runHook(options.onCancel);
-    if (!shouldClose) return;
-    if (meta.mode === 'confirm') {
-      meta.resolve?.(false);
-    }
+    if (!(await runHook(() => options.beforeClose?.('cancel')))) return;
+    if (!(await runHook(options.onCancel))) return;
+    if (meta.mode === 'confirm') meta.resolve?.(false);
     close();
   }, [close, meta, options.beforeClose, options.onCancel]);
   const handleConfirm = useCallback(async () => {
-    const allowed = await runHook(() => options.beforeClose?.('confirm'));
-    if (!allowed) return;
-    const shouldClose = await runHook(options.onConfirm);
-    if (!shouldClose) return;
-    if (meta.mode === 'alert' || meta.mode === 'confirm') {
-      meta.resolve?.(true);
-    }
+    if (!(await runHook(() => options.beforeClose?.('confirm')))) return;
+    if (!(await runHook(options.onConfirm))) return;
+    if (meta.mode === 'alert' || meta.mode === 'confirm') meta.resolve?.(true);
     close();
   }, [close, meta, options.beforeClose, options.onConfirm]);
   const handleClose = useCallback(async () => {
-    const allowed = await runHook(() => options.beforeClose?.('close'));
-    if (!allowed) return;
-    const shouldClose = await runHook(options.onClose);
-    if (!shouldClose) return;
-    if (meta.mode === 'confirm') {
-      meta.resolve?.(false);
-    }
+    if (!(await runHook(() => options.beforeClose?.('close')))) return;
+    if (!(await runHook(options.onClose))) return;
+    if (meta.mode === 'confirm') meta.resolve?.(false);
     close();
   }, [close, meta, options.beforeClose, options.onClose]);
   const handleClosed = useCallback(() => {
@@ -137,18 +116,14 @@ const mountImperativeDialog = (options, meta) => {
   registerEntry(key, options, meta);
   return () => requestClose(key);
 };
-const mergeWithDefaults = (mode, options = {}) => {
-  return deepMerge(deepMerge(defaultOptionsStore.default, defaultOptionsStore[mode]), options);
-};
+const mergeWithDefaults = (mode, options = {}) => deepMerge(deepMerge(defaultOptionsStore.default, defaultOptionsStore[mode]), options);
 const normalizeOptions = (mode, options = {}) => {
   const merged = mergeWithDefaults(mode, options);
   const normalized = {
     ...merged,
     visible: true
   };
-  if (isUndefined(normalized.showConfirmButton)) {
-    normalized.showConfirmButton = true;
-  }
+  if (isUndefined(normalized.showConfirmButton)) normalized.showConfirmButton = true;
   return normalized;
 };
 const setDefaultOptions = (targetOrOptions, maybeOptions) => {
@@ -156,6 +131,7 @@ const setDefaultOptions = (targetOrOptions, maybeOptions) => {
     defaultOptionsStore[targetOrOptions] = deepMerge(defaultOptionsStore[targetOrOptions], maybeOptions ?? {});
     return;
   }
+  ;
   defaultOptionsStore.default = deepMerge(defaultOptionsStore.default, targetOrOptions);
 };
 const resetDefaultOptions = target => {
@@ -163,6 +139,7 @@ const resetDefaultOptions = target => {
     defaultOptionsStore[target] = {};
     return;
   }
+  ;
   defaultOptionsStore.default = {};
   defaultOptionsStore.show = {};
   defaultOptionsStore.alert = {};
@@ -199,6 +176,10 @@ export const DialogImperative = {
   resetDefaultOptions
 };
 export const __DIALOG_STORE__ = {
-  getItems: getRegistryItems,
+  getItems: () => Array.from(dialogRegistry.values()).map(item => ({
+    key: item.key,
+    options: item.options,
+    meta: item.meta
+  })),
   close: key => requestClose(key)
 };

package/dist/es/components/dialog/tokens.js

@@ -43,6 +43,7 @@ export const createDialogTokens = foundations => {
       roundButtonHeight: 40
     },
     typography: {
+      fontFamily: typography.fontFamily,
       titleSize: fontSize.md,
       titleLineHeight: fontSize.md * typography.lineHeightMultiplier,
       titleWeight: typography.weight.semiBold,