one 1.21.6 → 1.21.8

package/dist/cjs/layouts/stack-utils/StackToolbar.cjs

@@ -0,0 +1,419 @@
+"use client";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var StackToolbar_exports = {};
+__export(StackToolbar_exports, {
+  StackToolbar: () => StackToolbar,
+  StackToolbarBadge: () => StackToolbarBadge,
+  StackToolbarButton: () => StackToolbarButton,
+  StackToolbarIcon: () => StackToolbarIcon,
+  StackToolbarLabel: () => StackToolbarLabel,
+  StackToolbarMenu: () => StackToolbarMenu,
+  StackToolbarMenuAction: () => StackToolbarMenuAction,
+  StackToolbarSearchBarSlot: () => StackToolbarSearchBarSlot,
+  StackToolbarSpacer: () => StackToolbarSpacer,
+  StackToolbarView: () => StackToolbarView,
+  appendStackToolbarPropsToOptions: () => appendStackToolbarPropsToOptions
+});
+module.exports = __toCommonJS(StackToolbar_exports);
+var import_native = require("@vxrn/native");
+var import_react = require("react");
+var import_react_native = require("react-native-web");
+var import_use_isomorphic_layout_effect = require("@vxrn/use-isomorphic-layout-effect");
+var import_useNavigation = require("../../router/useNavigation.cjs");
+var import_children = require("../../utils/children.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const StackToolbarPlacementContext = (0, import_react.createContext)(null);
+function StackToolbarLabel(_props) {
+  return null;
+}
+function StackToolbarIcon(_props) {
+  return null;
+}
+function StackToolbarBadge(_props) {
+  return null;
+}
+function getToolbarContent(children, icon, iconRenderingMode) {
+  let label = "";
+  let iconProps = typeof icon === "string" ? {
+    sf: icon
+  } : icon ? {
+    src: icon,
+    renderingMode: iconRenderingMode
+  } : void 0;
+  let badge;
+  import_react.Children.forEach(children, child => {
+    if (typeof child === "string" || typeof child === "number") {
+      label += String(child);
+    } else if ((0, import_children.isChildOfType)(child, StackToolbarLabel)) {
+      label = child.props.children ?? "";
+    } else if ((0, import_children.isChildOfType)(child, StackToolbarIcon)) {
+      iconProps = child.props;
+    } else if ((0, import_children.isChildOfType)(child, StackToolbarBadge)) {
+      badge = child.props;
+    }
+  });
+  return {
+    label,
+    icon: iconProps,
+    badge
+  };
+}
+function getHeaderIcon(content, tintColor) {
+  if (content.icon?.sf) {
+    return {
+      type: "sfSymbol",
+      name: content.icon.sf
+    };
+  }
+  if (content.icon?.src) {
+    return {
+      type: "image",
+      source: content.icon.src,
+      tinted: (content.icon.renderingMode ?? (tintColor ? "template" : "original")) === "template"
+    };
+  }
+  if (content.icon?.xcasset) {
+    return {
+      type: "image",
+      source: {
+        uri: content.icon.xcasset
+      },
+      tinted: (content.icon.renderingMode ?? (tintColor ? "template" : "original")) === "template"
+    };
+  }
+  return void 0;
+}
+function getHeaderItemSharedProps(props, content) {
+  const labelStyle = import_react_native.StyleSheet.flatten(props.style);
+  const badgeStyle = import_react_native.StyleSheet.flatten(content.badge?.style);
+  return {
+    label: content.label,
+    labelStyle,
+    icon: getHeaderIcon(content, props.tintColor),
+    variant: props.variant,
+    tintColor: props.tintColor,
+    disabled: props.disabled,
+    hidesSharedBackground: props.hidesSharedBackground,
+    sharesBackground: !props.separateBackground,
+    accessibilityLabel: props.accessibilityLabel ?? content.label,
+    accessibilityHint: props.accessibilityHint,
+    badge: content.badge ? {
+      value: content.badge.children ?? "",
+      style: badgeStyle
+    } : void 0
+  };
+}
+function getMenuItems(children) {
+  return import_react.Children.toArray(children).map(child => {
+    if ((0, import_children.isChildOfType)(child, StackToolbarMenuAction)) {
+      const content = getToolbarContent(child.props.children, child.props.icon, child.props.iconRenderingMode);
+      return {
+        type: "action",
+        label: content.label,
+        description: child.props.subtitle,
+        icon: getHeaderIcon(content, child.props.tintColor),
+        onPress: child.props.onPress ?? (() => {}),
+        state: child.props.isOn ? "on" : "off",
+        disabled: child.props.disabled,
+        destructive: child.props.destructive,
+        hidden: child.props.hidden,
+        keepsMenuPresented: child.props.unstable_keepPresented,
+        discoverabilityLabel: child.props.discoverabilityLabel
+      };
+    }
+    if ((0, import_children.isChildOfType)(child, StackToolbarMenu)) {
+      const content = getToolbarContent(child.props.children, child.props.icon, child.props.iconRenderingMode);
+      return {
+        type: "submenu",
+        label: content.label || child.props.title || "",
+        icon: getHeaderIcon(content, child.props.tintColor),
+        inline: child.props.inline,
+        layout: child.props.palette ? "palette" : "default",
+        destructive: child.props.destructive,
+        multiselectable: child.props.singleSelection === false,
+        items: getMenuItems(child.props.children)
+      };
+    }
+    return null;
+  }).filter(item => Boolean(item));
+}
+function convertToolbarChildToHeaderItem(child) {
+  if ((0, import_children.isChildOfType)(child, StackToolbarButton)) {
+    if (child.props.hidden) return null;
+    const content = getToolbarContent(child.props.children, child.props.icon, child.props.iconRenderingMode);
+    return {
+      ...getHeaderItemSharedProps(child.props, content),
+      type: "button",
+      onPress: child.props.onPress ?? (() => {}),
+      selected: child.props.selected
+    };
+  }
+  if ((0, import_children.isChildOfType)(child, StackToolbarMenu)) {
+    if (child.props.hidden) return null;
+    const content = getToolbarContent(child.props.children, child.props.icon, child.props.iconRenderingMode);
+    const contentWithTitle = {
+      ...content,
+      label: content.label || child.props.title || ""
+    };
+    return {
+      ...getHeaderItemSharedProps(child.props, contentWithTitle),
+      type: "menu",
+      menu: {
+        title: child.props.title,
+        multiselectable: child.props.singleSelection === false,
+        layout: child.props.palette ? "palette" : "default",
+        items: getMenuItems(child.props.children)
+      }
+    };
+  }
+  if ((0, import_children.isChildOfType)(child, StackToolbarSpacer)) {
+    if (child.props.hidden) return null;
+    if (child.props.width === void 0) {
+      if (process.env.NODE_ENV !== "production") {
+        console.warn("Stack.Toolbar.Spacer requires a width in header placements.");
+      }
+      return null;
+    }
+    return {
+      type: "spacing",
+      spacing: child.props.width
+    };
+  }
+  if ((0, import_children.isChildOfType)(child, StackToolbarView)) {
+    if (child.props.hidden) return null;
+    return {
+      type: "custom",
+      element: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.Fragment, {
+        children: child.props.children
+      }),
+      hidesSharedBackground: child.props.hidesSharedBackground
+    };
+  }
+  return null;
+}
+function appendStackToolbarPropsToOptions(options, props) {
+  if (import_react_native.Platform.OS !== "ios") return options;
+  const placement = props.placement ?? "bottom";
+  if (placement === "bottom") {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("Stack.Toolbar with bottom placement must be rendered in a page component, not inside Stack.Screen.");
+    }
+    return options;
+  }
+  if (placement !== "left" && placement !== "right") {
+    throw new Error(`Invalid placement "${placement}" for Stack.Toolbar. Expected "left", "right", or "bottom".`);
+  }
+  if (props.asChild) {
+    return placement === "left" ? {
+      ...options,
+      headerShown: true,
+      headerLeft: () => props.children
+    } : {
+      ...options,
+      headerShown: true,
+      headerRight: () => props.children
+    };
+  }
+  const allChildren = import_react.Children.toArray(props.children);
+  const items = allChildren.map(convertToolbarChildToHeaderItem).filter(item => Boolean(item));
+  if (process.env.NODE_ENV !== "production" && items.length !== allChildren.length) {
+    const invalidChildren = allChildren.filter(child => !(0, import_children.isChildOfType)(child, StackToolbarButton) && !(0, import_children.isChildOfType)(child, StackToolbarMenu) && !(0, import_children.isChildOfType)(child, StackToolbarSpacer) && !(0, import_children.isChildOfType)(child, StackToolbarView));
+    if (invalidChildren.length) {
+      console.warn(`Stack.Toolbar with placement="${placement}" only accepts Stack.Toolbar.Button, Menu, Spacer, and View children.`);
+    }
+  }
+  const getItems = () => items;
+  return placement === "left" ? {
+    ...options,
+    headerShown: true,
+    unstable_headerLeftItems: getItems
+  } : {
+    ...options,
+    headerShown: true,
+    unstable_headerRightItems: getItems
+  };
+}
+function StackToolbarComponent(props) {
+  const parentPlacement = (0, import_react.useContext)(StackToolbarPlacementContext);
+  const navigation = (0, import_useNavigation.useNavigation)();
+  const placement = props.placement ?? "bottom";
+  const options = (0, import_react.useMemo)(() => placement === "bottom" ? {} : appendStackToolbarPropsToOptions({}, props), [placement, props.asChild, props.children]);
+  if (parentPlacement) {
+    throw new Error("Stack.Toolbar cannot be nested inside another Stack.Toolbar.");
+  }
+  (0, import_use_isomorphic_layout_effect.useIsomorphicLayoutEffect)(() => {
+    if (import_react_native.Platform.OS !== "ios" || placement === "bottom") return;
+    navigation.setOptions(options);
+  }, [navigation, options, placement]);
+  if (import_react_native.Platform.OS !== "ios" || placement !== "bottom") return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(StackToolbarPlacementContext.Provider, {
+    value: "bottom",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_native.ToolbarHost, {
+      children: props.children
+    })
+  });
+}
+function StackToolbarButton(props) {
+  const placement = (0, import_react.useContext)(StackToolbarPlacementContext);
+  const identifier = (0, import_react.useId)();
+  if (import_react_native.Platform.OS !== "ios") return null;
+  if (!placement) throw new Error("Stack.Toolbar.Button must be used inside Stack.Toolbar.");
+  const content = getToolbarContent(props.children, props.icon, props.iconRenderingMode);
+  const badgeStyle = import_react_native.StyleSheet.flatten(content.badge?.style);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_native.ToolbarItem, {
+    identifier,
+    title: content.label,
+    systemImageName: content.icon?.sf,
+    xcassetName: content.icon?.xcasset,
+    image: props.image ?? content.icon?.src,
+    imageRenderingMode: content.icon?.renderingMode ?? props.iconRenderingMode ?? (props.tintColor ? "template" : "original"),
+    tintColor: props.tintColor,
+    hidesSharedBackground: props.hidesSharedBackground,
+    sharesBackground: !props.separateBackground,
+    barButtonItemStyle: props.variant === "done" ? "prominent" : props.variant,
+    hidden: props.hidden,
+    selected: props.selected,
+    badgeConfiguration: content.badge ? {
+      value: content.badge.children,
+      backgroundColor: badgeStyle?.backgroundColor,
+      color: badgeStyle?.color,
+      fontFamily: badgeStyle?.fontFamily,
+      fontSize: badgeStyle?.fontSize,
+      fontWeight: badgeStyle?.fontWeight
+    } : void 0,
+    titleStyle: import_react_native.StyleSheet.flatten(props.style),
+    accessibilityLabel: props.accessibilityLabel ?? content.label,
+    accessibilityHint: props.accessibilityHint,
+    disabled: props.disabled,
+    onSelected: props.onPress
+  });
+}
+function StackToolbarMenu(props) {
+  const placement = (0, import_react.useContext)(StackToolbarPlacementContext);
+  const identifier = (0, import_react.useId)();
+  if (import_react_native.Platform.OS !== "ios") return null;
+  if (!placement) throw new Error("Stack.Toolbar.Menu must be used inside Stack.Toolbar.");
+  const content = getToolbarContent(props.children, props.icon, props.iconRenderingMode);
+  const actions = import_react.Children.toArray(props.children).filter(child => (0, import_children.isChildOfType)(child, StackToolbarMenu) || (0, import_children.isChildOfType)(child, StackToolbarMenuAction));
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_native.MenuAction, {
+    identifier,
+    title: props.title ?? "",
+    label: content.label || props.title,
+    icon: content.icon?.sf,
+    xcassetName: content.icon?.xcasset,
+    image: props.image ?? content.icon?.src,
+    imageRenderingMode: content.icon?.renderingMode ?? props.iconRenderingMode ?? (props.tintColor ? "template" : "original"),
+    disabled: props.disabled,
+    destructive: props.destructive,
+    hidden: props.hidden,
+    accessibilityLabel: props.accessibilityLabel ?? (content.label || props.title),
+    accessibilityHint: props.accessibilityHint,
+    displayInline: props.inline,
+    displayAsPalette: props.palette,
+    singleSelection: props.singleSelection,
+    preferredElementSize: props.elementSize,
+    tintColor: props.tintColor,
+    barButtonItemStyle: props.variant === "done" ? "prominent" : props.variant,
+    sharesBackground: !props.separateBackground,
+    hidesSharedBackground: props.hidesSharedBackground,
+    titleStyle: import_react_native.StyleSheet.flatten(props.style),
+    children: actions
+  });
+}
+function StackToolbarMenuAction(props) {
+  const placement = (0, import_react.useContext)(StackToolbarPlacementContext);
+  const identifier = (0, import_react.useId)();
+  if (import_react_native.Platform.OS !== "ios") return null;
+  if (!placement) throw new Error("Stack.Toolbar.MenuAction must be used inside Stack.Toolbar.Menu.");
+  const content = getToolbarContent(props.children, props.icon, props.iconRenderingMode);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_native.MenuAction, {
+    identifier,
+    title: content.label,
+    icon: content.icon?.sf,
+    xcassetName: content.icon?.xcasset,
+    image: props.image ?? content.icon?.src,
+    imageRenderingMode: content.icon?.renderingMode ?? props.iconRenderingMode ?? (props.tintColor ? "template" : "original"),
+    disabled: props.disabled,
+    destructive: props.destructive,
+    discoverabilityLabel: props.discoverabilityLabel,
+    subtitle: props.subtitle,
+    accessibilityLabel: props.accessibilityLabel ?? content.label,
+    accessibilityHint: props.accessibilityHint,
+    isOn: props.isOn,
+    keepPresented: props.unstable_keepPresented,
+    hidden: props.hidden,
+    onSelected: props.onPress
+  });
+}
+function StackToolbarSpacer(props) {
+  const placement = (0, import_react.useContext)(StackToolbarPlacementContext);
+  const identifier = (0, import_react.useId)();
+  if (import_react_native.Platform.OS !== "ios") return null;
+  if (!placement) throw new Error("Stack.Toolbar.Spacer must be used inside Stack.Toolbar.");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_native.ToolbarItem, {
+    identifier,
+    type: props.width === void 0 ? "fluidSpacer" : "fixedSpacer",
+    width: props.width,
+    hidden: props.hidden,
+    sharesBackground: props.sharesBackground
+  });
+}
+function StackToolbarSearchBarSlot(props) {
+  const placement = (0, import_react.useContext)(StackToolbarPlacementContext);
+  const identifier = (0, import_react.useId)();
+  if (import_react_native.Platform.OS !== "ios") return null;
+  if (!placement) throw new Error("Stack.Toolbar.SearchBarSlot must be used inside Stack.Toolbar.");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_native.ToolbarItem, {
+    identifier,
+    type: "searchBar",
+    hidden: props.hidden,
+    hidesSharedBackground: props.hidesSharedBackground,
+    sharesBackground: !props.separateBackground
+  });
+}
+function StackToolbarView(props) {
+  const placement = (0, import_react.useContext)(StackToolbarPlacementContext);
+  const identifier = (0, import_react.useId)();
+  if (import_react_native.Platform.OS !== "ios") return null;
+  if (!placement) throw new Error("Stack.Toolbar.View must be used inside Stack.Toolbar.");
+  if (props.hidden) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_native.ToolbarItem, {
+    identifier,
+    hidesSharedBackground: props.hidesSharedBackground,
+    sharesBackground: !props.separateBackground,
+    children: props.children
+  });
+}
+const StackToolbar = Object.assign(StackToolbarComponent, {
+  Button: StackToolbarButton,
+  Menu: StackToolbarMenu,
+  MenuAction: StackToolbarMenuAction,
+  Spacer: StackToolbarSpacer,
+  SearchBarSlot: StackToolbarSearchBarSlot,
+  View: StackToolbarView,
+  Label: StackToolbarLabel,
+  Icon: StackToolbarIcon,
+  Badge: StackToolbarBadge
+});