carbon-react 118.5.1 → 118.6.0

package/esm/components/date/date.component.js

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import React, { useContext, useEffect, useMemo, useRef, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -17,35 +16,36 @@ import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 let deprecateInputRefWarnTriggered = false;
-const DateInput = /*#__PURE__*/React.forwardRef(({
-  adaptiveLabelBreakpoint,
-  allowEmptyValue,
-  autoFocus,
-  "data-component": dataComponent,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  disabled,
-  disablePortal = false,
-  helpAriaLabel,
-  labelInline,
-  minDate,
-  maxDate,
-  onBlur,
-  onChange,
-  onClick,
-  onFocus,
-  onKeyDown,
-  pickerProps = {},
-  readOnly,
-  size = "medium",
-  tooltipPosition,
-  value,
-  inputRef,
-  inputWidth,
-  labelWidth,
-  maxWidth,
-  ...rest
-}, ref) => {
+const DateInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    adaptiveLabelBreakpoint,
+    allowEmptyValue,
+    autoFocus,
+    "data-component": dataComponent,
+    "data-element": dataElement,
+    "data-role": dataRole,
+    disabled,
+    disablePortal = false,
+    helpAriaLabel,
+    labelInline,
+    minDate,
+    maxDate,
+    onBlur,
+    onChange,
+    onClick,
+    onFocus,
+    onKeyDown,
+    pickerProps = {},
+    readOnly,
+    size = "medium",
+    tooltipPosition,
+    value,
+    inputRef,
+    inputWidth,
+    labelWidth,
+    maxWidth,
+    ...rest
+  } = _ref;
   const wrapperRef = useRef();
   const parentRef = useRef();
   const internalInputRef = useRef();
@@ -64,18 +64,15 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     inputRefMap,
     setInputRefMap
   } = useContext(DateRangeContext);
-  const inputName = dataElement === null || dataElement === void 0 ? void 0 : dataElement.split("-")[0];
+  const inputName = dataElement?.split("-")[0];
   const [open, setOpen] = useState(false);
   const [selectedDays, setSelectedDays] = useState(checkISOFormatAndLength(value) ? parseISODate(value) : parseDate(format, value));
   const isInitialValue = useRef(true);
-
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
     Logger.deprecate("The `inputRef` prop in `DateInput` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
-
   const computeInvalidRawValue = inputValue => allowEmptyValue && !inputValue.length ? inputValue : null;
-
   const buildCustomEvent = ev => {
     const {
       id,
@@ -84,7 +81,8 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(ev.target.value, formats);
     const formattedValueString = ev.type === "blur" ? formattedValue(format, selectedDays) : ev.target.value;
     const rawValue = isDateValid(parseDate(matchedFormat, matchedValue)) ? formatToISO(...additionalYears(matchedFormat, matchedValue)) : computeInvalidRawValue(ev.target.value);
-    ev.target = { ...(name && {
+    ev.target = {
+      ...(name && {
         name
       }),
       ...(id && {
@@ -97,7 +95,6 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     };
     return ev;
   };
-
   const handleClickAway = () => {
     if (open) {
       alreadyFocused.current = true;
@@ -108,44 +105,36 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
       alreadyFocused.current = false;
     }
   };
-
   const handleClickInside = useClickAwayListener(handleClickAway, "mousedown");
-
   const handleChange = ev => {
     isInitialValue.current = false;
     onChange(buildCustomEvent(ev));
   };
-
   const focusInput = () => {
-    var _internalInputRef$cur;
-
     focusedViaPicker.current = true;
-    (_internalInputRef$cur = internalInputRef.current) === null || _internalInputRef$cur === void 0 ? void 0 : _internalInputRef$cur.focus();
+    internalInputRef.current?.focus();
   };
-
   const handleDayClick = (day, ev) => {
     setSelectedDays(day);
-    onChange(buildCustomEvent({ ...ev,
-      target: { ...ev.target,
+    onChange(buildCustomEvent({
+      ...ev,
+      target: {
+        ...ev.target,
         value: formattedValue(format, day)
       }
     }));
     focusInput();
     setOpen(false);
   };
-
   const handleBlur = ev => {
     if (disabled || readOnly) {
       return;
     }
-
     let event;
-
     if (isDateValid(selectedDays)) {
       event = buildCustomEvent(ev);
       const currentValue = checkISOFormatAndLength(value) ? formattedValue(format, parseISODate(value)) : value;
       const [, matchedValue] = findMatchedFormatAndValue(currentValue, formats);
-
       if (formattedValue(format, selectedDays) !== matchedValue) {
         onChange(event);
       }
@@ -154,7 +143,8 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
         id,
         name
       } = ev.target;
-      ev.target = { ...(name && {
+      ev.target = {
+        ...(name && {
           name
         }),
         ...(id && {
@@ -167,66 +157,52 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
       };
       event = ev;
     }
-
     if (isBlurBlocked.current) {
       return;
     }
-
     if (onBlur) {
       onBlur(event);
     }
   };
-
   const handleFocus = ev => {
     if (disabled || readOnly) {
       return;
     }
-
     isBlurBlocked.current = false;
-
     if (!open && !alreadyFocused.current) {
       setOpen(true);
     } else {
       alreadyFocused.current = false;
     }
-
     if (onFocus) {
       onFocus(ev);
     }
   };
-
   const handleKeyDown = ev => {
     if (onKeyDown) {
       onKeyDown(ev);
     }
-
     if (Events.isTabKey(ev)) {
       setOpen(false);
       alreadyFocused.current = false;
     }
   };
-
   const handleClick = ev => {
     if (disabled || readOnly) {
       return;
     }
-
     if (onClick) {
       onClick(ev);
     }
   };
-
   const handleMouseDown = ev => {
     handleClickInside(ev);
-
     if (disabled || readOnly) {
       return;
     }
-
     if (setInputRefMap) {
       isBlurBlocked.current = true;
     }
-
     if (ev.target.type === "text" && !open) {
       setOpen(true);
     } else if (ev.target.type !== "text") {
@@ -234,23 +210,17 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
       setOpen(prev => !prev);
     }
   };
-
   const handleIconMouseDown = e => {
     isBlurBlocked.current = true;
     handleMouseDown(e);
   };
-
   const handlePickerMouseDown = ev => {
     isBlurBlocked.current = true;
     handleClickInside(ev);
   };
-
   const assignInput = useCallback(inputElement => {
-    var _inputRefMap$inputNam;
-
     internalInputRef.current = inputElement;
-    parentRef.current = inputElement === null || inputElement === void 0 ? void 0 : inputElement.parentElement;
-
+    parentRef.current = inputElement?.parentElement;
     if (ref) {
       if (typeof ref === "function") {
         ref(inputElement);
@@ -258,8 +228,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
         ref.current = inputElement;
       }
     }
-
-    if (inputRefMap && ((_inputRefMap$inputNam = inputRefMap[inputName]) === null || _inputRefMap$inputNam === void 0 ? void 0 : _inputRefMap$inputNam.setOpen) !== setOpen) {
+    if (inputRefMap && inputRefMap[inputName]?.setOpen !== setOpen) {
       setInputRefMap({
         [inputName]: {
           isBlurBlocked,
@@ -270,7 +239,6 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   }, [inputName, inputRefMap, setInputRefMap, ref]);
   useEffect(() => {
     const [matchedFormat, matchedValue] = findMatchedFormatAndValue(value, formats);
-
     if (matchedFormat && matchedValue && isDateValid(parseDate(matchedFormat, matchedValue))) {
       setSelectedDays(parseDate(...additionalYears(matchedFormat, matchedValue)));
     } else if (checkISOFormatAndLength(value) && isInitialValue.current) {
@@ -279,26 +247,20 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
       setSelectedDays(undefined);
     }
   }, [value, formats]);
-
   const computedValue = () => {
     if (checkISOFormatAndLength(value) && isInitialValue.current) {
       return formattedValue(format, parseISODate(value));
     }
-
     const valueSeparator = getSeparator(value);
     const formatSeparator = getSeparator(format);
-
     const replaceSeparators = () => value.split("").map(char => char === valueSeparator ? formatSeparator : char).join("");
-
     if (isInitialValue.current && valueSeparator !== formatSeparator && isDateValid(parseDate(format, replaceSeparators()))) {
       isInitialValue.current = false;
       const [matchedFormat, matchedValue] = findMatchedFormatAndValue(replaceSeparators(), formats);
       return formattedValue(format, parseDate(...additionalYears(matchedFormat, matchedValue)));
     }
-
     return value;
   };
-
   const marginProps = useFormSpacing(rest);
   return /*#__PURE__*/React.createElement(StyledDateInput, _extends({
     ref: wrapperRef,
@@ -350,29 +312,23 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     open: open
   }));
 });
-DateInput.propTypes = { ...Textbox.propTypes,
+DateInput.propTypes = {
+  ...Textbox.propTypes,
   ...marginPropTypes,
-
   /** Pass any props that match the [DayPickerProps](https://react-day-picker-v7.netlify.app/docs/getting-started/)
    * interface to override default behaviors
    * */
   pickerProps: PropTypes.object,
-
   /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
   disablePortal: PropTypes.bool,
-
   /** Minimum possible date YYYY-MM-DD */
   minDate: PropTypes.string,
-
   /** Maximum possible date YYYY-MM-DD */
   maxDate: PropTypes.string,
-
   /** Specify a callback triggered on change */
   onChange: PropTypes.func.isRequired,
-
   /** The current date string */
   value: PropTypes.string.isRequired,
-
   /** Boolean to allow the input to have an empty value */
   allowEmptyValue: PropTypes.bool
 };

package/esm/components/date/date.style.js

@@ -17,23 +17,28 @@ const StyledDateInput = styled.div`
 
   & ${StyledInputPresentation} {
     flex: none;
-    width: ${({
-  inputWidth,
-  maxWidth,
-  size
-}) => maxWidth || inputWidth ? "" : datePickerWidth[size]};
+    width: ${_ref => {
+  let {
+    inputWidth,
+    maxWidth,
+    size
+  } = _ref;
+  return maxWidth || inputWidth ? "" : datePickerWidth[size];
+}};
 
     ${StyledInput} {
       margin-right: -8px;
     }
   }
 
-  ${({
-  applyDateRangeStyling,
-  maxWidth,
-  size,
-  labelInline
-}) => applyDateRangeStyling && !labelInline && css`
+  ${_ref2 => {
+  let {
+    applyDateRangeStyling,
+    maxWidth,
+    size,
+    labelInline
+  } = _ref2;
+  return applyDateRangeStyling && !labelInline && css`
       ${FieldLineStyle} {
         max-width: ${maxWidth || datePickerWidth[size]}};
       }
@@ -41,7 +46,8 @@ const StyledDateInput = styled.div`
       ${StyledValidationMessage}, ${StyledLabel} {
         overflow-wrap: anywhere;
       }
-    `}
+    `;
+}}
 `;
 StyledDateInput.propTypes = {
   size: PropTypes.oneOf(["small", "medium", "large"])

package/esm/components/date-range/date-range.component.js

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -14,22 +13,22 @@ import usePrevious from "../../hooks/__internal__/usePrevious";
 import getFormatData from "../date/__internal__/date-formats";
 import DateRangeContext from "./date-range.context";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
-
-const DateRange = ({
-  endDateProps = {},
-  id,
-  labelsInline,
-  name,
-  onBlur,
-  onChange,
-  startDateProps = {},
-  tooltipPosition,
-  validationOnLabel,
-  value,
-  startRef,
-  endRef,
-  ...rest
-}) => {
+const DateRange = _ref => {
+  let {
+    endDateProps = {},
+    id,
+    labelsInline,
+    name,
+    onBlur,
+    onChange,
+    startDateProps = {},
+    tooltipPosition,
+    validationOnLabel,
+    value,
+    startRef,
+    endRef,
+    ...rest
+  } = _ref;
   const l = useLocale();
   const {
     dateFnsLocale
@@ -43,7 +42,6 @@ const DateRange = ({
     if (checkISOFormatAndLength(valueString)) {
       return formattedValue(format, parseISODate(valueString));
     }
-
     return valueString;
   }, [format]);
   const getStartDate = useCallback(() => {
@@ -72,11 +70,9 @@ const DateRange = ({
       setOpen: null
     }
   });
-
   function isEmptyValue(allowEmpty, inputValue) {
     return allowEmpty && !inputValue.length;
   }
-
   const [startDateValue, setStartDateValue] = useState({
     formattedValue: getStartDate(),
     rawValue: isEmptyValue(startDateProps.allowEmptyValue, getStartDate()) ? "" : formatToISO(format, getStartDate())
@@ -97,10 +93,8 @@ const DateRange = ({
         rawValue: isEmptyValue(endDateProps.allowEmptyValue, getEndDate()) ? "" : formatToISO(format, getEndDate())
       });
     };
-
-    const hasPreviousValues = previousValue === null || previousValue === void 0 ? void 0 : previousValue.length;
+    const hasPreviousValues = previousValue?.length;
     const hasUpdated = hasPreviousValues && (value[0] !== previousValue[0] || value[1] !== previousValue[1]);
-
     if (hasUpdated) {
       updateValues();
     }
@@ -110,7 +104,8 @@ const DateRange = ({
     const endValue = changedDate === "end" && newValue ? newValue : endDateValue;
     setLastChangedDate(changedDate);
     return {
-      target: { ...(name && {
+      target: {
+        ...(name && {
           name
         }),
         ...(id && {
@@ -120,54 +115,47 @@ const DateRange = ({
       }
     };
   }, [endDateValue, id, name, startDateValue]);
-
   const handleOnChange = (changedDate, ev) => {
     if (changedDate === "start") {
-      setStartDateValue({ ...ev.target.value
+      setStartDateValue({
+        ...ev.target.value
       });
     } else {
-      setEndDateValue({ ...ev.target.value
+      setEndDateValue({
+        ...ev.target.value
       });
     }
-
     const event = buildCustomEvent(changedDate, ev.target.value);
     onChange(event);
   };
-
   const startDateOnChange = ev => {
     handleOnChange("start", ev);
   };
-
   const endDateOnChange = ev => {
     handleOnChange("end", ev);
   };
-
   const updateInputMap = newState => {
     setInputRefMap(prev => {
-      return { ...prev,
+      return {
+        ...prev,
         ...newState
       };
     });
   };
-
   const isBlurBlocked = () => inputRefMap.start.isBlurBlocked.current || inputRefMap.end.isBlurBlocked.current;
-
   const handleOnBlur = ev => {
     if (isBlurBlocked()) {
       return;
     }
-
     if (onBlur) {
       const event = buildCustomEvent(lastChangedDate, ev.target.value);
       onBlur(event);
     }
   };
-
   const closePicker = activeInput => {
     inputRefMap[activeInput].setOpen(false);
     inputRefMap[activeInput].isBlurBlocked.current = false;
   };
-
   const handleOnKeyDown = (ev, activeInput) => {
     if (Events.isTabKey(ev) && Events.isShiftKey(ev)) {
       if (activeInput === "start") {
@@ -183,12 +171,10 @@ const DateRange = ({
       }
     }
   };
-
   const handleFocus = inputName => {
     closePicker(inputName);
     setLastChangedDate(inputName === "start" ? "end" : "start");
   };
-
   const dateProps = propsKey => {
     const props = propsKey === "start" ? startDateProps : endDateProps;
     const {
@@ -209,7 +195,6 @@ const DateRange = ({
       ...props
     };
   };
-
   return /*#__PURE__*/React.createElement(StyledDateRange, _extends({}, tagComponent("date-range", rest), {
     labelsInline: labelsInline
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(DateRangeContext.Provider, {
@@ -219,7 +204,6 @@ const DateRange = ({
     }
   }, /*#__PURE__*/React.createElement(DateInput, _extends({
     my: 0 // prevents any form spacing being applied
-
   }, dateProps("start"), {
     onFocus: () => handleFocus("end"),
     "data-element": "start-date",
@@ -229,7 +213,6 @@ const DateRange = ({
     ref: startRef
   })), /*#__PURE__*/React.createElement(DateInput, _extends({
     my: 0 // prevents any form spacing being applied
-
   }, dateProps("end"), {
     onFocus: () => handleFocus("start"),
     "data-element": "end-date",
@@ -239,8 +222,8 @@ const DateRange = ({
     ref: endRef
   }))));
 };
-
-const dateInputPropTypes = { // eslint-disable-next-line react/forbid-foreign-prop-types
+const dateInputPropTypes = {
+  // eslint-disable-next-line react/forbid-foreign-prop-types
   ...DateInput.propTypes,
   onChange: PropTypes.func,
   value: PropTypes.string
@@ -248,90 +231,72 @@ const dateInputPropTypes = { // eslint-disable-next-line react/forbid-foreign-pr
 DateRange.propTypes = {
   /** Filtered styled system margin props */
   ...marginPropTypes,
-
   /**
    * Optional label for endDate field
    */
   endLabel: PropTypes.string,
-
   /** Custom callback - receives array of startDate and endDate */
   onChange: PropTypes.func.isRequired,
-
   /** Custom callback - receives array of startDate and endDate */
   onBlur: PropTypes.func,
-
   /** An array containing the value of startDate and endDate */
   value: PropTypes.arrayOf(PropTypes.string).isRequired,
-
   /** Indicate that error has occurred on start date
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */
   startError: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** Indicate that warning has occurred on start date
   Pass string to display icon, tooltip and orange border
   Pass true boolean to only display orange border */
   startWarning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** Indicate additional information for start date
   Pass string to display icon, tooltip and blue border
   Pass true boolean to only display blue border */
   startInfo: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /**
    * A React ref to pass to the first of the two Date Input fields
    */
   startRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(HTMLInputElement)
   })]),
-
   /** Indicate that error has occurred on end date
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */
   endError: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** Indicate that warning has occurred on end date
   Pass string to display icon, tooltip and orange border
   Pass true boolean to only display orange border */
   endWarning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /** Indicate additional information for end date
   Pass string to display icon, tooltip and blue border
   Pass true boolean to only display blue border */
   endInfo: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
   /**
    * A React ref to pass to the second of the two Date Input fields
    */
   endRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(HTMLInputElement)
   })]),
-
   /** When true, validation icons will be placed on labels instead of being placed on the inputs */
   validationOnLabel: PropTypes.bool,
-
   /**
    * Optional label for startDate field
    */
   startLabel: PropTypes.string,
-
   /** Display labels inline */
   labelsInline: PropTypes.bool,
-
   /** Props for the child start Date component. For more information see the Date component's [prop table](https://carbon.sage.com/iframe.html?id=date-input--default-story&viewMode=docs#props) */
-  startDateProps: PropTypes.shape({ ...dateInputPropTypes
+  startDateProps: PropTypes.shape({
+    ...dateInputPropTypes
   }),
-
   /** Props for the child end Date component. For more information see the Date component's [prop table](https://carbon.sage.com/iframe.html?id=date-input--default-story&viewMode=docs#props) */
-  endDateProps: PropTypes.shape({ ...dateInputPropTypes
+  endDateProps: PropTypes.shape({
+    ...dateInputPropTypes
   }),
-
   /** An optional string prop to provide a name to the component */
   name: PropTypes.string,
-
   /** An optional string prop to provide an id to the component */
   id: PropTypes.string,
-
   /** Overrides the default tooltip position */
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"])
 };

package/esm/components/date-range/date-range.style.js

@@ -10,9 +10,12 @@ const StyledDateRange = styled.div`
   & ${StyledDateInput} {
     width: auto;
     display: inline-block;
-    vertical-align: ${({
-  labelsInline
-}) => labelsInline ? "top" : "bottom"};
+    vertical-align: ${_ref => {
+  let {
+    labelsInline
+  } = _ref;
+  return labelsInline ? "top" : "bottom";
+}};
   }
 
   & ${StyledDateInput}:first-child {