@gsretail.com/gui-core/build/esm/node_modules/@mui/x-date-pickers/YearPicker/YearPicker.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import e from"../../../@babel/runtime/helpers/esm/extends.js";import*as r from"react";import t from"../../../prop-types/index.js";import{styled as a,useTheme as o,useThemeProps as s}from"@mui/material/styles";import{unstable_composeClasses as n}from"@mui/material";import{clsx as l}from"../../../clsx/dist/clsx.m.js";import{useForkRef as i}from"@mui/material/utils";import{PickersYear as u}from"./PickersYear.js";import{useNow as c,useUtils as m,useDefaultDates as f}from"../internals/hooks/useUtils.js";import{WrapperVariantContext as d}from"../internals/components/wrappers/WrapperVariantContext.js";import{getYearPickerUtilityClass as p}from"./yearPickerClasses.js";import{parseNonNullablePickerDate as b}from"../internals/utils/date-utils.js";import{jsx as h}from"react/jsx-runtime";import g from"../../utils/esm/useControlled.js";const Y=a("div",{name:"MuiYearPicker",slot:"Root",overridesResolver:(e,r)=>r.root})({display:"flex",flexDirection:"row",flexWrap:"wrap",overflowY:"auto",height:"100%",padding:"0 4px",maxHeight:"304px"}),x=r.forwardRef((function(t,a){const x=c(),D=o(),k=m(),y=function(r,t){const a=m(),o=f(),n=s({props:r,name:t});return e({disablePast:!1,disableFuture:!1},n,{minDate:b(a,n.minDate,o.minDate),maxDate:b(a,n.maxDate,o.maxDate)})}(t,"MuiYearPicker"),{autoFocus:C,className:w,date:F,disabled:v,disableFuture:j,disablePast:P,maxDate:R,minDate:A,onChange:T,readOnly:H,shouldDisableYear:N,disableHighlightToday:E,onYearFocus:M,hasFocus:O,onFocusedViewChange:V}=y,B=y,S=(e=>{const{classes:r}=e;return n({root:["root"]},p,r)})(B),q=r.useMemo((()=>null!=F?F:k.startOfYear(x)),[x,k,F]),U=r.useMemo((()=>null!=F?k.getYear(F):E?null:k.getYear(x)),[x,F,k,E]),W=r.useContext(d),I=r.useRef(null),[K,L]=r.useState((()=>U||k.getYear(x))),[_,z]=g({name:"YearPicker",state:"hasFocus",controlled:O,default:C}),G=r.useCallback((e=>{z(e),V&&V(e)}),[z,V]),J=r.useCallback((e=>!(!P||!k.isBeforeYear(e,x))||(!(!j||!k.isAfterYear(e,x))||(!(!A||!k.isBeforeYear(e,A))||(!(!R||!k.isAfterYear(e,R))||!(!N||!N(e)))))),[j,P,R,A,x,N,k]),Q=(e,r,t="finish")=>{if(H)return;const a=k.setYear(q,r);T(a,t)},X=r.useCallback((e=>{J(k.setYear(q,e))||(L(e),G(!0),null==M||M(e))}),[J,k,q,G,M]);r.useEffect((()=>{L((e=>null!==U&&e!==U?U:e))}),[U]);const Z="desktop"===W?4:3,$=r.useCallback(((e,r)=>{switch(e.key){case"ArrowUp":X(r-Z),e.preventDefault();break;case"ArrowDown":X(r+Z),e.preventDefault();break;case"ArrowLeft":X(r+("ltr"===D.direction?-1:1)),e.preventDefault();break;case"ArrowRight":X(r+("ltr"===D.direction?1:-1)),e.preventDefault()}}),[X,D.direction,Z]),ee=r.useCallback(((e,r)=>{X(r)}),[X]),re=r.useCallback(((e,r)=>{K===r&&G(!1)}),[K,G]),te=k.getYear(x),ae=r.useRef(null),oe=i(a,ae);return r.useEffect((()=>{if(C||null===ae.current)return;const e=ae.current.querySelector('[tabindex="0"]');if(!e)return;const r=e.offsetHeight,t=e.offsetTop,a=ae.current.clientHeight,o=ae.current.scrollTop,s=t+r;r>a||t<o||(ae.current.scrollTop=s-a/2-r/2)}),[C]),h(Y,{ref:oe,className:l(S.root,w),ownerState:B,children:k.getYearRange(A,R).map((e=>{const r=k.getYear(e),t=r===U;return h(u,{selected:t,value:r,onClick:Q,onKeyDown:$,autoFocus:_&&r===K,ref:t?I:void 0,disabled:v||J(e),tabIndex:r===K?0:-1,onFocus:ee,onBlur:re,"aria-current":te===r?"date":void 0,children:k.format(e,"year")},k.format(e,"year"))}))})}));"production"!==process.env.NODE_ENV&&(x.propTypes={autoFocus:t.bool,classes:t.object,className:t.string,date:t.any,disabled:t.bool,disableFuture:t.bool,disableHighlightToday:t.bool,disablePast:t.bool,hasFocus:t.bool,maxDate:t.any,minDate:t.any,onChange:t.func.isRequired,onFocusedDayChange:t.func,onFocusedViewChange:t.func,onYearFocus:t.func,readOnly:t.bool,shouldDisableYear:t.func});export{x as YearPicker};