@elastic/eui 119.1.0 → 120.0.0

package/optimize/es/components/button/button_group/button_group.styles.js

@@ -8,15 +8,16 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiButtonSizeMap, euiDisabledSelector, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiButtonSizeMap, euiDisabledSelector, euiShadowXSmall, logicalCSS, mathWithUnits } from '../../../global_styling';
 import { highContrastModeStyles, preventForcedColors } from '../../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../../form/form.styles';
 var hasButtonOnlySelector = ':not(:has(.euiButtonIcon))';
 var hasButtonIconOnlySelector = ':not(:has(.euiButton, .euiButtonEmpty))';
 var buttonItemSelector = '.euiButtonGroup__item, .euiToolTipAnchor, .euiPopover, .euiButton';
 var buttonOnlyItemSelector = "*:is(".concat(buttonItemSelector, "):not(:has(.euiButtonIcon))");
+var segmentedStyledSelector = "*:is([data-variant='segmented'], [data-variant='selection'])";
 export var euiButtonGroupStyles = {
-  euiButtonGroup: /*#__PURE__*/css("display:inline-block;", logicalCSS('max-width', '100%'), " position:relative;&:where([data-variant='segmented']){&", hasButtonIconOnlySelector, "{display:flex;}};label:euiButtonGroup;"),
+  euiButtonGroup: /*#__PURE__*/css("display:inline-block;", logicalCSS('max-width', '100%'), " position:relative;&:where(", segmentedStyledSelector, "){&", hasButtonIconOnlySelector, "{display:flex;}};label:euiButtonGroup;"),
   fullWidth: process.env.NODE_ENV === "production" ? {
     name: "jl0hie-fullWidth",
     styles: "display:block;label:fullWidth;"
@@ -69,13 +70,25 @@ export var euiButtonGroupButtonsStyles = function euiButtonGroupButtonsStyles(eu
   }), ";\n        inline-size: calc(\n          100% + ").concat(mathWithUnits(containerPadding, function (x) {
     return x * 2;
   }), "\n        );\n        block-size: ").concat(euiTheme.border.width.thin, ";\n        border-block-start: ").concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBasePlain, ";\n        pointer-events: none;\n      }\n\n      /* inline border */\n      &::after {\n        content: '';\n        position: absolute;\n        inset-inline-start: -").concat(dividerOffset, ";\n        block-size: calc(\n          var(--euiButtonGroupButtonInsetSize) - ").concat(euiTheme.size.s, "\n        );\n        inline-size: ").concat(euiTheme.border.width.thin, ";\n        border-inline-start: ").concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBasePlain, ";\n        pointer-events: none;\n      }\n    }\n\n    &:where([data-layout='horizontal'] &) {\n      &:where(:is(").concat(hasButtonIconOnlySelector, ") &) {\n        .euiButtonGroup__item::before {\n          inset-inline-start: 0;\n          inline-size: 100%;\n        }\n      }\n    }\n\n    &:where([data-layout='vertical'] &) {\n      &:where(:is(").concat(hasButtonIconOnlySelector, ") &) {\n        .euiButtonGroup__item::before {\n          inset-inline-start: auto;\n          inline-size: calc(\n            var(--euiButtonGroupButtonInsetSize) - ").concat(euiTheme.size.s, "\n          );\n        }\n      }\n    }\n  ");
