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

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

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