carbon-react 103.2.0 → 104.2.0

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/__internal__/tooltip-provider/index.d.ts

@@ -14,6 +14,7 @@ export interface TooltipProviderProps {
   focusable?: boolean;
   tooltipVisible?: boolean;
   disabled?: boolean;
+  target?: Element;
 }
 
 declare const ToolbarContext: React.Context<ToolbarContextProps>;

package/lib/__internal__/tooltip-provider/index.js

@@ -21,14 +21,16 @@ const TooltipProvider = ({
   helpAriaLabel,
   focusable = true,
   tooltipVisible,
-  disabled = false
+  disabled = false,
+  target
 }) => /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
   value: {
     tooltipPosition,
     helpAriaLabel,
     focusable,
     tooltipVisible,
-    disabled
+    disabled,
+    target
   }
 }, children);
 
@@ -39,5 +41,6 @@ TooltipProvider.propTypes = {
   helpAriaLabel: _propTypes.default.string,
   focusable: _propTypes.default.bool,
   tooltipVisible: _propTypes.default.bool,
-  disabled: _propTypes.default.bool
+  disabled: _propTypes.default.bool,
+  target: _propTypes.default.instanceOf(Element)
 };

package/lib/components/button/button.component.d.ts

@@ -1,6 +1,26 @@
 export default Button;
 export const ButtonWithForwardRef: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-declare function Button(props: any): JSX.Element;
+declare function Button({ size, subtext, as, children, forwardRef, "aria-label": ariaLabel, disabled, buttonType: buttonTypeProp, iconType, iconPosition, href, m, px, noWrap, target, rel, iconTooltipMessage, iconTooltipPosition, ...rest }: {
+    [x: string]: any;
+    size: any;
+    subtext: any;
+    as: any;
+    children: any;
+    forwardRef: any;
+    "aria-label": any;
+    disabled: any;
+    buttonType: any;
+    iconType: any;
+    iconPosition: any;
+    href: any;
+    m?: number | undefined;
+    px: any;
+    noWrap: any;
+    target: any;
+    rel: any;
+    iconTooltipMessage: any;
+    iconTooltipPosition: any;
+}): JSX.Element;
 declare namespace Button {
     const propTypes: any;
     namespace defaultProps {

package/lib/components/button/button.component.js

@@ -17,6 +17,8 @@ var _button = _interopRequireWildcard(require("./button.style"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
+var _tooltipProvider = require("../../__internal__/tooltip-provider");
+
 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; }
@@ -35,7 +37,8 @@ function renderChildren({
   disabled,
   buttonType,
   iconTooltipMessage,
-  iconTooltipPosition
+  iconTooltipPosition,
+  tooltipTarget
   /* eslint-enable */
 
 }) {
@@ -57,43 +60,54 @@ function renderChildren({
     "data-element": "main-text"
   }, children), size === "large" && /*#__PURE__*/_react.default.createElement(_button.StyledButtonSubtext, {
     "data-element": "subtext"
-  }, subtext)), iconType && !children && /*#__PURE__*/_react.default.createElement(_icon.default, _extends({}, iconProps, {
+  }, subtext)), iconType && !children && /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    disabled: disabled,
+    focusable: false,
+    target: tooltipTarget
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, _extends({}, iconProps, {
     tooltipMessage: iconTooltipMessage,
     tooltipPosition: iconTooltipPosition
-  })), iconType && iconPosition === "after" && children && /*#__PURE__*/_react.default.createElement(_icon.default, iconProps));
+  }))), iconType && iconPosition === "after" && children && /*#__PURE__*/_react.default.createElement(_icon.default, iconProps));
 }
 
-const renderStyledButton = buttonProps => {
-  const {
-    "aria-label": ariaLabel,
-    disabled,
-    buttonType,
-    iconType,
-    href,
-    ref,
-    m = 0,
-    px,
-    size,
-    noWrap,
-    tooltipMessage,
-    target,
-    rel,
-    ...rest
-  } = buttonProps;
+const Button = ({
+  size,
+  subtext,
+  as,
+  children,
+  forwardRef,
+  "aria-label": ariaLabel,
+  disabled,
+  buttonType: buttonTypeProp,
+  iconType,
+  iconPosition,
+  href,
+  m = 0,
+  px,
+  noWrap,
+  target,
+  rel,
+  iconTooltipMessage,
+  iconTooltipPosition,
+  ...rest
+}) => {
+  const [internalRef, setInternalRef] = (0, _react.useState)(null);
+  const buttonType = buttonTypeProp || as;
+
+  if (subtext.length > 0 && size !== "large") {
+    throw new Error("subtext prop has no effect unless the button is large");
+  }
+
   let paddingX;
 
   const handleLinkKeyDown = event => {
     // If space key click link
     if (event.key === " ") {
       event.preventDefault();
-      ref.current.click();
+      internalRef.click();
     }
   };
 
-  if (href) {
-    rest.href = href;
-  }
-
   switch (size) {
     case "small":
       paddingX = 2;
@@ -108,7 +122,7 @@ const renderStyledButton = buttonProps => {
   }
 
   return /*#__PURE__*/_react.default.createElement(_button.default, _extends({
-    "aria-label": !rest.children && iconType ? ariaLabel || iconType : undefined,
+    "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
     as: !disabled && href ? "a" : "button",
     onKeyDown: href && handleLinkKeyDown,
     draggable: false,
@@ -121,36 +135,33 @@ const renderStyledButton = buttonProps => {
     px: px ?? paddingX,
     m: m,
     noWrap: noWrap,
-    iconOnly: !rest.children && iconType,
+    iconOnly: !children && iconType,
+    iconPosition: iconPosition,
     target: target,
     rel: rel
-  }, (0, _tags.default)("button", buttonProps), rest, {
-    ref: ref
-  }), renderChildren(buttonProps));
-};
-
-const Button = props => {
-  const {
+  }, (0, _tags.default)("button", rest), rest, href && {
+    href
+  }, {
+    ref: reference => {
+      if (reference) {
+        setInternalRef(reference);
+        if (!forwardRef) return;
+        if (typeof forwardRef === "object") forwardRef.current = reference;
+        if (typeof forwardRef === "function") forwardRef(reference);
+      }
+    }
+  }), renderChildren({
+    iconType,
+    iconPosition,
     size,
-    subtext
-  } = props;
-  const linkRef = (0, _react.useRef)(null);
-  const {
-    as,
+    subtext,
+    children,
+    disabled,
     buttonType,
-    forwardRef,
-    ...rest
-  } = props;
-  const propsWithoutAs = { ...rest,
-    buttonType: buttonType || as,
-    ref: forwardRef || linkRef
-  };
-
-  if (subtext.length > 0 && size !== "large") {
-    throw new Error("subtext prop has no effect unless the button is large");
-  }
-
-  return renderStyledButton(propsWithoutAs);
+    iconTooltipMessage,
+    iconTooltipPosition,
+    tooltipTarget: internalRef
+  }));
 };
 
 Button.propTypes = {

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;