@atlaskit/datetime-picker 13.11.1 → 13.11.3

package/dist/cjs/internal/single-value.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _select = require("@atlaskit/select");
-var _excluded = ["children"];
+var _excluded = ["children", "className", "clearValue", "cx", "data", "getStyles", "getValue", "hasValue", "isDisabled", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
 /**
  * This creates a functional component that `react-select` will use to make the
  * SingleValue part of the different pickers.
@@ -18,11 +18,44 @@ var makeSingleValue = exports.makeSingleValue = function makeSingleValue(_ref) {
   var lang = _ref.lang;
   return function (_ref2) {
     var children = _ref2.children,
-      props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-    return /*#__PURE__*/_react.default.createElement(_select.components.SingleValue, (0, _extends2.default)({}, props, {
+      className = _ref2.className,
+      clearValue = _ref2.clearValue,
+      cx = _ref2.cx,
+      data = _ref2.data,
+      getStyles = _ref2.getStyles,
+      getValue = _ref2.getValue,
+      hasValue = _ref2.hasValue,
+      isDisabled = _ref2.isDisabled,
+      isMulti = _ref2.isMulti,
+      isRtl = _ref2.isRtl,
+      options = _ref2.options,
+      selectOption = _ref2.selectOption,
+      selectProps = _ref2.selectProps,
+      setValue = _ref2.setValue,
+      theme = _ref2.theme,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    return /*#__PURE__*/_react.default.createElement(_select.components.SingleValue, (0, _extends2.default)({}, rest, {
+      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
+      className: className,
+      clearValue: clearValue,
+      cx: cx,
+      data: data,
+      getStyles: getStyles,
+      getValue: getValue,
+      hasValue: hasValue,
       innerProps: {
         lang: lang
-      }
+      },
+      isDisabled: isDisabled,
+      isMulti: isMulti,
+      isRtl: isRtl,
+      options: options,
+      selectOption: selectOption,
+      selectProps: selectProps,
+      setValue: setValue
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
+      ,
+      theme: theme
     }), children);
   };
 };

package/dist/es2019/components/date-picker.js

@@ -9,7 +9,6 @@ import { Component } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { format, isValid, lastDayOfMonth, parseISO } from 'date-fns';
-import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
@@ -20,7 +19,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.11.1";
+const packageVersion = "13.11.3";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -56,12 +55,13 @@ class DatePickerComponent extends Component {
     _defineProperty(this, "containerRef", null);
     // All state needs to be accessed via this function so that the state is mapped from props
     // correctly to allow controlled/uncontrolled usage.
-    _defineProperty(this, "getSafeState", () => {
-      return {
-        ...this.state,
-        ...pick(this.props, ['value', 'isOpen']),
-        ...pick(this.props.selectProps, ['inputValue'])
-      };
+    _defineProperty(this, "getValue", () => {
+      var _this$props$value;
+      return (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.state.value;
+    });
+    _defineProperty(this, "getIsOpen", () => {
+      var _this$props$isOpen;
+      return (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : this.state.isOpen;
     });
     _defineProperty(this, "isDateDisabled", date => {
       return this.props.disabled.indexOf(date) > -1;
@@ -109,7 +109,7 @@ class DatePickerComponent extends Component {
       });
     });
     _defineProperty(this, "onInputClick", () => {
-      if (!this.props.isDisabled && !this.getSafeState().isOpen) {
+      if (!this.props.isDisabled && !this.getIsOpen()) {
         this.setState({
           isOpen: true
         });
@@ -134,7 +134,7 @@ class DatePickerComponent extends Component {
     _defineProperty(this, "onSelectBlur", event => {
       var _this$containerRef3;
       const newlyFocusedElement = event.relatedTarget;
-      if (this.getSafeState().clearingFromIcon) {
+      if (this.state.clearingFromIcon) {
         // Don't close menu if blurring after the user has clicked clear
         this.setState({
           clearingFromIcon: false
@@ -150,9 +150,9 @@ class DatePickerComponent extends Component {
     });
     _defineProperty(this, "onSelectFocus", event => {
       const {
-        clearingFromIcon,
-        value
-      } = this.getSafeState();
+        clearingFromIcon
+      } = this.state;
+      const value = this.getValue();
       if (clearingFromIcon) {
         // Don't open menu if focussing after the user has clicked clear
         this.setState({
@@ -187,9 +187,9 @@ class DatePickerComponent extends Component {
     _defineProperty(this, "onInputKeyDown", event => {
       var _this$containerRef4;
       const {
-        value,
         calendarValue
-      } = this.getSafeState();
+      } = this.state;
+      const value = this.getValue();
       const keyPressed = event.key.toLowerCase();
 
       // If the input is focused and the calendar is not visible, handle space and enter clicks
@@ -323,7 +323,7 @@ class DatePickerComponent extends Component {
       }
       const {
         l10n
-      } = this.getSafeState();
+      } = this.state;
       return l10n.parseDate(date);
     });
     /**
@@ -340,7 +340,7 @@ class DatePickerComponent extends Component {
       } = this.props;
       const {
         l10n
-      } = this.getSafeState();
+      } = this.state;
       if (formatDisplayLabel) {
         return formatDisplayLabel(value, dateFormat || defaultDateFormat);
       }
@@ -356,7 +356,7 @@ class DatePickerComponent extends Component {
       }
       const {
         l10n
-      } = this.getSafeState();
+      } = this.state;
       return l10n.formatDate(placeholderDatetime);
     });
     this.state = {
@@ -407,14 +407,13 @@ class DatePickerComponent extends Component {
       weekStartDay
     } = this.props;
     const {
-      value,
       calendarValue,
-      isOpen,
       selectInputValue
-    } = this.getSafeState();
+    } = this.state;
+    const value = this.getValue();
     let actualSelectInputValue;
     actualSelectInputValue = selectInputValue;
-    const menuIsOpen = isOpen && !isDisabled;
+    const menuIsOpen = this.getIsOpen() && !isDisabled;
     const showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
     const dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : icon;
     const SingleValue = makeSingleValue({
@@ -448,8 +447,6 @@ class DatePickerComponent extends Component {
       onCalendarSelect: this.onCalendarSelect,
       calendarLocale: locale,
       calendarWeekStartDay: weekStartDay,
-      nextMonthLabel,
-      previousMonthLabel,
       shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
     };
     const mergedStyles = mergeStyles(selectStyles, {
@@ -486,31 +483,48 @@ class DatePickerComponent extends Component {
         value: value,
         "data-testid": testId && `${testId}--input`
       }), jsx(Select, _extends({
+        appearance: this.props.appearance,
         "aria-describedby": ariaDescribedBy,
         "aria-label": label || undefined,
-        appearance: this.props.appearance,
-        enableAnimation: false,
-        menuIsOpen: menuIsOpen,
-        closeMenuOnSelect: true,
         autoFocus: autoFocus,
+        closeMenuOnSelect: true,
+        components: selectComponents,
+        enableAnimation: false,
         inputId: id,
+        inputValue: actualSelectInputValue,
         isDisabled: isDisabled,
+        menuIsOpen: menuIsOpen,
         onBlur: this.onSelectBlur,
+        onChange: this.onSelectChange,
         onFocus: this.onSelectFocus,
-        inputValue: actualSelectInputValue,
         onInputChange: this.handleSelectInputChange,
-        components: selectComponents,
-        onChange: this.onSelectChange
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        ,
-        styles: mergedStyles,
         placeholder: this.getPlaceholder(),
+        styles: mergedStyles,
         value: initialValue
-      }, selectProps, calendarProps, {
+      }, selectProps, {
+        // These are below the spread because I don't know what is in
+        // selectProps or not and what wil be overwritten
         isClearable: true,
-        spacing: spacing,
         isInvalid: isInvalid,
+        spacing: spacing,
         testId: testId
+        // These aren't part of `Select`'s API, but we're using them here.
+        ,
+        calendarContainerRef: calendarProps.calendarContainerRef,
+        calendarDisabled: calendarProps.calendarDisabled,
+        calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
+        calendarLocale: calendarProps.calendarLocale,
+        calendarMaxDate: calendarProps.calendarMaxDate,
+        calendarMinDate: calendarProps.calendarMinDate,
+        calendarRef: calendarProps.calendarRef,
+        calendarValue: calendarProps.calendarValue,
+        calendarView: calendarProps.calendarView,
+        calendarWeekStartDay: calendarProps.calendarWeekStartDay,
+        nextMonthLabel: nextMonthLabel,
+        onCalendarChange: calendarProps.onCalendarChange,
+        onCalendarSelect: calendarProps.onCalendarSelect,
+        previousMonthLabel: previousMonthLabel,
+        shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
       })))
     );
   }

package/dist/es2019/components/date-time-picker.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
@@ -9,7 +8,6 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { format, isValid, parseISO } from 'date-fns';
-import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
 import { mergeStyles } from '@atlaskit/select';
@@ -20,7 +18,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.11.1";
+const packageVersion = "13.11.3";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({
@@ -105,15 +103,10 @@ class DateTimePickerComponent extends React.Component {
     });
     // All state needs to be accessed via this function so that the state is mapped from props
     // correctly to allow controlled/uncontrolled usage.
-    _defineProperty(this, "getSafeState", () => {
-      const mappedState = {
-        ...this.state,
-        ...pick(this.props, ['value'])
-      };
-      return {
-        ...mappedState,
-        ...this.parseValue(mappedState.value, mappedState.dateValue, mappedState.timeValue, mappedState.zoneValue)
-      };
+    _defineProperty(this, "getParsedValues", () => this.parseValue(this.getValue(), this.state.dateValue, this.state.timeValue, this.state.zoneValue));
+    _defineProperty(this, "getValue", () => {
+      var _this$props$value;
+      return (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.state.value;
     });
     _defineProperty(this, "onBlur", event => {
       this.setState({
@@ -128,28 +121,44 @@ class DateTimePickerComponent extends React.Component {
       this.props.onFocus(event);
     });
     _defineProperty(this, "onDateChange", dateValue => {
+      const parsedValues = this.getParsedValues();
       this.onValueChange({
-        ...this.getSafeState(),
-        dateValue
+        dateValue,
+        timeValue: parsedValues.timeValue,
+        zoneValue: parsedValues.zoneValue
       });
     });
     _defineProperty(this, "onTimeChange", timeValue => {
+      const parsedValues = this.getParsedValues();
       this.onValueChange({
-        ...this.getSafeState(),
-        timeValue
+        dateValue: parsedValues.dateValue,
+        timeValue,
+        zoneValue: parsedValues.zoneValue
       });
     });
     _defineProperty(this, "onClear", () => {
+      const parsedValues = this.getParsedValues();
       this.onValueChange({
-        ...this.getSafeState(),
+        dateValue: '',
         timeValue: '',
-        dateValue: ''
+        zoneValue: parsedValues.zoneValue
       });
     });
   }
   parseValue(value, dateValue, timeValue, zoneValue) {
     if (this.props.parseValue) {
-      return this.props.parseValue(value, dateValue, timeValue, zoneValue);
+      const parsedFromFn = this.props.parseValue(value, dateValue, timeValue, zoneValue);
+      // This handles cases found in Jira where the parse function actually does
+      // nothing and returns undefined. The previous `getSafeState` function
+      // just spread the values over the state, but if it returned `undefined`,
+      // it would just rely on the previous state values. Considering this is
+      // what is input to this function anyway, this is a safe way to handle
+      // this, colocate the behavior, and not rely on `getSafeState`.
+      return parsedFromFn || {
+        dateValue,
+        timeValue,
+        zoneValue
+      };
     }
     const parsed = parseISO(value);
     return isValid(parsed) ? {
@@ -183,7 +192,7 @@ class DateTimePickerComponent extends React.Component {
       });
       this.props.onChange(valueWithValidZone);
       // If the date or time value was cleared when there is an existing datetime value, then clear the value.
-    } else if (this.getSafeState().value) {
+    } else if (this.getValue()) {
       this.setState({
         value: ''
       });
@@ -212,12 +221,13 @@ class DateTimePickerComponent extends React.Component {
       timePickerSelectProps,
       times
     } = this.props;
+    const value = this.getValue();
     const {
-      isFocused,
-      value,
-      dateValue,
-      timeValue
-    } = this.getSafeState();
+      isFocused
+    } = this.state;
+    const parsedValues = this.getParsedValues();
+    const dateValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.dateValue;
+    const timeValue = parsedValues === null || parsedValues === void 0 ? void 0 : parsedValues.timeValue;
     const {
       styles: datePickerStyles = {}
     } = datePickerSelectProps;
@@ -254,41 +264,67 @@ class DateTimePickerComponent extends React.Component {
       "data-testid": testId && `${testId}--input`
     }), jsx("div", {
       css: datePickerContainerStyles
-    }, jsx(DatePicker, _extends({
+    }, jsx(DatePicker, {
       appearance: appearance,
-      autoFocus: autoFocus,
-      dateFormat: dateFormat,
-      hideIcon: true,
-      id: id,
-      isDisabled: isDisabled,
-      isInvalid: isInvalid,
-      locale: locale,
-      onBlur: this.onBlur,
-      onChange: this.onDateChange,
-      onFocus: this.onFocus,
+      autoFocus: datePickerProps.autoFocus || autoFocus,
+      dateFormat: datePickerProps.dateFormat || dateFormat,
+      defaultIsOpen: datePickerProps.defaultIsOpen,
+      defaultValue: datePickerProps.defaultValue,
+      disabled: datePickerProps.disabled,
+      disabledDateFilter: datePickerProps.disabledDateFilter,
+      formatDisplayLabel: datePickerProps.formatDisplayLabel,
+      hideIcon: datePickerProps.hideIcon || true,
+      icon: datePickerProps.icon,
+      id: datePickerProps.id || id,
+      innerProps: datePickerProps.innerProps,
+      isDisabled: datePickerProps.isDisabled || isDisabled,
+      isInvalid: datePickerProps.isInvalid || isInvalid,
+      isOpen: datePickerProps.isOpen,
+      locale: datePickerProps.locale || locale,
+      maxDate: datePickerProps.maxDate,
+      minDate: datePickerProps.minDate,
+      name: datePickerProps.name,
+      nextMonthLabel: datePickerProps.nextMonthLabel,
+      onBlur: datePickerProps.onBlur || this.onBlur,
+      onChange: datePickerProps.onChange || this.onDateChange,
+      onFocus: datePickerProps.onFocus || this.onFocus,
+      parseInputValue: datePickerProps.parseInputValue,
+      placeholder: datePickerProps.placeholder,
+      previousMonthLabel: datePickerProps.previousMonthLabel,
       selectProps: mergedDatePickerSelectProps,
-      spacing: spacing,
-      testId: testId && `${testId}--datepicker`,
-      value: dateValue
-    }, datePickerProps))), jsx("div", {
+      spacing: datePickerProps.spacing || spacing,
+      testId: testId && `${testId}--datepicker` || datePickerProps.testId,
+      value: dateValue,
+      weekStartDay: datePickerProps.weekStartDay
+    })), jsx("div", {
       css: timePickerContainerStyles
-    }, jsx(TimePicker, _extends({
-      appearance: appearance,
-      hideIcon: true,
-      isDisabled: isDisabled,
-      isInvalid: isInvalid,
-      locale: locale,
-      onBlur: this.onBlur,
-      onChange: this.onTimeChange,
-      onFocus: this.onFocus,
+    }, jsx(TimePicker, {
+      appearance: timePickerProps.appearance || appearance,
+      autoFocus: timePickerProps.autoFocus,
+      defaultIsOpen: timePickerProps.defaultIsOpen,
+      defaultValue: timePickerProps.defaultValue,
+      formatDisplayLabel: timePickerProps.formatDisplayLabel,
+      hideIcon: timePickerProps.hideIcon || true,
+      id: timePickerProps.id,
+      innerProps: timePickerProps.innerProps,
+      isDisabled: timePickerProps.isDisabled || isDisabled,
+      isInvalid: timePickerProps.isInvalid || isInvalid,
+      isOpen: timePickerProps.isOpen,
+      locale: timePickerProps.locale || locale,
+      name: timePickerProps.name,
+      onBlur: timePickerProps.onBlur || this.onBlur,
+      onChange: timePickerProps.onChange || this.onTimeChange,
+      onFocus: timePickerProps.onFocus || this.onFocus,
+      parseInputValue: timePickerProps.parseInputValue,
+      placeholder: timePickerProps.placeholder,
       selectProps: mergedTimePickerSelectProps,
-      spacing: spacing,
-      testId: testId && `${testId}--timepicker`,
-      timeFormat: timeFormat,
-      timeIsEditable: timeIsEditable,
-      times: times,
+      spacing: timePickerProps.spacing || spacing,
+      testId: timePickerProps.testId || testId && `${testId}--timepicker`,
+      timeFormat: timePickerProps.timeFormat || timeFormat,
+      timeIsEditable: timePickerProps.timeIsEditable || timeIsEditable,
+      times: timePickerProps.times || times,
       value: timeValue
-    }, timePickerProps))), isClearable && !isDisabled ? jsx("button", {
+    })), isClearable && !isDisabled ? jsx("button", {
       css: iconContainerStyles,
       onClick: this.onClear,
       "data-testid": testId && `${testId}--icon--container`,

package/dist/es2019/components/time-picker.js

@@ -4,7 +4,6 @@ import React from 'react';
 
 // eslint-disable-next-line no-restricted-imports
 import { format, isValid } from 'date-fns';
-import pick from 'lodash/pick';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { CreatableSelect, mergeStyles } from '@atlaskit/select';
@@ -16,7 +15,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.11.1";
+const packageVersion = "13.11.3";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -65,11 +64,13 @@ class TimePickerComponent extends React.Component {
     });
     // All state needs to be accessed via this function so that the state is mapped from props
     // correctly to allow controlled/uncontrolled usage.
-    _defineProperty(this, "getSafeState", () => {
-      return {
-        ...this.state,
-        ...pick(this.props, ['value', 'isOpen'])
-      };
+    _defineProperty(this, "getValue", () => {
+      var _this$props$value;
+      return (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.state.value;
+    });
+    _defineProperty(this, "getIsOpen", () => {
+      var _this$props$isOpen;
+      return (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : this.state.isOpen;
     });
     _defineProperty(this, "onChange", (newValue, action) => {
       const rawValue = newValue ? newValue.value || newValue : '';
@@ -114,7 +115,7 @@ class TimePickerComponent extends React.Component {
     });
     _defineProperty(this, "onMenuOpen", () => {
       // Don't open menu after the user has clicked clear
-      if (this.getSafeState().clearingFromIcon) {
+      if (this.state.clearingFromIcon) {
         this.setState({
           clearingFromIcon: false
         });
@@ -126,7 +127,7 @@ class TimePickerComponent extends React.Component {
     });
     _defineProperty(this, "onMenuClose", () => {
       // Don't close menu after the user has clicked clear
-      if (this.getSafeState().clearingFromIcon) {
+      if (this.state.clearingFromIcon) {
         this.setState({
           clearingFromIcon: false
         });
@@ -162,7 +163,7 @@ class TimePickerComponent extends React.Component {
         key
       } = event;
       const keyPressed = key.toLowerCase();
-      if (this.getSafeState().clearingFromIcon && (keyPressed === 'backspace' || keyPressed === 'delete')) {
+      if (this.state.clearingFromIcon && (keyPressed === 'backspace' || keyPressed === 'delete')) {
         // If being cleared from keyboard, don't change behaviour
         this.setState({
           clearingFromIcon: false
@@ -194,10 +195,8 @@ class TimePickerComponent extends React.Component {
     } = this.props;
     const ICON_PADDING = 2;
     const l10n = createLocalizationProvider(locale);
-    const {
-      value = '',
-      isOpen
-    } = this.getSafeState();
+    const value = this.getValue() || '';
+    const isOpen = this.getIsOpen();
     const {
       styles: selectStyles = {},
       ...otherSelectProps
@@ -297,9 +296,7 @@ class TimePickerComponent extends React.Component {
       placeholder: placeholder || l10n.formatTime(placeholderDatetime),
       styles: mergedStyles,
       value: initialValue,
-      spacing: spacing
-      // @ts-ignore caused by prop not part of @atlaskit/select
-      ,
+      spacing: spacing,
       fixedLayerRef: this.containerRef,
       isInvalid: isInvalid,
       testId: testId

package/dist/es2019/internal/fixed-layer-menu.js

@@ -12,13 +12,59 @@ import FixedLayer from '../internal/fixed-layer';
  * This is the fixed layer menu used in the time picker.
  */
 export const FixedLayerMenu = ({
+  className,
+  clearValue,
+  cx,
+  getStyles,
+  getValue,
+  hasValue,
+  innerProps,
+  innerRef,
+  isLoading,
+  isMulti,
+  isRtl,
+  maxMenuHeight,
+  menuPlacement,
+  menuPosition,
+  menuShouldScrollIntoView,
+  minMenuHeight,
+  options,
+  placement,
+  selectOption,
   selectProps,
+  setValue,
+  theme,
+  children,
   ...rest
 }) => jsx(FixedLayer, {
   inputValue: selectProps.inputValue,
   containerRef: selectProps.fixedLayerRef,
   content: jsx(components.Menu, _extends({}, rest, {
-    menuShouldScrollIntoView: false
-  })),
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
+    className: className,
+    clearValue: clearValue,
+    cx: cx,
+    getStyles: getStyles,
+    getValue: getValue,
+    hasValue: hasValue,
+    innerProps: innerProps,
+    innerRef: innerRef,
+    isLoading: isLoading,
+    isMulti: isMulti,
+    isRtl: isRtl,
+    maxMenuHeight: maxMenuHeight,
+    menuPlacement: menuPlacement,
+    menuPosition: menuPosition,
+    menuShouldScrollIntoView: false || menuShouldScrollIntoView,
+    minMenuHeight: minMenuHeight,
+    options: options,
+    placement: placement,
+    selectOption: selectOption,
+    selectProps: selectProps,
+    setValue: setValue
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
+    ,
+    theme: theme
+  }), children),
   testId: selectProps.testId
 });