baseui 11.0.1 → 11.1.0

package/es/banner/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 { Banner } from './banner.js';
+export * from './constants.js';
+export * from './styled-components.js';

package/es/banner/styled-components.js

@@ -0,0 +1,122 @@
+/*
+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/index.js';
+import { ACTION_POSITION } from './constants.js';
+export const StyledRoot = styled('div', ({
+  $theme,
+  $backgroundColor,
+  $color,
+  $nested
+}) => {
+  const radius = $nested ? $theme.borders.radius300 : $theme.borders.radius400;
+  return {
+    backgroundColor: $backgroundColor,
+    borderStartStartRadius: radius,
+    borderStartEndRadius: radius,
+    borderEndStartRadius: radius,
+    borderEndEndRadius: radius,
+    color: $color,
+    display: 'grid',
+    gridColumnGap: $theme.sizing.scale600,
+    gridTemplateColumns: 'min-content auto min-content',
+    gridTemplateRows: 'auto min-content',
+    margin: $theme.sizing.scale600
+  };
+});
+StyledRoot.displayName = "StyledRoot";
+export const StyledLeadingContent = styled('div', ({
+  $theme,
+  $includesArtwork
+}) => {
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    paddingInlineStart: $includesArtwork ? $theme.sizing.scale600 : null
+  };
+});
+StyledLeadingContent.displayName = "StyledLeadingContent";
+export const StyledMessageContent = styled('div', ({
+  $theme,
+  $actionPosition
+}) => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    paddingBlockStart: $theme.sizing.scale600,
+    paddingBlockEnd: $actionPosition === ACTION_POSITION.trailing ? $theme.sizing.scale600 : null
+  };
+});
+StyledMessageContent.displayName = "StyledMessageContent";
+export const StyledTrailingContent = styled('div', ({
+  $theme
+}) => {
+  return {
+    display: 'flex',
+    gridRowEnd: 'span 2',
+    marginInlineStart: 'auto'
+  };
+});
+StyledTrailingContent.displayName = "StyledTrailingContent";
+export const StyledBelowContent = styled('div', ({
+  $theme,
+  $actionPosition
+}) => {
+  return {
+    gridColumnStart: 2,
+    paddingBlockStart: $actionPosition === ACTION_POSITION.below ? $theme.sizing.scale300 : null,
+    paddingBlockEnd: $actionPosition === ACTION_POSITION.below ? $theme.sizing.scale600 : null
+  };
+});
+StyledBelowContent.displayName = "StyledBelowContent";
+export const StyledTitle = styled('div', ({
+  $theme
+}) => {
+  return $theme.typography.LabelMedium;
+});
+StyledTitle.displayName = "StyledTitle";
+export const StyledMessage = styled('div', ({
+  $theme
+}) => {
+  return $theme.typography.ParagraphMedium;
+});
+StyledMessage.displayName = "StyledMessage";
+export const StyledTrailingButtonContainer = styled('div', ({
+  $theme
+}) => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    paddingInlineEnd: $theme.sizing.scale600
+  };
+});
+StyledTrailingButtonContainer.displayName = "StyledTrailingButtonContainer";
+export const StyledTrailingIconButton = styled('button', ({
+  $theme,
+  $nested
+}) => {
+  const radius = $nested ? $theme.borders.radius300 : $theme.borders.radius400;
+  return {
+    alignItems: 'center',
+    background: 'none',
+    border: 'none',
+    borderStartEndRadius: radius,
+    borderEndEndRadius: radius,
+    color: 'inherit',
+    cursor: 'pointer',
+    display: 'flex',
+    paddingInlineStart: $theme.sizing.scale600,
+    paddingInlineEnd: $theme.sizing.scale600,
+    ':hover': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+    },
+    ':active': {
+      boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+    }
+  };
+});
+StyledTrailingIconButton.displayName = "StyledTrailingIconButton";

package/es/banner/types.js

@@ -0,0 +1,8 @@
+/*
+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 { ACTION_POSITION, ARTWORK_TYPE, HIERARCHY, KIND } from './constants.js';

package/es/breadcrumbs/breadcrumbs.js

@@ -39,7 +39,11 @@ export function Breadcrumbs(props) {
       $itemIndex: index
     }, baseListItemProps), child, (showTrailingSeparator || index !== childrenArray.length - 1) && /*#__PURE__*/React.createElement(Separator, _extends({}, baseSeparatorProps, {
       key: `separator-${index}`
-    }), /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, baseIconProps) : /*#__PURE__*/React.createElement(Right, baseIconProps)))));
+    }), /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => theme.direction === 'rtl' ? /*#__PURE__*/React.createElement(Left, _extends({
+      size: 16
+    }, baseIconProps)) : /*#__PURE__*/React.createElement(Right, _extends({
+      size: 16
+    }, baseIconProps))))));
   });
   return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
     "aria-label": props['aria-label'] || props.ariaLabel || locale.breadcrumbs.ariaLabel,

