@atlaskit/datetime-picker 14.0.2 → 14.0.4

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

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { forwardRef, useReducer, useState } from 'react';
 
 // eslint-disable-next-line no-restricted-imports
 import { format, isValid } from 'date-fns';
-import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import __noop from '@atlaskit/ds-lib/noop';
 import { createLocalizationProvider } from '@atlaskit/locale';
 import Select, { CreatableSelect, mergeStyles } from '@atlaskit/select';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -15,7 +15,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "14.0.2";
+const packageVersion = "14.0.4";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',
@@ -24,287 +24,11 @@ const menuStyles = {
   /* React-Popper has already offset the menu so we need to reset the margin, otherwise the offset value is doubled */
   margin: 0
 };
-const timePickerDefaultProps = {
-  appearance: 'default',
-  autoFocus: false,
-  defaultIsOpen: false,
-  defaultValue: '',
-  hideIcon: false,
-  id: '',
-  innerProps: {},
-  isDisabled: false,
-  isInvalid: false,
-  label: '',
-  name: '',
-  // These disables are here for proper typing when used as defaults. They
-  // should *not* use the `noop` function.
-  /* eslint-disable @repo/internal/react/use-noop */
-  onBlur: _event => {},
-  onChange: _value => {},
-  onFocus: _event => {},
-  /* eslint-enable @repo/internal/react/use-noop */
-  parseInputValue: (time, _timeFormat) => parseTime(time),
-  selectProps: {},
-  spacing: 'default',
-  times: defaultTimes,
-  timeIsEditable: false,
-  locale: 'en-US'
-  // Not including a default prop for value as it will
-  // Make the component a controlled component
+const analyticsAttributes = {
+  componentName: 'timePicker',
+  packageName,
+  packageVersion
 };
-class TimePickerComponent extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "containerRef", null);
-    _defineProperty(this, "state", {
-      isOpen: this.props.defaultIsOpen,
-      clearingFromIcon: false,
-      value: this.props.defaultValue,
-      isFocused: false
-    });
-    // 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", () => {
-      var _this$props$value;
-      return (_this$props$value = this.props.value) !== null && _this$props$value !== void 0 ? _this$props$value : this.state.value;
-    });
-    _defineProperty(this, "getIsOpen", () => {
-      var _this$props$isOpen;
-      return (_this$props$isOpen = this.props.isOpen) !== null && _this$props$isOpen !== void 0 ? _this$props$isOpen : this.state.isOpen;
-    });
-    _defineProperty(this, "onChange", (newValue, action) => {
-      const rawValue = newValue ? newValue.value || newValue : '';
-      const value = rawValue.toString();
-      let changedState = {
-        value
-      };
-      if (action && action.action === 'clear') {
-        changedState = {
-          ...changedState,
-          clearingFromIcon: true
-        };
-      }
-      this.setState(changedState);
-      this.props.onChange(value);
-    });
-    /**
-     * Only allow custom times if timeIsEditable prop is true
-     */
-    _defineProperty(this, "onCreateOption", inputValue => {
-      if (this.props.timeIsEditable) {
-        const {
-          parseInputValue,
-          timeFormat
-        } = this.props;
-        let sanitizedInput;
-        try {
-          sanitizedInput = parseInputValue(inputValue, timeFormat || defaultTimeFormat);
-        } catch (e) {
-          return; // do nothing, the main validation should happen in the form
-        }
-        const includesSeconds = !!(timeFormat && /[:.]?(s|ss)/.test(timeFormat));
-        const formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
-        const formattedValue = format(sanitizedInput, formatFormat) || '';
-        this.setState({
-          value: formattedValue
-        });
-        this.props.onChange(formattedValue);
-      } else {
-        this.onChange(inputValue);
-      }
-    });
-    _defineProperty(this, "onMenuOpen", () => {
-      // Don't open menu after the user has clicked clear
-      if (this.state.clearingFromIcon) {
-        this.setState({
-          clearingFromIcon: false
-        });
-      } else {
-        this.setState({
-          isOpen: true
-        });
-      }
-    });
-    _defineProperty(this, "onMenuClose", () => {
-      // Don't close menu after the user has clicked clear
-      if (this.state.clearingFromIcon) {
-        this.setState({
-          clearingFromIcon: false
-        });
-      } else {
-        this.setState({
-          isOpen: false
-        });
-      }
-    });
-    _defineProperty(this, "setContainerRef", ref => {
-      const oldRef = this.containerRef;
-      this.containerRef = ref;
-      // Cause a re-render if we're getting the container ref for the first time
-      // as the layered menu requires it for dimension calculation
-      if (oldRef == null && ref != null) {
-        this.forceUpdate();
-      }
-    });
-    _defineProperty(this, "onBlur", event => {
-      this.setState({
-        isFocused: false
-      });
-      this.props.onBlur(event);
-    });
-    _defineProperty(this, "onFocus", event => {
-      this.setState({
-        isFocused: true
-      });
-      this.props.onFocus(event);
-    });
-    _defineProperty(this, "onSelectKeyDown", event => {
-      const {
-        key
-      } = event;
-      const keyPressed = key.toLowerCase();
-      if (this.state.clearingFromIcon && (keyPressed === 'backspace' || keyPressed === 'delete')) {
-        // If being cleared from keyboard, don't change behaviour
-        this.setState({
-          clearingFromIcon: false
-        });
-      }
-    });
-  }
-  render() {
-    const {
-      appearance,
-      'aria-describedby': ariaDescribedBy,
-      autoFocus,
-      formatDisplayLabel,
-      hideIcon,
-      id,
-      innerProps,
-      isDisabled,
-      label,
-      locale,
-      name,
-      placeholder,
-      selectProps,
-      spacing,
-      testId,
-      isInvalid,
-      timeIsEditable,
-      timeFormat,
-      times
-    } = this.props;
-    const ICON_PADDING = 2;
-    const l10n = createLocalizationProvider(locale);
-    const value = this.getValue() || '';
-    const isOpen = this.getIsOpen();
-    const {
-      styles: selectStyles = {},
-      ...otherSelectProps
-    } = selectProps;
-    const SelectComponent = timeIsEditable ? CreatableSelect : Select;
-
-    /**
-     * There are multiple props that can change how the time is formatted.
-     * The priority of props used is:
-     *   1. formatDisplayLabel
-     *   2. timeFormat
-     *   3. locale
-     */
-    const formatTime = time => {
-      if (formatDisplayLabel) {
-        return formatDisplayLabel(time, timeFormat || defaultTimeFormat);
-      }
-      const date = parseTime(time);
-      if (!(date instanceof Date)) {
-        return '';
-      }
-      if (!isValid(date)) {
-        return time;
-      }
-      if (timeFormat) {
-        return format(date, convertTokens(timeFormat));
-      }
-      return l10n.formatTime(date);
-    };
-    const options = times.map(time => {
-      return {
-        label: formatTime(time),
-        value: time
-      };
-    });
-    const initialValue = value ? {
-      label: formatTime(value),
-      value
-    } : null;
-    const SingleValue = makeSingleValue({
-      lang: this.props.locale
-    });
-    const selectComponents = {
-      DropdownIndicator: EmptyComponent,
-      Menu: FixedLayerMenu,
-      SingleValue,
-      ...(hideIcon && {
-        ClearIndicator: EmptyComponent
-      })
-    };
-    const renderIconContainer = Boolean(!hideIcon && value);
-    const mergedStyles = mergeStyles(selectStyles, {
-      control: base => ({
-        ...base
-      }),
-      menu: base => ({
-        ...base,
-        ...menuStyles,
-        // Fixed positioned elements no longer inherit width from their parent, so we must explicitly set the
-        // menu width to the width of our container
-        width: this.containerRef ? this.containerRef.getBoundingClientRect().width : 'auto'
-      }),
-      indicatorsContainer: base => ({
-        ...base,
-        paddingLeft: renderIconContainer ? ICON_PADDING : 0,
-        paddingRight: renderIconContainer ? gridSize() - ICON_PADDING : 0
-      })
-    });
-    return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
-      ref: this.setContainerRef,
-      "data-testid": testId && `${testId}--container`
-    }), /*#__PURE__*/React.createElement("input", {
-      name: name,
-      type: "hidden",
-      value: value,
-      "data-testid": testId && `${testId}--input`,
-      onKeyDown: this.onSelectKeyDown
-    }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
-      "aria-describedby": ariaDescribedBy,
-      "aria-label": label || undefined,
-      appearance: appearance,
-      autoFocus: autoFocus,
-      components: selectComponents,
-      inputId: id,
-      isClearable: true,
-      isDisabled: isDisabled,
-      menuIsOpen: isOpen && !isDisabled,
-      menuPlacement: "auto",
-      openMenuOnFocus: true,
-      onBlur: this.onBlur,
-      onCreateOption: this.onCreateOption,
-      onChange: this.onChange,
-      options: options,
-      onFocus: this.onFocus,
-      onMenuOpen: this.onMenuOpen,
-      onMenuClose: this.onMenuClose,
-      placeholder: placeholder || l10n.formatTime(placeholderDatetime),
-      styles: mergedStyles,
-      value: initialValue,
-      spacing: spacing,
-      fixedLayerRef: this.containerRef,
-      isInvalid: isInvalid,
-      testId: testId
-    }, otherSelectProps)));
-  }
-}
-_defineProperty(TimePickerComponent, "defaultProps", timePickerDefaultProps);
-export { TimePickerComponent as TimePickerWithoutAnalytics };
 
 /**
  * __Time picker__
@@ -315,19 +39,244 @@ export { TimePickerComponent as TimePickerWithoutAnalytics };
  * - [Code](https://atlassian.design/components/datetime-picker/time-picker/code)
  * - [Usage](https://atlassian.design/components/datetime-picker/time-picker/usage)
  */
