@atlaskit/datetime-picker 15.1.4 → 15.2.0

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

@@ -4,22 +4,29 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Component } from 'react';
+import { Component, createRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
+// This is a deprecated component but we will be able to use the actual hook
+// version very soon from converting this to functional. And also React 18 is on
+// the horizon
+import { UID } from 'react-uid';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import CalendarIcon from '@atlaskit/icon/glyph/calendar';
 import { createLocalizationProvider } from '@atlaskit/locale';
+import { Pressable, xcss } from '@atlaskit/primitives';
 import Select, { mergeStyles } from '@atlaskit/select';
+import { N500, N70 } from '@atlaskit/theme/colors';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { EmptyComponent } from '../internal';
 import { formatDate, getParsedISO, getPlaceholder, isDateDisabled, parseDate } from '../internal/date-picker-migration';
 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.1.4";
+const packageVersion = "15.2.0";
 const datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -36,11 +43,45 @@ const datePickerDefaultProps = {
   // Not including a default prop for value as it will
   // Make the component a controlled component
 };
+const pickerContainerStyles = css({
+  position: 'relative'
+});
+const iconContainerStyles = css({
+  display: 'flex',
+  height: '100%',
+  position: 'absolute',
+  alignItems: 'center',
+  flexBasis: 'inherit',
+  color: `var(--ds-text-subtlest, ${N70})`,
+  insetBlockStart: 0,
+  insetInlineEnd: 0,
+  transition: `color 150ms`,
+  '&:hover': {
+    color: `var(--ds-text-subtle, ${N500})`
+  }
+});
+const iconSpacingWithClearButtonStyles = css({
+  marginInlineEnd: "var(--ds-space-400, 2rem)"
+});
+const iconSpacingWithoutClearButtonStyles = css({
+  marginInlineEnd: "var(--ds-space-025, 0.125rem)"
+});
+const calendarButtonStyles = xcss({
+  borderRadius: 'border.radius',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  }
+});
 class DatePickerComponent extends Component {
   constructor(props) {
     var _this$props$selectPro2;
     super(props);
     _defineProperty(this, "containerRef", null);
+    _defineProperty(this, "calendarRef", /*#__PURE__*/createRef());
+    _defineProperty(this, "calendarButtonRef", /*#__PURE__*/createRef());
     // All state needs to be accessed via this function so that the state is mapped from props
     // correctly to allow controlled/uncontrolled usage.
     _defineProperty(this, "getValue", () => {
@@ -63,22 +104,29 @@ class DatePickerComponent extends Component {
     _defineProperty(this, "onCalendarSelect", ({
       iso
     }) => {
-      var _this$containerRef;
       this.setState({
         selectInputValue: '',
         isOpen: false,
         calendarValue: iso,
-        value: iso
+        value: iso,
+        wasOpenedFromCalendarButton: false
       });
       this.props.onChange(iso);
 
-      // Not ideal, and the alternative is to place a ref on the inner input of the Select
-      // but that would require a lot of extra work on the Select component just for this
-      // focus functionality. While that would be the 'right react' way to do it, it doesnt
-      // post any other benefits; performance wise, we are only searching within the
-      // container, making it quick.
-      const innerCombobox = (_this$containerRef = this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
-      innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
+      // Yes, this is not ideal. The alternative is to be able to place a ref
+      // on the inner input of Select itself, which would require a lot of
+      // extra stuff in the Select component for only this one thing. While
+      // this would be more "React-y", it doesn't seem to pose any other
+      // benefits. Performance-wise, we are only searching within the
+      // container, so it's quick.
+      if (this.state.wasOpenedFromCalendarButton) {
+        var _this$calendarButtonR;
+        (_this$calendarButtonR = this.calendarButtonRef.current) === null || _this$calendarButtonR === void 0 ? void 0 : _this$calendarButtonR.focus();
+      } else {
+        var _this$containerRef;
+        const innerCombobox = (_this$containerRef = this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
+        innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
+      }
       this.setState({
         isOpen: false
       });
@@ -86,7 +134,8 @@ class DatePickerComponent extends Component {
     _defineProperty(this, "onInputClick", () => {
       if (!this.props.isDisabled && !this.getIsOpen()) {
         this.setState({
-          isOpen: true
+          isOpen: true,
+          wasOpenedFromCalendarButton: false
         });
       }
     });
@@ -96,7 +145,8 @@ class DatePickerComponent extends Component {
       if (!((_this$containerRef2 = this.containerRef) !== null && _this$containerRef2 !== void 0 && _this$containerRef2.contains(newlyFocusedElement))) {
         this.setState({
           isOpen: false,
-          shouldSetFocusOnCurrentDay: false
+          shouldSetFocusOnCurrentDay: false,
+          wasOpenedFromCalendarButton: false
         });
         this.props.onBlur(event);
       }
@@ -119,7 +169,8 @@ class DatePickerComponent extends Component {
         // container. Makes keyboard accessibility of calendar possible
         this.setState({
           isOpen: false,
-          isFocused: false
+          isFocused: false,
+          wasOpenedFromCalendarButton: false
         });
       }
     });
@@ -135,9 +186,11 @@ class DatePickerComponent extends Component {
         });
       } else {
         this.setState({
-          isOpen: true,
+          // Don't open when focused into via keyboard if the calendar button is present
+          isOpen: !this.props.shouldShowCalendarButton,
           calendarValue: value,
-          isFocused: true
+          isFocused: true,
+          wasOpenedFromCalendarButton: false
         });
       }
       this.props.onFocus(event);
@@ -160,11 +213,11 @@ class DatePickerComponent extends Component {
         }
       }
       this.setState({
-        isOpen: true
+        isOpen: true,
+        wasOpenedFromCalendarButton: false
       });
     });
     _defineProperty(this, "onInputKeyDown", event => {
-      var _this$containerRef4;
       const {
         calendarValue
       } = this.state;
@@ -174,7 +227,8 @@ class DatePickerComponent extends Component {
       // If the input is focused and the calendar is not visible, handle space and enter clicks
       if (!this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
         this.setState({
-          isOpen: true
+          isOpen: true,
+          wasOpenedFromCalendarButton: false
         });
       }
       switch (keyPressed) {
@@ -185,11 +239,18 @@ class DatePickerComponent extends Component {
           // this would be more "React-y", it doesn't seem to pose any other
           // benefits. Performance-wise, we are only searching within the
           // container, so it's quick.
-          const innerCombobox = (_this$containerRef4 = this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
-          innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
+          if (this.state.wasOpenedFromCalendarButton) {
+            var _this$calendarButtonR2;
+            (_this$calendarButtonR2 = this.calendarButtonRef.current) === null || _this$calendarButtonR2 === void 0 ? void 0 : _this$calendarButtonR2.focus();
+          } else {
+            var _this$containerRef4;
+            const innerCombobox = (_this$containerRef4 = this.containerRef) === null || _this$containerRef4 === void 0 ? void 0 : _this$containerRef4.querySelector('[role="combobox"]');
+            innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
+          }
           this.setState({
             isOpen: false,
-            shouldSetFocusOnCurrentDay: false
+            shouldSetFocusOnCurrentDay: false,
+            wasOpenedFromCalendarButton: false
           });
           break;
         case 'backspace':
@@ -224,7 +285,8 @@ class DatePickerComponent extends Component {
               selectInputValue: '',
               isOpen: false,
               value: safeCalendarValue,
-              calendarValue: safeCalendarValue
+              calendarValue: safeCalendarValue,
+              wasOpenedFromCalendarButton: false
             });
             if (valueChanged) {
               this.props.onChange(safeCalendarValue);
@@ -243,6 +305,38 @@ class DatePickerComponent extends Component {
           break;
       }
     });
+    _defineProperty(this, "onCalendarButtonKeyDown", e => {
+      // 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') {
+        e.stopPropagation();
+      }
+      this.setState({
+        isKeyDown: true,
+        wasOpenedFromCalendarButton: true
+      });
+    });
+    // This event handler is triggered from both keydown and click. It's weird.
+    _defineProperty(this, "onCalendarButtonClick", e => {
+      this.setState({
+        isOpen: !this.state.isOpen,
+        wasOpenedFromCalendarButton: true
+      }, () => {
+        var _this$calendarRef, _this$calendarRef$cur, _this$calendarRef$cur2;
+        // We don't want the focus to move if this is a click event
+        if (!this.state.isKeyDown) {
+          return;
+        }
+        this.setState({
+          isKeyDown: false
+        });
+
+        // Focus on the first button within the calendar
+        (_this$calendarRef = this.calendarRef) === null || _this$calendarRef === void 0 ? void 0 : (_this$calendarRef$cur = _this$calendarRef.current) === null || _this$calendarRef$cur === void 0 ? void 0 : (_this$calendarRef$cur2 = _this$calendarRef$cur.querySelector('button')) === null || _this$calendarRef$cur2 === void 0 ? void 0 : _this$calendarRef$cur2.focus();
+      });
+      e.stopPropagation();
+    });
     _defineProperty(this, "onClear", () => {
       let changedState = {
         value: '',
@@ -285,6 +379,7 @@ class DatePickerComponent extends Component {
       }
     });
     this.state = {
+      isKeyDown: false,
       isOpen: this.props.defaultIsOpen,
       isFocused: false,
       clearingFromIcon: false,
@@ -293,7 +388,8 @@ class DatePickerComponent extends Component {
       calendarValue: this.props.value || this.props.defaultValue || getShortISOString(new Date()),
       l10n: createLocalizationProvider(this.props.locale),
       locale: this.props.locale,
-      shouldSetFocusOnCurrentDay: false
+      shouldSetFocusOnCurrentDay: false,
+      wasOpenedFromCalendarButton: false
     };
   }
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -311,13 +407,15 @@ class DatePickerComponent extends Component {
       appearance = 'default',
       'aria-describedby': ariaDescribedBy,
       autoFocus = false,
+      hideIcon = false,
+      openCalendarLabel = 'Open calendar',
       disabled,
       disabledDateFilter,
-      hideIcon = false,
-      // TODO: Resolve this typing to be more intuitive
       icon = CalendarIcon,
       id = '',
       innerProps = {},
+      inputLabel = 'Date picker',
+      inputLabelId,
       isDisabled = false,
       isInvalid = false,
       label = '',
@@ -328,6 +426,7 @@ class DatePickerComponent extends Component {
       nextMonthLabel,
       previousMonthLabel,
       selectProps = {},
+      shouldShowCalendarButton,
       spacing = 'default',
       testId,
       weekStartDay
@@ -346,7 +445,7 @@ class DatePickerComponent extends Component {
       lang: this.props.locale
     });
     const selectComponents = {
-      DropdownIndicator: dropDownIcon,
+      DropdownIndicator: shouldShowCalendarButton ? EmptyComponent : dropDownIcon,
       Menu,
       SingleValue,
       ...(!showClearIndicator && {
@@ -366,6 +465,7 @@ class DatePickerComponent extends Component {
       calendarDisabledDateFilter: disabledDateFilter,
       calendarMaxDate: maxDate,
       calendarMinDate: minDate,
+      calendarRef: this.calendarRef,
       calendarValue: value && getShortISOString(parseISO(value)),
       calendarView: calendarValue,
       onCalendarChange: this.onCalendarChange,
@@ -374,7 +474,8 @@ class DatePickerComponent extends Component {
       calendarWeekStartDay: weekStartDay,
       shouldSetFocusOnCurrentDay: this.state.shouldSetFocusOnCurrentDay
     };
-    //@ts-ignore react-select unsupported props
+
+    // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
     const mergedStyles = mergeStyles(selectStyles, {
       control: base => ({
         ...base,
@@ -395,10 +496,14 @@ class DatePickerComponent extends Component {
       }),
       value
     } : null;
+
+    // `label` takes precedence of the `inputLabel`
+    const fullopenCalendarLabel = label || inputLabel ? `${label || inputLabel} , ${openCalendarLabel}` : openCalendarLabel;
     return (
       // These event handlers must be on this element because the events come
       // from different child elements.
       jsx("div", _extends({}, innerProps, {
+        css: pickerContainerStyles,
         role: "presentation",
         onBlur: this.onContainerBlur,
         onFocus: this.onContainerFocus,
@@ -417,7 +522,14 @@ class DatePickerComponent extends Component {
         "aria-describedby": ariaDescribedBy,
         "aria-label": label || undefined,
         autoFocus: autoFocus,
-        closeMenuOnSelect: true,
+        closeMenuOnSelect: true
+        // FOr some reason, this and the below `styles` type error _only_ show
+        // up when you alter some of the properties in the `selectComponents`
+        // object. These errors are still present, and I suspect have always
+        // been present, without changing the unrelated code. Ignoring as the
+        // component still works as expected despite this error. And also
+        // because the select refresh team may solve it later.
+        ,
         components: selectComponents,
         enableAnimation: false,
         inputId: id,
@@ -442,7 +554,7 @@ class DatePickerComponent extends Component {
         spacing: spacing,
         testId: testId
         // These aren't part of `Select`'s API, but we're using them here.
-        //@ts-ignore react-select unsupported props
+        // @ts-ignore --  Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
         ,
         calendarContainerRef: calendarProps.calendarContainerRef,
         calendarDisabled: calendarProps.calendarDisabled,
@@ -450,6 +562,7 @@ class DatePickerComponent extends Component {
         calendarLocale: calendarProps.calendarLocale,
         calendarMaxDate: calendarProps.calendarMaxDate,
         calendarMinDate: calendarProps.calendarMinDate,
+        calendarRef: calendarProps.calendarRef,
         calendarValue: calendarProps.calendarValue,
         calendarView: calendarProps.calendarView,
         calendarWeekStartDay: calendarProps.calendarWeekStartDay,
@@ -458,7 +571,28 @@ class DatePickerComponent extends Component {
         onCalendarSelect: calendarProps.onCalendarSelect,
         previousMonthLabel: previousMonthLabel,
         shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay
-      })))
+      })), shouldShowCalendarButton && !isDisabled ? jsx(UID, {
+        name: id => `open-calendar-label--${id}`
+      }, openCalendarLabelId => jsx("div", {
+        css: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
+      }, inputLabelId && jsx(VisuallyHidden, {
+        id: openCalendarLabelId
+      }, ", ", openCalendarLabel), jsx(Pressable, _extends({}, inputLabelId ? {
+        'aria-labelledby': `${inputLabelId} ${openCalendarLabelId}`
+      } : {
+        'aria-label': fullopenCalendarLabel
+      }, {
+        onClick: this.onCalendarButtonClick,
+        onKeyDown: this.onCalendarButtonKeyDown,
+        ref: this.calendarButtonRef,
+        testId: testId && `${testId}--open-calendar-button`,
+        type: "button",
+        backgroundColor: "color.background.neutral.subtle",
+        padding: "space.050",
+        xcss: calendarButtonStyles
+      }), jsx(CalendarIcon, {
+        label: ""
+      })))) : null)
     );
   }
 }

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

@@ -18,7 +18,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "15.1.4";
+const packageVersion = "15.2.0";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({
@@ -315,6 +315,7 @@ class DateTimePickerComponent extends React.Component {
       placeholder: datePickerProps.placeholder,
       previousMonthLabel: datePickerProps.previousMonthLabel,
       selectProps: mergedDatePickerSelectProps,
+      shouldShowCalendarButton: datePickerProps.shouldShowCalendarButton,
       spacing: datePickerProps.spacing || spacing,
       testId: testId && `${testId}--datepicker` || datePickerProps.testId,
       value: dateValue,

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.1.4";
+const packageVersion = "15.2.0";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -230,7 +230,8 @@ const TimePicker = /*#__PURE__*/forwardRef(({
     })
   };
   const renderIconContainer = Boolean(!hideIcon && value);
-  // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
+
+  // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'.
   const mergedStyles = mergeStyles(selectStyles, {
     control: base => ({
       ...base

package/dist/es2019/internal/menu.js

@@ -69,6 +69,7 @@ export const Menu = ({
       onChange: selectProps.onCalendarChange,
       onSelect: selectProps.onCalendarSelect,
       previousMonthLabel: selectProps.previousMonthLabel,
+      ref: selectProps.calendarRef,
       selected: [selectProps.calendarValue],
       shouldSetFocusOnCurrentDay: selectProps.shouldSetFocusOnCurrentDay,
       locale: selectProps.calendarLocale,