baseui 0.0.0-next-c9564f7 → 0.0.0-next-3fb5d3f

package/es/menu/index.js

@@ -13,6 +13,6 @@ export { default as NestedMenus, NestedMenuContext } from './nested-menus'; // C
 
 export { KEY_STRINGS, STATE_CHANGE_TYPES } from './constants'; // Styled elements
 
-export { StyledEmptyState, StyledList, StyledListItem, StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody } from './styled-components'; // Flow
+export { StyledEmptyState, StyledList, StyledListItem, StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody, StyledMenuDivider } from './styled-components'; // Flow
 
 export * from './types';

package/es/menu/menu.js

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { LocaleContext } from '../locale'; // Components
 
-import { StyledList, StyledEmptyState, StyledOptgroupHeader } from './styled-components';
+import { StyledList, StyledEmptyState, StyledOptgroupHeader, StyledMenuDivider } from './styled-components';
 import OptionList from './option-list';
 import { getOverrides } from '../helpers/overrides'; // Types
 
@@ -45,6 +45,7 @@ export default function Menu(props) {
   const [Option, optionProps] = getOverrides(overrides.Option, OptionList);
   const [EmptyState, emptyStateProps] = getOverrides(overrides.EmptyState, StyledEmptyState);
   const [OptgroupHeader, optgroupHeaderProps] = getOverrides(overrides.OptgroupHeader, StyledOptgroupHeader);
+  const [MenuDivider, menuDividerProps] = getOverrides(overrides.MenuDivider, StyledMenuDivider);
   const groupedItems = Array.isArray(props.items) ? {
     __ungrouped: props.items
   } : props.items;
@@ -63,6 +64,11 @@ export default function Menu(props) {
       const {
         getRequiredItemProps = (item, index) => ({})
       } = props;
+
+      if (item.divider === true) {
+        return /*#__PURE__*/React.createElement(MenuDivider, menuDividerProps);
+      }
+
       const {
         disabled,
         isFocused,

package/es/menu/styled-components.js

@@ -229,4 +229,20 @@ export const StyledProfileBody = styled('p', ({
   marginRight: 0
 }));
 StyledProfileBody.displayName = "StyledProfileBody";
-StyledProfileBody.displayName = 'StyledProfileBody';
+StyledProfileBody.displayName = 'StyledProfileBody';
+export const StyledMenuDivider = styled('li', ({
+  $theme
+}) => ({
+  color: $theme.colors.contentPrimary,
+  borderBottomWidth: $theme.borders.border300.borderWidth,
+  borderBottomStyle: $theme.borders.border300.borderStyle,
+  borderBottomColor: $theme.borders.border300.borderColor,
+  marginTop: $theme.sizing.scale100,
+  marginBottom: $theme.sizing.scale100,
+  marginLeft: $theme.sizing.scale500,
+  marginRight: $theme.sizing.scale500,
+  listStyle: 'none',
+  height: 0
+}));
+StyledMenuDivider.displayName = "StyledMenuDivider";
+StyledProfileBody.displayName = 'StyledMenuDivider';

package/es/message-card/message-card.js

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { StyledRoot, StyledImage, StyledContentContainer, StyledHeadingContainer, StyledParagraphContainer } from './styled-components';
 import { Button as DefaultButton, SHAPE, SIZE } from '../button';
-import { useStyletron } from '../styles/index.js';
+import { useStyletron } from '../styles/index';
 import { ThemeProvider, LightTheme } from '../';
 import { getBackgroundColorType } from './utils';
 import { colors } from '../tokens';

package/esm/menu/index.js

@@ -13,6 +13,6 @@ export { default as NestedMenus, NestedMenuContext } from './nested-menus'; // C
 
 export { KEY_STRINGS, STATE_CHANGE_TYPES } from './constants'; // Styled elements
 
-export { StyledEmptyState, StyledList, StyledListItem, StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody } from './styled-components'; // Flow
+export { StyledEmptyState, StyledList, StyledListItem, StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody, StyledMenuDivider } from './styled-components'; // Flow
 
 export * from './types';

package/esm/menu/menu.js

@@ -27,7 +27,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { LocaleContext } from '../locale'; // Components
 
-import { StyledList, StyledEmptyState, StyledOptgroupHeader } from './styled-components';
+import { StyledList, StyledEmptyState, StyledOptgroupHeader, StyledMenuDivider } from './styled-components';
 import OptionList from './option-list';
 import { getOverrides } from '../helpers/overrides'; // Types
 
@@ -88,6 +88,11 @@ export default function Menu(props) {
       OptgroupHeader = _getOverrides8[0],
       optgroupHeaderProps = _getOverrides8[1];
 
+  var _getOverrides9 = getOverrides(overrides.MenuDivider, StyledMenuDivider),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      MenuDivider = _getOverrides10[0],
+      menuDividerProps = _getOverrides10[1];
+
   var groupedItems = Array.isArray(props.items) ? {
     __ungrouped: props.items
   } : props.items;
@@ -113,6 +118,10 @@ export default function Menu(props) {
         return {};
       } : _props$getRequiredIte;
 
+      if (item.divider === true) {
+        return /*#__PURE__*/React.createElement(MenuDivider, menuDividerProps);
+      }
+
       var _getRequiredItemProps = getRequiredItemProps(item, itemIndex),
           disabled = _getRequiredItemProps.disabled,
           isFocused = _getRequiredItemProps.isFocused,

package/esm/menu/styled-components.js

@@ -242,4 +242,21 @@ export var StyledProfileBody = styled('p', function (_ref7) {
   });
 });
 StyledProfileBody.displayName = "StyledProfileBody";
-StyledProfileBody.displayName = 'StyledProfileBody';
+StyledProfileBody.displayName = 'StyledProfileBody';
+export var StyledMenuDivider = styled('li', function (_ref8) {
+  var $theme = _ref8.$theme;
+  return {
+    color: $theme.colors.contentPrimary,
+    borderBottomWidth: $theme.borders.border300.borderWidth,
+    borderBottomStyle: $theme.borders.border300.borderStyle,
+    borderBottomColor: $theme.borders.border300.borderColor,
+    marginTop: $theme.sizing.scale100,
+    marginBottom: $theme.sizing.scale100,
+    marginLeft: $theme.sizing.scale500,
+    marginRight: $theme.sizing.scale500,
+    listStyle: 'none',
+    height: 0
+  };
+});
+StyledMenuDivider.displayName = "StyledMenuDivider";
+StyledProfileBody.displayName = 'StyledMenuDivider';

package/esm/message-card/message-card.js

@@ -33,7 +33,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { StyledRoot, StyledImage, StyledContentContainer, StyledHeadingContainer, StyledParagraphContainer } from './styled-components';
 import { Button as DefaultButton, SHAPE, SIZE } from '../button';
-import { useStyletron } from '../styles/index.js';
+import { useStyletron } from '../styles/index';
 import { ThemeProvider, LightTheme } from '../';
 import { getBackgroundColorType } from './utils';
 import { colors } from '../tokens';

package/menu/index.d.ts

@@ -6,7 +6,7 @@ export { default as OptionProfile } from './option-profile';
 export { default as Menu } from './menu';
 export { default as NestedMenus, NestedMenuContext, type NestedMenuState, type NestedMenuProps, } from './nested-menus';
 export { KEY_STRINGS, STATE_CHANGE_TYPES } from './constants';
-export { StyledEmptyState, StyledList, StyledListItem, StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody, } from './styled-components';
+export { StyledEmptyState, StyledList, StyledListItem, StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody, StyledMenuDivider, } from './styled-components';
 export * from './types';
 export type { MenuLocale } from './locale';
 /** @deprecated use Item instead. To be removed in future versions.*/

package/menu/index.js

@@ -24,7 +24,8 @@ var _exportNames = {
   StyledProfileLabelsContainer: true,
   StyledProfileTitle: true,
   StyledProfileSubtitle: true,
-  StyledProfileBody: true
+  StyledProfileBody: true,
+  StyledMenuDivider: true
 };
 Object.defineProperty(exports, "KEY_STRINGS", {
   enumerable: true,
@@ -104,6 +105,12 @@ Object.defineProperty(exports, "StyledListItemProfile", {
     return _styledComponents.StyledListItemProfile;
   }
 });
+Object.defineProperty(exports, "StyledMenuDivider", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponents.StyledMenuDivider;
+  }
+});
 Object.defineProperty(exports, "StyledProfileBody", {
   enumerable: true,
   get: function get() {

package/menu/index.js.flow

@@ -25,6 +25,7 @@ export {
   StyledProfileTitle,
   StyledProfileSubtitle,
   StyledProfileBody,
+  StyledMenuDivider,
 } from './styled-components.js';
 // Flow
 export type * from './types.js';

package/menu/menu.js

@@ -101,6 +101,11 @@ function Menu(props) {
       OptgroupHeader = _getOverrides8[0],
       optgroupHeaderProps = _getOverrides8[1];
 
+  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.MenuDivider, _styledComponents.StyledMenuDivider),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      MenuDivider = _getOverrides10[0],
+      menuDividerProps = _getOverrides10[1];
+
   var groupedItems = Array.isArray(props.items) ? {
     __ungrouped: props.items
   } : props.items;
@@ -126,6 +131,10 @@ function Menu(props) {
         return {};
       } : _props$getRequiredIte;
 
+      if (item.divider === true) {
+        return /*#__PURE__*/React.createElement(MenuDivider, menuDividerProps);
+      }
+
       var _getRequiredItemProps = getRequiredItemProps(item, itemIndex),
           disabled = _getRequiredItemProps.disabled,
           isFocused = _getRequiredItemProps.isFocused,

package/menu/menu.js.flow

@@ -8,7 +8,12 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { LocaleContext } from '../locale/index.js';
 // Components
-import { StyledList, StyledEmptyState, StyledOptgroupHeader } from './styled-components.js';
+import {
+  StyledList,
+  StyledEmptyState,
+  StyledOptgroupHeader,
+  StyledMenuDivider,
+} from './styled-components.js';
 import OptionList from './option-list.js';
 import { getOverrides } from '../helpers/overrides.js';
 // Types
@@ -49,6 +54,7 @@ export default function Menu(props: StatelessMenuPropsT) {
     overrides.OptgroupHeader,
     StyledOptgroupHeader
   );
+  const [MenuDivider, menuDividerProps] = getOverrides(overrides.MenuDivider, StyledMenuDivider);
 
   const groupedItems = Array.isArray(props.items) ? { __ungrouped: props.items } : props.items;
   const optgroups = Object.keys(groupedItems);
@@ -65,6 +71,10 @@ export default function Menu(props: StatelessMenuPropsT) {
         itemIndex = itemIndex + 1;
         const { getRequiredItemProps = (item, index) => ({}) } = props;
 
+        if (item.divider === true) {
+          return <MenuDivider {...menuDividerProps} />;
+        }
+
         const {
           disabled,
           isFocused,

package/menu/styled-components.d.ts

@@ -21,4 +21,5 @@ export declare const StyledProfileLabelsContainer: import("styletron-react").Sty
 export declare const StyledProfileTitle: import("styletron-react").StyletronComponent<"h6", StyledProps>;
 export declare const StyledProfileSubtitle: import("styletron-react").StyletronComponent<"p", StyledProps>;
 export declare const StyledProfileBody: import("styletron-react").StyletronComponent<"p", StyledProps>;
+export declare const StyledMenuDivider: import("styletron-react").StyletronComponent<"li", StyledProps>;
 export {};

package/menu/styled-components.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledProfileTitle = exports.StyledProfileSubtitle = exports.StyledProfileLabelsContainer = exports.StyledProfileImgContainer = exports.StyledProfileImg = exports.StyledProfileBody = exports.StyledOptgroupHeader = exports.StyledListItemProfile = exports.StyledListItemElement = exports.StyledListItemAnchor = exports.StyledListItem = exports.StyledList = exports.StyledEmptyState = void 0;
+exports.StyledProfileTitle = exports.StyledProfileSubtitle = exports.StyledProfileLabelsContainer = exports.StyledProfileImgContainer = exports.StyledProfileImg = exports.StyledProfileBody = exports.StyledOptgroupHeader = exports.StyledMenuDivider = exports.StyledListItemProfile = exports.StyledListItemElement = exports.StyledListItemAnchor = exports.StyledListItem = exports.StyledList = exports.StyledEmptyState = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -265,4 +265,22 @@ var StyledProfileBody = (0, _styles.styled)('p', function (_ref7) {
 });
 exports.StyledProfileBody = StyledProfileBody;
 StyledProfileBody.displayName = "StyledProfileBody";
-StyledProfileBody.displayName = 'StyledProfileBody';
+StyledProfileBody.displayName = 'StyledProfileBody';
+var StyledMenuDivider = (0, _styles.styled)('li', function (_ref8) {
+  var $theme = _ref8.$theme;
+  return {
+    color: $theme.colors.contentPrimary,
+    borderBottomWidth: $theme.borders.border300.borderWidth,
+    borderBottomStyle: $theme.borders.border300.borderStyle,
+    borderBottomColor: $theme.borders.border300.borderColor,
+    marginTop: $theme.sizing.scale100,
+    marginBottom: $theme.sizing.scale100,
+    marginLeft: $theme.sizing.scale500,
+    marginRight: $theme.sizing.scale500,
+    listStyle: 'none',
+    height: 0
+  };
+});
+exports.StyledMenuDivider = StyledMenuDivider;
+StyledMenuDivider.displayName = "StyledMenuDivider";
+StyledProfileBody.displayName = 'StyledMenuDivider';

package/menu/styled-components.js.flow

@@ -211,6 +211,19 @@ export const StyledProfileBody = styled<StyledPropsT>('p', ({ $theme }) => ({
   marginRight: 0,
 }));
 
+export const StyledMenuDivider = styled<StyledPropsT>('li', ({ $theme }) => ({
+  color: $theme.colors.contentPrimary,
+  borderBottomWidth: $theme.borders.border300.borderWidth,
+  borderBottomStyle: $theme.borders.border300.borderStyle,
+  borderBottomColor: $theme.borders.border300.borderColor,
+  marginTop: $theme.sizing.scale100,
+  marginBottom: $theme.sizing.scale100,
+  marginLeft: $theme.sizing.scale600,
+  marginRight: $theme.sizing.scale600,
+  listStyle: 'none',
+  height: 0,
+}));
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/menu/types.d.ts

@@ -118,6 +118,7 @@ export declare type MenuOverrides = {
     Option?: Override;
     OptgroupHeader?: Override;
     ListItem?: Override;
+    MenuDivider?: Override;
 };
 export declare type MenuProps = {
     overrides?: MenuOverrides;

package/menu/types.js.flow

@@ -144,6 +144,7 @@ export type MenuPropsT = {
     Option?: OverrideT,
     OptgroupHeader?: OverrideT,
     ListItem?: OverrideT,
+    MenuDivider?: OverrideT;
   },
   /** Renders all menu content for SEO purposes regardless of menu  state */
   renderAll?: boolean,

package/message-card/message-card.js

@@ -13,7 +13,7 @@ var _styledComponents = require("./styled-components");
 
 var _button = require("../button");
 
-var _index = require("../styles/index.js");
+var _index = require("../styles/index");
 
 var _ = require("../");
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-c9564f7",
+  "version": "0.0.0-next-3fb5d3f",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",