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

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DropdownSubMenuTrigger = exports.DropdownSubMenu = exports.DropdownMenuSeparator = exports.DropdownMenuRadioItem = exports.DropdownMenuRadioGroup = exports.DropdownMenuLabel = exports.DropdownMenuItem = exports.DropdownMenuGroup = exports.DropdownMenuCheckboxItem = exports.DropdownMenu = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));

var _i18n = require("@wordpress/i18n");

var _icons = require("@wordpress/icons");

var _primitives = require("@wordpress/primitives");

var _icon = _interopRequireDefault(require("../icon"));

var DropdownMenuStyled = _interopRequireWildcard(require("./styles"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
// 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.
 */

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 (0, _element.createElement)(DropdownMenuPrimitive.Root, {
    defaultOpen: defaultOpen,
    open: open,
    onOpenChange: onOpenChange,
    modal: modal,
    dir: (0, _i18n.isRTL)() ? 'rtl' : 'ltr'
  }, (0, _element.createElement)(DropdownMenuPrimitive.Trigger, {
    asChild: true
  }, trigger), (0, _element.createElement)(DropdownMenuPrimitive.Portal, null, (0, _element.createElement)(DropdownMenuStyled.Content, {
    side: side,
    align: align,
    sideOffset: sideOffset,
    alignOffset: alignOffset,
    loop: true
  }, children)));
};

exports.DropdownMenu = DropdownMenu;

const DropdownSubMenuTrigger = _ref2 => {
  let {
    prefix,
    suffix = (0, _element.createElement)(DropdownMenuStyled.SubmenuRtlChevronIcon, {
      icon: _icons.chevronRightSmall,
      size: 24
    }),
    children
  } = _ref2;
  return (0, _element.createElement)(_element.Fragment, null, prefix && (0, _element.createElement)(DropdownMenuStyled.ItemPrefixWrapper, null, prefix), children, suffix && (0, _element.createElement)(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
};

exports.DropdownSubMenuTrigger = DropdownSubMenuTrigger;

const DropdownSubMenu = _ref3 => {
  let {
    // Sub props
    defaultOpen,
    open,
    onOpenChange,
    // Sub trigger props
    disabled,
    textValue,
    // Render props
    children,
    trigger
  } = _ref3;
  return (0, _element.createElement)(DropdownMenuPrimitive.Sub, {
    defaultOpen: defaultOpen,
    open: open,
    onOpenChange: onOpenChange
  }, (0, _element.createElement)(DropdownMenuStyled.SubTrigger, {
    disabled: disabled,
    textValue: textValue
  }, trigger), (0, _element.createElement)(DropdownMenuPrimitive.Portal, null, (0, _element.createElement)(DropdownMenuStyled.SubContent, {
    loop: true,
    sideOffset: SUB_MENU_OFFSET_SIDE,
    alignOffset: SUB_MENU_OFFSET_ALIGN
  }, children)));
};

exports.DropdownSubMenu = DropdownSubMenu;

const DropdownMenuLabel = props => (0, _element.createElement)(DropdownMenuStyled.Label, props);

exports.DropdownMenuLabel = DropdownMenuLabel;

const DropdownMenuGroup = props => (0, _element.createElement)(DropdownMenuPrimitive.Group, props);

exports.DropdownMenuGroup = DropdownMenuGroup;
const DropdownMenuItem = (0, _element.forwardRef)((_ref4, forwardedRef) => {
  let {
    children,
    prefix,
    suffix,
    ...props
  } = _ref4;
  return (0, _element.createElement)(DropdownMenuStyled.Item, (0, _extends2.default)({}, props, {
    ref: forwardedRef
  }), prefix && (0, _element.createElement)(DropdownMenuStyled.ItemPrefixWrapper, null, prefix), children, suffix && (0, _element.createElement)(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
});
exports.DropdownMenuItem = DropdownMenuItem;

const DropdownMenuCheckboxItem = _ref5 => {
  let {
    children,
    checked = false,
    suffix,
    ...props
  } = _ref5;
  return (0, _element.createElement)(DropdownMenuStyled.CheckboxItem, (0, _extends2.default)({}, props, {
    checked: checked
  }), (0, _element.createElement)(DropdownMenuStyled.ItemPrefixWrapper, null, (0, _element.createElement)(DropdownMenuStyled.ItemIndicator, null, (checked === 'indeterminate' || checked === true) && (0, _element.createElement)(_icon.default, {
    icon: checked === 'indeterminate' ? _icons.lineSolid : _icons.check,
    size: 24
  }))), children, suffix && (0, _element.createElement)(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
};

exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;

const DropdownMenuRadioGroup = props => (0, _element.createElement)(DropdownMenuPrimitive.RadioGroup, props);

exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
const radioDot = (0, _element.createElement)(_primitives.SVG, {
  viewBox: "0 0 24 24",
  xmlns: "http://www.w3.org/2000/svg"
}, (0, _element.createElement)(_primitives.Circle, {
  cx: 12,
  cy: 12,
  r: 3,
  fill: "currentColor"
}));

const DropdownMenuRadioItem = _ref6 => {
  let {
    children,
    suffix,
    ...props
  } = _ref6;
  return (0, _element.createElement)(DropdownMenuStyled.RadioItem, props, (0, _element.createElement)(DropdownMenuStyled.ItemPrefixWrapper, null, (0, _element.createElement)(DropdownMenuStyled.ItemIndicator, null, (0, _element.createElement)(_icon.default, {
    icon: radioDot,
    size: 22
  }))), children, suffix && (0, _element.createElement)(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
};

exports.DropdownMenuRadioItem = DropdownMenuRadioItem;

const DropdownMenuSeparator = props => (0, _element.createElement)(DropdownMenuStyled.Separator, props);

exports.DropdownMenuSeparator = DropdownMenuSeparator;
//# sourceMappingURL=index.js.map