@occmundial/occ-atomic 3.0.0-beta.60 → 3.0.0-beta.61

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [3.0.0-beta.61](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.60...v3.0.0-beta.61) (2024-09-30)
+
+
+### Features
+
+* Created and redisigned the header related components ([b8255ad](https://github.com/occmundial/occ-atomic/commit/b8255ad1ad66dc29b572a9caef12abd1cb2868c8))
+* Created MenuItem, MenuDivider, MenuUser and MenuList ([1e0cc04](https://github.com/occmundial/occ-atomic/commit/1e0cc04f9f3a6e91fac95ef211de595d93029b30))
+
 # [3.0.0-beta.60](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.59...v3.0.0-beta.60) (2024-09-23)
 
 

package/build/MenuDivider/MenuDivider.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _excluded = ["classes", "className", "style"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+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; }
+
+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; }
+
+/** A simple wrapper for applying list styles to the ht tag. */
+function MenuDivider(_ref, ref) {
+  var classes = _ref.classes,
+      className = _ref.className,
+      style = _ref.style,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement("hr", _extends({
+    ref: ref,
+    className: "".concat(classes.root, " ").concat(className),
+    style: style
+  }, props));
+}
+
+var _default = /*#__PURE__*/_react["default"].forwardRef(MenuDivider);
+
+exports["default"] = _default;
+MenuDivider.propTypes = {
+  classes: _propTypes["default"].object,
+
+  /** Adds classes to the root container. */
+  className: _propTypes["default"].string,
+
+  /** Adds styles to the root container. */
+  style: _propTypes["default"].object
+};

package/build/MenuDivider/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _MenuDivider = _interopRequireDefault(require("./MenuDivider"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_MenuDivider["default"]);
+
+exports["default"] = _default;

package/build/MenuDivider/styles.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  root: {
+    margin: '0px',
+    flexShrink: 0,
+    borderWidth: '0px 0px thin',
+    borderStyle: 'solid',
+    borderColor: _colors["default"].border["default"].subtle
+  }
+};
+exports["default"] = _default;

package/build/MenuItem/MenuItem.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _MenuItemBase = _interopRequireDefault(require("../MenuItemBase"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _idx = _interopRequireDefault(require("idx"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _MenuListProvider = require("../Provider/MenuListProvider");
+
+var _excluded = ["classes", "disableText", "className", "textProps", "iconRightProps", "iconLeftProps", "dense", "children", "style", "component"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+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; }
+
+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; }
+
+/** MenuItem component with left and right icons. */
+function MenuItem(_ref, ref) {
+  var classes = _ref.classes,
+      _ref$disableText = _ref.disableText,
+      disableText = _ref$disableText === void 0 ? false : _ref$disableText,
+      className = _ref.className,
+      textProps = _ref.textProps,
+      iconRightProps = _ref.iconRightProps,
+      iconLeftProps = _ref.iconLeftProps,
+      dense = _ref.dense,
+      children = _ref.children,
+      style = _ref.style,
+      _ref$component = _ref.component,
+      component = _ref$component === void 0 ? 'div' : _ref$component,
+      menuItemprops = _objectWithoutProperties(_ref, _excluded);
+
+  var listContext = (0, _MenuListProvider.useMenuListContext)();
+  var isDense = typeof dense === 'undefined' ? listContext.dense : dense;
+  var leftIconContainerClasses = classes.iconContainer;
+  leftIconContainerClasses += (0, _idx["default"])(className, function (_) {
+    return _.iconLeftContainer;
+  }) ? " ".concat(className.iconLeftContainer) : '';
+  leftIconContainerClasses += isDense ? " ".concat(classes.iconContainerSizeDense) : " ".concat(classes.iconContainerSize);
+  var textContainerClasses = classes.textContainer;
+  textContainerClasses += (0, _idx["default"])(className, function (_) {
+    return _.textContainer;
+  }) ? " ".concat(className.textContainer) : '';
+  var rightIconContainerClasses = classes.iconContainer;
+  leftIconContainerClasses += (0, _idx["default"])(className, function (_) {
+    return _.iconRightContainer;
+  }) ? " ".concat(className.iconRightContainer) : '';
+  rightIconContainerClasses += " ".concat(classes.iconRight);
+  rightIconContainerClasses += isDense ? " ".concat(classes.iconContainerSizeDense) : " ".concat(classes.iconContainerSize);
+  return /*#__PURE__*/_react["default"].createElement(_MenuItemBase["default"], _extends({
+    className: (0, _idx["default"])(className, function (_) {
+      return _.root;
+    }),
+    dense: isDense,
+    component: component,
+    ref: ref,
+    style: style && style.root
+  }, menuItemprops), (0, _idx["default"])(iconLeftProps, function (_) {
+    return _.iconName;
+  }) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: leftIconContainerClasses,
+    style: style && style.iconLeftContainer
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
+    width: 16,
+    height: 16,
+    colors: [_colors["default"].icon["default"].bold]
+  }, iconLeftProps))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: textContainerClasses,
+    style: style && style.textContainer
+  }, disableText ? children : /*#__PURE__*/_react["default"].createElement(_Text["default"], _extends({
+    bodyRegularStrong: !isDense,
+    bodySmallStrong: isDense,
+    tag: "span"
+  }, textProps), children)), (0, _idx["default"])(iconRightProps, function (_) {
+    return _.iconName;
+  }) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: rightIconContainerClasses,
+    style: style && style.iconLeftContainer
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({
+    width: 16,
+    height: 16,
+    colors: [_colors["default"].icon["default"]["default"]]
+  }, iconRightProps))));
+}
+
+var _default = /*#__PURE__*/_react["default"].forwardRef(MenuItem);
+
+exports["default"] = _default;
+MenuItem.propTypes = {
+  classes: _propTypes["default"].object,
+
+  /** Defines the align-items style property.  */
+  alignItems: _propTypes["default"].oneOf(['center', 'start']),
+
+  /** Adds classes to the root, text, iconRight, iconLeft containers.  */
+  className: _propTypes["default"].exact({
+    root: _propTypes["default"].string,
+    textContainer: _propTypes["default"].string,
+    iconRightContainer: _propTypes["default"].string,
+    iconLeftContainer: _propTypes["default"].string
+  }),
+
+  /** Adds styles to the root, text, iconRight, iconLeft containers.  */
+  style: _propTypes["default"].exact({
+    root: _propTypes["default"].object,
+    textContainer: _propTypes["default"].object,
+    iconRightContainer: _propTypes["default"].object,
+    iconLeftContainer: _propTypes["default"].object
+  }),
+
+  /** Use to remove hover, focus and active stylings. */
+  nonActivatable: _propTypes["default"].bool,
+
+  /** 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.  */
+  dense: _propTypes["default"].bool,
+
+  /** 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. */
+  disablePadding: _propTypes["default"].bool,
+
+  /** If true, the left and right padding is removed. */
+  disableGutters: _propTypes["default"].bool,
+
+  /** The content of the component. */
+  children: _propTypes["default"].node,
+
+  /** The component used for the root node. Either a string to use a HTML element or a component. */
+  selected: _propTypes["default"].bool,
+
+  /** 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. */
+  component: _propTypes["default"].elementType,
+
+  /** 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. */
+  disableText: _propTypes["default"].bool,
+
+  /**These props will be forwarded to the primary typography component (as long as disableText is not true). */
+  textProps: _propTypes["default"].object,
+
+  /** These props will be forwarded to the Icon component. */
+  iconRightProps: _propTypes["default"].object,
+
+  /** These props will be forwarded to the Icon component. */
+  iconLeftProps: _propTypes["default"].object
+};

