@elliemae/ds-menu 2.2.0-alpha.4 → 3.0.0-next.2
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/cjs/Menu.js +181 -137
- package/cjs/MenuCombobox.js +53 -67
- package/cjs/MenuContext.js +11 -38
- package/cjs/MenuItems/CheckboxGroup.js +42 -49
- package/cjs/MenuItems/MenuItem.js +163 -116
- package/cjs/MenuItems/MenuItemCheckable.js +108 -77
- package/cjs/MenuItems/MenuItemCheckbox.js +41 -47
- package/cjs/MenuItems/MenuItemRadio.js +38 -50
- package/cjs/MenuItems/RadioGroup.js +39 -48
- package/cjs/MenuItems/SearchableGroup.js +92 -88
- package/cjs/MenuItems/SearchableList.js +95 -92
- package/cjs/MenuItems/SelectionGroup.js +90 -85
- package/cjs/MenuItems/Separator.js +40 -55
- package/cjs/MenuItems/SubMenu.js +160 -143
- package/cjs/MenuItems/menuItemFactory.js +68 -38
- package/cjs/VirtualMenuList.js +39 -69
- package/cjs/index.js +36 -63
- package/cjs/utils/useHeightByAmountOfItems.js +14 -43
- package/esm/Menu.js +149 -91
- package/esm/MenuCombobox.js +45 -38
- package/esm/MenuContext.js +5 -9
- package/esm/MenuItems/CheckboxGroup.js +31 -19
- package/esm/MenuItems/MenuItem.js +148 -84
- package/esm/MenuItems/MenuItemCheckable.js +96 -47
- package/esm/MenuItems/MenuItemCheckbox.js +33 -18
- package/esm/MenuItems/MenuItemRadio.js +28 -20
- package/esm/MenuItems/RadioGroup.js +28 -18
- package/esm/MenuItems/SearchableGroup.js +76 -53
- package/esm/MenuItems/SearchableList.js +82 -59
- package/esm/MenuItems/SelectionGroup.js +78 -54
- package/esm/MenuItems/Separator.js +29 -26
- package/esm/MenuItems/SubMenu.js +140 -107
- package/esm/MenuItems/menuItemFactory.js +60 -10
- package/esm/VirtualMenuList.js +32 -39
- package/esm/index.js +13 -34
- package/esm/utils/useHeightByAmountOfItems.js +11 -13
- package/package.json +11 -19
- package/types/Menu.d.ts +2 -3
- package/types/MenuContext.d.ts +2 -3
- package/types/MenuItems/CheckboxGroup.d.ts +5 -5
- package/types/MenuItems/MenuItem.d.ts +5 -5
- package/types/MenuItems/MenuItemCheckable.d.ts +15 -15
- package/types/MenuItems/MenuItemCheckbox.d.ts +2 -3
- package/types/MenuItems/MenuItemRadio.d.ts +5 -5
- package/types/MenuItems/RadioGroup.d.ts +5 -5
- package/types/MenuItems/SearchableGroup.d.ts +3 -3
- package/types/MenuItems/SearchableList.d.ts +16 -16
- package/types/MenuItems/SelectionGroup.d.ts +16 -16
- package/types/MenuItems/Separator.d.ts +1 -2
- package/types/MenuItems/SubMenu.d.ts +18 -18
- package/types/MenuItems/menuItemFactory.d.ts +3 -2
- package/types/VirtualMenuList.d.ts +1 -3
- package/types/index.d.ts +2 -3
- package/types/utils/useHeightByAmountOfItems.d.ts +1 -3
- package/cjs/Menu.js.map +0 -7
- package/cjs/MenuCombobox.js.map +0 -7
- package/cjs/MenuContext.js.map +0 -7
- package/cjs/MenuExports.js +0 -28
- package/cjs/MenuExports.js.map +0 -7
- package/cjs/MenuItems/CheckboxGroup.js.map +0 -7
- package/cjs/MenuItems/MenuItem.js.map +0 -7
- package/cjs/MenuItems/MenuItemCheckable.js.map +0 -7
- package/cjs/MenuItems/MenuItemCheckbox.js.map +0 -7
- package/cjs/MenuItems/MenuItemRadio.js.map +0 -7
- package/cjs/MenuItems/RadioGroup.js.map +0 -7
- package/cjs/MenuItems/SearchableGroup.js.map +0 -7
- package/cjs/MenuItems/SearchableList.js.map +0 -7
- package/cjs/MenuItems/SelectionGroup.js.map +0 -7
- package/cjs/MenuItems/Separator.js.map +0 -7
- package/cjs/MenuItems/SubMenu.js.map +0 -7
- package/cjs/MenuItems/menuItemFactory.js.map +0 -7
- package/cjs/MenuItems/renderMenuItems.js +0 -53
- package/cjs/MenuItems/renderMenuItems.js.map +0 -7
- package/cjs/VirtualMenuList.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/utils/useHeightByAmountOfItems.js.map +0 -7
- package/esm/Menu.js.map +0 -7
- package/esm/MenuCombobox.js.map +0 -7
- package/esm/MenuContext.js.map +0 -7
- package/esm/MenuExports.js +0 -3
- package/esm/MenuExports.js.map +0 -7
- package/esm/MenuItems/CheckboxGroup.js.map +0 -7
- package/esm/MenuItems/MenuItem.js.map +0 -7
- package/esm/MenuItems/MenuItemCheckable.js.map +0 -7
- package/esm/MenuItems/MenuItemCheckbox.js.map +0 -7
- package/esm/MenuItems/MenuItemRadio.js.map +0 -7
- package/esm/MenuItems/RadioGroup.js.map +0 -7
- package/esm/MenuItems/SearchableGroup.js.map +0 -7
- package/esm/MenuItems/SearchableList.js.map +0 -7
- package/esm/MenuItems/SelectionGroup.js.map +0 -7
- package/esm/MenuItems/Separator.js.map +0 -7
- package/esm/MenuItems/SubMenu.js.map +0 -7
- package/esm/MenuItems/menuItemFactory.js.map +0 -7
- package/esm/MenuItems/renderMenuItems.js +0 -24
- package/esm/MenuItems/renderMenuItems.js.map +0 -7
- package/esm/VirtualMenuList.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/utils/useHeightByAmountOfItems.js.map +0 -7
- package/types/MenuExports.d.ts +0 -1
- package/types/MenuItems/renderMenuItems.d.ts +0 -1
|
@@ -1,77 +1,98 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
10
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
11
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
12
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
14
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
15
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
16
|
+
var React = require('react');
|
|
17
|
+
var reactDesc = require('react-desc');
|
|
18
|
+
var lodash = require('lodash');
|
|
19
|
+
var dsClassnames = require('@elliemae/ds-classnames');
|
|
20
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
21
|
+
var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
|
|
22
|
+
var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
|
|
23
|
+
var menuItemFactory = require('./menuItemFactory.js');
|
|
24
|
+
var SubMenu = require('./SubMenu.js');
|
|
25
|
+
var MenuContext = require('../MenuContext.js');
|
|
26
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
27
|
+
|
|
28
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
29
|
+
|
|
30
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
31
|
+
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
32
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
33
|
+
var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
|
|
34
|
+
|
|
35
|
+
const _excluded = ["innerRef", "as", "role", "leftAddon", "rightAddon", "disabledAddonInactive", "label", "children", "tabIndex", "onKeyDown", "fixedItem", "noAddon", "disabled", "customRenderer", "maxOption", "closeMenu", "style"];
|
|
36
|
+
|
|
37
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
38
|
+
|
|
39
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
40
|
+
|
|
41
|
+
const noop = () => null;
|
|
42
|
+
|
|
43
|
+
const blockName = 'menu-item';
|
|
44
|
+
const Content = dsClassnames.aggregatedClasses('div')(blockName, 'content');
|
|
45
|
+
const Addon = dsClassnames.aggregatedClasses('div')(blockName, 'addon', _ref => {
|
|
46
|
+
let {
|
|
47
|
+
empty,
|
|
48
|
+
fixedItem
|
|
49
|
+
} = _ref;
|
|
50
|
+
return {
|
|
51
|
+
empty,
|
|
52
|
+
fixedItem
|
|
26
53
|
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var MenuItem_exports = {};
|
|
29
|
-
__export(MenuItem_exports, {
|
|
30
|
-
DSMenuItemWithSchema: () => DSMenuItemWithSchema,
|
|
31
|
-
MenuItem: () => MenuItem,
|
|
32
|
-
default: () => MenuItem_default
|
|
33
54
|
});
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
var import_ds_truncated_tooltip_text = require("@elliemae/ds-truncated-tooltip-text");
|
|
42
|
-
var import_MenuContext = require("../MenuContext");
|
|
43
|
-
var import_menuItemFactory = require("./menuItemFactory");
|
|
44
|
-
var import_renderMenuItems = require("./renderMenuItems");
|
|
45
|
-
const noop = () => null;
|
|
46
|
-
const blockName = "menu-item";
|
|
47
|
-
const Content = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "content");
|
|
48
|
-
const Addon = (0, import_ds_classnames.aggregatedClasses)("div")(blockName, "addon", ({ empty, fixedItem }) => ({ empty, fixedItem }));
|
|
49
|
-
const renderAddon = (addon, fixedItem, addonId) => /* @__PURE__ */ import_react.default.createElement(Addon, {
|
|
50
|
-
key: addonId,
|
|
51
|
-
classProps: { fixedItem }
|
|
52
|
-
}, addon);
|
|
55
|
+
|
|
56
|
+
const renderAddon = (addon, fixedItem, addonId) => /*#__PURE__*/_jsx__default["default"](Addon, {
|
|
57
|
+
classProps: {
|
|
58
|
+
fixedItem
|
|
59
|
+
}
|
|
60
|
+
}, addonId, addon);
|
|
61
|
+
|
|
53
62
|
const renderAddons = (addons, fixedItem) => Array.isArray(addons) ? addons.map(renderAddon) : renderAddon(addons, fixedItem);
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
|
|
64
|
+
const Wrapper = dsClassnames.aggregatedClasses('li')(blockName, null, _ref2 => {
|
|
65
|
+
let {
|
|
66
|
+
disabled,
|
|
67
|
+
disabledAddonInactive,
|
|
68
|
+
customRenderer,
|
|
69
|
+
fixedItem,
|
|
70
|
+
type
|
|
71
|
+
} = _ref2;
|
|
72
|
+
return {
|
|
73
|
+
disabled,
|
|
74
|
+
disabledAddonInactive,
|
|
75
|
+
customRenderer,
|
|
76
|
+
fixedItem,
|
|
77
|
+
["menu-type-".concat(type)]: type
|
|
78
|
+
};
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
const calculateSize = function () {
|
|
82
|
+
let length = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
83
|
+
if (length > 45) return 45 * 7;
|
|
64
84
|
return length * 7;
|
|
65
85
|
};
|
|
66
|
-
|
|
86
|
+
|
|
87
|
+
function MenuItem(props) {
|
|
67
88
|
const {
|
|
68
89
|
innerRef,
|
|
69
|
-
as =
|
|
70
|
-
role =
|
|
90
|
+
as = 'li',
|
|
91
|
+
role = 'menuitem',
|
|
71
92
|
leftAddon = null,
|
|
72
|
-
rightAddon =
|
|
73
|
-
disabledAddonInactive =
|
|
74
|
-
label =
|
|
93
|
+
rightAddon = undefined,
|
|
94
|
+
disabledAddonInactive = undefined,
|
|
95
|
+
label = undefined,
|
|
75
96
|
children,
|
|
76
97
|
tabIndex = -1,
|
|
77
98
|
onKeyDown = noop,
|
|
@@ -81,28 +102,33 @@ const MenuItem = (props2) => {
|
|
|
81
102
|
customRenderer,
|
|
82
103
|
maxOption,
|
|
83
104
|
closeMenu,
|
|
84
|
-
style
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
const
|
|
89
|
-
|
|
105
|
+
style
|
|
106
|
+
} = props,
|
|
107
|
+
otherProps = _objectWithoutProperties__default["default"](props, _excluded);
|
|
108
|
+
|
|
109
|
+
const menuCxt = React.useContext(MenuContext);
|
|
110
|
+
const ref = React.useRef(null);
|
|
111
|
+
FocusGroup.useFocusGroupItem(ref);
|
|
112
|
+
|
|
90
113
|
if (otherProps.subItems) {
|
|
91
|
-
return
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
}
|
|
114
|
+
return /*#__PURE__*/jsxRuntime.jsx(SubMenu["default"], _objectSpread(_objectSpread({}, props), {}, {
|
|
115
|
+
closeMenu: menuCxt.closeMenu,
|
|
116
|
+
children: menuItemFactory.renderMenuItems(otherProps.subItems)
|
|
117
|
+
}));
|
|
95
118
|
}
|
|
96
|
-
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
|
|
119
|
+
|
|
120
|
+
const wrapperProps = React.useMemo(() => lodash.omit(otherProps, ['icon']), [otherProps]);
|
|
121
|
+
|
|
122
|
+
const onClick = function () {
|
|
123
|
+
if (wrapperProps.onClick) wrapperProps.onClick(...arguments);
|
|
124
|
+
|
|
100
125
|
if (wrapperProps.closeOnClick && menuCxt.closeMenu) {
|
|
101
|
-
menuCxt.closeMenu(...
|
|
126
|
+
menuCxt.closeMenu(...arguments);
|
|
102
127
|
}
|
|
103
128
|
};
|
|
104
|
-
|
|
105
|
-
|
|
129
|
+
|
|
130
|
+
return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, _objectSpread(_objectSpread({
|
|
131
|
+
as: as,
|
|
106
132
|
classProps: {
|
|
107
133
|
disabled,
|
|
108
134
|
disabledAddonInactive,
|
|
@@ -111,46 +137,67 @@ const MenuItem = (props2) => {
|
|
|
111
137
|
type: otherProps.type
|
|
112
138
|
},
|
|
113
139
|
id: otherProps.id,
|
|
114
|
-
innerRef: otherProps.type !==
|
|
115
|
-
onKeyDown: !fixedItem &&
|
|
116
|
-
if (e.key ===
|
|
140
|
+
innerRef: otherProps.type !== 'disabled' ? dsUtilities.mergeRefs(innerRef, ref) : innerRef,
|
|
141
|
+
onKeyDown: !fixedItem && dsUtilities.runAll(e => {
|
|
142
|
+
if (e.key === ' ' || e.key === 'Enter') {
|
|
117
143
|
e.preventDefault();
|
|
118
|
-
e.target.dispatchEvent(new MouseEvent(
|
|
144
|
+
e.target.dispatchEvent(new MouseEvent('click', {
|
|
119
145
|
view: window,
|
|
120
146
|
bubbles: true,
|
|
121
147
|
cancelable: false
|
|
122
148
|
}));
|
|
123
149
|
}
|
|
124
150
|
}, onKeyDown),
|
|
125
|
-
role,
|
|
126
|
-
style,
|
|
127
|
-
tabIndex
|
|
128
|
-
|
|
129
|
-
onClick
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
};
|
|
151
|
+
role: role,
|
|
152
|
+
style: style,
|
|
153
|
+
tabIndex: tabIndex
|
|
154
|
+
}, wrapperProps), {}, {
|
|
155
|
+
onClick: onClick,
|
|
156
|
+
children: [!noAddon && renderAddons(leftAddon, fixedItem), label && /*#__PURE__*/_jsx__default["default"](Content, {
|
|
157
|
+
style: maxOption > 0 ? {
|
|
158
|
+
width: "".concat(calculateSize(maxOption), "px"),
|
|
159
|
+
maxWidth: "".concat(calculateSize(maxOption), "px")
|
|
160
|
+
} : undefined
|
|
161
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
|
|
162
|
+
value: label
|
|
163
|
+
})), customRenderer, rightAddon && renderAddons(rightAddon), children]
|
|
164
|
+
}));
|
|
165
|
+
}
|
|
166
|
+
|
|
139
167
|
const props = {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
168
|
+
/** Renders the MenuItem with a specific html element */
|
|
169
|
+
as: reactDesc.PropTypes.element.description('Renders the MenuItem with a specific html element'),
|
|
170
|
+
|
|
171
|
+
/**
|
|
172
|
+
* reference to the component
|
|
173
|
+
*/
|
|
174
|
+
innerRef: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.shape({
|
|
175
|
+
current: reactDesc.PropTypes.any
|
|
176
|
+
})]).description('reference to the component'),
|
|
177
|
+
|
|
178
|
+
/** Renders the passed element to the left */
|
|
179
|
+
leftAddon: reactDesc.PropTypes.element.description('Renders the passed element to the left'),
|
|
180
|
+
|
|
181
|
+
/** Renders the passed element to the right */
|
|
182
|
+
rightAddon: reactDesc.PropTypes.element.description('Renders the passed element to the right'),
|
|
183
|
+
|
|
184
|
+
/** Label for the menu item */
|
|
185
|
+
label: reactDesc.PropTypes.string.description('Label for the menu item'),
|
|
186
|
+
|
|
187
|
+
/** style object for menu item wrapper */
|
|
188
|
+
style: reactDesc.PropTypes.object.description('style object for menu item wrapper'),
|
|
189
|
+
|
|
190
|
+
/** disable menu item */
|
|
191
|
+
disabled: reactDesc.PropTypes.bool.description('disable menu item'),
|
|
192
|
+
|
|
193
|
+
/** HTML tabindex to manage focus order */
|
|
194
|
+
tabindex: reactDesc.PropTypes.number.description('HTML tabindex to manage focus order'),
|
|
195
|
+
|
|
196
|
+
/** a11y role */
|
|
197
|
+
role: reactDesc.PropTypes.string.description('a11y role')
|
|
149
198
|
};
|
|
150
|
-
|
|
151
|
-
(0, import_menuItemFactory.registerMenuItem)("menuitem", MenuItem);
|
|
152
|
-
const DSMenuItemWithSchema = (0, import_react_desc.describe)(MenuItem);
|
|
199
|
+
const DSMenuItemWithSchema = reactDesc.describe(MenuItem);
|
|
153
200
|
DSMenuItemWithSchema.propTypes = props;
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
201
|
+
|
|
202
|
+
exports.DSMenuItemWithSchema = DSMenuItemWithSchema;
|
|
203
|
+
exports["default"] = MenuItem;
|
|
@@ -1,88 +1,119 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
39
|
-
var import_MenuItem = require("./MenuItem");
|
|
40
|
-
function useCheckable({ checked }) {
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
10
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
11
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
12
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
13
|
+
require('react');
|
|
14
|
+
var reactDesc = require('react-desc');
|
|
15
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
16
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
17
|
+
var MenuItem = require('./MenuItem.js');
|
|
18
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
19
|
+
|
|
20
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
21
|
+
|
|
22
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
23
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
24
|
+
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
25
|
+
|
|
26
|
+
var _div;
|
|
27
|
+
|
|
28
|
+
const _excluded = ["role", "checked", "name", "checkIcon", "children", "leftAddon", "item"];
|
|
29
|
+
|
|
30
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
31
|
+
|
|
32
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
33
|
+
|
|
34
|
+
function useCheckable(_ref) {
|
|
35
|
+
let {
|
|
36
|
+
checked
|
|
37
|
+
} = _ref;
|
|
41
38
|
return {
|
|
42
39
|
checked,
|
|
43
|
-
|
|
40
|
+
'aria-checked': checked
|
|
44
41
|
};
|
|
45
42
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
43
|
+
/**
|
|
44
|
+
* Reuses the same props as the MenuItem
|
|
45
|
+
*
|
|
46
|
+
* @param root0
|
|
47
|
+
* @param root0.role
|
|
48
|
+
* @param root0.checked
|
|
49
|
+
* @param root0.name
|
|
50
|
+
* @param root0.checkIcon
|
|
51
|
+
* @param root0.children
|
|
52
|
+
* @param root0.leftAddon
|
|
53
|
+
* @param root0.item
|
|
54
|
+
*/
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
function MenuItemCheckable(_ref2) {
|
|
58
|
+
let {
|
|
59
|
+
role = 'menuitemcheckbox',
|
|
60
|
+
checked = false,
|
|
61
|
+
name = '',
|
|
62
|
+
checkIcon = /*#__PURE__*/_jsx__default["default"](dsIcons.Checkmark, {
|
|
63
|
+
color: ['brand-primary', 600]
|
|
64
|
+
}),
|
|
65
|
+
// eslint-disable-next-line react/prop-types
|
|
66
|
+
children,
|
|
67
|
+
leftAddon,
|
|
68
|
+
item = undefined
|
|
69
|
+
} = _ref2,
|
|
70
|
+
otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded);
|
|
71
|
+
|
|
72
|
+
const checkableProps = useCheckable({
|
|
73
|
+
checked,
|
|
74
|
+
name
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
const handleClick = () => dsUtilities.runAll(otherProps.onClick, checkableProps.onClick)({
|
|
78
|
+
target: {
|
|
79
|
+
value: name,
|
|
80
|
+
checked
|
|
81
|
+
}
|
|
82
|
+
}, item);
|
|
83
|
+
|
|
84
|
+
const checkAddon = leftAddon || (checkableProps.checked ? /*#__PURE__*/_jsx__default["default"]("div", {
|
|
61
85
|
className: "checkable-mark"
|
|
62
|
-
}, checkIcon) :
|
|
63
|
-
return
|
|
64
|
-
|
|
65
|
-
...otherProps,
|
|
66
|
-
...checkableProps,
|
|
67
|
-
customRenderer: item && item.customRenderer ? item.customRenderer : () => {
|
|
68
|
-
},
|
|
86
|
+
}, void 0, checkIcon) : _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})));
|
|
87
|
+
return /*#__PURE__*/jsxRuntime.jsx(MenuItem["default"], _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, item), otherProps), checkableProps), {}, {
|
|
88
|
+
customRenderer: item && item.customRenderer ? item.customRenderer : () => {},
|
|
69
89
|
items: otherProps.subItems,
|
|
70
90
|
leftAddon: checkAddon,
|
|
71
91
|
onClick: handleClick,
|
|
72
|
-
role
|
|
73
|
-
});
|
|
74
|
-
}
|
|
92
|
+
role: role
|
|
93
|
+
}));
|
|
94
|
+
}
|
|
95
|
+
|
|
75
96
|
const props = {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
item
|
|
80
|
-
|
|
81
|
-
|
|
97
|
+
/** Whether the item is checked or not */
|
|
98
|
+
checked: reactDesc.PropTypes.bool.description('Whether the item is checked or not'),
|
|
99
|
+
|
|
100
|
+
/** A custom item when the item is checked */
|
|
101
|
+
checkIcon: reactDesc.PropTypes.element.description('A custom item when the item is checked'),
|
|
102
|
+
|
|
103
|
+
/** form field name */
|
|
104
|
+
name: reactDesc.PropTypes.string.description('form field name'),
|
|
105
|
+
|
|
106
|
+
/** menu item object props */
|
|
107
|
+
item: reactDesc.PropTypes.object.description('menu item object props'),
|
|
108
|
+
|
|
109
|
+
/** a11y role */
|
|
110
|
+
role: reactDesc.PropTypes.string.description('a11y role'),
|
|
111
|
+
|
|
112
|
+
/** left addon component */
|
|
113
|
+
leftAddon: reactDesc.PropTypes.node.description('left addon component')
|
|
82
114
|
};
|
|
83
|
-
|
|
84
|
-
const DSMenuItemCheckeableWithSchema = (0, import_react_desc.describe)(MenuItemCheckable);
|
|
115
|
+
const DSMenuItemCheckeableWithSchema = reactDesc.describe(MenuItemCheckable);
|
|
85
116
|
DSMenuItemCheckeableWithSchema.propTypes = props;
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
117
|
+
|
|
118
|
+
exports.DSMenuItemCheckeableWithSchema = DSMenuItemCheckeableWithSchema;
|
|
119
|
+
exports["default"] = MenuItemCheckable;
|
|
@@ -1,48 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
MenuItemCheckbox: () => MenuItemCheckbox,
|
|
31
|
-
default: () => MenuItemCheckbox_default
|
|
32
|
-
});
|
|
33
|
-
var React = __toESM(require("react"));
|
|
34
|
-
var import_react = __toESM(require("react"));
|
|
35
|
-
var import_ds_form = require("@elliemae/ds-form");
|
|
36
|
-
var import_MenuItemCheckable = require("./MenuItemCheckable");
|
|
37
|
-
var import_menuItemFactory = require("./menuItemFactory");
|
|
38
|
-
const MenuItemCheckbox = ({ checked, ...rest }) => /* @__PURE__ */ import_react.default.createElement(import_MenuItemCheckable.MenuItemCheckable, {
|
|
39
|
-
...rest,
|
|
40
|
-
leftAddon: /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSCheckbox, {
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
4
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
8
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
9
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
10
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
11
|
+
require('react');
|
|
12
|
+
var dsForm = require('@elliemae/ds-form');
|
|
13
|
+
var MenuItemCheckable = require('./MenuItemCheckable.js');
|
|
14
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
+
|
|
18
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
19
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
20
|
+
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
21
|
+
|
|
22
|
+
const _excluded = ["checked"];
|
|
23
|
+
|
|
24
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
25
|
+
|
|
26
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
27
|
+
|
|
28
|
+
function MenuItemCheckbox(_ref) {
|
|
29
|
+
let {
|
|
41
30
|
checked
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
31
|
+
} = _ref,
|
|
32
|
+
rest = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
33
|
+
|
|
34
|
+
return /*#__PURE__*/jsxRuntime.jsx(MenuItemCheckable["default"], _objectSpread(_objectSpread({}, rest), {}, {
|
|
35
|
+
leftAddon: /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
|
|
36
|
+
checked: checked
|
|
37
|
+
}),
|
|
38
|
+
role: "menuitemcheckbox"
|
|
39
|
+
}));
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
module.exports = MenuItemCheckbox;
|