"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Divider = Divider;
exports.Group = Group;
exports.Item = Item;
exports.ItemIcon = ItemIcon;
exports.ItemText = ItemText;
exports.Outer = Outer;
exports.Root = Root;
exports.Trigger = Trigger;
Object.defineProperty(exports, "useMenuContext", {
  enumerable: true,
  get: function () {
    return _context.useMenuContext;
  }
});
exports.useMenuControl = useMenuControl;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _useTheme = require("../theme/use-theme.js");
var _index = require("../typography/index.js");
var _indexWeb = require("../portal/index.web.js");
var _context = require("./context.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function useMenuControl() {
  const id = (0, _react.useId)();
  const [isOpen, setIsOpen] = (0, _react.useState)(false);
  return (0, _react.useMemo)(() => ({
    id,
    isOpen,
    open() {
      setIsOpen(true);
    },
    close() {
      setIsOpen(false);
    }
  }), [id, isOpen]);
}

/**
 * Adapter that wraps MenuControlProps to satisfy the DialogControlProps
 * interface required by MenuContextType. This avoids using type suppressions
 * by providing a real ref object.
 */
function useMenuControlAsDialogControl(menuControl) {
  const ref = (0, _react.useRef)(null);
  return (0, _react.useMemo)(() => {
    const dialogControl = {
      id: menuControl.id,
      ref,
      open() {
        menuControl.open();
      },
      close(cb) {
        menuControl.close();
        if (typeof cb === 'function') {
          cb();
        }
      }
    };
    return dialogControl;
  }, [menuControl]);
}
function Root({
  children,
  control
}) {
  const defaultControl = useMenuControl();
  const activeControl = control ?? defaultControl;
  const dialogControl = useMenuControlAsDialogControl(activeControl);
  const context = (0, _react.useMemo)(() => ({
    control: dialogControl
  }), [dialogControl]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_context.MenuContext.Provider, {
    value: context,
    children: [activeControl.isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_indexWeb.Portal, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
        style: styles.backdrop,
        onPress: () => activeControl.close(),
        accessibilityHint: "",
        accessibilityLabel: "Close menu"
      })
    }), children]
  });
}
function Trigger({
  children,
  label,
  role = 'button',
  hint
}) {
  const {
    control
  } = (0, _context.useMenuContext)();
  const [hovered, setHovered] = (0, _react.useState)(false);
  const [focused, setFocused] = (0, _react.useState)(false);
  return children({
    control,
    state: {
      hovered,
      focused,
      pressed: false
    },
    props: {
      onPress: () => control.open(),
      onFocus: () => setFocused(true),
      onBlur: () => setFocused(false),
      accessibilityHint: hint,
      accessibilityLabel: label,
      accessibilityRole: role
    }
  });
}
function Outer({
  children,
  style
}) {
  const theme = (0, _useTheme.useTheme)();
  const dropdownRef = (0, _react.useRef)(null);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    ref: dropdownRef,
    style: [styles.dropdown, {
      backgroundColor: theme.isDark ? theme.colors.backgroundSecondary : theme.colors.background,
      borderColor: theme.colors.borderLight,
      shadowColor: theme.colors.shadow
    }, style],
    children: children
  });
}
function Item({
  children,
  label,
  onPress,
  style,
  ...rest
}) {
  const theme = (0, _useTheme.useTheme)();
  const {
    control
  } = (0, _context.useMenuContext)();
  const [hovered, setHovered] = (0, _react.useState)(false);
  const [focused, setFocused] = (0, _react.useState)(false);
  const handlePress = (0, _react.useCallback)(e => {
    onPress(e);
    if (!e.defaultPrevented) {
      control.close();
    }
  }, [control, onPress]);
  const isDisabled = Boolean(rest.disabled);
  const isHighlighted = (hovered || focused) && !isDisabled;
  const itemContextValue = (0, _react.useMemo)(() => ({
    disabled: isDisabled
  }), [isDisabled]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
    ...rest,
    accessibilityHint: "",
    accessibilityLabel: label,
    onPress: handlePress,
    onFocus: () => setFocused(true),
    onBlur: () => setFocused(false),
    onMouseEnter: () => setHovered(true),
    onMouseLeave: () => setHovered(false),
    style: [styles.webItem, isHighlighted && {
      backgroundColor: theme.isDark ? theme.colors.contrast50 : theme.colors.backgroundSecondary
    }, style],
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ItemContext.Provider, {
      value: itemContextValue,
      children: children
    })
  });
}
function ItemText({
  children,
  style
}) {
  const theme = (0, _useTheme.useTheme)();
  const {
    disabled
  } = (0, _context.useMenuItemContext)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
    style: [styles.webItemText, {
      color: disabled ? theme.colors.textTertiary : theme.colors.text
    }, ...(style ? [style] : [])],
    children: children
  });
}
function ItemIcon({
  icon: Comp,
  position = 'left',
  fill
}) {
  const theme = (0, _useTheme.useTheme)();
  const {
    disabled
  } = (0, _context.useMenuItemContext)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [position === 'left' && styles.iconLeft, position === 'right' && styles.iconRight],
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
      size: "md",
      fill: fill ? fill({
        disabled
      }) : disabled ? theme.colors.textTertiary : theme.colors.textSecondary
    })
  });
}
function Group({
  children
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: children
  });
}
function Divider() {
  const theme = (0, _useTheme.useTheme)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [styles.divider, {
      backgroundColor: theme.colors.borderLight
    }]
  });
}
const styles = _reactNative.StyleSheet.create({
  backdrop: {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 50,
    // Opt back in from the Portal root's `pointer-events: none`.
    pointerEvents: 'auto'
  },
  dropdown: {
    borderRadius: 8,
    padding: 4,
    borderWidth: 1,
    overflow: 'hidden',
    shadowOpacity: 0.15,
    shadowRadius: 12,
    shadowOffset: {
      width: 0,
      height: 4
    },
    minWidth: 180
  },
  webItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    paddingVertical: 8,
    borderRadius: 6,
    overflow: 'hidden',
    paddingHorizontal: 10,
    minHeight: 32
  },
  webItemText: {
    flex: 1,
    fontWeight: '600'
  },
  iconLeft: {
    marginLeft: -2
  },
  iconRight: {
    marginRight: -2,
    marginLeft: 12
  },
  divider: {
    height: 1,
    marginVertical: 4
  }
});
//# sourceMappingURL=index.web.js.map