package/es/button/button.js

@@ -68,6 +68,7 @@ class Button extends React.Component {
       endEnhancer,
       children,
       forwardedRef,
+      colors,
       ...restProps
     } = this.props; // Get overrides
 

package/es/datepicker/calendar.js

@@ -252,11 +252,11 @@ export default class Calendar extends React.Component {
       const {
         onChange = params => {}
       } = this.props;
-      let updatedDate = data.date; // We'll need to update the date in time values of internal state
-
-      const newTimeState = [...this.state.time]; // Apply the currently selected time values (saved in state) to the updated date
+      let updatedDate = data.date; // Apply the currently selected time values (saved in state) to the updated date
 
       if (Array.isArray(data.date)) {
+        // We'll need to update the date in time values of internal state
+        const newTimeState = [...this.state.time];
         const start = data.date[0] ? this.dateHelpers.applyDateToTime(newTimeState[0], data.date[0]) : null;
         const end = data.date[1] ? this.dateHelpers.applyDateToTime(newTimeState[1], data.date[1]) : null;
         newTimeState[0] = start;
@@ -266,16 +266,21 @@ export default class Calendar extends React.Component {
           newTimeState[1] = end;
         } else {
           updatedDate = [start];
-        }
+        } // Update the date in time values of internal state
+
+
+        this.setState({
+          time: newTimeState
+        });
       } else if (!Array.isArray(this.props.value) && data.date) {
-        newTimeState[0] = this.dateHelpers.applyDateToTime(newTimeState[0], data.date);
-        updatedDate = newTimeState[0];
-      } // Update the date in time values of internal state
+        const newTimeState = this.dateHelpers.applyDateToTime(this.state.time[0], data.date);
+        updatedDate = newTimeState; // Update the date in time values of internal state
 
+        this.setState({
+          time: [newTimeState]
+        });
+      }
 
-      this.setState({
-        time: newTimeState
-      });
       onChange({
         date: updatedDate
       });

package/es/datepicker/datepicker.js

