baseui 0.0.0-alpha-c069f75 → 0.0.0-alpha-55228a8

package/button/styled-components.js

@@ -48,7 +48,7 @@ var BaseButton = (0, _index.styled)('button', function (_ref) {
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor: $theme.colors.buttonDisabledFill,
+      backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
       color: $theme.colors.buttonDisabledText
     },
     marginLeft: 0,

package/button/styled-components.js.flow

@@ -46,7 +46,10 @@ export const BaseButton = styled<SharedStylePropsT>(
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor: $theme.colors.buttonDisabledFill,
+      backgroundColor:
+        $kind === KIND.minimal || $kind === KIND.tertiary
+          ? 'transparent'
+          : $theme.colors.buttonDisabledFill,
       color: $theme.colors.buttonDisabledText,
     },
     marginLeft: 0,

package/data-table/data-table.js

@@ -445,11 +445,12 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
     viewState = EMPTY;
   }
 
+  var highlightedRow = ctx.rows[ctx.rowHighlightIndex - 1];
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-baseweb": "data-table",
     style: props.style
-  }, /*#__PURE__*/React.createElement(Headers, null), viewState === LOADING && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.loadingMessage), viewState === EMPTY && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.emptyMessage), viewState === RENDERING && props.children, ctx.rowActions && Boolean(ctx.rowActions.length) && ctx.rowHighlightIndex > 0 && Boolean(ctx.rows[ctx.rowHighlightIndex - 1]) && !ctx.isScrollingX && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Headers, null), viewState === LOADING && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.loadingMessage), viewState === EMPTY && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.emptyMessage), viewState === RENDERING && props.children, ctx.rowActions && Boolean(ctx.rowActions.length) && ctx.rowHighlightIndex > 0 && Boolean(highlightedRow) && !ctx.isScrollingX && /*#__PURE__*/React.createElement("div", {
     style: {
       alignItems: 'center',
       backgroundColor: theme.colors.backgroundTertiary,
@@ -463,7 +464,12 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
       left: theme.direction === 'rtl' ? 0 : 'initial',
       top: (ctx.rowHighlightIndex - 1) * ctx.rowHeight + HEADER_ROW_HEIGHT
     }
-  }, ctx.rowActions.map(function (rowAction) {
+  }, (typeof ctx.rowActions === 'function' ? ctx.rowActions(highlightedRow) : ctx.rowActions).map(function (rowAction) {
+    if (rowAction.renderButton) {
+      var RowActionButton = rowAction.renderButton;
+      return /*#__PURE__*/React.createElement(RowActionButton, null);
+    }
+
     var RowActionIcon = rowAction.renderIcon;
     return /*#__PURE__*/React.createElement(_index.Button, {
       alt: rowAction.label,
@@ -480,7 +486,11 @@ var InnerTableElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
       overrides: {
         BaseButton: {
           style: {
-            marginLeft: theme.sizing.scale300
+            marginLeft: theme.sizing.scale300,
+            paddingTop: theme.sizing.scale100,
+            paddingRight: theme.sizing.scale100,
+            paddingBottom: theme.sizing.scale100,
+            paddingLeft: theme.sizing.scale100
           }
         }
       }

package/data-table/data-table.js.flow

@@ -53,7 +53,7 @@ type HeaderContextT = {|
   onSelectNone: () => void,
   onSort: number => void,
   resizableColumnWidths: boolean,
-  rowActions: RowActionT[],
+  rowActions: RowActionT[] | (RowT => RowActionT[]),
   rowHeight: number,
   rowHighlightIndex: number,
   rows: RowT[],
@@ -554,6 +554,8 @@ const InnerTableElement = React.forwardRef<
     viewState = EMPTY;
   }
 
+  const highlightedRow = ctx.rows[ctx.rowHighlightIndex - 1];
+
   return (
     <div ref={ref} data-baseweb="data-table" style={props.style}>
       <Headers />
@@ -571,7 +573,7 @@ const InnerTableElement = React.forwardRef<
       {ctx.rowActions &&
         Boolean(ctx.rowActions.length) &&
         ctx.rowHighlightIndex > 0 &&
-        Boolean(ctx.rows[ctx.rowHighlightIndex - 1]) &&
+        Boolean(highlightedRow) &&
         !ctx.isScrollingX && (
           <div
             style={{
@@ -589,7 +591,15 @@ const InnerTableElement = React.forwardRef<
                 (ctx.rowHighlightIndex - 1) * ctx.rowHeight + HEADER_ROW_HEIGHT,
             }}
           >
-            {ctx.rowActions.map(rowAction => {
+            {(typeof ctx.rowActions === 'function'
+              ? ctx.rowActions(highlightedRow)
+              : ctx.rowActions
+            ).map(rowAction => {
+              if (rowAction.renderButton) {
+                const RowActionButton = rowAction.renderButton;
+                return <RowActionButton />;
+              }
+
               const RowActionIcon = rowAction.renderIcon;
               return (
                 <Button
@@ -606,7 +616,13 @@ const InnerTableElement = React.forwardRef<
                   shape={BUTTON_SHAPES.round}
                   overrides={{
                     BaseButton: {
-                      style: {marginLeft: theme.sizing.scale300},
+                      style: {
+                        marginLeft: theme.sizing.scale300,
+                        paddingTop: theme.sizing.scale100,
+                        paddingRight: theme.sizing.scale100,
+                        paddingBottom: theme.sizing.scale100,
+                        paddingLeft: theme.sizing.scale100,
+                      },
                     },
                   }}
                 >

package/data-table/types.js.flow

@@ -87,6 +87,7 @@ export type RowActionT = {|
   label: string,
   onClick: ({event: SyntheticEvent<HTMLButtonElement>, row: RowT}) => mixed,
   renderIcon: React.AbstractComponent<{|size: number|}>,
+  renderButton?: React.AbstractComponent<{||}>,
 |};
 
 export type StatefulDataTablePropsT = {|
@@ -107,7 +108,7 @@ export type StatefulDataTablePropsT = {|
   onSelectionChange?: (RowT[]) => mixed,
   resizableColumnWidths?: boolean,
   rows: RowT[],
-  rowActions?: RowActionT[],
+  rowActions?: RowActionT[] | (RowT => RowActionT[]),
   rowHeight?: number,
   rowHighlightIndex?: number,
   searchable?: boolean,

package/datepicker/day.js

@@ -357,6 +357,7 @@ var Day = /*#__PURE__*/function (_React$Component) {
         $isFocusVisible: this.state.isFocusVisible,
         $startOfMonth: this.dateHelpers.isStartOfMonth(date),
         $endOfMonth: this.dateHelpers.isEndOfMonth(date),
+        $month: this.getMonthProp(),
         $outsideMonth: $outsideMonth,
         $outsideMonthWithinRange: $outsideMonthWithinRange,
         $peekNextMonth: this.props.peekNextMonth,

package/datepicker/day.js.flow

@@ -313,6 +313,7 @@ export default class Day<T = Date> extends React.Component<
       $isFocusVisible: this.state.isFocusVisible,
       $startOfMonth: this.dateHelpers.isStartOfMonth(date),
       $endOfMonth: this.dateHelpers.isEndOfMonth(date),
+      $month: this.getMonthProp(),
       $outsideMonth,
       $outsideMonthWithinRange,
       $peekNextMonth: this.props.peekNextMonth,

package/datepicker/index.d.ts

@@ -242,6 +242,7 @@ export type SharedStylePropsT = {
   $isHeader: boolean;
   $isHighlighted: boolean;
   $isHovered: boolean;
+  $month: number;
   $outsideMonth: boolean;
   $pseudoHighlighted: boolean;
   $pseudoSelected: boolean;

package/datepicker/types.js.flow

@@ -231,6 +231,7 @@ export type SharedStylePropsT = {
   $isHighlighted: ?boolean,
   $isHovered: ?boolean,
   $isFocusVisible: ?boolean,
+  $month: ?number,
   $outsideMonth: ?boolean,
   $outsideMonthWithinRange: ?boolean,
   $peekNextMonth: ?boolean,

package/drawer/close-icon.js

@@ -23,9 +23,10 @@ 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.
 */
-function CloseIcon() {
+function CloseIcon(props) {
   return /*#__PURE__*/React.createElement(_delete.default, {
     size: "inherit",
-    color: "inherit"
+    color: "inherit",
+    title: props.title
   });
 }

package/drawer/close-icon.js.flow

@@ -8,8 +8,8 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import Delete from '../icon/delete.js';
 
-export function CloseIcon() {
-  return <Delete size="inherit" color="inherit" />;
+export function CloseIcon(props: {title: string}) {
+  return <Delete size="inherit" color="inherit" title={props.title} />;
 }
 
 declare var __DEV__: boolean;

package/drawer/drawer.js

@@ -354,7 +354,9 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
         }, sharedProps, closeProps, {
           onFocus: (0, _focusVisible.forkFocus)(closeProps, _this3.handleFocus),
           onBlur: (0, _focusVisible.forkBlur)(closeProps, _this3.handleBlur)
-        }), /*#__PURE__*/React.createElement(_closeIcon.CloseIcon, null)) : null)));
+        }), /*#__PURE__*/React.createElement(_closeIcon.CloseIcon, {
+          title: locale.drawer.close
+        })) : null)));
       });
     }
   }, {

package/drawer/drawer.js.flow

@@ -278,7 +278,7 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
                       onFocus={forkFocus(closeProps, this.handleFocus)}
                       onBlur={forkBlur(closeProps, this.handleBlur)}
                     >
-                      <CloseIcon />
+                      <CloseIcon title={locale.drawer.close} />
                     </Close>
                   ) : null}
                 </DrawerContainer>

package/es/button/styled-components.js

@@ -39,7 +39,7 @@ export const BaseButton = styled('button', ({
   cursor: 'pointer',
   ':disabled': {
     cursor: 'not-allowed',
-    backgroundColor: $theme.colors.buttonDisabledFill,
+    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText
   },
   marginLeft: 0,

package/es/data-table/data-table.js

@@ -360,11 +360,12 @@ const InnerTableElement = /*#__PURE__*/React.forwardRef((props, ref) => {
     viewState = EMPTY;
   }
 
+  const highlightedRow = ctx.rows[ctx.rowHighlightIndex - 1];
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     "data-baseweb": "data-table",
     style: props.style
-  }, /*#__PURE__*/React.createElement(Headers, null), viewState === LOADING && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.loadingMessage), viewState === EMPTY && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.emptyMessage), viewState === RENDERING && props.children, ctx.rowActions && Boolean(ctx.rowActions.length) && ctx.rowHighlightIndex > 0 && Boolean(ctx.rows[ctx.rowHighlightIndex - 1]) && !ctx.isScrollingX && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Headers, null), viewState === LOADING && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.loadingMessage), viewState === EMPTY && /*#__PURE__*/React.createElement(LoadingOrEmptyMessage, null, ctx.emptyMessage), viewState === RENDERING && props.children, ctx.rowActions && Boolean(ctx.rowActions.length) && ctx.rowHighlightIndex > 0 && Boolean(highlightedRow) && !ctx.isScrollingX && /*#__PURE__*/React.createElement("div", {
     style: {
       alignItems: 'center',
       backgroundColor: theme.colors.backgroundTertiary,
@@ -378,7 +379,12 @@ const InnerTableElement = /*#__PURE__*/React.forwardRef((props, ref) => {
       left: theme.direction === 'rtl' ? 0 : 'initial',
       top: (ctx.rowHighlightIndex - 1) * ctx.rowHeight + HEADER_ROW_HEIGHT
     }
-  }, ctx.rowActions.map(rowAction => {
+  }, (typeof ctx.rowActions === 'function' ? ctx.rowActions(highlightedRow) : ctx.rowActions).map(rowAction => {
+    if (rowAction.renderButton) {
+      const RowActionButton = rowAction.renderButton;
+      return /*#__PURE__*/React.createElement(RowActionButton, null);
+    }
+
     const RowActionIcon = rowAction.renderIcon;
     return /*#__PURE__*/React.createElement(Button, {
       alt: rowAction.label,
@@ -393,7 +399,11 @@ const InnerTableElement = /*#__PURE__*/React.forwardRef((props, ref) => {
       overrides: {
         BaseButton: {
           style: {
-            marginLeft: theme.sizing.scale300
+            marginLeft: theme.sizing.scale300,
+            paddingTop: theme.sizing.scale100,
+            paddingRight: theme.sizing.scale100,
+            paddingBottom: theme.sizing.scale100,
+            paddingLeft: theme.sizing.scale100
           }
         }
       }

package/es/datepicker/day.js

@@ -292,6 +292,7 @@ export default class Day extends React.Component {
       $isFocusVisible: this.state.isFocusVisible,
       $startOfMonth: this.dateHelpers.isStartOfMonth(date),
       $endOfMonth: this.dateHelpers.isEndOfMonth(date),
+      $month: this.getMonthProp(),
       $outsideMonth,
       $outsideMonthWithinRange,
       $peekNextMonth: this.props.peekNextMonth,

package/es/drawer/close-icon.js

@@ -6,9 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import Delete from '../icon/delete.js';
-export function CloseIcon() {
+export function CloseIcon(props) {
   return /*#__PURE__*/React.createElement(Delete, {
     size: "inherit",
-    color: "inherit"
+    color: "inherit",
+    title: props.title
   });
 }

package/es/drawer/drawer.js

@@ -264,7 +264,9 @@ class Drawer extends React.Component {
       }, sharedProps, closeProps, {
         onFocus: forkFocus(closeProps, this.handleFocus),
         onBlur: forkBlur(closeProps, this.handleBlur)
-      }), /*#__PURE__*/React.createElement(CloseIcon, null)) : null)));
+      }), /*#__PURE__*/React.createElement(CloseIcon, {
+        title: locale.drawer.close
+      })) : null)));
     });
   }
 

package/es/list/index.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as ListItem } from './list-item.js';
 export { default as ListItemLabel } from './list-item-label.js';
+export { default as ListHeading } from './list-heading.js';
 export { default as MenuAdapter } from './menu-adapter.js';
 export { ARTWORK_SIZES, SHAPE } from './constants.js';
 export * from './styled-components.js';

package/es/list/list-heading.js

@@ -0,0 +1,88 @@
+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 React from 'react';
+import * as ReactIs from 'react-is';
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledHeadingRoot, StyledHeadingContent, StyledHeadingContentRow, StyledHeadingEndEnhancerContainer, StyledHeadingEndEnhancerDescriptionContainer, StyledHeadingMainHeading, StyledHeadingSubHeading } from './styled-components.js';
+
+function RenderNode(props) {
+  const {
+    component,
+    ...restProps
+  } = props;
+  const Component = component;
+
+  if (!Component) {
+    return null;
+  }
+
+  if (typeof Component === 'string') {
+    return Component;
+  }
+
+  if (ReactIs.isValidElementType(Component)) {
+    // $FlowFixMe
+    return /*#__PURE__*/React.createElement(Component, restProps);
+  } // $FlowFixMe
+
+
+  return Component;
+}
+
+function isMaxLinesValid(maxLines) {
+  return maxLines === 1 || maxLines === 2;
+}
+
+const ListHeading = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    overrides = {},
+    maxLines
+  } = props;
+  const EndEnhancer = props.endEnhancer;
+  const EndEnhancerDescription = props.endEnhancerDescription;
+  const SubHeading = props.subHeading;
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledHeadingRoot);
+  const [Content, contentProps] = getOverrides(overrides.Content, StyledHeadingContent);
+  const [HeadingContainer, headingContainerProps] = getOverrides(overrides.HeadingContainer, StyledHeadingMainHeading);
+  const [SubHeadingContainer, subHeadingContainerProps] = getOverrides(overrides.SubHeadingContainer, StyledHeadingSubHeading);
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(overrides.EndEnhancerContainer, StyledHeadingEndEnhancerContainer);
+  const [EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps] = getOverrides(overrides.EndEnhancerDescriptionContainer, StyledHeadingEndEnhancerDescriptionContainer);
+  const isEndEnhancerString = typeof EndEnhancer === 'string';
+
+  if (process.env.NODE_ENV !== "production") {
+    if (isEndEnhancerString && EndEnhancerDescription) {
+      console.warn('endEnhancerDescription will not be rendered if endEnhancer is not a string');
+    }
+
+    if (maxLines && !isMaxLinesValid(maxLines)) {
+      console.warn('maxLines must be 1 or 2.');
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
+  , _extends({
+    ref: ref
+  }, rootProps), /*#__PURE__*/React.createElement(Content, contentProps, /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(HeadingContainer, _extends({
+    $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
+  }, headingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: props.heading
+  })), EndEnhancer && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({
+    $isText: isEndEnhancerString
+  }, endEnhancerContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: EndEnhancer
+  }))), (SubHeading || EndEnhancerDescription) && /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(SubHeadingContainer, _extends({
+    $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
+  }, subHeadingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: SubHeading
+  })), EndEnhancerDescription && isEndEnhancerString && /*#__PURE__*/React.createElement(EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps, /*#__PURE__*/React.createElement(RenderNode, {
+    component: EndEnhancerDescription
+  })))));
+});
+ListHeading.displayName = 'ListHeading';
+export default ListHeading;

