carbon-react 103.1.0 → 104.1.1

package/lib/__internal__/popover/popover.component.js

@@ -13,11 +13,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _core = require("@popperjs/core");
 
-var _styledComponents = require("styled-components");
-
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 
-var _carbonScopedTokensProvider = require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component");
+var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -34,11 +32,9 @@ const Popover = ({
   modifiers
 }) => {
   const elementDOM = (0, _react.useRef)();
-  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
 
   if (!elementDOM.current && !disablePortal) {
     elementDOM.current = document.createElement("div");
-    elementDOM.current.classList.add((0, _carbonScopedTokensProvider.tokensClassName)(theme === null || theme === void 0 ? void 0 : theme.name));
     document.body.appendChild(elementDOM.current);
   }
 
@@ -98,7 +94,7 @@ const Popover = ({
     return content;
   }
 
-  return /*#__PURE__*/_reactDom.default.createPortal(content, elementDOM.current);
+  return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, content), elementDOM.current);
 };
 
 Popover.propTypes = {

package/lib/components/badge/badge.style.d.ts

@@ -1,5 +1,5 @@
 export const StyledBadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledButton: import("styled-components").StyledComponent<typeof Button, any, import("../button").ButtonDefaultProps, never>;
+export const StyledButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
 export const StyledCrossIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
 export const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
 import Button from "../button";

package/lib/components/badge/badge.style.js

@@ -37,9 +37,7 @@ const StyledButton = (0, _styledComponents.default)(_button.default)`
   top: -11px;
   right: -11px;
   margin-right: 0;
-  background: ${({
-  theme
-}) => theme.colors.white};
+  background: var(--colorsActionMajorYang100);
 
   ::-moz-focus-inner {
     border: none;
@@ -47,9 +45,7 @@ const StyledButton = (0, _styledComponents.default)(_button.default)`
 
   &:hover,
   &:focus {
-    background: ${({
-  theme
-}) => theme.colors.primary};
+    background: var(--colorsActionMajor500);
     border: none;
     ${StyledCounter} {
       display: none;
@@ -63,9 +59,7 @@ const StyledButton = (0, _styledComponents.default)(_button.default)`
 
       :before {
         font-size: 16px;
-        color: ${({
-  theme
-}) => theme.colors.white};
+        color: var(--colorsActionMajorYang100);
       }
     }
   }

package/lib/components/date/__internal__/date-formats/index.d.ts

@@ -0,0 +1,8 @@
+interface LocaleFormats {
+  formats: string[];
+  format: string;
+}
+
+declare function getFormatData({ code: string }): LocaleFormats;
+
+export default getFormatData;

package/lib/components/date/__internal__/date-formats/index.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// The order of this array is important
+const EU_FORMATS = ["d M yyyy", "dd M yyyy", "d MM yyyy", "dd MM yyyy", "d M yy", "dd M yy", "d MM yy", "dd MM yy", "d", "d M", "dd", "d MM", "dd M", "dd MM"]; // The order of this array is important
+
+const NA_FORMATS = ["M", "M d", "MM", "M dd", "MM d", "MM dd", "M d yy", "MM d yy", "M dd yy", "MM dd yy", "M d yyyy", "MM d yyyy", "M dd yyyy", "MM dd yyyy"];
+const SEPARATORS = ["", ".", ",", "-", "/", ":"];
+
+const generateFormats = formatArray => formatArray.reduce((arr, formatString) => {
+  const array = [...arr, formatString];
+
+  if (formatString.includes(" ")) {
+    SEPARATORS.forEach(char => array.push(formatString.replace(/ /g, char)));
+  }
+
+  return array;
+}, []);
+
+const getFormatData = ({
+  code
+}) => {
+  if (["en-CA", "en-US"].includes(code)) {
+    return {
+      format: "MM/dd/yyyy",
+      formats: generateFormats(NA_FORMATS)
+    };
+  }
+
+  if (code === "de") {
+    return {
+      format: "dd.MM.yyyy",
+      formats: generateFormats(EU_FORMATS)
+    };
+  }
+
+  return {
+    format: "dd/MM/yyyy",
+    formats: generateFormats(EU_FORMATS)
+  };
+};
+
+var _default = getFormatData;
+exports.default = _default;

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

@@ -0,0 +1,3 @@
+export default DatePicker;
+declare const DatePicker: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

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

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDayPicker = _interopRequireDefault(require("react-day-picker"));
+
+var _utils = require("../utils");
+
+var _popover = _interopRequireDefault(require("../../../../__internal__/popover"));
+
+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 = /*#__PURE__*/_react.default.forwardRef(({
+  inputElement,
+  minDate,
+  maxDate,
+  selectedDays,
+  disablePortal,
+  onDayClick,
+  pickerMouseDown,
+  pickerProps
+}, ref) => {
+  const l = (0, _useLocale.default)();
+  const {
+    localize,
+    options
+  } = l.date.dateFnsLocale();
+  const {
+    weekStartsOn
+  } = options;
+  const monthsLong = Array.from({
+    length: 12
+  }).map((_, i) => localize.month(i));
+  const monthsShort = Array.from({
+    length: 12
+  }).map((_, i) => localize.month(i, {
+    width: "abbreviated"
+  }).substring(0, 3));
+  const weekdaysLong = Array.from({
+    length: 7
+  }).map((_, i) => localize.day(i));
+  const weekdaysShort = Array.from({
+    length: 7
+  }).map((_, i) => localize.day(i, l.locale() === "de" ? {} : {
+    width: "abbreviated"
+  }).substring(0, 3));
+  const popoverModifiers = (0, _react.useMemo)(() => [{
+    name: "offset",
+    options: {
+      offset: [0, 3]
+    }
+  }, {
+    name: "preventOverflow",
+    options: {
+      mainAxis: false
+    }
+  }], []);
+
+  const handleDayClick = (date, {
+    disabled
+  }, ev) => {
+    if (!disabled) {
+      onDayClick(date, ev);
+    }
+  };
+
+  const formatDay = date => `${weekdaysShort[date.getDay()]} ${date.getDate()} ${monthsShort[date.getMonth()]} ${date.getFullYear()}`;
+
+  return /*#__PURE__*/_react.default.createElement(_popover.default, {
+    placement: "bottom-start",
+    reference: inputElement,
+    modifiers: popoverModifiers,
+    disablePortal: disablePortal
+  }, /*#__PURE__*/_react.default.createElement(_dayPicker.default, {
+    ref: ref,
+    onMouseDown: pickerMouseDown
+  }, /*#__PURE__*/_react.default.createElement(_reactDayPicker.default, _extends({
+    month: selectedDays,
+    months: monthsLong,
+    firstDayOfWeek: weekStartsOn,
+    onDayClick: handleDayClick,
+    selectedDays: selectedDays,
+    date: selectedDays,
+    weekdayElement: weekdayElementProps => {
+      const {
+        className,
+        weekday
+      } = weekdayElementProps;
+      return /*#__PURE__*/_react.default.createElement(_weekday.default, {
+        className: className,
+        title: weekdaysLong[weekday]
+      }, weekdaysShort[weekday]);
+    },
+    navbarElement: /*#__PURE__*/_react.default.createElement(_navbar.default, null),
+    enableOutsideDays: true,
+    fixedWeeks: true,
+    initialMonth: selectedDays || undefined,
+    disabledDays: (0, _utils.getDisabledDays)(minDate, maxDate),
+    inline: true,
+    locale: l.locale(),
+    localeUtils: {
+      formatDay
+    }
+  }, pickerProps))));
+});
+
+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,
+
+  /** Element that the DatePicker will be displayed under */
+  inputElement: _propTypes.default.object.isRequired,
+
+  /** Currently selected date */
+  selectedDays: _propTypes.default.instanceOf(Date),
+
+  /** Callback to set selected date */
+  onDayClick: _propTypes.default.func,
+
+  /** Pass any props that match the DayPickerProps interface to override default behaviors */
+  pickerProps: _propTypes.default.object,
+
+  /** Callback to handle mousedown event on picker */
+  pickerMouseDown: _propTypes.default.func
+};
+var _default = DatePicker;
+exports.default = _default;

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { DayPickerProps } from "react-day-picker";
+
+export interface DatePickerProps extends Pick<DayPickerProps, "onDayClick"> {
+  /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
+  disablePortal?: boolean;
+  /** Minimum possible date YYYY-MM-DD */
+  minDate?: string;
+  /** Maximum possible date YYYY-MM-DD */
+  maxDate?: string;
+  /** Pass any props that match the DayPickerProps interface to override default behaviors */
+  pickerProps?: DayPickerProps;
+  /** Element that the DatePicker will be displayed under */
+  inputElement: React.RefObject<HTMLElement>;
+  /** Currently selected date */
+  selectedDays?: Date;
+  /** Callback to handle mousedown event on picker container */
+  pickerMouseDown?: () => void;
+}
+
+declare function DatePicker(
+  props: DatePickerProps & React.RefAttributes<HTMLElement>
+): JSX.Element;
+
+export default DatePicker;

package/lib/components/date/{day-picker.style.js → __internal__/date-picker/day-picker.style.js}

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
+var _base = _interopRequireDefault(require("../../../../style/themes/base"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -81,6 +81,10 @@ const addReactDayPickerStyles = () => `
 
   .DayPicker-Weekday {
     display: table-cell;
+
+    abbr {
+      text-decoration: none;
+    }
   }
 
   .DayPicker-Body {

package/lib/components/date/__internal__/date-picker/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./date-picker.component";

package/lib/{__internal__/date → components/date/__internal__/date-picker}/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _date.default;
+    return _datePicker.default;
   }
 });
 
-var _date = _interopRequireDefault(require("./date"));
+var _datePicker = _interopRequireDefault(require("./date-picker.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/date/{navbar → __internal__/navbar}/button.style.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
+var _base = _interopRequireDefault(require("../../../../style/themes/base"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/lib/components/date/{navbar → __internal__/navbar}/navbar.component.js

@@ -13,7 +13,7 @@ var _button = _interopRequireDefault(require("./button.style"));
 
 var _navbar = _interopRequireDefault(require("./navbar.style"));
 
-var _icon = _interopRequireDefault(require("../../icon"));
+var _icon = _interopRequireDefault(require("../../../icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -21,17 +21,15 @@ const Navbar = ({
   onPreviousClick,
   onNextClick,
   ...props
-}) => {
-  return /*#__PURE__*/_react.default.createElement(_navbar.default, props, /*#__PURE__*/_react.default.createElement(_button.default, {
-    onClick: () => onPreviousClick()
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: "chevron_left"
-  })), /*#__PURE__*/_react.default.createElement(_button.default, {
-    onClick: () => onNextClick()
-  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: "chevron_right"
-  })));
-};
+}) => /*#__PURE__*/_react.default.createElement(_navbar.default, props, /*#__PURE__*/_react.default.createElement(_button.default, {
+  onClick: () => onPreviousClick()
+}, /*#__PURE__*/_react.default.createElement(_icon.default, {
+  type: "chevron_left"
+})), /*#__PURE__*/_react.default.createElement(_button.default, {
+  onClick: () => onNextClick()
+}, /*#__PURE__*/_react.default.createElement(_icon.default, {
+  type: "chevron_right"
+})));
 
 Navbar.propTypes = {
   onPreviousClick: _propTypes.default.func,

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

@@ -0,0 +1,8 @@
+export interface NavbarProps {
+  onPreviousClick?: () => void;
+  onNextClick?: () => void;
+}
+
+declare function Navbar(props: NavbarProps): JSX.Element;
+
+export default Navbar;

package/lib/components/date/{navbar → __internal__/navbar}/navbar.style.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../../style/themes/base"));
+var _base = _interopRequireDefault(require("../../../../style/themes/base"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

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

@@ -0,0 +1,19 @@
+export function parseDate(formatString: any, valueString: any): "" | Date;
+export function formatToISO(formatString: any, valueString: any): string | null;
+export function formattedValue(formatString: any, value: any): string;
+export function isDateValid(date: any): any;
+export function additionalYears(formatString: any, value: any): any[];
+export function findMatchedFormatAndValue(valueString: any, formats: any): any;
+export function parseISODate(value: any): Date;
+/**
+ * Returns the disabled array of days specified by props maxDate and minDate
+ */
+export function getDisabledDays(minDate: any, maxDate: any): ({
+    before: Date;
+    after?: undefined;
+} | {
+    after: Date;
+    before?: undefined;
+})[] | null;
+export function checkISOFormatAndLength(value: any): boolean;
+export function getSeparator(value: any): string;

package/lib/components/date/__internal__/utils.js

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseDate = parseDate;
+exports.formatToISO = formatToISO;
+exports.formattedValue = formattedValue;
+exports.isDateValid = isDateValid;
+exports.additionalYears = additionalYears;
+exports.findMatchedFormatAndValue = findMatchedFormatAndValue;
+exports.parseISODate = parseISODate;
+exports.getDisabledDays = getDisabledDays;
+exports.checkISOFormatAndLength = checkISOFormatAndLength;
+exports.getSeparator = void 0;
+
+var _fp = require("date-fns/fp");
+
+function parseDate(formatString, valueString) {
+  if (!valueString || !formatString) return "";
+  return (0, _fp.parse)(new Date(), formatString, valueString);
+}
+
+function formatToISO(formatString, valueString) {
+  const dateValue = parseDate(formatString, valueString);
+
+  if (!isDateValid(dateValue)) {
+    return null;
+  }
+
+  return (0, _fp.formatISO)(dateValue).split("T")[0];
+}
+
+function formattedValue(formatString, value) {
+  return (0, _fp.format)(formatString, value);
+}
+
+function isDateValid(date) {
+  return date && date.toString() !== "Invalid Date";
+}
+
+function hasMatchedFormat(formatString, valueString) {
+  return formatString.length === valueString.length && (0, _fp.isMatch)(formatString, valueString);
+}
+
+function additionalYears(formatString, value) {
+  if (formatString.split("y").length - 1 !== 2) {
+    return [formatString, value];
+  }
+
+  let year = value.substring(value.length - 2);
+  const dayAndMonth = value.substring(0, value.length - 2);
+  const yearAsNumber = Number(year);
+
+  if (yearAsNumber < 69) {
+    year = String(2000 + yearAsNumber);
+  } else {
+    year = String(1900 + yearAsNumber);
+  }
+
+  return [`${formatString.substring(0, formatString.length - 2)}yyyy`, `${dayAndMonth}${year}`];
+}
+
+function makeSeparatedValues(arr, str) {
+  return arr.map((_, i) => str.substring(arr[i], arr[i + 1]));
+}
+
+function checkForCompleteMatch(formatArray, valueArray) {
+  return formatArray.every((formatString, i) => hasMatchedFormat(formatString, valueArray[i]));
+}
+
+function findMatchWithNoSeparators(valueString, formatString) {
+  const indexArray = formatString.split("").reduce((arr, char, index) => {
+    if (index === 0 || char !== formatString[index - 1]) {
+      return [...arr, index];
+    }
+
+    return arr;
+  }, []);
+  const formatArray = makeSeparatedValues(indexArray, formatString);
+  const valueArray = makeSeparatedValues(indexArray, valueString);
+
+  if (checkForCompleteMatch(formatArray, valueArray)) {
+    return [formatArray.join("."), valueArray.join(".")];
+  }
+
+  return null;
+}
+
+function findMatchWithSeparators(valueString, formatString, separator) {
+  const formatArray = formatString.split(separator);
+  const valueArray = valueString.split(separator);
+
+  if (checkForCompleteMatch(formatArray, valueArray)) {
+    return [formatString, valueString];
+  }
+
+  return null;
+}
+
+const getSeparator = value => {
+  const separator = ["", ".", ",", "-", "/", " ", ":"].slice(1).find(char => value.includes(char));
+  return separator || "";
+};
+
+exports.getSeparator = getSeparator;
+
+function findMatchedFormatAndValue(valueString, formats) {
+  if (!valueString) {
+    return ["", ""];
+  }
+
+  const valueSeparator = getSeparator(valueString);
+  const filteredFormats = formats.filter(formatString => formatString.length === valueString.length && getSeparator(formatString) === valueSeparator);
+  const matchedFormatAndValue = filteredFormats.reduce((acc, formatString) => {
+    const formatSeparator = getSeparator(formatString);
+
+    if (valueSeparator === "" && formatSeparator === "") {
+      // This check is added as there is a bug in date-fns https://github.com/date-fns/date-fns/issues/2785
+      // it incorrectly matches or fails to parse valid dates with no separators
+      const match = findMatchWithNoSeparators(valueString, formatString);
+
+      if (match) {
+        return match;
+      }
+    }
+
+    if (valueSeparator && formatSeparator && valueSeparator === formatSeparator) {
+      const match = findMatchWithSeparators(valueString, formatString, valueSeparator);
+
+      if (match) {
+        return match;
+      }
+    }
+
+    return acc;
+  }, []);
+  return matchedFormatAndValue;
+}
+
+function parseISODate(value) {
+  return (0, _fp.parseISO)(value);
+}
+/**
+ * Returns the disabled array of days specified by props maxDate and minDate
+ */
+
+
+function getDisabledDays(minDate, maxDate) {
+  const days = [];
+
+  if (!minDate && !maxDate) {
+    return null;
+  }
+
+  if (checkISOFormatAndLength(minDate)) {
+    days.push({
+      before: parseISODate(minDate)
+    });
+  }
+
+  if (checkISOFormatAndLength(maxDate)) {
+    days.push({
+      after: parseISODate(maxDate)
+    });
+  }
+
+  return days;
+}
+
+function checkISOFormatAndLength(value) {
+  if (!value || value.length !== 10 || !isValidISODate(value)) {
+    return false;
+  }
+
+  const array = value.split("-");
+  return array.length === 3 && array[0].length === 4 && array[1].length === 2 && array[2].length === 2;
+}
+
+function isValidISODate(dateString) {
+  return parseISODate(dateString).toString() !== "Invalid Date";
+}

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+export interface WeekdayProps {
+  className?: string;
+  title?: string;
+  children?: React.ReactNode;
+}
+
+declare function Weekday(
+  props: WeekdayProps & React.RefAttributes<HTMLElement>
+): JSX.Element;
+
+export default Weekday;