-  var segmentedChildrenStyles = "\n    /* Buttons are used inset and shouldn't have their own borders */\n    .euiButton,\n    .euiButtonIcon {\n      border: none;\n      pointer-events: auto; /* Ensure buttons are still clickable in jsdom */\n\n      &::before {\n        border-radius: inherit;\n      }\n    }\n\n    /* Adjust children for inset behavior */\n    ".concat(buttonItemSelector, ", \n    .euiButtonIcon {\n      display: inline-flex;\n      align-items: center;\n      block-size: var(--euiButtonGroupButtonInsetSize);\n      border-radius: ").concat(buttonGroupVariables.radius.inner, ";\n    }\n\n    .euiButtonIcon {\n      inline-size: var(--euiButtonGroupButtonInsetSize);\n    }\n\n    /* Only non-icon buttons auto-grow/shrink */\n    .euiButton,\n    ").concat(buttonOnlyItemSelector, " {\n      flex: 1;\n      min-inline-size: auto;\n    }\n  ");
+
+  // Shared inset styles for both segmented and selection variants.
+  var segmentedChildrenStyles = "\n    /* Buttons are used inset and shouldn't have their own borders */\n    .euiButton,\n    .euiButtonIcon {\n      border: none;\n      pointer-events: auto; /* Ensure buttons are still clickable in jsdom */\n\n      &::before {\n        border-radius: inherit;\n      }\n\n      &:focus-visible {\n        outline-offset: 0;\n      }\n    }\n\n    /* Adjust children for inset behavior */\n    ".concat(buttonItemSelector, ",\n    .euiButtonIcon {\n      display: inline-flex;\n      align-items: center;\n      block-size: var(--euiButtonGroupButtonInsetSize);\n      border-radius: ").concat(buttonGroupVariables.radius.inner, ";\n    }\n\n    .euiButtonIcon {\n      inline-size: var(--euiButtonGroupButtonInsetSize);\n    }\n\n    /* Only non-icon buttons auto-grow/shrink */\n    .euiButton,\n    ").concat(buttonOnlyItemSelector, " {\n      flex: 1;\n      min-inline-size: auto;\n    }\n  ");
   return {
     // Base
-    euiButtonGroup__container: /*#__PURE__*/css("&:where([data-variant='segmented'] &){position:relative;display:inline-flex;align-items:center;max-inline-size:100%;padding:", splitPadding, ";border-radius:", buttonGroupVariables.radius.outer, ";background-color:", euiTheme.colors.backgroundBasePlain, ";&:where([data-size='s'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.s, ";min-block-size:", buttonSizeMap.s.height, ";}&:where([data-size='m'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.m, ";min-block-size:", buttonSizeMap.m.height, ";}&::after{content:'';position:absolute;inset:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBasePlain, ";border-radius:inherit;pointer-events:none;}};label:euiButtonGroup__container;"),
-    euiButtonGroup__buttons: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " display:flex;align-items:center;&:where([data-variant='default'] &){flex-wrap:wrap;}&:where([data-variant='segmented'] &){position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:", buttonGroupVariables.gap.regular, ";max-inline-size:100%;padding:", splitPadding, ";overflow:hidden;*:where(.euiButton, .euiButtonIcon):is(", euiDisabledSelector, "){background-color:transparent;}&:where([data-dividers='true'] &){", dividerStyles, ";}", segmentedChildrenStyles, " &:where([data-layout='vertical'] &){flex-direction:column;.euiButtonGroup__item{justify-content:center;}}};label:euiButtonGroup__buttons;"),
-    noWrap: /*#__PURE__*/css("&:where([data-variant='segmented'] &){flex-wrap:nowrap;", buttonOnlyItemSelector, "{flex:0 1 auto;min-inline-size:0;.euiButton .eui-textTruncate{min-inline-size:0;}}&", hasButtonIconOnlySelector, "{overflow-inline:auto;}};label:noWrap;"),
-    fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", logicalCSS('width', '100%'), ";}&:where([data-variant='default'] &){.euiButton{flex-grow:1;inline-size:auto;}.euiButtonEmpty{flex-shrink:0;}}&:where([data-variant='segmented'] &){&", hasButtonIconOnlySelector, "{inline-size:auto;}&", hasButtonOnlySelector, "{.euiButtonGroup__buttons{inline-size:100%;}", buttonOnlyItemSelector, "{flex-grow:1;}}};label:fullWidth;"),
+    euiButtonGroup__container: /*#__PURE__*/css("&:where(", segmentedStyledSelector, " &){position:relative;display:inline-flex;align-items:center;max-inline-size:100%;padding:", splitPadding, ";border-radius:", buttonGroupVariables.radius.outer, ";background-color:", euiTheme.colors.backgroundBasePlain, ";&:where([data-size='s'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.s, ";min-block-size:", buttonSizeMap.s.height, ";}&:where([data-size='m'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.m, ";min-block-size:", buttonSizeMap.m.height, ";}&::after{content:'';position:absolute;inset:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBasePlain, ";border-radius:inherit;pointer-events:none;}}&:where([data-variant='selection'][data-display='inverse'] &){background-color:", euiTheme.colors.backgroundBaseSubdued, ";};label:euiButtonGroup__container;"),
+    euiButtonGroup__buttons: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " display:flex;align-items:center;&:where([data-variant='default'] &){flex-wrap:wrap;}&:where(", segmentedStyledSelector, " &){position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:", buttonGroupVariables.gap.regular, ";max-inline-size:100%;padding:", splitPadding, ";overflow:hidden;", segmentedChildrenStyles, " *:where(.euiButton, .euiButtonIcon):is(", euiDisabledSelector, "){background-color:transparent;}&:where([data-dividers='true'] &){", dividerStyles, ";}&:where([data-layout='vertical'] &){flex-direction:column;.euiButtonGroup__item{justify-content:center;}}}&:where([data-variant='segmented'] &){*:where(.euiButton, .euiButtonIcon):is(", euiDisabledSelector, "){background-color:transparent;}}&:where([data-variant='selection'] &){*:where(.euiButton, .euiButtonIcon){&:is(", euiDisabledSelector, "){", highContrastModeStyles(euiThemeContext, {
+      forced: "\n              opacity: 0.5;\n            "
+    }), ";}&:is([aria-pressed='true']){", highContrastModeStyles(euiThemeContext, {
+      forced: "\n              --highContrastHoverIndicatorColor: ".concat(euiTheme.colors.textInverse, ";\n              ").concat(preventForcedColors(euiThemeContext), "\n              background-color: ").concat(euiTheme.colors.fullShade, ";\n              color: ").concat(euiTheme.colors.emptyShade, ";\n            ")
+    }), ";}&:is([aria-pressed='false']){background-color:transparent;}}}&:where([data-variant='selection'][data-display='regular'] &){*:where(.euiButton, .euiButtonIcon):is([aria-pressed='true']){background-color:", euiTheme.colors.backgroundLightText, ";", highContrastModeStyles(euiThemeContext, {
+      none: "\n              background-color: ".concat(euiTheme.colors.backgroundLightText, ";\n            "),
+      preferred: "\n              border: ".concat(euiTheme.border.thin, ";\n            "),
+      forced: "\n              background-color: ".concat(euiTheme.colors.fullShade, ";\n              border: none;\n            ")
+    }), ";}}&:where([data-variant='selection'][data-display='inverse'] &){*:where(.euiButton, .euiButtonIcon):is([aria-pressed='true']){", euiShadowXSmall(euiThemeContext), " ", highContrastModeStyles(euiThemeContext, {
+      forced: "\n              border: none;\n            "
+    }), ";}};label:euiButtonGroup__buttons;"),
+    noWrap: /*#__PURE__*/css("&:where(", segmentedStyledSelector, " &){flex-wrap:nowrap;", buttonOnlyItemSelector, "{flex:0 1 auto;min-inline-size:0;.euiButton .eui-textTruncate{min-inline-size:0;}}&", hasButtonIconOnlySelector, "{overflow-inline:auto;}};label:noWrap;"),
+    fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", logicalCSS('width', '100%'), ";}&:where([data-variant='default'] &){.euiButton{flex-grow:1;inline-size:auto;}.euiButtonEmpty{flex-shrink:0;}}&:where(", segmentedStyledSelector, " &){&", hasButtonIconOnlySelector, "{inline-size:auto;}&", hasButtonOnlySelector, "{.euiButtonGroup__buttons{inline-size:100%;}", buttonOnlyItemSelector, "{flex-grow:1;}}};label:fullWidth;"),
     // Sizes
     size: {
       m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", _highContrastStyles(euiThemeContext), ";;label:m;"),

package/optimize/es/components/button/button_group/use_button_group_selection.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useCallback } from 'react';
+/**
+ * Purely controlled selection state for `EuiButtonGroup` with `variant="selection"`.
+ * The consumer owns state via `idSelected` (single) or `idToSelectedMap` (multi)
+ * and updates it through `onChange`.
+ */
+export function useEuiButtonGroupSelection(_ref) {
+  var type = _ref.type,
+    idSelected = _ref.idSelected,
+    idToSelectedMap = _ref.idToSelectedMap,
+    onChange = _ref.onChange;
+  var isSelected = useCallback(function (id) {
+    return type === 'multi' ? !!(idToSelectedMap !== null && idToSelectedMap !== void 0 && idToSelectedMap[id]) : id === idSelected;
+  }, [type, idSelected, idToSelectedMap]);
+  var onSelect = useCallback(function (id) {
+    return onChange === null || onChange === void 0 ? void 0 : onChange(id);
+  }, [onChange]);
+  return {
+    isSelected: isSelected,
+    onSelect: onSelect
+  };
+}

