@nori-ui/core 1.2.0 → 1.3.0

package/dist/client.cjs

@@ -6611,6 +6611,417 @@ var Checkbox = /* @__PURE__ */ __name(({
     }
   );
 }, "Checkbox");
+var MenuContext = React.createContext(null);
+var MenuContextProvider = /* @__PURE__ */ __name(({
+  open,
+  toggle,
+  close,
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value: { open, toggle: toggle ?? close, close }, children }), "MenuContextProvider");
+function useMenuContext(caller) {
+  const ctx = React.useContext(MenuContext);
+  if (!ctx) {
+    throw new Error(`<${caller}> must be rendered inside a <DropdownMenu> or <ContextMenu>.`);
+  }
+  return ctx;
+}
+__name(useMenuContext, "useMenuContext");
+var MenuContent = /* @__PURE__ */ __name(({
+  children,
+  className,
+  testID,
+  side = "bottom",
+  align = "start",
+  "aria-label": ariaLabel
+}) => {
+  const colors = useThemeColors();
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    if (typeof document === "undefined") {
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const getItems = /* @__PURE__ */ __name(() => Array.from(container.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')), "getItems");
+    const onKeyDown = /* @__PURE__ */ __name((e) => {
+      const items = getItems();
+      if (items.length === 0) {
+        return;
+      }
+      const focused = document.activeElement;
+      const idx = focused ? items.indexOf(focused) : -1;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          items[idx < items.length - 1 ? idx + 1 : 0]?.focus();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          items[idx > 0 ? idx - 1 : items.length - 1]?.focus();
+          break;
+        case "Home":
+          e.preventDefault();
+          items[0]?.focus();
+          break;
+        case "End":
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+          break;
+      }
+    }, "onKeyDown");
+    container.addEventListener("keydown", onKeyDown);
+    return () => container.removeEventListener("keydown", onKeyDown);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Content,
+    {
+      side,
+      align,
+      ...testID !== void 0 ? { testID } : {},
+      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+      ...className !== void 0 ? { className } : {},
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          ref: containerRef,
+          ...{
+            role: "menu",
+            ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {}
+          },
+          style: {
+            minWidth: 160,
+            paddingVertical: px(colors.spacing["1"]),
+            margin: -px(colors.spacing["4"]),
+            borderRadius: px(colors.radius.lg),
+            overflow: "hidden"
+          },
+          children
+        }
+      )
+    }
+  );
+}, "MenuContent");
+MenuContent.displayName = "MenuContent";
+var MenuItem = /* @__PURE__ */ __name(({
+  onSelect,
+  disabled = false,
+  destructive = false,
+  icon,
+  shortcut,
+  children,
+  className,
+  testID
+}) => {
+  const colors = useThemeColors();
+  const menu = useMenuContext("MenuItem");
+  const handlePress = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    onSelect?.();
+    menu.close();
+  }, [disabled, onSelect, menu]);
+  const textColor = destructive ? colors.color.danger : disabled ? colors.semantic.text.muted : colors.semantic.text.default;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      onPress: handlePress,
+      disabled,
+      ...{
+        role: "menuitem",
+        "aria-disabled": disabled ? "true" : void 0,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: /* @__PURE__ */ __name((e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handlePress();
+          }
+        }, "onKeyDown")
+      },
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-row items-center gap-2 px-3 py-2", className),
+      style: { opacity: disabled ? 0.4 : 1 },
+      accessibilityRole: "menuitem",
+      accessibilityState: { disabled },
+      children: [
+        icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { width: 16, height: 16, alignItems: "center", justifyContent: "center" }, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              flex: 1,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              color: textColor
+            },
+            children
+          }
+        ),
+        shortcut !== void 0 && reactNative.Platform.OS === "web" && /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            ...{ "aria-hidden": "true" },
+            style: {
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.xs),
+              color: colors.semantic.text.muted
+            },
+            children: shortcut
+          }
+        )
+      ]
+    }
+  );
+}, "MenuItem");
+MenuItem.displayName = "MenuItem";
+var MenuSeparator = /* @__PURE__ */ __name(({ className, testID }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...{ role: "separator" },
+      accessibilityRole: "none",
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("mx-1 my-1", className),
+      style: {
+        height: 1,
+        marginVertical: 4,
+        marginHorizontal: 4,
+        backgroundColor: colors.semantic.border.default
+      }
+    }
+  );
+}, "MenuSeparator");
+MenuSeparator.displayName = "MenuSeparator";
+var MenuLabel = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...{ role: "presentation" },
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("px-3 pt-2 pb-1", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.xs),
+            color: colors.semantic.text.muted,
+            textTransform: "uppercase",
+            letterSpacing: 0.6,
+            fontWeight: "600"
+          },
+          children
+        }
+      )
+    }
+  );
+}, "MenuLabel");
+MenuLabel.displayName = "MenuLabel";
+var DropdownMenuRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChange, children }) => {
+  const [inner, setInner] = React.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const current = isControlled ? open : inner;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const toggle = React.useCallback(() => setOpen(!current), [setOpen, current]);
+  const close = React.useCallback(() => setOpen(false), [setOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContextProvider, { open: current, toggle, close, children: /* @__PURE__ */ jsxRuntime.jsx(Popover, { open: current, onOpenChange: setOpen, children }) });
+}, "DropdownMenuRoot");
+var DropdownMenuTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const menu = useMenuContext("DropdownMenu.Trigger");
+  const popover = usePopoverContext("DropdownMenu.Trigger");
+  const onPress = React.useCallback(() => {
+    popover.measureTrigger();
+    popover.setOpen(!popover.open);
+  }, [popover]);
+  if (React.isValidElement(children)) {
+    const child = children;
+    const fire = /* @__PURE__ */ __name((existing) => (event) => {
+      existing?.(event);
+      popover.measureTrigger();
+      popover.setOpen(!popover.open);
+    }, "fire");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        ref: (node) => {
+          popover.triggerRef.current = node;
+        },
+        onClick: fire(child.props.onClick),
+        onPress: fire(child.props.onPress),
+        ...{
+          "aria-haspopup": "menu",
+          "aria-expanded": menu.open,
+          "aria-controls": popover.contentId
+        },
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ref: (node) => {
+        popover.triggerRef.current = node;
+      },
+      onPress,
+      ...{
+        "aria-haspopup": "menu",
+        "aria-expanded": menu.open,
+        "aria-controls": popover.contentId
+      },
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children }) : children
+    }
+  );
+}, "DropdownMenuTrigger");
+var DropdownMenuContent = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(MenuContent, { ...props }), "DropdownMenuContent");
+var DropdownMenu = Object.assign(DropdownMenuRoot, {
+  Trigger: DropdownMenuTrigger,
+  Content: DropdownMenuContent,
+  Item: MenuItem,
+  Separator: MenuSeparator,
+  Label: MenuLabel
+});
+var ContextMenuCtx = React.createContext(null);
+var useContextMenuCtx = /* @__PURE__ */ __name(() => {
+  const ctx = React.useContext(ContextMenuCtx);
+  if (!ctx) {
+    throw new Error("ContextMenu compound parts must be rendered inside a <ContextMenu>.");
+  }
+  return ctx;
+}, "useContextMenuCtx");
+var ContextMenuRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChange, children }) => {
+  const [inner, setInner] = React.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const current = isControlled ? open : inner;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuCtx.Provider, { value: { open: current, setOpen }, children: /* @__PURE__ */ jsxRuntime.jsx(Popover, { open: current, onOpenChange: setOpen, children }) });
+}, "ContextMenuRoot");
+var ContextMenuTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useContextMenuCtx();
+  const popover = usePopoverContext("ContextMenu.Trigger");
+  const openMenu = React.useCallback(() => {
+    popover.measureTrigger();
+    ctx.setOpen(true);
+  }, [ctx, popover]);
+  if (reactNative.Platform.OS === "web") {
+    if (React.isValidElement(children)) {
+      const child = children;
+      const existing = child.props.onContextMenu;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Slot,
+        {
+          ref: (node) => {
+            popover.triggerRef.current = node;
+          },
+          onContextMenu: (e) => {
+            e.preventDefault();
+            existing?.(e);
+            openMenu();
+          },
+          ...{
+            "aria-haspopup": "menu",
+            "aria-expanded": ctx.open,
+            "aria-controls": popover.contentId
+          },
+          ...testID !== void 0 ? { "data-testid": testID } : {},
+          ...className !== void 0 ? { className } : {},
+          children: child
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        ref: (node) => {
+          popover.triggerRef.current = node;
+        },
+        ...{
+          onContextMenu: /* @__PURE__ */ __name((e) => {
+            e.preventDefault();
+            openMenu();
+          }, "onContextMenu"),
+          "aria-haspopup": "menu",
+          "aria-expanded": ctx.open,
+          "aria-controls": popover.contentId
+        },
+        ...testID !== void 0 ? { testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children }) : children
+      }
+    );
+  }
+  if (React.isValidElement(children)) {
+    const child = children;
+    const existing = child.props.onLongPress;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        ref: (node) => {
+          popover.triggerRef.current = node;
+        },
+        onLongPress: (e) => {
+          existing?.(e);
+          openMenu();
+        },
+        accessibilityRole: "button",
+        ...testID !== void 0 ? { testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ref: (node) => {
+        popover.triggerRef.current = node;
+      },
+      onLongPress: openMenu,
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children }) : children
+    }
+  );
+}, "ContextMenuTrigger");
+var ContextMenuContent = /* @__PURE__ */ __name((props) => {
+  const ctx = useContextMenuCtx();
+  const close = React.useCallback(() => ctx.setOpen(false), [ctx]);
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContextProvider, { open: ctx.open, close, children: /* @__PURE__ */ jsxRuntime.jsx(MenuContent, { ...props }) });
+}, "ContextMenuContent");
+var ContextMenu = Object.assign(ContextMenuRoot, {
+  Trigger: ContextMenuTrigger,
+  Content: ContextMenuContent,
+  Item: MenuItem,
+  Separator: MenuSeparator,
+  Label: MenuLabel
+});
 function formatDate(date$1, locale) {
   try {
     return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date$1.toDate(date.getLocalTimeZone()));
@@ -12619,8 +13030,10 @@ exports.Button = Button;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.ContextMenu = ContextMenu;
 exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
+exports.DropdownMenu = DropdownMenu;
 exports.Field = Field;
 exports.FloatButton = FloatButton;
 exports.HStack = HStack;
@@ -12629,6 +13042,10 @@ exports.Icon = Icon;
 exports.InputGroup = InputGroup;
 exports.Label = Label;
 exports.LocaleProvider = LocaleProvider;
+exports.MenuContent = MenuContent;
+exports.MenuItem = MenuItem;
+exports.MenuLabel = MenuLabel;
+exports.MenuSeparator = MenuSeparator;
 exports.NoriProvider = NoriProvider;
 exports.PAGINATION_COMPACT_BREAKPOINT = PAGINATION_COMPACT_BREAKPOINT;
 exports.Pagination = Pagination;
@@ -12675,6 +13092,7 @@ exports.useCalendarCaption = useCalendarCaption;
 exports.useColorScheme = useColorScheme;
 exports.useLocale = useLocale;
 exports.usePagination = usePagination;
+exports.usePopoverContext = usePopoverContext;
 exports.useSemanticIcon = useSemanticIcon;
 exports.useSliderInteractionActive = useSliderInteractionActive;
 exports.useTheme = useTheme;