@ruby-native/react 0.11.1 → 0.12.0

package/README.md

@@ -35,10 +35,12 @@ Each component renders a hidden `data-native-*` signal element that the Ruby Nat
 - `NativeTabs` - show the native tab bar
 - `NativePush` - request push notification permission
 - `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
 - `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
+- `NativeSegment` - segmented button in the nav bar (iOS only)
 - `NativeShareButton` - native nav bar button that opens the share sheet
 - `NativeShareMenuItem` - menu item that opens the share sheet
 - `NativeSubmitButton` - native "Save" button that submits a form

package/index.d.ts

@@ -16,10 +16,37 @@ export function NativeTabs({ enabled }: {
  * @returns {import("react").ReactElement}
  */
 export function NativePush(): import("react").ReactElement;
+/**
+ * Who is signed in, as an opaque server-computed token (`native_identity_token`
+ * shared as an Inertia prop). Render on every page: an empty or missing token
+ * means signed out, and the app clears its screens when the value changes.
+ * @param {object} props
+ * @param {string | null} [props.token]
+ * @returns {import("react").ReactElement}
+ */
+export function NativeIdentity({ token }: {
+    token?: string | null | undefined;
+}): import("react").ReactElement;
 /**
  * @returns {import("react").ReactElement}
  */
 export function NativeForm(): import("react").ReactElement;
+/**
+ * Declares that this page lands as a root, with nothing behind it and no back
+ * affordance.
+ *
+ * Emits only the element half of `native_presentation_tag`, so Advanced Mode
+ * applies it once the page has rendered rather than before the navigation
+ * commits. Set the `Native-Presentation` response header from the controller as
+ * well to get the earlier path.
+ *
+ * @param {object} props
+ * @param {"root"} [props.intent]
+ * @returns {import("react").ReactElement}
+ */
+export function NativePresentation({ intent }?: {
+    intent?: "root" | undefined;
+}): import("react").ReactElement;
 /**
  * @returns {import("react").ReactElement}
  */
@@ -66,15 +93,33 @@ export function NativeButton({ position, icon, icons, title, href, click, select
  * @param {string} [props.icon]
  * @param {NativeIcons} [props.icons]
  * @param {boolean} [props.selected]
+ * @param {NativeAction} [props.action]
  * @returns {import("react").ReactElement}
  */
-export function NativeMenuItem({ title, href, click, icon, icons, selected }: {
+export function NativeMenuItem({ title, href, click, icon, icons, selected, action }: {
     title?: string | undefined;
     href?: string | undefined;
     click?: string | undefined;
     icon?: string | undefined;
     icons?: NativeIcons | undefined;
     selected?: boolean | undefined;
+    action?: NativeAction | undefined;
+}): import("react").ReactElement;
+/**
+ * A segmented button in the nav bar. Render the same set on each sibling page
+ * and mark the current one `selected`. iOS only.
+ * @param {object} props
+ * @param {string} [props.title]
+ * @param {string} [props.href]
+ * @param {string} [props.click]
+ * @param {boolean} [props.selected]
+ * @returns {import("react").ReactElement}
+ */
+export function NativeSegment({ title, href, click, selected }: {
+    title?: string | undefined;
+    href?: string | undefined;
+    click?: string | undefined;
+    selected?: boolean | undefined;
 }): import("react").ReactElement;
 /**
  * @param {object} props
@@ -177,4 +222,13 @@ export type NativeIcons = {
     android?: string | undefined;
 };
 export type NativeHapticFeedback = "success" | "warning" | "error" | "impact" | "selection";
-export type NativeButtonPosition = "leading" | "trailing";
+/**
+ * "title" turns the nav-bar title into a dropdown menu. Give the button a
+ * `menu` and no icon or label of its own.
+ */
+export type NativeButtonPosition = "leading" | "trailing" | "title";
+/**
+ * How a menu item's page lands. "replace" swaps the current history entry,
+ * which is what a page switcher wants.
+ */
+export type NativeAction = "push" | "replace";

package/index.js

@@ -14,7 +14,15 @@ import("@inertiajs/react").then(m => { window.__inertiaRouter = m.router }).catc
  */
 
 /**
- * @typedef {"leading" | "trailing"} NativeButtonPosition
+ * "title" turns the nav-bar title into a dropdown menu. Give the button a
+ * `menu` and no icon or label of its own.
+ * @typedef {"leading" | "trailing" | "title"} NativeButtonPosition
+ */
+
+/**
+ * How a menu item's page lands. "replace" swaps the current history entry,
+ * which is what a page switcher wants.
+ * @typedef {"push" | "replace"} NativeAction
  */
 
 function rubyNativePlatform() {
@@ -78,6 +86,18 @@ export function NativePush() {
   return createElement("div", { "data-native-push": true, hidden: true })
 }
 
+/**
+ * Who is signed in, as an opaque server-computed token (`native_identity_token`
+ * shared as an Inertia prop). Render on every page: an empty or missing token
+ * means signed out, and the app clears its screens when the value changes.
+ * @param {object} props
+ * @param {string | null} [props.token]
+ * @returns {import("react").ReactElement}
+ */
+export function NativeIdentity({ token }) {
+  return createElement("div", { "data-native-identity": token ?? "", hidden: true })
+}
+
 /**
  * @returns {import("react").ReactElement}
  */
@@ -85,6 +105,23 @@ export function NativeForm() {
   return createElement("div", { "data-native-form": true, hidden: true })
 }
 
+/**
+ * Declares that this page lands as a root, with nothing behind it and no back
+ * affordance.
+ *
+ * Emits only the element half of `native_presentation_tag`, so Advanced Mode
+ * applies it once the page has rendered rather than before the navigation
+ * commits. Set the `Native-Presentation` response header from the controller as
+ * well to get the earlier path.
+ *
+ * @param {object} props
+ * @param {"root"} [props.intent]
+ * @returns {import("react").ReactElement}
+ */
+export function NativePresentation({ intent = "root" } = {}) {
+  return createElement("div", { "data-native-presentation": intent, hidden: true })
+}
+
 /**
  * @returns {import("react").ReactElement}
  */
@@ -139,9 +176,10 @@ export function NativeButton({ position = "trailing", icon, icons, title, href,
  * @param {string} [props.icon]
  * @param {NativeIcons} [props.icons]
  * @param {boolean} [props.selected]
+ * @param {NativeAction} [props.action]
  * @returns {import("react").ReactElement}
  */
-export function NativeMenuItem({ title, href, click, icon, icons, selected }) {
+export function NativeMenuItem({ title, href, click, icon, icons, selected, action }) {
   const resolved = resolveIcon(icon, icons)
   /** @type {Record<string, any>} */
   const props = { "data-native-menu-item": true }
@@ -150,6 +188,27 @@ export function NativeMenuItem({ title, href, click, icon, icons, selected }) {
   if (click) props["data-native-click"] = click
   if (resolved) props["data-native-icon"] = resolved
   if (selected) props["data-native-selected"] = ""
+  if (action) props["data-native-action"] = action
+  return createElement("div", props)
+}
+
+/**
+ * A segmented button in the nav bar. Render the same set on each sibling page
+ * and mark the current one `selected`. iOS only.
+ * @param {object} props
+ * @param {string} [props.title]
+ * @param {string} [props.href]
+ * @param {string} [props.click]
+ * @param {boolean} [props.selected]
+ * @returns {import("react").ReactElement}
+ */
+export function NativeSegment({ title, href, click, selected }) {
+  /** @type {Record<string, any>} */
+  const props = { "data-native-segment": "" }
+  if (title) props["data-native-title"] = title
+  if (href) props["data-native-href"] = href
+  if (click) props["data-native-click"] = click
+  if (selected) props["data-native-selected"] = ""
   return createElement("div", props)
 }
 

package/package.json

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