package/build/MenuItem/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _MenuItem = _interopRequireDefault(require("./MenuItem"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_MenuItem["default"]);
+
+exports["default"] = _default;

package/build/MenuItem/styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _default = {
+  iconContainer: {
+    flexShrink: 0,
+    display: 'inline-flex'
+  },
+  iconRight: {
+    justifyContent: 'end'
+  },
+  iconContainerSize: {
+    minWidth: 28
+  },
+  iconContainerSizeDense: {
+    minWidth: 24
+  },
+  textContainer: {
+    flex: '1 1 auto'
+  }
+};
+exports["default"] = _default;

package/build/MenuItemBase/MenuItemBase.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _MenuListProvider = require("../Provider/MenuListProvider");
+
+var _excluded = ["classes", "alignItems", "className", "nonActivatable", "dense", "disablePadding", "disableGutters", "children", "selected", "component"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+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; }
+
+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; }
+
+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; }
+
+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; }
+
+function MenuItemBase(_ref, ref) {
+  var classes = _ref.classes,
+      _ref$alignItems = _ref.alignItems,
+      alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
+      className = _ref.className,
+      nonActivatable = _ref.nonActivatable,
+      dense = _ref.dense,
+      _ref$disablePadding = _ref.disablePadding,
+      disablePadding = _ref$disablePadding === void 0 ? false : _ref$disablePadding,
+      _ref$disableGutters = _ref.disableGutters,
+      disableGutters = _ref$disableGutters === void 0 ? false : _ref$disableGutters,
+      children = _ref.children,
+      _ref$selected = _ref.selected,
+      selected = _ref$selected === void 0 ? false : _ref$selected,
+      _ref$component = _ref.component,
+      component = _ref$component === void 0 ? 'div' : _ref$component,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var listContext = (0, _MenuListProvider.useMenuListContext)();
+  var isDense = typeof dense === 'undefined' ? listContext.dense : dense;
+  var classNames = classes.root;
+  classNames += className ? " ".concat(className) : '';
+  classNames += !disablePadding ? isDense ? " ".concat(classes.paddingVerticalDense) : " ".concat(classes.paddingVertical) : '';
+  classNames += !disablePadding && !disableGutters ? " ".concat(classes.paddingHorizontal) : '';
+  classNames += alignItems === 'center' ? " ".concat(classes.alignItemsCenter) : " ".concat(classes.alignItemsStart);
+  classNames += component === 'a' ? " ".concat(classes.containerAnchor) : '';
+  classNames += selected ? " ".concat(classes.selected) : '';
+  classNames += !nonActivatable ? " ".concat(classes.activatable) : '';
+  return /*#__PURE__*/_react["default"].createElement(component, _objectSpread({
+    ref: ref,
+    className: classNames,
+    tabIndex: '0'
+  }, props), children);
+}
+
+var _default = /*#__PURE__*/_react["default"].forwardRef(MenuItemBase);
+
+exports["default"] = _default;
+MenuItemBase.propTypes = {
+  classes: _propTypes["default"].object,
+
+  /** Defines the align-items style property.  */
+  alignItems: _propTypes["default"].oneOf(['center', 'start']),
+
+  /** Adds classes to the root container. */
+  className: _propTypes["default"].string,
+
+  /** Adds styles to the root container. */
+  style: _propTypes["default"].object,
+
+  /** Use to remove hover, focus and active stylings. */
+  nonActivatable: _propTypes["default"].bool,
+
+  /** 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.  */
+  dense: _propTypes["default"].bool,
+
+  /** 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. */
+  disablePadding: _propTypes["default"].bool,
+
+  /** If true, the left and right padding is removed. */
+  disableGutters: _propTypes["default"].bool,
+
+  /** The content of the component.   */
+  children: _propTypes["default"].node,
+
+  /** The component used for the root node. Either a string to use a HTML element or a component. */
+  selected: _propTypes["default"].bool,
+
+  /** 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. */
+  component: _propTypes["default"].elementType
+};

