@tastic/hud 0.14.0 → 0.14.1

package/dist/index.d.mts

@@ -78,7 +78,7 @@ interface BaseSettingsDialogProps {
     onShowHowToPlay?: () => void;
     children?: ReactNode;
 }
-declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element;
+declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element | null;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface Props$b {

package/dist/index.d.ts

@@ -78,7 +78,7 @@ interface BaseSettingsDialogProps {
     onShowHowToPlay?: () => void;
     children?: ReactNode;
 }
-declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element;
+declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element | null;
 
 type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
 interface Props$b {

package/dist/index.js

@@ -625,12 +625,15 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
     onInfo: (title, message) => setInfoMessage({ title, message })
   });
   const updateManifestDate = updateManifest ? new Date(updateManifest.createdAt) : null;
+  const [opened, setOpened] = (0, import_react4.useState)(visible);
+  if (visible && !opened) setOpened(true);
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
   const showEdgeGuard = import_react_native10.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
   const showHaptics = import_react_native10.Platform.OS !== "web" && !hideHaptics;
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
   const showUpdateCheck = import_react_native10.Platform.OS !== "web" && !hideUpdateCheck;
+  if (!opened) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper8.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(RotatedFrame, { rotation, rotatedSafeArea: true, portalHost: true, passThrough: true, children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_auto_paper7.Dialog, { visible, onDismiss, style: styles8.dialog, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper7.Dialog.Title, { children: "Settings" }),

package/dist/index.mjs

@@ -346,12 +346,15 @@ function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, ve
     onInfo: (title, message) => setInfoMessage({ title, message })
   });
   const updateManifestDate = updateManifest ? new Date(updateManifest.createdAt) : null;
+  const [opened, setOpened] = useState2(visible);
+  if (visible && !opened) setOpened(true);
   const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
   const showEdgeGuard = Platform2.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
   const showHaptics = Platform2.OS !== "web" && !hideHaptics;
   const showSound = !hideSound;
   const showAppearance = !hideAppearance;
   const showUpdateCheck = Platform2.OS !== "web" && !hideUpdateCheck;
+  if (!opened) return null;
   return /* @__PURE__ */ jsx9(Portal3, { children: /* @__PURE__ */ jsxs8(RotatedFrame, { rotation, rotatedSafeArea: true, portalHost: true, passThrough: true, children: [
     /* @__PURE__ */ jsxs8(Dialog, { visible, onDismiss, style: styles8.dialog, children: [
       /* @__PURE__ */ jsx9(Dialog.Title, { children: "Settings" }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tastic/hud",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Visual component kit for local-multiplayer React Native games: inline (non-modal) popovers, dropdowns, color pickers, gauges, ready buttons, and dialogs, built to stay scoped to one player's own zone on a shared screen",
   "keywords": [
     "react-native",

package/src/BaseSettingsDialog.tsx

@@ -123,6 +123,14 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
     onInfo: (title, message) => setInfoMessage({ title, message })
   })
   const updateManifestDate = updateManifest ? new Date(updateManifest.createdAt) : null
+  // The frame below is mounted from the first open on and then kept, so the Dialog's close fade
+  // still plays after `visible` turns false. Never mounting it before that keeps a screen that never
+  // opens Settings free of the extra (pass-through) layer, mounts the Portal at open time like the
+  // Dialog's own Portal always was (so it lands above portals mounted earlier), and means nothing
+  // here needs a Paper Portal.Host until the sheet is actually opened. The update and info cards are
+  // only reachable from inside the sheet, so they never need it earlier either.
+  const [opened, setOpened] = useState(visible)
+  if (visible && !opened) setOpened(true)
 
   const showLockOrientation = isTouchPrimary && lockOrientation !== undefined && onLockOrientationChange !== undefined
   const showEdgeGuard = Platform.OS === 'ios' && deferBottomEdgeGestures !== undefined && onDeferBottomEdgeGestures !== undefined
@@ -139,8 +147,9 @@ export function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverr
   // to the turned footprint, with rotated safe-area insets and its own Portal.Host. The Dialog and the
   // two ConfirmDialogs below portal into THAT host, so they lay out against the turned window with no
   // transform of their own (hence rotation={0} on the ConfirmDialogs). The frame is pass-through at
-  // every level and stays mounted with this component, which keeps the Dialog's close fade; at
+  // every level and stays mounted once the sheet has opened, which keeps the Dialog's close fade; at
   // rotation 0 it is an identity frame.
+  if (!opened) return null
   return (
     <Portal>
       <RotatedFrame rotation={rotation} rotatedSafeArea portalHost passThrough>