@atlaskit/datetime-picker 15.4.0 → 15.4.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/datetime-picker
 
+## 15.4.2
+
+### Patch Changes
+
+- [#153409](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/153409)
+  [`af63929f9d51a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/af63929f9d51a) -
+  Fix date-picker conditional component export
+- Updated dependencies
+
+## 15.4.1
+
+### Patch Changes
+
+- [#152922](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152922)
+  [`db290b80cd2f5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/db290b80cd2f5) -
+  Fix bug in new calendar button escape handling to close.
+
 ## 15.4.0
 
 ### Minor Changes

package/dist/cjs/components/date-picker-class.js

@@ -43,7 +43,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 // version very soon from converting this to functional. And also React 18 is on
 // the horizon
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.4.0";
+var packageVersion = "15.4.2";
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -328,13 +328,13 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       // We want to stop this from triggering other keydown events, particularly
       // for space and enter presses. Otherwise, it opens and then closes
       // immediately.
-      if (e.type === 'keydown') {
+      if (e.type === 'keydown' && (e.key === ' ' || e.key === 'Enter')) {
         e.stopPropagation();
+        _this.setState({
+          isKeyDown: true,
+          wasOpenedFromCalendarButton: true
+        });
       }
-      _this.setState({
-        isKeyDown: true,
-        wasOpenedFromCalendarButton: true
-      });
     });
     // This event handler is triggered from both keydown and click. It's weird.
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarButtonClick", function (e) {

package/dist/cjs/components/date-picker-fc.js

@@ -40,7 +40,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.4.0";
+var packageVersion = "15.4.2";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -406,11 +406,11 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, forwardedR
     // We want to stop this from triggering other keydown events, particularly
     // for space and enter presses. Otherwise, it opens and then closes
     // immediately.
-    if (e.type === 'keydown') {
+    if (e.type === 'keydown' && (e.key === ' ' || e.key === 'Enter')) {
       e.stopPropagation();
+      setIsKeyDown(true);
+      setWasOpenedFromCalendarButton(true);
     }
-    setIsKeyDown(true);
-    setWasOpenedFromCalendarButton(true);
   };
 
   // This event handler is triggered from both keydown and click. It's weird.

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

@@ -6,8 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _ffComponent = require("../internal/ff-component");
 var _datePickerClass = _interopRequireDefault(require("./date-picker-class"));
 var _datePickerFc = _interopRequireDefault(require("./date-picker-fc"));
-var DatePicker = (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component') ? _datePickerFc.default : _datePickerClass.default;
+var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
+  return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
+}, _datePickerFc.default, _datePickerClass.default);
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = DatePicker;

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

@@ -22,6 +22,7 @@ var _select = require("@atlaskit/select");
 var _colors = require("@atlaskit/theme/colors");
 var _internal = require("../internal");
 var _dateTimePickerContainer = require("../internal/date-time-picker-container");
+var _ffComponent = require("../internal/ff-component");
 var _parseTokens = require("../internal/parse-tokens");
 var _datePickerClass = _interopRequireDefault(require("./date-picker-class"));
 var _datePickerFc = _interopRequireDefault(require("./date-picker-fc"));
