@occmundial/occ-atomic 3.0.0-beta.6 → 3.0.0-beta.61
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +484 -0
- package/build/Avatar/Avatar.js +69 -21
- package/build/Avatar/Avatar.test.js +15 -8
- package/build/Avatar/AvatarContent/AvatarContent.js +61 -21
- package/build/Avatar/AvatarContent/AvatarContent.test.js +4 -18
- package/build/Avatar/AvatarContent/__snapshots__/AvatarContent.test.js.snap +75 -15
- package/build/Avatar/AvatarContent/styles.js +88 -21
- package/build/Avatar/__snapshots__/Avatar.test.js.snap +11 -2
- package/build/Avatar/styles.js +18 -7
- package/build/Banner/Banner.js +30 -40
- package/build/Banner/Banner.test.js +64 -17
- package/build/Banner/__snapshots__/Banner.test.js.snap +0 -28
- package/build/Banner/index.js +1 -6
- package/build/Button/Button.js +1 -1
- package/build/Button/Button.test.js +0 -11
- package/build/Button/__snapshots__/Button.test.js.snap +54 -58
- package/build/Button/styles.js +42 -75
- package/build/Checkbox/Checkbox.js +48 -3
- package/build/Checkbox/__snapshots__/Checkbox.test.js.snap +81 -49
- package/build/Checkbox/styles.js +91 -48
- package/build/Fab/__snapshots__/Fab.test.js.snap +2 -2
- package/build/Footer/Footer.js +81 -87
- package/build/Footer/List/List.js +89 -124
- package/build/Footer/List/styles.js +85 -31
- package/build/Footer/__snapshots__/Footer.test.js.snap +109 -59
- package/build/Footer/styles.js +116 -51
- package/build/Grid/Col/__snapshots__/Col.test.js.snap +16 -2
- package/build/Grid/Col/styles.js +12 -6
- package/build/Grid/Row/__snapshots__/Row.test.js.snap +18 -2
- package/build/Grid/Row/styles.js +15 -5
- package/build/Grid/styles.js +26 -9
- package/build/Menu/Menu.js +111 -0
- package/build/Menu/index.js +34 -0
- package/build/Menu/styles.js +28 -0
- package/build/MenuDivider/MenuDivider.js +47 -0
- package/build/MenuDivider/index.js +18 -0
- package/build/MenuDivider/styles.js +21 -0
- package/build/MenuItem/MenuItem.js +160 -0
- package/build/{Header/Menu → MenuItem}/index.js +2 -2
- package/build/MenuItem/styles.js +25 -0
- package/build/MenuItemBase/MenuItemBase.js +98 -0
- package/build/MenuItemBase/index.js +18 -0
- package/build/MenuItemBase/styles.js +57 -0
- package/build/MenuList/MenuList.js +71 -0
- package/build/{Header → MenuList}/index.js +2 -2
- package/build/MenuList/styles.js +54 -0
- package/build/MenuUser/MenuUser.js +153 -0
- package/build/MenuUser/index.js +18 -0
- package/build/MenuUser/styles.js +22 -0
- package/build/Modal/Modal.js +94 -66
- package/build/Modal/Modal.test.js +14 -7
- package/build/Modal/__snapshots__/Modal.test.js.snap +155 -100
- package/build/Modal/styles.js +165 -143
- package/build/NavAvatarButton/NavAvatarButton.js +125 -0
- package/build/{NavIcon → NavAvatarButton}/index.js +2 -2
- package/build/NavAvatarButton/styles.js +30 -0
- package/build/NavButton/NavButton.js +73 -0
- package/build/{Header/Nav → NavButton}/index.js +2 -2
- package/build/NavButton/styles.js +79 -0
- package/build/NavItem/styles.js +4 -4
- package/build/NavTab/NavTab.js +47 -32
- package/build/NavTab/styles.js +63 -28
- package/build/NavTop/styles.js +6 -6
- package/build/OrderBy/OrderBy.js +2 -1
- package/build/Pager/Page/Page.js +11 -6
- package/build/Pager/Page/Page.test.js +13 -9
- package/build/Pager/Page/__snapshots__/Page.test.js.snap +34 -10
- package/build/Pager/Page/styles.js +48 -14
- package/build/Pager/Pager.js +144 -235
- package/build/Pager/Pager.test.js +81 -36
- package/build/Pager/__snapshots__/Pager.test.js.snap +3 -36
- package/build/Pager/styles.js +5 -40
- package/build/Pill/Choice/Choice.js +6 -4
- package/build/Pill/Choice/styles.js +13 -10
- package/build/Pill/Group/styles.js +5 -5
- package/build/Pill/Stack/Stack.js +2 -2
- package/build/Pill/Stack/styles.js +5 -8
- package/build/Placeholder/Placeholder.js +29 -12
- package/build/Placeholder/Placeholder.test.js +4 -4
- package/build/Placeholder/__snapshots__/Placeholder.test.js.snap +81 -38
- package/build/Placeholder/styles.js +86 -42
- package/build/Provider/MenuListProvider.js +38 -0
- package/build/Provider/usePrevious.js +1 -1
- package/build/Radio/Radio.js +42 -6
- package/build/Radio/__snapshots__/Radio.test.js.snap +81 -80
- package/build/Radio/styles.js +93 -85
- package/build/SlideDown/SlideDown.js +162 -169
- package/build/SlideDown/SlideDown.test.js +49 -44
- package/build/SlideDown/__snapshots__/SlideDown.test.js.snap +44 -15
- package/build/SlideDown/styles.js +51 -20
- package/build/SlideToggle/SlideToggle.js +38 -6
- package/build/SlideToggle/SlideToggle.test.js +2 -2
- package/build/SlideToggle/__snapshots__/SlideToggle.test.js.snap +52 -37
- package/build/SlideToggle/styles.js +64 -45
- package/build/Tabs/Tab/Tab.js +73 -0
- package/build/Tabs/Tab/index.js +34 -0
- package/build/Tabs/Tab/index.test.js +132 -0
- package/build/Tabs/Tab/styles.js +74 -0
- package/build/Tabs/TabContent/TabContent.js +76 -0
- package/build/Tabs/TabContent/index.js +34 -0
- package/build/Tabs/TabContent/index.test.js +68 -0
- package/build/Tabs/TabContent/styles.js +23 -0
- package/build/Tabs/TabIndicator/TabIndicator.js +158 -0
- package/build/Tabs/TabIndicator/index.js +34 -0
- package/build/Tabs/TabIndicator/styles.js +24 -0
- package/build/Tabs/TabList/TabList.js +108 -0
- package/build/Tabs/TabList/index.js +34 -0
- package/build/{Pager/Break → Tabs/TabList}/styles.js +3 -2
- package/build/Tabs/Tabs.js +74 -0
- package/build/Tabs/context.js +94 -0
- package/build/Tabs/index.js +34 -0
- package/build/Tabs/index.test.js +157 -0
- package/build/Tabs/styles.js +19 -0
- package/build/Tag/Tag.js +2 -2
- package/build/Tag/__snapshots__/Tag.test.js.snap +40 -43
- package/build/Tag/styles.js +76 -82
- package/build/Text/Text.js +2 -1
- package/build/TextField/TextField.js +7 -6
- package/build/TextField/__snapshots__/TextField.test.js.snap +3 -0
- package/build/TextField/styles.js +3 -0
- package/build/Tip/Tip.js +62 -95
- package/build/Tip/Tip.test.js +29 -6
- package/build/Tip/TipText/index.js +32 -0
- package/build/Tip/__snapshots__/Tip.test.js.snap +127 -15
- package/build/Tip/styles.js +125 -31
- package/build/Toaster/Toast/Toast.js +76 -64
- package/build/Toaster/Toast/styles.js +118 -46
- package/build/Toaster/Toaster.js +3 -2
- package/build/Toaster/Toaster.test.js +5 -2
- package/build/Toaster/__snapshots__/Toaster.test.js.snap +1 -1
- package/build/Toaster/functions.js +4 -0
- package/build/Toaster/styles.js +3 -3
- package/build/Tooltip/Tooltip.js +73 -22
- package/build/Tooltip/__snapshots__/Tooltip.test.js.snap +22 -6
- package/build/Tooltip/styles.js +32 -10
- package/build/index.js +30 -16
- package/build/plugin/babel.js +0 -2
- package/build/subatomic/grid.js +5 -5
- package/build/tokens/colors.json +35 -3
- package/package.json +5 -2
- package/build/Banner/styles.js +0 -41
- package/build/Header/Header.js +0 -163
- package/build/Header/Header.test.js +0 -118
- package/build/Header/Menu/Menu.js +0 -135
- package/build/Header/Menu/Menu.test.js +0 -107
- package/build/Header/Menu/__snapshots__/Menu.test.js.snap +0 -113
- package/build/Header/Menu/styles.js +0 -123
- package/build/Header/Nav/Nav.js +0 -95
- package/build/Header/Nav/Nav.test.js +0 -81
- package/build/Header/Nav/__snapshots__/Nav.test.js.snap +0 -101
- package/build/Header/Nav/styles.js +0 -110
- package/build/Header/__snapshots__/Header.test.js.snap +0 -79
- package/build/Header/styles.js +0 -94
- package/build/NavIcon/NavIcon.js +0 -112
- package/build/NavIcon/styles.js +0 -81
- package/build/Pager/Break/Break.js +0 -27
- package/build/Pager/Break/Break.test.js +0 -53
- package/build/Pager/Break/__snapshots__/Break.test.js.snap +0 -13
- package/build/Pager/Break/index.js +0 -18
- /package/build/Button/{Loading.js → Loading/index.js} +0 -0
@@ -0,0 +1,160 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports["default"] = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
11
|
+
|
12
|
+
var _MenuItemBase = _interopRequireDefault(require("../MenuItemBase"));
|
13
|
+
|
14
|
+
var _Icon = _interopRequireDefault(require("../Icon"));
|
15
|
+
|
16
|
+
var _Text = _interopRequireDefault(require("../Text"));
|
17
|
+
|
18
|
+
var _idx = _interopRequireDefault(require("idx"));
|
19
|
+
|
20
|
+
var _colors = _interopRequireDefault(require("../tokens/colors.json"));
|
21
|
+
|
22
|
+
var _MenuListProvider = require("../Provider/MenuListProvider");
|
23
|
+
|
24
|
+
var _excluded = ["classes", "disableText", "className", "textProps", "iconRightProps", "iconLeftProps", "dense", "children", "style", "component"];
|
25
|
+
|
26
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
27
|
+
|
28
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
29
|
+
|
30
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
31
|
+
|
32
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
33
|
+
|
34
|
+
/** MenuItem component with left and right icons. */
|
35
|
+
function MenuItem(_ref, ref) {
|
36
|
+
var classes = _ref.classes,
|
37
|
+
_ref$disableText = _ref.disableText,
|
38
|
+
disableText = _ref$disableText === void 0 ? false : _ref$disableText,
|
39
|
+
className = _ref.className,
|
40
|
+
textProps = _ref.textProps,
|
41
|
+
iconRightProps = _ref.iconRightProps,
|
42
|
+
iconLeftProps = _ref.iconLeftProps,
|
43
|
+
dense = _ref.dense,
|
44
|
+
children = _ref.children,
|
45
|
+
style = _ref.style,
|
46
|
+
_ref$component = _ref.component,
|
47
|
+
component = _ref$component === void 0 ? 'div' : _ref$component,
|
48
|
+
menuItemprops = _objectWithoutProperties(_ref, _excluded);
|
49
|
+
|
50
|
+
var listContext = (0, _MenuListProvider.useMenuListContext)();
|
51
|
+
var isDense = typeof dense === 'undefined' ? listContext.dense : dense;
|
52
|
+
var leftIconContainerClasses = classes.iconContainer;
|
53
|
+
leftIconContainerClasses += (0, _idx["default"])(className, function (_) {
|
54
|
+
return _.iconLeftContainer;
|
55
|
+
}) ? " ".concat(className.iconLeftContainer) : '';
|
56
|
+
leftIconContainerClasses += isDense ? " ".concat(classes.iconContainerSizeDense) : " ".concat(classes.iconContainerSize);
|
57
|
+
var textContainerClasses = classes.textContainer;
|
58
|
+
textContainerClasses += (0, _idx["default"])(className, function (_) {
|
59
|
+
return _.textContainer;
|
60
|
+
}) ? " ".concat(className.textContainer) : '';
|
61
|
+
var rightIconContainerClasses = classes.iconContainer;
|
62
|
+
leftIconContainerClasses += (0, _idx["default"])(className, function (_) {
|
63
|
+
return _.iconRightContainer;
|
64
|
+
}) ? " ".concat(className.iconRightContainer) : '';
|
65
|
+
rightIconContainerClasses += " ".concat(classes.iconRight);
|
66
|
+
rightIconContainerClasses += isDense ? " ".concat(classes.iconContainerSizeDense) : " ".concat(classes.iconContainerSize);
|
67
|
+
return /*#__PURE__*/_react["default"].createElement(_MenuItemBase["default"], _extends({
|
68
|
+
className: (0, _idx["default"])(className, function (_) {
|
69
|
+
return _.root;
|
70
|
+
}),
|
71
|
+
dense: isDense,
|
72
|
+
component: component,
|
73
|
+
ref: ref,
|
74
|
+
style: style && style.root
|
75
|
+
}, menuItemprops), (0, _idx["default"])(iconLeftProps, function (_) {
|
76
|
+
return _.iconName;
|
77
|
+
}) && /*#__PURE__*/_react["default"].createElement("div", {
|
78
|
+
className: leftIconContainerClasses,
|
79
|
+
style: style && style.iconLeftContainer
|
80
|
+
}, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
|
81
|
+
width: 16,
|
82
|
+
height: 16,
|
83
|
+
colors: [_colors["default"].icon["default"].bold]
|
84
|
+
}, iconLeftProps))), /*#__PURE__*/_react["default"].createElement("div", {
|
85
|
+
className: textContainerClasses,
|
86
|
+
style: style && style.textContainer
|
87
|
+
}, disableText ? children : /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
|
88
|
+
bodyRegularStrong: !isDense,
|
89
|
+
bodySmallStrong: isDense,
|
90
|
+
tag: "span"
|
91
|
+
}, textProps), children)), (0, _idx["default"])(iconRightProps, function (_) {
|
92
|
+
return _.iconName;
|
93
|
+
}) && /*#__PURE__*/_react["default"].createElement("div", {
|
94
|
+
className: rightIconContainerClasses,
|
95
|
+
style: style && style.iconLeftContainer
|
96
|
+
}, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
|
97
|
+
width: 16,
|
98
|
+
height: 16,
|
99
|
+
colors: [_colors["default"].icon["default"]["default"]]
|
100
|
+
}, iconRightProps))));
|
101
|
+
}
|
102
|
+
|
103
|
+
var _default = /*#__PURE__*/_react["default"].forwardRef(MenuItem);
|
104
|
+
|
105
|
+
exports["default"] = _default;
|
106
|
+
MenuItem.propTypes = {
|
107
|
+
classes: _propTypes["default"].object,
|
108
|
+
|
109
|
+
/** Defines the align-items style property. */
|
110
|
+
alignItems: _propTypes["default"].oneOf(['center', 'start']),
|
111
|
+
|
112
|
+
/** Adds classes to the root, text, iconRight, iconLeft containers. */
|
113
|
+
className: _propTypes["default"].exact({
|
114
|
+
root: _propTypes["default"].string,
|
115
|
+
textContainer: _propTypes["default"].string,
|
116
|
+
iconRightContainer: _propTypes["default"].string,
|
117
|
+
iconLeftContainer: _propTypes["default"].string
|
118
|
+
}),
|
119
|
+
|
120
|
+
/** Adds styles to the root, text, iconRight, iconLeft containers. */
|
121
|
+
style: _propTypes["default"].exact({
|
122
|
+
root: _propTypes["default"].object,
|
123
|
+
textContainer: _propTypes["default"].object,
|
124
|
+
iconRightContainer: _propTypes["default"].object,
|
125
|
+
iconLeftContainer: _propTypes["default"].object
|
126
|
+
}),
|
127
|
+
|
128
|
+
/** Use to remove hover, focus and active stylings. */
|
129
|
+
nonActivatable: _propTypes["default"].bool,
|
130
|
+
|
131
|
+
/** If true, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component. */
|
132
|
+
dense: _propTypes["default"].bool,
|
133
|
+
|
134
|
+
/** If true, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component. */
|
135
|
+
disablePadding: _propTypes["default"].bool,
|
136
|
+
|
137
|
+
/** If true, the left and right padding is removed. */
|
138
|
+
disableGutters: _propTypes["default"].bool,
|
139
|
+
|
140
|
+
/** The content of the component. */
|
141
|
+
children: _propTypes["default"].node,
|
142
|
+
|
143
|
+
/** The component used for the root node. Either a string to use a HTML element or a component. */
|
144
|
+
selected: _propTypes["default"].bool,
|
145
|
+
|
146
|
+
/** If true, the children won't be wrapped by a Text component. This can be useful to render an alternative Text variant by wrapping the children text. */
|
147
|
+
component: _propTypes["default"].elementType,
|
148
|
+
|
149
|
+
/** If true, the children won't be wrapped by a Text component. This can be useful to render an alternative Text variant by wrapping the children text. */
|
150
|
+
disableText: _propTypes["default"].bool,
|
151
|
+
|
152
|
+
/**These props will be forwarded to the primary typography component (as long as disableText is not true). */
|
153
|
+
textProps: _propTypes["default"].object,
|
154
|
+
|
155
|
+
/** These props will be forwarded to the Icon component. */
|
156
|
+
iconRightProps: _propTypes["default"].object,
|
157
|
+
|
158
|
+
/** These props will be forwarded to the Icon component. */
|
159
|
+
iconLeftProps: _propTypes["default"].object
|
160
|
+
};
|
@@ -7,12 +7,12 @@ exports["default"] = void 0;
|
|
7
7
|
|
8
8
|
var _reactJss = _interopRequireDefault(require("react-jss"));
|
9
9
|
|
10
|
-
var
|
10
|
+
var _MenuItem = _interopRequireDefault(require("./MenuItem"));
|
11
11
|
|
12
12
|
var _styles = _interopRequireDefault(require("./styles"));
|
13
13
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
15
15
|
|
16
|
-
var _default = (0, _reactJss["default"])(_styles["default"])(
|
16
|
+
var _default = (0, _reactJss["default"])(_styles["default"])(_MenuItem["default"]);
|
17
17
|
|
18
18
|
exports["default"] = _default;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports["default"] = void 0;
|
7
|
+
var _default = {
|
8
|
+
iconContainer: {
|
9
|
+
flexShrink: 0,
|
10
|
+
display: 'inline-flex'
|
11
|
+
},
|
12
|
+
iconRight: {
|
13
|
+
justifyContent: 'end'
|
14
|
+
},
|
15
|
+
iconContainerSize: {
|
16
|
+
minWidth: 28
|
17
|
+
},
|
18
|
+
iconContainerSizeDense: {
|
19
|
+
minWidth: 24
|
20
|
+
},
|
21
|
+
textContainer: {
|
22
|
+
flex: '1 1 auto'
|
23
|
+
}
|
24
|
+
};
|
25
|
+
exports["default"] = _default;
|
@@ -0,0 +1,98 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports["default"] = void 0;
|
7
|
+
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
9
|
+
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
11
|
+
|
12
|
+
var _MenuListProvider = require("../Provider/MenuListProvider");
|
13
|
+
|
14
|
+
var _excluded = ["classes", "alignItems", "className", "nonActivatable", "dense", "disablePadding", "disableGutters", "children", "selected", "component"];
|
15
|
+
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
17
|
+
|
18
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
19
|
+
|
20
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
21
|
+
|
22
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
23
|
+
|
24
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
25
|
+
|
26
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
27
|
+
|
28
|
+
function MenuItemBase(_ref, ref) {
|
29
|
+
var classes = _ref.classes,
|
30
|
+
_ref$alignItems = _ref.alignItems,
|
31
|
+
alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
|
32
|
+
className = _ref.className,
|
33
|
+
nonActivatable = _ref.nonActivatable,
|
34
|
+
dense = _ref.dense,
|
35
|
+
_ref$disablePadding = _ref.disablePadding,
|
36
|
+
disablePadding = _ref$disablePadding === void 0 ? false : _ref$disablePadding,
|
37
|
+
_ref$disableGutters = _ref.disableGutters,
|
38
|
+
disableGutters = _ref$disableGutters === void 0 ? false : _ref$disableGutters,
|
39
|
+
children = _ref.children,
|
40
|
+
_ref$selected = _ref.selected,
|
41
|
+
selected = _ref$selected === void 0 ? false : _ref$selected,
|
42
|
+
_ref$component = _ref.component,
|
43
|
+
component = _ref$component === void 0 ? 'div' : _ref$component,
|
44
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
45
|
+
|
46
|
+
var listContext = (0, _MenuListProvider.useMenuListContext)();
|
47
|
+
var isDense = typeof dense === 'undefined' ? listContext.dense : dense;
|
48
|
+
var classNames = classes.root;
|
49
|
+
classNames += className ? " ".concat(className) : '';
|
50
|
+
classNames += !disablePadding ? isDense ? " ".concat(classes.paddingVerticalDense) : " ".concat(classes.paddingVertical) : '';
|
51
|
+
classNames += !disablePadding && !disableGutters ? " ".concat(classes.paddingHorizontal) : '';
|
52
|
+
classNames += alignItems === 'center' ? " ".concat(classes.alignItemsCenter) : " ".concat(classes.alignItemsStart);
|
53
|
+
classNames += component === 'a' ? " ".concat(classes.containerAnchor) : '';
|
54
|
+
classNames += selected ? " ".concat(classes.selected) : '';
|
55
|
+
classNames += !nonActivatable ? " ".concat(classes.activatable) : '';
|
56
|
+
return /*#__PURE__*/_react["default"].createElement(component, _objectSpread({
|
57
|
+
ref: ref,
|
58
|
+
className: classNames,
|
59
|
+
tabIndex: '0'
|
60
|
+
}, props), children);
|
61
|
+
}
|
62
|
+
|
63
|
+
var _default = /*#__PURE__*/_react["default"].forwardRef(MenuItemBase);
|
64
|
+
|
65
|
+
exports["default"] = _default;
|
66
|
+
MenuItemBase.propTypes = {
|
67
|
+
classes: _propTypes["default"].object,
|
68
|
+
|
69
|
+
/** Defines the align-items style property. */
|
70
|
+
alignItems: _propTypes["default"].oneOf(['center', 'start']),
|
71
|
+
|
72
|
+
/** Adds classes to the root container. */
|
73
|
+
className: _propTypes["default"].string,
|
74
|
+
|
75
|
+
/** Adds styles to the root container. */
|
76
|
+
style: _propTypes["default"].object,
|
77
|
+
|
78
|
+
/** Use to remove hover, focus and active stylings. */
|
79
|
+
nonActivatable: _propTypes["default"].bool,
|
80
|
+
|
81
|
+
/** If true, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component. */
|
82
|
+
dense: _propTypes["default"].bool,
|
83
|
+
|
84
|
+
/** If true, compact vertical padding designed for keyboard and mouse input is used. The prop defaults to the value inherited from the parent List component. */
|
85
|
+
disablePadding: _propTypes["default"].bool,
|
86
|
+
|
87
|
+
/** If true, the left and right padding is removed. */
|
88
|
+
disableGutters: _propTypes["default"].bool,
|
89
|
+
|
90
|
+
/** The content of the component. */
|
91
|
+
children: _propTypes["default"].node,
|
92
|
+
|
93
|
+
/** The component used for the root node. Either a string to use a HTML element or a component. */
|
94
|
+
selected: _propTypes["default"].bool,
|
95
|
+
|
96
|
+
/** If true, the children won't be wrapped by a Text component. This can be useful to render an alternative Text variant by wrapping the children text. */
|
97
|
+
component: _propTypes["default"].elementType
|
98
|
+
};
|
@@ -0,0 +1,18 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports["default"] = void 0;
|
7
|
+
|
8
|
+
var _reactJss = _interopRequireDefault(require("react-jss"));
|
9
|
+
|
10
|
+
var _MenuItemBase = _interopRequireDefault(require("./MenuItemBase"));
|
11
|
+
|
12
|
+
var _styles = _interopRequireDefault(require("./styles"));
|
13
|
+
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
15
|
+
|
16
|
+
var _default = (0, _reactJss["default"])(_styles["default"])(_MenuItemBase["default"]);
|
17
|
+
|
18
|
+
exports["default"] = _default;
|
@@ -0,0 +1,57 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports["default"] = void 0;
|
7
|
+
|
8
|
+
var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
|
9
|
+
|
10
|
+
var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
|
11
|
+
|
12
|
+
var _colors = _interopRequireDefault(require("../tokens/colors.json"));
|
13
|
+
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
15
|
+
|
16
|
+
var _default = {
|
17
|
+
root: {
|
18
|
+
listStyleType: 'none',
|
19
|
+
display: 'flex',
|
20
|
+
justifyContent: 'flex-start',
|
21
|
+
borderRadius: _borderRadius["default"]['br-xs']
|
22
|
+
},
|
23
|
+
paddingVertical: {
|
24
|
+
paddingTop: _spacing["default"]['size-4'],
|
25
|
+
paddingBottom: _spacing["default"]['size-4']
|
26
|
+
},
|
27
|
+
paddingVerticalDense: {
|
28
|
+
paddingTop: _spacing["default"]['size-3'],
|
29
|
+
paddingBottom: _spacing["default"]['size-3']
|
30
|
+
},
|
31
|
+
paddingHorizontal: {
|
32
|
+
paddingRight: _spacing["default"]['size-3'],
|
33
|
+
paddingLeft: _spacing["default"]['size-3']
|
34
|
+
},
|
35
|
+
alignItemsCenter: {
|
36
|
+
alignItems: 'center'
|
37
|
+
},
|
38
|
+
alignItemsStart: {
|
39
|
+
alignItems: 'start'
|
40
|
+
},
|
41
|
+
containerAnchor: {
|
42
|
+
textDecoration: 'none'
|
43
|
+
},
|
44
|
+
activatable: {
|
45
|
+
'&:hover, &:focus': {
|
46
|
+
background: _colors["default"].bg.action.tertiary.hover,
|
47
|
+
outline: 'none'
|
48
|
+
},
|
49
|
+
'&:active': {
|
50
|
+
background: _colors["default"].bg.action.tertiary.active
|
51
|
+
}
|
52
|
+
},
|
53
|
+
selected: {
|
54
|
+
background: _colors["default"].bg.action.tertiary.active
|
55
|
+
}
|
56
|
+
};
|
57
|
+
exports["default"] = _default;
|
@@ -0,0 +1,71 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports["default"] = void 0;
|
7
|
+
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
11
|
+
|
12
|
+
var _MenuListProvider = _interopRequireDefault(require("../Provider/MenuListProvider"));
|
13
|
+
|
14
|
+
var _excluded = ["classes", "children", "className", "component", "padding", "dense"];
|
15
|
+
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
17
|
+
|
18
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
19
|
+
|
20
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
21
|
+
|
22
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
23
|
+
|
24
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
25
|
+
|
26
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
27
|
+
|
28
|
+
/** MenuList wrapper component. */
|
29
|
+
function MenuList(_ref, ref) {
|
30
|
+
var classes = _ref.classes,
|
31
|
+
children = _ref.children,
|
32
|
+
className = _ref.className,
|
33
|
+
_ref$component = _ref.component,
|
34
|
+
component = _ref$component === void 0 ? 'menu' : _ref$component,
|
35
|
+
_ref$padding = _ref.padding,
|
36
|
+
padding = _ref$padding === void 0 ? 'size-2' : _ref$padding,
|
37
|
+
dense = _ref.dense,
|
38
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
39
|
+
|
40
|
+
var containerClasses = classes.container;
|
41
|
+
containerClasses += padding ? " ".concat(classes[padding]) : '';
|
42
|
+
containerClasses += className ? " ".concat(className) : '';
|
43
|
+
return /*#__PURE__*/_react["default"].createElement(_MenuListProvider["default"], {
|
44
|
+
dense: dense
|
45
|
+
}, /*#__PURE__*/_react["default"].createElement(component, _objectSpread({
|
46
|
+
className: containerClasses,
|
47
|
+
ref: ref
|
48
|
+
}, props), children));
|
49
|
+
}
|
50
|
+
|
51
|
+
var _default = /*#__PURE__*/_react["default"].forwardRef(MenuList);
|
52
|
+
|
53
|
+
exports["default"] = _default;
|
54
|
+
MenuList.propTypes = {
|
55
|
+
classes: _propTypes["default"].object,
|
56
|
+
|
57
|
+
/** The content of the component. */
|
58
|
+
children: _propTypes["default"].node,
|
59
|
+
|
60
|
+
/** Adds classes to the root container. */
|
61
|
+
className: _propTypes["default"].string,
|
62
|
+
|
63
|
+
/** Adds or removes padding to the root container. */
|
64
|
+
padding: _propTypes["default"].oneOf([false, "size-4", "size-3", "size-0", "size-1", "size-2", "size-5", "size-6", "size-7", "size-8", "size-9", "size-10", "size-11", "size-12", "base-value"]),
|
65
|
+
|
66
|
+
/** If true, compact vertical padding designed for keyboard and mouse input is used for the list and list items. The prop is available to descendant components as the dense context. */
|
67
|
+
dense: _propTypes["default"].bool,
|
68
|
+
|
69
|
+
/** The component used for the root node. Either a string to use a HTML element or a component. */
|
70
|
+
component: _propTypes["default"].elementType
|
71
|
+
};
|
@@ -7,12 +7,12 @@ exports["default"] = void 0;
|
|
7
7
|
|
8
8
|
var _reactJss = _interopRequireDefault(require("react-jss"));
|
9
9
|
|
10
|
-
var
|
10
|
+
var _MenuList = _interopRequireDefault(require("./MenuList"));
|
11
11
|
|
12
12
|
var _styles = _interopRequireDefault(require("./styles"));
|
13
13
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
15
15
|
|
16
|
-
var _default = (0, _reactJss["default"])(_styles["default"])(
|
16
|
+
var _default = (0, _reactJss["default"])(_styles["default"])(_MenuList["default"]);
|
17
17
|
|
18
18
|
exports["default"] = _default;
|
@@ -0,0 +1,54 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports["default"] = void 0;
|
7
|
+
|
8
|
+
var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
|
9
|
+
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
11
|
+
|
12
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
13
|
+
|
14
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
15
|
+
|
16
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
17
|
+
|
18
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
19
|
+
|
20
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
21
|
+
|
22
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
23
|
+
|
24
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
25
|
+
|
26
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
27
|
+
|
28
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
29
|
+
|
30
|
+
function generateSpacingClasses() {
|
31
|
+
var spacingClasses = {};
|
32
|
+
|
33
|
+
for (var _i = 0, _Object$values = Object.values(_spacing["default"]); _i < _Object$values.length; _i++) {
|
34
|
+
var _Object$values$_i = _slicedToArray(_Object$values[_i], 2),
|
35
|
+
key = _Object$values$_i[0],
|
36
|
+
value = _Object$values$_i[1];
|
37
|
+
|
38
|
+
spacingClasses[key] = {
|
39
|
+
padding: value
|
40
|
+
};
|
41
|
+
}
|
42
|
+
|
43
|
+
return spacingClasses;
|
44
|
+
}
|
45
|
+
|
46
|
+
var _default = _objectSpread({
|
47
|
+
container: {
|
48
|
+
marginBlock: 0,
|
49
|
+
paddingBlock: 0,
|
50
|
+
paddingInline: 0
|
51
|
+
}
|
52
|
+
}, generateSpacingClasses());
|
53
|
+
|
54
|
+
exports["default"] = _default;
|