baseui 10.9.2 → 10.10.0

package/esm/data-table/constants.js

@@ -19,13 +19,6 @@ export var NUMERICAL_FORMATS = Object.freeze({
   ACCOUNTING: 'ACCOUNTING',
   PERCENTAGE: 'PERCENTAGE'
 });
-export var NUMERICAL_OPERATIONS = Object.freeze({
-  EQ: 'EQ',
-  GT: 'GT',
-  GTE: 'GTE',
-  LT: 'LT',
-  LTE: 'LTE'
-});
 export var DATETIME_OPERATIONS = Object.freeze({
   RANGE_DATETIME: 'RANGE_DATETIME',
   RANGE_DATE: 'RANGE_DATE',
@@ -39,4 +32,15 @@ export var DATETIME_OPERATIONS = Object.freeze({
 export var SORT_DIRECTIONS = Object.freeze({
   ASC: 'ASC',
   DESC: 'DESC'
-});
+}); // If modifying this, take a look at the histogram and adjust. see HISTOGRAM_SIZE
+
+export var FILTER_SHELL_WIDTH = '320px'; // Depends on FILTER_SHELL_WIDTH
+
+export var HISTOGRAM_SIZE = {
+  width: 308,
+  height: 120
+}; // Arguably visually appealing within the given width.
+// Smaller and we don't have enough detail per bar.
+// Larger and the bars are too granular and don't align well with the slider steps
+
+export var MAX_BIN_COUNT = 50;

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

@@ -43,6 +43,12 @@ import { LocaleContext } from '../locale/index.js'; // consider pulling this out
 
 var HEADER_ROW_HEIGHT = 48;
 
+var sum = function sum(ns) {
+  return ns.reduce(function (s, n) {
+    return s + n;
+  }, 0);
+};
+
 function CellPlacement(_ref) {
   var columnIndex = _ref.columnIndex,
       rowIndex = _ref.rowIndex,
@@ -301,7 +307,7 @@ function Header(props) {
   }))));
 }
 
-function Headers(props) {
+function Headers() {
   var _useStyletron5 = useStyletron(),
       _useStyletron6 = _slicedToArray(_useStyletron5, 2),
       css = _useStyletron6[0],
@@ -320,9 +326,7 @@ function Headers(props) {
       position: 'sticky',
       top: 0,
       left: 0,
-      width: "".concat(ctx.widths.reduce(function (sum, w) {
-        return sum + w;
-      }, 0), "px"),
+      width: "".concat(sum(ctx.widths), "px"),
       height: "".concat(HEADER_ROW_HEIGHT, "px"),
       display: 'flex',
       // this feels bad.. the absolutely positioned children elements
@@ -545,22 +549,27 @@ export function DataTable(_ref2) {
     }
 
     return rowHeight;
-  }, [rowHeight]);
-  var gridRef = React.useRef(null);
+  }, [rowHeight]); // We use state for our ref, to allow hooks to  update when the ref changes.
+  // eslint-disable-next-line flowtype/no-weak-types
 
-  var _React$useState7 = React.useState(columns.map(function () {
-    return 0;
-  })),
+  var _React$useState7 = React.useState(null),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      measuredWidths = _React$useState8[0],
-      setMeasuredWidths = _React$useState8[1];
+      gridRef = _React$useState8[0],
+      setGridRef = _React$useState8[1];
 
   var _React$useState9 = React.useState(columns.map(function () {
     return 0;
   })),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      resizeDeltas = _React$useState10[0],
