@wordpress/components/build-module/dropdown-menu-v2/index.js

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
/**
 * WordPress dependencies
 */

import { forwardRef } from '@wordpress/element';
import { isRTL } from '@wordpress/i18n';
import { check, chevronRightSmall, lineSolid } from '@wordpress/icons';
import { SVG, Circle } from '@wordpress/primitives';
/**
 * Internal dependencies
 */

import Icon from '../icon';
import * as DropdownMenuStyled from './styles';
// Menu content's side padding + 4px
const SUB_MENU_OFFSET_SIDE = 12; // Opposite amount of the top padding of the menu item

const SUB_MENU_OFFSET_ALIGN = -8;
/**
 * `DropdownMenu` displays a menu to the user (such as a set of actions
 * or functions) triggered by a button.
 */

export const DropdownMenu = _ref => {
  let {
    // Root props
    defaultOpen,
    open,
    onOpenChange,
    modal = true,
    // Content positioning props
    side = 'bottom',
    sideOffset = 0,
    align = 'center',
    alignOffset = 0,
    // Render props
    children,
    trigger
  } = _ref;
  return createElement(DropdownMenuPrimitive.Root, {
    defaultOpen: defaultOpen,
    open: open,
    onOpenChange: onOpenChange,
    modal: modal,
    dir: isRTL() ? 'rtl' : 'ltr'
  }, createElement(DropdownMenuPrimitive.Trigger, {
    asChild: true
  }, trigger), createElement(DropdownMenuPrimitive.Portal, null, createElement(DropdownMenuStyled.Content, {
    side: side,
    align: align,
    sideOffset: sideOffset,
    alignOffset: alignOffset,
    loop: true
  }, children)));
};
export const DropdownSubMenuTrigger = _ref2 => {
  let {
    prefix,
    suffix = createElement(DropdownMenuStyled.SubmenuRtlChevronIcon, {
      icon: chevronRightSmall,
      size: 24
    }),
    children
  } = _ref2;
  return createElement(Fragment, null, prefix && createElement(DropdownMenuStyled.ItemPrefixWrapper, null, prefix), children, suffix && createElement(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
};
export const DropdownSubMenu = _ref3 => {
  let {
    // Sub props
    defaultOpen,
    open,
    onOpenChange,
    // Sub trigger props
    disabled,
    textValue,
    // Render props
    children,
    trigger
  } = _ref3;
  return createElement(DropdownMenuPrimitive.Sub, {
    defaultOpen: defaultOpen,
    open: open,
    onOpenChange: onOpenChange
  }, createElement(DropdownMenuStyled.SubTrigger, {
    disabled: disabled,
    textValue: textValue
  }, trigger), createElement(DropdownMenuPrimitive.Portal, null, createElement(DropdownMenuStyled.SubContent, {
    loop: true,
    sideOffset: SUB_MENU_OFFSET_SIDE,
    alignOffset: SUB_MENU_OFFSET_ALIGN
  }, children)));
};
export const DropdownMenuLabel = props => createElement(DropdownMenuStyled.Label, props);
export const DropdownMenuGroup = props => createElement(DropdownMenuPrimitive.Group, props);
export const DropdownMenuItem = forwardRef((_ref4, forwardedRef) => {
  let {
    children,
    prefix,
    suffix,
    ...props
  } = _ref4;
  return createElement(DropdownMenuStyled.Item, _extends({}, props, {
    ref: forwardedRef
  }), prefix && createElement(DropdownMenuStyled.ItemPrefixWrapper, null, prefix), children, suffix && createElement(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
});
export const DropdownMenuCheckboxItem = _ref5 => {
  let {
    children,
    checked = false,
    suffix,
    ...props
  } = _ref5;
  return createElement(DropdownMenuStyled.CheckboxItem, _extends({}, props, {
    checked: checked
  }), createElement(DropdownMenuStyled.ItemPrefixWrapper, null, createElement(DropdownMenuStyled.ItemIndicator, null, (checked === 'indeterminate' || checked === true) && createElement(Icon, {
    icon: checked === 'indeterminate' ? lineSolid : check,
    size: 24
  }))), children, suffix && createElement(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
};
export const DropdownMenuRadioGroup = props => createElement(DropdownMenuPrimitive.RadioGroup, props);
const radioDot = createElement(SVG, {
  viewBox: "0 0 24 24",
  xmlns: "http://www.w3.org/2000/svg"
}, createElement(Circle, {
  cx: 12,
  cy: 12,
  r: 3,
  fill: "currentColor"
}));
export const DropdownMenuRadioItem = _ref6 => {
  let {
    children,
    suffix,
    ...props
  } = _ref6;
  return createElement(DropdownMenuStyled.RadioItem, props, createElement(DropdownMenuStyled.ItemPrefixWrapper, null, createElement(DropdownMenuStyled.ItemIndicator, null, createElement(Icon, {
    icon: radioDot,
    size: 22
  }))), children, suffix && createElement(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
};
export const DropdownMenuSeparator = props => createElement(DropdownMenuStyled.Separator, props);
//# sourceMappingURL=index.js.map