package/optimize/es/components/button/button_icon/button_icon.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "iconType", "iconSize", "color", "isDisabled", "disabled", "hasAriaDisabled", "href", "type", "display", "target", "rel", "size", "buttonRef", "isSelected", "isLoading"],
+var _excluded = ["className", "iconType", "iconSize", "color", "isDisabled", "disabled", "hasAriaDisabled", "href", "type", "display", "target", "rel", "size", "buttonRef", "isSelected", "isLoading", "id", "onClick"],
   _excluded2 = ["ref"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -42,8 +42,10 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     _ref$size = _ref.size,
     _size = _ref$size === void 0 ? 'xs' : _ref$size,
     buttonRef = _ref.buttonRef,
-    isSelected = _ref.isSelected,
+    _isSelected = _ref.isSelected,
     isLoading = _ref.isLoading,
+    id = _ref.id,
+    _onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useEuiButtonCommonPr = useEuiButtonCommonProps({
       size: _size,
@@ -53,14 +55,19 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
       display: _display,
       href: href,
       disabled: disabled,
-      isLoading: isLoading
+      isLoading: isLoading,
+      id: id,
+      isSelected: _isSelected,
+      onClick: _onClick
     }),
     size = _useEuiButtonCommonPr.size,
     color = _useEuiButtonCommonPr.color,
     isDisabled = _useEuiButtonCommonPr.isDisabled,
     _useEuiButtonCommonPr2 = _useEuiButtonCommonPr.hasAriaDisabled,
     hasAriaDisabled = _useEuiButtonCommonPr2 === void 0 ? false : _useEuiButtonCommonPr2,
-    display = _useEuiButtonCommonPr.display;
+    display = _useEuiButtonCommonPr.display,
+    isSelected = _useEuiButtonCommonPr.isSelected,
+    onClick = _useEuiButtonCommonPr.onClick;
   var _useEuiDisabledElemen = useEuiDisabledElement({
       isDisabled: isDisabled,
       hasAriaDisabled: hasAriaDisabled,
@@ -128,7 +135,9 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
       href: href,
       target: target,
       rel: secureRel,
-      ref: setCombinedRef
+      ref: setCombinedRef,
+      id: id,
+      onClick: onClick
     }, rest), buttonIcon);
   }
   var buttonType;