@@ -33,9 +34,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var DatePicker = (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component') ? _datePickerFc.default : _datePickerClass.default;
+var DatePicker = (0, _ffComponent.componentWithCondition)(function () {
+  return (0, _platformFeatureFlags.fg)('dst-date-picker-use-functional-component');
+}, _datePickerFc.default, _datePickerClass.default);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.4.0";
+var packageVersion = "15.4.2";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({

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

@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.4.0";
+var packageVersion = "15.4.2";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/cjs/internal/ff-component.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.componentWithCondition = componentWithCondition;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Gets all available ref types from two prop sets and returns
+ * them in a ref prop
+ *
+ * @example
+ * ```
+ * type P1 = { ref: Ref(HTMLDivElement), ... };
+ * type P2 = { ref: Ref(HTMLSpanElement), ... };
+ *
+ * GetRefAttributes(P1, P2) // {ref: Ref(HTMLDivElement | HTMLSpanElement)}
+ * ```
+ */
+
+/**
+ * Returns one of components depending on a boolean condition.
+ * The result component will be a union of the two props and
+ * an or on both ref types.
+ *
+ * @example
+ * ```
+ * const Component = componentWithCondition(
+ *      isBooleanConditionMet,
+ *      ComponentWithConditionMet,
+ *      ComponentWithConditionNotMet,
+ * );
+ *
+ * @param condition Function returning boolean value
+ * @param componentTrue Component that will be returned if conditionGetter is "true"
+ * @param componentFalse Component that will be returned if conditionGetter is "false"
+ * @returns Component Depending on a Condition result
+ */
+function componentWithCondition(condition, ComponentTrue, ComponentFalse) {
+  var ComponentWithCondition = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    return condition() ? /*#__PURE__*/_react.default.createElement(ComponentTrue, (0, _extends2.default)({}, props, {
+      ref: ref
+    })) : /*#__PURE__*/_react.default.createElement(ComponentFalse, (0, _extends2.default)({}, props, {
+      ref: ref
+    }));
+  });
+  if (ComponentTrue.name !== '') {
+    ComponentWithCondition.displayName = "ComponentWithCondition[".concat(condition.name, "]");
+  }
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return ComponentWithCondition;
+}

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

@@ -26,7 +26,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.4.0";
+const packageVersion = "15.4.2";
 const datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -311,13 +311,13 @@ class DatePickerComponent extends Component {
       // We want to stop this from triggering other keydown events, particularly
       // for space and enter presses. Otherwise, it opens and then closes
       // immediately.
-      if (e.type === 'keydown') {
+      if (e.type === 'keydown' && (e.key === ' ' || e.key === 'Enter')) {
         e.stopPropagation();
+        this.setState({
+          isKeyDown: true,
+          wasOpenedFromCalendarButton: true
+        });
       }
-      this.setState({
-        isKeyDown: true,
-        wasOpenedFromCalendarButton: true
-      });
     });
     // This event handler is triggered from both keydown and click. It's weird.
     _defineProperty(this, "onCalendarButtonClick", e => {

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

@@ -25,7 +25,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.4.0";
+const packageVersion = "15.4.2";
 const analyticsAttributes = {
   componentName: 'datePicker',
   packageName,
@@ -333,11 +333,11 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     // We want to stop this from triggering other keydown events, particularly
     // for space and enter presses. Otherwise, it opens and then closes
     // immediately.
-    if (e.type === 'keydown') {
+    if (e.type === 'keydown' && (e.key === ' ' || e.key === 'Enter')) {
       e.stopPropagation();
+      setIsKeyDown(true);
+      setWasOpenedFromCalendarButton(true);
     }
-    setIsKeyDown(true);
-    setWasOpenedFromCalendarButton(true);
   };
 
   // This event handler is triggered from both keydown and click. It's weird.

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

@@ -1,6 +1,7 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '../internal/ff-component';
 import DatePickerOld from './date-picker-class';
 import DatePickerNew from './date-picker-fc';
-const DatePicker = fg('dst-date-picker-use-functional-component') ? DatePickerNew : DatePickerOld;
+const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default DatePicker;

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

@@ -15,13 +15,14 @@ import { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
 import { formatDateTimeZoneIntoIso } from '../internal';
 import { DateTimePickerContainer } from '../internal/date-time-picker-container';
+import { componentWithCondition } from '../internal/ff-component';
 import { convertTokens } from '../internal/parse-tokens';
 import DatePickerOld from './date-picker-class';
 import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
-const DatePicker = fg('dst-date-picker-use-functional-component') ? DatePickerNew : DatePickerOld;
+const DatePicker = componentWithCondition(() => fg('dst-date-picker-use-functional-component'), DatePickerNew, DatePickerOld);
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.4.0";
+const packageVersion = "15.4.2";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({

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

@@ -11,7 +11,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 = "15.4.0";
+const packageVersion = "15.4.2";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/internal/ff-component.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+
+/**
+ * Gets all available ref types from two prop sets and returns
+ * them in a ref prop
+ *
+ * @example
+ * ```
+ * type P1 = { ref: Ref(HTMLDivElement), ... };
+ * type P2 = { ref: Ref(HTMLSpanElement), ... };
+ *
+ * GetRefAttributes(P1, P2) // {ref: Ref(HTMLDivElement | HTMLSpanElement)}
+ * ```
+ */
+
+/**
+ * Returns one of components depending on a boolean condition.
+ * The result component will be a union of the two props and
+ * an or on both ref types.
+ *
+ * @example
+ * ```
+ * const Component = componentWithCondition(
+ *      isBooleanConditionMet,
+ *      ComponentWithConditionMet,
+ *      ComponentWithConditionNotMet,
+ * );
+ *
+ * @param condition Function returning boolean value
+ * @param componentTrue Component that will be returned if conditionGetter is "true"
+ * @param componentFalse Component that will be returned if conditionGetter is "false"
+ * @returns Component Depending on a Condition result
+ */
+export function componentWithCondition(condition, ComponentTrue, ComponentFalse) {
+  const ComponentWithCondition = /*#__PURE__*/forwardRef((props, ref) => condition() ? /*#__PURE__*/React.createElement(ComponentTrue, _extends({}, props, {
+    ref: ref
+  })) : /*#__PURE__*/React.createElement(ComponentFalse, _extends({}, props, {
+    ref: ref
+  })));
+  if (ComponentTrue.name !== '') {
+    ComponentWithCondition.displayName = `ComponentWithCondition[${condition.name}]`;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return ComponentWithCondition;
+}

package/dist/esm/components/date-picker-class.js

@@ -36,7 +36,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.4.0";
+var packageVersion = "15.4.2";
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -321,13 +321,13 @@ var DatePickerComponent = /*#__PURE__*/function (_Component) {
       // We want to stop this from triggering other keydown events, particularly
       // for space and enter presses. Otherwise, it opens and then closes
       // immediately.
-      if (e.type === 'keydown') {
+      if (e.type === 'keydown' && (e.key === ' ' || e.key === 'Enter')) {
         e.stopPropagation();
+        _this.setState({
+          isKeyDown: true,
+          wasOpenedFromCalendarButton: true
+        });
       }
-      _this.setState({
-        isKeyDown: true,
-        wasOpenedFromCalendarButton: true
-      });
     });
     // This event handler is triggered from both keydown and click. It's weird.
     _defineProperty(_assertThisInitialized(_this), "onCalendarButtonClick", function (e) {

package/dist/esm/components/date-picker-fc.js

@@ -31,7 +31,7 @@ import { Menu } from '../internal/menu';
 import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.4.0";
+var packageVersion = "15.4.2";
 var analyticsAttributes = {
   componentName: 'datePicker',
   packageName: packageName,
@@ -397,11 +397,11 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
     // We want to stop this from triggering other keydown events, particularly
     // for space and enter presses. Otherwise, it opens and then closes
     // immediately.
-    if (e.type === 'keydown') {
+    if (e.type === 'keydown' && (e.key === ' ' || e.key === 'Enter')) {
       e.stopPropagation();
+      setIsKeyDown(true);
+      setWasOpenedFromCalendarButton(true);
     }
-    setIsKeyDown(true);
-    setWasOpenedFromCalendarButton(true);
   };
 
   // This event handler is triggered from both keydown and click. It's weird.

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

@@ -1,6 +1,9 @@
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithCondition } from '../internal/ff-component';
 import DatePickerOld from './date-picker-class';
 import DatePickerNew from './date-picker-fc';
-var DatePicker = fg('dst-date-picker-use-functional-component') ? DatePickerNew : DatePickerOld;
+var DatePicker = componentWithCondition(function () {
+  return fg('dst-date-picker-use-functional-component');
+}, DatePickerNew, DatePickerOld);
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default DatePicker;

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

@@ -25,13 +25,16 @@ import { mergeStyles } from '@atlaskit/select';
 import { N500, N70 } from '@atlaskit/theme/colors';
 import { formatDateTimeZoneIntoIso } from '../internal';
 import { DateTimePickerContainer } from '../internal/date-time-picker-container';
+import { componentWithCondition } from '../internal/ff-component';
 import { convertTokens } from '../internal/parse-tokens';
 import DatePickerOld from './date-picker-class';
 import DatePickerNew from './date-picker-fc';
 import TimePicker from './time-picker';
-var DatePicker = fg('dst-date-picker-use-functional-component') ? DatePickerNew : DatePickerOld;
+var DatePicker = componentWithCondition(function () {
+  return fg('dst-date-picker-use-functional-component');
+}, DatePickerNew, DatePickerOld);
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.4.0";
+var packageVersion = "15.4.2";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({

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

@@ -17,7 +17,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "15.4.0";
+var packageVersion = "15.4.2";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/esm/internal/ff-component.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react';
+
+/**
+ * Gets all available ref types from two prop sets and returns
+ * them in a ref prop
+ *
+ * @example
+ * ```
+ * type P1 = { ref: Ref(HTMLDivElement), ... };
+ * type P2 = { ref: Ref(HTMLSpanElement), ... };
+ *
+ * GetRefAttributes(P1, P2) // {ref: Ref(HTMLDivElement | HTMLSpanElement)}
+ * ```
+ */
+
+/**
+ * Returns one of components depending on a boolean condition.
+ * The result component will be a union of the two props and
+ * an or on both ref types.
+ *
+ * @example
+ * ```
+ * const Component = componentWithCondition(
+ *      isBooleanConditionMet,
+ *      ComponentWithConditionMet,
+ *      ComponentWithConditionNotMet,
+ * );
+ *
+ * @param condition Function returning boolean value
+ * @param componentTrue Component that will be returned if conditionGetter is "true"
+ * @param componentFalse Component that will be returned if conditionGetter is "false"
+ * @returns Component Depending on a Condition result
+ */
+export function componentWithCondition(condition, ComponentTrue, ComponentFalse) {
+  var ComponentWithCondition = /*#__PURE__*/forwardRef(function (props, ref) {
+    return condition() ? /*#__PURE__*/React.createElement(ComponentTrue, _extends({}, props, {
+      ref: ref
+    })) : /*#__PURE__*/React.createElement(ComponentFalse, _extends({}, props, {
+      ref: ref
+    }));
+  });
+  if (ComponentTrue.name !== '') {
+    ComponentWithCondition.displayName = "ComponentWithCondition[".concat(condition.name, "]");
+  }
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return ComponentWithCondition;
+}

package/dist/types/components/date-picker-class.d.ts

@@ -97,7 +97,7 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
+} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -115,5 +115,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

package/dist/types/components/date-picker-fc.d.ts

@@ -26,5 +26,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<DatePic
     } & {
         inputValue?: string | undefined;
     }) | undefined;
-}, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
+}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
 export default DatePicker;

package/dist/types/components/date-picker.d.ts

@@ -1,5 +1,15 @@
 /// <reference types="react" />
-declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<{
+declare const DatePicker: import("react").FC<Pick<Pick<import("..").DatePickerProps & {
+    icon?: import("react").ComponentType<import("@atlaskit/react-select").DropdownIndicatorProps<import("@atlaskit/select").OptionType, boolean, import("@atlaskit/react-select").GroupBase<import("@atlaskit/select").OptionType>>> | undefined;
+    selectProps?: (Omit<import("@atlaskit/select").SelectProps<import("@atlaskit/select").OptionType, false>, "placeholder" | "aria-describedby" | "aria-label" | "inputId"> & {
+        'aria-describedby'?: undefined;
+        'aria-label'?: undefined;
+        inputId?: undefined;
+        placeholder?: undefined;
+    } & {
+        inputValue?: string | undefined;
+    }) | undefined;
+}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Pick<Pick<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -8,7 +18,7 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
-} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
+} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -26,15 +36,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>> | import("react").ForwardRefExoticComponent<Pick<import("..").DatePickerProps & {
-    icon?: import("react").ComponentType<import("@atlaskit/react-select").DropdownIndicatorProps<import("@atlaskit/select").OptionType, boolean, import("@atlaskit/react-select").GroupBase<import("@atlaskit/select").OptionType>>> | undefined;
-    selectProps?: (Omit<import("@atlaskit/select").SelectProps<import("@atlaskit/select").OptionType, false>, "placeholder" | "aria-describedby" | "aria-label" | "inputId"> & {
-        'aria-describedby'?: undefined;
-        'aria-label'?: undefined;
-        inputId?: undefined;
-        placeholder?: undefined;
-    } & {
-        inputValue?: string | undefined;
-    }) | undefined;
-}, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

package/dist/types/components/date-time-picker.d.ts

@@ -52,5 +52,5 @@ export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
 export default DateTimePicker;

package/dist/types/components/time-picker.d.ts

@@ -9,5 +9,5 @@ import { type TimePickerBaseProps } from '../types';
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "label" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
 export default TimePicker;

package/dist/types/internal/ff-component.d.ts

@@ -0,0 +1,34 @@
+import React, { type ComponentType, type RefAttributes } from 'react';
+/**
+ * Gets all available ref types from two prop sets and returns
+ * them in a ref prop
+ *
+ * @example
+ * ```
+ * type P1 = { ref: Ref(HTMLDivElement), ... };
+ * type P2 = { ref: Ref(HTMLSpanElement), ... };
+ *
+ * GetRefAttributes(P1, P2) // {ref: Ref(HTMLDivElement | HTMLSpanElement)}
+ * ```
+ */
+type GetRefAttributes<A, B> = A extends RefAttributes<infer RefA> ? B extends RefAttributes<infer RefB> ? RefAttributes<RefA | RefB> : RefAttributes<RefA> : B extends RefAttributes<infer OnlyRefB> ? RefAttributes<OnlyRefB> : unknown;
+/**
+ * Returns one of components depending on a boolean condition.
+ * The result component will be a union of the two props and
+ * an or on both ref types.
+ *
+ * @example
+ * ```
+ * const Component = componentWithCondition(
+ *      isBooleanConditionMet,
+ *      ComponentWithConditionMet,
+ *      ComponentWithConditionNotMet,
+ * );
+ *
+ * @param condition Function returning boolean value
+ * @param componentTrue Component that will be returned if conditionGetter is "true"
+ * @param componentFalse Component that will be returned if conditionGetter is "false"
+ * @returns Component Depending on a Condition result
+ */
+export declare function componentWithCondition<A extends {}, B extends {}>(condition: () => boolean, ComponentTrue: ComponentType<A>, ComponentFalse: ComponentType<B>): React.FC<React.PropsWithoutRef<A> & React.PropsWithoutRef<B> & GetRefAttributes<React.PropsWithRef<A>, React.PropsWithRef<B>>>;
+export {};

package/dist/types-ts4.5/components/date-picker-class.d.ts

@@ -97,7 +97,7 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
+} & DatePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -115,5 +115,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: React.FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: React.FocusEvent<HTMLInputElement>) => void;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

package/dist/types-ts4.5/components/date-picker-fc.d.ts

@@ -26,5 +26,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<DatePic
     } & {
         inputValue?: string | undefined;
     }) | undefined;
-}, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
+}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
 export default DatePicker;

