@ruby-native/react 0.12.0 → 0.12.1

package/README.md

@@ -37,6 +37,7 @@ Each component renders a hidden `data-native-*` signal element that the Ruby Nat
 - `NativeForm` - mark the current page as a form so back navigation skips it
 - `NativePresentation` - declare that this page lands as a root, with no back button
 - `NativeReview` - ask for an App Store review prompt when the page loads
+- `NativeToast` - show a transient native toast above all app chrome
 - `NativeNavbar` - native navigation bar with title and buttons
 - `NativeButton` - native nav bar button (icon, title, href, or click target)
 - `NativeMenuItem` - item inside a native menu

package/index.d.ts

@@ -51,6 +51,25 @@ export function NativePresentation({ intent }?: {
  * @returns {import("react").ReactElement}
  */
 export function NativeReview(): import("react").ReactElement;
+/**
+ * A transient native toast shown above all app chrome. The signal is consumed
+ * the moment it fires, so a restored page cannot re-toast. Renders nothing
+ * visible on the web. The counterpart of the `native_toast_tag` Rails helper.
+ * @param {object} props
+ * @param {string} [props.message] Nothing renders when blank.
+ * @param {string | false} [props.icon] `false` hides the default checkmark.
+ * @param {NativeIcons} [props.icons]
+ * @param {number} [props.duration]
+ * @param {"inverted" | "system"} [props.appearance]
+ * @returns {import("react").ReactElement | null}
+ */
+export function NativeToast({ message, icon, icons, duration, appearance }: {
+    message?: string | undefined;
+    icon?: string | false | undefined;
+    icons?: NativeIcons | undefined;
+    duration?: number | undefined;
+    appearance?: "inverted" | "system" | undefined;
+}): import("react").ReactElement | null;
 /**
  * @param {object} props
  * @param {string} [props.title]

package/index.js

@@ -129,6 +129,39 @@ export function NativeReview() {
   return createElement("div", { "data-native-review": true, hidden: true })
 }
 
+/**
+ * A transient native toast shown above all app chrome. The signal is consumed
+ * the moment it fires, so a restored page cannot re-toast. Renders nothing
+ * visible on the web. The counterpart of the `native_toast_tag` Rails helper.
+ * @param {object} props
+ * @param {string} [props.message] Nothing renders when blank.
+ * @param {string | false} [props.icon] `false` hides the default checkmark.
+ * @param {NativeIcons} [props.icons]
+ * @param {number} [props.duration]
+ * @param {"inverted" | "system"} [props.appearance]
+ * @returns {import("react").ReactElement | null}
+ */
+export function NativeToast({ message, icon, icons, duration = 4, appearance = "inverted" }) {
+  if (!message) return null
+  /** @type {Record<string, any>} */
+  const props = {
+    "data-native-toast": "",
+    "data-native-toast-message": message,
+    "data-native-toast-duration": duration,
+    "data-native-toast-appearance": appearance,
+    hidden: true
+  }
+  // An absent icon attribute means "use the default" to the shell (the JS API
+  // omits it), so `icon={false}` emits an empty value to mean "none".
+  if (icon === false) {
+    props["data-native-toast-icon"] = ""
+  } else {
+    const fallback = rubyNativePlatform() === "android" ? "check_circle" : "checkmark.circle.fill"
+    props["data-native-toast-icon"] = resolveIcon(icon, icons) || fallback
+  }
+  return createElement("div", props)
+}
+
 /**
  * @param {object} props
  * @param {string} [props.title]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ruby-native/react",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "React components for Ruby Native",
   "main": "index.js",
   "types": "index.d.ts",