@wordpress/components 24.0.0 → 25.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/CONTRIBUTING.md +10 -0
- package/build/color-picker/styles.js +8 -8
- package/build/color-picker/styles.js.map +1 -1
- package/build/date-time/date-time/index.js +3 -84
- package/build/date-time/date-time/index.js.map +1 -1
- package/build/date-time/date-time/styles.js +4 -19
- package/build/date-time/date-time/styles.js.map +1 -1
- package/build/dropdown-menu/index.js +87 -11
- package/build/dropdown-menu/index.js.map +1 -1
- package/build/dropdown-menu/types.js +6 -0
- package/build/dropdown-menu/types.js.map +1 -0
- package/build/dropdown-menu-v2/index.js +195 -0
- package/build/dropdown-menu-v2/index.js.map +1 -0
- package/build/dropdown-menu-v2/styles.js +176 -0
- package/build/dropdown-menu-v2/styles.js.map +1 -0
- package/build/dropdown-menu-v2/types.js +6 -0
- package/build/dropdown-menu-v2/types.js.map +1 -0
- package/build/index.native.js +0 -9
- package/build/index.native.js.map +1 -1
- package/build/input-control/styles/input-control-styles.js +30 -23
- package/build/input-control/styles/input-control-styles.js.map +1 -1
- package/build/mobile/bottom-sheet/cell.native.js +16 -8
- package/build/mobile/bottom-sheet/cell.native.js.map +1 -1
- package/build/mobile/bottom-sheet/range-cell.native.js +3 -2
- package/build/mobile/bottom-sheet/range-cell.native.js.map +1 -1
- package/build/mobile/bottom-sheet/stepper-cell/index.native.js +4 -2
- package/build/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
- package/build/mobile/bottom-sheet/switch-cell.native.js +8 -2
- package/build/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
- package/build/mobile/bottom-sheet-select-control/index.native.js +4 -2
- package/build/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
- package/build/mobile/bottom-sheet-text-control/index.native.js +4 -2
- package/build/mobile/bottom-sheet-text-control/index.native.js.map +1 -1
- package/build/modal/index.js +1 -2
- package/build/modal/index.js.map +1 -1
- package/build/private-apis.js +13 -1
- package/build/private-apis.js.map +1 -1
- package/build/range-control/index.native.js +5 -2
- package/build/range-control/index.native.js.map +1 -1
- package/build/snackbar/list.js +0 -2
- package/build/snackbar/list.js.map +1 -1
- package/build/toggle-group-control/toggle-group-control/styles.js +7 -7
- package/build/toggle-group-control/toggle-group-control/styles.js.map +1 -1
- package/build-module/color-picker/styles.js +8 -8
- package/build-module/color-picker/styles.js.map +1 -1
- package/build-module/date-time/date-time/index.js +6 -81
- package/build-module/date-time/date-time/index.js.map +1 -1
- package/build-module/date-time/date-time/styles.js +3 -17
- package/build-module/date-time/date-time/styles.js.map +1 -1
- package/build-module/dropdown-menu/index.js +87 -10
- package/build-module/dropdown-menu/index.js.map +1 -1
- package/build-module/dropdown-menu/types.js +2 -0
- package/build-module/dropdown-menu/types.js.map +1 -0
- package/build-module/dropdown-menu-v2/index.js +149 -0
- package/build-module/dropdown-menu-v2/index.js.map +1 -0
- package/build-module/dropdown-menu-v2/styles.js +153 -0
- package/build-module/dropdown-menu-v2/styles.js.map +1 -0
- package/build-module/dropdown-menu-v2/types.js +2 -0
- package/build-module/dropdown-menu-v2/types.js.map +1 -0
- package/build-module/index.native.js +0 -1
- package/build-module/index.native.js.map +1 -1
- package/build-module/input-control/styles/input-control-styles.js +30 -23
- package/build-module/input-control/styles/input-control-styles.js.map +1 -1
- package/build-module/mobile/bottom-sheet/cell.native.js +16 -8
- package/build-module/mobile/bottom-sheet/cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/range-cell.native.js +3 -2
- package/build-module/mobile/bottom-sheet/range-cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js +4 -2
- package/build-module/mobile/bottom-sheet/stepper-cell/index.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet/switch-cell.native.js +7 -2
- package/build-module/mobile/bottom-sheet/switch-cell.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet-select-control/index.native.js +4 -2
- package/build-module/mobile/bottom-sheet-select-control/index.native.js.map +1 -1
- package/build-module/mobile/bottom-sheet-text-control/index.native.js +4 -2
- package/build-module/mobile/bottom-sheet-text-control/index.native.js.map +1 -1
- package/build-module/modal/index.js +1 -2
- package/build-module/modal/index.js.map +1 -1
- package/build-module/private-apis.js +12 -1
- package/build-module/private-apis.js.map +1 -1
- package/build-module/range-control/index.native.js +5 -2
- package/build-module/range-control/index.native.js.map +1 -1
- package/build-module/snackbar/list.js +0 -2
- package/build-module/snackbar/list.js.map +1 -1
- package/build-module/toggle-group-control/toggle-group-control/styles.js +7 -7
- package/build-module/toggle-group-control/toggle-group-control/styles.js.map +1 -1
- package/build-style/style-rtl.css +11 -14
- package/build-style/style.css +11 -14
- package/build-types/color-picker/styles.d.ts.map +1 -1
- package/build-types/date-time/date-time/index.d.ts +3 -4
- package/build-types/date-time/date-time/index.d.ts.map +1 -1
- package/build-types/date-time/date-time/styles.d.ts +0 -4
- package/build-types/date-time/date-time/styles.d.ts.map +1 -1
- package/build-types/date-time/stories/date-time.d.ts.map +1 -1
- package/build-types/date-time/types.d.ts +0 -14
- package/build-types/date-time/types.d.ts.map +1 -1
- package/build-types/dropdown-menu/index.d.ts +83 -1
- package/build-types/dropdown-menu/index.d.ts.map +1 -1
- package/build-types/dropdown-menu/stories/index.d.ts +13 -0
- package/build-types/dropdown-menu/stories/index.d.ts.map +1 -0
- package/build-types/dropdown-menu/test/index.d.ts +2 -0
- package/build-types/dropdown-menu/test/index.d.ts.map +1 -0
- package/build-types/dropdown-menu/types.d.ts +134 -0
- package/build-types/dropdown-menu/types.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/index.d.ts +17 -0
- package/build-types/dropdown-menu-v2/index.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/stories/index.d.ts +13 -0
- package/build-types/dropdown-menu-v2/stories/index.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/styles.d.ts +41 -0
- package/build-types/dropdown-menu-v2/styles.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/test/index.d.ts +2 -0
- package/build-types/dropdown-menu-v2/test/index.d.ts.map +1 -0
- package/build-types/dropdown-menu-v2/types.d.ts +242 -0
- package/build-types/dropdown-menu-v2/types.d.ts.map +1 -0
- package/build-types/input-control/styles/input-control-styles.d.ts.map +1 -1
- package/build-types/modal/index.d.ts.map +1 -1
- package/build-types/private-apis.d.ts.map +1 -1
- package/build-types/snackbar/list.d.ts.map +1 -1
- package/build-types/toggle-group-control/toggle-group-control/styles.d.ts.map +1 -1
- package/build-types/toolbar/stories/index.d.ts.map +1 -1
- package/build-types/ui/context/get-styled-class-name-from-key.d.ts +1 -10
- package/build-types/ui/context/get-styled-class-name-from-key.d.ts.map +1 -1
- package/package.json +21 -20
- package/src/button/style.scss +5 -12
- package/src/color-picker/styles.ts +7 -2
- package/src/date-time/README.md +0 -16
- package/src/date-time/date-time/index.tsx +17 -155
- package/src/date-time/date-time/styles.ts +0 -4
- package/src/date-time/stories/date-time.tsx +0 -4
- package/src/date-time/types.ts +0 -16
- package/src/dropdown-menu/README.md +12 -22
- package/src/dropdown-menu/{index.js → index.tsx} +111 -25
- package/src/dropdown-menu/stories/{index.js → index.tsx} +14 -22
- package/src/dropdown-menu/test/{index.js → index.tsx} +6 -5
- package/src/dropdown-menu/types.ts +143 -0
- package/src/dropdown-menu-v2/README.md +392 -0
- package/src/dropdown-menu-v2/index.tsx +241 -0
- package/src/dropdown-menu-v2/stories/index.tsx +193 -0
- package/src/dropdown-menu-v2/styles.ts +263 -0
- package/src/dropdown-menu-v2/test/index.tsx +816 -0
- package/src/dropdown-menu-v2/types.ts +250 -0
- package/src/index.native.js +0 -1
- package/src/input-control/styles/input-control-styles.tsx +7 -0
- package/src/mobile/bottom-sheet/cell.native.js +26 -5
- package/src/mobile/bottom-sheet/range-cell.native.js +2 -1
- package/src/mobile/bottom-sheet/stepper-cell/index.native.js +2 -0
- package/src/mobile/bottom-sheet/styles.native.scss +13 -1
- package/src/mobile/bottom-sheet/switch-cell.native.js +10 -2
- package/src/mobile/bottom-sheet-select-control/index.native.js +2 -0
- package/src/mobile/bottom-sheet-text-control/index.native.js +2 -0
- package/src/modal/index.tsx +1 -6
- package/src/private-apis.ts +22 -0
- package/src/range-control/index.native.js +3 -0
- package/src/search-control/style.scss +2 -0
- package/src/snackbar/list.tsx +0 -1
- package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +6 -2
- package/src/toggle-group-control/toggle-group-control/styles.ts +6 -1
- package/src/toolbar/stories/index.tsx +25 -28
- package/src/tooltip/style.scss +2 -2
- package/tsconfig.tsbuildinfo +1 -1
- package/build/mobile/readable-content-view/index.native.js +0 -97
- package/build/mobile/readable-content-view/index.native.js.map +0 -1
- package/build-module/mobile/readable-content-view/index.native.js +0 -81
- package/build-module/mobile/readable-content-view/index.native.js.map +0 -1
- package/src/mobile/readable-content-view/index.native.js +0 -85
- package/src/mobile/readable-content-view/style.native.scss +0 -30
|
@@ -21,8 +21,6 @@ var _dropdown = _interopRequireDefault(require("../dropdown"));
|
|
|
21
21
|
|
|
22
22
|
var _navigableContainer = require("../navigable-container");
|
|
23
23
|
|
|
24
|
-
// @ts-nocheck
|
|
25
|
-
|
|
26
24
|
/**
|
|
27
25
|
* External dependencies
|
|
28
26
|
*/
|
|
@@ -47,17 +45,91 @@ function mergeProps() {
|
|
|
47
45
|
|
|
48
46
|
return mergedProps;
|
|
49
47
|
}
|
|
50
|
-
/**
|
|
51
|
-
* Whether the argument is a function.
|
|
52
|
-
*
|
|
53
|
-
* @param {*} maybeFunc The argument to check.
|
|
54
|
-
* @return {boolean} True if the argument is a function, false otherwise.
|
|
55
|
-
*/
|
|
56
|
-
|
|
57
48
|
|
|
58
49
|
function isFunction(maybeFunc) {
|
|
59
50
|
return typeof maybeFunc === 'function';
|
|
60
51
|
}
|
|
52
|
+
/**
|
|
53
|
+
*
|
|
54
|
+
* The DropdownMenu displays a list of actions (each contained in a MenuItem,
|
|
55
|
+
* MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover
|
|
56
|
+
* after the user has interacted with an element (a button or icon) or when
|
|
57
|
+
* they perform a specific action.
|
|
58
|
+
*
|
|
59
|
+
* Render a Dropdown Menu with a set of controls:
|
|
60
|
+
*
|
|
61
|
+
* ```jsx
|
|
62
|
+
* import { DropdownMenu } from '@wordpress/components';
|
|
63
|
+
* import {
|
|
64
|
+
* more,
|
|
65
|
+
* arrowLeft,
|
|
66
|
+
* arrowRight,
|
|
67
|
+
* arrowUp,
|
|
68
|
+
* arrowDown,
|
|
69
|
+
* } from '@wordpress/icons';
|
|
70
|
+
*
|
|
71
|
+
* const MyDropdownMenu = () => (
|
|
72
|
+
* <DropdownMenu
|
|
73
|
+
* icon={ more }
|
|
74
|
+
* label="Select a direction"
|
|
75
|
+
* controls={ [
|
|
76
|
+
* {
|
|
77
|
+
* title: 'Up',
|
|
78
|
+
* icon: arrowUp,
|
|
79
|
+
* onClick: () => console.log( 'up' ),
|
|
80
|
+
* },
|
|
81
|
+
* {
|
|
82
|
+
* title: 'Right',
|
|
83
|
+
* icon: arrowRight,
|
|
84
|
+
* onClick: () => console.log( 'right' ),
|
|
85
|
+
* },
|
|
86
|
+
* {
|
|
87
|
+
* title: 'Down',
|
|
88
|
+
* icon: arrowDown,
|
|
89
|
+
* onClick: () => console.log( 'down' ),
|
|
90
|
+
* },
|
|
91
|
+
* {
|
|
92
|
+
* title: 'Left',
|
|
93
|
+
* icon: arrowLeft,
|
|
94
|
+
* onClick: () => console.log( 'left' ),
|
|
95
|
+
* },
|
|
96
|
+
* ] }
|
|
97
|
+
* />
|
|
98
|
+
* );
|
|
99
|
+
* ```
|
|
100
|
+
*
|
|
101
|
+
* Alternatively, specify a `children` function which returns elements valid for
|
|
102
|
+
* use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
|
|
103
|
+
*
|
|
104
|
+
* ```jsx
|
|
105
|
+
* import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
|
|
106
|
+
* import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
|
|
107
|
+
*
|
|
108
|
+
* const MyDropdownMenu = () => (
|
|
109
|
+
* <DropdownMenu icon={ more } label="Select a direction">
|
|
110
|
+
* { ( { onClose } ) => (
|
|
111
|
+
* <>
|
|
112
|
+
* <MenuGroup>
|
|
113
|
+
* <MenuItem icon={ arrowUp } onClick={ onClose }>
|
|
114
|
+
* Move Up
|
|
115
|
+
* </MenuItem>
|
|
116
|
+
* <MenuItem icon={ arrowDown } onClick={ onClose }>
|
|
117
|
+
* Move Down
|
|
118
|
+
* </MenuItem>
|
|
119
|
+
* </MenuGroup>
|
|
120
|
+
* <MenuGroup>
|
|
121
|
+
* <MenuItem icon={ trash } onClick={ onClose }>
|
|
122
|
+
* Remove
|
|
123
|
+
* </MenuItem>
|
|
124
|
+
* </MenuGroup>
|
|
125
|
+
* </>
|
|
126
|
+
* ) }
|
|
127
|
+
* </DropdownMenu>
|
|
128
|
+
* );
|
|
129
|
+
* ```
|
|
130
|
+
*
|
|
131
|
+
*/
|
|
132
|
+
|
|
61
133
|
|
|
62
134
|
function DropdownMenu(dropdownMenuProps) {
|
|
63
135
|
const {
|
|
@@ -82,10 +154,14 @@ function DropdownMenu(dropdownMenuProps) {
|
|
|
82
154
|
let controlSets;
|
|
83
155
|
|
|
84
156
|
if (controls !== null && controls !== void 0 && controls.length) {
|
|
157
|
+
// @ts-expect-error The check below is needed because `DropdownMenus`
|
|
158
|
+
// rendered by `ToolBarGroup` receive controls as a nested array.
|
|
85
159
|
controlSets = controls;
|
|
86
160
|
|
|
87
161
|
if (!Array.isArray(controlSets[0])) {
|
|
88
|
-
|
|
162
|
+
// This is not ideal, but at this point we know that `controls` is
|
|
163
|
+
// not a nested array, even if TypeScript doesn't.
|
|
164
|
+
controlSets = [controls];
|
|
89
165
|
}
|
|
90
166
|
}
|
|
91
167
|
|
|
@@ -126,7 +202,7 @@ function DropdownMenu(dropdownMenuProps) {
|
|
|
126
202
|
return (0, _element.createElement)(Toggle, (0, _extends2.default)({}, mergedToggleProps, {
|
|
127
203
|
icon: icon,
|
|
128
204
|
onClick: event => {
|
|
129
|
-
onToggle(
|
|
205
|
+
onToggle();
|
|
130
206
|
|
|
131
207
|
if (mergedToggleProps.onClick) {
|
|
132
208
|
mergedToggleProps.onClick(event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/components/src/dropdown-menu/index.js"],"names":["mergeProps","defaultProps","props","mergedProps","className","isFunction","maybeFunc","DropdownMenu","dropdownMenuProps","children","controls","icon","menu","label","popoverProps","toggleProps","menuProps","disableOpenOnArrowDown","text","noIcons","length","controlSets","Array","isArray","mergedPopoverProps","isOpen","onToggle","openOnArrowDown","event","code","preventDefault","as","Toggle","Button","restToggleProps","mergedToggleProps","onClick","onKeyDown","showTooltip","mergedMenuProps","flatMap","controlSet","indexOfSet","map","control","indexOfControl","join","stopPropagation","onClose","isActive","title","role","undefined","isDisabled"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { menu } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport { NavigableMenu } from '../navigable-container';\n\nfunction mergeProps( defaultProps = {}, props = {} ) {\n\tconst mergedProps = {\n\t\t...defaultProps,\n\t\t...props,\n\t};\n\n\tif ( props.className && defaultProps.className ) {\n\t\tmergedProps.className = classnames(\n\t\t\tprops.className,\n\t\t\tdefaultProps.className\n\t\t);\n\t}\n\n\treturn mergedProps;\n}\n\n/**\n * Whether the argument is a function.\n *\n * @param {*} maybeFunc The argument to check.\n * @return {boolean} True if the argument is a function, false otherwise.\n */\nfunction isFunction( maybeFunc ) {\n\treturn typeof maybeFunc === 'function';\n}\n\nfunction DropdownMenu( dropdownMenuProps ) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tcontrols,\n\t\ticon = menu,\n\t\tlabel,\n\t\tpopoverProps,\n\t\ttoggleProps,\n\t\tmenuProps,\n\t\tdisableOpenOnArrowDown = false,\n\t\ttext,\n\t\tnoIcons,\n\t} = dropdownMenuProps;\n\n\tif ( ! controls?.length && ! isFunction( children ) ) {\n\t\treturn null;\n\t}\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets;\n\tif ( controls?.length ) {\n\t\tcontrolSets = controls;\n\t\tif ( ! Array.isArray( controlSets[ 0 ] ) ) {\n\t\t\tcontrolSets = [ controlSets ];\n\t\t}\n\t}\n\tconst mergedPopoverProps = mergeProps(\n\t\t{\n\t\t\tclassName: 'components-dropdown-menu__popover',\n\t\t},\n\t\tpopoverProps\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames( 'components-dropdown-menu', className ) }\n\t\t\tpopoverProps={ mergedPopoverProps }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( disableOpenOnArrowDown ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( ! isOpen && event.code === 'ArrowDown' ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\tconst { as: Toggle = Button, ...restToggleProps } =\n\t\t\t\t\ttoggleProps ?? {};\n\n\t\t\t\tconst mergedToggleProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t'components-dropdown-menu__toggle',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-opened': isOpen,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\trestToggleProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<Toggle\n\t\t\t\t\t\t{ ...mergedToggleProps }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\tonToggle( event );\n\t\t\t\t\t\t\tif ( mergedToggleProps.onClick ) {\n\t\t\t\t\t\t\t\tmergedToggleProps.onClick( event );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\topenOnArrowDown( event );\n\t\t\t\t\t\t\tif ( mergedToggleProps.onKeyDown ) {\n\t\t\t\t\t\t\t\tmergedToggleProps.onKeyDown( event );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ttext={ text }\n\t\t\t\t\t\tshowTooltip={ toggleProps?.showTooltip ?? true }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ mergedToggleProps.children }\n\t\t\t\t\t</Toggle>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ ( props ) => {\n\t\t\t\tconst mergedMenuProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t'components-dropdown-menu__menu',\n\t\t\t\t\t\t\t{ 'no-icons': noIcons }\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tmenuProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<NavigableMenu { ...mergedMenuProps } role=\"menu\">\n\t\t\t\t\t\t{ isFunction( children ) ? children( props ) : null }\n\t\t\t\t\t\t{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>\n\t\t\t\t\t\t\tcontrolSet.map( ( control, indexOfControl ) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={ [\n\t\t\t\t\t\t\t\t\t\tindexOfSet,\n\t\t\t\t\t\t\t\t\t\tindexOfControl,\n\t\t\t\t\t\t\t\t\t].join() }\n\t\t\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tprops.onClose();\n\t\t\t\t\t\t\t\t\t\tif ( control.onClick ) {\n\t\t\t\t\t\t\t\t\t\t\tcontrol.onClick();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-dropdown-menu__menu-item',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'has-separator':\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfSet > 0 &&\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfControl === 0,\n\t\t\t\t\t\t\t\t\t\t\t'is-active': control.isActive,\n\t\t\t\t\t\t\t\t\t\t\t'is-icon-only': ! control.title,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\ticon={ control.icon }\n\t\t\t\t\t\t\t\t\tlabel={ control.label }\n\t\t\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.isActive\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\trole={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.role\n\t\t\t\t\t\t\t\t\t\t\t: 'menuitem'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdisabled={ control.isDisabled }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ control.title }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) }\n\t\t\t\t\t</NavigableMenu>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default DropdownMenu;\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/dropdown-menu/index.tsx"],"names":["mergeProps","defaultProps","props","mergedProps","className","isFunction","maybeFunc","DropdownMenu","dropdownMenuProps","children","controls","icon","menu","label","popoverProps","toggleProps","menuProps","disableOpenOnArrowDown","text","noIcons","length","controlSets","Array","isArray","mergedPopoverProps","isOpen","onToggle","openOnArrowDown","event","code","preventDefault","as","Toggle","Button","restToggleProps","mergedToggleProps","onClick","onKeyDown","showTooltip","mergedMenuProps","flatMap","controlSet","indexOfSet","map","control","indexOfControl","join","stopPropagation","onClose","isActive","title","role","undefined","isDisabled"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,UAAT,GAEyD;AAAA,MAAtDC,YAAsD,uEAAzB,EAAyB;AAAA,MAArBC,KAAqB,uEAAV,EAAU;AACxD,QAAMC,WAAc,GAAG,EACtB,GAAGF,YADmB;AAEtB,OAAGC;AAFmB,GAAvB;;AAKA,MAAKA,KAAK,CAACE,SAAN,IAAmBH,YAAY,CAACG,SAArC,EAAiD;AAChDD,IAAAA,WAAW,CAACC,SAAZ,GAAwB,yBACvBF,KAAK,CAACE,SADiB,EAEvBH,YAAY,CAACG,SAFU,CAAxB;AAIA;;AAED,SAAOD,WAAP;AACA;;AAED,SAASE,UAAT,CAAqBC,SAArB,EAAmE;AAClE,SAAO,OAAOA,SAAP,KAAqB,UAA5B;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAEA,SAASC,YAAT,CAAuBC,iBAAvB,EAA8D;AAC7D,QAAM;AACLC,IAAAA,QADK;AAELL,IAAAA,SAFK;AAGLM,IAAAA,QAHK;AAILC,IAAAA,IAAI,GAAGC,WAJF;AAKLC,IAAAA,KALK;AAMLC,IAAAA,YANK;AAOLC,IAAAA,WAPK;AAQLC,IAAAA,SARK;AASLC,IAAAA,sBAAsB,GAAG,KATpB;AAULC,IAAAA,IAVK;AAWLC,IAAAA;AAXK,MAYFX,iBAZJ;;AAcA,MAAK,EAAEE,QAAF,aAAEA,QAAF,eAAEA,QAAQ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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { menu } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport { NavigableMenu } from '../navigable-container';\nimport type { DropdownMenuProps, DropdownOption } from './types';\n\nfunction mergeProps<\n\tT extends { className?: string; [ key: string ]: unknown }\n>( defaultProps: Partial< T > = {}, props: T = {} as T ) {\n\tconst mergedProps: T = {\n\t\t...defaultProps,\n\t\t...props,\n\t};\n\n\tif ( props.className && defaultProps.className ) {\n\t\tmergedProps.className = classnames(\n\t\t\tprops.className,\n\t\t\tdefaultProps.className\n\t\t);\n\t}\n\n\treturn mergedProps;\n}\n\nfunction isFunction( maybeFunc: unknown ): maybeFunc is () => void {\n\treturn typeof maybeFunc === 'function';\n}\n\n/**\n *\n * The DropdownMenu displays a list of actions (each contained in a MenuItem,\n * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover\n * after the user has interacted with an element (a button or icon) or when\n * they perform a specific action.\n *\n * Render a Dropdown Menu with a set of controls:\n *\n * ```jsx\n * import { DropdownMenu } from '@wordpress/components';\n * import {\n * \tmore,\n * \tarrowLeft,\n * \tarrowRight,\n * \tarrowUp,\n * \tarrowDown,\n * } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu\n * \t\ticon={ more }\n * \t\tlabel=\"Select a direction\"\n * \t\tcontrols={ [\n * \t\t\t{\n * \t\t\t\ttitle: 'Up',\n * \t\t\t\ticon: arrowUp,\n * \t\t\t\tonClick: () => console.log( 'up' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Right',\n * \t\t\t\ticon: arrowRight,\n * \t\t\t\tonClick: () => console.log( 'right' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Down',\n * \t\t\t\ticon: arrowDown,\n * \t\t\t\tonClick: () => console.log( 'down' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Left',\n * \t\t\t\ticon: arrowLeft,\n * \t\t\t\tonClick: () => console.log( 'left' ),\n * \t\t\t},\n * \t\t] }\n * \t/>\n * );\n * ```\n *\n * Alternatively, specify a `children` function which returns elements valid for\n * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.\n *\n * ```jsx\n * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\n * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu icon={ more } label=\"Select a direction\">\n * \t\t{ ( { onClose } ) => (\n * \t\t\t<>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ arrowUp } onClick={ onClose }>\n * \t\t\t\t\t\tMove Up\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t\t<MenuItem icon={ arrowDown } onClick={ onClose }>\n * \t\t\t\t\t\tMove Down\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ trash } onClick={ onClose }>\n * \t\t\t\t\t\tRemove\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t</>\n * \t\t) }\n * \t</DropdownMenu>\n * );\n * ```\n *\n */\n\nfunction DropdownMenu( dropdownMenuProps: DropdownMenuProps ) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tcontrols,\n\t\ticon = menu,\n\t\tlabel,\n\t\tpopoverProps,\n\t\ttoggleProps,\n\t\tmenuProps,\n\t\tdisableOpenOnArrowDown = false,\n\t\ttext,\n\t\tnoIcons,\n\t} = dropdownMenuProps;\n\n\tif ( ! controls?.length && ! isFunction( children ) ) {\n\t\treturn null;\n\t}\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets: DropdownOption[][];\n\tif ( controls?.length ) {\n\t\t// @ts-expect-error The check below is needed because `DropdownMenus`\n\t\t// rendered by `ToolBarGroup` receive controls as a nested array.\n\t\tcontrolSets = controls;\n\t\tif ( ! Array.isArray( controlSets[ 0 ] ) ) {\n\t\t\t// This is not ideal, but at this point we know that `controls` is\n\t\t\t// not a nested array, even if TypeScript doesn't.\n\t\t\tcontrolSets = [ controls as DropdownOption[] ];\n\t\t}\n\t}\n\n\tconst mergedPopoverProps = mergeProps(\n\t\t{\n\t\t\tclassName: 'components-dropdown-menu__popover',\n\t\t},\n\t\tpopoverProps\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames( 'components-dropdown-menu', className ) }\n\t\t\tpopoverProps={ mergedPopoverProps }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event: React.KeyboardEvent ) => {\n\t\t\t\t\tif ( disableOpenOnArrowDown ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( ! isOpen && event.code === 'ArrowDown' ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\tconst { as: Toggle = Button, ...restToggleProps } =\n\t\t\t\t\ttoggleProps ?? {};\n\n\t\t\t\tconst mergedToggleProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t'components-dropdown-menu__toggle',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-opened': isOpen,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\trestToggleProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<Toggle\n\t\t\t\t\t\t{ ...mergedToggleProps }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t( ( event ) => {\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\tif ( mergedToggleProps.onClick ) {\n\t\t\t\t\t\t\t\t\tmergedToggleProps.onClick( event );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} ) as React.MouseEventHandler< HTMLButtonElement >\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonKeyDown={\n\t\t\t\t\t\t\t( ( event ) => {\n\t\t\t\t\t\t\t\topenOnArrowDown( event );\n\t\t\t\t\t\t\t\tif ( mergedToggleProps.onKeyDown ) {\n\t\t\t\t\t\t\t\t\tmergedToggleProps.onKeyDown( event );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} ) as React.KeyboardEventHandler< HTMLButtonElement >\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ttext={ text }\n\t\t\t\t\t\tshowTooltip={ toggleProps?.showTooltip ?? true }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ mergedToggleProps.children }\n\t\t\t\t\t</Toggle>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ ( props ) => {\n\t\t\t\tconst mergedMenuProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t'components-dropdown-menu__menu',\n\t\t\t\t\t\t\t{ 'no-icons': noIcons }\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tmenuProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<NavigableMenu { ...mergedMenuProps } role=\"menu\">\n\t\t\t\t\t\t{ isFunction( children ) ? children( props ) : null }\n\t\t\t\t\t\t{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>\n\t\t\t\t\t\t\tcontrolSet.map( ( control, indexOfControl ) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={ [\n\t\t\t\t\t\t\t\t\t\tindexOfSet,\n\t\t\t\t\t\t\t\t\t\tindexOfControl,\n\t\t\t\t\t\t\t\t\t].join() }\n\t\t\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tprops.onClose();\n\t\t\t\t\t\t\t\t\t\tif ( control.onClick ) {\n\t\t\t\t\t\t\t\t\t\t\tcontrol.onClick();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-dropdown-menu__menu-item',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'has-separator':\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfSet > 0 &&\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfControl === 0,\n\t\t\t\t\t\t\t\t\t\t\t'is-active': control.isActive,\n\t\t\t\t\t\t\t\t\t\t\t'is-icon-only': ! control.title,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\ticon={ control.icon }\n\t\t\t\t\t\t\t\t\tlabel={ control.label }\n\t\t\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.isActive\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\trole={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.role\n\t\t\t\t\t\t\t\t\t\t\t: 'menuitem'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdisabled={ control.isDisabled }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ control.title }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) }\n\t\t\t\t\t</NavigableMenu>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default DropdownMenu;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.DropdownSubMenuTrigger = exports.DropdownSubMenu = exports.DropdownMenuSeparator = exports.DropdownMenuRadioItem = exports.DropdownMenuRadioGroup = exports.DropdownMenuLabel = exports.DropdownMenuItem = exports.DropdownMenuGroup = exports.DropdownMenuCheckboxItem = exports.DropdownMenu = void 0;
|
|
9
|
+
|
|
10
|
+
var _element = require("@wordpress/element");
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var DropdownMenuPrimitive = _interopRequireWildcard(require("@radix-ui/react-dropdown-menu"));
|
|
15
|
+
|
|
16
|
+
var _i18n = require("@wordpress/i18n");
|
|
17
|
+
|
|
18
|
+
var _icons = require("@wordpress/icons");
|
|
19
|
+
|
|
20
|
+
var _primitives = require("@wordpress/primitives");
|
|
21
|
+
|
|
22
|
+
var _icon = _interopRequireDefault(require("../icon"));
|
|
23
|
+
|
|
24
|
+
var DropdownMenuStyled = _interopRequireWildcard(require("./styles"));
|
|
25
|
+
|
|
26
|
+
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); }
|
|
27
|
+
|
|
28
|
+
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; }
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* External dependencies
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* WordPress dependencies
|
|
36
|
+
*/
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Internal dependencies
|
|
40
|
+
*/
|
|
41
|
+
// Menu content's side padding + 4px
|
|
42
|
+
const SUB_MENU_OFFSET_SIDE = 12; // Opposite amount of the top padding of the menu item
|
|
43
|
+
|
|
44
|
+
const SUB_MENU_OFFSET_ALIGN = -8;
|
|
45
|
+
/**
|
|
46
|
+
* `DropdownMenu` displays a menu to the user (such as a set of actions
|
|
47
|
+
* or functions) triggered by a button.
|
|
48
|
+
*/
|
|
49
|
+
|
|
50
|
+
const DropdownMenu = _ref => {
|
|
51
|
+
let {
|
|
52
|
+
// Root props
|
|
53
|
+
defaultOpen,
|
|
54
|
+
open,
|
|
55
|
+
onOpenChange,
|
|
56
|
+
modal = true,
|
|
57
|
+
// Content positioning props
|
|
58
|
+
side = 'bottom',
|
|
59
|
+
sideOffset = 0,
|
|
60
|
+
align = 'center',
|
|
61
|
+
alignOffset = 0,
|
|
62
|
+
// Render props
|
|
63
|
+
children,
|
|
64
|
+
trigger
|
|
65
|
+
} = _ref;
|
|
66
|
+
return (0, _element.createElement)(DropdownMenuPrimitive.Root, {
|
|
67
|
+
defaultOpen: defaultOpen,
|
|
68
|
+
open: open,
|
|
69
|
+
onOpenChange: onOpenChange,
|
|
70
|
+
modal: modal,
|
|
71
|
+
dir: (0, _i18n.isRTL)() ? 'rtl' : 'ltr'
|
|
72
|
+
}, (0, _element.createElement)(DropdownMenuPrimitive.Trigger, {
|
|
73
|
+
asChild: true
|
|
74
|
+
}, trigger), (0, _element.createElement)(DropdownMenuPrimitive.Portal, null, (0, _element.createElement)(DropdownMenuStyled.Content, {
|
|
75
|
+
side: side,
|
|
76
|
+
align: align,
|
|
77
|
+
sideOffset: sideOffset,
|
|
78
|
+
alignOffset: alignOffset,
|
|
79
|
+
loop: true
|
|
80
|
+
}, children)));
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
exports.DropdownMenu = DropdownMenu;
|
|
84
|
+
|
|
85
|
+
const DropdownSubMenuTrigger = _ref2 => {
|
|
86
|
+
let {
|
|
87
|
+
prefix,
|
|
88
|
+
suffix = (0, _element.createElement)(DropdownMenuStyled.SubmenuRtlChevronIcon, {
|
|
89
|
+
icon: _icons.chevronRightSmall,
|
|
90
|
+
size: 24
|
|
91
|
+
}),
|
|
92
|
+
children
|
|
93
|
+
} = _ref2;
|
|
94
|
+
return (0, _element.createElement)(_element.Fragment, null, prefix && (0, _element.createElement)(DropdownMenuStyled.ItemPrefixWrapper, null, prefix), children, suffix && (0, _element.createElement)(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
exports.DropdownSubMenuTrigger = DropdownSubMenuTrigger;
|
|
98
|
+
|
|
99
|
+
const DropdownSubMenu = _ref3 => {
|
|
100
|
+
let {
|
|
101
|
+
// Sub props
|
|
102
|
+
defaultOpen,
|
|
103
|
+
open,
|
|
104
|
+
onOpenChange,
|
|
105
|
+
// Sub trigger props
|
|
106
|
+
disabled,
|
|
107
|
+
textValue,
|
|
108
|
+
// Render props
|
|
109
|
+
children,
|
|
110
|
+
trigger
|
|
111
|
+
} = _ref3;
|
|
112
|
+
return (0, _element.createElement)(DropdownMenuPrimitive.Sub, {
|
|
113
|
+
defaultOpen: defaultOpen,
|
|
114
|
+
open: open,
|
|
115
|
+
onOpenChange: onOpenChange
|
|
116
|
+
}, (0, _element.createElement)(DropdownMenuStyled.SubTrigger, {
|
|
117
|
+
disabled: disabled,
|
|
118
|
+
textValue: textValue
|
|
119
|
+
}, trigger), (0, _element.createElement)(DropdownMenuPrimitive.Portal, null, (0, _element.createElement)(DropdownMenuStyled.SubContent, {
|
|
120
|
+
loop: true,
|
|
121
|
+
sideOffset: SUB_MENU_OFFSET_SIDE,
|
|
122
|
+
alignOffset: SUB_MENU_OFFSET_ALIGN
|
|
123
|
+
}, children)));
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
exports.DropdownSubMenu = DropdownSubMenu;
|
|
127
|
+
|
|
128
|
+
const DropdownMenuLabel = props => (0, _element.createElement)(DropdownMenuStyled.Label, props);
|
|
129
|
+
|
|
130
|
+
exports.DropdownMenuLabel = DropdownMenuLabel;
|
|
131
|
+
|
|
132
|
+
const DropdownMenuGroup = props => (0, _element.createElement)(DropdownMenuPrimitive.Group, props);
|
|
133
|
+
|
|
134
|
+
exports.DropdownMenuGroup = DropdownMenuGroup;
|
|
135
|
+
const DropdownMenuItem = (0, _element.forwardRef)((_ref4, forwardedRef) => {
|
|
136
|
+
let {
|
|
137
|
+
children,
|
|
138
|
+
prefix,
|
|
139
|
+
suffix,
|
|
140
|
+
...props
|
|
141
|
+
} = _ref4;
|
|
142
|
+
return (0, _element.createElement)(DropdownMenuStyled.Item, (0, _extends2.default)({}, props, {
|
|
143
|
+
ref: forwardedRef
|
|
144
|
+
}), prefix && (0, _element.createElement)(DropdownMenuStyled.ItemPrefixWrapper, null, prefix), children, suffix && (0, _element.createElement)(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
|
|
145
|
+
});
|
|
146
|
+
exports.DropdownMenuItem = DropdownMenuItem;
|
|
147
|
+
|
|
148
|
+
const DropdownMenuCheckboxItem = _ref5 => {
|
|
149
|
+
let {
|
|
150
|
+
children,
|
|
151
|
+
checked = false,
|
|
152
|
+
suffix,
|
|
153
|
+
...props
|
|
154
|
+
} = _ref5;
|
|
155
|
+
return (0, _element.createElement)(DropdownMenuStyled.CheckboxItem, (0, _extends2.default)({}, props, {
|
|
156
|
+
checked: checked
|
|
157
|
+
}), (0, _element.createElement)(DropdownMenuStyled.ItemPrefixWrapper, null, (0, _element.createElement)(DropdownMenuStyled.ItemIndicator, null, (checked === 'indeterminate' || checked === true) && (0, _element.createElement)(_icon.default, {
|
|
158
|
+
icon: checked === 'indeterminate' ? _icons.lineSolid : _icons.check,
|
|
159
|
+
size: 24
|
|
160
|
+
}))), children, suffix && (0, _element.createElement)(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
|
|
164
|
+
|
|
165
|
+
const DropdownMenuRadioGroup = props => (0, _element.createElement)(DropdownMenuPrimitive.RadioGroup, props);
|
|
166
|
+
|
|
167
|
+
exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
|
|
168
|
+
const radioDot = (0, _element.createElement)(_primitives.SVG, {
|
|
169
|
+
viewBox: "0 0 24 24",
|
|
170
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
171
|
+
}, (0, _element.createElement)(_primitives.Circle, {
|
|
172
|
+
cx: 12,
|
|
173
|
+
cy: 12,
|
|
174
|
+
r: 3,
|
|
175
|
+
fill: "currentColor"
|
|
176
|
+
}));
|
|
177
|
+
|
|
178
|
+
const DropdownMenuRadioItem = _ref6 => {
|
|
179
|
+
let {
|
|
180
|
+
children,
|
|
181
|
+
suffix,
|
|
182
|
+
...props
|
|
183
|
+
} = _ref6;
|
|
184
|
+
return (0, _element.createElement)(DropdownMenuStyled.RadioItem, props, (0, _element.createElement)(DropdownMenuStyled.ItemPrefixWrapper, null, (0, _element.createElement)(DropdownMenuStyled.ItemIndicator, null, (0, _element.createElement)(_icon.default, {
|
|
185
|
+
icon: radioDot,
|
|
186
|
+
size: 22
|
|
187
|
+
}))), children, suffix && (0, _element.createElement)(DropdownMenuStyled.ItemSuffixWrapper, null, suffix));
|
|
188
|
+
};
|
|
189
|
+
|
|
190
|
+
exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
|
|
191
|
+
|
|
192
|
+
const DropdownMenuSeparator = props => (0, _element.createElement)(DropdownMenuStyled.Separator, props);
|
|
193
|
+
|
|
194
|
+
exports.DropdownMenuSeparator = DropdownMenuSeparator;
|
|
195
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["@wordpress/components/src/dropdown-menu-v2/index.tsx"],"names":["SUB_MENU_OFFSET_SIDE","SUB_MENU_OFFSET_ALIGN","DropdownMenu","defaultOpen","open","onOpenChange","modal","side","sideOffset","align","alignOffset","children","trigger","DropdownSubMenuTrigger","prefix","suffix","chevronRightSmall","DropdownSubMenu","disabled","textValue","DropdownMenuLabel","props","DropdownMenuGroup","DropdownMenuItem","forwardedRef","DropdownMenuCheckboxItem","checked","lineSolid","check","DropdownMenuRadioGroup","radioDot","DropdownMenuRadioItem","DropdownMenuSeparator"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\nimport { check, chevronRightSmall, lineSolid } from '@wordpress/icons';\nimport { SVG, Circle } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport * as DropdownMenuStyled from './styles';\nimport type {\n\tDropdownMenuProps,\n\tDropdownSubMenuProps,\n\tDropdownMenuItemProps,\n\tDropdownMenuLabelProps,\n\tDropdownMenuGroupProps,\n\tDropdownMenuCheckboxItemProps,\n\tDropdownMenuRadioGroupProps,\n\tDropdownMenuRadioItemProps,\n\tDropdownMenuSeparatorProps,\n\tDropdownSubMenuTriggerProps,\n} from './types';\n\n// Menu content's side padding + 4px\nconst SUB_MENU_OFFSET_SIDE = 12;\n// Opposite amount of the top padding of the menu item\nconst SUB_MENU_OFFSET_ALIGN = -8;\n\n/**\n * `DropdownMenu` displays a menu to the user (such as a set of actions\n * or functions) triggered by a button.\n */\nexport const DropdownMenu = ( {\n\t// Root props\n\tdefaultOpen,\n\topen,\n\tonOpenChange,\n\tmodal = true,\n\t// Content positioning props\n\tside = 'bottom',\n\tsideOffset = 0,\n\talign = 'center',\n\talignOffset = 0,\n\t// Render props\n\tchildren,\n\ttrigger,\n}: DropdownMenuProps ) => {\n\treturn (\n\t\t<DropdownMenuPrimitive.Root\n\t\t\tdefaultOpen={ defaultOpen }\n\t\t\topen={ open }\n\t\t\tonOpenChange={ onOpenChange }\n\t\t\tmodal={ modal }\n\t\t\tdir={ isRTL() ? 'rtl' : 'ltr' }\n\t\t>\n\t\t\t<DropdownMenuPrimitive.Trigger asChild>\n\t\t\t\t{ trigger }\n\t\t\t</DropdownMenuPrimitive.Trigger>\n\t\t\t<DropdownMenuPrimitive.Portal>\n\t\t\t\t<DropdownMenuStyled.Content\n\t\t\t\t\tside={ side }\n\t\t\t\t\talign={ align }\n\t\t\t\t\tsideOffset={ sideOffset }\n\t\t\t\t\talignOffset={ alignOffset }\n\t\t\t\t\tloop={ true }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</DropdownMenuStyled.Content>\n\t\t\t</DropdownMenuPrimitive.Portal>\n\t\t</DropdownMenuPrimitive.Root>\n\t);\n};\n\nexport const DropdownSubMenuTrigger = ( {\n\tprefix,\n\tsuffix = (\n\t\t<DropdownMenuStyled.SubmenuRtlChevronIcon\n\t\t\ticon={ chevronRightSmall }\n\t\t\tsize={ 24 }\n\t\t/>\n\t),\n\tchildren,\n}: DropdownSubMenuTriggerProps ) => {\n\treturn (\n\t\t<>\n\t\t\t{ prefix && (\n\t\t\t\t<DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t\t\t{ prefix }\n\t\t\t\t</DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t{ suffix && (\n\t\t\t\t<DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t\t\t{ suffix }\n\t\t\t\t</DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport const DropdownSubMenu = ( {\n\t// Sub props\n\tdefaultOpen,\n\topen,\n\tonOpenChange,\n\t// Sub trigger props\n\tdisabled,\n\ttextValue,\n\t// Render props\n\tchildren,\n\ttrigger,\n}: DropdownSubMenuProps ) => {\n\treturn (\n\t\t<DropdownMenuPrimitive.Sub\n\t\t\tdefaultOpen={ defaultOpen }\n\t\t\topen={ open }\n\t\t\tonOpenChange={ onOpenChange }\n\t\t>\n\t\t\t<DropdownMenuStyled.SubTrigger\n\t\t\t\tdisabled={ disabled }\n\t\t\t\ttextValue={ textValue }\n\t\t\t>\n\t\t\t\t{ trigger }\n\t\t\t</DropdownMenuStyled.SubTrigger>\n\t\t\t<DropdownMenuPrimitive.Portal>\n\t\t\t\t<DropdownMenuStyled.SubContent\n\t\t\t\t\tloop\n\t\t\t\t\tsideOffset={ SUB_MENU_OFFSET_SIDE }\n\t\t\t\t\talignOffset={ SUB_MENU_OFFSET_ALIGN }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</DropdownMenuStyled.SubContent>\n\t\t\t</DropdownMenuPrimitive.Portal>\n\t\t</DropdownMenuPrimitive.Sub>\n\t);\n};\n\nexport const DropdownMenuLabel = ( props: DropdownMenuLabelProps ) => (\n\t<DropdownMenuStyled.Label { ...props } />\n);\n\nexport const DropdownMenuGroup = ( props: DropdownMenuGroupProps ) => (\n\t<DropdownMenuPrimitive.Group { ...props } />\n);\n\nexport const DropdownMenuItem = forwardRef(\n\t(\n\t\t{ children, prefix, suffix, ...props }: DropdownMenuItemProps,\n\t\tforwardedRef: React.ForwardedRef< any >\n\t) => {\n\t\treturn (\n\t\t\t<DropdownMenuStyled.Item { ...props } ref={ forwardedRef }>\n\t\t\t\t{ prefix && (\n\t\t\t\t\t<DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t\t\t\t{ prefix }\n\t\t\t\t\t</DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ suffix && (\n\t\t\t\t\t<DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t\t\t\t{ suffix }\n\t\t\t\t\t</DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t\t) }\n\t\t\t</DropdownMenuStyled.Item>\n\t\t);\n\t}\n);\n\nexport const DropdownMenuCheckboxItem = ( {\n\tchildren,\n\tchecked = false,\n\tsuffix,\n\t...props\n}: DropdownMenuCheckboxItemProps ) => {\n\treturn (\n\t\t<DropdownMenuStyled.CheckboxItem { ...props } checked={ checked }>\n\t\t\t<DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t\t<DropdownMenuStyled.ItemIndicator>\n\t\t\t\t\t{ ( checked === 'indeterminate' || checked === true ) && (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\tchecked === 'indeterminate' ? lineSolid : check\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenuStyled.ItemIndicator>\n\t\t\t</DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t{ children }\n\t\t\t{ suffix && (\n\t\t\t\t<DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t\t\t{ suffix }\n\t\t\t\t</DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t) }\n\t\t</DropdownMenuStyled.CheckboxItem>\n\t);\n};\n\nexport const DropdownMenuRadioGroup = (\n\tprops: DropdownMenuRadioGroupProps\n) => <DropdownMenuPrimitive.RadioGroup { ...props } />;\n\nconst radioDot = (\n\t<SVG viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t<Circle cx={ 12 } cy={ 12 } r={ 3 } fill=\"currentColor\"></Circle>\n\t</SVG>\n);\n\nexport const DropdownMenuRadioItem = ( {\n\tchildren,\n\tsuffix,\n\t...props\n}: DropdownMenuRadioItemProps ) => {\n\treturn (\n\t\t<DropdownMenuStyled.RadioItem { ...props }>\n\t\t\t<DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t\t<DropdownMenuStyled.ItemIndicator>\n\t\t\t\t\t<Icon icon={ radioDot } size={ 22 } />\n\t\t\t\t</DropdownMenuStyled.ItemIndicator>\n\t\t\t</DropdownMenuStyled.ItemPrefixWrapper>\n\t\t\t{ children }\n\t\t\t{ suffix && (\n\t\t\t\t<DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t\t\t{ suffix }\n\t\t\t\t</DropdownMenuStyled.ItemSuffixWrapper>\n\t\t\t) }\n\t\t</DropdownMenuStyled.RadioItem>\n\t);\n};\n\nexport const DropdownMenuSeparator = ( props: DropdownMenuSeparatorProps ) => (\n\t<DropdownMenuStyled.Separator { ...props } />\n);\n"]}
|