package/build/MenuItemBase/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _MenuItemBase = _interopRequireDefault(require("./MenuItemBase"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_MenuItemBase["default"]);
+
+exports["default"] = _default;

package/build/MenuItemBase/styles.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  root: {
+    listStyleType: 'none',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    borderRadius: _borderRadius["default"]['br-xs']
+  },
+  paddingVertical: {
+    paddingTop: _spacing["default"]['size-4'],
+    paddingBottom: _spacing["default"]['size-4']
+  },
+  paddingVerticalDense: {
+    paddingTop: _spacing["default"]['size-3'],
+    paddingBottom: _spacing["default"]['size-3']
+  },
+  paddingHorizontal: {
+    paddingRight: _spacing["default"]['size-3'],
+    paddingLeft: _spacing["default"]['size-3']
+  },
+  alignItemsCenter: {
+    alignItems: 'center'
+  },
+  alignItemsStart: {
+    alignItems: 'start'
+  },
+  containerAnchor: {
+    textDecoration: 'none'
+  },
+  activatable: {
+    '&:hover, &:focus': {
+      background: _colors["default"].bg.action.tertiary.hover,
+      outline: 'none'
+    },
+    '&:active': {
+      background: _colors["default"].bg.action.tertiary.active
+    }
+  },
+  selected: {
+    background: _colors["default"].bg.action.tertiary.active
+  }
+};
+exports["default"] = _default;

