baseui 10.8.0 → 10.9.2

package/es/progress-bar/progressbar.js

@@ -32,10 +32,16 @@ class ProgressBar extends React.Component {
       size,
       steps,
       successValue,
+      minValue,
+      maxValue,
       showLabel,
       infinite,
-      errorMessage
-    } = this.props;
+      errorMessage,
+      forwardedRef,
+      ...restProps
+    } = this.props; // fallback on successValue (and it's default) if maxValue is not set by user
+
+    const maximumValue = maxValue !== 100 ? maxValue : successValue;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     const [BarContainer, barContainerProps] = getOverrides(overrides.BarContainer, StyledBarContainer);
     const [Bar, barProps] = getOverrides(overrides.Bar, StyledBar);
@@ -46,7 +52,9 @@ class ProgressBar extends React.Component {
       $infinite: infinite,
       $size: size,
       $steps: steps,
-      $successValue: successValue,
+      $successValue: maximumValue,
+      $minValue: minValue,
+      $maxValue: maximumValue,
       $value: value
     };
 
@@ -68,34 +76,41 @@ class ProgressBar extends React.Component {
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/role-supports-aria-props
       React.createElement(Root, _extends({
+        ref: forwardedRef,
         "data-baseweb": "progress-bar",
         role: "progressbar",
-        "aria-label": ariaLabel || getProgressLabel(value, successValue),
+        "aria-label": ariaLabel || getProgressLabel(value, maximumValue, minValue),
         "aria-valuenow": infinite ? null : value,
-        "aria-valuemin": infinite ? null : 0,
-        "aria-valuemax": infinite ? null : successValue,
+        "aria-valuemin": infinite ? null : minValue,
+        "aria-valuemax": infinite ? null : maximumValue,
         "aria-invalid": errorMessage ? true : null,
         "aria-errormessage": errorMessage
-      }, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
+      }, restProps, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
         $isLeft: true,
         $size: sharedProps.$size
       }, infiniteBarProps)), /*#__PURE__*/React.createElement(InfiniteBar, _extends({
         $size: sharedProps.$size
-      }, infiniteBarProps))) : renderProgressBar()), showLabel && /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), getProgressLabel(value, successValue)))
+      }, infiniteBarProps))) : renderProgressBar()), showLabel && /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), getProgressLabel(value, maximumValue, minValue)))
     );
   }
 
 }
 
 _defineProperty(ProgressBar, "defaultProps", {
-  getProgressLabel: (value, successValue) => `${Math.round(value / successValue * 100)}% Loaded`,
+  getProgressLabel: (value, maxValue, minValue) => `${Math.round((value - minValue) / (maxValue - minValue) * 100)}% Loaded`,
   infinite: false,
   overrides: {},
   showLabel: false,
   size: SIZE.medium,
   steps: 1,
   successValue: 100,
+  minValue: 0,
+  maxValue: 100,
   value: 0
 });
 
-export default ProgressBar;
+const ForwardedProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ProgressBar, _extends({
+  forwardedRef: ref
+}, props)));
+ForwardedProgressBar.displayName = 'ProgressBar';
+export default ForwardedProgressBar;

package/es/progress-bar/styled-components.js

@@ -76,14 +76,18 @@ export const StyledBarProgress = styled('div', props => {
     $value,
     $successValue,
     $steps,
-    $index
-  } = props;
+    $index,
+    $maxValue,
+    $minValue = 0
+  } = props; // making sure this doesn't break existing use that use StyledBarProgress directly
+
+  const maxValue = $maxValue ? $maxValue : $successValue;
   const {
     colors,
     sizing,
     borders
   } = $theme;