package/dist/types-ts4.5/components/date-picker.d.ts

@@ -1,5 +1,15 @@
 /// <reference types="react" />
-declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Omit<{
+declare const DatePicker: import("react").FC<Pick<Pick<import("..").DatePickerProps & {
+    icon?: import("react").ComponentType<import("@atlaskit/react-select").DropdownIndicatorProps<import("@atlaskit/select").OptionType, boolean, import("@atlaskit/react-select").GroupBase<import("@atlaskit/select").OptionType>>> | undefined;
+    selectProps?: (Omit<import("@atlaskit/select").SelectProps<import("@atlaskit/select").OptionType, false>, "placeholder" | "aria-describedby" | "aria-label" | "inputId"> & {
+        'aria-describedby'?: undefined;
+        'aria-label'?: undefined;
+        inputId?: undefined;
+        placeholder?: undefined;
+    } & {
+        inputValue?: string | undefined;
+    }) | undefined;
+}, "label" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Pick<Pick<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -8,7 +18,7 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
-} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
+} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "id" | "aria-describedby" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & Partial<Pick<Omit<{
     defaultIsOpen: boolean;
     defaultValue: string;
     disabled: string[];
@@ -26,15 +36,5 @@ declare const DatePicker: import("react").ForwardRefExoticComponent<Pick<Pick<Om
     onBlur: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
     onChange: (_value: string) => void;
     onFocus: (_event: import("react").FocusEvent<HTMLInputElement>) => void;
-}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>> | import("react").ForwardRefExoticComponent<Pick<import("..").DatePickerProps & {
-    icon?: import("react").ComponentType<import("@atlaskit/react-select").DropdownIndicatorProps<import("@atlaskit/select").OptionType, boolean, import("@atlaskit/react-select").GroupBase<import("@atlaskit/select").OptionType>>> | undefined;
-    selectProps?: (Omit<import("@atlaskit/select").SelectProps<import("@atlaskit/select").OptionType, false>, "placeholder" | "aria-describedby" | "aria-label" | "inputId"> & {
-        'aria-describedby'?: undefined;
-        'aria-label'?: undefined;
-        inputId?: undefined;
-        placeholder?: undefined;
-    } & {
-        inputValue?: string | undefined;
-    }) | undefined;
-}, "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "weekStartDay" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<unknown>>;
+}, never>> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>, "label" | "key" | "disabled" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "testId" | "icon" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "disabledDateFilter" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "locale" | "analyticsContext" | "weekStartDay" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & import("react").RefAttributes<any>>;
 export default DatePicker;

