carbon-react 154.4.0 → 154.4.2

package/esm/components/date/__internal__/navbar/button.style.js

@@ -1,27 +1 @@
-import styled from "styled-components";
-import addFocusStyling from "../../../../style/utils/add-focus-styling";
-import { baseTheme } from "../../../../style/themes";
-const StyledButton = styled.button.attrs({
-  type: "button"
-})`
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  border: var(--borderWidth200) solid var(--colorsActionMinorTransparent);
-  background: none;
-  box-shadow: none;
-  cursor: pointer;
-  height: var(--sizing500);
-  width: var(--sizing500);
-  padding: var(--spacing150);
-  box-sizing: border-box;
-  border-radius: var(--borderRadius050);
-
-  &:focus {
-    ${addFocusStyling()}
-  }
-`;
-StyledButton.defaultProps = {
-  theme: baseTheme
-};
-export default StyledButton;
+import t from"styled-components";import e from"../../../../style/utils/add-focus-styling.js";import"../../../../style/themes/sage/index.js";import o from"../../../../style/themes/base/index.js";import"../../../../style/themes/none/index.js";const s=t.button.attrs({type:"button"}).withConfig({displayName:"button.style__StyledButton",componentId:"sc-11e4fdfb-0"})(["justify-content:center;align-items:center;display:flex;border:var(--borderWidth200) solid var(--colorsActionMinorTransparent);background:none;box-shadow:none;cursor:pointer;height:var(--sizing500);width:var(--sizing500);padding:var(--spacing150);box-sizing:border-box;border-radius:var(--borderRadius050);&:focus{","}"],e());s.defaultProps={theme:o};export{s as default};

package/esm/components/date/__internal__/navbar/index.js

@@ -1 +1 @@
-export { default } from "./navbar.component";
+export{Navbar as default}from"./navbar.component.js";

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

@@ -1,42 +1 @@
-import React from "react";
-import StyledButton from "./button.style";
-import StyledNavbar from "./navbar.style";
-import Icon from "../../../icon";
-import Events from "../../../../__internal__/utils/helpers/events";
-import useLocale from "../../../../hooks/__internal__/useLocale";
-export const Navbar = ({
-  onPreviousClick,
-  onNextClick,
-  className
-}) => {
-  const locale = useLocale();
-  const {
-    previousMonthButton,
-    nextMonthButton
-  } = locale.date.ariaLabels;
-  const handleKeyDown = ev => {
-    if (Events.isLeftKey(ev) || Events.isRightKey(ev) || Events.isUpKey(ev) || Events.isDownKey(ev)) {
-      ev.stopPropagation();
-      ev.preventDefault();
-    }
-  };
-  return /*#__PURE__*/React.createElement(StyledNavbar, {
-    className: className,
-    "data-role": "date-navbar"
-  }, /*#__PURE__*/React.createElement(StyledButton, {
-    "aria-label": previousMonthButton(),
-    onClick: e => {
-      onPreviousClick?.(e);
-    },
-    onKeyDown: handleKeyDown
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "chevron_left"
-  })), /*#__PURE__*/React.createElement(StyledButton, {
-    "aria-label": nextMonthButton(),
-    onClick: e => onNextClick?.(e),
-    onKeyDown: handleKeyDown
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "chevron_right"
-  })));
-};
-export default Navbar;
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import"react";import t from"./button.style.js";import n from"./navbar.style.js";import r from"../../../icon/icon.component.js";import i from"../../../../__internal__/utils/helpers/events/events.js";import a from"../../../../hooks/__internal__/useLocale/useLocale.js";const l=({onPreviousClick:l,onNextClick:s,className:c})=>{const m=a(),{previousMonthButton:p,nextMonthButton:u}=m.date.ariaLabels,h=e=>{(i.isLeftKey(e)||i.isRightKey(e)||i.isUpKey(e)||i.isDownKey(e))&&(e.stopPropagation(),e.preventDefault())};return e(n,{className:c,"data-role":"date-navbar",children:[o(t,{"aria-label":p(),onClick:e=>{null==l||l(e)},onKeyDown:h,children:o(r,{type:"chevron_left"})}),o(t,{"aria-label":u(),onClick:e=>null==s?void 0:s(e),onKeyDown:h,children:o(r,{type:"chevron_right"})})]})};export{l as Navbar,l as default};

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

