@ruby-native/react 0.13.0 → 0.14.2

package/README.md

@@ -41,6 +41,7 @@ Each component renders a hidden `data-native-*` signal element that the Ruby Nat
 - `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
+- `NativeMenu` - native menu attached to any element on the page via a CSS selector
 - `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

package/index.d.ts

@@ -112,18 +112,36 @@ export function NativeButton({ position, icon, icons, title, href, click, select
  * @param {string} [props.icon]
  * @param {NativeIcons} [props.icons]
  * @param {boolean} [props.selected]
+ * @param {boolean} [props.destructive] Renders red, for destructive actions.
  * @param {NativeAction} [props.action]
  * @returns {import("react").ReactElement}
  */
-export function NativeMenuItem({ title, href, click, icon, icons, selected, action }: {
+export function NativeMenuItem({ title, href, click, icon, icons, selected, destructive, action }: {
     title?: string | undefined;
     href?: string | undefined;
     click?: string | undefined;
     icon?: string | undefined;
     icons?: NativeIcons | undefined;
     selected?: boolean | undefined;
+    destructive?: boolean | undefined;
     action?: NativeAction | undefined;
 }): import("react").ReactElement;
+/**
+ * Attaches a native menu to an element already on the page. `anchor` is a CSS
+ * selector for that element; tapping it in the app opens a native menu
+ * anchored to it with the `NativeMenuItem` children, and picking one navigates
+ * or clicks a web element exactly like a nav bar menu item does. The anchor
+ * element stays an ordinary element on the web, so give it its own web
+ * behavior there. The counterpart of the `native_menu_tag` Rails helper.
+ * @param {object} props
+ * @param {string} props.anchor
+ * @param {import("react").ReactNode} [props.children]
+ * @returns {import("react").ReactElement}
+ */
+export function NativeMenu({ anchor, children }: {
+    anchor: string;
+    children?: import("react").ReactNode;
+}): 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.
@@ -178,13 +196,15 @@ export function NativeShareMenuItem({ title, url, icon, icons, selected }: {
  * @param {NativeIcons} [props.icons]
  * @param {string} [props.href]
  * @param {string} [props.click]
+ * @param {string} [props.color]
  * @returns {import("react").ReactElement}
  */
-export function NativeFab({ icon, icons, href, click }: {
+export function NativeFab({ icon, icons, href, click, color }: {
     icon?: string | undefined;
     icons?: NativeIcons | undefined;
     href?: string | undefined;
     click?: string | undefined;
+    color?: string | undefined;
 }): import("react").ReactElement;
 /**
  * @param {object} props

package/index.js

@@ -209,10 +209,11 @@ export function NativeButton({ position = "trailing", icon, icons, title, href,
  * @param {string} [props.icon]
  * @param {NativeIcons} [props.icons]
  * @param {boolean} [props.selected]
+ * @param {boolean} [props.destructive] Renders red, for destructive actions.
  * @param {NativeAction} [props.action]
  * @returns {import("react").ReactElement}
  */
-export function NativeMenuItem({ title, href, click, icon, icons, selected, action }) {
+export function NativeMenuItem({ title, href, click, icon, icons, selected, destructive, action }) {
   const resolved = resolveIcon(icon, icons)
   /** @type {Record<string, any>} */
   const props = { "data-native-menu-item": true }
@@ -221,10 +222,28 @@ export function NativeMenuItem({ title, href, click, icon, icons, selected, acti
   if (click) props["data-native-click"] = click
   if (resolved) props["data-native-icon"] = resolved
   if (selected) props["data-native-selected"] = ""
+  if (destructive) props["data-native-destructive"] = ""
   if (action) props["data-native-action"] = action
   return createElement("div", props)
 }
 
+/**
+ * Attaches a native menu to an element already on the page. `anchor` is a CSS
+ * selector for that element; tapping it in the app opens a native menu
+ * anchored to it with the `NativeMenuItem` children, and picking one navigates
+ * or clicks a web element exactly like a nav bar menu item does. The anchor
+ * element stays an ordinary element on the web, so give it its own web
+ * behavior there. The counterpart of the `native_menu_tag` Rails helper.
+ * @param {object} props
+ * @param {string} props.anchor
+ * @param {import("react").ReactNode} [props.children]
+ * @returns {import("react").ReactElement}
+ */
+export function NativeMenu({ anchor, children }) {
+  if (!anchor || !anchor.trim()) throw new Error("NativeMenu requires an `anchor` CSS selector")
+  return createElement("div", { "data-native-menu": "", "data-native-anchor": anchor, hidden: true }, children)
+}
+
 /**
  * A segmented button in the nav bar. Render the same set on each sibling page
  * and mark the current one `selected`. iOS only.
@@ -290,15 +309,17 @@ export function NativeShareMenuItem({ title = "Share", url, icon = "square.and.a
  * @param {NativeIcons} [props.icons]
  * @param {string} [props.href]
  * @param {string} [props.click]
+ * @param {string} [props.color]
  * @returns {import("react").ReactElement}
  */
-export function NativeFab({ icon, icons, href, click }) {
+export function NativeFab({ icon, icons, href, click, color }) {
   const resolved = resolveIcon(icon, icons)
   if (!resolved) throw new Error("NativeFab requires `icon` or `icons`")
   /** @type {Record<string, any>} */
   const props = { "data-native-fab": true, "data-native-icon": resolved, hidden: true }
   if (href) props["data-native-href"] = href
   if (click) props["data-native-click"] = click
+  if (color) props["data-native-color"] = color
   return createElement("div", props)
 }
 

package/package.json

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