package/dist/types-ts4.5/components/date-time-picker.d.ts

@@ -52,5 +52,5 @@ export { DateTimePickerComponent as DateTimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/usage)
  */
-declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "testId" | "appearance" | "innerProps" | "isDisabled" | "key" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
+declare const DateTimePicker: React.ForwardRefExoticComponent<Pick<Pick<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<DateTimePickerBaseProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue">> & Partial<Pick<DateTimePickerBaseProps, "ref" | "createAnalyticsEvent">>, "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "testId" | "appearance" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "analyticsContext" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "clearControlLabel" | "datePickerProps" | "timePickerProps" | "parseValue"> & React.RefAttributes<any>>;
 export default DateTimePicker;

package/dist/types-ts4.5/components/time-picker.d.ts

@@ -9,5 +9,5 @@ import { type TimePickerBaseProps } from '../types';
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "label" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
+declare const TimePicker: React.ForwardRefExoticComponent<Pick<TimePickerBaseProps, "times" | "label" | "parseInputValue" | "formatDisplayLabel" | "placeholder" | "testId" | "appearance" | "selectProps" | "innerProps" | "isDisabled" | "defaultValue" | "id" | "aria-describedby" | "onFocus" | "onBlur" | "onChange" | "locale" | "createAnalyticsEvent" | "value" | "autoFocus" | "isInvalid" | "isRequired" | "name" | "spacing" | "defaultIsOpen" | "isOpen" | "hideIcon" | "timeIsEditable" | "timeFormat"> & React.RefAttributes<unknown>>;
 export default TimePicker;

