carbon-react/esm/components/date/date.component.js

A library of reusable React components for easily building user interfaces.

import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useMemo as o,useContext as a,useState as l,useCallback as i,useEffect as u}from"react";import{isValidLocaleDate as s,parseISODate as c,parseDate as p,checkISOFormatAndLength as d,findMatchedFormatAndValue as m,isDateValid as f,additionalYears as b,formattedValue as y,getSeparator as v,formatToISO as g}from"./__internal__/utils.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../__internal__/utils/helpers/events/events.js";import"../../style/utils/filter-styled-system-padding-props.js";import P from"../../style/utils/filter-styled-system-margin-props.js";import j from"../../style/utils/filter-out-styled-system-spacing-props.js";import k 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 F(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 A(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 M=r.forwardRef(((r,W)=>{var{adaptiveLabelBreakpoint:M,allowEmptyValue:S,autoFocus:I,"data-element":E,"data-role":T,disabled:V,disablePortal:K=!0,helpAriaLabel:z,labelInline:R,minDate:N,maxDate:q,onBlur:G,onChange:$,onClick:H,onFocus:J,onKeyDown:Q,pickerProps:U,readOnly:X,size:Y="medium",tooltipPosition:Z,value:ee,inputWidth:te,labelWidth:re,maxWidth:ne,inputName:oe,onPickerClose:ae,onPickerOpen:le,dateFormatOverride:ie,datePickerAriaLabel:ue,datePickerAriaLabelledBy:se,validationMessagePositionTop:ce=!0}=r,pe=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(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","dateFormatOverride","datePickerAriaLabel","datePickerAriaLabelledBy","validationMessagePositionTop"]);const de=n(null),me=n(null),fe=n(null),be=n(!1),ye=n(!1),ve=n(!1),ge=O(),{dateFnsLocale:Oe,dateFormatOverride:_e}=ge.date,{format:Pe,formats:je}=o((()=>k(Oe(),ie||_e)),[Oe,_e,ie]),{inputRefMap:ke,setInputRefMap:he,validationMessagePositionTop:we}=a(x),[De,xe]=l(!1),[Le,Ce]=l((()=>{if(s(ee,Oe()))return d(ee)?c(ee):p(Pe,ee)})),Be=n(!0),We=n(C()),Fe=null!=we?we:ce,Ae=e=>S&&!e.length?e:null,Me=e=>{const{id:t,name:r}=e.target,[n,o]=m(e.target.value,je),a="blur"===e.type?y(Pe,Le):e.target.value,l=f(p(n,o))?g(...b(n,o)):Ae(e.target.value);return{target:A(F({},r&&{name:r},t&&{id:t}),{value:{formattedValue:a,rawValue:l}})}},Se=L((()=>{var e,t;De&&(be.current=!0,null===(e=fe.current)||void 0===e||e.focus(),ye.current=!1,null===(t=fe.current)||void 0===t||t.blur(),xe(!1),null==ae||ae(),be.current=!1)}),"mousedown"),Ie=e=>{H&&H(e)},Ee=i((e=>{var t;fe.current=e,me.current=null==e?void 0:e.parentElement,W&&("function"==typeof W?W(e):W.current=e),oe&&(null==ke||null===(t=ke[oe])||void 0===t?void 0:t.setOpen)!==xe&&(null==he||he({[oe]:{isBlurBlocked:ye,setOpen:xe}}))}),[oe,ke,he,W]);u((()=>{const[e,t]=m(ee,je);e&&t&&f(p(e,t))?Ce(p(...b(e,t))):d(ee)&&Be.current?Ce(c(ee)):Ce(void 0)}),[ee,je]);const Te=P(pe);return e(h,A(F(A(F({ref:de,role:"presentation",size:Y,labelInline:R},Te),{applyDateRangeStyling:!!ke,maxWidth:ne,inputWidth:te}),B("date",{"data-element":E,"data-role":T})),{children:[t(w,A(F({},j(pe)),{"data-component":"date-input",value:(()=>{if(d(ee)&&Be.current)return y(Pe,c(ee));const e=v(ee),t=v(Pe),r=()=>ee.split("").map((r=>r===e?t:r)).join("");if(Be.current&&e!==t&&f(p(Pe,r()))){Be.current=!1;const[e,t]=m(r(),je);return y(Pe,p(...b(e,t)))}return ee})(),onBlur:e=>{if(V||X)return;let t;if(f(Le)){t=Me(e);const r=d(ee)?y(Pe,c(ee)):ee,[,n]=m(r,je);y(Pe,Le)!==n&&$(t)}else{const{id:r,name:n}=e.target;t={target:A(F({},n&&{name:n},r&&{id:r}),{value:{formattedValue:e.target.value,rawValue:Ae(e.target.value)}})}}ye.current||G&&G(t)},onChange:e=>{Be.current=!1,$(Me(e))},onClick:Ie,onFocus:e=>{V||X||(ye.current=!1,J&&J(e))},onKeyDown:e=>{if(Q&&Q(e),De&&_.isTabKey(e)){if(_.isShiftKey(e))xe(!1),null==ae||ae();else if(!K){var t,r;e.preventDefault(),null===(r=document)||void 0===r||null===(t=r.querySelector(`[id="${We.current}"]`))||void 0===t||t.focus()}be.current=!1}},iconOnClick:Ie,onMouseDown:()=>{Se(),he&&(ye.current=!0),De||null==le||le()},iconOnMouseDown:()=>{ye.current=!0,be.current=!0,Se(),De?(xe(!1),null==ae||ae()):(xe(!0),null==le||le())},inputIcon:"calendar",labelInline:R,ref:Ee,adaptiveLabelBreakpoint:M,tooltipPosition:Z,helpAriaLabel:z,autoFocus:I,size:Y,disabled:V,readOnly:X,inputWidth:te,labelWidth:re,maxWidth:ne,m:0,validationMessagePositionTop:Fe})),t(D,{disablePortal:K,inputElement:me,pickerProps:U,selectedDays:Le,onDayClick:(e,t)=>{var r;Ce(e),$(Me(A(F({},t),{target:A(F({},t.target),{value:y(Pe,e)})}))),ve.current=!0,null===(r=fe.current)||void 0===r||r.focus(),xe(!1)},minDate:N,maxDate:q,pickerMouseDown:()=>{ye.current=!0,Se()},open:De,setOpen:xe,pickerTabGuardId:We.current,onPickerClose:ae,ariaLabel:ue,ariaLabelledBy:se})]}))}));export{M as DateInput,M as default};