-  const width = `${100 - $value / $successValue * 100}%`;
+  const width = `${100 - ($value - $minValue) * 100 / (maxValue - $minValue)}%`;
   const stepStates = {
     default: 'default',
     awaits: 'awaits',
@@ -93,8 +97,8 @@ export const StyledBarProgress = styled('div', props => {
   let stepState = stepStates.default;
 
   if ($steps > 1) {
-    const stepValue = $successValue / $steps;
-    const currentValue = $value / $successValue * 100;
+    const stepValue = (maxValue - $minValue) / $steps;
+    const currentValue = ($value - $minValue) / (maxValue - $minValue) * 100;
     const completedSteps = Math.floor(currentValue / stepValue);
 
     if ($index < completedSteps) {

package/es/select/select-component.js

@@ -124,11 +124,6 @@ class Select extends React.Component {
       this.handleClick(event);
     });
 
-    _defineProperty(this, "handleTouchEndClearValue", event => {
-      if (this.dragging) return;
-      this.clearValue(event);
-    });
-
     _defineProperty(this, "handleClick", event => {
       if (this.props.disabled || !isClick(event) && !isLeftClick(event)) {
         return;
@@ -741,7 +736,7 @@ class Select extends React.Component {
         "aria-required": this.props.required || null,
         onFocus: this.handleInputFocus,
         tabIndex: 0
-      }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
+      }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
         "aria-hidden": true,
         id: this.props.id || null,
         ref: this.handleInputRef,
@@ -753,7 +748,7 @@ class Select extends React.Component {
           padding: 0
         },
         tabIndex: -1
-      }));
+      }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
     }
 
     return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(AutosizeInput, _extends({
@@ -800,9 +795,6 @@ class Select extends React.Component {
       title: ariaLabel,
       "aria-label": ariaLabel,
       onClick: this.clearValue,
-      onTouchEnd: this.handleTouchEndClearValue,
-      onTouchMove: this.handleTouchMove,
-      onTouchStart: this.handleTouchStart,
       role: "button",
       overrides: {
         Svg: {

package/es/spinner/styled-components.js

@@ -46,13 +46,39 @@ export const StyledActivePath = styled('path', props => ({
 StyledActivePath.displayName = "StyledActivePath";
 export const StyledSpinnerNext = styled('i', ({
   $theme,
+  $color = $theme.colors.contentAccent,
+  $borderWidth,
   $size = SIZE.medium
 }) => {
-  const borderWidth = {
+  //$FlowFixMe
+  let borderSize = {
     large: $theme.sizing.scale300,
     medium: $theme.sizing.scale100,
     small: $theme.sizing.scale0
+  }[$borderWidth || $size];
+  let boxSize = {
+    large: $theme.sizing.scale1000,
+    medium: $theme.sizing.scale900,
+    small: $theme.sizing.scale800
   }[$size];
+
+  if (!borderSize) {
+    borderSize = $theme.sizing[$borderWidth];
+
+    if (!borderSize) {
+      borderSize = `${parseInt($borderWidth)}px`;
+    }
+  }
+
+  if (!boxSize) {
+    //$FlowFixMe
+    boxSize = $theme.sizing[$size];
+
+    if (!boxSize) {
+      boxSize = `${parseInt($size)}px`;
+    }
+  }
+
   return {
     display: 'block',
     animationName: spin,
@@ -64,24 +90,16 @@ export const StyledSpinnerNext = styled('i', ({
     borderTopStyle: 'solid',
     borderBottomStyle: 'solid',
     borderRadius: '50%',
-    borderTopColor: $theme.colors.contentAccent,
+    borderTopColor: $color,
     borderRightColor: $theme.colors.backgroundTertiary,
     borderBottomColor: $theme.colors.backgroundTertiary,
     borderLeftColor: $theme.colors.backgroundTertiary,
-    borderLeftWidth: borderWidth,
-    borderRightWidth: borderWidth,
-    borderTopWidth: borderWidth,
-    borderBottomWidth: borderWidth,
-    width: {
-      large: $theme.sizing.scale1000,
-      medium: $theme.sizing.scale900,
-      small: $theme.sizing.scale800
-    }[$size],
-    height: {
-      large: $theme.sizing.scale1000,
-      medium: $theme.sizing.scale900,
-      small: $theme.sizing.scale800
-    }[$size],
+    borderLeftWidth: borderSize,
+    borderRightWidth: borderSize,
+    borderTopWidth: borderSize,
+    borderBottomWidth: borderSize,
+    width: boxSize,
+    height: boxSize,
     cursor: 'wait'
   };
 });

package/es/table/filter.js

@@ -39,7 +39,9 @@ export default function Filter(props) {
     content: ({
       close
     }) => /*#__PURE__*/React.createElement(FocusLock, {
-      autoFocus: false
+      autoFocus: false // Allow focus to escape when UI is within an iframe
+      ,
+      crossFrame: false
     }, /*#__PURE__*/React.createElement(Heading, headingProps, "Filter Column"), /*#__PURE__*/React.createElement(Content, contentProps, props.children), /*#__PURE__*/React.createElement(Footer, footerProps, /*#__PURE__*/React.createElement(Button, {
       kind: KIND.minimal,
       size: SIZE.compact,

package/es/themes/dark-theme/color-component-tokens.js

@@ -36,6 +36,8 @@ export default ((themePrimitives = colorTokens) => ({
   buttonTertiaryActive: themePrimitives.primary600,
   buttonTertiarySelectedText: themePrimitives.primary,
   buttonTertiarySelectedFill: themePrimitives.primary600,
+  buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
+  buttonTertiaryDisabledActiveText: themePrimitives.mono300,
   buttonTertiarySpinnerForeground: themePrimitives.primary50,
   buttonTertiarySpinnerBackground: themePrimitives.primary500,
   buttonMinimalFill: 'transparent',
@@ -48,6 +50,8 @@ export default ((themePrimitives = colorTokens) => ({
   buttonMinimalSpinnerBackground: themePrimitives.primary500,
   buttonDisabledFill: themePrimitives.mono600,
   buttonDisabledText: themePrimitives.mono300,
+  buttonDisabledActiveFill: themePrimitives.mono200,
+  buttonDisabledActiveText: themePrimitives.primary500,
   buttonDisabledSpinnerForeground: themePrimitives.mono200,
   buttonDisabledSpinnerBackground: themePrimitives.mono400,
   // Breadcrumbs

package/es/themes/light-theme/color-component-tokens.js

@@ -36,6 +36,8 @@ export default ((themePrimitives = colorTokens) => ({
   buttonTertiaryActive: themePrimitives.primary100,
   buttonTertiarySelectedFill: themePrimitives.primary100,
   buttonTertiarySelectedText: themePrimitives.primary,
+  buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
+  buttonTertiaryDisabledActiveText: themePrimitives.mono600,
   buttonTertiarySpinnerForeground: themePrimitives.accent,
   buttonTertiarySpinnerBackground: themePrimitives.primary100,
   buttonMinimalFill: 'transparent',
@@ -48,6 +50,8 @@ export default ((themePrimitives = colorTokens) => ({
   buttonMinimalSpinnerBackground: themePrimitives.primary100,
   buttonDisabledFill: themePrimitives.mono200,
   buttonDisabledText: themePrimitives.mono600,
+  buttonDisabledActiveFill: themePrimitives.mono700,
+  buttonDisabledActiveText: themePrimitives.mono100,
   buttonDisabledSpinnerForeground: themePrimitives.mono600,
   buttonDisabledSpinnerBackground: themePrimitives.mono400,
   // Breadcrumbs

package/es/timezonepicker/timezone-picker.js

@@ -10,11 +10,11 @@ LICENSE file in the root directory of this source tree.
 */
 // global Intl
 import * as React from 'react';
-import { findTimeZone, getZonedTime, listTimeZones } from 'timezone-support/dist/index-1900-2050.js';
-import { formatZonedTime } from 'timezone-support/dist/parse-format.js';
+import { format, getTimezoneOffset } from 'date-fns-tz';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import { LocaleContext } from '../locale/index.js';
 import { Select } from '../select/index.js';
+import { zones } from './tzdata.js';
 
 class TimezonePicker extends React.Component {
   constructor(...args) {
@@ -25,42 +25,51 @@ class TimezonePicker extends React.Component {
       value: null
     });
 
-    _defineProperty(this, "buildTimezones", compareDate => listTimeZones().map(zone => {
-      const timezone = findTimeZone(zone);
-      const zonedTime = getZonedTime(compareDate, timezone);
-      const offsetTime = (zonedTime.zone.offset < 0 ? '+' : '-') + Math.abs(zonedTime.zone.offset / 60);
-      const abbreviation = formatZonedTime(zonedTime, 'z');
-      const formatted = `(GMT ${offsetTime}) ${zone}${this.props.includeAbbreviations ? ` - ${abbreviation}` : ''}`.replace('_', ' ');
-      const option = {
-        id: zone,
-        label: formatted,
-        offset: zonedTime.zone.offset
-      };
-
-      if (this.props.mapLabels) {
-        option.label = this.props.mapLabels(option);
-      }
+    _defineProperty(this, "buildTimezones", compareDate => {
+      const timezones = [];
+
+      for (const zoneName of zones) {
+        try {
+          const offset = getTimezoneOffset(zoneName, compareDate) / 3_600_000;
+          const offsetFormatted = `${offset >= 0 ? '+' : '-'}${Math.abs(offset)}`;
+          let label = `(GMT${offsetFormatted}) ${zoneName.replace('_', ' ')}`;
+
+          if (this.props.includeAbbreviations) {
+            const abbreviation = format(compareDate, 'zzz', {
+              timeZone: zoneName
+            });
+
+            if (abbreviation) {
+              label += ` - ${abbreviation}`;
+            }
+          }
+
+          const offsetMinutes = offset * 60;
+          timezones.push({
+            id: zoneName,
+            label,
+            // offset output is in minutes, difference of UTC and this zone (negative for hours ahead of UTC, positive for hours behind)
+            offset: offsetMinutes === 0 ? 0 : offsetMinutes * -1
+          });
+        } catch (error) {
+          // Ignores timezones that are not available within a user's browser/operating system
+          console.error(`failed to format zone name ${zoneName}`);
+        }
+      } // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
 
-      return option;
-    }) // Formats 'noisy' timezones without a letter acronym.
-    .map(option => {
-      const rgx = /(\s-\s(\+|-)\d\d\d?\d?)$/;
-      const matches = option.label.match(rgx);
 
-      if (matches) {
-        const prefix = matches[0];
-        option.label = option.label.split(prefix)[0];
-      }
+      return timezones.sort((a, b) => {
+        const offsetDelta = b.offset - a.offset;
+        if (offsetDelta !== 0) return offsetDelta;
+
+        if (typeof a.label === 'string' && typeof b.label === 'string') {
+          if (a.label < b.label) return -1;
+          if (a.label > b.label) return 1;
+        }
 
-      return option;
-    }) // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
-    .sort((a, b) => {
-      const offsetDelta = b.offset - a.offset;
-      if (offsetDelta !== 0) return offsetDelta;
-      if (a.label < b.label) return -1;
-      if (a.label > b.label) return 1;
-      return 0;
-    }));
+        return 0;
+      });
+    });
   }
 
   componentDidMount() {
@@ -116,9 +125,19 @@ class TimezonePicker extends React.Component {
     selectProps.overrides); // $FlowFixMe
 
     selectProps.overrides = selectOverrides;
+    let options = this.state.timezones;
+
+    if (this.props.mapLabels) {
+      options = options.map(option => {
+        // $FlowFixMe - TimezoneT.label is a string, but mapLabels can return a React.Node
+        option.label = this.props.mapLabels(option);
+        return option;
+      });
+    }
+
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(OverriddenSelect, _extends({
       "aria-label": locale.datepicker.timezonePickerAriaLabel,
-      options: this.state.timezones,
+      options: options,
       clearable: false,
       disabled: this.props.disabled,
       error: this.props.error,

package/es/timezonepicker/tzdata.js

@@ -0,0 +1,2 @@
+/* eslint-disable header/header */
+export const zones = ['Europe/Andorra', 'Asia/Dubai', 'Asia/Kabul', 'Europe/Tirane', 'Asia/Yerevan', 'Antarctica/Casey', 'Antarctica/Davis', 'Antarctica/Mawson', 'Antarctica/Palmer', 'Antarctica/Rothera', 'Antarctica/Troll', 'Antarctica/Vostok', 'America/Argentina/Buenos_Aires', 'America/Argentina/Cordoba', 'America/Argentina/Salta', 'America/Argentina/Jujuy', 'America/Argentina/Tucuman', 'America/Argentina/Catamarca', 'America/Argentina/La_Rioja', 'America/Argentina/San_Juan', 'America/Argentina/Mendoza', 'America/Argentina/San_Luis', 'America/Argentina/Rio_Gallegos', 'America/Argentina/Ushuaia', 'Pacific/Pago_Pago', 'Europe/Vienna', 'Australia/Lord_Howe', 'Antarctica/Macquarie', 'Australia/Hobart', 'Australia/Melbourne', 'Australia/Sydney', 'Australia/Broken_Hill', 'Australia/Brisbane', 'Australia/Lindeman', 'Australia/Adelaide', 'Australia/Darwin', 'Australia/Perth', 'Australia/Eucla', 'Asia/Baku', 'America/Barbados', 'Asia/Dhaka', 'Europe/Brussels', 'Europe/Sofia', 'Atlantic/Bermuda', 'Asia/Brunei', 'America/La_Paz', 'America/Noronha', 'America/Belem', 'America/Fortaleza', 'America/Recife', 'America/Araguaina', 'America/Maceio', 'America/Bahia', 'America/Sao_Paulo', 'America/Campo_Grande', 'America/Cuiaba', 'America/Santarem', 'America/Porto_Velho', 'America/Boa_Vista', 'America/Manaus', 'America/Eirunepe', 'America/Rio_Branco', 'Asia/Thimphu', 'Europe/Minsk', 'America/Belize', 'America/St_Johns', 'America/Halifax', 'America/Glace_Bay', 'America/Moncton', 'America/Goose_Bay', 'America/Toronto', 'America/Nipigon', 'America/Thunder_Bay', 'America/Iqaluit', 'America/Pangnirtung', 'America/Winnipeg', 'America/Rainy_River', 'America/Resolute', 'America/Rankin_Inlet', 'America/Regina', 'America/Swift_Current', 'America/Edmonton', 'America/Cambridge_Bay', 'America/Yellowknife', 'America/Inuvik', 'America/Dawson_Creek', 'America/Fort_Nelson', 'America/Whitehorse', 'America/Dawson', 'America/Vancouver', 'Indian/Cocos', 'Europe/Zurich', 'Africa/Abidjan', 'Pacific/Rarotonga', 'America/Santiago', 'America/Punta_Arenas', 'Pacific/Easter', 'Asia/Shanghai', 'Asia/Urumqi', 'America/Bogota', 'America/Costa_Rica', 'America/Havana', 'Atlantic/Cape_Verde', 'Indian/Christmas', 'Asia/Nicosia', 'Asia/Famagusta', 'Europe/Prague', 'Europe/Berlin', 'Europe/Copenhagen', 'America/Santo_Domingo', 'Africa/Algiers', 'America/Guayaquil', 'Pacific/Galapagos', 'Europe/Tallinn', 'Africa/Cairo', 'Africa/El_Aaiun', 'Europe/Madrid', 'Africa/Ceuta', 'Atlantic/Canary', 'Europe/Helsinki', 'Pacific/Fiji', 'Atlantic/Stanley', 'Pacific/Chuuk', 'Pacific/Pohnpei', 'Pacific/Kosrae', 'Atlantic/Faroe', 'Europe/Paris', 'Europe/London', 'Asia/Tbilisi', 'America/Cayenne', 'Europe/Gibraltar', 'America/Nuuk', 'America/Danmarkshavn', 'America/Scoresbysund', 'America/Thule', 'Europe/Athens', 'Atlantic/South_Georgia', 'America/Guatemala', 'Pacific/Guam', 'Africa/Bissau', 'America/Guyana', 'Asia/Hong_Kong', 'America/Tegucigalpa', 'America/Port-au-Prince', 'Europe/Budapest', 'Asia/Jakarta', 'Asia/Pontianak', 'Asia/Makassar', 'Asia/Jayapura', 'Europe/Dublin', 'Asia/Jerusalem', 'Asia/Kolkata', 'Indian/Chagos', 'Asia/Baghdad', 'Asia/Tehran', 'Atlantic/Reykjavik', 'Europe/Rome', 'America/Jamaica', 'Asia/Amman', 'Asia/Tokyo', 'Africa/Nairobi', 'Asia/Bishkek', 'Pacific/Tarawa', 'Pacific/Kanton', 'Pacific/Kiritimati', 'Asia/Pyongyang', 'Asia/Seoul', 'Asia/Almaty', 'Asia/Qyzylorda', 'Asia/Qostanay', 'Asia/Aqtobe', 'Asia/Aqtau', 'Asia/Atyrau', 'Asia/Oral', 'Asia/Beirut', 'Asia/Colombo', 'Africa/Monrovia', 'Europe/Vilnius', 'Europe/Luxembourg', 'Europe/Riga', 'Africa/Tripoli', 'Africa/Casablanca', 'Europe/Monaco', 'Europe/Chisinau', 'Pacific/Majuro', 'Pacific/Kwajalein', 'Asia/Yangon', 'Asia/Ulaanbaatar', 'Asia/Hovd', 'Asia/Choibalsan', 'Asia/Macau', 'America/Martinique', 'Europe/Malta', 'Indian/Mauritius', 'Indian/Maldives', 'America/Mexico_City', 'America/Cancun', 'America/Merida', 'America/Monterrey', 'America/Matamoros', 'America/Mazatlan', 'America/Chihuahua', 'America/Ojinaga', 'America/Hermosillo', 'America/Tijuana', 'America/Bahia_Banderas', 'Asia/Kuala_Lumpur', 'Asia/Kuching', 'Africa/Maputo', 'Africa/Windhoek', 'Pacific/Noumea', 'Pacific/Norfolk', 'Africa/Lagos', 'America/Managua', 'Europe/Amsterdam', 'Europe/Oslo', 'Asia/Kathmandu', 'Pacific/Nauru', 'Pacific/Niue', 'Pacific/Auckland', 'Pacific/Chatham', 'America/Panama', 'America/Lima', 'Pacific/Tahiti', 'Pacific/Marquesas', 'Pacific/Gambier', 'Pacific/Port_Moresby', 'Pacific/Bougainville', 'Asia/Manila', 'Asia/Karachi', 'Europe/Warsaw', 'America/Miquelon', 'Pacific/Pitcairn', 'America/Puerto_Rico', 'Asia/Gaza', 'Asia/Hebron', 'Europe/Lisbon', 'Atlantic/Madeira', 'Atlantic/Azores', 'Pacific/Palau', 'America/Asuncion', 'Asia/Qatar', 'Indian/Reunion', 'Europe/Bucharest', 'Europe/Belgrade', 'Europe/Kaliningrad', 'Europe/Moscow', 'Europe/Simferopol', 'Europe/Kirov', 'Europe/Volgograd', 'Europe/Astrakhan', 'Europe/Saratov', 'Europe/Ulyanovsk', 'Europe/Samara', 'Asia/Yekaterinburg', 'Asia/Omsk', 'Asia/Novosibirsk', 'Asia/Barnaul', 'Asia/Tomsk', 'Asia/Novokuznetsk', 'Asia/Krasnoyarsk', 'Asia/Irkutsk', 'Asia/Chita', 'Asia/Yakutsk', 'Asia/Khandyga', 'Asia/Vladivostok', 'Asia/Ust-Nera', 'Asia/Magadan', 'Asia/Sakhalin', 'Asia/Srednekolymsk', 'Asia/Kamchatka', 'Asia/Anadyr', 'Asia/Riyadh', 'Pacific/Guadalcanal', 'Indian/Mahe', 'Africa/Khartoum', 'Europe/Stockholm', 'Asia/Singapore', 'America/Paramaribo', 'Africa/Juba', 'Africa/Sao_Tome', 'America/El_Salvador', 'Asia/Damascus', 'America/Grand_Turk', 'Africa/Ndjamena', 'Indian/Kerguelen', 'Asia/Bangkok', 'Asia/Dushanbe', 'Pacific/Fakaofo', 'Asia/Dili', 'Asia/Ashgabat', 'Africa/Tunis', 'Pacific/Tongatapu', 'Europe/Istanbul', 'Pacific/Funafuti', 'Asia/Taipei', 'Europe/Kiev', 'Europe/Uzhgorod', 'Europe/Zaporozhye', 'Pacific/Wake', 'America/New_York', 'America/Detroit', 'America/Kentucky/Louisville', 'America/Kentucky/Monticello', 'America/Indiana/Indianapolis', 'America/Indiana/Vincennes', 'America/Indiana/Winamac', 'America/Indiana/Marengo', 'America/Indiana/Petersburg', 'America/Indiana/Vevay', 'America/Chicago', 'America/Indiana/Tell_City', 'America/Indiana/Knox', 'America/Menominee', 'America/North_Dakota/Center', 'America/North_Dakota/New_Salem', 'America/North_Dakota/Beulah', 'America/Denver', 'America/Boise', 'America/Phoenix', 'America/Los_Angeles', 'America/Anchorage', 'America/Juneau', 'America/Sitka', 'America/Metlakatla', 'America/Yakutat', 'America/Nome', 'America/Adak', 'Pacific/Honolulu', 'America/Montevideo', 'Asia/Samarkand', 'Asia/Tashkent', 'America/Caracas', 'Asia/Ho_Chi_Minh', 'Pacific/Efate', 'Pacific/Wallis', 'Pacific/Apia', 'Africa/Johannesburg'];

package/es/timezonepicker/update-tzdata.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.
+*/
+
+/* eslint-env node */
+const fs = require('fs');
+
+const path = require('path');
+
+const util = require('util');
+
+const exec = util.promisify(require('child_process').exec); // Download tzdata and collect a list of timezones. Baseui previously used a library
+// to do this, but it grew stale and unmaintained. This approach is straightforward
+// enough to update whenever necessary, but future improvements could include building
+// this data set before baseui is published so that the data is always fresh.
+
+async function main() {
+  try {
+    const tmpDir = path.join(__dirname, 'tmp'); // $FlowFixMe - flow is not aware of recursive option
+
+    await fs.promises.rmdir(tmpDir, {
+      recursive: true
+    });
+    await fs.promises.mkdir(tmpDir);
+    const src = `https://www.iana.org/time-zones/repository/tzdata-latest.tar.gz`;
+    await exec(`curl -L ${src} | gzip -dc | tar -xf - --directory ${tmpDir}`);
+    const zoneTabPath = path.join(tmpDir, 'zone1970.tab');
+    const content = await fs.promises.readFile(zoneTabPath, 'utf-8');
+    const lines = content.split('\n');
+    const zones = [];
+
+    for (const line of lines) {
+      if (line[0] === '#') {
+        continue;
+      }
+
+      const parts = line.split(/\s+/);
+
+      if (parts.length >= 3) {
+        zones.push(parts[2]);
+      }
+    }
+
+    const file = [];
+    file.push('/* eslint-disable header/header */');
+    file.push('// @flow');
+    file.push('');
+    file.push('export const zones = [');
+
+    for (const zone of zones) {
+      file.push(`  '${zone}',`);
+    }
+
+    file.push('];');
+    const tzdataPath = path.join(__dirname, 'tzdata.js');
+    await fs.promises.writeFile(tzdataPath, file.join('\n')); // $FlowFixMe - flow is not aware of recursive option
+
+    await fs.promises.rmdir(tmpDir, {
+      recursive: true
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+main();

package/esm/a11y/a11y.js

@@ -21,7 +21,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import axe from 'axe-core';
 import { Layer, TetherBehavior, TETHER_PLACEMENT } from '../layer/index.js';
-import { Paragraph3, Caption1 } from '../typography/index.js';
+import { ParagraphSmall, ParagraphXSmall } from '../typography/index.js';
 import { styled } from '../styles/index.js';
 import { ThemeContext } from '../styles/theme-provider.js';
 
@@ -128,8 +128,8 @@ function Violation(props) {
     ref: setPopper,
     $top: "".concat(offset.top, "px") || '0px',
     $left: "".concat(offset.left, "px") || '0px'
-  }, /*#__PURE__*/React.createElement(Caption1, null, props.target), props.violations.map(function (violation, index) {
-    return /*#__PURE__*/React.createElement(Paragraph3, {
+  }, /*#__PURE__*/React.createElement(ParagraphXSmall, null, props.target), props.violations.map(function (violation, index) {
+    return /*#__PURE__*/React.createElement(ParagraphSmall, {
       key: index
     }, violation.description);
   }))));

package/esm/button/styled-components.js

@@ -43,11 +43,14 @@ export var BaseButton = styled('button', function (_ref) {
     transitionDuration: $theme.animation.timing200,
     transitionTimingFunction: $theme.animation.linearCurve,
     cursor: 'pointer',
-    ':disabled': {
-      cursor: 'not-allowed',
-      backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
-      color: $theme.colors.buttonDisabledText
-    },
+    ':disabled': _objectSpread({
+      cursor: 'not-allowed'
+    }, getDisabledStyles({
+      $theme: $theme,
+      $kind: $kind,
+      $disabled: $disabled,
+      $isSelected: $isSelected
+    })),
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,
@@ -267,10 +270,36 @@ function getFontStyles(_ref10) {
   }
 }
 
-function getPaddingStyles(_ref11) {
+function getDisabledStyles(_ref11) {
   var $theme = _ref11.$theme,
-      $size = _ref11.$size,
-      $shape = _ref11.$shape;
+      $kind = _ref11.$kind,
+      $isSelected = _ref11.$isSelected,
+      $disabled = _ref11.$disabled;
+
+  if ($disabled && $isSelected) {
+    if ($kind === KIND.primary || $kind === KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill
+      };
+    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText
+      };
+    }
+  }
+
+  return {
+    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText
+  };
+}
+
+function getPaddingStyles(_ref12) {
+  var $theme = _ref12.$theme,
+      $size = _ref12.$size,
+      $shape = _ref12.$shape;
   var iconShape = $shape === SHAPE.square || $shape === SHAPE.circle || $shape === SHAPE.round;
 
   switch ($size) {
@@ -308,12 +337,12 @@ function getPaddingStyles(_ref11) {
   }
 }
 
-function getKindStyles(_ref12) {
-  var $theme = _ref12.$theme,
-      $isLoading = _ref12.$isLoading,
-      $isSelected = _ref12.$isSelected,
-      $kind = _ref12.$kind,
-      $disabled = _ref12.$disabled;
+function getKindStyles(_ref13) {
+  var $theme = _ref13.$theme,
+      $isLoading = _ref13.$isLoading,
+      $isSelected = _ref13.$isSelected,
+      $kind = _ref13.$kind,
+      $disabled = _ref13.$disabled;
 
   if ($disabled) {
     return Object.freeze({});
@@ -401,10 +430,10 @@ function getKindStyles(_ref12) {
   }
 }
 
-function getShapeStyles(_ref13) {
-  var $theme = _ref13.$theme,
-      $shape = _ref13.$shape,
-      $size = _ref13.$size;
+function getShapeStyles(_ref14) {
+  var $theme = _ref14.$theme,
+      $shape = _ref14.$shape,
+      $size = _ref14.$size;
 
   if ($shape === SHAPE.circle || $shape === SHAPE.square) {
     var height, width;

package/esm/combobox/combobox.js

@@ -46,6 +46,7 @@ function Combobox(props) {
       onChange = props.onChange,
       onFocus = props.onFocus,
       onSubmit = props.onSubmit,
+      listBoxLabel = props.listBoxLabel,
       mapOptionToNode = props.mapOptionToNode,
       mapOptionToString = props.mapOptionToString,
       id = props.id,
@@ -308,6 +309,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map(function (option, index) {
       var isSelected = selectionIndex === index;
@@ -346,9 +348,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -361,7 +362,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 export default Combobox;

package/esm/data-table/column-categorical.js

@@ -29,7 +29,7 @@ import { Checkbox, StyledLabel } from '../checkbox/index.js';
 import Search from '../icon/search.js';
 import { Input, SIZE as INPUT_SIZE } from '../input/index.js';
 import { useStyletron, withStyle } from '../styles/index.js';
-import { Label3 } from '../typography/index.js';
+import { LabelSmall } from '../typography/index.js';
 import Column from './column.js';
 import { COLUMNS } from './constants.js';
 import { LocaleContext } from '../locale/index.js';
@@ -186,7 +186,7 @@ export function CategoricalFilter(props) {
       overflowY: 'auto',
       marginTop: theme.sizing.scale600
     })
-  }, !filteredCategories.length && /*#__PURE__*/React.createElement(Label3, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
+  }, !filteredCategories.length && /*#__PURE__*/React.createElement(LabelSmall, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
     return /*#__PURE__*/React.createElement("div", {
       className: checkboxStyles,
       key: i