@atlaskit/datetime-picker 15.12.1 → 15.13.0

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

@@ -1,9 +1,376 @@
-import { fg } from '@atlaskit/platform-feature-flags';
-import { componentWithCondition } from '../internal/ff-component';
-import DateTimePickerOld from './date-time-picker-class';
-import DateTimePickerNew from './date-time-picker-fc';
-var DateTimePicker = componentWithCondition(function () {
-  return fg('dst-date-time-picker-use-functional-component');
-}, DateTimePickerNew, DateTimePickerOld);
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["selectProps"],
+  _excluded2 = ["selectProps"];
+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) { _defineProperty(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; }
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
+import { format, isValid, parseISO } from 'date-fns';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { IconButton } from '@atlaskit/button/new';
+import SelectClearIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { mergeStyles } from '@atlaskit/select';
+import { formatDateTimeZoneIntoIso } from '../internal';
+import { DateTimePickerContainer } from '../internal/date-time-picker-container';
+import { convertTokens } from '../internal/parse-tokens';
+import DatePicker from './date-picker';
+import TimePicker from './time-picker';
+var packageName = "@atlaskit/datetime-picker";
+var packageVersion = "15.13.0";
+var analyticsAttributes = {
+  componentName: 'dateTimePicker',
+  packageName: packageName,
+  packageVersion: packageVersion
+};
+
+// Make DatePicker 50% the width of DateTimePicker
+// If rendering an icon container, shrink the TimePicker
+var datePickerContainerStyles = xcss({
+  flexBasis: '50%',
+  flexGrow: 1,
+  flexShrink: 0
+});
+var timePickerContainerStyles = xcss({
+  flexBasis: '50%',
+  flexGrow: 1
+});
+var iconContainerStyles = xcss({
+  display: 'flex',
+  alignItems: 'center',
+  flexBasis: 'inherit'
+});
+
+// react-select overrides (via @atlaskit/select).
+var styles = {
+  control: function control(style) {
+    return _objectSpread(_objectSpread({}, style), {}, {
+      backgroundColor: 'transparent',
+      border: 2,
+      borderRadius: 0,
+      paddingLeft: 0,
+      ':hover': {
+        backgroundColor: 'transparent',
+        cursor: 'inherit'
+      }
+    });
+  }
+};
+export var datePickerDefaultAriaLabel = 'Date';
+export var timePickerDefaultAriaLabel = 'Time';
+
+/**
+ * __Date time picker__
+ *
+ * A date time picker allows the user to select an associated date and time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/usage)
+ */
+var DateTimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var ariaDescribedBy = _ref['aria-describedby'],
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$clearControlLabe = _ref.clearControlLabel,
+    clearControlLabel = _ref$clearControlLabe === void 0 ? 'clear' : _ref$clearControlLabe,
+    _ref$datePickerProps = _ref.datePickerProps,
+    datePickerPropsWithSelectProps = _ref$datePickerProps === void 0 ? {} : _ref$datePickerProps,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? '' : _ref$id,
+    _ref$innerProps = _ref.innerProps,
+    innerProps = _ref$innerProps === void 0 ? {} : _ref$innerProps,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$isInvalid = _ref.isInvalid,
+    isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
+    _ref$isRequired = _ref.isRequired,
+    isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? '' : _ref$name,
+    _ref$onBlur = _ref.onBlur,
+    onBlur = _ref$onBlur === void 0 ? function (_event) {} : _ref$onBlur,
+    _ref$onChange = _ref.onChange,
+    onChangeProp = _ref$onChange === void 0 ? function (_value) {} : _ref$onChange,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? function (_event) {} : _ref$onFocus,
+    providedParseValue = _ref.parseValue,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'en-US' : _ref$locale,
+    testId = _ref.testId,
+    _ref$timePickerProps = _ref.timePickerProps,
+    timePickerPropsWithSelectProps = _ref$timePickerProps === void 0 ? {} : _ref$timePickerProps,
+    providedValue = _ref.value;
+  var _useState = useState((datePickerPropsWithSelectProps === null || datePickerPropsWithSelectProps === void 0 ? void 0 : datePickerPropsWithSelectProps.defaultValue) || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    dateValue = _useState2[0],
+    setDateValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFocused = _useState4[0],
+    setIsFocused = _useState4[1];
+  var _useState5 = useState((timePickerPropsWithSelectProps === null || timePickerPropsWithSelectProps === void 0 ? void 0 : timePickerPropsWithSelectProps.defaultValue) || ''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    timeValue = _useState6[0],
+    setTimeValue = _useState6[1];
+  var _useState7 = useState(defaultValue || ''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    value = _useState8[0],
+    setValue = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    zoneValue = _useState10[0],
+    setZoneValue = _useState10[1];
+  useEffect(function () {
+    if (providedValue) {
+      setValue(providedValue);
+    }
+  }, [providedValue]);
+  var parseValue = useCallback(function (value, providedDateValue, providedTimeValue, providedZoneValue) {
+    if (providedParseValue) {
+      var parsedFromFn = providedParseValue(value, providedDateValue, providedTimeValue, providedZoneValue);
+      // 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: providedDateValue,
+        timeValue: providedTimeValue,
+        zoneValue: providedZoneValue
+      };
+    }
+    var parsed = parseISO(value);
+    return isValid(parsed) ? {
+      dateValue: format(parsed, convertTokens('YYYY-MM-DD')),
+      timeValue: format(parsed, convertTokens('HH:mm')),
+      zoneValue: format(parsed, convertTokens('ZZ'))
+    } : {
+      dateValue: dateValue,
+      timeValue: timeValue,
+      zoneValue: zoneValue
+    };
+  }, [providedParseValue, dateValue, timeValue, zoneValue]);
+  useEffect(function () {
+    var parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
+    setDateValue(parsedValues.dateValue);
+    setTimeValue(parsedValues.timeValue);
+    setZoneValue(parsedValues.zoneValue);
+  }, [value, dateValue, timeValue, zoneValue, parseValue]);
+  var onDateBlur = function onDateBlur(event) {
+    setIsFocused(false);
+    onBlur(event);
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onBlur) {
+      datePickerPropsWithSelectProps.onBlur(event);
+    }
+  };
+  var onTimeBlur = function onTimeBlur(event) {
+    setIsFocused(false);
+    onBlur(event);
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onBlur) {
+      timePickerPropsWithSelectProps.onBlur(event);
+    }
+  };
+  var onDateFocus = function onDateFocus(event) {
+    setIsFocused(false);
+    onFocus(event);
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onFocus) {
+      datePickerPropsWithSelectProps.onFocus(event);
+    }
+  };
+  var onTimeFocus = function onTimeFocus(event) {
+    setIsFocused(false);
+    onFocus(event);
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onFocus) {
+      timePickerPropsWithSelectProps.onFocus(event);
+    }
+  };
+  var onDateChange = function onDateChange(dateValue) {
+    var parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
+    onValueChange({
+      providedDateValue: dateValue,
+      providedTimeValue: parsedValues.timeValue,
+      providedZoneValue: parsedValues.zoneValue
+    });
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
+      datePickerPropsWithSelectProps.onChange(dateValue);
+    }
+  };
+  var onTimeChange = function onTimeChange(timeValue) {
+    var parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
+    onValueChange({
+      providedDateValue: parsedValues.dateValue,
+      providedTimeValue: timeValue,
+      providedZoneValue: parsedValues.zoneValue
+    });
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
+      timePickerPropsWithSelectProps.onChange(timeValue);
+    }
+  };
+  var onClear = function onClear() {
+    var parsedValues = parseValue(value, dateValue, timeValue, zoneValue);
+    onValueChange({
+      providedDateValue: '',
+      providedTimeValue: '',
+      providedZoneValue: parsedValues.zoneValue
+    });
+    if (datePickerPropsWithSelectProps !== null && datePickerPropsWithSelectProps !== void 0 && datePickerPropsWithSelectProps.onChange) {
+      datePickerPropsWithSelectProps.onChange('');
+    }
+    if (timePickerPropsWithSelectProps !== null && timePickerPropsWithSelectProps !== void 0 && timePickerPropsWithSelectProps.onChange) {
+      timePickerPropsWithSelectProps.onChange('');
+    }
+  };
+  var onChangePropWithAnalytics = usePlatformLeafEventHandler(_objectSpread({
+    fn: onChangeProp,
+    action: 'selectedDate',
+    actionSubject: 'datePicker'
+  }, analyticsAttributes));
+  var onValueChange = function onValueChange(_ref2) {
+    var providedDateValue = _ref2.providedDateValue,
+      providedTimeValue = _ref2.providedTimeValue,
+      providedZoneValue = _ref2.providedZoneValue;
+    setDateValue(providedDateValue);
+    setTimeValue(providedTimeValue);
+    setZoneValue(providedZoneValue);
+    if (providedDateValue && providedTimeValue) {
+      var _value2 = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, providedZoneValue);
+      var _parseValue = parseValue(_value2, providedDateValue, providedTimeValue, providedZoneValue),
+        parsedZone = _parseValue.zoneValue;
+      var valueWithValidZone = formatDateTimeZoneIntoIso(providedDateValue, providedTimeValue, parsedZone);
+      setValue(valueWithValidZone);
+      onChangePropWithAnalytics(valueWithValidZone);
+      // If the date or time value was cleared when there is an existing datetime value, then clear the value.
+    } else if (value) {
+      setValue('');
+      onChangePropWithAnalytics('');
+    }
+  };
+  var datePickerSelectProps = datePickerPropsWithSelectProps.selectProps,
+    datePickerProps = _objectWithoutProperties(datePickerPropsWithSelectProps, _excluded);
+  var datePickerAriaDescribedBy = datePickerProps['aria-describedby'] || ariaDescribedBy;
+  var datePickerLabel = datePickerProps.label || datePickerDefaultAriaLabel;
+  var mergedDatePickerSelectProps = _objectSpread(_objectSpread({}, datePickerSelectProps), {}, {
+    styles: mergeStyles(styles, datePickerSelectProps === null || datePickerSelectProps === void 0 ? void 0 : datePickerSelectProps.styles)
+  });
+  var timePickerSelectProps = timePickerPropsWithSelectProps.selectProps,
+    timePickerProps = _objectWithoutProperties(timePickerPropsWithSelectProps, _excluded2);
+  var timePickerAriaDescribedBy = timePickerProps['aria-describedby'] || ariaDescribedBy;
+  var timePickerLabel = timePickerProps.label || timePickerDefaultAriaLabel;
+  var mergedTimePickerSelectProps = _objectSpread(_objectSpread({}, timePickerSelectProps), {}, {
+    styles: mergeStyles(styles, timePickerSelectProps === null || timePickerSelectProps === void 0 ? void 0 : timePickerSelectProps.styles)
+  });
+
+  // Render DateTimePicker's IconContainer when a value has been filled
+  // Don't use Date or TimePicker's because they can't be customised
+  var isClearable = Boolean(dateValue || timeValue);
+  return /*#__PURE__*/React.createElement(DateTimePickerContainer, {
+    appearance: appearance,
+    isDisabled: isDisabled,
+    isFocused: isFocused,
+    isInvalid: isInvalid,
+    testId: testId,
+    innerProps: innerProps
+  }, /*#__PURE__*/React.createElement("input", {
+    name: name,
+    type: "hidden",
+    value: value,
+    "data-testid": testId && "".concat(testId, "--input")
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: datePickerContainerStyles
+  }, /*#__PURE__*/React.createElement(DatePicker, {
+    appearance: appearance,
+    "aria-describedby": datePickerAriaDescribedBy,
+    autoFocus: datePickerProps.autoFocus || autoFocus,
+    dateFormat: datePickerProps.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,
+    inputLabel: datePickerProps.inputLabel,
+    inputLabelId: datePickerProps.inputLabelId,
+    isDisabled: datePickerProps.isDisabled || isDisabled,
+    isInvalid: datePickerProps.isInvalid || isInvalid,
+    isOpen: datePickerProps.isOpen,
+    isRequired: datePickerProps.isRequired || isRequired,
+    label: datePickerLabel,
+    locale: datePickerProps.locale || locale,
+    maxDate: datePickerProps.maxDate,
+    minDate: datePickerProps.minDate,
+    name: datePickerProps.name,
+    nextMonthLabel: datePickerProps.nextMonthLabel,
+    onBlur: onDateBlur,
+    onChange: onDateChange,
+    onFocus: onDateFocus,
+    openCalendarLabel: datePickerProps.openCalendarLabel,
+    parseInputValue: datePickerProps.parseInputValue,
+    placeholder: datePickerProps.placeholder,
+    previousMonthLabel: datePickerProps.previousMonthLabel,
+    selectProps: mergedDatePickerSelectProps,
+    shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
+    spacing: datePickerProps.spacing || spacing,
+    testId: testId && "".concat(testId, "--datepicker") || datePickerProps.testId,
+    value: dateValue,
+    weekStartDay: datePickerProps.weekStartDay
+  })), /*#__PURE__*/React.createElement(Box, {
+    xcss: timePickerContainerStyles
+  }, /*#__PURE__*/React.createElement(TimePicker, {
+    appearance: timePickerProps.appearance || appearance,
+    "aria-describedby": timePickerAriaDescribedBy,
+    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,
+    isRequired: timePickerProps.isRequired || isRequired,
+    label: timePickerLabel,
+    locale: timePickerProps.locale || locale,
+    name: timePickerProps.name,
+    onBlur: onTimeBlur,
+    onChange: onTimeChange,
+    onFocus: onTimeFocus,
+    parseInputValue: timePickerProps.parseInputValue,
+    placeholder: timePickerProps.placeholder,
+    selectProps: mergedTimePickerSelectProps,
+    spacing: timePickerProps.spacing || spacing,
+    testId: timePickerProps.testId || testId && "".concat(testId, "--timepicker"),
+    timeFormat: timePickerProps.timeFormat,
+    timeIsEditable: timePickerProps.timeIsEditable,
+    times: timePickerProps.times,
+    value: timeValue
+  })), isClearable && !isDisabled ? /*#__PURE__*/React.createElement(Inline, {
+    xcss: iconContainerStyles
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    label: clearControlLabel,
+    icon: function icon(iconProps) {
+      return /*#__PURE__*/React.createElement(SelectClearIcon, _extends({}, iconProps, {
+        color: "var(--ds-text-subtlest, #626F86)",
+        LEGACY_size: "small"
+      }));
+    },
+    onClick: onClear,
+    testId: testId && "".concat(testId, "--icon--container"),
+    tabIndex: -1
+  })) : null);
+});
 export default DateTimePicker;

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.12.1";
+var packageVersion = "15.13.0";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -306,7 +306,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onKeyDown: onSelectKeyDown
   }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
     "aria-describedby": ariaDescribedBy,
