carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 4.77 kB
JavaScript
import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import{offset as o,flip as n}from"@floating-ui/dom";import{useState as l,useMemo as a,useRef as i,useCallback as c,useContext as s,useEffect as u}from"react";import{DayPicker as d,defaultLocale as p}from"react-day-picker";import m from"../../../../hooks/__internal__/useLocale/useLocale.js";import y from"../../../../__internal__/popover/popover.component.js";import{Navbar as f}from"../navbar/navbar.component.js";import{Weekday as b}from"../weekday/weekday.component.js";import{getDisabledDays as v}from"../utils.js";import{defaultFocusableSelectors as g}from"../../../../__internal__/focus-trap/focus-trap-utils.js";import O from"../../../../__internal__/utils/helpers/events/events.js";import h from"../../../flat-table/__internal__/flat-table.context.js";import j from"../../../../__internal__/utils/logger/index.js";import w from"./day-picker.style.js";function _(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function k(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){_(e,t,r[t])}))}return e}const D=[o(3),n({fallbackStrategy:"initialPlacement"})],P=f;let S=!1;const x=({inputElement:o,minDate:n,maxDate:f,selectedDays:_,disablePortal:x=!0,onDayClick:q,pickerMouseDown:K,pickerProps:M,open:T,setOpen:A,pickerTabGuardId:I,onPickerClose:C,ariaLabel:E,ariaLabelledBy:F})=>{!S&&x&&(S=!0,j.deprecate("`disablePortal` is deprecated in DateInput and DateRange, and support will soon be removed."));const[L,N]=l(_||new Date),z=m(),{localize:W,options:B}=z.date.dateFnsLocale(),{weekStartsOn:U}=B||{},$=a((()=>Array.from({length:7}).map(((e,t)=>null==W?void 0:W.day(t)))),[W]),G=a((()=>{const e=e=>z.locale().includes(e);return Array.from({length:7}).map(((t,r)=>null==W?void 0:W.day(r,["de","pl"].some(e)?{width:"wide"}:{width:"abbreviated"}).substring(0,e("de")?2:3)))}),[z,W]),H=i(null),R=c((e=>{var t,r;T&&O.isEscKey(e)&&(N(_),null===(r=o.current)||void 0===r||null===(t=r.querySelector("input"))||void 0===t||t.focus(),A(!1),null==C||C(),e.stopPropagation())}),[o,C,T,_,A]),{isInFlatTable:Y,setHasOpenDatePicker:J}=s(h);return u((()=>{null==J||J(!!T)}),[T,J]),u((()=>{_&&N(_)}),[_]),u((()=>{!T&&_&&(null==L?void 0:L.getMonth())!==(null==_?void 0:_.getMonth())&&N(_)}),[L,T,_]),T?e(t,{children:e(y,{placement:"bottom-start",reference:o,middleware:D,disablePortal:x,disableBackgroundUI:Y,popoverStrategy:"fixed",children:r(w,{id:"styled-day-picker","data-role":"date-picker",ref:H,onMouseDown:K,onKeyUp:R,onKeyDown:e=>{var t,r,n;(null===(t=H.current)||void 0===t?void 0:t.querySelector(".rdp-nav button"))===document.activeElement&&O.isTabKey(e)&&O.isShiftKey(e)&&(e.preventDefault(),A(!1),null==C||C(),null===(n=o.current)||void 0===n||null===(r=n.querySelector("input"))||void 0===r||r.focus())},role:"region","aria-label":E,"aria-labelledby":F,children:[e("div",{id:I,tabIndex:0,onFocus:()=>{var e,t;null===(t=H.current)||void 0===t||null===(e=t.querySelector("button"))||void 0===e||e.focus()}}),e(d,(Q=k({formatters:{formatCaption:e=>`${null==W?void 0:W.month(e.getMonth())} ${e.getFullYear()}`},required:!1,weekStartsOn:U,onMonthChange:N,disabled:v(n,f),locale:{localize:k({},p.localize)},selected:_,month:L||new Date,onDayClick:(e,t,r)=>{((e,t)=>{e&&(null==q||q(e,t)),null==C||C()})(e,r)},components:{Nav:P,Weekday:t=>{const{className:r,"aria-label":o}=t,n={Sunday:0,Monday:1,Tuesday:2,Wednesday:3,Thursday:4,Friday:5,Saturday:6}[o];return e(b,{className:r,title:$[n],children:G[n]})}},fixedWeeks:!0,defaultMonth:_||void 0,onDayKeyDown:(e,t,r)=>{var n;n=r,setTimeout((()=>{if(O.isTabKey(n)&&!O.isShiftKey(n)){var e;n.preventDefault(),A(!1),null==C||C();const l=null===(e=o.current)||void 0===e?void 0:e.querySelector("input");if(l){var t,r;const e=Array.from(document.querySelectorAll(g)||[]),o=Array.from((null===(t=H.current)||void 0===t?void 0:t.querySelectorAll("button, [tabindex]"))||[]),n=e.filter((e=>-1!==Number(e.tabIndex)&&!o.includes(e))),a=n.indexOf(l)+1;null===(r=n[a])||void 0===r||r.focus()}}}),0)}},M),V={showOutsideDays:!0,mode:"single"},V=null!=V?V:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Q,Object.getOwnPropertyDescriptors(V)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(V)).forEach((function(e){Object.defineProperty(Q,e,Object.getOwnPropertyDescriptor(V,e))})),Q))]})})}):null;var Q,V};x.displayName="DatePicker";export{x as DatePicker,x as default};