baseui 11.0.2 → 11.1.1

package/es/app-nav-bar/app-nav-bar.js

@@ -8,13 +8,12 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides.js';
-import { Cell, Grid } from '../layout-grid/index.js';
 import { useStyletron } from '../styles/index.js';
 import { isFocusVisible } from '../utils/focusVisible.js';
 import { KIND, POSITION } from './constants.js';
 import MobileNav from './mobile-menu.js';
 import UserMenu from './user-menu.js';
-import { StyledRoot, StyledSpacing, StyledPrimaryMenuContainer, StyledSubnavContainer, StyledSecondaryMenuContainer, StyledAppName, StyledMainMenuItem } from './styled-components.js';
+import { StyledRoot, StyledSpacing, StyledPrimaryMenuContainer, StyledSecondaryMenuContainer, StyledAppName, StyledMainMenuItem, StyledDesktopMenuContainer, StyledDesktopMenu } from './styled-components.js';
 import { defaultMapItemToNode, mapItemsActive } from './utils.js';
 
 function MainMenuItem(props) {
@@ -72,11 +71,8 @@ function SecondaryMenu(props) {
     onSelect,
     overrides = {}
   } = props;
-  const [SubnavContainer, subnavContainerProps] = getOverrides(overrides.SubnavContainer, StyledSubnavContainer);
   const [SecondaryMenuContainer, secondaryMenuContainerProps] = getOverrides(overrides.SecondaryMenuContainer, StyledSecondaryMenuContainer);
-  return /*#__PURE__*/React.createElement(SubnavContainer, subnavContainerProps, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
-    span: [0, 8, 12]
-  }, /*#__PURE__*/React.createElement(SecondaryMenuContainer, _extends({
+  return /*#__PURE__*/React.createElement(SecondaryMenuContainer, _extends({
     role: "navigation",
     "aria-label": "Secondary navigation"
   }, secondaryMenuContainerProps), items.map((item, index) =>
@@ -89,7 +85,7 @@ function SecondaryMenu(props) {
     key: index,
     onSelect: onSelect,
     overrides: overrides
-  }))))));
+  })));
 }
 
 export default function AppNavBar(props) {
@@ -116,6 +112,8 @@ export default function AppNavBar(props) {
   const [Spacing, spacingProps] = getOverrides(overrides.Spacing, StyledSpacing);
   const [AppName, appNameProps] = getOverrides(overrides.AppName, StyledAppName);
   const [PrimaryMenuContainer, primaryMenuContainerProps] = getOverrides(overrides.PrimaryMenuContainer, StyledPrimaryMenuContainer);
+  const [DesktopMenuContainer, desktopMenuContainerProps] = getOverrides(overrides.DesktopMenuContainer, StyledDesktopMenuContainer);
+  const [DesktopMenu, desktopMenuProps] = getOverrides(overrides.DesktopMenu, StyledDesktopMenu);
   let secondaryMenu;
   let desktopSubNavPosition = POSITION.horizontal;
   let mobileSubNavPosition = POSITION.vertical;
@@ -127,9 +125,7 @@ export default function AppNavBar(props) {
         display: 'none'
       }
     })
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
-    span: [4, 8, 0]
-  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, mainItems.length || userItems.length ? /*#__PURE__*/React.createElement(MobileNav, props) : null, /*#__PURE__*/React.createElement(AppName, appNameProps, title)))), secondaryMenu && mobileSubNavPosition === POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
+  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, mainItems.length || userItems.length ? /*#__PURE__*/React.createElement(MobileNav, props) : null, /*#__PURE__*/React.createElement(AppName, appNameProps, title)), secondaryMenu && mobileSubNavPosition === POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
     items: secondaryMenu,
     mapItemToNode: mapItemToNode,
     onSelect: onMainItemSelect,