-    "aria-label": label || undefined,
+    label: label || undefined,
     appearance: appearance,
     autoFocus: autoFocus,
     clearControlLabel: clearControlLabel,

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

@@ -1,21 +1,20 @@
 /// <reference types="react" />
-declare const DatePicker: import("react").FC<Omit<Omit<import("./date-picker-fc").DatePickerProps, "ref"> & import("react").RefAttributes<unknown>, "ref"> & Omit<Omit<Pick<Omit<{
-    defaultIsOpen: boolean;
-    defaultValue: string;
-    disabled: string[];
-    disabledDateFilter: (_: string) => boolean;
-    locale: string;
-    onBlur: (_event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
-    onChange: (_value: string) => void;
-    onFocus: (_event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
-} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & {
-    disabled?: string[] | undefined;
-    defaultValue?: string | undefined;
-    onFocus?: (((_event: import("react").FocusEvent<HTMLInputElement, Element>) => void) & import("react").FocusEventHandler<HTMLInputElement>) | undefined;
-    onBlur?: (((_event: import("react").FocusEvent<HTMLInputElement, Element>) => void) & import("react").FocusEventHandler<HTMLInputElement>) | undefined;
-    onChange?: (((_value: string) => void) & ((value: string) => void)) | undefined;
-    disabledDateFilter?: (((_: string) => boolean) & ((date: string) => boolean)) | undefined;
-    locale?: string | undefined;
-    defaultIsOpen?: boolean | undefined;
-} & {} & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "ref"> & import("react").RefAttributes<any>, "ref"> & import("react").RefAttributes<any>>;
+import { type DropdownIndicatorProps, type OptionType } from '@atlaskit/select';
+import { type DatePickerBaseProps, type DateTimePickerSelectProps } from '../types';
+export type DatePickerProps = DatePickerBaseProps & {
+    icon?: React.ComponentType<DropdownIndicatorProps<OptionType>>;
+    selectProps?: DateTimePickerSelectProps & {
+        inputValue?: string;
+    };
+};
+/**
+ * __Date picker__
+ *
+ * A date picker allows the user to select a particular date.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
+ */
+declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<unknown>>;
 export default DatePicker;

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

@@ -1,32 +1,15 @@
-/// <reference types="react" />
-declare const DateTimePicker: import("react").FC<Omit<Omit<import("..").DateTimePickerProps, "ref"> & import("react").RefAttributes<unknown>, "ref"> & Omit<Omit<Omit<Pick<Omit<import("..").DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & {
-    appearance?: import("..").Appearance | undefined;
-    isDisabled?: boolean | undefined;
-    innerProps?: import("react").AllHTMLAttributes<HTMLElement> | undefined;
-    defaultValue?: string | undefined;
-    autoFocus?: boolean | undefined;
-    id?: string | undefined;
-    'aria-describedby'?: string | undefined;
-    onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-    onChange?: ((value: string) => void) | undefined;
-    value?: string | undefined;
-    testId?: string | undefined;
-    locale?: string | undefined;
-    clearControlLabel?: string | undefined;
-    isInvalid?: boolean | undefined;
-    isRequired?: boolean | undefined;
-    name?: string | undefined;
-    spacing?: import("..").Spacing | undefined;
-    datePickerProps?: import("..").DatePickerProps | undefined;
-    timePickerProps?: import("..").TimePickerProps | undefined;
-    parseValue?: ((dateTimeValue: string, date: string, time: string, timezone: string) => {
-        dateValue: string;
-        timeValue: string;
-        zoneValue: string;
-    }) | undefined;
-} & {
-    ref?: import("react").Ref<any> | undefined;
-    createAnalyticsEvent?: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | undefined;
-}, "ref"> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "ref"> & import("react").RefAttributes<any>, "ref"> & import("react").RefAttributes<any>>;
+import React from 'react';
+import { type DateTimePickerBaseProps } from '../types';
+export declare const datePickerDefaultAriaLabel = "Date";
+export declare const timePickerDefaultAriaLabel = "Time";
+/**
+ * __Date time picker__
+ *
+ * A date time picker allows the user to select an associated date and time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/usage)
+ */
+declare const DateTimePicker: React.ForwardRefExoticComponent<Omit<DateTimePickerBaseProps, "ref"> & React.RefAttributes<unknown>>;
 export default DateTimePicker;

package/dist/types/internal/fixed-layer.d.ts

@@ -28,6 +28,6 @@ interface FixedLayerProps {
 export default class FixedLayer extends React.Component<FixedLayerProps> {
     update: () => void;
     componentDidUpdate(prevProps: any): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/types/internal/single-value.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type OptionType, type SingleValueProps } from '@atlaskit/select';
 /**
  * This creates a functional component that `react-select` will use to make the
@@ -6,4 +6,4 @@ import { type OptionType, type SingleValueProps } from '@atlaskit/select';
  */
 export declare const makeSingleValue: ({ lang }: {
     lang: string;
-}) => ({ children, className, clearValue, cx, data, getStyles, getValue, hasValue, isDisabled, isMulti, isRtl, options, selectOption, selectProps, setValue, ...rest }: SingleValueProps<OptionType, false>) => JSX.Element;
+}) => ({ children, className, clearValue, cx, data, getStyles, getValue, hasValue, isDisabled, isMulti, isRtl, options, selectOption, selectProps, setValue, ...rest }: SingleValueProps<OptionType, false>) => React.JSX.Element;

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

@@ -1,21 +1,20 @@
 /// <reference types="react" />
-declare const DatePicker: import("react").FC<Omit<Omit<import("./date-picker-fc").DatePickerProps, "ref"> & import("react").RefAttributes<unknown>, "ref"> & Omit<Omit<Pick<Omit<{
-    defaultIsOpen: boolean;
-    defaultValue: string;
-    disabled: string[];
-    disabledDateFilter: (_: string) => boolean;
-    locale: string;
-    onBlur: (_event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
-    onChange: (_value: string) => void;
-    onFocus: (_event: import("react").FocusEvent<HTMLInputElement, Element>) => void;
-} & import("..").DatePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, "label" | "parseInputValue" | "dateFormat" | "formatDisplayLabel" | "placeholder" | "appearance" | "isDisabled" | "innerProps" | "selectProps" | "autoFocus" | "id" | "aria-describedby" | "value" | "testId" | "icon" | "maxDate" | "minDate" | "nextMonthLabel" | "previousMonthLabel" | "weekStartDay" | "clearControlLabel" | "isInvalid" | "isRequired" | "name" | "spacing" | "isOpen" | "inputLabel" | "inputLabelId" | "openCalendarLabel" | "shouldShowCalendarButton" | "hideIcon"> & {
-    disabled?: string[] | undefined;
-    defaultValue?: string | undefined;
-    onFocus?: (((_event: import("react").FocusEvent<HTMLInputElement, Element>) => void) & import("react").FocusEventHandler<HTMLInputElement>) | undefined;
-    onBlur?: (((_event: import("react").FocusEvent<HTMLInputElement, Element>) => void) & import("react").FocusEventHandler<HTMLInputElement>) | undefined;
-    onChange?: (((_value: string) => void) & ((value: string) => void)) | undefined;
-    disabledDateFilter?: (((_: string) => boolean) & ((date: string) => boolean)) | undefined;
-    locale?: string | undefined;
-    defaultIsOpen?: boolean | undefined;
-} & {} & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "ref"> & import("react").RefAttributes<any>, "ref"> & import("react").RefAttributes<any>>;
+import { type DropdownIndicatorProps, type OptionType } from '@atlaskit/select';
+import { type DatePickerBaseProps, type DateTimePickerSelectProps } from '../types';
+export type DatePickerProps = DatePickerBaseProps & {
+    icon?: React.ComponentType<DropdownIndicatorProps<OptionType>>;
+    selectProps?: DateTimePickerSelectProps & {
+        inputValue?: string;
+    };
+};
+/**
+ * __Date picker__
+ *
+ * A date picker allows the user to select a particular date.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/date-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/date-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/date-picker/usage)
+ */
+declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<unknown>>;
 export default DatePicker;

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

@@ -1,32 +1,15 @@
-/// <reference types="react" />
-declare const DateTimePicker: import("react").FC<Omit<Omit<import("..").DateTimePickerProps, "ref"> & import("react").RefAttributes<unknown>, "ref"> & Omit<Omit<Omit<Pick<Omit<import("..").DateTimePickerProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & {
-    appearance?: import("..").Appearance | undefined;
-    isDisabled?: boolean | undefined;
-    innerProps?: import("react").AllHTMLAttributes<HTMLElement> | undefined;
-    defaultValue?: string | undefined;
-    autoFocus?: boolean | undefined;
-    id?: string | undefined;
-    'aria-describedby'?: string | undefined;
-    onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-    onChange?: ((value: string) => void) | undefined;
-    value?: string | undefined;
-    testId?: string | undefined;
-    locale?: string | undefined;
-    clearControlLabel?: string | undefined;
-    isInvalid?: boolean | undefined;
-    isRequired?: boolean | undefined;
-    name?: string | undefined;
-    spacing?: import("..").Spacing | undefined;
-    datePickerProps?: import("..").DatePickerProps | undefined;
-    timePickerProps?: import("..").TimePickerProps | undefined;
-    parseValue?: ((dateTimeValue: string, date: string, time: string, timezone: string) => {
-        dateValue: string;
-        timeValue: string;
-        zoneValue: string;
-    }) | undefined;
-} & {
-    ref?: import("react").Ref<any> | undefined;
-    createAnalyticsEvent?: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent | undefined;
-}, "ref"> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "ref"> & import("react").RefAttributes<any>, "ref"> & import("react").RefAttributes<any>>;
+import React from 'react';
+import { type DateTimePickerBaseProps } from '../types';
+export declare const datePickerDefaultAriaLabel = "Date";
+export declare const timePickerDefaultAriaLabel = "Time";
+/**
+ * __Date time picker__
+ *
+ * A date time picker allows the user to select an associated date and time.
+ *
+ * - [Examples](https://atlassian.design/components/datetime-picker/examples)
+ * - [Code](https://atlassian.design/components/datetime-picker/code)
+ * - [Usage](https://atlassian.design/components/datetime-picker/usage)
+ */
+declare const DateTimePicker: React.ForwardRefExoticComponent<Omit<DateTimePickerBaseProps, "ref"> & React.RefAttributes<unknown>>;
 export default DateTimePicker;

package/dist/types-ts4.5/internal/fixed-layer.d.ts

@@ -28,6 +28,6 @@ interface FixedLayerProps {
 export default class FixedLayer extends React.Component<FixedLayerProps> {
     update: () => void;
     componentDidUpdate(prevProps: any): void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};

package/dist/types-ts4.5/internal/single-value.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type OptionType, type SingleValueProps } from '@atlaskit/select';
 /**
  * This creates a functional component that `react-select` will use to make the
@@ -6,4 +6,4 @@ import { type OptionType, type SingleValueProps } from '@atlaskit/select';
  */
 export declare const makeSingleValue: ({ lang }: {
     lang: string;
-}) => ({ children, className, clearValue, cx, data, getStyles, getValue, hasValue, isDisabled, isMulti, isRtl, options, selectOption, selectProps, setValue, ...rest }: SingleValueProps<OptionType, false>) => JSX.Element;
+}) => ({ children, className, clearValue, cx, data, getStyles, getValue, hasValue, isDisabled, isMulti, isRtl, options, selectOption, selectProps, setValue, ...rest }: SingleValueProps<OptionType, false>) => React.JSX.Element;