baseui 12.1.3 → 13.0.0

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

@@ -0,0 +1,110 @@
+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 { Button, KIND, SHAPE } from '../button';
+import { StyledRoot, StyledNavContainer, StyledTitle, StyledActionButtonsContainer } from './styled-components';
+import { TYPE } from './constants';
+import { useStyletron } from '../styles/index';
+
+const renderButtonContent = content => {
+  if (typeof content === 'string') {
+    return content;
+  }
+
+  const Icon = content;
+  return /*#__PURE__*/React.createElement(Icon, {
+    size: 32
+  });
+};
+
+const DefaultHeaderButton = ({
+  children,
+  type,
+  ...restProps
+}) => {
+  const [, theme] = useStyletron();
+  const isFloating = type === TYPE.floating;
+  const hasTextContent = typeof children === 'string';
+  const shouldHaveTrailingMargin = isFloating || !hasTextContent;
+  const trailingMargin = theme.direction === 'rtl' ? {
+    marginLeft: theme.sizing.scale300
+  } : {
+    marginRight: theme.sizing.scale300
+  };
+  const style = { ...(!hasTextContent ? {
+      height: '48px',
+      width: '48px',
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0
+    } : {}),
+    ...(shouldHaveTrailingMargin ? trailingMargin : {}),
+    ...(isFloating ? {
+      backgroundColor: theme.colors.backgroundPrimary
+    } : {})
+  };
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    kind: KIND.tertiary,
+    shape: SHAPE.pill,
+    overrides: {
+      BaseButton: {
+        style
+      }
+    }
+  }, restProps), children);
+};
+
+export function MobileHeader({
+  overrides = {},
+  title,
+  navButton,
+  actionButtons = [],
+  type = TYPE.fixed,
+  expanded = false
+}) {
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [Title, titleProps] = getOverrides(overrides.Title, StyledTitle);
+  const [NavContainer, navContainerProps] = getOverrides(overrides.NavContainer, StyledNavContainer);
+  const [HeaderButton, iconButtonProps] = getOverrides(overrides.HeaderButton, DefaultHeaderButton);
+  const [ActionButtonsContainer, actionButtonsContainerProps] = getOverrides(overrides.ActionButtonsContainer, StyledActionButtonsContainer);
+
+  if (actionButtons.length > 2 && process.env.NODE_ENV !== "production") {
+    console.warn(`MobileHeader can only render two additional buttons. Received ${actionButtons.length}`);
+  }
+
+  return /*#__PURE__*/React.createElement(Root, _extends({}, rootProps, {
+    $type: type,
+    $expanded: expanded
+  }), /*#__PURE__*/React.createElement(NavContainer, _extends({
+    $type: type,
+    $hasTextContent: navButton && !Boolean(navButton.renderIcon)
+  }, navContainerProps), navButton && /*#__PURE__*/React.createElement(HeaderButton, _extends({
+    onClick: navButton.onClick,
+    type: type,
+    "aria-label": navButton.label
+  }, iconButtonProps), renderButtonContent(navButton.renderIcon || navButton.label))), type === TYPE.fixed && /*#__PURE__*/React.createElement(Title, _extends({
+    $type: type,
+    $expanded: expanded
+  }, titleProps), title), actionButtons.length > 0 && /*#__PURE__*/React.createElement(ActionButtonsContainer, actionButtonsContainerProps, actionButtons.map((button, idx) => {
+    const {
+      renderIcon,
+      onClick,
+      label
+    } = button;
+    return /*#__PURE__*/React.createElement(HeaderButton, _extends({
+      onClick: onClick,
+      "aria-label": label,
+      type: type
+    }, iconButtonProps, {
+      key: idx
+    }), renderButtonContent(renderIcon || label));
+  })));
+}
+export default MobileHeader;

package/es/mobile-header/styled-components.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.
+*/
+import { styled } from '../styles';
+import { TYPE } from './constants';
+export const StyledRoot = styled('div', ({
+  $theme,
+  $type
+}) => ({
+  width: '100%',
+  display: 'grid',
+  gridTemplateColumns: 'auto 1fr auto',
+  gridTemplateRows: '48px',
+  ...($type === TYPE.floating ? {
+    backgroundColor: 'transparent',
+    pointerEvents: 'none'
+  } : {
+    backgroundColor: $theme.colors.backgroundPrimary
+  })
+}));
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+export const StyledNavContainer = styled('div', ({
+  $hasTextContent,
+  $type,
+  $theme
+}) => {
+  const floatingPadding = $theme.direction === 'rtl' ? {
+    paddingRight: $theme.sizing.scale300
+  } : {
+    paddingLeft: $theme.sizing.scale300
+  };
+  return {
+    pointerEvents: 'auto',
+    minWidth: '48px',
+    ...($hasTextContent && $type === TYPE.fixed ? {} : floatingPadding)
+  };
+});
+StyledNavContainer.displayName = "StyledNavContainer";
+StyledNavContainer.displayName = 'StyledNavContainer';
+export const StyledActionButtonsContainer = styled('div', ({}) => ({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  gridColumn: '3 / 4',
+  pointerEvents: 'auto'
+}));
+StyledActionButtonsContainer.displayName = "StyledActionButtonsContainer";
+StyledActionButtonsContainer.displayName = 'StyledActionButtonsContainer';
+export const StyledTitle = styled('div', ({
+  $theme,
+  $expanded = false
+}) => ({
+  alignSelf: 'center',
+  justifyContent: 'flex-start',
+  ...($expanded ? $theme.typography.DisplayXSmall : $theme.typography.LabelLarge),
+  ...($expanded ? {
+    gridColumn: '1 / 4',
+    gridRow: 2,
+    paddingLeft: $theme.sizing.scale600
+  } : {}),
+  // truncate long titles
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden'
+}));
+StyledTitle.displayName = "StyledTitle";
+StyledTitle.displayName = 'StyledTitle';

package/es/mobile-header/types.js

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

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 {};