baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/es/menu/styled-components.js

@@ -34,7 +34,7 @@ export const StyledList = styled('ul', ({
   };
 });
 StyledList.displayName = "StyledList";
-StyledList.displayName = 'StyledList';
+StyledList.displayName = 'StyledList'; // @ts-ignore
 
 function getFontColor(props) {
   if (props.$disabled) {
@@ -50,7 +50,8 @@ function getFontColor(props) {
   }
 
   return props.$theme.colors.menuFontDefault;
-}
+} // @ts-ignore
+
 
 function getBackgroundColor(props) {
   if (props.$disabled) {
@@ -133,7 +134,8 @@ export const StyledListItemElement = styled('li', props => {
   };
 });
 StyledListItemElement.displayName = "StyledListItemElement";
-StyledListItemElement.displayName = 'StyledListItemElement';
+StyledListItemElement.displayName = 'StyledListItemElement'; // @ts-ignore
+
 export const StyledListItem = withWrapper(StyledListItemElement, Styled => // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function StyledListItem({
   item,

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

@@ -13,7 +13,7 @@ import { useStyletron } from '../styles/index';
 import { ThemeProvider, LightTheme } from '../';
 import { getBackgroundColorType } from './utils';
 import { colors } from '../tokens';
-import { getOverrides } from '../helpers/overrides';
+import { getOverrides, mergeOverrides } from '../helpers/overrides';
 import { IMAGE_LAYOUT, BACKGROUND_COLOR_TYPE, BUTTON_KIND } from './constants';
 
 const ButtonAlwaysLightTheme = ({
@@ -40,13 +40,28 @@ const MessageCard = ({
     backgroundPosition,
     ariaLabel
   } = image || {};
-  const [Root, RootProps] = getOverrides(overrides.Root, StyledRoot);
-  const [ContentContainer, ContentContainerProps] = getOverrides(overrides.ContentContainer, StyledContentContainer);
-  const [HeadingContainer, HeadingContainerProps] = getOverrides(overrides.HeadingContainer, StyledHeadingContainer);
-  const [ParagraphContainer, ParagraphContainerProps] = getOverrides(overrides.ParagraphContainer, StyledParagraphContainer);
-  const [Image, ImageProps] = getOverrides(overrides.Image, StyledImage);
-  const [Button, ButtonProps] = getOverrides(overrides.Button, ButtonAlwaysLightTheme);
   const [, theme] = useStyletron();
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [ContentContainer, ContentContainerProps] = getOverrides(overrides.ContentContainer, StyledContentContainer);
+  const [HeadingContainer, headingContainerProps] = getOverrides(overrides.HeadingContainer, StyledHeadingContainer);
+  const [ParagraphContainer, paragraphContainerProps] = getOverrides(overrides.ParagraphContainer, StyledParagraphContainer);
+  const [Image, imageProps] = getOverrides(overrides.Image, StyledImage);
+  const [Button, buttonProps] = getOverrides(overrides.Button, ButtonAlwaysLightTheme);
+  const defaultButtonOverrides = {
+    BaseButton: {
+      style: {
+        textAlign: 'center',
+        pointerEvents: 'none',
+        ...(buttonKind === BUTTON_KIND.tertiary ? {
+          marginTop: theme.sizing.scale100,
+          transform: theme.direction === 'rtl' ? `translateX(${theme.sizing.scale500})` : `translateX(-${theme.sizing.scale500})`
+        } : {
+          marginTop: theme.sizing.scale500
+        })
+      }
+    }
+  };
+  buttonProps.overrides = mergeOverrides(defaultButtonOverrides, buttonProps.overrides);
   let backgroundColorType = backgroundColorTypeProp || getBackgroundColorType(backgroundColor);
 
   if (!backgroundColorType) {
@@ -80,35 +95,21 @@ const MessageCard = ({
     $backgroundColor: backgroundColor,
     $backgroundColorType: backgroundColorType,
     $imageLayout: layout
-  }, RootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
+  }, rootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
     role: "img",
     "aria-label": ariaLabel,
     $src: src,
     $imageLayout: layout,
     $backgroundPosition: backgroundPosition
-  }, ImageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, HeadingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, ParagraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
+  }, imageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, headingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, paragraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
     $as: "div",
     kind: buttonKind,
     shape: SHAPE.pill,
     size: SIZE.compact,
     role: "none",
     tabIndex: -1,
-    colors: buttonColors,
-    overrides: {
-      BaseButton: {
-        style: {
-          textAlign: 'center',
-          pointerEvents: 'none',
-          ...(buttonKind === BUTTON_KIND.tertiary ? {
-            marginTop: theme.sizing.scale100,
-            transform: theme.direction === 'rtl' ? `translateX(${theme.sizing.scale500})` : `translateX(-${theme.sizing.scale500})`
-          } : {
-            marginTop: theme.sizing.scale500
-          })
-        }
-      }
-    }
-  }, ButtonProps), buttonLabel)));
+    colors: buttonColors
+  }, buttonProps), buttonLabel)));
 };
 
 export default MessageCard;