@@ -1,11 +1 @@
-import styled from "styled-components";
-const StyledNavbar = styled.div`
-  &.rdp-nav {
-    display: flex;
-    justify-content: space-between;
-    padding: 0;
-    top: 0;
-    height: var(--sizing500);
-  }
-`;
-export default StyledNavbar;
+import t from"styled-components";const e=t.div.withConfig({displayName:"navbar.style__StyledNavbar",componentId:"sc-d6686bc9-0"})(["&.rdp-nav{display:flex;justify-content:space-between;padding:0;top:0;height:var(--sizing500);}"]);export{e as default};

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

@@ -1,151 +1 @@
-import { format, formatISO, isMatch, isValid, parse, parseISO, parseWithOptions } from "./date-fns-fp";
-const DATE_STRING_LENGTH = 10;
-const THRESHOLD_FOR_ADDITIONAL_YEARS = 69;
-export function isValidLocaleDate(date, locale) {
-  const dateFormat = "P";
-  const parseDateWithLocale = parseWithOptions({
-    locale
-  });
-  const parsedDate = parseDateWithLocale(new Date(), dateFormat, date);
-  const isValidDate = isValid(parsedDate);
-  return isValidDate;
-}
-export function parseDate(formatString, valueString) {
-  if (!valueString || !formatString) return undefined;
-  return parse(new Date(), formatString, valueString);
-}
-export function isDateValid(date) {
-  return date && date.toString() !== "Invalid Date";
-}
-export function formatToISO(formatString, valueString) {
-  const dateValue = parseDate(formatString, valueString);
-  if (!dateValue || !isDateValid(dateValue)) {
-    return null;
-  }
-  return formatISO(dateValue).split("T")[0];
-}
-export function formattedValue(formatString, value) {
-  if (!value) return "";
-  return format(formatString, value);
-}
-function hasMatchedFormat(formatString, valueString, fullFormat, fullValue) {
-  if (formatString.includes("d")) {
-    return formatString.length === valueString.length && isMatch(fullFormat.join("."), fullValue.join(".")) // need to check day value with month value
-    ;
-  }
-  return formatString.length === valueString.length && isMatch(formatString, valueString);
-}
-export function additionalYears(formatString, value) {
-  if (formatString.split("y").length - 1 !== 2) {
-    return [formatString, value];
-  }
-  const formatStartWithYear = formatString.startsWith("yy");
-  const yearStringStartIndex = formatStartWithYear ? 0 : value.length - 2;
-  const yearStringEndIndex = formatStartWithYear ? 2 : value.length;
-  const dayAndMonthStringStartIndex = formatStartWithYear ? yearStringEndIndex : 0;
-  const dayAndMonthStringEndIndex = formatStartWithYear ? value.length : value.length - 2;
-  let year = value.substring(yearStringStartIndex, yearStringEndIndex);
-  const dayAndMonth = value.substring(dayAndMonthStringStartIndex, dayAndMonthStringEndIndex);
-  const yearAsNumber = Number(year);
-  if (yearAsNumber < THRESHOLD_FOR_ADDITIONAL_YEARS) {
-    year = String(2000 + yearAsNumber);
-  } else {
-    year = String(1900 + yearAsNumber);
-  }
-  if (formatStartWithYear) {
-    return [`yyyy${formatString.substring(2, formatString.length)}`, `${year}${dayAndMonth}`];
-  }
-  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], formatArray, valueArray));
-}
-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;
-}
-export const getSeparator = value => {
-  const separator = ["", ".", ",", "-", "/", " ", ":"].slice(1).find(char => value.includes(char));
-  return separator || "";
-};
-export 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;
-}
-export function parseISODate(value) {
-  return parseISO(value);
-}
-function isValidISODate(dateString) {
-  return parseISODate(dateString).toString() !== "Invalid Date";
-}
-export function checkISOFormatAndLength(value) {
-  if (value.length !== DATE_STRING_LENGTH || !isValidISODate(value)) {
-    return false;
-  }
-  const array = value.split("-");
-  return array.length === 3 && array[0].length === 4 && array[1].length === 2 && array[2].length === 2;
-}
-
-/**
- * Returns the disabled array of days specified by props maxDate and minDate
- */
-export function getDisabledDays(minDate = "", maxDate = "") {
-  const days = [];
-  if (!minDate && !maxDate) {
-    return undefined;
-  }
-  if (checkISOFormatAndLength(minDate)) {
-    days.push({
-      before: parseISODate(minDate)
-    });
-  }
-  if (checkISOFormatAndLength(maxDate)) {
-    days.push({
-      after: parseISODate(maxDate)
-    });
-  }
-  return days;
-}
+import{format as t}from"date-fns/fp/format";import{formatISO as n}from"date-fns/fp/formatISO";import{isMatch as r}from"date-fns/fp/isMatch";import{isValid as e}from"date-fns/fp/isValid";import{parse as i}from"date-fns/fp/parse";import{parseWithOptions as o}from"date-fns/fp/parseWithOptions";import{parseISO as f}from"date-fns/fp/parseISO";function u(t,n){const r=o({locale:n})(new Date,"P",t);return e(r)}function s(t,n){if(n&&t)return i(new Date,t,n)}function l(t){return t&&"Invalid Date"!==t.toString()}function c(t,r){const e=s(t,r);return e&&l(e)?n(e).split("T")[0]:null}function p(n,r){return r?t(n,r):""}function g(t,n){if(t.split("y").length-1!=2)return[t,n];const r=t.startsWith("yy"),e=r?0:n.length-2,i=r?2:n.length,o=r?i:0,f=r?n.length:n.length-2;let u=n.substring(e,i);const s=n.substring(o,f),l=Number(u);return u=String(l<69?2e3+l:1900+l),r?[`yyyy${t.substring(2,t.length)}`,`${u}${s}`]:[`${t.substring(0,t.length-2)}yyyy`,`${s}${u}`]}function a(t,n){return t.map(((r,e)=>n.substring(t[e],t[e+1])))}function h(t,n){return t.every(((e,i)=>function(t,n,e,i){return t.includes("d")?t.length===n.length&&r(e.join("."),i.join(".")):t.length===n.length&&r(t,n)}(e,n[i],t,n)))}const m=t=>["",".",",","-","/"," ",":"].slice(1).find((n=>t.includes(n)))||"";function d(t,n){if(!t)return["",""];const r=m(t),e=n.filter((n=>n.length===t.length&&m(n)===r)).reduce(((n,e)=>{const i=m(e);if(""===r&&""===i){const n=function(t,n){const r=n.split("").reduce(((t,r,e)=>0===e||r!==n[e-1]?[...t,e]:t),[]),e=a(r,n),i=a(r,t);return h(e,i)?[e.join(" "),i.join(" ")]:null}(t,e);if(n)return n}if(r&&i&&r===i){const n=function(t,n,r){return h(n.split(r),t.split(r))?[n,t]:null}(t,e,r);if(n)return n}return n}),[]);return e}function y(t){return f(t)}function b(t){if(10!==t.length||"Invalid Date"===y(t).toString())return!1;const n=t.split("-");return 3===n.length&&4===n[0].length&&2===n[1].length&&2===n[2].length}function $(t="",n=""){const r=[];if(t||n)return b(t)&&r.push({before:y(t)}),b(n)&&r.push({after:y(n)}),r}export{g as additionalYears,b as checkISOFormatAndLength,d as findMatchedFormatAndValue,c as formatToISO,p as formattedValue,$ as getDisabledDays,m as getSeparator,l as isDateValid,u as isValidLocaleDate,s as parseDate,y as parseISODate};