@@ -139,6 +148,8 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     className: classes,
     "aria-pressed": isSelected,
     type: type,
-    ref: setCombinedRef
+    ref: setCombinedRef,
+    id: id,
+    onClick: onClick
   }, rest, disabledButtonProps), buttonIcon);
 };

package/optimize/es/components/button/use_button_common_props.js

@@ -14,31 +14,40 @@ import { isButtonDisabled } from './button_display/_button_display';
  * popover boundary isolation and isDisabled computation.
  */
 export function useEuiButtonCommonProps(_ref) {
-  var _groupContext$isDisab, _groupContext$size, _groupContext$color, _groupContext$hasAria, _groupContext$fullWid, _groupContext$display, _groupContext$fill;
+  var _groupContext$isDisab, _groupContext$getSele, _groupContext$size, _groupContext$color, _groupContext$hasAria, _groupContext$fullWid, _ref2, _groupContext$display, _selectionProps$isSel;
   var size = _ref.size,
     color = _ref.color,
     _isDisabled = _ref.isDisabled,
     hasAriaDisabled = _ref.hasAriaDisabled,
     fullWidth = _ref.fullWidth,
     fill = _ref.fill,
-    display = _ref.display,
+    _display = _ref.display,
     href = _ref.href,
     disabled = _ref.disabled,
-    isLoading = _ref.isLoading;
-  var buttonContext = useContext(EuiButtonContext);
-  var groupContext = buttonContext;
+    isLoading = _ref.isLoading,
+    id = _ref.id,
+    _isSelected = _ref.isSelected,
+    _onClick = _ref.onClick;
+  var groupContext = useContext(EuiButtonContext);
   var isDisabled = isButtonDisabled({
     href: href,
     isDisabled: ((_groupContext$isDisab = groupContext.isDisabled) !== null && _groupContext$isDisab !== void 0 ? _groupContext$isDisab : _isDisabled) || disabled,
     isLoading: isLoading
   });
+  var selectionProps = id != null ? (_groupContext$getSele = groupContext.getSelectionProps) === null || _groupContext$getSele === void 0 ? void 0 : _groupContext$getSele.call(groupContext, id) : undefined;
+  var onClick = selectionProps ? function (event) {
+    selectionProps.onSelect();
+    _onClick === null || _onClick === void 0 || _onClick(event);
+  } : _onClick;
   return {
     size: (_groupContext$size = groupContext.size) !== null && _groupContext$size !== void 0 ? _groupContext$size : size,
     color: (_groupContext$color = groupContext.color) !== null && _groupContext$color !== void 0 ? _groupContext$color : color,
     isDisabled: isDisabled,
     hasAriaDisabled: (_groupContext$hasAria = groupContext.hasAriaDisabled) !== null && _groupContext$hasAria !== void 0 ? _groupContext$hasAria : hasAriaDisabled,
     fullWidth: (_groupContext$fullWid = groupContext.fullWidth) !== null && _groupContext$fullWid !== void 0 ? _groupContext$fullWid : fullWidth,
-    display: (_groupContext$display = groupContext.display) !== null && _groupContext$display !== void 0 ? _groupContext$display : display,
-    fill: (_groupContext$fill = groupContext.fill) !== null && _groupContext$fill !== void 0 ? _groupContext$fill : fill
+    display: (_ref2 = (_groupContext$display = groupContext.display) !== null && _groupContext$display !== void 0 ? _groupContext$display : selectionProps === null || selectionProps === void 0 ? void 0 : selectionProps.display) !== null && _ref2 !== void 0 ? _ref2 : _display,
+    fill: (selectionProps === null || selectionProps === void 0 ? void 0 : selectionProps.fill) !== undefined ? selectionProps.fill : groupContext.fill !== undefined ? groupContext.fill : fill,
+    isSelected: (_selectionProps$isSel = selectionProps === null || selectionProps === void 0 ? void 0 : selectionProps.isSelected) !== null && _selectionProps$isSel !== void 0 ? _selectionProps$isSel : _isSelected,
+    onClick: onClick
   };
 }