package/es/mobile-header/constants.js

@@ -1,6 +1,5 @@
 /*
 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.
 */

package/es/mobile-header/index.js

@@ -1,6 +1,5 @@
 /*
 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.
 */

package/es/mobile-header/mobile-header.js

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /*
 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.
 */
@@ -85,8 +84,8 @@ export function MobileHeader({
     $expanded: expanded
   }), /*#__PURE__*/React.createElement(NavContainer, _extends({
     $type: type,
-    $hasTextContent: !Boolean(navButton.renderIcon)
-  }, navContainerProps), /*#__PURE__*/React.createElement(HeaderButton, _extends({
+    $hasTextContent: navButton && !Boolean(navButton.renderIcon)
+  }, navContainerProps), navButton && /*#__PURE__*/React.createElement(HeaderButton, _extends({
     onClick: navButton.onClick,
     type: type,
     "aria-label": navButton.label

package/es/mobile-header/styled-components.js

@@ -1,6 +1,5 @@
 /*
 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.
 */
@@ -13,6 +12,7 @@ export const StyledRoot = styled('div', ({
   width: '100%',
   display: 'grid',
   gridTemplateColumns: 'auto 1fr auto',
+  gridTemplateRows: '48px',
   ...($type === TYPE.floating ? {
     backgroundColor: 'transparent',
     pointerEvents: 'none'
@@ -34,6 +34,7 @@ export const StyledNavContainer = styled('div', ({
   };
   return {
     pointerEvents: 'auto',
+    minWidth: '48px',
     ...($hasTextContent && $type === TYPE.fixed ? {} : floatingPadding)
   };
 });

package/es/modal/modal-button.js

@@ -12,6 +12,7 @@ import { mergeOverrides } from '../helpers/overrides';
 // ModalButtons should have some margin pre-applied
 const overrides = {
   BaseButton: {
+    // @ts-ignore
     style: ({
       $theme
     }) => {

package/es/modal/modal.js

@@ -16,7 +16,7 @@ import { LocaleContext } from '../locale';
 import { getOverrides } from '../helpers/overrides';
 import { Layer } from '../layer';
 import { SIZE, ROLE, CLOSE_SOURCE } from './constants';
-import { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose } from './styled-components';
+import { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose, Hidden } from './styled-components';
 import { CloseIcon } from './close-icon';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 
@@ -197,10 +197,13 @@ class Modal extends React.Component {
       closeable
     } = this.props;
     return {
+      // @ts-ignore
       $animate: animate,
       $isVisible: this.state.isVisible,
       $isOpen: !!isOpen,
+      // @ts-ignore
       $size: size,
+      // @ts-ignore
       $role: role,
       $closeable: !!closeable,
       $isFocusVisible: this.state.isFocusVisible
@@ -228,7 +231,7 @@ class Modal extends React.Component {
     return typeof children === 'function' ? children() : children;
   }
 
-  renderModal() {
+  renderModal(renderedContent) {
     const {
       overrides = {},
       closeable,
@@ -248,7 +251,6 @@ class Modal extends React.Component {
     const [Dialog, dialogProps] = getOverrides(DialogOverride, StyledDialog);
     const [Close, closeProps] = getOverrides(CloseOverride, StyledClose);
     const sharedProps = this.getSharedProps();
-    const children = this.getChildren();
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(FocusLock, {
       disabled: !focusLock // Allow focus to escape when UI is within an iframe
       ,
@@ -256,7 +258,8 @@ class Modal extends React.Component {
       returnFocus: returnFocus,
       autoFocus: autoFocus
     }, /*#__PURE__*/React.createElement(Root, _extends({
-      "data-baseweb": "modal",
+      "data-baseweb": "modal" // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ,
       ref: this.rootRef
     }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer // eslint-disable-next-line @typescript-eslint/no-explicit-any
     , _extends({
@@ -266,7 +269,7 @@ class Modal extends React.Component {
       "aria-modal": true,
       "aria-label": "dialog",
       role: role
-    }, sharedProps, dialogProps), children, closeable ? /*#__PURE__*/React.createElement(Close, _extends({
+    }, sharedProps, dialogProps), renderedContent, closeable ? /*#__PURE__*/React.createElement(Close, _extends({
       "aria-label": locale.modal.close,
       onClick: this.onCloseClick
     }, sharedProps, closeProps, {
@@ -276,21 +279,23 @@ class Modal extends React.Component {
   }
 
   render() {
-    // Only render modal on the browser (portals aren't supported server-side)
-    if (!this.state.mounted) {
-      return null;
-    } // Only render the modal if its isOpen is passed, or isVisible is true (still animating)
-
-
-    if (!this.props.isOpen && !this.state.isVisible) {
+    // Only render an open and non-renderAll modal on the browser (portals aren't supported server-side)
+    const mountedAndOpen = this.state.mounted && (this.props.isOpen || this.state.isVisible);
+    const renderedContent = mountedAndOpen || this.props.renderAll ? this.getChildren() : null;
+
+    if (renderedContent) {
+      if (mountedAndOpen) {
+        return /*#__PURE__*/React.createElement(Layer, {
+          onEscape: this.onEscape,
+          onDocumentClick: this.onDocumentClick,
+          mountNode: this.props.mountNode
+        }, this.renderModal(renderedContent));
+      } else {
+        return /*#__PURE__*/React.createElement(Hidden, null, renderedContent);
+      }
+    } else {
       return null;
     }
-
-    return /*#__PURE__*/React.createElement(Layer, {
-      onEscape: this.onEscape,
-      onDocumentClick: this.onDocumentClick,
-      mountNode: this.props.mountNode
-    }, this.renderModal());
   }
 
 }
@@ -305,7 +310,8 @@ _defineProperty(Modal, "defaultProps", {
   isOpen: false,
   overrides: {},
   role: ROLE.dialog,
-  size: SIZE.default
+  size: SIZE.default,
+  renderAll: false
 });
 
 export default Modal;

package/es/modal/styled-components.js

@@ -10,12 +10,14 @@ import { SIZE, SIZE_WIDTHS } from './constants';
 function getSizeStyles($size) {
   const styles = {
     maxWidth: '100%',
+    // @ts-ignore
     width: null
   };
 
   if (typeof $size === 'number') {
-    styles.width = `${$size}px`;
+    styles.width = `${$size}px`; // @ts-ignore
   } else if (SIZE[$size]) {
+    // @ts-ignore
     styles.width = SIZE_WIDTHS[$size];
   } else if (typeof $size === 'string') {
     styles.width = $size;
@@ -200,4 +202,9 @@ export const ModalFooter = styled('div', ({
   textAlign: $theme.direction === 'rtl' ? 'left' : 'right'
 }));
 ModalFooter.displayName = "ModalFooter";
-ModalFooter.displayName = 'ModalFooter';
+ModalFooter.displayName = 'ModalFooter';
+export const Hidden = styled('div', {
+  display: 'none'
+});
+Hidden.displayName = "Hidden";
+Hidden.displayName = 'Hidden';

package/es/page-control/constants.js

@@ -0,0 +1,17 @@
+/*
+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 SIZE = Object.freeze({
+  large: 'large',
+  medium: 'medium',
+  small: 'small'
+});
+export const KIND = Object.freeze({
+  default: 'default',
+  backgroundProtection: 'backgroundProtection',
+  inverse: 'inverse',
+  alwaysLight: 'alwaysLight',
+  alwaysDark: 'alwaysDark'
+});

package/es/page-control/index.js

@@ -0,0 +1,9 @@
+/*
+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 PageControl } from './page-control';
+export * from './styled-components';
+export { KIND } from './constants';
+export * from './types';

package/es/page-control/page-control.js

@@ -0,0 +1,114 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';
+import { StyledRoot, StyledDot } from './styled-components';
+import { SIZE, KIND } from './constants';
+const MAX_DOTS = 5;
+
+const PageControl = ({
+  currentPage,
+  numPages,
+  onPageChange,
+  kind = KIND.default,
+  disabled = false,
+  'aria-label': ariaLabel,
+  overrides = {}
+}) => {
+  const [Root, RootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [Dot, DotProps] = getOverrides(overrides.Dot, StyledDot);
+  const isOverflow = numPages > MAX_DOTS;
+
+  function isActive(page) {
+    return page === currentPage;
+  }
+
+  function isVisible(page) {
+    if (!isOverflow) return true; // if current page is one of first three pages, first five page dots are visible
+
+    if (currentPage <= 3) {
+      return page <= 5;
+    } // if current page is one of last three pages, last five page dots are visible
+
+
+    if (numPages - currentPage < 3) {
+      return page > numPages - 5;
+    } // otherwise, page must be within 2 of the current page for dot to be visible
+
+
+    return page >= currentPage - 2 && page <= currentPage + 2;
+  }
+
+  function getSize(page) {
+    if (!isOverflow) return SIZE.large;
+
+    if (currentPage <= 3) {
+      if (page <= 3) {
+        return SIZE.large;
+      }
+
+      if (page === 4) {
+        return SIZE.medium;
+      }
+
+      return SIZE.small;
+    }
+
+    if (numPages - currentPage < 3) {
+      if (page > numPages - 3) {
+        return SIZE.large;
+      }
+
+      if (page === numPages - 3) {
+        return SIZE.medium;
+      }
+
+      return SIZE.small;
+    }
+
+    if (page >= currentPage - 1 && page <= currentPage + 1) {
+      return SIZE.large;
+    }
+
+    if (page === currentPage - 2 || page === currentPage + 2) {
+      return SIZE.medium;
+    }
+
+    return SIZE.small;
+  }
+
+  const name = React.useId();
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    $kind: kind,
+    role: "radiogroup",
+    "aria-label": ariaLabel || 'page control'
+  }, RootProps), Array.from({
+    length: numPages
+  }, (_, i) => {
+    const page = i + 1;
+    return /*#__PURE__*/React.createElement(Dot, _extends({
+      $active: isActive(page),
+      $kind: kind,
+      $disabled: disabled,
+      $isVisible: isVisible(page),
+      $size: getSize(page),
+      checked: isActive(page),
+      key: page,
+      "aria-label": `page ${page}`,
+      name: name,
+      onChange: () => onPageChange({
+        nextPage: page
+      }),
+      tabIndex: isActive(page) ? 0 : -1,
+      type: "radio"
+    }, DotProps));
+  }));
+};
+
+export default PageControl;

package/es/page-control/styled-components.js

@@ -0,0 +1,99 @@
+/*
+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 { styled, hexToRgb } from '../styles';
+import { SIZE, KIND } from './constants';
+export const StyledRoot = styled('div', ({
+  $kind,
+  $theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: $theme.sizing.scale300,
+  width: 'fit-content',
+  paddingTop: $theme.sizing.scale100,
+  paddingRight: $theme.sizing.scale500,
+  paddingBottom: $theme.sizing.scale100,
+  paddingLeft: $theme.sizing.scale500,
+  borderRadius: $theme.borders.radius500,
+  backgroundColor: $kind === KIND.backgroundProtection ? $theme.colors.backgroundPrimary : 'transparent'
+}));
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+export const StyledDot = styled('input', ({
+  $active,
+  $kind,
+  $size,
+  $disabled,
+  $isVisible,
+  $theme
+}) => {
+  const sizes = {
+    [SIZE.large]: {
+      height: $theme.sizing.scale300,
+      width: $theme.sizing.scale300
+    },
+    [SIZE.medium]: {
+      height: $theme.sizing.scale200,
+      width: $theme.sizing.scale200,
+      marginTop: '1px',
+      marginRight: '1px',
+      marginBottom: '1px',
+      marginLeft: '1px'
+    },
+    [SIZE.small]: {
+      height: $theme.sizing.scale100,
+      width: $theme.sizing.scale100,
+      marginTop: $theme.sizing.scale0,
+      marginRight: $theme.sizing.scale0,
+      marginBottom: $theme.sizing.scale0,
+      marginLeft: $theme.sizing.scale0
+    }
+  };
+  const colors = {
+    [KIND.default]: {
+      active: $theme.colors.contentPrimary,
+      inactive: $theme.colors.backgroundTertiary
+    },
+    [KIND.backgroundProtection]: {
+      active: $theme.colors.contentPrimary,
+      inactive: $theme.colors.backgroundTertiary
+    },
+    [KIND.inverse]: {
+      active: $theme.colors.contentInversePrimary,
+      inactive: $theme.colors.backgroundInversePrimary
+    },
+    [KIND.alwaysLight]: {
+      active: $theme.colors.contentOnColorInverse,
+      inactive: hexToRgb($theme.colors.backgroundAlwaysDark, '0.12')
+    },
+    [KIND.alwaysDark]: {
+      active: $theme.colors.contentOnColor,
+      inactive: hexToRgb($theme.colors.backgroundAlwaysLight, '0.24')
+    }
+  };
+  return {
+    // reset default input styles
+    appearance: 'none',
+    margin: 0,
+    // base web styles
+    ...sizes[$size],
+    borderRadius: '50%',
+    backgroundColor: $disabled ? $theme.colors.contentStateDisabled : $active ? colors[$kind].active : colors[$kind].inactive,
+    ...(!$isVisible ? {
+      // https://www.nomensa.com/blog/how-improve-web-accessibility-hiding-elements
+      border: 0,
+      clip: 'rect(1px, 1px, 1px, 1px)',
+      height: '1px',
+      margin: '-1px',
+      overflow: 'hidden',
+      padding: 0,
+      position: 'absolute',
+      width: '1px'
+    } : {})
+  };
+});
+StyledDot.displayName = "StyledDot";
+StyledDot.displayName = 'StyledDot';

package/es/page-control/types.js

@@ -0,0 +1 @@
+export {};