package/esm/components/date/__internal__/weekday/abbr.style.js

@@ -1,5 +1 @@
-import styled from "styled-components";
-const StyledAbbr = styled.abbr`
-  text-decoration: none;
-`;
-export default StyledAbbr;
+import e from"styled-components";const t=e.abbr.withConfig({displayName:"abbr.style__StyledAbbr",componentId:"sc-e967dee-0"})(["text-decoration:none;"]);export{t as default};

package/esm/components/date/__internal__/weekday/index.js

@@ -1 +1 @@
-export { default } from "./weekday.component";
+export{Weekday as default}from"./weekday.component.js";

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

@@ -1,16 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from "react";
-import StyledWeekday from "./weekday.style";
-import StyledAbbr from "./abbr.style";
-export const Weekday = ({
-  className,
-  title,
-  children,
-  ...props
-}) => /*#__PURE__*/React.createElement(StyledWeekday, _extends({
-  className: className,
-  role: "columnheader"
-}, props), /*#__PURE__*/React.createElement(StyledAbbr, {
-  title: title
-}, children));
-export default Weekday;
+import{jsx as e}from"react/jsx-runtime";import"react";import r from"./weekday.style.js";import t from"./abbr.style.js";function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const o=o=>{var c,l,{className:i,title:a,children:b}=o,s=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(o,["className","title","children"]);return e(r,(c=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){n(e,r,t[r])}))}return e}({className:i,role:"columnheader"},s),l=null!=(l={children:e(t,{title:a,children:b})})?l:{},Object.getOwnPropertyDescriptors?Object.defineProperties(c,Object.getOwnPropertyDescriptors(l)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(l)).forEach((function(e){Object.defineProperty(c,e,Object.getOwnPropertyDescriptor(l,e))})),c))};export{o as Weekday,o as default};

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