@@ -140,11 +136,7 @@ export default function AppNavBar(props) {
         display: 'none'
       }
     })
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
-    span: [0, 3, 3]
-  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, /*#__PURE__*/React.createElement(AppName, appNameProps, title))), /*#__PURE__*/React.createElement(Cell, {
-    span: userItems.length ? [0, 4, 8] : [0, 5, 9]
-  }, /*#__PURE__*/React.createElement(PrimaryMenuContainer, _extends({
+  }, /*#__PURE__*/React.createElement(DesktopMenuContainer, desktopMenuContainerProps, /*#__PURE__*/React.createElement(DesktopMenu, desktopMenuProps, /*#__PURE__*/React.createElement(AppName, appNameProps, title), /*#__PURE__*/React.createElement(PrimaryMenuContainer, _extends({
     role: "navigation",
     "aria-label": "Main navigation"
   }, primaryMenuContainerProps), mainItems.map((item, index) => {
@@ -165,9 +157,7 @@ export default function AppNavBar(props) {
       onSelect: onMainItemSelect,
       overrides: overrides
     });
-  }))), userItems.length ? /*#__PURE__*/React.createElement(Cell, {
-    span: [0, 1, 1]
-  }, /*#__PURE__*/React.createElement(Spacing, spacingProps, /*#__PURE__*/React.createElement(UserMenu, {
+  })), userItems.length ? /*#__PURE__*/React.createElement(UserMenu, {
     mapItemToNode: mapItemToNode,
     onItemSelect: onUserItemSelect,
     overrides: overrides,
@@ -175,7 +165,7 @@ export default function AppNavBar(props) {
     usernameSubtitle: usernameSubtitle,
     userImgUrl: userImgUrl,
     userItems: userItems
-  }))) : null), secondaryMenu && desktopSubNavPosition === POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
+  }) : null)), secondaryMenu && desktopSubNavPosition === POSITION.horizontal && /*#__PURE__*/React.createElement(SecondaryMenu, {
     items: secondaryMenu,
     mapItemToNode: mapItemToNode,
     onSelect: onMainItemSelect,

package/es/app-nav-bar/styled-components.js

@@ -43,20 +43,11 @@ export const StyledRoot = styled('div', props => {
   } = props;
   return { ...$theme.typography.font300,
     boxSizing: 'border-box',
-    backgroundColor: $theme.colors.backgroundPrimary,
-    boxShadow: '0px 1px 0px rgba(0, 0, 0, 0.08)',
-    width: '100%'
+    backgroundColor: $theme.colors.backgroundPrimary
   };
 });
 StyledRoot.displayName = "StyledRoot";
-export const StyledSubnavContainer = styled('div', ({
-  $theme
-}) => {
-  return {
-    boxSizing: 'border-box',
-    boxShadow: '0px -1px 0px rgba(0, 0, 0, 0.08)'
-  };
-});
+export const StyledSubnavContainer = styled('div', {});
 StyledSubnavContainer.displayName = "StyledSubnavContainer";
 export const StyledSpacing = styled('div', props => {
   const {
@@ -106,9 +97,11 @@ export const StyledPrimaryMenuContainer = styled('div', ({
     height: '100%',
     display: 'flex',
     flexDirection: 'row',
+    flexGrow: 1,
     flexWrap: 'nowrap',
     justifyContent: 'flex-end',
-    alignItems: 'stretch'
+    alignItems: 'stretch',
+    paddingInlineEnd: $theme.sizing.scale1000
   };
 });
 StyledPrimaryMenuContainer.displayName = "StyledPrimaryMenuContainer";
@@ -167,6 +160,8 @@ export const StyledSecondaryMenuContainer = styled('div', ({
     flexDirection: 'row',
     flexWrap: 'nowrap',
     justifyContent: 'flex-start',
+    margin: 'auto',
+    maxWidth: `${$theme.breakpoints.large}px`,
     alignItems: 'stretch',
     overflow: 'auto'
   };
@@ -219,4 +214,28 @@ export const StyledUserProfileInfoContainer = styled('div', ({
     alignSelf: 'center'
   };
 });
-StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
+StyledUserProfileInfoContainer.displayName = "StyledUserProfileInfoContainer";
+export const StyledDesktopMenuContainer = styled('div', ({
+  $theme
+}) => {
+  return {
+    borderBottomWidth: '1px',
+    borderBottomStyle: 'solid',
+    borderBottomColor: `${$theme.colors.borderOpaque}`
+  };
+});
+StyledDesktopMenuContainer.displayName = "StyledDesktopMenuContainer";
+export const StyledDesktopMenu = styled('div', ({
+  $theme
+}) => {
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'space-between',
+    margin: 'auto',
+    maxWidth: `${$theme.breakpoints.large}px`,
+    paddingBlockStart: '18px',
+    paddingBlockEnd: '18px'
+  };
+});
+StyledDesktopMenu.displayName = "StyledDesktopMenu";

package/es/badge/badge.js

@@ -0,0 +1,70 @@
+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); }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledBadge, StyledRoot, StyledPositioner } from './styled-components.js';
+import { PLACEMENT, ROLE, SHAPE, HIERARCHY } from './constants.js';
+import { getAnchorFromChildren } from './utils.js';
+
+const Badge = ({
+  children,
+  content,
+  color,
+  shape = SHAPE.rectangle,
+  placement = PLACEMENT.topRight,
+  hierarchy,
+  horizontalOffset,
+  verticalOffset,
+  hidden,
+  overrides = {}
+}) => {
+  const [Badge, badgeProps] = getOverrides(overrides.Badge, StyledBadge);
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [Positioner, positionerProps] = getOverrides(overrides.Positioner, StyledPositioner);
+  const anchor = getAnchorFromChildren(children);
+  const VALID_RECT_PLACEMENTS = [PLACEMENT.topLeft, PLACEMENT.topRight, PLACEMENT.bottomRight, PLACEMENT.bottomLeft];
+
+  if (process.env.NODE_ENV !== "production") {
+    if (shape === SHAPE.rectangle && !VALID_RECT_PLACEMENTS.includes(placement)) {
+      console.warn('Rectangle badges should only be placed in a corner or used inline');
+    }
+
+    if (shape === SHAPE.rectangle && hierarchy === HIERARCHY.secondary && anchor) {
+      console.warn('Secondary badges should not be positioned. Use the inline version of this badge instead.');
+    }
+
+    if (shape === SHAPE.pill && hierarchy === HIERARCHY.secondary) {
+      console.warn('Pill badges should only be used with primary hierarchy');
+    }
+  } // If there's no anchor, render the badge inline
+
+
+  if (!anchor) {
+    return /*#__PURE__*/React.createElement(Badge, _extends({
+      $hierarchy: hierarchy,
+      $shape: shape,
+      $color: color,
+      $hidden: hidden
+    }, badgeProps), content);
+  }
+
+  return /*#__PURE__*/React.createElement(Root, rootProps, anchor, /*#__PURE__*/React.createElement(Positioner, _extends({
+    $horizontalOffset: horizontalOffset,
+    $verticalOffset: verticalOffset,
+    $placement: placement,
+    $role: ROLE.badge
+  }, positionerProps), /*#__PURE__*/React.createElement(Badge, _extends({
+    $hierarchy: hierarchy,
+    $shape: shape,
+    $color: color,
+    $hidden: hidden
+  }, badgeProps), content)));
+};
+
+export default Badge;

package/es/badge/constants.js

@@ -0,0 +1,42 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export const HIERARCHY = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary'
+});
+export const SHAPE = Object.freeze({
+  pill: 'pill',
+  rectangle: 'rectangle'
+});
+export const COLOR = Object.freeze({
+  accent: 'accent',
+  primary: 'primary',
+  positive: 'positive',
+  negative: 'negative',
+  warning: 'warning'
+});
+export const PLACEMENT = Object.freeze({
+  topLeft: 'topLeft',
+  topRight: 'topRight',
+  bottomRight: 'bottomRight',
+  bottomLeft: 'bottomLeft',
+  topLeftEdge: 'topLeftEdge',
+  topEdge: 'topEdge',
+  topRightEdge: 'topRightEdge',
+  bottomRightEdge: 'bottomRightEdge',
+  bottomEdge: 'bottomEdge',
+  bottomLeftEdge: 'bottomLeftEdge',
+  leftTopEdge: 'leftTopEdge',
+  rightTopEdge: 'rightTopEdge',
+  rightBottomEdge: 'rightBottomEdge',
+  leftBottomEdge: 'leftBottomEdge'
+});
+export const ROLE = Object.freeze({
+  badge: 'badge',
+  notificationCircle: 'notificationCircle',
+  hintDot: 'hintDot'
+});