package/dist/types-ts4.5/internal/ff-component.d.ts

@@ -0,0 +1,34 @@
+import React, { type ComponentType, type RefAttributes } from 'react';
+/**
+ * Gets all available ref types from two prop sets and returns
+ * them in a ref prop
+ *
+ * @example
+ * ```
+ * type P1 = { ref: Ref(HTMLDivElement), ... };
+ * type P2 = { ref: Ref(HTMLSpanElement), ... };
+ *
+ * GetRefAttributes(P1, P2) // {ref: Ref(HTMLDivElement | HTMLSpanElement)}
+ * ```
+ */
+type GetRefAttributes<A, B> = A extends RefAttributes<infer RefA> ? B extends RefAttributes<infer RefB> ? RefAttributes<RefA | RefB> : RefAttributes<RefA> : B extends RefAttributes<infer OnlyRefB> ? RefAttributes<OnlyRefB> : unknown;
+/**
+ * Returns one of components depending on a boolean condition.
+ * The result component will be a union of the two props and
+ * an or on both ref types.
+ *
+ * @example
+ * ```
+ * const Component = componentWithCondition(
+ *      isBooleanConditionMet,
+ *      ComponentWithConditionMet,
+ *      ComponentWithConditionNotMet,
+ * );
+ *
+ * @param condition Function returning boolean value
+ * @param componentTrue Component that will be returned if conditionGetter is "true"
+ * @param componentFalse Component that will be returned if conditionGetter is "false"
+ * @returns Component Depending on a Condition result
+ */
+export declare function componentWithCondition<A extends {}, B extends {}>(condition: () => boolean, ComponentTrue: ComponentType<A>, ComponentFalse: ComponentType<B>): React.FC<React.PropsWithoutRef<A> & React.PropsWithoutRef<B> & GetRefAttributes<React.PropsWithRef<A>, React.PropsWithRef<B>>>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "15.4.0",
+	"version": "15.4.2",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -45,7 +45,7 @@
 		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/select": "^18.1.0",
-		"@atlaskit/theme": "^13.1.0",
+		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",