@@ -45,7 +45,39 @@ export default class Datepicker extends React.Component {
 
     _defineProperty(this, "dateHelpers", void 0);
 
-    _defineProperty(this, "onChange", data => {
+    _defineProperty(this, "handleChange", date => {
+      const onChange = this.props.onChange;
+      const onRangeChange = this.props.onRangeChange;
+
+      if (Array.isArray(date)) {
+        if (onChange && date.every(Boolean)) {
+          // flowlint-next-line unclear-type:off
+          onChange({
+            date: date
+          });
+        }
+
+        if (onRangeChange) {
+          onRangeChange({
+            date: [...date]
+          });
+        }
+      } else {
+        if (onChange) {
+          onChange({
+            date
+          });
+        }
+
+        if (onRangeChange) {
+          onRangeChange({
+            date
+          });
+        }
+      }
+    });
+
+    _defineProperty(this, "onCalendarSelect", data => {
       let isOpen = false;
       let isPseudoFocused = false;
       let calendarFocused = false;
@@ -114,9 +146,7 @@ export default class Datepicker extends React.Component {
         }),
         inputValue: this.formatDisplayValue(nextDate)
       });
-      this.props.onChange && this.props.onChange({
-        date: nextDate
-      });
+      this.handleChange(nextDate);
     });
 
     _defineProperty(this, "formatDisplayValue", date => {
@@ -218,16 +248,10 @@ export default class Datepicker extends React.Component {
       const formatString = this.normalizeDashes(this.props.formatString);
 
       if (typeof mask === 'string' && inputValue === mask.replace(/9/g, ' ') || inputValue.length === 0) {
-        if (this.props.onChange) {
-          if (this.props.range) {
-            this.props.onChange({
-              date: []
-            });
-          } else {
-            this.props.onChange({
-              date: null
-            });
-          }
+        if (this.props.range) {
+          this.handleChange([]);
+        } else {
+          this.handleChange(null);
         }
       }
 
@@ -253,18 +277,12 @@ export default class Datepicker extends React.Component {
           endDate = parseDateString(right);
         }
 
-        const onChange = this.props.onChange;
+        const datesValid = this.dateHelpers.isValid(startDate) && this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
 
-        if (onChange) {
-          const datesValid = this.dateHelpers.isValid(startDate) && this.dateHelpers.isValid(endDate); // added equal case so that times within the same day can be expressed
-
-          const rangeValid = this.dateHelpers.isAfter(endDate, startDate) || this.dateHelpers.isEqual(startDate, endDate);
+        const rangeValid = this.dateHelpers.isAfter(endDate, startDate) || this.dateHelpers.isEqual(startDate, endDate);
 
-          if (datesValid && rangeValid) {
-            onChange({
-              date: [startDate, endDate]
-            });
-          }
+        if (datesValid && rangeValid) {
+          this.handleChange([startDate, endDate]);
         }
       } else {
         const dateString = this.normalizeDashes(inputValue);
@@ -280,12 +298,11 @@ export default class Datepicker extends React.Component {
 
         const {
           displayValueAtRangeIndex,
-          onChange,
           range,
           value
         } = this.props;
 
-        if (date && this.dateHelpers.isValid(date) && onChange) {
+        if (date && this.dateHelpers.isValid(date)) {
           if (range && Array.isArray(value) && typeof displayValueAtRangeIndex === 'number') {
             let [left, right] = value;
 
@@ -293,22 +310,16 @@ export default class Datepicker extends React.Component {
               left = date;
 
               if (!right) {
-                onChange({
-                  date: [left]
-                });
+                this.handleChange([left]);
               } else {
                 if (this.dateHelpers.isAfter(right, left) || this.dateHelpers.isEqual(left, right)) {
-                  onChange({
-                    date: [left, right]
-                  });
+                  this.handleChange([left, right]);
                 } else {
                   // Is resetting back to previous value appropriate? Invalid range is not
                   // communicated to the user, but if it was not reset the text value would
                   // show one value and date value another. This seems a bit better but clearly
                   // has a downside.
-                  onChange({
-                    date: [...value]
-                  });
+                  this.handleChange([...value]);
                 }
               }
             } else if (displayValueAtRangeIndex === 1) {
@@ -316,26 +327,18 @@ export default class Datepicker extends React.Component {
 
               if (!left) {
                 // If start value is not defined, set start/end to the same day.
-                onChange({
-                  date: [right, right]
-                });
+                this.handleChange([right, right]);
               } else {
                 if (this.dateHelpers.isAfter(right, left) || this.dateHelpers.isEqual(left, right)) {
-                  onChange({
-                    date: [left, right]
-                  });
+                  this.handleChange([left, right]);
                 } else {
                   // See comment above about resetting dates on invalid range
-                  onChange({
-                    date: [...value]
-                  });
+                  this.handleChange([...value]);
                 }
               }
             }
           } else {
-            onChange({
-              date
-            });
+            this.handleChange(date);
           }
         }
       }
@@ -427,9 +430,6 @@ export default class Datepicker extends React.Component {
     const placeholder = this.props.placeholder || this.props.placeholder === '' ? this.props.placeholder : this.props.range && !this.props.separateRangeInputs ? `YYYY/MM/DD ${INPUT_DELIMITER} YYYY/MM/DD` : 'YYYY/MM/DD';
     const [startDate = '', endDate = ''] = (this.state.inputValue || '').split(` ${INPUT_DELIMITER} `);
     const value = inputRole === INPUT_ROLE.startDate ? startDate : inputRole === INPUT_ROLE.endDate ? endDate : this.state.inputValue;
-
-    const onChange = event => this.handleInputChange(event, inputRole);
-
     return /*#__PURE__*/React.createElement(InputComponent, _extends({
       "aria-disabled": this.props.disabled,
       "aria-label": this.props['aria-label'] || (this.props.range ? locale.datepicker.ariaLabelRange : locale.datepicker.ariaLabel),
@@ -444,7 +444,7 @@ export default class Datepicker extends React.Component {
       onFocus: () => this.open(inputRole),
       onBlur: this.handleInputBlur,
       onKeyDown: this.handleKeyDown,
-      onChange: onChange,
+      onChange: event => this.handleInputChange(event, inputRole),
       placeholder: placeholder,
       mask: this.getMask(),
       required: this.props.required,
@@ -477,7 +477,7 @@ export default class Datepicker extends React.Component {
         trapTabbing: true,
         value: this.props.value
       }, this.props, {
-        onChange: this.onChange,
+        onChange: this.onCalendarSelect,
         selectedInput: this.state.selectedInput,
         hasLockedBehavior: this.hasLockedBehavior()
       }))

package/es/datepicker/stateful-calendar.js

@@ -1,3 +1,5 @@
+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); }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
@@ -12,7 +14,10 @@ import Calendar from './calendar.js';
 
 class StatefulComponent extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Calendar, extendedProps));
+    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Calendar, _extends({}, extendedProps, {
+      // flowlint-next-line unclear-type:off
+      onChange: extendedProps.onChange
+    })));
   }
 
 }

package/es/datepicker/stateful-container.js

@@ -20,9 +20,29 @@ class StatefulContainer extends React.Component {
       this.internalSetState(STATE_CHANGE_TYPE.change, {
         value: date
       });
+      const onChange = this.props.onChange;
 
-      if (typeof this.props.onChange === 'function') {
-        this.props.onChange(data);
+      if (onChange) {
+        if (Array.isArray(date)) {
+          if (date.every(Boolean)) {
+            // flowlint-next-line unclear-type:off
+            onChange({
+              date: date
+            });
+          }
+        } else {
+          onChange({
+            date
+          });
+        }
+      }
+
+      const onRangeChange = this.props.onRangeChange;
+
+      if (onRangeChange) {
+        onRangeChange({
+          date
+        });
       }
     });
 

package/es/datepicker/stateful-datepicker.js

@@ -1,3 +1,5 @@
+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); }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /*
@@ -12,7 +14,10 @@ import Datepicker from './datepicker.js';
 
 class StatefulComponent extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Datepicker, extendedProps));
+    return /*#__PURE__*/React.createElement(StatefulContainer, this.props, extendedProps => /*#__PURE__*/React.createElement(Datepicker, _extends({}, extendedProps, {
+      // flowlint-next-line unclear-type:off
+      onChange: extendedProps.onChange
+    })));
   }
 
 }

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

