@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 4.13 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/menu-item/index.tsx"],
"sourcesContent": ["/**\n * External dependencies\n */\n\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Shortcut from '../shortcut';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nfunction UnforwardedMenuItem(props, ref) {\n let {\n children,\n info,\n className,\n icon,\n iconPosition = 'right',\n shortcut,\n isSelected,\n role = 'menuitem',\n suffix,\n ...buttonProps\n } = props;\n className = clsx('components-menu-item__button', className);\n if (info) {\n children = /*#__PURE__*/_jsxs(\"span\", {\n className: \"components-menu-item__info-wrapper\",\n children: [/*#__PURE__*/_jsx(\"span\", {\n className: \"components-menu-item__item\",\n children: children\n }), /*#__PURE__*/_jsx(\"span\", {\n className: \"components-menu-item__info\",\n children: info\n })]\n });\n }\n if (icon && typeof icon !== 'string') {\n icon = cloneElement(icon, {\n className: clsx('components-menu-items__item-icon', {\n 'has-icon-right': iconPosition === 'right'\n })\n });\n }\n return /*#__PURE__*/_jsxs(Button, {\n size: \"compact\",\n ref: ref\n // Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n ,\n \"aria-checked\": role === 'menuitemcheckbox' || role === 'menuitemradio' ? isSelected : undefined,\n role: role,\n icon: iconPosition === 'left' ? icon : undefined,\n className: className,\n accessibleWhenDisabled: true,\n ...buttonProps,\n children: [/*#__PURE__*/_jsx(\"span\", {\n className: \"components-menu-item__item\",\n children: children\n }), !suffix && /*#__PURE__*/_jsx(Shortcut, {\n className: \"components-menu-item__shortcut\",\n shortcut: shortcut\n }), !suffix && icon && iconPosition === 'right' && /*#__PURE__*/_jsx(Icon, {\n icon: icon\n }), suffix]\n });\n}\n\n/**\n * MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component.\n *\n * ```jsx\n * import { MenuItem } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyMenuItem = () => {\n * \tconst [ isActive, setIsActive ] = useState( true );\n *\n * \treturn (\n * \t\t<MenuItem\n * \t\t\ticon={ isActive ? 'yes' : 'no' }\n * \t\t\tisSelected={ isActive }\n * \t\t\trole=\"menuitemcheckbox\"\n * \t\t\tonClick={ () => setIsActive( ( state ) => ! state ) }\n * \t\t>\n * \t\t\tToggle\n * \t\t</MenuItem>\n * \t);\n * };\n * ```\n */\nexport const MenuItem = forwardRef(UnforwardedMenuItem);\nMenuItem.displayName = 'MenuItem';\nexport default MenuItem;"],
"mappings": ";AAIA,OAAO,UAAU;AAKjB,SAAS,cAAc,kBAAkB;AAKzC,OAAO,cAAc;AACrB,OAAO,YAAY;AACnB,OAAO,UAAU;AACjB,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,SAAS,oBAAoB,OAAO,KAAK;AACvC,MAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,cAAY,KAAK,gCAAgC,SAAS;AAC1D,MAAI,MAAM;AACR,eAAwB,sBAAM,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,UAAU,CAAc,qBAAK,QAAQ;AAAA,QACnC,WAAW;AAAA,QACX;AAAA,MACF,CAAC,GAAgB,qBAAK,QAAQ;AAAA,QAC5B,WAAW;AAAA,QACX,UAAU;AAAA,MACZ,CAAC,CAAC;AAAA,IACJ,CAAC;AAAA,EACH;AACA,MAAI,QAAQ,OAAO,SAAS,UAAU;AACpC,WAAO,aAAa,MAAM;AAAA,MACxB,WAAW,KAAK,oCAAoC;AAAA,QAClD,kBAAkB,iBAAiB;AAAA,MACrC,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACA,SAAoB,sBAAM,QAAQ;AAAA,IAChC,MAAM;AAAA,IACN;AAAA,IAGA,gBAAgB,SAAS,sBAAsB,SAAS,kBAAkB,aAAa;AAAA,IACvF;AAAA,IACA,MAAM,iBAAiB,SAAS,OAAO;AAAA,IACvC;AAAA,IACA,wBAAwB;AAAA,IACxB,GAAG;AAAA,IACH,UAAU,CAAc,qBAAK,QAAQ;AAAA,MACnC,WAAW;AAAA,MACX;AAAA,IACF,CAAC,GAAG,CAAC,UAAuB,qBAAK,UAAU;AAAA,MACzC,WAAW;AAAA,MACX;AAAA,IACF,CAAC,GAAG,CAAC,UAAU,QAAQ,iBAAiB,WAAwB,qBAAK,MAAM;AAAA,MACzE;AAAA,IACF,CAAC,GAAG,MAAM;AAAA,EACZ,CAAC;AACH;AAyBO,IAAM,WAAW,WAAW,mBAAmB;AACtD,SAAS,cAAc;AACvB,IAAO,oBAAQ;",
"names": []
}