package/optimize/es/components/date_picker/react-datepicker/src/month_dropdown.js

@@ -109,7 +109,6 @@ var MonthDropdown = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "renderDropdown", function (monthNames) {
       return ___EmotionJSX(MonthDropdownOptions, {
         key: "dropdown",
-        ref: "options",
         month: _this.props.month,
         monthNames: monthNames,
         onChange: _this.onChange,

package/optimize/es/components/date_picker/react-datepicker/src/month_dropdown_options.js

@@ -53,7 +53,6 @@ var MonthDropdownOptions = /*#__PURE__*/function (_React$Component) {
             "react-datepicker__month-option--preselected": _this.props.accessibleMode && _this.state.preSelection === i
           }),
           key: month,
-          ref: month,
           onClick: _this.onChange.bind(_this, i)
         }, _this.props.month === i ? ___EmotionJSX("span", {
           className: "react-datepicker__month-option--selected"

package/optimize/es/components/date_picker/react-datepicker/src/month_year_dropdown.js

@@ -124,7 +124,6 @@ var MonthYearDropdown = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "renderDropdown", function () {
       return ___EmotionJSX(MonthYearDropdownOptions, {
         key: "dropdown",
-        ref: "options",
         date: _this.props.date,
         dateFormat: _this.props.dateFormat,
         onChange: _this.onChange,

package/optimize/es/components/date_picker/react-datepicker/src/year_dropdown.js

@@ -122,7 +122,6 @@ var YearDropdown = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "renderDropdown", function () {
       return ___EmotionJSX(YearDropdownOptions, {
         key: "dropdown",
-        ref: "options",
         year: _this.props.year,
         onChange: _this.onChange,
         onCancel: _this.toggleDropdown,

package/optimize/es/components/date_picker/react-datepicker/test/helper_components/custom_input.js

@@ -0,0 +1,68 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/*
+ * The MIT License (MIT)
+ * 
+ * Copyright (c) 2018 HackerOne Inc and individual contributors
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * 
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var CustomInput = /*#__PURE__*/function (_React$Component) {
+  function CustomInput() {
+    _classCallCheck(this, CustomInput);
+    return _callSuper(this, CustomInput, arguments);
+  }
+  _inherits(CustomInput, _React$Component);
+  return _createClass(CustomInput, [{
+    key: "onChange",
+    value: function onChange(e) {
+      var args = [e, e.target.value];
+      if (this.props.onChangeArgs) {
+        args = this.props.onChangeArgs(e);
+      }
+      this.props.onChange.apply(this, args);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var props = _extends({}, (_objectDestructuringEmpty(this.props), this.props));
+      delete props.onChangeArgs;
+      return ___EmotionJSX("input", _extends({}, props, {
+        onChange: this.onChange.bind(this)
+      }));
+    }
+  }]);
+}(React.Component);
+CustomInput.propTypes = {
+  onChange: PropTypes.func,
+  onChangeArgs: PropTypes.func
+};
+export default CustomInput;

package/optimize/es/components/date_picker/react-datepicker/test/test_wrapper.js

@@ -0,0 +1,38 @@
+/*
+ * The MIT License (MIT)
+ * 
+ * Copyright (c) 2018 HackerOne Inc and individual contributors
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * 
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TestWrapper = function TestWrapper(_ref) {
+  var children = _ref.children;
+  return ___EmotionJSX("div", {
+    className: "test-wrapper"
+  }, children);
+};
+TestWrapper.propTypes = {
+  children: PropTypes.node
+};
+export default TestWrapper;

package/optimize/es/components/date_picker/react-datepicker/test/timezone_date_picker.js

@@ -0,0 +1,69 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/*
+ * The MIT License (MIT)
+ * 
+ * Copyright (c) 2018 HackerOne Inc and individual contributors
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * 
+ */
+
+import React from "react";
+import DatePicker from "../src/index.jsx";
+import * as utils from "../src/date_utils";
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TimezoneDatePicker = /*#__PURE__*/function (_React$Component) {
+  function TimezoneDatePicker(props) {
+    var _this;
+    _classCallCheck(this, TimezoneDatePicker);
+    _this = _callSuper(this, TimezoneDatePicker, [props]);
+    _this.state = {
+      startDate: null,
+      utcOffset: -4
+    };
+    return _this;
+  }
+  _inherits(TimezoneDatePicker, _React$Component);
+  return _createClass(TimezoneDatePicker, [{
+    key: "handleChange",
+    value: function handleChange(date) {
+      this.setState({
+        startDate: date
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var selected = this.state.startDate && utils.setUTCOffset(utils.cloneDate(this.state.startDate), this.state.utcOffset);
+      return ___EmotionJSX(DatePicker, {
+        utcOffset: this.state.utcOffset,
+        dateFormat: "YYYY-MM-DD HH:mm",
+        selected: selected,
+        onChange: this.handleChange
+      });
+    }
+  }]);
+}(React.Component);
+export default TimezoneDatePicker;