@nayan-ui/react-native/dist/module/components/ui/dropdown-menu.js

React Native Component Library for smooth and faster mobile application development.

"use strict";

import * as React from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
import { TextClassContext } from "./text.js";
import { Check } from "../../lib/icons/Check.js";
import { ChevronDown } from "../../lib/icons/ChevronDown.js";
import { ChevronRight } from "../../lib/icons/ChevronRight.js";
import { ChevronUp } from "../../lib/icons/ChevronUp.js";
import { cn } from "../../lib/utils.js";
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react-native-css-interop/jsx-runtime";
const DropdownMenu = DropdownMenuPrimitive.Root;
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
const DropdownMenuSubTrigger = /*#__PURE__*/React.forwardRef(({
  className,
  inset,
  children,
  ...props
}, ref) => {
  const {
    open
  } = DropdownMenuPrimitive.useSubContext();
  const Icon = Platform.OS === 'web' ? ChevronRight : open ? ChevronUp : ChevronDown;
  return _jsx(TextClassContext.Provider, {
    value: cn('select-none text-sm native:text-lg text-primary', open && 'native:text-accent-foreground'),
    children: _jsxs(DropdownMenuPrimitive.SubTrigger, {
      ref: ref,
      className: cn('flex flex-row web:cursor-default web:select-none gap-2 items-center web:focus:bg-accent web:hover:bg-accent active:bg-accent rounded-sm px-2 py-1.5 native:py-2 web:outline-none', open && 'bg-accent', inset && 'pl-8', className),
      ...props,
      children: [_jsx(_Fragment, {
        children: children
      }), _jsx(Icon, {
        size: 18,
        className: "ml-auto text-foreground"
      })]
    })
  });
});
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
const DropdownMenuSubContent = /*#__PURE__*/React.forwardRef(({
  className,
  ...props
}, ref) => {
  const {
    open
  } = DropdownMenuPrimitive.useSubContext();
  return _jsx(DropdownMenuPrimitive.SubContent, {
    ref: ref,
    className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border border-border mt-1 bg-popover p-1 shadow-md shadow-foreground/5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', open ? 'web:animate-in web:fade-in-0 web:zoom-in-95' : 'web:animate-out web:fade-out-0 web:zoom-out', className),
    ...props
  });
});
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
const DropdownMenuContent = /*#__PURE__*/React.forwardRef(({
  className,
  overlayClassName,
  overlayStyle,
  portalHost,
  ...props
}, ref) => {
  const {
    open
  } = DropdownMenuPrimitive.useRootContext();
  return _jsx(DropdownMenuPrimitive.Portal, {
    hostName: portalHost,
    children: _jsx(DropdownMenuPrimitive.Overlay, {
      style: overlayStyle ? StyleSheet.flatten([Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined, overlayStyle]) : Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined,
      className: overlayClassName,
      children: _jsx(DropdownMenuPrimitive.Content, {
        ref: ref,
        className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-md shadow-foreground/5 web:data-[side=bottom]:slide-in-from-top-2 web:data-[side=left]:slide-in-from-right-2 web:data-[side=right]:slide-in-from-left-2 web:data-[side=top]:slide-in-from-bottom-2', open ? 'web:animate-in web:fade-in-0 web:zoom-in-95' : 'web:animate-out web:fade-out-0 web:zoom-out-95', className),
        ...props
      })
    })
  });
});
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
const DropdownMenuItem = /*#__PURE__*/React.forwardRef(({
  className,
  inset,
  ...props
}, ref) => _jsx(TextClassContext.Provider, {
  value: "select-none text-sm native:text-lg text-popover-foreground web:group-focus:text-accent-foreground",
  children: _jsx(DropdownMenuPrimitive.Item, {
    ref: ref,
    className: cn('relative flex flex-row web:cursor-default gap-2 items-center rounded-sm px-2 py-1.5 native:py-2 web:outline-none web:focus:bg-accent active:bg-accent web:hover:bg-accent group', inset && 'pl-8', props.disabled && 'opacity-50 web:pointer-events-none', className),
    ...props
  })
}));
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
const DropdownMenuCheckboxItem = /*#__PURE__*/React.forwardRef(({
  className,
  children,
  checked,
  ...props
}, ref) => _jsxs(DropdownMenuPrimitive.CheckboxItem, {
  ref: ref,
  className: cn('relative flex flex-row web:cursor-default items-center web:group rounded-sm py-1.5 native:py-2 pl-8 pr-2 web:outline-none web:focus:bg-accent active:bg-accent', props.disabled && 'web:pointer-events-none opacity-50', className),
  checked: checked,
  ...props,
  children: [_jsx(View, {
    className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
    children: _jsx(DropdownMenuPrimitive.ItemIndicator, {
      children: _jsx(Check, {
        size: 14,
        strokeWidth: 3,
        className: "text-foreground"
      })
    })
  }), _jsx(_Fragment, {
    children: children
  })]
}));
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
const DropdownMenuRadioItem = /*#__PURE__*/React.forwardRef(({
  className,
  children,
  ...props
}, ref) => _jsxs(DropdownMenuPrimitive.RadioItem, {
  ref: ref,
  className: cn('relative flex flex-row web:cursor-default web:group items-center rounded-sm py-1.5 native:py-2 pl-8 pr-2 web:outline-none web:focus:bg-accent active:bg-accent', props.disabled && 'web:pointer-events-none opacity-50', className),
  ...props,
  children: [_jsx(View, {
    className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
    children: _jsx(DropdownMenuPrimitive.ItemIndicator, {
      children: _jsx(View, {
        className: "bg-foreground h-2 w-2 rounded-full"
      })
    })
  }), _jsx(_Fragment, {
    children: children
  })]
}));
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
const DropdownMenuLabel = /*#__PURE__*/React.forwardRef(({
  className,
  inset,
  ...props
}, ref) => _jsx(DropdownMenuPrimitive.Label, {
  ref: ref,
  className: cn('px-2 py-1.5 text-sm native:text-base font-semibold text-foreground web:cursor-default', inset && 'pl-8', className),
  ...props
}));
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
const DropdownMenuSeparator = /*#__PURE__*/React.forwardRef(({
  className,
  ...props
}, ref) => _jsx(DropdownMenuPrimitive.Separator, {
  ref: ref,
  className: cn('-mx-1 my-1 h-px bg-border', className),
  ...props
}));
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
const DropdownMenuShortcut = ({
  className,
  ...props
}) => {
  return _jsx(Text, {
    className: cn('ml-auto text-xs native:text-sm tracking-widest text-muted-foreground', className),
    ...props
  });
};
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
//# sourceMappingURL=dropdown-menu.js.map