package/es/list/menu-adapter.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import ListItem from './list-item.js';
+import { mergeOverrides } from '../helpers/overrides.js';
 const MenuAdapter = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(ListItem, {
     ref: ref,
@@ -13,7 +14,8 @@ const MenuAdapter = /*#__PURE__*/React.forwardRef((props, ref) => {
     artwork: props.artwork,
     artworkSize: props.artworkSize,
     endEnhancer: props.endEnhancer,
-    overrides: {
+    overrides: // $FlowFixMe
+    mergeOverrides({
       Root: {
         props: {
           onMouseEnter: props.onMouseEnter,
@@ -26,7 +28,7 @@ const MenuAdapter = /*#__PURE__*/React.forwardRef((props, ref) => {
           cursor: props.$disabled ? 'not-allowed' : 'pointer'
         })
       }
-    }
+    }, props.overrides)
   }, props.children);
 });
 MenuAdapter.displayName = 'MenuAdapter';

package/es/list/styled-components.js

@@ -37,7 +37,7 @@ export const StyledContent = styled('div', ({
     borderLeftStyle: 'none',
     display: 'flex',
     flexGrow: 1,
-    minHeight: $sublist ? 'initial' : '64px',
+    minHeight: $sublist ? 'initial' : $theme.sizing.scale1600,
     justifyContent: 'space-between',
     ...($theme.direction === 'rtl' ? {
       paddingLeft: $theme.sizing.scale600,
@@ -103,8 +103,103 @@ export const StyledLabelSublistContent = styled('p', ({
 }) => {
   return { ...$theme.typography.LabelMedium,
     color: $theme.colors.contentPrimary,
-    marginTop: '12px',
-    marginBottom: '12px'
+    marginTop: $theme.sizing.scale500,
+    marginBottom: $theme.sizing.scale500
   };
 });
-StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+export const StyledHeadingRoot = styled('div', ({
+  $theme
+}) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    backgroundColor: $theme.colors.backgroundPrimary,
+    overflow: 'hidden',
+    minHeight: $theme.sizing.scale1600
+  };
+});
+StyledHeadingRoot.displayName = "StyledHeadingRoot";
+export const StyledHeadingContent = styled('div', ({
+  $theme
+}) => {
+  return {
+    flexGrow: 1,
+    width: '100%',
+    minWidth: 0,
+    paddingTop: $theme.sizing.scale600,
+    paddingBottom: $theme.sizing.scale300,
+    ...($theme.direction === 'rtl' ? {
+      paddingLeft: $theme.sizing.scale600,
+      marginRight: $theme.sizing.scale600
+    } : {
+      paddingRight: $theme.sizing.scale600,
+      marginLeft: $theme.sizing.scale600
+    })
+  };
+});
+StyledHeadingContent.displayName = "StyledHeadingContent";
+export const StyledHeadingContentRow = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  width: '100%'
+});
+StyledHeadingContentRow.displayName = "StyledHeadingContentRow";
+export const StyledHeadingMainHeading = styled('p', // $FlowFixMe - suppressing due to webkit properties
+({
+  $maxLines = 1,
+  $theme
+}) => {
+  return { ...$theme.typography.HeadingSmall,
+    color: $theme.colors.contentPrimary,
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: $theme.sizing.scale600,
+    display: '-webkit-box',
+    '-webkit-line-clamp': $maxLines,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  };
+});
+StyledHeadingMainHeading.displayName = "StyledHeadingMainHeading";
+export const StyledHeadingSubHeading = styled('p', // $FlowFixMe - suppressing due to webkit properties
+({
+  $maxLines = 1,
+  $theme
+}) => {
+  return { ...$theme.typography.ParagraphLarge,
+    color: $theme.colors.contentPrimary,
+    marginTop: 0,
+    marginBottom: 0,
+    marginRight: $theme.sizing.scale600,
+    display: '-webkit-box',
+    '-webkit-line-clamp': $maxLines,
+    '-webkit-box-orient': 'vertical',
+    overflow: 'hidden'
+  };
+});
+StyledHeadingSubHeading.displayName = "StyledHeadingSubHeading";
+export const StyledHeadingEndEnhancerContainer = styled('div', ({
+  $isText,
+  $theme
+}) => ({ ...$theme.typography.LabelMedium,
+  display: 'flex',
+  alignItems: $isText ? 'flex-end' : 'center',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+}));
+StyledHeadingEndEnhancerContainer.displayName = "StyledHeadingEndEnhancerContainer";
+export const StyledHeadingEndEnhancerDescriptionContainer = styled('p', ({
+  $theme
+}) => ({ ...$theme.typography.ParagraphMedium,
+  marginTop: 0,
+  marginBottom: 0,
+  display: 'flex',
+  alignItems: 'flex-start',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+}));
+StyledHeadingEndEnhancerDescriptionContainer.displayName = "StyledHeadingEndEnhancerDescriptionContainer";

package/es/map-marker/constants.js

@@ -0,0 +1,69 @@
+/*
+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 NEEDLE_SIZES = Object.freeze({
+  none: 'none',
+  short: 'short',
+  medium: 'medium',
+  tall: 'tall'
+});
+export const NEEDLE_HEIGHTS = Object.freeze({
+  [NEEDLE_SIZES.none]: 0,
+  [NEEDLE_SIZES.short]: 4,
+  [NEEDLE_SIZES.medium]: 12,
+  [NEEDLE_SIZES.tall]: 20
+});
+export const PINHEAD_SIZES_SHAPES = Object.freeze({
+  xSmallCircle: 'x-small-circle',
+  xSmallSquare: 'x-small-square',
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+});
+export const xSmallPinheadDimension = {
+  height: 16,
+  icon: 4
+};
+export const PINHEAD_DIMENSIONS = Object.freeze({
+  [PINHEAD_SIZES_SHAPES.xSmallSquare]: xSmallPinheadDimension,
+  [PINHEAD_SIZES_SHAPES.xSmallCircle]: xSmallPinheadDimension,
+  [PINHEAD_SIZES_SHAPES.small]: {
+    height: 24,
+    icon: 16
+  },
+  [PINHEAD_SIZES_SHAPES.medium]: {
+    height: 36,
+    icon: 16
+  },
+  [PINHEAD_SIZES_SHAPES.large]: {
+    height: 48,
+    icon: 24
+  }
+});
+export const PINHEAD_TYPES = Object.freeze({
+  floating: 'floating',
+  fixed: 'fixed'
+});
+export const FLOATING_MARKER_SIZES = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+});
+export const FLOATING_MARKER_ANCHOR_POSITIONS = Object.freeze({
+  none: 'none',
+  topLeft: 'top-left',
+  topRight: 'top-right',
+  bottomRight: 'bottom-right',
+  bottomLeft: 'bottom-left'
+});
+export const FLOATING_MARKER_ANCHOR_TYPES = Object.freeze({
+  circle: 'circle',
+  square: 'square'
+});
+export const dragShadowHeight = 4;
+export const dragShadowMarginTop = 6;
+export const dragShadowWidth = 6;
+export const anchorSize = 16;