-const TimePicker = withAnalyticsContext({
-  componentName: 'timePicker',
-  packageName,
-  packageVersion
-})(withAnalyticsEvents({
-  onChange: createAndFireEvent('atlaskit')({
+const TimePicker = /*#__PURE__*/forwardRef(({
+  'aria-describedby': ariaDescribedBy,
+  analyticsContext,
+  appearance = 'default',
+  autoFocus = false,
+  defaultIsOpen = false,
+  defaultValue = '',
+  formatDisplayLabel,
+  hideIcon = false,
+  id = '',
+  innerProps = {},
+  isDisabled = false,
+  isInvalid = false,
+  isOpen: providedIsOpen,
+  label = '',
+  locale = 'en-US',
+  name = '',
+  onBlur: providedOnBlur = __noop,
+  onChange: providedOnChange = __noop,
+  onFocus: providedOnFocus = __noop,
+  parseInputValue = (time, _timeFormat) => parseTime(time),
+  placeholder,
+  selectProps = {},
+  spacing = 'default',
+  testId,
+  timeFormat,
+  timeIsEditable = false,
+  times = defaultTimes,
+  value: providedValue
+}, ref) => {
+  const [containerRef, setContainerRef] = useState(null);
+  /**
+   * When being cleared from the icon the TimePicker is blurred.
+   * This variable defines whether the default onMenuOpen or onMenuClose
+   * events should behave as normal
+   */
+  const [clearingFromIcon, setClearingFromIcon] = useState(false);
+  // TODO: Remove isFocused? Does it do anything?
+  const [_, setIsFocused] = useState(false);
+  const [isOpen, setIsOpen] = useState(providedIsOpen || defaultIsOpen);
+  const [value, setValue] = useState(providedValue || defaultValue);
+
+  // Hack to force update: https://legacy.reactjs.org/docs/hooks-faq.html#is-there-something-like-forceupdate
+  const [, forceUpdate] = useReducer(x => x + 1, 0);
+  const providedOnChangeWithAnalytics = usePlatformLeafEventHandler({
+    fn: providedOnChange,
     action: 'selectedTime',
-    actionSubject: 'timePicker',
-    attributes: {
-      componentName: 'timePicker',
-      packageName,
-      packageVersion
+    analyticsData: analyticsContext,
+    ...analyticsAttributes
+  });
+  const onChange = (newValue, action) => {
+    const rawValue = newValue ? newValue.value || newValue : '';
+    const finalValue = rawValue.toString();
+    setValue(finalValue);
+    if (action && action.action === 'clear') {
+      setClearingFromIcon(true);
+    }
+    providedOnChangeWithAnalytics(finalValue);
+  };
+
+  /**
+   * Only allow custom times if timeIsEditable prop is true
+   */
+  const onCreateOption = inputValue => {
+    if (timeIsEditable) {
+      let sanitizedInput;
+      try {
+        sanitizedInput = parseInputValue(inputValue, timeFormat || defaultTimeFormat);
+      } catch (e) {
+        return; // do nothing, the main validation should happen in the form
+      }
+      const includesSeconds = !!(timeFormat && /[:.]?(s|ss)/.test(timeFormat));
+      const formatFormat = includesSeconds ? 'HH:mm:ss' : 'HH:mm';
+      const formattedValue = format(sanitizedInput, formatFormat) || '';
+      setValue(formattedValue);
+      providedOnChange(formattedValue);
+    } else {
+      providedOnChange(inputValue);
+    }
+  };
+  const onMenuOpen = () => {
+    // Don't open menu after the user has clicked clear
+    if (clearingFromIcon) {
+      setClearingFromIcon(false);
+    } else {
+      setIsOpen(true);
+    }
+  };
+  const onMenuClose = () => {
+    // Don't close menu after the user has clicked clear
+    if (clearingFromIcon) {
+      setClearingFromIcon(false);
+    } else {
+      setIsOpen(false);
+    }
+  };
+  const setInternalContainerRef = ref => {
+    const oldRef = containerRef;
+    setContainerRef(ref);
+    // Cause a re-render if we're getting the container ref for the first time
+    // as the layered menu requires it for dimension calculation
+    if (oldRef === null && ref !== null) {
+      forceUpdate();
+    }
+  };
+  const onBlur = event => {
+    setIsFocused(false);
+    providedOnBlur(event);
+  };
+  const onFocus = event => {
+    setIsFocused(true);
+    providedOnFocus(event);
+  };
+  const onSelectKeyDown = event => {
+    const {
+      key
+    } = event;
+    const keyPressed = key.toLowerCase();
+    if (clearingFromIcon && (keyPressed === 'backspace' || keyPressed === 'delete')) {
+      // If being cleared from keyboard, don't change behaviour
+      setClearingFromIcon(false);
     }
-  })
-})(TimePickerComponent));
+  };
+  const ICON_PADDING = 2;
+  const l10n = createLocalizationProvider(locale);
+  const {
+    styles: selectStyles = {},
+    ...otherSelectProps
+  } = selectProps;
+  const SelectComponent = timeIsEditable ? CreatableSelect : Select;
+
+  /**
+   * There are multiple props that can change how the time is formatted.
+   * The priority of props used is:
+   *   1. formatDisplayLabel
+   *   2. timeFormat
+   *   3. locale
+   */
+  const formatTime = time => {
+    if (formatDisplayLabel) {
+      return formatDisplayLabel(time, timeFormat || defaultTimeFormat);
+    }
+    const date = parseTime(time);
+    if (!(date instanceof Date)) {
+      return '';
+    }
+    if (!isValid(date)) {
+      return time;
+    }
+    if (timeFormat) {
+      return format(date, convertTokens(timeFormat));
+    }
+    return l10n.formatTime(date);
+  };
+  const options = times.map(time => {
+    return {
+      label: formatTime(time),
+      value: time
+    };
+  });
+  let initialValue;
+  if (providedValue !== null && providedValue !== undefined && providedValue !== '') {
+    initialValue = {
+      label: formatTime(providedValue),
+      value: providedValue
+    };
+  } else if (providedValue !== '' && value) {
+    initialValue = {
+      label: formatTime(value),
+      value: value
+    };
+  } else {
+    initialValue = null;
+  }
+  const SingleValue = makeSingleValue({
+    lang: locale
+  });
+  const selectComponents = {
+    DropdownIndicator: EmptyComponent,
+    Menu: FixedLayerMenu,
+    SingleValue,
+    ...(hideIcon && {
+      ClearIndicator: EmptyComponent
+    })
+  };
+  const renderIconContainer = Boolean(!hideIcon && value);
+  const mergedStyles = mergeStyles(selectStyles, {
+    control: base => ({
+      ...base
+    }),
+    menu: base => ({
+      ...base,
+      ...menuStyles,
+      // Fixed positioned elements no longer inherit width from their parent, so we must explicitly set the
+      // menu width to the width of our container
+      width: containerRef ? containerRef.getBoundingClientRect().width : 'auto'
+    }),
+    indicatorsContainer: base => ({
+      ...base,
+      paddingLeft: renderIconContainer ? ICON_PADDING : 0,
+      paddingRight: renderIconContainer ? gridSize() - ICON_PADDING : 0
+    })
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+    ref: setInternalContainerRef,
+    "data-testid": testId && `${testId}--container`
+  }), /*#__PURE__*/React.createElement("input", {
+    name: name,
+    type: "hidden",
+    value: value,
+    "data-testid": testId && `${testId}--input`,
+    onKeyDown: onSelectKeyDown
+  }), /*#__PURE__*/React.createElement(SelectComponent, _extends({
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": label || undefined,
+    appearance: appearance,
+    autoFocus: autoFocus,
+    components: selectComponents,
+    inputId: id,
+    isClearable: true,
+    isDisabled: isDisabled,
+    menuIsOpen: isOpen && !isDisabled,
+    menuPlacement: "auto",
+    openMenuOnFocus: true,
+    onBlur: onBlur,
+    onCreateOption: onCreateOption,
+    onChange: onChange,
+    options: options,
+    onFocus: onFocus,
+    onMenuOpen: onMenuOpen,
+    onMenuClose: onMenuClose,
+    placeholder: placeholder || l10n.formatTime(placeholderDatetime),
+    styles: mergedStyles,
+    value: initialValue,
+    spacing: spacing,
+    fixedLayerRef: containerRef,
+    isInvalid: isInvalid,
+    testId: testId
+  }, otherSelectProps)));
+});
 export default TimePicker;