-      setResizeDeltas = _React$useState10[1];
+      measuredWidths = _React$useState10[0],
+      setMeasuredWidths = _React$useState10[1];
+
+  var _React$useState11 = React.useState(columns.map(function () {
+    return 0;
+  })),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      resizeDeltas = _React$useState12[0],
+      setResizeDeltas = _React$useState12[1];
 
   React.useEffect(function () {
     setMeasuredWidths(function (prev) {
@@ -575,11 +584,11 @@ export function DataTable(_ref2) {
     });
   }, [columns]);
   var resetAfterColumnIndex = React.useCallback(function (columnIndex) {
-    if (gridRef.current) {
+    if (gridRef) {
       // $FlowFixMe trigger react-window to layout the elements again
-      gridRef.current.resetAfterColumnIndex(columnIndex, true);
+      gridRef.resetAfterColumnIndex(columnIndex, true);
     }
-  }, [gridRef.current]);
+  }, [gridRef]);
   var handleWidthsChange = React.useCallback(function (nextWidths) {
     setMeasuredWidths(nextWidths);
     resetAfterColumnIndex(0);
@@ -592,20 +601,20 @@ export function DataTable(_ref2) {
     resetAfterColumnIndex(columnIndex);
   }, [setResizeDeltas, resetAfterColumnIndex]);
 
-  var _React$useState11 = React.useState(0),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      scrollLeft = _React$useState12[0],
-      setScrollLeft = _React$useState12[1];
-
-  var _React$useState13 = React.useState(false),
+  var _React$useState13 = React.useState(0),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      isScrollingX = _React$useState14[0],
-      setIsScrollingX = _React$useState14[1];
+      scrollLeft = _React$useState14[0],
+      setScrollLeft = _React$useState14[1];
 
   var _React$useState15 = React.useState(false),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      recentlyScrolledX = _React$useState16[0],
-      setRecentlyScrolledX = _React$useState16[1];
+      isScrollingX = _React$useState16[0],
+      setIsScrollingX = _React$useState16[1];
+
+  var _React$useState17 = React.useState(false),
+      _React$useState18 = _slicedToArray(_React$useState17, 2),
+      recentlyScrolledX = _React$useState18[0],
+      setRecentlyScrolledX = _React$useState18[1];
 
   React.useLayoutEffect(function () {
     if (recentlyScrolledX !== isScrollingX) {
@@ -727,25 +736,18 @@ export function DataTable(_ref2) {
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
 
-  var _React$useState17 = React.useState(0),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      browserScrollbarWidth = _React$useState18[0],
-      setBrowserScrollbarWidth = _React$useState18[1];
+  var _React$useState19 = React.useState(0),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      browserScrollbarWidth = _React$useState20[0],
+      setBrowserScrollbarWidth = _React$useState20[1];
 
   var normalizedWidths = React.useMemo(function () {
-    var sum = function sum(ns) {
-      return ns.reduce(function (s, n) {
-        return s + n;
-      }, 0);
-    };
-
     var resizedWidths = measuredWidths.map(function (w, i) {
       return Math.floor(w) + Math.floor(resizeDeltas[i]);
     });
 
-    if (gridRef.current) {
-      // $FlowFixMe
-      var gridProps = gridRef.current.props;
+    if (gridRef) {
+      var gridProps = gridRef.props;
       var isContentTallerThanContainer = false;
       var visibleRowHeight = 0;
 
@@ -782,7 +784,7 @@ export function DataTable(_ref2) {
     }
 
     return resizedWidths;
-  }, [measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
+  }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
   var isSelectable = batchActions ? !!batchActions.length : false;
   var isSelectedAll = React.useMemo(function () {
     if (!selectedRowIds) {
@@ -826,23 +828,23 @@ export function DataTable(_ref2) {
     }
   }, [onSort]);
 
-  var _React$useState19 = React.useState(-1),
-      _React$useState20 = _slicedToArray(_React$useState19, 2),
-      columnHighlightIndex = _React$useState20[0],
-      setColumnHighlightIndex = _React$useState20[1];
-
   var _React$useState21 = React.useState(-1),
       _React$useState22 = _slicedToArray(_React$useState21, 2),
-      rowHighlightIndex = _React$useState22[0],
-      setRowHighlightIndex = _React$useState22[1];
+      columnHighlightIndex = _React$useState22[0],
+      setColumnHighlightIndex = _React$useState22[1];
+
+  var _React$useState23 = React.useState(-1),
+      _React$useState24 = _slicedToArray(_React$useState23, 2),
+      rowHighlightIndex = _React$useState24[0],
+      setRowHighlightIndex = _React$useState24[1];
 
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
 
-    if (gridRef.current) {
+    if (gridRef) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.current.scrollToItem({
+        gridRef.scrollToItem({
           rowIndex: nextIndex
         });
       }
@@ -933,8 +935,9 @@ export function DataTable(_ref2) {
       }
     }, /*#__PURE__*/React.createElement(VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
     , {
-      ref: gridRef,
+      ref: setGridRef,
       overscanRowCount: 10,
+      overscanColumnCount: 5,
       innerElementType: InnerTableElement,
       columnCount: columns.length,
       columnWidth: function columnWidth(columnIndex) {

package/esm/data-table/filter-shell.js

@@ -21,6 +21,7 @@ import { Button, SIZE as BUTTON_SIZE } from '../button/index.js';
 import { Checkbox, STYLE_TYPE } from '../checkbox/index.js';
 import { useStyletron } from '../styles/index.js';
 import { LocaleContext } from '../locale/index.js';
+import { FILTER_SHELL_WIDTH } from './constants.js';
 
 function FilterShell(props) {
   var _useStyletron = useStyletron(),
@@ -29,6 +30,21 @@ function FilterShell(props) {
       theme = _useStyletron2[1];
 
   var locale = React.useContext(LocaleContext);
+  var excludeText;
+
+  switch (props.excludeKind) {
+    case 'value':
+      excludeText = locale.datatable.filterExcludeValue;
+      break;
+
+    case 'range':
+      excludeText = locale.datatable.filterExcludeRange;
+      break;
+
+    default:
+      excludeText = locale.datatable.filterExclude;
+  }
+
   return /*#__PURE__*/React.createElement("form", {
     className: css({
       backgroundColor: theme.colors.backgroundPrimary,
@@ -36,7 +52,7 @@ function FilterShell(props) {
       paddingRight: theme.sizing.scale600,
       paddingBottom: theme.sizing.scale600,
       paddingLeft: theme.sizing.scale600,
-      width: '320px'
+      width: FILTER_SHELL_WIDTH
     }),
     onSubmit: function onSubmit(event) {
       event.preventDefault();
@@ -44,17 +60,23 @@ function FilterShell(props) {
     }
   }, props.children, /*#__PURE__*/React.createElement("div", {
     className: css({
-      alignItems: 'center',
       display: 'flex',
+      flexDirection: 'column',
       justifyContent: 'space-between',
-      marginTop: theme.sizing.scale600
+      alignItems: 'flex-end',
+      marginTop: theme.sizing.scale600,
+      gap: theme.sizing.scale200
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: css({
+      alignSelf: 'flex-start'
     })
   }, /*#__PURE__*/React.createElement(Checkbox, {
     checked: props.exclude,
     onChange: props.onExcludeChange,
     checkmarkType: STYLE_TYPE.toggle_round,
     labelPlacement: "right"
-  }, locale.datatable.filterExclude), /*#__PURE__*/React.createElement(Button, {
+  }, excludeText)), /*#__PURE__*/React.createElement(Button, {
     size: BUTTON_SIZE.compact,
     type: "submit"
   }, locale.datatable.filterApply)));

package/esm/data-table/locale.js

@@ -6,18 +6,20 @@ LICENSE file in the root directory of this source tree.
 */
 var locale = {
   emptyState: 'No rows match the filter criteria defined. Please remove one or more filters to view more data.',
-  loadingState: 'Loading Rows.',
+  loadingState: 'Loading rows.',
   searchAriaLabel: 'Search by text',
   filterAdd: 'Add Filter',
   filterExclude: 'Exclude',
   filterApply: 'Apply',
+  filterExcludeRange: 'Exclude range',
+  filterExcludeValue: 'Exclude value',
   filterAppliedTo: 'filter applied to',
   optionsLabel: 'Select column to filter by',
   optionsSearch: 'Search for a column to filter by...',
   optionsEmpty: 'No columns available.',
   categoricalFilterSelectAll: 'Select All',
   categoricalFilterSelectClear: 'Clear',
-  categoricalFilterEmpty: 'No Categories Found',
+  categoricalFilterEmpty: 'No categories found',
   datetimeFilterRange: 'Range',
   datetimeFilterRangeDatetime: 'Date, Time',
   datetimeFilterRangeDate: 'Date',

package/esm/data-table/measure-column-widths.js

@@ -1,11 +1,3 @@
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -27,51 +19,64 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { useStyletron } from '../styles/index.js';
 import HeaderCell from './header-cell.js';
+import { useRef } from 'react'; // Measures the column header + sampled data
 
-// https://github.com/Swizec/useDimensions
-function useDimensions() {
-  var _React$useState = React.useState({}),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      dimensions = _React$useState2[0],
-      setDimensions = _React$useState2[1];
+function MeasureColumn(_ref) {
+  var sampleIndexes = _ref.sampleIndexes,
+      column = _ref.column,
+      columnIndex = _ref.columnIndex,
+      rows = _ref.rows,
+      isSelectable = _ref.isSelectable,
+      onLayout = _ref.onLayout;
 
-  var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      node = _React$useState4[0],
-      setNode = _React$useState4[1];
+  var _useStyletron = useStyletron(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 1),
+      css = _useStyletron2[0];
 
-  var ref = React.useCallback(function (node) {
-    setNode(node);
-  }, []);
+  var ref = useRef();
   React.useEffect(function () {
     if (typeof document !== 'undefined') {
-      if (node) {
-        window.requestAnimationFrame(function () {
-          setDimensions(node.getBoundingClientRect());
-        });
+      if (ref.current) {
+        onLayout(columnIndex, ref.current.getBoundingClientRect());
       }
     }
-  }, [node]);
-  return [ref, dimensions];
-}
-
-function ElementMeasurer(props) {
-  var onDimensionsChange = props.onDimensionsChange;
-
-  var _useDimensions = useDimensions(),
-      _useDimensions2 = _slicedToArray(_useDimensions, 2),
-      ref = _useDimensions2[0],
-      dimensions = _useDimensions2[1];
-
-  React.useEffect(function () {
-    onDimensionsChange(dimensions);
-  }, [dimensions, onDimensionsChange]);
-  return /*#__PURE__*/React.cloneElement(props.item, {
-    ref: ref
-  });
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: css({
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'fit-content'
+    })
+  }, /*#__PURE__*/React.createElement(HeaderCell, {
+    index: columnIndex,
+    isHovered: true,
+    isMeasured: true,
+    isSelectedAll: false,
+    isSelectedIndeterminate: false,
+    onMouseEnter: function onMouseEnter() {},
+    onMouseLeave: function onMouseLeave() {},
+    onSelectAll: function onSelectAll() {},
+    onSelectNone: function onSelectNone() {},
+    onSort: function onSort(i) {},
+    sortable: column.sortable,
+    sortDirection: null,
+    title: column.title,
+    isSelectable: isSelectable
+  }), sampleIndexes.map(function (rowIndex, i) {
+    var Cell = column.renderCell;
+    return /*#__PURE__*/React.createElement(Cell, {
+      key: "measure-".concat(i),
+      value: column.mapDataToValue(rows[rowIndex].data),
+      isSelectable: isSelectable,
+      isMeasured: true,
+      sortable: column.sortable,
+      x: 0,
+      y: rowIndex
+    });
+  }));
 }
 
-// sample size could likely be generated based on row count, to have higher confidence
 var MAX_SAMPLE_SIZE = 50;
 
 function generateSampleIndices(inputMin, inputMax, maxSamples) {
@@ -103,57 +108,46 @@ function generateSampleIndices(inputMin, inputMax, maxSamples) {
   return indices;
 }
 
-export default function MeasureColumnWidths(_ref) {
-  var columns = _ref.columns,
-      rows = _ref.rows,
-      widths = _ref.widths,
-      isSelectable = _ref.isSelectable,
-      onWidthsChange = _ref.onWidthsChange;
+export default function MeasureColumnWidths(_ref2) {
+  var columns = _ref2.columns,
+      rows = _ref2.rows,
+      widths = _ref2.widths,
+      isSelectable = _ref2.isSelectable,
+      onWidthsChange = _ref2.onWidthsChange;
 
-  var _useStyletron = useStyletron(),
-      _useStyletron2 = _slicedToArray(_useStyletron, 1),
-      css = _useStyletron2[0];
+  var _useStyletron3 = useStyletron(),
+      _useStyletron4 = _slicedToArray(_useStyletron3, 1),
+      css = _useStyletron4[0];
 
-  var measurementCount = React.useRef(0);
-  var dimensionsCache = React.useRef(widths);
+  var widthMap = React.useMemo(function () {
+    return new Map();
+  }, []);
   var sampleSize = rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
   var finishedMeasurementCount = (sampleSize + 1) * columns.length;
-  var sampleRowIndicesByColumn = React.useMemo(function () {
-    measurementCount.current = 0;
-    dimensionsCache.current = widths;
-    var indices = generateSampleIndices(0, rows.length - 1, sampleSize);
-    return columns.map(function () {
-      return indices;
-    });
+  var sampleIndexes = React.useMemo(function () {
+    return generateSampleIndices(0, rows.length - 1, sampleSize);
   }, [columns, rows, widths, sampleSize]);
-  var handleDimensionsChange = React.useCallback(function (columnIndex, rowIndex, dimensions) {
-    if (dimensions.width === undefined) return;
+  var handleDimensionsChange = React.useCallback(function (columnIndex, dimensions) {
+    var nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, widthMap.get(columnIndex) || 0, dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
 
-    if (columns[columnIndex] === undefined || dimensionsCache.current[columnIndex] === undefined) {
-      return;
+    if (nextWidth !== widthMap.get(columnIndex)) {
+      widthMap.set(columnIndex, nextWidth);
     }
 
-    measurementCount.current += 1;
-    var nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, dimensionsCache.current[columnIndex], dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
-
-    if (nextWidth !== dimensionsCache.current[columnIndex]) {
-      var nextWidths = _toConsumableArray(dimensionsCache.current);
-
-      nextWidths[columnIndex] = nextWidth;
-      dimensionsCache.current = nextWidths;
-    }
-
-    if (measurementCount.current >= finishedMeasurementCount) {
-      onWidthsChange(dimensionsCache.current);
+    if ( // Refresh at 100% of done
+    widthMap.size === columns.length || // ...50%
+    widthMap.size === Math.floor(columns.length / 2) || // ...25%
+    widthMap.size === Math.floor(columns.length / 4)) {
+      onWidthsChange(Array.from(widthMap.values()));
     }
   }, [columns, finishedMeasurementCount, onWidthsChange]);
   var hiddenStyle = css({
     position: 'absolute',
     overflow: 'hidden',
     height: 0
-  });
+  }); // Remove the measurement nodes after we are done updating our column width
 
-  if (measurementCount.current >= finishedMeasurementCount) {
+  if (widthMap.size === columns.length) {
     return null;
   }
 
@@ -164,45 +158,15 @@ export default function MeasureColumnWidths(_ref) {
       className: hiddenStyle,
       "aria-hidden": true,
       role: "none"
-    }, sampleRowIndicesByColumn.map(function (rowIndices, columnIndex) {
-      var Cell = columns[columnIndex].renderCell;
-      return rowIndices.map(function (rowIndex) {
-        return /*#__PURE__*/React.createElement(ElementMeasurer, {
-          key: "measure-".concat(columnIndex, "-").concat(rowIndex),
-          onDimensionsChange: function onDimensionsChange(dimensions) {
-            return handleDimensionsChange(columnIndex, rowIndex, dimensions);
-          },
-          item: /*#__PURE__*/React.createElement(Cell, {
-            value: columns[columnIndex].mapDataToValue(rows[rowIndex].data),
-            isMeasured: true,
-            onSelect: isSelectable && columnIndex === 0 ? function () {} : undefined,
-            x: columnIndex,
-            y: rowIndex
-          })
-        });
-      });
-    }), columns.map(function (column, columnIndex) {
-      return /*#__PURE__*/React.createElement(ElementMeasurer, {
-        key: "measure-column-".concat(columnIndex),
-        onDimensionsChange: function onDimensionsChange(dimensions) {
-          return handleDimensionsChange(columnIndex, -1, dimensions);
-        },
-        item: /*#__PURE__*/React.createElement(HeaderCell, {
-          index: columnIndex,
-          isHovered: true,
-          isMeasured: true,
-          isSelectable: isSelectable && columnIndex === 0,
-          isSelectedAll: false,
-          isSelectedIndeterminate: false,
-          onMouseEnter: function onMouseEnter() {},
-          onMouseLeave: function onMouseLeave() {},
-          onSelectAll: function onSelectAll() {},
-          onSelectNone: function onSelectNone() {},
-          onSort: function onSort(i) {},
-          sortable: column.sortable,
-          sortDirection: null,
-          title: column.title
-        })
+    }, columns.map(function (column, i) {
+      return /*#__PURE__*/React.createElement(MeasureColumn, {
+        key: column.title + i,
+        column: column,
+        rows: rows,
+        isSelectable: isSelectable,
+        onLayout: handleDimensionsChange,
+        columnIndex: i,
+        sampleIndexes: sampleIndexes
       });
     }))
   );

package/esm/timezonepicker/timezone-picker.js

@@ -86,7 +86,7 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
           try {
             var offset = getTimezoneOffset(zoneName, compareDate) / 3600000;
             var offsetFormatted = "".concat(offset >= 0 ? '+' : '-').concat(Math.abs(offset));
-            var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace('_', ' '));
+            var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace(/_/g, ' '));
 
             if (_this.props.includeAbbreviations) {
               var abbreviation = format(compareDate, 'zzz', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.9.2",
+  "version": "10.10.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -193,6 +193,7 @@
   "dependencies": {
     "@date-io/date-fns": "^2.6.2",
     "card-validator": "^6.2.0",
+    "d3": "^6.7.0",
     "date-fns": "^2.6.0",
     "date-fns-tz": "^1.2.2",
     "glob": "^7.1.6",

package/timezonepicker/timezone-picker.js

@@ -95,7 +95,7 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
           try {
             var offset = (0, _dateFnsTz.getTimezoneOffset)(zoneName, compareDate) / 3600000;
             var offsetFormatted = "".concat(offset >= 0 ? '+' : '-').concat(Math.abs(offset));
-            var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace('_', ' '));
+            var label = "(GMT".concat(offsetFormatted, ") ").concat(zoneName.replace(/_/g, ' '));
 
             if (_this.props.includeAbbreviations) {
               var abbreviation = (0, _dateFnsTz.format)(compareDate, 'zzz', {

package/timezonepicker/timezone-picker.js.flow

@@ -64,7 +64,7 @@ class TimezonePicker extends React.Component<
         const offset = getTimezoneOffset(zoneName, compareDate) / 3_600_000;
 
         const offsetFormatted = `${offset >= 0 ? '+' : '-'}${Math.abs(offset)}`;
-        let label = `(GMT${offsetFormatted}) ${zoneName.replace('_', ' ')}`;
+        let label = `(GMT${offsetFormatted}) ${zoneName.replace(/_/g, ' ')}`;
 
         if (this.props.includeAbbreviations) {
           const abbreviation = format(compareDate, 'zzz', {timeZone: zoneName});