baseui 10.12.1 → 11.0.2

package/es/datepicker/styled-components.js

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles/index.js';
 import getDayStateCode from './utils/day-state.js';
-import { ORIENTATION, DENSITY } from './constants.js';
+import { ORIENTATION, DENSITY, INPUT_ROLE } from './constants.js';
 /**
  * Main component container element
  */
@@ -447,6 +447,9 @@ export const StyledDay = styled('div', props => {
     $outsideMonthWithinRange,
     $hasDateLabel,
     $density,
+    $hasLockedBehavior,
+    $selectedInput,
+    $value,
     $theme: {
       colors,
       typography,
@@ -470,6 +473,9 @@ export const StyledDay = styled('div', props => {
     }
   }
 
+  const [startDate, endDate] = Array.isArray($value) ? $value : [$value, null];
+  const oppositeInputIsPopulated = $selectedInput === INPUT_ROLE.startDate ? endDate !== null && typeof endDate !== 'undefined' : startDate !== null && typeof startDate !== 'undefined';
+  const shouldHighlightRange = $range && !($hasLockedBehavior && !oppositeInputIsPopulated);
   return { ...($density === DENSITY.high ? typography.ParagraphSmall : typography.ParagraphMedium),
     boxSizing: 'border-box',
     position: 'relative',
@@ -533,7 +539,7 @@ export const StyledDay = styled('div', props => {
         content: null
       } : {})
     },
-    ...($range ? {
+    ...(shouldHighlightRange ? {
       // :before pseudo element defines a grey background style that extends
       // the selected/highlighted day's circle and spans through a range
       ':before': {

package/es/datepicker/types.js

@@ -7,4 +7,4 @@ LICENSE file in the root directory of this source tree.
 
 /* eslint-disable flowtype/generic-spacing */
 import * as React from 'react';
-import { ORIENTATION, STATE_CHANGE_TYPE, DENSITY } from './constants.js';
+import { INPUT_ROLE, ORIENTATION, RANGED_CALENDAR_BEHAVIOR, STATE_CHANGE_TYPE, DENSITY } from './constants.js';

package/es/datepicker/utils/date-helpers.js

@@ -201,6 +201,22 @@ class DateHelpers {
       return false;
     });
 
+    _defineProperty(this, "dateRangeIncludesDates", (dateRange, dates) => {
+      const [startDate, endDate] = dateRange;
+
+      if (startDate && endDate && Array.isArray(dates) && dates.length) {
+        for (let i = 0; i < dates.length; i++) {
+          const day = dates[i];
+
+          if (this.isDayInRange(day, startDate, endDate)) {
+            return true;
+          }
+        }
+      }
+
+      return false;
+    });
+
     _defineProperty(this, "subDays", (date, days) => {
       return this.adapter.addDays(date, days * -1);
     });

package/es/datepicker/week.js

@@ -56,7 +56,9 @@ export default class Week extends React.Component {
             onMouseLeave: this.props.onDayMouseLeave,
             overrides: this.props.overrides,
             peekNextMonth: this.props.peekNextMonth,
-            value: this.props.value
+            value: this.props.value,
+            hasLockedBehavior: this.props.hasLockedBehavior,
+            selectedInput: this.props.selectedInput
           })
         );
       }));

package/es/file-uploader/file-uploader.js

@@ -13,7 +13,7 @@ import { useStyletron } from '../styles/index.js';
 import { Button, KIND, SHAPE, SIZE as BUTTON_SIZE } from '../button/index.js';
 import { getOverrides } from '../helpers/overrides.js';
 import { ProgressBar } from '../progress-bar/index.js';
-import { StyledSpinnerNext, SIZE as SPINNER_SIZE } from '../spinner/index.js';
+import { Spinner, SIZE as SPINNER_SIZE } from '../spinner/index.js';
 import { StyledRoot, StyledFileDragAndDrop, StyledContentMessage, StyledContentSeparator, StyledErrorMessage, StyledHiddenInput } from './styled-components.js';
 
 function prependStyleProps(styleProps) {
@@ -35,7 +35,7 @@ function FileUploader(props) {
   const [ErrorMessage, errorMessageProps] = getOverrides(overrides.ErrorMessage, StyledErrorMessage);
   const [HiddenInput, hiddenInputProps] = getOverrides(overrides.HiddenInput, StyledHiddenInput);
   const [ButtonComponent, buttonProps] = getOverrides(overrides.ButtonComponent, Button);
-  const [SpinnerComponent, spinnerProps] = getOverrides(overrides.Spinner, StyledSpinnerNext);
+  const [SpinnerComponent, spinnerProps] = getOverrides(overrides.Spinner, Spinner);
   const afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
   return /*#__PURE__*/React.createElement(Dropzone, _extends({}, props, {
     disabled: props.disabled || afterFileDrop
@@ -90,7 +90,7 @@ function FileUploader(props) {
         marginBottom: theme.sizing.scale300
       }
     }, spinnerProps)), (props.errorMessage || props.progressMessage) && props.errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, _extends({}, prefixedStyledProps, errorMessageProps), props.errorMessage) : /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.progressMessage), props.errorMessage ? /*#__PURE__*/React.createElement(ButtonComponent, {
-      kind: KIND.minimal,
+      kind: KIND.tertiary,
       onClick: () => {
         props.onRetry && props.onRetry();
       },
@@ -98,7 +98,7 @@ function FileUploader(props) {
       "aria-describedby": props['aria-describedby'],
       "aria-errormessage": props.errorMessage
     }, locale.fileuploader.retry) : /*#__PURE__*/React.createElement(ButtonComponent, {
-      kind: KIND.minimal,
+      kind: KIND.tertiary,
       onClick: () => {
         props.onCancel && props.onCancel();
       },

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

@@ -14,7 +14,6 @@ export const Label = styled('label', props => {
     }
   } = props;
   return { ...typography.font250,
-    fontWeight: 500,
     width: '100%',
     color: $disabled ? colors.contentSecondary : colors.contentPrimary,
     display: 'block',

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

@@ -18,7 +18,7 @@ export const Root = styled('nav', props => {
       font300
     },
     colors: {
-      border
+      borderOpaque
     }
   } = $theme;
   return { ...font300,
@@ -27,8 +27,8 @@ export const Root = styled('nav', props => {
     paddingTop: scale500,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: `${border}`,
-    backgroundColor: $theme.colors.headerNavigationFill
+    borderBottomColor: `${borderOpaque}`,
+    backgroundColor: $theme.colors.backgroundPrimary
   };
 });
 Root.displayName = "Root";

package/es/helpers/overrides.js

@@ -77,8 +77,7 @@ export function toObjectOverride(override) {
 /**
  * Get a convenient override array that will always have [component, props]
  */
-
-/* flowlint unclear-type:off */
+// flowlint unclear-type:off
 
 export function getOverrides(override, defaultComponent) {
   const Component = getOverride(override) || defaultComponent;

package/es/input/styled-components.js

@@ -123,10 +123,10 @@ function getRootColors($disabled, $isFocused, $error, $positive = false, colors)
 
   if ($isFocused) {
     return {
-      borderLeftColor: colors.borderFocus,
-      borderRightColor: colors.borderFocus,
-      borderTopColor: colors.borderFocus,
-      borderBottomColor: colors.borderFocus,
+      borderLeftColor: colors.borderSelected,
+      borderRightColor: colors.borderSelected,
+      borderTopColor: colors.borderSelected,
+      borderBottomColor: colors.borderSelected,
       backgroundColor: colors.inputFillActive
     };
   }

package/es/layer/layer.js

@@ -161,10 +161,10 @@ class LayerComponent extends React.Component {
     }, children) : children;
 
     if (typeof document !== 'undefined') {
-      const portalContainer = mountNode || container;
-
-      if (portalContainer) {
-        return /*#__PURE__*/ReactDOM.createPortal(childrenToRender, portalContainer);
+      if (mountNode) {
+        return /*#__PURE__*/ReactDOM.createPortal(childrenToRender, mountNode);
+      } else if (container) {
+        return /*#__PURE__*/ReactDOM.createPortal(childrenToRender, container);
       }
 
       return null;

package/es/list/list-item.js

@@ -41,7 +41,11 @@ const ListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(Root // flowlint-next-line unclear-type:off
   , _extends({
     ref: ref,
-    $shape: props.shape || SHAPE.DEFAULT
+    $shape: props.shape || SHAPE.DEFAULT,
+    "aria-label": props['aria-label'],
+    "aria-selected": props['aria-selected'],
+    id: props.id,
+    role: props.role
   }, rootProps), Artwork && /*#__PURE__*/React.createElement(ArtworkContainer, _extends({
     $artworkSize: artworkSize,
     $sublist: Boolean(props.sublist)

package/es/list/menu-adapter.js

@@ -11,9 +11,13 @@ const MenuAdapter = /*#__PURE__*/React.forwardRef((props, ref) => {
   return /*#__PURE__*/React.createElement(ListItem, {
     ref: ref,
     sublist: props.sublist || props.$size === 'compact',
+    "aria-label": props['aria-label'],
+    "aria-selected": props['aria-selected'],
     artwork: props.artwork,
     artworkSize: props.artworkSize,
     endEnhancer: props.endEnhancer,
+    id: props.id,
+    role: props.role,
     overrides: mergeOverrides({
       Root: {
         props: {

package/es/locale/index.js

@@ -14,13 +14,6 @@ const LocaleProvider = props => {
     locale,
     children
   } = props;
-
-  if (process.env.NODE_ENV !== "production") {
-    if (locale.datepicker && locale.datepicker.timePickerAriaLabel) {
-      console.warn('`timePickerAriaLabel` will be removed in v11 - please use timePickerAriaLabel12Hour and timePickerAriaLabel24Hour instead');
-    }
-  }
-
   return /*#__PURE__*/React.createElement(LocaleContext.Provider, {
     value: extend({}, en_US, locale)
   }, children);

package/es/menu/stateful-container.js

@@ -98,7 +98,6 @@ class MenuStatefulContainerInner extends React.Component {
         this.typeAheadChars = '';
       }, 500);
       var nextIndex = prevIndex;
-      event.preventDefault();
       var list = this.getItems();
       if (list.length === 0 || !('label' in list[0])) return;
       var notMatch = true;

package/es/menu/styled-components.js

@@ -87,7 +87,7 @@ export const StyledOptgroupHeader = styled('li', props => {
   const paddingX = props.$theme.sizing.scale300;
   const paddingY = props.$theme.sizing.scale200;
   return { ...props.$theme.typography.font250,
-    color: props.$theme.colors.colorPrimary,
+    color: props.$theme.colors.contentPrimary,
     paddingTop: paddingY,
     paddingBottom: paddingY,
     paddingRight: paddingX,

package/es/modal/index.js

@@ -8,4 +8,4 @@ export { default as Modal } from './modal.js';
 export { default as ModalButton } from './modal-button.js';
 export { default as FocusOnce } from './focus-once.js';
 export { SIZE, ROLE, CLOSE_SOURCE } from './constants.js';
-export { Root as StyledRoot, Backdrop as StyledBackdrop, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose, ModalHeader, ModalBody, ModalFooter } from './styled-components.js';
+export { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose, ModalHeader, ModalBody, ModalFooter } from './styled-components.js';

package/es/modal/modal.js

@@ -18,7 +18,7 @@ import { LocaleContext } from '../locale/index.js';
 import { getOverrides } from '../helpers/overrides.js';
 import { Layer } from '../layer/index.js';
 import { SIZE, ROLE, CLOSE_SOURCE } from './constants.js';
-import { Root as StyledRoot, Backdrop as StyledBackdrop, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose } from './styled-components.js';
+import { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose } from './styled-components.js';
 import { CloseIcon } from './close-icon.js';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
@@ -30,11 +30,13 @@ class Modal extends React.Component {
 
     _defineProperty(this, "animateStartTimer", void 0);
 
+    _defineProperty(this, "dialogContainerRef", /*#__PURE__*/React.createRef());
+
     _defineProperty(this, "lastFocus", null);
 
     _defineProperty(this, "lastMountNodeOverflowStyle", null);
 
-    _defineProperty(this, "_refs", {});
+    _defineProperty(this, "rootRef", /*#__PURE__*/React.createRef());
 
     _defineProperty(this, "state", {
       isVisible: false,
@@ -67,10 +69,7 @@ class Modal extends React.Component {
     });
 
     _defineProperty(this, "onDocumentClick", e => {
-      if (e.target && e.target instanceof HTMLElement && ( // Handles modal closure when unstable_ModalBackdropScroll is set to true
-      e.target.contains(this.getRef('DialogContainer').current) || // Handles modal closure when unstable_ModalBackdropScroll is set to false
-      // $FlowFixMe
-      e.target.contains(this.getRef('DeprecatedBackdrop').current))) {
+      if (e.target && e.target instanceof HTMLElement && e.target.contains(this.dialogContainerRef.current)) {
         this.onBackdropClick();
       }
     });
@@ -97,25 +96,10 @@ class Modal extends React.Component {
   componentDidMount() {
     this.setState({
       mounted: true
-    }); // TODO(v11)
+    });
 
     if (process.env.NODE_ENV !== "production") {
-      if (!this.props.unstable_ModalBackdropScroll) {
-        console.warn(`Consider setting 'unstable_ModalBackdropScroll' prop to true
-        to prepare for the next major version upgrade. 'unstable_ModalBackdropScroll'
-        prop will be removed in the next major version but implemented as the default behavior.`);
-      }
-
-      if (this.props.overrides && this.props.overrides.Backdrop) {
-        console.warn(`Backdrop element will be removed in the next major version in favor of
-        DialogContainer element that will have the backdrop styles and backdrop click handle.
-        Consider setting 'unstable_ModalBackdropScroll' prop to true that will apply backdrop
-        styles to DialogContainer enable modal scrolling while cursor in over the backdrop.
-        Then pass backdrop overrides to DialogContainer instead. Tha will help you with
-        the next major version upgrade.`);
-      } // $FlowFixMe: flow complains that this prop doesn't exist
-
-
+      // $FlowFixMe: flow complains that this prop doesn't exist
       if (this.props.closable) {
         console.warn('The property `closable` is not supported on the Modal. Did you mean `closeable`?');
       }
@@ -177,7 +161,7 @@ class Modal extends React.Component {
   didOpen() {
     // Sometimes scroll starts past zero, possibly due to animation
     // Reset scroll to 0 (other libraries do this as well)
-    const rootRef = this.getRef('Root').current;
+    const rootRef = this.rootRef.current;
 
     if (rootRef) {
       rootRef.scrollTop = 0;
@@ -214,8 +198,7 @@ class Modal extends React.Component {
       isOpen,
       size,
       role,
-      closeable,
-      unstable_ModalBackdropScroll
+      closeable
     } = this.props;
     return {
       $animate: animate,
@@ -224,7 +207,6 @@ class Modal extends React.Component {
       $size: size,
       $role: role,
       $closeable: !!closeable,
-      $unstable_ModalBackdropScroll: unstable_ModalBackdropScroll,
       $isFocusVisible: this.state.isFocusVisible
     };
   }
@@ -250,21 +232,11 @@ class Modal extends React.Component {
     return typeof children === 'function' ? children() : children;
   }
 
-  getRef(component) {
-    if (!this._refs[component]) {
-      this._refs[component] = /*#__PURE__*/React.createRef();
-    }
-
-    return this._refs[component];
-  }
-
   renderModal() {
     const {
       overrides = {},
       closeable,
       role,
-      unstable_ModalBackdropScroll,
-      autofocus,
       autoFocus,
       focusLock,
       returnFocus
@@ -273,47 +245,32 @@ class Modal extends React.Component {
       Root: RootOverride,
       Dialog: DialogOverride,
       DialogContainer: DialogContainerOverride,
-      Backdrop: BackdropOverride,
       Close: CloseOverride
     } = overrides;
     const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
-    const [Backdrop, backdropProps] = getOverrides(BackdropOverride, StyledBackdrop);
     const [DialogContainer, dialogContainerProps] = getOverrides(DialogContainerOverride, StyledDialogContainer);
     const [Dialog, dialogProps] = getOverrides(DialogOverride, StyledDialog);
     const [Close, closeProps] = getOverrides(CloseOverride, StyledClose);
     const sharedProps = this.getSharedProps();
     const children = this.getChildren();
-
-    if (autofocus === false && process.env.NODE_ENV !== "production") {
-      console.warn(`The prop "autofocus" is deprecated in favor of "autoFocus" to be consistent across the project.
-        The property "autofocus" will be removed in a future major version.`);
-    } // Handles backdrop click when `unstable_ModalBackdropScroll` is set to true
-
-
-    if (dialogContainerProps.ref) {
-      this._refs.DialogContainer = dialogContainerProps.ref;
-    }
-
-    const dialogContainerConditionalProps = unstable_ModalBackdropScroll ? {
-      ref: this.getRef('DialogContainer')
-    } : {};
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(FocusLock, {
       disabled: !focusLock // Allow focus to escape when UI is within an iframe
       ,
       crossFrame: false,
       returnFocus: returnFocus,
-      autoFocus: autofocus !== null ? autofocus : autoFocus
+      autoFocus: autoFocus
     }, /*#__PURE__*/React.createElement(Root, _extends({
-      "data-baseweb": "modal",
-      ref: this.getRef('Root')
-    }, sharedProps, rootProps), /*#__PURE__*/React.createElement(Backdrop, _extends({}, unstable_ModalBackdropScroll ? {} : {
-      ref: this.getRef('DeprecatedBackdrop')
-    }, sharedProps, backdropProps)), /*#__PURE__*/React.createElement(DialogContainer, _extends({}, dialogContainerConditionalProps, sharedProps, dialogContainerProps), /*#__PURE__*/React.createElement(Dialog, _extends({
+      "data-baseweb": "modal" // flowlint-next-line unclear-type:off
+      ,
+      ref: this.rootRef
+    }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer // flowlint-next-line unclear-type:off
+    , _extends({
+      ref: this.dialogContainerRef
+    }, sharedProps, dialogContainerProps), /*#__PURE__*/React.createElement(Dialog, _extends({
       tabIndex: -1,
       "aria-modal": true,
       "aria-label": "dialog",
-      role: role,
-      ref: this.getRef('Dialog')
+      role: role
     }, sharedProps, dialogProps), children, closeable ? /*#__PURE__*/React.createElement(Close, _extends({
       "aria-label": locale.modal.close,
       onClick: this.onCloseClick
@@ -345,8 +302,6 @@ class Modal extends React.Component {
 
 _defineProperty(Modal, "defaultProps", {
   animate: true,
-  // TODO(v11): remove
-  autofocus: null,
   autoFocus: true,
   focusLock: true,
   returnFocus: true,
@@ -355,8 +310,7 @@ _defineProperty(Modal, "defaultProps", {
   isOpen: false,
   overrides: {},
   role: ROLE.dialog,
-  size: SIZE.default,
-  unstable_ModalBackdropScroll: false
+  size: SIZE.default
 });
 
 export default Modal;

package/es/modal/styled-components.js

@@ -43,67 +43,31 @@ export const Root = styled('div', props => {
   };
 });
 Root.displayName = "Root";
-export const Backdrop = styled('div', props => {
-  const {
-    $animate,
-    $isOpen,
-    $isVisible,
-    $theme,
-    $unstable_ModalBackdropScroll
-  } = props;
-
-  if ($unstable_ModalBackdropScroll) {
-    return {};
-  }
-
-  return {
-    position: 'fixed',
-    right: 0,
-    bottom: 0,
-    top: 0,
-    left: 0,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    // Remove grey highlight
-    WebkitTapHighlightColor: 'transparent',
-    // Disable scroll capabilities.
-    touchAction: 'none',
-    opacity: $isVisible && $isOpen ? 1 : 0,
-    ...($animate ? {
-      transitionProperty: 'opacity',
-      transitionDuration: $theme.animation.timing400,
-      transitionTimingFunction: $theme.animation.easeOutCurve
-    } : null)
-  };
-});
-Backdrop.displayName = "Backdrop";
 export const DialogContainer = styled('div', props => {
   const {
     $animate,
     $isOpen,
     $isVisible,
-    $theme,
-    $unstable_ModalBackdropScroll
+    $theme
   } = props;
+  const animationRules = {
+    transitionProperty: 'opacity',
+    transitionDuration: $theme.animation.timing400,
+    transitionTimingFunction: $theme.animation.easeOutCurve
+  };
   return {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     width: '100%',
     minHeight: '100%',
-    pointerEvents: 'none',
     userSelect: 'none',
-    ...($unstable_ModalBackdropScroll ? {
-      pointerEvents: 'auto',
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      // Remove grey highlight
-      WebkitTapHighlightColor: 'transparent',
-      opacity: $isVisible && $isOpen ? 1 : 0,
-      ...($animate ? {
-        transitionProperty: 'opacity',
-        transitionDuration: $theme.animation.timing400,
-        transitionTimingFunction: $theme.animation.easeOutCurve
-      } : null)
-    } : {})
+    pointerEvents: 'auto',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    // Remove grey highlight
+    WebkitTapHighlightColor: 'transparent',
+    opacity: $isVisible && $isOpen ? 1 : 0,
+    ...($animate ? animationRules : null)
   };
 });
 DialogContainer.displayName = "DialogContainer";

package/es/phone-input/default-props.js

@@ -9,7 +9,7 @@ const defaultProps = {
   'aria-label': 'Please enter a phone number without the country dial code.',
   'aria-describedby': null,
   'aria-labelledby': null,
-  clearable: false,
+  clearable: true,
   focusLock: false,
   country: {
     label: 'United States',

package/es/phone-input/index.js

@@ -6,13 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as PhoneInput } from './phone-input.js';
 export { default as PhoneInputLite } from './phone-input-lite.js';
-export { default as PhoneInputNext } from './phone-input-next.js';
 export { default as StatefulPhoneInput } from './stateful-phone-input.js';
-export { default as StatefulPhoneInputNext } from './stateful-phone-input-next.js';
 export { default as StatefulPhoneInputContainer } from './stateful-phone-input-container.js';
 export { default as CountryPicker } from './country-picker.js';
-export { default as CountrySelect } from './country-select.js';
-export { default as CountrySelectDropdown } from './country-select-dropdown.js';
 export { default as Flag, StyledFlag } from './flag.js';
 export * from './constants.js';
 export * from './styled-components.js';