package/es/badge/hint-dot.js

@@ -0,0 +1,55 @@
+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); }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { useStyletron } from '../styles/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledHintDot, StyledRoot, StyledPositioner } from './styled-components.js';
+import { PLACEMENT, ROLE } from './constants.js';
+import { getAnchorFromChildren } from './utils.js';
+
+const HintDot = ({
+  children,
+  color,
+  horizontalOffset: horizontalOffsetProp,
+  verticalOffset: verticalOffsetProp,
+  hidden,
+  overrides = {}
+}) => {
+  const [HintDot, hintDotProps] = getOverrides(overrides.Badge, StyledHintDot);
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [Positioner, positionerProps] = getOverrides(overrides.Positioner, StyledPositioner);
+  const [, theme] = useStyletron();
+  const anchor = getAnchorFromChildren(children); // if the anchor is a string, we supply default offsets
+
+  let horizontalOffset = horizontalOffsetProp;
+  let verticalOffset = verticalOffsetProp;
+
+  if (typeof anchor === 'string') {
+    if (!horizontalOffset) {
+      horizontalOffset = '-14px';
+    }
+
+    if (!verticalOffset) {
+      verticalOffset = '-4px';
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(Root, rootProps, anchor, /*#__PURE__*/React.createElement(Positioner, _extends({
+    $horizontalOffset: horizontalOffset,
+    $verticalOffset: verticalOffset,
+    $placement: theme.direction === 'rtl' ? PLACEMENT.topLeft : PLACEMENT.topRight,
+    $role: ROLE.hintDot
+  }, positionerProps), /*#__PURE__*/React.createElement(HintDot, _extends({}, hintDotProps, {
+    $color: color,
+    $horizontalOffset: horizontalOffset,
+    $hidden: hidden
+  }))));
+};
+
+export default HintDot;

package/es/badge/index.js

@@ -0,0 +1,11 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export { default as Badge } from './badge.js';
+export { default as NotificationCircle } from './notification-circle.js';
+export { default as HintDot } from './hint-dot.js';
+export { HIERARCHY, SHAPE, COLOR, PLACEMENT } from './constants.js';
+export * from './styled-components.js';

package/es/badge/notification-circle.js

@@ -0,0 +1,65 @@
+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); }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledNotificationCircle, StyledRoot, StyledPositioner } from './styled-components.js';
+import { PLACEMENT, ROLE } from './constants.js';
+import { getAnchorFromChildren } from './utils.js';
+
+const NotificationCircle = ({
+  children,
+  content: contentProp,
+  color,
+  placement = PLACEMENT.topRight,
+  horizontalOffset,
+  verticalOffset,
+  hidden,
+  overrides = {}
+}) => {
+  const [NotificationCircle, NotificationCircleProps] = getOverrides(overrides.Badge, StyledNotificationCircle);
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [Positioner, positionerProps] = getOverrides(overrides.Positioner, StyledPositioner);
+  const anchor = getAnchorFromChildren(children);
+
+  if (process.env.NODE_ENV !== "production") {
+    if (typeof contentProp === 'string') {
+      console.error(`[baseui] NotificationCircle child must be number or icon, found string`);
+    }
+
+    if (placement && placement !== PLACEMENT.topLeft && placement !== PLACEMENT.topRight) {
+      console.error(`[baseui] NotificationCircle must be placed topLeft or topRight, found ${placement}`);
+    }
+  }
+
+  let content = contentProp;
+
+  if (typeof content === 'number' && content > 9) {
+    content = '9+';
+  } // If there's no anchor, render the badge inline
+
+
+  if (!anchor) {
+    return /*#__PURE__*/React.createElement(NotificationCircle, _extends({
+      $color: color,
+      $hidden: hidden
+    }, NotificationCircleProps), content);
+  }
+
+  return /*#__PURE__*/React.createElement(Root, rootProps, anchor, /*#__PURE__*/React.createElement(Positioner, _extends({
+    $horizontalOffset: horizontalOffset,
+    $verticalOffset: verticalOffset,
+    $placement: placement,
+    $role: ROLE.notificationCircle
+  }, positionerProps), /*#__PURE__*/React.createElement(NotificationCircle, _extends({}, NotificationCircleProps, {
+    $color: color,
+    $hidden: hidden
+  }), content)));
+};
+
+export default NotificationCircle;