@@ -63,7 +63,7 @@ class DateHelpers {
       const UtilsClass = adapter.constructor;
       const className = adapter.constructor.name; // This ensures that if the adapter class isn't
       // supported it just falls back the default formats
-      // NOTE: in e2e tests puppeteer seems to add
+      // NOTE: in e2e tests playwright seems to add
       // a JSHandle wrapping class to all objects
       // so className always resolves to JSHandle:e
       // and if falls back to the default

package/es/helper/helper-steps.js

@@ -5,7 +5,9 @@ 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 { ArrowLeft, ArrowRight, Check } from '../icon/index.js';
+import ArrowLeft from '../icon/arrow-left.js';
+import ArrowRight from '../icon/arrow-right.js';
+import Check from '../icon/check.js';
 import { Button, KIND, SHAPE } from '../button/index.js';
 import { useStyletron } from '../styles/index.js';
 export function HelperSteps({

package/es/input/base-input.js

@@ -37,7 +37,7 @@ class BaseInput extends React.Component {
     });
 
     _defineProperty(this, "onInputKeyDown", e => {
-      if (this.props.clearOnEscape && e.key === 'Escape' && this.inputRef.current) {
+      if (this.props.clearOnEscape && e.key === 'Escape' && this.inputRef.current && !this.props.readOnly) {
         this.clearValue(); // prevent event from closing modal or doing something unexpected
 
         e.stopPropagation();
@@ -51,17 +51,21 @@ class BaseInput extends React.Component {
     });
 
     _defineProperty(this, "onFocus", e => {
-      this.setState({
-        isFocused: true
-      });
-      this.props.onFocus(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: true
+        });
+        this.props.onFocus(e);
+      }
     });
 
     _defineProperty(this, "onBlur", e => {
-      this.setState({
-        isFocused: false
-      });
-      this.props.onBlur(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: false
+        });
+        this.props.onBlur(e);
+      }
     });
 
     _defineProperty(this, "handleFocusForMaskToggle", event => {
@@ -192,10 +196,11 @@ class BaseInput extends React.Component {
       clearable,
       value,
       disabled,
+      readOnly,
       overrides = {}
     } = this.props;
 
-    if (disabled || !clearable || value == null || typeof value === 'string' && value.length === 0) {
+    if (disabled || readOnly || !clearable || value == null || typeof value === 'string' && value.length === 0) {
       return null;
     }
 
@@ -265,6 +270,7 @@ class BaseInput extends React.Component {
       "aria-required": this.props.required,
       autoComplete: autoComplete,
       disabled: this.props.disabled,
+      readOnly: this.props.readOnly,
       id: this.props.id,
       inputMode: this.props.inputMode,
       maxLength: this.props.maxLength,
@@ -322,7 +328,8 @@ _defineProperty(BaseInput, "defaultProps", {
   required: false,
   role: null,
   size: SIZE.default,
-  type: 'text'
+  type: 'text',
+  readOnly: false
 });
 
 export default BaseInput;

package/es/input/input.js

@@ -20,21 +20,25 @@ class Input extends React.Component {
     super(...args);
 
     _defineProperty(this, "state", {
-      isFocused: this.props.autoFocus || false
+      isFocused: this.props.autoFocus && !this.props.readOnly || false
     });
 
     _defineProperty(this, "onFocus", e => {
-      this.setState({
-        isFocused: true
-      });
-      this.props.onFocus(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: true
+        });
+        this.props.onFocus(e);
+      }
     });
 
     _defineProperty(this, "onBlur", e => {
-      this.setState({
-        isFocused: false
-      });
-      this.props.onBlur(e);
+      if (!this.props.readOnly) {
+        this.setState({
+          isFocused: false
+        });
+        this.props.onBlur(e);
+      }
     });
   }
 
@@ -94,7 +98,8 @@ _defineProperty(Input, "defaultProps", {
   startEnhancer: null,
   endEnhancer: null,
   clearable: false,
-  type: 'text'
+  type: 'text',
+  readOnly: false
 });
 
 function getAdjoinedProp(startEnhancer, endEnhancer) {

package/es/input/masked-input.js

@@ -23,6 +23,7 @@ const MaskOverride = /*#__PURE__*/React.forwardRef(({
   onBlur,
   value,
   disabled,
+  readOnly,
   ...restProps
 }, ref) => {
   return /*#__PURE__*/React.createElement(InputMask, _extends({
@@ -30,14 +31,16 @@ const MaskOverride = /*#__PURE__*/React.forwardRef(({
     onFocus: onFocus,
     onBlur: onBlur,
     value: value,
-    disabled: disabled
+    disabled: disabled,
+    readOnly: readOnly
   }, restProps), props => /*#__PURE__*/React.createElement(StyledInput, _extends({
     ref: ref,
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
     value: value,
-    disabled: disabled
+    disabled: disabled,
+    readOnly: readOnly
   }, props)));
 });
 MaskOverride.displayName = 'MaskOverride';

package/es/input/utils.js

@@ -11,7 +11,8 @@ export function getSharedProps(props, state) {
     positive,
     adjoined,
     size,
-    required
+    required,
+    readOnly
   } = props;
   const {
     isFocused
@@ -23,6 +24,7 @@ export function getSharedProps(props, state) {
     $positive: positive,
     $adjoined: adjoined,
     $size: size,
-    $required: required
+    $required: required,
+    $isReadOnly: readOnly
   };
 }