@@ -1,19 +1 @@
-import styled from "styled-components";
-import StyledAbbr from "./abbr.style";
-const StyledWeekday = styled.th`
-  &,
-  & ${StyledAbbr} {
-    border: none;
-    height: var(--sizing500);
-    min-width: var(--sizing500);
-    font-weight: 800;
-    color: var(--colorsActionMinor500);
-    text-transform: uppercase;
-    font-size: 12px;
-    //font: var(--typographyDatePickerCalendarDayM); font assets to be updated part of FE-4975
-    text-align: center;
-    padding: 20px 0 5px;
-    box-sizing: border-box;
-  }
-`;
-export default StyledWeekday;
+import e from"styled-components";import o from"./abbr.style.js";const t=e.th.withConfig({displayName:"weekday.style__StyledWeekday",componentId:"sc-fb3dbb5c-0"})(["&,& ","{border:none;height:var(--sizing500);min-width:var(--sizing500);font-weight:800;color:var(--colorsActionMinor500);text-transform:uppercase;font-size:12px;text-align:center;padding:20px 0 5px;box-sizing:border-box;}"],o);export{t as default};

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

@@ -1,341 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useContext, useEffect, useMemo, useRef, useState, useCallback } from "react";
-import { additionalYears, findMatchedFormatAndValue, formattedValue, formatToISO, isDateValid, parseDate, parseISODate, checkISOFormatAndLength, getSeparator, isValidLocaleDate } from "./__internal__/utils";
-import useLocale from "../../hooks/__internal__/useLocale";
-import Events from "../../__internal__/utils/helpers/events";
-import { filterOutStyledSystemSpacingProps, filterStyledSystemMarginProps } from "../../style/utils";
-import getFormatData from "./__internal__/date-formats";
-import StyledDateInput from "./date.style";
-import Textbox from "../textbox";
-import DatePicker from "./__internal__/date-picker";
-import DateRangeContext from "../date-range/__internal__/date-range.context";
-import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
-import guid from "../../__internal__/utils/helpers/guid";
-import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-export const DateInput = /*#__PURE__*/React.forwardRef(({
-  adaptiveLabelBreakpoint,
-  allowEmptyValue,
-  autoFocus,
-  "data-element": dataElement,
-  "data-role": dataRole,
-  disabled,
-  disablePortal = false,
-  helpAriaLabel,
-  labelInline,
-  minDate,
-  maxDate,
-  onBlur,
-  onChange,
-  onClick,
-  onFocus,
-  onKeyDown,
-  pickerProps,
-  readOnly,
-  size = "medium",
-  tooltipPosition,
-  value,
-  inputWidth,
-  labelWidth,
-  maxWidth,
-  inputName,
-  onPickerClose,
-  onPickerOpen,
-  datePickerAriaLabel,
-  datePickerAriaLabelledBy,
-  ...rest
-}, ref) => {
-  const wrapperRef = useRef(null);
-  const parentRef = useRef(null);
-  const internalInputRef = useRef(null);
-  const alreadyFocused = useRef(false);
-  const isBlurBlocked = useRef(false);
-  const focusedViaPicker = useRef(false);
-  const locale = useLocale();
-  const {
-    dateFnsLocale,
-    dateFormatOverride
-  } = locale.date;
-  const {
-    format,
-    formats
-  } = useMemo(() => getFormatData(dateFnsLocale(), dateFormatOverride), [dateFnsLocale, dateFormatOverride]);
-  const {
-    inputRefMap,
-    setInputRefMap
-  } = useContext(DateRangeContext);
-  const [open, setOpen] = useState(false);
-  const [selectedDays, setSelectedDays] = useState(() => {
-    const isValidDate = isValidLocaleDate(value, dateFnsLocale());
-    if (!isValidDate) {
-      return undefined;
-    }
-    return checkISOFormatAndLength(value) ? parseISODate(value) : parseDate(format, value);
-  });
-  const isInitialValue = useRef(true);
-  const pickerTabGuardId = useRef(guid());
-  const computeInvalidRawValue = inputValue => allowEmptyValue && !inputValue.length ? inputValue : null;
-  const buildCustomEvent = ev => {
-    const {
-      id,
-      name
-    } = ev.target;
-    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);
-    const customEvent = {
-      target: {
-        ...(name && {
-          name
-        }),
-        ...(id && {
-          id
-        }),
-        value: {
-          formattedValue: formattedValueString,
-          rawValue
-        }
-      }
-    };
-    return customEvent;
-  };
-  const handleClickAway = () => {
-    if (open) {
-      alreadyFocused.current = true;
-      internalInputRef.current?.focus();
-      isBlurBlocked.current = false;
-      internalInputRef.current?.blur();
-      setOpen(false);
-      onPickerClose?.();
-      alreadyFocused.current = false;
-    }
-  };
-  const handleClickInside = useClickAwayListener(handleClickAway, "mousedown");
-  const handleChange = ev => {
-    isInitialValue.current = false;
-    onChange(buildCustomEvent(ev));
-  };
-  const focusInput = () => {
-    focusedViaPicker.current = true;
-    internalInputRef.current?.focus();
-  };
-  const handleDayClick = (day, ev) => {
-    setSelectedDays(day);
-    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);
-      }
-    } else {
-      const {
-        id,
-        name
-      } = ev.target;
-      event = {
-        target: {
-          ...(name && {
-            name
-          }),
-          ...(id && {
-            id
-          }),
-          value: {
-            formattedValue: ev.target.value,
-            rawValue: computeInvalidRawValue(ev.target.value)
-          }
-        }
-      };
-    }
-    if (isBlurBlocked.current) {
-      return;
-    }
-    if (onBlur) {
-      onBlur(event);
-    }
-  };
-  const handleFocus = ev => {
-    if (disabled || readOnly) {
-      return;
-    }
-    isBlurBlocked.current = false;
-    if (!open && !alreadyFocused.current) {
-      setOpen(true);
-      onPickerOpen?.();
-    } else {
-      alreadyFocused.current = false;
-    }
-    if (onFocus) {
-      onFocus(ev);
-    }
-  };
-  const handleKeyUp = useCallback(ev => {
-    /* istanbul ignore else */
-    if (open && Events.isEscKey(ev)) {
-      setOpen(false);
-      onPickerClose?.();
-      ev.stopPropagation();
-    }
-  }, [onPickerClose, open]);
-  const handleKeyDown = ev => {
-    if (onKeyDown) {
-      onKeyDown(ev);
-    }
-    if (open && Events.isTabKey(ev)) {
-      if (Events.isShiftKey(ev)) {
-        setOpen(false);
-        onPickerClose?.();
-      } else if (!disablePortal) {
-        ev.preventDefault();
-        document?.querySelector(`[id="${pickerTabGuardId.current}"]`)?.focus();
-      }
-      alreadyFocused.current = false;
-    }
-  };
-  const handleClick = ev => {
-    if (onClick) {
-      onClick(ev);
-    }
-  };
-  const handleMouseDown = () => {
-    handleClickInside();
-    if (setInputRefMap) {
-      isBlurBlocked.current = true;
-    }
-    if (!open) {
-      setOpen(true);
-      onPickerOpen?.();
-    }
-  };
-  const handleIconMouseDown = () => {
-    isBlurBlocked.current = true;
-    alreadyFocused.current = true;
-    handleClickInside();
-    if (open) {
-      setOpen(false);
-      onPickerClose?.();
-    } else {
-      setOpen(true);
-      onPickerOpen?.();
-    }
-  };
-  const handlePickerMouseDown = () => {
-    isBlurBlocked.current = true;
-    handleClickInside();
-  };
-  const assignInput = useCallback(inputElement => {
-    internalInputRef.current = inputElement;
-    parentRef.current = inputElement?.parentElement;
-    if (ref) {
-      if (typeof ref === "function") {
-        ref(inputElement);
-      } else {
-        ref.current = inputElement;
-      }
-    }
-    if (inputName && inputRefMap?.[inputName]?.setOpen !== setOpen) {
-      setInputRefMap?.({
-        [inputName]: {
-          isBlurBlocked,
-          setOpen
-        }
-      });
-    }
-  }, [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) {
-      setSelectedDays(parseISODate(value));
-    } else {
-      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 = filterStyledSystemMarginProps(rest);
-  return /*#__PURE__*/React.createElement(StyledDateInput, _extends({
-    ref: wrapperRef,
-    role: "presentation",
-    size: size,
-    labelInline: labelInline
-  }, marginProps, {
-    applyDateRangeStyling: !!inputRefMap,
-    maxWidth: maxWidth,
-    inputWidth: inputWidth
-  }, tagComponent("date", {
-    "data-element": dataElement,
-    "data-role": dataRole
-  })), /*#__PURE__*/React.createElement(Textbox, _extends({}, filterOutStyledSystemSpacingProps(rest), {
-    "data-component": "date-input",
-    value: computedValue(),
-    onBlur: handleBlur,
-    onChange: handleChange,
-    onClick: handleClick,
-    onFocus: handleFocus,
-    onKeyUp: handleKeyUp,
-    onKeyDown: handleKeyDown,
-    iconOnClick: handleClick,
-    onMouseDown: handleMouseDown,
-    iconOnMouseDown: handleIconMouseDown,
-    inputIcon: "calendar",
-    labelInline: labelInline,
-    ref: assignInput,
-    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    tooltipPosition: tooltipPosition,
-    helpAriaLabel: helpAriaLabel,
-    autoFocus: autoFocus,
-    size: size,
-    disabled: disabled,
-    readOnly: readOnly,
-    inputWidth: inputWidth,
-    labelWidth: labelWidth,
-    maxWidth: maxWidth,
-    m: 0
-  })), /*#__PURE__*/React.createElement(DatePicker, {
-    disablePortal: disablePortal,
-    inputElement: parentRef,
-    pickerProps: pickerProps,
-    selectedDays: selectedDays,
-    onDayClick: handleDayClick,
-    minDate: minDate,
-    maxDate: maxDate,
-    pickerMouseDown: handlePickerMouseDown,
-    open: open,
-    setOpen: setOpen,
-    pickerTabGuardId: pickerTabGuardId.current,
-    onPickerClose: onPickerClose,
-    ariaLabel: datePickerAriaLabel,
-    ariaLabelledBy: datePickerAriaLabelledBy
-  }));
-});
-DateInput.displayName = "DateInput";
-export default DateInput;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useMemo as a,useContext as l,useState as o,useCallback as i,useEffect as u}from"react";import{isValidLocaleDate as s,checkISOFormatAndLength as c,parseISODate as p,parseDate as d,findMatchedFormatAndValue as m,isDateValid as f,additionalYears as b,formattedValue as y,getSeparator as O,formatToISO as g}from"./__internal__/utils.js";import v from"../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../__internal__/utils/helpers/events/events.js";import"../../style/utils/filter-styled-system-padding-props.js";import j from"../../style/utils/filter-styled-system-margin-props.js";import k from"../../style/utils/filter-out-styled-system-spacing-props.js";import P from"./__internal__/date-formats/index.js";import h from"./date.style.js";import{Textbox as w}from"../textbox/textbox.component.js";import{DatePicker as D}from"./__internal__/date-picker/date-picker.component.js";import x from"../date-range/__internal__/date-range.context.js";import L from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import C from"../../__internal__/utils/helpers/guid/index.js";import B from"../../__internal__/utils/helpers/tags/tags.js";function W(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function A(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){W(e,t,r[t])}))}return e}function I(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const S=r.forwardRef(((r,W)=>{var{adaptiveLabelBreakpoint:S,allowEmptyValue:E,autoFocus:F,"data-element":K,"data-role":V,disabled:M,disablePortal:z=!1,helpAriaLabel:R,labelInline:N,minDate:T,maxDate:q,onBlur:G,onChange:U,onClick:$,onFocus:H,onKeyDown:J,pickerProps:Q,readOnly:X,size:Y="medium",tooltipPosition:Z,value:ee,inputWidth:te,labelWidth:re,maxWidth:ne,inputName:ae,onPickerClose:le,onPickerOpen:oe,datePickerAriaLabel:ie,datePickerAriaLabelledBy:ue}=r,se=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}(r,["adaptiveLabelBreakpoint","allowEmptyValue","autoFocus","data-element","data-role","disabled","disablePortal","helpAriaLabel","labelInline","minDate","maxDate","onBlur","onChange","onClick","onFocus","onKeyDown","pickerProps","readOnly","size","tooltipPosition","value","inputWidth","labelWidth","maxWidth","inputName","onPickerClose","onPickerOpen","datePickerAriaLabel","datePickerAriaLabelledBy"]);const ce=n(null),pe=n(null),de=n(null),me=n(!1),fe=n(!1),be=n(!1),ye=v(),{dateFnsLocale:Oe,dateFormatOverride:ge}=ye.date,{format:ve,formats:_e}=a((()=>P(Oe(),ge)),[Oe,ge]),{inputRefMap:je,setInputRefMap:ke}=l(x),[Pe,he]=o(!1),[we,De]=o((()=>{if(s(ee,Oe()))return c(ee)?p(ee):d(ve,ee)})),xe=n(!0),Le=n(C()),Ce=e=>E&&!e.length?e:null,Be=e=>{const{id:t,name:r}=e.target,[n,a]=m(e.target.value,_e),l="blur"===e.type?y(ve,we):e.target.value,o=f(d(n,a))?g(...b(n,a)):Ce(e.target.value);return{target:I(A({},r&&{name:r},t&&{id:t}),{value:{formattedValue:l,rawValue:o}})}},We=L((()=>{var e,t;Pe&&(me.current=!0,null===(e=de.current)||void 0===e||e.focus(),fe.current=!1,null===(t=de.current)||void 0===t||t.blur(),he(!1),null==le||le(),me.current=!1)}),"mousedown"),Ae=i((e=>{Pe&&_.isEscKey(e)&&(he(!1),null==le||le(),e.stopPropagation())}),[le,Pe]),Ie=e=>{$&&$(e)},Se=i((e=>{var t;de.current=e,pe.current=null==e?void 0:e.parentElement,W&&("function"==typeof W?W(e):W.current=e),ae&&(null==je||null===(t=je[ae])||void 0===t?void 0:t.setOpen)!==he&&(null==ke||ke({[ae]:{isBlurBlocked:fe,setOpen:he}}))}),[ae,je,ke,W]);u((()=>{const[e,t]=m(ee,_e);e&&t&&f(d(e,t))?De(d(...b(e,t))):c(ee)&&xe.current?De(p(ee)):De(void 0)}),[ee,_e]);const Ee=j(se);return e(h,I(A(I(A({ref:ce,role:"presentation",size:Y,labelInline:N},Ee),{applyDateRangeStyling:!!je,maxWidth:ne,inputWidth:te}),B("date",{"data-element":K,"data-role":V})),{children:[t(w,I(A({},k(se)),{"data-component":"date-input",value:(()=>{if(c(ee)&&xe.current)return y(ve,p(ee));const e=O(ee),t=O(ve),r=()=>ee.split("").map((r=>r===e?t:r)).join("");if(xe.current&&e!==t&&f(d(ve,r()))){xe.current=!1;const[e,t]=m(r(),_e);return y(ve,d(...b(e,t)))}return ee})(),onBlur:e=>{if(M||X)return;let t;if(f(we)){t=Be(e);const r=c(ee)?y(ve,p(ee)):ee,[,n]=m(r,_e);y(ve,we)!==n&&U(t)}else{const{id:r,name:n}=e.target;t={target:I(A({},n&&{name:n},r&&{id:r}),{value:{formattedValue:e.target.value,rawValue:Ce(e.target.value)}})}}fe.current||G&&G(t)},onChange:e=>{xe.current=!1,U(Be(e))},onClick:Ie,onFocus:e=>{M||X||(fe.current=!1,Pe||me.current?me.current=!1:(he(!0),null==oe||oe()),H&&H(e))},onKeyUp:Ae,onKeyDown:e=>{if(J&&J(e),Pe&&_.isTabKey(e)){if(_.isShiftKey(e))he(!1),null==le||le();else if(!z){var t,r;e.preventDefault(),null===(r=document)||void 0===r||null===(t=r.querySelector(`[id="${Le.current}"]`))||void 0===t||t.focus()}me.current=!1}},iconOnClick:Ie,onMouseDown:()=>{We(),ke&&(fe.current=!0),Pe||(he(!0),null==oe||oe())},iconOnMouseDown:()=>{fe.current=!0,me.current=!0,We(),Pe?(he(!1),null==le||le()):(he(!0),null==oe||oe())},inputIcon:"calendar",labelInline:N,ref:Se,adaptiveLabelBreakpoint:S,tooltipPosition:Z,helpAriaLabel:R,autoFocus:F,size:Y,disabled:M,readOnly:X,inputWidth:te,labelWidth:re,maxWidth:ne,m:0})),t(D,{disablePortal:z,inputElement:pe,pickerProps:Q,selectedDays:we,onDayClick:(e,t)=>{var r;De(e),U(Be(I(A({},t),{target:I(A({},t.target),{value:y(ve,e)})}))),be.current=!0,null===(r=de.current)||void 0===r||r.focus(),he(!1)},minDate:T,maxDate:q,pickerMouseDown:()=>{fe.current=!0,We()},open:Pe,setOpen:he,pickerTabGuardId:Le.current,onPickerClose:le,ariaLabel:ie,ariaLabelledBy:ue})]}))}));S.displayName="DateInput";export{S as DateInput,S as default};