package/dist/es2019/internal/date-picker-migration.js

@@ -0,0 +1,90 @@
+/**
+ * Everything in this file is to smooth out the migration of the new date picker
+ * (https://product-fabric.atlassian.net/browse/DSP-20682). When that ticket is
+ * complete, all of these functions will ilkely be merged back into the date
+ * picker. Please do not pre-optimize and put these back into the date picker
+ * unless you are working on the DTP Refresh and you have a good reason to do
+ * so, thank you!
+ *
+ * All variables within the `di` objects are dependency injections. They should
+ * be read from within the component at the end of the day. But because we are
+ * extracting them, we have to inject them in every place manually. When we
+ * re-introduce them to the components, we can likely remove the `di` variables
+ * and instead use internal variables.
+ *
+ * If component _only_ has injected variables, it is fully internal and was
+ * broken out to be it's own function.
+ */
+
+import { format, lastDayOfMonth, parseISO } from 'date-fns';
+import { convertTokens } from './parse-tokens';
+import { defaultDateFormat, padToTwo, placeholderDatetime } from './index';
+export const isDateDisabled = (date, di) => {
+  const {
+    disabled
+  } = di;
+  return disabled.indexOf(date) > -1;
+};
+export const getParsedISO = di => {
+  const {
+    iso
+  } = di;
+  const [year, month, date] = iso.split('-');
+  let newIso = iso;
+  const parsedDate = parseInt(date, 10);
+  const parsedMonth = parseInt(month, 10);
+  const parsedYear = parseInt(year, 10);
+  const lastDayInMonth = lastDayOfMonth(new Date(parsedYear, parsedMonth - 1) // This needs to be -1, because the Date constructor expects an index of the given month
+  ).getDate();
+  if (lastDayInMonth < parsedDate) {
+    newIso = `${year}-${padToTwo(parsedMonth)}-${padToTwo(lastDayInMonth)}`;
+  } else {
+    newIso = `${year}-${padToTwo(parsedMonth)}-${padToTwo(parsedDate)}`;
+  }
+  return newIso;
+};
+
+/**
+ * There are two props that can change how the date is parsed.
+ * The priority of props used is:
+ *   1. `parseInputValue`
+ *   2. `locale`
+ */
+export const parseDate = (date, di) => {
+  const {
+    parseInputValue,
+    dateFormat,
+    l10n
+  } = di;
+  if (parseInputValue) {
+    return parseInputValue(date, dateFormat || defaultDateFormat);
+  }
+  return l10n.parseDate(date);
+};
+
+/**
+ * There are multiple props that can change how the date is formatted.
+ * The priority of props used is:
+ *   1. `formatDisplayLabel`
+ *   2. `dateFormat`
+ *   3. `locale`
+ */
+export const formatDate = (value, di) => {
+  const {
+    formatDisplayLabel,
+    dateFormat,
+    l10n
+  } = di;
+  if (formatDisplayLabel) {
+    return formatDisplayLabel(value, dateFormat || defaultDateFormat);
+  }
+  const date = parseISO(value);
+  return dateFormat ? format(date, convertTokens(dateFormat)) : l10n.formatDate(date);
+};
+export const getPlaceholder = di => {
+  const {
+    placeholder,
+    l10n
+  } = di;
+  return placeholder || l10n.formatDate(placeholderDatetime);
+};