package/build/MenuList/MenuList.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _MenuListProvider = _interopRequireDefault(require("../Provider/MenuListProvider"));
+
+var _excluded = ["classes", "children", "className", "component", "padding", "dense"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+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; }
+
+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; }
+
+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; }
+
+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; }
+
+/** MenuList wrapper component. */
+function MenuList(_ref, ref) {
+  var classes = _ref.classes,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$component = _ref.component,
+      component = _ref$component === void 0 ? 'menu' : _ref$component,
+      _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? 'size-2' : _ref$padding,
+      dense = _ref.dense,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var containerClasses = classes.container;
+  containerClasses += padding ? " ".concat(classes[padding]) : '';
+  containerClasses += className ? " ".concat(className) : '';
+  return /*#__PURE__*/_react["default"].createElement(_MenuListProvider["default"], {
+    dense: dense
+  }, /*#__PURE__*/_react["default"].createElement(component, _objectSpread({
+    className: containerClasses,
+    ref: ref
+  }, props), children));
+}
+
+var _default = /*#__PURE__*/_react["default"].forwardRef(MenuList);
+
+exports["default"] = _default;
+MenuList.propTypes = {
+  classes: _propTypes["default"].object,
+
+  /** The content of the component. */
+  children: _propTypes["default"].node,
+
+  /** Adds classes to the root container. */
+  className: _propTypes["default"].string,
+
+  /** Adds or removes padding to the root container. */
+  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"]),
+
+  /** 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. */
+  dense: _propTypes["default"].bool,
+
+  /** The component used for the root node. Either a string to use a HTML element or a component. */
+  component: _propTypes["default"].elementType
+};

package/build/MenuList/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _reactJss = _interopRequireDefault(require("react-jss"));
+
+var _MenuList = _interopRequireDefault(require("./MenuList"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = (0, _reactJss["default"])(_styles["default"])(_MenuList["default"]);
+
+exports["default"] = _default;

package/build/MenuList/styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+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; }
+
+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; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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."); }
+
+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); }
+
+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; }
+
+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; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function generateSpacingClasses() {
+  var spacingClasses = {};
+
+  for (var _i = 0, _Object$values = Object.values(_spacing["default"]); _i < _Object$values.length; _i++) {
+    var _Object$values$_i = _slicedToArray(_Object$values[_i], 2),
+        key = _Object$values$_i[0],
+        value = _Object$values$_i[1];
+
+    spacingClasses[key] = {
+      padding: value
+    };
+  }
+
+  return spacingClasses;
+}
+
+var _default = _objectSpread({
+  container: {
+    marginBlock: 0,
+    paddingBlock: 0,
+    paddingInline: 0
+  }
+}, generateSpacingClasses());
+
+exports["default"] = _default;