carbon-react 154.3.2 → 154.4.0-beta.0

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

@@ -1,356 +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, useState, useEffect, useRef, useMemo, forwardRef, useImperativeHandle } from "react";
-import invariant from "invariant";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import Events from "../../__internal__/utils/helpers/events";
-import { StyledNumeralDate, StyledDateField, StyledFieldset } from "./numeral-date.style";
-import Textbox from "../textbox";
-import Box from "../box";
-import ErrorBorder from "../textbox/textbox.style";
-import ValidationMessage from "../../__internal__/validation-message";
-import guid from "../../__internal__/utils/helpers/guid";
-import useLocale from "../../hooks/__internal__/useLocale";
-import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
-import NumeralDateContext from "./__internal__/numeral-date.context";
-import Logger from "../../__internal__/utils/logger";
-import FieldHelp from "../../__internal__/field-help";
-import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
-import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
-import HintText from "../../__internal__/hint-text";
-let deprecateUncontrolledWarnTriggered = false;
-export const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["yyyy", "mm", "dd"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
-const incorrectDateFormatMessage = "Forbidden prop dateFormat supplied to NumeralDate. " + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['yyyy', 'mm', 'dd'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
-const getMonthsForLocale = localeName => {
-  const year = new Date().getFullYear();
-  const {
-    format
-  } = new Intl.DateTimeFormat(localeName, {
-    month: "long"
-  });
-  return [...Array(12).keys()].map(m => format(new Date(Date.UTC(year, m))));
-};
-const validationMessages = (locale, month, daysInMonth) => ({
-  dd: locale.numeralDate.validation.day(month ? getMonthsForLocale(locale.locale())[+month - 1] : undefined, daysInMonth),
-  mm: locale.numeralDate.validation.month(),
-  yyyy: locale.numeralDate.validation.year()
-});
-const getDaysInMonth = (month, year) => {
-  if (!month || +month > 12 || +month < 1) {
-    return 31;
-  }
-  const currentDate = new Date();
-  const computedYear = +(year || currentDate.getFullYear());
-
-  // passing 0 as the third argument ensures we handle for months being 0 indexed
-  return new Date(computedYear, +month, 0).getDate();
-};
-const validate = (locale, {
-  dd,
-  mm,
-  yyyy
-}) => {
-  const failed = {
-    dd: "",
-    mm: "",
-    yyyy: ""
-  };
-  const daysInMonth = getDaysInMonth(mm, yyyy);
-  if (dd && (+dd > daysInMonth || +dd < 1)) {
-    failed.dd = validationMessages(locale, mm, String(daysInMonth)).dd;
-  }
-  if (mm && (+mm > 12 || +mm < 1)) {
-    failed.mm = validationMessages(locale).mm;
-  }
-  if (yyyy && (+yyyy < 1800 || +yyyy > 2200)) {
-    failed.yyyy = validationMessages(locale).yyyy;
-  }
-  return failed;
-};
-const getDateLabel = (datePart, locale) => {
-  switch (datePart) {
-    case "mm":
-      return locale.numeralDate.labels.month();
-    case "yyyy":
-      return locale.numeralDate.labels.year();
-    default:
-      return locale.numeralDate.labels.day();
-  }
-};
-let deprecateOptionalWarnTriggered = false;
-export const NumeralDate = /*#__PURE__*/forwardRef(({
-  dateFormat = ["dd", "mm", "yyyy"],
-  defaultValue,
-  disabled,
-  error = "",
-  warning = "",
-  info,
-  id,
-  name,
-  onBlur,
-  onChange,
-  value,
-  validationOnLabel = false,
-  label,
-  labelInline,
-  labelWidth,
-  labelAlign,
-  fieldLabelsAlign,
-  labelHelp,
-  labelSpacing,
-  fieldHelp,
-  adaptiveLabelBreakpoint,
-  required,
-  isOptional,
-  readOnly,
-  size = "medium",
-  enableInternalError,
-  enableInternalWarning,
-  tooltipPosition,
-  helpAriaLabel,
-  dayRef,
-  monthRef,
-  yearRef,
-  ...rest
-}, ref) => {
-  if (!deprecateOptionalWarnTriggered && isOptional) {
-    deprecateOptionalWarnTriggered = true;
-    Logger.deprecate("`isOptional` is deprecated in NumeralDate and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
-  }
-  const locale = useLocale();
-  const {
-    validationRedesignOptIn
-  } = useContext(NewValidationContext);
-  const {
-    current: uniqueId
-  } = useRef(id || guid());
-  const inputIds = useRef({
-    dd: guid(),
-    mm: guid(),
-    yyyy: guid()
-  });
-  const inputHintId = useRef(guid());
-  const isControlled = useRef(value !== undefined);
-  const initialValue = isControlled.current ? value : defaultValue;
-  const refs = useRef(dateFormat.map(() => null));
-  useImperativeHandle(ref, () => ({
-    focus: () => {
-      refs.current[0]?.focus();
-    }
-  }));
-  const [internalMessages, setInternalMessages] = useState({
-    ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
-  });
-  const hasCorrectDateFormat = useMemo(() => {
-    const isAllowed = !dateFormat || ALLOWED_DATE_FORMATS.find(allowedDateFormat => JSON.stringify(allowedDateFormat) === JSON.stringify(dateFormat));
-    return isAllowed;
-  }, [dateFormat]);
-  !hasCorrectDateFormat ? process.env.NODE_ENV !== "production" ? invariant(false, incorrectDateFormatMessage) : invariant(false) : void 0;
-  useEffect(() => {
-    const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
-    !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
-  }, [value]);
-  const [dateValue, setDateValue] = useState({
-    ...(initialValue || Object.fromEntries(dateFormat.map(datePart => [datePart, ""])))
-  });
-  const createCustomEventObject = newValue => ({
-    target: {
-      name,
-      id: uniqueId,
-      value: newValue
-    }
-  });
-  const onKeyDown = event => {
-    const isValidKey = Events.isNumberKey(event) || Events.isTabKey(event) || Events.isEnterKey(event) || event.key === "Delete" || event.key === "Backspace";
-    if (!isValidKey) {
-      event.preventDefault();
-    }
-  };
-  const handleChange = (event, datePart) => {
-    const {
-      value: newValue
-    } = event.target;
-    if (newValue.length <= datePart.length) {
-      const newDateValue = {
-        ...dateValue,
-        [datePart]: newValue
-      };
-      setDateValue(newDateValue);
-
-      /* istanbul ignore else */
-      if (onChange) {
-        onChange(createCustomEventObject(newDateValue));
-      }
-    }
-  };
-  const handleBlur = () => {
-    const internalValidationEnabled = enableInternalError || enableInternalWarning;
-    /* istanbul ignore else */
-    if (internalValidationEnabled) {
-      setInternalMessages(prev => ({
-        ...prev,
-        ...validate(locale, dateValue)
-      }));
-    }
-    setTimeout(() => {
-      const hasBlurred = !refs.current.find(r => r === document.activeElement);
-      /* istanbul ignore else */
-      if (onBlur && hasBlurred) {
-        onBlur(createCustomEventObject(dateValue));
-      }
-    }, 5);
-  };
-  const internalMessage = Object.keys(internalMessages).reduce((combinedMessage, datePart) => internalMessages[datePart] ? `${combinedMessage + internalMessages[datePart]}\n` : combinedMessage, "");
-  const internalError = enableInternalError ? internalMessage + error : error;
-  const internalWarning = enableInternalWarning ? internalMessage + warning : warning;
-  if (!deprecateUncontrolledWarnTriggered && !isControlled.current) {
-    deprecateUncontrolledWarnTriggered = true;
-    Logger.deprecate("Uncontrolled behaviour in `Numeral Date` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
-  }
-  const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
-  let inline = labelInline;
-  if (adaptiveLabelBreakpoint) {
-    inline = largeScreen;
-  }
-  const handleRef = (element, index, inputRef) => {
-    refs.current[index] = element;
-    if (!inputRef) {
-      return;
-    }
-    if (typeof inputRef === "function") {
-      inputRef(element);
-    } else {
-      inputRef.current = element;
-    }
-  };
-  const {
-    validationId,
-    fieldHelpId,
-    ariaDescribedBy
-  } = useInputAccessibility({
-    id: uniqueId,
-    // we still want to add the validationId to aria-describedby with the legacy validation
-    validationRedesignOptIn: true,
-    error: internalError,
-    warning: internalWarning,
-    info,
-    fieldHelp
-  });
-  const combinedAriaDescribedBy = [ariaDescribedBy, inputHintId.current].filter(Boolean).join(" ");
-  const renderInputs = () => {
-    return /*#__PURE__*/React.createElement(StyledNumeralDate, {
-      onKeyDown: onKeyDown
-    }, dateFormat.map((datePart, index) => {
-      const isEnd = index === dateFormat.length - 1;
-      let inputRef;
-      const validation = internalError || internalWarning || info;
-      const validationInField = !validationRedesignOptIn && typeof validation === "string" && validation !== "";
-      switch (datePart.slice(0, 2)) {
-        case "dd":
-          inputRef = dayRef;
-          break;
-        case "mm":
-          inputRef = monthRef;
-          break;
-        case "yy":
-          inputRef = yearRef;
-          break;
-        /* istanbul ignore next */
-        default:
-          break;
-      }
-      return /*#__PURE__*/React.createElement(NumeralDateContext.Provider, {
-        value: {
-          disableErrorBorder: true
-        },
-        key: datePart
-      }, /*#__PURE__*/React.createElement(StyledDateField, {
-        key: datePart,
-        size: size,
-        isYearInput: datePart.length === 4,
-        hasValidationIconInField: !validationOnLabel && isEnd && validationInField
-      }, /*#__PURE__*/React.createElement(Textbox, _extends({
-        id: inputIds.current[datePart],
-        label: getDateLabel(datePart, locale),
-        labelAlign: fieldLabelsAlign,
-        disabled: disabled,
-        readOnly: readOnly,
-        error: !!internalError,
-        warning: !!internalWarning,
-        info: !!info,
-        size: size,
-        value: dateValue[datePart],
-        onChange: e => handleChange(e, datePart),
-        onBlur: handleBlur,
-        ref: element => handleRef(element, index, inputRef)
-      }, isEnd && !validationOnLabel && !validationRedesignOptIn && {
-        error: internalError,
-        warning: internalWarning,
-        info
-      }, {
-        tooltipPosition: tooltipPosition,
-        tooltipId: validationId,
-        my: 0 // prevents any form spacing being applied
-      }))));
-    }));
-  };
-  if (!validationRedesignOptIn) {
-    return /*#__PURE__*/React.createElement(TooltipProvider, {
-      helpAriaLabel: helpAriaLabel
-    }, /*#__PURE__*/React.createElement(StyledFieldset, _extends({
-      id: uniqueId,
-      legend: label,
-      legendMargin: {
-        mb: 0
-      },
-      isRequired: required,
-      isOptional: isOptional,
-      isDisabled: disabled,
-      name: name,
-      error: validationOnLabel && internalError,
-      warning: validationOnLabel && internalWarning,
-      info: validationOnLabel && info,
-      inline: inline,
-      size: size,
-      labelHelp: labelHelp,
-      legendAlign: labelAlign,
-      legendWidth: labelWidth,
-      legendSpacing: labelSpacing,
-      validationId: validationId,
-      "aria-describedby": validationOnLabel ? ariaDescribedBy : fieldHelpId
-    }, filterStyledSystemMarginProps(rest), tagComponent("numeral-date", rest)), /*#__PURE__*/React.createElement(Box, {
-      display: "flex",
-      flexDirection: "column",
-      mt: inline ? 0 : 1
-    }, renderInputs(), fieldHelp && /*#__PURE__*/React.createElement(FieldHelp, {
-      id: fieldHelpId
-    }, fieldHelp))));
-  }
-  return /*#__PURE__*/React.createElement(StyledFieldset, _extends({
-    id: uniqueId,
-    legend: label,
-    legendMargin: {
-      mb: 0
-    },
-    legendAlign: labelAlign,
-    isRequired: required,
-    isOptional: isOptional,
-    isDisabled: disabled,
-    name: name,
-    "aria-describedby": combinedAriaDescribedBy
-  }, filterStyledSystemMarginProps(rest), tagComponent("numeral-date", rest)), labelHelp && /*#__PURE__*/React.createElement(HintText, {
-    align: labelAlign,
-    id: inputHintId.current
-  }, labelHelp), /*#__PURE__*/React.createElement(Box, {
-    position: "relative",
-    mt: labelHelp ? 0 : 1
-  }, (internalError || internalWarning) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ValidationMessage, {
-    error: internalError,
-    warning: internalWarning,
-    validationId: validationId
-  }), /*#__PURE__*/React.createElement(ErrorBorder, {
-    warning: !!(!internalError && internalWarning)
-  })), renderInputs()));
-});
-export default NumeralDate;
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as r,useContext as i,useRef as l,useImperativeHandle as o,useState as a,useMemo as d,useEffect as s}from"react";import m from"invariant";import c from"../../__internal__/utils/helpers/tags/tags.js";import"../../style/utils/filter-styled-system-padding-props.js";import y from"../../style/utils/filter-styled-system-margin-props.js";import p from"../../__internal__/utils/helpers/events/events.js";import{StyledFieldset as u,StyledNumeralDate as f,StyledDateField as b}from"./numeral-date.style.js";import{Textbox as g}from"../textbox/textbox.component.js";import{Box as h}from"../box/box.component.js";import v from"../textbox/textbox.style.js";import _ from"../../__internal__/validation-message/validation-message.component.js";import O from"../../__internal__/utils/helpers/guid/index.js";import j from"../../hooks/__internal__/useLocale/useLocale.js";import{TooltipProvider as w}from"../../__internal__/tooltip-provider/index.js";import D from"../carbon-provider/__internal__/new-validation.context.js";import I from"./__internal__/numeral-date.context.js";import x from"../../__internal__/utils/logger/index.js";import{FieldHelp as k}from"../../__internal__/field-help/field-help.component.js";import P from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import A from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import{HintText as S}from"../../__internal__/hint-text/hint-text.component.js";function B(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function L(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){B(e,t,n[t])}))}return e}function E(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 n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}let R=!1;const F=[["dd","mm","yyyy"],["mm","dd","yyyy"],["yyyy","mm","dd"],["dd","mm"],["mm","dd"],["mm","yyyy"]],H=e=>{const t=(new Date).getFullYear(),{format:n}=new Intl.DateTimeFormat(e,{month:"long"});return[...Array(12).keys()].map((e=>n(new Date(Date.UTC(t,e)))))},q=(e,t,n)=>({dd:e.numeralDate.validation.day(t?H(e.locale())[+t-1]:void 0,n),mm:e.numeralDate.validation.month(),yyyy:e.numeralDate.validation.year()}),N=(e,t)=>{switch(e){case"mm":return t.numeralDate.labels.month();case"yyyy":return t.numeralDate.labels.year();default:return t.numeralDate.labels.day()}};let z=!1;const W=r(((r,B)=>{var{dateFormat:H=["dd","mm","yyyy"],defaultValue:W,disabled:C,error:K="",warning:T="",info:V,id:Y,name:J,onBlur:M,onChange:U,value:$,validationOnLabel:G=!1,label:Q,labelInline:X,labelWidth:Z,labelAlign:ee,fieldLabelsAlign:te,labelHelp:ne,labelSpacing:re,fieldHelp:ie,adaptiveLabelBreakpoint:le,required:oe,isOptional:ae,readOnly:de,size:se="medium",enableInternalError:me,enableInternalWarning:ce,tooltipPosition:ye,helpAriaLabel:pe,dayRef:ue,monthRef:fe,yearRef:be}=r,ge=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(r,["dateFormat","defaultValue","disabled","error","warning","info","id","name","onBlur","onChange","value","validationOnLabel","label","labelInline","labelWidth","labelAlign","fieldLabelsAlign","labelHelp","labelSpacing","fieldHelp","adaptiveLabelBreakpoint","required","isOptional","readOnly","size","enableInternalError","enableInternalWarning","tooltipPosition","helpAriaLabel","dayRef","monthRef","yearRef"]);!z&&ae&&(z=!0,x.deprecate("`isOptional` is deprecated in NumeralDate and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const he=j(),{validationRedesignOptIn:ve}=i(D),{current:_e}=l(Y||O()),Oe=l({dd:O(),mm:O(),yyyy:O()}),je=l(O()),we=l(void 0!==$),De=we.current?$:W,Ie=l(H.map((()=>null)));o(B,(()=>({focus:()=>{var e;null===(e=Ie.current[0])||void 0===e||e.focus()}})));const[xe,ke]=a(L({},Object.fromEntries(H.map((e=>[e,""]))))),Pe=d((()=>!H||F.find((e=>JSON.stringify(e)===JSON.stringify(H)))),[H]);m(Pe,"Forbidden prop dateFormat supplied to NumeralDate. Only one of these date formats is allowed: ['dd', 'mm', 'yyyy'], ['mm', 'dd', 'yyyy'], ['yyyy', 'mm', 'dd'], ['dd', 'mm'], ['mm', 'dd'], ['mm', 'yyyy']"),s((()=>{m(we.current===(void 0!==$),"Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component")}),[$]);const[Ae,Se]=a(L({},De||Object.fromEntries(H.map((e=>[e,""]))))),Be=e=>({target:{name:J,id:_e,value:e}}),Le=e=>{p.isNumberKey(e)||p.isTabKey(e)||p.isEnterKey(e)||"Delete"===e.key||"Backspace"===e.key||e.preventDefault()},Ee=()=>{(me||ce)&&ke((e=>L({},e,((e,{dd:t,mm:n,yyyy:r})=>{const i={dd:"",mm:"",yyyy:""},l=((e,t)=>{if(!e||+e>12||+e<1)return 31;const n=new Date,r=+(t||n.getFullYear());return new Date(r,+e,0).getDate()})(n,r);return t&&(+t>l||+t<1)&&(i.dd=q(e,n,String(l)).dd),n&&(+n>12||+n<1)&&(i.mm=q(e).mm),r&&(+r<1800||+r>2200)&&(i.yyyy=q(e).yyyy),i})(he,Ae)))),setTimeout((()=>{const e=!Ie.current.find((e=>e===document.activeElement));M&&e&&M(Be(Ae))}),5)},Re=Object.keys(xe).reduce(((e,t)=>xe[t]?`${e+xe[t]}\n`:e),""),Fe=me?Re+K:K,He=ce?Re+T:T;R||we.current||(R=!0,x.deprecate("Uncontrolled behaviour in `Numeral Date` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const qe=P(le);let Ne=X;le&&(Ne=qe);const{validationId:ze,fieldHelpId:We,ariaDescribedBy:Ce}=A({id:_e,validationRedesignOptIn:!0,error:Fe,warning:He,info:V,fieldHelp:ie}),Ke=[Ce,je.current].filter(Boolean).join(" "),Te=()=>e(f,{onKeyDown:Le,children:H.map(((t,n)=>{const r=n===H.length-1;let i;const l=Fe||He||V,o=!ve&&"string"==typeof l&&""!==l;switch(t.slice(0,2)){case"dd":i=ue;break;case"mm":i=fe;break;case"yy":i=be}return e(I.Provider,{value:{disableErrorBorder:!0},children:e(b,{size:se,isYearInput:4===t.length,hasValidationIconInField:!G&&r&&o,children:e(g,E(L({id:Oe.current[t],label:N(t,he),labelAlign:te,disabled:C,readOnly:de,error:!!Fe,warning:!!He,info:!!V,size:se,value:Ae[t],onChange:e=>((e,t)=>{const{value:n}=e.target;if(n.length<=t.length){const e=E(L({},Ae),{[t]:n});Se(e),U&&U(Be(e))}})(e,t),onBlur:Ee,ref:e=>((e,t,n)=>{Ie.current[t]=e,n&&("function"==typeof n?n(e):n.current=e)})(e,n,i)},r&&!G&&!ve&&{error:Fe,warning:He,info:V}),{tooltipPosition:ye,tooltipId:ze,my:0}))},t)},t)}))});return ve?t(u,E(L({id:_e,legend:Q,legendMargin:{mb:0},legendAlign:ee,isRequired:oe,isOptional:ae,isDisabled:C,name:J,"aria-describedby":Ke},y(ge),c("numeral-date",ge)),{children:[ne&&e(S,{align:ee,id:je.current,children:ne}),t(h,{position:"relative",mt:ne?0:1,children:[(Fe||He)&&t(n,{children:[e(_,{error:Fe,warning:He,validationId:ze}),e(v,{warning:!(Fe||!He)})]}),Te()]})]})):e(w,{helpAriaLabel:pe,children:e(u,E(L({id:_e,legend:Q,legendMargin:{mb:0},isRequired:oe,isOptional:ae,isDisabled:C,name:J,error:G&&Fe,warning:G&&He,info:G&&V,inline:Ne,size:se,labelHelp:ne,legendAlign:ee,legendWidth:Z,legendSpacing:re,validationId:ze,"aria-describedby":G?Ce:We},y(ge),c("numeral-date",ge)),{children:t(h,{display:"flex",flexDirection:"column",mt:Ne?0:1,children:[Te(),ie&&e(k,{id:We,children:ie})]})}))})}));export{F as ALLOWED_DATE_FORMATS,W as NumeralDate,W as default};

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

@@ -1,71 +1 @@
-import styled, { css } from "styled-components";
-import StyledIconSpan from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
-import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
-import StyledInput from "../../__internal__/input/input.style";
-import Fieldset from "../../__internal__/fieldset";
-import { StyledLegend } from "../../__internal__/fieldset/fieldset.style";
-const inputWidth = {
-  small: "44px",
-  medium: "50px",
-  large: "64px"
-};
-const inputWidthYear = hasValidationIconInField => ({
-  small: hasValidationIconInField ? "75px" : "66px",
-  medium: "80px",
-  large: "84px"
-});
-export const StyledNumeralDate = styled.div`
-  display: inline-flex;
-  gap: var(--spacing150);
-`;
-export const StyledDateField = styled.div`
-  ${({
-  isYearInput,
-  hasValidationIconInField,
-  size
-}) => css`
-    ${size && css`
-      ${StyledInputPresentation} {
-        position: relative;
-        min-width: ${isYearInput ? inputWidthYear(hasValidationIconInField)[size] : inputWidth[size]};
-      }
-    `}
-
-    ${StyledInput} {
-      text-align: center;
-      ${hasValidationIconInField && "padding-right: 0"}
-    }
-
-    ${StyledIconSpan} {
-      width: var(--spacing400);
-      z-index: 999;
-    }
-
-    label {
-      font-weight: var(--fontWeights400);
-    }
-  `}
-`;
-// We need to match height of the legend to the input container when it is inline to center it vertically,
-// as Safari does not support display: flex on fieldset elements.
-const sizeHeight = {
-  small: "57px",
-  medium: "65px",
-  large: "73px"
-};
-export const StyledFieldset = styled(Fieldset)`
-  ${({
-  inline,
-  size
-}) => css`
-    ${inline && css`
-      ${StyledLegend} {
-        height: ${size && sizeHeight[size]};
-      }
-    `}
-
-    ${!inline && css`
-      width: min-content;
-    `}
-  `}
-`;
+import e,{css as t}from"styled-components";import i from"../../__internal__/input-icon-toggle/input-icon-toggle.style.js";import n from"../../__internal__/input/input-presentation.style.js";import l from"../../__internal__/input/input.style.js";import a from"../../__internal__/fieldset/fieldset.component.js";import{StyledLegend as o}from"../../__internal__/fieldset/fieldset.style.js";const p={small:"44px",medium:"50px",large:"64px"},s=e.div.withConfig({displayName:"numeral-date.style__StyledNumeralDate",componentId:"sc-88200622-0"})(["display:inline-flex;gap:var(--spacing150);"]),m=e.div.withConfig({displayName:"numeral-date.style__StyledDateField",componentId:"sc-88200622-1"})(["",""],(({isYearInput:e,hasValidationIconInField:a,size:o})=>t([""," ","{text-align:center;","}","{width:var(--spacing400);z-index:999;}label{font-weight:var(--fontWeights400);}"],o&&t(["","{position:relative;min-width:",";}"],n,e?(e=>({small:e?"75px":"66px",medium:"80px",large:"84px"}))(a)[o]:p[o]),l,a&&"padding-right: 0",i))),d={small:"57px",medium:"65px",large:"73px"},r=e(a).withConfig({displayName:"numeral-date.style__StyledFieldset",componentId:"sc-88200622-2"})(["",""],(({inline:e,size:i})=>t([""," ",""],e&&t(["","{height:",";}"],o,i&&d[i]),!e&&t(["width:min-content;"]))));export{m as StyledDateField,r as StyledFieldset,s as StyledNumeralDate};

package/esm/components/pager/__internal__/pager-navigation-link.component.js

@@ -1,66 +1 @@
-import React, { useRef, useEffect, useCallback } from "react";
-import { StyledPagerLink } from "../pager.style";
-import useLocale from "../../../hooks/__internal__/useLocale";
-const PagerNavigationLink = ({
-  type,
-  currentPage,
-  pageCount,
-  hideDisabledElements,
-  pageSize,
-  onClick,
-  onPagination
-}) => {
-  const l = useLocale();
-  const linkRef = useRef(null);
-  const navLinkConfig = {
-    first: {
-      text: l.pager.first(),
-      destination: 1
-    },
-    last: {
-      text: l.pager.last(),
-      destination: pageCount
-    },
-    next: {
-      text: l.pager.next(),
-      destination: currentPage + 1
-    },
-    previous: {
-      text: l.pager.previous(),
-      destination: currentPage - 1
-    }
-  };
-  const disabled = useCallback(() => {
-    if (currentPage === 1) {
-      return type === "previous" || type === "first";
-    }
-    if (currentPage === pageCount) {
-      return type === "next" || type === "last";
-    }
-    return false;
-  }, [pageCount, currentPage, type]);
-  useEffect(() => {
-    if (disabled() && linkRef.current) {
-      linkRef.current.blur();
-    }
-  }, [disabled]);
-  const handleOnClick = ev => {
-    onClick?.(ev);
-    onPagination?.(navLinkConfig[type].destination, pageSize, type);
-  };
-  const {
-    text
-  } = navLinkConfig[type];
-  const hideDisabledButtons = hideDisabledElements && disabled();
-  return /*#__PURE__*/React.createElement(StyledPagerLink, {
-    hideDisabledButtons: hideDisabledButtons,
-    "data-element": `pager-link-${type}`,
-    disabled: disabled(),
-    onClick:
-    // Type assertion due to the fact that StyledPagerLink
-    // will always return a button element
-    handleOnClick,
-    ref: linkRef
-  }, text);
-};
-export default PagerNavigationLink;
+import{jsx as t}from"react/jsx-runtime";import{useRef as e,useCallback as n,useEffect as r}from"react";import{StyledPagerLink as i}from"../pager.style.js";import a from"../../../hooks/__internal__/useLocale/useLocale.js";const o=({type:o,currentPage:s,pageCount:l,hideDisabledElements:p,pageSize:u,onClick:d,onPagination:c})=>{const m=a(),g=e(null),x={first:{text:m.pager.first(),destination:1},last:{text:m.pager.last(),destination:l},next:{text:m.pager.next(),destination:s+1},previous:{text:m.pager.previous(),destination:s-1}},f=n((()=>1===s?"previous"===o||"first"===o:s===l&&("next"===o||"last"===o)),[l,s,o]);r((()=>{f()&&g.current&&g.current.blur()}),[f]);const{text:b}=x[o],h=p&&f();return t(i,{hideDisabledButtons:h,"data-element":`pager-link-${o}`,disabled:f(),onClick:t=>{null==d||d(t),null==c||c(x[o].destination,u,o)},ref:g,children:b})};export{o as default};

package/esm/components/pager/__internal__/pager-navigation.component.js

@@ -1,100 +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, { useRef } from "react";
-import { StyledPagerNavigation, StyledPagerNavInner, StyledPagerNoSelect, StyledPagerNavLabel } from "../pager.style";
-import NumberInput from "../../number";
-import Events from "../../../__internal__/utils/helpers/events";
-import createGuid from "../../../__internal__/utils/helpers/guid";
-import PagerNavigationLink from "./pager-navigation-link.component";
-import useLocale from "../../../hooks/__internal__/useLocale";
-const PagerNavigation = ({
-  pageSize,
-  currentPage,
-  setCurrentPage,
-  onNext,
-  onPrevious,
-  onFirst,
-  onLast,
-  onPagination,
-  pageCount,
-  showFirstAndLastButtons = true,
-  showPreviousAndNextButtons = true,
-  showPageCount = true,
-  interactivePageNumber = true,
-  hideDisabledElements = false,
-  smallScreenBreakpoint
-}) => {
-  const l = useLocale();
-  const guid = useRef(createGuid());
-  const currentPageId = `Pager_${guid.current}`;
-  const navLabelString = `${l.pager.pageX()} ${currentPage.toString()} ${l.pager.ofY(pageCount)}`;
-  const hasOnePage = pageCount <= 1;
-  const hasTwoPages = pageCount === 2;
-  const pagerNavigationProps = {
-    currentPage,
-    pageSize,
-    pageCount,
-    onPagination
-  };
-  const handlePageInputChange = ev => {
-    const pageNumber = +ev.target.value;
-    if (pageCount === 0) {
-      setCurrentPage(0);
-      onPagination(0, pageSize, "input");
-      return 0;
-    }
-    if (pageNumber <= 0 || Number.isNaN(pageNumber)) {
-      setCurrentPage(1);
-      onPagination(1, pageSize, "input");
-      return 1;
-    }
-    if (pageNumber > pageCount) {
-      setCurrentPage(pageCount);
-      onPagination(pageCount, pageSize, "input");
-      return pageCount;
-    }
-    setCurrentPage(pageNumber);
-    onPagination(pageNumber, pageSize, "input");
-    return pageNumber;
-  };
-  const handleCurrentPageChange = e => {
-    setCurrentPage(+e.target.value);
-  };
-  const renderButtonsBeforeCount = () => /*#__PURE__*/React.createElement(React.Fragment, null, !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
-    type: "first",
-    hideDisabledElements: hideDisabledElements,
-    onClick: onFirst
-  }, pagerNavigationProps)), showPreviousAndNextButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
-    type: "previous",
-    hideDisabledElements: hideDisabledElements,
-    onClick: onPrevious
-  }, pagerNavigationProps)));
-  const renderButtonsAfterCount = () => /*#__PURE__*/React.createElement(React.Fragment, null, showPreviousAndNextButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
-    type: "next",
-    hideDisabledElements: hideDisabledElements,
-    onClick: onNext
-  }, pagerNavigationProps)), !hasTwoPages && showFirstAndLastButtons && /*#__PURE__*/React.createElement(PagerNavigationLink, _extends({
-    type: "last",
-    hideDisabledElements: hideDisabledElements,
-    onClick: onLast
-  }, pagerNavigationProps)));
-  return /*#__PURE__*/React.createElement(StyledPagerNavigation, {
-    smallScreenBreakpoint: smallScreenBreakpoint
-  }, !hasOnePage && renderButtonsBeforeCount(), showPageCount && (interactivePageNumber ? /*#__PURE__*/React.createElement(StyledPagerNavInner, null, /*#__PURE__*/React.createElement("label", {
-    htmlFor: currentPageId
-  }, /*#__PURE__*/React.createElement(StyledPagerNoSelect, null, l.pager.pageX())), /*#__PURE__*/React.createElement(NumberInput, {
-    value: currentPage.toString(),
-    "data-element": "current-page",
-    onChange: handleCurrentPageChange,
-    onBlur: handlePageInputChange,
-    id: currentPageId,
-    onKeyUp: ev => Events.isEnterKey(ev) ? handlePageInputChange(ev) : false
-  }), /*#__PURE__*/React.createElement(StyledPagerNoSelect, {
-    "data-element": "max-pages"
-  }, l.pager.ofY(pageCount))) : /*#__PURE__*/React.createElement(StyledPagerNavLabel, {
-    "data-element": "current-page-label",
-    "data-role": "current-page-label",
-    id: currentPageId,
-    "aria-live": "polite"
-  }, navLabelString)), !hasOnePage && renderButtonsAfterCount());
-};
-export default PagerNavigation;
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{useRef as r}from"react";import{StyledPagerNavigation as a,StyledPagerNavInner as i,StyledPagerNoSelect as o,StyledPagerNavLabel as l}from"../pager.style.js";import{Number as s}from"../../number/number.component.js";import u from"../../../__internal__/utils/helpers/events/events.js";import p from"../../../__internal__/utils/helpers/guid/index.js";import c from"./pager-navigation-link.component.js";import m from"../../../hooks/__internal__/useLocale/useLocale.js";function g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function d(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){g(e,t,n[t])}))}return e}const b=({pageSize:g,currentPage:b,setCurrentPage:f,onNext:h,onPrevious:y,onFirst:v,onLast:P,onPagination:_,pageCount:j,showFirstAndLastButtons:k=!0,showPreviousAndNextButtons:C=!0,showPageCount:O=!0,interactivePageNumber:S=!0,hideDisabledElements:w=!1,smallScreenBreakpoint:x})=>{const E=m(),N=`Pager_${r(p()).current}`,D=`${E.pager.pageX()} ${b.toString()} ${E.pager.ofY(j)}`,B=j<=1,L=2===j,$={currentPage:b,pageSize:g,pageCount:j,onPagination:_},F=e=>{const t=+e.target.value;return 0===j?(f(0),_(0,g,"input"),0):t<=0||Number.isNaN(t)?(f(1),_(1,g,"input"),1):t>j?(f(j),_(j,g,"input"),j):(f(t),_(t,g,"input"),t)};return e(a,{smallScreenBreakpoint:x,children:[!B&&e(n,{children:[!L&&k&&t(c,d({type:"first",hideDisabledElements:w,onClick:v},$)),C&&t(c,d({type:"previous",hideDisabledElements:w,onClick:y},$))]}),O&&(S?e(i,{children:[t("label",{htmlFor:N,children:t(o,{children:E.pager.pageX()})}),t(s,{value:b.toString(),"data-element":"current-page",onChange:e=>{f(+e.target.value)},onBlur:F,id:N,onKeyUp:e=>!!u.isEnterKey(e)&&F(e)}),t(o,{"data-element":"max-pages",children:E.pager.ofY(j)})]}):t(l,{"data-element":"current-page-label","data-role":"current-page-label",id:N,"aria-live":"polite",children:D})),!B&&e(n,{children:[C&&t(c,d({type:"next",hideDisabledElements:w,onClick:h},$)),!L&&k&&t(c,d({type:"last",hideDisabledElements:w,onClick:P},$))]})]})};export{b as default};

package/esm/components/pager/index.js

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