carbon-react 103.2.0 → 104.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "103.2.0",
+  "version": "104.2.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -101,7 +101,7 @@
     "chromatic": "^6.0.5",
     "commitizen": "^4.2.4",
     "conventional-changelog-conventionalcommits": "^4.5.0",
-    "core-js": "^3.1.4",
+    "core-js": "^3.20.3",
     "cpy-cli": "^3.1.1",
     "cross-env": "^5.2.0",
     "cypress": "^9.2.0",
@@ -112,6 +112,7 @@
     "cypress-real-events": "^1.6.0",
     "cypress-storybook": "^0.5.1",
     "cz-conventional-changelog": "^3.3.0",
+    "date-fns-tz": "^1.2.2",
     "draft-js": "^0.11.7",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.14.0",
@@ -155,21 +156,21 @@
   "dependencies": {
     "@octokit/rest": "^18.12.0",
     "@popperjs/core": "^2.9.0",
-    "@sage/design-tokens": "^1.87.1",
+    "@sage/design-tokens": "^1.89.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",
     "@types/styled-system": "^5.1.11",
     "classnames": "~2.2.6",
     "crypto-js": "~3.3.0",
+    "date-fns": "^2.26.0",
     "dotenv": "^10.0.0",
     "immutable": "~3.8.2",
     "invariant": "^2.2.4",
     "lodash": "^4.17.20",
-    "moment": "~2.20.1",
     "node-fetch": "^2.6.1",
     "polished": "^4.0.5",
     "prop-types": "^15.7.2",
-    "react-day-picker": "~6.1.1",
+    "react-day-picker": "~7.4.10",
     "react-dnd": "^10.0.2",
     "react-dnd-html5-backend": "^10.0.2",
     "react-is": "^17.0.2",

package/lib/__internal__/date/date.d.ts

@@ -1,34 +0,0 @@
-interface Locale {
-  locale: string;
-  formats: string[];
-  format: string;
-}
-
-interface FormatDateToCurrentLocaleArgs extends Locale {
-  value: string;
-}
-
-interface IsValidDateArgs extends FormatDateToCurrentLocaleArgs {
-  options?: Record<string, unknown>;
-}
-
-interface FormatValueArgs extends IsValidDateArgs {
-  formatTo?: string;
-}
-
-interface WithinRangeArgs extends FormatDateToCurrentLocaleArgs {
-  limit: number;
-  units: string;
-}
-
-export interface DateHelper {
-  sanitizeDateInput: (value: string) => string;
-  isValidDate: (params: IsValidDateArgs) => boolean;
-  formatValue: (params: FormatValueArgs) => string;
-  stringToDate: (value: string) => Date;
-  formatDateString: (value: string, formatTo?: string) => string;
-  todayFormatted: (format?: string) => string;
-  weekdaysMinified: (locale: string) => string[];
-  withinRange: (params: WithinRangeArgs) => boolean;
-  formatDateToCurrentLocale: (params: FormatDateToCurrentLocaleArgs) => string;
-}

package/lib/__internal__/date/date.js

@@ -1,216 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _moment = _interopRequireDefault(require("moment"));
-
-require("moment/min/locales");
-
-var _lodash = require("lodash");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const isoDateFormat = "YYYY-MM-DD";
-/**
- * DateHelper used to encapsulate the date parsing library into a single helper
- */
-
-const DateHelper = {
-  /**
-   * Sanitizes all valid date separators ( . - 'whitespace' ) replacing them
-   * with a slash
-   *
-   * This allows us to compare against one separator in the i18n string. DD/MM/YYYY
-   *
-   * @method sanitizeDateInput
-   * @return {String} sanitized input
-   */
-  sanitizeDateInput: value => {
-    if (!value) {
-      return "";
-    }
-
-    return value.replace(/[-.\s]/g, "/").toLowerCase();
-  },
-
-  /**
-   * Determines if date is valid
-   *
-   * @param {String} value - value to validate
-   * @param {Object} options Override Moment JS options
-   * @return {Boolean}
-   */
-  isValidDate: ({
-    value,
-    options = {},
-    locale,
-    formats,
-    format
-  }) => {
-    return DateHelper._parseDate({
-      value,
-      options,
-      locale,
-      formats,
-      format
-    }).isValid();
-  },
-
-  /**
-   * Formats the given value to a specified format
-   *
-   * @method formatValue
-   * @param {String} val current value
-   * @param {String} formatTo Desired format
-   * @param {Object} options Override Moment JS options
-   * @return {String} formatted date
-   */
-  formatValue: ({
-    value,
-    formatTo = isoDateFormat,
-    options = {},
-    locale,
-    formats,
-    format
-  }) => {
-    const date = DateHelper._parseDate({
-      value,
-      options,
-      locale,
-      formats,
-      format
-    });
-
-    return date.isValid() ? date.format(formatTo) : value;
-  },
-
-  /**
-   * Convert a value such as '2017-08-23' into a Javascript Date object
-   *
-   * @method stringToDate
-   * @param {String} value current value e.g. 2017-08-23
-   * @return {Object} The Date object
-   */
-  stringToDate: value => (0, _moment.default)(value).toDate(),
-
-  /**
-   * Formats the given date string to the specified format
-   * Moment will not format the standard Javascript Date string format
-   *
-   * @method formatDateString
-   * @param {String} value current value e.g. Wed Aug 23 2017 12:00:00 GMT+0100 (BST)
-   * @param {String} formatTo Desired format e.g. YYYY-MM-DD
-   * @return {String} formatted date
-   */
-  formatDateString: (value, formatTo = isoDateFormat) => {
-    return (0, _moment.default)(new Date(value).getTime()).format(formatTo);
-  },
-
-  /**
-   * Returns todays date formatted
-   *
-   * @param {String} format - format of date
-   * @return {Moment}
-   */
-  todayFormatted: (format = isoDateFormat) => {
-    return (0, _moment.default)().format(format);
-  },
-
-  /**
-   * Returns an array of days of the week by locale minified
-   * Mo, Tu, We, Th, Fr, Sa, Su
-   *
-   * @param {String} locale - defaulted to I18n.locale
-   * @return {Array}
-   */
-  weekdaysMinified: locale => {
-    return _moment.default.localeData(locale)._weekdaysMin;
-  },
-
-  /**
-   * @param {String} value - the date to test
-   * @param {Number} limit - the upper and lower bounds
-   * @param {String} units - defaulted to days
-   * @return {Boolean}
-   */
-  withinRange: ({
-    value,
-    limit,
-    units,
-    locale,
-    formats,
-    format
-  }) => {
-    const momentValue = DateHelper._parseDate({
-      value,
-      locale,
-      formats,
-      format
-    }),
-          today = (0, _moment.default)();
-
-    const difference = Math.abs(today.diff(momentValue, units));
-    return difference < limit;
-  },
-
-  /**
-   * Default options to pass to moment js
-   *
-   * @private
-   * formats - given accepted formats
-   * locale - current locale
-   * strict - moment js strict mode
-   */
-  _defaultMomentOptions: (locale, formats) => {
-    return {
-      locale,
-      formats,
-      strict: true
-    };
-  },
-
-  /**
-   * Parses date into moment
-   * Note when sanitizing dates formats must contain '/' for separators
-   *
-   * @private
-   * @param {String} value - value to parse
-   * @param {Object} options Override Moment JS options
-   * @return {Moment}
-   */
-  _parseDate({
-    value,
-    options,
-    locale,
-    formats = [],
-    format
-  }) {
-    const opts = (0, _lodash.merge)(DateHelper._defaultMomentOptions(locale, formats), options, {
-      locale,
-      formats,
-      format
-    });
-    return (0, _moment.default)(value, [format, isoDateFormat, ...opts.formats], opts.locale, opts.strict);
-  },
-
-  formatDateToCurrentLocale({
-    value,
-    locale,
-    formats,
-    format
-  }) {
-    return DateHelper.formatValue({
-      value,
-      formatTo: format,
-      locale,
-      formats,
-      format
-    });
-  }
-
-};
-var _default = DateHelper;
-exports.default = _default;

package/lib/__internal__/date/index.d.ts

@@ -1 +0,0 @@
-export { "/home/runner/work/carbon/carbon/src/__internal__/date/date" as default } from "./date";

package/lib/__spec_helper__/mock-date-helper.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/__spec_helper__/mock-date-helper.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _moment = _interopRequireDefault(require("moment"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Replaces today date with specified in the argument of the "set" method.
- * Ensures that the UTC time is returned regardless of the local time.
- */
-jest.mock("../__internal__/date", () => {
-  const _DateHelper = jest.requireActual("../__internal__/date");
-
-  return {
-    __esModule: true,
-    default: (() => {
-      const mockTodayDate = "1-1-2019";
-      const isoDateFormat = "YYYY-MM-DD";
-      const MockedDateHelper = { ..._DateHelper.default
-      };
-
-      MockedDateHelper._parseDate = (value, options) => _DateHelper.default._parseDate(value, options).utc();
-
-      MockedDateHelper.stringToDate = value => (0, _moment.default)(value).utc().toDate();
-
-      MockedDateHelper.todayFormatted = (format = isoDateFormat) => {
-        return (0, _moment.default)(mockTodayDate).utc().format(format);
-      };
-
-      MockedDateHelper.formatDateString = (value, formatTo = isoDateFormat) => {
-        return (0, _moment.default)(new Date(value).getTime()).utc().format(formatTo);
-      };
-
-      return MockedDateHelper;
-    })()
-  };
-});

package/lib/components/date/date-picker.component.d.ts

@@ -1,22 +0,0 @@
-export default DatePicker;
-declare function DatePicker({ inputElement, inputDate, handleDateSelect, minDate, maxDate, selectedDate, disablePortal, }: {
-    inputElement: any;
-    inputDate: any;
-    handleDateSelect: any;
-    minDate: any;
-    maxDate: any;
-    selectedDate: any;
-    disablePortal: any;
-}): JSX.Element;
-declare namespace DatePicker {
-    namespace propTypes {
-        const minDate: PropTypes.Requireable<string>;
-        const maxDate: PropTypes.Requireable<string>;
-        const disablePortal: PropTypes.Requireable<boolean>;
-        const inputDate: PropTypes.Requireable<string>;
-        const inputElement: PropTypes.Validator<object>;
-        const selectedDate: PropTypes.Requireable<string | object>;
-        const handleDateSelect: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import PropTypes from "prop-types";

package/lib/components/date/date-picker.component.js

@@ -1,218 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _moment = _interopRequireDefault(require("react-day-picker/moment"));
-
-var _reactDayPicker = _interopRequireDefault(require("react-day-picker"));
-
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
-var _popover = _interopRequireDefault(require("../../__internal__/popover"));
-
-var _date = _interopRequireDefault(require("../../__internal__/date"));
-
-var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
-
-var _navbar = _interopRequireDefault(require("./navbar"));
-
-var _weekday = _interopRequireDefault(require("./weekday"));
-
-var _dayPicker = _interopRequireDefault(require("./day-picker.style"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const DatePicker = ({
-  inputElement,
-  inputDate,
-  handleDateSelect,
-  minDate,
-  maxDate,
-  selectedDate,
-  disablePortal
-}) => {
-  const l = (0, _useLocale.default)();
-  const locale = l.locale();
-  const formats = l.date.formats.inputs();
-  const format = l.date.formats.javascript();
-  const [lastValidDate, setLastValidDate] = (0, _react.useState)(_date.default.formatDateString(new Date().toString()));
-  const [localeData, setLocaleData] = (0, _react.useState)({
-    locale,
-    formats,
-    format
-  });
-  const ref = (0, _react.useRef)(null);
-  const popoverModifiers = (0, _react.useMemo)(() => [{
-    name: "offset",
-    options: {
-      offset: [0, 3]
-    }
-  }, {
-    name: "preventOverflow",
-    options: {
-      mainAxis: false
-    }
-  }], []);
-  (0, _react.useEffect)(() => {
-    if (localeData.format === format && (0, _isEqual.default)(localeData.formats, formats) && localeData.locale === locale) {
-      return;
-    }
-
-    setLocaleData({
-      locale,
-      formats,
-      format
-    });
-  }, [localeData.format, localeData.formats, localeData.locale, format, formats, locale]);
-  (0, _react.useEffect)(() => {
-    let monthDate;
-
-    const isoFormattedInputDate = _date.default.formatValue({
-      value: inputDate,
-      ...localeData
-    });
-
-    if (isDateValid(isoFormattedInputDate)) {
-      monthDate = new Date(isoFormattedInputDate);
-      setLastValidDate(isoFormattedInputDate);
-    } else {
-      monthDate = new Date(lastValidDate);
-    }
-
-    ref.current.showMonth(monthDate);
-  }, [inputDate, lastValidDate, localeData]);
-
-  const handleDayClick = (date, modifiers) => {
-    if (!modifiers.disabled) {
-      handleDateSelect(date);
-    }
-  };
-
-  const datePickerProps = {
-    disabledDays: getDisabledDays(minDate, maxDate, localeData),
-    enableOutsideDays: true,
-    fixedWeeks: true,
-    initialMonth: selectedDate || undefined,
-    inline: true,
-    locale: l.locale(),
-    localeUtils: _moment.default,
-    navbarElement: /*#__PURE__*/_react.default.createElement(_navbar.default, null),
-    onDayClick: handleDayClick,
-    selectedDays: selectedDate || undefined,
-    weekdayElement: weekdayElementProps => {
-      const {
-        className,
-        weekday,
-        localeUtils
-      } = weekdayElementProps;
-      const weekdayLong = localeUtils.formatWeekdayLong(weekday, l.locale());
-      const weekdayShort = localeUtils.formatWeekdayShort(weekday, l.locale());
-      return /*#__PURE__*/_react.default.createElement(_weekday.default, {
-        className: className,
-        title: weekdayLong
-      }, weekdayShort);
-    }
-  };
-  return /*#__PURE__*/_react.default.createElement(_popover.default, {
-    placement: "bottom-start",
-    reference: inputElement,
-    modifiers: popoverModifiers,
-    disablePortal: disablePortal
-  }, /*#__PURE__*/_react.default.createElement(_dayPicker.default, null, /*#__PURE__*/_react.default.createElement(_reactDayPicker.default, _extends({}, datePickerProps, {
-    ref: ref
-  }))));
-};
-
-DatePicker.propTypes = {
-  /** Minimum possible date */
-  minDate: _propTypes.default.string,
-
-  /** Maximum possible date */
-  maxDate: _propTypes.default.string,
-
-  /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
-  disablePortal: _propTypes.default.bool,
-
-  /* The string value in the date input */
-  inputDate: _propTypes.default.string,
-
-  /** Element that the DatePicker will be displayed under */
-  inputElement: _propTypes.default.object.isRequired,
-
-  /** Currently selected date */
-  selectedDate: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
-
-  /** Callback to set selected date */
-  handleDateSelect: _propTypes.default.func
-};
-/**
- * Checks if date can be transformed to native js Date object
- */
-
-function isDateValid(string) {
-  const date = new Date(string);
-  return date.toString() !== "Invalid Date";
-}
-/**
- * Returns the disabled array of days specified by props maxDate and minDate
- */
-
-
-function getDisabledDays(minDate, maxDate, {
-  locale,
-  formats,
-  format
-}) {
-  const days = [];
-
-  if (!minDate && !maxDate) {
-    return null;
-  }
-
-  if (minDate && checkIsoFormatAndLength(minDate, locale, formats, format)) {
-    days.push({
-      before: _date.default.stringToDate(minDate)
-    });
-  }
-
-  if (maxDate && checkIsoFormatAndLength(maxDate, locale, formats, format)) {
-    days.push({
-      after: _date.default.stringToDate(maxDate)
-    });
-  }
-
-  return days;
-}
-
-function checkIsoFormatAndLength(date, locale, formats, format) {
-  if (date.length !== 10 || !_date.default.isValidDate({
-    value: date,
-    options: {
-      defaultValue: "YYYY-MM-DD"
-    },
-    locale,
-    formats,
-    format
-  })) {
-    return false;
-  }
-
-  const array = date.split("-");
-  return array.length === 3 && array[0].length === 4 && array[1].length === 2 && array[2].length === 2;
-}
-
-var _default = DatePicker;
-exports.default = _default;